sellmate-design-system-react 9.0.0-beta.50 → 9.0.0-beta.52

package/dist/index.cjs

@@ -6423,8 +6423,8 @@ function SellmateWordmark({ className }) {
     "svg",
     {
       className,
-      width: "276",
-      height: "40",
+      width: "220.8",
+      height: "32",
       viewBox: "0 0 276 40",
       fill: "#00275F",
       xmlns: "http://www.w3.org/2000/svg",
@@ -6458,7 +6458,7 @@ var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ prod
         // 로그인 화면 밖(모달·스토리)에서도 그대로 쓸 수 있는 이유다.
         "flex h-full w-full max-w-[640px] min-w-[368px] shrink-0 flex-col items-center justify-center gap-sd-60",
         // 라운드 24px·폭 상하한(640/368px)은 대응 토큰이 없어 값으로 둔다 (디자인팀 토큰 추가 요청 대상).
-        "rounded-[24px] bg-(--sys-color-bg-frame) p-sd-24 text-center",
+        "rounded-[24px] bg-(--sys-color-bg-frame) p-sd-16 text-center",
         // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — `break-keep` 으로 띄어쓰기에서만
         // 끊는다. 끊을 자리가 아예 없는 긴 토큰(URL·주문번호)만 `wrap-break-word` 로 흘려보낸다.
         "break-keep wrap-break-word",
@@ -6471,7 +6471,7 @@ var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ prod
             /* @__PURE__ */ jsxRuntime.jsx(SellmateWordmark, {}),
             product != null && // 24px 는 typo 프리셋(최대 18px)에 없는 등급이다 — 제품명은 로고의 일부처럼 읽혀야
             // 해서 본문 스케일 위에 선다. 여기만 값으로 두고, 프리셋이 생기면 갈아탄다.
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[24px] leading-[36px] font-bold text-(--sys-color-fg-accentLight)", children: product })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[24px] leading-[28px] font-bold text-(--sys-color-fg-accentLight)", children: product })
           ] }),
           hasIntro && // 소개와 보조 설명은 한 문단으로 읽힌다.
           // `text-balance` 는 상속되므로 여기 한 번만 걸어 둘을 함께 덮는다 — 가운데 정렬에서는
@@ -7124,6 +7124,149 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SSectionHeaderCard2 = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
+var OVERLAY_SCROLLBAR_SIZE = 12;
+var MIN_THUMB_SIZE = 32;
+var AUTO_HIDE_DELAY = 1e3;
+var FADE_CLASS = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
+var HIDDEN = { visible: false, thumbSize: 0, thumbOffset: 0 };
+function getMetrics(viewportSize, contentSize, scrollOffset) {
+  if (contentSize <= viewportSize) return HIDDEN;
+  const trackSize = viewportSize;
+  const maxScrollOffset = contentSize - viewportSize;
+  const thumbSize = Math.min(
+    trackSize,
+    Math.max(MIN_THUMB_SIZE, viewportSize / contentSize * trackSize)
+  );
+  const maxThumbOffset = trackSize - thumbSize;
+  const thumbOffset = maxScrollOffset > 0 ? scrollOffset / maxScrollOffset * maxThumbOffset : 0;
+  return { visible: true, thumbSize, thumbOffset };
+}
+function OverlayScrollbars({
+  scrollRef,
+  vertical: showVertical = true,
+  horizontal: showHorizontal = true,
+  autoHide = false
+}) {
+  const [vertical, setVertical] = react.useState(HIDDEN);
+  const [horizontal, setHorizontal] = react.useState(HIDDEN);
+  const [scrolling, setScrolling] = react.useState(false);
+  const [dragging, setDragging] = react.useState(false);
+  const hideTimer = react.useRef(null);
+  const shown = !autoHide || scrolling || dragging;
+  const update = react.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setVertical(showVertical ? getMetrics(el.clientHeight, el.scrollHeight, el.scrollTop) : HIDDEN);
+    setHorizontal(
+      showHorizontal ? getMetrics(el.clientWidth, el.scrollWidth, el.scrollLeft) : HIDDEN
+    );
+  }, [scrollRef, showVertical, showHorizontal]);
+  const wake = react.useCallback(() => {
+    setScrolling(true);
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    hideTimer.current = setTimeout(() => setScrolling(false), AUTO_HIDE_DELAY);
+  }, []);
+  react.useEffect(() => () => void (hideTimer.current && clearTimeout(hideTimer.current)), []);
+  react.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      update();
+      if (autoHide) wake();
+    };
+    update();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    if (el.firstElementChild) observer?.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      observer?.disconnect();
+    };
+  }, [scrollRef, update, autoHide, wake]);
+  const drag = (axis) => (startEvent) => {
+    const el = scrollRef.current;
+    const metrics = axis === "vertical" ? vertical : horizontal;
+    if (!el || !metrics.visible) return;
+    startEvent.preventDefault();
+    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
+    setDragging(true);
+    const isVertical = axis === "vertical";
+    const startPointer = isVertical ? startEvent.clientY : startEvent.clientX;
+    const startScroll = isVertical ? el.scrollTop : el.scrollLeft;
+    const viewportSize = isVertical ? el.clientHeight : el.clientWidth;
+    const contentSize = isVertical ? el.scrollHeight : el.scrollWidth;
+    const maxThumbOffset = viewportSize - metrics.thumbSize;
+    const maxScroll = contentSize - viewportSize;
+    if (maxThumbOffset <= 0 || maxScroll <= 0) {
+      setDragging(false);
+      return;
+    }
+    const onPointerMove = (moveEvent) => {
+      const delta = (isVertical ? moveEvent.clientY : moveEvent.clientX) - startPointer;
+      const next = startScroll + delta / maxThumbOffset * maxScroll;
+      if (isVertical) el.scrollTop = next;
+      else el.scrollLeft = next;
+    };
+    const onPointerUp = () => {
+      setDragging(false);
+      if (autoHide) wake();
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    vertical.visible && // 트랙은 포인터를 받지 않는다 — 막대가 없는 자리는 아래 콘텐츠가 그대로 눌린다.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute top-0 right-0 bottom-0 z-[1] w-[12px]",
+          FADE_CLASS,
+          shown ? "opacity-100" : "opacity-0"
+        ),
+        style: { bottom: horizontal.visible ? OVERLAY_SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute right-[2px] w-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              height: vertical.thumbSize,
+              transform: `translateY(${vertical.thumbOffset}px)`
+            },
+            onPointerDown: drag("vertical")
+          }
+        )
+      }
+    ),
+    horizontal.visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute right-0 bottom-0 left-0 z-[1] h-[12px]",
+          FADE_CLASS,
+          shown ? "opacity-100" : "opacity-0"
+        ),
+        style: { right: vertical.visible ? OVERLAY_SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute bottom-[2px] h-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              width: horizontal.thumbSize,
+              transform: `translateX(${horizontal.thumbOffset}px)`
+            },
+            onPointerDown: drag("horizontal")
+          }
+        )
+      }
+    )
+  ] });
+}
 
 // src/lib/scrollbar.ts
 var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
@@ -7143,30 +7286,61 @@ var SScrollArea = /* @__PURE__ */ react.forwardRef(function SScrollArea2({
   bordered = false,
   maxHeight,
   maxWidth,
+  overlayScrollbar = false,
   className,
   style,
   children,
   ...rest
 }, ref) {
+  const scrollRef = react.useRef(null);
+  const setScrollRef = react.useCallback(
+    (node) => {
+      scrollRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
   const mergedStyle = { ...style };
   if (maxHeight) mergedStyle.maxHeight = maxHeight;
   if (maxWidth) mergedStyle.maxWidth = maxWidth;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const scroller = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      ref: setScrollRef,
       className: cn(
         AXIS_CLASS[axis],
-        SCROLLBAR_CLASS,
-        background && SCROLLBAR_TRACK_BG_CLASS,
-        bordered && SCROLLBAR_TRACK_BORDER_CLASS,
-        className
+        overlayScrollbar ? (
+          // 바깥 상자가 크기를 쥐었으므로 스크롤 요소는 그 안을 채우기만 한다.
+          `${SCROLLBAR_HIDDEN_CLASS} h-full w-full`
+        ) : cn(
+          SCROLLBAR_CLASS,
+          background && SCROLLBAR_TRACK_BG_CLASS,
+          bordered && SCROLLBAR_TRACK_BORDER_CLASS
+        ),
+        !overlayScrollbar && className
       ),
-      style: mergedStyle,
+      style: overlayScrollbar ? void 0 : mergedStyle,
       ...rest,
       children
     }
   );
+  if (!overlayScrollbar) return scroller;
+  return (
+    // 막대가 기준으로 삼을 상자. overflow-hidden 은 막대가 모서리 밖으로 새지 않게 한다.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden", className), style: mergedStyle, children: [
+      scroller,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OverlayScrollbars,
+        {
+          scrollRef,
+          vertical: axis !== "horizontal",
+          horizontal: axis !== "vertical",
+          autoHide: true
+        }
+      )
+    ] })
+  );
 });
 
 // src/components/SScrollArea/scrollArea.config.ts
@@ -11799,22 +11973,6 @@ var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
   neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
   screen: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
 };
-var SCROLLBAR_SIZE = 12;
-var SCROLLBAR_MIN_THUMB_SIZE = 32;
-var getMetrics = (viewportSize, contentSize, scrollOffset) => {
-  if (contentSize <= viewportSize) {
-    return { visible: false, thumbSize: 0, thumbOffset: 0 };
-  }
-  const trackSize = viewportSize;
-  const maxScrollOffset = contentSize - viewportSize;
-  const thumbSize = Math.min(
-    trackSize,
-    Math.max(SCROLLBAR_MIN_THUMB_SIZE, viewportSize / contentSize * trackSize)
-  );
-  const maxThumbOffset = trackSize - thumbSize;
-  const thumbOffset = maxScrollOffset > 0 ? scrollOffset / maxScrollOffset * maxThumbOffset : 0;
-  return { visible: true, thumbSize, thumbOffset };
-};
 var setForwardedRef = (ref, node) => {
   if (typeof ref === "function") {
     ref(node);
@@ -11822,119 +11980,6 @@ var setForwardedRef = (ref, node) => {
   }
   if (ref) ref.current = node;
 };
-function SPageOverlayScrollbars({ scrollRef }) {
-  const [vertical, setVertical] = react.useState({
-    visible: false,
-    thumbSize: 0,
-    thumbOffset: 0
-  });
-  const [horizontal, setHorizontal] = react.useState({
-    visible: false,
-    thumbSize: 0,
-    thumbOffset: 0
-  });
-  const update = react.useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    setVertical(getMetrics(el.clientHeight, el.scrollHeight, el.scrollTop));
-    setHorizontal(getMetrics(el.clientWidth, el.scrollWidth, el.scrollLeft));
-  }, [scrollRef]);
-  react.useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    update();
-    el.addEventListener("scroll", update, { passive: true });
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
-    observer?.observe(el);
-    if (el.firstElementChild) observer?.observe(el.firstElementChild);
-    return () => {
-      el.removeEventListener("scroll", update);
-      observer?.disconnect();
-    };
-  }, [scrollRef, update]);
-  const dragVertical = (startEvent) => {
-    const el = scrollRef.current;
-    if (!el || !vertical.visible) return;
-    startEvent.preventDefault();
-    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
-    const startPointer = startEvent.clientY;
-    const startScrollTop = el.scrollTop;
-    const maxThumbOffset = el.clientHeight - vertical.thumbSize;
-    const maxScrollTop = el.scrollHeight - el.clientHeight;
-    if (maxThumbOffset <= 0 || maxScrollTop <= 0) return;
-    const onPointerMove = (moveEvent) => {
-      const delta = moveEvent.clientY - startPointer;
-      el.scrollTop = startScrollTop + delta / maxThumbOffset * maxScrollTop;
-    };
-    const onPointerUp = () => {
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp, { once: true });
-  };
-  const dragHorizontal = (startEvent) => {
-    const el = scrollRef.current;
-    if (!el || !horizontal.visible) return;
-    startEvent.preventDefault();
-    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
-    const startPointer = startEvent.clientX;
-    const startScrollLeft = el.scrollLeft;
-    const maxThumbOffset = el.clientWidth - horizontal.thumbSize;
-    const maxScrollLeft = el.scrollWidth - el.clientWidth;
-    if (maxThumbOffset <= 0 || maxScrollLeft <= 0) return;
-    const onPointerMove = (moveEvent) => {
-      const delta = moveEvent.clientX - startPointer;
-      el.scrollLeft = startScrollLeft + delta / maxThumbOffset * maxScrollLeft;
-    };
-    const onPointerUp = () => {
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp, { once: true });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    vertical.visible && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "pointer-events-none absolute bottom-0 right-0 top-0 z-[1] w-[12px]",
-        style: { bottom: horizontal.visible ? SCROLLBAR_SIZE : 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "pointer-events-auto absolute right-[2px] w-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
-            style: {
-              height: vertical.thumbSize,
-              transform: `translateY(${vertical.thumbOffset}px)`
-            },
-            onPointerDown: dragVertical
-          }
-        )
-      }
-    ),
-    horizontal.visible && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "pointer-events-none absolute bottom-0 left-0 right-0 z-[1] h-[12px]",
-        style: { right: vertical.visible ? SCROLLBAR_SIZE : 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "pointer-events-auto absolute bottom-[2px] h-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
-            style: {
-              width: horizontal.thumbSize,
-              transform: `translateX(${horizontal.thumbOffset}px)`
-            },
-            onPointerDown: dragHorizontal
-          }
-        )
-      }
-    )
-  ] });
-}
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = false,
@@ -12007,7 +12052,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
       style: gridStyle,
       children: [
         main,
-        /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+        /* @__PURE__ */ jsxRuntime.jsx(OverlayScrollbars, { scrollRef })
       ]
     }
   );
@@ -13468,47 +13513,167 @@ function SCalendarBoard({
   );
 }
 
-// src/lib/floating-height.ts
-var POPOVER_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
-function clampToAvailableHeight(value, availableHeight) {
-  if (value == null || value === "") return availableHeight;
-  const css = typeof value === "number" ? `${value}px` : value;
-  return `min(${css}, ${availableHeight})`;
+// src/lib/row-metrics.ts
+function createRowMetrics(count, estimate) {
+  const safeCount = Math.max(0, Math.floor(count));
+  const safeEstimate = Math.max(1, estimate);
+  const metrics = {
+    sizes: new Array(safeCount).fill(safeEstimate),
+    measured: new Array(safeCount).fill(false),
+    offsets: [],
+    estimate: safeEstimate,
+    measuredCount: 0,
+    measuredTotal: 0,
+    dirtyFrom: 0
+  };
+  rebuildOffsets(metrics);
+  return metrics;
 }
-var FONT = {
-  sm: {
-    fontSize: 12,
-    lineHeight: 20,
-    paddingX: "var(--cmp-textinput-sm-paddingX)",
-    gap: "var(--cmp-textinput-sm-gap)"
-  },
-  md: {
-    fontSize: 14,
-    lineHeight: 24,
-    paddingX: "var(--cmp-textinput-md-paddingX)",
-    gap: "var(--cmp-textinput-md-gap)"
+function resizeRowMetrics(metrics, count) {
+  const next = Math.max(0, Math.floor(count));
+  const prev = metrics.sizes.length;
+  if (next === prev) return;
+  if (next < prev) {
+    for (let i = next; i < prev; i++) {
+      if (metrics.measured[i]) {
+        metrics.measuredCount--;
+        metrics.measuredTotal -= metrics.sizes[i];
+      }
+    }
+    metrics.sizes.length = next;
+    metrics.measured.length = next;
+  } else {
+    for (let i = prev; i < next; i++) {
+      metrics.sizes.push(metrics.estimate);
+      metrics.measured.push(false);
+    }
   }
-};
-var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
-  value,
-  onValueChange,
-  onChange,
-  onSearch,
-  size = "sm",
-  placeholder = "\uACB0\uACFC \uB0B4 \uAC80\uC0C9",
-  clearable = false,
-  disabled = false,
-  width,
-  focused,
-  hovered,
-  inputClassName,
-  inputStyle,
-  className,
-  style,
-  onKeyDown,
-  ...rest
-}, ref) {
-  const f = FONT[size];
+  markDirty(metrics, Math.min(prev, next));
+}
+function resetRowMetrics(metrics, count) {
+  const fresh = createRowMetrics(count, metrics.estimate);
+  metrics.sizes = fresh.sizes;
+  metrics.measured = fresh.measured;
+  metrics.offsets = fresh.offsets;
+  metrics.measuredCount = 0;
+  metrics.measuredTotal = 0;
+  metrics.dirtyFrom = Infinity;
+}
+function setRowSize(metrics, index, size) {
+  if (index < 0 || index >= metrics.sizes.length) return false;
+  const next = Math.max(1, Math.round(size));
+  const wasMeasured = metrics.measured[index];
+  const prev = metrics.sizes[index];
+  if (wasMeasured && prev === next) return false;
+  if (wasMeasured) {
+    metrics.measuredTotal += next - prev;
+  } else {
+    metrics.measured[index] = true;
+    metrics.measuredCount++;
+    metrics.measuredTotal += next;
+  }
+  metrics.sizes[index] = next;
+  let changedFrom = prev === next ? Infinity : index;
+  const average = Math.max(1, Math.round(metrics.measuredTotal / metrics.measuredCount));
+  if (average !== metrics.estimate) {
+    metrics.estimate = average;
+    for (let i = 0; i < metrics.sizes.length; i++) {
+      if (metrics.measured[i] || metrics.sizes[i] === average) continue;
+      metrics.sizes[i] = average;
+      if (i < changedFrom) changedFrom = i;
+    }
+  }
+  if (changedFrom === Infinity) return false;
+  markDirty(metrics, changedFrom);
+  return true;
+}
+function markDirty(metrics, from) {
+  metrics.dirtyFrom = Math.min(metrics.dirtyFrom, Math.max(0, from));
+}
+function rebuildOffsets(metrics) {
+  const count = metrics.sizes.length;
+  const stale = metrics.offsets.length !== count + 1;
+  if (!stale && metrics.dirtyFrom === Infinity) return;
+  const start = stale ? 0 : Math.min(metrics.dirtyFrom, count);
+  const acc0 = start === 0 ? 0 : metrics.offsets[start] ?? 0;
+  metrics.offsets.length = count + 1;
+  let acc = acc0;
+  for (let i = start; i < count; i++) {
+    metrics.offsets[i] = acc;
+    acc += metrics.sizes[i];
+  }
+  metrics.offsets[count] = acc;
+  metrics.dirtyFrom = Infinity;
+}
+function totalSize(metrics) {
+  rebuildOffsets(metrics);
+  return metrics.offsets[metrics.sizes.length] ?? 0;
+}
+function offsetOf(metrics, index) {
+  rebuildOffsets(metrics);
+  const clamped = Math.max(0, Math.min(Math.floor(index), metrics.sizes.length));
+  return metrics.offsets[clamped] ?? 0;
+}
+function sizeOf(metrics, index) {
+  if (index < 0 || index >= metrics.sizes.length) return metrics.estimate;
+  return metrics.sizes[index];
+}
+function indexAtOffset(metrics, y) {
+  rebuildOffsets(metrics);
+  const count = metrics.sizes.length;
+  if (count === 0) return 0;
+  const target = Math.max(0, y);
+  let lo = 0;
+  let hi = count - 1;
+  while (lo < hi) {
+    const mid = lo + hi + 1 >> 1;
+    if (metrics.offsets[mid] <= target) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo;
+}
+
+// src/lib/floating-height.ts
+var POPOVER_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
+function clampToAvailableHeight(value, availableHeight) {
+  if (value == null || value === "") return availableHeight;
+  const css = typeof value === "number" ? `${value}px` : value;
+  return `min(${css}, ${availableHeight})`;
+}
+var FONT = {
+  sm: {
+    fontSize: 12,
+    lineHeight: 20,
+    paddingX: "var(--cmp-textinput-sm-paddingX)",
+    gap: "var(--cmp-textinput-sm-gap)"
+  },
+  md: {
+    fontSize: 14,
+    lineHeight: 24,
+    paddingX: "var(--cmp-textinput-md-paddingX)",
+    gap: "var(--cmp-textinput-md-gap)"
+  }
+};
+var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
+  value,
+  onValueChange,
+  onChange,
+  onSearch,
+  size = "sm",
+  placeholder = "\uACB0\uACFC \uB0B4 \uAC80\uC0C9",
+  clearable = false,
+  disabled = false,
+  width,
+  focused,
+  hovered,
+  inputClassName,
+  inputStyle,
+  className,
+  style,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const f = FONT[size];
   const hasValue = value !== void 0 && value !== null && String(value) !== "";
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
@@ -13636,126 +13801,6 @@ var OPTION_ROW_HEIGHT = 28;
 var DEFAULT_VIRTUAL_BUFFER = 10;
 var DEFAULT_REACH_END_THRESHOLD = 10;
 var DEFAULT_SEARCH_DEBOUNCE = 300;
-
-// src/components/SSelect/row-metrics.ts
-function createRowMetrics(count, estimate) {
-  const safeCount = Math.max(0, Math.floor(count));
-  const safeEstimate = Math.max(1, estimate);
-  const metrics = {
-    sizes: new Array(safeCount).fill(safeEstimate),
-    measured: new Array(safeCount).fill(false),
-    offsets: [],
-    estimate: safeEstimate,
-    measuredCount: 0,
-    measuredTotal: 0,
-    dirtyFrom: 0
-  };
-  rebuildOffsets(metrics);
-  return metrics;
-}
-function resizeRowMetrics(metrics, count) {
-  const next = Math.max(0, Math.floor(count));
-  const prev = metrics.sizes.length;
-  if (next === prev) return;
-  if (next < prev) {
-    for (let i = next; i < prev; i++) {
-      if (metrics.measured[i]) {
-        metrics.measuredCount--;
-        metrics.measuredTotal -= metrics.sizes[i];
-      }
-    }
-    metrics.sizes.length = next;
-    metrics.measured.length = next;
-  } else {
-    for (let i = prev; i < next; i++) {
-      metrics.sizes.push(metrics.estimate);
-      metrics.measured.push(false);
-    }
-  }
-  markDirty(metrics, Math.min(prev, next));
-}
-function resetRowMetrics(metrics, count) {
-  const fresh = createRowMetrics(count, metrics.estimate);
-  metrics.sizes = fresh.sizes;
-  metrics.measured = fresh.measured;
-  metrics.offsets = fresh.offsets;
-  metrics.measuredCount = 0;
-  metrics.measuredTotal = 0;
-  metrics.dirtyFrom = Infinity;
-}
-function setRowSize(metrics, index, size) {
-  if (index < 0 || index >= metrics.sizes.length) return false;
-  const next = Math.max(1, Math.round(size));
-  const wasMeasured = metrics.measured[index];
-  const prev = metrics.sizes[index];
-  if (wasMeasured && prev === next) return false;
-  if (wasMeasured) {
-    metrics.measuredTotal += next - prev;
-  } else {
-    metrics.measured[index] = true;
-    metrics.measuredCount++;
-    metrics.measuredTotal += next;
-  }
-  metrics.sizes[index] = next;
-  let changedFrom = prev === next ? Infinity : index;
-  const average = Math.max(1, Math.round(metrics.measuredTotal / metrics.measuredCount));
-  if (average !== metrics.estimate) {
-    metrics.estimate = average;
-    for (let i = 0; i < metrics.sizes.length; i++) {
-      if (metrics.measured[i] || metrics.sizes[i] === average) continue;
-      metrics.sizes[i] = average;
-      if (i < changedFrom) changedFrom = i;
-    }
-  }
-  if (changedFrom === Infinity) return false;
-  markDirty(metrics, changedFrom);
-  return true;
-}
-function markDirty(metrics, from) {
-  metrics.dirtyFrom = Math.min(metrics.dirtyFrom, Math.max(0, from));
-}
-function rebuildOffsets(metrics) {
-  const count = metrics.sizes.length;
-  const stale = metrics.offsets.length !== count + 1;
-  if (!stale && metrics.dirtyFrom === Infinity) return;
-  const start = stale ? 0 : Math.min(metrics.dirtyFrom, count);
-  const acc0 = start === 0 ? 0 : metrics.offsets[start] ?? 0;
-  metrics.offsets.length = count + 1;
-  let acc = acc0;
-  for (let i = start; i < count; i++) {
-    metrics.offsets[i] = acc;
-    acc += metrics.sizes[i];
-  }
-  metrics.offsets[count] = acc;
-  metrics.dirtyFrom = Infinity;
-}
-function totalSize(metrics) {
-  rebuildOffsets(metrics);
-  return metrics.offsets[metrics.sizes.length] ?? 0;
-}
-function offsetOf(metrics, index) {
-  rebuildOffsets(metrics);
-  const clamped = Math.max(0, Math.min(Math.floor(index), metrics.sizes.length));
-  return metrics.offsets[clamped] ?? 0;
-}
-function sizeOf(metrics, index) {
-  if (index < 0 || index >= metrics.sizes.length) return metrics.estimate;
-  return metrics.sizes[index];
-}
-function indexAtOffset(metrics, y) {
-  rebuildOffsets(metrics);
-  const count = metrics.sizes.length;
-  if (count === 0) return 0;
-  const target = Math.max(0, y);
-  let lo = 0;
-  let hi = count - 1;
-  while (lo < hi) {
-    const mid = lo + hi + 1 >> 1;
-    if (metrics.offsets[mid] <= target) lo = mid;
-    else hi = mid - 1;
-  }
-  return lo;
-}
 var SEARCH_THRESHOLD = 11;
 var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   value,
@@ -14654,6 +14699,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   rows = [],
   rowKey = "id",
   selectable = false,
+  isRowSelectable,
   selected = [],
   onSelectedChange,
   sort = null,
@@ -14680,6 +14726,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   rowHeight,
   virtualBuffer = 5,
   virtualEndThreshold = 10,
+  onScroll,
   onVirtualUpdate,
   onVirtualReachEnd,
   tableId,
@@ -14763,16 +14810,21 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     (row) => selectedKeys.has(row[rowKey]),
     [selectedKeys, rowKey]
   );
+  const canSelectRow = react.useCallback(
+    (row) => isRowSelectable ? isRowSelectable(row) : true,
+    [isRowSelectable]
+  );
   const getIsAllChecked = react.useCallback(
     (rws) => {
-      const total = rws.length;
+      const targets = rws.filter(canSelectRow);
+      const total = targets.length;
       if (total === 0) return false;
-      const cnt = rws.filter((r) => selectedKeys.has(r[rowKey])).length;
+      const cnt = targets.filter((r) => selectedKeys.has(r[rowKey])).length;
       if (cnt === 0) return false;
       if (cnt === total) return true;
       return null;
     },
-    [selectedKeys, rowKey]
+    [selectedKeys, rowKey, canSelectRow]
   );
   const [currentPage, setCurrentPage] = react.useState(pagination?.page ?? 1);
   const [innerRowsPerPage, setInnerRowsPerPage] = react.useState(pagination?.rowsPerPage ?? 10);
@@ -14787,8 +14839,23 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   const [headerGutter, setHeaderGutter] = react.useState(0);
   const [vsRange, setVsRange] = react.useState({ start: 0, end: 0 });
   const lastReachEndRef = react.useRef(-1);
-  const cbRef = react.useRef({ onVirtualUpdate, onVirtualReachEnd });
-  cbRef.current = { onVirtualUpdate, onVirtualReachEnd };
+  const cbRef = react.useRef({ onVirtualUpdate, onVirtualReachEnd, onScroll });
+  cbRef.current = { onVirtualUpdate, onVirtualReachEnd, onScroll };
+  const metricsRef = react.useRef(null);
+  metricsRef.current ?? (metricsRef.current = createRowMetrics(0, effectiveRowHeight));
+  const metrics = metricsRef.current;
+  const measuredKeyRef = react.useRef("");
+  const pendingRowRef = react.useRef(null);
+  const pinnedTopRef = react.useRef(-1);
+  const lastEstimateRef = react.useRef(effectiveRowHeight);
+  if (lastEstimateRef.current !== effectiveRowHeight) {
+    lastEstimateRef.current = effectiveRowHeight;
+    metrics.estimate = Math.max(1, effectiveRowHeight);
+    resetRowMetrics(metrics, rowCount);
+    measuredKeyRef.current = "";
+  } else {
+    resizeRowMetrics(metrics, rowCount);
+  }
   const [scrolledLeft, setScrolledLeft] = react.useState(false);
   const [scrolledRight, setScrolledRight] = react.useState(false);
   const setRowCount = react.useCallback((count) => {
@@ -14798,13 +14865,16 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   }, []);
   const calcRange = react.useCallback(
     (scrollTop, containerHeight) => {
-      const h = Math.max(1, effectiveRowHeight);
+      const m = metricsRef.current;
+      if (m == null) return { start: 0, end: 0 };
       const buf = Math.max(0, Math.floor(virtualBuffer));
-      const first = Math.floor(Math.max(0, scrollTop) / h);
-      const vis = Math.ceil(Math.max(0, containerHeight) / h);
-      return { start: Math.max(0, first - buf), end: Math.min(rowCount, first + vis + buf) };
+      const viewTop = Math.max(0, scrollTop);
+      const viewBottom = viewTop + Math.max(0, containerHeight);
+      const start = Math.max(0, indexAtOffset(m, viewTop) - buf);
+      const end = Math.min(rowCount, indexAtOffset(m, viewBottom) + 1 + buf);
+      return { start, end };
     },
-    [effectiveRowHeight, virtualBuffer, rowCount]
+    [virtualBuffer, rowCount]
   );
   const handleScroll = react.useCallback(() => {
     const el = scrollRef.current;
@@ -14822,9 +14892,59 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       setVsRange((prev) => prev.start === start && prev.end === end ? prev : { start, end });
     }
   }, [virtualScroll, calcRange]);
+  const handleScrollEvent = react.useCallback(
+    (event) => {
+      pendingRowRef.current = null;
+      pinnedTopRef.current = -1;
+      handleScroll();
+      cbRef.current.onScroll?.(event);
+    },
+    [handleScroll]
+  );
   react.useEffect(() => {
     handleScroll();
   }, [handleScroll, rowCount, columnWidths, loading2, height]);
+  const handleScrollRef = react.useRef(handleScroll);
+  handleScrollRef.current = handleScroll;
+  useIsomorphicLayoutEffect(() => {
+    if (!virtualScroll) return;
+    const el = scrollRef.current;
+    const m = metricsRef.current;
+    if (!el || m == null) return;
+    const pending2 = pendingRowRef.current;
+    const key = `${vsRange.start}:${vsRange.end}:${rowCount}`;
+    const alreadyMeasured = measuredKeyRef.current === key;
+    if (alreadyMeasured && pending2 == null) return;
+    measuredKeyRef.current = key;
+    const anchor = vsRange.start;
+    const anchorBefore = offsetOf(m, anchor);
+    let changed = false;
+    if (!alreadyMeasured) {
+      for (const tr of el.querySelectorAll("tr[data-row-index]")) {
+        const index = Number(tr.dataset.rowIndex);
+        if (!Number.isInteger(index)) continue;
+        const h = tr.offsetHeight;
+        if (h <= 0) continue;
+        if (setRowSize(m, index, h)) changed = true;
+      }
+    }
+    if (pending2 != null) {
+      const top = offsetOf(m, pending2);
+      if (pinnedTopRef.current === top) {
+        pendingRowRef.current = null;
+        pinnedTopRef.current = -1;
+        return;
+      }
+      pinnedTopRef.current = top;
+      el.scrollTop = top;
+      handleScrollRef.current();
+      return;
+    }
+    if (!changed) return;
+    const delta = offsetOf(m, anchor) - anchorBefore;
+    if (delta !== 0 && el.scrollTop > 0) el.scrollTop += delta;
+    handleScrollRef.current();
+  });
   react.useEffect(() => {
     if (!virtualScroll) return;
     cbRef.current.onVirtualUpdate?.({ from: vsRange.start, to: vsRange.end });
@@ -14873,15 +14993,42 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
         };
       },
       getStickyStyle,
+      getScrollElement: () => scrollRef.current,
+      getFirstVisibleRow: () => {
+        const el = scrollRef.current;
+        const m = metricsRef.current;
+        if (!el) return 0;
+        if (virtualScroll && m != null) return indexAtOffset(m, el.scrollTop);
+        const top = el.scrollTop;
+        for (const tr of el.querySelectorAll("tr[data-row-index]")) {
+          if (tr.offsetTop + tr.offsetHeight > top) return Number(tr.dataset.rowIndex) || 0;
+        }
+        return 0;
+      },
+      scrollToRow: (index) => {
+        const el = scrollRef.current;
+        const m = metricsRef.current;
+        if (!el) return;
+        const target = Math.min(Math.max(0, Math.floor(index)), Math.max(0, rowCount - 1));
+        if (virtualScroll && m != null) {
+          pendingRowRef.current = target;
+          pinnedTopRef.current = -1;
+          el.scrollTop = offsetOf(m, target);
+          return;
+        }
+        const tr = el.querySelector(`tr[data-row-index="${target}"]`);
+        if (tr) el.scrollTop = tr.offsetTop;
+      },
       setRowCount,
       updateRowSelect: (row) => {
+        if (!canSelectRow(row)) return;
         if (selectedKeys.has(row[rowKey]))
           onSelectedChange?.(selected.filter((r) => r[rowKey] !== row[rowKey]));
         else onSelectedChange?.([...selected, row]);
       },
       toggleSelectAll: (checked, rws) => {
         if (checked) {
-          const add = rws.filter((r) => !selectedKeys.has(r[rowKey]));
+          const add = rws.filter((r) => canSelectRow(r) && !selectedKeys.has(r[rowKey]));
           onSelectedChange?.([...selected, ...add]);
         } else {
           const keys = new Set(rws.map((r) => r[rowKey]));
@@ -14892,8 +15039,11 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     [
       isRowSelected,
       getIsAllChecked,
+      canSelectRow,
       getStickyStyle,
       setRowCount,
+      virtualScroll,
+      rowCount,
       internalPagination,
       pagination,
       currentPage,
@@ -14944,12 +15094,13 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   if (virtualScroll) {
     bodyRows = rows.slice(vsRange.start, vsRange.end);
     rowOffset = vsRange.start;
-    topSpacer = vsRange.start * effectiveRowHeight;
-    bottomSpacer = Math.max(0, (rowCount - vsRange.end) * effectiveRowHeight);
+    topSpacer = offsetOf(metrics, vsRange.start);
+    bottomSpacer = Math.max(0, totalSize(metrics) - offsetOf(metrics, vsRange.end));
   } else if (pageInfo) {
     bodyRows = rows.slice(pageInfo.startIndex, pageInfo.endIndex);
     rowOffset = pageInfo.startIndex;
   }
+  const hasSelectableRow = bodyRows.some(canSelectRow);
   const isNoData = rowCount === 0 && !loading2;
   const showNoDataSlot = isNoData && emptySlot != null;
   const showPagination = !virtualScroll && (pagination != null || internalPagination);
@@ -14977,17 +15128,18 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       const pageKeys = new Set(bodyRows.map((r) => r[rowKey]));
       onSelectedChange?.(selected.filter((r) => !pageKeys.has(r[rowKey])));
     } else {
-      const add = bodyRows.filter((r) => !selectedKeys.has(r[rowKey]));
+      const add = bodyRows.filter((r) => canSelectRow(r) && !selectedKeys.has(r[rowKey]));
       onSelectedChange?.([...selected, ...add]);
     }
   };
   const toggleRow = (row, index) => {
+    if (!canSelectRow(row)) return;
     const anchor = rangeAnchorRef.current;
     const anchorAlive = anchor != null && anchor.index !== index && rows[anchor.index]?.[rowKey] === anchor.key;
     if (shiftPressedRef.current && anchor != null && anchorAlive) {
       const [from, to] = anchor.index < index ? [anchor.index, index] : [index, anchor.index];
       const shouldSelect = selectedKeys.has(anchor.key);
-      const range = rows.slice(from, to + 1);
+      const range = rows.slice(from, to + 1).filter(canSelectRow);
       if (shouldSelect) {
         const add = range.filter((r) => !selectedKeys.has(r[rowKey]));
         onSelectedChange?.([...selected, ...add]);
@@ -15141,7 +15293,14 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                   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, onValueChange: toggleAll }) })
+                                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(
@@ -15183,7 +15342,14 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                   maxWidth: SELECTABLE_COLUMN_WIDTH
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) }),
+                                  /* @__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",
                                     {
@@ -15310,7 +15476,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                   "div",
                   {
                     ref: scrollRef,
-                    onScroll: handleScroll,
+                    onScroll: handleScrollEvent,
                     className: cn(
                       bodyScrollClass,
                       // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
@@ -15331,6 +15497,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                               return /* @__PURE__ */ jsxRuntime.jsxs(
                                 "tr",
                                 {
+                                  "data-row-index": rowOffset + ri,
                                   onClick: () => onRowClick?.(row),
                                   className: cn(
                                     "group/table-row",
@@ -15363,6 +15530,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                           SCheckbox,
                                           {
                                             value: isSel,
+                                            disabled: !canSelectRow(row),
                                             onValueChange: () => toggleRow(row, rowOffset + ri)
                                           }
                                         ) })
@@ -15480,15 +15648,20 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
 var COUNT_NULL = "var(--cmp-table-bar-count-null)";
 var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
 var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
-var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, selected, actions, rightActions, className, ...rest }, ref) {
+var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ title, total, selected, actions, rightActions, className, ...rest }, ref) {
   const hasTotal = total != null;
   const hasSelected = selected != null;
   const hasCount = hasTotal || hasSelected;
+  const hasTitle = title != null;
+  const hasLeading = hasTitle || hasCount;
+  const titleId = react.useId();
+  const isToolbar = Boolean(actions || rightActions);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
-      role: actions || rightActions ? "toolbar" : void 0,
+      role: isToolbar ? "toolbar" : void 0,
+      "aria-labelledby": isToolbar && hasTitle ? titleId : void 0,
       className: cn(
         "flex w-full items-center gap-[var(--cmp-table-bar-section-gap)] px-[var(--sys-space-table-padding-md)]",
         "h-[var(--cmp-table-bar-height)] shrink-0",
@@ -15497,6 +15670,14 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
       ),
       ...rest,
       children: [
+        hasTitle && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            id: titleId,
+            className: "typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]",
+            children: title
+          }
+        ),
         hasCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: [
           hasTotal && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
             "\uCD1D ",
@@ -15517,7 +15698,7 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
           ] })
         ] }),
         actions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-bar-section-gap)] has-[>div:empty]:hidden", children: [
-          hasCount && /* @__PURE__ */ jsxRuntime.jsx(
+          hasLeading && /* @__PURE__ */ jsxRuntime.jsx(
             SDivider,
             {
               vertical: true,
@@ -18168,10 +18349,10 @@ function ChartLegend({ items, align = "center", activeIndex, className }) {
         "li",
         {
           className: cn(
-            "flex items-center gap-(--cmp-chart-legend-legendItem-gap)",
-            "py-(--cmp-chart-legend-legendItem-paddingY)",
-            "typo-body-sm-medium text-(--cmp-chart-legend-legendItem-color)",
-            "transition-opacity",
+            "flex items-center gap-(--cmp-chart-legendItem-gap)",
+            "py-(--cmp-chart-legendItem-paddingY)",
+            "typo-body-sm-medium text-(--cmp-chart-legendItem-color)",
+            "transition-opacity duration-200 ease-out motion-reduce:transition-none",
             activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
           ),
           children: [
@@ -18254,17 +18435,41 @@ function useElementSize() {
   }, []);
   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 CURSOR_OFFSET = 12;
-function place(cursor, size, extent) {
-  if (!extent || !size) return cursor + CURSOR_OFFSET;
-  const after = cursor + CURSOR_OFFSET;
+var ANCHOR_GAP_X = 4;
+var ANCHOR_GAP_Y = 0;
+function placeX(anchor, size, extent) {
+  const after = anchor.right + ANCHOR_GAP_X;
+  if (!extent) return after;
   if (after + size <= extent) return after;
-  const before = cursor - CURSOR_OFFSET - size;
+  const before = anchor.left - ANCHOR_GAP_X - size;
   if (before >= 0) return before;
   return Math.max(0, Math.min(after, extent - size));
 }
-function ChartTooltip({ title, items, x, y, bounds, className }) {
+function placeY(anchor, size, extent) {
+  const top = anchor.top + ANCHOR_GAP_Y;
+  if (!extent) return top;
+  return Math.max(0, Math.min(top, extent - size));
+}
+function ChartTooltip({ title, items, anchor, bounds, className }) {
   const { ref, size } = useElementSize();
   const measured = size.width > 0 && size.height > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -18273,7 +18478,7 @@ function ChartTooltip({ title, items, x, y, bounds, className }) {
       ref,
       role: "tooltip",
       className: cn(
-        // left/top 대신 transform 으로 옮긴다. 좌표를 바꾸면 마우스가 움직일 때마다
+        // left/top 대신 transform 으로 옮긴다. 좌표를 바꾸면 짚은 항목이 바뀔 때마다
         // 리플로우가 나 차트가 미세하게 흔들려 보인다. transform 은 레이아웃을
         // 건드리지 않으므로, 크기를 재기 전에 잠깐 밖으로 나가도 스크롤이 생기지 않는다.
         "pointer-events-none absolute top-0 left-0 z-10 w-max",
@@ -18283,11 +18488,11 @@ function ChartTooltip({ title, items, x, y, bounds, className }) {
         className
       ),
       style: {
-        // 크기를 재기 전에는 원점에 숨겨 둔다. 커서 옆에 그려 두면 그림 밖으로
+        // 크기를 재기 전에는 원점에 숨겨 둔다. 막대 옆에 그려 두면 그림 밖으로
         // 넘쳐 스크롤 영역이 잠깐 늘어나고, 차트 전체가 한 번 흔들린다.
         // transform 도 스크롤 영역 계산에는 포함되므로 위치만 바꿔서는 못 막는다.
-        transform: measured ? `translate(${place(x, size.width, bounds?.width ?? 0)}px, ${place(
-          y,
+        transform: measured ? `translate(${placeX(anchor, size.width, bounds?.width ?? 0)}px, ${placeY(
+          anchor,
           size.height,
           bounds?.height ?? 0
         )}px)` : void 0,
@@ -18295,18 +18500,21 @@ function ChartTooltip({ title, items, x, y, bounds, className }) {
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold text-(--cmp-chart-chartTooltip-title-color)", children: title }),
-        items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-sd-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              className: "shrink-0 rounded-full",
-              style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default text-(--sys-color-fg-primary)", children: item4.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold ml-auto text-(--sys-color-fg-primary)", children: item4.value })
-        ] }, `${item4.label}-${index}`))
+        items.map((item4, index) => (
+          // TODO: 토큰 생성되면 gap 을 `--cmp-chart-chartTooltipItem-gap` 으로 교체
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-sd-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "shrink-0 rounded-full",
+                style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default text-(--sys-color-fg-primary)", children: item4.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold ml-auto text-(--sys-color-fg-primary)", children: item4.value })
+          ] }, `${item4.label}-${index}`)
+        ))
       ]
     }
   );
@@ -18318,11 +18526,16 @@ var BAR_SIZE_MAX = 80;
 var BAR_GAP = 6;
 var GROUP_PADDING_MIN = 8;
 var GROUP_PADDING_MAX = 24;
+var AXIS_EDGE_PADDING = 24;
 var VALUE_LABEL_GAP = 6;
 var BAR_RADIUS = 8;
-var BAR_OPACITY_DEFAULT = "var(--opacity-080)";
-var BAR_OPACITY_DIMMED = "var(--opacity-060)";
-var BAR_VALUE_COLOR = "var(--sys-color-field-text-readOnly)";
+var BAR_OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
+var BAR_OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
+var BAR_OPACITY_HOVER = 1;
+var BAR_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
+var BAR_DATA_LABEL_TYPO = "typo-body-sm-medium";
+var BAR_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
+var BAR_HOVER_TRANSITION = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
 function bandLayout(size, categoryCount, seriesCount, barSizeMax = BAR_SIZE_MAX) {
   const categories = Math.max(1, categoryCount);
   const series = Math.max(1, seriesCount);
@@ -18333,7 +18546,8 @@ function bandLayout(size, categoryCount, seriesCount, barSizeMax = BAR_SIZE_MAX)
   const tMax = (maxBar - BAR_SIZE_MIN) / barRange;
   const bandMin = BAR_SIZE_MIN * series + gaps + GROUP_PADDING_MIN * 2;
   const span = barRange * series + padRange * 2;
-  const band = Math.min(size / categories, bandMin + span * tMax);
+  const inner = Math.max(0, size - AXIS_EDGE_PADDING * 2);
+  const band = Math.min(inner / categories, bandMin + span * tMax);
   const t = Math.min(Math.max((band - bandMin) / span, 0), tMax);
   const bar = BAR_SIZE_MIN + barRange * t;
   const padding = GROUP_PADDING_MIN + padRange * t;
@@ -18343,7 +18557,7 @@ function bandLayout(size, categoryCount, seriesCount, barSizeMax = BAR_SIZE_MAX)
     bar,
     group,
     padding,
-    offset: Math.max(0, (size - band * categories) / 2)
+    offset: AXIS_EDGE_PADDING + Math.max(0, (inner - band * categories) / 2)
   };
 }
 var defaultFormat = (value) => value.toLocaleString();
@@ -18351,6 +18565,10 @@ function minBand(seriesCount) {
   const series = Math.max(1, seriesCount);
   return series * BAR_SIZE_MIN + (series - 1) * BAR_GAP + GROUP_PADDING_MIN * 2;
 }
+function barOpacity(hoveredCategory, categoryIndex) {
+  if (hoveredCategory == null) return BAR_OPACITY_DEFAULT;
+  return hoveredCategory === categoryIndex ? BAR_OPACITY_HOVER : BAR_OPACITY_DIMMED;
+}
 function barPath(x, y, width, height, direction, negative) {
   const r = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
   if (r === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
@@ -18396,8 +18614,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   const { ref: axisTextRef, size: axisText } = useElementSize();
   const { ref: axisSampleRef, size: axisSample } = useElementSize();
   const clipId = react.useId();
-  const [hovered, setHovered] = react.useState(null);
-  const hoveredCategory = hovered?.category ?? null;
+  const [hoveredCategory, setHoveredCategory] = react.useState(null);
   const perCategory = series.length === 1;
   const colorAt = react.useCallback(
     (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
@@ -18431,30 +18648,92 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     [axisLength, categories.length, barSlots, barSize]
   );
   const zeroRatio = ratioOf(0, scale);
-  const minPlotWidth = vertical ? categories.length * minBand(barSlots) : 0;
+  const minPlotWidth = vertical ? categories.length * minBand(barSlots) + AXIS_EDGE_PADDING * 2 : 0;
   const totalHeight = height ?? (vertical ? 320 : void 0);
-  const plotHeight = totalHeight == null ? Math.max(1, categories.length) * minBand(barSlots) : typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
+  const plotHeight = totalHeight == null ? Math.max(1, categories.length) * minBand(barSlots) + AXIS_EDGE_PADDING * 2 : typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
   const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i, 0) })) }) : null;
   const handleMove = (event) => {
     if (!showTooltip || categories.length === 0 || series.length === 0) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    const along = (vertical ? x : y) - layout.offset;
+    const along = (vertical ? event.clientX - rect.left : event.clientY - rect.top) - layout.offset;
     const category = Math.floor(along / layout.band);
-    if (category < 0 || category >= categories.length) {
-      setHovered(null);
-      return;
-    }
-    setHovered({ category, x, y });
+    setHoveredCategory(category >= 0 && category < categories.length ? category : null);
   };
-  const tooltipItems = hovered == null ? [] : series.flatMap((s, i) => {
-    const value = s.data[hovered.category];
+  const tooltipItems = hoveredCategory == null ? [] : series.flatMap((s, i) => {
+    const value = s.data[hoveredCategory];
     if (value == null || !Number.isFinite(value)) return [];
-    return [
-      { color: colorAt(i, hovered.category), label: s.name, value: formatValue(value) }
-    ];
+    return [{ color: colorAt(i, hoveredCategory), label: s.name, value: formatValue(value) }];
   });
+  const anchorBar = react.useMemo(() => {
+    if (hoveredCategory == null || size.width <= 0 || size.height <= 0) return null;
+    const pxOf = (value) => vertical ? size.height - ratioOf(value, scale) * size.height : ratioOf(value, scale) * size.width;
+    const anchorOf = (value, from, to, start, thickness) => vertical ? {
+      value,
+      left: start,
+      right: start + thickness,
+      top: Math.min(pxOf(from), pxOf(to))
+    } : {
+      value,
+      left: Math.min(pxOf(from), pxOf(to)),
+      right: Math.max(pxOf(from), pxOf(to)),
+      top: start
+    };
+    if (stacked) {
+      const total = stackTotals[hoveredCategory];
+      if (total == null) return null;
+      const barStart = layout.offset + hoveredCategory * layout.band + (layout.band - layout.bar) / 2;
+      return anchorOf(
+        total.positive + total.negative,
+        total.negative,
+        total.positive,
+        barStart,
+        layout.bar
+      );
+    }
+    let bestIndex = -1;
+    let bestValue = 0;
+    series.forEach((s, seriesIndex) => {
+      const value = s.data[hoveredCategory];
+      if (value == null || !Number.isFinite(value)) return;
+      if (bestIndex === -1 || value > bestValue) {
+        bestIndex = seriesIndex;
+        bestValue = value;
+      }
+    });
+    if (bestIndex === -1) return null;
+    const groupStart = layout.offset + hoveredCategory * layout.band + (layout.band - layout.group) / 2;
+    return anchorOf(
+      bestValue,
+      0,
+      bestValue,
+      groupStart + bestIndex * (layout.bar + BAR_GAP),
+      layout.bar
+    );
+  }, [
+    hoveredCategory,
+    size.width,
+    size.height,
+    vertical,
+    scale,
+    stacked,
+    stackTotals,
+    layout,
+    series
+  ]);
+  const { ref: valueLabelRef, metrics: valueLabel } = useSvgTextMetrics();
+  const anchorLabel = anchorBar == null ? "" : formatValue(anchorBar.value);
+  const tooltipAnchor = react.useMemo(() => {
+    if (anchorBar == null) return null;
+    if (!showValueLabel || anchorBar.value < 0) return anchorBar;
+    return vertical ? (
+      // 라벨의 기준선은 막대 윗변에서 VALUE_LABEL_GAP 만큼 위. 거기서 글자
+      // 윗변까지가 metrics.top(음수)이다.
+      { ...anchorBar, top: anchorBar.top - VALUE_LABEL_GAP + valueLabel.top }
+    ) : (
+      // 가로 막대의 라벨은 막대 오른쪽 끝에서 시작해 폭만큼 뻗는다.
+      { ...anchorBar, right: anchorBar.right + VALUE_LABEL_GAP + valueLabel.width }
+    );
+  }, [anchorBar, showValueLabel, vertical, valueLabel.top, valueLabel.width]);
   const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -18495,6 +18774,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
         const value = s.data[categoryIndex];
         if (value == null || !Number.isFinite(value)) return null;
         const dimmed = hoveredCategory != null && hoveredCategory !== categoryIndex;
+        const opacity = barOpacity(hoveredCategory, categoryIndex);
         const groupStart = layout.offset + categoryIndex * layout.band + (layout.band - layout.group) / 2;
         const offset = groupStart + seriesIndex * (layout.bar + BAR_GAP);
         const valueRatio = ratioOf(value, scale);
@@ -18529,9 +18809,10 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
             "path",
             {
               d: barPath(x, y, width, barHeight, direction, negative),
+              className: BAR_HOVER_TRANSITION,
               style: {
                 fill: colorAt(seriesIndex, categoryIndex),
-                opacity: dimmed ? BAR_OPACITY_DIMMED : BAR_OPACITY_DEFAULT,
+                opacity,
                 cursor: onBarClick ? "pointer" : void 0
               },
               onClick: onBarClick ? () => onBarClick({ seriesIndex, categoryIndex, value }) : void 0,
@@ -18543,8 +18824,14 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
             {
               x: labelX,
               y: labelY,
-              className: "typo-body-sm-medium",
-              style: { fill: BAR_VALUE_COLOR },
+              className: cn(
+                hoveredCategory === categoryIndex ? BAR_DATA_LABEL_TYPO_HOVER : BAR_DATA_LABEL_TYPO,
+                BAR_HOVER_TRANSITION
+              ),
+              style: {
+                fill: BAR_DATA_LABEL_COLOR,
+                opacity: dimmed ? BAR_OPACITY_DIMMED : void 0
+              },
               textAnchor: vertical ? "middle" : negative ? "end" : "start",
               dominantBaseline: vertical ? "auto" : "central",
               children: formatValue(value)
@@ -18576,6 +18863,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     const pxOf = (value) => vertical ? size.height - ratioOf(value, scale) * size.height : ratioOf(value, scale) * size.width;
     return categories.map((_, categoryIndex) => {
       const dimmed = hoveredCategory != null && hoveredCategory !== categoryIndex;
+      const opacity = barOpacity(hoveredCategory, categoryIndex);
       const barStart = layout.offset + categoryIndex * layout.band + (layout.band - layout.bar) / 2;
       let positive = 0;
       let negative = 0;
@@ -18619,10 +18907,12 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
               width: box3.width,
               height: box3.height,
               clipPath: `url(#${segment.value < 0 ? negativeClip : positiveClip})`,
+              className: BAR_HOVER_TRANSITION,
               style: {
+                // 조각과 라벨에 따로 건다 — 묶음(<g>)에 걸면 호버가 없을 때의
+                // 기본 흐림까지 합계 라벨에 묻어 숫자가 늘 옅어진다.
                 fill: colorAt(segment.seriesIndex, categoryIndex),
-                // 흐림은 조각에만 건다 — 묶음에 걸면 합계 라벨까지 같이 흐려진다.
-                opacity: dimmed ? BAR_OPACITY_DIMMED : BAR_OPACITY_DEFAULT,
+                opacity,
                 cursor: onBarClick ? "pointer" : void 0
               },
               onClick: onBarClick ? () => onBarClick({
@@ -18640,8 +18930,14 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
           {
             x: labelX,
             y: labelY,
-            className: "typo-body-sm-medium",
-            style: { fill: BAR_VALUE_COLOR },
+            className: cn(
+              hoveredCategory === categoryIndex ? BAR_DATA_LABEL_TYPO_HOVER : BAR_DATA_LABEL_TYPO,
+              BAR_HOVER_TRANSITION
+            ),
+            style: {
+              fill: BAR_DATA_LABEL_COLOR,
+              opacity: dimmed ? BAR_OPACITY_DIMMED : void 0
+            },
             textAnchor: vertical ? "middle" : total >= 0 ? "start" : "end",
             dominantBaseline: vertical ? "auto" : "central",
             children: formatValue(total)
@@ -18691,7 +18987,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
             ref: plotRef,
             className: "relative h-full w-full",
             onMouseMove: handleMove,
-            onMouseLeave: () => setHovered(null),
+            onMouseLeave: () => setHoveredCategory(null),
             children: [
               size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
@@ -18701,6 +18997,19 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                   role: "img",
                   "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uB9C9\uB300 \uADF8\uB798\uD504`,
                   children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "text",
+                      {
+                        ref: valueLabelRef,
+                        "aria-hidden": true,
+                        x: 0,
+                        y: 0,
+                        className: BAR_DATA_LABEL_TYPO_HOVER,
+                        dominantBaseline: "auto",
+                        style: { visibility: "hidden" },
+                        children: anchorLabel || "0"
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       ChartGrid,
                       {
@@ -18710,12 +19019,12 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                         height: size.height
                       }
                     ),
-                    hovered != null && /* @__PURE__ */ jsxRuntime.jsx(
+                    hoveredCategory != null && /* @__PURE__ */ jsxRuntime.jsx(
                       "rect",
                       {
                         "aria-hidden": true,
-                        x: vertical ? layout.offset + hovered.category * layout.band : 0,
-                        y: vertical ? 0 : layout.offset + hovered.category * layout.band,
+                        x: vertical ? layout.offset + hoveredCategory * layout.band : 0,
+                        y: vertical ? 0 : layout.offset + hoveredCategory * layout.band,
                         width: vertical ? layout.band : size.width,
                         height: vertical ? size.height : layout.band,
                         style: {
@@ -18728,13 +19037,12 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                   ]
                 }
               ),
-              showTooltip && hovered != null && series.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 ChartTooltip,
                 {
-                  title: categories[hovered.category] ?? "",
+                  title: categories[hoveredCategory] ?? "",
                   items: tooltipItems,
-                  x: hovered.x,
-                  y: hovered.y,
+                  anchor: tooltipAnchor,
                   bounds: size
                 }
               )