refactor: l-inner p-XXX__inner 併記構造に統一（U2 原則 + 原則 11 整合 + p-404 grid 分離）

[shunei-web]

概要

PR #187（l-inner 一段ネスト化）を受けた最終構造への整合。
外側 wrapper に l-inner と p-XXX__inner を併記することで、名前一致・役割上書き可能性・Block 単独運用の三条件を同時達成する。

PR #187 が誤判断だった理由

PR #187 は memory/feedback_component_purity_resolution.md の「Component が Layout クラスを持つのは純度違反」という判断を適用したが、これは過剰適用だった。

• spec §5.6 および feedback_component_usage_unified_principle.md（原則 11）は、Block 間の責任直交を前提に、l-inner と p-XXX__inner を同一要素で併記することを推奨している
• しゅんえいルール: 「l-inner p-XXX__inner とすることで、名前も一致、上書き可能性時の役割も一致」
• PR #299 で feedback_component_purity_resolution.md に過剰適用警戒の補足追加済

最終構造の設計理由（5 評価軸整合）

評価軸	根拠
spec 準拠	§5.6 Block + Element 併記推奨・U2 原則（独立運用）
名前一致	l-inner wrapper と p-XXX__inner Element が同一要素 → 役割説明自然体
責任分離	l-inner（幅制御）/ p-XXX__inner（Block 固有上書き点）/ p-XXX__bar/stack（内部レイアウト）で 3 層分離
最小差分	PR #187 の 2 段→1 段ネスト化から、外側 class 追加のみに変換（D / E を除き structural 変更最小）
上書き可能性	Project 層から p-XXX__inner 経由で l-inner の max-inline-size / padding 等を overrideable

修正前後の構造比較

A. p-header（3 ファイル）

<!-- Before (v1.2 HEAD = PR #187 後) -->
<div class="l-inner">
  <div class="p-header__bar">...</div>
</div>

<!-- After -->
<div class="l-inner p-header__inner">
  <div class="p-header__bar">...</div>
</div>

B. p-hero（index.html）

<!-- Before -->
<div class="l-inner">
  <div class="p-hero__stack">...</div>
</div>

<!-- After -->
<div class="l-inner p-hero__inner">
  <div class="p-hero__stack">...</div>
</div>

C. p-footer（3 ファイル）

<!-- Before -->
<div class="l-inner">
  <div class="p-footer__stack">...</div>
</div>

<!-- After -->
<div class="l-inner p-footer__inner">
  <div class="p-footer__stack">...</div>
</div>

D. p-cta（index.html）— 内側 wrapper 削除

<!-- Before (PR #187 が追加した内側 wrapper) -->
<div class="l-inner">
  <div class="p-cta__inner">
    <div class="p-cta__stack">...</div>
  </div>
</div>

<!-- After (p-cta__inner は inner 役割完結、内側 wrapper 不要) -->
<div class="l-inner p-cta__inner">
  <div class="p-cta__stack">...</div>
</div>

E. p-404（404.html）— grid 機能を __stack に分離

<!-- Before -->
<div class="l-inner">
  <div class="p-404__inner">...content...</div>
</div>

<!-- After -->
<div class="l-inner p-404__inner">
  <div class="p-404__stack">...content...</div>
</div>

p-404 CSS リファクタ詳細

p-404__inner に grid 機能と max-inline-size が混在していたため、l-inner との併記に合わせて責任を分離した。

/* Before */
.p-404__inner {
  display: grid;
  gap: var(--space-xl);
  justify-items: center;
  max-inline-size: 40rem;
}

/* After: __inner は幅制約のみ（l-inner の override 点） */
.p-404__inner {
  max-inline-size: 40rem;
}

/* After: __stack がグリッドレイアウトを担う */
.p-404__stack {
  display: grid;
  gap: var(--space-xl);
  justify-items: center;
}

理由: l-inner が margin-inline: auto + max-inline-size を持つため、p-404__inner はその上書き点（40rem 制約）のみを担い、grid 機能は内部 p-404__stack に委譲するのが責任分離原則に合致する。

変更対象

ファイル	変更種別
src/index.html	A（header）/ B（hero）/ D（cta inner 削除）/ C（footer）
src/404.html	A（header）/ E（p-404 stack 分離）/ C（footer）
src/privacy/index.html	A（header）/ C（footer）
src/assets/css/project/p-header.css	__inner 空ルール追加
src/assets/css/project/p-hero.css	__inner 空ルール追加
src/assets/css/project/p-footer.css	__inner 空ルール追加
src/assets/css/project/p-404.css	__inner max-inline-size 分離 + __stack 新設

変更なし: dead Element 9 件（p-problem__inner / p-features__inner / p-flow__inner / p-pricing__inner / p-numbers__inner / p-voice__inner / p-faq__inner / p-contact__inner / p-privacy__inner）

簡易 AR レポート

Critical（仕様違反・機能破損）: 0 件

Major（品質低下）: 0 件

Minor（改善候補）: 0 件

• spec §5 単一責任原則・§5.6 Block 併記推奨に完全準拠
• 命名規則（spec §6）準拠：p-404__stack は既存 p-hero__stack / p-footer__stack と一貫したパターン
• pnpm run check（markuplint / stylelint / eslint）全通過
• pnpm run build 成功（built in 70ms）
• grep 復活確認: 9 箇所全出力確認済

参照

• spec §5.4 単一責任原則 / §5.6 Block + Element 併記推奨
• memory feedback_shunei_coding_evaluation_axis.md
• memory feedback_component_purity_resolution.md（PR #299 過剰適用警戒補足）
• memory feedback_component_usage_unified_principle.md（U2 原則 + 原則 11）
• 関連 PR: refactor: l-inner 併記責任分離 — 一段ネスト化（5 種類、純度違反解消） #187（β 一段ネスト化、誤判断）/ #299（memory 補足）

🤖 Generated with Claude Code