/* Monologue Gaze — 브라우저 기본 부품 대신 쓰는 것들: 스크롤바, 고른 글자 빛깔, 입력칸, 말풍선, 보고서의 고르기 표시.
 * 윈도우·맥 기본 모양(회색 스크롤바, 파란 선택 빛, 노란 말풍선, 검색칸 ×, 맞춤법 밑줄)이 기록 속 분위기를 깨지 않게 한다. */

/* ───────── 스크롤바: 종이 위에서는 연필 빛, 어두운 책상 위에서는 바랜 종이 빛 ───────── */
html{scrollbar-color:rgba(233,223,199,.32) #15110d;-webkit-tap-highlight-color:transparent;color-scheme:only light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 책상 끝에서 더 당기거나 옆으로 밀어도 브라우저의 「새로 고침」 원·「뒤로 가기」 화살표가 끼어들지 않는다 (가로로 굴리는 표·세로 신문·탭 줄은 제 끝에서 멈춘다) */
html,body{overscroll-behavior:none}
.b-tbl,.skin-news.vertical .doc-b,.src-tabs{overscroll-behavior-x:contain}
*{scrollbar-width:thin;scrollbar-color:rgba(84,64,40,.45) transparent}
.case-view[data-frame="laptop"] .screen,.case-view[data-frame="laptop"] .screen *{scrollbar-color:rgba(64,88,132,.5) transparent}
.case-view[data-frame="crt"] .screen,.case-view[data-frame="crt"] .screen *{scrollbar-color:rgba(58,86,140,.55) transparent}
/* 수첩: 빨간 별 사건의 요약 카드 핏자국이 옆으로 삐져나와 가로 스크롤바가 생기지 않게 */
.nb{overflow-x:hidden}
.zoom,.case-intro,.cw{scrollbar-color:rgba(233,223,199,.3) transparent}
/* 사파리 등 scrollbar-color 를 모르는 브라우저 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(84,64,40,.42);border:2px solid transparent;border-radius:8px;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(84,64,40,.6)}
::-webkit-scrollbar-corner{background:transparent}

/* ───────── 고른 글자: 형광펜 ───────── */
::selection{background:rgba(255,212,84,.55);color:inherit}
.cabinet ::selection,.case-intro ::selection,.cw ::selection,.zoom ::selection{background:rgba(233,196,106,.38);color:#fff6df}
/* 화면 속에서는 형광펜이 아니라 그 시절 운영체제의 선택 빛 */
.case-view[data-frame="crt"] .screen ::selection{background:#316ac5;color:#fff}
.case-view[data-frame="laptop"] .screen ::selection{background:rgba(61,107,196,.3);color:inherit}

/* ───────── 입력칸 ───────── */
input,textarea{caret-color:var(--red)}
input::placeholder,textarea::placeholder{color:rgba(60,52,40,.45);opacity:1}
/* 화면 속 입력칸의 커서는 빨간 펜이 아니라 그 운영체제의 검은 막대, 안내 글은 회색 (LCD 잠금은 제 커서를 그대로) */
:where(.case-view[data-frame="crt"],.case-view[data-frame="laptop"]) .screen :is(input,textarea){caret-color:auto}
:where(.case-view[data-frame="crt"],.case-view[data-frame="laptop"]) .screen :is(input,textarea)::placeholder{color:#8a8f98}
input[type="search"]{-webkit-appearance:none;appearance:none}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button{-webkit-appearance:none;appearance:none;display:none}
input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 60px #fbf6e6 inset;-webkit-text-fill-color:var(--ink);transition:background-color 9999s}
.rep-filter{display:block;width:100%;margin:0 0 8px;padding:7px 10px 6px 30px;border:0;border-bottom:1.5px solid rgba(43,40,35,.45);background:rgba(255,253,245,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.2' fill='none' stroke='%237a6a50' stroke-width='1.8'/%3E%3Cpath d='M12 12l5 5' stroke='%237a6a50' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 8px 50%/15px no-repeat;font:14px var(--f-web);color:var(--ink);outline:none}
.rep-filter:focus{border-bottom-color:var(--red);background-color:#fffdf5}
.rep-filter:focus-visible{outline:0} /* 밑줄이 빨개지는 것으로 충분하다 (점선 테까지 겹치지 않게) */
/* 감식과가 미리 짚어 준 기호: 고칠 수 없는 칸은 점선 칸에 옅은 글씨 */
.ck:has(>input[readonly]){border-style:dashed;background:rgba(255,255,255,.3)}
.ck input[readonly]{border-bottom-color:transparent;color:var(--ink-soft);cursor:default}

/* ───────── 접었다 펴는 제목: 기본 삼각형 대신 연필 화살 ───────── */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
.rep-grp>summary::before{content:"";display:inline-block;width:0;height:0;margin:0 calc(1em - 5px) 1px 1px;border-left:5px solid var(--pencil);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s} /* 접힌 화살 — 기호 글꼴(▸) 대신 연필로 그린 세모 */
.rep-grp[open]>summary::before{transform:rotate(90deg)}

/* ───────── 말풍선 (title 대신 data-tip) — js/ui.js ───────── */
/* 이름이 .ui-tip 인 까닭: 수첩의 요령 줄(li.tip)과 겹치지 않게 */
.ui-tip{position:fixed;left:0;top:0;z-index:99;max-width:260px;padding:5px 11px 4px;border:1px solid rgba(60,48,30,.35);border-radius:2px;background:#f6eed6;box-shadow:0 5px 14px rgba(0,0,0,.35);font:19px/1.25 var(--f-hand);color:#3a2f22;pointer-events:none;opacity:0;transform:translateY(3px) rotate(-1deg);transition:opacity .12s,transform .12s;white-space:normal}
.ui-tip.on{opacity:1;transform:translateY(0) rotate(-1deg)}
/* 화면 속 풍선 도움말: 노트북은 어두운 둥근 풍선, 2006년 모니터는 검은 테의 노란 풍선 (손글씨·기울임 없이) */
.ui-tip[data-frame="laptop"]{padding:5px 9px;border:0;border-radius:6px;background:rgba(30,34,42,.94);color:#f3f5f8;font:600 12px/1.35 var(--f-ui);box-shadow:0 4px 12px rgba(0,0,0,.3);transform:translateY(3px)}
.ui-tip[data-frame="laptop"].on{transform:none}
.ui-tip[data-frame="laptop"]::after{border:0;width:8px;height:8px;margin-left:-4px;bottom:-4px}
.ui-tip[data-frame="laptop"].below::after{top:-4px;bottom:auto}
.ui-tip[data-frame="crt"]{padding:2px 6px 3px;border:1px solid #000;border-radius:0;background:#ffffe1;color:#000;font:12px/1.35 var(--f-web);box-shadow:2px 2px 2px rgba(0,0,0,.3);transform:none;transition:opacity .08s}
.ui-tip[data-frame="crt"].on{transform:none}
.ui-tip[data-frame="crt"]::after{content:none}
.ui-tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;background:inherit;border-right:1px solid rgba(60,48,30,.35);border-bottom:1px solid rgba(60,48,30,.35);transform:rotate(45deg)}
.ui-tip.below::after{top:-6px;bottom:auto;transform:rotate(225deg)}

/* ───────── 보고서: 고른 인물에 빨간 연필 동그라미와 「지목」, 고른 메모에 연필 체크 ───────── */
.rep-per{position:relative;transition:transform .12s ease,background-color .12s}
@media (hover:hover){.rep-per:hover{transform:translateY(-1px);background:#fbf5e3}}
.rep-per.on{border:1px solid rgba(176,52,42,.55);background:#fbeee8;box-shadow:none}
.rep-per.on::after{content:"";position:absolute;inset:-9px -12px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M22 46C18 18 150 4 186 30c20 16-10 42-86 44C40 76 6 60 14 36 20 20 60 9 104 9' fill='none' stroke='%23b0342a' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:circleIn .35s ease-out both}
.rep-per.on::before{content:var(--t-accused,"지목");position:absolute;right:-10px;top:-12px;z-index:1;padding:1px 6px 0;border:1.5px solid var(--red);background:#fbeee8;color:var(--red);font:800 11px/16px var(--f-doc);letter-spacing:.1em;transform:rotate(9deg);animation:stampIn .3s .1s ease-out both}
@keyframes circleIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes stampIn{from{opacity:0;transform:rotate(9deg) scale(1.6)}to{opacity:1;transform:rotate(9deg) scale(1)}}
.rep-opt{padding-left:36px}
.rep-opt::before{content:"";position:absolute;left:10px;top:10px;width:15px;height:15px;border:1.5px solid rgba(43,40,35,.5);border-radius:2px 3px 2px 4px;background:rgba(255,255,255,.7);transform:rotate(-2deg)}
.rep-opt.on::after{content:"";position:absolute;left:9px;top:3px;width:24px;height:22px;background:var(--red);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat;transform:rotate(-8deg);animation:stampIn .25s ease-out both}
@media (hover:hover){.rep-opt:hover::before{border-color:rgba(176,52,42,.7)}}

/* ───────── 그 밖의 기본 모양 ───────── */
/* 키보드로 옮겨 다닐 때: 파란 테 대신 빨간 연필 점선 */
:focus-visible{outline:1.5px dashed var(--red);outline-offset:3px;border-radius:3px}
.cabinet :focus-visible,.case-intro :focus-visible,.cw :focus-visible,.zoom:focus-visible{outline-color:rgba(233,196,106,.8)}
.case-intro:focus{outline:0} /* 초점을 붙들어 두는 여는 장면 자체에는 테를 두르지 않는다 */
:is(.rep-solved,#solvedBox):focus{outline:0} /* 사건이 풀린 뒤 초점을 받아 결말부터 읽히는 자리 */
/* 화면 속에서는 연필 점선 대신 그 시절 운영체제의 초점 표시: 2006년 모니터는 검은 점선 네모, 노트북은 파란 테 */
.case-view[data-frame="crt"] .screen :focus-visible{outline:1px dotted #111;outline-offset:2px;border-radius:0}
.case-view[data-frame="laptop"] .screen :focus-visible{outline:2px solid #3b6fd8;outline-offset:2px;border-radius:4px}
/* 크게 볼 수 있는 그림 (js/ui.js 가 키보드로 닿게 해 둔다): 테는 그림 안쪽에 — 바깥은 종이·틀에 가려 잘린다 */
img[data-ui-key]:focus-visible{outline-offset:-5px}
/* 칸 끝에 걸린 것으로 초점이 옮겨 가면 테까지 보이게 조금 더 들여 보인다 */
:where(.pane-list,.pane-read,.nb,.src-tabs) :is(button,input,summary,[tabindex="0"]){scroll-margin:8px}
/* 탭 줄은 옆으로 넘기는 칸이라 바깥 테가 잘린다: 탭의 테도 안쪽에 */
.src-tabs .tab:focus-visible,.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen .src-tabs .tab:focus-visible{outline-offset:-4px}
.case-view[data-frame="crt"] .screen .src-tabs .tab:focus-visible{outline-color:#fff} /* 파란 탭 줄 위의 점선 네모는 밝게 (옛 창의 초점 표시가 어두운 바탕에서 뒤집혀 보이듯) */
/* 링크: 파란 밑줄 대신 바랜 글씨에 점선 */
.cab-foot a,.cab-foot .credit a{color:#cdbf9f;text-decoration:underline dotted 1px;text-underline-offset:3px}
@media (hover:hover){.cab-foot a:hover,.cab-foot .credit a:hover{color:#efe4c9;text-decoration-style:solid}}
/* 정밀 관찰에서 찾은 것의 번호: 사진 위 빨간 동그라미 번호와 같은 빛깔 */
.ph-found>li::marker{color:var(--red);font-weight:800}
/* .c-act 는 탐문의 몸짓 줄(drama.css)과 해독·재구성의 단추 줄이 같이 쓰는 이름이다.
 * 단추 줄에는 몸짓 줄의 「— 」·기울임·80% 폭이 묻어나지 않게 한다 */
.c-form .c-act::before,.doc-b>.c-act::before{content:none}
.c-form .c-act,.doc-b>.c-act{align-self:auto;max-width:none;margin:12px 0 0;font-style:normal}
/* 엣지의 비밀번호 눈 단추·지우기 × */
input::-ms-reveal,input::-ms-clear{display:none}
input:is([type="password"],.pw){letter-spacing:.28em}
/* 단추를 두 번 누를 때 글자가 형광펜으로 칠해지지 않게, 사진을 끌거나 길게 눌러도 브라우저 메뉴가 뜨지 않게 */
.tab,.kchip,.folder,.snd,.btn-hand,.item,.pin,.del,.rep-tog,.nb-back,.back-list,.reset,.spot,.ph-cell,.art-lab,[data-ask],summary{-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none;-webkit-touch-callout:none}
/* 휴대폰: 단추를 빨리 두 번 눌러도(카드 ▲▼, 시간 보내기, 사진 칸) 화면이 확대되지 않게 — 두 손가락 확대는 그대로 */
:is(button,a,summary,label,input,select,textarea,.kw,.spot,.ph,.ph-cell,.per-tr,[role="button"]){touch-action:manipulation} /* 사진(누르는 곳마다 살핀다)·대화(누르면 건너뛴다)도 */
/* 칸 끝까지 굴려도 뒤의 책상까지 따라 굴러가지 않게 */
/* 단, 굴릴 게 남은 칸에서만 (.oy — 손을 대는 순간 ui.js 가 잰다): 내용이 짧은 칸에 붙들리면 휴대폰에서 그 칸이나 수첩을 끌어도 페이지가 내려가지 않는다 */
:is(.pane-list,.pane-read,.nb).oy{overscroll-behavior:contain}
@media (max-width:1099px) and (orientation:landscape) and (max-height:560px){:is(.pane-list,.pane-read).oy{overscroll-behavior-y:auto}} /* 가로 휴대폰: 칸이 화면을 거의 다 덮으니, 칸 끝에서 더 밀면 페이지가 이어서 내려간다 */
/* 사진 살피기: 기본 확대 화살표 대신 놋쇠 돋보기 (가운데가 누르는 자리) */
.ph,.ph-cell{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M19.5 19.5l9 9' stroke='%23000' stroke-opacity='.35' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M19 19l9 9' stroke='%234a2c17' stroke-width='4.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='9.2' fill='%23fff' fill-opacity='.14' stroke='%23000' stroke-opacity='.4' stroke-width='4.4'/%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23b8893a' stroke-width='2.6'/%3E%3Cpath d='M7.5 9a5.5 5.5 0 0 1 4-3.6' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 12 12,zoom-in}
.ph .ph-mk{cursor:inherit}
/* 수첩에 옮겨 적은 문장: 종이 서류에는 연필로 밑줄이 남는다 (화면 속 파일은 ✓ 만) */
.case-view[data-frame="papers"] .doc-b .b-p:has(>.pin.on),.case-view[data-frame="papers"] .b-say:has(>.pin.on) .b-line,.case-view[data-frame="papers"] .b-list li:has(>.pin.on),.case-view[data-frame="papers"] figcaption:has(>.pin.on){text-decoration:underline 1.5px rgba(78,72,66,.5);text-underline-offset:.45em;text-decoration-skip-ink:none} /* 적어 둔 줄의 밑줄은 단어 점선(3px)보다 아래로 — 겹쳐 점선이 묻히지 않게 */
.case-view[data-frame="papers"] .b-tbl tr:has(.pin.on) td:not(.pc){box-shadow:inset 0 -1.5px 0 rgba(78,72,66,.42)}
/* 수첩에 옮겨 적는 단추: 손가락 대신 연필 (심 끝이 누르는 자리) */
.pin:not(.on){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-45 16 16)' stroke='%232a2118' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M2 16 9 12.4v7.2z' fill='%23ecd9b0'/%3E%3Cpath d='M9 12.4h17v7.2H9z' fill='%23c9952c'/%3E%3Cpath d='M9 16h17' stroke='%23a87a1e' stroke-width='.8'/%3E%3Cpath d='M26 12.4h2.6v7.2H26z' fill='%23a3a39a'/%3E%3Cpath d='M28.6 12.4h1.4a1.6 1.6 0 0 1 1.6 1.6v4a1.6 1.6 0 0 1-1.6 1.6h-1.4z' fill='%23d9908a'/%3E%3Cpath d='M2 16 4.8 14.6v2.8z' fill='%232a2118' stroke='none'/%3E%3C/g%3E%3C/svg%3E") 6 26,pointer}
/* 종이 서류에 붙은 사진은 클립으로 물려 있다 (신문 인쇄 사진은 빼고) */
.case-view[data-frame="papers"] .doc:not(.skin-news) .b-img{position:relative}
.case-view[data-frame="papers"] .doc:not(.skin-news) .b-img::before{content:"";position:absolute;left:14px;top:-14px;z-index:2;width:16px;height:44px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 44'%3E%3Cpath d='M5 30V8a3.5 3.5 0 0 1 7 0v26a5 5 0 0 1-10 0V12' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='2.4' stroke-linecap='round' transform='translate(1.2 1.6)'/%3E%3Cpath d='M5 30V8a3.5 3.5 0 0 1 7 0v26a5 5 0 0 1-10 0V12' fill='none' stroke='%23a3a7a8' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M6 9a2.4 2.4 0 0 1 3.4-2' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(-4deg);pointer-events:none}
/* 사진은 인화지 여백째로 붙어 있다 */
.case-view[data-frame="papers"] .doc:not(.skin-news):not(.skin-card):not(.skin-photo) .b-img img.art{box-sizing:border-box;border:5px solid #f1ecdf;box-shadow:0 1px 3px rgba(40,30,20,.32)}
/* 화면 속 목록은 종이쪽지가 아니라 파일 창의 한 줄: 2006년 수사 PC는 파란 선택줄과 문서 아이콘, 노트북은 둥근 줄 */
.case-view[data-frame="crt"] .item{--card:#fff;--card-soft:#5b6576;margin-bottom:3px;border:1px solid #c3cddd;border-radius:0;box-shadow:none}
.case-view[data-frame="crt"] .item:not(.person){padding-left:34px}
.case-view[data-frame="crt"] .item:not(.person)::before{content:"";position:absolute;left:10px;top:10px;width:16px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M1.5.5h9l4 4v13h-13z' fill='%23fff' stroke='%235a6f94'/%3E%3Cpath d='M10.5.5v4h4' fill='%23dbe5f5' stroke='%235a6f94'/%3E%3Cpath d='M4 7h7M4 9.5h7M4 12h7M4 14.5h4.5' stroke='%232c62c4' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.case-view[data-frame="crt"] .item:hover{background-color:#eef3fb;border-color:#9fb4d6}}
.case-view[data-frame="crt"] .item.on{background-color:#316ac5;border-color:#1d4aa6;color:#fff;box-shadow:none}
.case-view[data-frame="crt"] .item.on .item-m{color:#dce6f7}
.case-view[data-frame="laptop"] .item{--card:#fffdf8;margin-bottom:6px;border:1px solid #e0d9c8;border-radius:7px;box-shadow:0 1px 1px rgba(60,50,30,.06)}
@media (hover:hover){.case-view[data-frame="laptop"] .item:hover{background-color:#fff}}
.case-view[data-frame="laptop"] .item.on{border-color:transparent;box-shadow:0 0 0 2px #3d6bc4}
/* 종이 기록철에서 아직 안 본 서류는 빨간 점 대신 모서리에 붙인 붉은 색인 쪽지 */
.case-view[data-frame="papers"] .item.new::after{top:9px;right:-6px;width:12px;height:18px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#9c2e25,#b8453a 40%,#b0342a);box-shadow:1px 1px 1px rgba(0,0,0,.25);opacity:.92}
/* 철해 둔 공문서: 왼쪽 가장자리에 편철 구멍 두 개 */
@media (min-width:700px){.case-view[data-frame="papers"] .doc.skin-report{background-image:radial-gradient(circle,#2a1f16 0 3.3px,rgba(60,40,20,.35) 3.6px 4.6px,transparent 5px),radial-gradient(circle,#2a1f16 0 3.3px,rgba(60,40,20,.35) 3.6px 4.6px,transparent 5px),var(--noise);background-repeat:no-repeat,no-repeat,repeat;background-position:6px 58px,6px 138px,0 0;background-size:12px 12px,12px 12px,auto}}
/* 모니터 앞판: 켜져 있다는 초록 전원등과 누름단추 */
.case-view[data-frame="crt"] .stage-frame::after{content:"";position:absolute;right:30px;bottom:10px;width:6px;height:6px;border-radius:50%;background:#8fe36a;box-shadow:0 0 5px 1px rgba(143,227,106,.7),-18px 0 0 -1px #b4ab92,-18px 0 0 0 #9c9480}
/* ───────── 조회·청구 양식: 시대마다 다른 서식 ───────── */
/* 종이 기록철: 붉은 괘선 청구 용지에 펜으로 적고, 도장처럼 찍어 넣는다 */
.case-view[data-frame="papers"] .q-f{position:relative;gap:10px;padding:12px 16px 14px;background-color:#f4ecd6;background-image:var(--noise),repeating-linear-gradient(180deg,transparent 0 31px,rgba(176,52,42,.14) 31px 32px);border:1px solid rgba(90,60,30,.32);box-shadow:0 2px 7px rgba(0,0,0,.2);transform:rotate(-.35deg)}
.case-view[data-frame="papers"] .q-f::before{content:attr(data-slip);display:block;padding-bottom:5px;border-bottom:3px double rgba(138,58,42,.45);color:#8a3a2a;font:700 12px var(--f-doc);letter-spacing:.4em;text-align:center}
.case-view[data-frame="papers"] .qf{color:#6b4a36}
.case-view[data-frame="papers"] .qf input{padding:3px 2px 1px;border:0;border-bottom:1.5px solid rgba(60,45,30,.55);background:transparent;color:#1f2a44;font:22px/1.15 var(--f-hand);outline:none}
.case-view[data-frame="papers"] .qf input::placeholder{font:12px var(--f-mono);color:rgba(80,64,48,.45)}
.case-view[data-frame="papers"] .qf input:focus{border-bottom-color:var(--red)}
.case-view[data-frame="papers"] .q-f button{align-self:flex-end;padding:5px 14px 4px;border:2.5px solid var(--red);border-radius:3px;background:transparent;color:var(--red);font:800 14px var(--f-doc);letter-spacing:.14em;transform:rotate(-3deg);mix-blend-mode:multiply;transition:transform .08s,background-color .12s}
@media (hover:hover){.case-view[data-frame="papers"] .q-f button:hover{background-color:rgba(176,52,42,.08)}}
.case-view[data-frame="papers"] .q-f button:active{transform:rotate(-3deg) scale(.94)}
/* 노트북(2010년대 이후): 요즘 웹 양식 */
.case-view[data-frame="laptop"] .q-f,.case-view[data-frame="laptop"] .lock{border:1px solid #d8dde5;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(20,30,50,.08)}
.case-view[data-frame="laptop"] .q-f{padding:14px}
.case-view[data-frame="laptop"] .qf,.case-view[data-frame="laptop"] .lock-f label{font:600 12px var(--f-web);letter-spacing:0;color:#4a5568}
.case-view[data-frame="laptop"] .qf input,.case-view[data-frame="laptop"] .lock-f input{padding:8px 10px;border:1px solid #cdd4de;border-radius:6px;background:#fbfcfe;font:14px var(--f-web);transition:border-color .12s,box-shadow .12s}
.case-view[data-frame="laptop"] .qf input:focus,.case-view[data-frame="laptop"] .lock-f input:focus{border-color:#3b6fd8;box-shadow:0 0 0 3px rgba(59,111,216,.18);outline:none}
.case-view[data-frame="laptop"] .q-f button,.case-view[data-frame="laptop"] .lock-f button{padding:8px 18px;border-radius:6px;background:#2f5fc8;font:700 13px var(--f-web)}
@media (hover:hover){.case-view[data-frame="laptop"] .q-f button:hover,.case-view[data-frame="laptop"] .lock-f button:hover{background:#2551b0;filter:none}}
/* 브라운관 모니터(2000년대 중반 경찰 전산망): 회색 창에 오목한 입력칸, 볼록한 단추 */
.case-view[data-frame="crt"] .q-f{padding:10px 12px;border:1px solid;border-color:#fff #8c8a84 #8c8a84 #fff;background:#ece9d8}
.case-view[data-frame="crt"] .q-f::before{content:attr(data-slip);margin:-10px -12px 4px;padding:3px 8px;background:linear-gradient(90deg,#2a4f9c,#6f8fcf);color:#fff;font:700 12px var(--f-web)}
.case-view[data-frame="crt"] .qf{font:12px var(--f-web);letter-spacing:0;color:#222}
.case-view[data-frame="crt"] .qf input{padding:3px 5px;border:1px solid #7f9db9;background:#fff;font:13px var(--f-web);outline:none}
.case-view[data-frame="crt"] .q-f button{padding:4px 16px;border:1px solid #1c3f78;border-radius:3px;background:linear-gradient(#fff,#ecebe6 85%,#d6d0c5);color:#111;font:12px var(--f-web)}
.case-view[data-frame="crt"] .q-f button:active{background:linear-gradient(#d6d0c5,#ecebe6)}
/* 화면 속 검색창: 사건이 따로 빛깔(--arch-line)을 정하지 않았으면 종이 시절 갈색 대신 그 화면의 빛깔. 노트북은 모서리도 둥글게 */
.case-view[data-frame="crt"]{--arch-line:#2a55a8}
.case-view[data-frame="laptop"]{--arch-line:#3f5a80}
.case-view[data-frame="laptop"] .arch-f{border-width:1.5px;border-radius:7px;overflow:hidden}
/* 종이 기록철의 자료실 찾기: 색인 카드에 적고 도장으로 찾는다 (노트북·모니터 속 검색창은 그대로) */
.case-view[data-frame="papers"] .arch-f{align-items:flex-end;gap:10px;padding:8px 12px 9px;border:1px solid rgba(90,60,30,.3);border-top:4px solid rgba(176,52,42,.55);background-color:#f6efdc;background-image:var(--noise);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.case-view[data-frame="papers"] .arch-f input{padding:2px 2px 1px;border-bottom:1.5px solid rgba(60,45,30,.5);color:#1f2a44;font:22px/1.15 var(--f-hand)}
.case-view[data-frame="papers"] .arch-f input::placeholder{font:12px var(--f-mono);color:rgba(80,64,48,.45)}
.case-view[data-frame="papers"] .arch-f input:focus{border-bottom-color:var(--red)}
.case-view[data-frame="papers"] .arch-f button{flex:none;padding:4px 12px 3px;border:2.5px solid var(--red);border-radius:3px;background:transparent;color:var(--red);font:800 14px var(--f-doc);letter-spacing:.2em;transform:rotate(-3deg);mix-blend-mode:multiply;transition:transform .08s,background-color .12s}
@media (hover:hover){.case-view[data-frame="papers"] .arch-f button:hover{background-color:rgba(176,52,42,.08)}}
.case-view[data-frame="papers"] .arch-f button:active{transform:rotate(-3deg) scale(.94)}
/* ───────── 그 밖의 단추: 대조 감정 「이것과 일치」, 해독·재구성 「맞춰 보기」, 잠금 「열기」, 「← 목록으로」, 「칸을 나눠 살피기」 ─────────
 * 기본 모양(검은 네모 웹 단추)은 어느 시대에도 맞지 않는다. 자료실·조회 단추처럼 틀마다 그 시대 모양으로 */
@media (hover:hover){.cmp-o button:not(:disabled):hover,.c-act button:hover,.lock-f button:hover{filter:brightness(1.18)}}
.cmp-o button:not(:disabled):active,.c-act button:active,.lock-f>button:active{filter:brightness(.9)}
@media (hover:hover){.case-view:not([data-frame="papers"]) .arch-f button:hover{filter:brightness(1.1)}}
.case-view:not([data-frame="papers"]) .arch-f button:active{filter:brightness(.9)}
/* 종이 기록철: 빨간 도장 */
.case-view[data-frame="papers"] :is(.cmp-o button,.c-act button,.lock:not(.lock-phone):not(.lock-lcd) .lock-f button){padding:4px 12px 3px;border:2.5px solid var(--red);border-radius:3px;background:transparent;color:var(--red);font:800 13px var(--f-doc);letter-spacing:.14em;transform:rotate(-2deg);mix-blend-mode:multiply;filter:none;transition:transform .08s,background-color .12s;-webkit-mask-image:var(--inkmask);mask-image:var(--inkmask);-webkit-mask-size:140px;mask-size:140px}
.case-view[data-frame="papers"] .cmp-o button{align-self:center}
.case-view[data-frame="papers"] .skin-board .c-act button{background-color:rgba(247,241,222,.94)} /* 코르크 판 위에서는 종이쪽지에 찍어야 읽힌다 */
@media (hover:hover){.case-view[data-frame="papers"] .skin-board .c-act button:hover{background-color:#fbf6e6}}
@media (hover:hover){.case-view[data-frame="papers"] :is(.cmp-o button:not(:disabled),.c-act button,.lock:not(.lock-phone):not(.lock-lcd) .lock-f button):hover{background-color:rgba(176,52,42,.08);filter:none}}
.case-view[data-frame="papers"] :is(.cmp-o button:not(:disabled),.c-act button,.lock:not(.lock-phone):not(.lock-lcd) .lock-f button):active{transform:rotate(-2deg) scale(.94);filter:none}
.case-view[data-frame="papers"] .back-list{padding:4px 10px 2px;border:1px solid rgba(60,50,30,.35);background:rgba(255,255,255,.25);color:var(--ink);font:18px/1.1 var(--f-hand)}
.case-view[data-frame="papers"] .back-list:active{background:rgba(255,255,255,.5)}
/* 2006년 모니터: 볼록한 회색 단추, 올리면 주황 테 */
.case-view[data-frame="crt"] :is(.cmp-o button,.c-act button,.lock:not(.lock-phone):not(.lock-lcd) .lock-f button,.ph-bar button,.back-list){padding:4px 14px;border:1px solid #1c3f78;border-radius:3px;background:linear-gradient(#fff,#ecebe6 85%,#d6d0c5);color:#111;font:12px var(--f-web);letter-spacing:0;filter:none}
@media (hover:hover){.case-view[data-frame="crt"] :is(.cmp-o button:not(:disabled),.c-act button,.lock:not(.lock-phone):not(.lock-lcd) .lock-f button,.ph-bar button,.back-list,.q-f button):hover{box-shadow:inset 0 0 0 2px rgba(248,179,59,.8);filter:none}}
.case-view[data-frame="crt"] :is(.cmp-o button,.c-act button,.lock:not(.lock-phone):not(.lock-lcd) .lock-f button,.ph-bar button,.back-list):active{background:linear-gradient(#d6d0c5,#ecebe6)}
/* 노트북: 둥근 파란 단추 (보조 단추는 흰 바탕) */
.case-view[data-frame="laptop"] :is(.cmp-o button,.c-act button){padding:7px 16px;border:0;border-radius:6px;background:#2f5fc8;color:#fff;font:700 12.5px var(--f-web);filter:none}
@media (hover:hover){.case-view[data-frame="laptop"] :is(.cmp-o button:not(:disabled),.c-act button):hover{background:#2551b0;filter:none}}
.case-view[data-frame="laptop"] .cmp-o button:disabled{background:#9aa7bf}
.case-view[data-frame="laptop"] :is(.ph-bar button,.back-list){padding:5px 12px;border:1px solid #cdd4de;border-radius:6px;background:#fff;color:#2b3445;font:600 12.5px var(--f-web)}
@media (hover:hover){.case-view[data-frame="laptop"] :is(.ph-bar button,.back-list):hover{background:#f3f6fb}}
/* 「칸을 나눠 살피기」: 칸이 펼쳐져 있는 동안은 눌린 채로 보인다 */
.scene:has(.ph-grid:not([hidden])) .ph-bar button{border-style:solid;background:#e6d8a4;box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.case-view[data-frame="crt"] .scene:has(.ph-grid:not([hidden])) .ph-bar button{background:linear-gradient(#d6d0c5,#ecebe6);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.case-view[data-frame="laptop"] .scene:has(.ph-grid:not([hidden])) .ph-bar button{border-color:#3b6fd8;background:#e8effc;color:#1f4fb4;box-shadow:none}
/* ───────── 인쇄 결: 도장은 잉크가 고르게 묻지 않고, 신문 사진은 망점으로 찍힌다 ───────── */
:root{--inkmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.b-stamp span,.f-stamp,.stamp>div,.cue-stamp span,.rep-per.on::before,.case-view[data-frame="papers"] .q-f button,.case-view[data-frame="papers"] .arch-f button{-webkit-mask-image:var(--inkmask);mask-image:var(--inkmask);-webkit-mask-size:140px;mask-size:140px}
.skin-news .b-img>img,.skin-news .b-img .art-wrap>img{-webkit-mask-image:radial-gradient(circle,#000 58%,rgba(0,0,0,.84) 64%);mask-image:radial-gradient(circle,#000 58%,rgba(0,0,0,.84) 64%);-webkit-mask-size:3px 3px;mask-size:3px 3px}
.lite .skin-news .b-img>img,.lite .skin-news .b-img .art-wrap>img{-webkit-mask-image:none;mask-image:none}
/* ───────── 잠금 화면: 1991년 전화기 번호판 · 1994년 워드프로세서 액정 ───────── */
.lock-phone{max-width:300px;padding:18px 18px 16px;border-radius:18px 18px 26px 26px;background:linear-gradient(#e2dccb,#cfc6b0);color:#2c2a26;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.18),0 10px 22px rgba(0,0,0,.35)}
.lock-phone .lock-d{font:12.5px/1.5 var(--f-web);font-style:italic;opacity:.85}
.lock-phone .lock-f{display:grid;grid-template-columns:1fr auto;gap:8px 8px}
.lock-phone .lock-f label{grid-column:1/-1;font:11px var(--f-mono);opacity:.7}
.lock-phone .lock-f input{caret-color:#1b2216;height:36px;padding:0 10px;border:2px solid #6f6a5c;border-radius:4px;background:linear-gradient(#a9b59a,#98a589);box-shadow:inset 0 2px 4px rgba(0,0,0,.35);color:#1b2216;font:700 20px/1 var(--f-mono);letter-spacing:.35em;text-align:center;outline:none}
.lock-phone .lock-f input:focus{border-color:#3f4a33;background:linear-gradient(#bfd894,#a9c47f);transition:background .15s} /* 번호를 누르려 하면 액정 뒷불이 들어온다 (초점 표시를 겸해) */
.lock-phone .lock-f>button[type="submit"]{padding:0 12px;border-radius:6px;background:#5b564a;font:700 12px var(--f-web)}
.lock-pad{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.lock-pad button{height:38px;border:0;border-radius:9px;background:linear-gradient(#f7f3e8,#ddd6c4);box-shadow:0 3px 0 #a79f8a,0 4px 6px rgba(0,0,0,.25);color:#2c2a26;font:700 17px var(--f-mono);cursor:pointer;transition:transform .05s,box-shadow .05s}
.lock-pad button:active{transform:translateY(3px);box-shadow:0 0 0 #a79f8a,0 1px 2px rgba(0,0,0,.25)}
.lock-pad [data-pad="#"],.lock-pad [data-pad="*"]{color:#8a3a2a}
.lock-lcd{max-width:440px;padding:16px;border:10px solid #3a3833;border-radius:6px;background:#a3ad8f;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px);color:#1c2418;box-shadow:inset 0 0 18px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.35);font-family:var(--f-mono)}
.lock-lcd .lock-t{font:700 15px var(--f-mono);letter-spacing:.04em}
.lock-lcd .lock-d,.lock-lcd .lock-h,.lock-lcd .lock-f label{font:12px/1.5 var(--f-mono);color:#1c2418;opacity:.85}
.lock-lcd .lock-f input{flex:0 0 auto;width:9.5ch;padding:4px 6px;border:2px solid #1c2418;background:transparent;color:#1c2418;font:700 22px var(--f-mono);letter-spacing:.5em;text-align:center;caret-color:#1c2418;outline:none;animation:lcdBlink 1.1s steps(1) infinite}
.lock-lcd .lock-f input:focus,.lock-lcd .lock-f input:not(:placeholder-shown){animation:none}
.lock-lcd .lock-f input:focus-visible{box-shadow:0 0 0 2px #a3ad8f,0 0 0 4px #1c2418} /* 초점: 액정 글씨 색으로 한 겹 더 */
.lock-lcd .lock-f button{padding:0 12px;border:2px solid #1c2418;background:#1c2418;color:#a3ad8f;font:700 13px var(--f-mono)}
.lock-lcd .lock-e{color:#5a1a10}
@keyframes lcdBlink{50%{border-color:transparent}}
/* 틀린 비밀번호: 잠금 상자가 도리질한다. 노트북 입력칸엔 붉은 테, 전화 액정은 두 번 깜빡, 워드프로세서 화면은 한 번 뒤집힌다 */
.lock.denied{animation:bounce .45s ease-out}
.case-view[data-frame="laptop"] .lock.denied .lock-f input,.case-view[data-frame="laptop"] .lock.denied .lock-f input:focus{border-color:#d9463b;box-shadow:0 0 0 3px rgba(217,70,59,.16)}
.lock-phone.denied .lock-f input{animation:phoneLcd .6s steps(1) 1}
@keyframes phoneLcd{0%,50%{background:#59634f;color:#c9d4b9}25%,75%{background:linear-gradient(#a9b59a,#98a589);color:#1b2216}}
.lock-lcd.denied{animation:bounce .45s ease-out,lcdInv .36s steps(1) 1}
@keyframes lcdInv{0%{box-shadow:inset 0 0 0 999px #2a3324,0 8px 18px rgba(0,0,0,.35)}50%{box-shadow:inset 0 0 18px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.35)}}
@media (prefers-reduced-motion:reduce){.lock-lcd .lock-f input,.lock.denied,.lock-phone.denied .lock-f input{animation:none}}
/* 줄 그어 지운 글자: 인쇄된 취소선 대신 펜으로 두 번 그은 줄 */
s{text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1 6.4C30 5.2 62 6.9 99 5.3M3 7.6C38 6.6 70 7.8 97 6.8' fill='none' stroke='%232a2320' stroke-width='1.3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.85'/%3E%3C/svg%3E") 0 55%/100% .7em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ───────── 손가락으로 누를 때: 작은 단추는 보이는 크기는 그대로 두고 누르는 자리만 넓힌다 ───────── */
@media (pointer:coarse){
  .snd,.reset,.pin,.tl-mv button,.chip,.nb-back,.tab,.cab-foot a,.cab-rate-x{position:relative}
  .snd::after,.reset::after,.pin::after,.del::after,.spot::after,.tl-mv button::after,.chip::after,.nb-back::after,.tab::after,.cab-foot a::after,.cab-rate-x::after{content:"";position:absolute;inset:-10px -3px}
  .pin::after{inset:-7px -9px} /* 문단 끝에 붙어 있어 아래 줄 낱말을 가리지 않을 만큼만 */
  .del::after{inset:-10px}
  .spot::after{inset:-9px}
  .chip::after,.tab::after{inset:-5px -2px}
  .tl-mv button::after{inset:-2px -8px}
  .back-list,.rep-tog,.btn-hand{position:relative}
  .back-list::after,.rep-tog::after,.btn-hand::after{content:"";position:absolute;inset:-8px -4px} /* 「목록으로」·보고서의 메모 고르기·손글씨 단추 */
  .case-view[data-frame="papers"] .src-tabs{padding-top:6px;margin-top:-6px} /* 가로로 굴리는 탭 줄이 넓힌 자리를 잘라 먹지 않게 (틀의 위 여백을 빌린다) */
  .lv-wait,[data-ph-grid]{position:relative;z-index:1}
  .lv-wait::after,[data-ph-grid]::after{content:"";position:absolute;inset:-7px -4px} /* 실시간 사건의 「시간 보내기」, 사진의 「칸을 나눠 살피기」 */
}

@media (prefers-reduced-motion:reduce){.rep-per.on::after,.rep-per.on::before,.rep-opt.on::after{animation:none}.ui-tip{transition:none}}

/* ───────── 탐문·단어 쪽지·보고서도 시대마다 ─────────
 * 기본 모양은 요즘 메신저 말풍선과 노란 손글씨 쪽지다. 종이 기록철에는 진술을 받아 적은 쪽지와 연필 글씨로,
 * 화면 속(2006년 모니터 · 노트북)에는 손글씨 없이 그 시절 프로그램 모양으로 바꾼다. */
/* 종이 기록철: 상대의 말은 명조로 받아 적은 진술 쪽지, 내가 묻고 끼어든 말은 연필 글씨 */
.case-view[data-frame="papers"] .per-tr :is(.c-bub,.c-dots){border-radius:2px}
.case-view[data-frame="papers"] .c-bub:not(.me){background:#fbf7ea;border-color:rgba(90,70,40,.24);box-shadow:0 1px 2px rgba(60,40,10,.14);font:15px/1.72 var(--f-doc)}
.case-view[data-frame="papers"][data-era="old"] .c-bub:not(.me){font-family:var(--f-batang)}
.case-view[data-frame="papers"] .c-bub:has(.pin.on) .c-t{text-decoration:underline 1.5px rgba(78,72,66,.5);text-underline-offset:.45em;text-decoration-skip-ink:none}
/* 적어 둔 줄의 밑줄에 아직 수첩에 없는 단어의 점선이 묻히지 않게 — 그 단어에만 옅은 형광 */
:is(.c-bub,.b-p,.b-say,.b-list li,figcaption,tr):has(.pin.on) .kw:not(.on){background:rgba(223,182,76,.26);text-decoration-color:rgba(120,70,20,.9)}
.case-view[data-frame="papers"] :is(.c-q,.c-bub.me){padding:0 4px 2px 12px;border:0;border-radius:0;background:none;box-shadow:none;color:#34405a;font:21px/1.3 var(--f-hand)}
.case-view[data-frame="papers"] .c-q .c-k{margin-top:0;color:var(--pencil);opacity:.8}
.case-view[data-frame="papers"] .qa.press .c-q{background:none;box-shadow:none;color:#8e2a20;text-decoration:underline 1.5px rgba(142,42,32,.45);text-underline-offset:.22em}
.case-view[data-frame="papers"] .c-bub.me .pin{border-color:rgba(52,64,90,.35);color:#34405a}
.case-view[data-frame="papers"] .c-dots{background:rgba(251,247,234,.85)}
/* 탐문 사람 표시: 종이에는 이름 첫 글자를 찍은 잉크 도장, 2006년 모니터는 네모난 사용자 그림, 노트북은 그대로 동그란 프로필 */
.case-view[data-frame="papers"] .ava{border:3px double var(--c,#6b6155);background:rgba(255,253,246,.35);color:var(--c,#6b6155);font:800 15px/1 var(--f-doc);transform:rotate(-7deg);mix-blend-mode:multiply;-webkit-mask-image:var(--inkmask);mask-image:var(--inkmask);-webkit-mask-size:140px;mask-size:140px}
.case-view[data-frame="papers"] .ava.lg{border-width:4px;font-size:26px}
.case-view[data-frame="crt"] .ava{border-radius:4px;background:linear-gradient(160deg,color-mix(in srgb,var(--c,#6b6155) 62%,#fff),var(--c,#6b6155));box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 0 0 1px #7f9db9;font-weight:700}
/* 2006년 모니터: 흰 창 안의 네모 말칸, 굴림 결 글씨, 볼록한 회색 단추 */
.case-view[data-frame="crt"] .per-tr{border:1px solid #7f9db9;background:#fff;box-shadow:none;color:#111}
.case-view[data-frame="crt"] .per-tr .qa{border-top:1px solid #dfe6f1}
.case-view[data-frame="crt"] .per-tr :is(.c-q,.c-bub,.c-dots){border-radius:3px;box-shadow:none;font:13px/1.65 var(--f-web)}
.case-view[data-frame="crt"] .c-bub:not(.me){border:1px solid #b9c7dc;background:#f7f9fc;color:#111}
@media (hover:hover){.case-view[data-frame="crt"] .c-bub:not(.me):hover{border-color:#7f9db9}}
.case-view[data-frame="crt"] :is(.c-q,.c-bub.me){border:1px solid #7f9db9;background:#dbe7fa;color:#0b2a5c}
.case-view[data-frame="crt"] .c-bub.me .pin{border-color:#7f9db9;color:#0b2a5c}
.case-view[data-frame="crt"] .qa.press .c-q{border-color:#c0504d;background:#fbe3df;color:#6b1410;box-shadow:none}
.case-view[data-frame="crt"] .c-act{font:12px/1.5 var(--f-web);color:#5b6576}
.case-view[data-frame="crt"] .c-dots{border:1px solid #d5dde9;background:#f0f3f8}
.case-view[data-frame="crt"] .c-dots i{border-radius:0;background:#7f9db9}
.case-view[data-frame="crt"] .c-ev{border:1px solid #d9c77a;background:#fffbe0;box-shadow:none;transform:none;font:13px/1.55 var(--f-web)}
/* 노트북: 요즘 메신저 — 내 말은 파란 칸, 상대 말은 회색 칸 */
.case-view[data-frame="laptop"] .per-tr{border:1px solid #e3e6ea;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(20,30,50,.08);color:#1d1f22}
.case-view[data-frame="laptop"] .per-tr .qa{border-top:1px solid #eef0f3}
.case-view[data-frame="laptop"] .per-tr :is(.c-q,.c-bub){border-radius:16px;box-shadow:none;font:14.5px/1.6 var(--f-web)}
.case-view[data-frame="laptop"] .c-bub:not(.me){border:1px solid transparent;border-bottom-left-radius:4px;background:#e9ecf0;color:#1d1f22}
@media (hover:hover){.case-view[data-frame="laptop"] .c-bub:not(.me):hover{border-color:#d5dae1}}
.case-view[data-frame="laptop"] :is(.c-q,.c-bub.me){border:0;border-bottom-right-radius:4px;background:#2f5fc8;color:#fff}
.case-view[data-frame="laptop"] .c-bub.me .pin{border-color:rgba(255,255,255,.5);color:#fff}
.case-view[data-frame="laptop"] .qa.press .c-q{background:#c62f24;box-shadow:0 0 0 3px rgba(198,47,36,.18)}
.case-view[data-frame="laptop"] .c-act{font:13px/1.5 var(--f-web);color:#6b7280}
.case-view[data-frame="laptop"] .c-dots{border-radius:16px;background:#e9ecf0}
.case-view[data-frame="laptop"] .c-dots i{background:#9aa3af}
.case-view[data-frame="laptop"] .c-ev{border:1px solid #d8dde5;border-left:3px solid #c62f24;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(20,30,50,.1);transform:none;font:13.5px/1.55 var(--f-web)}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .qa.pressing .c-ev{animation-name:slapFlat}
@keyframes slapFlat{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .qa.live::after{font:11px var(--f-web);letter-spacing:0;opacity:.75}
/* 화면 속 수첩 단어(자료실 찾기 · 탐문 물음): 노란 손글씨 쪽지 대신 그 화면의 태그 단추 */
.case-view[data-frame="crt"] .screen .chip{padding:3px 10px;border:1px solid #7f9db9;border-radius:3px;background:linear-gradient(#fff,#ecebe6 85%,#d6d0c5);color:#111;font:12px/1.4 var(--f-web)}
@media (hover:hover){.case-view[data-frame="crt"] .screen .chip:hover{box-shadow:inset 0 0 0 2px rgba(248,179,59,.8)}}
.case-view[data-frame="crt"] .screen .chip.done{border-color:#b5b3ab;background:#ece9d8;color:#666;opacity:1}
.case-view[data-frame="crt"] .screen .chip.again{border-color:#c0504d;background:linear-gradient(#fff,#fbe3df);color:#a1261f;box-shadow:none}
.case-view[data-frame="laptop"] .screen .chip{padding:5px 12px 4px;border:1px solid #d0d7e2;border-radius:999px;background:#f5f7fb;color:#2b3445;font:600 12.5px/1.3 var(--f-web)}
@media (hover:hover){.case-view[data-frame="laptop"] .screen .chip:hover{border-color:#9db5e8;background:#e8effc}}
.case-view[data-frame="laptop"] .screen .chip.done{border-color:transparent;background:#eef0f4;color:#5f6673;opacity:1}
.case-view[data-frame="laptop"] .screen .chip.again{border-color:#d93025;background:#fdecea;color:#c62f24;box-shadow:none}
/* 화면 속 안내 줄: 손글씨 대신 그 화면의 글씨 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen :is(.per-ask-t,.res-none,.read-empty p,.q,.lock-h2,.cmp-q,.map-desc,.c-msg){font-family:var(--f-web);font-size:14px;line-height:1.5}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen .per-ask-t{font-weight:700;color:#1d2a44}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen .per-ask-t small{font-family:var(--f-web);font-weight:400}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen :is(.res-none,.read-empty p){color:#6b7280}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen .cmp-q{font-weight:700}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen .skin-photo .doc-t{font:700 15px/1.4 var(--f-web)}
.case-view[data-frame="crt"] .screen :is(.per-ask-t,.res-none,.read-empty p,.q,.lock-h2,.cmp-q,.map-desc,.c-msg){font-size:13px}
/* 화면 속 보고서·신청서: 종이 서식 대신 경찰 전산 양식 — 칸마다 회색 머리줄, 손글씨 없이, 파란 올리기 단추, 머리에 결재란 */
.case-view[data-frame="laptop"] .rep-view{--f-web:var(--f-sys);border-radius:4px;background:#fbfbf8;color:#1d1f22}
.case-view[data-frame="crt"] .rep-view{border:1px solid #7f9db9;background:#fff;color:#111}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view{background-image:none;box-shadow:0 1px 4px rgba(20,30,50,.18)}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .skin-report::after{content:none} /* 빈 도장 테는 종이 서류에만: 화면 속 파일·전산 양식에는 없다 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .doc-h{border-bottom:2px solid #1d1f22}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .doc-k{font:11px/1.4 var(--f-mono);letter-spacing:.12em;color:#5a5f66}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .doc-t{font:700 18px/1.4 var(--f-web);letter-spacing:-.01em}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .doc-m{font:12px/1.5 var(--f-web);color:#5a5f66}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view :is(.rep-sec,.rep-claim){padding:0 0 12px;border:1px solid #9aa0a6;border-radius:0;background:#fff}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view :is(.rep-sec,.rep-claim)>:not(h4){margin-inline:12px}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view h4{margin:0 0 10px;padding:7px 12px;border-bottom:1px solid #9aa0a6;background:#eef0f2;font:700 13.5px/1.45 var(--f-web)}
.case-view[data-frame="crt"] .rep-view h4{border-color:#7f9db9;background:linear-gradient(#f6f8fc,#dfe7f3)}
.case-view[data-frame="crt"] .rep-view :is(.rep-sec,.rep-claim){border-color:#7f9db9}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view h4 .no{border-width:1px;font-family:var(--f-web)}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-claim.filled{border-left:4px solid #2f5fc8}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-claim.open{border-color:#5a6270}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view :is(.rep-memo,.rep-empty){font:13.5px/1.6 var(--f-web)}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-memo .src{font-size:12px;color:#5a5f66}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-empty{color:#8a8f98}
.case-view[data-frame="laptop"] .rep-view :is(.rep-tog,.rep-per,.rep-filter){border:1px solid #cdd4de;border-radius:6px;background:#fff}
.case-view[data-frame="laptop"] .rep-view .rep-tog{padding:5px 11px;color:#2b3445;font:600 12px var(--f-web)}
@media (hover:hover){.case-view[data-frame="laptop"] .rep-view :is(.rep-tog,.rep-per):hover{background:#f3f6fb;transform:none}}
.case-view[data-frame="laptop"] .rep-view .rep-per.on{border-color:#2f5fc8;background:#eef3fd;box-shadow:0 0 0 2px rgba(47,95,200,.18)}
.case-view[data-frame="crt"] .rep-view :is(.rep-tog,.rep-per){border:1px solid #1c3f78;border-radius:3px;background:linear-gradient(#fff,#ecebe6 85%,#d6d0c5);color:#111}
.case-view[data-frame="crt"] .rep-view .rep-tog{padding:3px 10px;font:12px var(--f-web)}
@media (hover:hover){.case-view[data-frame="crt"] .rep-view :is(.rep-tog,.rep-per):hover{box-shadow:inset 0 0 0 2px rgba(248,179,59,.8);transform:none}}
.case-view[data-frame="crt"] .rep-view .rep-per.on{border-color:#1d4aa6;background:#316ac5;color:#fff}
.case-view[data-frame="crt"] .rep-view .rep-per.on small{color:#dce6f7}
.case-view[data-frame="crt"] .rep-view .rep-filter{border:1px solid #7f9db9;background:#fff}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-per b{font:700 14px/1.3 var(--f-web)}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-per small{font:11px/1.35 var(--f-web);color:#5a5f66}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-per.on::after{content:none}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-per.on::before{right:-6px;top:-9px;border:0;border-radius:3px;background:#2f5fc8;color:#fff;font:700 10.5px/17px var(--f-web);letter-spacing:.04em;transform:none;animation:none;-webkit-mask-image:none;mask-image:none}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-opt.on{border-left-color:#2f5fc8;background:#eef3fd}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-opt.on::after{left:10.5px;right:auto;top:10.5px;width:14px;height:14px;background:#2f5fc8;transform:none;animation:none}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .btn-hand{height:auto;padding:8px 20px;border-radius:6px;background:#2f5fc8;color:#fff;font:700 13px/1.2 var(--f-web);transform:none}
@media (hover:hover){.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .btn-hand:hover{background:#2551b0}}
.case-view[data-frame="crt"] .rep-view .btn-hand{padding:5px 22px;border:1px solid #1c3f78;border-radius:3px;background:linear-gradient(#fff,#ecebe6 85%,#d6d0c5);color:#111;font:700 12px var(--f-web)}
@media (hover:hover){.case-view[data-frame="crt"] .rep-view .btn-hand:hover{background:linear-gradient(#fff,#ecebe6 85%,#d6d0c5);box-shadow:inset 0 0 0 2px rgba(248,179,59,.8)}}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .tries{font:11px var(--f-mono);color:#5a5f66}
/* 종결된 보고서: 고를 수 없는 서류. 올리기 단추 자리에 철해 둔 표시 (종이) · 결재 완료 상태 (화면) */
#rep.shut .rep-per{cursor:default;transform:none}
.rep-filed{padding:1px 8px 0;border:1.5px solid var(--pencil);border-radius:2px;color:var(--pencil);font:19px/1.3 var(--f-hand);transform:rotate(-1.5deg)}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-filed{padding:4px 10px;border:1px solid #b9c4b0;border-radius:4px;background:#eef6ea;color:#2f6b35;font:700 12px/1.2 var(--f-web);transform:none}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-filed::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.3em;vertical-align:-.12em;background:currentColor;-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .verdict{font:600 13.5px/1.55 var(--f-web);color:#8e2a20}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .verdict:not(:empty){padding:8px 12px;border-left:4px solid #b0342a;background:rgba(176,52,42,.07)}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .verdict.wait{border-left-color:#9aa0a6;background:rgba(0,0,0,.04);color:#5a5f66}
/* 결재란: 담당 · 팀장 · 과장. 종이 기록철에는 없다 (붉은 동그라미 자리가 대신한다) */
.rep-sign{display:none}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-sign{display:table;float:right;margin:0 0 6px 12px;border-collapse:collapse;font:11px/1.2 var(--f-web);text-align:center}
.rep-sign th{padding:3px 6px;border:1px solid #9aa0a6;background:#eef0f2;font-weight:700;color:#3b4148}
.rep-sign td{width:54px;height:40px;padding:2px;border:1px solid #9aa0a6;background:#fff;color:#3b4148;vertical-align:middle;word-break:keep-all}
.rep-sign span{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid currentColor;border-radius:50%;font:800 11px/1 var(--f-doc);transform:rotate(-12deg);-webkit-mask-image:var(--inkmask);mask-image:var(--inkmask);-webkit-mask-size:140px;mask-size:140px}
.rep-sign tr+tr td:first-child{min-width:54px;width:auto;padding:2px 6px;white-space:nowrap}
.rep-sign .ok{color:#b0342a}
.rep-sign .no{color:#b0342a;border-style:double;border-width:3px}
@media (max-width:560px){.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-sign td{width:44px;height:34px}.rep-sign span{width:28px;height:28px;font-size:10px}}
/* 기록실에서 화면 속 사건을 열면 여는 장면이 걷힐 때 모니터가 켜진다: 브라운관은 가운데 한 줄이 위아래로 벌어지며 번쩍, 노트북은 검은 화면에서 밝아진다 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen:is(.off,.boot)::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(#060708,#060708) top/100% 50% no-repeat,linear-gradient(#060708,#060708) bottom/100% 50% no-repeat}
.case-view[data-frame="crt"] .screen.boot{animation:crtGlow .85s ease-out both}
.case-view[data-frame="crt"] .screen.boot::before{animation:crtOn .85s cubic-bezier(.3,.7,.3,1) both}
@keyframes crtOn{0%{background-size:100% 50%,100% 50%}16%,36%{background-size:100% 49.3%,100% 49.3%}100%{background-size:100% 0,100% 0}}
@keyframes crtGlow{0%,36%{filter:brightness(3.4) saturate(.2)}100%{filter:none}}
.case-view[data-frame="laptop"] .screen.boot{animation:lapGlow .9s ease-out both}
.case-view[data-frame="laptop"] .screen.boot::before{animation:lapOn .6s ease-out both}
@keyframes lapOn{to{opacity:0}}
@keyframes lapGlow{from{filter:brightness(.45)}to{filter:none}}
@media (prefers-reduced-motion:reduce){.case-view .screen.boot,.case-view .screen.boot::before{animation-duration:.01s}}
/* 처음 보는 순간만: 막 종결한 폴더에 도장이 쾅, 새로 모인 M의 메모는 스며 나오고, 기록 여백의 선배 글씨는 잉크가 배어 나오듯 */
.f-stamp.fresh{animation:fStamp .5s .75s cubic-bezier(.2,1.5,.45,1) both}
@keyframes fStamp{from{opacity:0;transform:rotate(-12deg) scale(2.3)}to{opacity:.88;transform:rotate(-12deg) scale(1)}}
.mbox li.fresh{animation:mSeep 1.4s .3s ease-out both}
@keyframes mSeep{from{opacity:0;filter:blur(3px);translate:0 -6px}to{opacity:1;filter:none;translate:0 0}}
.b-m.fresh{animation:mSeep 1.8s .5s ease-out both}
.m-letter.fresh:not(.out){opacity:0;translate:0 26px}
.m-letter.fresh.out{animation:letterOut 1.4s .2s cubic-bezier(.2,.7,.3,1) both}
@keyframes letterOut{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.f-stamp.fresh,.mbox li.fresh,.b-m.fresh,.m-letter.fresh.out{animation:none}.m-letter.fresh:not(.out){opacity:1;translate:none}}
/* 사진 살피기 돋보기 (js/ui.js): 종이 기록은 놋쇠 테 둥근 렌즈, 화면 속 사진은 네모 확대 창. 가운데 작은 고리가 누르는 자리 */
.ph-lens{position:absolute;z-index:3;width:156px;height:156px;margin:-78px 0 0 -78px;border-radius:50%;pointer-events:none;background-color:#222;background-repeat:no-repeat;box-shadow:0 0 0 3px #b8893a,0 0 0 5px rgba(60,40,10,.55),0 12px 26px rgba(0,0,0,.45),inset 0 0 20px rgba(0,0,0,.4);transition:opacity .15s}
.ph-lens::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.22),transparent 42%)}
.ph-lens::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid rgba(255,255,255,.75);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.case-view:not([data-frame="papers"]) .ph-lens{border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.4)}
.case-view:not([data-frame="papers"]) .ph-lens::before{content:none}
.ph.lensing,.ph.lensing .ph-cell{cursor:none}
/* 화면 속 사진 살피기: 인화지 흰 테두리 대신 사진 보기 창의 얇은 테 */
.case-view[data-frame="laptop"] .ph{border:1px solid #cdd4de;border-radius:4px;box-shadow:0 1px 4px rgba(20,30,50,.18)}
.case-view[data-frame="crt"] .ph{border:2px solid;border-color:#8c8a84 #fff #fff #8c8a84;box-shadow:none}
/* 화면 속 웹 페이지를 열면 맨 위에 잠깐 불러오는 줄: 노트북은 가는 파란 줄, 2006년 브라운관은 초록 칸이 한 칸씩 */
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .pane-read>.enter:is(.skin-web,.skin-home)::before{content:"";position:absolute;z-index:4;top:0;left:0;right:0;height:2px;transform-origin:0 50%;background:#3d7be0;pointer-events:none;animation:pageLoad .75s ease-out both}
.case-view[data-frame="crt"] .pane-read>.enter:is(.skin-web,.skin-home)::before{height:4px;background:repeating-linear-gradient(90deg,#3cb043 0 7px,transparent 7px 9px);animation-timing-function:steps(9,end)}
@keyframes pageLoad{0%{transform:scaleX(0);opacity:1}75%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.case-view .pane-read>.enter:is(.skin-web,.skin-home)::before{animation:none;opacity:0}}

/* ───────── 비밀번호 칸: 브라우저가 진짜 로그인으로 알고 「비밀번호 저장」·자동 채우기를 띄우지 않게, 보통 칸에 글자만 점으로 가린다 ───────── */
input.pw{-webkit-text-security:disc;text-security:disc}

/* ───────── 그림이 오지 않았을 때: 깨진 그림 표시·설명 글 대신 그 기록다운 빈자리 ───────── */
.img-miss{position:relative;display:block;min-height:90px;background:repeating-linear-gradient(-45deg,rgba(84,64,40,.07) 0 8px,transparent 8px 16px);border:1.5px dashed rgba(84,64,40,.4)}
.img-miss>img{visibility:hidden}
.img-miss::after{content:var(--t-img-lost,"사진 유실 — 원본 확인 요망");position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);padding:3px 10px 2px;border:2px solid rgba(176,52,42,.75);border-radius:3px;color:rgba(176,52,42,.85);font:700 13px/1.4 var(--f-web);letter-spacing:.08em;white-space:nowrap}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen .img-miss{background:#fff;border:1px solid #9aa3b0}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen .img-miss::after{content:var(--t-img-fail,"그림을 표시할 수 없습니다");transform:translate(-50%,-50%);border:0;color:#3a3f48;font:12px/1.4 var(--f-sys);letter-spacing:0;padding-left:22px;background:radial-gradient(circle at 8px 50%,#d23a2c 0 7px,transparent 7.5px)}

/* ───────── 인쇄(Ctrl+P): 기록실 화면째가 아니라 지금 읽는 기록 한 장만, 복사본처럼 ───────── */
@media print{
  body{background:#fff!important}
  body *{visibility:hidden}
  #paneRead,#paneRead *{visibility:visible}
  #paneRead{position:absolute;left:0;top:0;width:100%;height:auto!important;overflow:visible!important;box-shadow:none!important}
  #paneRead .pin,#paneRead [data-back],#paneRead .back-list{display:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ───────── 2006년 모니터(윈도 XP) 화면: 얇은 요즘 스크롤바 대신 화살 단추가 달린 굵은 파란 스크롤바, 단추·목록 위의 손가락 대신 화살표 (손가락은 밑줄 친 낱말에만) ───────── */
.case-view[data-frame="crt"] .screen,.case-view[data-frame="crt"] .screen *{scrollbar-width:auto;scrollbar-color:auto}
.case-view[data-frame="crt"] .screen::-webkit-scrollbar,.case-view[data-frame="crt"] .screen ::-webkit-scrollbar{width:16px;height:16px}
.case-view[data-frame="crt"] .screen::-webkit-scrollbar-track,.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-track{background:linear-gradient(90deg,#eeede5,#f8f8f3 50%,#eeede5);border-radius:0}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-track:horizontal{background:linear-gradient(#eeede5,#f8f8f3 50%,#eeede5)}
.case-view[data-frame="crt"] .screen::-webkit-scrollbar-thumb,.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-thumb{border:1px solid #98b0e6;border-radius:3px;background:linear-gradient(90deg,#c9d8fc,#b9cdf8) center/100% no-repeat;background-clip:border-box;box-shadow:inset 1px 1px 0 #eef3ff}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-thumb:vertical{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 1.5h8M0 3.5h8M0 5.5h8' stroke='%23eef3ff'/%3E%3Cpath d='M0 2.5h8M0 4.5h8M0 6.5h8' stroke='%238aa4dc'/%3E%3C/svg%3E") center no-repeat,linear-gradient(90deg,#c9d8fc,#b9cdf8)}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-thumb:horizontal{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1.5 0v8M3.5 0v8M5.5 0v8' stroke='%23eef3ff'/%3E%3Cpath d='M2.5 0v8M4.5 0v8M6.5 0v8' stroke='%238aa4dc'/%3E%3C/svg%3E") center no-repeat,linear-gradient(#c9d8fc,#b9cdf8)}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-thumb:hover{filter:brightness(1.05)}
.case-view[data-frame="crt"] .screen::-webkit-scrollbar-button:single-button,.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-button:single-button{display:block;width:16px;height:16px;border:1px solid #98b0e6;border-radius:3px;background-color:#c3d4fb;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 1px 0 #eef3ff}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 5 4 1l4 4' fill='none' stroke='%234d6185' stroke-width='1.6'/%3E%3C/svg%3E")}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 4 4-4' fill='none' stroke='%234d6185' stroke-width='1.6'/%3E%3C/svg%3E")}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3E%3Cpath d='M5 0 1 4l4 4' fill='none' stroke='%234d6185' stroke-width='1.6'/%3E%3C/svg%3E")}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3E%3Cpath d='M0 0l4 4-4 4' fill='none' stroke='%234d6185' stroke-width='1.6'/%3E%3C/svg%3E")}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-button:double-button{display:none}
.case-view[data-frame="crt"] .screen ::-webkit-scrollbar-corner{background:#eeede5}
.case-view[data-frame="crt"] .screen :is(button,.item,.tab,[role="button"],summary,label,.chip):not(.kw):not(.pin){cursor:default}

/* ───────── 화면 속(모니터·노트북) 서류가 종이처럼 보이던 곳 ───────── */
/* 화면 속 파일은 누런 종이 결(노이즈) 없이 */
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .doc:is(.skin-report,.skin-ledger,.skin-card,.skin-lab,.skin-plain,.printed){background-image:none}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .skin-plain{background-color:#fbfbf8;border:1px solid #e3e6ea}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .skin-plain .doc-h{padding-bottom:10px;border-bottom:2px solid #1d1f22}
/* 결재란이 좁은 화면에서 제목을 한 글자씩 꺾던 것 → 결재란은 제목 위 오른쪽에 따로 */
@container stage (max-width:520px){.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-sign{float:none;margin:0 0 10px auto}}
/* 경찰 전자 서식 안의 빈칸 안내는 손글씨가 아니라 화면 글자 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .skin-form .rep-empty{font:13.5px/1.6 var(--f-web);color:#5f6570}
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .rep-view .rep-empty{color:#5f6570}
/* 화면 속 증거 사진(블랙박스·CCTV 캡처)은 인화지 흰 테 대신 뷰어 테두리 */
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .skin-card :is(.b-img>img,.osd-wrap>img){border:1px solid #cdd4de;box-shadow:0 1px 3px rgba(20,30,50,.18)}
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .skin-card .osd{inset:1px 1px auto}
/* 화면 속 연락처 이름·잠금 화면 제목은 종이 명조가 아니라 화면 글꼴 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .screen :is(.per-h h3,.lock:not(.lock-lcd):not(.lock-phone) .lock-t){font:700 17px/1.3 var(--f-web)}
/* 첫 대답 위에 그어지던 선 */
.case-view:is([data-frame="crt"],[data-frame="laptop"]) .per-tr .qa-first{border-top:0}
/* 노트북 대조 감정 시료: 누런 종이 쪽지 대신 앱 카드 */
.case-view[data-frame="laptop"] :is(.cmp-o,.cmp-ev){border:1px solid #d8dde5;border-radius:8px;background:#fff}
.case-view[data-frame="laptop"] .cmp-d{font-family:var(--f-web)}
.case-view[data-frame="laptop"] .cmp-o.ok{border-color:#2f8a57;background:#f1f8f3}
/* 노트북 탭 줄의 「잠김」 표 */
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .tab-lock{opacity:1}
/* 화면 속 문서의 M 메모: 종이 여백의 붓글씨 대신 모니터에 붙인 노란 메모지 */
.case-view:is([data-frame="laptop"],[data-frame="crt"]) .screen .b-m{border-left:0;background:#fff4b8;box-shadow:0 3px 8px rgba(0,0,0,.18);transform:rotate(-1.5deg)}
@media (max-width:560px){.case-view[data-frame="laptop"] .cam{top:2px}}
.lv-feed .doc-b>.fresh{animation:lvFresh 2.6s ease-out both} /* 보던 단톡방에 방금 들어온 말 */
@keyframes lvFresh{from{background-color:rgba(255,214,90,.42)}to{background-color:transparent}}
@media (prefers-reduced-motion:reduce){.lv-feed .doc-b>.fresh{animation:none;box-shadow:inset 3px 0 0 rgba(214,160,40,.7)}}