@charset "UTF-8";
/* =============================================================================
   StyleDoc — 拡張デザインパーツ集（雑誌的ドキュメント部品 ~80 種の追加分）
   すべて core.css のトークン参照（色=カラートークン / 形=デザイントークン）で、
   カラーテーマ・デザインテーマに追従。core.css と併せて読み込む。
   ============================================================================= */

/* ============================ A. 見出し =================================== */
/* ★見出しの形は --h-<種>-* トークン経由（カスタムデザインテーマが差し替える）。既定＝従来の値。 */
.title-impact{ display:inline-block; background:var(--h-imp-bg, var(--accent)); color:var(--h-imp-color, var(--on-accent,#fff)); font-weight:var(--h-imp-weight, var(--head-weight));
  font-family:"SDX Yen",var(--h-imp-font, var(--font-head)); font-size:calc(var(--font-base) * var(--h-imp-size, 1.18) * var(--scale) * var(--fs-mul, 1));
  padding:var(--h-imp-pad-y, 6px) var(--h-imp-pad-x, 16px); border-radius:var(--h-imp-radius, var(--radius-sm)); margin:0 0 calc(var(--gap-head, 10px) * var(--h-imp-mb, 1)); }
.title-sub{ font-family:"SDX Yen",var(--h-sub-font, var(--font-head)); color:var(--h-sub-color, var(--accent-ink)); font-weight:var(--h-sub-weight, var(--head-weight));
  font-size:calc(var(--font-base) * var(--h-sub-size, 1.3) * var(--scale) * var(--fs-mul, 1)); margin:0 0 calc(var(--gap-head, 10px) * var(--h-sub-mb, 1)); line-height:var(--h-sub-lh, 1.3); }
.title-sub small{ display:block; font-size:.5em; letter-spacing:.18em; color:var(--muted); font-weight:600; margin-top:2px; }
/* 帯見出し。地・文字・左線をトークンにして、編集画面から選択／自由色で指定できるようにした。
   ★プリセットは**この要素自身**に変数を置く。編集画面のカスタム色は inline style に書かれ、
     同じ要素の class より優先されるので「カスタム色があればそちらが勝つ」になる（バッジと同じ流儀）。
   「なし」は地を透明にするだけで**左線と文字色は残す**＝見出しの目印を失わない。
   左線も消したいときは rb-plain（ただの太字見出しになる）。 */
.title-ribbon{ background:var(--rb-bg, var(--h-rb-bg, var(--accent-soft))); color:var(--rb-fg, var(--h-rb-fg, var(--accent-ink)));
  font-family:"SDX Yen",var(--h-rb-font, var(--font-head));
  font-weight:var(--h-rb-weight, var(--head-weight)); font-size:calc(var(--font-base) * var(--h-rb-size, 1.12) * var(--scale) * var(--fs-mul, 1));
  padding:var(--h-rb-pad-y, 8px) var(--h-rb-pad-x, 16px); border-left:var(--h-rb-bar-w, 5px) solid var(--rb-line, var(--h-rb-bar-c, var(--accent)));
  border-radius:var(--h-rb-radius, 0 var(--radius-sm) var(--radius-sm) 0); margin:0 0 calc(var(--gap-head, 10px) * var(--h-rb-mb, 1.2)); }
.title-ribbon.rb-accent{ --rb-bg:var(--accent); --rb-fg:var(--on-accent,#fff); }
.title-ribbon.rb-surface{ --rb-bg:var(--surface-2); }
.title-ribbon.rb-none{ --rb-bg:transparent; }
.title-ribbon.rb-plain{ --rb-bg:transparent; border-left:0; border-radius:0; padding-left:0; }
.kicker{ display:inline-block; font-size:calc(var(--h-kick-fs, .74em) * var(--fs-mul, 1)); font-weight:var(--h-kick-weight, 700); letter-spacing:var(--h-kick-tracking, .14em);
  color:var(--h-kick-color, var(--accent-ink)); background:var(--h-kick-bg, var(--accent-soft)); padding:var(--h-kick-pad-y, 3px) var(--h-kick-pad-x, 9px); border-radius:var(--h-kick-radius, 6px); margin:0 0 calc(var(--gap-head, 10px) * var(--h-kick-mb, .8)); }
/* 札（アピール見出し・キッカー）の「文字の寄せ」。
   ★この2つは **文字の長さぶんだけ塗る札**＝`inline-block` なので、自分に `text-align` を付けても
     **位置は動かない**（inline-block の置き場所は親の text-align が決めるため）。
     寄せを指定したときだけ「中身に縮むブロック」に変え、左右マージンの auto で寄せる。
   ★指定が無いときは従来どおり inline-block のまま＝**既存の文書は1バイトも変わらない**。
   ★縦書きの器の中は styledocx-doc.css が論理指定（margin-inline）で受け持つ。 */
.title-impact:is(.u-left,.u-center,.u-right),
.kicker:is(.u-left,.u-center,.u-right){ display:block; width:fit-content; }
.title-impact.u-left, .kicker.u-left{ margin-left:0; margin-right:auto; }
.title-impact.u-center, .kicker.u-center{ margin-left:auto; margin-right:auto; }
.title-impact.u-right, .kicker.u-right{ margin-left:auto; margin-right:0; }
/* アピール見出しを**器の幅いっぱい**に塗る（既定は文字の長さぶん）。帯のような見出しにしたいとき。
   ★上の寄せ規則より**後ろ**に置く＝同じ詳細度(0,2,0)で後勝ち。寄せ（u-center 等）と併用すると
     `width:fit-content` と `margin:auto` をここで打ち消し、残った `text-align`（parts.css の .u-*）が
     効いて**帯の中で文字が寄る**。つまり「幅いっぱい＋中央寄せ」が素直に書ける。
   ★キッカーには付けない＝小さな分類ラベルなので、幅いっぱいにする意味がない。 */
.title-impact.imp-full{ display:block; width:auto; margin-left:0; margin-right:0; }
/* 見出し＋本文枠。既定は「左に見出し列・右に本文」の横並び。ta-bar / ta-bar-soft を足すと
   「上が見出しの帯・下が本文」の縦並びになる。本文(.ta-b)の中にはふつうのパーツを置け、
   この枠自体を入れ子にもできる（枠の中に枠）。 */
.title-article{ display:grid; grid-template-columns:var(--p-ta-col-w, 160px) 1fr; border:var(--p-ta-bd-w, var(--rule-weight)) var(--p-ta-bd-style, var(--rule-style)) var(--p-ta-bd-c, var(--line));
  border-radius:var(--p-ta-radius, var(--radius-sm)); overflow:hidden; }
/* 見出し部分の地・文字は **枠とは別に**指定できる（--tah-bg / --tah-fg）。
   ★変数は**枠（親）側**に置く。編集画面のカスタム色は枠の inline style に書かれ、
     プリセットのクラスも枠に付くので、同じ要素どうしで inline が勝つ＝カスタム色が優先される。
     （変数を .ta-h 側に直接置くと、子で定義した値が親からの継承に勝ってしまいカスタム色が効かない） */
/* ★`align-items:center` だけにしない。見出しは素のテキストなので、装飾を足すと
   「文字」と「装飾」が**別のアイテム**になり、それぞれが独立して中央に揃うため
   **背の高い装飾のぶんだけ行内で段差**ができる（実測 4px。Q&A・フォルダツリーと同じ機構）。
   `align-items:baseline` で**文字どうしの下端をそろえ**、`flex-wrap:wrap` ＋ `align-content:center`
   で**まとまりとして縦中央**に置く（従来の見た目＝縦中央は保ったまま段差だけ消える）。 */
.title-article > .ta-h{ background:var(--tah-bg, var(--p-ta-t-bg, var(--accent-soft))); color:var(--tah-fg, var(--p-ta-t-fg, var(--accent-ink))); font-weight:var(--p-ta-t-weight, 700);
  padding:var(--p-ta-t-pad, var(--pad-panel)); display:flex; flex-wrap:wrap; align-content:center; align-items:baseline; }
/* ★プリセットは地と文字を**必ずセット**で決める。地だけ変えると、帯（.ta-bar）のときに
   文字色が既定の白のまま残り、薄い地に白文字＝読めない組み合わせができる（実測で踏んだ）。 */
.title-article.tah-accent{ --tah-bg:var(--accent); --tah-fg:var(--on-accent,#fff); }
.title-article.tah-surface{ --tah-bg:var(--surface-2); --tah-fg:var(--accent-ink); }
.title-article.tah-none{ --tah-bg:transparent; --tah-fg:var(--accent-ink); }
.title-article > .ta-b{ padding:var(--pad-panel); }
.title-article > .ta-b > :first-child{ margin-top:0; } .title-article > .ta-b > :last-child{ margin-bottom:0; }
/* 帯（縦並び）: 見出しを上の帯にする。grid をやめて block にするだけで、中身の指定は共通のまま使える。
   帯は本文より詰めた余白にして「見出しの帯」に見せる（--pad-panel だと帯が厚くなりすぎる）。
   ta-bar＝アクセント地に白文字（枠線もアクセント色）／ta-bar-soft＝淡色地のまま（既定の配色）。 */
.title-article:is(.ta-bar,.ta-bar-soft){ display:block; }
.title-article:is(.ta-bar,.ta-bar-soft) > .ta-h{ padding:6px 12px; }
.title-article.ta-bar{ border-color:var(--accent); }
/* 帯のときの既定を濃色にする。--tah-* を指定していればそちらが勝つ（左列でも帯でも同じ指定が効く）。 */
.title-article.ta-bar > .ta-h{ background:var(--tah-bg, var(--accent)); color:var(--tah-fg, var(--on-accent,#fff)); }
@media (max-width:640px){ .title-article{ grid-template-columns:1fr; } }

/* ============================ B. テキスト ================================= */
.blockquote{ border-left:4px solid var(--accent); background:var(--surface-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:12px 18px; margin:0; color:var(--ink); }
.blockquote .cite{ display:block; margin-top:6px; font-size:.85em; color:var(--muted); }
.blockquote q,.blockquote p{ font-style:italic; }
.dropcap > p:first-of-type::first-letter{ float:left; font-family:"SDX Yen",var(--font-head); font-weight:800;
  font-size:3.1em; line-height:.82; padding:4px 10px 0 0; color:var(--accent-ink); }
.footnote{ border-top:var(--rule-weight) var(--rule-style) var(--line); margin-top:var(--block-gap);
  padding-top:8px; font-size:.82em; color:var(--muted); }
.footnote sup{ color:var(--accent-ink); font-weight:700; }
/* 等幅フォントは和文等幅を先頭に置く。U+005C（\）の字形が Consolas / Courier New では
   「\」、BIZ UDGothic / MS Gothic では「¥」になるため、日本語文書では円マークで表示させる
   （BIZ UDGothic は等幅かつ ¥ 字形＝実測。半角=全角の1/2で桁揃えも保たれる）。 */
.kbd{ font-family:"SDX Yen","BIZ UDGothic","MS Gothic",Consolas,"SFMono-Regular",monospace; font-size:.85em; background:var(--surface-2);
  border:var(--rule-weight) var(--rule-style) var(--line); border-bottom-width:2px;
  border-radius:5px; padding:1px 7px; }
.code-inline{ font-family:"SDX Yen","BIZ UDGothic","MS Gothic",Consolas,monospace; font-size:.9em; background:color-mix(in srgb,var(--ink) 6%,transparent);
  padding:1px 5px; border-radius:4px; }
.term-list{ display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; }
.term-list > dt{ font-weight:700; color:var(--accent-ink); }
.term-list > dd{ margin:0; color:var(--ink); }

/* ---------------------------------------------------------------------------
   2カラムリスト（ラベル＋内容）— 更新履歴・仕様一覧・用語説明など
   左に短いラベル（日付・項目名）、右に本文。**右側にはふつうのパーツを置ける**のが
   用語リスト（dt/dd の素のテキスト）との違い。

   ★display:table を使う理由: 行をまたいで**列幅がそろい**、かつ**セルに罫線を引ける**ため。
     grid だと行ごとに列幅が決まって「内容に合わせる」がそろわず、`display:contents` で
     そろえると行の箱が消えて罫線が引けない。subgrid は対応ブラウザを選ぶ。
   ・左幅は --dl-k。既定は 1px（＝表レイアウトの「内容ぶんだけ」）＋ nowrap で1行に保つ。
     幅を指定したとき（クラス dl-w* / インラインの --dl-k）は折り返しを戻す。
     ※和文は既定で任意位置折り返し（.page の overflow-wrap:anywhere）なので、
       内容に合わせるモードでは nowrap が無いと1文字ずつ折り返してしまう。
   ・罫線の色は --dl-rule（既定＝テーマの --line）。
   --------------------------------------------------------------------------- */
.deflist{ display:table; width:100%; border-collapse:collapse; margin:0 0 var(--block-gap); }
.deflist > .dl-row{ display:table-row; }
.deflist > .dl-row > .dl-k,
.deflist > .dl-row > .dl-v{ display:table-cell; vertical-align:top;
  padding:var(--dl-pv, 7px) var(--dl-ph, 16px); }
.deflist > .dl-row > .dl-k{ width:var(--dl-k, 1px); white-space:nowrap;
  font-weight:700; color:var(--accent-ink); padding-left:0;
  /* ラベルは語の途中で折り返さない。.page が overflow-wrap:anywhere を持つため、そのままだと
     幅を指定したとき「2026/06/0」＋「4」のように日付やバージョン番号が割れる（実測）。
     normal に戻すと、和文は従来どおり折り返し、英数字の連なりは割れない。 */
  overflow-wrap:normal; word-break:normal; }
.deflist > .dl-row > .dl-v{ padding-right:0; }
/* セル内の最初/最後のパーツの外余白は消す（行の高さが余分に空かないように） */
.deflist > .dl-row > * > :first-child{ margin-top:0; }
.deflist > .dl-row > * > :last-child{ margin-bottom:0; }
/* 幅を指定したら折り返しを戻す（クラス指定・インライン変数のどちらでも）。
   ★★`[class*="dl-w"]` のような**あいまい一致にしてはいけない**（2026-08-03 に納品文書で発覚）。
     一覧に無いクラス（例 `dl-w170`）を書かれると、`--dl-k` は既定の 1px のままなのに
     nowrap だけ解除され、**ラベル列が1文字幅に潰れる**（実測 32px）。
     ここを**定義済みクラスの列挙**にしておけば、未定義のクラスは単に無視され
     「内容に合わせる」（nowrap＋1px＝shrink-to-fit）へ安全に戻る。
     ＝下の --dl-k を足すときは、この :is() にも同じクラスを足すこと。 */
.deflist:is(.dl-w70,.dl-w100,.dl-w120,.dl-w150,.dl-w200,.dl-w240,.dl-w20p,.dl-w25p,.dl-w33p) > .dl-row > .dl-k,
.deflist[style*="--dl-k"] > .dl-row > .dl-k{ white-space:normal; }
.deflist.dl-w70{ --dl-k:70px; } .deflist.dl-w100{ --dl-k:100px; } .deflist.dl-w120{ --dl-k:120px; }
.deflist.dl-w150{ --dl-k:150px; } .deflist.dl-w200{ --dl-k:200px; } .deflist.dl-w240{ --dl-k:240px; }
.deflist.dl-w20p{ --dl-k:20%; } .deflist.dl-w25p{ --dl-k:25%; } .deflist.dl-w33p{ --dl-k:33%; }
/* 行の間隔 */
.deflist.dl-tight{ --dl-pv:3px; } .deflist.dl-loose{ --dl-pv:12px; }
/* 縦位置 */
.deflist.dl-mid > .dl-row > *{ vertical-align:middle; }
/* 罫線 3 段階（なし＝クラス無し／行の下／行の下＋列の間／枠で囲む） */
.deflist:is(.dl-rule,.dl-grid,.dl-box) > .dl-row > *{
  border-bottom:var(--rule-weight) var(--rule-style) var(--dl-rule, var(--line)); }
.deflist:is(.dl-rule,.dl-grid) > .dl-row:last-child > *{ border-bottom:0; }
.deflist.dl-grid > .dl-row > .dl-k{
  border-right:var(--rule-weight) var(--rule-style) var(--dl-rule, var(--line)); }
.deflist.dl-box{ border:var(--rule-weight) var(--rule-style) var(--dl-rule, var(--line));
  border-radius:var(--radius-sm); }
.deflist.dl-box > .dl-row:last-child > *{ border-bottom:0; }
.deflist.dl-box > .dl-row > .dl-k{ padding-left:var(--dl-ph, 16px); }
.deflist.dl-box > .dl-row > .dl-v{ padding-right:var(--dl-ph, 16px); }
/* 狭い画面では1列に積む（左固定幅のままだと本文がつぶれるため） */
@media (max-width:640px){
  .deflist, .deflist > .dl-row, .deflist > .dl-row > *{ display:block; width:auto; }
  .deflist > .dl-row > .dl-k{ white-space:normal; padding:0; }
  .deflist > .dl-row > .dl-v{ padding:2px 0 10px; }
}
.example{ counter-reset:ex; }
.example > .ex{ counter-increment:ex; position:relative; padding:6px 0 6px 52px; }
/* 「例1」バッジも1行目の中心へ（式は core.css のリスト節の見出しコメント参照）。
   バッジの高さ＝自身の1行 + 上下パディング4px。.ex の1行は font-size:.78em の逆数 1.282em で数える。 */
.example > .ex::before{ content:"例" counter(ex); position:absolute; left:0;
  top:calc(6px + (1.282em * var(--leading) - (1em * var(--leading) + 4px)) / 2);
  font-size:.78em; font-weight:700; color:var(--on-accent,#fff); background:var(--accent); border-radius:6px; padding:2px 8px; }

/* ============================ C. リスト =================================== */
.list-disc{ list-style:none; margin:0; padding:0; }
.list-disc > li{ position:relative; padding:3px 0 3px 20px; }
/* 記号・番号は「1行目の中心」に合わせる（考え方と式は core.css のリスト節の見出しコメント参照） */
.list-disc > li::before{ content:""; position:absolute; left:2px;
  top:calc(3px + (1em * var(--leading) - 7px) / 2); width:7px; height:7px;
  border-radius:50%; background:var(--accent); }
/* ★番号は組み込みの `list-item` カウンタで数える（理由は core.css の .list-step と同じ＝
   `<ol start="5">` をそのまま効かせるため）。 */
.list-decimal{ list-style:none; margin:0; padding:0; }
.list-decimal > li{ position:relative; padding:3px 0 3px 28px; }
/* 番号は本文と同じ文字サイズ・同じ行間なので、行の箱どうしの上端を合わせれば中心も揃う
   （＝li の padding-top と同値。テーマが変わっても比例するので固定値のままでよい）。 */
.list-decimal > li::before{ content:counter(list-item)"."; position:absolute; left:0; top:3px;
  color:var(--accent-ink); font-weight:700; }
.list-arrow{ list-style:none; margin:0; padding:0; }
.list-arrow > li{ position:relative; padding:3px 0 3px 20px; }
/* 矢印は font-size:1.2em ＝自身の行の箱が本文より高い。その差の半分だけ引き上げて中心を合わせる
   （li の1行は 1/1.2 = .8333em 相当）。 */
.list-arrow > li::before{ content:"›"; position:absolute; left:4px;
  top:calc(3px + (.8333em - 1em) * var(--leading) / 2);
  color:var(--accent); font-weight:700; font-size:1.2em; }
.list-inline{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.list-inline > li{ background:var(--surface-2); border:var(--rule-weight) var(--rule-style) var(--line);
  border-radius:999px; padding:3px 12px; font-size:.85em; }
/* 回り込み（float）した画像の隣に置いたとき、リストの「・」や番号・チェック等のマーカーが
   画像に重なるのを防ぐ。マーカーは li::before の position:absolute で描くため float を避けず、
   ul の左端（＝画像の上）に載ってしまう。独立した整形コンテキストにするとリスト全体が
   float の隣に配置され、マーカーもその内側に収まる（.list-inline は display:flex で既に同じ挙動）。
   マーカーを持たない .list-plain は重ならないので従来どおり回り込ませる。 */
.list-check,.list-step,.list-disc,.list-decimal,.list-arrow{ display:flow-root; }

/* ============================ D. レイアウト =============================== */
/* 段組み（汎用）。段数と幅の比を1つのパーツで賄う。
   ・段数 …… --cols-n（既定2）。等幅なら repeat() でそのまま段数になる。
   ・幅の比 … --cols-t を書くとそちらが優先（grid-template-columns の値をそのまま入れる。
              例 `1fr 2fr` / `220px 1fr` / `max-content 1fr`）。
              **クラスのプリセットと自由入力の二段構え**は deflist の --dl-k と同じ流儀で、
              var() のフォールバックに既定を置くだけで実現できる（インラインなので詳細度でも勝つ）。
   ・段の間隔 … --cols-gap（空ならテーマの --gap-cols）。
   ・段の縦位置 … --cols-ai（既定 stretch＝高さいっぱい。center で上下中央、start/end で上/下ぞろえ）。
                 段の高さが違うとき、短い段の中身を縦方向にどう置くかを決める。
   ・高さ …… --cols-h（既定 0＝中身なり）。**最小の高さ**なので内容が多ければ伸びる（--lay-h と同じ流儀）。
              grid は align-content の既定が normal＝stretch で、自動サイズの行がコンテナいっぱいに
              広がる。そのため --cols-h で高さを決め --cols-ai:center を組み合わせると
              **「高さを決めた箱の中で上下中央」**になる（段の中身の量に関係なく紙の中央に置ける）。
   狭い画面では1段に積む（旧 cols-* と同じ）。 */
.cols{ display:grid; gap:var(--cols-gap, var(--gap-cols));
  grid-template-columns:var(--cols-t, repeat(var(--cols-n, 2), 1fr));
  align-items:var(--cols-ai, stretch); min-height:var(--cols-h, 0); }
@media (max-width:640px){ .cols{ grid-template-columns:1fr; } }
/* 段ごとの縦位置。align-self は grid アイテム個別の指定なので、親の align-items（--cols-ai）より
   優先する＝「1段目は上下中央・2段目は上ぞろえ」のように段ごとに変えられる。
   クラスを付けない段は align-self:auto のまま（＝親の指定に従う）なので、既存文書は一切変わらない。 */
.cols > .va-t{ align-self:start; }
.cols > .va-c{ align-self:center; }
.cols > .va-b{ align-self:end; }
.cols > .va-f{ align-self:stretch; }
.cols-1to2{ display:grid; grid-template-columns:1fr 2fr; gap:var(--gap-cols); }
.cols-2to1{ display:grid; grid-template-columns:2fr 1fr; gap:var(--gap-cols); }
.cols-1to3{ display:grid; grid-template-columns:1fr 3fr; gap:var(--gap-cols); }
.cols-auto{ display:grid; grid-template-columns:max-content 1fr; gap:var(--gap-cols); }
@media (max-width:640px){ .cols-1to2,.cols-2to1,.cols-1to3,.cols-auto{ grid-template-columns:1fr; } }
.aside{ display:grid; grid-template-columns:1fr 220px; gap:var(--gap-cols); align-items:start; }
.aside > .sidenote{ background:var(--surface-2); border-left:3px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:12px 14px; font-size:.86em; color:var(--muted); }
@media (max-width:640px){ .aside{ grid-template-columns:1fr; } }
.frame{ border:var(--p-frame-bd-w, var(--rule-weight)) var(--p-frame-bd-style, var(--rule-style)) var(--p-frame-bd-c, var(--line)); border-radius:var(--p-frame-radius, var(--radius)); padding:var(--p-frame-pad, var(--pad-panel)); background:var(--p-frame-bg, transparent); }

/* --- ブロックを折り返して並べる（.tiles / .tile）-----------------------------
   ブロックを横に並べ、**入れ物の幅**が足りなくなったら折り返す器。
   ★判定が「入れ物の幅」なのが要点。`@media` は**ビューポート幅**を見るので
     ・A4 の刷り幅（約794px）では 640px の分岐が発火せず、紙では常に元の段数のまま
     ・入れ子（段組みの狭い段・パネルの中・表のセル）を見ないので、狭い場所で潰れる
     という穴があった（.cards / .sdx-gallery / .web-* が該当）。.tiles にはこの穴が無い。
   ★grid ではなく flex を土台にしたのは、寄せ方・縦揃え・子ごとの伸び方といった
     フレックスボックスの指定をそのまま使えるようにするため。
     代償＝**最終行は上の行と列がそろわない**（余りは「横の寄せ」で処理する）。
   幅 --tiles-w は、伸縮モードでは「最小幅」、固定モードでは「そのままの幅」。
   子ごとに --tile-w を持たせると、そのマスだけ幅を変えられる。 */
.tiles{
  display:flex; flex-wrap:wrap; margin:0 0 var(--block-gap);
  gap:var(--tiles-gy, var(--gap-card)) var(--tiles-gx, var(--gap-card));
  align-content:flex-start; min-height:var(--tiles-h, 0);
}
/* 既定＝伸縮：最小幅まで縮み、下回ると折り返す。1行の余りは分け合って伸びる。
   min-width:0 が無いと、長い語や表を入れたマスが縮めず横にはみ出す。 */
.tiles > *{ flex:1 1 var(--tile-w, var(--tiles-w, 240px)); min-width:0; }
/* 固定：縮まずに折り返す。余った幅は「横の寄せ」で処理する。 */
.tiles.tl-fixed > *{ flex:0 0 var(--tile-w, var(--tiles-w, 240px)); }
/* 折り返さない（1行に収める）。伸縮モードでは縮んで収まり、固定モードでははみ出す。 */
.tiles.tl-nowrap{ flex-wrap:nowrap; }
/* 並ぶ向き。★縦並びは主軸が縦になるので、幅は交差軸＝width で効かせる
   （主軸の basis にすると「高さ」の指定になってしまう）。
   次の列へ送るには **高さ（--tiles-h）の指定が要る**。 */
.tiles.tl-dir-rrev{ flex-direction:row-reverse; }
/* ★縦向きのときだけ --tiles-h を **実際の高さ** として効かせる。
   横向きと同じ min-height のままだと、中身の高さで箱が伸びてしまい「入りきらない」状態が
   起きない＝いつまでも次の列へ送られない（実測で踏んだ）。 */
.tiles.tl-dir-col,.tiles.tl-dir-colrev{ flex-direction:column; height:var(--tiles-h, auto); }
.tiles.tl-dir-colrev{ flex-direction:column-reverse; }
.tiles.tl-dir-col > *,.tiles.tl-dir-colrev > *{
  flex:0 0 auto; width:var(--tile-w, var(--tiles-w, 240px)); max-width:100%; }
/* 横の寄せ（主軸） */
.tiles.tl-jc-c{ justify-content:center; }
.tiles.tl-jc-e{ justify-content:flex-end; }
.tiles.tl-jc-between{ justify-content:space-between; }
.tiles.tl-jc-around{ justify-content:space-around; }
.tiles.tl-jc-evenly{ justify-content:space-evenly; }
/* 縦の揃え（交差軸）。既定は stretch＝同じ行の高さがそろう。 */
.tiles.tl-ai-t{ align-items:flex-start; }
.tiles.tl-ai-c{ align-items:center; }
.tiles.tl-ai-b{ align-items:flex-end; }
.tiles.tl-ai-base{ align-items:baseline; }
/* 行の詰め方。複数行になり、かつ高さに余りがあるときだけ意味を持つ。 */
.tiles.tl-ac-c{ align-content:center; }
.tiles.tl-ac-e{ align-content:flex-end; }
.tiles.tl-ac-between{ align-content:space-between; }
.tiles.tl-ac-stretch{ align-content:stretch; }
/* 1マスだけの指定。align-self は親の align-items より優先される。 */
.tiles > .tl-grow{ flex-grow:1; }
.tiles > .tl-nogrow{ flex-grow:0; }
.tiles > .tl-noshrink{ flex-shrink:0; }
.tiles > .va-t{ align-self:flex-start; }
.tiles > .va-c{ align-self:center; }
.tiles > .va-b{ align-self:flex-end; }
.tiles > .va-f{ align-self:stretch; }

.cluster{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.stack{ display:flex; flex-direction:column; gap:var(--block-gap); }
.multicol{ column-count:2; column-gap:calc(var(--gap-cols) * 1.6); }
.multicol > :first-child{ margin-top:0; } .multicol > :last-child{ margin-bottom:0; }
@media (max-width:640px){ .multicol{ column-count:1; } }
.indent1{ padding-left:1.2em; } .indent2{ padding-left:2.4em; } .indent3{ padding-left:3.6em; }
/* スペーサー＝高さのみの空白（ブロック間の間隔調整。高さは mm 指定＝印刷に正確に反映）。
   編集中だけ薄い斜線で位置が分かるようにする（表示・印刷では透明な余白）。 */
.spacer{ height:16mm; margin:0; }
.spacer-sm{ height:8mm; } .spacer-md{ height:16mm; } .spacer-lg{ height:28mm; } .spacer-xl{ height:44mm; }
/* 編集中の可視化は @media screen 限定＝印刷には出さない（透明な余白のみ印刷される） */
@media screen{ .sdx-edit .spacer{ background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(120,140,160,.10) 5px,rgba(120,140,160,.10) 10px); border-radius:var(--radius-sm); } }

/* ============================ E. パネル拡張 =============================== */
.panel.invert{ background:var(--accent); color:var(--on-accent,#fff); border-color:var(--accent); box-shadow:none; }
/* 直下のタイトルだけ白にする。子孫セレクタ（.panel.invert .panel-title）だと、中に入れ子にした
   通常パネルのタイトルまで白くなり、淡色地の上で文字が消えるため。 */
.panel.invert > .panel-title{ color:var(--on-accent,#fff); }
/* quiet＝控えめなパネル。★2026-08-19 に**淡いアクセント地＋実線の枠**へ変更（ユーザー指示。
     旧＝背景なし・破線・文字色は継承）。**自分で面を塗るようになった**ので、L節② の一覧にも
     入れた（`.panel:not(.invert)`）＝濃色パネルの中へ入れても文字が親の白のまま残らず素の色に戻る。
   ★枠線の形は指定しない＝`.panel` の `var(--rule-style)`（全テーマ solid）に従う＝実線。 */
.panel.quiet{ background:var(--accent-soft); box-shadow:none; }
.panel.url{ background:var(--surface-2); }
/* 色は core.css の a / a:visited に任せる（ここで指定すると閲覧済みの色が出なくなる）。 */
.panel.url a{ word-break:break-all; }
/* ★URLパネルの中身は「隣接タイトル（.panel-title）＋段落」＝ふつうのパネルと同じ。
   `.url` は地色を変えるだけの見た目のクラスで、専用のCSSは持たない。
   旧い形（裸の <strong> と <a>）は editor.js の normalizeUrlPanels が開いたときに寄せる。 */
/* 帯パネル＝帯見出し（.title-ribbon）と同じ見た目の「器」。淡い地・左の線・右だけ角丸で、
   中に段落・リスト・表などのパーツを置ける（.panel と同じ器だが、四方の枠線と影は持たない）。
   ★変数は --rp-* にして帯見出しの --rb-* とは**分ける**。同じ名前にすると、帯パネルの中に
     帯見出しを入れ子にしたとき親の色が子へ継承して混ざる（CSS変数は継承するため）。
   ★.panel の派生（.panel.ribbon）にしなかったのは、L節②の .panel:not(.invert) が
     0,3,0 で効いてしまい、濃い地のプリセットが後勝ちで打ち消されるため。独立クラスにすると
     .title-ribbon と同じ形（同詳細度・後勝ち）でそのまま書ける。
   「なし」は地だけ消して左線と文字色を残す。線も消したいときは rp-plain。 */
.ribbon-panel{ background:var(--rp-bg, var(--p-rp-bg, var(--accent-soft))); color:var(--rp-fg, var(--p-rp-fg, var(--accent-ink)));
  padding:var(--p-rp-pad, var(--pad-panel)); border-left:var(--p-rp-bar-w, 5px) solid var(--rp-line, var(--p-rp-bar-c, var(--accent)));
  border-radius:var(--p-rp-radius, 0 var(--radius-sm) var(--radius-sm) 0); }
.ribbon-panel.rp-accent{ --rp-bg:var(--accent); --rp-fg:var(--on-accent,#fff); }
/* ★面の色は**地だけ**変える（--rp-fg を触らない）＝帯見出しの rb-surface と同じ。
   ここで --rp-fg:var(--accent-ink) を置くと、L節②が同じ要素で --accent-ink を素の値へ戻すため
   本文がアクセント色になり、淡いテーマ（ミント等）で 3.68 まで落ちた（実測）。
   地が中立な面のときは、本文は既定の文字色（--ink-base）のままが正しい。 */
.ribbon-panel.rp-surface{ --rp-bg:var(--surface-2); }
.ribbon-panel.rp-none{ --rp-bg:transparent; }
.ribbon-panel.rp-plain{ --rp-bg:transparent; border-left:0; border-radius:0; padding-left:0; }
/* ★「濃い面の中で自前の明るい面を塗るパーツの文字色」は **L 節（このファイル末尾）へ一本化**した。
   ここに一覧を置いていたが、core.css・layers.css にも同じ一覧の写しがあり、パーツを足すたびに
   3か所のどれかが漏れて同じ不具合が再発していた（実測 380通り中99通りが 3:1 未満）。 */
/* 「リストの記号」は濃色地では見えなくなる（丸・矢印・番号はいずれも var(--accent)＝
   .panel.invert の地色と同色）。記号をその場の文字色（currentColor）に合わせて反転する。
   currentColor なので、invert の中にさらに明色パネル等を入れ子にした場合は上の指定で
   color:var(--ink) に戻り、記号も自動で濃色に戻る（入れ子でも破綻しない）。
   ・list-check は白い箱（--surface）の中に枠と鉤があるので、そのままでも読める＝触らない。
   ・list-step の番号玉はアクセント地＋白文字なので、色を変えず currentColor の輪郭で浮かせる。 */
.panel.invert .list-disc > li::before{ background:currentColor; }
.panel.invert .list-arrow > li::before,
.panel.invert .list-decimal > li::before{ color:inherit; }
.panel.invert .list-step > li::before{ box-shadow:0 0 0 2px currentColor; }
.panel.invert .list-step > li:not(:last-child)::after{ background:color-mix(in srgb,currentColor 50%,transparent); }
/* 見出しも同じ理由: 大見出しの左帯・中見出しの下線はアクセント色なので、濃色パネルの地色と同色になり
   消える。文字色（--accent-ink）も濃色地では読みにくいので、まとめてその場の文字色に合わせる。 */
.panel.invert .title-lg{ color:inherit; border-left-color:currentColor; }
.panel.invert .title-md{ color:inherit; border-bottom-color:currentColor; }
/* ★用語リストの dt/dd・2カラムリストのラベルが濃色コンテナで沈む件（続き148）も L 節で解決した。
   これらは var(--accent-ink) / var(--muted) を読むだけなので、濃い面がトークンを差し替えれば
   自動で読める色になる（コンテナごとの個別指定が要らない）。 */
.appeal{ text-align:center; background:var(--p-appeal-bg, var(--accent-soft)); border:var(--p-appeal-bd-w, var(--rule-weight)) var(--p-appeal-bd-style, var(--rule-style)) var(--p-appeal-bd-c, var(--line));
  border-radius:var(--p-appeal-radius, var(--radius)); padding:var(--p-appeal-pad, calc(var(--pad-panel) * 1.4)); }
.appeal .big{ font-family:"SDX Yen",var(--p-appeal-t-font, var(--font-head)); font-weight:var(--p-appeal-t-weight, 800);
  font-size:calc(var(--font-base) * var(--p-appeal-t-size, 1.5) * var(--scale) * var(--fs-mul, 1)); color:var(--p-appeal-t-color, var(--accent-ink)); line-height:var(--p-appeal-t-lh, 1.4); }
.qa{ display:grid; gap:8px; }
/* ★グリッドで「玉の列＋本文の列」を作ってはいけない。グリッドは**子要素と文字のかたまりの
   ひとつひとつが別のマス**になるので、本文に装飾を入れて `文字<strong>質問？</strong>` の形に
   なると、`文字` が本文列・`<strong>` が**次の行の玉の列**へ落ちて表示が崩れる
   （ユーザー報告）。玉は position:absolute で置き、本文は**ふつうの流し込み**にしておけば、
   中に何個要素が入っても崩れない。左の余白 53px ＝ 13(padding)+26(玉)+14(間隔)。 */
.qa .q,.qa .a{ position:relative;
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius-sm); padding:11px 13px 11px 53px; }
.qa .q{ background:var(--surface-2); }
.qa .q::before{ content:"Q"; } .qa .a::before{ content:"A"; }
/* 玉は1行目の中心にそろえる（font-size:.85em の逆数 1.176em が本文の1em）。
   複数行になっても玉は1行目に付いたまま＝上端そろえの利点は保つ。 */
.qa .q::before,.qa .a::before{ position:absolute; left:13px;
  top:calc(11px + (1.176em * var(--leading) - 26px) / 2);
  width:26px; height:26px; border-radius:50%; color:var(--on-accent,#fff); background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85em; }
/* ★A の玉は「濃いアクセント面」トークンで塗る（`--accent-fill`／その上の文字は `--on-accent-fill`）。
   ★★**`--accent-ink` を地に使い、文字を `--on-accent` で塗ってはいけない**＝
     `--on-accent` は「`--accent` の上の文字」の色なので、**別の面の文字色として流用すると破綻する**。
     実例（ユーザー報告）＝淡い主色＋見出しを黒に微調整したカスタムテーマで
     **地 #141414・文字 #000000＝コントラスト 1.14**（A の字が見えない）。
   ★既定は `var(--accent-ink)`／白なので**19テーマの見た目は変わらない**。
     見出し色（`--accent-ink`）と切り離したので、**A の玉だけ**を微調整できる（カスタムテーマの微調整グリッド）。 */
.qa .a::before{ background:var(--accent-fill,var(--accent-ink)); color:var(--on-accent-fill,#fff); }
/* 付箋（3色・テーマ非依存）＝書き手向けの指示/質問/回答メモ。派手色で目立ってよい別レジスター
   （コールアウトのグレー階調とは役割が逆）。影＋わずかな回転＋上辺テープの付箋見た目。色は固定。 */
.sticky{ display:inline-block; vertical-align:top; position:relative; min-width:150px; max-width:280px;
  margin-right:14px; border-radius:2px; padding:11px 14px; font-size:.9em; line-height:1.6;
  box-shadow:2px 4px 10px rgba(0,0,0,.2); break-inside:avoid; }
/* 位置：左（既定）＝inline-block で隣り合う付箋が自動で横並び＋折返し。中央/右＝単独ブロックで寄せ。 */
.sticky.sticky-c{ display:block; margin-left:auto; margin-right:auto; }
.sticky.sticky-r{ display:block; margin-left:auto; margin-right:0; }
.sticky > b{ display:block; font-size:.85em; letter-spacing:.06em; margin:0 0 3px; font-weight:700; }
.sticky > p{ margin:0; }
.sticky::before{ content:""; position:absolute; top:-7px; left:22px; width:44px; height:13px;
  background:rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.08); transform:rotate(-3deg); }
.sticky.st-memo{ background:#fff2a1; border:1px solid #ecd85a; color:#4a3d00; transform:rotate(-1.2deg); }
.sticky.st-memo > b{ color:#8a6d00; }
.sticky.st-q{ background:#ffdfe6; border:1px solid #f3aebf; color:#6a2338; transform:rotate(1deg); }
.sticky.st-q > b{ color:#b04a63; }
.sticky.st-a{ background:#dcf3d2; border:1px solid #a9d998; color:#2c4a22; transform:rotate(-.6deg); }
.sticky.st-a > b{ color:#4f7a3e; }
/* 付箋グループ＝複数の付箋を横に並べて折り返し。位置(左/中央/右)は justify-content で行を揃える
   （中央＝中央寄せで折返し／右＝右詰めで左方向に折返し）。中の付箋は flex アイテムとして gap で整列。 */
.stickies{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.stickies.stickies-c{ justify-content:center; }
.stickies.stickies-r{ justify-content:flex-end; }
.stickies > .sticky{ flex:0 0 auto; margin:0; }

/* ============================ F. データ =================================== */
.table.compact th,.table.compact td{ padding:calc(var(--pad-cell-y) * .6) calc(var(--pad-cell-x) * .7); font-size:.86em; }
/* セル内の文字を段落化（編集用）した場合、単一の p 要素は素の文字と同じ見た目に（余白を消す）。 */
.table td > p:only-child,.table th > p:only-child{ margin:0; }
.spec{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius-sm); overflow:hidden; }
/* ★A の玉と同じ「濃いアクセント面」トークンで塗る（白の直書きをやめる＝ノワールのように
   `--accent-ink` が明るい金色のテーマでは、白文字だと 2.2:1 で読めなかった）。 */
.spec .cls{ background:var(--accent-fill,var(--accent-ink)); color:var(--on-accent-fill,#fff); font-family:"SDX Yen","BIZ UDGothic","MS Gothic",Consolas,monospace; font-weight:700; padding:8px 13px; }
.spec .method{ background:var(--accent-soft); color:var(--accent-ink); font-family:"SDX Yen","BIZ UDGothic","MS Gothic",Consolas,monospace;
  padding:8px 13px; border-top:var(--rule-weight) var(--rule-style) var(--line); }
.spec .body{ padding:var(--pad-panel); }
.spec .body > :first-child{ margin-top:0; } .spec .body > :last-child{ margin-bottom:0; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--gap-card); }
.stat{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius);
  padding:var(--pad-panel); text-align:center; background:var(--surface); box-shadow:var(--shadow-sm); }
.stat .num{ font-family:"SDX Yen",var(--font-head); font-size:calc(var(--font-base) * 1.9 * var(--scale)); font-weight:800; color:var(--accent-ink); line-height:1.1; }
.stat .label{ color:var(--muted); font-size:.84em; margin-top:2px; }
.stat .unit{ font-size:.5em; color:var(--muted); margin-left:2px; }

/* --- グラフ3種（円 / 棒 / レーダー）------------------------------------------
   共通の決まりごと:
   ・**JavaScript を使わない**。値は編集画面が % や SVG 座標へ変換して静的HTMLに書く。
     保存した HTML をブラウザで開くだけで出るし、印刷でも崩れない（描画待ちが無い）。
   ・**系列の色は器に `--ch-c` を置き、中の要素が `var(--ch-c)` を読む**形に3種でそろえてある。
     入る値は ①`var(--chart-1〜8)`（固定の系列色）②`color-mix(… var(--accent) …)`（テーマ色の濃淡）
     ③`#rrggbb`（任意色）のいずれか。どれも同じ書き方で通るので、配色の切替が1か所で済む。
   ・**面・罫線・文字はテーマ追従**（--surface / --line / --ink / --muted）。系列色だけが固定。
   ・**文字に系列色を使わない**（名前は --ink、値は --muted）。色は必ず色見本かバー自身が持ち、
     文字は読みやすさを優先する。凡例と値ラベルを既定で出すのは、
     明るい面でコントラストが 3:1 未満になる系列色があるため（色だけに意味を持たせない）。
   ・面ものなので印刷では途中で切らない（break-inside:avoid）。 */

/* ---- 円グラフ（.sdx-pie）。conic-gradient 1枚で描く ---- */
/* 凡例の位置＝pie-right(既定) / pie-left / pie-bottom / pie-none。
   --pie-size 直径／--pie-hole ドーナツの穴の半径（%）。 */
.sdx-pie{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.sdx-pie.pie-left{ flex-direction:row-reverse; }
.sdx-pie.pie-bottom{ flex-direction:column; gap:14px; }
.sdx-pie .pie-fig{ position:relative; flex:0 0 auto;
  width:var(--pie-size,200px); height:var(--pie-size,200px); max-width:100%; }
.sdx-pie .pie-disc{ width:100%; height:100%; border-radius:50%; }
/* ドーナツ＝**中央をマスクで抜く**。白い円を重ねる方式だと、濃色パネルやレイヤーの上に
   置いたときに穴だけ白く浮く。マスクなら下地がそのまま透ける。 */
.sdx-pie.pie-donut .pie-disc{
  -webkit-mask:radial-gradient(circle at 50% 50%, #0000 var(--pie-hole,58%), #000 calc(var(--pie-hole,58%) + .5px));
          mask:radial-gradient(circle at 50% 50%, #0000 var(--pie-hole,58%), #000 calc(var(--pie-hole,58%) + .5px)); }
/* 穴の中の文字（合計など）。マスクの影響を受けないよう .pie-disc の外に置く */
.sdx-pie .pie-mid{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; line-height:1.2; pointer-events:none; }
.sdx-pie .pie-mid-v{ font-family:"SDX Yen",var(--font-head); font-weight:800; font-size:1.5em; color:var(--ink); }
.sdx-pie .pie-mid-t{ font-size:.72em; color:var(--muted); }
.sdx-pie .pie-legend{ list-style:none; margin:0; padding:0; font-size:.86em;
  display:flex; flex-direction:column; gap:7px; min-width:0; }
.sdx-pie.pie-bottom .pie-legend{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:6px 18px; }
.sdx-pie .pie-legend > li{ display:flex; align-items:center; gap:8px; }
.sdx-pie .pie-legend > li::before{ content:""; flex:0 0 auto; width:1.15em; height:.78em;
  border-radius:2px; background:var(--ch-c,var(--chart-1)); }
.sdx-pie .pie-nm{ font-weight:600; }
.sdx-pie .pie-vl{ margin-left:auto; padding-left:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.sdx-pie.pie-bottom .pie-vl{ margin-left:0; padding-left:0; }
.sdx-pie.pie-none .pie-legend{ display:none; }

/* ---- 棒グラフ（.sdx-bar）。dl の各行が1本 ---- */
/* 向き＝bar-h(既定・横棒) / bar-col(縦棒)。値＝val-in(既定・バーの中) / val-out(外) / val-off(出さない)。
   --bar-lw ラベル幅（横棒）／--bar-th バーの太さ／--bar-len 縦棒の高さ／--bar-gap 行間／
   --bar-step 目盛線の間隔（bar-grid のとき）／各行の --bar-p が長さ（%）。 */
.sdx-bar{ margin:0; font-size:.92em; }
.sdx-bar .bar-row{ display:flex; align-items:center; gap:10px; margin:0 0 var(--bar-gap,8px); }
.sdx-bar .bar-row:last-child{ margin-bottom:0; }
.sdx-bar .bar-lb{ flex:0 0 var(--bar-lw,72px); width:var(--bar-lw,72px); margin:0; min-width:0;
  overflow-wrap:break-word; }
.sdx-bar .bar-track{ flex:1 1 auto; min-width:0; margin:0; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--ink) 8%, transparent); }
.sdx-bar.bar-grid .bar-track{ background-image:repeating-linear-gradient(to right,
  var(--line) 0 1px, transparent 1px var(--bar-step,25%)); }
.sdx-bar .bar-fill{ position:relative; display:flex; align-items:center; justify-content:flex-end;
  width:var(--bar-p,0%); height:var(--bar-th,34px); box-sizing:border-box; padding-right:12px;
  border-radius:inherit; background:var(--ch-c,var(--accent)); color:#fff; font-weight:700;
  white-space:nowrap; }
/* バーの中の数字は、薄い系列色やテーマ色の上に載ることがあるので影で読ませる
   （ガントのバー内ラベルと同じ手当て。色から白黒を選ぶ手は、色が var() のときに決められない） */
.sdx-bar .bar-num{ font-variant-numeric:tabular-nums; text-shadow:0 1px 1px rgba(0,0,0,.28); }
/* 値を外に出す＝バーの終端に置く（文字は地の色。濃い背景の上でも読める）。
   ★短くて数字が中に入らない行は編集画面が row に num-out を付ける＝**自動で外へ出す**。
     中に押し込むと padding のぶんバーが伸びて「0 なのに少しある」ように見えてしまう。 */
.sdx-bar.val-out .bar-fill,
.sdx-bar .bar-row.num-out .bar-fill{ padding-right:0; overflow:visible; }
.sdx-bar.val-out .bar-num,
.sdx-bar .bar-row.num-out .bar-num{ position:absolute; left:100%; top:50%; transform:translateY(-50%);
  margin-left:8px; color:var(--ink); text-shadow:none; }
/* 外に出した数字が紙の端で切れないよう、置き場所を空ける（横棒のみ。縦棒は上に出る）。
   ★空けるのは**全行**（has-out）。1行だけ空けるとその行のトラックが短くなり、
     同じ目盛で比べられなくなる（バーの長さの意味が壊れる）。 */
.sdx-bar.bar-h.val-out .bar-track,
.sdx-bar.bar-h.has-out .bar-track{ margin-right:var(--bar-vw,58px); }
/* 縦棒で数字を上に出すときは、いちばん高いバーの上に数字の分を空ける */
.sdx-bar.bar-col.val-out,
.sdx-bar.bar-col.has-out{ padding-top:1.5em; }
.sdx-bar.val-off .bar-num{ display:none; }
.sdx-bar.val-off .bar-fill{ padding:0; }
/* 縦棒＝行を「ラベルが下・バーが上」に組み替える（DOM は横棒と同じ） */
.sdx-bar.bar-col{ display:flex; align-items:flex-end; gap:var(--bar-gap,14px); }
.sdx-bar.bar-col .bar-row{ flex:1 1 0; flex-direction:column-reverse; align-items:stretch;
  gap:6px; margin:0; min-width:0; }
.sdx-bar.bar-col .bar-lb{ flex:0 0 auto; width:auto; text-align:center; font-size:.92em; }
.sdx-bar.bar-col .bar-track{ flex:0 0 auto; height:var(--bar-len,180px); display:flex; align-items:flex-end; }
.sdx-bar.bar-col.bar-grid .bar-track{ background-image:repeating-linear-gradient(to top,
  var(--line) 0 1px, transparent 1px var(--bar-step,25%)); }
.sdx-bar.bar-col .bar-fill{ width:100%; height:var(--bar-p,0%);
  align-items:flex-start; justify-content:center; padding:5px 0 0; }
.sdx-bar.bar-col.val-out .bar-fill,
.sdx-bar.bar-col .bar-row.num-out .bar-fill{ padding-top:0; }
.sdx-bar.bar-col.val-out .bar-num,
.sdx-bar.bar-col .bar-row.num-out .bar-num{ left:50%; top:auto; bottom:100%;
  transform:translateX(-50%); margin:0 0 5px; }
.sdx-bar.bar-col .bar-row.num-out .bar-track{ margin-right:0; }

/* ---- レーダーチャート（.sdx-radar）---- */
/* --rd-size 目盛の外周の直径／--rd-pad 軸名を置く外周の余白。
   軸名は編集画面が left/top（%）＋transform で1つずつ置く（軸の数に依存しない）。 */
.sdx-radar{ width:calc(var(--rd-size,230px) + 2 * var(--rd-pad,46px)); max-width:100%; margin:0 auto; }
.sdx-radar .rd-plot{ position:relative; padding:var(--rd-pad,46px); }
.sdx-radar svg{ display:block; width:100%; height:auto; }
.sdx-radar .rd-spokes path,.sdx-radar .rd-rings path{ fill:none; stroke:var(--line);
  stroke-width:1; vector-effect:non-scaling-stroke; }
.sdx-radar .rd-area{ fill:var(--ch-c,var(--chart-1)); fill-opacity:.18;
  stroke:var(--ch-c,var(--chart-1)); stroke-width:2; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; }
/* 系列が2つ以上のときは塗りを薄く＝重なった部分が濁って線が読めなくなるのを防ぐ */
.sdx-radar.rd-multi .rd-area{ fill-opacity:.1; }
.sdx-radar .rd-dots circle{ fill:var(--ch-c,var(--chart-1)); }
.sdx-radar .rd-tick{ fill:var(--muted); font-size:8.5px; }
.sdx-radar .rd-labels{ position:absolute; inset:var(--rd-pad,46px); margin:0; }
.sdx-radar .rd-labels > div{ position:absolute; text-align:center; font-size:.68em; line-height:1.25;
  white-space:nowrap; }
.sdx-radar .rd-labels dt{ font-weight:600; color:var(--ink); }
.sdx-radar .rd-labels dd{ margin:0; color:var(--muted); font-variant-numeric:tabular-nums; }
.sdx-radar .rd-legend{ list-style:none; margin:10px 0 0; padding:0; font-size:.8em;
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; }
.sdx-radar .rd-legend > li{ display:flex; align-items:center; gap:7px; }
.sdx-radar .rd-legend > li::before{ content:""; width:1.15em; height:.78em; border-radius:2px;
  background:var(--ch-c,var(--chart-1)); }

@media print{
  /* 面ものなので紙の途中で切らない。色は .page の print-color-adjust:exact で出る */
  .sdx-pie,.sdx-bar,.sdx-radar{ break-inside:avoid; }
}

/* ============================ G. 図解 ===================================== */
/* 入れ子ブロック（深さで濃淡。tone-accent / tone-neutral） */
.nested{ border-radius:var(--radius-sm); padding:var(--pad-panel); }
.nested .nested{ margin-top:10px; }
.nested .row{ display:flex; gap:10px; flex-wrap:wrap; } .nested .row > .nested{ flex:1; margin-top:0; }
.nested-title{ font-weight:700; text-align:center; margin:0 0 6px; }
/* ★階層の濃淡に使う色は **--tone-acc**（既定＝主色）。
   主色を紙に近い明るさ（パステルの主色・暗い紙に暗い主色）にすると、主色を 8/16/26/38% 混ぜても
   段差がほとんど生まれず、**深さの違いが見分けられなくなる**（実測：淡いピンクの主色で
   隣接段の差 1.013／面の段差は 1.1 前後ないと分からない）。
   そういうテーマは `--tone-acc` に**濃いほうの同系色（見出し・リンク色など）**を宣言して逃がす
   ＝そのテーマの入れ子だけが直り、ほかのテーマ・ほかのパーツには一切影響しない。 */
.tone-accent{ background:color-mix(in srgb,var(--tone-acc, var(--accent)) 8%, var(--surface)); }
.nested .tone-accent{ background:color-mix(in srgb,var(--tone-acc, var(--accent)) 16%, var(--surface)); }
.nested .nested .tone-accent{ background:color-mix(in srgb,var(--tone-acc, var(--accent)) 26%, var(--surface)); }
.nested .nested .nested .tone-accent{ background:color-mix(in srgb,var(--tone-acc, var(--accent)) 38%, var(--surface)); }
.tone-neutral{ background:color-mix(in srgb,var(--ink) 5%, var(--surface)); }
.nested .tone-neutral{ background:color-mix(in srgb,var(--ink) 11%, var(--surface)); }
.nested .nested .tone-neutral{ background:color-mix(in srgb,var(--ink) 18%, var(--surface)); }

/* ガント（schedule） */
.gantt{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.gantt .scale,.gantt .task{ display:grid; grid-template-columns:140px 1fr; }
.gantt .scale{ background:var(--surface-2); font-size:.78em; color:var(--muted); border-bottom:var(--rule-weight) var(--rule-style) var(--line); }
.gantt .scale .ticks{ display:flex; }
.gantt .scale .ticks span{ flex:1; text-align:center; padding:5px 0; border-left:var(--rule-weight) var(--rule-style) var(--line); }
.gantt .scale .lead-cell{ padding:5px 10px; }
.gantt .task{ border-top:var(--rule-weight) var(--rule-style) var(--line); align-items:center; }
.gantt .task .name{ padding:6px 10px; font-size:.86em; font-weight:600; }
.gantt .task .track{ position:relative; height:2.4em; }
.gantt .bar{ position:absolute; top:3px; bottom:3px; background:var(--accent); border-radius:6px;
  color:#fff; font-size:.72em; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* 進捗（プログレスバー）＝完了部を濃色フィルで2色表現。ラベルは中央（%がある場合はテキストの下に2行）。
   進捗なし（.bar のみ）は1色・%非表示。テキスト（.lab .t）は任意。 */
.gantt .bar .fill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent-fill,var(--accent-ink)); }
.gantt .bar .lab{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; line-height:1.12; text-align:center; padding:0 5px; max-width:100%;
  text-shadow:0 1px 1px rgba(0,0,0,.28); }
.gantt .bar .lab .t{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gantt .bar .lab .p{ font-weight:600; }

/* プログレスバー */
.progress{ background:var(--surface-2); border:var(--rule-weight) var(--rule-style) var(--line);
  border-radius:999px; height:1.1em; overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--accent); color:var(--on-accent,#fff); font-size:.7em;
  text-align:right; padding-right:6px; line-height:1.1em; }

/* タイムライン */
.timeline{ list-style:none; margin:0; padding-left:6px; }
/* 項目の間隔は**下マージン**で取り、最後の項目は 0 にする。以前は下パディングで取っていたため、
   最後の項目にも余白が残り、.timeline 自体の下マージンと重なって二重に空いていた。 */
.timeline > li{ position:relative; padding:0 0 0 22px; margin:0 0 var(--block-gap); }
.timeline > li:last-child{ margin-bottom:0; }
/* 縦の連結線。li の border-left だと下マージンの分で途切れるので疑似要素にし、
   マージン分（bottom を負に）まで伸ばして次の項目の丸まで繋げる。位置は従来の border と同じ -2〜0px。 */
.timeline > li::after{ content:""; position:absolute; left:-2px; top:0;
  bottom:calc(-1 * var(--block-gap)); border-left:2px solid var(--line); }
.timeline > li:last-child::after{ display:none; }
/* 丸は1行目の中心に（式は core.css のリスト節の見出しコメント参照）。縦線は項目全体を通すので触らない */
.timeline > li::before{ content:""; position:absolute; left:-7px;
  top:calc((1em * var(--leading) - 12px) / 2); width:12px; height:12px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--surface); z-index:1; }
.timeline .when{ font-weight:700; color:var(--accent-ink); }

/* マトリクス（象限図・比較グリッド）。
   **セル（事象）の中身はふつうのパーツ（パネル）**を置く＝メイン画面でそのまま編集できる。
   グリッドの形（列見出し・行見出し）だけを専用の「行と列の設定」画面で編集する。
   ・列数はクラス mx-c2〜mx-c6（無指定＝2列＝従来の 2×2 と同じ）
   ・行見出しを持つときだけ .mx-rowhead を付ける＝先頭に見出し用の列を1本足す
   ・--mx-t は「本体側の列指定」だけを持つ。repeat() の中に var() を入れず、値の並びとして
     置換する書き方にしてある（max-content var(--mx-t) ＝ 見出し列＋本体列）。 */
.matrix{ --mx-t:repeat(2,1fr); display:grid; grid-template-columns:var(--mx-t);
  gap:var(--gap-cols); align-items:stretch; }
.matrix.mx-c2{ --mx-t:repeat(2,1fr); }
.matrix.mx-c3{ --mx-t:repeat(3,1fr); }
.matrix.mx-c4{ --mx-t:repeat(4,1fr); }
.matrix.mx-c5{ --mx-t:repeat(5,1fr); }
.matrix.mx-c6{ --mx-t:repeat(6,1fr); }
.matrix.mx-rowhead{ grid-template-columns:max-content var(--mx-t); }
/* 見出しセル。面は持たない（セルのパネルと見分けが付くように）。
   行見出しがあるとき、最初の列見出しは2列目から始める＝左上の空きマスを DOM に作らずに済む。 */
.matrix > .mx-col{ font-weight:700; color:var(--accent-ink); text-align:center; align-self:end; }
.matrix > .mx-row{ font-weight:700; color:var(--accent-ink); align-self:center; max-width:10em; }
.matrix.mx-rowhead > .mx-col:first-child{ grid-column-start:2; }
/* 旧形式のセル（.cell＝h5＋p）。既存文書のために残す（新規はパネルを使う）。 */
.matrix .cell{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius-sm);
  padding:var(--pad-panel); background:var(--surface-2); }
.matrix .cell h5{ margin:0 0 6px; color:var(--accent-ink); }

/* 矢印ブロック */
.arrow-down,.arrow-up,.arrow-right,.arrow-left{ position:relative; background:var(--surface-2);
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius-sm); padding:var(--pad-panel); }
.arrow-down{ margin-bottom:18px; } .arrow-up{ margin-top:18px; }
.arrow-right{ margin-right:18px; } .arrow-left{ margin-left:18px; }
.arrow-down::after,.arrow-up::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); border:9px solid transparent; }
.arrow-down::after{ bottom:-18px; border-top-color:var(--accent); }
.arrow-up::after{ top:-18px; border-bottom-color:var(--accent); }
.arrow-right::after,.arrow-left::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); border:9px solid transparent; }
.arrow-right::after{ right:-18px; border-left-color:var(--accent); }
.arrow-left::after{ left:-18px; border-right-color:var(--accent); }

/* 横並びステップ */
.steps-h{ list-style:none; margin:0; padding:0; display:flex; counter-reset:sh; }
.steps-h > li{ flex:1; text-align:center; position:relative; padding:38px 6px 0; counter-increment:sh; font-size:.9em; }
.steps-h > li::before{ content:counter(sh); position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--on-accent,#fff); font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.steps-h > li::after{ content:""; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--line); z-index:-1; }
.steps-h > li:first-child::after{ display:none; }

/* ============================ H. 構造（表紙・目次） ====================== */
/* 形の値（余白・間隔・表題の大きさ）は表紙デザインのページヘッダー（styledocx-doc.css）と同じ --hdr-cover-* を読む。 */
.cover{ background:var(--header-bg); color:var(--header-ink); text-align:center;
  padding:var(--hdr-cover-pad-y, 64px) var(--hdr-cover-pad-x, 40px); display:flex; flex-direction:column; align-items:center; gap:var(--hdr-cover-gap, 14px); }
.cover .ctitle{ font-family:"SDX Yen",var(--font-head); font-weight:var(--hdr-cover-weight, 800); font-size:calc(var(--font-base) * var(--hdr-cover-size, 2.2) * var(--scale)); line-height:var(--hdr-cover-lh, 1.4); }
.cover .csub{ color:var(--header-sub); }
.toc{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius-sm); padding:var(--pad-panel); }
.toc ol{ list-style:none; counter-reset:toc; margin:0; padding:0; }
.toc li{ counter-increment:toc; display:flex; align-items:baseline; gap:10px; padding:5px 0; }
.toc li::before{ content:counter(toc); flex:0 0 auto; width:22px; height:22px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:.78em;
  display:flex; align-items:center; justify-content:center; }
/* 先頭の番号を出さない（目次編集画面の「先頭の番号を表示しない」）。
   ★`display:none` で消す＝flex から外れるので、番号のぶんの隙間（gap）も一緒に消える。
     章番号を見出しの文字自身に書いている文書（「第1章 …」など）では番号が二重になるため。 */
.toc.toc-nonum li::before{ display:none; }
.toc .dots{ flex:1; border-bottom:1px dotted var(--line); position:relative; top:-3px; }
.toc .pg{ color:var(--muted); font-size:.86em; }
/* 目次の段（インデント）。段は li の lv2 / lv3（段1はクラスを付けない）。
   ★字下げは `.toc-indent` を付けたときだけ効く＝**段の情報は持ったまま、見せ方だけ切り替えられる**
     （インデントを外しても目次を作り直す必要がない）。
   ★幅は em ＝文字サイズに追随する。テーマで変えたいときは --toc-indent を上書きする。 */
.toc{ --toc-indent:1.7em; }
.toc.toc-indent li.lv2{ padding-left:var(--toc-indent); }
.toc.toc-indent li.lv3{ padding-left:calc(var(--toc-indent) * 2); }

/* ============================ I. 装飾・ユーティリティ =================== */
.u-center{ text-align:center; } .u-right{ text-align:right; } .u-left{ text-align:left; }
.u-bold{ font-weight:700; } .u-mono{ font-family:"SDX Yen","BIZ UDGothic","MS Gothic",Consolas,monospace; }
.u-fs-ss{ font-size:.62em; } .u-fs-s{ font-size:.82em; } .u-fs-l{ font-size:1.2em; }
.u-fs-ll{ font-size:1.5em; } .u-fs-xl{ font-size:1.85em; }
/* 見出しの倍率。**見出しパーツすべて**が --fs-mul を見る（0.2.99 で全見出しに拡張）。
   .u-fs-* が「親の字サイズ基準(em)」なのに対し、こちらは「その見出し本来の大きさ」に対する倍率
   ＝見出しの階層感を保ったまま大小できる。 */
.fs-x05{ --fs-mul:.5; } .fs-x075{ --fs-mul:.75; } .fs-x09{ --fs-mul:.9; }
.fs-x125{ --fs-mul:1.25; } .fs-x15{ --fs-mul:1.5; } .fs-x175{ --fs-mul:1.75; } .fs-x2{ --fs-mul:2; }
.u-indent{ text-indent:1em; } .u-hang{ text-indent:-1em; padding-left:1em; }
.u-lh-tight{ line-height:1.4; } .u-lh-loose{ line-height:2.1; }
.u-break{ word-break:break-all; } .u-nowrap{ white-space:nowrap; }
.u-border{ border:var(--rule-weight) var(--rule-style) var(--line); }
.u-dotted{ border:1px dotted var(--line); }
.u-radius-tl{ border-top-left-radius:var(--radius); } .u-radius-tr{ border-top-right-radius:var(--radius); }
.u-radius-bl{ border-bottom-left-radius:var(--radius); } .u-radius-br{ border-bottom-right-radius:var(--radius); }
.ornament-a{ border:2px dashed var(--c-important); border-radius:6px; padding:1px 7px; }
.ornament-b{ background:var(--c-note-soft); border-radius:4px; padding:1px 7px; }
.u-fill-soft{ background:var(--accent-soft); }
.overflowAuto{ overflow-x:auto; }
/* 表示条件（画面／印刷の出し分け・改ページ回避）。パーツの「表示条件」オプションが付けるクラス。
   - u-noprint  : 画面だけに出す（ナビ・ボタン・操作説明など、紙に不要なもの）。後読みCSSの
                  display 指定（.cluster{display:flex} 等）に勝つ必要があるので !important。
   - u-printonly: 紙にだけ出す（送付状・押印欄など）。**編集画面（body.sdx-edit）では見える**
                  ＝隠すと選択も編集もできなくなるため。表示モード・出力HTMLでは画面から消える。
   - u-avoid-break: このブロックを途中で改ページしない。 */
@media print{ .u-noprint{ display:none !important; } }
@media screen{ body:not(.sdx-edit) .u-printonly{ display:none; } }
.u-avoid-break{ break-inside:avoid; }

/* ============================ K. 帳票（見積書・請求書） ==================
   罫線主体の日本の実務帳票（見積書・請求書）用パーツ。色はすべてトークン参照
   （var(--accent)/--line/--accent-soft/--accent-ink 等）＝白黒/淡グレー/少量カラーの差は
   カラーテーマ側で吸収する。帳票デザインテーマ td-ledger と組み合わせて使う。 */

/* 帳票ヘッダー＝ページヘッダーの帳票変種：背景なし・右上に発行日/番号・中央に大きめゴシックのタイトル。
   左右余白は base .page-header と同じ --pg-mx を共有＝本文の左右端と揃う。 */
.page-header.page-header-invoice{
  background:none; color:var(--ink);
  position:relative; text-align:center;
  padding-top:var(--hdr-inv-pad-t, calc(var(--space) * 1.5)); padding-bottom:var(--hdr-inv-pad-b, calc(var(--space) * 1.1));
  /* 背景なしヘッダー＝印刷時は左右余白0で本文（明細表）と左右端を揃える。背景を消すのと同じ場所で
     宣言＝背景の有無とマージンが必ず連動する（core.css @media print が --header-print-mx を参照）。 */
  --header-print-mx:var(--pg-mx-print, 0);
}
.page-header-invoice .inv-meta{
  position:absolute; top:calc(var(--space) * 1.5); right:var(--pg-mx, calc(var(--space) * 2.6));
  text-align:right; font-size:.8em; color:var(--muted); line-height:1.55; font-variant-numeric:tabular-nums;
}
.page-header-invoice .inv-title{
  margin:0; padding-left:.4em; font-family:"SDX Yen",var(--font-head); font-weight:var(--hdr-inv-weight, 800); color:var(--hdr-inv-color, var(--accent));
  font-size:calc(var(--font-base) * var(--hdr-inv-size, 1.9) * var(--scale)); letter-spacing:var(--hdr-inv-tracking, .4em); line-height:1.3;
}
.page-header-invoice .inv-title::after{
  content:""; display:block; width:var(--hdr-inv-ul-w, 70px); height:var(--hdr-inv-ul-h, 2px); background:var(--hdr-inv-ul-c, var(--accent)); margin:9px auto 0;
}
/* 印刷: core.css @media print の「.page-header-invoice .inv-meta{ right:… }」は、後に読まれる本ファイルの
   上記 .inv-meta 画面用ルール（同詳細度）に源順で負けて効かない（@media はカスケード順位を上げない）。
   後勝ち側のここで、変種1段上の詳細度＋本文(page-body)と同じ --pg-mx-print 直接参照で印刷時の
   左右端を本文と揃える（padding は core.css の汎用ルールで既に0だが、将来の同詳細度上書きから保護）。 */
@media print{
  .page-header.page-header-invoice{ padding-left:var(--pg-mx-print, 0); padding-right:var(--pg-mx-print, 0); }
  .page-header.page-header-invoice .inv-meta{ right:var(--pg-mx-print, 0); }
}

/* 宛先＋発行者ブロック：左＝○○御中/住所/件名、右＝自社名/住所/登録番号/印。2カラム */
.inv-parties{ display:flex; justify-content:space-between; gap:calc(var(--space) * 1.3); align-items:flex-start; }
.inv-parties > .inv-to{ flex:1.15; min-width:0; }
.inv-parties > .inv-from{ flex:1; min-width:0; text-align:right; }
.inv-to-name{ display:inline-block; font-weight:700; font-size:1.05em;
  border-bottom:1px solid var(--accent); padding-bottom:3px; }
.inv-to-addr{ margin-top:6px; font-size:.86em; color:var(--muted); }
.inv-subject{ margin-top:10px; font-size:.95em; }
.inv-subject > .inv-l{ font-weight:700; }
.inv-from-name{ font-weight:700; font-size:1.02em; }
.inv-from-addr{ margin-top:2px; font-size:.86em; color:var(--muted); }
.inv-reg{ margin-top:3px; font-size:.86em; color:var(--muted); letter-spacing:.02em; }

/* ご請求金額枠：ラベル＋大きな金額の横並び（枠＝アクセント罫・淡色地・濃色文字で強調） */
.inv-total{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 16px; border:1px solid var(--accent); background:var(--accent-soft);
  color:var(--accent-ink); border-radius:var(--radius-sm); }
.inv-total > .inv-total-lbl{ font-weight:700; font-size:.98em; letter-spacing:.04em; }
.inv-total > .inv-total-amt{ font-family:"SDX Yen",var(--font-head); font-weight:800; letter-spacing:.02em;
  font-size:calc(var(--font-base) * 1.5 * var(--scale)); font-variant-numeric:tabular-nums; }

/* 集計：小計・消費税・合計の右寄せ2列（合計を強調） */
.inv-sum{ width:min(260px,100%); margin-left:auto; font-variant-numeric:tabular-nums; }
.inv-sum > .inv-sum-row{ display:flex; justify-content:space-between; gap:16px;
  padding:5px 6px; border-bottom:1px solid var(--line); }
.inv-sum > .inv-sum-row > .inv-l{ color:var(--muted); }
.inv-sum > .inv-sum-row.grand{ margin-top:2px; padding-top:8px; border-bottom:none;
  border-top:2px solid var(--accent); font-weight:800; font-size:1.12em; color:var(--accent-ink); }
.inv-sum > .inv-sum-row.grand > .inv-l{ color:var(--accent-ink); font-weight:800; }

/* ============================ J. 縦リズム（段別マージン） ================
   案A: 各パーツが自分の下マージンを持つ。.block 包みは任意のグルーピングに。
   段階: テキスト(--gap-text) ≦ パーツ/.block(--block-gap) ≦ セクション(--gap-section 既定=--block-gap)。
   見出し(.title-*)・.divider・.arrow-* 等は自前マージンを維持（下記グループに含めない）。
   本節は parts.css 末尾＝（sdxdoc を除き）最後に読み込まれるため、
   各パーツ定義の margin:0 を後勝ちで上書きできる。節内も後の規則ほど強い。 */

/* --- ブロック段（自立コンポーネント）--- */
.panel,.ribbon-panel,.callout,.cards,.card,.table,.tablewrap,.meta,.frame,.spec,.pipeline,.flow,
.gantt,.timeline,.matrix,.stats,.appeal,.qa,.sticky,.stickies,.toc,.cover,.title-article,.progress,
.steps-h,.cols,.cols-2,.cols-3,.cols-1to2,.cols-2to1,.cols-1to3,.cols-auto,.aside,.stack,
.cluster,.multicol,.illustList,.inv-parties,.inv-total,.inv-sum,
.sdx-pie,.sdx-bar,.sdx-radar{ margin-bottom:var(--block-gap); }
/* 入れ子ブロック: 最上位は下マージン。内側 .nested（直下も .row 内も）は自前の margin-top:10px で詰めるため0 */
.nested{ margin-bottom:var(--block-gap); }
.nested .nested{ margin-bottom:0; }

/* --- テキスト段（散文に馴染む小さめ）--- */
.list-plain,.list-check,.list-step,.list-disc,.list-decimal,.list-arrow,.list-inline,
.split,.term-list,.blockquote,.example,.dropcap{ margin-bottom:var(--gap-text); }

/* --- セクション段（既定＝--block-gap の 1.4 倍＝コンテナブロックより少し広め。テーマが
       --gap-section を定義したらそれで上書き。calc はセクション要素上で評価＝テーマの --block-gap 追従）。
       section は常に .block を兼ねるため section.block で .block(0,1,0) に勝たせる。 --- */
section,section.block{ margin-bottom:var(--gap-section, calc(var(--block-gap) * 1.4)); }
/* 節の上の余白（倍率×--gap-head）。Webサイトテーマが節の頭を大きく空けるのに使う（旧 website.css の
   `.td-website section.block:not(:first-child)`）。先頭の節では空けない。既定 0＝従来どおり。 */
section.block:not(:first-child){ margin-top:calc(var(--gap-head, 10px) * var(--sec-mt, 0)); }

/* --- grid/flex コンテナの中は gap に一任（子の下マージンを消す）--- */
.cols > *,.cols-2 > *,.cols-3 > *,.cols-1to2 > *,.cols-2to1 > *,.cols-1to3 > *,.cols-auto > *,
.cards > *,.stack > *,.aside > *,.cluster > *,.matrix > *,.stats > *,.pipeline > *,
.qa > *,.steps-h > *,.stickies > *,.tiles > *{ margin-bottom:0; }

/* --- ★「余白を調整」（右クリック）＝**インライン style には変数だけ**を書き、実際の指定はここで受ける。
       ★★**インライン style に直接書いてはいけない**＝インラインは**必ず**勝つので、
         下の「器の端を詰める」規則が効かなくなる（ユーザー報告：インデントの最初の子に
         上下マージンを付けたら、器の先頭なのに上マージンが出た）。
       ★デザインテーマ追従は**変数の中身**（`var(--space)` / `calc(var(--block-gap)*2)` 等）が担う。
       ★★**クラスを2度書いて (0,2,0) にしてある**＝パーツ自身の余白指定に**読み込み順によらず勝つ**ため。
         `.linkblock{padding:0}`（styledocx-doc.css）や `.web-nav{padding:…}`（web-parts.css）は
         **parts.css より後に読まれる**ので、(0,1,0) のままだと**指定しても効かない**（実測で 12 件）。
         `section.block`(0,1,1) や `.nested .nested`(0,2,0) にも同じ理由で勝てる。 --- */
.sdx-sp-pb.sdx-sp-pb{ padding-block:var(--sdx-pb); }
.sdx-sp-pi.sdx-sp-pi{ padding-inline:var(--sdx-pi); }
.sdx-sp-mb.sdx-sp-mb{ margin-block:var(--sdx-mb); }
.sdx-sp-mi.sdx-sp-mi{ margin-inline:var(--sdx-mi); }
/* --- ★器の先頭/末尾では、上の余白指定より**器の端を詰めるほう**を優先する。
       ここが今回の要（ユーザー報告の直接の答え）。上を (0,2,0) にしたので、
       こちらは **`:is(器) > .sdx-sp-mb:first-child` = (0,4,0)** で確実に勝たせる
       （`:is()` の詳細度は中でいちばん強いもの＝`.spec .body` の (0,2,0)）。 --- */
:is(.page-body,.block,.indent,.panel,.ribbon-panel,.callout,.card,.frame,.spec .body,
   .blockquote,.toc,.appeal,.tablewrap,.table td,.table th,.nested,.title-article .ta-b,
   .matrix .cell,.qa .q,.qa .a,.aside .sidenote,.cover,
   .arrow-down,.arrow-up,.arrow-right,.arrow-left,.page-header,.page-header-cover,
   .web-nav,.web-hero,.web-features,.web-cta,.web-pricing,.plan,.web-faq,.web-footer,.wf-col)
  > .sdx-sp-mb:first-child{ margin-top:0; }
:is(.page-body,.block,.indent,.panel,.ribbon-panel,.callout,.card,.frame,.spec .body,
   .blockquote,.toc,.appeal,.tablewrap,.table td,.table th,.nested,.title-article .ta-b,
   .matrix .cell,.qa .q,.qa .a,.aside .sidenote,.cover,
   .arrow-down,.arrow-up,.arrow-right,.arrow-left,.page-header,.page-header-cover,
   .web-nav,.web-hero,.web-features,.web-cta,.web-pricing,.plan,.web-faq,.web-footer,.wf-col)
  > .sdx-sp-mb:last-child{ margin-bottom:0; }

/* --- コンテナ末尾の子の下マージンを消す（padding/BFC で相殺されない箱の対策）。
       ★これらの器は `display:flow-root`（＝BFC）なので、**子のマージンは外へ相殺されず
         器の中に閉じ込められる**。だから端を明示的に詰める。
       最後に置くことで上のパーツ段マージン・余白の指定に勝つ（同詳細度・後勝ち）。
       ★続き258 で **矢印ブロックと web系パーツ**を追加＝自前のパディングを持つのに
         一覧に無く、**下側が 13.5px 余っていた**（実測）。 --- */
.page-body > :last-child,.block > :last-child,.indent > :last-child,.panel > :last-child,
.ribbon-panel > :last-child,
.callout > :last-child,.card > :last-child,.frame > :last-child,.spec .body > :last-child,
.blockquote > :last-child,.toc > :last-child,.appeal > :last-child,
.tablewrap > :last-child,.table td > :last-child,.table th > :last-child,
.nested > :last-child,.title-article .ta-b > :last-child,.matrix .cell > :last-child,
.qa .q > :last-child,.qa .a > :last-child,.aside .sidenote > :last-child,.cover > :last-child,
.arrow-down > :last-child,.arrow-up > :last-child,.arrow-right > :last-child,.arrow-left > :last-child,
.page-header > :last-child,.page-header-cover > :last-child{ margin-bottom:0; }
/* --- ★先頭の子の上マージンを消す（上の一覧と**対になる規則**）。
       これまで無かったのは「各パーツは下マージンだけを持ち、上は 0」という縦リズムの
       前提があったため＝**上マージンを持つものが無いので要らなかった**。
       「余白を調整」で上下マージンを指定できるようになって**対称でないことが表に出た**
       （ユーザー報告）。★上の余白クラス(0,1,0)より後ろ・同詳細度以上なので、
       器の先頭では**端の詰めが勝つ**。 --- */
.page-body > :first-child,.block > :first-child,.indent > :first-child,.panel > :first-child,
.ribbon-panel > :first-child,
.callout > :first-child,.card > :first-child,.frame > :first-child,.spec .body > :first-child,
.blockquote > :first-child,.toc > :first-child,.appeal > :first-child,
.tablewrap > :first-child,.table td > :first-child,.table th > :first-child,
.nested > :first-child,.title-article .ta-b > :first-child,.matrix .cell > :first-child,
.qa .q > :first-child,.qa .a > :first-child,.aside .sidenote > :first-child,.cover > :first-child,
.arrow-down > :first-child,.arrow-up > :first-child,.arrow-right > :first-child,.arrow-left > :first-child,
.page-header > :first-child,.page-header-cover > :first-child{ margin-top:0; }
/* --- ★**透過な器**（共有コンテナ・リンクブロック等＝flow-root でもパディングも持たない）は、
       子のマージンが相殺で外へ抜けることで自分の外側の間隔を作っている＝**無条件に詰めてはいけない**
       （`.linkblock` の CSS にその旨の記載あり）。**パディングを入れたときだけ**相殺が止まるので、
       そのときだけ詰める。`[style*=…]` は「余白を調整」を使う前の古い文書と手書きの padding 用。
       ★左右のパディングは相殺に関係しないので block 方向だけを見る。 --- */
.sdx-sp-pb > :first-child,[style*="padding-block"] > :first-child{ margin-top:0; }
.sdx-sp-pb > :last-child,[style*="padding-block"] > :last-child{ margin-bottom:0; }
/* アピールは中身を詰めて配置（要素の追加/並べ替え・削除→再追加で下マージンが変動しないように、
   最後だけでなく全要素の下マージンを 0 に。元の [見出し+本文] のタイトな見た目も維持）。 */
.appeal > *{ margin-bottom:0; }
/* リストの項目（li）は中身を段落（p）で持つ＝表のセルと同じ作り（editor.js の normalizeListItems）。
   p は既定で下に --gap-text を持つので、そのままだと**項目1つごとにその余白ぶん背が伸びる**。
   最後の子の下マージンだけを消す＝1段落の項目は今までと同じ高さ、項目の中で段落を2つに分けた
   ときだけ段落どうしの間隔が出る。
   ★入れ子のリストにも効かせたいので子孫（空白区切り）で書く。入れ子の ul には親のクラスが
     付かない（項目側の li で受ける形になる）。
   ★マーカー（li::before）の位置は li の padding 基準なので、この規則では動かない。 */
:is(.list-check,.list-step,.list-disc,.list-decimal,.list-arrow,.list-plain) li > :last-child{
  margin-bottom:0; }
/* 段組の各列（grid セル）は、中の最後の要素の下マージンが列内に閉じ込められ（グリッドアイテムは
   マージンが外へ相殺されない）、段組の下に余分な余白として残る＝段組を2つ重ねると間が広く見える。
   列内の最終要素の下マージンを 0 にし、段組自身の下マージンだけで間隔を作る。 */
.cols > * > :last-child,.cols-2 > * > :last-child,.cols-3 > * > :last-child,.cols-1to2 > * > :last-child,
.cols-2to1 > * > :last-child,.cols-1to3 > * > :last-child,.cols-auto > * > :last-child,
.aside > * > :last-child,.tiles > * > :last-child{ margin-bottom:0; }

/* ============================ L. 濃い面と文字色（全パーツ共通）============
   ■ 何が起きていたか（実測: 95パーツ × 濃色コンテナ4種 ＝ 380通り中 **99通り**が 3:1 未満）
     ・濃い面（ページヘッダー等）の中に**自分で明るい面を塗るパーツ**（テーブル・パネル・
       コードブロック・付箋…）を置くと、**白い文字が明るい面に乗って消える**（例 1.02）。
     ・逆に、濃い面の上で `--accent-ink` / `--muted` を使う文字（見出し・目次・注釈・グラフの値）は
       **地色に沈む**（例 1.05）。
     ・テーブルの縞は「1行おきに色を敷く」だけなので、**面が無いと濃い地が1行おきに透けて**
       明暗が交互になり縞が崩れる。
   これまではコンテナごとに「この一覧のパーツだけ文字色を戻す」を **core.css / parts.css /
   layers.css の3か所**に書いていたため、パーツを足すたびに漏れて同じ不具合が再発していた。

   ■ 直し方＝**色をトークンで受け渡す**。パーツごとに白/黒を書かない。
     ① 濃い面は `--oc-ink`（その面での文字色）だけを宣言する。
        下の共通ルールが `--ink` / `--muted` / `--line` / `--accent-ink` をまとめて差し替えるので、
        **面を塗らないパーツ（見出し・段落・リスト・目次・グラフ等）は何も書かなくても読める色**になる。
     ② **自分で明るい面を塗るパーツ**だけが、控えた素の値（`--*-base`）へ戻す。
        その中はいつもの文書の色になり、さらに内側に濃い面を置けば①がまた効く
        ＝**入れ子が何段でも破綻しない**（トークンは継承で伝わるだけなので順序にも依存しない）。
   ■ パーツを足すときに考えることは1つだけ＝**「自分で面を塗るか？」**。塗るなら②の一覧に入れる。
      塗らないなら何もしなくてよい。 */

/* ① 濃い面＝その面での文字色を --oc-ink に置く（値が違うだけで扱いは同じ） */
.page-header:not(.sdx-layers):not(.page-header-invoice),
.cover{ --oc-ink:var(--header-ink,#fff); --eyebrow-c:var(--header-sub); }
/* アクセント地の面（強調パネル・帯見出しの帯）は **`--on-accent`** に従う。
   アクセントが明るいテーマ（フレッシュライム・ミント・パウダーブルー・アプリコット）や、
   アクセントが明るい色になるダークテーマ（ナイト・ノワール）では白文字が 3:1 に届かない
   （実測 1.95〜2.85）。該当テーマだけが color-themes.css で `--on-accent` を宣言し、
   宣言の無いテーマは従来どおり白のまま＝**見た目が変わるのは必要な6テーマだけ**。
   濃色レイヤーは地色をユーザーが決めるのでテーマから決められない＝白のまま（既定）。 */
/* アクセント地の「面」はまとめてここ。中の見出し・段落・リンクも自動でこの色になる。 */
.panel.invert,.title-article.ta-bar:not(.tah-surface):not(.tah-none) > .ta-h,
.title-article.tah-accent > .ta-h,.title-ribbon.rb-accent,.ribbon-panel.rp-accent,
.web-cta,.pagetop,.web-nav.wn-invert{ --oc-ink:var(--on-accent,#fff); }
.sdx-layers.ink-light > .lay.body{ --oc-ink:#fff; }
/* 警告の中の文字色＝デザインテーマ → カラーテーマ → 既定 の順（core.css の .callout.is-warn と同じ並び） */
.callout.is-warn{ --oc-ink:var(--p-co-warn-fg, var(--co-warn-ink,#f5f5f5)); }
.page-header:not(.sdx-layers):not(.page-header-invoice),.cover,
.panel.invert,.callout.is-warn,.sdx-layers.ink-light > .lay.body,
.title-article.ta-bar:not(.tah-surface):not(.tah-none) > .ta-h,
.title-article.tah-accent > .ta-h,.title-ribbon.rb-accent,.ribbon-panel.rp-accent,
.web-cta,.pagetop,.web-nav.wn-invert{
  --ink:var(--oc-ink,#fff);
  /* ★補助色は濃い面では**本文と同じ色**にする。薄くすると読めなくなるため。
     アンバーのようにアクセントが明るいテーマでは、白文字ですら 3.18 しか出ない
     （実測）＝薄める余地が無い。面積の小さい濃い面では階調より可読性を優先する。
     ヘッダー/表紙のサブタイトルは --eyebrow-c で別に階調を持たせてある。 */
  --muted:var(--oc-ink,#fff);
  --line:color-mix(in srgb, var(--oc-ink,#fff) 32%, transparent);
  --accent-ink:var(--oc-ink,#fff);
  color:var(--ink);
}
/* ★見出し付き枠の帯だけは、地の色をユーザーが決められる（--tah-bg / --tah-fg）。
   文字色の指定があれば**この仕組みの入口（--oc-ink）に流し込む**＝色を上書きするのではなく
   「濃い面の文字色」そのものを差し替える。こうすると --muted / --line / --accent-ink も一緒に
   追随し、帯の中の副次的な文字まで正しい色になる（color を後から上書きすると、ここだけ直って
   中の補助文字が白のまま残る）。この宣言は上のブロックより**後**に置く必要がある。 */
.title-article.ta-bar:not(.tah-surface):not(.tah-none) > .ta-h,
.title-article.tah-accent > .ta-h{ --oc-ink:var(--tah-fg, var(--on-accent,#fff)); }
.title-ribbon.rb-accent{ --oc-ink:var(--rb-fg, var(--on-accent,#fff)); }
.ribbon-panel.rp-accent{ --oc-ink:var(--rp-fg, var(--on-accent,#fff)); }

/* ② 自分で明るい面を塗るパーツ＝素の色に戻す。
   ★この一覧は「面を塗る要素」を実測で洗い出したもの（背景色の明度 > 0.45）。
     濃い面を塗るもの（.panel.invert / .badge / .btn / バーの塗り等）は入れない＝①側または
     自前で白文字を持っているため。
   ★「装飾なし」のコードブロック（.cb-plain）は**面を塗らない**ので必ず外す。入れたままだと
     濃色パネルの中で地は濃いのに文字だけ素の濃色へ戻り、読めなくなる。 */
.panel:not(.invert),.callout:not(.is-warn),.card,.stat,.appeal,.blockquote,.kbd,
.code-block:not(.cb-plain),.sticky,.tag,.sec-no,.kicker,.title-ribbon:not(.rb-accent),.ribbon-panel:not(.rp-accent),
.title-article:not(.ta-bar):not(.tah-accent) > .ta-h,
.qa .q,.aside > .sidenote,.pipeline .stage,.matrix .cell,.gantt .scale,.list-inline > li,
.progress,.illustList,.inv-total,.meta dt,
.arrow-down,.arrow-up,.arrow-right,.arrow-left,
.table,.sdx-calendar,.sdx-timesched .ts-time,.flow .ico,
.web-nav:not(.wn-invert):not(.wn-header):not(.wn-plain),.web-faq,.web-hero,.web-footer,
.web-features .feat,.web-pricing .plan,
.btn-list.bl-boxed,.tone-accent,.tone-neutral{
  --ink:var(--ink-base); --muted:var(--muted-base);
  --line:var(--line-base); --accent-ink:var(--accent-ink-base);
  color:var(--ink);
}
/* ★明るい面の側でも、見出し付き枠の見出し部分だけは文字色を指定できる（--tah-fg）。
   ②が --ink を素の色に戻したうえで color:var(--ink) を当てているので、**--ink を差し替える**
   （color を後から上書きするのではなく入口を替える＝①側と同じ考え方）。 */
.title-article:not(.ta-bar):not(.tah-accent) > .ta-h{ --ink:var(--tah-fg, var(--ink-base)); }
/* ★文字色の指定は --ink だけでなく **--muted / --accent-ink にも流し込む**。
   ②は「明るい面」前提で --accent-ink / --muted を素の値へ戻すが、自由色で**濃い地**を指定すると
   本文だけが指定色になり、パネルタイトル（--accent-ink）と補助文字（--muted）が濃いまま残って
   地に沈む（実測：地 #4b2e83 にタイトル #2a527c ＝ コントラスト 1.3）。①側が --oc-ink 一本で
   まとめて追随させているのと同じ考え方を、②側にも通す。
   ★var() の第2引数が効くので、**自由色が未指定なら従来どおり素の値**になる（既存文書は不変）。 */
.title-ribbon:not(.rb-accent){ --ink:var(--rb-fg, var(--ink-base));
  --muted:var(--rb-fg, var(--muted-base)); --accent-ink:var(--rb-fg, var(--accent-ink-base)); }
.ribbon-panel:not(.rp-accent){ --ink:var(--rp-fg, var(--ink-base));
  --muted:var(--rp-fg, var(--muted-base)); --accent-ink:var(--rp-fg, var(--accent-ink-base)); }
/* ボタンは濃い面の上では**白地＋アクセント文字**に反転する設計（web-parts.css / layers.css）。
   その「アクセント文字」が濃い面のトークン差し替えで白になるので、素の値へ戻す。
   ★ただし **color は触らない**＝素のボタン（アクセント地＋白文字）の文字色を奪ってしまうため
     （実測: 触ると白地の本文でも 2.52 まで落ちた）。トークンだけ戻せば足りる。
   ★ghost（枠線だけ・地は透明）は面を塗らないので**入れない**＝濃い面ではその面の文字色に従う。 */
.btn:not(.ghost){
  --ink:var(--ink-base); --muted:var(--muted-base);
  --line:var(--line-base); --accent-ink:var(--accent-ink-base);
}
/* テーブルとカレンダーは**自分の面を塗る**。セルの色（縞・行見出し・曜日）は
   「一部のセルだけ」に敷くものなので、面が無いと濃い地が透けて交互になる（ユーザー報告）。
   面を持たせれば、どんな地の上でも本来の縞に見える。 */
.table,.sdx-calendar{ background:var(--surface); }