/* ─── Infra 모니터링 섹션 스타일 ─── */

/* 모달 크기 */
#main article#infra {
    width: 90vw;
    max-width: 1200px;
}

/* 카드 펄스 애니메이션 */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 5px 2px rgba(0,230,118,0.45); }
    50%       { box-shadow: 0 0 11px 4px rgba(0,230,118,0.8); }
}
@keyframes pulse-yellow {
    0%, 100% { box-shadow: 0 0 5px 2px rgba(255,193,7,0.45); }
    50%       { box-shadow: 0 0 11px 4px rgba(255,193,7,0.8); }
}
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 5px 2px rgba(255,82,82,0.45); }
    50%       { box-shadow: 0 0 11px 4px rgba(255,82,82,0.8); }
}
@keyframes pulse-dot-green {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.4); }
}
@keyframes pulse-dot-yellow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.4); }
}
@keyframes pulse-dot-red {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.4); }
}
@keyframes flow-line {
    0%   { stroke-dashoffset: 24; }
    100% { stroke-dashoffset: 0; }
}
@keyframes glow-title {
    0%, 100% { text-shadow: 0 0 8px rgba(100,220,255,0.4); }
    50%       { text-shadow: 0 0 22px rgba(100,220,255,0.9), 0 0 40px rgba(100,220,255,0.4); }
}

/* 제목 */
.infra-title { animation: glow-title 3s ease-in-out infinite; }

/* 컨테이너 카드 */
.infra-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 0.75em 1em;
    font-size: 0.88em;
    transition: border-color 0.4s, box-shadow 0.4s;
}
.infra-card.running {
    border-color: rgba(0,230,118,0.45);
    animation: pulse-green 2.2s ease-in-out infinite;
}
.infra-card.paused {
    border-color: rgba(255,193,7,0.45);
    animation: pulse-yellow 2.2s ease-in-out infinite;
}
.infra-card.stopped {
    border-color: rgba(255,82,82,0.45);
    animation: pulse-red 2.2s ease-in-out infinite;
}

/* 상태 점 */
.status-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.running {
    background: #00e676;
    animation: pulse-dot-green 1.8s ease-in-out infinite;
}
.status-dot.paused {
    background: #ffc107;
    animation: pulse-dot-yellow 1.8s ease-in-out infinite;
}
.status-dot.stopped {
    background: #ff5252;
    animation: pulse-dot-red 1.8s ease-in-out infinite;
}

/* SVG */
.flow-path {
    stroke-dasharray: 8 4;
    animation: flow-line 0.8s linear infinite;
}
.svg-box {
    fill: rgba(255,255,255,0.06);
    stroke: rgba(255,255,255,0.25);
    stroke-width: 1;
    rx: 6;
}
.svg-box-label {
    fill: rgba(255,255,255,0.85);
    font-size: 11px;
    font-family: monospace;
    text-anchor: middle;
    dominant-baseline: middle;
}
.svg-box-sub {
    fill: rgba(255,255,255,0.4);
    font-size: 9px;
    font-family: monospace;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* 연결 상태 뱃지 */
.conn-badge {
    font-size: 0.72em;
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: 0.06em;
}
.conn-badge.connecting {
    background: rgba(255,193,7,0.15);
    border: 1px solid rgba(255,193,7,0.45);
    color: #ffc107;
}
.conn-badge.connected {
    background: rgba(0,230,118,0.12);
    border: 1px solid rgba(0,230,118,0.4);
    color: #00e676;
}
.conn-badge.reconnecting {
    background: rgba(255,82,82,0.12);
    border: 1px solid rgba(255,82,82,0.4);
    color: #ff5252;
}

/* 그룹 섹션 */
.infra-group-section { margin-bottom: 2em; }
.infra-group-header {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.infra-group-title {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.9;
}
.infra-group-badge {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 0.72em;
    opacity: 0.65;
}
.infra-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6em;
}

/* ─── Description 박스 ─── */
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,82,82,0.6); }
    50%       { box-shadow: 0 0 0 5px rgba(255,82,82,0); }
}

.infra-desc {
    background: rgba(0,0,0,0.35);
    border-left: 2px solid #00e676;
    border-radius: 0 6px 6px 0;
    padding: 0.9em 1.4em 0.9em;
    margin-bottom: 2em;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82em;
    line-height: 1.5;
    letter-spacing: 0.01em;
    position: relative;
}
.infra-desc-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
}
.infra-live-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.78em;
    letter-spacing: 0.05em;
    color: #ff5252;
    font-family: monospace;
}
.infra-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff5252;
    animation: live-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
.infra-desc-text {
    color: rgba(255,255,255,0.65);
    margin: 0 0 0.4em;
}
.infra-desc-text span {
    color: rgba(255,255,255,0.85);
}
.infra-desc-footer {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.88em;
    color: rgba(0,230,118,0.8);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 0.4em;
    margin-top: 0.1em;
}
.infra-desc-footer-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00e676;
    flex-shrink: 0;
}
.infra-desc-footer--nginx {
    border-top: none;
    padding-top: 0.1em;
    margin-top: 0;
    color: rgba(100,220,255,0.75);
}
.infra-desc-footer-dot--nginx {
    background: rgba(100,220,255,0.7);
}

/* ─── 헤더 레이아웃 ─── */
.infra-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.8em; margin-bottom:1.4em; }
#infra .infra-title { margin:0; border:none; }
.infra-conn-row { display:flex; align-items:center; gap:0.7em; flex-wrap:wrap; }
#infra-updated { font-size:0.72em; opacity:0.4; }

/* ─── 다이어그램 ─── */
.infra-diagram-wrap { margin-bottom:2.5em; }
#infra-diagram { width:100%; height:auto; display:block; margin:0 auto; }

/* ─── WS 안내 ─── */
.infra-ws-info { font-size:0.78em; opacity:0.4; margin:0 0 1.5em; line-height:1.7; }
.infra-ws-code { opacity:0.7; }

/* ─── 카드 그리드 래퍼 ─── */
#infra-cards { margin-bottom:2em; }
.infra-loading { opacity:0.35; font-size:0.85em; padding:1em; text-align:center; }

/* ─── 카드 내부 요소 (JS 생성) ─── */
.card-header { display:flex; align-items:center; gap:0.55em; margin-bottom:0.6em; }
.card-name { font-size:0.95em; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-image { font-size:0.75em; opacity:0.5; margin-bottom:0.4em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-state { font-size:0.82em; }
.card-state--running { color:#00e676; }
.card-state--paused { color:#ffc107; }
.card-state--stopped { color:#ff5252; }

/* ─── SVG 박스 상태 글로우 (JS classList) ─── */
.svg-box-running { fill:rgba(0,230,118,0.18); stroke:rgba(0,230,118,0.8); filter:drop-shadow(0 0 6px rgba(0,230,118,0.6)); }
.svg-box-stopped { fill:rgba(255,82,82,0.15); stroke:rgba(255,82,82,0.7); filter:drop-shadow(0 0 6px rgba(255,82,82,0.5)); }