@hjmds/design-contracts 1.12.0 → 1.13.0

package/docs/usage/screens/flow-permission.md

@@ -0,0 +1,103 @@
+# 권한 안내
+
+- 단계: 화면
+- 상태: 배포
+- 지원: Web · Native
+- 적용: 미게시(1.12.1 이후)
+- 검토일: 2026-10-06
+- 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/기본 흐름/권한 안내`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
+- 스토리북: `배포/화면/소개/권한 안내`
+
+## 목적
+
+PermissionScreen을 사용해 권한 안내 흐름을 구성한다. 제품이 데이터·권한·서버 확정·문구를 공급하며, 예제의 메모리 저장을 운영 저장으로 취급하지 않는다.
+
+## 영역 구조
+
+```text
+host: 남은 높이·safe area·키보드
+└─ 선택적 그림 → 권한 이유 → 상태별 행동
+```
+
+| 영역 | 컴포넌트 | 위치 | 크기·간격 |
+| --- | --- | --- | --- |
+| 바깥 틀 | PermissionScreen | route 본문 | [API 배치 규칙](../components/permission-screen.md#배치), host 남은 높이 |
+| 내용 | 공개 슬롯 | 선택적 그림 → 권한 이유 → 상태별 행동 | 화면 recipe의 sectionGap·itemGap; 슬롯 안은 각 지침 토큰 |
+| 상태 | state 또는 해당 API 상태 | 본문 자리·비차단 notice | 입력 중 실패는 본문 높이와 초안을 유지 |
+
+## 버튼과 행동 위치
+
+| 행동 | 컴포넌트·tone | 위치 | 개수·순서 |
+| --- | --- | --- | --- |
+| 작업 | PermissionScreen 공개 행동 슬롯 | prompt 요청, denied 설정, granted 계속, unavailable 대안 | 같은 표면에 경쟁하는 primary 하나만 |
+| 복구 | Button·secondary | 오류 근처 | 재시도할 대상과 범위를 표시 |
+
+## 상태
+
+| 상태 | 화면 모습 | 행동 |
+| --- | --- | --- |
+| 기본 | 선택적 그림 → 권한 이유 → 상태별 행동 | 각 공개 콜백을 제품 상태에 연결 |
+| 로딩 | 최초 조회는 본문 상태, 저장은 해당 행동 pending | 중복 제출 차단; 성공을 먼저 표시하지 않음 |
+| 빈 | 실제 조회 0건 또는 아직 작성하지 않은 상태 안내 | 시작·조건 해제 등 맥락에 맞는 대안 |
+| 오류 | 렌더 시 OS 요청 금지; 설정 복귀 시 제품이 상태 재조회 | 실패 원인과 재시도 경로 제공 |
+
+## 사용하는 지침
+
+| 지침 | 쓰는 곳 |
+| --- | --- |
+| [PermissionScreen](../components/permission-screen.md) | 필수 props·슬롯·플랫폼 차이 |
+| [Button](../components/button.md) | 동작·로딩·보조 행동 |
+| [ScreenLayout](../components/screen-layout.md) | 화면 높이·본문 교체·스크롤 소유 |
+
+## 코드 골격
+
+```tsx
+// Web
+import { Text } from "@hjmds/react/layout";
+import { PermissionScreen } from "@hjmds/react/screen-flows";
+
+<PermissionScreen
+  title={t("permission.camera.title")}
+  status={cameraStatus /* navigator.permissions 등으로 제품이 조회한 값 */}
+  illustration={cameraArt}
+  explanation={<Text>{t("permission.camera.why")}</Text>}
+  request={{ label: t("permission.allow"), onAction: requestCamera, pending: requesting }}
+  settings={{ label: t("permission.browserSettings"), onAction: showSettingsHelp }}
+  continueAction={{ label: t("common.continue"), onAction: goNext }}
+  skip={{ label: t("common.later"), onAction: goNext }}
+/>
+```
+
+```tsx
+// Native
+import { Text } from "@hjmds/react-native/primitives";
+import { PermissionScreen } from "@hjmds/react-native/screen-flows";
+import { Linking } from "react-native";
+
+<PermissionScreen
+  title={t("permission.camera.title")}
+  status={cameraStatus /* 제품이 OS에서 조회한 값 */}
+  illustration={cameraArt}
+  explanation={<Text>{t("permission.camera.why")}</Text>}
+  request={{ label: t("permission.allow"), onAction: requestCamera, pending: requesting }}
+  settings={{ label: t("permission.openSettings"), onAction: () => Linking.openSettings() }}
+  continueAction={{ label: t("common.continue"), onAction: goNext }}
+  skip={{ label: t("common.later"), onAction: goNext }}
+/>
+```
+
+콜백·데이터·지역화 함수는 제품에서 공급한다. Web·Native import와 필수 props는 위 API 지침에서 확인한다. Web은 브라우저 설정을 코드로 열 수 없으므로 `settings`는 설정 방법 안내로 연결한다. Native는 `Linking.openSettings()`를 쓴다.
+
+## 큰 글자·다크·좁은 폭
+
+| 조건 | 바뀌는 것 |
+| --- | --- |
+| 큰 글자 | 2배 글자에서 제목·행은 내용 높이로 증가. footer·닫기·입력 필드가 겹치지 않는지 확인 |
+| 다크 | semantic 색으로 내용과 표면을 함께 전환; 예제 브랜드 색을 제품 기본값으로 복사하지 않음 |
+| 좁은 폭 | 320px부터 한 열로 읽기 순서 유지. 가상화 본문은 scroll=content, 중첩 스크롤 금지 |
+| 키보드 | Native host가 safe area와 키보드를 한 번 처리; Web은 포커스된 입력과 footer 가림 확인 |
+
+## 함정
+
+- 렌더 시 OS 요청 금지; 설정 복귀 시 제품이 상태 재조회.
+- Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크·큰 글자와 실패/복구를 각각 확인한다.

package/docs/usage/screens/landing.md

@@ -0,0 +1,347 @@
+# 서비스 소개
+
+- 단계: 화면
+- 상태: 배포
+- 지원: Web · Native
+- 적용: 1.12.1
+- 검토일: 2026-10-06
+- 근거: `showcase/web/src/patterns/Landing.stories.tsx`·`Landing.previews.tsx`, `showcase/native/src/Landing.stories.tsx`·`introduction-preview.tsx`, 변형 `showcase/*/reference-flow-previews.tsx`(`ServiceIntroduction`), `showcase/shared/landing-pattern.ts`, `showcase/native/src/pattern-status.tsx`, `packages/react/src/effect-surface.tsx`, `packages/react-native/src/effect-surface.tsx`. 2026-10-06 사용자 승인으로 실험 `서비스 소개/제품 체험 중심`(설명과 사례 중심 포함)을 배포하면서 같은 소개 목적의 배포 `화면/랜딩 화면`과 한 항목으로 합쳤다(Web id `patterns-landing` 보존, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
+- 스토리북: `배포/화면/소개/서비스 소개`
+
+## 목적
+
+제품을 처음 보는 사람에게 한 문장 가치 제안을 보여 주고 같은 화면에서 첫 행동(짧은 입력)을 체험하게 하는 소개 화면이다.
+히어로 → 결과 미리보기 → 기능 소개 → 자주 묻는 질문 → 마지막 행동 순서의 세로 한 열이다. 가입·결제·후기·실적 수치는
+이 화면에 없고 제품이 실제 근거와 함께 더한다.
+스토리 `기본`이 이 랜딩이고, 같은 목적의 두 변형은 첫 구획 배치만 다르다: `제품 체험 중심`(히어로·행동과 제품 미리보기를 두 열로),
+`설명과 사례 중심`(히어로를 먼저 한 열로 두고 설명과 미리보기를 두 열로). 변형은 아래 [변형](#변형-제품-체험-중심설명과-사례-중심) 절을 본다.
+
+## 영역 구조
+
+```text
+좁은 폭(Native·모바일 Web) — 전체가 하나의 세로 스크롤, 하단 고정 영역 없음
+┌ 상단 안전 영역(헤더 소유) ───────────────┐
+│ 바깥 틀: 좌우 Container gutter            │
+│   (폭 < 600 compact 16 · 이상 regular 20) │
+│   Native 위아래 spacing.lg 20             │
+│ ┌ ① 히어로 EffectSurface(mesh+grain) ──┐ │
+│ │ (안쪽 여백 spacing.xl 24 — 제품이 줌) │ │
+│ │ eyebrow  Text tone=muted             │ │  Stack gap lg 20
+│ │ 제목     Heading level1 (h1)         │ │
+│ │ 소개     Text as=p                   │ │
+│ │ [ 첫 기록 써보기 ]  ← 주 행동(primary) │ │
+│ └──────────────────────────────────────┘ │
+│              ↕ spacing.xl 24             │
+│ ┌ ② 미리보기 Surface padding lg 20 ────┐ │
+│ │ Heading level2                       │ │  Stack gap md 16
+│ │ (저장 직후) "추가했어요" status        │ │
+│ │ List > ListRow 한 줄씩(최신이 위)     │ │
+│ └──────────────────────────────────────┘ │
+│ ③ 기능 Heading level2                    │
+│ ┌ Surface padding lg ─┐ Heading level3 + Text (Stack gap sm 12)
+│ └─────────────────────┘ × 3, 사이 24     │
+│ ④ FAQ Heading level2                     │
+│   ▸ 질문 1   Collapsible (트리거 최소 44) │
+│   ▸ 질문 2                               │
+│ ⑤ [ 첫 기록 써보기 ]  ← 같은 행동 반복     │  secondary
+│   범위 안내 Text tone=muted              │
+└ 하단: 고정 영역 없음, 내용이 스크롤 ─────┘
+
+⑥ 입력 Sheet(주 행동을 누르면)
+┌ 첫 기록을 남겨요 ─────────────── (닫기) ┐
+│ (저장 실패면 Notice danger)             │  Stack gap lg 20
+│ 오늘의 한 줄  [ TextField          ]    │
+│               (비면 오류 문구)          │
+│────────────────────────────────────────│
+│ footer: [   미리보기에 추가   ] (고정)   │  ← 시트 주 행동
+└ 하단 안전 영역(시트 소유) / Native는 키보드 위로 ┘
+```
+
+넓은 폭 Web도 한 열이다. 바깥은 [Container](../components/container.md) `size="content"`(`layout.contentMaxWidth` 1200)로
+묶는다. 기능 카드 3개를 가로로 놓는 배치는 스토리에서 확인되지 않았다.
+
+| 영역 | 컴포넌트 | 위치 | 크기·간격 |
+| --- | --- | --- | --- |
+| 바깥 틀 | Web `main` > `Container size="content" gutter={gutter}` > `Stack gap="xl"`(문서 스크롤) · Native `ScrollView`(`contentContainerStyle={{ paddingVertical: spacing.lg }}`) > `Container size="content" gutter={gutter}` > `Stack gap="xl"` | 화면 전체, 스크롤. 위 안전 영역은 내비게이션 헤더(또는 [TopBar](../components/top-bar.md) `safeAreaTop`)가 맡고 헤더 없이 띄울 때만 제품이 감싼다. 아래 고정 영역은 없다. 바깥에는 입력이 없어 키보드 처리는 ⑥ 시트가 맡는다 | 좌우 gutter: 폭 600 미만 `compact` 16(`layout.pagePadding.compact`), 이상 `regular` 20([화면 여백](../tokens/layout.md)). Native 위아래 `spacing.lg` 20. 직계 요소 사이 `spacing.xl` 24(`layout.sectionGap`) |
+| ① 히어로 | EffectSurface `descriptor={{ layers: ["mesh","grain"], active: false }}` > Stack `gap="lg"` > Text·Heading·Text·Button | 맨 위 | 요소 사이 `spacing.lg` 20. EffectSurface는 안쪽 여백이 없어 제품이 컨테이너에 `spacing.xl` 24를 준다(Web `className`, Native `style`) |
+| ② 미리보기 | Surface `padding="lg"` > Stack `gap="md"` > Heading·상태 Text·List | 히어로 아래 | 안쪽 20, 요소 사이 `spacing.md` 16, 한 줄 행 최소 56(`layout.rowHeight.singleLine`). 새 기록이 맨 위 |
+| ③ 기능 | Heading level2 + Surface `padding="lg"` ×3 > Stack `gap="sm"` | 미리보기 아래 | 카드 안 `spacing.sm` 12, 카드 사이 24 |
+| ④ FAQ | Heading level2 + Collapsible × n | 기능 아래 | 트리거 최소 44(`control.minTouchTarget`), 트리거 위아래 `spacing.xs` 8(Web) |
+| ⑤ 마지막 행동 | Button `secondary` + Text `tone="muted"` | 맨 아래 | 사이 24 |
+| ⑥ 입력 | Sheet(Native `keyboardAvoidance` `scrollable`) > Stack `gap="lg"` > Notice(실패 때)·TextField, 제출은 `footer` | 오버레이, 화면 아래 | 시트 좌우 `spacing.lg` 20, TextField 높이 44(`control.fieldHeight`). 아래 안전 영역·키보드는 시트가 맡는다 |
+
+### 변형: 제품 체험 중심·설명과 사례 중심
+
+```text
+ScreenLayout(제목 = 소개 문장, 최대 720, 바깥 padding spacing.md 16) — 본문 스크롤
+├─ 제품 체험 중심:   [히어로·행동 | 제품 미리보기] → 특징 3열 → FAQ → 끝 행동 카드
+└─ 설명과 사례 중심: 히어로·행동 → [설명 | 제품 미리보기] → 특징 3열 → FAQ → 끝 행동 카드
+   [a | b] = Grid 두 열(열 최소 240), 좁은 폭·큰 글자에서 한 열로 접힌다
+입력: Sheet(아래 고정 footer에 저장)
+```
+
+| 영역 | 컴포넌트 | 위치 | 크기·간격 |
+| --- | --- | --- | --- |
+| 바깥 틀 | ScreenLayout `title`(소개 문장) | route 본문, host가 남은 높이·safe area | 폭 최대 720, 바깥 padding `spacing.md` 16([ScreenLayout 배치](../components/screen-layout.md#배치)) |
+| 내용 | Stack `gap="xl"` > Grid(`columns={{ compact: 2 }}`·`{{ compact: 3 }}`, `gap={{ compact: "xl" }}`, `minColumnWidth={{ compact: 240 }}`) | 위 순서 | 구획 사이 `spacing.xl` 24, 열 최소 240. 구획 제목은 Heading `level4`·`level5` |
+| 끝 행동 | Surface `padding="lg"` > Stack `gap="md"` > Heading `level5` + Button primary | FAQ 아래 | 안쪽 20, 사이 16 |
+| 입력 | Sheet > TextField, 저장은 `footer` | 오버레이 | 빈 입력이면 저장 비활성 |
+
+## 버튼과 행동 위치
+
+| 행동 | 컴포넌트·tone | 위치 | 개수·순서 |
+| --- | --- | --- | --- |
+| 주 행동(체험 시작) | Button 기본 primary, `medium` | ① 히어로 소개문 바로 아래 | 1 |
+| 같은 행동 반복 | Button `secondary`, 같은 라벨·같은 동작 | ⑤ FAQ 다음 | 1. 큰 글자에서 히어로 행동이 첫 화면 밖으로 밀리므로 끝에 한 번 더 둔다 |
+| FAQ 펼치기 | Collapsible 트리거 | ④ 각 질문 행 전체 | 질문마다 1 |
+| 입력 제출 | Button 기본 primary | ⑥ Sheet `footer`(Web 끝 정렬, Native 꽉 찬 폭) | 1. 시트 안에서 따로 센다([Button](../components/button.md#꼭-지킬-것)) |
+| 시트 닫기 | Sheet `closeLabel` | 시트 머리 끝 | 1. 저장 중에는 Sheet `busy`로 막는다 |
+| 파괴 행동 | — | — | 없음 |
+
+화면의 primary는 히어로 행동 하나다. 시트 `footer`의 제출은 시트 안에서 따로 센다.
+두 변형은 히어로 행동과 끝 행동 카드의 버튼이 같은 Sheet를 연다(같은 행동 반복). FAQ는 Collapsible 대신 `selected` 토글 Button 하나로 답을 연다.
+
+키보드: Native 시트는 `keyboardAvoidance`로 키보드 위에 붙고 `footer`가 키보드 위에 고정돼 제출 버튼이 가려지지 않는다.
+바깥 ScrollView에는 입력이 없다.
+
+## 상태
+
+| 상태 | 화면 모습 | 행동 |
+| --- | --- | --- |
+| 기본 | ①~⑤, ②에 예시 한 줄 | 주 행동 |
+| 로딩 | 스토리에 없음. 저장이 비동기면 `footer` 제출 Button `loading`, Sheet `busy`로 닫기를 막는다. 입력 값은 그대로 둔다 | 기다림 |
+| 빈 | ②에 기록이 0개인 경우는 스토리에 없다. 예시 한 줄을 처음부터 넣어 미리보기가 비지 않게 한다 | — |
+| 오류 | 입력 오류: ⑥ TextField `error`(`landing.error.empty`). 입력을 바꾸면 지워지고 시트는 닫히지 않는다. 저장 실패는 스토리에 없음. 시트 본문 맨 위에 [Notice](../components/notice.md) `tone="danger"`(Native `announcement="assertive"` — 기본 `none`), 문구는 원인별 키: 네트워크 `landing.error.offline`, 서버 `landing.error.server`. 입력 값과 ②의 이전 기록은 유지하고 시트를 닫지 않는다. 다시 시도는 같은 `footer` 제출 버튼이며, 또 실패하면 Notice를 같은 자리에 두고 `loading`·`busy`만 푼다 | 다시 입력 · 다시 제출 |
+| 성공 | 시트가 닫히고 ② 맨 위에 새 행, "추가했어요" 상태 문구가 읽힌다 | — |
+| FAQ 펼침 | 질문 아래에 답이 열린다(같은 자리 enter/exit 모션) | 다시 눌러 접기 |
+| 제품 체험 중심 | `제품 체험 중심` 스토리: 히어로·행동과 제품 미리보기 두 열 → 특징 3열 → FAQ → 끝 행동 카드. 저장하면 미리보기가 방금 쓴 장면으로 바뀐다 | 히어로·끝 행동 = 같은 Sheet |
+| 설명과 사례 중심 | `설명과 사례 중심` 스토리: 히어로·행동 한 열 → 설명과 미리보기 두 열 → 이하 같음 | 같은 Sheet |
+
+## 사용하는 지침
+
+| 지침 | 쓰는 곳 |
+| --- | --- |
+| [Container](../components/container.md) | 바깥 틀 폭·좌우 여백 |
+| [화면 여백과 너비](../tokens/layout.md) | gutter 선택(`resolveWindowClass`) |
+| [EffectSurface](../components/effect-surface.md) | ① 히어로 배경 장식 |
+| [Heading](../components/heading.md) | 히어로 level1, 영역 제목 level2, 기능 카드 level3 |
+| [Text](../components/text.md) | eyebrow·소개·범위 안내·상태 문구 |
+| [Button](../components/button.md) | 주 행동, 반복 행동, 시트 제출 |
+| [Surface](../components/surface.md) | ② 미리보기, ③ 기능 카드 |
+| [List](../components/list.md) · [ListRow](../components/list-row.md) | ② 기록 목록 |
+| [Collapsible](../components/collapsible.md) | ④ FAQ |
+| [ScreenLayout](../components/screen-layout.md) · [Grid](../components/grid.md) | 변형의 바깥 틀 · 두 열 ↔ 한 열 |
+| [Sheet](../components/sheet.md) | ⑥ 입력 |
+| [Field](../components/field.md) | ⑥ `TextField` |
+| [Notice](../components/notice.md) | ⑥ 저장 실패 |
+| [Stack](../components/stack.md) | 모든 세로 리듬 |
+| [간격](../tokens/spacing.md) | `spacing.sm`·`md`·`lg`·`xl` |
+
+## 코드 골격
+
+카피·기능 목록·FAQ·장식 seed는 제품 소유다. 오류 문구는 상태→키 상수 표로 고른다.
+
+```tsx
+// Web
+import { Container, Stack, Surface, Text } from "@hjmds/react/layout";
+import { Heading } from "@hjmds/react/heading";
+import { Button } from "@hjmds/react/actions";
+import { TextField } from "@hjmds/react/forms";
+import { Notice } from "@hjmds/react/feedback";
+import { Sheet } from "@hjmds/react/overlays";
+import { Collapsible } from "@hjmds/react/collapsible";
+import { EffectSurface } from "@hjmds/react/effect-surface";
+import { List, ListRow } from "@hjmds/react/display";
+import { resolveWindowClass } from "@hjmds/design-contracts/responsive";
+
+const failureKey = { offline: "landing.error.offline", server: "landing.error.server" } as const;
+const gutter = resolveWindowClass(window.innerWidth) === "compact" ? "compact" : "regular";
+
+<main><Container size="content" gutter={gutter}><Stack gap="xl">
+  {/* landing-hero: padding: var(--hjm-space-xl) — EffectSurface는 안쪽 여백이 없다 */}
+  <EffectSurface className="landing-hero" descriptor={{ layers: ["mesh", "grain"], seed: "landing", active: false }}>
+    <Stack gap="lg">
+      <Text tone="muted">{t("landing.eyebrow")}</Text>
+      <Heading level="level1">{t("landing.title")}</Heading>
+      <Text as="p">{t("landing.intro")}</Text>
+      <Button onClick={start}>{t("landing.cta")}</Button>
+    </Stack>
+  </EffectSurface>
+  <Surface padding="lg"><Stack gap="md">
+    <Heading level="level2">{t("landing.preview")}</Heading>
+    {saved ? <Text role="status">{t("landing.saved")}</Text> : null}
+    <List label={t("landing.preview")}>{notes.map(n => <ListRow key={n.id} title={n.text} />)}</List>
+  </Stack></Surface>
+  <Heading level="level2">{t("landing.features")}</Heading>
+  {features.map(f => <Surface key={f.id} padding="lg"><Stack gap="sm">
+    <Heading level="level3">{t(f.titleKey)}</Heading><Text>{t(f.bodyKey)}</Text></Stack></Surface>)}
+  <Heading level="level2">{t("landing.faq")}</Heading>
+  {faqs.map(q => <Collapsible key={q.id} trigger={t(q.questionKey)}><Text>{t(q.answerKey)}</Text></Collapsible>)}
+  <Button tone="secondary" onClick={start}>{t("landing.cta")}</Button>
+  <Text tone="muted">{t("landing.scope")}</Text>
+</Stack></Container>
+  <Sheet title={t("landing.sheetTitle")} closeLabel={t("common.close")} open={open} onOpenChange={setOpen} busy={saving}
+    footer={<Button loading={saving} onClick={submit}>{t("landing.submit")}</Button>}>
+    <Stack gap="lg">
+      {failure ? <Notice tone="danger" title={t(failureKey[failure])} /> : null}
+      <TextField label={t("landing.field")} value={draft} onValueChange={v => { setDraft(v); setEmpty(false); }}
+        {...(empty ? { error: t("landing.error.empty") } : {})} />
+    </Stack>
+  </Sheet>
+</main>
+```
+
+```tsx
+// Native
+import { ScrollView, useWindowDimensions } from "react-native";
+import { spacing } from "@hjmds/design-contracts/foundations";
+import { resolveWindowClass } from "@hjmds/design-contracts/responsive";
+import { Container, Stack, Text } from "@hjmds/react-native/primitives";
+import { Heading } from "@hjmds/react-native/heading";
+import { Button } from "@hjmds/react-native/actions";
+import { TextField } from "@hjmds/react-native/inputs";
+import { Notice } from "@hjmds/react-native/feedback";
+import { Sheet } from "@hjmds/react-native/overlays";
+import { EffectSurface } from "@hjmds/react-native/effect-surface";
+
+const failureKey = { offline: "landing.error.offline", server: "landing.error.server" } as const;
+const { width } = useWindowDimensions();
+const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
+
+<ScrollView contentContainerStyle={{ paddingVertical: spacing.lg }}>
+  <Container size="content" gutter={gutter}><Stack gap="xl">
+    <EffectSurface style={{ padding: spacing.xl }} descriptor={{ layers: ["mesh", "grain"], seed: "landing", active: false }}>
+      <Stack gap="lg">
+        <Heading level="level1">{t("landing.title")}</Heading>
+        <Text>{t("landing.intro")}</Text>
+        <Button onPress={start}>{t("landing.cta")}</Button>
+      </Stack>
+    </EffectSurface>
+    {/* 미리보기·기능·FAQ·반복 행동(secondary)·범위 안내: Web과 같은 순서, onPress */}
+  </Stack></Container>
+  <Sheet keyboardAvoidance scrollable busy={saving} title={t("landing.sheetTitle")} closeLabel={t("common.close")}
+    open={open} onOpenChange={setOpen}
+    footer={<Button fullWidth loading={saving} onPress={submit}>{t("landing.submit")}</Button>}>
+    <Stack gap="lg">
+      {failure ? <Notice tone="danger" announcement="assertive" title={t(failureKey[failure])} /> : null}
+      <TextField label={t("landing.field")} value={draft} onValueChange={v => { setDraft(v); setEmpty(false); }}
+        {...(empty ? { error: t("landing.error.empty") } : {})} />
+    </Stack>
+  </Sheet>
+</ScrollView>
+```
+
+### 변형 코드
+
+`제품 체험 중심` 골격이다. `설명과 사례 중심`은 히어로(`intro`)를 Grid 밖 맨 위에 두고 Grid 첫 칸에 설명(Heading `level4` + 본문)을 넣는다.
+
+```tsx
+// Web
+import { Button } from "@hjmds/react/actions";
+import { Heading } from "@hjmds/react/heading";
+import { TextField } from "@hjmds/react/forms";
+import { Grid, Stack, Surface, Text } from "@hjmds/react/layout";
+import { Sheet } from "@hjmds/react/overlays";
+import { ScreenLayout } from "@hjmds/react/screens";
+
+<>
+  <ScreenLayout title={t("intro.title")}>
+    <Stack gap="xl">
+      <Grid columns={{ compact: 2 }} gap={{ compact: "xl" }} minColumnWidth={{ compact: 240 }}>
+        <Stack gap="lg">
+          <Text tone="brand" variant="label">{t("intro.eyebrow")}</Text>
+          <Text>{t("intro.lead")}</Text>
+          <Button onClick={() => setOpen(true)}>{t("intro.start")}</Button>
+        </Stack>
+        {preview}
+      </Grid>
+      <Grid columns={{ compact: 3 }} gap={{ compact: "xl" }} minColumnWidth={{ compact: 240 }}>
+        {features.map((item) => <Stack key={item.id} gap="sm"><Heading level="level5" semanticLevel={2}>{item.title}</Heading><Text>{item.body}</Text></Stack>)}
+      </Grid>
+      <Button tone="secondary" selected={faqOpen} onClick={toggleFaq}>{t("intro.faq.question")}</Button>
+      {faqOpen ? <Text>{t("intro.faq.answer")}</Text> : null}
+      <Surface padding="lg">
+        <Stack gap="md">
+          <Heading level="level5" semanticLevel={2}>{t("intro.closing")}</Heading>
+          <Button onClick={() => setOpen(true)}>{t("intro.startAgain")}</Button>
+        </Stack>
+      </Surface>
+    </Stack>
+  </ScreenLayout>
+  <Sheet open={open} onOpenChange={setOpen} title={t("intro.sheet.title")} closeLabel={t("common.close")}
+    footer={<Button disabled={!draft.trim()} onClick={saveDraft}>{t("intro.sheet.save")}</Button>}>
+    <TextField label={t("intro.sheet.field")} value={draft} onValueChange={setDraft} />
+  </Sheet>
+</>
+```
+
+```tsx
+// Native
+import { Button } from "@hjmds/react-native/actions";
+import { Heading } from "@hjmds/react-native/heading";
+import { TextField } from "@hjmds/react-native/inputs";
+import { Grid, Stack, Surface, Text } from "@hjmds/react-native/primitives";
+import { Sheet } from "@hjmds/react-native/overlays";
+import { ScreenLayout } from "@hjmds/react-native/screens";
+
+<>
+  <ScreenLayout title={t("intro.title")}>
+    <Stack gap="xl">
+      <Grid columns={{ compact: 2 }} gap={{ compact: "xl" }} minColumnWidth={{ compact: 240 }}>
+        <Stack gap="lg">
+          <Text tone="brand" variant="label">{t("intro.eyebrow")}</Text>
+          <Text>{t("intro.lead")}</Text>
+          <Button onPress={() => setOpen(true)}>{t("intro.start")}</Button>
+        </Stack>
+        {preview}
+      </Grid>
+      <Grid columns={{ compact: 3 }} gap={{ compact: "xl" }} minColumnWidth={{ compact: 240 }}>
+        {features.map((item) => <Stack key={item.id} gap="sm"><Heading level="level5">{item.title}</Heading><Text>{item.body}</Text></Stack>)}
+      </Grid>
+      <Button tone="secondary" selected={faqOpen} onPress={toggleFaq}>{t("intro.faq.question")}</Button>
+      {faqOpen ? <Text>{t("intro.faq.answer")}</Text> : null}
+      <Surface padding="lg">
+        <Stack gap="md">
+          <Heading level="level5">{t("intro.closing")}</Heading>
+          <Button onPress={() => setOpen(true)}>{t("intro.startAgain")}</Button>
+        </Stack>
+      </Surface>
+    </Stack>
+  </ScreenLayout>
+  <Sheet open={open} onOpenChange={setOpen} title={t("intro.sheet.title")} closeLabel={t("common.close")}
+    footer={<Button disabled={!draft.trim()} onPress={saveDraft}>{t("intro.sheet.save")}</Button>}>
+    <TextField label={t("intro.sheet.field")} value={draft} onValueChange={setDraft} />
+  </Sheet>
+</>
+```
+
+## 큰 글자·다크·좁은 폭
+
+| 조건 | 바뀌는 것 |
+| --- | --- |
+| 큰 글자(`textScale` 2) | 제목·카드가 세로로 길어질 뿐 순서는 같다. 히어로 주 행동이 첫 화면 밖으로 밀릴 수 있어 ⑤의 반복 행동이 필요하다. 시트 본문이 길어져도 `footer` 제출은 고정이다 |
+| 다크 | EffectSurface 배경은 테마 팔레트의 `bg`를 쓰고 장식 층이 그 위에 그려진다. 나머지는 테마 토큰 |
+| 좁은 폭 | 한 열 그대로, 폭 600 미만은 gutter `compact` 16. 시트는 아래에 붙고 Native는 키보드 위로 올라간다 |
+| 넓은 폭 Web | 한 열 유지, Container `content` 1200으로 폭을 묶고 gutter `regular` 20 |
+| 모션 줄이기 | 스토리는 `active: false`로 장식 움직임을 끈다. Native는 `visible={false}`로 화면 밖 장식을 멈춘다 |
+| 변형의 두 열 | 열 최소 240을 못 채우면(좁은 폭·큰 글자) Grid가 한 열로 접어 히어로 → 미리보기 순서로 읽힌다. Sheet `footer` 저장은 고정이다 |
+
+## 플랫폼 차이
+
+| 항목 | Web | Native |
+| --- | --- | --- |
+| 바깥 스크롤 | 문서 스크롤 | `ScrollView`(위아래 `spacing.lg` 20), 좌우는 Container gutter |
+| 시트 키보드 처리 | 브라우저가 처리 | `keyboardAvoidance` 명시 |
+| 시트 본문 스크롤 | 자동 | `scrollable` 명시 |
+| 시트 `footer` 버튼 | 끝 정렬 가로 줄 | 꽉 찬 폭 세로 열(`fullWidth`) |
+| 저장 알림 | `role="status"` | 라이브 영역(Android) + iOS는 제품이 직접 알림. 문구가 새로 나타날 때 한 번 읽히게 한다(스토리 `PatternStatus announceOnMount`) |
+| 실패 알림 | Notice가 자기 역할로 읽힌다 | Notice `announcement="assertive"` 명시(기본 `none`) |
+| 히어로 안쪽 여백 | `className`으로 `var(--hjm-space-xl)` | `style`의 `padding: spacing.xl` |
+
+## 함정
+
+- 히어로는 Surface padding="xl"로 내부 여백을 갖고, 바깥 폭·gutter는 Container가 소유한다. 시트 저장은 footer에 둔다(2026-10-06 지침과 예제 정합성 수정).
+- 위·아래 CTA는 동일 행동이다. 긴 스크롤 구간의 접근성을 위한 반복 primary 예외이며 서로 다른 주 행동을 허용하지 않는다.
+- 미리보기 행은 번역 문구나 배열 위치 대신 생성 시 부여한 id로 유지한다.
+- 변형 예제의 저장은 메모리에만 남고 Sheet를 닫아도 입력 초안이 남는다. 운영 저장·실패 처리는 위 오류 행 규칙을 따른다.
+- 현재 변형 스토리는 FAQ를 Collapsible이 아니라 `selected` 토글 Button 하나로 그린다. 질문이 여럿이면 기본처럼 Collapsible을 쓴다.

package/docs/usage/screens/mockup-studio.md

@@ -0,0 +1,190 @@
+# 목업 편집
+
+- 단계: 화면
+- 상태: 배포
+- 지원: Web
+- 적용: 1.12.1
+- 검토일: 2026-10-06
+- 근거: `showcase/web/src/foundations/MockupStudio.stories.tsx`, `src/responsive.ts`(`resolveWindowClass`), `showcase/web/src/studio/MockupStudio.tsx`, `showcase/web/src/studio/SceneTimeline.tsx`, `showcase/shared/mockup-scene.ts`, `showcase/shared/scene-timeline.ts`
+- 스토리북: `배포/화면/화면 틀과 도구/목업 편집`
+
+## 목적
+
+제품 화면 캡처를 휴대폰·브라우저 프레임에 넣어 스토어·소개용 이미지(PNG)와 짧은 장면 영상을 만드는 Web 전용 작업 도구 화면이다.
+`MockupStudio`는 showcase 안의 도구이며 `@hjmds/react`의 공개 API가 아니다 — 제품은 이 컴포넌트를 가져다 쓰지 않는다.
+소비자가 이 지침에서 가져갈 것은 두 가지다. (1) 도구 자체: Storybook에서 열어 제품 캡처로 목업을 만든다.
+(2) 배치: "큰 미리보기 + 긴 설정 목록 + 마지막 내보내기 줄"로 된 편집기 화면을 HJM 컴포넌트로 짜는 예.
+Native 스토리는 없다(장면 작성은 Web showcase에 둔다는 통합 계획, `component-stories.test.ts`).
+
+## 영역 구조
+
+```text
+한 열, 문서 스크롤(넓은 폭도 같음) — main > Container content(좌우 gutter: 폭<600 compact 16 · 이상 20) > Stack gap xl 24
+고정 영역 없음 · 안전 영역은 브라우저 · 키보드는 브라우저가 입력으로 스크롤
+┌──────────────────────────────────────────┐
+│ ① 제목 Heading level3 · semanticLevel 1   │  Stack gap sm 12
+│    + 설명 Text p                          │
+│ ┌ ② 미리보기 Surface padding md 16 ─────┐ │
+│ │ <canvas role="img">  폭 100%,          │ │  최대 높이 70vh, contain
+│ │   출력 1080×1440 / 1080×1080 / 1440×900│ │
+│ └──────────────────────────────────────┘ │
+│ ③ "출력 1080 × 1440 · …" (muted)          │
+│ ④ 파일 입력 2개: 화면 캡처 / 장면 설정 불러오기│
+│ ⑤ 상태 문구 (role=status) · 실패면 Notice danger │
+│ ⑥ 장면 타임라인 (Stack gap md 16)          │
+│    제목 Heading level3 · semanticLevel 2   │
+│    Slider 재생 위치 / "0.00 / 3.00초 · 30fps"│
+│    [재생] [처음으로]                       │  secondary · ghost
+│    움직임 [천천히 떠오르기][화면 등장]      │  secondary + selected
+│    길이 [3초][6초][9초]  [24fps][30fps]     │  ghost + selected
+│    [현재 장면을 포스터로] [포스터 PNG 저장] │  secondary
+│    [영상 내보내기] ([출력 취소])            │  secondary · ghost(진행 중만)
+│    상태 문구 / 안내                        │
+│ ⑦ TextField 제목(≤80) · 설명(≤120)         │
+│ ⑧ 선택 묶음: 각 "라벨(strong) + 버튼 줄"    │
+│    출력 비율 [세로][정사각형][가로]  secondary│
+│    프레임 [휴대폰][브라우저]          secondary│
+│    배경 [새벽][잉크][민트]           secondary│
+│    각도 [-12°][-6°][0°][6°][12°]     ghost   │
+│    여백 [좁게][보통][넓게]           ghost   │
+│    [그림자]  ← secondary 토글               │
+│ ⑨ TextField 화면 출처 · 허용 사용 범위      │
+│ ⑩ [PNG 내보내기] [장면 설정 저장] [초기화]  │  ← 주 행동 줄(맨 아래)
+│     primary        secondary      ghost     │
+│ ⑪ 개인정보·출처 안내 (muted)               │
+└──────────────────────────────────────────┘
+```
+
+| 영역 | 컴포넌트 | 위치 | 크기·간격 |
+| --- | --- | --- | --- |
+| 바깥 틀 | `main` > `Container size="content" gutter={gutter}` > `Stack gap="xl"` | 화면 전체, 문서 스크롤. 고정 영역 없음 | 최대 폭 1200(`layout.contentMaxWidth`), 좌우 gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`resolveWindowClass`), 직계 요소 사이 `spacing.xl` 24. 안전 영역·키보드는 브라우저가 맡는다(문서 스크롤) |
+| ① 제목 | Stack `gap="sm"` > Heading `level="level3"` `semanticLevel={1}` · Text `as="p"` | 맨 위 | 사이 `spacing.sm` 12 |
+| ② 미리보기 | Surface `padding="md"` > `canvas`(`role="img"`, `aria-label`=제목 + 프레임) | 제목 아래, 스크롤과 함께 움직임 | 안쪽 `spacing.md` 16, 폭 100%, 최대 높이 70vh |
+| ③~⑤ 출력·파일·상태 | Text muted · `<input type="file">` ×2(제품은 FilePicker) · Text `role="status"`, 실패면 그 자리에 Notice `tone="danger"` | 미리보기 아래 | 사이 24 |
+| ⑥ 타임라인 | Stack `gap="md"` > Heading `level="level3"` `semanticLevel={2}` · Slider · Button 줄들 | 상태 아래 | 사이 `spacing.md` 16, 버튼 줄 `Stack axis="inline" wrap gap="sm"` 12 |
+| ⑦⑨ 텍스트 입력 | TextField ×4 | 타임라인 아래·선택 묶음 아래 | 높이 44(`control.fieldHeight`) |
+| ⑧ 선택 묶음 | Text `emphasis="strong"` + Stack `axis="inline" wrap gap="sm"` > Button `selected` | 텍스트 입력 사이 | 라벨과 줄이 바깥 Stack 직계라 사이 24 |
+| ⑩ 내보내기 줄 | Stack `axis="inline" wrap gap="sm"` > Button ×3 | 설정 목록 맨 아래 | 사이 12 |
+
+## 버튼과 행동 위치
+
+| 행동 | 컴포넌트·tone | 위치 | 개수·순서 |
+| --- | --- | --- | --- |
+| PNG 내보내기(주 행동) | Button 기본 primary | ⑩ 줄 첫째 | 1. 이미지 없음·불러오는 중이면 `disabled`, 내보내는 중이면 `loading` |
+| 장면 설정 저장 | Button `secondary` | ⑩ 둘째 | 1. JSON 파일 내려받기 |
+| 초기화 | Button `ghost` | ⑩ 셋째(끝) | 1. 확인 없이 모든 설정·이미지를 버린다 |
+| 재생·일시 정지 | Button `secondary` | ⑥ 슬라이더 아래 첫째 | 1. 이미지 없음·모션 줄이기·영상 출력 중이면 `disabled` |
+| 영상 내보내기 | Button `secondary` + 진행 중 `출력 취소` ghost | ⑥ 아래쪽 | 1(+1). 진행률을 라벨에 % 로 표시(`t("editor.videoProgress", { percent })`) |
+| 실패 후 다시 시도 | Notice `action` > Button `tone="secondary" size="small"` | ⑤ 실패 Notice 안 | 내보내기 실패일 때만 1. 파일 읽기 실패는 다른 파일을 고르는 것이 복구라 버튼을 두지 않는다 |
+| 설정 고르기 | Button `secondary`(형태·프레임·배경·움직임) · `ghost`(각도·여백·길이·fps) + `selected` | ⑥⑧ 각 줄 | 줄마다 2~5 |
+| 파일 고르기 | `<input type="file">`(PNG·JPEG·WebP / JSON) | ④ | 2 |
+
+주 행동은 PNG 내보내기 하나다. 재생·영상 내보내기는 `secondary`로 둔다. 설정 버튼의 `selected`는 선택 표시라 primary 수에
+세지 않는다([Button](../components/button.md) "꼭 지킬 것"의 예외). 내보내기 줄은 맨 아래 흐름 배치라 긴 설정을 지나야 닿는다.
+제품 편집기에서 주 행동을 늘 보이게 하려면 [BottomCTA](../components/bottom-cta.md) `position="sticky"`로 옮긴다.
+
+## 상태
+
+| 상태 | 화면 모습 | 행동 |
+| --- | --- | --- |
+| 기본 | 빈 프레임 미리보기, 상태 "스크린샷을 선택해 시작하세요.", PNG·재생·영상 비활성 | 화면 캡처 선택 |
+| 로딩 | 상태 "스크린샷을 여는 중이에요.", PNG 비활성 | 기다림 |
+| 빈 | 기본과 같다(이미지 없음). 장면 JSON만 불러오면 이미지가 비워지고 "파일을 다시 선택해 주세요" | 같은 캡처 다시 선택 |
+| 오류 | 네트워크·서버 요청이 없다(브라우저 안에서만 처리). ⑤ 자리에 [Notice](../components/notice.md) `tone="danger"`. 이미지 읽기 실패(형식 PNG·JPEG·WebP 밖·20MB·16384px 초과): 이전 이미지·설정 유지. 장면 JSON 실패(64KB 초과·형식 오류): 현재 장면 유지. PNG·포스터 내보내기 실패: `action` 다시 시도, `loading` 해제. 영상: 인코더 미지원·실패면 PNG 대안 안내, 사용자가 취소하면 오류가 아니라 상태 문구. 다시 시도가 또 실패하면 같은 Notice가 같은 자리에 남는다 | 다른 파일 선택 / 다시 시도 / PNG 저장 |
+| 불러옴 | 상태 "파일명 · 가로 × 세로 화면을 불러왔어요.", 미리보기에 그려짐 | 편집·내보내기 |
+| 영상 출력 중 | 버튼 라벨 "영상 출력 N%"(보간 키), [출력 취소] 등장. 다른 탭으로 가면 취소 | 취소 |
+| 모션 줄이기 | 재생 비활성, 안내 문구. 슬라이더로 정지 장면 확인 | 슬라이더 |
+
+## 사용하는 지침
+
+| 지침 | 쓰는 곳 |
+| --- | --- |
+| [Stack](../components/stack.md) | 바깥 리듬, 버튼 줄 |
+| [Surface](../components/surface.md) | ② 미리보기 틀 |
+| [Heading](../components/heading.md) | ① 화면 제목, ⑥ 타임라인 제목 |
+| [Text](../components/text.md) | 설명·라벨·상태·안내 |
+| [Notice](../components/notice.md) | 읽기·내보내기 실패 |
+| [Container](../components/container.md) | 바깥 폭·좌우 여백 |
+| [Button](../components/button.md) | 모든 선택·실행 |
+| [Field](../components/field.md) | 제목·설명·출처·사용 범위 `TextField` |
+| [Slider](../components/slider.md) | 재생 위치 |
+| [FilePicker](../components/file-picker.md) | 제품에서 `<input type="file">` 대신 |
+| [BottomCTA](../components/bottom-cta.md) | 제품 편집기의 고정 내보내기 줄 |
+| [화면 여백과 너비](../tokens/layout.md) | gutter·`layout.contentMaxWidth` |
+| [간격](../tokens/spacing.md) | `spacing.sm`·`md`·`xl` |
+
+## 코드 골격
+
+도구를 다시 만들 필요는 없다. 아래는 같은 편집기 배치를 제품에서 짤 때의 뼈대다. 상태 문구는 상태→키 표로 고르고 파일 이름·크기는 보간 값으로 넘긴다.
+
+```tsx
+// Web
+import { Container, Stack, Surface, Text } from "@hjmds/react/layout";
+import { Heading } from "@hjmds/react/heading";
+import { Button } from "@hjmds/react/actions";
+import { TextField } from "@hjmds/react/forms";
+import { Notice } from "@hjmds/react/feedback";
+import { resolveWindowClass } from "@hjmds/design-contracts/responsive";
+
+// 상태→키 표. 보간이 필요한 문구는 값으로 넘긴다.
+const statusKey = {
+  idle: "editor.status.idle",
+  loading: "editor.status.loading",
+  loaded: "editor.status.loaded",
+  imageFailed: "editor.error.image",
+  sceneFailed: "editor.error.scene",
+  exported: "editor.status.exported",
+  exportFailed: "editor.error.export",
+} as const;
+const failed = status === "imageFailed" || status === "sceneFailed" || status === "exportFailed";
+const gutter = resolveWindowClass(window.innerWidth) === "compact" ? "compact" : "regular";
+
+<main><Container size="content" gutter={gutter}><Stack gap="xl">
+  <Stack gap="sm">
+    <Heading level="level3" semanticLevel={1}>{t("editor.title")}</Heading>
+    <Text as="p">{t("editor.intro")}</Text>
+  </Stack>
+  <Surface padding="md">{/* 미리보기: canvas/img, role="img", aria-label */}</Surface>
+  {failed ? <Notice tone="danger" title={t(statusKey[status])}
+    {...(status === "exportFailed" ? { action: <Button tone="secondary" size="small" onClick={exportPng}>{t("common.retry")}</Button> } : {})} />
+    : <Text role="status">{t(statusKey[status], file ? { name: file.name, width: file.width, height: file.height } : {})}</Text>}
+  <Stack gap="md">
+    <Heading level="level3" semanticLevel={2}>{t("editor.timeline")}</Heading>
+    <Stack axis="inline" wrap gap="sm">
+      <Button tone="secondary" disabled={!ready} onClick={togglePlay}>{playing ? t("editor.pause") : t("editor.play")}</Button>
+    </Stack>
+  </Stack>
+  <TextField label={t("editor.caption")} value={caption} maxLength={80} onValueChange={setCaption} />
+  <Text emphasis="strong">{t("editor.format")}</Text>
+  <Stack axis="inline" wrap gap="sm">
+    {formats.map(f => <Button key={f.id} tone="secondary" selected={format === f.id} onClick={() => setFormat(f.id)}>{t(f.labelKey)}</Button>)}
+  </Stack>
+  <Stack axis="inline" wrap gap="sm">
+    <Button loading={exporting} disabled={!ready} onClick={exportPng}>{t("editor.export")}</Button>
+    <Button tone="secondary" onClick={saveScene}>{t("editor.saveScene")}</Button>
+    <Button tone="ghost" onClick={reset}>{t("editor.reset")}</Button>
+  </Stack>
+</Stack></Container></main>
+```
+
+```tsx
+// Native
+// 없음. 목업 편집은 Web showcase 전용이다.
+```
+
+## 큰 글자·다크·좁은 폭
+
+| 조건 | 바뀌는 것 |
+| --- | --- |
+| 큰 글자(`textScale` 2) | 모든 버튼 줄이 감긴다. canvas 안 글자는 출력 이미지의 일부라 글자 배율을 따르지 않는다 |
+| 다크 | 화면 UI는 테마 토큰. 출력 이미지 배경은 장면 설정(새벽·잉크·민트)이 정하고 테마와 무관하다 |
+| 좁은 폭 | 한 열 그대로. 폭 600 미만이면 Container gutter `compact` 16. 미리보기는 폭 100%·최대 70vh로 줄고 파일 입력도 폭 100% |
+| 넓은 폭 | 한 열 그대로, Container `content`로 최대 1200. 미리보기 옆에 설정을 두는 두 열 배치는 확인되지 않았다 |
+
+## 함정
+
+- 화면 캡처는 브라우저 밖으로 나가지 않는다. 장면 JSON에는 파일 이름·출처·사용 범위만 저장되므로 다른 사람에게 JSON만 주면 이미지를 다시 골라야 한다.
+- PNG는 화면에 보이는 canvas가 아니라 내보낼 때 새로 그린 canvas에서 만든다. 인코딩 중 설정을 바꿔도 결과가 바뀌지 않는다.
+- 초기화는 확인 없이 지운다. 제품 편집기에서 되돌리기 어려운 초기화에는 [InlineConfirm](../components/button.md)이나 [AlertDialog](../components/alert-dialog.md)를 둔다.
+- 구획 제목은 Heading으로 표시한다. 이전 Text heading 예제는 2026-10-06 제목 의미 구조를 맞추면서 수정했다.
+- 현재 스토리는 읽기·내보내기 실패를 상태 Text 문구로만 알리고(Notice·다시 시도 없음), 상태 문구를 템플릿 문자열로 조립한다. PNG 내보내기 중에는 `loading` 대신 `disabled` + 라벨 교체를 쓴다.