sellmate-design-system-react 5.0.1 → 6.0.0

package/dist/llms-full.txt

@@ -165,15 +165,24 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - 형제 요소 간격은 margin 대신 부모의 `flex`/`grid` + `gap-sd-*`으로 잡는다.
 - 시맨틱 간격 토큰 (텍스트 덩어리·요소 사이 기본 리듬):
 
+화면은 세 층이다. **여백(padding)과 간격(gap)은 서로 다른 축이고, 규칙도 다르다.**
+
+```text
+페이지 프레임      SPage 가 여백을 넣는다. 직접 주지 않는다
+└ 블록            페이지 직계 자식 (헤더·필터·툴바·테이블·섹션 카드)
+                  블록 ↔ 블록 간격은 gap-sd-12
+  └ 섹션·패널     블록 중 "안에 콘텐츠를 담는 컨테이너"인 것
+                  여기에만 안쪽 여백 선택지가 있다 (아래 "섹션·패널 안쪽 여백")
+```
+
 | 상황 | 값 |
 | --- | --- |
-| **페이지 콘텐츠 패딩** | **16px — `SPage` 가 `--cmp-pageBody-padding` 으로 이미 넣는다.** 직접 주지 않는다 (덮어쓰면 토큰이 바뀌어도 안 따라간다). `SPage` 밖에서 같은 패딩이 필요하면 `p-sd-16` |
-| **섹션 ↔ 섹션** | **`gap-sd-12`** |
-| **페이지 내 블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-sd-12`** |
+| **페이지 콘텐츠 패딩** | **`SPage` 가 `--cmp-pageBody-padding-default` 로 이미 넣는다.** 직접 주지 않는다 (덮어쓰면 토큰이 바뀌어도 안 따라간다). `SPage` 밖에서 같은 패딩이 필요하면 `p-sd-16` |
+| **섹션 ↔ 섹션**, **블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-sd-12`** |
 | 요소 ↔ 요소 | **기본 `gap-sd-8`** (`--sys-space-stack-gap-element-normal`) · 타이트 `gap-sd-4`(`-tight`) · 여유 `gap-sd-12`(`-relaxed`) / `gap-sd-16`(`-wide`) |
 | 제목 ↔ 설명 텍스트 | **수직 배치 `gap-sd-4`**(`--sys-space-stack-gap-text-normal`, 타이트 `gap-sd-2`) · **가로 배치 `gap-sd-8`**(`-relaxed`) |
 
-정보 밀도가 높은 서비스라 블록 간격을 넓게 벌리지 않는다. `gap-sd-16` / `gap-sd-24` 를 페이지 골격의 기본값으로 쓰지 않는다.
+정보 밀도가 높은 서비스라 블록 **간격**을 넓게 벌리지 않는다. `gap-sd-16` / `gap-sd-24` 를 페이지 골격의 기본값으로 쓰지 않는다. (아래 나오는 `24` 는 **안쪽 여백**에만 열리는 값이고, 간격은 여기 표대로 12 다.)
 
 #### 같은 컴포넌트를 여러 개 늘어놓을 때 (그룹 간격)
 
@@ -207,6 +216,64 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - `SRadioButton` 그룹의 간격은 `-1px`(테두리 겹침 처리)이라 손으로 만들지 않는다.
 - 정확한 값이 필요하면 토큰을 직접 참조해도 된다: `gap-[var(--cmp-checkbox-group-gap-horizontal)]`
 
+#### 섹션·패널 안쪽 여백
+
+**페이지 프레임은 예외 없이 `SPage` 가 넣는다.** 아래 규칙은 그 안의 **섹션·패널 레벨에만** 적용된다.
+
+**컴포넌트가 자체 여백을 가지면 컴포넌트 기준이 우선한다.** `SKeyValueTable`·`STable` 처럼 자기 여백을 토큰으로 갖고 있는 컴포넌트에는 이 판정을 적용하지 않는다 — 손댈 것이 없다. 아래 판정이 필요한 자리는 **직접 만든 컨테이너**와 **`SSectionHeaderCard.Body`** 두 곳뿐이다.
+
+판정은 **그 영역이 담고 있는 콘텐츠 덩어리의 종류 수**로 한다.
+
+```text
+자체 면(배경 또는 테두리)을 가진 덩어리만 센다.
+제목·설명 같은 맨 텍스트와 검색·필터·버튼 같은 조작은 세지 않는다.
+
+  두 종류 반복  →  p-sd-16   (그중 일부가 내부적으로 반복되더라도)
+  세 종류 이상  →  p-sd-24
+
+판단이 서지 않으면 16 으로 둔다.
+```
+
+| 안에 들어가는 것 | 안쪽 여백 |
+| --- | --- |
+| **같은 요소의 규칙적 반복** — 테이블 행, `SKeyValueTable` 행, 아코디언 목록, 카드 목록 | **`p-sd-16`** |
+| **서로 다른 요소의 복합 구성** — 말풍선 + 버튼 묶음 + 시스템 안내 / 콜아웃 + 토글 카드 + 설명 | **`p-sd-24`** |
+
+**카드라서 24 가 아니다.** 같은 카드가 규칙적으로 반복되면 16 이다. **섹션 내부에 어떤 정보가 들어가는지도 무관하다** — 섹션이 동일하게 반복되면 안에 버튼·입력·태그가 섞여 있어도 16 이다.
+
+적용은 **화면 단위가 아니라 영역 단위**다. 한 화면 안에서도 칸마다 다르다.
+
+| 영역 (상담 콘솔 예) | 안쪽 여백 | 이유 |
+| --- | --- | --- |
+| 좌측 상담 목록 | `p-sd-16` | 같은 항목 반복 |
+| 중앙 대화 | `p-sd-24` | 말풍선·버튼 묶음·시스템 메시지 혼재 |
+| 우측 템플릿 목록 | `p-sd-16` | 같은 아코디언 반복 |
+
+§4 의 표준 골격(목록·폼·상세)은 **전부 16** 이다. 24 는 반복 구조가 없고 성격이 다른 덩어리가 쌓이는 영역에만 쓴다.
+
+**위자드·탭처럼 한 프레임을 공유하는 화면은 가장 복합적인 화면을 기준으로 통일한다.** 예를 들어 어떤 단계가 콜아웃 + 토글 카드로 2종류라 단독으로는 16 이지만, 3종류인 단계와 한 위자드를 공유하므로 통일 규칙에 따라 위자드 전체가 24 가 된다.
+
+**중첩되면 안쪽 여백을 주지 않는다.** 24 영역 안에 또 여백을 주면 가장자리가 40 으로 벌어져 한 면적처럼 읽힌다. 안쪽 카드·목록이 **배경색이 다르거나 테두리가 있어** 경계가 스스로 보이는 경우에만 자기 여백을 유지한다.
+
+`SSectionHeaderCard.Body` 는 이 규칙을 **prop 으로 받는다** — 직접 `p-sd-*` 를 주지 않는다.
+
+```tsx
+<SSectionHeaderCard.Body>…</SSectionHeaderCard.Body>                    {/* 기본 = 16 */}
+<SSectionHeaderCard.Body padding="wide">…</SSectionHeaderCard.Body>     {/* 3종류 이상 */}
+<SSectionHeaderCard.Body padding="none">…</SSectionHeaderCard.Body>     {/* 표를 가장자리까지 */}
+```
+
+#### 스크롤 영역의 하단 여백
+
+스크롤을 끝까지 내렸을 때 마지막 항목이 화면 경계에 붙으면 **목록이 끝난 것인지 더 있는 것인지** 읽히지 않는다. 그래서 스크롤 영역은 **하단만** 넓게 둔다. 나머지 세 방향은 위 16 / 24 규칙 그대로다.
+
+| 스크롤 종류 | 어떻게 |
+| --- | --- |
+| **패널 자체 스크롤** (좌측 목록, 중앙 대화 등) | 그 패널 안쪽 하단에 `pb-sd-80` |
+| **페이지 단위 스크롤** | **`SPage` 가 넣는다. 직접 주지 않는다** |
+
+`SPage` 는 기본으로 넣으므로 **아무것도 하지 않으면 맞다.** 끄는 경우는 하나뿐이다 — **페이지네이션이 붙은 테이블.** 페이지네이션이 이미 "여기서 끝"을 알려주므로 `scrollEndSpacing={false}` 로 끈다 (§4-2 목록 페이지).
+
 ### 2-3. 색상
 
 **시맨틱 유틸리티를 우선 사용한다** — 의미가 이름에 담긴 토큰이 이미 유틸리티로 존재한다.
@@ -404,21 +471,23 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
   .onDismissed(() => {});
 ```
 
-#### 3-3-5. 닫기 경로 — `persistent` 는 기본이 `true` 다
+#### 3-3-5. 닫기 경로 — `persistent` 기본값은 컴포넌트마다 다르다
 
-모달 3종(`SActionModal` · `SConfirmModal` · `SLoadingModal`)과 `SDrawer` 는 **백드롭 클릭·ESC 로 닫히지 않는 것이 기본**이다. 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다.
+**입력을 담는 모달은 백드롭 클릭·ESC 로 닫히지 않는 것이 기본**이다. 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다. 반면 `SConfirmModal` 은 잃을 입력이 없으므로 **백드롭·ESC 로 닫히는 것이 기본**이다.
 
-| | 기본 닫기 경로 | 백드롭·ESC |
-| --- | --- | --- |
-| `SActionModal` · `SConfirmModal` · `SLoadingModal` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
-| `SDrawer` | X 버튼, footer 버튼 | 막힘 (흔들림) |
-| `SPopover` · `STooltip` · `SSelect` 등 floating | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
+| | `persistent` 기본값 | 기본 닫기 경로 | 백드롭·ESC |
+| --- | --- | --- | --- |
+| `SActionModal` · `SLoadingModal` | `true` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
+| `SDrawer` | `true` | X 버튼, footer 버튼 | 막힘 (흔들림) |
+| `SConfirmModal` | `false` | X 버튼, 확인/취소 버튼 | **닫힌다** |
+| `SPopover` · `STooltip` · `SSelect` 등 floating | — | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
 
 따라서 다음을 지킨다.
 
 - **닫을 수단을 반드시 하나는 둔다.** `SActionModal` 에 `showClose` 도 `button`/`footerLeft` 도 없으면 사용자가 모달을 닫을 방법이 없다. 백드롭이 더 이상 탈출구가 아니다.
-- **`persistent` 를 `true` 로 직접 주지 않는다.** 기본값이므로 중복이다.
-- **`persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
+- **기본값과 같은 `persistent` 를 직접 주지 않는다.** 중복이다.
+- **`SActionModal`·`SDrawer` 에 `persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
+- **`SConfirmModal` 에 `persistent` 를 켜는 것은 반드시 답을 받아야 할 때만.** 되돌릴 수 없는 파괴적 작업의 확인처럼, 임의로 닫히면 안 되는 경우로 한정한다.
 
 작성 중인 내용이 있을 때 닫기를 시도하면 이탈 안내를 띄우는 것은 **소비 앱 몫**이다. 디자인 시스템은 dirty 상태를 알지 못하므로 백드롭·ESC 를 일괄 차단할 뿐이다. 안내가 필요하면 앱이 자체 dirty 판정 후 `SModal.confirm` 으로 띄운다.
 
@@ -634,18 +703,26 @@ const MENU: SGnbMenuItem[] = [
   { label: '상품', value: 'products', icon: 'box', children: [{ label: '목록', value: 'product-list' }] },
 ];
 
-export default function AppShell({ children }: { children: React.ReactNode }) {
+export default function AppShell({
+  children,
+  scrollEndSpacing,
+}: { children: React.ReactNode; scrollEndSpacing?: boolean }) {
   return (
     <SLayout type="box" header="fix">
       {/* type/header/folded 는 SLayout 에만 준다 — SGnb 는 context 에서 읽는다 */}
       <SGnb items={MENU} value={current} onValueChange={navigate} logo={<Logo />} />
-      {/* 콘텐츠 패딩(16px)은 SPage 가 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
-      <SPage background="frame">{children}</SPage>
+      {/* 콘텐츠 패딩은 SPage 가 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
+      {/* 스크롤 끝 여백도 SPage 가 넣는다. 끄는 건 페이지네이션 있는 목록뿐이라 페이지가 정한다 */}
+      <SPage background="frame" scrollEndSpacing={scrollEndSpacing}>{children}</SPage>
     </SLayout>
   );
 }
 ```
 
+**최소 너비는 `SLayout` 이 보장한다 — 앱이 `min-w-*` 를 직접 주지 않는다.** 창이 최소 너비(`SLAYOUT_MIN_WIDTH`, GNB 포함한 전체 기준)보다 좁아지면 GNB·상단바는 제자리에 남고 **`SPage` 안에만 가로 스크롤이 생긴다.** 문서(브라우저 창)에는 가로 스크롤이 생기지 않는다. 그래서 셸을 감싸는 요소에 `min-width` 나 `overflow-x` 를 걸지 않는다 — 걸면 창 전체가 스크롤되어 GNB 가 화면 밖으로 밀린다.
+
+**셸의 `SPage` 는 모든 페이지가 공유하므로, 스크롤 끝 여백을 끄려면 페이지가 셸에 알려야 한다.** 위처럼 프레임 컴포넌트가 `scrollEndSpacing` 을 받아 그대로 넘기고, 페이지네이션이 있는 목록 페이지만 `false` 를 준다 (§4-2). 나머지 페이지는 넘기지 않으면 기본값(켬)이 적용된다.
+
 **상단바 배치는 `header` 가 정한다.** 요소 순서가 달라지므로 슬롯을 채우기 전에 어느 쪽인지부터 정한다.
 
 | `header` | 상단바 배치 | 로고 폭 | `topContent` |
@@ -684,6 +761,7 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 - **페이지 제목 줄에는 액션 버튼을 두지 않는다.** 가이드·매뉴얼 링크 등 부가 정보만 온다.
 - **주요 액션(등록 등)은 `STableBar` 의 `rightActions`** 에 둔다.
 - **선택 상태 액션(선택 삭제 등)은 `STableBar` 의 `actions`** 에 둔다. `actions` 슬롯은 건수 요약이 있으면 앞에 구분선(`SDivider`)을 **자동으로** 넣으므로 직접 구분선을 만들지 않는다.
+- **페이지네이션이 있으면 스크롤 끝 여백을 끈다** — 셸의 `SPage` 에 `scrollEndSpacing={false}` 를 넘긴다 (§2-2). 페이지네이션이 이미 "여기서 끝"을 알려준다.
 
 ```tsx
 import {
@@ -921,6 +999,10 @@ export default function ProductDetailPage() {
 | `slot` | 헤더 우측 영역 (버튼 등) |
 | `thickness` | 상단 강조선 — `false`(기본) / `'default'` / `'accent'` |
 
+| Prop (Body) | 용도 |
+| --- | --- |
+| `padding` | 안쪽 여백 — `'default'`(기본) / `'wide'` / `'none'`. 판정은 §2-2 "섹션·패널 안쪽 여백". `p-sd-*` 를 직접 주지 않는다 |
+
 ---
 
 ## 5. 자가 점검 체크리스트
@@ -933,9 +1015,13 @@ export default function ProductDetailPage() {
 - [ ] 간격이 전부 `sd-` 접두 스케일 값인가 (`gap-13`·`gap-sd-13` ❌ → `gap-sd-12` ✅)
 - [ ] 본문이 12px(`typo-body-sm-default`)인가 (14px 본문 ❌)
 - [ ] 텍스트 회색 위계를 순차 적용했는가 (기본 → `text-fg-secondary` → `text-fg-tertiary`, 단계 건너뛰기 ❌)
-- [ ] `SPage` 의 기본 패딩(16px)을 `p-sd-*` 로 덮어쓰지 않았는가, 블록·섹션 간격이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌)
+- [ ] `SPage` 의 기본 패딩을 `p-sd-*` 로 덮어쓰지 않았는가, 블록·섹션 **간격**이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌ — 24 는 안쪽 여백에만 열린다)
+- [ ] 섹션·패널의 안쪽 **여백**이 §2-2 판정과 맞는가 (덩어리 두 종류 → 16 / 세 종류 이상 → 24, 서면 16)
+- [ ] `SSectionHeaderCard.Body` 의 여백을 `p-sd-*` 가 아니라 `padding` prop 으로 줬는가
+- [ ] 자체 스크롤하는 패널의 하단에 `pb-sd-80` 이 있는가, 페이지네이션 있는 목록에서 `scrollEndSpacing={false}` 를 넘겼는가
 - [ ] 같은 컴포넌트를 나열할 때 §2-2 그룹 간격을 썼는가 (체크박스 가로 `gap-sd-24` 등)
 - [ ] 페이지가 §4의 표준 골격에서 시작했는가
+- [ ] 앱 셸이나 그 바깥에 `min-width`·`overflow-x` 를 직접 걸지 않았는가 (최소 너비는 `SLayout` 이 보장한다, §4-1)
 - [ ] 필터·폼·상세 정보를 `SKeyValueTable` 로 만들었는가 (컨트롤을 `div` 로 나열하지 않았는가)
 - [ ] 섹션 구분에 `SSectionHeaderCard` 를 썼는가 (직접 만든 카드가 아니라)
 - [ ] 목록의 주요 액션이 `STableBar` 의 `rightActions` 에 있는가 (페이지 제목 줄이 아니라)
@@ -1009,7 +1095,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 - brilliantblue: 10 20 25 40 50 60 70 75 80 85 90 95 99 05
 - bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success successLight neutralLight neutralBright tableHeader
 - fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success dangerLight accent accentLight danger warning inverse
-- border: default strong accent accentLight danger success
+- border: default strong bold accent accentLight danger warning success
 - disabled: bg text icon border
 - link: accent
 - divider: default
@@ -1025,8 +1111,9 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 ### 타이포그래피 프리셋 (클래스 하나로 size/weight/line-height 적용)
 | 클래스 | size | weight | line-height |
 | --- | --- | --- | --- |
-| typo-heading-sm | 14px | 700 | 24px |
 | typo-heading-xs | 12px | 700 | 20px |
+| typo-heading-xxs | 11px | 700 | 18px |
+| typo-heading-sm | 14px | 700 | 24px |
 | typo-heading-md | 16px | 700 | 26px |
 | typo-heading-lg | 18px | 700 | 30px |
 | typo-body-xs-default | 11px | 400 | 18px |
@@ -1102,10 +1189,12 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-blue-subtle
 --sys-color-border-accent
 --sys-color-border-accentLight
+--sys-color-border-bold
 --sys-color-border-danger
 --sys-color-border-default
 --sys-color-border-strong
 --sys-color-border-success
+--sys-color-border-warning
 --sys-color-control-bg-inverseHover
 --sys-color-darkblue-strong
 --sys-color-darkblue-subtle
@@ -1340,6 +1429,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Depends on
 
+- [SDivider](../SDivider)
 - [SGhostButton](../SGhostButton)
 
 ### Graph
@@ -1589,7 +1679,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
-| `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
+| `persistent?` | `boolean` | `false` | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 false** — 확인 모달은 잃을 입력이 없어 백드롭·ESC로 닫힌다 |
 | `type?` | `SConfirmModalType` | `'positive'` | 타입 (아이콘·메인버튼 색 결정) |
 | `modalTitle?` | `string` | `''` |  |
 | `titleClass?` | `string` | — | 제목 엘리먼트에 추가할 클래스 (sd-confirm-modal titleClass) |
@@ -1739,6 +1829,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Depends on
 
+- [SDivider](../SDivider)
 - [SField](../SField)
 - [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
@@ -1763,6 +1854,8 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Used by
 
+ - [SCalendar](../SCalendar)
+ - [SDateRangePicker](../SDateRangePicker)
  - [STableBar](../STableBar)
 
 ### Graph
@@ -3064,6 +3157,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
+| `scrollEndSpacing?` | `boolean` | `true` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지). |
 
 ## Dependencies
 
@@ -3350,6 +3444,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children?` | `SSectionHeaderCardBodyChildren` | — | 바디 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. |
+| `padding?` | `SSectionHeaderCardBodyPadding` | `'default'` | 안쪽 여백. 기본은 `default`. 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`. |
 
 ### SSectionHeaderCardHeader
 

package/dist/llms.txt

@@ -166,15 +166,24 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - 형제 요소 간격은 margin 대신 부모의 `flex`/`grid` + `gap-sd-*`으로 잡는다.
 - 시맨틱 간격 토큰 (텍스트 덩어리·요소 사이 기본 리듬):
 
+화면은 세 층이다. **여백(padding)과 간격(gap)은 서로 다른 축이고, 규칙도 다르다.**
+
+```text
+페이지 프레임      SPage 가 여백을 넣는다. 직접 주지 않는다
+└ 블록            페이지 직계 자식 (헤더·필터·툴바·테이블·섹션 카드)
+                  블록 ↔ 블록 간격은 gap-sd-12
+  └ 섹션·패널     블록 중 "안에 콘텐츠를 담는 컨테이너"인 것
+                  여기에만 안쪽 여백 선택지가 있다 (아래 "섹션·패널 안쪽 여백")
+```
+
 | 상황 | 값 |
 | --- | --- |
-| **페이지 콘텐츠 패딩** | **16px — `SPage` 가 `--cmp-pageBody-padding` 으로 이미 넣는다.** 직접 주지 않는다 (덮어쓰면 토큰이 바뀌어도 안 따라간다). `SPage` 밖에서 같은 패딩이 필요하면 `p-sd-16` |
-| **섹션 ↔ 섹션** | **`gap-sd-12`** |
-| **페이지 내 블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-sd-12`** |
+| **페이지 콘텐츠 패딩** | **`SPage` 가 `--cmp-pageBody-padding-default` 로 이미 넣는다.** 직접 주지 않는다 (덮어쓰면 토큰이 바뀌어도 안 따라간다). `SPage` 밖에서 같은 패딩이 필요하면 `p-sd-16` |
+| **섹션 ↔ 섹션**, **블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-sd-12`** |
 | 요소 ↔ 요소 | **기본 `gap-sd-8`** (`--sys-space-stack-gap-element-normal`) · 타이트 `gap-sd-4`(`-tight`) · 여유 `gap-sd-12`(`-relaxed`) / `gap-sd-16`(`-wide`) |
 | 제목 ↔ 설명 텍스트 | **수직 배치 `gap-sd-4`**(`--sys-space-stack-gap-text-normal`, 타이트 `gap-sd-2`) · **가로 배치 `gap-sd-8`**(`-relaxed`) |
 
-정보 밀도가 높은 서비스라 블록 간격을 넓게 벌리지 않는다. `gap-sd-16` / `gap-sd-24` 를 페이지 골격의 기본값으로 쓰지 않는다.
+정보 밀도가 높은 서비스라 블록 **간격**을 넓게 벌리지 않는다. `gap-sd-16` / `gap-sd-24` 를 페이지 골격의 기본값으로 쓰지 않는다. (아래 나오는 `24` 는 **안쪽 여백**에만 열리는 값이고, 간격은 여기 표대로 12 다.)
 
 #### 같은 컴포넌트를 여러 개 늘어놓을 때 (그룹 간격)
 
@@ -208,6 +217,64 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - `SRadioButton` 그룹의 간격은 `-1px`(테두리 겹침 처리)이라 손으로 만들지 않는다.
 - 정확한 값이 필요하면 토큰을 직접 참조해도 된다: `gap-[var(--cmp-checkbox-group-gap-horizontal)]`
 
+#### 섹션·패널 안쪽 여백
+
+**페이지 프레임은 예외 없이 `SPage` 가 넣는다.** 아래 규칙은 그 안의 **섹션·패널 레벨에만** 적용된다.
+
+**컴포넌트가 자체 여백을 가지면 컴포넌트 기준이 우선한다.** `SKeyValueTable`·`STable` 처럼 자기 여백을 토큰으로 갖고 있는 컴포넌트에는 이 판정을 적용하지 않는다 — 손댈 것이 없다. 아래 판정이 필요한 자리는 **직접 만든 컨테이너**와 **`SSectionHeaderCard.Body`** 두 곳뿐이다.
+
+판정은 **그 영역이 담고 있는 콘텐츠 덩어리의 종류 수**로 한다.
+
+```text
+자체 면(배경 또는 테두리)을 가진 덩어리만 센다.
+제목·설명 같은 맨 텍스트와 검색·필터·버튼 같은 조작은 세지 않는다.
+
+  두 종류 반복  →  p-sd-16   (그중 일부가 내부적으로 반복되더라도)
+  세 종류 이상  →  p-sd-24
+
+판단이 서지 않으면 16 으로 둔다.
+```
+
+| 안에 들어가는 것 | 안쪽 여백 |
+| --- | --- |
+| **같은 요소의 규칙적 반복** — 테이블 행, `SKeyValueTable` 행, 아코디언 목록, 카드 목록 | **`p-sd-16`** |
+| **서로 다른 요소의 복합 구성** — 말풍선 + 버튼 묶음 + 시스템 안내 / 콜아웃 + 토글 카드 + 설명 | **`p-sd-24`** |
+
+**카드라서 24 가 아니다.** 같은 카드가 규칙적으로 반복되면 16 이다. **섹션 내부에 어떤 정보가 들어가는지도 무관하다** — 섹션이 동일하게 반복되면 안에 버튼·입력·태그가 섞여 있어도 16 이다.
+
+적용은 **화면 단위가 아니라 영역 단위**다. 한 화면 안에서도 칸마다 다르다.
+
+| 영역 (상담 콘솔 예) | 안쪽 여백 | 이유 |
+| --- | --- | --- |
+| 좌측 상담 목록 | `p-sd-16` | 같은 항목 반복 |
+| 중앙 대화 | `p-sd-24` | 말풍선·버튼 묶음·시스템 메시지 혼재 |
+| 우측 템플릿 목록 | `p-sd-16` | 같은 아코디언 반복 |
+
+§4 의 표준 골격(목록·폼·상세)은 **전부 16** 이다. 24 는 반복 구조가 없고 성격이 다른 덩어리가 쌓이는 영역에만 쓴다.
+
+**위자드·탭처럼 한 프레임을 공유하는 화면은 가장 복합적인 화면을 기준으로 통일한다.** 예를 들어 어떤 단계가 콜아웃 + 토글 카드로 2종류라 단독으로는 16 이지만, 3종류인 단계와 한 위자드를 공유하므로 통일 규칙에 따라 위자드 전체가 24 가 된다.
+
+**중첩되면 안쪽 여백을 주지 않는다.** 24 영역 안에 또 여백을 주면 가장자리가 40 으로 벌어져 한 면적처럼 읽힌다. 안쪽 카드·목록이 **배경색이 다르거나 테두리가 있어** 경계가 스스로 보이는 경우에만 자기 여백을 유지한다.
+
+`SSectionHeaderCard.Body` 는 이 규칙을 **prop 으로 받는다** — 직접 `p-sd-*` 를 주지 않는다.
+
+```tsx
+<SSectionHeaderCard.Body>…</SSectionHeaderCard.Body>                    {/* 기본 = 16 */}
+<SSectionHeaderCard.Body padding="wide">…</SSectionHeaderCard.Body>     {/* 3종류 이상 */}
+<SSectionHeaderCard.Body padding="none">…</SSectionHeaderCard.Body>     {/* 표를 가장자리까지 */}
+```
+
+#### 스크롤 영역의 하단 여백
+
+스크롤을 끝까지 내렸을 때 마지막 항목이 화면 경계에 붙으면 **목록이 끝난 것인지 더 있는 것인지** 읽히지 않는다. 그래서 스크롤 영역은 **하단만** 넓게 둔다. 나머지 세 방향은 위 16 / 24 규칙 그대로다.
+
+| 스크롤 종류 | 어떻게 |
+| --- | --- |
+| **패널 자체 스크롤** (좌측 목록, 중앙 대화 등) | 그 패널 안쪽 하단에 `pb-sd-80` |
+| **페이지 단위 스크롤** | **`SPage` 가 넣는다. 직접 주지 않는다** |
+
+`SPage` 는 기본으로 넣으므로 **아무것도 하지 않으면 맞다.** 끄는 경우는 하나뿐이다 — **페이지네이션이 붙은 테이블.** 페이지네이션이 이미 "여기서 끝"을 알려주므로 `scrollEndSpacing={false}` 로 끈다 (§4-2 목록 페이지).
+
 ### 2-3. 색상
 
 **시맨틱 유틸리티를 우선 사용한다** — 의미가 이름에 담긴 토큰이 이미 유틸리티로 존재한다.
@@ -405,21 +472,23 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
   .onDismissed(() => {});
 ```
 
-#### 3-3-5. 닫기 경로 — `persistent` 는 기본이 `true` 다
+#### 3-3-5. 닫기 경로 — `persistent` 기본값은 컴포넌트마다 다르다
 
-모달 3종(`SActionModal` · `SConfirmModal` · `SLoadingModal`)과 `SDrawer` 는 **백드롭 클릭·ESC 로 닫히지 않는 것이 기본**이다. 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다.
+**입력을 담는 모달은 백드롭 클릭·ESC 로 닫히지 않는 것이 기본**이다. 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다. 반면 `SConfirmModal` 은 잃을 입력이 없으므로 **백드롭·ESC 로 닫히는 것이 기본**이다.
 
-| | 기본 닫기 경로 | 백드롭·ESC |
-| --- | --- | --- |
-| `SActionModal` · `SConfirmModal` · `SLoadingModal` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
-| `SDrawer` | X 버튼, footer 버튼 | 막힘 (흔들림) |
-| `SPopover` · `STooltip` · `SSelect` 등 floating | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
+| | `persistent` 기본값 | 기본 닫기 경로 | 백드롭·ESC |
+| --- | --- | --- | --- |
+| `SActionModal` · `SLoadingModal` | `true` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
+| `SDrawer` | `true` | X 버튼, footer 버튼 | 막힘 (흔들림) |
+| `SConfirmModal` | `false` | X 버튼, 확인/취소 버튼 | **닫힌다** |
+| `SPopover` · `STooltip` · `SSelect` 등 floating | — | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
 
 따라서 다음을 지킨다.
 
 - **닫을 수단을 반드시 하나는 둔다.** `SActionModal` 에 `showClose` 도 `button`/`footerLeft` 도 없으면 사용자가 모달을 닫을 방법이 없다. 백드롭이 더 이상 탈출구가 아니다.
-- **`persistent` 를 `true` 로 직접 주지 않는다.** 기본값이므로 중복이다.
-- **`persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
+- **기본값과 같은 `persistent` 를 직접 주지 않는다.** 중복이다.
+- **`SActionModal`·`SDrawer` 에 `persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
+- **`SConfirmModal` 에 `persistent` 를 켜는 것은 반드시 답을 받아야 할 때만.** 되돌릴 수 없는 파괴적 작업의 확인처럼, 임의로 닫히면 안 되는 경우로 한정한다.
 
 작성 중인 내용이 있을 때 닫기를 시도하면 이탈 안내를 띄우는 것은 **소비 앱 몫**이다. 디자인 시스템은 dirty 상태를 알지 못하므로 백드롭·ESC 를 일괄 차단할 뿐이다. 안내가 필요하면 앱이 자체 dirty 판정 후 `SModal.confirm` 으로 띄운다.
 
@@ -635,18 +704,26 @@ const MENU: SGnbMenuItem[] = [
   { label: '상품', value: 'products', icon: 'box', children: [{ label: '목록', value: 'product-list' }] },
 ];
 
-export default function AppShell({ children }: { children: React.ReactNode }) {
+export default function AppShell({
+  children,
+  scrollEndSpacing,
+}: { children: React.ReactNode; scrollEndSpacing?: boolean }) {
   return (
     <SLayout type="box" header="fix">
       {/* type/header/folded 는 SLayout 에만 준다 — SGnb 는 context 에서 읽는다 */}
       <SGnb items={MENU} value={current} onValueChange={navigate} logo={<Logo />} />
-      {/* 콘텐츠 패딩(16px)은 SPage 가 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
-      <SPage background="frame">{children}</SPage>
+      {/* 콘텐츠 패딩은 SPage 가 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
+      {/* 스크롤 끝 여백도 SPage 가 넣는다. 끄는 건 페이지네이션 있는 목록뿐이라 페이지가 정한다 */}
+      <SPage background="frame" scrollEndSpacing={scrollEndSpacing}>{children}</SPage>
     </SLayout>
   );
 }
 ```
 
+**최소 너비는 `SLayout` 이 보장한다 — 앱이 `min-w-*` 를 직접 주지 않는다.** 창이 최소 너비(`SLAYOUT_MIN_WIDTH`, GNB 포함한 전체 기준)보다 좁아지면 GNB·상단바는 제자리에 남고 **`SPage` 안에만 가로 스크롤이 생긴다.** 문서(브라우저 창)에는 가로 스크롤이 생기지 않는다. 그래서 셸을 감싸는 요소에 `min-width` 나 `overflow-x` 를 걸지 않는다 — 걸면 창 전체가 스크롤되어 GNB 가 화면 밖으로 밀린다.
+
+**셸의 `SPage` 는 모든 페이지가 공유하므로, 스크롤 끝 여백을 끄려면 페이지가 셸에 알려야 한다.** 위처럼 프레임 컴포넌트가 `scrollEndSpacing` 을 받아 그대로 넘기고, 페이지네이션이 있는 목록 페이지만 `false` 를 준다 (§4-2). 나머지 페이지는 넘기지 않으면 기본값(켬)이 적용된다.
+
 **상단바 배치는 `header` 가 정한다.** 요소 순서가 달라지므로 슬롯을 채우기 전에 어느 쪽인지부터 정한다.
 
 | `header` | 상단바 배치 | 로고 폭 | `topContent` |
@@ -685,6 +762,7 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 - **페이지 제목 줄에는 액션 버튼을 두지 않는다.** 가이드·매뉴얼 링크 등 부가 정보만 온다.
 - **주요 액션(등록 등)은 `STableBar` 의 `rightActions`** 에 둔다.
 - **선택 상태 액션(선택 삭제 등)은 `STableBar` 의 `actions`** 에 둔다. `actions` 슬롯은 건수 요약이 있으면 앞에 구분선(`SDivider`)을 **자동으로** 넣으므로 직접 구분선을 만들지 않는다.
+- **페이지네이션이 있으면 스크롤 끝 여백을 끈다** — 셸의 `SPage` 에 `scrollEndSpacing={false}` 를 넘긴다 (§2-2). 페이지네이션이 이미 "여기서 끝"을 알려준다.
 
 ```tsx
 import {
@@ -922,6 +1000,10 @@ export default function ProductDetailPage() {
 | `slot` | 헤더 우측 영역 (버튼 등) |
 | `thickness` | 상단 강조선 — `false`(기본) / `'default'` / `'accent'` |
 
+| Prop (Body) | 용도 |
+| --- | --- |
+| `padding` | 안쪽 여백 — `'default'`(기본) / `'wide'` / `'none'`. 판정은 §2-2 "섹션·패널 안쪽 여백". `p-sd-*` 를 직접 주지 않는다 |
+
 ---
 
 ## 5. 자가 점검 체크리스트
@@ -934,9 +1016,13 @@ export default function ProductDetailPage() {
 - [ ] 간격이 전부 `sd-` 접두 스케일 값인가 (`gap-13`·`gap-sd-13` ❌ → `gap-sd-12` ✅)
 - [ ] 본문이 12px(`typo-body-sm-default`)인가 (14px 본문 ❌)
 - [ ] 텍스트 회색 위계를 순차 적용했는가 (기본 → `text-fg-secondary` → `text-fg-tertiary`, 단계 건너뛰기 ❌)
-- [ ] `SPage` 의 기본 패딩(16px)을 `p-sd-*` 로 덮어쓰지 않았는가, 블록·섹션 간격이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌)
+- [ ] `SPage` 의 기본 패딩을 `p-sd-*` 로 덮어쓰지 않았는가, 블록·섹션 **간격**이 `gap-sd-12` 인가 (`gap-sd-16`/`gap-sd-24` ❌ — 24 는 안쪽 여백에만 열린다)
+- [ ] 섹션·패널의 안쪽 **여백**이 §2-2 판정과 맞는가 (덩어리 두 종류 → 16 / 세 종류 이상 → 24, 서면 16)
+- [ ] `SSectionHeaderCard.Body` 의 여백을 `p-sd-*` 가 아니라 `padding` prop 으로 줬는가
+- [ ] 자체 스크롤하는 패널의 하단에 `pb-sd-80` 이 있는가, 페이지네이션 있는 목록에서 `scrollEndSpacing={false}` 를 넘겼는가
 - [ ] 같은 컴포넌트를 나열할 때 §2-2 그룹 간격을 썼는가 (체크박스 가로 `gap-sd-24` 등)
 - [ ] 페이지가 §4의 표준 골격에서 시작했는가
+- [ ] 앱 셸이나 그 바깥에 `min-width`·`overflow-x` 를 직접 걸지 않았는가 (최소 너비는 `SLayout` 이 보장한다, §4-1)
 - [ ] 필터·폼·상세 정보를 `SKeyValueTable` 로 만들었는가 (컨트롤을 `div` 로 나열하지 않았는가)
 - [ ] 섹션 구분에 `SSectionHeaderCard` 를 썼는가 (직접 만든 카드가 아니라)
 - [ ] 목록의 주요 액션이 `STableBar` 의 `rightActions` 에 있는가 (페이지 제목 줄이 아니라)
@@ -1010,7 +1096,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 - brilliantblue: 10 20 25 40 50 60 70 75 80 85 90 95 99 05
 - bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success successLight neutralLight neutralBright tableHeader
 - fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success dangerLight accent accentLight danger warning inverse
-- border: default strong accent accentLight danger success
+- border: default strong bold accent accentLight danger warning success
 - disabled: bg text icon border
 - link: accent
 - divider: default
@@ -1026,8 +1112,9 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 ### 타이포그래피 프리셋 (클래스 하나로 size/weight/line-height 적용)
 | 클래스 | size | weight | line-height |
 | --- | --- | --- | --- |
-| typo-heading-sm | 14px | 700 | 24px |
 | typo-heading-xs | 12px | 700 | 20px |
+| typo-heading-xxs | 11px | 700 | 18px |
+| typo-heading-sm | 14px | 700 | 24px |
 | typo-heading-md | 16px | 700 | 26px |
 | typo-heading-lg | 18px | 700 | 30px |
 | typo-body-xs-default | 11px | 400 | 18px |
@@ -1103,10 +1190,12 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-blue-subtle
 --sys-color-border-accent
 --sys-color-border-accentLight
+--sys-color-border-bold
 --sys-color-border-danger
 --sys-color-border-default
 --sys-color-border-strong
 --sys-color-border-success
+--sys-color-border-warning
 --sys-color-control-bg-inverseHover
 --sys-color-darkblue-strong
 --sys-color-darkblue-subtle