/* 信, 사람의 말 (2026-11-08 실험실 · 2026-11-09 정식판: 시작 화면·끝 판 없이 흐르고 끝에 홈 길 하나)
   밤 청람 바탕 + 금빛 가루. 머리·두 입구 규칙은 index.html 의 pz-dual-css 가 정본(헌법 §5). */
:root { --bg: #050914; --fg: #eef2fc; --mute: #98a3bf; --line: rgba(255, 213, 122, .16); --gold: #ffd57a; --gold2: #ffb94a; --blue: #9ccaff;
  --body: "IBM Plex Sans KR", system-ui, sans-serif; --title: "Black Han Sans", var(--body); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--body); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }

/* 무대 */
#stage { position: fixed; inset: 0; overflow: hidden; }   /* 2026-11-09 머리·바닥 걷음: 화면 전체가 작품 */
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.title { position: absolute; left: 18px; top: calc(16px + env(safe-area-inset-top, 0px)); pointer-events: none; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.title h1 { margin: 0; font: 400 28px/1.1 var(--title); letter-spacing: .02em; background: linear-gradient(180deg, #fff6dc, var(--gold) 55%, var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title p { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); animation: hintOut 1.2s 9s forwards; }
@keyframes hintOut { to { opacity: 0; } }

/* 자막(2026-11-09 조변 «자막처럼 깔끔하고 세련되게»): 한자(명조 900 · 금) ─ 양옆 금실 · 읽기(자간 넓게) · 풀이(명조 500)
   글자마다 --d 만큼 늦게, 흐림에서 또렷하게 떠오른다. 장면이 바뀌면 함께 빠르게 걷힌다. */
.cap { position: absolute; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); text-align: center; pointer-events: none; z-index: 2; --serif: "Noto Serif KR", "Noto Serif CJK KR", "Batang", serif; }
.cap .ch { display: inline-block; opacity: 0; filter: blur(7px); transform: translateY(7px); transition: opacity .3s, filter .3s, transform .3s; }
.cap.on .ch { opacity: 1; filter: blur(0); transform: none; transition: opacity .8s var(--d), filter 1.1s var(--d), transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--d); }
.cap-han { position: relative; display: inline-flex; align-items: center; gap: .18em; font: 900 34px/1.1 var(--serif); color: #ffe7a8; text-shadow: 0 0 14px rgba(255, 196, 90, .55), 0 0 34px rgba(255, 170, 60, .25); }
.cap-han .plus { font: 500 .6em/1 var(--serif); color: rgba(255, 231, 168, .55); text-shadow: none; }
.cap-han::before, .cap-han::after { content: ""; position: absolute; top: 55%; width: 44px; height: 1px; background: linear-gradient(90deg, rgba(255, 213, 122, 0), rgba(255, 213, 122, .7)); transform: scaleX(0); transition: transform .3s; }
.cap-han::before { right: calc(100% + 14px); transform-origin: right; }
.cap-han::after { left: calc(100% + 14px); transform-origin: left; background: linear-gradient(90deg, rgba(255, 213, 122, .7), rgba(255, 213, 122, 0)); }
.cap.on .cap-han::before, .cap.on .cap-han::after { transform: scaleX(1); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .25s; }
.cap-read { margin-top: 7px; height: 15px; font: 500 11.5px/15px var(--body); letter-spacing: .42em; padding-left: .42em; color: rgba(255, 213, 122, .72); }
.cap.noread .cap-read { display: none; }
.cap-line { margin-top: 9px; font: 500 16px/1.5 var(--serif); letter-spacing: .06em; color: #f3eee2; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.cap-line .sp { width: .28em; }
.cap.sin .cap-han { font-size: 40px; }
.cap.sin .cap-line { font-size: 18px; color: #fff3d6; }

/* 끝: «글자를 터치해 보세요»(처음 한 번) + 다시 보기 · 홈으로 한 줄 (2026-11-09 조변) */
.end { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); opacity: 0; pointer-events: none; transition: opacity 1s 2.2s, transform 1s 2.2s; }
.end.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.touch { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--mute); opacity: 0; transition: opacity .6s; }
.end.hint .touch { opacity: 1; animation: touchPulse 2.4s 3.4s ease-in-out infinite; }
@keyframes touchPulse { 50% { opacity: .45; } }
.end-row { display: flex; gap: 8px; }
.end-row > * { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; font: 600 14px/1.2 var(--body); letter-spacing: .02em; white-space: nowrap; text-decoration: none; cursor: pointer; }
#again { color: var(--fg); background: rgba(8, 13, 30, .6); border: 1px solid rgba(255, 255, 255, .2); }
.home { color: var(--gold); background: rgba(8, 13, 30, .6); border: 1px solid rgba(255, 213, 122, .35); }
#again:hover, .home:hover { background: rgba(255, 213, 122, .12); }
@media (max-width: 360px) { .end-row > * { padding: 9px 12px; font-size: 13px; } }

/* WebGL2 가 없을 때 */
.nogl { display: none; position: absolute; inset: 0; z-index: 7; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
.nogl b { font: 400 96px/1 var(--title); color: var(--gold); }
.nogl span { color: var(--mute); line-height: 1.7; }
.nogl .home { padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.no-gl .nogl { display: flex; }
.no-gl #cv, .no-gl .end, .no-gl .title { display: none; }

@media (max-width: 520px) {
  .title h1 { font-size: 22px; } .title p { font-size: 11.5px; }
  .cap-han { font-size: 30px; } .cap.sin .cap-han { font-size: 34px; } .cap-line { font-size: 15px; } .cap.sin .cap-line { font-size: 16px; } .cap-han::before, .cap-han::after { width: 30px; }
}
@media (prefers-reduced-motion: reduce) { .end { transition-duration: .4s; } .cap .ch { filter: none !important; transform: none !important; } .end.hint .touch { animation: none; } }

/* 낙관: 信 이 완성되면 붉은 인장이 오른쪽 아래에 쾅 */
.seal { position: absolute; z-index: 2; padding: 6px; border-radius: 9px; background: radial-gradient(circle at 30% 30%, #e14a3a, #b2261f 70%); box-shadow: inset 0 0 0 2px rgba(255,235,220,.25), 0 0 24px rgba(220,60,40,.35); opacity: 0; transform: scale(2.6) rotate(-16deg); pointer-events: none; }
.seal svg { display: block; width: 100%; height: 100%; }
.seal.on { animation: sealIn .5s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes sealIn { 0% { opacity: 0; transform: scale(2.6) rotate(-16deg); } 55% { opacity: 1; transform: scale(.9) rotate(-5deg); } 100% { opacity: .94; transform: scale(1) rotate(-6deg); } }
.jolt { animation: jolt .32s; }
@keyframes jolt { 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, 1px); } }
@media (prefers-reduced-motion: reduce) { .jolt { animation: none; } .seal.on { animation-duration: .2s; } }
.home span { margin-left: 6px; }