/* ============================================================================
   noc.css — AIHUB 관제 NOC 재설계 (인프라 통합관제 · 시스템 관제 · 봇 상태)
   전부 .noc 스코프로 격리 — 기존 style.css / 다른 패널에 영향 없음.
   라이브 이식: index.html 의 panel-infra/system/bots 안쪽을 .noc 컨테이너로 교체.
   ============================================================================ */
.noc{
  --n-line:rgba(64,196,255,.14); --n-line2:rgba(64,196,255,.30);
  --n-panel:rgba(12,19,34,.66); --n-panel2:rgba(16,25,44,.78);
  --n-cyan:#2ff0ff; --n-azure:#3b82f6; --n-violet:#a855f7; --n-magenta:#ff45e0;
  --n-lime:#38f7b0; --n-warn:#ffb02e; --n-danger:#ff4d6d; --n-amber:#ffd34e;
  --n-text:#e8f2ff; --n-text2:#92a8cc; --n-text3:#56688c;
  --n-mono:'Share Tech Mono','JetBrains Mono',ui-monospace,monospace;
  --n-display:'Orbitron','Pretendard',system-ui,sans-serif;
  --n-glow:0 0 22px rgba(47,240,255,.28);
  color:var(--n-text); position:relative;
}
.noc *{box-sizing:border-box}
.noc .mono{font-family:var(--n-mono)}
.noc .glow{background:linear-gradient(120deg,#fff,var(--n-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* 헤더바 */
.noc-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.noc-bar .h{display:flex;flex-direction:column}
.noc-bar .h .k{font-family:var(--n-mono);font-size:9.5px;letter-spacing:.16em;color:var(--n-text3);text-transform:uppercase}
.noc-bar .h h2{font-family:var(--n-display);font-size:18px;font-weight:700;letter-spacing:.03em;margin:2px 0 0}
.noc-bar .sp{flex:1}
.noc-bar .live{font-family:var(--n-mono);font-size:9.5px;letter-spacing:.1em;color:var(--n-danger);border:1px solid rgba(255,77,109,.4);padding:3px 9px;border-radius:5px;display:flex;align-items:center;gap:6px}
.noc-bar .live .d{width:6px;height:6px;border-radius:50%;background:var(--n-danger);box-shadow:0 0 8px var(--n-danger);animation:noc-pulse 1s infinite}
.noc-bar .stamp{font-family:var(--n-mono);font-size:10.5px;color:var(--n-text3);letter-spacing:.03em}
.noc-bar label.auto{font-family:var(--n-mono);font-size:11px;color:var(--n-text2);display:flex;align-items:center;gap:6px;cursor:pointer}
.noc-bar .rbtn{font-family:var(--n-mono);font-size:11px;letter-spacing:.04em;padding:7px 13px;border:1px solid var(--n-line2);background:rgba(20,30,52,.5);color:var(--n-text2);border-radius:8px;cursor:pointer;transition:.15s}
.noc-bar .rbtn:hover{color:var(--n-text);border-color:var(--n-cyan)}
@keyframes noc-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* 카드 */
.noc-card{position:relative;border:1px solid var(--n-line);border-radius:13px;background:linear-gradient(160deg,var(--n-panel),var(--n-panel2));backdrop-filter:blur(8px)}
.noc-card>.cbr{position:absolute;width:13px;height:13px;border:1.5px solid var(--n-cyan);opacity:.75;pointer-events:none}
.noc-card>.cbr.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.noc-card>.cbr.br{bottom:-1px;right:-1px;border-left:0;border-top:0;border-color:var(--n-line2)}
.noc-ch{display:flex;align-items:center;gap:10px;padding:11px 15px 9px;border-bottom:1px solid var(--n-line)}
.noc-ch .t{font-family:var(--n-display);font-size:12px;font-weight:700;letter-spacing:.03em}
.noc-ch .ic{font-size:14px}
.noc-ch .sp{flex:1}
.noc-ch .meta{font-family:var(--n-mono);font-size:9.5px;color:var(--n-text3);letter-spacing:.05em}
.noc-pill{font-family:var(--n-mono);font-size:9px;letter-spacing:.07em;padding:2px 8px;border-radius:20px}
.noc-pill.ok{color:var(--n-lime);background:rgba(56,247,176,.1);border:1px solid rgba(56,247,176,.28)}
.noc-pill.warn{color:var(--n-warn);background:rgba(255,176,46,.1);border:1px solid rgba(255,176,46,.3)}
.noc-pill.bad{color:var(--n-danger);background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.3)}

/* 그리드 */
.noc-row{display:grid;gap:14px;margin-bottom:14px}
.noc-r4{grid-template-columns:repeat(4,1fr)}
.noc-r5{grid-template-columns:repeat(5,1fr)}
.noc-r3{grid-template-columns:repeat(3,1fr)}
.noc-r2{grid-template-columns:repeat(2,1fr)}
.noc-r21{grid-template-columns:1.6fr 1fr}
.noc-r12{grid-template-columns:1fr 1.6fr}
.noc-span2{grid-column:span 2}

/* KPI */
.noc-kpi{padding:13px 15px}
.noc-kpi .lab{font-family:var(--n-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--n-text3);display:flex;align-items:center;gap:7px}
.noc-led{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.noc-led.ok{background:var(--n-lime);box-shadow:0 0 7px var(--n-lime)}
.noc-led.warn{background:var(--n-warn);box-shadow:0 0 7px var(--n-warn)}
.noc-led.bad{background:var(--n-danger);box-shadow:0 0 7px var(--n-danger)}
.noc-led.off{background:var(--n-text3)}
.noc-kpi .num{font-family:var(--n-display);font-weight:800;font-size:26px;margin:7px 0 2px;line-height:1}
.noc-kpi .num small{font-size:12px;color:var(--n-text3);font-family:var(--n-mono);font-weight:400}
.noc-kpi .cap{font-size:10.5px;color:var(--n-text2)}
.noc-kpi .mini{height:24px;margin-top:7px;width:100%;display:block}

/* 차트 */
.noc-chart{width:100%;display:block}
.noc-chpad{padding:12px 14px 8px}
.noc-gridln{stroke:rgba(64,196,255,.08);stroke-width:1}
.noc-legend{display:flex;gap:14px;padding:0 15px 11px;font-family:var(--n-mono);font-size:9.5px;color:var(--n-text2);flex-wrap:wrap}
.noc-legend .it{display:flex;align-items:center;gap:6px}
.noc-legend .sw{width:12px;height:3px;border-radius:2px}
.noc-bignum{display:flex;align-items:baseline;gap:8px;padding:7px 15px 0}
.noc-bignum .v{font-family:var(--n-display);font-weight:800;font-size:24px}
.noc-bignum .u{font-family:var(--n-mono);font-size:11px;color:var(--n-text3)}
.noc-bignum .delta{font-family:var(--n-mono);font-size:10px;margin-left:auto;padding:2px 8px;border-radius:5px}
.noc-bignum .delta.up{color:var(--n-lime);background:rgba(56,247,176,.1)}
.noc-bignum .delta.dn{color:var(--n-danger);background:rgba(255,77,109,.1)}

/* 게이지 */
.noc-gauges{display:flex;gap:8px;padding:13px 14px;flex-wrap:wrap;justify-content:space-around}
.noc-gwrap{text-align:center;flex:1;min-width:74px}
.noc-gwrap svg{width:84px;height:84px}
.noc-gwrap .gv{font-family:var(--n-display);font-weight:800;font-size:17px;fill:#fff}
.noc-gwrap .gl{font-family:var(--n-mono);font-size:9px;letter-spacing:.07em;color:var(--n-text2);margin-top:3px;text-transform:uppercase}
.gring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.gring-fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease,stroke .3s}

/* 토폴로지 */
.noc-topo svg{width:100%;height:230px;display:block}
.tnode-ring{fill:none;stroke-width:1.5}
.tlink{stroke-width:1.5;stroke-dasharray:4 5;opacity:.55}
.tlabel{font-family:var(--n-mono);font-size:9px;fill:var(--n-text2);text-anchor:middle}
.tsub{font-family:var(--n-mono);font-size:7.5px;fill:var(--n-text3);text-anchor:middle}

/* 히트맵 */
.noc-heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:13px 15px}
.hcell{border:1px solid var(--n-line);border-radius:8px;padding:9px 11px;background:rgba(8,14,26,.5)}
.hcell .nm{font-family:var(--n-mono);font-size:10.5px;color:var(--n-text);display:flex;align-items:center;gap:7px;font-weight:500}
.hcell .mt{font-family:var(--n-mono);font-size:8.5px;color:var(--n-text3);margin-top:4px;letter-spacing:.03em}
.hcell .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.06);margin-top:7px;overflow:hidden}
.hcell .bar i{display:block;height:100%;border-radius:2px}
.hcell.up{border-color:rgba(56,247,176,.22)} .hcell.up .bar i{background:linear-gradient(90deg,var(--n-lime),var(--n-cyan))}
.hcell.warn{border-color:rgba(255,176,46,.3)} .hcell.warn .bar i{background:var(--n-warn)}
.hcell.down{border-color:rgba(255,77,109,.35);background:rgba(255,77,109,.06)} .hcell.down .bar i{background:var(--n-danger)}

/* 리스트 행 */
.noc-lrow{display:flex;align-items:center;gap:11px;padding:9px 15px;border-bottom:1px solid rgba(64,196,255,.06)}
.noc-lrow:last-child{border-bottom:0}
.noc-lrow .k{font-family:var(--n-mono);font-size:11px;color:var(--n-text)}
.noc-lrow .d{font-family:var(--n-mono);font-size:9.5px;color:var(--n-text3);margin-left:auto}
.noc-lrow .st{font-family:var(--n-mono);font-size:9px;padding:2px 8px;border-radius:5px;margin-left:10px}
.noc-lrow .st.ok{color:var(--n-lime);background:rgba(56,247,176,.1)}
.noc-lrow .st.warn{color:var(--n-warn);background:rgba(255,176,46,.1)}
.noc-lrow .st.bad{color:var(--n-danger);background:rgba(255,77,109,.1)}

/* 경보 배너 */
.noc-alerts{margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.noc-alert{display:flex;align-items:center;gap:12px;border-radius:11px;padding:10px 14px;border:1px solid}
.noc-alert .lv{font-family:var(--n-display);font-weight:700;font-size:11px;letter-spacing:.08em;padding:3px 9px;border-radius:6px;flex:0 0 auto}
.noc-alert .msg{font-size:12.5px;color:var(--n-text);flex:1}
.noc-alert .act{font-family:var(--n-mono);font-size:10px;color:var(--n-text2)}
.noc-alert.P0{border-color:rgba(255,77,109,.4);background:linear-gradient(90deg,rgba(255,77,109,.14),rgba(10,16,30,.5))}
.noc-alert.P0 .lv{background:var(--n-danger);color:#fff}
.noc-alert.P1{border-color:rgba(255,176,46,.4);background:linear-gradient(90deg,rgba(255,176,46,.12),rgba(10,16,30,.5))}
.noc-alert.P1 .lv{background:var(--n-warn);color:#1a1206}
.noc-alert.P2{border-color:var(--n-line2);background:rgba(16,25,44,.5)}
.noc-alert.P2 .lv{background:var(--n-azure);color:#fff}
.noc-alert.none{border-color:rgba(56,247,176,.3);background:rgba(56,247,176,.07);color:var(--n-lime);font-family:var(--n-mono);font-size:12px;padding:11px 15px}

/* 봇 플릿 */
.noc-fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fc{padding:12px 13px}
.fc .h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.fc .av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;flex:0 0 auto;background:linear-gradient(150deg,rgba(47,240,255,.14),rgba(168,85,247,.12));border:1px solid var(--n-line)}
.fc .n{font-family:var(--n-display);font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.fc .p{font-size:9.5px;color:var(--n-text2);font-family:var(--n-mono)}
.fc .hb{height:28px;margin:5px 0 7px;width:100%;display:block}
.fc .g2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fc .st{background:rgba(8,14,26,.5);border:1px solid var(--n-line);border-radius:7px;padding:5px 8px}
.fc .st .k{font-family:var(--n-mono);font-size:8px;color:var(--n-text3);text-transform:uppercase;letter-spacing:.05em}
.fc .st .v{font-family:var(--n-mono);font-size:12px;color:var(--n-text);font-weight:700;margin-top:1px}

/* 코어 막대 */
.noc-cores{display:flex;gap:6px;align-items:flex-end;height:88px;padding:6px 0}
.noc-cores .core{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.noc-cores .core .col{flex:1;width:100%;display:flex;align-items:flex-end;background:rgba(255,255,255,.04);border-radius:4px;overflow:hidden}
.noc-cores .core .col i{display:block;width:100%;border-radius:4px 4px 0 0;transition:height .5s}
.noc-cores .core span{font-family:var(--n-mono);font-size:8px;color:var(--n-text3)}

/* 데모 시뮬레이션 모드 */
.noc .rbtn.noc-simbtn.on{color:#1a1206;background:var(--n-amber);border-color:var(--n-amber);font-weight:700}
.noc .noc-bar .live.sim{color:var(--n-amber);border-color:rgba(255,176,46,.5)}
.noc .noc-bar .live.sim .d{background:var(--n-amber);box-shadow:0 0 8px var(--n-amber)}
.noc .noc-simbanner{flex-basis:100%;margin:10px 0 2px;padding:8px 14px;border-radius:9px;font-family:var(--n-mono);font-size:11.5px;letter-spacing:.02em;color:#1a1206;font-weight:600;
  background:repeating-linear-gradient(45deg,var(--n-amber),var(--n-amber) 11px,#e0a414 11px,#e0a414 22px)}
.noc .noc-simbanner b{font-weight:800}

.noc-err{color:var(--n-danger);font-family:var(--n-mono);font-size:12px;padding:14px}
.noc-loading{color:var(--n-text3);font-family:var(--n-mono);font-size:12px;padding:18px;text-align:center}

@media(max-width:1280px){.noc-r4,.noc-r5{grid-template-columns:repeat(2,1fr)}.noc-fleet{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.noc-r3,.noc-r21,.noc-r12{grid-template-columns:1fr}.noc-span2{grid-column:auto}}