responsivelisted

# Responsive Design Skill 반응형 디자인 검증 및 최적화를 위한 종합 가이드입니다. ## Triggers - "반응형", "responsive", "브레이크포인트", "모바일", "breakpoint" --- ## 반응형 설계 전략 ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ Responsive Design Strategy │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ Mobile First Approach │ │ ───────────────────── │ │ │ │ 📱 320px → 📱 640px → 💻 1024px → 🖥️ 1280px+ │ │ (base) (sm) (lg) (xl) │ │ │ │ ┌─────────┐ ┌─────────┐ ┌───────────────┐ ┌───────────────────┐ │ │ │ Stack │ │ 2-col │ │ Sidebar + │ │ Full Dashboard │ │ │ │ Layout │ │ Grid │ │ Main Content │ │ with Panels │ │ │ └─────────┘ └─────────┘ └───────────────┘ └───────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` --- ## 1. 브레이크포인트 시스템 ### Tailwind CSS v4 브레이크포인트 ```css /