: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; }
.navlink { 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; }
}

/* 에즈웰플러스 빌딩·MDC 추가 */
:root { --ground: #3a4446; }
table.bom td { vertical-align: top; } table.bom td.r, table.cmp td.r { text-align: right; white-space: nowrap; } td.tw { color: var(--ok); }
.small { font-size: 0.8214rem; } .ok { color: var(--ok); }
.card.rec { border-color: var(--ok); }
.wrow { display: grid; grid-template-columns: 1fr 8rem 2.5rem; gap: 0.5rem; align-items: center; font-size: 0.9286rem; padding: 0.3rem 0; }
.wrow input[type="range"] { width: 100%; }
input.sc { width: 3.2rem; padding: 0.15rem 0.3rem; }
table.cmp tr.on td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.state { font-size: 0.8571rem; border: 0.07143rem solid var(--line); border-radius: 0.7143rem; padding: 0.1429rem 0.5714rem; color: var(--muted); vertical-align: middle; }
.state.ok { border-color: var(--ok); color: var(--ok); } .state.hold { border-color: var(--warn); color: var(--warn); }
#sideOpt label.chk { justify-content: flex-start; gap: 0.4rem; } .chk input { width: auto; }
.typeChips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.4rem 0; } .typeChips button { font-size: 0.7857rem; padding: 0.1rem 0.5rem; border-radius: 1rem; } .typeChips button.on { border-color: var(--accent); color: var(--accent); }
.lbl.floor { font-size: 0.75rem; opacity: .8; } .lbl.cctv { border-color: #e3a32b; } .lbl.light { border-color: #ffd479; } .lbl.ahu, .lbl.odu { border-color: #59b4ff; } .lbl.racklbl { font-weight: 600; } .lbl.ng { border-color: var(--crit); }
#snap { width: 100%; border-radius: 0.5rem; border: 0.07143rem solid var(--line); margin: 0.4rem 0; }
#integList { font-size: 0.8571rem; } #integList div { display: flex; justify-content: space-between; padding: 0.15rem 0; }
.floorBar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; margin-top: 0.4rem; } .floorBar button { font-size: 0.8rem; padding: 0.25rem 0; } .floorBar button.on { border-color: var(--accent); color: var(--accent); }