/* 연료전지 폐열 ORC 시각화 — EMS 다크 톤. 모든 규칙은 .orc-viz 아래로 한정 (EMS 기존 CSS와 충돌 방지) */
.orc-viz {
  --bg: #000;
  --card-bd: #27272b;
  --tx: #fff;
  --tx2: #ddd;
  --tx3: #999;
  --tx4: #6b6b73;
  --accent: #3617ce;
  --accent-tx: #8f7bff;
  --hot: #ff5722;      /* 중온수 공급 */
  --hot-r: #ffc145;    /* 중온수 환수 */
  --cool: #4dabf7;     /* 냉각수 공급 */
  --cool-r: #20c997;   /* 냉각수 환수 */
  --elec: #3d7bff;     /* 전력 (냉각수 하늘색 #4dabf7 보다 진한 전기 파랑) */
  --vap: #e64980;      /* 고압 증기 */
  --vap-lp: #fcc2d7;   /* 저압 증기 */
  --liq: #5c7cfa;      /* 액체 냉매 */
  --run: #2fbf71;
  --start: #4dabf7;
  --stopping: #f59f00;
  --stop: #6b6b73;
  --fault: #ff4d4f;
  --warn: #ffa94d;

  font-family: "segoe ui", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Microsoft NeoGothic", sans-serif;
  color: var(--tx);
  background: var(--bg);
  padding: 20px 24px 28px;
  min-width: 1100px;
  box-sizing: border-box;
}
.orc-viz *, .orc-viz *::before, .orc-viz *::after { box-sizing: border-box; }

/* ---------- 카드 (EMS 위젯과 동일) ---------- */
.orc-viz .card {
  background: linear-gradient(225deg, #1c1c1f 10%, rgba(28, 28, 31, 0.6) 85%);
  border: 1px solid var(--card-bd);
  border-radius: 12px;
}

/* ---------- 상단 헤더 ---------- */
.orc-viz .page-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.orc-viz .page-head h1 { font-size: 20px; font-weight: 700; margin: 0; color: var(--tx); }
.orc-viz .page-head .sub { font-size: 13px; color: var(--tx3); }
.orc-viz .page-head .spacer { flex: 1; }
.orc-viz .recv { font-size: 13px; color: var(--tx3); display: flex; align-items: center; gap: 6px; }
.orc-viz .recv .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--run); animation: orc-blink 2s ease-in-out infinite; }
.orc-viz .back-link {
  color: var(--tx2); text-decoration: none; font-size: 13px; font-weight: 600;
  border: 1px solid #555; border-radius: 20px; padding: 6px 14px;
}
.orc-viz .back-link:hover { border-color: var(--accent-tx); color: #fff; }

/* 시연 시나리오 전환 (EMS 반영 시 제거) */
.orc-viz .demo-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx3); }
.orc-viz .demo-bar .tag { border: 1px dashed #555; border-radius: 6px; padding: 2px 6px; margin-right: 2px; }
.orc-viz .pill-btn {
  background: transparent; color: var(--tx2); border: 1px solid #555; border-radius: 20px;
  padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.orc-viz .pill-btn:hover { border-color: #888; color: #fff; }
.orc-viz .pill-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- KPI ---------- */
.orc-viz .kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.orc-viz .kpi { padding: 14px 16px 12px; position: relative; cursor: default; }
.orc-viz .kpi .k-title { font-size: 13px; font-weight: 600; color: var(--tx2); display: flex; align-items: center; gap: 6px; }
.orc-viz .kpi .k-val { margin-top: 8px; font-size: 28px; font-weight: 700; color: var(--tx); letter-spacing: -0.5px; }
.orc-viz .kpi .k-val small { font-size: 14px; font-weight: 600; color: var(--tx3); margin-left: 3px; }
.orc-viz .kpi .k-sub { margin-top: 4px; font-size: 12px; color: var(--tx3); }
.orc-viz .kpi .k-sub b { color: var(--tx2); font-weight: 600; }
.orc-viz .kpi.is-nodata .k-val { color: var(--tx4); }

/* 효율 막대 + 목표 기준선 */
.orc-viz .effbar { position: relative; height: 8px; border-radius: 4px; background: #2a2a2f; margin-top: 10px; }
.orc-viz .effbar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #3617ce, #8f7bff); transition: width .6s ease; }
.orc-viz .effbar .target { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--warn); }
.orc-viz .effbar .target::after {
  content: attr(data-label); position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--warn); white-space: nowrap;
}

/* ---------- 다이어그램 ---------- */
.orc-viz .diagram { padding: 10px 12px 6px; }
.orc-viz .diagram svg { display: block; width: 100%; height: auto; user-select: none; }
.orc-viz svg text { font-family: inherit; }

.orc-viz .t-title { fill: var(--tx); font-size: 15px; font-weight: 700; }
.orc-viz .t-label { fill: var(--tx2); font-size: 13px; font-weight: 600; }
.orc-viz .t-small { fill: var(--tx3); font-size: 11.5px; }
.orc-viz .t-val { fill: var(--tx); font-size: 13px; font-weight: 700; }
.orc-viz .t-big { fill: var(--tx); font-size: 24px; font-weight: 700; }
.orc-viz .t-unit { fill: var(--tx3); font-size: 12px; font-weight: 600; }
.orc-viz .t-hot { fill: var(--hot); }
.orc-viz .t-cool { fill: var(--cool); }
.orc-viz .t-elec { fill: var(--elec); }
.orc-viz .t-warn { fill: var(--warn); }

.orc-viz .box { fill: #141417; stroke: #3a3a40; stroke-width: 1.2; }
.orc-viz .zone { fill: none; stroke: #4a4a52; stroke-width: 1.2; stroke-dasharray: 6 5; }

/* 배관: 바탕선 + 흐름선 */
.orc-viz .pipe { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; transition: opacity .4s; }
.orc-viz .pipe.hot { stroke: var(--hot); stroke-width: 8; }
.orc-viz .pipe.hot-r { stroke: var(--hot-r); stroke-width: 6; }
.orc-viz .pipe.cool { stroke: var(--cool); }
.orc-viz .pipe.cool-r { stroke: var(--cool-r); }
.orc-viz .pipe.vap { stroke: var(--vap); stroke-width: 9; }
.orc-viz .pipe.vap-lp { stroke: var(--vap-lp); stroke-width: 6; }
.orc-viz .pipe.liq { stroke: var(--liq); }
.orc-viz .pipe { opacity: .95; }
.orc-viz .pipe.off { opacity: .2; }

.orc-viz .flow {
  fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 5 13; animation: orc-flow 1.2s linear infinite;
}
.orc-viz .flow.hot-r { stroke: rgba(80, 40, 0, .75); }           /* 밝은 환수 배관 위는 어두운 점선 */
.orc-viz .flow.vap { stroke-dasharray: 14 8; stroke-width: 3; }    /* 고압: 촘촘·굵게 */
.orc-viz .flow.vap-lp { stroke: rgba(120, 20, 60, .7); stroke-dasharray: 3 15; } /* 저압: 성기게 */
.orc-viz .flow.off { opacity: 0; animation-play-state: paused; }
@keyframes orc-flow { to { stroke-dashoffset: -36; } }

/* 전력: 얇은 바탕선 위로 빛 펄스(밝은 머리 + 사라지는 꼬리)가 지나감 */
.orc-viz .pipe.elec { stroke: var(--elec); stroke-width: 3; opacity: .32; }
.orc-viz .pipe.elec.off { opacity: .1; }
.orc-viz .elec-core { fill: none; stroke: #b4d0ff; stroke-width: 1; opacity: .35; transition: opacity .4s; }
.orc-viz .elec-core.off { opacity: .06; }
.orc-viz .zaps { pointer-events: none; transition: opacity .6s ease; }
.orc-viz .zaps.off { opacity: 0; }
.orc-viz .zap-bloom, .orc-viz .zap-glow, .orc-viz .zap-core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.orc-viz .zap-bloom { stroke: #1f6feb; stroke-width: 8; opacity: .65; filter: blur(3px); }
.orc-viz .zap-glow { stroke: #5c9dff; stroke-width: 2.6; opacity: .95; filter: blur(.4px); }
.orc-viz .zap-core { stroke: #fff; stroke-width: 1.2; }

/* 피스톤 펌프: 운전 중 피스톤이 위아래로 누르고, 누를 때 액체가 밝아짐 */
.orc-viz .pump-piston { transform-box: view-box; }
.orc-viz .pump-fluid { opacity: .4; }
.orc-viz .eq[data-state="run"] .pump-piston { animation: orc-press .9s cubic-bezier(.45, 0, .55, 1) infinite; }
.orc-viz .eq[data-state="run"] .pump-fluid { animation: orc-pfluid .9s cubic-bezier(.45, 0, .55, 1) infinite; }
.orc-viz .eq[data-state="start"] .pump-piston, .orc-viz .eq[data-state="stopping"] .pump-piston { animation: orc-press 2s ease-in-out infinite; }
.orc-viz .eq[data-state="stop"] .pump-fluid, .orc-viz .eq[data-state="nodata"] .pump-fluid { opacity: .15; }
@keyframes orc-press { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--stroke, 6px)); } }
@keyframes orc-pfluid { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* 연료전지 (건전지 외형): 단자·좌측 띠가 상태색, 운전 중이면 빛이 본체를 가로질러 지나감 */
.orc-viz .fc-nub, .orc-viz .fc-band { fill: #4a4a52; transition: fill .3s; }
.orc-viz .eq[data-state="run"] .fc-nub, .orc-viz .eq[data-state="run"] .fc-band { fill: var(--run); }
.orc-viz .eq[data-state="fault"] .fc-nub, .orc-viz .eq[data-state="fault"] .fc-band { fill: var(--fault); }
.orc-viz .eq[data-state="nodata"] .fc-nub, .orc-viz .eq[data-state="nodata"] .fc-band { fill: #3a3a40; }
.orc-viz .fc-sweep { opacity: 0; }
.orc-viz .eq[data-state="run"] .fc-sweep { opacity: 1; animation: orc-sweep 4.2s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes orc-sweep { 0% { transform: translateX(0); } 70%, 100% { transform: translateX(var(--travel, 300px)); } }

/* 열교환기: 셸 쪽 유체(중온수·냉각수)와 코일 속 냉매가 서로 반대로 흐르며 색이 바뀜 */
.orc-viz .hx-shell { opacity: .2; transition: opacity .4s; }
.orc-viz .hx-stream { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 16; opacity: .75; animation: orc-flow 1.5s linear infinite; }
.orc-viz .hx-coil-back { fill: none; stroke-width: 4; stroke-linecap: round; opacity: .4; }
.orc-viz .hx-coil { fill: none; stroke-width: 5; stroke-linecap: round; }
.orc-viz .hx-coil-flow { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3 14; opacity: .85; animation: orc-flow 1.1s linear infinite; }
.orc-viz .eq[data-state="run"] .hx-shell { animation: orc-shell 3s ease-in-out infinite; }
.orc-viz .eq[data-state="start"] .hx-stream, .orc-viz .eq[data-state="stopping"] .hx-stream { animation-duration: 3.4s; }
.orc-viz .eq[data-state="start"] .hx-coil-flow, .orc-viz .eq[data-state="stopping"] .hx-coil-flow { animation-duration: 2.6s; }
.orc-viz .eq[data-state="stop"] .hx-stream, .orc-viz .eq[data-state="fault"] .hx-stream, .orc-viz .eq[data-state="nodata"] .hx-stream,
.orc-viz .eq[data-state="stop"] .hx-coil-flow, .orc-viz .eq[data-state="fault"] .hx-coil-flow, .orc-viz .eq[data-state="nodata"] .hx-coil-flow { animation-play-state: paused; opacity: .15; }
.orc-viz .eq[data-state="stop"] .hx-shell, .orc-viz .eq[data-state="nodata"] .hx-shell { opacity: .07; }
@keyframes orc-shell { 0%, 100% { opacity: .16; } 50% { opacity: .3; } }

/* 회전체 (팬·펌프·터빈) */
.orc-viz .spin { transform-box: fill-box; transform-origin: center; animation: orc-spin 1s linear infinite; }
@keyframes orc-spin { to { transform: rotate(360deg); } }

/* ---------- 설비 상태 (data-state) ---------- */
.orc-viz .eq .frame { fill: #141417; stroke: #3a3a40; stroke-width: 1.5; transition: stroke .3s, fill .3s; }
.orc-viz .eq { cursor: pointer; }
.orc-viz .eq:hover .frame { fill: #1d1d22; }
.orc-viz .eq .st-pill { transition: fill .3s; }
.orc-viz .eq .st-text { fill: #fff; font-size: 11px; font-weight: 700; }
.orc-viz .eq .icon-ring { fill: none; stroke-width: 2; }

.orc-viz .eq[data-state="run"] .frame { stroke: var(--run); }
.orc-viz .eq[data-state="run"] .st-pill { fill: var(--run); }
.orc-viz .eq[data-state="run"] .icon-ring { stroke: var(--run); }

.orc-viz .eq[data-state="start"] .frame { stroke: var(--start); stroke-dasharray: 8 5; animation: orc-march .8s linear infinite; }
.orc-viz .eq[data-state="start"] .st-pill { fill: #1c7ed6; }
.orc-viz .eq[data-state="start"] .icon-ring { stroke: var(--start); }
.orc-viz .eq[data-state="start"] .spin { animation-duration: 2.6s; animation-timing-function: ease-in; }

.orc-viz .eq[data-state="stopping"] .frame { stroke: var(--stopping); stroke-dasharray: 8 5; animation: orc-march 1.4s linear infinite reverse; }
.orc-viz .eq[data-state="stopping"] .st-pill { fill: #e67700; }
.orc-viz .eq[data-state="stopping"] .icon-ring { stroke: var(--stopping); }
.orc-viz .eq[data-state="stopping"] .spin { animation-duration: 3.2s; animation-timing-function: ease-out; }

.orc-viz .eq[data-state="stop"] .frame { stroke: #4a4a52; }
.orc-viz .eq[data-state="stop"] .st-pill { fill: #4a4a52; }
.orc-viz .eq[data-state="stop"] .icon-ring { stroke: #4a4a52; }
.orc-viz .eq[data-state="stop"] .spin,
.orc-viz .eq[data-state="fault"] .spin,
.orc-viz .eq[data-state="nodata"] .spin { animation-play-state: paused; }
.orc-viz .eq[data-state="stop"] .dim-off { opacity: .45; }

.orc-viz .eq[data-state="fault"] .frame { stroke: var(--fault); animation: orc-blink-stroke 1s ease-in-out infinite; }
.orc-viz .eq[data-state="fault"] .st-pill { fill: var(--fault); }
.orc-viz .eq[data-state="fault"] .icon-ring { stroke: var(--fault); }
.orc-viz .eq .alarm-ring { fill: none; stroke: var(--fault); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.orc-viz .eq[data-state="fault"] .alarm-ring { animation: orc-ring 1.4s ease-out infinite; }

.orc-viz .eq[data-state="nodata"] .frame { stroke: #555; fill: url(#orc-hatch); }
.orc-viz .eq[data-state="nodata"] .st-pill { fill: #3a3a40; }
.orc-viz .eq[data-state="nodata"] .icon-ring { stroke: #555; }

@keyframes orc-march { to { stroke-dashoffset: -26; } }
@keyframes orc-blink { 50% { opacity: .35; } }
@keyframes orc-blink-stroke { 50% { stroke-opacity: .25; } }
@keyframes orc-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

/* 숫자 바뀔 때 반짝임 */
.orc-viz .bump { animation: orc-bump .6s ease-out; }
@keyframes orc-bump { 0% { fill: #b9acff; color: #b9acff; } 100% { } }

/* ---------- 알람 바 ---------- */
.orc-viz .alarm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-top: 14px; font-size: 13px; }
.orc-viz .alarm-bar .ab-title { font-weight: 700; color: var(--tx2); margin-right: 4px; }
.orc-viz .alarm-bar .ok { color: var(--run); font-weight: 600; }
.orc-viz .alarm-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 4px 12px; font-weight: 600; font-size: 12px; border: 1px solid; }
.orc-viz .alarm-chip.fault { color: #ff8787; border-color: rgba(255, 77, 79, .55); background: rgba(255, 77, 79, .1); }
.orc-viz .alarm-chip.warn { color: #ffc078; border-color: rgba(245, 159, 0, .55); background: rgba(245, 159, 0, .1); }
.orc-viz .alarm-chip.info { color: #a5d8ff; border-color: rgba(77, 171, 247, .5); background: rgba(77, 171, 247, .1); }
.orc-viz .alarm-chip.gray { color: #bbb; border-color: #555; background: rgba(255, 255, 255, .04); }
.orc-viz .alarm-chip .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.orc-viz .alarm-chip.fault .d { animation: orc-blink 1s infinite; }

/* ---------- 범례 ---------- */
.orc-viz .legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--tx3); padding: 6px 4px 2px; }
.orc-viz .legend span { display: inline-flex; align-items: center; gap: 6px; }
.orc-viz .legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
.orc-viz .legend i.dot { width: 9px; height: 9px; border-radius: 50%; }

/* ---------- 전체 포인트 표 ---------- */
.orc-viz details.all-points { margin-top: 14px; }
.orc-viz details.all-points summary {
  cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--tx2); list-style: none;
}
.orc-viz details.all-points summary::before { content: "▸ "; color: var(--tx3); }
.orc-viz details.all-points[open] summary::before { content: "▾ "; }
.orc-viz .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.orc-viz .pt-group { border: 1px solid #2c2c31; border-radius: 10px; padding: 10px 12px; background: rgba(255, 255, 255, .015); }
.orc-viz .pt-group h4 { margin: 0 0 6px; font-size: 13px; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.orc-viz .pt-group h4 .st { font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; background: #333; color: #ddd; }
.orc-viz .pt-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; border-top: 1px dashed #26262b; }
.orc-viz .pt-row:first-of-type { border-top: 0; }
.orc-viz .pt-row .l { color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orc-viz .pt-row .l .ind { color: var(--accent-tx); font-size: 10px; border: 1px solid #4b3fb0; border-radius: 4px; padding: 0 4px; margin-right: 5px; }
.orc-viz .pt-row .v { color: var(--tx); font-weight: 600; white-space: nowrap; }
.orc-viz .pt-row .v.na { color: var(--tx4); }

/* ---------- 툴팁 ---------- */
.orc-tip {
  position: fixed; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity .12s;
  min-width: 220px; max-width: 360px; padding: 10px 12px;
  background: rgba(17, 17, 20, .97); border: 1px solid #3a3a40; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
  font-family: "segoe ui", "Malgun Gothic", "맑은 고딕", sans-serif; font-size: 12px; color: #ddd;
}
.orc-tip.show { opacity: 1; }
.orc-tip .tt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.orc-tip .tt-title { font-size: 13px; font-weight: 700; color: #fff; }
.orc-tip .tt-st { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; color: #fff; }
.orc-tip .tt-row { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.orc-tip .tt-row .l { color: #999; }
.orc-tip .tt-row .v { color: #fff; font-weight: 600; white-space: nowrap; }
.orc-tip .tt-row .v.na { color: #6b6b73; }
.orc-tip .tt-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2c2c31; color: #999; font-size: 11px; line-height: 1.5; }
.orc-tip .tt-time { margin-top: 4px; color: #6b6b73; font-size: 11px; }

/* ---------- 상세 페이지 ---------- */
.orc-viz .unit-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.orc-viz .unit-tab { display: inline-flex; align-items: center; gap: 6px; }
.orc-viz .unit-tab .d { width: 8px; height: 8px; border-radius: 50%; background: var(--stop); }
.orc-viz .unit-tab[data-state="run"] .d { background: var(--run); }
.orc-viz .unit-tab[data-state="start"] .d { background: var(--start); }
.orc-viz .unit-tab[data-state="stopping"] .d { background: var(--stopping); }
.orc-viz .unit-tab[data-state="nodata"] .d { background: #444; }
.orc-viz .cmp { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; margin-left: 4px; background: rgba(47, 191, 113, .15); color: #8ce99a; }
.orc-viz .cmp.warn { background: rgba(245, 159, 0, .15); color: #ffc078; }
.orc-viz .cmp.na { background: #2a2a2f; color: #888; }

/* ---------- 색 텍스트 · 현장/EMS 태그 ---------- */
.orc-viz .t-hot-r { fill: var(--hot-r); }
.orc-viz .t-cool-r { fill: var(--cool-r); }
.orc-viz .t-vap { fill: var(--vap); }
.orc-viz .t-ems { fill: #b9acff; }
.orc-viz .tag-site rect { fill: #3a3a40; }
.orc-viz .tag-ems rect { fill: var(--accent); }
.orc-viz .tag-site text, .orc-viz .tag-ems text { fill: #fff; font-size: 10px; font-weight: 700; }
.orc-viz .chip { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; color: #fff; vertical-align: 1px; }
.orc-viz .chip.site { background: #3a3a40; }
.orc-viz .chip.ems { background: var(--accent); }
.orc-viz .chip.calc { background: #5f3dc4; border: 1px dashed #b197fc; }

/* ---------- 페이지 이동 탭 ---------- */
.orc-viz .page-nav { display: flex; gap: 4px; border-bottom: 1px solid #27272b; margin: -4px 0 16px; }
.orc-viz .page-nav a { color: var(--tx3); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 14px; border-bottom: 2px solid transparent; }
.orc-viz .page-nav a:hover { color: #fff; }
.orc-viz .page-nav a.on { color: #fff; border-bottom-color: var(--accent-tx); }

/* ---------- 검증 페이지 ---------- */
.orc-viz .sec-title { font-size: 15px; font-weight: 700; color: var(--tx); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.orc-viz .sec-title .hint { font-size: 12px; font-weight: 400; color: var(--tx3); }
.orc-viz .explain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.orc-viz .explain .card { padding: 14px 16px; font-size: 13px; color: var(--tx2); line-height: 1.7; }
.orc-viz .explain .card h3 { margin: 0 0 6px; font-size: 14px; color: #fff; display: flex; gap: 8px; align-items: center; }
.orc-viz .explain code { background: #232329; border-radius: 4px; padding: 1px 6px; color: #e5dbff; font-size: 12px; }
.orc-viz .heat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.orc-viz .heat-card { padding: 14px 16px; }
.orc-viz .heat-card h4 { margin: 0 0 10px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }.orc-viz .hc-row { display: grid; grid-template-columns: 52px 1fr 96px; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
.orc-viz .hc-bar { height: 10px; background: #232329; border-radius: 5px; overflow: hidden; }
.orc-viz .hc-bar i { display: block; height: 100%; border-radius: 5px; transition: width .6s; }
.orc-viz .hc-val { text-align: right; font-weight: 700; color: #fff; font-size: 13px; }
.orc-viz .hc-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #2c2c31; font-size: 12px; color: var(--tx3); display: flex; justify-content: space-between; gap: 8px; }
.orc-viz .hc-foot b { color: var(--tx2); }
.orc-viz .vt { width: 100%; border-collapse: collapse; font-size: 13px; }
.orc-viz .vt th, .orc-viz .vt td { padding: 9px 12px; border-bottom: 1px solid #222227; text-align: right; white-space: nowrap; }
.orc-viz .vt th { color: var(--tx3); font-weight: 600; font-size: 12px; background: rgba(255, 255, 255, .02); }
.orc-viz .vt th:first-child, .orc-viz .vt td:first-child { text-align: left; }
.orc-viz .vt td { color: #fff; font-weight: 600; }
.orc-viz .vt td.na { color: var(--tx4); font-weight: 400; }
.orc-viz .vt tr.sub td:first-child { padding-left: 26px; color: var(--tx2); font-weight: 400; }
.orc-viz .vt-note { font-size: 12px; color: var(--tx3); padding: 10px 14px 14px; line-height: 1.7; }
.orc-viz .chart-wrap { padding: 10px 14px 8px; position: relative; }
.orc-viz .chart-wrap svg { width: 100%; height: auto; display: block; }
.orc-viz .heat-cards.two { grid-template-columns: repeat(2, 1fr); }

/* 기간별 비교 (일 · 월 · 연) */
.orc-viz .trend { padding: 12px 14px 10px; }
.orc-viz .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.orc-viz .toolbar .spacer { flex: 1; }
.orc-viz .seg { display: inline-flex; background: #141417; border: 1px solid #2c2c31; border-radius: 9px; padding: 2px; }
.orc-viz .seg button, .orc-viz .date-nav button {
  background: transparent; border: 0; color: var(--tx3); font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s;
}
.orc-viz .seg button:hover:not(:disabled) { color: #fff; }
.orc-viz .seg button.on { background: var(--accent); color: #fff; }
.orc-viz .seg button:disabled { opacity: .35; cursor: default; }
.orc-viz .date-nav { display: inline-flex; align-items: center; gap: 4px; }
.orc-viz .date-nav button { border: 1px solid #2c2c31; padding: 4px 10px; color: var(--tx2); }
.orc-viz .date-nav button:hover:not(:disabled) { border-color: #555; color: #fff; }
.orc-viz .date-nav button:disabled { opacity: .3; cursor: default; }
.orc-viz .date-box { min-width: 128px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; }
.orc-viz .trend-shell { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; }
.orc-viz .trend-main svg { display: block; width: 100%; height: auto; user-select: none; }
.orc-viz .trend-main .legend { padding: 2px 0 0 52px; }
.orc-viz .trend-side { border-left: 1px solid #27272b; padding: 4px 0 4px 14px; font-size: 12px; }
.orc-viz .trend-side h4 { margin: 4px 0 8px; font-size: 13px; color: #fff; }
.orc-viz .trend-side h4.sp-sel { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #2c2c31; color: var(--tx2); }
.orc-viz .sp-row { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }
.orc-viz .sp-v { font-size: 17px; font-weight: 700; color: #fff; }
.orc-viz .sp-v small { font-size: 11px; color: var(--tx3); font-weight: 600; }
.orc-viz .sp-diff { display: flex; align-items: center; justify-content: space-between; color: var(--tx3); margin-top: 4px; }
.orc-viz .ch-axis { stroke: #2c2c31; }
.orc-viz .ch-grid { stroke: #1f1f24; }
.orc-viz .ch-tick { fill: var(--tx4); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .orc-viz .flow, .orc-viz .spin, .orc-viz .eq .frame, .orc-viz .alarm-ring, .orc-viz .recv .dot,
  .orc-viz .pump-piston, .orc-viz .pump-fluid, .orc-viz .fc-sweep, .orc-viz .hx-shell, .orc-viz .hx-stream,
  .orc-viz .hx-coil-flow { animation: none !important; }
}