@hjmds/design-contracts 1.37.1 → 1.38.0

package/docs/usage/components/composition-layout.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.23.0
-- 검토일: 2026-10-15
+- 검토일: 2026-10-20
 - 근거: 양 renderer `src/screens.tsx`, [소유권](../SELECTION.md#소유권). 제품별 제목·배지·상태·하단 영역 재조립을 줄이기 위해 기존 Stack·상태 계약을 합성한다.
-- 스토리북: `배포/화면/설정/알림 설정`
+- 스토리북: `배포/컴포넌트/레이아웃/구성 골격`, `배포/화면/설정/알림 설정`
 
 ## 언제 쓰나
 
@@ -57,6 +57,8 @@ import { CompositionLayout } from "@hjmds/react-native/screens";
 | notice | ReactNode | 없음 | 초안을 유지하는 비차단 안내 |
 | loadingIndicator | ReactNode | 기본 Spinner | loading 상태의 제품 브랜드 그림. HJM이 제목·설명을 접근성 이름으로 전달하고 중앙 배치를 소유하며 ready/error에는 표시하지 않는다(1.24.0) |
 | children | ReactNode | 없음 | 제품 도메인 콘텐츠 또는 HJM 전용 구성 |
+| aside | ReactNode | 없음 | 제목·본문 옆의 비상호작용 보조 그림. 머리글 actions로 장식을 넣어 다음 줄로 밀리던 Diairy 엽서 카드 문제에서 추가(2026-10-20). 최대 폭 40%, 본문은 남은 폭에서 줄바꿈 |
+| footerAside | ReactNode | 없음 | footer 끝의 짧은 보조 정보. 좁으면 다음 줄로 감싸며 본문 상태 교체와 독립 |
 | footer | ReactNode | 없음 | 본문 다음 보조/주 행동; 고정은 바깥 ScreenLayout 소유 |
 | state | ScreenContentState | ready | 본문 교체; loading은 Spinner만 표시. empty 제목은 body(14), 오류·접근 제한 제목은 title |
 | stateAction | ReactNode | 없음 | 본문 상태와 중앙 정렬되는 복구 행동 |
@@ -98,3 +100,5 @@ footer
 
 2026-10-19 사용자 지시: 앱·모바일 웹뷰의 큰 글씨를 지양하므로 구획 제목은 두 renderer 모두 18(level5)을 기본으로 쓴다.
 headingLevel은 문서 구조만 결정한다. 기존 24는 상한이며 일반 카드·선택 영역 제목의 기본값이 아니다.
+
+`aside`는 제목·본문 묶음의 끝 쪽에 놓이고 footer는 카드 전체 폭을 사용한다. 지원 그림 자체의 크기·브랜드는 제품이 결정하며, 위치·본문의 가변 폭·footer 줄바꿈은 이 구성이 소유한다.

package/docs/usage/components/conversion-funnel.md

@@ -67,10 +67,10 @@ import { ConversionFunnel } from "@hjmds/react-native/data-workflows";
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 가로 막대 차트(`orientation="horizontal"`), 높이는 BarChart 기본 `chartRecipe.heights.regular` 180 | 양 renderer, [Chart](chart.md) |
-| 간격 | 제목·차트·단계 버튼 행·상세 문구 사이 `spacing.md` 16, 단계 버튼 사이 `spacing.sm` 12 | `Stack gap="md"`, `Stack axis="inline" gap="sm"` |
-| 순서·정렬 | 제목(strong) → 막대 차트 → 단계 버튼(ghost, 선택 표시) → 상세 문구 | 양 renderer |
+| 간격 | 제목·차트·단계 선택·상세 문구 사이 `spacing.md` 16, 단계 선택은 SegmentedControl의 연결된 컨트롤 계약 | `Stack gap="md"`, `SegmentedControl` |
+| 순서·정렬 | 제목(strong) → 막대 차트 → SegmentedControl 단계 선택 → 상세 문구 | 양 renderer |
 | 고정·스크롤 | 자체 스크롤 없음 | — |
-| 좁은 폭·큰 글자 | 단계 버튼 행은 줄바꿈(`wrap`), 차트는 가로만 줄어든다 | `Stack wrap`, [Chart](chart.md) |
+| 좁은 폭·큰 글자 | 단계 선택은 SegmentedControl의 좁은 폭 배치를 따르고, 차트는 가로만 줄어든다 | [SegmentedControl](segmented-control.md), [Chart](chart.md) |
 
 ## 꼭 지킬 것
 

package/docs/usage/components/design-system-provider.md

@@ -84,7 +84,7 @@ expect(checkBrandPaletteContrast(PRODUCT_BRAND_PALETTE)).toEqual({ light: [], da
 | `direction` | `ltr` · `rtl` | `ltr` | — |
 | `textScale` | 연속값 | `1` | — |
 | `reducedMotion` | `true` · `false` | `false` | — |
-| `minimumVisualTarget` | `true` · `false` | `false` | — |
+| `minimumVisualTarget` | `true` · `false` | `false` | 작은 컨트롤의 표시 높이를 최소 44로 올리는 선택 기능. 2026-10-21 사용자 지시로 포트폴리오 앱·웹은 `false`를 사용한다. 터치 확장 `hitSlop`과 별개다 |
 | `brandPalette` | `{ light?, dark? }` | — | 각각 `ThemeColors` 20개 key 중 필요한 것만 넘긴다(부분 병합). 상태 강조색은 덮을 수 없다. 중첩 Provider는 가장 가까운 상위의 값을 물려받는다 |
 | `designProfile` | `HjmDesignProfile` | 가장 가까운 상위 프로필 또는 없음 | 기본 프로필·표면 질감은 1.15.0 추가. `hjmDesignPresets` 또는 `defineHjmDesignProfile` 결과만 넣는다. 글자 역할·관련 구성 개선은 1.16.0 변경. [프로필 계약](../../design-profile.md)의 토큰·질감·전환·구성·화면 기본값을 상속한다 |
 | `value` | `DesignSystemProviderValue`(`resolveDesignSystemProviderValue` 결과) | — | 테스트·스토리·임베딩용. 환경 prop·`brandPalette`·`designProfile`과 함께 쓸 수 없고(타입이 막는다), 주면 OS theme·모션 관찰과 상위 `brandPalette` 상속이 멈춘다 |

package/docs/usage/components/dialog.md

@@ -148,7 +148,7 @@ await handle.closed; // portal 제거·초점 복구 뒤. 다음 오버레이는
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 폭(렌더 값): Native는 recipe 최대 폭 `small` 320 · `medium` 420 · `large` 640. Web은 `small` 28rem · `medium` 36rem · `large` 48rem이며 뷰포트 폭 − 32를 넘지 않는다. 닫기 버튼 44×44(`control.minTouchTarget`) | `src/component-recipes.ts`(`dialogRecipe`), `packages/react/src/styles.css` `.hjm-dialog*` |
-| 간격 | 화면 가장자리와 최소 `spacing.md` 16. Web: 머리 위·좌우 `spacing.lg` 20, 본문 사방 `spacing.lg` 20, footer 좌우·아래 `spacing.lg` 20, footer 버튼 간격 `spacing.sm` 12. Native: 안쪽 `small` `spacing.lg` 20 · `medium`/`large` `spacing.xl` 24, 영역 사이 `spacing.md` 16, 제목–설명 `spacing.xs` 8, 머리–닫기 `spacing.sm` 12, 버튼 간격 `spacing.sm` 12 | `packages/react/src/styles.css` `.hjm-overlay`, `packages/react-native/src/overlays.tsx`(`Dialog`, `OverlayActions`) |
+| 간격 | 화면 가장자리와 최소 `spacing.md` 16. Web: 머리 위·좌우 `spacing.lg` 20, 본문 사방 `spacing.lg` 20, footer 좌우·아래 `spacing.lg` 20, footer 버튼 간격 `spacing.xs` 8. Native: 안쪽 `small` `spacing.lg` 20 · `medium`/`large` `spacing.xl` 24, 영역 사이 `spacing.md` 16, 제목–설명 `spacing.xs` 8, 머리–닫기 `spacing.sm` 12, 버튼 간격 `spacing.xs` 8 | `packages/react/src/styles.css` `.hjm-overlay`, `packages/react-native/src/overlays.tsx`(`Dialog`, `OverlayActions`) |
 | 순서·정렬 | 화면 가운데에 뜨고 뒤는 scrim이 덮는다. 위에서 머리(제목·설명 \| 닫기) → 본문 → 행동 영역. 닫기 버튼은 머리 끝. 행동 순서는 **보조 → 주**. Web footer는 끝 정렬. Native는 두 버튼을 같은 폭으로 나란히 둔다. 버튼은 둘까지 둔다(Native `primaryAction`·`secondaryAction`). 파괴 행동은 `tone: "danger"`이지만 확인만 받는다면 [AlertDialog](alert-dialog.md)다 | 같은 파일 |
 | 고정·스크롤 | Web은 대화상자 전체 높이가 뷰포트 − 32이고 넘치면 대화상자 안에서 스크롤한다. Native는 safe area 안의 가용 높이를 제한하고 머리 줄(제목·닫기)을 스크롤 밖에 고정한다. 설명과 본문은 함께 내부 ScrollView(`DialogScrollBody`)에서 전체 폭으로 스크롤하고, 행동도 스크롤 밖에 유지한다. 그래서 긴 본문을 스크롤해도 닫기에 닿는다. 목록 탐색처럼 긴 작업은 [Sheet](sheet.md)를 선택한다 | `packages/react-native/src/overlays.tsx` `Dialog`·`DialogScrollBody` |
 | 좁은 폭·큰 글자 | Web footer는 넘치면 줄바꿈한다. Native는 `textScale ≥ 1.6`이거나 창 폭 < 480이면 버튼을 세로로 쌓고, 이때 보조가 위·주 행동이 아래다 | `packages/react-native/src/overlays.tsx` |
@@ -224,7 +224,7 @@ Native 입력 본문의 키보드 회피는 Dialog가 이미 맡는다(위 키
 
 - Native는 `presentationStyle="fullScreen"` Modal에서 상태 표시줄을 숨기고 세로·가로 회전을 허용한다(`dialogRecipe.immersive.orientations`, 앱이 세로 고정이어도 이 표현은 회전한다). 무대는 화면 끝까지 그려지므로 읽어야 할 내용은 가운데 두거나 `useHjmNativeSafeAreaInsets`로 가장자리 절개를 피한다.
 - Web은 viewport 전체를 덮는 고정 층이다. 브라우저 Fullscreen API는 요청하지 않는다. 새 사용자 활성화가 필요하고, 그 Escape는 페이지가 받기 전에 전체 화면만 끝내 오버레이가 창 안에 남으며, iOS Safari는 요소 전체 화면을 지원하지 않는다.
-- 행동 줄 간격: 안쪽 `spacing.md` 16(아래·좌우는 safe area와 큰 값), 상태–행동 `spacing.xs` 8, 행동 사이 `spacing.sm` 12. 나가기 버튼은 `size="large"`로 남은 폭을 채운다.
+- 행동 줄 간격: 안쪽 `spacing.md` 16(아래·좌우는 safe area와 큰 값), 상태–행동 `spacing.xs` 8, 행동 사이 `spacing.xs` 8. 나가기 버튼은 `size="large"`로 남은 폭을 채운다.
 - 화면 꺼짐 방지·움직임 같은 무대 동작은 제품 소유다.
 
 ```tsx

package/docs/usage/components/editor-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-18
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/콘텐츠/작성과 수정`, `배포/화면/계정/프로필`
+- 스토리북: `배포/컴포넌트/레이아웃/편집 화면`, `배포/화면/콘텐츠/작성과 수정`, `배포/화면/계정/프로필`
 
 ## 언제 쓰나
 

package/docs/usage/components/form.md

@@ -117,7 +117,7 @@ useEffect(() => { firstInvalidRef.current = nicknameError ? nicknameInputRef.cur
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | — | — |
-| 간격 | 필드 사이 간격: `comfortable` `spacing.lg`(20), `compact` `spacing.sm`(12). Web은 필드 묶음 아래 폼 오류와 `actions`가 각각 `spacing.sm`(12) 위 여백을 갖고, `actions` 안 버튼 간격은 `spacing.sm`(12)이다. Native는 필드·오류·내장 제출 버튼을 같은 `fieldGap`으로 세로로 쌓는다 | `form.ts` `formRecipe`, `styles.css` `.hjm-form__*`, `react-native/src/forms.tsx` `Form` |
+| 간격 | 필드 사이 간격: `comfortable` `spacing.lg`(20), `compact` `spacing.sm`(12). Web은 필드 묶음 아래 폼 오류와 `actions`가 각각 `spacing.sm`(12) 위 여백을 갖고, `actions` 안 버튼 간격은 `spacing.xs` 8이다. Native는 필드·오류·내장 제출 버튼을 같은 `fieldGap`으로 세로로 쌓는다 | `form.ts` `formRecipe`, `styles.css` `.hjm-form__*`, `react-native/src/forms.tsx` `Form` |
 | 순서·정렬 | 위→아래 순서는 필드들 → 폼 오류 → 제출 행동이다. 폼 오류는 항상 행동 바로 위에 온다(`formRecipe.formError.position` `beforeActions`). Web `actions`는 줄바꿈되는 가로 줄이다. 버튼 둘이면 [Button](button.md)의 순서(보조 → 주 행동)를 따른다. Native 기본 제출 버튼은 마지막에 있으며 actions 슬롯으로 교체하거나 숨길 수 있다 | `form.ts` `formRecipe`, `styles.css` `.hjm-form__actions` |
 | 고정·스크롤 | 폼 흐름 안에 둔다. 긴 화면에서 제출을 하단에 고정하려면 Web은 Form을 스크롤 영역에 두고 `actions` 대신 [BottomCTA](bottom-cta.md)로 뺀다. Native는 `actions={null}`로 내장 버튼을 숨기고 `FormHandle.submit()`으로 같은 제출을 호출한다 | `react-native/src/forms.tsx` `Form` |
 | 좁은 폭·큰 글자 | — | — |

package/docs/usage/components/icon-button.md

@@ -93,6 +93,12 @@ import { NotificationBell } from "@hjmds/react-native/notification-bell";
 | `disabled`(NotificationBell) | `true` · `false` | `false` | — |
 | Web `layoutStyle`(NotificationBell) | `HjmCompositionStyleProp` | — | 루트 배치. 기본 `alignSelf: "flex-start"`보다 우선하지만 `width`는 무시된다(루트는 항상 `max-content`). 떠 있는 배지가 루트의 끝 모서리에 붙어 있어 루트가 넓어지면 아이콘에서 떨어지기 때문이다. margin·`alignSelf`로 배치한다. 1.13.0 변경 |
 
+### 상단 도구 예외
+
+2026-10-21 사용자 승인: 상단 도구 줄은 `size="small" hitSlop={0}`, 버튼 영역 사이 `spacing.xxs` 4를 사용한다. 제품 앱·웹 Provider의 `minimumVisualTarget`은 끈다. 일반 작은 버튼의 기본 확장 4와 본문·하단 행동 간격 8은 유지한다. [TopBar 공통 크기](top-bar.md#상단-도구의-공통-크기)를 따른다.
+
+`hitSlop`은 Web에서 0 이상의 px 수치, Native에서 RN `PressableProps['hitSlop']`다. Web은 포인터 확장용 pseudo-element에 반영하고 DOM 속성으로 전달하지 않는다. 생략하면 기존 크기 recipe의 확장을 유지한다.
+
 ## 배치
 
 | 항목 | 값 | 근거 |

package/docs/usage/components/image-choice-group.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 미게시(1.26.1 이후)
-- 검토일: 2026-10-17
+- 검토일: 2026-10-20
 - 근거: `src/image-choice.ts`의 `imageChoiceRecipe`·`resolveImageChoiceToggle`; Web `src/image-choice.tsx`, Native `src/image-choice.tsx`
-- 스토리북: `배포/화면/계정/프로필`
+- 스토리북: `배포/컴포넌트/입력/이미지 선택`, `배포/화면/계정/프로필`
 
 ## 언제 쓰나
 

package/docs/usage/components/list-detail-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-17
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/콘텐츠/목록과 상세`
+- 스토리북: `배포/컴포넌트/레이아웃/목록 상세 화면`, `배포/화면/콘텐츠/목록과 상세`
 
 ## 언제 쓰나
 

package/docs/usage/components/list.md

@@ -161,6 +161,7 @@ import { CollectionRail } from "@hjmds/react/collection-rail";
 | `items` | `{id,label}[]` | 필수 | 안정·고유·빈 값 아닌 ID/label, empty 허용 |
 | `renderItem` | `(item) => ReactNode` | 필수 | 버튼·입력·카드는 기존 공개 API 사용 |
 | `labels` | previous/next/navigation string | 필수 | 스크롤 행동 이름, empty 금지 |
+| `showNavigation` | boolean | `true` | `false`면 이동 버튼 행과 그 여백을 제거하고 스와이프·스크롤·초점 노출을 유지한다. 2026-10-20 스핀트 요청: 터치 탐색과 중복되는 버튼 제거 |
 | `density` | compact/comfortable | comfortable | 최대 폭240/360, 실제 폭에서 clamp |
 | `defaultStartKey` | item ID | 첫 항목 | 초기 위치만. 선택/상세 값 아님 |
 | `onStartKeyChange` | `(key: string|null) => void` | 생략 | 앞쪽 항목 변화 관찰; 선택 확정 callback 아님 |

package/docs/usage/components/media-selection-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-18
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/콘텐츠/사진 선택과 업로드`
+- 스토리북: `배포/컴포넌트/레이아웃/미디어 선택 화면`, `배포/화면/콘텐츠/사진 선택과 업로드`
 
 ## 언제 쓰나
 
@@ -106,7 +106,7 @@ Web의 `<img alt="">`는 장식용 미리보기다. 사진 이름은 `removeLabe
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 격자 열 compact(창 0~959) 2열 · expanded(창 960 이상) 3열, 열 폭은 ScreenLayout 폭(최대 720)을 나눈다; 미리보기는 열 폭, 항목 버튼은 `Button size="small"` | `Grid columns={{ compact: 2, expanded: 3 }}`, `breakpoint` |
-| 간격 | 화면 padding `spacing.md` 16; 격자 간격 `spacing.md` 16; 항목 안 미리보기–UploadItem–버튼 줄 `spacing.xs` 8; 버튼 사이 `spacing.xxs` 4; footer 요약–완료 `spacing.sm` 12 | Web·Native `MediaSelectionScreen` |
+| 간격 | 화면 padding `spacing.md` 16; 격자 간격 `spacing.md` 16; 항목 안 미리보기–UploadItem–버튼 줄 `spacing.xs` 8; 버튼 사이 `spacing.xs` 8; footer 요약–완료 `spacing.sm` 12 | Web·Native `MediaSelectionScreen` |
 | 순서·정렬 | 헤더(제목 → 추가) → 격자(항목마다 미리보기 → UploadItem → 위로·아래로·삭제) → footer(`selectionSummary` → 완료) | 렌더 순서 |
 | 고정·스크롤 | 헤더·footer 고정, 격자는 본문 스크롤(`scroll` 기본 `"screen"`) | `ScreenLayout` |
 | 좁은 폭 | 좁은 폭에서도 2열 유지; 항목 버튼 줄은 줄바꿈(`flexWrap: "wrap"`)해 버튼을 자르지 않는다 | `screen-flows.tsx` |

package/docs/usage/components/message-composer.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-17
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/구성/입력과 작성/메시지 작성`, `배포/구성/입력과 작성/댓글 작성`, `배포/화면/소통/채팅`
+- 스토리북: `배포/컴포넌트/입력/메시지 작성창`, `배포/구성/입력과 작성/메시지 작성`, `배포/구성/입력과 작성/댓글 작성`, `배포/화면/소통/채팅`
 
 ## 언제 쓰나
 

package/docs/usage/components/moderation-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-18
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/소통/신고와 차단`
+- 스토리북: `배포/컴포넌트/레이아웃/신고 화면`, `배포/화면/소통/신고와 차단`
 
 ## 언제 쓰나
 

package/docs/usage/components/notice.md

@@ -88,10 +88,15 @@ import { Notice } from "@hjmds/react-native/feedback";
 
 ## 배치
 
+2026-10-20 선택의창 지도 위에서 Native 안내 배경의 alpha가 지도 지명·도로를 그대로 비춰 문구와 겹쳤다.
+`panel`은 불투명한 테마 바탕 위에 tone tint를 합성한다(Web의 기존 color-mix와 같은 방식).
+지도·사진 위에서도 아래 콘텐츠가 비치지 않는다. `status`는 기존처럼 배경 없이 유지한다.
+설명을 생략하면 제목만 표시하며 설명 자리와 제목·설명 사이 간격을 남기지 않는다.
+
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 본문 폭을 꽉 채운다. 아이콘 20(`glyph.sm`), 테두리 1(`stroke.default`), radius `radius.md` 12 | `noticeRecipe` |
-| 간격 | 안쪽 `spacing.md` 16, 아이콘·문구·행동 사이 `spacing.sm` 12, 제목·설명 사이 `spacing.xxs` 4. 이웃 블록과는 `layout.contentGap` 16 | `noticeRecipe`, `.hjm-notice*` |
+| 간격 | 안쪽 `spacing.md` 16, 아이콘·문구·행동 사이 `spacing.xs` 8, 제목·설명 사이 `spacing.xxs` 4. 이웃 블록과는 `layout.contentGap` 16 | `noticeRecipe`, `.hjm-notice*` |
 | 순서·정렬 | 아이콘 — 제목·설명 — 행동. 행동은 하나, `Button` `size="small"` `tone="secondary"`(또는 `ghost`), `primary` 금지. Web은 행동이 같은 줄 끝, Native는 행동이 문구 줄 **아래**. Web은 제목·설명 전체 묶음과 행동의 세로 중심을 행 높이의 중앙에 맞춘다. 첫 줄에 버튼 높이 기반 여백을 더하지 않는다. Native 아이콘 칸은 제목 첫 줄 높이(토큰×글자 배율) | `.hjm-notice`·`.hjm-notice__icon`·`.hjm-notice__action`, `react-native/src/feedback.tsx` |
 | 고정·스크롤 | 본문 흐름 안. 먼저 읽어야 하는 경고·입력 오류는 영향을 받는 내용 바로 위(화면 상태는 제목 아래, 폼 검증은 제출 버튼 위). 제출 후 성공·실패 결과는 구성 지침이 지정한 행동 인접 위치에 둔다. 떠 있거나 고정되지 않고 함께 스크롤되며 여러 개 쌓지 않는다 | — |
 | 좁은 폭·큰 글자 | Web은 문구 칸이 60% 아래로 줄면 행동이 다음 줄로 감긴다. 제목·설명은 줄바꿈된다 | `.hjm-notice__content`(`flex: 1 1 60%`) |

package/docs/usage/components/notification-inbox-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-17
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/소통/알림함`
+- 스토리북: `배포/컴포넌트/레이아웃/알림함 화면`, `배포/화면/소통/알림함`
 
 ## 언제 쓰나
 

package/docs/usage/components/notification-item.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/구성/정보 표시/알림 항목`, `배포/화면/소통/알림함`
+- 스토리북: `배포/컴포넌트/데이터 표시/알림 목록 항목`, `배포/구성/정보 표시/알림 항목`, `배포/화면/소통/알림함`
 
 ## 언제 쓰나
 

package/docs/usage/components/onboarding-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.14.0
-- 검토일: 2026-10-07
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/소개/온보딩`
+- 스토리북: `배포/컴포넌트/레이아웃/온보딩 화면`, `배포/화면/소개/온보딩`
 
 2026-10-07 Motion의 단계 카드 검토에서 새 상태 엔진을 추가하기 전에 npm 1.14.0의
 양 renderer `screen-flows.d.ts`·`screen-flows.js`·exports를 확인했다. 기존 `layoutStyle`과

package/docs/usage/components/overview-screen.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.15.0
-- 검토일: 2026-10-17
+- 검토일: 2026-10-20
 - 근거: [디자인 프로필](../../design-profile.md), 양 renderer `src/design-profile.tsx`; 기존 ScreenLayout·Grid·Collapsible의 상태 엔진을 재사용한다.
 - 스토리북: `배포/컴포넌트/레이아웃/목록 화면 골격`
 
@@ -64,7 +64,7 @@ import { OverviewScreen } from "@hjmds/react-native/design-profile";
 | --- | --- | --- |
 | 크기 | editorial은 `layout.readingMaxWidth` 720, dashboard·landscape는 `layout.contentMaxWidth` 1200, host가 높이를 제공한다 | `resolveDesignProfileScreen`, ScreenLayout |
 | 본문 폭 | 도구와 목록이 한 열: 최대 `layout.readingMaxWidth` 720, header 제목·BottomCTA 내용과 같은 가운데 축(`overviewContentLayout`). 카드 끝과 입력 끝이 같은 선에 놓인다 | `@hjmds/design-contracts/design-profile-layout` |
-| 간격·항목 | 도구–목록 `spacing.xl` 24. rows는 테두리 없는 항목을 규칙선(Divider, `border`)으로 나누고 선 위아래 `spacing.md` 16, 안쪽 여백 0. cards/grid는 테두리·raised 카드, 간격 `spacing.lg` 20, 안쪽 `spacing.xl` 24 | `resolveDesignProfileCollection`·`resolveDesignProfileCollectionItem` |
+| 간격 | 도구–목록 `spacing.xl` 24. rows는 테두리 없는 항목을 규칙선(Divider, `border`)으로 나누고 선 위아래 `spacing.md` 16, 안쪽 여백 0. cards/grid는 테두리·raised 카드, 간격 `spacing.lg` 20, 안쪽 `spacing.xl` 24 | `resolveDesignProfileCollection`·`resolveDesignProfileCollectionItem` |
 | 순서·정렬 | 헤더 → notice → 도구 → 목록 → footer. leading은 뒤로, actions는 화면 도구, footer는 주 행동 | ScreenLayout 슬롯 |
 | 고정·스크롤 | 헤더·notice·footer 고정, 본문 스크롤. 가상 목록은 별도 ScreenLayout + `scroll="content"` | ScreenLayout 상태·스크롤 엔진 |
 | 좁은 폭·큰 글자 | rows 1/1/1, cards 1/2/2, grid 1/2/3(compact/medium/expanded). 최소 열 폭 226(720 열에 grid 3열과 간격 2개가 들어가는 값)이며 실제 컨테이너·글자 배율로 열 수를 줄인다 | `resolveDesignProfileCollection`·Grid |

package/docs/usage/components/permission-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/소개/권한 안내`
+- 스토리북: `배포/컴포넌트/레이아웃/권한 화면`, `배포/화면/소개/권한 안내`
 
 ## 언제 쓰나
 

package/docs/usage/components/photo-source-sheet.md

@@ -6,7 +6,7 @@
 - 적용: 1.17.1
 - 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/구성/선택과 필터/사진 촬영과 앨범 선택`
+- 스토리북: `배포/컴포넌트/오버레이/사진 출처 시트`, `배포/구성/선택과 필터/사진 촬영과 앨범 선택`
 
 ## 언제 쓰나
 

package/docs/usage/components/profile-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-18
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/계정/프로필`
+- 스토리북: `배포/컴포넌트/레이아웃/프로필 화면`, `배포/화면/계정/프로필`
 
 ## 언제 쓰나
 

package/docs/usage/components/profile-summary.md

@@ -61,7 +61,7 @@ import { ProfileSummary } from '@hjmds/react-native/screen-flows';
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 원형 아바타 프레임 72. ProfileScreen 수정 행동은 `Button` `secondary` `small` | `profileSummaryRecipe.avatarSize`·`editAction` |
-| 간격 | 수치 칸 사이 `spacing.md` 16, 값·라벨 사이 `spacing.xxs` 4, 행동 사이 `spacing.sm` 12. 영역 간격은 [CompositionLayout](composition-layout.md) | 양 renderer |
+| 간격 | 수치 칸 사이 `spacing.md` 16, 값·라벨 사이 `spacing.xxs` 4, 행동 사이 `spacing.xs` 8. 영역 간격은 [CompositionLayout](composition-layout.md) | 양 renderer |
 | 순서·정렬 | 머리(아바타 → 이름·배지 → nameActions) → 수치 줄 → actions → children, 수치 칸은 균등 폭·가운데 | `CompositionLayout` + `flex: 1` 칸 |
 | 고정·스크롤 | 없음. ProfileScreen 본문 스크롤 안에 놓인다 | — |
 | 좁은 폭·큰 글자 | 수치 칸은 `minWidth: 0`으로 나눠 갖고, 행동 줄은 `wrap` | 양 renderer |

package/docs/usage/components/result.md

@@ -79,7 +79,7 @@ import { Result } from "@hjmds/react-native/feedback";
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 아이콘 원 56×56(Web `3.5rem`), `radius.full`. Web 설명 최대 폭 `40rem` | `.hjm-result__icon`, `.hjm-result__description`, Native `feedback.tsx` |
-| 간격 | 안쪽 여백 위아래 `spacing.xxxl` 40, 좌우 `spacing.xl` 24. 요소 사이 `spacing.sm` 12. 행동 줄은 `spacing.xs` 8을 더 띄우고 버튼 사이 `spacing.sm` 12. 목록·카드 사이에 넣을 때는 앞뒤 `layout.sectionGap` 24 | `resultRecipe.paddingVertical`·`paddingHorizontal`·`gap`·`actionsGap`, `.hjm-result__actions` |
+| 간격 | 안쪽 여백 위아래 `spacing.xxxl` 40, 좌우 `spacing.xl` 24. 요소 사이 `spacing.sm` 12. 행동 줄은 `spacing.xs` 8을 더 띄우고 버튼 사이 `spacing.xs` 8. 목록·카드 사이에 넣을 때는 앞뒤 `layout.sectionGap` 24 | `resultRecipe.paddingVertical`·`paddingHorizontal`·`gap`·`actionsGap`, `.hjm-result__actions` |
 | 순서·정렬 | 가운데 정렬 세로 묶음: 아이콘 → 제목 → 설명 → 행동. 행동은 [Button](button.md#배치) 규칙대로 **secondary(둘째) → primary(첫째)** 순서로 그린다(두 표면 동일. 1.12.1까지는 primary가 먼저였다) | `feedback.tsx`(Web·Native Result) |
 | 고정·스크롤 | 고정되지 않는다. 화면 전체를 채울 때는 Result를 세로 가운데에 두고 하단 고정 CTA를 따로 붙이지 않는다(행동은 `actions`) | — |
 | 좁은 폭·큰 글자 | 행동 줄은 가운데 정렬로 넘치면 다음 줄로 감긴다. 제목·설명은 줄바꿈된다(`overflow-wrap: anywhere`) | `.hjm-result__actions`(flex-wrap), Native `flexWrap: "wrap"` |
@@ -92,7 +92,7 @@ import { Result } from "@hjmds/react-native/feedback";
 │        결제를 마쳤어요         │  titleLarge
 │      영수증을 메일로 보냈어요    │  body, max 40rem(Web)
 │        gap 12 + 8            │
-│   [ 홈으로 ] [ 주문 보기 ]    │  secondary → primary, gap 12
+│   [ 홈으로 ] [ 주문 보기 ]    │  secondary → primary, gap 8
 │          (padding 40)        │
 └──────────────────────────────┘
 ```

package/docs/usage/components/screen-layout.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-17
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/화면 틀과 도구/화면 골격과 상태`
+- 스토리북: `배포/컴포넌트/레이아웃/화면 골격`, `배포/화면/화면 틀과 도구/화면 골격과 상태`
 
 ## 언제 쓰나
 
@@ -89,7 +89,7 @@ import { ScreenLayout } from "@hjmds/react-native/screens";
 | `presentation` | `"dashboard"` · `"editorial"` · `"landscape"` | 가장 가까운 profile.screens.overview / 없으면 기존 골격 | [디자인 프로필](../../design-profile.md)의 제공 범위를 따른다. 명시값이 프로필을 이긴다. 헤더 배치·읽기 폭만 바꾸고 상태·입력·행동 슬롯은 유지한다 |
 | `as` (Web) | `"main"` · `"section"` | `"main"` | 제품 셸에 이미 `<main>`이 있으면 `section` |
 | `initialFocus` | `first-input` · `none` | `first-input` | 페이지 진입 시 입력 하나에 한 번 포커스한다. 기본값 변경은 1.33.0부터 제공. 하단 시트 안에서는 자동 포커스하지 않는다. 아래 [진입 포커스](#진입-포커스) |
-| `pullToDismiss` (Native) | `boolean` | `false` | 미게시. 읽기 route 본문의 손잡이·본문 맨 위에서 새로 시작한 아래 당김을 기존 `exit.onPress`로 연결한다. `exit.kind="close"`, 기본 헤더, `scroll="screen"`이 필요하다. 손잡이는 보조기술에서 숨기고 헤더 닫기 하나를 유지한다. `exit.disabled`면 당김/손잡이/접근성 escape도 비활성이다. Web 읽기 패널은 Sheet의 `swipeDirection="down"`을 사용한다 |
+| `pullToDismiss` (Native) | `boolean` | `false` | 미게시. 읽기 route 본문의 손잡이·본문 맨 위에서 새로 시작한 아래 당김을 기존 `exit.onPress`로 연결한다. `exit.kind="close"`, 기본 헤더, `scroll="screen"`이 필요하다. 손잡이가 `exit.label`을 가진 접근 가능한 닫기 버튼을 겸하며, 중복 X 헤더를 표시하지 않는다(2026-10-20 편지 시트 상단 정리 요청). `exit.disabled`면 당김/손잡이/접근성 escape도 비활성이다. Web 읽기 패널은 Sheet의 `swipeDirection="down"`을 사용한다 |
 | `safeAreaBottom` (Native) | 0 이상의 유한수 | `0`(미게시) | 화면이 닿는 창 아래 가장자리의 safe area(`useSafeAreaInsets().bottom`, 탭바 위·이미 아래를 들인 host 안이면 0). 마지막 영역(footer, 없으면 본문)이 아래 여백을 `max(16, inset)`으로 한 번만 준다. 넘길 때는 host의 아래 SafeAreaView edge를 빼고, 둘을 같이 쓰지 않는다. 음수·무한대는 `RangeError` |
 | `layoutStyle` | `HjmCompositionStyleProp` | 없음 | 화면 루트 배치 전용(예: 분할 화면의 `flex`·`width`). ScreenLayout 위에 만든 화면은 모두 이 prop을 루트까지 넘긴다 |
 | `className` (Web) | `string` | 없음 | 식별·배치 보조. 색·여백을 덮지 않는다 |

package/docs/usage/components/section.md

@@ -79,7 +79,7 @@ import { Section } from "@hjmds/react-native/primitives";
 | --- | --- | --- |
 | 크기 | 자체 배경·테두리·여백이 없다. 폭은 부모를 따른다 | `.hjm-section` |
 | 글자 | 제목 `title` 18/26 500(제목 굵기), 설명 `caption` 11/16(두 플랫폼). 2026-10-06까지 Web은 둘 다 본문 14를 물려받았다(1.13.0 변경) | `sectionRecipe.title`·`description`, `.hjm-section__title`·`__description` |
-| 간격 | 머리와 본문 사이 `spacing.xs` 8, 글자 묶음과 행동 사이 `spacing.sm` 12, 제목과 설명 사이 `spacing.xxs` 4. Section끼리의 간격은 Section이 주지 않는다. 감싸는 [Stack](stack.md)이나 `layoutStyle`로 `layout.sectionGap`(`spacing.xl` 24)을 둔다 | `sectionRecipe.gap`·`headerGap`·`copyGap`, `layout.sectionGap` |
+| 간격 | 머리와 본문 사이 `spacing.xs` 8, 글자 묶음과 행동 사이 `spacing.xs` 8, 제목과 설명 사이 `spacing.xxs` 4. Section끼리의 간격은 Section이 주지 않는다. 감싸는 [Stack](stack.md)이나 `layoutStyle`로 `layout.sectionGap`(`spacing.xl` 24)을 둔다 | `sectionRecipe.gap`·`headerGap`·`copyGap`, `layout.sectionGap` |
 | 순서·정렬 | 머리 행동은 끝(LTR 오른쪽)에 하나, 글자 묶음과 세로 가운데 정렬. 보통 [Link](link.md) 또는 `tone="link"` [Button](button.md) | `.hjm-section__header`, Native `Section` |
 | 고정·스크롤 | 고정되지 않는다. 화면 본문 스크롤 안에 둔다 | — |
 | 좁은 폭·큰 글자 | 폭과 관계없이 한 행을 유지한다. 글자 크기 160% 이상(`largeTextThreshold`)에서만 머리 행이 세로로 쌓이고 행동이 글자 아래로 간다(두 플랫폼 같은 조건). 2026-10-17까지 Web은 폭 600 미만에서도 쌓여, 같은 휴대폰 폭에서 Native는 한 행인데 Web만 행동이 아래 줄로 늘어났다(화면 리뷰 S5#3) | Web `.hjm-root[data-large-text]`, Native `textScale >= 1.6` |

package/docs/usage/components/segmented-control.md

@@ -186,3 +186,7 @@ Spint 스팟 필터가 제품 ScrollView와 고정 추가 행을 재조립하던
 <!-- usage-example: Native ../../../../../showcase/native/src/components/SegmentedControl.stories.tsx -->
 
 2026-10-20 개발 소스·미게시: Spint 카테고리 재검토에서 사용자가 여백은 이전처럼 유지하고 글씨를 줄이도록 요청했다. pills 좌우 여백은 small 12, medium 16으로 복원하고 글씨는 label(12/18)로 통일한다. 높이와 터치 영역은 유지한다.
+
+### 진한 브랜드 선택 — 개발 소스, 미게시 (2026-10-21)
+
+다에리·스핀트의 선택 배경이 너무 옅다는 사용자 피드백에 따라 `selectionTone="brand"`로 선택 면에 `primary`, 글자·아이콘에 `onPrimary`를 쓴다. `pills`·`connected`의 크기와 선택 동작을 유지하며 `text`는 기존 표시를 유지한다.

package/docs/usage/components/selection-action-bar.md

@@ -72,7 +72,7 @@ import { SelectionActionBar } from "@hjmds/react-native/collection-editing";
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | Button 기본 크기 | 양 renderer `SelectionActionBar` |
-| 간격 | 요약·버튼 줄·실패 문구 사이 `Stack gap="sm"`(12), 버튼 사이 `sm` | 같은 구현 |
+| 간격 | 요약·버튼 줄·실패 문구 사이 `Stack gap="sm"`(12), 버튼 사이 `xs`(8) | 같은 구현 |
 | 순서·정렬 | 선택 개수 요약 → [묶음 행동…] [선택 해제](ghost) [복구](ghost) → 실패 문구(가운데) | 렌더 순서 |
 | 고정·스크롤 | 자체 고정 없음. 대상 목록 바로 아래 또는 제품 footer 슬롯에 둔다 | [목록 편집과 복구](../compositions/collection-editing.md) |
 | 좁은 폭·큰 글자 | 버튼 줄은 `wrap`으로 다음 줄로 넘어간다 | `Stack axis="inline" wrap` |

package/docs/usage/components/settings-screen.md

@@ -4,9 +4,9 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.17.1
-- 검토일: 2026-10-17
+- 검토일: 2026-10-20
 - 근거: [반복 화면 조합](../../screen-patterns.md), Web·Native `src/screens.tsx`·`src/screen-flows.tsx`; 기존 개별 지침을 새 규격으로 통합. 예제 스토리는 2026-10-06 사용자 승인으로 스토리북 배포([승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정)). 스토리북 배포는 API 게시가 아니다(`적용` 참고)
-- 스토리북: `배포/화면/설정/앱 설정`
+- 스토리북: `배포/컴포넌트/레이아웃/설정 화면`, `배포/화면/설정/앱 설정`
 
 ## 언제 쓰나
 

package/docs/usage/components/sheet.md

@@ -120,7 +120,7 @@ Native 스크롤 본문은 viewport 높이만큼 content를 채운다(미게시)
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 하단 시트 높이: `auto` 내용 높이(최대 화면 높이 × `maxHeightRatio` 0.9), `medium` 60%, `large` 85%, `full` 위 safe area 안 전체 높이(0.9 상한 없음). Web 하단 시트 최대 폭 640. 위 두 모서리만 `radius.xl` 24. 옆 시트(`start`·`end`): Web 폭 `min(28rem, 100%)`·높이 화면 − 32, Native 폭 88%(최대 420)·화면 높이 | `sheetRecipe.sizes`·`content`·`web`, `.hjm-sheet`, Native `Sheet` |
-| 간격 | 두 플랫폼 같은 값: 좌우 `content.paddingHorizontal`(`spacing.lg` 20), 위·아래 `content.paddingTop/Bottom`(`spacing.sm` 12, 하단 시트는 아래 safe area를 더함), 머리·본문·footer 사이 `body.gap`(`spacing.md` 16), footer 위 `footer.paddingTop`(`spacing.sm` 12), 제목–닫기 `header.gap`(`spacing.sm` 12), footer 버튼 사이 `footer.gap`(`spacing.sm` 12) | `.hjm-sheet__*`, `sheetRecipe.content`·`body`·`footer` |
+| 간격 | 두 플랫폼 같은 값: 좌우 `content.paddingHorizontal`(`spacing.lg` 20), 위·아래 `content.paddingTop/Bottom`(`spacing.sm` 12, 하단 시트는 아래 safe area를 더함), 머리·본문·footer 사이 `body.gap`(`spacing.md` 16), footer 위 `footer.paddingTop`(`spacing.sm` 12), 제목–닫기 `header.gap`(`spacing.sm` 12), footer 버튼 사이 `footer.gap`(`spacing.xs` 8) | `.hjm-sheet__*`, `sheetRecipe.content`·`body`·`footer` |
 | 순서·정렬 | 손잡이(하단) → 머리(설명 + 닫기, 둘 다 없으면 그리지 않음) → 본문 → `footer`. 보이는 제목 줄은 없다(미게시). 머리 최소 높이 44(`control.minTouchTarget`), ×는 설명이 없어도 끝 쪽 같은 자리다. 기본 하단 시트는 머리가 없어 본문이 손잡이 영역 바로 아래 `body.gap` 16에서 시작한다. Web footer는 오른쪽 정렬 가로 줄 [보조][주]. Native footer는 세로 열이라 꽉 찬 폭 버튼을 주 행동 먼저 둔다. 하단 시트는 항상 위 가운데 36×4 손잡이(터치 최소 폭·높이44)를 둔다. `detents`가 있으면 높이 전환 버튼, 없고 ×가 없으면 `closeLabel` 이름의 닫기 버튼이다. `showClose: true`로 ×를 표시하면 손잡이는 장식으로 남겨 같은 닫기 버튼이 중복되지 않는다(미게시). 손잡이·머리 영역을 아래로 끌어 `sheetDragRecipe.dismissDistanceRatio`(시트 높이의 25%) 또는 `dismissVelocity` 0.5px/ms를 넘기면 `swipe`로 닫고, 아니면 제자리로 돌아간다(미게시, Web·Native 동일) | `sheetRecipe.header`·`handle`, `.hjm-sheet__footer`, `.hjm-sheet__handle` |
 | 고정·스크롤 | 본문만 스크롤, 머리·`footer` 고정(Native는 `scrollable`일 때 ScrollView). 스크롤 영역은 시트 좌우 여백(`sheetRecipe.content.paddingHorizontal` 20) 끝까지 넓고 여백은 스크롤 내용 안쪽에 둔다(Web `.hjm-sheet__body` padding, Native ScrollView `marginHorizontal: -20` + 내용 `paddingHorizontal: 20`). 그래서 본문 ListRow의 8 표면이 잘리지 않고 내용 위치는 그대로다. 고정 높이(`medium`·`large`·`full`, 옆 시트)에서는 본문이 머리·footer를 뺀 남은 높이를 차지하고 `footer`는 시트 아래에 붙는다. 그래서 본문의 `flex: 1` 자식(SearchScreen, 목록 화면)이 그 높이를 채운다(Web `.hjm-sheet__body` `flex: 1 1 auto`, Native 본문 `flexGrow: 1`·`minHeight: 0`, 1.13.1 변경). `auto`는 내용 높이 그대로다. 저장·확인은 `footer`에. 아래 안전 영역은 시트가 자기 여백에 더한다(`spacing.sm` 12 + 아래 inset, Web은 `env(safe-area-inset-bottom)`). 위 inset은 시트가 올라갈 높이를 줄인다. 제품이 inset을 다시 더하지 않는다 | `.hjm-sheet__body`, `sheetRecipe.safeArea`, Native `Sheet` |
 | 좁은 폭·큰 글자 | 폭 < 640이면 하단 시트가 화면 폭을 채운다. Web footer는 줄을 바꾼다. 큰 글자로 내용이 길어지면 `auto`는 최대 90%에서 멈추고 본문이 스크롤된다(`full`은 위 safe area까지) | `.hjm-sheet[data-placement="bottom"]`, `maxHeightRatio` |

package/docs/usage/components/shortcut-recorder.md

@@ -59,7 +59,7 @@ import { ShortcutRecorder } from "@hjmds/react/authoring-tools";
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 기록 영역 최소 높이 44, 기록 중 2px 외곽선 | Web `ShortcutRecorder` |
-| 간격 | 영역·버튼 줄·상태 사이 `Stack gap="md"`(16), 버튼 사이 `sm`(12) | 같은 구현 |
+| 간격 | 영역·버튼 줄·상태 사이 `Stack gap="md"`(16), 버튼 사이 `xs`(8) | 같은 구현 |
 | 순서·정렬 | 기록 영역(가운데 정렬: 기록 중 안내/초안/현재 값/빈 문구) → [기록] [등록] [취소] → 상태 문구 → 실패 문구(가운데) | 렌더 순서 |
 | 고정·스크롤 | 자체 고정·스크롤 없음 | 별도 scroller 없음 |
 | 좁은 폭·큰 글자 | 버튼 줄은 inline Stack(줄바꿈 미지정), 문구는 Text로 줄바꿈 | Web 구현 |

package/docs/usage/components/side-panel.md

@@ -79,7 +79,7 @@ Native: 없음. Native는 [Sheet](sheet.md)를 쓴다.
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 높이 화면 전체(`100dvh`), 폭 `size`(`compact` 320 · `regular` 400 · `wide` 560), radius 0으로 가장자리에 붙는다. 머리 최소 높이 44(`control.minTouchTarget`) | `sidePanelRecipe.sizes`·`content.radius`·`header`, `.hjm-side-panel` |
-| 간격 | 머리 위 `spacing.sm` 12 · 좌우 `spacing.lg` 20, 제목–닫기 `spacing.md` 16. 본문 좌우 `spacing.lg` 20 · 상하 `spacing.md` 16, 자식 간격 `spacing.md` 16. footer 위 `spacing.sm` 12 · 좌우 20, 버튼 사이 `spacing.sm` 12 | `.hjm-side-panel__header`·`__body`·`__footer` |
+| 간격 | 머리 위 `spacing.sm` 12 · 좌우 `spacing.lg` 20, 제목–닫기 `spacing.md` 16. 본문 좌우 `spacing.lg` 20 · 상하 `spacing.md` 16, 자식 간격 `spacing.md` 16. footer 위 `spacing.sm` 12 · 좌우 20, 버튼 사이 `spacing.xs` 8 | `.hjm-side-panel__header`·`__body`·`__footer` |
 | 순서·정렬 | `edge` 쪽 가장자리. 머리(제목·설명 + 끝 쪽 닫기) → 본문 → `footer`. footer는 오른쪽 정렬 가로 줄 [보조][주] | `.hjm-side-panel-positioner`, `.hjm-side-panel__footer` |
 | 고정·스크롤 | 본문만 스크롤, 머리·footer 고정. footer 아래 여백 `max(spacing.sm 12, 아래 안전 영역)`. 비모달은 scrim 없이 `position: fixed`로 떠서 뒤 페이지 일부를 덮는다. 가려지면 안 되면 [Layout](layout.md)·[Splitter](splitter.md)로 고정 2단 | `.hjm-side-panel[data-modal="false"]` |
 | 좁은 폭·큰 글자 | 폭이 패널보다 좁으면 화면 폭 전체(`min(size, 100%)`). footer는 줄을 바꾼다. 모바일 폭이 주 대상이면 [Sheet](sheet.md) | `.hjm-side-panel` |

package/docs/usage/components/statistic.md

@@ -116,7 +116,7 @@ Native 프레임의 모서리는 `statisticRecipe.presentations`의 역할을 Pr
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | `presentation="surface"`의 안쪽 여백: `comfortable` `spacing.md` 16 · `compact` `spacing.sm` 12(두 플랫폼). 테두리 `stroke.default` 1, radius `md` 12 | `statisticRecipe.density`·`presentations`, `styles.css` `.hjm-statistic[data-presentation="surface"]` |
-| 글자 | 라벨 `label` 12 medium(`compact` `caption` 11), 값 `heading` 24 semibold(`fontWeight.semibold`, `compact` `title` 18. 2026-10-17 큰 글자 단계 폐지로 `heading.level2` 굵기 참조를 끊음), prefix·suffix `body` 14 medium 본문색, hint `caption`, 추세 `caption` medium(두 플랫폼). 2026-10-06까지 Web은 라벨 본문 14 medium, 값은 밀도와 관계없이 18, prefix·suffix는 흐린색이었다(1.13.0 변경) | `statisticRecipe.density`·`label`·`value`·`affix`·`hint`·`trend`, `.hjm-statistic__*` |
+| 글자 | 라벨 `label` 12 medium(`compact` `caption` 11), 값 `heading` 24 semibold(`fontWeight.semibold`, `compact` `bodyLarge` 16. 2026-10-21 다에리 오늘의 기록 숫자가 크다는 사용자 피드백으로 compact 값을 한 단계 낮춤. 2026-10-17 큰 글자 단계 폐지로 `heading.level2` 굵기 참조를 끊음), prefix·suffix `body` 14 medium 본문색, hint `caption`, 추세 `caption` medium(두 플랫폼). 2026-10-06까지 Web은 라벨 본문 14 medium, 값은 밀도와 관계없이 18, prefix·suffix는 흐린색이었다(1.13.0 변경) | `statisticRecipe.density`·`label`·`value`·`affix`·`hint`·`trend`, `.hjm-statistic__*` |
 | 간격 | 그룹 간격 `statisticRecipe.group.gap` = `spacing.xs` 8. 지표 안 줄 간격(라벨·값·추세) `comfortable` `spacing.xs` 8 · `compact` `spacing.xxs` 4(두 플랫폼) | `styles.css` `.hjm-statistic`·`.hjm-statistic-group`, `statisticRecipe` |
 | 순서·정렬 | 화면 위쪽 요약 영역이나 카드 안에 둔다. 지표 여러 개는 [Grid](grid.md)를 직접 짜지 말고 `StatisticGroup`으로 묶는다 | — |
 | 고정·스크롤 | — | — |

package/docs/usage/components/steps.md

@@ -89,8 +89,8 @@ import { Steps } from "@hjmds/react-native/steps";
 
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
-| 크기 | Web은 연결선이 있는 앞 단계가 남은 폭을 균등하게 나누고 마지막 단계는 내용 폭(전체 폭/단계 수 이내)만 사용한다. 첫·마지막 표지는 양끝에 맞춘다. Native는 `flex: 1`. 원(indicator) 24(`glyph.md`), 연결선 1(`stroke.default`), 현재·오류 단계의 원 테두리 2(`stroke.strong`). 누를 수 있는 단계는 칸 전체가 버튼이고 최소 높이 44(`stepsRecipe.press.minTouchTarget`) | `stepsRecipe`, `styles.css` `.hjm-steps*`, `react-native/src/steps.tsx` |
-| 간격 | 단계 사이·원과 글자 사이 `spacing.xs` 8(`stepsRecipe.gap`) | `stepsRecipe.gap` |
+| 크기 | Web은 연결선이 있는 앞 단계가 남은 폭을 균등하게 나누고 마지막 단계는 내용 폭(전체 폭/단계 수 이내)만 사용한다. 첫·마지막 표지는 양끝에 맞춘다. Native도 마지막 칸은 내용 폭만 사용한다. 원(indicator) 44(`glyph.xxl`), 연결선 1(`stroke.default`), 현재·오류 단계의 원 테두리 2(`stroke.strong`). 누를 수 있는 단계는 칸 전체가 버튼이고 최소 높이 44(`stepsRecipe.press.minTouchTarget`) | `stepsRecipe`, `styles.css` `.hjm-steps*`, `react-native/src/steps.tsx` |
+| 간격 | 좌우 안쪽 여백 `spacing.md` 16(`stepsRecipe.paddingInline`), 원과 글자 사이 `spacing.xs` 8(`stepsRecipe.gap`) | `stepsRecipe.gap` |
 | 순서·정렬 | 흐름 화면의 맨 위(머리 아래, 본문 위)에 가로 한 줄. 화면 아래 행동 버튼과 떨어뜨리고, 같은 수준 화면 사이 이동(탭)으로 쓰지 않는다 | — |
 | 고정·스크롤 | — | — |
 | 좁은 폭·큰 글자 | 라벨·설명은 줄바꿈된다(`overflow-wrap: anywhere`). 좁은 폭에서 라벨이 세 줄 이상이 되면 라벨을 줄이거나 [Progress](progress.md)로 바꾼다. 세로 배치 축은 없다 | `styles.css` `.hjm-steps__label` |
@@ -122,3 +122,5 @@ import { Steps } from "@hjmds/react-native/steps";
 2026-10-19 포트폴리오: 사용자가 단계 클릭 시 해당 설명만 표시하도록 요청했다. `navigationMode: "free"`를 명시한 읽기 흐름에 한해 모든 단계가 버튼이 된다. 기본 linear와 handler 생략 시 표시 전용 동작은 유지한다. Web 현재 버튼은 aria-current, Native는 selected를 제공한다.
 
 2026-10-19 스핀트 실제 화면 피드백: 수평 행 gap으로 끊기던 연결선을 없애고 마지막 표지 앞의 연결 구간을 유지한다. Native도 마지막 열에 균등 여분 폭을 남기지 않아 첫·마지막 표지가 본문 양끝에 맞는다. 내부 문구 간격과 기본 이동 계약은 유지한다.
+
+2026-10-21 스핀트 실제 화면 피드백: 24pt 원에 꽃 표시가 붙어 식별하기 어렵고 양끝이 화면 가장자리에 가까웠다. 공통 recipe의 원을 `glyph.xxl` 44pt로 키우고 좌우 안쪽 여백 `spacing.md` 16pt를 두었다. Web·Native에 동일 적용하며 제품 그림은 테두리 안 여유를 두고 배치한다. 개발 소스 변경이며 미게시다.

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

@@ -70,7 +70,7 @@ import { StreamingAnswer } from "@hjmds/react-native/streaming-answer";
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 버튼은 [Button](button.md) 기본 `medium`(높이 44), 본문 폭은 부모를 채운다 | `streaming-answer.tsx` |
-| 간격 | 제목·본문·표시기·버튼 줄·상태 사이 `spacing.md` 16, 버튼 사이 `spacing.sm` 12 | `Stack gap="md"`, 버튼 줄 `gap="sm"` |
+| 간격 | 제목·본문·표시기·버튼 줄·상태 사이 `spacing.md` 16, 버튼 사이 `spacing.xs` 8 | `Stack gap="md"`, 버튼 줄 `gap="xs"` |
 | 순서·정렬 | 제목 → 답 본문 → (생각 중 표시기, 가로·세로 가운데) → [생성/다시 생성] [중지] → 상태 문구(가운데) | 양 renderer |
 | 고정·스크롤 | 자체 스크롤 없음. 긴 답의 스크롤은 놓는 영역이 소유한다 | — |
 | 좁은 폭·큰 글자 | 버튼 줄 `wrap`. Web 본문은 `pre-wrap`·`overflowWrap: anywhere`로 줄바꿈 | 양 renderer |

package/docs/usage/components/table-column-settings.md

@@ -65,7 +65,7 @@ import { TableColumnSettings } from "@hjmds/react-native/collection-editing";
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 체크박스는 [Checkbox](checkbox.md) 기본 `medium`, 이동 버튼은 `ghost` [Button](button.md) 기본 `medium`(높이 44) | `collection-editing.tsx` |
-| 간격 | 열 사이·체크박스와 버튼 줄 사이·버튼 사이 모두 `spacing.sm` 12 | `Stack gap="sm"` |
+| 간격 | 열 사이·체크박스와 버튼 줄 사이 `spacing.sm` 12, 이동 버튼 사이는 `spacing.xs` 8 | `Stack gap="sm"` |
 | 순서·정렬 | 제목 → 열마다 [체크박스] 다음 줄 [앞으로] [뒤로], `columns` 순서대로 마지막 [뒤로]는 `edge="end"`로 아이콘 칸이 묶음 끝에 온다(전에는 10 안쪽, 2026-10-17 실측 감사, [IconButton `edge`](icon-button.md#배치)) | 양 renderer |
 | 고정·스크롤 | 자체 스크롤 없음. 시트·팝오버 등 놓는 영역이 소유한다 | — |
 | 좁은 폭·큰 글자 | 이동 버튼 줄이 `wrap`으로 줄바꿈 | `Stack axis="inline" wrap` |

package/docs/usage/components/tabs.md

@@ -190,3 +190,7 @@ source 객체는 렌더마다 바꾸지 않도록 `useMemo` 또는 제품 어댑
 ## 근거
 
 - 채운 선택 표시: 2026-10-18 다에리 둥지 화면의 보낸 편지·모음 탭. 앱 하단 탭은 현재 위치를 연한 알약으로 보이는데 화면 안 탭만 밑줄이라 다른 제품처럼 보였다.
+
+### 진한 브랜드 선택 — 개발 소스, 미게시 (2026-10-21)
+
+다에리·스핀트의 선택 배경이 너무 옅다는 사용자 피드백에 따라 `indicator="solid"`로 선택 탭을 `primary`로 채우고 글자·아이콘에 `onPrimary`를 쓴다. 기존 `filled`는 옅은 선택을 유지한다.

package/docs/usage/components/top-bar.md

@@ -87,8 +87,8 @@ NavigationBar의 Native 프레임 모서리는 Provider의 `tokens.radius.xl`을
 
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
-| 크기 | 최소 높이 `control.buttonHeight.large` 52 + 위쪽 안전 영역. Web은 `max(env(safe-area-inset-top), safeAreaTop)`을 위 여백으로, Native는 `safeAreaTop`을 `paddingTop`과 `minHeight`(52 + `safeAreaTop`)에 더한다. 좌우 열 최소 폭 `control.minTouchTarget` 44, Native `TopBarAction` 최소 44×44 | `topBarRecipe.minHeight`·`sideMinWidth`·`action`, `.hjm-top-bar` |
-| 간격 | 좌우 여백 `spacing.md` 16, 슬롯 사이·슬롯 안 행동 사이 `spacing.xs` 8. `NavigationBar`는 바 안쪽 여백 `spacing.sm` 12를 브랜드 시작과 끝 행동에 똑같이 쓰고 브랜드에 별도 inset을 두지 않는다(Web·Native). `TopBarAction` 아이콘–라벨 `spacing.xxs` 4, 좌우 여백 4. 배경 `canvas` | `topBarRecipe.paddingHorizontal`·`gap`·`action` |
+| 크기 | 최소 높이 `control.buttonHeight.large` 52 + 위쪽 안전 영역. Web은 `max(env(safe-area-inset-top), safeAreaTop)`을 위 여백으로, Native는 `safeAreaTop`을 `paddingTop`과 `minHeight`(52 + `safeAreaTop`)에 더한다. 좌우 열 최소 폭 `control.buttonHeight.small` 36, Native `TopBarAction` 최소 36×36 | `topBarRecipe.minHeight`·`sideMinWidth`·`action`, `.hjm-top-bar` |
+| 간격 | 좌우 여백 `spacing.md` 16, 슬롯 사이·슬롯 안 행동 사이 `spacing.xxs` 4. `NavigationBar`는 바 안쪽 여백 `spacing.sm` 12를 브랜드 시작과 끝 행동에 똑같이 쓰고 브랜드에 별도 inset을 두지 않는다(Web·Native). `TopBarAction` 아이콘–라벨 `spacing.xxs` 4, 좌우 여백 4. 배경 `canvas` | `topBarRecipe.paddingHorizontal`·`gap`·`action` |
 | 순서·정렬 | 세 열: `leading`(뒤로·닫기) · 제목 · `actions`(끝 정렬). `centered`(기본 `true`)는 남은 제목 영역 안에서 가운데 정렬. 왼쪽 정렬은 `centered={false}`로 고른다. 행동은 1~2개만 끝 열에, 넘치면 하나만 남기고 [Menu](menu.md)로 묶는다. 주 행동(저장·완료)은 끝 열의 마지막 | `.hjm-top-bar` grid, Native `TopBar` |
 | 고정·스크롤 | 화면 맨 위, 스크롤 영역 **밖**에 둔다. TopBar 자체는 `position: sticky`/고정을 걸지 않으므로 화면 골격이 그 아래에 스크롤 영역을 둬야 고정된다. 바로 아래 본문 첫 블록은 [Top](top.md) | `.hjm-top-bar`(position 없음) |
 | 좁은 폭·큰 글자 | 글자 배율 ≥ `largeTextThreshold` 1.6: Web은 첫 행 leading·행동, 둘째 행 제목(시작 정렬, 위아래 `spacing.xs` 8). Native는 첫 행 leading+제목, 둘째 행 행동(끝 정렬, 줄바꿈 허용) | `.hjm-top-bar[data-large-text]`, `react-native/src/navigation.tsx` `TopBar` |
@@ -98,10 +98,16 @@ NavigationBar의 Native 프레임 모서리는 Provider의 `tokens.radius.xl`을
 ┌──────────── safe area ───────────┐   ┌──────────────────────┐   ┌──────────────────────┐
 │ [<]        화면 이름       [⋯][✓]│   │ [<]           [⋯][✓] │   │ [<] 화면 이름        │
 └──────────────────────────────────┘   │ 화면 이름            │   │          [⋯][✓]      │
-  leading 44+  title(1fr)  actions 44+ └──────────────────────┘   └──────────────────────┘
+  leading 36+  title(1fr)  actions 36+ └──────────────────────┘   └──────────────────────┘
 ───────────── 아래부터 스크롤 영역 ─────────────
 ```
 
+## 상단 도구의 공통 크기
+
+2026-10-21 오늘야구 홈의 축소 시안 승인에 따라, 상단 도구는 Web·Native 모두 `size="small"`(36), `hitSlop={0}`을 명시한다. 아이콘은 36×36, 글자 버튼은 높이 36과 문구 폭을 사용한다. 인접 도구는 `Stack gap="xxs"`(4)로 묶고 `edge` 음수 여백을 주지 않는다. Native `TopBarAction`은 recipe에서 최소 36과 확장 0을 직접 읽는다. 명시적으로 표시하는 라벨 등 콘텐츠가 크면 필요한 만큼 높이가 늘어난다.
+
+제품 앱·웹 Provider는 `minimumVisualTarget={false}`로 설정해 작은 버튼이 44로 다시 커지는 것을 막는다. HJM의 선택 가능한 Provider 기능은 유지한다. 일반 본문·하단 행동 묶음의 8 간격과 작은 버튼 기본 터치 확장은 유지하며, 상단의 탭·필터·입력칸·내비게이션 링크는 각자의 계약을 따른다.
+
 ## 꼭 지킬 것
 
 - `actions`와 `trailing`은 같은 슬롯의 두 이름이다. 둘을 함께 주면 `TypeError`다.
@@ -122,7 +128,7 @@ NavigationBar의 Native 프레임 모서리는 Provider의 `tokens.radius.xl`을
 | 제목 접근성 | `h1`~`h6` | `accessibilityRole="header"`, `titleAccessibilityHint`(`onTitlePress` 필수) |
 | 슬롯 스타일 | `className`·`style`, 배치는 `layoutStyle` | 배치는 `layoutStyle`(`style`·`leadingStyle`·`titleStyle`·`trailingStyle`은 제거된 속성) |
 | 큰 글자 | CSS가 제목을 다음 행으로 | 글자 배율이 `largeTextThreshold` 이상이면 leading+제목 행 아래에 행동 행 |
-| 행동 컴포넌트 | 일반 `IconButton`·`Link` | `TopBarAction`(아이콘 + 마이크로 라벨, 44pt) |
+| 행동 컴포넌트 | 일반 `IconButton`·`Link` | `TopBarAction`(아이콘 + 선택적 마이크로 라벨, 최소 36pt) |
 | `NavigationBar` 배경 | 지원 시 blur + 92% 불투명 | 불투명 surface(blur 없음) |
 
 ### 제품 제어를 중앙에 넣기