Design Pattern Catalog

## 用途
すべての色・タイポ・余白・radius・shadow の正本。編集後 `bun tooling/design-build.ts` で全面波及。

## スロット
なし（値の辞書）。

## Do
- 値の参照は必ず var() / 生成パイプライン経由
- 新しい値が要るときは tokens.json に追加してから使う

## Don't
- HEX 直書き（design-lint が検出）/ tokens.json の値の複製

## 用途
すべての色・タイポ・余白・radius・shadow の正本。編集後 `bun tooling/design-build.ts` で全面波及。

## スロット
なし（値の辞書）。

## Do
- 値の参照は必ず var() / 生成パイプライン経由
- 新しい値が要るときは tokens.json に追加してから使う

## Don't
- HEX 直書き（design-lint が検出）/ tokens.json の値の複製

## 用途
ページ内で一番押させたい 1 アクション（戦略全体を見る等）。accent 面 + 矢印で前進感を出す主 CTA。1 セクション 1 個を目安にする。

## スロット
- テキスト: CTA ラベル（動詞で始める。「戦略全体を見る」等）
- href: 遷移先。内部は同一タブ、外部 Drive/Sheets 等のみ `target="_blank" rel="noopener"`
- 矢印（`::after` の →）は CSS 側で自動付与。本文に「→」を書き足さない

## Do
- 主 CTA として 1 面 1 個に絞る（並置する副リンクは hero-link 等のテキストリンクにする）
- 色・radius・shadow は token（--accent / --accent-dark / --shadow-md/lg）に任せる
- ラベルは動詞始まりの短文にする

## Don't
- disabled / loading 状態を空想で書かない（実装に未定義。必要になったら tokens/patterns に追加してから使う）
- :focus リングを消さない（未定義のため既定リングが唯一の可視化。CSS で outline:none にしない）
- 矢印を本文テキストで二重に書かない（::after と重複する）

## 用途
売り物・リソース等を 1 枚ずつ見せ、カード全体を 1 つのリンクにする回遊カード。天面の accent ラインで束ねる。

## スロット
- product-code: 英字の小ラベル（P1 · PACKAGE 等、任意）
- product-name: カード見出し（1〜2 行）
- product-tagline: 補足説明（1〜2 行）
- product-link-meta: 下段のラベル + `.ext`（→ / ↗）。href は `<a>` 自身に持たせる

## Do
- カード全体を 1 リンク（`<a class="product-card">`）にし、内側に別リンクを入れ子にしない
- border-top の accent ライン・shadow・radius は token に任せる
- グリッド（.product-grid 等）に載せて等幅で並べる

## Don't
- disabled / active / focus 状態を空想で書かない（実装は [default, hover] のみ）
- カード内に独立したボタン/リンクを入れ子にしない（クリック領域が競合する）
- hover の translateY を消して静的化しない（回遊カードの手掛かりが消える）

## 用途
担当者名・属性などの短い付帯情報を、本文の行内に小さく添える静的ラベル。クリックしない情報の粒。

## スロット
- テキスト: 短いラベル（担当者名 / 区分等）。1〜2 語に収める

## Do
- 静的な情報ラベルとして使う（本文の脇に添える粒）
- 色・border・radius は token（--surface / --border-strong）に任せる
- 実配置で本文の直後に置く場合のみ margin-left を親側で足す（fragment には含めない）

## Don't
- hover / active / focus 状態を空想で書かない（実装は静的 [default] のみ。押させたいなら button パターンを使う）
- リンクやボタンとして使わない（クリック可能にするなら別パターンへ）
- 長文を入れて折り返させない（pill は 1 行前提）

## 用途
原則・注記・補足を本文から一段引き上げて囲うノート。Markdown の `>` 引用に要素セレクタで自動適用される。

## スロット
- 本文段落 × 1〜複数（`<p>`）。`<strong>` で冒頭ラベル（「原則:」等）を立てられる
- 先頭/末尾段落の余白は CSS が詰める（p:first-child / p:last-child）

## Do
- 短い原則・注記に使う（本文から浮かせたい 1〜2 段落）
- 冒頭に `<strong>` ラベルを置いて要点を先出しする
- 色・radius は token（--accent / --accent-soft / --radius-card）に任せる

## Don't
- hover / active 状態を空想で書かない（実装は静的 [default] のみ）
- accent 面の上に別の accent 面（ボタン等）を重ねてコントラストを潰さない
- 長い本文セクション全体を囲わない（ノートは短い補足の粒。長文は通常本文で書く）

## 用途
単一 KPI を「ラベル → 大数字 → 補足」で 1 枚に見せるタイル。週次スコアボードに 3 連で並べる。

## スロット
- kpi-label: 指標名（新規受注 / 継続率 等）
- kpi-value: 大数字（必要なら単位を含める）。tabular-nums で桁を揃える
- kpi-sub: 目標・進捗などの補足（省略しない）
- （任意）is-red / is-yellow / is-green + kpi-emoji: 達成状況の色 + 絵文字。plain fragment には含めない

## Do
- 3 セルを同一段構造にして大数字のベースラインを揃える（読み比べ可能にする）
- 状況色を出すときは kpi-emoji（🔴🟡🟢）を必ず併記し、色以外の手掛かりを残す
- radius / shadow / 色は token（--surface / --border / --shadow-sm）に任せる

## Don't
- kpi-sub を省いて大数字だけ置かない（目標・進捗の文脈が消える）
- is-* の色だけで達成状況を伝えない（色覚非依存の手掛かりを併記する）
- loading / error / empty 状態を空想で書かない（実装は [default, hover] のみ）

## 用途
数表・KPI・案件ログなどの構造化データを見せる標準テーブル。pandoc が生成する `<table>` に要素セレクタで自動適用される。

## スロット
- thead > th: 列見出し（uppercase で小さく）
- tbody > td: セル値。1 列目は白背景で nowrap（見出し列扱い）
- 行数・列数は内容に応じ可変（要素セレクタなのでクラス指定は不要）

## Do
- 見出しは thead > th に置く（uppercase・muted は CSS が付与）
- 数値列は必要に応じ tabular-nums を併用して桁を揃える
- 横に広いテーブルは 720px 以下の overflow-x スクロールに任せる（列を削らない）

## Don't
- 行 hover の tint（accent 3% alpha）は装飾。行の選択状態や意味の唯一の手掛かりにしない
- th に scope を付けずに複雑な多階層ヘッダを組まない（読み上げ順が壊れる。必要なら G5+ で scope 付与）
- 狭幅で列を display:none で隠さない（横スクロールで全列を残す方針）

## 用途
役割ページ・リファレンス等への入口を 2 列カードで並べるナビゲーショングリッド。各カードは行き先の見出し + 中身の箇条書きプレビューを持ち、カード全体を 1 リンクにする。

## スロット
- map-grid: カードの 2 列コンテナ
- map-card（`<a>`）: 1 枚 = 1 リンク。内側に:
  - map-arrow: 右上のホバー矢印（装飾）
  - map-eyebrow: accent の小ラベル（行き先カテゴリ）
  - map-title: 行き先見出し
  - ul / li: 行き先の中身プレビュー（箇条書き）

## Do
- カード全体を 1 リンクにし、内側に別リンクを入れ子にしない
- 箇条書きは行き先の目次的プレビューに留める（本文を書き込まない）
- border / shadow / radius / 色は token（--surface / --border / --border-strong / --shadow-*）に任せる

## Don't
- loading / active / disabled 状態を空想で書かない（実装は [default, hover] のみ）
- map-arrow を常時表示にしない（hover の手掛かりが平坦化する）
- 1 カードに別ボタン/リンクを入れ子にしない（クリック領域が競合する）

## 用途
TOP のファーストビュー。ダーク面に eyebrow・H1 キャッチ・North Star 級の主要指標 4 連・主要導線（CTA + リンク）を 1 帯にまとめる。

## スロット
- hero-eyebrow: mono の小ラベル（現在地・パンくず）
- hero-title: H1 キャッチ（inline span で補足を弱色 rgba 白で添えられる）
- hero-stats: hero-stat × 4（stat-label / stat-value / stat-sub の 3 段）
- hero-links: hero-cta（主 CTA、1 本）+ hero-link（副導線、複数可）

## Do
- 面は var(--ink-dark) + グリッド地 + 天面 accent ライン（::before）で構成し、黒ベタ自作しない
- 数値セルは stat-label → stat-value → stat-sub の 3 段で揃え、大数字のベースラインを一致させる
- on-dark の文字は白の rgba 不透明度と var(--surface) を使う（生グレーを直接置かない）

## Don't
- loading / active / disabled 状態を空想で書かない（実装は [default, hover] のみ）
- hero-cta を 2 本以上置かない（主 CTA は 1 本、残りは hero-link に落とす）
- stat セルを 5 つ以上に増やさない（4 連＝880px で 2×2 に畳む前提。増えるなら別パターン）

## 用途
週次ダッシュボードの KPI スコアボード。単一 KPI タイル（ui: stat-tile）を 3 連で横並びにし、各セルを達成状況で着色する。3-up の配置と responsive の畳み方がこのパターンの責務。

## スロット
- weekly-block: スコープ用ラッパ（CSS が `.weekly-block .kpi-*` で定義されるため必須）
- kpi-strip: 3 連のグリッドコンテナ
- kpi-card × 3（= ui stat-tile）: kpi-label → kpi-value → kpi-sub。任意で:
  - is-red / is-yellow / is-green: 達成状況の背景 + border + value 色
  - kpi-emoji（🔴🟡🟢）: is-* と対で必ず併記
  - kpi-trend: kpi-value 内の前週比などの小添字

## Do
- 3 セルを同一段構造（ラベル → 大数字 → 補足）で揃え、大数字のベースラインを一致させる
- is-* で状況色を出すときは kpi-emoji を必ず併記する（色覚非依存の手掛かり）
- 単独設置時も `.weekly-block` ラッパを付け、CSS スコープを保つ

## Don't
- loading / error / empty 状態を空想で書かない（実装は [default, hover] + is-* 着色のみ）
- セルを 4 つ以上に増やさない（3 連＝880px で 2 列、560px で 1 列に畳む前提）
- is-* の色だけで達成状況を伝えない（kpi-emoji を落とさない）

## 用途
各セクションの入口。eyebrow（英字/記号ラベル）→ H2 タイトル → 任意の補足ノートで「ここは何のセクションか」を 3 段で示す。

## スロット
- section-eyebrow: accent 色の小ラベル（"★ Section Map" 等）
- section-title: セクション見出し（h2）
- section-note: 補足説明（任意、リンク可）

## Do
- 見出しは h2 に固定し、ページの h1（hero）の下位に置く
- eyebrow はラベルテキスト（★ / 英字）で意味を持たせ、accent 色は補助にする
- 色・余白は token（--accent / --text-soft）に任せる

## Don't
- hover / active 等の状態を空想で書かない（純静的、states: []）
- section-title を h1 にしない（1 ページ 1 h1 = hero を崩す）
- section-note に本文級の長文を詰めない（1〜2 行の補足に留める）

## 用途
ページ最上部に固定するグローバルナビ帯。左にブランド、パンくず的な現在地ラベル、右端に主要エリアへのピル型ナビを並べる。スクロールしても sticky で残る。

## スロット
- topbar-brand: ブランド名 + `.dot`（accent ドット）。href はサイトルート
- 現在地ラベル: topbar-divider（`|`）の後ろに置く現在ページ名（span、リンクではない）
- topbar-nav: 右寄せ（margin-left:auto）のピル型リンク群。主要エリアへのジャンプ

## Do
- 帯は container の負マージン（-40px -32px 系）で全幅に張り出させ、内側の topbar-inner で max-width 1100px に揃える
- 現在地ラベルは span のまま（自ページへのリンクにしない）
- 色・border・shadow は token（--border / --text-soft / --surface / --shadow-sm）に任せる

## Don't
- disabled / active / focus 状態を空想で書かない（実装は [default, hover] のみ）
- topbar-nav に大量のリンクを詰めない（折り返して 2 段になり sticky 帯が厚くなる）
- blur 背景の rgba(245,246,247,0.85) をベタ塗りに変えない（下のコンテンツが透ける sticky の質感が消える）

## 用途
本編の目次。「本日お話しすること」を番号付きで 4〜6 項目に列挙し、話の全体像を示す。

## スロット
- eyebrow: "AGENDA"
- h2: 目次見出し（例 "本日お話しすること"）
- agd-list（ol）× N 項目、各 li に:
  - agd-num: 通し番号（"01".."05"）
  - agd-item: 項目名（本文）
  - agd-note: 右寄せの英字ラベル（CONTEXT / SOLUTION / CASE …）
- slide-foot: ページ番号 / デッキ名

## Do
- light 面の `.container`（全幅・左右 120px）に敷く。agd-list を中央寄せで狭めない（GUIDE L61）
- 項目は本編のセクション数と一致させる（章扉 dark-divider と番号を揃える）
- 行間・区切り線はテンプレの border に任せ、縦間隔は `--sp-*` を使う

## Don't
- 項目を 7 個以上に増やさない（1080 高でのはみ出し・行間圧縮を招く）
- agd-item を 2 行になる長文にしない（1 行 1 項目で一覧性を保つ）
- agd-note を必須情報にしない（英字タグは装飾。無くても意味が通ること）

## 用途
導入事例の 1 枚。左に成果物イメージ、右に「課題→施策→結果」の物語を並べて具体性を持たせる。

## スロット
- eyebrow: "CASE STUDY"
- h2: 事例見出し（企業属性・ダミー注記）
- cs-grid: `[cs-visual | cs-flow]`
  - cs-visual: cs-img（画像枠 / placeholder の span）+ caption
  - cs-flow: cs-step × N（cs-k ラベル + 本文 p）、末尾は cs-result（cs-k + cs-result-num `.num` + cs-unit + kpi-cap）
- slide-foot: ページ番号 / デッキ名

## Do
- 左カラム幅は固定（`760px 1fr`）を守り、画像枠と本文の境界を揃える
- 課題→施策→結果を必ず 3 段で構成し、結果は数値（cs-result-num）で締める
- cs-img は本番で実スクリーンショット等に差し替え、"IMAGE — …" placeholder を残さない

## Don't
- 結果数字に単位（cs-unit）を付け忘れない（"3" だけでは倍か件か不明）
- cs-step を 4 段以上に増やして右カラムを詰め込まない（課題/施策/結果の 3 拍が基本）
- placeholder の span 文言や caption のダミーをそのまま出荷しない（GUIDE L39）

## 用途
現状（Before）と導入後（After）を左右対比で見せる。課題の列挙と代表指標のビフォーアフターをセットで示す。

## スロット
- eyebrow: "BEFORE / AFTER"
- h2: 見出し
- cmp-grid: `[cmp-before カード | cmp-arrow(→) | cmp-after カード]`、各カード:
  - chip: 面ラベル（BEFORE は cmp-chip-muted / AFTER は `.chip.accent`）
  - h3: カード見出し
  - cmp-list × N li: 対比項目（Before は "—"、After は "✓" の擬似要素）
  - cmp-stat: cmp-sk（指標ラベル）+ cmp-sv（数値 `.num`）+ cmp-su（単位）
- cmp-arrow: 中央の遷移矢印（装飾）
- slide-foot: ページ番号 / デッキ名

## Do
- Before/After の項目数を揃える（対応関係が読み取れるように 1 行ずつ対にする）
- cmp-stat の指標を左右で同じ（例 MONTHLY LEADS）にして数値の変化を直接比較できるようにする
- After カードのみ accent 枠（`.cmp-after`）で強調し、Before は ivory の沈んだ面に留める

## Don't
- 左右のカード幅を手で変えない（`1fr 96px 1fr` の対称グリッドを崩さない）
- cmp-stat のダミー数値（30→90 等）をそのまま出荷しない（GUIDE L39）
- After の "✓" 色だけで改善を表現しない（項目文で改善内容を明記する）

## 用途
デッキ 1 枚目。サービスカテゴリ・提出先・提出日・社名と、H1 キャッチ 1 本を dark 面に載せる。

## スロット
- cv-rail: 左端の accent レール（装飾のみ、内容なし）
- cv-meta-top: cv-logo（社名ロゴ "CURUMI"）/ 日付 / 提出先社名。cv-meta-div で区切る
- eyebrow: サービスカテゴリ（例 "CURUMI AI BUDDY — SERVICE PROPOSAL"）
- h1: キャッチ（1〜2 行、`<br>` 改行可。cv-accent で一部を accent-light 強調）
- cv-sub: サブ説明文（strong で一部を paper 強調）
- cv-foot: 左＝CONFIDENTIAL ラベル / 右＝ページ番号（"01 / 10"）
- deco-num（cv-deco）: 装飾の大型数字

## Do
- 面は `.slide.dark` を使う（#14171d + グリッド。黒ベタ自作禁止 — GUIDE L34）
- 左右エッジは cv-* 側の絶対配置（120px 起点）に従い、ブロック間は `--sp-*` を使う
- 出荷前に meta-top の日付・提出先・cv-foot のページ番号を実データへ差し替える（GUIDE L39）

## Don't
- dark 面でグレー文字を直接指定しない（cv-sub 等の定義済みクラスに任せる — GUIDE L35）
- H1 を 3 行以上にしない（1920 幅での折返しで cv-body の垂直センターが崩れる）
- deco-num を情報（ページ数の代替等）として使わない（装飾専用）

## 用途
最終スライド。次アクション（無料診断等）の呼びかけと、連絡先（メール / Web / 社名）を dark 面で提示する。

## スロット
- eyebrow: "NEXT STEP"（中央寄せ指定）
- h2: クロージング見出し（大型、`<br>` 改行可）
- lead（cta-lead）: 呼びかけの補足文
- cta-contact × cta-item（通常 3 つ）、各項目:
  - cta-k: 種別ラベル（MAIL / WEB / COMPANY）
  - cta-v: 値（英字は既定、和文は `.cta-jp`）
- deco-num（cta-deco）: 装飾の大型数字
- slide-foot: ページ番号 / デッキ名

## Do
- 面は `.slide.dark` を使う（黒ベタ自作禁止 — GUIDE L34）
- 連絡先を cta-contact の中央軸に並べ、区切りは cta-item の border-left に任せる
- 出荷前にダミー連絡先（hello@curumi.co.jp 等）を実データへ差し替える（GUIDE L39）

## Don't
- dark 面でグレー文字を直接指定しない（cta-lead 等の定義済みクラスに任せる — GUIDE L35）
- 連絡先をリンク化する場合、内部は同一タブ。`target="_blank"` は外部 Drive 等のみ（GUIDE L36）
- cta-item を 4 つ以上に増やして横幅を詰めない（3 連が基本レイアウト）

## 用途
章の区切り。dark 面に章番号（eyebrow）・章タイトル（H2）・章リードを置き、セクションの入口を示す。

## スロット
- eyebrow: 章番号ラベル（例 "SECTION 01"）
- h2: 章タイトル（大型、`<br>` 改行可）
- lead（dv-lead）: 章の導入文
- deco-num（dv-deco）: 装飾の大型章番号
- slide-foot: 左＝ページ番号 / 右＝デッキ名

## Do
- 面は `.slide.dark` を使う（黒ベタ自作禁止 — GUIDE L34）
- 右側は deco-num 用に空ける（dv-inner の `right: 480px`）。本文を右端まで伸ばさない
- eyebrow の章番号と slide-foot のページ番号を実デッキの通し番号に合わせる

## Don't
- dark 面でグレー文字を直接指定しない（dv-lead 等に任せる — GUIDE L35）
- H2 を長文にしない（章タイトルは短句。説明は lead に回す）
- deco-num の章番号を eyebrow と食い違わせない（装飾だが表示上の混乱を招く）

## 用途
導入効果・目標値などの主要指標を 3 つ、大数字で並べて見せる。1 スライド 1 メッセージの数値サマリ。

## スロット
- eyebrow: "EXPECTED IMPACT" 等
- h2: 見出し（ダミー値を出す段階は「（数値はダミー）」を明記）
- kpi-grid × 3 kpi-cell、各セル:
  - kpi-label: 英字ラベル（MONTHLY LEADS 等）
  - kpi-value: `.num`（大数字、必要に応じ `.accent`）+ kpi-unit（倍 / 件 / % 等の単位）
  - kpi-cap: 指標の補足説明
- slide-foot: ページ番号 / デッキ名

## Do
- 3 セルすべてを `[ラベル → 大数字 → 本文]` で統一し、大数字のベースラインを一致させる（GUIDE L65）
- セル間の区切りは kpi-cell の border-left に任せ、全体は `.container` 全幅に敷く
- 出荷前にダミー数値を実測値へ差し替え、h2 のダミー注記を消す（GUIDE L39）

## Don't
- 1 セルだけラベルや説明を省かない（大数字だけ上下にずれて不揃いになる — GUIDE L65）
- 単位（kpi-unit）を省いて数字だけ置かない（3 倍 / 3 件 / 3% を区別できなくなる）
- セル数を 4 以上に増やして横幅を詰めない（3 連＝各 4 カラム幅が前提。増えるなら別パターン）

## 用途
価値観・主張を 1 文で言い切る「間」のスライド。データではなく思想を提示する章の導入や締めに使う。

## スロット
- eyebrow: ラベル（例 "OUR BELIEF"、中央寄せ指定）
- h2（st-statement）: 主張 1 文（大型、`<br>` 改行可。st-accent で一部を accent 強調）
- st-bar: accent の下線バー（装飾）
- lead（st-lead）: 主張を補足する 1 段落
- slide-foot: ページ番号 / デッキ名

## Do
- 面は `.slide.ivory`（テンプレ定義の面）を使い、自作の中間色背景を作らない
- ステートメントは 1 文に絞る。補足は st-lead に分離する
- 全ブロックを st-center の中央軸に載せ、eyebrow も中央寄せにする

## Don't
- 箇条書き・複数文を h2 に詰め込まない（このパターンは 1 文専用）
- st-accent を多色化しない（強調は 1 箇所、accent のみ）
- st-bar を意味のある区切り（セクション境界等）として使わない（装飾専用）

## 用途
料金プランの提示。2〜3 プランを横並びにし、推奨プランを中央 accent で強調する。

## スロット
- eyebrow: "PRICING"
- h2: 見出し（税別・ダミー等の条件を明記）
- pr-grid × N pr-card（推奨は `.pr-featured`）、各カード:
  - pr-head: pr-code（"PLAN 01"）+ 推奨カードのみ `.chip.accent`（"おすすめ"）
  - h3: プラン名
  - pr-price: pr-yen（¥）+ `.num`（金額）+ pr-per（"万 / 月"）
  - pr-list × N li: 含まれる内容（✓）
- pr-note: 脚注（最低契約期間・別途実費・調整可 等）
- slide-foot: ページ番号 / デッキ名

## Do
- カード行の `gap` は `--grid-gutter`（30px）に統一する（GUIDE L48）
- 2 プランに減る場合は列数を 2 に減らす。横長になったカードは内部を `[主情報 | 区切り線 | リスト]` の 2 カラムに分割して間延びを防ぐ（GUIDE L63-64）
- 全カードの `pr-price` ベースラインを揃える（プラン名の行数を揃える）

## Don't
- プランが減っても 3 列幅のままカードを広げない（列数を減らす — GUIDE L63）
- ダミー金額（¥50/150/300 万）や pr-note のダミー条件をそのまま出荷しない（GUIDE L39）
- 推奨を accent 枠だけで示さない（chip テキストを併用 — 色覚差で潰れる）

## 用途
導入から成果までの流れを横 4 ステップで示す。各ステップの名称・期間・やることを 1 行で提示する。

## スロット
- eyebrow: "PROCESS"
- h2: 見出し
- pf-flow × 4 pf-step（現在地は `.pf-now`）、各ステップ:
  - pf-chip: 丸チップ内の番号（`.num`、"01".."04"）
  - h4: ステップ名
  - pf-dur: 期間（"WEEK 1–2" / "MONTH 2" 等）
  - p: ステップの説明（短文）
- pf-step 間の ::after: コネクタ線（装飾、自動生成）
- slide-foot: ページ番号 / デッキ名

## Do
- ステップは 4 つを基本に等幅（`repeat(4, 1fr)` + `gap`）で並べる（GUIDE L48）
- 現在進行中のステップに `.pf-now` を 1 つだけ付け、accent 反転で位置を示す
- 各ステップの説明 p は 1〜2 行に収め、max-width（340px）内で折り返す

## Don't
- ステップ数を可変にして列数だけ広げない（増減時は grid の列数を合わせる — GUIDE L63）
- `.pf-now` を複数付けない（「今どこか」が一意でなくなる）
- コネクタ線を意味のある依存関係として使わない（装飾専用）

## 用途
TOP のような手組みの一枚ダッシュボード。section-page パターン（topbar / hero / section-head / card-grid / kpi-row）を積み上げ、週次・目標データはマーカー注入で差し替える。md 生成ではなく HTML を直接持つ唯一系。

## スロット
- `<head>` の `:root { /* DESIGN_TOKENS:START */ ... }` マーカー: design-build のトークン注入ターゲット
- 本文: topbar → hero → 複数 section（section-head + card-grid / kpi-row / ui 部品）
- `<!-- WEEKLY_BLOCK -->` / `<!-- GOALS_BLOCK -->` マーカー: build.sh が md partial を inject

## Do
- `:root` の色トークンは手書きせず DESIGN_TOKENS マーカーに注入させる（`bun tooling/design-build.ts` の対象にする）
- セクションは section-page / ui の既存パターンから組む（新しい見た目を発明しない）
- 週次・目標など動的部は md partial + マーカー inject に寄せ、手書き HTML と混ぜない

## Don't
- :root のトークン値を手編集しない（design-build と競合しドリフトする）
- build.sh の md → HTML ループに index.html を拾わせない（clobber guard 済み。TOP を破壊する）
- h1 を複数置かない（hero の 1 本に限定し、以降は section-head の h2）

## 用途
marp 33 テンプレで表現しきれない一点物の提案・サービス資料。1 スライド = 1 `<section class="slide">`、1920×1080 固定。sections.html から必要な `<!-- pattern: ... -->` ブロックだけ残して組み替える。

## スロット
section-deck contract のパターンを積む（cover / dark-divider / agenda / lead-statement / kpi-row / compare / pricing / case / process / cta）。各パターンのスロットは section-deck/<name>.md が正本。

## Do
- パターンは section-deck contract から選ぶ（GUIDE.md のパターン一覧に対応）。新しいレイアウトを発明しない
- 色・フォントは CSS 変数経由のみ（HEX 直書き禁止、例外は rgba() の白/黒透過）
- 全ブロックを .container 全幅に敷き、grid の gap は var(--grid-gutter)、エッジは var(--grid-margin)（GUIDE レイアウト原則）
- tracked な正本は docs/strategy/decks/<slug>/index.html。output/decks/ は gitignore なので sync 前にローカルを消さない
- 出荷前にダミー数値・連絡先を実データへ差し替え、PNG で全スライド目視 QA（GUIDE 手順 5）

## Don't
- 3+ stop gradient / filter: blur() / transform: skew() を使わない（marp lintCss と同基準）
- dark 面でグレー文字を直接指定しない（.dark .lead 等の定義済みクラスに任せる）
- max-width 中央寄せ・幅の手計算を足さない（12 カラムグリッドに載せる）

## 用途
戦略・運用ドキュメントの標準ページ。Markdown を書けば build.sh（pandoc）が `_style.css` を当てた standalone HTML を生成する。ページの見た目を個別に作り込まず、全 doc で共通トンマナに載せる。

## スロット
md の見出し構造そのもの（# = ページタイトル / ## = セクション / ### = 小見出し）＋本文・table・リンク。スタイルは _style.css が一括で与える。

## Do
- md を書いて build.sh（または CI の build-strategy-docs）に HTML 化させる。HTML を手で書かない
- 見出しは md の #/##/### で構成し、階層順を守る
- 色・余白・タイポは _style.css（= tokens 由来）に任せる

## Don't
- 生成された .html を手編集しない（次の build で上書きされる）
- _style.css 外のインライン style を md に埋め込まない（トンマナが割れる）
- index.html / INDEX.md をこの経路で生成しない（build.sh が clobber guard で明示的に除外している）