:root {
  --bg: #0e1319; --bg2: #151c24; --bg3: #1d2630; --line: #2a3542; --fg: #e3e9ef; --muted: #8a97a6;
  --accent: #39b8e6; --ok: #3fb950; --warn: #e3a32b; --crit: #ef5350; --info: #6aa3ff;
  --scene: #10161d;
  --font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f3f5f8; --bg2: #ffffff; --bg3: #eef1f5; --line: #d5dbe3; --fg: #18212b; --muted: #627083;
  --accent: #0b84c6; --scene: #dfe5ec;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 1rem/1.45 var(--font); }
button, select, input { font: inherit; color: inherit; }
button, select { background: var(--bg3); border: 0.07143rem solid var(--line); border-radius: 0.4286rem; padding: 0.2857rem 0.6429rem; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
input { background: var(--bg); border: 0.07143rem solid var(--line); border-radius: 0.4286rem; padding: 0.2857rem 0.5rem; width: 6rem; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

#top { height: 3.429rem; display: flex; align-items: center; gap: 0.7143rem; padding: 0 1rem; background: var(--bg2); border-bottom: 0.07143rem solid var(--line); position: relative; z-index: 5; }
.brand { font-weight: 700; color: var(--fg); text-decoration: none; white-space: nowrap; }
#crumbs { display: flex; gap: 0.4286rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
#crumbs a { color: var(--muted); text-decoration: none; }
#crumbs a:hover { color: var(--accent); }
#crumbs b { color: var(--fg); font-weight: 600; }
.spacer { flex: 1; }
#simbar { display: flex; align-items: center; gap: 0.5714rem; min-width: 0; white-space: nowrap; overflow: hidden; }
#simbar #clock { font-size: 0.8571rem; color: var(--muted); }
.navlink { white-space: nowrap; color: var(--muted); text-decoration: none; padding: 0.2143rem 0.5714rem; border-radius: 0.4286rem; }
.navlink:hover, .navlink.on { color: var(--fg); background: var(--bg3); }
.srcTag { font-size: 0.8571rem; padding: 0.1429rem 0.5714rem; border-radius: 0.7143rem; border: 0.07143rem dashed var(--warn); color: var(--warn); white-space: nowrap; }
.srcTag.real { border-style: solid; border-color: var(--ok); color: var(--ok); }
#helpBtn { width: 2.143rem; padding: 0.2857rem 0; font-weight: 700; }
input[type="date"] { width: auto; }
.badge { font-weight: 700; }
.badge.CHG { color: #8fd3ff; } .badge.DIS { color: #b6a8ff; } .badge.SIM { color: #ffd479; } .badge.CHILL { color: #ffa48c; }
#clock { font-variant-numeric: tabular-nums; color: var(--muted); }

main { position: absolute; inset: 3.429rem 0 0 0; }
.view { position: absolute; inset: 0; }

/* L0 지점 선택 · 보고서 */
#sites, #reports, #whatif { overflow: auto; padding: 1.571rem clamp(1.143rem, 4vw, 2.857rem) 2.857rem; }
#sites h1, #reports h1, #whatif h1 { font-size: 1.429rem; margin: 0 0 0.2857rem; }
#sites .lead, #reports .lead, #whatif .lead { color: var(--muted); margin: 0 0 1.286rem; max-width: 64.29rem; }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.57rem, 1fr)); gap: 0.8571rem; }
.rcard { background: var(--bg2); border: 0.07143rem solid var(--line); border-radius: 0.7143rem; padding: 0.8571rem 1rem; }
.rcard h3 { margin: 0 0 0.4286rem; font-size: 1.071rem; }
.rcard dl { display: grid; grid-template-columns: auto 1fr; gap: 0.1429rem 0.7143rem; margin: 0.5714rem 0; font-size: 0.9286rem; }
.rcard dt { color: var(--muted); } .rcard dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rcard .act { display: flex; gap: 0.4286rem; flex-wrap: wrap; }
.rcard .act a { color: var(--accent); text-decoration: none; border: 0.07143rem solid var(--line); border-radius: 0.4286rem; padding: 0.2143rem 0.6429rem; }
.region { margin-bottom: 1.286rem; }
.region h2 { font-size: 0.9286rem; color: var(--muted); font-weight: 600; margin: 0 0 0.5714rem; letter-spacing: .02em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.57rem, 1fr)); gap: 0.7143rem; }
.card { background: var(--bg2); border: 0.07143rem solid var(--line); border-radius: 0.7143rem; padding: 0.7857rem 0.9286rem; min-height: 5.429rem; }
.card.twin { cursor: pointer; border-color: var(--accent); grid-column: span 2; }
.card.twin:hover { box-shadow: 0 0 0 0.1429rem var(--accent) inset; }
.card .nm { font-weight: 600; }
.card .st { margin-top: 0.4286rem; font-size: 0.9286rem; color: var(--muted); }
.card.wait { opacity: .6; }
.dot { display: inline-block; width: 0.5714rem; height: 0.5714rem; border-radius: 50%; margin-right: 0.3571rem; background: var(--muted); vertical-align: middle; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.crit { background: var(--crit); }

/* 3D 스테이지 */
#c { width: 100%; height: 100%; display: block; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--bg2) 88%, transparent); border: 0.07143rem solid var(--line); border-radius: 0.4286rem;
  padding: 0.1429rem 0.5rem; font-size: 0.8571rem; line-height: 1.3; }
.lbl small { color: var(--muted); }
.lbl.alarm { border-color: var(--crit); box-shadow: 0 0 0 0.07143rem var(--crit); }
.lbl.sel { border-color: var(--accent); }
.lbl.pin { font-size: 0.9286rem; padding: 0.3571rem 0.7143rem; border-color: #ff9a3c; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: var(--scene); }
main { --sl: 0; }
main.sideOpen { --sl: 21.43rem; }
#hint { position: absolute; left: calc(3.714rem + var(--sl)); top: 0.8571rem; color: var(--muted); font-size: 0.9286rem; pointer-events: none; }
#legend { position: absolute; left: calc(1rem + var(--sl)); bottom: 0.8571rem; display: flex; gap: 0.8571rem; font-size: 0.8571rem; color: var(--muted);
  background: color-mix(in srgb, var(--bg2) 80%, transparent); padding: 0.2857rem 0.6429rem; border-radius: 0.4286rem; }
#legend i { display: inline-block; width: 1rem; height: 0.2857rem; border-radius: 0.1429rem; margin-right: 0.2857rem; vertical-align: middle; }
#feed { position: absolute; left: calc(1rem + var(--sl)); bottom: 3.143rem; width: min(27.14rem, calc(100% - 2rem - var(--sl))); max-height: 38%; overflow: auto;
  background: color-mix(in srgb, var(--bg2) 92%, transparent); border: 0.07143rem solid var(--line); border-radius: 0.7143rem; padding: 0.5714rem 0.7143rem; }
#feed h3 { margin: 0 0 0.4286rem; font-size: 0.9286rem; }
#feed ul { list-style: none; margin: 0; padding: 0; }
#feed li { padding: 0.4286rem 0.2857rem; border-top: 0.07143rem solid var(--line); cursor: pointer; font-size: 0.9286rem; }
#feed li:first-child { border-top: 0; }
#feed li .ev { color: var(--muted); font-size: 0.8571rem; }
#feed .empty { color: var(--muted); cursor: default; }

/* 왼쪽 패널: 운영 제어 · 시점 가이드 */
#side { position: absolute; top: 0; left: 0; bottom: 0; z-index: 4; display: flex; pointer-events: none; }
#side .sideBody { width: 19.43rem; overflow: auto; background: var(--bg2); border-right: 0.07143rem solid var(--line); padding: 0.7143rem 0.8571rem 1.714rem; pointer-events: auto; }
#side.collapsed .sideBody { display: none; }
#sideToggle { pointer-events: auto; align-self: flex-start; margin: 0.7143rem 0 0 0.4286rem; padding: 0.4286rem 0.5rem; order: 2; }
#side section + section { margin-top: 1.143rem; border-top: 0.07143rem solid var(--line); padding-top: 0.7143rem; }
#side h4 { margin: 0.1429rem 0 0.5714rem; font-size: 0.9286rem; }
#side label { display: flex; justify-content: space-between; align-items: center; gap: 0.5714rem; font-size: 0.9286rem; margin-top: 0.5714rem; }
#side label select { max-width: 11.43rem; }
#side label.chk { justify-content: flex-start; margin-top: 0.7143rem; gap: 0.4286rem; }
#side label.chk input { width: auto; margin: 0; }
#side input[type="date"] { margin-top: 0.4286rem; width: 100%; }
#side .desc { margin: 0.2143rem 0 0; font-size: 0.8214rem; color: var(--muted); line-height: 1.4; }
#minimap { width: 100%; background: var(--bg); border: 0.07143rem solid var(--line); border-radius: 0.5714rem; display: block; }
#minimap .room { fill: none; stroke: var(--muted); stroke-width: .4; }
#minimap .eq { fill: var(--bg3); stroke: var(--muted); stroke-width: .25; cursor: pointer; }
#minimap .eq:hover { fill: color-mix(in srgb, var(--accent) 30%, var(--bg3)); }
#minimap .eq.run { stroke: var(--ok); } #minimap .eq.alarm { fill: color-mix(in srgb, var(--crit) 45%, var(--bg3)); }
#minimap .eq.sel { stroke: var(--accent); stroke-width: .7; }
#minimap .pipe { fill: none; stroke-width: .35; opacity: .7; }
#minimap .cam { fill: var(--accent); }
#minimap .fov { fill: var(--accent); opacity: .15; }
#minimap text { font-size: 0.1643rem; fill: var(--muted); pointer-events: none; }
.views { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.2857rem; margin-top: 0.5714rem; }
.views button { font-size: 0.8571rem; padding: 0.2857rem 0; }
.views button.on { border-color: var(--accent); color: var(--accent); }
#eqList { margin-top: 0.5714rem; font-size: 0.8929rem; }
#eqList .grp { color: var(--muted); font-size: 0.8214rem; margin: 0.5714rem 0 0.2143rem; }
#eqList button { display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 0.2143rem 0.2857rem; border-radius: 0.3571rem; }
#eqList button:hover, #eqList button.sel { background: var(--bg3); }
#eqList button small { margin-left: auto; color: var(--muted); }

/* 기능 설명 */
#help { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: 1.143rem; }
.helpBox { position: relative; background: var(--bg2); border: 0.07143rem solid var(--line); border-radius: 0.8571rem; max-width: 51.43rem; max-height: 86vh; overflow: auto; padding: 1.286rem 1.571rem; font-size: 1rem; }
.helpBox h2 { margin: 0 0 0.4286rem; font-size: 1.286rem; } .helpBox h3 { margin: 1rem 0 0.2857rem; font-size: 1rem; color: var(--accent); }
.helpBox ol, .helpBox ul { padding-left: 1.429rem; margin: 0.2857rem 0; } .helpBox li { margin: 0.2143rem 0; }
#helpClose { position: absolute; top: 0.8571rem; right: 0.8571rem; }

/* L3 설비 패널 */
#panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(30rem, 100%); background: var(--bg2); border-left: 0.07143rem solid var(--line);
  display: flex; flex-direction: column; z-index: 4; }
#panel > header { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.8571rem 1rem 0.4286rem; }
#pTitle { font-size: 1.143rem; font-weight: 700; }
#pSub { font-size: 0.8571rem; }
#pState { padding: 0 1rem 0.5714rem; font-size: 0.9286rem; }
#pTabs { display: flex; gap: 0.2857rem; padding: 0 0.7143rem; border-bottom: 0.07143rem solid var(--line); }
#pTabs button { border: 0; border-bottom: 0.1429rem solid transparent; border-radius: 0; background: none; padding: 0.5rem 0.6429rem; color: var(--muted); }
#pTabs button.on { color: var(--fg); border-bottom-color: var(--accent); }
#pBody { flex: 1; overflow: auto; padding: 0.7143rem 1rem 1.429rem; }
#pBody h4 { margin: 1rem 0 0.4286rem; font-size: 0.8571rem; color: var(--muted); font-weight: 600; }
table.vals { width: 100%; border-collapse: collapse; font-size: 0.9286rem; }
table.vals td { padding: 0.2857rem 0.1429rem; border-bottom: 0.07143rem solid var(--line); vertical-align: top; }
table.vals tr.row { cursor: pointer; }
table.vals tr.row:hover td, table.vals tr.on td { background: var(--bg3); }
table.vals td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.vals .tid { color: var(--muted); font-size: 0.7857rem; }
canvas.trend { width: 100%; height: 8.571rem; background: var(--bg); border: 0.07143rem solid var(--line); border-radius: 0.5714rem; display: block; }
.tier { font-size: 0.7857rem; padding: 0.07143rem 0.4286rem; border-radius: 0.6429rem; border: 0.07143rem solid var(--line); color: var(--muted); }
.tier.auto_candidate { border-color: var(--ok); color: var(--ok); }
.tier.approval { border-color: var(--warn); color: var(--warn); }
.ctl { display: grid; grid-template-columns: 1fr auto; gap: 0.2857rem 0.5714rem; padding: 0.5rem 0; border-bottom: 0.07143rem solid var(--line); align-items: center; }
.ctl .act { display: flex; gap: 0.3571rem; align-items: center; justify-content: flex-end; }
.cmd { padding: 0.5rem 0.6429rem; border: 0.07143rem solid var(--line); border-radius: 0.5714rem; margin-bottom: 0.4286rem; font-size: 0.9286rem; }
.cmd.pending { border-color: var(--warn); } .cmd.done { border-color: var(--ok); } .cmd.rejected, .cmd.denied { border-color: var(--crit); }
.cmd .act { margin-top: 0.3571rem; display: flex; gap: 0.4286rem; }
.item { padding: 0.5rem 0; border-bottom: 0.07143rem solid var(--line); font-size: 0.9286rem; }
.item .ev { color: var(--muted); font-size: 0.8571rem; }
.sev-crit { color: var(--crit); } .sev-warn { color: var(--warn); } .sev-info { color: var(--info); }
.note { font-size: 0.8571rem; color: var(--muted); background: var(--bg3); border-radius: 0.5714rem; padding: 0.5rem 0.6429rem; margin: 0.5714rem 0; }

@media (max-width: 760px) {
  #clock, #legend, .srcTag { display: none; }
  main.sideOpen { --sl: 0; }
  #side .sideBody { width: min(19.43rem, 80vw); }
  #top { gap: 0.4286rem; padding: 0 0.5714rem; }
  #crumbs { display: none; }
  #panel { top: auto; height: 62%; width: 100%; border-left: 0; border-top: 0.07143rem solid var(--line); }
  #feed { max-height: 26%; }
  .card.twin { grid-column: span 1; }
}

/* 로그인 */
body.loginPage { display: grid; place-items: center; min-height: 100vh; padding: 1.143rem; }
.loginBox { width: min(24.29rem, 100%); background: var(--bg2); border: 0.07143rem solid var(--line); border-radius: 0.8571rem; padding: 1.714rem; display: grid; gap: 0.8571rem; }
.loginBox h1 { margin: 0; font-size: 1.429rem; } .loginBox p { margin: 0; }
.loginBox label { display: grid; gap: 0.2857rem; font-size: 0.9286rem; color: var(--muted); }
.loginBox input { width: 100%; padding: 0.5714rem 0.7143rem; font-size: 1rem; }
.loginBox button { padding: 0.6429rem; font-weight: 700; background: var(--accent); color: #fff; border-color: var(--accent); }
.err { color: var(--crit); font-size: 0.9286rem; min-height: 1em; }
#userBox { display: flex; align-items: center; gap: 0.4286rem; font-size: 0.9286rem; color: var(--muted); white-space: nowrap; }

/* 캠퍼스 트윈 추가 */
:root { --ground: #2d3a33; --site: #3a4446; --road: #262c31; --rackblock: #39b8e6; --empty: #4a5058; --mv: #ffb347; --buffer: #d9534f; }
:root[data-theme="light"] { --ground: #b9c9ad; --site: #cfd6d3; --road: #8d949a; --rackblock: #0b84c6; --empty: #b0b8c0; }
#kpi { position: absolute; left: calc(1rem + var(--sl)); top: 2.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; pointer-events: none; max-width: calc(100% - 2rem - var(--sl)); }
#kpi .k { background: color-mix(in srgb, var(--bg2) 88%, transparent); border: 0.07143rem solid var(--line); border-radius: 0.5714rem; padding: 0.2857rem 0.6429rem; font-size: 0.7857rem; color: var(--muted); min-width: 6.5rem; }
#kpi .k b { display: block; font-size: 1.071rem; color: var(--fg); font-variant-numeric: tabular-nums; }
#kpi .k.alert b { color: var(--crit); }
#sideOpt label input[type="number"] { width: 5.5rem; }
.optBtns { display: flex; gap: 0.4286rem; margin-top: 0.6429rem; } .optBtns button { flex: 1; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.sum { margin-top: 0.6429rem; font-size: 0.8571rem; display: grid; grid-template-columns: auto 1fr; gap: 0.1429rem 0.5714rem; }
.sum span { color: var(--muted); } .sum b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sum .lim { grid-column: 1 / -1; color: var(--warn); font-size: 0.7857rem; }
.lbl.dc { font-weight: 600; } .lbl.sub { border-color: #ffb347; } .lbl.plant { border-color: #3fae7a; }
.lbl.row { font-size: 0.75rem; padding: 0.07rem 0.36rem; opacity: .85; }
#legend .sw { display: inline-block; width: 3.5rem; height: 0.5rem; border-radius: 0.2rem; vertical-align: middle; margin: 0 0.3rem; background: linear-gradient(90deg, #2f6fd6, #3fb950, #e3a32b, #ef5350); }

/* 비교 · 제안서 */
#compare, #proposal { overflow: auto; padding: 1.571rem clamp(1.143rem, 4vw, 2.857rem) 2.857rem; }
#compare h1, #proposal h1 { font-size: 1.429rem; margin: 0 0 0.2857rem; }
.lead { color: var(--muted); margin: 0 0 1rem; max-width: 70rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.2857rem; margin: 0.5rem 0 1rem; }
.chip { font-size: 0.8571rem; padding: 0.2143rem 0.7143rem; border-radius: 1rem; }
.chip.on { border-color: var(--accent); color: var(--accent); }
.kpiRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.43rem, 1fr)); gap: 0.7143rem; margin: 1rem 0; }
.kpiT { background: var(--bg2); border: 0.07143rem solid var(--line); border-radius: 0.7143rem; padding: 0.7143rem 0.8571rem; display: grid; gap: 0.1429rem; }
.kpiT span { font-size: 0.8571rem; color: var(--muted); } .kpiT b { font-size: 1.429rem; font-variant-numeric: tabular-nums; } .kpiT small { font-size: 0.8214rem; color: var(--muted); }
.kpiT .good { color: var(--ok); } .kpiT .bad { color: var(--crit); }
.card { background: var(--bg2); border: 0.07143rem solid var(--line); border-radius: 0.7143rem; padding: 0.8571rem 1rem; margin-bottom: 0.8571rem; }
.card h2 { font-size: 1.071rem; margin: 0 0 0.5714rem; } .card h3 { font-size: 0.9286rem; margin: 0.8571rem 0 0.2857rem; color: var(--accent); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0.8571rem; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.9286rem; }
table.cmp th, table.cmp td { border-bottom: 0.07143rem solid var(--line); padding: 0.3571rem 0.4286rem; text-align: right; vertical-align: top; }
table.cmp th:first-child, table.cmp td:first-child { text-align: left; }
table.cmp th { color: var(--muted); font-weight: 600; font-size: 0.8571rem; }
table.cmp td.d { font-weight: 600; } td.good { color: var(--ok); } td.bad { color: var(--crit); }
table.cmp tr.sub td:first-child { color: var(--muted); }
.bar { display: flex; align-items: center; gap: 0.4286rem; font-size: 0.8214rem; margin: 0.2143rem 0; }
.bar i { display: block; height: 0.8571rem; border-radius: 0.2143rem; background: var(--s1); }
.bar.hts i { background: #4fc3f7; } .bar.conv i { background: #ffb347; }
.bar span { min-width: 5rem; color: var(--muted); } .bar b { min-width: 5rem; text-align: right; font-variant-numeric: tabular-nums; }
svg.chart { width: 100%; height: auto; display: block; } svg.chart .ax { font-size: 0.7857rem; fill: var(--muted); } svg.chart .grid { stroke: var(--line); }
svg.plan { width: 100%; height: auto; background: var(--bg); border: 0.07143rem solid var(--line); border-radius: 0.5714rem; }
svg.plan text { font-size: 0.55rem; fill: var(--fg); }
.note { font-size: 0.8571rem; color: var(--muted); background: var(--bg3); border-radius: 0.5714rem; padding: 0.5rem 0.6429rem; margin: 0.5714rem 0; }
.why ul, .card ul { padding-left: 1.286rem; margin: 0.2857rem 0; } .card li { margin: 0.2143rem 0; }
.docBtns { display: flex; gap: 0.4286rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.doc { max-width: 60rem; }
.doc .cover { padding: 2rem 0 1rem; border-bottom: 0.14rem solid var(--accent); margin-bottom: 1rem; }
.doc .cover h1 { font-size: 1.857rem; } .doc .cover .muted { font-size: 1rem; }
.doc h2 { font-size: 1.214rem; margin: 1.571rem 0 0.5714rem; border-left: 0.2857rem solid var(--accent); padding-left: 0.5714rem; }
.doc p { line-height: 1.6; }
.narr { white-space: pre-wrap; line-height: 1.65; }
.ctl { display: grid; grid-template-columns: 1fr auto; gap: 0.2857rem 0.5714rem; padding: 0.5rem 0; border-bottom: 0.07143rem solid var(--line); align-items: center; }
.ctl .act { display: flex; gap: 0.3571rem; align-items: center; justify-content: flex-end; }
.cmd { padding: 0.5rem 0.6429rem; border: 0.07143rem solid var(--line); border-radius: 0.5714rem; margin-bottom: 0.4286rem; font-size: 0.9286rem; }
.cmd.pending { border-color: var(--warn); } .cmd.done { border-color: var(--ok); } .cmd.rejected, .cmd.denied { border-color: var(--crit); }
.cmd .act { margin-top: 0.3571rem; display: flex; gap: 0.4286rem; }
.item { padding: 0.5rem 0; border-bottom: 0.07143rem solid var(--line); font-size: 0.9286rem; }
.item .ev { color: var(--muted); font-size: 0.8571rem; }
.sev-crit { color: var(--crit); } .sev-warn { color: var(--warn); } .sev-info { color: var(--info); }
.tier { font-size: 0.7857rem; padding: 0.07143rem 0.4286rem; border-radius: 0.6429rem; border: 0.07143rem solid var(--warn); color: var(--warn); }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
@media print {
  #top, #side, #panel, #stage, .docBtns, #help { display: none !important; }
  main { position: static; } #proposal { position: static; overflow: visible; padding: 0; }
  body { background: #fff; color: #000; } .card, .kpiT { break-inside: avoid; border-color: #bbb; background: #fff; }
  :root { --bg: #fff; --bg2: #fff; --bg3: #f3f3f3; --fg: #000; --muted: #444; --line: #bbb; }
  .doc h2 { break-after: avoid; }
  @page { size: A4; margin: 14mm 12mm; }
}

/* 데이터홀 20 MW · 기초자료 */
.lbl.room { font-weight: 600; border-color: #6b7c8f; }
a.btn { display: inline-block; text-decoration: none; color: var(--fg); background: var(--bg3); border: 0.07143rem solid var(--line); border-radius: 0.4286rem; padding: 0.2857rem 0.6429rem; text-align: center; }
a.btn:hover { border-color: var(--accent); }
#hallspec { overflow: auto; padding: 1.571rem clamp(1.143rem, 3vw, 2.4rem) 2.857rem; }
#hallspec h2 { font-size: 1.357rem; margin: 0; } #hallspec h2 small { font-size: 0.9rem; color: var(--muted); font-weight: 400; margin-left: 0.4rem; }
#hallspec h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; color: var(--accent); }
#hallspec section { margin-top: 0.8rem; }
.pageHead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; justify-content: space-between; margin-bottom: 0.4rem; }
.pageBtns { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .pageBtns label { display: flex; gap: 0.4rem; align-items: center; color: var(--muted); }
.tblWrap { overflow-x: auto; border: 0.07143rem solid var(--line); border-radius: 0.6rem; background: var(--bg2); }
table.spec { border-collapse: collapse; width: 100%; font-size: 0.8571rem; font-variant-numeric: tabular-nums; }
table.spec th, table.spec td { border-bottom: 0.07143rem solid var(--line); padding: 0.32rem 0.5rem; text-align: right; vertical-align: top; }
table.spec th:first-child { text-align: left; color: var(--muted); font-weight: 500; white-space: nowrap; position: sticky; left: 0; background: var(--bg2); }
table.spec th.gh { text-align: center; color: var(--fg); font-size: 0.95rem; border-left: 0.07143rem solid var(--line); }
table.spec th.gh small { display: block; color: var(--muted); font-weight: 400; font-size: 0.75rem; }
table.spec th.native { color: var(--accent); }
table.spec tr.sec th { text-align: left; color: var(--accent); background: var(--bg3); font-weight: 700; position: static; }
table.spec tr.txt td { text-align: left; min-width: 11rem; } table.spec tr.txt td small { color: var(--fg); }
table.spec td small { color: var(--muted); } table.spec td .warn { color: var(--warn); }
table.spec tr.plans td { min-width: 9rem; }
table.spec.small td { text-align: left; } table.spec.small td small.good { color: var(--ok); } table.spec.small td small.bad { color: var(--crit); }
svg.plan .hallbg { fill: var(--bg3); } svg.plan .rack { fill: #4a6fa5; } svg.plan .rack.sc { fill: #b0844a; } svg.plan .net { fill: #e8c547; } svg.plan .cdu { fill: #3fae7a; }
svg.plan .hot { fill: rgba(239, 83, 80, 0.18); } svg.plan .fwu { fill: rgba(57, 184, 230, 0.25); }
svg.plan .bwA { stroke: #2f6fe0; stroke-width: 1.4; } svg.plan .bwB { stroke: #d9363e; stroke-width: 1.4; }
ul.src { font-size: 0.8571rem; color: var(--muted); }
.small { font-size: 0.8571rem; }
@media print { #hallspec { position: static; overflow: visible; padding: 0; } .pageBtns { display: none; } .tblWrap { overflow: visible; } }

/* ===== 무역센터-GITC 시공 트윈 추가 ===== */
.page { overflow: auto; padding: 1.571rem clamp(1.143rem, 3vw, 2.4rem) 2.857rem; }
.page h1 { font-size: 1.429rem; margin: 0 0 0.2857rem; }
#kpi { top: 0.8rem; }
#hint { top: auto; bottom: 7.2rem; }
#timeline { position: absolute; left: calc(1rem + var(--sl)); right: 1rem; bottom: 0.8rem; z-index: 3; background: color-mix(in srgb, var(--bg2) 94%, transparent);
  border: 0.07143rem solid var(--line); border-radius: 0.7143rem; padding: 0.45rem 0.8rem 0.5rem; display: grid; grid-template-columns: auto auto 1fr auto; gap: 0.3rem 0.7rem; align-items: center; }
#panel:not([hidden]) ~ #stage #timeline, main.panelOpen #timeline { right: calc(min(30rem, 100%) + 1rem); }
#timeline .date { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 6.4rem; }
#timeline .phase { font-size: 0.8214rem; color: var(--muted); grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tl { width: 100%; accent-color: var(--accent); }
#tlTrack { grid-column: 3; height: 0.9rem; position: relative; margin-top: -0.2rem; }
#tlTrack i { position: absolute; top: 0; height: 100%; border-left: 0.07143rem solid var(--muted); font-size: 0.6429rem; color: var(--muted); padding-left: 0.15rem; font-style: normal; }
#tlTrack i.c { border-color: var(--crit); color: var(--crit); }
#tlTrack i.f { border-color: var(--ok); color: var(--ok); }
#feed { bottom: 7.2rem; max-height: 30%; width: min(25rem, calc(100% - 2rem - var(--sl))); }
#legend { bottom: auto; top: 4.3rem; flex-wrap: wrap; max-width: calc(100% - 2rem - var(--sl)); }
.lbl.act { border-color: #ff9a3c; font-size: 0.7857rem; }
.lbl.sensor { font-size: 0.7143rem; padding: 0.05rem 0.35rem; }
.lbl.sensor.warn { border-color: var(--warn); } .lbl.sensor.crit { border-color: var(--crit); box-shadow: 0 0 0 0.07rem var(--crit); }
.lbl.bldg { font-size: 0.7857rem; opacity: .9; }
.lbl.w2 { border-color: #a371f7; font-weight: 600; }
.chkRow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.6rem; }
#side label.chk { margin-top: 0.4rem; font-size: 0.8571rem; }
.tag { display: inline-block; font-size: 0.7143rem; padding: 0 0.35rem; border-radius: 0.5rem; border: 0.07143rem solid var(--line); color: var(--muted); margin-left: 0.2rem; }
.tag.crit { border-color: var(--crit); color: var(--crit); }
.los { display: inline-block; min-width: 1.4rem; text-align: center; border-radius: 0.3rem; font-weight: 700; font-size: 0.7857rem; color: #111; }
.los.A { background: #3fb950; } .los.B { background: #7ee787; } .los.C { background: #d29922; } .los.D { background: #f0883e; } .los.E { background: #f85149; color: #fff; } .los.F { background: #a40e26; color: #fff; }
svg.gantt { width: 100%; height: auto; display: block; font-size: 0.6429rem; }
svg.gantt text { fill: var(--fg); } svg.gantt .ax { fill: var(--muted); } svg.gantt .grid { stroke: var(--line); stroke-width: 0.5; }
svg.gantt .bar { rx: 1.5; } svg.gantt .crit { stroke: var(--crit); stroke-width: 1.2; }
svg.gantt .base { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; }
svg.gantt .now { stroke: var(--accent); stroke-width: 1.2; } svg.gantt .contract { stroke: var(--crit); stroke-dasharray: 4 3; }
svg.gantt .zone { fill: var(--muted); font-weight: 700; }
.heat td { text-align: center !important; font-size: 0.7143rem; padding: 0.15rem 0.1rem !important; min-width: 1.4rem; }
.heat th { font-size: 0.7143rem; }
.legendRow { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.8214rem; color: var(--muted); margin: 0.4rem 0; }
.legendRow i { display: inline-block; width: 0.9rem; height: 0.55rem; border-radius: 0.15rem; vertical-align: middle; margin-right: 0.25rem; }
.sens { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.sens .card { margin: 0; cursor: pointer; } .sens .card:hover { border-color: var(--accent); }
.sens .card.warn { border-color: var(--warn); } .sens .card.crit { border-color: var(--crit); }
.sens .v { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.scnBtns { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.5rem; } .scnBtns button { font-size: 0.8214rem; padding: 0.2rem 0.5rem; }
@media (max-width: 760px) { #timeline { grid-template-columns: auto 1fr; } #timeline .date { grid-column: 1 / -1; } #tlTrack { display: none; } #kpi { display: none; } }

/* ===== dev-2: 겹침·760 px·테마 (D-03·06·07·08·09·15·19) ===== */
/* 오른쪽 패널 폭: KPI·범례·피드·힌트·타임라인이 그만큼 비켜남 (#panel은 #stage 뒤라 형제 선택자로는 못 잡음 → main.panelOpen) */
main { --pr: 0rem; }
main.panelOpen { --pr: min(30rem, 100%); }
#nav { display: contents; }
#navBtn { display: none; }
#kpi { max-width: calc(100% - 2rem - var(--sl) - var(--pr)); }
#legend { max-width: calc(100% - 2rem - var(--sl) - var(--pr)); }
#feed { width: min(25rem, calc(100% - 2rem - var(--sl) - var(--pr))); }
#timeline, main.panelOpen #timeline { right: calc(var(--pr) + 1rem); }
#hint { left: auto; right: calc(var(--pr) + 1rem); bottom: 6.9rem; top: auto; text-align: right; max-width: calc(100% - 29rem - var(--sl) - var(--pr)); font-size: 0.8214rem;
  background: color-mix(in srgb, var(--bg2) 70%, transparent); padding: 0.15rem 0.5rem; border-radius: 0.4rem; }
/* 타임라인 눈금: 윗줄 = 날짜·계약 준공, 아랫줄 = 예상 준공 */
#tlTrack { height: 1.7rem; }
#tlTrack i { height: 50%; line-height: 0.85rem; white-space: nowrap; }
#tlTrack i.r { border-left: 0; border-right: 0.07143rem solid; padding: 0 0.15rem 0 0; transform: translateX(-100%); }
#tlTrack i.f { top: 50%; }
#tlTrack i.dl { top: 50%; border-right-width: 0.14rem; }
#tlTrack i.dl.ok { color: var(--ok); border-color: var(--ok); } #tlTrack i.dl.warn { color: var(--warn); border-color: var(--warn); } #tlTrack i.dl.crit { color: var(--crit); border-color: var(--crit); }
#tlTrack i.dl.bare { color: transparent; }
#timeline .phase small { color: var(--muted); font-size: 0.75rem; }
svg.gantt .deadline { stroke: var(--warn); stroke-width: 1.4; stroke-dasharray: 1 2; }
/* 3D 라벨 */
.lbl.under { border-color: #6aa3ff; font-size: 0.7857rem; color: var(--fg); }
/* 재실 히트맵: 구간당 한 줄, 좁은 고정 칸 + 표 안 가로 스크롤 */
table.spec.heat { width: max-content; }
.heat td.los { display: table-cell; border-radius: 0; }
.heat th, .heat td { white-space: nowrap; }
.heat td { width: 1.7rem; min-width: 1.7rem; max-width: 1.7rem; overflow: hidden; }
.heat tr:first-child th:not(:first-child) { width: 1.7rem; min-width: 1.7rem; font-weight: 400; color: var(--muted); text-align: left !important; overflow: visible; }
/* 라이트 테마: 무대 위 오버레이도 토큰 색 (불투명도 높여 밝은 3D 위 가독성) */
:root[data-theme="light"] #kpi .k, :root[data-theme="light"] #legend, :root[data-theme="light"] #feed, :root[data-theme="light"] #timeline, :root[data-theme="light"] .lbl, :root[data-theme="light"] #hint {
  background: color-mix(in srgb, var(--bg2) 94%, transparent); color: var(--fg); border-color: var(--line); box-shadow: 0 0.07rem 0.3rem rgb(0 0 0 / .12); }
:root[data-theme="light"] #legend, :root[data-theme="light"] #hint { color: var(--muted); }
@media (max-width: 760px) {
  #navBtn { display: inline-block; padding: 0.2857rem 0.6rem; }
  #nav { display: none; position: absolute; top: 100%; left: 0.5rem; z-index: 30; flex-direction: column; background: var(--bg2); border: 0.07143rem solid var(--line); border-radius: 0.5714rem; padding: 0.35rem; box-shadow: 0 0.3rem 1rem rgb(0 0 0 / .3); }
  #nav.open { display: flex; }
  #nav .navlink { padding: 0.45rem 0.8rem; }
  #optBadge, #userName, #hint { display: none; }
  .brand { overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 0.9286rem; }
  main.panelOpen { --pr: 0rem; }
  #side { z-index: 6; }
  #side .sideBody { box-shadow: 0.3rem 0 1rem rgb(0 0 0 / .35); }
  #kpi { display: flex; top: 0.5rem; left: 3rem; right: 0.5rem; max-width: none; flex-wrap: nowrap; overflow-x: auto; gap: 0.3rem; pointer-events: auto; scrollbar-width: none; }
  #kpi .k { min-width: 0; flex: 0 0 auto; padding: 0.15rem 0.45rem; font-size: 0.7rem; }
  #kpi .k b { font-size: 0.9rem; } #kpi .k small { display: none; }
  #legend { display: none; }
  #feed { left: 0.5rem; bottom: 6.6rem; width: calc(100% - 1rem); max-height: 22%; }
  #timeline { left: 0.5rem; right: 0.5rem; padding: 0.35rem 0.5rem; }
  #timeline .phase { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  main.panelOpen #feed { display: none; }
  #panel { top: 28%; bottom: var(--tlh, 7rem); height: auto; border-bottom: 0.07143rem solid var(--line); border-radius: 0 0 0.6rem 0.6rem; }
  #timeline { grid-template-columns: auto 1fr auto; gap: 0.25rem 0.5rem; }
  #tlPlay { grid-row: 1; grid-column: 1; } #timeline .date { grid-row: 1; grid-column: 2; } #tlSpeed { grid-row: 1; grid-column: 3; }
  #tl { grid-row: 2; grid-column: 1 / -1; } #timeline > span:empty { display: none; }
  #tlTrack { display: block; grid-row: 3; grid-column: 1 / -1; margin-top: 0; } #timeline .phase { grid-row: 4; }
  #timeline .date { display: block; min-width: 0; }
  #top { z-index: 10; }
}
#side.collapsed { bottom: auto; }

/* 옵션 묶음 태그 (dev-3) */
.grpTag { font-size: 0.6429rem; padding: 0 0.35rem; border-radius: 0.5rem; border: 0.07143rem solid var(--line); color: var(--muted); margin-left: auto; margin-right: 0.3rem; white-space: nowrap; }
#side label.chk .grpTag { margin-left: auto; }
.grpTag.g0 { border-color: var(--ok); color: var(--ok); } .grpTag.g1 { border-color: var(--info); color: var(--info); } .grpTag.g2 { border-color: var(--warn); color: var(--warn); }
#side label .lt { display: flex; flex-direction: column; gap: 0.1rem; white-space: nowrap; }
#side label .lt .grpTag { margin: 0; align-self: flex-start; }
.kpiT .warnT { color: var(--warn); }
.lbl.rcpt { border-color: #6aa3ff; font-size: 0.7857rem; }