C.E.L_Slide_test2/templates/catalog.yaml

version: '4.0'
blocks:
- 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: 전체 너비 배경 이미지 위에 흰색 영문 소제목 + 한글 대제목. 고정 높이 ~500px. 페이지 첫 화면 히어로.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 페이지/섹션의 맨 첫 화면 (히어로 영역)
    - 배경 이미지 위에 제목만 (본문 없음)
    - 한글 대제목(1~2줄) + 선택적 영문 소제목
    - 높이 300px 이상 차지 가능
  when: 페이지 첫 화면에 배경 이미지 위 제목을 크게 선언할 때. 본문 없이 제목만.
  not_for: |
    - 슬라이드 내부 소제목 → topic-left-right 또는 topic-center
    - 배경 이미지 없이 텍스트만 → topic-center
    - 높이 200px 이하 → section-header-bar
  purpose_fit: []
  slots:
    required:
    - title_ko
    optional:
    - title_en
    - breadcrumb
    - bg_image
  schema:
    title_ko:
      max_lines: 2
      font_size: 35
      ref_chars:
        body: 20
      note: 35px bold white, 대제목
    title_en:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 30
      note: 15px white, 영문 소제목
    breadcrumb:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 40
      note: 13px, 상단 경로
  padding_overhead_px: 0
  padding_h_px: 60
- 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).
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 같은 페이지 안에서 주제 전환 구분선
    - 제목(1줄) + 선택적 서브타이틀
    - 높이 40~50px, 최소 공간 사용
    - 설명/본문 없이 제목만
  when: 페이지 내 섹션 전환 구분. 제목만. 컴팩트.
  not_for: |
    - 히어로 타이틀 → section-title-with-bg
    - 좌:제목 우:설명 → topic-left-right
    - 텍스트 구분선(―) → divider-text
  purpose_fit: []
  slots:
    required:
    - title
    optional:
    - subtitle
  schema:
    title:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 25
        sidebar: 20
      note: 18px bold white, 중앙정렬
    subtitle:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 40
        sidebar: 30
      note: 13px, 1줄
  padding_overhead_px: 28
  padding_h_px: 32
- id: topic-left-right
  name: 좌우 꼭지 헤더
  category: headers
  template: blocks/headers/topic-left-right.html
  height_cost: compact
  min_height_px: 50
  relation_types: []
  visual: 좌측 고정폭 파란 제목 + 우측 본문 설명. 가로 2단 배치.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 꼭지 제목이 짧은 키워드(10자 이내)이고 우측에 설명이 붙는 구조
    - 좌=핵심 주장/키워드, 우=근거/설명 대비
    - 번호 없음 (번호 있으면 topic-numbered)
    - 중앙 정렬 아님 (중앙이면 topic-center)
    예: 좌"용어의 혼용" → 우"DX와 BIM이 혼용되고 있다..."
  when: 짧은 키워드 제목 + 우측 설명의 좌우 대비 구조. 문제 제기 도입부.
  not_for: |
    - 중앙 정렬 대제목 → topic-center
    - 번호 순서 → topic-numbered
    - 페이지 히어로 → section-title-with-bg
  purpose_fit:
  - 문제제기
  slots:
    required:
    - title
    - description
    optional: []
  schema:
    title:
      max_lines: 2
      font_size: 24
      ref_chars:
        body: 20
      note: 24px bold, 240px 고정폭
    description:
      max_lines: 2
      font_size: 16
      ref_chars:
        body: 100
      note: 16px, 510px 너비
  padding_overhead_px: 24
  padding_h_px: 40
- id: topic-center
  name: 중앙 정렬 꼭지 헤더
  category: headers
  template: blocks/headers/topic-center.html
  height_cost: medium
  min_height_px: 60
  relation_types: []
  visual: 중앙 정렬 대제목 + 서브타이틀 + 설명. 단독 주제 선언.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 하나의 주제를 중앙에 크게 선언 (좌우 분리 없음)
    - 제목(1줄) + 선택적 서브타이틀 + 선택적 설명(1~3줄)
    - 번호/순서 없음, 좌우 대비 없음
    - sidebar 섹션 라벨로도 사용 가능
    예: "건설산업의 디지털 전환" + 서브: "DX Overview" + 설명 2줄
  when: 주제를 중앙 정렬로 단독 선언할 때. 좌우 분리/번호 불필요.
  not_for: |
    - 좌:제목 우:설명 대비 → topic-left-right
    - 번호 순서 → topic-numbered
    - 페이지 히어로(배경 이미지) → section-title-with-bg
  purpose_fit: []
  slots:
    required:
    - title
    optional:
    - subtitle
    - description
  schema:
    title:
      max_lines: 1
      font_size: 26
      ref_chars:
        body: 25
        sidebar: 20
      note: 26px bold
    subtitle:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 40
        sidebar: 30
      note: 14px accent
    description:
      max_lines: 3
      font_size: 16
      ref_chars:
        body: 120
        sidebar: 80
      note: 16px
  padding_overhead_px: 40
  padding_h_px: 0
- id: topic-numbered
  name: 번호 꼭지 헤더
  category: headers
  template: blocks/headers/topic-numbered.html
  height_cost: compact
  min_height_px: 45
  relation_types: []
  visual: 원형 번호 뱃지 + 제목 + 구분선 + 설명. 세로 배치. 섹션 시작 헤더.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 꼭지/섹션 시작에 번호(1, 2, 3)가 필요
    - 번호 + 제목(1줄) + 선택적 설명(1~2줄)
    - 섹션 헤더 역할 (본문 블록이 이 아래에 옴)
    - 번호가 순서/단계를 의미
    예: ① 건설산업 DX → 설명 1줄 (이 아래에 본문 블록들이 배치됨)
  when: 순서가 있는 꼭지의 섹션 시작 헤더. 번호+제목+설명.
  not_for: |
    - 순서 없는 꼭지 → topic-left-right 또는 topic-center
    - 카드 안의 번호 나열 → card-numbered
    - 프로세스 흐름도 → process-horizontal
  purpose_fit: []
  slots:
    required:
    - number
    - title
    optional:
    - description
    - color
  schema:
    number:
      max_lines: 1
      font_size: 16
      ref_chars:
        body: 2
      note: 16px, 36px 원 안의 번호
    title:
      max_lines: 1
      font_size: 20
      ref_chars:
        body: 25
        sidebar: 18
      note: 20px bold
    description:
      max_lines: 2
      font_size: 15
      ref_chars:
        body: 80
        sidebar: 50
      note: 15px, line-height 1.7
  padding_overhead_px: 28
  padding_h_px: 40
- 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: N열 카드. 각 카드 = 상단 이미지(160px) + 색상 밑줄 제목 + 불릿 목록.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~3개 항목, 각 항목에 대표 이미지(사진/도표)가 있음
    - 이미지 아래에 제목(1줄) + 불릿 리스트(3~4개)
    - 이미지가 콘텐츠의 핵심 (텍스트만으로는 부족)
    - 각 항목이 독립적이고 동등한 비중
    예: 설계단계(3D모델 사진) / 시공단계(현장 사진) / 유지관리(자산 사진)
  when: 각 항목에 대표 이미지가 있고, 이미지 아래 제목+불릿으로 설명할 때. 2~3개 동등 항목.
  not_for: |
    - 이미지 없이 텍스트만 → card-icon-desc
    - 이미지 위에 어두운 오버레이+흰 텍스트 → card-dark-overlay
    - 좌상단 태그 분류 → card-tag-image
    - 원형 이미지 → card-image-round
  purpose_fit:
  - 핵심전달
  - 근거사례
  slots:
    required:
    - cards[]
    optional: []
  schema:
    card_title:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 15
      note: 14px bold, 색상 밑줄
    card_title_en:
      max_lines: 1
      font_size: 12
      ref_chars:
        body: 20
      note: 12px, 영문 부제
    bullet_item:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 40
      note: 13px, line-height 1.7
    max_bullets_per_card:
      body: 4
      note: 카드당 불릿 수
    source:
      max_lines: 1
      font_size: 11
      ref_chars:
        body: 25
      note: 11px, 하단 출처
    max_cards:
      body: 3
      note: 카드 수
  padding_overhead_px: 16
  padding_h_px: 0
- 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: N열 카드. 각 카드 = 다크 배경 이미지 + gradient 오버레이 + 흰색 제목 + 짧은 설명. 시각적 임팩트 중심.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 3~5개 키워드/개념을 시각적으로 강렬하게 표현
    - 각 항목에 배경 이미지(사진) + 짧은 제목(1줄) + 설명(1~2줄 이내)
    - 텍스트가 짧고 이미지 분위기가 중요 (정보 전달 < 시각 임팩트)
    - 각 항목에 불릿 리스트 불필요
    예: [협업지원(회의사진), 오류감소(모델사진), 생산성향상(현장사진)]
  when: 키워드를 배경 이미지 위에 시각적으로 강조할 때. 설명 2줄 이내. 분위기/인상 전달 목적.
  not_for: |
    - 설명이 3줄+ → card-icon-desc
    - 이미지를 크게 보여줘야 함 (이미지가 콘텐츠) → card-image-3col
    - 불릿 리스트 필요 → card-image-3col
    - 이미지 없이 텍스트만 → card-icon-desc
  purpose_fit:
  - 핵심전달
  - 구조시각화
  zone: full-width-only
  slots:
    required:
    - cards[]
    optional: []
  schema:
    card_title:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 15
      note: 18px bold white, 1줄
    card_description:
      max_lines: 2
      font_size: 12
      ref_chars:
        body: 30
      note: 12px white, 1~2줄
    max_cards:
      body: 5
      note: 카드 수
  padding_overhead_px: 32
  padding_h_px: 40
- 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: N열 카드. 각 카드 = 좌상단 색상 태그 뱃지 + 이미지 + 제목 + 설명.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~3개 항목, 각 항목에 카테고리 태그(짧은 라벨, 8자 이내)가 있음
    - 태그 색상으로 카테고리를 시각적으로 구분하는 것이 핵심
    - 각 항목에 이미지 + 제목(1줄) + 설명(1~2줄)
    - 태그 없이는 항목 분류가 불명확한 경우
    예: [제조업(파란태그)/사진/설명] | [건축(초록태그)/사진/설명] | [인프라(빨간태그)/사진/설명]
  when: 각 항목에 카테고리 태그 라벨이 있고, 태그 색상으로 분류를 구분할 때. 이미지+제목+설명 구조.
  not_for: |
    - 태그 불필요, 이미지+불릿 → card-image-3col
    - 이미지 없이 텍스트만 → card-icon-desc
    - 어두운 분위기 강조 → card-dark-overlay
  purpose_fit:
  - 핵심전달
  slots:
    required:
    - cards[]
    optional: []
  schema:
    tag:
      max_lines: 1
      font_size: 12
      ref_chars:
        body: 8
      note: 12px bold white, 좌상단 태그
    card_title:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 15
      note: 14px bold
    card_description:
      max_lines: 2
      font_size: 13
      ref_chars:
        body: 40
      note: 13px
    max_cards:
      body: 3
      note: 카드 수
  padding_overhead_px: 14
  padding_h_px: 0
- 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열 그리드. 중앙 이모지 아이콘 + 제목 + 설명. 밝은 배경.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~4개 독립 개념/특성/키워드를 나열
    - 각 항목에 이모지 아이콘(1글자) + 제목(1줄) + 설명(1~3줄)
    - 실제 사진/이미지 없이 아이콘으로 직관적 구분
    - 항목 간 순서 없음 (순서 있으면 card-numbered)
    - 설명이 필요 (키워드만이면 card-dark-overlay)
    예: [기술기반/설명3줄] | [S/W역량/설명3줄] | [여건조성/설명3줄]
  when: 이미지 없이 이모지 아이콘+제목+설명으로 독립 개념을 나열할 때. 순서 없는 2~4개 항목.
  not_for: |
    - 실제 사진 필요 → card-image-3col
    - 순서 번호 필요 → card-numbered
    - 수치 데이터 → card-stat-number
    - 키워드만(설명 불필요) → card-dark-overlay
  purpose_fit:
  - 핵심전달
  - 근거사례
  - 구조시각화
  zone: full-width-only
  slots:
    required:
    - cards[]
    optional: []
  schema:
    card_title:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 10
      note: 15px bold, 1줄
    card_description:
      max_lines: 3
      font_size: 13
      ref_chars:
        body: 60
      note: 13px, 3줄 이내
    max_cards:
      body: 4
      note: 카드 수 (3열 grid)
  padding_overhead_px: 40
  padding_h_px: 32
- 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열 카드. 각 카드 = 색상 헤더바(제목+서브) + 선택적 이미지 + 불릿 목록.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 정확히 3개 대상을 각각 독립 카드로 비교
    - 각 대상에 색상 구분 헤더(제목+서브타이틀) + 선택적 이미지 + 불릿 리스트
    - 항목 간 행별 대조가 아니라, 각 카드가 독립적으로 내용 서술
    - 카드별 색상으로 카테고리 구분
    예: [BIM(파란)/불릿3개] | [DfMA(초록)/불릿3개] | [DX(주황)/불릿3개]

  when: '3개 카테고리를 비교할 때. 각 카테고리에 다른 색상 헤더. 예: 상용SW(회색) vs 3rd Party(파랑) vs 전문SW(빨강).'
  not_for: 2개 비교 → compare-pill-pair + compare-2col-split. 다항목 표 → compare-3col-badge.
  purpose_fit:
  - 핵심전달
  zone: full-width-only
  slots:
    required:
    - cards[]
    optional: []
  schema:
    card_title:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 15
      note: 15px bold white, 1줄
    bullet_item:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 40
      note: 13px, 불릿 1개당
    max_bullets_per_card:
      body: 5
      note: 카드당 불릿 수
  padding_overhead_px: 26
  padding_h_px: 0
- 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: 세로 타임라인. 좌측 색상 마커(단계명) + 우측 콘텐츠 박스(제목+이미지+설명). 단계 간 연결선.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~4개 단계가 세로로 순서대로 진행
    - 각 단계에 단계명(좌) + 제목 + 선택적 이미지 + 설명(2~3줄)
    - 단계 간 연결선이 시각적으로 필요
    - 각 단계의 설명이 상세함 (간단하면 process-horizontal)
    예: 설계단계(이미지+설명) → 시공단계(이미지+설명) → 운영단계(이미지+설명)
  when: 생애주기/프로세스를 세로 타임라인으로 상세 설명할 때. 각 단계에 이미지+설명.
  not_for: |
    - 간단한 가로 흐름 → process-horizontal 또는 flow-arrow-horizontal
    - 높이 예산 부족 → card-numbered
    - 순서 없는 독립 항목 → card-icon-desc
  purpose_fit:
  - 핵심전달
  - 구조시각화
  slots:
    required:
    - steps[]
    optional: []
  schema:
    step_title:
      max_lines: 1
      font_size: 16
      ref_chars:
        body: 15
        sidebar: 12
      note: 16px bold
    step_description:
      max_lines: 3
      font_size: 14
      ref_chars:
        body: 60
        sidebar: 40
      note: 14px, 2~3줄
    max_steps:
      body: 4
      sidebar: 3
      note: 단계 수
  padding_overhead_px: 24
  padding_h_px: 0
- 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 원, 테두리+그림자) + 제목 + 설명. 중앙 정렬.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~3개 항목, 각 항목의 대표 이미지가 원형(인물/아바타/로고)
    - 이미지 아래 짧은 제목(1줄) + 설명(1~2줄)
    - 중앙 정렬, 프로필/비전/가치 표현
    예: [CEO 사진(원형)/이름/역할] | [CTO 사진(원형)/이름/역할]
  when: 원형 이미지(인물, 아바타, 로고)가 핵심이고 짧은 제목+설명을 아래 배치할 때.
  not_for: |
    - 사각형 이미지 → card-image-3col
    - 이미지 없이 아이콘만 → card-icon-desc
    - 배경 이미지+오버레이 → card-dark-overlay
  purpose_fit: []
  slots:
    required:
    - cards[]
    optional: []
  schema:
    card_title:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 12
      note: 15px bold, 중앙정렬
    card_description:
      max_lines: 2
      font_size: 13
      ref_chars:
        body: 40
      note: 13px, max-width 200px
    max_cards:
      body: 3
      note: 카드 수
  padding_overhead_px: 12
  padding_h_px: 0
- 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열. 매우 큰 숫자 + 단위 + 라벨 + 설명. 숫자 중심 시각화.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 콘텐츠의 핵심이 숫자(KPI, 성과, 통계, 비율)
    - 2~4개 수치 항목, 각 항목 = 숫자 + 단위(선택) + 라벨(1줄) + 설명(선택)
    - 숫자 자체가 메시지 (30%, 220명, 5배 등)
    - 텍스트 설명이 주가 아니라 숫자가 주
    예: [30%/절감/비용] | [220명/운영/IT+CIVIL] | [5배/생산성/향상]
  when: 숫자가 핵심 메시지인 데이터. KPI, 달성률, 비용 절감, 인원 규모 등.
  not_for: |
    - 숫자가 아닌 텍스트 항목 → card-icon-desc
    - 순서 번호(1,2,3) → card-numbered (순서 번호≠통계 숫자)
    - 비교 구조 → compare-vs-rows
  purpose_fit:
  - 핵심전달
  - 근거사례
  slots:
    required:
    - stats[]
    optional: []
  schema:
    number:
      max_lines: 1
      font_size: 36
      ref_chars:
        body: 5
      note: 36px bold 색상, 핵심 숫자
    unit:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 5
      note: 18px, 숫자 옆 단위
    label:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 10
      note: 14px bold, 항목명
    description:
      max_lines: 1
      font_size: 12
      ref_chars:
        body: 20
      note: 12px, 부연 설명
    max_stats:
      body: 4
      note: 통계 항목 수
  padding_overhead_px: 40
  padding_h_px: 24
- 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: 세로 나열. 색상 원형 번호(1,2,3) + 제목 + 설명.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 1~5개 항목이 번호 순서로 나열됨
    - 각 항목에 제목(1줄) + 설명(1~3줄)
    - 번호가 의미 있음 (순서, 우선순위, 단계)
    - 세로로 쌓이는 리스트 (가로 그리드 아님)
    - 이미지/아이콘 없이 번호가 구분자
    예: 1.건설산업DX → 설명 | 2.BIM기술 → 설명 | 3.수행체계 → 설명
  when: 번호가 의미 있는 항목 나열. 순서가 있는 단계(1→2→3)이거나, 번호로 구분되는 정의 목록. sidebar 용어 정의에 적합(1.건설산업
    2.BIM 3.DX). 조건/요구사항 나열.
  not_for: 순서 없는 독립 항목 → card-icon-desc. 이미지 포함 단계 → card-step-vertical. 가로 흐름 → process-horizontal.
  purpose_fit:
  - 용어정의
  - 핵심전달
  slots:
    required:
    - items[]
    optional: []
  schema:
    item_title:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 15
        sidebar: 12
      note: 15px bold
    item_description:
      max_lines: 2
      font_size: 13
      ref_chars:
        body: 60
        sidebar: 40
      note: 13px
    max_items:
      body: 5
      sidebar: 4
      note: 항목 수
  padding_overhead_px: 22
  padding_h_px: 32
- id: cycle-orbit
  name: 순환 궤도 다이어그램
  category: visuals
  template: blocks/visuals/cycle-orbit.html
  height_cost: large
  min_height_px: 200
  relation_types:
  - flow
  - definition
  min_items: 3
  max_items: 5
  visual: >
    타원 궤도(SVG ellipse) 위에 N개 노드(아이콘 원+라벨)가 순환 배치.
    궤도 위 화살표로 순환 방향 표시. 각 노드에 설명 제목+불릿.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 3~5개 요소가 순환 관계 (A→B→C→A)
    - 각 요소에 아이콘 + 라벨 + 선택적 설명/불릿
    - 방향성이 있는 순환 (화살표)
    - 단방향이 아닌 순환/피드백 루프
    예: 설계→시공→운영→피드백→설계 (순환)
  when: 요소들이 순환 관계(피드백 루프, 생태계)일 때. 3~5개 노드가 순환.
  not_for: |
    - 단방향 흐름 → process-horizontal
    - 겹침/교집합 → venn-diagram
    - 3원 교차 → cycle-3way-intersect
  purpose_fit:
  - 구조시각화
  zone: full-width-only
  slots:
    required:
    - title
    - nodes[]
    optional:
    - nodes[].icon
    - nodes[].desc_title
    - nodes[].bullets[]
  schema:
    title:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 20
      note: "18px black/900, 중앙, 하단 밑줄"
    node_label:
      max_lines: 2
      font_size: 14
      ref_chars:
        body: 6
      note: "14px black/900, 아이콘 아래"
    desc_title:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 20
      note: "13px bold"
    bullet:
      max_lines: 2
      font_size: 11
      ref_chars:
        body: 15
      note: "11px medium gray"
  padding_overhead_px: 30
  padding_h_px: 0
- id: checklist-dark
  name: 체크리스트 다크
  category: emphasis
  template: blocks/emphasis/checklist-dark.html
  height_cost: medium
  min_height_px: 100
  relation_types:
  - definition
  min_items: 2
  max_items: 8
  visual: 다크 배경 + 체크 아이콘 + 제목:설명 한 줄 구조. N행 반복.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~8개 항목, 각 항목이 "제목: 설명" 구조 (콜론으로 분리)
    - 체크리스트/원칙/요건 형태
    - 어두운 배경에 체크 아이콘
    - 각 항목의 제목이 짧고(15자), 설명이 1~2줄
    - dark-bullet-list와 차이: 이 블록은 제목:설명 분리, dark-bullet-list는 불릿만
    예: ☑ 기반지식: 건설산업 깊은 이해 | ☑ SW기술: 디지털 역량 확보 | ...
  when: 핵심 원칙/요건을 "제목:설명" 체크리스트로 나열할 때.
  not_for: |
    - 제목:설명 분리 없이 불릿만 → dark-bullet-list
    - 단일 항목 강조 → callout-solution
    - 밝은 배경 → card-numbered
  purpose_fit:
  - 핵심전달
  slots:
    required:
    - items[]
    optional: []
  schema:
    item_title:
      max_lines: 1
      font_size: 16
      ref_chars:
        body: 15
      note: "16px bold white"
    item_description:
      max_lines: 2
      font_size: 16
      ref_chars:
        body: 50
      note: "16px medium, rgba(255,255,255,0.8)"
  padding_overhead_px: 40
  padding_h_px: 48
- id: system-2col-center
  name: 중앙 라벨 2열 시스템 구성
  category: cards
  template: blocks/cards/system-2col-center.html
  height_cost: xlarge
  min_height_px: 250
  relation_types:
  - comparison
  - definition
  min_items: 2
  max_items: 14
  visual: 좌 항목 리스트 + 중앙 원형 라벨 + 우 항목 리스트. 3열 Grid.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 하나의 시스템/플랫폼을 중심으로 좌/우에 구성요소 나열
    - 중앙에 시스템 이름(원형 라벨), 좌=한쪽 카테고리, 우=다른 카테고리
    - 좌/우 각각 2~7개 항목, 각 항목에 아이콘+제목+설명
    - 좌/우가 대비 관계(H/W vs S/W, 입력 vs 출력)
    예: 좌=H/W[서버,워크스테이션,모니터] | 중앙=EG-BIM | 우=S/W[Modeler,GIS,Simulation]
  when: 시스템 구성을 중앙 라벨 기준 좌/우로 나열할 때. 좌/우 카테고리가 다르고 중앙 시스템이 연결.
  not_for: |
    - 단순 좌/우 텍스트 비교 → comparison-2col
    - 행별 대조 → compare-2col-split
    - 카테고리 리스트 + 번호 이슈 → split-panel-numbered
  purpose_fit:
  - 구조시각화
  - 핵심전달
  zone: full-width-only
  slots:
    required:
    - center_title
    - left_label
    - right_label
    - left_items[]
    - right_items[]
    optional:
    - center_sub
    - left_color
    - right_color
    - items[].icon
  schema:
    center_title:
      max_lines: 2
      font_size: 18
      ref_chars:
        body: 8
      note: "18px black/900, 원형 안"
    tab_label:
      max_lines: 1
      font_size: 20
      ref_chars:
        body: 8
      note: "20px bold white, 색상 탭"
    item_title:
      max_lines: 1
      font_size: 16
      ref_chars:
        body: 20
      note: "16px bold"
    item_body:
      max_lines: 3
      font_size: 14
      ref_chars:
        body: 80
      note: "14px medium gray"
  padding_overhead_px: 44
  padding_h_px: 24
- id: category-strip-table
  name: 카테고리 컬러 스트립 테이블
  category: cards
  template: blocks/cards/category-strip-table.html
  height_cost: large
  min_height_px: 180
  relation_types:
  - definition
  - comparison
  min_items: 2
  max_items: 5
  visual: N열 다크 배경 테이블. 좌측 세로 색상 바(카테고리 라벨) + 우측 제목+본문 M행. 구분선.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~5개 카테고리, 각 카테고리에 2~4개 하위 항목(제목+본문)
    - 각 카테고리를 세로 색상 바(2~4글자 세로 라벨)로 구분
    - 어두운 배경, 표 형식 (줄 단위 구분)
    - 카테고리 라벨이 세로쓰기로 표시됨
    예: 기술[DB구축/SW개발/자동화] | 사람[교육/역량/조직] | 자연[환경/지형]
  when: 카테고리별 하위 항목을 세로 색상 바로 구분하며 나열할 때. 다크 배경 표 구조.
  not_for: |
    - 단순 데이터 테이블 → table-simple-striped
    - 밝은 배경 아이콘 카드 → card-icon-desc
    - 수평 색상 분류 바 → highlight-strip
  purpose_fit:
  - 핵심전달
  - 구조시각화
  zone: full-width-only
  slots:
    required:
    - columns[]
    optional:
    - columns[].label
    - columns[].label_sub
    - columns[].color
  schema:
    column_label:
      max_lines: 2
      font_size: 20
      ref_chars:
        body: 4
      note: "20px bold white, 세로쓰기, 색상 바 위"
    row_title:
      max_lines: 2
      font_size: 18
      ref_chars:
        body: 20
      note: "18px bold white"
    row_body:
      max_lines: 3
      font_size: 14
      ref_chars:
        body: 60
      note: "14px medium, rgba(255,255,255,0.7)"
  padding_overhead_px: 24
  padding_h_px: 8
- id: hero-icon-cards
  name: 히어로 문구 + 아이콘 카드
  category: cards
  template: blocks/cards/hero-icon-cards.html
  height_cost: xlarge
  min_height_px: 280
  relation_types:
  - definition
  - flow
  min_items: 2
  max_items: 6
  visual: 상단 Hero 선언문 + 리본 배지 + 빨간 테두리 흰 박스 안 N열 아이콘 카드.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 상단에 핵심 선언문(1~2줄, 강조 키워드 포함)
    - 하단에 2~6개 키워드를 나란히 나열 (아이콘+제목+부제)
    - 리본 배지로 카드 영역의 주제를 명시 (예: "Solution 제작 목표")
    - 각 카드는 짧은 키워드(제목 15자) + 부제(10자)
    - 프레젠테이션형 시각 임팩트 필요
    예: 선언문="~목표를 달성한다" → 배지="Solution" → [품질/안전/생산성/소통/신뢰]
  when: 핵심 선언문 아래 N개 키워드를 배지+테두리 박스로 강렬하게 나열할 때.
  not_for: |
    - 선언문 없이 카드만 → card-icon-desc
    - 상세 설명(3줄+) → card-icon-desc
    - 비교 구조 → compare-2col-badge
    - 순서/단계 → process-horizontal
  purpose_fit:
  - 핵심전달
  zone: full-width-only
  slots:
    required:
    - statement
    - cards[]
    optional:
    - badge_title
    - ribbon_image
    - cards[].icon
    - cards[].subtitle
  schema:
    statement:
      max_lines: 2
      font_size: 28
      ref_chars:
        body: 60
      note: "28px bold white, 중앙, em=빨간 강조"
    badge_title:
      max_lines: 1
      font_size: 20
      ref_chars:
        body: 15
      note: "20px bold white, 3D 리본 위"
    card_title:
      max_lines: 2
      font_size: 20
      ref_chars:
        body: 15
      note: "20px black/900, 중앙정렬"
    card_subtitle:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 10
      note: "15px medium, 한국어 부제"
  padding_overhead_px: 80
  padding_h_px: 32
- id: compare-detail-gradient
  name: 그라디언트 상세 2열 비교
  category: cards
  template: blocks/cards/compare-detail-gradient.html
  height_cost: xlarge
  min_height_px: 300
  relation_types:
  - comparison
  - contrast
  - process
  min_items: 2
  max_items: 10
  visual: 좌/우 gradient 배경 2열. 비대칭 라운드 헤더. N개 섹션(소제목+불릿) 행 정렬.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 좌/우 두 카테고리에 각각 3~5개 하위 섹션
    - 각 섹션 = 소제목 + 불릿 리스트
    - 좌/우 섹션이 행 단위로 대응 (같은 높이에 정렬)
    - 선택적으로 As-Is → To-Be 수평 비교 포함
    - "과정의 혁신 vs 결과의 혁신" 같은 깊은 대비
    예: 좌"과정의 혁신"[프로세스/수행방식/도구] vs 우"결과의 혁신"[성과물/활용/관리]
  when: 두 카테고리를 섹션 단위로 상세 비교할 때. 각 카테고리에 3+개 하위 섹션. As-Is/To-Be 가능.
  not_for: |
    - 간단 비교(본문 짧음) → compare-2col-badge 또는 comparison-2col
    - 행별 카테고리 표 → compare-vs-rows
    - 표 형식 → compare-2col-split
  purpose_fit:
  - 비교대조
  - 구조시각화
  - 근거사례
  zone: full-width-only
  slots:
    required:
    - left_header
    - right_header
    - sections[]
    optional:
    - arrow_image
    - sections[].left.asis
    - sections[].left.tobe
  schema:
    left_header:
      max_lines: 1
      font_size: 26
      ref_chars:
        body: 20
      note: "26px black/900, 비대칭 라운드 바"
    right_header:
      max_lines: 1
      font_size: 26
      ref_chars:
        body: 20
      note: "26px black/900, 비대칭 라운드 바"
    section_title:
      max_lines: 2
      font_size: 18
      ref_chars:
        body: 30
      note: "18px/900, 좌=브라운 우=틸"
    section_body:
      max_lines: 4
      font_size: 14
      ref_chars:
        body: 120
      note: "14px/700, 불릿 구조"
  padding_overhead_px: 52
  padding_h_px: 0
- id: compare-2col-badge
  name: 배지 헤더 2열 비교
  category: cards
  template: blocks/cards/compare-2col-badge.html
  height_cost: large
  min_height_px: 200
  relation_types:
  - comparison
  - contrast
  visual: 상단 3D 리본 배지(gradient bar, 상위 주제 선언) + 아래 빨간 테두리 박스 안에 2열 비교. 좌/우 각각 대제목(22px)+본문. 중앙 구분선. 하단에 선택적 결론 문구.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - "상위 주제(배지)" + "A 정의/설명" vs "B 정의/설명" 구조
    - 상위 주제를 배지 바로 먼저 선언하고, 아래에서 좌/우 비교
    - 좌/우 각각 제목(1줄) + 본문(3~6줄)
    - 하단에 결론 한 줄 추가 가능
    예: 배지="정책 달성" → 좌"Engn. Solution: ~설명" vs 우"DfMA: ~설명"
  when: 상위 주제를 배지로 선언한 뒤 두 개념/전략의 정의를 본문으로 비교할 때. 각 측이 제목+본문 구조.
  not_for: |
    - 상위 주제 배지 불필요, 단순 좌/우 대비 → comparison-2col
    - 카테고리별 N행 비교 → compare-vs-rows
    - 행별 기준 라벨 표 → compare-2col-split
  purpose_fit:
  - 비교대조
  - 개념정의
  zone: full-width-only
  slots:
    required:
    - badge_title
    - left_title
    - left_body
    - right_title
    - right_body
    optional:
    - statement
    - left_color
    - right_color
  schema:
    badge_title:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 15
      note: 18px bold white, 배지 바
    left_title:
      max_lines: 1
      font_size: 22
      ref_chars:
        body: 15
      note: 22px black/900
    left_body:
      max_lines: 6
      font_size: 15
      ref_chars:
        body: 200
      note: 15px/500, 틸 색상
    right_title:
      max_lines: 1
      font_size: 22
      ref_chars:
        body: 15
      note: 22px black/900
    right_body:
      max_lines: 6
      font_size: 15
      ref_chars:
        body: 200
      note: 15px/500, 틸 색상
    statement:
      max_lines: 2
      font_size: 18
      ref_chars:
        body: 50
      note: 18px bold, 중앙정렬
  padding_overhead_px: 56
  padding_h_px: 32
- 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 배지 | 우. 행별 좌/우 값 대조.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - A와 B를 5~7행으로 대조하는 표 구조
    - 중앙에 VS 배지 (비교 기준 라벨 없이 좌/우 값만 대조)
    - 비교 기준 라벨이 필요하면 compare-2col-split
    - 카테고리 pill이 필요하면 compare-vs-rows
    예: A=BIM | VS | B=DX → [S/W항목, 프로세스항목, ...] 행별 대조
  when: 두 개념을 행별로 값 대조할 때. 비교 기준 라벨 없이 좌/우만. 5+행.
  not_for: |
    - 비교 기준 라벨 필요 → compare-2col-split
    - 카테고리 pill 비교 → compare-vs-rows
    - 간단 2~3항목 → comparison-2col
    - 범용 데이터 → table-simple-striped
  purpose_fit:
  - 핵심전달
  slots:
    required:
    - headers[]
    - rows[][]
    optional: []
  schema:
    cell:
      max_lines: 2
      font_size: 13
      ref_chars:
        body: 30
        sidebar: 20
      note: 13px, 셀당 1~2줄
    max_rows:
      body: 7
      sidebar: 5
      note: 헤더 제외 행 수
  padding_overhead_px: 28
  padding_h_px: 0
- 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: 표 형식. 파란 헤더(좌/구분/우) + 행별 좌 | 중앙 기준 라벨 | 우. 정형 비교표.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - A와 B를 비교하는 정형 표 데이터가 이미 있음
    - 각 행에 비교 기준(정의/범위/역할 등)이 명시됨 (중앙 열)
    - 5~10행의 항목별 상세 대조
    - 비교 기준 라벨이 중앙에 있는 3열 구조
    - compare-vs-rows와 차이: 이 블록은 기준 라벨이 중앙 "열"로 고정, compare-vs-rows는 gradient pill
    예: [정의: A=~ | B=~] [범위: A=~ | B=~] [역할: A=~ | B=~] ...
  when: 비교 기준이 명확한 정형 표 데이터로 두 개념을 항목별 대조할 때.
  not_for: |
    - 카테고리 pill 비교 → compare-vs-rows
    - 간단 2~3항목 비교 → comparison-2col
    - 범용 데이터 표 → table-simple-striped
    - 3개 비교 → compare-3col-badge
  purpose_fit:
  - 핵심전달
  zone: full-width-only
  slots:
    required:
    - left_title
    - right_title
    - rows[]
    optional: []
  schema:
    cell:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 30
      note: 13px, 셀당
    max_rows:
      body: 7
      note: 행 수
  padding_overhead_px: 24
  padding_h_px: 0
- id: table-simple-striped
  name: 범용 줄무늬 테이블
  category: tables
  template: blocks/tables/table-simple-striped.html
  height_cost: medium
  min_height_px: 100
  relation_types: []
  visual: 남색 헤더 + 줄무늬 행 교차. 범용 데이터 표.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 비교가 아닌 일반 데이터 표 (스펙, 일정, 목록)
    - N열 × M행 정형 데이터
    - 헤더 행 + 데이터 행으로 구성
    - A vs B 비교가 아님 (비교면 compare 계열)
    예: [구분/현재/목표/비고] → N행 데이터
  when: 비교 목적이 아닌 일반 데이터 표. 스펙표, 일정표, 항목 목록.
  not_for: |
    - A vs B 비교 → compare-3col-badge 또는 compare-2col-split
    - 카테고리 비교 → compare-vs-rows
  purpose_fit:
  - 핵심전달
  - 근거사례
  slots:
    required:
    - headers[]
    - rows[][]
    optional: []
  schema:
    header_cell:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 15
        sidebar: 10
      note: 13px bold white, 남색 배경
    body_cell:
      max_lines: 2
      font_size: 13
      ref_chars:
        body: 20
        sidebar: 15
      note: 13px, 줄무늬 행
    max_rows:
      body: 8
      sidebar: 5
      note: 행 수
  padding_overhead_px: 19
  padding_h_px: 0
- 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 벤 다이어그램. 큰 원(중심) + N개 작은 원. gradient+glow.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 상위 개념 안에 2~5개 하위 개념이 포함되는 관계
    - 중심에 상위 개념(큰 원) + 주변에 하위 개념(작은 원)
    - 포함/융합 관계 시각화 (A ⊃ {B, C, D})
    - cycle-3way-intersect와 차이: venn은 포함 관계, cycle은 교차/융합 관계
    예: DX(중심) ⊃ [GIS, BIM, 디지털트윈, IoT]
  when: 상위-하위 포함 관계를 벤 다이어그램으로 시각화. 2~5개 하위 개념. 단독 배치 필수.
  not_for: |
    - 3개 교차/융합 관계 → cycle-3way-intersect
    - 순차 흐름 → process-horizontal
    - 대등 비교 → compare-pill-pair
    - 텍스트로 충분히 설명 가능하면 사용 금지
  purpose_fit:
  - 핵심전달
  - 구조시각화
  slots:
    required:
    - center_label
    - items[]
    optional:
    - center_sub
    - description
  schema:
    center_label:
      max_lines: 1
      font_size: 24
      ref_chars:
        body: 6
      note: 24px bold, SVG 중심 원
    center_sub:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 10
      note: 13px, 중심 원 아래
    item_label:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 8
      note: 12-20px 동적, 작은 원 안
    description:
      max_lines: 2
      font_size: 14
      ref_chars:
        body: 60
      note: 14px, SVG 아래 설명
    max_items:
      body: 5
      note: 아이템 수 (원 개수)
  padding_overhead_px: 22
  padding_h_px: 0
  min_display_width_px: 200
- id: circle-gradient
  name: 원형 라벨
  category: visuals
  template: blocks/visuals/circle-gradient.html
  height_cost: compact
  min_height_px: 50
  relation_types: []
  visual: gradient 원(190px) + 이중 테두리 + 중앙 흰색 텍스트. 단일 키워드.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 단일 키워드(6자 이내)를 원형 아이콘처럼 강조
    - 섹션 전환점의 주제 선언 (아래에 본문 블록이 따라옴)
    - 선택적 보조 라벨
    - keyword-circle-row와 차이: 이 블록은 단일 원, row는 N개 나열
  when: 단일 키워드를 원형으로 강조. 섹션 주제 선언 아이콘.
  not_for: |
    - N개 키워드 나열 → keyword-circle-row
    - 텍스트 제목 → topic-center
    - 결론 한 줄 → banner-gradient
  purpose_fit: []
  slots:
    required:
    - label
    optional:
    - sub_label
  schema:
    label:
      max_lines: 1
      font_size: 22
      ref_chars:
        body: 6
        sidebar: 6
      note: 22px bold white, 원 안
    sub_label:
      max_lines: 1
      font_size: 12
      ref_chars:
        body: 15
        sidebar: 12
      note: 12px, 원 아래
  padding_overhead_px: 16
  padding_h_px: 0
  min_display_width_px: 150
- 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. 짧은 라벨만. 비교 헤더 역할.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2개 개념의 시각적 대비를 짧은 라벨(10자 이내)로만 선언
    - 세부 비교 항목 없이 "A vs B" 선언만
    - 비교 테이블 블록 위에 헤더로 배치 (단독 사용도 가능)
    - 상세 설명 불필요
    예: "DX 협업 프로세스" VS "BIM 정보 관리" (이 아래에 비교표 블록 배치)
  when: 2개 개념을 짧은 라벨로 시각적 대비 선언할 때. 비교표 위 헤더. 세부 항목 없음.
  not_for: |
    - 세부 비교 항목 필요 → compare-3col-badge 또는 compare-vs-rows
    - 설명 포함 비교 → comparison-2col
    - 3개 비교 → card-compare-3col
  purpose_fit:
  - 핵심전달
  zone: full-width-only
  slots:
    required:
    - left_label
    - right_label
    optional:
    - left_sub
    - right_sub
  schema:
    left_label:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 10
      note: 18px bold, 350px 필 안
    right_label:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 10
      note: 18px bold, 350px 필 안
  padding_overhead_px: 40
  padding_h_px: 40
  min_display_width_px: 200
- 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: 가로 흐름도. 원형 번호 + 제목 + 설명 카드 + 화살표 연결.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~5개 단계가 가로 순서로 진행
    - 각 단계에 제목(10자) + 설명(1~2줄)이 필요
    - A→B→C 순서 흐름 (순서 없으면 card-icon-desc)
    - flow-arrow-horizontal과 차이: 이 블록은 설명 포함, flow-arrow는 키워드(8자)만
    예: 1.현황분석(설명) → 2.전략수립(설명) → 3.실행(설명) → 4.검증(설명)
  when: 각 단계에 제목+설명이 필요한 가로 프로세스 흐름. 2~5단계.
  not_for: |
    - 키워드만(설명 불필요) → flow-arrow-horizontal
    - 세로 타임라인 → card-step-vertical
    - 순서 없는 나열 → card-icon-desc
    - 번호 목록 → card-numbered
  purpose_fit:
  - 핵심전달
  - 구조시각화
  slots:
    required:
    - steps[]
    optional: []
  schema:
    step_number:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 2
      note: var(--font-body), 36px 원 안
    step_title:
      max_lines: 1
      font_size: 15
      ref_chars:
        body: 10
        sidebar: 8
      note: var(--font-body) bold
    step_description:
      max_lines: 2
      font_size: 13
      ref_chars:
        body: 40
        sidebar: 25
      note: var(--font-caption)
    max_steps:
      body: 5
      sidebar: 3
      note: 단계 수
  padding_overhead_px: 0
  padding_h_px: 0
  min_display_width_px: 250
- 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 캡슐이 가로 나열 + 사이 화살표. 라벨만. 컴팩트 흐름도.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - A→B→C 순서/흐름이 핵심 (2~6단계)
    - 각 단계가 짧은 키워드(8자 이내)만
    - 단계별 설명 불필요 (설명 필요하면 process-horizontal)
    - 컴팩트하게 흐름만 표현 (높이 ~50px)
    예: GIS → SPCC → 토공 → BIM (기술 발전 순서)
  when: 짧은 키워드(8자 이내)로 순서/흐름만 간결하게 보여줄 때. 높이 예산 적을 때.
  not_for: |
    - 단계별 설명 필요 → process-horizontal
    - 라벨 8자 초과 → process-horizontal
    - 순서 없는 나열 → dark-bullet-list 또는 card-icon-desc
    - 번호 순서 나열 → card-numbered
  purpose_fit:
  - 구조시각화
  zone: full-width-only
  slots:
    required:
    - steps[]
    optional: []
  schema:
    step_label:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 8
      note: 13px bold, 120px 캡슐 안. 8자 이내 필수.
    max_steps:
      body: 6
      note: 단계 수
  padding_overhead_px: 20
  padding_h_px: 0
  min_display_width_px: 200
- 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 gradient 원 N개 가로 나열. 각 원에 약어 1~2글자 + 아래 라벨 + 설명.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 약어를 풀이하는 구조 (G=Geographic, S=Structure 등)
    - 2~5개 약어/핵심 글자를 원형으로 가로 나열
    - 각 원에 1~2글자 약어 + 아래 라벨(풀이) + 선택적 설명
    - circle-gradient와 차이: 이 블록은 N개 나열, circle-gradient는 단일 원
    예: G(Geographic) | S(Structure) | I(Information) | M(Model)
  when: 약어 풀이를 원형 아이콘으로 가로 나열할 때. 2~5개 약어.
  not_for: |
    - 아이콘+설명 카드 → card-icon-desc
    - 단일 원 강조 → circle-gradient
    - 약어가 아닌 일반 텍스트 → 사용 금지
  purpose_fit:
  - 구조시각화
  slots:
    required:
    - keywords[]
    optional: []
  schema:
    letter:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 2
        sidebar: 2
      note: 약어 1~2글자
    label:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 10
        sidebar: 8
      note: 14px bold, 1줄
    description:
      max_lines: 2
      font_size: 12
      ref_chars:
        body: 25
        sidebar: 20
      note: 12px, 140px 폭, 2줄
    max_keywords:
      body: 5
      sidebar: 3
      note: 키워드 수
  padding_overhead_px: 20
  padding_h_px: 0
  min_display_width_px: 200
- id: quote-big-mark
  name: 큰따옴표 인용
  category: emphasis
  template: blocks/emphasis/quote-big-mark.html
  height_cost: medium
  min_height_px: 80
  relation_types: []
  visual: 큰따옴표(❝❞) 장식 + 연한 배경 박스 + 인용문 + 출처. 인용 형식.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 타인의 발언/보고서/문서를 인용하는 구조
    - 인용문(1~3줄) + 출처(선택, "~보고서", "~발언")
    - 출처가 있으면 이 블록 (출처 없는 질문은 quote-question)
    - 자기 주장이 아니라 타인/문서의 말을 빌리는 형식
    예: "건설산업의 디지털 전환은 필수불가결하다" — 국토교통부 보고서
  when: 출처가 있는 인용문을 강조 형태로 보여줄 때. 인용문+출처 구조.
  not_for: |
    - 자기 질문(물음표) → quote-question
    - 경고/문제점 서술 → callout-warning
    - 해결책 강조 → callout-solution
    - 1줄 결론 선언 → statement-pill-highlight
  purpose_fit:
  - 문제제기
  - 근거사례
  slots:
    required:
    - quote_text
    optional:
    - source
  schema:
    quote_text:
      max_lines: 3
      font_size: 16
      ref_chars:
        body: 120
        sidebar: 70
      note: 16px, 큰따옴표 장식 안, 3줄 이내
    source:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 30
        sidebar: 20
      note: caption, 1줄
  padding_overhead_px: 48
  padding_h_px: 56
- id: quote-question
  name: 질문형 강조
  category: emphasis
  template: blocks/emphasis/quote-question.html
  height_cost: medium
  min_height_px: 80
  relation_types: []
  visual: 밝은 파란 배경 + 파란 테두리 + 큰 질문 텍스트 + 부연 설명.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 핵심이 물음표(?)로 끝나는 질문 1개
    - 질문으로 독자의 문제 인식을 유도하는 전환점
    - 질문(1줄) + 선택적 부연 설명(1~3줄)
    - 타인 인용이 아님 (인용이면 quote-big-mark)
    예: "지금의 방식으로도 가능할까?" → 부연 설명 2줄
  when: 물음표로 끝나는 핵심 질문으로 문제 인식을 유도할 때. 질문+부연 설명 구조.
  not_for: |
    - 타인 인용+출처 → quote-big-mark
    - 경고/문제 서술 → callout-warning
    - 결론 선언 → statement-pill-highlight 또는 banner-gradient
    - 해결책 제시 → callout-solution
  purpose_fit:
  - 문제제기
  slots:
    required:
    - question
    optional:
    - description
  schema:
    question:
      max_lines: 1
      font_size: 22
      ref_chars:
        body: 35
        sidebar: 25
      note: 22px bold, 1줄 권장
    description:
      max_lines: 3
      font_size: 14
      ref_chars:
        body: 120
        sidebar: 80
      note: 14px, 3줄 이내
  padding_overhead_px: 56
  padding_h_px: 48
- 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단 자유 텍스트. 좌=파란 밑줄 헤더, 우=빨간 밑줄 헤더. 중앙 1px 구분선. 각 측에 서브타이틀(선택)+본문 문단. 표가 아닌 문단형.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - A와 B 두 개념을 각각 2~3문장으로 설명하는 자유 문단형 비교
    - 행별 카테고리 구분이 없음 (카테고리별 비교는 compare-vs-rows)
    - 좌/우 텍스트 길이가 비슷하고 각각 독립된 설명
    - 항목 수 2~3개, 문단형 텍스트
    예: "BIM(하위기술): ~설명 3줄" vs "DX(상위개념): ~설명 3줄"
  when: A와 B를 각각 자유 문단으로 설명하며 대비할 때. 행별 카테고리 구분 없이 좌/우 각각 독립 서술. 장단점, Before/After, 개념 대비.
  not_for: |
    - 카테고리별 N행 비교 → compare-vs-rows (10+행, 중앙 카테고리 pill)
    - 행별 기준 라벨이 있는 표 → compare-2col-split
    - 배지 헤더로 상위 주제 선언 필요 → compare-2col-badge
    - 3개 이상 비교 → card-compare-3col
    - 좌/우 이슈 쌍 + 라벨 pill → issues-paired-rows
  purpose_fit:
  - 핵심전달
  slots:
    required:
    - left_title
    - left_content
    - right_title
    - right_content
    optional:
    - left_subtitle
    - right_subtitle
  schema:
    left_title:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 15
      note: var(--font-subtitle) bold, 파란 밑줄
    left_subtitle:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 20
      note: var(--font-caption)
    left_content:
      max_lines: 5
      font_size: 15
      ref_chars:
        body: 150
      note: var(--font-body)
    right_title:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 15
      note: var(--font-subtitle) bold, 빨간 밑줄
    right_subtitle:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 20
      note: var(--font-caption)
    right_content:
      max_lines: 5
      font_size: 15
      ref_chars:
        body: 150
      note: var(--font-body)
  padding_overhead_px: 0
  padding_h_px: 0
- id: banner-gradient
  name: 그라데이션 배너
  category: emphasis
  template: blocks/emphasis/banner-gradient.html
  height_cost: compact
  min_height_px: 40
  relation_types: []
  visual: 전체 너비 파란 gradient 배경 + 중앙 흰색 텍스트 + 선택적 서브텍스트. 컴팩트 배너.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 결론/핵심 메시지 1줄 (38자 이내) + 선택적 부연 1줄
    - 파란 배경 배너 (statement-pill-highlight는 어두운 gradient 캡슐)
    - 섹션 마무리 또는 footer 배치에 적합 (compact, 50~60px)
    - 키워드 하이라이트 불필요 (하이라이트 필요하면 statement-pill-highlight)
    예: "BIM은 DX의 기초가 되는 일부분이다. DX ≠ BIM"
  when: 결론 1줄을 파란 배너로 선언할 때. 키워드 하이라이트 불필요. 컴팩트 footer 용도.
  not_for: |
    - 키워드 하이라이트 필요 → statement-pill-highlight (<em> 노란색)
    - 인용+출처 → quote-big-mark
    - 설명 3줄+ → callout-solution
    - A vs B 비교 → comparison-2col
  purpose_fit:
  - 결론강조
  slots:
    required:
    - text
    optional:
    - sub_text
  schema:
    text:
      max_lines: 1
      font_size: 16
      ref_chars:
        body: 38
        sidebar: 18
      note: 16px bold white, 1줄
    sub_text:
      max_lines: 1
      font_size: 12
      ref_chars:
        body: 50
        sidebar: 30
      note: 12px, 1줄
  padding_overhead_px: 32
  padding_h_px: 60
- 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: 짙은 남색 배경 + 파란 제목 + 흰 텍스트 불릿. 어두운 톤 강조.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 3~5개 독립 포인트/사례/증거를 나열
    - 각 항목이 1줄 문장 (순서 없음)
    - 어두운 배경으로 시각적 무게감/강조 필요
    - 제목(선택) + 불릿 리스트만 (설명/이미지 불필요)
    예: "정책 시행 근거" → [근거1, 근거2, 근거3, 근거4]
  when: 순서 없는 독립 포인트를 어두운 배경에 강조하며 나열할 때. 근거, 사례, 문제점 목록.
  not_for: |
    - 밝은 배경 카드형 → card-icon-desc
    - 순서 있는 번호 나열 → card-numbered
    - 개념별 설명 필요 → card-icon-desc (설명 3줄)
    - 좌측 총괄 라벨+적층 → stacked-arrow-list
  purpose_fit:
  - 근거사례
  - 문제제기
  - 핵심전달
  slots:
    required:
    - bullets[]
    optional:
    - title
  schema:
    title:
      max_lines: 1
      font_size: 16
      ref_chars:
        body: 30
        sidebar: 20
      note: 16px bold, 1줄
    bullet_item:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 86
        sidebar: 41
      note: 14px, 1불릿 기준
    max_bullets:
      body: 5
      sidebar: 4
      note: 불릿 수
  padding_overhead_px: 32
  padding_h_px: 48
- id: highlight-strip
  name: 강조 분류 스트립
  category: emphasis
  template: blocks/emphasis/highlight-strip.html
  height_cost: compact
  min_height_px: 35
  relation_types: []
  visual: 가로 1줄에 N개 색상 구간. 각 구간에 흰색 라벨. 카테고리 색상 분류 바.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~4개 카테고리를 색상으로 구분하여 한 줄에 표시
    - 각 카테고리는 짧은 라벨(15자 이내)만
    - 설명 없이 분류 자체를 보여주는 것이 목적
    - 카테고리 바 아래에 다른 블록이 올 수 있음 (분류 헤더 역할)
    예: [상용S/W(회색)] | [3rd Party(파랑)] | [전문S/W(빨강)]
  when: 카테고리 색상 분류를 한 줄 바로 표시할 때. 라벨만, 설명 없음.
  not_for: |
    - 탭 전환 UI → tab-label-row
    - 메시지 강조 → banner-gradient
    - 불릿 리스트 → dark-bullet-list
  purpose_fit:
  - 구조시각화
  slots:
    required:
    - segments[]
    optional: []
  schema:
    label:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 15
        sidebar: 10
      note: 14px bold white, nowrap, 세그먼트당
    max_segments:
      body: 4
      sidebar: 3
      note: 세그먼트 수
  padding_overhead_px: 20
  padding_h_px: 32
- id: callout-solution
  name: 솔루션 콜아웃
  category: emphasis
  template: blocks/emphasis/callout-solution.html
  height_cost: medium
  min_height_px: 80
  relation_types:
  - cause_effect
  visual: 밝은 파란 배경 + 파란 테두리 + 아이콘 + 파란 제목 + 설명 + 출처. 긍정적 톤.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 해결책/방향성/솔루션을 강조하는 콜아웃 박스
    - 제목(1줄) + 설명(2~4줄) + 선택적 출처
    - 긍정적/해결책 톤 (파란색 계열)
    - 경고/문제점이 아님 (경고면 callout-warning)
    예: "핵심 해결 방향" → 설명 3줄 → 출처
  when: 해결책/솔루션/긍정적 방향을 콜아웃 박스로 강조할 때. 제목+설명+출처 구조.
  not_for: |
    - 경고/문제 톤(빨간) → callout-warning
    - 인용문+출처 → quote-big-mark
    - 질문형 → quote-question
    - 1줄 결론 → statement-pill-highlight

    '
  when: '핵심 해결책, 솔루션, 방향성을 강조. 예: "💡 Solution 제시 포인트".'
  not_for: 경고/문제 → callout-warning. 인용 → quote-big-mark. 결론 한 줄 → banner-gradient.
  purpose_fit:
  - 핵심전달
  slots:
    required:
    - title
    - description
    optional:
    - icon
    - source
  schema:
    title:
      max_lines: 1
      font_size: 17
      ref_chars:
        body: 40
        sidebar: 25
      note: 17px bold, 1줄
    description:
      max_lines: 4
      font_size: 14
      ref_chars:
        body: 150
        sidebar: 90
      note: 14px, 3~4줄
  padding_overhead_px: 40
  padding_h_px: 48
- id: callout-warning
  name: 경고 콜아웃
  category: emphasis
  template: blocks/emphasis/callout-warning.html
  height_cost: medium
  min_height_px: 80
  relation_types:
  - cause_effect
  visual: 연한 빨간 배경 + 빨간 테두리 + 아이콘 + 빨간 제목 + 설명. 경고/문제점 톤.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 문제점/경고/주의사항을 강조하는 콜아웃 박스
    - 제목(1줄) + 설명(2~4줄)
    - 부정적/경고 톤 (잘못된 인식, 위험 요소, 현재 한계)
    - 해결책이 아님 (해결책이면 callout-solution)
    예: "현재 접근 방식의 한계" → 문제점 설명 3줄
  when: 문제점/경고/위험을 콜아웃 박스로 강조할 때. 부정적 톤 제목+설명.
  not_for: |
    - 해결책/긍정 톤 → callout-solution
    - 인용문 → quote-big-mark
    - 질문형 → quote-question
    - 1줄 결론 → statement-pill-highlight
  purpose_fit:
  - 문제제기
  slots:
    required:
    - title
    - description
    optional:
    - icon
  schema:
    title:
      max_lines: 1
      font_size: 17
      ref_chars:
        body: 40
        sidebar: 25
      note: 17px bold 빨간색
    description:
      max_lines: 4
      font_size: 14
      ref_chars:
        body: 150
        sidebar: 90
      note: 14px 진한 빨간
  padding_overhead_px: 40
  padding_h_px: 48
- id: tab-label-row
  name: 탭 라벨 행
  category: emphasis
  template: blocks/emphasis/tab-label-row.html
  height_cost: compact
  min_height_px: 35
  relation_types: []
  visual: 가로 탭 버튼 행. 선택됨=색상+흰 텍스트, 나머지=회색.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2~5개 카테고리 중 하나가 현재 선택됨(active)
    - 탭 UI 형태 (클릭 전환은 미지원, 시각적 표시만)
    - 각 탭 라벨 10자 이내
    - highlight-strip과 차이: 이 블록은 active/inactive 구분, strip은 모두 동등
    예: 제조 | 건축 | [인프라/토목](선택됨)
  when: 카테고리 중 현재 선택된 항목을 탭 형태로 표시할 때.
  not_for: |
    - 모두 동등한 색상 바 → highlight-strip
    - 섹션 구분 → section-header-bar
  purpose_fit: []
  slots:
    required:
    - tabs[]
    optional: []
  schema:
    tab_label:
      max_lines: 1
      font_size: 14
      ref_chars:
        body: 10
        sidebar: 8
      note: 14px bold, 탭당
    max_tabs:
      body: 5
      sidebar: 3
      note: 탭 수
  padding_overhead_px: 8
  padding_h_px: 0
- id: divider-text
  name: 텍스트 구분선
  category: emphasis
  template: blocks/emphasis/divider-text.html
  height_cost: compact
  min_height_px: 25
  relation_types: []
  visual: 좌우 가는 선 + 중앙 작은 텍스트. ── 라벨 ── 형태.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 가벼운 섹션 전환 구분선 (선+텍스트+선)
    - 텍스트 20자 이내, 1줄
    - sidebar 섹션 라벨이나 가벼운 주제 전환
    예: ── 용어 정의 ── 또는 ── 핵심 요약 ──
  when: 가벼운 구분선에 라벨 텍스트. sidebar 또는 본문 전환점.
  not_for: |
    - 강한 파란 바 구분 → section-header-bar
    - 결론 강조 → banner-gradient
  purpose_fit: []
  slots:
    required:
    - text
    optional: []
  schema:
    text:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 20
        sidebar: 15
      note: 13px bold, nowrap, 중앙정렬
  padding_overhead_px: 16
  padding_h_px: 0
- 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장 나란히. 각 캡션 선택.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 이미지 정확히 2장을 나란히 배치
    - 캡션 선택적, 텍스트 설명 불필요
    - 이미지 자체가 콘텐츠 (사진, 도면, 스크린샷)
  when: 이미지 2장 나란히. 현장 비교, 전후 사진 등.
  not_for: |
    - 4장 → image-grid-2x2
    - 이미지+텍스트 설명 → image-side-text
    - 1장 → image-full-caption
    - 전/후 라벨 필요 → image-before-after
  purpose_fit:
  - 근거사례
  slots:
    required:
    - images[]
    optional: []
  schema:
    caption:
      max_lines: 1
      font_size: 11
      ref_chars:
        body: 30
        sidebar: 20
      note: 11px, 이미지 아래
    max_images:
      body: 2
      note: 이미지 수
  padding_overhead_px: 0
  padding_h_px: 0
- 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장 2×2 격자. 각 캡션 선택.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 이미지 정확히 4장을 2×2 격자로 배치
    - 캡션 선택적
  when: 이미지 4장. 현장 사진, 4개 관점, 4단계 시각화 등.
  not_for: |
    - 2장 → image-row-2col
    - 이미지+텍스트 → image-side-text
    - 1장 → image-full-caption
  purpose_fit:
  - 근거사례
  slots:
    required:
    - images[]
    optional: []
  schema:
    caption:
      max_lines: 1
      font_size: 11
      ref_chars:
        body: 30
      note: 11px, 이미지 아래
    max_images:
      body: 4
      note: 이미지 수 (2x2)
  padding_overhead_px: 8
  padding_h_px: 0
- 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) + 우측 제목+설명+불릿. 가로 배치.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 1장의 이미지 + 옆에 텍스트 설명이 필요
    - 이미지를 보면서 동시에 설명을 읽는 구조
    - 제목 + 설명 또는 불릿 리스트
    예: [시스템 스크린샷] + 우측에 주요 기능 3가지 불릿
  when: 이미지 1장 + 옆에 텍스트 설명. 제품 소개, 다이어그램 해설.
  not_for: |
    - 이미지만(텍스트 없음) → image-full-caption 또는 image-row-2col
    - 여러 장 → image-grid-2x2
  purpose_fit:
  - 핵심전달
  - 근거사례
  slots:
    required:
    - image_src
    optional:
    - image_alt
    - title
    - description
    - bullets
  schema:
    title:
      max_lines: 1
      font_size: 18
      ref_chars:
        body: 20
      note: 18px bold
    description:
      max_lines: 3
      font_size: 14
      ref_chars:
        body: 100
      note: 14px
    bullet_item:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 40
      note: 13px, 불릿당
    max_bullets:
      body: 4
      note: 불릿 수
  padding_overhead_px: 4
  padding_h_px: 0
- 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장 + 하단 캡션.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 이미지 1장을 전체 너비로 크게 보여줌
    - 캡션만 선택적 (옆에 텍스트 설명 불필요)
    - 핵심 도표, 대형 다이어그램, 전경 사진
  when: 이미지 1장을 크게. 캡션만. 텍스트 설명 불필요.
  not_for: |
    - 2장+ → image-row-2col/image-grid-2x2
    - 이미지+텍스트 → image-side-text
  purpose_fit:
  - 핵심전달
  slots:
    required:
    - src
    optional:
    - alt
    - caption
  schema:
    caption:
      max_lines: 1
      font_size: 12
      ref_chars:
        body: 40
      note: 12px, 이미지 아래
  padding_overhead_px: 0
  padding_h_px: 0
- 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(파란 라벨). 이미지 전후 비교.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 이미지 2장이 전/후(Before/After) 관계
    - 각 이미지에 "Before"/"After" 또는 "현재"/"개선" 라벨
    - 사이에 → 화살표로 변화 방향 표시
    - image-row-2col과 차이: 이 블록은 라벨+화살표 있음, row는 단순 나열
    예: Before(기존 도면) → After(3D 모델)
  when: 변화 전후를 이미지로 비교할 때. Before/After 라벨+화살표.
  not_for: |
    - 단순 이미지 나열(전후 아님) → image-row-2col
    - 텍스트 비교 → comparison-2col
  purpose_fit:
  - 핵심전달
  - 근거사례
  slots:
    required:
    - before_src
    - after_src
    optional:
    - before_label
    - after_label
    - caption
  schema:
    before_label:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 8
      note: 13px bold white, 라벨
    after_label:
      max_lines: 1
      font_size: 13
      ref_chars:
        body: 8
      note: 13px bold white, 라벨
    caption:
      max_lines: 1
      font_size: 12
      ref_chars:
        body: 40
      note: 12px, 하단 캡션
  padding_overhead_px: 0
  padding_h_px: 0
## ── Figma 추출 블록 (new/) ──────────────────────────────────
- id: statement-pill-highlight
  name: 선언문 pill 강조
  category: new
  template: blocks/new/statement-pill-highlight.html
  height_cost: compact
  min_height_px: 59
  relation_types:
  - conclusion
  - emphasis
  visual: 캡슐형(radius 999px) 어두운 gradient 배경 위에 흰색 Bold 한 줄 메시지. <em>으로 노란색 강조. 전체 너비 사용.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 핵심 결론/선언이 딱 1문장 (40자 이내)
    - 문장 중 일부 키워드만 강조 필요 (예: "전용 S/W 개발 없이는 미래가 없다")
    - 설명/불릿 없이 메시지 자체가 전부
    - 페이지 끝 마무리 또는 섹션 전환점
  when: 핵심 결론이 1문장이고, 그 문장 안에 강조할 키워드가 있을 때. "~없이는 ~없다", "~가 핵심이다" 같은 선언형 문장.
  not_for: |
    - 2줄 이상 메시지 → banner-gradient
    - 인용문+출처 → quote-big-mark
    - 질문형 강조 → quote-question
    - 배경 이미지 위 타이틀 → section-title-with-bg
  purpose_fit:
  - 결론
  - 선언
  - 강조
  slots:
    required:
    - text
    optional: []
  schema:
    text:
      max_lines: 1
      font_size: 29
      ref_chars:
        body: 40
      note: 29px bold white, <em>으로 노란색 하이라이트
  padding_overhead_px: 28
  padding_h_px: 96

- id: stacked-arrow-list
  name: 적층 화살표 리스트
  category: new
  template: blocks/new/stacked-arrow-list.html
  height_cost: large
  min_height_px: 300
  relation_types:
  - hierarchy
  - list
  visual: 좌측 원호 장식+세로 라벨, 우측에 N개 캡슐 행이 다이아몬드형(가운데 좁고 양끝 넓은)으로 적층. 각 행에 화살표+텍스트+색상 하단 보더.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 하나의 총괄 개념(좌측 라벨) 아래 3~7개 구체 항목 나열
    - 각 항목은 짧은 1줄 문장 (35자 이내)
    - 항목 간 색상 구분이 있음 (단계별/레벨별 다른 색)
    - 좌측에 "시공상세정보물" 같은 세로 총괄 라벨
    예: 좌="시공상세정보물" → [3D 모델, 시뮬레이션, 영상물, 도면, 상세도면]
  when: 하나의 상위 개념에 속하는 N개 구체 항목을 나열할 때. 각 항목이 짧은 1줄이고 항목별 색상 구분 필요.
  not_for: |
    - 항목에 설명/불릿이 붙는 경우 → card-numbered
    - 단순 불릿 목록 → dark-bullet-list
    - 시간 순서/프로세스 → process-horizontal
    - 항목이 카드형(제목+설명) → card-icon-desc
  purpose_fit:
  - 목록
  - 계층
  - 구성요소
  slots:
    required:
    - items
    optional:
    - title
    - left_label
    - left_arc_img
    - arrow_img
  schema:
    title:
      max_lines: 1
      font_size: 26
      ref_chars:
        body: 30
      note: 26px bold #144838, <em>으로 gradient(#cc5200) 강조
    items:
      max_items: 7
      font_size: 22
      ref_chars:
        body: 35
      note: 22px medium, 각 행 1줄
  padding_overhead_px: 44
  padding_h_px: 0

- id: split-panel-numbered
  name: 분할 패널 (좌 카테고리 + 우 번호)
  category: new
  template: blocks/new/split-panel-numbered.html
  height_cost: large
  min_height_px: 400
  relation_types:
  - comparison
  - hierarchy
  visual: 좌측 52% 셰브론 배경에 카테고리별 색상 바+항목 리스트. 우측 48%에 번호 뱃지+설명 행. 2단 분할 패널.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 좌측: 2~4개 카테고리, 각 카테고리에 소속 항목 리스트 (예: GIS→[ArcGIS, QGIS])
    - 우측: 번호가 매겨진 3~6개 설명/이슈 (예: 1.기능위주, 2.고가복잡, 3.호환불가)
    - 좌=입력/도구/분류, 우=결과/문제점/특성 대응 구조
    - 좌/우가 1:1 대응이 아니라 좌=카테고리 그룹, 우=전체에 대한 이슈
    예: 좌=[GIS, Modeler, Simulation] → 우=[기능위주, 고가, 호환불가, 성과별도, 현장한계]
  when: 좌측에 카테고리별 도구/항목 분류 + 우측에 그에 대한 번호 매긴 이슈/특성을 나열할 때.
  not_for: |
    - 좌/우 1:1 대응 비교 → comparison-2col
    - 카테고리별 행 비교 → compare-vs-rows
    - 독립 카드 3열 → card-image-3col
  purpose_fit:
  - 비교
  - 분류
  - 도구현황
  slots:
    required:
    - categories
    - right_items
    optional:
    - title_icon
    - title
    - mid_arrow_img
    - arrow_img
  schema:
    categories:
      max_items: 4
      note: 각 카테고리에 name + color + items[]
    right_items:
      max_items: 6
      font_size: 18
      ref_chars:
        body: 30
      note: 18px medium #11231d
  padding_overhead_px: 36
  padding_h_px: 0

- id: issues-paired-rows
  name: 이슈 쌍 행 (두루마리 pill)
  category: new
  template: blocks/new/issues-paired-rows.html
  height_cost: large
  min_height_px: 400
  relation_types:
  - comparison
  - problem
  visual: N개 행, 각 행은 녹색 border 박스 안에 좌/우 텍스트+점선 구분. 행 위/아래로 두루마리 pill이 걸침. pill 위치 교차(위→아래→위→아래).
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - N개 이슈 쌍: 각 쌍이 "좌 라벨+설명" vs "우 라벨+설명"
    - 각 쌍에 짧은 라벨(2~5글자)이 있음 (예: "개념 부재", "방향성 상실")
    - 좌/우가 대비 관계 (원인↔결과, 문제↔오류)
    - 2~5개 쌍, 각 설명은 2~3줄
    - 라벨이 pill 형태로 시각적 강조 필요
    예: [개념부재 vs 잘못된접근, 방향성상실 vs 전제조건오류, 수행주체혼란 vs 수행방식무지]
  when: 좌/우 이슈가 쌍으로 묶이고, 각 쌍에 짧은 라벨이 필요할 때. 문제점 진단, 원인-결과 대비.
  not_for: |
    - 카테고리별 N행 비교 (중앙에 카테고리 라벨) → compare-vs-rows
    - 라벨 없는 단순 좌/우 비교 → comparison-2col
    - 4개 카테고리 매트릭스 → quadrant-2x2-issues
  purpose_fit:
  - 문제점
  - 이슈
  - 대비
  slots:
    required:
    - rows
    optional:
    - header
    - pill_bg
  schema:
    rows:
      max_items: 5
      note: 각 row에 left{label,text} + right{label,text} + pills_bottom(bool)
    header:
      note: icon + title (gradient text)
  padding_overhead_px: 32
  padding_h_px: 32

- id: compare-vs-rows
  name: VS 비교 행 테이블
  category: new
  template: blocks/new/compare-vs-rows.html
  height_cost: large
  min_height_px: 400
  relation_types:
  - comparison
  visual: 상단 gradient bar에 "A vs B" 라벨. 아래로 N행, 각 행=좌(갈색 우정렬)|중앙(카테고리 pill)|우(녹색 좌정렬). 하단 결론 박스.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - A와 B를 카테고리별로 비교하는 표 구조
    - 카테고리가 5~15개 (S/W, 프로세스, 성과물, 활용, 확장성, 주체 등)
    - 각 카테고리에서 A의 특성과 B의 특성을 1~2줄로 대비
    - 중앙에 카테고리 라벨 pill이 행마다 있음
    - 하단에 결론 메시지 1~2줄
    예: BIM vs DX → [S/W, 프로세스, 성과물, 활용, 확장성, 수행개념, ...] 각각 좌/우 비교
  when: 두 개념을 카테고리별(5+항목)로 행 단위 상세 비교할 때. 각 행에 카테고리 라벨이 있고, 좌/우 각각 짧은 설명.
  not_for: |
    - 카테고리 없는 단순 좌/우 대비 → comparison-2col
    - 행별 기준 라벨이 있는 표 → compare-2col-split
    - 좌/우 이슈 쌍+라벨 pill → issues-paired-rows (쌍 단위, 카테고리 아님)
    - 3열 비교 → compare-3col-badge
  purpose_fit:
  - 비교
  - 정의
  - 분석
  slots:
    required:
    - rows
    optional:
    - header
    - main_labels
    - conclusion
  schema:
    rows:
      max_items: 15
      note: 각 row에 category + left_text + right_text
    main_labels:
      note: left + center(기본 vs.) + right
    conclusion:
      note: arrow_img + text (HTML with <em>)
  padding_overhead_px: 40
  padding_h_px: 0

- id: quadrant-2x2-issues
  name: 2×2 사분면 이슈
  category: new
  template: blocks/new/quadrant-2x2-issues.html
  height_cost: large
  min_height_px: 500
  relation_types:
  - classification
  - problem
  visual: 2×2 사분면 grid. 각 사분면에 gradient ribbon 헤더 + 빨간 헤드라인 + 불릿. 중앙에 원형 인용구 오버레이.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 이슈/문제점이 정확히 4개 카테고리로 분류됨
    - 각 카테고리에 2~4개 세부 이슈 (빨간 헤드라인+불릿)
    - 4개가 2×2 매트릭스로 배치 가능 (예: 정책집행|수행개념|이해부족|투자부재)
    - 중앙에 핵심 메시지/인용구 (선택)
    - 좌측 2개와 우측 2개가 다른 색조 (warm vs teal)
    예: [정책집행, 수행개념, 이해부족, 투자부재] 각각 2~3개 이슈 + 중앙 "Rome wasn't built in a day"
  when: 이슈가 정확히 4개 카테고리이고, 2×2 매트릭스로 배치할 때. 각 사분면에 헤드라인+불릿 구조.
  not_for: |
    - 이슈가 2개 쌍 → issues-paired-rows
    - 이슈가 N개 나열 → dark-bullet-list 또는 card-numbered
    - 2열 비교 → comparison-2col
    - 3개 교차 관계 → cycle-3way-intersect
  purpose_fit:
  - 문제점
  - 분류
  - 진단
  slots:
    required:
    - quadrants
    optional:
    - center_quote
  schema:
    quadrants:
      fixed_count: 4
      note: 각 quadrant에 ribbon_title + sections[{headline, bullets[]}]
    center_quote:
      note: bg_img(원형 일러스트 이미지) + text
  padding_overhead_px: 0
  padding_h_px: 0

- id: cards-3col-persona
  name: 3열 페르소나 카드
  category: new
  template: blocks/new/cards-3col-persona.html
  height_cost: large
  min_height_px: 500
  relation_types:
  - comparison
  - stakeholder
  visual: 3열 세로 카드. 각 컬럼에 배경+오버레이+원형 뱃지(2줄 라벨)+체크 불릿 리스트+하단 사진.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 정확히 3개 역할/이해관계자/관점을 나란히 비교
    - 각 역할에: 역할명(2줄, 예: "발주자/목표") + 5~8개 목표/항목 불릿 리스트
    - 각 역할이 고유 색상/아이덴티티를 가짐
    - 선택적으로 각 역할 대표 사진
    - 역할 간 항목 수가 다를 수 있음 (space-between 균등 분포)
    예: 발주자[7항목] | 시공자[7항목] | 설계자[6항목] 각각 체크리스트+하단 사진
  when: 3개 역할/관점별로 각각 5+개 항목을 불릿 리스트로 나열·비교할 때. 역할별 뱃지 아이덴티티 필요.
  not_for: |
    - 텍스트만 카드(불릿 없이 설명) → card-icon-desc
    - 이미지 중심 3열 → card-image-3col
    - 2개만 비교 → comparison-2col
    - 역할이 아닌 카테고리 비교 → card-compare-3col
  purpose_fit:
  - 역할비교
  - 이해관계자
  - 목표
  slots:
    required:
    - personas
    optional: []
  schema:
    personas:
      fixed_count: 3
      note: 각 persona에 bg_img, overlay_color, badge_outer/inner_img, label, bullet_icon, bullets[], photo_img
    bullets:
      max_items: 8
      font_size: 15
      ref_chars:
        body: 25
      note: 15px medium, 체크 아이콘 marker + text flex pair (R13)
  padding_overhead_px: 0
  padding_h_px: 8

- id: cycle-3way-intersect
  name: 3원 교차 다이어그램
  category: new
  template: blocks/new/cycle-3way-intersect.html
  height_cost: large
  min_height_px: 400
  relation_types:
  - relationship
  - intersection
  visual: CSS 3원 교차 다이어그램. 역삼각형 배치 3개 원(gradient+blend+ring) + 6개 한자 액센트 원 + 6개 사이드 라벨.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 정확히 3개 핵심 가치/목표가 서로 교차·융합하는 관계
    - 각 가치에 2줄 라벨 (예: "안전과/품질", "생산성/향상", "소통과/신뢰")
    - 각 가치에 2개 세부 키워드 (한자 1글자, 예: 安/質, 速/利, 通/信)
    - 각 세부 키워드에 제목+설명 사이드 텍스트
    - 3개가 겹치는 교차 영역이 의미 있음
    예: [안전과품질, 생산성향상, 소통과신뢰] → 6개 세부 → 6개 사이드 설명
  when: 3가지 가치가 서로 교차하는 관계를 다이어그램으로 시각화할 때. 각 가치에 세부 키워드+설명 필요.
  not_for: |
    - 3개가 교차하지 않고 독립 나열 → keyword-circle-row
    - 2개 비교 → comparison-2col 또는 compare-pill-pair
    - 프로세스/순서 → process-horizontal
    - N개 원 벤 다이어그램 → venn-diagram
  purpose_fit:
  - 관계
  - 융합
  - 목표
  slots:
    required:
    - circles
    optional:
    - accents
    - side_labels
    - bg_texture_img
    - arc_img
  schema:
    circles:
      fixed_count: 3
      note: 각 circle에 label(HTML), text_shadow, outer_gradient, ring_gradient — CSS gradient 값 직접 전달
    accents:
      max_items: 6
      note: 각 accent에 char(한자 1자), outer_gradient, inner_gradient
    side_labels:
      max_items: 6
      note: 각 label에 title, title_color, desc(HTML)
  padding_overhead_px: 0
  padding_h_px: 0

layouts:
- id: 65-35
  name: 6.5:3.5 좌우 분할
  grid_columns: 6.5fr 3.5fr
  when: 좌측 메인 + 우측 보조
- id: 50-50
  name: 5:5 균등 분할
  grid_columns: 1fr 1fr
  when: 대등한 비교
- id: single
  name: 단일 컬럼
  grid_columns: 1fr
  when: 순차 구조
- id: 35-65
  name: 3.5:6.5 좌우 분할
  grid_columns: 3.5fr 6.5fr
  when: 좌측 보조 + 우측 메인