@designbasekorea/ui 0.1.21 → 0.1.23

package/dist/index.js

@@ -1455,7 +1455,7 @@ const Accordion = ({ items, style = 'default', size = 'm', allowMultiple = false
         const itemType = item.itemType || defaultItemType;
         switch (itemType) {
             case 'icon':
-                return item.icon ? (jsxRuntimeExports.jsx("div", { className: "designbase-accordion__icon", children: jsxRuntimeExports.jsx(item.icon, { size: iconSize, color: "var(--db-icon-primary)" }) })) : null;
+                return item.icon ? (jsxRuntimeExports.jsx("div", { className: "designbase-accordion__icon", children: jsxRuntimeExports.jsx(item.icon, { size: iconSize }) })) : null;
             case 'number':
                 return (jsxRuntimeExports.jsxs("div", { className: "designbase-accordion__number", children: [index + 1, "."] }));
             case 'question':
@@ -1471,7 +1471,7 @@ const Accordion = ({ items, style = 'default', size = 'm', allowMultiple = false
                 'designbase-accordion__item--expanded': expanded,
                 'designbase-accordion__item--disabled': item.disabled,
             });
-            return (jsxRuntimeExports.jsxs("div", { className: itemClasses, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "designbase-accordion__trigger", onClick: () => !item.disabled && handleItemToggle(item.id), disabled: item.disabled, "aria-expanded": expanded, "aria-controls": `accordion-content-${item.id}`, children: [renderItemPrefix(item, index), jsxRuntimeExports.jsx("span", { className: "designbase-accordion__title", children: item.title }), jsxRuntimeExports.jsx("div", { className: "designbase-accordion__chevron", children: jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: iconSize, color: "var(--db-icon-primary)" }) })] }), jsxRuntimeExports.jsx("div", { id: `accordion-content-${item.id}`, className: "designbase-accordion__content", "aria-hidden": !expanded, children: jsxRuntimeExports.jsx("div", { className: "designbase-accordion__content-inner", children: item.content }) })] }, item.id));
+            return (jsxRuntimeExports.jsxs("div", { className: itemClasses, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "designbase-accordion__trigger", onClick: () => !item.disabled && handleItemToggle(item.id), disabled: item.disabled, "aria-expanded": expanded, "aria-controls": `accordion-content-${item.id}`, children: [renderItemPrefix(item, index), jsxRuntimeExports.jsx("span", { className: "designbase-accordion__title", children: item.title }), jsxRuntimeExports.jsx("div", { className: "designbase-accordion__chevron", children: jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: iconSize }) })] }), jsxRuntimeExports.jsx("div", { id: `accordion-content-${item.id}`, className: "designbase-accordion__content", "aria-hidden": !expanded, children: jsxRuntimeExports.jsx("div", { className: "designbase-accordion__content-inner", children: item.content }) })] }, item.id));
         }) }));
 };
 Accordion.displayName = 'Accordion';
@@ -3638,7 +3638,7 @@ const Button = React.forwardRef(({ variant = 'primary', size = 'm', radius, full
 });
 Button.displayName = 'Button';
 
-const Alert = ({ title, children, variant = 'info', size = 'm', showIcon = true, closable = false, actions, actionButtons, onClose, className, ...props }) => {
+const Alert = ({ title, children, variant = 'info', size = 'm', showIcon = true, closable = true, actions, actionButtons, onClose, className, ...props }) => {
     const [isVisible, setIsVisible] = React.useState(true);
     const handleClose = () => {
         setIsVisible(false);
@@ -3673,7 +3673,7 @@ const Alert = ({ title, children, variant = 'info', size = 'm', showIcon = true,
         'designbase-alert--with-icon': showIcon,
         'designbase-alert--closable': closable,
     }, className);
-    return (jsxRuntimeExports.jsxs("div", { className: classes, role: "alert", "aria-live": "polite", ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-alert__content", children: [showIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__icon", children: getIcon() })), jsxRuntimeExports.jsxs("div", { className: "designbase-alert__body", children: [title && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__title", children: title })), jsxRuntimeExports.jsx("div", { className: "designbase-alert__message", children: children })] }), closable && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-alert__close", onClick: handleClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: iconSize }) }))] }), (actions || actionButtons) && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__actions", children: actionButtons ? (jsxRuntimeExports.jsx("div", { className: "designbase-alert__action-buttons", children: actionButtons.map((action, index) => (jsxRuntimeExports.jsx(Button, { size: action.size || size, variant: action.variant || 'secondary', onClick: action.onClick, disabled: action.disabled, children: action.label }, index))) })) : (actions) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, role: "alert", "aria-live": "polite", ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-alert__content", children: [showIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__icon", children: getIcon() })), jsxRuntimeExports.jsxs("div", { className: "designbase-alert__body", children: [title && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__title", children: title })), jsxRuntimeExports.jsx("div", { className: "designbase-alert__message", children: children })] }), closable && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-alert__close", onClick: handleClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: iconSize }) }))] }), (actions || actionButtons) && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__actions", children: actionButtons ? (jsxRuntimeExports.jsx("div", { className: "designbase-alert__action-buttons", children: actionButtons.map((action, index) => (jsxRuntimeExports.jsx(Button, { size: action.size || size, variant: action.variant || 'tertiary', onClick: action.onClick, disabled: action.disabled, children: action.label }, index))) })) : (actions) }))] }));
 };
 Alert.displayName = 'Alert';
 
@@ -4492,64 +4492,32 @@ const Backdrop = React.forwardRef(({ open = false, onClick, disableBackdropClick
 });
 Backdrop.displayName = 'Backdrop';
 
-const Banner = ({ title, description, icon, image, imageAlt, actions = [], dismissible = false, autoDismiss, size = 'm', variant = 'default', style = 'solid', position = 'top', alignment = 'left', animated = false, fullWidth = false, shadow = false, rounded = true, backgroundImage, overlayColor, overlayOpacity = 0.1, onDismiss, className, }) => {
-    const [isVisible, setIsVisible] = React.useState(true);
+const Banner = ({ title, description, icon, image, imageAlt, actions = [], size = 'm', variant = 'primary', backgroundImage, className, }) => {
     // 아이콘 크기 계산 (m이 기본값)
     const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
-    // 자동 닫기
-    React.useEffect(() => {
-        if (autoDismiss && autoDismiss > 0) {
-            const timer = setTimeout(() => {
-                handleDismiss();
-            }, autoDismiss);
-            return () => clearTimeout(timer);
-        }
-    }, [autoDismiss]);
-    const handleDismiss = () => {
-        setIsVisible(false);
-        onDismiss?.();
-    };
     const renderActions = () => {
         if (actions.length === 0)
             return null;
         return (jsxRuntimeExports.jsx("div", { className: "designbase-banner__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx(Button, { href: action.href, variant: action.variant || 'primary', size: action.size || 'sm', onClick: action.onClick, target: action.external ? '_blank' : undefined, rel: action.external ? 'noopener noreferrer' : undefined, icon: action.icon, children: action.text }, index))) }));
     };
     const renderBackground = () => {
-        if (!backgroundImage)
+        if (variant !== 'image' || !backgroundImage)
             return null;
-        return (jsxRuntimeExports.jsx("div", { className: "designbase-banner__background", style: {
-                backgroundImage: `url(${backgroundImage})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                backgroundRepeat: 'no-repeat'
-            } }));
-    };
-    const renderOverlay = () => {
-        if (!overlayColor && !backgroundImage)
-            return null;
-        return (jsxRuntimeExports.jsx("div", { className: "designbase-banner__overlay", style: {
-                backgroundColor: overlayColor,
-                opacity: overlayOpacity
-            } }));
-    };
-    const classes = clsx('designbase-banner', `designbase-banner--size-${size}`, `designbase-banner--variant-${variant}`, `designbase-banner--style-${style}`, `designbase-banner--position-${position}`, `designbase-banner--alignment-${alignment}`, {
-        'designbase-banner--animated': animated,
-        'designbase-banner--full-width': fullWidth,
-        'designbase-banner--shadow': shadow,
-        'designbase-banner--rounded': rounded,
-        'designbase-banner--dismissible': dismissible,
-        'designbase-banner--visible': isVisible,
-        'designbase-banner--hidden': !isVisible,
-    }, className);
-    if (!isVisible)
-        return null;
-    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [renderBackground(), renderOverlay(), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__container", children: [icon && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__icon", children: React.isValidElement(icon) ? (React.cloneElement(icon, {
+        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "designbase-banner__background", style: {
+                        backgroundImage: `url(${backgroundImage})`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        backgroundRepeat: 'no-repeat'
+                    } }), jsxRuntimeExports.jsx("div", { className: "designbase-banner__overlay" })] }));
+    };
+    const classes = clsx('designbase-banner', `designbase-banner--${size}`, `designbase-banner--${variant}`, className);
+    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [renderBackground(), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__container", children: [icon && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__icon", children: React.isValidElement(icon) ? (React.cloneElement(icon, {
                             size: iconSize,
                             color: 'currentColor'
-                        })) : icon })), image && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt || title || 'Banner image' }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__content", children: [title && (jsxRuntimeExports.jsx("h3", { className: "designbase-banner__title", children: title })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-banner__description", children: description }))] }), renderActions(), dismissible && (jsxRuntimeExports.jsx("button", { className: "designbase-banner__dismiss", onClick: handleDismiss, "aria-label": "\uB2EB\uAE30", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: iconSize }) }))] })] }));
+                        })) : icon })), image && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt || title || 'Banner image' }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__content", children: [title && (jsxRuntimeExports.jsx("h3", { className: "designbase-banner__title", children: title })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-banner__description", children: description }))] }), renderActions()] })] }));
 };
 
-const BottomSheet = React.forwardRef(({ open = false, onClose, title, subtitle, size = 'm', variant = 'default', disableBackdropClick = false, disableEscapeKeyDown = false, disableDrag = false, maxHeight = 80, animation = 'slide', animationDuration = 300, zIndex = 1000, backdropBlur = true, backdropOpacity = 0.5, stickyHeader = false, stickyFooter = false, className, style, header, footer, children, ...props }, forwardedRef) => {
+const BottomSheet = React.forwardRef(({ open = false, onClose, title, subtitle, size = 'm', variant = 'default', disableBackdropClick = false, disableEscapeKeyDown = false, disableDrag = false, maxHeight = 80, animation = 'slide', animationDuration = 300, zIndex = 1000, showBackdrop = true, backdropBlur = false, backdropOpacity = 0.5, stickyHeader = false, stickyFooter = false, className, style, header, footer, children, ...props }, forwardedRef) => {
     const [sheetHeight, setSheetHeight] = React.useState(maxHeight);
     const [isDragging, setIsDragging] = React.useState(false);
     const [dragStartY, setDragStartY] = React.useState(0);
@@ -4673,7 +4641,7 @@ const BottomSheet = React.forwardRef(({ open = false, onClose, title, subtitle,
         'designbase-backdrop--blur': backdropBlur,
     });
     // Portal을 사용하여 body에 렌더링
-    return $4AOtR$reactdom.createPortal(jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { ref: backdropRef, className: backdropClasses, style: backdropStyle, onClick: handleBackdropClick, role: "presentation", "aria-hidden": !open }), jsxRuntimeExports.jsxs("div", { ref: forwardedRef, className: classes, style: sheetStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'bottom-sheet-title' : undefined, "aria-describedby": subtitle ? 'bottom-sheet-subtitle' : undefined, ...props, children: [!disableDrag && (jsxRuntimeExports.jsx("div", { className: "designbase-bottom-sheet__handle", onMouseDown: handleDragStart, onTouchStart: handleDragStart })), (title || header) && (jsxRuntimeExports.jsx("div", { ref: headerRef, className: "designbase-bottom-sheet__header", children: header || (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [title && (jsxRuntimeExports.jsx("h2", { id: "bottom-sheet-title", className: "designbase-bottom-sheet__title", children: title })), subtitle && (jsxRuntimeExports.jsx("p", { id: "bottom-sheet-subtitle", className: "designbase-bottom-sheet__subtitle", children: subtitle }))] })) })), jsxRuntimeExports.jsx("div", { className: "designbase-bottom-sheet__content", children: children }), footer && (jsxRuntimeExports.jsx("div", { className: "designbase-bottom-sheet__footer", children: footer }))] })] }), document.body);
+    return $4AOtR$reactdom.createPortal(jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [showBackdrop && (jsxRuntimeExports.jsx("div", { ref: backdropRef, className: backdropClasses, style: backdropStyle, onClick: handleBackdropClick, role: "presentation", "aria-hidden": !open })), jsxRuntimeExports.jsxs("div", { ref: forwardedRef, className: classes, style: sheetStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'bottom-sheet-title' : undefined, "aria-describedby": subtitle ? 'bottom-sheet-subtitle' : undefined, ...props, children: [!disableDrag && (jsxRuntimeExports.jsx("div", { className: "designbase-bottom-sheet__handle", onMouseDown: handleDragStart, onTouchStart: handleDragStart })), (title || header) && (jsxRuntimeExports.jsx("div", { ref: headerRef, className: "designbase-bottom-sheet__header", children: header || (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [title && (jsxRuntimeExports.jsx("h2", { id: "bottom-sheet-title", className: "designbase-bottom-sheet__title", children: title })), subtitle && (jsxRuntimeExports.jsx("p", { id: "bottom-sheet-subtitle", className: "designbase-bottom-sheet__subtitle", children: subtitle }))] })) })), jsxRuntimeExports.jsx("div", { className: "designbase-bottom-sheet__content", children: children }), footer && (jsxRuntimeExports.jsx("div", { className: "designbase-bottom-sheet__footer", children: footer }))] })] }), document.body);
 });
 BottomSheet.displayName = 'BottomSheet';
 
@@ -4894,16 +4862,27 @@ const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValu
     const inputId = React.useId();
     const helperTextId = React.useId();
     const errorMessageId = React.useId();
+    const [showPassword, setShowPassword] = React.useState(false);
     const handleChange = (e) => {
         onChange?.(e.target.value);
     };
+    const handlePasswordToggle = () => {
+        setShowPassword(!showPassword);
+    };
+    // 비밀번호 타입인 경우 토글 아이콘 사용
+    const isPassword = type === 'password';
+    const actualType = isPassword ? (showPassword ? 'text' : 'password') : type;
+    const PasswordIcon = showPassword ? icons.HideIcon : icons.ShowIcon;
+    // 검색 타입인 경우 자동으로 검색 아이콘 사용
+    const isSearch = type === 'search';
+    const actualStartIcon = isSearch ? icons.SearchIcon : StartIcon;
     const classes = clsx('designbase-input', `designbase-input--${size}`, {
         'designbase-input--error': error,
         'designbase-input--disabled': disabled,
         'designbase-input--readonly': readOnly,
         'designbase-input--full-width': fullWidth,
-        'designbase-input--with-start-icon': StartIcon,
-        'designbase-input--with-end-icon': EndIcon,
+        'designbase-input--with-start-icon': actualStartIcon,
+        'designbase-input--with-end-icon': EndIcon || isPassword,
     }, className);
     const inputClasses = clsx('designbase-input__field', inputClassName);
     const iconSizeMap = {
@@ -4912,7 +4891,7 @@ const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValu
         lg: 18,
     };
     const iconSize = iconSizeMap[size];
-    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [label && (jsxRuntimeExports.jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), jsxRuntimeExports.jsxs("div", { className: "designbase-input__wrapper", children: [StartIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-input__start-icon", children: jsxRuntimeExports.jsx(StartIcon, { size: iconSize }) })), jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), EndIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-input__end-icon", children: jsxRuntimeExports.jsx(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntimeExports.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntimeExports.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [label && (jsxRuntimeExports.jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), jsxRuntimeExports.jsxs("div", { className: "designbase-input__wrapper", children: [actualStartIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-input__start-icon", children: React.createElement(actualStartIcon, { size: iconSize }) })), jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: actualType, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), isPassword && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-input__password-toggle", onClick: handlePasswordToggle, disabled: disabled, "aria-label": showPassword ? '비밀번호 숨기기' : '비밀번호 보기', children: React.createElement(PasswordIcon, { size: iconSize }) })), EndIcon && !isPassword && (jsxRuntimeExports.jsx("div", { className: "designbase-input__end-icon", children: React.createElement(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntimeExports.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntimeExports.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
 });
 Input.displayName = 'Input';
 
@@ -5563,7 +5542,7 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
                                                                 }, title: event.title, children: event.title }, event.id));
                                                         }) }, index));
                                                 }) }, i));
-                                        }) })] })] }))] }), jsxRuntimeExports.jsxs(Modal, { isOpen: showEventModal, onClose: handleCloseModal, title: isEditing ? '일정 편집' : '새 일정 추가', size: "l", children: [jsxRuntimeExports.jsx(ModalBody, { children: jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__event-form", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC81C\uBAA9 *" }), jsxRuntimeExports.jsx(Input, { value: eventForm.title, onChange: (value) => setEventForm(prev => ({ ...prev, title: value })), placeholder: "\uC77C\uC815 \uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC124\uBA85" }), jsxRuntimeExports.jsx(Input, { value: eventForm.description, onChange: (value) => setEventForm(prev => ({ ...prev, description: value })), placeholder: "\uC77C\uC815 \uC124\uBA85\uC744 \uC785\uB825\uD558\uC138\uC694" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uB0A0\uC9DC" }), jsxRuntimeExports.jsx(Input, { type: "date", value: selectedDate.toISOString().split('T')[0], onChange: (value) => {
+                                        }) })] })] }))] }), jsxRuntimeExports.jsxs(Modal, { isOpen: showEventModal, onClose: handleCloseModal, title: isEditing ? '일정 편집' : '새 일정 추가', size: "m", children: [jsxRuntimeExports.jsx(ModalBody, { children: jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__event-form", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC81C\uBAA9 *" }), jsxRuntimeExports.jsx(Input, { value: eventForm.title, onChange: (value) => setEventForm(prev => ({ ...prev, title: value })), placeholder: "\uC77C\uC815 \uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC124\uBA85" }), jsxRuntimeExports.jsx(Input, { value: eventForm.description, onChange: (value) => setEventForm(prev => ({ ...prev, description: value })), placeholder: "\uC77C\uC815 \uC124\uBA85\uC744 \uC785\uB825\uD558\uC138\uC694" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uB0A0\uC9DC" }), jsxRuntimeExports.jsx(Input, { type: "date", value: selectedDate.toISOString().split('T')[0], onChange: (value) => {
                                                 const newDate = new Date(value);
                                                 setSelectedDate(newDate);
                                             } })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC77C\uC815 \uD0C0\uC785" }), jsxRuntimeExports.jsx(Select, { value: eventForm.type, onChange: (value) => {
@@ -5682,23 +5661,20 @@ const Image$1 = ({ src, alt = '', ratio = 'auto', fit = 'cover', loading = 'lazy
     return (jsxRuntimeExports.jsxs("div", { className: classes, style: containerStyle, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [showPlaceholder && (jsxRuntimeExports.jsxs("div", { className: placeholderClasses, children: [placeholder === 'skeleton' && (jsxRuntimeExports.jsx("div", { className: "designbase-image__skeleton" })), placeholder === 'blur' && (jsxRuntimeExports.jsx("div", { className: "designbase-image__blur" }))] })), imageState === 'error' && (jsxRuntimeExports.jsxs("div", { className: "designbase-image__error", children: [jsxRuntimeExports.jsx(icons.GalleryIcon, { size: errorIconSize, color: "currentColor" }), jsxRuntimeExports.jsx("span", { className: "designbase-image__error-text", children: alt || '이미지를 불러올 수 없습니다' })] })), jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentSrc, alt: alt, loading: loading, className: imageClasses, onLoad: handleLoad, onError: handleError, draggable: false })] }));
 };
 
-const Card = React.forwardRef(({ title, subtitle, description, children, image, icon: Icon, actions = [], tags = [], meta, variant = 'default', size = 'm', layout = 'vertical', imagePosition = 'top', fullWidth = false, clickable = false, hoverable = false, selectable = false, selected = false, disabled = false, loading = false, className, style, onClick, onSelect, onAction, }, ref) => {
-    // 아이콘 크기 계산 (m이 기본값) - 카드에 맞게 조정
-    const iconSize = size === 's' ? 16 : size === 'l' ? 20 : size === 'xl' ? 24 : 18;
+const Card = React.forwardRef(function Card({ title, subtitle, description, children, image, icon: Icon, actions = [], tags = [], meta, variant = 'default', size = 'm', layout = 'vertical', imagePosition = 'top', fullWidth = false, clickable = false, hoverable = false, selectable = false, selected = false, disabled = false, loading = false, className, style, onClick, onSelect, onAction, }, ref) {
+    // 아이콘 크기(과도하지 않게 정규화)
+    const iconSize = size === 's' ? 16 : size === 'l' ? 22 : size === 'xl' ? 24 : 18;
     const handleClick = () => {
-        if (!disabled && !loading && onClick) {
+        if (!disabled && !loading && onClick)
             onClick();
-        }
     };
     const handleSelect = () => {
-        if (!disabled && !loading && selectable && onSelect) {
+        if (!disabled && !loading && selectable && onSelect)
             onSelect(!selected);
-        }
     };
     const handleActionClick = (action, index) => {
-        if (!disabled && !loading && action.onClick) {
+        if (!disabled && !loading && action.onClick)
             action.onClick();
-        }
         onAction?.(action, index);
     };
     const classes = clsx('designbase-card', `designbase-card--${variant}`, `designbase-card--${size}`, `designbase-card--${layout}`, {
@@ -5709,51 +5685,63 @@ const Card = React.forwardRef(({ title, subtitle, description, children, image,
         'designbase-card--selected': selected,
         'designbase-card--disabled': disabled,
         'designbase-card--loading': loading,
-        'designbase-card--with-image': image,
-        [`designbase-card--image-${imagePosition}`]: image,
+        'designbase-card--with-image': !!image,
+        [`designbase-card--image-${imagePosition}`]: !!image,
     }, className);
-    // 이미지 렌더링
     const renderImage = () => {
         if (!image)
             return null;
         const imageClasses = clsx('designbase-card__image', `designbase-card__image--${imagePosition}`);
         return (jsxRuntimeExports.jsx("div", { className: imageClasses, children: jsxRuntimeExports.jsx(Image$1, { src: image.src, alt: image.alt || title || 'Card image', ratio: image.ratio, fit: image.fit, loading: image.loading, placeholder: image.placeholder, onClick: image.onClick, className: "designbase-card__image-element" }) }));
     };
-    // 아이콘 렌더링
     const renderIcon = () => {
         if (!Icon)
             return null;
-        return (jsxRuntimeExports.jsx("div", { className: "designbase-card__icon", children: jsxRuntimeExports.jsx(Icon, { size: iconSize, color: "currentColor", className: "designbase-card__icon-element" }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "designbase-card__icon", "aria-hidden": "true", children: jsxRuntimeExports.jsx(Icon, { size: iconSize, color: "currentColor", className: "designbase-card__icon-element" }) }));
     };
-    // 태그 렌더링
     const renderTags = () => {
-        if (tags.length === 0)
+        if (!tags?.length)
             return null;
-        return (jsxRuntimeExports.jsx("div", { className: "designbase-card__tags", children: tags.map((tag, index) => (jsxRuntimeExports.jsx("span", { className: "designbase-card__tag", children: tag }, index))) }));
+        return (jsxRuntimeExports.jsx("div", { className: "designbase-card__tags", children: tags.map((tag, i) => (jsxRuntimeExports.jsx("span", { className: "designbase-card__tag", children: tag }, i))) }));
     };
-    // 메타 정보 렌더링
     const renderMeta = () => {
         if (!meta)
             return null;
-        return (jsxRuntimeExports.jsxs("div", { className: "designbase-card__meta", children: [meta.author && (jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-item", children: [jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-label", children: "\uC791\uC131\uC790:" }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-value", children: meta.author })] })), meta.date && (jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-item", children: [jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-label", children: "\uB0A0\uC9DC:" }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-value", children: meta.date })] })), meta.views !== undefined && (jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-item", children: [jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-label", children: "\uC870\uD68C\uC218:" }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-value", children: meta.views })] })), meta.likes !== undefined && (jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-item", children: [jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-label", children: "\uC88B\uC544\uC694:" }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-value", children: meta.likes })] })), meta.comments !== undefined && (jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-item", children: [jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-label", children: "\uB313\uAE00:" }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-value", children: meta.comments })] })), meta.custom && Object.entries(meta.custom).map(([key, value]) => (jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-item", children: [jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-label", children: [key, ":"] }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-value", children: value })] }, key)))] }));
+        const items = [];
+        if (meta.author)
+            items.push(['작성자', meta.author]);
+        if (meta.date)
+            items.push(['날짜', meta.date]);
+        if (typeof meta.views === 'number')
+            items.push(['조회수', meta.views]);
+        if (typeof meta.likes === 'number')
+            items.push(['좋아요', meta.likes]);
+        if (typeof meta.comments === 'number')
+            items.push(['댓글', meta.comments]);
+        if (meta.custom) {
+            Object.entries(meta.custom).forEach(([key, value]) => {
+                items.push([key, value]);
+            });
+        }
+        if (!items.length)
+            return null;
+        return (jsxRuntimeExports.jsx("div", { className: "designbase-card__meta", children: items.map(([label, value], idx) => (jsxRuntimeExports.jsxs("span", { className: "designbase-card__meta-item", children: [jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-label", children: label }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-sep", children: "\u00B7" }), jsxRuntimeExports.jsx("span", { className: "designbase-card__meta-value", children: value })] }, `${label}-${idx}`))) }));
     };
-    // 액션 버튼들 렌더링
     const renderActions = () => {
-        if (actions.length === 0)
+        if (!actions?.length)
             return null;
         return (jsxRuntimeExports.jsx("div", { className: "designbase-card__actions", children: actions.map((action, index) => {
                 const ActionIcon = action.icon;
-                return (jsxRuntimeExports.jsx(Button, { variant: action.variant || 'primary', size: action.size || 's', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: action.loading, icon: ActionIcon, children: action.label }, index));
+                return (jsxRuntimeExports.jsx(Button, { variant: action.variant || 'primary', size: action.size || 's', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: !!action.loading, icon: ActionIcon, children: action.label }, index));
             }) }));
     };
-    // 카드 내용 렌더링
-    const renderContent = () => (jsxRuntimeExports.jsxs("div", { className: "designbase-card__content", children: [renderIcon(), (title || subtitle) && (jsxRuntimeExports.jsxs("div", { className: "designbase-card__header", children: [title && jsxRuntimeExports.jsx("h3", { className: "designbase-card__title", children: title }), subtitle && jsxRuntimeExports.jsx("h4", { className: "designbase-card__subtitle", children: subtitle })] })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-card__description", children: description })), children && (jsxRuntimeExports.jsx("div", { className: "designbase-card__body", children: children })), renderTags(), renderMeta(), renderActions()] }));
+    const renderContent = () => (jsxRuntimeExports.jsxs("div", { className: "designbase-card__content", children: [renderIcon(), (title || subtitle) && (jsxRuntimeExports.jsxs("div", { className: "designbase-card__header", children: [title && jsxRuntimeExports.jsx("h3", { className: "designbase-card__title", children: title }), subtitle && jsxRuntimeExports.jsx("p", { className: "designbase-card__subtitle", children: subtitle })] })), description && jsxRuntimeExports.jsx("p", { className: "designbase-card__description", children: description }), children && jsxRuntimeExports.jsx("div", { className: "designbase-card__body", children: children }), renderTags(), renderMeta(), renderActions()] }));
     return (jsxRuntimeExports.jsxs("div", { ref: ref, className: classes, style: style, onClick: clickable ? handleClick : undefined, onKeyDown: (e) => {
             if (clickable && (e.key === 'Enter' || e.key === ' ')) {
                 e.preventDefault();
                 handleClick();
             }
-        }, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-label": clickable ? title : undefined, children: [selectable && (jsxRuntimeExports.jsx("div", { className: "designbase-card__select-overlay", onClick: handleSelect, children: jsxRuntimeExports.jsx("input", { type: "checkbox", checked: selected, onChange: handleSelect, className: "designbase-card__select-input" }) })), loading && (jsxRuntimeExports.jsx("div", { className: "designbase-card__loading-overlay", children: jsxRuntimeExports.jsx("div", { className: "designbase-card__loading-spinner" }) })), imagePosition === 'background' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderImage(), jsxRuntimeExports.jsx("div", { className: "designbase-card__overlay", children: renderContent() })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [imagePosition === 'top' && renderImage(), imagePosition === 'left' && renderImage(), renderContent(), imagePosition === 'bottom' && renderImage(), imagePosition === 'right' && renderImage()] }))] }));
+        }, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-label": clickable ? title : undefined, "aria-disabled": disabled || loading ? true : undefined, children: [selectable && (jsxRuntimeExports.jsx("div", { className: "designbase-card__select-overlay", onClick: handleSelect, children: jsxRuntimeExports.jsx("input", { type: "checkbox", checked: selected, onChange: handleSelect, className: "designbase-card__select-input", "aria-label": "\uCE74\uB4DC \uC120\uD0DD" }) })), loading && (jsxRuntimeExports.jsx("div", { className: "designbase-card__loading-overlay", "aria-live": "polite", "aria-busy": "true", children: jsxRuntimeExports.jsx("div", { className: "designbase-card__loading-spinner" }) })), imagePosition === 'background' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderImage(), jsxRuntimeExports.jsx("div", { className: "designbase-card__overlay", children: renderContent() })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(imagePosition === 'top' || imagePosition === 'left') && renderImage(), renderContent(), (imagePosition === 'bottom' || imagePosition === 'right') && renderImage()] }))] }));
 });
 Card.displayName = 'Card';
 
@@ -5915,28 +5903,26 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
     const handleTouchMove = React.useCallback((event) => {
         if (!isDragging || !enableTouch || disabled || readonly || !touchStartRef.current)
             return;
-        event.preventDefault();
         const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
         const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
         const deltaX = clientX - touchStartRef.current.x;
         const deltaY = clientY - touchStartRef.current.y;
         // 수평 스와이프만 처리 (수직 스크롤 방지)
         if (Math.abs(deltaX) > Math.abs(deltaY)) {
+            event.preventDefault();
             setDragOffset(deltaX);
         }
     }, [isDragging, enableTouch, disabled, readonly]);
     // 터치/드래그 종료
     const handleTouchEnd = React.useCallback(() => {
-        if (!isDragging || !enableTouch || disabled || readonly || !touchStartRef.current)
+        if (!enableTouch || disabled || readonly || !touchStartRef.current)
             return;
         const endTime = Date.now();
         const duration = endTime - touchStartRef.current.time;
-        const velocity = Math.abs(dragOffset) / duration;
-        setIsDragging(false);
-        touchStartRef.current = null;
-        // 속도나 거리에 따라 슬라이드 변경
+        const velocity = Math.abs(dragOffset) / Math.max(duration, 1);
         const threshold = swipeSensitivity;
         const velocityThreshold = 0.5;
+        // 속도나 거리에 따라 슬라이드 변경
         if (Math.abs(dragOffset) > threshold || velocity > velocityThreshold) {
             if (dragOffset > 0) {
                 goToPrevious();
@@ -5945,8 +5931,11 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
                 goToNext();
             }
         }
+        // 상태 초기화
+        setIsDragging(false);
         setDragOffset(0);
-    }, [isDragging, enableTouch, disabled, readonly, dragOffset, swipeSensitivity, goToPrevious, goToNext]);
+        touchStartRef.current = null;
+    }, [enableTouch, disabled, readonly, dragOffset, swipeSensitivity, goToPrevious, goToNext]);
     // 마우스 휠 핸들러
     const handleWheel = React.useCallback((event) => {
         if (!enableWheel || disabled || readonly)
@@ -6015,11 +6004,13 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
     const currentItem = items[currentIndex];
     // 슬라이드 스타일 계산
     const getSlideStyle = () => {
-        const translateX = -(currentIndex * (100 / itemsPerView)) + (dragOffset / (containerRef.current?.offsetWidth || 1)) * (100 / itemsPerView);
+        const containerWidth = containerRef.current?.offsetWidth || 1;
+        const translateX = -(currentIndex * (100 / itemsPerView)) + (dragOffset / containerWidth) * (100 / itemsPerView);
         return {
             transform: `translateX(${translateX}%)`,
             gap: `${gap}px`,
-            transition: isDragging ? 'none' : `transform ${transitionDuration}ms ease`,
+            transition: isDragging ? 'none' : `transform ${transitionDuration}ms cubic-bezier(0.4, 0.0, 0.2, 1)`,
+            willChange: isDragging ? 'transform' : 'auto',
         };
     };
     // 인디케이터 활성 상태 확인
@@ -6040,7 +6031,7 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
             'designbase-carousel--dragging': isDragging,
             'designbase-carousel--fullscreen': isFullscreen,
             'designbase-carousel--transitioning': isTransitioning,
-        }, className), children: [jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-carousel__container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStartEvent, onTouchMove: handleTouchMoveEvent, onTouchEnd: handleTouchEndEvent, children: [jsxRuntimeExports.jsx("div", { ref: trackRef, className: "designbase-carousel__track", style: getSlideStyle(), children: items.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-carousel__slide', {
+        }, className), children: [jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-carousel__container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStartEvent, onTouchMove: handleTouchMoveEvent, onTouchEnd: handleTouchEndEvent, onTouchCancel: handleTouchEndEvent, children: [jsxRuntimeExports.jsx("div", { ref: trackRef, className: "designbase-carousel__track", style: getSlideStyle(), children: items.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-carousel__slide', {
                                 'designbase-carousel__slide--active': index === currentIndex,
                             }), style: {
                                 width: `${100 / itemsPerView}%`,
@@ -6115,7 +6106,278 @@ const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', delet
 };
 Chip.displayName = 'Chip';
 
-const Confirm = ({ open, title, children, confirmText = '확인', cancelText = '취소', confirmVariant = 'primary', variant = 'info', size = 'm', showIcon = true, confirmDisabled = false, cancelDisabled = false, onConfirm, onCancel, onClose, closeOnEscape = true, closeOnOverlayClick = true, className, ...props }) => {
+const ColorPicker$1 = ({ size = 'm', type = 'dropdown', value, defaultValue = '#006FFF', showInput = true, showAlpha = false, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, className, }) => {
+    const [selectedColor, setSelectedColor] = React.useState(value || defaultValue);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [hue, setHue] = React.useState(211);
+    const [saturation, setSaturation] = React.useState(100);
+    const [lightness, setLightness] = React.useState(50);
+    const [alpha, setAlpha] = React.useState(100);
+    const [colorFormat, setColorFormat] = React.useState('hex');
+    const [isCopied, setIsCopied] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(defaultValue);
+    const pickerRef = React.useRef(null);
+    // value prop이 변경되면 업데이트
+    React.useEffect(() => {
+        if (value) {
+            setSelectedColor(value);
+            updateHSLFromHex(value);
+        }
+    }, [value]);
+    // HEX를 HSL로 변환
+    const updateHSLFromHex = (hex) => {
+        const rgb = hexToRgb(hex);
+        if (rgb) {
+            const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+            setHue(hsl.h);
+            setSaturation(hsl.s);
+            setLightness(hsl.l);
+        }
+    };
+    // HEX를 RGB로 변환
+    const hexToRgb = (hex) => {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    };
+    // RGB를 HSL로 변환
+    const rgbToHsl = (r, g, b) => {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s = 0, l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+    };
+    // HSL을 RGB로 변환
+    const hslToRgb = (h, s, l) => {
+        l /= 100;
+        const a = s * Math.min(l, 1 - l) / 100;
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+            return Math.round(255 * color);
+        };
+        return { r: f(0), g: f(8), b: f(4) };
+    };
+    // HSL을 HEX로 변환
+    const hslToHex = (h, s, l) => {
+        const rgb = hslToRgb(h, s, l);
+        const toHex = (n) => n.toString(16).padStart(2, '0');
+        return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`.toUpperCase();
+    };
+    // 현재 포맷에 따른 색상 문자열 반환
+    const getFormattedColor = () => {
+        const rgb = hslToRgb(hue, saturation, lightness);
+        const alphaValue = alpha / 100;
+        switch (colorFormat) {
+            case 'hex':
+                return hslToHex(hue, saturation, lightness);
+            case 'rgb':
+                return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+            case 'rgba':
+                return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaValue.toFixed(2)})`;
+            case 'hsl':
+                return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+            case 'hsla':
+                return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alphaValue.toFixed(2)})`;
+            default:
+                return hslToHex(hue, saturation, lightness);
+        }
+    };
+    // 색상 변경 핸들러
+    const handleColorChange = (newColor) => {
+        setSelectedColor(newColor);
+        onChange?.(newColor);
+    };
+    // Hue 슬라이더 변경
+    const handleHueChange = (e) => {
+        const newHue = parseInt(e.target.value);
+        setHue(newHue);
+        const newColor = hslToHex(newHue, saturation, lightness);
+        handleColorChange(newColor);
+    };
+    // Saturation 슬라이더 변경
+    const handleSaturationChange = (e) => {
+        const newSaturation = parseInt(e.target.value);
+        setSaturation(newSaturation);
+        const newColor = hslToHex(hue, newSaturation, lightness);
+        handleColorChange(newColor);
+    };
+    // Lightness 슬라이더 변경
+    const handleLightnessChange = (e) => {
+        const newLightness = parseInt(e.target.value);
+        setLightness(newLightness);
+        const newColor = hslToHex(hue, saturation, newLightness);
+        handleColorChange(newColor);
+    };
+    // Alpha 슬라이더 변경
+    const handleAlphaChange = (e) => {
+        const newAlpha = parseInt(e.target.value);
+        setAlpha(newAlpha);
+        const newColor = getFormattedColorWithAlpha(newAlpha);
+        handleColorChange(newColor);
+    };
+    // Alpha 값을 포함한 색상 문자열 반환
+    const getFormattedColorWithAlpha = (alphaVal) => {
+        const rgb = hslToRgb(hue, saturation, lightness);
+        const alphaValue = alphaVal / 100;
+        if (colorFormat === 'rgba') {
+            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaValue.toFixed(2)})`;
+        }
+        else if (colorFormat === 'hsla') {
+            return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alphaValue.toFixed(2)})`;
+        }
+        return hslToHex(hue, saturation, lightness);
+    };
+    // 입력 필드 변경
+    const handleInputChange = (e) => {
+        const newValue = e.target.value.trim();
+        setInputValue(newValue);
+    };
+    // 입력 필드에서 포커스 아웃 시 검증 및 적용
+    const handleInputBlur = () => {
+        let isValid = false;
+        // HEX 검증
+        if (/^#[0-9A-F]{6}$/i.test(inputValue)) {
+            handleColorChange(inputValue.toUpperCase());
+            updateHSLFromHex(inputValue);
+            isValid = true;
+        }
+        // RGB 검증
+        else if (/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.test(inputValue)) {
+            const match = inputValue.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+            if (match) {
+                const r = parseInt(match[1]);
+                const g = parseInt(match[2]);
+                const b = parseInt(match[3]);
+                if (r <= 255 && g <= 255 && b <= 255) {
+                    const hsl = rgbToHsl(r, g, b);
+                    setHue(hsl.h);
+                    setSaturation(hsl.s);
+                    setLightness(hsl.l);
+                    const hex = hslToHex(hsl.h, hsl.s, hsl.l);
+                    handleColorChange(hex);
+                    isValid = true;
+                }
+            }
+        }
+        // RGBA 검증
+        else if (/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i.test(inputValue)) {
+            const match = inputValue.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i);
+            if (match) {
+                const r = parseInt(match[1]);
+                const g = parseInt(match[2]);
+                const b = parseInt(match[3]);
+                const a = parseFloat(match[4]);
+                if (r <= 255 && g <= 255 && b <= 255 && a >= 0 && a <= 1) {
+                    const hsl = rgbToHsl(r, g, b);
+                    setHue(hsl.h);
+                    setSaturation(hsl.s);
+                    setLightness(hsl.l);
+                    setAlpha(Math.round(a * 100));
+                    const hex = hslToHex(hsl.h, hsl.s, hsl.l);
+                    handleColorChange(hex);
+                    isValid = true;
+                }
+            }
+        }
+        // 유효하지 않으면 이전 값으로 복원
+        if (!isValid) {
+            setInputValue(getFormattedColor());
+        }
+    };
+    // 복사 기능
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(getFormattedColor());
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+    // 포맷 변경 시 inputValue 업데이트
+    React.useEffect(() => {
+        setInputValue(getFormattedColor());
+    }, [colorFormat, hue, saturation, lightness, alpha]);
+    // 외부 클릭 감지
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen && type === 'dropdown') {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, type]);
+    const togglePicker = () => {
+        if (disabled || readonly)
+            return;
+        setIsOpen(!isOpen);
+    };
+    const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, {
+        'designbase-color-picker--disabled': disabled,
+        'designbase-color-picker--readonly': readonly,
+        'designbase-color-picker--open': isOpen,
+        'designbase-color-picker--no-input': !showInput,
+    }, className);
+    // 컬러 선택 UI
+    const renderColorSelector = () => (jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__selector", children: [showFormatSelector && (jsxRuntimeExports.jsx("div", { className: "designbase-color-picker__format-selector", children: ['hex', 'rgb', 'rgba', 'hsl', 'hsla'].map((format) => (jsxRuntimeExports.jsx("button", { type: "button", className: clsx('designbase-color-picker__format-button', { 'designbase-color-picker__format-button--active': colorFormat === format }), onClick: () => setColorFormat(format), children: format.toUpperCase() }, format))) })), jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__sliders", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__slider-group", children: [jsxRuntimeExports.jsxs("label", { className: "designbase-color-picker__slider-label", children: ["Hue ", jsxRuntimeExports.jsxs("span", { className: "designbase-color-picker__slider-value", children: [hue, "\u00B0"] })] }), jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "360", value: hue, onChange: handleHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__slider-group", children: [jsxRuntimeExports.jsxs("label", { className: "designbase-color-picker__slider-label", children: ["Saturation ", jsxRuntimeExports.jsxs("span", { className: "designbase-color-picker__slider-value", children: [saturation, "%"] })] }), jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "100", value: saturation, onChange: handleSaturationChange, className: "designbase-color-picker__slider designbase-color-picker__slider--saturation", style: {
+                                    background: `linear-gradient(to right, 
+                                hsl(${hue}, 0%, ${lightness}%), 
+                                hsl(${hue}, 100%, ${lightness}%))`
+                                } })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__slider-group", children: [jsxRuntimeExports.jsxs("label", { className: "designbase-color-picker__slider-label", children: ["Lightness ", jsxRuntimeExports.jsxs("span", { className: "designbase-color-picker__slider-value", children: [lightness, "%"] })] }), jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "100", value: lightness, onChange: handleLightnessChange, className: "designbase-color-picker__slider designbase-color-picker__slider--lightness", style: {
+                                    background: `linear-gradient(to right, 
+                                hsl(${hue}, ${saturation}%, 0%), 
+                                hsl(${hue}, ${saturation}%, 50%), 
+                                hsl(${hue}, ${saturation}%, 100%))`
+                                } })] }), showAlpha && (jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__slider-group", children: [jsxRuntimeExports.jsxs("label", { className: "designbase-color-picker__slider-label", children: ["Alpha ", jsxRuntimeExports.jsxs("span", { className: "designbase-color-picker__slider-value", children: [alpha, "%"] })] }), jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "100", value: alpha, onChange: handleAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: {
+                                    background: `linear-gradient(to right, 
+                                    transparent, 
+                                    hsl(${hue}, ${saturation}%, ${lightness}%))`
+                                } })] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__preview", children: [jsxRuntimeExports.jsx("div", { className: "designbase-color-picker__preview-box", style: {
+                            backgroundColor: showAlpha
+                                ? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
+                                : `hsl(${hue}, ${saturation}%, ${lightness}%)`
+                        } }), jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__preview-info", children: [jsxRuntimeExports.jsx("div", { className: "designbase-color-picker__preview-value", children: getFormattedColor() }), showCopyButton && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: handleCopy, "aria-label": "Copy color value", children: isCopied ? jsxRuntimeExports.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntimeExports.jsx(icons.CopyIcon, { size: 14 }) }))] })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { ref: pickerRef, className: classes, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-color-picker__trigger", children: [jsxRuntimeExports.jsx("div", { className: "designbase-color-picker__color-display", onClick: togglePicker, children: jsxRuntimeExports.jsx("div", { className: "designbase-color-picker__color-box", style: {
+                                backgroundColor: showAlpha
+                                    ? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
+                                    : `hsl(${hue}, ${saturation}%, ${lightness}%)`
+                            } }) }), showInput && (jsxRuntimeExports.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => {
+                            e.stopPropagation();
+                            handleCopy();
+                        }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsxRuntimeExports.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntimeExports.jsx(icons.CopyIcon, { size: 14 }) })), jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-color-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "Toggle color picker", children: jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsxRuntimeExports.jsx("div", { className: "designbase-color-picker__dropdown", children: renderColorSelector() })), type === 'modal' && (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: renderColorSelector() }))] }));
+};
+ColorPicker$1.displayName = 'ColorPicker';
+
+ColorPicker;
+
+const Confirm = ({ open, title, children, confirmText = '확인', cancelText = '취소', confirmVariant = 'primary', variant = 'info', size = 's', showIcon = true, confirmDisabled = false, cancelDisabled = false, onConfirm, onCancel, onClose, closeOnEscape = true, closeOnOverlayClick = true, className, ...props }) => {
     const modalRef = React.useRef(null);
     // ESC 키 처리
     React.useEffect(() => {
@@ -6285,7 +6547,7 @@ const Container = ({ size = 'l', maxWidth, variant = 'plain', padding = 'm', mar
     return (jsxRuntimeExports.jsx("div", { className: classes, style: style, children: children }));
 };
 
-const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = false, badge, badgeColor = 'primary', variant = 'default', type = 'inline', size = 'm', style = 'dropdown', subItems, expanded = false, expandable = false, depth = 0, onClick, onChildClick, className, }) => {
+const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = false, badge, badgeColor = 'primary', variant = 'default', type = 'block', size = 'm', style = 'accordion', subItems, expanded = false, expandable = false, depth = 0, onClick, onChildClick, className, }) => {
     const [internalExpanded, setInternalExpanded] = React.useState(expanded);
     // expanded prop이 변경될 때 internalExpanded 업데이트
     React.useEffect(() => {
@@ -6340,7 +6602,7 @@ const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = fals
     return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsxs("div", { className: contentClasses, onClick: handleClick, children: [Icon && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__icon', `designbase-menu-item__icon--${variant}`, {
                             'designbase-menu-item__icon--active': active,
                             'designbase-menu-item__icon--disabled': disabled,
-                        }), children: jsxRuntimeExports.jsx(Icon, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-menu-item__label", children: label }), badge && (jsxRuntimeExports.jsx(Badge, { count: typeof badge === 'string' ? parseInt(badge) : badge, variant: badgeColor === 'neutral' ? 'secondary' : badgeColor, size: "s", style: "number" })), hasChildren && (jsxRuntimeExports.jsx("div", { className: "designbase-menu-item__expand-icon", children: isExpanded ? (jsxRuntimeExports.jsx(icons.ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 16 })) }))] }), hasChildren && isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__children', `designbase-menu-item__children--${style}`), children: subItems.map((child) => (jsxRuntimeExports.jsx(MenuItem, { id: child.id, label: child.label, href: child.href, icon: child.icon, active: child.active, disabled: child.disabled, badge: child.badge, badgeColor: child.badgeColor, variant: child.variant, type: child.type, size: size, style: child.style || style, subItems: child.subItems, depth: depth + 1, onClick: () => handleChildClick(child), onChildClick: onChildClick }, child.id))) }))] }));
+                        }), children: jsxRuntimeExports.jsx(Icon, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-menu-item__label", children: label }), badge && (jsxRuntimeExports.jsx(Badge, { count: typeof badge === 'string' ? parseInt(badge) : badge, variant: badgeColor === 'neutral' ? 'secondary' : badgeColor, size: "s", style: "number" })), hasChildren && (jsxRuntimeExports.jsx("div", { className: "designbase-menu-item__expand-icon", children: isExpanded ? (jsxRuntimeExports.jsx(icons.ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 16 })) }))] }), hasChildren && isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__children', `designbase-menu-item__children--${style}`), children: subItems.map((child) => (jsxRuntimeExports.jsx(MenuItem, { id: child.id, label: child.label, href: child.href, icon: child.icon, active: child.active, disabled: child.disabled, badge: child.badge, badgeColor: child.badgeColor, variant: child.variant, type: child.type || (style === 'accordion' ? 'block' : 'inline'), size: size, style: child.style || style, subItems: child.subItems, depth: depth + 1, onClick: () => handleChildClick(child), onChildClick: onChildClick }, child.id))) }))] }));
 };
 MenuItem.displayName = 'MenuItem';
 
@@ -6476,50 +6738,72 @@ const ContextMenu = ({ items, open, x, y, onClose, className, }) => {
 };
 ContextMenu.displayName = 'ContextMenu';
 
-const DatePicker = ({ mode = 'single', value, onChange, minDate, maxDate, events = [], showOutsideDays = true, startOfWeek = 'sunday', size = 'm', variant = 'default', highlightWeekends = true, highlightHolidays = false, today = new Date(), locale = 'ko-KR', format = 'yyyy-MM-dd', className, disabled = false, readonly = false, 
-// 드롭다운 관련 props
-isOpen: controlledIsOpen, onOpenChange, trigger, placement = 'bottom', 
+const DatePicker = ({ mode = 'single', type = 'dropdown', value, defaultValue, onChange, minDate, maxDate, events = [], showOutsideDays = true, startOfWeek = 'sunday', size = 'm', variant = 'default', highlightWeekends = true, highlightHolidays = false, today = new Date(), locale = 'ko-KR', format = 'yyyy-MM-dd', className, disabled = false, readonly = false, 
 // 인라인 모드
 inline = false, }) => {
     // 아이콘 크기 계산 (m이 기본값)
     const iconSize = size === 's' ? 14 : size === 'l' ? 18 : 16;
     const [currentDate, setCurrentDate] = React.useState(new Date());
     const [hoveredDate, setHoveredDate] = React.useState(null);
-    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);
     const [rangeStart, setRangeStart] = React.useState(null);
-    const containerRef = React.useRef(null);
-    // 드롭다운 상태 관리
-    const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
-    const setIsOpen = (open) => {
-        if (controlledIsOpen === undefined) {
-            setInternalIsOpen(open);
+    const [inputValue, setInputValue] = React.useState('');
+    const [selectedValue, setSelectedValue] = React.useState(value || defaultValue);
+    const pickerRef = React.useRef(null);
+    // 모달용 임시 상태 (적용 전까지는 변경되지 않음)
+    const [tempValue, setTempValue] = React.useState(value || defaultValue);
+    // value prop이 변경되면 업데이트
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValue(value);
+            // formatDateValue 함수가 정의되기 전이므로 직접 포맷팅
+            if (value instanceof Date) {
+                setInputValue(value.toLocaleDateString(locale));
+            }
+            else if (Array.isArray(value)) {
+                setInputValue(value.map(date => date.toLocaleDateString(locale)).join(', '));
+            }
+            else if (value && 'start' in value && 'end' in value) {
+                setInputValue(`${value.start.toLocaleDateString(locale)} ~ ${value.end.toLocaleDateString(locale)}`);
+            }
+            else {
+                setInputValue('');
+            }
         }
-        onOpenChange?.(open);
-    };
-    // 외부 클릭 감지
+    }, [value, locale]);
+    // 모달이 열릴 때 현재 값을 임시 상태로 복사
+    React.useEffect(() => {
+        if (isOpen && type === 'modal') {
+            setTempValue(selectedValue);
+        }
+    }, [isOpen, type, selectedValue]);
+    // 외부 클릭 감지 (드롭다운만)
     React.useEffect(() => {
-        if (!isOpen || inline)
+        if (!isOpen || inline || type !== 'dropdown')
             return;
         const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [isOpen, inline]);
-    // ESC 키 감지
-    React.useEffect(() => {
-        if (!isOpen || inline)
-            return;
-        const handleEscape = (event) => {
-            if (event.key === 'Escape') {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-    }, [isOpen, inline]);
+    }, [isOpen, inline, type]);
+    // 날짜 포맷팅 함수
+    const formatDateValue = React.useCallback((dateValue) => {
+        if (!dateValue)
+            return '';
+        if (dateValue instanceof Date) {
+            return dateValue.toLocaleDateString(locale);
+        }
+        if (Array.isArray(dateValue)) {
+            return dateValue.map(date => date.toLocaleDateString(locale)).join(', ');
+        }
+        if ('start' in dateValue && 'end' in dateValue) {
+            return `${dateValue.start.toLocaleDateString(locale)} ~ ${dateValue.end.toLocaleDateString(locale)}`;
+        }
+        return '';
+    }, [locale]);
     // 날짜 유효성 검사
     const isDateValid = React.useCallback((date) => {
         if (minDate && date < minDate)
@@ -6528,21 +6812,70 @@ inline = false, }) => {
             return false;
         return true;
     }, [minDate, maxDate]);
+    // 토글 핸들러
+    const togglePicker = () => {
+        if (disabled || readonly)
+            return;
+        setIsOpen((o) => !o);
+    };
+    // 모달용 핸들러들
+    const handleModalDateChange = (newValue) => {
+        setTempValue(newValue);
+    };
+    const handleModalApply = () => {
+        // 임시 값을 실제 값으로 적용
+        setSelectedValue(tempValue);
+        setInputValue(formatDateValue(tempValue));
+        onChange?.(tempValue);
+        // 모달 닫기
+        setIsOpen(false);
+    };
+    const handleModalCancel = () => {
+        // 임시 값을 원래 값으로 복원
+        setTempValue(selectedValue);
+        // 모달 닫기
+        setIsOpen(false);
+    };
+    // 입력 필드 변경
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+    };
+    // 입력 필드 블러 시 검증
+    const handleInputBlur = () => {
+        // 간단한 날짜 파싱 (YYYY-MM-DD 형식)
+        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+        if (dateRegex.test(inputValue)) {
+            const parsedDate = new Date(inputValue);
+            if (!isNaN(parsedDate.getTime()) && isDateValid(parsedDate)) {
+                setSelectedValue(parsedDate);
+                onChange?.(parsedDate);
+                return;
+            }
+        }
+        // 유효하지 않으면 이전 값으로 복원
+        setInputValue(formatDateValue(selectedValue));
+    };
     // 날짜 선택 처리
     const handleDateClick = React.useCallback((date) => {
         if (disabled || readonly || !isDateValid(date))
             return;
+        const currentValue = type === 'modal' ? tempValue : selectedValue;
+        const handleChange = type === 'modal' ? handleModalDateChange : (newValue) => {
+            setSelectedValue(newValue);
+            setInputValue(formatDateValue(newValue));
+            onChange?.(newValue);
+        };
         switch (mode) {
             case 'single':
-                onChange?.(date);
-                if (!inline)
+                handleChange(date);
+                if (!inline && type === 'dropdown')
                     setIsOpen(false);
                 break;
             case 'range':
                 // 기존 범위가 있고, 새로운 날짜를 클릭한 경우
-                if (value && 'start' in value && !rangeStart) {
+                if (currentValue && 'start' in currentValue && !rangeStart) {
                     // 기존 범위를 해제하고 새로운 범위 시작
-                    onChange?.(undefined);
+                    handleChange(undefined);
                     setRangeStart(date);
                     return;
                 }
@@ -6556,29 +6889,29 @@ inline = false, }) => {
                     const end = date;
                     if (start > end) {
                         // 시작일이 끝일보다 늦으면 순서 바꿈
-                        onChange?.({ start: end, end: start });
+                        handleChange({ start: end, end: start });
                     }
                     else {
-                        onChange?.({ start, end });
+                        handleChange({ start, end });
                     }
                     setRangeStart(null);
-                    if (!inline)
+                    if (!inline && type === 'dropdown')
                         setIsOpen(false);
                 }
                 break;
             case 'multiple':
-                const currentDates = Array.isArray(value) ? value : [];
+                const currentDates = Array.isArray(currentValue) ? currentValue : [];
                 const dateStr = date.toISOString().split('T')[0];
                 const isSelected = currentDates.some(d => d.toISOString().split('T')[0] === dateStr);
                 if (isSelected) {
-                    onChange?.(currentDates.filter(d => d.toISOString().split('T')[0] !== dateStr));
+                    handleChange(currentDates.filter(d => d.toISOString().split('T')[0] !== dateStr));
                 }
                 else {
-                    onChange?.([...currentDates, date]);
+                    handleChange([...currentDates, date]);
                 }
                 break;
         }
-    }, [mode, value, onChange, disabled, readonly, isDateValid, rangeStart, inline]);
+    }, [mode, onChange, disabled, readonly, isDateValid, rangeStart, inline, type, tempValue, selectedValue, formatDateValue, handleModalDateChange]);
     // 날짜 호버 처리
     const handleDateHover = React.useCallback((date) => {
         if (mode === 'range') {
@@ -6596,6 +6929,7 @@ inline = false, }) => {
     const isInRange = React.useCallback((date) => {
         if (mode !== 'range')
             return false;
+        const currentValue = type === 'modal' ? tempValue : selectedValue;
         // 현재 선택된 범위 확인
         let start = null;
         let end = null;
@@ -6604,10 +6938,10 @@ inline = false, }) => {
             start = rangeStart;
             end = hoveredDate;
         }
-        else if (value && 'start' in value) {
+        else if (currentValue && 'start' in currentValue) {
             // 완성된 범위
-            start = value.start;
-            end = value.end;
+            start = currentValue.start;
+            end = currentValue.end;
         }
         if (!start)
             return false;
@@ -6615,28 +6949,29 @@ inline = false, }) => {
         const startStr = start.toISOString().split('T')[0];
         const endStr = end ? end.toISOString().split('T')[0] : startStr;
         return dateStr >= startStr && dateStr <= endStr;
-    }, [mode, value, rangeStart, hoveredDate]);
+    }, [mode, rangeStart, hoveredDate, type, tempValue, selectedValue]);
     // 날짜가 선택되었는지 확인
     const isDateSelected = React.useCallback((date) => {
         const dateStr = date.toISOString().split('T')[0];
+        const currentValue = type === 'modal' ? tempValue : selectedValue;
         switch (mode) {
             case 'single':
-                return value && value instanceof Date && value.toISOString().split('T')[0] === dateStr;
+                return currentValue && currentValue instanceof Date && currentValue.toISOString().split('T')[0] === dateStr;
             case 'range':
                 if (rangeStart && rangeStart.toISOString().split('T')[0] === dateStr) {
                     return true;
                 }
-                if (!value || !('start' in value))
+                if (!currentValue || !('start' in currentValue))
                     return false;
-                const range = value;
+                const range = currentValue;
                 return range.start.toISOString().split('T')[0] === dateStr ||
                     range.end.toISOString().split('T')[0] === dateStr;
             case 'multiple':
-                return Array.isArray(value) && value.some(d => d.toISOString().split('T')[0] === dateStr);
+                return Array.isArray(currentValue) && currentValue.some(d => d.toISOString().split('T')[0] === dateStr);
             default:
                 return false;
         }
-    }, [mode, value, rangeStart]);
+    }, [mode, rangeStart, type, tempValue, selectedValue]);
     // 월 이동
     const goToPreviousMonth = React.useCallback(() => {
         setCurrentDate(prev => {
@@ -6684,22 +7019,23 @@ inline = false, }) => {
         return weekdays;
     }, [startOfWeek]);
     // 날짜 셀 렌더링
-    const renderDateCell = React.useCallback((date) => {
+    const renderDateCell = React.useCallback((date, isModal = false) => {
         const isCurrentMonth = date.getMonth() === currentDate.getMonth();
         const isToday = date.toDateString() === today.toDateString();
         const isSelected = isDateSelected(date);
         const isInRangeDate = isInRange(date);
         const isWeekend = date.getDay() === 0 || date.getDay() === 6;
         const dateEvents = getEventsForDate(date);
+        const currentValue = isModal ? tempValue : selectedValue;
         const cellClass = clsx('designbase-date-picker__date', {
             'designbase-date-picker__date--outside': !isCurrentMonth && !showOutsideDays,
             'designbase-date-picker__date--today': isToday,
             'designbase-date-picker__date--selected': isSelected,
             'designbase-date-picker__date--in-range': isInRangeDate && !isSelected,
             'designbase-date-picker__date--range-start': mode === 'range' && ((rangeStart && rangeStart.toDateString() === date.toDateString()) ||
-                (value && 'start' in value && value.start.toDateString() === date.toDateString())),
-            'designbase-date-picker__date--range-end': mode === 'range' && value && 'end' in value &&
-                value.end.toDateString() === date.toDateString(),
+                (currentValue && 'start' in currentValue && currentValue.start.toDateString() === date.toDateString())),
+            'designbase-date-picker__date--range-end': mode === 'range' && currentValue && 'end' in currentValue &&
+                currentValue.end.toDateString() === date.toDateString(),
             'designbase-date-picker__date--weekend': isWeekend && highlightWeekends,
             'designbase-date-picker__date--disabled': !isDateValid(date),
             'designbase-date-picker__date--has-events': dateEvents.length > 0,
@@ -6711,7 +7047,6 @@ inline = false, }) => {
         isDateSelected,
         isInRange,
         mode,
-        value,
         rangeStart,
         highlightWeekends,
         getEventsForDate,
@@ -6721,21 +7056,29 @@ inline = false, }) => {
         readonly,
         handleDateClick,
         handleDateHover,
+        tempValue,
+        selectedValue,
     ]);
     const calendarGrid = generateCalendarGrid();
     const weekdays = generateWeekdays();
-    // 드롭다운 형태일 때
-    if (!inline && trigger) {
-        return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-date-picker-container", children: [jsxRuntimeExports.jsx("div", { onClick: () => !disabled && !readonly && setIsOpen(!isOpen), children: trigger }), isOpen && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-date-picker-dropdown', `designbase-date-picker-dropdown--placement-${placement}`), children: jsxRuntimeExports.jsxs("div", { className: clsx('designbase-date-picker', `designbase-date-picker--size-${size}`, `designbase-date-picker--variant-${variant}`, {
-                            'designbase-date-picker--disabled': disabled,
-                            'designbase-date-picker--readonly': readonly,
-                        }, className), children: [jsxRuntimeExports.jsxs("div", { className: "designbase-date-picker__header", children: [jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToPreviousMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uC774\uC804 \uB2EC", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__current-month", children: currentDate.toLocaleDateString(locale, { year: 'numeric', month: 'long' }) }), jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToNextMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uB2E4\uC74C \uB2EC", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekdays", children: weekdays.map(day => (jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekday", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__grid", children: calendarGrid.map(date => renderDateCell(date)) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__footer", children: jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__today-button", onClick: goToToday, disabled: disabled || readonly, type: "button", children: "\uC624\uB298" }) })] }) }))] }));
+    // 캘린더 렌더링 함수
+    const renderCalendar = (isModal = false) => {
+        return (jsxRuntimeExports.jsxs("div", { className: "designbase-date-picker__selector", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-date-picker__header", children: [jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToPreviousMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uC774\uC804 \uB2EC", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__current-month", children: currentDate.toLocaleDateString(locale, { year: 'numeric', month: 'long' }) }), jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToNextMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uB2E4\uC74C \uB2EC", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekdays", children: weekdays.map(day => (jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekday", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__grid", children: calendarGrid.map(date => renderDateCell(date, isModal)) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__footer", children: jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__today-button", onClick: goToToday, disabled: disabled || readonly, type: "button", children: "\uC624\uB298" }) }), isModal && (jsxRuntimeExports.jsx(ModalFooter, { children: jsxRuntimeExports.jsxs("div", { className: "designbase-date-picker__modal-footer", children: [jsxRuntimeExports.jsx(Button, { variant: "secondary", size: "m", onPress: handleModalCancel, children: "\uCDE8\uC18C" }), jsxRuntimeExports.jsx(Button, { variant: "primary", size: "m", onPress: handleModalApply, children: "\uC801\uC6A9" })] }) }))] }));
+    };
+    // 인라인 모드일 때
+    if (inline) {
+        return (jsxRuntimeExports.jsx("div", { className: clsx('designbase-date-picker', `designbase-date-picker--size-${size}`, `designbase-date-picker--variant-${variant}`, {
+                'designbase-date-picker--disabled': disabled,
+                'designbase-date-picker--readonly': readonly,
+            }, className), children: renderCalendar(false) }));
     }
-    // 인라인 형태 (기존 방식)
-    return (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-date-picker', `designbase-date-picker--size-${size}`, `designbase-date-picker--variant-${variant}`, {
-            'designbase-date-picker--disabled': disabled,
-            'designbase-date-picker--readonly': readonly,
-        }, className), children: [jsxRuntimeExports.jsxs("div", { className: "designbase-date-picker__header", children: [jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToPreviousMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uC774\uC804 \uB2EC", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__current-month", children: currentDate.toLocaleDateString(locale, { year: 'numeric', month: 'long' }) }), jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToNextMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uB2E4\uC74C \uB2EC", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekdays", children: weekdays.map(day => (jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekday", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__grid", children: calendarGrid.map(date => renderDateCell(date)) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__footer", children: jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__today-button", onClick: goToToday, disabled: disabled || readonly, type: "button", children: "\uC624\uB298" }) })] }));
+    // 드롭다운/모달 모드일 때
+    const classes = clsx('designbase-date-picker', `designbase-date-picker--${size}`, {
+        'designbase-date-picker--disabled': disabled,
+        'designbase-date-picker--readonly': readonly,
+        'designbase-date-picker--open': isOpen,
+    }, className);
+    return (jsxRuntimeExports.jsxs("div", { ref: pickerRef, className: classes, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-date-picker__trigger", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-date-picker__icon-display", onClick: togglePicker, disabled: disabled, "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uC5F4\uAE30", children: jsxRuntimeExports.jsx(icons.CalendarIcon, { size: 16 }) }), jsxRuntimeExports.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-date-picker__input", placeholder: "\uB0A0\uC9DC\uB97C \uC120\uD0DD\uD558\uC138\uC694", "aria-label": "\uB0A0\uC9DC \uC785\uB825" }), jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-date-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uC5F4\uAE30", children: jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__dropdown", role: "dialog", "aria-modal": "false", children: renderCalendar(false) })), type === 'modal' && (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uB0A0\uC9DC \uC120\uD0DD", size: "s", children: renderCalendar(true) }))] }));
 };
 
 const Drawer = ({ isOpen, onClose, title, children, position = 'right', size = 'm', showCloseButton = true, closeOnBackdropClick = true, closeOnEscape = true, animationDuration = 300, showOverlay = true, overlayClosable = true, className, style, zIndex = 1000, trapFocus = true, id, ...props }) => {
@@ -7091,12 +7434,10 @@ const EmptyState = ({ variant = 'no-data', size = 'm', title, description, icon:
     const getDefaultIcon = () => {
         const defaultIconSize = iconSize || (() => {
             switch (size) {
-                case 'xs': return 32;
-                case 's': return 48;
-                case 'm': return 64;
-                case 'l': return 96;
-                case 'xl': return 128;
-                default: return 64;
+                case 's': return 24;
+                case 'm': return 32;
+                case 'l': return 48;
+                default: return 32;
             }
         })();
         if (CustomIcon) {
@@ -7129,6 +7470,7 @@ const Progressbar = ({ value, max = 100, min = 0, size = 'm', variant = 'default
     const classes = clsx('designbase-progressbar', `designbase-progressbar--${size}`, `designbase-progressbar--${variant}`, `designbase-progressbar--${style}`, {
         'designbase-progressbar--full-width': fullWidth,
         'designbase-progressbar--disabled': disabled,
+        'designbase-progressbar--completed': percentage === 100,
     }, className);
     const containerClasses = clsx('designbase-progressbar__container', `designbase-progressbar__container--${labelPosition}`);
     const trackClasses = clsx('designbase-progressbar__track', {
@@ -7244,13 +7586,13 @@ const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multip
     const getStatusIcon = React.useCallback((status) => {
         switch (status) {
             case 'pending':
-                return (jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2", fill: "none" }) }));
+                return jsxRuntimeExports.jsx(icons.ClockIcon, { size: 20 });
             case 'uploading':
                 return jsxRuntimeExports.jsx(Spinner, { type: "circular", size: "s" });
             case 'success':
-                return (jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M13 5L6 12L3 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+                return jsxRuntimeExports.jsx(icons.DoneIcon, { size: 20 });
             case 'error':
-                return (jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [jsxRuntimeExports.jsx("path", { d: "M8 1L15 8L8 15L1 8L8 1Z", stroke: "currentColor", strokeWidth: "2" }), jsxRuntimeExports.jsx("path", { d: "M8 5V9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), jsxRuntimeExports.jsx("circle", { cx: "8", cy: "12", r: "1", fill: "currentColor" })] }));
+                return jsxRuntimeExports.jsx(icons.ErrorIcon, { size: 20 });
             default:
                 return null;
         }
@@ -7261,11 +7603,12 @@ const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multip
         }, className), children: [jsxRuntimeExports.jsx(Dropzone, { size: size, variant: variant, accept: accept, maxSize: maxSize, multiple: multiple, disabled: disabled, readonly: readonly, onFileSelect: handleFileSelect }), showFileList && uploadedFiles.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-list", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-list-title", children: ["\uC5C5\uB85C\uB4DC\uB41C \uD30C\uC77C\uB4E4 (", uploadedFiles.length, "\uAC1C)"] }), jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-items", children: uploadedFiles.map((uploadFile) => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-file-uploader__file-item', `designbase-file-uploader__file-item--${uploadFile.status}`), children: [jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-info", children: [jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-icon", children: getStatusIcon(uploadFile.status) }), jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-name", children: uploadFile.file.name }), jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-size", children: formatFileSize(uploadFile.file.size) }), uploadFile.error && (jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-error", children: uploadFile.error }))] })] }), showProgress && uploadFile.status === 'uploading' && (jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__progress", children: jsxRuntimeExports.jsx(Progressbar, { value: uploadFile.progress || 0, size: "s", variant: "primary", style: "solid", showLabel: true, labelPosition: "inside", fullWidth: true }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-actions", children: [uploadFile.status === 'error' && (jsxRuntimeExports.jsx("button", { className: "designbase-file-uploader__retry-button", onClick: () => handleRetry(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC7AC\uC2DC\uB3C4" })), jsxRuntimeExports.jsx("button", { className: "designbase-file-uploader__remove-button", onClick: () => handleRemove(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC0AD\uC81C" })] })] }, uploadFile.id))) })] }))] }));
 };
 
-const FloatingActionButton = React.forwardRef(({ size = 'm', variant = 'primary', icon, disabled = false, onClick, className, style, ...props }, forwardedRef) => {
+const FloatingActionButton = React.forwardRef(({ size = 'm', variant = 'primary', icon, loading = false, disabled = false, onClick, className, style, ...props }, forwardedRef) => {
     const classes = clsx('designbase-fab', `designbase-fab--${size}`, `designbase-fab--${variant}`, {
         'designbase-fab--disabled': disabled,
+        'designbase-fab--loading': loading,
     }, className);
-    return (jsxRuntimeExports.jsx("button", { ref: forwardedRef, className: classes, style: style, onClick: onClick, disabled: disabled, "aria-label": "Floating action button", ...props, children: icon && (jsxRuntimeExports.jsx("div", { className: "designbase-fab__icon", children: icon })) }));
+    return (jsxRuntimeExports.jsx("button", { ref: forwardedRef, className: classes, style: style, onClick: onClick, disabled: disabled || loading, "aria-label": "Floating action button", "aria-busy": loading, ...props, children: loading ? (jsxRuntimeExports.jsx("div", { className: "designbase-fab__icon", children: jsxRuntimeExports.jsx(Spinner, { type: "circular", size: "s" }) })) : icon && (jsxRuntimeExports.jsx("div", { className: "designbase-fab__icon", children: icon })) }));
 });
 FloatingActionButton.displayName = 'FloatingActionButton';
 
@@ -7337,7 +7680,251 @@ const Textarea = React.forwardRef(({ label, placeholder, defaultValue, value, si
 });
 Textarea.displayName = 'Textarea';
 
-const Form = ({ fields, layout = 'vertical', size = 'm', variant = 'default', onSubmit, onChange, initialValues = {}, submitText = '제출', submitLoading = false, submitDisabled = false, showReset = false, resetText = '리셋', title, description, className, style, }) => {
+const ITEM_HEIGHT = 40;
+const TimePicker$1 = ({ size = 'm', type = 'dropdown', value, defaultValue = '12:00', format = '24h', minuteStep = 1, disabled = false, readonly = false, onChange, className, }) => {
+    const [selectedTime, setSelectedTime] = React.useState(value || defaultValue);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(value || defaultValue);
+    const [hours, setHours] = React.useState(12);
+    const [minutes, setMinutes] = React.useState(0);
+    const [seconds, setSeconds] = React.useState(0);
+    const [period, setPeriod] = React.useState('PM');
+    // 모달용 임시 상태 (적용 전까지는 변경되지 않음)
+    const [tempHours, setTempHours] = React.useState(12);
+    const [tempMinutes, setTempMinutes] = React.useState(0);
+    const [tempSeconds, setTempSeconds] = React.useState(0);
+    const [tempPeriod, setTempPeriod] = React.useState('PM');
+    const pickerRef = React.useRef(null);
+    // 외부 클릭 감지 (드롭다운만)
+    React.useEffect(() => {
+        if (!isOpen || type !== 'dropdown')
+            return;
+        const handleClickOutside = (event) => {
+            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, type]);
+    const is12h = format === '12h' || format === '12h-with-seconds';
+    const showSeconds = format === '12h-with-seconds' || format === '24h-with-seconds';
+    React.useEffect(() => {
+        if (!value)
+            return;
+        setSelectedTime(value);
+        setInputValue(value);
+        parseTimeString(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    // 모달이 열릴 때 현재 값을 임시 상태로 복사
+    React.useEffect(() => {
+        if (isOpen && type === 'modal') {
+            setTempHours(hours);
+            setTempMinutes(minutes);
+            setTempSeconds(seconds);
+            setTempPeriod(period);
+        }
+    }, [isOpen, type, hours, minutes, seconds, period]);
+    const parseTimeString = (timeStr) => {
+        const s = timeStr.trim();
+        let h = 0, m = 0, sec = 0, p = 'AM';
+        if (is12h) {
+            const re = showSeconds
+                ? /^(0?[1-9]|1[0-2]):([0-5]\d):([0-5]\d)\s*(AM|PM)$/i
+                : /^(0?[1-9]|1[0-2]):([0-5]\d)\s*(AM|PM)$/i;
+            const match = s.match(re);
+            if (match) {
+                h = parseInt(match[1], 10);
+                m = parseInt(match[2], 10);
+                sec = showSeconds ? parseInt(match[3], 10) : 0;
+                p = (showSeconds ? match[4] : match[3]).toUpperCase();
+                setPeriod(p);
+                setHours(h);
+                setMinutes(m);
+                setSeconds(sec);
+                return;
+            }
+        }
+        else {
+            const re = showSeconds
+                ? /^([01]?\d|2[0-3]):([0-5]\d):([0-5]\d)$/
+                : /^([01]?\d|2[0-3]):([0-5]\d)$/;
+            const match = s.match(re);
+            if (match) {
+                h = parseInt(match[1], 10);
+                m = parseInt(match[2], 10);
+                sec = showSeconds ? parseInt(match[3], 10) : 0;
+                setHours(h);
+                setMinutes(m);
+                setSeconds(sec);
+                return;
+            }
+        }
+    };
+    const to24Hour = (h12, p) => (p === 'AM' ? (h12 === 12 ? 0 : h12) : (h12 === 12 ? 12 : h12 + 12));
+    const formatTimeString = (h, m, s, p) => {
+        const HH = String(h).padStart(2, '0');
+        const MM = String(m).padStart(2, '0');
+        const SS = String(s).padStart(2, '0');
+        if (is12h)
+            return `${String(h).padStart(2, '0')}:${MM}${showSeconds ? `:${SS}` : ''} ${p || period}`;
+        return `${HH}:${MM}${showSeconds ? `:${SS}` : ''}`;
+    };
+    const emitChange24 = (h, m, s, p) => {
+        const h24 = is12h ? to24Hour(h, p || period) : h;
+        onChange?.(`${String(h24).padStart(2, '0')}:${String(m).padStart(2, '0')}${showSeconds ? `:${String(s).padStart(2, '0')}` : ''}`);
+    };
+    const handleTimeChange = (h, m, s = seconds, p) => {
+        setHours(h);
+        setMinutes(m);
+        setSeconds(s);
+        if (p)
+            setPeriod(p);
+        const display = formatTimeString(h, m, s, p);
+        setSelectedTime(display);
+        setInputValue(display);
+        emitChange24(h, m, s, p);
+    };
+    const handleInputBlur = () => {
+        const s = inputValue.trim();
+        let ok = false;
+        if (is12h) {
+            const re = showSeconds
+                ? /^(0?[1-9]|1[0-2]):([0-5]\d):([0-5]\d)\s*(AM|PM)$/i
+                : /^(0?[1-9]|1[0-2]):([0-5]\d)\s*(AM|PM)$/i;
+            const m = s.match(re);
+            if (m) {
+                const h = parseInt(m[1], 10), mi = parseInt(m[2], 10);
+                const sec = showSeconds ? parseInt(m[3], 10) : 0;
+                const p = (showSeconds ? m[4] : m[3]).toUpperCase();
+                handleTimeChange(h, mi, sec, p);
+                ok = true;
+            }
+        }
+        else {
+            const re = showSeconds
+                ? /^([01]?\d|2[0-3]):([0-5]\d):([0-5]\d)$/
+                : /^([01]?\d|2[0-3]):([0-5]\d)$/;
+            const m = s.match(re);
+            if (m) {
+                const h = parseInt(m[1], 10), mi = parseInt(m[2], 10);
+                const sec = showSeconds ? parseInt(m[3], 10) : 0;
+                handleTimeChange(h, mi, sec);
+                ok = true;
+            }
+        }
+        if (!ok)
+            setInputValue(selectedTime);
+    };
+    const togglePicker = () => {
+        if (disabled || readonly)
+            return;
+        setIsOpen((o) => !o);
+    };
+    // 모달용 핸들러들
+    const handleModalTimeChange = (h, m, s = tempSeconds, p) => {
+        setTempHours(h);
+        setTempMinutes(m);
+        setTempSeconds(s);
+        if (p)
+            setTempPeriod(p);
+    };
+    const handleModalApply = () => {
+        // 임시 값을 실제 값으로 적용
+        setHours(tempHours);
+        setMinutes(tempMinutes);
+        setSeconds(tempSeconds);
+        setPeriod(tempPeriod);
+        // 시간 변경 처리
+        handleTimeChange(tempHours, tempMinutes, tempSeconds, tempPeriod);
+        // 모달 닫기
+        setIsOpen(false);
+    };
+    const handleModalCancel = () => {
+        // 임시 값을 원래 값으로 복원
+        setTempHours(hours);
+        setTempMinutes(minutes);
+        setTempSeconds(seconds);
+        setTempPeriod(period);
+        // 모달 닫기
+        setIsOpen(false);
+    };
+    const pad2 = (n) => String(n).padStart(2, '0');
+    /** ★ 변경 핵심: viewport(고정 레이어) ─ wheel(스크롤 영역) 분리 */
+    const WheelPicker = ({ label, items, value, onChange, formatter }) => {
+        const wheelRef = React.useRef(null);
+        const scrollTimeout = React.useRef(null);
+        const isProgrammatic = React.useRef(false);
+        const indexOfValue = React.useCallback((v) => items.findIndex((x) => x === v), [items]);
+        const scrollToIndex = React.useCallback((idx, smooth = true) => {
+            if (!wheelRef.current)
+                return;
+            const top = idx * ITEM_HEIGHT; // 상/하 패딩은 CSS로 처리
+            isProgrammatic.current = true;
+            wheelRef.current.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
+            window.setTimeout(() => { isProgrammatic.current = false; }, 150);
+        }, []);
+        React.useEffect(() => {
+            const i = indexOfValue(value);
+            if (i >= 0)
+                scrollToIndex(i, false);
+        }, [value, indexOfValue, scrollToIndex]);
+        React.useEffect(() => {
+            const i = indexOfValue(value);
+            if (i >= 0)
+                scrollToIndex(i, false);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        const handleScroll = () => {
+            if (isProgrammatic.current)
+                return;
+            if (!wheelRef.current)
+                return;
+            if (scrollTimeout.current)
+                window.clearTimeout(scrollTimeout.current);
+            scrollTimeout.current = window.setTimeout(() => {
+                if (!wheelRef.current)
+                    return;
+                const top = wheelRef.current.scrollTop;
+                const idx = Math.round(top / ITEM_HEIGHT);
+                const clamped = Math.max(0, Math.min(items.length - 1, idx));
+                const v = items[clamped];
+                scrollToIndex(clamped, true);
+                if (v !== value)
+                    onChange(v);
+            }, 120);
+        };
+        const fmt = (v) => (formatter ? formatter(v) : (typeof v === 'number' ? pad2(v) : String(v)));
+        return (jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__wheel-container", children: [jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__wheel-label", children: label }), jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__wheel-viewport", children: [jsxRuntimeExports.jsx("div", { ref: wheelRef, className: "designbase-time-picker__wheel", onScroll: handleScroll, role: "listbox", "aria-label": label, children: items.map((item, i) => (jsxRuntimeExports.jsx("div", { className: clsx('designbase-time-picker__wheel-item', item === value && 'designbase-time-picker__wheel-item--selected'), role: "option", "aria-selected": item === value, onClick: () => {
+                                    const idx = indexOfValue(item);
+                                    scrollToIndex(idx, true);
+                                    if (item !== value)
+                                        onChange(item);
+                                }, children: fmt(item) }, `${label}-${item}-${i}`))) }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "designbase-time-picker__wheel-center-indicator" }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "designbase-time-picker__wheel-fade wheel-fade--top" }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "designbase-time-picker__wheel-fade wheel-fade--bottom" })] })] }));
+    };
+    const renderTimeSelector = (isModal = false) => {
+        const hourItems = is12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+        const minuteItems = Array.from({ length: Math.floor(60 / minuteStep) }, (_, i) => i * minuteStep);
+        const secondItems = Array.from({ length: 60 }, (_, i) => i);
+        const periodItems = ['AM', 'PM'];
+        // 모달인 경우 임시 값 사용, 드롭다운인 경우 실제 값 사용
+        const currentHours = isModal ? tempHours : hours;
+        const currentMinutes = isModal ? tempMinutes : minutes;
+        const currentSeconds = isModal ? tempSeconds : seconds;
+        const currentPeriod = isModal ? tempPeriod : period;
+        const handleChange = isModal ? handleModalTimeChange : handleTimeChange;
+        return (jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__selector", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__picker-wheels", children: [jsxRuntimeExports.jsx(WheelPicker, { label: "\uC2DC\uAC04", items: hourItems, value: currentHours, onChange: (v) => handleChange(v, currentMinutes, currentSeconds, currentPeriod) }), jsxRuntimeExports.jsx(WheelPicker, { label: "\uBD84", items: minuteItems, value: currentMinutes, onChange: (v) => handleChange(currentHours, v, currentSeconds, currentPeriod) }), showSeconds && (jsxRuntimeExports.jsx(WheelPicker, { label: "\uCD08", items: secondItems, value: currentSeconds, onChange: (v) => handleChange(currentHours, currentMinutes, v, currentPeriod) })), is12h && (jsxRuntimeExports.jsx(WheelPicker, { label: "AM/PM", items: periodItems, value: currentPeriod, onChange: (v) => handleChange(currentHours, currentMinutes, currentSeconds, v), formatter: (x) => String(x) }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__preview", "aria-live": "polite", children: [jsxRuntimeExports.jsx(icons.ClockIcon, { size: 20 }), jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__preview-time", children: formatTimeString(currentHours, currentMinutes, currentSeconds, currentPeriod) })] }), !isModal && (jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__dropdown-actions", children: jsxRuntimeExports.jsx(Button, { variant: "primary", size: "m", onPress: () => {
+                            handleTimeChange(currentHours, currentMinutes, currentSeconds, currentPeriod);
+                            setIsOpen(false);
+                        }, children: "\uC120\uD0DD" }) }))] }));
+    };
+    const classes = clsx('designbase-time-picker', `designbase-time-picker--${size}`, { 'designbase-time-picker--disabled': disabled, 'designbase-time-picker--readonly': readonly, 'designbase-time-picker--open': isOpen }, className);
+    return (jsxRuntimeExports.jsxs("div", { ref: pickerRef, className: classes, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__trigger", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-time-picker__icon-display", onClick: togglePicker, disabled: disabled, "aria-label": "\uC2DC\uAC04 \uC120\uD0DD \uC5F4\uAE30", children: jsxRuntimeExports.jsx(icons.ClockIcon, { size: 16 }) }), jsxRuntimeExports.jsx("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-time-picker__input", placeholder: is12h ? (showSeconds ? '12:00:00 PM' : '12:00 PM') : (showSeconds ? '12:00:00' : '12:00'), "aria-label": "\uC2DC\uAC04 \uC785\uB825" }), jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-time-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "\uC2DC\uAC04 \uC120\uD0DD \uC5F4\uAE30", children: jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__dropdown", role: "dialog", "aria-modal": "false", children: renderTimeSelector(false) })), type === 'modal' && (jsxRuntimeExports.jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC2DC\uAC04 \uC120\uD0DD", size: "s", children: [renderTimeSelector(true), jsxRuntimeExports.jsx(ModalFooter, { children: jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__modal-footer", children: [jsxRuntimeExports.jsx(Button, { variant: "secondary", size: "m", onPress: handleModalCancel, children: "\uCDE8\uC18C" }), jsxRuntimeExports.jsx(Button, { variant: "primary", size: "m", onPress: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
+};
+TimePicker$1.displayName = 'TimePicker';
+
+const Form = ({ fields, columns = 1, size = 'm', variant = 'default', onSubmit, onChange, initialValues = {}, submitText = '제출', submitLoading = false, submitDisabled = false, showReset = false, resetText = '리셋', title, description, className, style, }) => {
     const [values, setValues] = React.useState(initialValues);
     const [errors, setErrors] = React.useState({});
     const [touched, setTouched] = React.useState({});
@@ -7497,20 +8084,20 @@ const Form = ({ fields, layout = 'vertical', size = 'm', variant = 'default', on
                 }
                 return (jsxRuntimeExports.jsx(Checkbox, { ...commonProps, isSelected: fieldValue || false, isDisabled: field.disabled, children: field.label }));
             case 'file':
-                return (jsxRuntimeExports.jsx("input", { type: "file", id: field.name, name: field.name, accept: field.fileUpload?.accept, multiple: field.fileUpload?.multiple, disabled: field.disabled, required: field.required, onChange: (e) => {
-                        const files = e.target.files;
-                        if (files) {
-                            const fileArray = Array.from(files);
-                            handleFieldChange(field.name, field.fileUpload?.multiple ? fileArray : fileArray[0]);
-                        }
-                    }, onBlur: () => handleFieldBlur(field.name), className: clsx('designbase-form__file-input', {
-                        'designbase-form__input--error': touched[field.name] && errors[field.name],
-                    }) }));
+                return (jsxRuntimeExports.jsx(FileUploader, { size: size, accept: field.fileUpload?.accept, maxSize: field.fileUpload?.maxSize, multiple: field.fileUpload?.multiple, disabled: field.disabled, readonly: field.readOnly, onUpload: (files) => {
+                        handleFieldChange(field.name, files);
+                    } }));
+            case 'date':
+                return (jsxRuntimeExports.jsx(DatePicker, { size: size, value: fieldValue, disabled: field.disabled, readonly: field.readOnly, mode: "single", type: "dropdown", onChange: (date) => handleFieldChange(field.name, date) }));
+            case 'color':
+                return (jsxRuntimeExports.jsx(ColorPicker$1, { size: size, value: fieldValue, disabled: field.disabled, readonly: field.readOnly, showAlpha: true, showFormatSelector: true, showCopyButton: true, onChange: (color) => handleFieldChange(field.name, color) }));
+            case 'timepicker':
+                return (jsxRuntimeExports.jsx(TimePicker$1, { size: size, value: fieldValue, disabled: field.disabled, readonly: field.readOnly, format: "24h", type: "dropdown", minuteStep: 1, onChange: (time) => handleFieldChange(field.name, time) }));
             default:
                 return (jsxRuntimeExports.jsx(Input, { ...commonProps, type: field.type, min: field.min, max: field.max, minLength: field.minLength, maxLength: field.maxLength, pattern: field.pattern }));
         }
     }, [values, errors, touched, handleFieldChange, handleFieldBlur, size]);
-    const classes = clsx('designbase-form', `designbase-form--${layout}`, `designbase-form--${size}`, `designbase-form--${variant}`, className);
+    const classes = clsx('designbase-form', `designbase-form--columns-${columns}`, `designbase-form--${size}`, `designbase-form--${variant}`, className);
     return (jsxRuntimeExports.jsxs("form", { ref: formRef, className: classes, style: style, onSubmit: handleSubmit, children: [(title || description) && (jsxRuntimeExports.jsxs("div", { className: "designbase-form__header", children: [title && jsxRuntimeExports.jsx("h3", { className: "designbase-form__title", children: title }), description && jsxRuntimeExports.jsx("p", { className: "designbase-form__description", children: description })] })), jsxRuntimeExports.jsx("div", { className: "designbase-form__fields", children: fields.map(field => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-form__field-wrapper', `designbase-form__field-wrapper--${field.type}`), children: [field.label && (jsxRuntimeExports.jsxs("label", { className: "designbase-form__label", htmlFor: field.name, children: [field.label, field.required && jsxRuntimeExports.jsx("span", { className: "designbase-form__required", children: "*" })] })), renderField(field), touched[field.name] && errors[field.name] && (jsxRuntimeExports.jsx("div", { className: "designbase-form__error", children: errors[field.name] })), field.helpText && !errors[field.name] && (jsxRuntimeExports.jsx("div", { className: "designbase-form__help", children: field.helpText }))] }, field.name))) }), jsxRuntimeExports.jsxs("div", { className: "designbase-form__actions", children: [jsxRuntimeExports.jsx(Button, { type: "submit", variant: "primary", size: size, loading: submitLoading, disabled: submitDisabled, children: submitText }), showReset && (jsxRuntimeExports.jsx(Button, { type: "button", variant: "secondary", size: size, onClick: handleReset, children: resetText }))] })] }));
 };
 
@@ -7647,7 +8234,7 @@ const Stat = ({ value, label, icon, iconPosition = 'left', size = 'm', variant =
             return;
         onClick?.();
     };
-    return (jsxRuntimeExports.jsxs("div", { className: classes, style: customStyle, onClick: handleClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, children: [icon && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-stat__icon', `designbase-stat__icon--${iconPosition}`), children: icon })), jsxRuntimeExports.jsxs("div", { className: "designbase-stat__content", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-stat__main", children: [jsxRuntimeExports.jsx("div", { className: "designbase-stat__value", children: value }), jsxRuntimeExports.jsx("div", { className: "designbase-stat__label", children: label })] }), showChange && change && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-stat__change', getChangeClass()), children: getChangeText() })), showDescription && description && (jsxRuntimeExports.jsx("div", { className: "designbase-stat__description", children: description }))] }), showProgress && progress !== undefined && (jsxRuntimeExports.jsx("div", { className: "designbase-stat__progress", children: jsxRuntimeExports.jsx("div", { className: "designbase-stat__progress-bar", style: { width: `${Math.min(Math.max(progress, 0), 100)}%` } }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, style: customStyle, onClick: handleClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, children: [icon && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-stat__icon', `designbase-stat__icon--${iconPosition}`), children: icon })), jsxRuntimeExports.jsxs("div", { className: "designbase-stat__content", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-stat__main", children: [jsxRuntimeExports.jsx("div", { className: "designbase-stat__value", children: value }), jsxRuntimeExports.jsx("div", { className: "designbase-stat__label", children: label })] }), showChange && change && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-stat__change', getChangeClass()), children: getChangeText() })), showDescription && description && (jsxRuntimeExports.jsx("div", { className: "designbase-stat__description", children: description }))] }), showProgress && typeof progress === 'number' && (jsxRuntimeExports.jsx("div", { className: "designbase-stat__progress", children: jsxRuntimeExports.jsx(Progressbar, { value: Math.min(Math.max(progress, 0), 100), size: "s", variant: color === 'primary' ? 'primary' : color === 'success' ? 'success' : color === 'warning' ? 'warning' : color === 'error' ? 'danger' : 'default' }) }))] }));
 };
 
 const HeroFeature = ({ title, subtitle, description, image, imageAlt, backgroundImage, backgroundVideo, overlayColor, overlayOpacity = 0.5, buttons = [], badge, stats = [], icon, size = 'l', variant = 'default', theme = 'light', alignment = 'left', animated = false, parallax = false, fullHeight = false, minHeight, maxHeight, className, }) => {
@@ -7728,7 +8315,7 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
     return (jsxRuntimeExports.jsxs("section", { className: classes, style: containerStyle, children: [renderBackground(), renderOverlay(), jsxRuntimeExports.jsxs("div", { className: "designbase-hero-feature__container", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-hero-feature__content", children: [icon && (jsxRuntimeExports.jsx("div", { className: "designbase-hero-feature__icon", children: icon })), renderBadge(), jsxRuntimeExports.jsx("h1", { className: "designbase-hero-feature__title", children: title }), subtitle && (jsxRuntimeExports.jsx("h2", { className: "designbase-hero-feature__subtitle", children: subtitle })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-hero-feature__description", children: description })), renderButtons(), renderStats()] }), variant === 'split' && renderImage()] }), variant !== 'split' && renderImage()] }));
 };
 
-const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', theme = 'light', isOpen, onOpenChange, onImageChange, enableZoom = true, enableRotate = true, enableDownload = true, enableFullscreen = true, enableKeyboard = true, enableWheelZoom = true, showThumbnails = true, showCounter = true, showCloseButton = true, showNavigationButtons = true, showToolbar = true, closeOnBackdropClick = true, closeOnEscape = true, readonly = false, disabled = false, className, }) => {
+const Lightbox = ({ images, currentIndex = 0, size = 'l', isOpen, onOpenChange, onImageChange, enableZoom = true, enableRotate = true, enableDownload = true, enableFullscreen = true, enableKeyboard = true, enableWheelZoom = true, showThumbnails = true, showCounter = true, showCloseButton = true, showNavigationButtons = true, showToolbar = true, closeOnBackdropClick = true, closeOnEscape = true, className, }) => {
     const [internalCurrentIndex, setInternalCurrentIndex] = React.useState(currentIndex);
     const [zoomLevel, setZoomLevel] = React.useState(1);
     const [rotation, setRotation] = React.useState(0);
@@ -7789,32 +8376,32 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
     }, [onOpenChange]);
     // 줌 인
     const handleZoomIn = React.useCallback(() => {
-        if (!enableZoom || disabled || readonly)
+        if (!enableZoom)
             return;
         setZoomLevel(prev => Math.min(prev * 1.5, 5));
-    }, [enableZoom, disabled, readonly]);
+    }, [enableZoom]);
     // 줌 아웃
     const handleZoomOut = React.useCallback(() => {
-        if (!enableZoom || disabled || readonly)
+        if (!enableZoom)
             return;
         setZoomLevel(prev => Math.max(prev / 1.5, 0.1));
-    }, [enableZoom, disabled, readonly]);
+    }, [enableZoom]);
     // 줌 리셋
     const handleZoomReset = React.useCallback(() => {
-        if (!enableZoom || disabled || readonly)
+        if (!enableZoom)
             return;
         setZoomLevel(1);
         setImagePosition({ x: 0, y: 0 });
-    }, [enableZoom, disabled, readonly]);
+    }, [enableZoom]);
     // 회전
     const handleRotate = React.useCallback(() => {
-        if (!enableRotate || disabled || readonly)
+        if (!enableRotate)
             return;
         setRotation(prev => (prev + 90) % 360);
-    }, [enableRotate, disabled, readonly]);
+    }, [enableRotate]);
     // 다운로드
     const handleDownload = React.useCallback(() => {
-        if (!enableDownload || disabled || readonly)
+        if (!enableDownload)
             return;
         const currentImage = images[internalCurrentIndex];
         if (currentImage) {
@@ -7851,13 +8438,13 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
                 document.body.removeChild(link);
             });
         }
-    }, [enableDownload, disabled, readonly, images, internalCurrentIndex]);
+    }, [enableDownload, images, internalCurrentIndex]);
     // 전체화면 토글
     const handleFullscreenToggle = React.useCallback(() => {
-        if (!enableFullscreen || disabled || readonly)
+        if (!enableFullscreen)
             return;
         setIsFullscreen(prev => !prev);
-    }, [enableFullscreen, disabled, readonly]);
+    }, [enableFullscreen]);
     // 이미지 로드 핸들러
     const handleImageLoad = React.useCallback(() => {
         setIsImageLoaded(true);
@@ -7881,7 +8468,7 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
     }, [isOpen, internalCurrentIndex, images]);
     // 마우스 휠 줌 핸들러
     const handleWheel = React.useCallback((event) => {
-        if (!enableWheelZoom || disabled || readonly)
+        if (!enableWheelZoom)
             return;
         event.preventDefault();
         if (event.deltaY < 0) {
@@ -7890,44 +8477,40 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
         else {
             handleZoomOut();
         }
-    }, [enableWheelZoom, disabled, readonly, handleZoomIn, handleZoomOut]);
+    }, [enableWheelZoom, handleZoomIn, handleZoomOut]);
     // 드래그 시작 핸들러
     const handleMouseDown = React.useCallback((event) => {
-        if (zoomLevel <= 1 || disabled || readonly)
+        if (zoomLevel <= 1)
             return;
         event.preventDefault();
         setIsDragging(true);
         setDragStart({ x: event.clientX - imagePosition.x, y: event.clientY - imagePosition.y });
-    }, [zoomLevel, disabled, readonly, imagePosition]);
+    }, [zoomLevel, imagePosition]);
     // 드래그 중 핸들러
     const handleMouseMove = React.useCallback((event) => {
-        if (!isDragging || zoomLevel <= 1 || disabled || readonly)
+        if (!isDragging || zoomLevel <= 1)
             return;
         event.preventDefault();
         setImagePosition({
             x: event.clientX - dragStart.x,
             y: event.clientY - dragStart.y,
         });
-    }, [isDragging, zoomLevel, disabled, readonly, dragStart]);
+    }, [isDragging, zoomLevel, dragStart]);
     // 드래그 종료 핸들러
     const handleMouseUp = React.useCallback(() => {
         setIsDragging(false);
     }, []);
     // 터치 시작 핸들러
     const handleTouchStart = React.useCallback((event) => {
-        if (disabled || readonly)
-            return;
         const touch = event.touches[0];
         setTouchStart({ x: touch.clientX, y: touch.clientY });
-    }, [disabled, readonly]);
+    }, []);
     // 터치 종료 핸들러
     const handleTouchEnd = React.useCallback((event) => {
-        if (disabled || readonly)
-            return;
         const touch = event.changedTouches[0];
         setTouchEnd({ x: touch.clientX, y: touch.clientY });
         handleSwipe();
-    }, [disabled, readonly]);
+    }, []);
     // 스와이프 처리
     const handleSwipe = React.useCallback(() => {
         const deltaX = touchStart.x - touchEnd.x;
@@ -7947,7 +8530,7 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
     }, [touchStart, touchEnd, goToNext, goToPrevious]);
     // 키보드 이벤트 핸들러
     React.useEffect(() => {
-        if (!enableKeyboard || !isOpen || disabled || readonly)
+        if (!enableKeyboard || !isOpen)
             return;
         const handleKeyDown = (event) => {
             switch (event.key) {
@@ -7988,8 +8571,6 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
     }, [
         enableKeyboard,
         isOpen,
-        disabled,
-        readonly,
         closeOnEscape,
         handleClose,
         goToPrevious,
@@ -8023,11 +8604,9 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
     const currentImage = images[internalCurrentIndex];
     if (!isOpen || !currentImage)
         return null;
-    return (jsxRuntimeExports.jsx("div", { className: clsx('designbase-lightbox', `designbase-lightbox--size-${size}`, `designbase-lightbox--variant-${variant}`, `designbase-lightbox--theme-${theme}`, {
+    return (jsxRuntimeExports.jsx("div", { className: clsx('designbase-lightbox', `designbase-lightbox--size-${size}`, {
             'designbase-lightbox--fullscreen': isFullscreen,
-            'designbase-lightbox--disabled': disabled,
-            'designbase-lightbox--readonly': readonly,
-        }, className), children: jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__overlay", children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: "designbase-lightbox__modal", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__title", children: [currentImage.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-lightbox__title-text", children: currentImage.title })), showCounter && (jsxRuntimeExports.jsxs("span", { className: "designbase-lightbox__counter", children: [internalCurrentIndex + 1, " / ", images.length] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header-actions", children: [showToolbar && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enableZoom && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomOut, disabled: disabled || readonly, title: "\uC90C \uC544\uC6C3", type: "button", children: jsxRuntimeExports.jsx(icons.MinusIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomReset, disabled: disabled || readonly, title: "\uC90C \uB9AC\uC14B", type: "button", children: [Math.round(zoomLevel * 100), "%"] }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomIn, disabled: disabled || readonly, title: "\uC90C \uC778", type: "button", children: jsxRuntimeExports.jsx(icons.PlusIcon, { size: 16 }) })] })), enableRotate && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleRotate, disabled: disabled || readonly, title: "\uD68C\uC804", type: "button", children: jsxRuntimeExports.jsx(icons.RefreshIcon, { size: 16 }) })), enableDownload && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleDownload, disabled: disabled || readonly, title: "\uB2E4\uC6B4\uB85C\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.DownloadIcon, { size: 16 }) })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 16 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 16 }) }))] })), showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__close-button", onClick: handleClose, disabled: disabled, title: "\uB2EB\uAE30", type: "button", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: 20 }) }))] })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__content", children: [showNavigationButtons && images.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--prev", onClick: goToPrevious, disabled: disabled || readonly, title: "\uC774\uC804 \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 24 }) }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--next", onClick: goToNext, disabled: disabled || readonly, title: "\uB2E4\uC74C \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 24 }) })] })), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-lightbox__image-container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: [isImageError ? (jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__error", children: [jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__error-icon", children: "\u26A0\uFE0F" }), jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__error-text", children: "\uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." })] })) : (jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentImage.src, alt: currentImage.alt || currentImage.title || `이미지 ${internalCurrentIndex + 1}`, className: clsx('designbase-lightbox__image', {
+        }, className), children: jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__overlay", children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: "designbase-lightbox__modal", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__title", children: [currentImage.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-lightbox__title-text", children: currentImage.title })), showCounter && (jsxRuntimeExports.jsxs("span", { className: "designbase-lightbox__counter", children: [internalCurrentIndex + 1, " / ", images.length] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header-actions", children: [showToolbar && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enableZoom && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomOut, title: "\uC90C \uC544\uC6C3", type: "button", children: jsxRuntimeExports.jsx(icons.MinusIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomReset, title: "\uC90C \uB9AC\uC14B", type: "button", children: [Math.round(zoomLevel * 100), "%"] }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomIn, title: "\uC90C \uC778", type: "button", children: jsxRuntimeExports.jsx(icons.PlusIcon, { size: 16 }) })] })), enableRotate && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleRotate, title: "\uD68C\uC804", type: "button", children: jsxRuntimeExports.jsx(icons.RefreshIcon, { size: 16 }) })), enableDownload && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleDownload, title: "\uB2E4\uC6B4\uB85C\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.DownloadIcon, { size: 16 }) })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleFullscreenToggle, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 16 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 16 }) }))] })), showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__close-button", onClick: handleClose, title: "\uB2EB\uAE30", type: "button", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: 20 }) }))] })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__content", children: [showNavigationButtons && images.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--prev", onClick: goToPrevious, title: "\uC774\uC804 \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 24 }) }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--next", onClick: goToNext, title: "\uB2E4\uC74C \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 24 }) })] })), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-lightbox__image-container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: [isImageError ? (jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__error", children: [jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__error-icon", children: "\u26A0\uFE0F" }), jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__error-text", children: "\uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." })] })) : (jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentImage.src, alt: currentImage.alt || currentImage.title || `이미지 ${internalCurrentIndex + 1}`, className: clsx('designbase-lightbox__image', {
                                             'designbase-lightbox__image--loaded': isImageLoaded,
                                             'designbase-lightbox__image--dragging': isDragging,
                                         }), style: {
@@ -8035,10 +8614,10 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
                                             cursor: zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
                                         }, onLoad: handleImageLoad, onError: handleImageError })), !isImageLoaded && !isImageError && (jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__loading", children: [jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__spinner" }), jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__loading-text", children: "\uC774\uBBF8\uC9C0 \uB85C\uB529 \uC911..." })] }))] }), currentImage.description && (jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__description", children: jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__description-text", children: currentImage.description }) }))] }), showThumbnails && images.length > 1 && (jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__thumbnails", children: jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__thumbnails-container", children: images.map((image, index) => (jsxRuntimeExports.jsx("button", { className: clsx('designbase-lightbox__thumbnail', {
                                     'designbase-lightbox__thumbnail--active': index === internalCurrentIndex,
-                                }), onClick: () => handleImageChange(index), disabled: disabled || readonly, title: image.title || `이미지 ${index + 1}`, type: "button", children: jsxRuntimeExports.jsx("img", { src: image.thumbnail || image.src, alt: image.alt || image.title || `썸네일 ${index + 1}`, className: "designbase-lightbox__thumbnail-image" }) }, image.id))) }) }))] }) }) }));
+                                }), onClick: () => handleImageChange(index), title: image.title || `이미지 ${index + 1}`, type: "button", children: jsxRuntimeExports.jsx("img", { src: image.thumbnail || image.src, alt: image.alt || image.title || `썸네일 ${index + 1}`, className: "designbase-lightbox__thumbnail-image" }) }, image.id))) }) }))] }) }) }));
 };
 
-const ImageList = ({ images, layout = 'grid', columns = 3, spacing = 'md', ratio = '16:9', fit = 'cover', rounded = false, shadow = false, hover = true, clickable = true, lightbox = true, onImageClick, onImageLoad, onImageError, loading = 'lazy', responsive = true, className, style, }) => {
+const ImageList = ({ images, layout = 'grid', columns = 3, spacing = 'm', ratio = '16:9', fit = 'cover', rounded = false, shadow = false, hover = true, clickable = true, lightbox = true, onImageClick, onImageLoad, onImageError, loading = 'lazy', responsive = true, className, style, }) => {
     const [selectedImageIndex, setSelectedImageIndex] = React.useState(null);
     // 이미지 클릭 핸들러
     const handleImageClick = React.useCallback((image, index) => {
@@ -8136,8 +8715,7 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
     const renderBadge = (badge) => {
         if (!badge)
             return null;
-        const badgeClasses = clsx('designbase-list__item-badge', `designbase-list__item-badge--color-${badge.color || 'primary'}`, `designbase-list__item-badge--variant-${badge.variant || 'solid'}`);
-        return (jsxRuntimeExports.jsx("span", { className: badgeClasses, children: badge.text }));
+        return (jsxRuntimeExports.jsx(Badge, { variant: badge.variant || 'primary', style: badge.style || 'text', size: "s", children: badge.text }));
     };
     const renderMeta = (meta) => {
         if (!meta || meta.length === 0)
@@ -8550,7 +9128,7 @@ onFileUpload, onChange, onSave, onFocus, onBlur, className, }) => {
                             }, className: "designbase-markdown-editor__textarea" }) })), (currentMode === 'preview' || currentMode === 'split') && (jsxRuntimeExports.jsx("div", { className: "designbase-markdown-editor__preview-panel", children: jsxRuntimeExports.jsx("div", { ref: previewRef, className: "designbase-markdown-editor__preview", dangerouslySetInnerHTML: { __html: markdownToHtml(internalValue) } }) })), currentMode === 'code' && (jsxRuntimeExports.jsx("div", { className: "designbase-markdown-editor__code-panel", children: jsxRuntimeExports.jsx("pre", { className: "designbase-markdown-editor__code-view", children: jsxRuntimeExports.jsx("code", { children: internalValue }) }) }))] }), renderStatus()] }));
 };
 
-const Masonry = ({ images, columns = 3, spacing = 'md', ratio = 'auto', fit = 'cover', rounded = false, shadow = false, hover = true, clickable = true, lightbox = true, animation = 'fade', animationDelay = 100, onImageClick, onImageLoad, onImageError, loading = 'lazy', responsive = true, infiniteScroll = false, infiniteScrollThreshold = 100, onLoadMore, className, style, }) => {
+const Masonry = ({ images, columns = 3, spacing = 'm', ratio = 'auto', fit = 'cover', rounded = false, shadow = false, hover = true, clickable = true, lightbox = true, animation = 'fade', animationDelay = 100, onImageClick, onImageLoad, onImageError, loading = 'lazy', responsive = true, infiniteScroll = false, infiniteScrollThreshold = 100, onLoadMore, className, style, }) => {
     const [selectedImageIndex, setSelectedImageIndex] = React.useState(null);
     const [columnHeights, setColumnHeights] = React.useState([]);
     const [visibleImages, setVisibleImages] = React.useState([]);
@@ -8567,7 +9145,7 @@ const Masonry = ({ images, columns = 3, spacing = 'md', ratio = 'auto', fit = 'c
                 const imageHeight = columnWidth * aspectRatio;
                 // 가장 짧은 컬럼에 이미지 추가
                 const shortestColumn = heights.indexOf(Math.min(...heights));
-                heights[shortestColumn] += imageHeight + (spacing === 'xs' ? 4 : spacing === 'sm' ? 8 : spacing === 'md' ? 16 : spacing === 'lg' ? 24 : 32);
+                heights[shortestColumn] += imageHeight + (spacing === 'xs' ? 4 : spacing === 's' ? 8 : spacing === 'm' ? 16 : spacing === 'l' ? 24 : 32);
             }
         });
         setColumnHeights(heights);
@@ -8728,10 +9306,12 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
 };
 SearchBar.displayName = 'SearchBar';
 
-const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, onLogoClick, items = [], onItemClick, userMenuItems = [], onUserMenuItemClick, userProfile, onAuthClick, isAuthenticated = false, showSearch = false, onSearch, searchPlaceholder = '검색...', fullWidth = false, shadow = false, className, ...props }) => {
+const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, onLogoClick, items = [], onItemClick, userMenuItems = [], onUserMenuItemClick, userProfile, onLoginClick, onLogoutClick, isAuthenticated = false, showSearch = false, onSearch, searchPlaceholder = '검색...', fullWidth = false, shadow = false, className, ...props }) => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
     const [isUserMenuOpen, setIsUserMenuOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
+    const [expandedItems, setExpandedItems] = React.useState({});
+    const navbarRef = React.useRef(null);
     // 아이콘 크기 계산 (m이 기본값)
     const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
     const handleMobileMenuToggle = () => {
@@ -8740,14 +9320,26 @@ const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, on
     const handleUserMenuToggle = () => {
         setIsUserMenuOpen(!isUserMenuOpen);
     };
-    const handleItemClick = (item) => {
+    const handleItemClick = (item, isMobile = false) => {
         if (item.disabled)
             return;
+        // 모바일/태블릿에서만 하위 메뉴 확장/축소 토글
+        if (isMobile && item.children && item.children.length > 0) {
+            setExpandedItems(prev => ({
+                ...prev,
+                [item.id]: !prev[item.id]
+            }));
+            // 하위 메뉴가 있는 경우 메뉴를 닫지 않음
+            return;
+        }
+        if (item.onClick) {
+            item.onClick(item);
+        }
         if (onItemClick) {
             onItemClick(item);
         }
-        // 모바일 메뉴 자동 닫기
-        if (isMobileMenuOpen) {
+        // 모바일 메뉴 자동 닫기 (하위 메뉴가 없는 경우에만)
+        if (isMobileMenuOpen && (!item.children || item.children.length === 0)) {
             setIsMobileMenuOpen(false);
         }
     };
@@ -8759,107 +9351,103 @@ const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, on
         }
         setIsUserMenuOpen(false);
     };
+    const handleSubItemClick = (item) => {
+        if (item.disabled)
+            return;
+        if (item.onClick) {
+            item.onClick(item);
+        }
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        // 하위 메뉴 아이템 클릭 시 모바일 메뉴 닫기
+        if (isMobileMenuOpen) {
+            setIsMobileMenuOpen(false);
+        }
+    };
+    // 외부 클릭 시 메뉴 닫기
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (navbarRef.current && !navbarRef.current.contains(event.target)) {
+                setIsUserMenuOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
     const classes = clsx('designbase-navbar', `designbase-navbar--${size}`, `designbase-navbar--${variant}`, `designbase-navbar--${position}`, {
         'designbase-navbar--full-width': fullWidth,
         'designbase-navbar--shadow': shadow,
-        'designbase-navbar--mobile-open': isMobileMenuOpen,
     }, className);
     const containerClasses = clsx('designbase-navbar__container', {
         'designbase-navbar__container--full-width': fullWidth,
     });
-    // 재귀적으로 메뉴 아이템을 렌더링하는 함수
-    const renderMenuItem = (item, depth = 0) => {
+    // 메뉴 아이템을 렌더링하는 함수
+    const renderMenuItem = (item, isMobile = false) => {
         const hasChildren = item.children && item.children.length > 0;
-        const isFirstLevel = depth === 0;
-        const isSecondLevel = depth === 1;
-        if (isFirstLevel) {
-            // 1depth - 메인 네비게이션
-            return (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__nav-item", children: hasChildren ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__dropdown", children: [jsxRuntimeExports.jsxs("button", { className: clsx('designbase-navbar__nav-link', 'designbase-navbar__nav-link--has-children', {
-                                'designbase-navbar__nav-link--active': item.active,
-                                'designbase-navbar__nav-link--disabled': item.disabled,
-                            }), onClick: () => handleItemClick(item), disabled: item.disabled, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label, jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 12, className: "designbase-navbar__chevron" })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__dropdown-menu", children: item.children.map((child) => renderMenuItem(child, 1)) })] })) : (jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__nav-link', {
-                        'designbase-navbar__nav-link--active': item.active,
-                        'designbase-navbar__nav-link--disabled': item.disabled,
-                    }), onClick: (e) => {
-                        if (item.disabled) {
-                            e.preventDefault();
-                            return;
-                        }
-                        handleItemClick(item);
-                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] })) }, item.id));
-        }
-        else if (isSecondLevel) {
-            // 2depth - 드롭다운 메뉴
-            return (jsxRuntimeExports.jsx("li", { children: hasChildren ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__dropdown-item designbase-navbar__dropdown-item--has-children", children: [jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__dropdown-item', {
-                                'designbase-navbar__dropdown-item--active': item.active,
-                                'designbase-navbar__dropdown-item--disabled': item.disabled,
-                            }), onClick: (e) => {
-                                if (item.disabled) {
-                                    e.preventDefault();
-                                    return;
-                                }
-                                handleItemClick(item);
-                            }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label, jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 12, className: "designbase-navbar__chevron" })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__submenu", children: item.children.map((child) => renderMenuItem(child, 2)) })] })) : (jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__dropdown-item', {
-                        'designbase-navbar__dropdown-item--active': item.active,
-                        'designbase-navbar__dropdown-item--disabled': item.disabled,
-                    }), onClick: (e) => {
-                        if (item.disabled) {
-                            e.preventDefault();
-                            return;
-                        }
-                        handleItemClick(item);
-                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] })) }, item.id));
-        }
-        else {
-            // 3depth 이상 - 서브메뉴
-            return (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__dropdown-item', {
-                        'designbase-navbar__dropdown-item--active': item.active,
-                        'designbase-navbar__dropdown-item--disabled': item.disabled,
-                    }), onClick: (e) => {
-                        if (item.disabled) {
-                            e.preventDefault();
-                            return;
-                        }
-                        handleItemClick(item);
-                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id));
-        }
-    };
-    const renderNavItem = (item) => renderMenuItem(item, 0);
-    return (jsxRuntimeExports.jsxs("nav", { className: classes, role: "navigation", "aria-label": "\uBA54\uC778 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: [jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__brand", children: jsxRuntimeExports.jsx("div", { className: "designbase-navbar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }) }), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__nav-list", children: items.map(renderNavItem) }) }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', variant: "outlined" }) })), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__user-menu", children: isAuthenticated && userProfile ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__user-dropdown", children: [jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__user-toggle", onClick: handleUserMenuToggle, "aria-expanded": isUserMenuOpen, children: [jsxRuntimeExports.jsx(Avatar, { src: userProfile.avatar, alt: userProfile.name, initials: userProfile.name, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', badge: userProfile.badge, badgeVariant: userProfile.badgeVariant, badgeStyle: userProfile.badgeStyle, badgeText: userProfile.badgeText }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-name", children: userProfile.name }), jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 12 })] }), isUserMenuOpen && (jsxRuntimeExports.jsxs("ul", { className: "designbase-navbar__user-dropdown-menu", children: [userProfile.email && (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__user-info", children: jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-email", children: userProfile.email }) })), userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__user-dropdown-item', {
-                                                    'designbase-navbar__user-dropdown-item--disabled': item.disabled,
-                                                }), onClick: (e) => {
-                                                    if (item.disabled) {
-                                                        e.preventDefault();
-                                                        return;
-                                                    }
-                                                    handleUserMenuItemClick(item);
-                                                }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id)))] }))] })) : (jsxRuntimeExports.jsx("button", { className: "designbase-navbar__auth-button", onClick: onAuthClick, children: "\uB85C\uADF8\uC778" })) }), jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__mobile-toggle", onClick: handleMobileMenuToggle, "aria-expanded": isMobileMenuOpen, "aria-label": "\uBA54\uB274 \uC5F4\uAE30", children: [jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" })] })] }), isMobileMenuOpen && (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-menu", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-menu-header", children: [jsxRuntimeExports.jsx("h3", { children: "\uBA54\uB274" }), jsxRuntimeExports.jsx("button", { className: "designbase-navbar__mobile-menu-close", onClick: handleMobileMenuToggle, "aria-label": "\uBA54\uB274 \uB2EB\uAE30", children: jsxRuntimeExports.jsx("i", { className: "designbase-icon-x" }) })] }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: "s", variant: "outlined", fullWidth: true }) })), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-nav-list", children: items.map((item) => (jsxRuntimeExports.jsxs("li", { className: "designbase-navbar__mobile-nav-item", children: [jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__mobile-nav-link', {
-                                        'designbase-navbar__mobile-nav-link--active': item.active,
-                                        'designbase-navbar__mobile-nav-link--disabled': item.disabled,
-                                    }), onClick: (e) => {
-                                        if (item.disabled) {
-                                            e.preventDefault();
-                                            return;
-                                        }
-                                        handleItemClick(item);
-                                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }), item.children && item.children.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-submenu", children: item.children.map((child) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: child.href, className: clsx('designbase-navbar__mobile-submenu-link', {
-                                                'designbase-navbar__mobile-submenu-link--active': child.active,
-                                                'designbase-navbar__mobile-submenu-link--disabled': child.disabled,
+        const isExpanded = expandedItems[item.id];
+        if (isMobile) {
+            // 모바일에서는 MenuItem 컴포넌트 사용
+            return (jsxRuntimeExports.jsx(MenuItem, { id: item.id, label: item.label, href: item.href, icon: item.icon, active: item.active, disabled: item.disabled, badge: item.badge, badgeColor: item.badgeColor, variant: item.variant, type: "block", size: size, style: "accordion", subItems: item.children?.map(child => ({
+                    id: child.id,
+                    label: child.label,
+                    href: child.href,
+                    icon: child.icon,
+                    active: child.active,
+                    disabled: child.disabled,
+                    badge: child.badge,
+                    badgeColor: child.badgeColor,
+                    variant: child.variant,
+                    onClick: () => handleSubItemClick(child),
+                })), expandable: hasChildren, expanded: isExpanded, onClick: () => handleItemClick(item, true) }, item.id));
+        }
+        // 데스크톱에서는 기존 방식 유지
+        return (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__nav-item", children: hasChildren ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__dropdown", children: [jsxRuntimeExports.jsxs("button", { className: clsx('designbase-navbar__nav-link', 'designbase-navbar__nav-link--has-children', {
+                            'designbase-navbar__nav-link--active': item.active,
+                            'designbase-navbar__nav-link--disabled': item.disabled,
+                        }), onClick: () => handleItemClick(item, false), disabled: item.disabled, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label, jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 12, className: clsx('designbase-navbar__chevron', {
+                                    'designbase-navbar__chevron--expanded': isExpanded,
+                                }) })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__dropdown-menu", children: item.children.map((child) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: child.href, className: clsx('designbase-navbar__dropdown-item', {
+                                    'designbase-navbar__dropdown-item--active': child.active,
+                                    'designbase-navbar__dropdown-item--disabled': child.disabled,
+                                }), onClick: (e) => {
+                                    if (child.disabled) {
+                                        e.preventDefault();
+                                        return;
+                                    }
+                                    handleItemClick(child, false);
+                                }, children: [child.icon && React.createElement(child.icon, { size: iconSize, color: 'currentColor' }), child.label] }) }, child.id))) })] })) : (jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__nav-link', {
+                    'designbase-navbar__nav-link--active': item.active,
+                    'designbase-navbar__nav-link--disabled': item.disabled,
+                }), onClick: (e) => {
+                    if (item.disabled) {
+                        e.preventDefault();
+                        return;
+                    }
+                    handleItemClick(item, false);
+                }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] })) }, item.id));
+    };
+    return (jsxRuntimeExports.jsxs("nav", { ref: navbarRef, className: clsx(classes, {
+            'designbase-navbar--mobile-open': isMobileMenuOpen,
+        }), role: "navigation", "aria-label": "\uBA54\uC778 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: [jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__left", children: jsxRuntimeExports.jsx("div", { className: "designbase-navbar__brand", children: jsxRuntimeExports.jsx("div", { className: "designbase-navbar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, children: logo || jsxRuntimeExports.jsx(Logo, { size: "s" }) }) }) }), jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__right", children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__nav designbase-navbar__nav--desktop", children: jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__nav-list", children: items.map(item => renderMenuItem(item, false)) }) }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', variant: "outlined" }) })), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__user-menu", children: isAuthenticated && userProfile ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__user-dropdown", children: [jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__user-toggle", onClick: handleUserMenuToggle, "aria-expanded": isUserMenuOpen, children: [jsxRuntimeExports.jsx(Avatar, { src: userProfile.avatar, alt: userProfile.name, initials: userProfile.name, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', badge: userProfile.badge, badgeVariant: userProfile.badgeVariant, badgeStyle: userProfile.badgeStyle, badgeText: userProfile.badgeText }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-name", children: userProfile.name }), jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 12 })] }), isUserMenuOpen && (jsxRuntimeExports.jsxs("ul", { className: "designbase-navbar__user-dropdown-menu", children: [userProfile.email && (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__user-info", children: jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-email", children: userProfile.email }) })), userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__user-dropdown-item', {
+                                                            'designbase-navbar__user-dropdown-item--disabled': item.disabled,
+                                                        }), onClick: (e) => {
+                                                            if (item.disabled) {
+                                                                e.preventDefault();
+                                                                return;
+                                                            }
+                                                            handleUserMenuItemClick(item);
+                                                        }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id)))] }))] })) : (jsxRuntimeExports.jsx(Button, { variant: "primary", size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', onClick: onLoginClick, children: "\uB85C\uADF8\uC778" })) })] }), jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__mobile-toggle", onClick: handleMobileMenuToggle, "aria-expanded": isMobileMenuOpen, "aria-label": "\uBA54\uB274 \uC5F4\uAE30", children: [jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" })] })] }), isMobileMenuOpen && (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-menu", children: [showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: "s", variant: "outlined", fullWidth: true }) })), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-nav-list", children: items.map((item) => renderMenuItem(item, true)) }), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user", children: isAuthenticated && userProfile ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-user-info", children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-navbar__mobile-user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-email", children: userProfile.email }))] })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__mobile-user-menu-link', {
+                                                'designbase-navbar__mobile-user-menu-link--disabled': item.disabled,
                                             }), onClick: (e) => {
-                                                if (child.disabled) {
+                                                if (item.disabled) {
                                                     e.preventDefault();
                                                     return;
                                                 }
-                                                handleItemClick(child);
-                                            }, children: [child.icon && React.createElement(child.icon, { size: iconSize, color: 'currentColor' }), child.label] }) }, child.id))) }))] }, item.id))) }), isAuthenticated && userProfile && (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-user", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-user-info", children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-navbar__mobile-user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-email", children: userProfile.email }))] })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__mobile-user-menu-link', {
-                                            'designbase-navbar__mobile-user-menu-link--disabled': item.disabled,
-                                        }), onClick: (e) => {
-                                            if (item.disabled) {
-                                                e.preventDefault();
-                                                return;
-                                            }
-                                            handleUserMenuItemClick(item);
-                                        }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id))) })] }))] }))] }));
+                                                handleUserMenuItemClick(item);
+                                            }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id))) })] })) : (jsxRuntimeExports.jsx(Button, { variant: "primary", size: "m", onClick: onLoginClick, fullWidth: true, children: "\uB85C\uADF8\uC778" })) })] }))] }));
 };
 Navbar.displayName = 'Navbar';
 
@@ -8941,302 +9529,269 @@ const Pagination = ({ currentPage, totalPages, totalItems, pageSize = 10, pageSi
 };
 Pagination.displayName = 'Pagination';
 
-const Popover = ({ content, children, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, showCloseButton = true, className, ...props }) => {
+const GAP$1 = 8; // trigger와 popover 사이 간격
+const Popover = ({ content, children, title, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 0, // 클릭/포커스는 즉시, 호버는 아래에서만 적용
+hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, className, ...props }) => {
     const [internalOpen, setInternalOpen] = React.useState(false);
-    const [popoverStyle, setPopoverStyle] = React.useState({});
-    const [arrowStyle, setArrowStyle] = React.useState({});
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? !!controlledOpen : internalOpen;
     const triggerRef = React.useRef(null);
     const popoverRef = React.useRef(null);
-    const timeoutRef = React.useRef();
-    // 제어/비제어 컴포넌트 처리
-    const isControlled = controlledOpen !== undefined;
-    const isOpen = isControlled ? controlledOpen : internalOpen;
-    // 팝오버 위치 계산
+    const [style, setStyle] = React.useState({});
+    const [arrowStyle, setArrowStyle] = React.useState({});
+    const [placementGroup, setPlacementGroup] = React.useState('top'); // 애니메이션 방향용
+    const rafId = React.useRef(null);
+    const timers = React.useRef({});
+    // ----- 위치 계산 ----------------------------------------------------------
     const calculatePosition = React.useCallback(() => {
         if (!triggerRef.current || !popoverRef.current)
             return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const popoverRect = popoverRef.current.getBoundingClientRect();
-        const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
-        const scrollY = window.pageYOffset || document.documentElement.scrollTop;
-        let top = 0;
-        let left = 0;
-        let arrowTop = 0;
-        let arrowLeft = 0;
-        const isVertical = position.startsWith('top') || position.startsWith('bottom');
-        const isHorizontal = position.startsWith('left') || position.startsWith('right');
+        const tRect = triggerRef.current.getBoundingClientRect();
+        const pRect = popoverRef.current.getBoundingClientRect();
+        // fixed 기준 → 스크롤값 불필요
+        let top = 0, left = 0;
+        let aTop = 0, aLeft = 0;
+        const setGroup = (p) => {
+            if (p.startsWith('top'))
+                return 'top';
+            if (p.startsWith('bottom'))
+                return 'bottom';
+            if (p.startsWith('left'))
+                return 'left';
+            return 'right';
+        };
         switch (position) {
             case 'top':
-                top = triggerRect.top + scrollY - popoverRect.height - 8;
-                left = triggerRect.left + scrollX + (triggerRect.width / 2) - (popoverRect.width / 2);
-                arrowTop = popoverRect.height;
-                arrowLeft = popoverRect.width / 2 - 4;
+                top = tRect.top - pRect.height - GAP$1;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = pRect.height;
+                aLeft = pRect.width / 2 - 4;
                 break;
             case 'top-start':
-                top = triggerRect.top + scrollY - popoverRect.height - 8;
-                left = triggerRect.left + scrollX;
-                arrowTop = popoverRect.height;
-                arrowLeft = 12;
+                top = tRect.top - pRect.height - GAP$1;
+                left = tRect.left;
+                aTop = pRect.height;
+                aLeft = 12;
                 break;
             case 'top-end':
-                top = triggerRect.top + scrollY - popoverRect.height - 8;
-                left = triggerRect.right + scrollX - popoverRect.width;
-                arrowTop = popoverRect.height;
-                arrowLeft = popoverRect.width - 12;
+                top = tRect.top - pRect.height - GAP$1;
+                left = tRect.right - pRect.width;
+                aTop = pRect.height;
+                aLeft = pRect.width - 12;
                 break;
             case 'bottom':
-                top = triggerRect.bottom + scrollY + 8;
-                left = triggerRect.left + scrollX + (triggerRect.width / 2) - (popoverRect.width / 2);
-                arrowTop = -4;
-                arrowLeft = popoverRect.width / 2 - 4;
+                top = tRect.bottom + GAP$1;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = -4;
+                aLeft = pRect.width / 2 - 4;
                 break;
             case 'bottom-start':
-                top = triggerRect.bottom + scrollY + 8;
-                left = triggerRect.left + scrollX;
-                arrowTop = -4;
-                arrowLeft = 12;
+                top = tRect.bottom + GAP$1;
+                left = tRect.left;
+                aTop = -4;
+                aLeft = 12;
                 break;
             case 'bottom-end':
-                top = triggerRect.bottom + scrollY + 8;
-                left = triggerRect.right + scrollX - popoverRect.width;
-                arrowTop = -4;
-                arrowLeft = popoverRect.width - 12;
+                top = tRect.bottom + GAP$1;
+                left = tRect.right - pRect.width;
+                aTop = -4;
+                aLeft = pRect.width - 12;
                 break;
             case 'left':
-                top = triggerRect.top + scrollY + (triggerRect.height / 2) - (popoverRect.height / 2);
-                left = triggerRect.left + scrollX - popoverRect.width - 8;
-                arrowTop = popoverRect.height / 2 - 4;
-                arrowLeft = popoverRect.width;
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.left - pRect.width - GAP$1;
+                aTop = pRect.height / 2 - 4;
+                aLeft = pRect.width;
                 break;
             case 'left-start':
-                top = triggerRect.top + scrollY;
-                left = triggerRect.left + scrollX - popoverRect.width - 8;
-                arrowTop = 12;
-                arrowLeft = popoverRect.width;
+                top = tRect.top;
+                left = tRect.left - pRect.width - GAP$1;
+                aTop = 12;
+                aLeft = pRect.width;
                 break;
             case 'left-end':
-                top = triggerRect.bottom + scrollY - popoverRect.height;
-                left = triggerRect.left + scrollX - popoverRect.width - 8;
-                arrowTop = popoverRect.height - 12;
-                arrowLeft = popoverRect.width;
+                top = tRect.bottom - pRect.height;
+                left = tRect.left - pRect.width - GAP$1;
+                aTop = pRect.height - 12;
+                aLeft = pRect.width;
                 break;
             case 'right':
-                top = triggerRect.top + scrollY + (triggerRect.height / 2) - (popoverRect.height / 2);
-                left = triggerRect.right + scrollX + 8;
-                arrowTop = popoverRect.height / 2 - 4;
-                arrowLeft = -4;
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.right + GAP$1;
+                aTop = pRect.height / 2 - 4;
+                aLeft = -4;
                 break;
             case 'right-start':
-                top = triggerRect.top + scrollY;
-                left = triggerRect.right + scrollX + 8;
-                arrowTop = 12;
-                arrowLeft = -4;
+                top = tRect.top;
+                left = tRect.right + GAP$1;
+                aTop = 12;
+                aLeft = -4;
                 break;
             case 'right-end':
-                top = triggerRect.bottom + scrollY - popoverRect.height;
-                left = triggerRect.right + scrollX + 8;
-                arrowTop = popoverRect.height - 12;
-                arrowLeft = -4;
+                top = tRect.bottom - pRect.height;
+                left = tRect.right + GAP$1;
+                aTop = pRect.height - 12;
+                aLeft = -4;
                 break;
         }
-        // 화면 경계 체크 및 조정
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // 수평 경계 체크
-        if (left < 8) {
+        // viewport 충돌 보정(살짝 shift)
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (left < 8)
             left = 8;
-            if (isHorizontal) {
-                arrowLeft = Math.max(arrowLeft, 4);
-            }
-        }
-        else if (left + popoverRect.width > viewportWidth - 8) {
-            left = viewportWidth - popoverRect.width - 8;
-            if (isHorizontal) {
-                arrowLeft = Math.min(arrowLeft, popoverRect.width - 4);
-            }
-        }
-        // 수직 경계 체크
-        if (top < 8) {
+        if (left + pRect.width > vw - 8)
+            left = vw - pRect.width - 8;
+        if (top < 8)
             top = 8;
-            if (isVertical) {
-                arrowTop = Math.max(arrowTop, 4);
-            }
-        }
-        else if (top + popoverRect.height > viewportHeight - 8) {
-            top = viewportHeight - popoverRect.height - 8;
-            if (isVertical) {
-                arrowTop = Math.min(arrowTop, popoverRect.height - 4);
-            }
-        }
-        setPopoverStyle({
+        if (top + pRect.height > vh - 8)
+            top = vh - pRect.height - 8;
+        setStyle({
             position: 'fixed',
-            top: `${top}px`,
-            left: `${left}px`,
-            maxWidth: `${maxWidth}px`,
+            top,
+            left,
+            maxWidth,
             zIndex: 9999,
         });
-        setArrowStyle({
-            position: 'absolute',
-            top: `${arrowTop}px`,
-            left: `${arrowLeft}px`,
-        });
+        setArrowStyle({ position: 'absolute', top: aTop, left: aLeft });
+        setPlacementGroup(setGroup(position));
     }, [position, maxWidth]);
-    // 팝오버 열기
-    const openPopover = React.useCallback(() => {
-        if (disabled || alwaysShow)
-            return;
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
+    // 첫 페인트 전에 위치를 확정 (깜빡임/점프 제거)
+    React.useLayoutEffect(() => {
+        if (isOpen) {
+            calculatePosition();
         }
-        timeoutRef.current = setTimeout(() => {
-            const newOpen = true;
-            if (!isControlled) {
-                setInternalOpen(newOpen);
-            }
-            onOpenChange?.(newOpen);
-            // 위치 계산을 위해 다음 프레임에서 실행
-            requestAnimationFrame(() => {
+    }, [isOpen, calculatePosition]);
+    // 스크롤/리사이즈는 rAF에 태워 스로틀
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const onMove = () => {
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+            rafId.current = requestAnimationFrame(() => {
                 calculatePosition();
+                rafId.current = null;
             });
-        }, trigger === 'hover' ? delay : 0);
-    }, [disabled, alwaysShow, isControlled, onOpenChange, calculatePosition, trigger, delay]);
-    // 팝오버 닫기
+        };
+        window.addEventListener('scroll', onMove, { passive: true, capture: true });
+        window.addEventListener('resize', onMove, { passive: true });
+        // 컨텐츠/트리거 크기 변화 추적
+        const ResizeObserver = window.ResizeObserver;
+        const ro = ResizeObserver ? new ResizeObserver(() => onMove()) : null;
+        if (ro) {
+            if (triggerRef.current)
+                ro.observe(triggerRef.current);
+            if (popoverRef.current)
+                ro.observe(popoverRef.current);
+        }
+        return () => {
+            window.removeEventListener('scroll', onMove, true);
+            window.removeEventListener('resize', onMove);
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+            ro?.disconnect?.();
+        };
+    }, [isOpen, calculatePosition]);
+    // open/close helpers
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const openPopover = React.useCallback(() => {
+        if (disabled || alwaysShow)
+            return;
+        if (timers.current.t)
+            clearTimeout(timers.current.t);
+        const d = trigger === 'hover' ? Math.max(0, delay) : 0;
+        timers.current.t = setTimeout(() => {
+            setOpen(true);
+        }, d);
+    }, [trigger, delay, disabled, alwaysShow, setOpen]);
     const closePopover = React.useCallback(() => {
         if (disabled || alwaysShow)
             return;
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-            const newOpen = false;
-            if (!isControlled) {
-                setInternalOpen(newOpen);
-            }
-            onOpenChange?.(newOpen);
-        }, trigger === 'hover' ? hideDelay : 0);
-    }, [disabled, alwaysShow, isControlled, onOpenChange, trigger, hideDelay]);
-    // 이벤트 핸들러
+        if (timers.current.t)
+            clearTimeout(timers.current.t);
+        const d = trigger === 'hover' ? Math.max(0, hideDelay) : 0;
+        timers.current.t = setTimeout(() => {
+            setOpen(false);
+        }, d);
+    }, [trigger, hideDelay, disabled, alwaysShow, setOpen]);
+    // 트리거 이벤트
     const handleClick = React.useCallback((e) => {
-        if (trigger === 'click') {
-            e.preventDefault();
-            e.stopPropagation();
-            if (isOpen) {
-                closePopover();
-            }
-            else {
-                openPopover();
-            }
-        }
+        if (trigger !== 'click')
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        isOpen ? closePopover() : openPopover();
     }, [trigger, isOpen, openPopover, closePopover]);
     const handleMouseEnter = React.useCallback(() => {
-        if (trigger === 'hover') {
+        if (trigger === 'hover')
             openPopover();
-        }
     }, [trigger, openPopover]);
     const handleMouseLeave = React.useCallback(() => {
-        if (trigger === 'hover') {
+        if (trigger === 'hover')
             closePopover();
-        }
     }, [trigger, closePopover]);
     const handleFocus = React.useCallback(() => {
-        if (trigger === 'focus') {
+        if (trigger === 'focus')
             openPopover();
-        }
     }, [trigger, openPopover]);
     const handleBlur = React.useCallback(() => {
-        if (trigger === 'focus') {
+        if (trigger === 'focus')
             closePopover();
-        }
     }, [trigger, closePopover]);
-    // 키보드 이벤트
     const handleKeyDown = React.useCallback((e) => {
-        if (e.key === 'Escape' && closeOnEscape) {
+        if (e.key === 'Escape' && closeOnEscape)
             closePopover();
-        }
     }, [closeOnEscape, closePopover]);
-    // 닫기 버튼 핸들러
-    const handleCloseClick = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const handleCloseClick = React.useCallback(() => {
         closePopover();
     }, [closePopover]);
-    // 외부 클릭 처리
-    React.useEffect(() => {
-        if (isOpen && closeOnOutsideClick) {
-            const handleOutsideClick = (e) => {
-                if (triggerRef.current &&
-                    popoverRef.current &&
-                    !triggerRef.current.contains(e.target) &&
-                    !popoverRef.current.contains(e.target)) {
-                    closePopover();
-                }
-            };
-            document.addEventListener('mousedown', handleOutsideClick);
-            return () => {
-                document.removeEventListener('mousedown', handleOutsideClick);
-            };
-        }
-    }, [isOpen, closeOnOutsideClick, closePopover]);
-    // 윈도우 리사이즈 및 스크롤 이벤트
+    // 외부 클릭 닫기
     React.useEffect(() => {
-        if (isOpen) {
-            const handleResize = () => calculatePosition();
-            const handleScroll = () => calculatePosition();
-            window.addEventListener('resize', handleResize);
-            window.addEventListener('scroll', handleScroll, true);
-            return () => {
-                window.removeEventListener('resize', handleResize);
-                window.removeEventListener('scroll', handleScroll, true);
-            };
-        }
-    }, [isOpen, calculatePosition]);
-    // 컴포넌트 언마운트 시 타이머 정리
-    React.useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
+        if (!isOpen || !closeOnOutsideClick)
+            return;
+        const onDown = (e) => {
+            if (!triggerRef.current || !popoverRef.current)
+                return;
+            const t = e.target;
+            if (!triggerRef.current.contains(t) && !popoverRef.current.contains(t)) {
+                closePopover();
             }
         };
-    }, []);
-    // 항상 표시 모드
+        document.addEventListener('mousedown', onDown);
+        return () => document.removeEventListener('mousedown', onDown);
+    }, [isOpen, closeOnOutsideClick, closePopover]);
+    // alwaysShow 모드 동기화
     React.useEffect(() => {
-        if (alwaysShow && !disabled) {
-            const newOpen = true;
-            if (!isControlled) {
-                setInternalOpen(newOpen);
-            }
-            onOpenChange?.(newOpen);
-            requestAnimationFrame(() => {
-                calculatePosition();
-            });
-        }
-        else if (!alwaysShow) {
-            const newOpen = false;
-            if (!isControlled) {
-                setInternalOpen(newOpen);
-            }
-            onOpenChange?.(newOpen);
-        }
-    }, [alwaysShow, disabled, isControlled, onOpenChange, calculatePosition]);
-    const classes = clsx('designbase-popover', `designbase-popover--${size}`, `designbase-popover--${variant}`, `designbase-popover--${position}`, {
-        'designbase-popover--visible': isOpen,
-        'designbase-popover--disabled': disabled,
-    }, className);
+        if (disabled)
+            return;
+        if (alwaysShow)
+            setOpen(true);
+        else if (!isControlled)
+            setOpen(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [alwaysShow, disabled]);
+    React.useEffect(() => () => { if (timers.current.t)
+        clearTimeout(timers.current.t); }, []);
+    const classes = clsx('designbase-popover', `designbase-popover--${size}`, `designbase-popover--${variant}`, `designbase-popover--${position}`, { 'designbase-popover--visible': isOpen, 'designbase-popover--disabled': disabled }, className);
     const arrowClasses = clsx('designbase-popover__arrow', `designbase-popover__arrow--${position}`);
-    // 자식 요소에 이벤트 핸들러 추가
+    // 자식에 트리거 이벤트 주입
     const enhancedChildren = React.cloneElement(children, {
         ref: triggerRef,
-        onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
+        onClick: (e) => { children.props.onClick?.(e); handleClick(e); },
+        onMouseEnter: (e) => { children.props.onMouseEnter?.(e); handleMouseEnter(); },
+        onMouseLeave: (e) => { children.props.onMouseLeave?.(e); handleMouseLeave(); },
+        onFocus: (e) => { children.props.onFocus?.(e); handleFocus(); },
+        onBlur: (e) => { children.props.onBlur?.(e); handleBlur(); },
+        onKeyDown: (e) => { children.props.onKeyDown?.(e); handleKeyDown(e); },
         tabIndex: children.props.tabIndex ?? 0,
         'aria-expanded': isOpen,
         'aria-haspopup': 'dialog',
     });
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enhancedChildren, isOpen && (jsxRuntimeExports.jsxs("div", { ref: popoverRef, className: classes, style: popoverStyle, role: "dialog", "aria-modal": "false", ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-popover__content", children: [showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-popover__close-button", onClick: handleCloseClick, "aria-label": "\uD31D\uC624\uBC84 \uB2EB\uAE30", type: "button" })), content] }), showArrow && (jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle }))] }))] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enhancedChildren, isOpen && (jsxRuntimeExports.jsxs("div", { ref: popoverRef, className: classes, style: style, role: "dialog", "aria-modal": "false", "data-placement-group": placementGroup, ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-popover__content", children: [(title || true) && (jsxRuntimeExports.jsxs("div", { className: "designbase-popover__header", children: [title && (jsxRuntimeExports.jsx("h3", { className: "designbase-popover__title", children: title })), jsxRuntimeExports.jsx(Button, { size: "s", variant: "tertiary", iconOnly: true, onPress: handleCloseClick, "aria-label": "\uD31D\uC624\uBC84 \uB2EB\uAE30", className: "designbase-popover__close-button", children: jsxRuntimeExports.jsx(icons.CloseIcon, {}) })] })), jsxRuntimeExports.jsx("div", { className: "designbase-popover__body", children: content })] }), showArrow && jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
 };
 Popover.displayName = 'Popover';
 
@@ -9258,7 +9813,7 @@ const Progress = ({ value, max = 100, size = 'm', variant = 'default', type = 'l
     return (jsxRuntimeExports.jsx("div", { className: classes, children: type === 'linear' ? renderLinearProgress() : renderCircularProgress() }));
 };
 
-const ProgressStep = ({ items, variant = 'default', size = 'm', layout = 'vertical', currentStep = 0, clickable = false, fullWidth = false, disabled = false, className, style, onStepClick, }) => {
+const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0, clickable = false, fullWidth = false, disabled = false, className, style, onStepClick, }) => {
     const handleStepClick = (item, index) => {
         if (disabled || item.disabled || !clickable)
             return;
@@ -9274,7 +9829,7 @@ const ProgressStep = ({ items, variant = 'default', size = 'm', layout = 'vertic
             return 'active';
         return 'pending';
     };
-    const classes = clsx('designbase-progress-step', `designbase-progress-step--${variant}`, `designbase-progress-step--${size}`, `designbase-progress-step--${layout}`, {
+    const classes = clsx('designbase-progress-step', `designbase-progress-step--${size}`, `designbase-progress-step--${layout}`, {
         'designbase-progress-step--clickable': clickable,
         'designbase-progress-step--full-width': fullWidth,
         'designbase-progress-step--disabled': disabled,
@@ -10153,7 +10708,7 @@ const Section = ({ title, subtitle, description, size = 'm', variant = 'default'
     return (jsxRuntimeExports.jsxs("section", { className: classes, children: [hasHeader && (jsxRuntimeExports.jsx("div", { className: "designbase-section__header", children: header || (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(title || subtitle) && (jsxRuntimeExports.jsxs("div", { className: "designbase-section__title-area", children: [title && (jsxRuntimeExports.jsx("h2", { className: "designbase-section__title", children: title })), subtitle && (jsxRuntimeExports.jsx("h3", { className: "designbase-section__subtitle", children: subtitle })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-section__description", children: description }))] })), actions && (jsxRuntimeExports.jsx("div", { className: "designbase-section__actions", children: actions }))] })) })), jsxRuntimeExports.jsx("div", { className: "designbase-section__content", children: children }), footer && (jsxRuntimeExports.jsx("div", { className: "designbase-section__footer", children: footer }))] }));
 };
 
-const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant = 'button', size = 'm', position = 'bottom', platforms = ['facebook', 'twitter', 'linkedin', 'whatsapp', 'email', 'link'], customPlatforms = {}, buttonText = '공유', buttonIcon = icons.ShareAltIcon, modalTitle = '공유하기', copySuccessMessage = '링크가 클립보드에 복사되었습니다!', showQrCode = true, qrCodeSize = 200, className, style, onShare, onShareError, onCopySuccess, onCopyError, }) => {
+const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant = 'button', size = 'm', position = 'bottom', platforms = ['facebook', 'x', 'linkedin', 'whatsapp', 'email', 'link'], customPlatforms = {}, buttonText = '공유', buttonIcon = icons.ShareAltIcon, modalTitle = '공유하기', copySuccessMessage = '링크가 클립보드에 복사되었습니다!', showQrCode = true, qrCodeSize = 200, className, style, onShare, onShareError, onCopySuccess, onCopyError, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [isCopied, setIsCopied] = React.useState(false);
     const [qrCodeData, setQrCodeData] = React.useState('');
@@ -10161,19 +10716,19 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
     const defaultPlatforms = {
         facebook: {
             name: 'Facebook',
-            icon: icons.ShareAltIcon,
+            icon: icons.FacebookIcon,
             color: '#1877f2',
             shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}',
         },
-        twitter: {
-            name: 'Twitter',
-            icon: icons.ShareAltIcon,
-            color: '#1da1f2',
+        x: {
+            name: 'X',
+            icon: icons.XIcon,
+            color: '#000000',
             shareUrl: 'https://twitter.com/intent/tweet?url={url}&text={title}&hashtags={hashtags}',
         },
         instagram: {
             name: 'Instagram',
-            icon: icons.ShareAltIcon,
+            icon: icons.InstagramIcon,
             color: '#e4405f',
             shareUrl: 'https://www.instagram.com/',
             customShare: () => {
@@ -10183,25 +10738,25 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
         },
         linkedin: {
             name: 'LinkedIn',
-            icon: icons.ShareAltIcon,
+            icon: icons.LinkedinIcon,
             color: '#0077b5',
             shareUrl: 'https://www.linkedin.com/sharing/share-offsite/?url={url}',
         },
         pinterest: {
             name: 'Pinterest',
-            icon: icons.ShareAltIcon,
+            icon: icons.PinterestIcon,
             color: '#bd081c',
             shareUrl: 'https://pinterest.com/pin/create/button/?url={url}&description={title}&media={imageUrl}',
         },
         whatsapp: {
             name: 'WhatsApp',
-            icon: icons.ShareAltIcon,
+            icon: icons.WhatsappIcon,
             color: '#25d366',
             shareUrl: 'https://wa.me/?text={title}%20{url}',
         },
         telegram: {
             name: 'Telegram',
-            icon: icons.ShareAltIcon,
+            icon: icons.TelegramIcon,
             color: '#0088cc',
             shareUrl: 'https://t.me/share/url?url={url}&text={title}',
         },
@@ -10220,7 +10775,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
         },
         qr: {
             name: 'QR 코드',
-            icon: icons.ShareAltIcon,
+            icon: icons.ScanQrcodeIcon,
             color: '#6c757d',
             shareUrl: '',
             customShare: () => handleShowQrCode(),
@@ -10296,7 +10851,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
     // 공유 버튼 렌더링
     const renderShareButton = () => {
         const ButtonIcon = buttonIcon;
-        return (jsxRuntimeExports.jsx(Button, { variant: "secondary", size: size, onClick: () => setIsOpen(!isOpen), className: "designbase-share__trigger", icon: ButtonIcon, children: buttonText }));
+        return (jsxRuntimeExports.jsx(Button, { variant: "secondary", size: size, onPress: () => setIsOpen(!isOpen), className: "designbase-share__trigger", startIcon: ButtonIcon, children: buttonText }));
     };
     // 플랫폼 버튼 렌더링
     const renderPlatformButton = (platform) => {
@@ -10310,7 +10865,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
             }), style: { '--platform-color': config.color }, onClick: () => handlePlatformShare(platform), title: config.name, "aria-label": `${config.name}에 공유하기`, children: [jsxRuntimeExports.jsx(PlatformIcon, { className: "designbase-share__platform-icon" }), jsxRuntimeExports.jsx("span", { className: "designbase-share__platform-name", children: config.name }), isLinkCopy && isCopied && (jsxRuntimeExports.jsxs("span", { className: "designbase-share__copy-success", children: [jsxRuntimeExports.jsx(icons.CopyIcon, {}), "\uBCF5\uC0AC\uB428!"] }))] }, platform));
     };
     // 공유 영역 렌더링
-    const renderShareContent = () => (jsxRuntimeExports.jsxs("div", { className: "designbase-share__content", children: [jsxRuntimeExports.jsx("div", { className: "designbase-share__platforms", children: activePlatforms.map(renderPlatformButton) }), showQrCode && qrCodeData && (jsxRuntimeExports.jsxs("div", { className: "designbase-share__qr-section", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__qr-title", children: "QR \uCF54\uB4DC" }), jsxRuntimeExports.jsx("div", { className: "designbase-share__qr-code", children: jsxRuntimeExports.jsx("img", { src: generateQrCode(), alt: "QR Code", width: qrCodeSize, height: qrCodeSize }) }), jsxRuntimeExports.jsx("p", { className: "designbase-share__qr-description", children: "QR \uCF54\uB4DC\uB97C \uC2A4\uCE94\uD558\uC5EC \uB9C1\uD06C\uC5D0 \uC811\uC18D\uD558\uC138\uC694" })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-preview", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__link-title", children: "\uACF5\uC720 \uB9C1\uD06C" }), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-container", children: [jsxRuntimeExports.jsx("input", { type: "text", value: url, readOnly: true, className: "designbase-share__link-input" }), jsxRuntimeExports.jsx(Button, { size: "s", variant: "primary", onClick: handleCopyLink, className: "designbase-share__copy-button", icon: isCopied ? icons.CopyIcon : icons.LinkIcon, children: isCopied ? '복사됨!' : '복사' })] })] })] }));
+    const renderShareContent = () => (jsxRuntimeExports.jsxs("div", { className: "designbase-share__content", children: [jsxRuntimeExports.jsx("div", { className: "designbase-share__platforms", children: activePlatforms.map(renderPlatformButton) }), showQrCode && qrCodeData && (jsxRuntimeExports.jsxs("div", { className: "designbase-share__qr-section", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__qr-title", children: "QR \uCF54\uB4DC" }), jsxRuntimeExports.jsx("div", { className: "designbase-share__qr-code", children: jsxRuntimeExports.jsx("img", { src: generateQrCode(), alt: "QR Code", width: qrCodeSize, height: qrCodeSize }) }), jsxRuntimeExports.jsx("p", { className: "designbase-share__qr-description", children: "QR \uCF54\uB4DC\uB97C \uC2A4\uCE94\uD558\uC5EC \uB9C1\uD06C\uC5D0 \uC811\uC18D\uD558\uC138\uC694" })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-preview", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__link-title", children: "\uACF5\uC720 \uB9C1\uD06C" }), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-container", children: [jsxRuntimeExports.jsx(Input, { type: "text", value: url, readOnly: true, size: "s", fullWidth: true, className: "designbase-share__link-input" }), jsxRuntimeExports.jsx(Button, { size: "s", variant: "primary", onPress: handleCopyLink, className: "designbase-share__copy-button", startIcon: isCopied ? icons.CopyIcon : icons.LinkIcon, children: isCopied ? '복사됨!' : '복사' })] })] })] }));
     // 변형별 렌더링
     switch (variant) {
         case 'dropdown':
@@ -10381,22 +10936,14 @@ const Sidebar = ({ size = 'm', variant = 'default', position = 'left', logo, onL
                                     e.preventDefault();
                                     onLogoClick();
                                 }
-                            }, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }), collapsible && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "s", iconOnly: true, className: "designbase-sidebar__toggle", onPress: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { className: clsx('designbase-sidebar__toggle-icon', {
+                            }, children: logo || jsxRuntimeExports.jsx(Logo, { size: "s" }) }), collapsible && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "s", iconOnly: true, className: "designbase-sidebar__toggle", onPress: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { className: clsx('designbase-sidebar__toggle-icon', {
                                     'designbase-sidebar__toggle-icon--collapsed': collapsed,
                                 }) }) }))] }), jsxRuntimeExports.jsx("nav", { className: "designbase-sidebar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-info", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
                                 if (e.key === 'Enter' || e.key === ' ') {
                                     e.preventDefault();
                                     onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
                                 }
-                            }, style: { cursor: 'pointer' }, children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-sidebar__user-menu-link', {
-                                        'designbase-sidebar__user-menu-link--disabled': item.disabled,
-                                    }), onClick: (e) => {
-                                        if (item.disabled) {
-                                            e.preventDefault();
-                                            return;
-                                        }
-                                        handleUserMenuItemClick(item);
-                                    }, children: [item.icon && React.createElement(item.icon, { size: 16 }), item.label] }) }, item.id))) }))] })), userProfile && collapsed && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-collapsed", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                            }, style: { cursor: 'pointer' }, children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsx(MenuItem, { id: item.id, label: item.label, href: item.href, icon: item.icon, disabled: item.disabled, type: "block", style: "accordion", onClick: () => handleUserMenuItemClick(item) }) }, item.id))) }))] })), userProfile && collapsed && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-collapsed", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
@@ -10632,8 +11179,12 @@ const Stepper = ({ value = 0, min = 0, max = 100, step = 1, size = 'm', variant
     return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsx("button", { type: "button", className: decrementClasses, onClick: handleDecrement, disabled: disabled || readonly || isMinReached, "aria-label": "\uAC10\uC18C", "aria-describedby": "stepper-description", children: jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntimeExports.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }) }), jsxRuntimeExports.jsx("div", { className: "designbase-stepper__value", children: jsxRuntimeExports.jsx("span", { className: "designbase-stepper__value-text", children: currentValue }) }), jsxRuntimeExports.jsx("button", { type: "button", className: incrementClasses, onClick: handleIncrement, disabled: disabled || readonly || isMaxReached, "aria-label": "\uC99D\uAC00", "aria-describedby": "stepper-description", children: jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntimeExports.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsxRuntimeExports.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }) }), jsxRuntimeExports.jsxs("div", { id: "stepper-description", className: "sr-only", children: ["\uC22B\uC790 \uC870\uC815\uAE30. \uD654\uC0B4\uD45C \uD0A4\uB098 +/- \uD0A4\uB97C \uC0AC\uC6A9\uD558\uC5EC \uAC12\uC744 \uC870\uC815\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uD604\uC7AC \uAC12: ", currentValue, ", \uCD5C\uC18C\uAC12: ", min, ", \uCD5C\uB300\uAC12: ", max, ", \uB2E8\uACC4: ", step] })] }));
 };
 
-const Table = ({ data, columns, title, showCountBadge = false, showFilter = false, filterOptions = [], onFilterChange, size = 'm', variant = 'default', selectable = false, multiSelect = false, selectedRows = [], onSelectionChange, sortable = false, sortColumn, sortDirection, onSortChange, loading = false, emptyMessage = '데이터가 없습니다.', onRowClick, rowKey = 'id', height, scrollable = false, className, ...props }) => {
+const Table = ({ data, columns, title, showCountBadge = false, showFilter = false, filterOptions = [], onFilterChange, size = 'm', variant = 'default', selectable = false, multiSelect = false, selectedRows = [], onSelectionChange, sortable = false, sortColumn, sortDirection, onSortChange, loading = false, emptyMessage = '데이터가 없습니다.', onRowClick, rowKey = 'id', height, scrollable = false, pagination = false, page, pageSize, totalItems, onPageChange, onPageSizeChange, pageSizeOptions, className, ...props }) => {
     const [internalSelectedRows, setInternalSelectedRows] = React.useState(selectedRows);
+    const [internalPage, setInternalPage] = React.useState(page || 1);
+    const [internalPageSize, setInternalPageSize] = React.useState(pageSize || 10);
+    const [internalSortColumn, setInternalSortColumn] = React.useState(sortColumn);
+    const [internalSortDirection, setInternalSortDirection] = React.useState(sortDirection ?? null);
     const getRowKey = (item, index) => {
         if (typeof rowKey === 'string') {
             return item[rowKey] || index.toString();
@@ -10643,8 +11194,27 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
     const handleSort = (column) => {
         if (!sortable || !column.sortable)
             return;
-        const newDirection = sortColumn === column.key && sortDirection === 'asc' ? 'desc' : 'asc';
-        onSortChange?.(column.key, newDirection);
+        const currentCol = effectiveSortColumn;
+        const currentDir = effectiveSortDirection;
+        let nextDir = 'asc';
+        if (currentCol === column.key) {
+            if (currentDir === 'asc')
+                nextDir = 'desc';
+            else if (currentDir === 'desc')
+                nextDir = null;
+            else
+                nextDir = 'asc';
+        }
+        else {
+            nextDir = 'asc';
+        }
+        if (onSortChange) {
+            onSortChange(column.key, nextDir);
+        }
+        else {
+            setInternalSortColumn(nextDir ? column.key : undefined);
+            setInternalSortDirection(nextDir);
+        }
     };
     const handleRowSelect = (itemRowKey, checked) => {
         let newSelectedRows;
@@ -10668,24 +11238,34 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
         setInternalSelectedRows(newSelectedRows);
         onSelectionChange?.(newSelectedRows);
     };
+    const effectiveSortColumn = sortColumn !== undefined ? sortColumn : internalSortColumn;
+    const effectiveSortDirection = sortDirection !== undefined ? sortDirection : internalSortDirection;
     const sortedData = React.useMemo(() => {
-        if (!sortColumn || !sortDirection)
+        if (!effectiveSortColumn || !effectiveSortDirection)
             return data;
-        const column = columns.find(col => col.key === sortColumn);
+        const column = columns.find(col => col.key === effectiveSortColumn);
         if (!column || !column.sortable)
             return data;
         return [...data].sort((a, b) => {
             const aValue = column.accessor ? column.accessor(a) : a[column.key];
             const bValue = column.accessor ? column.accessor(b) : b[column.key];
             if (aValue < bValue)
-                return sortDirection === 'asc' ? -1 : 1;
+                return effectiveSortDirection === 'asc' ? -1 : 1;
             if (aValue > bValue)
-                return sortDirection === 'asc' ? 1 : -1;
+                return effectiveSortDirection === 'asc' ? 1 : -1;
             return 0;
         });
-    }, [data, sortColumn, sortDirection, columns]);
+    }, [data, effectiveSortColumn, effectiveSortDirection, columns, internalSortColumn, internalSortDirection]);
     const isAllSelected = data.length > 0 && internalSelectedRows.length === data.length;
     const isIndeterminate = internalSelectedRows.length > 0 && internalSelectedRows.length < data.length;
+    // 페이지네이션 계산
+    const effectivePageSize = pageSize || internalPageSize;
+    const total = totalItems ?? sortedData.length;
+    const totalPages = Math.max(1, Math.ceil(total / effectivePageSize));
+    const currentPage = Math.min(page || internalPage, totalPages);
+    const startIndex = (currentPage - 1) * effectivePageSize;
+    const endIndex = startIndex + effectivePageSize;
+    const paginatedData = pagination ? sortedData.slice(startIndex, endIndex) : sortedData;
     const classes = clsx('designbase-table', `designbase-table--${size}`, `designbase-table--${variant}`, {
         'designbase-table--selectable': selectable,
         'designbase-table--sortable': sortable,
@@ -10698,13 +11278,13 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
     const renderSortIcon = (column) => {
         if (!sortable || !column.sortable)
             return null;
-        const isSorted = sortColumn === column.key;
-        const isAsc = isSorted && sortDirection === 'asc';
-        const isDesc = isSorted && sortDirection === 'desc';
-        return (jsxRuntimeExports.jsx("span", { className: "designbase-table__sort-icon", children: jsxRuntimeExports.jsx(icons.ChevronsUpIcon, { size: 16, className: clsx({
+        const isSorted = effectiveSortColumn === column.key;
+        const isAsc = isSorted && effectiveSortDirection === 'asc';
+        const isDesc = isSorted && effectiveSortDirection === 'desc';
+        return (jsxRuntimeExports.jsx("span", { className: "designbase-table__sort-icon", children: isSorted ? (jsxRuntimeExports.jsx(icons.VerticalArrowsIcon, { size: 14, className: clsx({
                     'designbase-table__sort-icon--asc': isAsc,
                     'designbase-table__sort-icon--desc': isDesc,
-                }) }) }));
+                }) })) : (jsxRuntimeExports.jsx(icons.CaretUpdownFilledIcon, { size: 14, className: "designbase-table__sort-icon--idle" })) }));
     };
     const renderCell = (column, item, index) => {
         const value = column.accessor ? column.accessor(item) : item[column.key];
@@ -10722,7 +11302,7 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
                                             [`designbase-table__th--${column.align || 'left'}`]: column.align,
                                             'designbase-table__th--fixed-left': column.fixed === 'left',
                                             'designbase-table__th--fixed-right': column.fixed === 'right',
-                                        }), style: { width: column.width }, onClick: () => handleSort(column), children: jsxRuntimeExports.jsxs("div", { className: "designbase-table__th-content", children: [jsxRuntimeExports.jsx("span", { className: "designbase-table__th-text", children: column.header }), renderSortIcon(column)] }) }, column.key)))] }) }), jsxRuntimeExports.jsx("tbody", { className: "designbase-table__tbody", children: sortedData.length === 0 ? (jsxRuntimeExports.jsx("tr", { className: "designbase-table__tr", children: jsxRuntimeExports.jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "designbase-table__td designbase-table__td--empty", children: jsxRuntimeExports.jsx("div", { className: "designbase-table__empty", children: jsxRuntimeExports.jsx("span", { children: emptyMessage }) }) }) })) : (sortedData.map((item, index) => {
+                                        }), style: { width: column.width }, onClick: () => handleSort(column), children: jsxRuntimeExports.jsxs("div", { className: "designbase-table__th-content", children: [jsxRuntimeExports.jsx("span", { className: "designbase-table__th-text", children: column.header }), renderSortIcon(column)] }) }, column.key)))] }) }), jsxRuntimeExports.jsx("tbody", { className: "designbase-table__tbody", children: paginatedData.length === 0 ? (jsxRuntimeExports.jsx("tr", { className: "designbase-table__tr", children: jsxRuntimeExports.jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "designbase-table__td designbase-table__td--empty", children: jsxRuntimeExports.jsx(EmptyState, { title: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description: emptyMessage, variant: "no-data", size: "m" }) }) })) : (paginatedData.map((item, index) => {
                                 const key = getRowKey(item, index);
                                 const isSelected = internalSelectedRows.includes(key);
                                 return (jsxRuntimeExports.jsxs("tr", { className: clsx('designbase-table__tr', {
@@ -10733,7 +11313,7 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
                                                 'designbase-table__td--fixed-left': column.fixed === 'left',
                                                 'designbase-table__td--fixed-right': column.fixed === 'right',
                                             }), children: renderCell(column, item, index) }, column.key)))] }, key));
-                            })) })] }) })] }));
+                            })) })] }) }), pagination && (jsxRuntimeExports.jsx("div", { className: "designbase-table__footer", children: jsxRuntimeExports.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: total, pageSize: effectivePageSize, pageSizeOptions: pageSizeOptions || [10, 20, 50], onPageChange: (p) => { setInternalPage(p); onPageChange?.(p); }, onPageSizeChange: (s) => { setInternalPage(1); setInternalPageSize(s); onPageSizeChange?.(s); onPageChange?.(1); }, showPageSizeSelector: true, showTotal: true, alignment: "right", size: size }) }))] }));
 };
 Table.displayName = 'Table';
 
@@ -10854,198 +11434,7 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
 };
 Tabs.displayName = 'Tabs';
 
-const TimePicker = ({ value, onChange, format = '24h', mode = 'dropdown', hourStep = 1, minuteStep = 15, minTime, maxTime, size = 'm', variant = 'default', disabled = false, readonly = false, placeholder = '시간을 선택하세요', displayFormat, className, }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [selectedHour, setSelectedHour] = React.useState(() => {
-        if (value) {
-            return value.getHours();
-        }
-        return 0;
-    });
-    const [selectedMinute, setSelectedMinute] = React.useState(() => {
-        if (value) {
-            return value.getMinutes();
-        }
-        return 0;
-    });
-    const [selectedPeriod, setSelectedPeriod] = React.useState(() => {
-        if (value && format === '12h') {
-            return value.getHours() >= 12 ? 'PM' : 'AM';
-        }
-        return 'AM';
-    });
-    const containerRef = React.useRef(null);
-    // 시간 유효성 검사
-    const isTimeDisabled = (hour, minute) => {
-        if (minTime) {
-            const minHour = minTime.getHours();
-            const minMinute = minTime.getMinutes();
-            if (hour < minHour || (hour === minHour && minute < minMinute)) {
-                return true;
-            }
-        }
-        if (maxTime) {
-            const maxHour = maxTime.getHours();
-            const maxMinute = maxTime.getMinutes();
-            if (hour > maxHour || (hour === maxHour && minute > maxMinute)) {
-                return true;
-            }
-        }
-        return false;
-    };
-    // 24시간을 12시간으로 변환
-    const to12Hour = (hour) => {
-        if (hour === 0)
-            return 12;
-        if (hour > 12)
-            return hour - 12;
-        return hour;
-    };
-    // 12시간을 24시간으로 변환
-    const to24Hour = (hour, period) => {
-        if (period === 'AM') {
-            return hour === 12 ? 0 : hour;
-        }
-        else {
-            return hour === 12 ? 12 : hour + 12;
-        }
-    };
-    // 시간 변경 핸들러
-    const handleTimeChange = (hour, minute, period) => {
-        if (isTimeDisabled(hour, minute))
-            return;
-        let finalHour = hour;
-        if (format === '12h' && period) {
-            finalHour = to24Hour(hour, period);
-        }
-        const newTime = new Date();
-        newTime.setHours(finalHour, minute, 0, 0);
-        setSelectedHour(hour);
-        setSelectedMinute(minute);
-        if (period) {
-            setSelectedPeriod(period);
-        }
-        onChange?.(newTime);
-        if (mode === 'dropdown') {
-            setIsOpen(false);
-        }
-    };
-    // 시간 표시 형식
-    const formatDisplayTime = () => {
-        if (!value)
-            return '';
-        if (displayFormat) {
-            return value.toLocaleTimeString('ko-KR', {
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: format === '12h',
-            });
-        }
-        const hour = format === '12h' ? to12Hour(value.getHours()) : value.getHours();
-        const minute = value.getMinutes();
-        const period = format === '12h' ? (value.getHours() >= 12 ? 'PM' : 'AM') : '';
-        return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}${period ? ` ${period}` : ''}`;
-    };
-    // 시간 옵션 생성
-    const generateHourOptions = () => {
-        const maxHour = format === '12h' ? 12 : 24;
-        const hours = [];
-        for (let i = 0; i < maxHour; i += hourStep) {
-            if (format === '12h' && i === 0)
-                continue; // 12시간 형식에서는 0시 제외
-            hours.push(i);
-        }
-        return hours;
-    };
-    // 분 옵션 생성
-    const generateMinuteOptions = () => {
-        const minutes = [];
-        for (let i = 0; i < 60; i += minuteStep) {
-            minutes.push(i);
-        }
-        return minutes;
-    };
-    // 외부 클릭 감지
-    React.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-    // 키보드 네비게이션
-    const handleKeyDown = (event) => {
-        if (disabled || readonly)
-            return;
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                setIsOpen(!isOpen);
-                break;
-            case 'Escape':
-                setIsOpen(false);
-                break;
-        }
-    };
-    const hourOptions = generateHourOptions();
-    const minuteOptions = generateMinuteOptions();
-    const classes = clsx('designbase-time-picker', `designbase-time-picker--size-${size}`, `designbase-time-picker--variant-${variant}`, `designbase-time-picker--mode-${mode}`, {
-        'designbase-time-picker--disabled': disabled,
-        'designbase-time-picker--readonly': readonly,
-        'designbase-time-picker--open': isOpen,
-    }, className);
-    if (mode === 'inline') {
-        return (jsxRuntimeExports.jsx("div", { className: classes, children: jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__inline", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__column", children: [jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__column-header", children: "\uC2DC\uAC04" }), jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__options", children: hourOptions.map((hour) => {
-                                    const displayHour = format === '12h' ? to12Hour(hour) : hour;
-                                    const isDisabled = isTimeDisabled(hour, selectedMinute);
-                                    const isSelected = selectedHour === displayHour;
-                                    return (jsxRuntimeExports.jsx("button", { className: clsx('designbase-time-picker__option', {
-                                            'designbase-time-picker__option--selected': isSelected,
-                                            'designbase-time-picker__option--disabled': isDisabled,
-                                        }), onClick: () => handleTimeChange(hour, selectedMinute, selectedPeriod), disabled: isDisabled, children: displayHour.toString().padStart(2, '0') }, hour));
-                                }) })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__column", children: [jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__column-header", children: "\uBD84" }), jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__options", children: minuteOptions.map((minute) => {
-                                    const isDisabled = isTimeDisabled(selectedHour, minute);
-                                    const isSelected = selectedMinute === minute;
-                                    return (jsxRuntimeExports.jsx("button", { className: clsx('designbase-time-picker__option', {
-                                            'designbase-time-picker__option--selected': isSelected,
-                                            'designbase-time-picker__option--disabled': isDisabled,
-                                        }), onClick: () => handleTimeChange(selectedHour, minute, selectedPeriod), disabled: isDisabled, children: minute.toString().padStart(2, '0') }, minute));
-                                }) })] }), format === '12h' && (jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__column", children: [jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__column-header", children: "\uAD6C\uBD84" }), jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__options", children: ['AM', 'PM'].map((period) => {
-                                    const isSelected = selectedPeriod === period;
-                                    return (jsxRuntimeExports.jsx("button", { className: clsx('designbase-time-picker__option', {
-                                            'designbase-time-picker__option--selected': isSelected,
-                                        }), onClick: () => handleTimeChange(selectedHour, selectedMinute, period), children: period }, period));
-                                }) })] }))] }) }));
-    }
-    return (jsxRuntimeExports.jsxs("div", { className: classes, ref: containerRef, children: [jsxRuntimeExports.jsxs("button", { className: "designbase-time-picker__trigger", onClick: () => !disabled && !readonly && setIsOpen(!isOpen), onKeyDown: handleKeyDown, disabled: disabled, type: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsxRuntimeExports.jsx("span", { className: "designbase-time-picker__display", children: value ? formatDisplayTime() : placeholder }), jsxRuntimeExports.jsx("span", { className: "designbase-time-picker__arrow", children: jsxRuntimeExports.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__dropdown", children: jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__dropdown-content", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__column", children: [jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__column-header", children: "\uC2DC\uAC04" }), jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__options", children: hourOptions.map((hour) => {
-                                        const displayHour = format === '12h' ? to12Hour(hour) : hour;
-                                        const isDisabled = isTimeDisabled(hour, selectedMinute);
-                                        const isSelected = selectedHour === displayHour;
-                                        return (jsxRuntimeExports.jsx("button", { className: clsx('designbase-time-picker__option', {
-                                                'designbase-time-picker__option--selected': isSelected,
-                                                'designbase-time-picker__option--disabled': isDisabled,
-                                            }), onClick: () => handleTimeChange(hour, selectedMinute, selectedPeriod), disabled: isDisabled, children: displayHour.toString().padStart(2, '0') }, hour));
-                                    }) })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__column", children: [jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__column-header", children: "\uBD84" }), jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__options", children: minuteOptions.map((minute) => {
-                                        const isDisabled = isTimeDisabled(selectedHour, minute);
-                                        const isSelected = selectedMinute === minute;
-                                        return (jsxRuntimeExports.jsx("button", { className: clsx('designbase-time-picker__option', {
-                                                'designbase-time-picker__option--selected': isSelected,
-                                                'designbase-time-picker__option--disabled': isDisabled,
-                                            }), onClick: () => handleTimeChange(selectedHour, minute, selectedPeriod), disabled: isDisabled, children: minute.toString().padStart(2, '0') }, minute));
-                                    }) })] }), format === '12h' && (jsxRuntimeExports.jsxs("div", { className: "designbase-time-picker__column", children: [jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__column-header", children: "\uAD6C\uBD84" }), jsxRuntimeExports.jsx("div", { className: "designbase-time-picker__options", children: ['AM', 'PM'].map((period) => {
-                                        const isSelected = selectedPeriod === period;
-                                        return (jsxRuntimeExports.jsx("button", { className: clsx('designbase-time-picker__option', {
-                                                'designbase-time-picker__option--selected': isSelected,
-                                            }), onClick: () => handleTimeChange(selectedHour, selectedMinute, period), children: period }, period));
-                                    }) })] }))] }) }))] }));
-};
+TimePicker;
 
 const Timeline = ({ items, position = 'alternate', variant = 'default', size = 'm', color = 'primary', clickable = false, fullWidth = false, disabled = false, className, style, onItemClick, }) => {
     const handleItemClick = (item, index) => {
@@ -11208,6 +11597,22 @@ Toggle.displayName = 'Toggle';
 
 const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', fullWidth = false, fixed = false, shadow = true, rounded = true, className, children, }) => {
     const [openDropdown, setOpenDropdown] = React.useState(null);
+    const mapSizeToButtonSize = (size) => {
+        switch (size) {
+            case 's': return 's';
+            case 'm': return 'm';
+            case 'l': return 'l';
+            default: return 'm';
+        }
+    };
+    const getIconComponentFromNode = (node) => {
+        if (!node)
+            return undefined;
+        if (React.isValidElement(node) && typeof node.type === 'function') {
+            return node.type;
+        }
+        return undefined;
+    };
     const handleItemClick = (item) => {
         if (item.disabled)
             return;
@@ -11227,10 +11632,14 @@ const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', ful
     const renderItem = (item) => {
         switch (item.type) {
             case 'button':
-                return (jsxRuntimeExports.jsxs("button", { className: clsx('designbase-toolbar__item', 'designbase-toolbar__item--button', {
-                        'designbase-toolbar__item--active': item.active,
-                        'designbase-toolbar__item--disabled': item.disabled,
-                    }), onClick: () => handleItemClick(item), disabled: item.disabled, title: item.tooltip, children: [item.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__item-icon", children: item.icon })), item.label && (jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__item-label", children: item.label }))] }, item.id));
+                {
+                    const isIconOnly = !item.label;
+                    const StartIconComp = getIconComponentFromNode(item.icon);
+                    return (jsxRuntimeExports.jsx(Button, { variant: "tertiary", size: mapSizeToButtonSize(size), className: clsx('designbase-toolbar__item', 'designbase-toolbar__item--button', {
+                            'designbase-toolbar__item--active': item.active,
+                            'designbase-toolbar__item--disabled': item.disabled,
+                        }), iconOnly: isIconOnly, startIcon: !isIconOnly ? StartIconComp : undefined, onPress: () => handleItemClick(item), disabled: item.disabled, "aria-label": isIconOnly ? (item.tooltip || item.label || item.id) : undefined, title: item.tooltip, children: isIconOnly && item.icon ? item.icon : item.label }, item.id));
+                }
             case 'dropdown':
                 return (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-toolbar__item', 'designbase-toolbar__item--dropdown', {
                         'designbase-toolbar__item--open': openDropdown === item.id,
@@ -11265,219 +11674,211 @@ const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', ful
     return (jsxRuntimeExports.jsx("div", { className: classes, children: jsxRuntimeExports.jsxs("div", { className: "designbase-toolbar__content", children: [Object.entries(groupedItems).map(([groupName, groupItems], groupIndex) => (jsxRuntimeExports.jsxs("div", { className: "designbase-toolbar__group", children: [groupItems.map(renderItem), groupIndex < Object.keys(groupedItems).length - 1 && (jsxRuntimeExports.jsx("div", { className: "designbase-toolbar__group-separator" }))] }, groupName))), children && (jsxRuntimeExports.jsx("div", { className: "designbase-toolbar__children", children: children }))] }) }));
 };
 
-const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 200, showArrow = true, className, ...props }) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [tooltipStyle, setTooltipStyle] = React.useState({});
+const GAP = 8; // 트리거와의 간격
+const ARW = 6; // 화살표 반쪽 길이(삼각형 변 길이)
+const PAD = 8; // 화살표가 박스 안에서 안전하게 보일 최소 여백
+const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 240, showArrow = true, className, ...props }) => {
+    const [visible, setVisible] = React.useState(false);
+    const [style, setStyle] = React.useState({});
     const [arrowStyle, setArrowStyle] = React.useState({});
-    // 🔑 DOM 래퍼(ref/이벤트가 항상 붙도록)
-    const triggerWrapperRef = React.useRef(null);
+    const [placementGroup, setPlacementGroup] = React.useState('top');
+    const triggerRef = React.useRef(null);
     const tooltipRef = React.useRef(null);
-    // 브라우저 setTimeout은 number 반환
-    const timeoutRef = React.useRef(null);
+    const timers = React.useRef({});
+    const rafId = React.useRef(null);
     const clearTimer = () => {
-        if (timeoutRef.current !== null) {
-            window.clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
+        if (timers.current.t) {
+            clearTimeout(timers.current.t);
+            timers.current.t = undefined;
         }
     };
-    // 툴팁 위치 계산
+    const groupOf = (p) => p.startsWith('top') ? 'top' :
+        p.startsWith('bottom') ? 'bottom' :
+            p.startsWith('left') ? 'left' : 'right';
+    // 위치 계산 (⚠️ 뷰포트 클램핑 후 화살표도 보정)
     const calculatePosition = React.useCallback(() => {
-        if (!triggerWrapperRef.current || !tooltipRef.current)
+        if (!triggerRef.current || !tooltipRef.current)
             return;
-        const triggerRect = triggerWrapperRef.current.getBoundingClientRect();
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
-        const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
-        const scrollY = window.pageYOffset || document.documentElement.scrollTop;
-        let top = 0;
-        let left = 0;
-        let arrowTop = 0;
-        let arrowLeft = 0;
-        const isVertical = position.startsWith('top') || position.startsWith('bottom');
-        const isHorizontal = position.startsWith('left') || position.startsWith('right');
+        const tRect = triggerRef.current.getBoundingClientRect();
+        const pRect = tooltipRef.current.getBoundingClientRect();
+        let top = 0, left = 0;
+        // 1차: 이상적(미보정) 화살표 좌표
+        let aTop = 0, aLeft = 0;
         switch (position) {
             case 'top':
-                top = triggerRect.top + scrollY - tooltipRect.height - 8;
-                left = triggerRect.left + scrollX + triggerRect.width / 2 - tooltipRect.width / 2;
-                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = pRect.height;
+                aLeft = pRect.width / 2 - ARW;
                 break;
             case 'top-start':
-                top = triggerRect.top + scrollY - tooltipRect.height - 8;
-                left = triggerRect.left + scrollX;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.left;
+                aTop = pRect.height;
+                aLeft = PAD;
                 break;
             case 'top-end':
-                top = triggerRect.top + scrollY - tooltipRect.height - 8;
-                left = triggerRect.right + scrollX - tooltipRect.width;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.top - pRect.height - GAP;
+                left = tRect.right - pRect.width;
+                aTop = pRect.height;
+                aLeft = pRect.width - PAD;
                 break;
             case 'bottom':
-                top = triggerRect.bottom + scrollY + 8;
-                left = triggerRect.left + scrollX + triggerRect.width / 2 - tooltipRect.width / 2;
-                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.bottom + GAP;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = -ARW;
+                aLeft = pRect.width / 2 - ARW;
                 break;
             case 'bottom-start':
-                top = triggerRect.bottom + scrollY + 8;
-                left = triggerRect.left + scrollX;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.bottom + GAP;
+                left = tRect.left;
+                aTop = -ARW;
+                aLeft = PAD;
                 break;
             case 'bottom-end':
-                top = triggerRect.bottom + scrollY + 8;
-                left = triggerRect.right + scrollX - tooltipRect.width;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.bottom + GAP;
+                left = tRect.right - pRect.width;
+                aTop = -ARW;
+                aLeft = pRect.width - PAD;
                 break;
             case 'left':
-                top = triggerRect.top + scrollY + triggerRect.height / 2 - tooltipRect.height / 2;
-                left = triggerRect.left + scrollX - tooltipRect.width - 8;
-                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.left - pRect.width - GAP;
+                aTop = pRect.height / 2 - ARW;
+                aLeft = pRect.width;
                 break;
             case 'left-start':
-                top = triggerRect.top + scrollY;
-                left = triggerRect.left + scrollX - tooltipRect.width - 8;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.top;
+                left = tRect.left - pRect.width - GAP;
+                aTop = PAD;
+                aLeft = pRect.width;
                 break;
             case 'left-end':
-                top = triggerRect.bottom + scrollY - tooltipRect.height;
-                left = triggerRect.left + scrollX - tooltipRect.width - 8;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.bottom - pRect.height;
+                left = tRect.left - pRect.width - GAP;
+                aTop = pRect.height - PAD;
+                aLeft = pRect.width;
                 break;
             case 'right':
-                top = triggerRect.top + scrollY + triggerRect.height / 2 - tooltipRect.height / 2;
-                left = triggerRect.right + scrollX + 8;
-                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.right + GAP;
+                aTop = pRect.height / 2 - ARW;
+                aLeft = -ARW;
                 break;
             case 'right-start':
-                top = triggerRect.top + scrollY;
-                left = triggerRect.right + scrollX + 8;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.top;
+                left = tRect.right + GAP;
+                aTop = PAD;
+                aLeft = -ARW;
                 break;
             case 'right-end':
-                top = triggerRect.bottom + scrollY - tooltipRect.height;
-                left = triggerRect.right + scrollX + 8;
-                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
-                arrowTop = 0;
-                arrowLeft = 0;
+                top = tRect.bottom - pRect.height;
+                left = tRect.right + GAP;
+                aTop = pRect.height - PAD;
+                aLeft = -ARW;
                 break;
         }
-        // 화면 경계 체크 및 조정
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // 수평 경계
-        if (left < 8) {
+        // 뷰포트 클램핑
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (left < 8)
             left = 8;
-            if (isHorizontal)
-                arrowLeft = Math.max(arrowLeft, 4);
-        }
-        else if (left + tooltipRect.width > viewportWidth - 8) {
-            left = viewportWidth - tooltipRect.width - 8;
-            if (isHorizontal)
-                arrowLeft = Math.min(arrowLeft, tooltipRect.width - 4);
-        }
-        // 수직 경계
-        if (top < 8) {
+        if (left + pRect.width > vw - 8)
+            left = vw - pRect.width - 8;
+        if (top < 8)
             top = 8;
-            if (isVertical)
-                arrowTop = Math.max(arrowTop, 4);
+        if (top + pRect.height > vh - 8)
+            top = vh - pRect.height - 8;
+        // 🔁 클램핑으로 박스 위치가 바뀌었을 수 있으니, 화살표를 박스 내부에서 다시 보정
+        const g = groupOf(position);
+        if (g === 'top' || g === 'bottom') {
+            // 트리거 중앙 X 를 툴팁 좌표계로 변환
+            const triggerCenterX = tRect.left + tRect.width / 2;
+            const localX = triggerCenterX - left - ARW; // 화살표 기준점을 고려
+            // 8px ~ (width-8px) 범위로 제한
+            aLeft = Math.min(pRect.width - PAD, Math.max(PAD, localX));
+            // aTop은 이미 위/아래에 고정(-ARW 또는 높이)
         }
-        else if (top + tooltipRect.height > viewportHeight - 8) {
-            top = viewportHeight - tooltipRect.height - 8;
-            if (isVertical)
-                arrowTop = Math.min(arrowTop, tooltipRect.height - 4);
+        else {
+            const triggerCenterY = tRect.top + tRect.height / 2;
+            const localY = triggerCenterY - top - ARW;
+            aTop = Math.min(pRect.height - PAD, Math.max(PAD, localY));
+            // aLeft는 이미 좌/우에 고정(-ARW 또는 너비)
         }
-        setTooltipStyle({
+        setStyle({
             position: 'fixed',
-            top: `${top}px`,
-            left: `${left}px`,
-            maxWidth: `${maxWidth}px`,
-            zIndex: 9999
+            top,
+            left,
+            maxWidth,
+            zIndex: 9999,
+            pointerEvents: 'none', // hover 유지
         });
-        // CSS에서 화살표 위치를 자동으로 처리하므로 인라인 스타일 제거
-        setArrowStyle({});
+        setArrowStyle({ position: 'absolute', top: aTop, left: aLeft });
+        setPlacementGroup(g);
     }, [position, maxWidth]);
-    // 툴팁 표시
-    const showTooltip = React.useCallback(() => {
-        if (disabled || alwaysShow)
+    // 초기 페인트 전에 위치 확정
+    React.useLayoutEffect(() => {
+        if (visible || alwaysShow)
+            calculatePosition();
+    }, [visible, alwaysShow, calculatePosition]);
+    // 스크롤/리사이즈/크기변화 추적 (rAF 스로틀)
+    React.useEffect(() => {
+        if (!(visible || alwaysShow))
             return;
-        clearTimer();
-        timeoutRef.current = window.setTimeout(() => {
-            setIsVisible(true);
-            requestAnimationFrame(() => {
+        const onMove = () => {
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+            rafId.current = requestAnimationFrame(() => {
                 calculatePosition();
+                rafId.current = null;
             });
-        }, delay);
-    }, [disabled, alwaysShow, delay, calculatePosition]);
-    // 툴팁 숨김
-    const hideTooltip = React.useCallback(() => {
-        if (disabled || alwaysShow)
+        };
+        window.addEventListener('scroll', onMove, { capture: true, passive: true });
+        window.addEventListener('resize', onMove, { passive: true });
+        let ro = null;
+        const ResizeObs = window.ResizeObserver;
+        if (ResizeObs) {
+            ro = new ResizeObs(() => onMove());
+            if (tooltipRef.current)
+                ro.observe(tooltipRef.current);
+            if (triggerRef.current)
+                ro.observe(triggerRef.current);
+        }
+        return () => {
+            window.removeEventListener('scroll', onMove, { capture: true });
+            window.removeEventListener('resize', onMove);
+            ro?.disconnect?.();
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+        };
+    }, [visible, alwaysShow, calculatePosition]);
+    // show/hide
+    const show = React.useCallback(() => {
+        if (disabled)
             return;
         clearTimer();
-        timeoutRef.current = window.setTimeout(() => {
-            setIsVisible(false);
-        }, hideDelay);
-    }, [disabled, alwaysShow, hideDelay]);
-    // 키보드 이스케이프
-    const handleKeyDown = React.useCallback((e) => {
-        if (e.key === 'Escape')
-            hideTooltip();
-    }, [hideTooltip]);
-    // 리사이즈/스크롤 중 위치 업데이트
-    React.useEffect(() => {
-        if (!isVisible)
+        timers.current.t = setTimeout(() => setVisible(true), Math.max(0, delay));
+    }, [disabled, delay]);
+    const hide = React.useCallback(() => {
+        if (disabled)
             return;
-        const onResize = () => calculatePosition();
-        const onScroll = () => calculatePosition();
-        window.addEventListener('resize', onResize);
-        window.addEventListener('scroll', onScroll, true);
-        return () => {
-            window.removeEventListener('resize', onResize);
-            window.removeEventListener('scroll', onScroll, true);
-        };
-    }, [isVisible, calculatePosition]);
-    // 언마운트 시 타이머 정리
+        clearTimer();
+        timers.current.t = setTimeout(() => setVisible(false), Math.max(0, hideDelay));
+    }, [disabled, hideDelay]);
     React.useEffect(() => () => clearTimer(), []);
-    // 항상표시 모드
-    React.useEffect(() => {
-        if (alwaysShow && !disabled) {
-            setIsVisible(true);
-            requestAnimationFrame(() => calculatePosition());
-        }
-        else if (!alwaysShow) {
-            setIsVisible(false);
+    React.useEffect(() => { if (!disabled && alwaysShow)
+        setVisible(true);
+    else if (!alwaysShow)
+        setVisible(false); }, [alwaysShow, disabled]);
+    const onKeyDown = React.useCallback((e) => {
+        if (e.key === 'Escape') {
+            clearTimer();
+            setVisible(false);
         }
-    }, [alwaysShow, disabled, calculatePosition]);
-    // content가 동적으로 바뀌어도 위치 갱신
-    React.useEffect(() => {
-        if (!isVisible)
-            return;
-        const ro = new ResizeObserver(() => calculatePosition());
-        if (tooltipRef.current)
-            ro.observe(tooltipRef.current);
-        return () => ro.disconnect();
-    }, [isVisible, calculatePosition, content]);
-    const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, { 'designbase-tooltip--visible': isVisible, 'designbase-tooltip--disabled': disabled }, className);
+    }, []);
+    const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, { 'designbase-tooltip--visible': visible || alwaysShow, 'designbase-tooltip--disabled': disabled }, className);
     const arrowClasses = clsx('designbase-tooltip__arrow', `designbase-tooltip__arrow--${position}`);
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { ref: triggerWrapperRef, className: "designbase-tooltip__trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, onKeyDown: handleKeyDown, tabIndex: 0, "aria-describedby": isVisible ? 'designbase-tooltip' : undefined, children: children }), isVisible && (jsxRuntimeExports.jsxs("div", { ref: tooltipRef, className: classes, style: tooltipStyle, role: "tooltip", id: "designbase-tooltip", "aria-hidden": !isVisible, ...props, children: [jsxRuntimeExports.jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { ref: triggerRef, className: "designbase-tooltip__trigger", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, onKeyDown: onKeyDown, tabIndex: 0, "aria-describedby": visible || alwaysShow ? 'db-tooltip' : undefined, children: children }), (visible || alwaysShow) && (jsxRuntimeExports.jsxs("div", { ref: tooltipRef, className: classes, style: style, role: "tooltip", id: "db-tooltip", "aria-hidden": !(visible || alwaysShow), "data-placement-group": placementGroup, ...props, children: [jsxRuntimeExports.jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
 };
 Tooltip.displayName = 'Tooltip';
 
@@ -11969,6 +12370,7 @@ exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
+exports.ColorPicker = ColorPicker$1;
 exports.Confirm = Confirm;
 exports.Container = Container;
 exports.ContextMenu = ContextMenu;
@@ -11995,6 +12397,9 @@ exports.MarkdownEditor = MarkdownEditor;
 exports.Masonry = Masonry;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
 exports.Navbar = Navbar;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
@@ -12022,7 +12427,7 @@ exports.Stepper = Stepper;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
-exports.TimePicker = TimePicker;
+exports.TimePicker = TimePicker$1;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.Toggle = Toggle;