반응형 네비게이션

문제 설명

모바일과 데스크탑 모두에서 잘 작동하는 반응형 네비게이션을 구현하세요.

요구사항

• 데스크탑: 가로 메뉴
• 태블릿: 축약된 메뉴
• 모바일: 햄버거 메뉴 + 슬라이드 패널

브레이크포인트

• 모바일: < 768px
• 태블릿: 768px - 1024px
• 데스크탑: > 1024px

기능

• CSS만으로 토글 (checkbox hack)
• 부드러운 전환 애니메이션
• 외부 클릭 시 닫힘
• 스크롤 시 축소되는 헤더

접근성

• 키보드 네비게이션
• ARIA 속성
• Focus trap (모바일 메뉴 열림 시)

평가 기준

• 반응형 동작
• 접근성 준수
• 애니메이션 품질