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
  tags:
    content_pattern: page-hero-title-with-background
    content_example: 페이지 첫 화면 히어로. 배경이미지 위 영문소제목+한글대제목
    item_count: 1
    layout: full-width-hero-500px
- 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
  tags:
    content_pattern: section-divider-bar
    content_example: 같은 페이지 안 섹션 전환. 파란바+중앙제목
    item_count: 1
    layout: full-width-compact-bar
- 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
  tags:
    content_pattern: left-keyword-right-description
    content_example: 좌=용어의혼용 우=DX와BIM이 개념적으로 명확히 정립되지 않은 채 혼용
    item_count: 1
    layout: flex-row-240px-left
- 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
  tags:
    content_pattern: centered-topic-declaration
    content_example: 하나의 주제를 중앙에 크게 선언. 제목+서브타이틀+설명
    item_count: 1
    layout: centered-column
- 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
  tags:
    content_pattern: numbered-section-header
    content_example: 1.건설산업DX → 설명1줄. 섹션시작 번호헤더
    item_count: 1
    has_number: true
    layout: flex-row-number-title
- 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
  tags:
    content_pattern: N-items-image-title-bullets
    content_example: 설계단계(3D모델사진+불릿) | 시공단계(현장사진+불릿) | 유지관리(자산사진+불릿)
    item_count: 2-3
    has_image: true
    has_bullets: true
    layout: N-col-grid
- 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
  tags:
    content_pattern: N-items-image-overlay-keyword
    content_example: 협업지원(회의사진) | 오류감소(모델사진) | 생산성향상(현장사진). 키워드+1~2줄
    item_count: 3-5
    has_image: true
    layout: N-col-grid-dark
- 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
  tags:
    content_pattern: N-items-tag-image-description
    content_example: 제조업(파란태그/사진/설명) | 건축(초록태그/사진/설명) | 인프라(빨간태그/사진/설명)
    item_count: 2-3
    has_tag: true
    has_image: true
    layout: N-col-grid
- 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
  tags:
    content_pattern: N-items-icon-title-description
    content_example: 기술기반(이모지+설명3줄) | SW역량(이모지+설명3줄) | 여건조성(이모지+설명3줄)
    item_count: 2-4
    has_icon: true
    layout: N-col-grid
- 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
  tags:
    content_pattern: 3-independent-cards-colored-header-bullets
    content_example: BIM(파란헤더+불릿) | DfMA(초록헤더+불릿) | DX(주황헤더+불릿)
    item_count: 3
    has_color_bar: true
    has_bullets: true
    layout: 3-col-grid
- 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
  tags:
    content_pattern: N-steps-vertical-timeline
    content_example: 설계단계(이미지+설명) → 시공단계(이미지+설명) → 운영단계(이미지+설명)
    item_count: 2-4
    has_connector: true
    layout: vertical-timeline
- 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
  tags:
    content_pattern: N-items-circular-image-title
    content_example: CEO(원형사진/이름/역할) | CTO(원형사진/이름/역할)
    item_count: 2-3
    has_image: true
    layout: N-col-centered
- 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
  tags:
    content_pattern: N-items-large-number-label
    content_example: 30%(비용절감) | 220명(IT+CIVIL운영) | 5배(생산성향상)
    item_count: 2-4
    has_number: true
    layout: N-col-grid
- 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
  tags:
    content_pattern: N-items-numbered-title-description
    content_example: 1.건설산업DX(설명) | 2.BIM기술(설명) | 3.수행체계(설명)
    item_count: 1-5
    has_number: true
    layout: vertical-list
- 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
  tags:
    content_pattern: N-nodes-circular-orbit
    content_example: 설계→시공→운영→피드백→설계 순환관계
    item_count: 3-5
    has_connector: true
    layout: svg-ellipse-orbit
- 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
  tags:
    content_pattern: N-items-title-colon-description-dark
    content_example: '기반지식: 건설산업 깊은이해 | SW기술: 디지털역량확보 | 투자의지: 대규모투자'
    item_count: 2-8
    has_check_icon: true
    layout: dark-vertical-list
- 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
  tags:
    content_pattern: left-items-center-label-right-items
    content_example: 좌=HW[서버,워크스테이션] | 중앙=EG-BIM | 우=SW[Modeler,GIS,Simulation]
    item_count: 2-14
    has_center_circle: true
    layout: grid-3col-center
- 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
  tags:
    content_pattern: N-categories-vertical-bar-rows
    content_example: 기술[DB구축/SW개발/자동화] | 사람[교육/역량/조직] | 자연[환경/지형]
    item_count: 2-5
    has_color_bar: true
    layout: dark-N-col-strip
- 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
  tags:
    content_pattern: statement-plus-N-keyword-cards-with-badge
    content_example: 선언문=목표를달성한다 → 배지=Solution → [품질,안전,생산성,소통,신뢰]
    item_count: 2-6
    has_badge: true
    has_icon: true
    layout: hero-ribbon-box-cards
- 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
  tags:
    content_pattern: 2-section-comparison-table-and-bullets
    content_example: 좌=과정혁신[프로세스변화/도구전환/솔루션제공] vs 우=결과변화[품질향상/정보물추가/업무효율화]
    item_count: 2-10
    layout: gradient-2col-sections
    source_mdx: '03'
- 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
  tags:
    content_pattern: badge-header-2col-definition-comparison
    content_example: 배지=정책달성 → 좌=Engn.Solution(정의+설명) vs 우=DfMA(정의+설명)
    item_count: 2
    has_badge: true
    layout: badge-2col-divider
- 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
  tags:
    content_pattern: AB-comparison-table-with-VS-badge
    content_example: A=BIM | VS | B=DX → [SW항목,프로세스항목,...] 행별대조
    item_count: 5-7
    has_badge: true
    layout: 3col-table
- 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
  tags:
    content_pattern: criteria-based-2col-comparison-table
    content_example: '[정의:A=~/B=~] [범위:A=~/B=~] [역할:A=~/B=~] 기준라벨중앙열'
    item_count: 5-10
    has_criteria_label: true
    layout: 3col-table-criteria-center
- 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
  tags:
    content_pattern: generic-data-table
    content_example: '[구분/현재/목표/비고] → N행데이터. 비교가아닌 일반표'
    item_count: 3-8
    layout: striped-table
- 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
  tags:
    content_pattern: inclusion-hierarchy-N-circles
    content_example: DX(중심) ⊃ [GIS, BIM, 디지털트윈, IoT]. 포함/융합관계
    item_count: 2-5
    layout: svg-venn
- 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
  tags:
    content_pattern: single-keyword-circle
    content_example: 단일키워드(6자이내) 원형아이콘. 섹션주제선언
    item_count: 1
    layout: centered-circle
- 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
  tags:
    content_pattern: 2-labels-VS-header
    content_example: DX협업프로세스 VS BIM정보관리. 비교표위 헤더용
    item_count: 2
    layout: flex-row-pills-VS
- 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
  tags:
    content_pattern: N-steps-horizontal-flow-with-description
    content_example: 1.현황분석(설명) → 2.전략수립(설명) → 3.실행(설명) → 4.검증(설명)
    item_count: 2-5
    has_number: true
    has_connector: true
    layout: horizontal-flow-cards
- 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
  tags:
    content_pattern: N-steps-keyword-only-flow
    content_example: GIS → SPCC → 토공 → BIM. 키워드(8자이내)만
    item_count: 2-6
    layout: svg-capsule-arrow
- 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
  tags:
    content_pattern: N-abbreviation-circles-with-labels
    content_example: G(Geographic) | S(Structure) | I(Information) | M(Model)
    item_count: 2-5
    has_icon: true
    layout: flex-row-svg-circles
- 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
  tags:
    content_pattern: quotation-with-source
    content_example: 건설산업의디지털전환은필수불가결하다 — 국토교통부보고서
    item_count: 1
    has_source: true
    layout: quote-box-marks
- 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
  tags:
    content_pattern: question-mark-provocation
    content_example: 지금의방식으로도가능할까? + 부연설명2줄
    item_count: 1
    layout: blue-box-question
- 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
  tags:
    content_pattern: 2-freetext-paragraphs-side-by-side
    content_example: 좌=BIM(하위기술설명3줄) vs 우=DX(상위개념설명3줄). 자유문단형
    item_count: 2
    layout: grid-left-divider-right
- 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
  tags:
    content_pattern: conclusion-one-liner-blue-banner
    content_example: BIM은DX의기초가되는일부분이다.DX!=BIM. 결론1줄파란배너
    item_count: 1
    layout: full-width-gradient-bar
- 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
  tags:
    content_pattern: N-independent-points-dark-background
    content_example: 정책시행근거 → [근거1,근거2,근거3,근거4]. 순서없는포인트
    item_count: 2-5
    layout: dark-box-bullets
- 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
  tags:
    content_pattern: N-category-color-segments-one-line
    content_example: 상용SW(회색) | 3rdParty(파랑) | 전문SW(빨강). 색상분류바
    item_count: 2-4
    layout: flex-row-color-segments
- 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: '핵심 해결책, 솔루션, 방향성을 강조. 예: "💡 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
  tags:
    content_pattern: solution-callout-title-description
    content_example: 핵심해결방향 → 설명3줄 → 출처. 긍정적/해결책톤
    item_count: 1
    layout: blue-callout-box
- 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
  tags:
    content_pattern: warning-callout-title-description
    content_example: 현재접근방식의한계 → 문제점설명3줄. 경고/부정적톤
    item_count: 1
    layout: red-callout-box
- 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
  tags:
    content_pattern: N-tabs-one-active
    content_example: 제조 | 건축 | [인프라/토목](선택됨). 탭형카테고리표시
    item_count: 2-5
    layout: flex-row-tabs
- 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
  tags:
    content_pattern: line-text-line-divider
    content_example: ── 용어정의 ── 또는 ── 핵심요약 ──
    item_count: 1
    layout: flex-row-line-text-line
- 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
  tags:
    content_pattern: 2-images-side-by-side
    content_example: 이미지2장나란히. 현장비교, 전후사진
    item_count: 2
    has_image: true
    layout: grid-2col
- 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
  tags:
    content_pattern: 4-images-grid
    content_example: 이미지4장2x2격자. 현장사진, 4관점
    item_count: 4
    has_image: true
    layout: grid-2x2
- 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
  tags:
    content_pattern: image-plus-text-description
    content_example: 좌=시스템스크린샷 우=주요기능3가지불릿
    item_count: 1
    has_image: true
    has_bullets: true
    layout: flex-row-image-text
- 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
  tags:
    content_pattern: single-fullwidth-image
    content_example: 핵심도표 또는 대형다이어그램1장크게+캡션
    item_count: 1
    has_image: true
    layout: full-width-image
- 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
  tags:
    content_pattern: before-after-image-comparison
    content_example: Before(기존도면) → After(3D모델). 라벨+화살표
    item_count: 2
    has_image: true
    has_label: true
    layout: flex-row-before-arrow-after
- id: statement-pill-highlight
  name: 선언문 pill 강조
  category: new
  tags:
    content_pattern: single-declaration-sentence
    content_example: 수행과정 연속화와 관리체계 일원화된 형태의 전용ㆍ전문 S/W 개발 없이는 미래가 없다 | BIM은 건설산업의 DX을 수행하는 과정에서 가장 기초가 되는 일부분 | DX는 필요한 요건과 체계를 갖춘 후 시행해야만 그 효과를 기대할 수 있다
    item_count: 1
    has_highlight: true
    layout: full-width-capsule
    source_mdx: '01'
  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
  tags:
    content_pattern: grouped-items-under-single-label
    content_example: 시공상세정보물 → [3차원 형상의 정보 모델과 D/B, 단계별 시공 시뮬레이션, 안전교육 영상물, 모델에서 추출한 도면, 안전유의사항 상세 표현 도면]
    item_count: 3-7
    has_icon: true
    has_color_bar: true
    has_left_label: true
    layout: diamond-stacked-rows
    source_mdx: '02'
  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
    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
  tags:
    content_pattern: left-categories-right-numbered-issues
    content_example: '좌=[GIS: ArcGIS,QGIS,천지인 | Modeler: Rhino,Blender,EG-BIM,Revit,Civil3D | Simulation: Twin Highway,Infraworks] 우=[1.Model구축 기능위주, 2.고가고사양 전문가용, 3.S/W간 호환불가, 4.성과물 제작 별도, 5.시공현장 반영 한계]'
    left_item_count: 2-4
    right_item_count: 3-6
    has_icon: true
    has_color_bar: true
    has_numbered_badge: true
    layout: split-panel-52-48
    source_mdx: '02'
  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
  padding_overhead_px: 36
  padding_h_px: 0
- id: issues-paired-rows
  name: 이슈 쌍 행 (두루마리 pill)
  category: new
  tags:
    content_pattern: paired-left-right-issues-with-labels
    content_example: 개념부재(BIM을 CAD확장판으로 인식) vs 잘못된접근방식(도구로만 교육) | 방향성상실(외국S/W 방향 따라감) vs 전제조건오류(건축방식을 토목에 적용) | 수행주체혼란(학자발주처 주도, 기업은 눈치) vs 수행방식무지(전환설계로 비용시간 추가) | 외산SW기술예속(범용SW만 사용) vs HW미비(탁상용PC 수준)
    item_count: 2-5
    pair_structure: true
    has_label_pill: true
    has_divider: true
    layout: stacked-paired-rows
    source_mdx: '01'
  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
  tags:
    content_pattern: category-by-category-AB-comparison-table
    content_example: BIM vs DX → [BIM/DX, S/W(상용vs전용40~80개), 프로세스(2D유지vs근본개선), 성과물(3D모델vs정보콘텐츠연계), 활용(일반이해vs혁신), 확장성(분야단절vs전생애주기), 수행개념(단순화vs구체화), CIVIL+IT(소극vs적극), 주체(SW의존vs자체능력), 발주처(평준화vs차별화), 설계사(소규모BIM팀vs220명운영),
      시공사(소극적vs분야확장)]
    item_count: 5-15
    has_category_pill: true
    has_conclusion: true
    layout: 3col-grid-left-center-right
    source_mdx: '01'
  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
  tags:
    content_pattern: 4-category-quadrant-matrix
    content_example: 정책집행[인정주의정책집행+적용효과도사례도없는방침남발] | 수행개념[공학적개념정립부재+본업기술력확보우선개념부재] | 근본취지이해부족[기술투자없는성과창출기대+엔지니어링SW개념부재] | 지속적투자의지부재[근본적역할회피+과거타성에머무르는업계]
    item_count: 4
    subitem_count: 2-4
    has_center_quote: true
    has_ribbon_header: true
    layout: 2x2-grid-center-overlay
    source_mdx: '01'
  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
  tags:
    content_pattern: 3-stakeholder-parallel-bullet-lists
    content_example: 발주자목표[민원재작업예방, 직관화품질향상, 관리편의성, 소통오류최소화, 행정자동화, 정보통합관리, 디지털자산관리] | 시공자목표[시공오류예방, 시각화안전품질, 시공간관리, 의사소통강화, 시공상세도작성, 행정간소화, 생산성향상] | 설계자목표[직관적소통, 오류최소화Claim예방, 상호신뢰, 부가가치창출, 고부가가치산업전환,
      정보일관성관리]
    item_count: 3
    subitem_count: 5-8
    has_badge: true
    has_photo: true
    has_bullet_icon: true
    layout: 3col-equal-flex
    source_mdx: '02'
  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
  tags:
    content_pattern: 3-values-intersecting-venn
    content_example: 안전과품질(安:안전성제고+質:품질향상) × 생산성향상(速:신속정확성증진+利:비용저감부가가치창출) × 소통과신뢰(通:소통이해원활+信:신뢰투명성강화)
    item_count: 3
    subitem_count: 2
    has_accent_char: true
    has_side_labels: true
    layout: positioned-circles-aspect-2to1
    source_mdx: '02'
  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
- id: prerequisites-3col
  name: 필수요건 3열 비교
  category: new
  tags:
    content_pattern: 3-parallel-categories-with-subitems
    content_example: 기술디지털(技術)[깊은기반건설산업토목지식+높은SW기술DigitalTechnology] | 사람역량(人材)[분야별전문지식역량기술자+디지털화역량개발경험많은개발자] | 자연여건(天地)[사회기업제도여건+지속적장기적투자능력의지]
    item_count: 3
    subitem_count: 2
    has_icon: true
    has_color_bar: true
    has_kanji: true
    layout: 3col-bar-heading-desc
    source_mdx: '03'
  template: blocks/new/prerequisites-3col.html
  height_cost: large
  min_height_px: 280
  relation_types:
  - definition
  - comparison
  visual: 3열 비교. 각 열에 세로 gradient 색상 바 + 한자 + 세로 라벨 + 2개 하위 항목(제목+설명). 상하 실선+중간 점선 구분.
  content_structure: '콘텐츠가 이 구조일 때 선택:

    - 정확히 3개 카테고리/필수요건을 나란히 비교

    - 각 카테고리에 고유 색상 + 한자 심볼 + 세로 라벨

    - 각 카테고리 안에 정확히 2개 하위 항목 (제목+설명)

    - 카테고리가 대등한 비중 (기술/사람/자연 같은 균형 구조)

    - category-strip-table과 차이: 이 블록은 한자+세로라벨+2항목 고정, strip-table은 N항목 자유

    예: 기술(技術)[기반지식/SW기술] | 사람(人材)[전문역량/개발경험] | 자연(天地)[여건/투자]

    '
  when: 3개 필수요건/카테고리를 한자 심볼 + 색상 바로 시각화하며 각각 2개 하위 항목으로 비교할 때.
  not_for: '- 카테고리가 3개가 아님 → category-strip-table (N열)

    - 하위 항목이 2개가 아닌 N개 → category-strip-table

    - 한자/심볼 불필요 → card-compare-3col

    - 독립 카드형 비교 → card-icon-desc

    '
  purpose_fit:
  - 필수요건
  - 분류
  - 비교
  slots:
    required:
    - columns
    optional: []
  schema:
    columns:
      fixed_count: 3
      note: 각 column에 name, sub, kanji_top, kanji_bottom, bar_gradient, heading_gradient_top/bottom, items[2]{heading, desc}
  padding_overhead_px: 0
  padding_h_px: 0
- id: process-product-2col
  name: 프로세스/프로덕트 2단 비교 (비대칭)
  category: redesign
  template: blocks/redesign/process-product-2col.html
  height_cost: large
  min_height_px: 200
  relation_types:
  - comparison
  - cause_effect
  visual: 좌우 2단 비대칭 비교. 좌측에 As-is→To-be 비교표 + 추가 섹션. 우측에 불릿 섹션. 좌측 warm gradient, 우측 teal gradient.
  content_structure: |
    콘텐츠가 이 구조일 때 선택:
    - 2개 대주제를 좌우로 비교하되, 좌우가 비대칭 (한쪽에 표, 한쪽에 불릿)
    - 좌측에 As-is→To-be 전환 비교가 있음
    - 우측은 결과/변화를 불릿으로 나열
    - 대칭 비교(좌우 같은 구조)는 compare-detail-gradient 사용
  when: 2개 대주제를 좌우 비대칭으로 비교할 때. 한쪽에 전환 비교(As-is→To-be)가 있고 다른 쪽은 불릿 나열.
  not_for: |
    - 좌우 대칭 비교 → compare-detail-gradient
    - 3개 이상 병렬 → prerequisites-3col 또는 card 계열
    - 단일 목록 → dark-bullet-list
  purpose_fit:
  - 핵심전달
  - 구조시각화
  tags:
    content_pattern: "2-section-asymmetric-compare-table-and-bullets"
    content_example: "좌=과정혁신[Analogue→Digital 비교표+GIS연계+Solution] vs 우=결과변화[품질향상+정보물추가+효율화]"
    item_count: 2
    has_compare_table: true
    layout: "flex-2col-asymmetric"
    source_mdx: "03"
  slide_font:
    header: 13px
    mid_title: 12px
    body: 11px
  slots:
    required:
    - left_title
    - right_title
    - left_sections[]
    - right_sections[]
    optional:
    - left_compare
  schema:
    left_title:
      type: string
    right_title:
      type: string
    left_compare:
      type: object
      properties:
        title: string
        left_items: array
        right_items: array
    left_sections:
      type: array
      items:
        title: string
        bullets: array
    right_sections:
      type: array
      items:
        title: string
        bullets: array
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: 좌측 보조 + 우측 메인