/* 지질시대 감식연구소 — 감식 장비 UI (dark / phosphor green) */
:root {
  --bg: #050807;
  --bg-2: #090d0b;
  --panel: #0d1311;
  --panel-2: #101915;
  --panel-3: #141f19;
  --edge: #1c2924;
  --edge-2: #263830;
  --bevel: rgba(255,255,255,.05);
  --green: #3df08a;
  --green-2: #22c46a;
  --green-dim: #178a4a;
  --green-ink: #07120c;
  --glow: rgba(61,240,138,.45);
  --grid: #14261c;
  --text: #d9e6de;
  --text-2: #9fb5a8;
  --text-3: #6d8578;
  --red: #ff4d4d;
  --red-deep: #c8102e;
  --red-soft: rgba(255,77,77,.12);
  --display: 'Michroma', 'IBM Plex Mono', monospace;
  --mono: 'IBM Plex Mono', 'Liberation Mono', 'Courier New', ui-monospace, monospace;
  --sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; font-family: var(--sans); color: var(--text); background: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(61,240,138,.07), transparent 55%),
    linear-gradient(to right, rgba(61,240,138,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61,240,138,.035) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
  line-height: 1.55; font-size: 15px;
}
a { color: inherit; }
button { font-family: inherit; }
.mono { font-family: var(--mono); }
.disp { font-family: var(--display); letter-spacing: .22em; text-transform: uppercase; }
.red { color: var(--red); }
.muted { color: var(--text-3); }
.hidden { display: none !important; }
::selection { background: var(--green); color: var(--green-ink); }

/* ── 시스템 바 ─────────────────────────────── */
.sysbar {
  background: linear-gradient(#0b110e, #070b09); color: var(--text-2); border-bottom: 1px solid var(--edge);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 14px; position: sticky; top: 0; z-index: 20;
}
.sysbar .l { white-space: nowrap; color: var(--green); }
.sysbar .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 4px var(--green);} 50% { box-shadow: 0 0 12px var(--green);} }
.sysbar .r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 10px; vertical-align: middle; }
.sig i { width: 3px; background: var(--green); display: block; }
.sig i:nth-child(1){height:5px} .sig i:nth-child(2){height:7px} .sig i:nth-child(3){height:9px} .sig i:nth-child(4){height:11px;background:var(--edge-2)} .sig i:nth-child(5){height:12px;background:var(--edge-2)}

/* ── 상단 헤더 ─────────────────────────────── */
.lab-head { background: linear-gradient(#0f1613, #0a0f0c); border-bottom: 1px solid var(--edge-2); box-shadow: inset 0 1px 0 var(--bevel); }
.lab-head .in { max-width: 820px; margin: 0 auto; padding: 14px 16px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lab-name { font-weight: 900; font-size: 17px; letter-spacing: .02em; line-height: 1.1; color: var(--text); }
.lab-name small { display: block; font-family: var(--display); font-weight: 400; font-size: 8px; letter-spacing: .2em; color: var(--green-dim); margin-top: 6px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.casebadge {
  font-family: var(--display); font-size: 13px; letter-spacing: .26em; color: var(--red); white-space: nowrap; text-align: right;
  text-shadow: 0 0 10px rgba(255,77,77,.5);
}
.casebadge small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .1em; color: var(--text-3); margin-top: 3px; text-shadow: none; }

/* ── 레이아웃 ──────────────────────────────── */
.wrap { max-width: 820px; margin: 0 auto; padding: 14px 12px 60px; }
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--edge-2); margin-top: 14px; border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--bevel), 0 10px 30px rgba(0,0,0,.45); position: relative;
}
.panel > .ph {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--edge);
  font-family: var(--display); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2);
}
.panel > .ph .idx { width: 9px; height: 9px; background: var(--text-2); flex: 0 0 auto; }
.panel.done > .ph .idx, .panel.done > .ph { color: var(--green); }
.panel.done > .ph .idx { background: var(--green); box-shadow: 0 0 8px var(--green); }
.panel > .ph .en { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--text-3); text-transform: none; }
.panel > .pb { padding: 14px 14px 16px; }
.panel > .ph .ko { font-family: var(--sans); letter-spacing: .04em; font-weight: 700; font-size: 13px; text-transform: none; }

/* 상단 케이스 스트립 (증거 페이지) */
.topstrip { display: flex; align-items: stretch; margin-top: 14px; border: 1px solid var(--edge-2); background: linear-gradient(#131b17, #0b100e); border-radius: 3px; overflow: hidden; }
.topstrip .cs { font-family: var(--display); font-size: 15px; letter-spacing: .26em; color: var(--text); padding: 12px 16px; display: flex; align-items: center; border-right: 1px solid var(--edge); text-transform: uppercase; white-space: nowrap; }
.topstrip .bc { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.topstrip .bc svg { height: 26px; width: 100%; max-width: 150px; opacity: .8; }
.topstrip .bc rect { fill: var(--text-2); }
.topstrip .evtag { background: var(--red-deep); color: #fff; font-family: var(--display); font-size: 11px; letter-spacing: .2em; padding: 0 14px; display: flex; align-items: center; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 18px rgba(200,16,46,.35); }
.topstrip .evtag.sec { background: #7a1220; }

/* 증거 타이틀 */
.evtitle { display: flex; align-items: baseline; gap: 12px; margin: 16px 2px 0; }
.evtitle .no { font-family: var(--display); font-size: 22px; line-height: 1; white-space: nowrap; color: var(--green); text-shadow: 0 0 14px var(--glow); letter-spacing: .08em; }
.evtitle .t { font-weight: 900; font-size: 20px; line-height: 1.2; color: var(--text); }
.evtitle .t small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--text-3); margin-top: 4px; }

/* 시료 뷰포트 */
.viewport { position: relative; margin: 0 14px 12px; border: 1px solid var(--edge-2); background: radial-gradient(ellipse at 50% 40%, #0f1c15, #060a08 75%); border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(61,240,138,.06); }
.viewport .stage { position: relative; height: 230px; }
.viewport .stage svg.spec { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewport .ruler { position: absolute; top: 14px; bottom: 14px; left: 8px; width: 26px; font-family: var(--mono); font-size: 9px; color: var(--text-3); }
.viewport .ruler.r { left: auto; right: 8px; }
.viewport .ruler svg { width: 100%; height: 100%; }
.viewport .beam { position: absolute; left: 34px; right: 34px; top: 40%; height: 2px; background: var(--green); box-shadow: 0 0 10px 2px var(--glow), 0 0 30px 6px rgba(61,240,138,.25); opacity: .9; animation: beam 4.5s ease-in-out infinite; }
@keyframes beam { 0% { top: 12% } 50% { top: 86% } 100% { top: 12% } }
.viewport .ovl { position: absolute; left: 44px; right: 44px; top: 14px; bottom: 14px; pointer-events: none; }
.viewport .ovl::before, .viewport .ovl::after, .viewport .ovl i::before, .viewport .ovl i::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--green); border-color: var(--green); }
.viewport .ovl::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .viewport .ovl::after { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.viewport .ovl i::before { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .viewport .ovl i::after { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }
.viewport .cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); opacity: .55; }
.viewport .cross::before, .viewport .cross::after { content: ''; position: absolute; background: var(--green); }
.viewport .cross::before { left: 50%; top: 0; bottom: 0; width: 1px; } .viewport .cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.viewport .readout { position: absolute; left: 44px; bottom: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--green); text-shadow: 0 0 6px var(--glow); }
.viewport .readout2 { position: absolute; right: 44px; top: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--text-3); }
.vmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--edge); }
.vmeta div { padding: 9px 14px; font-size: 12.5px; border-right: 1px solid var(--edge); }
.vmeta div:last-child { border-right: 0; }
.vmeta b { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--text-3); margin-bottom: 2px; }

/* 시료 정보 표 */
.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv th, .kv td { border-bottom: 1px solid var(--edge); padding: 8px 8px; text-align: left; vertical-align: top; }
.kv th { width: 34%; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; color: var(--text-3); }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }
.kv td b { font-weight: 700; color: var(--text); }
.tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; border: 1px solid var(--edge-2); padding: 1px 7px; margin-left: 6px; vertical-align: middle; color: var(--text-2); border-radius: 2px; }
.tag.red { border-color: var(--red); color: var(--red); }
.tag.green { border-color: var(--green); color: var(--green); box-shadow: 0 0 8px rgba(61,240,138,.25); }
.tag.fill { background: var(--green); color: var(--green-ink); border-color: var(--green); font-weight: 700; }

/* 관찰 기록 */
.obs { margin: 0; padding: 0; list-style: none; }
.obs li { position: relative; padding: 7px 0 7px 22px; border-bottom: 1px dashed var(--edge); font-size: 15px; color: var(--text); }
.obs li:last-child { border-bottom: 0; }
.obs li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 6px var(--glow); }
.field-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--text-3); margin-bottom: 8px; }

/* 분석 방법 선택 */
.q { font-weight: 700; font-size: 16px; margin: 0 0 4px; line-height: 1.45; color: var(--text); }
.q-sub { font-size: 12px; color: var(--text-3); margin: 0 0 12px; }
.opts { display: grid; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: var(--text);
  background: linear-gradient(#111a15, #0c1310); border: 1px solid var(--edge-2); border-radius: 3px; padding: 11px 12px; cursor: pointer; font-size: 15px; line-height: 1.4;
  transition: border-color .12s, box-shadow .12s, background .12s; box-shadow: inset 0 1px 0 var(--bevel);
}
.opt .k { font-family: var(--mono); font-weight: 700; font-size: 12px; border: 1px solid var(--edge-2); color: var(--text-2); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 2px; }
.opt:hover { border-color: var(--green-dim); }
.opt:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.opt.sel { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 18px rgba(61,240,138,.25); background: linear-gradient(#142a1d, #0f1f16); }
.opt.sel .k { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.opt.rejected { border-color: rgba(255,77,77,.5); color: var(--text-3); background: var(--red-soft); text-decoration: line-through; cursor: not-allowed; }
.opt.rejected .k { border-color: var(--red); color: var(--red); }
.opt:disabled { cursor: default; }
.opt.correct { border-color: var(--green); background: linear-gradient(#123021, #0e2419); color: var(--text); }
.opt.correct .k { background: var(--green); border-color: var(--green); color: var(--green-ink); }

.actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; align-items: stretch; }
.btn {
  background: linear-gradient(#123722, #0c2417); color: var(--green); border: 1px solid var(--green); border-radius: 3px; padding: 13px 18px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .14em; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(61,240,138,.15), 0 0 18px rgba(61,240,138,.2), inset 0 0 18px rgba(61,240,138,.08); text-shadow: 0 0 8px var(--glow);
  transition: box-shadow .15s, opacity .15s;
}
.btn:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(61,240,138,.3), 0 0 26px rgba(61,240,138,.35), inset 0 0 22px rgba(61,240,138,.12); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; text-shadow: none; }
.btn.small { font-size: 13px; letter-spacing: .08em; padding: 9px 12px; }
.btn.ghost { background: transparent; color: var(--text-2); border-color: var(--edge-2); box-shadow: none; text-shadow: none; }
.btn.ghost:hover { border-color: var(--text-2); }
.lockind { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--edge-2); border-radius: 3px; background: linear-gradient(#0e1512, #090e0b); font-family: var(--display); font-size: 10px; letter-spacing: .24em; color: var(--text-3); white-space: nowrap; }
.lockind svg { width: 16px; height: 16px; fill: var(--text-3); }
.lockind.open { color: var(--green); border-color: var(--green-dim); text-shadow: 0 0 8px var(--glow); }
.lockind.open svg { fill: var(--green); }
.attempts { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); letter-spacing: .12em; margin-top: 8px; }

.reject { margin-top: 12px; border: 1px solid rgba(255,77,77,.6); background: var(--red-soft); padding: 10px 12px; font-size: 14px; border-radius: 3px; animation: shake .3s; color: var(--text); }
.reject b { font-family: var(--display); color: var(--red); font-size: 10px; letter-spacing: .2em; display: block; margin-bottom: 5px; text-shadow: 0 0 8px rgba(255,77,77,.5); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* 분석 진행 */
.proc { margin-top: 12px; border: 1px solid var(--edge-2); background: #080d0a; padding: 12px; border-radius: 3px; }
.proc .steps { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.proc .steps li { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--text-3); }
.proc .steps li::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--text-3); flex: 0 0 auto; }
.proc .steps li.run { color: var(--green); }
.proc .steps li.run::before { border-color: var(--green); background: var(--green); box-shadow: 0 0 8px var(--glow); animation: blink .5s infinite alternate; }
.proc .steps li.ok { color: var(--text-2); }
.proc .steps li.ok::before { border-color: var(--green-2); background: var(--green-2); }
.proc .steps li .ms { margin-left: auto; color: var(--text-3); }
@keyframes blink { from { opacity: .3 } to { opacity: 1 } }
.bar { height: 8px; border: 1px solid var(--edge-2); background: #050807; margin-top: 12px; overflow: hidden; border-radius: 2px; }
.bar > i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--green) 0 8px, var(--green-dim) 8px 10px); box-shadow: 0 0 10px var(--glow); transition: width .35s linear; }

/* 감식 결과 */
.result-wrap.locked .pb { filter: blur(4px) brightness(.5); user-select: none; pointer-events: none; max-height: 240px; overflow: hidden; }
.lockover {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(135deg, rgba(5,8,7,.55) 0 10px, rgba(13,19,17,.55) 10px 20px); text-align: center; padding: 20px; border-radius: 3px;
}
.lockover .big { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 13px; letter-spacing: .3em; color: var(--text-2); border: 1px solid var(--edge-2); padding: 10px 18px; background: #0a0f0c; }
.lockover .big svg { width: 16px; height: 16px; fill: var(--text-2); }
.lockover small { font-size: 12px; color: var(--text-3); font-family: var(--sans); }
.res-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text-2); border: 1px solid var(--edge); background: #090e0b; padding: 9px 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 12px; border-radius: 3px; }
.res-meta b { color: var(--text-3); font-weight: 500; display: block; font-size: 9px; letter-spacing: .16em; }
.res-list { margin: 0; padding: 0; list-style: none; }
.res-list li { position: relative; padding: 9px 0 9px 32px; border-bottom: 1px dashed var(--edge); font-size: 15px; font-weight: 500; color: var(--text); }
.res-list li:last-child { border-bottom: 0; }
.res-list li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--green); box-shadow: 0 0 8px var(--glow); }
.res-list li::after { content: ''; position: absolute; left: 7px; top: 15px; width: 4px; height: 8px; border: solid var(--green); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.res-list li.key { font-weight: 700; }
.fig { border: 1px solid var(--edge-2); margin-top: 14px; background: #070b09; position: relative; overflow: hidden; border-radius: 3px; }
.fig .ft { padding: 8px 12px; font-family: var(--display); font-size: 9.5px; letter-spacing: .24em; color: var(--text-2); border-bottom: 1px solid var(--edge); display: flex; align-items: center; gap: 8px; }
.fig .ft::before { content: ''; width: 8px; height: 8px; background: var(--green-dim); }
.fig .sv { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig svg { display: block; width: 100%; min-width: 560px; height: auto; }
.fig .hint { display: none; font-family: var(--mono); font-size: 10px; color: var(--text-3); padding: 6px 12px 0; letter-spacing: .08em; }
@media (max-width: 600px) { .fig .hint { display: block; } }
.fig .fc { border-top: 1px solid var(--edge); font-size: 12px; color: var(--text-2); padding: 8px 12px; }
.fig .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--green); box-shadow: 0 0 14px 3px var(--glow); animation: scan 1.6s ease-in-out 1; z-index: 3; opacity: 0; }
.fig.scanning .scan { opacity: 1; }
@keyframes scan { 0% { top: 0 } 100% { top: 100% } }
.reveal { animation: reveal .5s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }
.okcircle { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--edge-2); border-radius: 3px; background: #090e0b; }
.okcircle .c { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--green); box-shadow: 0 0 16px var(--glow), inset 0 0 12px rgba(61,240,138,.15); position: relative; flex: 0 0 auto; }
.okcircle .c::after { content: ''; position: absolute; left: 15px; top: 9px; width: 10px; height: 18px; border: solid var(--green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.okcircle .t { font-family: var(--display); font-size: 11px; letter-spacing: .26em; color: var(--green); text-shadow: 0 0 8px var(--glow); }
.okcircle .t small { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: var(--text-2); margin-top: 3px; }

/* 추론 질문 */
.inf { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.inf li { counter-increment: q; position: relative; padding: 9px 0 9px 44px; border-bottom: 1px dashed var(--edge); font-size: 15px; color: var(--text); }
.inf li:last-child { border-bottom: 0; }
.inf li::before { content: 'Q' counter(q); position: absolute; left: 2px; top: 10px; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--green); border: 1px solid var(--green-dim); padding: 1px 6px; border-radius: 2px; }
.note { border-left: 3px solid var(--green); background: #0a1510; padding: 9px 12px; font-size: 13px; margin-top: 12px; color: var(--text-2); }

/* 하단 내비 */
.foot { margin-top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--edge-2); padding-top: 12px; }
.foot a { color: var(--text-2); }

/* ── 메인(접수) 페이지 ─────────────────────── */
.hero { padding: 8px 2px 0; }
.hero h1 { font-size: 24px; font-weight: 900; margin: 0; line-height: 1.2; color: var(--text); }
.hero h1 small { display: block; font-family: var(--display); font-weight: 400; font-size: 9px; letter-spacing: .28em; color: var(--green-dim); margin-top: 6px; text-transform: uppercase; }
.hero p { margin: 10px 0 0; color: var(--text-2); font-size: 14px; }
.codeform { display: flex; gap: 8px; margin-top: 4px; }
.codeform input { flex: 1; font-family: var(--mono); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; padding: 11px 12px; border: 1px solid var(--edge-2); background: #050807; color: var(--green); min-width: 0; border-radius: 3px; text-shadow: 0 0 6px var(--glow); }
.codeform input::placeholder { color: var(--text-3); text-shadow: none; }
.codeform input:focus { outline: 1px solid var(--green); box-shadow: 0 0 12px rgba(61,240,138,.25); }
.caselist { display: grid; gap: 8px; }
.evrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--edge-2); border-radius: 3px; padding: 10px 12px; text-decoration: none; background: linear-gradient(#111a15, #0c1310); box-shadow: inset 0 1px 0 var(--bevel); }
.evrow:hover { border-color: var(--green-dim); }
.evrow .no { font-family: var(--display); font-size: 12px; letter-spacing: .1em; width: 54px; flex: 0 0 auto; color: var(--green); }
.evrow .t { flex: 1; font-weight: 600; font-size: 14px; color: var(--text); }
.evrow .t small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--text-3); letter-spacing: .1em; }
.evrow .st { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; border: 1px solid var(--edge-2); padding: 2px 7px; color: var(--text-3); border-radius: 2px; white-space: nowrap; }
.evrow .st.done { border-color: var(--green); color: var(--green); box-shadow: 0 0 8px rgba(61,240,138,.2); }
.evrow .st.sec { border-color: var(--red); color: var(--red); }
.casehead { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 10px; }
.casehead .cn { font-family: var(--display); font-size: 12px; letter-spacing: .22em; color: var(--red); text-shadow: 0 0 10px rgba(255,77,77,.4); }
.casehead .nm { font-weight: 900; font-size: 17px; color: var(--text); }
.casehead .pd { font-size: 12px; color: var(--text-3); margin-left: auto; text-align: right; }

/* ── 교사용 ───────────────────────────────── */
.tgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tcard { border: 1px solid var(--edge-2); background: #0a0f0c; border-radius: 3px; }
.tcard .th { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--edge); }
.tcard .th .no { font-family: var(--display); font-size: 12px; letter-spacing: .1em; color: var(--green); }
.tcard .th .t { font-weight: 700; flex: 1; color: var(--text); }
.tcard .th .t small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: .1em; font-weight: 400; }
.tcard .tb { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px; }
.tcard .qr { border: 1px solid var(--edge-2); padding: 6px; background: #fff; border-radius: 2px; }
.tcard .qr svg { width: 100%; height: auto; display: block; }
.tcard .qr .lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; text-align: center; margin-top: 4px; color: #333; word-break: break-all; }
.tcard dl { margin: 0; font-size: 13px; color: var(--text); }
.tcard dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--text-3); margin-top: 7px; }
.tcard dd { margin: 1px 0 0; }
.tcard dd.ans { color: var(--green); font-weight: 700; }
.tcard dd ul { margin: 0; padding-left: 16px; }
.tbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.tbar input { font-family: var(--mono); font-size: 13px; padding: 9px 10px; border: 1px solid var(--edge-2); background: #050807; color: var(--text); flex: 1; min-width: 200px; border-radius: 3px; }
.warn { border: 1px solid rgba(255,77,77,.6); background: var(--red-soft); padding: 10px 12px; font-size: 13px; border-radius: 3px; color: var(--text); }

@media (max-width: 420px) { .panel > .ph .en { display: none; } .topstrip .cs { font-size: 12px; padding: 10px 12px; } }
@media (min-width: 640px) {
  .tgrid { grid-template-columns: 1fr 1fr; }
  .res-meta { grid-template-columns: 1fr 1fr 1fr; }
  .viewport .stage { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewport .beam, .sysbar .dot, .fig .scan, .proc .steps li.run::before { animation: none; }
}
@media print {
  html, body { background: #fff !important; color: #111 !important; background-image: none !important; }
  .sysbar, .noprint, .tbar, .warn, .foot, .lab-head { display: none !important; }
  .panel, .tcard { box-shadow: none; break-inside: avoid; background: #fff !important; border-color: #111 !important; }
  .panel > .ph, .tcard .th, .tcard dl, .tcard .th .t, .tcard dt, .tcard dd, .hero h1, .hero p, .tcard .th .no { color: #111 !important; text-shadow: none !important; }
  .tcard dd.ans { color: #1d7a3c !important; }
  .tgrid { grid-template-columns: 1fr 1fr; }
}

/* ── v5: 접수 요약·접기·대기 패널 ─────────── */
.obsfold { border-top: 1px solid var(--edge); }
.obsfold > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 8px; }
.obsfold > summary::-webkit-details-marker { display: none; }
.obsfold > summary::before { content: '▸'; color: var(--green); font-size: 12px; }
.obsfold[open] > summary::before { content: '▾'; }
.obsfold > summary .mono { font-size: 10px; letter-spacing: .12em; margin-left: auto; }
.viewport.sm { margin: 4px 14px 10px; }
.viewport.sm .stage { height: 130px; }
.viewport.sm .ruler { top: 8px; bottom: 8px; }
.viewport.sm .ovl { top: 8px; bottom: 8px; }
.viewport.sm .readout { bottom: 6px; }
.waiting { display: flex; align-items: center; gap: 14px; color: var(--text-2); }
.waiting b { display: block; font-size: 14px; color: var(--text); }
.waiting small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.wdot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-3); flex: 0 0 auto; position: relative; }
.wdot::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--text-3); animation: blink 1.2s infinite alternate; }
.fig .fc .src { margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--text-3); }
@media (min-width: 640px) { .viewport.sm .stage { height: 150px; } }

/* 추론 연결고리 */
.linkbox { margin-top: 12px; border: 1px solid var(--green-dim); border-left: 4px solid var(--green); background: #0a1a11; padding: 10px 12px; border-radius: 3px; }
.linkbox .lk { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--green); margin-bottom: 4px; }
.linkbox .lk .mono { font-size: 9px; letter-spacing: .16em; color: var(--green-dim); margin-left: 6px; }
.linkbox .lt { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; }

/* v3 · 핵심 감식 결과 상자 */
.keybox { margin-top: 14px; border: 1.5px solid var(--green); border-radius: 3px; background: rgba(61,240,138,.06); padding: 14px 16px; box-shadow: 0 0 18px rgba(61,240,138,.12), inset 0 0 24px rgba(61,240,138,.05); }
.keybox .kl { font-family: var(--display); font-size: 11px; letter-spacing: .24em; color: var(--green); margin-bottom: 8px; }
.keybox .kl .mono { color: var(--text-3); margin-left: 8px; letter-spacing: .12em; }
.keybox .kt { font-size: 17px; font-weight: 700; line-height: 1.55; color: #fff; }
.keybox .kc { margin-top: 10px; font-size: 13px; color: var(--green); font-weight: 600; }
.morelab { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--text-3); }