# InsuRo AI 키워드 분석 — 탭 메뉴 디자인 개선

## 작업 레벨: Lv.1

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

## 현재 문제
`/keyword-analysis` 페이지의 탭 메뉴(검색량 조회/키워드 순위/구글 트렌드/정보성 키워드/상위노출 분석/메인 노출분석)가 디자인적으로 미흡:
- 6개 탭이 한 줄 텍스트 나열, 시각적 계층 구분 없음
- 아이콘이 12px로 너무 작음
- 활성/비활성 탭 구분이 약함
- Lock 탭(프리미엄)과 일반 탭 차별화 없음

## 수정 사항
파일: `src/pages/KeywordAnalysis.tsx` 라인 256~275

### 디자인 개선 방향
1. **활성 탭**: primary 배경색 + 흰색 텍스트 + 아이콘 16px + font-medium
2. **비활성 탭**: 연한 회색 배경(bg-muted/50) + 회색 텍스트 + hover 시 bg-muted 
3. **Lock 탭(상위노출/메인노출)**: 반투명(opacity-60) + Lock 아이콘 강조 + 클릭 시 업그레이드 유도
4. **아이콘 크기**: 12px → 16px
5. **탭 간격**: gap-2 추가, 각 탭에 rounded-lg + px-4 py-2.5
6. **TabsList**: 배경색 bg-muted/30으로 가벼운 컨테이너 느낌, rounded-xl, p-1

### 예시 코드
```tsx
<TabsList className="flex w-full h-auto overflow-x-auto scrollbar-hide bg-muted/30 rounded-xl p-1 gap-1">
  <TabsTrigger 
    value="volume" 
    className="shrink-0 whitespace-nowrap text-sm py-2.5 px-4 rounded-lg gap-1.5 data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:shadow-sm"
  >
    <Search size={16} />검색량 조회
  </TabsTrigger>
  {/* ... 동일 패턴 */}
  
  {/* Lock 탭 — 반투명 + 프리미엄 표시 */}
  <TabsTrigger 
    value="blog-rank" 
    className="shrink-0 whitespace-nowrap text-sm py-2.5 px-4 rounded-lg gap-1.5 opacity-60 hover:opacity-80"
  >
    <Lock size={16} className="text-amber-500" />상위노출 분석
  </TabsTrigger>
</TabsList>
```

## affected_files
- `src/pages/KeywordAnalysis.tsx` (수정 — TabsList/TabsTrigger 스타일 변경)

## 검증 시나리오
1. 활성 탭이 primary 색상으로 뚜렷하게 구분됨
2. 비활성 탭이 연한 회색으로 부드럽게 표시
3. Lock 탭이 반투명 + 자물쇠 아이콘 강조
4. 탭 전환 시 스타일 전환 부드러움
5. 모바일에서 가로 스크롤 정상 동작
6. npm run build 성공