@xonic0506/sonic-ui 0.6.0 → 0.6.2

package/DESIGN.md

@@ -71,6 +71,7 @@ Figma Variable 이름이 그대로 CSS 변수가 돼요. `/`는 `-`로 바꾸고
 | `color/border/warning` | amber/600 | amber/400 | 주의 강조 테두리 |
 | `color/bg/danger-subtle` | red/50 `#FCEDEC` | red/950 `#2B1311` | danger Badge(subtle) |
 | `color/bg/selected` | cobalt/50 `#EEF1FF` | cobalt/950 `#18214D` | DataGrid 선택된 행 (hover `bg/subtle`과 구분) |
+| `color/bg/scrim-subtle` | gray/0 60% | gray/900 60% | DataGrid 다시 불러오는 중, 이전 행 위에 까는 연한 막 (화면 전체를 덮는 막은 `bg/overlay`) |
 
 글자와 바탕 조합은 모두 WCAG 4.5:1 이상이에요. 토큰을 바꾸면 `npm run check:contrast`로 다시 확인해요(배포 전 검사에도 들어 있어요).
 
@@ -280,6 +281,8 @@ hover, focus는 **컴포넌트 variant로 만들지 않아요.** React prop이
 
 저장처럼 사용자가 일으킨 동작이 진행 중일 때는 화면 전체가 아니라 그 버튼에 `loading`을 켜요.
 
+데이터를 이미 보여 주는 중에 조건을 바꿔 다시 불러올 때는 로딩(Skeleton)으로 되돌리지 않아요. 이전 결과를 유지하고 다시 불러오는 중 표시를 써요(DataGrid `refreshing`).
+
 ## 9. frontend-design 사용 규칙
 
 - **디자인 시스템을 만들 때**(이 저장소): frontend-design으로 방향을 탐색할 수 있어요. 결과물은 `explorations/`에만 두고 라이브러리에 넣지 않습니다.
@@ -764,6 +767,7 @@ toast.add({ title: 'API 키를 만들었어요', description: '키는 지금 한
 | `columnOrder`, `onColumnOrderChange` | 열 id 순서. `onColumnOrderChange`를 넘기면 머리글을 끌어서 옮길 수 있어요 |
 | `onRowOrderChange` | `(ids) => void`. 넘기면 핸들 열이 생겨요. 정렬 중에는 핸들을 숨겨요 |
 | `loading` | Skeleton 행 5개 + `aria-busy` |
+| `refreshing` | 이미 보이는 행을 다시 불러오는 중. 행은 그대로 두고 본문 위에 막과 스피너를 올려요. 처음 불러올 때는 `loading`을 써요 |
 | `emptyState`, `errorState` | 행이 없을 때, 불러오기 실패했을 때 본문 자리에 보여 줄 EmptyState·ErrorState |
 | `pagination` | 넘기면 표 아래에 Pagination이 붙어요. `{ page, defaultPage, onPageChange, pageSize, defaultPageSize, onPageSizeChange, pageSizeOptions, showFirstLast, rowCount }` (모두 선택, 페이지는 1부터) |
 
@@ -776,12 +780,22 @@ toast.add({ title: 'API 키를 만들었어요', description: '키는 지금 한
 | `switch` | Switch, 누르면 바로 적용 | `onChange(row, checked)` (필수) |
 | `actions` | 1개면 ghost `icon-sm` 버튼, 2개 이상이면 `ellipsis` Menu | `actions: { label, icon?, tone?, onClick(row) }[]` (필수) |
 
-공통 열 속성: `header`, `width`(px), `pinned`(`left` · `right`), `sortable`. 고정 열에는 `width`를 꼭 줘요(다음 고정 열 위치 계산에 써요). `select`·`handle` 열은 너비 40이고, 있으면 항상 왼쪽에 고정돼요.
+공통 열 속성: `header`, `width`(px), `minWidth`(px), `pinned`(`left` · `right`), `sortable`. 고정 열에는 `width`를 꼭 줘요(다음 고정 열 위치 계산에 써요). `select`·`handle` 열은 너비 40이고, 있으면 항상 왼쪽에 고정돼요.
+
+- `width`가 없는 열은 남은 너비를 써요. 좁은 화면에서 글자가 여러 줄로 감기지 않게 `minWidth`를 줘요. 그보다 좁아지면 표가 줄지 않고 가로로 스크롤돼요(예: 제목 열 `minWidth: 276`이면 4열 표가 640부터 스크롤). `width`를 주면 넓은 화면에서도 그 너비로 고정되니, 남은 너비를 써야 하는 열에는 `minWidth`만 써요.
+- 빈 상태·에러·다시 불러오는 중 스피너는 표가 가로로 스크롤돼도 보이는 너비의 가운데에 있어요.
 
 - 행 hover `bg/subtle`, 선택 `bg/selected`. 고정 열 경계는 1px `border/default`이고 그림자는 쓰지 않아요(§1 원칙 4).
 - 컬럼 이동 중인 머리글은 `bg/subtle`, 행 이동 중인 행은 `bg/surface` + 1px `border/default` + `radius/md`. 놓을 위치는 2px `border/focus` 선이에요.
 - 핸들은 `grip-vertical` 16(`text/muted`, hover `text/default`)이고 바깥 2px 포커스 링을 그려요. 키보드로도 옮겨요: 핸들에 포커스 → Space로 들기 → 화살표 → Space로 놓기(Esc 취소). 화면 낭독기 안내는 한국어 해요체예요.
 - 위험한 actions는 바로 실행하지 말고 `onClick`에서 AlertDialog를 열어요(§10 Menu).
+- 다시 불러오는 중(`refreshing`): 정렬·필터·페이지를 바꿔 새 데이터를 기다리는 동안이에요. 이전 행을 지우지 않아 화면이 흔들리지 않아요.
+  - 본문 행 위에 `bg/scrim-subtle` 막을 깔고, 가운데에 `loader-circle` 24(`text/muted`)가 `duration/loop`로 돌아요. `prefers-reduced-motion`이면 회전을 멈춰요.
+  - 머리글과 Pagination은 덮지 않아요. 어떤 조건으로 불러오는지 보이게 해요.
+  - 막은 마우스 클릭만 막아요. 키보드 포커스는 그대로 둬요(`inert`를 쓰지 않아요).
+  - 누르자마자 보이고 막은 `duration/fast`로 나타나요(움직임 줄이기면 바로). 데이터가 오면 바로 걷혀요. 응답이 빠르면 살짝 흐려졌다 돌아오는 정도예요.
+  - 표에 `aria-busy`를 달고, 화면 낭독기에 "불러오는 중이에요"를 알려요.
+  - `loading`과 `refreshing`이 둘 다 켜지면 `loading`(Skeleton)이 먼저예요.
 - 행이 많으면(100개 초과) 보이는 행만 그려요. 이때는 `className`으로 높이를 정해 주세요(예: `h-96`). 그 안에서 세로로 스크롤돼요.
 - Next.js: `columns`에 함수가 들어 있어서 서버 컴포넌트에서 넘길 수 없어요. DataGrid는 클라이언트 컴포넌트 안에서 정의해요.
 

package/dist/components/data-grid.d.ts

@@ -7,6 +7,8 @@ interface ColumnBase {
     header?: string;
     /** px. 고정 열에는 꼭 줘요 (다음 고정 열 위치 계산) */
     width?: number;
+    /** px. width 없이 남은 너비를 쓰는 열의 최소 너비. 좁은 화면에서 이보다 줄지 않고 표가 가로로 스크롤돼요 */
+    minWidth?: number;
     pinned?: 'left' | 'right';
 }
 interface FieldColumn<Row> extends ColumnBase {
@@ -75,6 +77,8 @@ export interface DataGridProps<Row> {
     /** 넘기면 핸들 열이 생겨요. 정렬 중에는 핸들을 숨겨요 */
     onRowOrderChange?: (ids: string[]) => void;
     loading?: boolean;
+    /** 이미 보이는 행을 다시 불러오는 중. 행은 두고 본문 위에 막과 스피너를 올려요(300ms 넘을 때만). 처음 불러올 때는 loading */
+    refreshing?: boolean;
     emptyState?: React.ReactNode;
     errorState?: React.ReactNode;
     /** 넘기면 표 아래에 Pagination이 붙어요. rowCount를 넘기면 서버 모드(받은 rows를 그대로, 정렬도 서버) */
@@ -84,5 +88,5 @@ export interface DataGridProps<Row> {
 }
 /** Figma Data Grid Cell의 type 목록 (select·handle은 props로 생기는 열) */
 export declare const dataGridCellTypes: readonly ['text', 'number', 'date', 'datetime', 'badge', 'switch', 'actions', 'select', 'handle'];
-export declare function DataGrid<Row extends RowData>({ rows, getRowId, columns, 'aria-label': ariaLabel, sorting, defaultSorting, onSortingChange, selection, onSelectionChange, columnOrder, onColumnOrderChange, onRowOrderChange, loading, emptyState, errorState, pagination, className, }: DataGridProps<Row>): React.JSX.Element;
+export declare function DataGrid<Row extends RowData>({ rows, getRowId, columns, 'aria-label': ariaLabel, sorting, defaultSorting, onSortingChange, selection, onSelectionChange, columnOrder, onColumnOrderChange, onRowOrderChange, loading, refreshing, emptyState, errorState, pagination, className, }: DataGridProps<Row>): React.JSX.Element;
 export {};

package/dist/components/data-grid.js

@@ -10,32 +10,32 @@ import { TableBody as d, TableCell as f, TableHead as p, TableHeader as ee, Tabl
 import { formatDate as h, formatDateTime as g, formatNumber as _ } from "../lib/format.js";
 import { Pagination as ne } from "./pagination.js";
 import * as v from "react";
-import { Ellipsis as y, GripVertical as b } from "lucide-react";
-import { Fragment as re, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { columnOrderingFeature as C, columnPinningFeature as w, columnSizingFeature as T, createPaginatedRowModel as ie, createSortedRowModel as E, rowPaginationFeature as D, rowSortingFeature as O, tableFeatures as k, useTable as ae } from "@tanstack/react-table";
-import { useVirtualizer as oe } from "@tanstack/react-virtual";
-import { DndContext as se, KeyboardSensor as ce, PointerSensor as le, closestCenter as ue, useSensor as de, useSensors as fe } from "@dnd-kit/core";
-import { SortableContext as pe, arrayMove as me, horizontalListSortingStrategy as he, sortableKeyboardCoordinates as ge, useSortable as A, verticalListSortingStrategy as _e } from "@dnd-kit/sortable";
+import { Ellipsis as y, GripVertical as b, LoaderCircle as re } from "lucide-react";
+import { Fragment as ie, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { columnOrderingFeature as C, columnPinningFeature as w, columnSizingFeature as T, createPaginatedRowModel as E, createSortedRowModel as ae, rowPaginationFeature as D, rowSortingFeature as O, tableFeatures as k, useTable as oe } from "@tanstack/react-table";
+import { useVirtualizer as se } from "@tanstack/react-virtual";
+import { DndContext as ce, KeyboardSensor as le, PointerSensor as ue, closestCenter as de, useSensor as fe, useSensors as pe } from "@dnd-kit/core";
+import { SortableContext as me, arrayMove as A, horizontalListSortingStrategy as he, sortableKeyboardCoordinates as ge, useSortable as j, verticalListSortingStrategy as _e } from "@dnd-kit/sortable";
 //#region src/components/data-grid.tsx
-var j = "__select", M = "__handle", ve = 100, ye = k({
+var M = "__select", N = "__handle", ve = 100, ye = k({
 	rowSortingFeature: O,
-	sortedRowModel: E(),
+	sortedRowModel: ae(),
 	rowPaginationFeature: D,
-	paginatedRowModel: ie(),
+	paginatedRowModel: E(),
 	columnOrderingFeature: C,
 	columnSizingFeature: T,
 	columnPinningFeature: w
 }), be = (e, t, n) => {
 	let r = e.getValue(n), i = t.getValue(n);
 	return r == null || i == null ? r == null ? i == null ? 0 : -1 : 1 : typeof r == "number" && typeof i == "number" ? r - i : typeof r == "boolean" ? Number(r) - Number(i) : String(r).localeCompare(String(i), "ko", { numeric: !0 });
-}, N = (e) => "field" in e ? e.id ?? e.field : e.id, xe = {
+}, P = (e) => "field" in e ? e.id ?? e.field : e.id, xe = {
 	before: "sn:shadow-[inset_0_2px_0_var(--sn-color-border-focus)]",
 	after: "sn:shadow-[inset_0_-2px_0_var(--sn-color-border-focus)]"
-}, P = {
+}, Se = {
 	before: "sn:shadow-[inset_2px_0_0_var(--sn-color-border-focus)]",
 	after: "sn:shadow-[inset_-2px_0_0_var(--sn-color-border-focus)]"
 }, F = "sn:flex sn:size-4 sn:cursor-grab sn:items-center sn:justify-center sn:rounded-md sn:border-0 sn:bg-transparent sn:p-0 sn:text-muted sn:hover:text-default sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:[&_svg]:size-4";
-function I(e, t) {
+function Ce(e, t) {
 	let n = (e) => t().indexOf(String(e)) + 1;
 	return {
 		onDragStart: ({ active: t }) => `${e}을 들었어요. 지금 ${n(t.id)}번째예요.`,
@@ -44,8 +44,8 @@ function I(e, t) {
 		onDragCancel: () => "옮기기를 취소했어요."
 	};
 }
-var Se = { draggable: "Space로 들고, 화살표로 옮긴 다음 Space로 놓아요. Esc로 취소해요." };
-function Ce(e, t) {
+var we = { draggable: "Space로 들고, 화살표로 옮긴 다음 Space로 놓아요. Esc로 취소해요." };
+function Te(e, t) {
 	let [n, r] = v.useState(null);
 	return {
 		drop: n,
@@ -57,27 +57,27 @@ function Ce(e, t) {
 			});
 		},
 		onDragEnd: ({ active: n, over: i }) => {
-			r(null), i && i.id !== n.id && t(me(e, e.indexOf(String(n.id)), e.indexOf(String(i.id))));
+			r(null), i && i.id !== n.id && t(A(e, e.indexOf(String(n.id)), e.indexOf(String(i.id))));
 		},
 		onDragCancel: () => r(null)
 	};
 }
-function L(e, t, n) {
+function I(e, t, n) {
 	let [r, i] = v.useState(t);
 	return [e === void 0 ? r : e, (t) => {
 		e === void 0 && i(t), n?.(t);
 	}];
 }
-function we(e, t) {
-	let n = e.getIsPinned(), r = t || n ? e.getSize() : void 0;
+function Ee(e, t, n) {
+	let r = e.getIsPinned(), i = t || r ? e.getSize() : void 0;
 	return {
-		width: r,
-		minWidth: r,
-		left: n === "start" ? e.getStart("start") : void 0,
-		right: n === "end" ? e.getAfter("end") : void 0
+		width: i,
+		minWidth: i ?? n,
+		left: r === "start" ? e.getStart("start") : void 0,
+		right: r === "end" ? e.getAfter("end") : void 0
 	};
 }
-function Te({ actions: e, row: n }) {
+function L({ actions: e, row: n }) {
 	if (e.length === 1) {
 		let [r] = e, i = r.icon;
 		return i ? /* @__PURE__ */ x(t, {
@@ -114,7 +114,7 @@ function Te({ actions: e, row: n }) {
 		i.map(u)
 	] })] });
 }
-function Ee(e, t, n) {
+function De(e, t, n) {
 	switch (e.type) {
 		case "text": return n == null ? "" : String(n);
 		case "number": return _(n);
@@ -135,20 +135,20 @@ function Ee(e, t, n) {
 				children: e.header
 			})
 		});
-		case "actions": return /* @__PURE__ */ x(Te, {
+		case "actions": return /* @__PURE__ */ x(L, {
 			actions: e.actions,
 			row: t
 		});
 	}
 }
-function De({ id: t, label: n, drop: r, className: i, ...a }) {
-	let { setNodeRef: o, setActivatorNodeRef: s, attributes: c, listeners: l, isDragging: u } = A({
+function Oe({ id: t, label: n, drop: r, className: i, ...a }) {
+	let { setNodeRef: o, setActivatorNodeRef: s, attributes: c, listeners: l, isDragging: u } = j({
 		id: t,
 		attributes: { roleDescription: "옮길 수 있는 열" }
 	});
 	return /* @__PURE__ */ x(p, {
 		ref: o,
-		className: e(i, u && "sn:bg-subtle", r && P[r]),
+		className: e(i, u && "sn:bg-subtle", r && Se[r]),
 		handle: /* @__PURE__ */ x("button", {
 			type: "button",
 			ref: s,
@@ -161,8 +161,8 @@ function De({ id: t, label: n, drop: r, className: i, ...a }) {
 		...a
 	});
 }
-function Oe({ id: e, draggable: t, renderCells: n, ...r }) {
-	let { setNodeRef: i, setActivatorNodeRef: a, attributes: o, listeners: s, isDragging: c } = A({
+function ke({ id: e, draggable: t, renderCells: n, ...r }) {
+	let { setNodeRef: i, setActivatorNodeRef: a, attributes: o, listeners: s, isDragging: c } = j({
 		id: e,
 		disabled: !t,
 		attributes: { roleDescription: "옮길 수 있는 행" }
@@ -183,22 +183,22 @@ function Oe({ id: e, draggable: t, renderCells: n, ...r }) {
 		children: n(l)
 	});
 }
-function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, defaultSorting: c = null, onSortingChange: l, selection: u, onSelectionChange: h, columnOrder: g, onColumnOrderChange: _, onRowOrderChange: y, loading: b, emptyState: C, errorState: w, pagination: T, className: ie }) {
-	let E = u !== void 0 || h !== void 0, D = y !== void 0, O = _ !== void 0, [k, me] = L(s, c, l), [A, P] = L(u, [], h), [F, Te] = L(g, a.map(N), _), [ke, R] = L(T?.page, T?.defaultPage ?? 1, T?.onPageChange), [z, Ae] = L(T?.pageSize, T?.defaultPageSize ?? 20, T?.onPageSizeChange), B = T?.rowCount !== void 0, je = T ? Math.max(1, Math.ceil((B ? T.rowCount : t.length) / z)) : 1, V = Math.min(ke, je), H = v.useMemo(() => new Map(a.map((e) => [N(e), e])), [a]), Me = v.useMemo(() => {
+function R({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, defaultSorting: c = null, onSortingChange: l, selection: u, onSelectionChange: h, columnOrder: g, onColumnOrderChange: _, onRowOrderChange: y, loading: b, refreshing: C, emptyState: w, errorState: T, pagination: E, className: ae }) {
+	let D = !!C && !b && !T, O = u !== void 0 || h !== void 0, k = y !== void 0, A = _ !== void 0, [j, Se] = I(s, c, l), [F, L] = I(u, [], h), [R, Ae] = I(g, a.map(P), _), [je, z] = I(E?.page, E?.defaultPage ?? 1, E?.onPageChange), [B, Me] = I(E?.pageSize, E?.defaultPageSize ?? 20, E?.onPageSizeChange), V = E?.rowCount !== void 0, Ne = E ? Math.max(1, Math.ceil((V ? E.rowCount : t.length) / B)) : 1, H = Math.min(je, Ne), Pe = v.useId(), U = v.useMemo(() => new Map(a.map((e) => [P(e), e])), [a]), Fe = v.useMemo(() => {
 		let e = [];
-		E && e.push({
-			id: j,
+		O && e.push({
+			id: M,
 			size: 40,
 			enableSorting: !1
-		}), D && e.push({
-			id: M,
+		}), k && e.push({
+			id: N,
 			size: 40,
 			enableSorting: !1
 		});
 		for (let t of a) {
 			let n = t.width ?? (t.type === "actions" ? 56 : void 0);
 			e.push("field" in t ? {
-				id: N(t),
+				id: P(t),
 				accessorFn: (e) => e[t.field],
 				enableSorting: !!t.sortable,
 				sortFn: be,
@@ -212,85 +212,85 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 		return e;
 	}, [
 		a,
-		E,
-		D
-	]), Ne = v.useMemo(() => ({
+		O,
+		k
+	]), Ie = v.useMemo(() => ({
 		start: [
-			...E ? [j] : [],
-			...D ? [M] : [],
-			...a.filter((e) => e.pinned === "left").map(N)
+			...O ? [M] : [],
+			...k ? [N] : [],
+			...a.filter((e) => e.pinned === "left").map(P)
 		],
-		end: a.filter((e) => e.pinned === "right").map(N)
+		end: a.filter((e) => e.pinned === "right").map(P)
 	}), [
 		a,
-		E,
-		D
-	]), U = ae({
+		O,
+		k
+	]), W = oe({
 		features: ye,
-		columns: Me,
+		columns: Fe,
 		data: t,
 		getRowId: (e) => r(e),
 		state: {
-			sorting: k ? [k] : [],
-			columnOrder: F,
-			columnPinning: Ne,
+			sorting: j ? [j] : [],
+			columnOrder: R,
+			columnPinning: Ie,
 			pagination: {
-				pageIndex: V - 1,
-				pageSize: T ? z : t.length
+				pageIndex: H - 1,
+				pageSize: E ? B : t.length
 			}
 		},
-		manualPagination: !T || B,
-		manualSorting: B
-	}), W = [
-		...U.getStartFlatHeaders(),
-		...U.getCenterFlatHeaders(),
-		...U.getEndFlatHeaders()
-	], G = U.getRowModel().rows, Pe = t.map(r), K = G.map((e) => e.id), q = U.getCenterFlatHeaders().map((e) => e.column.id), Fe = D && !k, J = v.useRef(null), Y = !T && G.length > ve, Ie = oe({
-		count: Y ? G.length : 0,
-		getScrollElement: () => J.current,
+		manualPagination: !E || V,
+		manualSorting: V
+	}), G = [
+		...W.getStartFlatHeaders(),
+		...W.getCenterFlatHeaders(),
+		...W.getEndFlatHeaders()
+	], K = W.getRowModel().rows, Le = t.map(r), q = K.map((e) => e.id), J = W.getCenterFlatHeaders().map((e) => e.column.id), Re = k && !j, ze = v.useRef(null), Y = !E && K.length > ve, Be = se({
+		count: Y ? K.length : 0,
+		getScrollElement: () => ze.current,
 		estimateSize: () => 40,
 		overscan: 8
-	}), X = Y ? Ie.getVirtualItems() : null, Le = X ? X.map((e) => G[e.index]) : G, Re = X?.[0]?.start ?? 0, ze = X ? Ie.getTotalSize() - (X.at(-1)?.end ?? 0) : 0, Be = typeof document > "u" ? void 0 : document.body, Ve = fe(de(le, { activationConstraint: { distance: 4 } }), de(ce, { coordinateGetter: ge })), Z = Ce(Pe, (e) => y?.(e)), Q = Ce(q, (e) => Te([...F.filter((t) => !e.includes(t)), ...e])), He = (e) => {
-		me(k?.id === e ? k.desc ? null : {
+	}), X = Y ? Be.getVirtualItems() : null, Ve = X ? X.map((e) => K[e.index]) : K, He = X?.[0]?.start ?? 0, Ue = X ? Be.getTotalSize() - (X.at(-1)?.end ?? 0) : 0, We = typeof document > "u" ? void 0 : document.body, Ge = pe(fe(ue, { activationConstraint: { distance: 4 } }), fe(le, { coordinateGetter: ge })), Z = Te(Le, (e) => y?.(e)), Q = Te(J, (e) => Ae([...R.filter((t) => !e.includes(t)), ...e])), Ke = (e) => {
+		Se(j?.id === e ? j.desc ? null : {
 			id: e,
 			desc: !0
 		} : {
 			id: e,
 			desc: !1
-		}), T && V !== 1 && R(1);
-	}, Ue = K.length > 0 && K.every((e) => A.includes(e)), We = !Ue && K.some((e) => A.includes(e)), Ge = (e) => P([...A.filter((e) => !K.includes(e)), ...e ? K : []]), Ke = (t) => {
+		}), E && H !== 1 && z(1);
+	}, qe = q.length > 0 && q.every((e) => F.includes(e)), Je = !qe && q.some((e) => F.includes(e)), Ye = (e) => L([...F.filter((e) => !q.includes(e)), ...e ? q : []]), Xe = (t) => {
 		let { column: r } = t, i = r.id, a = r.getIsPinned(), o = a === "start" ? "left" : a === "end" ? "right" : void 0, s = {
 			pinned: o,
-			style: we(r, i === j || i === M || H.get(i)?.width !== void 0),
+			style: Ee(r, i === M || i === N || U.get(i)?.width !== void 0, U.get(i)?.minWidth),
 			className: e("sn:sticky sn:top-0 sn:z-20 sn:bg-surface", o && "sn:z-30")
 		};
-		if (i === j) return /* @__PURE__ */ x(p, {
+		if (i === M) return /* @__PURE__ */ x(p, {
 			...s,
 			children: /* @__PURE__ */ x(n, {
-				checked: Ue,
-				indeterminate: We,
-				onCheckedChange: Ge,
+				checked: qe,
+				indeterminate: Je,
+				onCheckedChange: Ye,
 				children: /* @__PURE__ */ x("span", {
 					className: "sn:sr-only",
 					children: "모든 행 선택"
 				})
 			})
 		}, i);
-		if (i === M) return /* @__PURE__ */ x(p, {
+		if (i === N) return /* @__PURE__ */ x(p, {
 			...s,
 			children: /* @__PURE__ */ x("span", {
 				className: "sn:sr-only",
 				children: "순서"
 			})
 		}, i);
-		let c = H.get(i), l = c.header ?? "", u = "sortable" in c && c.sortable ? {
-			sort: k?.id === i ? k.desc ? "desc" : "asc" : "none",
-			onSort: () => He(i)
+		let c = U.get(i), l = c.header ?? "", u = "sortable" in c && c.sortable ? {
+			sort: j?.id === i ? j.desc ? "desc" : "asc" : "none",
+			onSort: () => Ke(i)
 		} : {}, d = c.type === "actions" && !c.header ? /* @__PURE__ */ x("span", {
 			className: "sn:sr-only",
 			children: "동작"
 		}) : l, f = c.type === "number" || c.type === "actions" ? "end" : "start";
-		return O && !o ? /* @__PURE__ */ x(De, {
+		return A && !o ? /* @__PURE__ */ x(Oe, {
 			id: i,
 			label: l || "동작",
 			align: f,
@@ -304,43 +304,46 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 			...u,
 			children: d
 		}, i);
-	}, qe = (e) => /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(f, {
-		colSpan: W.length,
+	}, Ze = (e) => /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(f, {
+		colSpan: G.length,
 		className: "sn:h-auto sn:p-0",
-		children: e
+		children: /* @__PURE__ */ x("div", {
+			className: "sn:sticky sn:left-0 sn:w-[100cqw]",
+			children: e
+		})
 	}) }), $;
-	return $ = w ? qe(w) : b ? Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ x(m, { children: W.map((e) => /* @__PURE__ */ x(f, { children: e.column.id === j || e.column.id === M ? null : /* @__PURE__ */ x(i, {
+	return $ = T ? Ze(T) : b ? Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ x(m, { children: G.map((e) => /* @__PURE__ */ x(f, { children: e.column.id === M || e.column.id === N ? null : /* @__PURE__ */ x(i, {
 		shape: "text",
 		className: "sn:w-2/3"
-	}) }, e.id)) }, t)) : G.length === 0 ? C ? qe(C) : null : /* @__PURE__ */ S(re, { children: [
-		Re > 0 && /* @__PURE__ */ x("tr", {
+	}) }, e.id)) }, t)) : K.length === 0 ? w ? Ze(w) : null : /* @__PURE__ */ S(ie, { children: [
+		He > 0 && /* @__PURE__ */ x("tr", {
 			"aria-hidden": !0,
-			style: { height: Re }
+			style: { height: He }
 		}),
-		Le.map((t) => {
-			let r = A.includes(t.id), i = Z.drop?.id === t.id ? xe[Z.drop.side] : void 0, a = [
+		Ve.map((t) => {
+			let r = F.includes(t.id), i = Z.drop?.id === t.id ? xe[Z.drop.side] : void 0, a = [
 				...t.getStartVisibleCells(),
 				...t.getCenterVisibleCells(),
 				...t.getEndVisibleCells()
 			];
-			return /* @__PURE__ */ x(Oe, {
+			return /* @__PURE__ */ x(ke, {
 				id: t.id,
-				draggable: Fe,
+				draggable: Re,
 				selected: r,
-				"aria-selected": E ? r : void 0,
+				"aria-selected": O ? r : void 0,
 				"aria-rowindex": Y ? t.index + 2 : void 0,
 				renderCells: (o) => a.map((a) => {
-					let { column: s } = a, c = s.id, l = s.getIsPinned(), u = l === "start" ? "left" : l === "end" ? "right" : void 0, d = H.get(c), p;
-					return p = c === j ? /* @__PURE__ */ x(n, {
+					let { column: s } = a, c = s.id, l = s.getIsPinned(), u = l === "start" ? "left" : l === "end" ? "right" : void 0, d = U.get(c), p;
+					return p = c === M ? /* @__PURE__ */ x(n, {
 						checked: r,
-						onCheckedChange: (e) => P(e ? [...A, t.id] : A.filter((e) => e !== t.id)),
+						onCheckedChange: (e) => L(e ? [...F, t.id] : F.filter((e) => e !== t.id)),
 						children: /* @__PURE__ */ x("span", {
 							className: "sn:sr-only",
 							children: "행 선택"
 						})
-					}) : c === M ? o : Ee(d, t.original, a.getValue()), /* @__PURE__ */ x(f, {
+					}) : c === N ? o : De(d, t.original, a.getValue()), /* @__PURE__ */ x(f, {
 						pinned: u,
-						style: we(s, c === j || c === M || d?.width !== void 0),
+						style: Ee(s, c === M || c === N || d?.width !== void 0, d?.minWidth),
 						align: d?.type === "number" ? "end" : "start",
 						className: e((d?.type === "date" || d?.type === "datetime") && "sn:font-mono", d?.type === "actions" && "sn:text-right", i),
 						children: p
@@ -348,66 +351,85 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 				})
 			}, t.id);
 		}),
-		ze > 0 && /* @__PURE__ */ x("tr", {
+		Ue > 0 && /* @__PURE__ */ x("tr", {
 			"aria-hidden": !0,
-			style: { height: ze }
+			style: { height: Ue }
 		})
 	] }), /* @__PURE__ */ S("div", {
-		className: e("sn:flex sn:w-full sn:flex-col sn:gap-4", ie),
-		children: [/* @__PURE__ */ x("div", {
-			ref: J,
-			className: "sn:min-h-0 sn:w-full sn:flex-1 sn:overflow-auto",
-			children: /* @__PURE__ */ S("table", {
+		className: e("sn:flex sn:w-full sn:flex-col sn:gap-4", ae),
+		children: [/* @__PURE__ */ S("div", {
+			ref: ze,
+			className: "sn:@container sn:relative sn:min-h-0 sn:w-full sn:flex-1 sn:overflow-auto",
+			children: [/* @__PURE__ */ S("table", {
 				"aria-label": o,
-				"aria-busy": b || void 0,
-				"aria-rowcount": Y ? G.length + 1 : void 0,
+				"aria-busy": b || C || void 0,
+				"aria-rowcount": Y ? K.length + 1 : void 0,
 				className: e(te, "sn:bg-surface"),
-				children: [/* @__PURE__ */ x(se, {
-					sensors: Ve,
-					collisionDetection: ue,
+				children: [/* @__PURE__ */ x(ce, {
+					id: `DndDescribedBy-${Pe}-columns`,
+					sensors: Ge,
+					collisionDetection: de,
 					accessibility: {
-						container: Be,
-						announcements: I("열", () => q),
-						screenReaderInstructions: Se
+						container: We,
+						announcements: Ce("열", () => J),
+						screenReaderInstructions: we
 					},
 					onDragOver: Q.onDragOver,
 					onDragEnd: Q.onDragEnd,
 					onDragCancel: Q.onDragCancel,
-					children: /* @__PURE__ */ x(ee, { children: /* @__PURE__ */ x(pe, {
-						items: O ? q : [],
+					children: /* @__PURE__ */ x(ee, { children: /* @__PURE__ */ x(me, {
+						items: A ? J : [],
 						strategy: he,
-						children: /* @__PURE__ */ x(m, { children: W.map(Ke) })
+						children: /* @__PURE__ */ x(m, { children: G.map(Xe) })
 					}) })
-				}), /* @__PURE__ */ x(se, {
-					sensors: Ve,
-					collisionDetection: ue,
+				}), /* @__PURE__ */ x(ce, {
+					id: `DndDescribedBy-${Pe}-rows`,
+					sensors: Ge,
+					collisionDetection: de,
 					accessibility: {
-						container: Be,
-						announcements: I("행", () => K),
-						screenReaderInstructions: Se
+						container: We,
+						announcements: Ce("행", () => q),
+						screenReaderInstructions: we
 					},
 					onDragOver: Z.onDragOver,
 					onDragEnd: Z.onDragEnd,
 					onDragCancel: Z.onDragCancel,
-					children: /* @__PURE__ */ x(pe, {
-						items: Fe ? K : [],
+					children: /* @__PURE__ */ x(me, {
+						items: Re ? q : [],
 						strategy: _e,
-						children: /* @__PURE__ */ x(d, { children: $ })
+						children: /* @__PURE__ */ S(d, {
+							className: D ? "sn:relative" : void 0,
+							children: [$, D && /* @__PURE__ */ x("tr", {
+								"aria-hidden": !0,
+								children: /* @__PURE__ */ x("td", {
+									colSpan: G.length,
+									className: "sn:absolute sn:inset-0 sn:bg-scrim-subtle sn:p-0 sn:text-muted sn:transition-opacity sn:duration-(--sn-duration-fast) sn:ease-standard sn:starting:opacity-0 sn:motion-reduce:transition-none",
+									children: /* @__PURE__ */ x("div", {
+										className: "sn:sticky sn:left-0 sn:flex sn:h-full sn:w-[100cqw] sn:items-center sn:justify-center",
+										children: /* @__PURE__ */ x(re, { className: "sn:size-6 sn:animate-[sn-spin_var(--sn-duration-loop)_linear_infinite] sn:motion-reduce:animate-none" })
+									})
+								})
+							})]
+						})
 					})
 				})]
-			})
-		}), T && !w && (b || G.length > 0) && /* @__PURE__ */ x(ne, {
-			page: V,
-			pageCount: je,
-			onPageChange: R,
-			pageSize: z,
+			}), /* @__PURE__ */ x("span", {
+				role: "status",
+				className: "sn:sr-only",
+				children: D ? "불러오는 중이에요" : ""
+			})]
+		}), E && !T && (b || K.length > 0) && /* @__PURE__ */ x(ne, {
+			page: H,
+			pageCount: Ne,
+			onPageChange: z,
+			pageSize: B,
 			onPageSizeChange: (e) => {
-				Ae(e), V !== 1 && R(1);
+				Me(e), H !== 1 && z(1);
 			},
-			pageSizeOptions: T.pageSizeOptions,
-			showFirstLast: T.showFirstLast
+			pageSizeOptions: E.pageSizeOptions,
+			showFirstLast: E.showFirstLast
 		})]
 	});
 }
 //#endregion
-export { ke as DataGrid };
+export { R as DataGrid };

package/dist/styles.css

@@ -1,3 +1,3 @@
 /*! sonic-ui | 전체가 @layer sonic 안에 있어요. 쓰는 쪽: @layer theme, base, sonic, components, utilities; */
 @property --tw-border-spacing-x{syntax:"<length>";inherits:false;initial-value:0}@property --tw-border-spacing-y{syntax:"<length>";inherits:false;initial-value:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@layer sonic{/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer utilities{.sn\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sn\:absolute{position:absolute}.sn\:fixed{position:fixed}.sn\:relative{position:relative}.sn\:sticky{position:sticky}.sn\:inset-0{inset:0}.sn\:inset-y-0{inset-block:0}.sn\:top-0{top:0}.sn\:top-1\/2{top:50%}.sn\:right-0{right:0}.sn\:right-1{right:var(--sn-space-1)}.sn\:right-4{right:calc(var(--sn-space-1) * 4)}.sn\:bottom-4{bottom:calc(var(--sn-space-1) * 4)}.sn\:bottom-\[-1px\]{bottom:-1px}.sn\:left-0{left:0}.sn\:left-1{left:var(--sn-space-1)}.sn\:left-1\/2{left:50%}.sn\:z-10{z-index:10}.sn\:z-20{z-index:20}.sn\:z-30{z-index:30}.sn\:z-50{z-index:50}.sn\:m-0{margin:0}.sn\:my-1{margin-block:var(--sn-space-1)}.sn\:-mt-2{margin-top:calc(var(--sn-space-1) * -2)}.sn\:-mt-3{margin-top:calc(var(--sn-space-1) * -3)}.sn\:mt-2{margin-top:calc(var(--sn-space-1) * 2)}.sn\:-mb-px{margin-bottom:-1px}.sn\:mb-0{margin-bottom:0}.sn\:ml-1{margin-left:var(--sn-space-1)}.sn\:ml-auto{margin-left:auto}.sn\:box-border{box-sizing:border-box}.sn\:block{display:block}.sn\:flex{display:flex}.sn\:hidden{display:none}.sn\:inline-block{display:inline-block}.sn\:inline-flex{display:inline-flex}.sn\:size-2{width:calc(var(--sn-space-1) * 2);height:calc(var(--sn-space-1) * 2)}.sn\:size-3{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:size-4{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:size-6{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:size-7{width:calc(var(--sn-space-1) * 7);height:calc(var(--sn-space-1) * 7)}.sn\:size-8{width:calc(var(--sn-space-1) * 8);height:calc(var(--sn-space-1) * 8)}.sn\:size-10{width:calc(var(--sn-space-1) * 10);height:calc(var(--sn-space-1) * 10)}.sn\:size-12{width:calc(var(--sn-space-1) * 12);height:calc(var(--sn-space-1) * 12)}.sn\:size-24{width:calc(var(--sn-space-1) * 24);height:calc(var(--sn-space-1) * 24)}.sn\:size-full{width:100%;height:100%}.sn\:h-\(--accordion-panel-height\){height:var(--accordion-panel-height)}.sn\:h-0\.5{height:calc(var(--sn-space-1) * .5)}.sn\:h-1{height:var(--sn-space-1)}.sn\:h-3{height:calc(var(--sn-space-1) * 3)}.sn\:h-4{height:calc(var(--sn-space-1) * 4)}.sn\:h-5{height:calc(var(--sn-space-1) * 5)}.sn\:h-6{height:calc(var(--sn-space-1) * 6)}.sn\:h-7{height:calc(var(--sn-space-1) * 7)}.sn\:h-8{height:calc(var(--sn-space-1) * 8)}.sn\:h-10{height:calc(var(--sn-space-1) * 10)}.sn\:h-16{height:calc(var(--sn-space-1) * 16)}.sn\:h-96{height:calc(var(--sn-space-1) * 96)}.sn\:h-auto{height:auto}.sn\:h-full{height:100%}.sn\:h-px{height:1px}.sn\:max-h-\(--available-height\){max-height:var(--available-height)}.sn\:max-h-\[calc\(100dvh-2\*var\(--sn-space-4\)\)\]{max-height:calc(100dvh - 2 * var(--sn-space-4))}.sn\:min-h-0{min-height:0}.sn\:min-h-20{min-height:calc(var(--sn-space-1) * 20)}.sn\:w-\(--active-tab-width\){width:var(--active-tab-width)}.sn\:w-2\/3{width:66.6667%}.sn\:w-6{width:calc(var(--sn-space-1) * 6)}.sn\:w-7{width:calc(var(--sn-space-1) * 7)}.sn\:w-24{width:calc(var(--sn-space-1) * 24)}.sn\:w-80{width:calc(var(--sn-space-1) * 80)}.sn\:w-90{width:calc(var(--sn-space-1) * 90)}.sn\:w-110{width:calc(var(--sn-space-1) * 110)}.sn\:w-auto{width:auto}.sn\:w-full{width:100%}.sn\:w-max{width:max-content}.sn\:w-px{width:1px}.sn\:max-w-\[calc\(100vw-2\*var\(--sn-space-4\)\)\]{max-width:calc(100vw - 2 * var(--sn-space-4))}.sn\:max-w-full{max-width:100%}.sn\:min-w-\(--anchor-width\){min-width:var(--anchor-width)}.sn\:min-w-0{min-width:0}.sn\:min-w-7{min-width:calc(var(--sn-space-1) * 7)}.sn\:min-w-48{min-width:calc(var(--sn-space-1) * 48)}.sn\:min-w-full{min-width:100%}.sn\:flex-1{flex:1}.sn\:shrink-0{flex-shrink:0}.sn\:border-separate{border-collapse:separate}.sn\:border-spacing-0{--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.sn\:origin-\(--transform-origin\){transform-origin:var(--transform-origin)}.sn\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:translate-x-\(--active-tab-left\){--tw-translate-x:var(--active-tab-left);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:animate-\[sn-pulse_var\(--sn-duration-loop\)_ease-in-out_infinite\]{animation:sn-pulse var(--sn-duration-loop) ease-in-out infinite}.sn\:animate-\[sn-spin_var\(--sn-duration-loop\)_linear_infinite\]{animation:sn-spin var(--sn-duration-loop) linear infinite}.sn\:cursor-default{cursor:default}.sn\:cursor-grab{cursor:grab}.sn\:cursor-not-allowed{cursor:not-allowed}.sn\:cursor-pointer{cursor:pointer}.sn\:resize-y{resize:vertical}.sn\:\[scrollbar-width\:none\]{scrollbar-width:none}.sn\:list-none{list-style-type:none}.sn\:flex-col{flex-direction:column}.sn\:flex-col-reverse{flex-direction:column-reverse}.sn\:flex-wrap{flex-wrap:wrap}.sn\:items-center{align-items:center}.sn\:items-start{align-items:flex-start}.sn\:justify-between{justify-content:space-between}.sn\:justify-center{justify-content:center}.sn\:justify-end{justify-content:flex-end}.sn\:gap-1{gap:var(--sn-space-1)}.sn\:gap-2{gap:calc(var(--sn-space-1) * 2)}.sn\:gap-3{gap:calc(var(--sn-space-1) * 3)}.sn\:gap-4{gap:calc(var(--sn-space-1) * 4)}.sn\:gap-6{gap:calc(var(--sn-space-1) * 6)}.sn\:gap-10{gap:calc(var(--sn-space-1) * 10)}.sn\:self-stretch{align-self:stretch}.sn\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sn\:overflow-auto{overflow:auto}.sn\:overflow-hidden{overflow:hidden}.sn\:overflow-x-auto{overflow-x:auto}.sn\:overflow-y-auto{overflow-y:auto}.sn\:rounded-full{border-radius:var(--sn-radius-full)}.sn\:rounded-lg{border-radius:var(--sn-radius-lg)}.sn\:rounded-md{border-radius:var(--sn-radius-md)}.sn\:rounded-sm{border-radius:var(--sn-radius-sm)}.sn\:border{border-style:var(--tw-border-style);border-width:1px}.sn\:border-0{border-style:var(--tw-border-style);border-width:0}.sn\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.sn\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.sn\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.sn\:border-dashed{--tw-border-style:dashed;border-style:dashed}.sn\:border-danger{border-color:var(--sn-color-border-danger)}.sn\:border-default{border-color:var(--sn-color-border-default)}.sn\:border-strong{border-color:var(--sn-color-border-strong)}.sn\:border-transparent{border-color:#0000}.sn\:border-r-default{border-right-color:var(--sn-color-border-default)}.sn\:border-l-default{border-left-color:var(--sn-color-border-default)}.sn\:bg-\(--sn-color-border-default\){background-color:var(--sn-color-border-default)}.sn\:bg-\(--sn-color-text-on-primary\){background-color:var(--sn-color-text-on-primary)}.sn\:bg-canvas{background-color:var(--sn-color-bg-canvas)}.sn\:bg-danger{background-color:var(--sn-color-bg-danger)}.sn\:bg-danger-subtle{background-color:var(--sn-color-bg-danger-subtle)}.sn\:bg-inverse{background-color:var(--sn-color-bg-inverse)}.sn\:bg-overlay{background-color:var(--sn-color-bg-overlay)}.sn\:bg-primary{background-color:var(--sn-color-bg-primary)}.sn\:bg-subtle{background-color:var(--sn-color-bg-subtle)}.sn\:bg-success{background-color:var(--sn-color-bg-success)}.sn\:bg-success-subtle{background-color:var(--sn-color-bg-success-subtle)}.sn\:bg-surface{background-color:var(--sn-color-bg-surface)}.sn\:bg-transparent{background-color:#0000}.sn\:bg-warning{background-color:var(--sn-color-bg-warning)}.sn\:bg-warning-subtle{background-color:var(--sn-color-bg-warning-subtle)}.sn\:object-cover{object-fit:cover}.sn\:p-0{padding:0}.sn\:p-1{padding:var(--sn-space-1)}.sn\:p-3{padding:calc(var(--sn-space-1) * 3)}.sn\:p-4{padding:calc(var(--sn-space-1) * 4)}.sn\:p-5{padding:calc(var(--sn-space-1) * 5)}.sn\:p-6{padding:calc(var(--sn-space-1) * 6)}.sn\:p-px{padding:1px}.sn\:px-0{padding-inline:0}.sn\:px-1{padding-inline:var(--sn-space-1)}.sn\:px-2{padding-inline:calc(var(--sn-space-1) * 2)}.sn\:px-3{padding-inline:calc(var(--sn-space-1) * 3)}.sn\:px-4{padding-inline:calc(var(--sn-space-1) * 4)}.sn\:px-6{padding-inline:calc(var(--sn-space-1) * 6)}.sn\:py-0{padding-block:0}.sn\:py-1{padding-block:var(--sn-space-1)}.sn\:py-2{padding-block:calc(var(--sn-space-1) * 2)}.sn\:py-3{padding-block:calc(var(--sn-space-1) * 3)}.sn\:py-6{padding-block:calc(var(--sn-space-1) * 6)}.sn\:py-12{padding-block:calc(var(--sn-space-1) * 12)}.sn\:py-16{padding-block:calc(var(--sn-space-1) * 16)}.sn\:pt-1{padding-top:var(--sn-space-1)}.sn\:pb-4{padding-bottom:calc(var(--sn-space-1) * 4)}.sn\:pb-px{padding-bottom:1px}.sn\:text-center{text-align:center}.sn\:text-left{text-align:left}.sn\:text-right{text-align:right}.sn\:align-middle{vertical-align:middle}.sn\:align-text-bottom{vertical-align:text-bottom}.sn\:font-mono{font-family:var(--sn-font-mono)}.sn\:font-sans{font-family:var(--sn-font-sans)}.sn\:text-body{font-size:var(--sn-text-body);line-height:var(--tw-leading,var(--sn-text-body--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body--font-weight))}.sn\:text-body-strong{font-size:var(--sn-text-body-strong);line-height:var(--tw-leading,var(--sn-text-body-strong--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body-strong--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body-strong--font-weight))}.sn\:text-caption{font-size:var(--sn-text-caption);line-height:var(--tw-leading,var(--sn-text-caption--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-caption--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-caption--font-weight))}.sn\:text-display{font-size:var(--sn-text-display);line-height:var(--tw-leading,var(--sn-text-display--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-display--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-display--font-weight))}.sn\:text-label{font-size:var(--sn-text-label);line-height:var(--tw-leading,var(--sn-text-label--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-label--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-label--font-weight))}.sn\:text-title{font-size:var(--sn-text-title);line-height:var(--tw-leading,var(--sn-text-title--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-title--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-title--font-weight))}.sn\:whitespace-nowrap{white-space:nowrap}.sn\:text-danger{color:var(--sn-color-text-danger)}.sn\:text-default{color:var(--sn-color-text-default)}.sn\:text-inherit{color:inherit}.sn\:text-inverse{color:var(--sn-color-text-inverse)}.sn\:text-muted{color:var(--sn-color-text-muted)}.sn\:text-on-danger{color:var(--sn-color-text-on-danger)}.sn\:text-on-primary{color:var(--sn-color-text-on-primary)}.sn\:text-on-success{color:var(--sn-color-text-on-success)}.sn\:text-on-warning{color:var(--sn-color-text-on-warning)}.sn\:text-success{color:var(--sn-color-text-success)}.sn\:text-warning{color:var(--sn-color-text-warning)}.sn\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.sn\:underline{text-decoration-line:underline}.sn\:underline-offset-2{text-underline-offset:2px}.sn\:opacity-\(--sn-opacity-disabled\){opacity:var(--sn-opacity-disabled)}.sn\:opacity-0{opacity:0}.sn\:shadow-\[inset_-2px_0_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset -2px 0 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_0_-2px_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 0 -2px 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_0_2px_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 0 2px 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_2px_0_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,translate\]{transition-property:opacity,translate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[translate\,width\]{transition-property:translate,width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:duration-\(--sn-duration-fast\){--tw-duration:var(--sn-duration-fast);transition-duration:var(--sn-duration-fast)}.sn\:duration-\(--sn-duration-normal\){--tw-duration:var(--sn-duration-normal);transition-duration:var(--sn-duration-normal)}.sn\:ease-standard{--tw-ease:var(--sn-easing-standard);transition-timing-function:var(--sn-easing-standard)}.sn\:outline-none{--tw-outline-style:none;outline-style:none}.sn\:select-none{-webkit-user-select:none;user-select:none}.sn\:\[font\:inherit\]{font:inherit}@media (hover:hover){.sn\:group-hover\/head\:opacity-100:is(:where(.sn\:group\/head):hover *){opacity:1}}.sn\:group-aria-invalid\:text-danger:is(:where(.sn\:group)[aria-invalid=true] *){color:var(--sn-color-text-danger)}@media (hover:hover){.sn\:group-data-interactive\/row\:group-hover\/row\:bg-subtle:is(:where(.sn\:group\/row)[data-interactive] *):is(:where(.sn\:group\/row):hover *){background-color:var(--sn-color-bg-subtle)}}.sn\:group-data-invalid\:text-danger:is(:where(.sn\:group)[data-invalid] *){color:var(--sn-color-text-danger)}.sn\:group-data-panel-open\:rotate-180:is(:where(.sn\:group)[data-panel-open] *),.sn\:group-data-popup-open\:rotate-180:is(:where(.sn\:group)[data-popup-open] *){rotate:180deg}.sn\:group-data-selected\:border-transparent:is(:where(.sn\:group)[data-selected] *){border-color:#0000}.sn\:group-data-selected\:bg-primary:is(:where(.sn\:group)[data-selected] *){background-color:var(--sn-color-bg-primary)}.sn\:group-data-selected\/row\:bg-selected:is(:where(.sn\:group\/row)[data-selected] *){background-color:var(--sn-color-bg-selected)}.sn\:placeholder\:text-muted::placeholder{color:var(--sn-color-text-muted)}.sn\:focus-within\:opacity-100:focus-within{opacity:1}@media (hover:hover){.sn\:hover\:bg-subtle:hover{background-color:var(--sn-color-bg-subtle)}.sn\:hover\:text-default:hover{color:var(--sn-color-text-default)}.sn\:hover\:text-muted:hover{color:var(--sn-color-text-muted)}.sn\:hover\:not-disabled\:bg-subtle:hover:not(:disabled){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:border-strong:hover:not([data-disabled]){border-color:var(--sn-color-border-strong)}.sn\:hover\:not-data-disabled\:bg-primary-hover:hover:not([data-disabled]){background-color:var(--sn-color-bg-primary-hover)}.sn\:hover\:not-data-disabled\:bg-subtle:hover:not([data-disabled]){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:text-default:hover:not([data-disabled]){color:var(--sn-color-text-default)}}.sn\:focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.sn\:focus-visible\:-outline-offset-2:focus-visible{outline-offset:calc(2px * -1)}.sn\:focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.sn\:focus-visible\:outline-focus:focus-visible{outline-color:var(--sn-color-border-focus)}.sn\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.sn\:disabled\:opacity-\(--sn-opacity-disabled\):disabled{opacity:var(--sn-opacity-disabled)}.sn\:aria-invalid\:border-danger[aria-invalid=true]{border-color:var(--sn-color-border-danger)}@media (hover:hover){.sn\:hover\:aria-invalid\:border-danger:hover[aria-invalid=true]{border-color:var(--sn-color-border-danger)}}.sn\:aria-invalid\:focus-visible\:outline-danger[aria-invalid=true]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-active\:text-default[data-active]{color:var(--sn-color-text-default)}.sn\:data-checked\:translate-x-3[data-checked]{--tw-translate-x:calc(var(--sn-space-1) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-checked\:border-transparent[data-checked]{border-color:#0000}.sn\:data-checked\:bg-\(--sn-color-text-on-primary\)[data-checked]{background-color:var(--sn-color-text-on-primary)}.sn\:data-checked\:bg-primary[data-checked]{background-color:var(--sn-color-bg-primary)}.sn\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.sn\:data-disabled\:opacity-\(--sn-opacity-disabled\)[data-disabled]{opacity:var(--sn-opacity-disabled)}.sn\:data-disabled\:not-data-loading\:cursor-not-allowed[data-disabled]:not([data-loading]){cursor:not-allowed}.sn\:data-disabled\:not-data-loading\:opacity-\(--sn-opacity-disabled\)[data-disabled]:not([data-loading]){opacity:var(--sn-opacity-disabled)}.sn\:data-dragging\:border-focus[data-dragging]{border-color:var(--sn-color-border-focus)}.sn\:data-dragging\:bg-subtle[data-dragging]{background-color:var(--sn-color-bg-subtle)}.sn\:data-dragging\:bg-surface[data-dragging]{background-color:var(--sn-color-bg-surface)}.sn\:data-dragging\:outline[data-dragging],.sn\:data-dragging\:outline-1[data-dragging]{outline-style:var(--tw-outline-style);outline-width:1px}.sn\:data-dragging\:-outline-offset-1[data-dragging]{outline-offset:calc(1px * -1)}.sn\:data-dragging\:outline-default[data-dragging]{outline-color:var(--sn-color-border-default)}.sn\:data-ending-style\:h-0[data-ending-style]{height:0}.sn\:data-ending-style\:translate-y-2[data-ending-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-ending-style\:scale-98[data-ending-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-ending-style\:opacity-0[data-ending-style]{opacity:0}.sn\:data-highlighted\:bg-subtle[data-highlighted]{background-color:var(--sn-color-bg-subtle)}.sn\:data-indeterminate\:border-transparent[data-indeterminate]{border-color:#0000}.sn\:data-indeterminate\:bg-primary[data-indeterminate]{background-color:var(--sn-color-bg-primary)}@media (hover:hover){.sn\:data-interactive\:hover\:bg-subtle[data-interactive]:hover{background-color:var(--sn-color-bg-subtle)}}.sn\:data-invalid\:border-danger[data-invalid]{border-color:var(--sn-color-border-danger)}.sn\:data-invalid\:focus-visible\:outline-danger[data-invalid]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-limited\:hidden[data-limited]{display:none}.sn\:data-loading\:cursor-progress[data-loading]{cursor:progress}.sn\:data-placeholder\:text-muted[data-placeholder]{color:var(--sn-color-text-muted)}.sn\:data-popup-open\:border-focus[data-popup-open]{border-color:var(--sn-color-border-focus)}.sn\:data-pressed\:border-default[data-pressed]{border-color:var(--sn-color-border-default)}.sn\:data-pressed\:bg-surface[data-pressed]{background-color:var(--sn-color-bg-surface)}.sn\:data-pressed\:text-default[data-pressed]{color:var(--sn-color-text-default)}.sn\:data-selected\:bg-selected[data-selected]{background-color:var(--sn-color-bg-selected)}.sn\:data-starting-style\:h-0[data-starting-style]{height:0}.sn\:data-starting-style\:translate-y-2[data-starting-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-starting-style\:scale-98[data-starting-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-starting-style\:opacity-0[data-starting-style]{opacity:0}@media (prefers-reduced-motion:reduce){.sn\:motion-reduce\:animate-none{animation:none}.sn\:motion-reduce\:transition-none{transition-property:none}}@media not all and (min-width:40rem){.sn\:max-sm\:flex-col-reverse{flex-direction:column-reverse}.sn\:max-sm\:text-\[16px\]{font-size:16px}:is(.sn\:max-sm\:\*\:h-10>*){height:calc(var(--sn-space-1) * 10)}:is(.sn\:max-sm\:\*\:w-full>*){width:100%}}@media (min-width:40rem){.sn\:sm\:flex{display:flex}.sn\:sm\:hidden{display:none}.sn\:sm\:inline{display:inline}}@media (pointer:coarse){.sn\:pointer-coarse\:hidden{display:none}.sn\:pointer-coarse\:inline{display:inline}}.sn\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.sn\:\[\&_svg\]\:size-3 svg{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:\[\&_svg\]\:size-4 svg{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:\[\&_svg\]\:size-5 svg{width:calc(var(--sn-space-1) * 5);height:calc(var(--sn-space-1) * 5)}.sn\:\[\&_svg\]\:size-6 svg{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}:root{--sn-space-0:0px;--sn-space-1:4px;--sn-space-2:8px;--sn-space-3:12px;--sn-space-4:16px;--sn-space-5:20px;--sn-space-6:24px;--sn-space-7:28px;--sn-space-8:32px;--sn-space-10:40px;--sn-space-12:48px;--sn-space-16:64px;--sn-radius-sm:2px;--sn-radius-md:4px;--sn-radius-lg:6px;--sn-radius-full:9999px;--sn-stroke-default:1px;--sn-stroke-focus:2px;--sn-duration-fast:.12s;--sn-duration-normal:.2s;--sn-easing-standard:cubic-bezier(.2, 0, 0, 1);--sn-duration-loop:1s;--sn-opacity-disabled:.45;--sn-font-sans:"IBM Plex Sans KR", ui-sans-serif, system-ui, sans-serif;--sn-font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sn-text-display:32px;--sn-text-display--line-height:40px;--sn-text-display--font-weight:600;--sn-text-display--letter-spacing:-.02em;--sn-text-title:20px;--sn-text-title--line-height:28px;--sn-text-title--font-weight:600;--sn-text-title--letter-spacing:-.01em;--sn-text-body:14px;--sn-text-body--line-height:20px;--sn-text-body--font-weight:400;--sn-text-body--letter-spacing:0em;--sn-text-body-strong:14px;--sn-text-body-strong--line-height:20px;--sn-text-body-strong--font-weight:500;--sn-text-body-strong--letter-spacing:0em;--sn-text-label:13px;--sn-text-label--line-height:16px;--sn-text-label--font-weight:500;--sn-text-label--letter-spacing:0em;--sn-text-caption:12px;--sn-text-caption--line-height:16px;--sn-text-caption--font-weight:400;--sn-text-caption--letter-spacing:0em;--sn-text-mono:14px;--sn-text-mono--line-height:20px;--sn-text-mono--font-weight:400;--sn-text-mono--letter-spacing:0em;--sn-text-mono-caption:12px;--sn-text-mono-caption--line-height:16px;--sn-text-mono-caption--font-weight:400;--sn-text-mono-caption--letter-spacing:0em}:root,[data-theme=light]{color-scheme:light;--sn-color-bg-canvas:#f4f6f8;--sn-color-bg-surface:#fff;--sn-color-bg-subtle:#e6eaee;--sn-color-bg-primary:#2340d0;--sn-color-bg-primary-hover:#1b33ae;--sn-color-bg-danger:#c8312b;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#0e1216;--sn-color-text-muted:#5b6672;--sn-color-text-on-primary:#fff;--sn-color-text-on-danger:#fff;--sn-color-text-danger:#c8312b;--sn-color-border-default:#d5dbe1;--sn-color-border-strong:#8d99a6;--sn-color-border-focus:#2340d0;--sn-color-border-danger:#c8312b;--sn-color-bg-inverse:#0e1216;--sn-color-text-inverse:#fff;--sn-color-bg-success:#16804f;--sn-color-text-on-success:#fff;--sn-color-bg-success-subtle:#eaf7f0;--sn-color-text-success:#0f6640;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#fcf5e6;--sn-color-text-warning:#85520a;--sn-color-bg-danger-subtle:#fcedec;--sn-color-border-success:#16804f;--sn-color-border-warning:#a86c12;--sn-color-bg-selected:#eef1ff}[data-theme=dark]{color-scheme:dark;--sn-color-bg-canvas:#0e1216;--sn-color-bg-surface:#161b21;--sn-color-bg-subtle:#1e252d;--sn-color-bg-primary:#6e86ff;--sn-color-bg-primary-hover:#8c9fff;--sn-color-bg-danger:#f06a5f;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#e6eaee;--sn-color-text-muted:#8d99a6;--sn-color-text-on-primary:#0e1216;--sn-color-text-on-danger:#0e1216;--sn-color-text-danger:#f06a5f;--sn-color-border-default:#2a323b;--sn-color-border-strong:#5b6672;--sn-color-border-focus:#6e86ff;--sn-color-border-danger:#f06a5f;--sn-color-bg-inverse:#e6eaee;--sn-color-text-inverse:#0e1216;--sn-color-bg-success:#3db882;--sn-color-text-on-success:#0e1216;--sn-color-bg-success-subtle:#0b2218;--sn-color-text-success:#6bd1a0;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#24190a;--sn-color-text-warning:#eec46a;--sn-color-bg-danger-subtle:#2b1311;--sn-color-border-success:#3db882;--sn-color-border-warning:#e3a43a;--sn-color-bg-selected:#18214d}@keyframes sn-pulse{50%{opacity:.5}}@keyframes sn-spin{to{transform:rotate(360deg)}}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer utilities{.sn\:\@container{container-type:inline-size}.sn\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sn\:absolute{position:absolute}.sn\:fixed{position:fixed}.sn\:relative{position:relative}.sn\:sticky{position:sticky}.sn\:inset-0{inset:0}.sn\:inset-y-0{inset-block:0}.sn\:top-0{top:0}.sn\:top-1\/2{top:50%}.sn\:right-0{right:0}.sn\:right-1{right:var(--sn-space-1)}.sn\:right-4{right:calc(var(--sn-space-1) * 4)}.sn\:bottom-4{bottom:calc(var(--sn-space-1) * 4)}.sn\:bottom-\[-1px\]{bottom:-1px}.sn\:left-0{left:0}.sn\:left-1{left:var(--sn-space-1)}.sn\:left-1\/2{left:50%}.sn\:z-10{z-index:10}.sn\:z-20{z-index:20}.sn\:z-30{z-index:30}.sn\:z-50{z-index:50}.sn\:m-0{margin:0}.sn\:my-1{margin-block:var(--sn-space-1)}.sn\:-mt-2{margin-top:calc(var(--sn-space-1) * -2)}.sn\:-mt-3{margin-top:calc(var(--sn-space-1) * -3)}.sn\:mt-2{margin-top:calc(var(--sn-space-1) * 2)}.sn\:-mb-px{margin-bottom:-1px}.sn\:mb-0{margin-bottom:0}.sn\:ml-1{margin-left:var(--sn-space-1)}.sn\:ml-auto{margin-left:auto}.sn\:box-border{box-sizing:border-box}.sn\:block{display:block}.sn\:flex{display:flex}.sn\:hidden{display:none}.sn\:inline-block{display:inline-block}.sn\:inline-flex{display:inline-flex}.sn\:size-2{width:calc(var(--sn-space-1) * 2);height:calc(var(--sn-space-1) * 2)}.sn\:size-3{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:size-4{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:size-6{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:size-7{width:calc(var(--sn-space-1) * 7);height:calc(var(--sn-space-1) * 7)}.sn\:size-8{width:calc(var(--sn-space-1) * 8);height:calc(var(--sn-space-1) * 8)}.sn\:size-10{width:calc(var(--sn-space-1) * 10);height:calc(var(--sn-space-1) * 10)}.sn\:size-12{width:calc(var(--sn-space-1) * 12);height:calc(var(--sn-space-1) * 12)}.sn\:size-24{width:calc(var(--sn-space-1) * 24);height:calc(var(--sn-space-1) * 24)}.sn\:size-full{width:100%;height:100%}.sn\:h-\(--accordion-panel-height\){height:var(--accordion-panel-height)}.sn\:h-0\.5{height:calc(var(--sn-space-1) * .5)}.sn\:h-1{height:var(--sn-space-1)}.sn\:h-3{height:calc(var(--sn-space-1) * 3)}.sn\:h-4{height:calc(var(--sn-space-1) * 4)}.sn\:h-5{height:calc(var(--sn-space-1) * 5)}.sn\:h-6{height:calc(var(--sn-space-1) * 6)}.sn\:h-7{height:calc(var(--sn-space-1) * 7)}.sn\:h-8{height:calc(var(--sn-space-1) * 8)}.sn\:h-10{height:calc(var(--sn-space-1) * 10)}.sn\:h-16{height:calc(var(--sn-space-1) * 16)}.sn\:h-96{height:calc(var(--sn-space-1) * 96)}.sn\:h-auto{height:auto}.sn\:h-full{height:100%}.sn\:h-px{height:1px}.sn\:max-h-\(--available-height\){max-height:var(--available-height)}.sn\:max-h-\[calc\(100dvh-2\*var\(--sn-space-4\)\)\]{max-height:calc(100dvh - 2 * var(--sn-space-4))}.sn\:min-h-0{min-height:0}.sn\:min-h-20{min-height:calc(var(--sn-space-1) * 20)}.sn\:w-\(--active-tab-width\){width:var(--active-tab-width)}.sn\:w-2\/3{width:66.6667%}.sn\:w-6{width:calc(var(--sn-space-1) * 6)}.sn\:w-7{width:calc(var(--sn-space-1) * 7)}.sn\:w-24{width:calc(var(--sn-space-1) * 24)}.sn\:w-80{width:calc(var(--sn-space-1) * 80)}.sn\:w-90{width:calc(var(--sn-space-1) * 90)}.sn\:w-110{width:calc(var(--sn-space-1) * 110)}.sn\:w-\[100cqw\]{width:100cqw}.sn\:w-auto{width:auto}.sn\:w-full{width:100%}.sn\:w-max{width:max-content}.sn\:w-px{width:1px}.sn\:max-w-\[calc\(100vw-2\*var\(--sn-space-4\)\)\]{max-width:calc(100vw - 2 * var(--sn-space-4))}.sn\:max-w-full{max-width:100%}.sn\:min-w-\(--anchor-width\){min-width:var(--anchor-width)}.sn\:min-w-0{min-width:0}.sn\:min-w-7{min-width:calc(var(--sn-space-1) * 7)}.sn\:min-w-48{min-width:calc(var(--sn-space-1) * 48)}.sn\:min-w-full{min-width:100%}.sn\:flex-1{flex:1}.sn\:shrink-0{flex-shrink:0}.sn\:border-separate{border-collapse:separate}.sn\:border-spacing-0{--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.sn\:origin-\(--transform-origin\){transform-origin:var(--transform-origin)}.sn\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:translate-x-\(--active-tab-left\){--tw-translate-x:var(--active-tab-left);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:animate-\[sn-pulse_var\(--sn-duration-loop\)_ease-in-out_infinite\]{animation:sn-pulse var(--sn-duration-loop) ease-in-out infinite}.sn\:animate-\[sn-spin_var\(--sn-duration-loop\)_linear_infinite\]{animation:sn-spin var(--sn-duration-loop) linear infinite}.sn\:cursor-default{cursor:default}.sn\:cursor-grab{cursor:grab}.sn\:cursor-not-allowed{cursor:not-allowed}.sn\:cursor-pointer{cursor:pointer}.sn\:resize-y{resize:vertical}.sn\:\[scrollbar-width\:none\]{scrollbar-width:none}.sn\:list-none{list-style-type:none}.sn\:flex-col{flex-direction:column}.sn\:flex-col-reverse{flex-direction:column-reverse}.sn\:flex-wrap{flex-wrap:wrap}.sn\:items-center{align-items:center}.sn\:items-start{align-items:flex-start}.sn\:justify-between{justify-content:space-between}.sn\:justify-center{justify-content:center}.sn\:justify-end{justify-content:flex-end}.sn\:gap-1{gap:var(--sn-space-1)}.sn\:gap-2{gap:calc(var(--sn-space-1) * 2)}.sn\:gap-3{gap:calc(var(--sn-space-1) * 3)}.sn\:gap-4{gap:calc(var(--sn-space-1) * 4)}.sn\:gap-6{gap:calc(var(--sn-space-1) * 6)}.sn\:gap-10{gap:calc(var(--sn-space-1) * 10)}.sn\:self-stretch{align-self:stretch}.sn\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sn\:overflow-auto{overflow:auto}.sn\:overflow-hidden{overflow:hidden}.sn\:overflow-x-auto{overflow-x:auto}.sn\:overflow-y-auto{overflow-y:auto}.sn\:rounded-full{border-radius:var(--sn-radius-full)}.sn\:rounded-lg{border-radius:var(--sn-radius-lg)}.sn\:rounded-md{border-radius:var(--sn-radius-md)}.sn\:rounded-sm{border-radius:var(--sn-radius-sm)}.sn\:border{border-style:var(--tw-border-style);border-width:1px}.sn\:border-0{border-style:var(--tw-border-style);border-width:0}.sn\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.sn\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.sn\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.sn\:border-dashed{--tw-border-style:dashed;border-style:dashed}.sn\:border-danger{border-color:var(--sn-color-border-danger)}.sn\:border-default{border-color:var(--sn-color-border-default)}.sn\:border-strong{border-color:var(--sn-color-border-strong)}.sn\:border-transparent{border-color:#0000}.sn\:border-r-default{border-right-color:var(--sn-color-border-default)}.sn\:border-l-default{border-left-color:var(--sn-color-border-default)}.sn\:bg-\(--sn-color-border-default\){background-color:var(--sn-color-border-default)}.sn\:bg-\(--sn-color-text-on-primary\){background-color:var(--sn-color-text-on-primary)}.sn\:bg-canvas{background-color:var(--sn-color-bg-canvas)}.sn\:bg-danger{background-color:var(--sn-color-bg-danger)}.sn\:bg-danger-subtle{background-color:var(--sn-color-bg-danger-subtle)}.sn\:bg-inverse{background-color:var(--sn-color-bg-inverse)}.sn\:bg-overlay{background-color:var(--sn-color-bg-overlay)}.sn\:bg-primary{background-color:var(--sn-color-bg-primary)}.sn\:bg-scrim-subtle{background-color:var(--sn-color-bg-scrim-subtle)}.sn\:bg-subtle{background-color:var(--sn-color-bg-subtle)}.sn\:bg-success{background-color:var(--sn-color-bg-success)}.sn\:bg-success-subtle{background-color:var(--sn-color-bg-success-subtle)}.sn\:bg-surface{background-color:var(--sn-color-bg-surface)}.sn\:bg-transparent{background-color:#0000}.sn\:bg-warning{background-color:var(--sn-color-bg-warning)}.sn\:bg-warning-subtle{background-color:var(--sn-color-bg-warning-subtle)}.sn\:object-cover{object-fit:cover}.sn\:p-0{padding:0}.sn\:p-1{padding:var(--sn-space-1)}.sn\:p-3{padding:calc(var(--sn-space-1) * 3)}.sn\:p-4{padding:calc(var(--sn-space-1) * 4)}.sn\:p-5{padding:calc(var(--sn-space-1) * 5)}.sn\:p-6{padding:calc(var(--sn-space-1) * 6)}.sn\:p-px{padding:1px}.sn\:px-0{padding-inline:0}.sn\:px-1{padding-inline:var(--sn-space-1)}.sn\:px-2{padding-inline:calc(var(--sn-space-1) * 2)}.sn\:px-3{padding-inline:calc(var(--sn-space-1) * 3)}.sn\:px-4{padding-inline:calc(var(--sn-space-1) * 4)}.sn\:px-6{padding-inline:calc(var(--sn-space-1) * 6)}.sn\:py-0{padding-block:0}.sn\:py-1{padding-block:var(--sn-space-1)}.sn\:py-2{padding-block:calc(var(--sn-space-1) * 2)}.sn\:py-3{padding-block:calc(var(--sn-space-1) * 3)}.sn\:py-6{padding-block:calc(var(--sn-space-1) * 6)}.sn\:py-12{padding-block:calc(var(--sn-space-1) * 12)}.sn\:py-16{padding-block:calc(var(--sn-space-1) * 16)}.sn\:pt-1{padding-top:var(--sn-space-1)}.sn\:pb-4{padding-bottom:calc(var(--sn-space-1) * 4)}.sn\:pb-px{padding-bottom:1px}.sn\:text-center{text-align:center}.sn\:text-left{text-align:left}.sn\:text-right{text-align:right}.sn\:align-middle{vertical-align:middle}.sn\:align-text-bottom{vertical-align:text-bottom}.sn\:font-mono{font-family:var(--sn-font-mono)}.sn\:font-sans{font-family:var(--sn-font-sans)}.sn\:text-body{font-size:var(--sn-text-body);line-height:var(--tw-leading,var(--sn-text-body--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body--font-weight))}.sn\:text-body-strong{font-size:var(--sn-text-body-strong);line-height:var(--tw-leading,var(--sn-text-body-strong--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-body-strong--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-body-strong--font-weight))}.sn\:text-caption{font-size:var(--sn-text-caption);line-height:var(--tw-leading,var(--sn-text-caption--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-caption--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-caption--font-weight))}.sn\:text-display{font-size:var(--sn-text-display);line-height:var(--tw-leading,var(--sn-text-display--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-display--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-display--font-weight))}.sn\:text-label{font-size:var(--sn-text-label);line-height:var(--tw-leading,var(--sn-text-label--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-label--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-label--font-weight))}.sn\:text-title{font-size:var(--sn-text-title);line-height:var(--tw-leading,var(--sn-text-title--line-height));letter-spacing:var(--tw-tracking,var(--sn-text-title--letter-spacing));font-weight:var(--tw-font-weight,var(--sn-text-title--font-weight))}.sn\:whitespace-nowrap{white-space:nowrap}.sn\:text-danger{color:var(--sn-color-text-danger)}.sn\:text-default{color:var(--sn-color-text-default)}.sn\:text-inherit{color:inherit}.sn\:text-inverse{color:var(--sn-color-text-inverse)}.sn\:text-muted{color:var(--sn-color-text-muted)}.sn\:text-on-danger{color:var(--sn-color-text-on-danger)}.sn\:text-on-primary{color:var(--sn-color-text-on-primary)}.sn\:text-on-success{color:var(--sn-color-text-on-success)}.sn\:text-on-warning{color:var(--sn-color-text-on-warning)}.sn\:text-success{color:var(--sn-color-text-success)}.sn\:text-warning{color:var(--sn-color-text-warning)}.sn\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.sn\:underline{text-decoration-line:underline}.sn\:underline-offset-2{text-underline-offset:2px}.sn\:opacity-\(--sn-opacity-disabled\){opacity:var(--sn-opacity-disabled)}.sn\:opacity-0{opacity:0}.sn\:shadow-\[inset_-2px_0_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset -2px 0 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_0_-2px_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 0 -2px 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_0_2px_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 0 2px 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:shadow-\[inset_2px_0_0_var\(--sn-color-border-focus\)\]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--sn-color-border-focus));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.sn\:transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[opacity\,translate\]{transition-property:opacity,translate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[translate\,width\]{transition-property:translate,width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.sn\:duration-\(--sn-duration-fast\){--tw-duration:var(--sn-duration-fast);transition-duration:var(--sn-duration-fast)}.sn\:duration-\(--sn-duration-normal\){--tw-duration:var(--sn-duration-normal);transition-duration:var(--sn-duration-normal)}.sn\:ease-standard{--tw-ease:var(--sn-easing-standard);transition-timing-function:var(--sn-easing-standard)}.sn\:outline-none{--tw-outline-style:none;outline-style:none}.sn\:select-none{-webkit-user-select:none;user-select:none}.sn\:\[font\:inherit\]{font:inherit}@media (hover:hover){.sn\:group-hover\/head\:opacity-100:is(:where(.sn\:group\/head):hover *){opacity:1}}.sn\:group-aria-invalid\:text-danger:is(:where(.sn\:group)[aria-invalid=true] *){color:var(--sn-color-text-danger)}@media (hover:hover){.sn\:group-data-interactive\/row\:group-hover\/row\:bg-subtle:is(:where(.sn\:group\/row)[data-interactive] *):is(:where(.sn\:group\/row):hover *){background-color:var(--sn-color-bg-subtle)}}.sn\:group-data-invalid\:text-danger:is(:where(.sn\:group)[data-invalid] *){color:var(--sn-color-text-danger)}.sn\:group-data-panel-open\:rotate-180:is(:where(.sn\:group)[data-panel-open] *),.sn\:group-data-popup-open\:rotate-180:is(:where(.sn\:group)[data-popup-open] *){rotate:180deg}.sn\:group-data-selected\:border-transparent:is(:where(.sn\:group)[data-selected] *){border-color:#0000}.sn\:group-data-selected\:bg-primary:is(:where(.sn\:group)[data-selected] *){background-color:var(--sn-color-bg-primary)}.sn\:group-data-selected\/row\:bg-selected:is(:where(.sn\:group\/row)[data-selected] *){background-color:var(--sn-color-bg-selected)}.sn\:placeholder\:text-muted::placeholder{color:var(--sn-color-text-muted)}.sn\:focus-within\:opacity-100:focus-within{opacity:1}@media (hover:hover){.sn\:hover\:bg-subtle:hover{background-color:var(--sn-color-bg-subtle)}.sn\:hover\:text-default:hover{color:var(--sn-color-text-default)}.sn\:hover\:text-muted:hover{color:var(--sn-color-text-muted)}.sn\:hover\:not-disabled\:bg-subtle:hover:not(:disabled){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:border-strong:hover:not([data-disabled]){border-color:var(--sn-color-border-strong)}.sn\:hover\:not-data-disabled\:bg-primary-hover:hover:not([data-disabled]){background-color:var(--sn-color-bg-primary-hover)}.sn\:hover\:not-data-disabled\:bg-subtle:hover:not([data-disabled]){background-color:var(--sn-color-bg-subtle)}.sn\:hover\:not-data-disabled\:text-default:hover:not([data-disabled]){color:var(--sn-color-text-default)}}.sn\:focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.sn\:focus-visible\:-outline-offset-2:focus-visible{outline-offset:calc(2px * -1)}.sn\:focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.sn\:focus-visible\:outline-focus:focus-visible{outline-color:var(--sn-color-border-focus)}.sn\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.sn\:disabled\:opacity-\(--sn-opacity-disabled\):disabled{opacity:var(--sn-opacity-disabled)}.sn\:aria-invalid\:border-danger[aria-invalid=true]{border-color:var(--sn-color-border-danger)}@media (hover:hover){.sn\:hover\:aria-invalid\:border-danger:hover[aria-invalid=true]{border-color:var(--sn-color-border-danger)}}.sn\:aria-invalid\:focus-visible\:outline-danger[aria-invalid=true]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-active\:text-default[data-active]{color:var(--sn-color-text-default)}.sn\:data-checked\:translate-x-3[data-checked]{--tw-translate-x:calc(var(--sn-space-1) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-checked\:border-transparent[data-checked]{border-color:#0000}.sn\:data-checked\:bg-\(--sn-color-text-on-primary\)[data-checked]{background-color:var(--sn-color-text-on-primary)}.sn\:data-checked\:bg-primary[data-checked]{background-color:var(--sn-color-bg-primary)}.sn\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.sn\:data-disabled\:opacity-\(--sn-opacity-disabled\)[data-disabled]{opacity:var(--sn-opacity-disabled)}.sn\:data-disabled\:not-data-loading\:cursor-not-allowed[data-disabled]:not([data-loading]){cursor:not-allowed}.sn\:data-disabled\:not-data-loading\:opacity-\(--sn-opacity-disabled\)[data-disabled]:not([data-loading]){opacity:var(--sn-opacity-disabled)}.sn\:data-dragging\:border-focus[data-dragging]{border-color:var(--sn-color-border-focus)}.sn\:data-dragging\:bg-subtle[data-dragging]{background-color:var(--sn-color-bg-subtle)}.sn\:data-dragging\:bg-surface[data-dragging]{background-color:var(--sn-color-bg-surface)}.sn\:data-dragging\:outline[data-dragging],.sn\:data-dragging\:outline-1[data-dragging]{outline-style:var(--tw-outline-style);outline-width:1px}.sn\:data-dragging\:-outline-offset-1[data-dragging]{outline-offset:calc(1px * -1)}.sn\:data-dragging\:outline-default[data-dragging]{outline-color:var(--sn-color-border-default)}.sn\:data-ending-style\:h-0[data-ending-style]{height:0}.sn\:data-ending-style\:translate-y-2[data-ending-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-ending-style\:scale-98[data-ending-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-ending-style\:opacity-0[data-ending-style]{opacity:0}.sn\:data-highlighted\:bg-subtle[data-highlighted]{background-color:var(--sn-color-bg-subtle)}.sn\:data-indeterminate\:border-transparent[data-indeterminate]{border-color:#0000}.sn\:data-indeterminate\:bg-primary[data-indeterminate]{background-color:var(--sn-color-bg-primary)}@media (hover:hover){.sn\:data-interactive\:hover\:bg-subtle[data-interactive]:hover{background-color:var(--sn-color-bg-subtle)}}.sn\:data-invalid\:border-danger[data-invalid]{border-color:var(--sn-color-border-danger)}.sn\:data-invalid\:focus-visible\:outline-danger[data-invalid]:focus-visible{outline-color:var(--sn-color-border-danger)}.sn\:data-limited\:hidden[data-limited]{display:none}.sn\:data-loading\:cursor-progress[data-loading]{cursor:progress}.sn\:data-placeholder\:text-muted[data-placeholder]{color:var(--sn-color-text-muted)}.sn\:data-popup-open\:border-focus[data-popup-open]{border-color:var(--sn-color-border-focus)}.sn\:data-pressed\:border-default[data-pressed]{border-color:var(--sn-color-border-default)}.sn\:data-pressed\:bg-surface[data-pressed]{background-color:var(--sn-color-bg-surface)}.sn\:data-pressed\:text-default[data-pressed]{color:var(--sn-color-text-default)}.sn\:data-selected\:bg-selected[data-selected]{background-color:var(--sn-color-bg-selected)}.sn\:data-starting-style\:h-0[data-starting-style]{height:0}.sn\:data-starting-style\:translate-y-2[data-starting-style]{--tw-translate-y:calc(var(--sn-space-1) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.sn\:data-starting-style\:scale-98[data-starting-style]{--tw-scale-x:98%;--tw-scale-y:98%;--tw-scale-z:98%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sn\:data-starting-style\:opacity-0[data-starting-style]{opacity:0}@media (prefers-reduced-motion:reduce){.sn\:motion-reduce\:animate-none{animation:none}.sn\:motion-reduce\:transition-none{transition-property:none}}@media not all and (min-width:40rem){.sn\:max-sm\:flex-col-reverse{flex-direction:column-reverse}.sn\:max-sm\:text-\[16px\]{font-size:16px}:is(.sn\:max-sm\:\*\:h-10>*){height:calc(var(--sn-space-1) * 10)}:is(.sn\:max-sm\:\*\:w-full>*){width:100%}}@media (min-width:40rem){.sn\:sm\:flex{display:flex}.sn\:sm\:hidden{display:none}.sn\:sm\:inline{display:inline}}@starting-style{.sn\:starting\:opacity-0{opacity:0}}@media (pointer:coarse){.sn\:pointer-coarse\:hidden{display:none}.sn\:pointer-coarse\:inline{display:inline}}.sn\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.sn\:\[\&_svg\]\:size-3 svg{width:calc(var(--sn-space-1) * 3);height:calc(var(--sn-space-1) * 3)}.sn\:\[\&_svg\]\:size-4 svg{width:calc(var(--sn-space-1) * 4);height:calc(var(--sn-space-1) * 4)}.sn\:\[\&_svg\]\:size-5 svg{width:calc(var(--sn-space-1) * 5);height:calc(var(--sn-space-1) * 5)}.sn\:\[\&_svg\]\:size-6 svg{width:calc(var(--sn-space-1) * 6);height:calc(var(--sn-space-1) * 6)}.sn\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}:root{--sn-space-0:0px;--sn-space-1:4px;--sn-space-2:8px;--sn-space-3:12px;--sn-space-4:16px;--sn-space-5:20px;--sn-space-6:24px;--sn-space-7:28px;--sn-space-8:32px;--sn-space-10:40px;--sn-space-12:48px;--sn-space-16:64px;--sn-radius-sm:2px;--sn-radius-md:4px;--sn-radius-lg:6px;--sn-radius-full:9999px;--sn-stroke-default:1px;--sn-stroke-focus:2px;--sn-duration-fast:.12s;--sn-duration-normal:.2s;--sn-easing-standard:cubic-bezier(.2, 0, 0, 1);--sn-duration-loop:1s;--sn-opacity-disabled:.45;--sn-font-sans:"IBM Plex Sans KR", ui-sans-serif, system-ui, sans-serif;--sn-font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sn-text-display:32px;--sn-text-display--line-height:40px;--sn-text-display--font-weight:600;--sn-text-display--letter-spacing:-.02em;--sn-text-title:20px;--sn-text-title--line-height:28px;--sn-text-title--font-weight:600;--sn-text-title--letter-spacing:-.01em;--sn-text-body:14px;--sn-text-body--line-height:20px;--sn-text-body--font-weight:400;--sn-text-body--letter-spacing:0em;--sn-text-body-strong:14px;--sn-text-body-strong--line-height:20px;--sn-text-body-strong--font-weight:500;--sn-text-body-strong--letter-spacing:0em;--sn-text-label:13px;--sn-text-label--line-height:16px;--sn-text-label--font-weight:500;--sn-text-label--letter-spacing:0em;--sn-text-caption:12px;--sn-text-caption--line-height:16px;--sn-text-caption--font-weight:400;--sn-text-caption--letter-spacing:0em;--sn-text-mono:14px;--sn-text-mono--line-height:20px;--sn-text-mono--font-weight:400;--sn-text-mono--letter-spacing:0em;--sn-text-mono-caption:12px;--sn-text-mono-caption--line-height:16px;--sn-text-mono-caption--font-weight:400;--sn-text-mono-caption--letter-spacing:0em}:root,[data-theme=light]{color-scheme:light;--sn-color-bg-canvas:#f4f6f8;--sn-color-bg-surface:#fff;--sn-color-bg-subtle:#e6eaee;--sn-color-bg-primary:#2340d0;--sn-color-bg-primary-hover:#1b33ae;--sn-color-bg-danger:#c8312b;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#0e1216;--sn-color-text-muted:#5b6672;--sn-color-text-on-primary:#fff;--sn-color-text-on-danger:#fff;--sn-color-text-danger:#c8312b;--sn-color-border-default:#d5dbe1;--sn-color-border-strong:#8d99a6;--sn-color-border-focus:#2340d0;--sn-color-border-danger:#c8312b;--sn-color-bg-inverse:#0e1216;--sn-color-text-inverse:#fff;--sn-color-bg-success:#16804f;--sn-color-text-on-success:#fff;--sn-color-bg-success-subtle:#eaf7f0;--sn-color-text-success:#0f6640;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#fcf5e6;--sn-color-text-warning:#85520a;--sn-color-bg-danger-subtle:#fcedec;--sn-color-border-success:#16804f;--sn-color-border-warning:#a86c12;--sn-color-bg-selected:#eef1ff;--sn-color-bg-scrim-subtle:#fff9}[data-theme=dark]{color-scheme:dark;--sn-color-bg-canvas:#0e1216;--sn-color-bg-surface:#161b21;--sn-color-bg-subtle:#1e252d;--sn-color-bg-primary:#6e86ff;--sn-color-bg-primary-hover:#8c9fff;--sn-color-bg-danger:#f06a5f;--sn-color-bg-overlay:#0e121680;--sn-color-text-default:#e6eaee;--sn-color-text-muted:#8d99a6;--sn-color-text-on-primary:#0e1216;--sn-color-text-on-danger:#0e1216;--sn-color-text-danger:#f06a5f;--sn-color-border-default:#2a323b;--sn-color-border-strong:#5b6672;--sn-color-border-focus:#6e86ff;--sn-color-border-danger:#f06a5f;--sn-color-bg-inverse:#e6eaee;--sn-color-text-inverse:#0e1216;--sn-color-bg-success:#3db882;--sn-color-text-on-success:#0e1216;--sn-color-bg-success-subtle:#0b2218;--sn-color-text-success:#6bd1a0;--sn-color-bg-warning:#e3a43a;--sn-color-text-on-warning:#0e1216;--sn-color-bg-warning-subtle:#24190a;--sn-color-text-warning:#eec46a;--sn-color-bg-danger-subtle:#2b1311;--sn-color-border-success:#3db882;--sn-color-border-warning:#e3a43a;--sn-color-bg-selected:#18214d;--sn-color-bg-scrim-subtle:#161b2199}@keyframes sn-pulse{50%{opacity:.5}}@keyframes sn-spin{to{transform:rotate(360deg)}}}

package/dist/tailwind.css

@@ -70,4 +70,5 @@
   --border-color-warning: var(--sn-color-border-warning);
   --outline-color-warning: var(--sn-color-border-warning);
   --background-color-selected: var(--sn-color-bg-selected);
+  --background-color-scrim-subtle: var(--sn-color-bg-scrim-subtle);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xonic0506/sonic-ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Figma-first personal design system (Base UI + Tailwind v4, prebuilt CSS)",
   "license": "MIT",
   "repository": {