/* 「1974, 총성 뒤에」 장면 플레이어 — 화면 부품은 act1(제작자 확정본)에서 옮겨 다듬음 */
/* 글꼴: 로컬 부분 집합(OFL) — CDN 없음. 아트 바이블 §7: 지면·활자 = 나눔명조, 할아버지 손글씨·사인펜 = East Sea Dokdo, 화면 = 시스템 고딕 */
@font-face{font-family:"CS Serif";src:url(../fonts/CSSerif-Regular.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"CS Serif";src:url(../fonts/CSSerif-Bold.woff2) format("woff2");font-weight:700 900;font-display:block}
@font-face{font-family:"East Sea Dokdo";src:url(../fonts/EastSeaDokdo-Regular.woff2) format("woff2");font-weight:400;font-display:block}
:root{
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --serif:"CS Serif","Nanum Myeongjo","AppleMyungjo","Noto Serif KR",serif;
  --hand:"East Sea Dokdo","Nanum Brush Script",cursive;
  --ink74:#1f1b17; --pencil:#3a3330; --redpencil:#b3261e; --pen:#d6322a;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --n26box:rgba(18,15,12,.86); --n26text:#f6efe3; --n26name:#f2c27b; --lamp:#e9b872;
  --ig1:#6a34d8; --ig2:#2f5fd0; --yt:#0f0f0f; --ytsub:#606060; --ytred:#e1251b;
  --guide-warm:255,231,196; --guide-lt:#C96A05; --guide-lt-period:2.4s; --guide-line:1.5px; --guide-period:2.8s; --guide-a0:.22; --guide-a1:.85;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--sans);color:#fff;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#app{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;height:var(--app-h,100dvh);overflow:hidden;background:#000;touch-action:manipulation;overscroll-behavior:none;container-type:size}
@media (min-width:520px){
  body{background:#0b0a09}
  #app{inset:auto;left:50%;top:50%;width:min(430px,calc(92vh * 390 / 844));height:min(calc(430px * 844 / 390),92vh);transform:translate(-50%,-50%);border-radius:28px;box-shadow:0 0 0 8px #050505,0 0 0 9px #3b352e}
}
.layer{position:absolute;inset:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ===== 무대: 그림 1080×1920(9:16)을 화면에 cover. 그림 위 글은 무대 %·cqw로 붙어 그림과 함께 움직인다 ===== */
#scene{overflow:hidden;opacity:0;background:#000}
#stage{position:absolute;transform-origin:0 0;container-type:inline-size}
#stage .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bg2{opacity:0}
#sover{position:absolute;inset:0}
#sover>*{position:absolute}
#frame{z-index:5;background:#000;opacity:0;pointer-events:none}
#frame>.cfh{position:absolute}
#vignette{background:radial-gradient(ellipse at 50% 60%,transparent 50%,rgba(0,0,0,.45) 100%);pointer-events:none;opacity:.8}

/* 그림 안 글씨(무대 좌표) */
.lbl{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--hand);color:#2e2925;line-height:.95;white-space:nowrap}
.pencil{font-family:var(--hand);color:#2e2925;line-height:1;white-space:nowrap}
.ring{border-radius:50%;box-shadow:0 0 0 1.5px rgba(var(--guide-warm),.7);animation:ring 2.8s ease-in-out infinite;pointer-events:none} /* 슬롭 잡기: 금테+파란 글로우 → 가는 선 하나 */
@keyframes ring{50%{box-shadow:0 0 0 1.5px rgba(var(--guide-warm),.2)}}

/* ===== 교정쇄 부품(하나의 정의 — 장면·사진·썸네일·게시물 공용) =====
   바탕 = art/conti_a/4/N4-09_proof_ink(먹칠된 지면), 글자는 코드가 얹음. 좌표는 종이 폭·높이에 대한 % */
.proof{position:relative;width:100%;aspect-ratio:900/1100;container-type:inline-size;background:url(../img/proof_ink.webp) center/100% 100% no-repeat}
.proof>*{position:absolute;display:block;font-style:normal}
.proof .patch{background:url(../img/proof_ink.webp) no-repeat;background-size:var(--bs);background-position:var(--bp)}
.proof .edge{background:url(../img/proof_ink.webp) no-repeat;transform:scaleX(-1)}
/* 1974 활자: 나눔명조, 잉크 #1f1b17, 금속 활자 번짐 */
.t74{font-family:var(--serif);color:var(--ink74);writing-mode:vertical-rl;text-orientation:upright;line-height:1;text-shadow:.04cqw .04cqw 0 rgba(31,27,23,.35)}
.proof .hl{font-weight:800;font-size:3.0cqw;letter-spacing:.12em}
.proof .rem{font-weight:400;font-size:2.3cqw;letter-spacing:.06em;opacity:.92}
/* 빨간 사인펜 */
.pen{font-family:var(--hand);color:var(--pen);line-height:1;white-space:nowrap;text-shadow:.1cqw .1cqw 0 rgba(120,10,0,.4)}
.proof .pen{font-size:13.5cqw;letter-spacing:.02em}
/* 빨간 고무도장(다음 구간: 여권 입국 도장 등) */
.stamp{display:inline-block;font-family:var(--serif);font-weight:800;color:#c4302b;border:.5em solid currentColor;border-width:.14em;outline:.05em solid currentColor;outline-offset:.08em;padding:.1em .35em;border-radius:.12em;letter-spacing:.18em;transform:rotate(-6deg);opacity:.86;mix-blend-mode:multiply;-webkit-mask:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.55) 75%,#000 90%),repeating-linear-gradient(115deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px);-webkit-mask-composite:source-in;mask-composite:intersect}
/* 잘라 보기 창: 종이의 (x0,y0)에서 폭 w 만큼 */
.pcrop{position:relative;overflow:hidden;container-type:inline-size;background:#15110d}
.pcrop>.pp{position:absolute}
/* 렉카 자막(썸네일·고정 글·예고 영상) — 굵은 고딕 + 검은 외곽선 */
.rk{position:absolute;font-family:var(--sans);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:#ffe14a;-webkit-text-stroke:.16em #000;paint-order:stroke fill;white-space:nowrap}
.rk.w{color:#fff}
.rkring{position:absolute;border:.9cqw solid #e1251b;border-radius:50%;transform:rotate(-4deg);pointer-events:none;box-shadow:0 0 0 .2cqw rgba(0,0,0,.25)}

/* ===== 대사 ===== */
#dlg{pointer-events:none;position:absolute;z-index:35;left:12px;right:12px;bottom:calc(var(--safe-b) + 14px);background:var(--n26box);border-radius:14px;padding:15px 18px 17px;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0}
#dlg .who{font-size:13px;font-weight:700;color:var(--n26name);margin-bottom:6px}
#dlg p{margin:0;font-size:17px;line-height:1.55;color:var(--n26text);word-break:keep-all}
.wd{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lamp);margin-left:6px;vertical-align:middle;animation:breath 1.4s ease-in-out infinite}
@keyframes breath{50%{opacity:.3}}

/* ===== 카드(안내·때와 곳·검은 카드) ===== */
#card{z-index:60;background:#000;opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:0 24px}
#card .j{font-size:24px;font-weight:600;letter-spacing:.04em;color:#f1e8da}
#card .tw{font-size:17px;font-weight:600;color:#f1e8da;white-space:nowrap;margin-top:14px;opacity:0}
#card .tw.first{margin-top:0}
#card .yr{font-family:var(--serif);font-weight:800;font-size:clamp(64px,24vw,112px);letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1;color:#f1e8da}
#card.old .yr{color:#d9caa6}
#card .yr + .tp{margin-top:18px;font-family:var(--serif);font-size:17px;color:#d9caa6}
#card .tp{font-size:15px;color:#bdb3a3;white-space:nowrap;margin-top:8px;opacity:0}
#card .s{font-size:16px;color:#bdb3a3;line-height:1.7;word-break:keep-all}
#card.on{pointer-events:auto}
#card .btn{margin-top:18px;height:48px;min-width:170px;padding:0 22px;border:1px solid #6e655a;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:#f4ecdd}
#card .btn.sub{border-color:#3a342d;color:#b9ad9b}
#card .title{font-family:var(--serif);font-weight:800;font-size:30px;letter-spacing:.06em;color:#f1e8da}
#card .title small{display:block;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.02em;color:#8f857a;margin-top:12px}
#card .notice{max-width:340px;text-align:center}
#card .notice p{margin:0 0 16px;font-size:15px;line-height:1.75;color:#d9cfc0;word-break:keep-all;opacity:0}
#card .notice p:last-child{margin-bottom:0}
#card .tapdot{position:absolute;left:50%;bottom:calc(var(--safe-b) + 30px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--lamp);opacity:0}
#card .tapdot.on{animation:breath 1.4s ease-in-out infinite;opacity:1}
#card .note{margin-top:22px;font-size:13px;color:#8f857a;line-height:1.6}
#white{z-index:55;background:#fff;opacity:0;pointer-events:none}
#black{z-index:58;background:#000;opacity:0;pointer-events:none}

/* ===== 소품 보기 층(무대 위, 화면 좌표) ===== */
#view{z-index:15;opacity:0;pointer-events:none;overflow:hidden}
#view .itm{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(84%,380px)}

/* ===== 폰 화면(실제 기기 화면 전체 — 가짜 상태 표시줄 없음) ===== */
#phone{z-index:20;background:#000;opacity:0;pointer-events:none}
#phone.on{pointer-events:auto}
.scr{position:absolute;inset:0;overflow:hidden}
.top0{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 8px);bottom:0}
.lock{background:radial-gradient(120% 70% at 50% 0%,#2a3a52 0%,#141b26 55%,#0b0e13 100%)}
.lock .clk{text-align:center;padding-top:8px}
.lock .clk .d{font-size:17px;font-weight:600;color:rgba(255,255,255,.85)}
.lock .clk .t{font-size:76px;font-weight:200;line-height:1.05;margin-top:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ncount{position:absolute;z-index:7;right:14px;top:calc(var(--safe-t) + 12px);font-size:12.5px;font-weight:700;background:rgba(255,255,255,.18);border-radius:10px;padding:3px 8px;font-variant-numeric:tabular-nums}
.bns{position:absolute;left:12px;right:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.lock .bns{top:calc(var(--safe-t) + 132px);bottom:calc(var(--safe-b) + 16px)}
.lock .bns.flood{-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
.bn{flex:none;display:flex;gap:10px;align-items:flex-start;background:rgba(240,240,242,.88);color:#111;border-radius:18px;padding:11px 12px;box-shadow:0 2px 10px rgba(0,0,0,.18);min-width:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bn .ai{flex:none;width:30px;height:30px;border-radius:8px}
.ai.yt{background:var(--ytred);position:relative}.ai.yt::after{content:"";position:absolute;left:11px;top:9px;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ai.ig{background:linear-gradient(135deg,#f6a13a,#e1306c 55%,#7a3cf0)}
.ai.sms{background:linear-gradient(160deg,#5fd36b,#2fae47)}
.bn .tx{flex:1;min-width:0}
.bn .r1{display:flex;justify-content:space-between;font-size:13px;color:#555}
.bn .r2{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn .r3{font-size:15.5px;line-height:1.35;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bn .th{position:relative;flex:none;width:44px;height:44px;border-radius:8px;overflow:hidden;align-self:center}
.bn .th .pcrop{position:absolute;inset:0}
.wstack{position:absolute;left:12px;right:12px;top:calc(var(--safe-t) + 54px);display:flex;flex-direction:column;gap:8px}
.wstack .bn{box-shadow:0 6px 20px rgba(0,0,0,.22)}

/* 진행 유도(행동 칸 전용) */
.guide{animation:gline var(--guide-period) ease-in-out infinite}
@keyframes gline{0%,100%{box-shadow:0 0 0 var(--guide-line) rgba(var(--guide-warm),var(--guide-a0))}50%{box-shadow:0 0 0 var(--guide-line) rgba(var(--guide-warm),var(--guide-a1))}}
.guide.bn{animation:gline var(--guide-period) ease-in-out infinite,gfill var(--guide-period) ease-in-out infinite}
@keyframes gfill{0%,100%{background-color:rgba(240,240,242,.88)}50%{background-color:rgba(255,234,204,.97)}}
.guide-pulse{animation-duration:.9s!important}
.guide-lt{position:relative;box-shadow:0 0 0 2px var(--guide-lt)!important}
.guide-lt::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--guide-lt);pointer-events:none;animation:ripple var(--guide-lt-period) ease-out infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.15);opacity:0}}
.guide-lt.guide-pulse::after{animation:ripple2 .9s ease-out 2}
@keyframes ripple2{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}
.nudge{animation:nudge .6s ease-in-out}
@keyframes nudge{25%{transform:translateY(-3px)}55%{transform:translateY(1.5px)}80%{transform:translateY(-1px)}}

/* 유튜브(로고 복제 없음, 색·배치만) */
.ytv{background:#fff;color:var(--yt)}
.apb{height:48px;display:flex;align-items:center;gap:10px;padding:0 14px 0 94px;border-bottom:1px solid #eee}
.apb .nm{font-weight:700;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.apb .sp{flex:1}
.lic{width:19px;height:19px;border:2px solid #111;border-radius:50%;position:relative;flex:none}
.lic::after{content:"";position:absolute;width:8px;height:2px;background:#111;right:-6px;bottom:-3px;transform:rotate(45deg)}
.ytb{position:absolute;left:0;right:0;top:48px;bottom:calc(var(--safe-b) + 8px);padding:12px 16px;overflow:hidden}
.chrow{display:flex;align-items:center;gap:10px}
.av{flex:none;border-radius:50%;background-size:cover;background-position:center;display:grid;place-items:center;font-weight:700;color:#fff}
.av.host{background-image:url(../img/av_host.webp)}
.av.min{background-image:url(../img/av_minseok.webp)}
.chrow .av{width:40px;height:40px}
.chrow .cn{flex:1;min-width:0}.chrow .cn b{display:block;font-size:15px}.chrow .cn span{font-size:13px;color:var(--ytsub);white-space:nowrap}
.pill{flex:none;height:34px;border-radius:17px;background:#f2f2f2;font-size:14px;font-weight:600;display:flex;align-items:center;padding:0 14px}
.pinned{font-size:13px;color:var(--ytsub);margin:12px 0 4px}
.post p{margin:0;font-size:16px;line-height:1.45;word-break:keep-all}
.post p.ttl{font-weight:700}
.ytimg{position:relative;margin-top:10px;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;container-type:inline-size;background:#111}
.ytimg .pcrop{position:absolute;inset:0}
.cnts{display:flex;gap:16px;font-size:13px;color:var(--ytsub);margin-top:10px}
/* 예고 영상(16:9) */
.vid{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;container-type:inline-size;border-radius:12px}
.vid>img.f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .board{position:absolute;overflow:hidden;container-type:inline-size}
.vid .board .pcrop{position:absolute;inset:0}
.vid .cc{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:max-content;max-width:90%;padding:.6cqw 1.8cqw;background:rgba(0,0,0,.78);color:#fff;font-size:4.1cqw;line-height:1.4;text-align:center;word-break:keep-all;border-radius:.6cqw}
.vid .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--ytred)}
.vid .tm{position:absolute;right:2cqw;top:2cqw;font-size:3cqw;background:rgba(0,0,0,.6);padding:.3cqw 1.2cqw;border-radius:.6cqw;font-variant-numeric:tabular-nums}
.vmeta{margin-top:10px;font-size:15px;font-weight:700;line-height:1.35;word-break:keep-all}
.vmeta span{display:block;font-size:13px;font-weight:400;color:var(--ytsub);margin-top:2px}
/* 댓글 */
.mini{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ytsub);padding-bottom:10px;border-bottom:1px solid #eee;white-space:nowrap;overflow:hidden}
.mini .av{width:24px;height:24px}
.cmh{font-size:15px;font-weight:700;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.cms{display:flex;flex-direction:column}
/* 댓글이 머리 줄(앱 바·고정 글 줄·'댓글 n') 위로 넘어가지 않게 가둠 */
.ytb{display:flex;flex-direction:column}
.cmwrap{position:relative;flex:1;min-height:0;overflow:hidden}
.cm{display:flex;gap:10px;padding:8px 0}
.cm .av{width:32px;height:32px;font-size:12px}
.cm .ct{min-width:0}.cm .ct span{display:block;font-size:13px;color:var(--ytsub)}.cm .ct p{margin:1px 0 0;font-size:16px;line-height:1.4;word-break:keep-all}
/* 인스타그램(로고 복제 없음) */
.igv{background:#fff;color:#000}
.igh{height:56px;display:flex;align-items:center;gap:10px;padding:0 12px 0 94px;border-bottom:1px solid #efefef}
.igh .av{width:34px;height:34px}
.igh b{display:block;font-size:15px}.igh span{font-size:12.5px;color:#737373}
.msgs{position:absolute;left:0;right:0;top:56px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.mtop{align-self:center;text-align:center;margin:10px 0 14px}
.mtop .av{width:72px;height:72px;margin:0 auto}
.mtop b{display:block;font-size:16px;margin-top:8px}.mtop span{font-size:13px;color:#737373}
.tdv{align-self:center;font-size:12.5px;color:#737373;margin:4px 0}
.mb{max-width:76%;padding:9px 13px;border-radius:18px;font-size:16px;line-height:1.42;word-break:keep-all}
.mb.them{align-self:flex-start;background:#efefef}
.mb.me{align-self:flex-end;background:linear-gradient(135deg,var(--ig1),var(--ig2));color:#fff}
.typing{align-self:flex-start;background:#efefef;border-radius:18px;padding:12px 14px;display:flex;gap:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:#9a9a9a;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25}}
.inp{position:absolute;left:10px;right:10px;height:46px;border:1px solid #dbdbdb;border-radius:23px;display:flex;align-items:center;padding:0 4px 0 16px;font-size:16px;background:#fff}
.inp .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.inp .ph{color:#9a9a9a}
.cur{display:inline-block;width:2px;height:19px;background:#2f5fd0;vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.send{flex:none;min-width:60px;height:46px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#b8b8b8;font-size:16px;border-radius:23px}
.send.on{color:#2f5fd0}
.kb{position:absolute;left:0;right:0;bottom:0;background:#d3d5db;padding:8px 3px calc(var(--safe-b) + 6px);display:flex;flex-direction:column;gap:9px}
.kr{display:flex;gap:5px;justify-content:center}
.kr span{flex:1;max-width:34px;height:44px;border-radius:5px;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.kr span.w{max-width:46px;background:#adb3bc;font-size:13px}
.kr span.sp{max-width:none;flex:5;font-size:14px;color:#555}
.kr span.dn{background:#c2c6ce}
.igp .ph2{display:flex;align-items:center;gap:10px;height:54px;padding:0 12px}
.igp .ph2 .av{width:34px;height:34px}
.igp .ph2 b{flex:1;font-size:15px}
.dots{width:48px;height:44px;display:grid;place-items:center;font-size:22px;font-weight:700;letter-spacing:1px;border-radius:10px}
.igph{position:relative;width:100%;background:#1a1612;display:flex;justify-content:center;padding:4% 0}
.igph .proof{width:min(66%,calc(var(--app-h,100dvh) * .36))}
.igact{display:flex;align-items:center;gap:16px;padding:10px 14px 4px} /* T41: 하트·말풍선·종이비행기 … 책갈피(PARTS SV 선 아이콘 24px·선 1.8) — 그림자·채움 없음 */
.igact .ico{flex:none;width:24px;height:24px;display:block}
.igact i{display:none}
.igtx{padding:0 14px;font-size:16px;line-height:1.45;word-break:keep-all}
.igtx .lk{font-weight:700;margin-bottom:3px}
.igtx .mut{color:#737373;font-size:14px;margin-top:4px}
.igcm{padding:6px 14px 0;display:flex;flex-direction:column}
.igcm .cm{padding:5px 0}
.igc .share{margin-left:auto;color:#0a7cff;font-weight:700;font-size:16px;padding:10px 6px;border-radius:10px}
.igc .cbody{padding:12px 14px}
.igc .igph{border-radius:4px;overflow:hidden}
.igc .cap{margin-top:12px;min-height:72px;font-size:16px;line-height:1.45;word-break:keep-all;color:#111}
.igc .cap .ph{color:#9a9a9a}
.sheet{position:absolute;z-index:9;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.sheet .box{width:270px;background:#fff;border-radius:14px;overflow:visible;color:#000;text-align:center}
.sheet .box div{height:52px;display:flex;align-items:center;justify-content:center;font-size:17px;border-top:1px solid #e5e5e5}
.sheet .box div:first-child{border-top:0;border-radius:14px 14px 0 0}.sheet .box div:last-child{border-radius:0 0 14px 14px}
.sheet .del{color:#d0342c;font-weight:700}
.sheet .cfm .cq{height:auto!important;flex-direction:column;padding:18px 16px 16px;gap:6px;border-top:0}
.sheet .cfm .cq b{font-size:17px}
.sheet .cfm .cq span{font-size:15px;color:#555;line-height:1.4;word-break:keep-all}
.white{background:#fff}

/* 아빠 폰(가로 폰 틀 그림 N8-02 + 영상) */
.lph{position:absolute;left:50%;top:calc(var(--safe-t) + 9%);width:min(96%,440px);aspect-ratio:2.17/1;transform:translateX(-50%);container-type:inline-size;background:#0c0c0d;border-radius:6.4cqw;box-shadow:0 0 0 .35cqw #2e2e31,0 14px 28px rgba(0,0,0,.5)} /* 슬롭 잡기: 실사 엄지 틀 그림(N8-02) 대신 실제 폰 비율 2.17:1 베젤 */
.lph .scrn{position:absolute;left:2.2%;top:4.8%;width:95.6%;height:90.4%;overflow:hidden;border-radius:4.6cqw;background:#000}
.lph .scrn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lph .frame{display:none}
.lph .cc{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:max-content;max-width:90%;padding:.6cqw 1.6cqw;background:rgba(0,0,0,.78);color:#fff;font-size:15px;line-height:1.45;text-align:center;word-break:keep-all;border-radius:.5cqw}
.lph .ch{position:absolute;left:5%;top:16%;font-size:2.8cqw;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:.4cqw 1.4cqw;border-radius:2cqw;display:flex;gap:1cqw;align-items:center}
.lph .ch i{width:3.6cqw;height:3.6cqw;border-radius:50%;background-size:cover;background-image:url(../img/av_host.webp)}
.lph .prog{position:absolute;left:0;bottom:0;height:.7cqw;background:var(--ytred);width:30%}

/* 자막·기록 자막 */
#sub{position:absolute;z-index:50;left:0;right:0;bottom:calc(var(--safe-b) + 18%);padding:22px 26px;text-align:center;opacity:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 30%,rgba(0,0,0,.55) 70%,rgba(0,0,0,0))}
#sub p{margin:0;font-size:17px;line-height:1.6;color:#f4ecdd;word-break:keep-all;text-shadow:0 1px 10px #000}
#ovl{position:absolute;z-index:45;left:10px;right:10px;top:calc(var(--safe-t) + 56px);pointer-events:none}

/* 라이브 시계 칩 */
#live{position:absolute;z-index:70;right:12px;top:calc(var(--safe-t) + 10px);height:28px;padding:0 11px;border-radius:14px;background:rgba(18,14,11,.8);border:1px solid rgba(255,255,255,.16);font-size:13px;font-weight:700;color:#fff;display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;white-space:nowrap}
#live i{width:7px;height:7px;border-radius:50%;background:#e5352b;animation:breath 1.6s ease-in-out infinite}

/* 퍼즐 자리 */
#pz{z-index:65;background:#13110e;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:0 26px}
#pz iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#1b140e}
#pz .rc{font-size:18px;line-height:1.7;color:#f1e8da;word-break:keep-all}
#pz .rc b{display:block;font-size:20px}
#pz .wait{margin-top:22px;font-size:13px;color:#8f857a}
#pz .btn{margin-top:16px;height:46px;padding:0 22px;border:1px solid #6e655a;border-radius:23px;display:inline-flex;align-items:center;font-size:15px;color:#f4ecdd}

/* 메뉴 */
#mbtn{position:absolute;z-index:90;left:8px;top:calc(var(--safe-t) + 2px);width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
#mbtn i{display:block;width:18px;height:2px;border-radius:1px;background:rgba(255,255,255,.55)}
#mbtn.dk i{background:rgba(20,20,20,.7)}
#mbtn.ph{top:calc(var(--safe-t) + 10px)}
#sbtn{position:absolute;z-index:90;left:50px;top:calc(var(--safe-t) + 2px);width:40px;height:44px;display:grid;place-items:center;color:rgba(255,255,255,.4);opacity:0;transition:opacity .4s}
body.on #sbtn{opacity:1}
#sbtn .x{display:none}#sbtn.off .x{display:inline}#sbtn.off .w{display:none}
#phone.on ~ #sbtn{top:calc(var(--safe-t) + 10px)}
#mbtn.dk ~ #sbtn{color:rgba(20,20,20,.45)}
#menu{z-index:95;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center}
#menu .mbox{width:min(300px,84%);background:#1d1915;border:1px solid #3a322a;border-radius:16px;padding:8px 0}
#menu .mi{height:54px;display:flex;align-items:center;padding:0 20px;font-size:16px;color:#f4ecdd;border-top:1px solid #2c261f}
#menu .mi:first-child{border-top:0}
#menu .mi small{margin-left:auto;color:#a89c8a;font-size:13px}
#log{z-index:96;background:#14110e;overflow-y:auto;padding:calc(var(--safe-t) + 56px) 18px calc(var(--safe-b) + 30px)}
#log h4{margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.35;color:#f1e8da} /* T44: 구역 제목 > 본문 */
#log h4 + div{border-top:0}
#log h4:not(:first-child){margin-top:24px!important}
#log div{font-size:15.5px;line-height:1.65;padding:8px 0;border-bottom:1px solid #2a241e;color:#e9dfcf;word-break:keep-all;overflow-wrap:anywhere} /* T33: 낱말 중간 줄바꿈 없음, 긴 주소만 어디서나 */
#log div b{color:#f2c27b;font-size:13px;margin-right:6px}
#cc{position:absolute;z-index:91;left:58px;top:calc(var(--safe-t) + 12px);font-size:12.5px;background:rgba(0,0,0,.6);color:#fff;border-radius:10px;padding:3px 9px;opacity:0;pointer-events:none}
#finger{position:absolute;z-index:80;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.38);box-shadow:0 0 0 2px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.25);opacity:0;pointer-events:none}

/* 잉크 번짐 전환(→ 1974) */
.inkbleed{position:absolute;inset:-6%;pointer-events:none;filter:url(#inkf)} /* 슬롭 잡기: 흐린 가우시안 원 → 가장자리가 단단하고 번진(울퉁불퉁) 먹 — 가리개(mask)를 안쪽 층에 두고 바깥 층에 번짐 필터를 걸어 가장자리까지 일그러지게 */
.inkbleed::before{content:"";position:absolute;inset:0;background:#0b0907;-webkit-mask:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r,-20%),transparent calc(var(--r,-20%) + 1.2%));mask:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r,-20%),transparent calc(var(--r,-20%) + 1.2%))}

@media (max-height:700px){
  .lock .clk .t{font-size:58px}
  .lock .bns{top:calc(var(--safe-t) + 108px)}
  .mtop{margin:4px 0 8px}.mtop .av{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.ring,.guide,.wd{animation:none}}

/* 눈꺼풀(잠듦) */
.lid{position:absolute;left:0;right:0;height:0;background:#000;pointer-events:none}
.lid.top{top:0;box-shadow:0 10px 30px 10px #000}.lid.bot{bottom:0;box-shadow:0 -10px 30px 10px #000}
/* 패닉: 알림 숫자(그림 위, 무대 좌표) */
.nbadge{font-family:var(--sans);font-weight:700;font-size:4.4cqw;color:#fff;background:#e5352b;border-radius:3cqw;padding:.3cqw 1.6cqw;font-variant-numeric:tabular-nums;white-space:nowrap;translate:-50% -50%} /* 슬롭 잡기: 글로우 없음 */
#nb{left:34%!important;top:49.6%!important} /* F30b 배지를 허공(얼굴 옆) → 그림 속 폰 화면 모서리(R4-01 폰 x25~34%·y50~54.5%) */
/* 폰에서 새어 나오는 목소리(말풍선, 꼬리는 폰 쪽 오른쪽 아래) */
.vbub{position:absolute;left:8%;right:22%;top:calc(var(--safe-t) + 22%);background:rgba(16,16,20,.92);color:#f1f1f4;font-size:16px;line-height:1.5;padding:12px 16px;border-radius:16px;border:1px solid rgba(140,170,255,.35);word-break:keep-all;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.vbub::after{content:"";position:absolute;left:calc(var(--tx,80%) - 10px);bottom:-11px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:11px solid rgba(16,16,20,.92)}
/* 배너 재폭주: 화면 위로 쉬지 않고 쌓임 */
.wstack.flood{bottom:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
/* 속말(생각) — 소리 내어 말하는 대사창과 구별: 상자 없이 아래쪽 자막처럼 */
#dlg.thought{background:linear-gradient(rgba(6,8,16,0),rgba(6,8,16,.82) 28%);box-shadow:none;border-radius:0;left:0;right:0;bottom:0;padding:44px 22px calc(var(--safe-b) + 26px);text-align:center}
#dlg.thought .who{color:#9fb3d9;font-weight:600}
#dlg.thought p{color:#e6ecf7;font-size:17px}

/* 실제 기록 사진 캡션(1974, 명조) */
.cap74g{position:absolute;left:18px;right:18px;top:calc(30% + 100vw * 962 / 1600 + 14px);text-align:center;color:#efe4cc;font-family:var(--serif);font-size:16px;line-height:1.5;word-break:keep-all}
.cap74g small{display:block;margin-top:6px;font-family:var(--sans);font-size:11.5px;color:#a89c8a}
@media (min-width:520px){.cap74g{top:auto;bottom:22%}}

/* 누아르(지령 장면) — 예전 P0 NoirScene: 흔들리는 전등 빛 원뿔 + 가장자리 어둠. 그림 위 한 겹 */
.noir{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,transparent 45%,rgba(8,6,4,.45) 100%);animation:noirIn 2.5s ease-in both}.noir.on{animation:none}
@keyframes noirIn{from{opacity:0}to{opacity:1}}
.noir .lamp{position:absolute;left:20%;right:20%;top:-6%;height:70%;transform-origin:50% 0;background:radial-gradient(ellipse at 50% 0%,rgba(255,226,170,.16),rgba(255,226,170,.05) 45%,rgba(255,226,170,0) 70%);animation:lampsw 4.5s ease-in-out infinite alternate,lampfl 5s steps(1) infinite;mix-blend-mode:screen}
@keyframes lampsw{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes lampfl{0%,100%{opacity:1}43%{opacity:.75}45%{opacity:1}71%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.noir .lamp{animation:none}}

/* 메뉴 정지: CSS 움직임도 멈춤 */
body.paused *, body.paused *::before, body.paused *::after{animation-play-state:paused!important}
#card .warn{margin-top:22px;font-size:13px;line-height:1.7;color:#a89c8a;word-break:keep-all}
#card .ver{position:absolute;bottom:calc(var(--safe-b) + 14px);left:0;right:0;font-size:11px;color:#5d554b}
#log a{text-decoration:underline}
/* 1974 말풍선(게임 층) — UIUX §1-2와 같은 값 */
.gbb{position:absolute;background:#f2e8d2;color:#1f1b17;border:1.5px solid #1f1b17;border-radius:6px;padding:8px 12px;font-size:16px;line-height:1.45;font-weight:500;word-break:keep-all;z-index:3}
.gbb.radio{border-radius:3px;box-shadow:0 0 0 2px #f2e8d2,0 0 0 3.5px #1f1b17} /* uiux 10-06: 말풍선 모서리 22→6, 테두리 2→1.5 */
.gbb span{display:inline-block}
/* 쪽지·연필 글 인셋(삽입 칸) — 할아버지 손글씨 East Sea Dokdo 28px */

/* E13 '라이브까지 5분': 칩이 가운데로 커짐 */
#live{transition:left .5s cubic-bezier(.2,.8,.2,1),top .5s cubic-bezier(.2,.8,.2,1),font-size .5s,height .5s,padding .5s,right .5s}
#live.big{color:#f2c27b} /* 슬롭 잡기: 가운데 40px 주황 알약(오른쪽 잘림) → 제자리 칩, 글자색만 */

/* 사실 카드(E39) — 한 장씩 */
#card .fact{max-width:320px;font-family:var(--serif);font-size:18px;line-height:1.8;color:#efe4cc;word-break:keep-all;text-align:center}
#card .cred{position:absolute;left:0;right:0;top:100%;padding:0 26px;text-align:center;color:#d9cfc0;font-size:14px;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere} /* T33 */
#card .cred h4{color:#f1e8da;font-size:16px;margin:26px 0 8px}#card .cred div{margin:2px 0}
/* 접힌 교정쇄 펼치기(F15): 위 절반 + 뒤로 접힌 아래 절반 */
.fold{width:min(84%,380px)}
.fold .fh{width:100%}
.fold .fh.top{clip-path:inset(0 0 62% 0);position:relative}
.fold .fh.bot{position:absolute;left:0;top:0;clip-path:inset(38% 0 0 0);transform-origin:50% 38%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* 렉카 자막 꼴(영상 자막): 굵은 고딕 + 검은 외곽선 + 흰 글, 강조 낱말 노랑 */
.lph .cc.rkcc{background:transparent;font-weight:800;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;font-size:16px;line-height:1.4}
.rkcc em{font-style:normal;color:#ffd400}
.rk.rkred{color:#fff;background:#d52a1f;-webkit-text-stroke:0;padding:.1em .3em;border-radius:.1em}
.vid .cc.rkcc{background:transparent;font-weight:800;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;font-size:15px}

/* 1974 날짜 카드(게임 층, 그림 위) — UIUX §1-5 */
.d74{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-family:var(--serif);color:#efe4cc;text-align:center;padding:0 20px}
.d74 .w{font-size:26px;font-weight:800;text-shadow:0 0 14px #000,0 0 2px #000}.d74 .p{font-size:17px;font-weight:700;opacity:0;text-shadow:0 0 14px #000,0 0 2px #000}

/* ===== '예전 느낌' 화면 층 (슬롭 잡기 · 제작자 10-06: 1974 테두리 끔 → 무거운 B, 2026 C) =====
   값은 아래 :root 변수 한 곳에서 조정. 켜는 표시 = body[data-era] (player.js eraOf).
   ① 그림 톤 — 그림에만(글·말풍선·대사창 그대로): 무대 그림(#stage)·#view 사진은 여기, 콘티 칸 그림은 frame.css(.f > img.bg, 그림 이름으로 74/26 구분).
   ② 화면(뷰포트)에 고정된 층(#app::before 입자 · ::after 비네트+가장자리 그늘, z16) — 카메라 확대·이동과 무관하게 같은 자리.
      층 순서: 그림(#scene·#view·#frame) < 이 층 < 폰(20)·대사창(35)·카드(60)·버튼.
   2026은 그림 칸만: 앱 화면(#frame 안 UI 칸)·폰 층이 보일 땐 층을 끔. */
:root{
  --t74:brightness(.72) contrast(1.14) sepia(.24) saturate(.68);   /* 1974 그림 톤 */
  --t26:brightness(1.05) contrast(1.03) saturate(1.04);            /* 2026 그림 톤 — 제작자 10-06 2차: "환하게" → 원래보다 살짝 밝고 깨끗(1974와 대비) */
  --grain74:.95; --vig74:1; --grain26:0; --vig26:0;           /* 2026은 입자·비네트 없음(10-06 2차) */           /* 입자·비네트 세기 */
  --vig:radial-gradient(ellipse 78% 60% at 50% 46%,transparent 40%,rgba(14,8,3,.5) 78%,rgba(8,4,1,.85) 100%);
  --edge74:inset 0 0 30px 8px rgba(30,18,8,.75),inset 0 0 3px 1px rgba(214,196,160,.12); /* 1974 가장자리 바랜 종이 그늘(선 없음) */
  --t74lift:brightness(1.06) contrast(1.06) sepia(.24) saturate(.7); --vig74lift:.42; /* T16: 원래 어두운 1974 그림(밝기 바닥) */
  --grain:url(../img/grain74.webp) 0 0/192px 192px;
}
body[data-era="74"] #stage:not(:has(.cfh)),body[data-era="74"] #view img{filter:var(--t74)}
body[data-era="26"] #stage:not(:has(.cfh)){filter:var(--t26)}
#app::after{content:"";position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity .25s;background:var(--vig);mix-blend-mode:multiply}
#app::before{content:"";position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity .25s;background:var(--grain);mix-blend-mode:overlay}
body[data-era="74"] #app::after{opacity:var(--vig74);box-shadow:var(--edge74)}
body[data-era="74"] #app::before{opacity:var(--grain74)}
body[data-era="26"]:not(:has(#frame > .cfh)):not(:has(#phone.on)) #app::after{opacity:var(--vig26)}
body[data-era="26"]:not(:has(#frame > .cfh)):not(:has(#phone.on)) #app::before{opacity:var(--grain26)}
/* T07: 그림 칸(콘티 칸 #sover > .cfh)은 글(기록 자막·말풍선·이름표)이 그림과 같은 그림자 DOM 안이라 화면 층이 글까지 덮음 →
   그 칸에서는 화면 층을 끄고 frame.css가 같은 층을 칸 안(글 아래)에 그림. 무대 그림 칸은 화면 층 그대로(#view 글은 z15라 층 위) */
body:has(#sover > .cfh) #app::before,body:has(#sover > .cfh) #app::after{opacity:0!important}
/* #view 안 실제 사진(M13 만경봉호 확대·M87 지면)은 층(z14)보다 위라 사진에도 같은 층을 #view 안에(사진 위·글 아래) */
body[data-era="74"] #view:has(#ph53,#dg)::before,body[data-era="74"] #view:has(#ph53,#dg)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
body[data-era="74"] #view:has(#ph53,#dg)::before{background:var(--grain);mix-blend-mode:overlay;opacity:var(--grain74)}
body[data-era="74"] #view:has(#ph53,#dg)::after{background:var(--vig);mix-blend-mode:multiply;box-shadow:var(--edge74)}
#view .gbb,#view .gtail,#view .gname,#view .note74,#view .d74{z-index:3}
/* 무대(setScene)로 그리는 1974 그림 중 아직 구운 테두리가 있는 것: 테두리 없는 판과 같은 비율(가장자리 44·78px 잘라 냄 = 1.089배)로 안쪽만 보이게.
   겹친 층(L-N1-21_bg + 사람 층 + 연단 층) 장면은 #sover도 같은 배율로 키워 층이 어긋나지 않게 */
#stage .bg[src$="L-N1-21_bg.webp"],#stage .bg[src$="L-f04.webp"],
#stage:has(#bg1[src$="L-N1-21_bg.webp"]) #sover{scale:1.089}

/* ---- 밤 편집국(DIRECTION_NIGHT) ---- */
.glowspot{position:absolute;pointer-events:auto;border-radius:40%;background:radial-gradient(closest-side,rgba(255,231,196,.5),rgba(255,231,196,.12) 70%,rgba(255,231,196,0));animation:gspot 2.4s ease-in-out infinite;z-index:4}
@keyframes gspot{0%,100%{opacity:.35}50%{opacity:1}}
.gname{position:absolute;transform:translateX(-50%);font-family:var(--sans);font-size:13px;font-weight:500;color:#efe4cc;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:6px;white-space:nowrap;z-index:3}
.smk{position:absolute;pointer-events:none;background:radial-gradient(closest-side,rgba(190,186,178,.22),rgba(190,186,178,0));animation:smk 6s ease-in-out infinite alternate}
.smk.s2{animation-duration:7s;animation-delay:-3s;opacity:.7}
@keyframes smk{from{transform:translateX(0)}to{transform:translateX(6px)}}
.f16box{position:absolute;border-radius:6px;pointer-events:none}
.f16box svg{position:absolute;inset:0;overflow:visible}
.pdot{position:absolute;width:10px;height:10px;border-radius:50%;background:#b3261e;opacity:.8;transform:translate(-50%,-50%);pointer-events:none}
.gbb.b17{font-size:17px;line-height:1.55;padding:13px 16px}
#sub.expl p{font-size:15px;color:#e9dfcc}
@media (prefers-reduced-motion:reduce){.glowspot,.smk{animation:none}.glowspot{opacity:.8}}

.gbb.low{border-style:dashed}
.gbb .ja{display:block;font-size:14px;opacity:.7;margin-bottom:2px;word-break:normal;overflow-wrap:anywhere}
.rainwin{position:absolute;overflow:hidden;pointer-events:none}
.rainwin i{position:absolute;top:-40%;width:1px;background:linear-gradient(rgba(220,230,240,0),rgba(220,230,240,.95));transform:rotate(12deg);animation:rwin linear infinite}
@keyframes rwin{from{top:-40%}to{top:110%}}
@media (prefers-reduced-motion:reduce){.rainwin{display:none}}
.gbb em{font-style:normal}.gbb em.ck{opacity:0;transition:opacity .12s}

/* ===== T31: 키보드 포커스 표시(stage가 div → button으로 바꿈) — 슬롭 잡기 =====
   버튼 기본 모양은 지우고(각 요소의 기존 모양 유지), 키보드로 왔을 때만 따뜻한 2px 테두리. 마우스·터치 탭에는 안 보임 */
/* 리셋은 특이도 최소(:where)라 #mbtn·#sbtn·.btn 등 기존 모양이 이김 */
:where(#app button){font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:inherit}
#app :is(button,[role=button],a,[tabindex]):focus{outline:none}
#app :is(button,[role=button],a,[tabindex]):focus-visible{outline:2px solid #f2c27b;outline-offset:2px;border-radius:6px}
#menu .mi:focus-visible{outline-offset:-3px}