@charset "UTF-8";
/* =============================================================================
   StyleDoc — ドキュメント用 HTML/CSS ライブラリ（コア）
   設計方針:
   - カラーテーマ（色）と デザインテーマ（形）を完全分離（直交）。
     * カラーは色トークンだけを設定 → color-themes.css の .tc-*
     * デザインは 余白/角丸/罫線/影/書体 トークンだけを設定 → design-themes.css の .td-*
   - コンポーネントは「色は色トークン・形はデザイントークン」だけを参照（直書きしない）。
   - 余白・パディング・角丸などは下記 CSS 変数で一括変更可能。
   - illustList（イラストグリッド）と fs（フォルダツリー）は TechnoStyle の機構を流用。
   ============================================================================= */

/* =============================================================================
   ★U+005C を必ず「¥」（円記号）の字形で見せるための1文字フォント
   -----------------------------------------------------------------------------
   同じ U+005C を、和文フォントは JIS の名残で「¥」、欧文フォント（Segoe UI・Arial・Consolas・
   Noto Sans JP 等）は「\」で描く。**どちらに見えるかがフォント任せ**になるため、Windows の
   フォルダパスの見え方が文書ごと・PCごとに変わってしまう。
   そこで**この1文字だけ**を和文フォントから借りて、**どこでも「¥」**にそろえる
   （`unicode-range` で U+005C に限定）。
   ★ほかの文字（英数字を含む）は**今までどおりのフォントのまま**＝ほかの見え方は変わらない。
   ★`local()` しか使わないので、外部ファイルの読み込みもネットワークも発生しない。
     和文フォントが1つも無い環境では、このファミリは無視されて従来どおりになるだけ。
   ============================================================================= */
@font-face{
  font-family:"SDX Yen";
  src:local("Yu Gothic"), local("Meiryo"), local("MS PGothic"), local("MS Gothic"),
      local("BIZ UDGothic"), local("Hiragino Kaku Gothic ProN"), local("Hiragino Sans");
  unicode-range:U+005C;
}

/* ---------------------------------------------------------------------------
   1. 既定トークン（テーマ未指定でも成立する初期値）
   --------------------------------------------------------------------------- */
:root{
  /* --- 意味色（固定層：どのテーマでも上書きしない） --- */
  --c-important:#c0392b;  --c-important-soft:#fcebe9;
  --c-note:#b07d12;       --c-note-soft:#fff6e2;
  --c-ref:#2563eb;        --c-ref-soft:#e9effe;
  /* コールアウト（注記）用のニュートラルグレー階調＝テーマ非依存。2段運用（情報/警告）、is-note は後方互換の中間。
     意味はアイコンが担うので色に依存しない。暗紙テーマ時はこの --co-* を反転セットで上書きする想定。 */
  --co-info-bg:#e9e9e9; --co-info-ink:#5f5f5f; --co-info-bar:#d0d0d0;
  --co-warn-accent:#e2554b;  /* 警告の左帯・アイコンは固定の赤（危険＝普遍色。暗箱に映える） */
  --co-note-bg:#e1e1e1; --co-note-ink:#3b3b3b; --co-note-bar:#a8a8a8;
  --co-warn-bg:#4d4d4d; --co-warn-ink:#f5f5f5; --co-warn-bar:#2b2b2b;
  --c-ok:#2e9e6b;         --c-ok-soft:#e7f6ee;

  /* --- カラートークン既定（= 中立スレート系。.tc-* で上書き） --- */
  --bg:#eef1f5;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --ink:#26303b;
  --muted:#647082;
  --line:#e3e8ef;
  --accent:#3a6ea5;
  --accent-ink:#2a527c;
  --accent-soft:#e9f0f8;
  --header-bg:linear-gradient(135deg,#2f4a6b 0%,#3a6ea5 100%);
  --header-ink:#ffffff;
  --header-sub:#cdddef;
  --table-head-bg:#2f4a6b;
  --table-head-ink:#ffffff;
  --table-stripe:#f5f8fc;
  /* 流用機構へ供給（色）。★イラスト面はダークでも明色のまま維持＝あえて実値で置く。
     ★**他のトークンを var() で中継するものは :root に置かない**（下の .page で宣言する）。 */
  --illustList-bgColor:#f4f5f7;
  --illustList-fontColor:#2a3340;

  /* --- デザイントークン既定（= ゆったり寄りの標準。.td-* で上書き） --- */
  --font-body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --font-head:var(--font-body);
  --font-base:15px;
  --scale:1;            /* 見出しスケール倍率 */
  --leading:1.8;        /* 本文行間 */
  --tracking:.01em;     /* 字間 */
  --head-weight:700;

  --space:16px;                         /* 基準インライン余白 */
  --block-gap:20px;                     /* 縦リズム基準＝ブロック段の下マージン（テーマが上書き） */
  --gap-text:.9em;                      /* 段落・リスト等テキスト系（em＝字サイズに追従） */
  /* セクション段は既定で --block-gap と同値（＝後方互換）。テーマ側で --gap-section を
     定義したときだけ拡大する（parts.css は var(--gap-section, var(--block-gap)) を参照）。
     注: :root で --gap-*: var(--block-gap) と中間トークン化すると :root 値(20px)で
     固定されテーマ(body の .td-*)追従しないため、ブロック段は --block-gap を直接参照する。
     同じ理由で、次の2つも「使う場所で var(トークン, 既定値)」の形にしてある（:root には置かない）:
       --gap-head  … 見出しの下マージンの基準。hero/lg/md/sm が 1.2/1/.8/.6 倍で参照する（既定10px）。
       --gap-block … コンテナ(.block)の下マージン（既定は --block-gap の1.25倍＝パーツより少し広い）。 */
  --pad-panel:18px;                     /* パネル内側 */
  --pad-cell-y:9px;  --pad-cell-x:13px; /* 表セル */
  --gap-cols:18px;                      /* 段組ギャップ */
  --gap-card:16px;

  --page-w:960px;                       /* 用紙の設計幅（縦=960px→A4縦印刷幅182mm）。横向きは 1420px に上書き */
  --radius:14px;
  --radius-sm:9px;
  --rule-weight:1px;
  --rule-style:solid;
  --shadow:0 1px 2px rgba(22,45,82,.05), 0 10px 30px rgba(22,45,82,.07);
  --shadow-sm:0 2px 10px rgba(22,45,82,.06);
}

/* --- 他のトークンから派生するトークンは **.page で宣言する** -------------------
   ★カスタムプロパティは**宣言した要素で解決**され、子孫はその**確定値**を受け取る。
     `:root{ --fs-borderColor:var(--line) }` と書くと、:root には .tc-* が付いていないため
     **既定（スレート）の --line で固まり**、body のテーマを変えても永久に追随しない。
     実害＝フォルダツリーの区切り線が**どのテーマでも薄いグレーのまま**（暗いテーマでは
     白い線に見える。ユーザー報告）／吹き出しの地も同様に固定されていた。
   ★同じ罠は上の --gap-* で既に注記済み。ここも同じ理由で **.page**（＝必ずテーマクラスの
     子孫）で宣言する＝テーマを body に付けても、別のラッパーに付けても正しく解決される。
   ★宣言する場所を変えただけで、参照側（illust-foldertree.css 等）は一切変えていない。
   ★★このコメントに **アスタリスクとスラッシュを続けて書かない**（例: tc- と td- のクラスを
     「tc-*」「/」「td-*」と並べて書くと、その2文字がコメントの終わりと解釈され、
     **直後のルールがまるごと捨てられる**。実際にこれで .page の宣言が消えた）。 */
.page{
  --illustBubble-bgColor:var(--accent-soft);
  --fs-borderColor:var(--line);
  --rule-lineColor:var(--line);
  --base-margin:var(--block-gap);       /* illustList 流用が参照（デザインテーマに追随する） */
  /* 文書ごとの基本文字サイズ（相対指定）。デザインテーマが決めた素の値 --font-base-td に
     倍率 --font-mul（既定 1）を掛ける＝「コンパクトのまま文字だけ通常サイズ」ができる。
     見出しも表もすべて --font-base から派生しているので、ここ1か所で全体が連動する。
     ★body で受け直してから .page で掛ける。同じ要素で --font-base が自分自身を参照すると
       循環参照になり、その宣言ごと無効になるため（テーマ値も倍率も両方効かなくなる）。
     ★px 固定のときは body の inline style が --font-base を直接上書きする＝--font-base-td も
       その px になり、--font-mul は 1 のままなので同じ式で相対・固定の両方をまかなえる。 */
  --font-base:calc(var(--font-base-td, 15px) * var(--font-mul, 1));
}

/* ---------------------------------------------------------------------------
   2. リセット & 土台
   --------------------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"SDX Yen",var(--font-body); font-size:calc(var(--font-base) * var(--font-mul, 1));
  line-height:var(--leading); letter-spacing:var(--tracking);
  padding:32px 16px;
  /* デザインテーマ（.td-*）が body に決めた素の値を、別名で .page へ渡す（上の .page 参照）。
     テーマクラスと同じ要素で受けるので、テーマを切り替えれば素の値も一緒に変わる。 */
  --font-base-td:var(--font-base);
}

/* ページ（用紙）。色は色トークン・形はデザイントークンのみ参照 */
/* ★画面の幅は --screen-w（あれば）→ --page-w（用紙の設計幅）の順。
   --screen-w は**画面だけ**の指定で、印刷（下の @media print）は常に --page-w を使う＝
   Webページとして広く見せても、紙では文字が縮まず折り返しだけが変わる。 */
.page{
  max-width:var(--screen-w, var(--page-w, 960px)); margin:0 auto; background:var(--surface);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  /* 長い無区切りトークン（URL/パス/ID/長い英数字・コード）を全パーツで折り返す。
     overflow-wrap は継承するので .page に置けば全子孫へ波及（.tag 等の white-space:nowrap は維持）。
     anywhere は min-content も縮めるため flex/grid の列も溢れない。 */
  overflow-wrap:anywhere;
}
.page-header{
  /* 形の値は --hdr-*（カスタムデザインテーマ用のトークン）経由。既定＝従来の値。 */
  display:var(--hdr-disp, block);
  background:var(--hdr-bg, var(--header-bg)); color:var(--hdr-ink, var(--header-ink));
  padding:var(--hdr-pad-t, calc(var(--space) * 2.4)) var(--pg-mx, calc(var(--space) * 2.6)) var(--hdr-pad-b, calc(var(--space) * 2));
  text-align:var(--hdr-align, inherit);
  border-bottom:var(--hdr-bd-b-w, 0) var(--hdr-bd-b-style, none) var(--hdr-bd-b-c, currentColor);
}
/* ページヘッダー変種：シンプルな帯（高さ＝1行・折り返しで増える。タイトルのみ・帯色は基底を継承） */
.page-header.page-header-bar{
  padding-top:var(--hdr-bar-pad-y, calc(var(--space) * 0.85));
  padding-bottom:var(--hdr-bar-pad-y, calc(var(--space) * 0.85));
}
.page-header-bar .bar-title{
  font-family:"SDX Yen",var(--font-head); font-weight:var(--head-weight);
  font-size:calc(var(--font-base) * var(--hdr-bar-size, 1.2) * var(--scale)); line-height:1.35; margin:0;
}
/* ページ本文の余白。--pg-mx=左右 / --pg-my=上下（文書設定で mm 指定）。未設定時は従来の calc 値。 */
.page-body{ padding:var(--pg-my, calc(var(--space) * 1.7)) var(--pg-mx, calc(var(--space) * 2.6)) var(--pg-my, calc(var(--space) * 2.6)); }
.page-footer{
  /* 形の値は --ftr-*（カスタムデザインテーマ用のトークン）経由。既定＝従来の値。 */
  border-top:var(--ftr-bd-w, var(--rule-weight)) var(--ftr-bd-style, var(--rule-style)) var(--ftr-bd-c, var(--line));
  /* 上マージンは廃止（本文の下パディングと二重になり空きすぎるため）。フッター自身の上パディング＋罫線で区切る。 */
  margin:0 var(--pg-mx, calc(var(--space) * 2.6)) 0;
  padding:var(--ftr-pad-t, var(--space)) 0 var(--ftr-pad-b, calc(var(--space) * 1.6));
  color:var(--ftr-color, var(--muted)); font-size:var(--ftr-fs, .82em);
  background:var(--ftr-bg, transparent);
  display:var(--ftr-disp, flex); justify-content:var(--ftr-justify, space-between); flex-wrap:wrap; gap:8px;
}

/* --- 狭い画面（スマホ・タブレット縦）＝紙の見立てをやめて画面の幅を使い切る -----------
   ★理由（実測）：紙のまま出すと、本文余白（画面用の既定 左右12mm＝45.4px）と body の外側
     余白（16px）で、**375px の画面では本文が 252px＝画面の 67.3%** まで痩せる。
     1行に入る文字数が減るほど折り返しが増え、表や段組みは横に潰れる。
   ★効かせ方は「変数の上書き」ではなく **padding そのものの指定**。--pg-mx / --pg-my は
     文書設定が **body のインライン変数**として書くので、スタイルシート側で同名の変数を
     宣言しても**インラインに負けて効かない**（変数は「宣言された値」の勝負になる）。
     ここでは padding/margin の宣言ごと差し替えるので、インライン変数の有無に関わらず勝つ。
   ★数値はすべて変数＝**文書ごとに調整できる**（文書設定「スマホ」）。
     --pg-mx-sp / --pg-my-sp＝本文の余白（px）／--sp-out-x / --sp-out-y＝紙の外側の余白／
     --font-mul-sp＝文字の倍率（1＝そのまま。--font-mul とは別に掛かる）。
   ★文字の倍率は **body の font-size と .page の --font-base の両方**に掛ける。前者は素の
     継承（段落など）、後者は --font-base から算出する部品（見出し・表・図の見出し等）が見る値で、
     片方だけだと**段落と見出しの比率が崩れる**。
   ★印刷には無関係（@media print は別枠。--pg-*-print がそちらを受け持つ）。 */
@media (max-width:640px){
  body{
    padding:var(--sp-out-y, 10px) var(--sp-out-x, 0);
    font-size:calc(var(--font-base) * var(--font-mul, 1) * var(--font-mul-sp, 1));
  }
  .page{
    border-radius:0;   /* 画面の端まで使うので角丸は落とす（外側余白を戻すときは --sp-out-x で） */
    --font-base:calc(var(--font-base-td, 15px) * var(--font-mul, 1) * var(--font-mul-sp, 1));
  }
  .page-header{ padding-left:var(--pg-mx-sp, 16px); padding-right:var(--pg-mx-sp, 16px); }
  .page-body{ padding:var(--pg-my-sp, 16px) var(--pg-mx-sp, 16px); }
  .page-footer{ margin-left:var(--pg-mx-sp, 16px); margin-right:var(--pg-mx-sp, 16px); }
}

/* ---------------------------------------------------------------------------
   3. タイトル / テキスト
   --------------------------------------------------------------------------- */
/* サブタイトル。ヘッダー／表紙の帯の上では専用の淡色（--header-sub）、それ以外の場所では
   ふつうの補助色。1つの色を決め打ちにすると、白地に置いたとき薄すぎて読めなくなる（実測 1.38）。 */
.eyebrow{ font-size:calc(var(--h-eye-fs, .82em) * var(--fs-mul, 1)); letter-spacing:var(--h-eye-tracking, .16em); color:var(--eyebrow-c, var(--h-eye-color, var(--muted))); font-weight:var(--h-eye-weight, 600); margin:0 0 calc(var(--gap-head, 10px) * var(--h-eye-mb, 1)); }
/* 見出しの大きさは --fs-mul（既定 1）で倍率を掛けられる。指定は .fs-x* クラス（parts.css）か、
   選択肢に無い倍率を使うときは要素の style に直接 `--fs-mul:1.35` のように書く（編集画面の自由入力）。
   em ではなく「その見出し本来の大きさ」に対する倍率なので、見出し同士の階層感が崩れない。
   ★**見出しはすべて対応させる**（0.2.99）。トークンが em の見出し（.title-sm / .cap / .eyebrow /
     .kicker / .panel-title）は `calc(トークン * var(--fs-mul,1))` の形にしてある＝
     テーマがトークンへ入れるのは長さなので、掛け算に載せても壊れない。 */
/* ドキュメントタイトル。下マージンは「各パーツが自分の下マージンを持つ」原則に合わせて持たせる
   （title-lg:10px / title-md:8px / title-sm:6px の階段に対し、最大見出しなので 12px）。
   ページヘッダー内では末尾要素なので parts.css の `.page-header > :last-child{margin-bottom:0}` が、
   レイヤーブロック内では layers.css の `.lay.body > *{margin-bottom:0}` が打ち消す＝従来の見た目のまま。 */
.title-hero{ font-family:"SDX Yen",var(--h-hero-font, var(--font-head)); font-weight:var(--h-hero-weight, var(--head-weight));
  font-size:calc(var(--font-base) * var(--h-hero-size, 1.8) * var(--scale) * var(--fs-mul, 1)); line-height:var(--h-hero-lh, 1.45);
  margin:0 0 calc(var(--gap-head, 10px) * var(--h-hero-mb, 1.2)); }
/* 帯つきドキュメントタイトル。ページヘッダーの中では地色が付いて見栄えがするが、本文に単独で
   置くと「ただの大きな文字」になるので、地色の帯をタイトル自身に敷けるようにした。
   形（角丸・内側の余白）はパネルと同じトークンを使う＝デザインテーマで一緒に変わる。
   ページヘッダー内で使うと地色が二重になるだけなので、本文で使う想定。
   色は2種類（どちらもカラーテーマ追従）:
     .title-hero-bar      … ページヘッダー（シンプル帯）と同じ地色（--header-bg / --header-ink）
     .title-hero-bar-soft … テーマカラーの淡色（--accent-soft / --accent-ink）
   淡色版は**自分で文字色を持つ**ので、濃色パネルの中へ入れ子にしても文字が同化しない。 */
.title-hero.title-hero-bar,
.title-hero.title-hero-bar-soft{
  border-radius:var(--radius);
  padding:calc(var(--pad-panel) * .8) var(--pad-panel);
}
.title-hero.title-hero-bar{ background:var(--header-bg); color:var(--header-ink); }
.title-hero.title-hero-bar-soft{ background:var(--accent-soft); color:var(--accent-ink); }
.title-section{ display:flex; align-items:center; gap:var(--h-sec-gap, 13px); margin:0 0 calc(var(--gap-head, 10px) * var(--h-sec-mb, 1.6));
  border-bottom:var(--h-sec-ul-w, 2px) var(--h-sec-ul-style, solid) var(--h-sec-ul-c, var(--accent-soft));
  border-left:var(--h-sec-bar-w, 0) var(--h-sec-bar-style, none) var(--h-sec-bar-c, currentColor);
  border-radius:var(--h-sec-radius, 0); background:var(--h-sec-bg, none);
  padding:var(--h-sec-pad-t, 0) var(--h-sec-pad-r, 0) var(--h-sec-pad-b, 8px) var(--h-sec-pad-l, 0); }
/* 見出しの上の余白（倍率×--gap-head）。器の先頭では空けない（:not(:first-child)）。既定 0＝従来どおり。
   ★見出しの形（帯・下線・地・余白・大きさ）は --h-種-* トークン経由＝カスタムデザインテーマが値を差し替える。
     既定値は従来の直書きの値そのもの（計算結果は1pxも変わらない）。
   ★「地」は必ず background の一括指定で受ける（background-image ではない）。模様（ドット・方眼など）は
     位置とタイル寸法（0 0/16px 16px）を伴い、最後の層に地の色を重ねるので、一括指定でないと受け取れない。
     既定は none＝background-color も透明になり、従来（指定なし）と同じ描画になる。 */
.title-section:not(:first-child){ margin-top:calc(var(--gap-head, 10px) * var(--h-sec-mt, 0)); }
/* 文字の寄せ。★flex なので text-align では動かない＝**主軸（＝行の方向）で寄せる**。
   h2 の `flex:1` を外さないと伸びきってしまい、寄せる余地が無い（寄せを指定したときだけ外す）。
   ★縦書きの器の中でも同じ規則でよい＝flex の主軸は行の方向へ自然に回る。 */
.title-section:is(.u-left,.u-center,.u-right) > h2{ flex:0 1 auto; }
.title-section.u-left{ justify-content:flex-start; }
.title-section.u-center{ justify-content:center; }
.title-section.u-right{ justify-content:flex-end; }
/* ★中央寄せに flex を使わない。番号は素のテキストなので、装飾を足すと `justify-content:center` が
   **文字と装飾を別々に**中央へ寄せ、あいだに隙間ができる（実測 4.3px。Q&A・フォルダツリーと同じ機構）。
   1行を箱の中央に置くだけなら `line-height` ＋ `text-align` で足りる（見た目は従来と同じ）。 */
.title-section .sec-no{ flex:0 0 auto; width:var(--h-sec-no-size, 30px); height:var(--h-sec-no-size, 30px); border-radius:var(--h-sec-no-radius, var(--radius-sm));
  background:var(--h-sec-no-bg, var(--accent-soft)); color:var(--h-sec-no-color, var(--accent-ink)); font-weight:700;
  line-height:var(--h-sec-no-size, 30px); text-align:center; }
/* 番号が空文字のときは番号アイコンを消す（空白1文字なら :empty でないので表示される）。 */
.title-section .sec-no:empty{ display:none; }
.title-section h2{ font-family:"SDX Yen",var(--h-sec-font, var(--font-head)); font-size:calc(var(--font-base) * var(--h-sec-size, 1.3) * var(--scale) * var(--fs-mul, 1));
  margin:0; color:var(--h-sec-color, var(--accent-ink)); font-weight:var(--h-sec-weight, var(--head-weight)); flex:1; line-height:var(--h-sec-lh, 1.25); }
/* 大見出し: 左に太いアクセント帯を付ける（テクニカルテーマの見せ方を全テーマ共通の基本にした）。
   帯の分だけ左パディングを取るので、文字は帯から少し離れて始まる。 */
.title-lg{ font-family:"SDX Yen",var(--h-lg-font, var(--font-head)); font-size:calc(var(--font-base) * var(--h-lg-size, 1.55) * var(--scale) * var(--fs-mul, 1));
  color:var(--h-lg-color, var(--accent-ink)); font-weight:var(--h-lg-weight, var(--head-weight)); margin:0 0 calc(var(--gap-head, 10px) * var(--h-lg-mb, 1)); line-height:var(--h-lg-lh, 1.3);
  border-left:var(--h-lg-bar-w, 8px) var(--h-lg-bar-style, solid) var(--h-lg-bar-c, var(--accent));
  border-bottom:var(--h-lg-ul-w, 0) var(--h-lg-ul-style, none) var(--h-lg-ul-c, currentColor);
  border-radius:var(--h-lg-radius, 0); background:var(--h-lg-bg, none);
  padding:var(--h-lg-pad-y, 5px) var(--h-lg-pad-r, 0) var(--h-lg-pad-y, 5px) var(--h-lg-pad-l, 12px); }
.title-lg:not(:first-child){ margin-top:calc(var(--gap-head, 10px) * var(--h-lg-mt, 0)); }
/* 中見出し: 表示幅いっぱいの下線。以前は左に小さな帯（::before）を出していたが、大見出しの左帯と
   紛らわしいので下線に変えた（帯は大見出しだけの目印にする）。 */
.title-md{ font-family:"SDX Yen",var(--h-md-font, var(--font-head)); font-size:calc(var(--font-base) * var(--h-md-size, 1.18) * var(--scale) * var(--fs-mul, 1));
  color:var(--h-md-color, var(--accent-ink)); font-weight:var(--h-md-weight, var(--head-weight)); margin:0 0 calc(var(--gap-head, 10px) * var(--h-md-mb, .8));
  line-height:var(--h-md-lh, inherit);
  display:block; border-bottom:var(--h-md-ul-w, 2px) var(--h-md-ul-style, solid) var(--h-md-ul-c, var(--accent));
  border-left:var(--h-md-bar-w, 0) var(--h-md-bar-style, none) var(--h-md-bar-c, currentColor);
  border-radius:var(--h-md-radius, 0); background:var(--h-md-bg, none);
  padding:var(--h-md-pad-t, 0) var(--h-md-pad-r, 0) var(--h-md-pad-b, 5px) var(--h-md-pad-l, 0); }
.title-md:not(:first-child){ margin-top:calc(var(--gap-head, 10px) * var(--h-md-mt, 0)); }
.title-sm{ font-family:"SDX Yen",var(--h-sm-font, inherit); font-size:calc(var(--h-sm-fs, 1.06em) * var(--fs-mul, 1)); font-weight:var(--h-sm-weight, 700); color:var(--h-sm-color, var(--ink));
  margin:0 0 calc(var(--gap-head, 10px) * var(--h-sm-mb, .6)); line-height:var(--h-sm-lh, inherit);
  border-left:var(--h-sm-bar-w, 0) var(--h-sm-bar-style, none) var(--h-sm-bar-c, currentColor);
  border-bottom:var(--h-sm-ul-w, 0) var(--h-sm-ul-style, none) var(--h-sm-ul-c, currentColor);
  border-radius:var(--h-sm-radius, 0); background:var(--h-sm-bg, none);
  padding:var(--h-sm-pad-t, 0) var(--h-sm-pad-r, 0) var(--h-sm-pad-b, 0) var(--h-sm-pad-l, 0); }
.title-sm:not(:first-child){ margin-top:calc(var(--gap-head, 10px) * var(--h-sm-mt, 0)); }
.cap{ font-size:calc(var(--h-cap-fs, .82em) * var(--fs-mul, 1)); color:var(--h-cap-color, var(--muted)); font-weight:var(--h-cap-weight, 700); margin:0 0 calc(var(--gap-head, 10px) * var(--h-cap-mb, .6)); letter-spacing:var(--h-cap-tracking, .02em); }

p{ margin:0 0 var(--gap-text); }
.lead{ font-size:1.04em; }
.muted{ color:var(--muted); }
.t-important{ color:var(--c-important); font-weight:700; }
.t-ref{ color:var(--c-ref); font-weight:700; }
.t-note{ color:var(--c-note); font-weight:700; }
.hi{ color:var(--accent-ink); font-weight:700; }
.mark{ background:linear-gradient(transparent 62%, var(--accent-soft) 62%); }

/* リンク。ブラウザ既定の青／紫ではなく**カラーテーマの色**にする。
   閲覧済みは同系統のまま少しくすませる（--accent-ink と --muted を混ぜて作るので、
   19 のカラーテーマすべてに自動で追従する。テーマやページ側で決めたいときは
   --link / --link-visited を定義すれば上書きできる）。
   ★:visited は色系のプロパティしか効かず、透明度も無視される（プライバシー保護のため）＝実色で指定する。
   ★`a:visited` は (0,1,1) なので**単一クラスの指定（.btn 等）より強い**。自分で色を持つリンクは
     それぞれの CSS で :visited を併記してある（web-parts.css の .btn / .pagetop > a）。 */
a{ color:var(--link, var(--accent-ink)); }
a:visited{ color:var(--link-visited, color-mix(in srgb, var(--accent-ink) 45%, var(--muted))); }

/* ---------------------------------------------------------------------------
   4. レイアウト（ブロック / 段組 / 区切り）
   --------------------------------------------------------------------------- */
/* 縦リズム＝案A: 各パーツが自分の下マージンを持つ（末尾「縦リズム（段別マージン）」節）。
   .block は「任意のグルーピング/再利用単位」になり、下マージンのみ（top は 0）。
   包み忘れても各パーツが自前の余白を持つため密着しない（旧 .indent owl は廃止）。 */
/* コンテナ(.block)＝見出し1つ分の「記事」のまとまり。**パーツ単体より広く・セクションより狭く**して、
   まとまりが目で分かるようにする（テキスト --gap-text ＜ パーツ --block-gap ＜ 記事 ×1.25 ＜ 節 ×1.4）。
   calc は .block 上で評価されるのでテーマの --block-gap に追従する（:root に中間トークンを置かない理由は上のメモ）。 */
.block{ margin-bottom:var(--gap-block, calc(var(--block-gap) * 1.25)); }
.indent{ padding-left:43px; }
.divider{ border:0; border-top:var(--rule-weight) var(--rule-style) var(--line); margin:var(--block-gap) 0; }
/* 上下の余白を詰める。既定はテーマの --block-gap ぶん空くが、表や図のすぐ上下で区切りたいときは
   広すぎるため段階を用意する。★倍率で持つのでテーマの間隔設定にそのまま追従する。
   parts.css K節（ブロック段のマージン）に .divider は入っていない＝自前マージンなので競合しない。 */
.divider.dv-tight{ margin:calc(var(--block-gap) * .5) 0; }
.divider.dv-tighter{ margin:calc(var(--block-gap) * .25) 0; }
.divider.dv-none{ margin:0; }

.cols-2,.cols-3{ display:grid; gap:var(--gap-cols); }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.split{ display:grid; grid-template-columns:max-content 1fr; gap:6px var(--gap-cols); }
.split > dt{ color:var(--accent-ink); font-weight:700; }
.split > dd{ margin:0; }
@media (max-width:640px){
  .cols-2,.cols-3{ grid-template-columns:1fr; }
  .indent{ padding-left:0; }
}

/* meta（定義表） */
.meta{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.meta dl{ margin:0; display:grid; grid-template-columns:150px 1fr; }
.meta dt{ background:var(--surface-2); color:var(--accent-ink); font-weight:700; font-size:.9em;
  padding:11px 15px; border-bottom:var(--rule-weight) var(--rule-style) var(--line); }
.meta dd{ margin:0; padding:11px 15px; border-bottom:var(--rule-weight) var(--rule-style) var(--line); }
.meta dl > dt:last-of-type,.meta dl > dd:last-of-type{ border-bottom:none; }

/* ---------------------------------------------------------------------------
   5. パネル / コールアウト / カード
   --------------------------------------------------------------------------- */
/* ★パネル系の形は --p-<種>-* トークン経由（カスタムデザインテーマが差し替える）。既定＝従来の値。
   border-left-width/color は「左帯」用＝既定では枠と同じ値なので見た目は変わらない。 */
.panel{ background:var(--p-panel-bg, var(--surface-2)); border:var(--p-panel-bd-w, var(--rule-weight)) var(--p-panel-bd-style, var(--rule-style)) var(--p-panel-bd-c, var(--line));
  border-left-width:var(--p-panel-bar-w, var(--p-panel-bd-w, var(--rule-weight))); border-left-color:var(--p-panel-bar-c, var(--p-panel-bd-c, var(--line)));
  border-radius:var(--p-panel-radius, var(--radius)); padding:var(--p-panel-pad, var(--pad-panel)); box-shadow:var(--p-panel-shadow, var(--shadow-sm)); }
/* 隣接タイトル＝すぐ下の内容に添えるタイトル。パネルの見出しにも、入力欄の項目名にも使う。
   見せ方は同じパーツのクラス違い（パーツ追加では「パネルタイトル」「項目タイトル」として並ぶ）。 */
/* ★既定を `inherit` から `1em` に変えてある＝どちらも「まわりと同じ大きさ」で見え方は変わらないが、
   `calc(inherit * …)` は書けないので、倍率（--fs-mul）に載せられる形にした。 */
.panel-title{ font-weight:var(--h-pt-weight, 700); color:var(--h-pt-color, var(--accent-ink)); margin:0 0 calc(var(--gap-head, 10px) * var(--h-pt-mb, .8)); font-size:calc(var(--h-pt-fs, 1em) * var(--fs-mul, 1)); }
/* 項目タイトル＝入力欄などの直前に置く小さめの見出し */
.panel-title.pt-item{ font-weight:600; font-size:calc(.9em * var(--fs-mul, 1)); color:var(--muted); margin-bottom:4px; }
/* 下の余白を詰める＝すぐ下の要素にくっつける（入力欄の直前で使う） */
.panel-title.pt-mb0{ margin-bottom:0; }
.panel > :first-child{ margin-top:0; } .panel > :last-child{ margin-bottom:0; }

.callout{ border:var(--p-co-bd-w, var(--rule-weight)) var(--p-co-bd-style, var(--rule-style)) var(--p-co-bd-c, var(--line));
  border-left:var(--p-co-bar-w, 4px) var(--p-co-bar-style, solid) var(--p-co-bar-c, var(--accent)); border-radius:var(--p-co-radius, var(--radius-sm));
  padding:var(--p-co-pad-y, 13px) var(--p-co-pad-x, 16px); background:var(--p-co-bg, var(--surface-2)); }
/* ★flex にしない。見出しは素のテキストなので、装飾を足すと `gap` が**文字と装飾の間**に入って
   8px あき、別アイテムになって行内の縦位置もずれる（Q&A・フォルダツリーと同じ機構）。
   揃えるべき兄弟の箱が無い＝ふつうの流し込みでよい（同梱テンプレ57本にも h4 の中に要素は無い）。 */
.callout > h4{ margin:0 0 var(--p-co-t-mb, 6px); font-size:var(--p-co-t-fs, .97em); color:var(--p-co-t-color, var(--accent-ink)); font-weight:var(--p-co-t-weight, bold); }
.callout > :last-child{ margin-bottom:0; }
/* ★注記の「種類」（アクセント／情報／注意／警告）は**色だけ**を上書きする（形と余白は上の .callout ＝共通）。
   色の決まり方は3段。上から順に、見つかったところで止まる:
     ① `--p-co-<種>-*` … **デザインテーマ**（この文書の指定。パーツ編集画面の「注記：情報」などで入る）
     ② `--co-<種>-*`   … **カラーテーマ**（テーマの意味色。カスタムカラーテーマの「注記パネル」で入る）
     ③ 書いてある既定  … 従来の値（アクセントはテーマ色、情報・注意・警告はテーマ非依存のグレー）
   ★①を足したのは、デザインテーマの「注記」で色を変えても種類付きの注記には効かず、
     **画面で変えられるのに変わらない**状態だったため（ユーザー報告）。種類ごとに欄を分けて解消した。
   ★`border-color` は `border-left-color` より**前**に書くこと（後ろに書くと左帯の色を上書きしてしまう）。 */
.callout.is-accent{ background:var(--p-co-acc-bg, var(--accent-soft));
  border-color:var(--p-co-acc-bd-c, var(--p-co-bd-c, var(--line)));
  border-left-color:var(--p-co-acc-bar-c, var(--accent)); color:var(--p-co-acc-fg, inherit); }
.callout.is-accent > h4{ color:var(--p-co-acc-t-color, var(--accent-ink)); }
.callout.is-info{ background:var(--p-co-info-bg, var(--co-info-bg));
  border-color:var(--p-co-info-bd-c, var(--co-info-bd, color-mix(in srgb,var(--co-info-bar) 55%, var(--line))));
  border-left-color:var(--p-co-info-bar-c, var(--co-info-accent, var(--accent))); color:var(--p-co-info-fg, var(--co-info-fg, inherit));
  --co-ico:var(--p-co-info-bar-c, var(--co-info-accent, var(--accent))); }
.callout.is-info > h4{ color:var(--p-co-info-t-color, var(--co-info-title, var(--accent-ink))); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 7.2v4M8 4.7h.01'/%3E%3C/svg%3E"); }
.callout.is-note{ background:var(--p-co-note-bg, var(--co-note-bg));
  border-color:var(--p-co-note-bd-c, var(--co-note-bd, color-mix(in srgb,var(--co-note-bar) 55%, var(--line))));
  border-left-color:var(--p-co-note-bar-c, var(--co-note-accent, var(--accent))); color:var(--p-co-note-fg, var(--co-note-fg, inherit));
  --co-ico:var(--p-co-note-bar-c, var(--co-note-accent, var(--accent))); }
.callout.is-note > h4{ color:var(--p-co-note-t-color, var(--co-note-title, var(--accent-ink))); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 2.3 14.4 13.2H1.6Z'/%3E%3Cpath d='M8 6.5v3.2M8 11.3h.01'/%3E%3C/svg%3E"); }
.callout.is-warn{ background:var(--p-co-warn-bg, var(--co-warn-bg));
  border-color:var(--p-co-warn-bd-c, var(--co-warn-bd, #3d3d3d));
  border-left-color:var(--p-co-warn-bar-c, var(--co-warn-accent)); color:var(--p-co-warn-fg, var(--co-warn-ink)); }
.callout.is-warn > h4{ color:var(--p-co-warn-t-color, var(--co-warn-title, var(--co-warn-ink))); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5.3 1.6h5.4L14.4 5.3v5.4L10.7 14.4H5.3L1.6 10.7V5.3Z'/%3E%3Cpath d='M8 4.7v4.2M8 11.3h.01'/%3E%3C/svg%3E"); }
/* ★中身の文字色は **parts.css の L 節**（濃い面と文字色）が受け持つ。
   ここに :not() を並べて「明るい面を塗るパーツだけ除外する」一覧を持っていたが、
   同じ一覧が parts.css と layers.css にもあり、パーツを足すたびに漏れて再発していた。
   いまは .callout.is-warn が --oc-ink を宣言するだけでよく、除外は L 節の一覧に一本化されている。 */
/* アイコンの色は左帯と同じ（--co-ico は各変種が宣言する。既定＝主色で従来どおり） */
.callout:is(.is-info,.is-note,.is-warn) > h4::before{ content:""; width:1.5em; height:1.5em; flex:none; background:var(--co-ico, var(--accent)); -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat; }
.callout.is-warn > h4::before{ background:var(--p-co-warn-bar-c, var(--co-warn-accent)); }  /* 警告アイコンは既定で赤（左帯と同じ色） */

.cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); }
.card{ border:var(--p-card-bd-w, var(--rule-weight)) var(--p-card-bd-style, var(--rule-style)) var(--p-card-bd-c, var(--line)); border-radius:var(--p-card-radius, var(--radius));
  border-left-width:var(--p-card-bar-w, var(--p-card-bd-w, var(--rule-weight))); border-left-color:var(--p-card-bar-c, var(--p-card-bd-c, var(--line)));
  padding:var(--p-card-pad, var(--pad-panel)); background:var(--p-card-bg, var(--surface)); box-shadow:var(--p-card-shadow, var(--shadow-sm)); }
.card > .ch{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.card .ck{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; }
.card .ck svg{ width:14px; height:14px; fill:#fff; }
.card h4{ margin:0; font-size:var(--p-card-t-fs, 1em); color:var(--p-card-t-color, var(--accent-ink)); }
@media (max-width:640px){ .cards{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   6. テーブル
   --------------------------------------------------------------------------- */
.table{ border-collapse:collapse; width:100%; font-size:.93em; }
.table th,.table td{ border:var(--tb-bd-w, var(--rule-weight)) var(--tb-bd-style, var(--rule-style)) var(--tb-bd-c, var(--line));
  padding:var(--pad-cell-y) var(--pad-cell-x); text-align:left; vertical-align:top;
  overflow-wrap:anywhere; }  /* 長いコード/パス等の連続トークンを折り返し、表の横スクロールを防ぐ（overflow-wrapは継承されcode-inlineにも効く） */
.table thead th{ background:var(--table-head-bg); color:var(--table-head-ink);
  /* 表頭の罫線色＝デザイン側の指定（--tb-th-bd-c）＞カラー側の淡い表頭用（--table-head-line）＞表頭の地。
     下罫だけ太くする帳票（--tb-th-bd-b-w）も既定はセルの罫線と同じ太さ＝従来どおり。 */
  font-weight:600; border-color:var(--tb-th-bd-c, var(--table-head-line,var(--table-head-bg)));
  border-bottom-width:var(--tb-th-bd-b-w, var(--tb-bd-w, var(--rule-weight))); }
.table.center th,.table.center td{ text-align:center; }
.table .key{ background:var(--surface-2); color:var(--accent-ink); font-weight:700; white-space:nowrap; }
.table.stripe tbody tr:nth-child(even){ background:var(--table-stripe); }
/* テーマ色背景＝本文セル全体にテーマ追従の淡色を敷く（行見出し .key は自前の色を維持）。 */
.table.tbg tbody td:not(.key){ background:var(--table-stripe); }
.tablewrap{ overflow-x:auto; }
.pill-cell{ display:inline-block; min-width:28px; text-align:center; font-weight:700;
  background:var(--accent-soft); color:var(--accent-ink); border-radius:6px; padding:1px 8px; }

/* ---------------------------------------------------------------------------
   7. リスト（チェック / ステップ / プレーン）
   --------------------------------------------------------------------------- */
.list-plain{ list-style:none; margin:0; padding:0; }
.list-plain > li{ padding:3px 0; }

/* ---------------------------------------------------------------------------
   ★記号・番号玉を「1行目の中心」に合わせる式（リスト／FAQ／例示で共通の考え方）
     マーカーは絶対配置なので、素朴に書くと箱の**上端**が基準になる。ところが文字の1行目は
     行間の半分（ハーフレディング）だけ下から始まるため、**行間の広いテーマほどマーカーが
     上に浮いて見える**（実測：行送り21.6のコンパクトで-1.5px、30.2のエディトリアルで-6px）。
       top = リストの padding-top + (1行の高さ − マーカーの高さ) ÷ 2
     1行の高さ＝「その li の font-size × var(--leading)」。ただし em は**その擬似要素自身の
     font-size** を基準にするので、擬似要素で font-size を変えている場合は**その逆数**を
     em に掛けて li の 1em に戻す（例: font-size:.8em なら 1.25em が li の 1em）。
     こうすると文字サイズにも行間にも自動で追従し、8テーマすべてで中心が揃う。
   --------------------------------------------------------------------------- */
.list-check{ list-style:none; margin:0; padding:0; }
.list-check > li{ position:relative; padding:6px 0 6px 32px; }
/* ★チェック箱の実際の高さは 18px ではなく **22px**（枠2px×上下）。擬似要素には
   box-sizing:border-box が効いていない（`*` セレクタは ::before/::after に当たらない）ので、
   width/height は内容の寸法。中心合わせの式には枠込みの寸法を使う。 */
.list-check > li::before{ content:""; position:absolute; left:0;
  top:calc(6px + (1em * var(--leading) - 22px) / 2);
  width:18px; height:18px; border:2px solid var(--accent); border-radius:5px; background:var(--surface); }
/* 鉤は箱の中での位置を保つ＝箱が動けば一緒に動く。
   ★★合わせるのは**回したあとのインク**。鉤の箱（6+2=8px × 11+2=13px）を 45° 回すと、
     インクは横方向には箱の中心に対して左右対称（±7.42px）に広がり、縦方向へは中心より
     約 2.83px 下へ寄る。したがって
       左 ＝ (22 − 8) ÷ 2 = **7px**（箱の中心に合わせる。5px では **2px 左に寄って見えた**＝ユーザー報告）
       上 ＝ (22 − 13) ÷ 2 − 2.83 ≒ **1.7px**（回転で下がるぶんを先に引いておく） */
.list-check > li.done::after{ content:""; position:absolute; left:7px;
  top:calc(6px + (1em * var(--leading) - 22px) / 2 + 1.7px);
  width:6px; height:11px; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ★番号はブラウザ組み込みの `list-item` カウンタで数える（自前の counter-reset/increment は持たない）。
   こうすると `<ol start="5">` がそのまま効く＝開始番号を HTML の標準の書き方で指定できる
   （counter() を自前の名前で回すと start 属性は無視される）。list-item は ol/ul で自動的に
   リセットされ、li が display:list-item であるかぎり自動で増える＝入れ子でも混ざらない。 */
.list-step{ list-style:none; margin:0; padding:0; }
.list-step > li{ position:relative; padding:4px 0 14px 42px; }
/* font-size:.8em なので、li の 1行の高さは 1.25em * var(--leading) */
.list-step > li::before{ content:counter(list-item); position:absolute; left:0;
  top:calc(4px + (1.25em * var(--leading) - 26px) / 2);
  width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--on-accent,#fff);
  font-weight:700; font-size:.8em; display:flex; align-items:center; justify-content:center; }
/* 番号玉どうしをつなぐ縦線。玉が下がったぶんだけ始点も下げる（この ::after は font-size を
   変えていないので em は li 基準＝上の 1.25em ではなく 1em で計算する）。 */
.list-step > li:not(:last-child)::after{ content:""; position:absolute; left:13px;
  top:calc(4px + (1em * var(--leading) - 26px) / 2 + 28px); bottom:2px;
  width:2px; background:var(--line); }

/* ---------------------------------------------------------------------------
   8. バッジ / タグ
   --------------------------------------------------------------------------- */
/* バッジ＝小さな色付きラベル。色は変数で持つので、プリセット（クラス）でも
   カスタム色（インライン style="--bd-bg:#…;--bd-fg:#…"）でも指定できる。
   未指定の既定はカラーテーマ追従＝地はアクセント色・文字は --on-accent
   （白で足りるテーマは既定 #fff。明るい主色のテーマ／カスタムテーマでは濃色になる）。 */
.badge{ display:inline-block; font-size:.72em; font-weight:700;
  color:var(--bd-fg,var(--on-accent,#fff)); background:var(--bd-bg,var(--accent));
  border-radius:6px; padding:2px 9px; }
/* 背景プリセット（bc-*）。テーマに追従させたいときは既定（クラス無し）か bc-soft を使う。
   固定色はカラーテーマを変えても変わらない＝状態表示（済/未/警告など）向け。
   ★地が固定の濃色なので文字も #fff を明示する（--on-accent が濃色のテーマで潰れないように）。 */
.badge.bc-soft{ --bd-bg:var(--accent-soft); --bd-fg:var(--accent-ink); }
.badge.bc-slate{ --bd-bg:#475569; --bd-fg:#fff; }
.badge.bc-dark{ --bd-bg:#1f2937; --bd-fg:#fff; }
.badge.bc-green{ --bd-bg:#1e874b; --bd-fg:#fff; }
.badge.bc-blue{ --bd-bg:#2563eb; --bd-fg:#fff; }
.badge.bc-teal{ --bd-bg:#0f766e; --bd-fg:#fff; }
.badge.bc-red{ --bd-bg:#c0392b; --bd-fg:#fff; }
.badge.bc-amber{ --bd-bg:#b7791f; --bd-fg:#fff; }
.badge.bc-purple{ --bd-bg:#7c3aed; --bd-fg:#fff; }
.badge.bc-pink{ --bd-bg:#db2777; --bd-fg:#fff; }
.badge.bc-light{ --bd-bg:#e8edf3; --bd-fg:#1f2937; }
/* 文字色プリセット（fc-*）。bc-* より後ろに置く＝bc-light 等が持つ既定の文字色を上書きできる。 */
.badge.fc-white{ --bd-fg:#fff; }
.badge.fc-dark{ --bd-fg:#1f2937; }
.badge.fc-ink{ --bd-fg:var(--ink); }
.badge.fc-accent{ --bd-fg:var(--accent-ink); }
/* バッジを横に並べる器（折返しあり）。1つずつ色を変えられるので色見本・状態一覧に使える。 */
.badges{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:0 0 var(--block-gap); }
.tag{ display:inline-block; font-size:.78em; border:var(--rule-weight) var(--rule-style) var(--line);
  color:var(--accent-ink); background:var(--surface); border-radius:999px; padding:3px 11px; }
.pill{ display:inline-block; font-size:.78em; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:999px; padding:3px 11px; }
/* チップ部品（バッジ/タグ/ピル）は1行のラベル。表セルの overflow-wrap:anywhere を継承して
   途中改行しないよう nowrap を明示する（例: 判定欄の「PASS」が PA/SS に割れるのを防ぐ）。 */
.badge,.tag,.pill,.pill-cell{ white-space:nowrap; }

/* ---------------------------------------------------------------------------
   9. 図解：パイプライン / フローツリー
   --------------------------------------------------------------------------- */
.pipeline{ display:flex; align-items:stretch; }
.pipeline .stage{ flex:1; background:var(--surface-2); border:var(--rule-weight) var(--rule-style) var(--line);
  border-radius:var(--radius); padding:14px; text-align:center; }
.pipeline .stage .sh{ font-weight:700; color:var(--accent-ink); margin-bottom:3px; }
.pipeline .stage p{ margin:0; font-size:.86em; color:var(--muted); }
.pipeline .arw{ flex:0 0 44px; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.pipeline .arw svg{ width:26px; height:26px; fill:currentColor; }
@media (max-width:640px){
  .pipeline{ flex-direction:column; }
  .pipeline .arw{ width:100%; height:30px; transform:rotate(90deg); }
}

/* ★★フローツリーの寸法は**すべてここの変数**で決める。直接 px を書かないこと。
   理由＝連結線の位置（--fl-join）とノードの余白（--fl-gap / --fl-pad-y）は**連動している**。
   片方だけ px で書き換えると、横線がノードから外れて「線が浮く」。
   詰め具合を変えるときは変数だけを差し替える（下の .fl-tight がその例）。
   ★0.2.38 で --fl-join は**式**になった（アイコンの中心）＝詰め方を変えても線が自動で追随する。 */
.flow{ list-style:none; margin:0; padding:0;
  --fl-gap:2px;        /* ノードの上下マージン（0.2.29 で 4px から詰めた） */
  --fl-pad-y:5px;      /* ノードの上下パディング（0.2.29 で 7px から詰めた） */
  --fl-pad-x:10px;     /* ノードの左右パディング */
  /* 連結線が付く高さ（li の上から）＝**アイコンの中心**。0.2.38 で式にした＝
     アイコンの大きさや詰め方を変えても、横線・縦線が自動でアイコンの中心に合う
     （旧＝18px 固定で「名前1行の半分」に合わせていたため、アイコン中心より 3px 上にいた）。
     ★式に --fl-gap（ノードの上下マージン）は**入れない**。ノードは li の最初の子なので
       **上マージンは li の外へ抜ける（マージンの相殺）**＝ノードの上端は li の上端と同じ。
       入れると既定（--fl-gap:2px）でだけ 2px 下にずれる（実測で判明）。 */
  --fl-join:calc(var(--fl-pad-y) + 1px + var(--fl-ico) / 2);
  --fl-ico:30px;       /* アイコンの一辺 */
  --fl-ico-gap:11px;   /* アイコンと文字の間 */
  --fl-indent:14px;    /* 入れ子の下げ幅（横線の長さと同じ） */
  --fl-arm:18px;       /* 縦線から文字までの距離（子 ul の左パディング） */
  --fl-body-gap:6px;   /* ノードの中に置いた段落等の上余白 */
}
/* コンパクト指定（パーツの「詰め方」／フローツリー編集画面のチェック）。
   ★変数だけを差し替える＝連結線も一緒に付いてくる。文字も少し小さくする。 */
.flow.fl-tight{
  --fl-gap:0px; --fl-pad-y:2px; --fl-pad-x:7px;
  --fl-ico:22px; --fl-ico-gap:8px; --fl-indent:9px; --fl-arm:12px; --fl-body-gap:3px;
  /* --fl-join は式（アイコンの中心）なので指定しない＝上の値から自動で決まる */
}
/* ツリーの罫線／連結線は「構造ネスト用の class 無し ul」だけに適用する。
   ノード内に追加した箇条書き等（list-disc など class 付き ul／ol）は通常のリスト描画のまま。 */
.flow ul:not([class]){ list-style:none; margin:0 0 0 var(--fl-indent); padding:0 0 0 var(--fl-arm); }
.flow li{ position:relative; }
/* 横の連結線（各子ノードの連結点＝上から --fl-join） */
.flow ul:not([class]) > li::before{ content:""; position:absolute; left:calc(-1 * var(--fl-arm)); top:var(--fl-join); width:var(--fl-indent); height:2px; background:var(--line); z-index:1; }
/* 縦の連結線（子を連続でつなぐ）。ul の border-left だと最後の子の下端まで伸びて、段落等で背が高い
   ノードの下に長い罫線が残り「下マージンが大きい」ように見えるため、各 li の ::after で描き、
   最後の子は連結点(--fl-join)で止める（背の高い最後のノードの下へ伸ばさない）。 */
.flow ul:not([class]) > li::after{ content:""; position:absolute; left:calc(-1 * var(--fl-arm)); top:0; bottom:0; width:2px; background:var(--line); }
.flow ul:not([class]) > li:last-child::after{ bottom:auto; height:var(--fl-join); }
/* ★★親から子への「下ろし線」（0.2.38）。子を持つノードだけ、**自分の連結点（アイコンの中心）から
     子リストの先頭まで**縦線を継ぎ足す。これが無いと、子側の縦線は**子リストの上端**から
     始まるので、説明が長い（背の高い）ノードでは「アイコンのずっと下から線が急に現れる」
     ように見えた（ユーザー報告：子ノードへの線が出ていない）。
   ★x は子側の縦線と同じ＝ノード左端から --fl-indent（子 li の左 − --fl-arm と同値）。
   ★下端はノードの下マージン（--fl-gap）ぶん食い込ませて、子側の線と隙間なくつなぐ。
   ★`.node` は flex だが、**絶対配置の疑似要素は flex アイテムにならない**ので列は増えない。
   ★`:has()` が無いブラウザではこの線が出ないだけ（子側の線は従来どおり出る）。 */
.flow li:has(> ul:not([class])) > .node{ position:relative; }
.flow li:has(> ul:not([class])) > .node::after{
  content:""; position:absolute; left:var(--fl-indent); width:2px;
  /* 上端＝自分の連結点。ノードの上端は li の上端と同じ（上マージンは相殺で外へ抜ける）ので
     li 基準の --fl-join をそのまま使える。下端＝ノードの下マージンぶん食い込ませて子の線へ継ぐ。 */
  top:var(--fl-join); bottom:calc(-1 * var(--fl-gap));
  background:var(--line);
}
/* ★★アイコンと文字は**別のブロック**（横並びの2列）。0.2.37 で float をやめた。
     float だと**長い説明の2行目以降がアイコンの下へ潜り込み**、行頭がそろわないうえ、
     子ノードへ向かう連結線の位置と文字が重なって見えた（ユーザー報告）。
   ★flex にすると grid のときのような「アイコン列がノード全高に伸びる」問題は
     `align-items:flex-start` で起きない（アイコンは自分の高さのまま・下に空き列を作らない）。
   ★アイコンと文字の間隔は従来どおり --fl-ico-gap（float の右マージン → flex の gap）。 */
.flow .node{ display:flex; align-items:flex-start; gap:var(--fl-ico-gap);
  padding:var(--fl-pad-y) var(--fl-pad-x); margin:var(--fl-gap) 0; border-radius:var(--radius-sm); }
.flow .node:hover{ background:var(--surface-2); }
.flow .node .ico{ flex:0 0 auto; width:var(--fl-ico); height:var(--fl-ico); border-radius:var(--radius-sm); background:var(--accent-soft);
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center; margin:1px 0 0; }
/* 絵はアイコン枠に対する割合（30px のとき 18px＝従来と同じ） */
.flow .node .ico > svg{ width:calc(var(--fl-ico) * 0.6); height:calc(var(--fl-ico) * 0.6); fill:currentColor; }
/* 挿入イラスト（illustList 相当・レイヤー/オフセット/拡大縮小）をアイコン枠に描画 */
.flow .node .ico .illustArea{ position:relative; width:100%; height:100%; }
.flow .node .ico .illustArea > svg{ width:100%; height:100%; }
/* ノードの内容スロット＝**アイコンの右の1列**。名前・説明・追加パーツ（段落等）はすべてこの列に入る
   ＝どの行も行頭がそろい、アイコンの下へは何も入らない（0.2.37。旧＝float の回り込み）。
   `min-width:0` は flex の子が長い語で膨らまないように（折り返しを効かせるのに要る）。
   上6px/下0で詰める（段落の既定下余白 --gap-text がノード下に大きく出るのを防ぐ）。 */
.flow .node .nbody{ flex:1 1 auto; min-width:0; }
.flow .node .nbody > :not(.nm):not(.ds):not(br){ margin-top:var(--fl-body-gap); margin-bottom:0; }
/* 説明が空のノードは名前と本文の間に空行（br ＋空 .ds）を作らない */
.flow .node .nbody .ds:empty{ display:none; }
.flow .node .nbody br:has(+ .ds:empty){ display:none; }
.flow .node .nm{ font-weight:700; font-size:.97em; line-height:1.35; }
.flow .node .ds{ color:var(--muted); font-size:.85em; line-height:1.45; }
/* コンパクトは文字も少し小さく（--fl-join の目安の式もこの大きさに合わせてある） */
.flow.fl-tight .node .nm{ font-size:.92em; }
.flow.fl-tight .node .ds{ font-size:.8em; line-height:1.4; }
/* ★★ノードの高さを実際に決めているのは **.nbody の行送り**。名前と説明は inline なので、
   行の高さは **.nbody 自身の font-size × line-height（strut）** で決まる＝文字を小さくしても
   ここを詰めないと高さは変わらない（実測＝1ノード 56px のまま動かなかった）。
   コンパクトはここを詰めることで初めて実際に縮む。 */
.flow.fl-tight .node .nbody{ line-height:1.3; }

/* ---------------------------------------------------------------------------
   10. 印刷
   --------------------------------------------------------------------------- */
.avoid{ break-inside:avoid; }
.page-break{ break-after:page; }
@page{ size:A4; margin:14mm; }
@media print{
  body{ background:#fff; padding:0; }
  /* デザインの背景色（ヘッダー/コールアウト/パネル等）をそのまま印刷する（既定では白飛びする） */
  /* 画面(max-width:960px)の設計をそのまま A4 印刷幅(≈688px=182mm)へ縮小＝画面の見た目のまま印刷
     （実際のサイズ印刷でも大きく出ない）。zoom は transform と違い用紙内でページ分割も正しく効く。
     ※既定は A4・余白14mm 前提のスケール(688/960≒0.71)。**どの用紙でも「標準の設計幅」を使うかぎり
       この比は約 0.7165 で変わらない**（用紙が大きいほど設計幅も比例して広い）ので既定値のまま効く。
       設計幅を手で広げた文書だけ、document.js が `--print-zoom`（＝刷り面px ÷ 設計幅）を body に書く。 */
  /* 印刷: 左右余白(--pg-mx)を印刷用に差し替え＝用紙余白(@page 14mm)と二重にしない（既定0）。
     ヘッダー/本文/フッターが同じ --pg-mx を参照するので、0でも三者の左右端が揃う。
     本文の上下(--pg-my)も印刷用に差し替え。上下はヘッダー/フッターと重なるので既定は非0（0にしない）。 */
  /* 角丸はデザインテーマ(--radius)のまま印刷する＝画面と同じ見た目（ページヘッダーの帯は .page の
     overflow:hidden で角が丸められるので、角丸テーマなら印刷でも丸くなる）。用紙自体は白なので、
     角なしテーマ(--radius:0)や背景の無い文書では従来どおり四角に見える。影だけ落とす。 */
  .page{ box-shadow:none; width:var(--page-w, 960px); max-width:var(--page-w, 960px); margin:0 auto; zoom:var(--print-zoom, 0.71);
         print-color-adjust:exact; -webkit-print-color-adjust:exact;
         --pg-my:var(--pg-my-print, calc(var(--space) * 1.7));
         /* 「フッターを用紙下端へ」（帳票テーマ）はトークンで持つ＝--page-print-disp:flex ＋
            --page-print-min-h:379mm ＋ 下の --ftr-mt:auto。既定は block／auto／0＝従来どおり。 */
         display:var(--page-print-disp, block); flex-direction:column; min-height:var(--page-print-min-h, auto); }
  /* 印刷の左右余白(既定0＝用紙余白14mmとの二重回避)は本文だけに適用する。ヘッダー/フッターは帯・罫線
     なので設計上の左右余白を保ち、帯内の文字が用紙端に張り付かないようにする（本文とは揃わない）。 */
  .page-body{ padding-left:var(--pg-mx-print, 0); padding-right:var(--pg-mx-print, 0); }
  .page-footer{ margin-top:var(--ftr-mt, 0); }
  /* ヘッダーの印刷時左右余白＝--header-print-mx。既定(未設定)は設計余白(--pg-mx)を保持＝背景色のある
     帯ヘッダーは文字が用紙端に張り付かない。背景なしヘッダー(帳票等)は自身で --header-print-mx:0 を
     宣言し本文と左右端を揃える（＝「背景の有無」でマージンが決まる。テーマ非依存）。 */
  .page-header{ padding-left:var(--header-print-mx, var(--pg-mx, calc(var(--space) * 2.6))); padding-right:var(--header-print-mx, var(--pg-mx, calc(var(--space) * 2.6))); }
  .page-header-invoice .inv-meta{ right:var(--header-print-mx, var(--pg-mx)); }
  .title-section,.card,.callout,.panel,.pipeline,.flow > li{ break-inside:avoid; }
  .flow .node:hover{ background:none; }
  h1,h2,h3,h4,h5{ break-after:avoid; break-inside:avoid; } /* 見出し直後の改ページ／2行以上の見出しの途中分断を防ぐ */
  thead{ display:table-header-group; }         /* 長い表は改ページ後も見出し行を繰り返す */
  tr,img,figure,.stat,.matrix .cell{ break-inside:avoid; }
  /* イラストリスト/フォルダツリーは「行・セル単位」で改ページする。flex の行が途中で断たれると
     相対配置・負マージンの基準がずれてアイコンと文字が重なるため、行を丸ごと次ページへ送る。 */
  .illustList > div,.illustList > div > .illust,.fs li[data-icon]{ break-inside:avoid; }
  p,li,blockquote{ orphans:2; widows:2; }
}