# InsuRo Pricing 페이지 UI 개선 v3

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

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

## 제이회장님 지시사항 (3건)

### 1. 한 화면에 들어오게 — 좌우 폭 축소
현재 `min-w-[1200px]`로 설정되어 가로 스크롤이 필요함. **가로 스크롤 없이 사이드바 포함 한 화면에 5개 플랜이 모두 보여야 함.**
- `min-w-[1200px]` 제거 또는 대폭 축소
- 레이블 열(현재 160px) 축소 검토 (120px~140px)
- 카드 열 minmax 최소값 축소 (170px → 130px~140px)
- 카드 내부 padding 축소, 텍스트 크기 조정 등으로 5개 카드가 좁은 공간에 들어가도록
- 핵심: **사이드바(~240px) + 메인 컨텐츠 영역에서 가로 스크롤 없이** 5개 플랜이 모두 표시

### 2. Pro 카드 스타일 변경 — 색 채우기 제거, 테두리만 강조
현재 Pro 카드: `gradient-border shadow-md` + "인기" Badge에 `gradient-bg`
- Pro 카드의 배경 채우기/gradient 스타일 제거
- 대신 **테두리(border)만 굵은 파란색**으로 변경 (예: `border-primary border-[3px]` 또는 `border-blue-500 border-[3px]`)
- "인기" Badge는 유지하되, 배경색을 과하지 않게 조정 (outline 스타일 등 검토)
- Pro 카드의 CTA 버튼도 gradient-bg 대신 outline 또는 primary 단색으로

### 3. 하단 CTA 버튼 행 삭제
파일 하단(현재 라인 481~490 부근)의 "하단 CTA 행 반복 (편의)" 섹션을 **완전 삭제**.
```tsx
{/* ── 하단 CTA 행 반복 (편의) ── */}
<div className="grid gap-3 pt-6" style={{ gridTemplateColumns: gridCols }}>
  <div />
  {plans.map((plan) => (
    <div key={plan.id}>{renderCtaButton(plan)}</div>
  ))}
</div>
```
이유: 상단 플랜 카드에 이미 "시작하기" 버튼이 있어서 중복.

## 완료 기준
1. 사이드바 포함 일반 데스크탑 해상도(1920px, 1440px)에서 가로 스크롤 없이 5개 플랜 모두 표시
2. Pro 카드: 배경 채우기 없이 굵은 파란 테두리만으로 강조
3. 하단 CTA 행 완전 제거
4. 기존 기능(토글, FAQ 등) 정상

## 빌드 & 서버 재시작 (필수!)
수정 완료 후 반드시 실행:
```bash
cd /home/jay/projects/InsuRo && npx vite build
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 &
```