@hjmds/design-contracts 1.27.2 → 1.28.1

package/docs/usage/components/tag.md

@@ -55,7 +55,7 @@ import { Tag } from "@hjmds/react-native/data-display";
 | `accessibilityLabel`(Native) | `string` | 라벨 | — |
 | `style`·`labelStyle`(Native) | 지원하지 않음 | — | 제거된 속성 — `layoutStyle` 또는 `tone`. 현재 공개 props에서 제거되었다 |
 
-모양은 radius `sm` 사각형, 최소 높이 20(큰 글자에서 늘어남), caption 크기 semibold 글자다.
+모양은 radius `sm` 사각형, 최소 높이 20(큰 글자에서 늘어남), caption 크기 medium(500) 글자다.
 
 ## 배치
 
@@ -84,3 +84,7 @@ Native의 모서리는 Provider의 `tokens.radius.sm`이다. metadata 의미와
 | 추가 style prop | `className`·`style`(HTML 속성) | `style`·`labelStyle`(제거된 속성) |
 | ref | `forwardRef`(`span`) | 없음 |
 | import 경로 | `/display` | `/data-display` |
+
+## 근거
+
+2026-10-17 사용자 결정("굵기 좀더 줄여"): 모든 글자 굵기를 한 단계 낮췄다. 큰 숫자·선택 상태 600(큰 제목 단계는 같은 날 폐지), 제목·강조 500, label 500, 본문 400이며 정본은 [타이포그래피](../tokens/typography.md)다.

package/docs/usage/components/text-area.md

@@ -62,6 +62,7 @@ import { TextArea } from "@hjmds/react-native/inputs";
 
 | prop | 값 | 기본값 | 설명 |
 | --- | --- | --- | --- |
+| `initialFocusTarget` | `boolean` | — | 1.28.1. 둘러싼 화면·시트가 진입 포커스를 켰을 때 `true`면 이 칸을 고르고, `false`면 절대 고르지 않는다. 생략하면 트리 순서대로 후보다. 비활성·읽기 전용 칸은 고르지 않는다. 앱별 `autoFocus`·지연 `ref.focus()` 대신 쓴다([진입 포커스](screen-layout.md#진입-포커스)). TextField·TextArea·SearchField·PasswordField 공통 |
 | `variant` | `surface` · `inset` | `surface` | — |
 | `shape` | `medium` · `large` · `full` | `medium` | — |
 | `align` | `start` · `center` | `start` | — |

package/docs/usage/components/text.md

@@ -18,7 +18,7 @@
 | 상황 | 대신 쓸 것 |
 | --- | --- |
 | 짧은 상태·결과 문구를 변경 알림으로 전달 | [StatusText](#statustext) |
-| 문서 제목 단계(`h1`~)가 필요하거나 24px보다 큰 제목 | [Heading](heading.md) |
+| 문서 제목 단계(`h1`~)가 필요한 제목(크기는 Text와 같은 단계, 최대 24px) | [Heading](heading.md) |
 | 화면 첫 자리의 제목 블록(보조 문장·행동 포함) | [Top](top.md) |
 | 본문 묶음의 헤더 행 | [Section](section.md) |
 | 숫자 지표와 그 라벨 | [Statistic](statistic.md) |
@@ -61,7 +61,7 @@ import { Text } from "@hjmds/react-native/primitives";
 | --- | --- | --- | --- |
 | `variant` | `caption`(11) · `label`(12) · `body`(14) · `bodyLarge`(16) · `title`(18) · `titleLarge`(20) · `heading`(24) | `body` | 화면·섹션 제목은 모양이 아니라 [Heading](heading.md)으로 쓴다 |
 | `fontRole` | `ui` · `display` · `reading` · `code` | 제목 variant는 display, 본문은 reading, caption/label은 ui | 명시값이 기본을 덮는다. [역할 지침](../tokens/font-roles.md), 1.16.0 변경 |
-| `emphasis` | `regular` · `medium`(semibold) · `strong`(bold) | 프로필이 있으면 variant 굵기, 없으면 `regular`. `label`은 프로필과 무관하게 variant 굵기 500 | 명시값이 프로필과 variant보다 우선 |
+| `emphasis` | `regular` 400 · `medium` 500 · `strong` 500(제목 굵기) | 프로필이 있으면 variant 굵기, 없으면 `regular`. `label`은 프로필과 무관하게 variant 굵기 500 | 명시값이 프로필과 variant보다 우선 |
 | `tone` | `primary` · `body` · `muted` · `subtle` · `weak` · `brand` · `danger` · `inverse` | `primary` | — |
 | `as` | `span` · `p` · `div` · `strong` · `small` | `span` | Web만. 문단은 `as="p"` |
 | `align` | `TextStyle["textAlign"]` | 쓰기 방향의 시작 쪽 | Native만 |
@@ -103,13 +103,13 @@ Native는 Text의 역할을 해당 stack에, 입력/조작 host는 제품 프로
 ## 함정
 
 - `emphasis`를 명시하면 `variant`의 굵기를 덮는다. `designProfile`이 있으면 생략한 `emphasis`는 해당 프로필의 `tokens.typography[variant].fontWeight`를 따른다. 프로필이 없으면 기존 기본값 `regular`를 유지하므로 `variant="title"`도 보통 굵기로 그려진다. 그 경우 굵은 제목은 `emphasis="strong"`으로 지정한다(두 renderer 동일).
-- `variant="label"`은 예외로, 프로필이 없어도 생략한 `emphasis`가 `typography.label` 굵기 500(medium)으로 그려진다. 500은 `emphasis` 단계에 없으므로(`medium`은 600) label을 400으로 그리려면 `emphasis="regular"`를 명시한다.
+- `variant="label"`은 예외로, 프로필이 없어도 생략한 `emphasis`가 `typography.label` 굵기 500(medium)으로 그려진다. label을 400으로 그리려면 `emphasis="regular"`를 명시한다.
   Web은 이 기본 굵기를 inline `font-weight`로 주며 `data-emphasis`는 `regular`로 남는다. Native는 `fonts="pretendard"`일 때 `Pretendard-Medium` face로 그린다.
 
 
 ## 근거
 
-2026-10-17 사용자 결정: 폼 라벨·섹션 부제목이 본문 대비 약해 `label` 기본 굵기를 500으로 정했다(본문 400과 제목 600 사이). 이전에는 토큰이 600이었지만 프로필 없는 Text는 400으로 그렸다. 두 renderer는 `resolveTextDefaultWeight`(`src/component-recipes.ts`) 하나로 기본 굵기를 고른다.
+2026-10-17 사용자 결정: 폼 라벨·섹션 부제목이 본문 대비 약해 `label` 기본 굵기를 500으로 정했다(당시 본문 400과 제목 600 사이, 제목이 500으로 내려간 뒤에도 500 유지). 이전에는 토큰이 600이었지만 프로필 없는 Text는 400으로 그렸다. 두 renderer는 `resolveTextDefaultWeight`(`src/component-recipes.ts`) 하나로 기본 굵기를 고른다.
 
 ## StatusText
 
@@ -189,3 +189,5 @@ Native Android는 `accessibilityLiveRegion`만 사용한다. iOS는 앱이 activ
 동일 결과를 매 렌더 다시 알리기 위해 key를 바꾸지 않는다. Toast·Notice에서 이미 알리는 결과를 중복 알리지 않는다.
 Showcase의 `PatternStatus`는 이 공개 컴포넌트를 가리키는 내부 별칭일 뿐이며 제품에서 Showcase 파일을 import하지 않는다.
 DOM 속성·Native host 호출 검사는 실제 VoiceOver·TalkBack의 낭독 확인과 구분한다.
+- 2026-10-17 사용자 결정("왜 폰트가 진해"): 제목을 600으로 내린 뒤에도 `strong`이 700이라 읽지 않은 알림 제목·라벨 25곳이 제목보다 굵었다. 강조 단계를 400·500·600으로 낮췄다.
+- 같은 날 두 번째 결정("굵기 좀더 줄여"): 제목을 500, 큰 제목(level1·2)을 600으로 한 단계씩 더 낮췄다. `strong`은 제목 굵기를 따라 500이 되어 `medium`과 같다(`typography.title.fontWeight` 참조). 600은 큰 숫자·선택 상태에만 쓴다(큰 제목 600 단계는 같은 날 큰 글자 단계와 함께 폐지).

package/docs/usage/components/top.md

@@ -90,6 +90,6 @@ import { Top } from "@hjmds/react-native/top";
 
 ### 프로필 모서리·제목 소비
 
-2026-10-07 소비 감사에서 두 renderer의 제목 크기·행간·굵기가 foundation으로 확정된 recipe를 직접 읽어 프로필을 우회했다. `large`는 가까운 프로필의 `heading.level2`, `medium`은 `typography.titleLarge`를 읽고 프로필이 없으면 기존 recipe를 유지한다. 시각 역할은 `headingLevel`과 독립이며 display 서체·제목 의미·보조 행동·초점은 바꾸지 않는다.
+2026-10-07 소비 감사에서 두 renderer의 제목 크기·행간·굵기가 foundation으로 확정된 recipe를 직접 읽어 프로필을 우회했다. `large`는 가까운 프로필의 `heading.level3`(24, 2026-10-17 큰 글자 단계 폐지 전에는 `level2` 32), `medium`은 `typography.titleLarge`를 읽고 프로필이 없으면 기존 recipe를 유지한다. 시각 역할은 `headingLevel`과 독립이며 display 서체·제목 의미·보조 행동·초점은 바꾸지 않는다.
 
 프로필 연결은 1.16.0 변경이며, 기본 배포 계약과 실제 Native 기기 검증은 구분한다.

package/docs/usage/compositions/adaptive-content.md

@@ -33,7 +33,7 @@
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
 | 바깥 틀 | Stack. Web은 제품 화면의 `Container size="reading"` 안 | 화면의 본문 흐름 | gap md=16px, 폭은 Container를 따른다(Web 최대 `layout.readingMaxWidth` 720) |
-| 패널 제목 | `Heading level="level5"` | 패널 Surface 맨 위 | `title` 글자 크기·semibold |
+| 패널 제목 | `Heading level="level5"` | 패널 Surface 맨 위 | `title` 글자 크기·medium(500) |
 | 내용 | 해당 공개 API | 입력과 행동 사이 | 자체 recipe 크기, 줄바꿈 허용 |
 | 행동 | Button/기존 컨트롤 | 관련 항목 바로 뒤 | inline일 때 wrap, md=16px |
 
@@ -82,3 +82,7 @@ Storybook의 기존 gutter 때문에 contentInset=none을 쓰고, 마지막 입
 스크롤 경계에 걸리지 않도록 본문 끝에 spacing.md(16) 여백을 둔다.
 본문 조합 자체에 두 번째 scroll view를 만들지 말고 제품의 기존 화면 host를 재사용한다.
 KeyboardAvoiding은 아래 여백을 제공하며 포커스된 필드를 자동 탐색하는 API는 아니다.
+
+## 근거
+
+2026-10-17 사용자 결정("굵기 좀더 줄여"): 모든 글자 굵기를 한 단계 낮췄다. 큰 숫자·선택 상태 600(큰 제목 단계는 같은 날 폐지), 제목·강조 500, label 500, 본문 400이며 정본은 [타이포그래피](../tokens/typography.md)다.

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

@@ -64,7 +64,7 @@
 | 소요 시간 | DurationField | 설명 아래 | NumberField 세 칸, 칸 사이 `spacing.md` 16. 세 칸이 모두 들어가면 한 줄(칸 최대 `fieldGroupRecipe.inline.maxWidth`), 아니면 세 칸 모두 세로([FieldGroup](field-group.md)) |
 | 확인 | InlineConfirm | 트리거 자리 그대로 | 트리거와 확인 행동이 같은 자리, Button 높이 44, 질문·버튼 줄 사이와 두 버튼 사이 `spacing.sm` 12 |
 | 반응 | ReactionPicker | 제목 아래 | `ghost` `pill` Button 묶음, 사이 `spacing.xs` 8, 넘치면 줄바꿈 |
-| 알림 종 | NotificationBell | 블록 맨 위, 시작 쪽 정렬 | IconButton(기본 `medium` 44) + CounterBadge `floating`(끝·위 모서리) |
+| 알림 종 | NotificationBell | 블록 맨 위, 시작 쪽 정렬. TopBar·헤더 끝에 둘 때는 `edge="end"` | IconButton(기본 `medium` 44) + CounterBadge `floating`(끝·위 모서리). `edge`(`start`·`end`·`both`)는 IconButton `edge`와 같은 값(`resolveIconButtonEdgeOverhang`, 44−24)/2 = 10을 벨 루트에 적용해 glyph 칸이 여백 선(TopBar 16)에 오고 배지는 아이콘 모서리를 지킨다 |
 
 ## 흐름과 상태
 
@@ -197,4 +197,5 @@ function CompoundBlocks() {
 
 ## 근거
 
+- NotificationBell `edge`: 2026-10-17 1.27.2 채택 점검. Spint 홈·탐색 TopBar 끝의 벨은 IconButton을 감싸지만 `edge`가 없어 glyph 칸이 바 끝에서 26에 놓였다(Web 402·1280, LTR·RTL 측정 26 → 16, Native 3x 프레임: 버튼 끝 386 기준 15.7). 넘침은 안쪽 버튼이 아니라 벨 루트에 준다. 버튼에 주면 루트가 10 줄어 끝에 붙은 배지가 아이콘에서 10 안쪽으로 밀린다(측정: 배지 끝 − 버튼 끝 0 유지).
 - 2026-10-17 구성 리뷰: 소요 시간 칸이 데스크톱에서 늘어나고 좁은 폭에서 한 칸만 다음 줄로 끊겨 FieldGroup recipe의 inline 규칙을 바꿨다.

package/docs/usage/compositions/design-profile-comparison.md

@@ -63,7 +63,7 @@
 | 테마 | 밝은 모드에서 보이는 차이 |
 | --- | --- |
 | 미니멀 | 흰 바탕·무채색 hairline, 그림자 없음, 굵기 500 제목과 넉넉한 행간, 넓은 안쪽 여백의 테두리 카드(cards) |
-| 에디토리얼 | 시스템 serif 제목·본문, 가장 큰 제목 단계(56/42/30px), 따뜻한 잉크색과 와인 강조, 각진 모서리, 규칙선으로 나눈 rows |
+| 에디토리얼 | 시스템 serif 제목·본문(제목 크기는 공통 단계, 2026-10-17 56/42/30px 확대 제목 폐지), 따뜻한 잉크색과 와인 강조, 각진 모서리, 규칙선으로 나눈 rows |
 | 터미널 | 모든 글자 monospace, 모서리 0, 그림자 없음, 녹회색 바탕·짙은 녹색 행동·호박색 강조, 규칙선 rows. 어두운 모드는 검정 콘솔 |
 
 ## 흐름과 상태

package/docs/usage/compositions/family-drawer.md

@@ -20,9 +20,9 @@
 | 컴포넌트 | 역할 | 지침 |
 | --- | --- | --- |
 | `Container` · `ScrollView` | 시작 화면의 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
-| `Heading level="level3"`, `Text` | 시작 화면의 제목·설명. 화면 제목은 semibold `level3`이며 bold 표시 역할 `level1`·`level2`는 쓰지 않는다 | [Heading](../components/heading.md), [Text](../components/text.md) |
+| `Heading level="level3"`, `Text` | 시작 화면의 제목·설명. 화면 제목은 medium(500) `level3`(24, HJM 글자 상한)이다 | [Heading](../components/heading.md), [Text](../components/text.md) |
 | `Button` primary | 시트를 여는 트리거(시작 화면의 주 행동) | [Button](../components/button.md) |
-| `Sheet` | 하단 시트. 제목·닫기·`footer`, 안전 영역·스크롤·`busy` | [Sheet](../components/sheet.md) |
+| `Sheet` | 하단 시트. 접근성 이름(`title`, 보이지 않음)·닫기·`footer`, 안전 영역·스크롤·`busy` | [Sheet](../components/sheet.md) |
 | `Steps` | 현재 단계와 전체 단계 수, 실패하면 현재 단계 `error` | [Steps](../components/steps.md) |
 | `ContentTransition preset="slide"` | 단계 본문 교체 | [ContentTransition](../components/content-transition.md) |
 | `Heading level="level3"`, `Text` | 단계 본문 | [Heading](../components/heading.md), [Text](../components/text.md) |
@@ -57,7 +57,7 @@
 | 바깥 틀 | 시작 화면: Web 문서 스크롤 > `Container size="reading"`, Native `ScrollView` > `Container size="reading"`. 시트: `Sheet`가 Modal로 화면 위에 뜨며 스크롤·안전 영역·키보드를 소유 | 시작 화면은 제품 화면 본문. 상단 안전 영역은 헤더(또는 [TopBar](../components/top-bar.md))가 맡는다 | 좌우 `Container gutter`: 폭 600 미만 `compact` 16, 이상 `regular` 20([화면 여백](../tokens/layout.md)). Native 위아래 `contentContainerStyle` `paddingVertical: spacing.lg` 20. 시트 안 inset은 제품이 다시 더하지 않는다 |
 | 시작 화면 | `Stack gap="xl"` | 본문 흐름 안 | 자식 사이 `spacing.xl` 24 |
 | 시트 표면 | `Sheet placement="bottom" size="auto"`(기본값) | 화면 아래에서 올라옴, 내용 높이 | radius `xl` 24, 최대 높이 90%. 좌우 `spacing.lg` 20·위아래 `spacing.sm` 12(두 플랫폼, `sheetRecipe.content`), Web 최대 폭 640 |
-| 시트 머리 | Sheet `title`·`closeLabel` | 시트 맨 위 고정 | 최소 높이 `control.minTouchTarget` 44 |
+| 시트 머리 | Sheet 손잡이, `title`은 보이지 않는 접근성 이름 | 시트 맨 위 고정 | 보이는 제목 줄 없음(2026-10-17 사용자 결정: 시트는 보이는 제목 없이 `title`을 접근성 이름으로만 쓴다) |
 | 단계 표시 | `Steps` | 본문 맨 위 | 항상 가로 한 줄, 아래 `spacing.xl` 24 |
 | 단계 본문 | `ContentTransition` > `Stack gap="md"` | Steps 아래, 본문 스크롤 | 제목·설명 사이 `spacing.md` 16, `slide` 가로 16 이동 |
 | 행동 | Sheet `footer` + Button ×2 | 시트 아래 고정(스크롤 밖) | Web 오른쪽 정렬 가로 [이전 ghost][계속 primary], 사이 `spacing.sm` 12. Native 세로 열 꽉 찬 폭 [계속]→[이전], 사이 `spacing.sm` 12, 위 `spacing.sm` 12. 높이 44 |
@@ -209,4 +209,6 @@ import { Steps } from "@hjmds/react-native/steps";
 
 ## 근거
 
+2026-10-17 사용자 결정("굵기 좀더 줄여"): 모든 글자 굵기를 한 단계 낮췄다. 큰 숫자·선택 상태 600(큰 제목 단계는 같은 날 폐지), 제목·강조 500, label 500, 본문 400이며 정본은 [타이포그래피](../tokens/typography.md)다.
+
 - 2026-10-17 구성 리뷰: 시작 화면 제목이 heavy 800 `level2`로 화면 제목 규칙(semibold)보다 무거웠고, 데스크톱에서 버튼과 문구가 1280 폭 전체로 늘어났다. 그래서 제목을 `level3`으로 낮추고 스토리에 읽기 폭 Container를 적용했다.

package/docs/usage/compositions/input-sheet.md

@@ -51,7 +51,7 @@ Native(하단 시트, 키보드 올라옴)              Web(하단 시트)
 | --- | --- | --- | --- |
 | 바깥 틀 | 시트 안: `Sheet`(Modal)가 backdrop·본문 스크롤(Native `scrollable`)·키보드(Native `keyboardAvoidance`)·안전 영역을 소유. 트리거: 제품 화면의 바깥 틀(Web 문서 스크롤 > `Container`, Native `ScrollView` > `Container`) | 시트는 화면 위 오버레이, 트리거는 화면 본문 | 시트 안 여백은 아래 행들(Sheet 소유, 제품이 inset·키보드 여백을 다시 더하지 않는다). 트리거 화면 좌우는 `Container gutter` 폭 600 미만 `compact` 16 · 이상 `regular` 20([화면 여백](../tokens/layout.md)) |
 | 시트 틀 | `Sheet` placement `bottom` | 화면 하단에 붙고 위 모서리만 둥글다 | radius `xl` 24, 최대 높이 `maxHeightRatio` 0.9(뷰포트의 90%), Web 최대 폭 640 |
-| 머리 | 제목 + 닫기 IconButton | 시트 맨 위, 고정 | Native 최소 높이 `control.minTouchTarget` 44·좌우 `spacing.lg` 20(+좌우 inset)·위 `spacing.sm` 12. Web padding `spacing.lg` 20(아래 0), 제목–닫기 `spacing.md` 16 |
+| 머리 | 손잡이(+ `showClose`일 때 끝 × IconButton). 보이는 제목 없음, `title`은 접근성 이름(2026-10-17 사용자 결정: 시트는 보이는 제목 없이 `title`을 접근성 이름으로만 쓴다) | 시트 맨 위, 고정 | × 머리 최소 높이 `control.minTouchTarget` 44·좌우 `spacing.lg` 20(+좌우 inset)·위 `spacing.sm` 12(두 플랫폼 같음) |
 | 실패 알림 | `Notice tone="danger"` | 본문 맨 위(입력 위), 실패했을 때만, 스크롤 | 본문 항목 사이 `spacing.md` 16 |
 | 본문 | `TextField` + 설명 | 머리 아래, **스크롤** | 항목 사이 `sheetRecipe.body.gap` `spacing.md` 16. Web body padding `spacing.lg` 20 |
 | 완료 | footer `Button`(primary) | 본문 아래, **고정**(스크롤 밖) | 높이 `medium` 44. Native 위 `spacing.sm` 12, footer 세로 열이라 꽉 찬 폭(`fullWidth` 불필요). Web 오른쪽 정렬, 버튼 사이 `spacing.sm` 12, padding 0 `spacing.lg` 20 `spacing.lg` 20 |

package/docs/usage/compositions/interaction-flow-apply.md

@@ -64,8 +64,8 @@
 | 제목 | `Heading level="level3"` | 묶음 맨 위 | 24/32(`heading.level3`), 묶음 안 간격 `layout.contentGap` 16(`Stack gap="md"`) |
 | 현재 값 | `Text` | 제목 아래, 트리거 위 | `spacing.md` 16 |
 | 트리거 | `Button`(primary) | 현재 값 아래 | `medium` 44(`control.buttonHeight`) |
-| 시트 머리 | `Sheet` header | 시트 위 고정 | Native 최소 높이 `control.minTouchTarget` 44, 제목–닫기 `spacing.sm` 12; Web 여백 `spacing.lg` 20, 제목–닫기 `spacing.md` 16 |
-| 선택지 | `RadioGroup`(`presentation="card"`, `accessibilityLabel` = 시트 제목) | 시트 body, 스크롤 | 행 최소 높이 56(`layout.rowHeight.singleLine`), 항목 사이 `spacing.xs` 8(`selectionGroupRecipe`). 안내 문구와는 `Stack gap="md"` 16. 설치한 버전의 Sheet body gap과 중첩 여부를 확인하며 checkout 상태를 npm 게시 증거로 삼지 않는다 |
+| 시트 머리 | `Sheet` 손잡이(+ `showClose`일 때 끝 ×) | 시트 위 고정 | 보이는 제목 없음, `title`은 접근성 이름(2026-10-17 사용자 결정: 시트는 보이는 제목 없이 `title`을 접근성 이름으로만 쓴다). × 머리 최소 높이 `control.minTouchTarget` 44 |
+| 선택지 | `RadioGroup`(`presentation="card"`, `accessibilityLabel` = 시트 `title`) | 시트 body, 스크롤 | 행 최소 높이 56(`layout.rowHeight.singleLine`), 항목 사이 `spacing.xs` 8(`selectionGroupRecipe`). 안내 문구와는 `Stack gap="md"` 16. 설치한 버전의 Sheet body gap과 중첩 여부를 확인하며 checkout 상태를 npm 게시 증거로 삼지 않는다 |
 | 행동 | `Button` 적용·취소 | 시트 footer, 스크롤 밖 고정 | 간격 `spacing.sm` 12(`sheetRecipe.footer.gap`), Native 위 여백 `spacing.sm` 12 |
 | 시트 틀 | `Sheet` | 하단, 모달 | Web 최대 폭 640(`sheetRecipe.web.maxWidth`)·최대 높이 90%, Native 가로 여백 `spacing.lg` 20·최대 높이 90%(`maxHeightRatio` 0.9), 하단 안전 영역 추가 |
 
@@ -199,7 +199,7 @@ Web `gutter`는 [화면 여백과 너비](../tokens/layout.md)처럼 폭 구간
 | 항목 | Web | Native |
 | --- | --- | --- |
 | 트리거 ref | `Button ref` | `View ref collapsable={false}`로 감쌈 |
-| 시트 머리 | 여백 `spacing.lg` 20, 제목–닫기 `spacing.md` 16 | 최소 높이 44, 제목–닫기 `spacing.sm` 12 |
+| 시트 머리 | 보이는 제목 없음(시각 숨김 `h2`) | 보이는 제목 없음(접근성 머리글) |
 | footer | 가로 flex(wrap, 끝 정렬), [취소][적용] | 세로 View, 위 여백 `spacing.sm` 12, [적용] 위 [취소] 아래 |
 | 초점 | focus trap + `returnFocusRef` | `returnFocusRef` |
 | 상태 알림 | `role="status"` | live region(Android) + iOS 알림 호출 |

package/docs/usage/compositions/photo-source.md

@@ -25,13 +25,13 @@
 
 ```text
 부모 화면의 공개 슬롯
-└─ 제목 → 앨범 → 촬영
+└─ 손잡이 → 앨범 → 촬영 (제목은 접근성 이름만)
 ```
 
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
 | 바깥 틀 | PhotoSourceSheet 또는 포함 Surface | 부모 화면의 해당 슬롯 | [배치](../components/photo-source-sheet.md#배치)에 따른다 |
-| 내용 | PhotoSourceSheet 내부 슬롯 | 제목 → 앨범 → 촬영 | spacing 토큰과 포함 컴포넌트 recipe |
+| 내용 | PhotoSourceSheet 내부 슬롯 | 앨범 → 촬영(보이는 제목 없음(2026-10-17 사용자 결정: 시트는 보이는 제목 없이 `title`을 접근성 이름으로만 쓴다)) | spacing 토큰과 포함 컴포넌트 recipe |
 | 행동 | Button 또는 공개 콜백 | 내용과 가까운 명시 진입점 | 주 행동 하나, 보조 행동과 구분 |
 
 ## 흐름과 상태
@@ -42,7 +42,7 @@
 
 | 상태 | 모습 | 포커스·알림 |
 | --- | --- | --- |
-| 기본 | 제목 → 앨범 → 촬영 | 이름·선택 여부를 보조공학에 노출 |
+| 기본 | 앨범 → 촬영(시트 이름 = `labels.title`) | 이름·선택 여부를 보조공학에 노출 |
 | 진행 중 | 해당 작업 pending, 입력·기존 결과 보존 | 중복 요청 차단, 로딩에 포커스를 옮기지 않음 |
 | 실패 | 권한 거부·취소는 기존 선택 유지 | 오류 근처 재시도, 필요할 때만 오류 읽기 |
 

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

@@ -33,7 +33,7 @@
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
 | 바깥 틀 | Stack. Web은 제품 화면의 `Container size="reading"` 안 | 화면의 본문 흐름 | gap lg=20px, 폭은 Container를 따른다(Web 최대 `layout.readingMaxWidth` 720) |
-| 제목 | `Heading level="level3"` | 선택 위 | `heading` 글자 크기·semibold |
+| 제목 | `Heading level="level3"` | 선택 위 | `heading` 글자 크기·medium(500) |
 | 선택 | SegmentedControl 2개 | 제목 아래, 연결형 다음 필터형 | 기본 44px 터치 영역, 실제 글자에 따른 높이 |
 | 결과·메모 | Text · TextField | 선택 컨트롤 아래 | 선택 변경 시 필드 재생성 없음 |
 | Native 화면 host | ScreenLayout · KeyboardAvoiding | 본문 스크롤과 바깥 키보드 여백 | flex 1, 끝 여백 spacing.md=16 |
@@ -74,3 +74,7 @@ Web은 `@hjmds/react`의 해당 granular entry, Native는 `@hjmds/react-native`
 | --- | --- | --- |
 | 배치/테마 | Stack과 HjmProvider | Stack과 HjmNativeProvider |
 | 큰 글자·좁은 폭 | 줄바꿈·단일 내용 | 같은 순서, OS 화면 검증은 별도 |
+
+## 근거
+
+2026-10-17 사용자 결정("굵기 좀더 줄여"): 모든 글자 굵기를 한 단계 낮췄다. 큰 숫자·선택 상태 600(큰 제목 단계는 같은 날 폐지), 제목·강조 500, label 500, 본문 400이며 정본은 [타이포그래피](../tokens/typography.md)다.

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

@@ -23,7 +23,7 @@
 | Icon + `createLucideGlyph` | 의미 이름(`search`·`settings`·`notifications`·`back`)을 Lucide 그림에 연결 | [Icon](../components/icon.md) |
 | Avatar + `createBlobatarFallback` | 사진이 없을 때 seed로 정해지는 얼굴, `expression: "happy"` | [Avatar](../components/avatar.md) |
 | TextTransition | 문장이 바뀔 때 `fade`·`rise`·`slide`·`scale` 전환 | [TextTransition](../components/text-transition.md) |
-| Heading | 효과 표면 안 제목, 얼굴 묶음 제목(`level2`) | [Heading](../components/heading.md) |
+| Heading | 효과 표면 안 제목, 얼굴 묶음 제목(`level3` + `semanticLevel={2}`, 24) | [Heading](../components/heading.md) |
 | Switch | 배경 움직임 켜고 끄기(`presentation="row"`) | [Switch](../components/switch.md) |
 | Button | 다음 장면 | [Button](../components/button.md) |
 | `ScrollView` + `Container`(Native) | 바깥 틀. 세로 스크롤·위아래 여백, 좌우 gutter | [Container](../components/container.md), [화면 여백과 너비](../tokens/layout.md) |
@@ -46,7 +46,7 @@ Native 화면(ScrollView, 위아래 spacing.lg 20) > Container gutter 16(폭 < 6
 ┌──── EffectSurface (mesh) ────────────────────┐
 │ 안쪽 여백 spacing.xl 24(두 플랫폼 같음)       │
 │ mesh                (label)                   │
-│ 작은 시작, 새로운 장면.  (Heading level2) ↕ lg 20 │
+│ 작은 시작, 새로운 장면.  (Heading level3) ↕ lg 20 │
 │ 설명 (body)                                   │
 │ [ 이야기 시작하기 ]  secondary                │
 └──────────────────────────────────────────────┘
@@ -106,7 +106,7 @@ const sceneKeys = ["intro.scene.welcome", "intro.scene.collect", "intro.scene.re
     {/* EffectSurface는 여백이 없다. 안쪽 틀: .hero-inner { padding: var(--hjm-space-xl) } */}
     <div className="hero-inner">
       <Stack gap="lg">
-        <Heading level="level2">{t("hero.title")}</Heading>
+        <Heading level="level3" semanticLevel={2}>{t("hero.title")}</Heading>
         <Text>{t("hero.body")}</Text>
         <Button tone="secondary" onClick={start}>{t("hero.start")}</Button>
       </Stack>
@@ -148,7 +148,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
         {/* EffectSurface는 여백이 없다. 안쪽 틀만 View padding으로 준다 */}
         <View style={{ padding: spacing.xl }}>
           <Stack gap="lg">
-            <Heading level="level2">{t("hero.title")}</Heading>
+            <Heading level="level3" semanticLevel={2}>{t("hero.title")}</Heading>
             <Text>{t("hero.body")}</Text>
             <Button tone="secondary" onPress={start}>{t("hero.start")}</Button>
           </Stack>
@@ -185,6 +185,7 @@ seed·문구·아이콘 세트·얼굴 목록은 제품 소유다. `createBlobat
 - Blobatar seed에 이름·이메일을 쓰지 않는다. 공개 제품 식별자를 쓴다.
 - EffectSurface는 화면 위쪽 히어로 하나에만 둔다. 스토리의 네 장 세로 쌓기는 비교용이다.
 - 2026-10-06 예제 검수에서 Container·Stack·Heading을 두 플랫폼에 맞췄다. 효과 안쪽 여백은 spacing.xxl(32), 얼굴은 64, 제목은 level2로 동일하다. 행은 큰 글자에서 줄바꿈한다.
+- 2026-10-17 사용자 결정("글자 너무 커", "큰 글자 정책은 없애"): 효과 표면·얼굴 묶음 제목 level2(32px)를 HJM 상한인 level3(24px)으로 바꿨다. 문서 단계는 `semanticLevel={2}`로 유지한다.
 - Native EffectSurface는 AppState·reducedMotion을 반영한다. 백그라운드 중단과 내비게이션으로 가려진 화면의 중단은 다르므로, 마운트된 채 가려지는 제품 화면·목록은 `visible`을 연결한다. Storybook 정지 화면만으로 이 제품 연결을 검증했다고 보고하지 않는다.
 
 ## 근거

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

@@ -59,7 +59,8 @@ host: 남은 높이·safe area·키보드
 | --- | --- |
 | [AuthScreenLayout](../components/auth-screen-layout.md) | 필수 props·슬롯·플랫폼 차이 |
 | [AuthProviderButton](../components/auth-provider-button.md) | 제공자 버튼(이름만) |
-| [Top](../components/top.md) | 히어로 제목·설명(제목을 `Text`로 그리지 않는다) |
+| [AuthScreenLayout](../components/auth-screen-layout.md#공개-이름과-import)의 `AuthScreenHero` | 히어로 마크·eyebrow·태그라인·설명(`Top`·`Text`로 조립하지 않는다) |
+| [AuthScreenLayout](../components/auth-screen-layout.md#공개-이름과-import)의 `AuthScreenFooter` | 동의 고지·정책 링크(ghost `Button`으로 만들지 않는다) |
 | [Notice](../components/notice.md) | 로그인 실패 한 줄 |
 | [Button](../components/button.md) | 동작·로딩·보조 행동 |
 | [ScreenLayout](../components/screen-layout.md) | 화면 높이·본문 교체·스크롤 소유 |
@@ -68,27 +69,27 @@ host: 남은 높이·safe area·키보드
 
 ```tsx
 // Web
-import { AuthScreenLayout } from "@hjmds/react/auth-screen";
+import { AuthScreenFooter, AuthScreenHero, AuthScreenLayout } from "@hjmds/react/auth-screen";
 
 <AuthScreenLayout
   mainCard
   {...(pending ? { pendingLabel: t("auth.pending") } : {})}
-  hero={<ProductHero />}            // 제품 마크·제목·설명
+  hero={<AuthScreenHero mark={<ProductMark />} title={t("auth.tagline")} description={t("auth.description")} />}
   main={<ProviderButtons />}        // pending이어도 같은 목록
-  footer={<ConsentAndPolicyLinks />}
+  footer={<AuthScreenFooter notice={t("auth.consent")} links={policyLinks} />}  // { label, href | onClick }
 />
 ```
 
 ```tsx
 // Native
-import { AuthScreenLayout } from "@hjmds/react-native/auth-screen";
+import { AuthScreenFooter, AuthScreenHero, AuthScreenLayout } from "@hjmds/react-native/auth-screen";
 
 <AuthScreenLayout
   mainCard
   {...(pending ? { pendingLabel: t("auth.pending") } : {})}
-  hero={<ProductHero />}            // 제품 마크·제목·설명
+  hero={<AuthScreenHero mark={<ProductMark />} title={t("auth.tagline")} description={t("auth.description")} />}
   main={<ProviderButtons />}        // pending이어도 같은 목록
-  footer={<ConsentAndPolicyLinks />}
+  footer={<AuthScreenFooter notice={t("auth.consent")} links={policyLinks} />}  // { label, onPress }
 />
 ```
 
@@ -112,4 +113,5 @@ import { AuthScreenLayout } from "@hjmds/react-native/auth-screen";
 ## 근거
 
 - 제공자 목록과 로그인 요청 분리 상황 표: 2026-10-13 전수 점검 — 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+- 히어로·하단 동의를 `AuthScreenHero`·`AuthScreenFooter`로 연결: 2026-10-17 사용자 피드백("굵기랑 크기 줄여", "간격 줄여") — `Top large` 히어로가 402 폭에서 두 줄 32/40이었고 ghost Button 링크 사이가 42였다. 수치는 [API 배치 규칙](../components/auth-screen-layout.md#배치).
 - 빈 화면·로그인 필요 스토리 없음: 2026-10-06 해당하지 않는 본문 상태 스토리를 뺐다.

package/docs/usage/screens/landing.md

@@ -29,20 +29,20 @@
 │ ┌ ① 히어로 EffectSurface(mesh+grain) ──┐ │
 │ │ (안쪽 여백 spacing.xl 24 — HJM 구성 소유) │ │
 │ │ eyebrow  Text tone=muted             │ │  Stack gap lg 20
-│ │ 제목     Heading level1 (h1)         │ │
+│ │ 제목     Heading level3 (h1) 24      │ │
 │ │ 소개     Text as=p                   │ │
 │ │ [ 첫 기록 써보기 ]  ← 주 행동(primary) │ │
 │ └──────────────────────────────────────┘ │
 │              ↕ spacing.xl 24             │
 │ ┌ ② 미리보기 Surface padding lg 20 ────┐ │
-│ │ Heading level2                       │ │  Stack gap md 16
+│ │ Heading level4 (h2) 20               │ │  Stack gap md 16
 │ │ (저장 직후) "추가했어요" status        │ │
 │ │ List > ListRow 한 줄씩(최신이 위)     │ │
 │ └──────────────────────────────────────┘ │
-│ ③ 기능 Heading level2                    │
-│ ┌ Surface padding lg ─┐ Heading level3 + Text (Stack gap sm 12)
+│ ③ 기능 Heading level4 (h2)               │
+│ ┌ Surface padding lg ─┐ Heading level5 (h3) + Text (Stack gap sm 12)
 │ └─────────────────────┘ × 3, 사이 24     │
-│ ④ FAQ Heading level2                     │
+│ ④ FAQ Heading level4 (h2)                │
 │   ▸ 질문 1   Collapsible (트리거 최소 44) │
 │   ▸ 질문 2                               │
 │ ⑤ [ 첫 기록 써보기 ]  ← 같은 행동 반복     │  secondary
@@ -67,8 +67,8 @@
 | 바깥 틀 | Web `main` > `Container size="content" gutter={gutter}` > `Stack gap="xl"`(문서 스크롤) · Native `ScrollView`(`contentContainerStyle={{ paddingVertical: spacing.lg }}`) > `Container size="content" gutter={gutter}` > `Stack gap="xl"` | 화면 전체, 스크롤. 위 안전 영역은 내비게이션 헤더(또는 [TopBar](../components/top-bar.md) `safeAreaTop`)가 맡고 헤더 없이 띄울 때만 제품이 감싼다. 아래 고정 영역은 없다. 바깥에는 입력이 없어 키보드 처리는 ⑥ 시트가 맡는다 | 좌우 gutter: 폭 600 미만 `compact` 16(`layout.pagePadding.compact`), 이상 `regular` 20([화면 여백](../tokens/layout.md)). Native 위아래 `spacing.lg` 20. 직계 요소 사이 `spacing.xl` 24(`layout.sectionGap`) |
 | ① 히어로 | EffectSurface `descriptor={{ layers: ["mesh","grain"], active: false }}` > Surface `padding="xl"` > Stack `gap="lg"` > Text·Heading·Text·Button | 맨 위 | 요소 사이 `spacing.lg` 20. EffectSurface 안에 Surface `padding="xl"`을 두어 spacing.xl 24를 준다. 실제 양 플랫폼 예제와 같은 공개 구성이다 |
 | ② 미리보기 | Surface `padding="lg"` > Stack `gap="md"` > Heading·상태 Text·List | 히어로 아래 | 안쪽 20, 요소 사이 `spacing.md` 16, 한 줄 행 최소 56(`layout.rowHeight.singleLine`). 새 기록이 맨 위 |
-| ③ 기능 | Heading level2 + Surface `padding="lg"` ×3 > Stack `gap="sm"` | 미리보기 아래 | 카드 안 `spacing.sm` 12, 카드 사이 24 |
-| ④ FAQ | Heading level2 + Collapsible × n | 기능 아래 | 트리거 최소 44(`control.minTouchTarget`), 트리거 위아래 `spacing.xs` 8(Web) |
+| ③ 기능 | Heading level4(h2) + Surface `padding="lg"` ×3 > Stack `gap="sm"` | 미리보기 아래 | 카드 안 `spacing.sm` 12, 카드 사이 24 |
+| ④ FAQ | Heading level4(h2) + Collapsible × n | 기능 아래 | 트리거 최소 44(`control.minTouchTarget`), 트리거 위아래 `spacing.xs` 8(Web) |
 | ⑤ 마지막 행동 | Button `secondary` + Text `tone="muted"` | 맨 아래 | 사이 24 |
 | ⑥ 입력 | Sheet(Native `keyboardAvoidance` `scrollable`) > Stack `gap="lg"` > Notice(실패 때)·TextField, 제출은 `footer` | 오버레이, 화면 아래 | 시트 좌우 `spacing.lg` 20, TextField 높이 44(`control.fieldHeight`). 아래 안전 영역·키보드는 시트가 맡는다 |
 
@@ -134,7 +134,7 @@ footer의 저장과 같은 동작을 실행한다. Web에서 IME 조합 확정
 | [Container](../components/container.md) | 바깥 틀 폭·좌우 여백 |
 | [화면 여백과 너비](../tokens/layout.md) | gutter 선택(`resolveWindowClass`) |
 | [EffectSurface](../components/effect-surface.md) | ① 히어로 배경 장식 |
-| [Heading](../components/heading.md) | 히어로 level1, 영역 제목 level2, 기능 카드 level3 |
+| [Heading](../components/heading.md) | 히어로 level3(h1, 24), 영역 제목 level4(h2, 20), 기능 카드 level5(h3, 18) |
 | [Text](../components/text.md) | eyebrow·소개·범위 안내·상태 문구 |
 | [Button](../components/button.md) | 주 행동, 반복 행동, 시트 제출 |
 | [Surface](../components/surface.md) | ② 미리보기, ③ 기능 카드 |
@@ -179,20 +179,20 @@ const gutter = resolveWindowClass(window.innerWidth) === "compact" ? "compact" :
   <EffectSurface descriptor={{ layers: ["mesh", "grain"], seed: "landing", active: false }}><Surface padding="xl">
     <Stack gap="lg" align="start">
       <Text tone="muted">{t("landing.eyebrow")}</Text>
-      <Heading level="level1">{t("landing.title")}</Heading>
+      <Heading level="level3" semanticLevel={1}>{t("landing.title")}</Heading>
       <Text as="p">{t("landing.intro")}</Text>
       <Button onClick={start}>{t("landing.cta")}</Button>
     </Stack>
   </Surface></EffectSurface>
   <Surface padding="lg"><Stack gap="md">
-    <Heading level="level2">{t("landing.preview")}</Heading>
+    <Heading level="level4" semanticLevel={2}>{t("landing.preview")}</Heading>
     {saved ? <Text role="status">{t("landing.saved")}</Text> : null}
     <List label={t("landing.preview")}>{notes.map(n => <ListRow key={n.id} title={n.text} />)}</List>
   </Stack></Surface>
-  <Heading level="level2">{t("landing.features")}</Heading>
+  <Heading level="level4" semanticLevel={2}>{t("landing.features")}</Heading>
   {features.map(f => <Surface key={f.id} padding="lg"><Stack gap="sm">
-    <Heading level="level3">{t(f.titleKey)}</Heading><Text>{t(f.bodyKey)}</Text></Stack></Surface>)}
-  <Heading level="level2">{t("landing.faq")}</Heading>
+    <Heading level="level5" semanticLevel={3}>{t(f.titleKey)}</Heading><Text>{t(f.bodyKey)}</Text></Stack></Surface>)}
+  <Heading level="level4" semanticLevel={2}>{t("landing.faq")}</Heading>
   {faqs.map(q => <Collapsible key={q.id} trigger={t(q.questionKey)}><Text>{t(q.answerKey)}</Text></Collapsible>)}
   <Stack gap="xl" align="start"><Button tone="secondary" onClick={start}>{t("landing.cta")}</Button>
   <Text tone="muted">{t("landing.scope")}</Text></Stack>
@@ -229,7 +229,7 @@ const gutter = resolveWindowClass(width) === "compact" ? "compact" : "regular";
   <Container size="content" gutter={gutter}><Stack gap="xl">
     <EffectSurface descriptor={{ layers: ["mesh", "grain"], seed: "landing", active: false }}><Surface padding="xl">
       <Stack gap="lg">
-        <Heading level="level1">{t("landing.title")}</Heading>
+        <Heading level="level3" semanticLevel={1}>{t("landing.title")}</Heading>
         <Text>{t("landing.intro")}</Text>
         <Button onPress={start}>{t("landing.cta")}</Button>
       </Stack>
@@ -366,6 +366,7 @@ import { ScreenLayout } from "@hjmds/react-native/screens";
 
 ## 근거
 
+- 2026-10-17 사용자 결정("글자 너무 커", "큰 글자 정책은 없애"): 히어로 제목 level1 40px·영역 제목 level2 32px가 지나치게 커서 큰 글자 단계를 폐지했다. 히어로는 HJM 상한인 level3 24px(h1), 영역 제목은 level4 20px(h2), 기능 카드는 level5 18px(h3)로 위계를 만든다.
 - FAQ는 Collapsible(기본·변형): 2026-10-16 사용자 지적 — 변형 스토리가 `selected` 토글 Button 하나로 펼침을 흉내 내 눌림 토글로 읽혔다.
 - 닫을 때 초안 보존·성공 제출만 한 번 추가: 2026-10-13 실제 예제 검수에서 닫은 뒤 초안 소실과 연속 제출 시 중복 행을 재현했다.
 - 히어로 padding·시트 저장 footer: 2026-10-06 지침과 예제 정합성 수정.

package/docs/usage/screens/notification-settings.md

@@ -28,7 +28,7 @@ ScreenLayout: 제목(고정) → 본문(스크롤) → footer(고정)
 | --- | --- | --- | --- |
 | 바깥 틀 | ScreenLayout | host의 남은 높이 | 공통 화면 폭·padding·본문 스크롤 |
 | 설정 묶음 | CompositionLayout | 본문 | 공통 제목·설명·내용 간격 |
-| 설정 값 | Switch | 구성 본문 | 제품 데이터·변경 콜백 |
+| 설정 값 | List(`separator="none"`) > Switch `presentation="row"` | 구성 본문 | 행 사이 gap 없음 — 행 간격 56은 Switch 행 높이·여백이 맡는다. 제품 데이터·변경 콜백 |
 | 저장 | footer | 화면 하단 | HJM 고정 영역; 제품 저장 요청과 pending 연결 |
 
 ## 버튼과 행동 위치
@@ -74,7 +74,8 @@ ScreenLayout: 제목(고정) → 본문(스크롤) → footer(고정)
 | [Notice](../components/notice.md) | 저장 결과·오류 |
 | [Skeleton](../components/skeleton.md) | 첫 값 불러오기 |
 | [Button](../components/button.md) | ③ 하단 저장 |
-| [Stack](../components/stack.md) | 세 층 사이, 스위치 목록 |
+| [Stack](../components/stack.md) | 세 층 사이 |
+| [List](../components/list.md) | 스위치 목록(행 사이 여백 없이) |
 | [화면 여백과 너비](../tokens/layout.md) | `layout.readingMaxWidth`, `layout.pagePadding.compact`·`regular`, `resolveWindowClass` |
 | [간격](../tokens/spacing.md) | `spacing.xxs`·`xs`·`sm`·`md`·`lg` |
 
@@ -114,3 +115,4 @@ ScreenLayout이 화면 여백과 스크롤을, CompositionLayout이 묶음 간
 ## 근거
 
 - 설정 초안의 저장 경계 상황 표: 2026-10-13 전수 점검 — 최초 조회와 변경 요청의 상태를 같은 골격으로 설명하던 부분을 구체화했다.
+- 스위치 목록 List·gap 없음: 2026-10-17 사용자 보고("간격이 커") — Stack `gap="md"` 16이 Switch 행 최소 높이 위에 더해져 행 간격이 84였다.

package/docs/usage/tokens/typography.md

@@ -23,9 +23,9 @@
 | `typography.label` | 12 / 줄 18 / 500 | `--hjm-type-label-*` | `theme.tokens.typography.label` | 라벨·도움말·small 버튼 글자 |
 | `typography.body` | 14 / 줄 20 / 400 | `--hjm-type-body-*` | `theme.tokens.typography.body` | 기본 본문·medium 버튼·필드 글자 |
 | `typography.bodyLarge` | 16 / 줄 24 / 400 | `--hjm-type-body-large-*` | `theme.tokens.typography.bodyLarge` | 읽기용 긴 본문·large 버튼 글자 |
-| `typography.title` | 18 / 줄 26 / 600 | `--hjm-type-title-*` | `theme.tokens.typography.title` | 카드 제목(`heading.level5`) |
-| `typography.titleLarge` | 20 / 줄 28 / 600 | `--hjm-type-title-large-*` | `theme.tokens.typography.titleLarge` | 큰 구획 제목(`heading.level4`) |
-| `typography.heading` | 24 / 줄 32 / 600 | `--hjm-type-heading-*` | `theme.tokens.typography.heading` | 화면의 가장 큰 제목 |
+| `typography.title` | 18 / 줄 26 / 500 | `--hjm-type-title-*` | `theme.tokens.typography.title` | 카드 제목(`heading.level5`) |
+| `typography.titleLarge` | 20 / 줄 28 / 500 | `--hjm-type-title-large-*` | `theme.tokens.typography.titleLarge` | 큰 구획 제목(`heading.level4`) |
+| `typography.heading` | 24 / 줄 32 / 500 | `--hjm-type-heading-*` | `theme.tokens.typography.heading` | 화면의 가장 큰 제목. **HJM 글자 크기의 상한** |
 
 굵기 열은 토큰 원본값이다. 프로필 없는 Text는 기본 `emphasis="regular"`(400)를 사용하므로
 variant만 지정해도 위 굵기가 자동 적용되는 것은 아니다. 예외는 `label`이다. `label`은 프로필이 없어도
@@ -37,11 +37,10 @@ Heading은 제목 단계의 굵기를 쓴다. 두 renderer가 같은 resolver를
 
 | 토큰 | 값 | Web CSS 변수 | Native 경로 | 용도 |
 | --- | --- | --- | --- | --- |
-| `heading.level1` | 40 / 줄 48 / 700 | — | `heading.level1` | 랜딩·문서의 대표 제목 |
-| `heading.level2` | 32 / 줄 40 / 700 | — | `heading.level2` | 긴 페이지의 큰 구획 제목 |
-| `heading.level3` | = `typography.heading` 24 | `--hjm-type-heading-*` | `heading.level3` | 화면 제목 |
+| `heading.level3` | = `typography.heading` 24 | `--hjm-type-heading-*` | `heading.level3` | 화면 제목·랜딩 대표 제목 |
 | `heading.level4` | = `typography.titleLarge` 20 | `--hjm-type-title-large-*` | `heading.level4` | 구획 제목 |
 | `heading.level5` | = `typography.title` 18 | `--hjm-type-title-*` | `heading.level5` | 카드 제목 |
+| `heading.level1` · `level2` | = `heading.level3` 24 (사용 중단) | `--hjm-type-heading-*` | `heading.level1` · `level2` | 새 코드에서 쓰지 않는다. 기존 소비 코드가 깨지지 않도록 이름만 남기고 값은 상한 24로 고정했다 |
 
 ### 서체·굵기·자간·숫자
 
@@ -49,12 +48,12 @@ Heading은 제목 단계의 굵기를 쓴다. 두 renderer가 같은 resolver를
 | --- | --- | --- | --- | --- |
 | `fontFamily.ui` | Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif | `--hjm-font-family-ui` | `fontFamily.ui` | 화면 글자. Native는 `fonts="pretendard"`일 때 굵기별 Pretendard face, 그 전에는 OS 서체. 불러오기는 [글꼴 역할](font-roles.md#기본-서체-pretendard-불러오기필수) |
 | `fontFamily.code` | ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Cascadia Mono, Consolas, Liberation Mono, monospace | — (`--hjm-font-family-code` fallback) | `fontFamily.code` | 코드 |
-| `fontWeight.regular` · `medium` · `semibold` · `bold` · `heavy` | 400 · 500 · 600 · 700 · 800 | `--hjm-font-weight-<이름>` | `fontWeight.<이름>` | Text `emphasis`: `regular` 400 · `medium` 600 · `strong` 700 |
+| `fontWeight.regular` · `medium` · `semibold` · `bold` · `heavy` | 400 · 500 · 600 · 700 · 800 | `--hjm-font-weight-<이름>` | `fontWeight.<이름>` | Text `emphasis`: `regular` 400 · `medium` 500 · `strong` 500 (2026-10-17, 가장 강한 강조 = 제목 굵기). 컴포넌트 recipe는 제목 500, 큰 숫자(Statistic 값)·선택 상태 600을 쓰고 700·800은 브루탈리즘 프리셋 외에 쓰지 않는다 |
 | `letterSpacing.tight` · `normal` · `wide` | -0.2 · 0 · 0.2 | — | `letterSpacing.<이름>` | 자간 조정이 필요한 제품 고유 글자. HJM 컴포넌트는 자간을 지정하지 않는다 |
 | `numeric.tabular` · `proportional` | `tabular-nums` · `proportional-nums` | — | `numeric.<이름>` | 바뀌는 숫자(카운터·통계·날짜 칸)는 `tabular`로 폭을 고정 |
 | `largeTextThreshold` | 1.6 | 루트 `data-large-text="true"` | `largeTextThreshold` | 글자 배율이 이 값 이상이면 큰 글자 배치로 바꾼다 |
 
-Native는 `fonts="pretendard"`일 때 500을 `Pretendard-Medium`, 700을 `Pretendard-Bold` face로 그린다.
+Native는 `fonts="pretendard"`일 때 500을 `Pretendard-Medium`, 600을 `Pretendard-SemiBold` face로 그린다(`resolvePretendardNativeFace`).
 `@hjmds/react-native/fonts`의 `hjmPretendardFonts`가 400~800 다섯 face를 모두 번들한다. Web은 Pretendard Variable 한 파일이 모든 굵기를 덮는다.
 
 Native 경로의 `theme`은 `useHjmNativeTheme()`, 나머지 이름은 `@hjmds/design-contracts/foundations` import다.
@@ -62,9 +61,17 @@ Web 크기 변수는 `rem × --hjm-text-scale`이라 Provider의 `textScale`을
 
 ## 근거
 
-2026-10-17 사용자 결정: `label`은 폼 라벨·섹션 부제목이 본문 대비 약해 500(본문 400과 제목 600 사이)으로 정하고
+2026-10-17 사용자 결정: `label`은 폼 라벨·섹션 부제목이 본문 대비 약해 500으로 정하고
 Web·Native 모두 기본으로 그린다. `heading.level1`·`level2`는 Pretendard 800이 큰 크기에서 무겁고 거칠어 700으로
-낮췄다(제목 단계 3~5는 같은 날 600). 브루탈리즘 프리셋은 강한 강조 프리셋이라 level1·2를 800으로 명시해 유지한다.
+낮췄다(제목 단계 3~5는 같은 날 600). 같은 날 두 번째 검토("굵기 좀더 줄여")에서 한 단계씩 더 낮춰 큰 제목 600,
+제목 단계 500, 강조 `strong` 500이 됐다. Web CSS는 `--hjm-type-title-weight`·`--hjm-text-emphasis-*` 역할 변수로 같은 값을 읽는다.
+브루탈리즘 프리셋은 강한 강조 프리셋이라 `typography.heading`(따라서 Heading level1~3) 굵기를 800으로 명시해 유지한다. 크기는 공통 단계를 따른다.
+
+2026-10-17 사용자 결정("글자 너무 커", "큰 글자 정책은 없애"): 큰 글자 단계(display)를 폐지했다. HJM에서 가장 큰 글자는
+`typography.heading` 24 / 줄 32다. 계기는 Native Storybook 서비스 소개 화면의 히어로 제목(level1 40)과 구획 제목(level2 32)이
+화면에 비해 지나치게 컸던 것이다. `heading.level1`·`level2`의 40·32와 semibold 600 단계를 없애고 두 이름을 `level3`(24/32/500)과
+같은 값으로 고정했다. 디자인 프로필도 이 상한을 넘는 글자 크기를 `RangeError`로 거부하므로 에디토리얼(56/42/30)·브루탈리즘(48/38/30)의
+확대 크기도 함께 없앴다. 랜딩 대표 제목은 `level3`, 구획 제목은 `level4`, 카드 제목은 `level5`로 위계를 만든다.
 
 ## 쓰는 법
 
@@ -94,6 +101,7 @@ import { Heading } from "@hjmds/react-native/heading";
 ## 하지 말 것
 
 - `font-size: 15px`, `fontWeight: "900"`처럼 단계 밖 값을 쓰지 않는다.
+- 24보다 큰 글자(히어로·큰 숫자·표지 제목)를 제품 CSS·StyleSheet로 만들지 않는다. 강조는 위계(level3 → level4 → level5)·굵기·여백으로 한다.
 - 크기를 맞추려고 Heading의 `semanticLevel`을 바꾸지 않는다. 시각 크기는 `level`, 문서 구조는 `semanticLevel`이다.
 - 글자 크기를 고정해 OS 글자 크기 설정을 막지 않는다(`allowFontScaling={false}`, px 고정 `font-size`).
 - 줄 높이를 지워 글자를 겹치게 하지 않는다. 한국어 본문은 토큰 줄 높이를 그대로 쓴다.
@@ -117,10 +125,10 @@ import { Heading } from "@hjmds/react-native/heading";
 프로필 계약에서 확인하고 앱 CSS로 내부 값을 덮지 않는다.
 
 
-Heading의 다섯 시각 단계는 `defineHjmDesignProfile({ tokens: { heading: ... } })`로
-일괄 지정한다. Web `--hjm-heading-size/line-height/weight`, Native Heading의 Text
+Heading의 시각 단계는 `defineHjmDesignProfile({ tokens: { heading: ... } })`로
+일괄 지정한다. 어느 단계도 `typography.heading` 24를 넘을 수 없다. Web `--hjm-heading-size/line-height/weight`, Native Heading의 Text
 metrics로 연결된다. 해당 heading을 담은 Provider에서 가장 가까운 profile을 읽는다.
-level3/4/5는 기존 typography heading/titleLarge/title override를 기본으로 병합하며
+level1/2/3은 typography heading, level4/5는 titleLarge/title override를 기본으로 병합하며
 명시적인 heading 값이 우선한다. 문서의 h1~h6 순서는 `semanticLevel`이 소유한다.
 
 제목·본문에 서로 다른 글꼴이 필요하면 [표시·읽기·기술 글자](font-roles.md)를 사용한다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/design-contracts",
-  "version": "1.27.2",
+  "version": "1.28.1",
   "description": "Renderer-neutral design contracts, tokens, recipes, and behaviors shared by HJM products.",
   "license": "MIT",
   "repository": {