/* 대화 심문 엔진 화면(InterrogationView) — 독립 스타일
   이 파일 하나만 불러오면 어떤 페이지에서도 같은 화면이 나온다. 색은 아래 변수만 바꾸면 된다. */
.mg-overlay.cf{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;background:#05080ce6;font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;color:#ece6d8;word-break:keep-all;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent}
.mg-overlay.cf *{box-sizing:border-box}
:where(.mg-overlay.cf) button{font-family:inherit;cursor:pointer;min-height:40px;border-radius:10px;border:1px solid #ffffff24;background:#1c2c38;color:#eef3f6;font-size:14px;padding:0 14px}
:where(.mg-overlay.cf) button:focus-visible{outline:2px solid #e2b24a;outline-offset:2px}
:where(.mg-overlay.cf) button.primary{background:#e8c17b;color:#1d1608;border-color:#f3d79d;font-weight:700}
:where(.mg-overlay.cf) button.ghost{background:transparent}
@keyframes recb{to{opacity:.2}}
/* 위 = 장면·녹음 조각·심리선·대화 기록, 아래 = 대화 | 증거 시트 */
.mg-overlay.cf{padding:0;align-items:stretch;height:100dvh;bottom:auto}
.cf-wrap{width:min(640px,100%);margin:0 auto;display:flex;flex-direction:column;height:100%;max-height:100dvh;background:#0e131a;overflow:hidden}
.cf-stage{position:relative;flex:0 0 clamp(180px,34dvh,320px);overflow:hidden;background:#1a1f27}
.cf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:blur(3px) brightness(.55) saturate(.85);transform:scale(1.05)}
.cf-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0e131a26 0%,#0e131a55 60%,#0e131a 100%);pointer-events:none}
.cf-bust{position:absolute;left:50%;transform:translateX(-50%);bottom:0;height:88%;z-index:1;filter:drop-shadow(0 6px 14px #000a);transition:opacity .2s}
.cf-top{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cf-rec,.cf-turn{background:#0a0d12c7;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:#ece6d8;display:flex;align-items:center;gap:8px;white-space:pre}
.cf-rec>i{width:8px;height:8px;border-radius:50%;background:#ff5a5a}.cf-rec>b{color:#ff8a8a;font-weight:800;letter-spacing:.04em}
.cf-rec.blink{animation:recb .25s 6 alternate}
.cf-tape{display:flex;gap:4px}.cf-tape i{width:14px;height:8px;border-radius:2px;border:1px solid #6b7480;box-sizing:border-box}.cf-tape i.on{background:#e2b24a;border-color:#e2b24a}
.cf-turn.low{color:#ffb35a}
.cf-therm{position:absolute;z-index:3;right:6px;top:52px;bottom:34px;width:34px;min-height:0;height:auto;padding:0;border:0;border-radius:0;background:none}
.cf-tw{position:absolute;left:0;right:0;top:0;bottom:44px}.cf-tube{position:absolute;left:12px;width:10px;top:0;bottom:0;border-radius:6px;overflow:hidden;display:flex;flex-direction:column}.cf-tube i{display:block;width:100%;flex:none}
.cf-mark{position:absolute;left:4px;right:4px;height:3px;border-radius:2px;background:#fff;box-shadow:0 0 6px #fffc;transition:bottom .4s}
.cf-therm small{position:absolute;left:0;right:0;bottom:0;height:40px;font-size:10px;line-height:1.1;color:#c3c9d1;writing-mode:vertical-rl;letter-spacing:.1em;display:flex;align-items:center;justify-content:center}
.cf-therm.off .cf-tube{filter:grayscale(1) brightness(.45)}.cf-therm.off .cf-mark{display:none}.cf-therm.off small::after{content:" · 탐정"}
.cf-rap{position:absolute;z-index:3;left:14px;bottom:30px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#c3c9d1}
.cf-dots{display:flex;gap:3px}.cf-dots i{width:16px;height:6px;border-radius:3px;background:#3a4350}.cf-dots i.on{background:#e2b24a}
.cf-habit{position:absolute;z-index:3;left:50%;transform:translateX(-50%);max-width:calc(100% - 96px);bottom:8px;background:#0a0d12c7;border-radius:999px;padding:3px 10px;font-size:12px;color:#d3d8de;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-sms{position:absolute;z-index:4;left:50%;bottom:36px;transform:translateX(-50%);background:#f3f6f9;color:#111;border-radius:12px;padding:7px 13px;font-size:13px;box-shadow:0 6px 18px #0008;white-space:nowrap}
.cf-log{flex:1 1 0;min-height:90px;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 10px;display:flex;flex-direction:column;gap:8px}
.cf-log>:first-child{margin-top:auto}
.cf-msg{max-width:86%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.5;opacity:.6;background:#1b1f26}
.cf-msg.now{opacity:1}
.cf-msg b{display:block;font-size:11px;color:#e2b24a;margin-bottom:2px}
.cf-msg.m-kun{align-self:flex-end;background:#1d2a3a;border-radius:14px 14px 4px 14px}.cf-msg.m-kun b{display:none}
.cf-msg.m-fm{align-self:flex-start;border-radius:14px 14px 14px 4px}
.cf-msg.m-fm.now{background:#262014;border:1px solid #6e5a2a;font-size:15px;font-weight:500}
.cf-msg.m-joel{align-self:flex-start;background:#182a20;border-radius:14px 14px 14px 4px}.cf-msg.m-joel b{color:#9fe0b2}
.cf-msg.m-narr{align-self:center;background:none;color:#9aa3ae;font-size:12.5px;font-style:italic;text-align:center;max-width:96%;padding:2px 6px}
.cf-msg.m-note{align-self:center;background:#2b2615;color:#ffd77a;font-size:13px;font-style:italic}
.cf-msg.m-gain{background:#18212d;color:#c9dcf3;font-style:normal;border:1px dashed #6f8fb8}
/* 아래 시트(A안): 대화 | 증거 · 그가 한 말 — 세로 목록, 대화 탭 맨 아래에 침묵 · 조엘 신호 고정 */
.cf-book{position:relative;flex:0 1 auto;max-height:46dvh;min-height:0;display:flex;flex-direction:column;gap:8px;background:#151b24;border-radius:20px 20px 0 0;padding:8px 14px max(12px,env(safe-area-inset-bottom));box-shadow:0 -8px 24px #0006;perspective:1400px}
.cf-grip{flex-shrink:0;width:36px;height:4px;border-radius:2px;background:#3a4350;align-self:center}
.cf-tabs{flex-shrink:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;background:#0e131a;border-radius:12px;padding:4px}
.cf-tabs button{min-height:38px;height:auto;border:0;border-radius:9px;background:transparent;color:#c3c9d1;font-size:14px;font-weight:500;padding:0 8px}
.cf-tabs button.on{background:#232c38;color:#ece6d8;font-weight:700}
.cf-tabs b{color:#e2b24a;font-weight:800;margin-left:2px}.cf-tabs b:empty{display:none}
.cf-tabs button.blink{animation:recb .25s 6 alternate}
.cf-cards{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px}
.cf-foot{flex-shrink:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cf-foot:empty{display:none}.cf-foot.one{grid-template-columns:1fr}
.cf-line{flex-shrink:0;min-height:48px;height:auto;text-align:left;border:1px solid #2c3644;border-radius:12px;background:#1b222d;color:#ece6d8;padding:10px 14px;font-size:14.5px;line-height:1.45;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cf-line:hover,.cf-line:focus-visible{border-color:#5a6a80;background:#212a37}
.cf-line .cf-kind{font-size:11px;font-weight:800;color:#e2b24a}
.cf-btn{min-height:46px;height:auto;border-radius:12px;font-size:14px;padding:8px 10px;line-height:1.35}
.cf-btn.k-silence{border:1px dashed #4a5563;background:transparent;color:#c3c9d1}
.cf-btn.k-ally{border:1px solid #4f9a6b;background:#182a20;color:#a9e3bd;font-weight:600}
.cf-btn:disabled{opacity:.4;cursor:default}
.cf-ev{flex-shrink:0;min-height:56px;height:auto;display:flex;align-items:center;gap:12px;text-align:left;padding:8px 12px;border:1px solid #6e5a2a;border-radius:12px;background:#231e14;color:#ece6d8}
.cf-ev.k-said{border:1px dashed #6f8fb8;background:#18212d}
.cf-evimg{width:40px;height:40px;object-fit:contain;flex:0 0 40px;border-radius:6px;background:#00000033}
.cf-evname{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cf-ev .cf-kind{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#e2b24a}.cf-ev.k-said .cf-kind{color:#9fc0e8}
.cf-ev .cf-text{font-size:14px;line-height:1.3;font-weight:700}.cf-ev.k-said .cf-text{color:#c9dcf3}
.cf-ev small{font-size:12.5px;line-height:1.4;color:#c4b99c}.cf-ev.k-said small{color:#b8cbe3;font-style:italic}
.cf-ev.used{opacity:.55}.cf-ev:disabled{cursor:default}
.cf-empty{margin:4px 2px;color:#9aa3ae;font-size:13px}
.cf-confirm{display:flex;flex-direction:column;gap:8px;padding-top:2px}.cf-confirm p{margin:0;font-size:14px;color:#ffd77a}.cf-confirm p b{font-size:15px;color:#ece6d8}
.cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cf-confirm .cf-row button{min-height:46px}
.cf-end{display:flex;flex-direction:column;gap:12px;padding-top:4px}.cf-end p{margin:0;font-weight:700;font-size:15px}
.mg-overlay.shake .cf-wrap{animation:cfshake .35s}@keyframes cfshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (max-height:700px){.cf-stage{flex-basis:clamp(170px,33dvh,260px)}.cf-msg{font-size:13px}}

/* 자백 게임은 세로 전용: 폰을 가로로 들면 돌려 달라고 안내 */
.cf-rotate{display:none}
@media (orientation:landscape) and (max-height:540px){.cf-rotate{display:flex;position:fixed;inset:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0e131a;color:#ece6d8;text-align:center;padding:24px}.cf-rotate svg{color:#e2b24a;transform:rotate(-90deg);animation:cfrot 1.6s ease-in-out infinite alternate}.cf-rotate p{margin:0;font-size:18px;font-weight:800}.cf-rotate small{color:#9aa3ae;font-size:13px}}
@keyframes cfrot{to{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.cf-rotate svg{animation:none;transform:none}}