sellmate-design-system-react 5.0.2 → 6.1.0

package/AGENTS.md

@@ -157,15 +157,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 다.)
 
 #### 같은 컴포넌트를 여러 개 늘어놓을 때 (그룹 간격)
 
@@ -199,6 +208,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. 색상
 
 **시맨틱 유틸리티를 우선 사용한다** — 의미가 이름에 담긴 토큰이 이미 유틸리티로 존재한다.
@@ -339,7 +406,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - 작은 창이 아니라 **화면 하나가 통째로** 들어간다 — 검색 필터·테이블·페이지네이션이 그대로 있는 목록(`엑셀 파일 관리`), 헤더 카드·탭이 있는 상세(`이동 오더 상세`).
 - 상세를 팝업으로 여는 이유는 **목록을 떠나지 않고 여러 건을 번갈아 보기** 위해서다. 단 상세가 **항상** 팝업인 것은 아니고, 데이터 양이 많을 때 팝업을 쓴다.
 - 구조는 헤더(제목 중앙) + 본문 + 푸터다. **확정할 작업이 있으면 푸터에 `저장`, 조회만이면 `useFooter={false}`** 로 푸터를 없앤다.
-- 본문에는 패딩이 없다 — 콘텐츠가 여백을 담당한다. 팝업 안도 일반 페이지와 같은 규칙(§4)을 따른다: 패딩 `p-sd-16`(`SPage` 가 아니라 직접 준다), 블록 간격 `gap-sd-12`, 표는 `SKeyValueTable` / `STable`.
+- **본문 패딩은 `SPopup` 이 토큰으로 넣는다. 직접 주지 않는다** (`p-sd-*` 로 덮어쓰면 토큰이 바뀌어도 안 따라간다). 표를 가장자리까지 채우는 등 콘텐츠가 여백을 직접 다뤄야 할 때만 `noPadding` 으로 끈다.
+- 그 밖에는 팝업 안도 일반 페이지와 같은 규칙(§4)을 따른다: 블록 간격 `gap-sd-12`, 표는 `SKeyValueTable` / `STable`.
 
 ```tsx
 // 1) 목록에서 별도 창을 연다 — 창 크기 = 콘텐츠 크기
@@ -355,7 +423,8 @@ function openDetailPopup(orderId: string) {
 export default function TransferOrderPopupPage() {
   return (
     <SPopup popupTitle="이동 오더 상세" useFooter={false}>
-      <div className="flex flex-col gap-sd-12 p-sd-16">
+      {/* 본문 패딩은 SPopup 이 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
+      <div className="flex flex-col gap-sd-12">
         <SSectionHeaderCard>…</SSectionHeaderCard>
         <STabs value={tab} tabs={TABS} onValueChange={setTab} />
         <STable columns={columns} rows={rows} rowKey="id" />
@@ -396,21 +465,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` 으로 띄운다.
 
@@ -626,18 +697,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` |
@@ -676,6 +755,7 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 - **페이지 제목 줄에는 액션 버튼을 두지 않는다.** 가이드·매뉴얼 링크 등 부가 정보만 온다.
 - **주요 액션(등록 등)은 `STableBar` 의 `rightActions`** 에 둔다.
 - **선택 상태 액션(선택 삭제 등)은 `STableBar` 의 `actions`** 에 둔다. `actions` 슬롯은 건수 요약이 있으면 앞에 구분선(`SDivider`)을 **자동으로** 넣으므로 직접 구분선을 만들지 않는다.
+- **페이지네이션이 있으면 스크롤 끝 여백을 끈다** — 셸의 `SPage` 에 `scrollEndSpacing={false}` 를 넘긴다 (§2-2). 페이지네이션이 이미 "여기서 끝"을 알려준다.
 
 ```tsx
 import {
@@ -913,6 +993,10 @@ export default function ProductDetailPage() {
 | `slot` | 헤더 우측 영역 (버튼 등) |
 | `thickness` | 상단 강조선 — `false`(기본) / `'default'` / `'accent'` |
 
+| Prop (Body) | 용도 |
+| --- | --- |
+| `padding` | 안쪽 여백 — `'default'`(기본) / `'wide'` / `'none'`. 판정은 §2-2 "섹션·패널 안쪽 여백". `p-sd-*` 를 직접 주지 않는다 |
+
 ---
 
 ## 5. 자가 점검 체크리스트
@@ -925,9 +1009,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`·`SPopup` 의 기본 패딩을 `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` 에 있는가 (페이지 제목 줄이 아니라)

package/dist/components/SCalendar/README.md

@@ -30,12 +30,14 @@
 
 ### Depends on
 
+- [SDivider](../SDivider)
 - [SGhostButton](../SGhostButton)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SCalendar --> SDivider
   SCalendar --> SGhostButton
   SDatePicker --> SCalendar
   style SCalendar fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SConfirmModal/README.md

@@ -9,7 +9,7 @@
 | 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) |

package/dist/components/SConfirmModal/SConfirmModal.d.ts

@@ -6,7 +6,7 @@ export type ConfirmModalMainButton = 'primary_md' | 'primary_outline_md' | 'dang
 export interface SConfirmModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
+    /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 false** — 확인 모달은 잃을 입력이 없어 백드롭·ESC로 닫힌다 */
     persistent?: boolean;
     /** 타입 (아이콘·메인버튼 색 결정) */
     type?: SConfirmModalType;

package/dist/components/SDateRangePicker/README.md

@@ -48,6 +48,7 @@
 
 ### Depends on
 
+- [SDivider](../SDivider)
 - [SField](../SField)
 - [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
@@ -56,6 +57,7 @@
 
 ```mermaid
 graph TD;
+  SDateRangePicker --> SDivider
   SDateRangePicker --> SField
   SDateRangePicker --> SGhostButton
   SDateRangePicker --> SIcon

package/dist/components/SDivider/README.md

@@ -14,12 +14,16 @@
 
 ### Used by
 
+ - [SCalendar](../SCalendar)
+ - [SDateRangePicker](../SDateRangePicker)
  - [STableBar](../STableBar)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SCalendar --> SDivider
+  SDateRangePicker --> SDivider
   STableBar --> SDivider
   style SDivider fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SLayout/SLayout.d.ts

@@ -48,6 +48,19 @@ export interface SLayoutContextValue {
     registerNav: (nav: SLayoutNavState | null) => void;
 }
 export declare const SLayoutContext: import("react").Context<SLayoutContextValue | null>;
+/**
+ * 레이아웃이 보장하는 최소 가로 폭(px). GNB 를 포함한 전체 기준이다.
+ * 전용 토큰이 없어 상수로 둔다(GNB_MENU_WIDTH 와 같은 이유).
+ *
+ * 창이 이보다 좁아져도 프레임 자체는 창을 넘지 않는다 — 모자란 몫은 SPage 가 가로 스크롤로 삼킨다.
+ * 그래서 GNB·상단바는 제자리에 남고 문서(창)에는 스크롤이 생기지 않는다.
+ */
+export declare const SLAYOUT_MIN_WIDTH = 1366;
+/**
+ * SPage 가 자기 콘텐츠의 최소 폭을 계산할 때 읽는 변수. SLayout 이 프레임에 심는다.
+ * SLayout 밖의 SPage 는 이 변수가 없어(폴백 0) 최소 폭 규칙이 걸리지 않는다.
+ */
+export declare const SLAYOUT_MIN_WIDTH_VAR = "--s-layout-min-width";
 /**
  * SLayout 의 상태를 읽고 제어한다. `<SLayout>` 밖에서 호출하면 throw.
  * 외부 버튼으로 GNB 를 접거나, 현재 구조(header)·메뉴 스타일(type)에 따라 분기할 때 사용한다.
@@ -76,6 +89,9 @@ export interface SLayoutProps extends HTMLAttributes<HTMLDivElement> {
  * 자식 SGnb·SPage 는 context 에서 type·header·folded 를 읽으므로 앱은 이 값들을 여기 한 곳에만 쓴다.
  * 높이는 기본 100%(부모를 채움) — 앱 루트로 쓸 땐 부모를 뷰포트 높이로 잡는다.
  *
+ * 가로는 SLAYOUT_MIN_WIDTH 를 최소 폭으로 보장한다. 창이 그보다 좁아도 프레임은 창 폭을 그대로 받고,
+ * 모자란 몫은 SPage 가 가로 스크롤로 삼킨다 — GNB·상단바는 제자리에 남고 문서엔 스크롤이 생기지 않는다.
+ *
  * 치수는 자식이 소유한다: GNB 가 registerNav 로 컬럼 폭·상단바 높이·전환 길이를 올리고
  * 이 프레임은 그 값으로 그리드를 깐다(SLayout 은 GNB 내부 상수를 import 하지 않는다).
  *

package/dist/components/SLayout/index.d.ts

@@ -1 +1 @@
-export { SLayout, SLayoutContext, useSLayout, type SLayoutProps, type SLayoutType, type SLayoutHeader, type SLayoutContextValue, } from './SLayout';
+export { SLayout, SLayoutContext, SLAYOUT_MIN_WIDTH, useSLayout, type SLayoutProps, type SLayoutType, type SLayoutHeader, type SLayoutContextValue, } from './SLayout';

package/dist/components/SPage/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
+| `scrollEndSpacing?` | `boolean` | `true` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지). |
 
 ## Dependencies
 

package/dist/components/SPage/SPage.d.ts

@@ -6,10 +6,16 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
      * 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다.
      */
     background?: SPageBackground;
+    /**
+     * 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다.
+     * 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지).
+     */
+    scrollEndSpacing?: boolean;
 }
 /**
  * SPage — SLayout 안에서 남은 공간을 채우는 스크롤 콘텐츠 영역.
  * 스크롤은 SLayout(overflow:hidden)이 잡아둔 경계 안에서 이 영역에만 생긴다.
+ * 창이 SLayout 의 최소 폭보다 좁을 때 생기는 가로 스크롤도 여기 걸린다(문서는 스크롤되지 않는다).
  * 패딩은 className 으로, 배경은 background 로 정한다(className 으로도 덮어쓸 수 있다).
  *
  * - header="fix": flex 자식으로 남은 가로 공간을 채운다.

package/dist/components/SPopup/README.md

@@ -13,6 +13,7 @@
 | `useFooter?` | `boolean` | `true` | 하단 footer 표시 여부 |
 | `submitButton?` | `SPopupSubmitButton` | — | 확인 버튼 설정 |
 | `footerLeft?` | `ReactNode` | — | footer 좌측 영역 |
+| `noPadding?` | `boolean` | `false` | 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. |
 | `children?` | `ReactNode` | — | 본문 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |

package/dist/components/SPopup/SPopup.d.ts

@@ -20,6 +20,8 @@ export interface SPopupProps {
     onSubmit?: () => void;
     /** footer 좌측 영역 */
     footerLeft?: ReactNode;
+    /** 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. */
+    noPadding?: boolean;
     /** 본문 */
     children?: ReactNode;
     className?: string;

package/dist/components/SSectionHeaderCard/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children?` | `SSectionHeaderCardBodyChildren` | — | 바디 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. |
+| `padding?` | `SSectionHeaderCardBodyPadding` | `'default'` | 안쪽 여백. 기본은 `default`. 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`. |
 
 ### SSectionHeaderCardHeader
 

package/dist/components/SSectionHeaderCard/SSectionHeaderCard.d.ts

@@ -3,6 +3,7 @@ export type SSectionHeaderCardBodyChildren = ReactNode;
 export type SSectionHeaderCardChildren = ReactNode;
 export type SSectionHeaderCardThickness = false | 'default' | 'accent';
 export type SSectionHeaderCardTitleSize = 'xs' | 'sm';
+export type SSectionHeaderCardBodyPadding = 'default' | 'wide' | 'none';
 export interface SSectionHeaderCardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'slot' | 'title'> {
     /** 헤더 제목 */
     title: ReactNode;
@@ -24,6 +25,11 @@ export interface SSectionHeaderCardHeaderProps extends Omit<HTMLAttributes<HTMLD
 export interface SSectionHeaderCardBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** 바디 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. */
     children?: SSectionHeaderCardBodyChildren;
+    /**
+     * 안쪽 여백. 기본은 `default`.
+     * 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`.
+     */
+    padding?: SSectionHeaderCardBodyPadding;
 }
 export interface SSectionHeaderCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** SSectionHeaderCard 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. */

package/dist/components/SSectionHeaderCard/index.d.ts

@@ -1 +1 @@
-export { SSectionHeaderCard, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyProps, type SSectionHeaderCardChildren, type SSectionHeaderCardHeaderProps, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, type SSectionHeaderCardTitleSize, } from './SSectionHeaderCard';
+export { SSectionHeaderCard, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyPadding, type SSectionHeaderCardBodyProps, type SSectionHeaderCardChildren, type SSectionHeaderCardHeaderProps, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, type SSectionHeaderCardTitleSize, } from './SSectionHeaderCard';

package/dist/components/SStepper/stepper.config.d.ts

@@ -38,5 +38,6 @@ export declare const STEPPER_COLORS: {
     text: {
         active: string;
         default: string;
+        completed: string;
     };
 };

package/dist/index.cjs

@@ -4748,6 +4748,11 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
   ] });
 });
 var STooltip2 = /* @__PURE__ */ withDisplayName(STooltipImpl, "STooltip");
+var BODY_PADDING_CLASS = {
+  default: "p-(--sys-space-panel-padding-default)",
+  wide: "p-(--sys-space-panel-padding-wide)",
+  none: ""
+};
 var topBorderColorClass = {
   default: "bg-(--cmp-sectionHeaderCard-topBorder-color-default)",
   accent: "bg-(--cmp-sectionHeaderCard-topBorder-color-accent)"
@@ -4757,8 +4762,8 @@ var titleSizeClass = {
   sm: "typo-heading-sm"
 };
 var SSectionHeaderCardBodyImpl = /* @__PURE__ */ react.forwardRef(
-  function SSectionHeaderCardBody({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...rest, children });
+  function SSectionHeaderCardBody({ padding = "default", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], className), ...rest, children });
   }
 );
 var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
@@ -6069,6 +6074,7 @@ var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
   submitButton,
   onSubmit,
   footerLeft,
+  noPadding = false,
   children,
   className,
   style
@@ -6099,10 +6105,11 @@ var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "main",
           {
             className: cn(
-              "min-h-0 flex-1 overflow-auto",
+              "box-border min-h-0 flex-1 overflow-auto",
+              !noPadding && "p-(--sys-space-panel-padding-default)",
               SCROLLBAR_CLASS,
               SCROLLBAR_TRACK_BG_CLASS,
               SCROLLBAR_TRACK_BORDER_CLASS
@@ -6415,7 +6422,7 @@ var DEFAULT_MAIN_BUTTON = {
 function SConfirmModal({
   open,
   onOpenChange,
-  persistent,
+  persistent = false,
   type = "positive",
   modalTitle = "",
   titleClass,
@@ -7156,6 +7163,8 @@ var SModal = {
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 var isSameNav = (a, b) => a === b || !!a && !!b && a.columnWidth === b.columnWidth && a.topHeight === b.topHeight && a.foldMs === b.foldMs && a.requireFullHeader === b.requireFullHeader;
 var SLayoutContext = /* @__PURE__ */ react.createContext(null);
+var SLAYOUT_MIN_WIDTH = 1366;
+var SLAYOUT_MIN_WIDTH_VAR = "--s-layout-min-width";
 function useSLayout() {
   const ctx = react.useContext(SLayoutContext);
   if (!ctx) throw new Error("useSLayout \uC740 <SLayout> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
@@ -7201,6 +7210,10 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
     [type, effectiveHeader, useRail, currentFolded, setFolded, registerNav]
   );
   const isFullHeader = effectiveHeader === "full";
+  const minWidthStyle = {
+    containerType: "inline-size",
+    [SLAYOUT_MIN_WIDTH_VAR]: `${SLAYOUT_MIN_WIDTH}px`
+  };
   const frameStyle = isFullHeader ? {
     // 자식이 좌표가 아니라 이름으로 자리를 잡게 한다 — 열·행이 늘어도 자식을 고칠 일이 없다.
     gridTemplateAreas: '"header header" "nav page"',
@@ -7221,7 +7234,7 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
         isFullHeader ? "grid" : "flex flex-row",
         className
       ),
-      style: { ...frameStyle, ...style },
+      style: { ...minWidthStyle, ...frameStyle, ...style },
       ...rest,
       children
     }
@@ -7845,12 +7858,13 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     }
   );
 });
+var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
   frame: `bg-[var(--sys-color-bg-frame)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `bg-[var(--sys-color-bg-neutralLight)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
   screen: `bg-[var(--sys-color-bg-screen)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
 };
-var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({ background = "frame", className, style, children, ...rest }, ref) {
+var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({ background = "frame", scrollEndSpacing = true, className, style, children, ...rest }, ref) {
   const layout = react.useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7858,14 +7872,17 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({ background = "fra
     {
       ref,
       className: cn(
-        "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding)]",
+        "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding-default)]",
+        // 스크롤 끝 여백은 아직 전용 토큰이 없어 스케일 값을 직접 쓴다.
+        // component.pageBody.padding.scrollEnd 가 들어오면 var() 참조로 바꾼다.
+        scrollEndSpacing && "pb-sd-80",
         SCROLLBAR_CLASS,
         BACKGROUND_CLASS[background],
         className
       ),
       style: { ...gridStyle, ...style },
       ...rest,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
 });
@@ -8123,15 +8140,15 @@ var STEPPER_SIZE_CONFIG = {
   }
 };
 var STEPPER_LAYOUT = {
-  containerGap: V2("container-gap"),
+  containerGap: V2("horizontal-gap"),
   itemGap: V2("item-gap"),
-  dashWidth: V2("dash-width"),
+  dashWidth: V2("horizontal-dash-width"),
   sequenceRadius: V2("sequence-radius"),
   sequenceBorderWidth: V2("sequence-border-width"),
   sequenceIcon: V2("sequence-icon")
 };
 var STEPPER_COLORS = {
-  dash: V2("dash-color"),
+  dash: V2("horizontal-dash-color"),
   sequenceBorder: {
     active: V2("sequence-border-active"),
     default: V2("sequence-border-default"),
@@ -8148,7 +8165,8 @@ var STEPPER_COLORS = {
   },
   text: {
     active: V2("text-active"),
-    default: V2("text-default")
+    default: V2("text-default"),
+    completed: V2("text-completed")
   }
 };
 function getItemValue(item, index) {
@@ -8188,7 +8206,7 @@ function SStepper({
         const state2 = getState(index);
         const itemStyle = {
           gap: STEPPER_LAYOUT.itemGap,
-          color: state2 === "active" ? STEPPER_COLORS.text.active : STEPPER_COLORS.text.default,
+          color: STEPPER_COLORS.text[state2],
           fontWeight: state2 === "active" ? config.fontWeightActive : config.fontWeightDefault
         };
         const sequenceStyle = {
@@ -8199,7 +8217,7 @@ function SStepper({
           borderWidth: STEPPER_LAYOUT.sequenceBorderWidth,
           borderColor: STEPPER_COLORS.sequenceBorder[state2],
           background: STEPPER_COLORS.sequenceBg[state2],
-          color: state2 === "completed" ? STEPPER_COLORS.text.default : STEPPER_COLORS.sequenceText[state2]
+          color: state2 === "completed" ? STEPPER_COLORS.text.completed : STEPPER_COLORS.sequenceText[state2]
         };
         const content = /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
@@ -10605,10 +10623,10 @@ function SCalendar({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+            SDivider,
             {
-              className: "h-[16px] w-px bg-[var(--cmp-datepicker-calendar-header-divider)]",
-              "aria-hidden": true
+              vertical: true,
+              className: "h-[var(--cmp-datepicker-calendar-header-divider-height)] self-center"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
@@ -10699,13 +10717,7 @@ function SCalendar({
           );
         }) }),
         legend.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "h-px w-full bg-[var(--cmp-datepicker-calendar-header-divider)]",
-              "aria-hidden": true
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-[var(--cmp-datepicker-calendar-legend-group-gap)] gap-y-[4px] text-[11px] leading-[18px]", children: legend.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
@@ -11150,23 +11162,11 @@ function RangeCalendar({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
           renderPanel(y, m, true),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
-              "aria-hidden": true
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true }),
           renderPanel(nextMonthYM.year, nextMonthYM.month, false)
         ] }),
         useTimePicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "h-px w-full bg-[var(--cmp-datepicker-calendar-range-divider)]",
-              "aria-hidden": true
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
             renderTimeSection("start", start, "\uBD80\uD130"),
             renderTimeSection("end", end, "\uAE4C\uC9C0")
@@ -13849,6 +13849,7 @@ exports.SGuide = SGuide;
 exports.SIcon = SIcon;
 exports.SInput = SInput;
 exports.SKeyValueTable = SKeyValueTable;
+exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;
 exports.SLayout = SLayout;
 exports.SLayoutContext = SLayoutContext;
 exports.SLinearProgress = SLinearProgress;