/* ============================================================
   Article inline SVG illustrations
   Markdown レンダラ (CommonMark + GFM) は <style>/<script>/<title>
   を escape する。属性スタイル + 外部 CSS で表現する設計。

   Phase 5.36 (2026-05-10): 視認性改善 - 暗背景上で読めなかった
   #707070 / #88aa88 / #888 系の dim grey を明るい色に置換。
   font-size は SVG レイアウトを壊さないため最大 +1〜2px の保守的な
   底上げに留める (Phase 5.37 で初版の overflow を是正)。
   ============================================================ */

.diag-svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    background: linear-gradient(180deg, rgba(0,30,15,0.55) 0%, rgba(0,15,8,0.85) 100%);
    border: 1px solid rgba(0,255,65,0.22);
    border-radius: 8px;
    padding: 0.75rem 1rem 1rem;
    box-shadow: 0 0 24px rgba(0,255,65,0.05) inset;
}

/* タイトル / セクションヘッダ */
.diag-svg .diag-title {
    fill: #00ff41;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.diag-svg .diag-subtitle {
    fill: #cfeacf;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-section-h {
    fill: #e0f5e0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-caption {
    fill: #b8d4b8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-anchor: middle;
    pointer-events: none;
}

/* 階層ツリー (DNS) */
.diag-svg .diag-tree-axis {
    stroke: rgba(180,220,200,0.55);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}
.diag-svg .diag-depth {
    fill: #d0d0d0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}
.diag-svg .diag-depth-sub {
    fill: #b0b0b0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    pointer-events: none;
}
.diag-svg .diag-node-rect {
    cursor: default;
    transition: filter 0.15s ease;
}
.diag-svg .diag-node-rect:hover {
    filter: brightness(1.4) drop-shadow(0 0 6px rgba(0,255,65,0.5));
}
.diag-svg .diag-node-text {
    fill: #0a0a0a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-op {
    fill: #b0dabe;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-anchor: middle;
    font-style: italic;
    pointer-events: none;
}
.diag-svg .diag-edge-label {
    fill: rgba(120,255,160,0.85);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-deleg {
    stroke: rgba(0,255,65,0.45);
    stroke-width: 1.2;
    stroke-dasharray: 4 3;
    fill: none;
}
.diag-svg .diag-fqdn-cell {
    cursor: default;
    transition: filter 0.15s ease;
}
.diag-svg .diag-fqdn-cell:hover {
    filter: brightness(1.5);
}
.diag-svg .diag-fqdn-label {
    fill: #f0f0f0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-fqdn-dot {
    fill: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-fqdn-dir {
    fill: #cfeacf;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-anchor: middle;
    pointer-events: none;
}

/* シーケンス図 */
.diag-svg .diag-actor-box {
    fill: rgba(0,80,160,0.35);
    stroke: #4a9eff;
    stroke-width: 1.5;
    transition: fill 0.15s ease, filter 0.15s ease;
}
.diag-svg .diag-actor-box:hover {
    fill: rgba(0,120,220,0.55);
    filter: drop-shadow(0 0 8px rgba(74,158,255,0.45));
}
.diag-svg .diag-actor-label {
    fill: #f0f0f0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-actor-sub {
    fill: #c8dceb;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-lifeline {
    stroke: rgba(180,220,200,0.65);
    stroke-width: 1.2;
    stroke-dasharray: 5 4;
}
.diag-svg .diag-step-circle {
    fill: #00ff41;
    stroke: #00aa30;
    stroke-width: 1;
}
.diag-svg .diag-step-circle.referral {
    fill: #66ddff;
    stroke: #2080a0;
}
.diag-svg .diag-step-circle.answer {
    fill: #ff66cc;
    stroke: #a02070;
}
.diag-svg .diag-step-num {
    fill: #0a0a0a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-msg-arrow {
    stroke: #00ff41;
    stroke-width: 2;
    fill: none;
}
.diag-svg .diag-msg-arrow.referral {
    stroke: #66ddff;
    stroke-dasharray: 5 3;
}
.diag-svg .diag-msg-arrow.answer {
    stroke: #ff66cc;
    stroke-width: 2.5;
}
.diag-svg .diag-msg-label {
    fill: #e8f5e8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    pointer-events: none;
}
.diag-svg .diag-msg-label.referral {
    fill: #c8e8f8;
}
.diag-svg .diag-msg-label.answer {
    fill: #ffd0ec;
}
.diag-svg .diag-msg-detail {
    fill: #c8e0c8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-cache-box {
    fill: rgba(255,200,80,0.18);
    stroke: #ffc850;
    stroke-width: 1.2;
    stroke-dasharray: 3 2;
}
.diag-svg .diag-cache-text {
    fill: #ffd980;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-legend-box {
    fill: rgba(255,255,255,0.04);
    stroke: rgba(255,255,255,0.18);
    stroke-width: 1;
}
.diag-svg .diag-legend-text {
    fill: #d8d8d8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    pointer-events: none;
}

/* メッセージ構造 (DNS パケット) */
.diag-svg .diag-byte-ruler {
    stroke: rgba(255,255,255,0.35);
    stroke-width: 0.8;
}
.diag-svg .diag-byte-tick-label {
    fill: #b8b8b8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-field-cell {
    fill: rgba(255,200,80,0.12);
    stroke: rgba(255,200,80,0.6);
    stroke-width: 1;
    transition: fill 0.15s ease;
}
.diag-svg .diag-field-cell:hover { fill: rgba(255,200,80,0.32); }
.diag-svg .diag-field-name {
    fill: #ffd980;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-field-size {
    fill: #e0c088;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-flag-bit {
    fill: rgba(102,221,255,0.18);
    stroke: #66ddff;
    stroke-width: 1;
    transition: fill 0.15s ease;
}
.diag-svg .diag-flag-bit:hover { fill: rgba(102,221,255,0.45); }
.diag-svg .diag-flag-bit.disabled {
    fill: rgba(120,120,120,0.12);
    stroke: rgba(120,120,120,0.5);
}
.diag-svg .diag-flag-name {
    fill: #c8e8f8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-flag-name.disabled { fill: #909090; }
.diag-svg .diag-flag-bit-label {
    fill: #d8e0e8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-anchor: middle;
    pointer-events: none;
}
.diag-svg .diag-pkt-section {
    fill: rgba(0,255,65,0.10);
    stroke: rgba(0,255,65,0.55);
    stroke-width: 1.2;
    transition: fill 0.15s ease;
}
.diag-svg .diag-pkt-section:hover { fill: rgba(0,255,65,0.22); }
.diag-svg .diag-section-title {
    fill: #00ff41;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-section-detail {
    fill: #c8e0c8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-section-side {
    fill: #e0c088;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-anchor: end;
    dominant-baseline: middle;
    pointer-events: none;
}
.diag-svg .diag-pkt-divider {
    stroke: rgba(180,220,200,0.55);
    stroke-width: 0.8;
    stroke-dasharray: 3 4;
}

/* レガシー (Phase 5.15 互換、別記事で使い続ける可能性あり) */
.diag-svg .diag-bg { fill: transparent; }
.diag-svg .diag-node {
    fill: rgba(0, 255, 65, 0.08);
    stroke: #00ff41;
    stroke-width: 1.5;
    transition: fill 0.2s ease, stroke-width 0.2s ease;
}
.diag-svg .diag-node:hover { fill: rgba(0,255,65,0.25); stroke-width: 2.5; }
.diag-svg .diag-node-label {
    fill: #e8e8e8; font-family: 'JetBrains Mono', monospace;
    font-size: 13px; text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.diag-svg .diag-node.root  { stroke: #ffcc66; fill: rgba(255,204,102,0.1); }
.diag-svg .diag-node.tld   { stroke: #66ddff; fill: rgba(102,221,255,0.1); }
.diag-svg .diag-node.zone  { stroke: #99ff99; fill: rgba(153,255,153,0.1); }
.diag-svg .diag-node.host  { stroke: #ff9999; fill: rgba(255,153,153,0.1); }
.diag-svg .diag-edge { stroke: rgba(0,255,65,0.5); stroke-width: 1.5; fill: none; }
.diag-svg .diag-arrow-label {
    fill: #c8e0c8; font-family: 'JetBrains Mono', monospace;
    font-size: 12px; pointer-events: none;
}
.diag-svg .diag-actor {
    fill: rgba(0,100,200,0.15); stroke: #4a9eff; stroke-width: 1.5;
    transition: fill 0.2s ease;
}
.diag-svg .diag-actor:hover { fill: rgba(0,100,200,0.35); }
.diag-svg .diag-section {
    fill: rgba(0,255,65,0.05); stroke: rgba(0,255,65,0.4); stroke-width: 1;
    transition: fill 0.2s ease;
}
.diag-svg .diag-section:hover { fill: rgba(0,255,65,0.18); }