# 블록 라이브러리 인덱스 (46개)

디자인 팀장이 콘텐츠에 맞는 블록을 선택할 때 참조하는 라이브러리.
각 카테고리 안에 변형이 여러 개 있으며, 콘텐츠 성격에 따라 적절한 변형을 선택한다.

**시각화(visuals/)는 SVG로 제작한다** — CSS/AI 이미지 금지.

---

## 📁 headers/ (5개) — 타이틀, 꼭지 헤더

| 파일 | 설명 | 언제 사용 |
|------|------|---------|
| `section-title-with-bg.html` | 배경 이미지 위 영문+한글 타이틀 (500px) | 페이지 맨 첫 화면, 배경 이미지 있을 때 |
| `section-header-bar.html` | 파란 바 + 중앙 흰 제목 (컴팩트) | 섹션 시작 가볍게, 주제 전환 |
| `topic-left-right.html` | 좌:파란 제목 + 우:설명 | 질문+답변 구조, 주장+근거 |
| `topic-center.html` | 중앙 정렬 대제목 + 서브+설명 | 단독 강조, 주제 선언 |
| `topic-numbered.html` | 번호 원형 + 제목 + 구분선 + 설명 | 순서 있는 꼭지 (1번, 2번, 3번) |

---

## 📁 cards/ (10개) — 카드 계열

| 파일 | 설명 | 언제 사용 |
|------|------|---------|
| `card-image-3col.html` | 이미지(160px) + 색상 제목 + 영문 + 불릿 (3열) | 단계별 설명에 이미지 핵심 |
| `card-text-grid.html` | 파란 액센트 + 제목 + 뱃지 + 설명 + 출처 (2~4열) | 용어 정의, 텍스트만 나열 |
| `card-dark-overlay.html` | 다크 이미지 배경 + 흰 제목 + 짧은 설명 (3~5열) | 키워드 시각 강조, 임팩트 |
| `card-tag-image.html` | 색상 태그 라벨 + 이미지 + 제목 + 설명 (3열) | 카테고리별 분류 (제조/건축/토목) |
| `card-icon-desc.html` | 큰 이모지 아이콘 + 제목 + 설명 (2~4열) | 기능/특성/장점 아이콘 나열 |
| `card-compare-3col.html` | 색상 헤더 카드 3열 + 불릿 | 3개 카테고리 비교 (상용/범용/전문) |
| `card-step-vertical.html` | 좌 색상 마커 + 우 콘텐츠 (세로, 연결선) | 생애주기 단계별 (이미지+설명) |
| `card-image-round.html` | 원형 이미지(140px) + 제목 + 설명 (2~3열) | 포트폴리오형, 비전/가치 |
| `card-stat-number.html` | 큰 숫자(36px) + 단위 + 라벨 (2~4열) | KPI, 성과 수치, 비용 절감율 |
| `card-numbered.html` | 색상 원형 번호 + 제목 + 설명 (세로) | 순서 있는 항목 (실행 단계, 조건) |

---

## 📁 tables/ (3개) — 표/비교 계열

| 파일 | 설명 | 언제 사용 |
|------|------|---------|
| `compare-3col-badge.html` | A \| VS배지 \| B 3단 비교 (행별) | 두 개념 다항목 비교 (BIM vs DX) |
| `compare-2col-split.html` | 파란 헤더 좌/구분/우 + 행별 비교 | 두 기술 항목별 상세 비교 (GIS vs BIM) |
| `table-simple-striped.html` | 남색 헤더 + 줄무늬 행. 범용 | 스펙표, 일정표, 수치 목록 |

---

## 📁 visuals/ (10개) — 시각 요소 (**SVG**)

**SVG 노하우:**
- `<text>` = 원 좌표와 같은 공간 → 위치 100% 정확
- `radialGradient`/`linearGradient` → 고급 그라데이션
- `filter` → 글로우/그림자
- 수학적 계산 (cos/sin) → N개 자동 배치 (Phase 2)
- **AI 이미지로 시각화 만들면 안 됨** — 원 위치 맞출 수 없음

| 파일 | 설명 | 언제 사용 |
|------|------|---------|
| `venn-diagram.html` | **SVG premium** 벤 다이어그램 (그라데이션+글로우) | 포함 관계, 기술 융합 (**★단독 배치**) |
| `circle-gradient.html` | 파란 그라데이션 원 + 중앙 텍스트 | 섹션 전환 키워드 강조 |
| `compare-pill-pair.html` | 이중 테두리 둥근 박스 2개 + VS | 2개 개념 시각 대비 (표 위 헤더) |
| `process-horizontal.html` | 파란 번호 원 + 카드 + → 화살표 (가로) | 논리적 프로세스 흐름 |
| `flow-arrow-horizontal.html` | 색상 캡슐 + 화살표 (SVG, 컴팩트) | 기술 발전/전환 흐름 간결하게 |
| `keyword-circle-row.html` | SVG 원형 안 큰 글자 + 라벨 + 설명 | 약어 풀이 (G-S-I-M) |
| `layer-diagram.html` | SVG 겹친 사다리꼴 레이어 (3D) | 기술 스택/계층 구조 |
| `timeline-vertical.html` | 세로 선 + SVG 마커 + 연도+제목+설명 | 연혁, 로드맵 (4개+ 이벤트) |
| `timeline-horizontal.html` | SVG 가로 선 + 마커 + 연도+제목 | 짧은 일정 (3~5개, 컴팩트) |
| `pyramid-hierarchy.html` | SVG 위→아래 넓어지는 사각형 | 위계, 우선순위 (좁은→넓은) |

---

## 📁 emphasis/ (13개) — 강조, 인용, 결론

| 파일 | 설명 | 언제 사용 |
|------|------|---------|
| `quote-left-border.html` | 좌측 빨간 라인 + 연한 배경 + 인용+출처 | 짧은 인용, 문제 제기 |
| `quote-big-mark.html` | ❝❞ 큰따옴표 장식 + 인용+출처 | 임팩트 인용, 핵심 발언 |
| `quote-question.html` | 파란 배경+테두리 + 큰 질문 텍스트 | 독자에게 질문, 전환점 |
| `conclusion-accent-bar.html` | 회색 배경 + 좌측 파란 라인 + 결론 | 페이지 하단 핵심 한 줄 |
| `comparison-2col.html` | 좌 파란 vs 우 빨간 헤더 + 본문 | A vs B 직접 비교 |
| `banner-gradient.html` | 파란 그라데이션 배너 + 중앙 흰 텍스트 | 섹션 구분, 핵심 선언 |
| `dark-bullet-list.html` | 짙은 남색 배경 + 파란 제목 + 흰 불릿 | 핵심 포인트 강조 (무게감) |
| `highlight-strip.html` | 가로 색상 구간 + 흰 라벨 | 카테고리 색상 분류 바 |
| `callout-solution.html` | 파란 배경+테두리 + 아이콘 + 제목+설명 | 해결책, 솔루션, 방향성 |
| `callout-warning.html` | 빨간 배경+테두리 + 아이콘 + 제목+설명 | 문제점, 주의, 잘못된 접근 |
| `tab-label-row.html` | 가로 탭 버튼 (선택됨=색상, 나머지=회색) | 카테고리 전환/분류 표시 |
| `divider-text.html` | 좌우 회색 선 + 중앙 텍스트 | 가벼운 섹션 구분, 휴식점 |
| `details-block.html` | `<details>/<summary>` 접기/펼치기 | 상세 콘텐츠, 자세히보기 |

---

## 📁 media/ (5개) — 이미지/미디어

| 파일 | 설명 | 언제 사용 |
|------|------|---------|
| `image-row-2col.html` | 이미지 2장 나란히 (354px) | 시공 사진 2장, 현장 비교 |
| `image-grid-2x2.html` | 이미지 4장 2x2 격자 (200px) | 현장 사진 4장, 갤러리 |
| `image-side-text.html` | 좌:이미지(320px) + 우:제목+설명+불릿 | 이미지 설명, 시스템 소개 |
| `image-full-caption.html` | 전체 너비 이미지 1장 + 캡션 | 핵심 도표, 대형 다이어그램 |
| `image-before-after.html` | Before(회색) + → + After(파란) | 변화 전후 비교 |

---

## 추가 규칙

1. **이름 규칙:** `{유형}-{특징}.html`
2. **모든 변형은 catalog.yaml에 등록** — 미등록 = 팀장이 모름
3. **각 파일 상단에 HTML 주석으로 용도/슬롯 명시**
4. **디자인 토큰 사용** — 하드코딩 색상 금지 (가능한 범위에서)
5. **높이 고정 금지** — 모드 독립적 (슬라이드/웹 겸용)
6. **visuals/는 SVG로 제작** — CSS 원/AI 이미지 금지
