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: 전체 너비 배경 이미지(파란 그라데이션+웨이브) 위에 흰색 영문 소제목(15px) + 한글 대제목(35px). 높이 약 500px.
  when: 자세히보기(detail) 페이지의 맨 첫 화면 전용. 배경 이미지 위에 타이틀을 올려 페이지 주제를 시각적으로 강렬하게 선언할 때.
  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) + 중앙 흰색 제목. 섹션 구분용. 컴팩트.
  when: 같은 페이지 안에서 주제 전환이 필요할 때. 높이 예산이 적을 때 섹션 구분.
  not_for: 페이지 전체 타이틀 → section-title-with-bg. 꼭지별 소제목 → topic-left-right 또는 topic-numbered.
  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: 좌측에 파란 굵은 제목(24px, 240px 고정) + 우측에 본문 설명(16px). 가로 2단.
  visual_diff: '유사 블록과의 차이:

    - topic-center: 중앙 정렬 대제목(26px) + 서브타이틀 + 설명. 단독 강조형. 좌우 분리 없음

    - topic-numbered: 번호 원형(①②③) + 제목 + 구분선 + 설명. 순서형 세로 배치

    - 이 블록: 좌측 240px 고정폭에 파란 굵은 제목 + 우측에 본문 설명. 가로 2단 배치

    적합: 좌측에 핵심 주장/키워드, 우측에 근거/설명을 대비시킬 때. 문제 제기 도입부

    부적합: 중앙 강조 → topic-center, 순서형 번호 → topic-numbered

    '
  when: '좌측에 핵심 주장/질문, 우측에 근거/설명을 배치하는 구조. 문제 제기의 도입부로 적합. 예: "용어의 혼용" + "DX와 BIM이
    혼용되고 있다..."'
  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: 중앙 정렬 대제목(26px 굵게) + 파란 서브타이틀 + 하단 설명. 단독 강조.
  visual_diff: '유사 블록과의 차이:

    - topic-left-right: 좌측 제목(240px) + 우측 설명. 가로 2단 분리. 주장+근거 구조

    - topic-numbered: 번호 원형 + 제목 + 구분선 + 설명. 순서형 세로 배치

    - 이 블록: 중앙 정렬 대제목(26px) + 파란 서브타이틀 + 설명. 단독으로 주제를 크게 선언

    적합: 하나의 주제를 페이지 중심에 크게 선언. sidebar 섹션 라벨. 좌우 분리 불필요할 때

    부적합: 좌:제목 우:설명 대비 → topic-left-right, 순서형 → topic-numbered

    '
  when: 하나의 주제를 페이지 중심에 크게 선언할 때. sidebar 영역의 섹션 라벨로도 사용 가능.
  not_for: 좌:제목 우:설명 구조 → topic-left-right. 번호 순서 → topic-numbered.
  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: 파란 원형 번호(①②③) + 굵은 제목 + 파란 구분선 + 설명. 세로 배치.
  visual_diff: '유사 블록과의 차이:

    - topic-left-right: 좌측 제목 + 우측 설명. 가로 2단. 번호 없음

    - topic-center: 중앙 정렬 대제목 + 서브타이틀. 번호 없이 단독 강조

    - 이 블록: 파란 원형 번호(①②③) + 굵은 제목 + 파란 구분선 + 설명. 세로 배치. 순서형 꼭지 전용

    적합: 순서가 있는 꼭지(1번, 2번, 3번). 단계별 섹션 시작점

    부적합: 순서 없는 꼭지 → topic-left-right/topic-center, 카드 안의 순서 → card-numbered

    '
  when: 순서가 있는 꼭지를 시작할 때. 1번, 2번, 3번 식의 단계별 섹션.
  not_for: 순서 없는 꼭지 → topic-left-right 또는 topic-center. 카드 안의 순서 → card-numbered.
  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: 3열 카드. 각 카드 상단에 이미지(160px) + 하단에 색상 밑줄 제목 + 불릿 목록.
  visual_diff: '유사 블록과의 차이:

    - card-icon-desc: 이모지 아이콘 + 제목 + 설명. 이미지 없이 아이콘만 사용

    - card-dark-overlay: 다크 배경 이미지 위 그라데이션 + 흰 텍스트. 짧은 키워드 강조

    - card-numbered: 번호 원형 + 제목 + 설명. 이미지 없고 순서 중심

    - card-stat-number: 큰 숫자 + 단위 + 라벨. 수치 데이터 전용

    - card-tag-image: 좌상단 색상 태그 + 이미지. 카테고리 태그가 핵심 구분자

    - 이 블록: 상단에 실제 이미지(160px 높이) + 색상 밑줄 제목 + 불릿 목록. 이미지가 콘텐츠의 핵심

    적합: 이미지(사진/도표)가 각 항목의 핵심이고, 하단에 불릿으로 세부 설명이 필요할 때

    부적합: 이미지 없음 → card-icon-desc, 카테고리 태그 분류 → card-tag-image, 키워드만 → card-dark-overlay

    '
  when: '이미지가 핵심인 항목 3개를 나란히. 예: 설계단계(3D모델) / 시공단계(현장) / 유지관리(자산).'
  not_for: 이미지 없이 텍스트만 → card-icon-desc. 키워드+짧은 설명만 → card-dark-overlay. 2개 비교 → compare-pill-pair.
  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: 3~5열 카드. 다크 배경 이미지 + 그라데이션 오버레이 + 흰색 굵은 제목 + 짧은 설명.
  visual_diff: '유사 블록과의 차이:

    - card-icon-desc: 밝은 배경 + 이모지 아이콘 + 설명(3줄). 정보 전달 중심

    - card-image-3col: 밝은 배경 + 상단 이미지 + 색상 밑줄 제목 + 불릿. 이미지 콘텐츠 중심

    - card-numbered: 밝은 배경 + 번호 원형 + 설명. 순서 나열

    - card-stat-number: 큰 숫자 강조. 수치 데이터 전용

    - card-tag-image: 밝은 배경 + 색상 태그 + 이미지. 카테고리 분류

    - 이 블록: 다크 배경 이미지 위에 그라데이션 오버레이 + 흰색 텍스트. 시각적 임팩트 극대화. 설명 2줄 이내

    적합: 키워드를 시각적으로 강렬하게 강조. 짧은 텍스트(제목+1~2줄)만 필요할 때

    부적합: 긴 설명(3줄+) → card-icon-desc, 이미지가 콘텐츠 → card-image-3col, 순서 → card-numbered

    '
  when: '키워드를 시각적으로 강조할 때. 짧은 설명(2줄 이내)과 함께. 예: 협업지원 / 오류감소 / 생산성향상.'
  not_for: 긴 설명(3줄+) → card-icon-desc. 이미지가 크게 보여야 함 → card-image-3col. 순서/단계 → process-horizontal.
  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: 3열 카드. 좌상단 색상 태그 라벨 + 이미지 + 제목 + 설명.
  visual_diff: '유사 블록과의 차이:

    - card-icon-desc: 이모지 아이콘 + 제목 + 설명. 태그/이미지 없음

    - card-image-3col: 상단 이미지 + 색상 밑줄 제목 + 불릿. 태그 없이 이미지가 핵심

    - card-dark-overlay: 다크 배경 이미지 + 흰 텍스트. 키워드 강조용

    - card-numbered: 번호 원형 + 제목 + 설명. 순서형

    - card-stat-number: 큰 숫자 + 단위. 수치 전용

    - 이 블록: 좌상단에 색상 태그 라벨이 카드를 분류. 태그 색상으로 카테고리 시각 구분 + 이미지 + 제목

    적합: 카테고리 태그로 분류하는 것이 핵심일 때. 업종/유형별 색상 구분이 필요한 경우

    부적합: 태그 불필요 → card-image-3col, 이미지 없음 → card-icon-desc, 수치 → card-stat-number

    '
  when: '카테고리 태그로 분류가 핵심일 때. 예: 제조업(파란) / 건축(초록) / 인프라(빨간).'
  not_for: 태그 불필요 → card-image-3col. 이미지 없음 → card-icon-desc.
  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열. 중앙 큰 이모지 아이콘(2.5rem) + 굵은 제목 + 설명. 밝은 배경.
  visual_diff: '유사 블록과의 차이:

    - card-image-3col: 상단에 실제 이미지(160px) + 색상 밑줄 제목 + 불릿 목록

    - card-dark-overlay: 다크 배경 이미지 위 그라데이션 + 흰 텍스트. 키워드 강조용

    - card-numbered: 번호 원형(①②③) + 제목 + 설명. 순서 있는 나열

    - card-stat-number: 큰 숫자(36px) + 단위 + 라벨. 수치 데이터 전용

    - card-tag-image: 좌상단 색상 태그 + 이미지 + 제목. 카테고리 분류 강조

    - 이 블록: 이모지 아이콘(2.5rem)이 중앙에 크게 + 제목 + 설명. 밝은 배경 그리드. 이미지 없이 아이콘으로 시각 구분

    적합: 이미지 없이 독립적 개념/특성을 나열. 순서 없고 아이콘으로 직관적 구분이 가능할 때

    부적합: 실제 사진 필요 → card-image-3col, 순서 번호 → card-numbered, 수치 → card-stat-number

    '
  when: '독립적인 항목/개념/특성을 이모지 아이콘과 함께 나열. 순서 없는 개별 항목. 예: 🔧기술기반 / 💻S/W역량 / 🌏여건조성.'
  not_for: 이미지(사진) 필요 → card-image-3col. 순서 번호 필요 → card-numbered. 텍스트만(아이콘 불필요) →
    dark-bullet-list.
  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열 카드. 각 카드 상단 색상 헤더(제목+서브) + 이미지 + 불릿 목록.
  visual_diff: '유사 블록과의 차이:

    - compare-2col-split: 표 형식 2단 비교, 중앙 기준 라벨. 2개 대상 전용

    - compare-3col-badge: 표 형식 3열, VS 배지. 행 단위 비교

    - comparison-2col: 좌우 텍스트 블록, 2개 대비. 표/카드 아님

    - compare-pill-pair: 둥근 박스 2개 + VS. 헤더 역할만

    - 이 블록: 3개 독립 카드가 나란히. 카드마다 고유 색상 헤더+이미지+불릿. 카드형 비교

    적합: 3개 카테고리를 각각 독립적으로 설명하면서 비교. 카테고리별 색상 구분이 필요할 때

    부적합: 2개 비교 → comparison-2col/compare-pill-pair, 행별 대조 → compare-3col-badge

    '
  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: 세로 나열. 좌측 색상 마커(단계명) + 우측 콘텐츠 박스(제목+이미지+설명). 연결선.
  when: '생애주기/프로세스 단계별 설명. 각 단계에 이미지+상세 설명. 예: 설계→시공→운영 단계.'
  not_for: 가로 흐름(간단) → process-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, 테두리+그림자) + 제목 + 설명. 중앙 정렬.
  when: 포트폴리오형 나열. 비전/가치 표현. 원형 이미지가 있는 경우.
  not_for: 사각형 이미지 → card-image-3col. 이미지 없음 → card-icon-desc.
  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열. 매우 큰 숫자(36px, 색상) + 단위 + 라벨 + 설명.
  visual_diff: '유사 블록과의 차이:

    - card-icon-desc: 이모지 아이콘 + 제목 + 설명. 텍스트 중심의 개념 나열

    - card-image-3col: 상단 이미지 + 밑줄 제목 + 불릿. 이미지 콘텐츠 중심

    - card-dark-overlay: 다크 배경 + 흰 텍스트. 키워드 강조

    - card-numbered: 번호 원형 + 제목 + 설명. 순서형 나열

    - card-tag-image: 색상 태그 + 이미지. 카테고리 분류

    - 이 블록: 숫자가 36px로 매우 크게 표시 + 색상 강조 + 단위 + 라벨. 수치 데이터 시각화 전용

    적합: KPI, 성과 수치, 달성률 등 숫자 자체가 핵심 메시지인 경우

    부적합: 텍스트 설명 중심 → card-icon-desc, 순서 나열 → card-numbered, 이미지 → card-image-3col

    '
  when: 'KPI, 성과 수치, 달성률, 비용 절감율 등 숫자가 핵심인 데이터. 예: 30% 절감 / 220명+.'
  not_for: 숫자가 아닌 텍스트 항목 → card-icon-desc. 비교 구조 → compare-3col-badge.
  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: 세로 나열. 색상 원형 번호(①②③) + 제목 + 설명. 밝은 배경 카드.
  visual_diff: '유사 블록과의 차이:

    - card-icon-desc: 이모지 아이콘 + 제목 + 설명 그리드. 순서 없이 독립 항목 나열

    - card-image-3col: 상단 이미지 + 색상 밑줄 제목 + 불릿. 이미지 중심

    - card-dark-overlay: 다크 배경 이미지 + 흰 텍스트. 키워드 강조

    - card-stat-number: 큰 숫자(36px) + 단위. 수치 데이터 전용

    - card-tag-image: 좌상단 색상 태그 + 이미지. 카테고리 분류

    - 이 블록: 색상 원형 번호(①②③)가 핵심 구분자. 세로 나열. 순서/정의 목록에 최적

    적합: 번호가 의미 있는 순서형 나열 또는 번호로 구분되는 정의 목록. sidebar에도 적합

    부적합: 순서 없는 독립 항목 → card-icon-desc, 이미지 필요 → card-image-3col, 수치 → card-stat-number

    '
  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: 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 메시지(28px bold, 중앙, 흰 텍스트, 빨간 강조).
    3D 빨간 리본 배지가 빨간 테두리 흰 박스(r:20) 위에 걸침.
    박스 안에 N열 아이콘 카드(구분선). 각 카드: 아이콘 + 영문 제목(20px/900) + 한국어 부제(15px/500).
  visual_diff: >
    - card-icon-desc: 밝은 배경, 이모지+제목+설명. 리본/테두리 없음.
    - card-dark-overlay: 다크 배경 이미지+흰 텍스트. 카드 개별 배경.
    - 이 블록: 다크 배경 + 빨간 리본 배지 + 빨간 테두리 흰 박스 안 N열 카드.
    적합: 핵심 목표/가치를 N개 키워드로 선언하며 시각적 임팩트 필요할 때.
    부적합: 상세 설명 → card-icon-desc, 비교 → compare-2col-badge.
  when: >
    핵심 목표나 가치를 N개 키워드로 선언할 때.
    각 키워드에 아이콘이나 이미지가 있을 때.
    프레젠테이션형 임팩트가 필요할 때.
  not_for: >
    비교/대조 → compare-2col-badge.
    상세 설명 → card-icon-desc.
    순서/단계 → 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: >
    좌우 그라디언트 배경(워 브라운 vs 다크틸)으로 나뉜 2열 비교.
    비대칭 라운드 헤더(좌: 우라운드+우정렬, 우: 좌라운드+좌정렬).
    N개 섹션(소제목 18px/900 + 불릿 14px/700) 반복.
    CSS Grid 행 공유로 좌/우 섹션 제목이 같은 Y선에 정렬.
    첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능.
  visual_diff: >
    - compare-2col-badge: 배지+2열, 단순 비교. 섹션 반복 없음.
    - comparison-2col: 좌우 텍스트 블록 비교. 그라디언트 없음.
    - 이 블록: 그라디언트+비대칭 헤더+N섹션 행 정렬. 가장 상세한 비교.
    적합: 두 카테고리에 각각 3개+ 하위 항목이 있는 상세 비교.
    부적합: 간단 비교 → compare-2col-badge, 표 형식 → compare-2col-split.
  when: >
    두 카테고리를 상세하게 비교할 때. 각 카테고리에 여러 하위 항목.
    과정 vs 결과, As-Is vs To-Be, 문제 vs 해결 구조.
  not_for: >
    간단 비교(본문 짧을 때) → compare-2col-badge.
    항목별 행 비교(표 형식) → compare-2col-split.
    3열 비교 → compare-3col-badge.
  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: >
    상단 배지 바(틸 그라디언트 + 흰색 텍스트, r:12) 아래
    2열 비교 레이아웃. 좌/우 각각 대제목(22px/900) + 본문(15px/500).
    중앙 세로 구분선. 흰색 컨테이너(r:16). 선택적 하단 Hero 메시지.
  visual_diff: >
    - compare-2col-split: 중앙 '기준 라벨' 열이 있는 3열 표. 행별 상세 비교.
    - comparison-2col: 좌우 텍스트 블록 비교. 표 없이 자유 형식.
    - compare-pill-pair: 둥근 박스 2개 + VS. 헤더 역할만.
    - 이 블록: 배지 헤더로 상위 주제 선언 + 2열 비교 + 선택적 결론 문구.
    적합: 두 개념/전략의 정의를 비교하며 상위 주제를 배지로 명시할 때.
    부적합: 항목별 행 비교 → compare-2col-split, 시각적 대비만 → compare-pill-pair.
  when: >
    두 개념/방법/전략을 나란히 비교할 때. 배지 헤더로 상위 주제를 명시.
    예: "정책 달성 — Engn. Solution vs DfMA", "현재 vs 미래"
  not_for: >
    항목별 행 비교(5행+) → compare-2col-split.
    3개 비교 → compare-3col-badge.
    간단 텍스트만 → comparison-2col.
  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 배지) | 우(파란 헤더). 행별 비교.
  visual_diff: '유사 블록과의 차이:

    - compare-2col-split: 중앙에 ''기준 라벨'' 열이 있는 3열 표. 비교 기준이 행마다 명시됨

    - comparison-2col: 표가 아닌 좌우 텍스트 블록. CSS var로 색상 구분

    - compare-pill-pair: 둥근 박스 2개 + VS. 비교 헤더 역할만 수행

    - card-compare-3col: 3개 독립 카드로 비교. 카드별 색상 헤더+이미지+불릿

    - 이 블록: VS 배지가 중앙 열에 고정된 3열 표. 좌/우 헤더 색상이 다르고 행 단위로 대조

    적합: 두 개념의 다항목(5행+) 체계적 비교. 비교 기준 없이 좌/우 값만 대조할 때

    부적합: 비교 기준 라벨 필요 → compare-2col-split, 3개 카테고리 비교 → card-compare-3col

    '
  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.
  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: 파란 헤더(좌/구분/우) + 행별 좌:항목 | 중앙:기준 라벨(파란) | 우:항목. 상세 비교.
  visual_diff: '유사 블록과의 차이:

    - compare-3col-badge: 3열 표에 VS 배지가 중앙에 있고 행별 비교. 헤더가 좌/우만 구분

    - comparison-2col: CSS var 기반 좌우 텍스트 비교. 표가 아니라 자유 텍스트 블록

    - compare-pill-pair: 둥근 박스 2개 + VS. 비교 헤더 역할만 하고 세부 항목 없음

    - card-compare-3col: 3개 독립 카드로 비교. 각 카드에 색상 헤더+불릿

    - 이 블록: 중앙에 ''기준 라벨'' 열이 있는 3열 표. 행마다 비교 기준(정의/범위/역할 등)이 명시됨

    적합: 비교 기준이 명확하고 항목별(5행+) 상세 대조가 필요한 경우

    부적합: 간단한 2~3항목 비교 → comparison-2col, 시각적 대비만 → compare-pill-pair

    '
  when: '두 기술/개념의 항목별 상세 비교. 중앙에 비교 기준 라벨. 예: DX vs BIM — 정의/범위/역할 비교. 원본에 이미 비교표
    데이터가 있을 때.'
  not_for: VS 배지 → compare-3col-badge. 범용 데이터 → table-simple-striped. 간단 A vs B(2~3항목)
    → comparison-2col.
  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: 진한 남색 헤더 + 줄무늬 행 교차. 첫 열 굵은 글씨. 범용 데이터 표.
  when: '비교가 아닌 일반 데이터 표. 스펙표, 일정표, 항목 목록. 예: 구분/현재/목표/비고.'
  not_for: A vs B 비교 → compare-3col-badge 또는 compare-2col-split.
  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. 진한 파란 큰 원(중심) + 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.
  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: 파란 그라데이션 원(190px) + 이중 테두리 + 중앙 흰색 텍스트.
  when: 섹션 전환점에서 키워드를 원형으로 강조. 아래에 카드/표가 올 때 주제 선언.
  not_for: 본문 텍스트 → topic-header 계열. 결론 한 줄 → 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'. 하늘색 테두리 + 시안 텍스트.
  visual_diff: '유사 블록과의 차이:

    - compare-2col-split: 3열 표, 행별 기준 라벨+좌우 항목. 상세 비교용

    - compare-3col-badge: 3열 표, VS 배지 중앙. 다항목 비교용

    - comparison-2col: 좌우 텍스트 블록, 파란/빨간 밑줄. 문단형 비교

    - card-compare-3col: 3개 독립 카드, 색상 헤더+불릿

    - 이 블록: 둥근 필(pill) 박스 2개 + VS 텍스트만. 세부 항목 없이 대비 선언만 수행

    적합: 비교 테이블 위에 헤더로 배치. 두 개념의 시각적 대비를 짧게 선언할 때

    부적합: 세부 비교 항목 필요 → compare-3col-badge/compare-2col-split, 텍스트 설명 → comparison-2col

    '
  when: '2개 개념 시각적 대비. 비교 테이블 위 헤더로 사용. 예: "DX 협업 프로세스" VS "BIM 정보 관리".'
  not_for: 상세 비교(5행+) → compare-3col-badge. 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: 가로 방향. 파란 원형 번호 + 제목 + 설명(카드). → 화살표 연결.
  visual_diff: '유사 블록과의 차이:

    - flow-arrow-horizontal: SVG 캡슐 + 화살표만. 라벨 8자 이내. 설명 없이 흐름만 표현. 컴팩트(50px)

    - 이 블록: 파란 원형 번호 + 제목 + 설명이 있는 카드 + 화살표 연결. 각 단계에 상세 설명 포함

    적합: 각 단계에 제목+설명이 필요한 상세 프로세스 흐름. 라벨이 긴 경우(8자 초과)

    부적합: 짧은 키워드만으로 흐름 표현 → flow-arrow-horizontal, 높이 예산 부족 → flow-arrow-horizontal

    '
  when: 논리적 순서가 있는 단계를 가로로. A→B→C→D 프로세스 흐름. 각 단계에 제목+설명이 필요할 때.
  not_for: 독립 사례 나열(순서 없음) → card-icon-desc 또는 dark-bullet-list. 세로 나열 → card-numbered.
    간결한 흐름(설명 불필요) → flow-arrow-horizontal.
  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. 색상 둥근 캡슐이 가로 나열 + 사이 화살표. 컴팩트. 각 캡슐 120px 폭.
  visual_diff: '유사 블록과의 차이:

    - process-horizontal: 파란 원형 번호 + 제목 + 설명 카드 + 화살표. 각 단계에 제목+설명이 있는 상세 흐름

    - 이 블록: SVG 캡슐(120px)이 가로 나열 + 사이 화살표. 라벨만(8자 이내). 설명 없이 흐름만 표현. 컴팩트

    적합: 짧은 키워드(8자 이내)로 순서/흐름만 간결하게 보여줄 때. 높이 예산이 적을 때

    부적합: 각 단계에 설명 필요 → process-horizontal, 라벨 8자 초과 → process-horizontal

    '
  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.
  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 그라데이션 원 안에 큰 글자(G,S,I,M 등 약어) + 아래 라벨 + 설명.
  when: '약어 풀이. 핵심 키워드를 원형으로 시각 강조. 예: G(Geographic) + S(Structure) + I(Information)
    + M(Model).'
  not_for: 아이콘+설명 → card-icon-desc. 용어 정의(문장형) → card-numbered. 약어가 아닌 일반 텍스트 → 사용
    금지.
  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: 좌상단 ❝ + 우하단 ❞ 큰따옴표 장식. 연한 배경 박스 + 인용문 + 우측 출처.
  visual_diff: '유사 블록과의 차이:

    - quote-question: 파란 배경 + 파란 테두리 + 큰 질문(22px). 독자에게 질문을 던지는 구조

    - callout-warning: 빨간 배경 + 경고 아이콘 + 설명. 문제점/위험 경고용

    - callout-solution: 파란 배경 + 솔루션 아이콘 + 설명. 해결책 제시용

    - 이 블록: 큰따옴표(❝❞) 장식이 좌상/우하에 배치. 연한 배경 + 인용문 텍스트 + 출처. 인용 형식

    적합: 출처가 있는 인용문. 권위 있는 발언/보고서를 인용 형태로 강조할 때

    부적합: 질문형 → quote-question, 문제 경고 → callout-warning, 해결책 → callout-solution

    '
  when: 임팩트 있는 인용문. 문제 제기를 인용 형태로 강조. 출처가 있는 인용.
  not_for: 짧은 질문(1~2줄) → quote-question. 결론 한 줄 강조 → banner-gradient. 불릿 나열 → dark-bullet-list.
  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: 밝은 파란 배경 + 파란 테두리 + 큰 질문 텍스트(22px) + 부연 설명.
  visual_diff: '유사 블록과의 차이:

    - quote-big-mark: 큰따옴표 장식 + 인용문 + 출처. 타인의 말을 인용하는 형식

    - callout-warning: 빨간 배경 + 경고 아이콘. 문제점 경고. 부정적 톤

    - callout-solution: 파란 배경 + 솔루션 아이콘. 해결책 제시. 긍정적 톤

    - 이 블록: 파란 배경+테두리 + 큰 질문(22px bold). 독자에게 직접 질문하는 구조. 부연 설명 포함

    적합: 독자에게 질문을 던져 문제 인식을 유도하는 전환점. 물음표로 끝나는 핵심 질문

    부적합: 타인 인용(출처) → quote-big-mark, 경고 → callout-warning, 해결책 → callout-solution

    '
  when: '독자에게 질문을 던져 문제 인식을 유도. 전환점. 예: "지금의 방식으로도 가능할까?"'
  not_for: 인용(출처 있음) → quote-big-mark. 결론 선언 → banner-gradient. 경고/문제 → callout-warning.
  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단. 좌 파란 헤더(밑줄) + 우 빨간 헤더(밑줄). 중앙 구분선. 서브타이틀+본문.
  visual_diff: '유사 블록과의 차이:

    - compare-2col-split: 표 형식. 행마다 기준 라벨+좌우 셀. 정형화된 비교

    - compare-3col-badge: 표 형식. VS 배지 중앙 열. 다항목 행별 비교

    - compare-pill-pair: 둥근 박스 2개 + VS. 헤더 역할만, 세부 내용 없음

    - card-compare-3col: 3개 독립 카드, 카드별 색상 헤더+불릿

    - 이 블록: 자유 텍스트 좌우 블록. 좌=파란 밑줄, 우=빨간 밑줄. CSS var 사용. 표가 아니라 문단형

    적합: 2~3항목의 간결한 대비. 장단점, Before/After. 자유로운 텍스트 비교

    부적합: 5행+ 다항목 비교 → compare-3col-badge/compare-2col-split, 3개 비교 → card-compare-3col

    '
  when: 'A vs B 간단 비교. 2~3개 항목을 좌우로 대비. 장단점, Before/After 등 대비 구조. 예: BIM(하위기술) vs
    DX(상위개념).'
  not_for: 다항목 표(5행+) → compare-3col-badge. 결론 한 줄 강조 → banner-gradient. 핵심 메시지 선언
    → banner-gradient. footer에서 결론 강조용으로 쓰지 마라.
  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: 전체 너비 파란 그라데이션 배경(둥근 모서리 8px) + 중앙 흰색 굵은 텍스트(16px) + 선택적 서브텍스트.
  when: '★ 결론 강조에 가장 적합. 핵심 메시지 한 줄 선언. footer 배치에 최적(compact, 50~60px). 페이지의 "기억해야
    할 단 하나의 문장". 예: "BIM은 DX의 기초가 되는 일부분이다. DX ≠ BIM"'
  not_for: 인용(출처) → 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: 짙은 남색 배경 + 파란 제목 + 흰 텍스트 불릿. 파란 불릿 마커. 시각적 무게감.
  when: ★ 독립적인 사례/증거/포인트를 나열할 때 적합. 순서 없는 항목을 강조하며 나열. 정책 문서 사례, 근거 자료 나열.
  not_for: 밝은 배경 → card-icon-desc 또는 card-numbered. 순서가 있는 단계 → card-numbered 또는 process-horizontal.
    시각화(다이어그램) → venn-diagram.
  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: 가로 색상 구간들. 각 구간에 흰 라벨. 카테고리 색상 분류 바.
  when: '카테고리별 색상 분류를 한 줄로. 예: 상용(회색) | 3rd Party(파랑) | 전문SW(빨강).'
  not_for: 탭 전환 → 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: 밝은 파란 배경 + 파란 테두리 + 아이콘 + 파란 제목 + 설명 + 출처.
  visual_diff: '유사 블록과의 차이:

    - quote-big-mark: 큰따옴표 장식 + 인용문 + 출처. 인용 형식

    - quote-question: 파란 배경 + 큰 질문(22px). 독자에게 질문하는 구조

    - callout-warning: 빨간 배경 + 경고 아이콘 + 빨간 텍스트. 문제점/위험 경고용

    - 이 블록: 파란 배경+테두리 + 솔루션 아이콘 + 파란 제목 + 설명(최대 4줄) + 출처. 긍정적/해결책 톤

    적합: 핵심 해결책, 방향성, 솔루션을 강조. 긴 설명(3~4줄)과 출처가 필요할 때

    부적합: 경고/문제 → callout-warning, 인용 → quote-big-mark, 질문 → quote-question

    '
  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: 연한 빨간 배경 + 빨간 테두리 + 아이콘 + 빨간 제목 + 진한 빨간 설명.
  visual_diff: '유사 블록과의 차이:

    - quote-big-mark: 큰따옴표 장식 + 인용문 + 출처. 인용 형식으로 중립적 톤

    - quote-question: 파란 배경 + 큰 질문. 독자에게 질문을 던지는 구조

    - callout-solution: 파란 배경 + 솔루션 아이콘 + 설명. 해결책/긍정적 메시지

    - 이 블록: 빨간 배경+테두리 + 경고 아이콘 + 빨간 제목/설명. 부정적/경고 톤. 문제점 강조 전용

    적합: 문제점 지적, 잘못된 인식 경고, 위험 요소 강조. 빨간색으로 시각적 경고 전달

    부적합: 해결책 → callout-solution, 인용 → quote-big-mark, 질문 → quote-question

    '
  when: '문제점 지적, 잘못된 인식 경고, 주의사항. 문제 제기 purpose에 적합. 예: "⚠️ 현재 접근 방식의 한계".'
  not_for: 해결책 → callout-solution. 인용 → quote-big-mark. 결론 → banner-gradient.
  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: 가로 탭 버튼. 선택됨=색상 배경+흰 텍스트, 나머지=회색. 밝은 바탕.
  when: '카테고리 전환/분류 표시. 현재 선택된 항목 강조. 예: 제조 | 건축 | [인프라/토목].'
  not_for: 색상 바 → highlight-strip. 실제 클릭 전환 미지원.
  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: 좌우 가는 회색 선 + 중앙 작은 회색 텍스트(13px bold). 시각적 휴식점.
  when: 'sidebar 영역의 섹션 라벨. 주제 전환점에 가벼운 구분. 예: ── 용어 정의 ──'
  not_for: 강한 구분 → section-header-bar. 결론 → banner-gradient. body 영역 메인 제목 → topic
    계열.
  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장 나란히. 각 캡션 선택.
  when: 시공 사진 2장 나란히, 현장 비교.
  not_for: 4장 → image-grid-2x2. 이미지+텍스트 → 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
        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장 2x2 격자. 각 캡션 선택.
  when: 현장 사진 4장, 4개 관점 이미지.
  not_for: 2장 → image-row-2col. 이미지+텍스트 → image-side-text.
  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 고정) + 우측 제목+설명+불릿. 가로 배치.
  when: 이미지에 대한 설명. 제품/시스템 소개. 다이어그램+해설.
  not_for: 이미지만 → 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장(둥근 모서리) + 하단 캡션.
  when: 핵심 도표, 대형 다이어그램, 전경 사진을 크게.
  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(파란 라벨). 각 이미지 180px.
  when: 변화 전후 비교. 디지털 전환 전후, 공정 개선 전후.
  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
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: 좌측 보조 + 우측 메인