@hjmds/design-contracts 1.50.0 → 2.1.0

package/dist/tag.js

@@ -3,6 +3,8 @@ import { semanticColors } from "./semantic-colors.js";
 import { fontWeight, spacing, stroke } from "./foundations.js";
 export const tagDefaults = {
     tone: "neutral",
+    // The approved border-only capsule is the shared default (2026-10-29).
+    variant: "outline",
 };
 function assertCopy(value, field) {
     if (value.trim().length === 0) {
@@ -18,6 +20,9 @@ const supportedTones = [
 ];
 export function validateTagDescriptor(descriptor) {
     assertCopy(descriptor.label, "label");
+    if (descriptor.variant !== undefined && !["default", "outline"].includes(descriptor.variant)) {
+        throw new TypeError(`Unsupported Tag variant: ${String(descriptor.variant)}`);
+    }
     if (descriptor.tone !== undefined &&
         !supportedTones.includes(descriptor.tone)) {
         throw new TypeError(`Unsupported Tag tone: ${String(descriptor.tone)}`);
@@ -28,14 +33,10 @@ export function resolveTagDescriptor(descriptor) {
     return {
         label: descriptor.label,
         tone: descriptor.tone ?? tagDefaults.tone,
+        variant: descriptor.variant ?? tagDefaults.variant,
     };
 }
-/**
- * Rectangular, not the pill `radius.full` that `chipRecipe`
- * use, so a static Tag never reads as a pressable Chip or a status Badge at a
- * glance. No `states` and no `focus` contract: nothing here is ever pressed
- * or focused.
- */
+/** Static metadata has no focus or press contract, including the outline capsule. */
 export const tagRecipe = {
     slots: ["root", "label"],
     defaults: tagDefaults,
@@ -77,15 +78,25 @@ export const tagRecipe = {
         textVariant: "caption",
         fontWeight: fontWeight.medium,
     },
+    // Profile fact rails need breathing room without a colored plate (2026-10-29 approved preview).
+    outline: {
+        minHeight: 32,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        radius: "full",
+        fontWeight: fontWeight.regular,
+        background: "transparent",
+        content: semanticColors.content.primary,
+    },
     radius: "sm",
     borderWidth: stroke.default,
 };
 /** Resolve the same Tag recipe for non-CSS renderers. */
-export function resolveTagPresentation(tone, palette) {
+export function resolveTagPresentation(tone, palette, variant = tagDefaults.variant) {
     const contract = tagRecipe.tones[tone];
     return {
-        background: resolveColorReference(contract.background, palette),
-        content: resolveColorReference(contract.content, palette),
+        background: variant === "outline" ? "transparent" : resolveColorReference(contract.background, palette),
+        content: resolveColorReference(variant === "outline" && tone === "neutral" ? tagRecipe.outline.content : contract.content, palette),
         border: contract.border === null
             ? null
             : resolveColorReference(contract.border, palette),

package/dist/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../src/tag.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  resolveColorReference,\n  type ColorReferencePalette,\n} from \"./color-references.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\nimport { fontWeight, spacing, stroke } from \"./foundations.js\";\n\nexport type TagTone = \"neutral\" | \"info\" | \"success\" | \"attention\" | \"brand\";\n\nexport const tagDefaults = {\n  tone: \"neutral\",\n} as const satisfies Readonly<{ tone: TagTone }>;\n\n/**\n * A single piece of static metadata (a position, a grade, a season). Tag has\n * no interaction axis at all — no selected, no pressed, no closable. Removing\n * or toggling a tag is deselection, which belongs to `Chip`.\n */\nexport type TagDescriptor = Readonly<{\n  label: string;\n  tone?: TagTone;\n}>;\n\nexport type ResolvedTagDescriptor = Readonly<{\n  label: string;\n  tone: TagTone;\n}>;\n\nfunction assertCopy(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Tag ${field} must not be empty`);\n  }\n}\n\nconst supportedTones: readonly TagTone[] = [\n  \"neutral\",\n  \"info\",\n  \"success\",\n  \"attention\",\n  \"brand\",\n];\n\nexport function validateTagDescriptor(descriptor: TagDescriptor): void {\n  assertCopy(descriptor.label, \"label\");\n  if (\n    descriptor.tone !== undefined &&\n    !supportedTones.includes(descriptor.tone)\n  ) {\n    throw new TypeError(`Unsupported Tag tone: ${String(descriptor.tone)}`);\n  }\n}\n\nexport function resolveTagDescriptor(\n  descriptor: TagDescriptor,\n): ResolvedTagDescriptor {\n  validateTagDescriptor(descriptor);\n  return {\n    label: descriptor.label,\n    tone: descriptor.tone ?? tagDefaults.tone,\n  };\n}\n\n/**\n * Rectangular, not the pill `radius.full` that `chipRecipe`\n * use, so a static Tag never reads as a pressable Chip or a status Badge at a\n * glance. No `states` and no `focus` contract: nothing here is ever pressed\n * or focused.\n */\nexport const tagRecipe = {\n  slots: [\"root\", \"label\"] as const,\n  defaults: tagDefaults,\n  tones: {\n    // Same as badgeRecipe: a canvas plate without a border vanished on the canvas (2026-10-17 review E3).\n    neutral: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.secondary,\n      border: semanticColors.border.default,\n    },\n    brand: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.brand,\n      border: semanticColors.border.default,\n    },\n    info: {\n      background: semanticColors.canvas,\n      content: semanticColors.feedback.info.foreground,\n      border: semanticColors.feedback.info.border,\n    },\n    success: {\n      background: semanticColors.feedback.success.badgeBackground,\n      content: semanticColors.feedback.success.foreground,\n      border: semanticColors.feedback.success.border,\n    },\n    attention: {\n      background: semanticColors.feedback.attention.badgeBackground,\n      content: semanticColors.feedback.attention.foreground,\n      border: semanticColors.feedback.attention.border,\n    },\n  },\n  size: {\n    // Static metadata still participates in Dynamic Type. A fixed 20px frame\n    // clips the label at accessibility sizes; minHeight preserves the compact\n    // base shape while allowing the intrinsic line box to grow.\n    minHeight: 20,\n    paddingHorizontal: spacing.xxs,\n    gap: spacing.xxs,\n    textVariant: \"caption\",\n    fontWeight: fontWeight.medium,\n  },\n  radius: \"sm\",\n  borderWidth: stroke.default,\n} as const;\n\nexport type ResolvedTagPresentation = Readonly<{\n  background: string;\n  content: string;\n  border: string | null;\n}>;\n\n/** Resolve the same Tag recipe for non-CSS renderers. */\nexport function resolveTagPresentation(\n  tone: TagTone,\n  palette: ColorReferencePalette,\n): ResolvedTagPresentation {\n  const contract = tagRecipe.tones[tone];\n  return {\n    background: resolveColorReference(contract.background, palette),\n    content: resolveColorReference(contract.content, palette),\n    border:\n      contract.border === null\n        ? null\n        : resolveColorReference(contract.border, palette),\n  };\n}\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../src/tag.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  resolveColorReference,\n  type ColorReferencePalette,\n} from \"./color-references.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\nimport { fontWeight, spacing, stroke } from \"./foundations.js\";\n\nexport type TagTone = \"neutral\" | \"info\" | \"success\" | \"attention\" | \"brand\";\n\nexport type TagVariant = \"default\" | \"outline\";\n\nexport const tagDefaults = {\n  tone: \"neutral\",\n  // The approved border-only capsule is the shared default (2026-10-29).\n  variant: \"outline\",\n} as const satisfies Readonly<{ tone: TagTone; variant: TagVariant }>;\n\n/**\n * A single piece of static metadata (a position, a grade, a season). Tag has\n * no interaction axis at all — no selected, no pressed, no closable. Removing\n * or toggling a tag is deselection, which belongs to `Chip`.\n */\nexport type TagDescriptor = Readonly<{\n  label: string;\n  tone?: TagTone;\n  variant?: TagVariant;\n}>;\n\nexport type ResolvedTagDescriptor = Readonly<{\n  label: string;\n  tone: TagTone;\n  variant: TagVariant;\n}>;\n\nfunction assertCopy(value: string, field: string): void {\n  if (value.trim().length === 0) {\n    throw new TypeError(`Tag ${field} must not be empty`);\n  }\n}\n\nconst supportedTones: readonly TagTone[] = [\n  \"neutral\",\n  \"info\",\n  \"success\",\n  \"attention\",\n  \"brand\",\n];\n\nexport function validateTagDescriptor(descriptor: TagDescriptor): void {\n  assertCopy(descriptor.label, \"label\");\n  if (descriptor.variant !== undefined && ![\"default\", \"outline\"].includes(descriptor.variant)) {\n    throw new TypeError(`Unsupported Tag variant: ${String(descriptor.variant)}`);\n  }\n  if (\n    descriptor.tone !== undefined &&\n    !supportedTones.includes(descriptor.tone)\n  ) {\n    throw new TypeError(`Unsupported Tag tone: ${String(descriptor.tone)}`);\n  }\n}\n\nexport function resolveTagDescriptor(\n  descriptor: TagDescriptor,\n): ResolvedTagDescriptor {\n  validateTagDescriptor(descriptor);\n  return {\n    label: descriptor.label,\n    tone: descriptor.tone ?? tagDefaults.tone,\n    variant: descriptor.variant ?? tagDefaults.variant,\n  };\n}\n\n/** Static metadata has no focus or press contract, including the outline capsule. */\nexport const tagRecipe = {\n  slots: [\"root\", \"label\"] as const,\n  defaults: tagDefaults,\n  tones: {\n    // Same as badgeRecipe: a canvas plate without a border vanished on the canvas (2026-10-17 review E3).\n    neutral: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.secondary,\n      border: semanticColors.border.default,\n    },\n    brand: {\n      background: semanticColors.canvas,\n      content: semanticColors.content.brand,\n      border: semanticColors.border.default,\n    },\n    info: {\n      background: semanticColors.canvas,\n      content: semanticColors.feedback.info.foreground,\n      border: semanticColors.feedback.info.border,\n    },\n    success: {\n      background: semanticColors.feedback.success.badgeBackground,\n      content: semanticColors.feedback.success.foreground,\n      border: semanticColors.feedback.success.border,\n    },\n    attention: {\n      background: semanticColors.feedback.attention.badgeBackground,\n      content: semanticColors.feedback.attention.foreground,\n      border: semanticColors.feedback.attention.border,\n    },\n  },\n  size: {\n    // Static metadata still participates in Dynamic Type. A fixed 20px frame\n    // clips the label at accessibility sizes; minHeight preserves the compact\n    // base shape while allowing the intrinsic line box to grow.\n    minHeight: 20,\n    paddingHorizontal: spacing.xxs,\n    gap: spacing.xxs,\n    textVariant: \"caption\",\n    fontWeight: fontWeight.medium,\n  },\n  // Profile fact rails need breathing room without a colored plate (2026-10-29 approved preview).\n  outline: {\n    minHeight: 32,\n    paddingHorizontal: 10,\n    paddingVertical: 6,\n    radius: \"full\",\n    fontWeight: fontWeight.regular,\n    background: \"transparent\",\n    content: semanticColors.content.primary,\n  },\n  radius: \"sm\",\n  borderWidth: stroke.default,\n} as const;\n\nexport type ResolvedTagPresentation = Readonly<{\n  background: string;\n  content: string;\n  border: string | null;\n}>;\n\n/** Resolve the same Tag recipe for non-CSS renderers. */\nexport function resolveTagPresentation(\n  tone: TagTone,\n  palette: ColorReferencePalette,\n  variant: TagVariant = tagDefaults.variant,\n): ResolvedTagPresentation {\n  const contract = tagRecipe.tones[tone];\n  return {\n    background: variant === \"outline\" ? \"transparent\" : resolveColorReference(contract.background, palette),\n    content: resolveColorReference(variant === \"outline\" && tone === \"neutral\" ? tagRecipe.outline.content : contract.content, palette),\n    border:\n      contract.border === null\n        ? null\n        : resolveColorReference(contract.border, palette),\n  };\n}\n"]}

package/dist/version.d.ts

@@ -1,3 +1,3 @@
 /** Package release shown by documentation surfaces. Kept in sync by a test. */
-export declare const designSystemVersion: "1.50.0";
+export declare const designSystemVersion: "2.1.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,EAAG,QAAiB,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,EAAG,OAAgB,CAAC"}

package/dist/version.js

@@ -1,3 +1,3 @@
 /** Package release shown by documentation surfaces. Kept in sync by a test. */
-export const designSystemVersion = "1.50.0";
+export const designSystemVersion = "2.1.0";
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAiB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"1.50.0\" as const;\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAgB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"2.1.0\" as const;\n"]}

package/docs/generated/component-maturity.md

@@ -1,6 +1,6 @@
 # Component maturity and evidence manifest
 
-> Generated from `@hjmds/design-contracts` 1.50.0. Do not edit this file directly; run `pnpm contracts:sync`.
+> Generated from `@hjmds/design-contracts` 2.1.0. Do not edit this file directly; run `pnpm contracts:sync`.
 
 This document is the human-readable projection of the same catalog and Showcase manifest consumed by product CI.
 

package/docs/generated/renderer-evidence.json

@@ -1,11 +1,11 @@
 {
   "schemaVersion": 1,
-  "designSystemVersion": "1.50.0",
+  "designSystemVersion": "2.1.0",
   "source": "packages/design-contracts/docs/generated/showcase-manifest.json",
   "surfaces": {
     "web": {
       "packageName": "@hjmds/react",
-      "packageVersion": "1.50.0",
+      "packageVersion": "2.1.0",
       "activeComponents": 132,
       "claimedComponents": 132,
       "completeScenarioComponents": 131,
@@ -7114,7 +7114,7 @@
     },
     "native": {
       "packageName": "@hjmds/react-native",
-      "packageVersion": "1.50.0",
+      "packageVersion": "2.1.0",
       "activeComponents": 115,
       "claimedComponents": 115,
       "completeScenarioComponents": 112,

package/docs/generated/renderer-evidence.md

@@ -1,6 +1,6 @@
 # Renderer evidence coverage
 
-> Generated for HJM 1.50.0. Do not edit directly; run `pnpm evidence:sync`.
+> Generated for HJM 2.1.0. Do not edit directly; run `pnpm evidence:sync`.
 
 This projection joins the canonical surface maturity manifest with first-party renderer claims. Missing scenarios are explicit beta promotion debt; stable surfaces are blocked by CI until none remain.
 

package/docs/generated/showcase-manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "designSystemVersion": "1.50.0",
+  "designSystemVersion": "2.1.0",
   "packageName": "@hjmds/design-contracts",
   "components": [
     {
@@ -4295,7 +4295,8 @@
       "extensions": [
         "GridReveal",
         "ImageViewer",
-        "ImageViewerTrigger"
+        "ImageViewerTrigger",
+        "CircularPhotoCropper"
       ],
       "category": "data-display",
       "platform": "shared",

package/docs/tag.md

@@ -4,7 +4,7 @@
 `2026 시즌` — 에 일관된 이름과 톤을 붙입니다. 이 라벨은 누를 수 없고, 선택되지도 않고,
 지워지지도 않습니다.
 
-**일반화한 계약.** 필수 `label`과 선택적 `tone`만 받는 표현 계약입니다(Statistic처럼
+**일반화한 계약.** 필수 `label`과 선택적 `tone`·`variant`를 받는 표현 계약입니다(Statistic처럼
 제품이 완성한 문자열을 받습니다). id, collection 멤버십, 선택 state는 없습니다 — Tag는
 Collection 기본 계약의 대상이 아니라 낱개 표시 단위입니다.
 
@@ -28,9 +28,10 @@ Notice/Badge의 역할이고, Tag는 사실을 나열할 뿐 위협하지 않습
 - `closable`(지울 수 있는 태그)은 이 계약에 **없습니다**. 태그를 지우는 것은 선택 해제이고,
   선택 해제는 Chip의 `selected` 축이 이미 소유한 문제입니다. Tag에 별도의 dismiss 축을
   추가하면 같은 "선택 해제"를 두 컴포넌트가 서로 다른 이름으로 계약하게 됩니다.
-- 모양도 다릅니다. `chipRecipe`와 `badgeRecipe`는 `radius: "full"`(pill)을 쓰지만
-  `tagRecipe`는 `radius: "sm"`의 사각형입니다. 정적 라벨을 pill로 그리면 누를 수 있다는
-  암묵적 신호를 주므로, 형태 자체로도 상호작용 가능성을 부정합니다.
+- 기본은 `variant="outline"`인 배경 없는 capsule(`full`)입니다.
+  작은 사각형은 명시적인 `variant="default"`로 유지합니다.
+  2026-10-29 선수 프로필 정보 시안 승인에 따라 선택 UI와 분리된 읽기 전용 형태로 추가했습니다.
+  형태와 무관하게 버튼 role·선택 상태·포커스·활성화 이벤트를 추가하지 않습니다.
 - 야잘알의 `AppBadge`가 이 역할(포지션·등급·시즌 라벨)을 수행한 제품 근거에서 Tag 계약을
   추출했습니다. Web/RN 공식 renderer는 이 계약을 직접 소비하며, 제품의 기존 이름을 Tag로
   바꾸는 일 자체는 소비 앱의 후속 migration입니다.
@@ -42,7 +43,7 @@ keyboard, focus, accessibilityState 계약이 필요 없습니다 — 접근성
 노드 하나로 충분합니다. 여러 Tag를 한 줄에 나열할 때 간격 조합은 나중에 Stack/Inline
 recipe가 안정화되면 그쪽에 위임하고, 이 계약에는 넣지 않습니다.
 
-기본 높이는 20px이지만 고정 높이가 아닙니다. Dynamic Type에서 한 줄 라벨의 고유 높이만큼
+기본 최소 높이는 32px이며 고정 높이가 아닙니다. Dynamic Type에서 한 줄 라벨의 고유 높이만큼
 늘어나며, renderer는 라벨을 고정 프레임 안에서 자르지 않습니다.
 
 ## 현재 maturity와 남은 증거
@@ -54,3 +55,11 @@ scenario matrix가 dark(라이트 전용 색 누수 없음), 2배 글자, RTL,
 
 stable은 전체 환경 인증을 뜻하지 않습니다. screen reader 실사용과 실제 device screenshot은
 제품 기기 QA의 범위입니다.
+
+## Outline 표현
+
+`variant`는 `default | outline`, 기본값은 `outline`입니다.
+2026-10-29 사용자가 승인한 테두리형을 기본으로 지정했습니다. Outline은 투명 배경·1px 테두리·
+`radius.full`, 최소 높이 32, 좌우 10·상하 6, caption regular(400)입니다.
+neutral 글자는 `content.primary`, 다른 tone은 기존 글자·테두리 의미를 유지합니다.
+흰 배경 전용 색을 하드코딩하지 않고 Provider의 light/dark 및 제품 팔레트를 따릅니다.

package/docs/theme-palette.md

@@ -122,13 +122,15 @@ SegmentedControl의 `selectionTone="brand"`와 solid 탭은 브랜드 강조를
 
 | 의미 | 색상 기준 | 해당 공개 표면 |
 | --- | --- | --- |
-| 지속되는 일반 선택 면 | `selection.background`/`selection.content`, 경계가 필요하면 `selection.border` | Chip·칩 그룹, neutral SegmentedControl, TimePicker, filled Tabs, capsule BottomNavigation, ReactionPicker, ToggleGroup, selected Button·IconButton, 선택 Card·ListRow·Select·Combobox·Menu·Tree·TransferList·DataTable 행 |
+| 지속되는 일반 선택 면 | `selection.background`/`selection.content`, 경계가 필요하면 `selection.border` | Chip·칩 그룹, neutral SegmentedControl, TimePicker, filled Tabs, capsule BottomNavigation, ReactionPicker, ToggleGroup, 선택 Card·ListRow·Select·Combobox·Menu·Tree·TransferList·DataTable 행 |
 | 현재 조작 위치 | 기존 focus/hover/pressed 역할. 확정 선택과 합치지 않음 | CommandPalette·Mentions·TagsInput 제안의 active descendant, Select·Combobox의 active 항목, 포커스 링 |
 | 진한 브랜드 면 | `primary`/`onPrimary` | `Tabs indicator="solid"`, `SegmentedControl` 기본 `selectionTone="brand"`, `BottomNavigation selection="tile"`, prominent destination |
 | 작은 값 표시·현재 위치 표시 | 기존 전용 체크·점·밑줄·테두리 계약 | Checkbox·Radio의 glyph, Switch on, Calendar 날짜 원, underline/text Tabs, 일반 BottomNavigation 아이콘·글자, Pagination·Steps·Anchor·Carousel 위치 표시, 읽기 전용 반응 요약 |
 | 브랜드·장식·업무 강조 | 기존 브랜드/상태 역할 | ChatMessage outgoing, 폴더 그림, liquid toast, 표의 `highlighted` 업무 강조, 브랜드 Surface/Badge, 오류·성공 등 상태 |
 | 미디어 위 선택 증거 | 읽을 수 있는 전용 링·스크림 유지 | ImageChoice·MediaSelection. 회색 면으로 사진을 덮지 않음 |
 
+행동 토글인 Button·IconButton과 현재 경로인 IconButtonLink는 2026-10-28 사용자 지시로 이 선택 면을 적용하지 않는다. 선택 전후 원래 tone 배경·테두리를 유지하며 전경 표현·채운 glyph와 접근성 상태로 선택을 알린다. 스핀트의 꽃 반응 주변에 선택 배경이 중복으로 생긴 사례에 따른 변경이다. 선택 컴포넌트의 전용 상태 계약은 해당 컴포넌트 지침이 소유한다.
+
 ### 적용 규칙
 
 - 선택 토큰은 현재 theme과 product palette로 해석한다. 제품별 직접 색상 분기는 추가하지 않는다.

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

@@ -88,6 +88,7 @@ import { AuthScreenFooter, AuthScreenHero, AuthScreenLayout } from "@hjmds/react
 | `layoutStyle` | margin·width·flex·`alignSelf` | — | 바깥 배치 전용(Web·Native 모두) |
 | `initialFocus` | `first-input` · `none` | `first-input` | 페이지 진입 시 첫 유효 입력 또는 `initialFocusTarget` 칸에 한 번 포커스한다. 기본값·진입 한정 정책 변경은 1.33.0부터 제공. 진입 종료 뒤 단계 변경·입력 표시로 자동 포커스를 다시 시작하지 않으며 하단 시트 안에서는 자동 포커스하지 않는다. [진입 포커스](screen-layout.md#진입-포커스) |
 | Native `testID` | `string` | — | 본문 `ScrollView` 식별(머리 띠가 있어도 같은 `ScrollView`) |
+| Native `backdrop` | `ReactNode` | — | 미게시(checkout 개발). 스크롤 내용 맨 위 뒤에 깔리는 장식 장면(제품 하늘 띠 등). hero·main·footer와 **함께 스크롤**하고 터치·접근성에서 빠진다. 제품 노드는 내용 위 끝 기준 절대 위치로 놓으며 좌우 여백 밖까지 닿는다. 화면 뒤에 고정한 그림 위로 글자가 지나가지 않게 한다 |
 | Native `safeAreaBottom` | 0 이상의 유한수 | `0` | 화면이 닿는 창 아래 가장자리의 safe area(`useSafeAreaInsets().bottom`, 이미 아래를 들인 host 안이면 0). 아래 여백이 `max(paddingBlock, inset)` — `regular` max(40, inset), `compact` max(20, inset) — 으로 한 번만 들어간다(ScreenLayout과 같은 규칙, 합산 없음). 키보드가 열리면 paddingBlock만. 음수·무한대는 `RangeError` |
 | `AuthScreenHero` `title` · `eyebrow` · `description` · `mark` · `headingLevel` | 문자열 · `ReactNode` · `1`~`3` | `headingLevel` 1 | 제목은 필수이고 빈 문자열이면 `TypeError`. 밀도는 바깥 `AuthScreenLayout`을 따른다 |
 | `AuthScreenFooter` `links` · `notice` · `children` | 링크 배열(1개 이상) · `ReactNode` | — | 빈 링크 목록·빈 라벨은 `TypeError`(LS-04: 약관 링크는 로그인 전 같은 화면에 있어야 한다). `children`은 링크 아래 제품 내용 |
@@ -156,6 +157,7 @@ import { AuthScreenFooter, AuthScreenHero, AuthScreenLayout } from "@hjmds/react
 
 - `title`·`exit`를 쓰면 바깥에 얹던 TopBar·제품 헤더를 지운다. 둘 다 두면 머리가 두 줄이 된다. Native에서 host TopBar가 맡던 위 safe area(`safeAreaTop`)는 host의 SafeAreaView top으로 옮긴다.
 
+- Native에서 하늘 띠 같은 장식을 레이아웃 바깥(화면 뒤)에 고정하지 않는다. 내용이 넘쳐 스크롤되면 글자가 그림 위로 지나가 읽히지 않는다(2026-10-28 다에리 가입 단계). `backdrop`으로 넘긴다.
 - Native에서 아래 홈 인디케이터를 `SafeAreaView edges={['bottom']}`·`paddingBottom: insets.bottom` 래퍼로 들이지 말고 `safeAreaBottom`으로 넘긴다. 둘을 같이 주면 inset + paddingBlock이 다시 더해진다.
 - 1.28.0까지 Native는 iOS `contentInsetAdjustmentBehavior="automatic"`으로 위·아래 safe area를 iOS에서만 더했다. 1.28.1부터 위는 host, 아래는 `safeAreaBottom`이다. 위 safe area를 아무도 들이지 않던 화면은 host에서 TopBar `safeAreaTop`이나 SafeAreaView top으로 들인다.
 - Native는 자체로 키보드 스크롤 여백을 준다. 부모가 다시 keyboard avoidance를 하면 여백이 중복될 수 있으니

package/docs/usage/components/avatar.md

@@ -180,6 +180,10 @@ Avatar를 쓰지 못한 이유(이름 필수, Web 이미지 호스트 없음, 4
 일반 목록은 `ListRow.leadingAction`, 카드 작성자는 `Card.leadingAction`, 대화 목록은 `ConversationRow.avatarAction` + `renderBody`, 참여자는 `ChatRoomMembers.memberProfile`이다.
 같은 사진에 `Avatar.action`과 상위 `avatarAction`을 함께 넣지 않는다. 본문 링크/버튼과 독립 프로필 버튼은 형제다.
 
+사진 옆에 따로 보이는 회원 닉네임도 같은 프로필로 이동한다(2026-10-29 사용자 지시: Spint 댓글에서 닉네임을 눌러도 반응이 없었다).
+댓글 `CommentThreadRow`는 `avatarAction`이 있으면 작성자 이름도 같은 행동·접근성 이름의 글자 버튼으로 그린다(Web `hjm-identity-name-action`,
+Native 중첩 `Text` press). 제품은 추가 prop 없이 `avatarAction`만 공급한다. 행 전체가 대화방·알림 목적지인 글자 안의 이름은 버튼을 중첩하지 않는다.
+
 회원 식별자가 없는 장식·방 사진을 회원 프로필로 연결하지 않는다. 명시적인 사진 편집·공유 대상 선택은 원래 작업을 유지한다.
 
 내 프로필 화면의 내 사진은 예외로 그 자체가 사진 변경 버튼이다(2026-10-25 사용자 지시). `action={{label: t("photo.change"), onPress: openPhotoPicker}}`를 연결하고 사진 고르기·자르기·업로드는 제품이 소유한다. 같은 화면에 중복 "사진 바꾸기" 버튼을 두지 않는다.
@@ -192,3 +196,12 @@ Avatar를 쓰지 못한 이유(이름 필수, Web 이미지 호스트 없음, 4
 사용자 요청으로 Web·Native 기본값은 `size="large"`(48), `shape="circle"`이다. 프로필과 일반 회원 목록에도 48을 쓰고 댓글·채팅 등 촘촘한 목록의 명시적인 작은 단계는 유지한다. 제품별 사진·이니셜·이모지·동물 그림도 같은 회원 프레임을 따른다. 콘텐츠 썸네일·앱 아이콘의 모양이나 크기에는 적용하지 않는다.
 
 기본 `frame="outlined"`는 `border.control` 50% alpha, 1px의 원형 윤곽이다. 2026-10-25 번뚝 이모지 아바타에서 기존 선은 흐리고 2px 불투명 선은 진하다는 피드백을 거쳐 1px·50%로 조정했으며, 사용자가 이 값을 디자인 시스템 기본값으로 지정했다. 지름은 테두리 포함이고 Web·Native에 동일하다. 미게시 개발 중 추가했던 `strong` 옵션은 기본값과 합쳐 제거했다. 제품에서 별도 frame을 지정할 필요가 없다.
+
+### 그림 전체 표시 (2026-10-28)
+
+스핀트에서 직접 그린 정사각형 그림의 모서리가 원형 프로필에서 잘린 사례로 `imageFit="contain"`을 추가했다. 기본 `cover`는 기존 사진 채움을 유지한다. `contain`은 사진·그림 전체를 프레임 안에 넣고 여백을 남긴다. 공통 recipe의 `1 / √2` 비율로 정사각형 대각선까지 원 안에 들어오며 이미지의 모서리를 다시 둥글게 자르지 않는다. Web·Native와 기존 저장 이미지에 동일하게 적용한다. Native `renderImage`의 `size`에는 실제 이미지 영역 크기가 전달된다.
+
+**회원 프로필 사진은 원을 꽉 채운다(`cover`, 기본값) — 2026-10-29 사용자 지시.** `contain`은 작은 원 안에 네모난 사진이 작게 들어가고
+빈 테두리가 남아 사진처럼 보이지 않았다(Spint). 사진 전체는 프로필의 "사진 크게 보기"(`ProfileSummary.avatarView` + `ImageViewer`)에서
+본다. 회원 아바타·댓글·채팅·알림·목록의 사진에 `contain`을 쓰지 않는다. `contain`은 잘리면 뜻이 바뀌는 비사진 그림(로고·스티커·도감
+일러스트)에만 쓰고 그 이유를 사용처 주석에 남긴다.

package/docs/usage/components/button.md

@@ -131,7 +131,7 @@ Web·Native와 라이트·다크 테마에 동일하게 적용한다.
   Native에서 `style`·`labelStyle`을 넘기면 실행 중 `TypeError`가 난다.
 - 색은 tone과 제품 테마 토큰으로 바꾼다. 버튼마다 브랜드 색을 하드코딩하지 않는다.
 - 진행 중 상태는 `loading`으로 표시하고 같은 자리에 별도 Spinner를 겹치지 않는다. children을 빈 문자열이나 다른 길이의 진행 문구로 바꾸지 않는다. 렌더러가 문구·아이콘을 숨긴 자리에 중앙 스피너만 표시하고 기존 크기·접근성 이름을 유지한다.
-- "한 화면 `primary` 하나"의 예외는 다음과 같다. `selected`를 준 버튼은 tone과 관계없이 `buttonRecipe.states.selected`(배경 `bg`, 글자 `contentBrand`, 선택 테두리 없음)로 칠해져 primary 채움이 아니므로 세지 않고(Web `.hjm-button[data-selected="true"]`, Native `internal/recipe-button.tsx`, 작품 카드의 저장 토글), Sheet·Dialog 안의 행동은 그 표면 안에서 primary 하나를 센다([Sheet](sheet.md) `footer`, 작품 탐색·랜딩 스토리의 시트).
+- `selected`도 원래 tone의 배경을 유지하므로 `primary` 버튼이면 주 행동 개수에 포함한다. Sheet·Dialog 안의 행동은 그 표면 안에서 primary 하나를 센다([Sheet](sheet.md) `footer`).
 
 - `selected` 버튼 여러 개를 나란히 두어 하나 고르기·여러 개 고르기·켜고 끄기를 흉내 내지 않는다. 그 의도는 [선택 조립 규칙](../SELECTION.md#조립-규칙필수)의 SegmentedControl·RadioGroup·Chip·Switch를 쓴다.
 
@@ -150,8 +150,7 @@ Web·Native와 라이트·다크 테마에 동일하게 적용한다.
 
 - footer 순서를 모든 본문 행동에 강제하지 않는다. 시간 선택처럼 주 행동 다음에 초기화가 오는 구성과 AlertDialog의 좁은 폭 순서는 각각 명시된 구성 계약을 따른다.
 
-`selected`에는 선택 테두리를 추가하지 않는다. `selected` 접근성 상태와
-contentBrand 글자·아이콘 색은 유지하며 키보드 focus outline은 선택과 별도로 유지한다.
+2026-10-28 사용자 지시: `selected`로 배경색을 바꾸지 않는다. 원래 tone의 배경·테두리를 유지하고 선택 테두리를 추가하지 않는다. ghost는 투명하게 남으며 primary·danger의 채움과 역상 글자색도 유지한다. 선택은 전경색·채운 아이콘 또는 상태 라벨로 표현하며 `aria-pressed`/Native 접근성 상태와 키보드 focus outline은 유지한다. 꽃 반응에 선택 면이 중복으로 생긴 사례 때문에 기존 선택 배경 지침을 대체했다. IconButton도 같은 규칙을 쓴다.
 
 ## 저장 확정 라벨과 프레임 예약 (npm 1.21.0 · 2026-10-15)
 
@@ -237,3 +236,5 @@ import { ButtonLink } from "@hjmds/react/actions";
 2026-10-20 다에리의 지도/장소 이동에서 초안 보호·오프라인 차단을 유지하기 위해 추가했다.
 전달받은 anchor props와 `ref`를 실제 링크에 그대로 연결하며, `href`가 없으면 내부 라우팅도 하지 않는다.
 버튼의 색/크기/초점/비활성·수정키/새 탭 의미는 HJM이 소유하고 제품은 목적지·이동 처리를 연결한다.
+
+선택 recipe 직접 소비의 변경: `states.selected`는 전경만 소유하며 배경·테두리는 `tones[tone]`에서 읽는다. 필드 제거는 다음 contracts major 게시 대상으로 기록하며 컴포넌트의 `selected` 사용법은 동일하다.

package/docs/usage/components/chart.md

@@ -116,6 +116,7 @@ import { BarChart, Sparkline } from "@hjmds/react-native/chart";
 | `focusIndex` | `number \| null` | — | 제어 포커스 |
 | `defaultFocusIndex` | `number \| null` | 마지막 관측 index | 비제어 시작 포커스 |
 | `onFocusChange` | `(index: number \| null, detail: { scrubbing: boolean }) => void` | — | 스크럽 중 `scrubbing: true`, 손을 떼면 `false` |
+| `showFocusLabel` | `boolean` | `false` | LineChart·BarChart에서 누름을 놓은 뒤에도 선택한 점의 말풍선 유지 (2026-10-29 기록 차트 요청) |
 | `cursorLabel` | `(index: number) => string` | `categories[index]` | 스크럽 중 커서 위 말풍선 |
 
 ### BarChart

package/docs/usage/components/comment-thread-row.md

@@ -65,10 +65,12 @@ import { CommentThreadRow } from "@hjmds/react-native/screen-flows";
 | `id`·`parentId`·`author`·`body`·`timeLabel`·`likeCountLabel`·`likeIcon`·`likeLabel` | 필수 | `parentId`가 `null`이면 최상위 댓글 |
 | `bodyText` | 없음 | 주면 `author`와 본문을 한 문장으로, 시각은 아래 행동 줄로 옮긴다 |
 | `timePlacement` | `"auto"` | 미게시. `"auto"`는 `bodyText`가 없으면 시각을 작성자 옆에 둔다. `"actions"`는 글이 아닌 본문(꽃 도장·카드)에서도 시각을 본문 아래 반응 요약·답글과 같은 줄 맨 앞으로 옮긴다 |
+| `textActions` | 없음 | 미게시. 답글 줄의 답글 뒤에 붙는 제품 문구 행동 `{ id, label, onPress, disabled? }[]`. 답글과 같은 muted caption 문구 버튼이며 순서대로 놓인다(예: 번역 댓글의 "원본 보기"/"번역 보기"). 문구·상태는 제품이 소유한다 |
 | `panel` | 없음 | 미게시. 댓글별 인라인 패널(수정·신고·차단 양식). 답글 줄 아래, 길게 누르기 대상 밖에 `panelGap` 8 간격으로 놓인다. 열림 상태·초점·제출·닫기는 제품이 소유한다 |
 | `mediaAlbum` | 없음 | 미게시. 한 장씩 넘기는 사진 묶음 `{ count, renderPage(index), pageLabel(index, count), previousLabel, nextLabel, aspectRatio?, onPress?(index), index?·onIndexChange?·defaultIndex? }`. `renderPage`는 화면에 보이는 장에만 호출되어 제품이 그 사진만 조회·디코딩한다. 불러오는 중·실패 장은 `MediaAlbumPageStatus`(`@hjmds/react(-native)/screens`, [ChatMessage](chat-message.md#축과-기본값))로 그려 안쪽 내용이 낭독기에 닿게 한다. `media`와 함께 주면 `TypeError`. 본문 아래, 길게 누르기 대상 밖에 놓인다 |
 | `authorBadge` | 없음 | 미게시. 닉네임 바로 뒤, 같은 줄에 놓는 제품 배지. 간격 `spacing.xxs` 4, 좁은 폭에서는 줄바꿈한다. `bodyText` 모드에서도 작성자·배지·본문 순서로 배치한다. 배지 문구·노출 조건은 제품이 소유한다 |
 | `avatar` | 없음 | 제품 아바타. 최상위 32·답글 24 폭 칸에 둔다 |
+| `avatarAction` | 없음 | 회원 프로필 이동 `{ label, onPress, disabled? }`. 사진과 **작성자 이름**이 같은 행동을 쓴다(이름은 2026-10-29부터, [Avatar 지침](avatar.md#회원-프로필-이동-2026-10-25)) |
 | `canReply` | `parentId === null` | 답글 행동 표시 여부 |
 | `replyDisabled` | false | 답글 행동 비활성 |
 | `likeAction`·`actions` | 없음 | 기본 좋아요 버튼 대체·옆에 추가 |
@@ -92,7 +94,7 @@ import { CommentThreadRow } from "@hjmds/react-native/screen-flows";
 
 - 가상화 host에서 행 사이 간격(`commentThreadRecipe.rowGap`)과 답글 들여쓰기(`replyIndent`)를 직접 줄 때도 recipe 값을 쓴다. 제품 숫자로 다시 정하지 않는다.
 - 답글 펼치기·정렬·권한·좋아요 저장은 제품이 소유한다. 행은 콜백만 호출한다.
-- 행 안에 두 번째 레이아웃을 만들지 말고 `actions`·`likeAction`·`media`·`mediaAlbum`·`panel` 슬롯으로 추가한다. 시각·답글 줄을 본문 노드 안에 다시 그리지 말고 `timePlacement: "actions"`와 `canReply`를 쓴다.
+- 행 안에 두 번째 레이아웃을 만들지 말고 `actions`·`likeAction`·`media`·`mediaAlbum`·`panel` 슬롯으로 추가한다. 시각·답글 줄을 본문 노드 안에 다시 그리지 말고 `timePlacement: "actions"`와 `canReply`를 쓴다. 답글 옆 문구 행동도 본문에 버튼을 두지 말고 `textActions`로 준다.
 - `mediaAlbum`의 사진 조회·권한 확인·캐시 수명은 제품이 `renderPage` 안에서 소유한다. HJM은 보이는 장만 마운트하고 넘김 상태를 행 안에 둔다(제어형은 `index`+`onIndexChange`).
 
 ## 상태와 상호작용
@@ -106,6 +108,7 @@ import { CommentThreadRow } from "@hjmds/react-native/screen-flows";
 - 2026-10-20 Spint의 “나” 배지가 본문 첫 줄을 차지하던 문제를 해결하기 위해 `authorBadge` 슬롯을 추가했다. 작성자에 붙는 표시는 HJM이 닉네임 옆에 배치하고 제품은 배지 내용만 공급한다. 개발 소스 변경이며 미게시다.
 
 - 2026-10-20 Spint 댓글이 촘촘하다는 사용자 피드백에 따라 공통 행 사이 간격을 12→20, 내부 줄 사이 간격을 2→4로 조정했다. Web·Native가 같은 recipe를 사용한다. 개발 소스 변경이며 미게시다.
+- `textActions`: 2026-10-29 Spint 댓글 번역. 사용자가 Instagram처럼 "답글 달기" 옆에 "원본 보기"/"번역 보기"를 두라고 요청했는데, 답글 줄에 제품 행동 자리가 없어 본문 아래 별도 줄로 그리고 있었다.
 - `timePlacement`·`panel`·`mediaAlbum`: 2026-10-18 HJM 1.30.0 채택 감사. Spint는 꽃 도장 본문에서 시각을 답글 줄에 두려고 시각·답글 행을 본문 안에 다시 그렸고, Utilverse는 수정·신고·차단 양식을 본문 노드 안(길게 누르기 대상 안)에 넣었으며, 사진 묶음은 선택한 장만 조회하는 제품 앨범을 따로 만들었다.
 
 ## 플랫폼 차이

package/docs/usage/components/date-range-picker.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-25
+- 검토일: 2026-10-28
 - 근거: [DateRange](../../date-range.md), 격자는 [Calendar](../../calendar.md), 규칙 함수 `src/date-range.ts`
 - 스토리북: `배포/컴포넌트/입력/기간 선택`
 
@@ -20,7 +20,7 @@
 | --- | --- |
 | 날짜 하나 | [DatePicker](date-picker.md) |
 | 달력을 보여 주기만 하거나 날짜 하나를 인라인으로 고름 | [Calendar](calendar.md) |
-| 접힌 필드에서 눌러 여는 구간 선택 | 없음. 필요하면 [Sheet](sheet.md)·[Popover](popover.md) 안에 제품이 합성한다 |
+| 오버레이에서 고르고 적용 버튼으로 확정 | [Sheet](sheet.md) 안에 합성하고 `footer`에 `BottomCTA`를 둔다. 본문 안에서 접어 두기만 하면 `collapsible`을 쓴다 |
 
 ## 공개 이름과 import
 
@@ -80,7 +80,8 @@ import { DateRangePicker } from "@hjmds/react-native/date-range";
 | `previousMonth` · `nextMonth` | `{ month: string, label: string }` | — | 없으면 이동 버튼이 없다 |
 | `renderCellContent` | `(date: string) => ReactNode` | — | 날짜 아래 보조 표시. 넘길 때만 행에 보조 줄이 생긴다 |
 | `summary` | `{ startLabel, endLabel, placeholder, formatDate(date) }` | — | 격자 위 시작일·종료일 칸. 지금 고르는 쪽(`resolveDateRangeActiveEdge`: 비었으면 시작, 고르는 중이면 끝, 완성되면 없음)을 테두리로 표시한다. 문구는 i18n, 날짜 형식은 제품 소유 |
-| `presets` | `{ id, label, length: { days } \| { months } }[]` | — | 요약 아래 단일 선택 Chip 줄(최근 7일·1개월 등). 모두 `grid.todayDate`로 끝나고(`resolveDateRangePreset`), 값이 그 구간과 같을 때만 선택으로 보인다. 누르면 끝 달로 `onFocusedMonthChange(month, "jump")`를 요청한다 |
+| `presets` | `{ id, label, length: { days } \| { months } \| { all: true } }[]` | — | 요약 아래 단일 선택 Chip 줄. `days`·`months`는 `grid.todayDate`로 끝나고 `all`은 빈 구간(날짜 제한 없음)이다(`resolveDateRangePreset`). 값이 그 구간과 같을 때만 선택으로 보인다. 누르면 끝 달로 `onFocusedMonthChange(month, "jump")`를 요청한다(`all` 제외). 기간 필터의 표준 칩은 `dateRangeRecipe.presets.standard`(1일·1주일·1개월·3개월·전체)이고 문구는 제품 i18n이다 |
+| `collapsible` | `{ expanded?, defaultExpanded?, onExpandedChange? }` | 없음(늘 펼침) | 주면 격자만 `summary` 뒤로 접고 `presets`는 계속 보인다. `summary`가 필수이고(없으면 `TypeError`) 그 줄이 펼침 버튼(`aria-expanded`·Native `expanded` 상태, 끝에 아래/위 화살표)이 된다. 접힌 채 시작하고(`defaultExpanded` 기본 `false`), 프리셋을 누르거나 날짜 탭으로 구간이 완성되면 다시 접는다(`resolveDateRangeExpandedAfterSelection`) |
 | Web `layoutStyle` | 배치 전용 style | — | 루트 배치 |
 
 ## 배치
@@ -98,6 +99,7 @@ import { DateRangePicker } from "@hjmds/react-native/date-range";
 | 색 | 띠 `primary` 15% tint(두 끝과 같은 브랜드색. 처음 쓴 `surfaceSelected`는 기본 팔레트에서 #f0f1f3 회색이라 구간이 거의 보이지 않았다), 두 끝 Calendar 선택 원(`action.brand`). 칸 바탕 `surface.sunken`, 다음에 고를 칸 테두리 2 `action.brand`, 빈 값 `content.tertiary` | `dateRangeRecipe` |
 | 순서·정렬 | 오버레이 없이 본문(폼·필터 영역·[Section](section.md)) 안에 격자를 펼쳐 둔다. 위에서 `summary`(시작일 · 종료일) → `presets` 칩 줄 → 월 머리(이전 · 월 이름 · 다음) → 요일 → 날짜 격자. 제출 행동은 격자 **아래**에 둔다. 시트에서는 `footer`에 `BottomCTA` [보조(전체 날짜 등)][주(적용)] 한 줄로 두고 시트 높이는 `auto`로 맞춘다. `summary`를 쓰면 별도 안내·결과 문장을 두지 않는다. 제출 버튼은 `isCompleteDateRange(value)`가 참일 때만 활성이다 | 같은 파일 |
 | 고정·스크롤 | 본문과 함께 스크롤한다(오버레이 없음) | — |
+| 접기 | `collapsible`이면 요약 두 칸 뒤에 화살표 열(`dateRangeRecipe.toggle`: 아이콘 `glyph.sm` 20, 칸과 간격 `spacing.xs` 8)이 붙고 요약 줄 전체가 버튼이다. 접히면 요약과 프리셋 칩 줄만 남고 격자는 그리지 않는다. 검색 필드가 있으면 그 아래에 요약 → 칩 → (펼쳤을 때) 격자 순서로 둔다 | `dateRangeRecipe.toggle`, `.hjm-date-range__summary[data-toggle]` |
 | 좁은 폭·큰 글자 | Web 격자 최소 폭 308보다 좁은 컨테이너에 두지 않는다 | `packages/react/src/styles.css` `.hjm-calendar__grid` |
 
 ## 꼭 지킬 것
@@ -107,6 +109,10 @@ import { DateRangePicker } from "@hjmds/react-native/date-range";
 - `rangeLabels`와 셀 이름(`composeAccessibleName`)은 i18n 키로 만든다. 구간 위치 접미사는 컴포넌트가
   셀 이름 뒤에 `, `로 붙인다.
 - 달을 넘기면 제품이 새 달의 `cells`와 `monthLabel`을 다시 만들어 넘긴다.
+- 필터처럼 고른 기간을 바로 반영하는 자리에서는 `collapsible`과 표준 프리셋(1일·1주일·1개월·3개월·전체)을 쓰고,
+  빈 값(전체)을 기본으로 둔다. [전체·오늘·기간 지정] 같은 별도 탭을 위에 겹쳐 두지 않는다. 프리셋과 같은 선택을 두 번 한다.
+  2026-10-28 사용자 요청: 다에리 만난 동물 필터에서 기간을 고른 뒤에도 달력이 늘 펼쳐져 목록을 밀어냈고, 탭과 프리셋이 겹쳤다.
+- 적용 버튼이 있는 시트에서는 `all` 칩 대신 `BottomCTA` 보조 행동(전체 날짜)을 둔다. 적용 버튼은 완성된 구간에서만 켜진다.
 
 ## 플랫폼 차이
 

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

@@ -80,14 +80,13 @@ import { NotificationBell } from "@hjmds/react-native/notification-bell";
 ### 아이콘 링크 — `IconButtonLink` (2026-10-23, 개발 소스·미게시)
 
 Button에 대한 ButtonLink처럼 IconButton 틀(`tone`·`size`·`shape`·`edge`·`hitSlop`·`layoutStyle`)을 이동 링크에 쓴다.
-토글·로딩·변경 행동은 IconButton에 남는다. `current`는 지금 보고 있는 화면의 진입점이며 선택된 IconButton과 같은 면
-(`iconButtonRecipe.states.selected`)으로 칠하고 Web `aria-current="page"`, Native `accessibilityState.selected`로 알린다.
+토글·로딩·변경 행동은 IconButton에 남는다. `current`는 지금 보고 있는 화면의 진입점이며 선택된 IconButton과 같이 기존 tone의 배경을 유지하고 Web `aria-current="page"`, Native `accessibilityState.selected`로 알린다.
 
 | prop | Web | Native | 기본값 |
 | --- | --- | --- | --- |
 | 목적지 | `href: string` | `destination: LinkDestination` | 필수 |
 | 이름 | `label: string`(접근성 이름, 빈 값이면 `TypeError`) | 같음 | 필수 |
-| `current` | `boolean` → `aria-current="page"` + 선택 면 | `boolean` → `selected` + 선택 면 | `false` |
+| `current` | `boolean` → `aria-current="page"` + 기존 배경 유지 | `boolean` → `selected` + 기존 배경 유지 | `false` |
 | `disabled` | `href`를 지우고 클릭·가운데 클릭을 막는다(ButtonLink와 같다) | 누름을 막는다 | `false` |
 | router 연결 | `renderAnchor(props)` — `ref`·`href`·이름·`aria-current`·차단 핸들러가 담긴 props를 자기 링크에 펼친다 | `onNavigate(destination)` 또는 `renderLink(props)`(TopBarAction `intent="link"`와 같다). 둘 다 없으면 `TypeError` | — |
 
@@ -124,7 +123,7 @@ Client Component에서 연결한다.
 | `size` | `small` 36 · `medium` 44 · `large` 52 | `medium` | `small`은 터치 여백 4 추가. 아이콘 크기는 각각 `sm`·`md`·`lg` |
 | `shape` | `rounded` · `circle` | `rounded` | — |
 | `elevation` | `none` · `raised` · `floating` · `overlay` | `none` | 떠 있는 컨트롤(번뚝 Dock 가운데 버튼)의 그림자 토큰 단계(`iconButtonRecipe.elevation`). `primary`·`secondary`·`danger`만 받고 `ghost`에 주면 `TypeError`. Web은 `--hjm-shadow-<단계>`, Native는 iOS 그림자 + Android elevation. `IconButtonLink`에는 없다(미게시, 2026-10-23) |
-| `selected` | `true` · `false` | — | 주면 토글이 된다(Web `aria-pressed`, Native 접근성 state) |
+| `selected` | `true` · `false` | — | 주면 토글이 된다(Web `aria-pressed`, Native 접근성 state). 선택 전후 tone 배경은 유지한다 |
 | `edge` | `start` · `end` · `both` | — | 버튼이 놓인 컨테이너 가장자리(논리 방향, RTL에서 뒤집힘). `ghost`면 터치 영역은 그대로 두고 그 쪽으로 (보이는 지름 − 아이콘 칸) / 2만큼 내민다(`medium` 10, `small` 8, `large` 12, `resolveIconButtonEdgeOverhang`). 테두리·배경이 있는 tone은 틀이 정렬 기준이라 움직이지 않는다 |
 | `loading` | `true` · `false` | — | 누름을 막고 스피너로 바꾼다. Native는 기본으로 포커스를 유지한다(`disableWhileLoading`으로만 옛 동작) |
 | `loading` 중 `renderLoadingIndicator`(Native) | `(props: { color: string; size: "small" }) => ReactNode` | 기본 스피너 | 스피너를 바꿀 때만 |
@@ -187,8 +186,7 @@ TopBar
   `tone="inverse"`를 준다. 다른 아이콘 라이브러리의 컴포넌트를 직접 넣으면(Native) 색을 제품이 넘겨야 한다.
 - Native `IconButton`의 `style`은 제거되었다. 배치는 `layoutStyle`, 외형은 `tone`·`size`·`shape`로 지정한다.
 
-2026-10-10 사용자 요청: Button과 같은 선택 표현을 쓴다. 선택은 bg 바탕·contentBrand 아이콘으로
-표시하고 추가 선택 테두리는 없다. aria-pressed/Native selected와 키보드 focus outline은 유지한다.
+2026-10-28 사용자 지시: **선택해도 배경색은 바꾸지 않는다.** Button·IconButton·현재 경로인 IconButtonLink는 원래 tone의 배경과 테두리를 유지한다. ghost는 선택 후에도 투명하며 primary·danger는 원래 채움과 대비되는 글자색을 유지한다. 선택은 글자·아이콘의 전경 표현 또는 채운 glyph로 표시한다. Web `aria-pressed`/`aria-current`, Native `accessibilityState.selected`와 키보드 focus outline을 유지한다. 스핀트 꽃 반응 주변에 선택 면이 중복으로 생긴 사례가 계기이며 2026-10-10의 선택 배경 지침을 대체한다. 제품별 접근성 상태 우회나 배경 덮어쓰기를 추가하지 않고 `selected`를 그대로 쓴다.
 
 ## 근거
 
@@ -199,3 +197,5 @@ TopBar
   컴포넌트마다 오프셋을 따로 두지 않고 이 한 규칙과 계약 값으로 맞췄다. Toast 닫기(같은 날 `toastRecipe.close.inlineOverhang`)와 같은 식이다.
 - 도구성 행동은 IconButton: 2026-10-17 사용자 지시 — '나의 기록' 헤더의 새로고침·새 기록 글자 버튼.
 - 선택 표현: 2026-10-10 사용자 요청 — Button과 같은 선택 표현을 쓴다.
+
+공개 recipe 직접 소비 시 `states.selected.background`·`border` 대신 `tones[tone].background`·`border`를 읽는다. 선택 recipe는 전경만 소유한다. 이 recipe 필드 제거는 다음 게시 시 contracts의 major 변경으로 기록하며 컴포넌트의 `selected`·`current` 사용법은 바꾸지 않는다.

package/docs/usage/components/image.md

@@ -66,6 +66,13 @@ import { ImageViewer } from "@hjmds/react-native/image-viewer";
   errorLabel={t("viewer.loadFailed")} retryLabel={t("common.retry")} />
 ```
 
+### 아래로 끌어 닫기 (기본 동작, 2026-10-30)
+
+다른 사진 뷰어처럼 확대하지 않은 사진을 아래로 끌면 `onClose`가 불린다(사용자 요청). 사진이 손가락을 따라
+내려오고 위아래 조작부가 흐려지며, 120pt 이상 끌거나 빠르게 내리면 닫힌다. 짧게 끌거나 위로 끌면 제자리로
+돌아온다. 확대한 사진은 끌면 이동하므로 닫히지 않는다. 제품은 따로 연결할 것이 없고, 닫기 버튼은 접근성 경로로 남는다.
+Web도 같은 기준으로 터치·펜으로 끌면 닫히고, 마우스는 닫기 버튼과 Esc를 쓴다. 사용자가 모든 앱·웹의 기본 지침으로 정했으므로 제품이 이 동작을 끄거나 자체 뷰어로 대체하지 않는다.
+
 ### 사진을 눌러 크게 보기 (`ImageViewerTrigger`, 2026-10-23)
 
 사진을 원시 `button`·`Pressable`로 감싸 뷰어를 열지 않는다(포트폴리오 사이트 `App.tsx`, Spint `MarkPhoto`·`ComposeScreen`이던 우회).

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

@@ -50,7 +50,7 @@ import { ProfileSummary } from '@hjmds/react-native/screen-flows';
 | badge | ReactNode | 없음 | 이름 옆 배지 |
 | nameActions | ReactNode | 없음 | 이름 행의 행동 |
 | nameEdit | `{label,onAction,disabled?,pending?}` | 없음 | 이름 옆 편집(연필) 아이콘 버튼. 내 프로필에서 닉네임 바꾸기를 연다(2026-10-25, 아래 절) |
-| stats | `{id,value,label,onPress?,disabled?}[]` | `[]` | 통계 수치. `onPress`가 있으면 버튼 |
+| stats | `{id,value,label,onPress?,disabled?}[]` | `[]` | 통계 수치. `onPress`가 있으면 버튼. 한 줄 최대 4칸(`profileSummaryRecipe.stats.maxPerRow`), 넘치면 다음 줄로 가고 마지막 줄도 같은 칸 폭이다 |
 | actionsLayout | `inline` · `stacked` · `equal` | `inline` | 가로 보조 행동은 inline 줄바꿈 행, 세로 전체 폭은 stacked, 같은 폭의 가로 행동은 equal(개발 소스) |
 | actions | ReactNode | 없음 | 수치 아래 행동 줄. [ProfileScreen](profile-screen.md) `editPlacement="summary"` 안에서는 그 화면의 `edit`이 이 줄 맨 앞에 `secondary` `small` 버튼(`profileSummaryRecipe.editAction`)으로 먼저 들어간다(1.31.0) |
 | children | ReactNode | 없음 | 하단 footer |
@@ -62,7 +62,7 @@ import { ProfileSummary } from '@hjmds/react-native/screen-flows';
 | 항목 | 값 | 근거 |
 | --- | --- | --- |
 | 크기 | 원형 아바타 프레임 48. ProfileScreen 수정 행동은 `Button` `secondary` `small` | `profileSummaryRecipe.avatarSize`·`editAction` |
-| 간격 | 수치 칸 사이 `spacing.md` 16, 값·라벨 사이 `spacing.xxs` 4, 행동 사이 `spacing.xs` 8. 영역 간격은 [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 |
@@ -103,6 +103,31 @@ Web의 텍스트/이모지 artwork는 원형72 프레임 안에서 glyph.xxl48
 - 남의 프로필에는 `nameEdit`를 넣지 않고, 사진은 회원 아바타 기준(확대·신고)을 따른다.
 - 제품이 ProfileSummary 대신 고유 머리를 그리는 경우에도 사진 = 사진 변경, 이름 = 닉네임 변경을 지킨다. 이름이 그림(예: Spint 내 정원의 나무 팻말)이면 연필을 따로 두지 않고 그 이름 그림 자체를 닉네임 변경 버튼으로 한다(2026-10-25 사용자 결정).
 
+### 프로필 사진 올리기: 원으로 맞추기 (2026-10-29)
+
+사용자 지시로 모든 앱·웹에서 프로필 사진을 올릴 때 **인스타그램처럼 원 안에서 위치와 크기를 맞춘다.** 시스템 정사각 자르기
+(`allowsEditing`, `aspect: [1, 1]`)는 원형 아바타와 모양이 달라 결과를 예측할 수 없었다.
+
+- 사진을 고른 뒤(시스템 편집 끔) `image-viewer` 하위 경로의 `CircularPhotoCropper`를 연다. 끌어서 옮기고 두 손가락(웹은 휠·두 손가락)으로
+  확대한다. 원 밖은 어둡게 가리고, 놓으면 원 안에 빈 곳이 생기지 않게 되돌아간다(`clampCircularPhotoCrop`, 최대 `maxZoom` 4배).
+- `onConfirm(crop)`은 원본 픽셀 정사각형 `{ originX, originY, width, height }`이다. 제품이 그 영역을 자르고(Native `expo-image-manipulator`
+  `crop`, Web canvas) 기존 크기 제한·압축으로 올린다. 자르기·업로드 중에는 `busy`로 두 버튼을 잠근다.
+- 정사각형을 저장하고 원 모양은 표시(`cover`)가 만든다. 원형 투명 PNG를 만들지 않는다.
+- 글 첨부 사진처럼 원형이 아닌 사진에는 쓰지 않는다.
+
+### 남의 프로필: 사진을 누르면 크게 보기 (2026-10-29)
+
+사용자 지시로 모든 앱·웹의 회원 프로필 화면에서 **그 회원의 프로필 사진을 누르면 사진이 크게 열린다.** Spint 회원 프로필에서
+사진을 눌러도 반응이 없었고, Utilverse만 제품 코드로 확대를 따로 만들어 앱마다 동작이 달랐다.
+
+- `avatarView={{ label: t("photo.view"), onPress: () => setViewerOpen(true) }}`를 준다. HJM이 아바타 틀 전체를 이미지 버튼
+  (`ImageViewerTrigger`, Native `imagebutton` 역할)으로 만들고 크기·원형·누름 상태를 소유한다.
+- 제품은 `image-viewer` 하위 경로의 `ImageViewer`를 연다(Native는 gesture-handler·zoom-toolkit 선택 의존성이 그 경로에만 있다).
+  사진 조회·권한·캐시는 `items`/`renderImage`로 공급한다. 사진 신고는 제품의 기존 경로를 유지하며 확대 화면에 둘 때는 `actions`를 쓴다.
+- 사진이 없어 이니셜·기본 얼굴만 있으면 `avatarView`를 넣지 않는다(크게 볼 사진이 없다).
+- 내 프로필은 사진 = 사진 변경(`Avatar.action`)이므로 `avatarView`를 넣지 않는다. 두 행동을 한 사진에 같이 넣지 않는다.
+- 제품 고유 머리(ProfileSummary 대신 그린 카드)도 같은 규칙을 `ImageViewerTrigger` + `ImageViewer`로 지킨다.
+
 ### 프로필 카드 틀 (2026-10-25)
 
 같은 날 사용자 지적: Utilverse 프로필 카드(평평한 `default`, radius `lg`)가 BurnTok 카드(`raised` 그림자, 테두리, radius `xl`)와

package/docs/usage/components/radio-group.md

@@ -163,3 +163,21 @@ Chip/직접 wrap으로 조립하고 있었다. `presentation="chips"`는 기존
 ### 그림 미리보기와 기본 선택 표시
 
 2026-10-20 다에리 반응 카드 이관: Web도 Native와 같이 `indicator="none"`으로 기본 원형 표시를 숨길 수 있다(로컬·미게시). `renderLabel`의 비상호작용 그림/문구와 공통 카드의 선택 색으로 상태를 나타낼 때 사용한다. 실제 radio·그룹 이름·checked·키보드 선택·비활성 계약은 유지되며, 기본값 `default`는 기존 원형 표시를 유지한다. 제품에서 카드 테두리/눌림/선택 틀을 다시 만들지 않는다.
+
+### 가로 스크롤 카드 (2026-10-28 개발 소스)
+
+오늘야구의 일자 카드 요청으로 `overflow="scroll"`을 Web/Native RadioGroup에 추가했다.
+`presentation="card"` 또는 `"chips"`에서 `grid` 없이 사용하며 기본 `wrap` 동작은 유지한다.
+공통 레일이 가로 스크롤과 선택 항목 노출을 소유한다. 제품은 `renderLabel`로 요일·일자 등
+콘텐츠만 공급한다. 비활성인 선택 날짜도 표시할 수 있다. 조회 실패를 비활성 날짜로 바꾸지 않는다.
+이 API는 아직 게시하지 않은 개발 소스 변경이다.
+
+### 선택 면의 브랜드 강조 (2026-10-29 개발 소스 · 미게시)
+
+`selectionTone="neutral" | "brand" | "brand-outline"`를 Web/Native에서 지정한다. 기본값은 `neutral`이다.
+오늘야구 날짜 카드의 선택일을 파란 배경·흰 글자로 강조해 달라는 요청이 계기다.
+`brand`는 테마의 `primary`/`onPrimary` 쌍을 사용하고 미선택 면은 기존 canvas를 유지한다(light는 흰색).
+라벨·설명과 Native `renderLabel` 안의 중립 Text는 선택 면의 글자색을 상속한다.
+브랜드색·상태색을 명시한 미리보기는 제품이 의미에 맞게 공급한다.
+
+같은 날 사용자 후속 요청으로 `brand-outline`은 선택 배경도 canvas(light 흰색)로 유지하고 테두리만 대표색 primary로 강조한다. 일반 글자색과 비활성 계약은 유지한다.

package/docs/usage/components/sheet.md

@@ -134,7 +134,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.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 동일). 본문도 같은 끌기로 닫는다(2026-10-27 사용자 결정, 미게시). 스크롤 본문은 이미 맨 위일 때 시작한 아래 끌기만 시트가 가져가고, 스크롤된 상태에서는 같은 동작이 먼저 내용을 위로 되돌린다. iOS는 UIScrollView가 JS 응답자 아래서도 스스로 끌기를 가져가므로 본문 맨 위의 당김(overscroll)으로 시트를 움직이고 UIKit 탄성 거리로 환산한 같은 임계값을 쓴다. Web 본문 끌기는 터치만 받고 마우스는 글자 선택을 위해 손잡이를 쓴다. 입력칸에서 시작한 끌기와 가로 끌기는 본문 안의 행동으로 남긴다 | `sheetRecipe.header`·`handle`, `.hjm-sheet__footer`, `.hjm-sheet__handle` |
+| 순서·정렬 | 손잡이(하단) → 머리(설명 + 닫기, 둘 다 없으면 그리지 않음) → 본문 → `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 동일). 본문도 같은 끌기로 닫는다(2026-10-27 사용자 결정, 미게시). 스크롤 본문은 이미 맨 위일 때 시작한 아래 끌기만 시트가 가져가고, 스크롤된 상태에서는 같은 동작이 먼저 내용을 위로 되돌린다. 스크롤하지 않는 본문 안에 들어간 목록 스크롤(시트 안 `SearchScreen embedded`)도 같은 규칙을 따른다. Native는 그 목록이 시트의 끌기 연결을 넘겨받아 목록 위치로 판단한다(2026-10-30 Spint 도시 시트에서 스크롤된 목록을 되돌리면 시트도 함께 내려가던 결함, 미게시). iOS는 UIScrollView가 JS 응답자 아래서도 스스로 끌기를 가져가므로 본문 맨 위의 당김(overscroll)으로 시트를 움직이고 UIKit 탄성 거리로 환산한 같은 임계값을 쓴다. Web 본문 끌기는 터치만 받고 마우스는 글자 선택을 위해 손잡이를 쓴다. 입력칸에서 시작한 끌기와 가로 끌기는 본문 안의 행동으로 남긴다 | `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` |