/* 대한민국 물류 워룸 72시간 — 공통 스타일 (다크 + 앰버/레드) */
:root {
  --bg: #0b0f17; --bg2: #121826; --bg3: #1a2234; --line: #26304a;
  --fg: #e8ecf4; --fg2: #9aa5bd; --fg3: #5e6a85;
  --amber: #f5a524; --amber2: #ffc14d; --red: #ef4444; --red2: #ff6b6b;
  --green: #22c55e; --blue: #3b82f6; --purple: #a855f7; --cyan: #06b6d4;
  --radius: 14px; --shadow: 0 8px 30px rgba(0,0,0,.45);
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); min-height: 100%; }
body { font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(1200px 500px at 50% -10%, rgba(245,165,36,.08), transparent 60%),
                    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.012) 2px 3px); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--bg3); color: var(--fg); transition: .15s; }
button:hover { filter: brightness(1.15); }
button:disabled { opacity: .4; cursor: not-allowed; filter: none; }
button.primary { background: var(--amber); color: #1a1200; font-weight: 800; }
button.danger { background: var(--red); color: #fff; font-weight: 800; }
button.ghost { background: transparent; border: 1px solid var(--line); }
button.big { padding: 16px 26px; font-size: 1.15rem; border-radius: 14px; }
input, select { font: inherit; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
input:focus, select:focus { outline: 2px solid var(--amber); border-color: transparent; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.muted { color: var(--fg2); } .dim { color: var(--fg3); } .amber { color: var(--amber); } .red { color: var(--red2); } .green { color: var(--green); }
.mono { font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", Consolas, monospace; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--line); font-size: .85rem; }
.chip.ok { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.5); color: #86efac; }
.chip.warn { background: rgba(245,165,36,.15); border-color: rgba(245,165,36,.5); color: var(--amber2); }
.chip.bad { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.5); color: var(--red2); }
.tag { font-size: .75rem; padding: 2px 8px; border-radius: 6px; background: var(--bg3); color: var(--fg2); }

/* 게이지 */
.gauge { position: relative; }
.gauge .lbl { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gauge .val { font-size: 1.6rem; font-weight: 900; }
.gauge .bar { height: 14px; background: #0a0e16; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.gauge .fill { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1), background .4s; background: linear-gradient(90deg, #22c55e, #86efac); }
.gauge.mid .fill { background: linear-gradient(90deg, #f5a524, #ffd27a); }
.gauge.low .fill { background: linear-gradient(90deg, #ef4444, #ff8a8a); }
.gauge.low .val { color: var(--red2); animation: blink 1s infinite; }
.gauge.big .val { font-size: 3.4rem; }
.gauge.big .bar { height: 28px; }
.gauge.shake { animation: shake .5s; }
@keyframes blink { 50% { opacity: .35; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

/* 사이렌 배너 */
.siren { background: linear-gradient(90deg, #7f1d1d, #b91c1c, #7f1d1d); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 900; letter-spacing: .5px;
  animation: siren 1.2s infinite; display: flex; gap: 12px; align-items: center; }
@keyframes siren { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.0); } 50% { box-shadow: 0 0 40px 6px rgba(239,68,68,.55); } }
.siren .live { background: #fff; color: #b91c1c; padding: 2px 8px; border-radius: 6px; font-size: .8rem; animation: blink 1s infinite; }

/* 전체 공지 플래시 */
#flash { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 999; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
#flash.show { display: flex; animation: flashbg .3s; }
#flash .box { text-align: center; padding: 40px 60px; border-radius: 24px; background: linear-gradient(135deg, #3b1d00, #1a1200); border: 2px solid var(--amber); box-shadow: 0 0 80px rgba(245,165,36,.6); animation: pop .5s cubic-bezier(.2,1.4,.3,1); max-width: 90vw; }
#flash .box .t1 { font-size: 1rem; color: var(--amber2); letter-spacing: 3px; }
#flash .box .t2 { font-size: 2.4rem; font-weight: 900; margin: 10px 0; }
#flash .box .t3 { color: var(--fg2); }
@keyframes pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes flashbg { from { background: rgba(245,165,36,.5) } to { background: rgba(0,0,0,.72) } }

/* 뉴스 자막 */
.ticker { background: #111; border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); padding: 10px 0; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.ticker .brk { background: var(--red); color: #fff; font-weight: 900; padding: 4px 12px; margin-left: 12px; flex: none; }
.ticker .txt { display: inline-block; padding-left: 100%; animation: ticker 14s linear infinite; font-size: 1.3rem; font-weight: 700; }
@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-100%) } }

/* 선택지 카드 */
.opt { border: 2px solid var(--line); background: var(--bg3); border-radius: 14px; padding: 14px; cursor: pointer; transition: .15s; position: relative; }
.opt:hover { border-color: var(--fg3); }
.opt.sel { border-color: var(--amber); background: rgba(245,165,36,.1); box-shadow: 0 0 0 3px rgba(245,165,36,.2); }
.opt.locked { cursor: default; opacity: .8; }
.opt .name { font-weight: 800; font-size: 1.05rem; }
.opt .meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.opt .desc { color: var(--fg2); font-size: .9rem; margin-top: 6px; }
.grade { font-weight: 900; padding: 2px 10px; border-radius: 6px; }
.grade.A { background: rgba(239,68,68,.2); color: var(--red2); } .grade.B { background: rgba(245,165,36,.2); color: var(--amber2); } .grade.C { background: var(--bg); color: var(--fg3); }
.cost { background: rgba(59,130,246,.2); color: #93c5fd; font-weight: 800; padding: 2px 10px; border-radius: 6px; }

.hl { border-left: 6px solid var(--line); }
.hl.red { border-left-color: var(--red); } .hl.neutral { border-left-color: #cbd5e1; } .hl.green { border-left-color: var(--green); }

/* 타이머 */
.timer { font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.timer.urgent { color: var(--red2); animation: blink .8s infinite; }

/* 도장 */
.stamp { display: inline-block; padding: 8px 20px; border: 4px solid; border-radius: 10px; font-size: 1.8rem; font-weight: 900; transform: rotate(-6deg); animation: stamp .4s cubic-bezier(.2,1.6,.3,1); }
.stamp.ok { color: var(--green); border-color: var(--green); } .stamp.no { color: var(--red2); border-color: var(--red2); }
@keyframes stamp { from { transform: rotate(-6deg) scale(2.5); opacity: 0 } to { transform: rotate(-6deg) scale(1); opacity: 1 } }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }
th { color: var(--fg2); font-weight: 600; }

.fade-in { animation: fadein .4s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--bg3); border: 1px solid var(--line); padding: 10px 18px; border-radius: 12px; z-index: 900; box-shadow: var(--shadow); animation: fadein .3s; }

/* ---- 명시적 피해/방어 표시 ---- */
.tgt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 6px; font-size: .82rem; font-weight: 700; border: 1px solid transparent; }
.tgt.delivery { background: rgba(59,130,246,.18); color: #93c5fd; border-color: rgba(59,130,246,.4); }
.tgt.supply   { background: rgba(34,197,94,.18);  color: #86efac; border-color: rgba(34,197,94,.4); }
.tgt.opinion  { background: rgba(245,165,36,.18); color: var(--amber2); border-color: rgba(245,165,36,.4); }
.tgt.none     { background: var(--bg); color: var(--fg3); border-color: var(--line); }
.tgt-lbl { font-size: .78rem; color: var(--fg3); margin-right: 2px; }
.hitchip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; padding: 6px 12px; border-radius: 10px; font-size: .95rem; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); }
.hitchip b { font-size: 1.15rem; color: var(--red2); }
.hitchip.zero { opacity: .35; }
.hitchip.main { background: rgba(239,68,68,.25); border-color: var(--red); box-shadow: 0 0 14px rgba(239,68,68,.35); }
.hitchip i { font-style: normal; font-size: .72rem; background: var(--red); color: #fff; padding: 1px 6px; border-radius: 4px; }
.bdt { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.bdt th, .bdt td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.bdt thead th { color: var(--fg2); font-size: .82rem; font-weight: 600; }
.bdt tbody th { font-weight: 800; white-space: nowrap; }
.bdt td.dmg { color: var(--red2); font-weight: 900; font-size: 1.15rem; }
.bdt td.blk { color: var(--green); font-weight: 900; font-size: 1.15rem; }
.bdt td.net { font-weight: 900; font-size: 1.15rem; }
.bdt td.net.bad { color: var(--red2); } .bdt td.net.ok { color: var(--green); }
.bdt td.chg { font-variant-numeric: tabular-nums; }
.bdt td.chg b { font-size: 1.15rem; }
.bdt td.pending { color: var(--fg3); text-align: center; }
.bdt .bdl { font-size: .8rem; font-weight: 600; color: var(--fg2); }
.bdt .bd { margin-right: 6px; }
.bdt .over { font-size: .72rem; color: var(--fg3); background: var(--bg); padding: 1px 6px; border-radius: 4px; }
.bdt .ex { font-size: .85rem; font-weight: 800; margin-left: 6px; }
.bdt .ok { color: var(--green); } .bdt .bad { color: var(--red2); }
.bdt tr.quiet { opacity: .5; }
.bdt tr.sum th, .bdt tr.sum td { border-top: 2px solid var(--fg3); border-bottom: 0; background: rgba(255,255,255,.03); }
.bdt.compact { font-size: .9rem; } .bdt.compact th, .bdt.compact td { padding: 6px 6px; }
.bdt.compact td.dmg, .bdt.compact td.blk, .bdt.compact td.net, .bdt.compact td.chg b { font-size: 1rem; }
.bdt-wrap { overflow-x: auto; }

/* ---- v2 ---- */
.dice { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 6px; font-size: .82rem; font-weight: 800; background: rgba(168,85,247,.18); color: #d8b4fe; border: 1px solid rgba(168,85,247,.45); }
.dice.sure { background: rgba(34,197,94,.14); color: #86efac; border-color: rgba(34,197,94,.4); }
.dice small { font-weight: 600; color: var(--fg2); }
.assets { display: inline-flex; align-items: center; gap: 2px; font-size: 1rem; }
.assets i { font-style: normal; } .assets i.off { opacity: .22; filter: grayscale(1); } .assets i.lease { outline: 1px dashed var(--amber); border-radius: 4px; }
.assets b { margin-left: 6px; font-size: .78rem; color: var(--fg2); } .assets b.bad { color: var(--red2); }
.hitchip em { font-style: normal; font-size: .78rem; font-weight: 800; margin-left: 2px; } .hitchip em.bad { color: var(--red2); } .hitchip em.ok { color: var(--green); }
.droll { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--line); font-size: 1rem; margin: 0 8px 8px 0; }
.droll.ok { border-color: var(--green); background: rgba(34,197,94,.12); } .droll.fail { border-color: var(--red); background: rgba(239,68,68,.14); animation: shake .5s; }
.droll.sure { color: var(--fg2); } .droll.none { opacity: .5; }
.bdt .bd.fail { color: var(--red2); }
.evcard { background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(245,165,36,.08)); border: 1px solid rgba(239,68,68,.5); border-radius: 14px; padding: 14px; animation: fadein .4s; }
.evcard .evh { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 1.05rem; }
.evcard .evh .brk { background: var(--red); color: #fff; font-weight: 900; padding: 3px 10px; border-radius: 6px; animation: blink 1.2s infinite; }
.evcard .evt { margin-top: 8px; line-height: 1.55; }
.evtimer { font-size: 1.4rem; font-weight: 900; color: var(--red2); }
.goal { background: rgba(245,165,36,.08); border: 1px dashed var(--amber); border-radius: 12px; padding: 10px 12px; }
.goal b.t { color: var(--amber2); }
.emerg { background: rgba(239,68,68,.15); border: 1px solid var(--red); color: var(--red2); font-weight: 800; padding: 6px 10px; border-radius: 10px; display: inline-flex; gap: 6px; align-items: center; }
.fastbar { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #86efac; font-weight: 800; }
.fastbar.off { opacity: .45; text-decoration: line-through; }
.grade { display: inline-block; font-size: 5rem; font-weight: 900; line-height: 1; padding: 10px 30px; border-radius: 20px; }
.grade.S { color: #fde047; background: rgba(253,224,71,.12); } .grade.A { color: #86efac; background: rgba(34,197,94,.12); } .grade.B { color: #93c5fd; background: rgba(59,130,246,.12); } .grade.C { color: var(--fg2); background: var(--bg3); } .grade.F { color: var(--red2); background: rgba(239,68,68,.12); }
.lb tr.me td { background: rgba(245,165,36,.12); font-weight: 800; }
.opt.disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }