@hjmds/design-contracts 1.26.0 → 1.27.0

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

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-15
+- 검토일: 2026-10-17
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/기본 흐름/사진 선택과 업로드`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/콘텐츠/사진 선택과 업로드`
 
@@ -31,7 +31,7 @@ host: 남은 높이·safe area·키보드
 
 | 행동 | 컴포넌트·tone | 위치 | 개수·순서 |
 | --- | --- | --- | --- |
-| 작업 | `add` Button·secondary / `done` Button·primary / 항목 행동 Button·ghost·small | 추가는 헤더 actions, 완료는 footer(선택 요약 아래), 위로·아래로·제거는 각 칸 미리보기 아래 | primary는 완료 하나. 칸마다 위로 → 아래로 → 제거, 첫 칸의 위로·마지막 칸의 아래로는 비활성 |
+| 작업 | `exit` 아이콘 / `add` IconButton·ghost(선택) / `done` Button·primary / 항목 행동 Button·ghost·small | 나가기는 헤더 시작, 추가는 헤더 actions 끝, 완료는 footer(선택 요약 아래), 위로·아래로·제거는 각 칸 미리보기 아래 | primary는 완료 하나. 칸마다 위로 → 아래로 → 제거, 첫 칸의 위로·마지막 칸의 아래로는 비활성 |
 | 복구 | Button·secondary | 오류 근처 | 재시도할 대상과 범위를 표시 |
 
 ## 상태
@@ -48,11 +48,9 @@ host: 남은 높이·safe area·키보드
 
 Web·Native `media-picker-preview.tsx`는 최대 5장을 순서대로 고른 뒤 공통 `items` 격자에서 메모리 업로드를 시연한다. `실패와 복구`는 첫 항목 한 번만 실패하며, 항목의 재시도로 해당 사진만 다시 처리한다. 업로드·실패·0장 상태에서는 완료를 막고, 사진 제거·선택 화면 복귀 뒤 도착한 이전 결과는 무시한다. 모두 성공한 뒤 완료하면 순서를 포함한 읽기 전용 결과가 남고 `새로 선택`으로 초기화한다. `showcase/shared/media-picker-example.ts`는 이 예제만의 메모리 어댑터이며 실제 OS 사진 접근·권한이나 서버 업로드를 수행하지 않는다.
 
-2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
-
 | 상황 | 연결 | 유지·복구 |
 | --- | --- | --- |
-| 선택 0개 | empty + add | 새 사진 선택은 계속 가능하고 done은 제품 정책에 따라 잠근다 |
+| 선택 0개 | empty (+ add가 있으면 활성) | 새 사진 선택은 계속 가능하고 done은 제품 정책에 따라 잠근다 |
 | 업로드 혼재 | 썸네일·순서와 각 UploadItem 상태 유지 | 실패한 항목만 재시도한다. 성공한 사진을 다시 업로드하지 않는다 |
 | 완료 가능 | 필수 항목 모두 서버 확정 | 업로드 중이 아니어도 실패·취소 항목이 남으면 done을 바로 활성화하지 않는다 |
 | 권한 제한 | restricted + 권한 안내 행동 | 로컬 썸네일이 존재한다는 이유로 OS 접근 권한을 얻었다고 판단하지 않는다 |
@@ -76,7 +74,8 @@ import { MediaSelectionScreen } from "@hjmds/react/screen-flows";
   title={t("media.title")}
   items={picked.map((p) => ({ descriptor: { id: p.id, name: p.fileName, state: p.upload },
     preview: <img src={p.uri} alt="" width={p.width} height={p.height} /> }))}
-  add={{ label: t("media.add"), onAction: openPicker }}
+  exit={{ kind: "close", label: t("media.close"), onClick: close }}
+  add={{ label: t("media.add"), icon: <PlusIcon aria-hidden />, onAction: openPicker }}
   done={{ label: t("media.done"), onAction: submit, disabled: uploading || !canComplete }}
   labels={{ pending: t("upload.pending"), uploading: t("upload.uploading"),
     success: t("upload.success"), cancel: t("upload.cancel"), retry: t("upload.retry") }}
@@ -98,7 +97,8 @@ import { Image } from "react-native";
   title={t("media.title")}
   items={picked.map((p) => ({ descriptor: { id: p.id, name: p.fileName, state: p.upload },
     preview: <Image src={p.uri} width={p.width} height={p.height} /> }))}
-  add={{ label: t("media.add"), onAction: openPicker }}
+  exit={{ kind: "close", label: t("media.close"), onPress: close }}
+  add={{ label: t("media.add"), icon: <PlusIcon color={colors.text} />, onAction: openPicker }}
   done={{ label: t("media.done"), onAction: submit, disabled: uploading || !canComplete }}
   labels={{ pending: t("upload.pending"), uploading: t("upload.uploading"),
     success: t("upload.success"), cancel: t("upload.cancel"), retry: t("upload.retry") }}
@@ -127,3 +127,8 @@ import { Image } from "react-native";
 
 - 업로드 실패 항목만 재시도, 완료 버튼은 제품 정책으로 제한.
 - Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크와 실패/복구를 확인한다. 최대 글자와 이를 모사하는 확대 조건은 공통 사용자 지침에 따라 검증·설계 고려에서 제외한다.
+
+## 근거
+
+- 항목별 업로드와 완료 조건 상황 표: 2026-10-13 전수 점검 — 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+- 나가기 `exit`·아이콘 `add`: 2026-10-17 화면 검토 — 필수 글자 `add`에 "취소"가 들어가 헤더 끝 글자 버튼이 가운데 제목을 밀었고 Native에서 "취"로 잘렸다.

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

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-15
+- 검토일: 2026-10-17
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/기본 흐름/신고와 차단`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소통/신고와 차단`
 
@@ -31,6 +31,7 @@ host: 남은 높이·safe area·키보드
 
 | 행동 | 컴포넌트·tone | 위치 | 개수·순서 |
 | --- | --- | --- | --- |
+| 닫기 | ScreenLayout `exit` `kind="close"` | 헤더 시작 끝 아이콘 버튼 | 1. 신고하지 않고 화면을 닫는다 |
 | 작업 | ModerationScreen 공개 행동 슬롯 | 신고는 footer; 차단은 별도 확인 후 실행 | 같은 표면에 경쟁하는 primary 하나만 |
 | 복구 | Button·secondary | 오류 근처 | 재시도할 대상과 범위를 표시 |
 
@@ -46,8 +47,6 @@ host: 남은 높이·safe area·키보드
 
 ### 신고와 차단의 서로 다른 결과
 
-2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
-
 | 상황 | 연결 | 유지·복구 |
 | --- | --- | --- |
 | 사유 미선택 | submit 비활성 | reason은 현재 reasons의 값이어야 한다 |
@@ -72,6 +71,7 @@ import { ModerationScreen } from "@hjmds/react/screen-flows";
 
 <ModerationScreen
   title={t("report.title")}
+  exit={{ kind: "close", label: t("common.close"), onClick: closeReport }}
   reasonLabel={t("report.reason")}
   reasons={[
     { value: "spam", label: t("report.reason.spam") },
@@ -98,6 +98,7 @@ import { ModerationScreen } from "@hjmds/react-native/screen-flows";
 
 <ModerationScreen
   title={t("report.title")}
+  exit={{ kind: "close", label: t("common.close"), onPress: closeReport }}
   reasonLabel={t("report.reason")}
   reasons={[
     { value: "spam", label: t("report.reason.spam") },
@@ -133,3 +134,8 @@ import { ModerationScreen } from "@hjmds/react-native/screen-flows";
 
 - 신고 실패에 선택 사유·설명 유지; 차단은 성공 후 확정.
 - Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크·큰 글자와 실패/복구를 각각 확인한다.
+
+## 근거
+
+- 신고와 차단의 서로 다른 결과 상황 표: 2026-10-13 전수 점검 — 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+- 닫기 `exit`: 2026-10-17 화면 검토(S5)에서 exit 없는 신고 예제가 나갈 길 없는 화면으로 렌더링돼 예제·코드 골격에 추가했다.

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

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-15
+- 검토일: 2026-10-17
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screen-flows.tsx`(`OnboardingScreen`), 예제 `showcase/*/screen-flow-previews.tsx`(`OnboardingFlowPreview`)·`showcase/shared/onboarding-pattern.ts`(주제·요약). 2026-10-06 사용자 승인으로 실험 `기본 흐름/온보딩`(OnboardingScreen)을 배포하면서 같은 일을 직접 조립하던 배포 `화면/온보딩`을 대체했다(Web id `patterns-onboarding` 보존, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소개/온보딩`
 
@@ -16,8 +16,7 @@
 단계 제목·설명은 화면 맨 위, 진행 문구는 그 아래에 둔다. Web은 머리를 고정하고 Native는 제목·설명·진행을 본문과 함께 스크롤한다. 이동 버튼은 footer에 고정한다. 권한 요청·로그인·가입은
 이 화면에 없다([권한 안내](flow-permission.md), [로그인](common-login.md)).
 스토리는 `기본`(1단계부터 직접 넘기기), `관심 주제 고르기`(2단계를 바로 연 상태), `실패와 복구`(다음 완료 저장 실패 → 다시 시작하기)다.
-2026-10-06 배포 직접 조립 온보딩(Steps·ContentTransition·여러 개 고르는 주제 버튼)을 이 항목으로 합쳤고, 그 고유 상태인
-관심 주제 여러 개 고르기는 OnboardingScreen 2단계의 Chip 다중 선택으로 옮겼다(두 플랫폼 `관심 주제 고르기` 스토리가 같은 화면을 연다).
+관심 주제 여러 개 고르기는 OnboardingScreen 2단계의 Chip 다중 선택이다(두 플랫폼 `관심 주제 고르기` 스토리가 같은 화면을 연다).
 단계·주제·문구·저장은 제품이 공급한다.
 
 ## 영역 구조
@@ -37,7 +36,7 @@
 │          (완료 저장 실패면) Notice danger + 다시 시도                   │
 ├──────────────────────────── footer(고정, 위 테두리 1) ─────────────────┤
 │ [          다음 / 시작하기          ]  ← primary, 마지막 단계는 complete │
-│ [               이전                ]  ← ghost, 첫 단계에는 없음        │  사이 spacing.sm 12
+│ [               이전                ]  ← ghost, 첫 단계에는 없음        │  사이 spacing.xs 8
 └ 아래 safe area(Web은 footer padding이 늘어난다) ──────────────────────┘
 ```
 
@@ -51,7 +50,7 @@
 | 단계 본문 | `steps[index].content` | 진행 문구 아래, 본문 스크롤 | 본문 안 간격은 제품 소유. 예제는 Stack `gap="lg"` 20 |
 | 관심 주제 | Stack `axis="inline" wrap gap="xs"`(Web `role="group"` + 이름) > [Chip](../components/chip.md) `selectionMode="multiple"` | 2단계 content 안 | 칩 높이 `small` 36(Native hitSlop으로 터치 44), 사이 `spacing.xs` 8 |
 | 저장 실패 | [Notice](../components/notice.md) `tone="danger"` + `action` | 마지막 단계 content 맨 아래 | 본문 Stack 간격을 따른다 |
-| footer | Stack `gap="sm"` > Button primary(다음·완료) → Button ghost(이전) | 맨 아래, 고정 | 사이 `spacing.sm` 12, 위 테두리 1 |
+| footer | Stack `gap="xs"` > Button primary(다음·완료) → Button ghost(이전) | 맨 아래, 고정 | 사이 `spacing.xs` 8(세로로 쌓은 버튼), 위 테두리 1 |
 
 ## 버튼과 행동 위치
 
@@ -67,8 +66,7 @@
 
 한 단계에 primary는 footer의 다음·완료 하나다. 진행·이동이 footer에 고정돼 단계 본문이 바뀌어도 버튼 자리가 흔들리지 않는다.
 
-2026-10-06 관심 주제를 ghost+`selected` Button에서 Chip `multiple`로 바꿨다. 여러 개 고르는 선택은 checkbox 역할로 읽혀야 하는데
-Button `selected`는 눌림 토글(`aria-pressed`)로 읽히고, 한 줄짜리 주제 선택에 CheckboxGroup은 세로 목록이라 화면을 많이 차지한다.
+관심 주제는 Chip `multiple`로 고른다. ghost+`selected` Button이나 세로 CheckboxGroup으로 조립하지 않는다.
 
 ## 상태
 
@@ -194,4 +192,11 @@ const topicPicker = <Stack axis="inline" wrap gap="xs">
 - 현재 스토리의 진행 문구는 `` `${index} / ${total}` `` 고정 문자열이다. 제품은 보간 키 하나(`onboarding.progress`)를 쓴다.
 - Storybook은 실제 서버·라우터 연동 증거가 아니다. 기본·어두운 테마·큰 글자와 실패와 복구를 각각 확인한다.
 
-2026-10-07 iOS 26.5 / 200% 글자에서 키보드가 열린 시작 안내의 고정 머리가 본문 높이를 모두 소비했다. Native는 기존 ScreenLayout의 본문 스크롤 안으로 단계 안내를 옮겨 입력에 도달하게 하고 footer의 완료·이전 버튼은 유지한다. [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md).
+Native는 기존 ScreenLayout의 본문 스크롤 안으로 단계 안내를 옮겨 입력에 도달하게 하고 footer의 완료·이전 버튼은 유지한다.
+
+## 근거
+
+- 한 항목 구성: 2026-10-06 배포 직접 조립 온보딩(Steps·ContentTransition·여러 개 고르는 주제 버튼)을 이 항목으로 합치고 그 고유 상태인 관심 주제 고르기를 2단계로 옮겼다.
+- 관심 주제 Chip `multiple`: 2026-10-06 ghost+`selected` Button에서 바꿨다. 여러 개 고르기는 checkbox 역할로 읽혀야 하는데 Button `selected`는 눌림 토글(`aria-pressed`)로 읽히고, 한 줄짜리 주제 선택에 CheckboxGroup은 세로 목록이라 화면을 많이 차지한다.
+- Native 단계 안내를 본문 스크롤 안에 둠: 2026-10-07 iOS 26.5 / 200% 글자에서 키보드가 열린 시작 안내의 고정 머리가 본문 높이를 모두 소비했다([검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md)).
+- footer 버튼 간격 8: 2026-10-17 사용자 지시(button.md 간격) — 세로로 쌓은 하단 버튼의 12 간격이 벌어져 보였다.

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

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-15
+- 검토일: 2026-10-17
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/기본 흐름/권한 안내`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소개/권한 안내`
 
@@ -47,8 +47,6 @@ host: 남은 높이·safe area·키보드
 
 ### OS 상태에 맞는 다음 행동
 
-2026-10-13 전수 점검에서 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
-
 | 상황 | 연결 | 유지·복구 |
 | --- | --- | --- |
 | prompt | request | 사용자 행동에서만 OS 권한 요청 |
@@ -117,3 +115,7 @@ import { Linking } from "react-native";
 
 - 렌더 시 OS 요청 금지; 설정 복귀 시 제품이 상태 재조회.
 - Storybook은 실제 서버·OS 권한·라우터 연동 증거가 아니다. 기본·다크·큰 글자와 실패/복구를 각각 확인한다.
+
+## 근거
+
+- OS 상태에 맞는 다음 행동 상황 표: 2026-10-13 전수 점검 — 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.

package/docs/usage/screens/landing.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-15
+- 검토일: 2026-10-17
 - 근거: `showcase/web/src/patterns/Landing.stories.tsx`·`Landing.previews.tsx`(진입점)·`showcase/web/src/patterns/landing-preview.tsx`(기본 본체), `showcase/native/src/Landing.stories.tsx`·`introduction-preview.tsx`(진입점)·`showcase/native/src/landing-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-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소개/서비스 소개`
 
@@ -93,15 +93,15 @@ ScreenLayout(제목 = 소개 문장, 최대 720, 바깥 padding spacing.md 16)
 
 | 행동 | 컴포넌트·tone | 위치 | 개수·순서 |
 | --- | --- | --- | --- |
-| 주 행동(체험 시작) | Button 기본 primary, `medium` | ① 히어로 소개문 바로 아래 | 1 |
-| 같은 행동 반복 | Button `secondary`, 같은 라벨·같은 동작 | ⑤ FAQ 다음 | 1. 기능·FAQ를 읽은 뒤 위로 돌아가지 않고 체험할 수 있도록 끝에 한 번 더 둔다 |
+| 주 행동(체험 시작) | Button 기본 primary, `medium` | ① 히어로 소개문 바로 아래. Web은 히어로 Stack `align="start"`로 내용 폭을 유지한다(넓은 폭에서 1200 Container 폭으로 늘리지 않는다) | 1 |
+| 같은 행동 반복 | Button `secondary`, 같은 라벨·같은 동작 | ⑤ FAQ 다음. Web은 범위 안내와 함께 `Stack gap="xl" align="start"`로 감싸 내용 폭 | 1. 기능·FAQ를 읽은 뒤 위로 돌아가지 않고 체험할 수 있도록 끝에 한 번 더 둔다 |
 | 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 하나로 답을 연다.
+두 변형은 히어로 행동과 끝 행동 카드의 버튼이 같은 Sheet를 연다(같은 행동 반복). FAQ도 기본처럼 Collapsible로 답을 연다. 펼치고 접기를 `selected` 토글 Button으로 흉내 내지 않는다([선택 조립 규칙](../SELECTION.md#조립-규칙필수)).
 
 키보드: Native 시트는 `keyboardAvoidance`로 키보드 위에 붙고 `footer`가 키보드 위에 고정돼 제출 버튼이 가려지지 않는다.
 바깥 ScrollView에는 입력이 없다.
@@ -111,7 +111,6 @@ footer의 저장과 같은 동작을 실행한다. Web에서 IME 조합 확정
 빈 입력을 제출하면 시트를 유지하고 오류가 있는 입력칸에 초점을 돌린다. 닫기·Escape 또는 저장으로 시트가 끝나면
 `returnFocusRef`로 실제 누른 위·아래 CTA에 복귀한다(Native는 접근성 초점).
 
-2026-10-13 실제 예제 검수에서 닫은 뒤 초안 소실과 연속 제출 시 중복 행을 재현해 수정했다.
 기본 예제는 닫을 때 초안을 보존하고, 성공한 제출만 한 번 추가한 뒤 초안을 비운다. 다시 열면 새로운 기록을 시작한다.
 
 ## 상태
@@ -178,7 +177,7 @@ const gutter = resolveWindowClass(window.innerWidth) === "compact" ? "compact" :
 <main><Container size="content" gutter={gutter}><Stack gap="xl">
   {/* 장식과 콘텐츠 여백은 기존 EffectSurface + Surface로 분리한다. */}
   <EffectSurface descriptor={{ layers: ["mesh", "grain"], seed: "landing", active: false }}><Surface padding="xl">
-    <Stack gap="lg">
+    <Stack gap="lg" align="start">
       <Text tone="muted">{t("landing.eyebrow")}</Text>
       <Heading level="level1">{t("landing.title")}</Heading>
       <Text as="p">{t("landing.intro")}</Text>
@@ -195,8 +194,8 @@ const gutter = resolveWindowClass(window.innerWidth) === "compact" ? "compact" :
     <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 gap="xl" align="start"><Button tone="secondary" onClick={start}>{t("landing.cta")}</Button>
+  <Text tone="muted">{t("landing.scope")}</Text></Stack>
 </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>}>
@@ -256,6 +255,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 ```tsx
 // Web
 import { Button } from "@hjmds/react/actions";
+import { Collapsible } from "@hjmds/react/collapsible";
 import { Heading } from "@hjmds/react/heading";
 import { TextField } from "@hjmds/react/forms";
 import { Grid, Stack, Surface, Text } from "@hjmds/react/layout";
@@ -276,8 +276,7 @@ import { ScreenLayout } from "@hjmds/react/screens";
       <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}
+      <Collapsible trigger={t("intro.faq.question")}><Text>{t("intro.faq.answer")}</Text></Collapsible>
       <Surface padding="lg">
         <Stack gap="md">
           <Heading level="level5" semanticLevel={2}>{t("intro.closing")}</Heading>
@@ -296,6 +295,7 @@ import { ScreenLayout } from "@hjmds/react/screens";
 ```tsx
 // Native
 import { Button } from "@hjmds/react-native/actions";
+import { Collapsible } from "@hjmds/react-native/collapsible";
 import { Heading } from "@hjmds/react-native/heading";
 import { TextField } from "@hjmds/react-native/inputs";
 import { Grid, Stack, Surface, Text } from "@hjmds/react-native/primitives";
@@ -316,8 +316,7 @@ import { ScreenLayout } from "@hjmds/react-native/screens";
       <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}
+      <Collapsible trigger={t("intro.faq.question")}><Text>{t("intro.faq.answer")}</Text></Collapsible>
       <Surface padding="lg">
         <Stack gap="md">
           <Heading level="level5">{t("intro.closing")}</Heading>
@@ -357,10 +356,17 @@ import { ScreenLayout } from "@hjmds/react-native/screens";
 
 ## 함정
 
-- 히어로는 Surface padding="xl"로 내부 여백을 갖고, 바깥 폭·gutter는 Container가 소유한다. 시트 저장은 footer에 둔다(2026-10-06 지침과 예제 정합성 수정).
+- 히어로는 Surface padding="xl"로 내부 여백을 갖고, 바깥 폭·gutter는 Container가 소유한다. 시트 저장은 footer에 둔다.
 - 기본 예제의 위·아래 CTA는 같은 시트를 연다. 히어로는 primary, FAQ 뒤의 반복 행동은 secondary다.
 - 미리보기 행은 번역 문구나 배열 위치 대신 생성 시 부여한 id로 유지한다.
 - 기본·변형 예제의 저장은 메모리에만 남는다. 기본 예제는 저장 없이 닫으면 초안을 보존하고 성공하면 비운다. 변형은 Sheet를 닫아도 입력 초안이 남는다. 운영 저장·실패 처리는 위 오류 행 규칙을 따른다.
-- 현재 변형 스토리는 FAQ를 Collapsible이 아니라 `selected` 토글 Button 하나로 그린다. 질문이 여럿이면 기본처럼 Collapsible을 쓴다.
+- 변형 스토리도 FAQ를 Collapsible로 그린다.
 
 제품 체험·편집형 ServiceIntroduction 변형도 Web에서 CTA 클릭의 `event.currentTarget`을 복귀 대상으로 기록한다. Safari의 포인터 클릭은 버튼에 초점을 주지 않을 수 있어, 열기 직전 `document.activeElement`만으로 복귀 대상을 추정하지 않는다. 이 변형은 저장한 한 장면을 다시 편집하는 예제이므로 닫기뿐 아니라 저장 뒤 재열기에도 입력값을 유지한다. 새 기록을 계속 추가하는 기본 랜딩의 성공 후 입력 초기화와 구분한다.
+
+## 근거
+
+- FAQ는 Collapsible(기본·변형): 2026-10-16 사용자 지적 — 변형 스토리가 `selected` 토글 Button 하나로 펼침을 흉내 내 눌림 토글로 읽혔다.
+- 닫을 때 초안 보존·성공 제출만 한 번 추가: 2026-10-13 실제 예제 검수에서 닫은 뒤 초안 소실과 연속 제출 시 중복 행을 재현했다.
+- 히어로 padding·시트 저장 footer: 2026-10-06 지침과 예제 정합성 수정.
+- Web CTA 내용 폭(`align="start"`): 2026-10-17 화면 리뷰 — 1280 폭에서 두 CTA가 Container 폭(약 1160)으로 늘어났다. 히어로 장식은 EffectSurface `radius`(기본 Surface `lg`)로 잘라 둥근 모서리 밖으로 비치지 않게 했다.