@cakejp/design-system 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -7,6 +7,66 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased]
+
+---
+
+## [0.7.0] - 2026-06-19
+
+### ✨ Added
+
+- **IconBadge**（foundations・新規）: 丸いアイコンバッジ（`md`=44px / `lg`=72px、内部アイコン 20px / 38px）を部品化。淡いアクセント背景（`Surface-Accent-Primary-Light`）の円にアイコンを `currentColor`（`Object-Accent-Primary`）で中央配置。**外側 margin を持たない**設計で、`Card` の `flex-col gap-4`(16px) との「縦余白の二重がけ」を構造的に防ぐ。`import { IconBadge } from "@cakejp/design-system"` で利用可。Storybook に md/lg 両サイズ＋Card 内使用例を追加
+- **Container / Section**（primitives・新規）: ページレイアウトの責務を分離する薄い2部品。`Container`（`size`: page/narrow/wide/fluid、`gutter`: default/tight/none）が**左右余白と中央寄せの唯一の担い手**、`Section`（`spacing`: sm/md/lg/xl、`background`: none/subtle/accent-subtle）が**全幅の縦リズムと背景帯**を持つ。背景は Section・左右 padding は Container と分担することで「背景帯は画面端まで・コンテンツは中央寄せ」を**左右 padding の二重がけなし**で成立させる（consumer の `.section`/`.section-inner` 手書きで起きていた構造バグの恒久対策）。Storybook に推奨パターン例を追加
+- **SectionHeader**: `align="center"` と `eyebrow` スロットを追加。ランディング/ガイド系の中央寄せ大見出し（Eyebrow Badge + Title + Subtitle）に対応。`align` 無指定は `start`（従来の左寄せ＋もっと見る）で**既存の使い方は無変更**
+- **セクション余白トークン `--Space-Section-*`**: `xs`〜`2xl`（32/40/48/56/64/80px・8の倍数）を `preset.css` / `preset-standalone.css`（`./preset-standalone` エントリ）/ `tokens.json`(`spacing.section`) に追加。`spacing.scale`（最大24px）を超えるセクション縦リズム用の意味的トークンで、Tailwind を使わない入口でも参照可能。生CSS/HTML モックの rem 直書きの置換先になる
+
+### 🛡 Internal
+
+- **Card の縦間隔ルールを明文化（二重がけ防止）**: 子要素の縦間隔は Card 本体の `flex-col gap-4`(16px) が一括所有し、直下の子に `margin-top/bottom`・`space-y-*` を足さない旨を `contracts/components.json` の Card ルールに追記（正典）。`AGENTS.md` の「書く前ゲート」にも同趣旨を反映
+- **R18c（補助 lint）**: JSX 直書きの `<Card>` 直下の子の `mt-/mb-/my-/space-y-*` を warning で検出。`contracts/rules.json` ＋ `scripts/lint-scratch.sh` に実装（`CardContent` 等ネストの子は誤検知しないガード込み）し、vitest 回帰テストを追加。別 CSS/module.css の margin は正規表現では検出不可な旨を `note` に明記（本命は上記 Card ルールと IconBadge）
+- **生CSS の rem 直書き lint（R11b/R12b）**: `padding`/`gap`（`padding-inline/block` 等の複合プロパティ含む）の rem 直書きを `contracts/rules.json` に追加し、`lint-scratch.sh` に DS 自身の `src/**/*.css`（および引数で渡した CSS）を対象とした CSS スキャンを配線（`var()` 参照・カスタムプロパティ定義は除外）。R11/R12 は Tailwind 任意値 `[Npx]` しか見ずすり抜けていた経路を補強し、vitest 回帰テストを追加。限界（consumer リポジトリの CSS には届かない）を `note` に明記
+
+### 🐛 Fixed
+
+- **Toast(Sonner)**: ダークモードで状態トースト（success/error/warning/info）の説明文がほぼ不可視になる問題を修正。背景は primitive の明色で固定なのに説明文が semantic（ダークで白に反転）だったため。説明文・cancel ボタンをモード非依存の primitive 色に固定し、error の見出し・アイコンの低コントラストも同時に解消
+
+### 🎨 Changed
+
+- **角丸の統一（#18 シャープ化の追随）**: ProductCard カートボタン / CouponCard CTA / ReviewCard「参考になった」/ Toast(Sonner) アクションボタンの角丸を Button のサイズ対応に統一（`rounded-xl`→`lg`、`rounded-[18px]`→`xl`）。#18 が Button 本体をシャープ化した際に取り残されたボタン風 CTA のコピーを追随させたもの
+
+### 🛡 Internal
+
+- **角丸・シャドウのルールをトークン実態と整合**: `rounded-md`(8px)/`rounded-xl`(14px) と `shadow-md/lg` は preset.css/tokens.json の正規トークンのため許可に変更（禁止は `rounded-3xl/4xl`・任意値・`shadow-xl/2xl` のみに）。SVG ブランド色（fill/stroke 内）と %・fr・vw のコンテナ比率値の例外を明文化（contracts/rules.json AI7 改訂・R53 新設・R8/R11/R12 / lint-scratch.sh / CLAUDE.md・CLAUDE_DEV.md）
+- **lint-scratch に `--components` ティア追加**: foundations/primitives/ec のコンポーネント定義にトークン系チェック（HEX/任意px/角丸/シャドウ）を適用。`npm run check`・pre-commit・PostToolUse hook に配線。例外は `lint-scratch-allow` コメントで明示
+- **tokens.json を preset.css と同期**: radius.2xl〜4xl 追加、shadow.* の値ドリフト解消、overlay 追加
+- 任意値の同値正規化（視覚変化なし）: Button xl `rounded-[14px]`→`rounded-xl`、Tooltip 矢印 `rounded-[2px]`→`rounded-xs`、BottomTabBar `rounded-[18px]`→`rounded-full`、SideNav `pl-[14px]`→`pl-3.5`、AdminLayout `pl-[72px]`→`pl-18` ほか
+
+---
+
+## [0.6.0] - 2026-06-11
+
+### ✨ Added
+
+- **ListItem**: インタラクティブ（`href` / `onClick`）な行に hover 背景（`Surface-Tertiary`）と focus-visible リング（`Focus-High-Emphasis`）を追加。`onClick` のみの場合は `role="button"` ＋ Enter / Space キー操作にも対応。表示専用行（href/onClick なし）は変化なし (#21)
+
+### 🎨 Changed
+
+- **Button**: 角丸を全サイズで -4px してシャープ化（よりキリッとした印象に） (#18)
+
+### 🐛 Fixed
+
+- **border（全コンポーネント）**: 色指定のない `border` を持つ 16 コンポーネントに border 色を明示し、Tailwind v4 のグローバル base reset 非依存に。消費側がリセットを取り込まないと罫線が要素の文字色へ化ける問題を防止。回帰防止 lint（`scripts/check-border-color.mjs`）と「`dist/index.css` import 必須」の明記を追加 (#20)
+- **文脈非依存性（text / icon / bg）**: 消費側の文字色・背景を継承して崩れる箇所を全コンポーネント監査で修正（敵対的検証で実害 12 / 誤検出 19 を仕分け）。Storybook に継承漏れを目視検出する「Hostile ctx」トグルを追加 (#23)
+- **ListItem**: href（リンク）行で `onClick` / `aria-*` / `data-*` が内側要素に残り、キーボード操作時に発火しない問題を修正。props と focus を anchor に集約 (#24)
+
+### 🛡 Internal
+
+- **lint**: `check-border-color` が CVA 定義内の border も走査するよう拡張（色なし border の回帰防止を強化） (#24)
+- **Storybook**: 「Hostile ctx」検出ツールが Radix Portal（Dialog/Popover 等）の継承漏れも検出できるよう body へのスタイル適用に対応 (#24)
+- **docs**: CLAUDE.md を利用者向け / 開発者向け（CLAUDE_DEV.md）に分離 (#17)
+
+---
+
 ## [0.5.0] - 2026-06-08
 
 ### 🚨 Breaking Changes

package/CLAUDE.md

@@ -1,166 +1,60 @@
-# Cake.jp Design System — 設計ルールブック
+# Cake.jp Design System — 利用ガイド
+
+> **このファイルは `@cakejp/design-system` を利用するプロジェクト向けです。**
+> DS リポジトリ自体の開発には **CLAUDE_DEV.md** を参照してください。
 
 ## 目的
 
 Cake.jp のフロントエンドとデザインシステムを正式に接続する。
-PdM や社長が AI（Claude 等）で HTML モックを作る際、このリポジトリを参照して高精度なモックを生成できるようにする。
-デザイナー・フロントエンドがいなくても、モック → バックエンド開発へそのまま移行できる品質を目指す。
+PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッケージを参照して高精度なモックを生成できるようにする。
 
 ---
 
-## 重要: コードを書く前に必ず読むこと
+## コードを書く前に必ず読むこと
 
-**コードを1行でも書く前に、以下のファイルを必ず読み込むこと。**
+**コードを1行でも書く前に、以下のファイルを読み込むこと。**
+パスは `node_modules/@cakejp/design-system/` 配下、または DS リポジトリ直下。
 
 | ファイル | 内容 | いつ読むか |
 |---------|------|----------|
 | **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・ライティングルール | **コード生成前に必ず** |
-| **contracts/components.json** | 全103コンポーネントの定義（variants・rules・accessibility） | コンポーネント作成・修正時 |
+| **contracts/components.json** | 全コンポーネントの定義（variants・rules・accessibility） | コンポーネント利用・画面作成時 |
 | **tokens.json** | カラー・タイポグラフィ・スペーシング・影・角丸 | トークン値を参照する時 |
-| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト・本番サイト対応表 | 本番再現・新規コンポーネント作成時 |
-
-> ※ Codex を使う場合は **AGENTS.md** を参照すること（明示的なファイル読み込み手順を記載）。
+| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト・本番サイト対応表 | 本番再現・新規画面作成時 |
 
 ---
 
-## ❌ スクラッチコード禁止ルール（強制）
-
-> 「読みます」ではなく「書く前にブロックする」ゲートとして運用すること。
+## スクラッチコード禁止ルール
 
-### 書く前ゲート（以下のパターンを書こうとしたら必ずDSを確認すること）
-
-下記のいずれかを CSS または JSX に追加しようとした場合、**書く手を止めて** `contracts/components.json` と Storybook で同等パターンを探すこと:
+下記のいずれかを CSS または JSX に追加しようとした場合、**書く手を止めて** `contracts/components.json` で同等パターンを探すこと:
 
 | 追加しようとしているもの | DSで確認すること |
 |------------------------|----------------|
 | `::before` / `::after` で装飾（色付きバー・ドット・矢印等） | SectionHeader, Chip, Badge, ListItem の variants |
-| カスタムカラー（`rgba(...)` / `#xxxxxx` / ハードコード） | `tokens.json` のトークン名を使う。存在しないトークンは使わない |
-| カスタムシャドウ（`box-shadow: ...`） | `tokens.json` の `shadow.*` を使う |
-| カスタムボーダー半径（`border-radius: ...px`） | `tokens.json` の `radius.*` を使う |
+| カスタムカラー（`rgba(...)` / `#xxxxxx` / ハードコード） | `tokens.json` のトークン名を使う。存在しないトークンは使わない。例外: サードパーティブランドロゴの SVG `fill=`/`stroke=` 内のみ HEX 直書き可（出典コメント必須） |
+| カスタムシャドウ（`box-shadow: ...`） | `shadow-xs/sm/md/lg`（preset.css が DS 値に再定義済み）または用途別 `shadow-menu/tooltip/dialog/modal/overlay`。`shadow-xl/2xl` 禁止。オーバーレイの `md/lg` は正規仕様 |
+| カスタムボーダー半径（`border-radius: ...px` / `rounded-[Npx]`） | `rounded-xs/sm/md/lg/xl/2xl/full` のみ（= `tokens.json` の `radius.*`、`--radius`=10px 基準で 2/6/8/10/14/18px）。`rounded-3xl` 以上・任意値は禁止 |
+| コンテナ比率の任意値（`px-[22.25%]` 等） | 4px グリッドは px 値のみ対象。%・fr・vw は理由コメント付きで許可 |
 | カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` を使う |
 | 新しい `<div>` ラッパーでレイアウト構造を作る | Card, Section, Stack 等のコンポーネントに置き換えられないか確認 |
+| 生の `<button>` `<input>` `<select>` `<textarea>` `<table>` | DS の Button / Input / Select / Textarea / DataTable を使う |
 
 **確認手順:**
 1. `contracts/components.json` で該当コンポーネントを検索
-2. Storybook（`npm run storybook`）で実際の見た目を確認
-3. DSに存在しない場合のみ、カスタム実装を許可（その場合はコメントで理由を記載）
-
-### 書いた後ゲート（強制）
-
-`.tsx` `.css` `.module.css` を**1ファイルでも編集したら必ず実行**:
-
-```bash
-bash scripts/lint-scratch.sh
-```
-
-エラーが出た場合: **そのエラーを修正するまで次のタスクに進んではならない。**
-
-> lint-scratch.sh が通っていないコードは未完成扱い。
-
----
-
-## ドキュメント構成
-
-| ファイル | 内容 |
-|---------|------|
-| **CLAUDE.md**（本ファイル） | 概要・技術スタック・コマンド（Claude Code用） |
-| **AGENTS.md** | 同上（Codex用。セッション開始時の読み込み指示・編集後コマンドを明記） |
-| **contracts/components.json** | 全103コンポーネントの構造化定義（バリアント・アクセシビリティ要件） |
-| **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・タイポグラフィ定義 |
-| **tokens.json** | カラー・スペーシング・シャドウトークンの機械可読定義 |
-| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト（Cake.jp固有） |
-
----
-
-## デザインリソース
-
-| リソース | URL |
-|---------|-----|
-| Figma Design System | https://www.figma.com/design/ExHuJOWJChJtk0qiskqEsI/Cake.jp-Design-System?node-id=18168-44099 |
+2. DSに存在しない場合のみ、カスタム実装を許可（その場合はコメントで理由を記載）
 
 ---
 
 ## 技術スタック
 
 - React 19 + TypeScript
-- Vite（ビルド）
 - Tailwind CSS v4（`@import "tailwindcss"` 構文。`@tailwind base` は v3 記法で使用禁止）
 - shadcn/ui（Radix UI ベース、Cake.jp テーマ適用済み）
-- Storybook（`@storybook/react-vite`）
 - CVA（class-variance-authority）でバリアント管理
 - Lucide React + iconsax-react（アイコン）
 
 ---
 
-## ディレクトリ構成
-
-```
-src/
-├── components/
-│   ├── foundations/ # shadcn ベース汎用 UI（46個・全事業共通）
-│   ├── primitives/  # 業界汎用パターン（35個・jobboard等他事業でも再利用可）
-│   ├── ec/          # Cake.jp / EC 事業特化（23個・商品・配送・クーポン等）
-│   └── pages/       # ページ単位のストーリー
-├── prototypes/      # /mock スキルで生成されたプロトタイプ
-├── lib/
-│   └── utils.ts     # cn() ユーティリティ
-└── index.css        # カラートークン定義 + Tailwind 設定
-```
-
-### 3層構造の依存ルール
-
-```
-ec/         ← Cake.jp 特化（最上位）
-  ↓
-primitives/ ← 業界汎用パターン
-  ↓
-foundations/ ← shadcn ベース（最下位）
-```
-
-- `foundations/` は他層に依存しない
-- `primitives/` は `foundations/` のみ参照可
-- `ec/` は `foundations/` と `primitives/` を参照可
-- **逆方向の依存は禁止**（primitives から ec を import する等）
-
----
-
-## コマンド
-
-```bash
-# 開発サーバー（Storybook）
-npm run storybook
-
-# プロトタイプビューアー
-npm run dev
-# → http://localhost:5173/prototypes
-
-# ビルド
-npm run build-storybook
-
-# パッケージビルド（npm install 時に自動実行）
-npm run build:lib
-
-# 型チェック
-npx tsc --noEmit
-
-# リント
-npm run lint
-
-# スクラッチ検出（実装後に必ず実行）
-bash scripts/lint-scratch.sh
-
-# コンポーネント再利用チェック
-bash scripts/check-story-reuse.sh
-
-# ドリフト検出（コンポーネント追加後に実行）
-bash scripts/check-drift.sh
-
-# 全チェック一括実行
-npm run check
-```
-
----
-
 ## カラートークン早見表
 
 | 用途 | トークン |
@@ -177,12 +71,13 @@ npm run check
 
 ---
 
-## コンポーネント追加時のチェックリスト
+## AI 生成コードの典型的な誤り
 
-新しいコンポーネントを追加したら、以下を必ず更新:
+`contracts/rules.json` の `aiPatterns` セクションで詳細を確認すること。主な注意点:
 
-- [ ] `src/index.tsx` にエクスポートを追加
-- [ ] `contracts/components.json` にコンポーネント定義を追加
-- [ ] `contracts/components.json` の `meta.counts` を更新
-- [ ] `bash scripts/check-drift.sh` を実行して乖離がないことを確認
-- [ ] Storybook のストーリーファイル（`.stories.tsx`）を作成
+- **価格表記**: `¥{数字,区切り}（税込）` — `円` `税込み` `(税込)` は禁止
+- **日付表記**: `M月D日（曜日）` — `YYYY/MM/DD` や英語表記禁止
+- **aria-label**: 日本語で記述 — 英語 aria-label 禁止
+- **input type="date"**: 使用禁止 — Popover と Calendar を組み合わせる
+- **Tag に onClick**: 禁止 — 押せるものは Chip を使う
+- **SectionHeader 手書き**: 禁止 — `SectionHeader` コンポーネントを使う

package/README.md

@@ -19,6 +19,11 @@ import "@cakejp/design-system/dist/index.css"
 <Button>カートに入れる</Button>
 ```
 
+> **`dist/index.css` の import は必須。**
+> このCSSにはカラートークン定義に加え、Tailwind v4 のベースレイヤー（`* { border-color: var(--border) }` 等）が含まれます。
+> import しないと、Tailwind v4 の border-color 既定が `currentColor` のままになり、コンポーネントの罫線や枠線がその要素の文字色に化けます（例: テーブルの行罫線が黒くなる）。
+> 自前の Tailwind 設定にマージしたい場合は `@cakejp/design-system/preset`（base レイヤー込み）を参照してください。
+
 ## 構造
 
 3-tier アーキテクチャ:

package/bin/init.js

@@ -3,7 +3,7 @@
 // @cakejp/design-system init
 // Consumer プロジェクトに AI (Claude / Codex) 向けルールファイルを設置する。
 // AI エージェントは node_modules 配下のファイルを自動で読まないため、
-// プロジェクトルートに AGENTS.md / CLAUDE.md（node_modules 内の DS ルールを
+// プロジェクトルートに AGENTS.md / CLAUDE.md（node_modules 内の DS 利用ガイドを
 // 参照する薄いポインタ）を置く必要がある。
 //
 // Usage:
@@ -128,7 +128,7 @@ if (created > 0) {
   console.log(`
 次のステップ:
   1. AI (Claude Code / Codex) を再起動してルールを読み込ませる
-  2. UI を作る前に必ず node_modules/@cakejp/design-system/{AGENTS.md,CLAUDE.md,contracts/*,tokens.json} を AI に読ませる
+  2. UI を作る前に必ず node_modules/@cakejp/design-system/{CLAUDE.md,contracts/*,tokens.json} を AI に読ませる
   3. スクラッチコード（ハードコードカラー・余白・角丸等）を書かない運用を徹底する
 `)
 }

package/contracts/components.json

@@ -4,10 +4,10 @@
     "version": "0.1.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
-      "foundations": 46,
-      "primitives": 34,
+      "foundations": 47,
+      "primitives": 36,
       "ec": 23,
-      "total": 103
+      "total": 106
     }
   },
   "foundations": [
@@ -109,7 +109,8 @@
         "CardFooter"
       ],
       "rules": [
-        "paddingはCard本体のp-4で一括管理。全幅コンテンツは-mx-4で突き破る"
+        "paddingはCard本体のp-4で一括管理。全幅コンテンツは-mx-4で突き破る",
+        "子要素の縦間隔はCard本体のflex-col gap-4(16px)で一括管理。直下の子にmargin-top/bottom/space-yを足さない（gapと二重がけになり間延びする）。丸アイコンはIconBadgeを使う（外側marginを持たない）"
       ]
     },
     {
@@ -185,6 +186,20 @@
       "name": "HoverCard",
       "path": "src/components/foundations/hover-card.tsx"
     },
+    {
+      "name": "IconBadge",
+      "path": "src/components/foundations/icon-badge.tsx",
+      "variants": [
+        "md",
+        "lg"
+      ],
+      "rules": [
+        "丸アイコンバッジ（md=44px/lg=72px）。アイコンを淡いアクセント背景の円で囲む装飾要素",
+        "外側marginを持たない。縦間隔は親Cardのflex-col gap-4(16px)に委ねる（二重がけ防止）",
+        "アイコン色はcurrentColor(--Object-Accent-Primary)を継承。中のアイコンにcolorを渡さない",
+        "アイコンサイズはバッジが固定(md=20px/lg=38px)。アイコン側にsizeを渡さない"
+      ]
+    },
     {
       "name": "Input",
       "path": "src/components/foundations/input.tsx",
@@ -526,11 +541,41 @@
         "flex"
       ]
     },
+    {
+      "name": "Container",
+      "path": "src/components/primitives/container.tsx",
+      "variants": [
+        "size: page | narrow | wide | fluid",
+        "gutter: default | tight | none"
+      ],
+      "rules": [
+        "ページ最大幅と左右paddingの唯一の担い手。これを使う親(Section等)は自身で左右paddingを持たない（二重がけ防止）",
+        "縦余白・背景色は持たない（Sectionの責務）"
+      ]
+    },
+    {
+      "name": "Section",
+      "path": "src/components/primitives/section.tsx",
+      "variants": [
+        "spacing: sm | md | lg | xl",
+        "background: none | subtle | accent-subtle"
+      ],
+      "rules": [
+        "全幅の縦リズム＋背景帯。左右paddingを持たない（左右余白はContainerが唯一の担い手）",
+        "背景色はSection(全幅)が持ち中央寄せはContainerが持つ → 背景帯は画面端まで・コンテンツは中央寄せが二重がけなしで成立",
+        "縦余白はSP/PCペアで --Space-Section-* トークンを消費（rem直書き撲滅）"
+      ]
+    },
     {
       "name": "SectionHeader",
       "path": "src/components/primitives/section-header.tsx",
+      "variants": [
+        "size: 3xl | 2xl | xl | lg | md | sm",
+        "align: start | center"
+      ],
       "rules": [
-        "タイトル+もっと見るボタンをCardTitle+Button手書き禁止。SectionHeaderを使う"
+        "タイトル+もっと見るボタンをCardTitle+Button手書き禁止。SectionHeaderを使う",
+        "中央寄せ大見出し（ランディング/ガイド系）は align=\"center\" を使う。eyebrow プロップに Badge 等を載せられる。手書きの中央寄せ見出し禁止"
       ]
     },
     {

package/contracts/rules.json

@@ -98,8 +98,8 @@
       "severity": "warning",
       "category": "color",
       "pattern": "#[0-9A-Fa-f]{6}",
-      "excludes": [".stories.", ".css", "shadow", "components/foundations/", "components/primitives/", "components/ec/"],
-      "message": "HEXハードコード禁止",
+      "excludes": [".stories.", ".css", "shadow", "fill=\"", "stroke=\"", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "HEXハードコード禁止（例外: サードパーティブランドロゴの SVG fill/stroke — 例 Amazon #FF9900、Google 4色。出典コメント推奨）",
       "fix": "var(--Brand-Cake-Orange) 等セマンティックトークンを使う"
     },
     {
@@ -132,16 +132,45 @@
       "severity": "warning",
       "category": "spacing",
       "pattern": "p-\\[[0-9]*[13579]px\\]|m-\\[[0-9]*[13579]px\\]",
-      "message": "4pxグリッド外の余白値禁止",
-      "fix": "p-3（12px）等4の倍数のTailwindクラスを使う"
+      "message": "4pxグリッド外の余白値禁止（対象は px 任意値のみ。%・fr・vw 等のコンテナ比率はレイアウト都合で許可＝理由コメント必須）",
+      "fix": "p-3（12px）等4の倍数のTailwindクラスを使う。やむを得ない固有値は lint-scratch-allow コメントで理由を明記"
     },
     {
       "id": "R12",
       "severity": "warning",
       "category": "spacing",
       "pattern": "gap-\\[[0-9]*[13579]px\\]",
-      "message": "4pxグリッド外のgap値禁止",
-      "fix": "gap-1.5（6px）or gap-2（8px）"
+      "message": "4pxグリッド外のgap値禁止（対象は px 任意値のみ）",
+      "fix": "gap-1.5（6px）or gap-2（8px）。Figma 由来のやむを得ない固有値は lint-scratch-allow コメントで理由を明記"
+    },
+    {
+      "id": "R11b",
+      "severity": "warning",
+      "category": "spacing",
+      "target": "css",
+      "pattern": "(padding|padding-(top|bottom|left|right|inline|block)[a-z-]*)\\s*:\\s*[0-9.]+rem",
+      "message": "生CSSで padding を rem 直書き禁止（R11/R12 の Tailwind 任意値検査をすり抜ける経路）",
+      "fix": "spacing トークン（var(--spacing-*)）を使う。セクション縦余白は var(--Space-Section-*) を使う",
+      "note": "limitation: lint-scratch.sh の CSS スキャンは引数で指定したCSS、または引数なし実行時の DS 自身の src/**/*.css が対象。consumer リポジトリの CSS（実バグの front-site.css 等）には届かない＝consumer が DS lint を導入しない限り補助どまり。カスタムプロパティ定義（--Foo: 2rem）はトークン定義なので対象外"
+    },
+    {
+      "id": "R12b",
+      "severity": "warning",
+      "category": "spacing",
+      "target": "css",
+      "pattern": "gap\\s*:\\s*[0-9.]+rem",
+      "message": "生CSSで gap を rem 直書き禁止",
+      "fix": "spacing トークン（var(--spacing-*)）を使う",
+      "note": "limitation: R11b と同様、DS 自身の src/**/*.css のみが対象。var() 参照は除外"
+    },
+    {
+      "id": "R53",
+      "severity": "warning",
+      "category": "elevation",
+      "pattern": "shadow-(xl|2xl)\\b",
+      "excludes": [".stories."],
+      "message": "DS定義外シャドウ禁止（shadow-xl/2xl）",
+      "fix": "shadow-xs/sm/md/lg を使う（preset.css が --shadow-md/lg を DS 値に再定義済み）。オーバーレイは用途別トークン shadow-menu/tooltip/dialog/modal/overlay を推奨。フローティング UI の強い影（md/lg）は意図された正規仕様"
     },
     {
       "id": "R13",
@@ -200,6 +229,16 @@
       "message": "CardのpaddingをCard本体とchildで分離しない",
       "fix": "Card本体が p-4 で管理。全幅コンテンツは -mx-4 で突き破る"
     },
+    {
+      "id": "R18c",
+      "severity": "warning",
+      "category": "spacing",
+      "pattern": "<Card(?:\\s[^>]*)?>\\s*(?:\\{/\\*[\\s\\S]*?\\*/\\}\\s*)?<[^>]*className\\s*=\\s*[\"'`][^\"'`]*(^|\\s)(mt|mb|my|space-y)-",
+      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "Card直下の子に mt-/mb-/my-/space-y- を足さない（縦間隔はCard本体の flex-col gap-4=16px が一括管理。二重がけで間延びする）",
+      "fix": "余白クラスを外し Card の gap-4 に委ねる。丸アイコンは IconBadge を使う（外側marginを持たない）",
+      "note": "limitation: この正規表現はJSXソース文字列のみを見る。別CSS/module.cssファイルに書かれた margin（実バグの主因）は検出不可。あくまでJSXにTailwindで直書きした場合の補助で、本命は components.json の Card 縦間隔ルール（正典）と IconBadge 部品化"
+    },
     {
       "id": "R19",
       "severity": "error",
@@ -407,6 +446,23 @@
       "message": "AI生成パターン: 左端カラーストライプ禁止（Alert含む）",
       "fix": "border rounded-lg で全周ボーダー"
     },
+    {
+      "id": "B1",
+      "severity": "error",
+      "category": "component",
+      "scope": "designSystemInternal",
+      "appliesTo": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "pattern": "border 幅ユーティリティ（border / border-b / border-l 等）に色クラスが同居していない",
+      "message": "DSコンポーネントで色指定のない border を使わない。Tailwind v4 の border-color 既定は currentColor。消費アプリが preset.css のグローバル base リセット（* { @apply border-border }）を取り込まない場合、罫線が要素の文字色に化ける（例: テーブル行に text-[var(--Text-High-Emphasis)] を付けると罫線が黒 #1C1A1A になる）。コンポーネントはグローバルリセットに依存せず自前で border 色を持つこと。",
+      "fix": "同じ className 内に border-[var(--Border-Medium-Emphasis)] 等を明示する（透明が意図なら border-transparent）。検査: npm run lint:border（scripts/check-border-color.mjs）"
+    },
+    {
+      "id": "AI5",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "message": "文脈非依存違反: text色/背景/アイコン色を明示せず親の継承や Tailwind v4 既定（border/ring/outline=currentColor）に委ねる。消費側が濃色テキストや色付き背景を敷くと文字・アイコン・枠が化ける。サーフェス（カード/オーバーレイ等）が bg 未指定だと親背景が透ける。",
+      "fix": "テキスト要素に text-[var(--Text-*)]、サーフェスに bg-[var(--Surface-*)] を明示。Content/オーバーレイ系ラッパは text-popover-foreground 等で子を隔離する。Storybook ツールバーの『Hostile ctx』を loud にして漏れ（マゼンタ化・背景透け）を目視確認する。"
+    },
     {
       "id": "AI3",
       "severity": "warning",
@@ -437,10 +493,10 @@
       "id": "AI7",
       "severity": "warning",
       "category": "ai-pattern",
-      "pattern": "rounded-md\\b|rounded-xl\\b|rounded-3xl\\b",
-      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
-      "message": "AI生成パターン: DS定義外の角丸禁止（rounded-md/xl/3xl）",
-      "fix": "DS定義の角丸のみ使用する"
+      "pattern": "rounded-(3xl|4xl)\\b|rounded-\\[[0-9]",
+      "excludes": [".stories."],
+      "message": "AI生成パターン: DS定義外の角丸禁止（rounded-3xl/4xl・任意値 rounded-[Npx]）",
+      "fix": "DSトークンスケールのみ使用: rounded-xs(2)/sm(6)/md(8)/lg(10)/xl(14)/2xl(18px)/full（--radius=10px 基準）。目安: メニュー・小型コントロール=md、ボタン・入力=lg（Button lg/xl は xl）、コンパクトカード=xl、標準カード・ダイアログ=2xl。例外は lint-scratch-allow コメントで理由を明記"
     },
     {
       "id": "R44",