/* 용산동 1996 — 필기체 없음: 본문 Noto Sans KR, 편지·쪽지·이야기 Noto Serif KR, 제목 Black Han Sans */
:root{
  --ink:#f3eee4; --muted:#a9a295; --line:rgba(255,255,255,.15);
  --amber:#ffc978; --cold:#9cc8ff; --pearl:#7fe3ff; --red:#ff5a4f; --paper:#f5eedb; --paper-ink:#2b2418;
  --body:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --serif:'Noto Serif KR','Batang','AppleMyungjo',serif;
  --display:'Black Han Sans','Noto Sans KR','Malgun Gothic',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#07080c;color:var(--ink);font-family:var(--body);overflow:hidden}
button{font:inherit;color:inherit}
.hidden{display:none!important}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#07080c}
#stage{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#000;container-type:inline-size;user-select:none}
#scene,#cu-inner{position:absolute;inset:0}
.layer{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx-tint{position:absolute;inset:0;pointer-events:none;z-index:5;transition:background .8s;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(0,0,0,.5) 100%)}
body.e1996 #fx-tint{background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(40,20,0,.45) 100%)}

/* 살펴볼 곳 */
.hits .hs{fill:transparent;cursor:pointer;stroke:transparent;stroke-width:3;transition:stroke .2s}
@media (hover:hover){.hits .hs:hover{stroke:rgba(255,240,210,.45);stroke-dasharray:7 9}}
body.show-hs .hits .hs{stroke:rgba(255,240,210,.6);stroke-dasharray:7 9}
#tip{position:absolute;z-index:45;pointer-events:none;transform:translate(-50%,-140%);background:rgba(10,10,14,.88);border:1px solid var(--line);border-radius:.5cqw;padding:.3cqw .8cqw;font-size:1.05cqw;white-space:nowrap}

/* ── HUD ── */
#hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:1cqw;padding:1cqw 1.4cqw;z-index:35;pointer-events:none;
  font-size:1.15cqw;text-shadow:0 1px 6px #000;background:linear-gradient(rgba(0,0,0,.45),transparent)}
#era{font-family:var(--display);font-size:1.9cqw;letter-spacing:.06em;padding:.1cqw .9cqw;border-radius:.5cqw;border:1px solid}
body.e2026 #era{color:var(--cold);border-color:rgba(156,200,255,.5);background:rgba(20,40,70,.45)}
body.e1996 #era{color:var(--amber);border-color:rgba(255,201,120,.55);background:rgba(70,40,10,.45)}
#loc{flex:1;color:rgba(243,238,228,.9)}
#clock{text-align:right;line-height:1.1;font-variant-numeric:tabular-nums}
#clock b{font-size:1.7cqw;font-weight:700;letter-spacing:.04em}
#clock small{display:block;font-size:.8cqw;color:var(--muted)}
#clock.urgent b{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.hud-btn{pointer-events:auto;background:rgba(12,12,16,.7);border:1px solid var(--line);border-radius:999px;padding:.45cqw 1.1cqw;cursor:pointer;font-size:1.1cqw;color:#fff}
.hud-btn:hover{border-color:var(--amber)}
#btn-tape{border-color:rgba(127,227,255,.55)}
#btn-tape.glow{animation:tglow 1.4s infinite}
@keyframes tglow{50%{box-shadow:0 0 1.2cqw rgba(127,227,255,.7)}}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:4.5cqw;height:12cqw;border:none;background:transparent;font-size:5cqw;line-height:1;color:rgba(255,245,225,.45);cursor:pointer;z-index:10}
.nav:hover{color:#fff;text-shadow:0 0 1cqw var(--amber)}
#nav-l{left:.3cqw}#nav-r{right:.3cqw}
#nav-back{position:absolute;left:1.4cqw;bottom:8.2cqw;z-index:31;font-size:1.25cqw;padding:.6cqw 1.3cqw}

/* ── 소지품 ── */
#inv{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;max-width:86cqw;bottom:.9cqw;z-index:30;display:flex;gap:.55cqw;padding:.5cqw .7cqw;flex-wrap:wrap;justify-content:center;
  background:linear-gradient(to top,rgba(14,12,10,.9),rgba(14,12,10,.6));border:1px solid var(--line);border-radius:1cqw;min-height:5.4cqw}
#inv:empty{display:none}
.it{position:relative;width:4.4cqw;height:4.4cqw;border-radius:.6cqw;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.35cqw}
.it svg{width:100%;height:100%}
.it:hover{border-color:rgba(255,255,255,.45)}
.it.sel{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,201,120,.35),0 0 18px rgba(255,190,90,.3)}
.it .tip{position:absolute;bottom:112%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:1cqw;background:rgba(12,10,8,.95);border:1px solid var(--line);padding:.35cqw .7cqw;border-radius:.4cqw;opacity:0;pointer-events:none;transition:opacity .15s}
.it:hover .tip,.it.sel .tip{opacity:1}

/* ── 글: 설명(지문)과 목소리 자막은 서로 다른 상자 ── */
#texts{position:absolute;left:50%;bottom:7.4cqw;transform:translateX(-50%);width:72cqw;z-index:85;display:flex;flex-direction:column;align-items:center;gap:.6cqw;pointer-events:none}
#msg{pointer-events:none;max-width:66cqw;padding:.85cqw 1.5cqw;background:rgba(16,15,13,.92);border:1px solid rgba(255,220,170,.28);border-radius:.8cqw;font-size:1.3cqw;line-height:1.65;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.6);animation:rise .25s ease}
#msg em{font-style:normal;color:var(--amber)}
#msg b{color:#fff}
#sub{pointer-events:none;display:flex;align-items:baseline;gap:.9cqw;max-width:72cqw;padding:.7cqw 1.2cqw .75cqw 1.4cqw;background:rgba(0,0,0,.82);border-radius:.5cqw;font-size:1.55cqw;line-height:1.5;color:#fff;animation:rise .2s ease}
#sub .who{flex:none;font-size:.72em;font-weight:700;letter-spacing:.04em;padding:.12em .6em;border-radius:99px;background:rgba(255,255,255,.12);color:var(--amber)}
#sub.w-radio .who{color:#b8f0c8}#sub.w-young .who{color:#ffb4c8}#sub.w-halbae .who{color:#c9d8ff}#sub.w-ajimae .who,#sub.w-banjang .who{color:#ffd0a0}
#sub .skip{pointer-events:auto;flex:none;align-self:center;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:.8em;padding:0 0 0 .3em}
#sub .skip:hover{color:#fff}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
#cu:not(.hidden) ~ #texts #msg{font-size:1.15cqw;padding:.7cqw 1.3cqw}

/* ── 클로즈업 ── */
#cu{position:absolute;inset:0;background:rgba(3,3,6,.74);z-index:20;display:flex;align-items:flex-start;justify-content:center;padding-top:4.4cqw;animation:fade .2s}
#cu-inner{position:relative;inset:auto;width:74%;aspect-ratio:16/9;border-radius:.8cqw;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.8);background:#000}
#cu-close{position:absolute;top:4.9cqw;right:14cqw;width:3cqw;height:3cqw;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.65);cursor:pointer;font-size:1.2cqw;z-index:25}
@keyframes fade{from{opacity:0}}
.ctlwrap{position:absolute;inset:0;pointer-events:none}
.ctlwrap .ctl{pointer-events:auto}
.ctl{position:absolute;font-size:1.05cqw;color:#fff}
.btn{background:rgba(18,16,14,.9);border:1px solid rgba(255,230,190,.35);border-radius:.5cqw;padding:.45cqw .9cqw;cursor:pointer;font-size:1.1cqw;color:#fff}
.btn:hover{border-color:var(--amber);box-shadow:0 0 .8cqw rgba(255,190,90,.3)}
.btn:disabled{opacity:.35;cursor:default;box-shadow:none}
.btn.hot{border-color:var(--amber);color:var(--amber)}
.btn.cold{border-color:rgba(127,227,255,.6);color:var(--pearl)}
.btn.danger{border-color:#ff7b70;color:#ffb8b0}
.panel{background:rgba(12,11,10,.84);backdrop-filter:blur(3px);border:1px solid rgba(255,230,190,.2);border-radius:.8cqw;padding:.9cqw 1.1cqw}
.ptxt{font-size:1.1cqw;line-height:1.6;color:var(--ink)}
.ptitle{font-weight:700;font-size:1.15cqw;color:var(--amber);margin-bottom:.4cqw}

/* 쪽지·편지·안내문(명조, 종이) */
.note{background:var(--paper);color:var(--paper-ink);font-family:var(--serif);font-weight:500;font-size:1.5cqw;line-height:1.7;padding:1.2cqw 1.6cqw;box-shadow:0 10px 30px rgba(0,0,0,.55);border-radius:.25cqw;
  background-image:linear-gradient(rgba(120,90,40,.06) 1px,transparent 1px);background-size:100% 2.55cqw}
.note .sig{text-align:right;margin-top:.4cqw;font-size:.85em;color:#6a5a40}
.note.notice{background:#fbfbf7;font-family:var(--body);font-size:1.25cqw;line-height:1.6;border-top:.5cqw solid #c9302c;background-image:none}
.note.notice h4{margin:0 0 .5cqw;font-size:1.5cqw;color:#b02520;letter-spacing:.2em;text-align:center}

/* 카세트 라디오 */
.deck{display:flex;flex-direction:column;gap:.6cqw}
.deck .row{display:flex;gap:.5cqw;flex-wrap:wrap}
.deck .btn{font-size:1.15cqw;padding:.55cqw 1cqw}
.deck .state{font-size:1cqw;color:var(--muted)}
.tlabel{fill:#f3ead2;stroke:#b9a77c;stroke-width:1}

/* 번호 자물쇠 */
.dials{display:flex;gap:.5cqw;align-items:center}
.dial{display:flex;flex-direction:column;align-items:center;gap:.2cqw}
.dial .n{width:3.2cqw;height:3.6cqw;display:flex;align-items:center;justify-content:center;font-size:2.2cqw;font-weight:700;font-variant-numeric:tabular-nums;
  background:linear-gradient(#3a2f1c,#1d170e 45%,#3a2f1c);color:#ffe7b0;border:1px solid #8a7040;border-radius:.4cqw;text-shadow:0 1px 2px #000}
.dial .btn{padding:.1cqw .9cqw;font-size:.9cqw;line-height:1.2}

/* 사진 */
.photo-view{position:absolute;inset:3% 4%;display:flex;gap:2%;align-items:center;justify-content:center;background:rgba(5,5,6,.92);border-radius:.6cqw;padding:2%}
.photo-view .pic{width:56%;aspect-ratio:4/3;background-size:cover;background-position:center;box-shadow:0 0 0 .6cqw #efe6d0,0 12px 40px rgba(0,0,0,.7);border-radius:.1cqw;position:relative;flex:none}
.photo-view .cap{flex:1;font-family:var(--serif);font-size:1.45cqw;line-height:1.75;color:#f2ead8}
.photo-view .cap .yr{font-family:var(--display);font-size:2.6cqw;color:var(--amber);display:block;margin-bottom:.4cqw}
.sign223{position:absolute;display:flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);font-weight:700;color:#fff;white-space:nowrap}
.sign223 i{font-style:normal;background:#00a651;border-radius:99px;padding:0 .45em;font-size:.85em}

/* 땅 파기 도면 */
.mapsvg text{font-family:var(--body)}
.compass{display:grid;grid-template-columns:repeat(3,4.6cqw);grid-template-rows:repeat(3,3.2cqw);gap:.35cqw}
.compass .btn{padding:0;font-size:1.05cqw}
.compass .btn.on{border-color:var(--amber);color:#1a1206;background:var(--amber)}
.compass .c{display:flex;align-items:center;justify-content:center;font-size:.9cqw;color:var(--muted)}
.steps{display:flex;align-items:center;gap:.6cqw;font-size:1.3cqw}
.steps b{font-size:2cqw;min-width:2.4cqw;text-align:center;font-variant-numeric:tabular-nums}

/* ── 오버레이(타이틀·메뉴·힌트·엔딩) ── */
#overlay{position:absolute;inset:0;z-index:75;background:rgba(6,6,9,.94);display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:1.5cqw 0;animation:fade .35s}
.ov{max-width:70cqw;text-align:center;position:relative;z-index:1}
.ov h1{font-family:var(--display);font-weight:400;font-size:6.4cqw;margin:0;color:#fff;letter-spacing:.05em;text-shadow:0 0 1.8cqw rgba(127,227,255,.45),0 .3cqw 1cqw rgba(0,0,0,.8)}
.ov h1 small{display:block;font-family:var(--serif);font-weight:700;font-size:.3em;letter-spacing:.4em;color:var(--amber);margin-top:.5em;text-shadow:0 1px 8px #000}
.ov h2{font-family:var(--display);font-weight:400;font-size:3.1cqw;margin:0 0 .6cqw;color:#fff}
.ov p{font-size:1.3cqw;line-height:1.75;color:#e9e2d4;margin:.4cqw 0}
.ov p+p{margin-top:.8cqw}
.ov .small{font-size:1.02cqw;color:var(--muted);line-height:1.7}
.ov .row{display:flex;gap:1cqw;justify-content:center;margin-top:1.8cqw;flex-wrap:wrap}
.ov .btn{font-size:1.3cqw;padding:.8cqw 1.8cqw}
.ov-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.6;animation:fade 2s ease}
.ov-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,9,.15),rgba(6,6,9,.88))}
.box{text-align:left;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:.8cqw;padding:1.1cqw 1.5cqw;margin:1cqw 0}
.stat{font-size:1.15cqw;color:#d8d0c0;line-height:1.9;margin-top:1cqw}
.stat b{color:var(--amber);font-weight:700}
.credit{font-size:.95cqw;color:var(--muted);line-height:1.7;margin-top:1.4cqw}

/* ── 연출 ── */
#cine{position:absolute;inset:0;z-index:70;background:#000;overflow:hidden}
.panel-img{position:absolute;inset:0;background-size:cover;background-position:center;animation:kb 12s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1cqw;padding:0 12%;animation:fade 1.2s}
.card .big{font-family:var(--display);font-size:3.6cqw;letter-spacing:.04em;color:#fff}
.card .mid{font-family:var(--serif);font-weight:700;font-size:2cqw;color:var(--amber)}
.card .txt{font-family:var(--serif);font-size:1.6cqw;line-height:1.9;color:#eee6d6}
.card.over{background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.2) 60%,transparent);justify-content:flex-end;padding-bottom:14%}
.cine-skip{position:absolute;right:1.4cqw;top:1.2cqw;z-index:3}
.cine-hint{position:absolute;right:2%;bottom:1.2%;font-size:.9cqw;color:rgba(255,255,255,.4);z-index:3}
.shake{animation:shake .5s linear}
.shake-long{animation:shake .5s linear 4}
@keyframes shake{10%,90%{transform:translate(-1%,.5%)}20%,80%{transform:translate(1.4%,-1%)}30%,50%,70%{transform:translate(-2%,1.2%)}40%,60%{transform:translate(2%,-1.2%)}}

/* 시간 넘기기(테이프 되감기) */
body.tt #scene{filter:blur(3px) saturate(.2) contrast(1.3);transition:filter .6s}
.tt-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),rgba(0,0,0,.45);animation:fade .3s}
.tt-year{font-family:var(--display);font-size:13cqw;line-height:1;letter-spacing:.06em;color:#fff;text-shadow:0 0 2cqw rgba(127,227,255,.8),.4cqw 0 rgba(255,60,90,.5),-.4cqw 0 rgba(60,200,255,.5);font-variant-numeric:tabular-nums}
.tt-arrow{font-size:3cqw;color:var(--pearl);letter-spacing:.3em;animation:pulse .5s infinite}
.tt-lines{position:absolute;inset:0;background:linear-gradient(transparent 0,rgba(255,255,255,.18) 50%,transparent 100%);background-size:100% 18%;animation:roll .35s linear infinite;mix-blend-mode:screen}
@keyframes roll{from{background-position:0 0}to{background-position:0 100%}}
.flash{position:absolute;inset:0;background:#fff;animation:flash .7s ease-out forwards;pointer-events:none;z-index:5}
@keyframes flash{from{opacity:1}to{opacity:0}}

/* 실패: 철거 */
.stamp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-10deg);font-family:var(--display);font-size:11cqw;color:#ff3b30;border:.9cqw solid #ff3b30;border-radius:1.4cqw;padding:.3cqw 3cqw;line-height:1.1;
  text-shadow:0 0 2cqw rgba(255,59,48,.6);animation:stamp .35s cubic-bezier(.2,1.6,.4,1) both;z-index:4;background:rgba(40,0,0,.35)}
@keyframes stamp{from{transform:translate(-50%,-50%) rotate(-10deg) scale(3);opacity:0}to{opacity:1}}
.dust{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 60%,rgba(200,180,150,.55),rgba(120,100,80,.35) 40%,transparent 75%);animation:dust 4s ease-out forwards}
@keyframes dust{from{opacity:0;transform:scale(.6)}20%{opacity:1}to{opacity:.35;transform:scale(1.5)}}
.debris{position:absolute;width:1.2cqw;height:.8cqw;background:#8a7a66;border-radius:.2cqw;z-index:3;animation:fall 1.6s cubic-bezier(.3,.1,.7,1) forwards}
@keyframes fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),60cqw) rotate(var(--r))}}
.red-flash{position:absolute;inset:0;background:rgba(255,40,20,.35);animation:flash .9s ease-out forwards;z-index:2}

/* 편지 */
.letter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56cqw;max-height:50cqw;background:var(--paper);color:var(--paper-ink);font-family:var(--serif);font-weight:500;
  padding:2.4cqw 3cqw;box-shadow:0 20px 60px rgba(0,0,0,.7);border-radius:.3cqw;animation:fade 1.2s;
  background-image:radial-gradient(ellipse at 20% 10%,rgba(150,110,40,.12),transparent 50%),radial-gradient(ellipse at 90% 90%,rgba(120,80,30,.15),transparent 45%)}
.letter p{margin:0 0 .8cqw;font-size:1.45cqw;line-height:1.75;opacity:.22;transition:opacity .5s,color .5s}
.letter p.on{opacity:1;color:#140e06;background:linear-gradient(transparent 58%,rgba(255,196,90,.38) 58%)}
.letter p.done{opacity:.62}
.letter .to{font-weight:700}
.letter .from{text-align:right;margin-top:1cqw;font-size:1.25cqw;color:#6a5a40;opacity:.8}
.pearl{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bff6ff 18%,#39c6ff 50%,#0b5e9a 85%);box-shadow:0 0 3cqw rgba(127,227,255,.9),0 0 8cqw rgba(127,227,255,.45);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 4.5cqw rgba(127,227,255,1),0 0 11cqw rgba(127,227,255,.6)}}

/* 전화(1996) */
.phonecall{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1cqw;animation:fade .6s}
.phonecall .ic{font-size:6cqw;filter:drop-shadow(0 0 1.5cqw rgba(255,180,120,.6))}
.phonecall .ic.ring{animation:ring .25s linear infinite}
@keyframes ring{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.phonecall .lb{font-size:1.3cqw;color:#ffe2c0}

/* 에필로그: 여의주 놓을 곳 */
.dirs{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;gap:1cqw;flex-wrap:wrap;justify-content:center;z-index:3}
.dirs .btn{font-size:1.3cqw;padding:.8cqw 1.4cqw}