/* case-weaver 엔진 화면. 색, 글자, 간격은 :root의 토큰으로 둔다(엔진 설계 문서 14.2절).
   시각 디자인(장식, 질감, 아이콘)은 정하지 않았다. 토큰과 기본 배치만 둔다. */

:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-serif: "Noto Serif KR", "AppleMyungjo", "Batang", serif;

  --bg: #f7f4ee;
  --fg: #1f1c17;
  --muted: #5d564a;
  --panel: #fffdf8;
  --border: #d6cdbd;
  --accent: #8a3b12;
  --accent-fg: #ffffff;
  --accent-soft: #f3e3cf;
  --chip-bg: #f3e3cf;
  --chip-fg: #5a2508;
  --paper: #fbf6e6;
  --paper-border: #d9c9a3;
  --scene-bg: #1c1a17;
  --scene-fallback: #4a4640;
  --scene-fallback-fg: #f1ece2;
  --ok: #276131;
  --warn-bg: #fff1c7;
  --warn-fg: #5e4300;
  --danger: #9b1c1c;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  --backdrop: rgba(10, 8, 6, 0.55);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius: 0.5rem;
  --radius-lg: 0.9rem;
  --touch: 2.75rem; /* 44 CSS 픽셀 */
  --side-w: 340px;
  --topbar-h: 3.5rem;
  --tabbar-h: calc(3.5rem + env(safe-area-inset-bottom));
  --scene-max-h: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 7rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151412;
    --fg: #ece6da;
    --muted: #b4ab9a;
    --panel: #1f1d1a;
    --border: #3b362e;
    --accent: #f0a36b;
    --accent-fg: #1a0f07;
    --accent-soft: #3a2a1c;
    --chip-bg: #3a2a1c;
    --chip-fg: #f7c9a1;
    --paper: #2a261f;
    --paper-border: #4d4535;
    --scene-bg: #0b0a09;
    --scene-fallback: #34312c;
    --ok: #7cc98a;
    --warn-bg: #3d3212;
    --warn-fg: #f4dc9b;
    --danger: #ff8f8f;
    --backdrop: rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #151412;
  --fg: #ece6da;
  --muted: #b4ab9a;
  --panel: #1f1d1a;
  --border: #3b362e;
  --accent: #f0a36b;
  --accent-fg: #1a0f07;
  --accent-soft: #3a2a1c;
  --chip-bg: #3a2a1c;
  --chip-fg: #f7c9a1;
  --paper: #2a261f;
  --paper-border: #4d4535;
  --scene-bg: #0b0a09;
  --scene-fallback: #34312c;
  --ok: #7cc98a;
  --warn-bg: #3d3212;
  --warn-fg: #f4dc9b;
  --danger: #ff8f8f;
  --backdrop: rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 var(--space-3); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
p { margin: 0 0 var(--space-3); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
code { font-size: 0.9em; }

.serif, .screen-title.serif, .entry-title, .case-title, .epilogue-title { font-family: var(--font-serif); }

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

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: var(--space-2); z-index: 100; background: var(--panel); padding: var(--space-2); }

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

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.row.end { justify-content: flex-end; }
.loading { padding: var(--space-6); color: var(--muted); }
.error-text { color: var(--danger); }

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch); min-width: var(--touch);
  padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--fg);
  cursor: pointer; text-align: center;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.small { padding: 0 var(--space-3); font-size: 0.9rem; }
.btn.current { border-color: var(--accent); background: var(--accent-soft); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.back { margin-bottom: var(--space-3); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); cursor: pointer; font-size: 1.2rem;
}
.icon-btn.wide { width: auto; padding: 0 var(--space-3); font-size: 0.9rem; }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.link-btn {
  min-height: var(--touch); background: none; border: 0; padding: 0;
  color: var(--accent); text-decoration: underline; cursor: pointer; text-align: left;
}

.tag {
  display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2);
  border-radius: 999px; font-size: 0.75rem; line-height: 1.6;
  background: var(--accent-soft); color: var(--chip-fg); vertical-align: middle;
}
.tag.muted { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.tag.ok { background: transparent; border: 1px solid var(--ok); color: var(--ok); }

.dot {
  display: inline-block; width: 0.55rem; height: 0.55rem; margin-left: var(--space-2);
  border-radius: 50%; background: var(--accent); vertical-align: middle;
}

.badge-new {
  display: inline-flex; margin-left: var(--space-1); vertical-align: middle;
  color: var(--accent); font-size: 0.95em; line-height: 1;
}
.badge-new svg { display: block; fill: currentColor; }
.chip.selected .badge-new { color: var(--accent-fg); }

/* ---------- 틀 ---------- */

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

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--topbar-h);
  padding: var(--space-1) max(var(--space-4), env(safe-area-inset-right)) var(--space-1) max(var(--space-4), env(safe-area-inset-left));
  padding-top: max(var(--space-1), env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar .case-title {
  flex: 1; min-width: 0; margin: 0; font-size: 1.1rem; font-weight: 700;
  color: var(--fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topnav { display: none; gap: var(--space-1); }
.nav-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); min-width: var(--touch);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius);
  background: transparent; cursor: pointer;
}
.nav-btn.current { background: var(--accent-soft); color: var(--chip-fg); font-weight: 700; }
.badge {
  position: absolute; top: 0.2rem; right: 0.2rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 0.7rem; line-height: 1.2rem;
}

.body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.main { min-width: 0; padding: var(--space-4) max(var(--space-4), env(safe-area-inset-left)); padding-bottom: calc(var(--tabbar-h) + 4rem); outline: none; }
.side { display: none; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--panel); border-top: 1px solid var(--border);
}
.tabbar .nav-btn { min-height: 3.5rem; border-radius: 0; }

.word-bar {
  position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 19;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-soft); border-top: 1px solid var(--border);
}
.word-bar[hidden] { display: none; }
body.selecting .main { padding-bottom: calc(var(--tabbar-h) + 8rem); }
.word-bar-label { font-size: 0.9rem; }

.notice-bar { padding: var(--space-2) var(--space-4); background: var(--warn-bg); color: var(--warn-fg); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.notice-bar[hidden] { display: none; }
.notice-bar.error { position: sticky; top: 0; z-index: 50; }

.menu-mobile { display: inline-flex; }
.topbar-mobile { display: inline-flex; gap: var(--space-1); }
.nav-dot { margin-left: var(--space-1); }
.nav-dot[hidden] { display: none; }
.hint-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.hint-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.hint-level { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.hint-modal .row { margin-top: var(--space-4); }
.hint-modal .btn[hidden] { display: none; }

@media (min-width: 960px) {
  .topnav { display: flex; }
  .menu-mobile, .tabbar, .word-bar { display: none !important; }
  .body { grid-template-columns: minmax(0, 1fr) var(--side-w); }
  .main { padding: var(--space-5) var(--space-6) var(--space-6); }
  .side {
    display: block; position: sticky; top: var(--topbar-h);
    height: calc(100dvh - var(--topbar-h)); overflow-y: auto;
    border-left: 1px solid var(--border); background: var(--panel); padding: var(--space-4);
  }
  :root { --scene-max-h: calc(100dvh - var(--topbar-h) - 9rem); --tabbar-h: 0px; }
}

/* 가로로 눕힌 휴대폰처럼 높이가 낮은 화면: 위쪽 막대는 함께 스크롤되고, 아래 막대는 줄인다 */
@media (max-width: 959.98px) and (max-height: 520px) {
  :root {
    --topbar-h: 2.75rem;
    --tabbar-h: calc(2.75rem + env(safe-area-inset-bottom));
    /* 장면이 한 화면에 들어오게 한다. 장면 위에서는 페이지를 스크롤할 수 없기 때문이다(touch-action: none) */
    --scene-max-h: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 4.5rem);
  }
  .scene-nav { padding-bottom: var(--space-2); }
  .scene-wrap .zoom-controls { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: 0; }
  .scene-wrap .zoom-controls .icon-btn { background: rgba(255, 253, 248, 0.88); color: #1f1c17; }
  .topbar { position: static; padding-top: max(0.15rem, env(safe-area-inset-top)); }
  .topbar .case-title { font-size: 1rem; }
  .tabbar .nav-btn { min-height: var(--touch); }
  .toasts { top: var(--space-2); }
  .main { padding-top: var(--space-2); }
}

.screen { max-width: 60rem; margin: 0 auto; }
.screen-title { font-size: 1.5rem; }
.sub-title { font-size: 1.1rem; margin-top: var(--space-5); }
.group-label { font-size: 0.9rem; color: var(--muted); margin: var(--space-3) 0 var(--space-2); }
.panel-title { font-size: 1.1rem; }

/* ---------- 알림 ---------- */

.toasts {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  top: calc(var(--topbar-h) + var(--space-2));
  display: flex; flex-direction: column; gap: var(--space-2); width: min(26rem, calc(100% - 2rem));
}
.toast {
  display: block; width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--fg);
  box-shadow: var(--shadow); text-align: left; cursor: default; animation: toast-in 0.2s ease-out;
}
button.toast { cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 959.98px) {
  /* 모바일에서는 머리글 높이 안에 한 줄로 띄워 장면 이동 목록과 퍼즐 문장을 가리지 않게 한다(6.11절) */
  .toasts { top: calc(env(safe-area-inset-top) + 0.375rem); width: calc(100% - 1rem); }
  .toast { min-height: 0; padding: 0.7rem var(--space-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- 대화상자와 시트 ---------- */

.modal {
  width: min(40rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem);
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--panel); color: var(--fg); box-shadow: var(--shadow);
}
.modal::backdrop { background: var(--backdrop); }
.modal-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 3rem); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5); border-bottom: 1px solid var(--border);
}
.modal-title { margin: 0; font-size: 1.1rem; font-family: var(--font-serif); }
.modal-close { flex: none; }
.modal-body { overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-5); overscroll-behavior: contain; }
.modal.confirm { width: min(26rem, calc(100% - 2rem)); }
.confirm-text { margin-bottom: var(--space-4); }
.sheet-grip { width: 2.5rem; height: 0.3rem; margin: var(--space-2) auto 0; border-radius: 999px; background: var(--border); }

.modal.sheet {
  width: 100%; max-width: 100%; margin: auto 0 0; max-height: 85dvh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.modal.sheet .modal-inner { max-height: 85dvh; transition: transform 0.15s; }
.modal.sheet[open] { animation: sheet-up 0.2s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }

.menu .menu-item {
  display: block; width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-3);
  border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer;
}
.menu .menu-item:hover { background: var(--accent-soft); }
.menu-theme { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }

/* ---------- 케이스 선택 ---------- */

.select-screen { padding: var(--space-5) var(--space-4); }
.case-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.case-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; }
.case-card.failed { opacity: 0.75; }
.cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--scene-bg); }
.cover.missing { display: flex; align-items: center; justify-content: center; color: var(--scene-fallback-fg); background: var(--scene-fallback); font-family: var(--font-serif); font-size: 2.5rem; }
.case-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.case-card .case-title { font-size: 1.2rem; margin: 0; }
.case-summary { margin: 0; }
.content-notes { margin: 0; font-size: 0.85rem; color: var(--muted); }
.case-card .row { margin-top: auto; }
.load-error { padding: var(--space-6) var(--space-4); }
.problems ul { font-size: 0.9rem; overflow-wrap: anywhere; }

/* ---------- 기록 보기 ---------- */

.entry { margin-bottom: var(--space-5); }
.entry-title { font-size: 1.15rem; }
.lines { display: flex; flex-direction: column; gap: var(--space-3); }
.line { margin: 0; }
.line p { margin: 0; }
.line.person { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.line-body { min-width: 0; }
.who { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.line.doc {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--paper-border); border-radius: 0.2rem;
  background: var(--paper); font-family: var(--font-serif); box-shadow: 1px 2px 0 var(--paper-border);
}
.present-line { margin-top: var(--space-2); }

.portrait { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--accent-soft); }
.portrait.sm { width: 2.5rem; height: 2.5rem; }
.portrait.md { width: 4.5rem; height: 4.5rem; }
.portrait.lg { width: 9rem; height: 12rem; border-radius: var(--radius-lg); }
.portrait.initial { display: flex; align-items: center; justify-content: center; color: var(--chip-fg); font-weight: 700; font-family: var(--font-serif); }
.portrait.lg.initial { font-size: 3rem; }
.portrait.md.initial { font-size: 1.6rem; }

.closeup {
  display: block; width: 100%; max-width: 32rem; margin: 0 0 var(--space-3); padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--scene-bg); cursor: zoom-in;
}
.closeup img { display: block; width: 100%; height: 100%; object-fit: cover; }
.closeup.missing { display: flex; align-items: center; justify-content: center; color: var(--scene-fallback-fg); background: var(--scene-fallback); cursor: default; padding: var(--space-3); text-align: center; }

.viewer { width: min(64rem, calc(100% - 1rem)); }
.viewer-viewport { position: relative; overflow: hidden; width: 100%; max-height: 70dvh; aspect-ratio: 4 / 3; background: var(--scene-bg); touch-action: none; }
.viewer-stage { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; }
.viewer-stage img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }

/* ---------- 단어 칩 ---------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--touch); padding: 0 var(--space-3);
  border: 1px solid var(--chip-fg); border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-fg);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.chip.selected { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.chip.static { cursor: default; min-height: 2rem; }
.chip.inline {
  display: inline; min-height: 0; padding: 0.15em 0.1em; margin: 0;
  border: 0; border-bottom: 2px solid var(--chip-fg); border-radius: 0.25em; line-height: inherit;
}
.chip.inline::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: var(--touch); transform: translateY(-50%); }
.chip.inline.selected { border-bottom-color: var(--accent); box-shadow: none; }

/* 단어 정보 카드(6.5절). 팝오버의 기본 배치(inset: 0, margin: auto)를 지우고 칩 옆에 놓는다 */
.word-card {
  position: fixed; inset: auto; left: 0; top: 0; margin: 0; z-index: 900;
  width: max-content; max-width: min(19rem, calc(100vw - 1rem));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--fg); box-shadow: var(--shadow);
  font-size: 0.9375rem; line-height: 1.5; text-align: left;
  pointer-events: none; overflow: visible;
}
.word-card.hoverable { pointer-events: auto; }
.word-card p { margin: 0; }
.wc-profile { display: flex; gap: var(--space-3); align-items: flex-start; }
.wc-body { min-width: 0; }
.wc-name { font-size: 1.0625rem; font-weight: 700; }
.wc-sub, .wc-from { color: var(--muted); font-size: 0.875rem; }
.word-card .wc-from { margin-top: var(--space-2); }
.word-card .wc-text {
  margin-top: var(--space-1);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}

.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0.92; box-shadow: var(--shadow); }
body.dragging { user-select: none; -webkit-user-select: none; }
body.dragging .drop-ok, body.selecting .target-ok { outline: 2px dashed var(--accent); outline-offset: 2px; }
body.dragging .drop-no, body.selecting .blank.target-dim { opacity: 0.45; }
.drop-hover { background: var(--accent-soft) !important; outline-style: solid !important; }

.selected-word { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); }

/* ---------- 도입과 결말 ---------- */

.reader { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); cursor: pointer; min-height: 12rem; }
.reader .entry { cursor: auto; }
.reader-controls { margin-top: var(--space-4); }
.intro-screen .screen-title, .ending-screen .screen-title { font-size: 1.8rem; }

/* ---------- 장면 ---------- */

.scene-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-3); }
.pill {
  flex: none; min-height: var(--touch); padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel); cursor: pointer; white-space: nowrap;
}
.pill.current { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.scene-wrap { position: relative; }
.scene-viewport {
  position: relative; overflow: hidden; width: 100%; max-height: var(--scene-max-h);
  background: var(--scene-bg); border-radius: var(--radius); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer;
}
.scene-viewport.zoomed { cursor: grab; }
.scene-viewport.panning { cursor: grabbing; }
.scene-stage { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; }
.scene-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* 그림이 없을 때: 장면 묘사는 위쪽 띠에 작게 두어 핫스팟의 윤곽과 이름표를 가리지 않는다 */
.scene-fallback {
  position: absolute; inset: 0; display: flex; align-items: flex-start;
  background: var(--scene-fallback); color: var(--scene-fallback-fg);
  font-family: var(--font-serif); font-size: 0.72rem; line-height: 1.5;
}
.fb-band { width: 100%; padding: 0.35rem 0.6rem; background: rgba(0, 0, 0, 0.28); }
.fb-band p {
  margin: 0; opacity: 0.9;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 960px) {
  .scene-fallback { font-size: 0.85rem; }
}
.scene-overlay { position: absolute; inset: 0; }
.hs-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs-outline { fill: rgba(255, 255, 255, 0.08); stroke: #f3d9a8; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.hs-label {
  position: absolute; z-index: 1; transform: translateY(-110%); max-width: 45%;
  padding: 0 0.35rem; border-radius: 0.25rem; background: rgba(0, 0, 0, 0.65); color: #fff;
  font-size: 0.72rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.hs-done {
  position: absolute; width: 0.8rem; height: 0.8rem; transform: translate(-50%, -50%);
  border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.hs-a11y { position: absolute; padding: 0; border: 0; background: transparent; pointer-events: none; opacity: 0; }
.hs-a11y:focus-visible { opacity: 1; outline: 3px solid #ffd27a; outline-offset: 0; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25); }
.ripple {
  position: absolute; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8); pointer-events: none; animation: ripple 0.45s ease-out forwards;
}
@keyframes ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.zoom-controls { display: flex; gap: var(--space-2); justify-content: flex-end; padding-top: var(--space-2); }

.scene-list { margin-top: var(--space-3); }
.scene-list[hidden] { display: none; }
.hs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-2); }
.hs-list .btn { justify-content: space-between; text-align: left; }
.hs-item.done { border-style: dashed; }
.scene-desc { margin-top: var(--space-3); }
.scene-text { margin-bottom: var(--space-1); }
.scene-text.clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 960px) {
  .scene-text.clamp { display: block; -webkit-line-clamp: unset; }
  .more-btn { display: none; }
}

/* ---------- 결과 패널 ---------- */

.result-body .verdict { font-weight: 700; font-size: 1.1rem; }
.verdict.ok { color: var(--ok); }
.verdict.near, .verdict.wrong { color: var(--danger); }
.result-body .say { margin-bottom: var(--space-4); }
.then { margin-top: var(--space-4); color: var(--muted); font-size: 0.9rem; border-top: 1px dashed var(--border); padding-top: var(--space-3); }
.summary { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); font-weight: 700; }
.entry-folded > summary {
  display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-3);
  border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); cursor: pointer;
}
.entry-folded[open] > summary { margin-bottom: var(--space-3); }

/* ---------- 인물 ---------- */

.suspect-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.suspect {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  min-width: 3.5rem; max-width: 5.5rem; padding: var(--space-1) 0; border: 2px solid transparent; border-radius: var(--radius-lg);
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.suspect .portrait.md { width: 3.5rem; height: 3.5rem; }
.suspect.current { border-color: var(--accent); background: var(--accent-soft); }
.suspect-name { font-weight: 700; font-size: 0.95rem; }
.person-heading { margin: 0; font-size: 1.4rem; }
.person-title { color: var(--muted); font-size: 0.9rem; margin: 0; }
.person-intro { font-size: 0.9rem; margin: 0; }
.person-head { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
@media (max-width: 959.98px) {
  .person-head { flex-wrap: nowrap; gap: var(--space-4); }
  .person-head > div { min-width: 0; }
  .person-head .portrait.lg { width: 5.5rem; height: 7.5rem; }
  .person-head .portrait.lg.initial { font-size: 2.2rem; }
}
.talk-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn.talk.done { border-style: dashed; }
.testimony-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.testimony-line {
  display: flex; gap: var(--space-2); align-items: flex-start; justify-content: space-between; width: 100%; min-height: var(--touch);
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.testimony-item.aimed .testimony-line { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.present-sheet { margin-top: var(--space-4); }
.kind-jumps { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.btn.kind-jump { min-height: 2.25rem; padding: 0 var(--space-2); font-size: 0.85rem; }
.bank-sheet .bank-tip { margin: 0 0 var(--space-1); flex: none; }
.bank-sheet .kind-jumps { flex: none; }
.aim-tip { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.bank-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.bank-target { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bank-head .btn.small { flex: none; }
.sheet-toggle { display: none; }
@media (max-width: 959.98px) { .sheet-toggle { display: inline-flex; } }

/* ---------- 수첩 ---------- */

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); }
.tab { min-height: var(--touch); padding: 0 var(--space-4); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; }
.tab.current { border-bottom-color: var(--accent); font-weight: 700; }
.word-group { margin-bottom: var(--space-3); }
.entry-list, .entry-links, .puzzle-list { list-style: none; padding: 0; margin: 0; }
.entry-link {
  display: flex; align-items: center; width: 100%; min-height: var(--touch); padding: var(--space-1) var(--space-2);
  border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer;
}
.entry-link:hover { background: var(--accent-soft); }
.used-in { margin-top: var(--space-4); }
.notebook.panel .screen-title { font-size: 1.2rem; }

/* ---------- 퍼즐 ---------- */

.accuse-card {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: var(--touch);
  margin-bottom: var(--space-4); padding: var(--space-4);
  border: 2px solid var(--accent); border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--fg); text-align: left; cursor: pointer;
}
.accuse-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; }
.puzzle-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.puzzle-card {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: var(--touch); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); text-align: left; cursor: pointer;
}
.puzzle-title { font-weight: 700; }
.puzzle-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--muted); font-size: 0.9rem; margin: 0; }
.puzzle-prompt { margin-top: var(--space-2); }

.sentences { margin: var(--space-4) 0; font-size: 1.1rem; line-height: 2.6; scroll-margin-top: calc(var(--topbar-h) + var(--space-2)); }
.sentence { margin-bottom: var(--space-3); }
.blank {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-height: var(--touch); min-width: 5.5em; margin: 0.1em 0.15em; padding: 0 var(--space-3);
  border: 2px dashed var(--muted); border-radius: var(--radius); background: var(--panel); line-height: 1.3; cursor: pointer;
}
.blank.empty { color: var(--muted); font-size: 0.9rem; }
.blank.filled { border-style: solid; border-color: var(--chip-fg); background: var(--chip-bg); color: var(--chip-fg); text-decoration: underline; text-underline-offset: 0.2em; }
.blank.selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.blank:disabled { cursor: default; opacity: 1; }
.read-only .blank { border-style: solid; }
.blank.shake { animation: shake 0.35s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.puzzle-message { min-height: 1.7em; color: var(--danger); }
.bank-sheet { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.submit-row { margin-top: var(--space-3); }
.slot-hidden { visibility: hidden; }
@media (max-width: 959.98px) {
  /* 단어 은행만 시트 안에서 스크롤되고, 제출 줄은 시트 아래쪽에 늘 보인다 */
  .bank-sheet {
    position: sticky; bottom: var(--tabbar-h); z-index: 5;
    display: flex; flex-direction: column; max-height: 46dvh; margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4) var(--space-2); background: var(--panel); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  }
  .bank-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .present-sheet { max-height: 30dvh; }
  .present-sheet.collapsed .bank-scroll, .present-sheet.collapsed .kind-jumps { display: none; }
  /* 단어 칸 아래쪽을 흐리게 해서 안에서 밀어 볼 수 있다는 것을 알린다 */
  .present-sheet .bank-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); padding-bottom: 1rem; }
  /* 심문 화면은 시트가 탭 막대 바로 위에 붙도록 아래 여백을 없애고 화면 높이를 채운다 */
  .main:has(> .people-screen) { padding-bottom: var(--tabbar-h); }
  .people-screen { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - var(--space-4)); }
  .people-screen .present-sheet { margin-top: auto; }
  .people-screen .person-head .portrait.lg { width: 4.5rem; height: 6rem; }
  .people-screen .person-heading { font-size: 1.2rem; }
  .bank-sheet .submit-row { flex: none; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
}

.card-list { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.card-item {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.card-item.hidden-card { border-style: dashed; color: var(--muted); justify-content: center; }
.card-item.dragging-card { box-shadow: var(--shadow); border-color: var(--accent); }
.card-text { flex: 1; }
.card-moves { display: flex; gap: var(--space-1); }
.handle { width: var(--touch); height: var(--touch); border: 0; background: none; cursor: grab; touch-action: none; font-size: 1.2rem; color: var(--muted); }

.accuse-screen { padding: var(--space-4); border: 2px solid var(--accent); border-radius: var(--radius-lg); background: var(--panel); }

/* ---------- 결말 ---------- */

.epilogue, .results { margin-top: var(--space-5); }
.epi-part { margin-bottom: var(--space-4); }
.cite { min-height: var(--touch); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: var(--panel); cursor: pointer; font-size: 0.9rem; }
.cite.unseen { border-style: dashed; color: var(--muted); }
.result-list { padding-left: 1.2rem; }

/* ---------- 디버그 모드(12절) ---------- */

.dbg-toggle {
  position: fixed; right: var(--space-3); bottom: calc(var(--tabbar-h) + var(--space-3)); z-index: 70;
  min-height: var(--touch); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 999px;
  background: #222; color: #fff; font-size: 0.85rem; cursor: pointer; opacity: 0.85;
}
.dbg-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 69; width: min(30rem, 100%);
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 0.85rem; overflow-wrap: anywhere; word-break: normal;
}
.dbg-panel[hidden] { display: none; }
.dbg-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.dbg-body { flex: 1; overflow-y: auto; padding: var(--space-3); }
.dbg-body h3 { font-size: 0.9rem; margin-top: var(--space-4); }
.dbg-content { padding-top: var(--space-2); }
.dbg-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.dbg-table th, .dbg-table td { border-bottom: 1px solid var(--border); padding: 0.2rem 0.3rem; text-align: left; vertical-align: top; }
.dbg-ok { color: var(--ok); }
.dbg-bad { color: var(--danger); }
.dbg-log { padding-left: 1.5rem; margin: 0; }
.dbg-input { min-height: var(--touch); flex: 1; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); }
.dbg-check { display: flex; gap: var(--space-2); align-items: center; min-height: var(--touch); }
.dbg-puzzle { border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.dbg-overlay { position: absolute; inset: 0; pointer-events: none; }
.dbg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dbg-shape { fill: rgba(255, 80, 80, 0.12); stroke: #ff5050; stroke-width: 2; vector-effect: non-scaling-stroke; }
.dbg-hit { fill: none; stroke: #ffd24a; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.dbg-expand { fill: none; stroke: #7fd4ff; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.dbg-hidden { stroke: #999 !important; fill: rgba(150, 150, 150, 0.1) !important; }
.dbg-tag { position: absolute; padding: 0 0.3rem; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.65rem; line-height: 1.4; white-space: nowrap; overflow-wrap: normal; }
.dbg-tag.dbg-hidden { color: #bbb; }

/* ---------- 움직임 줄이기 ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}