Phase P~S 전체 작업물: 검증 스크립트, 블록 템플릿, 설계 문서, 코드 수정

포함 내용:
- Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md)
- 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py)
- 블록 템플릿 추가 (cards, emphasis 변형)
- 코드 수정: block_search, content_editor, design_director, slide_measurer
- catalog.yaml 블록 목록 업데이트
- CLAUDE.md, PROGRESS.md, README.md 업데이트

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

templates/catalog.yaml

@@ -1,12 +1,21 @@
-version: '2.0'
+version: '4.0'
+# Phase Q: min_height_px, relation_types, category, min_items, max_items
+# Phase R: variants[] — 블록 변형. 기존 CSS를 유지하면서 내부 구조만 변경.
+#   variants[].id: 변형 ID (default = 기존 블록 그대로)
+#   variants[].description: 변형 설명
+#   variants[].template: 변형 전용 템플릿 경로 (없으면 기존 template 사용)
+#   variants[].when: 이 변형이 적합한 상황
 blocks:
 # ═══════════════════════════════════════
 # HEADERS (5개) — 꼭지/섹션 제목용
 # ═══════════════════════════════════════
 - id: section-title-with-bg
   name: 배경 이미지 타이틀
+  category: headers
   template: blocks/headers/section-title-with-bg.html
   height_cost: large
+  min_height_px: 300
+  relation_types: []
   visual: 전체 너비 배경 이미지(파란 그라데이션+웨이브) 위에 흰색 영문 소제목(15px) + 한글 대제목(35px). 높이 약 500px.
   when: '자세히보기(detail) 페이지의 맨 첫 화면 전용. 배경 이미지 위에 타이틀을 올려 페이지 주제를 시각적으로 강렬하게 선언할 때.'
   not_for: '일반 슬라이드 내부 소제목 → topic-left-right 또는 topic-center 사용. 배경 이미지 없이 텍스트만 → topic-center. 높이 200px 이하 → section-header-bar.'
@@ -17,8 +26,11 @@ blocks:
 
 - id: section-header-bar
   name: 섹션 헤더 바
+  category: headers
   template: blocks/headers/section-header-bar.html
   height_cost: compact
+  min_height_px: 40
+  relation_types: []
   visual: 전체 너비 파란 배경 바(~50px) + 중앙 흰색 제목. 섹션 구분용. 컴팩트.
   when: '같은 페이지 안에서 주제 전환이 필요할 때. 높이 예산이 적을 때 섹션 구분.'
   not_for: '페이지 전체 타이틀 → section-title-with-bg. 꼭지별 소제목 → topic-left-right 또는 topic-numbered.'
@@ -32,8 +44,11 @@ blocks:
 
 - id: topic-left-right
   name: 좌우 꼭지 헤더
+  category: headers
   template: blocks/headers/topic-left-right.html
   height_cost: compact
+  min_height_px: 50
+  relation_types: []
   visual: 좌측에 파란 굵은 제목(24px, 240px 고정) + 우측에 본문 설명(16px). 가로 2단.
   when: '좌측에 핵심 주장/질문, 우측에 근거/설명을 배치하는 구조. 문제 제기의 도입부로 적합. 예: "용어의 혼용" + "DX와 BIM이 혼용되고 있다..."'
   not_for: '중앙 정렬 대제목 → topic-center. 번호가 붙은 순서형 → topic-numbered. 섹션 전체 타이틀 → section-title-with-bg.'
@@ -47,8 +62,11 @@ blocks:
 
 - id: topic-center
   name: 중앙 정렬 꼭지 헤더
+  category: headers
   template: blocks/headers/topic-center.html
   height_cost: medium
+  min_height_px: 60
+  relation_types: []
   visual: 중앙 정렬 대제목(26px 굵게) + 파란 서브타이틀 + 하단 설명. 단독 강조.
   when: '하나의 주제를 페이지 중심에 크게 선언할 때. sidebar 영역의 섹션 라벨로도 사용 가능.'
   not_for: '좌:제목 우:설명 구조 → topic-left-right. 번호 순서 → topic-numbered.'
@@ -63,8 +81,11 @@ blocks:
 
 - id: topic-numbered
   name: 번호 꼭지 헤더
+  category: headers
   template: blocks/headers/topic-numbered.html
   height_cost: compact
+  min_height_px: 45
+  relation_types: []
   visual: 파란 원형 번호(①②③) + 굵은 제목 + 파란 구분선 + 설명. 세로 배치.
   when: '순서가 있는 꼭지를 시작할 때. 1번, 2번, 3번 식의 단계별 섹션.'
   not_for: '순서 없는 꼭지 → topic-left-right 또는 topic-center. 카드 안의 순서 → card-numbered.'
@@ -74,12 +95,17 @@ blocks:
     optional: [description, color]
 
 # ═══════════════════════════════════════
-# CARDS (10개) — 항목 나열/비교용
+# CARDS (9개) — 항목 나열/비교용
 # ═══════════════════════════════════════
 - id: card-image-3col
   name: 이미지 카드 3열
+  category: cards
   template: blocks/cards/card-image-3col.html
   height_cost: large
+  min_height_px: 250
+  relation_types: []
+  min_items: 2
+  max_items: 3
   visual: 3열 카드. 각 카드 상단에 이미지(160px) + 하단에 색상 밑줄 제목 + 불릿 목록.
   when: '이미지가 핵심인 항목 3개를 나란히. 예: 설계단계(3D모델) / 시공단계(현장) / 유지관리(자산).'
   not_for: '이미지 없이 텍스트만 → card-icon-desc. 키워드+짧은 설명만 → card-dark-overlay. 2개 비교 → compare-pill-pair.'
@@ -90,8 +116,13 @@ blocks:
 
 - id: card-dark-overlay
   name: 다크 오버레이 카드
+  category: cards
   template: blocks/cards/card-dark-overlay.html
   height_cost: medium
+  min_height_px: 100
+  relation_types: []
+  min_items: 3
+  max_items: 5
   visual: 3~5열 카드. 다크 배경 이미지 + 그라데이션 오버레이 + 흰색 굵은 제목 + 짧은 설명.
   when: '키워드를 시각적으로 강조할 때. 짧은 설명(2줄 이내)과 함께. 예: 협업지원 / 오류감소 / 생산성향상.'
   not_for: '긴 설명(3줄+) → card-icon-desc. 이미지가 크게 보여야 함 → card-image-3col. 순서/단계 → process-horizontal.'
@@ -107,8 +138,13 @@ blocks:
 
 - id: card-tag-image
   name: 태그 이미지 카드
+  category: cards
   template: blocks/cards/card-tag-image.html
   height_cost: large
+  min_height_px: 250
+  relation_types: []
+  min_items: 2
+  max_items: 3
   visual: 3열 카드. 좌상단 색상 태그 라벨 + 이미지 + 제목 + 설명.
   when: '카테고리 태그로 분류가 핵심일 때. 예: 제조업(파란) / 건축(초록) / 인프라(빨간).'
   not_for: '태그 불필요 → card-image-3col. 이미지 없음 → card-icon-desc.'
@@ -119,10 +155,22 @@ blocks:
 
 - id: card-icon-desc
   name: 아이콘 설명 카드
+  category: cards
   template: blocks/cards/card-icon-desc.html
   height_cost: medium
+  min_height_px: 120
+  relation_types: [definition]
+  min_items: 2
+  max_items: 4
+  variants:
+    - id: default
+      description: 아이콘 + 제목 + 설명 (기본 그리드)
+    - id: compact
+      description: 아이콘 축소, 설명 2줄 제한, 패딩 축소 (높이 부족 시)
+      template: blocks/cards/card-icon-desc--compact.html
+      when: "컨테이너 높이가 150px 미만일 때"
   visual: 2~4열. 중앙 큰 이모지 아이콘(2.5rem) + 굵은 제목 + 설명. 밝은 배경.
-  when: '독립적인 항목/개념/특성을 이모지 아이콘과 함께 나열. 순서 없는 개별 항목. 예: 🔧기술기반 / 💻S/W역량 / 🌏여건조성. 독립 사례를 각각 아이콘으로 구분하여 나열할 때도 적합.'
+  when: '독립적인 항목/개념/특성을 이모지 아이콘과 함께 나열. 순서 없는 개별 항목. 예: 🔧기술기반 / 💻S/W역량 / 🌏여건조성.'
   not_for: '이미지(사진) 필요 → card-image-3col. 순서 번호 필요 → card-numbered. 텍스트만(아이콘 불필요) → dark-bullet-list.'
   purpose_fit: [핵심전달, 근거사례, 구조시각화]
   zone: full-width-only
@@ -136,8 +184,13 @@ blocks:
 
 - id: card-compare-3col
   name: 3단 비교 카드
+  category: cards
   template: blocks/cards/card-compare-3col.html
   height_cost: large
+  min_height_px: 200
+  relation_types: [comparison]
+  min_items: 3
+  max_items: 3
   visual: 3열 카드. 각 카드 상단 색상 헤더(제목+서브) + 이미지 + 불릿 목록.
   when: '3개 카테고리를 비교할 때. 각 카테고리에 다른 색상 헤더. 예: 상용SW(회색) vs 3rd Party(파랑) vs 전문SW(빨강).'
   not_for: '2개 비교 → compare-pill-pair + compare-2col-split. 다항목 표 → compare-3col-badge.'
@@ -153,8 +206,13 @@ blocks:
 
 - id: card-step-vertical
   name: 세로 단계 카드
+  category: cards
   template: blocks/cards/card-step-vertical.html
   height_cost: xlarge
+  min_height_px: 250
+  relation_types: [sequence]
+  min_items: 2
+  max_items: 4
   visual: 세로 나열. 좌측 색상 마커(단계명) + 우측 콘텐츠 박스(제목+이미지+설명). 연결선.
   when: '생애주기/프로세스 단계별 설명. 각 단계에 이미지+상세 설명. 예: 설계→시공→운영 단계.'
   not_for: '가로 흐름(간단) → process-horizontal. 높이 예산 부족 → card-numbered. 독립 사례(순서 아님) → card-icon-desc.'
@@ -169,8 +227,13 @@ blocks:
 
 - id: card-image-round
   name: 원형 이미지 카드
+  category: cards
   template: blocks/cards/card-image-round.html
   height_cost: large
+  min_height_px: 200
+  relation_types: []
+  min_items: 2
+  max_items: 3
   visual: 2~3열. 원형 이미지(140px, 테두리+그림자) + 제목 + 설명. 중앙 정렬.
   when: '포트폴리오형 나열. 비전/가치 표현. 원형 이미지가 있는 경우.'
   not_for: '사각형 이미지 → card-image-3col. 이미지 없음 → card-icon-desc.'
@@ -181,8 +244,13 @@ blocks:
 
 - id: card-stat-number
   name: 통계 숫자 카드
+  category: cards
   template: blocks/cards/card-stat-number.html
   height_cost: medium
+  min_height_px: 80
+  relation_types: []
+  min_items: 2
+  max_items: 4
   visual: 2~4열. 매우 큰 숫자(36px, 색상) + 단위 + 라벨 + 설명.
   when: 'KPI, 성과 수치, 달성률, 비용 절감율 등 숫자가 핵심인 데이터. 예: 30% 절감 / 220명+.'
   not_for: '숫자가 아닌 텍스트 항목 → card-icon-desc. 비교 구조 → compare-3col-badge.'
@@ -193,8 +261,20 @@ blocks:
 
 - id: card-numbered
   name: 번호 항목 카드
+  category: cards
   template: blocks/cards/card-numbered.html
   height_cost: medium
+  min_height_px: 55
+  relation_types: [definition]
+  min_items: 1
+  max_items: 5
+  variants:
+    - id: default
+      description: 번호 + 제목 + 설명 (세로 나열)
+    - id: horizontal
+      description: 항목을 가로 2열로 배치 (사례 비교, 같은 구조 항목 나란히)
+      template: blocks/cards/card-numbered--horizontal.html
+      when: "같은 구조의 항목 2-3개를 나란히 비교할 때"
   visual: 세로 나열. 색상 원형 번호(①②③) + 제목 + 설명. 밝은 배경 카드.
   when: '번호가 의미 있는 항목 나열. 순서가 있는 단계(1→2→3)이거나, 번호로 구분되는 정의 목록. sidebar 용어 정의에 적합(1.건설산업 2.BIM 3.DX). 조건/요구사항 나열.'
   not_for: '순서 없는 독립 항목 → card-icon-desc. 이미지 포함 단계 → card-step-vertical. 가로 흐름 → process-horizontal.'
@@ -208,8 +288,11 @@ blocks:
 # ═══════════════════════════════════════
 - id: compare-3col-badge
   name: VS 배지 비교표
+  category: tables
   template: blocks/tables/compare-3col-badge.html
   height_cost: large
+  min_height_px: 150
+  relation_types: [comparison]
   visual: 3단 테이블. 좌(하늘색 헤더) | 중앙(파란 VS 배지) | 우(파란 헤더). 행별 비교.
   when: '두 개념의 다항목 비교(5행 이상). 구분 기준(중앙)을 두고 좌우로 비교. 예: BIM vs DX — S/W, 프로세스, 성과물 비교.'
   not_for: '시각적 대비(짧음) → compare-pill-pair. 2단 분할 → compare-2col-split. 범용 데이터 → table-simple-striped. A vs B 간단 비교(2~3행) → comparison-2col.'
@@ -223,8 +306,11 @@ blocks:
 
 - id: compare-2col-split
   name: 2단 분할 비교표
+  category: tables
   template: blocks/tables/compare-2col-split.html
   height_cost: large
+  min_height_px: 150
+  relation_types: [comparison]
   visual: 파란 헤더(좌/구분/우) + 행별 좌:항목 | 중앙:기준 라벨(파란) | 우:항목. 상세 비교.
   when: '두 기술/개념의 항목별 상세 비교. 중앙에 비교 기준 라벨. 예: DX vs BIM — 정의/범위/역할 비교. 원본에 이미 비교표 데이터가 있을 때.'
   not_for: 'VS 배지 → compare-3col-badge. 범용 데이터 → table-simple-striped. 간단 A vs B(2~3항목) → comparison-2col.'
@@ -239,8 +325,11 @@ blocks:
 
 - id: table-simple-striped
   name: 범용 줄무늬 테이블
+  category: tables
   template: blocks/tables/table-simple-striped.html
   height_cost: medium
+  min_height_px: 100
+  relation_types: []
   visual: 진한 남색 헤더 + 줄무늬 행 교차. 첫 열 굵은 글씨. 범용 데이터 표.
   when: '비교가 아닌 일반 데이터 표. 스펙표, 일정표, 항목 목록. 예: 구분/현재/목표/비고.'
   not_for: 'A vs B 비교 → compare-3col-badge 또는 compare-2col-split.'
@@ -254,8 +343,13 @@ blocks:
 # ═══════════════════════════════════════
 - id: venn-diagram
   name: SVG 벤 다이어그램
+  category: visuals
   template: blocks/visuals/venn-diagram.html
   height_cost: xlarge
+  min_height_px: 300
+  relation_types: [hierarchy, inclusion]
+  min_items: 2
+  max_items: 5
   visual: SVG. 진한 파란 큰 원(중심) + 3~5개 작은 원(주황/민트/골드 등). 그라데이션+글로우. 동적 N-item 지원.
   when: '상위-하위 포함 관계를 시각화. 기술 융합/포함 구조. 예: DX 안에 GIS/BIM/디지털트윈. relation_type=hierarchy 또는 inclusion일 때. ★ 반드시 단독 배치. 다른 블록과 같은 zone에 쌓으면 공간 부족.'
   not_for: '텍스트로 관계 설명 가능하면 사용 금지. sidebar(35%) 배치 금지. 높이 300px 미만 금지. 순차 흐름(A→B→C) → process-horizontal. 대등 비교 → compare-pill-pair.'
@@ -266,8 +360,11 @@ blocks:
 
 - id: circle-gradient
   name: 원형 라벨
+  category: visuals
   template: blocks/visuals/circle-gradient.html
   height_cost: compact
+  min_height_px: 50
+  relation_types: []
   visual: 파란 그라데이션 원(190px) + 이중 테두리 + 중앙 흰색 텍스트.
   when: '섹션 전환점에서 키워드를 원형으로 강조. 아래에 카드/표가 올 때 주제 선언.'
   not_for: '본문 텍스트 → topic-header 계열. 결론 한 줄 → banner-gradient. 단독 사용 비추.'
@@ -281,8 +378,11 @@ blocks:
 
 - id: compare-pill-pair
   name: 둥근 박스 VS
+  category: visuals
   template: blocks/visuals/compare-pill-pair.html
   height_cost: compact
+  min_height_px: 60
+  relation_types: [comparison]
   visual: 이중 테두리 둥근 박스 2개 나란히 + 'VS'. 하늘색 테두리 + 시안 텍스트.
   when: '2개 개념 시각적 대비. 비교 테이블 위 헤더로 사용. 예: "DX 협업 프로세스" VS "BIM 정보 관리".'
   not_for: '상세 비교(5행+) → compare-3col-badge. 3개 이상 → card-compare-3col.'
@@ -297,8 +397,13 @@ blocks:
 
 - id: process-horizontal
   name: 가로 단계 흐름
+  category: visuals
   template: blocks/visuals/process-horizontal.html
   height_cost: medium
+  min_height_px: 100
+  relation_types: [sequence]
+  min_items: 2
+  max_items: 5
   visual: 가로 방향. 파란 원형 번호 + 제목 + 설명(카드). → 화살표 연결.
   when: '논리적 순서가 있는 단계를 가로로. A→B→C→D 프로세스 흐름. 각 단계에 제목+설명이 필요할 때.'
   not_for: '독립 사례 나열(순서 없음) → card-icon-desc 또는 dark-bullet-list. 세로 나열 → card-numbered. 간결한 흐름(설명 불필요) → flow-arrow-horizontal.'
@@ -309,8 +414,13 @@ blocks:
 
 - id: flow-arrow-horizontal
   name: 가로 흐름 화살표
+  category: visuals
   template: blocks/visuals/flow-arrow-horizontal.html
   height_cost: compact
+  min_height_px: 50
+  relation_types: [sequence]
+  min_items: 2
+  max_items: 6
   visual: SVG. 색상 둥근 캡슐이 가로 나열 + 사이 화살표. 컴팩트. 각 캡슐 120px 폭.
   when: '명확한 시간 순서 또는 인과 흐름이 있을 때만 사용. A→B→C 순서가 핵심. 예: GIS→SPCC→토공→BIM (기술 발전 순서). ★ 각 라벨은 8자 이내로 짧아야 함(120px 캡슐 안에 들어가야 함).'
   not_for: '독립 사례/증거 나열(순서 없음) → dark-bullet-list 또는 card-icon-desc. 정책 문서 나열 → dark-bullet-list. 각 단계에 설명 필요 → process-horizontal. 라벨이 길면(8자 초과) → process-horizontal 또는 card-numbered.'
@@ -325,8 +435,13 @@ blocks:
 
 - id: keyword-circle-row
   name: 키워드 원형 행
+  category: visuals
   template: blocks/visuals/keyword-circle-row.html
   height_cost: medium
+  min_height_px: 120
+  relation_types: [hierarchy]
+  min_items: 2
+  max_items: 5
   visual: SVG 그라데이션 원 안에 큰 글자(G,S,I,M 등 약어) + 아래 라벨 + 설명.
   when: '약어 풀이. 핵심 키워드를 원형으로 시각 강조. 예: G(Geographic) + S(Structure) + I(Information) + M(Model).'
   not_for: '아이콘+설명 → card-icon-desc. 용어 정의(문장형) → card-numbered. 약어가 아닌 일반 텍스트 → 사용 금지.'
@@ -345,8 +460,11 @@ blocks:
 # ═══════════════════════════════════════
 - id: quote-big-mark
   name: 큰따옴표 인용
+  category: emphasis
   template: blocks/emphasis/quote-big-mark.html
   height_cost: medium
+  min_height_px: 80
+  relation_types: []
   visual: 좌상단 ❝ + 우하단 ❞ 큰따옴표 장식. 연한 배경 박스 + 인용문 + 우측 출처.
   when: '임팩트 있는 인용문. 문제 제기를 인용 형태로 강조. 출처가 있는 인용.'
   not_for: '짧은 질문(1~2줄) → quote-question. 결론 한 줄 강조 → banner-gradient. 불릿 나열 → dark-bullet-list.'
@@ -360,8 +478,11 @@ blocks:
 
 - id: quote-question
   name: 질문형 강조
+  category: emphasis
   template: blocks/emphasis/quote-question.html
   height_cost: medium
+  min_height_px: 80
+  relation_types: []
   visual: 밝은 파란 배경 + 파란 테두리 + 큰 질문 텍스트(22px) + 부연 설명.
   when: '독자에게 질문을 던져 문제 인식을 유도. 전환점. 예: "지금의 방식으로도 가능할까?"'
   not_for: '인용(출처 있음) → quote-big-mark. 결론 선언 → banner-gradient. 경고/문제 → callout-warning.'
@@ -375,8 +496,18 @@ blocks:
 
 - id: comparison-2col
   name: 2단 병렬 비교
+  category: emphasis
   template: blocks/emphasis/comparison-2col.html
   height_cost: medium
+  min_height_px: 80
+  relation_types: [comparison]
+  variants:
+    - id: default
+      description: 좌우 2단 텍스트 비교 (기본)
+    - id: cards-in-container
+      description: 큰 박스 안에 카드 N개 (포함 관계 시각화, DX⊃BIM)
+      template: blocks/emphasis/comparison-2col--cards-in-container.html
+      when: "hierarchy/inclusion — A 안에 B,C,D가 포함됨을 보여줄 때. 포함 관계 시각화"
   visual: 좌우 2단. 좌 파란 헤더(밑줄) + 우 빨간 헤더(밑줄). 중앙 구분선. 서브타이틀+본문.
   when: 'A vs B 간단 비교. 2~3개 항목을 좌우로 대비. 장단점, Before/After 등 대비 구조. 예: BIM(하위기술) vs DX(상위개념).'
   not_for: '다항목 표(5행+) → compare-3col-badge. 결론 한 줄 강조 → banner-gradient. 핵심 메시지 선언 → banner-gradient. footer에서 결론 강조용으로 쓰지 마라.'
@@ -387,8 +518,11 @@ blocks:
 
 - id: banner-gradient
   name: 그라데이션 배너
+  category: emphasis
   template: blocks/emphasis/banner-gradient.html
   height_cost: compact
+  min_height_px: 40
+  relation_types: []
   visual: 전체 너비 파란 그라데이션 배경(둥근 모서리 8px) + 중앙 흰색 굵은 텍스트(16px) + 선택적 서브텍스트.
   when: '★ 결론 강조에 가장 적합. 핵심 메시지 한 줄 선언. footer 배치에 최적(compact, 50~60px). 페이지의 "기억해야 할 단 하나의 문장". 예: "BIM은 DX의 기초가 되는 일부분이다. DX ≠ BIM"'
   not_for: '인용(출처) → quote-big-mark. 긴 설명(3줄+) → callout-solution. A vs B 비교 → comparison-2col.'
@@ -402,10 +536,22 @@ blocks:
 
 - id: dark-bullet-list
   name: 다크 배경 불릿
+  category: emphasis
   template: blocks/emphasis/dark-bullet-list.html
   height_cost: medium
+  min_height_px: 80
+  relation_types: [cause_effect]
+  min_items: 2
+  max_items: 5
+  variants:
+    - id: default
+      description: 다크 배경 + 불릿 나열 (기본)
+    - id: before-after
+      description: Before→After 2열 구조 (프로세스 변화, 전환)
+      template: blocks/emphasis/dark-bullet-list--before-after.html
+      when: "기존 방식 → 새 방식으로의 전환/변화를 보여줄 때. 각 항목이 before/after 쌍일 때"
   visual: 짙은 남색 배경 + 파란 제목 + 흰 텍스트 불릿. 파란 불릿 마커. 시각적 무게감.
-  when: '★ 독립적인 사례/증거/포인트를 나열할 때 적합. 순서 없는 항목을 강조하며 나열. 정책 문서 사례, 근거 자료 나열. 예: 혼용 사례 3건을 각각 독립적으로 제시. 핵심 포인트를 짙은 배경 위에 강조.'
+  when: '★ 독립적인 사례/증거/포인트를 나열할 때 적합. 순서 없는 항목을 강조하며 나열. 정책 문서 사례, 근거 자료 나열.'
   not_for: '밝은 배경 → card-icon-desc 또는 card-numbered. 순서가 있는 단계 → card-numbered 또는 process-horizontal. 시각화(다이어그램) → venn-diagram.'
   purpose_fit: [근거사례, 문제제기, 핵심전달]
   slots:
@@ -418,8 +564,11 @@ blocks:
 
 - id: highlight-strip
   name: 강조 분류 스트립
+  category: emphasis
   template: blocks/emphasis/highlight-strip.html
   height_cost: compact
+  min_height_px: 35
+  relation_types: []
   visual: 가로 색상 구간들. 각 구간에 흰 라벨. 카테고리 색상 분류 바.
   when: '카테고리별 색상 분류를 한 줄로. 예: 상용(회색) | 3rd Party(파랑) | 전문SW(빨강).'
   not_for: '탭 전환 → tab-label-row. 결론 강조 → banner-gradient. 독립 항목 나열 → dark-bullet-list.'
@@ -433,8 +582,11 @@ blocks:
 
 - id: callout-solution
   name: 솔루션 콜아웃
+  category: emphasis
   template: blocks/emphasis/callout-solution.html
   height_cost: medium
+  min_height_px: 80
+  relation_types: [cause_effect]
   visual: 밝은 파란 배경 + 파란 테두리 + 아이콘 + 파란 제목 + 설명 + 출처.
   when: '핵심 해결책, 솔루션, 방향성을 강조. 예: "💡 Solution 제시 포인트".'
   not_for: '경고/문제 → callout-warning. 인용 → quote-big-mark. 결론 한 줄 → banner-gradient.'
@@ -448,10 +600,13 @@ blocks:
 
 - id: callout-warning
   name: 경고 콜아웃
+  category: emphasis
   template: blocks/emphasis/callout-warning.html
   height_cost: medium
+  min_height_px: 80
+  relation_types: [cause_effect]
   visual: 연한 빨간 배경 + 빨간 테두리 + 아이콘 + 빨간 제목 + 진한 빨간 설명.
-  when: '문제점 지적, 잘못된 인식 경고, 주의사항. 문제 제기 purpose에 적합. 예: "⚠️ 현재 접근 방식의 한계". 잘못된 관행/오해를 명확히 지적할 때.'
+  when: '문제점 지적, 잘못된 인식 경고, 주의사항. 문제 제기 purpose에 적합. 예: "⚠️ 현재 접근 방식의 한계".'
   not_for: '해결책 → callout-solution. 인용 → quote-big-mark. 결론 → banner-gradient.'
   purpose_fit: [문제제기]
   slots:
@@ -460,8 +615,11 @@ blocks:
 
 - id: tab-label-row
   name: 탭 라벨 행
+  category: emphasis
   template: blocks/emphasis/tab-label-row.html
   height_cost: compact
+  min_height_px: 35
+  relation_types: []
   visual: 가로 탭 버튼. 선택됨=색상 배경+흰 텍스트, 나머지=회색. 밝은 바탕.
   when: '카테고리 전환/분류 표시. 현재 선택된 항목 강조. 예: 제조 | 건축 | [인프라/토목].'
   not_for: '색상 바 → highlight-strip. 실제 클릭 전환 미지원.'
@@ -475,8 +633,11 @@ blocks:
 
 - id: divider-text
   name: 텍스트 구분선
+  category: emphasis
   template: blocks/emphasis/divider-text.html
   height_cost: compact
+  min_height_px: 25
+  relation_types: []
   visual: 좌우 가는 회색 선 + 중앙 작은 회색 텍스트(13px bold). 시각적 휴식점.
   when: 'sidebar 영역의 섹션 라벨. 주제 전환점에 가벼운 구분. 예: ── 용어 정의 ──'
   not_for: '강한 구분 → section-header-bar. 결론 → banner-gradient. body 영역 메인 제목 → topic 계열.'
@@ -490,8 +651,11 @@ blocks:
 # ═══════════════════════════════════════
 - id: image-row-2col
   name: 이미지 2열
+  category: media
   template: blocks/media/image-row-2col.html
   height_cost: large
+  min_height_px: 200
+  relation_types: []
   visual: 이미지 2장 나란히. 각 캡션 선택.
   when: '시공 사진 2장 나란히, 현장 비교.'
   not_for: '4장 → image-grid-2x2. 이미지+텍스트 → image-side-text. 1장 → image-full-caption.'
@@ -502,8 +666,11 @@ blocks:
 
 - id: image-grid-2x2
   name: 이미지 2x2 그리드
+  category: media
   template: blocks/media/image-grid-2x2.html
   height_cost: large
+  min_height_px: 350
+  relation_types: []
   visual: 이미지 4장 2x2 격자. 각 캡션 선택.
   when: '현장 사진 4장, 4개 관점 이미지.'
   not_for: '2장 → image-row-2col. 이미지+텍스트 → image-side-text.'
@@ -514,8 +681,11 @@ blocks:
 
 - id: image-side-text
   name: 이미지+텍스트 가로
+  category: media
   template: blocks/media/image-side-text.html
   height_cost: medium
+  min_height_px: 150
+  relation_types: []
   visual: 좌측 이미지(320px 고정) + 우측 제목+설명+불릿. 가로 배치.
   when: '이미지에 대한 설명. 제품/시스템 소개. 다이어그램+해설.'
   not_for: '이미지만 → image-row-2col. 여러 장 → image-grid-2x2.'
@@ -526,8 +696,11 @@ blocks:
 
 - id: image-full-caption
   name: 전체 너비 이미지
+  category: media
   template: blocks/media/image-full-caption.html
   height_cost: large
+  min_height_px: 200
+  relation_types: []
   visual: 전체 너비 이미지 1장(둥근 모서리) + 하단 캡션.
   when: '핵심 도표, 대형 다이어그램, 전경 사진을 크게.'
   not_for: '2장+ → image-row-2col/image-grid-2x2. 이미지+텍스트 → image-side-text.'
@@ -538,8 +711,11 @@ blocks:
 
 - id: image-before-after
   name: Before/After 이미지
+  category: media
   template: blocks/media/image-before-after.html
   height_cost: large
+  min_height_px: 200
+  relation_types: [comparison]
   visual: 좌 Before(회색 라벨) + → 화살표(파란) + 우 After(파란 라벨). 각 이미지 180px.
   when: '변화 전후 비교. 디지털 전환 전후, 공정 개선 전후.'
   not_for: '이미지 단순 나열 → image-row-2col. 텍스트 비교 → comparison-2col.'