motile-ui 1.3.0 → 1.4.0

package/README.md

@@ -43,6 +43,8 @@
 - 📱 **모바일 최적화** - 터치 친화적 인터랙션과 반응형 디자인
 - ♿ **접근성** - WCAG 2.1 AA 준수 컴포넌트
 - 🎯 **트리쉐이킹 지원** - 필요한 것만 import
+- 🧅 **중첩 오버레이 안전** - Sheet 위 Sheet처럼 오버레이가 겹쳐도 뒤로가기·ESC·스크롤 잠금이 한 겹씩 정확히 동작
+- ⌨️ **스크롤 시 키보드 닫기** - 모바일에서 입력에 포커스한 채 스크롤하면 소프트 키보드를 자동으로 닫음 (useAutoBlur 훅 · autoBlur prop)
 - 📖 **풍부한 문서** - Storybook을 통한 라이브 예제 제공
 
 ---
@@ -117,16 +119,23 @@ Motile UI는 CSS 변수를 통해 전역 테마를 쉽게 커스터마이징할
   /* 입력 필드 */
   --motile-ui-input: #8b5cf6; /* Input 포커스 색상 */
   --motile-ui-textarea: #ec4899; /* Textarea 포커스 색상 */
+  --motile-ui-select: #3b82f6; /* Select 포커스 색상 */
 
   /* 선택 컨트롤 */
   --motile-ui-checkbox: #f59e0b; /* Checkbox 체크 색상 */
   --motile-ui-switch: #14b8a6; /* Switch 활성화 색상 */
 
-  /* 기타 컴포넌트 */
-  --motile-ui-badge: #ef4444; /* Badge 배경 색상 */
+  /* 네비게이션 */
+  --motile-ui-tab: #3b82f6; /* Tab 활성화 색상 */
+  --motile-ui-dock: #3b82f6; /* Dock 하이라이트 색상 */
+
+  /* 오버레이 */
   --motile-ui-tooltip: #1f2937; /* Tooltip 배경 색상 */
   --motile-ui-popover: #3b82f6; /* Popover 강조 색상 */
-  --motile-ui-dock: #3b82f6; /* Dock 하이라이트 색상 */
+
+  /* 기타 컴포넌트 */
+  --motile-ui-badge: #ef4444; /* Badge 배경 색상 */
+  --motile-ui-speeddial: #3b82f6; /* SpeedDial 버튼 색상 */
 }
 ```
 
@@ -227,6 +236,8 @@ MIT © [Innopers](https://github.com/Innopers)
 - 📱 **Mobile Optimized** - Touch-friendly interactions and responsive design
 - ♿ **Accessible** - WCAG 2.1 AA compliant components
 - 🎯 **Tree-shakeable** - Import only what you need
+- 🧅 **Nesting-Safe Overlays** - Back navigation, ESC, and scroll lock peel one layer at a time when overlays stack (e.g. Sheet over Sheet)
+- ⌨️ **Dismiss Keyboard on Scroll** - On mobile, scrolling with an input focused auto-dismisses the soft keyboard (useAutoBlur hook · autoBlur prop)
 - 📖 **Well Documented** - Comprehensive docs with live examples via Storybook
 
 ---
@@ -301,16 +312,23 @@ Set global colors for specific component types:
   /* Input Fields */
   --motile-ui-input: #8b5cf6; /* Input focus color */
   --motile-ui-textarea: #ec4899; /* Textarea focus color */
+  --motile-ui-select: #3b82f6; /* Select focus color */
 
   /* Selection Controls */
   --motile-ui-checkbox: #f59e0b; /* Checkbox checked color */
   --motile-ui-switch: #14b8a6; /* Switch active color */
 
-  /* Other Components */
-  --motile-ui-badge: #ef4444; /* Badge background color */
+  /* Navigation */
+  --motile-ui-tab: #3b82f6; /* Tab active color */
+  --motile-ui-dock: #3b82f6; /* Dock highlight color */
+
+  /* Overlays */
   --motile-ui-tooltip: #1f2937; /* Tooltip background color */
   --motile-ui-popover: #3b82f6; /* Popover highlight color */
-  --motile-ui-dock: #3b82f6; /* Dock highlight color */
+
+  /* Other Components */
+  --motile-ui-badge: #ef4444; /* Badge background color */
+  --motile-ui-speeddial: #3b82f6; /* SpeedDial button color */
 }
 ```
 

package/dist/components/Accordion/Accordion.css

@@ -1 +1 @@
-.motile-accordion{overflow:hidden}.motile-accordion__header{width:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background-color .2s ease;text-align:left;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;-webkit-user-select:none;user-select:none;padding:16px 20px;color:#111827;background-color:transparent;font-size:16px;font-weight:400;-webkit-text-size-adjust:100%}.motile-accordion__header:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}@media (hover: hover) and (pointer: fine){.motile-accordion__header:not(:disabled):hover{background-color:#f9fafb}}@media (hover: none) and (pointer: coarse){.motile-accordion__header:not(:disabled):active{background-color:#f3f4f6}}.motile-accordion__title{flex:1;min-width:0;text-align:left;font-size:16px;font-weight:400;color:#111827}.motile-accordion__chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);width:20px;height:20px;color:#9ca3af}.motile-accordion--expanded .motile-accordion__chevron,.motile-accordion[data-state=open] .motile-accordion__chevron{transform:rotate(180deg)}.motile-accordion__panel{overflow:hidden;height:0;transition:height .25s cubic-bezier(.4,0,.2,1)}.motile-accordion__content{line-height:1.6;opacity:0;transform:translateY(-8px);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);padding:14px 20px 20px;color:#374151;font-size:14px}.motile-accordion--expanded .motile-accordion__content,.motile-accordion[data-state=open] .motile-accordion__content{opacity:1;transform:translateY(0)}.motile-accordion--disabled,.motile-accordion[data-disabled]{cursor:not-allowed;opacity:.6}.motile-accordion--disabled .motile-accordion__header,.motile-accordion[data-disabled] .motile-accordion__header{cursor:not-allowed}.motile-accordion--outlined{border:1.5px solid #e5e7eb;border-radius:12px}.motile-accordion--outlined.motile-accordion--expanded .motile-accordion__header,.motile-accordion--outlined[data-state=open] .motile-accordion__header{border-bottom:1px solid #e5e7eb}@media (max-width: 768px){.motile-accordion__header{padding:16px 18px;font-size:16px;-webkit-text-size-adjust:100%}.motile-accordion__content{padding:14px 18px 18px;font-size:15px;-webkit-text-size-adjust:100%}.motile-accordion__title{font-size:16px}.motile-accordion__chevron{width:20px;height:20px}}@media (prefers-reduced-motion: reduce){.motile-accordion__panel,.motile-accordion__content,.motile-accordion__chevron{transition:none!important}}
+:where(.motile-accordion){overflow:hidden}:where(.motile-accordion__header){width:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background-color .2s ease;text-align:left;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;-webkit-user-select:none;user-select:none;padding:16px 20px;color:#111827;background-color:transparent;font-size:16px;font-weight:400;-webkit-text-size-adjust:100%}:where(.motile-accordion__header:focus-visible){outline:2px solid #3b82f6;outline-offset:-2px}@media (hover: hover) and (pointer: fine){:where(.motile-accordion__header:not(:disabled):hover){background-color:#f9fafb}}@media (hover: none) and (pointer: coarse){:where(.motile-accordion__header:not(:disabled):active){background-color:#f3f4f6}}:where(.motile-accordion__title){flex:1;min-width:0;text-align:left;font-size:16px;font-weight:400;color:#111827}:where(.motile-accordion__chevron){flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);width:20px;height:20px;color:#9ca3af}:where(.motile-accordion--expanded .motile-accordion__chevron),:where(.motile-accordion[data-state=open] .motile-accordion__chevron){transform:rotate(180deg)}:where(.motile-accordion__panel){overflow:hidden;height:0;transition:height .25s cubic-bezier(.4,0,.2,1)}:where(.motile-accordion__content){line-height:1.6;opacity:0;transform:translateY(-8px);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);padding:14px 20px 20px;color:#374151;font-size:14px}:where(.motile-accordion--expanded .motile-accordion__content),:where(.motile-accordion[data-state=open] .motile-accordion__content){opacity:1;transform:translateY(0)}:where(.motile-accordion--disabled),:where(.motile-accordion[data-disabled]){cursor:not-allowed;opacity:.6}:where(.motile-accordion--disabled .motile-accordion__header),:where(.motile-accordion[data-disabled] .motile-accordion__header){cursor:not-allowed}:where(.motile-accordion--outlined){border:1.5px solid #e5e7eb;border-radius:12px}:where(.motile-accordion--outlined.motile-accordion--expanded .motile-accordion__header),:where(.motile-accordion--outlined[data-state=open] .motile-accordion__header){border-bottom:1px solid #e5e7eb}@media (max-width: 768px){:where(.motile-accordion__header){padding:16px 18px;font-size:16px;-webkit-text-size-adjust:100%}:where(.motile-accordion__content){padding:14px 18px 18px;font-size:15px;-webkit-text-size-adjust:100%}:where(.motile-accordion__title){font-size:16px}:where(.motile-accordion__chevron){width:20px;height:20px}}@media (prefers-reduced-motion: reduce){:where(.motile-accordion__panel),:where(.motile-accordion__content),:where(.motile-accordion__chevron){transition:none!important}}

package/dist/components/Badge/Badge.css

@@ -1 +1 @@
-.motile-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1.2;border-radius:9999px;white-space:nowrap;vertical-align:middle;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--large{padding:6px 16px;font-size:1rem;min-height:32px}.motile-badge--medium{padding:5px 12px;font-size:.875rem;min-height:26px}.motile-badge--small{padding:4px 8px;font-size:.75rem;min-height:24px}.motile-badge--primary{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--secondary{background:color-mix(in srgb,var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) ) 10%,transparent);color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge--secondary.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--secondary.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--secondary.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--outlined{background-color:#fff;color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge--outlined.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--outlined.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--outlined.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--dot{background-color:transparent;padding:0;gap:6px;color:inherit}.motile-badge__dot{display:inline-block;border-radius:50%;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge__text{line-height:1.2}.motile-badge--dot.motile-badge--large .motile-badge__dot{width:12px;height:12px}.motile-badge--dot.motile-badge--medium .motile-badge__dot{width:10px;height:10px}.motile-badge--dot.motile-badge--small .motile-badge__dot{width:8px;height:8px}.motile-badge--shimmer{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff;position:relative;overflow:hidden}.motile-badge--shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@media (prefers-reduced-motion: reduce){.motile-badge--shimmer:before{animation:none}}@media (max-width: 768px){.motile-badge:active{filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-badge{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}
+:where(.motile-badge){display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1.2;border-radius:9999px;white-space:nowrap;vertical-align:middle;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}:where(.motile-badge--large){padding:6px 16px;font-size:1rem;min-height:32px}:where(.motile-badge--medium){padding:5px 12px;font-size:.875rem;min-height:26px}:where(.motile-badge--small){padding:4px 8px;font-size:.75rem;min-height:24px}:where(.motile-badge--primary){background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}:where(.motile-badge--secondary){background:color-mix(in srgb,var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) ) 10%,transparent);color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}:where(.motile-badge--secondary.motile-badge--large){padding:5px 15px;min-height:30px}:where(.motile-badge--secondary.motile-badge--medium){padding:4px 11px;min-height:24px}:where(.motile-badge--secondary.motile-badge--small){padding:3px 7px;min-height:22px}:where(.motile-badge--outlined){background-color:#fff;color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}:where(.motile-badge--outlined.motile-badge--large){padding:5px 15px;min-height:30px}:where(.motile-badge--outlined.motile-badge--medium){padding:4px 11px;min-height:24px}:where(.motile-badge--outlined.motile-badge--small){padding:3px 7px;min-height:22px}:where(.motile-badge--dot){background-color:transparent;padding:0;gap:6px;color:inherit}:where(.motile-badge__dot){display:inline-block;border-radius:50%;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}:where(.motile-badge__text){line-height:1.2}:where(.motile-badge--dot.motile-badge--large .motile-badge__dot){width:12px;height:12px}:where(.motile-badge--dot.motile-badge--medium .motile-badge__dot){width:10px;height:10px}:where(.motile-badge--dot.motile-badge--small .motile-badge__dot){width:8px;height:8px}:where(.motile-badge--shimmer){background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff;position:relative;overflow:hidden}:where(.motile-badge--shimmer):before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@media (prefers-reduced-motion: reduce){:where(.motile-badge--shimmer):before{animation:none}}@media (max-width: 768px){:where(.motile-badge:active){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){:where(.motile-badge){-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}

package/dist/components/Button/Button.css

@@ -1 +1 @@
-.motile-btn{width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}.motile-btn--primary{background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--secondary{background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)));box-shadow:none}@media (hover: hover){.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6))) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--ghost{background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--large{padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}.motile-btn--medium{padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}.motile-btn--small{padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}.motile-btn--primary.motile-btn--disabled{opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--secondary.motile-btn--disabled{background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--ghost.motile-btn--disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--full-width{width:100%}.motile-btn svg{flex-shrink:0;margin-right:8px}.motile-btn svg:last-child{margin-right:0;margin-left:8px}.motile-btn svg:only-child{margin:0}@media (max-width: 1024px){.motile-btn--large{padding:0 20px;font-size:15px;height:54px;min-height:54px}}@media (max-width: 768px){.motile-btn--large{padding:0 18px;font-size:15px;height:52px;min-height:52px}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-btn__wrapper{display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}.motile-btn__content{grid-area:content;display:inline-flex;align-items:center;justify-content:center}.motile-btn__loading{grid-area:content;display:flex;align-items:center;justify-content:center}.motile-btn__dots{display:flex;gap:8px;align-items:center;height:1em}.motile-btn--large .motile-btn__dot{width:8px;height:8px}.motile-btn--medium .motile-btn__dot{width:6px;height:6px}.motile-btn--small .motile-btn__dot{width:5px;height:5px}.motile-btn__dot{border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}.motile-btn__dot:nth-child(1){animation-delay:-.32s}.motile-btn__dot:nth-child(2){animation-delay:-.16s}.motile-btn__dot:nth-child(3){animation-delay:0s}.motile-btn--primary .motile-btn__dot{background-color:#ffffffb3}.motile-btn--secondary .motile-btn__dot,.motile-btn--ghost .motile-btn__dot{background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}
+:where(.motile-btn){width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}:where(.motile-btn:active:not(.motile-btn--disabled)){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}:where(.motile-btn--primary){background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){:where(.motile-btn--primary:hover:not(.motile-btn--disabled)){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}:where(.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled)){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:where(.motile-btn--secondary){background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)));box-shadow:none}@media (hover: hover){:where(.motile-btn--secondary:hover:not(.motile-btn--disabled)){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}:where(.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled)){background:color-mix(in srgb,var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6))) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:where(.motile-btn--ghost){background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){:where(.motile-btn--ghost:hover:not(.motile-btn--disabled)){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}:where(.motile-btn--hover-on-touch.motile-btn--ghost:hover:not(.motile-btn--disabled)){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:where(.motile-btn--large){padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}:where(.motile-btn--medium){padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}:where(.motile-btn--small){padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}:where(.motile-btn--primary.motile-btn--disabled){opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}:where(.motile-btn--secondary.motile-btn--disabled){background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}:where(.motile-btn--ghost.motile-btn--disabled){background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}:where(.motile-btn--full-width){width:100%}:where(.motile-btn svg){flex-shrink:0;margin-right:8px}:where(.motile-btn svg:last-child){margin-right:0;margin-left:8px}:where(.motile-btn svg:only-child){margin:0}@media (max-width: 1024px){:where(.motile-btn--large){padding:0 20px;font-size:15px;height:54px;min-height:54px}}@media (max-width: 768px){:where(.motile-btn--large){padding:0 18px;font-size:15px;height:52px;min-height:52px}:where(.motile-btn:active:not(.motile-btn--disabled)){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){:where(.motile-btn){-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}:where(.motile-btn__wrapper){display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}:where(.motile-btn__content){grid-area:content;display:inline-flex;align-items:center;justify-content:center}:where(.motile-btn__loading){grid-area:content;display:flex;align-items:center;justify-content:center}:where(.motile-btn__dots){display:flex;gap:8px;align-items:center;height:1em}:where(.motile-btn--large .motile-btn__dot){width:8px;height:8px}:where(.motile-btn--medium .motile-btn__dot){width:6px;height:6px}:where(.motile-btn--small .motile-btn__dot){width:5px;height:5px}:where(.motile-btn__dot){border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}:where(.motile-btn__dot:nth-child(1)){animation-delay:-.32s}:where(.motile-btn__dot:nth-child(2)){animation-delay:-.16s}:where(.motile-btn__dot:nth-child(3)){animation-delay:0s}:where(.motile-btn--primary .motile-btn__dot){background-color:#ffffffb3}:where(.motile-btn--secondary .motile-btn__dot){background-color:#9ca3afb3}:where(.motile-btn--ghost .motile-btn__dot){background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}

package/dist/components/Checkbox/Checkbox.css

@@ -1 +1 @@
-.motile-checkbox-container{display:inline-flex;flex-direction:column;gap:4px}.motile-checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.motile-checkbox-container--disabled .motile-checkbox-wrapper{cursor:not-allowed;opacity:.6}.motile-checkbox{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.motile-checkbox:focus{outline:none}.motile-checkbox__mark{position:relative;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid #d1d5db;border-radius:4px;background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.motile-checkbox--rounded+.motile-checkbox__mark{border-radius:50%}.motile-checkbox--square+.motile-checkbox__mark{border-radius:0}.motile-checkbox--large+.motile-checkbox__mark{width:24px;height:24px;min-width:24px;min-height:24px}.motile-checkbox--large+.motile-checkbox__mark .motile-checkbox__check-icon{width:14px;height:14px}.motile-checkbox--medium+.motile-checkbox__mark{width:20px;height:20px;min-width:20px;min-height:20px}.motile-checkbox--medium+.motile-checkbox__mark .motile-checkbox__check-icon{width:12px;height:12px}.motile-checkbox--small+.motile-checkbox__mark{width:16px;height:16px;min-width:16px;min-height:16px}.motile-checkbox--small+.motile-checkbox__mark .motile-checkbox__check-icon{width:10px;height:10px}.motile-checkbox__check-icon{width:12px;height:12px;color:#fff;flex-shrink:0;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.motile-checkbox__check-icon path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s cubic-bezier(.65,0,.35,1) .05s}.motile-checkbox--filled+.motile-checkbox__mark{background-color:#e5e7eb;border-color:#e5e7eb}.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon{opacity:1;transform:scale(1)}.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon path{stroke-dashoffset:0}.motile-checkbox:checked+.motile-checkbox__mark{background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );animation:checkboxBounce .4s cubic-bezier(.68,-.55,.265,1.55)}.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon{opacity:1;transform:scale(1)}.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon path{stroke-dashoffset:0}.motile-checkbox--filled:checked+.motile-checkbox__mark{background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}@keyframes checkboxBounce{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox-wrapper:hover .motile-checkbox__mark{border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox:checked+.motile-checkbox__mark:hover{background-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black);border-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black)}.motile-checkbox:disabled+.motile-checkbox__mark{background-color:#f3f4f6;border-color:#d1d5db;cursor:not-allowed}.motile-checkbox:disabled:checked+.motile-checkbox__mark{background-color:#d1d5db;border-color:#d1d5db}.motile-checkbox__label{font-size:14px;color:#374151;cursor:pointer;margin:0;padding:0}.motile-checkbox-container--large .motile-checkbox__label{font-size:16px}.motile-checkbox-container--medium .motile-checkbox__label{font-size:14px}.motile-checkbox-container--small .motile-checkbox__label{font-size:12px}.motile-checkbox__label--disabled{color:#9ca3af;cursor:not-allowed}
+:where(.motile-checkbox-container){display:inline-flex;flex-direction:column;gap:4px}:where(.motile-checkbox-wrapper){display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}:where(.motile-checkbox-container--disabled .motile-checkbox-wrapper){cursor:not-allowed;opacity:.6}:where(.motile-checkbox){position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}:where(.motile-checkbox:focus){outline:none}:where(.motile-checkbox__mark){position:relative;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid #d1d5db;border-radius:4px;background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}:where(.motile-checkbox--rounded+.motile-checkbox__mark){border-radius:50%}:where(.motile-checkbox--square+.motile-checkbox__mark){border-radius:0}:where(.motile-checkbox--large+.motile-checkbox__mark){width:24px;height:24px;min-width:24px;min-height:24px}:where(.motile-checkbox--large+.motile-checkbox__mark .motile-checkbox__check-icon){width:14px;height:14px}:where(.motile-checkbox--medium+.motile-checkbox__mark){width:20px;height:20px;min-width:20px;min-height:20px}:where(.motile-checkbox--medium+.motile-checkbox__mark .motile-checkbox__check-icon){width:12px;height:12px}:where(.motile-checkbox--small+.motile-checkbox__mark){width:16px;height:16px;min-width:16px;min-height:16px}:where(.motile-checkbox--small+.motile-checkbox__mark .motile-checkbox__check-icon){width:10px;height:10px}:where(.motile-checkbox__check-icon){width:12px;height:12px;color:#fff;flex-shrink:0;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:where(.motile-checkbox__check-icon path){stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s cubic-bezier(.65,0,.35,1) .05s}:where(.motile-checkbox--filled+.motile-checkbox__mark){background-color:#e5e7eb;border-color:#e5e7eb}:where(.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon){opacity:1;transform:scale(1)}:where(.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon path){stroke-dashoffset:0}:where(.motile-checkbox:checked+.motile-checkbox__mark){background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );animation:checkboxBounce .4s cubic-bezier(.68,-.55,.265,1.55)}:where(.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon){opacity:1;transform:scale(1)}:where(.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon path){stroke-dashoffset:0}:where(.motile-checkbox--filled:checked+.motile-checkbox__mark){background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}@keyframes checkboxBounce{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}:where(.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox-wrapper:hover .motile-checkbox__mark){border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}:where(.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox:checked+.motile-checkbox__mark:hover){background-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black);border-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black)}:where(.motile-checkbox:disabled+.motile-checkbox__mark){background-color:#f3f4f6;border-color:#d1d5db;cursor:not-allowed}:where(.motile-checkbox:disabled:checked+.motile-checkbox__mark){background-color:#d1d5db;border-color:#d1d5db}:where(.motile-checkbox__label){font-size:14px;color:#374151;cursor:pointer;margin:0;padding:0}:where(.motile-checkbox-container--large .motile-checkbox__label){font-size:16px}:where(.motile-checkbox-container--medium .motile-checkbox__label){font-size:14px}:where(.motile-checkbox-container--small .motile-checkbox__label){font-size:12px}:where(.motile-checkbox__label--disabled){color:#9ca3af;cursor:not-allowed}

package/dist/components/Checkbox/Checkbox.js

@@ -12,13 +12,15 @@ const f = b(
     disabled: n,
     style: i,
     ...d
-  }, m) => {
-    const e = "motile-checkbox", $ = [
+  }, $) => {
+    const e = "motile-checkbox", m = [
       `${e}-container`,
       `${e}-container--${s}`,
       `${e}-container--${a}`,
       n && `${e}-container--disabled`,
-      r && `${e}-container--filled`
+      r && `${e}-container--filled`,
+      t
+      // CSS 변수가 자식 요소로 상속되도록 container에도 적용
     ].filter(Boolean).join(" "), h = [
       e,
       `${e}--${s}`,
@@ -29,12 +31,12 @@ const f = b(
       `${e}__label`,
       n && `${e}__label--disabled`
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ o("div", { className: $, style: l ? { "--motile-checkbox-color": l } : void 0, children: /* @__PURE__ */ k("label", { className: `${e}-wrapper`, children: [
+    return /* @__PURE__ */ o("div", { className: m, style: l ? { "--motile-checkbox-color": l } : void 0, children: /* @__PURE__ */ k("label", { className: `${e}-wrapper`, children: [
       /* @__PURE__ */ o(
         "input",
         {
           ...d,
-          ref: m,
+          ref: $,
           type: "checkbox",
           className: h,
           disabled: n,

package/dist/components/Dock/Dock.css

@@ -1 +1 @@
-.motile-dock{display:inline-flex;align-items:center;gap:12px;padding:8px 16px;background:#ffffff40;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:50px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000d,inset 0 0 0 1px #fff3;position:relative;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.motile-dock[data-position=top],.motile-dock[data-position=bottom]{flex-direction:row}.motile-dock[data-position=left],.motile-dock[data-position=right]{flex-direction:column}.motile-dock__item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;border:none;border-radius:10px;background:transparent;color:#374151;cursor:pointer;transition:background .2s ease;outline:none;will-change:transform;transform:translateZ(0)}.motile-dock[data-position=top] .motile-dock__item{transform-origin:center top}.motile-dock[data-position=bottom] .motile-dock__item{transform-origin:center bottom}.motile-dock[data-position=left] .motile-dock__item{transform-origin:left center}.motile-dock[data-position=right] .motile-dock__item{transform-origin:right center}.motile-dock__item:hover{background:#fff6}.motile-dock__item:active{background:#fff9;filter:brightness(.9)}.motile-dock__item:focus-visible{outline:2px solid rgba(100,116,139,.6);outline-offset:2px}.motile-dock__item>*{pointer-events:none}.motile-dock__separator{position:relative;flex-shrink:0}.motile-dock__separator[data-position=top],.motile-dock__separator[data-position=bottom]{width:1px;height:40px;margin:0 6px;background:linear-gradient(to bottom,#0000,#00000026 20%,#00000026 80%,#0000)}.motile-dock__separator[data-position=left],.motile-dock__separator[data-position=right]{height:1px;width:40px;margin:6px 0;background:linear-gradient(to right,#0000,#00000026 20%,#00000026 80%,#0000)}@media (prefers-color-scheme: dark){.motile-dock{background:#1e1e1eb3;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006,0 2px 8px #0003,inset 0 0 0 1px #ffffff0d}.motile-dock__item{color:#e5e7eb}.motile-dock__item:hover{background:#ffffff1a}.motile-dock__item:active{background:#fff3;filter:brightness(.9)}.motile-dock__separator[data-position=top],.motile-dock__separator[data-position=bottom]{background:linear-gradient(to bottom,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}.motile-dock__separator[data-position=left],.motile-dock__separator[data-position=right]{background:linear-gradient(to right,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}}@media (prefers-contrast: high){.motile-dock{border:2px solid currentColor;background:#fffffff2}.motile-dock__item{border:1px solid currentColor}}@media (prefers-reduced-motion: reduce){.motile-dock,.motile-dock__item{transition:none}}@media (max-width: 768px){.motile-dock{gap:6px;padding:6px 12px;border-radius:40px}.motile-dock__item{width:36px;height:36px;min-width:36px;min-height:36px}}@media (hover: none) and (pointer: coarse){.motile-dock__item{min-width:44px;min-height:44px;transform:scale(1)!important}}.motile-dock:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50px;padding:1px;background:linear-gradient(135deg,#fff6,#ffffff1a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@media (prefers-color-scheme: dark){.motile-dock:before{background:linear-gradient(135deg,#fff3,#ffffff0d)}}.motile-dock__item:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:14px;background:radial-gradient(circle at center,color-mix(in srgb,var( --motile-dock-color, var(--motile-ui-dock, var(--motile-theme, #3b82f6)) ) 30%,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}.motile-dock__item:hover:before{opacity:1}@media (prefers-contrast: high){.motile-dock__item:before{display:none}.motile-dock:before{display:none}}
+:where(.motile-dock){display:inline-flex;align-items:center;gap:12px;padding:8px 16px;background:#ffffff40;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:50px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000d,inset 0 0 0 1px #fff3;position:relative;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1)}:where(.motile-dock[data-position=top]){flex-direction:row}:where(.motile-dock[data-position=bottom]){flex-direction:row}:where(.motile-dock[data-position=left]){flex-direction:column}:where(.motile-dock[data-position=right]){flex-direction:column}:where(.motile-dock__item){position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;border:none;border-radius:10px;background:transparent;color:#374151;cursor:pointer;transition:background .2s ease;outline:none;will-change:transform;transform:translateZ(0)}:where(.motile-dock[data-position=top] .motile-dock__item){transform-origin:center top}:where(.motile-dock[data-position=bottom] .motile-dock__item){transform-origin:center bottom}:where(.motile-dock[data-position=left] .motile-dock__item){transform-origin:left center}:where(.motile-dock[data-position=right] .motile-dock__item){transform-origin:right center}:where(.motile-dock__item:hover){background:#fff6}:where(.motile-dock__item:active){background:#fff9;filter:brightness(.9)}:where(.motile-dock__item:focus-visible){outline:2px solid rgba(100,116,139,.6);outline-offset:2px}:where(.motile-dock__item>*){pointer-events:none}:where(.motile-dock__separator){position:relative;flex-shrink:0}:where(.motile-dock__separator[data-position=top]),:where(.motile-dock__separator[data-position=bottom]){width:1px;height:40px;margin:0 6px;background:linear-gradient(to bottom,#0000,#00000026 20%,#00000026 80%,#0000)}:where(.motile-dock__separator[data-position=left]),:where(.motile-dock__separator[data-position=right]){height:1px;width:40px;margin:6px 0;background:linear-gradient(to right,#0000,#00000026 20%,#00000026 80%,#0000)}@media (prefers-color-scheme: dark){:where(.motile-dock){background:#1e1e1eb3;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006,0 2px 8px #0003,inset 0 0 0 1px #ffffff0d}:where(.motile-dock__item){color:#e5e7eb}:where(.motile-dock__item:hover){background:#ffffff1a}:where(.motile-dock__item:active){background:#fff3;filter:brightness(.9)}:where(.motile-dock__separator[data-position=top]),:where(.motile-dock__separator[data-position=bottom]){background:linear-gradient(to bottom,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}:where(.motile-dock__separator[data-position=left]),:where(.motile-dock__separator[data-position=right]){background:linear-gradient(to right,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}}@media (prefers-contrast: high){:where(.motile-dock){border:2px solid currentColor;background:#fffffff2}:where(.motile-dock__item){border:1px solid currentColor}}@media (prefers-reduced-motion: reduce){:where(.motile-dock),:where(.motile-dock__item){transition:none}}@media (max-width: 768px){:where(.motile-dock){gap:6px;padding:6px 12px;border-radius:40px}:where(.motile-dock__item){width:36px;height:36px;min-width:36px;min-height:36px}}@media (hover: none) and (pointer: coarse){:where(.motile-dock__item){min-width:44px;min-height:44px;transform:scale(1)!important}}:where(.motile-dock):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50px;padding:1px;background:linear-gradient(135deg,#fff6,#ffffff1a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@media (prefers-color-scheme: dark){:where(.motile-dock):before{background:linear-gradient(135deg,#fff3,#ffffff0d)}}:where(.motile-dock__item):before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:14px;background:radial-gradient(circle at center,color-mix(in srgb,var( --motile-dock-color, var(--motile-ui-dock, var(--motile-theme, #3b82f6)) ) 30%,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}:where(.motile-dock__item:hover):before{opacity:1}@media (prefers-contrast: high){:where(.motile-dock__item):before{display:none}:where(.motile-dock):before{display:none}}

package/dist/components/Drawer/Drawer.css

@@ -1 +1 @@
-.motile-drawer__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000;transition:background-color .3s ease;overscroll-behavior:contain;touch-action:pan-y}.motile-drawer__overlay--visible{background-color:#0006}.motile-drawer__content{position:fixed;bottom:0;left:0;right:0;margin:0 auto;transform:translateY(100%);width:100%;max-width:var(--drawer-max-width, var(--drawer-width, 480px));height:auto;max-height:var(--drawer-max-height, 70dvh);background-color:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px #00000026;display:flex;flex-direction:column;transition:transform .3s ease;will-change:transform;overscroll-behavior:contain;box-sizing:border-box}.motile-drawer__content--visible{transform:translateY(0)}@media (max-width: 768px){.motile-drawer__overlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%}.motile-drawer__content{left:0;right:0;margin:0;width:100%;max-width:none;border-radius:20px 20px 0 0}}.motile-drawer__header{height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:grab;user-select:none;-webkit-user-select:none}.motile-drawer__header:active{cursor:grabbing}.motile-drawer__handle{width:40px;height:6px;background-color:#d1d5db;border-radius:3px;transition:background-color .2s ease}.motile-drawer__header:hover .motile-drawer__handle{background-color:#9ca3af}.motile-drawer__header:active .motile-drawer__handle{background-color:#6b7280}.motile-drawer__title-wrapper{padding:0 24px 16px;flex-shrink:0;border-bottom:1px solid #e5e7eb;width:100%;box-sizing:border-box}.motile-drawer__title{margin:0;font-size:16px;font-weight:600;color:#111827;line-height:1.4}@media (max-width: 768px){.motile-drawer__title{font-size:15px}}.motile-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;box-sizing:border-box}.motile-drawer__body::-webkit-scrollbar{width:6px}.motile-drawer__body::-webkit-scrollbar-track{background:transparent}.motile-drawer__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-drawer__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}@media (prefers-color-scheme: dark){.motile-drawer__content{background-color:#1f2937;box-shadow:0 -8px 30px #00000080}.motile-drawer__title{color:#f9fafb}.motile-drawer__title-wrapper{border-bottom-color:#374151}.motile-drawer__handle{background-color:#4b5563}.motile-drawer__header:hover .motile-drawer__handle{background-color:#6b7280}.motile-drawer__header:active .motile-drawer__handle{background-color:#9ca3af}.motile-drawer__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-drawer__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}}@media (prefers-reduced-motion: reduce){.motile-drawer__content,.motile-drawer__overlay{transition:none}}@media (hover: none) and (pointer: coarse){.motile-drawer__header{height:56px}.motile-drawer__handle{width:48px;height:7px}}
+:where(.motile-drawer__overlay){position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000;transition:background-color .3s ease;overscroll-behavior:contain;touch-action:pan-y}:where(.motile-drawer__overlay--visible){background-color:#0006}:where(.motile-drawer__content){position:fixed;bottom:0;left:0;right:0;margin:0 auto;transform:translateY(100%);width:100%;max-width:var(--drawer-max-width, var(--drawer-width, 480px));height:auto;max-height:var(--drawer-max-height, 70dvh);background-color:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px #00000026;display:flex;flex-direction:column;transition:transform .3s ease;will-change:transform;overscroll-behavior:contain;box-sizing:border-box}:where(.motile-drawer__content--visible){transform:translateY(0)}@media (max-width: 768px){:where(.motile-drawer__overlay){top:0;left:0;right:0;bottom:0;width:100%;height:100%}:where(.motile-drawer__content){left:0;right:0;margin:0;width:100%;max-width:none;border-radius:20px 20px 0 0}}:where(.motile-drawer__header){height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:grab;user-select:none;-webkit-user-select:none}:where(.motile-drawer__header:active){cursor:grabbing}:where(.motile-drawer__handle){width:40px;height:6px;background-color:#d1d5db;border-radius:3px;transition:background-color .2s ease}:where(.motile-drawer__header:hover .motile-drawer__handle){background-color:#9ca3af}:where(.motile-drawer__header:active .motile-drawer__handle){background-color:#6b7280}:where(.motile-drawer__title-wrapper){padding:0 24px 16px;flex-shrink:0;border-bottom:1px solid #e5e7eb;width:100%;box-sizing:border-box}:where(.motile-drawer__title){margin:0;font-size:16px;font-weight:600;color:#111827;line-height:1.4}@media (max-width: 768px){:where(.motile-drawer__title){font-size:15px}}:where(.motile-drawer__body){flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;box-sizing:border-box}:where(.motile-drawer__body::-webkit-scrollbar){width:6px}:where(.motile-drawer__body::-webkit-scrollbar-track){background:transparent}:where(.motile-drawer__body::-webkit-scrollbar-thumb){background-color:#0003;border-radius:3px}:where(.motile-drawer__body::-webkit-scrollbar-thumb:hover){background-color:#0000004d}@media (prefers-color-scheme: dark){:where(.motile-drawer__content){background-color:#1f2937;box-shadow:0 -8px 30px #00000080}:where(.motile-drawer__title){color:#f9fafb}:where(.motile-drawer__title-wrapper){border-bottom-color:#374151}:where(.motile-drawer__handle){background-color:#4b5563}:where(.motile-drawer__header:hover .motile-drawer__handle){background-color:#6b7280}:where(.motile-drawer__header:active .motile-drawer__handle){background-color:#9ca3af}:where(.motile-drawer__body::-webkit-scrollbar-thumb){background-color:#fff3}:where(.motile-drawer__body::-webkit-scrollbar-thumb:hover){background-color:#ffffff4d}}@media (prefers-reduced-motion: reduce){:where(.motile-drawer__content),:where(.motile-drawer__overlay){transition:none}}@media (hover: none) and (pointer: coarse){:where(.motile-drawer__header){height:56px}:where(.motile-drawer__handle){width:48px;height:7px}}

package/dist/components/Drawer/Drawer.js

@@ -60,7 +60,9 @@ const $ = G(null), f = () => {
     enabled: D && S.clickOutside
   }), Z({
     handler: p,
-    enabled: D && S.escapeKey
+    enabled: D && S.escapeKey,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
   });
   const j = {
     open: x,

package/dist/components/Input/Input.css

@@ -1 +1 @@
-.motile-input-root{display:block;width:100%}.motile-input{width:100%;border:1px solid #e5e8eb;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:400;color:#111827;background:#fff;outline:none;transition:none;min-height:48px;line-height:1.4;box-sizing:border-box}.motile-input:hover:not(:disabled):not(:focus):not(.motile-input--error){border-color:#c9cdd2}.motile-input--outlined{border:2px solid #e5e8eb}.motile-input--outlined:focus{border:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input--outlined:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#e5e7eb}.motile-input--underline:disabled{background:transparent;color:#9ca3af;cursor:not-allowed;border-bottom-color:#e5e7eb;opacity:.5}.motile-input--outlined.motile-input--error{border:2px solid #ef4444;background:#fef5f5}.motile-input--outlined.motile-input--error:focus{border:2px solid #ef4444;background:#fef5f5}.motile-input-wrapper--shake{animation:motile-input-shake .5s ease-in-out}@keyframes motile-input-shake{0%{transform:translate(0)}15%{transform:translate(-10px)}30%{transform:translate(8px)}45%{transform:translate(-6px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.motile-input::placeholder{color:#9ca3af;opacity:1}.motile-input-wrapper{position:relative;width:100%}.motile-input--underline{border:none;border-bottom:2px solid #e5e8eb;border-radius:0;background:transparent;padding:18px 4px 4px;height:48px;line-height:1.5;transition:border-color .2s ease}.motile-input--underline:hover:not(:disabled):not(:focus):not(.motile-input--error){border-bottom-color:#9ca3af}.motile-input--underline:focus{border:none;border-bottom:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--underline.motile-input--error{border-bottom-color:#ef4444}.motile-input--underline.motile-input--error:focus{border-bottom:2px solid #ef4444;padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--underline.motile-input--with-left-icon{padding-left:32px}.motile-input--underline.motile-input--with-left-icon:focus{padding-left:32px}.motile-input--with-right-content{padding-right:40px}.motile-input--outlined.motile-input--with-right-content:focus{padding-right:40px}.motile-input--underline.motile-input--with-right-content{padding-right:32px}.motile-input--underline.motile-input--with-right-content:focus{padding-right:32px}.motile-input__left-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon{left:4px;top:calc(50% + 7px)}.motile-input__left-icon svg{width:100%;height:100%}.motile-input__right-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon{right:4px;top:calc(50% + 7px)}.motile-input__right-icon svg{width:100%;height:100%}.motile-input__clear-button{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;color:#9ca3af;cursor:pointer;border-radius:4px;transition:background-color .2s ease,color .2s ease}.motile-input-wrapper:has(.motile-input--underline) .motile-input__clear-button{right:4px;top:calc(50% + 7px)}.motile-input__clear-button:hover{background:#f3f4f6;color:#6b7280}.motile-input__clear-icon{width:16px;height:16px}@media (max-width: 768px){.motile-input{font-size:16px;padding:12px;min-height:44px}.motile-input--outlined{border:2px solid #e5e8eb}.motile-input--outlined:focus{border:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input--underline{padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--underline:focus{border-bottom:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline) .motile-input__clear-button{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--underline.motile-input--with-left-icon{padding-left:32px}.motile-input--underline.motile-input--with-left-icon:focus{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus{padding-left:32px}.motile-input--with-right-content{padding-right:36px}.motile-input--outlined.motile-input--with-right-content:focus{padding-right:36px}.motile-input--underline.motile-input--with-right-content{padding-right:32px}.motile-input--underline.motile-input--with-right-content:focus{padding-right:32px}}@supports (-webkit-touch-callout: none){.motile-input{-webkit-tap-highlight-color:transparent}}.motile-input__helper-text{display:flex;align-items:flex-start;margin-top:4px;min-height:16px;gap:8px}.motile-input__helper-text--both{justify-content:space-between}.motile-input__helper-text--error-only{justify-content:flex-start}.motile-input__helper-text--counter-only{justify-content:flex-end}.motile-input__error-message{font-size:12px;color:#ef4444;line-height:16px;flex:1}.motile-input__counter{font-size:12px;color:#9ca3af;line-height:16px;white-space:nowrap;flex-shrink:0}.motile-input__label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;color:#9ca3af;pointer-events:none;transition:all .2s ease;background:transparent;padding:0;z-index:1}.motile-input--with-label::placeholder{opacity:0}.motile-input--with-label:focus::placeholder{opacity:1}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label{top:0;transform:translateY(-50%);font-size:12px;background:#fff;padding:0 4px}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input--underline) .motile-input__label{left:4px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label{top:14px;transform:translateY(-100%);font-size:12px}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input:focus) .motile-input__label--error,.motile-input-wrapper:has(.motile-input:not(:placeholder-shown)) .motile-input__label--error{color:#ef4444}.motile-input--outlined.motile-input--with-label{padding-top:12px;padding-bottom:12px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon{padding-left:40px}.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon:focus{padding-left:40px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus{padding-left:32px}.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label{left:44px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label{left:32px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:40px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:4px;top:14px;transform:translateY(-100%)}@media (max-width: 768px){.motile-input__label{font-size:16px;left:12px}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label{font-size:12px}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input--underline) .motile-input__label{left:4px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label{font-size:12px;top:14px;transform:translateY(-100%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error),.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label{left:40px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label{left:32px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:36px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:4px;top:14px;transform:translateY(-100%)}}
+:where(.motile-input-root){display:block;width:100%}:where(.motile-input){width:100%;border:1px solid #e5e8eb;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:400;color:#111827;background:#fff;outline:none;transition:none;min-height:48px;line-height:1.4;box-sizing:border-box}:where(.motile-input:hover:not(:disabled):not(:focus):not(.motile-input--error)){border-color:#c9cdd2}:where(.motile-input--outlined){border:2px solid #e5e8eb}:where(.motile-input--outlined:focus){border:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}:where(.motile-input--outlined:disabled){background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#e5e7eb}:where(.motile-input--underline:disabled){background:transparent;color:#9ca3af;cursor:not-allowed;border-bottom-color:#e5e7eb;opacity:.5}:where(.motile-input--outlined.motile-input--error){border:2px solid #ef4444;background:#fef5f5}:where(.motile-input--outlined.motile-input--error:focus){border:2px solid #ef4444;background:#fef5f5}:where(.motile-input-wrapper--shake){animation:motile-input-shake .5s ease-in-out}@keyframes motile-input-shake{0%{transform:translate(0)}15%{transform:translate(-10px)}30%{transform:translate(8px)}45%{transform:translate(-6px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}to{transform:translate(0)}}:where(.motile-input)::placeholder{color:#9ca3af;opacity:1}:where(.motile-input-wrapper){position:relative;width:100%}:where(.motile-input--underline){border:none;border-bottom:2px solid #e5e8eb;border-radius:0;background:transparent;padding:18px 4px 4px;height:48px;line-height:1.5;transition:border-color .2s ease}:where(.motile-input--underline:hover:not(:disabled):not(:focus):not(.motile-input--error)){border-bottom-color:#9ca3af}:where(.motile-input--underline:focus){border:none;border-bottom:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );padding:18px 4px 4px;height:48px;line-height:1.5}:where(.motile-input--underline.motile-input--error){border-bottom-color:#ef4444}:where(.motile-input--underline.motile-input--error:focus){border-bottom:2px solid #ef4444;padding:18px 4px 4px;height:48px;line-height:1.5}:where(.motile-input--with-left-icon){padding-left:40px}:where(.motile-input--outlined.motile-input--with-left-icon:focus){padding-left:40px}:where(.motile-input--underline.motile-input--with-left-icon){padding-left:32px}:where(.motile-input--underline.motile-input--with-left-icon:focus){padding-left:32px}:where(.motile-input--with-right-content){padding-right:40px}:where(.motile-input--outlined.motile-input--with-right-content:focus){padding-right:40px}:where(.motile-input--underline.motile-input--with-right-content){padding-right:32px}:where(.motile-input--underline.motile-input--with-right-content:focus){padding-right:32px}:where(.motile-input__left-icon){position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon){left:4px;top:calc(50% + 7px)}:where(.motile-input__left-icon svg){width:100%;height:100%}:where(.motile-input__right-icon){position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon){right:4px;top:calc(50% + 7px)}:where(.motile-input__right-icon svg){width:100%;height:100%}:where(.motile-input__clear-button){position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;color:#9ca3af;cursor:pointer;border-radius:4px;transition:background-color .2s ease,color .2s ease}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__clear-button){right:4px;top:calc(50% + 7px)}:where(.motile-input__clear-button:hover){background:#f3f4f6;color:#6b7280}:where(.motile-input__clear-icon){width:16px;height:16px}@media (max-width: 768px){:where(.motile-input){font-size:16px;padding:12px;min-height:44px}:where(.motile-input--outlined){border:2px solid #e5e8eb}:where(.motile-input--outlined:focus){border:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}:where(.motile-input--underline){padding:18px 4px 4px;height:48px;line-height:1.5}:where(.motile-input--underline:focus){border-bottom:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );padding:18px 4px 4px;height:48px;line-height:1.5}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon){top:calc(50% + 7px);transform:translateY(-50%)}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon){top:calc(50% + 7px);transform:translateY(-50%)}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__clear-button){top:calc(50% + 7px);transform:translateY(-50%)}:where(.motile-input--with-left-icon){padding-left:40px}:where(.motile-input--outlined.motile-input--with-left-icon:focus){padding-left:40px}:where(.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon){padding-left:40px}:where(.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon:focus){padding-left:40px}:where(.motile-input--underline.motile-input--with-left-icon){padding-left:32px}:where(.motile-input--underline.motile-input--with-left-icon:focus){padding-left:32px}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon){padding-left:32px}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus){padding-left:32px}:where(.motile-input--with-right-content){padding-right:36px}:where(.motile-input--outlined.motile-input--with-right-content:focus){padding-right:36px}:where(.motile-input--underline.motile-input--with-right-content){padding-right:32px}:where(.motile-input--underline.motile-input--with-right-content:focus){padding-right:32px}}@supports (-webkit-touch-callout: none){:where(.motile-input){-webkit-tap-highlight-color:transparent}}:where(.motile-input__helper-text){display:flex;align-items:flex-start;margin-top:4px;min-height:16px;gap:8px}:where(.motile-input__helper-text--both){justify-content:space-between}:where(.motile-input__helper-text--error-only){justify-content:flex-start}:where(.motile-input__helper-text--counter-only){justify-content:flex-end}:where(.motile-input__error-message){font-size:12px;color:#ef4444;line-height:16px;flex:1}:where(.motile-input__counter){font-size:12px;color:#9ca3af;line-height:16px;white-space:nowrap;flex-shrink:0}:where(.motile-input__label){position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;color:#9ca3af;pointer-events:none;transition:all .2s ease;background:transparent;padding:0;z-index:1}:where(.motile-input--with-label)::placeholder{opacity:0}:where(.motile-input--with-label:focus)::placeholder{opacity:1}:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label){top:0;transform:translateY(-50%);font-size:12px;background:#fff;padding:0 4px}:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error)),:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error)){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__label){left:4px;top:calc(50% + 7px);transform:translateY(-50%)}:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label){top:14px;transform:translateY(-100%);font-size:12px}:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error)),:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error)){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}:where(.motile-input-wrapper:has(.motile-input:focus) .motile-input__label--error),:where(.motile-input-wrapper:has(.motile-input:not(:placeholder-shown)) .motile-input__label--error){color:#ef4444}:where(.motile-input--outlined.motile-input--with-label){padding-top:12px;padding-bottom:12px}:where(.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon){padding-left:40px}:where(.motile-input--outlined.motile-input--with-label.motile-input--with-left-icon:focus){padding-left:40px}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon){padding-left:32px}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus){padding-left:32px}:where(.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label){left:44px}:where(.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label){left:32px;top:calc(50% + 7px);transform:translateY(-50%)}:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label){left:40px}:where(.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label){left:4px;top:14px;transform:translateY(-100%)}@media (max-width: 768px){:where(.motile-input__label){font-size:16px;left:12px}:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label){font-size:12px}:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error)),:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error)){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}:where(.motile-input-wrapper:has(.motile-input--underline) .motile-input__label){left:4px;top:calc(50% + 7px);transform:translateY(-50%)}:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label){font-size:12px;top:14px;transform:translateY(-100%)}:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label:not(.motile-input__label--error)),:where(.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label:not(.motile-input__label--error)){color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}:where(.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label){left:40px}:where(.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label){left:32px;top:calc(50% + 7px);transform:translateY(-50%)}:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label){left:36px}:where(.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label),:where(.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label){left:4px;top:14px;transform:translateY(-100%)}}

package/dist/components/Input/Input.d.ts

@@ -56,6 +56,12 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
      * Floating label (focus 전에는 placeholder 위치, focus/값 있을 때 위로 이동)
      */
     label?: string;
+    /**
+     * 모바일에서 이 입력에 포커스된 채 스크롤하면 포커스를 해제해 소프트 키보드를
+     * 닫습니다 (useAutoBlur 내장). 데스크톱(비터치)에는 영향이 없습니다.
+     * @default false
+     */
+    autoBlur?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Input/Input.js

@@ -1,78 +1,82 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { forwardRef as D, useId as F, useRef as G, useEffect as H } from "react";
+import { forwardRef as H, useId as J, useRef as v, useEffect as K } from "react";
+import { useAutoBlur as O } from "../../hooks/useAutoBlur.js";
 import './Input.css';/* empty css          */
-const J = D(
+const P = H(
   ({
-    id: N,
+    id: y,
     autoFocus: $ = !1,
-    autoSelect: _ = !1,
-    variant: v = "outlined",
-    isError: y,
+    autoSelect: f = !1,
+    variant: B = "outlined",
+    isError: C,
     errorMessage: r,
     onClear: m,
     leftIcon: d,
     rightIcon: p,
-    className: C,
-    value: o,
-    color: f,
-    style: B,
-    maxLength: h,
+    className: R,
+    value: l,
+    color: _,
+    style: j,
+    maxLength: u,
     label: i,
+    autoBlur: x = !1,
     placeholder: b,
     ...w
-  }, j) => {
-    const x = F().replace(/:/g, ""), n = N ?? `motile-input-${x}`, R = G(null), l = j || R, s = y ?? !!r;
-    H(() => {
-      if ($ && l.current) {
-        const A = setTimeout(() => {
-          l.current && (l.current.focus(), _ && l.current.select());
+  }, L) => {
+    const k = J().replace(/:/g, ""), n = y ?? `motile-input-${k}`, E = v(null), o = L || E, N = v(null);
+    O({ containerRef: N, enabled: x });
+    const s = C ?? !!r;
+    K(() => {
+      if ($ && o.current) {
+        const G = setTimeout(() => {
+          o.current && (o.current.focus(), f && o.current.select());
         }, 50);
-        return () => clearTimeout(A);
+        return () => clearTimeout(G);
       }
-    }, [$, _]);
-    const e = "motile-input", u = m && o, L = !!d, k = u || p, E = [
+    }, [$, f]);
+    const e = "motile-input", h = m && l, S = !!d, T = h || p, z = [
       e,
-      `${e}--${v}`,
+      `${e}--${B}`,
       s && `${e}--error`,
-      L && `${e}--with-left-icon`,
-      k && `${e}--with-right-content`,
+      S && `${e}--with-left-icon`,
+      T && `${e}--with-right-content`,
       i && `${e}--with-label`,
-      C
-    ].filter(Boolean).join(" "), S = [
+      R
+    ].filter(Boolean).join(" "), A = [
       `${e}-wrapper`,
       i && `${e}-wrapper--with-label`,
       s && `${e}-wrapper--shake`
-    ].filter(Boolean).join(" "), T = [
+    ].filter(Boolean).join(" "), I = [
       `${e}__label`,
       s && `${e}__label--error`
-    ].filter(Boolean).join(" "), z = f ? { "--motile-input-color": f } : void 0, I = {
-      ...B
-    }, g = o ? String(o).length : 0, c = h !== void 0, q = [
+    ].filter(Boolean).join(" "), g = _ ? { "--motile-input-color": _ } : void 0, q = {
+      ...j
+    }, D = l ? String(l).length : 0, c = u !== void 0, F = [
       w["aria-describedby"],
       r ? `${n}-error` : void 0,
       c ? `${n}-counter` : void 0
     ].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ a("div", { className: `${e}-root`, children: [
-      /* @__PURE__ */ a("div", { className: S, style: z, children: [
-        i && /* @__PURE__ */ t("label", { className: T, htmlFor: n, children: i }),
+    return /* @__PURE__ */ a("div", { className: `${e}-root`, ref: N, children: [
+      /* @__PURE__ */ a("div", { className: A, style: g, children: [
+        i && /* @__PURE__ */ t("label", { className: I, htmlFor: n, children: i }),
         d && /* @__PURE__ */ t("div", { className: `${e}__left-icon`, children: d }),
         /* @__PURE__ */ t(
           "input",
           {
             id: n,
             ...w,
-            "aria-describedby": q,
+            "aria-describedby": F,
             "aria-invalid": s || void 0,
-            ref: l,
-            className: E,
-            value: o,
-            maxLength: h,
-            style: I,
+            ref: o,
+            className: z,
+            value: l,
+            maxLength: u,
+            style: q,
             placeholder: i ? b || " " : b
           }
         ),
-        p && !u && /* @__PURE__ */ t("div", { className: `${e}__right-icon`, children: p }),
-        u && /* @__PURE__ */ t(
+        p && !h && /* @__PURE__ */ t("div", { className: `${e}__right-icon`, children: p }),
+        h && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -106,9 +110,9 @@ const J = D(
               }
             ),
             c && /* @__PURE__ */ a("span", { id: `${n}-counter`, className: `${e}__counter`, children: [
-              g,
+              D,
               "/",
-              h
+              u
             ] })
           ]
         }
@@ -116,7 +120,7 @@ const J = D(
     ] });
   }
 );
-J.displayName = "Input";
+P.displayName = "Input";
 export {
-  J as Input
+  P as Input
 };

package/dist/components/Modal/Modal.css

@@ -1 +1 @@
-.motile-modal__backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:0 16px;box-sizing:border-box;overscroll-behavior:contain}.motile-modal__backdrop[data-variant=scale]{animation:motile-modal-fade-in .2s ease-out}.motile-modal__backdrop[data-variant=slideDown],.motile-modal__backdrop[data-variant=slideUp]{animation:motile-modal-fade-in .3s ease-out}.motile-modal__backdrop[data-variant=bottomSheet]{animation:motile-modal-fade-in .3s ease-out;align-items:flex-end;padding:0}@media (min-width: 769px){.motile-modal__backdrop{padding:0 24px}}.motile-modal{position:relative;z-index:1001;width:var(--modal-width);max-width:var(--modal-max-width, 100%)}.motile-modal[data-variant=scale]{animation:motile-modal-scale-in .25s ease-out}.motile-modal[data-variant=slideDown]{animation:motile-modal-slide-down .55s cubic-bezier(.34,1.3,.64,1)}.motile-modal[data-variant=slideUp]{animation:motile-modal-slide-up .5s cubic-bezier(.34,1.3,.64,1)}.motile-modal[data-variant=bottomSheet]{animation:motile-modal-bottom-sheet .35s cubic-bezier(.32,.72,0,1);width:var(--modal-width, 100%);max-width:var(--modal-max-width, 100%)}@media (min-width: 769px){.motile-modal[data-variant=bottomSheet]{width:var(--modal-width, 100%);max-width:var(--modal-max-width, var(--modal-width, 480px))}}@media (max-width: 768px){.motile-modal[data-variant=bottomSheet]{width:100%;max-width:none}}.motile-modal__content{background-color:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(90dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.motile-modal[data-variant=bottomSheet] .motile-modal__content{border-radius:20px 20px 0 0;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top));max-height:calc(90dvh - env(safe-area-inset-top));box-shadow:0 -10px 25px -5px #0000001a,0 -4px 10px -5px #0000000a}.motile-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e5e7eb;flex-shrink:0}.motile-modal__title{font-size:1rem;font-weight:600;color:#111827;margin:0;line-height:1.4}.motile-modal__close{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;border-radius:8px;color:#6b7280;transition:all .15s ease}.motile-modal__close:hover{background-color:#f3f4f6;color:#111827}.motile-modal__close:active{transform:scale(.95)}.motile-modal__close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.motile-modal__body{padding:24px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;color:#374151;line-height:1.6;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.motile-modal__body::-webkit-scrollbar{width:6px}.motile-modal__body::-webkit-scrollbar-track{background:transparent}.motile-modal__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-modal__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.motile-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;border-top:1px solid #e5e7eb;flex-shrink:0}@keyframes motile-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes motile-modal-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes motile-modal-slide-down{0%{opacity:0;transform:translateY(-100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-slide-up{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-bottom-sheet{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.motile-modal__backdrop[data-variant=scale],.motile-modal__backdrop[data-variant=slideDown],.motile-modal__backdrop[data-variant=slideUp],.motile-modal__backdrop[data-variant=bottomSheet]{animation:none}.motile-modal[data-variant=scale],.motile-modal[data-variant=slideDown],.motile-modal[data-variant=slideUp],.motile-modal[data-variant=bottomSheet]{animation:none;opacity:1;transform:none}.motile-modal__close:active{transform:none}}@media (prefers-contrast: high){.motile-modal__content{border:2px solid #000000}.motile-modal__header{border-bottom-width:2px}.motile-modal__footer{border-top-width:2px}.motile-modal__title{font-weight:700}}@media (max-width: 768px){.motile-modal__content{border-radius:16px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:20px}.motile-modal__title{font-size:1.125rem}.motile-modal__close:active{background-color:#e5e7eb}}@media (max-width: 390px){.motile-modal__backdrop{padding:0 12px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:16px}.motile-modal__title{font-size:1rem}}@media (hover: none) and (pointer: coarse){.motile-modal__close{min-width:44px;min-height:44px;padding:10px}}@supports (-webkit-touch-callout: none){.motile-modal__close{-webkit-tap-highlight-color:transparent}.motile-modal__content{margin-bottom:env(safe-area-inset-bottom)}}@media (max-height: 600px) and (orientation: landscape){.motile-modal__content{max-height:85vh;max-height:85dvh;border-radius:8px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:16px 24px}.motile-modal__title{font-size:1rem}}@media (prefers-color-scheme: dark){.motile-modal__backdrop{background-color:#000000bf}.motile-modal__content{background-color:#1f2937;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0000004d}.motile-modal__header{border-bottom-color:#374151}.motile-modal__title{color:#f9fafb}.motile-modal__close{color:#9ca3af}.motile-modal__close:hover{background-color:#374151;color:#f9fafb}.motile-modal__body{color:#e5e7eb}.motile-modal__footer{border-top-color:#374151}.motile-modal__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-modal__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}}
+:where(.motile-modal__backdrop){position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:0 16px;box-sizing:border-box;overscroll-behavior:contain}:where(.motile-modal__backdrop[data-variant=scale]){animation:motile-modal-fade-in .2s ease-out}:where(.motile-modal__backdrop[data-variant=slideDown]),:where(.motile-modal__backdrop[data-variant=slideUp]){animation:motile-modal-fade-in .3s ease-out}:where(.motile-modal__backdrop[data-variant=bottomSheet]){animation:motile-modal-fade-in .3s ease-out;align-items:flex-end;padding:0}@media (min-width: 769px){:where(.motile-modal__backdrop){padding:0 24px}}:where(.motile-modal){position:relative;z-index:1001;width:var(--modal-width);max-width:var(--modal-max-width, 100%)}:where(.motile-modal[data-variant=scale]){animation:motile-modal-scale-in .25s ease-out}:where(.motile-modal[data-variant=slideDown]){animation:motile-modal-slide-down .55s cubic-bezier(.34,1.3,.64,1)}:where(.motile-modal[data-variant=slideUp]){animation:motile-modal-slide-up .5s cubic-bezier(.34,1.3,.64,1)}:where(.motile-modal[data-variant=bottomSheet]){animation:motile-modal-bottom-sheet .35s cubic-bezier(.32,.72,0,1);width:var(--modal-width, 100%);max-width:var(--modal-max-width, 100%)}@media (min-width: 769px){:where(.motile-modal[data-variant=bottomSheet]){width:var(--modal-width, 100%);max-width:var(--modal-max-width, var(--modal-width, 480px))}}@media (max-width: 768px){:where(.motile-modal[data-variant=bottomSheet]){width:100%;max-width:none}}:where(.motile-modal__content){background-color:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(90dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}:where(.motile-modal[data-variant=bottomSheet] .motile-modal__content){border-radius:20px 20px 0 0;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top));max-height:calc(90dvh - env(safe-area-inset-top));box-shadow:0 -10px 25px -5px #0000001a,0 -4px 10px -5px #0000000a}:where(.motile-modal__header){display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e5e7eb;flex-shrink:0}:where(.motile-modal__title){font-size:1rem;font-weight:600;color:#111827;margin:0;line-height:1.4}:where(.motile-modal__close){display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;border-radius:8px;color:#6b7280;transition:all .15s ease}:where(.motile-modal__close:hover){background-color:#f3f4f6;color:#111827}:where(.motile-modal__close:active){transform:scale(.95)}:where(.motile-modal__close:focus-visible){outline:2px solid #3b82f6;outline-offset:2px}:where(.motile-modal__body){padding:24px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;color:#374151;line-height:1.6;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:where(.motile-modal__body::-webkit-scrollbar){width:6px}:where(.motile-modal__body::-webkit-scrollbar-track){background:transparent}:where(.motile-modal__body::-webkit-scrollbar-thumb){background-color:#0003;border-radius:3px}:where(.motile-modal__body::-webkit-scrollbar-thumb:hover){background-color:#0000004d}:where(.motile-modal__footer){display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;border-top:1px solid #e5e7eb;flex-shrink:0}@keyframes motile-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes motile-modal-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes motile-modal-slide-down{0%{opacity:0;transform:translateY(-100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-slide-up{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-bottom-sheet{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){:where(.motile-modal__backdrop[data-variant=scale]),:where(.motile-modal__backdrop[data-variant=slideDown]),:where(.motile-modal__backdrop[data-variant=slideUp]),:where(.motile-modal__backdrop[data-variant=bottomSheet]){animation:none}:where(.motile-modal[data-variant=scale]),:where(.motile-modal[data-variant=slideDown]),:where(.motile-modal[data-variant=slideUp]),:where(.motile-modal[data-variant=bottomSheet]){animation:none;opacity:1;transform:none}:where(.motile-modal__close:active){transform:none}}@media (prefers-contrast: high){:where(.motile-modal__content){border:2px solid #000000}:where(.motile-modal__header){border-bottom-width:2px}:where(.motile-modal__footer){border-top-width:2px}:where(.motile-modal__title){font-weight:700}}@media (max-width: 768px){:where(.motile-modal__content){border-radius:16px}:where(.motile-modal__header){padding:20px}:where(.motile-modal__body){padding:20px}:where(.motile-modal__footer){padding:20px}:where(.motile-modal__title){font-size:1.125rem}:where(.motile-modal__close:active){background-color:#e5e7eb}}@media (max-width: 390px){:where(.motile-modal__backdrop){padding:0 12px}:where(.motile-modal__header){padding:16px}:where(.motile-modal__body){padding:16px}:where(.motile-modal__footer){padding:16px}:where(.motile-modal__title){font-size:1rem}}@media (hover: none) and (pointer: coarse){:where(.motile-modal__close){min-width:44px;min-height:44px;padding:10px}}@supports (-webkit-touch-callout: none){:where(.motile-modal__close){-webkit-tap-highlight-color:transparent}:where(.motile-modal__content){margin-bottom:env(safe-area-inset-bottom)}}@media (max-height: 600px) and (orientation: landscape){:where(.motile-modal__content){max-height:85vh;max-height:85dvh;border-radius:8px}:where(.motile-modal__header){padding:16px 24px}:where(.motile-modal__body){padding:16px 24px}:where(.motile-modal__footer){padding:16px 24px}:where(.motile-modal__title){font-size:1rem}}@media (prefers-color-scheme: dark){:where(.motile-modal__backdrop){background-color:#000000bf}:where(.motile-modal__content){background-color:#1f2937;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0000004d}:where(.motile-modal__header){border-bottom-color:#374151}:where(.motile-modal__title){color:#f9fafb}:where(.motile-modal__close){color:#9ca3af}:where(.motile-modal__close:hover){background-color:#374151;color:#f9fafb}:where(.motile-modal__body){color:#e5e7eb}:where(.motile-modal__footer){border-top-color:#374151}:where(.motile-modal__body::-webkit-scrollbar-thumb){background-color:#fff3}:where(.motile-modal__body::-webkit-scrollbar-thumb:hover){background-color:#ffffff4d}}