@hjmds/design-contracts 1.22.0 → 1.23.0

package/docs/usage/compositions/reference-review.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/확인/선택 내용 검토와 수정`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/입력과 작성/선택 내용 검토와 수정`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 선택 내용을 검토하고 수정 후 명시적으로 확정 흐름이 필요할 때 쓴다. 입력·단계·저장 세션을 제품 로직에 연결하며 새 데이터 엔진을 만들지 않는다.

package/docs/usage/compositions/reference-settings.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/설정/변경 저장과 이탈 확인`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/피드백과 복구/변경 저장과 이탈 확인`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 저장값과 편집 초안을 비교해 이탈 확인 흐름이 필요할 때 쓴다. 입력·단계·저장 세션을 제품 로직에 연결하며 새 데이터 엔진을 만들지 않는다.

package/docs/usage/compositions/selection-motion.md

@@ -4,15 +4,17 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.14.0
-- 검토일: 2026-10-07
+- 검토일: 2026-10-15
 - 근거: 공개 API를 사용하는 `showcase/*/reference-adoption-previews.tsx`
 - 스토리북: `배포/구성/직접 조작과 모션/선택 배경 이동`
 
 승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
-짧은 단일 선택의 현재 항목을 이어지는 배경으로 보여 줄 때 쓴다. 선택 값·키보드·초점은 기존 SegmentedControl이 소유한다. 별도 신규 wrapper API가 아니라 아래 공개 컴포넌트의 조합 규격이다.
+짧은 단일 선택의 현재 항목을 이어지는 배경으로 보여 줄 때 쓴다. 선택 값·키보드·초점은 기존 SegmentedControl이 소유한다. 기본 외곽 배치는 CompositionLayout이 제공하고 아래 공개 API가 해당 상호작용을 담당한다.
 
 ## 구성 요소
 

package/docs/usage/compositions/selection-scope.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [제품 상호작용 품질](../../../../../docs/INTERACTION_QUALITY.md), `showcase/web/src/patterns/SelectionScope.stories.tsx`, `showcase/native/src/SelectionScope.stories.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/상호작용 예제/대표 항목과 묶음 전체 선택`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/선택과 필터/대표 항목과 묶음 전체 선택`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 사진 묶음·스레드처럼 대표 항목 하나와 묶음 전체가 같은 모양으로 보일 때, 공유·삭제·이동 전에 대상 범위와 개수를 고르고 문구로 확인한 뒤 적용하게 할 때 쓴다.

package/docs/usage/compositions/social-compositions.md

@@ -8,6 +8,8 @@
 - 근거: [사회적 행동 계약](../../social-compositions.md), 양 renderer의 `src/social-compositions.tsx`
 - 스토리북: `배포/구성/정보 표시/팔로우 프로필`, `배포/구성/선택과 필터/행사 참석 응답`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 프로필 팔로우나 행사 참석 응답의 실제 요청과 수치의 실패 복구가 필요할 때 사용한다.

package/docs/usage/compositions/stea-event-ticket.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [QRCode](../../qr-code.md), `packages/react/src/qr-code.tsx`, `packages/react-native/src/qr-code.tsx`, `showcase/web/src/patterns/stea-expression-previews.tsx`(`EventTicket`), `showcase/native/src/stea-expression-previews.tsx`, `showcase/shared/stea-expressions.ts`(`ticketCopy`), `src/qr-code-recipe.ts`, `src/card.ts`
 - 스토리북: `배포/구성/정보 표시/일정과 식별 정보 티켓`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 공연·예약 입장권처럼 일시·장소·좌석 정보와 함께, 현장에서 보여 줄 QR 코드와 사람이 읽을 예매 번호를 한 카드에 담을 때 쓴다.

package/docs/usage/compositions/stea-flip-card.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: `showcase/web/src/patterns/stea-expression-previews.tsx`(`FlipInfoCard`), `showcase/native/src/stea-expression-previews.tsx`, `showcase/shared/stea-expressions.ts`(`flipCopy`), `src/content-transition.ts`, `src/card.ts`
 - 스토리북: `배포/구성/정보 표시/앞면과 상세 정보 전환`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 모임·상품처럼 한 카드에 요약(앞면)과 상세 항목(뒷면)이 있고, 사용자가 버튼 하나로 두 면을 오가게 할 때 쓴다.
@@ -52,7 +54,7 @@
 | 전환 버튼 | `Button` secondary | 면 아래, 전환되는 면 **밖**, 꽉 찬 폭(Stack 기본 stretch) | 높이 `control.buttonHeight.medium` 44, 면과 `spacing.md` 16 |
 
 - 버튼은 두 면 모두에서 같은 자리(면 아래, 면 밖)에 둔다. 면 안에 두면 면이 바뀔 때 포커스한 버튼이 사라진다.
-- 두 면의 높이가 다르면 버튼이 위아래로 움직인다. 면 높이를 고정하려면 제품 레이아웃에서 최소 높이를 준다(스토리는 고정하지 않는다).
+- 두 면의 높이가 다르면 버튼이 위아래로 움직인다. 면 높이 전환이 필요하면 HJM ContentTransition의 공개 크기 전환을 사용한다(스토리는 고정하지 않는다).
 - 전환 버튼은 보기 전환이라 primary가 아니라 secondary다([Button](../components/button.md)).
 
 ## 흐름과 상태

package/docs/usage/compositions/stea-order-progress.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [Steps](../../steps.md), [Timeline](../../timeline.md), `showcase/web/src/patterns/stea-composition-previews.tsx`(`OrderProgressRetry`), `showcase/native/src/stea-composition-previews.tsx`(`OrderProgressRetry`, `Frame`), `showcase/shared/stea-compositions.ts`(`orderReducer`, `orderStepsDescriptor`), `src/steps.ts`, `src/container.ts`
 - 스토리북: `배포/구성/피드백과 복구/처리 단계와 재시도`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 주문·신청처럼 서버가 단계를 하나씩 확정하는 처리 과정을 보여 주고, 확정에 실패하면 같은 단계를 다시 요청하게 할 때 쓴다.
@@ -55,7 +57,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Card만 그린다). Native는 Card를 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
+| 바깥 틀 | Web: HJM ScreenLayout의 본문. Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Card만 그린다). Native는 Card를 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
 | 틀 | `Card` | 바깥 틀 안, 스크롤과 함께 | body padding `spacing.md` 16, 안쪽 `Stack gap="lg"` 20 |
 | 단계 | `Steps` | Card 머리 아래 맨 위 | 단계 사이 `stepsRecipe.gap` `spacing.xs` 8, 표시 원 `glyph.md` |
 | 진행 | 진행 문구 | 단계 아래 | `spacing.lg` 20 |
@@ -173,7 +175,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 | --- | --- | --- |
 | 진행 문구 자리 | 빈 `role="status"`를 항상 마운트(알림 자리 유지) | 문구가 있을 때만 마운트(iOS는 live region을 무시하고 빈 Text가 틈을 남김, 2026-10-02 시뮬레이터 확인) |
 | 이벤트 | `onClick` | `onPress` |
-| 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView` > `Container` |
+| 바깥 틀 | HJM ScreenLayout의 본문 | `ScrollView` > `Container` |
 | 실패 Notice 발표 | `danger`는 늘 `role="alert"` | `announcement="assertive"`를 지정해야 발표(기본 `none`) |
 
 ## 함정

package/docs/usage/compositions/stea-otp-verify.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [OtpField](../../otp-field.md), `showcase/web/src/patterns/stea-composition-previews.tsx`(`OtpVerifyRecover`), `showcase/native/src/stea-composition-previews.tsx`(`OtpVerifyRecover`, `Frame`), `showcase/shared/stea-compositions.ts`(`otpReducer`·`otpErrorMessage`), `src/otp-field.ts`, `src/result.ts`, `src/card.ts`, `src/container.ts`
 - 스토리북: `배포/구성/입력과 작성/인증번호 확인과 다시 입력`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 문자·메일로 받은 숫자 인증번호를 입력하고 서버 확인을 기다린 뒤, 틀리면 남은 횟수를 보여 주고 다시 받게 하는 흐름에 쓴다.
@@ -61,7 +63,7 @@ Native 화면(ScrollView keyboardShouldPersistTaps="handled", 위아래 spacing.
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다. 스토리는 Card만 그린다. Web 단독 화면이면 [Container](../components/container.md) 같은 읽기 폭 컨테이너는 제품이 고른다. Native는 Card를 `ScrollView`(`keyboardShouldPersistTaps="handled"`) 안 `Container`에 둔다. 입력이 한 칸이라 [KeyboardFormScrollView](../components/keyboard-form-scroll-view.md)(실험, `react-native-keyboard-controller` 설치와 앱 루트 `KeyboardMotionProvider` 필요)는 기본값이 아니며, 여러 필드 폼 안에 이 구성을 넣을 때만 쓴다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
+| 바깥 틀 | Web: HJM ScreenLayout의 본문. Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다. 스토리는 Card만 그린다. Web 단독 화면이면 [Container](../components/container.md) 같은 읽기 폭 컨테이너는 제품이 고른다. Native는 Card를 `ScrollView`(`keyboardShouldPersistTaps="handled"`) 안 `Container`에 둔다. 입력이 한 칸이라 [KeyboardFormScrollView](../components/keyboard-form-scroll-view.md)(실험, `react-native-keyboard-controller` 설치와 앱 루트 `KeyboardMotionProvider` 필요)는 기본값이 아니며, 여러 필드 폼 안에 이 구성을 넣을 때만 쓴다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
 | 틀 | `Card` | 바깥 틀 안, 스크롤과 함께 | body padding `spacing.md` 16, 제목–설명 `spacing.xs` 8 |
 | 입력 | `OtpField` medium | Card 머리 아래 맨 위 | 칸 `control.minTouchTarget` 44, 칸 사이 `spacing.xs` 8 (`large`: 52 / `spacing.sm` 12) |
 | 재전송 안내 | Text muted | 입력 아래, 재전송 후·재전송 실패 때만 | `Stack gap="md"` 16 |
@@ -199,7 +201,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 | 항목 | Web | Native |
 | --- | --- | --- |
 | 제출 | `<form onSubmit>` + `type="submit"` 버튼(Enter 제출) | `onComplete`로 6자리 도달 시 자동 제출 + 확인 버튼 |
-| 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView keyboardShouldPersistTaps="handled"` > `Container` |
+| 바깥 틀 | HJM ScreenLayout의 본문 | `ScrollView keyboardShouldPersistTaps="handled"` > `Container` |
 | 재전송 후 포커스 | 첫 번째·반복 재전송 모두 입력으로 `focus()` | 입력 ref의 `focus()` 호출 |
 | 성공 후 포커스 | 사라지는 폼에 초점이 있었으면 `Result`(`tabIndex={-1}`)로 이동. 사용자가 옮긴 외부 초점은 유지 | 결과 행동을 각각 탐색할 수 있게 유지하며 iOS 성공 안내·Android polite live region 연결 |
 | 성공 뒤 데모 초기화 | 새 입력으로 복귀 | 새 입력 ref의 `focus()` 호출 |

package/docs/usage/compositions/stea-pixel-empty.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: `src/component-recipes.ts` `emptyStateRecipe`, `packages/react/src/styles.css` `.hjm-empty-state`, `showcase/shared/stea-expressions.ts`, `showcase/{web/src/patterns,native/src}/stea-expression-previews.tsx`(`PixelEmptyState`, Native `Frame`), `src/container.ts`
 - 스토리북: `배포/구성/피드백과 복구/캐릭터와 시작 행동`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 아직 만든 것이 없는 첫 빈 화면에 제품 캐릭터를 움직여 보이고 첫 행동 하나로 이끌 때 쓴다. 검색 결과 0건이나 오류처럼
@@ -45,7 +47,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(Web 스토리는 Stack만 그린다). Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
+| 바깥 틀 | Web: HJM ScreenLayout의 본문. Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(Web 스토리는 Stack만 그린다). Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
 | 빈 상태 | EmptyState `density="regular"` | 본문 가운데 | 위아래 Web `spacing.xxl` 32 / Native `spacing.xxxl` 40, 좌우 `spacing.xl` 24, 슬롯 사이 `spacing.xs` 8 |
 | 캐릭터 | Web `icon` / Native `illustration` | EmptyState 맨 위 | 96×96(12칸 × `spacing.xs` 8). Native도 그림 노드 자체의 96×96 크기를 사용한다 |
 | 시작 행동 | Button `primary` | EmptyState `action` | 높이 44, 하나만 |
@@ -131,7 +133,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 | 세로 여백 | `.hjm-empty-state` `spacing.xxl` 32 | recipe `spacing.xxxl` 40 |
 | 일시정지 감지 | `document.hidden` | `AppState` |
 | 상태 문구 자리 | 빈 `role="status"`를 늘 마운트 | 문구가 있을 때만 마운트 |
-| 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView` > `Container` |
+| 바깥 틀 | HJM ScreenLayout의 본문 | `ScrollView` > `Container` |
 
 ## 함정
 

package/docs/usage/compositions/stea-schedule-card.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: `showcase/web/src/patterns/stea-composition-previews.tsx`(`ScheduleDayList`), `showcase/native/src/stea-composition-previews.tsx`(`ScheduleDayList`, `Frame`), `showcase/shared/stea-compositions.ts`(`scheduleCopy`), `src/card.ts`, `src/component-recipes.ts`(`segmentedControlRecipe`, `listRowRecipe`), `src/container.ts`
 - 스토리북: `배포/구성/선택과 필터/날짜 선택과 예정 목록`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 한 주처럼 짧은 날짜 범위에서 날짜 하나를 고르면 같은 카드 안의 일정 목록이 그 날짜로 바뀌는 요약 카드에 쓴다.
@@ -48,7 +50,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Card만 그린다). Native는 Card를 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
+| 바깥 틀 | Web: HJM ScreenLayout의 본문. Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Card만 그린다). Native는 Card를 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
 | 틀 | `Card` | 바깥 틀 안, 스크롤과 함께 | body padding `spacing.md` 16, 안쪽 `Stack gap="md"` 16 |
 | 날짜 | `SegmentedControl` medium | Card 머리 아래 | 최소 높이 `control.minTouchTarget` 44, 트랙 padding·항목 사이 Native `spacing.xxs` 4 / Web CSS 2px |
 | 목록 | `List` + `ListRow` | 날짜 아래 | 두 줄 행 최소 `layout.rowHeight.twoLine` 68(comfortable), 날짜와 `spacing.md` 16 |
@@ -160,7 +162,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 | `Card`·`List` import | `@hjmds/react/display` | `@hjmds/react-native/data-display` |
 | 큰 글자 | `data-large-text`에서 세로로 쌓음 | 기준 글자 크기 이상에서 세로로 쌓음 |
 | 트랙 padding·항목 간격 | CSS 2px | `spacing.xxs` 4 |
-| 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView` > `Container` |
+| 바깥 틀 | HJM ScreenLayout의 본문 | `ScrollView` > `Container` |
 | 실패 Notice 발표 | `danger`는 늘 `role="alert"` | `announcement="assertive"`를 지정해야 발표(기본 `none`) |
 
 ## 함정

package/docs/usage/compositions/stea-stat-summary.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [Statistic](../../statistic.md), [Progress](../../progress.md), `showcase/shared/stea-compositions.ts`, `showcase/{web/src/patterns,native/src}/stea-composition-previews.tsx`(`StatChangeSummary`, Native `Frame`), `src/container.ts`
 - 스토리북: `배포/구성/정보 표시/수치와 이전 대비 변화`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 매출·주문·반품처럼 몇 개의 핵심 수치를 비교 기간과 함께 보이고, 증감의 방향과 좋고 나쁨을 색 없이도 읽히게 할 때 쓴다.
@@ -47,7 +49,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Card만 그린다). Native는 Card를 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
+| 바깥 틀 | Web: HJM ScreenLayout의 본문. Native: `ScrollView` > `Container` | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Card만 그린다). Native는 Card를 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20(`layout.pagePadding`) |
 | 틀 | Card | 바깥 틀 안, 함께 스크롤 | padding `md` 16, radius `lg` 16, 테두리 있음 |
 | 기간 선택 | SegmentedControl | 카드 본문 맨 위 | `size` `medium`, 아래 `spacing.lg` 20 |
 | 수치 목록 | Stack > Statistic ×3 | 기간 선택 아래 | 수치 사이 `spacing.md` 16, 값은 `comfortable`(`heading` 크기) |

package/docs/usage/compositions/streaming-answer.md

@@ -8,6 +8,8 @@
 - 근거: [스트림 응답 계약](../../streaming-answer.md), `src/streaming-answer.ts`, 양 renderer `src/streaming-answer.tsx`
 - 스토리북: `배포/구성/피드백과 복구/스트림 응답과 중지`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 실제 provider가 보내는 응답 delta를 표시하고 중지·재생성·오류를 같은 영역에서 제공할 때 쓴다. 이미 받은 정적 본문은 Text로 보여 준다. 고정 문자열에 글자 재생 타이머를 붙이거나 HTTP 연결 종료만 보고 AI 생성 완료로 판정하는 용도로 쓰지 않는다.

package/docs/usage/compositions/task-controls.md

@@ -8,6 +8,8 @@
 - 근거: [작업 선택 계약](../../task-controls.md), `src/task-controls.ts`, 양 renderer의 `src/task-controls.tsx`
 - 스토리북: `배포/구성/입력과 작성/분할 실행`, `배포/구성/입력과 작성/비밀번호 규칙 확인`, `배포/구성/탐색과 이동/계정 전환`, `배포/구성/선택과 필터/요금 주기 선택`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 선택만 하는 화면과 선택 뒤 실제 요청을 실행하는 화면의 상태를 혼동하지 않도록 도입했다.

package/docs/usage/compositions/texture-comparison.md

@@ -4,12 +4,14 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.14.0
-- 검토일: 2026-10-07
+- 검토일: 2026-10-15
 - 근거: [EffectSurface 계약](../../effect-surface.md), `showcase/*/texture-comparison-preview.tsx`
 - 스토리북: `배포/구성/정보 표시/질감 비교`
 
 승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 기존 반복 점 grain과 불규칙한 정적 noise를 같은 배경·강도로 비교할 때 쓴다.

package/docs/usage/compositions/time-selection.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-13
+- 검토일: 2026-10-15
 - 근거: `showcase/web/src/patterns/TimeSelection.stories.tsx`, `showcase/native/src/TimeSelection.stories.tsx`, `showcase/native/src/pattern-status.tsx`, `showcase/shared/time-example.ts`, `src/foundations.ts`(`control`, `spacing`), `src/component-recipes.ts`(`stackRecipe`, `sectionRecipe`), `src/container.ts`
 - 스토리북: `배포/구성/선택과 필터/시간 선택`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 알림 시각·마감 시각처럼 하루 안의 시각 하나를 시·분 두 Select로 나눠 고르게 할 때 쓴다. 둘 다 고른 뒤에만
@@ -55,7 +57,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter compact 16
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤). Native: `ScrollView` > `Container` | Web 스토리도 Container gutter="compact" 안에 Section을 둔다. Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. Select는 키보드 대신 목록 표면(Web popover, Native modal sheet)을 열어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, 양 Story의 Container gutter는 `compact` 16이며 폭에 따라 자동 변경되지 않음 |
+| 바깥 틀 | Web: HJM ScreenLayout의 본문. Native: `ScrollView` > `Container` | Web 스토리도 Container gutter="compact" 안에 Section을 둔다. Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. Select는 키보드 대신 목록 표면(Web popover, Native modal sheet)을 열어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, 양 Story의 Container gutter는 `compact` 16이며 폭에 따라 자동 변경되지 않음 |
 | 머리 | Section 제목·설명 | 흐름 맨 위, 스크롤과 함께 | 제목–설명 `spacing.xxs` 4, 머리–내용 `spacing.xs` 8 |
 | 입력 | Select 시 → 분 | 머리 아래, 시가 먼저 | 필드 `control.fieldHeight` 44, 사이 `spacing.md` 16 |
 | 상태 | 상태 문구 | 입력 바로 아래 | 위 `spacing.md` 16 |
@@ -164,7 +166,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
 | 필수 문구 | `emptySelectionLabel`(선택 해제 항목) | `dismissLabel`(시트 닫기) |
 | 상태 문구 낭독 | `role="status"` | 공개 StatusText(Android live region + iOS 변경 알림) |
 | 확정 Notice 발표 | 늘 live region | `announcement`를 지정해야 발표(기본 `none`) |
-| 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView` > `Container` |
+| 바깥 틀 | HJM ScreenLayout의 본문 | `ScrollView` > `Container` |
 
 ## 함정
 

package/docs/usage/compositions/toast-layout.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [Toast](../../toast.md), `showcase/web/src/components/ToastLayout.stories.tsx`, `src/component-recipes.ts`(`toastRecipe`), `src/toast.ts`, `packages/react/src/styles.css`(`.hjm-toast-viewport`, `.hjm-toast`), `packages/react/src/toast.tsx`
 - 스토리북: `배포/구성/비교와 검증/토스트 배치 비교`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 Toast 카드 한 장의 내부 배치(톤 배지·제목·설명·닫기·실행 버튼)와 화면 위 위치를 좁은 폭·큰 글자·긴 문구·톤별로 확인하는 비교 스토리다.

package/docs/usage/compositions/toggle-feedback.md

@@ -8,6 +8,8 @@
 - 근거: [선택 반응 계약](../../toggle-feedback.md), `src/toggle-feedback.ts`, 양 renderer의 `src/toggle-feedback.tsx`
 - 스토리북: `배포/구성/직접 조작과 모션/선택 반응 버튼`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 구독·북마크·좋아요에서 선택 요청과 실제 인원 수의 실패 복구, 국소 모션이 함께 필요할 때 쓴다.

package/docs/usage/compositions/transfer-task.md

@@ -8,6 +8,8 @@
 - 근거: [실제 전송 계약](../../transfer-task.md), `src/transfer-task.ts`, 양 renderer `src/transfer-task.tsx`
 - 스토리북: `배포/구성/피드백과 복구/전송 진행과 취소`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 실제 다운로드·업로드·작업의 시작/대기/진행·취소·실패 복구를 한 구성으로 제공할 때 쓴다.

package/docs/usage/compositions/upload-recovery.md

@@ -4,15 +4,17 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.14.0
-- 검토일: 2026-10-07
+- 검토일: 2026-10-15
 - 근거: 공개 API를 사용하는 `showcase/*/reference-adoption-previews.tsx`
 - 스토리북: `배포/구성/피드백과 복구/선택과 오류 복구`
 
 2026-10-07 사용자 승인으로 승급. [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md).
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
-파일 선택과 전송 상태의 취소·재시도를 연결할 때 쓴다. 별도 신규 wrapper API가 아니라 아래 공개 컴포넌트의 조합 규격이다.
+파일 선택과 전송 상태의 취소·재시도를 연결할 때 쓴다. 기본 외곽 배치는 CompositionLayout이 제공하고 아래 공개 API가 해당 상호작용을 담당한다.
 
 ## 구성 요소
 

package/docs/usage/compositions/video-dialog.md

@@ -4,12 +4,14 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.14.0
-- 검토일: 2026-10-07
+- 검토일: 2026-10-15
 - 근거: `showcase/web/src/patterns/video-dialog-preview.tsx`, `showcase/native/src/video-dialog-preview.tsx`·`video-dialog-host.ts`(Expo 로딩 경계)
 - 스토리북: `배포/구성/정보 표시/영상 미리보기`
 
 승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 현재 입력을 유지하면서 짧은 영상 설명을 확인할 때 쓴다. HJM Dialog가 모달·닫기·초점 복귀를

package/docs/usage/compositions/visual-foundations.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [EffectSurface](../../effect-surface.md), [Avatar fallback](../../avatar-fallback.md), [Icon](../../icon.md), `showcase/shared/visual-foundations.ts`, `showcase/{web/src/patterns,native/src}/visual-previews.tsx`, `src/container.ts`, `packages/react/src/composition-style.ts`
 - 스토리북: `배포/구성/비교와 검증/시각 효과 모음`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 배경 질감, 의미 이름 아이콘, 사진 없는 프로필 얼굴, 문장 전환처럼 화면의 분위기를 더하는 선택 표현을 고를 때 이 모음을 본다.
@@ -58,7 +60,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | Web: 제품 화면 레이아웃(문서 스크롤) > Stack. Native: `ScrollView` > `Container` > Stack | 이 구성은 바깥 폭·여백을 정하지 않는다. Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20. 묶음 사이 Stack `gap="xl"` 24 |
+| 바깥 틀 | Web: HJM ScreenLayout의 본문 > Stack. Native: `ScrollView` > `Container` > Stack | 이 구성은 바깥 폭·여백을 정하지 않는다. Native는 `ScrollView` 안 [Container](../components/container.md)에 둔다. 입력이 없어 키보드 처리는 없다. 안전 영역은 화면 골격(내비게이션 헤더·탭 바)이 맡는다 | Native ScrollView 위아래 `spacing.lg` 20, Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20. 묶음 사이 Stack `gap="xl"` 24 |
 | 효과 표면 | EffectSurface > 안쪽 틀 > Stack `gap="lg"` | 세로로 쌓음(비교용. 실제 화면은 히어로 하나) | EffectSurface는 여백이 없다. 안쪽 틀 여백 `spacing.xl` 24(두 플랫폼 같음, [랜딩](../screens/landing.md) 히어로와 같다), 내용 사이 `spacing.lg` 20, `intensity` 0.4(예) |
 | 아이콘 행 | Icon `size="lg"` + Text | 가로(Stack `axis="inline"`) | 아이콘 `lg` 28, 사이 `spacing.md` 16 |
 | 얼굴 행 | Avatar ×2 + Text | 가로(Stack `axis="inline"`) | 두 플랫폼 48(Web `size="large"`, Native `size={48}`), 사이 `spacing.md` 16 |
@@ -171,7 +173,7 @@ seed·문구·아이콘 세트·얼굴 목록은 제품 소유다. `createBlobat
 | --- | --- | --- |
 | 효과 표면 안쪽 틀 | `div` + CSS `padding: var(--hjm-space-xl)`(`layoutStyle`은 padding을 받지 않는다) | `View style={{ padding: spacing.xl }}` |
 | Avatar 크기 | 이름 단계 `large` 48 | 숫자 pt `48` |
-| 바깥 틀 | 제품 화면 레이아웃(문서 스크롤) | `ScrollView` > `Container` |
+| 바깥 틀 | HJM ScreenLayout의 본문 | `ScrollView` > `Container` |
 | 가려짐 알림 | 없음 | EffectSurface `visible`(화면 focus) |
 | Icon 크기 지정 | `size` prop | `descriptor.size` |
 | 표정 접근성 이름 | `name`에 넣음 | `accessibilityLabel` |

package/docs/usage/compositions/web-additions.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [ColorPicker](../../color-picker.md), [Watermark](../../watermark.md), [Affix](../../affix.md), `showcase/web/src/patterns/WebAdditions.stories.tsx`, `packages/react/src/affix.tsx`, `packages/react/src/styles.css`(`.hjm-color-picker`, `.hjm-watermark`, `.hjm-affix`), `src/affix.ts`, `src/color-picker.ts`
 - 스토리북: `배포/구성/비교와 검증/웹 전용 보조 컴포넌트`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 Web에만 있는 보조 컴포넌트 세 개(색 고르기, 문서 워터마크, 스크롤 중 고정되는 실행 영역)를 실제 쓰임 하나씩과 함께 보여 주는 모음이다.
@@ -57,16 +59,16 @@ Native 화면에서 같은 일이 필요하면 이 구성을 옮기지 않는다
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | 제품 페이지 레이아웃(문서 스크롤) | 세 스토리 모두 바깥 폭·여백을 정하지 않는다. 페이지 본문은 [Container](../components/container.md)가 정한다. Affix만 가장 가까운 스크롤 조상(문서 또는 제품의 `overflow: auto` 영역)에 붙는다. Web 전용이라 안전 영역·화면 키보드 처리는 없다 | Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20 |
+| 바깥 틀 | HJM ScreenLayout의 본문 | 세 스토리 모두 바깥 폭·여백을 정하지 않는다. 페이지 본문은 [Container](../components/container.md)가 정한다. Affix만 가장 가까운 스크롤 조상(문서 또는 제품의 `overflow: auto` 영역)에 붙는다. Web 전용이라 안전 영역·화면 키보드 처리는 없다 | Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20 |
 | 색 입력 줄 | `ColorPicker` 색 견본 + HEX | fieldset 첫 줄, 좁으면 줄바꿈(`flex-wrap`) | 입력 최소 높이 `colorPickerRecipe.minTargetSize` 44, 색 견본 폭 3rem, 줄 간격 0.75rem |
 | 불투명도·미리보기·프리셋 | `ColorPicker` 내부 | 색 입력 아래 순서대로 | 각 위 여백 0.75rem, 프리셋 사이 0.5rem, 프리셋 최소 높이 44 |
-| 선택값 | live 문구 | ColorPicker 바로 아래 | 제품 레이아웃 소유 |
+| 선택값 | live 문구 | ColorPicker 바로 아래 | HJM 구성 레이아웃 소유 |
 | 워터마크 | `Watermark` | 감싼 본문 전체를 덮는 오버레이(`inset: 0`) | `tileWidth` 240 · `tileHeight` 160 · `rotate` -22 · `opacity` 0.12(기본값), 색 `--hjm-color-text-sub` |
 | 고정 행동 | `Affix` | 스크롤 조상 상단 + `offset` | `offset` 기본 0, 띄울 때는 spacing 토큰 값(스토리 `spacing.xs` 8). 스크롤 조상보다 높으면 고정하지 않고 흐름에 남는다 |
 | 저장 실패 | `Notice` danger | 저장 버튼 위(Watermark 본문 안, Affix 아래 본문 첫머리) | 버튼과 `spacing.md` 16 |
 
 - ColorPicker 내부 간격은 CSS가 rem 값으로 직접 둔다(`padding: 1rem`, `gap: 0.75rem`·`0.5rem`). 제품에서 덮지 않는다.
-- Affix는 스크롤 조상 안에서만 붙는다. 그 조상의 높이·overflow는 제품 레이아웃이 정한다(스토리의 280px 박스는 데모 값).
+- Affix는 스크롤 조상 안에서만 붙는다. 그 조상의 높이·overflow는 HJM 화면 골격이 정한다(스토리의 280px 박스는 데모 값).
 
 ## 흐름과 상태
 

package/docs/usage/compositions/web-navigation.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [Breadcrumb](../../breadcrumb.md), [Pagination](../../pagination.md), `showcase/web/src/patterns/WebNavigation.stories.tsx`, `packages/react/src/styles.css`(`.hjm-breadcrumb`, `.hjm-pagination`), `src/component-recipes.ts`(`listRowRecipe`)
 - 스토리북: `배포/구성/탐색과 이동/보관함과 페이지 이동`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 Web에서 상위 보관함 → 하위 모음으로 들어가고, 그 모음의 긴 목록을 페이지 단위로 넘겨 보는 탐색에 쓴다.
@@ -52,7 +54,7 @@ Web에서 상위 보관함 → 하위 모음으로 들어가고, 그 모음의
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
-| 바깥 틀 | 제품 페이지 레이아웃(문서 스크롤) > [Container](../components/container.md) | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Stack만 그린다). 목록 화면이므로 페이지 본문은 Container `size="content"`가 정한다. 고정 영역·안전 영역·키보드 처리는 없다 | Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20 |
+| 바깥 틀 | HJM ScreenLayout의 본문 > [Container](../components/container.md) | 이 구성은 바깥 폭·여백을 정하지 않는다(스토리는 Stack만 그린다). 목록 화면이므로 페이지 본문은 Container `size="content"`가 정한다. 고정 영역·안전 영역·키보드 처리는 없다 | Container gutter 폭 600 미만 `compact` 16 · 이상 `regular` 20 |
 | 경로 | `Breadcrumb` | 콘텐츠 맨 위, 스크롤과 함께 | 항목·구분자 사이 `spacing.xxs` 4, 좁으면 줄바꿈 |
 | 콘텐츠 머리 | `Section` 제목·설명 | 경로 아래 | 경로와 `spacing.lg` 20 |
 | 범위 | status 문구 | 머리 아래, 목록 위 | `spacing.md` 16 |

package/docs/usage/screens/common-chat.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-13
+- 검토일: 2026-10-15
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/채팅`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소통/채팅`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 화면 API가 없는 제품 콘텐츠는 `ScreenLayout`의 본문에 HJM 구성을 연결한다.
+
 ## 목적
 
 ChatScreen을 사용해 채팅 흐름을 구성한다. 제품이 데이터·권한·서버 확정·문구를 공급하며, 예제의 메모리 저장을 운영 저장으로 취급하지 않는다.

package/docs/usage/screens/common-comments.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-07
+- 검토일: 2026-10-15
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/댓글`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소통/댓글`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 화면 API가 없는 제품 콘텐츠는 `ScreenLayout`의 본문에 HJM 구성을 연결한다.
+
 ## 목적
 
 CommentThreadScreen을 사용해 댓글 흐름을 구성한다. 제품이 데이터·권한·서버 확정·문구를 공급하며, 예제의 메모리 저장을 운영 저장으로 취급하지 않는다.
@@ -45,8 +47,8 @@ host: 남은 높이·safe area·키보드
 | --- | --- | --- |
 | 기본 | 원댓글 → 한 단계 답글 → 더 보기 → 작성창 | 각 공개 콜백을 제품 상태에 연결 |
 | 로딩 | 최초 조회는 본문 상태, 저장은 해당 행동 pending | 중복 제출 차단; 성공을 먼저 표시하지 않음 |
-| 빈 | 실제 조회 0건 또는 아직 작성하지 않은 상태 안내 | 시작·조건 해제 등 맥락에 맞는 대안 |
-| 오류 | 빈 댓글에서도 작성창 유지; 실패한 전송은 초안 유지 | 실패 원인과 재시도 경로 제공 |
+| 빈 | 조회 성공 0건을 본문 중앙에 표시하고 composer 유지 | 첫 댓글 작성 |
+| 오류 | 최초 조회 실패는 본문 오류 상태, 전송 실패는 기존 목록·초안 유지 | 조회 재시도와 전송 재시도를 구분 |
 
 
 ### 댓글 목록과 입력의 독립 복구
@@ -58,7 +60,7 @@ host: 남은 높이·safe area·키보드
 | 답글 접기·펼치기 | expandedIds와 원문 데이터 분리 | 서버 순서를 보존하고 접어도 답글 초안을 지우지 않는다 |
 | 목록 추가 조회 실패 | 기존 items + threadFooter 재시도 | 이미 읽던 댓글과 스크롤을 유지한다 |
 | 첫 댓글 | empty + composer | 최초 로딩 실패와 실제 0건을 구분한다 |
-| 전송 실패 | ready + notice | 초안·답글 대상을 유지한다. 항목별 좋아요 실패는 해당 항목만 복구한다 |
+| 전송 실패 | 기존 ready 또는 empty + notice | 초안·답글 대상을 유지한다. 항목별 좋아요 실패는 해당 항목만 복구한다 |
 
 ## 사용하는 지침
 

package/docs/usage/screens/common-inbox.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-13
+- 검토일: 2026-10-15
 - 근거: [반복 화면 조합](../../screen-patterns.md); 공통 API와 실제 Web·Native 예제의 슬롯·상태를 대조해 중복 조립 방지. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/화면/공통 화면/알림함`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/화면/소통/알림함`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 화면 API가 없는 제품 콘텐츠는 `ScreenLayout`의 본문에 HJM 구성을 연결한다.
+
 ## 목적
 
 NotificationInboxScreen을 사용해 알림함 흐름을 구성한다. 제품이 데이터·권한·서버 확정·문구를 공급하며, 예제의 메모리 저장을 운영 저장으로 취급하지 않는다.