/* Monologue Gaze — 공용 스타일: 책상, 기록실, 화면 틀, 목록, 수첩, 보고서 */
:root{
  --desk:#1c1815;
  --paper:#ece2c6; --memo:#f3eee0; --sheet:#f4efe2; --sheet-ink:#2b2823;
  --kraft:#c6a26b; --kraft-deep:#a5834f; --kraft-ink:#2d2418;
  --rule:rgba(84,116,158,.32); --margin:rgba(196,106,96,.6);
  --ink:#26303f; --ink-soft:#586071; --pencil:#655f52; --red:#b0342a; --olive:#6f7f4d;
  --tag:#dfb64c;
  --card:#f6f0df; --card-ink:#2b2823; --card-soft:#6f6858;
  /* 글꼴 — 공통 여섯은 index.html 이 부르고, 나머지는 js/fonts.js 목록의 같은 키(--f-키 ↔ 키)로 사건을 열 때 부른다. docs/FONTS.md
   * 명조 줄 끝의 "Noto Serif KR" 은 한자 받침: 나눔명조·송명에 없는 한자만 채운다 (사건에 fonts:['hanja']). 일본 사건은 이미 부른 "Noto Serif JP"(jp)가 받는다 */
  /* 받침 글꼴: 나눔 글꼴에 없는 한자·가나·외국 글자(ö Å)·암호 기호는 그 사건을 열 때 부르는 Noto 가 받는다 (js/engine.js caseFonts) — 운영체제 글꼴로 떨어지지 않게 */
  --f-cjk:var(--l-cjk,)"Noto Sans KR","Noto Sans JP"; --f-sym:"Noto Sans Math","Noto Sans Symbols 2";
  --f-hand:var(--l-hand,)"Nanum Pen Script","Gaegu","East Sea Dokdo",var(--f-sym),cursive; /* 손글씨 글꼴에 없는 문장부호·기호(— · 「」 ※ ← ♡ …)는 붓펜 기호 조각(index.html)이 받는다 — 컴퓨터의 궁서로 떨어지지 않게 */
  --f-hand2:var(--l-hand2,)"Nanum Brush Script","Nanum Pen Script","East Sea Dokdo",var(--f-sym),cursive;
  --f-web:var(--l-sans,)"Nanum Gothic",var(--f-cjk),var(--f-sym),"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:var(--l-mono,)"Nanum Gothic Coding","M PLUS 1 Code",var(--f-cjk),var(--f-sym),ui-monospace,Consolas,monospace;
  --f-doc:var(--l-serif,)"Nanum Myeongjo","Noto Serif KR","Noto Serif JP",var(--f-sym),"AppleMyungjo","Batang",serif;
  --f-old:var(--l-old,)"Song Myung","Nanum Myeongjo","Noto Serif KR",serif;
  --f-type:var(--l-type,)"Special Elite","Nanum Gothic Coding",var(--f-cjk),var(--f-sym),monospace;
  --f-bhs:var(--l-heavy,)"Black Han Sans","Nanum Gothic",sans-serif;
  --f-latin:"Old Standard TT",var(--l-serif,)"Nanum Myeongjo","Noto Serif KR",var(--f-sym),serif;
  --f-frak:"UnifrakturMaguntia",var(--l-old,)"Old Standard TT",serif;
  --f-jp:var(--l-serif,)"Noto Serif JP","Nanum Myeongjo",serif;
  /* 시대 글꼴 (사건마다) */
  --f-batang:var(--l-old,)"Gowun Batang","Nanum Myeongjo","Noto Serif KR",serif;              /* 1945년 전 공문서·조서 본문 — 옛 책 같은 바탕 */
  --f-hanja:var(--l-serif,)"Noto Serif KR","Nanum Myeongjo",serif;                                /* 한자 받침 (위 명조 글꼴들의 끝자리) */
  --f-showa:var(--l-old,)"New Tegomin","Noto Serif JP","Nanum Myeongjo","Noto Serif KR",serif;  /* 쇼와 시대(1930~60년대) 일본 인쇄 명조 */
  --f-fude:var(--l-brush,)"Yuji Boku","Noto Serif JP","Song Myung","Noto Serif KR",serif;         /* 신문 제호 붓글씨 (한자·가나) */
  --f-kana:var(--l-mono,)"M PLUS 1 Code","Nanum Gothic Coding",ui-monospace,monospace;           /* 전보 가타카나 — 타전기 고딕 활자 */
  --f-dos:var(--l-pixel,)"NeoDunggeunmo","GalmuriMono11","Galmuri11","Nanum Gothic Coding",monospace; /* 1980~90년대 도스·워드프로세서 화면 (16px 배수로). 한자·가나·※ 는 갈무리가 받는다 */
  --f-dotprint:var(--l-pixel,)"GalmuriMono11","Galmuri11","GulimChe","Nanum Gothic Coding",monospace; /* 1990년대 도트 프린터 출력 (12px 배수로) */
  --f-pixel:var(--l-pixel,)"Galmuri11","Gulim","Dotum","Nanum Gothic",sans-serif;                /* 2000년대 굴림 비트맵 화면·폴더폰·삐삐 액정 (12px 배수로) */
  --f-sys:var(--l-sans,)"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo","Nanum Gothic",sans-serif; /* 2010~20년대 윈도·안드로이드·경찰 전산 (맑은 고딕 결) */
  --f-ui:var(--l-sans,)"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Nanum Gothic","Malgun Gothic",sans-serif; /* 2020년대 웹·앱 */
  --f-phone:var(--l-sans,)"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR","Nanum Gothic",sans-serif; /* 2020년대 스마트폰 메신저 */
  --f-gamja:var(--l-hand3,)"Gamja Flower","Nanum Pen Script","East Sea Dokdo",cursive;                             /* 2000년대 미니홈피 글꼴 아이템 */
  /* 쓴 사람마다 다른 필체 (문서 cls 의 f-키, css/skins.css) */
  --f-yeon:var(--l-hand2,)"Yeon Sung",var(--f-hand2); --f-dokdo:var(--l-hand2,)"Dokdo",var(--f-hand2); --f-gaegu:var(--l-hand3,)"Gaegu",var(--f-hand);
  --f-dohyeon:var(--l-heavy,)"Do Hyeon",var(--f-web); --f-melody:var(--l-hand3,)"Hi Melody",var(--f-hand);
  --f-poor:var(--l-hand3,)"Poor Story",var(--f-hand); --f-eastsea:var(--l-hand2,)"East Sea Dokdo",var(--f-hand2); --f-single:var(--l-hand3,)"Single Day",var(--f-hand); --f-cute:var(--l-hand3,)"Cute Font",var(--f-hand);
  /* 손으로 그은 체크 (보고서에서 고른 것 · 올린 표시) — 기호 글꼴 대신 */
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.4c1.4.9 2.4 2.1 3.2 3.6 1.8-4.2 4.3-7.3 7.6-9.3' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .035 0 0 0 0 .015 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;padding-inline:16px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:16px; /* 가로로 눕힌 휴대폰: 카메라 자리를 비켜서 */
  background-color:var(--desk);
  background-image:var(--desk-img,none),radial-gradient(ellipse at 28% 18%,#3a3029 0%,transparent 62%),radial-gradient(ellipse at 85% 95%,#2b231d 0%,transparent 55%),repeating-linear-gradient(91deg,rgba(255,255,255,.014) 0 2px,transparent 2px 9px);
  color:var(--ink);font-family:var(--f-web);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:anywhere; /* 한국어는 낱말 가운데서 줄을 바꾸지 않는다 ("부/두"). 한 줄에 안 들어가는 긴 낱말만 끊는다 */
}
td,th{overflow-wrap:break-word} /* 표 칸은 낱말 너비를 지킨다: anywhere 면 칸이 좁아져 "23:0/2" 처럼 끊긴다 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(0,0,0,.4) 100%)}
/* 종이 결: 곱하기 합성과 같은 어둡기를 보통 합성으로 (짙은 갈색 결 × .22) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:91;background-image:var(--grain);opacity:.22}
body[data-screen="cabinet"]{height:auto}
#app{height:100%}
body[data-screen="cabinet"] #app{height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
img{max-width:100%}

/* ───────── cabinet ───────── */
.cabinet{max-width:1180px;margin-inline:auto;padding-block:20px 48px;color:#e9dfc8}
.cab-top{display:grid;gap:4px;margin-bottom:28px}
.cab-kicker{margin:0;font:12px/1.4 var(--f-mono);letter-spacing:.14em;color:#a99a7e}
.cab-title{margin:0;font:400 clamp(40px,7vw,78px)/1 var(--f-type);letter-spacing:.02em;color:#efe4c9;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.cab-sub{margin:4px 0 0;font:700 16px/1.5 var(--f-doc);color:#cdbf9f}
.cab-stat{margin:10px 0 0;font:12.5px var(--f-type);color:#a99a7e}
.cab-stat b{color:#efe4c9;font-weight:700}
.cab-rate{margin:10px 0 0;max-width:640px;font:13px/1.6 var(--f-doc);color:#cdbf9f} /* 사건을 닫은 뒤 한 줄: 별점·댓글 부탁 */
.cab-rate a{color:#efe4c9;text-underline-offset:3px}
.cab-rate-x{margin:0 0 0 6px;padding:0 6px;background:none;border:0;color:#a99a7e;font:16px/1 var(--f-type);cursor:pointer;vertical-align:baseline}
.cab-rate-x:hover{color:#efe4c9}
.intro{position:relative;max-width:620px;margin:0 0 30px;padding:22px 24px 20px;transform:rotate(-.6deg);background-color:var(--memo);background-image:var(--noise);color:var(--sheet-ink);font:14.5px/1.75 var(--f-doc);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.intro p{margin:0 0 10px;text-wrap:pretty}
/* 자바스크립트가 꺼진 브라우저: 책상 위에 쪽지 한 장 (index.html noscript) */
.nojs{max-width:30em;margin:18vh auto 0;padding:18px 22px 16px;background-color:var(--paper);background-image:var(--noise);color:var(--ink);font:15px/1.7 var(--f-web);box-shadow:0 10px 26px rgba(0,0,0,.45);transform:rotate(-.6deg)}
.nojs.boot{font-family:'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif} /* 여는 중 쪽지: 글꼴을 받는 동안(최대 3초 글자를 숨긴다) 보이지 않는 일이 없게, 곧 사라질 쪽지라 컴퓨터 글꼴로 */
.intro-hand{font:24px/1.2 var(--f-hand)!important;color:var(--red)}
/* 근무 명부: 이 브라우저를 쓰는 수사관마다 서랍을 따로 둔다 */
.cab-top .snd.who{color:#efe4c9}
.roster{position:relative;max-width:560px;margin:0 0 30px;padding:18px 22px 14px;transform:rotate(.4deg);background-color:var(--card);background-image:var(--noise);color:var(--card-ink);border-top:5px solid var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.roster ::selection{background:rgba(255,212,84,.55);color:inherit}
.roster h2{margin:0;font:700 17px/1.4 var(--f-doc)}
.ro-sub{margin:0 0 8px;font:19px/1.25 var(--f-hand);color:var(--pencil)}
.ro-ask{margin:-2px 0 10px;font:20px/1.25 var(--f-hand);color:var(--red);transform:rotate(-.6deg)} /* 들어오자마자 묻는 한 줄 */
.roster ul{margin:0 0 12px;padding:0;list-style:none}
.roster li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--rule)}
.ro-me form{display:contents}
.ro-pick,.ro-me input{flex:0 1 9em;min-width:0;height:34px;padding:0 2px;border:0;border-radius:0;background:none;font:24px/34px var(--f-hand);color:var(--ink);text-align:left}
.ro-pick{cursor:pointer}
@media (hover:hover){.ro-pick:hover{color:var(--red)}}
.ro-me input{border-bottom:1px dashed rgba(84,64,40,.5)}
.ro-me input:focus{outline:0;border-bottom:1.5px solid var(--red)}
.ro-stat{font:11.5px var(--f-type);color:var(--card-soft)}
.ro-now{margin-left:auto;padding:1px 7px;border:2px solid var(--red);color:var(--red);font:800 12px/1.4 var(--f-doc);transform:rotate(-3deg)}
.roster li .reset{margin-left:auto}
.ro-new{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ro-new input{flex:1 1 9em;min-width:0;height:32px;padding:0 4px;border:0;border-bottom:1px solid rgba(84,64,40,.5);border-radius:0;background:transparent;font:21px/32px var(--f-hand);color:var(--ink)}
.ro-new input:focus{outline:0;border-bottom-color:var(--red)}
.drawer{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:26px 20px}
.folder{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0;border:0;background:none;text-align:left;cursor:pointer;transform:rotate(var(--tilt,0deg));transition:transform .2s ease}
.f-cover{position:absolute;top:-8px;right:12px;z-index:2;width:92px;height:68px;overflow:hidden;border:4px solid #f7f4ec;box-shadow:0 4px 10px rgba(0,0,0,.45);transform:rotate(5deg);background:#ddd}
.f-cover svg,.f-cover img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.25)}
.cab-hero{margin:-20px 0 18px;height:clamp(150px,min(28vw,30vh),340px);overflow:hidden;border-radius:4px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.cab-hero img{display:block;width:100%;height:100%;object-fit:cover}
.folder:focus-visible{transform:rotate(0deg) translateY(-4px)}
@media (hover:hover){.folder:hover{transform:rotate(0deg) translateY(-4px)}} /* 손가락으로 누른 뒤 폴더가 들린 채 남지 않게 */
.f-tab{margin-left:16px;padding:5px 12px 3px;border-radius:6px 6px 0 0;background-color:var(--kraft);background-image:var(--fiber);font:12px/1.2 var(--f-type);letter-spacing:.06em;color:var(--kraft-ink)}
.f-body{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;min-height:200px;padding:14px 16px 16px;border-radius:0 4px 4px 4px;background-color:var(--kraft);background-image:var(--fiber),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.08));color:var(--kraft-ink);box-shadow:0 14px 26px -10px rgba(0,0,0,.7),inset 0 0 30px rgba(90,60,20,.25)}
.folder.tutorial .f-tab,.folder.tutorial .f-body{background-color:#b8b09a}
.f-kind{font:11px/1.2 var(--f-type);letter-spacing:.08em;color:#4b3c24}
.f-cover~.f-body .f-kind{padding-right:94px} /* 표지 사진 밑으로 별이 숨지 않게: 길면 별이 다음 줄로 */
.f-label{display:flex;flex-direction:column;gap:2px;padding:9px 11px 8px;background-color:#f4efe2;background-image:var(--noise);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.f-title{font:800 18px/1.3 var(--f-doc);color:#1f1a14;text-wrap:balance}
.f-place{font:12px/1.4 var(--f-web);color:#5d5444}
.f-motif{font:18px/1.2 var(--f-hand);color:#3c3020}
.f-len{margin-top:auto;font:11px var(--f-type);color:#3f311c}
.f-stamp{position:absolute;right:12px;bottom:14px;padding:4px 10px;border:3px double var(--red);color:var(--red);font:800 17px/1 var(--f-doc);transform:rotate(-12deg);opacity:.88;mix-blend-mode:multiply}
.f-going{position:absolute;right:12px;bottom:12px;font:20px/1 var(--f-hand);color:var(--red);transform:rotate(-4deg)}
.f-going small{display:block;margin-top:3px;font-size:16px;text-align:right;color:#4a3f33}
.f-next{animation:write .9s .5s ease-out both}
@media (prefers-reduced-motion:reduce){.f-next{animation:none}}
.mbox{margin-top:40px;max-width:760px}
.mbox h2{margin:0;font:400 30px/1.1 var(--f-hand);color:#efe4c9}
.mbox-sub{margin:4px 0 12px;font-size:13px;color:#a99a7e}
.mbox ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mbox li{padding:10px 14px 8px;background-color:#e9dfc2;background-image:var(--noise);color:#5a2b1e;font:22px/1.25 var(--f-hand2);box-shadow:0 4px 10px rgba(0,0,0,.35);transform:rotate(-.4deg)}
.mbox li:nth-child(even){transform:rotate(.5deg)}
.mbox-case{display:inline-block;margin-right:8px;font:11px var(--f-type);color:#7a6a50;vertical-align:3px}
.m-letter{max-width:640px;margin-top:40px;padding:26px 28px;background-color:#efe6cf;background-image:var(--noise);color:#3a2418;font:24px/1.5 var(--f-hand2);box-shadow:0 14px 34px rgba(0,0,0,.5);transform:rotate(.4deg)}
.m-letter h3{margin:0 0 10px;font:700 16px var(--f-doc);color:#6d5a44}
.m-letter p{margin:0 0 10px}
.m-sig{text-align:right}
.m-who{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:18px;padding-top:14px;border-top:1px dashed rgba(58,36,24,.35)}
.m-who label{display:flex;flex-direction:column;gap:2px;flex:1 1 12em;min-width:0}
.m-who label span{font:700 13px/1.4 var(--f-doc);color:#6d5a44}
.m-who input{height:36px;padding:0 4px;border:0;border-bottom:1.5px solid rgba(58,36,24,.45);border-radius:0;background:transparent;font:26px/36px var(--f-hand2);color:#3a2418}
.m-who input:focus{outline:0;border-bottom-color:var(--red)}
.m-tried{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 18px;margin:-4px 0 0!important;font:24px/1.3 var(--f-hand2);color:rgba(58,36,24,.6)}
.m-hint{flex-basis:100%;margin:2px 0 0!important;font:20px/1.3 var(--f-hand);color:var(--pencil)}
.m-ps{margin-top:18px;padding-top:14px;border-top:1px dashed rgba(58,36,24,.35)}
.m-ps p:first-child{font-weight:700}
.m-ps.reveal{animation:m-ps-in 1.6s ease-out both}
@keyframes m-ps-in{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.m-ps.reveal{animation:none}}
.cab-foot{margin-top:48px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;font:11.5px/1.6 var(--f-mono);color:#8f8269}
.cab-foot p{margin:0;max-width:70ch}

/* ───────── case layout ───────── */
.case-view{height:100%;max-width:1580px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:24px}
.stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.stage-frame{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;container:stage / inline-size}
.src-tabs{flex:none;display:flex;gap:4px;overflow-x:auto;padding:0 10px}
/* 탭이 넘치는 좁은 화면: 가려진 탭이 남은 쪽 끝이 흐려진다 (js tabEdge). 종이 탭은 그대로 흐리고, 화면 속 탭 줄은 제 바탕색을 덮어 흐린다 */
.src-tabs.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.src-tabs.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.src-tabs.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px calc(100% - 40px),transparent)}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .src-tabs{-webkit-mask-image:none;mask-image:none}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .src-tabs::before,.case-view:is([data-frame="laptop"],[data-frame="crt"]) .src-tabs::after{content:"";position:sticky;z-index:1;flex:none;width:34px;pointer-events:none;opacity:0;transition:opacity .15s}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .src-tabs::before{order:-1;left:0;margin-right:-34px}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .src-tabs::after{right:0;margin-left:-34px}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .src-tabs.more-l::before,.case-view:is([data-frame="laptop"],[data-frame="crt"]) .src-tabs.more-r::after{opacity:1}
.case-view[data-frame="laptop"] .src-tabs::before{margin:-6px -38px 0 0;background:linear-gradient(90deg,#3a4960 20%,rgba(58,73,96,0))}
.case-view[data-frame="laptop"] .src-tabs::after{margin:-6px 0 0 -38px;background:linear-gradient(90deg,rgba(79,93,120,0),#4f5d78 80%)}
.case-view[data-frame="crt"] .src-tabs::before,.case-view[data-frame="crt"] .src-tabs::after{background:linear-gradient(180deg,#2d63c8,#1d4aa6)}
.case-view[data-frame="crt"] .src-tabs::before{margin:-4px -37px -4px 0;-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent);mask-image:linear-gradient(90deg,#000 20%,transparent)}
.case-view[data-frame="crt"] .src-tabs::after{margin:-4px 0 -4px -37px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 80%);mask-image:linear-gradient(90deg,transparent,#000 80%)}
.tab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 6px;border:0;background:none;cursor:pointer;white-space:nowrap}
.tab-lock{font:10px var(--f-mono);padding:1px 5px;border:1px solid currentColor;opacity:.7}
.tab-t{overflow:hidden;text-overflow:ellipsis}
.src-tabs.t0 .tab{padding-left:10px;padding-right:10px;letter-spacing:0}
.src-tabs.tcut .tab:not(.on) .tab-t{max-width:var(--tab-max,10.5em)}
.tab-new{flex:none;width:7px;height:7px;margin-left:-1px;border-radius:50%;background:var(--red);box-shadow:0 0 0 1.5px rgba(255,250,235,.55)} /* 새로 열린 자료가 있는 탭 (js renderTabs) */
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .tab-new{background:#e5483b;box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.tabs-new{position:absolute;top:var(--tabs-mid,18px);z-index:6;display:none;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 1.5px rgba(255,250,235,.6);pointer-events:none} /* 가려진 탭에 새 자료가 있을 때 그쪽 끝에 (js tabEdge) */
.tabs-new.l{left:3px}.tabs-new.r{right:3px}
.screen.new-l>.tabs-new.l,.screen.new-r>.tabs-new.r{display:block}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .tabs-new{background:#e5483b}
.stage-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(210px,300px) minmax(0,1fr)}
.pane-list{min-height:0;overflow:auto;padding:14px 12px 40px} /* 아래 여백: 비스듬한 증거철 꼬리표가 맨 끝 항목을 가리지 않게 (읽기 칸과 같은 40px) */
.pane-read{position:relative;min-height:0;overflow:auto;padding:18px 18px 40px}
.back-list{display:none;margin:0 0 12px;padding:6px 12px;border:1px solid rgba(0,0,0,.25);background:rgba(255,255,255,.6);font:13px var(--f-web);cursor:pointer}
@container stage (max-width:700px){
  .stage-body{grid-template-columns:minmax(0,1fr)}
  .stage-body.reading .pane-list{display:none}
  .stage-body:not(.reading) .pane-read{display:none}
  .back-list{display:inline-block}
  .pane-read{padding:12px 10px 32px}
}
.frame-foot{flex:none}
.cam{display:none}
.evtag{position:relative;align-self:flex-start;margin:-4px 0 0 28px;padding:8px 12px 8px 28px;max-width:calc(100% - 40px);transform:rotate(-2deg);border-radius:3px;background-color:var(--tag);background-image:var(--noise);color:#2d2512;font:11px/1.5 var(--f-type);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.evtag::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--desk);box-shadow:inset 0 0 0 2px #b2913b}
.evtag .kw{pointer-events:none;text-decoration:none}
@media (max-width:560px){.evtag{margin-top:10px;transform:rotate(-1deg)}} /* 폰: 꼬리표가 읽는 칸의 맨 아래 줄을 덮지 않게 */
@media (max-width:1099px){
  html,body{height:auto}
  #app{height:auto}
  .case-view{height:auto;grid-template-columns:minmax(0,1fr)}
  .stage{height:600px;height:max(min(600px,calc(100svh - 24px)),84svh)} /* 작은 휴대폰(높이 640 안팎)에서는 화면을 넘지 않게 */
  /* 수첩이 화면 밑으로 내려가면 보고서·「짚어 보기」를 사건 개요 바로 밑으로 — 메모가 쌓이면 맨 끝까지 열 번 넘게 밀어 내려야 했다 */
  .nb{display:flex;flex-direction:column}
  .nb>*{order:2}
  .nb>.nb-rings,.nb>.nb-top,.nb>.brief{order:0}
  .nb>.nb-rep{order:1}
}
/* 가로로 눕힌 휴대폰·태블릿: 수사 화면이 화면 높이를 넘지 않게 (한눈에 들어오고, 그 밑의 수첩으로 내려가기 쉽게) */
@media (max-width:1099px) and (orientation:landscape){ .stage{height:max(320px,calc(100svh - 24px))} }

/* frame: papers (default) — 크라프트 서류철 */
.case-view[data-frame="papers"] .stage-frame{padding-top:10px;border-radius:6px;background-color:var(--kraft-deep);background-image:var(--fiber),linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12));box-shadow:0 30px 60px -24px rgba(0,0,0,.85),inset 0 0 50px rgba(60,35,10,.35)}
.case-view[data-frame="papers"] .tab{border-radius:7px 7px 0 0;background-color:var(--tab-bg,#dccaa0);background-image:var(--fiber);color:var(--tab-ink,#2d2418);font:12.5px/1.2 var(--f-mono);letter-spacing:.03em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.case-view[data-frame="papers"] .tab.on{background-color:var(--tab-on,#efe3c3);box-shadow:none}
.case-view[data-frame="papers"] .stage-body{background-color:var(--tab-on,#efe3c3);background-image:var(--fiber);border-radius:0 0 6px 6px}
.case-view[data-frame="papers"] .pane-list{border-right:1px dashed rgba(60,45,20,.3)}
/* 종이 기록철의 목록은 색인 카드: 제목은 명조로, 날짜·번호는 타자로 */
.case-view[data-frame="papers"] .item-t{font-family:var(--f-doc)}
.case-view[data-frame="papers"] .item-m{font-family:var(--f-type)}

/* frame: laptop — 2020년대 노트북 */
.case-view[data-frame="laptop"] .stage-frame{padding:20px 18px 8px;border-radius:18px 18px 8px 8px;background:linear-gradient(180deg,#303033,#1d1d1f);box-shadow:0 34px 60px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.6)}
.case-view[data-frame="laptop"] .cam{display:block;position:absolute;top:7px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#0b0b0c;box-shadow:0 0 0 2px #29292b}
.case-view[data-frame="laptop"] .screen{overflow:hidden;border-radius:3px;background:#d4cab1;box-shadow:inset 0 0 0 2px #0b0b0c}
.case-view[data-frame="laptop"] .screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(46,28,6,.26) 100%),linear-gradient(rgba(176,128,52,.07),rgba(176,128,52,.07))}
.case-view[data-frame="laptop"] .src-tabs{padding:6px 6px 0;background:linear-gradient(90deg,#3a4960,#4f5d78)}
.case-view[data-frame="laptop"] .tab{border-radius:6px 6px 0 0;background:rgba(255,255,255,.14);color:#eef0f3;font:12px/1.2 var(--f-web)}
.case-view[data-frame="laptop"] .tab.on{background:#f8f5ee;color:#222}
.case-view[data-frame="laptop"] .stage-body{background:#f8f5ee;color:#262521}
.case-view[data-frame="laptop"] .pane-list{background:#efeadd;border-right:1px solid #d6cdb8}
/* 노트북 화면 속 글자는 2020년대 웹 글꼴: --f-web 을 화면 안에서만 --f-ui 로 바꾼다 (사건이 fonts:['ui'] 로 부른다. 수첩·꼬리표는 화면 밖이라 그대로).
 * 다른 시대 노트북이면 사건 css 에서 [data-case="cNN"][data-frame="laptop"] .screen{--f-web:…} 로 다시 바꾼다 (c10) */
.case-view[data-frame="laptop"] .screen{--f-web:var(--f-ui)}
.case-view[data-frame="laptop"] .frame-foot{height:16px;margin-inline:-2.5%;border-radius:2px 2px 14px 14px;background:linear-gradient(180deg,#3d3d40,#232325 60%,#151516)}

/* frame: crt — 2000년대 CRT 모니터 */
.case-view[data-frame="crt"] .stage-frame{padding:24px 26px 30px;border-radius:20px;background:linear-gradient(180deg,#e2dbc7,#c9c0a8);box-shadow:0 30px 60px -24px rgba(0,0,0,.85),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.15)}
.case-view[data-frame="crt"] .screen{overflow:hidden;border-radius:16px/20px;background:#eef1f6;box-shadow:inset 0 0 0 3px #3a3a36,inset 0 0 50px rgba(0,0,0,.35)}
.case-view[data-frame="crt"] .screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.12),transparent 55%),radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.35) 100%)}
.case-view[data-frame="crt"] .src-tabs{padding:4px 6px;background:linear-gradient(180deg,#2d63c8,#1d4aa6);gap:3px}
.case-view[data-frame="crt"] .tab{border-radius:3px;background:linear-gradient(180deg,#4b84e0,#2c62c4);color:#fff;font:12px/1.2 var(--f-web);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.case-view[data-frame="crt"] .tab.on{background:linear-gradient(180deg,#1b3f8f,#16347a);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.case-view[data-frame="crt"] .stage-body{color:#222}
/* 화면 아래 시계 줄 (js clockBar) */
.scr-bar{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:10px;height:22px;padding:0 12px;font:11px/1 var(--f-web);letter-spacing:.02em;white-space:pre;user-select:none}
.scr-bar svg{width:32px;height:12px}
.case-view[data-frame="laptop"] .scr-bar{background:rgba(22,26,34,.94);color:#cdd5e1}
.case-view[data-frame="crt"] .scr-bar{height:24px;padding:0 6px;background:#d6d2c8;border-top:1px solid #f4f2ec;color:#161616}
.case-view[data-frame="crt"] .scr-clock{padding:3px 8px;border:1px solid;border-color:#8c8a84 #fbfaf6 #fbfaf6 #8c8a84}
.case-view[data-frame="crt"] .pane-list{background:#dfe6f2;border-right:1px solid #b9c4d8}
.case-view[data-frame="crt"] .frame-foot{width:34%;height:22px;margin:0 auto;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#bdb49b,#a39a81)}

/* ───────── list pane ───────── */
.src-desc{margin:0 0 12px;font:13px/1.6 var(--f-web);color:inherit;opacity:.85}
.item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0 0 8px;padding:9px 26px 9px 12px;border:0;border-radius:2px;background-color:var(--card);color:var(--card-ink);text-align:left;font:13.5px/1.4 var(--f-web);box-shadow:0 1px 2px rgba(0,0,0,.2);cursor:pointer}
@media (hover:hover){.item:hover{background-color:#fffaf0}}
.item.on{box-shadow:0 0 0 2px var(--red),0 1px 2px rgba(0,0,0,.2)}
.item.new::after{content:"";position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.item-t{font-weight:700;text-wrap:pretty}
.item-m{font:11.5px/1.4 var(--f-mono);color:var(--card-soft)}
.item.person{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
.item.person .ava,.item.person .per-art{grid-row:span 2}
.res-n{margin:14px 0 6px;font:11.5px var(--f-mono);letter-spacing:.04em;opacity:.75}
.res-none{margin:10px 0;font:20px/1.3 var(--f-hand);color:var(--pencil)}
.arch-f{display:flex;margin:0 0 8px;border:2px solid var(--arch-line,#5a4a2e);background:#fffdf7}
.arch-f input{flex:1;min-width:0;padding:8px 10px;border:0;background:transparent;font:14px var(--f-web);color:#222;outline:none;text-overflow:ellipsis}
.case-view input[placeholder]{text-overflow:ellipsis} /* 긴 안내 글(독일어·러시아어)이 낱말 중간에서 잘리지 않게 */
.arch-f button{padding:0 14px;border:0;background:var(--arch-line,#5a4a2e);color:#fff;font:700 13px var(--f-web);cursor:pointer}
.chips-t{margin:10px 0 4px;font:11px var(--f-mono);opacity:.7}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 10px}
/* 좁은 화면: 단어가 서른, 마흔 개로 늘면 칩 더미가 검색 결과와 대답을 화면 밖으로 밀어낸다 — 칩 칸은 제 안에서 굴리고, 찾은 결과는 검색창 바로 밑에 */
@container stage (max-width:700px){
  .chips{max-height:min(196px,34svh);overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 6px;box-shadow:inset 0 -10px 8px -10px rgba(0,0,0,.25)}
  .arch:has(>.res:empty):not(:has(>.res-n))>.chips{max-height:min(440px,58svh)} /* 아직 찾은 게 없으면 칩 칸이 빈 종이 대신 자리를 쓴다 */
  .per-ask .chips{max-height:min(360px,54svh)} /* 탐문: 대답은 칩 위에 쌓이니 칩 칸을 더 길게 — 아래 빈 종이 대신 */
  .arch{display:flex;flex-direction:column}
  .arch>*{order:3}
  .arch>.arch-f{order:0}
  .arch>.res:not(:empty){order:1;margin-bottom:12px}
}
.chip{padding:3px 9px 1px;border:1px dashed #8e7f5c;border-radius:2px;background:#f4ebc6;color:var(--ink);font:17px/1.15 var(--f-hand);cursor:pointer}
@media (hover:hover){.chip:hover{background:#efe1a8}}
.chip.done{opacity:.72;border-style:solid;border-color:transparent;background:#e7dcb8}
.chip.again{border-style:solid;border-color:var(--red);color:var(--red);opacity:1}
.ava{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--c,#6b6155);color:#fff;font:700 14px/1 var(--f-web)}
.ava.lg{width:64px;height:64px;font-size:24px}
.per-art{display:block;width:40px;height:40px;overflow:hidden;border-radius:50%;background:#ddd}
.per-art.lg{width:78px;height:78px;border-radius:4px}
.per-art svg,.per-art img{display:block;width:100%;height:100%;object-fit:cover}
.map{position:relative;margin:0 0 12px;border:1px solid rgba(0,0,0,.25);background:#e8e0c8}
.map>svg,.map>img{display:block;width:100%;height:auto}
.spot{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:22px;height:22px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--red);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer}
.spot span{position:absolute;top:24px;left:50%;transform:translateX(-50%);padding:1px 6px;background:rgba(255,253,245,.92);color:#222;font:11px/1.3 var(--f-web);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.spot.at-l span{left:-2px;transform:none}.spot.at-r span{left:auto;right:-2px;transform:none} /* 지도 가장자리의 점은 이름표를 안쪽으로 편다 (좁은 화면에서 잘리지 않게) */

/* ───────── read pane ───────── */
.read-empty{display:grid;place-items:center;min-height:60%;padding:30px;text-align:center}
.read-empty p{max-width:30ch;font:22px/1.35 var(--f-hand);color:var(--pencil)}
.doc{max-width:760px;margin:0 auto 24px}
.nw{white-space:nowrap}.nw>.kw{white-space:normal} /* 단어와 붙은 괄호·따옴표는 떨어지지 않되, 여러 낱말 단어 자체는 좁은 화면에서 줄을 바꿀 수 있게 */
.kw{display:inline;margin:0;padding:0 1px;border:0;border-radius:2px;background:none;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
@media (hover:hover){.kw:hover{background:rgba(223,182,76,.38)}}
.kw.on{text-decoration-style:solid;text-decoration-color:rgba(176,52,42,.6)}
.pin{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:6px;padding:0;vertical-align:-4px;border:1px dashed rgba(90,80,60,.5);border-radius:50%;background:rgba(255,255,255,.4);color:#5a5040;font:13px/1 var(--f-web);opacity:.45;cursor:pointer;transition:opacity .15s}
@media (hover:hover){.b-p:hover .pin,.b-say:hover .pin,.b-msg:hover .pin,tr:hover .pin,li:hover>.pin,figcaption:hover .pin{opacity:1}} /* 손가락으로 누른 뒤 밝은 채 남지 않게 */
.pin:focus-visible,.pin.on{opacity:1}
@media (hover:hover){.pin:hover{background:#f4ebc6}}
.pin.on{border-style:solid;border-color:var(--olive);color:var(--olive);background:transparent}
.pin .ic{display:block;width:12px;height:12px}
.item-t .ic,.ic-in .ic{display:inline-block;width:.95em;height:.95em;vertical-align:-.12em}
@media (hover:none){.pin{opacity:.8}}
article.person{max-width:720px;margin:0 auto} /* 탐문 화면 — 목록의 사람 카드(.item.person)는 다른 카드처럼 사이를 띄운다 */
.per-h{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.per-h h3{margin:0;font:800 18px/1.3 var(--f-doc)}
.per-h p{margin:2px 0 0;font-size:13px;opacity:.8}
.per-w{font:12px/1.45 var(--f-mono)!important}
.per-tr{padding:14px 16px;background-color:var(--sheet);background-image:var(--noise);color:var(--sheet-ink);font:14px/1.75 var(--f-web);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.per-tr .b-p{margin:0 0 10px}
.qa{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(60,50,30,.3)}
.q{margin:0 0 6px;font:20px/1.3 var(--f-hand);color:var(--ink)}
.per-ask{margin-top:14px}
.per-ask-t{margin:0;font:22px/1.2 var(--f-hand);color:inherit}
.per-ask-t small{font:11px/1.4 var(--f-mono);opacity:.7}
.lock{max-width:420px;margin:24px auto;padding:22px 20px;text-align:center;background-color:var(--sheet);background-image:var(--noise);color:var(--sheet-ink);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.lock-t{margin:0 0 6px;font:800 17px var(--f-doc)}
.lock-d{margin:0 0 12px;font-size:13px}
.lock-f{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.lock-f label{width:100%;font:11.5px var(--f-mono);text-align:left}
.lock-f input{flex:1;min-width:0;padding:8px 10px;border:1px solid #9a8e74;background:#fff;font:14px var(--f-mono)}
.lock-f button{padding:0 16px;border:0;background:#3b3a36;color:#fff;font:700 13px var(--f-web);cursor:pointer}
.lock-h{margin:10px 0 0;font-size:12.5px;color:#5d5444}
.lock-e{min-height:1.4em;margin:6px 0 0;font-size:12.5px;color:var(--red)}
.lock-h2{margin:4px 0 0;font:20px/1.2 var(--f-hand);color:var(--ink)}
.c-grid{margin:14px 0;padding:14px;background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.2)}
.c-line{display:flex;flex-wrap:wrap;gap:2px 14px}.c-line+.c-line{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(0,0,0,.12)}
.c-word{display:inline-flex;gap:2px}
.cc{display:inline-flex;flex-direction:column;align-items:center;min-width:24px;font:18px/1.2 var(--f-mono)}
.cc b{font-weight:400}
.cc i{font:15px/1.2 var(--f-hand);font-style:normal;color:var(--pencil)}
.cc.has i{color:var(--red)}
.cc i,.ck input{text-transform:uppercase} /* 해독지에는 대문자로 적는다: 휴대폰에서 소문자로 쳐도 주어진 글자(M·V·F)와 나란히 */
.cc.sp{min-width:10px}
.cc.hl{background:rgba(255,212,84,.45);border-radius:2px;box-shadow:0 0 0 1px rgba(255,212,84,.45)} /* 글자를 넣는 기호가 암호문 어디에 있는지 */
.ck:focus-within{border-color:rgba(0,0,0,.5);background:rgba(255,236,170,.6)}
.c-keys{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.ck{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid rgba(0,0,0,.25);background:rgba(255,255,255,.6)}
.ck span{font:18px var(--f-mono);min-width:18px;text-align:center}
.ck input{width:3.2em;padding:3px 4px;border:0;border-bottom:1px solid #777;background:transparent;font:18px var(--f-hand);text-align:center}
.c-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.c-act button{padding:6px 14px;border:0;background:#3b3a36;color:#fff;font:700 13px var(--f-web);cursor:pointer}
.c-msg{font:19px var(--f-hand);color:var(--red)}
.c-msg.again{animation:write .5s ease-out both} /* 다시 맞춰 볼 때마다 연필로 새로 적는다 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .c-msg.again{animation:msgIn .25s ease-out both}
@keyframes msgIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.c-msg.again{animation:none!important}}
.c-done{margin-top:10px}

/* ───────── notebook ───────── */
.nb{position:relative;min-height:0;overflow:auto;border-radius:4px 10px 10px 4px;background-color:var(--paper);background-image:var(--noise),var(--paper-img,none),radial-gradient(circle at 90% 4%,transparent 0 30px,rgba(140,95,40,.2) 31px 34px,transparent 36px),linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%,rgba(120,85,30,.12));box-shadow:0 34px 60px -22px rgba(0,0,0,.8),inset 0 0 70px rgba(140,100,40,.28);color:var(--ink)}
.nb-rings{height:24px;background:radial-gradient(circle at 11px 12px,var(--desk) 0 4.5px,rgba(0,0,0,.25) 5.5px,transparent 6.5px) 6px 0/24px 24px repeat-x;border-bottom:1px solid rgba(120,90,40,.25)}
.nb-top{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px 4px}
.nb-back{padding:4px 10px 2px;border:1px solid rgba(60,50,30,.35);background:transparent;font:18px/1.1 var(--f-hand);cursor:pointer}
@media (hover:hover){.nb-back:hover{background:rgba(255,255,255,.4)}}
.nb-case{font:11px var(--f-type);letter-spacing:.08em;color:var(--pencil)}
.brief{position:relative;margin:10px 14px 20px;padding:18px 16px 14px;transform:rotate(-.5deg);background-color:var(--memo);background-image:var(--noise);color:#2d2a25;font:12.5px/1.65 var(--f-type);box-shadow:0 2px 7px rgba(60,40,10,.28)}
.clip{position:absolute;top:-14px;left:18px;width:18px;height:48px}
.brief h2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #b9ae97;font:800 17px/1.3 var(--f-doc);text-wrap:balance}
.brief h2 small{font:11px var(--f-mono);color:#6a6254}
.brief dl{display:grid;grid-template-columns:fit-content(9em) minmax(0,1fr);gap:3px 10px;margin:0} /* 칸 이름이 긴 언어(Examination · Beschlagnahmt)는 그만큼 넓게 */
.brief dt{min-width:4.8em;color:#6a6254;-webkit-hyphens:auto;hyphens:auto}
.brief dd{margin:0}
.scrawl{margin:10px 0 0;transform:rotate(-2deg);font:23px/1.15 var(--f-hand);color:var(--red)}
.ruled{position:relative;padding:0 16px 32px 52px;font:21px/32px var(--f-hand);background-image:linear-gradient(90deg,transparent 40px,var(--margin) 40px 41px,transparent 41px),repeating-linear-gradient(180deg,transparent 0 25px,var(--rule) 25px 26px,transparent 26px 32px)}
.hh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;font:400 28px/32px var(--f-hand)}
.hh small{font-size:19px;color:var(--pencil)}
.kg{margin:0}
.kg-t{color:var(--pencil);font-size:17px}
.kchip{display:inline;margin:0;padding:0 2px;border:0;background:none;color:var(--ink);font:21px/32px var(--f-hand);text-decoration:underline;text-decoration-color:rgba(38,48,63,.35);text-underline-offset:4px;cursor:pointer}
@media (hover:hover){.kchip:hover{color:var(--red)}}
.notes{list-style:none;margin:0;padding:0}
.notes li{position:relative;padding-right:22px;transform:rotate(var(--r,0deg))}
.notes li.tip{color:var(--ink-soft)}
.notes .n{color:var(--pencil)}
.notes .src{color:var(--pencil);font-size:16px}
.notes .del{position:absolute;right:0;top:4px;width:20px;height:20px;padding:0;border:0;background:none;color:var(--pencil);font:16px/1 var(--f-web);opacity:.5;cursor:pointer}
@media (hover:hover){.notes li:hover .del{opacity:1}}
.notes .del:focus-visible{opacity:1}
.n-rep{display:inline-block;min-width:1.35em;margin-left:6px;padding:1px 5px 0;border:1.5px solid rgba(176,52,42,.75);border-radius:50%;color:var(--red);font:19px/1.1 var(--f-hand);white-space:nowrap;text-align:center;vertical-align:1px;transform:rotate(-8deg)} /* 보고서에 붙인 메모: 빨간 연필로 친 주장 번호 동그라미 */
.notes li.arm{background:rgba(176,52,42,.08)} /* 보고서에 붙인 메모의 × 를 한 번 누른 때: 한 번 더 누르면 지워진다 */
.notes li.arm .del{opacity:1;color:var(--red)}
.notes li.fresh,.kchip.fresh{animation:write .9s ease-out both}
.notes li.again,.kchip.again{animation:noteAgain 1.4s ease-out} /* 이미 적은 줄을 다시 눌렀을 때: 형광펜이 한 번 지나간다 */
.kw.hitw{animation:noteAgain 2.6s .25s ease-out} /* 검색 결과에서 연 문서: 찾은 말 위로 형광펜이 한 번 */
@keyframes noteAgain{0%,35%{background:rgba(255,212,84,.5)}100%{background:transparent}}
.notes li.gone{pointer-events:none;text-decoration:line-through 2px var(--pencil);animation:strikeOut .42s ease-in both}
@keyframes strikeOut{0%{text-decoration-color:transparent}40%{text-decoration-color:var(--pencil);opacity:1}100%{text-decoration-color:var(--pencil);opacity:0}}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.nb-rep form p{margin:0}
.nb-rep .no{color:var(--pencil)}
.claim label{cursor:default}
.blank{max-width:100%;height:28px;padding:0 2px;border:0;border-bottom:2px dashed rgba(38,48,63,.5);border-radius:0;background:transparent;color:var(--ink);font:20px/1 var(--f-hand);cursor:pointer}
.blank.wide{width:100%}
.blank option{font-family:var(--f-web);font-size:14px}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;min-height:32px;margin-top:4px!important}
.btn-hand{height:30px;padding:0 16px;border:0;border-radius:2px;background:var(--ink);color:var(--paper);font:21px/30px var(--f-hand);transform:rotate(-1deg);cursor:pointer}
@media (hover:hover){.btn-hand:hover{background:#34405a}}
.tries{font-size:17px;color:var(--pencil)}
.verdict{margin:0;min-height:32px;color:var(--red)}
/* 막혔을 때 짚어 보기: 연필로 흐리게 적어 둔 한 줄 (보고서 칸 밑) */
.nudge-btn,.nudge-more,.nudge-go{padding:0;border:0;background:none;color:var(--pencil);font:19px/32px var(--f-hand);text-decoration:underline dashed rgba(101,95,82,.55);text-underline-offset:5px;cursor:pointer}
@media (hover:hover){.nudge-btn:hover,.nudge-more:hover,.nudge-go:hover{color:var(--ink)}}
.nudge{margin:0 0 2px;padding-left:12px;border-left:2px solid rgba(101,95,82,.3)}
.nudge p{margin:0;animation:write .9s ease-out both}
.nudge-a{color:var(--ink-soft)}
.nudge-b{color:var(--ink)}
.nudge-go{margin-left:4px;font-size:17px}
@media (prefers-reduced-motion:reduce){.nudge p{animation:none}}
.stamp{position:relative;float:right;margin:6px 2px 8px 12px;display:grid;place-items:center;width:112px;height:112px;border:4px double var(--red);border-radius:50%;color:var(--red);font:800 19px/1.15 var(--f-doc);text-align:center;opacity:.82;mix-blend-mode:multiply;transform:rotate(-14deg)}
.stamp.fresh{animation:stamp .38s cubic-bezier(.2,1.5,.45,1) both}
.stamp small{display:block;margin-top:4px;font:10px var(--f-mono)}
@media (max-width:560px){.stamp{float:none;margin:0 4px 10px auto;width:96px;height:96px;font-size:16px}} /* 폰: 도장이 결말 글을 한 줄에 예닐곱 자로 몰아넣지 않게 — 도장은 제 줄에, 글은 온 폭으로 */
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(2.2)}to{opacity:.82;transform:rotate(-14deg) scale(1)}}
.epi .b-p,.epi p{margin:0;font-size:19px}
.epi .b-p+.b-p,.epi p+p{margin-top:.6em}
.epi-share{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 10px} /* 종결 뒤 결과 옮겨 적기 */
.epi-rate{margin:0 0 12px;font:13px/1.5 var(--f-web);color:var(--ink-soft)}.epi-rate a{color:#b0342a;text-decoration:underline;text-underline-offset:3px}
.epi-sh{font:12.5px var(--f-type);letter-spacing:.03em;color:var(--ink-soft);background:none;border:1px solid rgba(38,48,63,.35);border-radius:3px;padding:4px 10px;cursor:pointer;text-decoration:none}
.epi-sh:hover{color:var(--ink);border-color:var(--ink)}
.epi-next{margin:0 0 64px;color:var(--red)} /* 아래 여백: 끝까지 내리면 「사건 종결」 자막이 이 줄을 가리지 않는다 */
.epi-go{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.epi-go:hover{text-decoration-style:solid}
.nb-foot{padding:14px 16px 20px;border-top:1px dashed rgba(120,90,40,.35);font:11px/1.6 var(--f-mono);color:#6d6552}
.nb-foot p{margin:6px 0 0}
.reset{padding:4px 10px;border:1px solid #a89b78;background:transparent;font:11px var(--f-mono);color:inherit;cursor:pointer}
.reset.arm{border-color:var(--red);color:var(--red)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:95;max-width:calc(100vw - 32px);padding:9px 16px 7px;transform:translate(-50%,10px) rotate(-1deg);opacity:0;pointer-events:none;background-color:var(--paper);background-image:var(--noise);color:var(--ink);font:21px/1.1 var(--f-hand);box-shadow:0 8px 20px rgba(0,0,0,.45);transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0) rotate(-1deg)}

@media (prefers-reduced-motion:reduce){
  .notes li.fresh,.kchip.fresh,.stamp.fresh,.notes li.again,.kchip.again,.kw.hitw{animation:none}
  .toast,.folder{transition:none}
}

.snd{padding:3px 9px;border:1px solid currentColor;border-radius:2px;background:transparent;font:11px var(--f-mono);letter-spacing:.04em;opacity:.7;cursor:pointer}
.snd[aria-pressed="true"]{opacity:1}@media (hover:hover){.snd:hover{opacity:1}}
.cab-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0}
.cab-top .snd{margin:0;color:#cdbf9f}
/* 언어 고르기: 다른 단추처럼 보이는 선택 칸 (펼친 목록은 밝은 종이에 짙은 글자) */
.snd.lang{position:relative;display:inline-block;padding:0;opacity:.8}
.snd.lang select{-webkit-appearance:none;appearance:none;margin:0;padding:3px 20px 3px 9px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
.snd.lang::after{content:"";position:absolute;right:8px;top:50%;width:5px;height:5px;margin-top:-4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
.snd.lang option{color:#1d1f22;background:#f4efe2}
.snd.lang:focus-within{opacity:1;outline:2px solid currentColor;outline-offset:2px}
.nb-case .snd{margin-right:6px;color:var(--pencil)}

/* ── 난이도 별 · 혐오감 주의 */
.stars{display:inline-block;margin-left:4px;color:#8a5a12;font:13px/1 var(--f-web);letter-spacing:.02em;vertical-align:1px}
.stars i{font-style:normal;opacity:.28}
.stars.red{color:var(--red)}
.stars.red i{color:#8a5a12}
.stars.t{padding:1px 6px;border:1px solid currentColor;border-radius:2px;font:10px/1.3 var(--f-mono);letter-spacing:.1em}
.nb-case .stars{margin:0 6px 0 0}
.f-cover.graphic img,.f-cover.graphic svg{filter:sepia(.25) blur(1.5px) brightness(.8)}
.f-warn{position:absolute;top:30px;right:4px;z-index:4;max-width:104px;padding:4px 8px 3px;text-align:center;line-height:1.15!important;border:2px solid #fff;background:var(--warn-img,none) center/cover,var(--red);color:#fff;font:800 12px/1 var(--f-web);letter-spacing:.06em;box-shadow:0 2px 6px rgba(0,0,0,.5);transform:rotate(-6deg)}
.has-warn .f-warn{border:0;background-size:100% 100%;padding:6px 10px 5px;background-color:transparent;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.cw{display:grid;place-items:center;min-height:80svh}
.cw-card{max-width:520px;padding:28px 28px 22px;background-color:var(--paper);background-image:var(--paper-img,none),var(--noise);color:var(--sheet-ink);box-shadow:0 20px 40px -12px rgba(0,0,0,.8);border-top:6px solid var(--red)}
.cw-t{display:inline-block;margin:0 0 10px;padding:4px 10px 3px;border:3px double var(--red);color:var(--red);font:800 18px/1 var(--f-doc);transform:rotate(-3deg)}
.cw-card h2{margin:0 0 12px;font:700 20px/1.35 var(--f-doc)}
.cw-card p{margin:0 0 10px}
.cw-s{font:19px/1.3 var(--f-hand);color:var(--pencil)}
.cw-b{display:flex;gap:12px;align-items:center;margin-top:16px!important}

/* ── 사건 재구성 */
.tl{list-style:none;margin:12px 0;padding:0;counter-reset:tl}
.tl-e{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:8px 10px;background:#fbf6e6;border:1px solid rgba(0,0,0,.14);border-left:4px solid #b9a77a;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tl-e.hit{border-left-color:var(--olive)}
.tl-e.ok{border-left-color:var(--olive);background:#f1f3e2}
.tl-slot{flex:0 0 auto;min-width:3.4em;font:12px/1.3 var(--f-mono);color:var(--ink-soft)}
.tl-t{flex:1 1 auto;font:14px/1.5 var(--f-doc)}
.tl-mv{display:flex;flex-direction:column;gap:2px}
.tl-mv button{width:28px;height:20px;padding:0;border:1px solid #9d8f6c;background:#f4ebc6;color:var(--ink);font:10px/1 var(--f-web);cursor:pointer}
.tl-mv button:disabled{opacity:.3;cursor:default}

/* ── 대조 감정 */
.cmp-ev{margin:10px 0;padding:10px 12px;background:#fff9e8;border:1px dashed #8e7f5c}
.cmp-lab{margin:0 0 6px;font:11px/1.45 var(--f-mono);letter-spacing:.1em;color:var(--red)}
.cmp-q{margin:12px 0 8px;font:21px/1.2 var(--f-hand);color:var(--ink)}
.cmp-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cmp-o{display:flex;flex-direction:column;gap:6px;padding:10px;background:#fbf6e6;border:1px solid rgba(0,0,0,.16)}
.cmp-o.no{opacity:.45;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(176,52,42,.08) 8px 10px),#f1ead4}
.cmp-o.ok{border:2px solid var(--olive);background:#f1f3e2}
.cmp-art svg,.cmp-art img{display:block;width:100%;height:auto;max-height:160px;object-fit:contain}
.cmp-art .art-wrap{width:fit-content;max-width:100%;margin:0 auto}.cmp-art .art-wrap>img{width:auto;max-width:100%} /* 이름표가 얹힌 그림: 틀을 그림 크기에 맞춰야 이름표가 제자리에 */
.cmp-n{margin:0;font:700 13px/1.4 var(--f-web)}
.cmp-d{margin:0;font:13px/1.5 var(--f-doc)}
.cmp-o button{margin-top:auto;padding:5px 10px;border:0;background:#3b3a36;color:#fff;font:700 12px var(--f-web);cursor:pointer}
.cmp-o button:disabled{opacity:.35;cursor:not-allowed}

/* ── 기록 조회 */
.q-f{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:10px;background:rgba(255,255,255,.35);border:1px solid rgba(0,0,0,.14)}
.qf{display:flex;flex-direction:column;gap:2px;font:11px var(--f-mono);letter-spacing:.06em;color:var(--ink-soft)}
.qf input{width:100%;padding:6px 8px;border:1px solid #8e7f5c;background:#fffdf5;color:var(--ink);font:14px var(--f-mono)}
.q-f button{align-self:flex-start;padding:6px 16px;border:0;background:#3b3a36;color:#fff;font:700 13px var(--f-web);cursor:pointer}

/* ── 정밀 관찰 */
.ph{position:relative;margin:10px 0 6px;border:6px solid #f7f4ec;box-shadow:0 3px 10px rgba(0,0,0,.35);background:#ddd;cursor:zoom-in;overflow:hidden;user-select:none}
.ph>svg,.ph>img{display:block;width:100%;height:auto}
.ph-mk{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--red);border-radius:50%;color:var(--red);font:800 13px/1 var(--f-web);background:rgba(255,255,255,.35);pointer-events:none}
.ph-miss{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid rgba(40,40,40,.6);border-radius:50%;pointer-events:none;animation:phmiss .7s ease-out forwards}
@keyframes phmiss{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.ph-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
.ph-grid[hidden]{display:none}
.ph-cell{border:1px dashed rgba(255,255,255,.55);background:rgba(0,0,0,.06);cursor:pointer}
@media (hover:hover){.ph-cell:hover{background:rgba(255,255,255,.18)}}
.ph-cell:focus-visible{background:rgba(255,255,255,.18)}
.ph-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px;font:12px var(--f-mono);color:var(--ink-soft)}
.ph-bar button{padding:3px 8px;border:1px dashed #8e7f5c;background:rgba(244,235,198,.55);color:var(--ink);font:12px var(--f-type);letter-spacing:.04em;cursor:pointer} /* 종이 위 단추: 타자 글씨로 */
.ph-found{margin:0;padding-left:1.4em}
.ph-found li{margin:0 0 8px}
.ph-found li.fresh{animation:write .5s ease-out}
.ph-l{margin:0 0 2px;font:700 13px var(--f-web);color:var(--red)}
.ph-mk.again{animation:phAgain .6s ease-out} /* 이미 찾은 자리를 다시 눌렀을 때 */
@keyframes phAgain{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.35)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.ph-miss,.ph-found li.fresh,.ph-mk.again{animation:none}}

/* ── 혐오감 주의 사건: 마른 핏자국 · 열람 주의 사진 */
.stain{position:absolute;left:var(--x);top:var(--y);width:calc(150px * var(--s));height:calc(150px * var(--s));background-repeat:no-repeat;background-position:center;background-size:contain;transform:translate(-30%,-20%) rotate(var(--r));mix-blend-mode:multiply;opacity:.66;pointer-events:none;z-index:3}
.st-b{width:calc(230px * var(--s));height:calc(100px * var(--s))}
.st-c{width:calc(90px * var(--s));height:calc(130px * var(--s));transform:translate(-30%,0) rotate(calc(var(--r) * .03))}
.st-d{width:calc(60px * var(--s));height:calc(76px * var(--s));opacity:.55}
.st-e{width:calc(210px * var(--s));height:calc(96px * var(--s))}
.st-f{width:calc(170px * var(--s));height:calc(116px * var(--s));opacity:.5}
/* 커피잔 자국 · 담뱃불 자국 (핏자국이 없는 사건의 종이 서류 몇 장) */
.doc.marked{overflow:hidden;overflow:clip} /* clip: 글을 긁어 끌어도 문서가 옆으로 밀려 가장자리 얼룩이 딸려 나오지 않게 */
.mark{position:absolute;left:var(--x);top:var(--y);background:center/contain no-repeat;transform:rotate(var(--r));mix-blend-mode:multiply;pointer-events:none;z-index:0}
.mk-ring{width:132px;height:132px;opacity:.2}
.mk-burn{width:30px;height:30px;opacity:.55}
.doc.marked>.doc-h,.doc.marked>.doc-b{position:relative;z-index:1}
/* 오래된 종이: 1945년 전 기록은 가장자리가 누렇게 바래고 녹 반점이 핀다. 60~70년대 기록은 가장자리만 조금 (js renderCase 의 data-era) */
.case-view[data-frame="papers"][data-era="old"] .doc:not(.scene){box-shadow:inset 0 0 44px rgba(122,80,30,.24),0 2px 10px rgba(0,0,0,.28)}
.case-view[data-frame="papers"][data-era="mid"] .doc:not(.scene){box-shadow:inset 0 0 32px rgba(122,92,40,.13),0 2px 10px rgba(0,0,0,.28)}
.case-view[data-frame="papers"][data-era="old"] .doc:not(.scene)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%238a5a24' filter='url(%23b)'%3E%3Ccircle cx='40' cy='62' r='3.2' opacity='0.5'/%3E%3Ccircle cx='46' cy='70' r='1.6' opacity='0.4'/%3E%3Ccircle cx='312' cy='40' r='2.4' opacity='0.45'/%3E%3Ccircle cx='470' cy='128' r='4' opacity='0.35'/%3E%3Ccircle cx='180' cy='210' r='1.8' opacity='0.4'/%3E%3Ccircle cx='402' cy='300' r='2.8' opacity='0.45'/%3E%3Ccircle cx='96' cy='342' r='5' opacity='0.25'/%3E%3Ccircle cx='102' cy='350' r='2' opacity='0.4'/%3E%3Ccircle cx='260' cy='430' r='2.2' opacity='0.4'/%3E%3Ccircle cx='488' cy='470' r='3' opacity='0.35'/%3E%3Ccircle cx='20' cy='490' r='2.6' opacity='0.4'/%3E%3Ccircle cx='350' cy='505' r='1.5' opacity='0.45'/%3E%3Ccircle cx='220' cy='96' r='1.2' opacity='0.5'/%3E%3Ccircle cx='140' cy='470' r='1.4' opacity='0.45'/%3E%3Ccircle cx='430' cy='210' r='1.3' opacity='0.5'/%3E%3Ccircle cx='60' cy='250' r='1.1' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/520px 520px}
/* 같은 핏자국이라도 마른 정도가 다르다: 오래된 것은 갈색으로 */
.stain:nth-of-type(3n+2){filter:sepia(.35) saturate(.8) brightness(1.08)}
.stain:nth-of-type(4n+3){filter:saturate(1.15) brightness(.9)}
.case-view[data-graphic] .doc{overflow:hidden;overflow:clip}
.case-view[data-graphic] .doc-b,.case-view[data-graphic] .doc-h{position:relative;z-index:1}
.doc>.stain{z-index:0} /* 기록지의 핏자국은 글자 밑으로 (요약 카드·폴더처럼) — 표 끝·✎ 단추·사진 설명이 얼룩에 묻히지 않게 */
.case-view[data-graphic] .doc-b{text-shadow:0 0 1px var(--sheet),0 0 3px var(--sheet)} /* 짙은 핏자국 위의 글자도 읽히게: 먹 둘레에 종이 빛 테 (핏자국 없는 자리에서는 보이지 않는다) */
@container stage (max-width:520px){.doc>.stain{opacity:.42}} /* 폰: 좁은 종이에서는 가장자리 핏자국도 글 위에 걸리니 옅게 */
.case-view{position:relative;z-index:1}
/* ── 책상 위 소품 (js deskProps): 종이 밑에 깔린 듯 가장자리만 보인다. 책상이 드러나는 넓은 화면에서만 */
.desk-props{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none}
@media (min-width:1760px) and (min-height:640px){.desk-props{display:block}}
.prop{position:absolute;width:var(--w);height:auto;transform:rotate(var(--r));filter:drop-shadow(5px 9px 7px rgba(0,0,0,.55)) brightness(.84) saturate(.88)}
.prop.p0{left:calc(50% - 790px - var(--w) * .62);top:8vh}
.prop.p1{left:calc(50% - 790px - var(--w) * .58);top:58vh}
.prop.p2{right:calc(50% - 790px - var(--w) * .6);top:13vh}
.prop.p3{right:calc(50% - 790px - var(--w) * .56);top:68vh}
.prop.k-pencil.p1,.prop.k-pencil.p3{top:52vh}
.prop.k-pencil.p1{left:calc(50% - 790px - 58px - var(--w) / 2)}
.prop.k-pencil.p3{right:calc(50% - 790px - 58px - var(--w) / 2)}
.lite .prop{filter:brightness(.84)}
.gore-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 48%,rgba(60,3,1,.42) 100%)}
.gore-bg .stain{width:calc(320px * var(--s));height:calc(320px * var(--s));opacity:.5}
.gore-bg .st-b{width:calc(460px * var(--s));height:calc(200px * var(--s))}
.gore-bg .st-c{top:-10px;width:calc(160px * var(--s));height:calc(230px * var(--s))}
.case-view[data-graphic] .stage-frame{box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(80,8,4,.35)}
.brief .stain{opacity:.5}
.brief-blood{position:absolute;inset:0;overflow:hidden;pointer-events:none} /* 개요 종이에 묻은 것: 종이 밖(수첩 머리의 사건 번호·단추)으로 번지지 않는다 */
.brief:has(.stain) :is(h2,dl,.scrawl){position:relative;z-index:4} /* 사건 개요도 폴더처럼: 핏자국은 종이에 스며 있고 글자는 그 위에 (「마지막 목격」 같은 칸 이름이 가려지지 않게) */
.f-blood{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.f-blood .stain{opacity:.55}
.folder:has(.f-blood) :is(.f-label,.f-kind,.f-motif,.f-len){position:relative;z-index:3}
.folder:has(.f-blood) :is(.f-kind,.f-motif,.f-len){text-shadow:0 0 2px var(--kraft),0 0 4px var(--kraft),0 0 7px var(--kraft)} /* 얼룩 위에 놓인 모티프 줄도 읽히게: 종이색으로 글자 둘레를 살짝 걷어 낸다 */ /* 핏자국은 종이에 스며 있고 글자는 그 위에 (연도·난이도·모티프가 가려지지 않게) */
.cw-card{position:relative;overflow:hidden}
.cw-card:focus{outline:0} /* 여는 때 초점을 받는 경고문 자체에는 테를 두르지 않는다 (단추들은 Tab 으로) */
.cw-card>*:not(.stain){position:relative;z-index:4}
.cw-card .stain{opacity:.5} /* 자리는 오른쪽 모서리뿐 (엔진 stains 의 corner) — 글 위에 얹히지 않는다 */
.snd.mild[aria-pressed="true"]{color:#e08a7f}
.cens{position:relative;display:block;overflow:hidden;overflow:clip;user-select:none;cursor:pointer;background:#1c1412}
.cens>svg,.cens>img{display:block;width:100%;height:auto;filter:blur(14px) grayscale(.6) brightness(.5);transform:scale(1.08);transition:filter .6s ease,transform .6s ease}
.cens.open{cursor:inherit}
.cens.open>svg,.cens.open>img{filter:none;transform:none}
.cens-l{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#f3e9e4;font:12px var(--f-mono);letter-spacing:.1em;text-align:center;background:repeating-linear-gradient(135deg,rgba(0,0,0,.2) 0 10px,rgba(0,0,0,.34) 10px 20px)}
.cens-l b{padding:3px 10px;border:2px solid #d8584c;background:#8c1e16;color:#fff;font:800 13px var(--f-web);letter-spacing:.08em}
.cens.open .cens-l{display:none}
@media (prefers-reduced-motion:reduce){.cens>svg,.cens>img{transition:none}}
.nb-back{white-space:nowrap}
.nb-case{display:grid;justify-items:end;gap:5px;text-align:right}
.nb-id{white-space:nowrap}
.nb-ctl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.nb-case .snd{margin:0}
.nb-case .snd.mild[aria-pressed="true"],.cw-card .snd.mild[aria-pressed="true"]{color:var(--red)} /* 기록실(어두운 책상)의 옅은 빨강은 종이 위에서 안 읽힌다 */

/* 빨간 별 사건 — 화면을 더 어둡게, 🔞 사진은 붉게 떠오르게. 잔혹 표현을 끄면 data-graphic 이 빠져 모두 사라진다 */
.gore-bg{background:radial-gradient(ellipse at 50% 42%,rgba(10,2,1,.16) 30%,rgba(58,3,1,.62) 100%)}
.gore-bg::before{content:"";position:absolute;inset:0;background:rgba(6,2,1,.3)}
body:has(.case-view[data-graphic])::before{background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(46,3,1,.55) 100%)}
.cens.reveal>svg,.cens.reveal>img{animation:cens-reveal 2.4s ease-out}
.cens.reveal::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(120,8,0,.12),rgba(66,0,0,.78));animation:cens-flash 2.4s ease-out forwards}
@keyframes cens-reveal{0%{filter:blur(14px) brightness(.3) sepia(1) saturate(5) hue-rotate(-38deg);transform:scale(1.08)}45%{filter:blur(2px) brightness(.55) sepia(.8) saturate(3) hue-rotate(-38deg);transform:scale(1.02)}100%{filter:none;transform:none}}
@keyframes cens-flash{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.cens.reveal>svg,.cens.reveal>img{animation:none}.cens.reveal::after{display:none}}

/* 화면 틀(모니터·노트북) 속 시스템 문구: 연필 손글씨가 아니라 그 화면의 글자 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) :is(.read-empty p,.res-none,.map-desc){font:13px/1.6 var(--f-web);color:#5b6576}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) :is(.c-msg,.cmp-q,.lock-h2){font:600 13px/1.5 var(--f-web)}
/* 좁은 화면: 틀 테두리를 줄여 읽는 칸을 넓힌다 (폰에서 표가 한두 글자씩 끊기지 않게) */
@media (max-width:1099px){ .case-view[data-frame="laptop"] .frame-foot{margin-inline:0} }
@media (max-width:560px){
  .case-view[data-frame="crt"] .stage-frame{padding:10px 10px 16px;border-radius:14px}
  .case-view[data-frame="laptop"] .stage-frame{padding:10px 6px 6px}
}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* 화면 읽기 프로그램에만 들리는 말 (js say) */

/* ───────── 좁은 화면(휴대폰)에서 찌그러지던 것들 ───────── */
@container stage (max-width:520px){
  /* 진술·녹취: 말한 사람 이름이 길면 대사 칸이 한 글자 너비로 줄던 것 → 이름을 윗줄로 */
  .b-say{grid-template-columns:minmax(0,1fr) auto}
  .b-say .b-who{grid-column:1/-1;white-space:normal}
  /* 사건 재구성 카드: 긴 시각 칸이 카드 글을 밀어내던 것 → 시각은 윗줄, 글은 아랫줄, 화살은 오른쪽 */
  .tl-e{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .tl-slot{min-width:0;grid-column:1}
  .tl-t{grid-column:1}
  .tl-mv{grid-column:2;grid-row:1/3;align-self:center}
}
@media (hover:none){.notes .del{opacity:.85}} /* 손가락 기기에는 올려 볼 마우스가 없다: 메모 지우기 × 가 보이게 */
.nb-case .snd{opacity:1} /* 종이 위 11px 글씨: 흐리게 하면 대비가 4.5:1 아래로 (켜짐/꺼짐은 글자가 말해 준다) */