/* Monologue Gaze — 실시간 수사(live): 수사 시계, 휴대폰 알림, 단톡방, 영장·공문 신청서, 기록실의 당직 칸
 * 시대는 2020년대. 화면 틀(laptop) 안의 것은 운영체제·메신저처럼, 종이 신청서는 관공서 서식처럼. */

/* ───────── 화면 아래 줄: 수사 시계 · 기한 · 기다리기 ───────── */
.scr-bar.live{justify-content:space-between;gap:12px;height:30px;padding:0 10px 0 12px;white-space:nowrap;user-select:none}
.lv-clock{font:12.5px/1 var(--f-mono);letter-spacing:.03em}
.lv-clock b{margin-right:6px;padding:2px 5px 1px;border-radius:3px;background:rgba(255,255,255,.14);font-weight:700}
.lv-clock.tick{animation:lvTick 1s ease-out}
@keyframes lvTick{from{color:#ffd46a;text-shadow:0 0 6px rgba(255,196,80,.55)}}
@media (prefers-reduced-motion:reduce){.lv-clock.tick{animation:none}}
.lv-dl{margin-left:auto;font:12px/1 var(--f-web);opacity:.85}
.lv-dl.hot{color:#ffb454;opacity:1}
.lv-dl.over{color:#ff7a6b;opacity:1;font-weight:700}
.lv-dl.done{opacity:.55}
.lv-wait{flex:none;height:20px;padding:0 10px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(255,255,255,.08);color:inherit;font:11px/18px var(--f-web);cursor:pointer}
@media (hover:hover){.lv-wait:hover{background:rgba(255,255,255,.18)}}
.lv-wait.over,.lv-wait.arm{border-color:#e0685c;color:#ffb3aa} /* 기다리면 기한을 넘긴다 */
.case-view[data-frame="crt"] .lv-wait:is(.over,.arm){border-color:#b0342a;color:#b0342a}
.case-view[data-frame="crt"] .lv-clock b{background:rgba(0,0,0,.12)}
.case-view[data-frame="crt"] .lv-step{color:#9a5a00}
.case-view[data-frame="crt"] .lv-wait{border-color:#8c8a84;background:#e8e5dd;border-radius:2px}
@container stage (max-width:600px){ .scr-bar.live{height:auto;min-height:30px;flex-wrap:wrap;padding:5px 10px;row-gap:3px} .lv-clock{font-size:11.5px;letter-spacing:0} .lv-wait{margin-left:auto;padding:0 8px;font-size:10.5px} .lv-dl{order:3;flex-basis:100%;margin-left:0;font-size:11px} }

/* ───────── 휴대폰 알림 (오른쪽 위에 쌓인다) ─────────
   맨 위 줄(공책 머리의 기록실·소리 단추, 휴대폰에선 화면 탭 줄과 「목록으로」)은 가리지 않게 그 아래부터 */
.lv-notes{position:fixed;top:calc(100px + env(safe-area-inset-top,0px));right:12px;right:max(12px,env(safe-area-inset-right,0px));z-index:94;display:flex;flex-direction:column;gap:8px;width:min(330px,calc(100vw - 24px));pointer-events:none}
.lv-note{display:grid;grid-template-columns:1fr;gap:1px;width:100%;padding:9px 12px 10px;border:0;border-radius:14px;background:rgba(246,247,249,.94);color:#1b1f24;text-align:left;box-shadow:0 10px 26px rgba(0,0,0,.38),0 0 0 1px rgba(0,0,0,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:13px/1.45 var(--f-phone);cursor:pointer;pointer-events:auto;opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .28s,transform .28s}
.lv-note.on{opacity:1;transform:none}
/* 단톡방 위쪽을 읽는 중에 새 말이 오면: 칸 아래에 붙는 「새 메시지 ↓」 */
.lv-more{position:sticky;bottom:12px;z-index:3;display:block;margin:10px auto 0;padding:6px 14px;border:0;border-radius:16px;background:#fff;color:#2b3440;font:700 12px/1.3 var(--f-phone);box-shadow:0 4px 14px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.06);cursor:pointer;animation:lvMore .25s ease-out}
@keyframes lvMore{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.lv-more{animation:none}}
.lv-note{touch-action:none;-webkit-user-select:none;user-select:none} /* 밀어 치우기: 끄는 동안 손가락을 따라오고 */
.lv-note.drag{transition:none;cursor:grabbing}
@media (hover:hover){.lv-note:hover{background:#fff}}
.lv-app{display:flex;justify-content:space-between;font:10.5px/1.4 var(--f-phone);letter-spacing:.02em;color:#6b7280;text-transform:none}
.lv-app time{font-family:var(--f-mono)}
.lv-note b{font-weight:800}
.lv-msg{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#30363d}
.lv-note.late{background:rgba(255,236,232,.96)}
.lv-note.late b{color:#b0342a}
@media (prefers-reduced-motion:reduce){ .lv-note{transition:none;transform:none} }
@media (max-width:560px){.lv-notes{left:8px;right:8px;width:auto}}
@media (orientation:landscape) and (max-height:500px){.lv-notes{width:min(300px,40vw);gap:6px}.lv-msg{-webkit-line-clamp:1}} /* 가로 휴대폰: 알림이 화면 반을 덮지 않게 한 줄로 */ /* 휴대폰에서는 알림이 화면 폭을 거의 다 쓴다 (실제 휴대폰 배너처럼) */

/* ───────── 탭의 새 소식 수 ───────── */
.tab-n{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#d63e32;color:#fff;font:700 10.5px/17px var(--f-web);text-align:center}

/* ───────── 단톡방 ───────── */
.lv-room .item-t{display:flex;align-items:center;gap:6px}
.lv-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d63e32;color:#fff;font:700 10.5px/18px var(--f-web);text-align:center}
.lv-feed .doc-b{display:flow-root}
.lv-sys{clear:both;margin:10px auto;max-width:92%;padding:5px 10px;border-radius:10px;background:rgba(0,0,0,.08);font:12px/1.5 var(--f-web);text-align:center;color:#2b3137}
.lv-sys time{font-family:var(--f-mono);opacity:.7}
.lv-sys.late{background:rgba(176,52,42,.14);color:#7a2019}
.lv-attrow{margin:-2px 0 8px 4px}
.lv-attrow.me{text-align:right;margin-right:4px}
.lv-att{padding:5px 10px;border:1px solid rgba(0,0,0,.14);border-radius:9px;background:#fff;color:#1d2328;font:12px/1.4 var(--f-web);cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.lv-att::before{content:"";display:inline-block;width:10px;height:12px;margin-right:6px;vertical-align:-1px;border:1.4px solid currentColor;border-radius:1px 4px 1px 1px;opacity:.6}
@media (hover:hover){.lv-att:hover{background:#f3f6f8}}

/* ───────── 영장·공문 신청서 (관공서 서식) ───────── */
.skin-form{--f-web:var(--f-sys);background:#fbfbf8;color:#1d1f22;font-family:var(--f-sys)} /* 2020년대 경찰 전산 양식 */
.skin-form .doc-h{padding-bottom:10px;border-bottom:2px solid #1d1f22}
.skin-form .doc-k{font:11px/1.4 var(--f-mono);letter-spacing:.12em;color:#5a5f66}
.skin-form .doc-t{font:700 18px/1.4 var(--f-sys);letter-spacing:-.01em}
.skin-form .doc-m{font-size:12px;color:#5a5f66}
.rq-t{width:100%;margin:12px 0 14px;border-collapse:collapse;font:13px/1.55 var(--f-web)}
.rq-t th{width:6.5em;padding:7px 10px;border:1px solid #9aa0a6;background:#eef0f2;font-weight:700;text-align:left;vertical-align:top;white-space:nowrap}
.rq-t td{padding:7px 10px;border:1px solid #9aa0a6}
.rq-why h4{margin:14px 0 6px;font:700 14px/1.4 var(--f-sys)}
.rq-why h4 small{font:12px var(--f-web);color:#5a5f66;font-weight:400}
/* 전산 신청서의 올리기 단추·고른 소명 메모 표시도 화면 양식대로 (보고서의 화면 양식과 같게 — 손글씨 ✓·연필 단추가 아니라) */
.skin-form .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){.skin-form .btn-hand:hover{background:#2551b0}}
.skin-form .rep-opt.on{border-left-color:#2f5fc8;background:#eef3fd}
.skin-form .rep-opt.on::after{left:10.5px;right:auto;top:10.5px;width:14px;height:14px;background:#2f5fc8;transform:none;animation:none}
.rq-no{margin:10px 0;padding:8px 12px;border-left:4px solid #b0342a;background:rgba(176,52,42,.07);font:13px/1.6 var(--f-web)}
.rq-no b{margin-right:6px;color:#b0342a}
.rq-no small{margin-left:6px;font:11px var(--f-mono);opacity:.7}
.rq-st{margin:6px 0 10px;font:13px/1.6 var(--f-web)}
.rq-st small{opacity:.7;white-space:nowrap}
.rq-stamp+.rq-st{padding-right:92px} /* 도장이 오른쪽 위에 걸치니, 접수·회신 줄의 글자가 그 밑으로 들어가지 않게 (긴 언어·폰) */
.rq-stamp{margin:14px 0 4px;height:0;text-align:right;pointer-events:none}
.rq-stamp span{display:inline-block;padding:6px 12px 5px;border:3px double #b0342a;color:#b0342a;font:800 18px/1 var(--f-doc);letter-spacing:.2em;transform:rotate(-9deg) translateY(-4px);opacity:.85;mix-blend-mode:multiply}
.rq-stamp.ok span{border-color:#2f5d9a;color:#2f5d9a}
.rq-stamp.fresh span{animation:rqStamp .24s cubic-bezier(.2,1.4,.5,1) 1.35s both} /* 막 올린 신청서: 큰 도장이 들리는 순간 서류에 찍힌다 */
@keyframes rqStamp{from{opacity:0;transform:rotate(-9deg) translateY(-4px) scale(1.6)}}
@keyframes rqStampOn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ .rq-stamp.fresh span{animation:rqStampOn .01s .9s both} }
.rq-i.no .item-m{color:#b0342a}
.rq-i.wait .item-m::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#e0a33a;animation:lv-blink 1.4s ease-in-out infinite}
@keyframes lv-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .rq-i.wait .item-m::before{animation:none} }
.lv-waitrow{margin:8px 0 4px}
.lv-waitrow button{padding:6px 12px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:12px var(--f-web);cursor:pointer;opacity:.85}
@media (hover:hover){.lv-waitrow button:hover{opacity:1;background:rgba(0,0,0,.05)}}

/* 종결 뒤: 수사에 든 시간 */
.lv-fin{margin:8px 0 0;font:12px var(--f-mono);letter-spacing:.03em;opacity:.8}

/* ───────── 기록실: 당직 · 현행 사건 ───────── */
.duty{margin-top:44px}
.duty-h{margin:0;font:400 30px/1.1 var(--f-hand);color:#efe4c9}
.duty-h::before{content:"";display:inline-block;width:10px;height:10px;margin:0 10px 4px 0;border-radius:50%;background:#e5483b;box-shadow:0 0 0 3px rgba(229,72,59,.25);animation:lv-blink 2s ease-in-out infinite}
.duty-sub{margin:4px 0 16px;font-size:13px;color:#a99a7e}
.duty .drawer{margin-top:10px}
@media (prefers-reduced-motion:reduce){ .duty-h::before{animation:none} }

/* ───────── 현행 사건을 여는 장면: 옛 사진 대신 당직실 모니터 빛, 지령 시각 ───────── */
.case-intro.live{background:radial-gradient(ellipse at 50% 34%,#1b2632 0%,#07090c 72%)}
.case-intro.live .ci-bg{filter:blur(8px) saturate(.6) brightness(.3) hue-rotate(-8deg)}
.case-intro.live .ci-no{color:#ff8a7a}
.case-intro.live .ci-no::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 1px 0;border-radius:50%;background:#e5483b;box-shadow:0 0 10px #e5483b;animation:lv-blink 1.2s ease-in-out infinite}
.case-intro.live .ci-title{font-family:var(--f-ui);font-weight:800;letter-spacing:-.01em}
.case-intro.live .ci-when{font:500 14px/1.4 var(--f-mono);letter-spacing:.04em;color:#cdd5e1}
.case-intro.live .ci-line{font:400 clamp(16px,2.6vw,20px)/1.6 var(--f-ui);color:#e6ebf2;animation:ci-rise .9s .6s ease-out both}
@media (prefers-reduced-motion:reduce){ .case-intro.live .ci-no::before,.case-intro.live .ci-line{animation:none} }

/* 신청서 칸의 기다리기 단추도 아래 줄 단추처럼: 이번 기다림이 기한을 넘기면 붉게, 한 번 눌러 「한 번 더」 상태면 더 붉게 */
.lv-waitrow button:is(.arm,.over){border-color:#b0342a;color:#b0342a;background:rgba(176,52,42,.07);opacity:1}
/* 방금 한 일에 든 시간: 시계 옆에 잠깐 떴다 사라진다 */
.lv-step{display:inline-block;margin-left:7px;color:#ffd46a;font-weight:700;animation:lvStep 2.4s ease-out forwards}
@keyframes lvStep{0%{opacity:0;transform:translateY(3px)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.lv-step{animation:lvStepR 2.4s step-end forwards}@keyframes lvStepR{to{opacity:0}}}
.rq-no .rq-cost{display:block;margin-top:4px;font-size:.88em;opacity:.75} /* ★5 기각: 다시 올리면 드는 시간 */