sellmate-design-system-react 3.2.0 → 3.3.1

package/dist/llms-full.txt

@@ -126,7 +126,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 콤마 없는 `39000` 은 자릿수를 세어야 읽히지만 `39,000` 은 한눈에 읽힌다. 숫자를 그대로 출력하는 코드는 미완성으로 본다.
 
-전화번호·사업자번호처럼 하이픈이 들어가는 값은 애초에 숫자가 아니라 **서식이 정해진 문자열**이므로 이 규칙의 대상이 아니다.
+**번호·코드는 제외한다.** 전화번호·사업자번호·송장번호·상품코드처럼 대상을 가리키는 값은 크기를 비교하는 숫자가 아니라 **서식이 정해진 문자열**이다. 여기에 콤마를 넣으면 송장번호 `123456789` 가 `123,456,789` 로 보여 값 자체가 달라진다.
 
 ---
 
@@ -154,6 +154,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 페이지 제목만 18px 로 크게 두고 그 아래는 14 / 12 로 촘촘하게 간다. 중간 크기(16px)는 기본 골격에서 쓰지 않는다.
 
+**보조 설명의 색** — 기본은 `text-fg-tertiary`(`grey_65`) 다. 보조 설명 안에서 위계가 한 단계 더 필요할 때만 `text-fg-secondary`(`grey_80`) → `text-fg-tertiary`(`grey_65`) 순으로 내려 쓴다 (§2-3).
+
 ### 2-2. 간격 (spacing)
 
 - 유틸리티 숫자 = px. 스케일: `2 4 6 8 10 12 16 19 20 22 24 28 32 36 40 48 60`
@@ -165,8 +167,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | **페이지 콘텐츠 패딩** | **`p-20`** |
 | **섹션 ↔ 섹션** | **`gap-12`** |
 | **페이지 내 블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-12`** |
-| 요소 ↔ 요소 (기본) | `gap-8` (`--sys-space-stack-gap-element-normal`) |
-| 제목 ↔ 설명 텍스트 | `gap-4` (`--sys-space-stack-gap-text-normal`) |
+| 요소 ↔ 요소 | **기본 `gap-8`** (`--sys-space-stack-gap-element-normal`) · 타이트 `gap-4`(`-tight`) · 여유 `gap-12`(`-relaxed`) / `gap-16`(`-wide`) |
+| 제목 ↔ 설명 텍스트 | **수직 배치 `gap-4`**(`--sys-space-stack-gap-text-normal`, 타이트 `gap-2`) · **가로 배치 `gap-8`**(`-relaxed`) |
 
 정보 밀도가 높은 서비스라 블록 간격을 넓게 벌리지 않는다. `gap-16` / `gap-24` 를 페이지 골격의 기본값으로 쓰지 않는다.
 
@@ -206,23 +208,28 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 **시맨틱 유틸리티를 우선 사용한다** — 의미가 이름에 담긴 토큰이 이미 유틸리티로 존재한다.
 
-#### 텍스트 색은 두 단계뿐이다
+#### 텍스트 회색 위계는 세 단계다
 
-| 용도 | 유틸리티 | 값 |
-| --- | --- | --- |
-| **본문·제목 (기본값)** | 지정하지 않는다 — 전역 기본색이 이미 적용된다 | `grey_95` `#222222` |
-| **보조 설명 · 비활성** | **`text-fg-tertiary`** | `grey_65` `#888888` |
+| 단계 | 유틸리티 | 값 | 용도 |
+| --- | --- | --- | --- |
+| **기본** | 지정하지 않는다 — 전역 기본색이 이미 적용된다 (`text-fg-primary`) | `grey_95` `#222222` | 본문·제목 |
+| **보조 1** | **`text-fg-secondary`** | `grey_80` `#555555` | 보조 정보 |
+| **보조 2 / 비활성** | **`text-fg-tertiary`** | `grey_65` `#888888` | 부가 설명, 비활성 |
 
+- **위계는 순차 적용한다.** 기본 → 보조1 → 보조2 순으로 내려가며 중간 단계를 건너뛰지 않는다. 본문 바로 아래에 곧장 `text-fg-tertiary` 를 쓰지 않는다.
 - `theme.css` 가 `body` 에 `grey_95` 를 깔아두므로 **본문에 텍스트 색 클래스를 붙이지 않는다.** `text-fg-primary` 를 매번 쓰는 것은 불필요하다.
-- 흐리게 보여야 하는 것은 보조 설명이든 비활성이든 **전부 `text-fg-tertiary`** 다.
-- 중간 톤(`text-fg-secondary` `#555`)은 텍스트 위계에 쓰지 않는다. 두 단계로만 간다.
+- 위계가 한 단계면 충분한 보조 설명은 `text-fg-tertiary` 하나로 끝낸다 (§2-1). 두 단계가 필요할 때만 `text-fg-secondary` 를 끼워 넣는다.
+- 비활성 표시는 단계와 무관하게 `text-fg-tertiary` 다.
 
 ```tsx
 ✅ <p>주문이 접수되었습니다.</p>                          // 색 지정 없음 = grey_95
-✅ <p className="text-fg-tertiary">최근 30일 기준</p>      // 보조 설명
+✅ <p className="text-fg-tertiary">최근 30일 기준</p>      // 보조 설명 한 단계
+✅ <>                                                     // 보조 설명 두 단계
+     <p className="text-fg-secondary">배송비 정책</p>
+     <p className="text-fg-tertiary">3만원 이상 무료</p>
+   </>
 ✅ <span className="text-fg-tertiary">-</span>            // 빈 값 (§3-4)
 ❌ <p className="text-fg-primary">주문이 접수되었습니다.</p>  // 불필요
-❌ <p className="text-fg-secondary">최근 30일 기준</p>      // 중간 톤 사용
 ```
 
 #### 그 밖의 색
@@ -291,7 +298,7 @@ function OrderModal({ orderId, open, onOpenChange, onClose, modalRef }: OrderMod
       width={720}
       // 주 액션은 button(단수), 보조 버튼은 footerLeft — 하단 버튼 양끝 분리 규칙과 같다
       button={{ label: '접수', onClick: () => modalRef.ok() }}
-      footerLeft={<SButton color="secondary" label="취소" onClick={() => modalRef.cancel()} />}
+      footerLeft={<SButton color="neutral" outline label="취소" onClick={() => modalRef.cancel()} />}
     >
       <SKeyValueTable fields={orderFields} values={order} />
     </SActionModal>
@@ -306,19 +313,26 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
 
 ### 3-4. 테이블 컬럼 정렬
 
-**숫자가 들어가는 컬럼은 예외 없이 오른쪽 정렬한다** (`align: 'right'`).
+**값의 크기를 비교하는 숫자 컬럼은 예외 없이 오른쪽 정렬한다** (`align: 'right'`).
 자릿수가 세로로 맞아야 값의 크기를 눈으로 비교할 수 있기 때문이다.
 
-| 컬럼 내용 | 정렬 | 예 |
+**판별 기준은 "숫자인가"가 아니라 "크기를 비교하는가"다.** 자릿수 차이가 거의 없고 값끼리 대소를 견줄 일이 없으면 숫자로만 이루어져 있어도 우측 정렬하지 않는다.
+
+| 값 성격 | 정렬 | 예 |
 | --- | --- | --- |
-| **금액·수량·개수·비율 등 단위가 붙은 숫자** | **`'right'`** | `39,000원` · `12개` · `3건` · `15%` |
-| **숫자만 있는 값** | **`'right'`** | `1024` · `39000` |
+| **금액·수량·개수·비율 등 양을 나타내는 값** | **`'right'`** | `39,000원` · `12개` · `3건` · `15%` |
+| 코드·식별자 (주문번호, 상품코드, 순번) | **`'center'`** | `RV20250728-000010` · `1024` |
+| 전화번호·사업자번호 | **`'center'`** | `010-1234-5678` |
+| 일자·일시 | **`'center'`** | `2024-10-23` |
 | 텍스트 | 생략(기본 `left`) | 상품명, 카테고리 |
 | 상태 태그·아이콘·체크박스 등 고정폭 요소 | `'center'` | `STag`, `SIcon` |
 
+**중앙 정렬은 `align: 'center'` 를 명시한다.** 기본값이 좌측이라 생략하면 중앙이 되지 않는다.
+
 ```tsx
 const columns: STableColumn[] = [
-  { name: 'id', label: 'ID', field: 'id', width: '80px', align: 'right' },
+  { name: 'orderNo', label: '주문번호', field: 'orderNo', width: '140px', align: 'center' },
+  { name: 'orderedAt', label: '주문일자', field: 'orderedAt', width: '100px', align: 'center' },
   { name: 'name', label: '상품명', field: 'name' },                       // 텍스트 → 생략
   { name: 'qty', label: '수량', field: 'qty', width: '80px', align: 'right',
     format: (v: number) => `${Number(v).toLocaleString()}개` },
@@ -329,8 +343,16 @@ const columns: STableColumn[] = [
 ];
 ```
 
-- `format` 으로 단위를 붙이더라도 **숫자 기반이면 오른쪽 정렬**이다. 단위 때문에 문자열이 되는 것은 정렬 판단과 무관하다.
-- 숫자는 §1-4 대로 **`toLocaleString()` 이 필수**다. 세 자리 콤마 없이 출력하지 않는다.
+- `format` 으로 단위를 붙이더라도 **양을 나타내면 오른쪽 정렬**이다. 단위 때문에 문자열이 되는 것은 정렬 판단과 무관하다.
+- 양을 나타내는 숫자는 §1-4 대로 **`toLocaleString()` 이 필수**다. 세 자리 콤마 없이 출력하지 않는다.
+- **번호·코드에는 세 자리 콤마를 넣지 않는다.** 송장번호 `123456789` 를 `123,456,789` 로 표시하면 값 자체가 달라 보인다.
+- **헤더는 가운데, 셀만 우측**으로 두려면 `align` 이 아니라 `tdClass` 를 쓴다. `align` 은 `<th>` 와 `<td>` 에 함께 적용된다.
+
+```tsx
+{ name: 'views', label: '조회수', field: 'views', align: 'center', tdClass: 'text-right!',
+  format: (v: number) => Number(v).toLocaleString() },
+```
+
 - `SKeyValueTable` 의 값 셀도 같은 기준을 따른다.
 
 #### 값이 없는 셀은 회색 하이픈
@@ -358,13 +380,58 @@ const columns: STableColumn[] = [
 
 | 상황 | 사용 |
 | --- | --- |
-| 일반 액션 | `SButton` (`color`: `primary` / `secondary` / `neutral` / `danger`, `size`: xs~lg) |
-| **삭제 등 파괴적 액션** | **`SButton color="danger"`** 또는 **`color="danger" outline`** |
+| 일반 액션 | `SButton` (`color`: `primary` / `secondary` / `neutral` / `danger`, `outline`, `size`: xs~md) |
+| **삭제 등 파괴적 액션** | **`SButton color="danger"`** 또는 **`color="danger" outline`** (아래 3-5-3) |
 | 텍스트만 있는 저강조 액션 | `SGhostButton` |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
 
-한 화면의 primary 버튼 개수에 대한 제약은 없다. 다만 **삭제·초기화 등 되돌릴 수 없는 액션은 반드시 `danger`** 로 표시한다.
+#### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
+
+`outline` 이 위계를 한 단계 낮춘다. **채움(outline 없음)이 그 페이지의 최상위 액션**이다.
+
+| 조합 | 위계 | 페이지당 |
+| --- | --- | --- |
+| `color="primary"` (진남색 채움) | 최상위 실행 | **1개** |
+| `color="danger"` (빨강 채움) | 최상위 파괴 | **1개** |
+| `color="secondary"` (밝은 파랑 채움) | 중간 | N개 — **같은 속성 연속 배치 금지** |
+| `primary outline` · `neutral outline` · `neutral`(흰 채움) · `danger outline` | 낮음 | N개 |
+
+`SDropdownButton` 도 같은 규칙을 따르며, **페이지당 `primary` 채움 1개 계산에 포함**된다.
+
+#### 3-5-2. `size` 는 놓이는 위치가 정한다
+
+| 위치 | size |
+| --- | --- |
+| 테이블 **행 내부** 인라인 액션 | `xs` |
+| 화면·목록 액션 (툴바, `STableBar`) | `sm` |
+| **모달·위저드 푸터** | `md` |
+
+`lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
+
+#### 3-5-3. 파괴적 액션의 채움 / outline
+
+물리적 위치가 아니라 **적용 범위 + 위험도**로 가른다.
+
+| 상황 | 스타일 |
+| --- | --- |
+| 대상이 **전체**이거나 기능적 위험도가 높음 (계정 삭제, 전체 초기화) | `color="danger"` **채움** + 다른 버튼과 공간 분리 |
+| **항목별**로 실행되거나 위험도가 상대적으로 낮음 (행 삭제, 연동 해제) | `color="danger" outline` |
+
+#### 3-5-4. `SDropdownButton` — `split` 기준
+
+| 설정 | 동작 | 쓰는 때 |
+| --- | --- | --- |
+| `split={false}` (기본) | 버튼 전체가 메뉴 토글. 클릭만으로는 실행되지 않는다 | 실행 전에 **범위·옵션을 골라야** 할 때 — `적치 지시서 출력 ▾` → 전체 항목 / 선택 항목만 |
+| `split` | 좌측 = 기본 동작 **즉시 실행**, 우측 `⋯` = 변형 동작 | 기본 동작이 명확하고 **변형·부가 동작**을 곁들일 때 — `저장 \| 저장 후 신규 등록` |
+
+메뉴 항목은 **기본 동작의 변형·부가 동작으로 한정**한다. 무관한 액션 여러 개를 한 드롭다운에 묶지 않는다.
+
+#### 3-5-5. 그 밖
+
+- 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`
+- 완료된 작업 버튼은 제거하지 않고 **`disabled` 로 남긴다.** 자리가 사라지면 행 높이가 흔들린다.
+- **모달 보조 액션은 `color="neutral" outline`** 이 표준이다.
 
 **하단 버튼 배치 (모든 화면 공통)** — 그룹을 모아 정렬하지 않고 **양끝으로 벌린다**(`justify-between`).
 
@@ -374,10 +441,10 @@ const columns: STableColumn[] = [
 
 ```tsx
 <div className="flex items-center justify-between">
-  <SButton color="secondary" label="취소" />
+  <SButton color="neutral" outline label="취소" />   {/* 되돌리기 = 낮은 위계 */}
   <div className="flex items-center gap-8">
     <SCheckbox label="계속 등록하기" value={keep} onValueChange={setKeep} />  {/* 부가 요소 */}
-    <SButton label="저장" />
+    <SButton label="저장" />                          {/* 페이지 유일한 primary 채움 */}
   </div>
 </div>
 ```
@@ -483,10 +550,14 @@ export default function ProductListPage() {
         total={total}
         selected={selected.length}
         actions={
-          <SButton size="sm" color="secondary" label="선택 삭제"
+          /* 선택 항목 단위 파괴 액션 → danger outline (§3-5-3) */
+          <SButton size="sm" color="danger" outline label="선택 삭제"
             disabled={!selected.length} onClick={removeSelected} />
         }
-        rightActions={<SButton size="sm" label="상품 등록" onClick={goCreate} />}
+        rightActions={
+          /* 이 페이지의 유일한 primary 채움 (§3-5-1) */
+          <SButton size="sm" label="상품 등록" onClick={goCreate} />
+        }
       />
 
       <STable
@@ -556,7 +627,7 @@ export default function ProductCreatePage() {
 
         {/* 하단 버튼은 양끝으로 벌린다. 부가 요소(체크박스 등)는 저장 바로 왼쪽 */}
         <div className="flex items-center justify-between">
-          <SButton type="button" color="secondary" label="취소" onClick={goBack} />
+          <SButton type="button" color="neutral" outline label="취소" onClick={goBack} />
           <div className="flex items-center gap-8">
             <SCheckbox label="계속 등록하기" value={keepOpen} onValueChange={v => setKeepOpen(v as boolean)} />
             <SButton type="submit" label="저장" />
@@ -629,7 +700,7 @@ export default function ProductDetailPage() {
 
       {/* 액션은 하단 — 목록(되돌리기)은 왼쪽 끝, 실행 액션은 오른쪽 끝 */}
       <div className="flex items-center justify-between">
-        <SButton color="secondary" label="목록" onClick={goList} />
+        <SButton color="neutral" outline label="목록" onClick={goList} />
         <div className="flex items-center gap-8">
           <SButton color="danger" outline label="삭제" onClick={confirmDelete} />
           <SButton label="수정" onClick={goEdit} />
@@ -664,7 +735,8 @@ export default function ProductDetailPage() {
 - [ ] `text-[14px]`, `bg-[#...]` 같은 리터럴 임의 값이 없는가 (`var(--sys-*)` 참조는 허용)
 - [ ] 텍스트에 `typo-*` 프리셋을 썼는가
 - [ ] 간격이 전부 토큰 스케일 값인가 (`gap-13` ❌ → `gap-12` ✅)
-- [ ] 본문이 12px(`typo-body-sm-default`)이고 보조 설명이 `text-fg-tertiary` 인가 (14px 본문 ❌)
+- [ ] 본문이 12px(`typo-body-sm-default`)인가 (14px 본문 ❌)
+- [ ] 텍스트 회색 위계를 순차 적용했는가 (기본 → `text-fg-secondary` → `text-fg-tertiary`, 단계 건너뛰기 ❌)
 - [ ] 페이지 패딩이 `p-20`, 블록·섹션 간격이 `gap-12` 인가 (`gap-16`/`gap-24` ❌)
 - [ ] 같은 컴포넌트를 나열할 때 §2-2 그룹 간격을 썼는가 (체크박스 가로 `gap-24` 등)
 - [ ] 페이지가 §4의 표준 골격에서 시작했는가
@@ -672,11 +744,13 @@ export default function ProductDetailPage() {
 - [ ] 섹션 구분에 `SSectionHeaderCard` 를 썼는가 (직접 만든 카드가 아니라)
 - [ ] 목록의 주요 액션이 `STableBar` 의 `rightActions` 에 있는가 (페이지 제목 줄이 아니라)
 - [ ] 상태 표시에 `STag size="sm"` 을 썼는가
-- [ ] 테이블의 숫자 컬럼(금액·수량·개수 등)이 전부 `align: 'right'` 인가
-- [ ] 화면에 표시하는 모든 숫자에 `toLocaleString()` 을 써서 세 자리 콤마를 넣었는가
-- [ ] 금액·수량 등 양을 나타내는 숫자에 `toLocaleString()` 을 썼는가 (번호·코드는 제외)
+- [ ] 테이블에서 양을 나타내는 컬럼(금액·수량·개수 등)이 전부 `align: 'right'` 인가
+- [ ] 번호·코드·전화번호·일자 컬럼에 `align: 'center'` 를 **명시**했는가 (생략하면 좌측이 된다)
+- [ ] 금액·수량 등 양을 나타내는 숫자에 빠짐없이 `toLocaleString()` 을 썼는가 (번호·코드는 제외)
 - [ ] 하단 버튼이 양끝 분리(`justify-between`)이고, 되돌리기가 왼쪽 끝 · 실행이 오른쪽 끝인가
-- [ ] 삭제 등 파괴적 액션에 `color="danger"` 를 썼는가
+- [ ] 페이지에 `color="primary"` 채움 버튼이 **1개뿐**인가 (`danger` 채움도 1개, `SDropdownButton` 포함)
+- [ ] 버튼 `size` 가 위치 규칙과 맞는가 (행 내부 `xs` / 화면 액션 `sm` / 모달 푸터 `md`)
+- [ ] 파괴 액션의 채움/outline 이 **적용 범위 + 위험도** 기준과 맞는가
 - [ ] 작업용 모달을 `SActionModal` + `SModal.create` 로 만들었는가 (직접 오버레이 ❌)
 - [ ] 상태 표시·알림·확인 다이얼로그가 §3의 선택 규칙을 따르는가
 
@@ -693,9 +767,8 @@ export default function ProductDetailPage() {
 | `sellmate/no-arbitrary-class` | §1-2 토큰 있는 속성의 임의 값 (`text-[14px]`, `bg-[#eee]`) |
 | `sellmate/no-off-scale-spacing` | §2-2 스케일 밖 간격 (`gap-13`) |
 | `sellmate/table-numeric-align` | §3-4 숫자 컬럼의 `align: 'right'` 누락 (`--fix` 지원) |
-| `sellmate/require-locale-number` | §1-4 숫자 컬럼의 `toLocaleString()` 누락 |
+| `sellmate/require-locale-number` | §1-4 금액·수량 등 수량 컬럼의 `toLocaleString()` 누락 |
 | `sellmate/component-group-gap` | §2-2 컴포넌트 그룹 간격 (체크박스 가로 24 / 세로 8 등) |
-| `sellmate/require-locale-number` | §1-4 금액·수량 등의 `toLocaleString()` 누락 |
 | `sellmate/prefer-typo-preset` | §1-3 낱개 폰트 조합 (`text-14 font-bold`) |
 
 `gap-13` 처럼 스케일 밖 값은 Tailwind v4 에서 **에러 없이 조용히 무시된다**. "간격이 왜 안 먹지" 로만 보이므로 반드시 스케일 값을 쓴다.
@@ -884,6 +957,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `open?` | `boolean` | — |  |
 | `persistent?` | `boolean` | — | true면 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent) |
 | `modalTitle?` | `string` | `''` |  |
+| `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯). 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
 | `button?` | `SActionModalButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |
 | `footerLeft?` | `ReactNode` | — | footer 좌측 영역 (sd-action-modal 의 bottom-sub-content 슬롯). 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다. |
 | `width?` | `number \| string` | — |  |
@@ -924,7 +998,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Used by
 
- - [SList](../SList)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Graph
 
@@ -1955,7 +2029,6 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SKeyValueTable](../SKeyValueTable)
- - [SList](../SList)
  - [SLoadingModal](../SLoadingModal)
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
@@ -3520,7 +3593,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 
  - [SField](../SField)
  - [SKeyValueTable](../SKeyValueTable)
- - [SList](../SList)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Depends on
 

package/dist/llms.txt

@@ -127,7 +127,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 콤마 없는 `39000` 은 자릿수를 세어야 읽히지만 `39,000` 은 한눈에 읽힌다. 숫자를 그대로 출력하는 코드는 미완성으로 본다.
 
-전화번호·사업자번호처럼 하이픈이 들어가는 값은 애초에 숫자가 아니라 **서식이 정해진 문자열**이므로 이 규칙의 대상이 아니다.
+**번호·코드는 제외한다.** 전화번호·사업자번호·송장번호·상품코드처럼 대상을 가리키는 값은 크기를 비교하는 숫자가 아니라 **서식이 정해진 문자열**이다. 여기에 콤마를 넣으면 송장번호 `123456789` 가 `123,456,789` 로 보여 값 자체가 달라진다.
 
 ---
 
@@ -155,6 +155,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 페이지 제목만 18px 로 크게 두고 그 아래는 14 / 12 로 촘촘하게 간다. 중간 크기(16px)는 기본 골격에서 쓰지 않는다.
 
+**보조 설명의 색** — 기본은 `text-fg-tertiary`(`grey_65`) 다. 보조 설명 안에서 위계가 한 단계 더 필요할 때만 `text-fg-secondary`(`grey_80`) → `text-fg-tertiary`(`grey_65`) 순으로 내려 쓴다 (§2-3).
+
 ### 2-2. 간격 (spacing)
 
 - 유틸리티 숫자 = px. 스케일: `2 4 6 8 10 12 16 19 20 22 24 28 32 36 40 48 60`
@@ -166,8 +168,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | **페이지 콘텐츠 패딩** | **`p-20`** |
 | **섹션 ↔ 섹션** | **`gap-12`** |
 | **페이지 내 블록 ↔ 블록** (헤더·필터·툴바·테이블 사이) | **`gap-12`** |
-| 요소 ↔ 요소 (기본) | `gap-8` (`--sys-space-stack-gap-element-normal`) |
-| 제목 ↔ 설명 텍스트 | `gap-4` (`--sys-space-stack-gap-text-normal`) |
+| 요소 ↔ 요소 | **기본 `gap-8`** (`--sys-space-stack-gap-element-normal`) · 타이트 `gap-4`(`-tight`) · 여유 `gap-12`(`-relaxed`) / `gap-16`(`-wide`) |
+| 제목 ↔ 설명 텍스트 | **수직 배치 `gap-4`**(`--sys-space-stack-gap-text-normal`, 타이트 `gap-2`) · **가로 배치 `gap-8`**(`-relaxed`) |
 
 정보 밀도가 높은 서비스라 블록 간격을 넓게 벌리지 않는다. `gap-16` / `gap-24` 를 페이지 골격의 기본값으로 쓰지 않는다.
 
@@ -207,23 +209,28 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 **시맨틱 유틸리티를 우선 사용한다** — 의미가 이름에 담긴 토큰이 이미 유틸리티로 존재한다.
 
-#### 텍스트 색은 두 단계뿐이다
+#### 텍스트 회색 위계는 세 단계다
 
-| 용도 | 유틸리티 | 값 |
-| --- | --- | --- |
-| **본문·제목 (기본값)** | 지정하지 않는다 — 전역 기본색이 이미 적용된다 | `grey_95` `#222222` |
-| **보조 설명 · 비활성** | **`text-fg-tertiary`** | `grey_65` `#888888` |
+| 단계 | 유틸리티 | 값 | 용도 |
+| --- | --- | --- | --- |
+| **기본** | 지정하지 않는다 — 전역 기본색이 이미 적용된다 (`text-fg-primary`) | `grey_95` `#222222` | 본문·제목 |
+| **보조 1** | **`text-fg-secondary`** | `grey_80` `#555555` | 보조 정보 |
+| **보조 2 / 비활성** | **`text-fg-tertiary`** | `grey_65` `#888888` | 부가 설명, 비활성 |
 
+- **위계는 순차 적용한다.** 기본 → 보조1 → 보조2 순으로 내려가며 중간 단계를 건너뛰지 않는다. 본문 바로 아래에 곧장 `text-fg-tertiary` 를 쓰지 않는다.
 - `theme.css` 가 `body` 에 `grey_95` 를 깔아두므로 **본문에 텍스트 색 클래스를 붙이지 않는다.** `text-fg-primary` 를 매번 쓰는 것은 불필요하다.
-- 흐리게 보여야 하는 것은 보조 설명이든 비활성이든 **전부 `text-fg-tertiary`** 다.
-- 중간 톤(`text-fg-secondary` `#555`)은 텍스트 위계에 쓰지 않는다. 두 단계로만 간다.
+- 위계가 한 단계면 충분한 보조 설명은 `text-fg-tertiary` 하나로 끝낸다 (§2-1). 두 단계가 필요할 때만 `text-fg-secondary` 를 끼워 넣는다.
+- 비활성 표시는 단계와 무관하게 `text-fg-tertiary` 다.
 
 ```tsx
 ✅ <p>주문이 접수되었습니다.</p>                          // 색 지정 없음 = grey_95
-✅ <p className="text-fg-tertiary">최근 30일 기준</p>      // 보조 설명
+✅ <p className="text-fg-tertiary">최근 30일 기준</p>      // 보조 설명 한 단계
+✅ <>                                                     // 보조 설명 두 단계
+     <p className="text-fg-secondary">배송비 정책</p>
+     <p className="text-fg-tertiary">3만원 이상 무료</p>
+   </>
 ✅ <span className="text-fg-tertiary">-</span>            // 빈 값 (§3-4)
 ❌ <p className="text-fg-primary">주문이 접수되었습니다.</p>  // 불필요
-❌ <p className="text-fg-secondary">최근 30일 기준</p>      // 중간 톤 사용
 ```
 
 #### 그 밖의 색
@@ -292,7 +299,7 @@ function OrderModal({ orderId, open, onOpenChange, onClose, modalRef }: OrderMod
       width={720}
       // 주 액션은 button(단수), 보조 버튼은 footerLeft — 하단 버튼 양끝 분리 규칙과 같다
       button={{ label: '접수', onClick: () => modalRef.ok() }}
-      footerLeft={<SButton color="secondary" label="취소" onClick={() => modalRef.cancel()} />}
+      footerLeft={<SButton color="neutral" outline label="취소" onClick={() => modalRef.cancel()} />}
     >
       <SKeyValueTable fields={orderFields} values={order} />
     </SActionModal>
@@ -307,19 +314,26 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
 
 ### 3-4. 테이블 컬럼 정렬
 
-**숫자가 들어가는 컬럼은 예외 없이 오른쪽 정렬한다** (`align: 'right'`).
+**값의 크기를 비교하는 숫자 컬럼은 예외 없이 오른쪽 정렬한다** (`align: 'right'`).
 자릿수가 세로로 맞아야 값의 크기를 눈으로 비교할 수 있기 때문이다.
 
-| 컬럼 내용 | 정렬 | 예 |
+**판별 기준은 "숫자인가"가 아니라 "크기를 비교하는가"다.** 자릿수 차이가 거의 없고 값끼리 대소를 견줄 일이 없으면 숫자로만 이루어져 있어도 우측 정렬하지 않는다.
+
+| 값 성격 | 정렬 | 예 |
 | --- | --- | --- |
-| **금액·수량·개수·비율 등 단위가 붙은 숫자** | **`'right'`** | `39,000원` · `12개` · `3건` · `15%` |
-| **숫자만 있는 값** | **`'right'`** | `1024` · `39000` |
+| **금액·수량·개수·비율 등 양을 나타내는 값** | **`'right'`** | `39,000원` · `12개` · `3건` · `15%` |
+| 코드·식별자 (주문번호, 상품코드, 순번) | **`'center'`** | `RV20250728-000010` · `1024` |
+| 전화번호·사업자번호 | **`'center'`** | `010-1234-5678` |
+| 일자·일시 | **`'center'`** | `2024-10-23` |
 | 텍스트 | 생략(기본 `left`) | 상품명, 카테고리 |
 | 상태 태그·아이콘·체크박스 등 고정폭 요소 | `'center'` | `STag`, `SIcon` |
 
+**중앙 정렬은 `align: 'center'` 를 명시한다.** 기본값이 좌측이라 생략하면 중앙이 되지 않는다.
+
 ```tsx
 const columns: STableColumn[] = [
-  { name: 'id', label: 'ID', field: 'id', width: '80px', align: 'right' },
+  { name: 'orderNo', label: '주문번호', field: 'orderNo', width: '140px', align: 'center' },
+  { name: 'orderedAt', label: '주문일자', field: 'orderedAt', width: '100px', align: 'center' },
   { name: 'name', label: '상품명', field: 'name' },                       // 텍스트 → 생략
   { name: 'qty', label: '수량', field: 'qty', width: '80px', align: 'right',
     format: (v: number) => `${Number(v).toLocaleString()}개` },
@@ -330,8 +344,16 @@ const columns: STableColumn[] = [
 ];
 ```
 
-- `format` 으로 단위를 붙이더라도 **숫자 기반이면 오른쪽 정렬**이다. 단위 때문에 문자열이 되는 것은 정렬 판단과 무관하다.
-- 숫자는 §1-4 대로 **`toLocaleString()` 이 필수**다. 세 자리 콤마 없이 출력하지 않는다.
+- `format` 으로 단위를 붙이더라도 **양을 나타내면 오른쪽 정렬**이다. 단위 때문에 문자열이 되는 것은 정렬 판단과 무관하다.
+- 양을 나타내는 숫자는 §1-4 대로 **`toLocaleString()` 이 필수**다. 세 자리 콤마 없이 출력하지 않는다.
+- **번호·코드에는 세 자리 콤마를 넣지 않는다.** 송장번호 `123456789` 를 `123,456,789` 로 표시하면 값 자체가 달라 보인다.
+- **헤더는 가운데, 셀만 우측**으로 두려면 `align` 이 아니라 `tdClass` 를 쓴다. `align` 은 `<th>` 와 `<td>` 에 함께 적용된다.
+
+```tsx
+{ name: 'views', label: '조회수', field: 'views', align: 'center', tdClass: 'text-right!',
+  format: (v: number) => Number(v).toLocaleString() },
+```
+
 - `SKeyValueTable` 의 값 셀도 같은 기준을 따른다.
 
 #### 값이 없는 셀은 회색 하이픈
@@ -359,13 +381,58 @@ const columns: STableColumn[] = [
 
 | 상황 | 사용 |
 | --- | --- |
-| 일반 액션 | `SButton` (`color`: `primary` / `secondary` / `neutral` / `danger`, `size`: xs~lg) |
-| **삭제 등 파괴적 액션** | **`SButton color="danger"`** 또는 **`color="danger" outline`** |
+| 일반 액션 | `SButton` (`color`: `primary` / `secondary` / `neutral` / `danger`, `outline`, `size`: xs~md) |
+| **삭제 등 파괴적 액션** | **`SButton color="danger"`** 또는 **`color="danger" outline`** (아래 3-5-3) |
 | 텍스트만 있는 저강조 액션 | `SGhostButton` |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
 
-한 화면의 primary 버튼 개수에 대한 제약은 없다. 다만 **삭제·초기화 등 되돌릴 수 없는 액션은 반드시 `danger`** 로 표시한다.
+#### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
+
+`outline` 이 위계를 한 단계 낮춘다. **채움(outline 없음)이 그 페이지의 최상위 액션**이다.
+
+| 조합 | 위계 | 페이지당 |
+| --- | --- | --- |
+| `color="primary"` (진남색 채움) | 최상위 실행 | **1개** |
+| `color="danger"` (빨강 채움) | 최상위 파괴 | **1개** |
+| `color="secondary"` (밝은 파랑 채움) | 중간 | N개 — **같은 속성 연속 배치 금지** |
+| `primary outline` · `neutral outline` · `neutral`(흰 채움) · `danger outline` | 낮음 | N개 |
+
+`SDropdownButton` 도 같은 규칙을 따르며, **페이지당 `primary` 채움 1개 계산에 포함**된다.
+
+#### 3-5-2. `size` 는 놓이는 위치가 정한다
+
+| 위치 | size |
+| --- | --- |
+| 테이블 **행 내부** 인라인 액션 | `xs` |
+| 화면·목록 액션 (툴바, `STableBar`) | `sm` |
+| **모달·위저드 푸터** | `md` |
+
+`lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
+
+#### 3-5-3. 파괴적 액션의 채움 / outline
+
+물리적 위치가 아니라 **적용 범위 + 위험도**로 가른다.
+
+| 상황 | 스타일 |
+| --- | --- |
+| 대상이 **전체**이거나 기능적 위험도가 높음 (계정 삭제, 전체 초기화) | `color="danger"` **채움** + 다른 버튼과 공간 분리 |
+| **항목별**로 실행되거나 위험도가 상대적으로 낮음 (행 삭제, 연동 해제) | `color="danger" outline` |
+
+#### 3-5-4. `SDropdownButton` — `split` 기준
+
+| 설정 | 동작 | 쓰는 때 |
+| --- | --- | --- |
+| `split={false}` (기본) | 버튼 전체가 메뉴 토글. 클릭만으로는 실행되지 않는다 | 실행 전에 **범위·옵션을 골라야** 할 때 — `적치 지시서 출력 ▾` → 전체 항목 / 선택 항목만 |
+| `split` | 좌측 = 기본 동작 **즉시 실행**, 우측 `⋯` = 변형 동작 | 기본 동작이 명확하고 **변형·부가 동작**을 곁들일 때 — `저장 \| 저장 후 신규 등록` |
+
+메뉴 항목은 **기본 동작의 변형·부가 동작으로 한정**한다. 무관한 액션 여러 개를 한 드롭다운에 묶지 않는다.
+
+#### 3-5-5. 그 밖
+
+- 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`
+- 완료된 작업 버튼은 제거하지 않고 **`disabled` 로 남긴다.** 자리가 사라지면 행 높이가 흔들린다.
+- **모달 보조 액션은 `color="neutral" outline`** 이 표준이다.
 
 **하단 버튼 배치 (모든 화면 공통)** — 그룹을 모아 정렬하지 않고 **양끝으로 벌린다**(`justify-between`).
 
@@ -375,10 +442,10 @@ const columns: STableColumn[] = [
 
 ```tsx
 <div className="flex items-center justify-between">
-  <SButton color="secondary" label="취소" />
+  <SButton color="neutral" outline label="취소" />   {/* 되돌리기 = 낮은 위계 */}
   <div className="flex items-center gap-8">
     <SCheckbox label="계속 등록하기" value={keep} onValueChange={setKeep} />  {/* 부가 요소 */}
-    <SButton label="저장" />
+    <SButton label="저장" />                          {/* 페이지 유일한 primary 채움 */}
   </div>
 </div>
 ```
@@ -484,10 +551,14 @@ export default function ProductListPage() {
         total={total}
         selected={selected.length}
         actions={
-          <SButton size="sm" color="secondary" label="선택 삭제"
+          /* 선택 항목 단위 파괴 액션 → danger outline (§3-5-3) */
+          <SButton size="sm" color="danger" outline label="선택 삭제"
             disabled={!selected.length} onClick={removeSelected} />
         }
-        rightActions={<SButton size="sm" label="상품 등록" onClick={goCreate} />}
+        rightActions={
+          /* 이 페이지의 유일한 primary 채움 (§3-5-1) */
+          <SButton size="sm" label="상품 등록" onClick={goCreate} />
+        }
       />
 
       <STable
@@ -557,7 +628,7 @@ export default function ProductCreatePage() {
 
         {/* 하단 버튼은 양끝으로 벌린다. 부가 요소(체크박스 등)는 저장 바로 왼쪽 */}
         <div className="flex items-center justify-between">
-          <SButton type="button" color="secondary" label="취소" onClick={goBack} />
+          <SButton type="button" color="neutral" outline label="취소" onClick={goBack} />
           <div className="flex items-center gap-8">
             <SCheckbox label="계속 등록하기" value={keepOpen} onValueChange={v => setKeepOpen(v as boolean)} />
             <SButton type="submit" label="저장" />
@@ -630,7 +701,7 @@ export default function ProductDetailPage() {
 
       {/* 액션은 하단 — 목록(되돌리기)은 왼쪽 끝, 실행 액션은 오른쪽 끝 */}
       <div className="flex items-center justify-between">
-        <SButton color="secondary" label="목록" onClick={goList} />
+        <SButton color="neutral" outline label="목록" onClick={goList} />
         <div className="flex items-center gap-8">
           <SButton color="danger" outline label="삭제" onClick={confirmDelete} />
           <SButton label="수정" onClick={goEdit} />
@@ -665,7 +736,8 @@ export default function ProductDetailPage() {
 - [ ] `text-[14px]`, `bg-[#...]` 같은 리터럴 임의 값이 없는가 (`var(--sys-*)` 참조는 허용)
 - [ ] 텍스트에 `typo-*` 프리셋을 썼는가
 - [ ] 간격이 전부 토큰 스케일 값인가 (`gap-13` ❌ → `gap-12` ✅)
-- [ ] 본문이 12px(`typo-body-sm-default`)이고 보조 설명이 `text-fg-tertiary` 인가 (14px 본문 ❌)
+- [ ] 본문이 12px(`typo-body-sm-default`)인가 (14px 본문 ❌)
+- [ ] 텍스트 회색 위계를 순차 적용했는가 (기본 → `text-fg-secondary` → `text-fg-tertiary`, 단계 건너뛰기 ❌)
 - [ ] 페이지 패딩이 `p-20`, 블록·섹션 간격이 `gap-12` 인가 (`gap-16`/`gap-24` ❌)
 - [ ] 같은 컴포넌트를 나열할 때 §2-2 그룹 간격을 썼는가 (체크박스 가로 `gap-24` 등)
 - [ ] 페이지가 §4의 표준 골격에서 시작했는가
@@ -673,11 +745,13 @@ export default function ProductDetailPage() {
 - [ ] 섹션 구분에 `SSectionHeaderCard` 를 썼는가 (직접 만든 카드가 아니라)
 - [ ] 목록의 주요 액션이 `STableBar` 의 `rightActions` 에 있는가 (페이지 제목 줄이 아니라)
 - [ ] 상태 표시에 `STag size="sm"` 을 썼는가
-- [ ] 테이블의 숫자 컬럼(금액·수량·개수 등)이 전부 `align: 'right'` 인가
-- [ ] 화면에 표시하는 모든 숫자에 `toLocaleString()` 을 써서 세 자리 콤마를 넣었는가
-- [ ] 금액·수량 등 양을 나타내는 숫자에 `toLocaleString()` 을 썼는가 (번호·코드는 제외)
+- [ ] 테이블에서 양을 나타내는 컬럼(금액·수량·개수 등)이 전부 `align: 'right'` 인가
+- [ ] 번호·코드·전화번호·일자 컬럼에 `align: 'center'` 를 **명시**했는가 (생략하면 좌측이 된다)
+- [ ] 금액·수량 등 양을 나타내는 숫자에 빠짐없이 `toLocaleString()` 을 썼는가 (번호·코드는 제외)
 - [ ] 하단 버튼이 양끝 분리(`justify-between`)이고, 되돌리기가 왼쪽 끝 · 실행이 오른쪽 끝인가
-- [ ] 삭제 등 파괴적 액션에 `color="danger"` 를 썼는가
+- [ ] 페이지에 `color="primary"` 채움 버튼이 **1개뿐**인가 (`danger` 채움도 1개, `SDropdownButton` 포함)
+- [ ] 버튼 `size` 가 위치 규칙과 맞는가 (행 내부 `xs` / 화면 액션 `sm` / 모달 푸터 `md`)
+- [ ] 파괴 액션의 채움/outline 이 **적용 범위 + 위험도** 기준과 맞는가
 - [ ] 작업용 모달을 `SActionModal` + `SModal.create` 로 만들었는가 (직접 오버레이 ❌)
 - [ ] 상태 표시·알림·확인 다이얼로그가 §3의 선택 규칙을 따르는가
 
@@ -694,9 +768,8 @@ export default function ProductDetailPage() {
 | `sellmate/no-arbitrary-class` | §1-2 토큰 있는 속성의 임의 값 (`text-[14px]`, `bg-[#eee]`) |
 | `sellmate/no-off-scale-spacing` | §2-2 스케일 밖 간격 (`gap-13`) |
 | `sellmate/table-numeric-align` | §3-4 숫자 컬럼의 `align: 'right'` 누락 (`--fix` 지원) |
-| `sellmate/require-locale-number` | §1-4 숫자 컬럼의 `toLocaleString()` 누락 |
+| `sellmate/require-locale-number` | §1-4 금액·수량 등 수량 컬럼의 `toLocaleString()` 누락 |
 | `sellmate/component-group-gap` | §2-2 컴포넌트 그룹 간격 (체크박스 가로 24 / 세로 8 등) |
-| `sellmate/require-locale-number` | §1-4 금액·수량 등의 `toLocaleString()` 누락 |
 | `sellmate/prefer-typo-preset` | §1-3 낱개 폰트 조합 (`text-14 font-bold`) |
 
 `gap-13` 처럼 스케일 밖 값은 Tailwind v4 에서 **에러 없이 조용히 무시된다**. "간격이 왜 안 먹지" 로만 보이므로 반드시 스케일 값을 쓴다.

package/dist/styles.css

@@ -2406,6 +2406,9 @@
   .text-right {
     text-align: right;
   }
+  .text-right\! {
+    text-align: right !important;
+  }
   .align-middle {
     vertical-align: middle;
   }