@lism-css/mcp 0.24.0 → 0.26.0

package/dist/data/guides/css-rules.md

@@ -4,9 +4,10 @@
 
 - [CSS Layer 構造](#css-layer-構造)
 - [クラス分類とプレフィックス](#クラス分類とプレフィックス)
-- [Component Class（`c--`）](#component-classc--)
+- [独自クラスの選び方（2分類）](#独自クラスの選び方2分類)
+  - [Block Class（`b--`）](#block-classb--)
+  - [Custom Class（`c--`）](#custom-classc--)
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
-- [独自プレフィックス](#独自プレフィックス)
 - [CSS の配置場所](#css-の配置場所)
 
 [詳細](https://lism-css.com/docs/css-methodology.md)
@@ -24,16 +25,23 @@ Lism CSS は CSS Layers による詳細度管理を採用しています。
 Settings（トークン定義）
   → @layer lism-base（Reset CSS・トークン・set-- クラス）
       → @layer reset（リセットCSS）
+  → @layer lism-block（b-- Block Class — CSS でベーススタイルを管理する基礎部品）
   → @layer lism-trait（is-- / has-- Trait Class）
   → @layer lism-primitive
       → @layer layout（l-- Layout Primitive）
       → @layer atomic（a-- Atomic Primitive）
-  → @layer lism-component（c-- Component Class — BEM 構造を持つ UI 部品）
-  → @layer lism-custom（ユーザーカスタマイズ用）
+  → @layer lism-custom（ユーザーの独自CSS — c--）
   → @layer lism-utility（u-- ユーティリティクラス）
   → Property Class（レイヤー外 — 最も詳細度が高い）
 ```
 
+`lism-block` は `lism-trait` / `lism-primitive` より弱い位置にあるため、`b--` のベーススタイルには、明示的に付与したクラス（`is--` / `has--` / `l--` など）が勝ちます。
+
+なお、この優先関係が保証されるのはレイヤーありの標準ビルド（`main.css` / `full.css`）だけです。`main_no_layer.css` / `full_no_layer.css` にはレイヤーがないため、読み込み順と詳細度に依存します。
+
+ユーザーが定義する独自クラス・上書きスタイルは、役割に合わせて適切なレイヤーに配置します。
+例えば、トークンやベーススタイルの上書きは `@layer lism-base`、`b--` のベーススタイルは `@layer lism-block`、それ以外の独自クラス（`c--`）は `@layer lism-custom` に置きます。
+
 ## クラス分類とプレフィックス
 
 [詳細](https://lism-css.com/docs/naming.md)
@@ -45,7 +53,8 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 | Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
 | Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `l--grid`, `l--flex`, `l--stack` |
 | Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `a--icon`, `a--divider` |
-| Component Class | BEM 構造を持つ UI 部品 | `c--` | `c--button`, `c--accordion` |
+| Block Class | ベーススタイルを CSS 側で管理する基礎部品 | `b--` | `b--btn`, `b--badge`, `b--card` |
+| Custom Class | Lism 本体に含まれない、ユーザーが自由に定義するカスタムクラス | `c--` | `c--featureList`, `c--header` |
 | `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `is--container`, `is--wrapper`, `is--layer`, `is--boxLink` |
 | `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
 | Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--enclose` |
@@ -53,12 +62,14 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 
 **併用ルール:**
 
-- `l--` と `c--` は併用OK（例: `<div class="l--flex c--nav">`）
-- 同カテゴリ内の Primitive 併用は不可（例: `l--flex` と `l--grid`、`a--icon` と `a--divider` は同要素に付けない）
-- `l--` × `a--` は非推奨（役割的に同居しない想定）
-- `is--` / `has--` 同士は併用OK（Trait は複数併用できる）
-- `is--` / `has--` × `l--` / `a--` も併用OK
-- `c--` 同士の併用ルールとBEM構造は[Component Class（`c--`）](#component-classc--)を参照
+- Primitive の併用は禁止（`l--`同士、`a--`同士、`l--`+`a--` はNG）
+- Trait の併用は可 (`is--`同士 / `has--`同士、 `is--` + `has--` はOK)
+- Trait + Primitive の併用は可 (`is--`/`has--` + `l--`/`a--` はOK)
+- `b--` + Primitive / Trait の併用は可（`b--` + `l--`/`a--`/`is--`/`has--` はOK）
+- `b--` + `b--` は禁止
+- `c--` + `c--` は禁止
+- `b--` + `c--` は禁止
+
 
 **`is--` と `has--` の判定軸:**
 
@@ -71,20 +82,21 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 class 属性にクラスを直接記述する場合は、以下の順序で並べてください。
 
 ```
-[customClass] [c--] [a--] [l--] [set--] [is--] [has--] [u--] [-]
+[規約対象外クラス] [c--] [b--] [a--] [l--] [set--] [is--] [has--] [u--] [-]
 ```
 
-| # | 区分 | 例 |
-| --- | --- | --- |
-| 1 | 独自クラス（`customClass`） | `z--header`, `hoge` |
-| 2 | Component（`c--`） | `c--box`, `c--box--primary` |
-| 3 | Atomic Primitive（`a--`） | `a--icon`, `a--divider` |
-| 4 | Layout Primitive（`l--`） | `l--flex`, `l--columns` |
-| 5 | Set Class（`set--`） | `set--hov`, `set--bxsh` |
-| 6 | Trait Class 役割宣言（`is--`） | `is--wrapper`, `is--layer` |
-| 7 | Trait Class 機能付与（`has--`） | `has--transition`, `has--gutter` |
-| 8 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
-| 9 | Property Class（`-`） | `-p:20`, `-bgc:base-2`, `-hov:-c` |
+| # | 区分 |
+| --- | --- | 
+| 1 | Lismの規約対象外のクラス（外部ライブラリ・JSフック等） |
+| 2 | Custom（`c--`） |
+| 3 | Block（`b--`） |
+| 4 | Atomic Primitive（`a--`） |
+| 5 | Layout Primitive（`l--`） |
+| 6 | Set Class（`set--`） |
+| 7 | Trait Class 役割宣言（`is--`） |
+| 8 | Trait Class 機能付与（`has--`） |
+| 9 | Utility Class（`u--`） |
+| 10 | Property Class（`-{prop}:{value}`） |
 
 ```html
 <!-- OK -->
@@ -96,33 +108,73 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 
 なお、`class` 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。
 
-## Component Class（`c--`）
+## 独自クラスの選び方（2分類）
+
+Lism CSS が提供するクラス（`set--` / `is--` / `has--` / `l--` / `a--` / `u--` / Property Class）以外の、ユーザーが自分で定義するクラスは次の2分類で命名します。
 
-`c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
+| 分類 | 命名 | 例 | スタイルの書き方 |
+| --- | --- | --- | --- |
+| サイト共通で繰り返し使う基礎部品（ボタン・バッジ・カード級） | `b--{name}` | `b--btn`, `b--badge` | ベーススタイルを `@layer lism-block` で管理。BP切り替え・hover・例外的な調整は Property Class等を活用 |
+| それ以外のカスタムクラス全般（コンポーネント・サイトの領域・ページ固有要素など粒度不問） | `c--{name}` | `c--featureList`, `c--header` | Lismクラス（Trait, Primitive, Property Class など）を中心に組む。何のパーツかを示す名前付けとしてだけ使うのも可。CSS を書く場合は `@layer lism-custom` で管理。 |
+
+- `b--` にできるのは [Block Class（`b--`）](#block-classb--)の3条件をすべて満たす部品だけで、それ以外は `c--` にします。
+- 迷ったら `c--` で始め、3条件を満たす部品としてベーススタイルを CSS 側で管理したくなった時点で `b--` へリネームして昇格します。
+- 名前は camelCase で付けます。（例: `c--landingHero`）
 
-`c--` クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次の形式で定義します。
+BEM 構造（本体クラス / Modifier / Element）を持つのは `b--` と `c--` のみです。`a--` / `l--` には適用しません。
 
 | 分類 | 形式 | 例 |
 | --- | --- | --- |
-| Block | `c--{name}` | `c--button`, `c--card` |
-| Modifier | `c--{name}--{modifier}` | `c--button--outline` |
-| Element | `c--{name}_{element}` | `c--card_header`, `c--card_body` |
+| 本体クラス | `b--{name}` / `c--{name}` | `b--btn`, `c--pricing` |
+| Modifier | `b--{name}--{modifier}` / `c--{name}--{modifier}` | `b--btn--outline`, `c--pricing--featured` |
+| Element | `b--{name}_{element}` / `c--{name}_{element}` | `b--card_header`, `c--pricing_body` |
 
-- Modifier は Block と併記して使用: `.c--button.c--button--outline`
+- Modifier は本体クラスと併記して使用: `.b--btn.b--btn--outline` / `.c--pricing.c--pricing--featured`
 - Element は `_`（アンダースコア）一つ区切り
-- Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
-  - Block と自身の Modifier: `.c--xxx.c--xxx--modifier`
-  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-- BEM の Modifier / Element 構造を持つのは `c--` のみ。`a--` / `l--` には適用しない
+- 同じプレフィックスの本体クラス同士の併用（`.b--xxx.b--yyy` / `.c--xxx.c--yyy`）は基本 NG。ただし次は許容される:
+  - 本体クラスと自身の Modifier: `.c--xxx.c--xxx--modifier`
+  - 本体クラスと他の本体クラスの Element: `.c--xxx.c--yyy_elem`
+
+### Block Class（`b--`）
 
-`c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
+`b--` プレフィックスで定義する **Block Class** は、サイト内で繰り返し使う基礎部品（ボタン・バッジ・カード級）で、ベーススタイルを CSS 側（`@layer lism-block`）で管理します。コアの `lism-css` は専用レイヤーを用意するだけで、`b--` クラス自体は提供しません。
 
-### 作成例
+次の3条件を**すべて**満たす場合に `b--` を使います。満たさない場合は `c--` にします。
 
-`c--*`は意味名として残し、レイアウトと単一プロパティ値はPrimitive/Property Classへ寄せます。CSSへ残すのは、擬似要素・子孫セレクタ・状態セレクタなど、Props/Property Classで表現できないものだけです。
+1. サイト内の複数ページ・複数箇所で繰り返し使う共通部品である
+2. クラスを1つ付けるだけでベーススタイルがほぼ決まるようにしたい部品である
+3. 粒度がボタン・バッジ・カード級の自己完結した部品である
+
+例: 
+```css
+@layer lism-block {
+  .b--btn {
+    --bgc: transparent;
+    --bdc: transparent;
+    padding: var(--s10) var(--s20);
+    border-radius: var(--bdrs--20);
+    border: solid 1px var(--bdc);
+    background-color: var(--bgc);
+  }
+  .b--btn.b--btn--fill { --bgc: var(--brand); }
+  .b--btn.b--btn--outline { --bdc: currentColor; }
+}
+```
+
+- `b--` は他クラスと併用もできます。すべて CSS 側に書かなくてはいけないというわけではありません。
+- `b--` はレイアウトスタイルも CSS 側で持てますし、`l--` 系クラスとの併用を前提にして組むこともできます。
+- ブレイクポイント切り替え（`-p_sm` 等）、hover 系スタイル、その他例外的な調整には Property Class での調整が便利です。
+
+### Custom Class（`c--`）
+
+`c--` プレフィックスで定義する **Custom Class** は、ユーザーが自由に定義できるカスタムクラスです（名前は `lism-custom` レイヤーと対応）。コンポーネント・サイトの領域（ヘッダーやサイドバーなど）・ページ固有の要素など、粒度を問わず使えます。
+
+他のLismクラス（Trait, Primitive, Property Class等）との組み合わせを前提に設計し、CSSへ残すのは、擬似要素・子孫セレクタ・状態セレクタなど、Props/Property Classで表現できないものだけです。（明確な意図があればCSSに一般的なスタイルを書くことも可）
+
+スタイルが全くなく、何のパーツかを示す名前付けのためだけに使っても構いません。
 
 ```html
-<!-- HTMLで書く場合も、意味名 + Primitive + Property Class を優先 -->
+<!-- HTMLで書く場合も、何のパーツかを示す名前 + Primitive + Property Class を優先 -->
 <div class="c--myCard l--stack -g:20 -p:30 -bdrs:20 -bxsh:20 -bd">...</div>
 ```
 
@@ -134,36 +186,35 @@ export default function MyCard(props) {
 ```
 
 ```css
-@layer lism-component {
+@layer lism-custom {
   .c--myCard::before {
     /* 擬似要素など、Props/Property Classで表せないものだけを書く */
   }
 }
 ```
 
-CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず、マークアップ上の意味名として`c--myCard`だけ残して構いません。
+CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず、何のパーツかを示す名前として`c--myCard`だけ残して構いません。
 
 ## カスタムCSS を追加する場合
 
 独自のスタイルを追加する場合は、対象に合った Lism の CSS Layer 内に記述してください。
 
 ```css
-/* カスタムコンポーネント → lism-component に追加 */
-@layer lism-component {
-  .c--myCard[data-is-active]::before {
-    border-color: var(--brand);
-  }
+/* ユーザーの独自CSS（c--） → lism-custom に追加 */
+@layer lism-custom {
+  .c--myCard[data-is-active]::before { border-color: var(--brand); }
 }
 
+/* b-- 基礎部品のベーススタイル → lism-block に追加 */
+@layer lism-block { .b--badge { padding: var(--s5) var(--s10); } }
+
 /* ベーススタイルの拡張 → lism-base に追加 */
 @layer lism-base {
-  .set--myTheme {
-    --brand: #c00;
-  }
+  .set--myTheme { --brand: #c00; }
 }
 ```
 
-カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。ただし、`padding`/`border-radius`/`font-size`/`color`などProperty Class/Propsへ移せる宣言は、CSSに書く前にマークアップ側へ移します（NG→OK例は[antipatterns.md](./antipatterns.md#property-class-で書けるのに-css-で書く)を参照）。
+カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。また、`c--` のクラスでは、`padding`/`border-radius`/`font-size`/`color`などProperty Class/Propsへ移せる宣言を、CSSに書く前にマークアップ側へ移します（NG→OK例は[antipatterns.md](./antipatterns.md#property-class-で書けるのに-css-で書く)を参照）。ただし`b--`のベーススタイルは対象外で、トークンを使って`@layer lism-block`で管理します。
 
 明確にその数値に意図があり、トークン化・丸め・Property Class化ができない場合だけ、生のCSS値を例外として使用できます。その場合は実装プランに理由を残します。
 
@@ -175,43 +226,6 @@ CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず
 .-myProp\:myValue { ... }
 ```
 
-## 独自プレフィックス
-
-Lism CSS の既存プレフィックス（`set--` / `is--` / `has--` / `l--` / `a--` / `c--` / `u--` / `-`）のどれにも該当しないクラスは、独自プレフィックスを付けても、プレフィックスなしで命名しても構いません。
-
-代表的な例：
-
-| 分類 | 形式 | 例 |
-| --- | --- | --- |
-| ゾーニング（サイトの大まかな領域） | `z--{zoneName}` または `{zoneName}` | `z--header`, `z--main`, `z--sidebar`, `z--footer` |
-| ページ分類 | `p--{type}-{id\|slug}` または `{slug}Page` | `p--front`, `p--page--{slug}` |
-
-これらは、特に理由がなければ `@layer lism-custom` に配置することを推奨します。
-
-```css
-@layer lism-custom {
-  .z--header {
-    /* ... */
-  }
-  .p--front {
-    /* ... */
-  }
-}
-```
-
-### `z--`/`p--`/`c--`の使い分け
-
-| 用途 | 推奨 | 理由 |
-| --- | --- | --- |
-| 再利用可能なUI部品 | `c--featureCard` | componentとして再利用され、Block/Element/Modifier構造を持てる |
-| サイトの大まかな領域 | `z--header`/`z--main`/`z--footer` | 再利用UIではなくゾーニングなので`c--`にしない |
-| ページ固有の領域 | `p--frontHero`/`p--postBody` | ページ依存の見た目をcomponent命名から分離する |
-| 外部JS・CMS・E2Eが参照するclass | 既存名を維持、または⏸ | 外部契約なのでrenameはユーザー確認が必要 |
-
-`c--header`や`c--sidebar`のような命名は、UI部品として再利用する意図がある場合だけ使います。サイト構造の領域名なら`z--header`、ページ限定なら`p--*`を優先してください。
-
-公開API、CMS出力、外部JS、E2Eセレクタ、ドキュメントで案内済みのclass名を変える場合は、内部参照を全更新できる場合でも⏸としてユーザー確認します。CSSだけrenameしてJS/テスト/HTML生成側を漏らさないでください。
-
 ## CSS の配置場所
 
 ### グローバル CSS（サイト全体）
@@ -237,8 +251,8 @@ Lism のトークン変数のカスタマイズやベーススタイルの上書
 - `.astro` ファイル: `import` するか、コンポーネントファイル内の `<style>` タグに記述
 
 ```css
-/* コンポーネント用CSS は lism-component 内に定義する */
-@layer lism-component {
+/* 独自クラスの CSS は lism-custom 内に定義する（b-- のベーススタイルだけ lism-block） */
+@layer lism-custom {
   .c--yourComponent {
     ...
   }

package/dist/data/guides/customize.md

@@ -22,6 +22,7 @@
 ## `@layer` をオフにする
 
 `lism-css/main.css` の代わりに `lism-css/main_no_layer.css` を読み込むだけで、`@layer` を使わない CSS に切り替えられます。
+なお、no-layer版ではレイヤーによる優先度管理（`b--`よりProperty Classが必ず強い等の保証）が効かず、読み込み順・詳細度に依存します。
 
 ```js
 // 通常
@@ -184,7 +185,7 @@ export default {
 
 統合プラグイン（型自動生成が有効）を使っている場合、有効化したブレイクポイントを反映した `lism-env.d.ts` がプロジェクト直下に**自動生成**されます。型補完も有効化したブレイクポイントのキーを自動で提示するため、`BreakpointRegistry` をプロジェクト側の `.d.ts` で手書き拡張する必要はありません。`lism-env.d.ts` は git にコミットしてください（`astro check` 等の型チェックがこのファイルを拠り所にします）。
 
-> SCSS を直接利用する構成では、`@use 'lism-css/scss/setting' with ($breakpoints: ...)` で有効化する方法も引き続き利用できます（[SCSS でのカスタマイズ](#scss-でのカスタマイズ) を参照）。
+> SCSS を直接利用する構成では、`@use 'lism-css/scss/setting' with ($breakpoints: ...)` で有効化する方法も利用できます（[SCSS でのカスタマイズ](#scss-でのカスタマイズ) を参照）。
 
 ### フォーマット
 
@@ -316,7 +317,7 @@ npx lism-css build --full   # full.css / full_no_layer.css も生成
 ```
 
 > **注意**:
-> - `tokens` に値を書けば、`-lts:2xl` の **ユーティリティクラス**と、参照先の CSS 変数（`:root { --lts--2xl: .5em }` のような **値そのもの**）の両方が CLI ビルドでも出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（実値は手書きSCSS側）。
+> - `tokens` に値を書けば、`-lts:2xl` の **ユーティリティクラス**と、参照先の CSS 変数（`:root { --lts--2xl: .5em }` のような **値そのもの**）の両方が CLI ビルドでも出力されます。値が `'-'` のキーはカタログ登録のみで `:root` 宣言を出力しません（`lh` のように CSS 変数を持たないものや、実値を手書きSCSS側へ置くもの）。
 > - `is--*` クラスのスタイルは自動生成されないため、手動で追加してください。
 > - `lism-css` パッケージ自体を上書きする処理のため、**パッケージ更新ごとに再実行**が必要です。
 

package/dist/data/guides/naming.md

@@ -53,13 +53,13 @@
 
 ## クラスの命名規則
 
-クラス分類ごとのプレフィックス（`c--`/`a--`/`l--`/`is--`/`has--`/`set--`/`u--`）と各分類の責務・所属レイヤーは、[css-rules.md](./css-rules.md#クラス分類とプレフィックス)の分類表を正本とします。
+クラス分類ごとのプレフィックス（`b--`/`c--`/`a--`/`l--`/`is--`/`has--`/`set--`/`u--`）と各分類の責務・所属レイヤーは、[css-rules.md](./css-rules.md#クラス分類とプレフィックス)の分類表を正本とします。ユーザー定義クラスの2分類（`b--`/`c--`）の使い分けは[css-rules.md](./css-rules.md#独自クラスの選び方2分類)を参照してください。
 
-プレフィックスに続く名称は camelCase（例: `c--myComponent`）。`is--`/`has--`/`set--`/`u--`にも同じ規則が適用されます。
+プレフィックスに続く名称は camelCase（例: `c--myComponent`）。`is--`/`has--`/`set--`/`u--`にも同じ規則が適用されます。ページ固有の要素は、ページslug等を含めると名前だけで由来がわかります（例: `c--landingHero`）。
 
-### `c--*`の命名
+### `c--*`/`b--*`の命名
 
-Block/Element/Modifierの形式（Block=`c--{name}`、Element=`_`ひとつ、Modifier=`--`ふたつ）は[css-rules.md](./css-rules.md#component-classc--)を参照。Block名はcamelCaseを第一候補にし、既存コードがアンダースコア区切りならそれに合わせます。単語区切りのハイフン（`c--feature-card`）とBEM風の`__`は使いません（NG→OK例は[antipatterns-layout.md](./antipatterns-layout.md#クラス名の命名ミス)を参照）。
+Block/Element/Modifierの形式（Block=`c--{name}` / `b--{name}`、Element=`_`ひとつ、Modifier=`--`ふたつ）は[css-rules.md の独自クラスの選び方](./css-rules.md#独自クラスの選び方2分類)を参照。Block名はcamelCaseを第一候補にし、既存コードがアンダースコア区切りならそれに合わせます。単語区切りのハイフン（`c--feature-card`）とBEM風の`__`は使いません（NG→OK例は[antipatterns-layout.md](./antipatterns-layout.md#クラス名の命名ミス)を参照）。
 
 Property Class の形式:
 

package/dist/data/guides/property-class/all-props.md

@@ -83,18 +83,20 @@
 | `bgr` | `background-repeat` | `-bgr:no-repeat` | — |
 | `bgp` | `background-position` | `-bgp:center` | — |
 | `bgsz` | `background-size` | `-bgsz:cover`, `-bgsz:contain` | — |
-| `bgc` | `background-color` | `-bgc:base`, `-bgc:base-2`, `-bgc:text`, `-bgc:brand`, `-bgc:accent`, `-bgc:inherit`, `-bgc:transparent` | — |
+| `bgc` | `background-color` | `-bgc:base`, `-bgc:base-2`, `-bgc:text`, `-bgc:brand`, `-bgc:accent`, `-bgc:keycolor`, `-bgc:inherit`, `-bgc:transparent`, `-bgc:current` | — |
 
 ### カラー
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 | --- | --- | --- | --- |
-| `c` | `color` | `-c:base`, `-c:text`, `-c:text-2`, `-c:brand`, `-c:accent`, `-c:inherit` | — |
+| `c` | `color` | `-c:base`, `-c:text`, `-c:text-2`, `-c:brand`, `-c:accent`, `-c:keycolor`, `-c:inherit` | — |
 | `keycolor` | `--keycolor` 変数のみ | — | — |
 
 セマンティック/パレットの全カラートークンは [tokens.md のカラー](../tokens.md#カラー)を参照。<br />
 キーカラー変数: `keycolor`（ユーザー定義の `--keycolor` を参照する独立変数。詳細は `tokens.md` を参照）
 
+`c` / `bgc` / `bdc` に `keycolor` を指定すると、`--keycolor` を参照する `-c:keycolor` のようなクラスが出力される（`style` 属性ではない）。
+
 ### 角丸
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
@@ -142,14 +144,14 @@
 | `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | ✔ |
 | `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | ✔ |
 | `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | ✔ |
-| `ps` | `padding-inline-start` | — | ✔ |
-| `pe` | `padding-inline-end` | — | ✔ |
-| `pbs` | `padding-block-start` | — | ✔ |
-| `pbe` | `padding-block-end` | — | ✔ |
-| `pl` | `padding-left` | — | — |
-| `pr` | `padding-right` | — | — |
-| `pt` | `padding-top` | — | — |
-| `pb` | `padding-bottom` | — | — |
+| `ps` | `padding-inline-start` | `-ps:5`, `-ps:10`, `-ps:20`, ... (SPACEトークン) | ✔ |
+| `pe` | `padding-inline-end` | `-pe:5`, `-pe:10`, `-pe:20`, ... (SPACEトークン) | ✔ |
+| `pbs` | `padding-block-start` | `-pbs:5`, `-pbs:10`, `-pbs:20`, ... (SPACEトークン) | ✔ |
+| `pbe` | `padding-block-end` | `-pbe:5`, `-pbe:10`, `-pbe:20`, ... (SPACEトークン) | ✔ |
+| `pl` | `padding-left` | `-pl:5`, `-pl:10`, `-pl:20`, ... (SPACEトークン) | ✔ |
+| `pr` | `padding-right` | `-pr:5`, `-pr:10`, `-pr:20`, ... (SPACEトークン) | ✔ |
+| `pt` | `padding-top` | `-pt:5`, `-pt:10`, `-pt:20`, ... (SPACEトークン) | ✔ |
+| `pb` | `padding-bottom` | `-pb:5`, `-pb:10`, `-pb:20`, ... (SPACEトークン) | ✔ |
 
 SPACEトークンの全値（`5`〜`80`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
 
@@ -160,22 +162,22 @@ SPACEトークンの全値（`5`〜`80`の離散値）は [tokens.md の余白 (
 | `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | ✔ |
 | `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | ✔ |
 | `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | ✔ |
-| `ms` | `margin-inline-start` | `-ms:auto` | ✔ |
-| `me` | `margin-inline-end` | `-me:auto` | ✔ |
+| `ms` | `margin-inline-start` | `-ms:auto`, `-ms:5`, `-ms:10`, `-ms:20`, ... (SPACEトークン) | ✔ |
+| `me` | `margin-inline-end` | `-me:auto`, `-me:5`, `-me:10`, `-me:20`, ... (SPACEトークン) | ✔ |
 | `mbs` | `margin-block-start` | `-mbs:auto`, `-mbs:0`, `-mbs:5`, `-mbs:10`, `-mbs:20`, ... (SPACEトークン) | ✔ |
-| `mbe` | `margin-block-end` | `-mbe:auto` | ✔ |
-| `ml` | `margin-left` | — | — |
-| `mr` | `margin-right` | — | — |
-| `mt` | `margin-top` | — | — |
-| `mb` | `margin-bottom` | — | — |
+| `mbe` | `margin-block-end` | `-mbe:auto`, `-mbe:5`, `-mbe:10`, `-mbe:20`, ... (SPACEトークン) | ✔ |
+| `ml` | `margin-left` | `-ml:5`, `-ml:10`, `-ml:20`, ... (SPACEトークン) | ✔ |
+| `mr` | `margin-right` | `-mr:5`, `-mr:10`, `-mr:20`, ... (SPACEトークン) | ✔ |
+| `mt` | `margin-top` | `-mt:5`, `-mt:10`, `-mt:20`, ... (SPACEトークン) | ✔ |
+| `mb` | `margin-bottom` | `-mb:5`, `-mb:10`, `-mb:20`, ... (SPACEトークン) | ✔ |
 
 ### Gap
 
 | Prop | CSS プロパティ | プリセット値クラス | BP |
 | --- | --- | --- | --- |
 | `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ |
-| `cg` | `column-gap` | — | — |
-| `rg` | `row-gap` | — | — |
+| `cg` | `column-gap` | `-cg:5`, `-cg:10`, `-cg:20`, ... (SPACEトークン) | ✔ |
+| `rg` | `row-gap` | `-rg:5`, `-rg:10`, `-rg:20`, ... (SPACEトークン) | ✔ |
 
 ### Flex
 

package/dist/data/guides/property-class/bd.md

@@ -51,7 +51,7 @@ Lism CSS のボーダーは、CSS 変数（`--bds` / `--bdw` / `--bdc`）で管
 | --- | --- | --- | --- |
 | `bd` | — | `-bd:none` | — |
 | `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` | — |
-| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` | — |
+| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:keycolor`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` | — |
 | `bdw` | `--bdw` | — | `-bdw_sm`, `-bdw_md` |
 
 `bdw` はブレイクポイント指定に対応。`--bdw` の値を BP で切り替えることで、ボーダーの方向自体を変化させることもできる。

package/dist/data/guides/property-class.md

@@ -92,7 +92,7 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 | --- | --- | --- |
 | `bd` | `border`（変数管理を有効化） | `-bd`, `-bd-{x\|y\|s\|e\|bs\|be\|t\|b\|l\|r}`, `-bd:none` |
 | `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` |
-| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` |
+| `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:keycolor`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` |
 | `bdw` | `--bdw` | BP クラス: ✔（`-bdw_sm` / `-bdw_md`） |
 
 → 詳細（方向ごとのスタイル指定、BP での方向切り替え等）は [property-class/bd.md](./property-class/bd.md) 参照
@@ -125,6 +125,7 @@ Property Class の値名は基本的に CSS の実値と同じですが、以下
 | `-w:fit` | `width: fit-content` | `w`, `h` |
 | `-ac:between` | `align-content: space-between` | `ac`, `jc` |
 | `-bdc:current` | `border-color: currentColor` | `bdc` |
+| `-bgc:current` | `background-color: currentColor` | `bgc` |
 
 
 ## Property Class の特殊な出力タイプ

package/dist/data/guides/references/authoring.md

@@ -50,24 +50,24 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
 - **列挙**: 同じ部品が3箇所以上になりそうか、値差分・slot構造があるか。
 - **照合・判定**: 3+反復見込みかつ同じ意味のUI部品として安定→`✅新規`（コンポーネント化して着手）。1〜2回・局所・一時的重複→✅そのまま。Props設計が必要→⏸。
 - **決め方**: CSSの`c--`新設でなくReact/Astroコンポーネント抽出を優先。`className`/`style`/`data-*`/ARIA/イベントハンドラの受け渡しを最初から設計する。
-- **参照先**: `components-core.md`、`components-ui.md`、`css-rules.md#component-classc--`、`property-class.md`、本ファイルの「出力フォーマット」。
+- **参照先**: `components-core.md`、`components-ui.md`、`css-rules.md#custom-classc--`、`property-class.md`、本ファイルの「出力フォーマット」。
 - **よい例・避けたい例**: OK=反復するTagをTagコンポーネント化。罠=Property Classの組み合わせをコピペ展開。
 
 ### C3: 命名設計
 
-- **列挙**: 新設する`c--`/`z--`/`p--`名とBlock/Element/Modifier構造、`c--*` CSSを置くLayer。
-- **照合・判定**: プレフィックス後の名前が規約に合う→✅。ハイフンや`__`がある→🔁。サイト領域→`✅新規`（`z--`）。ページ固有→`✅新規`（`p--`）。公開API・CMS・外部JS・E2E依存→⏸。`.c--*` CSSがLayer外になる→🔁。
-- **決め方**: `naming.md`に従う。Block名にハイフンは使わず、Element区切りは`_`ひとつ、Modifierは`--`ふたつ。再利用UIでない領域は`z--`、ページ固有は`p--`。`c--*` CSSを書く場合は必ず`@layer lism-component {}`内に置く。
-- **参照先**: `naming.md`、`css-rules.md#component-classc--`、`css-rules.md#独自プレフィックス`、`antipatterns-layout.md#クラス名の命名ミス`。
-- **よい例・避けたい例**: OK=`c--featureCard`、`c--featureCard_body`、既存命名がアンダースコア寄せなら`c--feature_card`。罠=`c--feature-card`、`c--hero__inner`（正しくは`c--hero_inner`）、`c--feature-card__body`（正しくは`c--featureCard_body`）、サイトヘッダを`c--`にする。
+- **列挙**: 新設する`b--`/`c--`のクラス名とBlock/Element/Modifier構造、独自CSSを置くLayer。
+- **照合・判定**: プレフィックス後の名前が規約に合う→✅。ハイフンや`__`がある→🔁。ベーススタイルを CSS 側で管理する共通基礎部品→`✅新規`（`b--`）。それ以外のカスタムクラス→`✅新規`（`c--`）。公開API・CMS・外部JS・E2E依存→⏸。独自CSSがLayer外になる→🔁。
+- **決め方**: `naming.md`に従う。Block名にハイフンは使わず、Element区切りは`_`ひとつ、Modifierは`--`ふたつ（`b--`も`c--`と同記法）。分類は`b--`の3条件（サイト共通の繰り返し利用・ベーススタイルを CSS 側で管理・ボタン/バッジ/カード級の粒度。`css-rules.md#block-classb--`参照）で決める（すべて満たす→`b--`／それ以外→`c--`）。独自CSSは必ず`@layer lism-custom {}`内に置く（`b--`のベーススタイルだけ`@layer lism-block {}`）。
+- **参照先**: `naming.md`、`css-rules.md#block-classb--`、`css-rules.md#custom-classc--`、`css-rules.md#独自クラスの選び方2分類`、`antipatterns-layout.md#クラス名の命名ミス`。
+- **よい例・避けたい例**: OK=`c--featureCard`、`c--featureCard_body`、既存命名がアンダースコア寄せなら`c--feature_card`。罠=`c--feature-card`、`c--hero__inner`（正しくは`c--hero_inner`）、`c--feature-card__body`（正しくは`c--featureCard_body`）。
 
 ### C4: 状態・バリエーション設計
 
 - **列挙**: active/open/disabled/currentなどの状態、solid/outlineなどの見た目違い。
-- **照合・判定**: 状態→`✅新規`（`data-*`/ARIA）。見た目違い→`✅新規`（`c--name--variant`）。正規Traitが当たる→✅。
-- **決め方**: 状態は属性セレクタ、バリエーションはBEM Modifier。`is--`を状態/バリエーションに流用しない。
-- **参照先**: `trait-class.md`、`trait-class/is--*.md`、`antipatterns-layout.md#is---の誤用状態バリエーション`、`css-rules.md#component-classc--`。
-- **よい例・避けたい例**: OK=`data-is-active`+`[data-is-active]`、`c--tag--solid`。罠=`is--active`、`is--solid`。
+- **照合・判定**: 状態→`✅新規`（`data-*`/ARIA）。見た目違い→`✅新規`（C3で決めたBlockと同じプレフィックスのModifier。`c--`なら`c--name--variant`、`b--`なら`b--name--variant`）。Blockと異なるプレフィックスのModifierになっている→🔁。正規Traitが当たる→✅。
+- **決め方**: 状態は属性セレクタ、バリエーションはBEM Modifier。ModifierのプレフィックスはC3で決めたBlockに合わせ、`c--`と`b--`を混在させない。`is--`を状態/バリエーションに流用しない。
+- **参照先**: `trait-class.md`、`trait-class/is--*.md`、`antipatterns-layout.md#is---の誤用状態バリエーション`、`css-rules.md#custom-classc--`、`css-rules.md#block-classb--`。
+- **よい例・避けたい例**: OK=`data-is-active`+`[data-is-active]`、`c--pricing--featured`、`b--btn--outline`。罠=`is--active`、`is--solid`、`b--btn`に対する`c--btn--outline`（Blockと違うプレフィックス）。
 
 ### C5: 値・トークン照合
 
@@ -88,9 +88,9 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
 ### C7: CSSに書くもの/Propsに移すもの
 
 - **列挙**: CSSへ書く予定の各宣言を「Property Class/Propsへ移す宣言」と「CSSにしか書けない宣言」に分ける。`c--*`のCSSに残る宣言を実装プランに明記する。
-- **照合・判定**: 1つの要素にだけ効く見た目の指定→✅マークアップへ。擬似クラス・擬似要素・状態切替・子孫セレクタ→✅CSSへ残す。下表の宣言が`.c--*` CSSに残る→🔁未通過。
-- **決め方**: `-{prop}:{value}`またはLism Propsへ移す。`.c--*`はCSSが空でも意味クラスとして残す。
-- **参照先**: `property-class.md`、`css-rules.md#component-classc--`、`antipatterns.md#property-class-で書けるのに-css-で書く`。
+- **照合・判定**: `c--*`のクラスで1つの要素にだけ効く見た目の指定→✅マークアップへ。擬似クラス・擬似要素・状態切替・子孫セレクタ→✅CSSへ残す。C3で`b--`と決めた部品のベーススタイル→✅`@layer lism-block`へ残す（トークン使用。BP切替・hover・例外調整はProperty Class）。下表の宣言が`.c--*` CSSに残る→🔁未通過。
+- **決め方**: `-{prop}:{value}`またはLism Propsへ移す。`.c--*`はCSSが空でも何のパーツかを示す名前として残す。
+- **参照先**: `property-class.md`、`css-rules.md#custom-classc--`、`antipatterns.md#property-class-で書けるのに-css-で書く`。
 - **移行表**:
 
 | CSSでの記述 | Lism Props/Property Class |
@@ -236,7 +236,7 @@ SKILL.md以外に実際に開いたファイルや外部サイトのページurl
 
 ### 提出前セルフチェックへの接続
 
-実装後、実装プランと実装を1行ずつ照合します（チェック項目は`SKILL.md`の「提出前セルフチェック」を参照）。この照合とルール照合は、サブエージェント／タスク委任機能が使える環境では評価サブエージェントに実行させ、報告を`.lism/review.md`へ保存します（[`verification.md`](./verification.md)）。
+実装後、実行レベルが「通常」「値照合付き」の場合は、実装プランと実装を1行ずつ照合します（チェック項目とレベル別の扱いは`SKILL.md`の「提出前セルフチェック」を参照）。この照合とルール照合は、サブエージェント／タスク委任機能が使える環境では評価サブエージェントに実行させ、報告を`.lism/review.md`へ保存します（[`verification.md`](./verification.md)）。
 
 | 計画項目 | 実装結果 | 分類 | 対応 |
 | --- | --- | --- | --- |

package/dist/data/guides/references/page-sections.md

@@ -4,7 +4,7 @@
 
 共通の考え方:
 
-- セクションの外殻は`Group`（`as="header"`/`as="section"`/`as="footer"`）で意味付けし、サイト領域には`z--*`、ページ固有の領域には`p--*`を付ける（[`css-rules.md`](../css-rules.md#独自プレフィックス)）。
+- セクションの外殻は`Group`（`as="header"`/`as="section"`/`as="footer"`）で意味付けし、`c--siteHeader`のような何のパーツかを示す独自クラス名を付ける（ページ固有の領域も`c--frontHero`のようにslug等を含めて`c--`で命名する。[`css-rules.md`](../css-rules.md#独自クラスの選び方2分類)）。
 - 「全幅の背景＋中央寄せの本文幅」は、外殻`Group`（背景色・縦padding）＋`hasGutter`（サイト共通の左右余白）＋内側`Wrapper`（コンテンツ幅）の組み合わせで作る。`max-width`をpxで直書きしない。
 - 縦の並びは`Stack`、横並びは`Cluster`に任せ、余白はすべて`g`/`py`などのトークンPropsで表す。
 - セクションの高さをデザインpxで固定しない。高さは余白（`py`）とコンテンツが決める。
@@ -16,7 +16,7 @@
 ```jsx
 import { Group, Wrapper, Cluster, Link } from 'lism-css/astro';
 
-<Group as="header" className="z--header" bgc="base" py="20" hasGutter>
+<Group as="header" className="c--siteHeader" bgc="base" py="20" hasGutter>
   <Wrapper contentSize="xl">
     <Cluster jc="between" g="20">
       <Link href="/" fw="bold" fz="l">Site Name</Link>
@@ -40,7 +40,7 @@ import { Group, Wrapper, Cluster, Link } from 'lism-css/astro';
 ```jsx
 import { Group, Wrapper, Stack, Cluster, Heading, Text } from 'lism-css/astro';
 
-<Group as="section" className="p--frontHero" bgc="base-2" py={['60', null, '80']} hasGutter isContainer>
+<Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '80']} hasGutter isContainer>
   <Wrapper contentSize="l">
     <Stack g="30" ai="center" ta="center">
       <Heading level="1" fz={['3xl', null, '5xl']}>キャッチコピー</Heading>
@@ -60,7 +60,7 @@ import { Group, Wrapper, Stack, Cluster, Heading, Text } from 'lism-css/astro';
 ```jsx
 import { Group, Wrapper, Stack, AutoColumns, Text, Divider } from 'lism-css/astro';
 
-<Group as="footer" className="z--footer" bgc="text" c="base" py="60" hasGutter isContainer>
+<Group as="footer" className="c--siteFooter" bgc="text" c="base" py="60" hasGutter isContainer>
   <Wrapper contentSize="xl">
     <Stack g="40">
       <AutoColumns cols="12rem" g="40">
@@ -82,7 +82,7 @@ import { Group, Wrapper, Stack, AutoColumns, Text, Divider } from 'lism-css/astr
 ```jsx
 import { Group, Wrapper, Stack, Heading, Columns } from 'lism-css/astro';
 
-<Group as="section" className="p--frontFeatures" py="70" hasGutter isContainer>
+<Group as="section" className="c--frontFeatures" py="70" hasGutter isContainer>
   <Wrapper contentSize="l">
     <Stack g="40">
       <Heading level="2" fz="2xl" ta="center">Features</Heading>

package/dist/data/guides/references/verification.md

@@ -2,6 +2,8 @@
 
 提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約です。実装フロー・チェック項目の正本は`SKILL.md`（実装フロー・提出前セルフチェック）、実装プランの中身と書式は[`authoring.md`](./authoring.md)を参照してください。
 
+`lism-css-guide`の実装フローでは、事前チェック実行レベルが「通常」「値照合付き」の場合だけこの規約を適用します。「不要」「軽量」では`.lism/`へのファイル作成も評価サブエージェントへの委任も行いません（`SKILL.md`「事前チェック実行レベル」参照）。このレベル条件は`lism-css-guide`固有のもので、`.lism/`規約をここから参照する他のスキル（`lism-css-refactor`等）には適用されません。他のスキルからの利用時は、ファイルを作るかどうかは各スキル側の手順に従ってください。
+
 ## `.lism/`作業ディレクトリ
 
 Lism実装作業の成果物（実装プラン・評価報告）は、プロジェクトルートの`.lism/`に固定名で保存します。
@@ -9,7 +11,7 @@ Lism実装作業の成果物（実装プラン・評価報告）は、プロジ
 | ファイル | 内容 | 作成タイミング |
 | --- | --- | --- |
 | `.lism/plan.md` | 実装プラン（トークン差分表・構成表を含む） | 値照合付きレベルの実装前チェック時 |
-| `.lism/review.md` | 評価サブエージェント（委任できない環境では本人）による評価報告 | 提出前セルフチェック時 |
+| `.lism/review.md` | 評価サブエージェント（委任できない環境では本人）による評価報告 | 通常・値照合付きレベルの提出前セルフチェック時（不要・軽量では作成しない） |
 
 - **固定名・上書き方式**。タスクごとに別名を作らない。照合先が一意に決まることが、評価サブエージェントや将来の機械チェックの前提になる。複数タスクの文脈は各ファイル冒頭のメタデータヘッダで区別する。
 - メタデータヘッダには日時・対象タスク・スケール前提（デザイン再現時。判定根拠付き）を書く。
@@ -62,7 +64,7 @@ scale: PNGは2880px幅=1440px設計の2x書き出し（画像実寸と行送り
 | file:line | 違反ルール（資料名と節） | 内容 | 判定 |
 | --- | --- | --- | --- |
 
-判定は「違反 / 要確認 / 適合」。最後に違反件数のサマリを書いてください。
+判定は「違反 / 要確認」。表には違反・要確認の行だけを載せ、適合した項目を1行ずつ列挙しないでください。最後に「照合した資料名の一覧」と違反・要確認の件数サマリを書いてください。違反ゼロの場合、報告はこの一覧とサマリだけでかまいません。
 ```
 
 ### grepによる補助チェック（コマンドが実行できる環境のみ）

package/dist/data/guides/tokens.md

@@ -263,10 +263,12 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 
 `--keycolor: var(--red)` のように指定しておくことで、そのボックス自身や子要素のカラー Props（`c`, `bgc`, `bdc` など）で 特定の色をハードコーディングせずに `--keycolor` 経由で参照できるようにすることができる。代表的な使用例は `u--cbox` ユーティリティクラス。
 
+`c` / `bgc` / `bdc` の値に `keycolor` を指定すると、`-c:keycolor` のような Property Class が出力される（`style` 属性ではない）。これらのクラスは `--c: var(--keycolor)` のように `--keycolor` を参照する。
+
 ```html
 <!-- ボックスにキーカラーを設定、テキストをキーカラーに連動させる例 -->
 <div class="u--cbox" style="--keycolor: var(--red)">
-  <p class="-c" style="-c:var(--keycolor)">...</p>
+  <p class="-c:keycolor">...</p>
 </div>
 ```
 ```jsx
@@ -277,6 +279,8 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 
 - `c`, `bgc` 等のカラー系 Props では、セマンティックカラー → パレットカラーの順で検索される
 - どちらも最終的に `var(--{name})` に変換される
+- `main.css` でクラス化されるのは厳選したセマンティックカラーと `keycolor` のみ（`-c:brand` / `-c:keycolor` など）。それ以外のカラートークン（`red` などのパレットカラー）は `style` 属性の CSS 変数として出力される
+- `full.css` + `isFullMode` では、`c` / `bgc` / `bdc` の全カラートークンがクラス化される（`-bgc:red` など）
 
 
 ## トークン値の命名規則