support.html

---
layout: page
title: Support
description: 블로그 후원 및 콘텐츠 구매
permalink: /support/
---
<div class="support-page">
  <!-- Hero Section -->
  <div class="support-hero" style="text-align: center; margin-bottom: 3rem;">
    <div style="width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;">
      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
      </svg>
    </div>
    <h2 style="margin-bottom: 1rem; font-size: 1.75rem;">Support This Blog</h2>
    <p style="color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
      유용한 콘텐츠를 발견하셨다면, 후원으로 더 좋은 글을 작성하는 데 힘을 보태주세요.
    </p>
  </div>

  <!-- Newsletter Subscription Section -->
  <section style="margin-bottom: 3rem;">
    <div class="card" style="padding: 2.5rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(16, 185, 129, 0.05)); border: 1px solid var(--primary);">
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;">
        <div>
          <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
            <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #10b981); display: flex; align-items: center; justify-content: center;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                <polyline points="22,6 12,13 2,6"/>
              </svg>
            </div>
            <h2 style="margin: 0; font-size: 1.5rem;">Newsletter</h2>
          </div>
          <p style="color: var(--text-secondary); margin-bottom: 1rem; font-size: 1.05rem;">
            DevSecOps, Cloud Security, FinOps 최신 트렌드와 실무 노하우를 매주 받아보세요.
          </p>
          <ul style="color: var(--text-secondary); font-size: 0.9rem; margin: 0; padding-left: 1.25rem;">
            <li>주간 기술 트렌드 요약</li>
            <li>실무 팁 & 베스트 프랙티스</li>
            <li>구독자 전용 콘텐츠</li>
          </ul>
        </div>
        <div>
          <!-- Buttondown Form -->
          <form
            action="https://buttondown.com/api/emails/embed-subscribe/twodragon"
            method="post"
            target="popupwindow"
            onsubmit="window.open('https://buttondown.com/twodragon', 'popupwindow')"
            class="newsletter-form"
            style="background: var(--card-bg); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border-color);"
          >
            <input type="hidden" name="embed" value="1" />
            <input type="hidden" name="tag" value="tech-blog" />
            <div style="margin-bottom: 1rem;">
              <label for="bd-email" style="display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">이메일 주소</label>
              <input
                type="email"
                name="email"
                id="bd-email"
                placeholder="your@email.com"
                required
                style="width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; box-sizing: border-box;"
              />
            </div>
            <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 0.875rem 1.5rem; font-size: 1rem;">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                <polyline points="22,6 12,13 2,6"/>
              </svg>
              무료 구독하기
            </button>
            <p style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-secondary); text-align: center;">
              스팸 없음 · 언제든 구독 취소 가능
            </p>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Payment Options Section -->
  <section style="margin-bottom: 3rem;">
    <h2 style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
        <line x1="1" y1="10" x2="23" y2="10"/>
      </svg>
      Payment Options
    </h2>

    <div class="payment-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">

      <!-- Stripe Payment Link -->
      <div class="card payment-card" style="padding: 2rem; position: relative; overflow: hidden; border-left: 4px solid #635bff;">
        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;">
          <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #635bff, #7c3aed); display: flex; align-items: center; justify-content: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
              <path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z"/>
            </svg>
          </div>
          <div>
            <h3 style="margin: 0 0 0.25rem 0; font-size: 1.1rem;">Stripe</h3>
            <p style="margin: 0; color: var(--text-secondary); font-size: 0.85rem;">Credit Card · Apple Pay · Google Pay</p>
          </div>
          <span style="margin-left: auto; background: linear-gradient(135deg, #635bff, #7c3aed); color: white; padding: 0.25rem 0.75rem; font-size: 0.7rem; border-radius: 20px; font-weight: 500;">Global</span>
        </div>
        <div style="display: flex; gap: 0.75rem;">
          <a href="#" class="btn payment-btn" style="flex: 1; justify-content: center; background: #635bff; color: white; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600;">
            $5
          </a>
          <a href="#" class="btn payment-btn" style="flex: 1; justify-content: center; background: linear-gradient(135deg, #635bff, #7c3aed); color: white; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600;">
            $10
          </a>
          <a href="#" class="btn payment-btn" style="flex: 1; justify-content: center; background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600;">
            $20
          </a>
        </div>
      </div>

      <!-- Toss Payments Link -->
      <div class="card payment-card" style="padding: 2rem; position: relative; overflow: hidden; border-left: 4px solid #0064ff;">
        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;">
          <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #0064ff, #00c3ff); display: flex; align-items: center; justify-content: center;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
              <path d="M21 4H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM3 6h18v2H3V6zm0 12v-6h18v6H3z"/>
            </svg>
          </div>
          <div>
            <h3 style="margin: 0 0 0.25rem 0; font-size: 1.1rem;">Toss Payments</h3>
            <p style="margin: 0; color: var(--text-secondary); font-size: 0.85rem;">카드 · 계좌이체 · 카카오페이</p>
          </div>
          <span style="margin-left: auto; background: linear-gradient(135deg, #0064ff, #00c3ff); color: white; padding: 0.25rem 0.75rem; font-size: 0.7rem; border-radius: 20px; font-weight: 500;">Korea</span>
        </div>
        <div style="display: flex; gap: 0.75rem;">
          <a href="#" class="btn payment-btn" style="flex: 1; justify-content: center; background: #0064ff; color: white; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600;">
            5,000원
          </a>
          <a href="#" class="btn payment-btn" style="flex: 1; justify-content: center; background: linear-gradient(135deg, #0064ff, #00c3ff); color: white; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600;">
            10,000원
          </a>
          <a href="#" class="btn payment-btn" style="flex: 1; justify-content: center; background: linear-gradient(135deg, #00c3ff, #06b6d4); color: white; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 600;">
            20,000원
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Buy Me a Coffee Alternative -->
  <section style="margin-bottom: 3rem;">
    <h2 style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
        <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
        <line x1="6" y1="1" x2="6" y2="4"/>
        <line x1="10" y1="1" x2="10" y2="4"/>
        <line x1="14" y1="1" x2="14" y2="4"/>
      </svg>
      Other Options
    </h2>

    <div class="payment-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">

      <!-- Buy Me a Coffee -->
      <div class="card" style="padding: 2rem;">
        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
          <div style="width: 50px; height: 50px; border-radius: 12px; background: #ffdd00; display: flex; align-items: center; justify-content: center;">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="#000">
              <path d="M20 8h-1V4H5v4H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1.17l.59 2.65A2 2 0 0 0 7.72 22h8.56a2 2 0 0 0 1.96-1.65l.59-2.35H20a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2zM7 6h10v2H7V6zm12 10h-2.17l-.59 2.35a.5.5 0 0 1-.49.35H8.25a.5.5 0 0 1-.49-.35L7.17 16H5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h14a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5z"/>
            </svg>
          </div>
          <div>
            <h3 style="margin: 0 0 0.25rem 0;">Buy Me a Coffee</h3>
            <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">Simple one-time support</p>
          </div>
        </div>
        <p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.95rem;">
          커피 한 잔 값으로 블로그 운영을 응원해주세요.
        </p>
        <a href="#" class="btn" style="width: 100%; justify-content: center; background: #ffdd00; color: #000; font-weight: 600;" onclick="alert('Buy Me a Coffee 계정을 만들고 링크를 설정해주세요. buymeacoffee.com'); return false;">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M20 8h-1V4H5v4H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1.17l.59 2.65A2 2 0 0 0 7.72 22h8.56a2 2 0 0 0 1.96-1.65l.59-2.35H20a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2z"/>
          </svg>
          Buy me a coffee
        </a>
      </div>

      <!-- GitHub Sponsors -->
      <div class="card" style="padding: 2rem;">
        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
          <div style="width: 50px; height: 50px; border-radius: 12px; background: #ea4aaa; display: flex; align-items: center; justify-content: center;">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </div>
          <div>
            <h3 style="margin: 0 0 0.25rem 0;">GitHub Sponsors</h3>
            <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">Monthly sponsorship</p>
          </div>
        </div>
        <p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.95rem;">
          GitHub을 통해 정기 후원으로 지속적인 콘텐츠 제작을 지원하세요.
        </p>
        <a href="https://github.com/sponsors/{{ site.author.github }}" target="_blank" rel="noopener" class="btn" style="width: 100%; justify-content: center; background: #ea4aaa; color: white;">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>
          Sponsor on GitHub
        </a>
      </div>
    </div>
  </section>

  <!-- Digital Products Section -->
  <section style="margin-bottom: 3rem;">
    <h2 style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
      </svg>
      Digital Products (Coming Soon)
    </h2>

    <div class="card" style="padding: 2rem; background: linear-gradient(135deg, var(--card-bg), var(--bg-secondary)); border: 2px dashed var(--border-color);">
      <div style="text-align: center;">
        <div style="width: 80px; height: 80px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
            <line x1="12" y1="18" x2="12" y2="12"/>
            <line x1="9" y1="15" x2="15" y2="15"/>
          </svg>
        </div>
        <h3 style="margin-bottom: 0.5rem;">E-Book & Templates</h3>
        <p style="color: var(--text-secondary); margin-bottom: 1rem;">
          DevSecOps 실무 가이드, Terraform 템플릿, Kubernetes 보안 체크리스트 등<br>
          유용한 디지털 콘텐츠를 준비 중입니다.
        </p>
        <span class="badge" style="background: var(--primary); color: white; padding: 0.5rem 1rem;">
          Coming Soon
        </span>
      </div>
    </div>
  </section>

  <!-- How It Works -->
  <section style="margin-bottom: 3rem;">
    <h2 style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"/>
        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
        <line x1="12" y1="17" x2="12.01" y2="17"/>
      </svg>
      How Payment Links Work
    </h2>

    <div class="card" style="padding: 2rem;">
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;">
        <div style="text-align: center;">
          <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #10b981); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: white; font-weight: bold; font-size: 1.5rem;">1</div>
          <h4 style="margin-bottom: 0.5rem;">Click Button</h4>
          <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0;">원하는 결제 수단의 버튼을 클릭합니다.</p>
        </div>
        <div style="text-align: center;">
          <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #10b981); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: white; font-weight: bold; font-size: 1.5rem;">2</div>
          <h4 style="margin-bottom: 0.5rem;">Secure Payment</h4>
          <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0;">안전한 결제 페이지에서 결제를 진행합니다.</p>
        </div>
        <div style="text-align: center;">
          <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #10b981); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: white; font-weight: bold; font-size: 1.5rem;">3</div>
          <h4 style="margin-bottom: 0.5rem;">Thank You!</h4>
          <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0;">후원이 완료되면 감사 이메일을 보내드립니다.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Thank You Message -->
  <section>
    <div class="card" style="padding: 2rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1)); border: 1px solid var(--primary);">
      <div style="text-align: center;">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="1.5" style="margin-bottom: 1rem;">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
        <h3 style="margin-bottom: 0.5rem;">Thank You for Your Support!</h3>
        <p style="color: var(--text-secondary); margin: 0; max-width: 500px; margin: 0 auto;">
          여러분의 후원은 더 좋은 콘텐츠를 만드는 데 큰 힘이 됩니다.<br>
          감사합니다!
        </p>
      </div>
    </div>
  </section>
</div>

<style>
.support-page .payment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.support-page .payment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.support-page .payment-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.support-page .card {
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .support-page .payment-grid {
    grid-template-columns: 1fr;
  }

  .support-page .card > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

.support-page .newsletter-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.support-page .newsletter-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.support-page .newsletter-form .success-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
  border: 1px solid #10b981;
  border-radius: 8px;
  color: #10b981;
  font-size: 0.9rem;
  text-align: center;
  display: none;
}

.support-page .newsletter-form .error-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #ef4444;
  font-size: 0.9rem;
  text-align: center;
  display: none;
}

.support-page .newsletter-form.loading button {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
</style>

<script>
(function() {
  'use strict';
  
  const newsletterForm = document.querySelector('.newsletter-form');
  if (!newsletterForm) return;
  
  // 성공/에러 메시지 요소 생성
  const successMsg = document.createElement('div');
  successMsg.className = 'success-message';
  successMsg.textContent = '✅ 구독이 완료되었습니다! 확인 이메일을 확인해주세요.';
  
  const errorMsg = document.createElement('div');
  errorMsg.className = 'error-message';
  errorMsg.textContent = '❌ 구독 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
  
  newsletterForm.appendChild(successMsg);
  newsletterForm.appendChild(errorMsg);
  
  // 폼 제출 이벤트 처리
  newsletterForm.addEventListener('submit', function(e) {
    const emailInput = newsletterForm.querySelector('input[type="email"]');
    const submitButton = newsletterForm.querySelector('button[type="submit"]');
    
    // 입력 검증
    if (!emailInput.value || !emailInput.validity.valid) {
      e.preventDefault();
      errorMsg.style.display = 'block';
      successMsg.style.display = 'none';
      setTimeout(() => {
        errorMsg.style.display = 'none';
      }, 5000);
      return false;
    }
    
    // 로딩 상태 표시
    newsletterForm.classList.add('loading');
    submitButton.disabled = true;
    errorMsg.style.display = 'none';
    successMsg.style.display = 'none';
    
    // 폼은 기본 동작으로 제출 (Buttondown API로 POST)
    // 성공 시 팝업 창이 열리므로, 여기서는 에러 처리만 수행
    // 팝업이 차단된 경우를 대비한 폴백
    setTimeout(() => {
      newsletterForm.classList.remove('loading');
      submitButton.disabled = false;
      
      // 팝업이 열렸는지 확인 (간접적으로)
      // 실제로는 Buttondown이 리디렉션하므로 성공 메시지 표시
      const checkPopup = setInterval(() => {
        try {
          // 팝업 창이 열렸는지 확인
          if (window.open('', 'popupwindow').closed === false) {
            clearInterval(checkPopup);
            successMsg.style.display = 'block';
            emailInput.value = ''; // 입력 필드 초기화
          }
        } catch (err) {
          // 팝업 차단 등의 경우
          clearInterval(checkPopup);
        }
      }, 100);
      
      // 3초 후 체크 중단
      setTimeout(() => {
        clearInterval(checkPopup);
      }, 3000);
    }, 1000);
  });
  
  // 입력 필드 포커스 시 에러 메시지 숨김
  const emailInput = newsletterForm.querySelector('input[type="email"]');
  if (emailInput) {
    emailInput.addEventListener('focus', function() {
      errorMsg.style.display = 'none';
      successMsg.style.display = 'none';
    });
  }
})();
</script>