/* コラムの図（2026-10-25 サイト全体改善 14章「コラム図解ルール」）
   1記事1〜3図。図は本文の理解のために置き、装飾には使わない。中身は記事内の実物の事実だけ。
   文字はすべて HTML のテキスト（選択・読み上げできる）。画像やSVGの中に文字を焼き込まない。
   他媒体（X / note / Instagram / スライド / メルマガ）へは ai-team-personal/scripts/column_figure_export.py で
   figure 要素だけを PNG に書き出して使う。色・角丸は page.css の変数を使う（見た目の手本は pebblemint の dg-*）。

   書式は1つ。<figure class="article-figure"> の先頭に <figcaption class="af-title">、中身は次のどちらか:
     流れ（data-figure="flow"）: <ol class="af-steps"> に <li class="af-step"> を2〜6段。最後の段に af-now を付けると「現在のルール」の強調
     並び（data-figure="list"）: 流れと同じ中身で、段の間に矢印を出さない。順番の無い項目（型・種類・パターンの列挙）に使う
     対比（data-figure="compare"）: <div class="af-cols"> に <div class="af-col af-before|af-after"> を2つ
   必要なら最後に <p class="af-note">（値の性質の断り。例「自分の環境で数えた値です」）。
   390px 幅では縦並び、文字は12px以上。 */

.article-body > figure.article-figure,
figure.article-figure {
  margin: 36px 0 40px;
  padding: 20px 20px 18px;
  background: var(--bg-soft, #f5f7fa);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--r-md, 12px);
}
.article-figure .af-title {
  margin: 0 0 14px;
  font-size: 15px; font-weight: 800; line-height: 1.55;
  color: var(--ink, #0a0a0a);
}

/* ── 流れ：上から下へ。段の間は矢印（文字でなく線で描く＝読み上げに混ざらない） ── */
.article-figure .af-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.article-figure .af-step {
  position: relative;
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--r-md, 12px);
}
.article-figure .af-step:not(:last-child)::after {
  content: "";
  position: absolute; left: 50%; bottom: -16px;
  transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--accent, #1a73e8);
}
/* 並び：順番の無い列挙なので矢印を出さない */
.article-figure[data-figure="list"] .af-steps { gap: 10px; }
.article-figure[data-figure="list"] .af-step::after { content: none; }
.article-figure .af-step.af-now { border-color: var(--accent, #1a73e8); background: var(--accent-soft, #e6f0fd); }
.article-figure .af-k {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.5;
  color: var(--accent-dark, #1558b8);
}
.article-figure .af-v {
  display: block;
  margin-top: 3px;
  font-size: 14.5px; line-height: 1.7;
  color: var(--ink-2, #2a2a2a);
}
.article-figure .af-v b { color: var(--ink, #0a0a0a); font-weight: 700; }

/* ── 対比：PC は左右、スマホは上下 ── */
.article-figure .af-cols { display: grid; gap: 12px; }
@media (min-width: 640px) { .article-figure .af-cols { grid-template-columns: 1fr 1fr; } }
.article-figure .af-col { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: var(--r-md, 12px); overflow: hidden; }
.article-figure .af-col-hd { margin: 0; padding: 9px 14px; font-size: 14px; font-weight: 800; line-height: 1.5; color: #fff; }
.article-figure .af-before .af-col-hd { background: var(--ink-3, #64748b); }
.article-figure .af-after .af-col-hd { background: var(--accent, #1a73e8); }
.article-figure .af-list { list-style: none; margin: 0; padding: 4px 14px 8px; }
.article-figure .af-list li {
  margin: 0; padding: 8px 0;
  font-size: 14px; line-height: 1.65; color: var(--ink-2, #2a2a2a);
  border-bottom: 1px solid var(--line-2, #edf1f7);
}
.article-figure .af-list li:last-child { border-bottom: 0; }

.article-figure .af-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3, #64748b); }

@media (max-width: 640px) {
  .article-body > figure.article-figure, figure.article-figure { padding: 16px 14px 14px; margin: 28px 0 32px; }
  .article-figure .af-v { font-size: 14px; }
}