/* ════════════════════════════════════════════════ */
/* auth-key-map.css                                   */
/* architecture.css 를 확장 — 인증키 맵 전용 컴포넌트   */
/* ════════════════════════════════════════════════ */

:root {
    /* Key category accent colors */
    --key-oauth: #3b82f6;
    --key-smtp: #f59e0b;
    --key-ai: #8b5cf6;
    --key-perm: #06b6d4;
    --key-alias: #64748b;

    /* Additional service accent colors */
    --company-color: #0ea5e9;
    --teacher-color: #a855f7;
    --llmops-color: #14b8a6;
}

/* ── Key node accent bars (data-key) ── */
.node[data-key="oauth"]::after { background: var(--key-oauth); }
.node[data-key="smtp"]::after  { background: var(--key-smtp); }
.node[data-key="ai"]::after    { background: var(--key-ai); }
.node[data-key="perm"]::after  { background: var(--key-perm); }
.node[data-key="alias"]::after { background: var(--key-alias); }

/* ── Additional service accent bars ── */
.node[data-service="company"]::after { background: var(--company-color); }
.node[data-service="teacher"]::after { background: var(--teacher-color); }
.node[data-service="llmops"]::after  { background: var(--llmops-color); }

/* ── Monospace key name ── */
.node-name.mono {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
    word-break: break-all;
}

.gateway-label.mono {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* ── Key category pill (node header) ── */
.key-cat {
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.key-cat.oauth { color: var(--key-oauth); background: rgba(59, 130, 246, 0.12); }
.key-cat.smtp  { color: var(--key-smtp);  background: rgba(245, 158, 11, 0.12); }
.key-cat.ai    { color: var(--key-ai);    background: rgba(139, 92, 246, 0.12); }
.key-cat.perm  { color: var(--key-perm);  background: rgba(6, 182, 212, 0.12); }
.key-cat.alias { color: #94a3b8;          background: rgba(100, 116, 139, 0.15); }

/* ── Rotation difficulty badge ── */
.rot-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    margin-top: auto;
    align-self: flex-start;
}

.rot-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.rot-badge.high { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.rot-badge.high::before { background: #f87171; }
.rot-badge.mid  { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
.rot-badge.mid::before { background: #fbbf24; }
.rot-badge.low  { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.rot-badge.low::before { background: #4ade80; }

/* ── Matrix key badges (service node) ── */
.key-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.15rem 0 0.25rem;
}

.kb {
    font-size: 0.57rem;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 5px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.kb.shared  { color: #60a5fa; background: rgba(59, 130, 246, 0.1);  border-color: rgba(59, 130, 246, 0.3); }
.kb.own     { color: #fbbf24; background: rgba(245, 158, 11, 0.1);  border-color: rgba(245, 158, 11, 0.3); }
.kb.alias   { color: #94a3b8; background: rgba(100, 116, 139, 0.1); border-color: rgba(148, 163, 184, 0.35); border-style: dashed; }
.kb.planned { color: #60a5fa; background: transparent;              border-color: rgba(59, 130, 246, 0.35); border-style: dashed; }
.kb.builtin { color: #94a3b8; background: rgba(100, 116, 139, 0.08); border-color: rgba(148, 163, 184, 0.2); }

/* ── Principle / standards cards ── */
.principle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.principle-card {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    transition: all 0.2s;
}

.principle-card:hover {
    border-color: rgba(148, 163, 184, 0.3);
    transform: translateY(-2px);
}

.principle-num {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent-color);
    flex-shrink: 0;
    line-height: 1.3;
}

.principle-text strong {
    display: block;
    font-size: 0.74rem;
    color: #f1f5f9;
    margin-bottom: 0.2rem;
}

.principle-text span {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Info banner ── */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.2);
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.55;
    animation: fadeInUp 0.6s ease-out 0.25s backwards;
}

.info-banner .info-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.info-banner strong {
    color: #f1f5f9;
    font-weight: 600;
}

/* ── Section sub-note ── */
.section-subnote {
    text-align: center;
    font-size: 0.62rem;
    color: rgba(148, 163, 184, 0.6);
    font-style: italic;
    margin-top: 0.85rem;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .principle-grid {
        grid-template-columns: 1fr;
    }
}