:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --text: #1c1f24;
  --muted: #5f6672;
  --border: #d9dde3;
  --primary: #1f5fbf;
  --primary-text: #ffffff;
  --ok: #1d7a46;
  --warn: #9a6200;
  --danger: #b3261e;
  --uncoated: #6b7280;
  --coated: #1f5fbf;
  --radius: 10px;
  --map-bg: #f8fafc;
  --zone-text: #1c1f24;
  --zone-sub: #64748b;
  --zone-white: #ffffff;
  --trace-filter: none;
  color-scheme: light;
}
/* 테마: 설정 > 화면 테마 (시스템 / 라이트 / 다크). <html data-theme="light|dark">, 없으면 시스템 설정을 따른다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --surface: #1c1f24;
    --surface-2: #262a31;
    --text: #e8eaed;
    --muted: #a0a7b2;
    --border: #353a43;
    --primary: #5b9bf0;
    --primary-text: #0d1117;
    --ok: #4cc287;
    --warn: #e0a640;
    --danger: #f2817a;
    --uncoated: #9aa2ad;
    --coated: #5b9bf0;
    --map-bg: #1a1e24;
    --bldg: #243349;
    --bldg-line: #5b7aa6;
    --zone-text: #e8eaed;
    --zone-sub: #a0a7b2;
    --zone-white: #1c1f24;
    --trace-filter: invert(1) hue-rotate(180deg) brightness(.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14161a;
  --surface: #1c1f24;
  --surface-2: #262a31;
  --text: #e8eaed;
  --muted: #a0a7b2;
  --border: #353a43;
  --primary: #5b9bf0;
  --primary-text: #0d1117;
  --ok: #4cc287;
  --warn: #e0a640;
  --danger: #f2817a;
  --uncoated: #9aa2ad;
  --coated: #5b9bf0;
  --map-bg: #1a1e24;
  --bldg: #243349;
  --bldg-line: #5b7aa6;
  --zone-text: #e8eaed;
  --zone-sub: #a0a7b2;
  --zone-white: #1c1f24;
  --trace-filter: invert(1) hue-rotate(180deg) brightness(.9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Pretendard", "Malgun Gothic", system-ui, sans-serif;
}
[hidden] { display: none !important; }

header.top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
header.top h1 { font-size: 17px; margin: 0; }
header.top .spacer { flex: 1; }
header.top .who { color: var(--muted); font-size: 14px; }

nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 16px 0; }
nav.tabs button {
  border: 1px solid var(--border); border-bottom: none; background: var(--surface-2);
  color: var(--text); padding: 8px 14px; border-radius: 8px 8px 0 0; cursor: pointer; font: inherit;
}
nav.tabs button[aria-selected="true"] { background: var(--surface); font-weight: 600; }

main { padding: 0 16px 32px; max-width: 1100px; }
section.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 16px;
}
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 18px 0 8px; }
p.hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }

form.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, select {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }

button.btn {
  font: inherit; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-text);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600;
}
button.btn.secondary { background: transparent; color: var(--primary); }
button.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.btn:disabled { opacity: .5; cursor: default; }
button.big { padding: 14px 20px; font-size: 17px; }

.msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.msg.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.msg.err { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.msg.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; }
.badge.uncoated { color: var(--uncoated); }
.badge.coated { color: var(--coated); }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface-2); border-radius: var(--radius); padding: 12px; }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

.epc { font-family: ui-monospace, Consolas, monospace; font-size: 20px; letter-spacing: 1px; word-break: break-all; }
.mono { font-family: ui-monospace, Consolas, monospace; }

body.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
}
.login-title { text-align: center; font-size: 21px; margin: 0; }
.login-sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.login-help { text-align: center; color: var(--muted); font-size: 13px; margin: 0; }
.login-help a { color: var(--primary); font-weight: 600; text-decoration: none; }
/* ── 공장 재고 현황 대시보드 ─────────────────────── */
:root { --rate-low: #34c38f; --rate-mid: #f4b73e; --rate-high: #ef6461; --navy: #1f3a5f; }
:root:not([data-theme]) , :root[data-theme="light"] { --bldg: #e6eefb; --bldg-line: #8aa4cc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bldg: #243349; --bldg-line: #5b7aa6; } }
.dash-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-head h2 { margin: 0; }
.dash-head .spacer { flex: 1; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-side .card { margin-bottom: 12px; }
.card-title { margin: 0 0 10px; font-size: 15px; }
.map-card { margin: 0; }
.map-title { font-weight: 700; margin-bottom: 4px; }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.swatch:first-child { margin-left: 0; }
.swatch.low { background: var(--rate-low); } .swatch.mid { background: var(--rate-mid); } .swatch.high { background: var(--rate-high); }
.swatch.bldg { background: var(--bldg); border: 1px solid var(--bldg-line); } .swatch.reader { background: var(--navy); }
.map-edit-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.map-edit-bar select { max-width: 200px; }
.map-wrap { position: relative; border-radius: var(--radius); background: var(--map-bg); overflow: hidden; }
.map-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; transition: opacity .2s; filter: var(--trace-filter); }
.map-wrap.editing img { opacity: .95; }
.map-wrap svg { position: relative; display: block; width: 100%; height: auto; }
.map-wrap.drawing svg { cursor: crosshair; }
.map-empty { position: absolute; left: 0; right: 0; top: 12px; margin: 0 auto; max-width: 420px; padding: 10px 14px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }

.zone { transition: transform .18s ease, filter .18s ease; transform-box: fill-box; transform-origin: center; }
.zone .shape { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.zone.bldg .shape { fill: var(--bldg); stroke: var(--bldg-line); }
.zone.inactive .shape { fill: var(--surface-2); stroke: var(--muted); stroke-dasharray: 6 5; }
.zone.wh .shape { fill: var(--zone-white); }
.zone.wh .fill { opacity: .85; }
.zone .outline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.zone.low .outline { stroke: var(--rate-low); } .zone.mid .outline { stroke: var(--rate-mid); } .zone.high .outline { stroke: var(--rate-high); }
.zone.selected .outline { stroke-width: 4.5; }
.zone.low .shape { stroke: var(--rate-low); } .zone.low .fill { fill: var(--rate-low); }
.zone.mid .shape { stroke: var(--rate-mid); } .zone.mid .fill { fill: var(--rate-mid); }
.zone.high .shape { stroke: var(--rate-high); } .zone.high .fill { fill: var(--rate-high); }
.zone.nocap .shape { stroke: var(--primary); fill: color-mix(in srgb, var(--primary) 14%, var(--zone-white)); }
.zone.clickable { cursor: pointer; }
.zone.clickable:hover, .zone.clickable:focus { transform: scale(1.06); filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .25)); outline: none; }
.zone.selected .shape { stroke-width: 4.5; }
.zone text { text-anchor: middle; dominant-baseline: middle; pointer-events: none; font-family: inherit; }
.zone .rate { font-weight: 800; fill: var(--zone-text); }
.zone.high .rate { fill: #b42318; } .zone.mid .rate { fill: #8a5a00; } .zone.low .rate { fill: #11724f; }
.zone .name { font-weight: 700; fill: var(--zone-text); }
.zone .sub { fill: var(--zone-sub); }
.callout rect { fill: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.callout line { stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.callout text { text-anchor: middle; font-family: inherit; fill: var(--text); }
.callout .t1 { font-weight: 700; } .callout .t2 { fill: var(--muted); }
.callout.low rect, .callout.low line { stroke: var(--rate-low); }
.callout.mid rect, .callout.mid line { stroke: var(--rate-mid); }
.callout.high rect, .callout.high line { stroke: var(--rate-high); }
.callout.nocap rect, .callout.nocap line { stroke: var(--primary); }
.reader-icon rect { fill: var(--navy); }
.reader-icon path { fill: none; stroke: #fff; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 2; }
.reader-icon circle { fill: #fff; }
.draft polyline, .draft polygon { fill: var(--warn); fill-opacity: .2; stroke: var(--warn); stroke-width: 3; vector-effect: non-scaling-stroke; }
.draft circle { fill: var(--warn); }

.kpis.compact { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.kpis.compact .kpi { padding: 10px; }
.kpis.compact .value { font-size: 20px; }
.cap-row { margin-bottom: 12px; }
.cap-row .top, .cap-row .bottom { display: flex; justify-content: space-between; font-size: 13px; }
.cap-row .top { font-weight: 700; }
.cap-row .bottom { color: var(--muted); font-size: 12px; }
.cap-row .warn { color: var(--rate-high); }
.bar { height: 10px; border-radius: 999px; background: var(--surface-2); margin: 4px 0; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; }
.bar.low > span { background: var(--rate-low); } .bar.mid > span { background: var(--rate-mid); } .bar.high > span { background: var(--rate-high); }
.pct.low { color: #11724f; } .pct.mid { color: #8a5a00; } .pct.high { color: #b42318; }
.badge.in { color: var(--ok); } .badge.out { color: var(--primary); } .badge.move { color: var(--muted); }
ul.how { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.detail-head { display: flex; align-items: baseline; gap: 8px; }
.detail-head .spacer { flex: 1; }
.detail-rate { font-size: 28px; font-weight: 800; }
.linklike { background: none; border: none; color: var(--primary); cursor: pointer; font: inherit; padding: 0; }

.center-box { max-width: 380px; margin: 10vh auto; padding: 0 16px; }
.center-box .card { padding: 24px; }
.center-box h1 { font-size: 20px; margin: 0 0 4px; }
.center-box form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.center-box a { color: var(--primary); font-size: 14px; }
.splash { text-align: center; color: var(--muted); margin-top: 20vh; }

@media (max-width: 600px) {
  main { padding: 0 8px 24px; }
  nav.tabs { padding: 8px 8px 0; }
}
.cap-row.clickable-row { cursor: pointer; border-radius: 8px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; }
.cap-row.clickable-row:hover { background: var(--surface-2); }
.dash-side table { font-size: 13px; }
.dash-side th, .dash-side td { padding: 6px 6px; }
.dash-side td:nth-child(2) { white-space: normal; }

/* 화면 테마 선택 */
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-picker label { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; min-width: 150px; background: var(--surface); }
.theme-picker label:has(input:checked) { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: -1px; }
.theme-picker .chip { width: 30px; height: 22px; border-radius: 6px; border: 1px solid var(--border); flex: none; }
.theme-picker .chip.system { background: linear-gradient(135deg, #ffffff 50%, #1c1f24 50%); }
.theme-picker .chip.light { background: #ffffff; }
.theme-picker .chip.dark { background: #1c1f24; }
.theme-picker small { display: block; color: var(--muted); font-size: 12px; }
.zone .rate { paint-order: stroke; stroke: var(--zone-white); stroke-width: 5px; stroke-linejoin: round; }

/* 위치 종류별 색 — 생산(파랑) · 창고 CAPA 미설정(보라) · 분체업체(분홍) · 출고(갈색) · 건물(회색) */
:root {
  --prod: #e3ecfb; --prod-line: #5b84c4;
  --wh-nocap: #efe9ff; --wh-nocap-line: #7c5cff;
  --vendor: #fde7f3; --vendor-line: #d6409f;
  --ship: #f5ece3; --ship-line: #a0754d;
  --plain: #eef0f3; --plain-line: #9aa3ae;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --prod: #1f3150; --prod-line: #6f9ae0;
    --wh-nocap: #2c2546; --wh-nocap-line: #a48bff;
    --vendor: #3a1f30; --vendor-line: #f07cc0;
    --ship: #3a2c20; --ship-line: #c99a6c;
    --plain: #2a2f37; --plain-line: #6b7480;
  }
}
:root[data-theme="dark"] {
  --prod: #1f3150; --prod-line: #6f9ae0;
  --wh-nocap: #2c2546; --wh-nocap-line: #a48bff;
  --vendor: #3a1f30; --vendor-line: #f07cc0;
  --ship: #3a2c20; --ship-line: #c99a6c;
  --plain: #2a2f37; --plain-line: #6b7480;
}
.zone.t-prod .shape { fill: var(--prod); stroke: var(--prod-line); }
.zone.t-plain .shape { fill: var(--plain); stroke: var(--plain-line); }
.zone.t-ship .shape { fill: var(--ship); stroke: var(--ship-line); }
.zone.t-vendor .shape { fill: var(--vendor); stroke: var(--vendor-line); }
.zone.wh.nocap .shape { fill: var(--wh-nocap); stroke: var(--wh-nocap-line); stroke-dasharray: none; }
.zone.wh.nocap .rate { fill: var(--wh-nocap-line); }
.callout.nocap rect, .callout.nocap line { stroke: var(--wh-nocap-line); }
.zone.t-vendor .name { fill: var(--vendor-line); }
.swatch.prod { background: var(--prod); border: 1px solid var(--prod-line); }
.swatch.whnocap { background: var(--wh-nocap); border: 1px solid var(--wh-nocap-line); }
.swatch.vendor { background: var(--vendor); border: 1px solid var(--vendor-line); }
.swatch.plain { background: var(--plain); border: 1px solid var(--plain-line); }
.legend .lg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 8px; }
.legend .lg .swatch { margin-left: 0; }