<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{{ title|default("stacked-arrow-list") }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --block-w: {{ block_w|default(1280) }}px;
  --title-color: {{ title_color|default("#144838") }};
  --title-bar-color: {{ title_bar_color|default("#fbd5b9") }};
  --highlight-from: {{ highlight_from|default("#cc5200") }};
  --highlight-to: {{ highlight_to|default("#cc5200") }};
  --item-bg: {{ item_bg|default("rgba(255,255,255,0.5)") }};
  --item-font-size: {{ item_font_size|default("1.25rem") }};
  --item-radius: {{ item_radius|default("1.5rem") }};
}
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #e8ecf0;
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; padding: 20px;
  word-break: keep-all;
}
.block {
  width: var(--block-w);
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: 1.5rem 2rem 2rem;
  position: relative;
}
.title-wrap { position: relative; margin-bottom: 1.2rem; text-align: center; }
.title-bar {
  position: absolute; left: 0; right: 0;
  top: 55%; height: 0.8rem;
  background: var(--title-bar-color);
  border-radius: 0.3rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 0;
}
.title-text {
  position: relative; z-index: 1;
  font-weight: 700; font-size: 1.5rem;
  color: var(--title-color);
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.title-text .hl {
  font-weight: 900; font-size: 1.7rem;
  background-image: linear-gradient(90deg, var(--highlight-from), var(--highlight-to));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.content { display: flex; gap: 1rem; }
.left-deco {
  flex: none; width: 8%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
}
.left-deco .arc { width: 100%; }
.left-deco .arc img { width: 100%; height: auto; }
.left-deco .label {
  font-weight: 700; font-size: 1.4rem;
  color: var(--title-color);
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.items { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.item {
  background: var(--item-bg);
  border-radius: var(--item-radius);
  box-shadow: 2px 4px 5px rgba(0,0,0,0.3);
  border-bottom-width: 3px;
  border-bottom-style: solid;
  display: flex; align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
}
.item .arrow { flex: none; width: 0.9rem; height: 1.2rem; transform: rotate(-90deg); }
.item .arrow img { width: 100%; height: 100%; }
.item .text {
  font-weight: 500; font-size: var(--item-font-size);
  color: #000; letter-spacing: -0.03em;
  white-space: nowrap;
}
</style>
</head>
<body>
<div class="block">
  <div class="title-wrap">
    <div class="title-bar"></div>
    <div class="title-text">{% for seg in title_segments -%}
      {%- if seg.highlight -%}<span class="hl">{{ seg.text }}</span>{%- else -%}<span>{{ seg.text }}</span>{%- endif -%}
    {%- endfor %}</div>
  </div>
  <div class="content">
    {% if left_decoration %}
    <div class="left-deco">
      <div class="arc"><img src="{{ left_decoration.arc }}" alt=""></div>
      {% if left_decoration.label %}
      <div class="label">{{ left_decoration.label|safe }}</div>
      {% endif %}
    </div>
    {% endif %}
    <div class="items">
      {% for item in items %}
      <div class="item" style="border-bottom-color: {{ item.color }};">
        {% if arrow_icon %}<div class="arrow"><img src="{{ arrow_icon }}" alt=""></div>{% endif %}
        <div class="text">{{ item.text }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
</body>
</html>
