chore(WEB): 글로벌 스타일 수정 및 레이아웃 미세 조정

- globals.css 스타일 업데이트
- AuthenticatedLayout 수정
- claudedocs 문서 인덱스 업데이트

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

claudedocs/_index.md

@@ -25,6 +25,23 @@
 4. **blob URL 비호환** — 업로드 미리보기(blob:)는 `next/image`가 지원 안 함
 5. **설정 부담 > 이점** — `remotePatterns` 설정 + 백엔드 도메인 관리 비용이 실질 이점보다 큼
 
+### 모바일 헤더 `backdrop-filter` 깜빡임 수정 (2026-02-11)
+
+**현상**: 모바일(Safari/Chrome)에서 sticky 헤더가 스크롤 시 투명↔불투명 깜빡임 발생. PC 브라우저 축소로는 재현 불가, 실제 모바일 기기에서만 발생.
+
+**원인 2가지**:
+1. `globals.css`에 `* { transition: all 0.2s }` — 전체 요소의 모든 CSS 속성에 전역 transition. 모바일 스크롤 리페인트 시 background/opacity가 매번 애니메이션
+2. 모바일 헤더의 `clean-glass` 클래스: `backdrop-filter: blur(8px)` + `background: rgba(255,255,255, 0.95)` 조합이 모바일 sticky 요소에서 GPU 컴포지팅 충돌
+
+**수정**:
+- `globals.css`: `*` 전역 transition → `button, a, input, select, textarea, [role]` 인터랙티브 요소만, `transition: all` → `color, background-color, border-color, box-shadow` 속성만
+- 모바일 헤더: `clean-glass` (반투명+blur) → `bg-background border border-border` (불투명 배경)
+
+**교훈**:
+- `transition: all`은 절대 `*`에 걸지 않기. 모바일 성능 저하 + 의도치 않은 애니메이션 발생
+- `backdrop-filter: blur()` + `sticky` 조합은 모바일 브라우저 고질적 리페인트 버그. 모바일 헤더는 불투명 배경 사용
+- 0.95 투명도는 육안 구분 불가 → 불투명 처리해도 시각적 차이 없음
+
 **사용처 (9개 파일)**:
 | 파일 | 용도 | 이미지 소스 |
 |------|------|-------------|