/* 진범 사이트 v6: 게임 그림체 만화책 한 권(디자인/23_사이트_v6_기획.md). 글은 그림의 캡션·말풍선·종이 칸 안에만. 그림 상자 비율은 캔버스 그대로 */
:root{--night:#0f1422;--wood:#2A1A0F;--paper:#F2E6CE;--ink:#2A1D13;--gold:#D9A441;--red:#B8322A;--pen:#2C3550;--top:62px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;background:#120c07;color:var(--paper);font-family:B,serif;overflow-x:hidden;overflow-x:clip}  /* clip: 폰에서 옆으로 밀리지 않게(숨은 말풍선·책도 화면 밖으로 나감) */
img{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* 위 띠 */
.top{--tb:0;position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:14px;height:var(--top);padding:0 max(16px,env(safe-area-inset-left));background:rgba(18,12,7,calc(var(--tb)*.92))}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;opacity:var(--tb)}.brand b{font:700 21px T,serif;color:var(--gold)}
.langs{display:flex;gap:4px;margin-left:auto}.langs a{display:inline-flex;align-items:center;height:32px;padding:0 9px;border-radius:6px;font:600 14px/1 U;text-decoration:none;opacity:.8;white-space:nowrap}@media (max-width:480px){.langs{gap:0}.langs a{padding:6px 5px;font-size:12px}}.langs a[aria-current]{background:rgba(242,230,206,.14);opacity:1}
.snd{width:44px;height:44px;border:0;background:none;padding:7px;cursor:pointer}.snd .i-on{display:none}.snd[aria-pressed=true] .i-on{display:block}.snd[aria-pressed=true] .i-off{display:none}
/* 그림 + 글자 칸 */
.pc{position:relative}
.pc>.art,.band>.art{position:absolute;inset:0;width:100%;height:100%}
.slot{position:absolute;display:flex;flex-direction:column;justify-content:safe center;padding:0 .3em;color:var(--ink);line-height:1.3;overflow:hidden;text-wrap:pretty;word-break:keep-all}
.slot[data-role=label],.slot[data-role=small]{font-family:U;font-weight:600}
.slot[data-role=num]{font-family:N,U}
.slot[data-role=name],.slot[data-role=tag],.slot[data-role=title],.slot[data-role=logo]{font-family:T;font-weight:700;line-height:1.25;text-wrap:balance}
.slot[data-role=logo]{align-items:center;text-align:center;letter-spacing:.04em;line-height:1.4}  /* T 글꼴 글자 상자가 1.4em이라 줄 높이를 맞춰야 칸 안에 든다 */
.slot[data-role=body],.slot[data-role=pcap],.slot[data-role=ebody]{font-family:B;line-height:1.45}
.slot[data-role=ebody]{line-height:1.4}  /* 일본어 안내서 본문 세 줄이 작은 폰(375×667) 칸에 들게 */
.slot[data-role=hand]{font-family:H;line-height:1.35;color:var(--pen)}
.slot[data-role=quote]{font-family:H;line-height:1.3;color:var(--ink)}  /* 말풍선은 만화 손글씨 */
.slot[data-role=button]{font-family:U;font-weight:700;align-items:safe center;text-align:center;color:var(--paper)}
.slot[data-role=stampt]{font-family:T;font-weight:700;color:var(--red);align-items:safe center;text-align:center}
.slot[data-role=board]{font-family:B;line-height:1.5}
.slot[data-role=lead]{font-family:B;line-height:1.3}
.slot[data-role=scap]{font-family:U;font-weight:600;line-height:1.1;align-items:safe center;text-align:center}
html.debug .slot[data-fail]{outline:3px solid #f0f}
.slot .w{white-space:nowrap}.slot .ch{visibility:hidden}.slot .ch.on{visibility:visible}

/* ---------- 여는 장면: 원고지 ---------- */
.intro6{position:fixed;inset:0;z-index:60;background:#0b0705;cursor:pointer;overflow:hidden;touch-action:none}
html:has(.intro6){overflow:hidden;scrollbar-gutter:stable}
.intro6 picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.genko.open{position:absolute;left:50%;top:50%;width:min(86vw,140vh);aspect-ratio:2000/1300;translate:-50% -50%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.genko>.art{position:absolute;inset:0;width:100%;height:100%}
.genko{position:absolute}
.genko .cell{position:absolute;display:grid;place-items:center;font:700 1em/1 T,serif;color:var(--ink);font-style:normal}
.genko .row{position:absolute;display:flex;align-items:center;padding-left:.4em;font:700 1em T,serif;color:var(--ink);white-space:nowrap;overflow:hidden}
.genko .row:not(:empty){background:var(--paper);background-clip:padding-box;border:2px solid transparent}  /* 영·스 줄 글은 원고지 칸 선 위에 붙인 종이 띠에(글자가 칸 선에 그어지지 않게) */
.genko .cell.q{color:var(--red);font-size:1.6em;line-height:1}
.genko .cell.blink::after{content:"";position:absolute;inset:18% 30%;border-bottom:3px solid var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.pc.skip{position:absolute;right:max(16px,3vw);bottom:max(16px,4vh);width:clamp(120px,11vw,170px);z-index:2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.skip .slot{align-items:safe center;text-align:center}
/* 위 띠 작은 무료 버튼: 첫 화면을 지나면(site.js .top.past) */
.top .playbtn.mini{height:48px;flex:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.top.past .playbtn.mini{opacity:1;visibility:visible}

/* ---------- 첫 화면: 만화 펼침 한 장 ---------- */
.hero{justify-content:center;--band-r:.122533;--pw:min(100vw - 32px,calc((100svh - var(--top) - 4.4vh) / (.428571 + var(--band-r))));position:relative;min-height:100svh;padding:calc(var(--top) + 1vh) 2vw 2vh;background:radial-gradient(circle at 50% 30%,#2a1d14,#0e0906);display:flex;flex-direction:column;align-items:center;gap:1.4vh}
.panel{position:relative;width:var(--pw);aspect-ratio:4200/1800;container-type:inline-size}
.panel>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rain{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(105deg,transparent 0 22px,rgba(190,210,240,.07) 22px 23px);background-size:200px 200px;animation:rain .45s linear infinite;mix-blend-mode:screen}
@keyframes rain{to{background-position:-60px 200px}}
.pc.title{position:absolute;left:2.5%;top:3%;width:40%;z-index:3}
.dial{position:absolute;right:2.5%;top:3%;width:21%;aspect-ratio:1000/520;z-index:4}
.dial .art{position:absolute;inset:0;width:100%;height:100%}.dial .dl,.dial .dr{visibility:hidden}
.dial.pl .d0,.dial.pr .d0{visibility:hidden}.dial.pl .dl,.dial.pr .dr{visibility:visible}
.dial .num{justify-content:safe center;align-items:safe center;color:var(--ink);font-family:N,U;line-height:1}
.dial .slot[data-k=label]{align-items:safe center;text-align:center}
.dbtn{position:absolute;border:0;background:none;cursor:pointer;border-radius:50%}
.lineup{position:absolute;inset:0;pointer-events:none}  /* 층을 만들지 않는다: 올린 사람만 간판·다이얼 위로(알리바이가 판 뒤에 숨던 것) */
.sus{position:absolute;top:33.33%;left:var(--x);width:12.19%;aspect-ratio:900/1900;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;z-index:2}
.sus:hover,.sus.on,.sus:focus-visible{z-index:6}
.sus .calm,.sus .shady{position:absolute;inset:0;width:100%;height:100%}
.sus .shady{opacity:0}.sus.sh .shady{opacity:1}.sus.sh .calm{opacity:0}
.sus .q{position:absolute;left:66%;top:0;width:40%;pointer-events:none}.sus.rt .q{left:-6%}
.sus .tag{position:absolute;left:-42%;right:-42%;bottom:-4%;opacity:0;transition:opacity .2s;pointer-events:none}
.sus.lt .tag{left:0;right:-84%}.sus.rr .tag{left:-84%;right:0}  /* 양 끝 사람 이름표는 안쪽으로 펼쳐 화면 밖으로 안 나가게 */
.sus .alibi{position:absolute;left:45%;bottom:84%;width:260%;opacity:0;transform:translateY(8px) scale(.9);transform-origin:0 100%;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none;z-index:6}
/* 말풍선 꼬리가 그 사람 머리를 가리키게: 왼쪽 둘은 오른쪽 위로, 오른쪽 둘은 왼쪽 위로(그림 좌우 뒤집어 꼬리도 오른쪽), 가운데는 바로 위 */
.sus.rt .alibi{left:auto;right:45%;transform-origin:100% 100%}.sus.rt .alibi>.art{transform:scaleX(-1)}
.sus.mid .alibi{left:20%;transform-origin:10% 100%}
.sus:hover .tag,.sus:focus-visible .tag,.sus.on .tag{opacity:1}
.sus:hover .alibi,.sus:focus-visible .alibi,.sus.on .alibi{opacity:1;transform:none}
@media (hover:none){.sus:not(.on):hover .tag,.sus:not(.on):hover .alibi{opacity:0}}  /* 터치 뒤 남는 :hover로 닫은 이름표가 계속 보이던 것 */
.pc.rumor{position:absolute;width:28%;z-index:5;opacity:0;pointer-events:none}
.pc.rumor.flip>.art{transform:scaleX(-1)}
.pc.rumor .slot{line-height:1.2}:lang(ja) .pc.rumor .slot{line-height:1.15}  /* 일본어 소문 세 줄이 말풍선에 들게 */
.dotsrc{display:none}
.hdot{position:fixed;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;z-index:55;opacity:0}
/* 첫 화면 아래 띠: 사러 가는 판(그림 위에 띄우지 않고 따로) */
.band{position:relative;width:var(--pw)}
.band.band_cta2_tall{display:none}
.band.band_cta2{width:calc(var(--pw) * 1.16958)}  /* 띠 그림 좌우 투명 여백(x 304~3895/4200)만큼 넓혀 나무 띠 끝을 그림 끝에 맞춘다 */
.band .slot[data-k=line]>span{display:block}  /* 영·스 한 줄 소개는 문장마다 한 줄 */
.band .slot[data-k=note]{line-height:1.3}.band .slot[data-k=note]>span{display:block;white-space:nowrap}  /* 안내 두 줄은 줄마다 한 줄로(글자가 줄어 맞춘다) */
.bslot{position:absolute;display:flex;align-items:center;justify-content:center;container-type:size}
.bslot .playbtn{height:auto;width:min(100cqw,400cqh)}
.playbtn{position:relative;display:block;height:100%;aspect-ratio:1200/300;max-width:100%}
.playbtn img{position:absolute;inset:0;width:100%;height:100%}.playbtn .dn{visibility:hidden}
.playbtn:active .up{visibility:hidden}.playbtn:active .dn{visibility:visible}
.playbtn .slot{color:var(--red)}
.soonst{height:100%;width:auto;rotate:-6deg}
/* 공식 배지(assets/badges/README.md): 애플 44px(최소 40), 둘 사이 빈 곳은 높이의 1/4 이상, 구글은 PNG 투명 여백만큼 크게(--gk) 그려 그림 부분 높이를 애플과 맞춘다 */
.getapp{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;margin:0;padding:0 16px 32px;background:#0e0a07}
.getapp .badge{height:44px}.getapp .badge.gp{height:calc(44px * var(--gk));margin-inline:calc(-44px * var(--gk) * var(--gx))}.getapp img{height:100%;width:auto;max-width:none}
.storelinks a{color:inherit;text-decoration:underline;text-underline-offset:.15em}

/* ---------- 실제 게임 화면: 암실 빨랫줄(디자인/24 3-2) ---------- */
.stage{position:relative;min-height:100svh;overflow:hidden}
.shots6{min-height:0;background:#120a08;display:flex;justify-content:center;padding:calc(var(--top) + 12px) 0 24px}
.dark{position:relative;width:min(100vw - 32px,(100svh - var(--top) - 36px) * 2.3333);aspect-ratio:var(--arw)}
.dark>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.note{position:absolute;inset:0}.note.t{display:none}
.prints{position:absolute;inset:0}
/* 줄 y 245/1800, 인화지는 집게 y 150/2400 자리에 줄이 지나게: top = 13.611% − 87% × .0625 */
.print{--r:0deg;position:absolute;top:8.17%;height:87%;padding:0;border:0;background:none;cursor:zoom-in;rotate:var(--r);transform-origin:50% 6.25%;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5))}
.print[data-n="1"]{left:36%;--r:-1.5deg}.print[data-n="2"]{left:58.7%;--r:1deg}.print[data-n="3"]{left:81.4%;--r:-.5deg}
.print>.art,.print>.shot{position:absolute}.print>.art{inset:0;width:100%;height:100%;z-index:1}
.print>.shot{object-fit:cover;background:#ddd}
.print>.slot{z-index:2}
@keyframes swing{0%,100%{rotate:var(--r)}30%{rotate:calc(var(--r) + 2deg)}70%{rotate:calc(var(--r) - 2deg)}}
@media (hover:hover){.prints .print:hover{animation:swing 1.4s ease-in-out}}
.print.big{position:fixed;left:calc(50vw - 46svh * .41667);top:4svh;height:92svh;width:auto;margin:0;rotate:0deg;animation:none;z-index:71;cursor:zoom-out;outline:none}
.shots-dim{position:fixed;inset:0;z-index:70;background:rgba(10,6,4,.84);cursor:zoom-out}
.shots-dim[hidden]{display:none}

/* ---------- 사건 파일 넷: 책장 → 커버플로 ---------- */
.files6{background:#1a120b;height:100svh;padding:calc(var(--top) + 2vh) 0 3vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pc.cap{width:min(480px,36vw);z-index:4}
.pc.hcap{width:min(480px,max(36vw,420px))}
.fcap{position:absolute;left:4vw;top:calc(var(--top) + 3vh);pointer-events:none}  /* 장식 판: 투명 상자가 책 위 누름을 가로채지 않게 */
.shelf{--fh:min(480px,100svh - 200px);position:relative;width:100%;height:var(--fh);margin-top:5vh;touch-action:pan-y;cursor:grab;z-index:2}
.file{position:absolute;left:50%;top:0;height:100%;aspect-ratio:1100/1500;margin-left:calc(var(--fh) * -.3667);outline:none;pointer-events:none}
.book{position:absolute;inset:0;transform-origin:50% 90%;pointer-events:auto}
.book .cover{position:absolute;inset:0}
.book .spine{display:none}
.cover .slot,.spine .slot{align-items:safe center;justify-content:center;text-align:center}  /* 표지 라벨 칸 가운데 */
.cover .slot[data-k=era]{padding:0 2px;letter-spacing:-.02em}  /* '1998 Solpyeong'이 작은 표지(폰·짧은 창)에서 한 줄로 */
.files6>.scene{position:absolute;inset:0}.files6>.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.files6 .fcap,.files6 .bar{z-index:3}
.fst{position:absolute;right:6%;top:4%;width:30%;rotate:12deg}
.file.active{cursor:pointer}
.file:focus-visible .book{outline:3px solid var(--gold);outline-offset:6px;border-radius:6px}
.bar{width:min(900px,80vw);margin-top:2vh}
.bar .slot{align-items:safe center;text-align:center}
.openfile{position:fixed;inset:0;z-index:58;display:grid;place-items:center;align-content:center;gap:10px;background:rgba(8,5,3,.82);cursor:zoom-out;perspective:1600px}
.openfile[hidden]{display:none}
.openfile .inside{width:min(1180px,94vw,140vh);cursor:default}
.pocket{position:absolute;display:grid;place-items:center}
.card6{position:relative;height:96%;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.card6[aria-pressed=true]{transform:rotateY(180deg)}
.card6 .face{position:absolute;inset:0;backface-visibility:hidden}.card6 .back{transform:rotateY(180deg)}
.card6 .face .art{position:absolute;inset:0;width:100%;height:100%}
.card6 .slot[data-k=case_no]{line-height:1.1}
.hookph{display:none}

/* ---------- 수사는 이렇게: 만화 한 쪽 + 카메라 ---------- */
.how6{background:#1a120b;padding:calc(var(--top) + 3vh) 0 6vh}
.hcap{position:relative;margin:0 0 3vh max(32px,calc((100vw - 1200px) / 2))}
.page{position:relative;width:min(1200px,100vw - 64px);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;aspect-ratio:auto!important}
.page .paper{display:none}
.page .paper{position:absolute;inset:0;width:100%;height:100%}
.panel6{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;display:flex;flex-direction:column;gap:6px}
.panel6>.pc{width:100%}
.pstrip{z-index:2}
.pimg>.art{object-fit:cover}
.pimg .slot[data-role=body]{font-size:1em}
.p2 .b{opacity:0}.p2.broken .a{opacity:0}.p2.broken .b{opacity:1}
.p2 .after{display:none}.p2.broken .before{display:none}.p2.broken .after{display:inline}
.hot{font-style:normal;color:var(--red);font-weight:700;display:inline-block;animation:hot 1.2s ease-in-out infinite}
@keyframes hot{0%,100%{transform:none}25%{transform:translateX(-2px) rotate(-2deg)}75%{transform:translateX(2px) rotate(2deg)}}
.burst{position:absolute;left:25%;top:-5%;width:60%;pointer-events:none;z-index:4}
.evid{position:absolute;left:5%;bottom:7%;width:24%;padding:0;border:0;background:none;cursor:grab;touch-action:none;z-index:8;rotate:-6deg;filter:drop-shadow(0 10px 10px rgba(0,0,0,.5))}
.evid.used{visibility:hidden}
.evid img,.word img,.print img{pointer-events:none}
.hand{position:absolute;height:auto}
.tslot{position:absolute;opacity:0}
.pcap{position:absolute;left:3%;top:4%;width:68%}
.tstamp{position:absolute;right:4%;top:6%;width:34%;opacity:0}
.p5 .gap{display:inline-block;min-width:4em;border-bottom:2px solid var(--ink);color:transparent;text-decoration:none}
.p5 .gap.on{color:var(--red);font-weight:700;border-color:transparent;min-width:0}  /* 채운 뒤엔 낱말 폭만: 4em이 남아 '2번 지주 에서'처럼 조사가 떨어져 보였다 */
.p5 .gap.on::before{content:attr(data-a)}
.blank{position:absolute;display:grid;place-items:center}
.blank b{position:relative;z-index:1;font:700 1em U;color:var(--red)}
.blank .pen{position:absolute;left:50%;top:50%;width:60%;translate:-50% -50%;pointer-events:none}
.words{position:relative;grid-column:1/-1;width:min(1100px,100%);margin:-8px auto 0;display:flex;justify-content:space-between;gap:12px;z-index:9}
.word{width:31%;padding:0;border:0;background:none;cursor:grab;touch-action:none;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}
.word.sel{filter:drop-shadow(0 0 10px rgba(217,164,65,.95))}
.word.done{visibility:hidden}
@keyframes nope{25%{translate:-8px 0}75%{translate:8px 0}}.word.nope,.evid.nope{animation:nope .3s 2}
.st6{position:absolute;opacity:0}
.genko.res,.genko.endg{position:absolute;inset:0}

/* ---------- 마지막: 새벽 편집국 ---------- */
.end6{min-height:0;background:#0e0a07;display:flex;justify-content:center;padding:calc(var(--top) + 12px) 0 24px}
.epanel{position:relative;width:min(100vw - 32px,(100svh - var(--top) - 36px) * 2.3333);aspect-ratio:var(--arw)}
.epanel picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.endg.t,.eg.t{display:none}
.ephoto{position:absolute;rotate:-3deg;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.eg{position:absolute;inset:0}
.eg .slot[data-k$=_value]{font-family:B;font-weight:400}
.eg .bslot.stamp .soonst{height:100%;width:auto}

.foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding:28px max(16px,5vw) 40px;font-size:13px;background:#0c0805}
.foot nav{display:flex;flex-wrap:wrap;gap:14px}.foot a{text-decoration:none;opacity:.8}
/* 광고 칸(템플릿 .foot 첫 칸)은 한 줄을 다 쓴다. 11-05부터 폭 0인 칸으로 끼어 링크를 어중간하게 밀고 광고 폭도 0이었다(11-09 검수) */
.foot .ad-slot{flex:0 0 100%;max-width:none!important}.foot .ad-slot>ins{max-width:960px;margin-inline:auto}

/* ---------- 편집국 사건 안내서(검색·독자용 정식 본문, 4개 언어) ---------- */
.editorial-guide{background:#140C07;color:#EDE0C8;border-top:1px solid rgba(217,164,65,.22);border-bottom:1px solid rgba(217,164,65,.18);padding:56px max(18px,5vw) 64px;font:400 16px/1.78 B,serif;word-break:keep-all;overflow-wrap:anywhere}
html[lang=ja] .editorial-guide,html[lang=en] .editorial-guide,html[lang=es] .editorial-guide{word-break:normal;overflow-wrap:break-word}
.ed-wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.ed-head{border-bottom:1px solid rgba(217,164,65,.24);padding-bottom:28px}
.ed-kicker{margin:0 0 10px;font:600 13px/1.4 U,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.editorial-guide h2{margin:0 0 18px;font:700 clamp(24px,3vw,34px)/1.32 T,serif;color:var(--paper);text-wrap:balance}
.editorial-guide h3{margin:0 0 12px;font:700 clamp(20px,2.2vw,25px)/1.35 T,serif;color:var(--gold);text-wrap:balance}
.editorial-guide h4{margin:0 0 8px;font:700 18px/1.38 T,serif;color:var(--paper)}
.ed-lead,.ed-intro{margin:0 0 14px;color:#E6D7BC;max-width:86ch}
.ed-lead:last-child{margin-bottom:0}
.ed-grid{display:grid;gap:18px;margin-top:16px}
.ed-four,.ed-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ed-card{background:#1C120B;border:1px solid rgba(217,164,65,.22);border-radius:4px;padding:22px 24px;box-shadow:0 6px 18px rgba(0,0,0,.32)}
.ed-card p{margin:0 0 12px;font-size:15px;line-height:1.72;color:#E2D3B7}
.ed-card p:last-child{margin-bottom:0}
.ed-step{display:inline-block;margin-bottom:8px;padding:2px 8px;border:1px solid rgba(217,164,65,.45);border-radius:2px;font:700 12px/1.4 N,U,sans-serif;color:var(--gold);letter-spacing:.08em}
.ed-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px;font:600 12px/1.4 U,sans-serif;color:var(--gold)}
.ed-meta span:first-child{background:rgba(184,50,42,.22);border:1px solid rgba(184,50,42,.6);color:#F7DFD9;padding:2px 8px;border-radius:2px}
.ed-role{font:600 14px/1.5 U,sans-serif;color:var(--paper)!important}
.ed-quote{margin:12px 0 14px;padding:10px 14px;background:rgba(242,230,206,.06);border-left:3px solid var(--gold);font:400 15px/1.6 H,B,serif;color:var(--paper)}
.ed-suspects{margin:14px 0;padding-left:18px;font-size:14px;line-height:1.65;color:#DECDAE}
.ed-suspects li{margin:5px 0}
.ed-cta{margin-top:16px!important;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.ed-cta a,.ed-playlink{display:inline-block;padding:9px 16px;background:var(--red);color:var(--paper);font:700 14px/1.3 U,sans-serif;text-decoration:none;border-radius:3px;border:1px solid rgba(242,230,206,.22)}
.ed-cta a.ed-sec-cta{background:transparent;color:var(--gold);border:1px solid rgba(217,164,65,.55)}
.ed-cta a:hover,.ed-playlink:hover{filter:brightness(1.1)}
.ed-more{margin:18px 0 0;font:600 14px/1.4 U,sans-serif}
.ed-more a{color:var(--gold);text-decoration:underline;text-underline-offset:.2em}
.ed-faq{margin:16px 0 0;display:grid;gap:14px}
.ed-qa{background:#19100A;border:1px solid rgba(217,164,65,.18);border-radius:4px;padding:18px 22px}
.ed-qa dt{font:700 16px/1.45 T,serif;color:var(--paper);margin:0 0 6px}
.ed-qa dd{margin:0;font-size:15px;line-height:1.72;color:#DFD0B4}
.ed-links{margin-top:24px;padding-top:20px;border-top:1px solid rgba(217,164,65,.2);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font:600 14px/1.4 U,sans-serif}
.ed-links a:not(.ed-playlink){color:var(--gold);text-decoration:underline;text-underline-offset:.2em}
/* ---------- 하위 안내 문서(how-to-play · case-1 · faq · contact) ---------- */
.top.sub-top{--tb:1;position:sticky;height:auto;min-height:var(--top);flex-wrap:wrap;padding:10px max(16px,5vw);gap:8px 16px;border-bottom:1px solid rgba(217,164,65,.22)}
.sub-top .brand b{display:inline}
.sub-nav{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.sub-nav a{display:inline-flex;align-items:center;padding:6px 10px;border-radius:5px;font:600 13px/1.2 U,sans-serif;color:#E6D7BC;text-decoration:none}
.sub-nav a:hover,.sub-nav a[aria-current=page]{background:rgba(217,164,65,.18);color:var(--gold)}
.sub-main{padding-top:44px}
.sub-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 13px/1.4 U,sans-serif;color:#C8B698;margin-bottom:-20px}
.sub-crumb a{color:var(--gold);text-decoration:none}.sub-crumb a:hover{text-decoration:underline}
.sub-article{display:flex;flex-direction:column;gap:40px}
.sub-main h1{margin:0 0 18px;font:700 clamp(26px,3.3vw,38px)/1.3 T,serif;color:var(--paper);text-wrap:balance}
.sub-main .ed-block h2{margin:0 0 14px;font:700 clamp(20px,2.3vw,26px)/1.35 T,serif;color:var(--gold);text-wrap:balance}
.sub-main .ed-card h3{margin:0 0 8px;font:700 18px/1.4 T,serif;color:var(--paper);text-wrap:balance}
.sub-block-p{margin:0 0 14px;color:#E6D7BC;max-width:86ch}
.sub-block-p:last-child{margin-bottom:0}
.sub-list{margin:14px 0 0;padding-left:20px;color:#E2D3B7;max-width:84ch}
.sub-list li{margin:8px 0;line-height:1.72}
.sub-cta-box{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.sub-cta-note{font:400 14px/1.5 U,sans-serif;color:#C8B698}
.ed-one{grid-template-columns:1fr}
.ed-related{padding-top:32px;border-top:1px solid rgba(217,164,65,.24)}
.ed-rel-card{display:block;text-decoration:none;transition:border-color .18s,transform .18s}
.ed-rel-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.ed-rel-card h3{color:var(--gold)!important;margin:0 0 6px!important;font-size:17px!important}
.sub-article a:not(.ed-playlink){color:var(--gold);text-decoration:underline;text-underline-offset:.18em}
@media (max-width:780px){
 .editorial-guide{padding:40px 16px 48px}
 .sub-main{padding-top:32px}
 .sub-nav{order:3;flex:1 0 100%;padding-top:6px;border-top:1px solid rgba(242,230,206,.1)}
 .ed-four,.ed-two{grid-template-columns:1fr}
 .ed-card{padding:18px}
}

/* ---------- 폰 세로 ---------- */
@media (max-aspect-ratio:3/4){
 .brand b{display:none}
 /* 그림(1440×2560)과 띠(1440×680)를 한 화면에: 폭 P일 때 높이 P × (1.7778 + .4722) */
 .hero{--pw:min(100vw - 24px,calc((100svh - var(--top) - 3.4vh) / 2.25));padding:var(--top) 0 2vh}
 .panel{aspect-ratio:1440/2560;max-height:none}
 .pc.title{left:4%;top:2%;width:92%}
 .dial{right:auto;left:24%;top:14%;width:52%}
 .sus .q{display:none}
 .sus .alibi{display:none}  /* 폰: 알리바이는 소문 말풍선 자리(폭 88%)에 크게(site.js) */
 .sus .tag{left:-80%;right:-80%}.sus.lt .tag{left:0;right:-160%}.sus.rr .tag{left:-160%;right:0}  /* 이름이 한 줄로 들게 넓게, 양 끝은 안쪽으로 */
 .sus.on{z-index:6!important}  /* 누른 사람 이름표가 앞줄 뒤에 가리지 않게(placeSus 인라인 z보다 위) */
 /* site.js가 돌기 전(느린 연결)에도 다섯이 겹치지 않게 site.js PHONE_SLOTS 첫 자리 그대로 */
 .sus[data-i="0"]{left:6%;top:47%;width:22%}.sus[data-i="1"]{left:39%;top:47%;width:22%}.sus[data-i="2"]{left:72%;top:47%;width:22%}.sus[data-i="3"]{left:18%;top:63%;width:27%}.sus[data-i="4"]{left:55%;top:63%;width:27%}
 .pc.rumor{width:88%}
 .band.band_cta2{display:none}.band.band_cta2_tall{display:block}
 .top .playbtn.mini{display:none}
 .dark{width:min(100vw,600px);aspect-ratio:var(--art)}  /* 태블릿 세로에서 너무 커지지 않게 */
 .note.w{display:none}.note.t{display:block}
 /* 폰: 줄 y 604/2560, 인화지 높이 76% → top 23.594% − 76% × .0625. 가로로 넘기기(다음 장이 보이게) */
 .prints{inset:18.84% 0 auto;height:78%;display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 21.85%;scrollbar-width:none}
 .prints::-webkit-scrollbar{display:none}
 .prints .print{position:relative;left:auto!important;top:0;height:97.4%;flex:none;scroll-snap-align:center}
 .pc.cap{width:min(100vw - 32px,420px)}
 .bar{width:calc(100vw - 24px)}
 .shelf{height:50vh;margin-top:16vh}
 .file{margin-left:calc(50vh * -.3667)}
 .fcap{left:max(16px,50vw - 210px)}
 .how6{height:auto;display:block;padding:calc(var(--top) + 2vh) 0 4vh}
 .hcap{margin:0 0 2vh max(16px,calc(50vw - 308px))}  /* 태블릿 세로: 만화 쪽 왼쪽 끝에 맞춤 */
 .page{width:min(100vw,640px);margin:0 auto;display:flex;flex-direction:column;gap:14px;padding:0 12px}
 .page .paper{display:none}
 .panel6{width:100%!important}
 .words{width:100%;order:6;flex-direction:column;align-items:center;gap:0;margin-top:-6px}
 .word{width:min(340px,92%)}
 .slot[data-role=pcap]{line-height:1.35}
 .tstamp{width:40%}
 .epanel{width:min(100vw,600px);aspect-ratio:var(--art)}
 .endg.w,.eg.w,.ephoto{display:none}.endg.t,.eg.t{display:block}
 .genko.open{width:96vw}
 .openfile .inside{width:96vw}
 .openfile .hookph{display:block;width:96vw}.openfile .inside .slot[data-k=hook]{visibility:hidden}  /* 펼친 파일 속 소개 칸은 폰에서 17px라 아래 설명 띠에 */
 .openfile{place-items:center;padding:0 2vw}
 .card6.big{position:fixed;left:50%;top:50%;height:auto;width:78vw;translate:-50% -50%;z-index:70}
}
@media (max-aspect-ratio:3/4){.panel6.n6{order:7}.words{order:6}}
/* 작은 폰(375×667 등): 그림이 좁아져 띠 글·다이얼이 잘리던 것 → 띠는 화면 폭, 다이얼은 넓게 */
@media (max-aspect-ratio:3/4) and (max-height:720px){.band.band_cta2_tall{width:calc(100vw - 24px)}.dial{left:20%;width:60%}
 .sus .tag{left:-115%;right:-115%}.sus.lt .tag{left:0;right:-230%}.sus.rr .tag{left:-230%;right:0}.pc.rumor{width:96%}}  /* 그림이 좁아 두 낱말 이름이 꺾이던 것 */
/* 높이 860 이하 폰(아이폰 8 Plus 736·사파리 툴바 750 등): 사건 파일 제목 판이 1편 위를 덮던 것 → 판을 줄이고 책장을 내린다 */
@media (max-aspect-ratio:3/4) and (max-height:860px){.pc.cap{width:min(100vw - 32px,300px)}.fcap{left:max(16px,50vw - 150px)}.shelf{margin-top:calc(16vh + 50px)}
 .fcap [data-k=h]{width:77.5%!important}}  /* 책 높이(50vh)는 그대로: 줄이면 2편 연도 '1998 Solpyeong'이 375×667에서 두 줄로 넘쳤다. 제목 칸은 크림 종이(x 3~97%) 안에서 오른쪽으로만 넓힘(왼쪽은 본문과 같은 14.5%): 300px 판에서 한국어 제목이 16px 한 줄(208px)에 5px 모자라 두 줄로 커졌다(11-03) */
/* 폰: 주머니 속 작은 카드는 글이 12px 아래라 눌러 크게 했을 때만(접근성 트리에는 남게 opacity). 태블릿 세로는 그대로 보임 */
@media (max-aspect-ratio:3/4) and (max-width:600px){.openfile .card6:not(.big) .slot{opacity:0}}