/* Monologue Gaze — 문서 스킨. 사건 파일의 css 로 [data-case="cXX"] 아래에서 덮어쓸 수 있다. */

/* ───────── 공통 블록 ───────── */
.doc{position:relative;padding:24px 26px 26px;background-color:var(--sheet);background-image:var(--noise);color:var(--sheet-ink);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.doc-h{margin-bottom:14px}
.doc-paper{margin:0 0 6px}
.doc-k{margin:0 0 4px;font:11.5px/1.4 var(--f-mono);letter-spacing:.06em;opacity:.75}
.doc-t{margin:0;font:800 20px/1.35 var(--f-doc);text-wrap:balance}
.doc-m{margin:6px 0 0;font:12px/1.5 var(--f-mono);opacity:.75}
.doc-b{font:14.5px/1.8 var(--f-web)}
.b-p{margin:0 0 12px;text-wrap:pretty}
.b-h{margin:18px 0 8px;font:800 15.5px/1.4 var(--f-doc)}
.b-note{margin:0 0 10px;font:12px/1.6 var(--f-mono);opacity:.72}
.b-stamp{margin:12px 0}
.b-stamp span{display:inline-block;padding:3px 10px;border:2.5px solid var(--red);color:var(--red);font:800 15px/1.3 var(--f-doc);transform:rotate(-4deg);opacity:.85;mix-blend-mode:multiply}
.b-sign{margin:14px 0 0;text-align:right;font:22px/1.2 var(--f-hand2)}
.b-m{position:relative;margin:18px 0 8px;padding:6px 12px 4px;transform:rotate(-1.2deg);border-left:3px solid rgba(122,40,24,.55);color:#7a2818;font:23px/1.25 var(--f-hand2);background:rgba(255,248,225,.4)}
.b-m-sig{display:block;text-align:right;font-size:19px}
.b-img{margin:14px 0}
.b-img>svg,.b-img>img{display:block;width:100%;height:auto;background:#ddd6c4}
.b-img figcaption{margin-top:6px;font:12.5px/1.5 var(--f-web);opacity:.85}
.b-tbl{margin:10px 0 16px;overflow-x:auto}
.b-tbl table{width:100%;border-collapse:collapse;font:13px/1.45 var(--f-web)}
.b-tbl caption{text-align:left;padding-bottom:6px;font:700 12.5px var(--f-web)}
.b-tbl th,.b-tbl td{padding:6px 8px;border-bottom:1px solid rgba(0,0,0,.14);text-align:left;vertical-align:top}
.b-tbl th{font:700 11.5px/1.35 var(--f-mono);letter-spacing:.03em;background:rgba(0,0,0,.05)}
.b-tbl td{font-variant-numeric:tabular-nums}
.b-tbl .pc{width:34px;text-align:right}
.b-tbl .pin{margin:0}
/* 옆으로 넘는 표 (js tblEdge): ✎ 칸은 종이 빛깔로 덮고, 뒤로 더 있으면 그 칸 가장자리에 그늘 */
.b-tbl.scrolls td.pc{background-color:var(--pc-bg,transparent);background-image:var(--pc-bgi,none)}
.b-tbl.scrolls th.pc{background-color:var(--pc-bg,transparent);background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)),var(--pc-bgi,none)}
.b-tbl.more-r .pc{box-shadow:-8px 0 8px -6px rgba(0,0,0,.3)}
@container stage (max-width:520px){.b-tbl th,.b-tbl td{padding:5px 4px;word-break:keep-all;overflow-wrap:break-word;min-width:3em}.b-tbl td{font-size:12.5px;hyphens:auto;-webkit-hyphens:auto}.b-tbl th{letter-spacing:0;font-size:10.5px;hyphens:auto;-webkit-hyphens:auto}.b-tbl .pc{position:sticky;right:0;width:24px;min-width:0;padding-left:2px;padding-right:2px}.skin-web .doc-b>.b-tbl{margin-left:-10px;margin-right:-10px}} /* 폰: 이름·금액은 한 덩어리로 두고 표는 옆으로 넘긴다. ✎ 칸은 오른쪽에 붙어 있다 */
.b-list{margin:4px 0 14px;padding-left:20px}
.b-list li{margin:3px 0}
.b-div{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font:11.5px var(--f-mono);opacity:.75}
.b-div::before,.b-div::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.b-sep{margin:18px 0;border:0;border-top:1px dashed rgba(0,0,0,.3)}
.b-say{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;margin:0 0 10px}
.b-say time{grid-column:1/-1;font:11px var(--f-mono);opacity:.65}
.b-say .b-who{font:700 13px var(--f-web);white-space:nowrap}
.b-say .b-line{min-width:0}
.b-cipher{margin:12px 0;padding:12px;font:20px/1.6 var(--f-mono);letter-spacing:.2em;word-break:break-all;background:rgba(0,0,0,.05)}
.b-msg{margin:8px 0}
.b-msg .b-who{display:block;margin:0 0 2px 4px;font:12px var(--f-web);opacity:.8}
.b-row{display:flex;align-items:flex-end;gap:6px}
.b-msg.me .b-row{flex-direction:row-reverse}
.b-bub{max-width:74%;padding:7px 11px;border-radius:12px;background:#fff;color:#1d2328;font:13.5px/1.55 var(--f-web);overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.b-msg.me .b-bub{background:#d3e5c8}
.b-msg time{flex:none;font:10.5px var(--f-mono);opacity:.7}
/* 단톡방: 시각 위에 안 읽은 사람 수 (노란 숫자) */
.b-at{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.b-msg.me .b-at{align-items:flex-end}
.b-unr{font:700 10.5px/1 var(--f-ui);color:#7a5200}

/* ───────── plain / report (수사 서류, 진술조서) ───────── */
.skin-report{background-color:#ecebe2;font-family:var(--f-mono)}
.skin-report .doc-h{padding-bottom:10px;border-bottom:2px solid #2b2823}
.skin-report .doc-t{font:800 19px/1.35 var(--f-doc);letter-spacing:.04em}
.skin-report .doc-b{font:13.5px/1.9 var(--f-mono)}
.skin-report .b-say .b-who{font-family:var(--f-mono)}
.skin-report::after{content:"";position:absolute;top:18px;right:18px;width:64px;height:64px;border:2px solid rgba(176,52,42,.35);border-radius:50%;transform:rotate(-12deg);pointer-events:none}
.case-view[data-frame="papers"] .skin-report .doc-h>*{padding-right:60px} /* 도장 테 자리를 비워 둔다 (좁은 화면에서 제목·안내가 테 밑으로 들어가지 않게) */

/* ───────── news (신문) ───────── */
.skin-news{padding:22px 26px 28px;background-color:#ede5d0;background-image:var(--noise),linear-gradient(180deg,rgba(120,90,40,.06),rgba(120,90,40,.14))}
.skin-news .doc-paper{padding-bottom:6px;border-bottom:3px double #2b2823;text-align:center;font:400 30px/1.1 var(--f-latin);letter-spacing:.02em}
.skin-news .doc-k{text-align:center;font-size:11px;border-bottom:1px solid #2b2823;padding-bottom:4px}
.skin-news .doc-t{margin-top:10px;font:900 24px/1.3 var(--f-old);text-align:center}
.skin-news .doc-m{text-align:center}
.skin-news .doc-b{font:15px/1.85 var(--f-old);text-align:justify;word-break:normal} /* 옛 신문 단은 글자 단위로 끊어 양쪽을 맞춘다 */
@container stage (min-width:900px){.skin-news .doc-b{column-count:2;column-gap:28px;column-rule:1px solid rgba(0,0,0,.2)}}
.skin-news .b-img{break-inside:avoid;filter:grayscale(1) contrast(1.1)}
.skin-news .b-h{font-family:var(--f-old);text-align:center}
/* 왼쪽(또는 오른쪽)에 기사가 더 있으면 그쪽 끝이 흐려진다 (js colEdge). 끝 줄도 읽히게 다 지우지는 않는다 */
.skin-news.vertical .doc-b.more-l{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 26px);mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 26px)}
.skin-news.vertical .doc-b.more-r{-webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,.3),#000 26px);mask-image:linear-gradient(270deg,rgba(0,0,0,.3),#000 26px)}
.skin-news.vertical .doc-b.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 26px calc(100% - 26px),rgba(0,0,0,.3));mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 26px calc(100% - 26px),rgba(0,0,0,.3))}
.skin-news.vertical .doc-b{writing-mode:vertical-rl;column-count:auto;width:100%;height:min(62vh,540px);overflow-x:auto;text-align:start;line-height:2} /* 너비를 묶어야 좁은 화면에서 첫 줄(오른쪽)이 잘리지 않고 옆으로 넘겨 읽힌다 */
.skin-news.vertical .b-p{margin:0 0 0 14px}
.skin-news.vertical .pin{writing-mode:horizontal-tb;margin:6px 0 0}
/* 세로쓰기 신문 속 사진: 가로쓰기의 width:100% 가 먹지 않아 원래 크기(1280px)로 튀어나와 잘리던 것을, 한눈에 보이는 단 크기 안으로 줄인다 */
.skin-news.vertical{container-type:inline-size}
.skin-news.vertical .b-img img{width:auto;height:auto;max-width:calc(100cqw - 56px);max-height:calc(min(62vh,540px) - 44px)}
.skin-news.vertical .b-img svg{width:calc(100cqw - 56px);max-height:calc(min(62vh,540px) - 44px)}
.skin-news.vertical .b-img :is(.cens,.art-wrap){height:fit-content}
.skin-news.vertical .cens-l{writing-mode:horizontal-tb}
/* 날짜 줄·쪽수는 활판 로마자 (1980년 뒤 신문은 맨 아래 시대 기본값에서 명조로). 신문 속 표·사진 설명·말한 사람도 신문 활자로 */
.skin-news .doc-k,.skin-news .doc-m{font-family:var(--f-latin)}
.skin-news :is(.b-tbl table,.b-tbl caption,.b-img figcaption,.b-say .b-who){font-family:inherit}

/* ───────── letter (편지, 손글씨) ───────── */
.skin-letter{background-color:#f1e9d4;background-image:var(--noise),linear-gradient(90deg,transparent 49.6%,rgba(0,0,0,.06) 50%,transparent 50.4%),linear-gradient(180deg,transparent 33%,rgba(0,0,0,.05) 33.3%,transparent 33.6%,transparent 66.3%,rgba(0,0,0,.05) 66.6%,transparent 67%)}
.skin-letter .doc-t{font:400 26px/1.25 var(--f-hand2)}
.skin-letter .doc-m{font-size:11.5px}
.skin-letter .doc-b{font:23px/1.55 var(--f-hand2);color:#2b2a3a}
.skin-letter .b-p{margin-bottom:10px}
/* 쓴 사람마다 다른 필체와 잉크 (문서 cls). 제목은 기록실이 붙인 이름표라 그대로 둔다 */
.doc.f-yeon .doc-b,.doc.f-yeon .b-sign{font:20px/1.6 var(--f-yeon)}
.doc.f-dokdo .doc-b,.doc.f-dokdo .b-sign{font:22px/1.5 var(--f-dokdo)}
.doc.f-gaegu .doc-b,.doc.f-gaegu .b-sign{font:700 19px/1.6 var(--f-gaegu);letter-spacing:.02em}
.doc.f-dohyeon .doc-b,.doc.f-dohyeon .b-sign{font:18px/1.75 var(--f-dohyeon);letter-spacing:.12em}
.doc.f-melody .doc-b,.doc.f-melody .b-sign{font:21px/1.55 var(--f-melody)}
/* 필체 더 — 서툰 연필 글씨 · 굵은 사인펜 · 동글동글한 글씨 · 또박또박 볼펜 · 2000년대 귀여운 글꼴 */
.doc.f-poor .doc-b,.doc.f-poor .b-sign{font:20px/1.6 var(--f-poor)}
.doc.f-eastsea .doc-b,.doc.f-eastsea .b-sign{font:24px/1.4 var(--f-eastsea)}
.doc.f-single .doc-b,.doc.f-single .b-sign{font:19px/1.65 var(--f-single)}
.doc.f-cute .doc-b,.doc.f-cute .b-sign{font:22px/1.45 var(--f-cute)}
.doc.f-gamja .doc-b,.doc.f-gamja .b-sign{font:20px/1.6 var(--f-gamja)}
.doc.f-old .doc-b,.doc.f-old .b-sign{font:17px/1.85 var(--f-old)}
.doc.f-pen .doc-b,.doc.f-pen .b-sign{font:22px/1.5 var(--f-hand)}
.doc.typed .doc-b,.doc.typed .b-sign{font:14.5px/1.85 var(--f-type);letter-spacing:.02em;color:#232120}
.doc.typed .b-p{text-shadow:.3px 0 0 currentColor}
.doc.typed.skin-letter .b-sign{font:13px/1.5 var(--f-mono);opacity:.7}
.doc[class*="ink-"] .doc-b .b-p,.doc[class*="ink-"] .b-sign{color:var(--ink)}
.doc.ink-red{--ink:#8a2015}.doc.ink-purple{--ink:#4e2d6e}.doc.ink-blue{--ink:#1f3d86}.doc.ink-navy{--ink:#1f2a44}
.doc.ink-sepia{--ink:#3e2a19}.doc.ink-black{--ink:#1d1b1a}
/* 문단 하나만 다른 필체·잉크 (블록 cls) — 책상 위 포스트잇, 사진 속 쪽지 한 장 */
.doc-b .f-yeon{font:20px/1.55 var(--f-yeon)}.doc-b .f-dokdo{font:22px/1.45 var(--f-dokdo)}.doc-b .f-gaegu{font:700 19px/1.55 var(--f-gaegu)}
.doc-b .f-melody{font:21px/1.5 var(--f-melody)}.doc-b .f-poor{font:20px/1.55 var(--f-poor)}.doc-b .f-eastsea{font:24px/1.35 var(--f-eastsea)}
.doc-b .f-single{font:19px/1.6 var(--f-single)}.doc-b .f-cute{font:22px/1.4 var(--f-cute)}.doc-b .f-gamja{font:20px/1.55 var(--f-gamja)}.doc-b .f-pen{font:22px/1.45 var(--f-hand)}
.doc-b :is(.ink-red,.ink-purple,.ink-blue,.ink-navy,.ink-sepia,.ink-black){color:var(--ink)}
.doc-b .ink-red{--ink:#8a2015}.doc-b .ink-purple{--ink:#4e2d6e}.doc-b .ink-blue{--ink:#1f3d86}.doc-b .ink-navy{--ink:#1f2a44}.doc-b .ink-sepia{--ink:#3e2a19}.doc-b .ink-black{--ink:#1d1b1a}
.doc.ink-pencil{--ink:#4d4d4f}.doc.ink-pencil .doc-b .b-p{opacity:.92;text-shadow:0 0 .6px rgba(60,60,64,.5)}
/* 만년필·펜 잉크는 종이에 조금 번진다 */
.doc.ink-red .doc-b .b-p,.doc.ink-purple .doc-b .b-p,.doc.ink-sepia .doc-b .b-p{text-shadow:0 0 .7px color-mix(in srgb,var(--ink) 55%,transparent)}

/* ───────── telegram (전보) ───────── */
.skin-telegram{background-color:#efe4b8;border-top:10px solid #c9b46a}
.skin-telegram .doc-t{font:700 15px/1.4 var(--f-type);letter-spacing:.12em;text-transform:uppercase}
/* 전보 띠: 줄마다 붙인 종이 띠. 인라인+::after 줄바꿈은 빈 띠 조각을 다음 줄 앞에 남겨서, 블록 하나에 줄 높이마다 띠를 그린다 */
.skin-telegram .doc-b .b-p{width:fit-content;max-width:100%;padding:0 8px;margin:0 0 6px;font:14px/2.4 var(--f-mono);letter-spacing:.08em;background:linear-gradient(180deg,transparent 15%,#fbf8ec 15% 85%,transparent 85%) 0 0/100% 2.4em repeat-y;filter:drop-shadow(0 1px .6px rgba(0,0,0,.22))}

/* ───────── ledger (장부, 숙박부, 출입 기록) ───────── */
.skin-ledger{background-color:#ebe3cb}
.skin-ledger .doc-t{font:700 18px/1.3 var(--f-doc)}
.skin-ledger .b-tbl table{font:14px/1.5 var(--f-hand2);font-size:18px}
.skin-ledger .b-tbl th{font:700 11px/1.35 var(--f-mono);background:rgba(90,60,20,.12)}
.skin-ledger .b-tbl td{border-bottom:1px solid rgba(84,116,158,.45);border-right:1px solid rgba(176,52,42,.2)}
/* 기계로 뽑은 장부(전산 출력·회신 공문)와 타자 친 장부: 손글씨 대신 인쇄 글자, 괘선 대신 얇은 줄 */
.doc.printed{background-color:#f4f3ee}
.doc.printed .b-tbl table{font:12.5px/1.5 var(--f-mono)}
.doc.printed .b-tbl td,.doc.typed .b-tbl td{border-right:0;border-bottom:1px solid rgba(0,0,0,.12)}
.doc.printed .b-tbl th{background:rgba(0,0,0,.06)}
/* 노트북 화면(현행 사건)에 뜨는 장부는 모두 전산 조회·회신 공문·통장 인자 — printed 를 안 달아도 인쇄 글자로 */
.case-view[data-frame="laptop"] .skin-ledger{background-color:#f4f3ee}
.case-view[data-frame="laptop"] .skin-ledger .b-tbl table{font:12.5px/1.5 var(--f-mono)}
.case-view[data-frame="laptop"] .skin-ledger .b-tbl td{border-right:0;border-bottom:1px solid rgba(0,0,0,.12)}
@container stage (max-width:520px){.case-view:not([data-frame="laptop"]) .skin-ledger:not(.printed) .b-tbl td{font-size:15.5px;line-height:1.35}} /* 좁은 화면: 붓글씨 장부 표는 12.5px 로 줄면 읽히지 않는다 */
.case-view[data-frame="laptop"] .skin-ledger .b-tbl th{background:rgba(0,0,0,.06)}
.doc.typed .b-tbl table{font:13px/1.55 var(--f-type)}
.doc.typed .b-tbl td{border-bottom-style:dotted;border-bottom-color:rgba(0,0,0,.28)}

/* ───────── card (증거물 카드) ───────── */
.skin-card{max-width:560px;background-color:#f7f3e8;border:1px solid #bdb39b;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.skin-card .doc-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline;border-bottom:1px solid #2b2823;padding-bottom:8px}
.skin-card .doc-t{font:800 17px/1.3 var(--f-doc)}
.skin-card .doc-m{margin:0;font:12px/1.4 var(--f-mono);color:var(--red)}
.skin-card .b-img>svg,.skin-card .b-img>img{border:6px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.skin-card .doc-b{font:13.5px/1.8 var(--f-mono)}

/* ───────── transcript (녹취록) ───────── */
.skin-transcript{background-color:#eeeee6;background-image:var(--noise),repeating-linear-gradient(180deg,transparent 0 27px,rgba(0,0,0,.05) 27px 28px)}
.skin-transcript .doc-t{font:700 17px/1.35 var(--f-mono)}
.skin-transcript .doc-b{font:13.5px/1.85 var(--f-mono)}
.skin-transcript .b-say .b-who{font-family:var(--f-mono);color:#3c4b60}

/* ───────── memo (쪽지) ───────── */
.skin-memo{max-width:460px;transform:rotate(-.8deg);background-color:#f3e7a6;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.skin-memo .doc-t{font:400 26px/1.2 var(--f-hand)}
.skin-memo .doc-b{font:22px/1.45 var(--f-hand)}

/* ───────── photo (사진 인화) ───────── */
.skin-photo{max-width:560px;padding:16px 16px 20px;background:#fbfaf5}
.skin-photo .doc-h{order:2}
.skin-photo .doc-t{font:400 24px/1.2 var(--f-hand)}
.skin-photo .b-img{margin:0 0 12px}

/* ───────── web (현대 웹) ───────── */
.skin-web{padding:0;background:#fffdf9;color:#262521;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.skin-web .doc-h{margin:0;padding:12px 18px 10px;background:var(--bar,#3f5a6b);color:#fff}
.skin-web .doc-paper{margin:0 0 4px;font:800 13px/1 var(--f-web);letter-spacing:.02em;opacity:.9}
.skin-web .doc-t{font:800 17px/1.35 var(--f-web)}
.skin-web .doc-m{opacity:1}
.skin-web .doc-b{padding:14px 18px 18px;font:14px/1.7 var(--f-web)}
.skin-web .b-img>svg,.skin-web .b-img>img{max-width:420px}

/* ───────── chat (메신저) ───────── */
.skin-chat{padding:0;background:#b7c6cf;color:#1d2328}
.skin-chat .doc-h{margin:0;padding:10px 14px;background:#c9d5dc}
.skin-chat .doc-t{font:800 15px/1.3 var(--f-web)}
.skin-chat .doc-b{padding:6px 12px 16px}

/* ───────── sms (2000년대 폴더폰) ───────── */
.skin-sms{max-width:360px;padding:18px 16px 22px;border-radius:26px;background:linear-gradient(180deg,#5b5f66,#3b3e44);color:#1b2a12;box-shadow:0 8px 20px rgba(0,0,0,.4)}
/* 액정 글자는 비트맵 (--f-pixel = 갈무리11, 12px 배수여야 또렷하다. 사건이 f-pixel 을 부른다) */
.skin-sms .doc-h{margin:0 0 8px;padding:6px 10px;border-radius:6px 6px 0 0;background:#9fb07a;font:12px var(--f-pixel)}
.skin-sms .doc-t{font:700 12px/1.3 var(--f-pixel)}
.skin-sms .doc-m{margin:2px 0 0;font:12px/1.4 var(--f-pixel)}
.skin-sms .doc-b{padding:10px;border-radius:0 0 6px 6px;background:#b8c890;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 2px);font:12px/1.75 var(--f-pixel)}
.skin-sms .b-bub{background:transparent;box-shadow:none;border:1px solid rgba(27,42,18,.4);border-radius:3px;font:12px/1.6 var(--f-pixel);color:#1b2a12}
.skin-sms .b-msg .b-who,.skin-sms .b-div,.skin-sms .b-note{font:12px/1.5 var(--f-pixel)}
.skin-sms .b-msg.me .b-bub{background:rgba(27,42,18,.1)}

/* ───────── home (2000년대 미니홈피) ───────── */
.skin-home{padding:14px;border-radius:10px;background:linear-gradient(135deg,#9bc3e6,#c9b3e0);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.skin-home .doc-h{margin:0;padding:10px 14px;border-radius:8px 8px 0 0;background:#fff;border-bottom:1px dashed #f1a7c1}
/* 굴림 9pt 비트맵 본문(--f-pixel)과 도토리로 산 글꼴 아이템(--f-gamja) — 사건이 f-pixel · f-gamja 를 부른다 */
.skin-home .doc-paper{margin:0;font:700 12px var(--f-pixel);color:#d6336c}
.skin-home .doc-t{font:23px/1.25 var(--f-gamja);color:#3a5f9e}
.skin-home .doc-m{font:12px/1.4 var(--f-pixel);color:#666}
.skin-home .doc-b{padding:12px 14px;border-radius:0 0 8px 8px;background:#fff;font:12px/1.8 var(--f-pixel);color:#333}
.skin-home .b-h{font:19px/1.3 var(--f-gamja);color:#d6336c}
.skin-home .b-tbl table,.skin-home .b-img figcaption,.skin-home .b-tbl caption{font:12px/1.6 var(--f-pixel)}
.skin-home .b-tbl th{font:700 12px/1.35 var(--f-pixel)}

/* ───────── files (탐색기) ───────── */
.skin-files{background:#fffdf8;border:1px solid #b9bec7;border-radius:6px;overflow:hidden}
.skin-files .doc-h{margin:0;padding:8px 14px;background:linear-gradient(#f4f5f7,#e3e6ea);border-bottom:1px solid #c5cad2}
.skin-files .b-tbl td:first-child{white-space:nowrap}
.skin-files .doc-t{font:700 15px/1.3 var(--f-web)}
.skin-files .doc-b{font:13px/1.7 var(--f-web)}

/* ───────── cipher (암호 해독지) ───────── */
.skin-cipher{background-color:#e7e4d8;background-image:var(--noise),linear-gradient(90deg,rgba(84,116,158,.1) 1px,transparent 1px),linear-gradient(rgba(84,116,158,.1) 1px,transparent 1px);background-size:auto,20px 20px,20px 20px}
.skin-cipher .doc-t{font:700 17px var(--f-type);letter-spacing:.06em}

/* ── 재구성 판 (코르크 보드) */
.skin-board{background-color:#b8925f;background-image:radial-gradient(rgba(60,35,10,.35) 1px,transparent 1.4px),radial-gradient(rgba(255,240,210,.18) 1px,transparent 1.4px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px;color:#231a10}
.skin-board .doc-h{padding:8px 12px;background:#f7f1de;box-shadow:0 2px 4px rgba(0,0,0,.3);transform:rotate(-.6deg)}
.skin-board .doc-t{font:400 28px/1.1 var(--f-hand)}
.skin-board .doc-b>.b-p,.skin-board .doc-b>.b-note{padding:6px 10px;background:rgba(247,241,222,.92)}
.skin-board .tl-e{position:relative;background:#fffbea;border-left-color:#c9463a}
/* 노트북 속 재구성: 코르크 판이 아니라 형사과 화이트보드 */
.case-view[data-frame="laptop"] .skin-board{background:#fbfcfd;background-image:none;border:1px solid #d8dde5}
.case-view[data-frame="laptop"] .skin-board .doc-h{background:transparent;box-shadow:none;transform:none;border-bottom:2px solid #3f5a80}
.case-view[data-frame="laptop"] .skin-board .doc-t{font:700 17px/1.3 var(--f-web)}
.case-view[data-frame="laptop"] .skin-board .tl-e{background:#fff;border-left-color:#3f5a80}
.skin-board .tl-e::before{content:"";position:absolute;top:-4px;left:50%;width:9px;height:9px;border-radius:50%;background:#c9463a;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.skin-board .c-done{padding:8px 10px;background:#f7f1de}
/* 화면 속 판은 공유 문서 앱: 압정 없이 카드, 글씨는 화면 글꼴, 순서 버튼은 창 단추 */
.case-view[data-frame="laptop"] .skin-board .tl-e{border:1px solid #dfe3ea;border-left:4px solid #3f5a80;border-radius:6px;box-shadow:0 1px 2px rgba(20,30,50,.08)}
.case-view[data-frame="laptop"] .skin-board .tl-e::before{content:none}
.case-view[data-frame="laptop"] .skin-board .tl-e:is(.hit,.ok){border-left-color:#2f8a57}
.case-view[data-frame="laptop"] .skin-board .tl-e.ok{background:#f1f8f3}
.case-view[data-frame="laptop"] .skin-board .tl-t{font:14px/1.5 var(--f-web)}
.case-view[data-frame="laptop"] .skin-board :is(.doc-b>.b-p,.doc-b>.b-note,.c-done){border-radius:4px;background:#f2f5f9}
.case-view[data-frame="laptop"] .skin-board .tl-mv button{border:1px solid #c3cad6;border-radius:4px;background:linear-gradient(#fff,#edf0f4);color:#2c3440;font-family:var(--f-ui)}
@media (hover:hover){.case-view[data-frame="laptop"] .skin-board .tl-mv button:hover:not(:disabled){background:#e4ebf5;border-color:#8fa3c2}}

/* ── 감정서 (감식과) */
.skin-lab{background-color:#eef0ea;font-family:var(--f-mono)}
.skin-lab .doc-h{padding-bottom:8px;border-bottom:3px double #3a4a40}
.skin-lab .doc-k{color:#3a6a52;letter-spacing:.14em}
.skin-lab .doc-t{font:800 18px/1.35 var(--f-doc)}
.skin-lab .doc-b{font:13.5px/1.8 var(--f-mono)}
.skin-lab .cmp-ev{background:#fff;border-color:#6d8a78}
/* 화면 속 .txt 파일: 포스트잇이 아니라 메모장 창 (제목 줄 + 고정폭 글씨) */
.doc.txt{max-width:560px;padding:0 0 16px;transform:none;border:1px solid #cdd1d6;border-radius:8px;background:#fff;color:#1f2328;box-shadow:0 10px 28px rgba(0,0,0,.2)}
.doc.txt .doc-h{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;padding:8px 14px 7px;border-bottom:1px solid #e3e6ea;border-radius:8px 8px 0 0;background:#f3f4f6}
.doc.txt .doc-t{font:600 13px/1.3 var(--f-web)}
.doc.txt .doc-t::after{content:var(--t-notepad," — 메모장");font-weight:400;color:#6b7280}
.doc.txt .doc-m{margin:0 0 0 auto;font:11px/1.4 var(--f-mono);color:#6b7280}
.doc.txt .doc-b{padding:0 18px;font:14px/1.8 var(--f-mono);color:#1f2328}
.doc.txt .b-p{margin:0}
/* 감시 카메라·블랙박스 화면 글자 (engine block 의 osd) */
.osd-wrap{position:relative;display:block}
.osd-wrap>img{display:block;width:100%;height:auto;background:#ddd6c4}
.skin-card .osd-wrap>img{border:6px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.osd{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;gap:12px;padding:9px 11px;pointer-events:none;font:700 12px/1 var(--f-mono);letter-spacing:.06em;color:#f3f3ec;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 0 rgba(0,0,0,.6);opacity:.92}
.skin-card .osd{inset:6px 6px auto}
.osd i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#e8392f;vertical-align:1px;animation:recBlink 1.2s steps(2,start) infinite}
@keyframes recBlink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.osd i{animation:none}}
@media (max-width:520px){.osd{font-size:10px;padding:6px 8px;line-height:1.3}.osd>span:last-child{text-align:right}}

/* ───────── 글꼴: 표·사진 설명도 그 서류의 활자로 (기본은 웹 고딕이라 옛 서류 속 표만 요즘 글씨가 된다) ───────── */
.doc:is(.skin-report,.skin-card,.skin-lab,.skin-transcript,.skin-telegram) :is(.b-tbl table,.b-tbl caption,.b-img figcaption){font-family:inherit}

/* ───────── 시대 기본값 (js renderCase 의 data-era: old = 1945년 전 · mid = 1980년 전 · "" = 그 뒤). 사건 css 로 덮어쓴다 ───────── */
/* 1945년 전: 조서·감정서·물품 카드 본문은 옛 책 같은 바탕(--f-batang, 사건이 fonts:['batang']), 머리 줄·표 머리는 활판 로마자. 보고서 양식(rep-view)은 지금 쓰는 것이라 빼 둔다 */
:where(.case-view[data-era="old"]) .doc:is(.skin-report,.skin-card,.skin-lab):not(.rep-view) .doc-b{font-family:var(--f-batang);font-size:14.5px;line-height:1.85}
:where(.case-view[data-era="old"]) .doc:is(.skin-report,.skin-lab):not(.rep-view) .b-say .b-who{font:700 14px var(--f-batang)}
:where(.case-view[data-era="old"]) .doc:not(.rep-view) :is(.doc-k,.doc-m){font-family:var(--f-latin)}
:where(.case-view[data-era="old"]) .doc:not(.rep-view) .b-tbl th{font-family:var(--f-latin);letter-spacing:.02em}
/* 1980년 뒤의 신문: 송명 같은 옛 활자 대신 요즘 신문 명조 */
:where(.case-view[data-era=""]) .skin-news :is(.doc-t,.doc-b,.b-h,.doc-k,.doc-m){font-family:var(--f-doc)}
.b-tbl :is(td,th).nw{white-space:nowrap} /* 짧은 칸(이름·머리글)은 한 줄로 — 중국어·일본어에서 한 글자씩 꺾이지 않게 (js docHtml rows) */
/* 휴대폰 폭: 칸이 많은 표는 줄마다 쌓는다. 머리글은 칸 앞에 작게, ✎ 은 줄 오른쪽 위에 */
@container stage (max-width:520px){
  .b-tbl.stack{overflow:visible}
  .b-tbl.stack :is(table,tbody){display:block}
  .b-tbl.stack thead{display:none}
  .b-tbl.stack tr{display:block;position:relative;padding:7px 38px 7px 0;border-bottom:1px solid rgba(0,0,0,.16)}
  .b-tbl.stack td{display:block;min-width:0;padding:1px 4px !important;border:0 !important;white-space:normal}
  .b-tbl.stack td:first-child{font-weight:700}
  .b-tbl.stack td[data-h]{display:flow-root;padding-left:90px !important}
  .b-tbl.stack td[data-h]::before{content:attr(data-h);float:left;width:80px;margin-left:-86px;overflow-wrap:anywhere;font:700 10.5px/1.7 var(--f-mono);letter-spacing:.03em;opacity:.6} /* 긴 머리글은 줄을 바꿔도 다음 칸을 덮지 않고 그 칸을 늘린다 */
  .b-tbl.stack td:not(.pc):is(:empty,[data-nil]){display:none}
  .b-tbl.stack td.pc{position:absolute;top:6px;right:0;width:auto;background:none !important;box-shadow:none !important}
}
/* PC: 읽기 칸보다 넓은 표도 같은 모양으로 (js tblEdge 가 .wide 를 붙인다) */
.b-tbl.stack.wide{overflow:visible}
.b-tbl.stack.wide :is(table,tbody){display:block}
.b-tbl.stack.wide thead{display:none}
.b-tbl.stack.wide tr{display:block;position:relative;padding:7px 38px 7px 0;border-bottom:1px solid rgba(0,0,0,.16)}
.b-tbl.stack.wide td{display:block;min-width:0;padding:1px 4px !important;border:0 !important;white-space:normal}
.b-tbl.stack.wide td:first-child{font-weight:700}
.b-tbl.stack.wide td[data-h]{display:flow-root;padding-left:90px !important}
.b-tbl.stack.wide td[data-h]::before{content:attr(data-h);float:left;width:80px;margin-left:-86px;overflow-wrap:anywhere;font:700 10.5px/1.7 var(--f-mono);letter-spacing:.03em;opacity:.6} /* 긴 머리글은 줄을 바꿔도 다음 칸을 덮지 않고 그 칸을 늘린다 */
.b-tbl.stack.wide td:not(.pc):is(:empty,[data-nil]){display:none}
.b-tbl.stack.wide td.pc{position:absolute;top:6px;right:0;width:auto;background:none !important;box-shadow:none !important}
/* 전보의 가타카나는 낱말(띄어 쓴 덩어리) 가운데서 줄이 갈리지 않게 — 「ジ / ユントク」 */
.b-p.jp{word-break:keep-all;line-break:strict}