/* =================================================================
   왕좌의 게임: 킹스로드 — 이벤트 랜딩 페이지 스타일시트
   =================================================================
   목차
   ─────────────────────────────────────────────────────────────────
   01. CSS 커스텀 속성 (Design Tokens)
   02. Reset & Base
   03. 애니메이션 키프레임 ★ (상세 주석 포함)
   04. 공통 유틸 & 스크롤 등장 클래스
   05. 섹션 공통 (배경·타이틀 패턴)
   06. Section 01 — 히어로
   07. Section 00 — 공지 바
   08. Section 02 — 이벤트 미션 (아이템 + 쿠폰)
   09. Section 03 — 이벤트 참여방법 (탭 + 스텝 카드)
   10. Section 04 — 꼭 확인하세요 (유의사항)
   11. 반응형 미디어 쿼리
   12. 접근성 — prefers-reduced-motion
   ================================================================= */


/* =================================================================
   01. CSS 커스텀 속성 (Design Tokens)
   ================================================================= */
 /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
        background: #0a0a0a;
        color: #fff;
        overflow-x: hidden;
        font-family: 'Gowun Dodum', 'Noto Sans KR', sans-serif;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; }

    :root {
        --red-glow: rgba(255,78,78,0.7);
        --blue-glow: #4e9bff;
        --fire-glow: #ff4a1c;
        --purple-glow: #604eff;
        --gold: #e0c889;
        --text-warm: #ffe1c7;
        --text-accent: #ffeac9;
        --text-muted: #c8c8c8;
    }

    /* ============================================================
       KEYFRAME ANIMATIONS
    ============================================================ */
    @keyframes redGlowPulse {
        0%,100% { text-shadow: 0 0 20px var(--red-glow), 0 0 40px rgba(255,78,78,0.3); }
        50%      { text-shadow: 0 0 35px rgba(255,78,78,1), 0 0 70px rgba(255,78,78,0.5); }
    }
    @keyframes blueGlowPulse {
        0%,100% { text-shadow: 0 0 20px var(--blue-glow); }
        50%      { text-shadow: 0 0 35px #6bb5ff, 0 0 70px rgba(78,155,255,0.5); }
    }
    @keyframes fireGlowPulse {
        0%,100% { text-shadow: 0 0 20px var(--fire-glow), 0 0 40px rgba(255,74,28,0.4); }
        50%      { text-shadow: 0 0 40px #ff6a3a, 0 0 80px rgba(255,74,28,0.6); }
    }
    @keyframes btnGlow {
        0%,100% { filter: drop-shadow(0 0 12px rgba(255,78,78,0.5)); }
        50%      { filter: drop-shadow(0 0 30px rgba(255,78,78,0.95)); }
    }
    @keyframes float {
        0%,100% { transform: translateY(0px); }
        50%      { transform: translateY(-16px); }
    }
    @keyframes particleDrift {
        0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
        100% { transform: translateY(-120vh) translateX(20px) scale(0.2); opacity: 0; }
    }
    @keyframes borderShimmer {
        0%,100% { border-color: rgba(224,200,137,0.4); box-shadow: 0 0 10px rgba(224,200,137,0.15); }
        50%      { border-color: rgba(224,200,137,0.85); box-shadow: 0 0 22px rgba(224,200,137,0.35); }
    }
    @keyframes rippleOut {
        to { transform: translate(-50%,-50%) scale(30); opacity: 0; }
    }
    @keyframes fadeInUp {
        from { opacity:0; transform:translateY(40px); }
        to   { opacity:1; transform:translateY(0); }
    }
    @keyframes scaleIn {
        from { opacity:0; transform:scale(0.82); }
        to   { opacity:1; transform:scale(1); }
    }
    /* Ken Burns — 히어로 배경 중앙 기준 줌인 */
    @keyframes kenBurns {
        0%   { transform: scale(1.00); }
        100% { transform: scale(1.12); }
    }
    /* 글로우 장식 맥동 */
    @keyframes glowPulseTop {
        0%,100% { opacity:.85; transform:translateX(-50%) translateY(-15%) scale(1.00); }
        50%      { opacity:1;   transform:translateX(-50%) translateY(-15%) scale(1.08); }
    }
    @keyframes glowPulseBot {
        0%,100% { opacity:.75; transform:translateX(-50%) translateY(-50%) scale(1.00); }
        50%      { opacity:1;   transform:translateX(-50%) translateY(-50%) scale(1.10); }
    }

    /* ============================================================
       SCROLL ANIMATION
    ============================================================ */
    .aos { opacity: 0; transition: opacity 0.85s ease, transform 0.85s ease; }
    .aos.up    { transform: translateY(50px); }
    .aos.scale { transform: scale(0.85); }
    .aos.left  { transform: translateX(-50px); }
    .aos.right { transform: translateX(50px); }
    .aos.visible { opacity: 1 !important; transform: none !important; }
    .d1 { transition-delay: 0.10s; }
    .d2 { transition-delay: 0.20s; }
    .d3 { transition-delay: 0.30s; }
    .d4 { transition-delay: 0.40s; }
    .d5 { transition-delay: 0.50s; }

    /* ============================================================
       PARTICLES
    ============================================================ */
    .particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
    .particle {
        position:absolute; border-radius:50%;
        animation: particleDrift linear infinite;
    }
    /* Hero 캔버스 파티클 */
    #hero-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    /* ============================================================
       SHARED: SECTION TITLE FRAME
    ============================================================ */
    .sec-tit-wrap { display:flex; justify-content:center; margin-bottom:clamp(1rem,2vw,2rem); }
    .sec-tit-frame { position:relative; display:inline-block; }
    .sec-tit-frame > img { display:block; width:auto; height:auto; }
    .sec-tit-frame .tit-label {
        position:absolute; inset:0;
        display:flex; align-items:center; justify-content:center;
        font-family:'Noto Serif KR',serif;
        font-size:clamp(24px,2.6vw,50px);
        font-weight:700; color:#fff; letter-spacing:.03em;
        margin-top:70px;
    }

    /* ============================================================
       SECTION 01 — HERO
    ============================================================ */
    .section01 {
        position:relative; width:100%;
        aspect-ratio:1920/1100; max-height:88vh; min-height:560px;
        overflow:hidden; background:#060c1a;
    }
    /* Ken Burns 배경 — 애니메이션 유지 */
    .s01-bg {
        position:absolute; inset:0;
        width:100%; height:100%;
        object-fit:cover; object-position:center top;
        transform-origin: center center;
        animation: kenBurns 18s ease-in-out infinite alternate;
        will-change: transform;
    }
    /* 장식 글로우 (Ellipse) */
    .s01-glow {
        position:absolute; pointer-events:none; z-index:1; height:auto;
        mix-blend-mode: screen;   /* 어두운 배경에서 빛이 타오르는 합성 */
        filter: saturate(1.6) brightness(1.3);
    }
    .s01-glow--top {
        left:50%; top:0;
        transform:translateX(-50%) translateY(-15%);
        width:clamp(400px,62vw,1180px);
        opacity:.85;
        animation: glowPulseTop 5s ease-in-out infinite;
    }
    .s01-glow--bot {
        left:50%; top:62%;
        transform:translateX(-50%) translateY(-50%);
        width:clamp(500px,78vw,1500px);
        opacity:.75;
        animation: glowPulseBot 6s ease-in-out infinite;
    }
    /* 그라데이션 오버레이 */
    .s01-grad {
        position:absolute; inset:0; z-index:1;
        background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.6) 100%);
    }
    /* 좌상단 netmarble */
    .s01-netmarble {
        position:absolute; z-index:3;
        left:2.76%; top:2.68%;
        width:clamp(80px,8.05vw,155px); height:auto;
        opacity:.9;
        animation:fadeInUp 1s ease .1s both;
    }
    /* 우상단 Warner Bros · HBO */
    .s01-wb {
        position:absolute; z-index:3;
        right:2%; top:1.49%;
        width:clamp(120px,15.3vw,250px); height:auto;
        animation:fadeInUp 1s ease .1s both;
    }
    /* 중앙 본문 */
    .s01-body {
        position:absolute; inset:0; z-index:2;
        display:flex; flex-direction:column;
        align-items:center; justify-content:center;
        padding:clamp(1rem,3vw,3rem) 1rem clamp(2rem,5vw,5rem);
        background:url('export/bg_maindim.png') no-repeat center center;
    }
    /* logos */
    .s01-logos { display:flex; flex-direction:column; align-items:center; margin-bottom:clamp(.5rem,1.2vw,1.4rem); animation:fadeInUp 1s ease .2s both; }
    .s01-bi    { width:clamp(130px,11.8vw,227px); height:auto; margin-bottom:.4rem; }
    .s01-x     { width:clamp(12px,1vw,19px); height:auto; margin-bottom:.4rem; opacity:.9; }
    .s01-logo-king {
        width:clamp(400px,36vw,660px); height:auto;
        filter:drop-shadow(0 0 30px rgba(0,0,0,.8));
        animation:scaleIn 1s ease .4s both;
    }
    /* titles */
    .s01-titles { text-align:center; margin-bottom:clamp(.6rem,1.4vw,1.5rem); animation:fadeInUp 1s ease .6s both; }
    .s01-sub  { font-family:'Gowun Dodum',sans-serif; font-size:clamp(13px,1.35vw,26px); color:#c8c8c8; margin-bottom:.35rem; letter-spacing:.05em; }
    .s01-h1   { font-family:'Noto Serif KR',serif; font-size:clamp(22px,2.5vw,48px); font-weight:700; color:#fff; letter-spacing:.03em; animation:redGlowPulse 3s ease-in-out infinite; }
    /* info */
    .s01-info { display:flex; flex-direction:column; gap:clamp(.15rem,.4vw,.45rem); margin-bottom:clamp(.8rem,3vw,4rem); animation:fadeInUp 1s ease .8s both; }
    .s01-info-row { display:flex; align-items:center; gap:.5rem; font-size:clamp(13px,1.04vw,20px); color:#ffe1c7; font-family:'Gowun Dodum',sans-serif; }
    .s01-arrow { width:clamp(9px,.87vw,17px); height:auto; flex-shrink:0; }
    /* button */
    .s01-btn { position:relative; display:inline-block; cursor:pointer; animation:fadeInUp 1s ease 1s both; transition:transform .3s ease; }
    .s01-btn:hover { transform:scale(1.05); }
    .s01-btn img { width:clamp(240px,25.8vw,495px); height:auto; }
    .s01-btn-lbl {
        position:absolute; inset:0;
        display:flex; align-items:center; justify-content:center;
        font-family:'Noto Serif KR',serif;
        margin-top:-5px;
        font-size:clamp(18px,1.98vw,38px); font-weight:700;
        color:#faf9cc; text-shadow:0 0 20px var(--red-glow); letter-spacing:.08em;
    }
    /* footer — 데스크탑: copy 중앙 + prob 우측, 모바일: 세로 두 줄 */
    .s01-footer {
        position:absolute; bottom:1.5%; left:0; right:0; z-index:2;
        display:flex; justify-content:center; align-items:center;
        padding:0 clamp(.5rem,2vw,1.5rem);
    }
    .s01-copy { font-size:clamp(8px,.62vw,12px); color:rgba(255,255,255,.4); text-align:center; }
    .s01-prob {
        position:absolute; right:clamp(.5rem,1.5vw,1.5rem);
        font-size:clamp(8px,.62vw,12px); color:rgba(255,255,255,.4); white-space:nowrap;
    }

    /* ============================================================
       SECTION 00 — NOTICE BAR
    ============================================================ */
    .section00 { background:#161616; box-shadow:0 4px 14px rgba(0,0,0,.45); padding:1.2rem 2rem; position:relative; z-index:10; }
    .s00-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
    .s00-badge {
        display:inline-flex; align-items:center; gap:.45rem;
        box-shadow:inset 0 4px 6px rgba(0,0,0,.3);
    }
    .s00-on-img { width:clamp(80px,2.6vw,200px); height:auto;  }
    .s00-notice { font-size:clamp(13px,1.2vw,21px); color:#fff; line-height:1.5; text-align:center; }
    .s00-notice .o { color:#ff7700; text-decoration:underline; }
    .s00-notice .b { color:#3787ff; text-decoration:underline; }

    /* ============================================================
       SECTION 02 — EVENT MISSION + ITEMS + COUPON
    ============================================================ */
    .section02 { position:relative; overflow:hidden; }
    .s02-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
    .s02-dim { position:absolute; inset:0; background:rgba(0,0,0,.54); }
    .s02-body { position:relative; z-index:2; padding:clamp(3rem,5vw,6rem) clamp(1rem,5vw,3rem); }

    .s02-sub { text-align:center; font-size:clamp(14px,1.25vw,23px); color:var(--text-muted);
        margin-bottom:clamp(2rem,4vw,4.5rem); line-height:1.75; }

    /* Chest / reward */
    .s02-reward { display:flex; flex-direction:column; align-items:center; margin-bottom:clamp(2rem,4vw,4.5rem);}
    .s02-chest { margin-top: clamp(2rem, 4vw, 2.5rem); width:clamp(360px,28vw,560px); height:auto; animation:float 3.3s ease-in-out infinite; filter:drop-shadow(0 0 28px rgba(224,160,50,.4)); }
    .s02-reward-sub   { font-size:clamp(14px,1.25vw,24px); color:#ffa4a4; text-align:center; margin-top:1.2rem; margin-bottom:.3rem; }
    .s02-reward-title { font-family:'Noto Serif KR',serif; font-size:clamp(26px,2.7vw,50px); font-weight:700; color:#fff; text-align:center; animation:fireGlowPulse 3s ease-in-out infinite; }

    /* Mission title strip */
    .s02-mtit { position:relative; text-align:center; margin-bottom:clamp(1rem,2vw,2rem); }
    .s02-mtit img { max-width:clamp(260px,26vw,480px); height:auto; display:inline-block; }
    .s02-mtit-lbl {
        position:absolute; inset:0;
        display:flex; align-items:center; justify-content:center;
        font-family:'Noto Serif KR',serif; font-size:clamp(15px,1.4vw,28px); font-weight:700;
        color:#fff; text-shadow:0 0 20px #dfed79;
        margin-top:-5px;
    }

    /* Mission02 — maile6000 이미지 영역 */
    .s02-mpack { text-align:center; }
    .s02-maile-wrap { display:flex; flex-direction:column; align-items:center; margin-top:clamp(.8rem,1.5vw,1.5rem); }
    .s02-maile-badge {
        background:#5d2929; border-radius:20px; padding:.35rem 1.2rem;
        font-size:clamp(12px,.9vw,18px); color:#fff; white-space:nowrap;
        margin-bottom:clamp(-18px,-1.4vw,-12px); position:relative; z-index:1;
    }
    .s02-maile {
        width:clamp(260px,30vw,540px); height:auto;
        border-radius:clamp(70px,9vw,172px);
        animation:float 3.5s ease-in-out infinite;
        filter:drop-shadow(0 0 24px rgba(200,140,30,.5));
    }
    .s02-maile-fig { position:relative; display:inline-flex; }
    .s02-maile-fig.lost::before {
        content:'';
        position:absolute; inset:0;
        background:rgba(0,0,0,0.8);
        border-radius:clamp(70px,9vw,172px);
        z-index:2;
    }
    .s02-maile-fig.lost::after {
        content:'조기소진';
        position:absolute; top:50%; left:50%;
        transform:translate(-50%,-50%);
        color:rgba(255,210,80,.9);
        font-size:clamp(28px,3.5vw,60px);
        font-weight:700; letter-spacing:.15em;
        white-space:nowrap; z-index:3;
        text-shadow:0 0 20px rgba(255,140,0,.7);
        font-family:'Noto Serif KR',serif;
    }

    /* Mission02 — 일일 보상 그리드 */
    .s02-days { margin-top:clamp(1.2rem,2vw,2rem); }
    .s02-days-total {
        text-align:center; font-size:clamp(14px,1.2vw,22px); color:#fff;
        font-family:'Gowun Dodum',sans-serif;
        margin-bottom:clamp(.8rem,1.3vw,1.5rem);
    }
    .s02-days-grid {
        display:grid; grid-template-columns:1fr 1fr;
        gap:clamp(.6rem,1vw,1rem); max-width:760px; margin:0 auto;
    }
    .s02-day { position:relative; display:flex; align-items:center; gap:clamp(.4rem,.8vw,1rem); font-family:'Gowun Dodum',sans-serif; }
    .s02-day.lost .s02-day-pill { position:relative; overflow:hidden; }
    .s02-day.lost .s02-day-pill::before {
        content:'';
        position:absolute; inset:0;
        background:rgba(0,0,0,.8);
        border-radius:40px;
        z-index:1;
    }
    .s02-day.lost .s02-day-pill::after {
        content:'조기소진';
        position:absolute; top:50%; left:50%;
        transform:translate(-50%,-50%);
        color:rgba(255,210,80,.88);
        font-size:clamp(12px,.95vw,16px);
        font-weight:700; letter-spacing:.12em;
        white-space:nowrap; z-index:2;
        text-shadow:0 0 8px rgba(255,160,0,.6);
    }
    .s02-day-lbl { font-size:clamp(13px,.88vw,18px); color:var(--text-muted); white-space:nowrap; min-width:3em; text-align:right; }
    .s02-day-pill {
        flex:1; display:flex; align-items:center; gap:.5rem;
        border:1px solid rgba(255,255,255,.7); border-radius:40px;
        padding:.4rem .7rem;
    }
    .s02-day-m {
        flex-shrink:0; width:clamp(26px,2vw,40px); height:clamp(26px,2vw,40px);
        border-radius:50%;
        background:radial-gradient(circle at 38% 38%, #e8c870, #b8882a);
        display:flex; align-items:center; justify-content:center;
        font-size:clamp(11px,.85vw,16px); color:#7d5858; font-weight:700;
        font-family:'Alexandria',sans-serif;
    }
    .s02-day-pts { font-size:clamp(12px,.85vw,17px); color:var(--text-accent); }

    /* Item box */
    .s02-box-wrap { max-width:1200px; margin:0 auto clamp(2.5rem,4vw,5rem); }
    .s02-box-bar  { display:flex; justify-content:center; margin-bottom: calc(-1 * clamp(4.5px, 0.7vw, 10px));  }
    .s02-box-bar img { width:clamp(360px,38vw,720px); height:auto; }
    .s02-box {
        border:1px solid rgba(224,200,137,.6);
        padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,3vw,2rem);
        animation:borderShimmer 4s ease-in-out infinite;
    }
    .s02-box-title { text-align:center; font-size:clamp(15px,1.25vw,23px); color:#fff; margin-bottom:clamp(1.5rem,2.5vw,2.5rem); }
    .s02-items { display:flex; justify-content:center; align-items:flex-end; gap:clamp(4rem,3.5vw,4rem); flex-wrap:wrap; }
    .s02-item { display:flex; flex-direction:column; align-items:center; gap:.6rem; transition:transform .3s ease; cursor:default; }
    .s02-item:hover { transform:translateY(-8px); filter:drop-shadow(0 0 10px rgba(224,200,137,.5)); }
    .s02-item-fig { position:relative; display:flex; align-items:center; justify-content:center; }
    .s02-item-fig img { object-fit:contain; height:clamp(80px,6.5vw,140px); width:auto; }
    .s02-badge { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); background:#5d2929; border-radius:12px; padding:2px 8px; font-size:clamp(14px,.72vw,12px); color:#fff; white-space:nowrap; }
    .s02-item-name { text-align:center; font-size:clamp(18px,.88vw,20px); color:var(--text-muted); line-height:1.5; }
    .s02-item-name .q { color:var(--text-accent); }

    /* Coupon */
    .s02-coupon { max-width:1050px; margin:0 auto; }
    .s02-ctit { position:relative; display:block; }
    .s02-ctit img { width:100%; height:auto; display:block; }
    .s02-ctit-lbl {
        position:absolute; left:0; right:0; bottom:0;
        top: calc(-1 * clamp(24px, 3.5vw, 64px));
        display:flex; align-items:center; justify-content:center;
        font-family:'Noto Serif KR',serif; font-size:clamp(18px,1.7vw,32px); font-weight:700;
        color:#fff; text-shadow:0 0 20px var(--purple-glow);
    }
    .s02-cbody { background-image:url('export/coupon_bg.png') ;background-repeat: no-repeat; background-position: 50% -10%;}
    .s02-cgroup { margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.08); }
    .s02-cgroup:last-of-type { margin-bottom:0; padding-bottom:0; border-bottom:none; }
    .s02-crow { display:flex; gap:1.5rem; align-items:flex-start; }
    .s02-platform {
        flex-shrink:0; border:1px solid rgba(255,255,255,.7); border-radius:10px;
        padding:.45rem .85rem; font-size:clamp(13px,.95vw,17px); font-weight:600; color:#fff;
        min-width:82px; text-align:center; font-family:'Noto Sans KR',sans-serif;
    }
    .s02-ctext { font-size:clamp(13px,.95vw,17px); color:#fff; line-height:1.9; }
    .s02-ctext .note { color:var(--text-muted); font-size:clamp(11px,.82vw,14px); }
    .s02-ctext a { color:#fff; text-decoration:underline; }
    .s02-cnotice { text-align:center; color:#ffb8b8; font-size:clamp(11px,.82vw,14px); margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); }

    /* ============================================================
       SECTION 03 — PARTICIPATION METHOD
    ============================================================ */
    .section03 { position:relative; overflow:hidden; min-height:700px; }
    .s03-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
    .s03-dim { position:absolute; inset:0; background:rgba(0,0,0,.4); }
    .s03-body { position:relative; z-index:2; padding:0 clamp(1rem,4vw,3rem) clamp(4rem,6vw,7rem); }

    /* Tab */
    .s03-tab-outer { display:flex; flex-direction:column; align-items:center; margin-bottom:clamp(2rem,4vw,4rem); }
    .s03-torch { width:clamp(38px,3.8vw,64px); height:auto; margin-bottom:-2px; position:relative; z-index:1; }
    .s03-bar   { width:100%; max-width:750px; height:28px; object-fit:cover; display:block; }
    .s03-bar.flip { transform:scaleY(-1); }
    .s03-tabs  { display:flex; }
    .s03-tab {
        padding:clamp(.65rem,1.1vw,1rem) clamp(1.8rem,4.5vw,4.8rem);
        font-size:clamp(15px,1.4vw,25px); font-family:'Gowun Dodum',sans-serif;
        cursor:pointer; transition:all .3s ease; user-select:none;
    }
    .s03-tab.on  { color:#efe9dd; text-shadow:0 0 18px #ffed2a; border-color:rgba(200,169,110,.7);}
    .s03-tab.off { color:#a2a2a2; }
    .s03-tab.off:hover { color:#ccc; }

    /* Panels (tab content) */
    .s03-panel { display:none; }
    .s03-panel.active { display:flex; justify-content:center; gap:clamp(.8rem,2vw,2rem); flex-wrap:wrap; }

    /* Card base */
    .s03-card { position:relative; width:clamp(250px,22vw,366px); overflow:hidden; cursor:default; opacity:0; transform:translateY(30px); transition:opacity .5s ease, transform .5s ease, filter .3s ease; }
    .s03-card:hover { filter:brightness(1.09); }
    .s03-card-bg { width:100%; height:auto; display:block; }
    .s03-card-inner { position:absolute; inset:0; display:flex; flex-direction:column; }
    .s03-img-area { flex:1; /*position:relative;*/ overflow:hidden; }
    .s03-txt-area { padding:.2rem 1.2rem 5rem; text-align:center; }
    .s03-card-txt { font-size:clamp(18px,1.05vw,20px); color:var(--text-muted); line-height:1.65; font-family:'Gowun Dodum',sans-serif; }
    .s03-card-txt .hl { color:var(--text-accent); }

    /* Card image atoms (absolutely positioned within .s03-img-area) */
    .s03-ci { position:absolute; height:auto; }

    /* PC방 Card 1 — 로그인 화면 + 폰 QR */
    .s03-ci--login { top:26%; left:15%;  width:70%; }

    /* PC방 Card 2 — 게임 모니터 */
    .s03-ci--game  { top:50%; left:50%; transform:translate(-50%,-50%); width:96%; }

    /* Card 3 (양쪽 탭 공통) — 피카플레이 쿠폰 */
    .s03-ci--logo  { top:11%; left:11%; width:50%; }
    .s03-ci--app   { top:25%; left:15%; width:70%; border-radius:8px; }
    .s03-ci--box   { bottom:3%; right:0;  width:29%; }

    /* 개인PC Card 1 — 크래프트박스 화면 */
    .s03-ci--craft { top:50%; left:50%; transform:translate(-50%,-48%); width:84%; }

    /* 개인PC Card 2 — 라이브러리 + 게임 오버랩 */
    .s03-ci--lib   { top:32%; left:8%; width:82%; }
    .s03-ci--game2 { bottom:5%; right:3%; width:64%; box-shadow:-8px -8px 12px rgba(255,86,86,.28); }

    /* 마일리지 사용처 */
    .s03-mileage {
        max-width: 1050px;
        margin: clamp(3rem, 5vw, 6rem) auto 0;
    }
    .s03-mile-tit { position:relative; display:block; }
    .s03-mile-tit img { width:100%; height:auto; display:block; }
    .s03-mile-lbl {
        position:absolute; left:0; right:0; bottom:0;
        top: calc(-1 * clamp(24px, 5.5vw, 64px));
        display:flex; align-items:center; justify-content:center;
        font-family:'Noto Serif KR',serif; font-size:clamp(18px,1.7vw,32px); font-weight:700;
        color:#fff; text-shadow:0 0 20px var(--purple-glow);
    }
    .s03-mile-body {
        background-image:url('export/coupon_bg.png');
        background-repeat:no-repeat; background-position:50% -10%;
        padding: calc(clamp(1.2rem,2.5vw,2.5rem) - 40px) clamp(1.5rem,5vw,5rem) clamp(1.8rem,3vw,3rem);
    }
    .s03-mile-txt {
        text-align:center;
        margin-bottom: clamp(1.5rem,2.5vw,2.5rem);
    }
    .s03-mile-txt p {
        font-size:clamp(14px,1.05vw,20px); color:#fff;
        line-height:1.9; font-family:'Gowun Dodum',sans-serif;
    }
    .s03-mile-txt p.note {
        font-size:clamp(11px,.85vw,16px); color:var(--text-muted); line-height:1.7;
    }
    .s03-mile-screens {
        display:flex; justify-content:center; align-items:flex-end;
        gap: clamp(.8rem,2vw,2.5rem);
        margin-bottom: clamp(1.5rem,2.5vw,2.5rem);
    }
    .s03-mile-scr--a {
        width:clamp(160px,28vw,346px); height:auto; border-radius:8px;
    }
    .s03-mile-scr--b {
        width:clamp(160px,29vw,353px); height:auto; border-radius:8px;
        margin-bottom: clamp(10px,1.8vw,2rem); /* 우측 이미지가 살짝 위로 올라가 엇갈린 배치 */
    }
    .s03-mile-btn-wrap { display:flex; justify-content:center; }
    .s03-mile-btn {
        position:relative; display:inline-flex;
        align-items:center; justify-content:center;
        min-width:clamp(200px,22vw,350px); cursor:pointer;
    }
    .s03-mile-btn img { width:100%; height:auto; display:block; }
    .s03-mile-btn span {
        position:absolute;
        font-size:clamp(14px,1.1vw,20px); font-family:'Gowun Dodum',sans-serif;
        color:#efe9dd; text-shadow:0 0 20px #ffed2a; white-space:nowrap;
    }

    /* ============================================================
       SECTION 04 — NOTICE
    ============================================================ */
    .section04 { background:#151515; padding:clamp(3rem,5vw,6rem) clamp(1.5rem,5vw,3rem); }
    .s04-inner { max-width:1000px; margin:0 auto; }
    .s04-h2 {
        font-family:'Gowun Dodum',sans-serif; font-size:clamp(20px,1.7vw,32px);
        color:#fff; text-shadow:0 0 20px #8e8e8e; margin-bottom:2rem;
        display:flex; align-items:center; gap:.6rem;
    }
    
    .s04-list { list-style:disc; padding-left:1.4rem; }
    .s04-list li { font-size:clamp(13px,.88vw,15px); color:rgba(255,255,255,.85); line-height:2.3; font-family:'Gowun Dodum',sans-serif; }
    .s04-list a { color:#ffb8b8; text-decoration:underline; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width:1200px) { .section01 { aspect-ratio:auto; min-height:600px; max-height:none; } }
    @media (max-width:900px)  { .s03-tab { padding:.7rem 2rem; } .s03-card { width:clamp(230px,44vw,340px); } }
    @media (max-width:640px)  {
        .section01 { min-height:100svh; }
        .s01-logo-king { max-width:400px; }
        /* footer — 모바일: 세로 두 줄, prob는 static으로 아래 배치 */
        .s01-footer { flex-direction:column; gap:.2rem; bottom:1%; align-items:center; }
        .s01-copy   { font-size:clamp(7px,2vw,10px); }
        .s01-prob   { position:static; font-size:clamp(7px,2vw,10px); }
        .s00-inner { flex-direction:column; text-align:center; }
        .s00-on-img { display:none; }
        .s00-notice { margin-top:-10px; }
        .s01-btn { margin-top:20px; }
        .s02-crow { flex-direction:column; gap:.7rem; }
        .s02-platform { align-self:flex-start; }
        .s03-tab { padding:.55rem 1.1rem; font-size:14px; }
        .s03-card { width:90%; max-width:350px; }
        .s02-items { gap:1rem; }
    }
    @media (max-width:400px)  { .s01-bi { font-size:11px; } .s01-sub { font-size:11px; } }