sellmate-design-system-react 3.3.0 → 3.3.1

package/AGENTS.md

@@ -118,7 +118,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 콤마 없는 `39000` 은 자릿수를 세어야 읽히지만 `39,000` 은 한눈에 읽힌다. 숫자를 그대로 출력하는 코드는 미완성으로 본다.
 
-전화번호·사업자번호처럼 하이픈이 들어가는 값은 애초에 숫자가 아니라 **서식이 정해진 문자열**이므로 이 규칙의 대상이 아니다.
+**번호·코드는 제외한다.** 전화번호·사업자번호·송장번호·상품코드처럼 대상을 가리키는 값은 크기를 비교하는 숫자가 아니라 **서식이 정해진 문자열**이다. 여기에 콤마를 넣으면 송장번호 `123456789` 가 `123,456,789` 로 보여 값 자체가 달라진다.
 
 ---
 
@@ -146,6 +146,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`
@@ -157,8 +159,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` 를 페이지 골격의 기본값으로 쓰지 않는다.
 
@@ -198,23 +200,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>      // 중간 톤 사용
 ```
 
 #### 그 밖의 색
@@ -283,7 +290,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>
@@ -298,19 +305,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()}개` },
@@ -321,8 +335,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` 의 값 셀도 같은 기준을 따른다.
 
 #### 값이 없는 셀은 회색 하이픈
@@ -350,13 +372,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`).
 
@@ -366,10 +433,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>
 ```
@@ -475,10 +542,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
@@ -548,7 +619,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="저장" />
@@ -621,7 +692,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} />
@@ -656,7 +727,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의 표준 골격에서 시작했는가
@@ -664,11 +736,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의 선택 규칙을 따르는가
 
@@ -685,9 +759,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/README.md

@@ -160,8 +160,8 @@ export default [
 | `sellmate/no-raw-html-control` | error | 대응 컴포넌트가 있는 생 HTML (`<button>` `<input>` `<select>` `<textarea>` `<table>` `<form>` `<dialog>` `<hr>` `<details>` `<progress>`), `alert()`/`confirm()` |
 | `sellmate/no-arbitrary-class` | error | **토큰이 있는 속성**(색·타이포·간격·모서리)의 임의 값 — `text-[14px]`, `bg-[#eee]`, `gap-[13px]`, `rounded-[5px]` |
 | `sellmate/no-off-scale-spacing` | error | 스케일 밖 간격 (`gap-13`, `p-15`) — Tailwind v4 에서 **조용히 무시되는** 값이라 눈으로 찾기 어렵다 |
-| `sellmate/table-numeric-align` | error | 숫자 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정** |
-| `sellmate/require-locale-number` | error | 숫자 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마는 필수 |
+| `sellmate/table-numeric-align` | error | 수량 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정** |
+| `sellmate/require-locale-number` | error | 수량 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마는 필수 |
 | `sellmate/component-group-gap` | error | 같은 컴포넌트를 나열할 때의 그룹 간격 — 배열 방향에 따라 값이 다르다(체크박스 가로 24 / 세로 8) |
 | `sellmate/prefer-typo-preset` | warn | `text-14 font-bold` 같은 낱개 조합 → `typo-*` 프리셋 |
 
@@ -188,6 +188,30 @@ export default [
 
 핵심은 **"디자인 토큰을 하드코딩하지 마라"** 이지 "임의 값을 절대 쓰지 마라" 가 아닙니다.
 
+테이블 두 규칙(`table-numeric-align` · `require-locale-number`)도 아래는 통과시킵니다.
+
+```tsx
+// 번호·코드 등 식별자 — 크기를 비교하지 않으므로 우측 정렬도 콤마도 요구하지 않는다
+{ name: 'waybillNo', label: '송장번호', field: 'waybillNo', align: 'center' }
+
+// 헤더 가운데 + 셀 우측 — align 은 th·td 공통이라 tdClass 로만 표현된다
+{ name: 'views', label: '조회수', field: 'views', align: 'center', tdClass: 'text-right!',
+  format: (v: number) => Number(v).toLocaleString() }
+
+// render / renderCell 로 셀을 직접 그리는 컬럼 — 라벨만으로 숫자 여부를 판단하지 않는다
+{ name: 'unitPrice', label: '단가', field: 'unitPrice', align: 'right',
+  renderCell: ({ row }) => `${row.unitPrice.toLocaleString()}원` }
+
+// 수량 어휘를 부분 문자열로 포함하지만 값은 불리언인 상태 컬럼
+{ name: 'isCostInput', label: '비용 입력 여부', field: 'isCostInput', align: 'center' }
+```
+
+그래도 남는 예외는 컬럼 `name` 을 `allow` 로 지정해 뺍니다.
+
+```js
+'sellmate/table-numeric-align': ['error', { allow: ['rank'] }],
+```
+
 ### 더 엄격하게 / 더 느슨하게
 
 `configs.strict` 는 전 규칙을 error 로 올리고 `<ul>` `<ol>` `<li>` `<svg>` `<label>` 까지 검사합니다.

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 에서 **에러 없이 조용히 무시된다**. "간격이 왜 안 먹지" 로만 보이므로 반드시 스케일 값을 쓴다.

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;
   }

package/eslint/lib/table-column.mjs

@@ -4,21 +4,57 @@
  */
 
 /**
- * 오른쪽 정렬 대상 — 숫자가 들어가는 모든 컬럼.
- * 식별자(주문번호·상품코드)도 숫자라 자릿수를 맞춰야 하므로 포함한다.
+ * 오른쪽 정렬·세 자리 콤마 대상 — 값의 "크기"를 비교하는 수량 컬럼.
+ *
+ * 식별자(주문번호·상품코드)는 자릿수가 있어도 대소를 비교하지 않으므로 뺀다.
+ * 우측 정렬의 근거가 "자릿수를 세로로 맞춰 크기를 읽는다"이고,
+ * 송장번호 `123456789` 에 콤마를 넣으면 `123,456,789` 라는 오표시가 된다.
  */
 export const NUMERIC_LABEL =
-  /금액|가격|단가|판매가|원가|비용|수수료|배송비|할인|합계|총액|잔액|포인트|적립|수량|재고|개수|건수|횟수|비율|퍼센트|평점|점수|무게|용량|길이|면적|번호|코드|순번|순위|나이|연차/;
+  /금액|가격|단가|판매가|원가|비용|수수료|배송비|할인|합계|총액|잔액|포인트|적립|수량|재고|개수|건수|횟수|비율|퍼센트|평점|점수|무게|용량|길이|면적|나이|연차/;
 
 /**
- * 하이픈 등 서식이 들어간 문자열 — 숫자가 아니므로 정렬·서식 규칙 모두 대상이 아니다.
- * (전화번호 010-1234-5678, 사업자번호 123-45-67890)
+ * 식별자 — 숫자로 이루어져 있어도 크기 비교 대상이 아니다.
+ * 정렬·서식 규칙 모두에서 뺀다.
+ *
+ * (전화번호 010-1234-5678, 사업자번호 123-45-67890, 송장번호 123456789)
+ *
+ * `주문`·`오더` 같은 도메인 접두어는 넣지 않는다 — `주문 금액`·`오더 합계` 처럼
+ * 실제 수량 컬럼까지 함께 빠진다. 식별자 쪽은 뒤에 붙는 `번호`·`코드` 로 잡힌다.
  */
-export const IDENTIFIER_ONLY = /전화|휴대폰|연락처|사업자|주민|계좌|우편/;
+export const IDENTIFIER_ONLY =
+  /전화|휴대폰|연락처|사업자|주민|계좌|우편|번호|코드|순번|순위|송장|운송장|전표|슬립|정산서|바코드|SKU|사번|일련/;
+
+/**
+ * 일자·일시 — 서식이 정해진 값이라 우측 정렬도 세 자리 콤마도 대상이 아니다 (§3-4 중앙 정렬).
+ * `format` 에 `Number(` 가 섞여도 숫자로 되살아나지 않게 따로 뺀다.
+ */
+export const DATE_LABEL = /일자|일시|날짜|기간|시각|등록일|수정일|생성일|만료일/;
+
+/**
+ * 상태·구분 컬럼 — 수량 어휘를 부분 문자열로 포함해도 값은 숫자가 아니다.
+ * (`비용 입력 여부` 가 `비용` 에 걸리는 것을 막는다)
+ */
+export const NON_NUMERIC_SUFFIX = /(여부|유무|상태|구분|타입|종류|명|이름)$/;
 
 /** format 본문에 숫자 서식이 있으면 숫자 컬럼으로 본다 */
 export const NUMERIC_FORMAT = /toLocaleString|toFixed|Number\s*\(|parseInt|parseFloat/;
 
+/**
+ * 셀을 우측 정렬하는 클래스.
+ * `align` 은 헤더·셀에 공통 적용되므로 "헤더 가운데 + 셀 우측" 은 `tdClass` 로만 표현된다.
+ */
+export const CELL_RIGHT_CLASS = /\btext-right\b/;
+
+/**
+ * 수량 판정에서 아예 빼야 하는 라벨인지 — 식별자·일자·상태/구분 컬럼.
+ * 라벨 분기·format 분기보다 먼저 확인해야 한다.
+ * (`사업자번호` 처럼 식별자여도 format 에 `Number(` 가 있으면 숫자로 되돌아간다)
+ */
+export function isNonQuantityLabel(label) {
+  return IDENTIFIER_ONLY.test(label) || DATE_LABEL.test(label) || NON_NUMERIC_SUFFIX.test(label);
+}
+
 /** 객체 리터럴에서 프로퍼티 노드를 이름으로 찾는다 */
 export function prop(objectNode, name) {
   return objectNode.properties.find(

package/eslint/rules/require-locale-number.mjs

@@ -1,14 +1,15 @@
 /**
  * 숫자 컬럼은 예외 없이 `toLocaleString()` 으로 세 자리 콤마를 넣도록 강제한다.
  *
- * 전화번호·사업자번호처럼 하이픈이 들어가는 값은 숫자가 아니라 서식이 정해진
- * 문자열이므로 대상에서 뺀다. 그 밖에 예외가 필요하면 `allow` 로 컬럼을 지정한다.
+ * 전화번호·송장번호처럼 식별자로 쓰이는 값은 크기를 비교하는 숫자가 아니라
+ * 서식이 정해진 문자열이므로 대상에서 뺀다 (§5 체크리스트 "번호·코드는 제외").
+ * 그 밖에 예외가 필요하면 `allow` 로 컬럼을 지정한다.
  *
  * AGENTS.md §1-4 / §3-4.
  */
 import {
   NUMERIC_LABEL,
-  IDENTIFIER_ONLY,
+  isNonQuantityLabel,
   prop,
   asColumn,
 } from "../lib/table-column.mjs";
@@ -48,11 +49,12 @@ export default {
         const { labelProp, label, columnName } = column;
         if (columnName && allow.has(columnName)) return;
 
-        // 숫자 컬럼이면 모두 대상 — 하이픈 서식 문자열(전화번호 등)만 뺀다
-        if (!NUMERIC_LABEL.test(label) || IDENTIFIER_ONLY.test(label)) return;
+        // 수량 컬럼이면 모두 대상 — 식별자(전화번호·송장번호)와 상태 컬럼은 뺀다
+        if (!NUMERIC_LABEL.test(label) || isNonQuantityLabel(label)) return;
 
-        // render 로 셀을 직접 그리는 경우는 이 규칙이 판단하지 않는다
-        if (prop(node, "render")) return;
+        // render / renderCell 로 셀을 직접 그리는 경우는 이 규칙이 판단하지 않는다
+        // (renderCell 은 3.x STable 의 `<td>` 커스텀 렌더 — 2.2.0 에서 추가됐다)
+        if (prop(node, "render") || prop(node, "renderCell")) return;
 
         const unit = /금액|가격|단가|판매가|원가|비용|수수료|배송비|할인|합계|총액|잔액/.test(label)
           ? "원"

package/eslint/rules/table-numeric-align.mjs

@@ -3,6 +3,7 @@
  *
  * 자릿수가 세로로 맞아야 값의 크기를 비교할 수 있으므로,
  * 금액·수량·개수처럼 숫자가 들어가는 컬럼은 예외 없이 오른쪽 정렬한다.
+ * 크기를 비교하지 않는 식별자(주문번호·상품코드)는 대상이 아니다.
  *
  * 대상은 `name` · `label` · `field` 를 모두 가진 객체 리터럴(= STableColumn 형태)뿐이라
  * 일반 객체를 오탐하지 않는다.
@@ -12,8 +13,9 @@
 
 import {
   NUMERIC_LABEL,
-  IDENTIFIER_ONLY,
   NUMERIC_FORMAT,
+  CELL_RIGHT_CLASS,
+  isNonQuantityLabel,
   prop,
   literalString,
   asColumn,
@@ -53,13 +55,18 @@ export default {
         const { labelProp, label, columnName } = column;
         if (columnName && allow.has(columnName)) return;
 
+        // 식별자(송장번호)·상태 컬럼(비용 입력 여부)은 크기를 비교하지 않는다.
+        // label·format 두 분기보다 먼저 빼야 format 의 `Number(` 로 되살아나지 않는다.
+        if (isNonQuantityLabel(label)) return;
+
+        // render/renderCell 로 셀을 직접 그리면 라벨만으로 숫자 여부를 알 수 없다
+        // (`정산서 번호` → 링크, `순번` → 핀 아이콘). 실제 숫자 서식이 있을 때만 숫자로 본다.
+        const renderProp = prop(node, "renderCell") ?? prop(node, "render");
+        if (renderProp && !NUMERIC_FORMAT.test(context.sourceCode.getText(renderProp))) return;
+
         // 숫자 판정 — label 키워드 또는 format 의 숫자 서식
         let reason = "";
-        let numeric = false;
-
-        if (NUMERIC_LABEL.test(label) && !IDENTIFIER_ONLY.test(label)) {
-          numeric = true;
-        }
+        let numeric = NUMERIC_LABEL.test(label);
 
         const formatProp = prop(node, "format");
         if (formatProp) {
@@ -75,6 +82,10 @@ export default {
         const alignProp = prop(node, "align");
         if (literalString(alignProp) === "right") return;
 
+        // align 은 헤더·셀 공통이라 "헤더 가운데 + 셀 우측" 은 tdClass 로만 표현된다
+        const tdClassProp = prop(node, "tdClass");
+        if (tdClassProp && CELL_RIGHT_CLASS.test(context.sourceCode.getText(tdClassProp))) return;
+
         context.report({
           node: alignProp ?? labelProp,
           messageId: "needsRight",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [