# InsuRo AI 키워드 분석 — 모바일 탭 메뉴 겹침 수정

## 작업 레벨: Lv.1

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

## 버그 설명
모바일 화면에서 AI 키워드 분석 페이지(`/keyword-analysis`)의 탭 메뉴 6개가 한 줄에 겹쳐서 표시됨.
"검색량 조회", "키워드 순위", "구글 트렌드", "정보성 키워드", "상위노출 분석", "메인 노출분석" — 텍스트가 겹쳐서 읽을 수 없음.

## 수정 방법

### KeywordAnalysis.tsx 탭 영역 모바일 대응
파일: `src/pages/KeywordAnalysis.tsx`

탭 컨테이너에 **가로 스크롤** 적용:
```tsx
// 탭 컨테이너 CSS 수정
<div className="flex overflow-x-auto scrollbar-hide gap-1 pb-1">
  {/* 각 탭 버튼에 shrink-0 추가하여 줄바꿈 방지 */}
  <button className="shrink-0 whitespace-nowrap px-3 py-2 text-sm ...">검색량 조회</button>
  ...
</div>
```

핵심 CSS:
- 탭 컨테이너: `overflow-x-auto` + `flex-nowrap` (가로 스크롤)
- 각 탭 버튼: `shrink-0` + `whitespace-nowrap` (줄바꿈/축소 방지)
- `scrollbar-hide` 또는 `::-webkit-scrollbar { display: none }` (스크롤바 숨김)

또는 모바일에서 탭 텍스트를 축약:
- "검색량 조회" → "검색량"
- "키워드 순위" → "순위"
- "구글 트렌드" → "트렌드"
- "정보성 키워드" → "정보성"
- "상위노출 분석" → "상위노출"
- "메인 노출분석" → "메인"

★ 가로 스크롤 방식이 더 권장 (텍스트 축약 없이 원본 유지)

## affected_files
- `src/pages/KeywordAnalysis.tsx` (수정 — 탭 모바일 가로 스크롤)

## 검증 시나리오
1. 모바일 뷰포트(375px) → 탭 6개가 가로 스크롤로 표시, 겹침 없음
2. PC 뷰포트 → 기존과 동일 (6개 탭 한 줄에 표시)
3. 탭 클릭 → 해당 기능 정상 동작
4. npm run build 성공