diff --git a/.claude/skills/create-design/SKILL.md b/.claude/skills/create-design/SKILL.md
new file mode 100644
index 00000000..cb59d7f6
--- /dev/null
+++ b/.claude/skills/create-design/SKILL.md
@@ -0,0 +1,201 @@
+---
+name: create-design
+description: Create mock screen designs as Storybook stories using this project's design system (Chakra UI v3 + `src/components/ui/` wrappers). Triggers only when the user explicitly invokes `/create-design` or says "デザイン作って" / "モック作って" / "make a mock" / "design this screen". **Never auto-trigger**. Handles both new-screen proposals and existing-screen redesigns.
+---
+
+# /create-design — Storybook Mock Design Generator
+
+You are an expert designer working with the user as a manager. You produce design artifacts on their behalf — **as Storybook stories inside this project's codebase**, using its existing design system.
+
+You must embody an expert in the relevant domain: UX designer, prototyper, visual designer. Avoid generic web design tropes. Match the visual vocabulary of what already exists here.
+
+## Output contract
+
+- Output is always a `*.stories.tsx` file (plus any supporting mock files it imports).
+- **No real logic.** No Convex queries/mutations, no Router definitions, no auth wrappers, no tests. Dummy data + inline state only.
+- Use Chakra UI v3 style props. No Tailwind, no raw CSS.
+- Storybook is `@storybook/react-vite` — import `Meta`/`StoryObj` from there (not `@storybook/react`).
+- `@storybook/test` is not installed — do not use `fn()`. Pass callbacks as `() => {}`.
+
+## Workflow
+
+1. Ask clarifying questions
+2. Gather design context from the codebase
+3. Verbalize the system you'll use (junior-designer-to-manager review)
+4. Build
+5. Verify visually with Playwright MCP
+6. Short end-of-turn summary (1–2 sentences)
+
+Run file-exploration tools concurrently when possible. For any scope beyond a single screen or beyond a few hours of work, use a todo list to track progress.
+
+---
+
+### Step 1: Ask clarifying questions
+
+Asking good questions is **essential**. Bad context produces bad design. Always confirm the starting point — a design system, an existing page, a spec doc — before building.
+
+For every request, confirm at minimum:
+
+- **What is being designed**: a new screen, a redesign of an existing one, or a single section/component
+- **Target device**: PC (max content width 1024px), SP (design baseline 390px), or both
+- **Variation count**: single proposal, or 2–3 proposals to compare
+
+For **existing-screen redesigns**, go deeper. This is a conversation, not a checklist — ask in batches of 2–3 and keep iterating:
+
+- Why redesign? What concretely isn't working?
+- Who uses it now, how often, and has that changed?
+- What must survive the redesign? What should be cut?
+- Is the scope visual only, information architecture, or full rethink?
+- Can data structure and navigation change?
+- Any reference products or inspirations?
+- What does "done" look like for them?
+
+Skip questions only for obvious tweaks or when the user has already provided everything.
+
+### Step 2: Gather design context
+
+**Mocking a full product from scratch is a last resort.** Before writing any component, read what already exists. Do this in parallel:
+
+- `src/components/ui/` — generic UI wrappers (Button, FormCard, BottomSheet, Empty, Title, Select…)
+- `src/components/templates/` — layout shells (BottomMenu, SideMenu, ContentWrapper)
+- `src/components/features/` — domain UI (always read this when redesigning)
+- `src/components/pages/` — existing page-level compositions
+- `design/designIndex.md` — index of `.pen` design files
+- `doc/features/<relevant>.md` — feature specs
+
+While reading, observe and think out loud about the **visual vocabulary**: color palette, spacing rhythm, corner radii, shadow depth, density, hover/click states, copy tone, iconography. You will match it unless the user explicitly asks to break from it.
+
+**Prefer code over screenshots.** When redesigning an existing screen, read the actual source of the current page/feature — not just a screenshot of it. Code tells you exact tokens, spacing, and structural choices; screenshots only tell you appearance. Use screenshots as supplements when the user provides them, not as a substitute for reading the source.
+
+If the context you need isn't here, ask the user to point you at it (a screenshot, a `.pen` file, a reference product, a URL). Don't invent from thin air. Be proactive — list directories, grep for relevant names, open adjacent files.
+
+### Step 3: Verbalize the system
+
+Before writing components, state — like a junior designer briefing their manager — in a few short lines:
+
+- The visual system you'll use (one line: e.g. "calm neutral surface, single teal accent, generous card radii")
+- Layout approach for the main sections (3–5 bullets)
+- Which existing components you'll reuse
+- What you'll placeholder vs. render fully
+- Any intentional breaks from existing vocabulary, and why
+
+If the direction is obvious, keep moving. If there's a real fork, pause and confirm.
+
+### Step 4: Build
+
+**Output location**:
+
+- New screen → default `src/components/mocks/<FeatureName>/index.stories.tsx`. Confirm placement with the user once; match whatever the project has already established for mocks.
+- Redesign → place alongside the existing story as `<Name>.v2.stories.tsx` (or similar), so old and new coexist for comparison.
+
+**File organization** — for multi-variant screen mocks, this layout has worked well in this repo:
+
+```
+src/components/mocks/<FeatureName>/
+  index.stories.tsx   # meta + imports + exports only (thin)
+  VariantA.tsx        # one variant per file
+  VariantB.tsx
+  mockData.ts         # shared dummy data
+```
+
+Keep each variant file under ~300 lines — split nested components out if you're above that.
+
+**Show early, iterate.** Don't disappear for an hour and return with a finished mock. As soon as the skeleton loads cleanly in Storybook, tell the user it's viewable — even if sections are placeholder boxes. Take one round of reaction, then fill in. Iterative feedback beats one big reveal.
+
+**Implementation rules**:
+
+- Use Chakra UI v3 style props (`<Box bg="teal.50" borderRadius="2xl" px={5}>`). Recipes, compound components, and `ContentWrapper` are your friends.
+- Handlers are `() => {}`. State that needs to demo interaction uses `useState`.
+- Put mock data at the top of the file or in a sibling `mockData.ts`. Keep it realistic — real-looking names, times, counts — not `"foo"`/`"bar"`.
+- **Placeholders beat bad attempts**. If you don't have an icon, illustration, logo, or chart, a labeled `<Box bg="gray.200" />` or a plain text label is always better than a hand-drawn SVG or AI-guessed rendering.
+- For full-screen mocks: one variant per source file, all re-exported as `Variant_X` stories from the thin `index.stories.tsx` (see File organization above).
+- For small UI components: collapse multiple states into a single story with a `<Variants />` grid — cheaper on VRT capture count.
+
+**Project-specific rules (non-negotiable)**:
+
+- MVP screens do not include `SideMenu`. Prefer SP-first; use `BottomMenu` if navigation is needed.
+- Avoid border duplication. A header bottom-border stacked against a content card border reads as a fat double line.
+- **Status color palette**: `teal` = brand, `orange` = needs attention, `green` = achievement, `gray` = completed/disabled, `red` = destructive. `yellow` is almost never used.
+- Inside modal/BottomSheet, `Select` must be `usePortal={false}` or the dropdown renders behind the surface. If `BottomSheet`'s `overflowY="auto"` clips a dropdown, pass `overflowY="visible"`.
+- Never use `new Date()` + `toISOString()` for date strings — TZ drift. Even in mocks, use `dayjs` or fixed `"YYYY-MM-DD"` literals.
+- Complex UI (shift tables, grids with many interactive cells) — render as a **placeholder block**, not a pixel-perfect rendition. The feedback loop on those is better in code than in mocks.
+
+**Copy tone** (from `CLAUDE.md` text guidelines):
+
+- Titles/subtitles: no commas or periods; mid-register tone (not `です/ます` but not slangy either); 体言止め fine; prefer hiragana density; short.
+- Lead with benefit, not pain. No humble-brag ("すごいでしょ?"). No condescension ("小さなお店" → "少人数のお店").
+- One line, multiple jobs (who it's for + what it does).
+
+### Step 5: Verify with Playwright MCP
+
+- Make sure Storybook is running (`pnpm storybook`, port 6006). If not, ask the user to start it.
+- Story URL format (iframe, no Storybook chrome): `http://localhost:6006/iframe.html?id=<kebab-title>--<kebab-story>&viewMode=story`. Example: `id=mocks-dashboard--variant-a`.
+- `playwright_navigate` to the story URL, then `playwright_screenshot`.
+- Capture at SP (390×844) and PC (1280×800) at minimum. For responsive breakpoint work, add a mid width (768×1024).
+- Check: layout breaks, overflow, border duplication, text wrapping, tap targets ≥ 44px, vertical rhythm, status color correctness. Match against the intent declared in Step 3.
+- Fix and re-capture. Don't report done until clean.
+
+### Step 6: End-of-turn summary
+
+1–2 sentences: what was built + the single most useful next action (pick a variant, tune copy, start wiring, etc.). No recap, no self-congratulation.
+
+---
+
+## Design principles
+
+### Do
+
+- **Match existing visual vocabulary**: colors, radii, shadow, density, copy tone. Observe before you write. Think out loud about what you see.
+- **Use colors from the existing palette.** If you genuinely need a new color, compute it with `oklch()` so it harmonizes — don't invent hex from scratch.
+- **Placeholders are a feature**, not a failure. A `gray.200` box labeled "shift grid placeholder" is a clearer design communication than a half-faked table.
+- **Declare a system up front.** Pick one approach for section headers, one type scale, 1–2 background colors max. Commit to it across the screen.
+- **Use scale deliberately.** SP tap targets ≥ 44px. Body text ≥ 14px. Headings big enough to do the work.
+- **Use CSS properly.** `text-wrap: pretty`, CSS Grid, `aspect-ratio`, `min()/max()/clamp()`, container queries — they're there, use them.
+- **Surprise the user when it helps.** Users often don't know what HTML/CSS can do. Novel layouts, scale play, layering, and visual rhythm are worth proposing.
+
+### Avoid
+
+- **Filler content.** Never pad a design with dummy sections, placeholder paragraphs, or invented stats just because the layout feels empty. Emptiness is a layout problem, solved with composition — not with made-up material. One thousand no's for every yes.
+- **Unilateral additions.** If you think a section would help, **ask** before adding it. The user knows the audience better than you.
+- **AI slop**, including:
+  - Aggressive gradient backgrounds
+  - Emoji that aren't part of the brand
+  - Rounded containers with a left-border accent color
+  - SVG illustrations drawn from scratch — use placeholders, or ask for real assets
+  - Overused typefaces (Inter, Roboto, Arial, system stacks — use what the project ships)
+  - Data slop (decorative numbers, unearned icons, KPI-shaped nothing)
+- **Repetition.** The same point in two sections is a design bug.
+- **Cross-project tropes.** Don't design a "web page" unless this is a web page. Don't design an "admin dashboard" unless the user asked for one.
+
+---
+
+## Variations strategy
+
+When the user asks for 2–3 variations, make the spread meaningful:
+
+- **Variant A — safe, pattern-faithful.** Uses the existing vocabulary as-is. This is the "you could ship this tomorrow" option.
+- **Variant B (and C) — increasingly exploratory.** Push on one dimension at a time: layout metaphor, information hierarchy, type treatment, density, or interaction model. Start close to A and get bolder.
+- **Don't waste variants on trivial deltas** (different accent color, slightly different padding). If A and B differ only in hex, you've delivered one variant, not two.
+- Mix conservative with novel. Mix text-heavy with imagery-led. Mix dense with airy. Goal: expose the user to as many atomic choices as possible so they can mix-and-match.
+
+Expose each variant as its own `export const Variant_X: StoryObj<typeof meta> = { render: () => <ProposalX /> }`.
+
+---
+
+## Asking questions — tips from the base
+
+- **Confirm context via a question, not an assumption.** "I assume you want to reuse the existing form card" is worse than asking.
+- When redesigning, ask what they care most about — flows, copy, or visuals — and design variants along that axis.
+- Ask whether they want divergent visuals / interactions / copy, or just polish on the existing pattern.
+- Err on the side of more questions for ambiguous briefs. For tight briefs, skip questions entirely.
+- Before showing variations, ask what dimensions they want explored (novel UX, different visuals, animation, copy).
+
+---
+
+## Do not produce
+
+- `CLAUDE.md`, `README.md`, or other documentation files
+- Real logic (Convex, API calls, auth)
+- Route definitions
+- Test files
+- Exports to PPTX / PDF / video / Canva — this skill builds Storybook stories, nothing else
diff --git a/CLAUDE.md b/CLAUDE.md
index 575cbc89..b712f3f9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -226,6 +226,7 @@ Convex agent skills for common tasks can be installed by running `npx convex ai-
 - プロセスの説明より体験を伝える
 - 上から目線NG（「小さなお店」→「少人数のお店」）
 - 短く 1行で複数の役割を持たせる（「誰向け」+「何をしてくれる」を合体）
+- 日本語の文章は不用意に半角スペースをいれない
 
 #### 構造
 
diff --git a/e2e/pages/StaffSubmitPage.ts b/e2e/pages/StaffSubmitPage.ts
index 167ca3df..fa51c0d8 100644
--- a/e2e/pages/StaffSubmitPage.ts
+++ b/e2e/pages/StaffSubmitPage.ts
@@ -20,7 +20,8 @@ export class StaffSubmitPage {
   }
 
   async expectCompletionVisible() {
-    await expect(this.page.getByText("提出しました")).toBeVisible();
+    await expect(this.page).toHaveURL(/\/shifts\/submit\/completed$/);
+    await expect(this.page.getByText("提出が完了しました")).toBeVisible();
   }
 
   async expectReadOnlyVisible() {
@@ -52,10 +53,6 @@ export class StaffSubmitPage {
     await this.page.getByRole("button", { name: /提出する/ }).click();
   }
 
-  async clickEdit() {
-    await this.page.getByRole("button", { name: "内容を修正する" }).click();
-  }
-
   async expectDayWorking(dateText: string) {
     const row = this.page.getByText(dateText, { exact: true }).locator("..");
     await expect(row.getByText("〜")).toBeVisible();
diff --git a/e2e/scenarios/staff-shift-submission.test.ts b/e2e/scenarios/staff-shift-submission.test.ts
index 8442ebdf..f716d594 100644
--- a/e2e/scenarios/staff-shift-submission.test.ts
+++ b/e2e/scenarios/staff-shift-submission.test.ts
@@ -42,7 +42,7 @@ test.describe("スタッフのシフト希望提出", () => {
     });
 
     await test.step("Step 3: 修正して再提出する", async () => {
-      await submitPage.clickEdit();
+      await submitPage.goto(token);
       await submitPage.expectFormVisible();
       await submitPage.expectSubmittedBadge();
 
diff --git a/index.html b/index.html
index baa3dd62..5c0cfbd9 100644
--- a/index.html
+++ b/index.html
@@ -63,10 +63,12 @@
         "url": "https://shiftori.app",
         "applicationCategory": "BusinessApplication",
         "operatingSystem": "Web",
-        "offers": {
-          "@type": "Offer",
-          "price": "0",
-          "priceCurrency": "JPY"
+        "image": "https://shiftori.app/ogp.png",
+        "inLanguage": "ja",
+        "provider": {
+          "@type": "Organization",
+          "name": "シフトリ",
+          "url": "https://shiftori.app"
         }
       }
     </script>
diff --git a/public/llms.txt b/public/llms.txt
new file mode 100644
index 00000000..abd52e72
--- /dev/null
+++ b/public/llms.txt
@@ -0,0 +1,24 @@
+# シフトリ
+
+> シフトリは少人数のお店向けのシフト管理SaaSです。スタッフはアカウント登録やアプリのインストール不要で、オーナーが送るリンクを開くだけで希望シフトを提出できます。
+
+## 特徴
+
+- スタッフはアカウント登録不要（リンクを開いて日付をタップするだけで提出できる）
+- アプリのインストール不要（スマホのブラウザで完結）
+- オーナーの登録だけで使いはじめられる
+- 募集・希望収集・確定通知までワンクリックで進むシンプルな流れ
+- LINE・Excel・メモに散っていたシフトづくりの情報をひとつの画面にまとめる
+- 2人から20人くらいの少人数のお店（飲食店・美容室・個人経営のサービス業など）を想定
+
+## 使い方
+
+1. オーナーが募集期間を決めてスタッフにリンクを配る
+2. スタッフがスマホのブラウザで希望シフトを提出する
+3. 集まった希望を見て調整し、確定シフトをワンクリックで全員に通知する
+
+## リンク
+
+- [サービスサイト](https://shiftori.app/)
+- [利用規約](https://shiftori.app/terms)
+- [プライバシーポリシー](https://shiftori.app/privacy)
diff --git a/src/components/features/Dashboard/DashboardContent/formatShiftTimeRange.test.ts b/src/components/features/Dashboard/DashboardContent/formatShiftTimeRange.test.ts
index db12b58a..38bc0d51 100644
--- a/src/components/features/Dashboard/DashboardContent/formatShiftTimeRange.test.ts
+++ b/src/components/features/Dashboard/DashboardContent/formatShiftTimeRange.test.ts
@@ -10,7 +10,7 @@ describe("formatShiftTimeRange", () => {
     expect(formatShiftTimeRange("14:00", "25:00")).toBe("14:00〜翌1:00");
   });
 
-  it("24:00 ちょうどは 翌0:00 になる", () => {
+  it("24:00ちょうどは翌0:00になる", () => {
     expect(formatShiftTimeRange("09:00", "24:00")).toBe("09:00〜翌0:00");
   });
 
diff --git a/src/components/features/Dashboard/HeroSummary/index.stories.tsx b/src/components/features/Dashboard/HeroSummary/index.stories.tsx
index 93fb5b8d..00a80b83 100644
--- a/src/components/features/Dashboard/HeroSummary/index.stories.tsx
+++ b/src/components/features/Dashboard/HeroSummary/index.stories.tsx
@@ -61,9 +61,12 @@ export const Variants: Story = {
       <Section label="締切が近い (3日以内)">
         <HeroSummary shop={SHOP} recruitments={[dueSoon, confirmed]} {...NOOP} />
       </Section>
-      <Section label="やることなし">
+      <Section label="提出待ち (締切まで余裕あり)">
         <HeroSummary shop={SHOP} recruitments={[calm, confirmed]} {...NOOP} />
       </Section>
+      <Section label="やることなし (open募集ゼロ)">
+        <HeroSummary shop={SHOP} recruitments={[confirmed]} {...NOOP} />
+      </Section>
       <Section label="初回ログイン時">
         <WelcomeHero onSetupClick={() => {}} />
       </Section>
diff --git a/src/components/features/Dashboard/HeroSummary/index.tsx b/src/components/features/Dashboard/HeroSummary/index.tsx
index 00bab13d..e3e43e19 100644
--- a/src/components/features/Dashboard/HeroSummary/index.tsx
+++ b/src/components/features/Dashboard/HeroSummary/index.tsx
@@ -1,7 +1,6 @@
-import { Box, Button, Flex, HStack, IconButton, Stack, Text } from "@chakra-ui/react";
-import type { ReactNode } from "react";
+import { Box, Button, Flex, Heading, HStack, IconButton, Stack, Text } from "@chakra-ui/react";
 import type { IconType } from "react-icons";
-import { LuArrowRight, LuCalendarClock, LuCircleAlert, LuSettings, LuSparkles } from "react-icons/lu";
+import { LuArrowRight, LuCalendarClock, LuCircleAlert, LuPlus, LuSettings, LuSparkles } from "react-icons/lu";
 import { formatShiftTimeRange } from "@/src/components/features/Dashboard/DashboardContent/formatShiftTimeRange";
 import type { Recruitment } from "@/src/components/features/Dashboard/types";
 import { formatDateShort } from "@/src/components/features/Shift/ShiftForm/utils/dateUtils";
@@ -25,40 +24,31 @@ export const HeroSummary = ({ shop, recruitments, onEditClick, onOpenShiftBoard,
   const action = pickNextAction(recruitments);
 
   return (
-    <HeroShell padding={{ base: 5, lg: 7 }}>
-      <Stack gap={{ base: 5, lg: 6 }} position="relative">
-        <Flex justify="space-between" align="flex-start" gap={3}>
-          <Stack gap={1.5} minW={0}>
-            <EyebrowPill>ダッシュボード</EyebrowPill>
-            <Text
-              fontSize={{ base: "2xl", lg: "3xl" }}
-              fontWeight="bold"
-              lineHeight="short"
-              letterSpacing="-0.01em"
-              color="gray.900"
-              truncate
-            >
-              {shop.name}
-            </Text>
-            <Text fontSize="sm" color="fg.muted" lineHeight="short">
-              シフト時間帯 {formatShiftTimeRange(shop.shiftStartTime, shop.shiftEndTime)}
-            </Text>
-          </Stack>
-          <IconButton
-            aria-label="店舗設定を編集"
-            variant="ghost"
-            size="sm"
-            color="fg.muted"
-            onClick={onEditClick}
-            borderRadius="full"
-          >
-            <LuSettings />
-          </IconButton>
-        </Flex>
+    <Stack gap={3}>
+      <Flex justify="space-between" align="center" gap={3}>
+        <HStack gap={2.5} align="baseline" minW={0}>
+          <Heading as="h1" fontSize={{ base: "xl", lg: "2xl" }} color="gray.900" letterSpacing="-0.01em" truncate>
+            {shop.name}
+          </Heading>
+          <Text fontSize="xs" color="fg.muted" whiteSpace="nowrap">
+            {formatShiftTimeRange(shop.shiftStartTime, shop.shiftEndTime)}
+          </Text>
+        </HStack>
+        <IconButton
+          aria-label="店舗設定を編集"
+          variant="ghost"
+          size="sm"
+          color="fg.muted"
+          borderRadius="full"
+          onClick={onEditClick}
+          _hover={{ bg: "blackAlpha.50" }}
+        >
+          <LuSettings />
+        </IconButton>
+      </Flex>
 
-        <ActionPanel action={action} onOpenShiftBoard={onOpenShiftBoard} onCreateRecruitment={onCreateRecruitment} />
-      </Stack>
-    </HeroShell>
+      <ActionCard action={action} onOpenShiftBoard={onOpenShiftBoard} onCreateRecruitment={onCreateRecruitment} />
+    </Stack>
   );
 };
 
@@ -67,13 +57,22 @@ type WelcomeHeroProps = {
 };
 
 export const WelcomeHero = ({ onSetupClick }: WelcomeHeroProps) => (
-  <HeroShell padding={{ base: 6, lg: 8 }}>
-    <Stack gap={5} maxW="520px" position="relative">
-      <EyebrowPill>はじめに</EyebrowPill>
-      <Stack gap={2}>
-        <Text fontSize={{ base: "2xl", lg: "3xl" }} fontWeight="bold" lineHeight="short" letterSpacing="-0.01em">
-          まずは お店のことを 教えてください
+  <Box
+    bg="white"
+    borderRadius="xl"
+    borderWidth="1px"
+    borderColor="teal.100"
+    px={{ base: 5, lg: 7 }}
+    py={{ base: 5, lg: 6 }}
+  >
+    <Stack gap={4} maxW="520px">
+      <Stack gap={1.5}>
+        <Text fontSize="10px" fontWeight="bold" color="teal.700" letterSpacing="0.1em" textTransform="uppercase">
+          はじめに
         </Text>
+        <Heading as="h1" fontSize={{ base: "xl", lg: "2xl" }} color="gray.900" letterSpacing="-0.01em">
+          まずはお店のことを教えてください
+        </Heading>
       </Stack>
       <Flex>
         <Button colorPalette="teal" size="md" onClick={onSetupClick} gap={1.5}>
@@ -82,131 +81,144 @@ export const WelcomeHero = ({ onSetupClick }: WelcomeHeroProps) => (
         </Button>
       </Flex>
     </Stack>
-  </HeroShell>
-);
-
-const HeroShell = ({ padding, children }: { padding: { base: number; lg: number }; children: ReactNode }) => (
-  <Box
-    position="relative"
-    overflow="hidden"
-    borderRadius="2xl"
-    bgGradient="to-br"
-    gradientFrom="teal.50"
-    gradientVia="white"
-    gradientTo="white"
-    borderWidth="1px"
-    borderColor="teal.100"
-    p={padding}
-  >
-    <Decoration />
-    {children}
   </Box>
 );
 
-type ActionPanelProps = {
+// ---------- ActionCard ----------
+
+type ActionCardProps = {
   action: NextAction;
   onOpenShiftBoard: (recruitmentId: string) => void;
   onCreateRecruitment: () => void;
 };
 
-const ActionPanel = ({ action, onOpenShiftBoard, onCreateRecruitment }: ActionPanelProps) => {
+const ActionCard = ({ action, onOpenShiftBoard, onCreateRecruitment }: ActionCardProps) => {
+  if (action.kind === "idle") {
+    return (
+      <SlimCard
+        icon={LuSparkles}
+        iconBg="teal.100"
+        iconFg="teal.700"
+        border="teal.100"
+        title="今やることはありません"
+        sub="次の募集を作ろう"
+        cta={{ label: "募集を作る", icon: LuPlus, palette: "teal", variant: "solid" }}
+        onClick={onCreateRecruitment}
+      />
+    );
+  }
   const view = describeAction(action);
-  const onClick = action.kind === "idle" ? onCreateRecruitment : () => onOpenShiftBoard(action.recruitment._id);
-
   return (
-    <Box
-      borderRadius="xl"
-      bg="white"
-      borderWidth="1px"
-      borderColor={view.borderColor}
-      boxShadow="xs"
-      px={{ base: 4, lg: 5 }}
-      py={4}
-    >
+    <SlimCard
+      icon={view.icon}
+      iconBg={view.iconBg}
+      iconFg={view.iconFg}
+      border={view.border}
+      title={view.title}
+      sub={view.sub}
+      cta={view.cta}
+      onClick={() => onOpenShiftBoard(getRecruitmentId(action))}
+    />
+  );
+};
+
+const getRecruitmentId = (action: Exclude<NextAction, { kind: "idle" }>) => action.recruitment._id;
+
+type SlimCardProps = {
+  icon: IconType;
+  iconBg: string;
+  iconFg: string;
+  border: string;
+  title: string;
+  sub: string;
+  cta: { label: string; icon?: IconType; palette: "teal" | "orange"; variant: "solid" | "outline" };
+  onClick: () => void;
+};
+
+const SlimCard = ({ icon: Icon, iconBg, iconFg, border, title, sub, cta, onClick }: SlimCardProps) => (
+  <Flex
+    bg="white"
+    borderRadius="xl"
+    borderWidth="1px"
+    borderColor={border}
+    px={{ base: 4, lg: 5 }}
+    py={4}
+    gap={3}
+    align={{ base: "stretch", sm: "center" }}
+    direction={{ base: "column", sm: "row" }}
+  >
+    <HStack gap={3} flex={1} minW={0}>
       <Flex
-        gap={{ base: 3, lg: 4 }}
-        align={{ base: "flex-start", lg: "center" }}
-        direction={{ base: "column", sm: "row" }}
+        boxSize="40px"
+        borderRadius="full"
+        bg={iconBg}
+        color={iconFg}
+        align="center"
+        justify="center"
+        flexShrink={0}
       >
-        <HStack gap={3} flex={1} align="flex-start" minW={0}>
-          <Flex
-            boxSize="40px"
-            borderRadius="full"
-            bg={view.iconBg}
-            color={view.iconColor}
-            align="center"
-            justify="center"
-            flexShrink={0}
-          >
-            <view.icon size={20} />
-          </Flex>
-          <Stack gap={0.5} minW={0}>
-            <Text fontSize="md" fontWeight="bold" color="gray.900" lineHeight="short">
-              {view.title}
-            </Text>
-            <Text fontSize="xs" color="fg.muted" lineHeight="tall">
-              {view.subtitle}
-            </Text>
-          </Stack>
-        </HStack>
-        <Button
-          colorPalette={view.ctaPalette}
-          variant={view.ctaVariant}
-          size="sm"
-          gap={1.5}
-          onClick={onClick}
-          fontWeight="semibold"
-          alignSelf={{ base: "stretch", sm: "center" }}
-          flexShrink={0}
-        >
-          {view.ctaLabel}
-          <LuArrowRight />
-        </Button>
+        <Icon size={20} />
       </Flex>
-    </Box>
-  );
-};
+      <Stack gap={0.5} minW={0}>
+        <Text fontSize="md" fontWeight="bold" color="gray.900" lineHeight="short">
+          {title}
+        </Text>
+        <Text fontSize="xs" color="fg.muted" lineHeight="tall">
+          {sub}
+        </Text>
+      </Stack>
+    </HStack>
+    <Button
+      colorPalette={cta.palette}
+      variant={cta.variant}
+      size="sm"
+      gap={1.5}
+      fontWeight="semibold"
+      alignSelf={{ base: "stretch", sm: "center" }}
+      flexShrink={0}
+      onClick={onClick}
+    >
+      {cta.icon && <cta.icon />}
+      {cta.label}
+      {!cta.icon && <LuArrowRight />}
+    </Button>
+  </Flex>
+);
 
 type ActionView = {
   icon: IconType;
   iconBg: string;
-  iconColor: string;
-  borderColor: string;
+  iconFg: string;
+  border: string;
   title: string;
-  subtitle: string;
-  ctaLabel: string;
-  ctaPalette: "teal" | "orange";
-  ctaVariant: "solid" | "outline";
+  sub: string;
+  cta: { label: string; palette: "teal" | "orange"; variant: "solid" | "outline" };
 };
 
-function describeAction(action: NextAction): ActionView {
+function describeAction(action: Exclude<NextAction, { kind: "idle" }>): ActionView {
   switch (action.kind) {
     case "past-deadline": {
       const { periodStart, periodEnd, deadline, responseCount } = action.recruitment;
       return {
         icon: LuCircleAlert,
         iconBg: "orange.100",
-        iconColor: "orange.600",
-        borderColor: "orange.200",
-        title: `${formatDateShort(periodStart)}〜${formatDateShort(periodEnd)} の シフト調整がまだ`,
-        subtitle: `締切は ${formatDateShort(deadline)} 提出 ${responseCount}人`,
-        ctaLabel: "シフトを見る",
-        ctaPalette: "orange",
-        ctaVariant: "solid",
+        iconFg: "orange.600",
+        border: "orange.200",
+        title: `${formatDateShort(periodStart)}〜${formatDateShort(periodEnd)}のシフトを組もう`,
+        sub: `提出${responseCount}人・締切${formatDateShort(deadline)}超過`,
+        cta: { label: "シフトを見る", palette: "orange", variant: "solid" },
       };
     }
     case "deadline-today": {
       const { periodStart, periodEnd, responseCount } = action.recruitment;
       return {
-        icon: LuCalendarClock,
+        icon: LuCircleAlert,
         iconBg: "orange.100",
-        iconColor: "orange.600",
-        borderColor: "orange.200",
-        title: `${formatDateShort(periodStart)}〜${formatDateShort(periodEnd)} は 今日が締切`,
-        subtitle: `提出 ${responseCount}人`,
-        ctaLabel: "シフトを見る",
-        ctaPalette: "orange",
-        ctaVariant: "solid",
+        iconFg: "orange.600",
+        border: "orange.200",
+        title: `${formatDateShort(periodStart)}〜${formatDateShort(periodEnd)}は今日が締切`,
+        sub: `提出${responseCount}人・もうすぐシフトを組めます`,
+        cta: { label: "シフトを見る", palette: "orange", variant: "solid" },
       };
     }
     case "deadline-soon": {
@@ -214,72 +226,24 @@ function describeAction(action: NextAction): ActionView {
       return {
         icon: LuCalendarClock,
         iconBg: "teal.100",
-        iconColor: "teal.700",
-        borderColor: "teal.200",
-        title: `${formatDateShort(periodStart)}〜${formatDateShort(periodEnd)} は あと${action.daysLeft}日で締切`,
-        subtitle: `提出 ${responseCount}人`,
-        ctaLabel: "シフトを見る",
-        ctaPalette: "teal",
-        ctaVariant: "outline",
+        iconFg: "teal.700",
+        border: "teal.200",
+        title: `${formatDateShort(periodStart)}〜${formatDateShort(periodEnd)}はあと${action.daysLeft}日で締切`,
+        sub: `提出${responseCount}人・もうすぐ締まります`,
+        cta: { label: "シフトを見る", palette: "teal", variant: "outline" },
       };
     }
-    case "idle":
+    case "collecting": {
+      const { periodStart, periodEnd, deadline, responseCount } = action.recruitment;
       return {
-        icon: LuSparkles,
-        iconBg: "teal.100",
-        iconColor: "teal.700",
-        borderColor: "teal.100",
-        title: "今日 やることはありません",
-        subtitle: "次の募集を作って シフト希望を集めよう",
-        ctaLabel: "募集を作る",
-        ctaPalette: "teal",
-        ctaVariant: "solid",
+        icon: LuCalendarClock,
+        iconBg: "teal.50",
+        iconFg: "teal.700",
+        border: "teal.100",
+        title: `${formatDateShort(periodStart)}〜${formatDateShort(periodEnd)}の提出待ち`,
+        sub: `提出${responseCount}人・締切${formatDateShort(deadline)}まであと${action.daysLeft}日`,
+        cta: { label: "募集を見る", palette: "teal", variant: "outline" },
       };
+    }
   }
 }
-
-const Decoration = () => (
-  <>
-    <Box
-      aria-hidden
-      position="absolute"
-      top="-60px"
-      right="-40px"
-      boxSize="180px"
-      borderRadius="full"
-      bg="teal.100"
-      opacity={0.45}
-      filter="blur(40px)"
-    />
-    <Box
-      aria-hidden
-      position="absolute"
-      bottom="-80px"
-      left="30%"
-      boxSize="220px"
-      borderRadius="full"
-      bg="teal.50"
-      opacity={0.6}
-      filter="blur(60px)"
-    />
-  </>
-);
-
-const EyebrowPill = ({ children }: { children: string }) => (
-  <HStack
-    alignSelf="flex-start"
-    gap={1.5}
-    fontSize="11px"
-    fontWeight="semibold"
-    color="teal.700"
-    bg="teal.100"
-    px={2.5}
-    py={1}
-    borderRadius="full"
-    letterSpacing="0.08em"
-    textTransform="uppercase"
-  >
-    <Box boxSize="5px" borderRadius="full" bg="teal.500" />
-    {children}
-  </HStack>
-);
diff --git a/src/components/features/Dashboard/HeroSummary/pickNextAction.test.ts b/src/components/features/Dashboard/HeroSummary/pickNextAction.test.ts
index 8eeaf5c8..a5e64223 100644
--- a/src/components/features/Dashboard/HeroSummary/pickNextAction.test.ts
+++ b/src/components/features/Dashboard/HeroSummary/pickNextAction.test.ts
@@ -27,8 +27,9 @@ describe("pickNextAction", () => {
     expect(pickNextAction([make({ status: "confirmed", deadline: "2026-04-15" })], NOW)).toEqual({ kind: "idle" });
   });
 
-  it("returns idle when collecting deadline is more than 3 days away", () => {
-    expect(pickNextAction([make({ deadline: "2026-04-25" })], NOW)).toEqual({ kind: "idle" });
+  it("returns collecting when open recruitment deadline is more than 3 days away", () => {
+    const r = make({ deadline: "2026-04-25" });
+    expect(pickNextAction([r], NOW)).toEqual({ kind: "collecting", recruitment: r, daysLeft: 7 });
   });
 
   it("prioritizes past-deadline over collecting", () => {
diff --git a/src/components/features/Dashboard/HeroSummary/pickNextAction.ts b/src/components/features/Dashboard/HeroSummary/pickNextAction.ts
index f7d45cab..da43edc0 100644
--- a/src/components/features/Dashboard/HeroSummary/pickNextAction.ts
+++ b/src/components/features/Dashboard/HeroSummary/pickNextAction.ts
@@ -5,6 +5,7 @@ export type NextAction =
   | { kind: "past-deadline"; recruitment: Recruitment }
   | { kind: "deadline-today"; recruitment: Recruitment }
   | { kind: "deadline-soon"; recruitment: Recruitment; daysLeft: number }
+  | { kind: "collecting"; recruitment: Recruitment; daysLeft: number }
   | { kind: "idle" };
 
 const SOON_THRESHOLD_DAYS = 3;
@@ -20,13 +21,15 @@ export function pickNextAction(recruitments: Recruitment[], now: Dayjs = dayjs()
 
   const upcoming = open
     .map((r) => ({ r, daysLeft: dayjs(r.deadline).startOf("day").diff(today, "day") }))
-    .filter((x) => x.daysLeft >= 0 && x.daysLeft <= SOON_THRESHOLD_DAYS)
+    .filter((x) => x.daysLeft >= 0)
     .sort((a, b) => a.daysLeft - b.daysLeft);
 
   const top = upcoming[0];
   if (top) {
     if (top.daysLeft === 0) return { kind: "deadline-today", recruitment: top.r };
-    return { kind: "deadline-soon", recruitment: top.r, daysLeft: top.daysLeft };
+    if (top.daysLeft <= SOON_THRESHOLD_DAYS)
+      return { kind: "deadline-soon", recruitment: top.r, daysLeft: top.daysLeft };
+    return { kind: "collecting", recruitment: top.r, daysLeft: top.daysLeft };
   }
 
   return { kind: "idle" };
diff --git a/src/components/features/Dashboard/RecruitmentBoard/index.stories.tsx b/src/components/features/Dashboard/RecruitmentBoard/index.stories.tsx
index e6237afd..9c07966a 100644
--- a/src/components/features/Dashboard/RecruitmentBoard/index.stories.tsx
+++ b/src/components/features/Dashboard/RecruitmentBoard/index.stories.tsx
@@ -38,7 +38,7 @@ export const Variants: Story = {
       </Stack>
       <Stack gap={3}>
         <Text fontSize="xs" fontWeight="semibold" color="fg.muted" letterSpacing="0.08em" textTransform="uppercase">
-          もっと見る ありの状態
+          もっと見るありの状態
         </Text>
         <RecruitmentBoard
           recruitments={mockRecruitments.slice(0, 2)}
diff --git a/src/components/features/Dashboard/RecruitmentBoard/index.tsx b/src/components/features/Dashboard/RecruitmentBoard/index.tsx
index d8864cea..db898d99 100644
--- a/src/components/features/Dashboard/RecruitmentBoard/index.tsx
+++ b/src/components/features/Dashboard/RecruitmentBoard/index.tsx
@@ -29,7 +29,7 @@ export const RecruitmentBoard = ({ recruitments, status, onCreateClick, onOpenSh
             シフト募集
           </Heading>
           <Text fontSize="sm" color="fg.muted">
-            募集の進み具合を まとめて確認
+            募集の進み具合をまとめて確認
           </Text>
         </Stack>
         <Button colorPalette="teal" size="sm" onClick={onCreateClick} gap={1.5} fontWeight="semibold">
@@ -88,7 +88,7 @@ const EmptyState = () => (
         まだ募集はありません
       </Text>
       <Text fontSize="sm" color="fg.muted" lineHeight="tall">
-        期間を決めて 最初の募集をつくってみましょう
+        期間を決めて最初の募集をつくってみましょう
       </Text>
     </Stack>
   </Stack>
diff --git a/src/components/features/Dashboard/StaffRoster/index.stories.tsx b/src/components/features/Dashboard/StaffRoster/index.stories.tsx
index c6049c22..edbee7cb 100644
--- a/src/components/features/Dashboard/StaffRoster/index.stories.tsx
+++ b/src/components/features/Dashboard/StaffRoster/index.stories.tsx
@@ -40,7 +40,7 @@ export const Variants: Story = {
       </Stack>
       <Stack gap={3}>
         <Text fontSize="xs" fontWeight="semibold" color="fg.muted" letterSpacing="0.08em" textTransform="uppercase">
-          もっと見る ありの状態
+          もっと見るありの状態
         </Text>
         <StaffRoster
           staffs={mockStaffsMany}
diff --git a/src/components/features/Dashboard/StaffRoster/index.tsx b/src/components/features/Dashboard/StaffRoster/index.tsx
index f1738d5a..84a388a6 100644
--- a/src/components/features/Dashboard/StaffRoster/index.tsx
+++ b/src/components/features/Dashboard/StaffRoster/index.tsx
@@ -99,7 +99,7 @@ const EmptyState = () => (
         まだスタッフはいません
       </Text>
       <Text fontSize="sm" color="fg.muted" lineHeight="tall">
-        名前とメールアドレスで スタッフを登録できます
+        名前とメールアドレスでスタッフを登録できます
       </Text>
     </Stack>
   </Stack>
diff --git a/src/components/features/LandingPage/index.tsx b/src/components/features/LandingPage/index.tsx
index fe1ab2b5..4a1cd578 100644
--- a/src/components/features/LandingPage/index.tsx
+++ b/src/components/features/LandingPage/index.tsx
@@ -204,7 +204,7 @@ const Hero = () => (
           できる
         </Heading>
         <Text mt={7} fontSize={{ base: "16px", lg: "20px" }} color="gray.700" lineHeight={1.7} whiteSpace="pre-line">
-          少人数のお店のシフト作成 ぜんぶおまかせ
+          少人数のお店のシフト作成ぜんぶおまかせ
         </Text>
         <Stack
           direction={{ base: "column", sm: "row" }}
@@ -398,7 +398,7 @@ const POINTS: Point[] = [
   {
     num: "01",
     icon: LuSend,
-    title: "募集は ワンクリック",
+    title: "募集はワンクリック",
     lead: "期間を決めて一斉送信",
     body: "スタッフは受け取ったリンクを開くだけ\n登録もアプリのインストールもいらない",
   },
@@ -412,7 +412,7 @@ const POINTS: Point[] = [
   {
     num: "03",
     icon: LuCheck,
-    title: "確定も ワンクリック",
+    title: "確定もワンクリック",
     lead: "集まった希望を見ながら調整",
     body: "調整シフトがボタンで\nひとつで全員に届く",
   },
@@ -423,8 +423,8 @@ const PointsSection = () => (
     <Box mx="auto" w="full" maxW="1024px">
       <VStack maxW="720px" mx="auto" gap={0} textAlign="center">
         <Eyebrow>できること</Eyebrow>
-        <SectionHeading>{"小さなお店のシフトづくり\nぜんぶ ここで"}</SectionHeading>
-        <SectionSub>募集から確定まで ワンクリックで進む シンプルな流れ</SectionSub>
+        <SectionHeading>{"小さなお店のシフトづくり\nぜんぶここで"}</SectionHeading>
+        <SectionSub>募集から確定までワンクリックで進むシンプルな流れ</SectionSub>
       </VStack>
       <SimpleGrid columns={{ base: 1, lg: 3 }} gap={{ base: 4, lg: 6 }} mt={{ base: 10, lg: 14 }}>
         {POINTS.map((p) => (
@@ -500,7 +500,7 @@ const ToolsSection = () => (
     <VStack maxW="720px" mx="auto" gap={0} textAlign="center" mb={{ base: 10, lg: 16 }}>
       <Eyebrow>ツールの統合</Eyebrow>
       <SectionHeading>{"シフト作りの道具\nひとつにしよう"}</SectionHeading>
-      <SectionSub>LINE Excel メモ ぜんぶここで</SectionSub>
+      <SectionSub>LINE・Excel・メモ、ぜんぶここで</SectionSub>
     </VStack>
     <Box
       mx="auto"
@@ -533,7 +533,7 @@ const ToolsSection = () => (
           シフトリ
         </Text>
         <Text fontSize="13px" opacity={0.85}>
-          ひとつの画面で 全部の情報が集まる
+          ひとつの画面で全部の情報が集まる
         </Text>
       </VStack>
     </Box>
@@ -574,7 +574,7 @@ const ToolChip = ({ icon: Icon, name, meta, iconBg, iconColor }: Tool) => (
 );
 
 const STEPS: { title: string; body: string }[] = [
-  { title: "募集期間を決める", body: "期間を決めて スタッフ全員にリンクを配る" },
+  { title: "募集期間を決める", body: "期間を決めてスタッフ全員にリンクを配る" },
   { title: "希望シフトを集める", body: "スタッフが希望を入力" },
   { title: "確定シフトを通知", body: "調整結果をボタンひとつで全員に反映" },
 ];
@@ -584,7 +584,7 @@ const HowSection = () => (
     <Box mx="auto" w="full" maxW="1024px">
       <VStack maxW="720px" mx="auto" gap={0} textAlign="center">
         <Eyebrow>3ステップ</Eyebrow>
-        <SectionHeading>使い方は かんたん</SectionHeading>
+        <SectionHeading>使い方はかんたん</SectionHeading>
       </VStack>
       <Box
         mt={{ base: 10, lg: 14 }}
@@ -648,7 +648,7 @@ const FaqSection = () => {
       <Box mx="auto" w="full" maxW="720px">
         <VStack gap={0} textAlign="center">
           <Eyebrow>よくある質問</Eyebrow>
-          <SectionHeading>聞きたいこと ぜんぶ</SectionHeading>
+          <SectionHeading>聞きたいことぜんぶ</SectionHeading>
         </VStack>
         <VStack gap={3} align="stretch" mt={12}>
           {faqs.map((f, i) => (
@@ -733,7 +733,7 @@ const BottomCta = () => (
         {"今日のシフトから\nラクにしよう"}
       </Heading>
       <Text fontSize="16px" color="fg.muted" mt={4} mb={8}>
-        登録は30秒 スタッフへの案内もワンクリック
+        登録は30秒スタッフへの案内もワンクリック
       </Text>
       <Stack direction={{ base: "column", sm: "row" }} gap={4} justify="center" flexWrap="wrap">
         <SignUpButton mode="modal">
@@ -777,7 +777,7 @@ export const Footer = () => (
           <Box as="span">シフトリ</Box>
         </HStack>
         <Text fontSize="14px" opacity={0.85} lineHeight={1.7} maxW="260px">
-          少人数のお店のシフトづくりを もっとラクに
+          少人数のお店のシフトづくりをもっとラクに
         </Text>
       </VStack>
       <FooterCol
diff --git a/src/components/features/PrivacyPolicy/index.tsx b/src/components/features/PrivacyPolicy/index.tsx
index 74a87356..87d74e59 100644
--- a/src/components/features/PrivacyPolicy/index.tsx
+++ b/src/components/features/PrivacyPolicy/index.tsx
@@ -4,7 +4,7 @@ import { Body, BulletList, LegalPage, Section, SubHeading } from "@/src/componen
 
 export function PrivacyPolicy(): ReactNode {
   return (
-    <LegalPage title="プライバシーポリシー" lastUpdated="2026年4月11日">
+    <LegalPage title="プライバシーポリシー" lastUpdated="2026年4月19日">
       <Body>
         シフトリ（以下「本サービス」）は、個人情報の保護を重視しています。本ポリシーでは、本サービスが取得する情報とその取り扱いについて説明します。
       </Body>
@@ -50,17 +50,69 @@ export function PrivacyPolicy(): ReactNode {
         <Body>各サービスのプライバシーポリシーについては、各サービスのWebサイトをご確認ください。</Body>
       </Section>
 
-      <Section title="4. 第三者提供">
+      <Section title="4. アクセス解析ツールの利用">
         <Body>
-          法令に基づく場合を除き、本人の同意なく個人情報を第三者に提供することはありません。前項の外部サービスは、本サービスの運営に必要な業務委託先として利用しています。
+          本サービスでは、サイトの利用状況を把握し、サービスの改善に役立てるため、以下のアクセス解析ツールを利用しています。これらのツールはCookieを使用して情報を収集し、収集された情報は各提供元のサーバー（日本国外を含む）に送信されます。
+        </Body>
+
+        <SubHeading>Google Analytics（Google Tag Manager経由）：</SubHeading>
+        <BulletList
+          items={[
+            "提供元：Google LLC",
+            "利用目的：サイト利用状況の分析およびサービスの改善",
+            "取得する情報：ページ閲覧状況、参照元、デバイス情報、ブラウザ情報、IPアドレス（Google側で匿名化処理が行われます）",
+            "使用するCookie：_ga、_ga_* など",
+            "データの保存先：Googleのサーバー（海外への移転を含みます）",
+            "保存期間：最大14か月",
+            "オプトアウト方法：ブラウザのCookie削除、またはGoogle Analyticsオプトアウトアドオンの利用",
+          ]}
+        />
+        <Body>
+          Googleのプライバシーポリシーの詳細は
+          <Link href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" color="teal.700">
+            https://policies.google.com/privacy
+          </Link>
+          をご確認ください。
+        </Body>
+
+        <SubHeading>Microsoft Clarity：</SubHeading>
+        <BulletList
+          items={[
+            "提供元：Microsoft Corporation",
+            "利用目的：ユーザー体験の分析および改善",
+            "取得する情報：ページ閲覧状況、クリック、スクロール、マウス移動、デバイス情報、ブラウザ情報、IPアドレス（国判定の用途で利用され、Microsoftによれば保存はされません）",
+            "入力値の扱い：マスクレベルStrictにより、氏名・メールアドレスなどフォームに入力された内容は記録されません",
+            "使用するCookie：_clck、_clsk",
+            "データの保存先：Microsoftのサーバー（海外への移転を含みます）",
+            "保存期間：最大1年（ローリングで自動削除されます）",
+            "オプトアウト方法：ブラウザのCookie削除、またはトラッキング防止機能の利用",
+          ]}
+        />
+        <Body>
+          Microsoftのプライバシーポリシーの詳細は
+          <Link
+            href="https://privacy.microsoft.com/privacystatement"
+            target="_blank"
+            rel="noopener noreferrer"
+            color="teal.700"
+          >
+            https://privacy.microsoft.com/privacystatement
+          </Link>
+          をご確認ください。
+        </Body>
+      </Section>
+
+      <Section title="5. 第三者提供">
+        <Body>
+          法令に基づく場合を除き、本人の同意なく個人情報を第三者に提供することはありません。前各項の外部サービスおよびアクセス解析ツールは、本サービスの運営に必要な業務委託先として利用しています。
         </Body>
       </Section>
 
-      <Section title="5. データの保管">
+      <Section title="6. データの保管">
         <Body>データはConvexのクラウドサーバーに保管されます。不要になったデータは管理者が削除できます。</Body>
       </Section>
 
-      <Section title="6. お問い合わせ">
+      <Section title="7. お問い合わせ">
         <Body>個人情報の取り扱いに関するお問い合わせは、以下のフォームからご連絡ください。</Body>
         <Link
           href="https://forms.gle/wBHKJtD6YAHmAWP9A"
diff --git a/src/components/features/StaffSubmit/ShiftSubmitPage/index.tsx b/src/components/features/StaffSubmit/ShiftSubmitPage/index.tsx
index 7b4b863b..5337819e 100644
--- a/src/components/features/StaffSubmit/ShiftSubmitPage/index.tsx
+++ b/src/components/features/StaffSubmit/ShiftSubmitPage/index.tsx
@@ -1,8 +1,6 @@
-import { useState } from "react";
 import type { DayEntry } from "../DayCard";
 import { ExpiredSubmitView } from "../ExpiredSubmitView";
 import { ReadOnlySubmitView } from "../ReadOnlySubmitView";
-import { SubmitCompleteView } from "../SubmitCompleteView";
 import { type SubmissionData, SubmitFormView } from "../SubmitFormView";
 
 type Props = {
@@ -11,9 +9,6 @@ type Props = {
 };
 
 export const ShiftSubmitPage = ({ data, onSubmit }: Props) => {
-  const [showCompletion, setShowCompletion] = useState(false);
-  const [submittedEntries, setSubmittedEntries] = useState<DayEntry[] | null>(null);
-
   // 状態D: 未提出＋締切後
   if (!data.isBeforeDeadline && !data.hasSubmitted) {
     return <ExpiredSubmitView shopName={data.shopName} />;
@@ -24,22 +19,6 @@ export const ShiftSubmitPage = ({ data, onSubmit }: Props) => {
     return <ReadOnlySubmitView data={data} />;
   }
 
-  // 画面5: 提出完了
-  if (showCompletion && submittedEntries) {
-    return (
-      <SubmitCompleteView shopName={data.shopName} entries={submittedEntries} onEdit={() => setShowCompletion(false)} />
-    );
-  }
-
   // 状態A/B: 締切前（編集可能）
-  return (
-    <SubmitFormView
-      data={data}
-      onSubmit={async (entries) => {
-        await onSubmit(entries);
-        setSubmittedEntries(entries);
-        setShowCompletion(true);
-      }}
-    />
-  );
+  return <SubmitFormView data={data} onSubmit={onSubmit} />;
 };
diff --git a/src/components/features/StaffSubmit/SubmitCompleteView/index.stories.tsx b/src/components/features/StaffSubmit/SubmitCompleteView/index.stories.tsx
deleted file mode 100644
index 48865e16..00000000
--- a/src/components/features/StaffSubmit/SubmitCompleteView/index.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { DayEntry } from "../DayCard";
-import { SubmitCompleteView } from "./index";
-
-const mockEntries: DayEntry[] = [
-  { date: "2026-04-07", isWorking: true, startTime: "09:00", endTime: "18:00" },
-  { date: "2026-04-08", isWorking: true, startTime: "09:00", endTime: "18:00" },
-  { date: "2026-04-09", isWorking: true, startTime: "10:00", endTime: "15:00" },
-  { date: "2026-04-10", isWorking: false, startTime: "09:00", endTime: "22:00" },
-  { date: "2026-04-11", isWorking: true, startTime: "09:00", endTime: "22:00" },
-  { date: "2026-04-12", isWorking: false, startTime: "09:00", endTime: "22:00" },
-  { date: "2026-04-13", isWorking: false, startTime: "09:00", endTime: "22:00" },
-];
-
-const meta = {
-  title: "features/StaffSubmit/SubmitCompleteView",
-  component: SubmitCompleteView,
-  parameters: {
-    layout: "fullscreen",
-  },
-  globals: {
-    viewport: { value: "mobile2", isRotated: false },
-  },
-} satisfies Meta<typeof SubmitCompleteView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    shopName: "居酒屋さくら",
-    entries: mockEntries,
-    onEdit: () => {},
-  },
-};
diff --git a/src/components/features/StaffSubmit/SubmitCompleteView/index.tsx b/src/components/features/StaffSubmit/SubmitCompleteView/index.tsx
deleted file mode 100644
index d7baf055..00000000
--- a/src/components/features/StaffSubmit/SubmitCompleteView/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Box, Button, Circle, Flex, Icon, Text, VStack } from "@chakra-ui/react";
-import { LuCheck } from "react-icons/lu";
-import { formatDateWithWeekday } from "@/src/components/features/Shift/ShiftForm/utils/dateUtils";
-import type { DayEntry } from "../DayCard";
-import { SubmitPageContent, SubmitPageLayout } from "../SubmitPageLayout";
-import { formatTime, getDateColor } from "../utils/timeOptions";
-
-type Props = {
-  shopName: string;
-  entries: DayEntry[];
-  onEdit: () => void;
-};
-
-export const SubmitCompleteView = ({ shopName, entries, onEdit }: Props) => {
-  return (
-    <SubmitPageLayout>
-      {/* Header (full-width bg) */}
-      <Box bg="teal.600" w="full">
-        <Box maxW="1024px" mx="auto" px={4} pt={3} pb={4}>
-          <Text fontSize="xs" color="white" opacity={0.8}>
-            {shopName}
-          </Text>
-          <Text fontSize="xl" fontWeight="bold" color="white">
-            シフト希望を提出
-          </Text>
-        </Box>
-      </Box>
-
-      {/* Success Area (full-width bg) */}
-      <Box bg="white" w="full">
-        <VStack maxW="1024px" mx="auto" px={4} pt={8} pb={6} gap={2}>
-          <Circle size="56px" bg="teal.600">
-            <Icon color="white" boxSize={7}>
-              <LuCheck />
-            </Icon>
-          </Circle>
-          <Text fontSize="xl" fontWeight="bold">
-            提出しました
-          </Text>
-          <Text fontSize="sm" color="fg.muted">
-            シフトが確定したらメールでお知らせします
-          </Text>
-        </VStack>
-      </Box>
-
-      <SubmitPageContent>
-        {/* Summary */}
-        <Box px={4} pt={3}>
-          <Box borderRadius="lg" borderWidth={1} borderColor="border.default" bg="white" overflow="hidden">
-            {entries.map((entry, i) => (
-              <Flex
-                key={entry.date}
-                h="40px"
-                px={4}
-                align="center"
-                justify="space-between"
-                borderBottomWidth={i < entries.length - 1 ? 1 : 0}
-                borderColor="border.default"
-              >
-                <Text fontSize="sm" fontWeight="medium" color={getDateColor(entry.date)}>
-                  {formatDateWithWeekday(entry.date)}
-                </Text>
-                {entry.isWorking ? (
-                  <Text fontSize="sm" fontWeight="medium" color="teal.600">
-                    {formatTime(entry.startTime)} 〜 {formatTime(entry.endTime)}
-                  </Text>
-                ) : (
-                  <Text fontSize="sm" color="fg.subtle">
-                    休み
-                  </Text>
-                )}
-              </Flex>
-            ))}
-          </Box>
-        </Box>
-
-        {/* Edit Button */}
-        <Box px={4} pt={4} pb={6}>
-          <Button
-            w="full"
-            h="48px"
-            variant="outline"
-            borderRadius="lg"
-            fontWeight="semibold"
-            bg="white"
-            _hover={{ bg: "gray.100" }}
-            onClick={onEdit}
-          >
-            内容を修正する
-          </Button>
-        </Box>
-      </SubmitPageContent>
-    </SubmitPageLayout>
-  );
-};
diff --git a/src/components/features/StaffSubmit/SubmittedView/index.stories.tsx b/src/components/features/StaffSubmit/SubmittedView/index.stories.tsx
new file mode 100644
index 00000000..139ec1fd
--- /dev/null
+++ b/src/components/features/StaffSubmit/SubmittedView/index.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SubmittedView } from "./index";
+
+const meta = {
+  title: "features/StaffSubmit/SubmittedView",
+  component: SubmittedView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  globals: {
+    viewport: { value: "mobile2", isRotated: false },
+  },
+} satisfies Meta<typeof SubmittedView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
diff --git a/src/components/features/StaffSubmit/SubmittedView/index.tsx b/src/components/features/StaffSubmit/SubmittedView/index.tsx
new file mode 100644
index 00000000..ff32dfd7
--- /dev/null
+++ b/src/components/features/StaffSubmit/SubmittedView/index.tsx
@@ -0,0 +1,38 @@
+import { Box, Circle, Flex, Icon, Text, VStack } from "@chakra-ui/react";
+import { LuCheck } from "react-icons/lu";
+import { SubmitPageLayout } from "../SubmitPageLayout";
+
+export const SubmittedView = () => {
+  return (
+    <SubmitPageLayout>
+      <Box bg="teal.600" w="full">
+        <Box maxW="1024px" mx="auto" px={4} pt={3} pb={4}>
+          <Text fontSize="xl" fontWeight="bold" color="white">
+            シフト希望を提出
+          </Text>
+        </Box>
+      </Box>
+
+      <Flex flex={1} align="center" justify="center" bg="white" px={4}>
+        <VStack gap={4}>
+          <Circle size="64px" bg="teal.600">
+            <Icon color="white" boxSize={8}>
+              <LuCheck />
+            </Icon>
+          </Circle>
+          <Text fontSize="xl" fontWeight="bold">
+            提出が完了しました
+          </Text>
+          <VStack gap={1}>
+            <Text fontSize="sm" color="fg.muted" textAlign="center">
+              店長からの連絡をお待ちください
+            </Text>
+            <Text fontSize="sm" color="fg.muted" textAlign="center">
+              このページは閉じて大丈夫です
+            </Text>
+          </VStack>
+        </VStack>
+      </Flex>
+    </SubmitPageLayout>
+  );
+};
diff --git a/src/components/mocks/ShiftForm/DailyView.tsx b/src/components/mocks/ShiftForm/DailyView.tsx
new file mode 100644
index 00000000..85b7719f
--- /dev/null
+++ b/src/components/mocks/ShiftForm/DailyView.tsx
@@ -0,0 +1,757 @@
+import { Box, Flex, Grid } from "@chakra-ui/react";
+import { useMemo, useState } from "react";
+import { LuCheck, LuChevronLeft, LuChevronRight, LuInfo, LuPencil, LuTriangleAlert } from "react-icons/lu";
+import {
+  countWorkingAt,
+  DATES,
+  dayIsSatisfied,
+  dowColor,
+  PEAK_BANDS,
+  positionById,
+  requiredAt,
+  STAFFS,
+  shiftOf,
+  TIME_RANGE,
+  timeToPct,
+  unsubmittedStaff,
+} from "./mockData";
+import { Avatar } from "./parts";
+
+const HOURS = Array.from({ length: TIME_RANGE.end - TIME_RANGE.start + 1 }, (_, i) => i + TIME_RANGE.start);
+
+const formatJp = (iso: string) => {
+  const [, m, d] = iso.split("-");
+  return `${Number(m)}月${Number(d)}日`;
+};
+
+const weekdayLong: Record<string, string> = {
+  月: "月曜",
+  火: "火曜",
+  水: "水曜",
+  木: "木曜",
+  金: "金曜",
+  土: "土曜",
+  日: "日曜",
+};
+
+// ---- PC (Pattern A, polished) --------------------------------------------
+
+export const DailyPC = () => {
+  const [selected, setSelected] = useState("2026-01-21");
+  const selectedDate = DATES.find((d) => d.iso === selected) ?? DATES[0];
+
+  const rows = useMemo(
+    () =>
+      STAFFS.filter((s) => s.status !== "not_submitted").map((s) => ({
+        staff: s,
+        shift: shiftOf(s.id, selected),
+      })),
+    [selected],
+  );
+  const working = rows.filter((r) => r.shift?.asn);
+  const requesting = rows.filter((r) => r.shift?.req);
+  const unassigned = rows.filter((r) => r.shift?.req && !r.shift?.asn);
+
+  return (
+    <Flex h="100%" minH={0}>
+      {/* Left: day rail */}
+      <Flex
+        direction="column"
+        w="80px"
+        borderRightWidth="1px"
+        borderColor="gray.200"
+        bg="white"
+        py={2}
+        gap={1}
+        flexShrink={0}
+        overflow="auto"
+      >
+        {DATES.map((d) => {
+          const active = d.iso === selected;
+          const satisfied = dayIsSatisfied(d.iso);
+          return (
+            <Box
+              key={d.iso}
+              onClick={() => setSelected(d.iso)}
+              mx={2}
+              py="8px"
+              textAlign="center"
+              borderRadius="8px"
+              cursor="pointer"
+              bg={active ? "teal.50" : "transparent"}
+              borderWidth="1px"
+              borderColor={active ? "teal.300" : "transparent"}
+              transition="all 120ms"
+              _hover={{ bg: active ? "teal.50" : "gray.50" }}
+            >
+              <Box fontSize="11px" color={dowColor(d)} fontWeight={active ? 700 : 600}>
+                {d.w}
+              </Box>
+              <Box fontSize="16px" fontWeight={700} color="gray.800" mt="1px" lineHeight="1.1">
+                {d.dd ?? d.d.split("/")[1]}
+              </Box>
+              <Flex mt="4px" justify="center">
+                <Box w="6px" h="6px" borderRadius="999px" bg={satisfied ? "green.500" : "orange.400"} />
+              </Flex>
+            </Box>
+          );
+        })}
+      </Flex>
+
+      {/* Center: timeline */}
+      <Flex direction="column" flex={1} minW={0}>
+        <Flex px={6} py={4} bg="white" borderBottomWidth="1px" borderColor="gray.200" align="center" gap={4}>
+          <Flex gap={1}>
+            <button
+              type="button"
+              style={{
+                width: 28,
+                height: 28,
+                border: "1px solid #e4e4e7",
+                background: "white",
+                borderRadius: 6,
+                color: "#71717a",
+                cursor: "pointer",
+              }}
+            >
+              <LuChevronLeft size={14} style={{ margin: "0 auto" }} />
+            </button>
+            <button
+              type="button"
+              style={{
+                width: 28,
+                height: 28,
+                border: "1px solid #e4e4e7",
+                background: "white",
+                borderRadius: 6,
+                color: "#71717a",
+                cursor: "pointer",
+              }}
+            >
+              <LuChevronRight size={14} style={{ margin: "0 auto" }} />
+            </button>
+          </Flex>
+          <Box>
+            <Box fontSize="12px" color="gray.500">
+              {weekdayLong[selectedDate.w]}
+            </Box>
+            <Box fontSize="22px" fontWeight={700} color="gray.800" lineHeight="1.15">
+              {formatJp(selectedDate.iso)}
+            </Box>
+          </Box>
+          <Flex ml={4} gap={5} color="gray.600" fontSize="12px">
+            <Box>
+              <Box fontSize="10px" color="gray.500" fontWeight={600} letterSpacing="0.5px">
+                出勤
+              </Box>
+              <Box fontSize="15px" fontWeight={700} color="gray.800">
+                {working.length}
+                <Box as="span" fontSize="11px" ml="2px" color="gray.500">
+                  人
+                </Box>
+              </Box>
+            </Box>
+            <Box>
+              <Box fontSize="10px" color="gray.500" fontWeight={600} letterSpacing="0.5px">
+                希望
+              </Box>
+              <Box fontSize="15px" fontWeight={700} color="gray.800">
+                {requesting.length}
+                <Box as="span" fontSize="11px" ml="2px" color="gray.500">
+                  人
+                </Box>
+              </Box>
+            </Box>
+            <Box>
+              <Box fontSize="10px" color="gray.500" fontWeight={600} letterSpacing="0.5px">
+                未割当
+              </Box>
+              <Box fontSize="15px" fontWeight={700} color={unassigned.length ? "orange.600" : "gray.800"}>
+                {unassigned.length}
+                <Box as="span" fontSize="11px" ml="2px" color="gray.500">
+                  人
+                </Box>
+              </Box>
+            </Box>
+          </Flex>
+          <Flex ml="auto" gap={3} align="center" fontSize="11px" color="gray.600">
+            <Flex align="center" gap="6px">
+              <Box
+                w="16px"
+                h="10px"
+                borderRadius="2px"
+                borderWidth="1.5px"
+                borderStyle="dashed"
+                borderColor="gray.400"
+              />
+              希望
+            </Flex>
+            <Flex align="center" gap="6px">
+              <Box w="16px" h="10px" borderRadius="2px" bg="teal.500" />
+              割当
+            </Flex>
+          </Flex>
+        </Flex>
+
+        <Box flex={1} minH={0} overflow="auto" px={6} py={4}>
+          <TimelineTable rows={rows} hours={HOURS} />
+        </Box>
+      </Flex>
+
+      {/* Right: staffing meter */}
+      <StaffingMeter iso={selected} />
+    </Flex>
+  );
+};
+
+type TimelineRow = {
+  staff: (typeof STAFFS)[number];
+  shift: ReturnType<typeof shiftOf>;
+};
+
+const TimelineTable = ({ rows, hours }: { rows: TimelineRow[]; hours: number[] }) => {
+  const NAME_W = 140;
+
+  return (
+    <Box
+      bg="white"
+      borderRadius="10px"
+      borderWidth="1px"
+      borderColor="gray.200"
+      overflow="hidden"
+      boxShadow="0 1px 2px rgba(0,0,0,0.03)"
+    >
+      {/* Sticky hour header */}
+      <Flex bg="gray.50" borderBottomWidth="1px" borderColor="gray.200">
+        <Box w={`${NAME_W}px`} flexShrink={0} px={4} py="8px" fontSize="11px" color="gray.500" fontWeight={600}>
+          スタッフ
+        </Box>
+        <Flex flex={1} position="relative">
+          {hours.slice(0, -1).map((h, i) => {
+            const peak = PEAK_BANDS.some((b) => h >= b.startHour && h < b.endHour);
+            return (
+              <Flex
+                key={h}
+                flex={1}
+                py="8px"
+                pl="6px"
+                fontSize="10px"
+                color={peak ? "teal.700" : "gray.500"}
+                fontWeight={peak ? 700 : 500}
+                borderLeftWidth={i === 0 ? "0" : "1px"}
+                borderColor="gray.100"
+              >
+                {h}時
+              </Flex>
+            );
+          })}
+        </Flex>
+        <Box
+          w="60px"
+          flexShrink={0}
+          py="8px"
+          pr={3}
+          fontSize="11px"
+          color="gray.500"
+          fontWeight={600}
+          textAlign="right"
+        >
+          時間
+        </Box>
+      </Flex>
+      {rows.map((r, idx) => (
+        <StaffRow key={r.staff.id} staff={r.staff} shift={r.shift} nameWidth={NAME_W} last={idx === rows.length - 1} />
+      ))}
+    </Box>
+  );
+};
+
+const StaffRow = ({
+  staff,
+  shift,
+  nameWidth,
+  last,
+}: {
+  staff: (typeof STAFFS)[number];
+  shift: ReturnType<typeof shiftOf>;
+  nameWidth: number;
+  last: boolean;
+}) => {
+  const hasReq = !!shift?.req;
+  const hasAsn = !!shift?.asn;
+  const mismatch = hasReq && !hasAsn;
+  const totalHours = shift?.asn ? Number(shift.asn[1].slice(0, 2)) - Number(shift.asn[0].slice(0, 2)) : 0;
+
+  const segments =
+    shift?.segments ?? (shift?.asn ? [{ positionId: "hall", start: shift.asn[0], end: shift.asn[1] }] : []);
+
+  return (
+    <Flex
+      align="center"
+      h="46px"
+      borderBottomWidth={last ? "0" : "1px"}
+      borderColor="gray.100"
+      _hover={{ bg: "gray.50" }}
+      transition="background 100ms"
+    >
+      <Flex w={`${nameWidth}px`} flexShrink={0} px={4} gap={2} align="center">
+        <Avatar name={staff.name} size={26} />
+        <Box minW={0}>
+          <Box fontSize="12px" fontWeight={600} color="gray.800" lineHeight="1.2">
+            {staff.name}
+          </Box>
+          {!hasReq && staff.status === "submitted" && (
+            <Box fontSize="10px" color="gray.400" mt="1px">
+              休み希望
+            </Box>
+          )}
+          {mismatch && (
+            <Flex fontSize="10px" color="orange.600" mt="1px" align="center" gap="3px">
+              <LuTriangleAlert size={10} /> 未割当
+            </Flex>
+          )}
+        </Box>
+      </Flex>
+      <Box flex={1} position="relative" h="30px" mx={0} bg="gray.50" borderRadius="4px">
+        {/* Peak band shading */}
+        {PEAK_BANDS.map((b) => {
+          const left = ((b.startHour - TIME_RANGE.start) / (TIME_RANGE.end - TIME_RANGE.start)) * 100;
+          const right = ((b.endHour - TIME_RANGE.start) / (TIME_RANGE.end - TIME_RANGE.start)) * 100;
+          return (
+            <Box
+              key={b.label}
+              position="absolute"
+              top={0}
+              bottom={0}
+              left={`${left}%`}
+              width={`${right - left}%`}
+              bg="teal.50"
+              opacity={0.55}
+              pointerEvents="none"
+            />
+          );
+        })}
+        {/* Request (dashed) */}
+        {hasReq && shift?.req && (
+          <Box
+            position="absolute"
+            top={0}
+            bottom={0}
+            left={`${timeToPct(shift.req[0])}%`}
+            width={`${timeToPct(shift.req[1]) - timeToPct(shift.req[0])}%`}
+            borderWidth="1.5px"
+            borderStyle="dashed"
+            borderColor="gray.400"
+            borderRadius="4px"
+          />
+        )}
+        {/* Assigned segments colored by position */}
+        {hasAsn &&
+          segments.map((seg, i) => {
+            const pos = positionById(seg.positionId);
+            const leftPct = timeToPct(seg.start);
+            const widthPct = timeToPct(seg.end) - leftPct;
+            return (
+              <Box
+                key={`${seg.positionId}-${i}`}
+                position="absolute"
+                top="4px"
+                bottom="4px"
+                left={`${leftPct}%`}
+                width={`${widthPct}%`}
+                bg={pos.color}
+                borderRadius={i === 0 ? "4px 0 0 4px" : i === segments.length - 1 ? "0 4px 4px 0" : "0"}
+                display="flex"
+                alignItems="center"
+                px="6px"
+                color="white"
+                fontSize="10px"
+                fontWeight={700}
+                overflow="hidden"
+                whiteSpace="nowrap"
+                cursor="grab"
+                _hover={{ filter: "brightness(1.06)" }}
+                title={`${pos.name} ${seg.start}–${seg.end}`}
+              >
+                {widthPct > 8 && <Box>{pos.name}</Box>}
+              </Box>
+            );
+          })}
+        {/* Assignment time label */}
+        {hasAsn && shift?.asn && (
+          <Box
+            position="absolute"
+            top="4px"
+            bottom="4px"
+            left={`${timeToPct(shift.asn[0])}%`}
+            width={`${timeToPct(shift.asn[1]) - timeToPct(shift.asn[0])}%`}
+            display="flex"
+            alignItems="center"
+            justifyContent="flex-end"
+            pr="6px"
+            pointerEvents="none"
+            fontSize="10px"
+            fontWeight={700}
+            color="whiteAlpha.900"
+          >
+            {shift.asn[0]}〜{shift.asn[1]}
+          </Box>
+        )}
+      </Box>
+      <Flex w="60px" flexShrink={0} justify="flex-end" pr={3} align="center" gap={1}>
+        {totalHours > 0 ? (
+          <Box fontSize="12px" fontWeight={700} color="gray.800" fontVariantNumeric="tabular-nums">
+            {totalHours}h
+          </Box>
+        ) : (
+          <Box fontSize="12px" color="gray.300">
+            —
+          </Box>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+const StaffingMeter = ({ iso }: { iso: string }) => {
+  return (
+    <Box w="260px" flexShrink={0} borderLeftWidth="1px" borderColor="gray.200" bg="white" p={4} overflow="auto">
+      <Flex align="center" gap={2} mb={3}>
+        <Box fontSize="12px" fontWeight={700} color="gray.600">
+          時間帯の充足
+        </Box>
+        <Box color="gray.400" display="flex" alignItems="center">
+          <LuInfo size={12} />
+        </Box>
+      </Flex>
+
+      <Flex direction="column" gap={3} mb={5}>
+        {PEAK_BANDS.map((b) => {
+          const counts = [];
+          for (let h = b.startHour; h < b.endHour; h++) counts.push(countWorkingAt(iso, h));
+          const min = Math.min(...counts);
+          const ok = min >= b.required;
+          return (
+            <Box
+              key={b.label}
+              borderWidth="1px"
+              borderColor={ok ? "teal.100" : "orange.200"}
+              bg={ok ? "teal.50" : "orange.50"}
+              borderRadius="8px"
+              p="10px 12px"
+            >
+              <Flex align="center" gap={2}>
+                <Box fontSize="11px" fontWeight={700} color={ok ? "teal.700" : "orange.700"}>
+                  {b.label}
+                </Box>
+                <Box fontSize="10px" color={ok ? "teal.700" : "orange.700"} opacity={0.7}>
+                  {b.startHour}:00–{b.endHour}:00
+                </Box>
+                <Box ml="auto" color={ok ? "teal.600" : "orange.500"}>
+                  {ok ? <LuCheck size={14} /> : <LuTriangleAlert size={14} />}
+                </Box>
+              </Flex>
+              <Flex align="baseline" gap="3px" mt="4px">
+                <Box fontSize="18px" fontWeight={700} color={ok ? "teal.700" : "orange.700"} lineHeight="1">
+                  {min}
+                </Box>
+                <Box fontSize="11px" color={ok ? "teal.700" : "orange.700"}>
+                  / {b.required}人
+                </Box>
+                <Box fontSize="10px" color="gray.500" ml={1}>
+                  (最小)
+                </Box>
+              </Flex>
+            </Box>
+          );
+        })}
+      </Flex>
+
+      <Box fontSize="11px" color="gray.500" fontWeight={600} mb={2} letterSpacing="0.5px">
+        時刻別
+      </Box>
+      <Flex direction="column" gap="2px">
+        {HOURS.slice(0, -1).map((h) => {
+          const c = countWorkingAt(iso, h);
+          const r = requiredAt(h);
+          const ok = c >= r;
+          const peak = PEAK_BANDS.some((b) => h >= b.startHour && h < b.endHour);
+          return (
+            <Grid
+              key={h}
+              templateColumns="32px 1fr 44px"
+              alignItems="center"
+              gap="8px"
+              fontSize="11px"
+              py="3px"
+              px="4px"
+              borderRadius="4px"
+              bg={peak ? "teal.50" : "transparent"}
+            >
+              <Box color="gray.500" fontWeight={peak ? 700 : 500}>
+                {h}時
+              </Box>
+              <Box h="6px" bg="gray.100" borderRadius="999px" overflow="hidden">
+                <Box w={`${Math.min(100, (c / Math.max(r, 1)) * 100)}%`} h="100%" bg={ok ? "teal.500" : "orange.500"} />
+              </Box>
+              <Box
+                textAlign="right"
+                color={ok ? "gray.700" : "orange.600"}
+                fontWeight={ok ? 500 : 700}
+                fontVariantNumeric="tabular-nums"
+              >
+                {c}/{r}
+              </Box>
+            </Grid>
+          );
+        })}
+      </Flex>
+    </Box>
+  );
+};
+
+// ---- SP (Pattern A, polished) --------------------------------------------
+
+export const DailySP = () => {
+  const [selected, setSelected] = useState("2026-01-21");
+  const selectedDate = DATES.find((d) => d.iso === selected) ?? DATES[0];
+
+  const rows = STAFFS.filter((s) => s.status !== "not_submitted").map((s) => ({
+    staff: s,
+    shift: shiftOf(s.id, selected),
+  }));
+  const working = rows.filter((r) => r.shift?.asn).length;
+  const satisfied = dayIsSatisfied(selected);
+
+  return (
+    <Box overflow="auto">
+      {/* Header summary */}
+      <Box px={4} pt={3} pb={2} bg="white" borderBottomWidth="1px" borderColor="gray.100">
+        <Flex align="baseline" gap={2}>
+          <Box fontSize="18px" fontWeight={700} color="gray.800">
+            {formatJp(selectedDate.iso)}
+          </Box>
+          <Box fontSize="12px" color={dowColor(selectedDate)} fontWeight={700}>
+            ({selectedDate.w})
+          </Box>
+          <Box
+            ml="auto"
+            px="8px"
+            py="2px"
+            borderRadius="999px"
+            fontSize="10px"
+            fontWeight={700}
+            bg={satisfied ? "teal.50" : "orange.50"}
+            color={satisfied ? "teal.700" : "orange.700"}
+            borderWidth="1px"
+            borderColor={satisfied ? "teal.200" : "orange.200"}
+          >
+            {satisfied ? "充足 OK" : "要確認"}
+          </Box>
+        </Flex>
+        <Box fontSize="11px" color="gray.500" mt="2px">
+          出勤 {working}人・希望 {rows.filter((r) => r.shift?.req).length}人
+        </Box>
+      </Box>
+
+      {/* Day ribbon */}
+      <Box bg="white" px={4} py={3} borderBottomWidth="1px" borderColor="gray.100">
+        <Flex gap={2} overflowX="auto">
+          {DATES.map((d) => {
+            const active = d.iso === selected;
+            const ok = dayIsSatisfied(d.iso);
+            return (
+              <Box
+                key={d.iso}
+                onClick={() => setSelected(d.iso)}
+                flexShrink={0}
+                w="48px"
+                py="8px"
+                textAlign="center"
+                borderRadius="10px"
+                bg={active ? "teal.50" : "white"}
+                borderWidth="1px"
+                borderColor={active ? "teal.400" : "gray.200"}
+                cursor="pointer"
+              >
+                <Box fontSize="10px" color={dowColor(d)} fontWeight={700}>
+                  {d.w}
+                </Box>
+                <Box fontSize="14px" fontWeight={700} color="gray.800">
+                  {d.dd ?? d.d.split("/")[1]}
+                </Box>
+                <Box mt="2px">
+                  <Box mx="auto" w="6px" h="6px" borderRadius="999px" bg={ok ? "green.500" : "orange.400"} />
+                </Box>
+              </Box>
+            );
+          })}
+        </Flex>
+      </Box>
+
+      {/* Peak band summary */}
+      <Flex gap={2} px={4} py={3}>
+        {PEAK_BANDS.map((b) => {
+          const counts = [];
+          for (let h = b.startHour; h < b.endHour; h++) counts.push(countWorkingAt(selected, h));
+          const min = Math.min(...counts);
+          const ok = min >= b.required;
+          return (
+            <Box
+              key={b.label}
+              flex={1}
+              borderWidth="1px"
+              borderColor={ok ? "teal.200" : "orange.200"}
+              bg={ok ? "teal.50" : "orange.50"}
+              borderRadius="10px"
+              p="10px"
+            >
+              <Flex align="center" justify="space-between">
+                <Box fontSize="11px" fontWeight={700} color={ok ? "teal.700" : "orange.700"}>
+                  {b.label}
+                </Box>
+                <Box color={ok ? "teal.600" : "orange.500"}>
+                  {ok ? <LuCheck size={12} /> : <LuTriangleAlert size={12} />}
+                </Box>
+              </Flex>
+              <Flex align="baseline" gap="3px" mt="3px">
+                <Box fontSize="16px" fontWeight={700} color={ok ? "teal.700" : "orange.700"} lineHeight="1">
+                  {min}
+                </Box>
+                <Box fontSize="10px" color={ok ? "teal.700" : "orange.700"}>
+                  /{b.required}人
+                </Box>
+              </Flex>
+              <Box fontSize="10px" color="gray.500" mt="3px">
+                {b.startHour}:00–{b.endHour}:00
+              </Box>
+            </Box>
+          );
+        })}
+      </Flex>
+
+      {/* Cards */}
+      <Flex direction="column" gap={2} px={4} pb={4}>
+        {rows.map(({ staff, shift }) => {
+          const req = shift?.req;
+          const asn = shift?.asn;
+          const mismatch = req && !asn;
+          const segments = shift?.segments ?? (asn ? [{ positionId: "hall", start: asn[0], end: asn[1] }] : []);
+          return (
+            <Box
+              key={staff.id}
+              bg="white"
+              borderRadius="10px"
+              borderWidth="1px"
+              borderColor={mismatch ? "orange.200" : "gray.200"}
+              p={3}
+            >
+              <Flex align="center" gap={2} mb={req ? "8px" : "4px"}>
+                <Avatar name={staff.name} size={28} />
+                <Box fontSize="14px" fontWeight={700} color="gray.800">
+                  {staff.name}
+                </Box>
+                <Box ml="auto" fontSize="11px" color="gray.500">
+                  {req ? `希望 ${req[0]}〜${req[1]}` : "休み希望"}
+                </Box>
+                <Box color="gray.400">
+                  <LuPencil size={13} />
+                </Box>
+              </Flex>
+              {req ? (
+                <Box position="relative" h="26px" bg="gray.50" borderRadius="4px">
+                  {/* peak shading */}
+                  {PEAK_BANDS.map((b) => {
+                    const left = ((b.startHour - TIME_RANGE.start) / (TIME_RANGE.end - TIME_RANGE.start)) * 100;
+                    const right = ((b.endHour - TIME_RANGE.start) / (TIME_RANGE.end - TIME_RANGE.start)) * 100;
+                    return (
+                      <Box
+                        key={b.label}
+                        position="absolute"
+                        top={0}
+                        bottom={0}
+                        left={`${left}%`}
+                        width={`${right - left}%`}
+                        bg="teal.50"
+                        opacity={0.5}
+                      />
+                    );
+                  })}
+                  <Box
+                    position="absolute"
+                    top={0}
+                    bottom={0}
+                    left={`${timeToPct(req[0])}%`}
+                    width={`${timeToPct(req[1]) - timeToPct(req[0])}%`}
+                    borderWidth="1.5px"
+                    borderStyle="dashed"
+                    borderColor="gray.400"
+                    borderRadius="4px"
+                  />
+                  {segments.map((seg, i) => {
+                    const pos = positionById(seg.positionId);
+                    const left = timeToPct(seg.start);
+                    const width = timeToPct(seg.end) - left;
+                    return (
+                      <Box
+                        key={`${seg.positionId}-${i}`}
+                        position="absolute"
+                        top="3px"
+                        bottom="3px"
+                        left={`${left}%`}
+                        width={`${width}%`}
+                        bg={pos.color}
+                        borderRadius={i === 0 ? "3px 0 0 3px" : i === segments.length - 1 ? "0 3px 3px 0" : "0"}
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        fontSize="9px"
+                        fontWeight={700}
+                        color="white"
+                        overflow="hidden"
+                        whiteSpace="nowrap"
+                      >
+                        {width > 12 ? pos.name : ""}
+                      </Box>
+                    );
+                  })}
+                  {asn && (
+                    <Box
+                      position="absolute"
+                      top="3px"
+                      bottom="3px"
+                      left={`${timeToPct(asn[0])}%`}
+                      width={`${timeToPct(asn[1]) - timeToPct(asn[0])}%`}
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="flex-end"
+                      pr="4px"
+                      fontSize="9px"
+                      fontWeight={700}
+                      color="whiteAlpha.900"
+                      pointerEvents="none"
+                    >
+                      {asn[0]}〜{asn[1]}
+                    </Box>
+                  )}
+                </Box>
+              ) : (
+                <Box fontSize="11px" color="gray.400" py="4px">
+                  この日は休み
+                </Box>
+              )}
+              {mismatch && (
+                <Flex align="center" gap={1} fontSize="11px" color="orange.600" mt="6px" fontWeight={600}>
+                  <LuTriangleAlert size={12} />
+                  希望あり・未割当
+                </Flex>
+              )}
+            </Box>
+          );
+        })}
+      </Flex>
+    </Box>
+  );
+};
+
+export const unsubmittedNames = () => unsubmittedStaff().map((s) => s.name);
diff --git a/src/components/mocks/ShiftForm/ListView.tsx b/src/components/mocks/ShiftForm/ListView.tsx
new file mode 100644
index 00000000..90d62264
--- /dev/null
+++ b/src/components/mocks/ShiftForm/ListView.tsx
@@ -0,0 +1,754 @@
+import { Box, Flex } from "@chakra-ui/react";
+import { useMemo, useState } from "react";
+import { LuCalendar, LuChevronLeft, LuChevronRight } from "react-icons/lu";
+import { buildMonthDates, dowColor, type MonthDate, monthShiftOf, STAFFS } from "./mockData";
+import { Avatar } from "./parts";
+
+type Period = "1w" | "2w" | "1m";
+const periodWeeks: Record<Period, number> = { "1w": 1, "2w": 2, "1m": 4 };
+
+const shiftHours = (asn: [string, string] | null) =>
+  !asn ? 0 : Number(asn[1].slice(0, 2)) - Number(asn[0].slice(0, 2));
+
+// ---- PC (L1b) -----------------------------------------------------------
+
+export const ListPC = () => {
+  const [period, setPeriod] = useState<Period>("1m");
+  const dates = useMemo(() => buildMonthDates(periodWeeks[period]), [period]);
+  const weekCount = Math.ceil(dates.length / 7);
+
+  const initialOpen = () => {
+    const o: Record<number, boolean> = {};
+    for (let i = 0; i < weekCount; i++) o[i] = i < 2;
+    return o;
+  };
+  const [open, setOpen] = useState<Record<number, boolean>>(initialOpen);
+
+  const periodLabel = period === "1w" ? "1/5 – 1/11" : period === "2w" ? "1/5 – 1/18" : "2026年 1月";
+  const toggleAll = (v: boolean) => {
+    const o: Record<number, boolean> = {};
+    for (let i = 0; i < weekCount; i++) o[i] = v;
+    setOpen(o);
+  };
+
+  return (
+    <Flex direction="column" flex={1} minH={0}>
+      <Flex
+        px={5}
+        py={3}
+        bg="white"
+        borderBottomWidth="1px"
+        borderColor="gray.200"
+        align="center"
+        gap={3}
+        flexShrink={0}
+        flexWrap="wrap"
+      >
+        <DateNav label={periodLabel} />
+        <PeriodSwitcher period={period} setPeriod={setPeriod} />
+        <Box w="1px" h="22px" bg="gray.200" mx={1} />
+        <ModeTabs active="L1b" />
+      </Flex>
+
+      <Box flex={1} minH={0} overflow="auto" p={5}>
+        {weekCount > 1 && (
+          <Flex align="center" gap={2} mb={3} fontSize="12px">
+            <Box color="gray.500">{weekCount}週間</Box>
+            <button
+              type="button"
+              onClick={() => toggleAll(true)}
+              style={{
+                height: 26,
+                padding: "0 10px",
+                border: "1px solid #d4d4d8",
+                background: "white",
+                borderRadius: 6,
+                cursor: "pointer",
+                color: "#3f3f46",
+                fontSize: 11,
+                marginLeft: "auto",
+                fontFamily: "inherit",
+              }}
+            >
+              すべて展開
+            </button>
+            <button
+              type="button"
+              onClick={() => toggleAll(false)}
+              style={{
+                height: 26,
+                padding: "0 10px",
+                border: "1px solid #d4d4d8",
+                background: "white",
+                borderRadius: 6,
+                cursor: "pointer",
+                color: "#3f3f46",
+                fontSize: 11,
+                fontFamily: "inherit",
+              }}
+            >
+              すべて畳む
+            </button>
+          </Flex>
+        )}
+
+        {Array.from({ length: weekCount }).map((_, wi) => {
+          const wkDates = dates.filter((d) => d.weekIdx === wi);
+          const isOpen = !!open[wi];
+          const isCurrent = wi === 0;
+          return (
+            <WeekCard
+              key={wi}
+              wi={wi}
+              wkDates={wkDates}
+              isOpen={isOpen}
+              isCurrent={isCurrent}
+              onToggle={() => setOpen({ ...open, [wi]: !isOpen })}
+            />
+          );
+        })}
+      </Box>
+    </Flex>
+  );
+};
+
+const DateNav = ({ label }: { label: string }) => (
+  <Flex align="center" gap={1}>
+    <button
+      type="button"
+      style={{
+        width: 30,
+        height: 30,
+        border: "1px solid #d4d4d8",
+        background: "white",
+        borderRadius: 6,
+        color: "#52525b",
+        cursor: "pointer",
+      }}
+    >
+      <LuChevronLeft size={14} style={{ margin: "0 auto" }} />
+    </button>
+    <Flex
+      h="30px"
+      px={3}
+      align="center"
+      gap={2}
+      borderWidth="1px"
+      borderColor="gray.200"
+      borderRadius="6px"
+      bg="white"
+      fontSize="13px"
+      fontWeight={700}
+      color="gray.800"
+    >
+      <LuCalendar size={13} color="#71717a" />
+      {label}
+    </Flex>
+    <button
+      type="button"
+      style={{
+        width: 30,
+        height: 30,
+        border: "1px solid #d4d4d8",
+        background: "white",
+        borderRadius: 6,
+        color: "#52525b",
+        cursor: "pointer",
+      }}
+    >
+      <LuChevronRight size={14} style={{ margin: "0 auto" }} />
+    </button>
+  </Flex>
+);
+
+const PeriodSwitcher = ({ period, setPeriod }: { period: Period; setPeriod: (p: Period) => void }) => {
+  const options: { k: Period; label: string }[] = [
+    { k: "1w", label: "1週" },
+    { k: "2w", label: "2週" },
+    { k: "1m", label: "1ヶ月" },
+  ];
+  return (
+    <Flex borderWidth="1px" borderColor="gray.300" borderRadius="6px" overflow="hidden">
+      {options.map((o, i) => {
+        const active = period === o.k;
+        return (
+          <button
+            key={o.k}
+            type="button"
+            onClick={() => setPeriod(o.k)}
+            style={{
+              height: 30,
+              padding: "0 12px",
+              background: active ? "#27272a" : "white",
+              color: active ? "white" : "#3f3f46",
+              border: "none",
+              borderLeft: i > 0 ? "1px solid #d4d4d8" : "none",
+              fontSize: 12,
+              fontWeight: active ? 600 : 500,
+              cursor: "pointer",
+              fontFamily: "inherit",
+            }}
+          >
+            {o.label}
+          </button>
+        );
+      })}
+    </Flex>
+  );
+};
+
+const ModeTabs = ({ active }: { active: "L1a" | "L1b" | "L1c" }) => {
+  const modes = [
+    { k: "L1a", l: "週表" },
+    { k: "L1b", l: "週折" },
+    { k: "L1c", l: "密度" },
+  ] as const;
+  return (
+    <Flex p="2px" bg="gray.100" borderRadius="7px" gap="2px">
+      {modes.map((m) => {
+        const a = active === m.k;
+        return (
+          <Box
+            key={m.k}
+            px="12px"
+            py="4px"
+            bg={a ? "white" : "transparent"}
+            color={a ? "gray.800" : "gray.500"}
+            borderRadius="5px"
+            fontSize="11px"
+            fontWeight={a ? 700 : 500}
+            cursor="pointer"
+            boxShadow={a ? "0 1px 2px rgba(0,0,0,0.06)" : "none"}
+          >
+            {m.l}
+          </Box>
+        );
+      })}
+    </Flex>
+  );
+};
+
+const WeekCard = ({
+  wi,
+  wkDates,
+  isOpen,
+  isCurrent,
+  onToggle,
+}: {
+  wi: number;
+  wkDates: MonthDate[];
+  isOpen: boolean;
+  isCurrent: boolean;
+  onToggle: () => void;
+}) => {
+  let weekHours = 0;
+  let weekSlots = 0;
+  const dayCounts = wkDates.map((_, i) => STAFFS.filter((s) => monthShiftOf(s.id, wi * 7 + i)).length);
+  STAFFS.forEach((s) => {
+    wkDates.forEach((_, i) => {
+      const asn = monthShiftOf(s.id, wi * 7 + i);
+      if (asn) {
+        weekHours += shiftHours(asn);
+        weekSlots += 1;
+      }
+    });
+  });
+  const activeStaff = STAFFS.filter((s) => wkDates.some((_, i) => monthShiftOf(s.id, wi * 7 + i))).length;
+
+  return (
+    <Box
+      bg="white"
+      borderRadius="10px"
+      borderWidth="1px"
+      borderColor={isOpen ? "teal.200" : "gray.200"}
+      boxShadow="0 1px 2px rgba(0,0,0,0.03)"
+      mb={3}
+      overflow="hidden"
+    >
+      <Flex
+        align="center"
+        gap={4}
+        px={4}
+        py={3}
+        bg={isOpen ? "teal.50" : "white"}
+        cursor="pointer"
+        borderBottomWidth={isOpen ? "1px" : "0"}
+        borderColor="teal.200"
+        onClick={onToggle}
+      >
+        <Flex
+          w="28px"
+          h="28px"
+          borderRadius="8px"
+          bg={isOpen ? "teal.600" : "gray.100"}
+          color={isOpen ? "white" : "gray.500"}
+          align="center"
+          justify="center"
+          fontSize="13px"
+          fontWeight={700}
+        >
+          {isOpen ? "▾" : "▸"}
+        </Flex>
+        <Box>
+          <Flex align="baseline" gap={2}>
+            <Box fontSize="15px" fontWeight={700} color="gray.800">
+              Week {wi + 1}
+            </Box>
+            {isCurrent && (
+              <Box
+                fontSize="10px"
+                px="8px"
+                py="2px"
+                bg="teal.600"
+                color="white"
+                borderRadius="999px"
+                fontWeight={700}
+                letterSpacing="0.3px"
+              >
+                今週
+              </Box>
+            )}
+          </Flex>
+          <Box fontSize="12px" color="gray.500" mt="2px">
+            {wkDates[0].d} – {wkDates[wkDates.length - 1].d}（{wkDates.length}日）
+          </Box>
+        </Box>
+
+        {!isOpen && (
+          <Flex align="flex-end" gap="4px" h="30px" ml={5}>
+            {dayCounts.map((c, i) => {
+              const max = Math.max(...dayCounts, 1);
+              return (
+                <Flex key={wkDates[i].iso} w="16px" direction="column" align="center" gap="2px" justify="flex-end">
+                  <Box
+                    w="100%"
+                    h={`${Math.max(3, (c / max) * 22)}px`}
+                    bg={c === 0 ? "gray.200" : "teal.400"}
+                    borderRadius="2px"
+                  />
+                  <Box fontSize="9px" color={dowColor(wkDates[i])} fontWeight={700} lineHeight="1">
+                    {wkDates[i].w}
+                  </Box>
+                </Flex>
+              );
+            })}
+          </Flex>
+        )}
+
+        <Flex ml="auto" gap={6} align="center">
+          <Box textAlign="right">
+            <Box fontSize="10px" color="gray.500" fontWeight={600} letterSpacing="0.5px">
+              合計時間
+            </Box>
+            <Box fontSize="18px" fontWeight={700} color="teal.700" fontVariantNumeric="tabular-nums" lineHeight="1.1">
+              {weekHours}
+              <Box as="span" fontSize="12px" ml="1px">
+                h
+              </Box>
+            </Box>
+          </Box>
+          <Box textAlign="right">
+            <Box fontSize="10px" color="gray.500" fontWeight={600} letterSpacing="0.5px">
+              出勤
+            </Box>
+            <Box fontSize="18px" fontWeight={700} color="gray.800" fontVariantNumeric="tabular-nums" lineHeight="1.1">
+              {weekSlots}
+              <Box as="span" fontSize="11px" ml="2px" color="gray.500">
+                コマ
+              </Box>
+            </Box>
+          </Box>
+          <Box textAlign="right">
+            <Box fontSize="10px" color="gray.500" fontWeight={600} letterSpacing="0.5px">
+              稼働スタッフ
+            </Box>
+            <Box fontSize="18px" fontWeight={700} color="gray.800" fontVariantNumeric="tabular-nums" lineHeight="1.1">
+              {activeStaff}
+              <Box as="span" fontSize="11px" ml="2px" color="gray.500">
+                人
+              </Box>
+            </Box>
+          </Box>
+        </Flex>
+      </Flex>
+
+      {isOpen && <WeekTable wi={wi} wkDates={wkDates} weekHours={weekHours} />}
+    </Box>
+  );
+};
+
+const WeekTable = ({ wi, wkDates, weekHours }: { wi: number; wkDates: MonthDate[]; weekHours: number }) => {
+  return (
+    <Box overflow="auto">
+      <Box as="table" w="100%" style={{ borderCollapse: "collapse" }} fontSize="12px">
+        <Box as="thead">
+          <Box as="tr" bg="gray.50" borderBottomWidth="1px" borderColor="gray.200">
+            <Box as="th" w="200px" px={4} py="10px" textAlign="left" fontSize="11px" fontWeight={600} color="gray.600">
+              スタッフ
+            </Box>
+            {wkDates.map((d) => (
+              <Box as="th" key={d.iso} px="4px" py="10px">
+                <Box fontSize="10px" color={dowColor(d)} fontWeight={700}>
+                  {d.w}
+                </Box>
+                <Box fontSize="12px" color="gray.700" mt="2px" fontWeight={600}>
+                  {d.d}
+                </Box>
+              </Box>
+            ))}
+            <Box as="th" w="72px" px={4} py="10px" textAlign="right" fontSize="11px" fontWeight={600} color="gray.600">
+              計
+            </Box>
+          </Box>
+        </Box>
+        <Box as="tbody">
+          {STAFFS.map((s) => {
+            let total = 0;
+            const isUnsub = s.status === "not_submitted";
+            return (
+              <Box as="tr" key={s.id} borderBottomWidth="1px" borderColor="gray.100">
+                <Box as="td" px={4} py="10px">
+                  <Flex align="center" gap={2}>
+                    <Avatar name={s.name} size={28} />
+                    <Box minW={0}>
+                      <Box fontSize="13px" fontWeight={600} color={isUnsub ? "gray.400" : "gray.800"}>
+                        {s.name}
+                      </Box>
+                      {isUnsub && (
+                        <Box fontSize="10px" color="orange.600" fontWeight={700}>
+                          未提出
+                        </Box>
+                      )}
+                    </Box>
+                  </Flex>
+                </Box>
+                {wkDates.map((d, i) => {
+                  const asn = monthShiftOf(s.id, wi * 7 + i);
+                  if (asn) total += shiftHours(asn);
+                  return (
+                    <Box as="td" key={d.iso} px="4px" py="8px" textAlign="center" verticalAlign="middle">
+                      {asn ? (
+                        <Box
+                          display="inline-block"
+                          px="8px"
+                          py="4px"
+                          bg="teal.50"
+                          color="teal.700"
+                          fontSize="11px"
+                          fontWeight={600}
+                          borderRadius="5px"
+                          borderWidth="1px"
+                          borderColor="teal.200"
+                          fontVariantNumeric="tabular-nums"
+                          cursor="pointer"
+                          _hover={{ bg: "teal.100" }}
+                        >
+                          {asn[0]}–{asn[1]}
+                        </Box>
+                      ) : (
+                        <Box color="gray.300" fontSize="12px">
+                          —
+                        </Box>
+                      )}
+                    </Box>
+                  );
+                })}
+                <Box
+                  as="td"
+                  px={4}
+                  py="10px"
+                  textAlign="right"
+                  fontWeight={700}
+                  color={total ? "gray.800" : "gray.300"}
+                  fontVariantNumeric="tabular-nums"
+                  fontSize="13px"
+                >
+                  {total ? `${total}h` : "—"}
+                </Box>
+              </Box>
+            );
+          })}
+        </Box>
+        <Box as="tfoot">
+          <Box as="tr" bg="teal.50" borderTopWidth="2px" borderColor="teal.200">
+            <Box as="td" px={4} py="10px" fontSize="11px" fontWeight={700} color="teal.700">
+              出勤人数
+            </Box>
+            {wkDates.map((d, i) => {
+              const n = STAFFS.filter((s) => monthShiftOf(s.id, wi * 7 + i)).length;
+              return (
+                <Box
+                  as="td"
+                  key={d.iso}
+                  px="4px"
+                  py="8px"
+                  textAlign="center"
+                  fontSize="12px"
+                  fontWeight={700}
+                  color="teal.700"
+                  fontVariantNumeric="tabular-nums"
+                >
+                  {n}人
+                </Box>
+              );
+            })}
+            <Box
+              as="td"
+              px={4}
+              py="10px"
+              textAlign="right"
+              fontSize="12px"
+              fontWeight={700}
+              color="teal.700"
+              fontVariantNumeric="tabular-nums"
+            >
+              {weekHours}h
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+// ---- SP (L1b) -----------------------------------------------------------
+
+export const ListSP = () => {
+  const [period, setPeriod] = useState<Period>("1m");
+  const dates = useMemo(() => buildMonthDates(periodWeeks[period]), [period]);
+  const weekCount = Math.ceil(dates.length / 7);
+  const [open, setOpen] = useState<Record<number, boolean>>({ 0: true });
+
+  const periodLabel = period === "1w" ? "1/5 – 1/11" : period === "2w" ? "1/5 – 1/18" : "2026年 1月";
+
+  return (
+    <Flex direction="column" flex={1} minH={0}>
+      <Flex
+        px={3}
+        py={3}
+        bg="white"
+        borderBottomWidth="1px"
+        borderColor="gray.100"
+        align="center"
+        gap={2}
+        flexShrink={0}
+      >
+        <button
+          type="button"
+          style={{
+            width: 30,
+            height: 30,
+            border: "1px solid #d4d4d8",
+            background: "white",
+            borderRadius: 6,
+            color: "#52525b",
+            cursor: "pointer",
+          }}
+        >
+          <LuChevronLeft size={13} style={{ margin: "0 auto" }} />
+        </button>
+        <Flex
+          flex={1}
+          h="30px"
+          align="center"
+          justify="center"
+          gap="6px"
+          borderWidth="1px"
+          borderColor="gray.200"
+          borderRadius="6px"
+          bg="white"
+          fontSize="13px"
+          fontWeight={700}
+          color="gray.800"
+        >
+          <LuCalendar size={13} color="#71717a" />
+          {periodLabel}
+        </Flex>
+        <button
+          type="button"
+          style={{
+            width: 30,
+            height: 30,
+            border: "1px solid #d4d4d8",
+            background: "white",
+            borderRadius: 6,
+            color: "#52525b",
+            cursor: "pointer",
+          }}
+        >
+          <LuChevronRight size={13} style={{ margin: "0 auto" }} />
+        </button>
+      </Flex>
+
+      <Flex
+        px={3}
+        py={2}
+        bg="white"
+        borderBottomWidth="1px"
+        borderColor="gray.200"
+        gap={2}
+        align="center"
+        flexShrink={0}
+        overflowX="auto"
+      >
+        <PeriodSwitcher period={period} setPeriod={setPeriod} />
+        <ModeTabs active="L1b" />
+      </Flex>
+
+      <Box flex={1} minH={0} overflow="auto" p={3}>
+        {Array.from({ length: weekCount }).map((_, wi) => {
+          const wkDates = dates.filter((d) => d.weekIdx === wi);
+          const isOpen = !!open[wi];
+          const isCurrent = wi === 0;
+          return (
+            <WeekCardSP
+              key={wi}
+              wi={wi}
+              wkDates={wkDates}
+              isOpen={isOpen}
+              isCurrent={isCurrent}
+              onToggle={() => setOpen({ ...open, [wi]: !isOpen })}
+            />
+          );
+        })}
+      </Box>
+    </Flex>
+  );
+};
+
+const WeekCardSP = ({
+  wi,
+  wkDates,
+  isOpen,
+  isCurrent,
+  onToggle,
+}: {
+  wi: number;
+  wkDates: MonthDate[];
+  isOpen: boolean;
+  isCurrent: boolean;
+  onToggle: () => void;
+}) => {
+  let weekHours = 0;
+  let weekSlots = 0;
+  STAFFS.forEach((s) => {
+    wkDates.forEach((_, i) => {
+      const asn = monthShiftOf(s.id, wi * 7 + i);
+      if (asn) {
+        weekHours += shiftHours(asn);
+        weekSlots += 1;
+      }
+    });
+  });
+
+  return (
+    <Box
+      bg="white"
+      borderRadius="10px"
+      borderWidth="1px"
+      borderColor={isOpen ? "teal.300" : "gray.200"}
+      boxShadow={isOpen ? "0 1px 3px rgba(0,0,0,0.04)" : "none"}
+      mb={2}
+      overflow="hidden"
+    >
+      <Flex
+        align="center"
+        gap={2}
+        p="12px 14px"
+        bg={isOpen ? "teal.50" : "white"}
+        borderBottomWidth={isOpen ? "1px" : "0"}
+        borderColor="teal.200"
+        cursor="pointer"
+        onClick={onToggle}
+      >
+        <Flex
+          w="22px"
+          h="22px"
+          borderRadius="6px"
+          bg={isOpen ? "teal.500" : "gray.100"}
+          color={isOpen ? "white" : "gray.500"}
+          align="center"
+          justify="center"
+          fontSize="12px"
+          fontWeight={700}
+        >
+          {isOpen ? "▾" : "▸"}
+        </Flex>
+        <Box flex={1}>
+          <Flex align="baseline" gap={2}>
+            <Box fontSize="13px" fontWeight={700} color="gray.800">
+              Week {wi + 1}
+            </Box>
+            {isCurrent && (
+              <Box fontSize="9px" px="6px" py="1px" bg="teal.600" color="white" borderRadius="999px" fontWeight={700}>
+                今週
+              </Box>
+            )}
+          </Flex>
+          <Box fontSize="11px" color="gray.500" mt="1px">
+            {wkDates[0].d} – {wkDates[wkDates.length - 1].d}
+          </Box>
+        </Box>
+        <Box textAlign="right">
+          <Box fontSize="14px" fontWeight={700} color="teal.700" fontVariantNumeric="tabular-nums" lineHeight="1">
+            {weekHours}h
+          </Box>
+          <Box fontSize="10px" color="gray.500" mt="2px">
+            {weekSlots}コマ
+          </Box>
+        </Box>
+      </Flex>
+
+      {isOpen && (
+        <Box>
+          {wkDates.map((d, i) => {
+            const working = STAFFS.filter((s) => monthShiftOf(s.id, wi * 7 + i));
+            return (
+              <Flex
+                key={d.iso}
+                gap={3}
+                p="10px 14px"
+                borderTopWidth={i > 0 ? "1px" : "0"}
+                borderColor="gray.100"
+                align="flex-start"
+              >
+                <Box w="44px" flexShrink={0}>
+                  <Box fontSize="10px" color={dowColor(d)} fontWeight={700}>
+                    {d.w}
+                  </Box>
+                  <Box fontSize="14px" fontWeight={700} color="gray.800" lineHeight="1.1">
+                    {d.d}
+                  </Box>
+                </Box>
+                <Box flex={1} minW={0}>
+                  {working.length > 0 ? (
+                    <Flex direction="column" gap="5px">
+                      {working.map((s) => {
+                        const asn = monthShiftOf(s.id, wi * 7 + i);
+                        return (
+                          <Flex key={s.id} align="center" gap={2} fontSize="11px">
+                            <Avatar name={s.name} size={22} />
+                            <Box color="gray.800" fontWeight={600} minW="70px">
+                              {s.name}
+                            </Box>
+                            <Box color="teal.700" fontWeight={700} fontVariantNumeric="tabular-nums">
+                              {asn?.[0]}–{asn?.[1]}
+                            </Box>
+                          </Flex>
+                        );
+                      })}
+                    </Flex>
+                  ) : (
+                    <Box fontSize="11px" color="gray.400" py="4px">
+                      出勤なし
+                    </Box>
+                  )}
+                </Box>
+              </Flex>
+            );
+          })}
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/src/components/mocks/ShiftForm/index.stories.tsx b/src/components/mocks/ShiftForm/index.stories.tsx
new file mode 100644
index 00000000..4b4fb1c3
--- /dev/null
+++ b/src/components/mocks/ShiftForm/index.stories.tsx
@@ -0,0 +1,114 @@
+import { Box, Flex } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { DailyPC, DailySP, unsubmittedNames } from "./DailyView";
+import { ListPC, ListSP } from "./ListView";
+import { DATES } from "./mockData";
+import {
+  AppHeader,
+  AppHeaderSP,
+  FilterButton,
+  FrameBox,
+  HeaderActions,
+  PageTabs,
+  type TabKey,
+  UnsubmittedStrip,
+  UnsubmittedStripSP,
+} from "./parts";
+
+const rangeLabel = `${DATES[0].d}(${DATES[0].w}) – ${DATES[DATES.length - 1].d}(${DATES[DATES.length - 1].w})`;
+
+const PCApp = ({ initialTab = "daily" as TabKey }: { initialTab?: TabKey }) => {
+  const [tab, setTab] = useState<TabKey>(initialTab);
+  return (
+    <FrameBox>
+      <AppHeader />
+      <Flex
+        px={5}
+        py={3}
+        bg="white"
+        borderBottomWidth="1px"
+        borderColor="gray.100"
+        align="center"
+        gap={3}
+        flexShrink={0}
+      >
+        <Box fontSize="11px" color="teal.700" fontWeight={700} letterSpacing="1px">
+          シフト作成
+        </Box>
+        <Box fontSize="16px" fontWeight={700} color="gray.800">
+          {rangeLabel}
+        </Box>
+        <Box px="8px" py="2px" borderRadius="999px" fontSize="10px" fontWeight={700} bg="gray.100" color="gray.600">
+          下書き
+        </Box>
+        <Flex ml="auto" align="center" gap={2}>
+          <FilterButton />
+          <HeaderActions />
+        </Flex>
+      </Flex>
+      <PageTabs active={tab} onChange={setTab} />
+      <Flex flex={1} minH={0} direction="column">
+        {tab === "daily" ? <DailyPC /> : <ListPC />}
+      </Flex>
+      {tab === "daily" && <UnsubmittedStrip names={unsubmittedNames()} />}
+    </FrameBox>
+  );
+};
+
+const SPApp = ({ initialTab = "daily" as TabKey }: { initialTab?: TabKey }) => {
+  const [tab, setTab] = useState<TabKey>(initialTab);
+  return (
+    <FrameBox>
+      <AppHeaderSP />
+      <Flex
+        px={3}
+        py="10px"
+        bg="white"
+        borderBottomWidth="1px"
+        borderColor="gray.100"
+        align="center"
+        gap={2}
+        flexShrink={0}
+      >
+        <Box fontSize="13px" fontWeight={700} color="gray.800">
+          {rangeLabel}
+        </Box>
+        <Flex ml="auto" gap={1}>
+          <HeaderActions compact />
+        </Flex>
+      </Flex>
+      <PageTabs compact active={tab} onChange={setTab} />
+      <Box flex={1} minH={0} overflow="auto">
+        {tab === "daily" ? <DailySP /> : <ListSP />}
+      </Box>
+      {tab === "daily" && <UnsubmittedStripSP names={unsubmittedNames()} />}
+    </FrameBox>
+  );
+};
+
+const meta = {
+  title: "Mocks/ShiftForm",
+  parameters: { layout: "fullscreen" },
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100dvh", display: "flex", flexDirection: "column" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PC_Daily: Story = { render: () => <PCApp initialTab="daily" /> };
+export const PC_List: Story = { render: () => <PCApp initialTab="list" /> };
+export const SP_Daily: Story = {
+  render: () => <SPApp initialTab="daily" />,
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+};
+export const SP_List: Story = {
+  render: () => <SPApp initialTab="list" />,
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+};
diff --git a/src/components/mocks/ShiftForm/mockData.ts b/src/components/mocks/ShiftForm/mockData.ts
new file mode 100644
index 00000000..05665aa3
--- /dev/null
+++ b/src/components/mocks/ShiftForm/mockData.ts
@@ -0,0 +1,278 @@
+import dayjs from "dayjs";
+
+export type StaffStatus = "submitted" | "no_request" | "not_submitted";
+
+export type MockStaff = {
+  id: string;
+  name: string;
+  status: StaffStatus;
+};
+
+export type PositionSegment = {
+  positionId: string;
+  start: string;
+  end: string;
+};
+
+export type ShiftEntry = {
+  req: [string, string] | null;
+  asn: [string, string] | null;
+  segments?: PositionSegment[];
+};
+
+export type MockPosition = {
+  id: string;
+  name: string;
+  color: string;
+  tint: string;
+};
+
+export const POSITIONS: MockPosition[] = [
+  { id: "hall", name: "ホール", color: "#14b8a6", tint: "#99f6e4" },
+  { id: "kitchen", name: "キッチン", color: "#f59e0b", tint: "#fde68a" },
+  { id: "register", name: "レジ", color: "#6366f1", tint: "#c7d2fe" },
+];
+
+export const TIME_RANGE = { start: 9, end: 22 };
+
+export type DateRow = {
+  iso: string;
+  d: string;
+  dd: number;
+  w: string;
+  sat?: boolean;
+  sun?: boolean;
+};
+
+export const DATES: DateRow[] = [
+  { iso: "2026-01-20", d: "1/20", dd: 20, w: "火" },
+  { iso: "2026-01-21", d: "1/21", dd: 21, w: "水" },
+  { iso: "2026-01-22", d: "1/22", dd: 22, w: "木" },
+  { iso: "2026-01-23", d: "1/23", dd: 23, w: "金" },
+  { iso: "2026-01-24", d: "1/24", dd: 24, w: "土", sat: true },
+  { iso: "2026-01-25", d: "1/25", dd: 25, w: "日", sun: true },
+  { iso: "2026-01-26", d: "1/26", dd: 26, w: "月" },
+];
+
+export const STAFFS: MockStaff[] = [
+  { id: "s1", name: "鈴木太郎", status: "submitted" },
+  { id: "s2", name: "佐藤花子", status: "submitted" },
+  { id: "s3", name: "田中次郎", status: "not_submitted" },
+  { id: "s4", name: "山田美咲", status: "submitted" },
+  { id: "s5", name: "高橋翔太", status: "submitted" },
+  { id: "s6", name: "渡辺優子", status: "submitted" },
+  { id: "s7", name: "伊藤健一", status: "no_request" },
+  { id: "s8", name: "中村真理", status: "submitted" },
+  { id: "s9", name: "小林大輔", status: "not_submitted" },
+  { id: "s10", name: "加藤美穂", status: "submitted" },
+];
+
+const s = (start: string, end: string, segments?: PositionSegment[]): ShiftEntry => ({
+  req: [start, end],
+  asn: [start, end],
+  segments,
+});
+const reqOnly = (start: string, end: string): ShiftEntry => ({ req: [start, end], asn: null });
+const off = (): ShiftEntry => ({ req: null, asn: null });
+
+export const SHIFTS: Record<string, Record<string, ShiftEntry>> = {
+  s1: {
+    "2026-01-20": s("10:00", "18:00", [
+      { positionId: "hall", start: "10:00", end: "14:00" },
+      { positionId: "register", start: "14:00", end: "18:00" },
+    ]),
+    "2026-01-21": s("10:00", "18:00", [
+      { positionId: "hall", start: "10:00", end: "13:00" },
+      { positionId: "register", start: "13:00", end: "18:00" },
+    ]),
+    "2026-01-22": s("10:00", "18:00", [{ positionId: "hall", start: "10:00", end: "18:00" }]),
+    "2026-01-23": s("10:00", "14:00", [{ positionId: "hall", start: "10:00", end: "14:00" }]),
+    "2026-01-24": s("10:00", "18:00", [
+      { positionId: "hall", start: "10:00", end: "14:00" },
+      { positionId: "register", start: "14:00", end: "18:00" },
+    ]),
+    "2026-01-25": off(),
+    "2026-01-26": off(),
+  },
+  s2: {
+    "2026-01-20": off(),
+    "2026-01-21": s("11:00", "19:00", [{ positionId: "kitchen", start: "11:00", end: "19:00" }]),
+    "2026-01-22": s("11:00", "19:00", [{ positionId: "kitchen", start: "11:00", end: "19:00" }]),
+    "2026-01-23": off(),
+    "2026-01-24": s("11:00", "19:00", [{ positionId: "kitchen", start: "11:00", end: "19:00" }]),
+    "2026-01-25": off(),
+    "2026-01-26": s("11:00", "19:00", [{ positionId: "kitchen", start: "11:00", end: "19:00" }]),
+  },
+  s3: {},
+  s4: {
+    "2026-01-20": s("14:00", "21:00", [{ positionId: "hall", start: "14:00", end: "21:00" }]),
+    "2026-01-21": off(),
+    "2026-01-22": s("14:00", "21:00", [{ positionId: "hall", start: "14:00", end: "21:00" }]),
+    "2026-01-23": s("14:00", "21:00", [
+      { positionId: "hall", start: "14:00", end: "18:00" },
+      { positionId: "register", start: "18:00", end: "21:00" },
+    ]),
+    "2026-01-24": s("14:00", "21:00", [{ positionId: "hall", start: "14:00", end: "21:00" }]),
+    "2026-01-25": off(),
+    "2026-01-26": s("14:00", "21:00", [{ positionId: "hall", start: "14:00", end: "21:00" }]),
+  },
+  s5: {
+    "2026-01-20": s("10:00", "15:00", [{ positionId: "register", start: "10:00", end: "15:00" }]),
+    "2026-01-21": s("10:00", "15:00", [{ positionId: "register", start: "10:00", end: "15:00" }]),
+    "2026-01-22": off(),
+    "2026-01-23": s("10:00", "15:00", [{ positionId: "register", start: "10:00", end: "15:00" }]),
+    "2026-01-24": reqOnly("10:00", "15:00"),
+    "2026-01-25": off(),
+    "2026-01-26": off(),
+  },
+  s6: {
+    "2026-01-20": s("09:00", "17:00", [
+      { positionId: "kitchen", start: "09:00", end: "13:00" },
+      { positionId: "hall", start: "13:00", end: "17:00" },
+    ]),
+    "2026-01-21": off(),
+    "2026-01-22": s("09:00", "17:00", [{ positionId: "kitchen", start: "09:00", end: "17:00" }]),
+    "2026-01-23": off(),
+    "2026-01-24": s("09:00", "17:00", [{ positionId: "kitchen", start: "09:00", end: "17:00" }]),
+    "2026-01-25": off(),
+    "2026-01-26": off(),
+  },
+  s7: {},
+  s8: {
+    "2026-01-20": s("10:00", "16:00", [{ positionId: "hall", start: "10:00", end: "16:00" }]),
+    "2026-01-21": s("10:00", "16:00", [{ positionId: "hall", start: "10:00", end: "16:00" }]),
+    "2026-01-22": s("10:00", "16:00", [{ positionId: "hall", start: "10:00", end: "16:00" }]),
+    "2026-01-23": s("10:00", "16:00", [{ positionId: "hall", start: "10:00", end: "16:00" }]),
+    "2026-01-24": s("10:00", "16:00", [{ positionId: "hall", start: "10:00", end: "16:00" }]),
+    "2026-01-25": off(),
+    "2026-01-26": off(),
+  },
+  s9: {},
+  s10: {
+    "2026-01-20": s("11:00", "18:00", [{ positionId: "register", start: "11:00", end: "18:00" }]),
+    "2026-01-21": off(),
+    "2026-01-22": s("11:00", "18:00", [{ positionId: "register", start: "11:00", end: "18:00" }]),
+    "2026-01-23": off(),
+    "2026-01-24": s("11:00", "18:00", [{ positionId: "register", start: "11:00", end: "18:00" }]),
+    "2026-01-25": off(),
+    "2026-01-26": s("11:00", "18:00", [{ positionId: "register", start: "11:00", end: "18:00" }]),
+  },
+};
+
+export const PEAK_BANDS = [
+  { startHour: 12, endHour: 14, label: "ランチ", required: 4 },
+  { startHour: 18, endHour: 21, label: "ディナー", required: 4 },
+];
+
+export function requiredAt(hour: number): number {
+  for (const b of PEAK_BANDS) if (hour >= b.startHour && hour < b.endHour) return b.required;
+  return 2;
+}
+
+export function timeToPct(hhmm: string): number {
+  const [h, m] = hhmm.split(":").map(Number);
+  const total = TIME_RANGE.end - TIME_RANGE.start;
+  return ((h + m / 60 - TIME_RANGE.start) / total) * 100;
+}
+
+export function minutesBetween(a: string, b: string): number {
+  const [ah, am] = a.split(":").map(Number);
+  const [bh, bm] = b.split(":").map(Number);
+  return bh * 60 + bm - (ah * 60 + am);
+}
+
+export function hoursBetween(a: string, b: string): number {
+  return minutesBetween(a, b) / 60;
+}
+
+export function shiftOf(staffId: string, iso: string): ShiftEntry | null {
+  return SHIFTS[staffId]?.[iso] ?? null;
+}
+
+export function countWorkingAt(iso: string, hour: number): number {
+  let n = 0;
+  for (const sid of Object.keys(SHIFTS)) {
+    const sh = SHIFTS[sid][iso];
+    if (!sh?.asn) continue;
+    const [s1] = sh.asn[0].split(":").map(Number);
+    const [e1] = sh.asn[1].split(":").map(Number);
+    if (hour >= s1 && hour < e1) n += 1;
+  }
+  return n;
+}
+
+export function dayIsSatisfied(iso: string): boolean {
+  for (let h = TIME_RANGE.start; h < TIME_RANGE.end; h++) {
+    if (countWorkingAt(iso, h) < requiredAt(h)) return false;
+  }
+  return true;
+}
+
+export function positionById(id: string): MockPosition {
+  return POSITIONS.find((p) => p.id === id) ?? POSITIONS[0];
+}
+
+export function dowColor(date: DateRow): string {
+  if (date.sat) return "#2563eb";
+  if (date.sun) return "#dc2626";
+  return "#3f3f46";
+}
+
+export function workingStaffFor(iso: string) {
+  return STAFFS.filter((st) => SHIFTS[st.id]?.[iso]?.asn);
+}
+
+export function unsubmittedStaff() {
+  return STAFFS.filter((st) => st.status === "not_submitted");
+}
+
+// ---- Month (L1b) dataset ---------------------------------------------------
+// 4 weeks starting Mon 2026-01-05, derived deterministically from STAFFS.
+
+export type MonthDate = {
+  iso: string;
+  d: string;
+  w: string;
+  dd: number;
+  weekIdx: number;
+  sat: boolean;
+  sun: boolean;
+};
+
+const WK = ["日", "月", "火", "水", "木", "金", "土"];
+
+export function buildMonthDates(weeks: number): MonthDate[] {
+  const start = dayjs("2026-01-05");
+  const out: MonthDate[] = [];
+  for (let i = 0; i < weeks * 7; i++) {
+    const d = start.add(i, "day");
+    const dow = d.day();
+    out.push({
+      iso: d.format("YYYY-MM-DD"),
+      d: `${d.month() + 1}/${d.date()}`,
+      w: WK[dow],
+      dd: d.date(),
+      weekIdx: Math.floor(i / 7),
+      sat: dow === 6,
+      sun: dow === 0,
+    });
+  }
+  return out;
+}
+
+export function monthShiftOf(staffId: string, dayIdx: number): [string, string] | null {
+  const staff = STAFFS.find((st) => st.id === staffId);
+  if (!staff || staff.status === "not_submitted") return null;
+  const num = Number.parseInt(staffId.slice(1), 10);
+  const seed = (num * 7 + dayIdx) % 11;
+  if (seed < 3) return null;
+  const starts: [string, string][] = [
+    ["09:00", "15:00"],
+    ["10:00", "18:00"],
+    ["11:00", "19:00"],
+    ["14:00", "21:00"],
+    ["13:00", "20:00"],
+  ];
+  const idx = (num + dayIdx) % starts.length;
+  return starts[idx];
+}
diff --git a/src/components/mocks/ShiftForm/parts.tsx b/src/components/mocks/ShiftForm/parts.tsx
new file mode 100644
index 00000000..0c5e3f75
--- /dev/null
+++ b/src/components/mocks/ShiftForm/parts.tsx
@@ -0,0 +1,304 @@
+import { Box, Flex } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { LuBell, LuChevronDown, LuDownload, LuFilter, LuSave } from "react-icons/lu";
+
+export const Avatar = ({ name, size = 28 }: { name: string; size?: number }) => {
+  const hue = Math.abs(name.charCodeAt(0) * 13 + name.charCodeAt(1 % name.length) * 7) % 360;
+  const bg = `oklch(0.94 0.04 ${hue})`;
+  const fg = `oklch(0.42 0.12 ${hue})`;
+  return (
+    <Box
+      w={`${size}px`}
+      h={`${size}px`}
+      borderRadius="50%"
+      bg={bg}
+      color={fg}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      fontSize={`${Math.round(size * 0.42)}px`}
+      fontWeight={700}
+      flexShrink={0}
+      letterSpacing="0"
+    >
+      {name.slice(0, 1)}
+    </Box>
+  );
+};
+
+export const AppHeader = ({ shopName = "カフェ モカ 渋谷店" }: { shopName?: string }) => (
+  <Flex h="44px" bg="teal.600" align="center" px={5} gap={3} color="white" flexShrink={0}>
+    <Box fontSize="13px" fontWeight={700} letterSpacing="0.5px">
+      シフトリ
+    </Box>
+    <Box w="1px" h="18px" bg="whiteAlpha.400" />
+    <Box fontSize="12px" opacity={0.95}>
+      {shopName}
+    </Box>
+    <Flex ml="auto" align="center" gap={3} fontSize="12px">
+      <Box opacity={0.9}>
+        <LuBell size={14} />
+      </Box>
+      <Flex
+        w="26px"
+        h="26px"
+        borderRadius="50%"
+        bg="whiteAlpha.300"
+        align="center"
+        justify="center"
+        fontSize="11px"
+        fontWeight={700}
+      >
+        店
+      </Flex>
+    </Flex>
+  </Flex>
+);
+
+export const AppHeaderSP = ({ shopName = "カフェ モカ" }: { shopName?: string }) => (
+  <Flex h="44px" bg="teal.600" align="center" px={4} color="white" flexShrink={0}>
+    <Box fontSize="13px" fontWeight={700}>
+      シフトリ
+    </Box>
+    <Box ml="auto" fontSize="11px" opacity={0.9}>
+      {shopName}
+    </Box>
+  </Flex>
+);
+
+export type TabKey = "daily" | "list";
+
+export const PageTabs = ({
+  active,
+  onChange,
+  compact = false,
+}: {
+  active: TabKey;
+  onChange: (k: TabKey) => void;
+  compact?: boolean;
+}) => {
+  const tabs: { k: TabKey; label: string }[] = [
+    { k: "daily", label: "割当" },
+    { k: "list", label: "一覧" },
+  ];
+  return (
+    <Flex bg="white" borderBottomWidth="1px" borderColor="gray.200" flexShrink={0}>
+      {tabs.map((t) => {
+        const is = active === t.k;
+        return (
+          <Box
+            key={t.k}
+            onClick={() => onChange(t.k)}
+            cursor="pointer"
+            flex={compact ? 1 : "none"}
+            textAlign="center"
+            px={compact ? 0 : 6}
+            py={compact ? "11px" : "13px"}
+            fontSize={compact ? "13px" : "13px"}
+            fontWeight={is ? 700 : 500}
+            color={is ? "teal.700" : "gray.500"}
+            borderBottomWidth="2px"
+            borderColor={is ? "teal.600" : "transparent"}
+            mb="-1px"
+            transition="color 120ms"
+          >
+            {t.label}
+          </Box>
+        );
+      })}
+    </Flex>
+  );
+};
+
+type ActionsProps = {
+  compact?: boolean;
+  onSave?: () => void;
+  onConfirm?: () => void;
+  onExport?: () => void;
+};
+
+export const HeaderActions = ({
+  compact = false,
+  onSave = () => {},
+  onConfirm = () => {},
+  onExport = () => {},
+}: ActionsProps) => (
+  <Flex gap={2} align="center">
+    <button
+      type="button"
+      onClick={onSave}
+      style={{
+        height: compact ? 28 : 32,
+        padding: compact ? "0 10px" : "0 14px",
+        background: "white",
+        color: "#3f3f46",
+        border: "1px solid #d4d4d8",
+        borderRadius: 6,
+        cursor: "pointer",
+        fontSize: compact ? 12 : 13,
+        fontWeight: 500,
+        fontFamily: "inherit",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+      }}
+    >
+      {compact ? <LuSave size={13} /> : "一時保存"}
+    </button>
+    <button
+      type="button"
+      onClick={onConfirm}
+      style={{
+        height: compact ? 28 : 32,
+        padding: compact ? "0 12px" : "0 16px",
+        background: "#0d9488",
+        color: "white",
+        border: "none",
+        borderRadius: 6,
+        cursor: "pointer",
+        fontSize: compact ? 12 : 13,
+        fontWeight: 600,
+        fontFamily: "inherit",
+        boxShadow: "0 1px 2px rgba(13,148,136,0.25)",
+      }}
+    >
+      {compact ? "確定" : "確定して通知する"}
+    </button>
+    <button
+      type="button"
+      onClick={onExport}
+      style={{
+        height: compact ? 28 : 32,
+        padding: compact ? "0 10px" : "0 12px 0 14px",
+        background: "white",
+        color: "#0f766e",
+        border: "1px solid #5eead4",
+        borderRadius: 6,
+        cursor: "pointer",
+        fontSize: compact ? 12 : 13,
+        fontWeight: 600,
+        fontFamily: "inherit",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+      }}
+    >
+      <LuDownload size={compact ? 12 : 14} />
+      {!compact && <span>エクスポート</span>}
+      <LuChevronDown size={compact ? 10 : 12} style={{ opacity: 0.8 }} />
+    </button>
+  </Flex>
+);
+
+export const FilterButton = ({ compact = false }: { compact?: boolean }) => (
+  <button
+    type="button"
+    style={{
+      height: compact ? 28 : 32,
+      padding: compact ? "0 10px" : "0 12px",
+      background: "white",
+      color: "#3f3f46",
+      border: "1px solid #d4d4d8",
+      borderRadius: 6,
+      cursor: "pointer",
+      fontSize: compact ? 12 : 12,
+      fontWeight: 500,
+      fontFamily: "inherit",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+    }}
+  >
+    <LuFilter size={12} />
+    {!compact && "絞り込み"}
+  </button>
+);
+
+export const UnsubmittedStrip = ({ names }: { names: string[] }) => {
+  if (!names.length) return null;
+  return (
+    <Flex
+      align="center"
+      gap={3}
+      px={5}
+      py="10px"
+      bg="orange.50"
+      borderTopWidth="1px"
+      borderColor="orange.200"
+      flexShrink={0}
+    >
+      <Box fontSize="12px" fontWeight={700} color="orange.700" flexShrink={0}>
+        未提出 {names.length}人
+      </Box>
+      <Flex gap={2} overflow="auto" flex={1}>
+        {names.map((n) => (
+          <Box
+            key={n}
+            fontSize="11px"
+            flexShrink={0}
+            px={2}
+            py="2px"
+            color="orange.700"
+            bg="white"
+            borderWidth="1px"
+            borderColor="orange.200"
+            borderRadius="999px"
+          >
+            {n}
+          </Box>
+        ))}
+      </Flex>
+      <button
+        type="button"
+        style={{
+          height: 26,
+          padding: "0 10px",
+          background: "white",
+          color: "#b45309",
+          border: "1px solid #fcd34d",
+          borderRadius: 6,
+          fontSize: 11,
+          fontWeight: 700,
+          cursor: "pointer",
+          flexShrink: 0,
+          fontFamily: "inherit",
+        }}
+      >
+        催促を送る
+      </button>
+    </Flex>
+  );
+};
+
+export const UnsubmittedStripSP = ({ names }: { names: string[] }) => {
+  if (!names.length) return null;
+  return (
+    <Flex
+      align="center"
+      gap={2}
+      px={4}
+      py={3}
+      bg="orange.50"
+      borderTopWidth="1px"
+      borderColor="orange.200"
+      flexShrink={0}
+    >
+      <Box w="6px" h="6px" borderRadius="50%" bg="orange.500" flexShrink={0} />
+      <Box fontSize="13px" fontWeight={700} color="orange.700">
+        未提出 {names.length}人
+      </Box>
+      <Box fontSize="11px" color="orange.700" opacity={0.8}>
+        タップで催促
+      </Box>
+      <Box ml="auto" color="orange.700" fontSize="16px">
+        ›
+      </Box>
+    </Flex>
+  );
+};
+
+export const FrameBox = ({ children }: { children: ReactNode }) => (
+  <Box w="100%" h="100%" bg="gray.50" display="flex" flexDirection="column" overflow="hidden">
+    {children}
+  </Box>
+);
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 84ce9ed8..1f7d32ea 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -20,6 +20,7 @@ import { Route as UnregisteredShiftsViewRouteImport } from './routes/_unregister
 import { Route as UnregisteredShiftsSubmitRouteImport } from './routes/_unregistered/shifts.submit'
 import { Route as UnregisteredShiftsReissueRouteImport } from './routes/_unregistered/shifts.reissue'
 import { Route as AuthShiftboardRecruitmentIdRouteImport } from './routes/_auth/shiftboard.$recruitmentId'
+import { Route as UnregisteredShiftsSubmitCompletedRouteImport } from './routes/_unregistered/shifts.submit_.completed'
 
 const TermsRoute = TermsRouteImport.update({
   id: '/terms',
@@ -77,6 +78,12 @@ const AuthShiftboardRecruitmentIdRoute =
     path: '/shiftboard/$recruitmentId',
     getParentRoute: () => AuthRoute,
   } as any)
+const UnregisteredShiftsSubmitCompletedRoute =
+  UnregisteredShiftsSubmitCompletedRouteImport.update({
+    id: '/shifts/submit_/completed',
+    path: '/shifts/submit/completed',
+    getParentRoute: () => UnregisteredRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -88,6 +95,7 @@ export interface FileRoutesByFullPath {
   '/shifts/reissue': typeof UnregisteredShiftsReissueRoute
   '/shifts/submit': typeof UnregisteredShiftsSubmitRoute
   '/shifts/view': typeof UnregisteredShiftsViewRoute
+  '/shifts/submit/completed': typeof UnregisteredShiftsSubmitCompletedRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -99,6 +107,7 @@ export interface FileRoutesByTo {
   '/shifts/reissue': typeof UnregisteredShiftsReissueRoute
   '/shifts/submit': typeof UnregisteredShiftsSubmitRoute
   '/shifts/view': typeof UnregisteredShiftsViewRoute
+  '/shifts/submit/completed': typeof UnregisteredShiftsSubmitCompletedRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -113,6 +122,7 @@ export interface FileRoutesById {
   '/_unregistered/shifts/reissue': typeof UnregisteredShiftsReissueRoute
   '/_unregistered/shifts/submit': typeof UnregisteredShiftsSubmitRoute
   '/_unregistered/shifts/view': typeof UnregisteredShiftsViewRoute
+  '/_unregistered/shifts/submit_/completed': typeof UnregisteredShiftsSubmitCompletedRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -126,6 +136,7 @@ export interface FileRouteTypes {
     | '/shifts/reissue'
     | '/shifts/submit'
     | '/shifts/view'
+    | '/shifts/submit/completed'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -137,6 +148,7 @@ export interface FileRouteTypes {
     | '/shifts/reissue'
     | '/shifts/submit'
     | '/shifts/view'
+    | '/shifts/submit/completed'
   id:
     | '__root__'
     | '/'
@@ -150,6 +162,7 @@ export interface FileRouteTypes {
     | '/_unregistered/shifts/reissue'
     | '/_unregistered/shifts/submit'
     | '/_unregistered/shifts/view'
+    | '/_unregistered/shifts/submit_/completed'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -239,6 +252,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthShiftboardRecruitmentIdRouteImport
       parentRoute: typeof AuthRoute
     }
+    '/_unregistered/shifts/submit_/completed': {
+      id: '/_unregistered/shifts/submit_/completed'
+      path: '/shifts/submit/completed'
+      fullPath: '/shifts/submit/completed'
+      preLoaderRoute: typeof UnregisteredShiftsSubmitCompletedRouteImport
+      parentRoute: typeof UnregisteredRoute
+    }
   }
 }
 
@@ -259,6 +279,7 @@ interface UnregisteredRouteChildren {
   UnregisteredShiftsReissueRoute: typeof UnregisteredShiftsReissueRoute
   UnregisteredShiftsSubmitRoute: typeof UnregisteredShiftsSubmitRoute
   UnregisteredShiftsViewRoute: typeof UnregisteredShiftsViewRoute
+  UnregisteredShiftsSubmitCompletedRoute: typeof UnregisteredShiftsSubmitCompletedRoute
 }
 
 const UnregisteredRouteChildren: UnregisteredRouteChildren = {
@@ -266,6 +287,8 @@ const UnregisteredRouteChildren: UnregisteredRouteChildren = {
   UnregisteredShiftsReissueRoute: UnregisteredShiftsReissueRoute,
   UnregisteredShiftsSubmitRoute: UnregisteredShiftsSubmitRoute,
   UnregisteredShiftsViewRoute: UnregisteredShiftsViewRoute,
+  UnregisteredShiftsSubmitCompletedRoute:
+    UnregisteredShiftsSubmitCompletedRoute,
 }
 
 const UnregisteredRouteWithChildren = UnregisteredRoute._addFileChildren(
diff --git a/src/routes/_unregistered/shifts.submit.tsx b/src/routes/_unregistered/shifts.submit.tsx
index 1ef794f2..238f800c 100644
--- a/src/routes/_unregistered/shifts.submit.tsx
+++ b/src/routes/_unregistered/shifts.submit.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useMutation, useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
@@ -44,6 +44,7 @@ function ShiftSubmitRoute() {
 }
 
 function ShiftSubmitContent({ session }: { session: { sessionToken: string; recruitmentId: string } }) {
+  const navigate = useNavigate();
   const data = useQuery(api.shiftSubmission.queries.getSubmissionPageData, {
     sessionToken: session.sessionToken,
     recruitmentId: session.recruitmentId as Id<"recruitments">,
@@ -62,6 +63,7 @@ function ShiftSubmitContent({ session }: { session: { sessionToken: string; recr
       recruitmentId: session.recruitmentId as Id<"recruitments">,
       requests,
     });
+    await navigate({ to: "/shifts/submit/completed" });
   };
 
   return <ShiftSubmitPage data={data} onSubmit={handleSubmit} />;
diff --git a/src/routes/_unregistered/shifts.submit_.completed.tsx b/src/routes/_unregistered/shifts.submit_.completed.tsx
new file mode 100644
index 00000000..b2c61cb1
--- /dev/null
+++ b/src/routes/_unregistered/shifts.submit_.completed.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SubmittedView } from "@/src/components/features/StaffSubmit/SubmittedView";
+import { buildMeta } from "@/src/helpers/seo";
+
+export const Route = createFileRoute("/_unregistered/shifts/submit_/completed")({
+  head: () => ({
+    meta: buildMeta({ title: "シフト希望の提出完了", noindex: true }),
+  }),
+  component: ShiftSubmitCompletedRoute,
+});
+
+function ShiftSubmitCompletedRoute() {
+  return <SubmittedView />;
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 4ce55032..84e9bc0c 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -10,7 +10,7 @@ export const Route = createFileRoute("/")({
       ...buildMeta({
         title: "シフトリ",
         description:
-          "少人数のお店のシフト作成をもっとラクに リンクを送るだけで希望シフトを収集 スタッフのアカウント登録も不要 無料ではじめられるシフト管理ツール",
+          "少人数のお店のシフト作成をもっとラクに。リンクを送るだけで希望シフトを収集、スタッフのアカウント登録も不要、無料ではじめられるシフト管理ツール",
         canonical: "/",
       }),
       ...jsonLdMeta({