@designbasekorea/ui 0.1.21 → 0.1.22

package/dist/index.umd.js

@@ -1455,7 +1455,7 @@
 	        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 @@
 	                '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 @@
 	});
 	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 @@
 	        '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 @@
 	});
 	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 @@
 	        '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 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 @@
 	        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 @@
 	                                                                }, 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 @@
 	    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 @@
 	        '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 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 @@
 	                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 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 @@
 	            '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 @@
 	};
 	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 @@
 	    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 @@
 	    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 @@
 	};
 	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 @@
 	            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 @@
 	                    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 @@
 	    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 @@
 	            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 @@
 	        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 @@
 	        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 @@
 	        isDateSelected,
 	        isInRange,
 	        mode,
-	        value,
 	        rangeStart,
 	        highlightWeekends,
 	        getEventsForDate,
@@ -6721,21 +7056,29 @@
 	        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 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 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 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 @@
 	        }, 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 @@
 	});
 	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 @@
 	                }
 	                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 @@
 	            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 @@
 	    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 @@
 	    }, [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 @@
 	                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 @@
 	    }, [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 @@
 	        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 @@
 	    }, [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 @@
 	    }, [
 	        enableKeyboard,
 	        isOpen,
-	        disabled,
-	        readonly,
 	        closeOnEscape,
 	        handleClose,
 	        goToPrevious,
@@ -8023,11 +8604,9 @@
 	    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 @@
 	                                            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 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 @@
 	                            }, 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 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 @@
 	};
 	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 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 @@
 	        }
 	        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 @@
 	};
 	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 @@
 	    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 @@
 	            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 @@
 	    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 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 @@
 	        },
 	        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 @@
 	        },
 	        qr: {
 	            name: 'QR 코드',
-	            icon: icons.ShareAltIcon,
+	            icon: icons.ScanQrcodeIcon,
 	            color: '#6c757d',
 	            shareUrl: '',
 	            customShare: () => handleShowQrCode(),
@@ -10296,7 +10851,7 @@
 	    // 공유 버튼 렌더링
 	    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 @@
 	            }), 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 @@
 	                                    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 @@
 	    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 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 @@
 	        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 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 @@
 	                                            [`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 @@
 	                                                '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 @@
 	};
 	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 @@
 
 	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 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 @@
 	    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.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.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.Table = Table;
 	exports.Tabs = Tabs;
 	exports.Textarea = Textarea;
-	exports.TimePicker = TimePicker;
+	exports.TimePicker = TimePicker$1;
 	exports.Timeline = Timeline;
 	exports.Toast = Toast;
 	exports.Toggle = Toggle;