/* 공공 AX: 업무 도구 연결망 / 공공 API: 요청·응답 데이터 교환 */
.hub-viz{position:absolute;right:-280px;top:22px;width:244px;height:240px;pointer-events:none}
.hub-viz svg{display:block;width:100%;height:100%;overflow:visible}
.hub-viz .viz-label{fill:var(--txt-dim);font-family:var(--font-sans);font-size:10px;text-anchor:middle;letter-spacing:.04em}
.hub-viz .viz-icon{fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 문서·검색에서 들어온 신호가 AX를 거쳐 분석·자동화로 연결 */
.viz-orbit{stroke:rgba(255,122,69,.13);stroke-dasharray:2 7}
.viz-orbit-inner{stroke:rgba(255,122,69,.08);stroke-dasharray:none}
.ax-wires{stroke:rgba(255,122,69,.25);stroke-width:1.3}
.ax-signal{stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:12 88;stroke-dashoffset:112;filter:drop-shadow(0 0 4px rgba(255,179,56,.6));animation:ax-signal 5.6s linear infinite}
.ax-signal-2{animation-delay:-2.8s}
.ax-signal-3{stroke:var(--ember);animation-delay:-1.4s}
.ax-signal-4{stroke:var(--ember);animation-delay:-4.2s}
@keyframes ax-signal{0%{stroke-dashoffset:112;opacity:0}12%,76%{opacity:1}88%,100%{stroke-dashoffset:0;opacity:0}}
.ax-core{fill:#24140f;stroke:var(--ember);stroke-width:1.5}
.ax-core-halo{fill:rgba(255,90,46,.05);stroke:rgba(255,122,69,.3);stroke-width:1;transform-origin:128px 120px;animation:ax-core 5.6s ease-in-out infinite}
@keyframes ax-core{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.09);opacity:1}}
.ax-core-label{fill:var(--amber);font-family:"Space Grotesk",var(--font-sans);font-size:21px;font-weight:600;text-anchor:middle;letter-spacing:-.04em}
.ax-node rect{fill:#1b1211;stroke:rgba(255,122,69,.4);stroke-width:1}

/* 서비스에서 데이터로 요청, 데이터에서 서비스로 응답 */
.api-guide{stroke:rgba(255,122,69,.17);stroke-width:1}
.hub-viz .api-caption{font-size:9px}
.api-client{fill:#1b1211;stroke:rgba(255,122,69,.45);stroke-width:1.2}
.api-divider{stroke:rgba(255,122,69,.25)}
.api-window-dot{fill:var(--ember);opacity:.65}
.hub-viz .api-braces{stroke:var(--amber);stroke-width:1.6}
.api-wire{stroke:rgba(255,122,69,.2);stroke-width:1}
.api-request,.api-response{stroke-width:2.5;stroke-linecap:round;stroke-dasharray:10 90;stroke-dashoffset:110;animation:api-exchange 4.8s linear infinite}
.api-request{stroke:var(--amber);filter:drop-shadow(0 0 4px rgba(255,179,56,.55))}
.api-response{stroke:var(--ember);animation-delay:-2.4s;filter:drop-shadow(0 0 4px rgba(255,90,46,.55))}
@keyframes api-exchange{0%{stroke-dashoffset:110;opacity:0}8%,42%{opacity:1}50%,100%{stroke-dashoffset:0;opacity:0}}
.api-arrow{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.api-arrow-request{stroke:var(--amber)}
.api-arrow-response{stroke:var(--ember)}
.api-database{fill:#1b1211;stroke:rgba(255,122,69,.6);stroke-width:1.2}
.api-database ellipse{fill:#281a14;stroke:var(--amber)}
.api-data-lights{fill:var(--amber);animation:api-data 4.8s ease-in-out infinite}
@keyframes api-data{0%,100%{opacity:.35}40%,60%{opacity:1}}
.hub-viz .api-format{font-family:"Space Grotesk",var(--font-sans);font-size:9px;letter-spacing:.18em;fill:var(--txt-faint)}

@media(max-width:1300px){.hub-viz{display:none}}
@media(prefers-reduced-motion:reduce){.hub-viz *{animation:none!important}.ax-signal,.api-request,.api-response{stroke-dashoffset:42;opacity:.8}.ax-core-halo{opacity:.65}.api-data-lights{opacity:.7}}