pattern_id: compare-vs-rows
category: tables
version: 0.1.0
provenance:
  source_frame: "45:20 / Frame 1171281195"
  reference_html: ../block-tests/bim-vs-dx-table.html
  reference_render: ../block-tests/_renders/bim-vs-dx-table.png

description: |
  N개의 카테고리별 비교 행. 각 행 = 좌(A 진영) | 중앙(카테고리 라벨 pill) | 우(B 진영).
  + 헤더(타이틀 + icon, optional) + 메인 pill (A vs. B) + 결론 박스(optional).
  좌/우는 색상으로 대조 (A: brown, B: green).

when:
  relation_type:
    - comparison-2way-categorical
    - vs-tabular
    - before-after-multiline
    - approach-comparison
  content_shape:
    rows: { min: 2, max: 20 }
    has_categories: true

not_for:
  - single-statement
  - hierarchical-tree
  - cyclic-process

slots:
  header:
    type: object
    required: false
    properties:
      title: { type: string, required: true }
      icon:  { type: image, required: false }

  left_label: { type: string, required: true, description: "예: BIM" }
  right_label: { type: string, required: true, description: "예: DX" }
  vs_label: { type: string, default: "vs." }

  rows:
    type: list
    required: true
    min: 2
    max: 20
    item:
      category: { type: string, required: true }
      left:  { type: html_string, required: true, description: "<span class=\"sub\">…</span> 가능" }
      right: { type: html_string, required: true }

  conclusion:
    type: object
    required: false
    properties:
      arrow: { type: image, required: false }
      segments:
        type: list
        item:
          text: { type: string, required: true }
          highlight: { type: boolean, default: false }

  # 색상 토큰 (per side)
  left_color:           { type: color, default: "#5c3714" }
  right_color:          { type: color, default: "#285b4a" }
  pill_bg_from:         { type: color, default: "rgb(40,91,74)" }
  pill_bg_to:           { type: color, default: "rgb(74,64,38)" }
  conclusion_color:     { type: color, default: "#000" }
  conclusion_highlight: { type: color, default: "#ae3607" }

tokens:
  block_w: { default: 1280 }
  row_font_size: { default: "1.4rem" }
  cat_pill_w: { default: "16%" }

min_size_px: { width: 800, height: 400 }
max_size_px: { width: 1920, height: 1500 }

sub_patterns: []
priority: 50

diff_from_reference:
  - "absolute pixel positions → CSS grid + flex (반응형)"
  - "12 rows hardcoded → {% for row in rows %}"
  - "left/right color → CSS 변수"
  - "헤더/결론 모두 optional"
  - "main pill 텍스트 형식 → 좌/우/vs 별 슬롯"