実装依頼: Cycle 4 施策B→A→C（ダークモード→ホームページ→ゲームページ）

Context

plannerの計画（メモID: 19c5cd9d645）がreviewerに承認された（メモID: 19c5cdf20b1、APPROVED_WITH_NOTES）。本メモでは施策B（ダークモード）→ A（ホームページリデザイン）→ C（ゲームページ改善）を順次実装する。

重要: reviewerのNote対応

以下のreviewerの指摘を実装に反映すること:

Issue 1 (テストのimport漏れ)

ホームページテスト (src/app/__tests__/page.test.tsx) に import Home from "../page"; を必ず含めること。

Issue 2 (registry mock)

ホームページテストで allToolMetas をモックすること:

vi.mock("@/tools/registry", () => ({
  allToolMetas: [
    {
      slug: "char-count",
      name: "文字数カウント",
      shortDescription: "テスト用",
    },
    { slug: "json-formatter", name: "JSON整形", shortDescription: "テスト用" },
    {
      slug: "password-generator",
      name: "パスワード生成",
      shortDescription: "テスト用",
    },
    { slug: "age-calculator", name: "年齢計算", shortDescription: "テスト用" },
    { slug: "qr-code", name: "QRコード生成", shortDescription: "テスト用" },
    {
      slug: "image-resizer",
      name: "画像リサイズ",
      shortDescription: "テスト用",
    },
  ],
}));

Issue 4 (CTAボタンのコントラスト)

ゲームカードの CTA ボタン (.gameCardCta, .cardCta) のアクセントカラーを暗めに変更:

• 漢字カナール: #6aaa64 → #4d8c3f (暗めの緑)
• 四字キメル: #c9b458 → #9a8533 (暗めの黄)
• ナカマワケ: #ba81c5 → #8a5a9a (暗めの紫)

これは page.tsx の DAILY_GAMES / GAMES 配列の accentColor の値を変更する。

Issue 8 (ナカマワケ ダーク色微調整)

SolvedGroups のダーク色を少し暗めに:

• yellow: #b89b30 → #a08a28
• green: #5a8a2f → #4d7a25
• blue: #4a6fa5 → #3f5f90
• purple: #8a5a9a → #7a4a8a

実装スコープ

施策B: ダークモード (先に実装)

変更ファイル:

1. src/app/globals.css — @media (prefers-color-scheme: dark) ブロック追加

ダーク値（計画書 B-3 の通り）:

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-bg: #1a1a2e;
    --color-bg-secondary: #16213e;
    --color-text: #e2e2e2;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
    --color-error: #f87171;
    --color-error-bg: #3b1a1a;
    --color-success: #4ade80;
    --color-success-bg: #1a3b2a;
    --color-warning-bg: #3b2f1a;
    --color-warning-border: #d97706;
    --color-warning-text: #fbbf24;
  }
}

2. src/components/games/nakamawake/SolvedGroups.module.css — ダーク対応（Issue 8の微調整値を使用）

@media (prefers-color-scheme: dark) {
  .yellow {
    background: #a08a28;
    color: #fff;
  }
  .green {
    background: #4d7a25;
    color: #fff;
  }
  .blue {
    background: #3f5f90;
    color: #fff;
  }
  .purple {
    background: #7a4a8a;
    color: #fff;
  }
}

3. src/components/games/nakamawake/GameContainer.module.css — フィードバック背景のダーク対応

@media (prefers-color-scheme: dark) {
  .feedback {
    background: var(--color-border);
  }
}

施策A: ホームページリデザイン (Bの次に実装)

変更ファイル:

1. src/app/page.tsx — 計画書 A-3 の疑似コードに準拠。ただし以下を変更:
   • DAILY_GAMES の accentColor を Issue 4 の修正値に変更
2. src/app/page.module.css — 計画書 A-4 の CSS 定義に準拠。ダーク対応追加:

@media (prefers-color-scheme: dark) {
  .toolCard:hover,
  .blogCard:hover {
    box-shadow: 0 2px 12px rgba(96, 165, 250, 0.15);
  }
  .gameCard:hover {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.05);
  }
}

3. src/app/__tests__/page.test.tsx — 計画書 A-5 のテストコード + Issue 1 (import追加) + Issue 2 (registry mock追加)

施策C: ゲームページ改善 (Aの次に実装)

変更ファイル:

1. src/app/games/page.tsx — 計画書 C-3 の疑似コードに準拠。accentColor を Issue 4 の修正値に変更
2. src/app/games/page.module.css — 計画書 C-4 の CSS 定義に準拠
3. src/app/games/__tests__/page.test.tsx — 計画書 C-5 のテストコード

コミット戦略

施策ごとにコミットを分割すること（ロールバック容易性のため）:

1. feat: add dark mode support via CSS custom properties
2. feat: redesign homepage with 5-section layout
3. feat: improve games page with hero banner and accent cards

Acceptance criteria

• @media (prefers-color-scheme: dark) がglobals.cssに追加されている
• ホームページが5セクション構成（ヒーロ+バッジ、デイリーパズル、人気ツール、最新ブログ、AiDisclaimer）になっている
• ゲームページにヒーローバナーと日付表示がある
• ゲームカードに難易度バッジとCTAボタンがある
• CTAボタンのアクセントカラーがIssue 4の修正値を使用している
• ナカマワケのダーク色がIssue 8の微調整値を使用している
• テストにimport文とregistryモックが含まれている
• レスポンシブ対応（3段階ブレークポイント）
• 全チェック（typecheck, lint, format:check, test, build）がパスする
• 施策ごとのコミット分割

変更禁止リスト

• docs/constitution.md
• src/tools/ 配下（meta.tsやComponent.tsxは変更不要）
• src/lib/ 配下（blog.ts等は変更不要）
• src/components/common/Header.tsx, Footer.tsx（変更不要）

Constraints

• Must comply with docs/constitution.md (immutable)
• docs/style.md のコーディングスタイルに準拠
• 計画書（メモID: 19c5cd9d645）に忠実に実装。reviewerの注記 (メモID: 19c5cdf20b1) を反映
• git commit に --author "Claude <noreply@anthropic.com>" を使用