/* 상황판(첫 화면)·센터 시설 화면 — 밝은 바탕, 가운데 지도 패널만 어둡게 */

body[data-route="board"] #view, body[data-route="stats"] #view { padding: 0; }
.stage-wrap { position: relative; height: calc(100vh - 56px); overflow: hidden; background: var(--bg0); }
.stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1020px; transform-origin: 0 0;
  background:
    linear-gradient(rgba(12, 35, 64, .04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(12, 35, 64, .04) 1px, transparent 1px) 0 0 / 40px 40px;
}

/* ---------- 패널 */
.pn { position: absolute; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(12, 35, 64, .05), 0 4px 14px rgba(12, 35, 64, .05); }
.pn > header { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; flex: none; border-bottom: 1px solid var(--line); }
.pn > header b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); position: relative; padding-left: 12px; }
.pn > header b::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--cyan); }
.pn > header em { font-style: normal; font-family: var(--num); font-weight: 700; font-size: 12px; letter-spacing: .16em; color: var(--cyan); }
.pn > header .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }
.pn-body { flex: 1; min-height: 0; padding: 12px 16px; position: relative; }

/* 지도 패널: 이 안에서만 어두운 색 변수로 바꾼다 */
.pn.dark {
  --ink: #e4eef9; --ink-2: #a3b5ca; --ink-3: #6f84a0; --cyan: #3cc8ff; --line: rgba(110, 170, 230, .16); --line-2: rgba(110, 170, 230, .3);
  --red: #ff4d5f; --green: #3ddc97; --amber: #ffb340;
  color: var(--ink); background: radial-gradient(900px 500px at 50% 50%, #0f2440, #070f1c 75%); border-color: #0c2340; box-shadow: 0 6px 20px rgba(12, 35, 64, .25);
}
.pn.dark > header { border-bottom-color: rgba(110, 170, 230, .14); background: linear-gradient(90deg, rgba(60, 200, 255, .1), transparent 60%); }
.pn.dark > header b { color: #fff; }

/* ---------- KPI 띠 */
.kstrip { position: absolute; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kt { position: relative; padding: 12px 14px 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; color: var(--ink); box-shadow: 0 1px 2px rgba(12, 35, 64, .05), 0 4px 14px rgba(12, 35, 64, .05); }
.kt:hover { text-decoration: none; border-color: var(--cyan); }
.kt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); }
.kt.red::before { background: var(--red); }
.kt.amber::before { background: var(--amber); }
.kt.green::before { background: var(--green); }
.kt .k { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.kt .v { font-family: var(--num); font-weight: 700; font-size: 38px; line-height: 1; margin-top: 6px; color: var(--navy); }
.kt .v small { font-family: "Pretendard"; font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.kt .s { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.kt.red .v { color: var(--red); }
.kt.amber .v { color: var(--amber); }
.kt.green .v { color: var(--green); }
.kt.red { background: var(--bad-bg); border-color: #f3c2c9; }
.kt.blink { animation: ktblink 1.6s ease-in-out infinite; }
@keyframes ktblink { 50% { background: var(--bad-bg); } }

/* ---------- 지도 (어두운 패널 안) */
.mapbox { position: absolute; inset: 0; overflow: hidden; }
.map3d { position: absolute; left: 0; right: 0; top: 18px; bottom: 70px; perspective: 1600px; }
.map3d svg { width: 100%; height: 100%; overflow: visible; transform: rotateX(24deg) scale(1.12) translateY(10px); transform-origin: 50% 55%; }
.emd { cursor: pointer; transition: fill .35s, filter .2s; }
.emd:hover { filter: brightness(1.35); }
.emd.sel { stroke: #fff !important; stroke-width: 2.4 !important; }
.emd-label { pointer-events: none; font-family: "Pretendard"; paint-order: stroke; stroke: rgba(3, 9, 18, .92); stroke-width: 5px; stroke-linejoin: round; }
.emd-label .n { font-size: 25px; font-weight: 700; fill: #fff; letter-spacing: -.02em; }
.emd-label .c { font-size: 17px; font-weight: 600; fill: #9fd8ff; font-family: var(--num); }
.emd-label .c .bad { fill: #ff7b88; }
.nb-label { font-size: 30px; font-weight: 700; fill: rgba(150, 180, 210, .16); letter-spacing: .3em; pointer-events: none; }
.rv-label { font-size: 15px; fill: #4fb6ef; font-style: italic; opacity: .8; pointer-events: none; paint-order: stroke; stroke: rgba(3, 9, 18, .8); stroke-width: 3px; }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(3.2); opacity: 0; } }
/* 관제센터 → 장애 개소 연결선. (.flow 는 좁은 화면 배치 이름이라 쓰지 않는다 — 점선 속성이 지도 전체에 상속됨) */
.hq-link { stroke-dasharray: 6 10; animation: hq-flow 1.1s linear infinite; }
@keyframes hq-flow { to { stroke-dashoffset: -32; } }
.hq-ring { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.map-modes { position: absolute; left: 14px; top: 10px; display: flex; z-index: 2; }
.map-modes button:first-child { border-radius: 8px 0 0 8px; }
.map-modes button:last-child { border-radius: 0 8px 8px 0; }
.map-modes button { font: inherit; font-size: 13px; padding: 5px 14px; cursor: pointer; color: var(--ink-2); background: rgba(8, 18, 32, .85); border: 1px solid rgba(110, 170, 230, .25); margin-left: -1px; }
.map-modes button.on { color: #fff; background: rgba(60, 200, 255, .2); border-color: var(--cyan); position: relative; z-index: 1; }
.map-legend { position: absolute; right: 16px; top: 12px; z-index: 2; font-size: 12px; color: var(--ink-2); text-align: right; }
.map-legend .ramp { width: 200px; height: 8px; margin: 4px 0 2px auto; }
.map-legend .ticks { display: flex; justify-content: space-between; width: 200px; margin-left: auto; font-family: var(--num); color: var(--ink-3); }
.map-legend .dots { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; }
.map-legend .dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.emd-rank { position: absolute; left: 12px; right: 12px; bottom: 10px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; z-index: 2; }
.emd-rank button { font: inherit; text-align: left; cursor: pointer; color: var(--ink); padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(110, 170, 230, .16); background: rgba(8, 18, 32, .85); position: relative; overflow: hidden; }
.emd-rank button:hover, .emd-rank button.sel { border-color: var(--cyan); }
.emd-rank b { display: block; font-size: 13px; }
.emd-rank span { font-family: var(--num); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.emd-rank span.bad { color: #ff7b88; }
.emd-rank i { position: absolute; left: 0; bottom: 0; height: 2px; }
.map-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 210px; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: rgba(6, 14, 26, .95); border: 1px solid var(--cyan); }
.map-tip b { font-size: 15px; display: block; margin-bottom: 4px; }
.map-tip dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; }
.map-tip dt { color: var(--ink-3); }
.map-tip dd { margin: 0; text-align: right; font-family: var(--num); font-weight: 600; font-size: 14px; }

/* ---------- 카메라 링·막대 */
.cam-wrap { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; height: 100%; }
.ring-txt { font-family: var(--num); }
.kinds { display: grid; gap: 8px; }
.kind { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 6px 12px; border-left: 3px solid var(--cyan); border-radius: 8px; background: var(--surface-2); }
.kind b { font-family: var(--num); font-size: 24px; font-weight: 700; color: var(--navy); }
.kind span { font-size: 13px; color: var(--ink-2); }
.kind.bad { border-color: var(--red); background: var(--bad-bg); }
.kind.bad b { color: var(--red); }

.prow { display: grid; grid-template-columns: 82px 1fr 46px 40px; gap: 8px; align-items: center; height: 25px; font-size: 13px; }
.prow .lab { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .bar { height: 8px; background: var(--surface-3); position: relative; border-radius: 4px; overflow: hidden; }
.prow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); }
.prow .v { font-family: var(--num); font-size: 16px; font-weight: 600; text-align: right; }
.prow .o { font-family: var(--num); font-size: 14px; font-weight: 700; text-align: right; color: var(--ink-3); }
.prow .o.bad { color: var(--red); }
.phead { display: grid; grid-template-columns: 82px 1fr 46px 40px; gap: 8px; font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.phead span:nth-child(n+3) { text-align: right; }

.net { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 100%; }
.net > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--surface-2); }
.net .t { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.net .v { font-family: var(--num); font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--navy); }
.net .v small { font-family: "Pretendard"; font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.net .s { font-size: 12px; color: var(--ink-3); }
.net .s b { color: var(--red); font-family: var(--num); font-size: 14px; }

/* ---------- 실시간 장애 알림 */
.alarms { height: 100%; overflow: auto; margin: -4px -6px 0; padding: 0 6px; }
.alarm { display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; padding: 10px 10px 10px 0; border-radius: 8px; cursor: pointer; border-bottom: 1px solid var(--line); align-items: center; }
.alarm:hover { background: var(--hover); }
.alarm .bar { align-self: stretch; border-radius: 2px; }
.alarm .t1 { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); font-family: var(--num); }
.alarm .t2 { font-size: 15px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.alarm .t3 { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.alarm .r { text-align: right; }
.alarm .r .sla { font-family: var(--num); font-size: 15px; font-weight: 700; margin-top: 4px; }
.alarm.new { animation: newalarm 2s ease-out 3; }
@keyframes newalarm { 0%, 100% { background: transparent; } 50% { background: var(--bad-bg); } }

/* ---------- 최근 조치 완료 */
.done-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; height: 100%; }
.done-grid .done { display: flex; flex-direction: column; justify-content: center; padding: 4px 10px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 10px; background: var(--surface-2); color: var(--ink); min-width: 0; }
.done-grid .done:hover { text-decoration: none; border-color: var(--green); }
.done-grid .done .t1 { display: flex; justify-content: space-between; font-family: var(--num); font-size: 12px; color: var(--ink-3); }
.done-grid .done .t2 { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.done-grid .done .t1 .sla-ok, .done-grid .done .t1 .sla-bad { font-family: "Pretendard"; }
.done-grid .done .t3 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); }
.done-grid .done .t3 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.done-grid .done .t3 b { font-family: var(--num); font-size: 13px; color: var(--ink); flex: none; }

/* ---------- 카테고리 색 (센터 시설) */
.c-storage { --cc: #3567e0; } .c-server { --cc: #0b8fd6; } .c-network { --cc: #0b9f86; } .c-security { --cc: #e2661c; }
.c-terminal { --cc: #7c5ce0; } .c-display { --cc: #d6408f; } .c-audio { --cc: #d68a00; } .c-cabling { --cc: #6b7f96; }

/* ---------- 센터 시설 화면 */
.center-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.hall { display: flex; flex-wrap: wrap; gap: 18px 14px; padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.rack { width: 214px; flex: none; }
.rack-top { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 6px; }
.rack-top b { font-family: var(--num); font-size: 22px; font-weight: 700; color: var(--navy); }
.rack-top span { font-size: 12px; color: var(--ink-3); }
.cab { position: relative; border-radius: 6px; overflow: hidden; border: 2px solid #33465f; border-top-width: 10px; border-bottom-width: 10px; background: #0b1420; padding: 0 0 0 20px; box-shadow: 0 6px 16px rgba(10, 25, 45, .25); }
.cab .u { position: absolute; left: 0; width: 18px; font-family: var(--num); font-size: 9px; color: #6a7f99; text-align: center; border-top: 1px solid #16263a; }
.cab .slots { position: relative; background: repeating-linear-gradient(#0e1826 0 13px, #152234 13px 14px); }
.dev {
  position: absolute; left: 2px; right: 2px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cc) 70%, #000);
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0, 0, 0, .22) 5px 6px) right 6px top 3px / 34% calc(100% - 6px) no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--cc) 62%, #1a2636), color-mix(in srgb, var(--cc) 40%, #0c1520));
  cursor: pointer; overflow: hidden; padding: 0 6px; display: flex; flex-direction: column; justify-content: center;
}
.dev:hover { border-color: #fff; z-index: 2; }
.dev.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--cc), 0 0 14px var(--cc); z-index: 3; }
.dev.dim { opacity: .18; }
.dev.hit { box-shadow: 0 0 0 2px #ffd34d, 0 0 14px #ffd34d; z-index: 3; }
.dev b { font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-weight: 600; }
.dev span { font-size: 10px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--num); }
.dev.st-미사용 { filter: grayscale(1) brightness(.6); }
.catbar { display: flex; flex-wrap: wrap; gap: 6px; }
.catbtn { font: inherit; font-size: 12px; cursor: pointer; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; display: flex; gap: 6px; align-items: center; }
.catbtn i { width: 10px; height: 10px; border-radius: 3px; background: var(--cc); display: inline-block; }
.catbtn.on { color: var(--ink); border-color: var(--cc); background: color-mix(in srgb, var(--cc) 12%, #fff); font-weight: 600; }
.catbtn b { font-family: var(--num); }
.detail { position: sticky; top: 72px; }
.detail .big { font-size: 18px; font-weight: 700; color: var(--navy); }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.cat-chip i { width: 9px; height: 9px; background: var(--cc); display: inline-block; }
.tbl tr.sel td { background: var(--hover); }
.pn .stat-tbl th, .pn .stat-tbl td { padding: 6px 10px; }
.pn .pn-body:has(.stat-tbl) { overflow: auto; padding: 0 4px 4px; }

@media (max-width: 1100px) {
  .center-layout { grid-template-columns: 1fr; }
  .detail { position: static; }
}

/* ---------- 좁은 화면: 무대 대신 패널을 쌓는다 (지도 먼저) */
.stage-wrap.flow { height: auto; overflow: visible; }
.stage.flow {
  position: static; width: auto; height: auto; transform: none !important; background: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px;
}
.stage.flow > .pn, .stage.flow > .kstrip { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
.stage.flow > .pn { min-height: 220px; }
.stage.flow > .pn.dark { order: -1; grid-column: 1 / -1; height: min(68vw, 640px) !important; min-height: 380px; }
.stage.flow > .kstrip { order: -2; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
.stage.flow .pn-body { overflow: visible; }
.stage.flow svg.chart { width: 100%; height: auto; }
.stage.flow .alarms { max-height: 560px; }
.stage.flow .done-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
.stage.flow .emd-rank { grid-template-columns: repeat(5, 1fr); }
.stage.flow .map3d { bottom: 112px; }
@media (max-width: 760px) {
  .stage.flow { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .stage.flow > .kstrip { grid-template-columns: repeat(2, 1fr); }
  .stage.flow .kt .v { font-size: 30px; }
  .stage.flow > .pn.dark { height: 92vw !important; min-height: 420px; }
  .stage.flow .map-legend { display: none; }
  .stage.flow .map-modes button { padding: 5px 10px; font-size: 12px; }
  .stage.flow .done-grid { grid-template-columns: 1fr; }
  .stage.flow .emd-rank button { padding: 3px 6px; }
  .stage.flow .emd-rank b { font-size: 12px; }
  .stage.flow .emd-rank span { font-size: 13px; }
}

/* 읍면 이름표 */
.emd-tag { pointer-events: none; }
.tag-bg { fill: rgba(5, 14, 28, .86); stroke: rgba(120, 215, 255, .7); stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.tag-n { font-family: "Pretendard"; font-size: 22px; font-weight: 700; fill: #fff; letter-spacing: -.02em; }
.tag-dot { fill: #2fe0b5; }
.tag-dot.bad { fill: #ff4d5f; }
.tag-badge { fill: #ff4d5f; stroke: #fff; stroke-width: 2.5; }
.tag-badge-t { font-family: var(--num); font-size: 19px; font-weight: 700; fill: #fff; }
.emd-tag .emd-label .c { font-size: 16px; }