From 0bc0f497b7fe6a4b0a187dbcf6dc424dd0c3f81c Mon Sep 17 00:00:00 2001
From: sousuke0422 <sousuke20xx@gmail.com>
Date: Tue, 11 Aug 2026 02:19:37 +0900
Subject: [PATCH 1/5] docs(render): add the reduced-motion layer's failure
 paths before implementing it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新しい層は既定で fail-open として生まれる——実装より先に、この層自身が
失敗したときどう倒れるかを三欄（検知できるか／どう倒れるか／検知できぬ
ならなぜか）で数え、層ごとの失敗経路・手当て・分類の三表へ行を足す。
対象は ①CDP エラー ②無応答 ③成功したがメディアクエリ未変化
④matchMedia 差し替え ⑤有効な project なのに呼び出し漏れ。

Assisted-by: multi-agent-shogun-aki-tweak
---
 apps/backend/crates/service/src/render/browser.rs | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/backend/crates/service/src/render/browser.rs b/apps/backend/crates/service/src/render/browser.rs
index ef9732d..a9d567d 100644
--- a/apps/backend/crates/service/src/render/browser.rs
+++ b/apps/backend/crates/service/src/render/browser.rs
@@ -55,9 +55,13 @@
 //! | Rust 側の解析（[`freeze_verdict`]） | 検知 | `ok === true` と確かめられた場合のみ撮影へ進む。欠落・型違い・parse 失敗はすべて unparseable（fail-closed） |
 //! | iframe・shadow 走査（`freezeRoot` 再帰） | 部分的 | open shadow root と同一オリジン iframe には到達。closed shadow root は**列挙する API が存在せず検知不能**、静止処理より後から生成される root にも届かない——いずれも README「届かない範囲」でページ側の責務と定めてある |
 //! | スクリーンショット | 検知 | CDP エラーは Rust 側 `Err`（fail-closed） |
+//! | reduced-motion 適用（`Emulation.setEmulatedMedia`） | 検知（CDP エラー・無応答とも） | project 設定で有効なときだけ `new_page` 直後（ナビゲーション前）に一度呼ぶ。CDP エラーは Rust 側 `Err` → [`RenderError::Cdp`]（環境分類・即中断。story のスクリプトを待たない一往復で、失敗の原因はブラウザ側——`new_page` と同じ分類）。無応答は chromiumoxide の request timeout（既定 30 秒）が `CdpError::Timeout` を返し、同じ `Cdp` へ倒れる（fail-closed） |
+//! | reduced-motion 適用の検証（[`REDUCED_MOTION_PROBE`]） | 部分的に検知 | 「呼び出しは成功したが実際にはメディアクエリが変わっていない」を撮影直前に実測する——constructed stylesheet の `@media (prefers-reduced-motion: reduce)` が効いたかのプローブ（`--vrt-reduced-motion`）と `matchMedia().matches` の**両輪**。どちらかが不成立なら `ok: false` → [`RenderError::Story`]（fail-closed。reduce を返さない壊れた/モックされた `matchMedia`——polyfill やテストダブルの事故——はここで落ちる）。evaluate の CDP エラーは READY probe と同様 deadline までリトライし期限で [`RenderError::Timeout`]。**ページが両方の観測を偽装する積極的な偽りは原理的に検知不能**——検証はページの JS realm で走り、CDP に emulated media 状態を読み戻す API が無い。脅威モデルは一貫して事故であり悪意ではない（README「検証層自身の失敗も fail-closed である」と同じ契約） |
+//! | reduced-motion 有効なのに呼び出し自体が漏れる | 実行時には検知不能 | 検知器の不在そのものがこの失敗であり、実行時観測では塞げない（「呼ばれなかったこと」を観測する層は、それ自身も呼ばれない）。構造で塞ぐ——適用は [`StoryRenderer::render_story`] の単一チョークポイントにだけ置き、分岐は `RenderOptions::emulate_reduced_motion` の一つ、project 列からの配線は `render_build` の単体テストで固定、経路全体は「ON で絵が変わる」positive control テスト（`reduced_motion_emulation_changes_the_picture_and_is_deterministic`）が貫通して固定する |
 //!
 //! 残る fail-open は「原理的に観測できない」もの（closed shadow root・
-//! クロスオリジン iframe・後から生成される root）だけであり、これらは
+//! クロスオリジン iframe・後から生成される root・reduced-motion 検証の
+//! 観測を両輪とも偽装するページ）だけであり、これらは
 //! 検知不能な理由とともに README の「届かない範囲」で利用者との契約に
 //! 昇格させてある。観測できるのに判定に使っていない失敗は残さないこと。
 //!
@@ -78,6 +82,8 @@
 //! | FREEZE evaluate | READY 待ちと**共有**の deadline（`started + story_timeout`）の残余。1 story の最悪所要は約 `story_timeout` + `SETTLE_DELAY` に収まる | [`RenderError::Timeout`]（時間切れ。READY 側と同じ分類。evaluate の CDP エラーも READY probe と同様 deadline までリトライし、期限で同じ Timeout——即 [`RenderError::Cdp`] へは倒さない） | `raf_suppressed_page_fails_within_the_story_timeout`・`freeze_timeout_shares_the_story_deadline_with_the_ready_wait`・`reloading_page_during_freeze_fails_story_scoped`・`collected_freeze_promise_fails_story_scoped` |
 //! | FREEZE 結果の解析 | 即時（待ちなし） | [`RenderError::Story`]（`freeze_verdict`） | `freeze_verdict_*` 単体群・`garbled_freeze_result_fails_instead_of_silently_succeeding` |
 //! | スクリーンショット | **なし**——CDP 呼び出しが返らない場合は上位の CI ジョブタイムアウト頼み。JS の promise を待たない一往復コマンドで、ハングの既知経路が無いため保留（欠けと認識した上での判断） | [`RenderError::Cdp`] | `renders_a_story_to_a_png_with_the_requested_viewport` |
+//! | reduced-motion 適用 | chromiumoxide の request timeout（既定 30 秒。一往復コマンド共通の機構） | [`RenderError::Cdp`] | `reduced_motion_emulation_changes_the_picture_and_is_deterministic` |
+//! | reduced-motion 検証 | evaluate リトライは READY 待ちと共有の deadline 残余。判定自体は即時 | [`RenderError::Story`]（[`reduced_motion_verdict`]）/ リトライ期限切れは [`RenderError::Timeout`] | `a_page_that_breaks_matchmedia_fails_instead_of_silently_capturing`・`reduced_motion_verdict_*` 単体群 |
 //!
 //! ## story 固有の失敗と環境の失敗（隔離の分類・全経路）
 //!
@@ -102,6 +108,9 @@
 //! | FREEZE evaluate のエラー・ハング | リトライ→期限で [`RenderError::Timeout`] | story | navigation / reload・rAF 捨ては story のスクリプトの挙動（実測経路は上表） |
 //! | FREEZE verdict（静止失敗・解析不能） | [`RenderError::Story`] | story | その story のアニメーション・応答の内容に起因 |
 //! | スクリーンショット | [`RenderError::Cdp`] | 環境（即中断） | JS を待たない一往復の CDP コマンド——失敗はブラウザ側 |
+//! | reduced-motion 適用（`setEmulatedMedia`） | [`RenderError::Cdp`] | 環境（即中断） | `new_page` 直後・story のスクリプトを待たない一往復——失敗はブラウザ側 |
+//! | reduced-motion 検証の evaluate エラー | リトライ→期限で [`RenderError::Timeout`] | story | READY probe と同じ——ナビゲーション中の一時的な context 差し替えが主因 |
+//! | reduced-motion 検証の不成立・解析不能 | [`RenderError::Story`] | story | `matchMedia` の差し替え等、そのページの内容に起因 |
 //! | スクリーンショット名の規則違反 | `StoryFailure` 直行（`render_build`） | story | story の title / name に起因。全違反を 1 ビルドで列挙する |
 //! | ストレージ・DB・baseline 流用の失敗 | `anyhow`（`render_build`） | 環境（即中断） | 保存経路の異常は次の story でも再現する |
 //! | バンドル展開・stories 空 | `anyhow`（`render_build`） | ビルド全体（ループ前に中断） | story 以前の前提が壊れている |

From 6fb4c4edd008dde1a02943a7b047e8ba2891fc25 Mon Sep 17 00:00:00 2001
From: sousuke0422 <sousuke20xx@gmail.com>
Date: Tue, 11 Aug 2026 02:33:15 +0900
Subject: [PATCH 2/5] feat(render): project-level prefers-reduced-motion
 emulation, fail-closed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

プロジェクト単位の bool（既定 OFF）で、storybook モードの撮影を
prefers-reduced-motion: reduce のエミュレーション下で行う。

- 適用はナビゲーション前に Emulation.setEmulatedMedia を一度。撮影直前に
  設定すると、初期化時に一度だけ matchMedia を読む実装（この層の主対象で
  ある rAF / canvas 実装の最頻形）に見えないため、OS で reduce を設定した
  実利用者と同じ条件で最初から描画させる
- fail-closed: 有効な project では撮影直前に REDUCED_MOTION_PROBE が
  CSS カスケード（constructed stylesheet の @media プローブ）と
  matchMedia の両輪で適用を実測し、ok === true と確かめられた場合にだけ
  撮影へ進む。reduce を返さないモック matchMedia（polyfill・テスト
  ダブルの事故）はここで落ちる。CDP エラーは new_page と同じ環境分類、
  無応答は chromiumoxide の request timeout、検証 evaluate のエラーは
  READY probe と同じ deadline リトライ→story 分類の Timeout
- 呼び出し漏れ経路は実行時に検知できないため構造で塞ぐ:
  配線は render_options_for_project の 1 箇所＋単体テスト、経路全体は
  「ON で絵が変わる」positive control テストが貫通して固定
- 既定 OFF の理由（有効化で baseline が一度入れ替わる）と効く範囲の
  狭さ（行儀の良い rAF / canvas 実装との交差にだけ効く）を README へ
- Page.setBypassCSP は使わない（本番と同じ条件で撮る）

Assisted-by: multi-agent-shogun-aki-tweak
---
 README.md                                     |  45 ++
 .../crates/entity/src/_generated/projects.rs  |   4 +
 .../crates/handler/src/handlers/projects.rs   |   5 +-
 apps/backend/crates/job/src/render_build.rs   |  64 ++-
 apps/backend/crates/payload/src/projects.rs   |  10 +
 apps/backend/crates/service/src/projects.rs   |   9 +
 .../crates/service/src/render/browser.rs      | 439 ++++++++++++++++++
 apps/backend/migration/src/lib.rs             |   2 +
 .../src/m20260811000000_reduced_motion.rs     |  29 ++
 9 files changed, 601 insertions(+), 6 deletions(-)
 create mode 100644 apps/backend/migration/src/m20260811000000_reduced_motion.rs

diff --git a/README.md b/README.md
index b0adf7c..ce1f6cd 100644
--- a/README.md
+++ b/README.md
@@ -688,6 +688,51 @@ CSP を `Page.setBypassCSP` で迂回すると本番と異なる絵を撮るこ
 比較するだけなので、キャレット隠蔽やアニメーション静止は撮影側で行うこと
 （Playwright なら `caret: 'hide'` / `animations: 'disabled'` に相当）。
 
+#### `prefers-reduced-motion` のエミュレーション（プロジェクト単位・既定 OFF）
+
+プロジェクト設定の `emulate_reduced_motion`（`PATCH /v1/projects/{id}`）を
+有効にすると、storybook モードの撮影を `prefers-reduced-motion: reduce` を
+エミュレートした状態で行う。ページのナビゲーション前に
+`Emulation.setEmulatedMedia` で一度設定するので、CSS メディアクエリにも、
+初期化時に `matchMedia` を読む JS にも、実利用者が OS で reduce を
+設定したときと同じ条件で見える。
+
+**効く範囲は狭い。** 上の静止機構が `getAnimations()` に載るもの
+（CSS animation / transition / Web Animations）を実装の行儀に依存せず
+止めるのに対し、reduced-motion が動きを止められるのは
+**canvas / `requestAnimationFrame` など JS が毎フレーム描き直す実装のうち、
+`prefers-reduced-motion` を自分で尊重するものだけ**である。
+
+- **効くもの**: rAF / canvas 駆動で、かつメディアクエリ（CSS）や
+  `matchMedia`（JS）を見て動きを抑える実装
+- **効かないもの**:
+  - メディアクエリを見ない rAF / canvas 実装（尊重しない実装に
+    ブラウザ側から強制する手段は無い）
+  - アニメーション画像（GIF / APNG）・`<video>`・SMIL——ブラウザ自身が
+    進めるもので、そもそも「行儀」の概念が無い
+  - `getAnimations()` に載るアニメーション——こちらは reduce の尊重に
+    関係なく上の静止機構が既に止めている
+
+つまり**これを入れても flaky が消えるわけではない**。静止機構が原理的に
+届かない領域（rAF / canvas）のうち、行儀の良い実装との狭い交差にだけ効く
+追加の手である——自前のコンポーネントに `prefers-reduced-motion` の尊重を
+規約として課せる場合に最も価値がある。
+
+**既定が OFF なのは、有効化すると撮る絵が変わるから**である。reduce を
+尊重する story の絵が変わり、**そのプロジェクトの baseline が一度
+入れ替わる**——有効化後の最初のビルドで出る差分をレビューして承認すること
+（静止機構の「移行手順」と同じ一度きりの差分）。
+
+**fail-closed である**: 有効にした project では、撮影直前に「エミュレーションが
+実際に効いているか」を CSS カスケード（constructed stylesheet の
+`@media` プローブ）と `matchMedia` の両面で実測し、**効いていると確かめられ
+なければその story は撮らずにエラーにする**（`reduced-motion emulation was
+requested but could not be verified as applied`）。`matchMedia` を reduce を
+返さないモックへ差し替えるページ（polyfill やテストダブルの事故）はここで
+落ちる。ページが両方の観測を偽装する場合は原理的に検出できない——脅威モデルが
+事故であり悪意でないのは静止機構の検証と同じである。失敗経路の全数は
+`crates/service/src/render/browser.rs` の「層ごとの失敗経路」を参照。
+
 #### `vrt` CLI で 1 コマンド（推奨）
 
 同梱の CLI（`apps/backend/crates/cli`、バイナリ名 `vrt`）を使うと、ビルド作成 →
diff --git a/apps/backend/crates/entity/src/_generated/projects.rs b/apps/backend/crates/entity/src/_generated/projects.rs
index a27d5be..0327c1b 100644
--- a/apps/backend/crates/entity/src/_generated/projects.rs
+++ b/apps/backend/crates/entity/src/_generated/projects.rs
@@ -27,6 +27,10 @@ pub struct Model {
     /// プロジェクトごとに保持する完了ビルド数の上限。NULL は無制限（既定）。
     /// 超過した古い完了ビルドは自動削除される（現行 baseline の参照元は残す）。
     pub build_retention_limit: Option<i32>,
+    /// storybook モードの撮影時に `prefers-reduced-motion: reduce` を
+    /// エミュレートするか。既定 false——有効にすると撮る絵が変わり、
+    /// baseline が一度入れ替わるため。
+    pub emulate_reduced_motion: bool,
     /// GitHub App のインストール ID。Phase 6 で `github_installations` への FK にする。
     pub github_installation_id: Option<i64>,
     #[sea_orm(column_type = "Text", nullable)]
diff --git a/apps/backend/crates/handler/src/handlers/projects.rs b/apps/backend/crates/handler/src/handlers/projects.rs
index e9d1512..4f91d6c 100644
--- a/apps/backend/crates/handler/src/handlers/projects.rs
+++ b/apps/backend/crates/handler/src/handlers/projects.rs
@@ -147,7 +147,9 @@ pub async fn get_project(
     tag = "Projects",
     summary = "プロジェクト設定を更新",
     description = "admin 以上が必要。`diff_threshold` / `diff_ratio_fail` は 0.0〜1.0、\
-                   `viewport_width` / `viewport_height` は 64〜10000（storybook モードのレンダリング用）。",
+                   `viewport_width` / `viewport_height` は 64〜10000（storybook モードのレンダリング用）。\
+                   `emulate_reduced_motion` は撮影時に `prefers-reduced-motion: reduce` を\
+                   エミュレートする（既定 false。有効化すると baseline が一度入れ替わる）。",
     params(("project_id" = Uuid, Path, description = "プロジェクトID")),
     request_body = UpdateProjectRequest,
     responses(
@@ -178,6 +180,7 @@ pub async fn update_project(
             viewport_width: payload.viewport_width,
             viewport_height: payload.viewport_height,
             build_retention_limit: payload.build_retention_limit,
+            emulate_reduced_motion: payload.emulate_reduced_motion,
         },
     )
     .await?;
diff --git a/apps/backend/crates/job/src/render_build.rs b/apps/backend/crates/job/src/render_build.rs
index 2d1179f..ef55bd5 100644
--- a/apps/backend/crates/job/src/render_build.rs
+++ b/apps/backend/crates/job/src/render_build.rs
@@ -240,11 +240,7 @@ async fn run(
     let server = StaticServer::start(&bundle.root).await?;
     let base_url = server.base_url();
 
-    let options = RenderOptions::new(
-        chromium_path,
-        project.viewport_width.max(1) as u32,
-        project.viewport_height.max(1) as u32,
-    );
+    let options = render_options_for_project(chromium_path, &project);
     let renderer = StoryRenderer::launch(options).await?;
 
     // ブラウザは成功・失敗どちらでも必ず閉じる（`?` で早期 return しない）。
@@ -279,6 +275,26 @@ async fn run(
     Ok(())
 }
 
+/// project 設定から [`RenderOptions`] を組む。
+///
+/// ここが project 列とレンダラをつなぐ**唯一の配線**である。
+/// `emulate_reduced_motion` の「設定が有効な project なのに呼び出し自体が
+/// 漏れる」経路は実行時には検知できない（検知器の不在そのものがこの失敗）
+/// ため、配線を 1 箇所に寄せて単体テストで固定する
+/// （`service::render::browser` モジュール先頭の失敗経路表を参照）。
+fn render_options_for_project(
+    chromium_path: String,
+    project: &entity::projects::Model,
+) -> RenderOptions {
+    let mut options = RenderOptions::new(
+        chromium_path,
+        project.viewport_width.max(1) as u32,
+        project.viewport_height.max(1) as u32,
+    );
+    options.emulate_reduced_motion = project.emulate_reduced_motion;
+    options
+}
+
 /// ストーリー 1 件をどう処理するか。
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 enum StoryAction {
@@ -624,6 +640,44 @@ mod tests {
         assert_eq!(truncate(&"x".repeat(50), 10).len(), 10);
     }
 
+    fn project_fixture(emulate_reduced_motion: bool) -> entity::projects::Model {
+        let now = chrono::Utc::now().fixed_offset();
+        entity::projects::Model {
+            id: Uuid::new_v4(),
+            tenant_id: Uuid::new_v4(),
+            name: "p".into(),
+            slug: "p".into(),
+            default_branch: "main".into(),
+            diff_threshold: 0.1,
+            diff_ratio_fail: 0.0,
+            viewport_width: 1280,
+            viewport_height: 720,
+            build_retention_limit: None,
+            emulate_reduced_motion,
+            github_installation_id: None,
+            github_repo: None,
+            created_at: now,
+            updated_at: now,
+        }
+    }
+
+    /// **project 列 `emulate_reduced_motion` がレンダラのオプションへ届く**こと。
+    ///
+    /// 「設定が有効な project なのに呼び出し自体が漏れる」経路は実行時には
+    /// 検知できないため、唯一の配線であるこの関数をテストで固定する。
+    /// 両方向を見る——ON が届くことだけでなく、OFF の project が ON に
+    /// 化けないことも（既定 OFF の契約）。
+    #[test]
+    fn reduced_motion_setting_reaches_the_render_options() {
+        let on = render_options_for_project("chromium".into(), &project_fixture(true));
+        assert!(on.emulate_reduced_motion);
+        let off = render_options_for_project("chromium".into(), &project_fixture(false));
+        assert!(!off.emulate_reduced_motion);
+        // 既存の配線が壊れていないこと（viewport・freeze 既定）。
+        assert_eq!((on.viewport_width, on.viewport_height), (1280, 720));
+        assert!(on.freeze_before_capture);
+    }
+
     #[test]
     fn queue_name_is_stable() {
         // ワーカー名は `{queue}-worker-{uuid}` で組み立てられる（server.rs 参照）。
diff --git a/apps/backend/crates/payload/src/projects.rs b/apps/backend/crates/payload/src/projects.rs
index aedd5b2..ffc9b97 100644
--- a/apps/backend/crates/payload/src/projects.rs
+++ b/apps/backend/crates/payload/src/projects.rs
@@ -41,6 +41,10 @@ pub struct ProjectResponse {
     /// 保持する完了ビルド数の上限。null は無制限。
     #[schema(nullable)]
     pub build_retention_limit: Option<i32>,
+    /// storybook モードの撮影時に `prefers-reduced-motion: reduce` を
+    /// エミュレートするか。既定 false。有効化すると撮る絵が変わり、
+    /// baseline が一度入れ替わる。
+    pub emulate_reduced_motion: bool,
     #[schema(nullable)]
     pub github_installation_id: Option<i64>,
     #[schema(nullable)]
@@ -64,6 +68,7 @@ impl From<projects::Model> for ProjectResponse {
             viewport_width: model.viewport_width,
             viewport_height: model.viewport_height,
             build_retention_limit: model.build_retention_limit,
+            emulate_reduced_motion: model.emulate_reduced_motion,
             github_installation_id: model.github_installation_id,
             github_repo: model.github_repo,
             created_at: model.created_at.with_timezone(&Utc),
@@ -104,4 +109,9 @@ pub struct UpdateProjectRequest {
     #[schema(nullable, value_type = Option<i32>)]
     #[serde(default, deserialize_with = "double_option")]
     pub build_retention_limit: Option<Option<i32>>,
+    /// storybook モードの撮影時に `prefers-reduced-motion: reduce` を
+    /// エミュレートするか。省略すると現在値を据え置く。既定は false。
+    /// **有効化すると撮る絵が変わり、そのプロジェクトの baseline が
+    /// 一度入れ替わる**——最初のビルドで差分をレビューして承認すること。
+    pub emulate_reduced_motion: Option<bool>,
 }
diff --git a/apps/backend/crates/service/src/projects.rs b/apps/backend/crates/service/src/projects.rs
index 6dda8fa..41ff3c8 100644
--- a/apps/backend/crates/service/src/projects.rs
+++ b/apps/backend/crates/service/src/projects.rs
@@ -68,6 +68,11 @@ pub struct ProjectSettings {
     /// ビルド保持数の上限。外側 `None` は据え置き、`Some(None)` は無制限（NULL）に設定、
     /// `Some(Some(n))` は上限を `n` に設定する。
     pub build_retention_limit: Option<Option<i32>>,
+    /// storybook モードの撮影時に `prefers-reduced-motion: reduce` を
+    /// エミュレートするか。既定 OFF（[`create_project`]）——有効にすると
+    /// 撮る絵が変わり、そのプロジェクトの baseline が一度入れ替わるため、
+    /// 利用者が明示的に選んだときにだけ変える。
+    pub emulate_reduced_motion: Option<bool>,
 }
 
 /// テナント内のプロジェクト一覧（作成順）。
@@ -159,6 +164,7 @@ pub async fn create_project<C: ConnectionTrait>(
         viewport_width: Set(DEFAULT_VIEWPORT_WIDTH),
         viewport_height: Set(DEFAULT_VIEWPORT_HEIGHT),
         build_retention_limit: Set(None),
+        emulate_reduced_motion: Set(false),
         github_installation_id: Set(None),
         github_repo: Set(None),
         created_at: Set(now),
@@ -212,6 +218,9 @@ pub async fn update_project<C: ConnectionTrait>(
     if let Some(build_retention_limit) = settings.build_retention_limit {
         active.build_retention_limit = Set(build_retention_limit);
     }
+    if let Some(emulate_reduced_motion) = settings.emulate_reduced_motion {
+        active.emulate_reduced_motion = Set(emulate_reduced_motion);
+    }
     active.updated_at = Set(Utc::now().fixed_offset());
     Ok(active.update(db).await?)
 }
diff --git a/apps/backend/crates/service/src/render/browser.rs b/apps/backend/crates/service/src/render/browser.rs
index a9d567d..84e3ffd 100644
--- a/apps/backend/crates/service/src/render/browser.rs
+++ b/apps/backend/crates/service/src/render/browser.rs
@@ -6,6 +6,9 @@
 //!    ループバック限定なので外部からは触れない
 //! 2. [`StoryRenderer`] が chromiumoxide で Chromium を起動し、
 //!    `http://127.0.0.1:{port}/iframe.html?id={story_id}&viewMode=story` を開く
+//!    （project 設定で有効な場合は、ナビゲーション前に
+//!    `Emulation.setEmulatedMedia` で `prefers-reduced-motion: reduce` を
+//!    エミュレートし、撮影直前に適用を実測する——効いていなければ撮らない）
 //! 3. Storybook 自身の描画完了シグナル（アドオンチャンネルの `storyRendered`）を待ち、
 //!    短い settle 待ちのあと [`FREEZE_SCRIPT`] でキャレットとアニメーションを
 //!    決定的に静止させてから、ビューポートを PNG で撮る
@@ -139,6 +142,7 @@ use std::path::{Path, PathBuf};
 use std::time::Duration;
 
 use chromiumoxide::browser::{Browser, BrowserConfig};
+use chromiumoxide::cdp::browser_protocol::emulation::{MediaFeature, SetEmulatedMediaParams};
 use chromiumoxide::cdp::browser_protocol::page::CaptureScreenshotFormat;
 use chromiumoxide::handler::viewport::Viewport;
 use chromiumoxide::page::ScreenshotParams;
@@ -633,6 +637,61 @@ const FREEZE_SCRIPT: &str = r#"
 })()
 "#;
 
+/// reduced-motion エミュレーションが実際に効いているかを撮影直前に実測するプローブ。
+///
+/// `Emulation.setEmulatedMedia` の応答が成功でも、「メディアクエリが実際に
+/// 変わった」ことの証明にはならない——できたことは効いたことの証明ではない。
+/// 二輪で実測する:
+///
+/// 1. **CSS 輪**: constructed stylesheet の `@media (prefers-reduced-motion:
+///    reduce)` 内でだけ立つカスタムプロパティ（`--vrt-reduced-motion`）を
+///    `getComputedStyle` で読む。CSS カスケードの実評価であり、
+///    `matchMedia` 関数オブジェクトには依存しない
+/// 2. **matchMedia 輪**: `window.matchMedia('(prefers-reduced-motion:
+///    reduce)').matches === true`。JS 実装が実際に参照する観測面であり、
+///    reduce を返さない壊れた/モックされた `matchMedia`（polyfill・テスト
+///    ダブルの事故）をここで検出する——CSS 輪だけでは「CSS には効いたが
+///    JS には見えない」ページを素通ししてしまう
+///
+/// どちらか一方でも不成立なら `ok: false`（fail-closed）。プローブ自体の
+/// throw も `errors` → `ok: false` で、集めた診断は判定にも表示にも使う。
+/// 両輪とも偽装するページは原理的に検出できない（モジュール doc の表を参照）。
+const REDUCED_MOTION_PROBE: &str = r#"
+(() => {
+  const errors = [];
+  let cssApplied = false;
+  let mmMatches = false;
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(
+      '@media (prefers-reduced-motion: reduce) { :root { --vrt-reduced-motion: on; } }'
+    );
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    cssApplied =
+      getComputedStyle(document.documentElement)
+        .getPropertyValue('--vrt-reduced-motion')
+        .trim() === 'on';
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s !== sheet);
+    if (!cssApplied) {
+      errors.push('the reduce media query did not apply to the CSS cascade');
+    }
+  } catch (e) {
+    errors.push('css probe: ' + String(e));
+  }
+  try {
+    mmMatches = window.matchMedia('(prefers-reduced-motion: reduce)').matches === true;
+    if (!mmMatches) {
+      errors.push(
+        'matchMedia does not report reduce (the emulation was not applied, or matchMedia is broken or mocked)'
+      );
+    }
+  } catch (e) {
+    errors.push('matchMedia probe: ' + String(e));
+  }
+  return JSON.stringify({ ok: cssApplied && mmMatches, errors: errors });
+})()
+"#;
+
 #[derive(Debug, Error)]
 pub enum RenderError {
     #[error("failed to launch chromium at {path}: {source}")]
@@ -723,6 +782,13 @@ pub struct RenderOptions {
     /// 検証する positive control のためにある。本番経路（`render_build`）は
     /// [`RenderOptions::new`] を通るので常に `true`。
     pub freeze_before_capture: bool,
+    /// `prefers-reduced-motion: reduce` をエミュレートして撮るか。
+    /// 既定は `false`（project 設定の既定 OFF と一致）。
+    ///
+    /// `true` のときはナビゲーション前に `Emulation.setEmulatedMedia` を
+    /// 一度設定し、撮影直前に [`REDUCED_MOTION_PROBE`] で「実際に効いている」
+    /// ことを実測する。効いていると確かめられなければ撮らない（fail-closed）。
+    pub emulate_reduced_motion: bool,
 }
 
 impl RenderOptions {
@@ -737,6 +803,7 @@ impl RenderOptions {
             viewport_height,
             story_timeout: DEFAULT_STORY_TIMEOUT,
             freeze_before_capture: true,
+            emulate_reduced_motion: false,
         }
     }
 }
@@ -913,6 +980,29 @@ impl StoryRenderer {
             })?;
 
         let result = async {
+            // reduced-motion のエミュレーションは**ナビゲーション前**に一度
+            // 設定する。撮影直前に設定すると、初期化時に一度だけ
+            // `matchMedia` を読む実装（この層の主対象である rAF / canvas
+            // 実装の最頻形）には見えない——OS で reduce を設定した実利用者は
+            // ページ読み込みの最初から reduce で描画されるのであり、それと
+            // 同じ条件で撮る。`Emulation.setEmulatedMedia` はセッション状態
+            // なのでナビゲーションを跨いで効き続け、「実際に効いているか」は
+            // 撮影直前に [`REDUCED_MOTION_PROBE`] で実測する（fail-closed）。
+            // story のスクリプトを待たない一往復の CDP コマンドなので、
+            // 失敗は `new_page` と同じ環境分類（無応答は chromiumoxide の
+            // request timeout（既定 30 秒）が拾う——モジュール doc の表を参照）。
+            if self.options.emulate_reduced_motion {
+                page.execute(
+                    SetEmulatedMediaParams::builder()
+                        .feature(MediaFeature::new("prefers-reduced-motion", "reduce"))
+                        .build(),
+                )
+                .await
+                .map_err(|source| RenderError::Cdp {
+                    story_id: story_id.to_string(),
+                    source,
+                })?;
+            }
             page.evaluate_on_new_document(READY_HOOK_SCRIPT)
                 .await
                 .map_err(|source| RenderError::Cdp {
@@ -986,6 +1076,44 @@ impl StoryRenderer {
 
         tokio::time::sleep(SETTLE_DELAY).await;
 
+        // reduced-motion を要求した project では、撮影直前に「実際に効いて
+        // いる」ことを実測する。setEmulatedMedia の応答が成功でも効いた
+        // 証明にはならず、「reduce を要求したのに適用されなかった」が
+        // 黙って通れば、静止させたと信じたまま動く絵を撮る（fail-closed）。
+        // evaluate の CDP エラーは READY probe / FREEZE evaluate と同じ扱いで
+        // deadline までリトライし、期限で story 分類の Timeout に倒す。
+        if self.options.emulate_reduced_motion {
+            let probe_result = loop {
+                let remaining = deadline.saturating_duration_since(std::time::Instant::now());
+                match tokio::time::timeout(remaining, page.evaluate(REDUCED_MOTION_PROBE)).await {
+                    Ok(Ok(result)) => break result,
+                    Err(_) => {
+                        return Err(RenderError::Timeout {
+                            story_id: story_id.to_string(),
+                            timeout: self.options.story_timeout,
+                            phase: "the reduced-motion verification never returned a verdict",
+                        });
+                    }
+                    Ok(Err(e)) => {
+                        tracing::trace!(
+                            %story_id, error = %e,
+                            "reduced-motion probe evaluate failed; retrying"
+                        );
+                        if std::time::Instant::now() + POLL_INTERVAL >= deadline {
+                            return Err(RenderError::Timeout {
+                                story_id: story_id.to_string(),
+                                timeout: self.options.story_timeout,
+                                phase: "the reduced-motion verification evaluate kept \
+                                 failing until the story deadline",
+                            });
+                        }
+                        tokio::time::sleep(POLL_INTERVAL).await;
+                    }
+                }
+            };
+            reduced_motion_verdict(probe_result.value(), story_id)?;
+        }
+
         // 撮影直前にキャレットとアニメーションを決定的な座標へ固定する。
         // 静止に失敗したまま撮ると flaky な絵が baseline に混ざるので、
         // 黙って続行せず失敗として返す（fail-closed）。
@@ -1163,6 +1291,64 @@ fn freeze_verdict(value: Option<&serde_json::Value>, story_id: &str) -> Result<(
     }
 }
 
+/// [`REDUCED_MOTION_PROBE`] の返り値を検分し、撮影へ進んでよいか判定する。
+///
+/// [`freeze_verdict`] と同じ受理条件——`ok` が `true` であると確かめられた
+/// 場合にだけ `Ok(())` を返し、それ以外はすべて失敗（fail-closed）:
+///
+/// - `ok: false` — **エミュレーションが効いていると確かめられなかった**。
+///   `errors` にどちらの輪（CSS / matchMedia）が不成立だったかが載る
+/// - 値が文字列でない／JSON として読めない／`ok` が無い・bool でない —
+///   **検証結果を解析できなかった**。効いているかどうか自体が不明
+///
+/// どちらも既存の freeze 失敗と同じ [`RenderError::Story`] 経路を使う
+/// （story 単位に隔離され、残りの story は撮り続けられる）。
+fn reduced_motion_verdict(
+    value: Option<&serde_json::Value>,
+    story_id: &str,
+) -> Result<(), RenderError> {
+    let unparseable = |detail: String| RenderError::Story {
+        story_id: story_id.to_string(),
+        message: format!("reduced-motion verification result was unparseable: {detail}"),
+    };
+    let Some(raw) = value.and_then(|v| v.as_str()) else {
+        return Err(unparseable(format!(
+            "expected a JSON string, got {value:?}"
+        )));
+    };
+    let parsed = serde_json::from_str::<serde_json::Value>(raw)
+        .map_err(|e| unparseable(format!("{e} (raw: {raw})")))?;
+    match parsed.get("ok").and_then(|v| v.as_bool()) {
+        // 効いていると確かめられた。撮影へ進む。`ok` 以外のキーは検査しない
+        // （将来プローブが返すものを増やしても正当な応答を弾かない）。
+        Some(true) => Ok(()),
+        Some(false) => {
+            let errors_note = parsed
+                .get("errors")
+                .and_then(|v| v.as_array())
+                .map(|arr| {
+                    let joined = arr
+                        .iter()
+                        .filter_map(|v| v.as_str())
+                        .collect::<Vec<_>>()
+                        .join("; ");
+                    format!(" (errors: {joined})")
+                })
+                .unwrap_or_default();
+            Err(RenderError::Story {
+                story_id: story_id.to_string(),
+                message: format!(
+                    "reduced-motion emulation was requested but could not be \
+                     verified as applied{errors_note}"
+                ),
+            })
+        }
+        None => Err(unparseable(format!(
+            "missing or non-boolean `ok` key (raw: {raw})"
+        ))),
+    }
+}
+
 /// 起動失敗が一時的（リトライで直りうる）かを判定する。
 ///
 /// ブラウザプロセスの立ち上げそのものがこけた系
@@ -4091,6 +4277,259 @@ mod tests {
         renderer.close().await;
     }
 
+    /// reduced-motion を尊重して見た目が変わるバンドル。エミュレーション検証用。
+    ///
+    /// - `demo-rm--box` : 上半分は **CSS メディアクエリ**で色が変わる
+    ///   （通常 赤 / reduce 青）。下半分は **JS が描画時に一度だけ
+    ///   `matchMedia` を読んで**色を決める（通常 黄 / reduce 緑）。
+    ///   JS 側はエミュレーションが**ナビゲーション前に**効いていることの
+    ///   証明になる——撮影直前に設定したのでは、描画時に読んだ値は
+    ///   通常のままで黄が出る
+    /// - `demo-rm--mocked` : `window.matchMedia` を「常に matches: false」の
+    ///   モックへ差し替えるページ（polyfill / テストダブルの事故を模す）。
+    ///   エミュレーション有効時は検証の matchMedia 輪が不成立になり、
+    ///   fail-closed で落ちるべき対象
+    fn write_reduced_motion_bundle(root: &Path) {
+        write_story_html(
+            root,
+            r#"  html,body{margin:0;padding:0;background:#fff}
+  .css-box { width:100%; height:50vh; background:#ff0000; }
+  @media (prefers-reduced-motion: reduce) { .css-box { background:#0000ff; } }"#,
+            "",
+            r#"      var root = document.getElementById('storybook-root');
+      if (id === 'demo-rm--mocked') {
+        window.matchMedia = function () {
+          return { matches: false, media: '',
+                   addEventListener: function () {}, removeEventListener: function () {} };
+        };
+      }
+      var cssBox = document.createElement('div');
+      cssBox.className = 'css-box';
+      root.appendChild(cssBox);
+      var jsBox = document.createElement('div');
+      jsBox.style.width = '100%';
+      jsBox.style.height = '50vh';
+      jsBox.style.background =
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches
+          ? '#00ff00' : '#ffff00';
+      root.appendChild(jsBox);
+      channel.emit('storyRendered', id);"#,
+        );
+    }
+
+    /// `ok === true` と確かめられたときだけ成功。それ以外——`ok: false`・
+    /// 解析不能——はすべて失敗（fail-closed）。[`freeze_verdict`] と同じ
+    /// 受理条件を reduced-motion 検証にも要求する。
+    ///
+    /// 証明する: `reduced_motion_verdict` の受理条件のみ。証明しない:
+    /// 実ブラウザでプローブがこの形の JSON を返すこと（実ブラウザ系が担う）。
+    #[test]
+    fn reduced_motion_verdict_accepts_only_a_verified_ok_true() {
+        let json = |raw: &str| serde_json::Value::String(raw.to_string());
+
+        assert!(reduced_motion_verdict(Some(&json(r#"{"ok":true}"#)), "s").is_ok());
+        // 将来プローブの戻り値を拡張しても ok:true なら通る。
+        assert!(
+            reduced_motion_verdict(Some(&json(r#"{"ok":true,"errors":[],"extra":1}"#)), "s")
+                .is_ok()
+        );
+
+        // ok:false は「効いていると確かめられなかった」。errors が原因ごと載る。
+        let message = reduced_motion_verdict(
+            Some(&json(
+                r#"{"ok":false,"errors":["matchMedia does not report reduce"]}"#,
+            )),
+            "s",
+        )
+        .expect_err("ok:false must fail")
+        .to_string();
+        assert!(
+            message.contains("could not be verified")
+                && message.contains("matchMedia does not report reduce"),
+            "the failure must carry the probe's diagnostics, got {message:?}"
+        );
+
+        // 解析不能はすべて「効いているか不明」の失敗。成功へ倒さない。
+        let unparseable: Vec<(&str, Option<serde_json::Value>)> = vec![
+            ("evaluate returned no value", None),
+            ("non-string value", Some(serde_json::json!(42))),
+            ("non-JSON string", Some(json("not json"))),
+            ("missing ok key", Some(json(r#"{"errors":[]}"#))),
+            ("non-boolean ok", Some(json(r#"{"ok":"true"}"#))),
+        ];
+        for (label, value) in &unparseable {
+            let message = reduced_motion_verdict(value.as_ref(), "s")
+                .expect_err(&format!("{label}: must fail"))
+                .to_string();
+            assert!(
+                message.contains("unparseable"),
+                "{label}: the error must say the result could not be parsed, got {message:?}"
+            );
+        }
+    }
+
+    /// **positive control**: reduced-motion エミュレーションが絵を実際に
+    /// 変えること、そして決定的であること。
+    ///
+    /// - OFF: CSS 輪は赤・JS 輪は黄（fixture が動いていることの対照——
+    ///   ここで色が出なければ、ON の検証は何も証明しない）
+    /// - ON: CSS 輪は青（メディアクエリが CSS カスケードに効いた）・
+    ///   JS 輪は緑（**描画時に一度だけ読む** `matchMedia` にも見えた =
+    ///   ナビゲーション前の適用が効いている）
+    /// - ON の二回撮りはバイト一致（決定性）・ON と OFF の絵は異なる
+    ///
+    /// 証明する: エミュレーションの適用・検証・配線が経路全体として効くこと
+    /// （「設定が有効なのに呼び出しが漏れる」経路をこのテストが貫通して固定）。
+    /// 証明しない: 適用に失敗したとき落ちること（下の mocked テストが担う）。
+    #[tokio::test(flavor = "multi_thread")]
+    async fn reduced_motion_emulation_changes_the_picture_and_is_deterministic() {
+        let Some(chromium) = discover_chromium() else {
+            eprintln!(
+                "SKIP reduced_motion_emulation_changes_the_picture_and_is_deterministic: \
+                 no chromium"
+            );
+            return;
+        };
+        let _guard = BROWSER_LOCK.lock().await;
+
+        let dir = tempfile::tempdir().expect("tempdir");
+        write_reduced_motion_bundle(dir.path());
+        let server = StaticServer::start(dir.path()).await.expect("start server");
+
+        let mut options = RenderOptions::new(chromium, 320, 240);
+        options.story_timeout = Duration::from_secs(10);
+
+        // OFF（既定）: 通常の絵。fixture が本当に分岐を描いていることの対照。
+        let renderer = StoryRenderer::launch(options.clone())
+            .await
+            .expect("launch (emulation off)");
+        let off = renderer
+            .render_story(&server.base_url(), "demo-rm--box")
+            .await
+            .expect("capture without emulation");
+        renderer.close().await;
+
+        let image = decode_png(&off);
+        let css = image.get_pixel(160, 60);
+        let js = image.get_pixel(160, 180);
+        assert_eq!(
+            (css[0], css[1], css[2]),
+            (255, 0, 0),
+            "without emulation the CSS branch must be the no-preference color"
+        );
+        assert_eq!(
+            (js[0], js[1], js[2]),
+            (255, 255, 0),
+            "without emulation the render-time matchMedia read must be no-preference"
+        );
+
+        // ON: reduce の絵。二回撮って決定性も確かめる。
+        options.emulate_reduced_motion = true;
+        let renderer = StoryRenderer::launch(options)
+            .await
+            .expect("launch (emulation on)");
+        let first = renderer
+            .render_story(&server.base_url(), "demo-rm--box")
+            .await
+            .expect("first capture with emulation");
+        let second = renderer
+            .render_story(&server.base_url(), "demo-rm--box")
+            .await
+            .expect("second capture with emulation");
+        renderer.close().await;
+
+        assert_eq!(
+            first, second,
+            "two captures under reduced-motion emulation must be byte-identical"
+        );
+        assert_ne!(
+            first, off,
+            "the emulated capture must differ from the non-emulated one — \
+             otherwise the emulation changed nothing and the switch is a no-op"
+        );
+
+        let image = decode_png(&first);
+        let css = image.get_pixel(160, 60);
+        let js = image.get_pixel(160, 180);
+        assert_eq!(
+            (css[0], css[1], css[2]),
+            (0, 0, 255),
+            "the reduce media query must reach the CSS cascade"
+        );
+        assert_eq!(
+            (js[0], js[1], js[2]),
+            (0, 255, 0),
+            "a render-time matchMedia read must see reduce — the emulation must be \
+             applied before navigation, not right before the capture"
+        );
+    }
+
+    /// **fail-closed**: エミュレーションを要求したのに「効いている」と
+    /// 確かめられないページでは、撮らずに失敗すること。
+    ///
+    /// fixture は `window.matchMedia` を「常に matches: false」のモックへ
+    /// 差し替える（polyfill / テストダブルの事故を模す）。CSS 輪は効いて
+    /// いるが matchMedia 輪が不成立——JS 実装には reduce が見えないまま
+    /// 撮ることになるので、fail-closed で落とす。**検証を入れる前の実装
+    /// （setEmulatedMedia を呼ぶだけ）はこのページを成功として撮っていた**
+    /// ——このテストが落ちなくなったら、検証が判定から外れている。
+    ///
+    /// 対照: エミュレーションを**要求していない** project では、同じページが
+    /// 成功する——モックされた matchMedia は「reduce を要求した」ときにだけ
+    /// 失敗になる（検証は要求の裏取りであり、ページの行儀の監査ではない）。
+    #[tokio::test(flavor = "multi_thread")]
+    async fn a_page_that_breaks_matchmedia_fails_instead_of_silently_capturing() {
+        let Some(chromium) = discover_chromium() else {
+            eprintln!(
+                "SKIP a_page_that_breaks_matchmedia_fails_instead_of_silently_capturing: \
+                 no chromium"
+            );
+            return;
+        };
+        let _guard = BROWSER_LOCK.lock().await;
+
+        let dir = tempfile::tempdir().expect("tempdir");
+        write_reduced_motion_bundle(dir.path());
+        let server = StaticServer::start(dir.path()).await.expect("start server");
+
+        let mut options = RenderOptions::new(chromium, 320, 240);
+        options.story_timeout = Duration::from_secs(10);
+        options.emulate_reduced_motion = true;
+        let renderer = StoryRenderer::launch(options.clone())
+            .await
+            .expect("launch (emulation on)");
+        let err = renderer
+            .render_story(&server.base_url(), "demo-rm--mocked")
+            .await
+            .expect_err(
+                "a page whose matchMedia cannot confirm the emulation must fail \
+                 instead of being captured",
+            );
+        renderer.close().await;
+
+        let message = err.to_string();
+        assert!(
+            message.contains("could not be verified") && message.contains("matchMedia"),
+            "the error must say the emulation could not be verified and name the \
+             failing probe, got {message:?}"
+        );
+        assert!(
+            matches!(err, RenderError::Story { .. }),
+            "the failure must be story-scoped so the remaining stories keep rendering"
+        );
+
+        // 対照: 要求していなければ同じページでも成功する。
+        options.emulate_reduced_motion = false;
+        let renderer = StoryRenderer::launch(options)
+            .await
+            .expect("launch (emulation off)");
+        renderer
+            .render_story(&server.base_url(), "demo-rm--mocked")
+            .await
+            .expect("without the request the mocked page is a legitimate story");
+        renderer.close().await;
+    }
+
     #[tokio::test]
     async fn static_server_serves_the_bundle_over_loopback() {
         let dir = tempfile::tempdir().expect("tempdir");
diff --git a/apps/backend/migration/src/lib.rs b/apps/backend/migration/src/lib.rs
index 35a5963..bc740ba 100644
--- a/apps/backend/migration/src/lib.rs
+++ b/apps/backend/migration/src/lib.rs
@@ -6,6 +6,7 @@ mod m20260730000000_build_retention_limit;
 mod m20260801000000_build_approval_evidence;
 mod m20260802000000_build_capture_plan;
 mod m20260803000000_content_hash_decode_skip;
+mod m20260811000000_reduced_motion;
 
 pub struct Migrator;
 
@@ -19,6 +20,7 @@ impl MigratorTrait for Migrator {
             Box::new(m20260801000000_build_approval_evidence::Migration),
             Box::new(m20260802000000_build_capture_plan::Migration),
             Box::new(m20260803000000_content_hash_decode_skip::Migration),
+            Box::new(m20260811000000_reduced_motion::Migration),
         ]
     }
 }
diff --git a/apps/backend/migration/src/m20260811000000_reduced_motion.rs b/apps/backend/migration/src/m20260811000000_reduced_motion.rs
new file mode 100644
index 0000000..14ed67e
--- /dev/null
+++ b/apps/backend/migration/src/m20260811000000_reduced_motion.rs
@@ -0,0 +1,29 @@
+use sea_orm_migration::prelude::*;
+
+#[derive(DeriveMigrationName)]
+pub struct Migration;
+
+#[async_trait::async_trait]
+impl MigrationTrait for Migration {
+    async fn up(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        // storybook モードの撮影時に `prefers-reduced-motion: reduce` を
+        // エミュレートするかのプロジェクト単位スイッチ。既定 OFF——有効にすると
+        // 撮る絵が変わり、そのプロジェクトの baseline が一度入れ替わるため、
+        // 利用者が明示的に選んだときにだけ変える。
+        manager
+            .get_connection()
+            .execute_unprepared(
+                "ALTER TABLE projects ADD COLUMN emulate_reduced_motion BOOLEAN NOT NULL DEFAULT FALSE",
+            )
+            .await?;
+        Ok(())
+    }
+
+    async fn down(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        manager
+            .get_connection()
+            .execute_unprepared("ALTER TABLE projects DROP COLUMN IF EXISTS emulate_reduced_motion")
+            .await?;
+        Ok(())
+    }
+}

From 6a1af81e948d7834539bffc4acd79700461cf124 Mon Sep 17 00:00:00 2001
From: sousuke0422 <sousuke20xx@gmail.com>
Date: Tue, 11 Aug 2026 02:34:20 +0900
Subject: [PATCH 3/5] chore(openapi): sync openapi.json with the
 emulate_reduced_motion field

Assisted-by: multi-agent-shogun-aki-tweak
---
 apps/frontend/openapi.json | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/openapi.json b/apps/frontend/openapi.json
index 3c1abf3..378f4cd 100644
--- a/apps/frontend/openapi.json
+++ b/apps/frontend/openapi.json
@@ -3953,7 +3953,7 @@
           "Projects"
         ],
         "summary": "プロジェクト設定を更新",
-        "description": "admin 以上が必要。`diff_threshold` / `diff_ratio_fail` は 0.0〜1.0、`viewport_width` / `viewport_height` は 64〜10000（storybook モードのレンダリング用）。",
+        "description": "admin 以上が必要。`diff_threshold` / `diff_ratio_fail` は 0.0〜1.0、`viewport_width` / `viewport_height` は 64〜10000（storybook モードのレンダリング用）。`emulate_reduced_motion` は撮影時に `prefers-reduced-motion: reduce` をエミュレートする（既定 false。有効化すると baseline が一度入れ替わる）。",
         "operationId": "update_project",
         "parameters": [
           {
@@ -6940,6 +6940,7 @@
           "diff_ratio_fail",
           "viewport_width",
           "viewport_height",
+          "emulate_reduced_motion",
           "created_at",
           "updated_at"
         ],
@@ -6969,6 +6970,10 @@
             "format": "double",
             "description": "1 ピクセルを差分と判定する色距離のしきい値（0.0〜1.0）。"
           },
+          "emulate_reduced_motion": {
+            "type": "boolean",
+            "description": "storybook モードの撮影時に `prefers-reduced-motion: reduce` を\nエミュレートするか。既定 false。有効化すると撮る絵が変わり、\nbaseline が一度入れ替わる。"
+          },
           "github_installation_id": {
             "type": [
               "integer",
@@ -7309,6 +7314,13 @@
             ],
             "format": "double"
           },
+          "emulate_reduced_motion": {
+            "type": [
+              "boolean",
+              "null"
+            ],
+            "description": "storybook モードの撮影時に `prefers-reduced-motion: reduce` を\nエミュレートするか。省略すると現在値を据え置く。既定は false。\n**有効化すると撮る絵が変わり、そのプロジェクトの baseline が\n一度入れ替わる**——最初のビルドで差分をレビューして承認すること。"
+          },
           "name": {
             "type": [
               "string",

From b0eecd07eaad381a0b75a9b350535db382e8e129 Mon Sep 17 00:00:00 2001
From: sousuke0422 <sousuke20xx@gmail.com>
Date: Thu, 13 Aug 2026 01:05:20 +0900
Subject: [PATCH 4/5] feat(frontend): expose emulate_reduced_motion in the
 project settings form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The switch existed everywhere but the one layer a user can reach: the
settings form offered diff_threshold / viewport / retention, so the flag
could only be set by hand-writing a PATCH. Add the control the same way
the other settings are wired (state, re-sync on project change, PATCH
body), and say what it costs before it is ticked — enabling it changes
the picture and replaces the baseline once, the same warning the README
carries.

The round trip is fixed by projects_integration: the default is off, a
PATCH turns it on, and omitting the field leaves it alone.

Assisted-by: multi-agent-shogun-aki-tweak
---
 README.md                                     |  3 ++-
 apps/backend/tests/projects_integration.rs    | 18 +++++++++++++
 .../t.$tenantSlug.p.$projectSlug.index.tsx    | 26 +++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ce1f6cd..fedb33c 100644
--- a/README.md
+++ b/README.md
@@ -695,7 +695,8 @@ CSP を `Page.setBypassCSP` で迂回すると本番と異なる絵を撮るこ
 エミュレートした状態で行う。ページのナビゲーション前に
 `Emulation.setEmulatedMedia` で一度設定するので、CSS メディアクエリにも、
 初期化時に `matchMedia` を読む JS にも、実利用者が OS で reduce を
-設定したときと同じ条件で見える。
+設定したときと同じ条件で見える。切り替えは Web UI のプロジェクト設定
+（Settings タブのチェックボックス）からも行える——同じ `PATCH` を叩く。
 
 **効く範囲は狭い。** 上の静止機構が `getAnimations()` に載るもの
 （CSS animation / transition / Web Animations）を実装の行儀に依存せず
diff --git a/apps/backend/tests/projects_integration.rs b/apps/backend/tests/projects_integration.rs
index be478a9..bd08d3e 100644
--- a/apps/backend/tests/projects_integration.rs
+++ b/apps/backend/tests/projects_integration.rs
@@ -59,6 +59,9 @@ async fn project_crud_within_tenant() {
     assert_eq!(body["default_branch"].as_str(), Some("main"));
     assert_eq!(body["diff_threshold"].as_f64(), Some(0.1));
     assert_eq!(body["diff_ratio_fail"].as_f64(), Some(0.0));
+    // reduced-motion エミュレーションは既定 OFF（有効化は baseline を一度
+    // 入れ替えるので、明示的に選ばせる——README の既定値の契約）。
+    assert_eq!(body["emulate_reduced_motion"].as_bool(), Some(false));
     assert!(body["github_installation_id"].is_null());
     assert!(body["github_repo"].is_null());
 
@@ -81,6 +84,7 @@ async fn project_crud_within_tenant() {
                 "default_branch": "develop",
                 "diff_threshold": 0.25,
                 "diff_ratio_fail": 0.5,
+                "emulate_reduced_motion": true,
             }),
         )
         .await;
@@ -90,6 +94,20 @@ async fn project_crud_within_tenant() {
     assert_eq!(body["default_branch"].as_str(), Some("develop"));
     assert_eq!(body["diff_threshold"].as_f64(), Some(0.25));
     assert_eq!(body["diff_ratio_fail"].as_f64(), Some(0.5));
+    // 設定画面のチェックボックスが辿る往復（PATCH → 応答）。ここが通らないと
+    // UI から有効化しても撮影側へは届かない。
+    assert_eq!(body["emulate_reduced_motion"].as_bool(), Some(true));
+
+    // フィールドを省略した更新は現在値を据え置く（bool でも「未指定＝据え置き」）。
+    let patch = app
+        .patch_json(
+            &format!("/v1/projects/{project_id}"),
+            json!({ "name": "Web App 2" }),
+        )
+        .await;
+    assert_eq!(patch.status(), StatusCode::OK);
+    let body: serde_json::Value = patch.json().await.expect("patch json");
+    assert_eq!(body["emulate_reduced_motion"].as_bool(), Some(true));
 
     // 削除（owner）
     assert_eq!(
diff --git a/apps/frontend/src/routes/_authed/t.$tenantSlug.p.$projectSlug.index.tsx b/apps/frontend/src/routes/_authed/t.$tenantSlug.p.$projectSlug.index.tsx
index 029902c..99ee09a 100644
--- a/apps/frontend/src/routes/_authed/t.$tenantSlug.p.$projectSlug.index.tsx
+++ b/apps/frontend/src/routes/_authed/t.$tenantSlug.p.$projectSlug.index.tsx
@@ -8,6 +8,7 @@ import { CommitLink } from "@/components/commit-link";
 import { BuildStatusBadge } from "@/components/status-badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -238,6 +239,7 @@ function ProjectSettings({ project, canEdit }: { project: Project; canEdit: bool
   const [retention, setRetention] = useState(
     project.build_retention_limit == null ? "" : String(project.build_retention_limit),
   );
+  const [reducedMotion, setReducedMotion] = useState(project.emulate_reduced_motion);
 
   useEffect(() => {
     setName(project.name);
@@ -249,6 +251,7 @@ function ProjectSettings({ project, canEdit }: { project: Project; canEdit: bool
     setRetention(
       project.build_retention_limit == null ? "" : String(project.build_retention_limit),
     );
+    setReducedMotion(project.emulate_reduced_motion);
   }, [project]);
 
   const update = $api.useMutation("patch", "/v1/projects/{project_id}", {
@@ -273,6 +276,7 @@ function ProjectSettings({ project, canEdit }: { project: Project; canEdit: bool
         viewport_width: Number(viewportWidth),
         viewport_height: Number(viewportHeight),
         build_retention_limit: retention.trim() === "" ? null : Number(retention),
+        emulate_reduced_motion: reducedMotion,
       },
     });
   }
@@ -376,6 +380,28 @@ function ProjectSettings({ project, canEdit }: { project: Project; canEdit: bool
               are deleted automatically; builds referenced by the current baseline are always kept.
             </p>
           </div>
+          <div className="space-y-2 sm:col-span-2">
+            {/* The cost has to be readable before the box is ticked: enabling this
+                replaces the baseline once. Same warning as the README section. */}
+            <label className="flex items-start gap-3 text-sm">
+              <Checkbox
+                className="mt-0.5"
+                checked={reducedMotion}
+                disabled={!canEdit}
+                onCheckedChange={(checked) => setReducedMotion(checked === true)}
+              />
+              <span>
+                <span className="font-medium">Emulate prefers-reduced-motion</span>
+                <span className="block text-xs text-muted-foreground">
+                  Renders storybook-mode captures as if the viewer had asked for reduced motion.
+                  Stories that respect the preference then look different, so the baseline is
+                  replaced once — review and approve the diff on the first build after you enable
+                  this. A story where the emulation cannot be verified fails instead of being
+                  captured.
+                </span>
+              </span>
+            </label>
+          </div>
           <div className="sm:col-span-2">
             <Button type="submit" disabled={!canEdit || update.isPending}>
               {update.isPending ? "Saving…" : "Save changes"}

From 7eaeb61ce009c9a7bee7c3b27df7053b5c66bc74 Mon Sep 17 00:00:00 2001
From: sousuke0422 <sousuke20xx@gmail.com>
Date: Thu, 13 Aug 2026 01:05:41 +0900
Subject: [PATCH 5/5] refactor(render): share one deadline-bound evaluate
 retry, keep the phases apart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The reduced-motion verification and the freeze carried the same thirty
lines twice: put the evaluate on the remainder of the story deadline,
retry a CDP error every POLL_INTERVAL because a navigating page can
destroy the execution context, and fall to a story-scoped Timeout when
the deadline arrives. Two copies of one mechanism is how the asymmetry
cmd_632 closed was born, so extract evaluate_with_deadline_retry and
leave the behaviour untouched.

What is NOT shared is the naming: each path passes its own phase strings
(REDUCED_MOTION_PHASES / FREEZE_PHASES), because the phase is the
diagnostic that points back at the failure-paths table. A shared string
would make the failing stage unrecoverable from the logs.

The helper takes the evaluate as a closure, so both of its branches —
never returned, retries exhausted — are fixed deterministically without
a browser, per path. The wiring (which constants each call site passes)
is fixed in the browser: the freeze tests now assert they are named by
the freeze stage, and a new fixture blocks the reduced-motion probe on
the API it touches first so the verification stage times out under its
own phase. Breaking one call site fails only that side's tests.

Assisted-by: multi-agent-shogun-aki-tweak
---
 .../crates/service/src/render/browser.rs      | 477 +++++++++++++++---
 1 file changed, 414 insertions(+), 63 deletions(-)

diff --git a/apps/backend/crates/service/src/render/browser.rs b/apps/backend/crates/service/src/render/browser.rs
index 84e3ffd..4d3f8e6 100644
--- a/apps/backend/crates/service/src/render/browser.rs
+++ b/apps/backend/crates/service/src/render/browser.rs
@@ -1083,34 +1083,14 @@ impl StoryRenderer {
         // evaluate の CDP エラーは READY probe / FREEZE evaluate と同じ扱いで
         // deadline までリトライし、期限で story 分類の Timeout に倒す。
         if self.options.emulate_reduced_motion {
-            let probe_result = loop {
-                let remaining = deadline.saturating_duration_since(std::time::Instant::now());
-                match tokio::time::timeout(remaining, page.evaluate(REDUCED_MOTION_PROBE)).await {
-                    Ok(Ok(result)) => break result,
-                    Err(_) => {
-                        return Err(RenderError::Timeout {
-                            story_id: story_id.to_string(),
-                            timeout: self.options.story_timeout,
-                            phase: "the reduced-motion verification never returned a verdict",
-                        });
-                    }
-                    Ok(Err(e)) => {
-                        tracing::trace!(
-                            %story_id, error = %e,
-                            "reduced-motion probe evaluate failed; retrying"
-                        );
-                        if std::time::Instant::now() + POLL_INTERVAL >= deadline {
-                            return Err(RenderError::Timeout {
-                                story_id: story_id.to_string(),
-                                timeout: self.options.story_timeout,
-                                phase: "the reduced-motion verification evaluate kept \
-                                 failing until the story deadline",
-                            });
-                        }
-                        tokio::time::sleep(POLL_INTERVAL).await;
-                    }
-                }
-            };
+            let probe_result = evaluate_with_deadline_retry(
+                || page.evaluate(REDUCED_MOTION_PROBE),
+                deadline,
+                story_id,
+                self.options.story_timeout,
+                REDUCED_MOTION_PHASES,
+            )
+            .await?;
             reduced_motion_verdict(probe_result.value(), story_id)?;
         }
 
@@ -1146,33 +1126,14 @@ impl StoryRenderer {
             // 同じ [`RenderError::Timeout`] で返す。本物の環境異常（ブラウザ死）
             // でも失うのは最大 1 story ぶんの予算で、次の story の `new_page` が
             // 環境分類の Cdp で中断する（分類表はモジュール先頭を参照）。
-            let freeze_result = loop {
-                let remaining = deadline.saturating_duration_since(std::time::Instant::now());
-                match tokio::time::timeout(remaining, page.evaluate(FREEZE_SCRIPT)).await {
-                    Ok(Ok(result)) => break result,
-                    Err(_) => {
-                        return Err(RenderError::Timeout {
-                            story_id: story_id.to_string(),
-                            timeout: self.options.story_timeout,
-                            phase: "the freeze did not finish: the page never yielded a verdict \
-                             (requestAnimationFrame may not be firing)",
-                        });
-                    }
-                    Ok(Err(e)) => {
-                        tracing::trace!(%story_id, error = %e, "freeze evaluate failed; retrying");
-                        if std::time::Instant::now() + POLL_INTERVAL >= deadline {
-                            return Err(RenderError::Timeout {
-                                story_id: story_id.to_string(),
-                                timeout: self.options.story_timeout,
-                                phase: "the freeze evaluate kept failing until the story \
-                                 deadline (the page may be navigating or reloading, or its \
-                                 pending callbacks were collected)",
-                            });
-                        }
-                        tokio::time::sleep(POLL_INTERVAL).await;
-                    }
-                }
-            };
+            let freeze_result = evaluate_with_deadline_retry(
+                || page.evaluate(FREEZE_SCRIPT),
+                deadline,
+                story_id,
+                self.options.story_timeout,
+                FREEZE_PHASES,
+            )
+            .await?;
 
             // FREEZE_SCRIPT は JSON 文字列を返す。`ok === true` と確かめられた
             // 場合にだけ撮影へ進む（fail-closed）。ok: false（静止に失敗）も、
@@ -1212,6 +1173,103 @@ impl Drop for StoryRenderer {
     }
 }
 
+/// [`evaluate_with_deadline_retry`] が失敗を名づけるための文字列一式。
+///
+/// **一本化するのは機構であって分類ではない**。待ち・リトライ・期限の手続きは
+/// 経路をまたいで一つで足りるが、「どの段で何が起きたか」は経路ごとに別の
+/// ままでなければならない——`phase` は README の failure paths 表から辿れる
+/// 診断であり、二経路が同じ文字列を返した時点でログから段を復元できなくなる。
+/// 経路ごとの定数（[`REDUCED_MOTION_PHASES`] / [`FREEZE_PHASES`]）に閉じ込め、
+/// 混入を `phase_strings_stay_distinct_per_path` が固定している。
+#[derive(Debug, Clone, Copy)]
+struct EvaluatePhases {
+    /// CDP エラーをリトライするときの trace ログ。
+    retry_log: &'static str,
+    /// deadline までに evaluate が返らなかったときの `phase`。
+    timeout: &'static str,
+    /// CDP エラーのリトライが deadline で尽きたときの `phase`。
+    retry_exhausted: &'static str,
+}
+
+/// reduced-motion 検証（[`REDUCED_MOTION_PROBE`]）の分類。
+const REDUCED_MOTION_PHASES: EvaluatePhases = EvaluatePhases {
+    retry_log: "reduced-motion probe evaluate failed; retrying",
+    timeout: "the reduced-motion verification never returned a verdict",
+    retry_exhausted: "the reduced-motion verification evaluate kept \
+                      failing until the story deadline",
+};
+
+/// 静止（[`FREEZE_SCRIPT`]）の分類。
+const FREEZE_PHASES: EvaluatePhases = EvaluatePhases {
+    retry_log: "freeze evaluate failed; retrying",
+    timeout: "the freeze did not finish: the page never yielded a verdict \
+              (requestAnimationFrame may not be firing)",
+    retry_exhausted: "the freeze evaluate kept failing until the story \
+                      deadline (the page may be navigating or reloading, or its \
+                      pending callbacks were collected)",
+};
+
+/// READY 待ちの後に走る evaluate の**機構**——共有 deadline への載せ方・
+/// CDP エラーのリトライ・期限での倒し方——を一つにまとめたもの。
+///
+/// reduced-motion 検証と静止は、抽出前は同型のループを別々に持っていた
+/// （約 30 行ずつ）。同型のまま二箇所にあるということは、片方だけ直せば
+/// 非対称が生まれるということでもある——freeze evaluate の CDP エラーを
+/// 即 [`RenderError::Cdp`]（環境分類＝ビルド即中断）へ倒していた非対称を
+/// cmd_632 で塞いだのが、まさにその型の事故だった。
+///
+/// 手続きは次の三段:
+///
+/// 1. `deadline` までの**残余**に evaluate を載せる（独立予算にしない。
+///    1 story の最悪所要が段の数だけ膨らみ、「story ごとの描画タイムアウト」
+///    という README の契約を裏切るため）
+/// 2. 残余を使い切って返らなければ [`EvaluatePhases::timeout`] の
+///    [`RenderError::Timeout`]
+/// 3. CDP エラーは撮影対象ページの内容に起因しうる（navigation / reload に
+///    よる実行コンテキスト破棄、pending promise の GC 回収——どちらも
+///    cmd_632 の実測）ので [`POLL_INTERVAL`] ごとにリトライし、次の一回が
+///    deadline を跨ぐなら [`EvaluatePhases::retry_exhausted`] の
+///    [`RenderError::Timeout`]（story 分類）で倒す
+///
+/// `evaluate` はクロージャで受ける。ページを直接持たないので、両分岐
+/// （期限切れ・リトライ切れ）をブラウザ無しで決定的に試験できる。
+async fn evaluate_with_deadline_retry<T, F, Fut>(
+    mut evaluate: F,
+    deadline: std::time::Instant,
+    story_id: &str,
+    story_timeout: Duration,
+    phases: EvaluatePhases,
+) -> Result<T, RenderError>
+where
+    F: FnMut() -> Fut,
+    Fut: std::future::Future<Output = Result<T, chromiumoxide::error::CdpError>>,
+{
+    loop {
+        let remaining = deadline.saturating_duration_since(std::time::Instant::now());
+        match tokio::time::timeout(remaining, evaluate()).await {
+            Ok(Ok(result)) => return Ok(result),
+            Err(_) => {
+                return Err(RenderError::Timeout {
+                    story_id: story_id.to_string(),
+                    timeout: story_timeout,
+                    phase: phases.timeout,
+                });
+            }
+            Ok(Err(e)) => {
+                tracing::trace!(%story_id, error = %e, "{}", phases.retry_log);
+                if std::time::Instant::now() + POLL_INTERVAL >= deadline {
+                    return Err(RenderError::Timeout {
+                        story_id: story_id.to_string(),
+                        timeout: story_timeout,
+                        phase: phases.retry_exhausted,
+                    });
+                }
+                tokio::time::sleep(POLL_INTERVAL).await;
+            }
+        }
+    }
+}
+
 /// [`FREEZE_SCRIPT`] の返り値を検分し、撮影へ進んでよいか判定する。
 ///
 /// `ok` が `true` であると確かめられた場合にだけ `Ok(())` を返す。
@@ -1889,6 +1947,212 @@ mod tests {
         }
     }
 
+    /// cmd_632 で実測した CDP エラー（-32000。navigation / reload が pending
+    /// evaluate の実行コンテキストを壊したときの文言）を模す。
+    fn cdp_context_destroyed() -> chromiumoxide::error::CdpError {
+        chromiumoxide::error::CdpError::ChromeMessage(
+            "Inspected target navigated or closed".to_string(),
+        )
+    }
+
+    /// **機構を一本化しても分類は経路ごとに別のまま**であること。
+    ///
+    /// [`evaluate_with_deadline_retry`] が共有するのは待ち・リトライ・期限
+    /// だけで、`phase` はログから「どの段で落ちたか」を復元するための診断
+    /// （README の failure paths 表への入口）である。二経路が同じ文字列を
+    /// 返した時点でその復元ができなくなる——抽出の副作用として最も起きやすい
+    /// 事故がこれなので、定数の段階で固定しておく。
+    ///
+    /// 証明する: 二経路の文字列が一つも重ならず、経路名と段が文言から読めること。
+    /// 証明しない: 呼び出し側がそれぞれ正しい定数を渡していること（実ブラウザ系の
+    /// `*_fails_story_scoped` と `*_never_returns_a_verdict` が担う）。
+    #[test]
+    fn phase_strings_stay_distinct_per_path() {
+        let reduced = [
+            REDUCED_MOTION_PHASES.retry_log,
+            REDUCED_MOTION_PHASES.timeout,
+            REDUCED_MOTION_PHASES.retry_exhausted,
+        ];
+        let freeze = [
+            FREEZE_PHASES.retry_log,
+            FREEZE_PHASES.timeout,
+            FREEZE_PHASES.retry_exhausted,
+        ];
+        for r in reduced {
+            for f in freeze {
+                assert_ne!(
+                    r, f,
+                    "the two paths must not share a diagnostic string — a shared \
+                     phase makes the failing stage unrecoverable from the logs"
+                );
+            }
+        }
+
+        // 経路の中でも「返らなかった」と「リトライが尽きた」は別の段である。
+        assert_ne!(
+            REDUCED_MOTION_PHASES.timeout, REDUCED_MOTION_PHASES.retry_exhausted,
+            "a timeout and an exhausted retry are different stages"
+        );
+        assert_ne!(
+            FREEZE_PHASES.timeout, FREEZE_PHASES.retry_exhausted,
+            "a timeout and an exhausted retry are different stages"
+        );
+
+        // どの経路の失敗かが文言そのものから読めること。
+        for phase in reduced {
+            assert!(
+                phase.contains("reduced-motion"),
+                "the reduced-motion path must name itself, got {phase:?}"
+            );
+        }
+        for phase in freeze {
+            assert!(
+                phase.contains("freeze"),
+                "the freeze path must name itself, got {phase:?}"
+            );
+        }
+    }
+
+    /// **リトライ切れ**が、経路自身の `retry_exhausted` を積んだ
+    /// [`RenderError::Timeout`] へ倒れること（両経路）。
+    ///
+    /// 期待値は定数を引かずに文字列リテラルで書く——定数を引くと、二経路の
+    /// 分類が入れ替わっても等式が保たれてしまい、この試験が何も検知しなく
+    /// なるためである。
+    ///
+    /// 証明する: 消えない CDP エラーが（即 [`RenderError::Cdp`] ではなく）
+    /// リトライされ、deadline で経路ごとの Timeout に倒れること。
+    /// 証明しない: 実ブラウザでその CDP エラーが実際に起きること
+    /// （`reloading_page_during_freeze_fails_story_scoped` 他が担う）。
+    #[tokio::test]
+    async fn evaluate_retry_exhaustion_falls_to_the_paths_own_phase() {
+        let cases: [(EvaluatePhases, &str); 2] = [
+            (
+                REDUCED_MOTION_PHASES,
+                "the reduced-motion verification evaluate kept failing until the story deadline",
+            ),
+            (
+                FREEZE_PHASES,
+                "the freeze evaluate kept failing until the story deadline (the page may be \
+                 navigating or reloading, or its pending callbacks were collected)",
+            ),
+        ];
+
+        for (phases, expected) in cases {
+            let attempts = std::cell::Cell::new(0usize);
+            let deadline = std::time::Instant::now() + Duration::from_millis(250);
+            let err = evaluate_with_deadline_retry::<(), _, _>(
+                || {
+                    attempts.set(attempts.get() + 1);
+                    std::future::ready(Err(cdp_context_destroyed()))
+                },
+                deadline,
+                "story-x",
+                Duration::from_secs(7),
+                phases,
+            )
+            .await
+            .expect_err("a CDP error that never clears must fail at the deadline");
+
+            assert!(
+                attempts.get() > 1,
+                "the mechanism must retry a CDP error instead of failing on the first \
+                 one, got {} attempt(s)",
+                attempts.get()
+            );
+            match err {
+                RenderError::Timeout {
+                    story_id,
+                    timeout,
+                    phase,
+                } => {
+                    assert_eq!(phase, expected, "the phase must name this path's stage");
+                    assert_eq!(timeout, Duration::from_secs(7));
+                    assert_eq!(story_id, "story-x");
+                }
+                other => panic!("an exhausted retry must be story-scoped Timeout, got {other:?}"),
+            }
+        }
+    }
+
+    /// **期限切れ**（evaluate がそもそも返らない）が、経路自身の `timeout` を
+    /// 積んだ [`RenderError::Timeout`] へ倒れること（両経路）。
+    ///
+    /// 期待値を文字列リテラルで書く理由は上の試験と同じ。
+    ///
+    /// 証明する: 返らない evaluate が deadline で打ち切られ、経路ごとの phase
+    /// で報告されること。証明しない: 実ページが返らなくなる条件
+    /// （`raf_suppressed_page_fails_within_the_story_timeout` 他が担う）。
+    #[tokio::test]
+    async fn evaluate_that_never_returns_falls_to_the_paths_own_timeout_phase() {
+        let cases: [(EvaluatePhases, &str); 2] = [
+            (
+                REDUCED_MOTION_PHASES,
+                "the reduced-motion verification never returned a verdict",
+            ),
+            (
+                FREEZE_PHASES,
+                "the freeze did not finish: the page never yielded a verdict \
+                 (requestAnimationFrame may not be firing)",
+            ),
+        ];
+
+        for (phases, expected) in cases {
+            let deadline = std::time::Instant::now() + Duration::from_millis(200);
+            let err = evaluate_with_deadline_retry(
+                std::future::pending::<Result<(), chromiumoxide::error::CdpError>>,
+                deadline,
+                "story-y",
+                Duration::from_secs(9),
+                phases,
+            )
+            .await
+            .expect_err("an evaluate that never returns must be cut at the deadline");
+
+            match err {
+                RenderError::Timeout {
+                    story_id,
+                    timeout,
+                    phase,
+                } => {
+                    assert_eq!(phase, expected, "the phase must name this path's stage");
+                    assert_eq!(timeout, Duration::from_secs(9));
+                    assert_eq!(story_id, "story-y");
+                }
+                other => panic!("a deadline overrun must be story-scoped Timeout, got {other:?}"),
+            }
+        }
+    }
+
+    /// リトライは**回復もする**こと——抽出で「一度でも失敗したら倒す」に
+    /// 変わっていないことの対照（この試験が無いと、上の二つは「常に失敗
+    /// させる実装」でも通ってしまう）。
+    #[tokio::test]
+    async fn evaluate_retries_until_the_error_clears() {
+        let attempts = std::cell::Cell::new(0usize);
+        let deadline = std::time::Instant::now() + Duration::from_secs(5);
+        let value = evaluate_with_deadline_retry(
+            || {
+                attempts.set(attempts.get() + 1);
+                let attempt = attempts.get();
+                std::future::ready(if attempt < 3 {
+                    Err(cdp_context_destroyed())
+                } else {
+                    Ok("verdict")
+                })
+            },
+            deadline,
+            "story-z",
+            Duration::from_secs(5),
+            FREEZE_PHASES,
+        )
+        .await
+        .expect("a transient CDP error must not be fatal");
+
+        assert_eq!(value, "verdict");
+        assert_eq!(attempts.get(), 3, "the first two failures must be retried");
+    }
+
     /// Chromium を実際に起動する煙テスト。実行ファイルが無ければスキップする。
     #[tokio::test(flavor = "multi_thread")]
     async fn renders_a_story_to_a_png_with_the_requested_viewport() {
@@ -3924,11 +4188,19 @@ mod tests {
         renderer.close().await;
 
         let err = result.expect_err("a page that reloads during the freeze must fail");
+        let RenderError::Timeout { phase, .. } = err else {
+            panic!(
+                "a story that destroys the freeze evaluate by navigating must be \
+                 classified story-scoped (Timeout), not as an infrastructure Cdp \
+                 error that aborts the whole build, got {err:?}"
+            );
+        };
+        // 機構は reduced-motion 検証と共有していても、名乗る段は freeze のまま
+        // であること（どちらの freeze phase で終わるかは最後の一回が pending の
+        // まま期限を迎えたかで変わるので、経路だけを固定する）。
         assert!(
-            matches!(err, RenderError::Timeout { .. }),
-            "a story that destroys the freeze evaluate by navigating must be \
-             classified story-scoped (Timeout), not as an infrastructure Cdp \
-             error that aborts the whole build, got {err:?}"
+            phase.contains("freeze") && !phase.contains("reduced-motion"),
+            "the failing stage must be reported as the freeze one, got {phase:?}"
         );
     }
 
@@ -4018,11 +4290,16 @@ mod tests {
         renderer.close().await;
 
         let err = result.expect_err("a page that discards rAF callbacks must fail");
+        let RenderError::Timeout { phase, .. } = err else {
+            panic!(
+                "a story whose freeze promise is garbage-collected must be \
+                 classified story-scoped (Timeout), not as an infrastructure Cdp \
+                 error that aborts the whole build, got {err:?}"
+            );
+        };
         assert!(
-            matches!(err, RenderError::Timeout { .. }),
-            "a story whose freeze promise is garbage-collected must be \
-             classified story-scoped (Timeout), not as an infrastructure Cdp \
-             error that aborts the whole build, got {err:?}"
+            phase.contains("freeze") && !phase.contains("reduced-motion"),
+            "the failing stage must be reported as the freeze one, got {phase:?}"
         );
     }
 
@@ -4297,6 +4574,16 @@ mod tests {
   @media (prefers-reduced-motion: reduce) { .css-box { background:#0000ff; } }"#,
             "",
             r#"      var root = document.getElementById('storybook-root');
+      if (id === 'demo-rm--blocking') {
+        // reduced-motion プローブが最初に触る API を、返ってこない構築子へ
+        // 差し替える（story の描画そのものは触らない）。READY 判定は先に
+        // 済むので、止まるのは検証の evaluate だけ——「verdict を返さない」
+        // 段を決定的に作れる。
+        window.CSSStyleSheet = function () {
+          var end = Date.now() + 15000;
+          while (Date.now() < end) {}
+        };
+      }
       if (id === 'demo-rm--mocked') {
         window.matchMedia = function () {
           return { matches: false, media: '',
@@ -4530,6 +4817,70 @@ mod tests {
         renderer.close().await;
     }
 
+    /// **配線の固定**: reduced-motion 検証が verdict を返さないとき、freeze の
+    /// phase ではなく **reduced-motion 自身の phase** で倒れること。
+    ///
+    /// 機構（待ち・リトライ・期限）は [`evaluate_with_deadline_retry`] に
+    /// 一本化されているが、分類は呼び出し側が渡す定数で決まる。ヘルパ自体の
+    /// 両分岐はブラウザ無しの `evaluate_*` 系が固定しているので、ここが
+    /// 固定するのは**この経路が [`REDUCED_MOTION_PHASES`] を渡していること**
+    /// ——freeze 側と取り違えても型は通ってしまう一点である。
+    ///
+    /// fixture は検証プローブが最初に触る `CSSStyleSheet` を、返らない
+    /// 構築子へ差し替える。差し替えは story 描画後に効くので READY 判定は
+    /// 通り、止まるのは検証の evaluate だけになる。
+    ///
+    /// 証明する: 経路の phase と story 分類。証明しない: リトライ切れ側の
+    /// 配線（実ページで CDP エラーを決定的に起こす手立てが無い——後述の
+    /// 判断できなかった点）。
+    #[tokio::test(flavor = "multi_thread")]
+    async fn a_reduced_motion_probe_that_never_returns_fails_with_its_own_phase() {
+        let Some(chromium) = discover_chromium() else {
+            eprintln!(
+                "SKIP a_reduced_motion_probe_that_never_returns_fails_with_its_own_phase: \
+                 no chromium"
+            );
+            return;
+        };
+        let _guard = BROWSER_LOCK.lock().await;
+
+        let dir = tempfile::tempdir().expect("tempdir");
+        write_reduced_motion_bundle(dir.path());
+        let server = StaticServer::start(dir.path()).await.expect("start server");
+
+        let mut options = RenderOptions::new(chromium, 320, 240);
+        options.story_timeout = Duration::from_secs(4);
+        options.emulate_reduced_motion = true;
+        let renderer = StoryRenderer::launch(options).await.expect("launch");
+
+        // 外周上限: ここで落ちたら evaluate が deadline に載っていない。
+        let result = tokio::time::timeout(
+            Duration::from_secs(60),
+            renderer.render_story(&server.base_url(), "demo-rm--blocking"),
+        )
+        .await
+        .expect("render_story must return within the outer bound");
+        renderer.close().await;
+
+        let err = result.expect_err("a verification that never returns must not be captured");
+        match err {
+            RenderError::Timeout { phase, .. } => {
+                assert_eq!(
+                    phase, "the reduced-motion verification never returned a verdict",
+                    "the stage must be reported as the reduced-motion one"
+                );
+                assert!(
+                    !phase.contains("freeze"),
+                    "the freeze stage must not answer for the reduced-motion one"
+                );
+            }
+            other => panic!(
+                "a verification that never returns must be story-scoped Timeout, \
+                 not an infrastructure failure that aborts the build, got {other:?}"
+            ),
+        }
+    }
+
     #[tokio::test]
     async fn static_server_serves_the_bundle_over_loopback() {
         let dir = tempfile::tempdir().expect("tempdir");