# Design Agent 블록 카탈로그
# 디자인 팀장이 콘텐츠에 적합한 블록을 선택할 때 참조하는 메뉴판
#
# 규칙:
# - when: 이 블록을 선택해야 하는 상황
# - not_for: 이 블록을 선택하면 안 되는 상황 (유사 블록과 구분 핵심)
# - slots.required: 반드시 채워야 하는 슬롯
# - slots.optional: 있으면 좋지만 없어도 됨
# - character_limits: 팀장의 글자 수 가이드 참고용 (하드코딩 기준 아님, 판단의 참고치)

version: "1.0"

blocks:

  # ──────────────────────────────────────
  # 1. 강조 인용 (quote-block)
  # ──────────────────────────────────────
  - id: quote-block
    name: 강조 인용
    template: blocks/quote-block.html
    visual: "좌측 컬러 라인(빨간색) + 연한 배경 + 인용 텍스트. 출처 표기 가능."
    when: >
      문제 제기, 핵심 주장, 정의 강조할 때.
      원문에서 따온 중요한 문장을 부각시킬 때.
      슬라이드 상단에 배치하여 이슈를 먼저 던질 때.
    not_for: >
      일반 설명문 (일반 텍스트는 card-grid이나 본문 영역 사용).
      사례 나열 (출처가 있는 사례는 example-card 사용).
      결론 요약 (하단 결론은 conclusion-bar 사용).
    slots:
      required:
        - quote_text
      optional:
        - source
    character_limits:
      quote_text: 150
      source: 50

  # ──────────────────────────────────────
  # 2. 카드 그리드 (card-grid)
  # ──────────────────────────────────────
  - id: card-grid
    name: 카드 그리드
    template: blocks/card-grid.html
    visual: "2~4열 카드 나란히. 각 카드 상단에 컬러 액센트 라인. 아이콘/제목/카테고리/설명/출처."
    when: >
      용어를 여러 개 정의할 때 (2~4개).
      개념/기능/특성을 나란히 비교 없이 나열할 때.
      각 항목에 제목+설명+출처가 있을 때.
    not_for: >
      A vs B 직접 비교 (comparison 사용).
      출처가 있는 정책 사례 인용 (example-card 사용, 향후 추가).
      기능 목록이 아이콘 중심일 때 (icon-list 사용, 향후 추가).
      순서가 있는 항목 (process 사용).
    slots:
      required:
        - "cards[]"
      optional: []
    card_fields:
      required:
        - title
        - description
      optional:
        - icon
        - category
        - color
        - source
    character_limits:
      title: 20
      category: 15
      description: 80
      source: 40

  # ──────────────────────────────────────
  # 3. 비교 (comparison)
  # ──────────────────────────────────────
  - id: comparison
    name: 2단 비교
    template: blocks/comparison.html
    visual: "좌우 2단 병렬. 중앙 세로 구분선. 좌측은 파란 액센트, 우측은 빨간 액센트."
    when: >
      A vs B 직접 비교할 때.
      장단점, Before/After, 현재/미래를 대비할 때.
      두 개념의 차이를 명확히 보여줄 때.
    not_for: >
      3개 이상 항목 비교 (comparison-table 사용).
      비교가 아닌 단순 나열 (card-grid 사용).
      수치 비교 (big-number 사용, 향후 추가).
    slots:
      required:
        - left_title
        - left_content
        - right_title
        - right_content
      optional:
        - left_subtitle
        - right_subtitle
    character_limits:
      left_title: 15
      right_title: 15
      left_content: 200
      right_content: 200
      left_subtitle: 30
      right_subtitle: 30

  # ──────────────────────────────────────
  # 4. 관계도 (relationship)
  # ──────────────────────────────────────
  - id: relationship
    name: 관계도 (벤 다이어그램)
    template: blocks/relationship.html
    visual: "큰 원(상위 개념) 안에 작은 원 2~3개(하위 요소). 하단에 관계 설명."
    when: >
      상위-하위 관계, 포함 관계를 시각화할 때.
      기술 융합/통합 구조를 보여줄 때 (예: DX = GIS + BIM + DT).
      2~3개 요소가 하나의 큰 개념에 속함을 보여줄 때.
    not_for: >
      순서가 있는 흐름 (process 사용).
      대등한 비교 (comparison 사용).
      4개 이상 요소 나열 (card-grid 사용).
    slots:
      required:
        - center_label
        - "items[]"
      optional:
        - center_sub
        - description
    item_fields:
      required:
        - label
      optional:
        - color
    character_limits:
      center_label: 15
      center_sub: 20
      item_label: 10
      description: 100

  # ──────────────────────────────────────
  # 5. 프로세스 (process)
  # ──────────────────────────────────────
  - id: process
    name: 단계 흐름
    template: blocks/process.html
    visual: "가로 방향 단계. 각 단계는 번호 원형 + 제목 + 설명. 단계 사이에 → 화살표."
    when: >
      순서가 있는 절차를 보여줄 때 (1→2→3→4).
      워크플로우, 실행 단계, 파이프라인.
      시간 순서가 아닌 논리적 순서.
    not_for: >
      시간 기반 순서 (timeline 사용, 향후 추가).
      순서 없는 항목 나열 (card-grid 사용).
      2개 비교 (comparison 사용).
    slots:
      required:
        - "steps[]"
      optional: []
    step_fields:
      required:
        - title
      optional:
        - number
        - description
    character_limits:
      title: 15
      description: 60

  # ──────────────────────────────────────
  # 6. 결론 바 (conclusion-bar)
  # ──────────────────────────────────────
  - id: conclusion-bar
    name: 결론 바
    template: blocks/conclusion-bar.html
    visual: "전체 너비 진한 배경(primary색). 중앙 정렬 텍스트. 라벨 + 핵심 한 줄."
    when: >
      슬라이드 하단에 핵심 메시지를 한 줄로 마무리할 때.
      전체 내용의 결론, 요약, 시사점을 강조할 때.
      항상 슬라이드 맨 아래에 배치.
    not_for: >
      본문 중간의 강조 (quote-block 사용).
      여러 줄의 요약 (quote-block 또는 card-grid 사용).
    slots:
      required:
        - conclusion_text
      optional:
        - label
    character_limits:
      conclusion_text: 80
      label: 10

  # ──────────────────────────────────────
  # 7. 비교 테이블 (comparison-table)
  # ──────────────────────────────────────
  - id: comparison-table
    name: 비교 테이블
    template: blocks/comparison-table.html
    visual: "표 형태. 진한 배경 헤더 행. 짝수 행 배경 교차. 첫 열 굵은 글씨."
    when: >
      3개 이상 항목을 여러 기준으로 비교할 때.
      다차원 비교, 기능 매트릭스, 스펙 비교.
      행/열이 5개 이상인 구조화된 데이터.
    not_for: >
      2개 항목 비교 (comparison 사용).
      정의/설명 나열 (card-grid 사용).
      순서가 있는 데이터 (process 또는 timeline 사용).
    slots:
      required:
        - "headers[]"
        - "rows[][]"
      optional: []
    character_limits:
      header: 15
      cell: 40

# ──────────────────────────────────────
# 레이아웃 옵션
# ──────────────────────────────────────
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: "프로세스 흐름, 타임라인, 단순 구조, 블록이 1~2개일 때"

  - id: "35-65"
    name: "3.5:6.5 좌우 분할"
    grid_columns: "3.5fr 6.5fr"
    when: "좌측 요약/네비게이션 + 우측 메인 콘텐츠"

  - id: "40-60"
    name: "4:6 좌우 분할"
    grid_columns: "4fr 6fr"
    when: "좌측 설명/정의 + 우측 시각화(관계도/이미지)"

  - id: "60-40"
    name: "6:4 좌우 분할"
    grid_columns: "6fr 4fr"
    when: "좌측 메인 텍스트 + 우측 보조 정보"

# ──────────────────────────────────────
# 향후 추가 예정 블록 (Figma 추출 후)
# ──────────────────────────────────────
# - example-card: 출처+불릿 사례 카드
# - image-block: 이미지 블록 (full/side/thumb)
# - image-gallery: 이미지 갤러리 (2col/3col/2x2)
# - timeline: 타임라인 (vertical/horizontal)
# - big-number: 핵심 지표 (큰 숫자)
# - icon-list: 아이콘 리스트
# - section-title: 섹션 타이틀 (영문+한글)
# - details-block: 자세히보기 (<details>/<summary>)