/* DCP — ls(AI DC 캠퍼스 트윈) 톤을 그대로 쓰는 기본 스타일 */
:root {
  --bg: #0e1319; --bg2: #151c24; --bg3: #1d2630; --line: #2a3542; --fg: #e3e9ef; --muted: #8a97a6;
  --accent: #39b8e6; --ok: #3fb950; --warn: #e3a32b; --crit: #ef5350; --info: #6aa3ff;
  --gpu: #b6a8ff; --power: #ffb347; --cool: #4fc3f7; --hvac: #3fae7a; --energy: #e3a32b; --area: #a0aec0;
  --chatW: 26rem;
  --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;
}
* { 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, textarea { font: inherit; color: inherit; }
button, select { white-space: nowrap; 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; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.danger:hover:not(:disabled) { border-color: var(--crit); color: var(--crit); }
input, textarea { background: var(--bg); border: 0.07143rem solid var(--line); border-radius: 0.4286rem; padding: 0.2857rem 0.5rem; }
textarea { width: 100%; resize: vertical; }
a { color: var(--accent); }
.muted { color: var(--muted); } .small { font-size: 0.8571rem; }
[hidden] { display: none !important; }

/* 상단 바 */
#top { height: 3.429rem; display: flex; align-items: center; gap: 0.5714rem; padding: 0 1rem; background: var(--bg2); border-bottom: 0.07143rem solid var(--line); position: relative; z-index: 5; }
.brand { font-weight: 800; color: var(--fg); text-decoration: none; white-space: nowrap; letter-spacing: .04em; margin-right: 0.3rem; }
#nav { display: flex; gap: 0.1429rem; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; }
.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); }
.projName { color: var(--muted); font-size: 0.8571rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.projName b { color: var(--fg); font-weight: 600; }
.spacer { flex: 1; }
.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); }
.srcTag.down { border-style: solid; border-color: var(--crit); color: var(--crit); }
#userBox { display: flex; align-items: center; gap: 0.4286rem; font-size: 0.9286rem; color: var(--muted); white-space: nowrap; }
#chatBtn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* 본문 + 오른쪽 채팅 패널 */
main { position: absolute; inset: 3.429rem 0 0 0; display: flex; }
.page { flex: 1; min-width: 0; overflow: auto; padding: 1.429rem clamp(1rem, 3vw, 2.4rem) 2.857rem; }
.page h1 { font-size: 1.429rem; margin: 0 0 0.2857rem; }
.lead { color: var(--muted); margin: 0 0 1rem; max-width: 70rem; }
.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; }

.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; }
.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; display: flex; flex-direction: column; gap: 0.4rem; }
.rcard h3 { margin: 0; font-size: 1.071rem; cursor: pointer; } .rcard h3:hover { color: var(--accent); }
.rcard .meta { font-size: 0.8571rem; color: var(--muted); }
.rcard .act { display: flex; gap: 0.4286rem; flex-wrap: wrap; margin-top: auto; }
.empty { color: var(--muted); padding: 2rem 0; text-align: center; }

.kpiRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 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); }

.tabs { display: flex; gap: 0.2857rem; border-bottom: 0.07143rem solid var(--line); margin: 0.5rem 0 1rem; overflow-x: auto; }
.tabs button { border: 0; border-bottom: 0.1429rem solid transparent; border-radius: 0; background: none; padding: 0.5rem 0.7857rem; color: var(--muted); white-space: nowrap; }
.tabs button.on { color: var(--fg); border-bottom-color: var(--accent); }
.tabs button i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.3571rem; vertical-align: middle; }

.pending { border: 0.07143rem dashed var(--line); border-radius: 0.7143rem; padding: 1.4rem 1rem; color: var(--muted); text-align: center; background: color-mix(in srgb, var(--bg2) 60%, transparent); }
.pending b { color: var(--warn); display: block; margin-bottom: 0.3rem; }
.note { font-size: 0.8571rem; color: var(--muted); background: var(--bg3); border-radius: 0.5714rem; padding: 0.5rem 0.6429rem; margin: 0.5714rem 0; }
.err { color: var(--crit); font-size: 0.9286rem; min-height: 1em; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 0.9286rem; }
table.tbl th, table.tbl td { border-bottom: 0.07143rem solid var(--line); padding: 0.3571rem 0.4286rem; text-align: right; vertical-align: top; }
table.tbl th:first-child, table.tbl td:first-child, table.tbl td.l, table.tbl th.l { text-align: left; }
table.tbl th { color: var(--muted); font-weight: 600; font-size: 0.8571rem; }
table.tbl td { font-variant-numeric: tabular-nums; }
.tblWrap { overflow-x: auto; border: 0.07143rem solid var(--line); border-radius: 0.6rem; background: var(--bg2); }
[data-key][title] { text-decoration: underline dotted var(--muted); text-underline-offset: 0.2em; cursor: help; }

/* 위저드: 대안 탭 */
.scen { display: flex; gap: 0.4286rem; flex-wrap: wrap; align-items: center; margin: 0.6rem 0; }
.scen button.on { border-color: var(--accent); color: var(--accent); }
.field { display: grid; gap: 0.2857rem; font-size: 0.9286rem; color: var(--muted); margin: 0.5rem 0; }
.field input { width: 100%; max-width: 24rem; color: var(--fg); }

svg.diagram { width: 100%; height: auto; display: block; background: var(--bg); border: 0.07143rem solid var(--line); border-radius: 0.5714rem; }
svg.diagram text { fill: var(--muted); font-size: 14px; font-family: var(--font); }
svg.diagram .frame { fill: none; stroke: var(--line); stroke-dasharray: 6 6; }

/* 오른쪽 LLM 채팅 패널 */
#chat { width: var(--chatW); max-width: 100%; flex: none; background: var(--bg2); border-left: 0.07143rem solid var(--line); display: flex; flex-direction: column; min-height: 0; }
#chat > header { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 0.07143rem solid var(--line); }
#chat > header h2 { font-size: 1rem; margin: 0; flex: 1; }
.chatModes { display: flex; gap: 0.2857rem; padding: 0.5rem 0.9rem 0; }
.chatModes button.on { border-color: var(--accent); color: var(--accent); }
.chatLog { flex: 1; overflow: auto; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.5714rem; }
.msg { padding: 0.5rem 0.7rem; border-radius: 0.5714rem; font-size: 0.9286rem; line-height: 1.55; white-space: pre-wrap; max-width: 92%; }
.msg.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, var(--bg3)); }
.msg.bot { align-self: flex-start; background: var(--bg3); }
.msg.sys { align-self: center; color: var(--muted); font-size: 0.8214rem; background: none; text-align: center; }
.msg .src { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted); }
.msg details { margin-top: 0.3rem; font-size: 0.8214rem; color: var(--muted); }
table.diff { border-collapse: collapse; width: 100%; font-size: 0.8571rem; margin: 0.3rem 0; white-space: normal; }
table.diff td { border-bottom: 0.07143rem solid var(--line); padding: 0.2rem 0.3rem; }
table.diff .old { color: var(--muted); text-decoration: line-through; } table.diff .new { color: var(--ok); font-weight: 600; }
.chatForm { display: flex; gap: 0.4286rem; padding: 0.7rem 0.9rem; border-top: 0.07143rem solid var(--line); }
.chatForm textarea { min-height: 2.6rem; max-height: 8rem; }

#toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 30; background: var(--bg3); border: 0.07143rem solid var(--line); border-radius: 0.5714rem; padding: 0.5rem 1rem; font-size: 0.9286rem; box-shadow: 0 0.3rem 1rem rgb(0 0 0 / .3); }
#toast.bad { border-color: var(--crit); }

/* 보고서 문서 */
.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 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; }

/* 로그인 */
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.286rem; } .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); }

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  #llmTag, #engineTag, .projName, #userName { display: none; }
  #chat { position: absolute; inset: 0 0 0 auto; width: min(var(--chatW), 100%); z-index: 6; }
}
@media (max-width: 640px) { #top { gap: 0.3rem; padding: 0 0.5rem; } .brand { display: none; } #chatBtn { font-size: 0; } #chatBtn::after { content: 'AI'; font-size: 1rem; } }
@media print {
  #top, #chat, .pageBtns, #toast, .noprint { display: none !important; }
  main { position: static; display: block; } .page { overflow: visible; padding: 0; }
  :root { --bg: #fff; --bg2: #fff; --bg3: #f3f3f3; --fg: #000; --muted: #444; --line: #bbb; }
  body { background: #fff; color: #000; } .card, .kpiT { break-inside: avoid; border-color: #bbb; background: #fff; }
  .doc h2 { break-after: avoid; }
  @page { size: A4; margin: 14mm 12mm; }
}

/* ---- phase B: 결과 화면 ---- */
:root { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --ink2: #c3cbd5; }
:root[data-theme="light"] { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --ink2: #4a5563; }
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; }
a.btn:hover { border-color: var(--accent); }
.v.tr { text-decoration: underline dotted var(--muted); text-underline-offset: 0.2em; cursor: help; }
.v.tr:focus-visible { outline: 0.1429rem solid var(--accent); outline-offset: 0.1rem; border-radius: 0.2rem; }
table.kv td:last-child { text-align: right; white-space: nowrap; }
table.tbl tr.sec th { text-align: left; color: var(--accent); background: var(--bg3); font-size: 0.8571rem; padding-top: 0.4rem; }
table.tbl tr.sum td { font-weight: 700; border-top: 0.1rem solid var(--line); }
table.tbl tfoot td { font-weight: 600; }
.card h3 { font-size: 0.9286rem; margin: 0.8571rem 0 0.2857rem; color: var(--accent); }
.kpiT b { overflow-wrap: anywhere; }
.warns { display: grid; gap: 0.3rem; margin: 0 0 0.8rem; }
.warn { font-size: 0.8929rem; border-left: 0.2143rem solid var(--warn); background: var(--bg2); padding: 0.35rem 0.6rem; border-radius: 0.3rem; }
.warn b { color: var(--warn); margin-right: 0.3rem; font-size: 0.7857rem; }
.good { color: var(--ok); } .bad { color: var(--crit); }
td.good small, td.bad small { color: inherit; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 0.8214rem; }
.warnMark { color: var(--warn); cursor: help; }
.badge5 { display: inline-block; font-size: 0.7857rem; border: 0.07143rem solid var(--line); border-radius: 0.8rem; padding: 0 0.5rem; margin-left: 0.3rem; color: var(--fg); }
.tog { display: inline-flex; gap: 0.35rem; align-items: center; font-size: 0.9286rem; color: var(--muted); }
.tog input { width: auto; }
details summary { cursor: pointer; color: var(--muted); margin: 0.4rem 0; }

/* 위저드 */
.scenRow { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: flex-end; }
.field.inline { margin: 0; } .field.inline input { width: 16rem; }
.wizGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.8571rem; }
.wizGrid fieldset { margin: 0; min-width: 0; }
.wizGrid legend { font-weight: 700; padding: 0 0.3rem; color: var(--accent); }
.field select, .field input { width: 100%; max-width: 24rem; color: var(--fg); background: var(--bg); padding: 0.3571rem 0.5rem; }
.field > span { color: var(--fg); }
.numIn { display: flex; gap: 0.4rem; align-items: center; } .numIn input { max-width: 12rem; }
.field.chg { border-left: 0.2143rem solid var(--warn); padding-left: 0.5rem; }
.chgMark { border-left: 0.2143rem solid var(--warn); padding-left: 0.3rem; }

/* 차트 (단일 계열 · 한 색) */
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .bar { fill: var(--s1); }
svg.chart .mk:hover .bar, svg.chart .mk:focus .bar { fill: var(--accent); }
svg.chart .hit { fill: transparent; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .base { stroke: var(--muted); stroke-width: 1; }
svg.chart .ax, svg.chart .lab { font-size: 12px; fill: var(--muted); font-family: var(--font); }
svg.chart .val { font-size: 12px; fill: var(--fg); font-family: var(--font); }
svg.chart .hc { fill: var(--s1); }
svg.chart .mk { outline: none; }
.ramp { display: inline-block; width: 6rem; height: 0.55rem; border-radius: 0.2rem; vertical-align: middle; background: linear-gradient(90deg, color-mix(in srgb, var(--s1) 12%, transparent), var(--s1)); }
.tip { position: fixed; z-index: 40; pointer-events: none; background: var(--bg3); color: var(--fg); border: 0.07143rem solid var(--line); border-radius: 0.4286rem;
  padding: 0.3rem 0.55rem; font-size: 0.8214rem; white-space: pre-line; max-width: 28rem; box-shadow: 0 0.2rem 0.8rem rgb(0 0 0 / .3); }

/* 단선도 · 냉각 계통도 */
.svgWrap { overflow-x: auto; }
svg.diagram { width: 100%; height: auto; display: block; margin: 0 auto; min-width: 34rem; background: var(--bg); }
svg.diagram .node rect { fill: var(--bg2); stroke: var(--muted); stroke-width: 1.2; }
svg.diagram .node.hall rect, svg.diagram .node.rack rect { fill: var(--bg3); }
svg.diagram .node:hover rect, svg.diagram .node:focus rect { stroke: var(--accent); stroke-width: 2; }
svg.diagram .node { outline: none; }
svg.diagram .nl { fill: var(--fg); font-size: 13px; font-weight: 600; font-family: var(--font); }
svg.diagram .ns { fill: var(--muted); font-size: 11px; font-family: var(--font); }
svg.diagram .edge { fill: none; stroke: var(--ink2); stroke-width: 2; }
svg.diagram .hitline { fill: none; stroke: transparent; stroke-width: 12; }
svg.diagram .mk:hover .edge { stroke-width: 3.5; }
/* 색 3개(검증: s1 파랑·s2 주황·s3 청록) + 무채색 질감 — 같은 그림에 4색 이상 쓰지 않음 */
svg.diagram .edge.hv154 { stroke: var(--s1); stroke-width: 3; } svg.diagram .edge.hts23 { stroke: var(--s3); stroke-width: 3; }
svg.diagram .edge.mv { stroke: var(--s2); stroke-width: 2.5; } svg.diagram .edge.lv_ac { stroke: var(--ink2); }
svg.diagram .edge.dc800 { stroke: var(--ink2); stroke-dasharray: 7 4; } svg.diagram .edge.lv_hts { stroke: var(--s3); stroke-dasharray: 2 3; stroke-width: 2.5; }
svg.diagram .edge.chw { stroke: var(--s1); } svg.diagram .edge.fws { stroke: var(--s2); } svg.diagram .edge.cw { stroke: var(--s3); }
svg.diagram .edge.tcs { stroke: var(--ink2); stroke-dasharray: 7 4; } svg.diagram .edge.air { stroke: var(--ink2); stroke-dasharray: 2 3; }
svg.diagram .edge.trim { stroke-dasharray: 4 4; opacity: .8; }
.dlegend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8214rem; color: var(--fg); margin: 0.3rem 0 0.5rem; }
.dlegend .sw { display: inline-block; width: 1.8rem; height: 0; border-top: 0.2rem solid var(--ink2); vertical-align: middle; margin-right: 0.35rem; }
.dlegend .sw.hv154, .dlegend .sw.chw { border-color: var(--s1); } .dlegend .sw.mv, .dlegend .sw.fws { border-color: var(--s2); }
.dlegend .sw.hts23, .dlegend .sw.cw { border-color: var(--s3); } .dlegend .sw.lv_hts { border-color: var(--s3); border-top-style: dotted; }
.dlegend .sw.dc800, .dlegend .sw.tcs { border-top-style: dashed; } .dlegend .sw.air { border-top-style: dotted; } .dlegend .sw.trim { border-top-style: dashed; border-color: var(--s2); }

/* 채팅 추가 */
pre.trace { white-space: pre-wrap; font-size: 0.75rem; background: var(--bg); padding: 0.4rem; border-radius: 0.3rem; margin: 0.3rem 0; }
.msg p { margin: 0 0 0.35rem; } .msg .small { margin-bottom: 0.3rem; }
table.diff th { text-align: left; color: var(--muted); font-weight: 500; font-size: 0.75rem; }

/* 보고서 */
table.rep { margin: 0.4rem 0 0.8rem; }
.doc .cover .small { margin-top: 0.4rem; }
body.pdf { height: auto; } body.pdf main { position: static; display: block; } body.pdf .page { overflow: visible; padding: 0; }
body.pdf svg.diagram { min-width: 0; }
@media print {
  .warns, .tabs, .scen { break-inside: avoid; }
  svg.diagram { min-width: 0; } .svgWrap { overflow: visible; }
  table.rep { break-inside: auto; } table.rep tr { break-inside: avoid; }
  :root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --ink2: #4a5563; }
}

.kpiT b .v { font-size: inherit; color: inherit; }
svg.chart .ax, svg.chart .lab { font-size: 14px; } svg.chart .val { font-size: 14px; }
svg.chart .line { fill: none; stroke: var(--s1); stroke-width: 2; }
svg.chart .dot { fill: var(--s1); stroke: var(--bg2); stroke-width: 2; }
svg.chart .mk:hover .dot { fill: var(--accent); }

/* 3D 매싱 */
.m3Wrap { position: relative; height: calc(100vh - 14rem); min-height: 26rem; border: 0.07143rem solid var(--line); border-radius: 0.7143rem; overflow: hidden; background: var(--bg); }
#m3c { width: 100%; height: 100%; display: block; touch-action: none; }
.m3Load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.m3Panel { position: absolute; top: 0.7rem; right: 0.7rem; width: min(22rem, calc(100% - 1.4rem)); max-height: calc(100% - 1.4rem); overflow: auto;
  background: color-mix(in srgb, var(--bg2) 94%, transparent); border: 0.07143rem solid var(--line); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.m3Panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.m3Legend { position: absolute; left: 0.7rem; bottom: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; max-width: calc(100% - 1.4rem); font-size: 0.7857rem;
  background: color-mix(in srgb, var(--bg2) 88%, transparent); padding: 0.3rem 0.6rem; border-radius: 0.4rem; }
.m3Legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 0.15rem; margin-right: 0.25rem; vertical-align: middle; }
@media (max-width: 640px) { .m3Wrap { height: 60vh; } }

.warnText { color: var(--warn); font-size: 0.8214rem; }