/* ERP 공동상황실 v1 프로토타입 — 상단 띠(사고·단계·시계·보는 사람) + 화면 묶음 + 화면 목록 + 본문 */
:root{
  --bg:#e9edf1; --surface:#fbfcfd; --sunk:#f1f4f7; --ink:#14202b; --muted:#5b6977;
  --line:#d2d9e1; --line-strong:#aab5c1; --accent:#1d5c8f; --accent-soft:#dbe7f2; --on-accent:#ffffff;
  --ok:#2d7a4c; --ok-soft:#dcefe3; --warn:#a86a12; --warn-soft:#f6ead5; --crit:#bf3626; --crit-soft:#f7dedb; --hosp:#7348a0; --train:#a86a12;
  --l1:#3d7ea6; --l2:#a86a12; --l3:#c8501f; --l4:#a3172b;
  --o-al:#1d5c8f; --o-ap:#13716e; --o-gh:#8a5523; --o-ems:#b23a48; --o-gov:#4a5566;
  --f-ui:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --hatch:repeating-linear-gradient(135deg,transparent 0 10px,rgba(168,106,18,.10) 10px 20px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e141a; --surface:#151d25; --sunk:#111820; --ink:#e2e8ee; --muted:#8e9cab;
  --line:#26323e; --line-strong:#3c4a58; --accent:#69a5d8; --accent-soft:#1b3046; --on-accent:#0e141a;
  --ok:#5fb884; --ok-soft:#173225; --warn:#e0a34a; --warn-soft:#3a2c14; --crit:#ec6a58; --crit-soft:#3d1c18; --hosp:#ab8ad6; --train:#e0a34a;
  --l1:#6fb0d8; --l2:#e0a34a; --l3:#ee8452; --l4:#f0687a;
  --o-al:#69a5d8; --o-ap:#4fbab5; --o-gh:#d39a62; --o-ems:#e57b88; --o-gov:#9aa6b6;
  --hatch:repeating-linear-gradient(135deg,transparent 0 10px,rgba(224,163,74,.10) 10px 20px);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0e141a; --surface:#151d25; --sunk:#111820; --ink:#e2e8ee; --muted:#8e9cab;
  --line:#26323e; --line-strong:#3c4a58; --accent:#69a5d8; --accent-soft:#1b3046; --on-accent:#0e141a;
  --ok:#5fb884; --ok-soft:#173225; --warn:#e0a34a; --warn-soft:#3a2c14; --crit:#ec6a58; --crit-soft:#3d1c18; --hosp:#ab8ad6; --train:#e0a34a;
  --l1:#6fb0d8; --l2:#e0a34a; --l3:#ee8452; --l4:#f0687a;
  --o-al:#69a5d8; --o-ap:#4fbab5; --o-gh:#d39a62; --o-ems:#e57b88; --o-gov:#9aa6b6;
  --hatch:repeating-linear-gradient(135deg,transparent 0 10px,rgba(224,163,74,.10) 10px 20px);
  color-scheme:dark;}
*{box-sizing:border-box}
html,body{background:var(--bg);margin:0}
body{color:var(--ink);font-family:var(--f-ui);font-size:14px;line-height:1.5;min-height:100vh}
[hidden]{display:none!important}
button,select,input,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;padding:5px 8px;max-width:100%}
textarea{width:100%;min-height:90px;resize:vertical}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:12px} .nowrap{white-space:nowrap}
.crit{color:var(--crit)} .warn{color:var(--warn)} .ok{color:var(--ok)}

/* 상단 띠 */
.band{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.band.exercise{background-image:var(--hatch)}
.band-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:8px 16px}
.band .inc{display:flex;align-items:center;gap:8px;flex:1 1 320px;min-width:0}
.band .title{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:3px;border:1.5px solid currentColor;white-space:nowrap}
.tag.train{color:var(--train)}
.lv{display:inline-block;font-size:12px;font-weight:700;color:#fff;padding:2px 8px;border-radius:3px;white-space:nowrap}
.lv.none{background:var(--line-strong)}
.clock{display:flex;align-items:baseline;gap:10px}
.clock .t{font-family:var(--f-mono);font-size:21px;font-weight:600}
.clock .lt{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctl label{font-size:12px;color:var(--muted)}
.delay-pill{font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--crit-soft);color:var(--crit);white-space:nowrap}
.delay-pill.zero{background:var(--ok-soft);color:var(--ok)}
.surf{display:flex;gap:2px;padding:0 16px;overflow-x:auto;border-top:1px solid var(--line)}
.surf a{padding:7px 12px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500}
.surf a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.surf .sp{flex:1}

.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;padding:4px 10px;cursor:pointer;white-space:nowrap;line-height:1.4}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.danger{border-color:var(--crit);color:var(--crit)}
.btn.sm{font-size:12px;padding:2px 8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.on{background:var(--accent-soft);border-color:var(--accent)}

/* 본문 레이아웃 */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;min-height:calc(100vh - 100px)}
.nav{border-right:1px solid var(--line);background:var(--sunk);padding:10px 8px;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 96px);overflow:auto}
.nav a{display:flex;gap:8px;align-items:baseline;padding:4px 8px;border-radius:4px;text-decoration:none;color:var(--ink);font-size:13px}
.nav a .id{font-family:var(--f-mono);font-size:11px;color:var(--muted);width:28px;flex:none}
.nav a[aria-current="true"]{background:var(--accent-soft)}
.nav a.p1{color:var(--muted)}
.nav .sec{font-size:11px;color:var(--muted);margin:10px 8px 4px;letter-spacing:.04em}
.main{padding:16px;min-width:0}
.main h1{font-size:18px;margin:0 0 2px}
.main .sub{color:var(--muted);font-size:12px;margin-bottom:14px}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .nav{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;gap:4px;padding:6px 16px}
  .nav .sec{display:none}
  .nav a{white-space:nowrap}
  .band .title{white-space:normal}
}

.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px;min-width:0}
.card h2{font-size:13px;margin:0 0 8px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.card h2 .r{font-weight:400}
.big{font-family:var(--f-mono);font-size:26px;font-weight:600}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.hr{height:1px;background:var(--line);margin:10px 0}

table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line-strong);padding:5px 6px;white-space:nowrap;position:sticky;top:0;background:var(--surface)}
table.t td{border-bottom:1px solid var(--line);padding:5px 6px;vertical-align:top}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:var(--sunk)}
.scroll{overflow:auto;max-height:560px}
.tblwrap{overflow-x:auto}

.st{display:inline-block;font-size:12px;font-weight:600;padding:0 7px;border-radius:9px;white-space:nowrap;border:1px solid transparent}
.st.unaccounted,.st.confirming{background:var(--sunk);border-color:var(--line-strong);color:var(--muted)}
.st.uninjured{background:var(--ok-soft);color:var(--ok)}
.st.injured_minor,.st.injured{background:var(--warn-soft);color:var(--warn)}
.st.injured_serious{background:var(--crit-soft);color:var(--crit)}
.st.hospitalized{background:color-mix(in srgb,var(--hosp) 18%,transparent);color:var(--hosp)}
.st.deceased{background:var(--ink);color:var(--surface)}
.lock{font-size:11px;color:var(--muted)}
.chip{display:inline-block;font-size:11px;padding:0 6px;border-radius:3px;background:var(--sunk);border:1px solid var(--line);white-space:nowrap}
.chip.a{background:var(--accent-soft);border-color:var(--accent)}
.chip.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.chip.crit{background:var(--crit-soft);border-color:transparent;color:var(--crit)}

.bar{height:10px;background:var(--sunk);border-radius:5px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.gate{display:grid;grid-template-columns:48px 1fr 70px 70px;gap:8px;align-items:center;font-size:12px;margin:5px 0}

.tl{list-style:none;margin:0;padding:0;font-size:13px}
.tl li{display:grid;grid-template-columns:64px 4px 1fr;gap:8px;padding:4px 0;border-bottom:1px dashed var(--line)}
.tl .tt{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.tl .cb{border-radius:2px}
.tl .who{color:var(--muted);font-size:12px}
.tl .dec{font-weight:600}
.tl .sys{color:var(--muted)}

.matrix td.cell{font-family:var(--f-mono);letter-spacing:1px;white-space:nowrap;cursor:pointer}
.matrix td.cell:hover{background:var(--accent-soft)}
.mk{display:inline-block;width:14px;text-align:center}
.mk.d{color:var(--ok)} .mk.l{color:var(--crit);font-weight:700} .mk.o{color:var(--muted)} .mk.n{color:var(--line-strong)}

.warnbox{border-left:3px solid var(--warn);background:var(--warn-soft);padding:8px 10px;border-radius:0 4px 4px 0;font-size:13px;margin:6px 0}
.critbox{border-left:3px solid var(--crit);background:var(--crit-soft);padding:8px 10px;border-radius:0 4px 4px 0;font-size:13px;margin:6px 0}
.okbox{border-left:3px solid var(--ok);background:var(--ok-soft);padding:8px 10px;border-radius:0 4px 4px 0;font-size:13px;margin:6px 0}
.infobox{border-left:3px solid var(--accent);background:var(--accent-soft);padding:8px 10px;border-radius:0 4px 4px 0;font-size:13px;margin:6px 0}

.tree{list-style:none;padding-left:16px;margin:0}
.tree li{margin:3px 0}
.tree .u{font-weight:600}
.tree .off{opacity:.5}

.form{display:grid;grid-template-columns:120px 1fr;gap:8px 10px;align-items:center}
.form label{color:var(--muted);font-size:13px}
@media (max-width:600px){.form{grid-template-columns:1fr}}

/* 모바일 화면: 데스크톱에서는 휴대폰 폭 틀 */
.phone{max-width:400px;margin:0 auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:22px;padding:14px 12px 20px;min-height:600px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.phone .ph-h{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}
.phone h3{font-size:16px;margin:4px 0 8px}
.phone .item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0}
.phone .btn{padding:8px 12px}
.phone .btn.block{display:block;width:100%;margin:6px 0;text-align:center}
.alert-red{background:var(--crit);color:#fff;border-radius:8px;padding:10px;font-weight:700}
@media (max-width:480px){.phone{border:0;border-radius:0;box-shadow:none;padding:4px 0}}

.drop{border:1px dashed var(--line-strong);border-radius:6px;padding:6px;min-height:40px}
.drop.over{background:var(--accent-soft)}
[draggable="true"]{cursor:grab}
.sel{outline:2px solid var(--accent)}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--surface);border-radius:8px;padding:16px;max-width:560px;width:100%;max-height:90vh;overflow:auto}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:8px 14px;border-radius:6px;z-index:60;font-size:13px;max-width:90vw}
.toast.err{background:var(--crit);color:#fff}

.map{width:100%;height:auto;background:var(--sunk);border-radius:6px}
.stepper{display:flex;gap:4px;flex-wrap:wrap}
.stepper span{font-size:12px;padding:2px 8px;border-radius:10px;background:var(--sunk);border:1px solid var(--line)}
.stepper span.done{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.stepper span.cur{background:var(--accent);color:var(--on-accent);border-color:transparent}
.spark{width:100%;height:60px}
.foot{padding:16px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
@media print{.band,.nav,.surf,.foot,.noprint{display:none!important}.shell{display:block}.main{padding:0}}
@media (max-width:700px){.band{position:static}.nav{top:0}}