docs: update DESIGN.md based on Claude Code feedback

Made-with: Cursor

DESIGN.md

@@ -14,6 +14,10 @@
 | `ponshu-room` / `ponshu_room_lite` | 独自テーマ（和紙 x 墨 x 琥珀）。Posimai デザインシステム適用外 |
 | `posimai-analytics` | BtoB ダッシュボード。TailwindCSS + React + ライトテーマで構築 |
 
+## `docs/design-system.md` との関係
+
+`docs/design-system.md` は **このファイルの補足・詳細版**として残存しているが、**AI が参照する正はこの DESIGN.md のみ**。二重参照した場合はこのファイルを優先すること。`docs/design-system.md` は将来的に廃止または統合予定。
+
 ---
 
 ## 1. ビジュアルテーマと雰囲気
@@ -42,6 +46,10 @@
 --accent: #6EE7B7      /* Posimai Teal — CTA・アクティブ状態のみ */
 --accent-dim: rgba(110,231,183,0.1)    /* アクティブ背景 */
 --accent-border: rgba(110,231,183,0.25) /* アクティブボーダー */
+
+/* 角丸 */
+--radius: 12px         /* カード・モーダル等 */
+--radius-sm: 8px       /* ボタン・インプット等 */
 ```
 
 ### ライトテーマ（`[data-theme="light"]`）
@@ -120,19 +128,21 @@
 
 ### クラス名対応表
 
-| 用途 | クラス名 |
+| 用途 | クラス名 | 備考 |
-|------|---------|
+|------|---------|------|
-| カード | `.card` |
+| カード | `.card` | base.css 定義。全 HTML アプリで使用可 |
-| モーダル本体 | `.modal` |
+| ガラスパネル | `.glass-panel` | posimai-dashboard 専用（Tailwind / Next.js）。HTML アプリでは `.card` を使うこと |
-| モーダル背景 | `.modal-overlay` / `.overlay` |
+| ガラスパネル（ホバー） | `.glass-panel-interactive` | posimai-dashboard 専用 |
-| CTA ボタン（teal） | `.btn.btn-primary` |
+| モーダル本体 | `.modal` | base.css 定義 |
-| セカンダリボタン | `.btn.btn-ghost` |
+| モーダル背景 | `.modal-overlay` / `.overlay` | base.css 定義 |
-| アイコンボタン | `.icon-btn` |
+| CTA ボタン（teal） | `.btn.btn-primary` | base.css 定義 |
-| ヘッダー | `.header` |
+| セカンダリボタン | `.btn.btn-ghost` | base.css 定義 |
-| サイドバー | `.sidebar` |
+| アイコンボタン | `.icon-btn` | base.css 定義 |
-| ナビアイテム | `.nav-item`（アクティブ: `.nav-item.active`）|
+| ヘッダー | `.header` | base.css 定義 |
-| セクションラベル | `.section-label` |
+| サイドバー | `.sidebar` | base.css 定義 |
-| トースト通知 | `#toast`（`.show` で表示）|
+| ナビアイテム | `.nav-item`（アクティブ: `.nav-item.active`）| base.css 定義 |
+| セクションラベル | `.section-label` | base.css 定義 |
+| トースト通知 | `#toast`（`.show` で表示）| base.css 定義 |
 
 ### カード
 
@@ -187,8 +197,9 @@
 
 ### グリッド・最大幅
 
-- **単一カラム（モバイル中心）**: `max-width: 860px`
+- **単一カラム（モバイル中心、HTML アプリ）**: `max-width: 860px`
-- **サイドバーあり**: `max-width: 1100px`（コンテンツ部分）
+- **サイドバーあり（HTML アプリ）**: `max-width: 1100px`（コンテンツ部分）
+- **サイドバーあり（posimai-dashboard / Next.js）**: `max-width: 1400px`（`DashboardShell.tsx` の実装値）
 - **ボトムパディング**: `calc(40px + env(safe-area-inset-bottom))` で iPhone ホームインジケーター対応
 
 ### ヘッダー
@@ -207,8 +218,28 @@
 --shadow-lg: 0 8px 32px rgba(0,0,0,0.5)  /* モーダル・サイドバー */
 ```
 
-- **全面 glow 禁止**: `box-shadow: 0 0 20px var(--accent)` のようなグロー効果は使わない
+### トランジション（base.css 定義値）
-- **グラデーション背景禁止**: `background: linear-gradient(...)` を背景に使わない（ブランドロゴ内のみ許容）
+
+```css
+--ease: cubic-bezier(.4, 0, .2, 1)   /* 標準イージング */
+--dur: 0.2s                           /* 標準時間 */
+```
+
+インタラクティブ要素のトランジションは `transition: all var(--dur) var(--ease)` を使うこと。
+
+### グラデーション・エフェクトの使用範囲
+
+```
+禁止: ページ・カードの背景色をグラデーションにする
+      box-shadow: 0 0 20px var(--accent) のような全面グロー
+
+許可: ブランドロゴ内のグラデーション（.brand-logo の linear-gradient）
+      アプリの演出エフェクト（aurora blob 等）— ただし以下の条件を満たす場合のみ
+        - pointer-events: none で操作を邪魔しない
+        - opacity / blur で主コンテンツより必ず背景に収まる
+        - posimai-dev / posimai-atlas 等サイバー系アプリに限定
+        - 一般的な情報・ツール系アプリには使わない
+```
 
 ### 重なり順（z-index）