npm - @highpixel-co/palda-design-system - Versions diffs - 0.5.0 → 0.6.0 - Mend

@highpixel-co/palda-design-system 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/{chunk-GPCPGABI.js → chunk-6JZPK2W5.js} +10 -2
package/dist/{chunk-Q4UXASZH.js → chunk-QW2SD3XV.js} +13 -5
package/dist/guide/README.md +3 -3
package/dist/guide/catalog/patterns.yml +9 -1
package/dist/guide/docs/ACCESSIBILITY.md +27 -1
package/dist/guide/docs/AI_UI_DESIGNER_HANDOFF.md +6 -4
package/dist/guide/docs/COMPONENT_POLICY.md +2 -2
package/dist/guide/docs/CONTENT.md +1 -1
package/dist/guide/docs/DESIGN_GRAMMAR.md +131 -29
package/dist/guide/docs/DESIGN_PRINCIPLES.md +18 -9
package/dist/guide/docs/FIGMA_ALIGNMENT_DELTA.md +4 -4
package/dist/guide/docs/FIGMA_NAME_MAPPING.md +4 -4
package/dist/guide/docs/FIGMA_WORKFLOW.md +3 -3
package/dist/guide/docs/ICON_POLICY.md +3 -3
package/dist/guide/docs/LAYOUT.md +11 -11
package/dist/guide/docs/TOKEN_POLICY.md +27 -16
package/dist/harness/metadata.json +4 -2
package/dist/index.d.ts +1 -1
package/dist/index.js +2 -2
package/dist/patterns.d.ts +15 -2
package/dist/patterns.js +2 -2
package/dist/scripts/check-examples.mjs +9 -47
package/dist/styles.css +11 -0
package/dist/ui.d.ts +6 -1
package/dist/ui.js +1 -1
package/package.json +1 -1

package/dist/{chunk-GPCPGABI.js → chunk-6JZPK2W5.js} RENAMED Viewed

@@ -572,7 +572,14 @@ function Switch({ className = "", disabled, size = "md", ...props }) {
 // ../../components/src/Tab/Tab.tsx
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-function Tab({ children, className = "", icon, selected = false, ...props }) {
+function Tab({
+  children,
+  className = "",
+  icon,
+  badge,
+  selected = false,
+  ...props
+}) {
   const classes = [
     "palda-tab",
     selected ? "palda-tab--selected" : "",
@@ -581,7 +588,8 @@ function Tab({ children, className = "", icon, selected = false, ...props }) {
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs12("button", { ...props, "aria-selected": selected, className: classes, role: "tab", type: "button", children: [
     icon ? /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", className: "palda-tab__icon", children: icon }) : null,
-    /* @__PURE__ */ jsx14("span", { className: "palda-tab__label", children })
+    /* @__PURE__ */ jsx14("span", { className: "palda-tab__label", children }),
+    badge ? /* @__PURE__ */ jsx14("span", { className: "palda-tab__badge", children: badge }) : null
   ] });
 }

package/dist/{chunk-Q4UXASZH.js → chunk-QW2SD3XV.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-GPCPGABI.js";
+} from "./chunk-6JZPK2W5.js";
 import {
   ChevronRightIcon
 } from "./chunk-TWYJ2UTC.js";
@@ -105,12 +105,19 @@ function FormSection({ children, description, error, footer, title }) {
 // ../../patterns/src/ListRow/ListRow.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var TITLE_TYPOGRAPHY_CLASS4 = "palda-text-body2-regular-semibold";
-var DESCRIPTION_TYPOGRAPHY_CLASS4 = "palda-text-label-reading-medium";
+var TITLE_TYPOGRAPHY_CLASS4 = {
+  default: "palda-text-body2-regular-semibold",
+  strong: "palda-text-body1-regular-semibold"
+};
+var DESCRIPTION_TYPOGRAPHY_CLASS4 = {
+  default: "palda-text-label-reading-medium",
+  strong: "palda-text-body2-reading-medium"
+};
 function ListRow({
   chevron,
   children,
   description,
+  emphasis = "default",
   leading,
   loading = false,
   onClick,
@@ -122,6 +129,7 @@ function ListRow({
   const classes = [
     "palda-list-row",
     `palda-list-row--${tone}`,
+    `palda-list-row--${emphasis}`,
     selected ? "palda-list-row--selected" : "",
     loading ? "palda-list-row--loading" : ""
   ].filter(Boolean).join(" ");
@@ -135,8 +143,8 @@ function ListRow({
   const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
     leading ? /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "palda-list-row__leading", children: leading }) : null,
     /* @__PURE__ */ jsxs6("span", { className: "palda-list-row__copy", children: [
-      /* @__PURE__ */ jsx6("span", { className: TITLE_TYPOGRAPHY_CLASS4, children: title }),
-      description ? /* @__PURE__ */ jsx6("span", { className: `palda-list-row__description ${DESCRIPTION_TYPOGRAPHY_CLASS4}`, children: description }) : null,
+      /* @__PURE__ */ jsx6("span", { className: TITLE_TYPOGRAPHY_CLASS4[emphasis], children: title }),
+      description ? /* @__PURE__ */ jsx6("span", { className: `palda-list-row__description ${DESCRIPTION_TYPOGRAPHY_CLASS4[emphasis]}`, children: description }) : null,
       children
     ] }),
     trailing ? /* @__PURE__ */ jsx6("span", { className: "palda-list-row__trailing", children: trailing }) : null,

package/dist/guide/README.md CHANGED Viewed

@@ -35,13 +35,13 @@ import { Button } from '@highpixel-co/palda-design-system/ui';
 `styles.css`를 함께 불러오지 않으면 토큰이 없어 색이 나오지 않습니다.
 `tokens/`, `icons/`, `components/`, `patterns/`는 저장소 내부 모듈이며 개별 배포하지 않습니다.
-배포와 소비 설정은 [`packages/palda-design-system/README.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/packages/palda-design-system/README.md)를
+배포와 소비 설정은 [`packages/palda-design-system/README.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/packages/palda-design-system/README.md)를
 따릅니다.
-- 디자이너: [`docs/REPOSITORY_GUIDE.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/REPOSITORY_GUIDE.md)부터 읽습니다.
+- 디자이너: [`docs/REPOSITORY_GUIDE.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/REPOSITORY_GUIDE.md)부터 읽습니다.
 - 디자인 원칙: [`docs/DESIGN_PRINCIPLES.md`](docs/DESIGN_PRINCIPLES.md)
 - Figma 운영: [`docs/FIGMA_WORKFLOW.md`](docs/FIGMA_WORKFLOW.md)
-- 기여 절차: [`docs/CONTRIBUTING.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/CONTRIBUTING.md)
+- 기여 절차: [`docs/CONTRIBUTING.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/CONTRIBUTING.md)
 현재 토큰과 컴포넌트 값은 구조를 보여주기 위한 예시이며, 디자이너 검토 후 확정해야 합니다.

package/dist/guide/catalog/patterns.yml CHANGED Viewed

@@ -58,6 +58,10 @@ list-row:
     - 섹션 안에서 tone="filled"로 값을 강조해 담는 요약 행 (옅은 회색 필, 보더 없음).
       페이지 바디 최상위 블록은 Card다 — 안쪽 여백은 둘 다 16으로 같고 라운드가 갈린다
     - onClick을 주면 누를 수 있는 행(선택 상태 포함)
+    - 그 목록이 화면의 본문이면 emphasis="strong"으로 행을 한 칸 올린다
+  emphasis:
+    default: 제목 body2(14) + 설명 label(12). 곁·요약·참조 나열이다. 기본값이다
+    strong: 제목 body1(16) + 설명 body2(14). 선언서의 본문 문장이 가리키는 목록 하나에만 쓴다
   avoid_for:
     - 진행률·CTA·취소를 함께 든 작업 행. leading이 16px 아이콘 고정이라 썸네일이 들어가지 않고,
       세로 여백과 가운데 정렬이 제목·설명 두 줄 기준이라 여러 단 내용이 붙어 보인다.
@@ -68,7 +72,11 @@ list-row:
     선택은 보더가 아니라 색이다. onClick이 있으면 chevron이 기본으로 붙고, 오른쪽에 컨트롤이 오면
     chevron={false}로 끈다. 목록 위에서 갈래를 가르는 것은 Tab이다(0023).
     목록 전체의 empty/error는 EmptyState가 맡는다(docs/DESIGN_GRAMMAR.md의 §상태는 누가 갖나).
-    뼈대 높이는 텍스트 스타일의 font-size를 따른다.
+    뼈대 높이는 텍스트 스타일의 font-size를 따르고 emphasis를 따라 같이 올라간다.
+    emphasis는 크기를 고르는 자리가 아니라 이 목록이 화면의 본문인지를 밝히는 자리다 — 판정은
+    "선언서의 본문 문장이 가리키는 목록인가" 하나이고 한 화면에 strong은 하나다(0034).
+    제목만 올리지 않는다. 16 → 12로 두 칸을 건너뛰면 설명이 각주가 된다.
+    tone="filled"와 겹쳐 쓰지 않는다 — 곁이 본문 크기를 갖는 일이다(0032).
 form-section:
   status: draft

package/dist/guide/docs/ACCESSIBILITY.md CHANGED Viewed

@@ -2,9 +2,35 @@
 **모든 컴포넌트와 화면이 예외 없이 지켜야 하는 접근성 최소선이다.**
-- 텍스트와 UI의 색상 대비를 확인한다.
+- 텍스트와 UI의 색상 대비를 확인한다. 수치는 아래 §대비가 갖는다.
 - 모든 조작 요소에 visible focus를 제공한다.
 - icon-only button에는 접근 가능한 이름을 제공한다.
 - 색상만으로 상태를 전달하지 않는다.
 - Form error는 관련 입력과 연결한다.
 - motion 감소 설정을 존중한다.
+## 대비
+**읽어야 하는 글자는 아래를 넘는다.** 넘지 못하면 시각 표현이 아니라 위반이다 —
+[`DESIGN_PRINCIPLES.md`](DESIGN_PRINCIPLES.md) §7의 "글자가 배경에 묻힌다 → 읽히는 쪽이 이긴다"에
+수치를 준 것이다.
+| 무엇                                              | 하한    |
+| ------------------------------------------------- | ------- |
+| 본문 글자 (18.66px 미만, 또는 24px 미만 non-bold) | `4.5:1` |
+| 큰 글자 (18.66px 이상 bold, 또는 24px 이상)       | `3:1`   |
+| 조작 요소의 경계와 상태 표시                      | `3:1`   |
+흰 배경(`surface/base`) 위 실측이다.
+| 토큰               | 값                     | 대비         |
+| ------------------ | ---------------------- | ------------ |
+| `text/primary`     | `gray-900` `#323236`   | `12.76:1`    |
+| `text/accent`      | `purple-600` `#4345e5` | `6.52:1`     |
+| `text/primary-sub` | `gray-500` `#86868d`   | **`3.62:1`** |
+**`text/primary-sub`는 14px 본문에서 하한을 넘지 못한다.** 24px 이상이거나 18.66px 이상 bold인
+자리에만 쓴다. 그보다 작은 글자에 쓰면 읽히지 않는다.
+**아직 정리되지 않은 자리가 있다.** `ListRow`의 `description`이 `label`(12px)에
+`text/primary-sub`라 같은 미달이다. 토큰 값을 올릴지 그 자리만 바꿀지는 결정 대기다.

package/dist/guide/docs/AI_UI_DESIGNER_HANDOFF.md CHANGED Viewed

@@ -50,8 +50,10 @@ Palda가 목표로 하는 것은 단순히 컴포넌트를 많이 보유하는
 ### 2. 정보 위계와 Primary action 배치 — 확정됨
 **타이포 위계**는 [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §타이포가 갖는다 — 페이지 `headline`(24)
-→ 섹션·카드 `body1`(16) → 행 `body2`(14) → 보조 `label`(12). 화면이 고르는 것은 페이지 제목
-하나뿐이고 나머지는 pattern이 이미 갖고 있다.
+→ 섹션·카드 `body1`(16) → 행 `body2`(14) → 보조 `label`(12). 화면이 고르는 것은 페이지 제목과
+**본문 목록 여부** 둘이고 나머지는 pattern이 이미 갖고 있다. 선언서의 본문 문장이 가리키는
+목록은 `ListRow`의 `emphasis="strong"`으로 제목 `body1`(16) + 설명 `body2`(14)가 된다
+([`decisions/0034`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0034-the-body-list-lifts-one-step.md)).
 **주 액션의 자리**는 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md) §주 액션을 어디 두나가 갖는다 —
 페이지 헤더 우측과 `BottomBar` 둘 다 맞는 자리이고, 읽다가 가끔 누르는 화면은 위, 채워 넣고
@@ -83,7 +85,7 @@ AI에게 가장 효과적인 기준은 긴 설명보다 실제 정답 화면이
 - 데스크톱과 모바일에서 달라지는 부분
 - loading·empty·error 처리 방식
-산출물은 [`../examples/approved/`](https://github.com/highpixel-co/palda-design-system/tree/0504d8eaa033955d7a70414616ee999e447a0ced/examples/approved)에 보관한다.
+산출물은 [`../examples/approved/`](https://github.com/highpixel-co/palda-design-system/tree/ad23980481cd81dcf09a1044504d2295f0e4a0f3/examples/approved)에 보관한다.
 **완료 기준:** AI가 새 화면을 만들 때 가장 가까운 승인 화면을 골라 구조와 판단 기준을 재사용할
 수 있다.
@@ -101,7 +103,7 @@ AI가 자주 만들 수 있는 잘못된 화면도 시각적으로 남긴다.
 - 모바일에서 버튼이나 긴 한글이 잘리는 화면
 각 사례에는 문제가 되는 이유와 올바른 대안을 함께 기록한다. 산출물은
-[`../examples/anti-patterns/`](https://github.com/highpixel-co/palda-design-system/tree/0504d8eaa033955d7a70414616ee999e447a0ced/examples/anti-patterns)에 보관한다.
+[`../examples/anti-patterns/`](https://github.com/highpixel-co/palda-design-system/tree/ad23980481cd81dcf09a1044504d2295f0e4a0f3/examples/anti-patterns)에 보관한다.
 **완료 기준:** AI가 동일한 실수를 반복하지 않고, 잘못된 구현을 구체적인 사례와 비교해 수정할 수
 있다.

package/dist/guide/docs/COMPONENT_POLICY.md CHANGED Viewed

@@ -15,7 +15,7 @@
 적는다. prop 이름과 기본값은 타입이 원본이므로 문서로 옮겨 적지 않는다.
 **새 컴포넌트는 코드보다 먼저 property 목록과 상태 배치표를 낸다.** 상태는
-[`decisions/0004`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0004-component-state-naming.md)의 다섯 종류(상호작용 · 네이티브 ·
+[`decisions/0004`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0004-component-state-naming.md)의 다섯 종류(상호작용 · 네이티브 ·
 값에서 파생 · 컴포넌트 소유 · 부모가 정함)에 배치하고, **prop으로 빼도 되는 것은 "부모가 정함"
 하나뿐이다.** `hovered`·`focused`·`filled` 같은 prop은 만들지 않는다. pattern에서 어느 것이
 상태를 소유하는지는 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md)의 §상태는 누가 갖나에 있다.
@@ -44,7 +44,7 @@
   ([`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md) §자리는 시스템이 정하지 않는다). 컴포넌트 시안은 셸이 없어 이 검사를 받지 않는다.
 - **렌더해서 흐리게 본다.** 시안을 실제로 그린 뒤, 스크린샷을 흐리게 봤을 때 가장 먼저 보이는
   것이 본문이어야 한다. 상태 배너·경고처럼 면적이 큰 것이 본문보다 먼저 보이면 그것을 뺀다
-  ([`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)). 검사가 읽지
+  ([`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)). 검사가 읽지
   못하는 자리라 이 확인은 사람이 한다.
 - **시안은 자기 클래스만 정의한다.** 시스템 클래스(`.palda-*`)를 셀렉터에 쓰지 않는다 — 붙이는
   것은 마크업이 하고, 늘리거나 자리를 잡는 것은 감싸는 자리가 한다. pattern은 `className`을 받지

package/dist/guide/docs/CONTENT.md CHANGED Viewed

@@ -60,7 +60,7 @@
 `Toast`다.
 **진행 중은 글자가 아니라 `disabled`로 표현한다.** `Button`에 로딩 전용 prop이 없는 것이
-그래서다([`components/src/Button/Button.tsx`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/components/src/Button/Button.tsx)).
+그래서다([`components/src/Button/Button.tsx`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/components/src/Button/Button.tsx)).
 ### "~기"로 끝난다

package/dist/guide/docs/DESIGN_GRAMMAR.md CHANGED Viewed

@@ -20,6 +20,8 @@
 | 무엇으로 조립하나?        | 아래 §어느 pattern을 고르나                                               |
 | 이 자리에 이 패턴이 맞나? | [`catalog/patterns.yml`](../catalog/patterns.yml)의 `use_for`·`avoid_for` |
 | 이게 이 화면 것인가?      | 아래 §곁을 어디 두나 — 박스 질문보다 **먼저** 묻는다                      |
+| 무엇을 크게 그리나?       | 아래 §층이 무게를 정한다 — 그리기 전에 기능 위계부터                      |
+| 값이 나쁠 때는?           | 아래 §값이 나쁘면 잠깐 올라온다                                           |
 | 박스로 감싸나?            | 아래 §판단 한 줄 → §쓰는 경우                                             |
 | 면인가 행인가?            | [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §간격 마지막 줄 + §라운드 표         |
 | 이 카드는 눌리나?         | 아래 §세 번째 질문 — 고르는 카드 / 담는 카드                              |
@@ -31,7 +33,7 @@
 | 좁아지면?                 | [`LAYOUT.md`](LAYOUT.md) §좁아질 때                                       |
 **ADR은 여기서 읽지 않는다.** 근거 보관소지 지시서가 아니고, 대체된 값이 그대로 남아 있다.
-기준은 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/AGENTS.md)의 §ADR은 화면 만들 때 읽지 않는다에 있다.
+기준은 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/AGENTS.md)의 §ADR은 화면 만들 때 읽지 않는다에 있다.
 ### 아직 답할 문서가 없는 질문
@@ -39,7 +41,10 @@
 **지금은 비어 있다.** 마지막으로 남아 있던 제목·본문·보조 정보의 위계는 2026-09-02에
 [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §타이포가 받았다 — 페이지 `headline`(24) → 섹션·카드
-`body1`(16) → 행 `body2`(14) → 보조 `label`(12)이다.
+`body1`(16) → 행 `body2`(14) → 보조 `label`(12)이다. 2026-09-03에 행이 두 칸으로 갈렸다.
+**화면의 본문인 목록은 제목 `body1`(16) + 설명 `body2`(14)로 한 칸 올라간다**
+([`decisions/0034`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0034-the-body-list-lifts-one-step.md)) — `ListRow`의 `emphasis`가
+그것이고, 판정은 "선언서의 본문 문장이 가리키는 목록인가" 하나다.
 ### 주 액션을 어디 두나
@@ -51,10 +56,15 @@
 같은 액션을 두 번 두지 않는다. 근거는
 [`DESIGN_PRINCIPLES.md`](DESIGN_PRINCIPLES.md) §4의 주 액션의 자리에 있다.
+**0개도 된다.** 목록을 훑고 행을 눌러 들어가는 화면은 행이 곧 액션이라 세울 것이 없다. 선언서에
+`없음`이라 적는다 ([`decisions/0033`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0033-a-screen-may-have-no-primary-action.md)).
+**자리를 채우려고 다른 층의 기능을 끌어올리지 않는다** — 스토어 알림톡 목록이 그렇게 결제
+기능(3층)을 헤더 우측(1층)으로 올렸다가 되돌렸다.
 ## 곁을 어디 두나
 **박스를 두를지 묻기 전에 이것부터 묻는다.** 같은 블록이라도 이 화면 것이냐 아니냐로 규칙이
-갈린다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0022-screens-declare-their-body.md)에 있다.
+갈린다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0022-screens-declare-their-body.md)에 있다.
 > 이것은 **이 화면이 선언한 본문**인가?
@@ -73,16 +83,103 @@
 | 무게   | 자리를 얼마나 먹고 얼마나 강조되나 | 내린다 |
 | 구분   | 다른 종류로 읽히나                 | 낸다   |
-### 곁의 규칙 셋
+### 곁의 규칙 넷
-1. **세로로 한 줄이다.** 블록이 되지 않는다. (무게)
+1. **기능 하나에 블록 하나다.** 기능이 다르면 블록도 다르다. 묶는 기준은 기능이지 층이
+   아니다 — 발송 채널과 잔여 알림톡은 둘 다 곁이지만 다른 기능이라 블록이 나뉜다. (구분)
 2. **본문이 쓰는 pattern을 쓰지 않는다.** 본문이 행 나열이면 곁은 행이 아니다. (구분)
 3. **강조 예산을 쓰지 않는다.** `primary`·`accent` 채움을 주지 않는다.
    [`DESIGN_PRINCIPLES.md`](DESIGN_PRINCIPLES.md) §4의 "강한 강조는 하나"는 본문이 갖는다. (무게)
+4. **stroke 없이 shade만.** `surface/raised` 필에 `radius/container`, **보더는 주지 않는다.**
+   (구분)
+**면이 층을 가른다.** 본문은 흰 캔버스 위에서 디바이더로 갈리고 곁은 회색 면에 얹힌다. 글자는
+양쪽 다 `text/primary`라 대비를 낮추지 않고도 층이 갈린다 — 규칙 1이 "세로로 한 줄이다"였을 때는
+곁이 쓸 수 있는 것이 텍스트와 `Link`뿐이라 색 말고 가를 것이 없었다. 근거는
+[`decisions/0032`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0032-asides-are-one-filled-block.md)에 있다.
+| 자리 | 면               | 경계     | 글자           | 대비      |
+| ---- | ---------------- | -------- | -------------- | --------- |
+| 본문 | `surface/base`   | 디바이더 | `text/primary` | `12.76:1` |
+| 곁   | `surface/raised` | **없음** | `text/primary` | `11.72:1` |
+**`ListRow`의 `tone="filled"`를 쓰지 않는다.** 같은 면이지만 본문 pattern이라 규칙 2에 걸린다.
+곁 블록은 화면이 자기 클래스로 만든다.
+**무게는 블록 개수가 아니라 줄 수가 지킨다.** 각 블록은 한두 줄을 넘지 않는다. 넘으면 그것은
+곁이 아니라 본문이거나 다른 화면으로 가야 할 것이다.
+### 층이 무게를 정한다
+**규칙 셋은 "본문보다 가볍게"만 말하고 얼마나 가볍게는 말하지 않는다.** 그리기 전에 **기능
+위계**를 정한다 — 이 페이지가 하는 일에 얼마나 직접 기여하는가. 근거는
+[`decisions/0031`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0031-function-hierarchy-before-drawing.md)에 있다.
+```
+1. 페이지의 기능·텍스트를 **기능 단위로** 묶는다
+2. 각 그룹이 페이지 목적에 얼마나 직접 기여하는지로 층을 정한다   ← 여기까지가 위계
+3. 층이 UI 배정을 정한다 — pattern · 자리 · 면적 · 채움 · 타이포
+4. 배정된 값이 읽히는지 확인한다                                  ← 위계와 무관한 하한
+```
+판정은 화면이 선언한 본문(0022)을 기준으로 한다.
+| 층                     | 판정 질문                             | pattern              | 나가는 자리            |
+| ---------------------- | ------------------------------------- | -------------------- | ---------------------- |
+| **1 · 이 페이지의 일** | 본문 문장이 말하는 그것인가?          | 목록·폼·카드 그리드  | 주 액션 `primary` 하나 |
+| **2 · 일의 전제**      | 아래 셋 중 하나라도 예인가?           | 상태 바 또는 곁 블록 | **`outline` Button**   |
+| **3 · 다른 곳의 일**   | 참조하거나 그리로 나가는 문일 뿐인가? | 곁 블록              | **`Link`**             |
+**2층과 3층은 셋으로 가른다.** "여기서 하느냐"만 물으면 애매한 자리가 남아서다.
+| 기준        | 묻는 것                                      | 발송 채널                | 잔여 알림톡         |
+| ----------- | -------------------------------------------- | ------------------------ | ------------------- |
+| **1. 소유** | 이 기능의 설정 화면이 이 페이지 아래에 있나? | 예 — `/alimtalk/channel` | 아니오 — `/payment` |
+| **2. 변형** | 값이 바뀌면 본문의 **형태**가 바뀌나?        | 예 — 템플릿 고르는 법    | 아니오              |
+| **3. 성립** | 없으면 본문이 아예 안 뜨나?                  | 예 — `EmptyState`        | 아니오              |
+**하나라도 예면 2층, 셋 다 아니면 3층이다.** "잔액이 조건을 잠그지 않나"는 이 축의 물음이
+아니다 — 잠그는 것은 **나쁜 값일 때**의 일이고 아래 §값이 나쁘면 잠깐 올라온다가 받는다.
+**2층과 3층은 나가는 자리의 모양으로 갈린다.** 형태를 가진 버튼이 텍스트 링크보다 위다.
+```
+primary 채움  >  outline 버튼  >  subtle 버튼  >  텍스트 링크
+    1층             2층                              3층
+```
+곁은 `primary`·`accent` 채움을 쓰지 못하므로 2층이 쓸 수 있는 가장 높은 칸이 `outline`이다.
+**버튼의 보더는 곁 규칙 4와 부딪히지 않는다** — 그 규칙은 블록의 경계에 대한 것이고 버튼은 블록
+안의 컨트롤이다. 2층이 셋을 넘으면 곁이 본문과 겨루기 시작하므로 한둘로 둔다.
+**화면이 고르는 것은 층뿐이다.** "얼마나 눈에 띄게 그릴까"를 그리면서 판단하지 않는다. 안 보이면
+색을 올리고 튀면 내리는 식으로는 화면마다 값이 달라진다.
+**대비는 위계가 아니다.** 3층도 `text/primary`(12.76:1)를 쓴다 — `text/primary-sub`는 3.62:1로
+14px 본문의 하한에 미달한다([`ACCESSIBILITY.md`](ACCESSIBILITY.md) §대비). 층 차이는 색이 아니라
+pattern·자리·면적·채움이 낸다.
+### 값이 나쁘면 잠깐 올라온다
+곁에 실리는 정보는 시점에 따라 값이 다르다. **나쁜 값의 기준은 하나다 — 사용자가 무언가 해야만
+정상으로 돌아가는가.** 잔액 `0개`, 구독 `만료`, 연동 `실패`가 그것이다.
+| 값      | 무엇으로                                     |
+| ------- | -------------------------------------------- |
+| 좋은 값 | 자기 층의 무게 그대로. 대개 곁 한 줄         |
+| 나쁜 값 | `Alert`. 무엇을 해야 하는지 액션을 함께 둔다 |
+**올라온 것은 화면에 하나다.** 나쁜 값이 둘이면 더 먼저 손대야 하는 것만 올린다. 근거는
+[`decisions/0030`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0030-asides-rise-only-on-bad-values.md)에 있다.
+> 위계가 자리와 무게를 정하고, 상태는 그 자리에서 잠깐 올라올 뿐 위계를 바꾸지 않는다.
+"잔액이 0이면 발송이 멈추니 항상 무겁게"는 틀렸다. 잔액이 0이 됐다고 잔액 관리가 이 페이지의
+주요 기능이 되지 않는다.
 ### 자리는 시스템이 정하지 않는다
-화면이 고르고 선언서에 밝힌다. 규칙 셋을 지키면 위든 아래든 무게는 이미 내려가 있고, 구분은
+화면이 고르고 선언서에 밝힌다. 규칙 넷을 지키면 위든 아래든 무게는 이미 내려가 있고, 구분은
 자리가 아니라 문법이 낸다.
 **곁은 본문보다 먼저 올 수 있다. 넷째 규칙은 없다.** 순서를 규칙으로 세우면 "무게를 내리면 자리는
@@ -126,7 +223,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 | 섹션 안            | 행·요소 | `inset/md`(16) | `control`(10)   | `ListRow tone="filled"` |
 **층을 가르는 것은 라운드다.** 안쪽 여백은 둘 다 16이라 층을 가르지 못한다 — 행의 상하 여백을
-16으로 올리면서 같아졌다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0019-list-row-vertical-inset.md)). 값의
+16으로 올리면서 같아졌다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0019-list-row-vertical-inset.md)). 값의
 근거는 [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §라운드 표이고, 여백은 같은 문서 §간격에 있다.
 **첫 질문은 상호작용만 가르고 층위는 가르지 않는다.** 고르지도 열리지도 떠 있지도 않은 요약
@@ -183,7 +280,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 **채운 면은 `Card`든 `ListRow`든 같은 회색이다.** `tone="filled"`가 두 곳에서 같은 뜻이고 같은
 값이며, 갈리는 것은 색이 아니라 층이다 — 여백과 라운드가 다르다
-([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
+([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
 ### 쓰지 않는 경우 — 기본값
@@ -232,13 +329,13 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 | `AppShell`    | —    | —      | 사이드바 + 콘텐츠 틀                                                  |
 `Card`를 섹션 묶기에 쓰지 않는다. 섹션은 `FormSection`이다. 근거는
-[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0011-no-over-carding.md)에 있다.
+[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0011-no-over-carding.md)에 있다.
 ## 띄우나 마나
 **깊이와 끊김은 다른 축이다.** 위 §두 번째 질문은 페이지 **안쪽** 층(면인가 행인가)을 가르고,
 이 절은 페이지 **위로** 뜨는 층을 가른다. 근거는
-[`decisions/0020`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0020-modal-depth-and-scrim.md)에 있다.
+[`decisions/0020`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0020-modal-depth-and-scrim.md)에 있다.
 ### 층
@@ -260,7 +357,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 **딤은 `overlay/dim`(70% 검정)이다.** 시안에서 온 값은 아니지만 2026-08-31에 이대로 확정했다.
 옅게 잡으면 두 가지가 같이 무너진다 — 4층을 3층과 가르는 시각 신호가 딤뿐이고, **모달 카드가
-흰색인 것**([`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0013-surface-base-is-white.md))**이 짙은 딤 위에서만
+흰색인 것**([`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0013-surface-base-is-white.md))**이 짙은 딤 위에서만
 성립한다.** 카드와 딤 처리된 뒤 캔버스의 대비가 70%에서 8.5:1인데 30%에서는 2.1:1로 떨어져,
 카드가 떠 있는 것으로 읽히지 않는다. 뒤 본문 대비도 70%에서 2.25:1이라 내용을 읽을 수 없고,
 그래서 아래 1번 관문의 기준선이 흐려지지 않는다.
@@ -301,21 +398,26 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 **하려는 일에서 고른다. 생김새가 비슷하다고 고르지 않는다.** 아래 오른쪽 열은 같은 자리에서
 잘못 고르기 쉬운 것이다.
-| 하려는 것                           | pattern                 | 여기에 쓰지 않는 것               |
-| ----------------------------------- | ----------------------- | --------------------------------- |
-| 화면의 틀 (사이드바 + 콘텐츠 3단)   | `AppShell`              | —                                 |
-| 설정·정보 섹션을 제목 아래로 묶기   | `FormSection`           | `Card`                            |
-| 정보 나열, 통계, 목록의 한 줄       | `ListRow` + 디바이더    | `Card`                            |
-| 섹션 안의 요약 행                   | `ListRow tone="filled"` | `Card` (흰 카드가 아니라 회색 필) |
-| 페이지 바디 최상위의 요약 블록      | `Card`                  | `ListRow tone="filled"`           |
-| 고를 수 있는 개별 객체              | `Card`                  | —                                 |
-| 같은 자리에서 갈래를 갈아 끼우기    | `Tab`                   | `Chip`                            |
-| 여러 개를 동시에 거는 토글          | `Chip`                  | `Tab`                             |
-| 폼 옆에서 입력 결과를 그대로 비추기 | `LivePreview`           | —                                 |
-| 페이지 전체의 액션                  | `BottomBar`             | —                                 |
-| 목록·검색 결과가 비었을 때          | `EmptyState`            | —                                 |
-`Card`를 섹션 묶기에 쓰지 않는 근거는 [`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0011-no-over-carding.md)에 있다.
+| 하려는 것                           | pattern                     | 여기에 쓰지 않는 것               |
+| ----------------------------------- | --------------------------- | --------------------------------- |
+| 화면의 틀 (사이드바 + 콘텐츠 3단)   | `AppShell`                  | —                                 |
+| 설정·정보 섹션을 제목 아래로 묶기   | `FormSection`               | `Card`                            |
+| 정보 나열, 통계, 목록의 한 줄       | `ListRow` + 디바이더        | `Card`                            |
+| 그 목록이 화면의 본문일 때          | `ListRow emphasis="strong"` | 행마다 크기를 따로 고르는 것      |
+| 섹션 안의 요약 행                   | `ListRow tone="filled"`     | `Card` (흰 카드가 아니라 회색 필) |
+| 페이지 바디 최상위의 요약 블록      | `Card`                      | `ListRow tone="filled"`           |
+| 고를 수 있는 개별 객체              | `Card`                      | —                                 |
+| 같은 자리에서 갈래를 갈아 끼우기    | `Tab`                       | `Chip`                            |
+| 여러 개를 동시에 거는 토글          | `Chip`                      | `Tab`                             |
+| 폼 옆에서 입력 결과를 그대로 비추기 | `LivePreview`               | —                                 |
+| 페이지 전체의 액션                  | `BottomBar`                 | —                                 |
+| 목록·검색 결과가 비었을 때          | `EmptyState`                | —                                 |
+**`emphasis="strong"`과 `tone="filled"`를 겹쳐 쓰지 않는다.** 곁의 요약 행이 본문 크기를 갖는
+일이고 [`0032`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0032-asides-are-one-filled-block.md)와 어긋난다. 한 화면에 `strong`
+목록은 하나다 ([`0034`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0034-the-body-list-lifts-one-step.md)).
+`Card`를 섹션 묶기에 쓰지 않는 근거는 [`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0011-no-over-carding.md)에 있다.
 `Tab`과 `Chip`이 갈리는 이유는 위 §절대 규칙의 "필터는 탭이다"와 같다 — 필터는 고르는 객체가
 아니라 갈래 전환이라 선택된 카드와 같은 문법을 쓰지 않는다.
@@ -324,7 +426,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 **한때 둘이었다.** `Tab`(컴포넌트)과 `FilterTabs`(pattern)가 "내용이 바뀌나, 같은 내용이
 좁혀지나"로 갈렸는데 그 구분을 없앴다 — Figma 원본에 탭 컴포넌트 세트가 하나뿐이고, 두 자리는
 실제로 같이 쓰인다. 어느 값이 남았는지와 근거는
-[`decisions/0023`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0023-one-tab.md)에 있다.
+[`decisions/0023`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0023-one-tab.md)에 있다.
 | 무엇       | 값                                                        |
 | ---------- | --------------------------------------------------------- |
@@ -362,10 +464,10 @@ loading·empty·error를 두지 않는 이유다. 틀에 상태를 두면 같은
 **상태는 그것을 가진 것에 가장 가까운 자리가 든다.** 한 단계 위로 올리는 것은 그 단계 전체가 못
 쓰게 되었을 때뿐이다. 행 하나가 실패한 것을 섹션 배너로 올리면 같은 사실을 두 번 말하게 되고,
 면적이 큰 배너가 본문보다 강해져 정작 봐야 할 목록을 덮는다. 근거는
-[`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)에 있다.
+[`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)에 있다.
 위 표는 pattern에서 **누가 소유하는가**만 정한다. 소유가 정해진 상태를 컴포넌트 하나 안에서
-어떻게 표현하는지는 [`decisions/0004`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0004-component-state-naming.md)의 5분류를
+어떻게 표현하는지는 [`decisions/0004`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0004-component-state-naming.md)의 5분류를
 따른다 — 그중 prop으로 빼는 것은 "부모가 정함"(`selected`·`error`) 하나뿐이고, 나머지는 CSS
 의사클래스·네이티브 속성·값에서 파생·내부 state다.

package/dist/guide/docs/DESIGN_PRINCIPLES.md CHANGED Viewed

@@ -70,12 +70,12 @@
 (`Alert` · `FormSection`의 `error`)는 폭이 본문과 같고 면을 가져서 본문과 무게를 겨룬다. 한
 화면에 하나이고, 본문보다 먼저 보이면 뺀다. 어느 자리가 상태를 드는지는
 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md) §상태는 누가 갖나와
-[`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)에 있다.
+[`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)에 있다.
 **곁은 강조 예산을 쓰지 않는다.** 이 화면이 선언한 본문에 들지 않은 것 — 다른 기능의 요약이나
 그리로 가는 입구 — 에는 `primary`·`accent` 채움을 주지 않는다. 강조 하나는 본문이 갖는다.
 곁이 무엇이고 어떻게 그리는지는 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md) §곁을 어디 두나에 있고,
-근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0022-screens-declare-their-body.md)다.
+근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0022-screens-declare-their-body.md)다.
 **뉴트럴이 대부분이다.** 퍼플은 핵심 액션과 선택 상태에만, 오렌지는 CTA·알림 같은 최소한의
 순간에만 쓴다.
@@ -95,8 +95,13 @@
 **지키는 것은 개수다. 한 화면에 주 액션은 하나이고, 선언한 자리도 하나다.** 위아래에 같은 액션을
 두 번 두지 않는다. 자리를 고르는 것은 자유지만 강조 하나 규칙(위 §4)은 그대로다.
+**0개도 된다.** 고르는 행위가 본문 안에서 끝나는 화면 — 목록을 훑고 행을 눌러 들어가는 화면은
+행이 곧 액션이라 헤더나 하단에 세울 것이 없다. 그때는 선언서에 `없음`이라 적는다
+([`decisions/0033`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0033-a-screen-may-have-no-primary-action.md)). **자리를 채우려고
+다른 층의 기능을 끌어올리지 않는다.**
 **화면 단위 선언은 둘이다.** 주 액션의 자리가 하나이고, **이 화면의 본문**이 나머지 하나다
-([`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0022-screens-declare-their-body.md)). 같은 장치를 두 축에 쓴다 —
+([`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0022-screens-declare-their-body.md)). 같은 장치를 두 축에 쓴다 —
 시스템이 정해 주는 대신 화면이 고르고 밝히고, 지키는 것은 개수다. 둘 다 승인 화면 문서가 받는다.
 슬롯은 이미 둘 다 있다 — 페이지 헤더 우측 상단은 바디 안이고, 아래는 `AppShell`의 `footer`에
@@ -104,7 +109,11 @@
 > **타이포 위계는 확정됐다.** 페이지 `headline`(24) → 섹션·카드 `body1`(16) → 행 `body2`(14) →
 > 보조 `label`(12)이고, 표는 [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §타이포에 있다. 화면이 고르는
-> 것은 페이지 제목 하나뿐이며 나머지는 pattern이 갖고 있다.
+> 것은 페이지 제목과 **본문 목록 여부** 둘이며 나머지는 pattern이 갖고 있다.
+>
+> **본문인 목록은 행이 한 칸 올라간다** — 제목 `body1`(16) + 설명 `body2`(14)
+> ([`decisions/0034`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0034-the-body-list-lifts-one-step.md)). 선언서의 본문 문장이
+> 가리키는 목록 하나에만 쓴다. 곁·요약·참조 나열은 그대로다.
 ## 5. Palda다운 대표 특징
@@ -148,7 +157,7 @@ subtle 3켤레로 움직이고, 알리기만 하는 색(그린·앰버)은 눌
 [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §패밀리·§켤레에 있다.
 > **값의 원본은 `tokens/color.tokens.json`이고 이 표는 사본이다.** 어긋나면 토큰이 옳다
-> ([`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0001-design-system-ssot.md)). 색 이름은 제안이며 디자이너가
+> ([`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0001-design-system-ssot.md)). 색 이름은 제안이며 디자이너가
 > 확정한다. CSS에는 hex를 쓰지 않는다 — 언제나 `var(--token)`이다.
 ### 타이포
@@ -195,7 +204,7 @@ Pretendard, 절제된 무게. **강조는 크기가 아니라 계층과 무게
 | 하지 않는 것                   | 대신                            | 어디                                        |
 | ------------------------------ | ------------------------------- | ------------------------------------------- |
-| 모든 것을 카드로 감싸기        | 여백 + 디바이더 + 제목          | [`0011`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0011-no-over-carding.md) |
+| 모든 것을 카드로 감싸기        | 여백 + 디바이더 + 제목          | [`0011`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0011-no-over-carding.md) |
 | 컨테이너 중첩 (카드 안 보더)   | 디바이더. 최대 1 depth          | `DESIGN_GRAMMAR.md` §절대 규칙              |
 | 정적인 블록을 보더로 둘러 강조 | 상태·타이포·색                  | 〃                                          |
 | 필터를 채운 칩 박스로          | 언더라인 탭(`Tab`)              | 〃                                          |
@@ -223,13 +232,13 @@ Pretendard, 절제된 무게. **강조는 크기가 아니라 계층과 무게
 | ---------------------------------- | ----------------- | ------------------------------------------------------------ |
 | 강조를 하나 더 넣고 싶다           | 하나로 둔다       | 둘이면 어느 것도 강조가 아니다 (§4)                          |
 | 시안이 "카드 전체 클릭"을 요구한다 | 문법              | `DESIGN_GRAMMAR.md` §세 번째 질문                            |
-| 시안의 색·값이 코드와 다르다       | 코드              | 코드가 SSOT ([`0001`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0001-design-system-ssot.md)) |
+| 시안의 색·값이 코드와 다르다       | 코드              | 코드가 SSOT ([`0001`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0001-design-system-ssot.md)) |
 | 브랜드색이 예뻐서 넓게 깔고 싶다   | 뉴트럴            | 브랜드색은 강조와 포인트 전용 (§4)                           |
 | 글자가 배경에 묻힌다               | 읽히는 쪽         | 수치 기준은 없어도 안 읽히면 시각 표현이 아니다 (2 > 3)      |
-| 필요한 토큰·variant·아이콘이 없다  | 멈추고 확인받는다 | 지어내지 않는다 ([`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/AGENTS.md) §항상)          |
+| 필요한 토큰·variant·아이콘이 없다  | 멈추고 확인받는다 | 지어내지 않는다 ([`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/AGENTS.md) §항상)          |
 **시안이 코드를 이기는 경우는 값의 다툼이 아니라 결정을 뒤집을 때뿐이다.** 그때는 ADR을 새로 쓴다
-([`0000-template`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0000-template.md)).
+([`0000-template`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0000-template.md)).
 ## 하지 않기로 한 것

package/dist/guide/docs/FIGMA_ALIGNMENT_DELTA.md CHANGED Viewed

@@ -6,10 +6,10 @@
 둔 것이다. 여기 적힌 것은 코드에서 고칠 일이 아니다. 코드는 이미 오른쪽 열의 값을 갖고 있다.
 이 저장소에서는 Figma를 편집할 수 없다. 그래서 "Figma가 이렇게 바뀌어야 한다"를 코드 변경 대신
-문서로 내보낸다. 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0001-design-system-ssot.md)이다.
+문서로 내보낸다. 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0001-design-system-ssot.md)이다.
 **뉴트럴 스케일 자체는 더 이상 delta가 아니다.** primitive `gray-50`~`gray-900`을 Figma와 같은
-차가운 회색으로 옮겼다([`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)).
+차가운 회색으로 옮겼다([`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)).
 값의 방향을 다시 정한 것이지 SSOT가 바뀐 것은 아니고, 아래 남은 항목은 여전히 **Figma가 코드에
 맞춰야 할 것**이다.
@@ -35,7 +35,7 @@ primitive는 양쪽이 같아졌고, 아래 셋은 **semantic이 어느 단계
 단계가 맞다. `#86868d`는 보조 문구(`color/text/primary-sub`)의 자리다.
 `color/surface/base`와 `color/surface/sunken`은 배경 위계를 뒤집으면서 한 단계씩 옮겨졌다
-([`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0013-surface-base-is-white.md)). 캔버스가 흰색이고 떠 있는 면과
+([`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0013-surface-base-is-white.md)). 캔버스가 흰색이고 떠 있는 면과
 요약 행이 회색이다.
 ## 남은 항목 — Figma에 아직 없는 것
@@ -85,7 +85,7 @@ Badge의 status variant는 틴트 배경 위 조합이다 — 배경 `{status}/s
 `ListRow`의 `tone="filled"`는 `Card`의 `tone="filled"`와 같은 회색이 된다. 두 곳의 `filled`가 같은
 뜻이라 값도 같아야 하고, 층은 색이 아니라 여백·라운드로 갈린다
-([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
+([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
 ### 새 컴포넌트 2종

package/dist/guide/docs/FIGMA_NAME_MAPPING.md CHANGED Viewed

@@ -6,13 +6,13 @@
 쓸 때 이 표로 옮기고, Figma 쪽을 정리할 때도 이 표를 목표로 삼는다.
 값이 다른 항목은 이 문서가 아니라 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 있다.
-여기는 **이름만** 다루고, 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0001-design-system-ssot.md)이다.
+여기는 **이름만** 다루고, 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0001-design-system-ssot.md)이다.
 ## CSS 변수 접두사
 코드의 CSS 변수는 Figma가 선언한 `cssVar`에 `palda-` 접두사를 붙인 것이다
 (`--radius-md` ↔ `--palda-radius-md`). 무접두사 이름이 소비 앱의 전역 변수와 충돌해서다
-([`decisions/0017`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0017-css-variable-prefix.md)). Figma에서 변수 이름을 검색해
+([`decisions/0017`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0017-css-variable-prefix.md)). Figma에서 변수 이름을 검색해
 코드로 올 때는 접두사만 붙이면 되고, 그 외 규칙은 아래 표와 같다. 이 문서에서 패밀리를
 뭉뚱그려 부를 때는 `--layout-*`처럼 접두사 없이 쓰고, 코드에 실재하는 변수를 가리킬 때는
 `--palda-layout-inset`처럼 전체 이름을 쓴다.
@@ -74,11 +74,11 @@ Figma의 `regular`는 관례상 400이므로 500에 붙으면 다른 곳에서
 | `depth100` | `shadow/100` |
 단계 번호는 그대로 두고 접두어만 코드 컨벤션에 맞춘다. 근거는
-[`decisions/0009`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0009-elevation-shadow-tokens.md)에 있다.
+[`decisions/0009`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0009-elevation-shadow-tokens.md)에 있다.
 ## 이 표에 없는 것
 레이아웃 여백·치수 토큰(`--layout-*` 패밀리와 `--palda-space-gap-xl` 등)은 Figma에 대응하는 변수가 없다. Figma
 실측값을 코드에서 처음 토큰화한 것이라 매핑할 짝이 없다.
-[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0008-layout-scale-separate-from-component-scale.md)과
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0008-layout-scale-separate-from-component-scale.md)과
 [`LAYOUT.md`](LAYOUT.md)를 본다.

package/dist/guide/docs/FIGMA_WORKFLOW.md CHANGED Viewed

@@ -2,19 +2,19 @@
 **Figma에서 정한 것을 저장소에 반영하고, 시안 코드를 읽어 구현으로 옮기는 절차다.**
-**원본은 저장소이고 Figma는 미러다**([`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0016-asset-ssot-boundary.md)).
+**원본은 저장소이고 Figma는 미러다**([`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0016-asset-ssot-boundary.md)).
 그래서 이 문서의 절차는 한 방향이다 — Figma에서 정한 것을 저장소에 **반영해야** 끝나고, 반영되기
 전까지는 확정이 아니다. 값이 어긋나면 코드가 옳고, Figma가 바뀌어야 할 목록은
 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 낸다.
-1. `figma/LIBRARY_LINKS.md`에서 디자인 시스템 파일의 placeholder 이름을 확인한다. 실제 URL은 저장소가 아니라 각자의 `figma.local.config.json`에 있다([`decisions/0026`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0026-figma-keys-stay-out-of-the-repository.md)).
+1. `figma/LIBRARY_LINKS.md`에서 디자인 시스템 파일의 placeholder 이름을 확인한다. 실제 URL은 저장소가 아니라 각자의 `figma.local.config.json`에 있다([`decisions/0026`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0026-figma-keys-stay-out-of-the-repository.md)).
 2. Variables는 `tokens/`와 같은 이름과 의미를 사용한다. 이름이 다른 자리는
    [`FIGMA_NAME_MAPPING.md`](FIGMA_NAME_MAPPING.md)에 있고, 정답은 `tokens/` 쪽 이름이다.
 3. 반복 요소는 Component와 Variant로 만든다.
 4. Auto Layout과 semantic layer name을 사용한다.
 5. Figma에서 정한 변경은 저장소의 원본(`tokens/`·`icons/svg/`·`components/src/`·`catalog/`)에
    반영해야 확정된다. 값을 옮기더라도 "Figma가 옳으니 따른다"가 아니라 저장소에서 다시 정한
-   것으로 기록한다 — 전례는 [`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)다.
+   것으로 기록한다 — 전례는 [`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)다.
 6. Library publish 전에 Storybook의 실제 브라우저 결과를 확인한다. 승인은 Figma가 아니라
    Storybook과 `contact-sheet`에서 난다.

package/dist/guide/docs/ICON_POLICY.md CHANGED Viewed

@@ -24,7 +24,7 @@
 ([`TOKEN_POLICY.md`](TOKEN_POLICY.md)). 아이콘의 모양과 뜻은 `contact-sheet` 승인으로 확정된다.
 **아이콘의 원본은 `icons/svg/`다.** Figma는 미러이고, 어긋나면 SVG가 옳다
-([`0016`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0016-asset-ssot-boundary.md)). `catalog/icons.yml`의 `figma`가 아직 전부
+([`0016`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0016-asset-ssot-boundary.md)). `catalog/icons.yml`의 `figma`가 아직 전부
 `TODO`인 것은 미러가 안 만들어졌다는 뜻이지, 저장소가 앞서 있다는 신호가 아니다.
 자리에 맞는 아이콘을 찾을 때는 셋 중 하나를 고른다. 가운데를 비워 두면 애매한 것이 전부
@@ -60,7 +60,7 @@
 이름과 뜻이 확정된 뒤에 그린다. 그리고 나서도 `icons/svg/`에 바로 넣지 않고, **HTML로 기존
 아이콘 옆에 놓아 보여주고 확정받는다** ([`COMPONENT_POLICY.md`](COMPONENT_POLICY.md) §시안은
 HTML로 먼저 확정한다). 그림을 먼저 그리면 무엇을 그렸는지가 무슨 뜻인지를 정해 버린다.
-[`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/AGENTS.md) §항상의 "지어내지 않고, 허용 상태와 사용 조건을 먼저 정의해 확인받는다"를
+[`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/AGENTS.md) §항상의 "지어내지 않고, 허용 상태와 사용 조건을 먼저 정의해 확인받는다"를
 아이콘에 적용한 것이다.
 ### 새 아이콘이 들어왔을 때
@@ -76,7 +76,7 @@ HTML로 먼저 확정한다). 그림을 먼저 그리면 무엇을 그렸는지
 ## 출처
 **아이콘마다 어디서 왔는지를 manifest에 적는다.** 세트마다 라이선스가 다르고, 들어온 때에
-안 적으면 나중에 되짚을 수 없다. 근거는 [`decisions/0027`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0027-icons-record-where-they-came-from.md)이다.
+안 적으면 나중에 되짚을 수 없다. 근거는 [`decisions/0027`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0027-icons-record-where-they-came-from.md)이다.
 ```json
 "copy": {

package/dist/guide/docs/LAYOUT.md CHANGED Viewed

@@ -4,7 +4,7 @@
 컴포넌트 안쪽을 재는 `--space-*`와 다른 스케일이고, 섞어 쓰지
 않는다. 계층을 나눈 이유는
-[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
 값은 Figma 3화면에서 같은 값이 반복되는 것을 확인한 실측이다. 지어낸 값이 없다. 실측이 아니라
 고른 값은 그 자리에 그렇게 적는다 — 지금은 §카드 그리드의 3열 하나다.
@@ -13,7 +13,7 @@
 **모든 화면이 이 구조를 따른다. 화면별로 재정의하지 않는다.** 기준 화면은 Figma PALDA node
 `586-10288`이고, 수치와 값은 코드 토큰이 SSOT다. 근거는
-[`decisions/0012`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0012-canonical-app-shell.md)에 있다.
+[`decisions/0012`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0012-canonical-app-shell.md)에 있다.
 **사이드바(전체 높이) + 콘텐츠.** 사이드바 위를 덮는 전역 상단 바는 없다. 페이지 제목은
 상단 바가 아니라 **바디 안**에 둔다. 스펙 확인용 토글 같은 Figma 전용 장치는 제품 UI로 만들지
@@ -30,16 +30,16 @@
 **2단이 `(선택)`인 조건은 하나다 — 화면 전역을 켜고 끄는 것이 있을 때만 깔린다.** 없으면 깔지
 않는다. 다른 기능의 요약이나 입구(곁)는 이 바를 켜는 이유가 되지 못하고, 이미 깔린 바의 배치를
 바꾸지도 못한다 — `band--inset`은 `space-between`이라 자리가 양끝 둘뿐이고 전역 토글이 그 둘을
-쓴다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0022-screens-declare-their-body.md)에 있다.
+쓴다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0022-screens-declare-their-body.md)에 있다.
 바디 상단 여백은 `space-8`(32)이고 **바디의 직계 자식 사이는 `space-gap-xl`(24)**이다. 자식은
-섹션이 아니라 블록이라 24다 — 근거는 [`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0021-body-children-are-blocks.md)에
+섹션이 아니라 블록이라 24다 — 근거는 [`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0021-body-children-are-blocks.md)에
 있다. `AppShell`이 이 세 단을 `topRow` · `statusBar` · `children` 슬롯으로 갖고 있다.
 ### 배경 위계
 **읽는 면이 가장 밝다.** 페이지 캔버스가 흰색이고, 틀과 조작하는 것이 회색으로 물러난다. 근거는
-[`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0013-surface-base-is-white.md)에 있다.
+[`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0013-surface-base-is-white.md)에 있다.
 | 자리                                 | 배경             | 색        |
 | ------------------------------------ | ---------------- | --------- |
@@ -54,7 +54,7 @@
 **채운 면의 회색은 한 종류다.** 앞으로 끌어낸 카드와 요약 행이 같은 `surface/raised`이고, 둘은
 색이 아니라 층으로 갈린다 — 여백과 라운드가 다르다
-([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
+([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
 `surface/sunken`은 화면 배경에서 빠지고 컨트롤 안쪽(스위치 트랙·`ProgressBar` 트랙·프리뷰 바닥)에만
 남는다.
@@ -73,7 +73,7 @@
 배경은 밴드가 아니라 바깥 단이 깔기 때문에 **화면 끝까지 간다(풀블리드).** 열에 폭을 걸면 넓은
 화면에서 상태 바 틴트와 하단 바가 중간에서 끊긴다. 근거는
-[`decisions/0014`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0014-full-bleed-bands.md)에 있다.
+[`decisions/0014`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0014-full-bleed-bands.md)에 있다.
 좌우 여백도 밴드가 갖는다 — 상단 행·상태 바·하단 바는 `--palda-layout-inset`, 바디는
 `--palda-layout-page-margin`이다. `box-sizing: border-box`라 `1440`에서의 계산은 그대로다.
@@ -107,7 +107,7 @@
 값도 이미 primitive에 있어서다.
 `--palda-layout-popup-width`(350px)는 브라우저 확장 팝업의 기존 외곽 폭을 보존한 Draft다. Stable
-폭 표에 섞지 않으며 사용 조건과 검토 질문은 [`reviews/draft-tokens.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/reviews/draft-tokens.md)가
+폭 표에 섞지 않으며 사용 조건과 검토 질문은 [`reviews/draft-tokens.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/reviews/draft-tokens.md)가
 정본이다.
 ## 기존 토큰으로 덮이는 값
@@ -129,7 +129,7 @@
 primitive로 직접 쓰는 자리이며 대응하는 semantic이 없다.
 **다만 이 32는 바디의 직계 자식에는 적용되지 않는다.** 그 자리는 블록이라 24이고, `AppShell`이
-`gap`으로 준다([`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0021-body-children-are-blocks.md)의 §대가).
+`gap`으로 준다([`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0021-body-children-are-blocks.md)의 §대가).
 **그래서 섹션을 바디에 바로 쌓지 않는다.** 섹션이 여럿이면 묶음 하나를 블록으로 세우고, 32는 그
 묶음 안에서 준다 — 바디가 보는 것은 블록 하나이고 24가 그대로 맞는다. 시안 세 장이 전부
@@ -186,11 +186,11 @@ primitive index는 `px / 4`라는 기존 규칙 그대로다(`--palda-space-12`,
 **기본값은 감싸지 않는 것이다.** 섹션은 제목과 여백으로 가르고, 목록은 디바이더로 가른다. 보더와
 카드는 고르거나, 열리거나, 떠 있는 것에만 쓴다. 조건과 pattern별 적용은
 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md), 근거는
-[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0011-no-over-carding.md)에 있다.
+[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0011-no-over-carding.md)에 있다.
 ## 좁아질 때
-breakpoint는 `desktop 1440` · `mobile 768` 둘이다([`decisions/0010`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0010-breakpoints.md)).
+breakpoint는 `desktop 1440` · `mobile 768` 둘이다([`decisions/0010`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0010-breakpoints.md)).
 위 표의 값은 `1440` 이상에서만 그대로 들어간다.
 | 구간           | 본문 좌우                          | 상단바·하단바 좌우            | 사이드바  | 2단 |

package/dist/guide/docs/TOKEN_POLICY.md CHANGED Viewed

@@ -7,7 +7,7 @@
 - 이름은 실제 값이 아니라 역할을 표현한다. 예: `color.action.primary.background`.
 - 컴포넌트 CSS에는 `var(--token)` 참조만 쓴다. 시안에 적힌 리터럴 값(`#54B336`, `36px`)을 그대로 옮기지 않는다.
 - 필요한 token이 없으면 추가하지 말고 먼저 확인받는다. 값을 지어내지 않는다. 과거에 있던 token이라도 복원은 확인 대상이다.
-- **값이 어긋나면 코드가 옳다.** 저장소가 SSOT이고([`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0001-design-system-ssot.md), 자산별 경계는 [`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0016-asset-ssot-boundary.md)), Figma와 다른 자리는 코드를 고치지 않고 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 Figma가 바뀌어야 할 목록으로 적는다. 이름이 어긋나는 자리는 [`FIGMA_NAME_MAPPING.md`](FIGMA_NAME_MAPPING.md)에 있다.
+- **값이 어긋나면 코드가 옳다.** 저장소가 SSOT이고([`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0001-design-system-ssot.md), 자산별 경계는 [`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0016-asset-ssot-boundary.md)), Figma와 다른 자리는 코드를 고치지 않고 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 Figma가 바뀌어야 할 목록으로 적는다. 이름이 어긋나는 자리는 [`FIGMA_NAME_MAPPING.md`](FIGMA_NAME_MAPPING.md)에 있다.
 - 저장소의 token 값은 확정치로 취급한다. 명도 대비 미달처럼 품질 문제를 발견하면 보고하되, 컴포넌트에서 다른 색으로 바꾸거나 값 변경을 반복해서 제안하지 않는다.
 - 보더 두께는 예외다. 시스템 전체가 항상 `1px`이며 token으로 만들지 않고 CSS에 직접 쓴다.
 - `tokens/generated/`는 직접 수정하지 않는다. `tokens/*.tokens.json`을 고치고 `pnpm tokens:build`로 다시 만든 뒤, 소스와 생성 파일을 함께 커밋한다. 생성 파일이 빠지면 `pnpm check:generated`가 실패한다.
@@ -163,19 +163,28 @@ focus에서 `border/focus`로 구분한다.
 개별 `font-*` 속성을 컴포넌트 CSS에서 조립하지 않는다. 이유는
 [`COMPONENT_POLICY.md`](COMPONENT_POLICY.md)에 있다.
-| 계층       | 크기 | 언제                    | 쓰는 곳                                                     |
-| ---------- | ---- | ----------------------- | ----------------------------------------------------------- |
-| `display`  | 32px | 쓰지 않는다             | **없음 — 폐기 후보**                                        |
-| `headline` | 24px | 페이지 제목             | 화면의 페이지 헤더 `h1`                                     |
-| `title`    | 20px | 빈 화면 제목            | EmptyState                                                  |
-| `body1`    | 16px | 섹션·카드·모달 제목     | FormSection·Card·Modal 제목                                 |
-| `body2`    | 14px | 기본 컨트롤 라벨과 본문 | Button·Chip·Radio·DropdownButton·TextField·Toast·EmptyState |
-| `label`    | 12px | 작은 라벨, 보조 문구    | Badge(md)·Button(sm)·Chip(sm)·TextField 하단·Tooltip        |
-| `caption`  | 10px | 초소형 캡션             | Badge(sm)                                                   |
+| 계층       | 크기 | 언제                                     | 쓰는 곳                                                     |
+| ---------- | ---- | ---------------------------------------- | ----------------------------------------------------------- |
+| `display`  | 32px | 쓰지 않는다                              | **없음 — 폐기 후보**                                        |
+| `headline` | 24px | 페이지 제목                              | 화면의 페이지 헤더 `h1`                                     |
+| `title`    | 20px | 빈 화면 제목                             | EmptyState                                                  |
+| `body1`    | 16px | 섹션·카드·모달 제목, 본문 목록의 행 제목 | FormSection·Card·Modal 제목·ListRow(`strong`)               |
+| `body2`    | 14px | 기본 컨트롤 라벨과 본문                  | Button·Chip·Radio·DropdownButton·TextField·Toast·EmptyState |
+| `label`    | 12px | 작은 라벨, 보조 문구                     | Badge(md)·Button(sm)·Chip(sm)·TextField 하단·Tooltip        |
+| `caption`  | 10px | 초소형 캡션                              | Badge(sm)                                                   |
 **한 화면의 제목 위계는 셋이다** — 페이지 `headline`(24) → 섹션·카드 `body1`(16) → 행
 `body2`(14). 그 아래 보조 문구가 `label`(12)이다. 코드가 이미 이 값을 갖고 있어(`FormSection`·
-`Card`·`ListRow`) 화면이 다시 고르는 것은 페이지 제목 하나뿐이다.
+`Card`·`ListRow`) 화면이 다시 고르는 것은 페이지 제목과 **본문 목록 여부** 둘이다.
+**행은 두 칸이고 그 목록이 화면의 본문인지가 고른다**
+([`decisions/0034`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0034-the-body-list-lifts-one-step.md)). 곁·요약·참조 나열은 제목
+`body2`(14) + 설명 `label`(12) 그대로이고, 선언서의 본문 문장이 가리키는 목록만 한 칸씩 올라가
+제목 `body1`(16) + 설명 `body2`(14)가 된다. `ListRow`의 `emphasis`가 그것이고 기본값은 올리지
+않는 쪽이다. **한 화면에 올린 목록은 하나다.**
+**제목과 설명은 같이 움직인다.** 제목만 올리면 16 → 12로 두 칸을 건너뛰어 설명이 각주처럼
+떨어진다.
 **페이지 제목은 `headline`(24)이다.** 섹션 제목이 `body1`(16)이라 32는 두 칸을 건너뛰고, 화면에서
 실제로 무겁게 읽힌다. 시안이 `display`(32)와 `title`(20)로 갈려 있던 것을 2026-09-02에 이렇게
@@ -193,10 +202,12 @@ focus에서 `border/focus`로 구분한다.
 따른다. 누를 수 있는 컨트롤이라고 `semibold`가 되지는 않는다. Button은 `semibold`지만 Chip(md)과
 DropdownButton은 `medium`이다.
-크기를 키워서 강조를 만들지 않는다. 강조는 계층과 무게로 만든다.
+크기를 키워서 강조를 만들지 않는다. **임의의 px을 얹지 않는다**는 뜻이다. 고르는 것은 언제나
+계층이고, 계층을 고르는 근거는 그것이 놓인 층이다 — `ListRow`의 `emphasis`가 px이 아니라 값
+둘을 받는 것이 그래서다 (`decisions/0034`).
 읽는 문장에 `label`(12px)을 쓰지 않는다. `label`은 `sm` 컨트롤 라벨과 하단 보조 문구처럼 짧은
-조각의 자리다.
+조각의 자리다. 본문 목록의 행 설명이 `body2`로 올라가는 이유도 이것이다.
 ## 간격
@@ -216,11 +227,11 @@ DropdownButton은 `medium`이다.
 컨트롤은 `sm`, 컨테이너는 `md`, 큰 면은 `lg`가 기준이다. **목록의 행은 컨트롤이 아니라 `md`다** —
 행은 눌리는 컨트롤이 아니라 읽는 줄이고, 제목이 `line-height/100`이라 `sm`으로는 디바이더가 글자에
-붙는다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0019-list-row-vertical-inset.md)).
+붙는다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0019-list-row-vertical-inset.md)).
 **페이지를 조립하는 여백과 폭은 이 스케일이 아니라 `--layout-*`이다.** 컴포넌트 안쪽을 재는
 `--space-*`와 이름 공간이 갈라져 있다. 고르는 규칙은 [`LAYOUT.md`](LAYOUT.md), 근거는
-[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
 `gap/xl`이 layout이 아니라 여기 있는 것은 성격이 "요소 사이"로 같고 값도 이미 primitive에 있어서다.
 primitive를 직접 쓰는 자리가 둘 있다. focus 링의 `outline-offset`은 `space/1`을 쓴다. 안쪽도
@@ -248,7 +259,7 @@ primitive를 직접 쓰는 자리가 둘 있다. focus 링의 `outline-offset`
 `pnpm check:css`가 막는 것은 정의되지 않은 token 참조, `1px`이 아닌 보더·아웃라인 두께,
 `:focus-visible` 대신 쓴 `:focus` 셋이다. 위 표의 선택 규칙 자체는 검사하지 않으므로 사람과
-에이전트가 지킨다. 같은 실수가 반복되면 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/0504d8eaa033955d7a70414616ee999e447a0ced/AGENTS.md) §항상의 "반복되는 오류는
+에이전트가 지킨다. 같은 실수가 반복되면 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/AGENTS.md) §항상의 "반복되는 오류는
 검사로 승격한다"에 따라 검사로 올린다.
 시안에 없는 값은 임의로 정하지 않고 확인받는다. 위 표에서 아직 쓰는 곳이 없다고 적힌 항목은

package/dist/harness/metadata.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.5.0",
-  "sourceRevision": "0504d8eaa033955d7a70414616ee999e447a0ced",
+  "packageVersion": "0.6.0",
+  "sourceRevision": "ad23980481cd81dcf09a1044504d2295f0e4a0f3",
   "exports": {
     ".": {
       "values": [
@@ -123,6 +123,7 @@
         "LinkProps",
         "LinkSize",
         "LinkVariant",
+        "ListRowEmphasis",
         "ListRowProps",
         "LivePreviewProps",
         "LivePreviewStatus",
@@ -293,6 +294,7 @@
         "CardTone",
         "EmptyStateProps",
         "FormSectionProps",
+        "ListRowEmphasis",
         "ListRowProps",
         "LivePreviewProps",
         "LivePreviewStatus"

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 export { AlarmIcon, AlertIcon, ArrowLeftIcon, ArrowRightIcon, BlankIcon, CableIcon, CameraIcon, CardIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, DashboardIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FilterIcon, GiftIcon, HelpIcon, HistoryIcon, HomeIcon, ImageIcon, InfoIcon, KeyIcon, LightbulbIcon, LinkIcon, LoadingIcon, LockIcon, LogoutIcon, MenuIcon, MessageIcon, MonitorIcon, MoreVerticalIcon, MousePointerClickIcon, PauseIcon, PencilIcon, PersonIcon, PhoneIcon, PlusIcon, ProductIcon, RefreshIcon, ReportIcon, SearchIcon, SendIcon, ShieldCheckIcon, SlidersIcon, SmartphoneIcon, SparklesIcon, StarIcon, StoreIcon, SuccessIcon, ThumbsUpIcon, TimerIcon, TrashIcon, TrendingUpIcon, TruckIcon, TypeIcon, UnplugIcon, UploadIcon } from './icons.js';
-export { AppShell, AppShellProps, BottomBar, BottomBarProps, Card, CardProps, CardTone, EmptyState, EmptyStateProps, FormSection, FormSectionProps, ListRow, ListRowProps, LivePreview, LivePreviewProps, LivePreviewStatus } from './patterns.js';
+export { AppShell, AppShellProps, BottomBar, BottomBarProps, Card, CardProps, CardTone, EmptyState, EmptyStateProps, FormSection, FormSectionProps, ListRow, ListRowEmphasis, ListRowProps, LivePreview, LivePreviewProps, LivePreviewStatus } from './patterns.js';
 export { Alert, AlertProps, AlertVariant, Badge, BadgeProps, BadgeSize, BadgeVariant, Button, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxProps, Chip, ChipProps, ChipSize, ChipVariant, DropdownButton, DropdownButtonAlign, DropdownButtonItem, DropdownButtonProps, DropdownButtonVariant, IconButton, IconButtonProps, IconButtonSize, IconButtonVariant, Link, LinkProps, LinkSize, LinkVariant, Modal, ModalActions, ModalActionsProps, ModalProps, NavigationButton, NavigationButtonProps, ProgressBar, ProgressBarProps, Radio, RadioProps, Switch, SwitchProps, SwitchSize, Tab, TabProps, TextField, TextFieldProps, TextFieldSize, TextFieldVariant, ToastOptions, ToastVariant, Toaster, ToasterPlacement, ToasterProps, Tooltip, TooltipPlacement, TooltipProps, toast } from './ui.js';
 import 'react';

package/dist/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ import {
   FormSection,
   ListRow,
   LivePreview
-} from "./chunk-Q4UXASZH.js";
+} from "./chunk-QW2SD3XV.js";
 import "./chunk-EYFL232L.js";
 import {
   Alert,
@@ -29,7 +29,7 @@ import {
   Toaster,
   Tooltip,
   toast
-} from "./chunk-GPCPGABI.js";
+} from "./chunk-6JZPK2W5.js";
 import {
   AlarmIcon,
   AlertIcon,

package/dist/patterns.d.ts CHANGED Viewed

@@ -112,11 +112,21 @@ interface FormSectionProps {
  */
 declare function FormSection({ children, description, error, footer, title }: FormSectionProps): react.JSX.Element;
+type ListRowEmphasis = 'default' | 'strong';
 interface ListRowProps {
     /** 누를 수 있는 행 오른쪽 끝의 chevron. `onClick`이 있으면 기본으로 붙는다. */
     chevron?: boolean;
     children?: ReactNode;
     description?: ReactNode;
+    /**
+     * 행이 놓인 층. 크기를 고르는 자리가 아니라 이 목록이 화면의 본문인지를 밝히는 자리다.
+     * - `default`(기본) — 제목 `body2`(14) · 설명 `label`(12). 곁·요약·참조 나열이다.
+     * - `strong` — 제목 `body1`(16) · 설명 `body2`(14). 선언서의 본문 문장이 가리키는 목록
+     *   하나에만 쓴다. 한 화면에 `strong` 목록은 하나다.
+     *
+     * `tone="filled"`와 함께 쓰지 않는다 — 곁이 본문 크기를 갖는 일이다 (0032, 0034).
+     */
+    emphasis?: ListRowEmphasis;
     /** 제목 앞 아이콘이나 썸네일. */
     leading?: ReactNode;
     /** 자리를 잡아 두는 로딩 표시. 켜면 내용 대신 뼈대를 그린다. */
@@ -140,9 +150,12 @@ interface ListRowProps {
  *
  * `onClick`을 주면 누를 수 있는 행이 되어 button으로 그려지고 오른쪽 끝에 chevron이 붙는다.
  *
+ * 이 목록이 화면의 본문이면 `emphasis="strong"`으로 제목·설명을 한 칸씩 올린다 (0034). 곁·요약
+ * 나열은 기본값 그대로 둔다.
+ *
  * 목록 전체가 비었을 때와 실패했을 때는 이 컴포넌트가 아니라 `EmptyState`를 쓴다.
  */
-declare function ListRow({ chevron, children, description, leading, loading, onClick, selected, title, tone, trailing, }: ListRowProps): react.JSX.Element;
+declare function ListRow({ chevron, children, description, emphasis, leading, loading, onClick, selected, title, tone, trailing, }: ListRowProps): react.JSX.Element;
 type LivePreviewStatus = 'ready' | 'loading' | 'empty' | 'error';
 interface LivePreviewProps {
@@ -159,4 +172,4 @@ interface LivePreviewProps {
  */
 declare function LivePreview({ children, message, status, title }: LivePreviewProps): react.JSX.Element;
-export { AppShell, type AppShellProps, BottomBar, type BottomBarProps, Card, type CardProps, type CardTone, EmptyState, type EmptyStateProps, FormSection, type FormSectionProps, ListRow, type ListRowProps, LivePreview, type LivePreviewProps, type LivePreviewStatus };
+export { AppShell, type AppShellProps, BottomBar, type BottomBarProps, Card, type CardProps, type CardTone, EmptyState, type EmptyStateProps, FormSection, type FormSectionProps, ListRow, type ListRowEmphasis, type ListRowProps, LivePreview, type LivePreviewProps, type LivePreviewStatus };

package/dist/patterns.js CHANGED Viewed

@@ -6,8 +6,8 @@ import {
   FormSection,
   ListRow,
   LivePreview
-} from "./chunk-Q4UXASZH.js";
-import "./chunk-GPCPGABI.js";
+} from "./chunk-QW2SD3XV.js";
+import "./chunk-6JZPK2W5.js";
 import "./chunk-TWYJ2UTC.js";
 export {
   AppShell,

package/dist/scripts/check-examples.mjs CHANGED Viewed

@@ -41,7 +41,13 @@ const ROW = /^\|([^|]*)\|([^|]*)\|/;
 /** 표의 구분선(`| --- | --- |`)은 항목이 아니다. */
 const DIVIDER = /^[\s:-]*$/;
-const PRIMARY_ACTION_PLACES = new Set(['헤더 우측', 'BottomBar']);
+/**
+ * 주 액션의 자리. `없음`은 고르는 행위가 본문 안에서 끝나는 화면이다 — 목록을 훑고 행을 눌러
+ * 들어가는 화면은 행이 곧 액션이라 헤더나 하단에 세울 것이 없다
+ * (`docs/decisions/0033-a-screen-may-have-no-primary-action.md`). 행 자체는 여전히 필수라
+ * "적기를 잊은 것"과 "정말 없는 것"이 갈린다.
+ */
+const PRIMARY_ACTION_PLACES = new Set(['헤더 우측', 'BottomBar', '없음']);
 /** 시안을 찾는 곳. `preview/`는 untracked라 CI에서는 비어 있고 로컬에서만 걸린다. */
 const SCREEN_DIRS = ['preview', 'examples'];
@@ -79,41 +85,6 @@ const EMPHASIS_CLASSES = [
   'palda-chip--accent',
 ];
-/**
- * 곁이 세로로 한 줄인지(0022 규칙 1)를 정적으로 근사한다. 블록 요소가 하나라도 들어 있으면
- * 줄이 나뉜다 — 곁에 남는 표현은 텍스트와 `Link`라(0022 §대가) 인라인만으로 충분하다.
- * 줄바꿈 자체는 폭에 달려 있어 여전히 못 읽는다. 이 검사가 잡는 것은 마크업으로 이미 갈라 둔
- * 경우다.
- */
-const BLOCK_ELEMENTS = new Set([
-  'address',
-  'article',
-  'aside',
-  'blockquote',
-  'div',
-  'dl',
-  'fieldset',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hr',
-  'li',
-  'main',
-  'nav',
-  'ol',
-  'p',
-  'section',
-  'table',
-  'ul',
-]);
 /**
  * 상태를 드는 자리 (0024 — 상태는 가장 가까운 자리가 든다).
  * 한 섹션이 둘을 같이 쓰면 행 하나의 실패를 섹션이 대신 말한 것이다. `\b`가 `_`를 경계로 보지
@@ -325,16 +296,6 @@ function checkBlocks(blocks, declaredAsides, where, problems) {
         );
       }
     }
-    // 규칙 1 — 세로로 한 줄이다. 블록 요소가 들어 있으면 이미 여러 줄이다.
-    const inner = scanTags(block.html)
-      .slice(1)
-      .filter((tag) => !tag.closing && BLOCK_ELEMENTS.has(tag.name));
-    if (inner.length > 0) {
-      problems.push(
-        `${where}: 곁 안에 블록 요소(<${inner[0].name}>)가 있다 — 곁은 세로로 한 줄이다 (0022 규칙 1)`,
-      );
-    }
   }
   // 상태는 가장 가까운 자리가 든다 (0024). 소속과 무관하게 바디 전체를 본다.
@@ -368,7 +329,8 @@ function checkBlocks(blocks, declaredAsides, where, problems) {
     );
   }
-  // 선언되지 않은 곁은 화면에 들어오지 못한다.
+  // 선언되지 않은 곁은 화면에 들어오지 못한다. 곁이 몇 개여야 하는지는 세지 않는다 — 기능이
+  // 다르면 블록도 다르고(0032 규칙 1), 개수는 기능 수가 정한다.
   const drawn = roles.filter((role) => role === '곁').length;
   if (drawn !== declaredAsides) {
     problems.push(

package/dist/styles.css CHANGED Viewed

@@ -1355,6 +1355,11 @@
   justify-content: center;
   width: 24px;
 }
+.palda-tab__badge {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+}
 .palda-tab__label {
   white-space: nowrap;
 }
@@ -2112,6 +2117,12 @@ button.palda-list-row:focus-visible {
   height: var(--palda-font-size-xs);
   width: 70%;
 }
+.palda-list-row--strong .palda-list-row__skeleton--title {
+  height: var(--palda-font-size-md);
+}
+.palda-list-row--strong .palda-list-row__skeleton--description {
+  height: var(--palda-font-size-sm);
+}
 @keyframes palda-list-row-pulse {
   from {
     opacity: 1;

package/dist/ui.d.ts CHANGED Viewed

@@ -174,10 +174,15 @@ interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'role'
     children: ReactNode;
     /** 라벨 앞 아이콘. 시안 기준 24px 고정이다. */
     icon?: ReactNode;
+    /**
+     * 라벨 뒤 배지. 그룹별 개수처럼 탭을 열지 않고도 보여야 하는 수를 싣는다.
+     * `Badge`를 넣는 자리이며 크기는 `sm`을 쓴다 — 라벨이 Body2(14px)라 md(28px)는 라벨보다 커진다.
+     */
+    badge?: ReactNode;
     /** 지금 보고 있는 탭. `aria-selected`로 함께 노출된다. */
     selected?: boolean;
 }
-declare function Tab({ children, className, icon, selected, ...props }: TabProps): react.JSX.Element;
+declare function Tab({ children, className, icon, badge, selected, ...props }: TabProps): react.JSX.Element;
 type TextFieldVariant = 'outline' | 'accent' | 'subtle';
 type TextFieldSize = 'md' | 'sm';

package/dist/ui.js CHANGED Viewed

@@ -19,7 +19,7 @@ import {
   Toaster,
   Tooltip,
   toast
-} from "./chunk-GPCPGABI.js";
+} from "./chunk-6JZPK2W5.js";
 import "./chunk-TWYJ2UTC.js";
 export {
   Alert,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@highpixel-co/palda-design-system",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Palda product design tokens, icons, React components, and patterns",
   "license": "MIT",
   "type": "module",