# Magazine

## Design Philosophy / 디자인 철학

**EN:** Inspired by editorial magazine spreads and bold print layouts. Asymmetric compositions, dramatic typography contrast, and generous negative space create a premium, curated feel. The theme alternates between clean white pages and bold accent blocks to establish visual rhythm — like flipping through a high-end publication. Every slide is designed to command attention through layout, not decoration.

**KO:** 에디토리얼 매거진 스프레드와 대담한 인쇄 레이아웃에서 영감을 받은 테마입니다. 비대칭 구성, 극적인 타이포그래피 대비, 넉넉한 여백이 프리미엄하고 큐레이팅된 느낌을 만들어냅니다. 깔끔한 화이트 페이지와 강렬한 액센트 블록을 번갈아 사용하여 고급 출판물을 넘기는 듯한 시각적 리듬감을 형성합니다. 모든 슬라이드는 장식이 아닌 레이아웃으로 시선을 사로잡도록 설계되었습니다.

---

## Color Palette / 색상 팔레트

| Role | Value | Preview |
|------|-------|---------|
| Background (white) | `#ffffff` | ![#ffffff](https://via.placeholder.com/16/ffffff/ffffff) |
| Background (light) | `#f8f8f8` | ![#f8f8f8](https://via.placeholder.com/16/f8f8f8/f8f8f8) |
| Background (dark) | `#111111` | ![#111111](https://via.placeholder.com/16/111111/111111) |
| Background (black) | `#000000` | ![#000000](https://via.placeholder.com/16/000000/000000) |
| Primary Text | `#111111` | ![#111111](https://via.placeholder.com/16/111111/111111) |
| Secondary Text | `#555555` | ![#555555](https://via.placeholder.com/16/555555/555555) |
| Muted Text | `#888888` | ![#888888](https://via.placeholder.com/16/888888/888888) |
| Accent | `#e63946` | ![#e63946](https://via.placeholder.com/16/e63946/e63946) |
| Surface | `#f8f8f8` | ![#f8f8f8](https://via.placeholder.com/16/f8f8f8/f8f8f8) |
| Border | `#e0e0e0` | ![#e0e0e0](https://via.placeholder.com/16/e0e0e0/e0e0e0) |
| Code Background | `#1e1e1e` | ![#1e1e1e](https://via.placeholder.com/16/1e1e1e/1e1e1e) |

---

## Typography / 타이포그래피

| Element | Font | Weight | Size | Notes |
|---------|------|--------|------|-------|
| Body | Pretendard | 400 | 20px | |
| Headline XL | Pretendard | 900 | 96px | letter-spacing: -0.04em |
| Headline LG | Pretendard | 800 | 54px | letter-spacing: -0.03em |
| Headline MD | Pretendard | 700 | 36px | letter-spacing: -0.02em |
| Thin Text | Pretendard | 300 | varies | Used for quotes, subtitles |
| Category Tag | Pretendard | 700 | 11px | uppercase, letter-spacing: 0.14em |
| Code | JetBrains Mono | 400 | 14px | |

---

## Special Effects / 특수 효과

- **Asymmetric title** — Split layout with a bold colored block occupying ~38% of the right side
- **Bold top-border accents** — Cards and flow steps have a 4px red top-border, creating a magazine section divider feel
- **Editorial quote marks** — Very large (180px) semi-transparent quote marks behind quote text
- **Category tags** — Small uppercase labels styled like magazine section headers
- **Split content layout** — 40/60 ratio between headline and body text for editorial asymmetry
- **Strong typography contrast** — Weight 900 headlines vs weight 300 body creates dramatic visual hierarchy
- **Before/After comparison** — Light vs dark column pairing for clear visual distinction

---

## Use Cases / 적합한 용도

**EN:**
- Design presentations and creative showcases
- Portfolio reviews and case studies
- Brand guidelines and identity presentations
- Architecture and interior design pitches
- Photography and visual storytelling
- Fashion and lifestyle presentations
- Agency credentials and capabilities decks

**KO:**
- 디자인 프레젠테이션 및 크리에이티브 쇼케이스
- 포트폴리오 리뷰 및 케이스 스터디
- 브랜드 가이드라인 및 아이덴티티 발표
- 건축 및 인테리어 디자인 제안
- 사진 및 비주얼 스토리텔링
- 패션 및 라이프스타일 프레젠테이션
- 에이전시 역량 소개 덱

---

## Slide Types / 슬라이드 타입

`reference.html` includes examples of all supported slide types:

1. **Title** — Asymmetric split layout, bold left-aligned headline with red accent block on right
2. **Agenda/TOC** — Numbered list with red badge numbers, clean white background
3. **Content** — Split layout (40/60), heavy headline left, body text with bullet points right
4. **Quote** — Large editorial quote marks, thin-weight text, red accent rule, attribution
5. **Comparison** — Before/After two-column with light vs dark contrast
6. **Flow/Steps** — Horizontal process steps with red top-border accents and arrows
7. **Cards** — 3-column grid with red top-border accent, magazine category tags
8. **Data/Chart** — CSS bar chart with red and grayscale color palette
9. **Code Block** — Dark code window with macOS-style dots against white background
10. **Image Placeholder** — Large hero image area with caption, emphasizing visual content
11. **Closing** — Bold "Thank You" with red accent dot, contact links