/* 21일 봉인 — 이 화면만의 디자인 규칙. 값 옆 D-번호의 까닭은 '디자인 결정.md'. */
:root {
  color-scheme: light;
  /* 색: 따뜻한 종이와 먹, 악센트는 밀랍 한 점 (D-P2-1, D-P2-2) */
  --paper: oklch(97.6% 0.010 85);
  --paper-sunk: oklch(94.6% 0.013 82);
  --rule: oklch(87% 0.013 75);
  --rule-strong: oklch(60% 0.016 70); /* 입력칸 테두리, 종이 위 3:1 이상 (D-P2-3) */
  --ink: oklch(24% 0.016 60);
  --ink-2: oklch(40% 0.016 60);
  --ink-3: oklch(47% 0.014 62); /* 라벨·보조, 종이 위 4.5:1 이상 */
  --wax: oklch(53% 0.135 40); /* 봉인 도장, 선택 표시, 진행, 포커스 (D-P2-2) */
  --wax-soft: oklch(91% 0.035 60);
  --on-ink: oklch(97.6% 0.010 85);
  --alert: oklch(47% 0.15 28);
  --scrim: oklch(20% 0.02 60 / 0.45);

  /* 글자: 한글을 덮는 고딕 한 가족, 위계는 굵기와 크기로 (D-P3-1) */
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --fs-label: 0.8125rem;
  --fs-small: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-h2: 1.375rem;
  --fs-quote: clamp(1.375rem, 3.2vw + 0.7rem, 1.75rem);
  --fs-display: clamp(2.125rem, 6.4vw + 0.8rem, 3.375rem); /* 본문의 2배 이상 (D-P3-2) */
  --lh-body: 1.72;
  --lh-display: 1.26;

  /* 간격: 4pt, 섹션 사이 숨은 크게 (D-P1-2) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 2.5rem; --s-8: 4rem; --s-9: 6rem;
  --gutter: clamp(1rem, 5vw, 2rem);
  --well: 34rem; /* 한글 한 줄 40자 안팎 (D-P1-1) */
  --well-wide: 60rem;

  /* 모양: 선으로 가르는 면, 모서리는 조작하는 것에만 (D-P2-4) */
  --radius-ctl: 10px;
  --hit: 3.25rem; /* 52px, 손가락 히트 44px 이상 */

  /* 움직임: 조용히, 한 번만 (D-P1-3) */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--wax); outline-offset: 3px; }
h1:focus, [tabindex="-1"]:focus { outline: none; } /* 화면 바뀔 때 제목으로 옮긴 포커스는 링을 그리지 않음 */

.skip {
  position: absolute; left: var(--gutter); top: -10rem;
  background: var(--ink); color: var(--on-ink);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-ctl); z-index: 10;
}
.skip:focus-visible { top: var(--s-3); }

/* ── 바탕 틀 ───────────────────────────── */
.masthead, .colophon, .view {
  width: min(100% - 2 * var(--gutter), var(--well));
  margin-inline: auto;
}
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.5rem; padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: var(--fs-small); letter-spacing: 0;
  min-height: 44px;
}
.wordmark svg { width: 1.375rem; height: 1.375rem; }
.masthead .when { color: var(--ink-3); font-size: var(--fs-label); }

main { display: block; }
.view { padding-block: var(--s-7) var(--s-8); animation: rise var(--dur-slow) var(--ease-out) both; }
.view[data-view="home"],
body[data-route="home"] .masthead,
body[data-route="home"] .colophon { width: min(100% - 2 * var(--gutter), var(--well-wide)); } /* 첫 화면은 머리·꼬리말도 같은 폭으로, 왼쪽 끝을 맞춘다 */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-6) var(--s-8);
  color: var(--ink-3); font-size: var(--fs-label); line-height: 1.7;
  display: grid; gap: var(--s-3);
}
.colophon strong { color: var(--ink-2); font-weight: 700; }

/* ── 글자 역할 ─────────────────────────── */
.label {
  display: block; color: var(--ink-3);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em;
  margin-bottom: var(--s-3);
}
.display, h1 {
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: 800; letter-spacing: -0.01em;
  overflow-wrap: anywhere; min-width: 0;
}
.view:not([data-view="home"]) h1 { font-size: clamp(1.75rem, 4.2vw + 0.8rem, 2.375rem); }
h2 { font-size: var(--fs-h2); line-height: 1.4; font-weight: 750; letter-spacing: -0.005em; }
h3 { font-size: var(--fs-body); line-height: 1.5; font-weight: 750; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: var(--s-4); max-width: 38ch; }
.small { font-size: var(--fs-small); color: var(--ink-3); }
.quote {
  font-size: var(--fs-quote); line-height: 1.5; font-weight: 700;
  padding-block: var(--s-5); border-block: 1px solid var(--rule);
}

/* ── 단추 (상태: 기본 / 올림 / 누름 / 포커스 / 막힘) ─ */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--hit); padding-inline: var(--s-6);
  border: 1px solid var(--ink); border-radius: var(--radius-ctl);
  background: var(--ink); color: var(--on-ink);
  font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--ink-2); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-quiet {
  background: transparent; color: var(--ink); border-color: var(--rule-strong);
}
.btn-quiet:hover { background: var(--paper-sunk); }
.btn-link {
  -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0;
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--ink-2); font: inherit; font-size: var(--fs-small);
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--rule-strong);
  cursor: pointer;
}
.btn-link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.actions .btn { flex: 0 1 auto; }
@media (max-width: 30rem) {
  .actions.stack { flex-direction: column; align-items: stretch; }
  .actions.stack .btn { width: 100%; }
}

/* ── 첫 화면 ───────────────────────────── */
.hero { display: grid; gap: var(--s-6); align-items: center; padding-bottom: var(--s-8); }
.hero-seal { width: clamp(6.5rem, 26vw, 8rem); }
@media (min-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--s-8); padding-block: var(--s-6) var(--s-9); }
  .hero-seal { order: 2; width: min(100%, 17rem); justify-self: center; }
}
.hero .actions { margin-top: var(--s-6); }
.hero .small { margin-top: var(--s-3); }

.faq { border-top: 1px solid var(--rule); padding-top: var(--s-7); max-width: var(--well); }
.faq dl { margin-top: var(--s-5); }
.faq dt { font-weight: 750; padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.faq dt:first-child { border-top: 0; padding-top: 0; }
.faq dd { color: var(--ink-2); margin: var(--s-2) 0 var(--s-5); }

/* ── 봉인 도장 ─────────────────────────── */
.seal-mark .wax { fill: var(--wax); }
.seal-mark .ring { fill: none; stroke: var(--wax-soft); stroke-width: 1.6; opacity: 0.7; }
.seal-mark text { fill: var(--wax-soft); font-family: var(--font); font-weight: 800; }
.stamp { width: 7.5rem; margin: var(--s-6) auto var(--s-5); }
.stamp.is-pressed { animation: press var(--dur-slow) var(--ease-out) both; }

/* ── 진단 (한 화면 한 질문) ────────────── */
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.track { height: 3px; background: var(--rule); margin-top: var(--s-2); overflow: hidden; }
.track > span { display: block; height: 100%; background: var(--wax); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.step { border: 0; margin: var(--s-7) 0 0; padding: 0; min-width: 0; }
.step legend { padding: 0; font-size: var(--fs-h2); line-height: 1.45; font-weight: 750; }
.step .desc { color: var(--ink-3); font-size: var(--fs-small); margin-top: var(--s-2); }

.choices { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.choice {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--hit); padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.choice:hover { background: var(--paper-sunk); }
.choice input {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 1.375rem; height: 1.375rem;
  border: 1.5px solid var(--rule-strong); border-radius: 50%; background: var(--paper);
  display: grid; place-content: center; cursor: pointer;
}
.choice input[type="checkbox"] { border-radius: 6px; }
.choice input::before {
  content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--wax); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out);
}
.choice input[type="checkbox"]::before { border-radius: 2px; }
.choice input:checked { border-color: var(--wax); }
.choice input:checked::before { transform: scale(1); }
.choice:has(input:checked) { font-weight: 700; }
.choice input:focus-visible { outline: 3px solid var(--wax); outline-offset: 3px; }
.choice input:disabled { opacity: 0.45; cursor: not-allowed; }

.field { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.field label { font-weight: 700; }
.input {
  -webkit-appearance: none; appearance: none; width: 100%;
  min-height: var(--hit); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-ctl);
  background: var(--paper); color: var(--ink); font: inherit; line-height: 1.6;
  resize: vertical;
}
textarea.input { min-height: 6.5rem; }
.input:hover { background: oklch(98.6% 0.007 85); }
.input:focus-visible { outline: 3px solid var(--wax); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--alert); }
.input:disabled { opacity: 0.45; cursor: not-allowed; }
.hint, .error { min-height: 1lh; font-size: var(--fs-small); }
.hint { color: var(--ink-3); }
.error { color: var(--alert); font-weight: 600; }

/* ── 결과지 ────────────────────────────── */
.mywish { margin-top: var(--s-6); padding: var(--s-5) 0; border-block: 1px solid var(--rule); font-size: var(--fs-lead); font-weight: 600; }
.mywish mark { background: none; color: inherit; text-decoration: underline 2px var(--wax); text-underline-offset: 0.3em; }
.finding { padding-block: var(--s-6); border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-2); }
.finding .no { color: var(--wax); font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.08em; }
.finding .evidence { font-size: var(--fs-small); color: var(--ink-2); background: var(--paper-sunk); padding: var(--s-2) var(--s-3); border-radius: 6px; justify-self: start; }
.finding .plan { font-weight: 700; }
.section { margin-top: var(--s-8); }
.cite { margin-top: var(--s-7); font-size: var(--fs-label); color: var(--ink-3); line-height: 1.7; }

/* ── 오늘의 3분 · 재생 ─────────────────── */
.player { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.player .row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.player .time { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: var(--fs-small); }
.guide { margin-top: var(--s-4); padding: var(--s-5); border: 1px dashed var(--rule-strong); border-radius: var(--radius-ctl); color: var(--ink-2); white-space: pre-line; }
.status { display: flex; gap: var(--s-2); align-items: baseline; color: var(--ink-2); font-size: var(--fs-small); min-height: 1lh; }
.status:not(:empty)::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wax); transform: translateY(-0.1em); }
.links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.nudge { margin-top: var(--s-6); padding: var(--s-4) 0; border-block: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; }

/* ── 기록 ──────────────────────────────── */
.notes { margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.notes li { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-1); }
.notes .when { color: var(--ink-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; }
.empty { margin-top: var(--s-6); padding: var(--s-6) var(--s-5); border: 1px dashed var(--rule-strong); border-radius: var(--radius-ctl); color: var(--ink-3); text-align: center; }
.help { margin-top: var(--s-7); font-size: var(--fs-small); color: var(--ink-3); }

/* ── 대화 상자 ─────────────────────────── */
dialog {
  width: min(100% - 2 * var(--gutter), 26rem); padding: var(--s-6);
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper); color: var(--ink);
}
dialog::backdrop { background: var(--scrim); }
dialog h2 { font-size: var(--fs-h2); }
dialog p { color: var(--ink-2); margin-top: var(--s-3); }

/* ── 봉봉판 (html[data-pan="bong"]) ─────── */
/* 봉봉은 밤에 일하는 밀랍 정령: 말풍선은 종이 위 옅은 칸, 밤 무대는 남색, 악센트는 그대로 밀랍 한 점 */
:root { --night: oklch(25% 0.045 265); --night-2: oklch(19% 0.035 265); --face: 3rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.say { display: flex; align-items: flex-end; gap: var(--s-3); margin-top: var(--s-5); }
.say-face { flex: none; width: var(--face); height: var(--face); border-radius: 50%; object-fit: cover; }
.say-text {
  min-width: 0; max-width: 34ch; padding: var(--s-3) var(--s-4);
  background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: 16px 16px 16px 4px;
  color: var(--ink); line-height: 1.6;
}
.say-who { display: block; color: var(--wax); font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.04em; }
.say-center { justify-content: center; }
.say-center .say-text { border-radius: 16px; text-align: center; }

.hero-bong { width: clamp(6.5rem, 30vw, 8.5rem); }
.hero-bong img, .sealed-bong { width: 100%; height: auto; }
@media (min-width: 56rem) { .hero-bong { order: 2; width: min(100%, 19rem); justify-self: center; } }

/* 진단: 지난 문답은 대화처럼, 지금 질문은 봉봉 얼굴 옆에 */
.chat-log { margin-top: var(--s-6); display: grid; gap: var(--s-2); }
.chat-log li { max-width: 85%; padding: var(--s-2) var(--s-4); border-radius: 16px; font-size: var(--fs-small); line-height: 1.6; }
.log-bong { justify-self: start; background: var(--paper-sunk); border: 1px solid var(--rule); border-bottom-left-radius: 4px; color: var(--ink-2); }
.log-me { justify-self: end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 4px; }
[data-pan="bong"] #quiz .step legend { position: relative; padding-left: calc(var(--face) + var(--s-3)); min-height: var(--face); font-size: var(--fs-lead); line-height: 1.55; }
[data-pan="bong"] #quiz .step legend::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--face); height: var(--face); border-radius: 50%;
  background: url(img/bong-smile.webp) center / cover;
}
[data-pan="bong"] #quiz .step .desc,
[data-pan="bong"] #quiz .step .choices,
[data-pan="bong"] #quiz .step .field,
[data-pan="bong"] #quiz .step .error { margin-left: calc(var(--face) + var(--s-3)); }
[data-pan="bong"] #quiz .choices { border-top: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
[data-pan="bong"] #quiz .choice { border: 1px solid var(--rule-strong); border-radius: 999px; padding: var(--s-2) var(--s-5) var(--s-2) var(--s-4); gap: var(--s-3); }
[data-pan="bong"] #quiz .choice:has(input:checked) { border-color: var(--wax); background: var(--wax-soft); }
[data-pan="bong"] #quiz .choice input { width: 1.125rem; height: 1.125rem; }
@media (max-width: 24rem) {
  [data-pan="bong"] #quiz .step .desc, [data-pan="bong"] #quiz .step .choices,
  [data-pan="bong"] #quiz .step .field, [data-pan="bong"] #quiz .step .error { margin-left: 0; }
}

/* 결과 컷과 개봉 컷 */
.panel { margin-top: var(--s-6); }
.panel img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); }
.panel .say { margin-top: var(--s-3); }

/* 봉인 의식: 밤 무대 위에 편지, 떨어져 찍히는 밀랍 도장, 받는 봉봉 */
.ritual {
  position: relative; margin: var(--s-7) auto 0; width: min(100%, 22rem); aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, oklch(96% 0.02 85) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 72% 14%, oklch(96% 0.02 85) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 86% 40%, oklch(96% 0.02 85) 50%, transparent 52%),
    radial-gradient(1px 1px at 32% 8%, oklch(96% 0.02 85) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 9% 64%, oklch(96% 0.02 85) 50%, transparent 52%),
    radial-gradient(circle at 50% 58%, oklch(45% 0.09 55 / 0.55), transparent 45%),
    linear-gradient(var(--night), var(--night-2));
}
.ritual .letter {
  position: absolute; left: 15%; right: 15%; top: 24%; min-height: 46%;
  padding: var(--s-4); border-radius: 6px; background: var(--paper); color: var(--ink);
  display: grid; place-items: start center; text-align: center; font-size: var(--fs-small); font-weight: 650; line-height: 1.55;
}
.ritual-seal { position: absolute; width: 5rem; height: 5rem; left: calc(50% - 2.5rem); top: calc(58% - 1.5rem); opacity: 0; }
.ritual::after {
  content: ""; position: absolute; width: 5rem; height: 5rem; left: calc(50% - 2.5rem); top: calc(58% - 1.5rem);
  border-radius: 50%; border: 2px solid oklch(85% 0.1 70); opacity: 0;
}
.ritual-bong { position: absolute; right: 6%; bottom: 5%; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; opacity: 0; }
.ritual.is-on .letter { animation: letter-in 600ms var(--ease-out) both; }
.ritual.is-on .ritual-bong { animation: bong-in 700ms 200ms var(--ease-out) both, bob 900ms 1250ms var(--ease-out) both; }
.ritual.is-on .ritual-seal { animation: stamp-drop 700ms 650ms var(--ease-out) both; }
.ritual.is-on::after { animation: ring 900ms 1150ms var(--ease-out) both; }
.sealed-bong { width: 8.5rem; margin: var(--s-6) auto var(--s-4); }

/* ── 움직임 (transform·opacity만, 줄이기 설정이면 멈춤) ── */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes press { from { opacity: 0; transform: scale(1.35) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes letter-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bong-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes stamp-drop {
  0% { opacity: 0; transform: translateY(-170%) scale(1.6) rotate(-14deg); }
  70% { opacity: 1; transform: translateY(0) scale(0.92) rotate(0); }
  85% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes ring { from { opacity: 0.8; transform: scale(0.7); } to { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) {
  .view, .stamp.is-pressed { animation: none; }
  .btn, .choice, .choice input::before, .track > span { transition: none; }
}
.step:focus { outline: none; } /* 다음 질문으로 옮긴 포커스는 링을 그리지 않음(질문 제목을 읽게 하려는 것) */