<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<title>{{ title|default("statement-pill-highlight") }}</title>
<!--
  Pattern: statement-pill-highlight
  Origin: 51:170 / Frame 1171281207
  Single-line statement banner with optional inline highlighted segments.
  pill 모양 (border-radius = height/2) + 배경 이미지(또는 단색) + 텍스트 + highlight 색
-->
<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;
  --block-h: {{ block_h|default(60) }}px;
  --slide-h: {{ slide_h|default(720) }}px;
  --font-size: {{ font_size|default("1.6rem") }};
  --font-weight: {{ font_weight|default(700) }};
  --text-color: {{ text_color|default("#ffffff") }};
  --highlight-color: {{ highlight_color|default("#fe3") }};
  --bg-color: {{ bg_color|default("#3a4a2f") }};
  --text-shadow-color: {{ text_shadow_color|default("rgba(0,0,0,0.5)") }};
  --text-shadow-blur: {{ text_shadow_blur|default("4px") }};
  --inner-padding-x: {{ inner_padding_x|default("3.5%") }};
}
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #e8ecf0;
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh;
  padding: 20px;
}
.slide {
  width: var(--block-w);
  height: var(--slide-h);
  background: #ffffff;
  position: relative;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}
.banner-pill {
  width: var(--block-w);
  height: var(--block-h);
  border-radius: calc(var(--block-h) / 2);   /* 완전 캡슐 */
  background: var(--bg-color);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--inner-padding-x);
}
{% if bg_image %}
.banner-pill .bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
{% endif %}
.banner-pill .text {
  position: relative;
  z-index: 2;
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  color: var(--text-color);
  letter-spacing: -0.01em;
  text-shadow: 0 0 var(--text-shadow-blur) var(--text-shadow-color);
  white-space: nowrap;
  text-align: center;
}
.banner-pill .highlight {
  color: var(--highlight-color);
}
</style>
</head>
<body>

<div class="slide">
  <div class="banner-pill">
    {% if bg_image %}<img class="bg" src="{{ bg_image }}" alt="">{% endif %}
    <div class="text">{% for seg in text_segments -%}
      {%- if seg.highlight -%}
      <span class="highlight">{{ seg.text }}</span>
      {%- else -%}
      <span>{{ seg.text }}</span>
      {%- endif -%}
    {%- endfor %}</div>
  </div>
</div>

</body>
</html>
