<section class="hero-slider" aria-label="프로모션 배너">
    <div class="hero-track">
        <!-- Slide 1 -->
        <div class="hero-slide" style="background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%);">
            <div class="container hero-content">
                <span style="color: var(--color-accent-blue); font-weight: 700; margin-bottom: 8px; display: block;">특별
                    프로모션</span>
                <h1 class="hero-title">구글플레이 기프트카드<br>최대 12% 즉시 할인</h1>
                <p class="hero-desc">인기 게임 아이템부터 영화까지, 더 저렴하게 즐기세요.</p>
                <a href="/shop?category=google" class="btn btn-primary">지금 구매하기</a>
            </div>
        </div>
        <!-- Slide 2 -->
        <div class="hero-slide" style="background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%);">
            <div class="container hero-content">
                <span style="color: #059669; font-weight: 700; margin-bottom: 8px; display: block;">신규 입점</span>
                <h1 class="hero-title">문화상품권 24시간<br>자동 발송 시스템 오픈</h1>
                <p class="hero-desc">기다림 없이 결제 즉시 문자로 핀번호를 받아보세요.</p>
                <a href="/shop?category=paper" class="btn btn-primary" style="background-color: #059669;">상품 보러가기</a>
            </div>
        </div>
        <!-- Slide 3 -->
        <div class="hero-slide" style="background: linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 100%);">
            <div class="container hero-content">
                <span style="color: #EA580C; font-weight: 700; margin-bottom: 8px; display: block;">한정 수량</span>
                <h1 class="hero-title">편의점 모바일 금액권<br>5만원권 10% 핫딜</h1>
                <p class="hero-desc">CU, GS25, 세븐일레븐 전국 어디서나 사용 가능</p>
                <a href="/shop?category=convenience" class="btn btn-primary" style="background-color: #EA580C;">구매하기</a>
            </div>
        </div>
    </div>

    <button class="slider-arrow prev" aria-label="이전 슬라이드"
        style="position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: white; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;">
        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
    </button>
    <button class="slider-arrow next" aria-label="다음 슬라이드"
        style="position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: white; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;">
        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
    </button>

    <div class="dots-container">
        <!-- Script will populate docs based on slide count -->
        <div class="dot active"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</section>