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

package/dist/guide/docs/DESIGN_GRAMMAR.md

@@ -16,6 +16,8 @@
 | 이거 하면 안 되는 건가?   | 같은 문서 §6 지양할 디자인 — 시각·구조 두 표                              |
 | 규칙끼리 부딪히면?        | 같은 문서 §7 판단이 충돌할 때                                             |
 | 이 화면의 틀은?           | [`LAYOUT.md`](LAYOUT.md) §셸 — 모든 화면이 같다. 한 번만 읽으면 된다      |
+| 이 화면이 무엇을 만지나?  | 아래 §무엇을 그리기 전에 세나 — 섹션은 이 표의 조회 결과다                |
+| 비슷한 화면이 이미 있나?  | 아래 §자매 화면 — 자매면 섹션 집합을 공유한다                             |
 | 페이지인가 모달인가?      | 아래 §띄우나 마나 §언제 모달인가 — 세 관문                                |
 | 무엇으로 조립하나?        | 아래 §어느 pattern을 고르나                                               |
 | 이 자리에 이 패턴이 맞나? | [`catalog/patterns.yml`](../catalog/patterns.yml)의 `use_for`·`avoid_for` |
@@ -33,7 +35,7 @@
 | 좁아지면?                 | [`LAYOUT.md`](LAYOUT.md) §좁아질 때                                       |
 
 **ADR은 여기서 읽지 않는다.** 근거 보관소지 지시서가 아니고, 대체된 값이 그대로 남아 있다.
-기준은 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/AGENTS.md)의 §ADR은 화면 만들 때 읽지 않는다에 있다.
+기준은 [`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/AGENTS.md)의 §ADR은 화면 만들 때 읽지 않는다에 있다.
 
 ### 아직 답할 문서가 없는 질문
 
@@ -43,7 +45,7 @@
 [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §타이포가 받았다 — 페이지 `headline`(24) → 섹션·카드
 `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`가
+([`decisions/0034`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0034-the-body-list-lifts-one-step.md)) — `ListRow`의 `emphasis`가
 그것이고, 판정은 "선언서의 본문 문장이 가리키는 목록인가" 하나다.
 
 ### 주 액션을 어디 두나
@@ -57,14 +59,14 @@
 [`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)).
+`없음`이라 적는다 ([`decisions/0033`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0033-a-screen-may-have-no-primary-action.md)).
 **자리를 채우려고 다른 층의 기능을 끌어올리지 않는다** — 스토어 알림톡 목록이 그렇게 결제
 기능(3층)을 헤더 우측(1층)으로 올렸다가 되돌렸다.
 
 ## 곁을 어디 두나
 
 **박스를 두를지 묻기 전에 이것부터 묻는다.** 같은 블록이라도 이 화면 것이냐 아니냐로 규칙이
-갈린다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0022-screens-declare-their-body.md)에 있다.
+갈린다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0022-screens-declare-their-body.md)에 있다.
 
 > 이것은 **이 화면이 선언한 본문**인가?
 
@@ -74,6 +76,10 @@
 **선언에 들지 않은 것은 전부 곁이다.** 다른 기능의 요약이거나 그리로 가는 입구다. 판단이 아니라
 뺄셈이라, 그릴 때마다 다시 고르지 않는다.
 
+선언 표의 행은 넷이다 — `본문` · `주 액션` · `갈래` · `곁`. `갈래`는 본문을 무엇으로 가르는지이고
+(`탭`·`섹션`·`탭+섹션`·`없음`) 아래 §탭은 하나다가 그 판정을 갖는다. 자매 화면이 있으면 `자매`
+행이 하나 더 붙는다 ([`0036`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0036-sibling-screens-share-their-sections.md)).
+
 ### 손잡이가 둘이다
 
 하나로 보면 자리는 많이 먹으면서 눈에는 안 띄는 블록이 나온다.
@@ -96,7 +102,7 @@
 **면이 층을 가른다.** 본문은 흰 캔버스 위에서 디바이더로 갈리고 곁은 회색 면에 얹힌다. 글자는
 양쪽 다 `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)에 있다.
+[`decisions/0032`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0032-asides-are-one-filled-block.md)에 있다.
 
 | 자리 | 면               | 경계     | 글자           | 대비      |
 | ---- | ---------------- | -------- | -------------- | --------- |
@@ -113,7 +119,7 @@
 
 **규칙 셋은 "본문보다 가볍게"만 말하고 얼마나 가볍게는 말하지 않는다.** 그리기 전에 **기능
 위계**를 정한다 — 이 페이지가 하는 일에 얼마나 직접 기여하는가. 근거는
-[`decisions/0031`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0031-function-hierarchy-before-drawing.md)에 있다.
+[`decisions/0031`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0031-function-hierarchy-before-drawing.md)에 있다.
 
 ```
 1. 페이지의 기능·텍스트를 **기능 단위로** 묶는다
@@ -170,7 +176,7 @@ pattern·자리·면적·채움이 낸다.
 | 나쁜 값 | `Alert`. 무엇을 해야 하는지 액션을 함께 둔다 |
 
 **올라온 것은 화면에 하나다.** 나쁜 값이 둘이면 더 먼저 손대야 하는 것만 올린다. 근거는
-[`decisions/0030`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0030-asides-rise-only-on-bad-values.md)에 있다.
+[`decisions/0030`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0030-asides-rise-only-on-bad-values.md)에 있다.
 
 > 위계가 자리와 무게를 정하고, 상태는 그 자리에서 잠깐 올라올 뿐 위계를 바꾸지 않는다.
 
@@ -223,7 +229,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 | 섹션 안            | 행·요소 | `inset/md`(16) | `control`(10)   | `ListRow tone="filled"` |
 
 **층을 가르는 것은 라운드다.** 안쪽 여백은 둘 다 16이라 층을 가르지 못한다 — 행의 상하 여백을
-16으로 올리면서 같아졌다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0019-list-row-vertical-inset.md)). 값의
+16으로 올리면서 같아졌다([`decisions/0019`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0019-list-row-vertical-inset.md)). 값의
 근거는 [`TOKEN_POLICY.md`](TOKEN_POLICY.md) §라운드 표이고, 여백은 같은 문서 §간격에 있다.
 
 **첫 질문은 상호작용만 가르고 층위는 가르지 않는다.** 고르지도 열리지도 떠 있지도 않은 요약
@@ -280,7 +286,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 
 **채운 면은 `Card`든 `ListRow`든 같은 회색이다.** `tone="filled"`가 두 곳에서 같은 뜻이고 같은
 값이며, 갈리는 것은 색이 아니라 층이다 — 여백과 라운드가 다르다
-([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
+([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
 
 ### 쓰지 않는 경우 — 기본값
 
@@ -319,23 +325,40 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 
 ### pattern에 어떻게 들어가 있나
 
-| pattern       | 보더 | 그림자 | 자리                                                                  |
-| ------------- | ---- | ------ | --------------------------------------------------------------------- |
-| `FormSection` | 없음 | 없음   | **설정·정보 섹션의 기본**. 제목 + 설명 + 콘텐츠                       |
-| `ListRow`     | 없음 | 없음   | 행 사이 디바이더만. 박스로 감싸지 않는다                              |
-| `Card`        | 있음 | 없음   | 고를 수 있는 객체 · 페이지 최상위 요약 블록. 채움은 `tone`(기본 흰색) |
-| `LivePreview` | 있음 | 있음   | 떠 있는 표면                                                          |
-| `BottomBar`   | 있음 | 있음   | 화면 아래에 떠 있는 바                                                |
-| `AppShell`    | —    | —      | 사이드바 + 콘텐츠 틀                                                  |
+| pattern       | 보더 | 그림자 | 자리                                                                      |
+| ------------- | ---- | ------ | ------------------------------------------------------------------------- |
+| `FormSection` | 없음 | 없음   | **설정·정보 섹션의 기본**. 제목 + 설명 + 콘텐츠. 채움은 `tone`(기본 없음) |
+| `ListRow`     | 없음 | 없음   | 행 사이 디바이더만. 박스로 감싸지 않는다                                  |
+| `Card`        | 있음 | 없음   | 고를 수 있는 객체 · 페이지 최상위 요약 블록. 채움은 `tone`(기본 흰색)     |
+| `LivePreview` | 있음 | 있음   | 떠 있는 표면                                                              |
+| `BottomBar`   | 있음 | 있음   | 화면 아래에 떠 있는 바                                                    |
+| `AppShell`    | —    | —      | 사이드바 + 콘텐츠 틀                                                      |
 
 `Card`를 섹션 묶기에 쓰지 않는다. 섹션은 `FormSection`이다. 근거는
-[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0011-no-over-carding.md)에 있다.
+[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0011-no-over-carding.md)에 있다.
+
+**섹션이 여럿 쌓여 제목과 여백만으로 안 갈리면 `FormSection`의 `tone="filled"`를 쓴다.** 내용만
+회색 면에 담고 제목은 캔버스에 남는다 — 제목까지 담으면 곁과 모양이 같아져 곁이 흡수된다
+([`0032`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0032-asides-are-one-filled-block.md)). 면 위에서 입력과 요약 행은 흰 면으로 한
+단계 밝아진다. 기본값은 여전히 `plain`이고, 근거는
+[`decisions/0037`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0037-stacked-sections-fill-their-content.md)에 있다.
+
+면을 켜는 조건 둘은 `pnpm check:examples`가 센다.
+
+| 조건                      | 무엇                                           |
+| ------------------------- | ---------------------------------------------- |
+| 형제가 있을 때만          | 섹션이 하나뿐이면 가를 것이 없고 곁만 흡수된다 |
+| 내용이 덩어리가 아닐 때만 | 카드 그리드는 이미 덩어리라 면이 두 겹이 된다  |
+
+**본문을 무엇으로 가르는지는 선언서의 `갈래` 행이 밝힌다** — `탭`·`섹션`·`탭+섹션`·`없음`.
+같은 종류의 갈래면 탭이고 서로 다른 종류의 나열이면 섹션이다. 적은 값과 마크업이 어긋나면
+같은 검사가 잡는다.
 
 ## 띄우나 마나
 
 **깊이와 끊김은 다른 축이다.** 위 §두 번째 질문은 페이지 **안쪽** 층(면인가 행인가)을 가르고,
 이 절은 페이지 **위로** 뜨는 층을 가른다. 근거는
-[`decisions/0020`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0020-modal-depth-and-scrim.md)에 있다.
+[`decisions/0020`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0020-modal-depth-and-scrim.md)에 있다.
 
 ### 층
 
@@ -357,7 +380,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 
 **딤은 `overlay/dim`(70% 검정)이다.** 시안에서 온 값은 아니지만 2026-08-31에 이대로 확정했다.
 옅게 잡으면 두 가지가 같이 무너진다 — 4층을 3층과 가르는 시각 신호가 딤뿐이고, **모달 카드가
-흰색인 것**([`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0013-surface-base-is-white.md))**이 짙은 딤 위에서만
+흰색인 것**([`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0013-surface-base-is-white.md))**이 짙은 딤 위에서만
 성립한다.** 카드와 딤 처리된 뒤 캔버스의 대비가 70%에서 8.5:1인데 30%에서는 2.1:1로 떨어져,
 카드가 떠 있는 것으로 읽히지 않는다. 뒤 본문 대비도 70%에서 2.25:1이라 내용을 읽을 수 없고,
 그래서 아래 1번 관문의 기준선이 흐려지지 않는다.
@@ -393,6 +416,75 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 이긴다** — 규칙과 반대다. `Toaster`를 stacking context를 만드는 조상 안에 두면 이 값도 듣지
 않으므로, 앱 최상위에 하나만 둔다.
 
+## 무엇을 그리기 전에 세나
+
+**아래 §어느 pattern을 고르나의 입력을 만드는 자리다.** pattern 표는 "하려는 것"을 받아 pattern을
+주는데, 그 "하려는 것"을 누가 어떻게 뽑는지가 없었다. 근거는
+[`decisions/0035`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0035-screens-count-what-they-touch.md)에 있다.
+
+**화면이 만지는 것을 표로 적는다. 훑는 자리를 정하지 않으면 손에 잡히는 것을 훑는다** — 같은
+화면을 두 번 그리면 한 번은 도메인 상수를, 한 번은 훅의 반환 모양을 훑어서 다른 화면이 나온다.
+
+| 열     | 값                                              |
+| ------ | ----------------------------------------------- |
+| `대상` | 사람이 부르는 이름                              |
+| `종류` | `켠다` · `정한다` · `고른다` **셋뿐이다**       |
+| `단위` | 이 값이 걸리는 범위 (화면 · 조건 · 항목 하나 …) |
+| `출처` | 이 값의 정의가 어디 있나                        |
+
+셋에 안 들어가는 것이 나오면 지어내지 말고 멈춘다 ([`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/AGENTS.md) §항상). 액션은
+종류가 아니라 이 셋에 붙는 동사라 `액션`으로 적고, 섹션이 될지는 `단위`가 정한다.
+
+### 종류 × 단위가 섹션을 정한다
+
+**표가 채워지면 섹션은 조회다.** 여기서 다시 판단하지 않는다.
+
+| 종류 × 단위        | 나오는 것                                                                                    |
+| ------------------ | -------------------------------------------------------------------------------------------- |
+| 켠다 × 화면·조건   | `FormSection` 하나, 맨 위                                                                    |
+| 정한다 × 화면·조건 | `FormSection` 하나                                                                           |
+| 고른다 × 화면·조건 | 목록·그리드 `FormSection`                                                                    |
+| 켠다·정한다 × 항목 | 그 항목의 카드 안 ([`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)) |
+| 고른다 × 항목      | 다음 뎁스                                                                                    |
+
+**`단위`가 화면·조건이면 섹션이 되고, 항목이면 그 항목 안으로 내려간다.** 카드 하나를 끄는 것은
+그 카드의 일이고, 조건 전체를 끄는 것은 화면의 일이다.
+
+### 같은 대상은 같은 출처를 갖는다
+
+두 화면이 같은 `대상`을 다른 `출처`에서 읽으면 정의가 둘이라는 뜻이다. 지금은 우연히 값이 같아도
+한쪽만 고치면 갈라진다. **`출처` 열이 없으면 이것이 안 보인다.**
+
+이 표는 시안 HTML 맨 위 주석의 화면 선언 표 바로 아래에 둔다. 형식은
+[`examples/approved/README.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/examples/approved/README.md)에 있다.
+
+## 자매 화면
+
+**같은 도메인 개념을 다루는 두 화면은 자매다.** 조건 화면 둘이 같은 `ConditionType` 하나를 받으면
+자매다. 근거는 [`decisions/0036`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0036-sibling-screens-share-their-sections.md)에 있다.
+
+**이름이 비슷한 것이 아니라 다루는 개념이 같은 것이다.** "스토어 알림톡"과 "상품 알림톡"은 이름만
+보면 다른 화면으로 읽힌다 — 유사도로 판정하면 놓친다.
+
+**자매는 섹션 집합을 공유한다. 다른 섹션은 선언에 적어야 한다.** 차이를 금지하지 않고, 적지 않은
+차이만 막는다.
+
+```
+스토어  { 발송, 템플릿, 테스트 발송 }
+상품    { 발송, 상품 템플릿 }
+
+등록된 차이
+1. [템플릿] ↔ [상품 템플릿] — 조건당 택1 하나 대 최대 10개 관리
+2. [테스트 발송] — 상품 쪽은 템플릿 단위라 카드 안으로 내려간다 (0024)
+```
+
+**양쪽 다 적는다.** 한쪽만 적으면 반대편에서 그리는 사람이 모른다. `check:examples`가 짝이 맞는지
+센다.
+
+**섹션 이름이 같아야 같은 섹션이다.** `템플릿`과 `상품 템플릿`은 다른 섹션으로 센다 — 접두어를
+넘어가게 만들면 어디까지 넘어갈지가 다시 판단이 된다. 뒤에 붙는 개수 표기(`상품 템플릿 3/10`)만
+떼고 비교한다.
+
 ## 어느 pattern을 고르나
 
 **하려는 일에서 고른다. 생김새가 비슷하다고 고르지 않는다.** 아래 오른쪽 열은 같은 자리에서
@@ -414,10 +506,10 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 | 목록·검색 결과가 비었을 때          | `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)).
+일이고 [`0032`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0032-asides-are-one-filled-block.md)와 어긋난다. 한 화면에 `strong`
+목록은 하나다 ([`0034`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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)에 있다.
+`Card`를 섹션 묶기에 쓰지 않는 근거는 [`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0011-no-over-carding.md)에 있다.
 `Tab`과 `Chip`이 갈리는 이유는 위 §절대 규칙의 "필터는 탭이다"와 같다 — 필터는 고르는 객체가
 아니라 갈래 전환이라 선택된 카드와 같은 문법을 쓰지 않는다.
 
@@ -426,7 +518,7 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 **한때 둘이었다.** `Tab`(컴포넌트)과 `FilterTabs`(pattern)가 "내용이 바뀌나, 같은 내용이
 좁혀지나"로 갈렸는데 그 구분을 없앴다 — Figma 원본에 탭 컴포넌트 세트가 하나뿐이고, 두 자리는
 실제로 같이 쓰인다. 어느 값이 남았는지와 근거는
-[`decisions/0023`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0023-one-tab.md)에 있다.
+[`decisions/0023`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0023-one-tab.md)에 있다.
 
 | 무엇       | 값                                                        |
 | ---------- | --------------------------------------------------------- |
@@ -443,6 +535,14 @@ pattern을 쓰고 있거나, 강조를 갖고 있다.
 **갈래를 제목으로 세우지 않는다.** 같은 종류가 여러 갈래로 나뉜 목록은 제목을 갈래 수만큼 세우는
 대신 탭이 가른다. 서로 다른 종류의 섹션은 그대로 제목과 여백으로 가른다(위 §쓰지 않는 경우).
 
+**갈리는 지점은 선언서의 본문 문장이다.** 그 문장이 목록 하나를 가리키면 갈래는 그 목록의 분류라
+탭이고(스토어 알림톡 — "어떤 주문 상황에 알림톡을 보낼지 고른다"), 서로 다른 것을 나열하면
+섹션이다(내 계정 — "내 정보와 구독을 확인하고 바꾼다"). 탭은 하나만 보여주고 나머지를 숨기는
+장치라, **숨겨도 본문 문장이 깨지지 않아야** 쓸 수 있다.
+
+고른 결과는 선언 표의 `갈래` 행에 적고, 적은 값과 마크업이 어긋나면 `pnpm check:examples`가
+잡는다. 판정 자체는 검사하지 않는다 — 몇 갈래부터 탭인지는 수치로 정하지 않았다.
+
 ## 상태는 누가 갖나
 
 **틀은 상태를 갖지 않는다. 늘 그려지고, 상태는 안에 놓인 것이 가진다.** `AppShell`과 `Card`에
@@ -464,10 +564,10 @@ loading·empty·error를 두지 않는 이유다. 틀에 상태를 두면 같은
 **상태는 그것을 가진 것에 가장 가까운 자리가 든다.** 한 단계 위로 올리는 것은 그 단계 전체가 못
 쓰게 되었을 때뿐이다. 행 하나가 실패한 것을 섹션 배너로 올리면 같은 사실을 두 번 말하게 되고,
 면적이 큰 배너가 본문보다 강해져 정작 봐야 할 목록을 덮는다. 근거는
-[`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)에 있다.
+[`decisions/0024`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0024-state-belongs-to-the-nearest-owner.md)에 있다.
 
 위 표는 pattern에서 **누가 소유하는가**만 정한다. 소유가 정해진 상태를 컴포넌트 하나 안에서
-어떻게 표현하는지는 [`decisions/0004`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0004-component-state-naming.md)의 5분류를
+어떻게 표현하는지는 [`decisions/0004`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0004-component-state-naming.md)의 5분류를
 따른다 — 그중 prop으로 빼는 것은 "부모가 정함"(`selected`·`error`) 하나뿐이고, 나머지는 CSS
 의사클래스·네이티브 속성·값에서 파생·내부 state다.
 

package/dist/guide/docs/DESIGN_PRINCIPLES.md

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

package/dist/guide/docs/FIGMA_ALIGNMENT_DELTA.md

@@ -6,10 +6,10 @@
 둔 것이다. 여기 적힌 것은 코드에서 고칠 일이 아니다. 코드는 이미 오른쪽 열의 값을 갖고 있다.
 
 이 저장소에서는 Figma를 편집할 수 없다. 그래서 "Figma가 이렇게 바뀌어야 한다"를 코드 변경 대신
-문서로 내보낸다. 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0001-design-system-ssot.md)이다.
+문서로 내보낸다. 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)).
+차가운 회색으로 옮겼다([`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0013-surface-base-is-white.md)). 캔버스가 흰색이고 떠 있는 면과
+([`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
+([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
 
 ### 새 컴포넌트 2종
 

package/dist/guide/docs/FIGMA_NAME_MAPPING.md

@@ -6,13 +6,13 @@
 쓸 때 이 표로 옮기고, Figma 쪽을 정리할 때도 이 표를 목표로 삼는다.
 
 값이 다른 항목은 이 문서가 아니라 [`FIGMA_ALIGNMENT_DELTA.md`](FIGMA_ALIGNMENT_DELTA.md)에 있다.
-여기는 **이름만** 다루고, 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0001-design-system-ssot.md)이다.
+여기는 **이름만** 다루고, 근거는 [`decisions/0001`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0017-css-variable-prefix.md)). Figma에서 변수 이름을 검색해
+([`decisions/0017`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0009-elevation-shadow-tokens.md)에 있다.
+[`decisions/0009`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0008-layout-scale-separate-from-component-scale.md)과
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0008-layout-scale-separate-from-component-scale.md)과
 [`LAYOUT.md`](LAYOUT.md)를 본다.

package/dist/guide/docs/FIGMA_WORKFLOW.md

@@ -2,19 +2,19 @@
 
 **Figma에서 정한 것을 저장소에 반영하고, 시안 코드를 읽어 구현으로 옮기는 절차다.**
 
-**원본은 저장소이고 Figma는 미러다**([`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0016-asset-ssot-boundary.md)).
+**원본은 저장소이고 Figma는 미러다**([`decisions/0016`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/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/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0015-neutral-scale-adopts-figma-cool-gray.md)다.
+   것으로 기록한다 — 전례는 [`decisions/0015`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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

@@ -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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0016-asset-ssot-boundary.md)). `catalog/icons.yml`의 `figma`가 아직 전부
+([`0016`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/AGENTS.md) §항상의 "지어내지 않고, 허용 상태와 사용 조건을 먼저 정의해 확인받는다"를
+[`AGENTS.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/AGENTS.md) §항상의 "지어내지 않고, 허용 상태와 사용 조건을 먼저 정의해 확인받는다"를
 아이콘에 적용한 것이다.
 
 ### 새 아이콘이 들어왔을 때
@@ -76,7 +76,7 @@ HTML로 먼저 확정한다). 그림을 먼저 그리면 무엇을 그렸는지
 ## 출처
 
 **아이콘마다 어디서 왔는지를 manifest에 적는다.** 세트마다 라이선스가 다르고, 들어온 때에
-안 적으면 나중에 되짚을 수 없다. 근거는 [`decisions/0027`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0027-icons-record-where-they-came-from.md)이다.
+안 적으면 나중에 되짚을 수 없다. 근거는 [`decisions/0027`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0027-icons-record-where-they-came-from.md)이다.
 
 ```json
 "copy": {

package/dist/guide/docs/LAYOUT.md

@@ -4,7 +4,7 @@
 
 컴포넌트 안쪽을 재는 `--space-*`와 다른 스케일이고, 섞어 쓰지
 않는다. 계층을 나눈 이유는
-[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0008-layout-scale-separate-from-component-scale.md)에 있다.
+[`decisions/0008`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0012-canonical-app-shell.md)에 있다.
+[`decisions/0012`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0022-screens-declare-their-body.md)에 있다.
+쓴다. 근거는 [`decisions/0022`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0021-body-children-are-blocks.md)에
+섹션이 아니라 블록이라 24다 — 근거는 [`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0021-body-children-are-blocks.md)에
 있다. `AppShell`이 이 세 단을 `topRow` · `statusBar` · `children` 슬롯으로 갖고 있다.
 
 ### 배경 위계
 
 **읽는 면이 가장 밝다.** 페이지 캔버스가 흰색이고, 틀과 조작하는 것이 회색으로 물러난다. 근거는
-[`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0013-surface-base-is-white.md)에 있다.
+[`decisions/0013`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0013-surface-base-is-white.md)에 있다.
 
 | 자리                                 | 배경             | 색        |
 | ------------------------------------ | ---------------- | --------- |
@@ -54,10 +54,16 @@
 
 **채운 면의 회색은 한 종류다.** 앞으로 끌어낸 카드와 요약 행이 같은 `surface/raised`이고, 둘은
 색이 아니라 층으로 갈린다 — 여백과 라운드가 다르다
-([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
+([`decisions/0018`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0018-summary-row-shares-the-filled-surface.md)).
 `surface/sunken`은 화면 배경에서 빠지고 컨트롤 안쪽(스위치 트랙·`ProgressBar` 트랙·프리뷰 바닥)에만
 남는다.
 
+**예외 하나 — 면 위의 컨트롤은 한 단계 밝아진다.** 위 규칙("조작하는 것이 회색으로 물러난다")은
+흰 캔버스 위에서의 이야기다. `FormSection`의 `tone="filled"`처럼 회색 면 안에 들어가면 입력이 같은
+`surface/raised`끼리 겹쳐 채움이 사라지므로, 면 안에서는 입력이 `surface/base`로 올라간다. 면이 한
+종류뿐이라 생기는 충돌이고, 근거는 [`decisions/0037`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0037-stacked-sections-fill-their-content.md)에
+있다. 지금 이 손잡이를 가진 것은 `TextField`뿐이다.
+
 **카드도 기본은 흰색이다.** 회색 면이 여러 장 반복되면 전부 똑같이 무거워져 어느 것도 앞에
 서지 못한다. 강조는 한 화면에서 하나를 `Card`의 `tone="filled"`로 올려서 낸다. 조건은
 [`DESIGN_GRAMMAR.md`](DESIGN_GRAMMAR.md) §쓰는 경우에 있다.
@@ -73,7 +79,7 @@
 
 배경은 밴드가 아니라 바깥 단이 깔기 때문에 **화면 끝까지 간다(풀블리드).** 열에 폭을 걸면 넓은
 화면에서 상태 바 틴트와 하단 바가 중간에서 끊긴다. 근거는
-[`decisions/0014`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0014-full-bleed-bands.md)에 있다.
+[`decisions/0014`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0014-full-bleed-bands.md)에 있다.
 
 좌우 여백도 밴드가 갖는다 — 상단 행·상태 바·하단 바는 `--palda-layout-inset`, 바디는
 `--palda-layout-page-margin`이다. `box-sizing: border-box`라 `1440`에서의 계산은 그대로다.
@@ -107,7 +113,7 @@
 값도 이미 primitive에 있어서다.
 
 `--palda-layout-popup-width`(350px)는 브라우저 확장 팝업의 기존 외곽 폭을 보존한 Draft다. Stable
-폭 표에 섞지 않으며 사용 조건과 검토 질문은 [`reviews/draft-tokens.md`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/reviews/draft-tokens.md)가
+폭 표에 섞지 않으며 사용 조건과 검토 질문은 [`reviews/draft-tokens.md`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/reviews/draft-tokens.md)가
 정본이다.
 
 ## 기존 토큰으로 덮이는 값
@@ -129,7 +135,7 @@
 primitive로 직접 쓰는 자리이며 대응하는 semantic이 없다.
 
 **다만 이 32는 바디의 직계 자식에는 적용되지 않는다.** 그 자리는 블록이라 24이고, `AppShell`이
-`gap`으로 준다([`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0021-body-children-are-blocks.md)의 §대가).
+`gap`으로 준다([`decisions/0021`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0021-body-children-are-blocks.md)의 §대가).
 
 **그래서 섹션을 바디에 바로 쌓지 않는다.** 섹션이 여럿이면 묶음 하나를 블록으로 세우고, 32는 그
 묶음 안에서 준다 — 바디가 보는 것은 블록 하나이고 24가 그대로 맞는다. 시안 세 장이 전부
@@ -186,11 +192,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/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0011-no-over-carding.md)에 있다.
+[`decisions/0011`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0011-no-over-carding.md)에 있다.
 
 ## 좁아질 때
 
-breakpoint는 `desktop 1440` · `mobile 768` 둘이다([`decisions/0010`](https://github.com/highpixel-co/palda-design-system/blob/ad23980481cd81dcf09a1044504d2295f0e4a0f3/docs/decisions/0010-breakpoints.md)).
+breakpoint는 `desktop 1440` · `mobile 768` 둘이다([`decisions/0010`](https://github.com/highpixel-co/palda-design-system/blob/abee826d0afda16bd3776f015931e0a820a8876e/docs/decisions/0010-breakpoints.md)).
 위 표의 값은 `1440` 이상에서만 그대로 들어간다.
 
 | 구간           | 본문 좌우                          | 상단바·하단바 좌우            | 사이드바  | 2단 |