# 3x3 배너 디자인 사양서 — task-1456.1

## 절대 규칙
1. **불투명/반투명 layer 사용 금지**: `.dark-overlay`, `.text-panel`, `.gradient-overlay` 등 배경 위 오버레이 요소 절대 금지
2. 텍스트 가독성은 **text-shadow만으로** 확보
3. CTA 버튼, Badge는 불투명 UI 요소이므로 허용 (오버레이가 아닌 기능 요소)
4. 배경은 기존 Gemini 출력물 사용 (재생성 금지)
5. HTML → Playwright PNG 렌더링 필수

## DQ 필수 수치
- 헤드라인: 84px+, weight 800-900
- 서브헤드: 64px+, weight 600-700
- CTA: 40px+, weight 700-800
- 절대 최소: 모든 텍스트 40px+
- 폰트 최소 2종
- PASS 기준: 93점+

## Text Shadow 표준 (오버레이 대체)
```css
/* 어두운 배경용 (Cell 2, 4, 5, 6) */
.shadow-dark {
  text-shadow: 
    0 2px 4px rgba(0,0,0,0.8),
    0 4px 12px rgba(0,0,0,0.6),
    0 0 30px rgba(0,0,0,0.4);
}

/* 중간/복잡한 배경용 (Cell 1, 3, 7, 8, 9) */
.shadow-heavy {
  text-shadow: 
    0 0 8px rgba(0,0,0,0.9),
    0 2px 6px rgba(0,0,0,0.9),
    0 4px 16px rgba(0,0,0,0.7),
    0 0 40px rgba(0,0,0,0.5);
}
```

## 공통 CSS 규칙
- `box-sizing: border-box` 전체 적용
- `word-break: keep-all` 한국어 줄바꿈
- `white-space: nowrap` 뱃지/CTA
- `letter-spacing: -0.03em` 컨테이너 오버플로우 방지
- CTA " →" 화살표 필수
- 구분자는 `|` 사용 (`·` 금지)

## 폰트 파일 경로
```
/home/jay/.local/share/fonts/Pretendard/Pretendard-Bold.otf      (700)
/home/jay/.local/share/fonts/Pretendard-ExtraBold.otf             (800)
/home/jay/.local/share/fonts/Pretendard-Black.otf                 (900)
/home/jay/.local/share/fonts/NotoSerifKR-Black.otf                (900)
/home/jay/.local/share/fonts/NotoSerifKR-Bold.otf                 (700)
/home/jay/.local/share/fonts/GothicA1-Black.ttf                   (900)
/home/jay/.local/share/fonts/GothicA1-Bold.ttf                    (700)
/home/jay/.local/share/fonts/GothicA1-SemiBold.ttf                (600)
/home/jay/.local/share/fonts/Hahmlet-Black.ttf                    (900)
/home/jay/.local/share/fonts/Hahmlet-Bold.ttf                     (700)
/home/jay/.local/share/fonts/Nanum/NanumSquareEB.ttf              (800)
/home/jay/.local/share/fonts/Nanum/NanumSquareB.ttf               (700)
/home/jay/.local/share/fonts/GowunDodum.ttf                       (400)
/home/jay/.local/share/fonts/IBMPlexSansKR-Bold.ttf               (700)
/home/jay/.local/share/fonts/IBMPlexSansKR-SemiBold.ttf           (600)
/home/jay/.local/share/fonts/SUITExtraBold.ttf                    (800)
/home/jay/.local/share/fonts/DoHyeon-Regular.ttf                  (400)
```

## 배경 이미지 분석
- Cell 1: 따뜻한 서류/왁스 씰 데스크 (밝은 영역 있음) → heavy shadow
- Cell 2: 야경 고층 오피스 (어두움) → dark shadow
- Cell 3: Cell 1과 동일 배경 → heavy shadow
- Cell 4: 비 오는 밤 교차로 (매우 어두움, 레드 라이트) → dark shadow
- Cell 5: 어두운 카페/노트북 (매우 어두움) → dark shadow
- Cell 6: Cell 4와 동일 배경 → dark shadow
- Cell 7: 고전 서재/뱅커 램프 (중간 밝기) → heavy shadow
- Cell 8: Cell 7과 동일 배경 → heavy shadow
- Cell 9: Cell 7과 동일 배경 → heavy shadow