C.E.L_Slide_test2/templates/blocks/new/stacked-arrow-list.html

<!-- 적층 화살표 리스트: CSS title bar + 좌측 아크(이미지) + 다이아몬드형 행 -->
<!--
  📋 stacked-arrow-list
  ─────────────────
  용도: 핵심 항목 N개를 다이아몬드(원호) 형태로 적층 표시
  슬롯:
    title (HTML — <em>으로 강조)
    left_label (HTML — <br>로 줄바꿈)
    left_arc_img — 좌측 곡선 장식 (이미지, CSS 곡선 불가)
    arrow_img — 화살표 아이콘 (이미지)
    items[] (text, border_color)
  Figma 원본: Frame 1171281180 (node 45:5, 1153×592)
  수학적 계산:
    scale = 1280 / 1153 = 1.11014 (확대)
    title bar: Figma bg=#fbd5b9, radius=5px, shadow=0 4px 4px rgba(0,0,0,0.25) (MCP 확인)
    title: 43px Bold #144838, highlight: 50px gradient(#cc5200) (MCP 확인)
    row: bg=rgba(255,255,255,0.5), radius=30px, shadow=2px 4px 5px rgba(0,0,0,0.5) (MCP 확인)
    border 색상: #fb5915, #e79000, #e9a804, #919f00, #0d6361 (MCP 확인)
    행 다이아몬드 indent: [0%, 6%, 9%, 6%, 0%]
  CSS 요소: title bar, row bg/border/shadow
  이미지 요소: arc(곡선), arrow(아이콘)
-->
<div class="block-sal">
  {% if title %}
  <div class="sal-header">
    <div class="sal-title-bar"></div>
    <div class="sal-title">{{ title|safe }}</div>
  </div>
  {% endif %}

  <div class="sal-body">
    {% if left_arc_img or left_label %}
    <div class="sal-deco">
      {% if left_arc_img %}<img src="{{ left_arc_img | default('svg/arc_left.svg') }}" class="sal-arc" alt="">{% endif %}
      {% if left_label %}<div class="sal-label">{{ left_label|safe }}</div>{% endif %}
    </div>
    {% endif %}

    <div class="sal-rows">
      {% for item in items %}
      <div class="sal-row" style="--bc: {{ item.border_color|default('#fb5915') }};">
        {% if arrow_img %}
        <div class="sal-arrow"><img src="{{ arrow_img | default('svg/arrow_down.svg') }}" alt=""></div>
        {% endif %}
        <div class="sal-text">{{ item.text }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<style>
.block-sal {
  display: flex; flex-direction: column;
  width: 100%;
  word-break: keep-all;
}

/* ── 헤더 ── */
.sal-header { position: relative; margin-bottom: 12px; }

/* title bar: MCP 확인 bg=#fbd5b9, radius=5px, shadow */
.sal-title-bar {
  position: absolute;
  left: 1%; top: 50%;
  width: 98%; height: 32px;
  background: #fbd5b9;
  border-radius: 5px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
  transform: translateY(-30%);
}

/* title: MCP 확인 #144838, highlight gradient(#cc5200) */
.sal-title {
  position: relative; z-index: 1;
  font-size: 26px; font-weight: 700;
  color: #144838;
  text-align: center;
  line-height: 1.4;
  letter-spacing: -0.04em;
}
.sal-title em {
  font-style: normal; font-weight: 900; font-size: 30px;
  background-image: linear-gradient(90deg, #cc5200 0%, #cc5200 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sal-body { display: flex; align-items: stretch; flex: 1; }

/* 좌측: arc 이미지 + 세로 라벨 */
.sal-deco {
  position: relative; flex: none; width: 14%;
  display: flex; align-items: center; justify-content: center;
}
.sal-arc {
  position: absolute; right: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: right center;
}
.sal-label {
  position: relative; z-index: 1;
  font-size: 26px; font-weight: 700; color: #144838;
  text-align: center; line-height: 1.5;
  text-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

/* 행: MCP 확인 bg, radius, shadow, border-bottom */
.sal-rows {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; gap: 8px; padding: 8px 0;
}
.sal-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.5);
  border-radius: 30px;
  box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
  border-bottom: 3px solid var(--bc, #fb5915);
}
.sal-row:nth-child(1) { margin-left: 0; }
.sal-row:nth-child(2) { margin-left: 6%; }
.sal-row:nth-child(3) { margin-left: 9%; }
.sal-row:nth-child(4) { margin-left: 6%; }
.sal-row:nth-child(5) { margin-left: 0; }

.sal-arrow { flex: none; width: 19px; height: 25px; transform: rotate(-90deg); }
.sal-arrow img { width: 100%; height: 100%; }

.sal-text {
  flex: 1; font-size: 22px; font-weight: 500;
  color: #000; line-height: 1.5; letter-spacing: -0.03em;
}
</style>