/* 피란길 — 화면 (DESIGN.md 7장)
   크롬북·태블릿·PC 공용. 빌드 없음. */

:root {
  --paper: #f3ede2;
  --card: #fffdf8;
  --ink: #241f18;
  --ink-soft: #5b5347;
  --ink-faint: #8b8275;
  --line: #d8cfbe;
  --line-soft: #e8e0d1;
  --accent: #7a4326;
  --accent-soft: #f0e3d6;
  --front: #a8402f;
  --ok: #4a6b45;
  --shadow: 0 1px 2px rgba(60, 48, 32, .08), 0 6px 18px rgba(60, 48, 32, .07);
  --r: 10px;

  --fs: 17px;
  --measure: 40rem;
}
html[data-font="s"] { --fs: 15px; }
html[data-font="m"] { --fs: 17px; }
html[data-font="l"] { --fs: 20px; }
html[data-font="xl"] { --fs: 23px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
}
/* 종이색은 html 에만. body 에도 두면 뒤에 깔린 배경 그림을 덮는다. */
html { background: var(--paper); }
body { background: transparent; }
body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  font-size: var(--fs);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.35; margin: 0; }
p { margin: 0; }
a { color: var(--accent); }

.screen { min-height: 100dvh; }
[hidden] { display: none !important; }

/* ── 버튼 ───────────────────────────── */

.btn {
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .6em 1em;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { background: #fff; border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: var(--accent);
  color: #fff8f0;
  border-color: var(--accent);
  text-align: center;
  font-weight: 600;
}
.btn-primary:hover { background: #8d5130; color: #fff; }

.btn-quiet { background: transparent; text-align: center; }

.btn-icon {
  padding: .25em .6em;
  line-height: 1.2;
  min-width: 2.2em;
  text-align: center;
}
.btn-icon[data-font-step="-1"] { font-size: .8em; }
.btn-icon[data-font-step="1"] { font-size: 1.05em; }

/* ── 불러오는 중 ─────────────────────── */

.boot {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  color: var(--ink-faint);
  padding: 16px;
  text-align: center;
}

/* ── 첫 화면 ─────────────────────────── */

.start {
  display: grid;
  place-items: center;
  padding: 40px 16px;
}
.start-inner {
  width: 100%;
  max-width: 34rem;
  display: grid;
  gap: 1.5rem;
}
.start h1 {
  font-size: 2.6em;
  letter-spacing: .06em;
  text-align: center;
}
.start .subtitle {
  text-align: center;
  color: var(--ink-soft);
  margin-top: -1rem;
}
.notice {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow);
}
.notice h2 { font-size: 1em; color: var(--accent); margin-bottom: .4rem; }
.notice p { color: var(--ink-soft); font-size: .95em; }

.name-form { display: grid; gap: .5rem; }
.name-form label { font-weight: 600; font-size: .95em; }
.name-form input {
  font: inherit;
  padding: .6em .8em;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: inherit;
  width: 100%;
}
.name-form input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.hint { font-size: .85em; color: var(--ink-faint); }
.name-form .btn { margin-top: .5rem; }

.credit {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  justify-content: center;
  font-size: .85em;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  padding-top: 1rem;
}

/* ── 위쪽 띠 ─────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
  padding: .6rem max(12px, env(safe-area-inset-left)) .6rem max(12px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--paper) 92%, #fff);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar-left { min-width: 9rem; }
.date { font-size: .95em; font-weight: 600; }
.place { font-size: .8em; color: var(--ink-faint); }

.hud-mid { transition: opacity 2s ease; }
/* 에필로그 — 자원 막대가 서서히 사라진다. 자리는 그대로 두어 머리띠가 움찔하지 않게. */
.hud-mid.gone { opacity: 0; pointer-events: none; }

.resources { display: flex; flex-wrap: wrap; gap: .1rem 1rem; flex: 1 1 18rem; }
.res { display: flex; align-items: center; gap: .4rem; font-size: .8em; }
.res-name { color: var(--ink-soft); white-space: nowrap; }
.pips { display: flex; gap: 2px; }
.pip {
  width: .62em; height: 1.05em;
  border-radius: 2px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.pip.on { background: var(--accent); border-color: var(--accent); }
.res.empty .res-name { color: var(--front); font-weight: 600; }
.fontsize { display: flex; gap: .25rem; }

/* ── 본문 배치 ───────────────────────── */

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem max(12px, env(safe-area-inset-left)) 4rem max(12px, env(safe-area-inset-right));
  max-width: 68rem;
  margin: 0 auto;
}
@media (min-width: 62rem) {
  .layout { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
  .layout.nomap { grid-template-columns: minmax(0, 1fr); }
  .mapwrap { position: sticky; top: 5.2rem; }
}

.mapwrap details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.mapwrap summary {
  cursor: pointer;
  padding: .55rem .9rem;
  font-size: .85em;
  font-weight: 600;
  color: var(--ink-soft);
}
.mapbox { padding: 0 .7rem .7rem; }
#map { width: 100%; height: auto; display: block; }
.mapcaption { font-size: .72em; color: var(--ink-faint); text-align: center; margin-top: .3rem; }

/* ── 카드 ───────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.4rem clamp(1rem, 4vw, 2rem) 1rem;
  max-width: var(--measure);
  display: grid;
  gap: 1rem;
}
.card-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge {
  font-size: .72em;
  padding: .15em .6em;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--accent-soft);
  white-space: nowrap;
}
.badge.kind { background: transparent; }

.card h2 { font-size: 1.45em; }
.card-text { white-space: pre-wrap; }
.card-extra { color: var(--ink-soft); }
.card-extra p + p { margin-top: .5rem; }

.card-notice {
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: .6rem .9rem;
  font-size: .9em;
  color: var(--accent);
}

/* 장 표지 */
.card.chapter {
  text-align: center;
  padding-block: 3rem;
  background: linear-gradient(180deg, #fffdf8, #f6efe3);
}
.card.chapter h2 { font-size: 1.8em; }
.card-subtitle { color: var(--ink-soft); letter-spacing: .04em; }
.card.chapter .card-subtitle { font-size: 1.15em; margin-top: -.4rem; }
.card.chapter .card-actions { justify-content: center; }

/* 사연판 (E-2) */
.signboard {
  border: 3px double var(--ink-soft);
  background: #fbf6ea;
  padding: 1rem 1.1rem;
  display: grid;
  gap: .6rem;
  font-size: .95em;
  line-height: 1.6;
}
.signboard p { border-bottom: 1px dotted var(--line); padding-bottom: .5rem; }
.signboard p:last-child { border-bottom: 0; padding-bottom: 0; }

/* 사진·공문서 */
figure { margin: 0; }
figure img { width: 100%; height: auto; border-radius: 6px; display: block; }
figcaption { font-size: .78em; color: var(--ink-faint); margin-top: .4rem; }

/* 선택지 */
.choices { display: grid; gap: .55rem; }
.choice { display: flex; gap: .7rem; align-items: baseline; }
.choice-key {
  font-size: .75em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 .35em;
  flex: none;
}

/* 결과 한 줄 */
.result {
  border-left: 3px solid var(--accent);
  padding: .3rem 0 .3rem .9rem;
  color: var(--ink-soft);
}
.card-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* 증언 버튼 */
.testimony-btn { justify-self: start; font-size: .9em; }
.testimony-btn::before { content: "❝ "; color: var(--accent); }

/* '실제로는' 상자 */
.fact {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fbf7ef;
}
.fact > summary {
  cursor: pointer;
  padding: .6rem .9rem;
  font-size: .9em;
  font-weight: 600;
  display: flex;
  gap: .6rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.fact > summary .count { font-weight: 400; font-size: .85em; color: var(--ink-faint); }
.fact-body { padding: 0 .9rem .9rem; display: grid; gap: .6rem; font-size: .94em; }
.fact-diff {
  font-size: .88em;
  color: var(--ink-soft);
  background: var(--accent-soft);
  padding: .5rem .7rem;
  border-radius: 6px;
}
.fact-diff b { color: var(--accent); }
.srcline { font-size: .82em; color: var(--ink-faint); }
.srcline a { margin-right: .5rem; }

/* 장면 근거 줄 (항상 보임) */
.basis {
  border-top: 1px solid var(--line-soft);
  padding-top: .7rem;
  font-size: .78em;
  color: var(--ink-faint);
  line-height: 1.6;
}
.basis .kind {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 .55em;
  margin-right: .4em;
  color: var(--ink-soft);
}
.basis a { white-space: nowrap; }
.srcsep { color: var(--ink-faint); }

/* ── 팝업 ───────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(36, 31, 24, .55);
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal-box {
  position: relative;
  background: var(--card);
  border-radius: var(--r);
  max-width: 34rem;
  width: 100%;
  max-height: 84dvh;
  overflow: auto;
  padding: 1.6rem clamp(1rem, 4vw, 1.8rem);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.modal-close {
  position: absolute;
  top: .4rem; right: .6rem;
  border: 0; background: none;
  font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: var(--ink-faint);
}
.modal-box h3 { font-size: 1.1em; margin-bottom: .6rem; }

.tst-lead {
  font-size: .88em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: .4rem .7rem;
  margin-bottom: .7rem;
}
.tst-head { font-size: .82em; color: var(--ink-faint); margin-bottom: .6rem; }
.tst-head b { color: var(--ink); display: block; font-size: 1.1em; font-weight: 600; }
.tst-original {
  background: #fbf6ea;
  border-left: 3px solid var(--accent);
  padding: .8rem 1rem;
  white-space: pre-wrap;
}
.tst-quoted { text-indent: -.35em; }
.tst-gloss { font-size: .88em; color: var(--ink-soft); margin-top: .7rem; }
.tst-gloss .label, .tst-notes .label { font-size: .85em; color: var(--ink-faint); display: block; }
.tst-notes { font-size: .82em; color: var(--ink-faint); margin-top: .7rem; }
.tst-notes li { margin-bottom: .2rem; }

/* ── 숫자 기록실 · 끝 화면 ───────────── */

.page { padding: 2rem 16px 5rem; }
.page-inner { max-width: 44rem; margin: 0 auto; display: grid; gap: 1.4rem; }
.page-inner h2 { font-size: 1.8em; }
.page-inner h3 { font-size: 1.05em; }

.rec {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .5rem;
}
.rec.dim { opacity: .45; cursor: pointer; }
.rec.dim:hover { opacity: .75; }
.rec .official { font-size: .95em; }
.rec ol { margin: 0; padding-left: 1.2rem; font-size: .9em; display: grid; gap: .35rem; }
.rec .who { color: var(--ink-faint); font-size: .88em; }
.rec .expand-hint { font-size: .8em; color: var(--accent); }

.closing {
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: .6rem;
}
.closing ul { margin: 0; padding-left: 1.2rem; font-size: .92em; color: var(--ink-soft); }

.summary-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  display: grid;
  gap: 1rem;
}
.summary-card .ending { font-size: 1.6em; font-weight: 700; color: var(--accent); }
.summary-row { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; font-size: .95em; }
.summary-row dt { color: var(--ink-faint); font-size: .9em; }
.summary-row dd { margin: 0; }
.compare { font-size: 1.05em; text-align: center; color: var(--ink-soft); }

/* ── 1983 재회 확인 ──────────────────── */

.faces { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.face {
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: #f7f1e6;
  padding: .5rem;
  cursor: pointer;
}
.face:hover { border-color: var(--accent); }
.face svg { display: block; width: 92px; height: 112px; }
.face img {
  display: block;
  width: clamp(104px, 27vw, 148px);
  aspect-ratio: 9 / 10;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 6px;
}
.face.wrong { opacity: .35; }
.face:disabled { cursor: default; }
.face:disabled:hover { border-color: var(--line); }
.quiz { display: grid; gap: .6rem; }
.quiz .q { font-weight: 600; }
.quiz .opts { display: grid; gap: .4rem; }
.quiz .opt.wrong { opacity: .4; text-decoration: line-through; }
.quiz-note { font-size: .85em; color: var(--front); min-height: 1.5em; }
.step-count { font-size: .8em; color: var(--ink-faint); }

/* ── 배경 그림 ───────────────────────── */

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
}
.bg-img {
  position: absolute;
  inset: -4%;                 /* 흐리게 하면 가장자리가 비므로 조금 키운다 */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.bg-img.on { opacity: 1; }
/* 글이 잘 읽히게 — 흐리고 어둡게, 종이색을 섞는다 */
.bg-veil {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(7px) saturate(.7) brightness(.72);
  background: linear-gradient(180deg, rgba(36, 31, 24, .34), rgba(36, 31, 24, .46));
}
/* backdrop-filter 를 못 쓰는 브라우저에서는 그림 쪽을 직접 흐리게 */
@supports not (backdrop-filter: blur(1px)) {
  .bg-img { filter: blur(7px) saturate(.7) brightness(.72); }
}
/* 배경이 깔렸을 때 — 글이 놓인 자리에는 종이를 깔아 준다 */
html.has-bg .card,
html.has-bg .mapwrap details,
html.has-bg .rec {
  box-shadow: 0 2px 6px rgba(20, 16, 10, .18), 0 14px 40px rgba(20, 16, 10, .22);
}
html.has-bg .start-inner,
html.has-bg .page-inner {
  background: color-mix(in srgb, var(--paper) 94%, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.2rem, 4vw, 2.2rem);
  box-shadow: 0 2px 6px rgba(20, 16, 10, .18), 0 14px 40px rgba(20, 16, 10, .22);
}
/* 지도 아래 작은 글씨와 범례는 카드 안에 있으므로 그대로 둔다 */

/* 장면 삽화 */
figure.scene { margin: 0; }
figure.scene img {
  width: 100%;
  border-radius: var(--r);
  display: block;
}
figure.scene figcaption {
  margin-top: .35rem;
  font-size: .8em;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .bg-img { transition: none; }
}

/* ── 갈림길 그림 ─────────────────────── */

.tree {
  position: relative;
  margin: .2rem 0 1.4rem;
  padding-left: 1.1rem;
}
/* 세로 줄기 */
.tree::before {
  content: '';
  position: absolute;
  left: .28rem; top: .6rem; bottom: .6rem;
  width: 2px;
  background: var(--line-soft);
}
.tree-row { position: relative; margin: 0 0 .9rem; }
/* 줄기에서 뻗은 짧은 가로선 */
.tree-row::before {
  content: '';
  position: absolute;
  left: -.82rem; top: .95rem;
  width: .72rem; height: 2px;
  background: var(--line-soft);
}
.tree-row.side { margin-left: 1.5rem; }
.tree-sidelabel {
  margin: 0 0 .25rem;
  font-size: .82em;
  color: var(--ink-faint);
}
.tree-node {
  display: inline-flex; align-items: baseline; gap: .45rem;
  background: #fffdf7;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: .4rem .7rem;
  text-align: left;
  font: inherit;
  max-width: 100%;
}
.tree-node.repeat { border-style: dashed; }
.tree-node.dim { color: var(--ink-faint); background: transparent; }
.tree-node.askable { cursor: pointer; }
.tree-node.askable:hover { background: #f6efe0; }
.tree-title { font-weight: 600; }
.tree-node.dim .tree-title { font-weight: 400; }

.tree-branches {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin: .35rem 0 0 .9rem;
}
.tree-branch {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font: inherit; font-size: .88em;
  background: #f6efe0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: .2rem .6rem;
  cursor: default;
  text-align: left;
}
.tree-branch.dim { background: transparent; color: var(--ink-faint); cursor: pointer; }
.tree-branch.dim:hover { background: #f3e9d2; }
.tree-branch.now {
  border-color: var(--accent);
  border-width: 2px;
  font-weight: 600;
}
.tree-branch.small { padding: .05rem .45rem; font-size: .9em; }
.tree-branch .bkey { color: var(--ink-faint); font-size: .85em; }
.tree-legend { color: var(--ink-faint); }

.coll-sub2h { margin: 1rem 0 .3rem; font-size: 1em; color: var(--ink-soft); }
.allscenes { margin-top: 1.2rem; }

@media (max-width: 34rem) {
  .tree-branches { margin-left: .4rem; }
  .tree-row.side { margin-left: .8rem; }
}

/* ── 낱말 풀이 ───────────────────────── */
.gloss {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  border-bottom: 1px dotted var(--accent);
  cursor: help;
}
.gloss:hover, .gloss:focus-visible { background: #f3e9d2; }
.gloss-pop {
  position: absolute; z-index: 120;
  max-width: 22rem; min-width: 12rem;
  background: #fffdf7;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(40, 33, 24, .18);
  padding: .6rem .8rem;
  font-size: .92em;
  line-height: 1.6;
}
.glosslist dt { font-weight: 600; margin-top: .6rem; }
.glosslist dd { margin: .1rem 0 0; color: var(--ink-soft); }
.gloss-pop b { display: block; margin-bottom: .2rem; }
.gloss-pop p { margin: 0; color: var(--ink-soft); }

.pack-count { margin: .15rem 0 .6rem; font-size: .9em; color: var(--ink-faint); }
.heavy-line {
  margin: .5rem 0 0;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── 개발 모드 ───────────────────────── */

.debug {
  position: fixed;
  right: 8px; bottom: 8px;
  z-index: 90;
  max-width: min(26rem, 80vw);
  max-height: 80vh;
  overflow: auto;
  background: rgba(30, 26, 20, .92);
  color: #f0e9dc;
  font: 11px/1.5 ui-monospace, Consolas, monospace;
  padding: .6rem .7rem;
  border-radius: 8px;
}
.debug-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .35rem;
}
.debug-info { margin: 0; font: inherit; white-space: pre-wrap; }
.debug-msg {
  margin: .35rem 0 0; padding: .2rem .35rem;
  background: rgba(190, 80, 60, .35); border-radius: 4px;
}
.debug-tools { margin-top: .5rem; border-top: 1px solid rgba(240, 233, 220, .25); padding-top: .4rem; }
.dbg-label { margin: .45rem 0 .2rem; color: #cfc6b4; }
.dbg-note { margin: .5rem 0 0; color: #a99f8d; }
.dbg-row { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.dbg-res { display: inline-flex; align-items: center; gap: .15rem; margin-right: .4rem; }
.dbg-btn {
  font: inherit; color: #f0e9dc; cursor: pointer;
  background: rgba(240, 233, 220, .12);
  border: 1px solid rgba(240, 233, 220, .35);
  border-radius: 4px; padding: .15rem .4rem;
}
.dbg-btn:hover { background: rgba(240, 233, 220, .25); }
.dbg-input {
  font: inherit; color: #f0e9dc; width: 6rem;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(240, 233, 220, .35);
  border-radius: 4px; padding: .15rem .35rem;
}
.debug-table {
  border-collapse: collapse;
  font: 12px/1.5 ui-monospace, Consolas, monospace;
  width: 100%;
}
.debug-table th, .debug-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: .25rem .5rem;
  text-align: left;
}
.debug-table td.num { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .hud-mid.gone { opacity: 0; } /* 바로 사라진다 */
}

/* ── 자원 변화 표시 ──────────────────── */

.hud-mid { flex: 1 1 18rem; display: grid; gap: .15rem; }
.res { position: relative; }
.res-delta {
  font-size: .78em;
  font-weight: 700;
  white-space: nowrap;
  animation: deltaFloat 1.5s ease-out forwards;
}
.res-delta.up { color: #2f6b3a; }
.res-delta.down { color: #b23a2a; }
@keyframes deltaFloat {
  0%   { opacity: 0; transform: translateY(.35em); }
  18%  { opacity: 1; transform: translateY(0); }
  60%  { opacity: 1; transform: translateY(-.15em); }
  100% { opacity: 0; transform: translateY(-.55em); }
}
.pip { transition: background .2s, border-color .2s; }
.res.changed .pips { animation: pipFlash .55s ease-out 2; }
@keyframes pipFlash { 0%, 100% { filter: none; } 50% { filter: brightness(1.45) saturate(1.3); } }

.res.zero .pip { border-color: var(--front); }
.res.zero .pip:not(.on) { background: #f3d9d4; }
.res.zero .res-name { color: var(--front); font-weight: 700; }

.zero-warn {
  font-size: .8em;
  color: var(--front);
  font-weight: 600;
  margin: 0;
}
.zero-warn.strand { color: #fff; background: var(--front); border-radius: 6px; padding: .1rem .5rem; }

.rule-line { border-top: 1px dotted var(--line); padding-top: .6rem; }

/* ── 화면 전환 ───────────────────────── */

.card.fading { opacity: 0; transition: opacity .18s ease-in; }
.card.fresh { animation: cardIn .34s ease-out; }
@keyframes cardIn { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.date.flip { animation: dateFlip .5s ease-out; }
@keyframes dateFlip {
  0%   { opacity: .2; transform: rotateX(-70deg); }
  60%  { opacity: 1; transform: rotateX(8deg); }
  100% { opacity: 1; transform: none; }
}
.date { transform-origin: 50% 0; }

.curtain {
  position: fixed; inset: 0; z-index: 70;
  background: #14110d;
  opacity: 0;
  pointer-events: none;
}
.curtain.on { opacity: 1; transition: opacity .5s ease-in; pointer-events: all; }
.curtain.off { opacity: 0; transition: opacity .6s ease-out; }
.card.chapter.slow h2 { animation: chapterIn 1.4s ease-out; }
.card.chapter.slow .card-text,
.card.chapter.slow .card-subtitle,
.card.chapter.slow .card-notice { animation: chapterIn 1.8s ease-out; }
@keyframes chapterIn { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } }

/* ── 지도 범례 ───────────────────────── */

.maplegend { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .72em; color: var(--ink-soft); }
.maplegend li { display: flex; align-items: center; gap: .4rem; }
.maplegend .sw { width: .9em; height: .9em; border-radius: 2px; flex: none; }
.maplegend .sw.enemy { background: rgba(192, 57, 43, .42); border: 1px solid rgba(192, 57, 43, .6); }
.maplegend .sw.friendly { background: rgba(43, 108, 163, .34); border: 1px solid rgba(43, 108, 163, .55); }
.maplegend .sw.front { height: 0; border-top: 2px solid #a8402f; border-radius: 0; }
.maplegend .sw.p38 { height: 0; border-top: 2px dashed #4c4336; border-radius: 0; }
.maplegend .sw.here { background: #7a4326; border-radius: 50%; }

#map .marker { transition: transform 2.4s cubic-bezier(.4, 0, .2, 1); }

/* 낙오 카드 */
.card.strand { border-left: 4px solid var(--front); }

@media (prefers-reduced-motion: reduce) {
  .res-delta, .res.changed .pips, .card.fresh, .date.flip,
  .card.chapter.slow h2, .card.chapter.slow .card-text, .card.chapter.slow .card-subtitle, .card.chapter.slow .card-notice { animation: none !important; }
  .res-delta { display: none; }
  .card.fading { transition: none; opacity: 1; }
  #map .marker { transition: none; }
  .curtain { display: none; }
}

/* ── 소리 단추 ───────────────────────── */

.soundbox { display: flex; align-items: center; gap: .35rem; }
.soundbox .btn-icon { font-size: 1em; opacity: .55; }
.soundbox .btn-icon.on { opacity: 1; color: var(--accent); }
#sound-volume { width: 5rem; accent-color: var(--accent); }

/* ── 짐 싸기 ─────────────────────────── */

.packing { display: grid; gap: .7rem; }
.pack-hint { font-size: .9em; color: var(--ink-soft); }
.pack-list { display: grid; gap: .5rem; }
.pack-item { display: flex; align-items: center; gap: .7rem; }
.pack-item:disabled { opacity: .4; cursor: default; }
.pack-box {
  width: 1.05em; height: 1.05em; flex: none;
  border: 2px solid var(--line); border-radius: 4px; background: #fff;
}
.pack-item.on, .sb-feature.on { border-color: var(--accent); background: var(--accent-soft); }
.pack-item.on .pack-box, .sb-feature.on .pack-box {
  background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 2px #fffdf8;
}

/* ── 사료 질문 ───────────────────────── */

.quizbox {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  background: #fbf7ef;
  padding: .9rem 1rem;
  display: grid;
  gap: .55rem;
}
.quiz-label { font-size: .78em; color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.quizbox .q { font-weight: 600; }
.quizbox .opts { display: grid; gap: .4rem; }
.quizbox .opt.wrong { opacity: .45; text-decoration: line-through; }

/* ── 사연판 쓰기 ─────────────────────── */

.signboard-edit { display: grid; gap: .9rem; }
.sb-intro { font-size: .92em; color: var(--ink-soft); }
.sb-target { display: grid; gap: .45rem; }
.sb-label { font-weight: 600; font-size: .95em; }
.sb-features { display: grid; gap: .4rem; }
.sb-feature { display: flex; align-items: center; gap: .7rem; font-size: .95em; }
.signboard.posted { animation: postUp .8s ease-out; }
@keyframes postUp {
  0%   { opacity: 0; transform: translateY(1.2rem) rotate(-1.5deg); }
  70%  { transform: translateY(-.15rem) rotate(.4deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .signboard.posted { animation: none; }
}

/* ══ 자료와 출처 · 교사용 안내 페이지 ══════════════════ */

body.doc { background: var(--paper); }

.dochead {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 1.6rem max(16px, env(safe-area-inset-left)) 0;
}
.dochead-inner { max-width: 50rem; margin: 0 auto; display: grid; gap: .7rem; }
.dochead h1 { font-size: 1.9em; }
.backlink { font-size: .85em; text-decoration: none; }
.backlink:hover { text-decoration: underline; }
.doclead { color: var(--ink-soft); }
.spoiler-warn {
  font-size: .85em; color: var(--accent);
  background: var(--accent-soft); border-radius: 6px;
  padding: .4rem .7rem; justify-self: start;
}
.searchbox { display: grid; gap: .25rem; font-size: .85em; color: var(--ink-soft); }
.searchbox input {
  font: inherit; font-size: 1.05rem;
  padding: .5em .8em; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: inherit;
}
.searchbox input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.tab {
  font: inherit; font-size: .88em;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--paper); color: var(--ink-soft);
  padding: .45em 1em; cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--ink); }
.tab.on { background: var(--card); color: var(--accent); font-weight: 700; box-shadow: 0 2px 0 0 var(--card); }

.docmain {
  max-width: 50rem; margin: 0 auto;
  padding: 1.6rem max(16px, env(safe-area-inset-left)) 5rem;
  display: grid; gap: 1.2rem;
}
.docsection { display: grid; gap: .8rem; scroll-margin-top: 1rem; }
.docsection > h2, .chapter-h {
  font-size: 1.3em; color: var(--accent);
  border-bottom: 2px solid var(--accent-soft);
  padding-bottom: .3rem; margin-top: 1.2rem;
}

.cardblock {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  display: grid; gap: .7rem;
  scroll-margin-top: 1rem;
}
.cardblock h3 { font-size: 1.1em; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.cardblock .cid {
  font: 600 .72em/1.6 ui-monospace, Consolas, monospace;
  color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 .4em;
}
.cardmeta { font-size: .8em; color: var(--ink-faint); }
.cardblock .block { display: grid; gap: .4rem; }
.cardblock h4 {
  font-size: .76em; letter-spacing: .06em; color: var(--accent);
  text-transform: none; font-weight: 700;
}
.cardblock .kind {
  display: inline-block; font-size: .78em;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0 .55em; color: var(--ink-soft);
}
.cardblock .diff { font-size: .9em; background: var(--accent-soft); border-radius: 6px; padding: .45rem .7rem; }
.cardblock blockquote { margin: 0; }
.cardblock .tst-notes { font-size: .82em; color: var(--ink-faint); margin: 0; padding-left: 1.1rem; }
.notebox { font-size: .88em; color: var(--ink-soft); background: #f7f2e8; border-radius: 6px; padding: .5rem .7rem; }
.flagnote { font-size: .8em; color: var(--front); }
.who { color: var(--ink-faint); font-size: .88em; }
.usedlist { margin: 0; padding-left: 1.1rem; font-size: .92em; display: grid; gap: .2rem; }
.rec-doc { display: grid; gap: .3rem; }
.rec-doc ol { margin: 0; padding-left: 1.2rem; font-size: .9em; display: grid; gap: .25rem; }
.docimg { width: 100%; height: auto; border-radius: 6px; }
.docimg.small { max-width: 14rem; }

.basiskinds { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.basiskinds h2 { font-size: 1.05em; color: var(--accent); margin-bottom: .5rem; }
.basiskinds dl { display: grid; gap: .3rem; margin: 0; }
.basiskinds dt { font-weight: 700; font-size: .9em; }
.basiskinds dd { margin: 0 0 .4rem; font-size: .9em; color: var(--ink-soft); }

.doctable { width: 100%; border-collapse: collapse; font-size: .93em; }
.doctable th, .doctable td { border-bottom: 1px solid var(--line-soft); padding: .55rem .5rem; text-align: left; vertical-align: top; }
.doctable th { font-size: .8em; color: var(--ink-faint); }
.doctable .tmin { white-space: nowrap; color: var(--accent); font-weight: 700; width: 5.5rem; }

.biglist { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; }
.biglist li > div { color: var(--ink-soft); font-size: .93em; }

.docsection .block {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: .9rem 1.1rem; display: grid; gap: .4rem;
}
.docsection .block h3 { font-size: 1.02em; }

.optrow { border-top: 1px dotted var(--line); padding: .6rem 0 .2rem; }
.optrow label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.optrow input { width: 1.05em; height: 1.05em; accent-color: var(--accent); }
.optrow.teacher-only { background: #f7f2e8; border-radius: 6px; padding: .6rem .7rem; margin-top: .5rem; border-top: 0; }
.linkrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.linkout {
  flex: 1 1 18rem; font: inherit; font-size: .9em;
  padding: .55em .7em; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: inherit;
}

.spoiler { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.spoiler > summary { cursor: pointer; padding: .8rem 1.1rem; font-weight: 700; color: var(--front); }
.spoiler .block { border: 0; }

.doccredit {
  border-top: 1px solid var(--line-soft);
  padding: 1.2rem 16px 2.5rem;
  text-align: center; font-size: .85em; color: var(--ink-faint);
}

/* 낙오 카드 알림 */
.strand-zeros {
  font-weight: 700;
  color: var(--front);
  background: #f7e4e0;
  border-radius: 6px;
  padding: .45rem .8rem;
  justify-self: start;
}
.strand-note { font-size: .8em; color: var(--ink-faint); }

/* 휴전선 강조 */
#map .frontline.glow { animation: frontGlow 2.4s ease-in-out 2; }
@keyframes frontGlow {
  0%, 100% { stroke: #a8402f; filter: none; }
  50% { stroke: #e8563c; filter: drop-shadow(0 0 1.5px #e8563c); }
}
@media (prefers-reduced-motion: reduce) { #map .frontline.glow { animation: none; } }

/* ── 갈림길 ──────────────────────────── */

.coll-body { display: grid; gap: .5rem; }
.coll-sub { font-size: 1em; color: var(--accent); margin-top: .9rem; }
.coll-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .6rem .9rem;
  display: grid; gap: .2rem;
}
.coll-row.dim { opacity: .5; background: transparent; border-style: dashed; }
.coll-row.dim:hover { opacity: .7; }
.coll-title { font-weight: 600; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.coll-title .cid {
  font: 600 .7em/1.6 ui-monospace, Consolas, monospace;
  color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 .35em;
}
.coll-sub2 { font-size: .85em; color: var(--ink-faint); }
.coll-hint { font-size: .85em; color: var(--accent); }

.nextplay {
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  display: grid; gap: .7rem; justify-items: center;
}
.nextplay-line { font-size: 1.05em; color: var(--accent); font-weight: 600; }
.btn.big { font-size: 1.1em; padding: .7em 1.6em; }

/* 결과에 덧붙는 줄 */
.result-extra { border-left-color: var(--line); color: var(--ink-soft); }

/* 한 문단씩 나타나는 카드 (E-2W) */
.paras { display: grid; gap: .9rem; }
.para { display: flex; gap: .9rem; opacity: 0; transform: translateY(.4rem); transition: opacity .7s, transform .7s; }
.para.on { opacity: 1; transform: none; }
.para-day {
  flex: none; min-width: 2.4em; text-align: right;
  font: 700 1.3em/1.4 ui-monospace, Consolas, monospace;
  color: var(--accent); opacity: .55;
}

/* 걸어온 길 */
.walkbox {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: .8rem; box-shadow: var(--shadow);
}
#walkmap { width: 100%; max-width: 22rem; height: auto; display: block; margin: 0 auto; }
.walk-ending {
  text-align: center; font-size: 1.6em; font-weight: 700; color: var(--accent);
  opacity: 0; transition: opacity 1.2s;
}
.walk-ending.on { opacity: 1; }
.walk-closing { text-align: center; color: var(--ink-soft); font-size: .95em; }

@media (prefers-reduced-motion: reduce) {
  .para { opacity: 1; transform: none; transition: none; }
  .walk-ending { opacity: 1; transition: none; }
}

/* 걸어온 길 — 한 덩이씩 나타나기 */
.reveal { opacity: 0; transform: translateY(.5rem); transition: opacity .9s, transform .9s; }
.reveal.on { opacity: 1; transform: none; }
.walk-shards { text-align: center; color: var(--accent); font-weight: 600; }
.walk-links { text-align: center; font-size: .85em; color: var(--ink-faint); }
.walk-links a { margin: 0 .2rem; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }