/* v9-figures.css — 段 3b「記事の説明図」(2026-10-11、docs/loop-20261006/design-20261011.md 案 B、DESIGN.md §12)。
   includes/v9-figures.php が本文の印 <!-- wp:stnv9-fig/id /--> から描いた figure.stnv9-fig の見た目。画像なし(CSS と SVG だけ)。
   型は 3 つ: (a) 時間軸図 .stnv9-fig--timeline / --band、(b) 分岐図 .stnv9-fig--fork / --route、(c) 総額/内訳図 .stnv9-fig--total(SVG は stnv3-dg)。
   線は紺青(--stnv2-navy)、確認先・遅れる時間帯は amber、割引・当日中は green(DESIGN §2 の色の意味のまま)。!important は使わない。
   セレクタは body .wp-block-post-content から書く(記事本文の p/li の 17px の規則より強くするため)。v4.css の段落下余白と行間は変数(--stnv4-pm / --stnv4-lh)で詰める。
   読み込み: stn_v9_fig_enqueue()(マーカーを含む投稿ページだけ。v3-diagrams / v9-route の後)。 */

body .wp-block-post-content .stnv9-fig{--stnv4-pm:0px;--stnv4-lh:1.55;--stnv9f-navy:var(--stnv2-navy,#0b2545);--stnv9f-ink:var(--stnv2-ink,#102033);--stnv9f-muted:var(--stnv2-muted-strong,#526579);--stnv9f-line:var(--stnv2-line,#dbe7f3);--stnv9f-green:var(--stnv2-green-text,#0e7d51);--stnv9f-amber:var(--stnv2-amber,#b45309);--stnv9f-soft:var(--stnv2-soft,#f4f8fc);
  box-sizing:border-box;max-width:760px;margin:16px 0 20px;padding:14px 14px 12px;border:1px solid var(--stnv9f-line);border-radius:12px;background:var(--stnv2-white,#fff);color:var(--stnv9f-ink);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
body .wp-block-post-content .stnv9-fig *{box-sizing:border-box}
body .wp-block-post-content .stnv9-fig :is(p,ul,ol,li){max-width:none;margin:0;padding:0;list-style:none;font-size:inherit;line-height:inherit}
body .wp-block-post-content .stnv9-fig li::marker{content:none}
body .wp-block-post-content .stnv9-fig .stnv9-fig__title,body .wp-block-post-content .stnv9-fig .stnv9-fig__label{font-weight:700;color:var(--stnv9f-navy);line-height:1.45}
body .wp-block-post-content .stnv9-fig .stnv9-fig__label{margin:0 0 6px;font-size:14px}
body .wp-block-post-content .stnv9-fig .stnv9-fig__row + .stnv9-fig__row{margin-top:16px;padding-top:14px;border-top:1px solid var(--stnv9f-line)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__note,body .wp-block-post-content .stnv9-fig .stnv9-fig__rnote{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--stnv9f-muted)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__rnote{margin-top:6px}

/* ---------- (a) 時間軸図: 横の線に点 ----------
   3 段のグリッド(上 = いつ、中 = 線と点と間の文字、下 = 何が起きるか)。点は列の中央、線は最初の点から最後の点まで。 */
body .wp-block-post-content .stnv9-fig .stnv9-fig__tl{display:grid;grid-template-columns:repeat(var(--stnv9-n,3),minmax(0,1fr));grid-template-rows:auto minmax(34px,auto) auto;column-gap:0;align-items:center}
body .wp-block-post-content .stnv9-fig .stnv9-fig__line{grid-row:2;grid-column:1 / -1;align-self:center;height:3px;margin:0 calc(50% / var(--stnv9-n,3));background:var(--stnv9f-navy);border-radius:2px}
body .wp-block-post-content .stnv9-fig .stnv9-fig__pt{grid-row:2;justify-self:center;position:relative;z-index:1;width:18px;height:18px;border:3px solid var(--stnv9f-navy);border-radius:50%;background:var(--stnv2-white,#fff)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__pt--end{background:var(--stnv9f-navy);box-shadow:inset 0 0 0 3px var(--stnv2-white,#fff)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__when{grid-row:1;align-self:end;padding:0 4px 6px;font-family:var(--stnv2-font-num,sans-serif);font-size:15px;font-weight:700;line-height:1.35;text-align:center;color:var(--stnv9f-navy);font-variant-numeric:tabular-nums}
body .wp-block-post-content .stnv9-fig .stnv9-fig__nb{display:inline-block;white-space:nowrap}
body .wp-block-post-content .stnv9-fig .stnv9-fig__what{grid-row:3;align-self:start;padding:6px 4px 0;font-size:14px;line-height:1.5;text-align:center}
body .wp-block-post-content .stnv9-fig .stnv9-fig__gap{grid-row:2;justify-self:center;position:relative;z-index:2;max-width:calc(50% - 22px);padding:2px 6px;border:1px solid var(--stnv9f-line);border-radius:8px;background:var(--stnv2-white,#fff);font-size:12.5px;font-weight:700;line-height:1.4;text-align:center;color:var(--stnv9f-navy)}

/* ---------- (a) 時間軸図: 帯(長さは時刻・期間の比) ---------- */
body .wp-block-post-content .stnv9-fig .stnv9-fig__band{display:flex;height:14px;overflow:hidden;border-radius:7px;background:var(--stnv9f-soft)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__seg{flex-basis:0;min-width:2px}
body .wp-block-post-content .stnv9-fig .stnv9-fig__seg--ok{background:var(--stnv9f-green)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__seg--late{background:var(--stnv9f-amber)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__seg--base{background:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__seg--none{background:transparent}
body .wp-block-post-content .stnv9-fig .stnv9-fig__ticks{position:relative;height:20px;margin-top:2px;font-family:var(--stnv2-font-num,sans-serif);font-size:12.5px;font-weight:700;line-height:20px;color:var(--stnv9f-muted);font-variant-numeric:tabular-nums}
body .wp-block-post-content .stnv9-fig .stnv9-fig__tick{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
body .wp-block-post-content .stnv9-fig .stnv9-fig__tick--start{transform:none}
body .wp-block-post-content .stnv9-fig .stnv9-fig__tick--end{transform:translateX(-100%)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__legend{margin:6px 0 0;padding:0}
body .wp-block-post-content .stnv9-fig .stnv9-fig__key{position:relative;padding-left:18px;font-size:14px;line-height:1.55}
body .wp-block-post-content .stnv9-fig .stnv9-fig__key + .stnv9-fig__key{margin-top:2px}
body .wp-block-post-content .stnv9-fig .stnv9-fig__key::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;border-radius:3px;background:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__key--ok::before{background:var(--stnv9f-green)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__key--late::before{background:var(--stnv9f-amber)}

/* ---------- (b) 分岐図: 問いから枝(幹は紺青、枝の色は結果の意味) ---------- */
body .wp-block-post-content .stnv9-fig .stnv9-fig__root{position:relative;min-height:26px;padding:1px 0 8px 36px;font-weight:700;line-height:1.5;color:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__root::before{content:"";position:absolute;left:3px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__root::after{content:"";position:absolute;left:11.5px;top:12px;bottom:0;width:3px;background:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__forks{position:relative;margin:0;padding:0}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork{--stnv9f-tone:var(--stnv9f-muted);position:relative;padding:0 0 12px 40px}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork:last-child{padding-bottom:0}
/* 幹(この枝の上端から次の枝まで。最後の枝は自分の枝の高さまで) */
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork::before{content:"";position:absolute;left:11.5px;top:0;bottom:0;width:3px;background:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork:last-child::before{bottom:auto;height:21px}
/* 枝(幹 → 項目) */
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork::after{content:"";position:absolute;left:14px;top:11px;width:20px;height:2px;background:var(--stnv9f-tone)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork--ok{--stnv9f-tone:var(--stnv9f-green)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork--ng,body .wp-block-post-content .stnv9-fig .stnv9-fig__fork--warn{--stnv9f-tone:var(--stnv9f-amber)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork-label{display:block;font-weight:700;line-height:1.5}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork-result{display:block;font-size:14px;line-height:1.55;color:var(--stnv9f-tone)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__fork--muted .stnv9-fig__fork-result{color:var(--stnv9f-muted)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__sub{--stnv9f-tone:var(--stnv9f-muted);margin-top:6px;padding:2px 0 2px 12px;border-left:2px solid var(--stnv9f-tone)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__sub--ok{--stnv9f-tone:var(--stnv9f-green)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__sub--ng,body .wp-block-post-content .stnv9-fig .stnv9-fig__sub--warn{--stnv9f-tone:var(--stnv9f-amber)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__sub .stnv9-fig__fork-label{font-size:14px}

/* ---------- (b) 分岐図: 路線(駅と、駅から出る確認先の枝。v9-route.css と同じ寸法) ---------- */
body .wp-block-post-content .stnv9-fig .stnv9-fig__route{--stnv9f-dot:22px;--stnv9f-pad:36px;margin:0;padding:0}
body .wp-block-post-content .stnv9-fig .stnv9-fig__stn{position:relative;padding:0 0 16px var(--stnv9f-pad);line-height:1.6}
body .wp-block-post-content .stnv9-fig .stnv9-fig__stn::before{content:"";position:absolute;z-index:1;left:0;top:1px;width:var(--stnv9f-dot);height:var(--stnv9f-dot);border:3px solid var(--stnv9f-navy);border-radius:50%;background:var(--stnv2-white,#fff)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__stn::after{content:"";position:absolute;left:calc(var(--stnv9f-dot) / 2 - 1.5px);top:12px;bottom:-13px;width:3px;background:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__stn:last-child{padding-bottom:0}
body .wp-block-post-content .stnv9-fig .stnv9-fig__stn:last-child::after{content:none}
body .wp-block-post-content .stnv9-fig .stnv9-fig__stn--end::before{background:var(--stnv9f-navy);box-shadow:inset 0 0 0 3px var(--stnv2-white,#fff)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__no{margin-right:4px;font-weight:700;color:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__stn-text{font-weight:700}
body .wp-block-post-content .stnv9-fig .stnv9-fig__branch{position:relative;margin-top:6px;padding:3px 0 3px 12px;border-left:2px solid var(--stnv9f-amber);font-size:14px;line-height:1.55}
body .wp-block-post-content .stnv9-fig .stnv9-fig__branch::before{content:"";position:absolute;left:calc(var(--stnv9f-dot) / 2 + 1.5px - var(--stnv9f-pad) - 2px);top:-2px;width:calc(var(--stnv9f-pad) - var(--stnv9f-dot) / 2 - 1.5px);height:2px;background:var(--stnv9f-amber)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__branch-label{display:block;font-weight:700;color:var(--stnv2-amber-text,#9a3f05)}

/* ---------- (c) 総額/内訳図(stnv3-dg の SVG。棒の色だけここで) ---------- */
body .wp-block-post-content .stnv9-fig--total .stnv3-dg__svg{max-width:460px}
body .wp-block-post-content .stnv9-fig .stnv9-fig__bar--base,body .wp-block-post-content .stnv9-fig .stnv9-fig__bar--total{fill:var(--stnv9f-navy)}
body .wp-block-post-content .stnv9-fig .stnv9-fig__bar--minus{fill:var(--stnv9f-green)}
body .wp-block-post-content .stnv9-fig.stnv3-dg{margin:16px 0 20px;padding:14px 14px 12px}

@media (max-width:359px){
  body .wp-block-post-content .stnv9-fig{padding:12px 10px 10px}
  body .wp-block-post-content .stnv9-fig .stnv9-fig__when{font-size:14px}
  body .wp-block-post-content .stnv9-fig .stnv9-fig__what{font-size:13px}
  body .wp-block-post-content .stnv9-fig .stnv9-fig__gap{font-size:12px;padding:2px 4px}
}