C.E.L_Slide_test2/templates/blocks/new/issues-paired-rows.html

<!-- 이슈 쌍 행: 좌/우 pill(두루마리 이미지) + 2열 텍스트 박스 -->
<!--
  📋 issues-paired-rows
  ─────────────────
  용도: 좌/우 대비되는 이슈를 쌍으로 나열. pill(두루마리)이 박스 위/아래로 걸침.
  슬롯:
    header (icon, title) — 선택
    pill_bg — 두루마리 배경 이미지 (R16 프레임 배치, crop 대상이므로 이미지 유지)
    rows[] (left {label, text}, right {label, text}, pills_bottom: bool)
  Figma 원본: Frame 1171281194 (node 45:19, 1857×1326)
  수학적 계산:
    scale = 1280 / 1857 = 0.68933
    pill: 458×95.6, width=24.7% of row
    pill R16 이미지 프레임: left:-45.3% width:145.3% (좌), left:0 width:151.25% (우)
    bottom pill: rotate(180deg) + 이미지 반전
    text: 36px → 25px, lh 65px → 45px
    pill label: 40px → 28px
    box: border 3px #60a451, radius 30px, bg rgba(250,237,203,0.15) (MCP 확인)
    divider: 1px dashed rgba(96,164,81,0.4)
  CSS 요소: box border/bg/radius, divider, header gradient text
  이미지 요소: pill_bg (두루마리, R16 crop), header icon
-->
<div class="block-ipr">
  {% if header %}
  <div class="ipr-header">
    {% if header.icon %}<div class="ipr-header-icon"><img src="{{ header.icon | default('svg/icon_header.png') }}" alt=""></div>{% endif %}
    <div class="ipr-header-title">{{ header.title }}</div>
  </div>
  {% endif %}

  <div class="ipr-rows">
    {% for row in rows %}
    <div class="ipr-row">
      {% if not row.pills_bottom %}
      <div class="ipr-pills ipr-pills--top">
        <div class="ipr-pill ipr-pill--left">
          {% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
          <span class="ipr-pill-label">{{ row.left.label }}</span>
        </div>
        <div class="ipr-pill ipr-pill--right">
          {% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
          <span class="ipr-pill-label">{{ row.right.label }}</span>
        </div>
      </div>
      {% endif %}

      <div class="ipr-text-row">
        <div class="ipr-text">{{ row.left.text|safe }}</div>
        <div class="ipr-divider"></div>
        <div class="ipr-text ipr-text--right">{{ row.right.text|safe }}</div>
      </div>

      {% if row.pills_bottom %}
      <div class="ipr-pills ipr-pills--bottom">
        <div class="ipr-pill ipr-pill--left">
          {% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
          <span class="ipr-pill-label">{{ row.left.label }}</span>
        </div>
        <div class="ipr-pill ipr-pill--right">
          {% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
          <span class="ipr-pill-label">{{ row.right.label }}</span>
        </div>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>

<style>
.block-ipr {
  display: flex; flex-direction: column;
  width: 100%; word-break: keep-all; padding: 12px 16px;
}

/* header: MCP 확인 gradient(#cc5200→#883700) */
.ipr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ipr-header-icon { width: 28px; height: 28px; flex: none; }
.ipr-header-icon img { width: 100%; height: 100%; object-fit: contain; }
.ipr-header-title {
  font-weight: 700; font-size: 32px;
  background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 4px rgba(50,44,30,0.4);
}

.ipr-rows { display: flex; flex-direction: column; gap: 6px; }

/* box: MCP 확인 border=#60a451, radius=30px, bg=rgba(250,237,203,0.15) */
.ipr-row {
  border: 2px solid #60a451; border-radius: 16px;
  background: rgba(250,237,203,0.15);
  display: flex; flex-direction: column;
}

/* pill 배치: 두루마리 이미지(R16 crop) */
.ipr-pills { display: flex; justify-content: space-between; }
.ipr-pills--top { margin-top: -1.8rem; }
.ipr-pills--bottom { margin-bottom: -1.8rem; }

.ipr-pill {
  position: relative; width: 25%; height: 3.8rem;
  overflow: hidden; flex: none;
}
/* R16: 좌pill 우측 곡선만 보임, 우pill 좌측 곡선만 보임 */
.ipr-pill--left img {
  position: absolute; top: 0; height: 100%;
  left: -45.3%; width: 145.3%;
}
.ipr-pill--right img {
  position: absolute; top: 0; height: 100%;
  left: 0; width: 151.25%;
}
/* bottom: rotate(180) + 이미지 반전 */
.ipr-pills--bottom .ipr-pill { transform: rotate(180deg); }
.ipr-pills--bottom .ipr-pill--left img { left: 0; width: 151.25%; }
.ipr-pills--bottom .ipr-pill--right img { left: -45.3%; width: 145.3%; }

.ipr-pill-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: #fff;
  white-space: nowrap; z-index: 2;
}
.ipr-pills--bottom .ipr-pill-label { transform: rotate(180deg); }

/* 텍스트: 2열 grid */
.ipr-text-row { display: grid; grid-template-columns: 1fr 1px 1fr; padding: 8px 12px; }
.ipr-divider { border-left: 1px dashed rgba(96,164,81,0.4); margin: 4px 0; }
.ipr-text {
  font-weight: 500; font-size: 18px; line-height: 1.8;
  color: #0c271e; padding: 4px 10px;
}
.ipr-text--right { text-align: right; }
</style>