/* m-emo 보기·고치기 (memo.html). 토큰(--ink, --mint …)은 styles.css·ui-kit.css 가 정의하고,
   버튼 모양(.nav-btn)은 auth.css 것을 그대로 쓴다. */

.memo-page{ min-height:100dvh; display:flex; flex-direction:column; }

.memo-top{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:var(--bg-raised);
}
.memo-home{ font-size:13px; color:var(--ink-dim); white-space:nowrap; }
.memo-home:hover{ color:var(--mint); }
.memo-brand{ font-family:var(--serif); font-size:19px; font-weight:500; color:var(--mint);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.memo-brand img{ width:26px; height:26px; flex:none; }   /* m-emo 상징 로고: 새 발자국 '길 영(永)' (2026-10-18) */
.memo-who{ margin-left:auto; font-size:12.5px; color:var(--ink-faint); white-space:nowrap; }

.memo-layout{ flex:1; display:grid; grid-template-columns:minmax(220px, 300px) 1fr; min-height:0; }

/* ── 왼쪽: 문서 목록 ─────────────────────────────────────────────────── */
.memo-side{
  border-right:1px solid var(--line); padding:16px 12px;
  overflow-y:auto; max-height:calc(100dvh - 58px); position:sticky; top:0;
}
.memo-filter{
  width:100%; padding:8px 10px; margin-bottom:12px;
  font:inherit; font-size:13px;
  background:var(--bg); color:var(--ink); border:1px solid var(--line-strong);
}
.memo-filter:focus{ outline:none; border-color:var(--mint-dim); }
.memo-tree{ list-style:none; font-size:13px; line-height:1.5; }
.memo-tree .memo-folder{
  margin:12px 0 4px; font-size:11.5px; letter-spacing:0.04em; color:var(--warm);
}
.memo-tree a{
  display:block; padding:4px 8px; color:var(--ink-dim);
  border-left:2px solid transparent; word-break:break-all;
}
.memo-tree a:hover{ color:var(--ink); }
.memo-tree a[aria-current="page"]{ color:var(--mint); border-left-color:var(--mint); }
.memo-tree a small{ display:block; margin-top:2px; font-size:11.5px; color:var(--ink-faint); line-height:1.45; }

/* ── 오른쪽: 문서 ────────────────────────────────────────────────────── */
.memo-main{ padding:22px clamp(18px, 4vw, 48px) 90px; min-width:0; }
.memo-status{
  font-size:13.5px; color:var(--warm); padding:10px 12px; margin-bottom:16px;
  border:1px solid var(--warm-dim);
}
.memo-status[hidden], .memo-backlinks[hidden], .memo-doc-head[hidden], .memo-editor[hidden], .memo-meta[hidden]{ display:none; }
.memo-status.error{ color:#e08a76; border-color:rgba(224,138,118,0.4); }
.memo-status .nav-btn{ margin-left:10px; }

.memo-doc-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:18px; border-bottom:1px solid var(--line);
}
.memo-path{ font:12px/1.4 ui-monospace, 'SFMono-Regular', Menlo, monospace; color:var(--ink-faint); word-break:break-all; }
.memo-actions{ display:flex; gap:8px; }

.memo-upload-dialog{
  width:min(560px, calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:0;
  color:var(--ink); background:var(--bg-raised); border:1px solid var(--line-strong);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.memo-upload-dialog::backdrop{ background:rgba(8,7,11,.76); backdrop-filter:blur(4px); }
.memo-upload-form{ display:grid; gap:14px; padding:22px; }
.memo-upload-heading{ display:flex; align-items:start; justify-content:space-between; gap:16px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.memo-upload-heading h2{ margin:0; font:500 21px/1.4 var(--serif); }
.memo-upload-kicker{ margin:0 0 4px; color:var(--mint); font-size:11px; letter-spacing:.08em; }
.memo-upload-close{ border:0; background:transparent; color:var(--ink-dim); font-size:26px; line-height:1; cursor:pointer; }
.memo-upload-form label{ display:grid; gap:6px; color:var(--ink-dim); font-size:12.5px; }
.memo-upload-form input, .memo-upload-form select{
  width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--line-strong);
  border-radius:3px; color:var(--ink); background:var(--bg); font:inherit; font-size:13px;
}
.memo-upload-form input[type=file]{ padding:8px; }
.memo-upload-form input:focus, .memo-upload-form select:focus{ outline:none; border-color:var(--mint-dim); }
.memo-upload-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.memo-upload-hint{ color:var(--ink-faint); font-size:11px; }
.memo-upload-note, .memo-upload-progress{ margin:0; color:var(--ink-faint); font-size:12px; line-height:1.5; }
.memo-upload-progress{ color:var(--mint); }
.memo-upload-progress.error{ color:#e08a76; }
.memo-upload-actions{ display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }
.memo-upload-form button:disabled{ opacity:.55; cursor:wait; }
.memo-media-image{ display:block; max-width:100%; height:auto; margin:12px 0; border-radius:4px; }
.memo-media-player{ display:block; width:min(100%, 880px); max-height:70vh; margin:16px 0; background:#09080c; }
.memo-media-player[data-memo-media-kind="audio"]{ width:min(100%, 520px); max-height:none; background:transparent; }
.memo-media-missing{ opacity:.45; outline:1px dashed var(--warm); }

.memo-meta{ margin-bottom:18px; }
.memo-meta-badges{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px;
}
.memo-badge{
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:4px;
  font-weight:600; text-transform:uppercase; letter-spacing:0.04em; font-size:11px;
}
.memo-badge-type{ background:rgba(63,245,200,0.12); color:var(--mint); border:1px solid rgba(63,245,200,0.3); }
.memo-badge-status{ background:rgba(224,138,118,0.12); color:var(--warm); border:1px solid rgba(224,138,118,0.3); }
.memo-meta-date{ font:12px/1.4 ui-monospace, monospace; color:var(--ink-faint); margin-left:auto; }
.memo-tag{
  background:var(--bg-raised); color:var(--ink-dim); padding:2px 6px; border-radius:3px;
  cursor:pointer; border:1px solid var(--line); font-size:11.5px;
}
.memo-tag:hover{ color:var(--mint); border-color:var(--mint); }
.memo-meta-raw-btn{
  background:transparent; border:1px solid var(--line); color:var(--ink-faint);
  font:10px/1 ui-monospace, monospace; padding:3px 6px; border-radius:3px; cursor:pointer;
}
.memo-meta-raw-btn:hover, .memo-meta-raw-btn.active{ color:var(--mint); border-color:var(--mint); }
.memo-meta-raw{
  font:12px/1.5 ui-monospace, 'SFMono-Regular', Menlo, monospace; color:var(--ink-faint);
  padding:10px 12px; margin-top:8px; background:var(--bg-raised); white-space:pre-wrap;
}

/* ── 마크다운 본문 ────────────────────────────────────────────────────── */
.memo-doc{ max-width:880px; font-size:15px; line-height:1.8; color:var(--ink); }
.memo-doc h1, .memo-doc h2, .memo-doc h3, .memo-doc h4{
  font-family:var(--serif); font-weight:500; line-height:1.4; margin:1.6em 0 .6em;
}
.memo-doc h1{ font-size:26px; margin-top:0; }
.memo-doc h2{ font-size:21px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.memo-doc h3{ font-size:17.5px; }
.memo-doc h4{ font-size:15.5px; color:var(--warm); }
.memo-doc p, .memo-doc ul, .memo-doc ol, .memo-doc table, .memo-doc pre, .memo-doc blockquote{ margin-bottom:1em; }
.memo-doc ul, .memo-doc ol{ padding-left:1.4em; }
.memo-doc a{ color:var(--mint); text-decoration:underline; text-underline-offset:3px; }
.memo-doc .memo-broken{ color:var(--ink-faint); text-decoration:line-through dotted; }
.memo-doc code{
  font:0.88em ui-monospace, 'SFMono-Regular', Menlo, monospace;
  background:var(--bg-raised); padding:1px 5px;
}
.memo-doc pre{ background:var(--bg-raised); padding:12px 14px; overflow-x:auto; }
.memo-doc pre code{ background:none; padding:0; }
.memo-doc table{ border-collapse:collapse; display:block; overflow-x:auto; font-size:13.5px; }
.memo-doc th, .memo-doc td{ border:1px solid var(--line-strong); padding:6px 10px; vertical-align:top; }
.memo-doc th{ background:var(--bg-raised); font-weight:600; }
.memo-doc blockquote{ border-left:3px solid var(--plum); padding:4px 14px; color:var(--ink-dim); }
.memo-doc hr{ border:none; border-top:1px solid var(--line); margin:2em 0; }
.memo-doc .memo-callout{ border-left-color:var(--mint); background:var(--bg-raised); }
.memo-doc .memo-callout-warning, .memo-doc .memo-callout-danger{ border-left-color:var(--warm); }
.memo-doc .memo-callout-title{ font-weight:600; color:var(--ink); }

/* ── 백링크 ─────────────────────────────────────────────────────────── */
.memo-backlinks{ max-width:880px; margin-top:48px; padding-top:18px; border-top:1px solid var(--line); }
.memo-backlinks h2{ font-size:12.5px; font-weight:600; letter-spacing:0.04em; color:var(--warm); margin-bottom:10px; }
.memo-backlinks ul{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13.5px; }
.memo-backlinks a{ color:var(--mint); }

/* ── 고치는 중: 왼쪽 원문, 오른쪽 미리보기 ─────────────────────────────── */
.memo-editor{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.memo-text{
  width:100%; min-height:calc(100dvh - 190px); resize:vertical; padding:14px;
  font:13.5px/1.65 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  background:var(--bg); color:var(--ink); border:1px solid var(--line-strong);
}
.memo-text:focus{ outline:none; border-color:var(--mint-dim); }
.memo-preview{ max-height:calc(100dvh - 190px); overflow-y:auto; padding-right:6px; }

@media (max-width:820px){
  .memo-editor{ grid-template-columns:1fr; }
  .memo-text{ min-height:45dvh; }
  .memo-preview{ max-height:none; border-top:1px solid var(--line); padding-top:16px; }
}

@media (max-width:720px){
  .memo-layout{ grid-template-columns:1fr; }
  .memo-side{ position:static; max-height:35vh; border-right:none; border-bottom:1px solid var(--line); }
}

@media (max-width:640px){
  .memo-top{ padding:10px 14px; gap:8px 12px; }
  .memo-who{ display:none; }
  .memo-main{ padding:18px 16px 140px; }
  .memo-upload-form{ padding:18px; }
  .memo-upload-row{ grid-template-columns:1fr; }
}