/* 갈피 — Graphite / Minimal / Editorial. Dark-first.
   구조 원리: 화면을 세로로 관통하는 선("책등") 하나. 기록은 카드가 아니라 그 선에 걸린 행이다.
   따뜻한 색은 딱 하나(--accent, 갈피 띠) — 현재 책과 '써먹을 것'에만 쓴다. */

:root {
  /* 다크(기본). 작은 글자까지 WCAG AA(4.5:1)를 넘기도록 muted/faint를 올렸다.
     처음 팔레트는 faint가 3.16:1이라 출처 라벨·태그·삭제가 읽히지 않았다. */
  --bg: #15171b;
  --surface: #1d2026;
  --surface-2: #252931;
  --border: #2e343c;          /* 장식용 구분선 */
  --border-strong: #68717d;   /* 입력·버튼 외곽선 — 3:1 이상 */
  --border-soft: #22262c;

  --text: #f4f5f7;            /* 16.5:1 */
  --muted: #b0b7c2;           /*  8.9:1 */
  --faint: #8d95a2;           /*  5.9:1 */

  --accent: #e8b25c;          /* 갈피 띠 — 9.4:1 */
  --accent-soft: rgba(232, 178, 92, 0.15);

  --danger: #f08b84;
  --ok: #7fd0ab;

  --shot-bg: #101216;

  --gut: 16px;
  --spine: 52px;

  /* 프로젝트 표준 한글 UI 폰트. 숫자는 별도 mono를 쓰지 않고
     Pretendard의 tabular-nums로 맞춘다(획 굵기가 본문과 어긋나지 않게). */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --num: var(--sans);
}

/* 밝은 화면. 베이지·종이질감은 쓰지 않는다(§26) — 중성 회백이다.
   시스템 설정을 따르되, 위 토글로 직접 고르면 그게 이긴다. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f8;
    --surface: #ffffff;
    --surface-2: #eef0f2;
    --border: #e2e6e9;
    --border-strong: #848d98;
    --border-soft: #e8ebee;

    --text: #15171b;
    --muted: #4d545e;
    --faint: #6b7280;

    --accent: #8a5d12;
    --accent-soft: rgba(138, 93, 18, 0.11);

    --danger: #b3382f;
    --ok: #1f7a53;

    --shot-bg: #f1f3f5;
  }
}
:root[data-theme="light"] {
  --bg: #f6f7f8;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --border: #e2e6e9;
  --border-strong: #848d98;
  --border-soft: #e8ebee;

  --text: #15171b;
  --muted: #4d545e;
  --faint: #6b7280;

  --accent: #8a5d12;
  --accent-soft: rgba(138, 93, 18, 0.11);

  --danger: #b3382f;
  --ok: #1f7a53;

  --shot-bg: #f1f3f5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  font-size: 16px;            /* 모바일 zoom 방지(§28) */
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--accent-soft); }

/* ── 뼈대 ─────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--gut) 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
}

.wordmark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  flex: none;
}

/* 현재 책 — 화면에서 유일하게 따뜻한 것 중 하나 */
.current-book {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  text-align: right;
  cursor: pointer;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
}
.current-book .title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}
.current-book .chev { color: var(--faint); font-size: 12px; flex: none; }

/* 화면 밝기 토글 — 컨트롤 하나면 충분하다(§2 "지나치게 많은 설정" 제외) */
.theme-btn {
  background: none;
  border: 0;
  color: var(--faint);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  margin: -8px 0 -8px 2px;
  display: grid;
  place-items: center;
  flex: none;
}
.theme-btn:hover { color: var(--muted); }
/* 책 변경은 자주 쓰는 동작이다 — 터치 영역을 44px 이상으로(§29) */
.current-book { min-height: 44px; align-items: center; margin: -8px 0; }

.main { min-width: 0; }

/* ── 기록 3버튼 ─────────────────────────────────────────────
   카드가 아니라 전면 너비 행. 아이콘은 라벨 바로 옆에 둔다 —
   처음엔 양 끝으로 벌려놨더니 가운데가 비어 미완성으로 보였다. */
.capture { border-bottom: 1px solid var(--border); }

.cap {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 76px;
  padding: 14px var(--gut);
  background: none;
  border: 0;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.cap:first-of-type { border-top: 0; }
.cap:active { background: var(--surface); }

.cap-ic {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
}
.cap-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap-label { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.cap-sub { font-size: 13px; color: var(--faint); letter-spacing: -0.005em; }

/* 말하기가 이 앱의 1순위다(§31). 강조는 여기 한 곳에만. */
.cap[data-primary] .cap-ic {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cap[data-primary] .cap-label { font-size: 21px; }

/* ── 기록 목록: 선에 걸린 행 ────────────────────────────── */
.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px var(--gut) 8px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.entries { list-style: none; margin: 0; padding: 0 var(--gut) 24px; }

.entry {
  display: grid;
  grid-template-columns: var(--spine) 1fr;
  gap: 0 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.entry:first-child { border-top: 0; }

/* 책등: 페이지 번호 열 오른쪽의 세로선 */
.entry::before {
  content: "";
  position: absolute;
  left: calc(var(--spine) - 14px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.entry .page {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--muted);
  text-align: right;
  padding-right: 14px;
  padding-top: 3px;
  letter-spacing: -0.01em;
}
.entry .page .p { color: var(--faint); font-size: 11px; font-weight: 400; margin-left: 1px; }
.entry .page.none { color: var(--faint); }

.entry .body { min-width: 0; }

.quote, .thought {
  margin: 0 0 10px;
  word-break: break-word;
  letter-spacing: -0.011em;
}
.quote {
  color: var(--text);
  font-size: 15.5px;
  font-weight: 450;
  line-height: 1.62;
}
.thought {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.entry .body > :last-child { margin-bottom: 0; }

.src {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--faint);
  margin-bottom: 4px;
}

.entry .marks {
  display: flex;
  flex-wrap: wrap;            /* 좁은 화면에서 줄바꿈은 항목 사이에서만 */
  gap: 4px 12px;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: var(--faint);
}
.entry .marks > * { white-space: nowrap; }
.entry .tags { white-space: normal; }   /* 태그는 여러 개면 줄바꿈 허용 */
.mark-useful { color: var(--accent); }
/* 삭제는 보조 동작이지만 그래도 손가락이 닿아야 한다 */
.link-del {
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 12px;
  cursor: pointer;
  min-height: 44px;
  padding: 0 8px;
  margin: -12px -8px;
}
.entry .tags { font-size: 12px; color: var(--faint); }

.entry .shot {
  margin-top: 8px;
  max-width: 200px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 3px;
  display: block;
}

.empty {
  padding: 34px var(--gut) 40px;
  color: var(--faint);
  font-size: 14px;
  line-height: 1.7;
}

/* ── 하단 내비 (접힘 전용, 3개 §30) ──────────────────────── */
.nav {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
.nav button {
  flex: 1;
  min-height: 52px;
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 13px;
  cursor: pointer;
}
.nav button[aria-current="true"] { color: var(--text); box-shadow: inset 0 1px 0 var(--text); }

/* ── 화면(뷰) 전환 ──────────────────────────────────────── */
.view { display: none; }
.view.on { display: block; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gut);
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 16px; margin: 0; font-weight: 600; flex: 1; }
.back {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  margin-left: -8px;
  min-height: 44px;
}

/* ── 폼 ─────────────────────────────────────────────────── */
.form { padding: 18px var(--gut) 28px; }
.field { margin-bottom: 18px; }
.field > label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field textarea,
.field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 11px 12px;
  color: var(--text);
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 토글 — pill badge 남발 대신 밑줄 스위치 */
.toggles { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tg {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: var(--muted);
  padding: 9px 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
}
.tg[aria-pressed="true"] { color: var(--text); border-color: var(--faint); }
.tg.useful[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn {
  width: 100%;
  min-height: 52px;
  background: var(--text);
  color: var(--bg);
  border: 0;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.ghost {
  background: none;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn.sm { min-height: 44px; font-size: 14px; width: auto; padding: 0 16px; }

.btn-row { display: flex; gap: 10px; }

/* ── 음성 화면 ──────────────────────────────────────────── */
.rec {
  padding: 30px var(--gut);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.rec-dot {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.rec.live .rec-dot { border-color: var(--accent); color: var(--accent); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: 0 0 0 14px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .rec.live .rec-dot { animation: none; }
  * { transition: none !important; }
}
.rec-state { color: var(--muted); font-size: 14px; }
.rec-time {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

.live-text {
  padding: 16px var(--gut);
  min-height: 110px;
  font-size: 15px;
  line-height: 1.65;
  border-bottom: 1px solid var(--border);
}
.live-text .interim { color: var(--faint); }

.seg {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 18px;
}
.seg button {
  flex: 1;
  min-height: 46px;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }

/* ── OCR 문장 선택 ──────────────────────────────────────── */
.ocr-line {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: 15px;
}
.ocr-line input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.preview-img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: var(--shot-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* ── 책장 ───────────────────────────────────────────────── */
.books { list-style: none; margin: 0; padding: 0; }
.book-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 15px var(--gut);
  background: none;
  border: 0;
  border-top: 1px solid var(--border-soft);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.book-row .bt { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 500; letter-spacing: -0.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-row .ba { color: var(--faint); font-size: 12px; flex: none; }
.book-row .bc {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  font-size: 12px;
  flex: none;
}
.book-row[aria-current="true"] .bt { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.group-label {
  padding: 22px var(--gut) 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--faint);
}

/* ── 필터 줄 ────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 4px;
  padding: 10px var(--gut);
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: none;
  background: none;
  border: 0;
  color: var(--faint);
  padding: 8px 10px;
  min-height: 44px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.filters button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }

/* ── 정리 결과 ──────────────────────────────────────────── */
.sum-sec { padding: 20px var(--gut); border-top: 1px solid var(--border-soft); }
.sum-sec h3 {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin: 0 0 10px;
  font-weight: 600;
}
.sum-sec p, .sum-sec li { font-size: 15px; margin: 0 0 9px; }
.sum-sec ul { margin: 0; padding-left: 18px; }
.sum-sec .pg {
  font-family: var(--num);
  font-size: 11px;
  color: var(--faint);
  margin-right: 6px;
}

/* ── 알림 줄 ────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: var(--gut);
  right: var(--gut);
  bottom: 68px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 13px 14px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 60;
}
.toast[hidden] { display: none; }
.toast.err { border-color: var(--danger); color: var(--danger); }
.toast button {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  flex: none;
}

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 11, 0.86);
  z-index: 50;
  display: flex;
  align-items: flex-end;
}
.sheet[hidden] { display: none; }
.sheet-inner {
  background: var(--bg);
  border-top: 1px solid var(--border);
  width: 100%;
  max-height: 84dvh;
  overflow-y: auto;
}

.status-line { padding: 10px var(--gut); color: var(--muted); font-size: 13px; min-height: 20px; }
.status-line.err { color: var(--danger); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ 펼친 화면 — 역할이 다르다: 기록이 아니라 정리(§23) ══ */
@media (min-width: 700px) {
  :root { --gut: 28px; --spine: 64px; }

  .shell { grid-template-rows: auto 1fr; }
  .nav { display: none; }

  .workspace {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 0;
  }

  .sidebar {
    border-right: 1px solid var(--border);
    position: sticky;
    top: 53px;
    align-self: start;
    max-height: calc(100dvh - 53px);
    overflow-y: auto;
    padding-bottom: 30px;
  }
  .sidebar .book-row { padding-left: 20px; padding-right: 20px; }
  .sidebar .group-label { padding-left: 20px; }

  .stream { min-width: 0; }

  /* 펼침에는 하단 탭이 없다 → 기록 스트립과 정리 목록을 한 화면에 같이 둔다(§23).
     '최근 기록'은 아래 정리 목록이 대신하므로 숨긴다. */
  .stream[data-home="1"] #view-capture,
  .stream[data-home="1"] #view-review { display: block; }
  .stream[data-home="1"] #view-capture .list-head,
  .stream[data-home="1"] #view-capture .entries { display: none; }
  .stream[data-home="1"] #view-review .panel-head { border-top: 0; }

  /* 펼침에서는 기록 버튼이 주인공이 아니다 — 가로 스트립으로 줄인다. */
  .capture { display: flex; border-bottom: 1px solid var(--border); }
  .cap {
    border-top: 0;
    border-left: 1px solid var(--border-soft);
    min-height: 66px;
    padding: 10px 14px;
    justify-content: center;
    gap: 11px;
  }
  .cap:first-of-type { border-left: 0; }
  .cap-ic { width: 34px; height: 34px; }
  .cap-ic svg { width: 18px; height: 18px; }
  .cap-label,
  .cap[data-primary] .cap-label { font-size: 16px; }
  .cap-sub { display: none; }   /* 좁은 화면에서만 안내가 필요하다 */

  .entry .quote { font-size: 16px; max-width: 68ch; }
  .entry .thought { font-size: 15.5px; max-width: 68ch; }
  .entry .shot { max-width: 300px; }

  .form, .sum-sec { max-width: 720px; }
  .btn { width: auto; min-width: 200px; padding: 0 28px; }
  .toast { left: auto; right: 28px; bottom: 28px; max-width: 460px; }
  .sheet { align-items: center; justify-content: center; }
  .sheet-inner { max-width: 560px; border: 1px solid var(--border); border-radius: 4px; max-height: 76dvh; }
}

/* 좁은 화면에서는 2-pane 사이드바를 숨긴다 */
@media (max-width: 699px) {
  .sidebar { display: none; }
}