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

package/dist/index.cjs

@@ -7711,32 +7711,47 @@ var TREE_LABEL_TYPOGRAPHY = {
     rowHeight: "h-[32px]"
   }
 };
-function collectIds(nodes) {
-  return nodes.flatMap((node) => [node.id, ...collectIds(node.children ?? [])]);
-}
-function collectSelectableIds(node) {
-  if (node.disabled) return [];
-  return [node.id, ...(node.children ?? []).flatMap(collectSelectableIds)];
+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_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, {
+  emphasized,
+  disabled,
+  selectable
+}) {
+  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)",
+    emphasized ? typography.selected : typography.default,
+    disabled && "opacity-60",
+    disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
+  );
 }
-function toSelectedSet(value) {
-  return new Set(value ?? []);
+function isRowControlClick(event) {
+  const control = event.target.closest("[data-tree-control]");
+  return control != null && event.currentTarget.contains(control);
 }
-var TREE_ALL_NODE = { id: "__all__", label: "\uC804\uCCB4" };
-function getSelectionState(node, selectedSet) {
-  const selectableChildren = (node.children ?? []).filter(
-    (child) => collectSelectableIds(child).length > 0
-  );
-  if (selectableChildren.length === 0) {
-    return { selected: selectedSet.has(node.id), indeterminate: false };
-  }
-  const childStates = selectableChildren.map(
-    (child) => getSelectionState(child, selectedSet)
+function TreeCaret({
+  expanded,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SGhostButton,
+    {
+      icon: expanded ? "caretDown" : "caretRight",
+      size: "xxs",
+      ariaLabel: expanded ? "collapse tree item" : "expand tree item",
+      ariaExpanded: expanded,
+      onClick: (event) => {
+        event.stopPropagation();
+        onToggle(event);
+      }
+    }
   );
-  const selectedCount = childStates.filter((state2) => state2.selected).length;
-  return {
-    selected: selectedCount === childStates.length,
-    indeterminate: childStates.some((state2) => state2.indeterminate) || selectedCount > 0 && selectedCount < childStates.length
-  };
+}
+function TreeCaretSpacer() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-(--cmp-ghostButton-xxs-size) shrink-0", "aria-hidden": "true" });
 }
 function TreeConnector({
   guideline,
@@ -7787,6 +7802,83 @@ function TreeConnector({
     ] })
   ] });
 }
+function TreeAllRow({
+  label = "\uC804\uCCB4",
+  selected,
+  indeterminate = false,
+  size = "sm",
+  border = true,
+  active = false,
+  tabIndex,
+  onKeyDown,
+  onToggle,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "treeitem",
+      "aria-level": 1,
+      "aria-selected": selected,
+      tabIndex,
+      onKeyDown,
+      onClick: (event) => {
+        if (!isRowControlClick(event)) onToggle(event);
+      },
+      className: cn(
+        TREE_ROW_CLASS,
+        "cursor-pointer",
+        TREE_LABEL_TYPOGRAPHY[size].rowHeight,
+        border && TREE_ROW_BORDER_CLASS,
+        active && TREE_ROW_ACTIVE_CLASS,
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TREE_CONTENT_CLASS, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-tree-control": true, className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: indeterminate ? null : selected, onValueChange: () => onToggle() }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: treeLabelClass(size, {
+              emphasized: selected || indeterminate,
+              disabled: false,
+              selectable: false
+            }),
+            children: label
+          }
+        )
+      ] })
+    }
+  );
+}
+function collectIds(nodes) {
+  return nodes.flatMap((node) => [node.id, ...collectIds(node.children ?? [])]);
+}
+function collectSelectableIds(node) {
+  if (node.disabled) return [];
+  return [node.id, ...(node.children ?? []).flatMap(collectSelectableIds)];
+}
+function toSelectedSet(value) {
+  return new Set(value ?? []);
+}
+var TREE_ALL_NODE = { id: "__all__", label: "\uC804\uCCB4" };
+function getSelectionState(node, selectedSet) {
+  const selectableChildren = (node.children ?? []).filter(
+    (child) => collectSelectableIds(child).length > 0
+  );
+  if (selectableChildren.length === 0) {
+    return { selected: selectedSet.has(node.id), indeterminate: false };
+  }
+  const childStates = selectableChildren.map(
+    (child) => getSelectionState(child, selectedSet)
+  );
+  const selectedCount = childStates.filter((state2) => state2.selected).length;
+  return {
+    selected: selectedCount === childStates.length,
+    indeterminate: childStates.some((state2) => state2.indeterminate) || selectedCount > 0 && selectedCount < childStates.length
+  };
+}
 function TreeBranch({ expanded, children }) {
   const branchRef = useInertRef(!expanded);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7802,10 +7894,6 @@ function TreeBranch({ expanded, children }) {
     }
   );
 }
-function isRowControlClick(event) {
-  const control = event.target.closest("[data-tree-control]");
-  return control != null && event.currentTarget.contains(control);
-}
 function STreeAllItem({
   selected,
   indeterminate,
@@ -7816,39 +7904,17 @@ function STreeAllItem({
   onKeyDown,
   onSelect
 }) {
-  const checkboxValue = indeterminate ? null : selected;
-  const typography = TREE_LABEL_TYPOGRAPHY[size];
-  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    TreeAllRow,
     {
-      role: "treeitem",
-      "aria-level": 1,
-      "aria-selected": selected,
       "data-tree-row": rowId,
       tabIndex,
       onKeyDown,
-      onClick: (event) => {
-        if (!isRowControlClick(event)) onSelect(event);
-      },
-      className: cn(
-        "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
-        typography.rowHeight,
-        border && "border-b border-(--cmp-tree-item-border-default)"
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-tree-control": true, className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
-              labelTypo
-            ),
-            children: "\uC804\uCCB4"
-          }
-        )
-      ] })
+      selected,
+      indeterminate,
+      border,
+      size,
+      onToggle: onSelect
     }
   );
 }
@@ -7889,8 +7955,6 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
   const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
   const checkboxValue = indeterminate ? null : selected;
-  const typography = TREE_LABEL_TYPOGRAPHY[size];
-  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
   const handleSelect = (event) => {
     if (node.disabled) return;
     onTreeSelect?.(node, event);
@@ -7916,10 +7980,9 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
       onKeyDown,
       onClick: handleRowClick,
       className: cn(
-        "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",
-        typography.rowHeight,
-        border && "border-b border-(--cmp-tree-item-border-default)",
-        "hover:bg-(--cmp-tree-item-bg-hover)",
+        TREE_ROW_CLASS,
+        TREE_LABEL_TYPOGRAPHY[size].rowHeight,
+        border && TREE_ROW_BORDER_CLASS,
         hasChildren && "cursor-pointer",
         className
       ),
@@ -7936,25 +7999,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
             ancestorLast
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
-          hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: expanded ? "caretDown" : "caretRight",
-              size: "xxs",
-              ariaLabel: expanded ? "collapse tree item" : "expand tree item",
-              ariaExpanded: expanded,
-              onClick: (event) => {
-                event.stopPropagation();
-                onToggle?.(node, event);
-              }
-            }
-          ) : (
-            // 자식이 없는 줄은 펼침 버튼 자리를 빈 칸으로 남겨 라벨의 시작점을 맞춘다.
-            // 크기는 자리를 대신하는 그 버튼(`SGhostButton size="xxs"`)의 토큰을 그대로 쓴다 —
-            // 버튼 크기가 바뀌면 빈 칸도 같이 따라가야 줄이 어긋나지 않는다.
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-(--cmp-ghostButton-xxs-size) shrink-0", "aria-hidden": "true" })
-          ),
+        /* @__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",
@@ -7976,12 +8022,11 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
             "span",
             {
               "data-tree-label": true,
-              className: cn(
-                "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
-                labelTypo,
-                node.disabled && "opacity-60",
-                node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
-              ),
+              className: treeLabelClass(size, {
+                emphasized: selected || indeterminate,
+                disabled: Boolean(node.disabled),
+                selectable
+              }),
               children: node.label
             }
           ),
@@ -13423,9 +13468,20 @@ var SystemButton = /* @__PURE__ */ react.forwardRef(function SystemButton2({
           }
         ),
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-semibold min-w-0 truncate", children: label }),
-        count != null && count > 0 && // 개수 오른쪽은 버튼 여백(alertButton.paddingX)만으로는 좁다 — 시안이 4px 을 더 준다.
+        count != null && count > 0 && // 개수는 채운 배지로 단다 — 배경·글자색·치수는 xs deep 태그 토큰이 쥔다(시안).
+        // 배지 색은 고정이다: 흰 면은 파랑, 어두운 면(dark·darker)은 노랑 바탕에 검은 글자.
+        // 배지 오른쪽은 버튼 여백(alertButton.paddingX)만으로는 좁다 — 시안이 4px 을 더 준다.
         // 대응 토큰이 없어 디자인 값을 그대로 쓴다.
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold me-[4px] shrink-0", style: { color: accentColor }, children: count.toLocaleString() })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          STag,
+          {
+            size: "xs",
+            deep: true,
+            color: color === "light" ? "blue" : "yellow",
+            label: count.toLocaleString(),
+            className: "me-[4px] shrink-0"
+          }
+        )
       ]
     }
   );
@@ -14304,7 +14360,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
     items.findIndex((item4, index) => getItemValue(item4, index) === value)
   );
   const lastCompletedIndex = items.reduce(
-    (lastIndex, item4, index) => item4.completed === true ? index : lastIndex,
+    (lastIndex2, item4, index) => item4.completed === true ? index : lastIndex2,
     -1
   );
   const resolvedClickableIndex = lastCompletedIndex + 1;
@@ -15762,13 +15818,13 @@ var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
 });
 
 // src/components/SSelect/select.config.ts
-function flattenOptions(options, depth = 1) {
+function flattenOptions(options, depth = 1, inheritDisabled = true) {
   const out = [];
   for (const o of options) {
     const hasChildren = Array.isArray(o.children) && o.children.length > 0;
     if (hasChildren) {
-      const childFlat = flattenOptions(o.children, depth + 1);
-      const allChildrenDisabled = childFlat.every((c) => c.disabled);
+      const childFlat = flattenOptions(o.children, depth + 1, inheritDisabled);
+      const allChildrenDisabled = inheritDisabled && childFlat.every((c) => c.disabled);
       out.push({
         value: String(o.value),
         label: o.label,
@@ -15802,12 +15858,71 @@ function collectGroupLeafValues(flat, groupIndex) {
   }
   return values;
 }
+function visibleTreeRows(rows, isExpanded) {
+  const out = [];
+  const sourceIndex = [];
+  let hiddenBelow = null;
+  rows.forEach((row, i) => {
+    if (hiddenBelow != null && row.depth > hiddenBelow) return;
+    hiddenBelow = null;
+    out.push(row);
+    sourceIndex.push(i);
+    if (row.isGroup && !isExpanded(row)) hiddenBelow = row.depth;
+  });
+  return { rows: out, sourceIndex };
+}
+function treeLineInfo(rows) {
+  const isLast = new Array(rows.length);
+  const seen = [];
+  for (let i = rows.length - 1; i >= 0; i--) {
+    const depth = rows[i].depth;
+    isLast[i] = !seen[depth];
+    seen[depth] = true;
+    seen.length = depth + 1;
+  }
+  const ancestors = [];
+  const parents = [];
+  const parentOf = new Array(rows.length);
+  const posInSet = new Array(rows.length);
+  const siblingCount = /* @__PURE__ */ new Map();
+  rows.forEach((row, i) => {
+    const parent = row.depth > 1 ? parents[row.depth - 2] ?? -1 : -1;
+    parentOf[i] = parent;
+    const count = (siblingCount.get(parent) ?? 0) + 1;
+    siblingCount.set(parent, count);
+    posInSet[i] = count;
+    parents.length = row.depth - 1;
+    parents[row.depth - 1] = i;
+  });
+  return rows.map((row, i) => {
+    ancestors.length = row.depth - 1;
+    const ancestorLast = ancestors.slice();
+    ancestors[row.depth - 1] = isLast[i];
+    return {
+      isLast: isLast[i],
+      ancestorLast,
+      posInSet: posInSet[i],
+      setSize: siblingCount.get(parentOf[i]) ?? 1
+    };
+  });
+}
+function ancestorGroupValues(flat, selected) {
+  const out = /* @__PURE__ */ new Set();
+  const stack = [];
+  for (const row of flat) {
+    while (stack.length > 0 && stack[stack.length - 1].depth >= row.depth) stack.pop();
+    if (selected.has(row.value)) for (const group of stack) out.add(group.value);
+    if (row.isGroup) stack.push(row);
+  }
+  return out;
+}
 var isHtmlLabel = (label) => /<[a-z][\s\S]*>/i.test(label);
 var extractText = (html) => html.replace(/<[^>]*>/g, "");
 var OPTION_ROW_HEIGHT = 28;
 var DEFAULT_VIRTUAL_BUFFER = 10;
 var DEFAULT_REACH_END_THRESHOLD = 10;
 var DEFAULT_SEARCH_DEBOUNCE = 300;
+var NO_SEARCH_COLLAPSED = /* @__PURE__ */ new Set();
 var SEARCH_THRESHOLD = 11;
 function isListSized(el) {
   return el.clientHeight > 0 && getComputedStyle(el).maxHeight !== "none";
@@ -15862,8 +15977,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   className,
   style
 }, ref) {
-  const multi = type === "multi" || type === "multi_depth";
+  const multi = type === "multi" || type === "multi_depth" || type === "multi_tree";
   const isDepth = type === "default_depth" || type === "multi_depth";
+  const isTree = type === "tree" || type === "multi_tree";
   const pagingEnabled = onReachEnd != null;
   const partialOptions = pagingEnabled || serverSearch;
   const portalContainer = usePortalContainer();
@@ -15873,6 +15989,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const [open, setOpen] = react.useState(false);
   const [pendingOpen, setPendingOpen] = react.useState(false);
   const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const [expanded, setExpanded] = react.useState(() => /* @__PURE__ */ new Set());
+  const [searchCollapsed, setSearchCollapsed] = react.useState(NO_SEARCH_COLLAPSED);
   const baseId = react.useId();
   const listboxId = `${baseId}-listbox`;
   const activeOptionId = `${baseId}-active-option`;
@@ -15896,10 +16014,11 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const alignSelectedTopRef = react.useRef(false);
   const selectedAnchorRef = react.useRef(-1);
   const rangeAnchorRef = react.useRef(null);
-  const flat = react.useMemo(() => flattenOptions(options), [options]);
+  const groupIsValue = type === "tree";
+  const flat = react.useMemo(() => flattenOptions(options, 1, !groupIsValue), [groupIsValue, options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
   const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
-  const allOptionsDisabled = hasLeaf && selectable.length === 0;
+  const allOptionsDisabled = groupIsValue ? flat.length > 0 && flat.every((o) => o.disabled) : hasLeaf && selectable.length === 0;
   const effectiveDisabled = disabled || allOptionsDisabled;
   const searchVisible = showSearch && (partialOptions || selectable.length >= SEARCH_THRESHOLD);
   const labelByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
@@ -15942,6 +16061,10 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     if (next) {
       dismissedByPointerRef.current = false;
       alignSelectedTopRef.current = true;
+      if (isTree) {
+        setExpanded(ancestorGroupValues(flat, new Set(selectedRef.current)));
+        setSearchCollapsed(NO_SEARCH_COLLAPSED);
+      }
     } else {
       setPendingOpen(false);
       setSearch("");
@@ -15984,7 +16107,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     },
     resetValidation: () => setRuleError("")
   });
-  const filtered = react.useMemo(() => {
+  const searched = react.useMemo(() => {
     if (serverSearch || !searchVisible || search.trim() === "") return flat;
     const q = search.trim().toLowerCase();
     return filterDepthRows(
@@ -15992,23 +16115,53 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       (o) => (isHtmlLabel(o.label) ? extractText(o.label) : o.label).toLowerCase().includes(q)
     );
   }, [flat, search, searchVisible, serverSearch]);
+  const treeSearching = isTree && search.trim() !== "";
+  const isGroupExpanded = react.useCallback(
+    (groupValue) => treeSearching ? !searchCollapsed.has(groupValue) : expanded.has(groupValue),
+    [expanded, searchCollapsed, treeSearching]
+  );
+  const treeRows = react.useMemo(
+    () => isTree ? visibleTreeRows(searched, (row) => isGroupExpanded(row.value)) : null,
+    [isGroupExpanded, isTree, searched]
+  );
+  const filtered = treeRows?.rows ?? searched;
+  const treeLines = react.useMemo(() => treeRows ? treeLineInfo(treeRows.rows) : [], [treeRows]);
   const allValues = selectable.map((o) => o.value);
   const allSelected = !partialOptions && allValues.length > 0 && allValues.every((v) => selectedSet.has(v));
   const selectAllVisible = multi && showSelectAll && !partialOptions && allValues.length > 0;
-  const hasItems = filtered.some((o) => !o.isGroup);
+  const hasItems = isTree ? filtered.length > 0 : filtered.some((o) => !o.isGroup);
   const groupLeafValues = react.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     filtered.forEach((o, i) => {
-      if (o.isGroup) map.set(i, collectGroupLeafValues(filtered, i));
+      if (!o.isGroup) return;
+      map.set(
+        i,
+        treeRows ? collectGroupLeafValues(searched, treeRows.sourceIndex[i]) : collectGroupLeafValues(filtered, i)
+      );
     });
     return map;
-  }, [filtered]);
+  }, [filtered, searched, treeRows]);
   const navigableItems = react.useMemo(() => {
     const items = [];
     if (selectAllVisible) {
       items.push({ key: "__select_all__", isSelectAll: true });
     }
     filtered.forEach((o, i) => {
+      if (o.isGroup && isTree) {
+        if (multi) {
+          const leafValues = groupLeafValues.get(i) ?? [];
+          items.push({
+            key: `__group_${i}__`,
+            isGroup: true,
+            index: i,
+            leafValues,
+            disabled: o.disabled || leafValues.length === 0
+          });
+        } else {
+          items.push({ key: o.value, value: o.value, index: i, disabled: o.disabled });
+        }
+        return;
+      }
       if (o.disabled) return;
       if (o.isGroup) {
         if (!multi) return;
@@ -16020,7 +16173,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       }
     });
     return items;
-  }, [filtered, groupLeafValues, multi, selectAllVisible]);
+  }, [filtered, groupLeafValues, isTree, multi, selectAllVisible]);
   const selectedAnchorIndex = react.useMemo(() => {
     if (selectedSet.size === 0) return -1;
     return navigableItems.findIndex((item4) => item4.value != null && selectedSet.has(item4.value));
@@ -16031,7 +16184,10 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const rowCount = filtered.length;
   const metrics = metricsRef.current;
   const lastSearchRef = react.useRef(search);
-  if (lastSearchRef.current !== search) {
+  const lastExpansionRef = react.useRef({ expanded, searchCollapsed });
+  const expansionChanged = lastExpansionRef.current.expanded !== expanded || lastExpansionRef.current.searchCollapsed !== searchCollapsed;
+  lastExpansionRef.current = { expanded, searchCollapsed };
+  if (lastSearchRef.current !== search || isTree && expansionChanged) {
     lastSearchRef.current = search;
     resetRowMetrics(metrics, rowCount);
     measuredKeyRef.current = "";
@@ -16171,7 +16327,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   );
   const fullGroupByLeaf = react.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
-    if (!showChips || type !== "multi_depth") return map;
+    if (!showChips || type !== "multi_depth" && type !== "multi_tree") return map;
     flat.forEach((o, i) => {
       if (!o.isGroup) return;
       const leafValues = collectGroupLeafValues(flat, i);
@@ -16249,6 +16405,21 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     rangeAnchorRef.current = null;
     emit3(allSelected ? [] : allValues);
   };
+  const handleSearchChange = (next) => {
+    setSearch(next);
+    setSearchCollapsed(NO_SEARCH_COLLAPSED);
+  };
+  const handleToggleExpand = (groupValue) => {
+    rangeAnchorRef.current = null;
+    const toggle = (prev) => {
+      const next = new Set(prev);
+      if (next.has(groupValue)) next.delete(groupValue);
+      else next.add(groupValue);
+      return next;
+    };
+    if (treeSearching) setSearchCollapsed(toggle);
+    else setExpanded(toggle);
+  };
   const handleToggleGroup = (leafValues) => {
     if (leafValues.length === 0) return;
     rangeAnchorRef.current = null;
@@ -16321,6 +16492,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const selectFocusedItem = (extend = false) => {
     if (focusedIndex < 0 || focusedIndex >= navigableItems.length) return;
     const focused = navigableItems[focusedIndex];
+    if (focused.disabled) return;
     if (focused.isSelectAll) {
       handleSelectAll();
       return;
@@ -16349,6 +16521,41 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       moveFocusedIndex("prev");
       return;
     }
+    const input = event.target instanceof HTMLInputElement ? event.target : null;
+    const caretAtEdge = input == null || input.selectionStart === input.selectionEnd && input.selectionStart === (event.key === "ArrowRight" ? input.value.length : 0);
+    if (isTree && (event.key === "ArrowRight" || event.key === "ArrowLeft") && caretAtEdge) {
+      const rowIndex = navigableItems[focusedIndex]?.index;
+      const row = rowIndex != null ? filtered[rowIndex] : void 0;
+      if (rowIndex == null || row == null) return;
+      event.preventDefault();
+      const rowExpanded = row.isGroup && isGroupExpanded(row.value);
+      if (event.key === "ArrowRight") {
+        if (!row.isGroup) return;
+        if (!rowExpanded) {
+          handleToggleExpand(row.value);
+          return;
+        }
+        for (let i = rowIndex + 1; i < filtered.length && filtered[i].depth > row.depth; i++) {
+          const child = navigableItems.findIndex((item4) => item4.index === i);
+          if (child >= 0) {
+            setFocusedIndex(child);
+            break;
+          }
+        }
+        return;
+      }
+      if (rowExpanded) {
+        handleToggleExpand(row.value);
+        return;
+      }
+      for (let i = rowIndex - 1; i >= 0; i--) {
+        if (filtered[i].depth >= row.depth) continue;
+        const parent = navigableItems.findIndex((item4) => item4.index === i);
+        if (parent >= 0) setFocusedIndex(parent);
+        return;
+      }
+      return;
+    }
     if (event.key === "Enter") {
       event.preventDefault();
       selectFocusedItem(event.shiftKey);
@@ -16393,7 +16600,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             type: "button",
             disabled: effectiveDisabled,
             "aria-labelledby": label ? `${fieldLabelId(triggerId)} ${triggerId}` : void 0,
-            "aria-haspopup": "listbox",
+            "aria-haspopup": isTree ? "tree" : "listbox",
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
             "aria-activedescendant": open && focusedIndex >= 0 ? activeOptionId : void 0,
@@ -16530,7 +16737,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                         {
                           ref: searchInputRef,
                           value: search,
-                          onValueChange: setSearch,
+                          onValueChange: handleSearchChange,
                           onKeyDown: handleKeyDown,
                           placeholder: "\uAC80\uC0C9",
                           clearable: true,
@@ -16549,8 +16756,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                       indexOffset: windowStart,
                       topSpacer: win.top,
                       bottomSpacer: win.bottom,
-                      setSize: isDepth ? void 0 : rowCount,
+                      setSize: isDepth || isTree ? void 0 : rowCount,
                       multi,
+                      tree: isTree,
+                      isExpanded: isGroupExpanded,
+                      onToggleExpand: handleToggleExpand,
+                      treeLines,
                       selected,
                       groupLeafValues,
                       focusedValue: navigableItems[focusedIndex]?.key,
@@ -16604,6 +16815,10 @@ function ItemList({
   bottomSpacer,
   setSize,
   multi,
+  tree,
+  isExpanded,
+  onToggleExpand,
+  treeLines,
   selected,
   groupLeafValues,
   focusedValue,
@@ -16617,14 +16832,34 @@ function ItemList({
   onHoverValue
 }) {
   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",
     "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: "listbox", "aria-multiselectable": multi || void 0, children: [
-    showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
+  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",
       {
         type: "button",
@@ -16645,12 +16880,109 @@ function ItemList({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
         ]
       }
-    ),
+    )),
     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;
+                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
+                      })
+                    }
+                  )
+                ] })
+              ]
+            },
+            rowKey
+          )
+        );
+      }
       if (o.isGroup) {
         const isDepth1 = o.depth === 1;
         const isFirstRow = idx === 0 && !showSelectAll && !searchVisible;
@@ -16691,13 +17023,7 @@ function ItemList({
               onClick: () => onToggleGroup(leafValues),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
-                isHtmlLabel(o.label) ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "min-w-0 truncate",
-                    dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: o.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "min-w-0 truncate" }),
                 total > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
                   "span",
                   {
@@ -16774,13 +17100,7 @@ function ItemList({
                 focused: focusedValue === o.value
               }
             ),
-            isHtmlLabel(o.label) ? /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "flex-1 truncate",
-                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: o.label })
+            /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
           ]
         },
         rowKey
@@ -16789,8 +17109,11 @@ function ItemList({
     bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: bottomSpacer } })
   ] });
 }
+function OptionLabel({ label, className }) {
+  return isHtmlLabel(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: label });
+}
 function TriggerLabel({ label }) {
-  return isHtmlLabel(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label });
+  return /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label, className: "truncate" });
 }
 function TriggerRemoveButton({ ariaLabel, onRemove }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17045,8 +17368,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   const [rowCountOverride, setRowCountOverride] = react.useState(null);
   const rowCount = rowCountOverride ?? rows.length;
   const scrollRef = react.useRef(null);
-  const headerScrollRef = react.useRef(null);
-  const [headerGutter, setHeaderGutter] = react.useState(0);
+  const headerRef = react.useRef(null);
+  const [headerHeight, setHeaderHeight] = react.useState(0);
   const [vsRange, setVsRange] = react.useState({ start: 0, end: 0 });
   const lastReachEndRef = react.useRef(-1);
   const cbRef = react.useRef({ onVirtualUpdate, onVirtualReachEnd, onScroll });
@@ -17088,17 +17411,13 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   );
   const handleScroll = react.useCallback(() => {
     const el = scrollRef.current;
-    if (!el) {
-      setHeaderGutter(0);
-      return;
-    }
-    const header = headerScrollRef.current;
-    if (header) header.scrollLeft = el.scrollLeft;
-    setHeaderGutter(el.offsetWidth - el.clientWidth);
+    if (!el) return;
+    const headerH = headerRef.current?.offsetHeight ?? 0;
+    setHeaderHeight(headerH);
     setScrolledLeft(el.scrollLeft > 0);
     setScrolledRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
     if (virtualScroll) {
-      const { start, end } = calcRange(el.scrollTop, el.clientHeight);
+      const { start, end } = calcRange(el.scrollTop, el.clientHeight - headerH);
       setVsRange((prev) => prev.start === start && prev.end === end ? prev : { start, end });
     }
   }, [virtualScroll, calcRange]);
@@ -17495,7 +17814,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
     );
   };
   const bodyScrollClass = cn(
-    "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
+    "min-h-0 flex-1 overflow-auto",
     SCROLLBAR_CLASS,
     SCROLLBAR_TRACK_BG_CLASS,
     SCROLLBAR_TRACK_BORDER_CLASS
@@ -17512,23 +17831,221 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
     selectable && /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: SELECTABLE_COLUMN_WIDTH } }),
     visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: col.autoWidth ? void 0 : { width: columnWidths[i] } }, col.name))
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  const headerTable = /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
     {
-      className: cn("flex flex-col", className),
-      style: { width, ...style },
-      "data-table-id": resolvedTableId,
+      className: "w-full table-fixed border-separate border-spacing-0 border-b border-solid border-[color:var(--cmp-table-border-color)] text-left",
+      style: { fontSize: 12 },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              // isolate: no-data/loading 오버레이(z-30·31)를 테이블 안에서 끝낸다. relative + z-auto
-              // 만으로는 스태킹 컨텍스트가 생기지 않아, 모달 안에 들어가면 30·31이 모달 Content
-              // 레벨까지 올라가 같은 컨텍스트의 floating portal 밴드(z-2)를 덮는다.
-              // 자손은 이미 overflow-hidden으로 클리핑되므로 테이블 내부 순서는 달라지지 않는다.
-              "bg-white relative isolate flex flex-col overflow-hidden",
-              bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
+        colgroup,
+        /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: cn(isNoData && "opacity-40"), children: [
+          headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                rowSpan: 2,
+                className: cn(
+                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                ),
+                style: {
+                  width: SELECTABLE_COLUMN_WIDTH,
+                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SCheckbox,
+                  {
+                    value: headerCheck,
+                    disabled: !hasSelectableRow,
+                    onValueChange: toggleAll
+                  }
+                ) })
+              }
+            ),
+            headerGroupInfo.cells.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "th",
+              {
+                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)]",
+                  group.firstIndex + group.colSpan === visibleCols.length && "border-r-0",
+                  group.rowSpan === 2 && "border-b-0",
+                  group.className
+                ),
+                style: { textAlign: group.align ?? "left", ...group.style },
+                children: [
+                  group.render ? group.render() : group.label,
+                  group.rowSpan === 2 && group.colSpan === 1 ? headerResizeHitArea(group.firstIndex, `group-resizer-${group.columnNames[0]}`) : null
+                ]
+              },
+              group.columnNames.join("|")
+            ))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+            selectable && !headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs(
+              "th",
+              {
+                className: cn(
+                  // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                  // 하단 border는 헤더 표가 연속으로 그리므로 셀에는 두지 않는다.
+                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                ),
+                style: {
+                  width: SELECTABLE_COLUMN_WIDTH,
+                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SCheckbox,
+                    {
+                      value: headerCheck,
+                      disabled: !hasSelectableRow,
+                      onValueChange: toggleAll
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "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)]"
+                    }
+                  )
+                ]
+              }
+            ),
+            visibleCols.map((col, i) => {
+              if (headerGroupInfo?.rowSpanNames.has(col.name)) return null;
+              const isSortable = !!col.sortable && !col.renderHeader;
+              const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "th",
+                {
+                  className: cn(
+                    // 하단 border는 헤더 표가 연속으로 그린다.
+                    // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
+                    // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
+                    // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
+                    // 세로 가운데도 어긋난다. 글자 줄높이는 아래 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)]",
+                    stickyInfo(i).isSticky && "z-[6]",
+                    col.thClass
+                  ),
+                  style: {
+                    textAlign: col.align ?? "left",
+                    boxShadow: stickyShadowValue(i) ?? void 0,
+                    ...cellStyle(i),
+                    ...col.thStyle
+                  },
+                  "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          // 원본 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]",
+                          col.align === "center" && "justify-center",
+                          col.align === "right" && "justify-end"
+                        ),
+                        children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
+                          col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
+                          // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
+                          // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            STooltip2,
+                            {
+                              trigger: "hover",
+                              icon: "helpOutline",
+                              iconSize: 12,
+                              color: "var(--sys-color-fg-success)",
+                              placement: "top",
+                              message: col.helpText
+                            }
+                          ) }),
+                          col.editable && /* @__PURE__ */ jsxRuntime.jsx(
+                            SIcon,
+                            {
+                              name: "pageEdit",
+                              size: 12,
+                              color: "var(--sys-color-link-accent)",
+                              label: "\uC218\uC815 \uAC00\uB2A5",
+                              className: "shrink-0"
+                            }
+                          ),
+                          col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
+                            SIcon,
+                            {
+                              name: "pageMove",
+                              size: 12,
+                              color: "var(--sys-color-link-accent)",
+                              label: "\uC0C8 \uD654\uBA74\uC5D0\uC11C \uC5F4\uAE30",
+                              className: "shrink-0"
+                            }
+                          ),
+                          col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
+                          // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            SIcon,
+                            {
+                              name: "asterisk",
+                              size: 12,
+                              color: "var(--sys-color-fg-accent)",
+                              className: "shrink-0"
+                            }
+                          ),
+                          isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
+                          // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
+                          // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            SGhostButton,
+                            {
+                              size: "xxs",
+                              intent: sortDir ? "action" : "default",
+                              icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
+                              ariaLabel: `${col.label} \uC815\uB82C`,
+                              onClick: () => toggleSort(col)
+                            }
+                          ) })
+                        ] })
+                      }
+                    ),
+                    headerGroupInfo ? headerResizeHitArea(i, `resizer-${col.name}`) : headerResizer(i, `resizer-${col.name}`)
+                  ]
+                },
+                col.name
+              );
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", className),
+      style: { width, ...style },
+      "data-table-id": resolvedTableId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              // isolate: no-data/loading 오버레이(z-30·31)를 테이블 안에서 끝낸다. relative + z-auto
+              // 만으로는 스태킹 컨텍스트가 생기지 않아, 모달 안에 들어가면 30·31이 모달 Content
+              // 레벨까지 올라가 같은 컨텍스트의 floating portal 밴드(z-2)를 덮는다.
+              // 자손은 이미 overflow-hidden으로 클리핑되므로 테이블 내부 순서는 달라지지 않는다.
+              "bg-white relative isolate flex flex-col overflow-hidden",
+              bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
               // height가 없으면 루트가 받은 높이를 끝까지 채운다. 호스트가 className으로
               // `flex-1 min-h-0` 등을 줘 루트 높이가 확정된 경우, 행이 적어도 테두리 박스가
               // 남은 영역을 그대로 차지한다. basis는 auto로 둬 높이가 확정되지 않은
@@ -17543,220 +18060,20 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
               minHeight: isNoData ? "calc(var(--cmp-table-header-height) + 60px)" : void 0
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: headerScrollRef,
-                  className: "flex-none overflow-hidden",
-                  style: {
-                    borderRight: headerGutter ? `${headerGutter}px solid var(--cmp-table-header-bg)` : void 0
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "table",
-                    {
-                      className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                      style: { fontSize: 12 },
-                      children: [
-                        colgroup,
-                        /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: cn(isNoData && "opacity-40"), children: [
-                          headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
-                            selectable && /* @__PURE__ */ jsxRuntime.jsx(
-                              "th",
-                              {
-                                rowSpan: 2,
-                                className: cn(
-                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
-                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                ),
-                                style: {
-                                  width: SELECTABLE_COLUMN_WIDTH,
-                                  minWidth: SELECTABLE_COLUMN_WIDTH,
-                                  maxWidth: SELECTABLE_COLUMN_WIDTH
-                                },
-                                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  SCheckbox,
-                                  {
-                                    value: headerCheck,
-                                    disabled: !hasSelectableRow,
-                                    onValueChange: toggleAll
-                                  }
-                                ) })
-                              }
-                            ),
-                            headerGroupInfo.cells.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
-                              "th",
-                              {
-                                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)]",
-                                  group.firstIndex + group.colSpan === visibleCols.length && "border-r-0",
-                                  group.rowSpan === 2 && "border-b-0",
-                                  group.className
-                                ),
-                                style: { textAlign: group.align ?? "left", ...group.style },
-                                children: [
-                                  group.render ? group.render() : group.label,
-                                  group.rowSpan === 2 && group.colSpan === 1 ? headerResizeHitArea(
-                                    group.firstIndex,
-                                    `group-resizer-${group.columnNames[0]}`
-                                  ) : null
-                                ]
-                              },
-                              group.columnNames.join("|")
-                            ))
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
-                            selectable && !headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs(
-                              "th",
-                              {
-                                className: cn(
-                                  // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                  // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
-                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
-                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                ),
-                                style: {
-                                  width: SELECTABLE_COLUMN_WIDTH,
-                                  minWidth: SELECTABLE_COLUMN_WIDTH,
-                                  maxWidth: SELECTABLE_COLUMN_WIDTH
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                    SCheckbox,
-                                    {
-                                      value: headerCheck,
-                                      disabled: !hasSelectableRow,
-                                      onValueChange: toggleAll
-                                    }
-                                  ) }),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "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)]"
-                                    }
-                                  )
-                                ]
-                              }
-                            ),
-                            visibleCols.map((col, i) => {
-                              if (headerGroupInfo?.rowSpanNames.has(col.name)) return null;
-                              const isSortable = !!col.sortable && !col.renderHeader;
-                              const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
-                              return /* @__PURE__ */ jsxRuntime.jsxs(
-                                "th",
-                                {
-                                  className: cn(
-                                    // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
-                                    // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
-                                    // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
-                                    // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
-                                    // 세로 가운데도 어긋난다. 글자 줄높이는 아래 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)]",
-                                    stickyInfo(i).isSticky && "z-[6]",
-                                    col.thClass
-                                  ),
-                                  style: {
-                                    textAlign: col.align ?? "left",
-                                    boxShadow: stickyShadowValue(i) ?? void 0,
-                                    ...cellStyle(i),
-                                    ...col.thStyle
-                                  },
-                                  "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
-                                  children: [
-                                    /* @__PURE__ */ jsxRuntime.jsx(
-                                      "span",
-                                      {
-                                        className: cn(
-                                          // 원본 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]",
-                                          col.align === "center" && "justify-center",
-                                          col.align === "right" && "justify-end"
-                                        ),
-                                        children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
-                                          col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
-                                          // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
-                                          // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
-                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                            STooltip2,
-                                            {
-                                              trigger: "hover",
-                                              icon: "helpOutline",
-                                              iconSize: 12,
-                                              color: "var(--sys-color-fg-success)",
-                                              placement: "top",
-                                              message: col.helpText
-                                            }
-                                          ) }),
-                                          col.editable && /* @__PURE__ */ jsxRuntime.jsx(
-                                            SIcon,
-                                            {
-                                              name: "pageEdit",
-                                              size: 12,
-                                              color: "var(--sys-color-link-accent)",
-                                              label: "\uC218\uC815 \uAC00\uB2A5",
-                                              className: "shrink-0"
-                                            }
-                                          ),
-                                          col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
-                                            SIcon,
-                                            {
-                                              name: "pageMove",
-                                              size: 12,
-                                              color: "var(--sys-color-link-accent)",
-                                              label: "\uC0C8 \uD654\uBA74\uC5D0\uC11C \uC5F4\uAE30",
-                                              className: "shrink-0"
-                                            }
-                                          ),
-                                          col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
-                                          // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
-                                          /* @__PURE__ */ jsxRuntime.jsx(
-                                            SIcon,
-                                            {
-                                              name: "asterisk",
-                                              size: 12,
-                                              color: "var(--sys-color-fg-accent)",
-                                              className: "shrink-0"
-                                            }
-                                          ),
-                                          isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
-                                          // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
-                                          // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
-                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                            SGhostButton,
-                                            {
-                                              size: "xxs",
-                                              intent: sortDir ? "action" : "default",
-                                              icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
-                                              ariaLabel: `${col.label} \uC815\uB82C`,
-                                              onClick: () => toggleSort(col)
-                                            }
-                                          ) })
-                                        ] })
-                                      }
-                                    ),
-                                    headerGroupInfo ? headerResizeHitArea(i, `resizer-${col.name}`) : headerResizer(i, `resizer-${col.name}`)
-                                  ]
-                                },
-                                col.name
-                              );
-                            })
-                          ] })
-                        ] })
-                      ]
-                    }
-                  )
-                }
-              ),
-              showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: emptySlot }) }) : (
-                /* 바디: 세로 스크롤은 이 컨테이너에만 생긴다 (헤더 제외) */
-                /* @__PURE__ */ jsxRuntime.jsx(
+              showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none overflow-hidden", children: headerTable }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: emptySlot }) })
+              ] }) : (
+                /**
+                 * 헤더와 body 가 한 스크롤 컨테이너에 있다 — 헤더는 위에 붙어(sticky) 세로로는 서 있고
+                 * 가로로는 body 와 같은 스크롤로 움직인다. 헤더를 따로 두고 scroll 이벤트에서
+                 * scrollLeft 를 맞추면, 브라우저가 body 스크롤을 먼저 그리고 이벤트를 나중에 돌려
+                 * 헤더가 한 프레임 이상 늦게 따라온다.
+                 *
+                 * 행 좌표는 body 표 기준 그대로다 — `scrollTop` 이 y 이면 y 에 있는 행이 헤더 바로
+                 * 아래에 선다. 보이는 높이만 헤더 높이만큼 줄어든다(`headerHeight`).
+                 */
+                /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     ref: scrollRef,
@@ -17766,136 +18083,140 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                       // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
                       (loading2 || rowCount === 0) && "overflow-hidden"
                     ),
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "table",
-                      {
-                        className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                        style: { fontSize: 12 },
-                        children: [
-                          colgroup,
-                          /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                            virtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
-                            rowCount === 0 ? null : bodyRows.map((row, ri) => {
-                              const rowIndex = rowOffset + ri;
-                              const isSel = isViewSelected(row);
-                              const dragSel = dragSelectOn && isSel;
-                              const dragTop = dragSel && !isViewSelected(rows[rowIndex - 1]);
-                              const dragBottom = dragSel && !isViewSelected(rows[rowIndex + 1]);
-                              const rowLocked = (selectable || dragSelectable) && !canSelectRow(row);
-                              const rowBg = "bg-white";
-                              const rowHover = hoverable && !rowLocked;
-                              return /* @__PURE__ */ jsxRuntime.jsxs(
-                                "tr",
-                                {
-                                  "data-row-index": rowIndex,
-                                  onClick: () => onRowClick?.(row),
-                                  onDoubleClick: onRowDoubleClick ? (event) => {
-                                    const target = event.target;
-                                    if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
-                                    onRowDoubleClick(row);
-                                  } : void 0,
-                                  onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
-                                  onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
-                                  onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
-                                  className: cn(
-                                    "group/table-row",
-                                    rowHover && "hover:bg-[var(--color-grey-05)]",
-                                    (onRowClick || onRowDoubleClick) && "cursor-pointer",
-                                    dragSelectOn && "select-none",
-                                    rowClassName?.(row)
-                                  ),
-                                  style: { height: virtualScroll ? effectiveRowHeight : rowH },
-                                  children: [
-                                    selectable && /* @__PURE__ */ jsxRuntime.jsx(
-                                      "td",
-                                      {
-                                        className: cn(
-                                          // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                          "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                    style: { scrollPaddingTop: headerHeight },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: headerRef, className: "sticky top-0 z-[8]", children: headerTable }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "table",
+                        {
+                          className: "w-full table-fixed border-separate border-spacing-0 text-left",
+                          style: { fontSize: 12 },
+                          children: [
+                            colgroup,
+                            /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+                              virtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
+                              rowCount === 0 ? null : bodyRows.map((row, ri) => {
+                                const rowIndex = rowOffset + ri;
+                                const isSel = isViewSelected(row);
+                                const dragSel = dragSelectOn && isSel;
+                                const dragTop = dragSel && !isViewSelected(rows[rowIndex - 1]);
+                                const dragBottom = dragSel && !isViewSelected(rows[rowIndex + 1]);
+                                const rowLocked = (selectable || dragSelectable) && !canSelectRow(row);
+                                const rowBg = "bg-white";
+                                const rowHover = hoverable && !rowLocked;
+                                return /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "tr",
+                                  {
+                                    "data-row-index": rowIndex,
+                                    onClick: () => onRowClick?.(row),
+                                    onDoubleClick: onRowDoubleClick ? (event) => {
+                                      const target = event.target;
+                                      if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
+                                      onRowDoubleClick(row);
+                                    } : void 0,
+                                    onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
+                                    onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
+                                    onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
+                                    className: cn(
+                                      "group/table-row",
+                                      rowHover && "hover:bg-[var(--color-grey-05)]",
+                                      (onRowClick || onRowDoubleClick) && "cursor-pointer",
+                                      dragSelectOn && "select-none",
+                                      rowClassName?.(row)
+                                    ),
+                                    style: { height: virtualScroll ? effectiveRowHeight : rowH },
+                                    children: [
+                                      selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                                        "td",
+                                        {
+                                          className: cn(
+                                            // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                            "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                                            rowBg,
+                                            rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                            stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                          ),
+                                          style: {
+                                            width: SELECTABLE_COLUMN_WIDTH,
+                                            minWidth: SELECTABLE_COLUMN_WIDTH,
+                                            maxWidth: SELECTABLE_COLUMN_WIDTH,
+                                            // 선택 열도 행의 일부다 — 여기만 희지 않으면 회색 줄이 끊긴다
+                                            background: rowLocked ? LOCKED_BG : void 0
+                                          },
+                                          onClick: (e) => e.stopPropagation(),
+                                          onDoubleClick: (e) => e.stopPropagation(),
+                                          onClickCapture: (e) => {
+                                            shiftPressedRef.current = e.shiftKey;
+                                            if (e.shiftKey) window.getSelection()?.removeAllRanges();
+                                          },
+                                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            SCheckbox,
+                                            {
+                                              value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
+                                              disabled: !canSelectRow(row),
+                                              onValueChange: () => toggleRow(row, rowOffset + ri)
+                                            }
+                                          ) })
+                                        }
+                                      ),
+                                      visibleCols.map((col, i) => {
+                                        const tdClassName = cn(
+                                          // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
+                                          // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
+                                          "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                           rowBg,
                                           rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
-                                          stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                        ),
-                                        style: {
-                                          width: SELECTABLE_COLUMN_WIDTH,
-                                          minWidth: SELECTABLE_COLUMN_WIDTH,
-                                          maxWidth: SELECTABLE_COLUMN_WIDTH,
-                                          // 선택 열도 행의 일부다 — 여기만 희지 않으면 회색 줄이 끊긴다
-                                          background: rowLocked ? LOCKED_BG : void 0
-                                        },
-                                        onClick: (e) => e.stopPropagation(),
-                                        onDoubleClick: (e) => e.stopPropagation(),
-                                        onClickCapture: (e) => {
-                                          shiftPressedRef.current = e.shiftKey;
-                                          if (e.shiftKey) window.getSelection()?.removeAllRanges();
-                                        },
-                                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          SCheckbox,
-                                          {
-                                            value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
-                                            disabled: !canSelectRow(row),
-                                            onValueChange: () => toggleRow(row, rowOffset + ri)
-                                          }
-                                        ) })
-                                      }
-                                    ),
-                                    visibleCols.map((col, i) => {
-                                      const tdClassName = cn(
-                                        // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
-                                        // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
-                                        "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
-                                        rowBg,
-                                        rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
-                                        typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
-                                      );
-                                      const tdPadX = cellPadXOf(col);
-                                      const dragEdges = dragSel ? [
-                                        dragTop && `inset 0 ${DRAG_EDGE_W} 0 0 ${DRAG_EDGE_C}`,
-                                        dragBottom && `inset 0 ${DRAG_EDGE_NEG_W} 0 0 ${DRAG_EDGE_C}`,
-                                        i === 0 && `inset ${DRAG_EDGE_W} 0 0 0 ${DRAG_EDGE_C}`,
-                                        i === visibleCols.length - 1 && `inset ${DRAG_EDGE_NEG_W} 0 0 0 ${DRAG_EDGE_C}`
-                                      ].filter(Boolean) : [];
-                                      const shadows = [...dragEdges, stickyShadowValue(i)].filter(Boolean);
-                                      const tdStyle = {
-                                        paddingLeft: tdPadX,
-                                        paddingRight: tdPadX,
-                                        paddingTop: cellPadY,
-                                        paddingBottom: cellPadY,
-                                        textAlign: col.align ?? "left",
-                                        // 인라인이라 hover 배경보다 세다 — 고른 행은 hover 로 흐려지지 않는다.
-                                        background: dragSel ? DRAG_BG : rowLocked ? LOCKED_BG : void 0,
-                                        // 클래스의 기본 글자색을 덮는다. 셀이 자기 색을 정한 내용(SIcon 의
-                                        // color, STag 등)까지는 닿지 않는다 — 그건 소비 앱 몫이다.
-                                        color: rowLocked ? LOCKED_CONTENT : void 0,
-                                        boxShadow: shadows.length > 0 ? shadows.join(", ") : void 0,
-                                        ...cellStyle(i)
-                                      };
-                                      if (col.renderCell) {
-                                        const cell = col.renderCell({
-                                          row,
-                                          value: cellValue(col, row),
-                                          column: col,
-                                          colIndex: i,
-                                          rowIndex: ri,
-                                          isSelected: isSel,
-                                          className: tdClassName,
-                                          style: tdStyle
-                                        });
-                                        if (cell == null || cell === false) return null;
-                                        return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
-                                      }
-                                      return /* @__PURE__ */ jsxRuntime.jsx("td", { className: tdClassName, style: tdStyle, children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row) }, col.name);
-                                    })
-                                  ]
-                                },
-                                row[rowKey] ?? ri
-                              );
-                            }),
-                            virtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
-                          ] })
-                        ]
-                      }
-                    )
+                                          typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
+                                        );
+                                        const tdPadX = cellPadXOf(col);
+                                        const dragEdges = dragSel ? [
+                                          dragTop && `inset 0 ${DRAG_EDGE_W} 0 0 ${DRAG_EDGE_C}`,
+                                          dragBottom && `inset 0 ${DRAG_EDGE_NEG_W} 0 0 ${DRAG_EDGE_C}`,
+                                          i === 0 && `inset ${DRAG_EDGE_W} 0 0 0 ${DRAG_EDGE_C}`,
+                                          i === visibleCols.length - 1 && `inset ${DRAG_EDGE_NEG_W} 0 0 0 ${DRAG_EDGE_C}`
+                                        ].filter(Boolean) : [];
+                                        const shadows = [...dragEdges, stickyShadowValue(i)].filter(Boolean);
+                                        const tdStyle = {
+                                          paddingLeft: tdPadX,
+                                          paddingRight: tdPadX,
+                                          paddingTop: cellPadY,
+                                          paddingBottom: cellPadY,
+                                          textAlign: col.align ?? "left",
+                                          // 인라인이라 hover 배경보다 세다 — 고른 행은 hover 로 흐려지지 않는다.
+                                          background: dragSel ? DRAG_BG : rowLocked ? LOCKED_BG : void 0,
+                                          // 클래스의 기본 글자색을 덮는다. 셀이 자기 색을 정한 내용(SIcon 의
+                                          // color, STag 등)까지는 닿지 않는다 — 그건 소비 앱 몫이다.
+                                          color: rowLocked ? LOCKED_CONTENT : void 0,
+                                          boxShadow: shadows.length > 0 ? shadows.join(", ") : void 0,
+                                          ...cellStyle(i)
+                                        };
+                                        if (col.renderCell) {
+                                          const cell = col.renderCell({
+                                            row,
+                                            value: cellValue(col, row),
+                                            column: col,
+                                            colIndex: i,
+                                            rowIndex: ri,
+                                            isSelected: isSel,
+                                            className: tdClassName,
+                                            style: tdStyle
+                                          });
+                                          if (cell == null || cell === false) return null;
+                                          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
+                                        }
+                                        return /* @__PURE__ */ jsxRuntime.jsx("td", { className: tdClassName, style: tdStyle, children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row) }, col.name);
+                                      })
+                                    ]
+                                  },
+                                  row[rowKey] ?? ri
+                                );
+                              }),
+                              virtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
+                            ] })
+                          ]
+                        }
+                      )
+                    ]
                   }
                 )
               ),
@@ -19403,13 +19724,21 @@ function SCalendar({
     }
   );
 }
+
+// src/lib/mode-listbox.ts
+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)]"
+);
 var MODE_NOUN = {
   date: "\uB0A0\uC9DC",
   month: "\uC6D4",
   year: "\uC5F0\uB3C4"
 };
-var DATEPICKER_MODE_LIST_HEIGHT = 240;
-var DATEPICKER_MODE_ITEM_HEIGHT = 28;
 var YEAR_LIST_EDGE_BUFFER = 24;
 var YEAR_LIST_EXPAND_SIZE = 80;
 var MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
@@ -19460,7 +19789,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
     if (!list) return;
     const index = anchorYearRef.current - rangeStartRef.current;
     syncingScrollRef.current = true;
-    list.scrollTop = index * DATEPICKER_MODE_ITEM_HEIGHT;
+    list.scrollTop = index * MODE_ITEM_HEIGHT;
     requestAnimationFrame(() => {
       syncingScrollRef.current = false;
     });
@@ -19469,7 +19798,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
     const list = listRef.current;
     if (!list) return;
     if (syncingScrollRef.current) return;
-    if (list.scrollTop < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+    if (list.scrollTop < MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
       const previousHeight = list.scrollHeight;
       setRange((current) => ({
         start: current.start - YEAR_LIST_EXPAND_SIZE,
@@ -19485,7 +19814,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
       });
       return;
     }
-    if (list.scrollHeight - list.scrollTop - list.clientHeight < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+    if (list.scrollHeight - list.scrollTop - list.clientHeight < MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
       setRange((current) => ({
         start: current.start,
         end: current.end + YEAR_LIST_EXPAND_SIZE
@@ -19500,8 +19829,8 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
       "aria-label": "year",
       className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
       style: {
-        paddingTop: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`,
-        paddingBottom: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`
+        paddingTop: `calc((${MODE_LIST_HEIGHT}px - ${MODE_ITEM_HEIGHT}px) / 2)`,
+        paddingBottom: `calc((${MODE_LIST_HEIGHT}px - ${MODE_ITEM_HEIGHT}px) / 2)`
       },
       onScroll: handleScroll,
       children: years.map((year) => {
@@ -19514,12 +19843,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
             role: "option",
             "aria-selected": selected,
             disabled,
-            className: 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)]"
-            ),
+            className: modeListItemClass(selected, disabled),
             onClick: () => !disabled && onCommit(year),
             children: year
           },
@@ -19575,7 +19899,7 @@ function MonthWheel({ year, value, selectable, onCommit }) {
     if (!list) return;
     list.scrollTop = Math.max(
       0,
-      (initialValueRef.current - 1) * DATEPICKER_MODE_ITEM_HEIGHT - (list.clientHeight - DATEPICKER_MODE_ITEM_HEIGHT) / 2
+      (initialValueRef.current - 1) * MODE_ITEM_HEIGHT - (list.clientHeight - MODE_ITEM_HEIGHT) / 2
     );
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -19595,12 +19919,7 @@ function MonthWheel({ year, value, selectable, onCommit }) {
             role: "option",
             "aria-selected": selected,
             disabled,
-            className: 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)]"
-            ),
+            className: modeListItemClass(selected, disabled),
             onClick: () => !disabled && onCommit(month),
             children: [
               month,
@@ -21174,6 +21493,169 @@ function ChartAxisLabels({
     }
   );
 }
+function useElementSize(target) {
+  const ref = react.useRef(null);
+  const [size, setSize] = react.useState({ width: 0, height: 0 });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const update = () => {
+      const { width, height } = element.getBoundingClientRect();
+      setSize(
+        (prev) => Math.abs(prev.width - width) < 0.5 && Math.abs(prev.height - height) < 0.5 ? prev : { width, height }
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [target]);
+  return { ref, size };
+}
+function useSvgTextMetrics() {
+  const ref = react.useRef(null);
+  const [metrics, setMetrics] = react.useState({ top: 0, width: 0 });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    let box3;
+    try {
+      box3 = element.getBBox();
+    } catch {
+      return;
+    }
+    setMetrics(
+      (prev) => Math.abs(prev.top - box3.y) < 0.5 && Math.abs(prev.width - box3.width) < 0.5 ? prev : { top: box3.y, width: box3.width }
+    );
+  });
+  return { ref, metrics };
+}
+var CATEGORY_LABEL_ROTATED_MAX = 120;
+var DIAGONAL = Math.SQRT1_2;
+function ChartRotatedAxisLayout({
+  axis,
+  axisStyle,
+  plot,
+  minPlotWidth,
+  labels,
+  xAt,
+  labelsRef
+}) {
+  const scrollRef = react.useRef(null);
+  const { ref: axisRef, size: axisBox } = useElementSize();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "min-w-0 overflow-x-auto", style: { gridColumn: "1 / -1" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: `max(100%, ${axisBox.width + minPlotWidth}px)` }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: axisRef,
+          className: "sticky left-0 z-1 shrink-0 bg-(--cmp-chart-bg)",
+          style: { ...axisStyle, paddingRight: AXIS_LABEL_GAP },
+          children: axis
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: plot })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: labelsRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ChartRotatedCategoryLabels,
+      {
+        labels,
+        xAt,
+        gutter: axisBox.width,
+        scrollRef
+      }
+    ) })
+  ] }) });
+}
+function ChartRotatedCategoryLabels({
+  labels,
+  xAt,
+  gutter,
+  scrollRef
+}) {
+  const sizerRef = react.useRef(null);
+  const maskRef = react.useRef(null);
+  const [box3, setBox] = react.useState({ line: 0, widest: 0 });
+  react.useEffect(() => {
+    const sizer = sizerRef.current;
+    if (!sizer) return;
+    const measure = () => {
+      const { width, height: height2 } = sizer.getBoundingClientRect();
+      const line = labels.length > 0 ? height2 / labels.length : 0;
+      setBox(
+        (prev) => Math.abs(prev.line - line) < 0.5 && Math.abs(prev.widest - width) < 0.5 ? prev : { line, widest: width }
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(sizer);
+    return () => observer.disconnect();
+  });
+  react.useEffect(() => {
+    const scroller = scrollRef.current;
+    const mask = maskRef.current;
+    if (!scroller || !mask) return;
+    const sync2 = () => {
+      mask.style.visibility = scroller.scrollLeft > 0 ? "visible" : "hidden";
+    };
+    sync2();
+    scroller.addEventListener("scroll", sync2, { passive: true });
+    return () => scroller.removeEventListener("scroll", sync2);
+  }, [scrollRef]);
+  const maxWidthAt = (index) => Math.max(
+    0,
+    Math.min(CATEGORY_LABEL_ROTATED_MAX, (xAt(index) + gutter) / DIAGONAL - box3.line / 2)
+  );
+  const height = Math.ceil(box3.line / 2 + (box3.widest + box3.line / 2) * DIAGONAL);
+  return (
+    // overflow 는 clip 이어야 한다 — hidden 이면 이 행이 스크롤 상자로 잡혀 가림막의
+    // sticky 가 스크롤을 따라가지 않는다.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "relative overflow-clip typo-body-sm-medium text-(--cmp-chart-axis-color)",
+        style: { height },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: maskRef,
+              className: "invisible sticky left-0 z-1 h-full bg-(--cmp-chart-bg)",
+              style: { width: gutter }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0", style: { left: gutter }, children: labels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute top-0 truncate",
+              style: {
+                left: xAt(index),
+                maxWidth: maxWidthAt(index),
+                // 글자 끝(오른쪽 가운데)을 눈금에 맞춘 뒤 그 점을 축으로 기울인다.
+                transform: "translateX(-100%) rotate(-45deg)",
+                transformOrigin: "right center"
+              },
+              children: label
+            },
+            `${label}-${index}`
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: sizerRef, className: "invisible absolute top-0 left-0 flex flex-col items-start", children: labels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "block truncate",
+              style: { maxWidth: maxWidthAt(index) },
+              children: label
+            },
+            `${label}-${index}`
+          )) })
+        ]
+      }
+    )
+  );
+}
 var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ title, unit, legend, legendPosition = "top", children, className, style, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -21365,44 +21847,6 @@ function linePointDimmedColor(palette, index, colors) {
 function dataValueColor(palette, index, colors) {
   return pick(DATA_VALUE_COLORS, DATA_VALUE_PALETTES, palette, index, colors);
 }
-function useElementSize() {
-  const ref = react.useRef(null);
-  const [size, setSize] = react.useState({ width: 0, height: 0 });
-  react.useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    const update = () => {
-      const { width, height } = element.getBoundingClientRect();
-      setSize(
-        (prev) => Math.abs(prev.width - width) < 0.5 && Math.abs(prev.height - height) < 0.5 ? prev : { width, height }
-      );
-    };
-    update();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(update);
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, []);
-  return { ref, size };
-}
-function useSvgTextMetrics() {
-  const ref = react.useRef(null);
-  const [metrics, setMetrics] = react.useState({ top: 0, width: 0 });
-  react.useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    let box3;
-    try {
-      box3 = element.getBBox();
-    } catch {
-      return;
-    }
-    setMetrics(
-      (prev) => Math.abs(prev.top - box3.y) < 0.5 && Math.abs(prev.width - box3.width) < 0.5 ? prev : { top: box3.y, width: box3.width }
-    );
-  });
-  return { ref, metrics };
-}
 var DOT_SIZE2 = 6;
 var DEFAULT_GAP_X = { after: 4, before: 4 };
 var ANCHOR_GAP_Y = 0;
@@ -21564,6 +22008,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   tickCount = 8,
   barSize = BAR_SIZE_MAX,
   showValueLabel = true,
+  rotateCategoryLabels = false,
   showLegend = true,
   legendPosition = "top",
   showTooltip = true,
@@ -21575,9 +22020,10 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   style
 }, ref) {
   const vertical = direction === "vertical";
+  const rotateLabels = rotateCategoryLabels && vertical;
   const { ref: plotRef, size } = useElementSize();
-  const { ref: axisTextRef, size: axisText } = useElementSize();
-  const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const { ref: axisTextRef, size: axisText } = useElementSize(rotateLabels);
+  const { ref: axisSampleRef, size: axisSample } = useElementSize(rotateLabels);
   const clipId = react.useId();
   const [hoveredCategory, setHoveredCategory] = react.useState(null);
   const perCategory = series.length === 1;
@@ -22036,7 +22482,29 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
             // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
             gridTemplateColumns: "max-content 1fr"
           },
-          children: vertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          children: rotateLabels ? (
+            // 기울인 이름은 눈금 열 아래까지 뻗으므로 스크롤 상자가 눈금 열까지 감싼다.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ChartRotatedAxisLayout,
+              {
+                axis: /* @__PURE__ */ jsxRuntime.jsx(
+                  ChartAxisLabels,
+                  {
+                    scale,
+                    direction,
+                    format: formatValue,
+                    sampleRef: axisSampleRef
+                  }
+                ),
+                axisStyle: { height: plotHeight, ...inset },
+                plot,
+                minPlotWidth,
+                labels: categories,
+                xAt: (index) => layout.offset + (index + 0.5) * layout.band,
+                labelsRef: axisTextRef
+              }
+            )
+          ) : vertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsxRuntime.jsx(
               ChartAxisLabels,
               {
@@ -22167,6 +22635,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   tickCount = 8,
   showPoint = true,
   showValueLabel = false,
+  rotateCategoryLabels = false,
   showLegend = true,
   legendPosition = "top",
   showTooltip = true,
@@ -22179,8 +22648,8 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
 }, ref) {
   const smooth = curve === "smooth";
   const { ref: plotRef, size } = useElementSize();
-  const { ref: axisTextRef, size: axisText } = useElementSize();
-  const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const { ref: axisTextRef, size: axisText } = useElementSize(rotateCategoryLabels);
+  const { ref: axisSampleRef, size: axisSample } = useElementSize(rotateCategoryLabels);
   const gradientId = react.useId();
   const [hoveredCategory, setHoveredCategory] = react.useState(null);
   const colorAt = react.useCallback(
@@ -22214,23 +22683,16 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
     [rows, tickCount, max]
   );
   const count = categories.length;
-  const step = count > 1 ? size.width / (count - 1) : 0;
-  const xAt = react.useCallback(
-    (index) => count > 1 ? index * step : size.width / 2,
-    [count, step, size.width]
-  );
+  const band = Math.max(0, size.width - AXIS_EDGE_PADDING * 2) / Math.max(1, count);
+  const xAt = react.useCallback((index) => AXIS_EDGE_PADDING + (index + 0.5) * band, [band]);
   const cellOf = react.useCallback(
-    (index) => count > 1 ? {
-      left: Math.max(0, xAt(index) - step / 2),
-      right: Math.min(size.width, xAt(index) + step / 2)
-    } : { left: 0, right: size.width },
-    [count, step, xAt, size.width]
-  );
-  const edgeOf = react.useCallback(
-    (index) => count > 1 && index === 0 ? "start" : count > 1 && index === count - 1 ? "end" : null,
-    [count]
+    (index) => ({
+      left: AXIS_EDGE_PADDING + index * band,
+      right: AXIS_EDGE_PADDING + (index + 1) * band
+    }),
+    [band]
   );
-  const minPlotWidth = categories.length * BAND_MIN;
+  const minPlotWidth = count * BAND_MIN + AXIS_EDGE_PADDING * 2;
   const totalHeight = height ?? 320;
   const plotHeight = typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
   const plotted = react.useMemo(() => {
@@ -22244,10 +22706,10 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   }, [rows, size.width, size.height, xAt, scale]);
   const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i) })) }) : null;
   const handleMove = (event) => {
-    if (!showTooltip || count === 0 || size.width <= 0 || series.length === 0) return;
+    if (!showTooltip || count === 0 || band <= 0 || series.length === 0) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    const along = event.clientX - rect.left;
-    const category = count > 1 ? Math.round(along / step) : 0;
+    const along = event.clientX - rect.left - AXIS_EDGE_PADDING;
+    const category = Math.floor(along / band);
     setHoveredCategory(category >= 0 && category < categories.length ? category : null);
   };
   const tooltipItems = hoveredCategory == null ? [] : rows.flatMap((row, seriesIndex) => {
@@ -22286,10 +22748,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
         categories.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: cn(
-              "absolute top-0 whitespace-nowrap",
-              edgeOf(index) === "start" ? "translate-x-0" : edgeOf(index) === "end" ? "-translate-x-full" : "-translate-x-1/2"
-            ),
+            className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
             style: { left: xAt(index) },
             children: label
           },
@@ -22470,17 +22929,114 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
             y: point.y - POINT_RADIUS - VALUE_LABEL_GAP2,
             className: hoveredCategory === categoryIndex ? LINE_DATA_LABEL_TYPO_HOVER : LINE_DATA_LABEL_TYPO,
             style: { fill: LINE_DATA_LABEL_COLOR },
-            textAnchor: edgeOf(categoryIndex) === "start" ? "start" : edgeOf(categoryIndex) === "end" ? "end" : "middle",
+            textAnchor: "middle",
             dominantBaseline: "auto",
             children: formatValue(point.own)
           },
           `label-${seriesIndex}-${categoryIndex}`
         )
-      )
-    ) : [],
-    [showValueLabel, plotted, hoveredCategory, formatValue, edgeOf]
+      )
+    ) : [],
+    [showValueLabel, plotted, hoveredCategory, formatValue]
+  );
+  const inset = { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 };
+  const axisLabels = /* @__PURE__ */ jsxRuntime.jsx(
+    ChartAxisLabels,
+    {
+      scale,
+      direction: "vertical",
+      format: formatValue,
+      sampleRef: axisSampleRef
+    }
+  );
+  const plot = (
+    // 바깥은 자리(높이·물러남)를, 안쪽은 그림을 맡는다. minWidth 는 바깥에 둬야
+    // 스크롤 컨테이너가 넘치는 폭을 알아본다.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative min-w-0",
+        style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: plotRef,
+            className: "relative h-full w-full",
+            onMouseMove: handleMove,
+            onMouseLeave: () => setHoveredCategory(null),
+            children: [
+              size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  width: size.width,
+                  height: size.height,
+                  overflow: "visible",
+                  role: "img",
+                  "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uAEBE\uC740\uC120 \uADF8\uB798\uD504`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "text",
+                      {
+                        ref: valueLabelRef,
+                        "aria-hidden": true,
+                        x: 0,
+                        y: 0,
+                        className: LINE_DATA_LABEL_TYPO_HOVER,
+                        dominantBaseline: "auto",
+                        style: { visibility: "hidden" },
+                        children: "0"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(ChartGrid, { scale, direction: "vertical", width: size.width, height: size.height }),
+                    hoveredCategory != null && /* @__PURE__ */ jsxRuntime.jsx(
+                      "rect",
+                      {
+                        "aria-hidden": true,
+                        x: cellOf(hoveredCategory).left,
+                        y: 0,
+                        width: cellOf(hoveredCategory).right - cellOf(hoveredCategory).left,
+                        height: size.height,
+                        style: {
+                          fill: "var(--cmp-chart-barContainer-hover-bg)",
+                          fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
+                        }
+                      }
+                    ),
+                    areaGradients,
+                    areaMask,
+                    area && /* @__PURE__ */ jsxRuntime.jsx("g", { mask: `url(#${areaMaskId})`, children: areas }),
+                    lines,
+                    pointHalos,
+                    pointDots,
+                    valueLabels
+                  ]
+                }
+              ),
+              showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ChartTooltip,
+                {
+                  title: categories[hoveredCategory] ?? "",
+                  items: tooltipItems,
+                  anchor: tooltipAnchor,
+                  bounds: size,
+                  gapX: { after: -4, before: -4 },
+                  footer: tooltipFooter?.({
+                    categoryIndex: hoveredCategory,
+                    name: categories[hoveredCategory] ?? "",
+                    points: rows.flatMap((row, seriesIndex) => {
+                      const point = row[hoveredCategory];
+                      if (point == null) return [];
+                      return [{ seriesIndex, categoryIndex: hoveredCategory, value: point.own }];
+                    })
+                  })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
   );
-  const inset = { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 };
   return /* @__PURE__ */ jsxRuntime.jsx(
     ChartFrame,
     {
@@ -22491,7 +23047,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
       legendPosition,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "grid",
@@ -22500,119 +23056,27 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
             // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
             gridTemplateColumns: "max-content 1fr"
           },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ChartAxisLabels,
-              {
-                scale,
-                direction: "vertical",
-                format: formatValue,
-                sampleRef: axisSampleRef
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+          children: rotateCategoryLabels ? (
+            // 기울인 이름은 눈금 열 아래까지 뻗으므로 스크롤 상자가 눈금 열까지 감싼다.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ChartRotatedAxisLayout,
               {
-                className: "min-w-0 overflow-x-auto",
-                style: { marginInline: -POINT_HOVER_EXTENT, paddingInline: POINT_HOVER_EXTENT },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "relative min-w-0",
-                      style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
-                      children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        "div",
-                        {
-                          ref: plotRef,
-                          className: "relative h-full w-full",
-                          onMouseMove: handleMove,
-                          onMouseLeave: () => setHoveredCategory(null),
-                          children: [
-                            size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                              "svg",
-                              {
-                                width: size.width,
-                                height: size.height,
-                                overflow: "visible",
-                                role: "img",
-                                "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uAEBE\uC740\uC120 \uADF8\uB798\uD504`,
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "text",
-                                    {
-                                      ref: valueLabelRef,
-                                      "aria-hidden": true,
-                                      x: 0,
-                                      y: 0,
-                                      className: LINE_DATA_LABEL_TYPO_HOVER,
-                                      dominantBaseline: "auto",
-                                      style: { visibility: "hidden" },
-                                      children: "0"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    ChartGrid,
-                                    {
-                                      scale,
-                                      direction: "vertical",
-                                      width: size.width,
-                                      height: size.height
-                                    }
-                                  ),
-                                  hoveredCategory != null && /* @__PURE__ */ jsxRuntime.jsx(
-                                    "rect",
-                                    {
-                                      "aria-hidden": true,
-                                      x: cellOf(hoveredCategory).left,
-                                      y: 0,
-                                      width: cellOf(hoveredCategory).right - cellOf(hoveredCategory).left,
-                                      height: size.height,
-                                      style: {
-                                        fill: "var(--cmp-chart-barContainer-hover-bg)",
-                                        fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
-                                      }
-                                    }
-                                  ),
-                                  areaGradients,
-                                  areaMask,
-                                  area && /* @__PURE__ */ jsxRuntime.jsx("g", { mask: `url(#${areaMaskId})`, children: areas }),
-                                  lines,
-                                  pointHalos,
-                                  pointDots,
-                                  valueLabels
-                                ]
-                              }
-                            ),
-                            showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                              ChartTooltip,
-                              {
-                                title: categories[hoveredCategory] ?? "",
-                                items: tooltipItems,
-                                anchor: tooltipAnchor,
-                                bounds: size,
-                                gapX: { after: -4, before: -4 },
-                                footer: tooltipFooter?.({
-                                  categoryIndex: hoveredCategory,
-                                  name: categories[hoveredCategory] ?? "",
-                                  points: rows.flatMap((row, seriesIndex) => {
-                                    const point = row[hoveredCategory];
-                                    if (point == null) return [];
-                                    return [{ seriesIndex, categoryIndex: hoveredCategory, value: point.own }];
-                                  })
-                                })
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
-                ]
+                axis: axisLabels,
+                axisStyle: { height: plotHeight, ...inset },
+                plot,
+                minPlotWidth,
+                labels: categories,
+                xAt,
+                labelsRef: axisTextRef
               }
             )
-          ]
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: plotHeight, ...inset }, children: axisLabels }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
+              plot,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
+            ] })
+          ] })
         }
       )
     }
@@ -28687,212 +29151,171 @@ function formatTimeDisplay(value, type) {
   const displayHour = hour % 12 === 0 ? 12 : hour % 12;
   return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
 }
-var TIME_SELECTOR_WIDTH = 136;
-var MERIDIEM_TIME_SELECTOR_WIDTH = 154;
-function TimeSelector({
+function scrollSelectedIntoView(list, index, center) {
+  const top = index * MODE_ITEM_HEIGHT;
+  if (center) {
+    list.scrollTop = Math.max(0, top - (list.clientHeight - MODE_ITEM_HEIGHT) / 2);
+    return;
+  }
+  if (top < list.scrollTop) list.scrollTop = top;
+  else if (top + MODE_ITEM_HEIGHT > list.scrollTop + list.clientHeight)
+    list.scrollTop = top + MODE_ITEM_HEIGHT - list.clientHeight;
+}
+function lastIndex(arr, pred) {
+  for (let i = arr.length - 1; i >= 0; i--) if (pred(arr[i], i)) return i;
+  return -1;
+}
+function ListColumn({ ariaLabel, items }) {
+  const listRef = react.useRef(null);
+  const mountedRef = react.useRef(false);
+  const selectedIndex = items.findIndex((item4) => item4.selected);
+  const tabIndexTarget = selectedIndex >= 0 ? selectedIndex : items.findIndex((item4) => !item4.disabled);
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list || selectedIndex < 0) return;
+    scrollSelectedIntoView(list, selectedIndex, !mountedRef.current);
+    mountedRef.current = true;
+  }, [selectedIndex]);
+  const onKeyDown = (event) => {
+    const buttons = [...listRef.current?.querySelectorAll("button") ?? []];
+    const current = buttons.indexOf(document.activeElement);
+    if (current < 0) return;
+    const enabled = (item4, i) => !item4.disabled && i !== current;
+    let next;
+    if (event.key === "ArrowDown") next = items.findIndex((it, i) => i > current && enabled(it, i));
+    else if (event.key === "ArrowUp")
+      next = lastIndex(items, (it, i) => i < current && enabled(it, i));
+    else if (event.key === "Home") next = items.findIndex((it) => !it.disabled);
+    else if (event.key === "End") next = lastIndex(items, (it) => !it.disabled);
+    else return;
+    event.preventDefault();
+    if (next < 0) return;
+    buttons[next]?.focus({ preventScroll: true });
+    if (listRef.current) scrollSelectedIntoView(listRef.current, next, false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-[var(--cmp-datepicker-mode-yearMonth-column-width)] min-w-0 overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": ariaLabel,
+      tabIndex: -1,
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      onKeyDown,
+      children: items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": item4.selected,
+          disabled: item4.disabled,
+          tabIndex: index === tabIndexTarget ? 0 : -1,
+          className: cn(modeListItemClass(item4.selected, item4.disabled), "outline-offset-[-2px]"),
+          onClick: () => !item4.disabled && item4.onSelect(),
+          children: item4.label
+        },
+        item4.key
+      ))
+    }
+  ) });
+}
+var HOURS_24 = Array.from({ length: 24 }, (_, i) => i);
+var HOURS_12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)];
+function TimeListbox({
   value,
   showMeridiem,
   minuteStep,
-  onChange
+  isDisabled,
+  onChange,
+  labelPrefix,
+  elevated = true
 }) {
-  const parsed = react.useMemo(() => parseTimeValue(value), [value]);
-  const [hour, setHour] = react.useState(parsed.hour);
-  const [minute, setMinute] = react.useState(parsed.minute);
-  const [editingPart, setEditingPart] = react.useState(null);
-  const [inputDraft, setInputDraft] = react.useState({});
+  const toState = (v) => v ? parseTimeValue(v) : null;
+  const [time, setTime] = react.useState(() => toState(value));
   react.useEffect(() => {
-    setHour(parsed.hour);
-    setMinute(parsed.minute);
-  }, [parsed.hour, parsed.minute]);
-  const meridiem = hour >= 12 ? "PM" : "AM";
-  const displayHour = showMeridiem ? hour % 12 === 0 ? 12 : hour % 12 : hour;
-  const commit = (nextHour, nextMinute) => {
-    const h = clampTimePart(nextHour, 0, 23);
-    const m = clampTimePart(nextMinute, 0, 59);
-    setHour(h);
-    setMinute(m);
-    onChange(formatTimeValue(h, m));
-  };
-  const setMeridiem = (next) => {
-    if (next === meridiem) return;
-    commit(next === "AM" ? hour - 12 : hour + 12, minute);
-  };
-  const changeMinute = (delta) => {
-    const next = minute + delta;
-    if (next > 59) {
-      commit((hour + 1) % 24, next - 60);
-      return;
-    }
-    if (next < 0) {
-      commit((hour + 23) % 24, next + 60);
-      return;
-    }
-    commit(hour, next);
-  };
-  const changeHour = (delta) => commit((hour + delta + 24) % 24, minute);
-  const sanitizeInput = (next) => next.replace(/\D/g, "").slice(0, 2);
-  const beginEdit = (part, currentValue) => {
-    setEditingPart(part);
-    setInputDraft((prev) => ({ ...prev, [part]: String(currentValue).padStart(2, "0") }));
-  };
-  const commitHourDraft = (draft) => {
-    const clamped = clampTimePart(Number(draft), showMeridiem ? 1 : 0, showMeridiem ? 12 : 23);
-    const nextHour = showMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
-    commit(nextHour, minute);
-    return clamped;
-  };
-  const commitMinuteDraft = (draft) => {
-    const clamped = clampTimePart(Number(draft), 0, 59);
-    commit(hour, clamped);
-    return clamped;
-  };
-  const endEdit = (part) => {
-    const draft = inputDraft[part];
-    if (part === "hour" && draft != null && draft !== "") {
-      commitHourDraft(draft);
-    }
-    if (part === "minute" && draft != null && draft !== "") {
-      commitMinuteDraft(draft);
-    }
-    setEditingPart(null);
-    setInputDraft({});
-  };
-  const inputStyle = {
-    width: "var(--cmp-timepicker-selector-time-input-width)",
-    height: "var(--cmp-textinput-sm-height)",
-    borderRadius: "var(--cmp-textinput-sm-radius)",
-    border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",
-    color: "var(--cmp-textinput-text-default)",
-    fontSize: 12,
-    lineHeight: "20px"
+    setTime(toState(value));
+  }, [value]);
+  const step = Math.max(1, Math.floor(minuteStep));
+  const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
+  const blocked = (h, m) => isDisabled?.(h * 60 + m) ?? false;
+  const hourBlocked = (h) => minutes.every((m) => blocked(h, m));
+  const commit = (hours, preferred, part) => {
+    let next = blocked(preferred.hour, preferred.minute) ? null : preferred;
+    for (const h of hours) {
+      if (next) break;
+      const m = minutes.find((mm) => !blocked(h, mm));
+      if (m !== void 0) next = { hour: h, minute: m };
+    }
+    if (!next) return;
+    setTime(next);
+    onChange(formatTimeValue(next.hour, next.minute), part);
   };
-  const renderColumn = (type) => {
-    const isHour = type === "hour";
-    const val = isHour ? displayHour : minute;
-    const displayValue2 = editingPart === type ? inputDraft[type] ?? "" : String(val).padStart(2, "0");
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "flex flex-col items-center justify-center",
-        style: { gap: "var(--cmp-timepicker-selector-time-column-gap)" },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "chevronUp",
-              size: "xs",
-              ariaLabel: `${isHour ? "\uC2DC" : "\uBD84"} \uC99D\uAC00`,
-              onClick: () => isHour ? changeHour(1) : changeMinute(minuteStep)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              "aria-label": isHour ? "\uC2DC" : "\uBD84",
-              inputMode: "numeric",
-              value: displayValue2,
-              placeholder: "-",
-              onFocus: () => beginEdit(type, val),
-              onBlur: () => endEdit(type),
-              onChange: (event) => {
-                const draft = sanitizeInput(event.target.value);
-                setInputDraft((prev) => ({ ...prev, [type]: draft }));
-                if (draft === "") return;
-                const raw = Number(draft);
-                if (isHour) {
-                  if (draft.length < 2) return;
-                  const clamped2 = commitHourDraft(draft);
-                  const displayDraft2 = raw === clamped2 ? draft : String(clamped2);
-                  setInputDraft((prev) => ({ ...prev, [type]: displayDraft2 }));
-                  return;
-                }
-                if (draft.length < 2) return;
-                const clamped = commitMinuteDraft(draft);
-                const displayDraft = raw === clamped ? draft : String(clamped);
-                setInputDraft((prev) => ({ ...prev, [type]: displayDraft }));
-              },
-              className: "box-border bg-white text-center outline-none",
-              style: inputStyle
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "chevronDown",
-              size: "xs",
-              ariaLabel: `${isHour ? "\uC2DC" : "\uBD84"} \uAC10\uC18C`,
-              onClick: () => isHour ? changeHour(-1) : changeMinute(-minuteStep)
-            }
-          )
-        ]
+  const hour = time?.hour;
+  const minute = time?.minute ?? 0;
+  const meridiem = hour === void 0 ? void 0 : hour >= 12 ? "PM" : "AM";
+  const prefix = labelPrefix ? `${labelPrefix} ` : "";
+  const meridiemItems = ["AM", "PM"].map((item4) => {
+    const base = item4 === "AM" ? 0 : 12;
+    const range = HOURS_24.slice(base, base + 12);
+    return {
+      key: item4,
+      label: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4",
+      selected: meridiem === item4,
+      disabled: range.every(hourBlocked),
+      onSelect: () => {
+        if (meridiem === item4) return;
+        const h = hour === void 0 ? base : hour % 12 + base;
+        commit(range, { hour: h, minute }, "meridiem");
       }
-    );
-  };
+    };
+  });
+  const hourItems = showMeridiem ? HOURS_12.map((display) => {
+    const h = display % 12 + (meridiem === "PM" ? 12 : 0);
+    return {
+      key: String(display),
+      label: `${padTimePart(display)}\uC2DC`,
+      selected: hour === h,
+      disabled: hourBlocked(h),
+      onSelect: () => commit([h], { hour: h, minute }, "hour")
+    };
+  }) : HOURS_24.map((h) => ({
+    key: String(h),
+    label: `${padTimePart(h)}\uC2DC`,
+    selected: hour === h,
+    disabled: hourBlocked(h),
+    onSelect: () => commit([h], { hour: h, minute }, "hour")
+  }));
+  const minuteHour = hour ?? (meridiem === "PM" ? 12 : 0);
+  const minuteItems = minutes.map((m) => ({
+    key: String(m),
+    label: `${padTimePart(m)}\uBD84`,
+    selected: time != null && minute === m,
+    disabled: blocked(minuteHour, m),
+    onSelect: () => commit([minuteHour], { hour: minuteHour, minute: m }, "minute")
+  }));
+  const divider = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "flex flex-col items-stretch justify-center overflow-hidden",
-      style: {
-        background: "var(--cmp-timepicker-selector-bg)",
-        borderRadius: "var(--cmp-timepicker-selector-radius)",
-        boxShadow: "4px 8px 16px -4px rgba(34,34,34,0.1), 0 0 24px -6px rgba(34,34,34,0.12)"
-      },
+      className: cn(
+        "inline-flex gap-[var(--cmp-datepicker-mode-yearMonth-gap)] overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]",
+        elevated && "rounded-[var(--cmp-datepicker-mode-radius)] shadow-normal-sm"
+      ),
+      style: { height: MODE_LIST_HEIGHT },
       children: [
-        showMeridiem && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "flex items-center justify-center",
-            style: {
-              padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
-              const selected = item4 === meridiem;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setMeridiem(item4),
-                  className: cn(
-                    "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
-                    index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)]" : "rounded-r-[var(--cmp-select-sm-radius)]",
-                    index === 0 ? "-mr-px" : "",
-                    selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
-                  ),
-                  children: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
-                },
-                item4
-              );
-            }) })
-          }
-        ),
-        showMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px w-full bg-[var(--sys-color-divider-default)]" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "flex items-center justify-center",
-            style: {
-              gap: "var(--cmp-timepicker-selector-time-gap)",
-              padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
-            },
-            children: [
-              renderColumn("hour"),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "text-center",
-                  style: {
-                    width: "var(--cmp-timepicker-selector-colon-size)",
-                    color: "var(--cmp-field-hint-color)",
-                    fontSize: "var(--cmp-timepicker-selector-colon-size)",
-                    lineHeight: "var(--cmp-timepicker-selector-colon-size)"
-                  },
-                  children: ":"
-                }
-              ),
-              renderColumn("minute")
-            ]
-          }
-        )
+        showMeridiem && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ListColumn, { ariaLabel: `${prefix}\uC624\uC804/\uC624\uD6C4`, items: meridiemItems }),
+          divider
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ListColumn, { ariaLabel: `${prefix}\uC2DC`, items: hourItems }),
+        divider,
+        /* @__PURE__ */ jsxRuntime.jsx(ListColumn, { ariaLabel: `${prefix}\uBD84`, items: minuteItems })
       ]
     }
   );
@@ -28930,11 +29353,9 @@ function STimePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
-  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const triggerId = useFieldControlId();
   const triggerTextId = `${triggerId}-text`;
-  const [popoverAlignOffset, setPopoverAlignOffset] = react.useState(0);
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -28955,11 +29376,6 @@ function STimePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
-    if (next) {
-      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
-      const selectorWidth = effectiveShowMeridiem ? MERIDIEM_TIME_SELECTOR_WIDTH : TIME_SELECTOR_WIDTH;
-      setPopoverAlignOffset(Math.max(0, (triggerWidth - selectorWidth) / 2));
-    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -28998,7 +29414,6 @@ function STimePicker({
         /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            ref: triggerRef,
             id: triggerId,
             role: "button",
             "aria-disabled": disabled,
@@ -29062,20 +29477,22 @@ function STimePicker({
           RPopover13__namespace.Content,
           {
             side: "bottom",
-            align: "start",
+            align: "center",
             sideOffset: 4,
-            alignOffset: popoverAlignOffset,
             className: cn(
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              TimeSelector,
+              TimeListbox,
               {
                 value: normalized,
                 showMeridiem: effectiveShowMeridiem,
                 minuteStep,
-                onChange: commitValue
+                onChange: (time, part) => {
+                  commitValue(time);
+                  if (part === "minute") commitOpen(false);
+                }
               }
             )
           }
@@ -29105,7 +29522,6 @@ function formatTimeRangeDisplay(value, type) {
   if (value == null || value[0] === "" || value[1] === "") return "";
   return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
 }
-var TIME_RANGE_SELECTOR_WIDTH = 345;
 var MIDDAY_FIELD_MIN_WIDTH = {
   sm: 178,
   md: 216
@@ -29114,6 +29530,10 @@ var MIDDAY_FIELD_MAX_WIDTH = {
   sm: "lg",
   md: "lg"
 };
+var toMinutes = (time) => {
+  const { hour, minute } = parseTimeValue(time);
+  return hour * 60 + minute;
+};
 function RangeTimeSelector({
   value,
   showMeridiem,
@@ -29121,233 +29541,32 @@ function RangeTimeSelector({
   rangeOrder,
   onChange
 }) {
-  const range = react.useMemo(() => value ?? ["00:00", "23:59"], [value]);
-  const [editingKey, setEditingKey] = react.useState(null);
-  const [inputDraft, setInputDraft] = react.useState({});
-  const autoAdjustedRef = react.useRef(null);
-  const getParts = (side) => parseTimeValue(side === "start" ? range[0] : range[1]);
-  const getMeridiem = (side) => getParts(side).hour >= 12 ? "PM" : "AM";
-  const getDisplayHour = (side) => {
-    const { hour } = getParts(side);
-    if (!showMeridiem) return hour;
-    const displayHour = hour % 12;
-    return displayHour === 0 ? 12 : displayHour;
-  };
-  const commit = (side, hour, minute, direction = "unknown") => {
-    const next = formatTimeValue(hour, minute);
-    onChange(
-      normalizeNextRange(side === "start" ? [next, range[1]] : [range[0], next], side, direction)
-    );
-  };
-  const getTimeMinutes2 = (time) => {
-    const { hour, minute } = parseTimeValue(time);
-    return hour * 60 + minute;
-  };
-  const normalizeNextRange = (nextRange, changedSide, direction) => {
-    if (rangeOrder === "allow-cross-day") return nextRange;
-    const [start, end] = nextRange;
-    const [currentStart, currentEnd] = range;
-    if (getTimeMinutes2(start) <= getTimeMinutes2(end)) {
-      const shouldKeepSynced = autoAdjustedRef.current?.side === changedSide && currentStart === currentEnd && start !== end && (direction === "unknown" || autoAdjustedRef.current.direction === direction);
-      if (shouldKeepSynced) {
-        return changedSide === "start" ? [start, start] : [end, end];
-      }
-      autoAdjustedRef.current = null;
-      return nextRange;
-    }
-    autoAdjustedRef.current = {
-      side: changedSide,
-      direction: changedSide === "start" ? "increase" : "decrease"
-    };
-    return changedSide === "start" ? [start, start] : [end, end];
-  };
-  const changeHour = (side, delta) => {
-    const { hour, minute } = getParts(side);
-    commit(side, (hour + delta + 24) % 24, minute, delta > 0 ? "increase" : "decrease");
-  };
-  const changeMinute = (side, delta) => {
-    const { hour, minute } = getParts(side);
-    const next = minute + delta;
-    if (next > 59) {
-      commit(side, (hour + 1) % 24, next - 60, delta > 0 ? "increase" : "decrease");
-      return;
-    }
-    if (next < 0) {
-      commit(side, (hour + 23) % 24, next + 60, delta > 0 ? "increase" : "decrease");
+  const range = value ?? ["00:00", "23:59"];
+  const strict = rangeOrder !== "allow-cross-day";
+  const change = (side, time) => {
+    if (side === "end") {
+      onChange([range[0], time]);
       return;
     }
-    commit(side, hour, next, delta > 0 ? "increase" : "decrease");
-  };
-  const setMeridiem = (side, next) => {
-    const current = getMeridiem(side);
-    if (current === next) return;
-    const { hour, minute } = getParts(side);
-    commit(side, next === "AM" ? hour - 12 : hour + 12, minute);
-  };
-  const getEditingKey = (side, part) => `${side}-${part}`;
-  const sanitizeInput = (next) => next.replace(/\D/g, "").slice(0, 2);
-  const beginEdit = (side, part, currentValue) => {
-    const key = getEditingKey(side, part);
-    setEditingKey(key);
-    setInputDraft((prev) => ({ ...prev, [key]: String(currentValue).padStart(2, "0") }));
-  };
-  const commitHourDraft = (side, draft) => {
-    const clamped = clampTimePart(Number(draft), showMeridiem ? 1 : 0, showMeridiem ? 12 : 23);
-    const parts = getParts(side);
-    const meridiem = getMeridiem(side);
-    const nextHour = showMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
-    commit(side, nextHour, parts.minute);
-    return clamped;
-  };
-  const commitMinuteDraft = (side, draft) => {
-    const { hour } = getParts(side);
-    const clamped = clampTimePart(Number(draft), 0, 59);
-    commit(side, hour, clamped);
-    return clamped;
-  };
-  const endEdit = (side, part) => {
-    const key = getEditingKey(side, part);
-    const draft = inputDraft[key];
-    if (part === "hour" && draft != null && draft !== "") {
-      commitHourDraft(side, draft);
-    }
-    if (part === "minute" && draft != null && draft !== "") {
-      commitMinuteDraft(side, draft);
-    }
-    setEditingKey(null);
-    setInputDraft({});
-  };
-  const inputStyle = {
-    width: "var(--cmp-timepicker-selector-time-input-width)",
-    height: "var(--cmp-textinput-sm-height)",
-    borderRadius: "var(--cmp-textinput-sm-radius)",
-    border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",
-    color: "var(--cmp-textinput-text-default)",
-    fontSize: 12,
-    lineHeight: "20px"
-  };
-  const renderColumn = (side, kind) => {
-    const isHour = kind === "hour";
-    const { minute } = getParts(side);
-    const val = isHour ? getDisplayHour(side) : minute;
-    const currentEditingKey = getEditingKey(side, kind);
-    const displayValue2 = editingKey === currentEditingKey ? inputDraft[currentEditingKey] ?? "" : String(val).padStart(2, "0");
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "flex flex-col items-center justify-center",
-        style: { gap: "var(--cmp-timepicker-selector-time-column-gap)" },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "chevronUp",
-              size: "xs",
-              ariaLabel: `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"} \uC99D\uAC00`,
-              onClick: () => isHour ? changeHour(side, 1) : changeMinute(side, minuteStep)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              "aria-label": `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"}`,
-              inputMode: "numeric",
-              value: displayValue2,
-              placeholder: "-",
-              onFocus: () => beginEdit(side, kind, val),
-              onBlur: () => endEdit(side, kind),
-              onChange: (event) => {
-                const draft = sanitizeInput(event.target.value);
-                setInputDraft((prev) => ({ ...prev, [currentEditingKey]: draft }));
-                if (draft === "") return;
-                const raw = Number(draft);
-                if (isHour) {
-                  if (draft.length < 2) return;
-                  const clamped2 = commitHourDraft(side, draft);
-                  const displayDraft2 = raw === clamped2 ? draft : String(clamped2);
-                  setInputDraft((prev) => ({ ...prev, [currentEditingKey]: displayDraft2 }));
-                  return;
-                }
-                if (draft.length < 2) return;
-                const clamped = commitMinuteDraft(side, draft);
-                const displayDraft = raw === clamped ? draft : String(clamped);
-                setInputDraft((prev) => ({ ...prev, [currentEditingKey]: displayDraft }));
-              },
-              className: "box-border bg-white text-center outline-none",
-              style: inputStyle
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "chevronDown",
-              size: "xs",
-              ariaLabel: `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"} \uAC10\uC18C`,
-              onClick: () => isHour ? changeHour(side, -1) : changeMinute(side, -minuteStep)
-            }
-          )
-        ]
-      }
-    );
+    onChange([time, strict && toMinutes(time) > toMinutes(range[1]) ? time : range[1]]);
   };
   const renderPanel = (side, title) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "flex flex-col items-center justify-center",
-      style: { gap: "var(--cmp-timepicker-selector-range-section-gap)" },
+      className: "flex flex-col items-center",
+      style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            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 }),
-              showMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
-                const selected = item4 === getMeridiem(side);
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setMeridiem(side, item4),
-                    className: cn(
-                      "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
-                      index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)] -mr-px" : "rounded-r-[var(--cmp-select-sm-radius)]",
-                      selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
-                    ),
-                    children: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
-                  },
-                  item4
-                );
-              }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__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(
+          TimeListbox,
           {
-            className: "flex items-center justify-center",
-            style: {
-              gap: "var(--cmp-timepicker-selector-time-gap)",
-              padding: "0 var(--cmp-timepicker-selector-section-paddingX)"
-            },
-            children: [
-              renderColumn(side, "hour"),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "text-center",
-                  style: {
-                    width: "var(--cmp-timepicker-selector-colon-size)",
-                    color: "var(--cmp-field-hint-color)",
-                    fontSize: "var(--cmp-timepicker-selector-colon-size)",
-                    lineHeight: "var(--cmp-timepicker-selector-colon-size)"
-                  },
-                  children: ":"
-                }
-              ),
-              renderColumn(side, "minute")
-            ]
+            value: side === "start" ? range[0] : range[1],
+            showMeridiem,
+            minuteStep,
+            labelPrefix: side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC",
+            elevated: false,
+            isDisabled: strict && side === "end" ? (minutes) => minutes < toMinutes(range[0]) : void 0,
+            onChange: (time) => change(side, time)
           }
         )
       ]
@@ -29406,11 +29625,9 @@ function STimeRangePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
-  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const triggerId = useFieldControlId();
   const triggerTextId = `${triggerId}-text`;
-  const [popoverAlignOffset, setPopoverAlignOffset] = react.useState(0);
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -29434,10 +29651,6 @@ function STimeRangePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
-    if (next) {
-      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
-      setPopoverAlignOffset(Math.max(0, (triggerWidth - TIME_RANGE_SELECTOR_WIDTH) / 2));
-    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -29476,7 +29689,6 @@ function STimeRangePicker({
         /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            ref: triggerRef,
             id: triggerId,
             role: "button",
             "aria-disabled": disabled,
@@ -29540,9 +29752,8 @@ function STimeRangePicker({
           RPopover13__namespace.Content,
           {
             side: "bottom",
-            align: "start",
+            align: "center",
             sideOffset: 4,
-            alignOffset: popoverAlignOffset,
             className: cn(
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM