토스트/알림 메시지

14. 토스트/알림 메시지 Design a toast notification system: **Toast Container**: - Position: fixed, configurable (top-right default) - Z-index: 9999 - Stack direction: newest on top - Gap: 12px between toasts - Max visible: 5 (older ones queue) **Toast Component**: - Min-width: 300px, max-width: 420px - Padding: 16px - Border-radius: 12px - Shadow: 0 10px 15px -3px rgba(0,0,0,0.1) - Background: white (or dark variant) **Variants**: - Info: blue-500 accent, info icon - Success: green-500 accent, check-circle icon - Warning: amber-500 accent, alert-triangle icon - Error: red-500 accent, x-circle icon **Structure**: - Icon (24px) | Title + Description | Close X - Title: 14px semibold - Description: 13px gray-600 - Optional action button (text link style) **Behavior**: - Auto-dismiss: 5000ms (configurable) - Progress bar at bottom showing time remaining - Hover pauses timer - Swipe to dismiss on mobile - Close button always visible **Animation**: - Enter: slide in from right + fade - Exit: slide out to right + fade - Stack reorder: smooth layout animation Tech: React + Sonner library (or custom with Framer Motion)