<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{{ title|default("split-panel-numbered") }}</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;
  --left-w: {{ left_w|default("55%") }};
  --right-w: {{ right_w|default("45%") }};
}
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.2rem 1.5rem;
}
.header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.header-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.header-icon img { width: 100%; height: 100%; }
.header-title { font-weight: 900; font-size: 1.5rem; }
.header-title .hl {
  font-size: 2rem;
  background-image: linear-gradient(180deg, #cc5200, #883700);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.header-title .sub {
  background-image: linear-gradient(180deg, #296b55, #000);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.content { display: flex; gap: 0.8rem; }
.left-panel {
  flex: none; width: var(--left-w);
  position: relative; border-radius: 0.8rem; overflow: hidden;
  min-height: 20rem;
}
.left-panel .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.left-panel .categories { position: relative; z-index: 2; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cat { }
.cat .cat-header {
  font-weight: 700; font-size: 1.15rem; color: #fff;
  padding: 0.3rem 0.6rem; border-radius: 0.3rem;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
  position: relative; overflow: hidden;
}
.cat .cat-header img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cat .cat-header .text { position: relative; z-index: 1; }
.cat .sw-list {
  font-weight: 500; font-size: 0.95rem; line-height: 1.6;
  color: #000; padding: 0.3rem 0.5rem;
  text-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.right-panel { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.numbered-item {
  display: flex; align-items: center; gap: 0.6rem;
  position: relative; padding: 0.5rem 0.8rem;
  border-radius: 0.4rem; overflow: hidden;
}
.numbered-item .bar-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.numbered-item .badge { flex: none; width: 2.5rem; height: 2.6rem; position: relative; z-index: 1; }
.numbered-item .badge img { width: 100%; height: 100%; }
.numbered-item .desc {
  flex: 1; font-weight: 500; font-size: 1.15rem;
  color: #11231d; position: relative; z-index: 1;
  text-shadow: 0 0 3px rgba(0,0,0,0.3);
}
</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">{% for seg in header.segments -%}
      {%- if seg.style == 'highlight' -%}<span class="hl">{{ seg.text }}</span>
      {%- elif seg.style == 'sub' -%}<span class="sub">{{ seg.text }}</span>
      {%- else -%}<span>{{ seg.text }}</span>{%- endif -%}
    {%- endfor %}</div>
  </div>
  {% endif %}

  <div class="content">
    <div class="left-panel">
      {% if left_bg %}<img class="bg" src="{{ left_bg }}" alt="">{% endif %}
      <div class="categories">
        {% for cat in left_categories %}
        <div class="cat">
          <div class="cat-header">
            {% if cat.header_image %}<img src="{{ cat.header_image }}" alt="">{% endif %}
            <span class="text">{{ cat.title }}</span>
          </div>
          <div class="sw-list">{{ cat.items|join('<br>')|safe }}</div>
        </div>
        {% endfor %}
      </div>
    </div>

    <div class="right-panel">
      {% for item in right_items %}
      <div class="numbered-item">
        {% if item.bar_bg %}<img class="bar-bg" src="{{ item.bar_bg }}" alt="">{% endif %}
        {% if item.badge %}<div class="badge"><img src="{{ item.badge }}" alt=""></div>{% endif %}
        <div class="desc">{{ item.text }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
</body>
</html>
