<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 1080px; height: 1350px; }
  body {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    background: #F7F7FA; color: #14171A;
    -webkit-font-smoothing: antialiased;
  }
  .card {
    position: relative; width: 1080px; height: 1350px; overflow: hidden;
    padding: 96px 84px 72px;
    display: flex; flex-direction: column;
    background: #FFFFFF;
  }
  .accent-bar { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: {{ accent_color | safe }}; }
  .badge {
    align-self: flex-start; padding: 10px 24px; border-radius: 999px;
    background: {{ accent_color | safe }}; color: #fff;
    font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  }
  .idx { font-size: 120px; font-weight: 800; line-height: 1; color: {{ accent_color | safe }}; letter-spacing: -0.04em; }
  .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
  .headline {
    font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; color: #14171A;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cover .headline { font-size: 104px; -webkit-line-clamp: 4; }
  .body-page .headline { font-size: 76px; -webkit-line-clamp: 3; }
  .cta .headline { font-size: 88px; -webkit-line-clamp: 3; }
  .sub {
    font-size: 42px; font-weight: 400; line-height: 1.5; color: #3A4047;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 8;
    white-space: pre-wrap;
  }
  .cover .sub { -webkit-line-clamp: 5; }
  .footer {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 28px; color: #8A9099; font-weight: 600; margin-top: 40px;
  }
  .cta-pill {
    align-self: flex-start; margin-top: 8px; padding: 18px 40px; border-radius: 16px;
    background: {{ accent_color | safe }}; color: #fff; font-size: 40px; font-weight: 700;
  }
  .progress { display: flex; gap: 10px; }
  .progress i { width: 14px; height: 14px; border-radius: 50%; background: #D8DCE0; display: inline-block; }
  .progress i.on { background: {{ accent_color | safe }}; }
</style>
</head>
<body>
<div class="card {{ 'cover' if page_type=='cover' else ('cta' if page_type=='cta' else 'body-page') }}">
  <div class="accent-bar"></div>

  {% if page_type == 'cover' %}
    <span class="badge">{{ category_label|default('') or '오늘의 이슈' }}</span>
    <div class="content">
      <h1 class="headline">{{ headline }}</h1>
      <p class="sub">{{ body }}</p>
    </div>
  {% elif page_type == 'cta' %}
    <div class="content">
      <h1 class="headline">{{ headline }}</h1>
      <p class="sub">{{ body }}</p>
      {% if cta %}<div class="cta-pill">{{ cta }}</div>{% endif %}
    </div>
  {% else %}
    <span class="idx">{{ '%02d'|format(page_no - 1) }}</span>
    <div class="content">
      <h1 class="headline">{{ headline }}</h1>
      <p class="sub">{{ body }}</p>
    </div>
  {% endif %}

  <div class="footer">
    {% if page_type == 'cover' or page_type == 'cta' %}
      <span>{{ brand_handle|default('') }}</span><span>{{ page_no }} / {{ total_pages }}</span>
    {% else %}
      <div class="progress">{% for n in range(2, total_pages) %}<i class="{{ 'on' if n <= page_no }}"></i>{% endfor %}</div>
      <span>{{ page_no }} / {{ total_pages }}</span>
    {% endif %}
  </div>
</div>
</body>
</html>
