/* 센터 시설 — 3D 랙 실장도 · 구성도 */

/* ---------- 3D 랙 */
.r3 { position: relative; height: calc(100vh - 290px); min-height: 520px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, #1b2c44 0%, #0b1422 55%, #060b14 100%); border: 1px solid #1d2d44; }
.r3-scene { position: absolute; inset: 0; perspective: 2600px; perspective-origin: 50% 35%; cursor: grab; touch-action: none; user-select: none; }
.r3-scene:active { cursor: grabbing; }
.r3-world { position: absolute; left: 50%; top: 66%; transform-style: preserve-3d; }
.r3-floor { position: absolute; left: 0; top: 0; transform: rotateX(90deg); transform-style: preserve-3d;
  background:
    repeating-linear-gradient(0deg, rgba(120, 180, 255, .07) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(120, 180, 255, .07) 0 1px, transparent 1px 18px),
    radial-gradient(closest-side, rgba(60, 140, 255, .16), rgba(0, 0, 0, 0));
  border-radius: 50%; }
.r3-rack { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.r3-face { position: absolute; left: 0; top: 0; backface-visibility: visible; }
.r3-back { background: linear-gradient(180deg, #0d1724, #070d16); }
.r3-side { background: linear-gradient(90deg, #1b2738, #121c2a 40%, #0d1520); border-left: 1px solid #2a3a52; border-right: 1px solid #2a3a52;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.r3-side::after { content: ""; position: absolute; inset: 8% 10%; border-radius: 2px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px); }
.r3-top { background: linear-gradient(90deg, #223146, #1a2738); border: 1px solid #2c3d56; }
.r3-front { box-sizing: border-box; border-style: solid; border-color: #18263a #1d2c42 #101a28; background: transparent;
  box-shadow: inset 0 0 0 1px rgba(150, 200, 255, .12), 0 0 0 1px #2c3e58; }
.r3-mount { pointer-events: auto; }
.r3-blank { position: absolute; background:
  repeating-linear-gradient(180deg, #111b29 0 12.3px, #0c1420 12.3px 13.3px); box-shadow: inset 0 0 12px rgba(0, 0, 0, .6); }
.r3-label { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.r3-label b { font-family: var(--num); font-size: 20px; color: #e8f4ff; text-shadow: 0 0 10px rgba(60, 200, 255, .6); }
.r3-label span { font-size: 10px; color: #8fb0d0; }
.r3-rail { position: absolute; top: 0; bottom: 0; }
.r3-rail.l { right: 100%; } .r3-rail.r { left: 100%; }
.r3-u { position: absolute; left: 0; right: 0; font-style: normal; font-family: var(--num); font-size: 7px; line-height: 13px; color: #5f7a99;
  text-align: center; border-top: 1px solid rgba(120, 160, 210, .12); }
.r3-dev.dev { right: auto; border-radius: 1.5px; padding: 0 5px; flex-direction: row; align-items: center; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--cc) 55%, #000);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(0, 0, 0, .28) 4px 5px) right 18px center / 30% 60% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--cc) 70%, #1b2636), color-mix(in srgb, var(--cc) 38%, #0b131f));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18); }
.r3-dev b { font-size: 9px; flex: none; max-width: 62%; }
.r3-dev span { font-size: 8px; flex: 1; min-width: 0; }
.r3-dev em { position: absolute; right: 5px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #3dff9a; box-shadow: 0 0 6px #3dff9a; }
.r3-dev.st-장애 em { background: #ff4d5f; box-shadow: 0 0 8px #ff4d5f; animation: r3blink 1s steps(2) infinite; }
.r3-dev.st-미사용 em { background: #5d6b7c; box-shadow: none; }
.r3-dev.c-storage { background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 9%) left 34% center / 60% 72% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--cc) 66%, #1b2636), color-mix(in srgb, var(--cc) 34%, #0b131f)); }
.r3-dev.c-network, .r3-dev.c-cabling { background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .25)),
    radial-gradient(circle, rgba(0, 0, 0, .55) 1.4px, transparent 1.6px) right 16px center / 7px 6px repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--cc) 66%, #1b2636), color-mix(in srgb, var(--cc) 36%, #0b131f)); }
.r3-dev.c-cabling { --cc: #8193a8; }
@keyframes r3blink { 50% { opacity: .2; } }
.r3-bar { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 10px; align-items: flex-start; z-index: 2; pointer-events: none; }
.r3-bar > * { pointer-events: auto; }
.r3-bar .seg { display: flex; background: rgba(8, 18, 32, .82); border: 1px solid rgba(120, 200, 255, .3); border-radius: 10px; overflow: hidden; flex: none; }
.r3-bar .seg button, .r3-racks button { font: inherit; font-size: 12px; font-weight: 600; color: #cfe3f7; background: none; border: 0; padding: 6px 11px; cursor: pointer; }
.r3-bar .seg button:hover, .r3-racks button:hover { background: rgba(60, 200, 255, .2); color: #fff; }
.r3-racks { display: flex; flex-wrap: wrap; gap: 4px; }
.r3-racks button { background: rgba(8, 18, 32, .78); border: 1px solid rgba(120, 200, 255, .2); border-radius: 8px; padding: 4px 8px; font-family: var(--num); }
.r3-racks small { margin-left: 4px; font-size: 10px; color: #7f9cbc; font-weight: 500; }
.r3-help { position: absolute; left: 14px; bottom: 10px; font-size: 11px; color: #7f9cbc; z-index: 2; pointer-events: none; }
.r3-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 180px; padding: 8px 11px; border-radius: 10px; background: rgba(6, 14, 26, .95);
  border: 1px solid #3cc8ff; color: #e6f2ff; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.r3-tip b { font-size: 13px; } .r3-tip span { color: #9fbbd8; }

/* ---------- 구성도 (실사형 장비 전면 — 도면이라 테마와 관계없이 밝은 바탕) */
.topo { border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.topo-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #dde3ec; background: #fff; }
.topo-head b { font-size: 16px; color: #16233a; margin-right: 10px; }
.topo-head span { font-size: 12px; color: #5b6b82; }
.topo-tools { font-size: 12px; color: #4a5b74; }
.topo-svg { display: block; width: 100%; height: auto; }
.tp-node .hit { fill: transparent; stroke: none; }
.tp-node.link { cursor: pointer; }
.tp-node.link:hover .hit { fill: rgba(47, 111, 224, .07); stroke: rgba(47, 111, 224, .5); stroke-dasharray: 4 3; }
.tp-edge .flow { stroke-width: 2.6; stroke-dasharray: 2 16; stroke-linecap: round; opacity: .9; animation: tpflow 1.6s linear infinite; filter: brightness(1.35); }
.topo-svg.still .flow { display: none; }
.topo-svg.focus .tp-edge { opacity: .15; } .topo-svg.focus .tp-edge.on { opacity: 1; }
@keyframes tpflow { to { stroke-dashoffset: -36; } }
@media (prefers-reduced-motion: reduce) { .tp-edge .flow { animation: none; } }

/* 구성도는 넓게, 장비 정보는 고른 경우에만 떠 있는 카드로 */
.center-layout.wide { grid-template-columns: 1fr; }
.center-layout.wide .detail { position: fixed; top: auto; right: 24px; bottom: 24px; width: 320px; z-index: 30; box-shadow: 0 12px 32px rgba(10, 25, 45, .25); }
.center-layout.wide .detail.empty-sel { display: none; }