refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게
[공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류.
문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인).

- Topic_Programming → Domain_Programming (내부 구조 보존)
- Topic_Graphic → Domain_Design
- Topic_Business → Domain_Product
- Topic_General → Domain_General
- _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning),
  Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing)
- 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서)
- 빈 폴더 정리 (memory/procedures)
- 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

10_Wiki/Topics/Domain_Programming/AI_and_ML/반응형 디자인.md

@@ -0,0 +1,154 @@
+---
+id: wiki-2026-0508-반응형-디자인
+title: 반응형 디자인
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Responsive Design, RWD, Responsive Web Design]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [css, responsive, layout, media-query, container-query]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: CSS
+  framework: Web
+---
+
+# 반응형 디자인
+
+## 매 한 줄
+> **"매 single codebase 가 phone / tablet / laptop / TV 까지 fluidly 적응한다"**. 2010년 Ethan Marcotte 의 *Responsive Web Design* article 에서 기원, 매 fluid grid + flexible media + media query 의 3 pillar. 2026 modern stack 에서는 매 container query + `clamp()` + `dvh` unit + logical property 가 매 추가.
+
+## 매 핵심
+
+### 매 3 pillar (classic 2010)
+- **Fluid grid**: % / fr 단위, 매 fixed px 안 씀.
+- **Flexible media**: `max-width: 100%`, `<picture>`, `srcset`.
+- **Media query**: `@media (min-width: 768px)` breakpoint.
+
+### 매 modern additions (2024~)
+- **Container query** `@container (min-width: 400px)`: 매 component-level responsive.
+- **`clamp(min, preferred, max)`**: 매 fluid typography / spacing.
+- **`dvh` / `svh` / `lvh`**: dynamic viewport height (mobile address bar 대응).
+- **Logical property** `inline-size` / `block-size` / `margin-inline`: RTL / vertical writing 대응.
+- **`@media (prefers-color-scheme)` / `(prefers-reduced-motion)`**: user preference adaptation.
+
+### 매 응용
+1. Mobile-first CSS architecture.
+2. Component-level responsive (card → list 변형).
+3. Adaptive image delivery (`srcset` + `sizes`).
+
+## 💻 패턴
+
+### Mobile-first media query
+```css
+/* 매 base = mobile */
+.card { padding: 12px; font-size: 14px; }
+
+/* 매 tablet+ */
+@media (min-width: 768px) {
+  .card { padding: 24px; font-size: 16px; }
+}
+
+/* 매 desktop+ */
+@media (min-width: 1280px) {
+  .card { padding: 32px; font-size: 18px; }
+}
+```
+
+### Fluid typography (clamp)
+```css
+/* 매 320px → 14px, 1280px → 22px, 사이는 linearly */
+h1 { font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
+.container { padding-inline: clamp(16px, 4vw, 64px); }
+```
+
+### Container query (component-level)
+```css
+.card-container { container-type: inline-size; }
+
+.card { display: block; }
+
+@container (min-width: 400px) {
+  .card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
+}
+```
+
+### Responsive image with srcset
+```html
+<picture>
+  <source media="(min-width: 1280px)" srcset="hero-1920.webp" />
+  <source media="(min-width: 768px)"  srcset="hero-1024.webp" />
+  <img src="hero-640.webp"
+       srcset="hero-640.webp 640w, hero-1024.webp 1024w, hero-1920.webp 1920w"
+       sizes="(min-width: 768px) 50vw, 100vw"
+       alt="hero" loading="lazy" />
+</picture>
+```
+
+### CSS Grid auto-fit (zero-media-query)
+```css
+/* 매 column count 자동 — breakpoint 불필요 */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+```
+
+### Dynamic viewport height (mobile)
+```css
+/* 매 100vh 는 mobile address bar 때문에 jump. dvh 가 답 */
+.hero { height: 100dvh; } /* dynamic — bar 보일 때 줄어듦 */
+.modal { height: 100svh; } /* small — 항상 minimum */
+```
+
+### prefers-color-scheme
+```css
+:root { --bg: #fff; --fg: #000; }
+@media (prefers-color-scheme: dark) {
+  :root { --bg: #0a0a0a; --fg: #fafafa; }
+}
+body { background: var(--bg); color: var(--fg); }
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| 단순 page-level layout | media query (mobile-first) |
+| component reuse 다양한 context | container query |
+| typography / spacing scale | `clamp()` |
+| grid column count 자동 | `repeat(auto-fit, minmax(...))` |
+| mobile full-height | `dvh` (not `vh`) |
+
+**기본값**: 매 mobile-first + `clamp()` + container query 조합.
+
+## 🔗 Graph
+- 부모: [[Frontend_Performance]]
+- 변형: [[Container_Queries]] · [[Mobile-First]]
+- 응용: [[Fluid_Typography]] · [[CSS Grid]]
+- Adjacent: [[Tailwind CSS]] · [[Dark_Mode]]
+
+## 🤖 LLM 활용
+**언제**: cross-device CSS / layout, mobile/tablet/desktop adaptation, fluid typography 설계.
+**언제 X**: print-only stylesheet, native mobile (그건 platform layout system).
+
+## ❌ 안티패턴
+- **`100vh` 그대로 mobile 사용**: 매 address bar bounce. `dvh` 사용.
+- **fixed pixel breakpoint 만 사용**: 매 device-class 잡기 어려움. content-driven breakpoint 권장.
+- **media query 만 사용**: 매 component reuse 시 context-blind. container query 필요.
+- **`!important` 로 mobile override**: 매 specificity hell.
+
+## 🧪 검증 / 중복
+- Verified (Ethan Marcotte 원 article, MDN container query, web.dev responsive design guide).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — RWD 3 pillars + 2024+ container query / clamp / dvh patterns |