# InsuRo Pricing 페이지 레이아웃 수정 v2

## 프로젝트 경로
`/home/jay/projects/InsuRo/`

## 수정 대상
`/home/jay/projects/InsuRo/src/pages/Pricing.tsx`

## 현재 상태
이전 수정(task-640.1)에서 min-w-[900px]→min-w-[1100px], gridCols 변수화, pt-4, flex-wrap 등 적용했으나, **플랜이 5개**(Free/Basic/Pro/Max/Enterprise)인데 4개 기준으로 수정해서 여전히 오른쪽 카드(Enterprise)가 잘린다.

## 핵심 문제
1. **5개 플랜 카드 + 160px 레이블 열**: 현재 `min-w-[1100px]`과 `minmax(160px, 1fr)`로는 5개 카드가 들어가지 않음
2. **사이드바(~240px)가 있는 DashboardLayout 내부**에서 렌더링되므로, 실제 가용 폭은 브라우저 폭 - 240px

## 수정 방향

### 방안: 가로 스크롤 허용 + 충분한 min-w
- `min-w-[1100px]` → `min-w-[1200px]` (5개 카드 × 180px + 레이블 160px + gap)
- 카드 minmax: `minmax(160px, 1fr)` → `minmax(170px, 1fr)`
- 이미 `overflow-x-auto`가 적용되어 있으므로 가로 스크롤은 자연스럽게 동작함

### 추가 수정
- 각 카드 내부 텍스트 크기가 좁은 폭에서도 읽히도록 `text-[11px]` 등 확인
- 가격 영역: 이미 flex-wrap 적용됨, 정상 동작 확인만

## 완료 기준
1. Free/Basic/Pro/Max/Enterprise 5개 카드가 모두 보이고 겹치지 않음
2. 가로 스크롤 시 자연스럽게 전체 테이블 확인 가능
3. Pro "인기" 배지 정상 표시
4. 기존 기능 유지

## 빌드 & 서버 재시작 (필수!)
수정 완료 후 반드시 아래 명령 실행:
```bash
cd /home/jay/projects/InsuRo && npx vite build
# 기존 vite preview 프로세스 kill 후 재시작
ps aux | grep "vite preview" | grep -v grep | awk '{print $2}' | xargs -r kill -9
sleep 1
cd /home/jay/projects/InsuRo && nohup npx vite preview --host 0.0.0.0 --port 5173 > /tmp/insuro-preview.log 2>&1 &
```