sellmate-design-system-react 9.0.0-beta.80 → 9.0.0-beta.83

package/dist/llms-full.txt

@@ -50,7 +50,7 @@
 | **버튼·링크** | `SButton` `SGhostButton` `SMeatballButton`(⋯ 로 '더 보기' 메뉴를 여는 아이콘 버튼) `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SChatInput`(대화 입력창) `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
-| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
+| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` `STimeline`(날짜로 묶인 시간순 기록 — 작업 로그·메모 이력) |
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SLauncherListBox`(런처 버튼을 눌러 뜨는 서비스 목록) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
@@ -175,7 +175,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 층 | 무엇인가 | 컴포넌트 |
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SGnbSystem`(GNB 맨 아래 판 · 전폭 상단바 오른쪽 끝) `SPage` `SPageHeader`(`SLayout` 안에서 `SPage` 앞에 둔다) |
-| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `SContextAlert` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
+| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `STimeline` `SCallout` `SContextAlert` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
 | **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SMeatballButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SChatAttachedFile` `SChatFile` `SImage` `SLinearProgress` `SCircleProgress` `SSkeleton` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `SLogo` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SAccountListBox`(계정 행에 붙어 뜬다 — 직접 띄우지 않는다) `SLauncherListBox`(런처 버튼에 붙어 뜬다 — 직접 띄우지 않는다) `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
@@ -571,6 +571,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 여러 건을 여러 열로 보여주고 열끼리 비교하게 한다 | `STable` | §3-7-6 |
 | 항목 하나의 속성들을 `라벨: 값` 으로 보여준다 | `SKeyValueTable` | §4-4 |
 | 한 줄로 읽히는 항목을 세로로 나열한다 | `SList` + `SListItem` | §3-7-6 |
+| 시각이 붙은 기록을 날짜별로 묶어 시간순으로 보여준다 (작업 로그·메모 이력) | `STimeline` | §3-7-6 |
 | 대화의 메시지 한 건을 보여준다 | `SChatMessage` | |
 | 대화 중간에 시스템이 알리는 사실을 끼운다 (상담사 배정·대화 종료 등) | `SChatSystemMessage` | 사람이 보낸 말이면 `SChatMessage` |
 | 나열한 항목을 펼쳐 하위 내용을 보여준다 | `SExpansionList` + `SExpansionItem` | §3-7-7 |
@@ -1906,15 +1907,17 @@ const [from, setFrom] = useState<string | null>(null);
 
 직접 쓰는 경우는 하나뿐이다 — **디자인 시스템에 없는 컨트롤**에 다른 필드와 똑같은 라벨·필수·에러 모양을 붙일 때.
 
-#### 3-7-6. 여러 건을 나열하는 셋 — STable vs SList vs SDraggableList
+#### 3-7-6. 여러 건을 나열하는 넷 — STable vs SList vs SDraggableList vs STimeline
 
 | 판별 | 사용 |
 | --- | --- |
 | 열이 둘 이상이고 **열끼리 값을 비교**한다 (정렬·합계·자릿수 맞춤) | `STable` |
 | 한 항목이 **한 줄로 읽힌다** (제목 + 보조 텍스트) | `SList` + `SListItem` |
 | **순서 자체가 데이터**라 사용자가 끌어서 바꾼다 | `SDraggableList` + `SDraggableItem` |
+| 항목마다 **시각**이 있고 날짜 머리글로 묶여 위에서 아래로 흐른다 (작업 로그·메모 이력) | `STimeline` |
 
 - **항목 하나의 속성을 나열하는 것은 목록이 아니다.** `라벨: 값` 이 세로로 쌓이는 것은 `SKeyValueTable` 이다 (§4-4).
+- **`STimeline` 의 레일(점·선)과 머리글·시각 열은 컴포넌트가 그린다.** `groups` 에 데이터만 넘기고, 점·선을 `border-l` 이나 절대 위치 `span` 으로 직접 그리지 않는다 — 선이 묶음 경계와 마지막 줄에서 끊기는 규칙을 컴포넌트가 계산한다. 작성자·편집 버튼 같은 업무 내용은 각 항목의 `content` 에 넣는다. 빈 상태 안내도 `emptyText` 로 넘기고, 불러오는 중에는 `emptyText={null}` 로 빈 안내를 숨긴다.
 - `SList` 는 레이아웃만 담당한다. depth 별 단일 펼침이 필요하면 `SExpansionList` 다 (§3-7-7).
 - **`SList` 의 자식은 `SListItem` 을 권장한다.** 다른 자식도 그대로 렌더되지만, 펼치는 항목은 `SExpansionList` + `SExpansionItem` 이, 끌어서 순서를 바꾸는 항목은 `SDraggableList` + `SDraggableItem` 이 여닫힘·정렬 동작까지 함께 관리하므로 그쪽을 쓴다 (§3-7-7).
 - **항목 사이 구분선은 리스트가 알아서 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않는다. `SList`·`SExpansionList`·`SDraggableList` 가 자식 **사이에** 구분선을 넣으므로 아이템에 `border-b` 를 직접 붙이지 않고, 켜는 prop 도 따로 없다. 마지막 항목 아래에는 선이 남지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 리스트가 구분선을 빼고, `gap` 으로 띄운다 — `gap` 을 준 목록에도 구분선은 들어가지 않는다.
@@ -1927,6 +1930,8 @@ const [from, setFrom] = useState<string | null>(null);
 ❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>  {/* 구분선을 직접 붙이지 않는다 */}
 ❌ <SList><><SListItem title="일반 문의" /><SListItem title="결제 문의" /></></SList>  {/* Fragment 로 묶으면 그 안쪽은 구분되지 않는다 */}
 ❌ <SListItem title="일반 문의" selected />                        {/* clickable 없으면 선택 표시가 안 나온다 */}
+✅ <STimeline groups={[{ heading: '2026-10-07', entries: [{ key: id, time: '14:32', content: <Memo … /> }] }]} />
+❌ <div className="grid grid-cols-[52px_8px_1fr]"><span className="rounded-full …" />…</div>  {/* 타임라인 레일을 직접 그리지 않는다 */}
 ```
 
 ##### 행 안에 컨트롤을 둘 때
@@ -2177,6 +2182,7 @@ const [selectedId, setSelectedId] = useState<string>();
 - **실제 레이아웃을 그대로 따라 그린다.** 폼 컨트롤 자리는 `type="input"`·`"button"`·`"checkbox"` 처럼 DS 모양을 쓴다. 해당 컴포넌트 기본 size 의 크기·모서리를 토큰으로 넣으므로 **높이·radius 를 직접 주지 않는다** — 직접 주면 데이터가 왔을 때 레이아웃이 튄다. checkbox·radio·switch 는 크기를 바꾸지 않는다.
 - **텍스트 줄은 `type="text"` 를 실제 텍스트와 같은 typo 클래스 안에 둔다.** 줄 높이를 부모 line-height 에서 받으므로 typo 밖에 두면 높이가 어긋난다. `text` 에 `height` 를 주지 않는다 — 높이가 필요하면 `rect` 다.
 - **원은 `size` 하나로 준다.** `width`·`height` 를 따로 주면 타원이 된다.
+- **색은 바탕 밝기로 `mode` 만 고른다.** 흰 면·회색 면 위는 기본(`light`), 어두운 면 위는 `mode="dark"`. 색·투명도·모서리는 `--cmp-skeleton-*` 토큰으로 이미 들어가므로 `background`·`opacity`·`rounded-*` 를 직접 주지 않는다.
 - **넓은 영역에는 `pulse` 를 쓰지 않는다.** 블록 전체가 줄었다 커져 레이아웃이 흔들려 보인다. 기본 `wave` 를 쓰고, 한 화면에 아주 많으면 `none`.
 - **로딩 중이라는 사실은 감싸는 영역에 `aria-busy` 로 알린다.** `SSkeleton` 자체는 장식이라 보조기기에 숨겨져 있다.
 
@@ -2189,6 +2195,7 @@ const [selectedId, setSelectedId] = useState<string>();
 
 ❌ <SSkeleton type="input" height={40} />   {/* 실제 SInput 과 높이가 달라 데이터가 오면 튄다 */}
 ❌ <SSkeleton type="text" height={24} />    {/* text 는 세로 절반만 칠한다 — rect 를 쓴다 */}
+❌ <SSkeleton className="bg-grey-20" />     {/* 색은 토큰이 넣는다 — 어두운 면이면 mode="dark" */}
 ```
 
 ---
@@ -5385,7 +5392,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 - oceanblue: 15 25 50 60 65 70 75 80 85 90 95 99
 - brilliantblue: 10 20 25 40 50 60 70 75 80 85 90 95 99 05
 - purple: 15 25 45 55 65 70 75 80 85 90 95 99 strong moderate subtle
-- bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success neutralLight neutralBright tableHeader
+- bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success successLight neutralLight neutralBright tableHeader
 - fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success successLight dangerLight accent accentLight danger warning warningLight inverse
 - border: default strong bold accent accentLight danger warning success
 - disabled: bg text icon border
@@ -5487,6 +5494,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-bg-screen
 --sys-color-bg-subtle
 --sys-color-bg-success
+--sys-color-bg-successLight
 --sys-color-bg-tableHeader
 --sys-color-bg-warning
 --sys-color-blue-moderate
@@ -11314,10 +11322,10 @@ export type SSelectValueDisplay = 'text' | 'chip';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SSkeletonType` | `'rect'` | 자리표시 모양 - `rect`: 사각형. 폭은 부모를, 높이는 한 줄 높이를 따른다 — 이미지·카드 영역은 `height` 를 준다 - `circle`: 원형(아바타 등) - `text`: 텍스트 한 줄. 부모 타이포의 line-height 를 따르고 세로로 절반만 칠한다 - `button`·`input`·`tag`·`checkbox`·`radio`·`switch`: 해당 컴포넌트 기본 size 의 크기·모서리 |
+| `mode?` | `SSkeletonMode` | `'light'` | 놓이는 바탕의 밝기 - `light`: 흰 면·회색 면 위. 바탕보다 짙은 반투명 회색 - `dark`: 어두운 면 위. 바탕보다 밝은 반투명 회색 |
 | `animation?` | `SSkeletonAnimation` | `'wave'` | 로딩 애니메이션 - `wave`: 하이라이트 띠가 왼쪽에서 오른쪽으로 지나간다 - `pulse`: 크기가 숨쉬듯 줄었다 커진다. 블록 전체가 움직이므로 아바타처럼 작은 모양에만 쓴다 - `fade`: 투명도가 숨쉬듯 바뀐다 - `none`: 애니메이션 없음 OS 의 동작 줄이기 설정이 켜져 있으면 어떤 값이든 멈춘다. |
 | `animationSpeed?` | `number` | `1500` | 애니메이션 한 주기 (ms) |
 | `square?` | `boolean` | `false` | 모서리를 각지게 |
-| `bordered?` | `boolean` | `false` | 테두리 |
 | `size?` | `string \| number` | — | 가로·세로를 한 번에 지정. `width`·`height` 가 있으면 그쪽이 우선한다. 숫자는 px |
 | `width?` | `string \| number` | — | 폭. 숫자는 px |
 | `height?` | `string \| number` | — | 높이. 숫자는 px |
@@ -11330,6 +11338,12 @@ export type SSelectValueDisplay = 'text' | 'chip';
 export type SSkeletonType = (typeof SKELETON_TYPES)[number];
 ```
 
+### SSkeletonMode
+
+```ts
+export type SSkeletonMode = (typeof SKELETON_MODES)[number];
+```
+
 ### SSkeletonAnimation
 
 ```ts
@@ -11352,6 +11366,12 @@ export const SKELETON_TYPES = [
 ] as const;
 ```
 
+### SKELETON_MODES
+
+```ts
+export const SKELETON_MODES = ['light', 'dark'] as const;
+```
+
 ### SKELETON_ANIMATIONS
 
 ```ts
@@ -12378,6 +12398,49 @@ export type STimeRangePickerRangeOrder = 'strict' | 'allow-cross-day';
 
 ---
 
+# STimeline
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STimeline
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `groups` | `STimelineGroup[]` | — | 머리글로 묶은 항목 목록. 순서 그대로 그린다 |
+| `emptyText?` | `ReactNode` | `'내역이 없습니다.'` | 항목이 하나도 없을 때 가운데 띄우는 안내. 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다. |
+
+## Types
+
+### STimelineGroup
+
+```ts
+export interface STimelineGroup {
+  /** React key. 생략하면 순서로 대신한다 */
+  key?: Key;
+  /** 묶음 머리글 (예: 날짜) */
+  heading: ReactNode;
+  /** 머리글 아래 항목. 비어 있으면 머리글째 그리지 않는다 */
+  entries: STimelineEntry[];
+}
+```
+
+### STimelineEntry
+
+```ts
+export interface STimelineEntry {
+  /** React key — 묶음 안에서 유일해야 한다 */
+  key: Key;
+  /** 레일 왼쪽 열에 오른쪽 정렬로 서는 시각 (예: `14:32`) */
+  time?: ReactNode;
+  /** 레일 오른쪽 본문. 타이포·색은 감싸는 쪽을 따른다 — 업무 내용은 소비 앱이 그린다 */
+  content: ReactNode;
+}
+```
+
+---
+
 # SToast
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

package/dist/llms.txt

@@ -51,7 +51,7 @@
 | **버튼·링크** | `SButton` `SGhostButton` `SMeatballButton`(⋯ 로 '더 보기' 메뉴를 여는 아이콘 버튼) `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SChatInput`(대화 입력창) `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
-| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
+| **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` `STimeline`(날짜로 묶인 시간순 기록 — 작업 로그·메모 이력) |
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SLauncherListBox`(런처 버튼을 눌러 뜨는 서비스 목록) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
@@ -176,7 +176,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 층 | 무엇인가 | 컴포넌트 |
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SGnbSystem`(GNB 맨 아래 판 · 전폭 상단바 오른쪽 끝) `SPage` `SPageHeader`(`SLayout` 안에서 `SPage` 앞에 둔다) |
-| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `SContextAlert` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
+| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `STimeline` `SCallout` `SContextAlert` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
 | **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SMeatballButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SChatAttachedFile` `SChatFile` `SImage` `SLinearProgress` `SCircleProgress` `SSkeleton` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `SLogo` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SAccountListBox`(계정 행에 붙어 뜬다 — 직접 띄우지 않는다) `SLauncherListBox`(런처 버튼에 붙어 뜬다 — 직접 띄우지 않는다) `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
@@ -572,6 +572,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 여러 건을 여러 열로 보여주고 열끼리 비교하게 한다 | `STable` | §3-7-6 |
 | 항목 하나의 속성들을 `라벨: 값` 으로 보여준다 | `SKeyValueTable` | §4-4 |
 | 한 줄로 읽히는 항목을 세로로 나열한다 | `SList` + `SListItem` | §3-7-6 |
+| 시각이 붙은 기록을 날짜별로 묶어 시간순으로 보여준다 (작업 로그·메모 이력) | `STimeline` | §3-7-6 |
 | 대화의 메시지 한 건을 보여준다 | `SChatMessage` | |
 | 대화 중간에 시스템이 알리는 사실을 끼운다 (상담사 배정·대화 종료 등) | `SChatSystemMessage` | 사람이 보낸 말이면 `SChatMessage` |
 | 나열한 항목을 펼쳐 하위 내용을 보여준다 | `SExpansionList` + `SExpansionItem` | §3-7-7 |
@@ -1907,15 +1908,17 @@ const [from, setFrom] = useState<string | null>(null);
 
 직접 쓰는 경우는 하나뿐이다 — **디자인 시스템에 없는 컨트롤**에 다른 필드와 똑같은 라벨·필수·에러 모양을 붙일 때.
 
-#### 3-7-6. 여러 건을 나열하는 셋 — STable vs SList vs SDraggableList
+#### 3-7-6. 여러 건을 나열하는 넷 — STable vs SList vs SDraggableList vs STimeline
 
 | 판별 | 사용 |
 | --- | --- |
 | 열이 둘 이상이고 **열끼리 값을 비교**한다 (정렬·합계·자릿수 맞춤) | `STable` |
 | 한 항목이 **한 줄로 읽힌다** (제목 + 보조 텍스트) | `SList` + `SListItem` |
 | **순서 자체가 데이터**라 사용자가 끌어서 바꾼다 | `SDraggableList` + `SDraggableItem` |
+| 항목마다 **시각**이 있고 날짜 머리글로 묶여 위에서 아래로 흐른다 (작업 로그·메모 이력) | `STimeline` |
 
 - **항목 하나의 속성을 나열하는 것은 목록이 아니다.** `라벨: 값` 이 세로로 쌓이는 것은 `SKeyValueTable` 이다 (§4-4).
+- **`STimeline` 의 레일(점·선)과 머리글·시각 열은 컴포넌트가 그린다.** `groups` 에 데이터만 넘기고, 점·선을 `border-l` 이나 절대 위치 `span` 으로 직접 그리지 않는다 — 선이 묶음 경계와 마지막 줄에서 끊기는 규칙을 컴포넌트가 계산한다. 작성자·편집 버튼 같은 업무 내용은 각 항목의 `content` 에 넣는다. 빈 상태 안내도 `emptyText` 로 넘기고, 불러오는 중에는 `emptyText={null}` 로 빈 안내를 숨긴다.
 - `SList` 는 레이아웃만 담당한다. depth 별 단일 펼침이 필요하면 `SExpansionList` 다 (§3-7-7).
 - **`SList` 의 자식은 `SListItem` 을 권장한다.** 다른 자식도 그대로 렌더되지만, 펼치는 항목은 `SExpansionList` + `SExpansionItem` 이, 끌어서 순서를 바꾸는 항목은 `SDraggableList` + `SDraggableItem` 이 여닫힘·정렬 동작까지 함께 관리하므로 그쪽을 쓴다 (§3-7-7).
 - **항목 사이 구분선은 리스트가 알아서 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않는다. `SList`·`SExpansionList`·`SDraggableList` 가 자식 **사이에** 구분선을 넣으므로 아이템에 `border-b` 를 직접 붙이지 않고, 켜는 prop 도 따로 없다. 마지막 항목 아래에는 선이 남지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 리스트가 구분선을 빼고, `gap` 으로 띄운다 — `gap` 을 준 목록에도 구분선은 들어가지 않는다.
@@ -1928,6 +1931,8 @@ const [from, setFrom] = useState<string | null>(null);
 ❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>  {/* 구분선을 직접 붙이지 않는다 */}
 ❌ <SList><><SListItem title="일반 문의" /><SListItem title="결제 문의" /></></SList>  {/* Fragment 로 묶으면 그 안쪽은 구분되지 않는다 */}
 ❌ <SListItem title="일반 문의" selected />                        {/* clickable 없으면 선택 표시가 안 나온다 */}
+✅ <STimeline groups={[{ heading: '2026-10-07', entries: [{ key: id, time: '14:32', content: <Memo … /> }] }]} />
+❌ <div className="grid grid-cols-[52px_8px_1fr]"><span className="rounded-full …" />…</div>  {/* 타임라인 레일을 직접 그리지 않는다 */}
 ```
 
 ##### 행 안에 컨트롤을 둘 때
@@ -2178,6 +2183,7 @@ const [selectedId, setSelectedId] = useState<string>();
 - **실제 레이아웃을 그대로 따라 그린다.** 폼 컨트롤 자리는 `type="input"`·`"button"`·`"checkbox"` 처럼 DS 모양을 쓴다. 해당 컴포넌트 기본 size 의 크기·모서리를 토큰으로 넣으므로 **높이·radius 를 직접 주지 않는다** — 직접 주면 데이터가 왔을 때 레이아웃이 튄다. checkbox·radio·switch 는 크기를 바꾸지 않는다.
 - **텍스트 줄은 `type="text"` 를 실제 텍스트와 같은 typo 클래스 안에 둔다.** 줄 높이를 부모 line-height 에서 받으므로 typo 밖에 두면 높이가 어긋난다. `text` 에 `height` 를 주지 않는다 — 높이가 필요하면 `rect` 다.
 - **원은 `size` 하나로 준다.** `width`·`height` 를 따로 주면 타원이 된다.
+- **색은 바탕 밝기로 `mode` 만 고른다.** 흰 면·회색 면 위는 기본(`light`), 어두운 면 위는 `mode="dark"`. 색·투명도·모서리는 `--cmp-skeleton-*` 토큰으로 이미 들어가므로 `background`·`opacity`·`rounded-*` 를 직접 주지 않는다.
 - **넓은 영역에는 `pulse` 를 쓰지 않는다.** 블록 전체가 줄었다 커져 레이아웃이 흔들려 보인다. 기본 `wave` 를 쓰고, 한 화면에 아주 많으면 `none`.
 - **로딩 중이라는 사실은 감싸는 영역에 `aria-busy` 로 알린다.** `SSkeleton` 자체는 장식이라 보조기기에 숨겨져 있다.
 
@@ -2190,6 +2196,7 @@ const [selectedId, setSelectedId] = useState<string>();
 
 ❌ <SSkeleton type="input" height={40} />   {/* 실제 SInput 과 높이가 달라 데이터가 오면 튄다 */}
 ❌ <SSkeleton type="text" height={24} />    {/* text 는 세로 절반만 칠한다 — rect 를 쓴다 */}
+❌ <SSkeleton className="bg-grey-20" />     {/* 색은 토큰이 넣는다 — 어두운 면이면 mode="dark" */}
 ```
 
 ---
@@ -5386,7 +5393,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 - oceanblue: 15 25 50 60 65 70 75 80 85 90 95 99
 - brilliantblue: 10 20 25 40 50 60 70 75 80 85 90 95 99 05
 - purple: 15 25 45 55 65 70 75 80 85 90 95 99 strong moderate subtle
-- bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success neutralLight neutralBright tableHeader
+- bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success successLight neutralLight neutralBright tableHeader
 - fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success successLight dangerLight accent accentLight danger warning warningLight inverse
 - border: default strong bold accent accentLight danger warning success
 - disabled: bg text icon border
@@ -5488,6 +5495,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-bg-screen
 --sys-color-bg-subtle
 --sys-color-bg-success
+--sys-color-bg-successLight
 --sys-color-bg-tableHeader
 --sys-color-bg-warning
 --sys-color-blue-moderate
@@ -5563,7 +5571,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-purple-strong
 --sys-color-purple-subtle
 
-## 3. 컴포넌트 인덱스 (87종)
+## 3. 컴포넌트 인덱스 (88종)
 
 **Props 는 이 문서에 없다.** 쓸 컴포넌트를 정했으면 그 컴포넌트의 README 를 읽는다.
 
@@ -5572,4 +5580,4 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 예) SButton 을 쓴다면 `dist/components/SButton/README.md`.
 prop 을 추측해서 쓰지 말고 반드시 README 로 확인한다 (분류별 용도는 §1 의 "전체 컴포넌트 인덱스" 참조).
 
-SAccountListBox · SActionModal · SBadge · SBarChart · SBarcodeInput · SButton · SCalendar · SCalendarBoard · SCallout · SCard · SChatAttachedFile · SChatFile · SChatInput · SChatMessage · SChatSystemMessage · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SContextAlert · SDatePicker · SDateRangePicker · SDivider · SDonutChart · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SEditor · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGnbSystem · SGuide · SIcon · SImage · SInput · SKeyValueTable · SLauncherListBox · SLayout · SLineChart · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SLoginCard · SLogo · SMeatballButton · SModal · SNumberInput · SPage · SPagination · SPieChart · SPopover · SPopup · SPortal · SRadio · SRadioButton · SRadioCard · SScrollArea · SSearchInput · SSectionHeaderCard · SSelect · SSkeleton · SSplitter · SStepper · SSwitch · SSystemActionButton · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree
+SAccountListBox · SActionModal · SBadge · SBarChart · SBarcodeInput · SButton · SCalendar · SCalendarBoard · SCallout · SCard · SChatAttachedFile · SChatFile · SChatInput · SChatMessage · SChatSystemMessage · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SContextAlert · SDatePicker · SDateRangePicker · SDivider · SDonutChart · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SEditor · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGnbSystem · SGuide · SIcon · SImage · SInput · SKeyValueTable · SLauncherListBox · SLayout · SLineChart · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SLoginCard · SLogo · SMeatballButton · SModal · SNumberInput · SPage · SPagination · SPieChart · SPopover · SPopup · SPortal · SRadio · SRadioButton · SRadioCard · SScrollArea · SSearchInput · SSectionHeaderCard · SSelect · SSkeleton · SSplitter · SStepper · SSwitch · SSystemActionButton · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · STimeline · SToast · SToggle · STooltip · STree

package/dist/styles.css

@@ -194,6 +194,7 @@
     --color-bg-caution: #FFC700;
     --color-bg-progress: #0075FF;
     --color-bg-success: #00973C;
+    --color-bg-successLight: #12B553;
     --color-bg-neutralLight: #F6F6F6;
     --color-bg-neutralBright: #F9F9F9;
     --color-bg-tableHeader: #F5FAFF;
@@ -391,8 +392,9 @@
     --border-width-item-selected: 2px;
     --opacity-005: 5%;
     --opacity-008: 8%;
-    --opacity-040: 40%;
+    --opacity-016: 16%;
     --opacity-030: 30%;
+    --opacity-040: 40%;
     --opacity-050: 50%;
     --opacity-060: 60%;
     --opacity-080: 80%;
@@ -642,6 +644,9 @@
   .top-\[-1px\] {
     top: -1px;
   }
+  .top-\[6px\] {
+    top: 6px;
+  }
   .top-\[10px\] {
     top: 10px;
   }
@@ -651,6 +656,9 @@
   .top-\[13px\] {
     top: 13px;
   }
+  .top-\[14px\] {
+    top: 14px;
+  }
   .top-\[15px\] {
     top: 15px;
   }
@@ -705,6 +713,9 @@
   .bottom-\[-1px\] {
     bottom: -1px;
   }
+  .bottom-\[-8px\] {
+    bottom: -8px;
+  }
   .bottom-\[2px\] {
     bottom: 2px;
   }
@@ -1003,6 +1014,10 @@
     width: 24px;
     height: 24px;
   }
+  .size-\[var\(--cmp-timeline-rail-dot-size\)\] {
+    width: var(--cmp-timeline-rail-dot-size);
+    height: var(--cmp-timeline-rail-dot-size);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -1091,6 +1106,9 @@
   .h-\[56px\] {
     height: 56px;
   }
+  .h-\[60px\] {
+    height: 60px;
+  }
   .h-\[72px\] {
     height: 72px;
   }
@@ -1478,6 +1496,9 @@
   .w-\[var\(--cmp-pagination-height\)\] {
     width: var(--cmp-pagination-height);
   }
+  .w-\[var\(--cmp-timeline-rail-line-width\)\] {
+    width: var(--cmp-timeline-rail-line-width);
+  }
   .w-\[var\(--sys-size-control-md-height\)\] {
     width: var(--sys-size-control-md-height);
   }
@@ -1799,6 +1820,12 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-\[52px_8px_1fr\] {
+    grid-template-columns: 52px 8px 1fr;
+  }
+  .grid-cols-\[52px_var\(--cmp-timeline-rail-dot-size\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: 52px var(--cmp-timeline-rail-dot-size) minmax(0,1fr);
+  }
   .grid-cols-\[200px_1fr\] {
     grid-template-columns: 200px 1fr;
   }
@@ -2263,12 +2290,21 @@
   .gap-x-\(--cmp-chart-legend-group-gap\) {
     column-gap: var(--cmp-chart-legend-group-gap);
   }
+  .gap-x-\[6px\] {
+    column-gap: 6px;
+  }
+  .gap-x-\[8px\] {
+    column-gap: 8px;
+  }
   .gap-x-\[var\(--cmp-datepicker-calendar-legend-group-gap\)\] {
     column-gap: var(--cmp-datepicker-calendar-legend-group-gap);
   }
   .gap-x-sd-12 {
     column-gap: var(--spacing-sd-12);
   }
+  .gap-y-\[2px\] {
+    row-gap: 2px;
+  }
   .gap-y-\[4px\] {
     row-gap: 4px;
   }
@@ -2460,6 +2496,9 @@
   .rounded-\[var\(--cmp-table-radius\)\] {
     border-radius: var(--cmp-table-radius);
   }
+  .rounded-\[var\(--cmp-timeline-rail-dot-radius\)\] {
+    border-radius: var(--cmp-timeline-rail-dot-radius);
+  }
   .rounded-full {
     border-radius: var(--radius-full);
   }
@@ -3123,6 +3162,12 @@
   .bg-\[var\(--cmp-table-header-resizingBar-color\)\] {
     background-color: var(--cmp-table-header-resizingBar-color);
   }
+  .bg-\[var\(--cmp-timeline-rail-dot-bg\)\] {
+    background-color: var(--cmp-timeline-rail-dot-bg);
+  }
+  .bg-\[var\(--cmp-timeline-rail-line-color\)\] {
+    background-color: var(--cmp-timeline-rail-line-color);
+  }
   .bg-\[var\(--co-bg\)\] {
     background-color: var(--co-bg);
   }
@@ -3189,6 +3234,9 @@
   .bg-disabled-bg {
     background-color: var(--color-disabled-bg);
   }
+  .bg-fg-primary {
+    background-color: var(--color-fg-primary);
+  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -3663,6 +3711,9 @@
   .py-\[var\(--cmp-popover-paddingY\)\] {
     padding-block: var(--cmp-popover-paddingY);
   }
+  .py-\[var\(--cmp-timeline-heading-paddingY\)\] {
+    padding-block: var(--cmp-timeline-heading-paddingY);
+  }
   .py-sd-2 {
     padding-block: var(--spacing-sd-2);
   }
@@ -3732,6 +3783,9 @@
   .pr-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-right: var(--cmp-overlay-header-paddingX);
   }
+  .pr-\[var\(--cmp-timeline-entry-horizontalGap\)\] {
+    padding-right: var(--cmp-timeline-entry-horizontalGap);
+  }
   .pr-sd-4 {
     padding-right: var(--spacing-sd-4);
   }
@@ -3765,6 +3819,9 @@
   .pb-\[var\(--cmp-pageBody-padding-scrollEnd\)\] {
     padding-bottom: var(--cmp-pageBody-padding-scrollEnd);
   }
+  .pb-\[var\(--cmp-timeline-entry-gap\)\] {
+    padding-bottom: var(--cmp-timeline-entry-gap);
+  }
   .pb-sd-16 {
     padding-bottom: var(--spacing-sd-16);
   }
@@ -3801,6 +3858,9 @@
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
   }
+  .pl-\[var\(--cmp-timeline-entry-horizontalGap\)\] {
+    padding-left: var(--cmp-timeline-entry-horizontalGap);
+  }
   .pl-sd-4 {
     padding-left: var(--spacing-sd-4);
   }
@@ -4351,6 +4411,15 @@
   .text-\[color\:var\(--cmp-progress-color-label\)\] {
     color: var(--cmp-progress-color-label);
   }
+  .text-\[color\:var\(--cmp-timeline-empty-color\)\] {
+    color: var(--cmp-timeline-empty-color);
+  }
+  .text-\[color\:var\(--cmp-timeline-heading-color\)\] {
+    color: var(--cmp-timeline-heading-color);
+  }
+  .text-\[color\:var\(--cmp-timeline-time-color\)\] {
+    color: var(--cmp-timeline-time-color);
+  }
   .text-\[color\:var\(--co-content\)\] {
     color: var(--co-content);
   }
@@ -4396,6 +4465,9 @@
   .text-blue-strong {
     color: var(--color-blue-strong);
   }
+  .text-brilliantblue-85 {
+    color: var(--color-brilliantblue-85);
+  }
   .text-fg-accent {
     color: var(--color-fg-accent);
   }
@@ -4456,6 +4528,9 @@
   .text-grey-80 {
     color: var(--color-grey-80);
   }
+  .text-grey-95 {
+    color: var(--color-grey-95);
+  }
   .text-inherit {
     color: inherit;
   }
@@ -4465,6 +4540,9 @@
   .text-oceanblue-75 {
     color: var(--color-oceanblue-75);
   }
+  .text-red-70 {
+    color: var(--color-red-70);
+  }
   .text-red-75 {
     color: var(--color-red-75);
   }
@@ -7422,6 +7500,7 @@
   --sys-color-bg-caution: #FFC700;
   --sys-color-bg-progress: #0075FF;
   --sys-color-bg-success: #00973C;
+  --sys-color-bg-successLight: #12B553;
   --sys-color-bg-neutralLight: #F6F6F6;
   --sys-color-bg-neutralBright: #F9F9F9;
   --sys-color-bg-tableHeader: #F5FAFF;
@@ -8306,6 +8385,17 @@
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
+  --cmp-timeline-heading-color: #222222;
+  --cmp-timeline-heading-paddingY: 8px;
+  --cmp-timeline-time-color: #555555;
+  --cmp-timeline-rail-dot-size: 8px;
+  --cmp-timeline-rail-dot-radius: 9999px;
+  --cmp-timeline-rail-dot-bg: #CCCCCC;
+  --cmp-timeline-rail-line-width: 1px;
+  --cmp-timeline-rail-line-color: #D8D8D8;
+  --cmp-timeline-entry-horizontalGap: 16px;
+  --cmp-timeline-entry-gap: 16px;
+  --cmp-timeline-empty-color: #AAAAAA;
   --cmp-table-header-height: 36px;
   --cmp-table-header-paddingX: 16px;
   --cmp-table-header-gap: 4px;
@@ -8894,6 +8984,11 @@
   --cmp-chart-palette-multi-grey: #737373;
   --cmp-chart-palette-multi-red: #FB4444;
   --cmp-chart-palette-single: #2D8DFF;
+  --cmp-skeleton-bg-light: #EEEEEE;
+  --cmp-skeleton-bg-dark: #222222;
+  --cmp-skeleton-highlight: #FFFFFF;
+  --cmp-skeleton-opacity: 16%;
+  --cmp-skeleton-radius: 6px;
 }
 @layer base {
   html {

package/dist/theme.css

@@ -159,6 +159,7 @@
   --color-bg-caution: #FFC700;
   --color-bg-progress: #0075FF;
   --color-bg-success: #00973C;
+  --color-bg-successLight: #12B553;
   --color-bg-neutralLight: #F6F6F6;
   --color-bg-neutralBright: #F9F9F9;
   --color-bg-tableHeader: #F5FAFF;
@@ -362,8 +363,9 @@
   --border-width-item-selected: 2px;
   --opacity-005: 5%;
   --opacity-008: 8%;
-  --opacity-040: 40%;
+  --opacity-016: 16%;
   --opacity-030: 30%;
+  --opacity-040: 40%;
   --opacity-050: 50%;
   --opacity-060: 60%;
   --opacity-080: 80%;
@@ -497,6 +499,7 @@
   --sys-color-bg-caution: #FFC700;
   --sys-color-bg-progress: #0075FF;
   --sys-color-bg-success: #00973C;
+  --sys-color-bg-successLight: #12B553;
   --sys-color-bg-neutralLight: #F6F6F6;
   --sys-color-bg-neutralBright: #F9F9F9;
   --sys-color-bg-tableHeader: #F5FAFF;
@@ -1383,6 +1386,17 @@
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
+  --cmp-timeline-heading-color: #222222;
+  --cmp-timeline-heading-paddingY: 8px;
+  --cmp-timeline-time-color: #555555;
+  --cmp-timeline-rail-dot-size: 8px;
+  --cmp-timeline-rail-dot-radius: 9999px;
+  --cmp-timeline-rail-dot-bg: #CCCCCC;
+  --cmp-timeline-rail-line-width: 1px;
+  --cmp-timeline-rail-line-color: #D8D8D8;
+  --cmp-timeline-entry-horizontalGap: 16px;
+  --cmp-timeline-entry-gap: 16px;
+  --cmp-timeline-empty-color: #AAAAAA;
   --cmp-table-header-height: 36px;
   --cmp-table-header-paddingX: 16px;
   --cmp-table-header-gap: 4px;
@@ -1971,6 +1985,11 @@
   --cmp-chart-palette-multi-grey: #737373;
   --cmp-chart-palette-multi-red: #FB4444;
   --cmp-chart-palette-single: #2D8DFF;
+  --cmp-skeleton-bg-light: #EEEEEE;
+  --cmp-skeleton-bg-dark: #222222;
+  --cmp-skeleton-highlight: #FFFFFF;
+  --cmp-skeleton-opacity: 16%;
+  --cmp-skeleton-radius: 6px;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.

package/eslint/scale.gen.mjs

@@ -13,7 +13,7 @@ export const RADIUS = ["2","4","6","8","12","full","control-sm","control-md","fe
 export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-lg-semibold","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-md-semibold","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-bold","typo-body-xs-default","typo-body-xs-medium","typo-body-xs-semibold","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-regular","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-semibold","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xl","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
-export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-tableHeader","bg-warning","black","blue-moderate","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-moderate","danger-strong","danger-subtle","darkblue-moderate","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","fg-warningLight","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-moderate","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-moderate","grey-strong","grey-subtle","indigo-moderate","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","navigation-gnb-bg-system","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-moderate","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","purple-15","purple-25","purple-45","purple-55","purple-65","purple-70","purple-75","purple-80","purple-85","purple-90","purple-95","purple-99","purple-moderate","purple-strong","purple-subtle","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-moderate","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-moderate","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-moderate","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-moderate","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-moderate","danger-strong","danger-subtle","darkblue-moderate","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","fg-warningLight","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-moderate","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-moderate","grey-strong","grey-subtle","indigo-moderate","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","navigation-gnb-bg-system","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-moderate","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","purple-15","purple-25","purple-45","purple-55","purple-65","purple-70","purple-75","purple-80","purple-85","purple-90","purple-95","purple-99","purple-moderate","purple-strong","purple-subtle","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-moderate","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-moderate","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-moderate","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
 
 /** 필드 폭 등급 (px). SFieldWidth 의 'xs'|'sm'|'md'|'lg'|'xl' 이 풀리는 값이다 */
 export const FIELD_WIDTHS = {"xs":80,"sm":120,"md":160,"lg":240,"xl":480};