<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{TITLE}} | 제이미성형외과</title>
  <style>
    @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

    :root {
      --jamie-green: #79A233;
      --jamie-light-green: #AFCC6D;
      --jamie-main: #6d7856;
      --jamie-black: #000000;
      --jamie-white: #FFFFFF;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Pretendard', sans-serif;
      background: #1a1a1a;
    }

    /* Slide Base */
    .slide {
      width: 100vw;
      height: 100vh;
      padding: 60px 80px;
      display: flex;
      flex-direction: column;
      page-break-after: always;
      position: relative;
      overflow: hidden;
    }

    /* Title Slide */
    .slide-title {
      background: var(--jamie-black);
      color: var(--jamie-white);
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .slide-title .logo {
      width: 100px;
      height: 100px;
      border: 3px solid var(--jamie-green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      font-weight: bold;
      color: var(--jamie-green);
      margin-bottom: 40px;
    }

    .slide-title h1 {
      font-size: 56px;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .slide-title .subtitle {
      font-size: 24px;
      color: var(--jamie-light-green);
      margin-bottom: 60px;
    }

    .slide-title .meta {
      font-size: 18px;
      color: var(--jamie-main);
    }

    /* Content Slide */
    .slide-content {
      background: var(--jamie-white);
    }

    .slide-header {
      margin-bottom: 40px;
    }

    .slide-header h2 {
      font-size: 40px;
      font-weight: 700;
      color: var(--jamie-black);
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .slide-header h2::before {
      content: '';
      width: 8px;
      height: 40px;
      background: var(--jamie-green);
      border-radius: 4px;
    }

    .slide-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .slide-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      border-top: 1px solid #eee;
      font-size: 14px;
      color: var(--jamie-main);
    }

    .slide-number {
      background: var(--jamie-green);
      color: var(--jamie-white);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    /* Section Slide */
    .slide-section {
      background: var(--jamie-green);
      color: var(--jamie-white);
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .slide-section h2 {
      font-size: 64px;
      font-weight: 700;
    }

    .slide-section .section-num {
      font-size: 120px;
      font-weight: 700;
      opacity: 0.3;
      position: absolute;
      top: 40px;
      right: 80px;
    }

    /* Content Elements */
    .bullet-list {
      list-style: none;
      font-size: 28px;
      line-height: 2;
    }

    .bullet-list li {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 16px;
    }

    .bullet-list li::before {
      content: '';
      width: 12px;
      height: 12px;
      background: var(--jamie-green);
      border-radius: 50%;
      margin-top: 14px;
      flex-shrink: 0;
    }

    .two-column {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }

    .stat-box {
      background: var(--jamie-gray, #f5f5f5);
      padding: 40px;
      border-radius: 16px;
      text-align: center;
    }

    .stat-number {
      font-size: 72px;
      font-weight: 700;
      color: var(--jamie-green);
      line-height: 1;
    }

    .stat-label {
      font-size: 20px;
      color: var(--jamie-main);
      margin-top: 12px;
    }

    .highlight-box {
      background: linear-gradient(135deg, var(--jamie-green), var(--jamie-light-green));
      color: var(--jamie-white);
      padding: 40px;
      border-radius: 16px;
      font-size: 24px;
      line-height: 1.6;
    }

    .quote-box {
      font-size: 32px;
      font-style: italic;
      color: var(--jamie-main);
      border-left: 6px solid var(--jamie-green);
      padding-left: 30px;
      margin: 40px 0;
    }

    /* Table */
    .slide-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 20px;
    }

    .slide-table th {
      background: var(--jamie-green);
      color: var(--jamie-white);
      padding: 16px 24px;
      text-align: left;
    }

    .slide-table td {
      padding: 16px 24px;
      border-bottom: 1px solid #eee;
    }

    /* End Slide */
    .slide-end {
      background: var(--jamie-black);
      color: var(--jamie-white);
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .slide-end .logo {
      width: 80px;
      height: 80px;
      border: 2px solid var(--jamie-green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      font-weight: bold;
      color: var(--jamie-green);
      margin-bottom: 30px;
    }

    .slide-end h2 {
      font-size: 48px;
      margin-bottom: 20px;
    }

    .slide-end .contact {
      font-size: 20px;
      color: var(--jamie-main);
      line-height: 1.8;
    }

    /* Print / PDF */
    @media print {
      .slide {
        width: 100%;
        height: 100vh;
        page-break-after: always;
      }
    }
  </style>
</head>
<body>

  <!-- Slide 1: Title -->
  <div class="slide slide-title">
    <div class="logo">J</div>
    <h1>{{TITLE}}</h1>
    <p class="subtitle">{{SUBTITLE}}</p>
    <p class="meta">제이미성형외과 | {{DATE}}</p>
  </div>

  <!-- Slide 2: Section Divider -->
  <div class="slide slide-section">
    <span class="section-num">01</span>
    <h2>{{SECTION_1_TITLE}}</h2>
  </div>

  <!-- Slide 3: Content -->
  <div class="slide slide-content">
    <div class="slide-header">
      <h2>{{SLIDE_3_TITLE}}</h2>
    </div>
    <div class="slide-body">
      <ul class="bullet-list">
        {{SLIDE_3_BULLETS}}
      </ul>
    </div>
    <div class="slide-footer">
      <span>제이미성형외과</span>
      <span class="slide-number">3</span>
    </div>
  </div>

  <!-- Slide 4: Two Column -->
  <div class="slide slide-content">
    <div class="slide-header">
      <h2>{{SLIDE_4_TITLE}}</h2>
    </div>
    <div class="slide-body">
      <div class="two-column">
        <div>
          {{SLIDE_4_LEFT}}
        </div>
        <div>
          {{SLIDE_4_RIGHT}}
        </div>
      </div>
    </div>
    <div class="slide-footer">
      <span>제이미성형외과</span>
      <span class="slide-number">4</span>
    </div>
  </div>

  <!-- Slide 5: Stats -->
  <div class="slide slide-content">
    <div class="slide-header">
      <h2>{{SLIDE_5_TITLE}}</h2>
    </div>
    <div class="slide-body">
      <div class="two-column">
        <div class="stat-box">
          <div class="stat-number">{{STAT_1_NUMBER}}</div>
          <div class="stat-label">{{STAT_1_LABEL}}</div>
        </div>
        <div class="stat-box">
          <div class="stat-number">{{STAT_2_NUMBER}}</div>
          <div class="stat-label">{{STAT_2_LABEL}}</div>
        </div>
      </div>
    </div>
    <div class="slide-footer">
      <span>제이미성형외과</span>
      <span class="slide-number">5</span>
    </div>
  </div>

  <!-- Slide 6: Quote -->
  <div class="slide slide-content">
    <div class="slide-header">
      <h2>핵심 메시지</h2>
    </div>
    <div class="slide-body">
      <div class="quote-box">
        "{{QUOTE}}"
      </div>
      <div class="highlight-box">
        {{HIGHLIGHT_MESSAGE}}
      </div>
    </div>
    <div class="slide-footer">
      <span>제이미성형외과</span>
      <span class="slide-number">6</span>
    </div>
  </div>

  <!-- End Slide -->
  <div class="slide slide-end">
    <div class="logo">J</div>
    <h2>감사합니다</h2>
    <p class="contact">
      제이미성형외과<br>
      Jamie Plastic Surgery Clinic<br><br>
      {{CONTACT_INFO}}
    </p>
  </div>

</body>
</html>
