@charset "UTF-8";
/* =====================================================================
   lp-forge / doc.css — 文書ページ（LPではなく、読ませるための説明文書）用CSS
   ---------------------------------------------------------------------
   何のためのCSSか:
     src/render/md.mjs が出す **素の要素だけ** でできた長文（構成意図・品質検査結果）を
     読める形にするためのタイポグラフィ規則。器（.sec / .sec__inner / .sec__body）は
     base.css のものをそのまま使い、ここは中身の要素にしか触らない。
     対象の原稿: projects/mekimeki/構成意図.md（h1〜h3・段落・2〜4列の表・箇条書き・
     番号付き・水平線・強調・インラインコード）と、検査ログをそのまま貼る <pre>。

   当たり方（この2つが前提。崩れたら全部当たらない）:
     ① HTML は <div class="sec__body sec__body--rich doc"> の1枚だけ
        （sections.mjs richtext(): 器を入れ子にせず同じ器にクラスを足す）。
        よって .doc の直下＝.sec__body の直下でもあり、base.css の縦リズムが同時に効く。
     ② doc.css は lp.css（base.css + custom.css）より **後** に読まれる
        （page.mjs の links 配列。同ファイルのコメントに明記されている）。
        同詳細度で競合したときは、こちらが後勝ちする。

   詳細度について（base.css §0-D の教訓をどう扱ったか）:
     土台の契約は「要素セレクタを :where() の外に出さない」。理由は .lp a{} (0,1,1) が
     .btn--primary (0,1,0) を黙って上書きし、主ボタンの文字が消えた事故。
     ここでは指示どおり .doc h2{} 形式 (0,1,1) を使う。**使ってよい理由**は、
     .doc の中身が md.mjs の出力＝**クラスを1つも持たない素の要素だけ**で、
     上書きし得るコンポーネント（.btn / .card__title など）が構造上入り得ないため。
     .doc の外には1行も書いていない（.sec__inner も .lp も触っていない）。
     唯一の用心として、リンクには規則を書いていない（§8）。

   このファイルが持っていないもの（数えられるようにここに書く）:
     グラデーション 0 / 影 0 / 色リテラル 0（すべて var() 経由）/
     repeat(3,1fr)・auto-fit・auto-fill 0 / text-align:center 0 / outline:none 0 /
     @keyframes 0 / @import・外部フォント読み込み 0 / !important 0 /
     新しいトークン（--*）の定義 0 / 新しいクラス名 0 / height 0

   まだやっていないこと（正直に書く）:
     - **1度も描画していない。** 各行に値の根拠は書いたが、390px / 1280px /
       文字サイズ200% / 字送り0.12em の実測はこれから。
     - <pre> は横スクロールする器になる。**スクロール領域はキーボードで操作できる必要がある**
       （WCAG 2.1.1）が、tabindex は CSS では付けられない。
       レンダラ側で <pre tabindex="0" role="region" aria-label="検査結果"> を出すこと。
     - 器の幅は .sec__inner が決めている。.doc は器（.cards 等）を含まないので
       base.css の :has() に当たらず、常に --w-text（この案件は36rem）の1本柱になる。
       4列の表と検査ログには狭いが、広げるには base.css 側の :has() に .doc を足す
       判断が要るので **触っていない**。
   ===================================================================== */


/* =====================================================================
   1. 読み幅
   ---------------------------------------------------------------------
   長文なので1行が長すぎると行を見失う。--w-text（既定40rem＝全角40字／
   mekimeki は36rem）で止める。**表と <pre> には掛けない**：
   表は列に分けた時点で1列あたりが短くなるし、ログは折り返さないので意味が無い。
   器そのものが既に --w-text なので、いまは実質の保険。器を広げる判断をしても
   本文だけは読み幅に留まる、という状態をここで確定させておく。
   ===================================================================== */
.doc h1, .doc h2, .doc h3,
.doc p, .doc ul, .doc ol{ max-width: var(--w-text); }


/* =====================================================================
   2. 見出しの階段
   ---------------------------------------------------------------------
   素の h1 には base.css に規則が無く（h1 は .hero__headline 前提）、
   margin:0 のリセットだけ当たってブラウザ既定の 2em で出る。
   h2 / h3 は base.css が :where() で --fs-h2 / --fs-h3 を当てているので値は変わらないが、
   **階段を1か所で読めるように3段とも並べて書く**（新しい値は1つも作っていない）。

     h1  --fs-h1  26 → 40px   ページに1つ。文書の題
     h2  --fs-h2  22 → 30px   「## 1. 先に調べたこと」
     h3  --fs-h3  19 → 22px   「### A型「広告LP型」」

   SP では 26 / 23.5 / 19.2px と差が小さい（clamp の下限が近いため）。
   **サイズだけでは階層が出ない**ので、上の余白で差を付ける（§3）。
   飾り（左罫・下線バー・英字ラベル）は付けない — 土台の判断7。
   ===================================================================== */
.doc h1{
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  line-height: var(--lh-head);     /* 1.45。和文見出しの実測レンジ1.4〜1.5の中央 */
  letter-spacing: var(--ls-head);  /* 0.03em。base.css の見出しと同じ */
  font-weight: 700;
  color: var(--on-surface);        /* 面に追従させる。--fg 直指定にしない */
}
.doc h2{ font-size: var(--fs-h2); }
.doc h3{ font-size: var(--fs-h3); }


/* =====================================================================
   3. 縦のリズム — 「前の節との切れ目」を余白で作る
   ---------------------------------------------------------------------
   段落間は base.css の .sec__body > * + *（--flow / 16px・mekimeki 24px）が
   そのまま効くので書かない。ここで足すのは **見出しの上** だけ。
   上マージンを下マージンより大きくして、見出しが「下の塊の頭」に見えるようにする。

     hr の前後  56 + 56 = 112px  章の切れ目（原稿の --- ）
     h2 の上    72px  --sp-9     節の切れ目（セクション縦余白と同じ格の余白）
     h3 の上    40px  --sp-7     小見出し（塊どうしの間）
     段落間     16 / 24px --flow
     見出しの下 12px  --flow-tight（base.css の h2,h3,h4 + * 。ここには書かない）

   112 / 72 / 40 / 24 / 12 と隣どうしが必ず目で分かる差になっているので、
   SPで文字サイズの差が2〜4pxしか無くても「どこで節が変わったか」が余白で読める。

   **セレクタは :not() で排他にしてある**（土台の教訓「詳細度の勝ち負けに依存しない」）。
     h1 の直後の h2 → 72pxではなく h1 の規則（24px）に落とす
     h2 の直後の h3 → 40pxではなく base の12pxに落とす（小見出しは親の見出しに付く）
     hr の直後      → hr 側の規則（56px）に一本化する
   ===================================================================== */
.doc > :not(hr, h1) + h2{ margin-top: var(--sp-9); }   /* 72px */
.doc > :not(hr, h2) + h3{ margin-top: var(--sp-7); }   /* 40px */

/* h1 の直後。base.css の h2,h3,h4 + * に h1 が入っていないので、ここだけ自前で持つ。
   題と導入文は同じ塊なので、--flow-tight ではなく段落間と同じ --flow を置く。 */
.doc h1 + *{ margin-top: var(--flow); }

/* 水平線。線1本だけ。太さも色も装飾しない（--line は「装飾の区切り線」用トークン）。
   上下を同じ56pxにして、章の切れ目が h2 の72pxより **重く** 見えるようにしている。 */
.doc hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: var(--sp-8);   /* 56px */
}
.doc hr + *{ margin-top: var(--sp-8); }   /* 56px。直後の h2 はこちらに従う */


/* =====================================================================
   4. 箇条書き・番号付き
   ---------------------------------------------------------------------
   list-style は消さない（Safari の VoiceOver がリストの役割を落とす。土台§5）。
   UA既定の padding-inline-start は 40px で本文から離れすぎるので、
   base.css の .stack と同じ 1.4em に揃える（新しい値を作らない）。
   ::marker だけアクセント色にする（--accent の対地4.5:1はトークン側で実測済み）。
   原稿の項目は2〜4行あるので、項目間は段落間より狭い12px（--sp-3）にして
   「リスト全体で1つの塊」に見せる。
   ※ md.mjs は入れ子リストを throw するので、入れ子の規則は持たない。
   ===================================================================== */
.doc ul, .doc ol{ padding-inline-start: 1.4em; }
.doc li + li{ margin-top: var(--sp-3); }
.doc li::marker{ color: var(--accent); }


/* =====================================================================
   5. 表 — base.css の th{width:34%} を .doc の中だけで解き直す
   ---------------------------------------------------------------------
   **base.css の指定のままだと3列以上で破綻する。**
     :where(.lp) :where(table){ table-layout: fixed }
     :where(.lp) :where(th){ width: 34% }
   md.mjs の出力を読むと、表は3つの形で出てくる:
     ａ ヘッダ無し（| | |）→ thead を出さず、**各行の1列目が <th>**。2列
     ｂ ヘッダ有り2列（| 実測 | |）→ thead に th 2つ、本文は td
     ｃ ヘッダ有り3〜4列（ご要望/A型/B型、#/セクション/解消するもの/具体策）
   ｃ では thead の th が3〜4個あり 34%×4＝136% になる。fixed レイアウトでは
   これが按分されて **ほぼ均等な列** になり、「#」列に25%、「具体策」列にも25%という
   最悪の配り方をする（説明の列が全角10字で折れる）。

   直し方は「34%を消す」ではなく「34%が正しい表にだけ残す」:
     - table-layout: auto にして列幅を中身から決めさせる。◎△✗ の列は細く、
       説明の列は広くなる。.lp が overflow-wrap:anywhere を持っているので
       min-content が1文字まで縮み、**390pxでも横スクロールにならない**
       （土台の方針どおり、表に overflow-x は付けない）
     - ｃのヘッダは width:auto に戻す
     - ａの左端ラベル列にだけ34%を残す。base.css が本来想定していた形がこれ

   罫線: --line は実測1.27:1（custom.css §5）で、行の区切りには足りても
   「表がどこから始まるか」は見えない。表の上端と見出し行の下だけ --on-surface に
   上げて2段の強さにする。**枠で囲わない**（箱にしないのが土台の方針）。

   左右の端の padding を落として、表の文字が本文の左端と揃うようにしている。
   表を「浮いた箱」ではなく本文の続きとして読ませるため。
   ===================================================================== */
.doc table{
  table-layout: auto;
  border-top: 1px solid var(--on-surface);
}
.doc thead th{
  width: auto;                                   /* 34%を解除（3〜4列で破綻するため） */
  border-bottom: 2px solid var(--on-surface);    /* 見出し行の下だけ太く */
}
.doc tbody th{ width: 34%; }                     /* ヘッダ無しの対比表の左端ラベル列 */
.doc tr > :first-child{ padding-inline-start: 0; }
.doc tr > :last-child{  padding-inline-end: 0; }

/* 表の前後。base.css は表の前を --gap-group（40px・mekimeki 64px）にし、後ろは
   --flow（16/24px）のままなので、**上だけ大きく空いて下が詰まる**非対称になる。
   文書では表は段落の続きなので、前後を --flow-loose（32px・mekimeki 40px）で
   揃えて1つの塊にする。見出しの直後の表は base の12pxのまま（見出しに付ける）。
   base の .sec__body > :not(h2,h3,h4) + table と同詳細度なので、
   doc.css が後に読まれること（冒頭②）でこちらが勝つ。 */
.doc > :not(h1, h2, h3) + table{ margin-top: var(--flow-loose); }
.doc table + *{ margin-top: var(--flow-loose); }


/* =====================================================================
   6. <pre> — 検査ログをそのまま貼る
   ---------------------------------------------------------------------
   md.mjs の preBlock() は加工せずエスケープだけして出す。桁が揃っていることに
   意味があるログなので **折り返さない**（white-space:pre）。
   その代わり、はみ出しは **この箱の中だけ** に閉じ込める:
     overflow-x: auto  … 横スクロールは <pre> の内側で起きる
     max-width: 100%   … 箱そのものが器より広くならない（ページは横に伸びない）
   これで WCAG 1.4.10（リフロー）の「ページ全体が横スクロールしない」を守る。
   ログは桁が揃っていること自体が情報なので、1.4.10 の例外（2次元配置を要する内容）に
   当たると判断した。**キーボードでのスクロールは CSS では担保できない**（冒頭の申し送り）。

   等幅書体は端末に元からあるものだけを並べる。@font-face も @import も無し。
   欧文Webフォントの禁止（Inter / Roboto / system-ui / 游ゴシック）には触れていない。
   和文が混じる行は各OSの既定和文に落ちる（そこは桁が崩れるが、ログの主体は
   ASCIIの数値なので許容する）。
   ===================================================================== */
.doc pre{
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  padding: var(--sp-4);                /* 16px。1行目が箱の縁に触れない最小 */
  border-radius: var(--radius);        /* 角丸は案件の1種類だけ（この案件は10px） */
  background: var(--sunk);             /* 沈めた面。--on-surface との4.5:1はトークン側で実測済み */
  color: var(--on-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: var(--fs-sm);             /* 14px。下限13px（--fs-cap）の1段上 */
  line-height: 1.7;                    /* base.css が13〜14pxの文字に使っている値と同じ */
}
.doc > * + pre{ margin-top: var(--flow-loose); }
.doc pre + *{  margin-top: var(--flow-loose); }


/* =====================================================================
   7. インラインコード
   ---------------------------------------------------------------------
   原稿に出るのはファイル名・CSS宣言・属性（text_fv-sp.png / letter-spacing: 0.12em /
   alt="..."）。地の文と見分けが付けばよいので、等幅＋淡いアクセント面の小さな面にする。
   14px は土台の下限13pxより上。--accent-weak の上の --fg は tokens.mjs が
   4.5:1 を実測して自動補正する組み合わせ（本文 / 淡いアクセント面）なので、
   面を敷いても文字が基準を割らない。
   ===================================================================== */
.doc code{
  padding: 0 var(--sp-1);              /* 4px。行の高さを変えないよう左右だけ */
  border-radius: var(--radius);
  background: var(--accent-weak);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: var(--fs-sm);
}


/* =====================================================================
   8. わざと規則を持たない要素（洗った結果、意図的に空である記録）
   ---------------------------------------------------------------------
   <a>       base.css の :where(.lp) :where(a:not(.btn)) が --accent と1pxの下線を
             当てている。**.doc a{} と書くと (0,1,1) になり、これは主ボタンの文字を
             消した事故（base.css §0-D）と同じ形の書き方**なので、書かない。
             文書ページに .btn は出ないが、同じ形を再生産しない方を選んだ。
   <strong>  base.css が font-weight:700 を当てている。色を足さない
             （色だけの強調は WCAG 1.4.1。太字と色の併用は文書では過剰）。
   <th>/<td> の文字サイズ(14px)・上揃え・下罫・左揃えは base.css のまま。
   <h4>以下・引用・画像・入れ子リスト・コードブロックは md.mjs が throw するので、
             この文書ページには構造上出てこない。規則を作らない。
   ===================================================================== */


/* =====================================================================
   9. 器の幅 — 文書ページだけ 52rem まで広げる（2026-09-03 実測で確定）
   ---------------------------------------------------------------------
   §0 の申し送りにあった保留を、描画して測ってから決めた。

   PC1280 で原状（.sec__inner が --w-text 1本柱）を測った実測値:
     ・検査ログ <pre>  幅 544px / 必要幅 649px → **右端が切れて横スクロール**。
       「検査結果をそのまま出せます」と言うページで中身が読めていなかった
     ・構成意図の4列表  幅 544px → 「ファースト/ビュー」「やってみた/い」
       「面倒ではな/いか」と**語の途中で折れる**。右に736pxの空きがあるのに、である

   3案を実際に描いて比べた（撮影: scratchpad/docshots/*_pc1280_{orig,A,B,C}.png）:
     A --w-wide(68rem=1088px)  表は全行1行に収まるが、<pre> は中身660pxに対し箱が
                               1088pxで**灰色の空箱が右に伸びる**。2列の表も間延びする
     B 52rem(832px)            表・ログとも収まる。箱の空きはAより小さいが残る
     C 52rem ＋ <pre> を中身幅  **採用**。ログの箱が 649/649 とぴったりになる

   本文（p / ul / ol / 見出し）は §1 で --w-text に絞ってあるので、
   **広がるのは table と pre だけ**。読み幅は原状と1pxも変わらない（実測 544px で不変）。
   SP390 は器が viewport 由来なので、この規則は当たらない（実測 390/358px で不変）。

   .doc pre の width:max-content は §6 の max-width:100% と対で読むこと。
   中身が器より広ければ 100% で頭打ちになり、横スクロールは箱の内側に閉じる
   （SP390 では実測 358px 幅・必要幅649px で従来どおり箱の中がスクロールする）。
   ===================================================================== */
.sec__inner:has(.doc){ max-width: calc(52rem + var(--gutter) * 2); }
.doc pre{ width: max-content; }