/* assets/css/components/svg-diagram.css
 *
 * CryptoDepth SVG spec v0.3（2025-11-29）

/* ----------------------------------------
 * ベース：図解SVGそのもの
 * ------------------------------------- */

@layer comp {

  /* 記事カラム幅にフィットさせる */
  svg.cd-diagram {
    width: 100%;
    height: auto;
    display: block;
  }

  /* テキストのベース設定
   * - フォントファミリと基本色だけここで決める
   * - 各SVG内で <g class="svg-root"> を1つ作り、
   *   その中の text / tspan に fs-XX, fw-XXX を指定して使う
   */
  svg.cd-diagram .svg-root {
    font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
    fill: #0b3b5a;
  }

  /* ----------------------------------------
   * フォントサイズユーティリティ
   * （viewBox "0 0 760 XXX" 前提）
   * ------------------------------------- */

  /* キャプション・脚注（最小サイズ。重要情報には使わない） */
  svg.cd-diagram .fs-14 { font-size: 14px; }

  /* 補足ラベル／やや細かい説明 */
  svg.cd-diagram .fs-16 { font-size: 16px; }

  /* ラベルの基本サイズ。矢印のテキストなどに推奨 */
  svg.cd-diagram .fs-18 { font-size: 18px; }

  /* サブ見出し・ノード名（円やボックスのラベル） */
  svg.cd-diagram .fs-22 { font-size: 22px; }

  /* パネルやカードのタイトル */
  svg.cd-diagram .fs-26 { font-size: 26px; }

  /* 図全体のタイトル（小さめ） */
  svg.cd-diagram .fs-30 { font-size: 30px; }

  /* 図全体のタイトル（目立たせたいとき） */
  svg.cd-diagram .fs-36 { font-size: 36px; }

  /* 強調数値（「約300円」「数 倍」など） */
  svg.cd-diagram .fs-56 { font-size: 56px; }

  /* ----------------------------------------
   * フォントウェイト・揃え
   * ------------------------------------- */

  svg.cd-diagram .fw-400 { font-weight: 400; }
  svg.cd-diagram .fw-500 { font-weight: 500; }
  svg.cd-diagram .fw-600 { font-weight: 600; }
  svg.cd-diagram .fw-700 { font-weight: 700; }
  svg.cd-diagram .fw-800 { font-weight: 800; }

  svg.cd-diagram .ta-start  { text-anchor: start; }
  svg.cd-diagram .ta-middle { text-anchor: middle; }
  svg.cd-diagram .ta-end    { text-anchor: end; }

  /* ----------------------------------------
   * パネル系ユーティリティ
   * ------------------------------------- */

  /* 標準の白パネル（カード・ボード用） */
  svg.cd-diagram .panel-soft {
    fill: #ffffff;
    stroke: #c4dff2;
    stroke-width: 1.5;
  }

  /* 背景を少し強調したパネル（強調エリア用） */
  svg.cd-diagram .panel-accent {
    fill: #e4f3ff;
    stroke: #9ec6e8;
    stroke-width: 1.5;
  }

  /* キャプションや補足テキスト用（色を少し抑える） */
  svg.cd-diagram .text-muted {
    fill: #5c7284;
  }

}