sellmate-design-system-react 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -6,6 +6,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var client = require('react-dom/client');
+var RTooltip = require('@radix-ui/react-tooltip');
 var RDropdown = require('@radix-ui/react-dropdown-menu');
 var RPopover2 = require('@radix-ui/react-popover');
 var RSwitch = require('@radix-ui/react-switch');
@@ -31,6 +32,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown__namespace = /*#__PURE__*/_interopNamespace(RDropdown);
 var RPopover2__namespace = /*#__PURE__*/_interopNamespace(RPopover2);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
@@ -3318,11 +3320,11 @@ var RADIUS = 34;
 var STROKE = 12;
 var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 var COLOR_MAP = {
-  primary: { arc: "var(--cmp-spinner-color-arc)", track: "var(--cmp-spinner-color-track)" },
+  primary: { arc: "var(--cmp-progress-active-color)", track: "var(--cmp-progress-color-track)" },
   // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
   inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
-  error: { arc: "var(--color-red-75)", track: "var(--cmp-spinner-color-track)" },
-  complete: { arc: "#01BB4B", track: "var(--cmp-spinner-color-track)" }
+  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
+  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" }
 };
 var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = react.forwardRef(
@@ -3336,65 +3338,63 @@ var SCircleProgress = react.forwardRef(
       "div",
       {
         ref,
-        className: cn("inline-flex flex-col items-center gap-[8px]", className),
+        className: cn(
+          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
+          className
+        ),
         style,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[80px] w-[80px]", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "svg",
-              {
-                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
-                xmlns: "http://www.w3.org/2000/svg",
-                className: cn(
-                  "h-[80px] w-[80px]",
-                  indeterminate && "origin-center animate-circle-spin"
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+              xmlns: "http://www.w3.org/2000/svg",
+              className: cn("h-[80px] w-[80px]", indeterminate && "origin-center animate-circle-spin"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: c,
+                    cy: c,
+                    r: RADIUS,
+                    fill: "none",
+                    strokeWidth: STROKE,
+                    style: { stroke: colors.track }
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "circle",
-                    {
-                      cx: c,
-                      cy: c,
-                      r: RADIUS,
-                      fill: "none",
-                      strokeWidth: STROKE,
-                      style: { stroke: colors.track }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "circle",
-                    {
-                      cx: c,
-                      cy: c,
-                      r: RADIUS,
-                      fill: "none",
-                      strokeWidth: STROKE,
-                      strokeLinecap: "round",
-                      className: cn(
-                        "origin-center",
-                        indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
-                      ),
-                      style: {
-                        stroke: colors.arc,
-                        ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
-                      }
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: c,
+                    cy: c,
+                    r: RADIUS,
+                    fill: "none",
+                    strokeWidth: STROKE,
+                    strokeLinecap: "round",
+                    className: cn(
+                      "origin-center",
+                      indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
+                    ),
+                    style: {
+                      stroke: colors.arc,
+                      ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
                     }
-                  )
-                ]
-              }
-            ),
-            !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: "absolute inset-0 flex items-center justify-center text-[16px] font-bold leading-[26px]",
-                style: { color: percentColor },
-                children: [
-                  Math.round(v),
-                  "%"
-                ]
-              }
-            )
-          ] }),
+                  }
+                )
+              ]
+            }
+          ),
+          !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "text-center text-[16px] font-bold leading-[26px]",
+              style: { color: percentColor },
+              children: [
+                Math.round(v),
+                "%"
+              ]
+            }
+          ),
           label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
@@ -3405,6 +3405,14 @@ var SLoadingContainer = react.forwardRef(
   function SLoadingContainer2({ open = false, message, zIndex = 1200, className, style }, ref) {
     const [mounted2, setMounted] = react.useState(false);
     react.useEffect(() => setMounted(true), []);
+    react.useEffect(() => {
+      if (!open) return;
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }, [open]);
     const innerRef = react.useRef(null);
     const setRef = react.useCallback(
       (node) => {
@@ -3485,6 +3493,31 @@ var loading = {
     setState({ open: false });
   }
 };
+
+// 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 = react.createContext(null);
+var PortalContainerProvider = PortalContainerContext.Provider;
+function usePortalContainer() {
+  return react.useContext(PortalContainerContext) ?? void 0;
+}
 var SIZE_CONFIG = {
   sm: {
     gap: 4,
@@ -3518,6 +3551,7 @@ var STextLink = react.forwardRef(function STextLink2({
   className,
   onClick,
   children,
+  style,
   ...rest
 }, ref) {
   const s = SIZE_CONFIG[size];
@@ -3526,13 +3560,13 @@ var STextLink = react.forwardRef(function STextLink2({
   const handle = () => {
     if (!disabled) onClick?.();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const portalContainer = usePortalContainer();
+  const link = /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       ref,
       role: "button",
       tabIndex: disabled ? -1 : 0,
-      title: tooltipText,
       onClick: handle,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -3547,7 +3581,7 @@ var STextLink = react.forwardRef(function STextLink2({
         disabled && "cursor-not-allowed",
         className
       ),
-      style: { gap: s.gap, color: contentColor },
+      style: { gap: s.gap, color: contentColor, ...style },
       ...rest,
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: resolvedIconColor }),
@@ -3570,12 +3604,13 @@ var STextLink = react.forwardRef(function STextLink2({
       ]
     }
   );
+  const text = (tooltipText ?? "").trim();
+  if (text === "") return link;
+  return /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Trigger, { asChild: true, children: link }),
+    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Content, { side: "top", sideOffset: 4, className: cn("z-50", FLOATING_SLIDE_ANIM), children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text }) }) })
+  ] }) });
 });
-var PortalContainerContext = react.createContext(null);
-var PortalContainerProvider = PortalContainerContext.Provider;
-function usePortalContainer() {
-  return react.useContext(PortalContainerContext) ?? void 0;
-}
 
 // src/lib/sanitize-inline-html.ts
 var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
@@ -3646,15 +3681,15 @@ var sanitizeInlineHtml = (value) => {
   return template.innerHTML;
 };
 var SIZE = {
-  xs: { height: 24, paddingX: 8, gap: 6, arrow: 12, fontSize: 12, minWidth: 44, splitMinWidth: 60 },
+  xs: { height: 24, paddingX: 8, gap: 6, arrow: 12, fontSize: 12, minWidth: 64, splitMinWidth: 72 },
   sm: {
     height: 28,
     paddingX: 12,
     gap: 8,
     arrow: 12,
     fontSize: 12,
-    minWidth: 70,
-    splitMinWidth: 76
+    minWidth: 72,
+    splitMinWidth: 88
   },
   md: {
     height: 36,
@@ -3704,6 +3739,25 @@ var SDropdownButton = react.forwardRef(
   }, ref) {
     const portalContainer = usePortalContainer();
     const [open, setOpen] = react.useState(false);
+    const splitWrapRef = react.useRef(null);
+    const splitToggleRef = react.useRef(null);
+    const [splitAlignOffset, setSplitAlignOffset] = react.useState(0);
+    const [splitWidth, setSplitWidth] = react.useState(0);
+    react.useEffect(() => {
+      if (!split) return;
+      const update = () => {
+        if (splitWrapRef.current && splitToggleRef.current) {
+          setSplitAlignOffset(
+            -(splitWrapRef.current.offsetWidth - splitToggleRef.current.offsetWidth)
+          );
+          setSplitWidth(splitWrapRef.current.offsetWidth);
+        }
+      };
+      update();
+      const ro = new ResizeObserver(update);
+      ro.observe(splitWrapRef.current);
+      return () => ro.disconnect();
+    }, [split, label]);
     react.useImperativeHandle(
       ref,
       () => ({
@@ -3741,7 +3795,13 @@ var SDropdownButton = react.forwardRef(
       {
         sideOffset: 4,
         align: "start",
-        className: "z-50 min-w-[var(--radix-dropdown-menu-trigger-width)] overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-normal-sm",
+        alignOffset: split ? splitAlignOffset : 0,
+        className: cn(
+          "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
+          !split && "min-w-[var(--radix-dropdown-menu-trigger-width)]",
+          FLOATING_SLIDE_ANIM
+        ),
+        style: split ? { minWidth: splitWidth } : void 0,
         children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
           RDropdown__namespace.Item,
           {
@@ -3775,6 +3835,7 @@ var SDropdownButton = react.forwardRef(
           split ? /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
+              ref: splitWrapRef,
               className: cn("inline-flex items-stretch", className),
               style: { minWidth: s.splitMinWidth, ...style },
               children: [
@@ -3797,6 +3858,7 @@ var SDropdownButton = react.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(RDropdown__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
+                    ref: splitToggleRef,
                     type: "button",
                     disabled,
                     "aria-label": "\uBA54\uB274 \uC5F4\uAE30",
@@ -3840,18 +3902,6 @@ var SDropdownButton = react.forwardRef(
   }
 );
 SDropdownButton.displayName = "SDropdownButton";
-
-// src/lib/floating-anim.ts
-var FLOATING_SLIDE_ANIM = [
-  "data-[state=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=closed]:data-[side=bottom]:animate-floating-out-bottom",
-  "data-[state=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=closed]:data-[side=right]:animate-floating-out-right"
-].join(" ");
 var SIZE2 = {
   xxs: { icon: 12, radius: "sm" },
   xs: { icon: 16, radius: "sm" },
@@ -4044,7 +4094,8 @@ var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i)) });
+  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, children: line }, i)) });
 }
 var STooltip = react.forwardRef(function STooltip2({
   content,
@@ -4102,7 +4153,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
+    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -4147,11 +4198,17 @@ var STooltip = react.forwardRef(function STooltip2({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
             useClose && /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover2__namespace.Close,
+              SGhostButton,
               {
-                "aria-label": "\uB2EB\uAE30",
-                className: "shrink-0 cursor-pointer opacity-70 hover:opacity-100",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 16, color: fg })
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpen(false);
+                }
               }
             )
           ] }),
@@ -4385,9 +4442,9 @@ var SPopup = react.forwardRef(function SPopup2({
         useFooter && /* @__PURE__ */ jsxRuntime.jsxs(
           "footer",
           {
-            className: "relative z-[1] flex h-[52px] w-full flex-shrink-0 items-center gap-[var(--cmp-popup-footer-gap)] px-[var(--cmp-popup-footer-paddingX)] py-[var(--cmp-popup-footer-paddingY)]",
+            className: "relative z-[1] flex h-[52px] w-full flex-shrink-0 items-center gap-[var(--cmp-overlay-footer-gap)] px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
             style: {
-              background: "var(--cmp-popup-footer-bg)",
+              background: "var(--cmp-overlay-footer-bg-default)",
               boxShadow: "var(--shadow-spread-md)"
             },
             children: [
@@ -4466,7 +4523,10 @@ function SGuide({
         side: "bottom",
         align: "start",
         sideOffset: 4,
-        className: "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
+        className: cn(
+          "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
+          FLOATING_SLIDE_ANIM
+        ),
         style: {
           width: popupWidth != null ? popupWidth : 426,
           padding: "var(--cmp-guide-contents-paddingY) var(--cmp-guide-contents-paddingX)",
@@ -4575,7 +4635,7 @@ function SModalContainer({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPortalContainer, className: "fixed left-0 top-0 z-[1001]" })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPortalContainer, className: "pointer-events-auto fixed left-0 top-0 z-[1001]" })
   ] }) });
 }
 var TYPE_ICON = {
@@ -4713,9 +4773,9 @@ function SActionModal({
       showClose: true,
       width,
       height,
-      className: "w-fit min-w-[480px]",
+      className: "w-fit min-w-[480px] min-h-[320px]",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-[320px] flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex flex-shrink-0 items-center gap-[var(--cmp-modal-action-header-gap)] py-[var(--cmp-modal-action-header-paddingY)] pl-[var(--cmp-modal-action-header-paddingX)] pr-[calc(var(--cmp-modal-action-header-paddingX)+20px)]", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[16px] font-bold leading-[26px] text-[color:var(--cmp-modal-action-title-color)]", children: modalTitle }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] py-[var(--cmp-overlay-header-paddingY)] pl-[var(--cmp-overlay-header-paddingX)] pr-[calc(var(--cmp-overlay-header-paddingX)+20px)]", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: modalTitle }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto px-[var(--cmp-modal-action-body-paddingX)] pb-[var(--cmp-modal-action-body-paddingBottom)]", children }),
         button && /* @__PURE__ */ jsxRuntime.jsx(
           "footer",
@@ -4745,7 +4805,7 @@ function SActionModal({
   );
 }
 var DEFAULT_MESSAGE = {
-  loading: "",
+  loading: "\uC791\uC5C5 \uC9C4\uD589\uC911...",
   error: "\uC791\uC5C5\uC5D0 \uC2E4\uD328\uD558\uC600\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694."
 };
 var DEFAULT_BUTTON_LABEL = {
@@ -4767,6 +4827,7 @@ function SLoadingModal({
 }) {
   const resolvedMessage = message ?? DEFAULT_MESSAGE[state2];
   const lines = Array.isArray(resolvedMessage) ? resolvedMessage : resolvedMessage ? [resolvedMessage] : [];
+  const showButton = useButton || state2 === "error";
   return /* @__PURE__ */ jsxRuntime.jsx(
     SModalContainer,
     {
@@ -4786,7 +4847,7 @@ function SLoadingModal({
           },
           i
         )) }),
-        useButton && /* @__PURE__ */ jsxRuntime.jsx(
+        showButton && /* @__PURE__ */ jsxRuntime.jsx(
           SButton,
           {
             color: "neutral",
@@ -5017,7 +5078,7 @@ function SPagination({
       style,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-[calc(var(--cmp-pagination-height)*2+var(--cmp-pagination-move-gap))] items-center justify-end gap-[var(--cmp-pagination-move-gap)]", children: prevButtons }),
-        simple ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[var(--cmp-pagination-height)] items-center gap-[var(--cmp-pagination-move-gap)] px-[var(--cmp-pagination-paddingX)] text-[12px] font-medium leading-[20px] text-[color:var(--cmp-pagination-item-content-default)]", children: [
+        simple ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[var(--cmp-pagination-height)] items-center gap-[var(--cmp-pagination-simple-gap)] px-[var(--cmp-pagination-paddingX)] text-[12px] font-medium leading-[20px] text-[color:var(--cmp-pagination-item-content-default)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-[color:var(--cmp-pagination-item-content-selected)]", children: currentPage }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "/" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: lastPage })
@@ -5141,8 +5202,8 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
+  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",
@@ -5157,6 +5218,7 @@ var SField = react.forwardRef(function SField2({
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
+  labelHeight,
   size = "sm",
   addonLabel = "",
   addonAlign = "start",
@@ -5171,6 +5233,7 @@ var SField = react.forwardRef(function SField2({
   readOnly = false,
   width,
   multiline = false,
+  borderless = false,
   children,
   className,
   style,
@@ -5204,8 +5267,8 @@ var SField = react.forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const borderColor = disabled ? "var(--color-grey-45)" : interactive && focused ? "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 = disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
+  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "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",
@@ -5222,7 +5285,7 @@ var SField = react.forwardRef(function SField2({
           {
             className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
             style: {
-              height: s.height,
+              height: cssLen(labelHeight) ?? s.height,
               marginRight: s.fieldGap,
               width: cssLen(labelWidth),
               fontSize: s.fontSize,
@@ -5248,14 +5311,14 @@ var SField = react.forwardRef(function SField2({
             {
               className: cn(
                 "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && "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]",
+                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 && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
                 "width": cssLen(width),
                 "borderRadius": s.radius,
@@ -5300,15 +5363,28 @@ function flattenOptions(options, depth = 1) {
   const out = [];
   for (const o of options) {
     const hasChildren = Array.isArray(o.children) && o.children.length > 0;
-    out.push({
-      value: String(o.value),
-      label: o.label,
-      disabled: !!o.disabled,
-      depth,
-      isGroup: hasChildren,
-      raw: o.value
-    });
-    if (hasChildren) out.push(...flattenOptions(o.children, depth + 1));
+    if (hasChildren) {
+      const childFlat = flattenOptions(o.children, depth + 1);
+      const allChildrenDisabled = childFlat.every((c) => c.disabled);
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled || allChildrenDisabled,
+        depth,
+        isGroup: true,
+        raw: o.value
+      });
+      out.push(...childFlat);
+    } else {
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled,
+        depth,
+        isGroup: false,
+        raw: o.value
+      });
+    }
   }
   return out;
 }
@@ -5363,6 +5439,9 @@ var SSelect = react.forwardRef(function SSelect2({
   );
   const flat = react.useMemo(() => flattenOptions(options), [options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
+  const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
+  const allOptionsDisabled = hasLeaf && selectable.length === 0;
+  const effectiveDisabled = disabled || allOptionsDisabled;
   const showSearch = useSearch && selectable.length >= SEARCH_THRESHOLD;
   const labelByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
   const rawByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.raw])), [flat]);
@@ -5413,6 +5492,7 @@ var SSelect = react.forwardRef(function SSelect2({
   const selectStore = /* @__PURE__ */ jsxRuntime.jsxs(
     Ariakit__namespace.SelectProvider,
     {
+      animated: portalContainer == null ? 150 : false,
       value: multi ? selected : selected[0] ?? "",
       setValue: (v) => emit2(Array.isArray(v) ? v : v === "" ? [] : [v]),
       open,
@@ -5428,10 +5508,10 @@ var SSelect = react.forwardRef(function SSelect2({
           Ariakit__namespace.Select,
           {
             ref: triggerRef,
-            disabled,
+            disabled: effectiveDisabled,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
             style: {
-              color: disabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
+              color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
             },
             children: [
               isHtmlLabel(triggerText) ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -5446,7 +5526,7 @@ var SSelect = react.forwardRef(function SSelect2({
                 {
                   name: "chevronDown",
                   size: 12,
-                  color: disabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
+                  color: effectiveDisabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
                   className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
                 }
               )
@@ -5460,7 +5540,7 @@ var SSelect = react.forwardRef(function SSelect2({
             portalElement: portalContainer,
             gutter: 4,
             sameWidth: !dropdownWidth,
-            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
             style: {
               maxHeight: dropdownHeight,
               ...dropdownWidth ? { width: dropdownWidth } : {},
@@ -5501,7 +5581,7 @@ var SSelect = react.forwardRef(function SSelect2({
               ),
               hasItems ? /* @__PURE__ */ jsxRuntime.jsx(ItemList, { items: filtered, multi, selected, useSearch: showSearch }) : (
                 // 원본 sd-select-listbox__empty (표시할 항목이 없을 때)
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-center text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
               )
             ]
           }
@@ -5524,7 +5604,7 @@ var SSelect = react.forwardRef(function SSelect2({
       error: error || ruleError !== "",
       status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
-      disabled,
+      disabled: effectiveDisabled,
       width,
       className,
       style,
@@ -5559,7 +5639,11 @@ function ItemList({
         {
           className: cn(
             "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-            isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium"
+            isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
+            // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
+            // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
+            o.disabled && "text-[color:var(--cmp-listItem-content-disabled)]",
+            o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
           ),
           style: { paddingLeft: padLeft },
           children: o.label
@@ -5586,15 +5670,21 @@ function ItemList({
             "span",
             {
               className: cn(
-                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
-                isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
+                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+                o.disabled ? (
+                  // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+                  "border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                ) : cn(
+                  "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
+                  isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
+                )
               ),
               children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
                   name: "checkboxCheck",
                   size: 12,
-                  color: "var(--cmp-checkbox-checked-icon-default)"
+                  color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
                 }
               )
             }
@@ -6373,8 +6463,8 @@ var STextarea = react.forwardRef(function STextarea2({
   );
 });
 var PAD2 = {
-  sm: { fontSize: 12, stepper: 20, icon: 12 },
-  md: { fontSize: 14, stepper: 24, icon: 14 }
+  sm: { fontSize: 12, lineHeight: 20, stepper: 20, icon: 12 },
+  md: { fontSize: 14, lineHeight: 24, stepper: 24, icon: 14 }
 };
 var toNumber = (val) => {
   if (val === null || val === void 0 || val === "") return null;
@@ -6392,6 +6482,38 @@ var formatWithCommas = (value) => {
   const result = isNeg ? "-" + formatted : formatted;
   return decPart !== void 0 && decPart !== "" ? result + "." + decPart : result;
 };
+var addCommas = (value) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+var formatInputWithCommas = (value) => {
+  const isNeg = value.startsWith("-");
+  const unsigned = isNeg ? value.slice(1) : value;
+  const hasDecimal = unsigned.includes(".");
+  const [intPart = "", decPart = ""] = unsigned.split(".");
+  const formattedInt = addCommas(intPart === "" ? "0" : intPart);
+  return `${isNeg ? "-" : ""}${formattedInt}${hasDecimal ? `.${decPart}` : ""}`;
+};
+var getDecimalLimit = (useDecimal, maxDecimalLength) => {
+  if (!useDecimal || maxDecimalLength === void 0 || !Number.isFinite(maxDecimalLength)) {
+    return void 0;
+  }
+  return Math.max(0, Math.floor(maxDecimalLength));
+};
+var applyDecimalLimit = (value, decimalLimit) => {
+  if (value === null || decimalLimit === void 0) return value;
+  return Number(value.toFixed(decimalLimit));
+};
+var getLogicalCaret = (value, caret) => {
+  return value.slice(0, caret ?? value.length).replace(/,/g, "").length;
+};
+var getDisplayCaret = (value, logicalCaret) => {
+  if (logicalCaret <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    if (value[i] === ",") continue;
+    seen += 1;
+    if (seen >= logicalCaret) return i + 1;
+  }
+  return value.length;
+};
 var SNumberInput = react.forwardRef(function SNumberInput2({
   value,
   onValueChange,
@@ -6401,6 +6523,7 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
   step = 1,
   useButton = false,
   useDecimal = false,
+  maxDecimalLength,
   inputPrefix = "",
   inputSuffix = "",
   inputClass,
@@ -6432,7 +6555,8 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
 }, ref) {
   const p = PAD2[size];
   const padX = `var(--cmp-numberInput-${size}-paddingX)`;
-  const numValue = toNumber(value);
+  const decimalLimit = getDecimalLimit(useDecimal, maxDecimalLength);
+  const numValue = applyDecimalLimit(toNumber(value), decimalLimit);
   const [display, setDisplay] = react.useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = react.useState("");
   const innerRef = react.useRef(null);
@@ -6442,8 +6566,9 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
     else if (ref) ref.current = el;
   };
   react.useEffect(() => {
-    setDisplay(formatWithCommas(toNumber(value)));
-  }, [value]);
+    if (document.activeElement === innerRef.current) return;
+    setDisplay(formatWithCommas(applyDecimalLimit(toNumber(value), decimalLimit)));
+  }, [decimalLimit, value]);
   useFormField({
     name,
     validate: () => {
@@ -6455,48 +6580,87 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const emit2 = (n) => {
-    setDisplay(formatWithCommas(n));
-    onValueChange?.(n);
+  const restoreCaret = (nextDisplay, logicalCaret) => {
+    const input = innerRef.current;
+    if (logicalCaret === void 0 || !input || document.activeElement !== input) return;
+    const nextCaret = getDisplayCaret(nextDisplay, logicalCaret);
+    requestAnimationFrame(() => {
+      if (document.activeElement !== input) return;
+      input.setSelectionRange(nextCaret, nextCaret);
+    });
+  };
+  const setDisplayWithCaret = (nextDisplay, logicalCaret) => {
+    setDisplay(nextDisplay);
+    restoreCaret(nextDisplay, logicalCaret);
+  };
+  const resetRejectedInput = (target, logicalCaret) => {
+    target.value = display;
+    restoreCaret(display, Math.min(logicalCaret, display.replace(/,/g, "").length));
+  };
+  const emit2 = (n, logicalCaret) => {
+    const next = applyDecimalLimit(n, decimalLimit);
+    const nextDisplay = formatWithCommas(next);
+    setDisplayWithCaret(nextDisplay, logicalCaret);
+    onValueChange?.(next);
   };
   const incDisabled = disabled || readOnly || numValue !== null && numValue >= max;
   const decDisabled = disabled || readOnly || numValue !== null && numValue <= min;
   const increment = () => {
     if (incDisabled) return;
     const cur = numValue ?? (min === Number.NEGATIVE_INFINITY ? 0 : min);
-    const next = Math.min(cur + step, max);
+    const next = applyDecimalLimit(Math.min(cur + step, max), decimalLimit);
     if (next !== cur) emit2(next);
   };
   const decrement = () => {
     if (decDisabled) return;
     const cur = numValue ?? (min === Number.NEGATIVE_INFINITY ? 0 : min);
-    const next = Math.max(cur - step, min);
+    const next = applyDecimalLimit(Math.max(cur - step, min), decimalLimit);
     if (next !== cur) emit2(next);
   };
-  const handleInput = (raw) => {
+  const handleInput = (event) => {
+    const target = event.currentTarget;
+    const raw = target.value;
+    const logicalCaret = getLogicalCaret(raw, target.selectionStart);
     if (raw === "") {
-      setDisplay("");
+      setDisplayWithCaret("", 0);
       onValueChange?.(null);
       return;
     }
     const cleaned = raw.replace(/,/g, "");
     const decimals = (cleaned.match(/\./g) || []).length;
-    if (decimals > 1) return;
+    if (decimals > 1) {
+      resetRejectedInput(target, logicalCaret);
+      return;
+    }
     if (cleaned === "-" || cleaned === "." || cleaned === "-.") {
-      setDisplay(cleaned);
+      setDisplayWithCaret(cleaned, logicalCaret);
+      return;
+    }
+    if (!useDecimal && cleaned.includes(".")) {
+      resetRejectedInput(target, logicalCaret);
       return;
     }
-    if (!useDecimal && cleaned.includes(".")) return;
+    if (decimalLimit !== void 0 && cleaned.includes(".")) {
+      const fraction = cleaned.split(".")[1] ?? "";
+      if (fraction.length > decimalLimit) {
+        resetRejectedInput(target, logicalCaret);
+        return;
+      }
+    }
     if (cleaned.endsWith(".") && decimals === 1) {
       const parsed2 = toNumber(cleaned.slice(0, -1));
       if (parsed2 !== null) {
-        setDisplay(formatWithCommas(parsed2) + ".");
+        setDisplayWithCaret(formatInputWithCommas(cleaned), logicalCaret);
         return;
       }
     }
     const parsed = toNumber(cleaned);
-    if (parsed === null) return;
-    emit2(parsed);
+    if (parsed === null) {
+      resetRejectedInput(target, logicalCaret);
+      return;
+    }
+    setDisplayWithCaret(formatInputWithCommas(cleaned), logicalCaret);
+    onValueChange?.(applyDecimalLimit(parsed, decimalLimit));
   };
   const stepper = (dir) => {
     const off = dir === "inc" ? incDisabled : decDisabled;
@@ -6509,8 +6673,8 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
         "aria-label": dir === "inc" ? "\uC99D\uAC00" : "\uAC10\uC18C",
         onClick: dir === "inc" ? increment : decrement,
         className: cn(
-          "flex flex-shrink-0 items-center justify-center",
-          off ? "cursor-not-allowed" : "cursor-pointer"
+          "flex flex-shrink-0 items-center justify-center border border-solid border-transparent transition-colors",
+          off ? "cursor-not-allowed" : "cursor-pointer hover:border-[var(--color-border-accentLight)]"
         ),
         style: {
           width: `var(--cmp-numberInput-stepper-${size}-size)`,
@@ -6559,24 +6723,26 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
           style: {
             // 원본 sd-number-input: content gap = padding-x 토큰 (gap 토큰 아님)
             gap: `var(--cmp-numberInput-${size}-paddingX)`,
-            padding: `0 ${useButton ? padX : `calc(${padX} * 2)`}`
+            padding: `0 ${useButton ? padX : `calc(${padX} * 2)`}`,
+            fontSize: p.fontSize,
+            lineHeight: `${p.lineHeight}px`
           },
           children: [
             useButton && stepper("dec"),
-            inputPrefix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { fontSize: p.fontSize, color: affixColor }, children: inputPrefix }),
+            inputPrefix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputPrefix }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
                 ref: setRefs,
                 name,
                 type: "text",
-                inputMode: "numeric",
+                inputMode: useDecimal ? "decimal" : "numeric",
                 value: display,
                 placeholder,
                 disabled,
                 readOnly,
                 autoFocus,
-                onChange: (e) => handleInput(e.target.value),
+                onChange: handleInput,
                 onKeyDown: (e) => {
                   if (e.key === "ArrowUp") {
                     e.preventDefault();
@@ -6588,26 +6754,29 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
                 },
                 onFocus: (e) => onFocus?.(e),
                 onBlur: (e) => {
-                  const n = toNumber(display);
+                  const cleaned = display.replace(/,/g, "");
+                  const n = toNumber(cleaned);
                   const clamped = n === null ? null : Math.min(Math.max(n, min), max);
                   if (clamped !== n) emit2(clamped);
-                  else setDisplay(formatWithCommas(n));
+                  else setDisplay(n === null ? "" : formatInputWithCommas(cleaned));
                   if (rules && rules.length > 0) setRuleError(runRules(clamped, rules));
                   onBlur?.(e);
                 },
                 className: cn(
-                  "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-numberInput-text-placeholder)] disabled:cursor-not-allowed",
+                  // h-full 대신 라인박스 높이 그대로 두어 prefix/suffix 와 동일하게 flex 로 수직 센터링
+                  // (h-full 이면 input 내부 텍스트 센터링을 브라우저가 수행해 1px 어긋날 수 있음)
+                  "min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-numberInput-text-placeholder)] disabled:cursor-not-allowed",
                   inputClass
                 ),
                 style: {
-                  fontSize: p.fontSize,
+                  // fontSize/lineHeight 는 컨테이너에서 상속
                   textAlign: useButton ? "center" : "right",
                   color: disabled ? "var(--cmp-numberInput-text-disabled)" : "var(--cmp-numberInput-text-default)",
                   ...inputStyle
                 }
               }
             ),
-            inputSuffix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { fontSize: p.fontSize, color: affixColor }, children: inputSuffix }),
+            inputSuffix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputSuffix }),
             useButton && stepper("inc")
           ]
         }
@@ -6933,7 +7102,7 @@ function SCalendar({
                   "span",
                   {
                     className: cn(
-                      "flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent text-[14px]",
+                      "flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent text-[14px] leading-[var(--cmp-datepicker-calendar-day-circle-size)]",
                       selected ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)]",
                       isToday && !disabled && "font-bold"
                     ),
@@ -7095,16 +7264,25 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Content, { side: "bottom", align: "start", sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SCalendar,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover2__namespace.Content,
           {
-            value: value ?? void 0,
-            selectable,
-            elevated: true,
-            onValueChange: select,
-            onViewChange
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SCalendar,
+              {
+                value: value ?? void 0,
+                selectable,
+                elevated: true,
+                onValueChange: select,
+                onViewChange
+              }
+            )
           }
-        ) }) })
+        ) })
       ] })
     }
   );
@@ -7114,6 +7292,7 @@ function RangeCalendar({
   selectable,
   maxRange,
   onSelect,
+  onPendingStartChange,
   onViewChange
 }) {
   const today = todayStr();
@@ -7176,9 +7355,11 @@ function RangeCalendar({
       setStart(d);
       setEnd(null);
       setHover(null);
+      onPendingStartChange?.(d);
       return;
     }
     setEnd(d);
+    onPendingStartChange?.(null);
     onSelect([start, d]);
   };
   const GRID_COLS = "grid grid-cols-[repeat(7,var(--cmp-datepicker-calendar-day-width))]";
@@ -7313,8 +7494,11 @@ function SDateRangePicker({
   const portalContainer = usePortalContainer();
   const [open, setOpen] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
+  const [pendingStart, setPendingStart] = react.useState(null);
   const hasValue = value != null && value[0] !== "" && value[1] !== "";
-  const display = hasValue ? `${value[0]} ~ ${value[1]}` : placeholder;
+  const hasDisplay = pendingStart != null || hasValue;
+  const startText = pendingStart ?? (hasValue ? value[0] : "");
+  const endText = pendingStart ? "" : hasValue ? value[1] : "";
   useFormField({
     name,
     validate: () => {
@@ -7328,6 +7512,7 @@ function SDateRangePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
   const select = (r) => {
+    setPendingStart(null);
     onValueChange?.(r);
     if (rules && rules.length > 0) setRuleError(runRules(r, rules));
     setOpen(false);
@@ -7352,52 +7537,80 @@ function SDateRangePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            name,
-            disabled,
-            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
-            style: { padding: `0 ${dims.padX}px`, gap: dims.gap, borderRadius: dims.radius },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SIcon,
-                {
-                  name: "date",
-                  size: dims.icon,
-                  color: disabled ? "var(--cmp-datepicker-icon-disabled)" : "var(--cmp-datepicker-icon-default)",
-                  className: "flex-shrink-0"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "flex-1 truncate text-center",
-                  style: {
-                    minWidth: dims.minW,
-                    fontSize: dims.fontSize,
-                    lineHeight: `${dims.lineHeight}px`,
-                    color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasValue ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
-                  },
-                  children: display
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Content, { side: "bottom", align: "start", sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
-          RangeCalendar,
-          {
-            value: value ?? null,
-            selectable,
-            maxRange,
-            onSelect: select,
-            onViewChange
-          }
-        ) }) })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        RPopover2__namespace.Root,
+        {
+          open,
+          onOpenChange: (o) => {
+            if (disabled) return;
+            setOpen(o);
+            if (!o) setPendingStart(null);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                name,
+                disabled,
+                className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+                style: { padding: `0 ${dims.padX}px`, gap: dims.gap, borderRadius: dims.radius },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SIcon,
+                    {
+                      name: "date",
+                      size: dims.icon,
+                      color: disabled ? "var(--cmp-datepicker-icon-disabled)" : "var(--cmp-datepicker-icon-default)",
+                      className: "flex-shrink-0"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-1 items-center",
+                        hasDisplay ? "flex" : "block truncate text-center"
+                      ),
+                      style: {
+                        minWidth: dims.minW,
+                        fontSize: dims.fontSize,
+                        lineHeight: `${dims.lineHeight}px`,
+                        color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasDisplay ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
+                      },
+                      children: hasDisplay ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-right", children: startText }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-[4px]", children: "~" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: endText })
+                      ] }) : placeholder
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+              RPopover2__namespace.Content,
+              {
+                side: "bottom",
+                align: "start",
+                sideOffset: 4,
+                className: cn("z-50", FLOATING_SLIDE_ANIM),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeCalendar,
+                  {
+                    value: value ?? null,
+                    selectable,
+                    maxRange,
+                    onSelect: select,
+                    onPendingStartChange: setPendingStart,
+                    onViewChange
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      )
     }
   );
 }
@@ -7406,7 +7619,7 @@ var SChip = react.forwardRef(function SChip2({
   value = "",
   error: errorProp = false,
   disabled = false,
-  editable = true,
+  editable = false,
   showRemove = true,
   placeholder = "",
   rules,
@@ -7559,6 +7772,7 @@ function SFilePicker({
   hovered = false,
   inline = false,
   multiple = false,
+  useMultipleListBox = false,
   accept,
   maxFileSize,
   maxTotalSize,
@@ -7586,8 +7800,8 @@ function SFilePicker({
   const inputRef = react.useRef(null);
   const [ruleError, setRuleError] = react.useState("");
   const files = multiple ? Array.isArray(value) ? value : [] : value && !Array.isArray(value) ? value : null;
-  const hasSingle = !multiple && !!files;
-  const displayText = hasSingle ? files.name : placeholder;
+  const hasFiles = multiple ? files.length > 0 : !!files;
+  const displayText = !hasFiles ? placeholder : multiple ? files.map((f) => f.name).join(", ") : files.name;
   useFormField({
     name,
     validate: () => {
@@ -7651,78 +7865,88 @@ function SFilePicker({
   const padX = size === "md" ? "var(--cmp-filepicker-md-paddingX)" : "var(--cmp-filepicker-sm-paddingX)";
   const iconSize = size === "md" ? 20 : 16;
   const gapCls = size === "md" ? "gap-[var(--cmp-filepicker-md-gap)]" : "gap-[var(--cmp-filepicker-sm-gap)]";
-  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full w-full items-center", gapCls), style: { padding: `0 ${padX}` }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        className: "hidden",
-        disabled,
-        multiple,
-        accept,
-        name: resolvedName,
-        onChange,
-        "aria-label": placeholder
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        disabled,
-        onClick: open,
-        "aria-label": placeholder,
-        className: cn(
-          "flex min-w-0 flex-1 items-center bg-transparent text-left",
-          gapCls,
-          disabled ? "cursor-not-allowed" : "cursor-pointer"
+  const inlinePlaceholder = inline && !disabled && !hasFiles;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("group/filepicker flex h-full w-full items-center", gapCls),
+      style: { padding: inline ? 0 : `0 ${padX}` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            className: "hidden",
+            disabled,
+            multiple,
+            accept,
+            name: resolvedName,
+            onChange,
+            "aria-label": placeholder
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SIcon,
-            {
-              name: "attachFile",
-              size: iconSize,
-              color: disabled ? "var(--cmp-filepicker-icon-disabled)" : "var(--color-grey-65)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "min-w-0 flex-1 truncate text-[12px]",
-              style: {
-                color: disabled ? "var(--cmp-filepicker-text-disabled)" : hasSingle ? "var(--cmp-filepicker-text-default)" : "var(--cmp-filepicker-text-placeholder)"
-              },
-              children: displayText
-            }
-          )
-        ]
-      }
-    ),
-    !disabled && hasSingle && /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "close", size: "xxs", ariaLabel: "clear", onClick: clear })
-  ] });
-  const chips = multiple && files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: files.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
-  if (inline) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex flex-col", className), style, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "box-border flex items-center rounded-[var(--cmp-filepicker-sm-radius)] border border-solid border-[color:var(--cmp-filepicker-border-default)] bg-[var(--cmp-filepicker-bg-default)]",
-          style: {
-            height: "var(--cmp-filepicker-sm-height)",
-            width: typeof width === "number" ? `${width}px` : width
-          },
-          children: content
-        }
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: open,
+            "aria-label": placeholder,
+            className: cn(
+              "flex min-w-0 flex-1 items-center bg-transparent text-left",
+              gapCls,
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "attachFile",
+                  size: iconSize,
+                  color: disabled ? "var(--cmp-filepicker-icon-disabled)" : "var(--color-grey-65)"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0 flex-1 truncate text-[12px]",
+                    inlinePlaceholder && "text-[color:var(--cmp-filepicker-text-placeholder)] transition-colors group-hover/filepicker:text-[color:var(--cmp-filepicker-text-default)]"
+                  ),
+                  style: inlinePlaceholder ? void 0 : {
+                    color: disabled ? "var(--cmp-filepicker-text-disabled)" : hasFiles ? "var(--cmp-filepicker-text-default)" : "var(--cmp-filepicker-text-placeholder)"
+                  },
+                  children: displayText
+                }
+              )
+            ]
+          }
+        ),
+        !disabled && hasFiles && /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "close", size: "xxs", ariaLabel: "clear", onClick: clear })
+      ]
+    }
+  );
+  const chips = multiple && files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "mt-[8px] flex gap-[8px]",
+        useMultipleListBox ? "box-border flex-col items-start rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]" : "flex-wrap"
       ),
-      chips
-    ] });
-  }
+      style: useMultipleListBox ? {
+        width: typeof width === "number" ? `${width}px` : width,
+        // label 이 있으면 SField 입력 박스 시작 위치(labelWidth + fieldGap)에 맞춰 정렬
+        marginLeft: label && labelWidth != null ? `calc(${typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth} + var(--sys-space-field-${size}-gap))` : void 0
+      } : void 0,
+      children: files.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       SField,
       {
+        borderless: inline,
         label,
         labelWidth,
         icon,
@@ -7750,6 +7974,7 @@ function SKeyValueTable({
   fields = [],
   search = false,
   radius = "default",
+  dense = false,
   onChange,
   onSearch,
   className,
@@ -7757,6 +7982,8 @@ function SKeyValueTable({
 }) {
   if (fields.length === 0) return null;
   const emit2 = (name, value) => onChange?.({ name, value });
+  const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
+  const cellPadY = dense ? "var(--cmp-table-body-dense-paddingY)" : "var(--cmp-table-keyValue-body-paddingY)";
   const renderField = (f) => {
     if (f.render) return f.render;
     const opt = f.options ?? {};
@@ -7837,10 +8064,15 @@ function SKeyValueTable({
                   rowSpan: f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : void 0,
                   colSpan: f.thColSpan && f.thColSpan > 1 ? f.thColSpan : void 0,
                   className: cn(
-                    "h-[var(--cmp-table-keyValue-height)] box-border bg-[var(--cmp-table-header-bg)] px-[var(--cmp-table-header-paddingX)] py-[var(--cmp-table-keyValue-body-padding)] text-left align-middle",
+                    "box-border bg-[var(--cmp-table-header-bg)] px-[var(--cmp-table-header-paddingX)] text-left align-middle",
                     cellBorder,
                     f.thClass
                   ),
+                  style: {
+                    height: cellHeight,
+                    paddingTop: cellPadY,
+                    paddingBottom: cellPadY
+                  },
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full items-center justify-between gap-[var(--cmp-table-header-gap)]", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-[8px]", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-bold leading-[20px] text-[color:var(--sys-color-fg-primary)]", children: f.label }),
@@ -7866,10 +8098,11 @@ function SKeyValueTable({
                   rowSpan: f.tdRowSpan && f.tdRowSpan > 1 ? f.tdRowSpan : void 0,
                   colSpan: f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : void 0,
                   className: cn(
-                    "h-[var(--cmp-table-keyValue-height)] box-border bg-[var(--sys-color-bg-frame)] p-[var(--cmp-table-keyValue-body-padding)] align-middle",
+                    "box-border bg-[var(--sys-color-bg-frame)] px-[var(--cmp-table-keyValue-body-paddingX-default)] align-middle",
                     cellBorder,
                     f.tdClass
                   ),
+                  style: { height: cellHeight, paddingTop: cellPadY, paddingBottom: cellPadY },
                   children: renderField(f)
                 },
                 `td-${r}-${c}`
@@ -7990,9 +8223,9 @@ var POS_ANCHOR = {
   "top-left": { top: 20, left: 20 },
   "top-center": { top: 20, left: "50%" },
   "top-right": { top: 20, right: 20 },
-  "bottom-left": { bottom: 20, left: 20 },
-  "bottom-center": { bottom: 20, left: "50%" },
-  "bottom-right": { bottom: 20, right: 20 }
+  "bottom-left": { bottom: 100, left: 20 },
+  "bottom-center": { bottom: 100, left: "50%" },
+  "bottom-right": { bottom: 100, right: 20 }
 };
 var counter = 0;
 var SToastContainer = react.forwardRef(
@@ -8352,7 +8585,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
   disabledChips = [],
   size = "sm",
   disabled = false,
-  placeholder = "\uC785\uB825\uD574 \uC8FC\uC138\uC694.",
+  placeholder = "\uD0DC\uADF8 \uC785\uB825 (Enter\uB85C \uB4F1\uB85D / \uCF64\uB9C8\uB85C \uAD6C\uBD84 / \uB744\uC5B4\uC4F0\uAE30 \uBD88\uAC00)",
   name,
   rules,
   error,
@@ -8503,6 +8736,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
     {
       label,
       labelWidth,
+      labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
       labelTooltip,
       labelTooltipProps,
@@ -8573,9 +8807,11 @@ var SChipInput = react.forwardRef(function SChipInput2({
                   paddingInline: isFieldFilled ? "var(--cmp-chip-paddingX)" : void 0,
                   borderWidth: isFieldFilled ? "var(--cmp-chip-border-width)" : void 0,
                   borderStyle: isFieldFilled ? "solid" : void 0,
-                  borderColor: isFieldFilled ? "transparent" : void 0,
+                  // 작성중 필드는 SChip의 editable 수정중(editing) 스타일과 동일하게 —
+                  // bg/보더/글자색 모두 focus 토큰을 사용한다.
+                  borderColor: isFieldFilled ? "var(--cmp-chip-border-focus)" : void 0,
                   borderRadius: isFieldFilled ? "var(--cmp-chip-radius)" : 0,
-                  background: isFieldFilled ? "var(--cmp-chip-bg-default)" : "transparent",
+                  background: isFieldFilled ? "var(--cmp-chip-bg-focus)" : "transparent",
                   overflow: "hidden"
                 },
                 children: [
@@ -8584,7 +8820,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
                     {
                       "aria-hidden": true,
                       className: cn(
-                        "invisible col-start-1 row-start-1 whitespace-pre font-medium",
+                        "invisible col-start-1 row-start-1 whitespace-pre font-normal",
                         size === "md" ? "text-14 leading-24" : "text-12 leading-20"
                       ),
                       children: inputValue !== "" ? inputValue : values.length === 0 ? placeholder : ""
@@ -8597,12 +8833,14 @@ var SChipInput = react.forwardRef(function SChipInput2({
                       name: resolvedName,
                       size: 1,
                       className: cn(
-                        "s-chip-input__input col-start-1 row-start-1 w-full border-0 bg-transparent p-0 font-medium text-(--cmp-chip-content-focus) outline-none placeholder:text-(--cmp-chipInput-text-placeholder) disabled:cursor-not-allowed",
+                        "s-chip-input__input col-start-1 row-start-1 w-full border-0 bg-transparent p-0 font-normal text-(--cmp-chip-content-focus) outline-none placeholder:text-(--cmp-chipInput-text-placeholder) disabled:cursor-not-allowed",
                         size === "md" ? "text-14 leading-24" : "text-12 leading-20"
                       ),
                       style: {
                         minWidth: "1ch",
-                        height: "var(--cmp-chip-height)",
+                        // height는 지정하지 않고 line-height(20/24px)에 맞춰 자동 크기로 둔다.
+                        // var(--cmp-chip-height)(24px)로 고정하면 네이티브 <input>이 남는 세로 여백에
+                        // 텍스트를 아래로 밀어 넣어, 확정된 chip 텍스트보다 2px 낮게 보인다.
                         margin: 0,
                         overflow: "hidden",
                         textOverflow: "ellipsis"
@@ -8647,7 +8885,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
             showMetaInfo && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: "s-chip-input__meta flex items-center gap-8",
+                className: "s-chip-input__meta ml-auto flex items-center gap-8",
                 onMouseDown: (e) => e.preventDefault(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -8657,17 +8895,11 @@ var SChipInput = react.forwardRef(function SChipInput2({
                       style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
                     }
                   ),
-                  showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "span",
-                    {
-                      className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)",
-                      children: [
-                        "\uCD5C\uB300 ",
-                        maxCount,
-                        "\uAC1C"
-                      ]
-                    }
-                  ),
+                  showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)", children: [
+                    "\uCD5C\uB300 ",
+                    maxCount,
+                    "\uAC1C"
+                  ] }),
                   showResetLink && /* @__PURE__ */ jsxRuntime.jsx(
                     STextLink,
                     {