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

## 프로젝트
- **project_id**: InsuRo
- **프로젝트 경로**: `/home/jay/projects/InsuRo/`

## 작업 레벨: Lv.1 (파일/라인 특정)

## 수정 대상
- `/home/jay/projects/InsuRo/src/pages/Pricing.tsx` (517줄)

## 문제점
사이드바가 있는 DashboardLayout 안에서 4개 플랜 카드(Free/Basic/Pro/Max)가 CSS Grid로 배치되어 있는데, 공간이 부족하여 레이아웃이 깨진다.

### 구체적 이슈
1. **카드 겹침/잘림**: `gridTemplateColumns: 180px repeat(${plans.length}, 1fr)` — 플랜이 4개일 때 1fr 컬럼이 너무 좁아 카드 내 텍스트와 가격이 겹치거나 잘림
2. **min-w 부족**: `min-w-[640px]`이 4개 카드 + 180px 레이블 열에 부족함
3. **Pro "인기" 배지 겹침**: `absolute -top-3`로 배치된 Badge가 상단 여백 부족으로 잘림
4. **가격 영역 깨짐**: 할인 가격 + Badge("20% OFF")가 한 줄에 들어가지 않아 줄바꿈 발생

## 수정 방향

### 1. min-w 확대
- `min-w-[640px]` → `min-w-[900px]` 이상으로 변경 (4개 카드가 최소한의 여유 확보)

### 2. 레이블 열 축소 + 카드 열 minmax
- `gridTemplateColumns: 180px repeat(N, 1fr)` → `gridTemplateColumns: 160px repeat(N, minmax(160px, 1fr))`
- 레이블 열 180px → 160px으로 축소
- 카드 열에 최소폭 160px 보장

### 3. Pro "인기" 배지 여백
- 헤더 행 상단에 `pt-4` 또는 `mt-4` 추가하여 Badge가 잘리지 않게 함

### 4. 가격 영역 줄바꿈 대응
- 가격 + Badge를 `flex-wrap`으로 처리하거나, Badge를 별도 줄로 이동
- 라인 350 부근 `<div className="flex items-baseline gap-1">` → `flex-wrap` 추가

### 5. 전체 gridTemplateColumns 통일
- 파일 내 `gridTemplateColumns` 사용하는 모든 grid 행(헤더, 카테고리 헤더, 기능 행, 토큰 섹션, 하단 CTA)이 동일한 columns 값을 사용해야 함
- 반복되는 스타일을 변수화하면 좋음: `const gridCols = \`160px repeat(\${plans.length}, minmax(160px, 1fr))\``

## 완료 기준
1. 4개 플랜 카드가 겹치거나 잘리지 않고 깔끔하게 표시됨
2. Pro "인기" 배지가 잘리지 않음
3. 가격 영역이 줄바꿈 없이 또는 자연스럽게 표시됨
4. 모바일(가로 스크롤)과 데스크탑 모두 정상 동작
5. 기존 기능(토글, FAQ 등) 정상 동작 유지

## 참고
- 이 파일은 React + Tailwind CSS + framer-motion 사용
- shadcn/ui 컴포넌트 사용 (Button, Badge)
- DashboardLayout 내부 렌더링 (사이드바 존재)