<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{{ title|default("compare-vs-rows") }}</title>
<!--
  Pattern: compare-vs-rows
  Origin: 45:20 / Frame 1171281195
  N개의 카테고리별 비교 행. 각 행 = 좌(A 진영) | 중앙(카테고리 라벨 pill) | 우(B 진영)
  + 헤더(타이틀 + icon) + 메인 pill ("A vs. B") + 결론 박스
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --block-w: {{ block_w|default(1280) }}px;
  --left-color: {{ left_color|default("#5c3714") }};       /* 좌 진영 색 */
  --right-color: {{ right_color|default("#285b4a") }};     /* 우 진영 색 */
  --header-from: {{ header_from|default("#cc5200") }};
  --header-to: {{ header_to|default("#883700") }};
  --pill-bg-from: {{ pill_bg_from|default("rgb(40,91,74)") }};
  --pill-bg-to:   {{ pill_bg_to|default("rgb(74,64,38)") }};
  --conclusion-color: {{ conclusion_color|default("#000") }};
  --conclusion-highlight: {{ conclusion_highlight|default("#ae3607") }};
  --row-font-size: {{ row_font_size|default("1.4rem") }};
  --row-sub-font-size: {{ row_sub_font_size|default("1.2rem") }};
  --cat-pill-w: {{ cat_pill_w|default("16%") }};
  --cat-font-size: {{ cat_font_size|default("1.4rem") }};
  --row-gap: {{ row_gap|default("0.8rem") }};
}
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #e8ecf0;
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh;
  padding: 20px;
}
.block {
  width: var(--block-w);
  background: #ffffff;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: 1.5rem 1.8rem 1.5rem 1.8rem;
}

/* ─── 헤더 ─── */
.header {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.header-icon {
  width: 1.8rem; height: 1.8rem;
  flex: none;
}
.header-icon img { width: 100%; height: 100%; object-fit: contain; }
.header-title {
  font-weight: 700;
  font-size: 1.6rem;
  background-image: linear-gradient(180deg, var(--header-from) 0%, var(--header-to) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 4px rgba(50,44,30,0.4);
}

/* ─── 메인 pill (A vs B) ─── */
.main-pill {
  position: relative;
  height: 2.2rem;
  border-radius: 1.1rem;
  background-image: linear-gradient(270deg,
    var(--pill-bg-from) 0%, color-mix(in srgb, var(--pill-bg-from) 80%, transparent) 30%,
    color-mix(in srgb, var(--pill-bg-to) 80%, transparent) 70%, var(--pill-bg-to) 100%);
  display: grid;
  grid-template-columns: 1fr var(--cat-pill-w) 1fr;
  align-items: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.6rem;
}
.main-pill .l { text-align: center; }
.main-pill .v { text-align: center; }
.main-pill .r { text-align: center; }

/* ─── 비교 표 ─── */
.cmp-table {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}
.cmp-row {
  display: grid;
  grid-template-columns: 1fr var(--cat-pill-w) 1fr;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
}

/* 좌 텍스트 (text-right) */
.cmp-row .left {
  text-align: right;
  font-weight: 700;
  font-size: var(--row-font-size);
  color: var(--left-color);
  line-height: 1.3;
  padding-right: 0.4rem;
}
.cmp-row .left .sub { font-size: var(--row-sub-font-size); }

/* 우 텍스트 (text-left) */
.cmp-row .right {
  text-align: left;
  font-weight: 700;
  font-size: var(--row-font-size);
  color: var(--right-color);
  line-height: 1.3;
  padding-left: 0.4rem;
}
.cmp-row .right .sub { font-size: var(--row-sub-font-size); }

/* 가운데 카테고리 pill */
.cmp-row .cat {
  height: 100%;
  min-height: 2rem;
  border-radius: 0.4rem;
  background-image: linear-gradient(270deg,
    color-mix(in srgb, var(--pill-bg-from) 80%, transparent) 0%,
    color-mix(in srgb, var(--pill-bg-from) 64%, transparent) 30%,
    color-mix(in srgb, var(--pill-bg-to) 64%, transparent) 70%,
    color-mix(in srgb, var(--pill-bg-to) 80%, transparent) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--cat-font-size);
  color: #fff;
  text-align: center;
  padding: 0.4rem 0.6rem;
}

/* ─── 결론 박스 ─── */
.conclusion {
  margin-top: 1rem;
  position: relative;
  border: 2px solid #4a4028;
  background: #fff;
  padding: 1rem 1.5rem 1rem 4rem;
  border-radius: 0.4rem;
}
.conclusion .arrow {
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
}
.conclusion .arrow img { width: 100%; height: 100%; object-fit: contain; }
.conclusion .text {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--conclusion-color);
}
.conclusion .text .hl {
  color: var(--conclusion-highlight);
  font-size: 1.45rem;
}
</style>
</head>
<body>

<div class="block">
  {% if header %}
  <div class="header">
    {% if header.icon %}<div class="header-icon"><img src="{{ header.icon }}" alt=""></div>{% endif %}
    <div class="header-title">{{ header.title }}</div>
  </div>
  {% endif %}

  <div class="main-pill">
    <div class="l">{{ left_label }}</div>
    <div class="v">{{ vs_label|default("vs.") }}</div>
    <div class="r">{{ right_label }}</div>
  </div>

  <div class="cmp-table">
    {% for row in rows %}
    <div class="cmp-row">
      <div class="left">{{ row.left|safe }}</div>
      <div class="cat">{{ row.category }}</div>
      <div class="right">{{ row.right|safe }}</div>
    </div>
    {% endfor %}
  </div>

  {% if conclusion %}
  <div class="conclusion">
    {% if conclusion.arrow %}<div class="arrow"><img src="{{ conclusion.arrow }}" alt=""></div>{% endif %}
    <div class="text">
      {% for seg in conclusion.segments -%}
        {%- if seg.highlight -%}<span class="hl">{{ seg.text }}</span>{%- else -%}<span>{{ seg.text }}</span>{%- endif -%}
      {%- endfor %}
    </div>
  </div>
  {% endif %}
</div>

</body>
</html>
