Vendor templates and prefer local template assets

templates/blocks/INDEX.md

@@ -0,0 +1,104 @@
+# 블록 라이브러리 인덱스 (38개)
+
+디자인 팀장이 콘텐츠에 맞는 블록을 선택할 때 참조하는 라이브러리.
+각 카테고리 안에 변형이 여러 개 있으며, 콘텐츠 성격에 따라 적절한 변형을 선택한다.
+
+**시각화(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/ (9개) — 카드 계열
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `card-image-3col.html` | 이미지(160px) + 색상 제목 + 영문 + 불릿 (3열) | 단계별 설명에 이미지 핵심 |
+| `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/ (6개) — 시각 요소 (**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) |
+
+---
+
+## 📁 emphasis/ (10개) — 강조, 인용, 결론
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `quote-big-mark.html` | ❝❞ 큰따옴표 장식 + 인용+출처 | 임팩트 인용, 핵심 발언 |
+| `quote-question.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` | 좌우 회색 선 + 중앙 텍스트 | 가벼운 섹션 구분, 휴식점 |
+
+---
+
+## 📁 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 이미지 금지