sellmate-design-system-react 9.0.0-beta.45 → 9.0.0-beta.46

package/dist/index.cjs

@@ -5,9 +5,9 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var RPopover12 = require('@radix-ui/react-popover');
 var reactDom = require('react-dom');
 var RCheckbox = require('@radix-ui/react-checkbox');
-var RPopover12 = require('@radix-ui/react-popover');
 var client = require('react-dom/client');
 var RTooltip = require('@radix-ui/react-tooltip');
 var RDropdown2 = require('@radix-ui/react-dropdown-menu');
@@ -33,8 +33,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
 var RPopover12__namespace = /*#__PURE__*/_interopNamespace(RPopover12);
+var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown2__namespace = /*#__PURE__*/_interopNamespace(RDropdown2);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
@@ -2757,6 +2757,38 @@ var Icon_star = (p) => {
     }
   );
 };
+var Icon_stop = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M15.5 7.5C16.0523 7.5 16.5 7.94772 16.5 8.5V15.5C16.5 16.0523 16.0523 16.5 15.5 16.5H8.5C7.94772 16.5 7.5 16.0523 7.5 15.5V8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H15.5Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M12 1.0498C18.0474 1.04991 22.9501 5.95263 22.9502 12C22.9501 18.0474 18.0474 22.9501 12 22.9502C5.95266 22.9501 1.04991 18.0473 1.0498 12C1.0499 5.95265 5.95266 1.04994 12 1.0498ZM12 2.5498C6.78108 2.54994 2.5499 6.78108 2.5498 12C2.54991 17.2189 6.78109 21.4501 12 21.4502C17.2189 21.4501 21.4501 17.2189 21.4502 12C21.4501 6.78106 17.2189 2.54991 12 2.5498Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_store = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3256,6 +3288,7 @@ var ICONS = {
   shield: Icon_shield,
   sidebar: Icon_sidebar,
   star: Icon_star,
+  stop: Icon_stop,
   store: Icon_store,
   synchronize: Icon_synchronize,
   thumbsDown: Icon_thumbsDown,
@@ -3766,409 +3799,1474 @@ function withDisplayName(component, name) {
   return component;
 }
 
-// src/lib/z-index.ts
-var Z_INDEX = {
-  baseFloating: 50,
-  modalHost: 1e3,
-  toast: 1100,
-  loading: 1200,
-  drag: 1300
+// src/lib/floating-anim.ts
+var FLOATING_SLIDE_ANIM = [
+  "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
+  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
+  "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
+  "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
+].join(" ");
+var PortalContainerContext = /* @__PURE__ */ react.createContext(null);
+var InsideModalContext = /* @__PURE__ */ react.createContext(false);
+var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
+function usePortalContainer() {
+  return react.useContext(PortalContainerContext) ?? void 0;
+}
+function useInsideModal() {
+  return react.useContext(InsideModalContext);
+}
+
+// src/components/STag/tag.config.ts
+var TAG_SHAPES = ["square", "pill"];
+var TAG_SIZES = ["xs", "sm", "md"];
+var TAG_COLORS = [
+  "grey",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "darkblue",
+  "indigo"
+];
+var TAG_SIZE_CONFIG = {
+  xs: {
+    height: 20,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 12,
+    fontSize: 11,
+    fontWeight: 500,
+    lineHeight: 18
+  },
+  sm: {
+    height: 24,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 16,
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 20
+  },
+  md: {
+    height: 28,
+    paddingX: 12,
+    gap: 6,
+    radius: 8,
+    iconSize: 16,
+    fontSize: 14,
+    fontWeight: 700,
+    lineHeight: 24
+  }
 };
-var setRefs = (refs, value) => {
-  refs.forEach((ref) => {
-    if (typeof ref === "function") {
-      ref(value);
-      return;
-    }
-    if (ref) {
-      ref.current = value;
+var STag = /* @__PURE__ */ react.forwardRef(function STag2({
+  shape = "square",
+  size = "sm",
+  color = "grey",
+  deep = false,
+  label = "",
+  icon,
+  iconLeft = true,
+  width,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const s = TAG_SIZE_CONFIG[size];
+  const contentColor = deep ? `var(--cmp-tag-${color}-deep-content, var(--cmp-tag-deep-content))` : `var(--cmp-tag-${color}-content)`;
+  const bgColor = deep ? `var(--cmp-tag-${color}-deep-bg)` : `var(--cmp-tag-${color}-bg)`;
+  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      "aria-label": label || "tag",
+      className: cn(
+        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
+        className
+      ),
+      style: {
+        minHeight: s.height,
+        padding: `0 ${s.paddingX}px`,
+        gap: s.gap,
+        borderRadius: shape === "pill" ? 999 : s.radius,
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight,
+        lineHeight: `${s.lineHeight}px`,
+        background: bgColor,
+        color: contentColor,
+        ...resolvedWidth != null ? { width: resolvedWidth } : {},
+        ...style
+      },
+      ...rest,
+      children: [
+        icon && iconLeft && iconNode,
+        label && // leading-none: 태그는 min-height 로 높이가 정해지고 flex 가 세로 중앙 정렬하므로
+        // 레이블에 line-height 가 필요 없다. 오히려 line-height 를 주면 브라우저가
+        // 폰트 ascent/descent 를 정수 px 로 반올림한 뒤 남는 half-leading 을 내림 처리해
+        // 베이스라인이 최대 1px 위로 밀린다(xs 에서 특히 눈에 띈다).
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center justify-center leading-none", children: label }),
+        icon && !iconLeft && iconNode
+      ]
     }
-  });
+  );
+});
+var SIZE = {
+  xxs: { icon: 12, radius: "sm" },
+  xs: { icon: 16, radius: "sm" },
+  sm: { icon: 20, radius: "sm" },
+  md: { icon: 24, radius: "md" },
+  lg: { icon: 32, radius: "md" }
 };
-function renderSlot(slot, state2) {
-  return typeof slot === "function" ? slot(state2) : slot;
-}
-var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
-  function SDraggableItemView2({
-    title,
-    supportingText,
-    supportingTextPosition,
-    trailing,
-    depth,
-    accentStripe,
-    bordered,
-    selected,
-    dense,
-    size,
-    dragging,
-    disabled,
-    hovered,
-    dragHandleProps,
-    onDragHandleMouseDown,
-    className,
-    style,
-    ...rest
-  }, ref) {
-    const renderState = { hovered, dragging, disabled };
-    const titleNode = renderSlot(title, renderState);
-    const supportingTextNode = renderSlot(supportingText, renderState);
-    const hasSupportingText = supportingTextNode != null && supportingTextNode !== "";
-    const trailingNode = renderSlot(trailing, renderState);
-    const titleTypo = size === "sm" ? selected ? "typo-item-sm-selected" : "typo-item-sm-default" : selected ? "typo-item-md-selected" : "typo-item-md-default";
-    const paddingYClass = dense ? size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-dense)" : "py-(--cmp-listDraggableItem-paddingY-md-dense)" : size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-normal)" : "py-(--cmp-listDraggableItem-paddingY-md-normal)";
-    const normalizedDepth = Math.max(1, Math.floor(depth));
-    const depthOffset = (normalizedDepth - 1) * 20;
-    const depthStyle = depthOffset === 0 ? style : bordered ? {
-      ...style,
-      marginLeft: depthOffset,
-      width: `calc(100% - ${depthOffset}px)`
-    } : {
-      ...style,
-      paddingLeft: `calc(var(--cmp-listDraggableItem-paddingX) + ${depthOffset}px)`
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        "aria-disabled": disabled || void 0,
-        "data-dragging": dragging || void 0,
-        style: depthStyle,
-        className: cn(
-          "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX)",
-          titleTypo,
-          disabled ? "bg-(--cmp-listDraggableItem-bg-default) text-(--sys-color-disabled-text)" : selected ? "bg-(--cmp-listDraggableItem-bg-selected) text-(--cmp-listDraggableItem-text-selected)" : "bg-(--cmp-listDraggableItem-bg-default) text-(--cmp-listDraggableItem-text-default)",
-          !disabled && !selected && !dragging && cn(
-            "hover:bg-(--cmp-listDraggableItem-bg-hover)",
-            // 리스트가 드래그 중이면(SDraggableList 가 data-drag-active 를 붙인다) hover 를 무효화한다.
-            "[[data-drag-active]_&]:hover:bg-(--cmp-listDraggableItem-bg-default)"
-          ),
-          // 높이는 세로 패딩과 내용이 정한다 — 항목에 높이를 못 박지 않는다 (SListItem 과 동일)
-          paddingYClass,
-          // 항목 사이 구분선은 리스트가 그린다.
-          bordered && cn(
-            "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
-            !disabled && !selected && !dragging && cn(
-              "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
-              "[[data-drag-active]_&]:hover:border-(--cmp-listDraggableItem-border-default)"
-            ),
-            !disabled && selected && !dragging && "border-(--cmp-listDraggableItem-bordered-border-selected) bg-(--cmp-listDraggableItem-bordered-bg-selected)",
-            !disabled && selected && dragging && "border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
-          ),
-          disabled && "cursor-not-allowed",
-          className
-        ),
-        ...rest,
-        children: [
-          accentStripe && selected && !bordered && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listDraggableItem-accentStripe-width) bg-(--cmp-listDraggableItem-accentStripe-color)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ...dragHandleProps,
-              role: dragHandleProps?.role ?? "button",
-              tabIndex: dragHandleProps?.tabIndex ?? (disabled ? -1 : 0),
-              "aria-label": dragHandleProps?.["aria-label"] ?? "\uB4DC\uB798\uADF8 \uD578\uB4E4",
-              "aria-disabled": disabled || void 0,
-              onMouseDown: onDragHandleMouseDown,
-              className: cn(
-                "flex size-[24px] shrink-0 select-none items-center justify-center rounded-[4px]",
-                disabled ? "cursor-not-allowed opacity-0" : "cursor-grab hover:bg-black/5 active:cursor-grabbing",
-                !disabled && !dragging && "[[data-drag-active]_&]:hover:bg-transparent",
-                dragging && "bg-black/5",
-                dragHandleProps?.className
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "drag", size: 16, color: "grey_65" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex min-w-0 flex-1 items-center gap-[8px]",
-                dragging && "opacity-(--cmp-listDraggableItem-dragging-content-opacity)"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    className: cn(
-                      "min-w-0 flex-1",
-                      supportingTextPosition === "bottom" ? "flex flex-col" : "flex items-center gap-[8px] whitespace-nowrap"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: titleNode }),
-                      hasSupportingText && /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "typo-body-sm-default min-w-0 truncate text-(--sys-color-fg-secondary)",
-                            supportingTextPosition === "right" && "flex-1"
-                          ),
-                          children: supportingTextNode
-                        }
-                      )
-                    ]
-                  }
-                ),
-                trailingNode
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableItem({
-  title,
-  supportingText,
-  supportingTextPosition = "right",
-  trailing,
-  depth = 1,
-  accentStripe = false,
-  bordered = false,
-  selected = false,
-  dragging = false,
-  dense = false,
+var TOOLTIP_HIDE_DELAY_MS = 100;
+function SGhostButton({
+  icon,
   size = "sm",
+  intent = "default",
+  ariaLabel = "",
+  ariaPressed,
+  ariaExpanded,
+  tooltipText,
   disabled = false,
-  dragOverlay = true,
-  dragOverlayOpacity = 0.75,
-  dragHandleProps,
-  onDragHandleMouseDown,
+  onClick,
+  anchorClassName,
+  anchorStyle,
   className,
-  onMouseEnter,
-  onMouseLeave,
-  ...rest
-}, ref) {
-  const [hovered, setHovered] = react.useState(false);
-  const [overlay, setOverlay] = react.useState(null);
-  const rootRef = react.useRef(null);
-  const overlayVisible = overlay != null;
-  const handleMouseEnter = (event) => {
-    if (!disabled) setHovered(true);
-    onMouseEnter?.(event);
+  style
+}) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = react.useState(false);
+  const hideTimer = react.useRef(void 0);
+  const cancelHide = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
   };
-  const handleMouseLeave = (event) => {
-    setHovered(false);
-    onMouseLeave?.(event);
+  const openNow = () => {
+    cancelHide();
+    setOpen(true);
   };
-  const handleDragMouseDown = (event) => {
-    if (disabled) return;
-    const rect = rootRef.current?.getBoundingClientRect();
-    if (dragOverlay && rect) {
-      setOverlay({
-        offsetX: event.clientX - rect.left,
-        offsetY: event.clientY - rect.top,
-        rect,
-        x: event.clientX,
-        y: event.clientY
-      });
-    }
-    dragHandleProps?.onMouseDown?.(event);
-    onDragHandleMouseDown?.(event);
+  const startHide = () => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
   };
-  react.useEffect(() => {
-    if (!overlayVisible) return void 0;
-    const handleMouseMove = (event) => {
-      setOverlay(
-        (current) => current ? {
-          ...current,
-          x: event.clientX,
-          y: event.clientY
-        } : current
-      );
-    };
-    const handleMouseUp = () => {
-      setOverlay(null);
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [overlayVisible]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SDraggableItemView,
-      {
-        ref: (node) => setRefs([rootRef, ref], node),
-        title,
-        supportingText,
-        supportingTextPosition,
-        trailing,
-        depth,
-        accentStripe,
-        bordered,
-        selected,
-        dense,
-        size,
-        dragging: dragging || overlayVisible,
-        disabled,
-        hovered,
-        dragHandleProps,
-        onDragHandleMouseDown: handleDragMouseDown,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        className,
-        ...rest
-      }
-    ),
-    overlay && typeof document !== "undefined" && reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "pointer-events-none fixed",
-          style: {
-            left: overlay.x - overlay.offsetX,
-            opacity: dragOverlayOpacity,
-            top: overlay.y - overlay.offsetY,
-            width: overlay.rect.width,
-            zIndex: Z_INDEX.drag
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            SDraggableItemView,
-            {
-              title,
-              supportingText,
-              supportingTextPosition,
-              trailing,
-              depth,
-              accentStripe,
-              bordered,
-              selected,
-              dense,
-              size,
-              dragging: true,
-              disabled,
-              hovered: true,
-              dragHandleProps,
-              className
-            }
-          )
-        }
-      ),
-      document.body
-    )
-  ] });
-});
-var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, height, className, style, ...rest }, ref) {
-  const fixedHeight = vertical && height !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "hr",
+  const s = SIZE[size];
+  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
+  const btn2 = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
     {
-      ref,
-      "aria-orientation": vertical ? "vertical" : "horizontal",
+      type: "button",
+      disabled,
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
+      "aria-expanded": ariaExpanded,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
       className: cn(
-        "shrink-0 border-0",
-        vertical ? cn("inline-block w-px", fixedHeight ? "self-center" : "h-auto self-stretch") : "block h-px w-full",
+        "group/ghost-button relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
         className
       ),
       style: {
-        backgroundColor: "var(--sys-color-divider-default, #E1E1E1)",
-        ...fixedHeight ? { height: typeof height === "number" ? `${height}px` : height } : null,
+        width: `var(--cmp-ghostButton-${size}-size)`,
+        height: `var(--cmp-ghostButton-${size}-size)`,
+        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
         ...style
       },
-      ...rest
+      children: [
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-5",
+            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+      ]
     }
   );
-});
-var PADDING_CLASS = {
-  default: "p-(--cmp-list-group-padding)",
-  none: ""
+  if (!hasTooltip) return btn2;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
+        onMouseEnter: openNow,
+        onMouseLeave: startHide,
+        onFocus: openNow,
+        onBlur: startHide,
+        children: btn2
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover12__namespace.Content,
+      {
+        side: "top",
+        sideOffset: 4,
+        className: cn("z-50", FLOATING_SLIDE_ANIM),
+        "aria-hidden": true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onMouseEnter: cancelHide,
+        onMouseLeave: startHide,
+        children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+      }
+    ) })
+  ] });
+}
+
+// src/lib/sanitize-inline-html.ts
+var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
+var ALLOWED_ATTRS_BY_TAG = {
+  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
 };
-var dividerStyle = { backgroundColor: "var(--cmp-listItem-border-default)" };
-function hasBorderedChild(children) {
-  let bordered = false;
-  react.Children.forEach(children, (child) => {
-    if (!react.isValidElement(child)) return;
-    if (child.props.bordered === true) {
-      bordered = true;
-      return;
+var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
+var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "META",
+  "LINK",
+  "BASE",
+  "NOSCRIPT",
+  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
+  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
+  "SVG",
+  "MATH",
+  "TEMPLATE"
+]);
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var sanitizeNode = (node) => {
+  if (node.nodeType === Node.COMMENT_NODE) {
+    node.remove();
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+  const element = node;
+  const tagName = element.tagName.toUpperCase();
+  if (DROP_CONTENT_TAGS.has(tagName)) {
+    element.remove();
+    return;
+  }
+  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
+  if (ALLOWED_INLINE_TAGS.has(tagName)) {
+    if (element.hasAttribute("className")) {
+      const val = element.getAttribute("className");
+      element.removeAttribute("className");
+      if (!element.hasAttribute("class")) element.setAttribute("class", val);
     }
-    react.Children.forEach(child.props.children, (wrapped) => {
-      if (react.isValidElement(wrapped) && wrapped.props.bordered === true) {
-        bordered = true;
-      }
+    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
+    Array.from(element.attributes).forEach((attr) => {
+      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
     });
-  });
-  return bordered;
-}
-function withDividers(children) {
-  return react.Children.toArray(children).flatMap(
-    (child, index) => index === 0 ? [child] : [
-      /* @__PURE__ */ jsxRuntime.jsx(SDivider, { "aria-hidden": "true", style: dividerStyle }, `s-list-divider-${index}`),
-      child
-    ]
-  );
-}
-var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, gap = false, padding = "none", ...rest }, ref) {
-  const showDivider = !gap && !hasBorderedChild(children);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+    if (tagName === "A") {
+      const href = element.getAttribute("href");
+      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
+      if (element.hasAttribute("target")) {
+        element.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    return;
+  }
+  const parent = element.parentNode;
+  if (parent == null) return;
+  while (element.firstChild) parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+};
+var sanitizeInlineHtml = (value) => {
+  if (typeof document === "undefined") return escapeHtml(value);
+  const template = document.createElement("template");
+  template.innerHTML = value;
+  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
+  return template.innerHTML;
+};
+var HIDE_DELAY_MS = 100;
+function useBody(content, message = []) {
+  if (content != null) return content;
+  if (message.length === 0) return null;
+  const singleLine = message.length === 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
-      className: cn(
-        gap && "flex flex-col gap-(--cmp-list-group-gap)",
-        PADDING_CLASS[padding],
-        className
-      ),
-      ...rest,
-      children: showDivider ? withDividers(children) : children
-    }
-  );
-});
-var SList2 = /* @__PURE__ */ withDisplayName(SListImpl, "SList");
-var DraggableGroupContext = /* @__PURE__ */ react.createContext(null);
-function useSDraggableGroup() {
-  return react.useContext(DraggableGroupContext);
+      className: singleLine ? "leading-[24px]" : void 0,
+      dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(line) }
+    },
+    i
+  )) });
 }
-function SDraggableProviderInternal({
+var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
+  content,
+  message = [],
+  open: openProp,
+  onOpenChange,
+  trigger = "hover",
+  placement = "top",
+  sideOffset = 8,
+  tooltipType = "default",
+  showClose = false,
+  disabled = false,
   children,
-  defaultGroup,
-  legacyOnMove
-}) {
-  const listsRef = react.useRef(/* @__PURE__ */ new Map());
-  const legacyOnMoveRef = react.useRef(legacyOnMove);
-  const pointerRef = react.useRef(null);
-  const [dragging, setDragging] = react.useState(null);
-  const [drop, setDrop] = react.useState(null);
-  const dropRef = react.useRef(drop);
-  legacyOnMoveRef.current = legacyOnMove;
-  dropRef.current = drop;
-  const registerList = react.useCallback(
-    (group, listId, element, items, onChange) => {
-      const key = `${group}:${listId}`;
-      if (element) listsRef.current.set(key, { element, items, onChange });
-      else listsRef.current.delete(key);
+  icon = "helpOutline",
+  iconSize = 12,
+  color = "#01BB4B",
+  ariaLabel,
+  className,
+  triggerClassName,
+  style,
+  contentProps
+}, ref) {
+  const portalContainer = usePortalContainer();
+  const [internalOpen, setInternalOpen] = react.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const hideTimer = react.useRef(void 0);
+  const cancelHide = react.useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  }, []);
+  const setOpenState = react.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
     },
-    []
+    [isControlled, onOpenChange]
   );
-  const startDrag = react.useCallback(
-    (event, group, listId, index, itemKey) => {
-      event.preventDefault();
-      setDragging({ group, listId, index, itemKey });
-      setDrop({ group, listId, index });
-    },
-    []
+  const openNow = () => {
+    cancelHide();
+    setOpenState(true);
+  };
+  const startHide = () => {
+    if (showClose) return;
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpenState(false), HIDE_DELAY_MS);
+  };
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      show: () => {
+        cancelHide();
+        setOpenState(true);
+      },
+      hide: () => {
+        cancelHide();
+        setOpenState(false);
+      }
+    }),
+    [cancelHide, setOpenState]
   );
-  react.useEffect(() => {
-    if (!dragging) return void 0;
-    let autoScrollFrame = null;
-    const findListAtPointer = (clientX, clientY) => {
-      const element = document.elementFromPoint(clientX, clientY);
-      const listElement = element?.closest("[data-draggable-list-id]");
-      const group = listElement?.dataset.draggableGroup;
-      const listId = listElement?.dataset.draggableListId;
-      const list = group && listId ? listsRef.current.get(`${group}:${listId}`) : void 0;
-      return group && listId && list ? { group, listId, list } : null;
+  const isHover = trigger === "hover";
+  const isNone = trigger === "none";
+  if (isNone && children == null && typeof console !== "undefined") {
+    console.warn(
+      '[STooltip] trigger="none" \uC740 \uC704\uCE58 \uAE30\uC900\uC774 \uB420 children \uC774 \uD544\uC694\uD569\uB2C8\uB2E4. \uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70\uB85C \uD3F4\uBC31\uD569\uB2C8\uB2E4.'
+    );
+  }
+  const body = useBody(content, message);
+  const bg = `var(--cmp-tooltip-${tooltipType}-bg)`;
+  const fg = `var(--cmp-tooltip-${tooltipType}-content)`;
+  const triggerNode = children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex cursor-pointer", triggerClassName), "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
+  if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
+  const {
+    className: contentPropsClassName,
+    style: contentPropsStyle,
+    ...restContentProps
+  } = contentProps ?? {};
+  const contentClass = cn(
+    "z-50 w-fit max-w-[var(--radix-popover-content-available-width)] rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
+    FLOATING_SLIDE_ANIM,
+    className,
+    contentPropsClassName
+  );
+  const contentStyle = {
+    background: bg,
+    color: fg,
+    fontWeight: tooltipType === "default" ? 500 : 700,
+    ...style,
+    ...contentPropsStyle
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpenState, children: [
+    isNone ? (
+      // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
+      // mouse/focus 핸들러가 없으므로 showClose 없이도 자동 닫힘이 발생하지 않는다.
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: triggerNode })
+    ) : isHover ? (
+      // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "inline-flex",
+          onMouseEnter: openNow,
+          onMouseLeave: startHide,
+          onFocus: openNow,
+          onBlur: startHide,
+          children: triggerNode
+        }
+      ) })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover12__namespace.Content,
+      {
+        side: placement,
+        sideOffset,
+        className: contentClass,
+        style: contentStyle,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (showClose || isNone) e.preventDefault();
+        },
+        onEscapeKeyDown: (e) => {
+          if (showClose || isNone) e.preventDefault();
+        },
+        onMouseEnter: isHover ? cancelHide : void 0,
+        onMouseLeave: isHover ? startHide : void 0,
+        ...restContentProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
+            showClose && !isNone && /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpenState(false);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+        ]
+      }
+    ) })
+  ] });
+});
+var STooltip2 = /* @__PURE__ */ withDisplayName(STooltipImpl, "STooltip");
+function runRules(value, rules) {
+  if (!rules || rules.length === 0) return "";
+  for (const rule of rules) {
+    const result = rule(value ?? "");
+    if (result !== true) return typeof result === "string" ? result : "\uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uAC12\uC785\uB2C8\uB2E4.";
+  }
+  return "";
+}
+var FormContext = /* @__PURE__ */ react.createContext(null);
+function useFormContext() {
+  return react.useContext(FormContext);
+}
+function useFormField(field) {
+  const ctx = useFormContext();
+  const cbRef = react.useRef(field);
+  cbRef.current = field;
+  const name = field.name ?? "";
+  react.useEffect(() => {
+    if (!ctx) return;
+    return ctx.register({
+      name,
+      validate: () => cbRef.current.validate(),
+      resetValidation: () => cbRef.current.resetValidation()
+    });
+  }, [ctx, name]);
+}
+var FIELD_SIZE = {
+  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
+  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
+};
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var FOCUS_RING_SHADOW = "0px 0px 4px 0px #0071ff66";
+var cssLen = (v) => v === void 0 || v === "" || v === 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
+var SField = /* @__PURE__ */ react.forwardRef(function SField2({
+  name,
+  label = "",
+  icon,
+  iconColor,
+  labelTooltip = "",
+  labelTooltipProps,
+  labelWidth,
+  labelHeight,
+  size = "sm",
+  addonLabel = "",
+  addonAlign = "start",
+  error = false,
+  errorMessage = "",
+  status,
+  focused = false,
+  hovered = false,
+  rules: _rules,
+  hint = "",
+  disabled = false,
+  readOnly = false,
+  width,
+  minWidth,
+  maxWidth,
+  multiline = false,
+  borderless = false,
+  children,
+  className,
+  style,
+  onMouseEnter,
+  onMouseLeave
+}, ref) {
+  const rootRef = react.useRef(null);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => {
+        const root = rootRef.current;
+        if (!root) return;
+        const focusable = root.querySelector(
+          "input,textarea,select,button,[tabindex]"
+        );
+        focusable?.focus();
+        root.scrollIntoView({ block: "nearest" });
+      }
+    }),
+    []
+  );
+  const s = FIELD_SIZE[size];
+  if (label !== "" && addonLabel !== "" && typeof console !== "undefined") {
+    console.warn(
+      "[SField] label \uACFC addonLabel \uC740 \uD568\uAED8 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. addonLabel \uC744 \uBB34\uC2DC\uD569\uB2C8\uB2E4."
+    );
+  }
+  const effectiveAddonLabel = label !== "" ? "" : addonLabel;
+  const resolvedError = status === "error" || status === void 0 && error;
+  const resolvedSuccess = status === "pass";
+  const showError = resolvedError && errorMessage !== "";
+  const interactive = !disabled && !readOnly;
+  const isPercentWidth = typeof width === "string" && width.trim().endsWith("%");
+  const resolvedWidth = fieldWidthValue(width);
+  const hug = resolvedWidth !== void 0 && !isPercentWidth;
+  const addonWidth = effectiveAddonLabel !== "" ? cssLen(labelWidth) : void 0;
+  const maxWidthValue = fieldWidthValue(maxWidth);
+  const resolvedMaxWidth = maxWidthValue === void 0 || effectiveAddonLabel === "" ? maxWidthValue : addonWidth ? `calc(${maxWidthValue} + ${addonWidth})` : void 0;
+  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : (
+    // focus·hover(제어 prop) 가 error/pass 보다 우선 — 실제 :hover/:focus-within 클래스도
+    // 같은 순서로 --field-bc 를 덮으므로, prop 으로 흉내 낸 상태도 그와 같게 둔다.
+    interactive && (focused || hovered) ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)"
+  );
+  const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
+  const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: rootRef,
+      "data-name": name || void 0,
+      className: cn(
+        "h-fit flex-col",
+        // hug 시 inline-flex 를 유지하면 기존에 세로로 쌓여 있던 필드들이 한 줄에 붙어버리므로
+        // 블록 레벨(flex)로 두어 쌓임은 그대로 유지한다. 나란히 놓으려면 부모를 flex 로.
+        hug ? "flex w-fit max-w-full" : "inline-flex w-full",
+        className
+      ),
+      style,
+      onMouseEnter,
+      onMouseLeave,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start", children: [
+        label !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
+            style: {
+              height: cssLen(labelHeight) ?? s.height,
+              marginRight: s.fieldGap,
+              width: cssLen(labelWidth),
+              fontSize: s.fontSize,
+              lineHeight: `${s.lineHeight}px`
+            },
+            children: [
+              icon && /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: icon,
+                  size: s.icon,
+                  color: iconColor,
+                  style: { marginRight: s.labelGap }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
+              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                STooltip2,
+                {
+                  message: labelTooltip !== "" ? [labelTooltip] : void 0,
+                  iconSize: s.icon,
+                  ...labelTooltipProps
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex min-w-0 flex-col", !hug && !isPercentWidth && "flex-1"),
+            style: {
+              width: resolvedWidth,
+              minWidth: fieldWidthValue(minWidth),
+              maxWidth: resolvedMaxWidth
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative box-border flex min-w-0 items-stretch border border-solid border-(--field-bc)",
+                    // 둘 다 넘친 것을 잘라 내지만 clip 은 스크롤 상자를 만들지 않는다. hidden 이면
+                    // 이 상자가 스크롤포트가 되어 안쪽의 position:sticky 가 페이지 스크롤을 따라가지
+                    // 못한다 (SEditor 의 고정 툴바). 여러 줄 필드에서만 바꿔 파급을 좁힌다.
+                    multiline ? "overflow-clip" : "overflow-hidden",
+                    interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                    disabled && "cursor-not-allowed"
+                  ),
+                  style: {
+                    // @ts-expect-error CSS 변수
+                    "--field-bc": borderColor,
+                    // focused/hovered prop이 명시된 경우 강조를 즉시 반영
+                    ...interactive && !borderless && (focused || hovered) ? { boxShadow: FOCUS_RING_SHADOW } : {},
+                    ...multiline ? { minHeight: s.height } : { height: s.height },
+                    "borderRadius": s.radius,
+                    "background": bgColor,
+                    "color": textColor
+                  },
+                  "data-focused": focused || void 0,
+                  "data-hovered": hovered || void 0,
+                  children: [
+                    effectiveAddonLabel !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-sd-20",
+                        style: {
+                          // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
+                          width: cssLen(labelWidth),
+                          justifyContent: ALIGN[addonAlign],
+                          background: "var(--cmp-field-addonLabel-bg)",
+                          borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
+                          borderTopLeftRadius: s.radius - 1,
+                          borderBottomLeftRadius: s.radius - 1
+                        },
+                        children: [
+                          icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
+                          effectiveAddonLabel
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-w-0 flex-1", multiline && "bg-inherit"), children })
+                  ]
+                }
+              ),
+              showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-hint-color)", children: hint }) : null
+            ]
+          }
+        )
+      ] })
+    }
+  );
+});
+
+// src/lib/autofill.ts
+var AUTOFILL_RESET_CLASS = "autofill:[-webkit-text-fill-color:currentColor] autofill:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] autofill:[transition:background-color_5000s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] [&:-webkit-autofill]:[transition:background-color_5000s_ease-in-out_0s]";
+var TEXTAREA_SIZE = {
+  sm: {
+    fontSize: 12,
+    lineHeight: 20,
+    paddingX: "var(--cmp-textinput-sm-paddingX)",
+    paddingY: "var(--cmp-textinput-sm-paddingY)"
+  },
+  md: {
+    fontSize: 14,
+    lineHeight: 24,
+    paddingX: "var(--cmp-textinput-md-paddingX)",
+    paddingY: "var(--cmp-textinput-md-paddingY)"
+  }
+};
+var MIN_ROWS = 2;
+var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
+  value,
+  onValueChange,
+  onChange,
+  size = "sm",
+  rows = MIN_ROWS,
+  autogrow = false,
+  maxRows,
+  rules,
+  status,
+  focused,
+  hovered,
+  textareaClassName,
+  textareaStyle,
+  label,
+  labelWidth,
+  icon,
+  iconColor,
+  labelTooltip,
+  labelTooltipProps,
+  addonLabel,
+  addonAlign,
+  hint,
+  error,
+  errorMessage,
+  width,
+  disabled = false,
+  readOnly = false,
+  placeholder = "\uC785\uB825\uD574 \uC8FC\uC138\uC694.",
+  onBlur,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const p = TEXTAREA_SIZE[size];
+  const heightForRows = (n) => `calc(${p.lineHeight * n}px + ${p.paddingY} * 2)`;
+  const minHeight = heightForRows(MIN_ROWS);
+  const maxHeight = autogrow && maxRows != null ? heightForRows(maxRows) : void 0;
+  const [ruleError, setRuleError] = react.useState("");
+  const innerRef = react.useRef(null);
+  const setRefs2 = react.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  react.useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (el == null) return;
+    if (!autogrow) {
+      el.style.height = "";
+      return;
+    }
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [autogrow, maxHeight, minHeight, rows, value]);
+  useFormField({
+    name: rest.name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
+  const resolvedError = error || ruleError !== "";
+  const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
+  const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SField,
+    {
+      label,
+      labelWidth,
+      icon,
+      iconColor,
+      labelTooltip,
+      labelTooltipProps,
+      addonLabel,
+      addonAlign,
+      hint,
+      size,
+      error: resolvedError,
+      status: resolvedStatus,
+      focused,
+      hovered,
+      errorMessage: resolvedErrorMessage,
+      width,
+      disabled,
+      readOnly,
+      multiline: true,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: setRefs2,
+          value: value ?? "",
+          rows,
+          disabled,
+          readOnly,
+          placeholder,
+          onChange: (e) => {
+            onChange?.(e);
+            onValueChange?.(e.target.value);
+            if (ruleError !== "") setRuleError(runRules(e.target.value, rules));
+          },
+          onBlur: (e) => {
+            onBlur?.(e);
+            if (rules && rules.length > 0) setRuleError(runRules(e.target.value, rules));
+          },
+          className: cn(
+            "w-full border-0 bg-transparent outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
+            // autogrow 와 끌어서 늘리기는 같은 높이를 두고 다투므로 함께 두지 않는다
+            autogrow ? "resize-none" : "resize-y",
+            AUTOFILL_RESET_CLASS,
+            textareaClassName
+          ),
+          style: {
+            minHeight,
+            maxHeight,
+            // 상한이 있으면 거기 닿았을 때 안에서 스크롤한다. 상한이 없으면 높이가 늘 내용과
+            // 같으므로 스크롤바가 나올 일이 없고, 반올림으로 1px 이 넘쳐 깜빡이는 것만 막는다.
+            overflowY: autogrow ? maxRows != null ? "auto" : "hidden" : void 0,
+            padding: `${p.paddingY} ${p.paddingX}`,
+            fontSize: p.fontSize,
+            lineHeight: `${p.lineHeight}px`,
+            color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
+            ...textareaStyle
+          },
+          ...rest
+        }
+      )
+    }
+  );
+});
+var DEFAULT_PLACEHOLDER = "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD574 \uC8FC\uC138\uC694...";
+var FIELD_MIN_HEIGHT = 48;
+var FIELD_BORDER = 1;
+var TEXTAREA_MIN_HEIGHT = FIELD_MIN_HEIGHT - FIELD_BORDER * 2;
+var BUTTON_BOTTOM_INSET = `calc((${FIELD_MIN_HEIGHT}px - var(--cmp-ghostButton-md-size)) / 2)`;
+var DEFAULT_MAX_ROWS = 5;
+var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
+  value = "",
+  onValueChange,
+  placeholder = DEFAULT_PLACEHOLDER,
+  disabled = false,
+  onSend,
+  onAttach,
+  busy = false,
+  onStop,
+  footerAction,
+  maxRows = DEFAULT_MAX_ROWS,
+  className,
+  style,
+  textareaClassName,
+  ...rest
+}, ref) {
+  const canSend = !disabled && !busy && value.trim() !== "";
+  const send = react.useCallback(() => {
+    if (!canSend) return;
+    onSend?.(value);
+  }, [canSend, onSend, value]);
+  const handleKeyDown = (e) => {
+    rest.onKeyDown?.(e);
+    if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing) return;
+    e.preventDefault();
+    send();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col bg-(--sys-color-field-bg-default)", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-sd-8 p-sd-12", children: [
+      onAttach != null && /* @__PURE__ */ jsxRuntime.jsx(
+        SGhostButton,
+        {
+          icon: "attachFile",
+          size: "md",
+          ariaLabel: "\uD30C\uC77C \uCCA8\uBD80",
+          disabled,
+          onClick: onAttach,
+          style: { marginBottom: BUTTON_BOTTOM_INSET }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        STextarea,
+        {
+          ref,
+          size: "md",
+          rows: 1,
+          autogrow: true,
+          maxRows,
+          width: "100%",
+          value,
+          onValueChange,
+          placeholder,
+          disabled,
+          className: "min-w-0 flex-1",
+          textareaClassName,
+          textareaStyle: { minHeight: TEXTAREA_MIN_HEIGHT },
+          ...rest,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      busy ? /* @__PURE__ */ jsxRuntime.jsx(
+        SGhostButton,
+        {
+          icon: "stop",
+          size: "md",
+          intent: "danger",
+          ariaLabel: "\uC751\uB2F5 \uC911\uC9C0",
+          onClick: onStop,
+          style: { marginBottom: BUTTON_BOTTOM_INSET }
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        SGhostButton,
+        {
+          icon: "send",
+          size: "md",
+          intent: "subAction",
+          ariaLabel: "\uC804\uC1A1",
+          disabled: !canSend,
+          onClick: send,
+          style: { marginBottom: BUTTON_BOTTOM_INSET }
+        }
+      )
+    ] }),
+    footerAction != null && // 보조 액션은 입력창 아래 가운데에 선다 — 주 동작(전송)과 층이 다름을 자리로 드러낸다.
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: footerAction })
+  ] });
+});
+var SChatInput2 = /* @__PURE__ */ withDisplayName(SChatInputImpl, "SChatInput");
+var CHAT_MESSAGE_DIRECTIONS = ["incoming", "outgoing"];
+var CHAT_MESSAGE_VARIANTS = ["default", "template"];
+var BUBBLE_SURFACE = {
+  incoming: "bg-(--sys-color-bg-screen) text-(--sys-color-fg-primary)",
+  outgoing: "bg-(--sys-color-bg-brand) text-(--sys-color-fg-inverse)",
+  template: "bg-(--sys-color-bg-accentFaint) text-(--sys-color-fg-deep)"
+};
+var CHAT_MESSAGE_READ_STATUSES = ["read", "unread"];
+var READ_STATUS_LABEL = {
+  read: "\uC77D\uC74C",
+  unread: "\uC548 \uC77D\uC74C"
+};
+var READ_STATUS_COLOR = {
+  read: "text-(--sys-color-fg-tertiary)",
+  unread: "text-(--sys-color-fg-warning)"
+};
+var AVATAR_SIZE = 32;
+var AVATAR_ROW_HEIGHT = 40;
+var AVATAR_ICON_SIZE = 40;
+function Avatar({ src, alt, placeholder }) {
+  if (placeholder) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", style: { width: AVATAR_SIZE, height: AVATAR_ROW_HEIGHT } });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", style: { height: AVATAR_ROW_HEIGHT }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "relative overflow-hidden rounded-full bg-(--sys-color-bg-screen)",
+      style: { width: AVATAR_SIZE, height: AVATAR_SIZE },
+      children: src != null ? /* @__PURE__ */ jsxRuntime.jsx(SImage, { src, alt: alt ?? "", fit: "cover", className: "h-full w-full" }) : (
+        // 원 밖으로 나가는 만큼을 좌우로 나눠 가운데를 맞추고, 아래는 원이 자른다.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SIcon,
+          {
+            name: "user",
+            size: AVATAR_ICON_SIZE,
+            color: "var(--sys-color-fg-quaternary)",
+            className: "absolute top-0",
+            style: { left: (AVATAR_SIZE - AVATAR_ICON_SIZE) / 2 }
+          }
+        )
+      )
+    }
+  ) });
+}
+var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
+  direction = "incoming",
+  sender,
+  time,
+  readStatus,
+  avatarSrc,
+  avatarAlt,
+  continued = false,
+  variant = "default",
+  actions,
+  messages,
+  className,
+  ...rest
+}, ref) {
+  const outgoing = direction === "outgoing";
+  const surface = variant === "template" ? "template" : direction;
+  const bubbles = messages ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        // 아바타와 본문 열이 같은 줄에 서고, 보낸 메시지는 좌우를 뒤집는다.
+        // items-start 라 이름이 있든 없든 아바타는 언제나 첫 줄에 붙는다.
+        "flex items-start gap-sd-12",
+        outgoing && "flex-row-reverse",
+        className
+      ),
+      ...rest,
+      children: [
+        !outgoing && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarSrc, alt: avatarAlt, placeholder: continued }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 flex-col gap-sd-4", outgoing ? "items-end" : "items-start"), children: [
+          !outgoing && !continued && sender != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default px-sd-8 text-(--sys-color-fg-secondary)", children: sender }),
+          bubbles.length > 0 && // 말풍선끼리는 이름·시각과의 간격(4px)보다 벌려 한 덩어리 안의 여러 발화로 읽히게 한다.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("flex min-w-0 flex-col gap-sd-8", outgoing ? "items-end" : "items-start"),
+              children: bubbles.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    // 라운드 12px 은 대응 토큰이 없어 값으로 둔다 (디자인팀 토큰 추가 요청 대상).
+                    "typo-body-md-default max-w-full rounded-[12px] px-sd-16 py-sd-8",
+                    // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — 띄어쓰기에서만 끊고,
+                    // 끊을 자리가 없는 긴 토큰(URL·주문번호)만 흘려보낸다.
+                    "break-keep wrap-break-word",
+                    BUBBLE_SURFACE[surface]
+                  ),
+                  children: message
+                },
+                index
+              ))
+            }
+          ),
+          (readStatus != null || time != null) && // 읽음 표시와 시각은 한 줄에 선다 — 읽음이 먼저, 시각이 뒤다.
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "typo-body-sm-default flex items-center gap-sd-4 px-sd-8", children: [
+            readStatus != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: READ_STATUS_COLOR[readStatus], children: READ_STATUS_LABEL[readStatus] }),
+            time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-(--sys-color-fg-tertiary)", children: time })
+          ] }),
+          actions != null && // 버튼이 많아 한 줄에 안 들어가면 감싼다 — 넘쳐서 잘리는 것보다 낫다.
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-sd-8 px-sd-8", outgoing && "justify-end"), children: actions })
+        ] })
+      ]
+    }
+  );
+});
+var SChatMessage2 = /* @__PURE__ */ withDisplayName(SChatMessageImpl, "SChatMessage");
+
+// src/lib/z-index.ts
+var Z_INDEX = {
+  baseFloating: 50,
+  modalHost: 1e3,
+  toast: 1100,
+  loading: 1200,
+  drag: 1300
+};
+var setRefs = (refs, value) => {
+  refs.forEach((ref) => {
+    if (typeof ref === "function") {
+      ref(value);
+      return;
+    }
+    if (ref) {
+      ref.current = value;
+    }
+  });
+};
+function renderSlot(slot, state2) {
+  return typeof slot === "function" ? slot(state2) : slot;
+}
+var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
+  function SDraggableItemView2({
+    title,
+    supportingText,
+    supportingTextPosition,
+    trailing,
+    depth,
+    accentStripe,
+    bordered,
+    selected,
+    dense,
+    size,
+    dragging,
+    disabled,
+    hovered,
+    dragHandleProps,
+    onDragHandleMouseDown,
+    className,
+    style,
+    ...rest
+  }, ref) {
+    const renderState = { hovered, dragging, disabled };
+    const titleNode = renderSlot(title, renderState);
+    const supportingTextNode = renderSlot(supportingText, renderState);
+    const hasSupportingText = supportingTextNode != null && supportingTextNode !== "";
+    const trailingNode = renderSlot(trailing, renderState);
+    const titleTypo = size === "sm" ? selected ? "typo-item-sm-selected" : "typo-item-sm-default" : selected ? "typo-item-md-selected" : "typo-item-md-default";
+    const paddingYClass = dense ? size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-dense)" : "py-(--cmp-listDraggableItem-paddingY-md-dense)" : size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-normal)" : "py-(--cmp-listDraggableItem-paddingY-md-normal)";
+    const normalizedDepth = Math.max(1, Math.floor(depth));
+    const depthOffset = (normalizedDepth - 1) * 20;
+    const depthStyle = depthOffset === 0 ? style : bordered ? {
+      ...style,
+      marginLeft: depthOffset,
+      width: `calc(100% - ${depthOffset}px)`
+    } : {
+      ...style,
+      paddingLeft: `calc(var(--cmp-listDraggableItem-paddingX) + ${depthOffset}px)`
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "aria-disabled": disabled || void 0,
+        "data-dragging": dragging || void 0,
+        style: depthStyle,
+        className: cn(
+          "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX)",
+          titleTypo,
+          disabled ? "bg-(--cmp-listDraggableItem-bg-default) text-(--sys-color-disabled-text)" : selected ? "bg-(--cmp-listDraggableItem-bg-selected) text-(--cmp-listDraggableItem-text-selected)" : "bg-(--cmp-listDraggableItem-bg-default) text-(--cmp-listDraggableItem-text-default)",
+          !disabled && !selected && !dragging && cn(
+            "hover:bg-(--cmp-listDraggableItem-bg-hover)",
+            // 리스트가 드래그 중이면(SDraggableList 가 data-drag-active 를 붙인다) hover 를 무효화한다.
+            "[[data-drag-active]_&]:hover:bg-(--cmp-listDraggableItem-bg-default)"
+          ),
+          // 높이는 세로 패딩과 내용이 정한다 — 항목에 높이를 못 박지 않는다 (SListItem 과 동일)
+          paddingYClass,
+          // 항목 사이 구분선은 리스트가 그린다.
+          bordered && cn(
+            "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
+            !disabled && !selected && !dragging && cn(
+              "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
+              "[[data-drag-active]_&]:hover:border-(--cmp-listDraggableItem-border-default)"
+            ),
+            !disabled && selected && !dragging && "border-(--cmp-listDraggableItem-bordered-border-selected) bg-(--cmp-listDraggableItem-bordered-bg-selected)",
+            !disabled && selected && dragging && "border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
+          ),
+          disabled && "cursor-not-allowed",
+          className
+        ),
+        ...rest,
+        children: [
+          accentStripe && selected && !bordered && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listDraggableItem-accentStripe-width) bg-(--cmp-listDraggableItem-accentStripe-color)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ...dragHandleProps,
+              role: dragHandleProps?.role ?? "button",
+              tabIndex: dragHandleProps?.tabIndex ?? (disabled ? -1 : 0),
+              "aria-label": dragHandleProps?.["aria-label"] ?? "\uB4DC\uB798\uADF8 \uD578\uB4E4",
+              "aria-disabled": disabled || void 0,
+              onMouseDown: onDragHandleMouseDown,
+              className: cn(
+                "flex size-[24px] shrink-0 select-none items-center justify-center rounded-[4px]",
+                disabled ? "cursor-not-allowed opacity-0" : "cursor-grab hover:bg-black/5 active:cursor-grabbing",
+                !disabled && !dragging && "[[data-drag-active]_&]:hover:bg-transparent",
+                dragging && "bg-black/5",
+                dragHandleProps?.className
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "drag", size: 16, color: "grey_65" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 items-center gap-[8px]",
+                dragging && "opacity-(--cmp-listDraggableItem-dragging-content-opacity)"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1",
+                      supportingTextPosition === "bottom" ? "flex flex-col" : "flex items-center gap-[8px] whitespace-nowrap"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: titleNode }),
+                      hasSupportingText && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "typo-body-sm-default min-w-0 truncate text-(--sys-color-fg-secondary)",
+                            supportingTextPosition === "right" && "flex-1"
+                          ),
+                          children: supportingTextNode
+                        }
+                      )
+                    ]
+                  }
+                ),
+                trailingNode
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableItem({
+  title,
+  supportingText,
+  supportingTextPosition = "right",
+  trailing,
+  depth = 1,
+  accentStripe = false,
+  bordered = false,
+  selected = false,
+  dragging = false,
+  dense = false,
+  size = "sm",
+  disabled = false,
+  dragOverlay = true,
+  dragOverlayOpacity = 0.75,
+  dragHandleProps,
+  onDragHandleMouseDown,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}, ref) {
+  const [hovered, setHovered] = react.useState(false);
+  const [overlay, setOverlay] = react.useState(null);
+  const rootRef = react.useRef(null);
+  const overlayVisible = overlay != null;
+  const handleMouseEnter = (event) => {
+    if (!disabled) setHovered(true);
+    onMouseEnter?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    setHovered(false);
+    onMouseLeave?.(event);
+  };
+  const handleDragMouseDown = (event) => {
+    if (disabled) return;
+    const rect = rootRef.current?.getBoundingClientRect();
+    if (dragOverlay && rect) {
+      setOverlay({
+        offsetX: event.clientX - rect.left,
+        offsetY: event.clientY - rect.top,
+        rect,
+        x: event.clientX,
+        y: event.clientY
+      });
+    }
+    dragHandleProps?.onMouseDown?.(event);
+    onDragHandleMouseDown?.(event);
+  };
+  react.useEffect(() => {
+    if (!overlayVisible) return void 0;
+    const handleMouseMove = (event) => {
+      setOverlay(
+        (current) => current ? {
+          ...current,
+          x: event.clientX,
+          y: event.clientY
+        } : current
+      );
+    };
+    const handleMouseUp = () => {
+      setOverlay(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [overlayVisible]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SDraggableItemView,
+      {
+        ref: (node) => setRefs([rootRef, ref], node),
+        title,
+        supportingText,
+        supportingTextPosition,
+        trailing,
+        depth,
+        accentStripe,
+        bordered,
+        selected,
+        dense,
+        size,
+        dragging: dragging || overlayVisible,
+        disabled,
+        hovered,
+        dragHandleProps,
+        onDragHandleMouseDown: handleDragMouseDown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className,
+        ...rest
+      }
+    ),
+    overlay && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none fixed",
+          style: {
+            left: overlay.x - overlay.offsetX,
+            opacity: dragOverlayOpacity,
+            top: overlay.y - overlay.offsetY,
+            width: overlay.rect.width,
+            zIndex: Z_INDEX.drag
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            SDraggableItemView,
+            {
+              title,
+              supportingText,
+              supportingTextPosition,
+              trailing,
+              depth,
+              accentStripe,
+              bordered,
+              selected,
+              dense,
+              size,
+              dragging: true,
+              disabled,
+              hovered: true,
+              dragHandleProps,
+              className
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
+var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, height, className, style, ...rest }, ref) {
+  const fixedHeight = vertical && height !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      className: cn(
+        "shrink-0 border-0",
+        vertical ? cn("inline-block w-px", fixedHeight ? "self-center" : "h-auto self-stretch") : "block h-px w-full",
+        className
+      ),
+      style: {
+        backgroundColor: "var(--sys-color-divider-default, #E1E1E1)",
+        ...fixedHeight ? { height: typeof height === "number" ? `${height}px` : height } : null,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var PADDING_CLASS = {
+  default: "p-(--cmp-list-group-padding)",
+  none: ""
+};
+var dividerStyle = { backgroundColor: "var(--cmp-listItem-border-default)" };
+function hasBorderedChild(children) {
+  let bordered = false;
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) return;
+    if (child.props.bordered === true) {
+      bordered = true;
+      return;
+    }
+    react.Children.forEach(child.props.children, (wrapped) => {
+      if (react.isValidElement(wrapped) && wrapped.props.bordered === true) {
+        bordered = true;
+      }
+    });
+  });
+  return bordered;
+}
+function withDividers(children) {
+  return react.Children.toArray(children).flatMap(
+    (child, index) => index === 0 ? [child] : [
+      /* @__PURE__ */ jsxRuntime.jsx(SDivider, { "aria-hidden": "true", style: dividerStyle }, `s-list-divider-${index}`),
+      child
+    ]
+  );
+}
+var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, gap = false, padding = "none", ...rest }, ref) {
+  const showDivider = !gap && !hasBorderedChild(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        gap && "flex flex-col gap-(--cmp-list-group-gap)",
+        PADDING_CLASS[padding],
+        className
+      ),
+      ...rest,
+      children: showDivider ? withDividers(children) : children
+    }
+  );
+});
+var SList2 = /* @__PURE__ */ withDisplayName(SListImpl, "SList");
+var DraggableGroupContext = /* @__PURE__ */ react.createContext(null);
+function useSDraggableGroup() {
+  return react.useContext(DraggableGroupContext);
+}
+function SDraggableProviderInternal({
+  children,
+  defaultGroup,
+  legacyOnMove
+}) {
+  const listsRef = react.useRef(/* @__PURE__ */ new Map());
+  const legacyOnMoveRef = react.useRef(legacyOnMove);
+  const pointerRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState(null);
+  const [drop, setDrop] = react.useState(null);
+  const dropRef = react.useRef(drop);
+  legacyOnMoveRef.current = legacyOnMove;
+  dropRef.current = drop;
+  const registerList = react.useCallback(
+    (group, listId, element, items, onChange) => {
+      const key = `${group}:${listId}`;
+      if (element) listsRef.current.set(key, { element, items, onChange });
+      else listsRef.current.delete(key);
+    },
+    []
+  );
+  const startDrag = react.useCallback(
+    (event, group, listId, index, itemKey) => {
+      event.preventDefault();
+      setDragging({ group, listId, index, itemKey });
+      setDrop({ group, listId, index });
+    },
+    []
+  );
+  react.useEffect(() => {
+    if (!dragging) return void 0;
+    let autoScrollFrame = null;
+    const findListAtPointer = (clientX, clientY) => {
+      const element = document.elementFromPoint(clientX, clientY);
+      const listElement = element?.closest("[data-draggable-list-id]");
+      const group = listElement?.dataset.draggableGroup;
+      const listId = listElement?.dataset.draggableListId;
+      const list = group && listId ? listsRef.current.get(`${group}:${listId}`) : void 0;
+      return group && listId && list ? { group, listId, list } : null;
     };
     const updateDropTarget = (clientX, clientY) => {
       const target = findListAtPointer(clientX, clientY);
@@ -4913,23 +6011,104 @@ var SExpansionListImpl = /* @__PURE__ */ react.forwardRef(function SExpansionLis
     if (isListItemElement(child)) {
       return react.cloneElement(child, { clickable: child.props.clickable ?? true });
     }
-    if (!isExpansionItemElement(child)) return child;
-    const depth = child.props.depth ?? 1;
-    const itemKey = String(child.key ?? index);
-    return react.cloneElement(child, {
-      expanded: openKeys[depth] === itemKey,
-      onToggle: (next, event) => {
-        setOpenKeys((current) => ({
-          ...current,
-          [depth]: next ? itemKey : current[depth] === itemKey ? void 0 : current[depth]
-        }));
-        child.props.onToggle?.(next, event);
-      }
-    });
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(SList2, { ref, ...rest, children: listChildren });
+    if (!isExpansionItemElement(child)) return child;
+    const depth = child.props.depth ?? 1;
+    const itemKey = String(child.key ?? index);
+    return react.cloneElement(child, {
+      expanded: openKeys[depth] === itemKey,
+      onToggle: (next, event) => {
+        setOpenKeys((current) => ({
+          ...current,
+          [depth]: next ? itemKey : current[depth] === itemKey ? void 0 : current[depth]
+        }));
+        child.props.onToggle?.(next, event);
+      }
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(SList2, { ref, ...rest, children: listChildren });
+});
+var SExpansionList2 = /* @__PURE__ */ withDisplayName(SExpansionListImpl, "SExpansionList");
+function SellmateWordmark({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      width: "276",
+      height: "40",
+      viewBox: "0 0 276 40",
+      fill: "#00275F",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": "Sellmate",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.6953 15.17H13.0352C10.9045 15.17 9.36459 14.8464 8.56779 14.2353C7.81576 13.6602 7.47556 12.7615 7.47556 11.3325C7.47556 9.90362 7.81576 8.98695 8.56779 8.4028C9.5526 7.62992 10.8418 7.48613 13.0352 7.48613H33.7072V0H13.1516C4.91507 0 0 4.23285 0 11.3325C0 18.4322 4.91507 22.6561 13.1516 22.6561H22.8206C24.1187 22.6292 26.0973 22.6561 27.2701 23.5908C27.9953 24.1659 28.3713 25.2444 28.3713 26.7811C28.3713 28.2011 28.0669 29.0908 27.3955 29.6569C26.1331 30.7174 23.6711 31.2476 20.0721 31.2476C6.75038 31.2476 0.877371 27.2125 0.823654 27.1676L0 26.5834V34.2852L0.196961 34.438C0.402874 34.5998 5.29108 38.3743 19.9557 38.3743C30.3499 38.3743 35.8469 34.3661 35.8469 26.7721C35.8469 19.1782 30.9318 15.17 22.6953 15.17Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M94.6954 0H87.4258V38.3833H94.6954V0Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M109.874 0H102.604V38.3833H109.874V0Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M160.887 10.728C158.675 8.97557 153.885 8.35547 150.466 8.35547C147.314 8.35547 143.035 9.04746 140.752 10.5483C138.558 9.03848 134.261 8.35547 131.056 8.35547C127.394 8.35547 122.631 9.17328 120.635 10.728C118.54 12.3636 117.475 14.844 117.475 18.1063V38.7224H124.744V18.1063C124.744 17.3514 125.058 16.7762 125.702 16.3539C126.669 15.7158 129.203 15.4911 131.083 15.4911C134.395 15.4911 137.135 15.6888 137.135 18.1063V38.7224H144.405V18.1063C144.405 15.9135 146.625 15.4911 150.457 15.4911C152.552 15.4911 155.067 15.7787 155.81 16.3359C156.482 16.8302 156.786 17.3963 156.786 18.1063V38.7224H164.056V18.1063C164.056 14.871 162.99 12.3906 160.896 10.728H160.887Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M195.015 8.35547H174.648V15.4911H194.854C197.074 15.4911 198.453 15.599 199.348 16.1741C199.895 16.5246 200.208 17.1537 200.289 18.0704H183.314C175.095 18.0704 171.264 21.3506 171.264 28.3964C171.264 34.9569 175.865 38.7224 183.887 38.7224H195.024C209.053 38.7224 207.639 35.9454 207.639 28.9715V18.1063C207.639 11.5458 203.512 8.35547 195.024 8.35547H195.015ZM200.369 28.9715C200.369 29.6276 200.441 30.5982 199.689 31.1194C198.847 31.7036 196.895 31.5867 194.854 31.5867H184.048C180.288 31.5867 178.533 30.5443 178.533 28.2975C178.533 25.4217 181.255 25.188 184.048 25.188H200.369V28.9715Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M227.692 0.521243L227.683 0H220.413V8.01636H212.866V15.143H220.413V37.862L220.422 38.3833H227.692V15.143H235.239V8.01636H227.692V0.521243Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M75.2766 10.728C73.2801 9.15531 70.084 8.35547 65.7688 8.35547H56.3146C47.9438 8.35547 43.7002 11.6357 43.7002 18.1063V29.2052C43.7002 34.4536 47.9528 38.7224 53.1812 38.7224H76.6553V31.6856H54.4793C52.5366 31.6856 50.9609 30.1039 50.9609 28.1537V27.4527H74.9006C76.2793 27.4527 77.1925 27.1472 77.7117 26.5181C78.1683 25.9519 78.3922 25.0802 78.3922 23.858V18.0973C78.3922 14.844 77.3447 12.3547 75.2766 10.719V10.728ZM50.9609 18.1063C50.9609 17.4233 51.31 16.8751 52.0621 16.3628C52.9126 15.7877 54.4346 15.4821 56.4758 15.4821H65.6076C67.6936 15.4821 69.2335 15.7607 70.075 16.282C70.7913 16.7223 71.1225 17.2975 71.1225 18.0973V20.416H50.9609V18.0973V18.1063Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M271.48 10.728C269.483 9.15531 266.287 8.35547 261.972 8.35547H252.518C244.147 8.35547 239.895 11.6357 239.895 18.1063V29.2052C239.895 34.4536 244.147 38.7224 249.376 38.7224H272.85V31.6856H250.674C248.731 31.6856 247.155 30.1039 247.155 28.1537V27.4527H271.095C272.474 27.4527 273.387 27.1472 273.906 26.5181C274.363 25.9519 274.586 25.0802 274.586 23.858V18.0973C274.586 14.844 273.539 12.3547 271.471 10.719L271.48 10.728ZM247.164 20.416V18.0973C247.164 17.4143 247.513 16.8661 248.265 16.3539C249.116 15.7787 250.638 15.4731 252.679 15.4731H261.811C263.897 15.4731 265.437 15.7517 266.278 16.273C266.995 16.7133 267.326 17.2885 267.326 18.0883V20.407H247.164V20.416Z" })
+      ]
+    }
+  );
+}
+var BUTTON_LABEL = "\uD1B5\uD569 \uACC4\uC815\uC73C\uB85C \uB85C\uADF8\uC778";
+var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ product, title, description, onLogin, footerNote, className, ...rest }, ref) {
+  const hasIntro = title != null || description != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        // 폭도 높이도 부모가 준 만큼 채우고, 그 안에서 내용을 가운데 세운다.
+        // 폭에만 상하한이 있다 — 640px 을 넘으면 소개 문장의 읽기 폭이 늘어지고, 368px 아래로
+        // 내려가면 버튼(320px)이 안쪽 여백을 밀어낸다. 그 사이에서는 부모를 그대로 따른다.
+        // 부모가 높이를 주지 않으면 h-full 이 auto 로 풀려 카드가 내용 높이로 줄어든다 —
+        // 로그인 화면 밖(모달·스토리)에서도 그대로 쓸 수 있는 이유다.
+        "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",
+        // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — `break-keep` 으로 띄어쓰기에서만
+        // 끊는다. 끊을 자리가 아예 없는 긴 토큰(URL·주문번호)만 `wrap-break-word` 로 흘려보낸다.
+        "break-keep wrap-break-word",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-32", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-8", children: [
+            /* @__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 })
+          ] }),
+          hasIntro && // 소개와 보조 설명은 한 문단으로 읽힌다.
+          // `text-balance` 는 상속되므로 여기 한 번만 걸어 둘을 함께 덮는다 — 가운데 정렬에서는
+          // 마지막 줄에 한 어절만 남는 모양이 가장 눈에 띄어서, 줄 길이를 고르게 나눠야 한다.
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-4 text-balance", children: [
+            title != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-lg-medium m-0 text-(--sys-color-fg-secondary)", children: title }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-md-default m-0 text-(--sys-color-fg-tertiary)", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SButton,
+            {
+              color: "secondary",
+              size: "lg",
+              label: BUTTON_LABEL,
+              onClick: onLogin,
+              className: "w-[320px]"
+            }
+          ),
+          footerNote != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-sm-default m-0 text-(--sys-color-fg-tertiary)", children: footerNote })
+        ] })
+      ]
+    }
+  );
 });
-var SExpansionList2 = /* @__PURE__ */ withDisplayName(SExpansionListImpl, "SExpansionList");
+var SLoginCard2 = /* @__PURE__ */ withDisplayName(SLoginCardImpl, "SLoginCard");
 function SCheckbox({
   value = false,
   val,
@@ -4957,292 +6136,48 @@ function SCheckbox({
   };
   const boxBg = disabled ? "var(--cmp-checkbox-bg-disabled)" : inverse ? "transparent" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-bg-default)";
   const boxBorder = disabled ? "var(--cmp-checkbox-border-disabled)" : inverse ? "var(--cmp-checkbox-checked-border-inverse)" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-border-default)";
-  const iconColor = disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)";
-  const labelColor = disabled ? "var(--cmp-checkbox-label-disabled)" : inverse ? "var(--cmp-checkbox-label-inverse)" : "var(--cmp-checkbox-label-default)";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      className: cn(
-        "inline-flex items-center gap-[var(--cmp-checkbox-gap)] align-middle",
-        disabled ? "cursor-not-allowed" : "cursor-pointer",
-        className
-      ),
-      style,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          RCheckbox__namespace.Root,
-          {
-            checked: state2,
-            disabled,
-            onCheckedChange: handleChange,
-            className: cn(
-              "flex h-[var(--cmp-checkbox-size)] w-[var(--cmp-checkbox-size)] items-center justify-center rounded-[var(--cmp-checkbox-radius)] border-[length:var(--cmp-checkbox-borderWidth)] border-solid bg-[var(--cb-bg)] border-[color:var(--cb-border)] outline-none",
-              disabled ? "cursor-not-allowed" : "cursor-pointer",
-              !disabled && !isChecked && !inverse && "hover:border-[color:var(--cmp-checkbox-unchecked-border-hover)] hover:bg-[var(--cmp-checkbox-unchecked-bg-hover)]"
-            ),
-            style: { "--cb-bg": boxBg, "--cb-border": boxBorder },
-            children: /* @__PURE__ */ jsxRuntime.jsx(RCheckbox__namespace.Indicator, { className: "flex items-center justify-center leading-none", children: /* @__PURE__ */ jsxRuntime.jsx(
-              SIcon,
-              {
-                name: state2 === "indeterminate" ? "checkboxIndeterminate" : "checkboxCheck",
-                size: 12,
-                color: iconColor
-              }
-            ) })
-          }
-        ),
-        label && // 고스트(500) 텍스트로 너비를 고정 → 두께 400↔500 전환 시 레이아웃이 밀리지 않음
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid text-nowrap text-[12px] leading-[20px]", style: { color: labelColor }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { gridArea: "1 / 1", fontWeight: isChecked ? 500 : 400 }, children: label })
-        ] })
-      ]
-    }
-  );
-}
-
-// src/lib/floating-anim.ts
-var FLOATING_SLIDE_ANIM = [
-  "data-[state=open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
-  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
-  "data-[state=open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
-  "data-[state=open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
-].join(" ");
-var PortalContainerContext = /* @__PURE__ */ react.createContext(null);
-var InsideModalContext = /* @__PURE__ */ react.createContext(false);
-var PortalContainerProvider = PortalContainerContext.Provider;
-var InsideModalProvider = InsideModalContext.Provider;
-function usePortalContainer() {
-  return react.useContext(PortalContainerContext) ?? void 0;
-}
-function useInsideModal() {
-  return react.useContext(InsideModalContext);
-}
-
-// src/components/STag/tag.config.ts
-var TAG_SHAPES = ["square", "pill"];
-var TAG_SIZES = ["xs", "sm", "md"];
-var TAG_COLORS = [
-  "grey",
-  "red",
-  "orange",
-  "yellow",
-  "green",
-  "blue",
-  "darkblue",
-  "indigo"
-];
-var TAG_SIZE_CONFIG = {
-  xs: {
-    height: 20,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 12,
-    fontSize: 11,
-    fontWeight: 500,
-    lineHeight: 18
-  },
-  sm: {
-    height: 24,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 16,
-    fontSize: 12,
-    fontWeight: 700,
-    lineHeight: 20
-  },
-  md: {
-    height: 28,
-    paddingX: 12,
-    gap: 6,
-    radius: 8,
-    iconSize: 16,
-    fontSize: 14,
-    fontWeight: 700,
-    lineHeight: 24
-  }
-};
-var STag = /* @__PURE__ */ react.forwardRef(function STag2({
-  shape = "square",
-  size = "sm",
-  color = "grey",
-  deep = false,
-  label = "",
-  icon,
-  iconLeft = true,
-  width,
-  className,
-  style,
-  ...rest
-}, ref) {
-  const s = TAG_SIZE_CONFIG[size];
-  const contentColor = deep ? `var(--cmp-tag-${color}-deep-content, var(--cmp-tag-deep-content))` : `var(--cmp-tag-${color}-content)`;
-  const bgColor = deep ? `var(--cmp-tag-${color}-deep-bg)` : `var(--cmp-tag-${color}-bg)`;
-  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
-  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      ref,
-      "aria-label": label || "tag",
-      className: cn(
-        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
-        className
-      ),
-      style: {
-        minHeight: s.height,
-        padding: `0 ${s.paddingX}px`,
-        gap: s.gap,
-        borderRadius: shape === "pill" ? 999 : s.radius,
-        fontSize: s.fontSize,
-        fontWeight: s.fontWeight,
-        lineHeight: `${s.lineHeight}px`,
-        background: bgColor,
-        color: contentColor,
-        ...resolvedWidth != null ? { width: resolvedWidth } : {},
-        ...style
-      },
-      ...rest,
-      children: [
-        icon && iconLeft && iconNode,
-        label && // leading-none: 태그는 min-height 로 높이가 정해지고 flex 가 세로 중앙 정렬하므로
-        // 레이블에 line-height 가 필요 없다. 오히려 line-height 를 주면 브라우저가
-        // 폰트 ascent/descent 를 정수 px 로 반올림한 뒤 남는 half-leading 을 내림 처리해
-        // 베이스라인이 최대 1px 위로 밀린다(xs 에서 특히 눈에 띈다).
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center justify-center leading-none", children: label }),
-        icon && !iconLeft && iconNode
-      ]
-    }
-  );
-});
-var SIZE = {
-  xxs: { icon: 12, radius: "sm" },
-  xs: { icon: 16, radius: "sm" },
-  sm: { icon: 20, radius: "sm" },
-  md: { icon: 24, radius: "md" },
-  lg: { icon: 32, radius: "md" }
-};
-var TOOLTIP_HIDE_DELAY_MS = 100;
-function SGhostButton({
-  icon,
-  size = "sm",
-  intent = "default",
-  ariaLabel = "",
-  ariaPressed,
-  ariaExpanded,
-  tooltipText,
-  disabled = false,
-  onClick,
-  anchorClassName,
-  anchorStyle,
-  className,
-  style
-}) {
-  const portalContainer = usePortalContainer();
-  const [open, setOpen] = react.useState(false);
-  const hideTimer = react.useRef(void 0);
-  const cancelHide = () => {
-    if (hideTimer.current) {
-      clearTimeout(hideTimer.current);
-      hideTimer.current = void 0;
-    }
-  };
-  const openNow = () => {
-    cancelHide();
-    setOpen(true);
-  };
-  const startHide = () => {
-    cancelHide();
-    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
-  };
-  const s = SIZE[size];
-  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
-  const text = (tooltipText ?? "").trim();
-  const hasTooltip = text !== "";
-  const btn2 = /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      disabled,
-      "aria-disabled": disabled ? "true" : void 0,
-      "aria-label": ariaLabel.trim() || void 0,
-      "aria-pressed": ariaPressed,
-      "aria-expanded": ariaExpanded,
-      tabIndex: disabled ? -1 : void 0,
-      onClick: (e) => {
-        if (disabled) {
-          e.preventDefault();
-          return;
-        }
-        onClick?.(e);
-      },
+  const iconColor = disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)";
+  const labelColor = disabled ? "var(--cmp-checkbox-label-disabled)" : inverse ? "var(--cmp-checkbox-label-inverse)" : "var(--cmp-checkbox-label-default)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
       className: cn(
-        "group/ghost-button relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
+        "inline-flex items-center gap-[var(--cmp-checkbox-gap)] align-middle",
         disabled ? "cursor-not-allowed" : "cursor-pointer",
-        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
         className
       ),
-      style: {
-        width: `var(--cmp-ghostButton-${size}-size)`,
-        height: `var(--cmp-ghostButton-${size}-size)`,
-        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
-        ...style
-      },
+      style,
       children: [
-        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RCheckbox__namespace.Root,
           {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-5",
-            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
+            checked: state2,
+            disabled,
+            onCheckedChange: handleChange,
+            className: cn(
+              "flex h-[var(--cmp-checkbox-size)] w-[var(--cmp-checkbox-size)] items-center justify-center rounded-[var(--cmp-checkbox-radius)] border-[length:var(--cmp-checkbox-borderWidth)] border-solid bg-[var(--cb-bg)] border-[color:var(--cb-border)] outline-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer",
+              !disabled && !isChecked && !inverse && "hover:border-[color:var(--cmp-checkbox-unchecked-border-hover)] hover:bg-[var(--cmp-checkbox-unchecked-bg-hover)]"
+            ),
+            style: { "--cb-bg": boxBg, "--cb-border": boxBorder },
+            children: /* @__PURE__ */ jsxRuntime.jsx(RCheckbox__namespace.Indicator, { className: "flex items-center justify-center leading-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+              SIcon,
+              {
+                name: state2 === "indeterminate" ? "checkboxIndeterminate" : "checkboxCheck",
+                size: 12,
+                color: iconColor
+              }
+            ) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+        label && // 고스트(500) 텍스트로 너비를 고정 → 두께 400↔500 전환 시 레이아웃이 밀리지 않음
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid text-nowrap text-[12px] leading-[20px]", style: { color: labelColor }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { gridArea: "1 / 1", fontWeight: isChecked ? 500 : 400 }, children: label })
+        ] })
       ]
     }
   );
-  if (!hasTooltip) return btn2;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-flex", anchorClassName),
-        style: anchorStyle,
-        onMouseEnter: openNow,
-        onMouseLeave: startHide,
-        onFocus: openNow,
-        onBlur: startHide,
-        children: btn2
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover12__namespace.Content,
-      {
-        side: "top",
-        sideOffset: 4,
-        className: cn("z-50", FLOATING_SLIDE_ANIM),
-        "aria-hidden": true,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onMouseEnter: cancelHide,
-        onMouseLeave: startHide,
-        children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
-      }
-    ) })
-  ] });
 }
 var TREE_LABEL_TYPOGRAPHY = {
   sm: {
@@ -5430,443 +6365,207 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
         "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)",
-        !node.disabled && "hover:bg-(--cmp-tree-item-bg-hover)",
-        node.disabled && "cursor-not-allowed opacity-60",
-        !node.disabled && hasChildren && "cursor-pointer",
-        className
-      ),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TreeConnector,
-          {
-            guideline,
-            size,
-            depth,
-            hasChildren,
-            isLast: last,
-            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,
-              disabled: node.disabled,
-              onClick: (event) => {
-                event.stopPropagation();
-                if (node.disabled) return;
-                onToggle?.(node, event);
-              }
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-(--cmp-tree-item-arrow-icon) shrink-0", "aria-hidden": "true" }),
-          leadingNode,
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              onClick: (event) => event.stopPropagation(),
-              className: "flex shrink-0",
-              "aria-hidden": node.disabled ? "true" : void 0,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                SCheckbox,
-                {
-                  value: checkboxValue,
-                  disabled: node.disabled,
-                  onValueChange: () => handleSelect()
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              onClick: (event) => {
-                if (!selectable) return;
-                event.stopPropagation();
-                if (!node.disabled && selectable) onTreeSelect?.(node, event);
-              },
-              className: cn(
-                "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
-                labelTypo,
-                node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
-              ),
-              children: node.label
-            }
-          ),
-          trailingNode
-        ] })
-      ]
-    }
-  );
-});
-var STreeItem2 = /* @__PURE__ */ withDisplayName(STreeItemImpl, "STreeItem");
-var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
-  items,
-  value,
-  defaultValue,
-  expandedIds,
-  defaultExpandedIds,
-  selectable = true,
-  size = "sm",
-  showSelectAll = false,
-  cascadeSelection = true,
-  guideline = true,
-  border = true,
-  leading,
-  trailing,
-  onValueChange,
-  onExpandedChange,
-  className,
-  ...rest
-}, ref) {
-  const [internalValue, setInternalValue] = react.useState(defaultValue ?? []);
-  const [internalExpandedIds, setInternalExpandedIds] = react.useState(
-    defaultExpandedIds ?? items.filter((item4) => item4.children?.length).map((item4) => item4.id)
-  );
-  const currentValue = value ?? internalValue;
-  const currentExpandedIds = expandedIds ?? internalExpandedIds;
-  const selectedSet = react.useMemo(() => toSelectedSet(currentValue), [currentValue]);
-  const expandedSet = react.useMemo(() => new Set(currentExpandedIds), [currentExpandedIds]);
-  const selectableIds = react.useMemo(() => items.flatMap(collectSelectableIds), [items]);
-  const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selectedSet.has(id));
-  const someSelected = selectableIds.some((id) => selectedSet.has(id));
-  const allIndeterminate = someSelected && !allSelected;
-  const showAllItem = selectable && showSelectAll;
-  const updateExpanded = (node) => {
-    const next = new Set(currentExpandedIds);
-    if (next.has(node.id)) next.delete(node.id);
-    else next.add(node.id);
-    const nextValue = Array.from(next);
-    if (expandedIds === void 0) setInternalExpandedIds(nextValue);
-    onExpandedChange?.(nextValue, node);
-  };
-  const updateSelected = (node) => {
-    if (node.disabled) return;
-    const targetIds = cascadeSelection ? collectSelectableIds(node) : [node.id];
-    const everySelected = getSelectionState(node, selectedSet, cascadeSelection).selected;
-    const next = new Set(selectedSet);
-    targetIds.forEach((id) => {
-      if (everySelected) next.delete(id);
-      else next.add(id);
-    });
-    const orderedIds = collectIds(items).filter((id) => next.has(id));
-    if (value === void 0) setInternalValue(orderedIds);
-    onValueChange?.(orderedIds, node);
-  };
-  const updateAllSelected = (event) => {
-    event?.stopPropagation();
-    if (selectableIds.length === 0) return;
-    const next = new Set(selectedSet);
-    selectableIds.forEach((id) => {
-      if (allSelected) next.delete(id);
-      else next.add(id);
-    });
-    const orderedIds = collectIds(items).filter((id) => next.has(id));
-    if (value === void 0) setInternalValue(orderedIds);
-    onValueChange?.(orderedIds, TREE_ALL_NODE);
-  };
-  const renderNodes = (nodes, depth = 1, ancestorLast = []) => nodes.map((node, index) => {
-    const isLast = index === nodes.length - 1;
-    const isExpanded = expandedSet.has(node.id);
-    const { selected, indeterminate } = getSelectionState(node, selectedSet, cascadeSelection);
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        STreeItem2,
-        {
-          node,
-          depth,
-          last: isLast,
-          ancestorLast,
-          expanded: isExpanded,
-          selected,
-          indeterminate,
-          selectable,
-          size,
-          guideline,
-          border,
-          leading,
-          trailing,
-          onToggle: updateExpanded,
-          onTreeSelect: updateSelected
-        }
-      ),
-      node.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "aria-hidden": !isExpanded,
-          className: cn(
-            "grid w-full overflow-hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
-            isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: renderNodes(node.children, depth + 1, [...ancestorLast, isLast]) })
-        }
-      ) : null
-    ] }, node.id);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      role: "tree",
-      className: cn("flex w-full flex-col items-start bg-(--cmp-tree-item-bg-default)", className),
+        !node.disabled && "hover:bg-(--cmp-tree-item-bg-hover)",
+        node.disabled && "cursor-not-allowed opacity-60",
+        !node.disabled && hasChildren && "cursor-pointer",
+        className
+      ),
       ...rest,
       children: [
-        showAllItem && /* @__PURE__ */ jsxRuntime.jsx(
-          STreeAllItem,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TreeConnector,
           {
-            selected: allSelected,
-            indeterminate: allIndeterminate,
-            border,
+            guideline,
             size,
-            onSelect: updateAllSelected
+            depth,
+            hasChildren,
+            isLast: last,
+            ancestorLast
           }
         ),
-        renderNodes(items)
+        /* @__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,
+              disabled: node.disabled,
+              onClick: (event) => {
+                event.stopPropagation();
+                if (node.disabled) return;
+                onToggle?.(node, event);
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-(--cmp-tree-item-arrow-icon) shrink-0", "aria-hidden": "true" }),
+          leadingNode,
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              onClick: (event) => event.stopPropagation(),
+              className: "flex shrink-0",
+              "aria-hidden": node.disabled ? "true" : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SCheckbox,
+                {
+                  value: checkboxValue,
+                  disabled: node.disabled,
+                  onValueChange: () => handleSelect()
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              onClick: (event) => {
+                if (!selectable) return;
+                event.stopPropagation();
+                if (!node.disabled && selectable) onTreeSelect?.(node, event);
+              },
+              className: cn(
+                "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+                labelTypo,
+                node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
+              ),
+              children: node.label
+            }
+          ),
+          trailingNode
+        ] })
       ]
     }
   );
 });
-var STree2 = /* @__PURE__ */ withDisplayName(STreeImpl, "STree");
-
-// src/lib/sanitize-inline-html.ts
-var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
-var ALLOWED_ATTRS_BY_TAG = {
-  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
-};
-var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
-var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
-var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
-  "SCRIPT",
-  "STYLE",
-  "IFRAME",
-  "OBJECT",
-  "EMBED",
-  "META",
-  "LINK",
-  "BASE",
-  "NOSCRIPT",
-  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
-  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
-  "SVG",
-  "MATH",
-  "TEMPLATE"
-]);
-var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-var sanitizeNode = (node) => {
-  if (node.nodeType === Node.COMMENT_NODE) {
-    node.remove();
-    return;
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) return;
-  const element = node;
-  const tagName = element.tagName.toUpperCase();
-  if (DROP_CONTENT_TAGS.has(tagName)) {
-    element.remove();
-    return;
-  }
-  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
-  if (ALLOWED_INLINE_TAGS.has(tagName)) {
-    if (element.hasAttribute("className")) {
-      const val = element.getAttribute("className");
-      element.removeAttribute("className");
-      if (!element.hasAttribute("class")) element.setAttribute("class", val);
-    }
-    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
-    Array.from(element.attributes).forEach((attr) => {
-      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
-    });
-    if (tagName === "A") {
-      const href = element.getAttribute("href");
-      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
-      if (element.hasAttribute("target")) {
-        element.setAttribute("rel", "noopener noreferrer");
-      }
-    }
-    return;
-  }
-  const parent = element.parentNode;
-  if (parent == null) return;
-  while (element.firstChild) parent.insertBefore(element.firstChild, element);
-  parent.removeChild(element);
-};
-var sanitizeInlineHtml = (value) => {
-  if (typeof document === "undefined") return escapeHtml(value);
-  const template = document.createElement("template");
-  template.innerHTML = value;
-  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
-  return template.innerHTML;
-};
-var HIDE_DELAY_MS = 100;
-function useBody(content, message = []) {
-  if (content != null) return content;
-  if (message.length === 0) return null;
-  const singleLine = message.length === 1;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: singleLine ? "leading-[24px]" : void 0,
-      dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(line) }
-    },
-    i
-  )) });
-}
-var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
-  content,
-  message = [],
-  open: openProp,
-  onOpenChange,
-  trigger = "hover",
-  placement = "top",
-  sideOffset = 8,
-  tooltipType = "default",
-  showClose = false,
-  disabled = false,
-  children,
-  icon = "helpOutline",
-  iconSize = 12,
-  color = "#01BB4B",
-  ariaLabel,
+var STreeItem2 = /* @__PURE__ */ withDisplayName(STreeItemImpl, "STreeItem");
+var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
+  items,
+  value,
+  defaultValue,
+  expandedIds,
+  defaultExpandedIds,
+  selectable = true,
+  size = "sm",
+  showSelectAll = false,
+  cascadeSelection = true,
+  guideline = true,
+  border = true,
+  leading,
+  trailing,
+  onValueChange,
+  onExpandedChange,
   className,
-  triggerClassName,
-  style,
-  contentProps
+  ...rest
 }, ref) {
-  const portalContainer = usePortalContainer();
-  const [internalOpen, setInternalOpen] = react.useState(false);
-  const isControlled = openProp !== void 0;
-  const open = isControlled ? openProp : internalOpen;
-  const hideTimer = react.useRef(void 0);
-  const cancelHide = react.useCallback(() => {
-    if (hideTimer.current) {
-      clearTimeout(hideTimer.current);
-      hideTimer.current = void 0;
-    }
-  }, []);
-  const setOpenState = react.useCallback(
-    (next) => {
-      if (!isControlled) setInternalOpen(next);
-      onOpenChange?.(next);
-    },
-    [isControlled, onOpenChange]
-  );
-  const openNow = () => {
-    cancelHide();
-    setOpenState(true);
-  };
-  const startHide = () => {
-    if (showClose) return;
-    cancelHide();
-    hideTimer.current = setTimeout(() => setOpenState(false), HIDE_DELAY_MS);
-  };
-  react.useImperativeHandle(
-    ref,
-    () => ({
-      show: () => {
-        cancelHide();
-        setOpenState(true);
-      },
-      hide: () => {
-        cancelHide();
-        setOpenState(false);
-      }
-    }),
-    [cancelHide, setOpenState]
-  );
-  const isHover = trigger === "hover";
-  const isNone = trigger === "none";
-  if (isNone && children == null && typeof console !== "undefined") {
-    console.warn(
-      '[STooltip] trigger="none" \uC740 \uC704\uCE58 \uAE30\uC900\uC774 \uB420 children \uC774 \uD544\uC694\uD569\uB2C8\uB2E4. \uC544\uC774\uCF58 \uD2B8\uB9AC\uAC70\uB85C \uD3F4\uBC31\uD569\uB2C8\uB2E4.'
-    );
-  }
-  const body = useBody(content, message);
-  const bg = `var(--cmp-tooltip-${tooltipType}-bg)`;
-  const fg = `var(--cmp-tooltip-${tooltipType}-content)`;
-  const triggerNode = children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex cursor-pointer", triggerClassName), "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
-  if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
-  const {
-    className: contentPropsClassName,
-    style: contentPropsStyle,
-    ...restContentProps
-  } = contentProps ?? {};
-  const contentClass = cn(
-    "z-50 w-fit max-w-[var(--radix-popover-content-available-width)] rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
-    FLOATING_SLIDE_ANIM,
-    className,
-    contentPropsClassName
+  const [internalValue, setInternalValue] = react.useState(defaultValue ?? []);
+  const [internalExpandedIds, setInternalExpandedIds] = react.useState(
+    defaultExpandedIds ?? items.filter((item4) => item4.children?.length).map((item4) => item4.id)
   );
-  const contentStyle = {
-    background: bg,
-    color: fg,
-    fontWeight: tooltipType === "default" ? 500 : 700,
-    ...style,
-    ...contentPropsStyle
+  const currentValue = value ?? internalValue;
+  const currentExpandedIds = expandedIds ?? internalExpandedIds;
+  const selectedSet = react.useMemo(() => toSelectedSet(currentValue), [currentValue]);
+  const expandedSet = react.useMemo(() => new Set(currentExpandedIds), [currentExpandedIds]);
+  const selectableIds = react.useMemo(() => items.flatMap(collectSelectableIds), [items]);
+  const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selectedSet.has(id));
+  const someSelected = selectableIds.some((id) => selectedSet.has(id));
+  const allIndeterminate = someSelected && !allSelected;
+  const showAllItem = selectable && showSelectAll;
+  const updateExpanded = (node) => {
+    const next = new Set(currentExpandedIds);
+    if (next.has(node.id)) next.delete(node.id);
+    else next.add(node.id);
+    const nextValue = Array.from(next);
+    if (expandedIds === void 0) setInternalExpandedIds(nextValue);
+    onExpandedChange?.(nextValue, node);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpenState, children: [
-    isNone ? (
-      // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
-      // mouse/focus 핸들러가 없으므로 showClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: triggerNode })
-    ) : isHover ? (
-      // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
+  const updateSelected = (node) => {
+    if (node.disabled) return;
+    const targetIds = cascadeSelection ? collectSelectableIds(node) : [node.id];
+    const everySelected = getSelectionState(node, selectedSet, cascadeSelection).selected;
+    const next = new Set(selectedSet);
+    targetIds.forEach((id) => {
+      if (everySelected) next.delete(id);
+      else next.add(id);
+    });
+    const orderedIds = collectIds(items).filter((id) => next.has(id));
+    if (value === void 0) setInternalValue(orderedIds);
+    onValueChange?.(orderedIds, node);
+  };
+  const updateAllSelected = (event) => {
+    event?.stopPropagation();
+    if (selectableIds.length === 0) return;
+    const next = new Set(selectedSet);
+    selectableIds.forEach((id) => {
+      if (allSelected) next.delete(id);
+      else next.add(id);
+    });
+    const orderedIds = collectIds(items).filter((id) => next.has(id));
+    if (value === void 0) setInternalValue(orderedIds);
+    onValueChange?.(orderedIds, TREE_ALL_NODE);
+  };
+  const renderNodes = (nodes, depth = 1, ancestorLast = []) => nodes.map((node, index) => {
+    const isLast = index === nodes.length - 1;
+    const isExpanded = expandedSet.has(node.id);
+    const { selected, indeterminate } = getSelectionState(node, selectedSet, cascadeSelection);
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        STreeItem2,
         {
-          className: "inline-flex",
-          onMouseEnter: openNow,
-          onMouseLeave: startHide,
-          onFocus: openNow,
-          onBlur: startHide,
-          children: triggerNode
+          node,
+          depth,
+          last: isLast,
+          ancestorLast,
+          expanded: isExpanded,
+          selected,
+          indeterminate,
+          selectable,
+          size,
+          guideline,
+          border,
+          leading,
+          trailing,
+          onToggle: updateExpanded,
+          onTreeSelect: updateSelected
         }
-      ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover12__namespace.Content,
-      {
-        side: placement,
-        sideOffset,
-        className: contentClass,
-        style: contentStyle,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onInteractOutside: (e) => {
-          if (showClose || isNone) e.preventDefault();
-        },
-        onEscapeKeyDown: (e) => {
-          if (showClose || isNone) e.preventDefault();
-        },
-        onMouseEnter: isHover ? cancelHide : void 0,
-        onMouseLeave: isHover ? startHide : void 0,
-        ...restContentProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
-            showClose && !isNone && /* @__PURE__ */ jsxRuntime.jsx(
-              SGhostButton,
-              {
-                icon: "close",
-                size: "xs",
-                intent: tooltipType === "default" ? "inverse" : "default",
-                ariaLabel: "\uB2EB\uAE30",
-                className: "shrink-0",
-                onClick: () => {
-                  cancelHide();
-                  setOpenState(false);
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
-        ]
-      }
-    ) })
-  ] });
+      ),
+      node.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": !isExpanded,
+          className: cn(
+            "grid w-full overflow-hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+            isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: renderNodes(node.children, depth + 1, [...ancestorLast, isLast]) })
+        }
+      ) : null
+    ] }, node.id);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "tree",
+      className: cn("flex w-full flex-col items-start bg-(--cmp-tree-item-bg-default)", className),
+      ...rest,
+      children: [
+        showAllItem && /* @__PURE__ */ jsxRuntime.jsx(
+          STreeAllItem,
+          {
+            selected: allSelected,
+            indeterminate: allIndeterminate,
+            border,
+            size,
+            onSelect: updateAllSelected
+          }
+        ),
+        renderNodes(items)
+      ]
+    }
+  );
 });
-var STooltip2 = /* @__PURE__ */ withDisplayName(STooltipImpl, "STooltip");
+var STree2 = /* @__PURE__ */ withDisplayName(STreeImpl, "STree");
 var BODY_PADDING_CLASS = {
   default: "p-(--sys-space-panel-padding-default)",
   wide: "p-(--sys-space-panel-padding-wide)",
@@ -11670,931 +12369,704 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                 ]
               },
               `${groupKey}-${group.startIndex}`
-            );
-          })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "list",
-      "aria-label": ariaLabel,
-      className: cn("inline-flex items-center", className),
-      style: {
-        gap: STEPPER_LAYOUT.containerGap,
-        fontSize: config.fontSize,
-        lineHeight: config.lineHeight,
-        ...style
-      },
-      children: items.map((item4, index) => {
-        const state2 = getState(item4, index);
-        const content = isClickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item4, index) }) : renderStepContent(item4, index);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: "inline-flex items-center",
-            style: { gap: STEPPER_LAYOUT.containerGap },
-            children: [
-              content,
-              index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: "inline-flex h-px shrink-0 items-center",
-                  style: { width: STEPPER_LAYOUT.dashWidth, color: STEPPER_COLORS.dash },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "svg",
-                    {
-                      width: "20",
-                      height: "1",
-                      viewBox: "0 0 20 1",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1.6", height: "1", fill: "currentColor" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", width: "3.3", height: "1", fill: "currentColor" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "currentColor" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "currentColor" })
-                      ]
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          getItemValue(item4, index)
-        );
-      })
-    }
-  );
-});
-
-// src/lib/date.ts
-function todayStr() {
-  const d = /* @__PURE__ */ new Date();
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-}
-function formatDate(year, month, day) {
-  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-}
-function calcYearMonth(year, month, dir) {
-  if (dir === "prev")
-    return month === 1 ? { year: year - 1, month: 12 } : { year, month: month - 1 };
-  return month === 12 ? { year: year + 1, month: 1 } : { year, month: month + 1 };
-}
-function monthCells(year, month) {
-  const firstDayIndex = new Date(year, month - 1, 1).getDay();
-  const daysInCurrent = new Date(year, month, 0).getDate();
-  const prev = calcYearMonth(year, month, "prev");
-  const daysInPrev = new Date(prev.year, prev.month, 0).getDate();
-  const next = calcYearMonth(year, month, "next");
-  const cells = [];
-  for (let i = firstDayIndex - 1; i >= 0; i--) {
-    const day = daysInPrev - i;
-    cells.push({ date: formatDate(prev.year, prev.month, day), day, inCurrentMonth: false });
-  }
-  for (let day = 1; day <= daysInCurrent; day++) {
-    cells.push({ date: formatDate(year, month, day), day, inCurrentMonth: true });
-  }
-  const remaining = (7 - cells.length % 7) % 7;
-  for (let day = 1; day <= remaining; day++) {
-    cells.push({ date: formatDate(next.year, next.month, day), day, inCurrentMonth: false });
+            );
+          })
+        ]
+      }
+    );
   }
-  return cells;
-}
-var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
-
-// src/components/SCalendarBoard/calendarBoard.config.ts
-var CALENDAR_BOARD_EVENT_COLORS = [
-  "default",
-  "blue",
-  "oceanBlue",
-  "lightBlue",
-  "green",
-  "yellow",
-  "orange",
-  "red",
-  "white"
-];
-var BG = (name) => `var(--cmp-calendarBoard-eventButton-bg-${name})`;
-var CALENDAR_BOARD_EVENT_PRESETS = {
-  default: { bg: BG("default"), dot: "indigo" },
-  blue: { bg: BG("blue"), dot: "blue" },
-  oceanBlue: { bg: BG("oceanBlue"), dot: "darkblue" },
-  lightBlue: { bg: BG("lightBlue"), dot: "lightblue" },
-  green: { bg: BG("green"), dot: "green" },
-  yellow: { bg: BG("yellow"), dot: "yellow" },
-  orange: { bg: BG("orange"), dot: "orange" },
-  red: { bg: BG("red"), dot: "red" },
-  white: { bg: BG("white"), dot: "grey" }
-};
-var CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
-var CALENDAR_BOARD_DAY_COLORS = [
-  "default",
-  "danger",
-  "accent",
-  "complete",
-  "dim"
-];
-var CALENDAR_BOARD_DAY_BG = {
-  default: "var(--cmp-calendarBoard-dayCard-bg)",
-  danger: "var(--color-red-30)",
-  accent: "var(--color-brilliantblue-40)",
-  complete: "var(--color-green-45)",
-  dim: "var(--color-grey-25)"
-};
-function CalendarEventButton({
-  event,
-  onSelect,
-  className
-}) {
-  const preset = CALENDAR_BOARD_EVENT_PRESETS[event.color ?? "default"];
-  const dot = event.dotColor ?? preset.dot;
-  const disabled = event.disabled === true;
-  const hasDescription = event.description != null && event.description !== "";
-  const hasValue = event.value != null && event.value !== "";
-  const title = [event.label.replace(/<[^>]*>/g, ""), event.description, event.value].filter((v) => v != null && v !== "").join(" ") || void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      disabled,
-      title,
-      className: cn(
-        // hover 는 배경 위에 8% 오버레이를 얹는다 — 프리셋 배경이 9종이라 색마다 hover 색을 두지 않는다.
-        "group relative flex w-full min-w-0 items-center overflow-hidden text-left",
-        "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
-        "gap-(--cmp-calendarBoard-eventButton-inline-gap) px-(--cmp-calendarBoard-item-paddingX)",
-        "bg-(--ceb-bg) text-(--cmp-calendarBoard-eventButton-text-color-default)",
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-        className
-      ),
-      style: { "--ceb-bg": preset.bg },
-      onClick: (e) => {
-        if (disabled) return;
-        onSelect?.(event, e);
-      },
-      children: [
-        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-eventButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-eventButton-hover-overlay-opacity)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(SBadge, { "aria-hidden": true, color: dot, className: "shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-(--cmp-calendarBoard-eventButton-label-gap)", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-sm-default min-w-0 flex-1 truncate", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: cn(
-                  "typo-body-sm-semibold",
-                  hasDescription && "me-(--cmp-calendarBoard-eventButton-label-gap)"
-                ),
-                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(event.label) }
-              }
-            ),
-            hasDescription && event.description
-          ] }),
-          hasValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-eventButton-label-gap)", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "typo-body-sm-default text-(--cmp-calendarBoard-eventButton-text-color-separator)",
-                children: "/"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default whitespace-nowrap", children: event.value })
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ref,
-      type: "button",
-      className: cn(
-        "group relative flex w-full min-w-0 cursor-pointer items-center overflow-hidden text-left",
-        "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
-        "gap-(--cmp-calendarBoard-moreButton-gap) px-(--cmp-calendarBoard-item-paddingX)",
-        "bg-(--cmp-calendarBoard-moreButton-bg)",
-        className
-      ),
-      onClick,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-moreButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-moreButton-hover-overlay-opacity)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-sm-semibold shrink-0 text-(--cmp-calendarBoard-moreButton-count-color)", children: [
-          count,
-          "\uAC1C"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default min-w-0 truncate text-(--cmp-calendarBoard-moreButton-label-color)", children: label })
-      ]
-    }
-  );
-});
-var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2({
-  date,
-  day,
-  inCurrentMonth,
-  isToday,
-  isSelected,
-  selectable,
-  color,
-  events,
-  body,
-  hiddenCount,
-  isOpen,
-  moreLabel,
-  onDaySelect,
-  onEventClick,
-  onOpenEvents,
-  ...rest
-}, ref) {
-  const hasEvents = events.length + hiddenCount > 0;
-  const interactive = selectable || hasEvents;
-  const activate = () => {
-    if (hasEvents) onOpenEvents?.();
-    if (selectable) onDaySelect?.(date);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ...rest,
-      ref,
-      role: "gridcell",
-      "data-date": date,
-      "aria-selected": selectable ? isSelected : void 0,
-      "aria-current": isToday ? "date" : void 0,
-      "aria-haspopup": hasEvents ? "dialog" : void 0,
-      "aria-expanded": hasEvents ? isOpen : void 0,
-      tabIndex: interactive ? 0 : void 0,
-      onClick: interactive ? activate : void 0,
-      onKeyDown: interactive ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          activate();
-        }
-      } : void 0,
-      className: cn(
-        "relative flex min-h-(--cmp-calendarBoard-dayCard-minHeight) min-w-(--cmp-calendarBoard-dayCard-minWidth) flex-col bg-(--cdc-bg) px-(--cmp-calendarBoard-dayCard-paddingX) outline-none",
-        interactive && "cursor-pointer"
-      ),
-      style: { ...rest.style, "--cdc-bg": CALENDAR_BOARD_DAY_BG[color] },
-      children: [
-        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-[1px] rounded-(--cmp-calendarBoard-dayCard-focus-border-radius) border-(length:--cmp-calendarBoard-dayCard-focus-border-width) border-solid border-(--cmp-calendarBoard-dayCard-focus-border-color)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 pt-(--cmp-calendarBoard-dayCard-header-paddingTop) pb-(--cmp-calendarBoard-dayCard-header-paddingBottom)", children: /* @__PURE__ */ jsxRuntime.jsx(
+      role: "list",
+      "aria-label": ariaLabel,
+      className: cn("inline-flex items-center", className),
+      style: {
+        gap: STEPPER_LAYOUT.containerGap,
+        fontSize: config.fontSize,
+        lineHeight: config.lineHeight,
+        ...style
+      },
+      children: items.map((item4, index) => {
+        const state2 = getState(item4, index);
+        const content = isClickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item4, index) }) : renderStepContent(item4, index);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
-            className: cn(
-              "inline-flex size-(--cmp-calendarBoard-daySequence-size) items-center justify-center rounded-(--cmp-calendarBoard-daySequence-radius)",
-              isToday ? "typo-body-md-bold bg-(--cmp-calendarBoard-daySequence-bg-today) text-(--cmp-calendarBoard-daySequence-text-today)" : cn(
-                "typo-body-md-medium",
-                inCurrentMonth ? "text-(--cmp-calendarBoard-daySequence-text-default)" : "text-(--cmp-calendarBoard-daySequence-text-otherMonth)"
-              ),
-              // 오늘이 아니면서 선택된 날은 테두리 원으로 표시한다 (오늘은 이미 채운 원이라 겹치지 않는다).
-              // 굵기는 1px 로 고정한다 — 칸을 감싸는 focus 테두리(2px)와 달리 얇은 원이고, 대응 토큰이 없다.
-              isSelected && !isToday && "border border-solid border-(--cmp-calendarBoard-daySequence-border-selected)"
-            ),
-            children: day
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "flex min-h-0 flex-col gap-(--cmp-calendarBoard-dayCard-grid-gap) pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)",
-              // 슬롯은 남는 세로를 다 갖는다 — 안에서 h-full 로 칸을 채울 수 있어야 한다.
-              body != null && "flex-1"
-            ),
+            className: "inline-flex items-center",
+            style: { gap: STEPPER_LAYOUT.containerGap },
             children: [
-              body,
-              body == null && events.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                CalendarEventButton,
-                {
-                  event,
-                  onSelect: (ev, e) => {
-                    e.stopPropagation();
-                    onEventClick?.(ev, e);
-                  }
-                },
-                event.id ?? `${event.date}-${i}`
-              )),
-              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                CalendarMoreButton,
+              content,
+              index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
                 {
-                  count: hiddenCount,
-                  label: moreLabel,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onOpenEvents?.();
-                  }
+                  "aria-hidden": true,
+                  className: "inline-flex h-px shrink-0 items-center",
+                  style: { width: STEPPER_LAYOUT.dashWidth, color: STEPPER_COLORS.dash },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "1",
+                      viewBox: "0 0 20 1",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1.6", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "currentColor" })
+                      ]
+                    }
+                  )
                 }
               )
             ]
-          }
-        )
-      ]
-    }
-  );
-});
-var MAX_HEIGHT = 480;
-var MAX_WIDTH = "calc(100vw - 16px)";
-function CalendarDayEventListBox({
-  date,
-  events,
-  onEventClick,
-  minWidth,
-  minHeight,
-  onClose,
-  closeLabel = "\uB2EB\uAE30"
-}) {
-  const [y, m, d] = date.split("-").map(Number);
-  const weekday = WEEK_LABELS[new Date(y, m - 1, d).getDay()];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "flex w-max flex-col overflow-hidden rounded-(--cmp-calendarBoard-radius) bg-(--cmp-calendarBoard-bg) shadow-(--shadow-overlay)",
-      style: { minWidth, maxWidth: MAX_WIDTH, minHeight, maxHeight: MAX_HEIGHT },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-dayEvent-header-gap) px-(--cmp-calendarBoard-dayEvent-header-paddingX) py-(--cmp-calendarBoard-dayEvent-header-paddingY)", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-heading-md text-(--cmp-calendarBoard-header-content-color)", children: [
-            d,
-            "\uC77C"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-lg-default flex-1 text-(--cmp-calendarBoard-header-content-color)", children: [
-            "(",
-            weekday,
-            ")"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "close",
-              size: "xs",
-              ariaLabel: closeLabel,
-              className: "shrink-0",
-              onClick: onClose
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(SScrollArea, { axis: "vertical", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-(--cmp-calendarBoard-dayEvent-body-gap) px-(--cmp-calendarBoard-dayEvent-body-paddingX) pb-(--cmp-calendarBoard-dayEvent-body-paddingBottom)", children: events.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          CalendarEventButton,
-          {
-            event,
-            onSelect: onEventClick
           },
-          event.id ?? `${event.date}-${i}`
-        )) }) })
-      ]
+          getItemValue(item4, index)
+        );
+      })
     }
   );
+});
+
+// src/lib/date.ts
+function todayStr() {
+  const d = /* @__PURE__ */ new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
-var DAY_EVENT_OUTDENT = 16;
-var VIEWPORT_PADDING2 = 8;
-function shiftIntoView(desired, size, viewport) {
-  const max = Math.max(viewport - size - VIEWPORT_PADDING2, VIEWPORT_PADDING2);
-  return Math.min(Math.max(desired, VIEWPORT_PADDING2), max) - desired;
+function formatDate(year, month, day) {
+  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
 }
-function measureRowCapacity(cell) {
-  const cs = getComputedStyle(cell);
-  const v = (name) => Number.parseFloat(cs.getPropertyValue(name)) || 0;
-  const gap = v("--cmp-calendarBoard-dayCard-grid-gap");
-  const row = v("--cmp-calendarBoard-item-height") + gap;
-  if (row <= 0) return null;
-  const header = v("--cmp-calendarBoard-dayCard-header-paddingTop") + v("--cmp-calendarBoard-daySequence-size") + v("--cmp-calendarBoard-dayCard-header-paddingBottom");
-  const free = cell.getBoundingClientRect().height - header - v("--cmp-calendarBoard-dayCard-grid-paddingBottom") + gap;
-  if (free <= 0) return null;
-  return Math.max(1, Math.floor(free / row));
+function calcYearMonth(year, month, dir) {
+  if (dir === "prev")
+    return month === 1 ? { year: year - 1, month: 12 } : { year, month: month - 1 };
+  return month === 12 ? { year: year + 1, month: 1 } : { year, month: month + 1 };
 }
-function SCalendarBoard({
-  year,
-  month,
-  defaultYear,
-  defaultMonth,
-  onViewChange,
-  selectable = false,
-  value,
-  onValueChange,
-  events,
-  dayColors,
-  dayContent,
-  onEventClick,
-  onMoreClick,
-  todayLabel = "\uC624\uB298",
-  moreLabel,
-  headerRight,
-  className,
-  style
-}) {
-  const today = todayStr();
-  const [ty, tm] = [Number(today.slice(0, 4)), Number(today.slice(5, 7))];
-  const [innerView, setInnerView] = react.useState(() => ({
-    year: defaultYear ?? ty,
-    month: defaultMonth ?? tm
-  }));
-  const controlled = year != null && month != null;
-  const view = controlled ? { year, month } : innerView;
-  const [openDate, setOpenDate] = react.useState(null);
-  const [placement, setPlacement] = react.useState({ cellWidth: 0, cellHeight: 0, side: 0, align: 0 });
-  const [panelEl, setPanelEl] = react.useState(null);
-  const portalContainer = usePortalContainer();
-  const setView = react.useCallback(
-    (next) => {
-      setOpenDate(null);
-      if (!controlled) setInnerView(next);
-      onViewChange?.(next);
-    },
-    [controlled, onViewChange]
-  );
-  const cells = react.useMemo(() => monthCells(view.year, view.month), [view.year, view.month]);
-  const rowCount = cells.length / 7;
-  const gridRef = react.useRef(null);
-  const [rowCapacity, setRowCapacity] = react.useState(CALENDAR_BOARD_MAX_VISIBLE_EVENTS);
-  react.useEffect(() => {
-    const grid = gridRef.current;
-    if (grid == null || typeof ResizeObserver === "undefined") return;
-    const cell = grid.querySelector('[role="gridcell"]');
-    if (cell == null) return;
-    const apply = () => {
-      const next = measureRowCapacity(cell);
-      if (next != null) setRowCapacity(next);
-    };
-    apply();
-    const observer = new ResizeObserver(apply);
-    observer.observe(cell);
-    return () => observer.disconnect();
-  }, [rowCount]);
-  const eventMap = react.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    (events ?? []).forEach((event) => {
-      const list = map.get(event.date);
-      if (list) list.push(event);
-      else map.set(event.date, [event]);
-    });
-    return map;
-  }, [events]);
-  const openEvents = openDate ? eventMap.get(openDate) ?? [] : [];
-  react.useLayoutEffect(() => {
-    if (openDate == null || panelEl == null) return;
-    const cell = gridRef.current?.querySelector(`[data-date="${openDate}"]`);
-    if (cell == null) return;
-    const adjust = () => {
-      const cellRect = cell.getBoundingClientRect();
-      const panelRect = panelEl.getBoundingClientRect();
-      const next = {
-        cellWidth: cellRect.width,
-        cellHeight: cellRect.height,
-        side: -(cellRect.height + DAY_EVENT_OUTDENT) + shiftIntoView(cellRect.top - DAY_EVENT_OUTDENT, panelRect.height, window.innerHeight),
-        align: -DAY_EVENT_OUTDENT + shiftIntoView(cellRect.left - DAY_EVENT_OUTDENT, panelRect.width, window.innerWidth)
-      };
-      setPlacement(
-        (prev) => prev.cellWidth === next.cellWidth && prev.cellHeight === next.cellHeight && prev.side === next.side && prev.align === next.align ? prev : next
-      );
-    };
-    adjust();
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(adjust);
-    observer?.observe(panelEl);
-    window.addEventListener("scroll", adjust, true);
-    window.addEventListener("resize", adjust);
-    return () => {
-      observer?.disconnect();
-      window.removeEventListener("scroll", adjust, true);
-      window.removeEventListener("resize", adjust);
-    };
-  }, [openDate, panelEl]);
-  const columns = "repeat(7, minmax(var(--cmp-calendarBoard-dayCard-minWidth), 1fr))";
-  const openEventList = (date, list) => {
-    if (onMoreClick) {
-      onMoreClick({ date, events: list });
-      return;
-    }
-    setOpenDate((prev) => prev === date ? null : date);
-  };
+function monthCells(year, month) {
+  const firstDayIndex = new Date(year, month - 1, 1).getDay();
+  const daysInCurrent = new Date(year, month, 0).getDate();
+  const prev = calcYearMonth(year, month, "prev");
+  const daysInPrev = new Date(prev.year, prev.month, 0).getDate();
+  const next = calcYearMonth(year, month, "next");
+  const cells = [];
+  for (let i = firstDayIndex - 1; i >= 0; i--) {
+    const day = daysInPrev - i;
+    cells.push({ date: formatDate(prev.year, prev.month, day), day, inCurrentMonth: false });
+  }
+  for (let day = 1; day <= daysInCurrent; day++) {
+    cells.push({ date: formatDate(year, month, day), day, inCurrentMonth: true });
+  }
+  const remaining = (7 - cells.length % 7) % 7;
+  for (let day = 1; day <= remaining; day++) {
+    cells.push({ date: formatDate(next.year, next.month, day), day, inCurrentMonth: false });
+  }
+  return cells;
+}
+var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+
+// src/components/SCalendarBoard/calendarBoard.config.ts
+var CALENDAR_BOARD_EVENT_COLORS = [
+  "default",
+  "blue",
+  "oceanBlue",
+  "lightBlue",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "white"
+];
+var BG = (name) => `var(--cmp-calendarBoard-eventButton-bg-${name})`;
+var CALENDAR_BOARD_EVENT_PRESETS = {
+  default: { bg: BG("default"), dot: "indigo" },
+  blue: { bg: BG("blue"), dot: "blue" },
+  oceanBlue: { bg: BG("oceanBlue"), dot: "darkblue" },
+  lightBlue: { bg: BG("lightBlue"), dot: "lightblue" },
+  green: { bg: BG("green"), dot: "green" },
+  yellow: { bg: BG("yellow"), dot: "yellow" },
+  orange: { bg: BG("orange"), dot: "orange" },
+  red: { bg: BG("red"), dot: "red" },
+  white: { bg: BG("white"), dot: "grey" }
+};
+var CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
+var CALENDAR_BOARD_DAY_COLORS = [
+  "default",
+  "danger",
+  "accent",
+  "complete",
+  "dim"
+];
+var CALENDAR_BOARD_DAY_BG = {
+  default: "var(--cmp-calendarBoard-dayCard-bg)",
+  danger: "var(--color-red-30)",
+  accent: "var(--color-brilliantblue-40)",
+  complete: "var(--color-green-45)",
+  dim: "var(--color-grey-25)"
+};
+function CalendarEventButton({
+  event,
+  onSelect,
+  className
+}) {
+  const preset = CALENDAR_BOARD_EVENT_PRESETS[event.color ?? "default"];
+  const dot = event.dotColor ?? preset.dot;
+  const disabled = event.disabled === true;
+  const hasDescription = event.description != null && event.description !== "";
+  const hasValue = event.value != null && event.value !== "";
+  const title = [event.label.replace(/<[^>]*>/g, ""), event.description, event.value].filter((v) => v != null && v !== "").join(" ") || void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    "button",
     {
+      type: "button",
+      disabled,
+      title,
       className: cn(
-        // 판 높이는 부모가 정한다 — 행이 그 높이를 균등 분할하고, 칸 높이가 다시 "몇 줄 보일지" 를 정한다.
-        "flex h-full w-full flex-col overflow-hidden rounded-(--cmp-calendarBoard-radius) border border-solid border-(--cmp-calendarBoard-border) bg-(--cmp-calendarBoard-bg)",
+        // hover 는 배경 위에 8% 오버레이를 얹는다 — 프리셋 배경이 9종이라 색마다 hover 색을 두지 않는다.
+        "group relative flex w-full min-w-0 items-center overflow-hidden text-left",
+        "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
+        "gap-(--cmp-calendarBoard-eventButton-inline-gap) px-(--cmp-calendarBoard-item-paddingX)",
+        "bg-(--ceb-bg) text-(--cmp-calendarBoard-eventButton-text-color-default)",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
         className
       ),
-      style,
+      style: { "--ceb-bg": preset.bg },
+      onClick: (e) => {
+        if (disabled) return;
+        onSelect?.(event, e);
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-header-gap) px-sd-16 py-sd-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-calendarBoard-header-content-gap)", children: [
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-eventButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-eventButton-hover-overlay-opacity)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SBadge, { "aria-hidden": true, color: dot, className: "shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-(--cmp-calendarBoard-eventButton-label-gap)", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-sm-default min-w-0 flex-1 truncate", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              SGhostButton,
+              "span",
               {
-                icon: "chevronLeft",
-                size: "xxs",
-                ariaLabel: "\uC774\uC804 \uD574",
-                onClick: () => setView({ year: view.year - 1, month: view.month })
+                className: cn(
+                  "typo-body-sm-semibold",
+                  hasDescription && "me-(--cmp-calendarBoard-eventButton-label-gap)"
+                ),
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(event.label) }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg inline-flex min-w-[48px] justify-center text-(--cmp-calendarBoard-header-content-color)", children: view.year }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SGhostButton,
-              {
-                icon: "chevronRight",
-                size: "xxs",
-                ariaLabel: "\uB2E4\uC74C \uD574",
-                onClick: () => setView({ year: view.year + 1, month: view.month })
-              }
-            )
+            hasDescription && event.description
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, height: "var(--cmp-calendarBoard-header-content-divider-height)" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-calendarBoard-header-content-gap)", children: [
+          hasValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-eventButton-label-gap)", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              SGhostButton,
+              "span",
               {
-                icon: "chevronLeft",
-                size: "xxs",
-                ariaLabel: "\uC774\uC804 \uB2EC",
-                onClick: () => setView(calcYearMonth(view.year, view.month, "prev"))
+                "aria-hidden": true,
+                className: "typo-body-sm-default text-(--cmp-calendarBoard-eventButton-text-color-separator)",
+                children: "/"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-heading-lg inline-flex min-w-[48px] justify-center text-(--cmp-calendarBoard-header-content-color)", children: [
-              view.month,
-              "\uC6D4"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SGhostButton,
-              {
-                icon: "chevronRight",
-                size: "xxs",
-                ariaLabel: "\uB2E4\uC74C \uB2EC",
-                onClick: () => setView(calcYearMonth(view.year, view.month, "next"))
-              }
-            )
-          ] }),
-          todayLabel !== "" && /* @__PURE__ */ jsxRuntime.jsx(
-            SButton,
-            {
-              color: "neutral",
-              outline: true,
-              size: "xs",
-              label: todayLabel,
-              onClick: () => setView({ year: ty, month: tm })
-            }
-          ),
-          headerRight != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: headerRight })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default whitespace-nowrap", children: event.value })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var CalendarMoreButton = /* @__PURE__ */ react.forwardRef(function CalendarMoreButton2({ count, label = "\uB354\uBCF4\uAE30", onClick, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "group relative flex w-full min-w-0 cursor-pointer items-center overflow-hidden text-left",
+        "h-(--cmp-calendarBoard-item-height) shrink-0 rounded-(--cmp-calendarBoard-item-radius)",
+        "gap-(--cmp-calendarBoard-moreButton-gap) px-(--cmp-calendarBoard-item-paddingX)",
+        "bg-(--cmp-calendarBoard-moreButton-bg)",
+        className
+      ),
+      onClick,
+      children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "span",
           {
-            className: "grid shrink-0 bg-(--cmp-calendarBoard-grid-bg) pt-(--cmp-calendarBoard-grid-paddingTop) pb-(--cmp-calendarBoard-grid-gap)",
-            style: { gridTemplateColumns: columns },
-            children: WEEK_LABELS.map((label) => /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "typo-body-md-default flex justify-center text-(--cmp-calendarBoard-grid-weekRow-color)",
-                children: label
-              },
-              label
-            ))
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-(--cmp-calendarBoard-item-radius) bg-(--cmp-calendarBoard-moreButton-hover-overlay-color) opacity-0 transition-opacity group-hover:opacity-(--cmp-calendarBoard-moreButton-hover-overlay-opacity)"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          RPopover12__namespace.Root,
-          {
-            open: openDate !== null,
-            onOpenChange: (open) => {
-              if (!open) setOpenDate(null);
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: gridRef,
-                  role: "grid",
-                  className: "grid min-h-0 flex-1 gap-px overflow-auto border-t border-solid border-(--cmp-calendarBoard-grid-month-border) bg-(--cmp-calendarBoard-grid-month-border)",
-                  style: {
-                    gridTemplateColumns: columns,
-                    // 행은 판 높이를 균등하게 나눠 갖는다 — 일정이 많은 주만 길어지면 격자가 깨진다.
-                    gridTemplateRows: `repeat(${rowCount}, minmax(var(--cmp-calendarBoard-dayCard-minHeight), 1fr))`
-                  },
-                  children: cells.map((cell) => {
-                    const content = dayContent?.[cell.date];
-                    const list = content == null ? eventMap.get(cell.date) ?? [] : [];
-                    const folded = list.length > rowCapacity;
-                    const visible = folded ? list.slice(0, rowCapacity - 1) : list;
-                    const card = /* @__PURE__ */ jsxRuntime.jsx(
-                      CalendarDayCard,
-                      {
-                        date: cell.date,
-                        day: cell.day,
-                        inCurrentMonth: cell.inCurrentMonth,
-                        isToday: cell.date === today,
-                        isSelected: value != null && value === cell.date,
-                        selectable,
-                        color: dayColors?.[cell.date] ?? "default",
-                        events: visible,
-                        body: content,
-                        hiddenCount: folded ? list.length - (rowCapacity - 1) : 0,
-                        isOpen: openDate === cell.date,
-                        moreLabel,
-                        onDaySelect: (date) => onValueChange?.(date, list),
-                        onEventClick,
-                        onOpenEvents: () => openEventList(cell.date, list)
-                      },
-                      cell.date
-                    );
-                    return cell.date === openDate ? /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: card }, cell.date) : card;
-                  })
-                }
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-sm-semibold shrink-0 text-(--cmp-calendarBoard-moreButton-count-color)", children: [
+          count,
+          "\uAC1C"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default min-w-0 truncate text-(--cmp-calendarBoard-moreButton-label-color)", children: label })
+      ]
+    }
+  );
+});
+var CalendarDayCard = /* @__PURE__ */ react.forwardRef(function CalendarDayCard2({
+  date,
+  day,
+  inCurrentMonth,
+  isToday,
+  isSelected,
+  selectable,
+  color,
+  events,
+  body,
+  hiddenCount,
+  isOpen,
+  moreLabel,
+  onDaySelect,
+  onEventClick,
+  onOpenEvents,
+  ...rest
+}, ref) {
+  const hasEvents = events.length + hiddenCount > 0;
+  const interactive = selectable || hasEvents;
+  const activate = () => {
+    if (hasEvents) onOpenEvents?.();
+    if (selectable) onDaySelect?.(date);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "gridcell",
+      "data-date": date,
+      "aria-selected": selectable ? isSelected : void 0,
+      "aria-current": isToday ? "date" : void 0,
+      "aria-haspopup": hasEvents ? "dialog" : void 0,
+      "aria-expanded": hasEvents ? isOpen : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      onClick: interactive ? activate : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          activate();
+        }
+      } : void 0,
+      className: cn(
+        "relative flex min-h-(--cmp-calendarBoard-dayCard-minHeight) min-w-(--cmp-calendarBoard-dayCard-minWidth) flex-col bg-(--cdc-bg) px-(--cmp-calendarBoard-dayCard-paddingX) outline-none",
+        interactive && "cursor-pointer"
+      ),
+      style: { ...rest.style, "--cdc-bg": CALENDAR_BOARD_DAY_BG[color] },
+      children: [
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-[1px] rounded-(--cmp-calendarBoard-dayCard-focus-border-radius) border-(length:--cmp-calendarBoard-dayCard-focus-border-width) border-solid border-(--cmp-calendarBoard-dayCard-focus-border-color)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 pt-(--cmp-calendarBoard-dayCard-header-paddingTop) pb-(--cmp-calendarBoard-dayCard-header-paddingBottom)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex size-(--cmp-calendarBoard-daySequence-size) items-center justify-center rounded-(--cmp-calendarBoard-daySequence-radius)",
+              isToday ? "typo-body-md-bold bg-(--cmp-calendarBoard-daySequence-bg-today) text-(--cmp-calendarBoard-daySequence-text-today)" : cn(
+                "typo-body-md-medium",
+                inCurrentMonth ? "text-(--cmp-calendarBoard-daySequence-text-default)" : "text-(--cmp-calendarBoard-daySequence-text-otherMonth)"
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-                RPopover12__namespace.Content,
+              // 오늘이 아니면서 선택된 날은 테두리 원으로 표시한다 (오늘은 이미 채운 원이라 겹치지 않는다).
+              // 굵기는 1px 로 고정한다 — 칸을 감싸는 focus 테두리(2px)와 달리 얇은 원이고, 대응 토큰이 없다.
+              isSelected && !isToday && "border border-solid border-(--cmp-calendarBoard-daySequence-border-selected)"
+            ),
+            children: day
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-h-0 flex-col gap-(--cmp-calendarBoard-dayCard-grid-gap) pb-(--cmp-calendarBoard-dayCard-grid-paddingBottom)",
+              // 슬롯은 남는 세로를 다 갖는다 — 안에서 h-full 로 칸을 채울 수 있어야 한다.
+              body != null && "flex-1"
+            ),
+            children: [
+              body,
+              body == null && events.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                CalendarEventButton,
                 {
-                  onInteractOutside: (e) => {
-                    const target = e.detail.originalEvent.target;
-                    if (target instanceof Node && gridRef.current?.contains(target)) e.preventDefault();
-                  },
-                  side: "bottom",
-                  align: "start",
-                  ref: setPanelEl,
-                  sideOffset: placement.side,
-                  alignOffset: placement.align,
-                  avoidCollisions: false,
-                  className: cn("z-50 outline-none", FLOATING_SLIDE_ANIM),
-                  onOpenAutoFocus: (e) => e.preventDefault(),
-                  children: openDate != null && /* @__PURE__ */ jsxRuntime.jsx(
-                    CalendarDayEventListBox,
-                    {
-                      date: openDate,
-                      minWidth: placement.cellWidth > 0 ? placement.cellWidth + DAY_EVENT_OUTDENT * 2 : void 0,
-                      minHeight: placement.cellHeight > 0 ? placement.cellHeight + DAY_EVENT_OUTDENT * 2 : void 0,
-                      events: openEvents,
-                      onEventClick,
-                      onClose: () => setOpenDate(null)
-                    }
-                  )
+                  event,
+                  onSelect: (ev, e) => {
+                    e.stopPropagation();
+                    onEventClick?.(ev, e);
+                  }
                 },
-                openDate
-              ) })
+                event.id ?? `${event.date}-${i}`
+              )),
+              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                CalendarMoreButton,
+                {
+                  count: hiddenCount,
+                  label: moreLabel,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onOpenEvents?.();
+                  }
+                }
+              )
             ]
           }
         )
       ]
     }
   );
-}
-
-// 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})`;
-}
-function runRules(value, rules) {
-  if (!rules || rules.length === 0) return "";
-  for (const rule of rules) {
-    const result = rule(value ?? "");
-    if (result !== true) return typeof result === "string" ? result : "\uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uAC12\uC785\uB2C8\uB2E4.";
-  }
-  return "";
-}
-var FormContext = /* @__PURE__ */ react.createContext(null);
-function useFormContext() {
-  return react.useContext(FormContext);
-}
-function useFormField(field) {
-  const ctx = useFormContext();
-  const cbRef = react.useRef(field);
-  cbRef.current = field;
-  const name = field.name ?? "";
-  react.useEffect(() => {
-    if (!ctx) return;
-    return ctx.register({
-      name,
-      validate: () => cbRef.current.validate(),
-      resetValidation: () => cbRef.current.resetValidation()
-    });
-  }, [ctx, name]);
-}
-var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
-};
-var ALIGN = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end"
-};
-var FOCUS_RING_SHADOW = "0px 0px 4px 0px #0071ff66";
-var cssLen = (v) => v === void 0 || v === "" || v === 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
-var SField = /* @__PURE__ */ react.forwardRef(function SField2({
-  name,
-  label = "",
-  icon,
-  iconColor,
-  labelTooltip = "",
-  labelTooltipProps,
-  labelWidth,
-  labelHeight,
-  size = "sm",
-  addonLabel = "",
-  addonAlign = "start",
-  error = false,
-  errorMessage = "",
-  status,
-  focused = false,
-  hovered = false,
-  rules: _rules,
-  hint = "",
-  disabled = false,
-  readOnly = false,
-  width,
+});
+var MAX_HEIGHT = 480;
+var MAX_WIDTH = "calc(100vw - 16px)";
+function CalendarDayEventListBox({
+  date,
+  events,
+  onEventClick,
   minWidth,
-  maxWidth,
-  multiline = false,
-  borderless = false,
-  children,
-  className,
-  style,
-  onMouseEnter,
-  onMouseLeave
-}, ref) {
-  const rootRef = react.useRef(null);
-  react.useImperativeHandle(
-    ref,
-    () => ({
-      focus: () => {
-        const root = rootRef.current;
-        if (!root) return;
-        const focusable = root.querySelector(
-          "input,textarea,select,button,[tabindex]"
-        );
-        focusable?.focus();
-        root.scrollIntoView({ block: "nearest" });
-      }
-    }),
-    []
+  minHeight,
+  onClose,
+  closeLabel = "\uB2EB\uAE30"
+}) {
+  const [y, m, d] = date.split("-").map(Number);
+  const weekday = WEEK_LABELS[new Date(y, m - 1, d).getDay()];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex w-max flex-col overflow-hidden rounded-(--cmp-calendarBoard-radius) bg-(--cmp-calendarBoard-bg) shadow-(--shadow-overlay)",
+      style: { minWidth, maxWidth: MAX_WIDTH, minHeight, maxHeight: MAX_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-dayEvent-header-gap) px-(--cmp-calendarBoard-dayEvent-header-paddingX) py-(--cmp-calendarBoard-dayEvent-header-paddingY)", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-heading-md text-(--cmp-calendarBoard-header-content-color)", children: [
+            d,
+            "\uC77C"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-body-lg-default flex-1 text-(--cmp-calendarBoard-header-content-color)", children: [
+            "(",
+            weekday,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "close",
+              size: "xs",
+              ariaLabel: closeLabel,
+              className: "shrink-0",
+              onClick: onClose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SScrollArea, { axis: "vertical", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-(--cmp-calendarBoard-dayEvent-body-gap) px-(--cmp-calendarBoard-dayEvent-body-paddingX) pb-(--cmp-calendarBoard-dayEvent-body-paddingBottom)", children: events.map((event, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarEventButton,
+          {
+            event,
+            onSelect: onEventClick
+          },
+          event.id ?? `${event.date}-${i}`
+        )) }) })
+      ]
+    }
   );
-  const s = FIELD_SIZE[size];
-  if (label !== "" && addonLabel !== "" && typeof console !== "undefined") {
-    console.warn(
-      "[SField] label \uACFC addonLabel \uC740 \uD568\uAED8 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. addonLabel \uC744 \uBB34\uC2DC\uD569\uB2C8\uB2E4."
-    );
-  }
-  const effectiveAddonLabel = label !== "" ? "" : addonLabel;
-  const resolvedError = status === "error" || status === void 0 && error;
-  const resolvedSuccess = status === "pass";
-  const showError = resolvedError && errorMessage !== "";
-  const interactive = !disabled && !readOnly;
-  const isPercentWidth = typeof width === "string" && width.trim().endsWith("%");
-  const resolvedWidth = fieldWidthValue(width);
-  const hug = resolvedWidth !== void 0 && !isPercentWidth;
-  const addonWidth = effectiveAddonLabel !== "" ? cssLen(labelWidth) : void 0;
-  const maxWidthValue = fieldWidthValue(maxWidth);
-  const resolvedMaxWidth = maxWidthValue === void 0 || effectiveAddonLabel === "" ? maxWidthValue : addonWidth ? `calc(${maxWidthValue} + ${addonWidth})` : void 0;
-  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : (
-    // focus·hover(제어 prop) 가 error/pass 보다 우선 — 실제 :hover/:focus-within 클래스도
-    // 같은 순서로 --field-bc 를 덮으므로, prop 으로 흉내 낸 상태도 그와 같게 둔다.
-    interactive && (focused || hovered) ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)"
+}
+var DAY_EVENT_OUTDENT = 16;
+var VIEWPORT_PADDING2 = 8;
+function shiftIntoView(desired, size, viewport) {
+  const max = Math.max(viewport - size - VIEWPORT_PADDING2, VIEWPORT_PADDING2);
+  return Math.min(Math.max(desired, VIEWPORT_PADDING2), max) - desired;
+}
+function measureRowCapacity(cell) {
+  const cs = getComputedStyle(cell);
+  const v = (name) => Number.parseFloat(cs.getPropertyValue(name)) || 0;
+  const gap = v("--cmp-calendarBoard-dayCard-grid-gap");
+  const row = v("--cmp-calendarBoard-item-height") + gap;
+  if (row <= 0) return null;
+  const header = v("--cmp-calendarBoard-dayCard-header-paddingTop") + v("--cmp-calendarBoard-daySequence-size") + v("--cmp-calendarBoard-dayCard-header-paddingBottom");
+  const free = cell.getBoundingClientRect().height - header - v("--cmp-calendarBoard-dayCard-grid-paddingBottom") + gap;
+  if (free <= 0) return null;
+  return Math.max(1, Math.floor(free / row));
+}
+function SCalendarBoard({
+  year,
+  month,
+  defaultYear,
+  defaultMonth,
+  onViewChange,
+  selectable = false,
+  value,
+  onValueChange,
+  events,
+  dayColors,
+  dayContent,
+  onEventClick,
+  onMoreClick,
+  todayLabel = "\uC624\uB298",
+  moreLabel,
+  headerRight,
+  className,
+  style
+}) {
+  const today = todayStr();
+  const [ty, tm] = [Number(today.slice(0, 4)), Number(today.slice(5, 7))];
+  const [innerView, setInnerView] = react.useState(() => ({
+    year: defaultYear ?? ty,
+    month: defaultMonth ?? tm
+  }));
+  const controlled = year != null && month != null;
+  const view = controlled ? { year, month } : innerView;
+  const [openDate, setOpenDate] = react.useState(null);
+  const [placement, setPlacement] = react.useState({ cellWidth: 0, cellHeight: 0, side: 0, align: 0 });
+  const [panelEl, setPanelEl] = react.useState(null);
+  const portalContainer = usePortalContainer();
+  const setView = react.useCallback(
+    (next) => {
+      setOpenDate(null);
+      if (!controlled) setInnerView(next);
+      onViewChange?.(next);
+    },
+    [controlled, onViewChange]
   );
-  const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
-  const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const cells = react.useMemo(() => monthCells(view.year, view.month), [view.year, view.month]);
+  const rowCount = cells.length / 7;
+  const gridRef = react.useRef(null);
+  const [rowCapacity, setRowCapacity] = react.useState(CALENDAR_BOARD_MAX_VISIBLE_EVENTS);
+  react.useEffect(() => {
+    const grid = gridRef.current;
+    if (grid == null || typeof ResizeObserver === "undefined") return;
+    const cell = grid.querySelector('[role="gridcell"]');
+    if (cell == null) return;
+    const apply = () => {
+      const next = measureRowCapacity(cell);
+      if (next != null) setRowCapacity(next);
+    };
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(cell);
+    return () => observer.disconnect();
+  }, [rowCount]);
+  const eventMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    (events ?? []).forEach((event) => {
+      const list = map.get(event.date);
+      if (list) list.push(event);
+      else map.set(event.date, [event]);
+    });
+    return map;
+  }, [events]);
+  const openEvents = openDate ? eventMap.get(openDate) ?? [] : [];
+  react.useLayoutEffect(() => {
+    if (openDate == null || panelEl == null) return;
+    const cell = gridRef.current?.querySelector(`[data-date="${openDate}"]`);
+    if (cell == null) return;
+    const adjust = () => {
+      const cellRect = cell.getBoundingClientRect();
+      const panelRect = panelEl.getBoundingClientRect();
+      const next = {
+        cellWidth: cellRect.width,
+        cellHeight: cellRect.height,
+        side: -(cellRect.height + DAY_EVENT_OUTDENT) + shiftIntoView(cellRect.top - DAY_EVENT_OUTDENT, panelRect.height, window.innerHeight),
+        align: -DAY_EVENT_OUTDENT + shiftIntoView(cellRect.left - DAY_EVENT_OUTDENT, panelRect.width, window.innerWidth)
+      };
+      setPlacement(
+        (prev) => prev.cellWidth === next.cellWidth && prev.cellHeight === next.cellHeight && prev.side === next.side && prev.align === next.align ? prev : next
+      );
+    };
+    adjust();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(adjust);
+    observer?.observe(panelEl);
+    window.addEventListener("scroll", adjust, true);
+    window.addEventListener("resize", adjust);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("scroll", adjust, true);
+      window.removeEventListener("resize", adjust);
+    };
+  }, [openDate, panelEl]);
+  const columns = "repeat(7, minmax(var(--cmp-calendarBoard-dayCard-minWidth), 1fr))";
+  const openEventList = (date, list) => {
+    if (onMoreClick) {
+      onMoreClick({ date, events: list });
+      return;
+    }
+    setOpenDate((prev) => prev === date ? null : date);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: rootRef,
-      "data-name": name || void 0,
       className: cn(
-        "h-fit flex-col",
-        // hug 시 inline-flex 를 유지하면 기존에 세로로 쌓여 있던 필드들이 한 줄에 붙어버리므로
-        // 블록 레벨(flex)로 두어 쌓임은 그대로 유지한다. 나란히 놓으려면 부모를 flex 로.
-        hug ? "flex w-fit max-w-full" : "inline-flex w-full",
+        // 판 높이는 부모가 정한다 — 행이 그 높이를 균등 분할하고, 칸 높이가 다시 "몇 줄 보일지" 를 정한다.
+        "flex h-full w-full flex-col overflow-hidden rounded-(--cmp-calendarBoard-radius) border border-solid border-(--cmp-calendarBoard-border) bg-(--cmp-calendarBoard-bg)",
         className
       ),
       style,
-      onMouseEnter,
-      onMouseLeave,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start", children: [
-        label !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-(--cmp-calendarBoard-header-gap) px-sd-16 py-sd-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-calendarBoard-header-content-gap)", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronLeft",
+                size: "xxs",
+                ariaLabel: "\uC774\uC804 \uD574",
+                onClick: () => setView({ year: view.year - 1, month: view.month })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg inline-flex min-w-[48px] justify-center text-(--cmp-calendarBoard-header-content-color)", children: view.year }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronRight",
+                size: "xxs",
+                ariaLabel: "\uB2E4\uC74C \uD574",
+                onClick: () => setView({ year: view.year + 1, month: view.month })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, height: "var(--cmp-calendarBoard-header-content-divider-height)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-calendarBoard-header-content-gap)", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronLeft",
+                size: "xxs",
+                ariaLabel: "\uC774\uC804 \uB2EC",
+                onClick: () => setView(calcYearMonth(view.year, view.month, "prev"))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-heading-lg inline-flex min-w-[48px] justify-center text-(--cmp-calendarBoard-header-content-color)", children: [
+              view.month,
+              "\uC6D4"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "chevronRight",
+                size: "xxs",
+                ariaLabel: "\uB2E4\uC74C \uB2EC",
+                onClick: () => setView(calcYearMonth(view.year, view.month, "next"))
+              }
+            )
+          ] }),
+          todayLabel !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+            SButton,
+            {
+              color: "neutral",
+              outline: true,
+              size: "xs",
+              label: todayLabel,
+              onClick: () => setView({ year: ty, month: tm })
+            }
+          ),
+          headerRight != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: headerRight })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
-            style: {
-              height: cssLen(labelHeight) ?? s.height,
-              marginRight: s.fieldGap,
-              width: cssLen(labelWidth),
-              fontSize: s.fontSize,
-              lineHeight: `${s.lineHeight}px`
-            },
-            children: [
-              icon && /* @__PURE__ */ jsxRuntime.jsx(
-                SIcon,
-                {
-                  name: icon,
-                  size: s.icon,
-                  color: iconColor,
-                  style: { marginRight: s.labelGap }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
-              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                STooltip2,
-                {
-                  message: labelTooltip !== "" ? [labelTooltip] : void 0,
-                  iconSize: s.icon,
-                  ...labelTooltipProps
-                }
-              ) })
-            ]
+            className: "grid shrink-0 bg-(--cmp-calendarBoard-grid-bg) pt-(--cmp-calendarBoard-grid-paddingTop) pb-(--cmp-calendarBoard-grid-gap)",
+            style: { gridTemplateColumns: columns },
+            children: WEEK_LABELS.map((label) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "typo-body-md-default flex justify-center text-(--cmp-calendarBoard-grid-weekRow-color)",
+                children: label
+              },
+              label
+            ))
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+          RPopover12__namespace.Root,
           {
-            className: cn("flex min-w-0 flex-col", !hug && !isPercentWidth && "flex-1"),
-            style: {
-              width: resolvedWidth,
-              minWidth: fieldWidthValue(minWidth),
-              maxWidth: resolvedMaxWidth
+            open: openDate !== null,
+            onOpenChange: (open) => {
+              if (!open) setOpenDate(null);
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn(
-                    "relative box-border flex min-w-0 items-stretch border border-solid border-(--field-bc)",
-                    // 둘 다 넘친 것을 잘라 내지만 clip 은 스크롤 상자를 만들지 않는다. hidden 이면
-                    // 이 상자가 스크롤포트가 되어 안쪽의 position:sticky 가 페이지 스크롤을 따라가지
-                    // 못한다 (SEditor 의 고정 툴바). 여러 줄 필드에서만 바꿔 파급을 좁힌다.
-                    multiline ? "overflow-clip" : "overflow-hidden",
-                    interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
-                    disabled && "cursor-not-allowed"
-                  ),
+                  ref: gridRef,
+                  role: "grid",
+                  className: "grid min-h-0 flex-1 gap-px overflow-auto border-t border-solid border-(--cmp-calendarBoard-grid-month-border) bg-(--cmp-calendarBoard-grid-month-border)",
                   style: {
-                    // @ts-expect-error CSS 변수
-                    "--field-bc": borderColor,
-                    // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                    ...interactive && !borderless && (focused || hovered) ? { boxShadow: FOCUS_RING_SHADOW } : {},
-                    ...multiline ? { minHeight: s.height } : { height: s.height },
-                    "borderRadius": s.radius,
-                    "background": bgColor,
-                    "color": textColor
+                    gridTemplateColumns: columns,
+                    // 행은 판 높이를 균등하게 나눠 갖는다 — 일정이 많은 주만 길어지면 격자가 깨진다.
+                    gridTemplateRows: `repeat(${rowCount}, minmax(var(--cmp-calendarBoard-dayCard-minHeight), 1fr))`
                   },
-                  "data-focused": focused || void 0,
-                  "data-hovered": hovered || void 0,
-                  children: [
-                    effectiveAddonLabel !== "" && /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
+                  children: cells.map((cell) => {
+                    const content = dayContent?.[cell.date];
+                    const list = content == null ? eventMap.get(cell.date) ?? [] : [];
+                    const folded = list.length > rowCapacity;
+                    const visible = folded ? list.slice(0, rowCapacity - 1) : list;
+                    const card = /* @__PURE__ */ jsxRuntime.jsx(
+                      CalendarDayCard,
                       {
-                        className: "flex shrink-0 items-center gap-(--cmp-field-addonLabel-gap) whitespace-nowrap border-r border-solid px-(--cmp-field-addonLabel-paddingX) text-12 font-medium leading-sd-20",
-                        style: {
-                          // 원본 sd-field: labelWidth가 addon 폭(--sd-field-addon-width)에도 적용됨
-                          width: cssLen(labelWidth),
-                          justifyContent: ALIGN[addonAlign],
-                          background: "var(--cmp-field-addonLabel-bg)",
-                          borderRightColor: disabled ? "var(--cmp-field-addonLabel-border-disabled)" : "var(--cmp-field-addonLabel-border-default)",
-                          borderTopLeftRadius: s.radius - 1,
-                          borderBottomLeftRadius: s.radius - 1
-                        },
-                        children: [
-                          icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
-                          effectiveAddonLabel
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-w-0 flex-1", multiline && "bg-inherit"), children })
-                  ]
+                        date: cell.date,
+                        day: cell.day,
+                        inCurrentMonth: cell.inCurrentMonth,
+                        isToday: cell.date === today,
+                        isSelected: value != null && value === cell.date,
+                        selectable,
+                        color: dayColors?.[cell.date] ?? "default",
+                        events: visible,
+                        body: content,
+                        hiddenCount: folded ? list.length - (rowCapacity - 1) : 0,
+                        isOpen: openDate === cell.date,
+                        moreLabel,
+                        onDaySelect: (date) => onValueChange?.(date, list),
+                        onEventClick,
+                        onOpenEvents: () => openEventList(cell.date, list)
+                      },
+                      cell.date
+                    );
+                    return cell.date === openDate ? /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: card }, cell.date) : card;
+                  })
                 }
               ),
-              showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-errorMessage-color)", children: errorMessage }) : hint !== "" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-(--cmp-field-contents-gap) px-(--cmp-field-message-paddingX) text-12 font-normal leading-sd-20 text-(--cmp-field-hint-color)", children: hint }) : null
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover12__namespace.Content,
+                {
+                  onInteractOutside: (e) => {
+                    const target = e.detail.originalEvent.target;
+                    if (target instanceof Node && gridRef.current?.contains(target)) e.preventDefault();
+                  },
+                  side: "bottom",
+                  align: "start",
+                  ref: setPanelEl,
+                  sideOffset: placement.side,
+                  alignOffset: placement.align,
+                  avoidCollisions: false,
+                  className: cn("z-50 outline-none", FLOATING_SLIDE_ANIM),
+                  onOpenAutoFocus: (e) => e.preventDefault(),
+                  children: openDate != null && /* @__PURE__ */ jsxRuntime.jsx(
+                    CalendarDayEventListBox,
+                    {
+                      date: openDate,
+                      minWidth: placement.cellWidth > 0 ? placement.cellWidth + DAY_EVENT_OUTDENT * 2 : void 0,
+                      minHeight: placement.cellHeight > 0 ? placement.cellHeight + DAY_EVENT_OUTDENT * 2 : void 0,
+                      events: openEvents,
+                      onEventClick,
+                      onClose: () => setOpenDate(null)
+                    }
+                  )
+                },
+                openDate
+              ) })
             ]
           }
         )
-      ] })
+      ]
     }
   );
-});
+}
 
-// src/lib/autofill.ts
-var AUTOFILL_RESET_CLASS = "autofill:[-webkit-text-fill-color:currentColor] autofill:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] autofill:[transition:background-color_5000s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] [&:-webkit-autofill]:[transition:background-color_5000s_ease-in-out_0s]";
+// 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,
@@ -14879,158 +15351,6 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
     }
   );
 });
-var TEXTAREA_SIZE = {
-  sm: {
-    fontSize: 12,
-    lineHeight: 20,
-    paddingX: "var(--cmp-textinput-sm-paddingX)",
-    paddingY: "var(--cmp-textinput-sm-paddingY)"
-  },
-  md: {
-    fontSize: 14,
-    lineHeight: 24,
-    paddingX: "var(--cmp-textinput-md-paddingX)",
-    paddingY: "var(--cmp-textinput-md-paddingY)"
-  }
-};
-var MIN_ROWS = 2;
-var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
-  value,
-  onValueChange,
-  onChange,
-  size = "sm",
-  rows = MIN_ROWS,
-  autogrow = false,
-  maxRows,
-  rules,
-  status,
-  focused,
-  hovered,
-  textareaClassName,
-  textareaStyle,
-  label,
-  labelWidth,
-  icon,
-  iconColor,
-  labelTooltip,
-  labelTooltipProps,
-  addonLabel,
-  addonAlign,
-  hint,
-  error,
-  errorMessage,
-  width,
-  disabled = false,
-  readOnly = false,
-  placeholder = "\uC785\uB825\uD574 \uC8FC\uC138\uC694.",
-  onBlur,
-  className,
-  style,
-  ...rest
-}, ref) {
-  const p = TEXTAREA_SIZE[size];
-  const heightForRows = (n) => `calc(${p.lineHeight * n}px + ${p.paddingY} * 2)`;
-  const minHeight = heightForRows(MIN_ROWS);
-  const maxHeight = autogrow && maxRows != null ? heightForRows(maxRows) : void 0;
-  const [ruleError, setRuleError] = react.useState("");
-  const innerRef = react.useRef(null);
-  const setRefs2 = react.useCallback(
-    (node) => {
-      innerRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    },
-    [ref]
-  );
-  react.useLayoutEffect(() => {
-    const el = innerRef.current;
-    if (el == null) return;
-    if (!autogrow) {
-      el.style.height = "";
-      return;
-    }
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, [autogrow, maxHeight, minHeight, rows, value]);
-  useFormField({
-    name: rest.name,
-    validate: () => {
-      const msg = runRules(value, rules);
-      setRuleError(msg);
-      return msg === "";
-    },
-    resetValidation: () => setRuleError("")
-  });
-  const resolvedError = error || ruleError !== "";
-  const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
-  const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SField,
-    {
-      label,
-      labelWidth,
-      icon,
-      iconColor,
-      labelTooltip,
-      labelTooltipProps,
-      addonLabel,
-      addonAlign,
-      hint,
-      size,
-      error: resolvedError,
-      status: resolvedStatus,
-      focused,
-      hovered,
-      errorMessage: resolvedErrorMessage,
-      width,
-      disabled,
-      readOnly,
-      multiline: true,
-      className,
-      style,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
-        {
-          ref: setRefs2,
-          value: value ?? "",
-          rows,
-          disabled,
-          readOnly,
-          placeholder,
-          onChange: (e) => {
-            onChange?.(e);
-            onValueChange?.(e.target.value);
-            if (ruleError !== "") setRuleError(runRules(e.target.value, rules));
-          },
-          onBlur: (e) => {
-            onBlur?.(e);
-            if (rules && rules.length > 0) setRuleError(runRules(e.target.value, rules));
-          },
-          className: cn(
-            "w-full border-0 bg-transparent outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
-            // autogrow 와 끌어서 늘리기는 같은 높이를 두고 다투므로 함께 두지 않는다
-            autogrow ? "resize-none" : "resize-y",
-            AUTOFILL_RESET_CLASS,
-            textareaClassName
-          ),
-          style: {
-            minHeight,
-            maxHeight,
-            // 상한이 있으면 거기 닿았을 때 안에서 스크롤한다. 상한이 없으면 높이가 늘 내용과
-            // 같으므로 스크롤바가 나올 일이 없고, 반올림으로 1px 이 넘쳐 깜빡이는 것만 막는다.
-            overflowY: autogrow ? maxRows != null ? "auto" : "hidden" : void 0,
-            padding: `${p.paddingY} ${p.paddingX}`,
-            fontSize: p.fontSize,
-            lineHeight: `${p.lineHeight}px`,
-            color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
-            ...textareaStyle
-          },
-          ...rest
-        }
-      )
-    }
-  );
-});
 var PAD2 = {
   sm: { fontSize: 12, lineHeight: 20, stepper: 20, icon: 12 },
   md: { fontSize: 14, lineHeight: 24, stepper: 24, icon: 14 }
@@ -23100,6 +23420,9 @@ exports.CALENDAR_BOARD_DAY_COLORS = CALENDAR_BOARD_DAY_COLORS;
 exports.CALENDAR_BOARD_EVENT_COLORS = CALENDAR_BOARD_EVENT_COLORS;
 exports.CALENDAR_BOARD_EVENT_PRESETS = CALENDAR_BOARD_EVENT_PRESETS;
 exports.CALENDAR_BOARD_MAX_VISIBLE_EVENTS = CALENDAR_BOARD_MAX_VISIBLE_EVENTS;
+exports.CHAT_MESSAGE_DIRECTIONS = CHAT_MESSAGE_DIRECTIONS;
+exports.CHAT_MESSAGE_READ_STATUSES = CHAT_MESSAGE_READ_STATUSES;
+exports.CHAT_MESSAGE_VARIANTS = CHAT_MESSAGE_VARIANTS;
 exports.COLOR_KEYS = COLOR_KEYS;
 exports.FIELD_WIDTH_GRADES = FIELD_WIDTH_GRADES;
 exports.GNB_COLORS = GNB_COLORS;
@@ -23133,6 +23456,8 @@ exports.SCalendar = SCalendar;
 exports.SCalendarBoard = SCalendarBoard;
 exports.SCallout = SCallout;
 exports.SCard = SCard;
+exports.SChatInput = SChatInput2;
+exports.SChatMessage = SChatMessage2;
 exports.SCheckbox = SCheckbox;
 exports.SChip = SChip2;
 exports.SChipFilter = SChipFilter;
@@ -23177,6 +23502,7 @@ exports.SListItem = SListItem2;
 exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
 exports.SLoadingViewport = SLoadingViewport;
+exports.SLoginCard = SLoginCard2;
 exports.SModal = SModal;
 exports.SModalOutlet = SModalOutlet;
 exports.SNumberInput = SNumberInput;