/* 흐름도 이미지 스타일 — 4개 구조도 페이지 공통 (라이트 테마) */

/* ========== 라이트 테마: 구조도 전용 페이지 ========== */
body.diagram-light-theme {
    background: #f5f5f7;
    color: #1d1d1f;
    transition: background-color 0.28s ease, color 0.28s ease;
}
body.diagram-light-theme .diagram-section-header {
    border-bottom-color: var(--border-color);
}
body.diagram-light-theme .diagram-section-body {
    max-width: 900px;
}
body.diagram-light-theme .diagram-page h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #1d1d1f;
}
body.diagram-light-theme .diagram-page .back {
    display: inline-block;
    margin-bottom: 1rem;
    color: #B8AF1D !important;
    font-size: 0.875rem;
    text-decoration: none;
}
body.diagram-light-theme .diagram-page .back:hover {
    color: #8b6914 !important;
    text-decoration: underline;
}

/* 페이지 레이아웃 — index .section-header / .section-body와 동일 정렬 */
.diagram-page {
    max-width: 100%;
}
.diagram-section-header {
    padding: 40px 40px 32px;
    border-bottom: 1px solid var(--border-color);
}
.diagram-section-header .diagram-page-title {
    margin-bottom: 0.5rem;
}
.diagram-section-header .back {
    margin-bottom: 0;
}
.diagram-section-body {
    padding: 32px 40px 60px;
    max-width: 900px;
}
.diagram-page h1,
.diagram-page .diagram-page-title {
    font-size: var(--fs-h1);
    margin-bottom: var(--spacing-md);
}
body.diagram-light-theme .diagram-page .diagram-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #1d1d1f;
}
html[data-theme="dark"] body.diagram-light-theme .diagram-page .diagram-page-title {
    color: var(--text-white, #f5f5f7);
}

/* 하나의 흐름도 이미지처럼 보이는 프레임 — 라이트 */
body.diagram-light-theme .flowchart-figure {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* 세로 연결선 */
.flow-connector-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 4px 0;
}
body.diagram-light-theme .flow-connector-v .line {
    width: 2px;
    height: 18px;
    background: #B8AF1D;
    border-radius: 1px;
}
body.diagram-light-theme .flow-connector-v .arrow {
    color: #B8AF1D;
    line-height: 0;
    margin-top: -2px;
}
.flow-connector-v .arrow svg {
    display: block;
    width: 24px;
    height: 14px;
}

/* 가로 연결선 */
.flow-connector-h {
    display: flex;
    align-items: center;
    padding: 0 4px;
    flex-shrink: 0;
}
body.diagram-light-theme .flow-connector-h .line {
    width: 18px;
    height: 2px;
    background: #B8AF1D;
    border-radius: 1px;
}
body.diagram-light-theme .flow-connector-h .arrow {
    color: #B8AF1D;
    line-height: 0;
    margin-left: -2px;
}
.flow-connector-h .arrow svg {
    display: block;
    width: 12px;
    height: 20px;
}

/* 흐름도 노드 — 라이트 */
body.diagram-light-theme .flow-node {
    background: #f5f5f7;
    border: 2px solid #d2d2d7;
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    font-size: 0.875rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    min-width: 100px;
    color: #1d1d1f;
}
body.diagram-light-theme .flow-node .node-title {
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
    color: #1d1d1f;
}
body.diagram-light-theme .flow-node .node-desc {
    font-size: 0.75rem;
    color: #6e6e73;
}
body.diagram-light-theme .flow-node.highlight {
    border-color: #B8AF1D;
    background: #fefce8;
}
body.diagram-light-theme .flow-node.entry {
    border-color: #a1a1a6;
    background: #fafafa;
}
body.diagram-light-theme .flow-node.final {
    border-color: #B8AF1D;
    background: #fef9e6;
}

/* 다크 테마 폴백 (메인 사이트 변수) */
.flow-node .node-title { font-weight: 700; display: block; margin-bottom: 0.25rem; }
.flow-node .node-desc { font-size: var(--fs-caption); color: var(--text-muted); }
.flow-node.highlight { border-color: var(--primary); background: rgba(255,217,61,0.1); }
.flow-node.entry { border-color: rgba(255,255,255,0.25); }
.flow-node.final { border-color: var(--primary); background: rgba(255,217,61,0.12); }

/* 세로 흐름 레이아웃 */
.flow-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flow-vertical .flow-node {
    max-width: 440px;
    width: 100%;
}

/* 가로 흐름 레이아웃 */
.flow-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 4px;
}
.flow-horizontal .flow-node {
    flex-shrink: 0;
}

/* 캡션 — 라이트 */
body.diagram-light-theme .flow-caption {
    font-size: 0.8125rem;
    color: #6e6e73;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e5e7;
    text-align: center;
    line-height: 1.5;
}

/* diagram-1 전용: 제목, VS 뱃지, 2단 레이아웃 */
body.diagram-light-theme .flow-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    text-align: center;
    color: #6e6e73;
}
body.diagram-light-theme .flow-pipeline.dnm .flow-title {
    color: #B8AF1D;
}
body.diagram-light-theme .vs-col {
    font-weight: 800;
    color: #a1a1a6;
    font-size: 1.125rem;
    align-self: center;
}
body.diagram-light-theme .paradigm-row {
    gap: 2rem;
    align-items: stretch;
}

/* Phase 색상 (diagram-2) — 라이트 */
body.diagram-light-theme .flow-node.phase-1 { border-color: #f5d95c; background: #fefce8; }
body.diagram-light-theme .flow-node.phase-2 { border-color: #7eb8da; background: #f0f9ff; }
body.diagram-light-theme .flow-node.phase-3 { border-color: #a78bba; background: #faf5fc; }
body.diagram-light-theme .flow-node.phase-4 { border-color: #d4847a; background: #fff8f7; }

@media (max-width: 640px) {
    .flow-horizontal .flow-node {
        min-width: 72px;
        padding: 0.6rem 0.5rem;
        font-size: 0.75rem;
    }
    body.diagram-light-theme .flow-connector-h .line {
        width: 10px;
    }
}

/* ========== 다크 테마: 구조도 전용 페이지 (html[data-theme="dark"]) ========== */
html[data-theme="dark"] body.diagram-light-theme {
    background: var(--bg-dark, #0c0c10);
    color: var(--text-white, #f2f2f4);
}
html[data-theme="dark"] body.diagram-light-theme .diagram-page h1 {
    color: var(--text-white, #f5f5f7);
}
html[data-theme="dark"] body.diagram-light-theme .diagram-page .back {
    color: var(--primary, #f5d95c) !important;
}
html[data-theme="dark"] body.diagram-light-theme .diagram-page .back:hover {
    color: var(--primary-hover, #e8bc5a) !important;
}

html[data-theme="dark"] body.diagram-light-theme .flowchart-figure {
    background: var(--bg-card, #2d2d30);
    border-color: var(--border-color, rgba(255,255,255,0.12));
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

html[data-theme="dark"] body.diagram-light-theme .flow-connector-v .line,
html[data-theme="dark"] body.diagram-light-theme .flow-connector-h .line {
    background: var(--primary, #f5d95c);
}
html[data-theme="dark"] body.diagram-light-theme .flow-connector-v .arrow,
html[data-theme="dark"] body.diagram-light-theme .flow-connector-h .arrow {
    color: var(--primary, #f5d95c);
}

html[data-theme="dark"] body.diagram-light-theme .flow-node {
    background: var(--bg-surface, #38383a);
    border-color: var(--border-light, rgba(255,255,255,0.18));
    color: var(--text-white, #f5f5f7);
}
html[data-theme="dark"] body.diagram-light-theme .flow-node .node-title {
    color: var(--text-white, #f5f5f7);
}
html[data-theme="dark"] body.diagram-light-theme .flow-node .node-desc {
    color: var(--text-muted, #a1a1a6);
}
html[data-theme="dark"] body.diagram-light-theme .flow-node.highlight {
    border-color: var(--primary);
    background: rgba(212, 168, 75, 0.15);
}
html[data-theme="dark"] body.diagram-light-theme .flow-node.entry {
    border-color: rgba(255,255,255,0.2);
    background: var(--bg-surface);
}
html[data-theme="dark"] body.diagram-light-theme .flow-node.final {
    border-color: var(--primary);
    background: rgba(212, 168, 75, 0.14);
}
/* 다크: 일반 flow-node(검증 통과 등) 테두리 가시성 */
html[data-theme="dark"] body.diagram-light-theme .flow-node:not(.entry):not(.highlight):not(.final):not(.danger) {
    border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] body.diagram-light-theme .flow-caption {
    color: var(--text-muted, #a1a1a6);
    border-top-color: var(--border-color);
}

html[data-theme="dark"] body.diagram-light-theme .flow-title {
    color: var(--text-muted, #a1a1a6);
}
html[data-theme="dark"] body.diagram-light-theme .flow-pipeline.dnm .flow-title {
    color: var(--primary);
}
html[data-theme="dark"] body.diagram-light-theme .vs-col {
    color: var(--text-muted, #a1a1a6);
}

/* diagram-1 summary-card 다크 — 라이트 핑크/그린 제거 */
html[data-theme="dark"] body.diagram-light-theme .compare-summary .summary-card:first-child {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}
html[data-theme="dark"] body.diagram-light-theme .compare-summary .summary-card:first-child .card-title {
    color: #fca5a5 !important;
}
html[data-theme="dark"] body.diagram-light-theme .compare-summary .summary-card:first-child span:not(.card-title) {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] body.diagram-light-theme .compare-summary .summary-card:last-child {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(74, 222, 128, 0.4) !important;
}
html[data-theme="dark"] body.diagram-light-theme .compare-summary .summary-card:last-child .card-title {
    color: #86efac !important;
}
html[data-theme="dark"] body.diagram-light-theme .compare-summary .summary-card:last-child span:not(.card-title) {
    color: var(--text-muted) !important;
}

/* diagram-1 danger / decision-node-sm 다크 */
html[data-theme="dark"] body.diagram-light-theme .flow-node.danger {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.12);
}
html[data-theme="dark"] body.diagram-light-theme .flow-node.danger .node-title { color: #fca5a5; }
html[data-theme="dark"] body.diagram-light-theme .flow-node.danger .node-desc  { color: #f87171; }
html[data-theme="dark"] body.diagram-light-theme .decision-node-sm {
    background: rgba(212, 168, 75, 0.12);
    border-color: var(--primary);
}
html[data-theme="dark"] body.diagram-light-theme .decision-node-sm .node-title { color: var(--text-white); }
html[data-theme="dark"] body.diagram-light-theme .decision-node-sm .node-desc  { color: var(--text-muted); }
html[data-theme="dark"] body.diagram-light-theme .decision-node-sm .retry-badge {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(251, 146, 60, 0.5);
    color: #fdba74;
}

/* diagram-2 phase-block 다크 */
html[data-theme="dark"] body.diagram-light-theme .phase-block .phase-header {
    border-bottom-color: var(--border-color);
}
html[data-theme="dark"] body.diagram-light-theme .phase-1 .phase-header { background: rgba(212,168,75,0.2); color: #fcd34d; }
html[data-theme="dark"] body.diagram-light-theme .phase-1 .plugin-chips { background: rgba(212,168,75,0.08); }
html[data-theme="dark"] body.diagram-light-theme .phase-2 .phase-header { background: rgba(126,184,218,0.2); color: #7dd3fc; }
html[data-theme="dark"] body.diagram-light-theme .phase-2 .plugin-chips { background: rgba(126,184,218,0.08); }
html[data-theme="dark"] body.diagram-light-theme .phase-3 .phase-header { background: rgba(167,139,186,0.2); color: #c4b5fd; }
html[data-theme="dark"] body.diagram-light-theme .phase-3 .plugin-chips { background: rgba(167,139,186,0.08); }
html[data-theme="dark"] body.diagram-light-theme .phase-4 .phase-header { background: rgba(212,132,122,0.2); color: #fca5a5; }
html[data-theme="dark"] body.diagram-light-theme .phase-4 .plugin-chips { background: rgba(212,132,122,0.08); }
html[data-theme="dark"] body.diagram-light-theme .plugin-chip {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-light);
    color: var(--text-white);
}
html[data-theme="dark"] body.diagram-light-theme .funnel-label,
html[data-theme="dark"] body.diagram-light-theme .funnel-count { color: var(--text-muted); }

/* diagram-3 user-chip 다크 */
html[data-theme="dark"] body.diagram-light-theme .user-chip {
    background: var(--bg-surface);
    border-color: var(--border-light);
}
html[data-theme="dark"] body.diagram-light-theme .user-chip .ulabel { color: var(--text-muted); }
html[data-theme="dark"] body.diagram-light-theme .user-chip.response {
    border-color: var(--primary);
    background: rgba(212,168,75,0.15);
}
html[data-theme="dark"] body.diagram-light-theme .user-chip.response .uid { color: #fcd34d; }
/* diagram-3 sensor-chip 다크 — 파스텔 제거, 어두운 tint */
html[data-theme="dark"] body.diagram-light-theme .sensor-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--border-light) !important;
    color: var(--text-gray) !important;
}

/* diagram-4 decision-node / branch 다크 */
html[data-theme="dark"] body.diagram-light-theme .decision-node {
    background: rgba(212,168,75,0.12);
    border-color: var(--primary);
}
html[data-theme="dark"] body.diagram-light-theme .decision-node .node-title { color: var(--text-white); }
html[data-theme="dark"] body.diagram-light-theme .decision-node .node-desc { color: var(--text-muted); }
html[data-theme="dark"] body.diagram-light-theme .branch-pass {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}
html[data-theme="dark"] body.diagram-light-theme .branch-fail {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.5);
}
html[data-theme="dark"] body.diagram-light-theme .branch-desc { color: var(--text-muted); }
html[data-theme="dark"] body.diagram-light-theme .output-node .node-title { color: var(--text-white); }
html[data-theme="dark"] body.diagram-light-theme .output-node .node-desc { color: var(--text-muted); }
/* 다크: TTS/이미지 출력 노드 — 라이트 배경 제거, 어두운 tint + 흰 텍스트 */
html[data-theme="dark"] body.diagram-light-theme .output-node {
    background: var(--bg-surface) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
html[data-theme="dark"] body.diagram-light-theme .output-branch-row .output-node:first-child {
    border-color: rgba(125, 211, 252, 0.5) !important;
    background: rgba(56, 189, 248, 0.12) !important;
}
html[data-theme="dark"] body.diagram-light-theme .output-branch-row .output-node:last-child {
    border-color: rgba(196, 181, 253, 0.5) !important;
    background: rgba(167, 139, 186, 0.15) !important;
}

/* diagram-5 compare-panel / token-code 다크 */
html[data-theme="dark"] body.diagram-light-theme .compare-panel.old {
    border-color: var(--border-light);
}
html[data-theme="dark"] body.diagram-light-theme .compare-panel.old .compare-panel-header {
    background: var(--bg-surface);
    color: var(--text-muted);
}
html[data-theme="dark"] body.diagram-light-theme .compare-panel.dnm .compare-panel-header {
    background: rgba(212,168,75,0.2);
    color: var(--primary);
}
html[data-theme="dark"] body.diagram-light-theme .compare-panel-body {
    background: var(--bg-card);
}
html[data-theme="dark"] body.diagram-light-theme .token-code {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-muted);
}
html[data-theme="dark"] body.diagram-light-theme .token-code.dnm-code {
    background: rgba(212,168,75,0.1);
    border-color: rgba(212,168,75,0.35);
    color: #fcd34d;
}
html[data-theme="dark"] body.diagram-light-theme .token-badge.high {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
html[data-theme="dark"] body.diagram-light-theme .token-badge.low {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* diagram-5 절감 강조 배너 다크 — 라이트 그린 제거 */
html[data-theme="dark"] body.diagram-light-theme .savings-banner {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}
html[data-theme="dark"] body.diagram-light-theme .savings-banner span:first-child {
    color: #86efac !important;
}
html[data-theme="dark"] body.diagram-light-theme .savings-banner span:last-child {
    color: var(--text-muted) !important;
}

/* diagram-5 window-box 다크 */
html[data-theme="dark"] body.diagram-light-theme .window-box.old-w {
    border-color: rgba(239, 68, 68, 0.4);
}
html[data-theme="dark"] body.diagram-light-theme .window-box.dnm-w {
    border-color: rgba(34, 197, 94, 0.4);
}
html[data-theme="dark"] body.diagram-light-theme .window-box.old-w .window-box-header {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}
html[data-theme="dark"] body.diagram-light-theme .window-box.dnm-w .window-box-header {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}
html[data-theme="dark"] body.diagram-light-theme .window-box-body {
    background: var(--bg-card);
}
html[data-theme="dark"] body.diagram-light-theme .bar-val--red   { color: #fca5a5; }
html[data-theme="dark"] body.diagram-light-theme .bar-val--good  { color: #86efac; }
html[data-theme="dark"] body.diagram-light-theme .bar-val--amber { color: var(--primary); }
html[data-theme="dark"] body.diagram-light-theme .window-total--bad  { color: #fca5a5; }
html[data-theme="dark"] body.diagram-light-theme .window-total--good { color: #86efac; }
html[data-theme="dark"] body.diagram-light-theme .window-sub { color: var(--text-muted); }
html[data-theme="dark"] body.diagram-light-theme .rolling-note {
    background: rgba(212, 168, 75, 0.1);
    border-color: rgba(212, 168, 75, 0.3);
}
html[data-theme="dark"] body.diagram-light-theme .rolling-note__title { color: var(--primary); }
html[data-theme="dark"] body.diagram-light-theme .rolling-note__body  { color: var(--text-muted); }

/* 구조도 페이지 테마 토글 공통 */
.diagram-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}
.diagram-page-header .back-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.diagram-theme-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-light, rgba(255,255,255,0.2));
    border-radius: 8px;
    background: var(--bg-surface, #38383a);
    color: var(--text-white, #f5f5f7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}
.diagram-theme-toggle:hover {
    background: var(--bg-hover, #48484a);
    border-color: var(--primary);
}
.diagram-theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.diagram-theme-toggle svg {
    width: 20px;
    height: 20px;
}
html[data-theme="light"] body.diagram-light-theme .diagram-theme-toggle {
    border-color: rgba(0,0,0,0.12);
    background: #fff;
    color: #1d1d1f;
}
html[data-theme="light"] body.diagram-light-theme .diagram-theme-toggle:hover {
    background: #f5f5f7;
    border-color: var(--primary);
}
.diagram-theme-toggle .theme-icon-light { display: none; }
.diagram-theme-toggle .theme-icon-dark { display: block; }
html[data-theme="light"] body.diagram-light-theme .diagram-theme-toggle .theme-icon-dark { display: none; }
html[data-theme="light"] body.diagram-light-theme .diagram-theme-toggle .theme-icon-light { display: block; }

/* diagram-5 step-card, 섹션 라벨 다크 */
html[data-theme="dark"] body.diagram-light-theme .step-card {
    background: var(--bg-card);
    border-color: var(--border-light);
}
html[data-theme="dark"] body.diagram-light-theme .step-card.active {
    border-color: var(--primary);
    background: rgba(212,168,75,0.12);
}
html[data-theme="dark"] body.diagram-light-theme .step-title { color: var(--text-white); }
html[data-theme="dark"] body.diagram-light-theme .step-desc { color: var(--text-muted); }
html[data-theme="dark"] body.diagram-light-theme .step-card .step-badge {
    background: var(--bg-surface);
    color: var(--text-muted);
}
html[data-theme="dark"] body.diagram-light-theme .step-card.active .step-badge {
    background: rgba(212,168,75,0.25);
    color: var(--primary);
}
html[data-theme="dark"] body.diagram-light-theme .sub-section-label,
html[data-theme="dark"] body.diagram-light-theme .diagram-section-desc { color: var(--text-muted); }
html[data-theme="dark"] body.diagram-light-theme .diagram-section-title { color: var(--text-white); }

/* diagram-5 saving-card 다크 */
html[data-theme="dark"] body.diagram-light-theme .saving-card {
    background: rgba(212, 168, 75, 0.1) !important;
    border-color: rgba(212, 168, 75, 0.4) !important;
}
html[data-theme="dark"] body.diagram-light-theme .saving-number {
    color: var(--primary) !important;
}
html[data-theme="dark"] body.diagram-light-theme .saving-label {
    color: var(--text-muted) !important;
}

/* diagram-5: 센서 활성화 매트릭스 표 — 다크모드에서 흰 배경 제거 */
body.diagram-light-theme .matrix-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #6e6e73;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
body.diagram-light-theme .matrix-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.diagram-light-theme .matrix-table {
    min-width: 620px;
}
html[data-theme="dark"] body.diagram-light-theme .matrix-title {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] body.diagram-light-theme .matrix-table th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-white, #f5f5f7) !important;
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}
html[data-theme="dark"] body.diagram-light-theme .matrix-table td {
    background: transparent !important;
    color: var(--text-gray, #cbd5e1) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] body.diagram-light-theme .matrix-table td[style*="font-weight:600"] {
    color: var(--text-white, #f5f5f7) !important;
}

html[data-theme="dark"] body.diagram-light-theme .tag-on {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #86efac !important;
}
html[data-theme="dark"] body.diagram-light-theme .tag-cond {
    background: rgba(212, 168, 75, 0.16) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] body.diagram-light-theme .tag-off {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted, #94a3b8) !important;
}

/* 모바일 — index .section-header / .section-body와 동일 여백 */
@media (max-width: 768px) {
    .diagram-section-header {
        padding: 32px var(--gutter-mobile, 20px) 28px;
    }
    .diagram-section-body {
        padding: 32px var(--gutter-mobile, 20px) 56px;
    }
}
@media (max-width: 480px) {
    .diagram-section-header {
        padding: 28px var(--gutter-mobile, 16px) 24px;
    }
    .diagram-section-body {
        padding: 24px var(--gutter-mobile, 16px) 48px;
    }
}