sellmate-design-system-react 9.0.0-beta.93 → 9.0.0-beta.95

package/dist/index.cjs

@@ -3724,16 +3724,21 @@ var SIcon = /* @__PURE__ */ react.forwardRef(function SIcon2({ name, size = 24,
   const Svg = ICONS[name];
   if (!Svg) return null;
   const rotateClass = rotate ? { 90: "rotate-90", 180: "rotate-180", 270: "-rotate-90" }[rotate] : void 0;
+  const cssSize = typeof size === "string" && /var\(|calc\(/.test(size);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       ref,
       className: cn("inline-flex items-center justify-center", rotateClass, className),
-      style: { color: resolveColor(color), ...style },
+      style: {
+        color: resolveColor(color),
+        ...cssSize && { width: size, height: size },
+        ...style
+      },
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { size })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { size: cssSize ? "100%" : size })
     }
   );
 });
@@ -4136,7 +4141,7 @@ var SBadge = /* @__PURE__ */ react.forwardRef(function SBadge2({ color = "blue",
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("inline-flex items-center justify-center", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: "rounded-full",
+      className: "rounded-(--cmp-badge-radius)",
       style: {
         width: "var(--cmp-badge-size, 6px)",
         height: "var(--cmp-badge-size, 6px)",
@@ -4203,7 +4208,8 @@ var BUTTON_SIZE_CONFIG = {
     height: "var(--cmp-button-xs-height)",
     paddingX: "var(--cmp-button-xs-paddingX)",
     gap: "var(--cmp-button-xs-gap)",
-    iconSize: 12,
+    iconSize: "var(--cmp-button-xs-icon)",
+    iconOnlyWidth: "var(--cmp-button-iconOnly-xs-width)",
     fontSize: 12,
     fontWeight: 500,
     radius: "var(--cmp-button-radius-sm)",
@@ -4213,7 +4219,8 @@ var BUTTON_SIZE_CONFIG = {
     height: "var(--cmp-button-sm-height)",
     paddingX: "var(--cmp-button-sm-paddingX)",
     gap: "var(--cmp-button-sm-gap)",
-    iconSize: 16,
+    iconSize: "var(--cmp-button-sm-icon)",
+    iconOnlyWidth: "var(--cmp-button-iconOnly-sm-width)",
     fontSize: 12,
     fontWeight: 500,
     radius: "var(--cmp-button-radius-sm)",
@@ -4223,7 +4230,8 @@ var BUTTON_SIZE_CONFIG = {
     height: "var(--cmp-button-md-height)",
     paddingX: "var(--cmp-button-md-paddingX)",
     gap: "var(--cmp-button-md-gap)",
-    iconSize: 20,
+    iconSize: "var(--cmp-button-md-icon)",
+    iconOnlyWidth: "var(--cmp-button-iconOnly-md-width)",
     fontSize: 16,
     fontWeight: 500,
     radius: "var(--cmp-button-radius-md)",
@@ -4233,7 +4241,8 @@ var BUTTON_SIZE_CONFIG = {
     height: "var(--cmp-button-lg-height)",
     paddingX: "var(--cmp-button-lg-paddingX)",
     gap: "var(--cmp-button-lg-gap)",
-    iconSize: 24,
+    iconSize: "var(--cmp-button-lg-icon)",
+    iconOnlyWidth: "var(--cmp-button-iconOnly-lg-width)",
     fontSize: 18,
     fontWeight: 500,
     radius: "var(--cmp-button-radius-md)",
@@ -4280,7 +4289,7 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
     "--btn-border": disabled ? BUTTON_DISABLED_BORDER : preset.border,
     "--btn-ring": BUTTON_FOCUS_RING,
     "minHeight": s.height,
-    "minWidth": iconOnly ? s.height : hasLabel ? s.minWidth : void 0,
+    "minWidth": iconOnly ? s.iconOnlyWidth : hasLabel ? s.minWidth : void 0,
     "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
     "borderRadius": s.radius,
     "gap": s.gap,
@@ -4297,7 +4306,7 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
       disabled,
       "aria-label": ariaLabel,
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap border border-solid leading-none transition-colors",
+        "inline-flex items-center justify-center whitespace-nowrap border-[length:var(--cmp-button-border-width-default)] border-solid leading-none transition-colors",
         "border-[color:var(--btn-border)] bg-[var(--btn-bg)]",
         "outline-none focus-visible:shadow-[0_0_0_2px_var(--btn-ring)]",
         disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-[var(--btn-bg-hover)]",
@@ -4415,34 +4424,28 @@ var TAG_COLORS = [
 ];
 var TAG_SIZE_CONFIG = {
   xs: {
-    height: 20,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 12,
-    fontSize: 11,
-    fontWeight: 500,
-    lineHeight: 18
+    height: "var(--cmp-tag-xs-height)",
+    paddingX: "var(--cmp-tag-xs-paddingX)",
+    gap: "var(--cmp-tag-xs-gap)",
+    radius: "var(--cmp-tag-xs-radius)",
+    iconSize: "var(--cmp-tag-xs-icon)",
+    typography: "typo-feedback-xs"
   },
   sm: {
-    height: 24,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 16,
-    fontSize: 12,
-    fontWeight: 600,
-    lineHeight: 20
+    height: "var(--cmp-tag-sm-height)",
+    paddingX: "var(--cmp-tag-sm-paddingX)",
+    gap: "var(--cmp-tag-sm-gap)",
+    radius: "var(--cmp-tag-sm-radius)",
+    iconSize: "var(--cmp-tag-sm-icon)",
+    typography: "typo-feedback-sm-semibold"
   },
   md: {
-    height: 28,
-    paddingX: 12,
-    gap: 6,
-    radius: 8,
-    iconSize: 16,
-    fontSize: 14,
-    fontWeight: 700,
-    lineHeight: 24
+    height: "var(--cmp-tag-md-height)",
+    paddingX: "var(--cmp-tag-md-paddingX)",
+    gap: "var(--cmp-tag-md-gap)",
+    radius: "var(--cmp-tag-md-radius)",
+    iconSize: "var(--cmp-tag-md-icon)",
+    typography: "typo-feedback-md-bold"
   }
 };
 var STag = /* @__PURE__ */ react.forwardRef(function STag2({
@@ -4470,16 +4473,14 @@ var STag = /* @__PURE__ */ react.forwardRef(function STag2({
       "aria-label": label || "tag",
       className: cn(
         "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
+        s.typography,
         className
       ),
       style: {
         minHeight: s.height,
-        padding: `0 ${s.paddingX}px`,
+        padding: `0 ${s.paddingX}`,
         gap: s.gap,
         borderRadius: shape === "pill" ? 999 : s.radius,
-        fontSize: s.fontSize,
-        fontWeight: s.fontWeight,
-        lineHeight: `${s.lineHeight}px`,
         background: bgColor,
         color: contentColor,
         ...resolvedWidth != null ? { width: resolvedWidth } : {},
@@ -4499,11 +4500,11 @@ var STag = /* @__PURE__ */ react.forwardRef(function STag2({
   );
 });
 var SIZE = {
-  xxs: { icon: 12, radius: "sm" },
-  xs: { icon: 16, radius: "sm" },
-  sm: { icon: 20, radius: "sm" },
-  md: { icon: 24, radius: "md" },
-  lg: { icon: 32, radius: "md" }
+  xxs: { icon: "var(--cmp-ghostButton-xxs-icon)", radius: "sm" },
+  xs: { icon: "var(--cmp-ghostButton-xs-icon)", radius: "sm" },
+  sm: { icon: "var(--cmp-ghostButton-sm-icon)", radius: "sm" },
+  md: { icon: "var(--cmp-ghostButton-md-icon)", radius: "md" },
+  lg: { icon: "var(--cmp-ghostButton-lg-icon)", radius: "md" }
 };
 var TOOLTIP_HIDE_DELAY_MS = 100;
 var SGhostButton = /* @__PURE__ */ react.forwardRef(function SGhostButton2({
@@ -4578,7 +4579,7 @@ var SGhostButton = /* @__PURE__ */ react.forwardRef(function SGhostButton2({
       "span",
       {
         "aria-hidden": true,
-        className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-5",
+        className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-(--cmp-ghostButton-hover-opacity)",
         style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
       }
     ),
@@ -4802,7 +4803,9 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...restContentProps
   } = contentProps ?? {};
   const contentClass = cn(
-    "z-50 w-fit max-w-[var(--radix-popover-content-available-width)] rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
+    "z-50 w-fit max-w-[var(--radix-popover-content-available-width)] rounded-(--cmp-tooltip-radius) px-(--cmp-tooltip-paddingX) py-(--cmp-tooltip-paddingY) shadow-normal-sm",
+    // default 500, danger/warning/accent 700 — tooltip.<type>.typography
+    tooltipType === "default" ? "typo-feedback-sm-medium" : "typo-feedback-sm-bold",
     FLOATING_SLIDE_ANIM,
     className,
     contentPropsClassName
@@ -4810,7 +4813,6 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
   const contentStyle = {
     background: bg,
     color: fg,
-    fontWeight: tooltipType === "default" ? 500 : 700,
     ...style,
     ...contentPropsStyle
   };
@@ -4851,7 +4853,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
         onMouseLeave: isHover ? startHide : void 0,
         ...restContentProps,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-(--cmp-tooltip-gap)", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
             showClose && !isNone && /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,
@@ -4906,16 +4908,20 @@ var FIELD_SIZE = {
     height: 28,
     radius: 4,
     fieldGap: 12,
-    labelGap: 6,
+    labelHeight: "var(--cmp-field-label-sm-height)",
+    labelGap: "var(--cmp-field-label-sm-gap)",
     labelTypo: "typo-field-sm-bold",
+    labelIcon: "var(--cmp-field-label-sm-icon)",
     icon: 16
   },
   md: {
     height: 36,
     radius: 6,
     fieldGap: 16,
-    labelGap: 8,
+    labelHeight: "var(--cmp-field-label-md-height)",
+    labelGap: "var(--cmp-field-label-md-gap)",
     labelTypo: "typo-field-md-bold",
+    labelIcon: "var(--cmp-field-label-md-icon)",
     icon: 16
   }
 };
@@ -5042,7 +5048,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                   // 라벨과 컨트롤 사이가 간격 토큰보다 넓어진다. 줄 세우기용 labelWidth 도
                   // 뜻이 없다(아래에 컨트롤이 제 폭으로 선다).
                   ...labelOnTop ? {} : {
-                    height: cssLen(labelHeight) ?? s.height,
+                    height: cssLen(labelHeight) ?? s.labelHeight,
                     marginRight: s.fieldGap,
                     width: cssLen(labelWidth)
                   }
@@ -5052,7 +5058,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                     SIcon,
                     {
                       name: icon,
-                      size: s.icon,
+                      size: s.labelIcon,
                       color: iconColor,
                       style: { marginRight: s.labelGap }
                     }
@@ -5132,7 +5138,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                         effectiveAddonLabel !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
-                            className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-sd-20",
+                            className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r-(length:--cmp-field-addonLabel-border-width) border-solid px-(--cmp-field-addonLabel-paddingX) typo-field-sm-medium",
                             style: {
                               // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
                               width: cssLen(labelWidth),
@@ -5152,7 +5158,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                       ]
                     }
                   ),
-                  showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-hint-color)", children: hint }) : null
+                  showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) typo-field-sm-default text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) typo-field-sm-default text-(--cmp-field-hint-color)", children: hint }) : null
                 ]
               }
             )
@@ -5479,8 +5485,8 @@ var CHAT_ATTACHED_FILE_CONFIG = {
   contentGap: "gap-(--cmp-chatAttachedFile-content-gap)",
   /** 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다) */
   tile: "p-(--cmp-chatAttachedFile-icon-wrapper-padding) rounded-(--cmp-chatAttachedFile-icon-wrapper-radius) bg-(--cmp-chatAttachedFile-icon-wrapper-bg)",
-  /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
-  iconSize: 16,
+  /** 칩 안 클립 아이콘 크기 */
+  iconSize: "var(--cmp-chatAttachedFile-icon-size)",
   /** 파일명 타이포 프리셋 */
   nameTypo: "typo-body-sm-default",
   /** 파일명 텍스트색 */
@@ -5558,8 +5564,8 @@ var CHAT_FILE_CONFIG = {
    * 디자인팀에 `icon.wrapper.bg.hover` 를 요청해 나오는 대로 갈아끼운다.
    */
   tile: "p-(--cmp-chatFile-icon-wrapper-padding) rounded-(--cmp-chatFile-icon-wrapper-radius) bg-(--cmp-chatFile-icon-wrapper-bg) group-hover/chat-file:bg-(--sys-color-bg-frame)",
-  /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
-  iconSize: 20,
+  /** 칩 안 클립 아이콘 크기 */
+  iconSize: "var(--cmp-chatFile-icon-size)",
   /** 파일명 타이포 프리셋 */
   nameTypo: "typo-body-md-bold",
   /** 파일명·부가정보 텍스트색 */
@@ -5912,7 +5918,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
           paddingYClass,
           // 항목 사이 구분선은 리스트가 그린다.
           bordered && cn(
-            "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
+            "rounded-(--cmp-listDraggableItem-radius-bordered) border-(length:--cmp-listDraggableItem-border-width-default) border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && cn(
               "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
               "[[data-drag-active]_&]:hover:border-(--cmp-listDraggableItem-border-default)"
@@ -6784,7 +6790,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
           "gap-(--cmp-listExpansionItem-title-gap)",
           // 헤더 액션이 있으면 오른쪽 끝 여백은 액션 칸이 갖고, 버튼은 액션과의 간격만 남긴다
           hasHeaderAction ? "pr-(--cmp-listExpansionItem-title-gap)" : "pr-(--cmp-listExpansionItem-title-paddingX)",
-          depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
+          depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-(--cmp-listExpansionItem-title-paddingX)",
           isExpanded && "text-(--cmp-listExpansionItem-title-text-expanded)"
         ),
         children: [
@@ -6795,7 +6801,14 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
                 "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
                 isExpanded && "rotate-180"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: 12, color: "var(--sys-color-fg-quaternary)" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "caretDown",
+                  size: "var(--cmp-listExpansionItem-title-icon)",
+                  color: "var(--sys-color-fg-quaternary)"
+                }
+              )
             }
           ),
           leadingNode,
@@ -6833,10 +6846,9 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
           // 항목 사이 구분선은 리스트가 그린다.
-          // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
-          // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
-          bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
-          bordered && isExpanded && "!border-border-accentLight",
+          // 보더 색: 기본 → hover → 펼침 순으로 listExpansionItem.border 토큰을 쓴다.
+          bordered && "rounded-(--cmp-listExpansionItem-bordered-radius) border border-(--cmp-listExpansionItem-border-default) hover:border-(--cmp-listExpansionItem-border-hover) [&:has(>button:hover)]:border-(--cmp-listExpansionItem-border-hover)",
+          bordered && isExpanded && "!border-(--cmp-listExpansionItem-border-expanded)",
           className
         ),
         ...rest,
@@ -6845,7 +6857,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 z-[1] w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 z-[1] w-(--cmp-listExpansionItem-accentStripe-width) bg-(--cmp-listExpansionItem-accentStripe-color)"
             }
           ),
           hasHeaderAction ? (
@@ -6952,9 +6964,9 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
         dense ? "py-(--cmp-listItem-paddingY-dense)" : "py-(--cmp-listItem-paddingY-normal)",
         "gap-(--cmp-listItem-gap)",
         "pr-(--cmp-listItem-paddingX)",
-        depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
+        depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-(--cmp-listItem-paddingX)",
         bordered && cn(
-          "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default)",
+          "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border-(length:--cmp-listItem-border-width-default) border-(--cmp-listItem-border-default)",
           isSelected ? "border-(--cmp-listItem-bordered-border-selected)" : isInteractive && "hover:border-(--cmp-listItem-bordered-border-hover)"
         ),
         className
@@ -7644,7 +7656,7 @@ function SCheckbox({
   };
   const boxBg = disabled ? "var(--cmp-checkbox-bg-disabled)" : inverse ? "transparent" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-bg-default)";
   const boxBorder = disabled ? "var(--cmp-checkbox-border-disabled)" : inverse ? "var(--cmp-checkbox-checked-border-inverse)" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-border-default)";
-  const iconColor = disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)";
+  const iconColor = disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : inverse ? "var(--cmp-checkbox-checked-icon-inverse)" : "var(--cmp-checkbox-checked-icon-default)";
   const labelColor = disabled ? "var(--cmp-checkbox-label-disabled)" : inverse ? "var(--cmp-checkbox-label-inverse)" : "var(--cmp-checkbox-label-default)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
@@ -7673,7 +7685,7 @@ function SCheckbox({
               SIcon,
               {
                 name: state2 === "indeterminate" ? "checkboxIndeterminate" : "checkboxCheck",
-                size: 12,
+                size: "var(--cmp-checkbox-icon)",
                 color: iconColor
               }
             ) })
@@ -7685,11 +7697,19 @@ function SCheckbox({
         // 찌그러진다 — 띄어쓰기에서만 끊고, 끊을 자리가 없는 긴 토큰만 흘려보낸다
         // (SRadio·SSwitch 라벨과 같은 규칙). 두 사본에 함께 걸려야 하므로 바깥 grid 에 준다.
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid break-keep wrap-break-word", style: { color: labelColor }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "typo-body-sm-medium invisible", style: { gridArea: "1 / 1" }, children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: isChecked ? "typo-body-sm-medium" : "typo-body-sm-default",
+              "aria-hidden": true,
+              className: "typo-field-sm-medium invisible",
+              style: { gridArea: "1 / 1" },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: isChecked ? "typo-field-sm-medium" : "typo-field-sm-default",
               style: { gridArea: "1 / 1" },
               children: label
             }
@@ -7701,18 +7721,25 @@ function SCheckbox({
 }
 var TREE_LABEL_TYPOGRAPHY = {
   sm: {
-    default: "typo-body-sm-medium",
-    selected: "typo-body-sm-bold",
+    default: "typo-item-sm-default",
+    selected: "typo-item-sm-selected",
     rowHeight: "h-[28px]"
   },
   md: {
-    default: "typo-body-md-medium",
-    selected: "typo-body-md-bold",
+    default: "typo-item-md-default",
+    selected: "typo-item-md-selected",
     rowHeight: "h-[32px]"
   }
 };
+var TREE_BRANCH_MOTION = { duration: 200, easing: "cubic-bezier(0, 0, 0.2, 1)" };
+function canAnimateTreeBranch() {
+  if (typeof window === "undefined" || typeof HTMLElement.prototype.animate !== "function") {
+    return false;
+  }
+  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
 var TREE_ROW_CLASS = "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)";
-var TREE_ROW_BORDER_CLASS = "border-b border-(--cmp-tree-item-border-default)";
+var TREE_ROW_BORDER_CLASS = "border-b-(length:--cmp-tree-item-border-width-default) border-(--cmp-tree-item-border-default)";
 var TREE_ROW_ACTIVE_CLASS = "bg-(--cmp-tree-item-bg-hover)";
 var TREE_CONTENT_CLASS = "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)";
 function treeLabelClass(size, {
@@ -7722,12 +7749,49 @@ function treeLabelClass(size, {
 }) {
   const typography = TREE_LABEL_TYPOGRAPHY[size];
   return cn(
-    "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+    "block min-w-0 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
     emphasized ? typography.selected : typography.default,
     disabled && "opacity-60",
-    disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
+    disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0,
+    selectable && !disabled && "group-hover/tree-label:underline"
+  );
+}
+function TreeSelectZone({
+  selectable,
+  disabled = false,
+  control,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-tree-label": true,
+      className: cn(
+        "flex min-w-0 items-center gap-(--cmp-tree-item-contentGap)",
+        selectable && (disabled ? "cursor-not-allowed" : "group/tree-label cursor-pointer")
+      ),
+      children: [
+        control,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-sd-8", children: [
+          children,
+          selectable && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            SIcon,
+            {
+              name: "chevronRight",
+              size: 12,
+              color: "var(--sys-color-fg-quaternary)",
+              className: "hidden shrink-0 group-hover/tree-label:inline-flex"
+            }
+          )
+        ] })
+      ]
+    }
   );
 }
+function isRowSelectClick(event) {
+  const zone = event.target.closest("[data-tree-label]");
+  return zone != null && event.currentTarget.contains(zone);
+}
 function isRowControlClick(event) {
   const control = event.target.closest("[data-tree-control]");
   return control != null && event.currentTarget.contains(control);
@@ -7961,7 +8025,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   };
   const handleRowClick = (event) => {
     if (isRowControlClick(event)) return;
-    if (selectable && event.target.closest("[data-tree-label]")) {
+    if (selectable && isRowSelectClick(event)) {
       handleSelect(event);
       return;
     }
@@ -8002,35 +8066,41 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TREE_CONTENT_CLASS, children: [
           hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(TreeCaret, { expanded, onToggle: (event) => onToggle?.(node, event) }) : /* @__PURE__ */ jsxRuntime.jsx(TreeCaretSpacer, {}),
           leadingNode,
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TreeSelectZone,
             {
-              "data-tree-control": true,
-              className: "flex shrink-0",
-              "aria-hidden": node.disabled ? "true" : void 0,
+              selectable,
+              disabled: node.disabled,
+              control: selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-tree-control": true,
+                  className: "flex shrink-0",
+                  "aria-hidden": node.disabled ? "true" : void 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SCheckbox,
+                    {
+                      value: checkboxValue,
+                      disabled: node.disabled,
+                      onValueChange: () => handleSelect()
+                    }
+                  )
+                }
+              ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                SCheckbox,
+                "span",
                 {
-                  value: checkboxValue,
-                  disabled: node.disabled,
-                  onValueChange: () => handleSelect()
+                  className: treeLabelClass(size, {
+                    emphasized: selected || indeterminate,
+                    disabled: Boolean(node.disabled),
+                    selectable
+                  }),
+                  children: node.label
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "data-tree-label": true,
-              className: treeLabelClass(size, {
-                emphasized: selected || indeterminate,
-                disabled: Boolean(node.disabled),
-                selectable
-              }),
-              children: node.label
-            }
-          ),
-          trailingNode
+          trailingNode != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex shrink-0", children: trailingNode })
         ] })
       ]
     }
@@ -8308,7 +8378,7 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
                 "span",
                 {
                   className: cn(
-                    "min-w-0 truncate text-(--sys-color-fg-brand)",
+                    "min-w-0 truncate text-(--cmp-sectionHeaderCard-title-color)",
                     titleSizeClass[titleSize]
                   ),
                   children: title
@@ -8318,7 +8388,7 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
                 SIcon,
                 {
                   name: "asterisk",
-                  size: 16,
+                  size: "var(--cmp-sectionHeaderCard-required-icon)",
                   color: "var(--sys-color-fg-accent)",
                   className: "shrink-0"
                 }
@@ -8335,7 +8405,7 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
                 }
               )
             ] }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-[12px] font-normal leading-[20px] text-(--sys-color-fg-secondary)", children: subtitle }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate typo-body-sm-default text-(--cmp-sectionHeaderCard-subtitle-color)", children: subtitle }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex min-h-sd-6 min-w-0 flex-1 items-center justify-end", children: slot })
           ]
         }
@@ -8371,7 +8441,7 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
       {
         ref,
         className: cn(
-          "box-border flex w-full flex-col items-stretch overflow-hidden rounded-[8px] border border-(--sys-color-border-default) bg-(--sys-color-bg-frame)",
+          "box-border flex w-full flex-col items-stretch overflow-hidden rounded-(--cmp-sectionHeaderCard-radius) border border-(--cmp-sectionHeaderCard-border) bg-(--cmp-sectionHeaderCard-body-bg)",
           className
         ),
         ...rest,
@@ -8923,18 +8993,25 @@ var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "def
         hasDangerTitle && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex shrink-0 flex-col items-center justify-center gap-[var(--cmp-callout-danger-title-gap)] px-[var(--cmp-callout-danger-title-paddingX)] py-[8px] text-[16px] font-bold leading-[26px]",
+            className: "typo-heading-md flex shrink-0 flex-col items-center justify-center gap-[var(--cmp-callout-danger-title-gap)] px-[var(--cmp-callout-danger-title-paddingX)] py-[8px]",
             style: {
               background: "var(--cmp-callout-danger-title-bg)",
               color: "var(--cmp-callout-danger-title-color)"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "warningFill", size: 24, color: "var(--cmp-callout-danger-title-color)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "warningFill",
+                  size: "var(--cmp-callout-danger-title-icon)",
+                  color: "var(--cmp-callout-danger-title-color)"
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: DANGER_TITLE_LABEL })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-[var(--cmp-callout-body-gap)] px-[var(--cmp-callout-body-paddingX)] py-[var(--cmp-callout-body-paddingY)] text-[12px] font-normal leading-[20px]", children: children ?? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col justify-center gap-[var(--cmp-callout-body-gap)] p-0", children: renderItems(message) }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-[var(--cmp-callout-body-gap)] px-[var(--cmp-callout-body-paddingX)] py-[var(--cmp-callout-body-paddingY)] typo-feedback-sm-regular", children: children ?? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col justify-center gap-[var(--cmp-callout-body-gap)] p-0", children: renderItems(message) }) })
       ]
     }
   );
@@ -9005,7 +9082,7 @@ var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({ i
             className: "shrink-0"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col text-[12px] font-normal leading-[20px] text-[color:var(--cmp-contextAlert-content)]", children: messages.map((m, i) => (
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col typo-feedback-sm-regular text-[color:var(--cmp-contextAlert-content)]", children: messages.map((m, i) => (
           // 메시지는 HTML 문자열을 허용하되, sanitizeInlineHtml 로 살균 후 innerHTML 렌더 (XSS 방어)
           /* @__PURE__ */ jsxRuntime.jsx(
             "p",
@@ -9250,20 +9327,20 @@ var loading = {
 };
 var SIZE_CONFIG = {
   sm: {
-    gap: 4,
-    iconSize: 16,
+    gap: "var(--cmp-textLink-sm-gap)",
+    iconSize: "var(--cmp-textLink-sm-icon)",
     typo: "typo-control-xs-medium",
     underlineTypo: "typo-control-xs-underline"
   },
   md: {
-    gap: 8,
-    iconSize: 16,
+    gap: "var(--cmp-textLink-md-gap)",
+    iconSize: "var(--cmp-textLink-md-icon)",
     typo: "typo-control-sm-default",
     underlineTypo: "typo-control-sm-underline"
   },
   lg: {
-    gap: 8,
-    iconSize: 20,
+    gap: "var(--cmp-textLink-lg-gap)",
+    iconSize: "var(--cmp-textLink-lg-icon)",
     typo: "typo-control-md-default",
     underlineTypo: "typo-control-md-underline"
   }
@@ -9325,15 +9402,23 @@ var STextLink = /* @__PURE__ */ react.forwardRef(function STextLink2({
             children: label || children
           }
         ),
-        rightArrow !== "none" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SIcon,
+        rightArrow !== "none" && // 화살표 칸은 좌측 아이콘과 같은 크기다(textLink.<size>.icon 이 leadingIcon·trailingArrow 공유)
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            name: rightArrow === "chevron" ? "chevronRight" : "caretRight",
-            size: 12,
-            color: disabled ? "var(--cmp-textLink-icon-disabled)" : "var(--color-grey-65)",
-            rotate: rightArrowRotate
+            className: "inline-flex items-center justify-center",
+            style: { width: s.iconSize, height: s.iconSize },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SIcon,
+              {
+                name: rightArrow === "chevron" ? "chevronRight" : "caretRight",
+                size: 12,
+                color: disabled ? "var(--cmp-textLink-icon-disabled)" : "var(--color-grey-65)",
+                rotate: rightArrowRotate
+              }
+            )
           }
-        ) })
+        )
       ]
     }
   );
@@ -9406,24 +9491,38 @@ function DropdownMenuContent({
   ) });
 }
 var SIZE2 = {
-  xs: { height: 24, paddingX: 8, gap: 6, arrow: 12, fontSize: 12, minWidth: 64, splitMinWidth: 72 },
+  xs: {
+    height: "var(--cmp-button-xs-height)",
+    paddingX: "var(--cmp-button-xs-paddingX)",
+    gap: "var(--cmp-button-dropdown-xs-gap)",
+    arrow: "var(--cmp-button-dropdown-xs-arrow)",
+    toggleWidth: "var(--cmp-button-iconOnly-xs-width)",
+    fontSize: 12,
+    minWidth: 64,
+    splitMinWidth: 72,
+    radius: "var(--cmp-button-radius-sm)"
+  },
   sm: {
-    height: 28,
-    paddingX: 12,
-    gap: 8,
-    arrow: 12,
+    height: "var(--cmp-button-sm-height)",
+    paddingX: "var(--cmp-button-sm-paddingX)",
+    gap: "var(--cmp-button-dropdown-sm-gap)",
+    arrow: "var(--cmp-button-dropdown-sm-arrow)",
+    toggleWidth: "var(--cmp-button-iconOnly-sm-width)",
     fontSize: 12,
     minWidth: 72,
-    splitMinWidth: 88
+    splitMinWidth: 88,
+    radius: "var(--cmp-button-radius-sm)"
   },
   md: {
-    height: 36,
-    paddingX: 20,
-    gap: 16,
-    arrow: 16,
+    height: "var(--cmp-button-md-height)",
+    paddingX: "var(--cmp-button-md-paddingX)",
+    gap: "var(--cmp-button-dropdown-md-gap)",
+    arrow: "var(--cmp-button-dropdown-md-arrow)",
+    toggleWidth: "var(--cmp-button-iconOnly-md-width)",
     fontSize: 16,
     minWidth: 100,
-    splitMinWidth: 106
+    splitMinWidth: 106,
+    radius: "var(--cmp-button-radius-md)"
   }
 };
 function splitDivider(color, outline) {
@@ -9505,7 +9604,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
     );
     const splitIcon = /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "etc", size: s.arrow, color: "var(--dd-icon)" });
     const triggerBase = cn(
-      "box-border inline-flex items-center whitespace-nowrap border border-solid outline-none transition-colors",
+      "box-border inline-flex items-center whitespace-nowrap border-[length:var(--cmp-button-border-width-default)] border-solid outline-none transition-colors",
       "border-[color:var(--dd-border)] bg-[var(--dd-bg)] text-[color:var(--dd-text)]",
       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-[var(--dd-bg-hover)]"
     );
@@ -9544,10 +9643,12 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
                     type: "button",
                     disabled,
                     onClick: onLabelClick,
-                    className: cn(triggerBase, "flex-1 justify-center rounded-l-[4px] border-r-0"),
+                    className: cn(triggerBase, "flex-1 justify-center border-r-0"),
                     style: {
+                      borderTopLeftRadius: s.radius,
+                      borderBottomLeftRadius: s.radius,
                       minHeight: s.height,
-                      padding: `0 ${s.paddingX}px`,
+                      padding: `0 ${s.paddingX}`,
                       fontSize: s.fontSize,
                       ...colorVars
                     },
@@ -9561,10 +9662,15 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
                     type: "button",
                     disabled,
                     "aria-label": "\uBA54\uB274 \uC5F4\uAE30",
-                    className: cn(triggerBase, "justify-center rounded-r-[4px] border-l"),
+                    className: cn(
+                      triggerBase,
+                      "justify-center border-l-[length:var(--cmp-button-border-width-default)]"
+                    ),
                     style: {
+                      borderTopRightRadius: s.radius,
+                      borderBottomRightRadius: s.radius,
                       minHeight: s.height,
-                      minWidth: s.height,
+                      minWidth: s.toggleWidth,
                       borderLeftColor: disabled ? "var(--cmp-button-border-disabled)" : splitDivider(color, outline),
                       ...colorVars
                     },
@@ -9578,11 +9684,12 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
             {
               type: "button",
               disabled,
-              className: cn(triggerBase, "justify-between rounded-[4px]", className),
+              className: cn(triggerBase, "justify-between rounded-(--dd-radius)", className),
               style: {
+                ...{ "--dd-radius": s.radius },
                 minWidth: s.minWidth,
                 minHeight: s.height,
-                padding: `0 ${s.paddingX}px`,
+                padding: `0 ${s.paddingX}`,
                 gap: s.gap,
                 fontSize: s.fontSize,
                 ...colorVars,
@@ -9692,13 +9799,13 @@ function SSwitch({
   style
 }) {
   const right = rightLabel;
-  const renderLabel = (text) => text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-medium break-keep wrap-break-word", children: text }) : null;
+  const renderLabel = (text) => text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-field-sm-medium break-keep wrap-break-word", children: text }) : null;
   const trackBg = disabled ? value ? "var(--cmp-switch-bg-disabled-on)" : "var(--cmp-switch-bg-disabled-off)" : value ? "var(--cmp-switch-bg-on)" : "var(--cmp-switch-bg-off)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
       className: cn(
-        "inline-flex items-center gap-[6px]",
+        "inline-flex items-center gap-(--cmp-switch-gap)",
         disabled ? "cursor-not-allowed" : "cursor-pointer",
         className
       ),
@@ -9712,14 +9819,14 @@ function SSwitch({
             disabled,
             onCheckedChange: (v) => onValueChange?.(v),
             className: cn(
-              "relative h-[20px] w-[32px] flex-shrink-0 rounded-full p-[2px] outline-none transition-colors duration-200",
+              "relative h-(--cmp-switch-height) w-(--cmp-switch-width) flex-shrink-0 rounded-(--cmp-switch-radius) p-(--cmp-switch-paddingXY) outline-none transition-colors duration-200",
               disabled ? "cursor-not-allowed" : "cursor-pointer"
             ),
             style: { background: trackBg },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               RSwitch__namespace.Thumb,
               {
-                className: "block h-[16px] w-[16px] rounded-full shadow-[0_2px_4px_rgba(0,0,0,0.16)] transition-transform duration-200 data-[state=checked]:translate-x-[12px]",
+                className: "block h-(--cmp-switch-knob-size) w-(--cmp-switch-knob-size) rounded-full shadow-[0_2px_4px_rgba(0,0,0,0.16)] transition-transform duration-200 data-[state=checked]:translate-x-[calc(var(--cmp-switch-width)_-_var(--cmp-switch-knob-size)_-_var(--cmp-switch-paddingXY)_*_2)]",
                 style: {
                   background: disabled ? "var(--cmp-switch-knob-disabled)" : "var(--cmp-switch-knob-default)"
                 }
@@ -10447,8 +10554,8 @@ var SSystemActionButton = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SIZE_CLASSES = {
-  xs: "h-[24px] px-[8px] text-[12px] font-normal leading-[20px]",
-  sm: "h-[28px] px-[12px] text-[14px] font-medium leading-[24px]"
+  xs: "h-(--cmp-toggle-xs-height) px-(--cmp-toggle-xs-paddingX) typo-control-xs-default",
+  sm: "h-(--cmp-toggle-sm-height) px-(--cmp-toggle-sm-paddingX) typo-control-sm-default"
 };
 function SToggle({
   value = false,
@@ -10470,7 +10577,7 @@ function SToggle({
       "aria-pressed": value,
       onClick: () => !disabled && onValueChange?.(!value),
       className: cn(
-        "box-border inline-flex items-center justify-center whitespace-nowrap rounded-full border border-solid transition-colors",
+        "box-border inline-flex items-center justify-center whitespace-nowrap rounded-(--cmp-toggle-radius) border-(length:--cmp-toggle-border-width) border-solid transition-colors",
         SIZE_CLASSES[size],
         disabled ? "cursor-not-allowed" : "cursor-pointer",
         // 미선택(off) hover 시 파란 채움 + 흰 글자
@@ -10556,10 +10663,17 @@ function SPopover({
             menuTitle && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: "flex items-center gap-[var(--cmp-popover-title-gap)] text-[14px] font-bold leading-[24px]",
+                className: "typo-feedback-md-bold flex items-center gap-[var(--cmp-popover-title-gap)]",
                 style: { color: titleColor },
                 children: [
-                  titleIcon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: titleIcon, size: 16, color: titleColor }),
+                  titleIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                    SIcon,
+                    {
+                      name: titleIcon,
+                      size: "var(--cmp-popover-title-leadingIcon)",
+                      color: titleColor
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: menuTitle })
                 ]
               }
@@ -10696,14 +10810,14 @@ function SGuide({
         }
         setOpen((o) => !o);
       },
-      className: "inline-flex h-[var(--cmp-guide-button-height)] cursor-pointer items-center gap-[var(--cmp-guide-button-gap)] whitespace-nowrap rounded-[var(--cmp-guide-button-radius)] border-[length:var(--cmp-guide-button-border-width)] border-solid px-[var(--cmp-guide-button-paddingX)] text-[12px] font-medium leading-[20px] transition-colors",
+      className: "inline-flex h-[var(--cmp-guide-button-height)] cursor-pointer items-center gap-[var(--cmp-guide-button-gap)] whitespace-nowrap rounded-[var(--cmp-guide-button-radius)] border-[length:var(--cmp-guide-button-border-width)] border-solid px-[var(--cmp-guide-button-paddingX)] typo-control-xs-medium transition-colors",
       style: {
         borderColor: active ? activeBg : "var(--cmp-guide-button-border-default)",
         background: active ? activeBg : "var(--cmp-guide-button-bg-default)",
         color: active ? "var(--cmp-guide-button-text-active)" : "var(--cmp-guide-button-text-default)"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: iconName, size: 16, color: iconColor }),
+        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: iconName, size: "var(--cmp-guide-button-icon-size)", color: iconColor }),
         label || defaultLabel
       ]
     }
@@ -10753,11 +10867,11 @@ function SGuide({
                     color: isNotion ? "var(--sys-color-fg-primary)" : "var(--cmp-guide-contents-icon)"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 break-keep text-[16px] font-bold leading-[26px] text-[color:var(--cmp-guide-contents-typography-color)]", children: popupTitle || defaultLabel })
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "typo-heading-md m-0 break-keep text-[color:var(--cmp-guide-contents-typography-color)]", children: popupTitle || defaultLabel })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 mt-[var(--cmp-guide-contents-gap)] flex w-full list-none flex-col gap-[var(--cmp-guide-contents-body-gap)] p-0 text-[12px] leading-[20px] text-[color:var(--cmp-guide-contents-typography-color)]", children: messages.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 mt-[var(--cmp-guide-contents-gap)] flex w-full list-none flex-col gap-[var(--cmp-guide-contents-body-gap)] p-0 typo-field-sm-default text-[color:var(--cmp-guide-contents-typography-color)]", children: messages.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
             "li",
             {
               className: cn(
@@ -11028,15 +11142,22 @@ function SConfirmModal({
       showClose: true,
       onClose: () => settle(onClose),
       className: "w-fit min-w-[min(520px,calc(100dvw-48px))]",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-auto flex-col items-center gap-[40px] px-[32px] py-[40px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-h-0 flex-col items-center gap-[20px] overflow-y-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[12px]", children: [
-            iconName && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: iconName, size: 32, color: TYPE_ICON_COLOR[type] }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-auto flex-col items-center gap-(--cmp-modal-confirm-gap) px-(--cmp-modal-confirm-paddingX) py-(--cmp-modal-confirm-paddingY)", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-h-0 flex-col items-center gap-(--cmp-modal-confirm-body-gap) overflow-y-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-(--cmp-modal-confirm-title-gap)", children: [
+            iconName && /* @__PURE__ */ jsxRuntime.jsx(
+              SIcon,
+              {
+                name: iconName,
+                size: "var(--cmp-modal-confirm-title-icon)",
+                color: TYPE_ICON_COLOR[type]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "h2",
               {
                 className: cn(
-                  "text-center text-[18px] font-bold leading-[30px] text-[color:var(--cmp-modal-confirm-title-color)]",
+                  "typo-heading-lg text-center text-[color:var(--cmp-modal-confirm-title-color)]",
                   titleClassName
                 ),
                 children: modalTitle
@@ -11125,7 +11246,7 @@ function SOverlayHeader({
           {
             className: cn(
               "m-0 overflow-hidden text-ellipsis whitespace-nowrap",
-              "text-[16px] font-bold leading-[26px]",
+              "typo-heading-md",
               titleClassName
             ),
             style: { color: "var(--cmp-overlay-header-title-color)" },
@@ -11220,8 +11341,8 @@ function SLoadingModal({
   showButton = false,
   buttonLabel,
   onButtonClick,
-  width = 520,
-  height = 320
+  width = "var(--cmp-modal-loading-width)",
+  height = "var(--cmp-modal-loading-height)"
 }) {
   const resolvedMessage = message ?? DEFAULT_MESSAGE[state2];
   const lines = Array.isArray(resolvedMessage) ? resolvedMessage : resolvedMessage ? [resolvedMessage] : [];
@@ -11237,8 +11358,15 @@ function SLoadingModal({
       ariaTitle: lines[0] || "\uB85C\uB529 \uC911",
       width,
       height,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-auto flex-col overflow-y-auto px-[32px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "m-auto flex flex-col items-center gap-[20px]", children: [
-        state2 === "loading" ? progress !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { value: progress }) : /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) : /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "warningOutline", size: 80, color: "var(--cmp-modal-confirm-negative-icon)" }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-auto flex-col overflow-y-auto px-[32px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "m-auto flex flex-col items-center gap-(--cmp-modal-loading-gap)", children: [
+        state2 === "loading" ? progress !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { value: progress }) : /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) : /* @__PURE__ */ jsxRuntime.jsx(
+          SIcon,
+          {
+            name: "warningOutline",
+            size: "var(--cmp-modal-loading-content)",
+            color: "var(--cmp-modal-confirm-negative-icon)"
+          }
+        ),
         lines.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: lines.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
@@ -12026,13 +12154,8 @@ var LAUNCHER_LIST_BOX_LAYOUT = {
   radius: gnb("launcher-listBox-radius"),
   /** 패널 상하좌우 여백 */
   padding: gnb("launcher-listBox-paddingAll"),
-  /**
-   * 패널 그림자.
-   * 토큰(`component.gnb.launcher.listBox.shadow` = `{shadow.floating}`)은 값이 배열이라
-   * `--cmp-*` 로 나오지 않는다 — 생성기가 스칼라만 내보내기 때문이다. 그래서 그 별칭이
-   * 가리키는 스케일 토큰을 직접 쓴다(같은 값이다).
-   */
-  shadow: "var(--shadow-floating)",
+  /** 패널 그림자 */
+  shadow: gnb("launcher-listBox-shadow"),
   /** 줄 왼쪽 여백 */
   itemPaddingLeft: gnb("launcher-button-paddingLeft"),
   /** 줄 오른쪽 여백 — 왼쪽보다 좁다(오른쪽 끝은 hover 아이콘 자리다) */
@@ -12403,20 +12526,19 @@ var GNB_MENU = {
     depth3PaddingLeft: box2("item-depth3-paddingLeft"),
     depth1Icon: box2("item-depth1-icon"),
     // box 는 depth1 전용 타이포 토큰이 없어 depth1 도 selected 타이포를 따른다
+    depth1Typo: "typo-navigation-lg-semibold",
+    // token: gnb.box.item.typography.selected
+    itemTypo: "typo-navigation-lg-medium",
+    // token: gnb.box.item.typography.default
+    itemTypoSelected: "typo-navigation-lg-semibold",
+    // token: gnb.box.item.typography.selected
     depth1FontSize: 14,
-    // token: gnb.box.item.typography.selected.fontSize
     depth1LineHeight: 24,
-    // token: gnb.box.item.typography.selected.lineHeight
     depth1FontWeight: 600,
-    // token: gnb.box.item.typography.selected.fontWeight
     itemFontSize: 14,
-    // token: gnb.box.item.typography.default.fontSize
     itemLineHeight: 24,
-    // token: gnb.box.item.typography.default.lineHeight
     itemFontWeight: 500,
-    // token: gnb.box.item.typography.default.fontWeight
     itemFontWeightSelected: 600
-    // token: gnb.box.item.typography.selected.fontWeight
   },
   belt: {
     bodyPaddingY: gnb2("body-padding"),
@@ -12433,20 +12555,19 @@ var GNB_MENU = {
     depth3PaddingLeft: belt("item-depth3-paddingLeft"),
     depth1Icon: belt("item-depth1-icon"),
     // belt 전용 depth1 아이콘 토큰(16)
+    depth1Typo: "typo-navigation-md-bold",
+    // token: gnb.belt.item.depth1.typography
+    itemTypo: "typo-navigation-sm-medium",
+    // token: gnb.belt.item.typography.default
+    itemTypoSelected: "typo-navigation-sm-bold",
+    // token: gnb.belt.item.typography.selected
     depth1FontSize: 13,
-    // token: gnb.belt.item.depth1.typography.fontSize
     depth1LineHeight: 22,
-    // token: gnb.belt.item.depth1.typography.lineHeight
     depth1FontWeight: 700,
-    // token: gnb.belt.item.depth1.typography.fontWeight
     itemFontSize: 12,
-    // token: gnb.belt.item.typography.default.fontSize
     itemLineHeight: 20,
-    // token: gnb.belt.item.typography.default.lineHeight
     itemFontWeight: 500,
-    // token: gnb.belt.item.typography.default.fontWeight
     itemFontWeightSelected: 700
-    // token: gnb.belt.item.typography.selected.fontWeight
   }
 };
 var GNB_COLORS = {
@@ -12491,15 +12612,16 @@ var GNB_RAIL = {
   itemPaddingBottom: gnb2("rail-item-paddingBottom"),
   itemRadius: gnb2("rail-item-radius"),
   itemIcon: gnb2("rail-item-icon"),
-  // 타이포 (theme.css 에 gnb 타이포 변수 없음 → 토큰 값 직접 명시)
+  // 타이포 — 토큰이 가리키는 typo-* 클래스
+  itemTypo: "typo-navigation-xs-medium",
+  // token: gnb.rail.item.typography.default
+  itemTypoSelected: "typo-navigation-xs-bold",
+  // token: gnb.rail.item.typography.selected
+  // 아래 숫자는 공개 export 라 남겨 둔 같은 값이다 — 렌더에는 쓰지 않는다
   itemFontSize: 11,
-  // token: gnb.rail.item.typography.default.fontSize
   itemLineHeight: 18,
-  // token: gnb.rail.item.typography.default.lineHeight
   itemFontWeight: 500,
-  // token: gnb.rail.item.typography.default.fontWeight
   itemFontWeightSelected: 700
-  // token: gnb.rail.item.typography.selected.fontWeight
 };
 var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
@@ -12733,7 +12855,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
         type: "button",
         disabled: item4.disabled,
         "aria-current": isActive ? "true" : void 0,
-        className: "box-border flex select-none flex-col items-center border-none bg-transparent transition-colors duration-150",
+        className: cn(
+          "box-border flex select-none flex-col items-center border-none bg-transparent transition-colors duration-150",
+          isActive ? GNB_RAIL.itemTypoSelected : GNB_RAIL.itemTypo
+        ),
         style: {
           width: GNB_RAIL.itemWidth,
           paddingTop: GNB_RAIL.itemPaddingTop,
@@ -12743,9 +12868,6 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           color: isActive ? C.itemColorActive : C.railFgDefault,
           // <button> 의 UA 폰트를 끊고 앱 폰트를 잇는다 (메뉴 아이템과 같은 이유)
           fontFamily: "inherit",
-          fontSize: GNB_RAIL.itemFontSize,
-          lineHeight: `${GNB_RAIL.itemLineHeight}px`,
-          fontWeight: isActive ? GNB_RAIL.itemFontWeightSelected : GNB_RAIL.itemFontWeight,
           opacity: item4.disabled ? 0.4 : 1,
           cursor: item4.disabled ? "not-allowed" : "pointer"
         },
@@ -12784,9 +12906,6 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       color: isSelected ? C.itemColorActive : isHovered ? C.itemColorHover : C.itemColorDefault,
       // <button> 의 UA 폰트(Arial 13.3px)를 끊고 앱 폰트를 잇는다
       fontFamily: "inherit",
-      fontSize: depth === 1 ? M.depth1FontSize : M.itemFontSize,
-      lineHeight: `${depth === 1 ? M.depth1LineHeight : M.itemLineHeight}px`,
-      fontWeight: depth === 1 ? M.depth1FontWeight : isSelected ? M.itemFontWeightSelected : M.itemFontWeight,
       opacity: item4.disabled ? 0.4 : 1,
       cursor: item4.disabled ? "not-allowed" : "pointer"
     };
@@ -12801,7 +12920,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
             disabled: item4.disabled,
             "aria-expanded": hasChildren ? isExpanded : void 0,
             "aria-current": isSelected ? "page" : void 0,
-            className: "box-border flex select-none items-center border-none bg-transparent text-left transition-colors duration-150",
+            className: cn(
+              "box-border flex select-none items-center border-none bg-transparent text-left transition-colors duration-150",
+              depth === 1 ? M.depth1Typo : isSelected ? M.itemTypoSelected : M.itemTypo
+            ),
             style: itemStyle,
             onClick: () => handleItemClick(item4),
             ...rowHoverProps(item4),
@@ -13987,8 +14109,10 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
 );
 
 // src/components/STabs/tabs.config.ts
-var TAB_MAIN_SIZE = { height: 36, paddingX: 24 };
-var TAB_TYPOGRAPHY = { fontSize: 12, lineHeight: 20 };
+var TAB_MAIN_SIZE = {
+  height: "var(--cmp-tab-main-height)",
+  paddingX: "var(--cmp-tab-main-paddingX)"
+};
 var TAB_MAIN_COLORS = {
   selected: {
     bg: "var(--cmp-tab-main-selected-bg)",
@@ -14033,7 +14157,7 @@ function STabs({
         // main(가로): baseline(하단 divider)이 100% 너비로 채워지도록 w-full
         sub ? "inline-flex w-fit" : "flex w-full",
         isVertical ? "flex-col items-stretch" : "flex-row",
-        sub ? isVertical ? "gap-[16px]" : "gap-[24px]" : "gap-[4px]",
+        sub ? isVertical ? "gap-(--cmp-tab-sub-gap-vertical)" : "gap-(--cmp-tab-sub-gap-horizontal)" : "gap-(--cmp-tab-main-container-gap)",
         className
       ),
       style: containerStyle,
@@ -14043,30 +14167,26 @@ function STabs({
         let tabStyle;
         if (sub) {
           tabStyle = {
-            height: 20,
-            paddingBottom: 4,
-            fontSize: TAB_TYPOGRAPHY.fontSize,
-            lineHeight: `${TAB_TYPOGRAPHY.lineHeight}px`,
+            height: "var(--cmp-tab-sub-item-height)",
+            paddingBottom: "var(--cmp-tab-sub-content-gap)",
             color: selected ? TAB_SUB_COLORS.selected.text : TAB_SUB_COLORS.default.text,
-            borderBottom: `1px solid ${selected ? TAB_SUB_COLORS.selected.line : "transparent"}`
+            borderBottom: `var(--cmp-tab-sub-border-width) solid ${selected ? TAB_SUB_COLORS.selected.line : "transparent"}`
           };
         } else {
           const border = selected ? TAB_MAIN_COLORS.selected.border : TAB_MAIN_COLORS.default.border;
           const selectedBg = TAB_MAIN_COLORS.selected.bg;
           tabStyle = {
             height: TAB_MAIN_SIZE.height,
-            padding: `0 ${TAB_MAIN_SIZE.paddingX}px`,
-            fontSize: TAB_TYPOGRAPHY.fontSize,
-            lineHeight: `${TAB_TYPOGRAPHY.lineHeight}px`,
+            padding: `0 ${TAB_MAIN_SIZE.paddingX}`,
             background: selected ? TAB_MAIN_COLORS.selected.bg : TAB_MAIN_COLORS.default.bg,
             color: selected ? TAB_MAIN_COLORS.selected.text : TAB_MAIN_COLORS.default.text,
-            border: `1px solid ${border}`,
+            border: `var(--cmp-tab-main-border-width) solid ${border}`,
             // 폴더형: 미선택 탭은 baseline 위에, 선택 탭은 baseline(파란선)을 1px 덮어 연결된 것처럼 보이게
-            borderTopLeftRadius: 6,
-            borderTopRightRadius: 6,
+            borderTopLeftRadius: "var(--cmp-tab-main-radius)",
+            borderTopRightRadius: "var(--cmp-tab-main-radius)",
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
-            borderBottom: selected ? `1px solid ${selectedBg}` : "none",
+            borderBottom: selected ? `var(--cmp-tab-main-border-width) solid ${selectedBg}` : "none",
             marginBottom: selected ? -1 : 0
           };
         }
@@ -14103,12 +14223,17 @@ function STabs({
                 moveTo(tabs.length - 1);
               }
             },
-            className: "relative box-border inline-flex cursor-pointer select-none items-center justify-center gap-[8px] whitespace-nowrap outline-none transition-[color,background-color] duration-200",
+            className: cn(
+              "relative box-border inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap outline-none transition-[color,background-color] duration-200",
+              sub ? "gap-[8px]" : "gap-(--cmp-tab-main-gap)",
+              // 타이포 (token: tab.<main|sub>.<selected|default>.typography)
+              selected ? "typo-navigation-sm-bold" : "typo-navigation-sm-default"
+            ),
             style: tabStyle,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible font-bold", style: { gridArea: "1 / 1" }, children: tab.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { gridArea: "1 / 1", fontWeight: selected ? 700 : 400 }, children: tab.label })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { gridArea: "1 / 1" }, children: tab.label })
               ] }),
               tab.badge !== void 0 && tab.badge !== null && tab.badge !== "" && /* @__PURE__ */ jsxRuntime.jsx(
                 STag,
@@ -14159,7 +14284,7 @@ function SPagination({
       "aria-label": aria,
       onClick,
       className: "flex h-[var(--cmp-pagination-height)] w-[var(--cmp-pagination-height)] cursor-pointer items-center justify-center rounded-[var(--cmp-pagination-radius)] border-none bg-transparent hover:bg-[var(--cmp-pagination-item-bg-hover)]",
-      children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: 12, color: "var(--color-grey-65)" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: "var(--cmp-pagination-icon)", color: "var(--color-grey-65)" })
     }
   );
   const prevButtons = simple ? currentPage > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -14183,8 +14308,8 @@ function SPagination({
       style,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-[calc(var(--cmp-pagination-height)*2+var(--cmp-pagination-move-gap))] items-center justify-end gap-[var(--cmp-pagination-move-gap)]", children: prevButtons }),
-        simple ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[var(--cmp-pagination-height)] items-center gap-[var(--cmp-pagination-simple-gap)] px-[var(--cmp-pagination-paddingX)] text-[12px] font-medium leading-[20px] text-[color:var(--cmp-pagination-item-content-default)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-[color:var(--cmp-pagination-item-content-selected)]", children: currentPage }),
+        simple ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[var(--cmp-pagination-height)] items-center gap-[var(--cmp-pagination-simple-gap)] px-[var(--cmp-pagination-paddingX)] typo-control-xs-medium text-[color:var(--cmp-pagination-item-content-default)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-control-xs-bold text-[color:var(--cmp-pagination-item-content-selected)]", children: currentPage }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "/" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: lastPage })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--cmp-pagination-move-gap)]", children: pageNumbers.map((n) => {
@@ -14196,8 +14321,8 @@ function SPagination({
               "aria-current": selected ? "page" : void 0,
               onClick: () => go(n),
               className: cn(
-                "box-border flex h-[var(--cmp-pagination-height)] cursor-pointer items-center justify-center rounded-[var(--cmp-pagination-radius)] border-none px-[var(--cmp-pagination-paddingX)] text-[12px] leading-[20px]",
-                selected ? "bg-[var(--cmp-pagination-item-bg-selected)] font-bold text-[color:var(--cmp-pagination-item-content-selected)]" : "bg-transparent font-medium text-[color:var(--cmp-pagination-item-content-default)] hover:bg-[var(--cmp-pagination-item-bg-hover)] hover:text-[color:var(--cmp-pagination-item-content-hover)]"
+                "box-border flex h-[var(--cmp-pagination-height)] cursor-pointer items-center justify-center rounded-[var(--cmp-pagination-radius)] border-none px-[var(--cmp-pagination-paddingX)]",
+                selected ? "bg-[var(--cmp-pagination-item-bg-selected)] typo-control-xs-bold text-[color:var(--cmp-pagination-item-content-selected)]" : "bg-transparent typo-control-xs-medium text-[color:var(--cmp-pagination-item-content-default)] hover:bg-[var(--cmp-pagination-item-bg-hover)] hover:text-[color:var(--cmp-pagination-item-content-hover)]"
               ),
               style: { width: itemWidth },
               children: n
@@ -14220,15 +14345,18 @@ var STEPPER_SIZE_CONFIG = {
     sequenceSize: V2("sm-sequence-size"),
     fontSize: "12px",
     lineHeight: "20px",
-    fontWeightActive: 700,
-    fontWeightDefault: 500
+    typoDefault: "typo-navigation-sm-medium",
+    typoActive: "typo-navigation-sm-bold",
+    fontWeightActive: 700
   },
   lg: {
     sequenceSize: V2("lg-sequence-size"),
     fontSize: "14px",
     lineHeight: "24px",
-    fontWeightActive: 700,
-    fontWeightDefault: 500
+    typoDefault: "typo-navigation-lg-medium",
+    // 토큰(navigation.lg.semibold)은 600 인데 지금 700 으로 그린다 — 값이 달라 토큰을 쓰지 않는다
+    typoActive: null,
+    fontWeightActive: 700
   }
 };
 var STEPPER_LAYOUT = {
@@ -14254,7 +14382,9 @@ var STEPPER_COLORS = {
   sequenceText: {
     active: V2("sequence-text-active"),
     default: V2("sequence-text-default"),
-    completed: VF("sequence-text-completed", "#0075FF")
+    // 완료 시퀀스의 체크 아이콘 색은 전용 토큰이 없다(stepper.sequence.text 에 completed 가 없음).
+    // 진행 중 시퀀스 숫자와 같은 accent 색을 시맨틱 토큰으로 직접 쓴다.
+    completed: "var(--sys-color-fg-accent)"
   },
   text: {
     active: V2("text-active"),
@@ -14269,14 +14399,15 @@ var STEPPER_HORIZONTAL_COMPLETED_COLORS = {
   text: STEPPER_COLORS.text.completed
 };
 var STEPPER_VERTICAL_LAYOUT = {
-  width: VF("vertical-width", "240px"),
+  /** 세로형 폭. 대응 토큰이 없어 디자인 값을 그대로 쓴다(stepper.vertical 에 width 가 없음). */
+  width: "240px",
   itemGap: VF("vertical-item-gap", "12px"),
   itemPaddingX: VF("vertical-item-paddingX", "16px"),
   itemPaddingY: VF("vertical-item-paddingY", "8px"),
   titlePaddingTop: VF("vertical-title-paddingTop", "12px"),
   titlePaddingBottom: VF("vertical-title-paddingBottom", "4px"),
-  titleFontSize: VF("vertical-title-font-size", "11px"),
-  titleLineHeight: VF("vertical-title-line-height", "18px"),
+  /** 구간 제목 타이포 — stepper.vertical.title.typography (= heading.xxs) */
+  titleTypo: "typo-heading-xxs",
   accentStripeWidth: VF("vertical-item-accentStripe-width", "2px"),
   accentStripeColor: VF("vertical-item-accentStripe-color", "#64ABFF")
 };
@@ -14286,6 +14417,7 @@ var STEPPER_VERTICAL_COLORS = {
     hover: VF("vertical-item-bg-hover", "#F6F6F6"),
     selected: VF("vertical-item-bg-selected", "#EFF6FF")
   },
+  titleBg: V2("vertical-title-bg"),
   titleText: VF("vertical-title-text", "#004290"),
   textDefault: STEPPER_COLORS.text.default,
   textCompleted: STEPPER_COLORS.text.completed,
@@ -14293,9 +14425,10 @@ var STEPPER_VERTICAL_COLORS = {
   sequenceBgActive: STEPPER_COLORS.sequenceBg.active,
   sequenceTextActive: STEPPER_COLORS.sequenceText.active,
   sequenceTextDefault: STEPPER_COLORS.sequenceText.default,
-  sequenceBorderCompleted: VF("vertical-sequence-border-completed", "#93C4FF"),
-  sequenceBgCompleted: VF("vertical-sequence-bg-completed", "#EFF6FF"),
-  sequenceIconCompleted: VF("vertical-sequence-icon-completed", "#0075FF"),
+  // 세로형 전용 completed 토큰은 없다 — 가로형과 같은 sequence.*.completed 를 쓴다.
+  sequenceBorderCompleted: STEPPER_COLORS.sequenceBorder.completed,
+  sequenceBgCompleted: STEPPER_COLORS.sequenceBg.completed,
+  sequenceIconCompleted: STEPPER_COLORS.sequenceText.completed,
   errorBadge: "#FB4444"
 };
 var ERROR_TOOLTIP_MESSAGE = "\uD655\uC778\uC774 \uD544\uC694\uD55C \uD56D\uBAA9\uC774 \uC788\uC2B5\uB2C8\uB2E4.";
@@ -14458,10 +14591,12 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
       if (isHorizontalCompleted) return STEPPER_HORIZONTAL_COMPLETED_COLORS.sequenceIcon;
       return STEPPER_COLORS.sequenceText[state2];
     })();
+    const emphasized = state2 === "active" || isVertical && hovered;
+    const itemTypo = emphasized ? config.typoActive : config.typoDefault;
     const itemStyle = {
       gap: STEPPER_LAYOUT.itemGap,
       color: itemColor,
-      fontWeight: state2 === "active" || isVertical && hovered ? config.fontWeightActive : config.fontWeightDefault
+      fontWeight: itemTypo ? void 0 : config.fontWeightActive
     };
     const sequenceStyle = {
       width: config.sequenceSize,
@@ -14478,7 +14613,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
       {
         role: roleListItem ? "listitem" : void 0,
         "aria-current": roleListItem && state2 === "active" ? "step" : void 0,
-        className: "inline-flex items-center whitespace-nowrap",
+        className: cn("inline-flex items-center whitespace-nowrap", itemTypo),
         style: itemStyle,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -14524,7 +14659,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
         className: cn("relative inline-flex flex-col items-start", className),
         style: {
           width: STEPPER_VERTICAL_LAYOUT.width,
-          // 폭은 토큰이 정하되 부모보다 넓어지지 않는다 — 부모가 세로 스크롤바만큼 좁아지면 따라 줄어
+          // 폭은 디자인 값(전용 토큰 없음)이되 부모보다 넓어지지 않는다 — 부모가 세로 스크롤바만큼 좁아지면 따라 줄어
           // 가로 넘침(가로 스크롤바)이 생기지 않는다
           maxWidth: "100%",
           fontSize: config.fontSize,
@@ -14556,18 +14691,18 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                   group.group && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "flex w-full items-center overflow-hidden",
+                      className: cn(
+                        "flex w-full items-center overflow-hidden",
+                        STEPPER_VERTICAL_LAYOUT.titleTypo
+                      ),
                       style: {
                         gap: STEPPER_VERTICAL_LAYOUT.itemGap,
                         paddingLeft: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
                         paddingRight: STEPPER_VERTICAL_LAYOUT.itemPaddingX,
                         paddingTop: STEPPER_VERTICAL_LAYOUT.titlePaddingTop,
                         paddingBottom: STEPPER_VERTICAL_LAYOUT.titlePaddingBottom,
-                        background: STEPPER_VERTICAL_COLORS.itemBg.default,
-                        color: STEPPER_VERTICAL_COLORS.titleText,
-                        fontSize: STEPPER_VERTICAL_LAYOUT.titleFontSize,
-                        lineHeight: STEPPER_VERTICAL_LAYOUT.titleLineHeight,
-                        fontWeight: 700
+                        background: STEPPER_VERTICAL_COLORS.titleBg,
+                        color: STEPPER_VERTICAL_COLORS.titleText
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: group.group })
                     }
@@ -15146,8 +15281,8 @@ var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2
           {
             className: cn(
               "inline-flex size-(--cmp-calendarBoard-daySequence-size) items-center justify-center rounded-(--cmp-calendarBoard-daySequence-radius)",
-              isToday ? "typo-body-md-bold bg-(--cmp-calendarBoard-daySequence-bg-today) text-(--cmp-calendarBoard-daySequence-text-today)" : cn(
-                "typo-body-md-medium",
+              isToday ? "typo-item-md-selected bg-(--cmp-calendarBoard-daySequence-bg-today) text-(--cmp-calendarBoard-daySequence-text-today)" : cn(
+                "typo-item-md-default",
                 inCurrentMonth ? "text-(--cmp-calendarBoard-daySequence-text-default)" : "text-(--cmp-calendarBoard-daySequence-text-otherMonth)"
               ),
               // 오늘이 아니면서 선택된 날은 테두리 원으로 표시한다 (오늘은 이미 채운 원이라 겹치지 않는다).
@@ -15705,14 +15840,12 @@ function clampToAvailableHeight(value, availableHeight) {
 }
 var FONT = {
   sm: {
-    fontSize: 12,
-    lineHeight: 20,
+    typo: "typo-field-sm-default",
     paddingX: "var(--cmp-textinput-sm-paddingX)",
     gap: "var(--cmp-textinput-sm-gap)"
   },
   md: {
-    fontSize: 14,
-    lineHeight: 24,
+    typo: "typo-field-md-default",
     paddingX: "var(--cmp-textinput-md-paddingX)",
     gap: "var(--cmp-textinput-md-gap)"
   }
@@ -15751,12 +15884,10 @@ var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex h-full w-full items-center",
+          className: cn("flex h-full w-full items-center", f.typo),
           style: {
             gap: f.gap,
-            padding: `0 ${f.paddingX}`,
-            fontSize: f.fontSize,
-            lineHeight: `${f.lineHeight}px`
+            padding: `0 ${f.paddingX}`
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -15817,6 +15948,18 @@ var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
   );
 });
 
+// src/lib/list-box-item.ts
+var LIST_BOX_ITEM_PADDING_LEFT = {
+  1: "var(--cmp-listBoxItem-paddingLeft-depth1)",
+  2: "var(--cmp-listBoxItem-paddingLeft-depth2)",
+  3: "var(--cmp-listBoxItem-paddingLeft-depth3)"
+};
+var LIST_BOX_ITEM_PADDING_Y_RIGHT = {
+  paddingTop: "var(--cmp-listBoxItem-paddingY)",
+  paddingBottom: "var(--cmp-listBoxItem-paddingY)",
+  paddingRight: "var(--cmp-listBoxItem-paddingRight)"
+};
+
 // src/components/SSelect/select.config.ts
 function flattenOptions(options, depth = 1, inheritDisabled = true) {
   const out = [];
@@ -15991,6 +16134,21 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const [focusedIndex, setFocusedIndex] = react.useState(-1);
   const [expanded, setExpanded] = react.useState(() => /* @__PURE__ */ new Set());
   const [searchCollapsed, setSearchCollapsed] = react.useState(NO_SEARCH_COLLAPSED);
+  const [treeMotion, setTreeMotion] = react.useState(null);
+  const treeMotionTimerRef = react.useRef(null);
+  const pendingCollapseRef = react.useRef(null);
+  const cancelTreeMotion = () => {
+    if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    treeMotionTimerRef.current = null;
+    pendingCollapseRef.current = null;
+    setTreeMotion(null);
+  };
+  react.useEffect(
+    () => () => {
+      if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    },
+    []
+  );
   const baseId = react.useId();
   const listboxId = `${baseId}-listbox`;
   const activeOptionId = `${baseId}-active-option`;
@@ -16058,6 +16216,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const commitOpen = (next, valueForRules) => {
     setOpen(next);
     onOpenChange?.(next);
+    cancelTreeMotion();
     if (next) {
       dismissedByPointerRef.current = false;
       alignSelectedTopRef.current = true;
@@ -16090,6 +16249,14 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   }, [insideModal, pendingOpen, portalContainer]);
   const requestOpenRef = react.useRef(requestOpen);
   requestOpenRef.current = requestOpen;
+  react.useEffect(() => {
+    if (!label || effectiveDisabled) return;
+    const labelEl = document.getElementById(fieldLabelId(triggerId));
+    if (!labelEl) return;
+    const toggle = () => requestOpenRef.current(!open);
+    labelEl.addEventListener("click", toggle);
+    return () => labelEl.removeEventListener("click", toggle);
+  }, [label, effectiveDisabled, triggerId, open]);
   react.useImperativeHandle(
     ref,
     () => ({
@@ -16120,6 +16287,10 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     (groupValue) => treeSearching ? !searchCollapsed.has(groupValue) : expanded.has(groupValue),
     [expanded, searchCollapsed, treeSearching]
   );
+  const isGroupShownExpanded = react.useCallback(
+    (groupValue) => isGroupExpanded(groupValue) && !(treeMotion != null && !treeMotion.opening && treeMotion.group === groupValue),
+    [isGroupExpanded, treeMotion]
+  );
   const treeRows = react.useMemo(
     () => isTree ? visibleTreeRows(searched, (row) => isGroupExpanded(row.value)) : null,
     [isGroupExpanded, isTree, searched]
@@ -16371,6 +16542,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const handleClear = () => {
     emit3([]);
     if (rules && rules.length > 0) setRuleError(runRules(multi ? [] : "", rules));
+    triggerRef.current?.focus();
   };
   const handleRemoveChip = (targets) => {
     const remove = new Set(targets);
@@ -16408,6 +16580,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const handleSearchChange = (next) => {
     setSearch(next);
     setSearchCollapsed(NO_SEARCH_COLLAPSED);
+    cancelTreeMotion();
   };
   const handleToggleExpand = (groupValue) => {
     rangeAnchorRef.current = null;
@@ -16417,8 +16590,41 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       else next.add(groupValue);
       return next;
     };
-    if (treeSearching) setSearchCollapsed(toggle);
-    else setExpanded(toggle);
+    const applyToggle = treeSearching ? () => setSearchCollapsed(toggle) : () => setExpanded(toggle);
+    if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    treeMotionTimerRef.current = null;
+    const pendingCollapse = pendingCollapseRef.current;
+    pendingCollapseRef.current = null;
+    if (treeMotion?.group === groupValue && !treeMotion.opening) {
+      setTreeMotion({ group: groupValue, opening: true });
+      treeMotionTimerRef.current = setTimeout(
+        () => setTreeMotion(null),
+        TREE_BRANCH_MOTION.duration
+      );
+      return;
+    }
+    pendingCollapse?.();
+    if (!canAnimateTreeBranch()) {
+      setTreeMotion(null);
+      applyToggle();
+      return;
+    }
+    if (isGroupExpanded(groupValue)) {
+      setTreeMotion({ group: groupValue, opening: false });
+      pendingCollapseRef.current = applyToggle;
+      treeMotionTimerRef.current = setTimeout(() => {
+        pendingCollapseRef.current = null;
+        setTreeMotion(null);
+        applyToggle();
+      }, TREE_BRANCH_MOTION.duration);
+    } else {
+      applyToggle();
+      setTreeMotion({ group: groupValue, opening: true });
+      treeMotionTimerRef.current = setTimeout(
+        () => setTreeMotion(null),
+        TREE_BRANCH_MOTION.duration
+      );
+    }
   };
   const handleToggleGroup = (leafValues) => {
     if (leafValues.length === 0) return;
@@ -16528,7 +16734,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       const row = rowIndex != null ? filtered[rowIndex] : void 0;
       if (rowIndex == null || row == null) return;
       event.preventDefault();
-      const rowExpanded = row.isGroup && isGroupExpanded(row.value);
+      const rowExpanded = row.isGroup && isGroupShownExpanded(row.value);
       if (event.key === "ArrowRight") {
         if (!row.isGroup) return;
         if (!rowExpanded) {
@@ -16566,6 +16772,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       commitOpen(false);
     }
   };
+  const handleTriggerKeyDown = (event) => {
+    if (event.target !== event.currentTarget || effectiveDisabled) return;
+    if (event.key === " " || !open && event.key === "Enter") {
+      event.preventDefault();
+      requestOpen(!open);
+      return;
+    }
+    handleKeyDown(event);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SField,
     {
@@ -16593,23 +16808,28 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       children: [
         name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selected.join(",") }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          "div",
           {
             ref: triggerRef,
             id: triggerId,
-            type: "button",
-            disabled: effectiveDisabled,
-            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerId}` : void 0,
+            role: "combobox",
+            tabIndex: effectiveDisabled ? -1 : 0,
+            "aria-disabled": effectiveDisabled || void 0,
+            "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerId}` : triggerId,
             "aria-haspopup": isTree ? "tree" : "listbox",
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
             "aria-activedescendant": open && focusedIndex >= 0 ? activeOptionId : void 0,
             "aria-busy": showTriggerSpinner || void 0,
-            onClick: () => requestOpen(!open),
-            onKeyDown: handleKeyDown,
+            onClick: () => {
+              if (effectiveDisabled) return;
+              requestOpen(!open);
+            },
+            onKeyDown: handleTriggerKeyDown,
             className: cn(
-              "flex h-full w-full cursor-pointer items-center justify-between bg-transparent text-left outline-none disabled:cursor-not-allowed",
-              size === "md" ? "typo-body-md-default gap-(--cmp-select-md-gap) px-(--cmp-select-md-paddingX)" : "typo-body-sm-default gap-(--cmp-select-sm-gap) px-(--cmp-select-sm-paddingX)"
+              "flex h-full w-full items-center justify-between bg-transparent text-left outline-none",
+              effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
+              size === "md" ? "typo-field-md-default gap-(--cmp-select-md-gap) px-(--cmp-select-md-paddingX)" : "typo-field-sm-default gap-(--cmp-select-sm-gap) px-(--cmp-select-sm-paddingX)"
             ),
             style: {
               // 칩 한 줄이 기본 높이 안에서 세로 가운데에 오는 여백. 줄이 늘면 같은 여백을 유지한 채 트리거가 커진다.
@@ -16731,7 +16951,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     "div",
                     {
                       ref: searchBarRef,
-                      className: "sticky top-0 z-[1] bg-[var(--cmp-listBox-bg)] px-(--cmp-listBoxItem-search-paddingX) py-(--cmp-listBoxItem-search-paddingY)",
+                      className: "sticky top-0 z-[1] border-b-(length:--border-width-1) border-solid border-[color:var(--sys-color-divider-default)] bg-[var(--cmp-listBox-bg)] px-(--cmp-listBoxItem-search-paddingX) py-(--cmp-listBoxItem-search-paddingY)",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         SSearchInput,
                         {
@@ -16759,14 +16979,14 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                       setSize: isDepth || isTree ? void 0 : rowCount,
                       multi,
                       tree: isTree,
-                      isExpanded: isGroupExpanded,
+                      isExpanded: isGroupShownExpanded,
                       onToggleExpand: handleToggleExpand,
+                      treeMotion,
                       treeLines,
                       selected,
                       groupLeafValues,
                       focusedValue: navigableItems[focusedIndex]?.key,
                       showSelectAll: selectAllVisible,
-                      searchVisible,
                       selectAllLabel: allSelectedLabel,
                       selectAllSelected: allSelected,
                       onSelectAll: handleSelectAll,
@@ -16818,12 +17038,12 @@ function ItemList({
   tree,
   isExpanded,
   onToggleExpand,
+  treeMotion,
   treeLines,
   selected,
   groupLeafValues,
   focusedValue,
   showSelectAll,
-  searchVisible,
   selectAllLabel,
   selectAllSelected,
   onSelectAll,
@@ -16834,281 +17054,327 @@ function ItemList({
   const selectedSet = react.useMemo(() => new Set(selected), [selected]);
   const checkboxShiftRef = react.useRef(false);
   const itemBase = cn(
-    "group/select-item flex w-full cursor-pointer select-none items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none",
+    "group/select-item flex w-full cursor-pointer select-none items-center gap-(--cmp-listBoxItem-gap) border-none bg-transparent text-left typo-field-sm-default outline-none",
     "text-[color:var(--cmp-listBoxItem-content-default)]",
     "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
   const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: tree ? "tree" : "listbox", "aria-multiselectable": multi || void 0, children: [
-    showSelectAll && (tree ? (
-      // 트리의 전체선택 줄은 STree 의 "전체" 줄 그대로다 (lib/tree-row).
-      /* @__PURE__ */ jsxRuntime.jsx(
-        TreeAllRow,
-        {
-          "data-select-all-row": true,
-          id: focusedValue === "__select_all__" ? activeOptionId : void 0,
-          "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
-          "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
-          tabIndex: -1,
-          label: selectAllLabel,
-          selected: selectAllSelected,
-          active: focusedValue === "__select_all__",
-          className: "select-none",
-          onMouseEnter: () => onHoverValue("__select_all__"),
-          onMouseLeave: () => onHoverValue(null),
-          onToggle: onSelectAll
-        }
-      )
-    ) : /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+  const wrapTreeMotion = (nodes) => {
+    if (!tree || treeMotion == null) return nodes;
+    const start = items.findIndex((o) => o.isGroup && o.value === treeMotion.group);
+    if (start < 0) return nodes;
+    let end = start + 1;
+    while (end < items.length && items[end].depth > items[start].depth) end++;
+    if (end === start + 1) return nodes;
+    return [
+      ...nodes.slice(0, start + 1),
+      /* @__PURE__ */ jsxRuntime.jsx(TreeRowsMotion, { opening: treeMotion.opening, children: nodes.slice(start + 1, end) }, `__motion_${treeMotion.group}__`),
+      ...nodes.slice(end)
+    ];
+  };
+  const selectAllRow = showSelectAll && (tree ? (
+    // 트리의 전체선택 줄은 STree 의 "전체" 줄 그대로다 (lib/tree-row).
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TreeAllRow,
       {
-        type: "button",
         "data-select-all-row": true,
         id: focusedValue === "__select_all__" ? activeOptionId : void 0,
         "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
-        className: cn(
-          itemBase,
-          focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
-        ),
-        style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
+        tabIndex: -1,
+        label: selectAllLabel,
+        selected: selectAllSelected,
+        active: focusedValue === "__select_all__",
+        className: "select-none",
         onMouseEnter: () => onHoverValue("__select_all__"),
         onMouseLeave: () => onHoverValue(null),
-        onClick: onSelectAll,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
-        ]
+        onToggle: onSelectAll
       }
-    )),
-    topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: topSpacer } }),
-    items.map((o, windowIndex) => {
-      const idx = windowIndex + indexOffset;
-      const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
-      const rowKey = `${o.value}-${idx}`;
-      if (tree) {
-        const togglesLeaves = multi && o.isGroup;
-        const leafValues = togglesLeaves ? groupLeafValues.get(idx) ?? [] : [];
-        const total = leafValues.length;
-        const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
-        const isSelected2 = selectedSet.has(o.value);
-        const checkState = togglesLeaves ? total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null : isSelected2;
-        const rowDisabled = o.disabled || togglesLeaves && total === 0;
-        const focusKey = togglesLeaves ? `__group_${idx}__` : o.value;
-        const focused = focusedValue === focusKey;
-        const expanded = o.isGroup && isExpanded(o.value);
-        const line = treeLines[idx];
-        const toggle = () => {
-          if (rowDisabled) return;
-          if (togglesLeaves) onToggleGroup(leafValues);
-          else onSelect(o.value, idx, checkboxShiftRef.current);
-        };
-        return (
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- 키보드는 트리거(또는 검색 입력)가 aria-activedescendant 로 맡는다. 줄로 포커스를 옮기지 않는다
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              tabIndex: -1,
-              "data-select-row": true,
-              "data-index": idx,
-              id: focused ? activeOptionId : void 0,
-              role: "treeitem",
-              "aria-level": o.depth,
-              "aria-posinset": line?.posInSet,
-              "aria-setsize": line?.setSize,
-              "aria-expanded": o.isGroup ? expanded : void 0,
-              "aria-selected": checkState === true,
-              "aria-disabled": rowDisabled || void 0,
-              "data-select-focused": focused ? "true" : void 0,
-              "data-select-active": focused ? "true" : void 0,
-              className: cn(
-                TREE_ROW_CLASS,
-                TREE_LABEL_TYPOGRAPHY.sm.rowHeight,
-                TREE_ROW_BORDER_CLASS,
-                "select-none",
-                rowDisabled ? "cursor-not-allowed" : "cursor-pointer",
-                focused && TREE_ROW_ACTIVE_CLASS
-              ),
-              onMouseEnter: () => onHoverValue(focusKey),
-              onMouseLeave: () => onHoverValue(null),
-              onClick: (event) => {
-                if (isRowControlClick(event) || rowDisabled) return;
+    )
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-select-all-row": true,
+      id: focusedValue === "__select_all__" ? activeOptionId : void 0,
+      "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
+      "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
+      className: cn(
+        itemBase,
+        focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
+      ),
+      style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: LIST_BOX_ITEM_PADDING_LEFT[1] },
+      onMouseEnter: () => onHoverValue("__select_all__"),
+      onMouseLeave: () => onHoverValue(null),
+      onClick: onSelectAll,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
+      ]
+    }
+  ));
+  const rowNodes = items.map((o, windowIndex) => {
+    const idx = windowIndex + indexOffset;
+    const padLeft = LIST_BOX_ITEM_PADDING_LEFT[o.depth === 1 ? 1 : o.depth === 2 ? 2 : 3];
+    const rowKey = `${o.value}-${idx}`;
+    if (tree) {
+      const togglesLeaves = multi && o.isGroup;
+      const leafValues = togglesLeaves ? groupLeafValues.get(idx) ?? [] : [];
+      const total = leafValues.length;
+      const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+      const isSelected2 = selectedSet.has(o.value);
+      const checkState = togglesLeaves ? total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null : isSelected2;
+      const rowDisabled = o.disabled || togglesLeaves && total === 0;
+      const focusKey = togglesLeaves ? `__group_${idx}__` : o.value;
+      const focused = focusedValue === focusKey;
+      const expanded = o.isGroup && isExpanded(o.value);
+      const line = treeLines[idx];
+      const toggle = () => {
+        if (rowDisabled) return;
+        if (togglesLeaves) onToggleGroup(leafValues);
+        else onSelect(o.value, idx, checkboxShiftRef.current);
+      };
+      return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- 키보드는 트리거(또는 검색 입력)가 aria-activedescendant 로 맡는다. 줄로 포커스를 옮기지 않는다
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            tabIndex: -1,
+            "data-select-row": true,
+            "data-index": idx,
+            id: focused ? activeOptionId : void 0,
+            role: "treeitem",
+            "aria-level": o.depth,
+            "aria-posinset": line?.posInSet,
+            "aria-setsize": line?.setSize,
+            "aria-expanded": o.isGroup ? expanded : void 0,
+            "aria-selected": checkState === true,
+            "aria-disabled": rowDisabled || void 0,
+            "data-select-focused": focused ? "true" : void 0,
+            "data-select-active": focused ? "true" : void 0,
+            className: cn(
+              TREE_ROW_CLASS,
+              TREE_LABEL_TYPOGRAPHY.sm.rowHeight,
+              TREE_ROW_BORDER_CLASS,
+              "select-none",
+              o.isGroup && "cursor-pointer",
+              focused && TREE_ROW_ACTIVE_CLASS
+            ),
+            onMouseEnter: () => onHoverValue(focusKey),
+            onMouseLeave: () => onHoverValue(null),
+            onClick: (event) => {
+              if (isRowControlClick(event)) return;
+              if (isRowSelectClick(event)) {
+                if (rowDisabled) return;
                 if (togglesLeaves) onToggleGroup(leafValues);
                 else onSelect(o.value, idx, event.shiftKey);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TreeConnector,
-                  {
-                    guideline: true,
-                    size: "sm",
-                    depth: o.depth,
-                    hasChildren: o.isGroup,
-                    isLast: line?.isLast ?? true,
-                    ancestorLast: line?.ancestorLast ?? []
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TREE_CONTENT_CLASS, children: [
-                  o.isGroup ? (
-                    // 비활성 그룹도 접고 편다 — 그룹이 비활성이어도 아래에 고를 수 있는 자식이 있을 수 있다.
-                    /* @__PURE__ */ jsxRuntime.jsx(TreeCaret, { expanded, onToggle: () => onToggleExpand(o.value) })
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(TreeCaretSpacer, {}),
-                  multi && /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      "data-tree-control": true,
-                      className: "flex shrink-0",
-                      onPointerDownCapture: (event) => {
-                        checkboxShiftRef.current = event.shiftKey;
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkState, disabled: rowDisabled, onValueChange: toggle })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    OptionLabel,
-                    {
-                      label: o.label,
-                      className: treeLabelClass("sm", {
-                        // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
-                        emphasized: checkState !== false,
-                        disabled: rowDisabled,
-                        selectable: true
-                      })
-                    }
-                  )
-                ] })
-              ]
+                return;
+              }
+              if (o.isGroup) onToggleExpand(o.value);
             },
-            rowKey
-          )
-        );
-      }
-      if (o.isGroup) {
-        const isDepth1 = o.depth === 1;
-        const isFirstRow = idx === 0 && !showSelectAll && !searchVisible;
-        const groupTone = cn(
-          isDepth1 ? "bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium",
-          isDepth1 && !isFirstRow && "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)]"
-        );
-        if (multi) {
-          const leafValues = groupLeafValues.get(idx) ?? [];
-          const total = leafValues.length;
-          const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
-          const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
-          const groupDisabled = o.disabled || total === 0;
-          const groupFocused = focusedValue === `__group_${idx}__`;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              "data-select-row": true,
-              "data-index": idx,
-              id: groupFocused ? activeOptionId : void 0,
-              role: "option",
-              "aria-selected": groupState === true,
-              disabled: groupDisabled,
-              "data-select-focused": groupFocused ? "true" : void 0,
-              "data-select-active": groupFocused ? "true" : void 0,
-              className: cn(
-                "flex w-full select-none items-center gap-[8px] border-none py-[4px] pr-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
-                groupTone,
-                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
-                groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
-                // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
-                groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TreeConnector,
+                {
+                  guideline: true,
+                  size: "sm",
+                  depth: o.depth,
+                  hasChildren: o.isGroup,
+                  isLast: line?.isLast ?? true,
+                  ancestorLast: line?.ancestorLast ?? []
+                }
               ),
-              style: { paddingLeft: padLeft },
-              onMouseEnter: () => onHoverValue(`__group_${idx}__`),
-              onMouseLeave: () => onHoverValue(null),
-              onClick: () => onToggleGroup(leafValues),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
-                /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "min-w-0 truncate" }),
-                total > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TREE_CONTENT_CLASS, children: [
+                o.isGroup ? (
+                  // 비활성 그룹도 접고 편다 — 그룹이 비활성이어도 아래에 고를 수 있는 자식이 있을 수 있다.
+                  /* @__PURE__ */ jsxRuntime.jsx(TreeCaret, { expanded, onToggle: () => onToggleExpand(o.value) })
+                ) : /* @__PURE__ */ jsxRuntime.jsx(TreeCaretSpacer, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TreeSelectZone,
                   {
-                    className: cn(
-                      "shrink-0 font-medium",
-                      groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
+                    selectable: true,
+                    disabled: rowDisabled,
+                    control: multi && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-tree-control": true,
+                        className: "flex shrink-0",
+                        onPointerDownCapture: (event) => {
+                          checkboxShiftRef.current = event.shiftKey;
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkState, disabled: rowDisabled, onValueChange: toggle })
+                      }
                     ),
-                    children: [
-                      "(",
-                      selectedCount,
-                      "/",
-                      total,
-                      ")"
-                    ]
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      OptionLabel,
+                      {
+                        label: o.label,
+                        className: treeLabelClass("sm", {
+                          // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
+                          emphasized: checkState !== false,
+                          disabled: rowDisabled,
+                          selectable: true
+                        })
+                      }
+                    )
                   }
                 )
-              ]
-            },
-            rowKey
-          );
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+              ] })
+            ]
+          },
+          rowKey
+        )
+      );
+    }
+    if (o.isGroup) {
+      const isDepth1 = o.depth === 1;
+      const isFirstRow = idx === 0 && !showSelectAll;
+      const groupTone = cn(
+        isDepth1 ? "bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium",
+        isDepth1 && !isFirstRow && "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)]"
+      );
+      if (multi) {
+        const leafValues = groupLeafValues.get(idx) ?? [];
+        const total = leafValues.length;
+        const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+        const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
+        const groupDisabled = o.disabled || total === 0;
+        const groupFocused = focusedValue === `__group_${idx}__`;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
+            type: "button",
             "data-select-row": true,
             "data-index": idx,
+            id: groupFocused ? activeOptionId : void 0,
+            role: "option",
+            "aria-selected": groupState === true,
+            disabled: groupDisabled,
+            "data-select-focused": groupFocused ? "true" : void 0,
+            "data-select-active": groupFocused ? "true" : void 0,
             className: cn(
-              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
+              "flex w-full select-none items-center gap-(--cmp-listBoxItem-gap) border-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) text-left typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
               groupTone,
-              // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
-              // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
-              o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
+              groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
+              groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
+              // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
+              groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
             ),
             style: { paddingLeft: padLeft },
-            children: o.label
+            onMouseEnter: () => onHoverValue(`__group_${idx}__`),
+            onMouseLeave: () => onHoverValue(null),
+            onClick: () => onToggleGroup(leafValues),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
+              /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "min-w-0 truncate" }),
+              total > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 font-medium",
+                    groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
+                  ),
+                  children: [
+                    "(",
+                    selectedCount,
+                    "/",
+                    total,
+                    ")"
+                  ]
+                }
+              )
+            ]
           },
           rowKey
         );
       }
-      const isSelected = selected.includes(o.value);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          type: "button",
           "data-select-row": true,
           "data-index": idx,
-          id: focusedValue === o.value ? activeOptionId : void 0,
-          disabled: o.disabled,
-          role: "option",
-          "aria-selected": isSelected,
-          "aria-setsize": setSize,
-          "aria-posinset": setSize != null ? idx + 1 : void 0,
-          "data-select-focused": focusedValue === o.value ? "true" : void 0,
-          "data-select-active": focusedValue === o.value ? "true" : void 0,
           className: cn(
-            itemBase,
-            isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
-            focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
-            // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
-            // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
-            !o.disabled && activeClass
+            "select-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
+            groupTone,
+            // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
+            // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
+            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
+            o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
           ),
-          style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
-          onMouseEnter: () => onHoverValue(o.value),
-          onMouseLeave: () => onHoverValue(null),
-          onClick: (event) => onSelect(o.value, idx, event.shiftKey),
-          children: [
-            multi && /* @__PURE__ */ jsxRuntime.jsx(
-              CheckboxBox,
-              {
-                state: isSelected,
-                disabled: o.disabled,
-                focused: focusedValue === o.value
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
-          ]
+          style: { paddingLeft: padLeft },
+          children: o.label
         },
         rowKey
       );
-    }),
+    }
+    const isSelected = selected.includes(o.value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-select-row": true,
+        "data-index": idx,
+        id: focusedValue === o.value ? activeOptionId : void 0,
+        disabled: o.disabled,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-setsize": setSize,
+        "aria-posinset": setSize != null ? idx + 1 : void 0,
+        "data-select-focused": focusedValue === o.value ? "true" : void 0,
+        "data-select-active": focusedValue === o.value ? "true" : void 0,
+        className: cn(
+          itemBase,
+          isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
+          focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
+          // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
+          // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
+          !o.disabled && activeClass
+        ),
+        style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: padLeft },
+        onMouseEnter: () => onHoverValue(o.value),
+        onMouseLeave: () => onHoverValue(null),
+        onClick: (event) => onSelect(o.value, idx, event.shiftKey),
+        children: [
+          multi && /* @__PURE__ */ jsxRuntime.jsx(
+            CheckboxBox,
+            {
+              state: isSelected,
+              disabled: o.disabled,
+              focused: focusedValue === o.value
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
+        ]
+      },
+      rowKey
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: tree ? "tree" : "listbox", "aria-multiselectable": multi || void 0, children: [
+    selectAllRow,
+    topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: topSpacer } }),
+    wrapTreeMotion(rowNodes),
     bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: bottomSpacer } })
   ] });
 }
+function TreeRowsMotion({ opening, children }) {
+  const ref = react.useRef(null);
+  const animationRef = react.useRef(null);
+  const mountedRef = react.useRef(false);
+  react.useLayoutEffect(() => {
+    const el = ref.current;
+    if (el == null || typeof el.animate !== "function") return;
+    const from = !mountedRef.current && opening ? 0 : el.getBoundingClientRect().height;
+    mountedRef.current = true;
+    animationRef.current?.cancel();
+    animationRef.current = el.animate(
+      [{ height: `${from}px` }, { height: opening ? `${el.scrollHeight}px` : "0px" }],
+      // 접힌 뒤 줄이 목록에서 빠질 때까지 0 으로 붙잡아 둔다. 편 뒤에는 제 높이(auto)로 돌아간다
+      { ...TREE_BRANCH_MOTION, fill: opening ? "none" : "forwards" }
+    );
+  }, [opening]);
+  react.useEffect(() => () => animationRef.current?.cancel(), []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "overflow-hidden", "aria-hidden": opening ? void 0 : true, children });
+}
 function OptionLabel({ label, className }) {
   return isHtmlLabel(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: label });
 }
@@ -17116,40 +17382,17 @@ function TriggerLabel({ label }) {
   return /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label, className: "truncate" });
 }
 function TriggerRemoveButton({ ariaLabel, onRemove }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SGhostButton,
     {
-      role: "button",
-      tabIndex: 0,
-      "aria-label": ariaLabel,
-      className: "group/select-remove relative inline-flex shrink-0 cursor-pointer items-center justify-center",
-      style: {
-        width: "var(--cmp-ghostButton-xxs-size)",
-        height: "var(--cmp-ghostButton-xxs-size)",
-        borderRadius: "var(--cmp-ghostButton-radius-sm)"
-      },
+      icon: "close",
+      size: "xxs",
+      ariaLabel,
+      className: "shrink-0",
       onClick: (event) => {
-        event.preventDefault();
         event.stopPropagation();
         onRemove();
-      },
-      onKeyDown: (event) => {
-        if (event.key !== "Enter" && event.key !== " ") return;
-        event.preventDefault();
-        event.stopPropagation();
-        onRemove();
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/select-remove:opacity-5",
-            style: { background: "var(--cmp-ghostButton-default-hover-bg)" }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
-      ]
+      }
     }
   );
 }
@@ -17163,7 +17406,7 @@ function CheckboxBox({
     "span",
     {
       className: cn(
-        "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+        "flex size-(--cmp-checkbox-size) flex-shrink-0 items-center justify-center rounded-(--cmp-checkbox-radius) border-(length:--cmp-checkbox-borderWidth) border-solid",
         disabled ? (
           // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
           "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
@@ -17173,7 +17416,7 @@ function CheckboxBox({
         SIcon,
         {
           name: state2 === null ? "checkboxIndeterminate" : "checkboxCheck",
-          size: 12,
+          size: "var(--cmp-checkbox-icon)",
           color: disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
         }
       )
@@ -17806,7 +18049,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
       "span",
       {
         onMouseDown: (e) => startResize(i, e),
-        className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
+        className: "absolute right-0 top-1/2 z-[5] flex h-[var(--cmp-table-header-resizingBar-height)] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
         "aria-hidden": true,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
       },
@@ -17869,7 +18112,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                 colSpan: group.colSpan,
                 rowSpan: group.rowSpan,
                 className: cn(
-                  "relative border-b border-r border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                  "relative border-b border-r border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] px-[var(--cmp-table-header-paddingX)] typo-table-header text-[color:var(--sys-color-fg-primary)]",
                   group.firstIndex + group.colSpan === visibleCols.length && "border-r-0",
                   group.rowSpan === 2 && "border-b-0",
                   group.className
@@ -17911,7 +18154,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                     "span",
                     {
                       "aria-hidden": true,
-                      className: "pointer-events-none absolute right-0 top-1/2 h-[16px] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
+                      className: "pointer-events-none absolute right-0 top-1/2 h-[var(--cmp-table-header-resizingBar-height)] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
                     }
                   )
                 ]
@@ -17932,7 +18175,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                     // 세로 가운데도 어긋난다. 글자 줄높이는 아래 th__content 가 다시 준다.
                     headerGroupInfo && "border-r border-solid border-[color:var(--cmp-table-border-color)]",
                     headerGroupInfo && i === visibleCols.length - 1 && "border-r-0",
-                    "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
+                    "relative bg-[var(--cmp-table-header-bg)] px-[var(--cmp-table-header-paddingX)] typo-table-header leading-[0] text-[color:var(--sys-color-fg-primary)]",
                     stickyInfo(i).isSticky && "z-[6]",
                     col.thClass
                   ),
@@ -17951,7 +18194,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                           // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
                           // th 가 leading-[0] 이므로 글자 줄높이는 여기서 준다 (truncate 가
                           // overflow-hidden 이라 줄높이가 0이면 라벨이 잘려 사라진다).
-                          "inline-flex w-full min-w-0 items-center gap-[4px] leading-[20px]",
+                          "inline-flex w-full min-w-0 items-center gap-[var(--cmp-table-header-gap)] leading-[20px]",
                           col.align === "center" && "justify-center",
                           col.align === "right" && "justify-end"
                         ),
@@ -18849,8 +19092,8 @@ function useTruncatedValueTooltip({
   };
 }
 var FONT2 = {
-  sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
-  md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
+  sm: { typo: "typo-field-sm-default", paddingX: "var(--cmp-textinput-sm-paddingX)" },
+  md: { typo: "typo-field-md-default", paddingX: "var(--cmp-textinput-md-paddingX)" }
 };
 var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
   value,
@@ -18943,12 +19186,11 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
         {
           className: cn(
             "flex h-full w-full items-center",
+            f.typo,
             size === "md" ? "gap-[var(--cmp-textinput-md-gap)]" : "gap-[var(--cmp-textinput-sm-gap)]"
           ),
           style: {
-            padding: `0 ${f.paddingX}`,
-            fontSize: f.fontSize,
-            lineHeight: `${f.lineHeight}px`
+            padding: `0 ${f.paddingX}`
           },
           children: [
             prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-shrink-0 items-center", children: prefix }),
@@ -19022,8 +19264,8 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
   );
 });
 var PAD2 = {
-  sm: { fontSize: 12, lineHeight: 20, stepper: 20, icon: 12 },
-  md: { fontSize: 14, lineHeight: 24, stepper: 24, icon: 14 }
+  sm: { typo: "typo-field-sm-default", icon: 12 },
+  md: { typo: "typo-field-md-default", icon: 14 }
 };
 var toNumber = (val) => {
   if (val === null || val === void 0 || val === "") return null;
@@ -19258,7 +19500,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
         onClick: dir === "inc" ? increment : decrement,
         className: cn(
           "flex flex-shrink-0 items-center justify-center border border-solid border-transparent transition-colors",
-          off ? "cursor-not-allowed" : "cursor-pointer hover:border-[var(--color-border-accentLight)]"
+          off ? "cursor-not-allowed" : "cursor-pointer hover:border-[var(--cmp-numberInput-stepper-border-default)]"
         ),
         style: {
           width: `var(--cmp-numberInput-stepper-${size}-size)`,
@@ -19307,13 +19549,11 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex h-full w-full items-center",
+          className: cn("flex h-full w-full items-center", p.typo),
           style: {
             // 원본 sd-number-input: content gap = padding-x 토큰 (gap 토큰 아님)
             gap: `var(--cmp-numberInput-${size}-paddingX)`,
-            padding: `0 ${showButton ? padX : `calc(${padX} * 2)`}`,
-            fontSize: p.fontSize,
-            lineHeight: `${p.lineHeight}px`
+            padding: `0 ${showButton ? padX : `calc(${padX} * 2)`}`
           },
           children: [
             showButton && stepper("dec"),
@@ -19599,7 +19839,7 @@ function SCalendar({
                 onClick: () => view(y - 1, m)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center text-[14px] font-medium leading-[24px]", children: y }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center typo-field-md-medium", children: y }),
             /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,
               {
@@ -19624,7 +19864,7 @@ function SCalendar({
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex w-full min-w-[40px] items-center justify-center text-center text-[14px] font-medium leading-[24px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex w-full min-w-[40px] items-center justify-center text-center typo-field-md-medium", children: [
               m,
               "\uC6D4"
             ] }),
@@ -19701,7 +19941,7 @@ function SCalendar({
         }) }),
         legend.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-[var(--cmp-datepicker-calendar-legend-group-gap)] gap-y-[4px] text-[11px] leading-[18px]", children: legend.map((item4) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-[var(--cmp-datepicker-calendar-legend-group-gap)] gap-y-[4px] typo-field-xs-default", children: legend.map((item4) => /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
               className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-legend-gap)]",
@@ -19729,10 +19969,10 @@ function SCalendar({
 var MODE_LIST_HEIGHT = 240;
 var MODE_ITEM_HEIGHT = 28;
 var modeListItemClass = (selected, disabled) => cn(
-  "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
-  disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
-  !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
-  !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+  "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center",
+  disabled && "typo-field-sm-medium cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+  !disabled && !selected && "typo-field-sm-medium cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+  !disabled && selected && "typo-field-sm-bold cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
 );
 var MODE_NOUN = {
   date: "\uB0A0\uC9DC",
@@ -20042,9 +20282,9 @@ function SDatePicker({
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const baseDims = size === "md" ? {
-    padX: 16,
-    gap: 12,
-    icon: 20,
+    padX: "var(--cmp-datepicker-md-paddingX)",
+    gap: "var(--cmp-datepicker-md-gap)",
+    icon: "var(--cmp-datepicker-md-icon)",
     minW: 104,
     fieldMinW: 168,
     // 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도 행 전체로
@@ -20052,19 +20292,20 @@ function SDatePicker({
     // px 가 아니라 등급이라 --cmp-field-width-* 가 바뀌면 함께 따라간다.
     // 이 기본 상한이 걸리적거리는 자리(폭이 이미 좁게 정해진 팝오버 등)는 maxWidth prop 으로 덮는다
     fieldMaxW: "lg",
+    // 요일 폭 계산에 숫자가 필요해 남긴다. 렌더 타이포는 typo 가 맡는다
     fontSize: 14,
-    lineHeight: 24,
-    radius: 6
+    typo: "typo-field-md-default",
+    radius: "var(--cmp-datepicker-md-radius)"
   } : {
-    padX: 12,
-    gap: 8,
-    icon: 16,
+    padX: "var(--cmp-datepicker-sm-paddingX)",
+    gap: "var(--cmp-datepicker-sm-gap)",
+    icon: "var(--cmp-datepicker-sm-icon)",
     minW: 80,
     fieldMinW: 128,
     fieldMaxW: "md",
     fontSize: 12,
-    lineHeight: 20,
-    radius: 4
+    typo: "typo-field-sm-default",
+    radius: "var(--cmp-datepicker-sm-radius)"
   };
   const weekdayW = weekday ? weekdaySuffixWidth(baseDims.fontSize) : 0;
   const dims = {
@@ -20135,7 +20376,7 @@ function SDatePicker({
               "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
               disabled ? "cursor-not-allowed" : "cursor-pointer"
             ),
-            style: { padding: `0 ${dims.padX}px`, gap: dims.gap, borderRadius: dims.radius },
+            style: { padding: `0 ${dims.padX}`, gap: dims.gap, borderRadius: dims.radius },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
@@ -20150,11 +20391,9 @@ function SDatePicker({
                 "span",
                 {
                   id: triggerTextId,
-                  className: "flex-1 truncate text-center",
+                  className: cn("flex-1 truncate text-center", dims.typo),
                   style: {
                     minWidth: dims.minW,
-                    fontSize: dims.fontSize,
-                    lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasValue ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
                   children: hasValue ? weekday ? withWeekday(value) : value : resolvedPlaceholder
@@ -20365,7 +20604,7 @@ function RangeCalendar({
             className: cn(!isLeft && "invisible pointer-events-none")
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-[40px] flex-1 items-center justify-center text-center text-[14px] font-medium leading-[24px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-[40px] flex-1 items-center justify-center text-center typo-field-md-medium", children: [
           gy,
           ".",
           String(gm).padStart(2, "0")
@@ -20433,14 +20672,14 @@ function RangeCalendar({
     const hour = which === "start" ? sH : eH;
     const minute = which === "start" ? sM : eM;
     const num = (n, strip) => active && n !== "" ? strip ? String(Number(n)) : n : "-";
-    const INPUT_CLS = "h-[var(--cmp-datepicker-sm-height)] w-[40px] rounded-[var(--cmp-datepicker-sm-radius)] border border-solid border-[color:var(--cmp-datepicker-border-default)] bg-[var(--cmp-datepicker-bg-default)] text-center text-[12px] font-medium leading-[20px] text-[color:var(--cmp-datepicker-text-default)] outline-none placeholder:text-[color:var(--cmp-datepicker-text-disabled)] focus:border-[color:var(--cmp-datepicker-border-focus)] disabled:cursor-not-allowed";
+    const INPUT_CLS = "h-[var(--cmp-datepicker-sm-height)] w-[40px] rounded-[var(--cmp-datepicker-sm-radius)] border-[length:var(--cmp-datepicker-border-width)] border-solid border-[color:var(--cmp-datepicker-border-default)] bg-[var(--cmp-datepicker-bg-default)] text-center typo-field-sm-medium text-[color:var(--cmp-datepicker-text-default)] outline-none placeholder:text-[color:var(--cmp-datepicker-text-disabled)] focus:border-[color:var(--cmp-datepicker-border-focus)] disabled:cursor-not-allowed";
     const LABEL = "text-[color:var(--cmp-datepicker-calendar-time-date-label)]";
     const UNIT = "text-[color:var(--cmp-datepicker-calendar-time-date-unit)]";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "flex flex-1 items-center justify-center gap-[var(--cmp-datepicker-calendar-time-section-gap)] rounded-[var(--cmp-datepicker-calendar-time-radius)] px-[var(--cmp-datepicker-calendar-time-paddingX)] py-[var(--cmp-datepicker-calendar-time-paddingY)] text-[12px] font-medium leading-[20px]",
+          "flex flex-1 items-center justify-center gap-[var(--cmp-datepicker-calendar-time-section-gap)] rounded-[var(--cmp-datepicker-calendar-time-radius)] px-[var(--cmp-datepicker-calendar-time-paddingX)] py-[var(--cmp-datepicker-calendar-time-paddingY)] typo-field-sm-medium",
           active ? "bg-[var(--cmp-datepicker-calendar-time-bg-selected)]" : "bg-[var(--cmp-datepicker-calendar-time-bg-default)]"
         ),
         children: [
@@ -20502,7 +20741,7 @@ function RangeCalendar({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] text-[14px] font-medium leading-[24px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] typo-field-md-medium", children: [
             /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "chevronLeft", size: "xxs", ariaLabel: "prevYear", onClick: goPrevYear }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center", children: y }),
             /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "chevronRight", size: "xxs", ariaLabel: "nextYear", onClick: goNextYear })
@@ -20599,28 +20838,29 @@ function SDateRangePicker({
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const baseDims = size === "md" ? {
-    padX: 16,
-    gap: 12,
-    icon: 20,
+    padX: "var(--cmp-datepicker-md-paddingX)",
+    gap: "var(--cmp-datepicker-md-gap)",
+    icon: "var(--cmp-datepicker-md-icon)",
     minW: 104,
     fieldMinW: 260,
     // xl — 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 라 단일 날짜의 두 배가 넘는다.
     // 최소너비(260)가 이미 lg 를 넘으므로 상한도 한 등급 위여야 한다
     fieldMaxW: "xl",
+    // 요일 폭 계산에 숫자가 필요해 남긴다. 렌더 타이포는 typo 가 맡는다
     fontSize: 14,
-    lineHeight: 24,
-    radius: 6
+    typo: "typo-field-md-default",
+    radius: "var(--cmp-datepicker-md-radius)"
   } : {
-    padX: 12,
-    gap: 8,
-    icon: 16,
+    padX: "var(--cmp-datepicker-sm-paddingX)",
+    gap: "var(--cmp-datepicker-sm-gap)",
+    icon: "var(--cmp-datepicker-sm-icon)",
     minW: 80,
     fieldMinW: 216,
     // lg — 최소너비 216 이 md 를 넘어 md 로는 담기지 않는다
     fieldMaxW: "lg",
     fontSize: 12,
-    lineHeight: 20,
-    radius: 4
+    typo: "typo-field-sm-default",
+    radius: "var(--cmp-datepicker-sm-radius)"
   };
   const weekdayW = showWeekday ? weekdaySuffixWidth(baseDims.fontSize) * 2 : 0;
   const dims = {
@@ -20697,7 +20937,7 @@ function SDateRangePicker({
                   "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
                   disabled ? "cursor-not-allowed" : "cursor-pointer"
                 ),
-                style: { padding: `0 ${dims.padX}px`, gap: dims.gap, borderRadius: dims.radius },
+                style: { padding: `0 ${dims.padX}`, gap: dims.gap, borderRadius: dims.radius },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     SIcon,
@@ -20714,12 +20954,11 @@ function SDateRangePicker({
                       id: triggerTextId,
                       className: cn(
                         "flex-1 items-center",
+                        dims.typo,
                         hasDisplay ? "flex" : "block truncate text-center"
                       ),
                       style: {
                         minWidth: dims.minW,
-                        fontSize: dims.fontSize,
-                        lineHeight: `${dims.lineHeight}px`,
                         color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasDisplay ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
                       },
                       children: hasDisplay ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -20874,8 +21113,9 @@ var SChipImpl = /* @__PURE__ */ react.forwardRef(function SChip({
       {
         "aria-disabled": disabled ? "true" : void 0,
         className: cn(
-          "box-border inline-flex h-[var(--cmp-chip-height)] max-w-full items-center justify-center gap-[var(--cmp-chip-gap)] overflow-hidden whitespace-nowrap border-[length:var(--cmp-chip-border-width)] border-solid px-[var(--cmp-chip-paddingX)] text-[12px] leading-[20px] select-none",
-          editing ? "font-normal" : "font-medium",
+          "box-border inline-flex h-[var(--cmp-chip-height)] max-w-full items-center justify-center gap-[var(--cmp-chip-gap)] overflow-hidden whitespace-nowrap border-[length:var(--cmp-chip-border-width)] border-solid px-[var(--cmp-chip-paddingX)] select-none",
+          // chip.typography.focus / .default
+          editing ? "typo-control-xs-default" : "typo-control-xs-medium",
           disabled ? "cursor-not-allowed" : "",
           className
         ),
@@ -21047,7 +21287,7 @@ function SFilePicker({
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules?.length ? ruleError !== "" ? "error" : void 0 : void 0);
   const padX = size === "md" ? "var(--cmp-filepicker-md-paddingX)" : "var(--cmp-filepicker-sm-paddingX)";
-  const iconSize = size === "md" ? 20 : 16;
+  const iconSize = size === "md" ? "var(--cmp-filepicker-md-icon)" : "var(--cmp-filepicker-sm-icon)";
   const gapCls = size === "md" ? "gap-[var(--cmp-filepicker-md-gap)]" : "gap-[var(--cmp-filepicker-sm-gap)]";
   const inlinePlaceholder = inline && !disabled && !hasFiles;
   const showListbox = multiple && showMultipleListBox;
@@ -21101,7 +21341,8 @@ function SFilePicker({
                 {
                   id: displayTextId,
                   className: cn(
-                    "min-w-0 flex-1 truncate text-[12px]",
+                    "min-w-0 flex-1 truncate",
+                    size === "md" ? "typo-field-md-default" : "typo-field-sm-default",
                     inlinePlaceholder && "text-[color:var(--cmp-filepicker-text-placeholder)] transition-colors group-hover/filepicker:text-[color:var(--cmp-filepicker-text-default)]"
                   ),
                   style: inlinePlaceholder ? void 0 : {
@@ -21275,10 +21516,10 @@ function SKeyValueTable({
     skipOccupied();
     maxCols = Math.max(maxCols, col, occupied.length);
   });
-  const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[8px] rounded-t-none" : "rounded-[8px]";
+  const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
   const frameClass = cn(
     "overflow-hidden",
-    bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
+    bordered && "border-[length:var(--cmp-table-border-width)] border-solid border-[color:var(--cmp-table-border-color)]",
     radiusClass
   );
   const table = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -21314,7 +21555,7 @@ function SKeyValueTable({
                     paddingBottom: cellPadY
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full items-center justify-between gap-[var(--cmp-table-header-gap)]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-[8px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-[var(--cmp-table-content-gap)]", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-bold leading-[20px] text-[color:var(--sys-color-fg-primary)]", children: f.label }),
                       f.required && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "asterisk", size: 12, color: "var(--sys-color-fg-accent)" })
                     ] }),
@@ -23422,22 +23663,15 @@ function SToast({
         ...style
       },
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: 16, color: iconColor }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "text-[14px] font-medium leading-[24px] text-nowrap",
-            style: { color: content },
-            children: message
-          }
-        ),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: "var(--cmp-toast-icon)", color: iconColor }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-feedback-md-medium text-nowrap", style: { color: content }, children: message }),
         link && /* @__PURE__ */ jsxRuntime.jsx(
           "a",
           {
             href: link,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "text-[14px] font-bold leading-[24px] underline text-nowrap",
+            className: "typo-feedback-md-underline text-nowrap",
             style: { color: linkColor },
             children: linkLabel || link
           }
@@ -23980,9 +24214,9 @@ var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClassName, on
   ) });
 });
 var SIZE_CONFIG2 = {
-  xs: { fontSize: 12, lineHeight: 20, radius: "var(--cmp-radioButton-radius-sm)" },
-  sm: { fontSize: 12, lineHeight: 20, radius: "var(--cmp-radioButton-radius-sm)" },
-  md: { fontSize: 14, lineHeight: 24, radius: "var(--cmp-radioButton-radius-md)" }
+  xs: { typo: "typo-control-xs-medium", radius: "var(--cmp-radioButton-radius-sm)" },
+  sm: { typo: "typo-control-xs-medium", radius: "var(--cmp-radioButton-radius-sm)" },
+  md: { typo: "typo-control-sm-default", radius: "var(--cmp-radioButton-radius-md)" }
 };
 function SRadioButton({
   options = [],
@@ -24031,8 +24265,9 @@ function SRadioButton({
               onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
               onBlur: tooltip ? () => setHoveredValue(null) : void 0,
               className: cn(
-                "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
-                first ? "" : "-ml-px",
+                "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border-(length:--cmp-radioButton-border-width) border-solid transition-colors",
+                s.typo,
+                first ? "" : "ml-(--cmp-radioButton-group-gap)",
                 selected ? "z-10" : "",
                 !od && !ro && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
                 od ? "cursor-not-allowed" : ro ? "cursor-default" : "cursor-pointer"
@@ -24040,8 +24275,6 @@ function SRadioButton({
               style: {
                 height: `var(--cmp-radioButton-${size}-height)`,
                 padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
-                fontSize: `${s.fontSize}px`,
-                lineHeight: `${s.lineHeight}px`,
                 borderRadius: [
                   first ? s.radius : "0",
                   last ? s.radius : "0",
@@ -24078,6 +24311,7 @@ function SRadioCard({
   value,
   label,
   subtitle,
+  children,
   tag,
   disabled = false,
   name,
@@ -24105,72 +24339,85 @@ function SRadioCard({
   };
   const textColor = disabled ? "text-(--sys-color-disabled-text)" : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
+    "div",
     {
-      ...cardInteractiveProps,
-      "aria-disabled": disabled || void 0,
       className: cn(
-        "box-border flex w-full flex-col rounded-(--cmp-radioCard-radius) border-(length:--cmp-radioCard-border-width) border-solid px-(--cmp-radioCard-paddingX) py-(--cmp-radioCard-paddingY) transition-colors",
-        disabled ? "cursor-not-allowed border-(--cmp-radioCard-border-default) bg-(--cmp-radioCard-bg-disabled)" : checked ? "cursor-pointer border-(--cmp-radioCard-border-selected) bg-(--cmp-radioCard-bg-selected)" : "cursor-pointer border-(--cmp-radioCard-border-default) bg-(--cmp-radioCard-bg-default) hover:border-(--cmp-radioCard-border-hover) hover:bg-(--cmp-radioCard-bg-hover)",
+        "box-border flex w-full flex-col rounded-(--cmp-radioCard-radius) border-(length:--cmp-radioCard-border-width) border-solid transition-colors",
+        disabled ? "border-(--cmp-radioCard-border-default) bg-(--cmp-radioCard-bg-disabled)" : checked ? "border-(--cmp-radioCard-border-selected) bg-(--cmp-radioCard-bg-selected)" : "border-(--cmp-radioCard-border-default) bg-(--cmp-radioCard-bg-default) hover:border-(--cmp-radioCard-border-hover) hover:bg-(--cmp-radioCard-bg-hover)",
         className
       ),
       style,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-(--cmp-radioCard-gap)", children: [
-          native && /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "radio",
-              name,
-              value: valStr,
-              checked,
-              disabled,
-              onChange: () => onValueChange?.(val),
-              className: "sr-only"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "flex h-(--cmp-radio-size) w-(--cmp-radio-size) shrink-0 items-center justify-center rounded-(--cmp-radio-radius) border-(length:--cmp-radio-borderWidth) border-solid border-(--rc-dot-border) bg-(--rc-dot-bg)",
-              style: {
-                "--rc-dot-bg": disabled ? "var(--cmp-radio-bg-disabled)" : "var(--cmp-radio-bg-default)",
-                "--rc-dot-border": disabled ? "var(--cmp-radio-border-disabled)" : checked ? "var(--cmp-radio-border-active)" : "var(--cmp-radio-border-default)"
-              },
-              children: checked && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            ...cardInteractiveProps,
+            "aria-disabled": disabled || void 0,
+            className: cn(
+              "box-border flex w-full flex-col px-(--cmp-radioCard-paddingX) py-(--cmp-radioCard-paddingY)",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-(--cmp-radioCard-gap)", children: [
+                native && /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name,
+                    value: valStr,
+                    checked,
+                    disabled,
+                    onChange: () => onValueChange?.(val),
+                    className: "sr-only"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "flex h-(--cmp-radio-size) w-(--cmp-radio-size) shrink-0 items-center justify-center rounded-(--cmp-radio-radius) border-(length:--cmp-radio-borderWidth) border-solid border-(--rc-dot-border) bg-(--rc-dot-bg)",
+                    style: {
+                      "--rc-dot-bg": disabled ? "var(--cmp-radio-bg-disabled)" : "var(--cmp-radio-bg-default)",
+                      "--rc-dot-border": disabled ? "var(--cmp-radio-border-disabled)" : checked ? "var(--cmp-radio-border-active)" : "var(--cmp-radio-border-default)"
+                    },
+                    children: checked && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "h-(--cmp-radio-dot-size) w-(--cmp-radio-dot-size) rounded-(--cmp-radio-radius) bg-(--rc-dot-fill)",
+                        style: {
+                          "--rc-dot-fill": disabled ? "var(--cmp-radio-dot-disabled)" : "var(--cmp-radio-dot-default)"
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("grid min-w-0", textColor ?? "text-(--cmp-radioCard-label-color)"), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "typo-body-md-bold invisible", style: { gridArea: "1 / 1" }, children: label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: checked ? "typo-body-md-bold" : "typo-body-md-semibold",
+                      style: { gridArea: "1 / 1" },
+                      children: label
+                    }
+                  )
+                ] }),
+                tag && /* @__PURE__ */ jsxRuntime.jsx(STag, { ...tag, size: "xs", className: "ml-auto" })
+              ] }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: "h-(--cmp-radio-dot-size) w-(--cmp-radio-dot-size) rounded-(--cmp-radio-radius) bg-(--rc-dot-fill)",
-                  style: {
-                    "--rc-dot-fill": disabled ? "var(--cmp-radio-dot-disabled)" : "var(--cmp-radio-dot-default)"
-                  }
+                  className: cn(
+                    "typo-body-sm-default pl-(--cmp-radioCard-subtitle-paddingLeft)",
+                    textColor ?? "text-(--cmp-radioCard-subtitle-color)"
+                  ),
+                  children: subtitle
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("grid min-w-0", textColor ?? "text-(--cmp-radioCard-label-color)"), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "typo-body-md-bold invisible", style: { gridArea: "1 / 1" }, children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: checked ? "typo-body-md-bold" : "typo-body-md-semibold",
-                style: { gridArea: "1 / 1" },
-                children: label
-              }
-            )
-          ] }),
-          tag && /* @__PURE__ */ jsxRuntime.jsx(STag, { ...tag, size: "xs", className: "ml-auto" })
-        ] }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "typo-body-sm-default pl-(--cmp-radioCard-subtitle-paddingLeft)",
-              textColor ?? "text-(--cmp-radioCard-subtitle-color)"
-            ),
-            children: subtitle
+            ]
           }
-        )
+        ),
+        children != null && children !== false && // 라벨 왼쪽 끝(카드 여백 + 서브타이틀 들여쓰기)에 맞춘다. 서브타이틀과의 간격은 label 의 아래 여백이다
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "box-border w-full pr-(--cmp-radioCard-paddingX) pb-(--cmp-radioCard-paddingY) pl-[calc(var(--cmp-radioCard-paddingX)+var(--cmp-radioCard-subtitle-paddingLeft))]", children })
       ]
     }
   );
@@ -24205,7 +24452,8 @@ function SRadioCardGroup({
           tag: o.tag,
           name: groupName,
           disabled: disabled || o.disabled,
-          onValueChange
+          onValueChange,
+          children: o.content
         },
         String(o.value)
       ))
@@ -26544,6 +26792,7 @@ var CHIPFILTER = {
   dividerHeight: "var(--cmp-chipFilter-divider-height)",
   chipHeight: "var(--cmp-chipFilter-chip-height)",
   chipRadius: "var(--cmp-chipFilter-chip-radius)",
+  chipPaddingX: "var(--cmp-chipFilter-chip-paddingX)",
   chipGap: "var(--cmp-chipFilter-chip-gap)",
   chipDefaultBg: "var(--cmp-chipFilter-chip-default-bg)",
   chipDefaultBorder: "var(--cmp-chipFilter-chip-default-border)",
@@ -26554,7 +26803,7 @@ var CHIPFILTER = {
   chipAppliedBg: "var(--cmp-chipFilter-chip-applied-bg)",
   chipAppliedBorder: "var(--cmp-chipFilter-chip-applied-border)",
   chipAppliedLabel: "var(--cmp-chipFilter-chip-applied-text-label)",
-  chipAppliedValue: "var(--color-brilliantblue-80)",
+  chipAppliedValue: "var(--cmp-chipFilter-chip-applied-text-data)",
   chipDisabledBg: "var(--cmp-chipFilter-chip-disabled-bg)",
   chipDisabledBorder: "var(--cmp-chipFilter-chip-disabled-border)",
   chipDisabledText: "var(--cmp-chipFilter-chip-disabled-text)",
@@ -27189,20 +27438,13 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   onValueChange: (next) => emitValueAndSearch(field.key, next)
                 }),
                 addable && !disabled && !field.disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  SGhostButton,
                   {
-                    type: "button",
-                    "aria-label": `${field.label} \uD544\uD130 \uC81C\uAC70`,
-                    className: "inline-flex size-[16px] shrink-0 items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)] border-none bg-transparent p-0",
-                    onClick: handleClear,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SIcon,
-                      {
-                        name: "close",
-                        size: 12,
-                        color: "var(--cmp-ghostButton-default-content)"
-                      }
-                    )
+                    icon: "close",
+                    size: "xxs",
+                    ariaLabel: `${field.label} \uD544\uD130 \uC81C\uAC70`,
+                    className: "shrink-0",
+                    onClick: handleClear
                   }
                 )
               ] }, field.key) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -27245,7 +27487,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                 {
                   type: "button",
                   disabled: disabled || inactiveFields.length === 0,
-                  className: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-[var(--cmp-chipFilter-addButton-gap)] whitespace-nowrap border border-solid bg-[var(--cmp-chipFilter-addButton-bg)] px-[var(--cmp-chipFilter-addButton-paddingX)] text-[12px] font-medium leading-[20px] outline-none disabled:cursor-not-allowed",
+                  className: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-[var(--cmp-chipFilter-addButton-gap)] whitespace-nowrap border border-solid bg-[var(--cmp-chipFilter-addButton-bg)] px-[var(--cmp-chipFilter-addButton-paddingX)] typo-control-xs-medium outline-none disabled:cursor-not-allowed",
                   style: {
                     minHeight: "var(--cmp-chipFilter-addButton-height)" ,
                     borderRadius: "var(--cmp-chipFilter-addButton-radius)" ,
@@ -27257,7 +27499,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                       SIcon,
                       {
                         name: "add",
-                        size: 12,
+                        size: "var(--cmp-chipFilter-addButton-icon)",
                         color: disabled || inactiveFields.length === 0 ? CHIPFILTER.addTextDisabled : CHIPFILTER.addText
                       }
                     ),
@@ -27293,9 +27535,9 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                 onClick: reset,
                 className: cn(
                   "shrink-0",
-                  // 부모 flex gap(6px)은 칩 사이 간격 기준이라, 필터 추가 버튼과의 12px 간격을 맞추려면
-                  // 부족한 만큼(12px - gap)을 추가로 띄운다. 필터 추가가 없을 땐 divider와 이미 12px이라 불필요.
-                  hasAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+                  // 부모 flex gap(chip-group)은 칩 사이 간격 기준이라, 필터 추가 버튼과의 bar-gap 간격을 맞추려면
+                  // 부족한 만큼(bar-gap - chip-group)을 추가로 띄운다. 필터 추가가 없을 땐 divider와 이미 bar-gap이라 불필요.
+                  hasAddButton && "ml-[calc(var(--cmp-chipFilter-bar-gap)_-_var(--cmp-chipFilter-chip-group))]"
                 )
               }
             )
@@ -27349,7 +27591,7 @@ function Divider({ inset, top } = {}) {
       className: cn(
         "inline-flex w-px shrink-0 bg-[var(--chipfilter-bar-border)]",
         top ? "mt-[2px] self-start" : "my-auto",
-        inset && "mx-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+        inset && "mx-[calc(var(--cmp-chipFilter-bar-gap)_-_var(--cmp-chipFilter-chip-group))]"
       ),
       style: { height: "var(--chipfilter-divider-height)" }
     }
@@ -27389,87 +27631,97 @@ function FilterChip({
   const border = disabled ? CHIPFILTER.chipDisabledBorder : warning ? CHIPFILTER.chipWarningBorder : applied ? active ? "var(--color-blue-strong)" : CHIPFILTER.chipAppliedBorder : active ? CHIPFILTER.chipActiveBorder : CHIPFILTER.chipDefaultBorder;
   const background = disabled ? CHIPFILTER.chipDisabledBg : applied ? CHIPFILTER.chipAppliedBg : CHIPFILTER.chipDefaultBg;
   const textColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipDefaultText;
+  const hasClear = !disabled && showClear && (applied || showClearWhenEmpty);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "div",
     {
-      ref: refCallback,
-      type: "button",
-      disabled,
-      "aria-expanded": active,
       onPointerDown: (event) => event.stopPropagation(),
-      onClick: onOpen,
-      className: "group/chip-filter inline-flex max-w-full shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border border-solid px-[var(--cmp-chipFilter-chip-paddingX)] text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
+      className: "inline-flex max-w-full shrink-0 items-stretch whitespace-nowrap border border-solid",
       style: {
         minHeight: CHIPFILTER.chipHeight,
         gap: CHIPFILTER.chipGap,
         borderRadius: CHIPFILTER.chipRadius,
         borderColor: border,
         background,
-        color: textColor
+        paddingRight: hasClear ? CHIPFILTER.chipPaddingX : void 0
       },
       children: [
-        field.required && /* @__PURE__ */ jsxRuntime.jsx(
-          SIcon,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
-            name: "asterisk",
-            size: 12,
-            color: disabled ? CHIPFILTER.chipDisabledText : "var(--cmp-tag-darkblue-content)"
+            ref: refCallback,
+            type: "button",
+            disabled,
+            "aria-expanded": active,
+            onClick: onOpen,
+            className: "inline-flex min-w-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 typo-body-sm-default outline-none disabled:cursor-not-allowed",
+            style: {
+              gap: CHIPFILTER.chipGap,
+              paddingLeft: CHIPFILTER.chipPaddingX,
+              paddingRight: hasClear ? void 0 : CHIPFILTER.chipPaddingX,
+              color: textColor
+            },
+            children: [
+              field.required && /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "asterisk",
+                  size: "var(--cmp-chipFilter-chip-icon-essential)",
+                  color: disabled ? CHIPFILTER.chipDisabledText : "var(--cmp-tag-darkblue-content)"
+                }
+              ),
+              applied ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-[4px] truncate", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "typo-body-sm-bold",
+                    style: {
+                      color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel
+                    },
+                    children: field.label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel
+                    },
+                    children: ":"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "min-w-0 truncate typo-body-sm-bold",
+                    style: {
+                      color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue
+                    },
+                    children: valueText
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", active && "typo-body-sm-bold"), children: field.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SIcon,
+                  {
+                    name: "caretDown",
+                    size: "var(--cmp-chipFilter-chip-icon-caret)",
+                    color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipCaret
+                  }
+                )
+              ] })
+            ]
           }
         ),
-        applied ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-[4px] truncate", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "font-bold",
-              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel },
-              children: field.label
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel },
-              children: ":"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "min-w-0 truncate font-bold",
-              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue },
-              children: valueText
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", active && "font-bold"), children: field.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SIcon,
-            {
-              name: "caretDown",
-              size: 12,
-              color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipCaret
-            }
-          )
-        ] }),
-        !disabled && showClear && (applied || showClearWhenEmpty) && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        hasClear && /* @__PURE__ */ jsxRuntime.jsx(
+          SGhostButton,
           {
-            role: "button",
-            tabIndex: 0,
-            "aria-label": `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
-            className: "inline-flex size-[16px] items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)]",
-            onClick: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              onClear();
-            },
-            onKeyDown: (event) => {
-              if (event.key !== "Enter" && event.key !== " ") return;
-              event.preventDefault();
-              event.stopPropagation();
-              onClear();
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+            icon: "close",
+            size: "xxs",
+            ariaLabel: `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
+            className: "shrink-0 self-center",
+            onClick: onClear
           }
         )
       ]
@@ -27849,47 +28101,18 @@ function InlineDatePresetFilter({
   const badgeBackground = disabled ? CHIPFILTER.chipDisabledBg : CHIPFILTER.chipAppliedBg;
   const badgeLabelColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel;
   const badgeValueColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue;
-  const badge = applied && /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: "inline-flex shrink-0 items-center gap-[4px] whitespace-nowrap border border-solid px-[var(--cmp-chipFilter-chip-paddingX)] text-[12px] leading-[20px]",
-      style: {
-        minHeight: CHIPFILTER.chipHeight,
-        borderRadius: CHIPFILTER.chipRadius,
-        borderColor: badgeBorder,
-        background: badgeBackground,
-        color: badgeLabelColor,
-        cursor: rangeValue && !disabled ? "pointer" : void 0
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
-          field.label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: badgeValueColor }, children: displayValue(field, value) }),
-        !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            role: "button",
-            tabIndex: 0,
-            "aria-label": `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
-            className: "inline-flex size-[16px] items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)]",
-            onClick: (event) => {
-              event.stopPropagation();
-              onClear();
-            },
-            onKeyDown: (event) => {
-              if (event.key !== "Enter" && event.key !== " ") return;
-              event.preventDefault();
-              event.stopPropagation();
-              onClear();
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
-          }
-        )
-      ]
-    }
-  );
+  const hasClear = !disabled && showClear;
+  const badgeTextStyle = {
+    paddingLeft: CHIPFILTER.chipPaddingX,
+    paddingRight: hasClear ? void 0 : CHIPFILTER.chipPaddingX
+  };
+  const badgeText = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-sm-bold", children: [
+      field.label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold", style: { color: badgeValueColor }, children: displayValue(field, value) })
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-[8px]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       SRadioButton,
@@ -27901,43 +28124,71 @@ function InlineDatePresetFilter({
         onValueChange: (next) => selectPreset(String(next))
       }
     ),
-    applied && (rangeValue ? (
-      // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
-      // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            disabled,
-            className: "border-none bg-transparent p-0 outline-none disabled:cursor-not-allowed",
-            children: badge
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover13__namespace.Content,
-          {
-            side: "bottom",
-            align: "start",
-            sideOffset: 4,
-            className: cn("z-50", FLOATING_SLIDE_ANIM),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              RangeCalendar,
-              {
-                value: rangeValue,
-                selectable: field.selectable,
-                maxRange: field.maxRange,
-                onSelect: (range) => {
-                  setSelectedId(null);
-                  onValueChange(range);
-                  setPickerOpen(false);
+    applied && // 뱃지 모양(테두리·배경)은 바깥이 맡고, 라벨·값 칸과 지우기 × 를 형제로 둔다 — FilterChip 과
+    // 같은 이유로, 캘린더를 여는 버튼 안에 × 를 넣지 않는다.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-flex shrink-0 items-stretch gap-[4px] whitespace-nowrap border border-solid typo-body-sm-default",
+        style: {
+          minHeight: CHIPFILTER.chipHeight,
+          borderRadius: CHIPFILTER.chipRadius,
+          borderColor: badgeBorder,
+          background: badgeBackground,
+          color: badgeLabelColor,
+          paddingRight: hasClear ? CHIPFILTER.chipPaddingX : void 0
+        },
+        children: [
+          rangeValue ? (
+            // 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다. 직접 고르면 프리셋 선택은 해제된다.
+            /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled,
+                  className: "inline-flex cursor-pointer items-center gap-[4px] border-none bg-transparent p-0 outline-none disabled:cursor-not-allowed",
+                  style: badgeTextStyle,
+                  children: badgeText
                 }
-              }
-            )
-          }
-        ) })
-      ] })
-    ) : badge)
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover13__namespace.Content,
+                {
+                  side: "bottom",
+                  align: "start",
+                  sideOffset: 4,
+                  className: cn("z-50", FLOATING_SLIDE_ANIM),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    RangeCalendar,
+                    {
+                      value: rangeValue,
+                      selectable: field.selectable,
+                      maxRange: field.maxRange,
+                      onSelect: (range) => {
+                        setSelectedId(null);
+                        onValueChange(range);
+                        setPickerOpen(false);
+                      }
+                    }
+                  )
+                }
+              ) })
+            ] })
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-[4px]", style: badgeTextStyle, children: badgeText }),
+          hasClear && /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "close",
+              size: "xxs",
+              ariaLabel: `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
+              className: "shrink-0 self-center",
+              onClick: onClear
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 var MATCH_MODE_OPTIONS = [
@@ -28026,7 +28277,7 @@ function KeywordEditor({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "shrink-0 whitespace-nowrap text-[12px] font-medium leading-[20px]",
+            className: "shrink-0 whitespace-nowrap typo-body-sm-medium",
             style: { color: CHIPFILTER.listboxLabel },
             children: "\uAC80\uC0C9 \uC870\uAC74 :"
           }
@@ -28086,7 +28337,7 @@ function KeywordEntryRow({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "group flex w-full items-center justify-between gap-[8px] text-[12px] leading-[20px]",
+      className: "group flex w-full items-center justify-between gap-[8px] typo-body-sm-default",
       style: {
         paddingTop: CHIPFILTER.itemPaddingY,
         paddingBottom: CHIPFILTER.itemPaddingY,
@@ -28097,13 +28348,13 @@ function KeywordEntryRow({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", !disabled && "group-hover:font-bold"), children: label }),
         !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          SGhostButton,
           {
-            type: "button",
-            "aria-label": `${label} \uC0AD\uC81C`,
-            className: "invisible inline-flex size-[16px] shrink-0 cursor-pointer items-center justify-center group-hover:visible",
-            onClick: onRemove,
-            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+            icon: "close",
+            size: "xxs",
+            ariaLabel: `${label} \uC0AD\uC81C`,
+            className: "invisible shrink-0 group-hover:visible",
+            onClick: onRemove
           }
         )
       ]
@@ -28112,7 +28363,7 @@ function KeywordEntryRow({
 }
 var OPTION_SEARCH_THRESHOLD = 11;
 var filterFlatOptions = (flat, query) => filterDepthRows(flat, (option) => option.label.toLowerCase().includes(query));
-var depthPaddingLeft = (depth) => depth === 1 ? 12 : depth === 2 ? 20 : 28;
+var depthPaddingLeft = (depth) => LIST_BOX_ITEM_PADDING_LEFT[depth === 1 ? 1 : depth === 2 ? 2 : 3];
 function OptionList({
   field,
   value,
@@ -28328,14 +28579,14 @@ function OptionCheckbox({ checked, disabled }) {
     "span",
     {
       className: cn(
-        "inline-flex size-[16px] shrink-0 items-center justify-center rounded-[2px] border border-solid",
+        "inline-flex size-(--cmp-checkbox-size) shrink-0 items-center justify-center rounded-(--cmp-checkbox-radius) border-(length:--cmp-checkbox-borderWidth) border-solid",
         disabled ? "border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]" : filled ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
       ),
       children: filled && /* @__PURE__ */ jsxRuntime.jsx(
         SIcon,
         {
           name: checked === null ? "checkboxIndeterminate" : "checkboxCheck",
-          size: 12,
+          size: "var(--cmp-checkbox-icon)",
           color: disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
         }
       )
@@ -28380,8 +28631,8 @@ function MenuItem({
       onMouseEnter,
       onClick,
       className: cn(
-        "flex w-full min-w-0 cursor-pointer items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
-        selected ? "font-bold" : "font-normal",
+        "flex w-full min-w-0 cursor-pointer items-center gap-[8px] border-none bg-transparent text-left outline-none disabled:cursor-not-allowed",
+        selected ? "typo-body-sm-bold" : "typo-body-sm-default",
         !disabled && "hover:font-bold"
       ),
       style: {
@@ -28618,7 +28869,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
       labelPosition,
       subLabel,
       labelWidth,
-      labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
+      labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + var(--cmp-chipInput-borderWidth) * 2)`,
       icon,
       iconColor,
       labelTooltip,
@@ -28703,8 +28954,8 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                     {
                       "aria-hidden": true,
                       className: cn(
-                        "invisible col-start-1 row-start-1 whitespace-pre font-normal",
-                        size === "md" ? "text-14 leading-sd-24" : "text-12 leading-sd-20"
+                        "invisible col-start-1 row-start-1 whitespace-pre",
+                        size === "md" ? "typo-field-md-default" : "typo-field-sm-default"
                       ),
                       children: inputValue !== "" ? inputValue : values.length === 0 ? placeholder : ""
                     }
@@ -28723,9 +28974,9 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                       "aria-activedescendant": showDropdown && activeIndex >= 0 ? activeOptionId : void 0,
                       "aria-autocomplete": "list",
                       className: cn(
-                        "s-chip-input__input col-start-1 row-start-1 w-full border-0 bg-transparent p-0 font-normal text-(--cmp-chip-content-focus) outline-none placeholder:text-(--cmp-chipInput-text-placeholder) disabled:cursor-not-allowed",
+                        "s-chip-input__input col-start-1 row-start-1 w-full border-0 bg-transparent p-0 text-(--cmp-chip-content-focus) outline-none placeholder:text-(--cmp-chipInput-text-placeholder) disabled:cursor-not-allowed",
                         AUTOFILL_RESET_CLASS,
-                        size === "md" ? "text-14 leading-sd-24" : "text-12 leading-sd-20"
+                        size === "md" ? "typo-field-md-default" : "typo-field-sm-default"
                       ),
                       style: {
                         minWidth: "1ch",
@@ -28895,7 +29146,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             "aria-selected": selected || active,
                             tabIndex: -1,
                             className: cn(
-                              "s-chip-input__suggestion-item flex shrink-0 cursor-pointer items-center gap-sd-8 overflow-hidden text-ellipsis whitespace-nowrap px-sd-12 py-sd-4 text-12 leading-sd-20",
+                              "s-chip-input__suggestion-item flex shrink-0 cursor-pointer items-center gap-(--cmp-listBoxItem-gap) overflow-hidden text-ellipsis whitespace-nowrap py-(--cmp-listBoxItem-paddingY) pl-(--cmp-listBoxItem-paddingLeft-depth1) pr-(--cmp-listBoxItem-paddingRight) typo-field-sm-default",
                               selected ? "cursor-default overflow-visible font-bold text-(--cmp-listBoxItem-content-selected)" : active ? "bg-(--cmp-listBoxItem-bg-hover) font-medium text-(--cmp-listBoxItem-content-hover)" : "text-(--cmp-listBoxItem-content-default)"
                             ),
                             onMouseDown: (e) => {
@@ -29104,7 +29355,7 @@ var TIMEPICKER_SIZE_CONFIG = {
     gap: V4("sm-gap"),
     icon: V4("sm-icon"),
     radius: V4("sm-radius"),
-    // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
+    typography: "typo-field-sm-default",
     fontSize: 12,
     lineHeight: 20,
     minWidth: 80,
@@ -29117,7 +29368,7 @@ var TIMEPICKER_SIZE_CONFIG = {
     gap: V4("md-gap"),
     icon: V4("md-icon"),
     radius: V4("md-radius"),
-    // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
+    typography: "typo-field-md-default",
     fontSize: 14,
     lineHeight: 24,
     minWidth: 96,
@@ -29448,11 +29699,9 @@ function STimePicker({
                 "span",
                 {
                   id: triggerTextId,
-                  className: "flex-1 truncate text-center",
+                  className: cn("flex-1 truncate text-center", dims.typography),
                   style: {
                     minWidth: dims.minWidth,
-                    fontSize: dims.fontSize,
-                    lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-timepicker-text-disabled)" : hasValue ? "var(--cmp-timepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
                   children: hasValue ? displayText : placeholder
@@ -29556,7 +29805,7 @@ function RangeTimeSelector({
       className: "flex flex-col items-center",
       style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-nowrap text-center text-[12px] font-bold leading-[20px] text-[var(--cmp-timepicker-selector-range-heading-color)]", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-nowrap text-center typo-field-sm-bold text-[var(--cmp-timepicker-selector-range-heading-color)]", children: title }),
         /* @__PURE__ */ jsxRuntime.jsx(
           TimeListbox,
           {
@@ -29723,11 +29972,9 @@ function STimeRangePicker({
                 "span",
                 {
                   id: triggerTextId,
-                  className: "flex-1 truncate text-center",
+                  className: cn("flex-1 truncate text-center", dims.typography),
                   style: {
                     minWidth: dims.minWidth,
-                    fontSize: dims.fontSize,
-                    lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-timepicker-text-disabled)" : hasValue ? "var(--cmp-timepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
                   children: hasValue ? displayText : placeholder