/* 메모 창(modals/memo.js) — 첫 화면은 [머리줄(메모 · 찾기 · 잠금) / 칩 줄(메모·고정됨·폴더·구역) / 카드 그리드] + 오른쪽 아래 [+](새 메모).
   카드를 누르면 같은 창에서 그리드 자리에 상세(.memo-detail)가 들어선다(‹ 로 돌아오면 고른 칩·스크롤 그대로).
   카드는 한 가지 테마 면(.grid-cell)이고 메모마다 색을 두지 않는다. 좁은 창은 @container memo. 글자 크기는 homepage.css font-size 구역. */
.memo-app { container: memo / inline-size; }
.memo-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.memo-home { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.memo-home[hidden], .memo-detail[hidden] { display: none; }

/* ---- 머리줄 ---- */
.memo-top { flex: none; display: flex; align-items: center; gap: var(--space-4); min-height: 30px; padding: 0 var(--space-2); }
.memo-heading { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.memo-search { flex: 0 1 240px; min-width: 80px; height: 28px; padding: 0 var(--space-4); }
.memo-icon-btn { flex: none; width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
.memo-icon-btn svg { width: 18px; height: 18px; }
.memo-icon-btn[hidden] { display: none; }

/* ---- 칩 줄: 넘치면 가로로 굴린다(줄바꿈 없음, 휠도 가로로) ---- */
.memo-chips {
  flex: none; display: flex; align-items: center; gap: var(--space-3); overflow-x: auto; overflow-y: hidden;
  padding: var(--space-1) var(--space-2) var(--space-2); scrollbar-width: none; overscroll-behavior-x: contain;
}
.memo-chips::-webkit-scrollbar { display: none; }
.memo-chip { flex: none; border-radius: var(--radius-pill); padding: 0 var(--space-6); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* 손가락 기기: 칩(27px)·[새 폴더]·위 아이콘(30px)은 모양은 그대로, 누르는 자리만 32px 넘게(칩은 넘친 글자를 자르므로 overflow: clip + 3px 여유) */
@media (pointer: coarse) {
  .memo-chip { position: relative; overflow: clip; overflow-clip-margin: 3px; }
  .memo-chip::after { content: ''; position: absolute; inset: -3px 0; }
  .memo-chip-add::after { inset: -3px; }
  .memo-icon-btn { position: relative; }
  .memo-icon-btn::after { content: ''; position: absolute; inset: -2px; }
}
.memo-chip.is-sub:not(.is-active) { color: var(--system-c-area-b-base-desc-font-color); }
.memo-chip-add { width: 27px; padding: 0; display: inline-grid; place-items: center; }
.memo-chip-add svg { width: 14px; height: 14px; }
.memo-chip-divider { flex: none; width: 1px; height: 16px; background: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); }
.memo-chips > .settings-empty { flex: none; white-space: nowrap; }

/* ---- 카드 그리드 ---- */
.memo-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; padding: 0 var(--space-2) var(--space-4); }
.memo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); align-items: stretch; }
.memo-grid > :not(.memo-card) { grid-column: 1 / -1; }
/* 메모가 없으면 문구를 내용 판 세로 가운데 한 줄로(디자인 공통 규칙 2 — 위쪽에 떠 있었다). */
.memo-scroll:has(> .memo-grid > .settings-empty:only-child) { display: grid; align-content: center; }
/* 줄마다 같은 높이(그리드 stretch), 최소 높이만 정한다 — 고정 높이면 4줄 미리보기가 반 줄 잘린다. */
.memo-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 132px; box-sizing: border-box; text-align: left; }
/* 카드 테두리도 구분선색 — grid-cell 테두리색이 바탕과 같은 테마(흰 바탕+흰 테두리)에선 카드가 안 보인다. */
.memo-card { border-color: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
/* 바탕은 판 위의 칸(영역 C-C 표면) — grid-cell 기본(영역 C-B)이면 판과 같은 색이라 다크 테마에서 카드가 판에 묻혔다(QA). */
.memo-card { background: rgba(var(--system-c-area-c-base-rgb), var(--system-c-area-c-base-alpha)) !important; }
.memo-card-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.memo-card-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-card-excerpt {
  flex: none; margin: 0; white-space: pre-line; overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.memo-card-task { cursor: pointer; border-radius: 3px; }
@media (any-hover: hover) and (any-pointer: fine) {
.memo-card-task:hover { color: var(--focus-color); }
}
.memo-card.is-drag-source { opacity: .4; }
.memo-chip.is-drop-target { box-shadow: inset 0 0 0 2px var(--focus-color); }
/* 카드 끌기 차례 — 놓을 자리를 카드 사이 틈(gap 가운데)의 세로 막대로. 여러 열 그리드라 줄 끝/첫머리 어느 쪽에 서도 같은 자리다. */
.memo-card.is-drop-before::before, .memo-card.is-drop-after::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px;
  background: var(--focus-color); pointer-events: none;
}
.memo-card.is-drop-before::before { left: calc(-1px - var(--space-4) / 2 - 1.5px); }
.memo-card.is-drop-after::after { right: calc(-1px - var(--space-4) / 2 - 1.5px); }
.memo-card-foot { flex: none; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.memo-card-flag { flex: none; display: inline-grid; place-items: center; opacity: .7; }
.memo-card-flag svg { width: 12px; height: 12px; }
.memo-card-date, .memo-meta, .memo-state, .memo-att-size, .memo-dialog-hint { color: var(--system-c-area-b-base-desc-font-color); }
/* ---- 상세(그리드 자리에) ---- */
.memo-detail { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 0; overflow: hidden; }
.memo-detail-head { flex: none; display: flex; align-items: flex-start; gap: var(--space-3); min-height: 30px; }
/* 머리(‹ 제목 · 단추)·작은 줄·휴지통 줄·첨부도 본문(.memo-view)과 같은 720px 가운데 칸 — 넓은 창에서 제목이 본문보다 왼쪽에서 시작하지 않게. */
.memo-detail-head, .memo-meta, .memo-trash-bar, .memo-atts { width: 100%; max-width: 720px; margin-inline: auto; box-sizing: border-box; }
.memo-back { flex: none; width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
.memo-head-flags { display: inline-flex; align-items: center; min-height: 30px; gap: var(--space-1); }
.memo-head-flags:empty { display: none; }
.memo-title-input, .memo-title-text { flex: 1 1 auto; min-width: 0; padding: 0 4px; font-weight: 700; }
.memo-title-text { align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-title-input { border: 0 !important; outline: none; background: transparent; color: var(--system-c-area-b-base-font-color);
  resize: none; overflow: hidden; line-height: 1.4; min-height: 0; box-shadow: none !important; padding-top: 5px !important; padding-bottom: 4px !important; } /* 긴 제목은 줄을 바꿔 다 보인다(textarea, 3줄까지). 위아래 여백 = 한 줄일 때 ‹ 단추(30px) 가운데 */
.memo-title-input::placeholder { color: var(--system-c-area-b-base-desc-font-color); font-weight: 400; }
.memo-state { flex: none; white-space: nowrap; line-height: 30px; }
.memo-meta { flex: none; margin-top: -2px; /* 제목칸 아래 4px 띄움 — -8px 이면 제목칸 초점 테두리를 덮었다(QA) */ margin-bottom: 0; padding-left: 42px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-meta:empty { display: none; }
/* 휴지통 — 카드는 흐리게(가리키면 또렷하게), 읽기 전용 상세 위에 안내 줄 + [되살리기] [영구 삭제]. */
.memo-card.is-trashed { opacity: .6; }
.memo-card.is-trashed:focus-visible { opacity: 1; }
@media (any-hover: hover) { .memo-card.is-trashed:hover { opacity: 1; } }
.memo-trash-bar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha));
}
.memo-trash-bar > span { flex: 1 1 auto; min-width: 0; color: var(--system-c-area-b-base-desc-font-color); }
.memo-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; }
/* 막대는 창의 떠 있는 막대(bindWindowOverlayScrollbar, 요청: 사라지는 스크롤) */
.memo-scroll::-webkit-scrollbar, .memo-body::-webkit-scrollbar { display: none; }
/* 넓은 창에서 줄이 너무 길어지지 않게 글 보기 칸(720px)으로 가운데에 둔다. 편집기(data-memo-editor)도 같은 폭이다. */
.memo-view { width: 100%; max-width: 720px; margin-inline: auto; box-sizing: border-box; padding: 0 4px var(--space-6); overflow-wrap: anywhere; }
/* ---- 라이브 편집기(md-live-editor.js): 줄마다 그린 블록. 커서가 든 줄도 그린 블록과 같은 껍데기(.mdl-line) 안의
   contenteditable(.mdl-edit)이고, ``` 코드 블록·여러 줄 고르기만 원문 칸(textarea.mdl-src). 블록 사이 여백을 걷어 줄 높이가 같다. */
.md-live { flex: 1 0 auto; cursor: text; }
.md-live .mdl-block > :is(p, ul, ol, blockquote) { margin: 0; }
.md-live .mdl-block > blockquote { padding-top: 0; padding-bottom: 0; }
.md-live .mdl-list { padding-left: calc(22px * (var(--mdl-d, 0) + 1)); }
.md-live .mdl-list > li { margin: 0; }
.md-live ul.mdl-list[style*="--mdl-d:1"] { list-style-type: circle; }
.md-live ul.mdl-list:not([style*="--mdl-d:0"]):not([style*="--mdl-d:1"]) { list-style-type: square; }
.md-live .mdl-hr { margin: calc(.5lh - .5px) 0; border: 0 !important; border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
.md-live .mdl-placeholder { color: var(--system-c-area-b-base-desc-font-color); }
.md-live textarea.mdl-src {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0; resize: none; overflow: hidden;
  border: 0 !important; border-radius: 0; outline: none !important; box-shadow: none !important; background: transparent !important;
  color: inherit !important; font-family: inherit; line-height: inherit; letter-spacing: inherit; white-space: pre-wrap; tab-size: 4;
}
.md-live textarea.mdl-src:is(:hover, :focus) { box-shadow: none !important; }
.md-live textarea.mdl-src::placeholder { color: var(--system-c-area-b-base-desc-font-color); }
.md-live .mdl-edit { min-height: 1lh; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; cursor: text; }
.md-live .mdl-edit:empty::before { content: attr(data-placeholder); color: var(--system-c-area-b-base-desc-font-color); pointer-events: none; }
/* 고치는 줄의 인라인 표식(** · * · ~~ · ` · [](…))은 글자로 남기고 흐리게. 서식은 그 사이 글에 입힌다. */
.md-live .mdl-m { color: var(--system-c-area-b-base-desc-font-color); opacity: .75; font-weight: 400; font-style: normal; }
.md-live .mdl-a { color: var(--focus-color); }
.md-live textarea.mdl-src.is-code {
  margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-md); font-family: monospace;
  background: var(--system-c-area-d-base-color) !important; color: var(--system-c-area-d-base-font-color) !important;
}
/* 할 일 상자는 글머리 자리에 — 상자가 든 항목은 점을 감춘다(보기 .memo-task, 편집기 .mdl-task 같은 모양). */
/* 할 일 상자는 줄 왼쪽 여백에 따로 세우고 첫 줄 가운데에 맞춘다(1lh) — 글줄 기준선(vertical-align)에 걸면 글꼴·기기마다 위아래로 어긋났다. */
.memo-view li:has(> .memo-task), .md-live li:has(> .mdl-task) { list-style: none; position: relative; margin-left: -18px; padding-left: 24px; }
.memo-task, .mdl-task { position: absolute; left: 0; top: .3em; top: calc((1lh - 16px) / 2 + 2px); /* +2px: 한글 글자 가운데가 줄 가운데보다 2px 아래(측정) */ width: 16px; height: 16px; margin: 0; accent-color: var(--focus-color); cursor: pointer; }
.memo-task:disabled { cursor: default; }
.memo-view pre.post-code-block { position: relative; padding-right: 40px; }
.memo-code-copy { position: absolute; top: var(--space-3); right: var(--space-3); width: 26px; height: 26px; padding: 0; display: grid; place-items: center; opacity: .6; }
.memo-code-copy:focus-visible { opacity: 1; }
@media (any-hover: hover) and (any-pointer: fine) {
.memo-code-copy:hover { opacity: 1; }
}
.memo-code-copy svg { width: 14px; height: 14px; }
.memo-view img.post-markdown-image { max-width: 100%; border-radius: var(--radius-md); }
.memo-atts {
  display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3);
  border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important;
}
.memo-atts[hidden] { display: none; }
.memo-att { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 240px; }
.memo-att svg { flex: none; width: 14px; height: 14px; }
.memo-att-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-empty { flex: 1 1 auto; display: grid; place-items: center; align-content: center; gap: var(--space-4); padding: 40px 12px; text-align: center; }
.memo-locked-icon svg { width: 28px; height: 28px; opacity: .5; }

/* ---- 잠금 대화상자 ---- */
.memo-lock-dialog .memo-dialog-hint { margin: 0 0 var(--space-4); text-align: left; }
.memo-recovery-row { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-4) 0; }
.memo-recovery-code { flex: 1 1 auto; padding: var(--space-4); border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; user-select: all; text-align: center;
  background: var(--system-c-area-d-base-color); color: var(--system-c-area-d-base-font-color); }
.memo-link-btn { margin-top: var(--space-2); padding: 0; border: 0 !important; background: transparent; text-decoration: underline; cursor: pointer; color: var(--system-c-area-b-base-desc-font-color); }

/* ---- 카드 크기(빈 곳 우클릭 [카드 크기]) — 칸 너비와 미리보기 줄 수 ---- */
.memo-grid[data-size="small"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.memo-grid[data-size="small"] .memo-card { min-height: 100px; }
.memo-grid[data-size="small"] .memo-card-excerpt { -webkit-line-clamp: 2; }
.memo-grid[data-size="large"] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.memo-grid[data-size="large"] .memo-card { min-height: 200px; }
.memo-grid[data-size="large"] .memo-card-excerpt { -webkit-line-clamp: 8; }

/* ---- 좁은 창: 두 칸(작게는 세 칸), 아주 좁으면 한 칸(작게는 두 칸) ---- */
@container memo (max-width: 560px) {
  .memo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memo-grid[data-size="small"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .memo-grid[data-size="large"] { grid-template-columns: minmax(0, 1fr); }
  .memo-search { flex-basis: 160px; }
  /* 카드가 하나뿐이면 한 줄을 다 쓴다(QA-CHECKLIST 4장) — 2열 격자에서 폭 절반만 차지했다. */
  .memo-grid:not(:has(> .memo-card ~ .memo-card)) > .memo-card { grid-column: 1 / -1; }
}
@container memo (max-width: 340px) {
  .memo-grid { grid-template-columns: minmax(0, 1fr); }
  .memo-grid[data-size="small"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memo-card { min-height: 96px; }
}