Figma-to-HTML/templates_staging/cycle-3way-intersect.meta.yaml

pattern_id: cycle-3way-intersect
category: visuals
version: 0.1.0
provenance:
  source_frame: "66:310 / Frame 1171281211"
  reference_html: ../block-tests/bim-goals-3circles.html
  reference_render: ../block-tests/bim_goals_final.png

description: |
  3개의 큰 원이 교차하는 Venn-like 다이어그램. 각 원에 라벨, 컬러,
  코너 액센트 (한자/문자), 사이드 텍스트 라벨이 부착됨.

  이 패턴은 기하학적으로 3-원에 특화되어 있음. 2-원이나 4-원은 별도 패턴
  (cycle-2way-intersect, cycle-4way-intersect)으로 분리.

when:
  relation_type:
    - intersection            # 3개의 개념이 교차/공통
    - venn-3                  # 3원 벤
    - integration             # 3 영역의 통합
    - holistic-view           # 전체적 조감
  content_shape:
    main_concepts: { exact: 3 }
    has_visual_emphasis: true

not_for:
  - linear_process
  - simple_list
  - hierarchical_tree
  - parallel_2_or_4

slots:
  # 3 main circles at fixed geometric positions
  circles:
    type: object
    required: true
    properties:
      top:
        type: object
        required: true
        properties:
          label: { type: tuple, items: [string, string], required: true }  # ["안전과", "품질"]
          fill: { type: gradient, required: true }   # {from, to, angle?, from_pct?, to_pct?}
          ring: { type: gradient, required: true }
          text_shadow: { type: color, required: false }  # 글로우 효과 색
      bot_left:
        type: object
        required: true
        properties:
          label: { type: tuple, items: [string, string], required: true }
          fill: { type: gradient, required: true }
          ring: { type: gradient, required: true }
          text_shadow: { type: color, required: false }
      bot_right:
        type: object
        required: true
        properties:
          label: { type: tuple, items: [string, string], required: true }
          fill: { type: gradient, required: true }
          ring: { type: gradient, required: true }
          text_shadow: { type: color, required: false }

  # 6 accent positions, all optional
  accents:
    type: object
    required: false
    description: 각 main circle의 코너에 부착되는 작은 액센트 원 + 한자/문자
    properties:
      top_left:    { type: accent, required: false }   # 안전과 품질 위 좌
      top_right:   { type: accent, required: false }   # 안전과 품질 위 우
      left_top:    { type: accent, required: false }   # 생산성 향상 좌 위
      left_bot:    { type: accent, required: false }   # 생산성 향상 좌 아래
      right_top:   { type: accent, required: false }   # 소통과 신뢰 우 위
      right_bot:   { type: accent, required: false }   # 소통과 신뢰 우 아래
    accent_schema:
      char: { type: string, required: true, max_length: 2 }
      outer: { type: gradient, required: true }
      inner: { type: gradient, required: true }

  # 6 side label positions × (title + desc) = max 12
  side_labels:
    type: object
    required: false
    description: 각 main circle 옆/위에 붙는 보조 텍스트 라벨
    properties:
      top_left:   { type: label, required: false }
      top_right:  { type: label, required: false }
      mid_left:   { type: label, required: false }
      mid_right:  { type: label, required: false }
      bot_left:   { type: label, required: false }
      bot_right:  { type: label, required: false }
    label_schema:
      title: { type: string, required: false }
      color: { type: color, default: "#000" }
      desc: { type: list, items: string, required: false, max_lines: 3 }

  # Optional decorative elements
  bg_texture:
    type: image
    required: false
    description: 하단 배경 텍스처 (multiply blend)
  decoration:
    type: boolean
    required: false
    default: false
    description: 회전 그라데이션 데코 표시 여부
  arcs:
    type: object
    required: false
    description: 원 사이 연결 아크 (PNG)
    properties:
      top:   { type: image, required: false }
      left:  { type: image, required: false }
      right: { type: image, required: false }

# 디자인 토큰
tokens:
  block_w: { default: 1280, unit: px }
  block_h: { default: 594, unit: px }
  scale:   { default: 0.620694, description: "1280 / 2062.205 (Figma 원본 너비)" }

# zone 적합성
min_size_px:
  width: 960
  height: 480
max_size_px:
  width: 1920
  height: 900

# 적용 sub-pattern
sub_patterns: []

# 우선순위
priority: 60

# 1:1 reference 와의 차이
diff_from_reference:
  - "콘텐츠 (라벨/색상/한자/사이드 텍스트) → 슬롯 변수화"
  - "위치 hardcoded 유지 (3-way 기하학은 패턴 자체가 결정)"
  - "bg_texture / decoration / arcs / accents / side_labels 모두 optional"

# 향후 확장 메모
future_patterns:
  - cycle-2way-intersect: 2 원 교차 (별도 템플릿)
  - cycle-4way-intersect: 4 원 교차 (별도 템플릿, 정사각 배치)
  - cycle-Nway-circular: N 원이 원형으로 둘러싼 형태 (cos/sin 자동 배치)