/* mioMemo v0.9.4 — Keep-like masonry + pure Markdown WYSIWYG */

.memo-grid {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 14px;
  align-items: start;
  column-width: initial !important;
  column-count: initial !important;
}

.memo-grid.masonry-ready {
  display: block !important;
  min-height: 1px;
}

.memo-grid.masonry-ready .memo-card {
  position: absolute;
  margin: 0 !important;
  transition:
    transform 160ms ease,
    width 160ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
  will-change: transform;
}

.memo-card {
  box-sizing: border-box;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px !important;
}

.memo-card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.memo-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.memo-card-preview {
  position: relative;
  max-height: 17rem;
  overflow: hidden;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.memo-card-preview.is-truncated {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

.memo-card-preview.vditor-reset,
.memo-view-content.vditor-reset {
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
}

.memo-card-preview.vditor-reset {
  padding: 0 !important;
  font-size: 0.96rem;
}

.memo-card-preview.vditor-reset > :first-child,
.memo-view-content.vditor-reset > :first-child {
  margin-top: 0 !important;
}

.memo-card-preview.vditor-reset > :last-child,
.memo-view-content.vditor-reset > :last-child {
  margin-bottom: 0 !important;
}

.memo-card-preview h1,
.memo-card-preview h2,
.memo-card-preview h3,
.memo-card-preview h4,
.memo-card-preview h5,
.memo-card-preview h6 {
  margin: 0.55rem 0 0.4rem;
  line-height: 1.35;
}

.memo-card-preview p,
.memo-card-preview ul,
.memo-card-preview ol,
.memo-card-preview blockquote {
  margin: 0 0 0.72rem;
}

.memo-groups {
  margin-top: 12px;
}

.memo-meta.memo-meta-clean {
  margin-top: 12px;
  padding-top: 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 0;
}

.memo-meta-clean .memo-date {
  line-height: 1.3;
}

.memo-editor-panel {
  overflow: hidden;
}

.memo-editor-header {
  padding: 14px 18px !important;
}

.memo-view-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 20px;
}

.memo-view-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memo-view-title {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.4;
}

.memo-view-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memo-view-meta {
  font-size: 0.86rem;
  opacity: 0.72;
}

.memo-view-content {
  max-height: min(58vh, 38rem);
  overflow: auto;
  line-height: 1.7;
  padding: 4px 2px 4px 0 !important;
}

.memo-view-footer {
  justify-content: flex-end;
  padding-top: 4px;
}

.danger-button {
  color: #d64b4b;
}

.memo-editor-composer {
  padding: 16px 18px 18px !important;
}

.mio-markdown-editor {
  min-height: 320px;
  margin: 0 0 12px;
}

.mio-markdown-editor .vditor {
  border-radius: 10px;
  overflow: hidden;
}

.mio-markdown-editor .vditor-toolbar {
  padding: 4px 6px;
}

.mio-markdown-editor .vditor-wysiwyg,
.mio-markdown-editor .vditor-ir,
.mio-markdown-editor .vditor-sv {
  min-height: 280px !important;
  padding: 16px 18px !important;
}

.markdown-fallback-input {
  width: 100%;
  min-height: 300px;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 10px;
  resize: vertical;
}

.markdown-editor-notice {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  background: rgba(234, 179, 8, 0.12);
}

/* 카드에서는 표를 표 형태로 보여주되 너무 커지지 않게 제한 */
.memo-card-preview table {
  width: 100%;
  table-layout: fixed;
  font-size: 0.82rem;
}

.memo-card-preview th,
.memo-card-preview td {
  padding: 5px 6px !important;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memo-card-preview th:nth-child(n+5),
.memo-card-preview td:nth-child(n+5) {
  display: none;
}

.memo-card-preview tbody tr:nth-child(n+5) {
  display: none;
}

@media (max-width: 840px) {
  .memo-grid:not(.masonry-ready) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memo-card {
    padding: 13px !important;
  }

  .memo-card-preview {
    max-height: 14rem;
  }

  .memo-view-pane {
    padding: 14px 16px 18px;
  }

  .memo-editor-composer {
    padding: 12px 14px 16px !important;
  }
}

@media (max-width: 359px) {
  .memo-grid:not(.masonry-ready) {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   mioMemo v0.9.7 — card/view/editor dark-theme fixes
   ========================================================= */

/* 리스트 카드에는 내부 스크롤을 만들지 않는다. 긴 내용은 카드 미리보기에서 잘라낸다. */
.memo-card-preview,
.memo-card-preview.vditor-reset,
.memo-card-preview.vditor-reset > div,
.memo-card-preview .vditor-reset,
.memo-card-preview pre,
.memo-card-preview table {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

.memo-card-preview::-webkit-scrollbar,
.memo-card-preview *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.memo-card-preview {
  max-height: 16rem !important;
}

/* Vditor 기본 table 스타일을 앱 테마 색으로 덮어써 카드/보기에서 항상 읽히게 한다. */
.memo-card-preview table,
.memo-view-content table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.memo-card-preview table {
  display: table !important;
  table-layout: fixed !important;
}

.memo-card-preview thead,
.memo-card-preview tbody,
.memo-card-preview tr,
.memo-view-content thead,
.memo-view-content tbody,
.memo-view-content tr {
  background: transparent !important;
  color: var(--text) !important;
}

.memo-card-preview th,
.memo-card-preview td,
.memo-view-content th,
.memo-view-content td {
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.memo-card-preview th,
.memo-view-content th {
  background: var(--surface-soft) !important;
  font-weight: 700 !important;
}

.memo-card-preview tr:nth-child(even) td,
.memo-view-content tr:nth-child(even) td {
  background: var(--surface-soft) !important;
}

/* View 팝업은 header/footer를 고정 영역으로 두고 본문만 스크롤한다. */
.memo-editor-panel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.memo-editor-header {
  flex: 0 0 auto;
}

.memo-view-pane {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: hidden !important;
  padding: 18px 22px 20px !important;
}

.memo-view-head {
  flex: 0 0 auto;
  padding: 0 2px 2px;
}

.memo-view-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  padding: 8px 10px 12px 2px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.memo-view-footer {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 12px 2px 0 !important;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.memo-view-content::-webkit-scrollbar,
.mio-markdown-editor .vditor-wysiwyg::-webkit-scrollbar,
.mio-markdown-editor .vditor-ir::-webkit-scrollbar,
.mio-markdown-editor .vditor-sv::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.memo-view-content::-webkit-scrollbar-track,
.mio-markdown-editor .vditor-wysiwyg::-webkit-scrollbar-track,
.mio-markdown-editor .vditor-ir::-webkit-scrollbar-track,
.mio-markdown-editor .vditor-sv::-webkit-scrollbar-track {
  background: transparent;
}

.memo-view-content::-webkit-scrollbar-thumb,
.mio-markdown-editor .vditor-wysiwyg::-webkit-scrollbar-thumb,
.mio-markdown-editor .vditor-ir::-webkit-scrollbar-thumb,
.mio-markdown-editor .vditor-sv::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--line-strong);
  background-clip: padding-box;
}

html[data-theme='black'] .memo-view-content,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg,
html[data-theme='black'] .mio-markdown-editor .vditor-ir,
html[data-theme='black'] .mio-markdown-editor .vditor-sv {
  scrollbar-color: #555b61 #202224;
}

html[data-theme='black'] .memo-view-content::-webkit-scrollbar-track,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg::-webkit-scrollbar-track,
html[data-theme='black'] .mio-markdown-editor .vditor-ir::-webkit-scrollbar-track,
html[data-theme='black'] .mio-markdown-editor .vditor-sv::-webkit-scrollbar-track {
  background: #202224;
}

html[data-theme='black'] .memo-view-content::-webkit-scrollbar-thumb,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg::-webkit-scrollbar-thumb,
html[data-theme='black'] .mio-markdown-editor .vditor-ir::-webkit-scrollbar-thumb,
html[data-theme='black'] .mio-markdown-editor .vditor-sv::-webkit-scrollbar-thumb {
  background: #555b61;
  background-clip: padding-box;
}

/* 큰 Markdown heading이 있어도 popup footer가 밀려나지 않도록 view 본문 크기를 안정화한다. */
.memo-view-content h1 {
  font-size: clamp(1.6rem, 4vw, 2rem) !important;
}

.memo-view-content h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.75rem) !important;
}

.memo-view-content h3 {
  font-size: clamp(1.2rem, 3vw, 1.5rem) !important;
}

@media (max-width: 700px) {
  .memo-view-pane {
    padding: 14px 16px max(14px, env(safe-area-inset-bottom)) !important;
  }

  .memo-view-content {
    padding: 6px 8px 10px 0 !important;
  }

  .memo-view-footer {
    padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   mioMemo v0.9.7 — mobile WYSIWYG dark-theme readability
   ========================================================= */

/* Vditor may load its own content theme after the app stylesheet.
   Keep the memo editor's editing surface tied to mioMemo theme variables. */
html[data-theme='black'] .mio-markdown-editor .vditor,
html[data-theme='black'] .mio-markdown-editor .vditor-content,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg.vditor-reset,
html[data-theme='black'] .mio-markdown-editor .vditor-ir,
html[data-theme='black'] .mio-markdown-editor .vditor-sv {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  caret-color: var(--text) !important;
}

html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg[contenteditable='true'] {
  color: var(--text) !important;
  caret-color: var(--text) !important;
}

html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg p,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg li,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg h1,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg h2,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg h3,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg h4,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg h5,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg h6,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg blockquote,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg td,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg th {
  color: var(--text) !important;
}

html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg:empty::before,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg[data-placeholder]::before {
  color: var(--text-soft) !important;
  opacity: 1 !important;
}

html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg table,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg th,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg td {
  border-color: var(--line-strong) !important;
  background-color: var(--surface) !important;
}

html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg th {
  background-color: var(--surface-soft) !important;
}

/* =========================================================
   mioMemo v0.9.8 — long-document editor scrolling / mobile viewport
   ========================================================= */

/*
 * Keep the dialog shell fixed and let only the actual document surface scroll.
 * This prevents a long Vditor document from growing below an overflow:hidden panel.
 */
.memo-editor-composer {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 12px !important;
}

.mio-markdown-editor {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 0 0 8px;
}

.mio-markdown-editor .vditor {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
}

.mio-markdown-editor .vditor-toolbar {
  flex: 0 0 auto;
}

.mio-markdown-editor .vditor-content {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.mio-markdown-editor .vditor-wysiwyg,
.mio-markdown-editor .vditor-ir,
.mio-markdown-editor .vditor-sv {
  flex: 1 1 auto;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 12px 2.5rem;
}

.memo-editor-composer .markdown-fallback-input {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto;
  resize: none;
}

.memo-editor-composer .composer-options,
.memo-editor-composer > .composer-footer,
.memo-editor-composer .markdown-editor-notice {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  /* visualViewport height is updated from JS when the software keyboard opens. */
  .memo-editor-overlay {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--memo-editor-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  .memo-editor-panel {
    width: 100%;
    height: 100% !important;
    min-height: 0;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Header stays usable, but no longer consumes a large strip of the phone screen. */
  .memo-editor-header {
    min-height: 2.75rem;
    padding: max(.3rem, env(safe-area-inset-top)) .45rem .3rem .65rem !important;
  }

  .memo-editor-close {
    width: 2rem;
    height: 2rem;
  }

  /* Remove decorative outer padding: the editor itself owns the usable surface. */
  .memo-editor-composer {
    padding: 0 !important;
  }

  .mio-markdown-editor {
    margin: 0;
  }

  .mio-markdown-editor .vditor {
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
  }

  .mio-markdown-editor .vditor-toolbar {
    padding: 2px 4px !important;
  }

  .mio-markdown-editor .vditor-wysiwyg,
  .mio-markdown-editor .vditor-ir,
  .mio-markdown-editor .vditor-sv {
    padding: 8px 10px 2rem !important;
    scroll-padding-block: 10px 3rem;
  }

  .memo-editor-composer .markdown-fallback-input {
    padding: 8px 10px 2rem !important;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .memo-editor-composer .composer-options {
    padding: 3px 8px 2px;
  }

  .memo-editor-composer .group-picker summary {
    padding: 4px 7px;
  }

  .memo-editor-composer > .composer-footer {
    min-height: 2.5rem;
    padding: 3px 8px max(4px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
}

/* Explicitly keep action/footer controls outside the scrolling document surface. */
.memo-editor-composer > .composer-footer {
  flex: 0 0 auto;
}

/* =========================================================
   mioMemo v0.10.0 — compact desktop editor / explicit cancel action
   ========================================================= */

/*
 * Desktop editing should spend nearly all dialog space on the document itself.
 * Remove the nested-card/decorative gutters left from the early composer layout.
 */
@media (min-width: 701px) {
  .memo-editor-overlay {
    padding: .5rem !important;
  }

  .memo-editor-panel {
    width: min(72rem, 100%) !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: .55rem !important;
  }

  .memo-editor-header {
    min-height: 2.75rem;
    padding: .4rem .55rem .4rem .7rem !important;
  }

  .memo-editor-composer {
    padding: 0 !important;
  }

  .mio-markdown-editor {
    margin: 0 !important;
  }

  .mio-markdown-editor .vditor {
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
  }

  .mio-markdown-editor .vditor-toolbar {
    padding: 2px 4px !important;
  }

  .mio-markdown-editor .vditor-wysiwyg,
  .mio-markdown-editor .vditor-ir,
  .mio-markdown-editor .vditor-sv {
    padding: 8px 10px 1rem !important;
    scroll-padding-block: 8px 2rem;
  }

  .memo-editor-composer .markdown-fallback-input {
    padding: 8px 10px 1rem !important;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .memo-editor-composer .composer-options {
    padding: 4px 8px 2px !important;
  }

  .memo-editor-composer .group-picker summary {
    padding: 4px 7px;
  }

  .memo-editor-composer > .composer-footer {
    min-height: 2.5rem;
    padding: 4px 8px !important;
  }
}

/* "보기" was visually ambiguous here: this action discards edit changes. */
.memo-editor-composer .cancel-edit-button {
  min-width: 3.25rem;
  padding: 6px 12px;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-soft) !important;
  color: var(--text) !important;
  font-weight: 600;
  opacity: 1;
}

.memo-editor-composer .cancel-edit-button:hover,
.memo-editor-composer .cancel-edit-button:focus-visible {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
}

/* =========================================================
   mioMemo v0.10.0 — remove editor clutter / reclaim real content area
   ========================================================= */

/* The created/updated line was consuming prime view space. Keep the data only in title, not inline. */
.memo-view-meta {
  display: none !important;
}

/* Remove decorative heading/structure markers and any artificial content centering/gutters. */
.mio-markdown-editor .vditor-wysiwyg [data-node-id],
.mio-markdown-editor .vditor-ir [data-node-id],
.mio-markdown-editor .vditor-sv [data-node-id],
.mio-markdown-editor .vditor-wysiwyg > *,
.mio-markdown-editor .vditor-ir > *,
.mio-markdown-editor .vditor-sv > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mio-markdown-editor .vditor-wysiwyg [data-node-id]::before,
.mio-markdown-editor .vditor-ir [data-node-id]::before,
.mio-markdown-editor .vditor-sv [data-node-id]::before,
.mio-markdown-editor .vditor-wysiwyg .vditor-wysiwyg__block::before,
.mio-markdown-editor .vditor-wysiwyg .vditor-wysiwyg__marker,
.mio-markdown-editor .vditor-ir .vditor-ir__marker,
.mio-markdown-editor .vditor-sv .vditor-sv__marker {
  content: none !important;
  display: none !important;
}

/* Small memos should not create a giant empty well underneath the text. */
@media (min-width: 701px) {
  .memo-editor-overlay {
    padding: .25rem !important;
  }

  .memo-editor-panel {
    width: min(78rem, 100%) !important;
    max-height: calc(100dvh - .5rem) !important;
  }

  .memo-editor-composer {
    flex: 0 1 auto !important;
    overflow: visible !important;
  }

  .mio-markdown-editor {
    flex: 0 1 auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  .mio-markdown-editor .vditor {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .mio-markdown-editor .vditor-content {
    display: block !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .mio-markdown-editor .vditor-wysiwyg,
  .mio-markdown-editor .vditor-ir,
  .mio-markdown-editor .vditor-sv {
    flex: 0 1 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 8rem !important;
    max-height: min(64vh, 44rem) !important;
    padding: 4px 6px .75rem !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scroll-padding-block: 4px 1rem;
  }

  .memo-editor-composer .markdown-fallback-input {
    min-height: 8rem !important;
    max-height: min(64vh, 44rem) !important;
    padding: 4px 6px .75rem !important;
  }

  .memo-editor-composer .composer-options {
    padding: 2px 6px 2px !important;
  }

  .memo-editor-composer > .composer-footer {
    padding: 4px 6px !important;
  }
}

@media (max-width: 700px) {
  .mio-markdown-editor .vditor-wysiwyg,
  .mio-markdown-editor .vditor-ir,
  .mio-markdown-editor .vditor-sv {
    padding: 6px 8px 1.5rem !important;
  }

  .memo-editor-composer .markdown-fallback-input {
    padding: 6px 8px 1.5rem !important;
  }

  .memo-view-pane {
    padding: 12px 14px 14px !important;
  }
}

/* =========================================================
   mioMemo v0.10.2 — full-surface editor, deterministic viewport sizing
   ========================================================= */

/*
 * Editing is no longer a centered document card. The dialog owns the full
 * visual viewport and every pixel between toolbar and footer is editor space.
 */
.memo-editor-overlay {
  top: var(--memo-editor-viewport-top, 0px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100vw !important;
  height: var(--memo-editor-viewport-height, 100dvh) !important;
  padding: 0 !important;
  overflow: hidden !important;
  place-items: stretch !important;
  background: var(--surface) !important;
}

.memo-editor-panel {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.memo-editor-header {
  flex: 0 0 auto !important;
  min-height: 2.75rem !important;
  padding: max(.35rem, env(safe-area-inset-top)) .55rem .35rem .65rem !important;
}

.memo-editor-composer {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.mio-markdown-editor {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.mio-markdown-editor .vditor {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.mio-markdown-editor .vditor-toolbar {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 2px 4px !important;
}

.mio-markdown-editor .vditor-content {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.mio-markdown-editor .vditor-wysiwyg,
.mio-markdown-editor .vditor-ir,
.mio-markdown-editor .vditor-sv {
  box-sizing: border-box !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 8px 2rem !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 6px 3rem;
}

/* Never recenter or cap individual Markdown blocks. */
.mio-markdown-editor .vditor-wysiwyg > *,
.mio-markdown-editor .vditor-ir > *,
.mio-markdown-editor .vditor-sv > *,
.mio-markdown-editor .vditor-wysiwyg [data-node-id],
.mio-markdown-editor .vditor-ir [data-node-id],
.mio-markdown-editor .vditor-sv [data-node-id] {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Vditor's WYSIWYG heading labels (H1/H2/...) are editor chrome, not memo content. */
.mio-markdown-editor .vditor-wysiwyg h1::before,
.mio-markdown-editor .vditor-wysiwyg h2::before,
.mio-markdown-editor .vditor-wysiwyg h3::before,
.mio-markdown-editor .vditor-wysiwyg h4::before,
.mio-markdown-editor .vditor-wysiwyg h5::before,
.mio-markdown-editor .vditor-wysiwyg h6::before,
.mio-markdown-editor .vditor-wysiwyg [data-type='heading']::before,
.mio-markdown-editor .vditor-ir [data-type='heading']::before {
  content: none !important;
  display: none !important;
}

.mio-markdown-editor .vditor-wysiwyg h1,
.mio-markdown-editor .vditor-wysiwyg h2,
.mio-markdown-editor .vditor-wysiwyg h3,
.mio-markdown-editor .vditor-wysiwyg h4,
.mio-markdown-editor .vditor-wysiwyg h5,
.mio-markdown-editor .vditor-wysiwyg h6 {
  padding-left: 0 !important;
  margin-left: 0 !important;
  max-width: none !important;
}

.memo-editor-composer .markdown-fallback-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 8px 2rem !important;
  overflow: auto !important;
  resize: none !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
}

.memo-editor-composer .composer-options,
.memo-editor-composer > .composer-footer,
.memo-editor-composer .markdown-editor-notice {
  flex: 0 0 auto !important;
}

.memo-editor-composer .composer-options {
  padding: 2px 6px !important;
}

.memo-editor-composer > .composer-footer {
  min-height: 2.5rem !important;
  padding: 4px 6px max(4px, env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
}

/* =========================================================
   mioMemo v0.10.2 — single WYSIWYG surface hotfix
   ========================================================= */

/*
 * Vditor keeps WYSIWYG, IR and SV surfaces in the same content shell.
 * v0.10.1 accidentally forced all three surfaces to display, producing
 * a three-column editor. mioMemo is intentionally WYSIWYG-only, so only
 * that surface may participate in layout.
 */
.mio-markdown-editor .vditor-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.mio-markdown-editor .vditor-wysiwyg {
  box-sizing: border-box !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 8px 2rem !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Inactive Vditor modes must never consume layout space in mioMemo. */
.mio-markdown-editor .vditor-ir,
.mio-markdown-editor .vditor-sv {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   mioMemo v0.10.3 — exclusive panes + responsive modal geometry
   ========================================================= */

/*
 * v0.10.2 could show view and edit panes together because later !important
 * display rules beat the shared .hidden rule. Hidden state is now absolute.
 */
#memoViewPane.hidden,
#memoEditPane.hidden,
#memoViewPane[hidden],
#memoEditPane[hidden] {
  display: none !important;
}

/* Default: tablet/desktop use a centered modal, not a full-screen workspace. */
.memo-editor-overlay {
  top: var(--memo-editor-viewport-top, 0px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100vw !important;
  height: var(--memo-editor-viewport-height, 100dvh) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(1rem, 2.5vw, 2rem) !important;
  background: var(--overlay) !important;
  overflow: hidden !important;
}

.memo-editor-panel {
  width: min(64rem, calc(100vw - 3rem)) !important;
  height: min(80vh, 46rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 64rem !important;
  max-height: calc(var(--memo-editor-viewport-height, 100dvh) - 2rem) !important;
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: .85rem !important;
  overflow: hidden !important;
  background: var(--surface) !important;
  box-shadow: 0 .8rem 2.2rem var(--shadow) !important;
}

/* View can be narrower and content-sized; edit gets more working room. */
.memo-editor-panel[data-mode='view'] {
  width: min(52rem, calc(100vw - 3rem)) !important;
  height: auto !important;
  max-width: 52rem !important;
  max-height: min(78vh, 42rem) !important;
}

.memo-editor-panel[data-mode='view'] .memo-view-pane {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: calc(min(78vh, 42rem) - 3rem) !important;
  overflow: hidden !important;
}

.memo-editor-panel[data-mode='view'] .memo-view-content {
  max-height: min(55vh, 31rem) !important;
  overflow-y: auto !important;
}

.memo-editor-panel[data-mode='edit'] {
  width: min(64rem, calc(100vw - 3rem)) !important;
  height: min(80vh, 46rem) !important;
}

.memo-editor-panel[data-mode='edit'] .memo-editor-composer {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Small phones alone use a full-screen modal. */
@media (max-width: 600px) {
  .memo-editor-overlay {
    place-items: stretch !important;
    padding: 0 !important;
    background: var(--surface) !important;
  }

  .memo-editor-panel,
  .memo-editor-panel[data-mode='view'],
  .memo-editor-panel[data-mode='edit'] {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .memo-editor-panel[data-mode='view'] .memo-view-pane {
    flex: 1 1 auto !important;
    max-height: none !important;
  }

  .memo-editor-panel[data-mode='view'] .memo-view-content {
    flex: 1 1 auto !important;
    max-height: none !important;
  }
}

/* =========================================================
   mioMemo v0.10.4 — modal closed-state must beat all geometry rules
   ========================================================= */

/*
 * v0.10.3 declared .memo-editor-overlay { display:grid !important } after
 * the shared .hidden rule. Because both selectors had the same specificity,
 * the later rule made a closed modal remain visible. Use the overlay ID and
 * the HTML hidden attribute so closed state is absolute regardless of order.
 */
#memoEditorOverlay.hidden,
#memoEditorOverlay[hidden],
#memoEditorOverlay[aria-hidden='true'] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#memoEditorOverlay:not(.hidden):not([hidden])[aria-hidden='false'] {
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   mioMemo v0.11.0 — favorites
   ========================================================= */

.memo-card {
  position: relative;
}

.memo-card > .memo-card-open .memo-title {
  padding-right: 2rem;
}

.memo-favorite-button {
  position: absolute;
  z-index: 4;
  top: .55rem;
  right: .55rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.memo-favorite-button:hover,
.memo-favorite-button:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
  outline: none;
}

.memo-favorite-button.active {
  color: #d6a400;
}

.memo-favorite-button:disabled {
  opacity: .45;
  cursor: default;
}

/* =========================================================
   mioMemo v0.12.1 — edit popup may close only by Save or Cancel
   ========================================================= */

/* In edit mode the generic dialog close action must not be offered. */
#memoEditorPanel[data-mode='edit'] #memoEditorClose,
#memoEditorPanel[data-mode='edit'] .memo-editor-close {
  display: none !important;
  pointer-events: none !important;
}

/* =========================================================
   mioMemo v0.14.1 — collage-only text scale
   ========================================================= */

.memo-card > .memo-card-open .memo-title {
  font-size: var(--memo-card-title-font-size, 1.05rem);
}

.memo-card-preview,
.memo-card-preview.vditor-reset {
  max-height: var(--memo-card-preview-max-height, 17rem);
}

.memo-card-preview.vditor-reset {
  font-size: var(--memo-card-preview-font-size, .96rem);
}


/* =========================================================
   mioMemo v0.14.1 — collage scale controls whole card density
   ========================================================= */

/* The percentage control is a card-density control: text, card chrome and
 * masonry target width shrink/grow together. Interactive controls keep their
 * existing hit target so favorites remain easy to click. */
.memo-grid {
  gap: var(--memo-card-gap, 14px) !important;
}

.memo-card {
  padding: var(--memo-card-padding, 16px) !important;
  border-radius: var(--memo-card-radius, 10px) !important;
}

.memo-card > .memo-card-open .memo-title {
  margin-bottom: var(--memo-card-title-margin-bottom, 10px) !important;
}

.memo-card-preview h1,
.memo-card-preview h2,
.memo-card-preview h3,
.memo-card-preview h4,
.memo-card-preview h5,
.memo-card-preview h6 {
  margin-top: var(--memo-card-heading-margin-top, .55rem) !important;
  margin-bottom: var(--memo-card-heading-margin-bottom, .4rem) !important;
}

.memo-card-preview p,
.memo-card-preview ul,
.memo-card-preview ol,
.memo-card-preview blockquote {
  margin-bottom: var(--memo-card-block-margin-bottom, .72rem) !important;
}

.memo-card .memo-groups {
  margin-top: var(--memo-card-groups-margin-top, 12px) !important;
}

.memo-card .memo-meta.memo-meta-clean {
  margin-top: var(--memo-card-meta-margin-top, 12px) !important;
  padding-top: var(--memo-card-meta-padding-top, 4px) !important;
}

@media (max-width: 619px) {
  .memo-grid {
    gap: var(--memo-card-mobile-gap, 10px) !important;
  }
}

/* =========================================================
   mioMemo v0.15.3 — consistent editor rhythm / empty-dark bootstrap
   ========================================================= */

/* Plain text lines should not alternate between paragraph-sized and double gaps. */
.mio-markdown-editor .vditor-wysiwyg {
  line-height: 1.5 !important;
}

.mio-markdown-editor .vditor-wysiwyg p,
.mio-markdown-editor .vditor-wysiwyg li,
.mio-markdown-editor .vditor-wysiwyg li > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

.mio-markdown-editor .vditor-wysiwyg ul,
.mio-markdown-editor .vditor-wysiwyg ol {
  margin-top: .25em !important;
  margin-bottom: .25em !important;
}

/* Headings remain visually separated, but use one predictable vertical rhythm. */
.mio-markdown-editor .vditor-wysiwyg h1,
.mio-markdown-editor .vditor-wysiwyg h2,
.mio-markdown-editor .vditor-wysiwyg h3,
.mio-markdown-editor .vditor-wysiwyg h4,
.mio-markdown-editor .vditor-wysiwyg h5,
.mio-markdown-editor .vditor-wysiwyg h6 {
  margin-top: .55em !important;
  margin-bottom: .25em !important;
  line-height: 1.3 !important;
}

/* The very first character in a brand-new empty memo must inherit dark theme too. */
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg p,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg div,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg span,
html[data-theme='black'] .mio-markdown-editor .vditor-wysiwyg li {
  color: var(--text) !important;
  caret-color: var(--text) !important;
}

/* =========================================================
   mioMemo v0.15.3 — user-controlled vertical spacing
   ========================================================= */

/*
 * Do not invent paragraph/heading gaps in edit, card preview, or memo view.
 * Vertical whitespace should come from the user's actual line/blank-line input,
 * not from renderer default margins.
 */
.mio-markdown-editor .vditor-wysiwyg,
.memo-card-preview.vditor-reset,
.memo-view-content.vditor-reset {
  line-height: 1.5 !important;
}

.mio-markdown-editor .vditor-wysiwyg p,
.mio-markdown-editor .vditor-wysiwyg ul,
.mio-markdown-editor .vditor-wysiwyg ol,
.mio-markdown-editor .vditor-wysiwyg li,
.mio-markdown-editor .vditor-wysiwyg li > p,
.mio-markdown-editor .vditor-wysiwyg blockquote,
.mio-markdown-editor .vditor-wysiwyg pre,
.mio-markdown-editor .vditor-wysiwyg h1,
.mio-markdown-editor .vditor-wysiwyg h2,
.mio-markdown-editor .vditor-wysiwyg h3,
.mio-markdown-editor .vditor-wysiwyg h4,
.mio-markdown-editor .vditor-wysiwyg h5,
.mio-markdown-editor .vditor-wysiwyg h6,
.memo-card-preview.vditor-reset p,
.memo-card-preview.vditor-reset ul,
.memo-card-preview.vditor-reset ol,
.memo-card-preview.vditor-reset li,
.memo-card-preview.vditor-reset blockquote,
.memo-card-preview.vditor-reset pre,
.memo-card-preview.vditor-reset h1,
.memo-card-preview.vditor-reset h2,
.memo-card-preview.vditor-reset h3,
.memo-card-preview.vditor-reset h4,
.memo-card-preview.vditor-reset h5,
.memo-card-preview.vditor-reset h6,
.memo-view-content.vditor-reset p,
.memo-view-content.vditor-reset ul,
.memo-view-content.vditor-reset ol,
.memo-view-content.vditor-reset li,
.memo-view-content.vditor-reset blockquote,
.memo-view-content.vditor-reset pre,
.memo-view-content.vditor-reset h1,
.memo-view-content.vditor-reset h2,
.memo-view-content.vditor-reset h3,
.memo-view-content.vditor-reset h4,
.memo-view-content.vditor-reset h5,
.memo-view-content.vditor-reset h6 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Lists keep indentation only; they do not add vertical whitespace. */
.mio-markdown-editor .vditor-wysiwyg ul,
.mio-markdown-editor .vditor-wysiwyg ol,
.memo-card-preview.vditor-reset ul,
.memo-card-preview.vditor-reset ol,
.memo-view-content.vditor-reset ul,
.memo-view-content.vditor-reset ol {
  margin-block: 0 !important;
}

/* Headings differ by size/weight only, not by arbitrary vertical gaps. */
.mio-markdown-editor .vditor-wysiwyg h1,
.mio-markdown-editor .vditor-wysiwyg h2,
.mio-markdown-editor .vditor-wysiwyg h3,
.mio-markdown-editor .vditor-wysiwyg h4,
.mio-markdown-editor .vditor-wysiwyg h5,
.mio-markdown-editor .vditor-wysiwyg h6,
.memo-card-preview.vditor-reset h1,
.memo-card-preview.vditor-reset h2,
.memo-card-preview.vditor-reset h3,
.memo-card-preview.vditor-reset h4,
.memo-card-preview.vditor-reset h5,
.memo-card-preview.vditor-reset h6,
.memo-view-content.vditor-reset h1,
.memo-view-content.vditor-reset h2,
.memo-view-content.vditor-reset h3,
.memo-view-content.vditor-reset h4,
.memo-view-content.vditor-reset h5,
.memo-view-content.vditor-reset h6 {
  line-height: 1.25 !important;
}

/* An actually empty editable line still occupies one normal line. */
.mio-markdown-editor .vditor-wysiwyg p:empty,
.mio-markdown-editor .vditor-wysiwyg div:empty {
  min-height: 1.5em;
}