# Mobile Layout Breakpoint And Safe Area Spec

## 목적

모바일 웹의 첫인상을 무너뜨리는 가장 큰 원인 중 하나는 레이아웃 오버플로와 안전 영역 무시다.  
이 문서는 모바일 레이아웃 기준과 브레이크포인트, 안전 영역 규칙을 정리한다.

## 핵심 원칙

- 가로 스크롤 0
- 주소창 변화에도 레이아웃 안정
- 키보드가 올라와도 입력창 보존
- 상단과 하단 안전 영역 존중

## 기준 뷰포트

- 360 x 800
- 390 x 844
- 412 x 915
- 430 x 932

## 체크 항목

- 헤더 버튼 잘림 여부
- 하단 내비와 입력창 충돌 여부
- 대화 목록과 본문 전환 시 폭 유지
- 긴 대화명, 긴 메시지에서 오버플로 여부

## 완료 기준

- 어떤 대표 뷰포트에서도 메신저 기본 구조가 흐트러지지 않아야 한다.