/* ============================================================
   2026 한우먹는날 캠페인 — Figma 디자인 적용
   디자인: Figma 27CItjES50VsZYFWJKqjmF  node 134:5 (PC 1920x7480)

   컨셉: 다크 무대 + 네온. 섹션별 배경 이미지 위에 텍스트/버튼을 올린다.
   섹션 색: 이벤트2 그린 #00ea87 / 이벤트3 핑크 #ff43ff / 이벤트4 시안 #3ad6ff
   ============================================================ */

/* 본문 폰트 — 디자인 지정 Pretendard */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css');

/* 타이틀 폰트 — RIX열정도체 (디자인 지정 폰트, 상업적 이용 무료)
   출처: https://fontbee.waffle-gl.org/fonts/502
   로컬 사본 우선, 실패 시 jsDelivr CDN 폴백. Regular 한 종만 존재한다. */
@font-face {
    font-family: 'RixYeoljeongdo';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('./assets/fonts/RixYeoljeongdo_Regular.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Rixfont/RixYeoljeongdo_Regular.woff') format('woff');
}

/* 보조 — 타이틀 폰트에 없는 글립 대비 폴백 */
@font-face {
    font-family: 'Paperlogy';
    font-weight: 800;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
}

/* ⚠️ RIX열정도체는 Regular 한 종뿐이라 bold 를 지정하면 브라우저가 가짜 굵게(synthetic bold)를
      만들어 디자인과 달라진다. 타이틀 계열은 font-weight: normal 을 유지할 것. */

:root {
    /* ── 팔레트 (Figma 실측) ── */
    --bg:      #020410;
    --bg-soft: #0a0d1f;
    --ink:     #ffffff;
    --muted:   #9aa0b5;
    --line:    rgba(255, 255, 255, .16);

    --neon-green: #00ea87;   /* 이벤트2 */
    --neon-pink:  #ff43ff;   /* 이벤트3 */
    --neon-cyan:  #3ad6ff;   /* 이벤트4 */
    --gold:       #fec82a;   /* 날짜·강조 */
    --gold-d:     #e0a800;
    --red:        #ed2b9d;
    --dark:       #020410;

    --glow-pink: 0 0 50px rgba(237, 43, 157, .9);
    --glow-blue: 0 0 50px rgba(40, 55, 255, .9);

    --font-title: 'RixYeoljeongdo', 'Paperlogy', 'Pretendard', 'Malgun Gothic', sans-serif;
    --font-body:  'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

    --radius: 14px;
    --maxw:   1200px;
}

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

/* hidden 속성이 항상 이기도록 (display:flex/grid 가 기본 [hidden] 규칙을 덮어쓰는 문제) */
[hidden] { display: none !important; }

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}
body.popup-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
img { max-width: 100%; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.red { color: var(--red); }

/* ============================================================
   공통 버튼 — 디자인의 골드 알약형 CTA
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 16px 34px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd95e 0%, var(--gold) 55%, var(--gold-d) 100%);
    color: var(--dark);
    font-family: var(--font-title);
    font-weight: normal;
    letter-spacing: -.02em;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 0 34px rgba(254, 200, 42, .45);
}
.btn::after {
    /* 디자인의 원형 화살표 아이콘 */
    content: '';
    width: 1.25em;
    height: 1.25em;
    flex: none;
    border-radius: 50%;
    background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 46px rgba(254, 200, 42, .7); }
.btn:active { transform: none; }
.btn-lg { width: min(500px, 100%); padding: 20px 34px; font-size: clamp(16px, 1.7vw, 32px); }
.btn-muted {
    background: #2a2e45;
    color: #8f94ab;
    box-shadow: none;
    cursor: not-allowed;
}
.btn-muted::after { background-color: #4a4f69; }
.btn-muted:hover { transform: none; filter: none; box-shadow: none; }
.btn:disabled { cursor: not-allowed; }
.btn.is-ended { background: #2a2e45; color: #8f94ab; box-shadow: none; pointer-events: none; }
.btn.is-ended::after { display: none; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.btn-row .btn { flex: 1 1 240px; font-size: clamp(14px, 1.3vw, 19px); padding: 16px 22px; }

/* ============================================================
   이미지 버튼 — 디자인 버튼 배경 위에 텍스트/화살표를 올린다.
   (KV 버튼은 텍스트까지 포함된 완성 이미지라 라벨 없이 이미지만 쓴다)
   ============================================================ */
.btn-img {
    position: relative;
    display: inline-block;
    width: min(var(--btn-w, 600px), 100%);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    /* 라벨 크기는 버튼이 들고 있는다 — 반응형 분기에서 이 값만 갈아끼우고,
       버튼별 --label-scale 로 개별 배율을 준다. */
    --label-fs: clamp(14px, 1.5vw, 29px);
    transition: transform .15s ease, filter .15s ease;
}
.btn-img > img { display: block; width: 100%; height: auto; }
.btn-img:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-img:active { transform: none; }

/* 버튼 배경 위 라벨 — 디자인 기준 버튼 중앙(캐릭터가 왼쪽에 있으면 그만큼 밀어줌) */
.btn-img-label {
    position: absolute;
    left: var(--label-l, 0);
    right: var(--label-r, 0);
    /* 버튼마다 알약 위치가 달라 세로 기준을 개별 지정한다.
       (이벤트2는 캐릭터가 위로 솟아 있어 알약 중심이 아래쪽) */
    top: var(--label-t, 44%);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(var(--label-fs) * var(--label-scale, 1));
    color: var(--label-c, var(--dark));
    letter-spacing: -.02em;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}
/* 줄바꿈 마커 — 기본(PC)은 한 줄 유지, 모바일에서만 줄을 바꾼다 */
.btn-img-label .m-br { display: none; }

/* 라벨 뒤 원형 화살표 */
.btn-img-label::after {
    content: '';
    width: 1.3em;
    height: 1.3em;
    flex: none;
    border-radius: 50%;
    background: var(--arrow-bg, var(--dark)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 58% no-repeat;
}

/* KV 버튼 — 텍스트 포함 완성 이미지 */
.btn-img--kv { --btn-w: 608px; margin-top: clamp(10px, 2.2vw, 42px); }

/* 이벤트2 — 캐릭터가 왼쪽에 있어 라벨을 오른쪽으로 민다 */
.btn-img--ev2 {
    --btn-w: 900px;
    --label-l: 22%;
    --label-t: 65%;
    --label-c: #ffffff;
    --arrow-bg: #ffffff;
}
.btn-img--ev2 .btn-img-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23020410' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.btn-img--ev2:disabled { cursor: not-allowed; }
.btn-img--ev2:disabled:hover { transform: none; filter: none; }
/* 완주 후 — 배경이 초록으로 바뀌므로 글자는 어둡게 */
.btn-img--ev2.is-active { --label-c: #04210f; --arrow-bg: #04210f; }
.btn-img--ev2.is-active .btn-img-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ea87' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* 이벤트3·4 라벨 확대 — 둘 다 1.15배.
   이벤트3 은 문구가 길어 그 이상이면 넓은 화면에서 알약을 벗어난다. */
.btn-img--ev3 { --btn-w: 640px; --label-c: #111318; --arrow-bg: #111318; --label-scale: 1.15; }
.btn-img--ev4 { --btn-w: 540px; --label-c: #111318; --arrow-bg: #111318; --label-scale: 1.15; }

/* KV 타이틀 이미지 */
.kv-title-img { margin-top: clamp(8px, 2vw, 44px); line-height: 0; }
.kv-title-img img { width: 100%; height: auto; }

/* 한우세일 로고 아트 */
.sec-logo {
    width: clamp(280px, 22.188vw, 426px);   /* 디자인 426 / 1920 */
    line-height: 0;
    margin-top: calc(-1 * clamp(10px, 1.4vw, 28px));  /* 살짝 위로 */
}
.sec-logo img { width: 100%; height: auto; }

/* 제휴사 로고 통이미지 */
.shop-logo-img { width: min(1000px, 100%); margin-top: clamp(20px, 2.6vw, 48px); line-height: 0; }
.shop-logo-img img { width: 100%; height: auto; }

.btn-text {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}
.btn-text:hover { border-color: var(--ink); color: var(--ink); }

/* ============================================================
   테스트 모드 경고 띠
   ============================================================ */

/* ============================================================
   스크롤 시 상단 고정 탭
   ============================================================ */
.stab {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: clamp(58px, 6vw, 96px);
    background: rgba(2, 4, 16, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: center;
    z-index: 80;
    transform: translateY(-100%);
    transition: transform .3s ease;
}
.stab.show { transform: none; }
.stab-item {
    width: 25%;
    transition: background .18s ease, color .18s ease;
    max-width: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    padding: 0 1%;
}
.stab-pill, .stab-sub, .stab-title { line-height: 1.2; }
.stab-pill {
    font-size: clamp(9px, .85vw, 14px);
    font-weight: 800;
    color: var(--dark);
    background: #fff;
    border-radius: 999px;
    padding: .2em 1em;
    white-space: nowrap;
}
.stab-sub {
    font-size: clamp(10px, .95vw, 15px);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.stab-title {
    font-family: var(--font-title);
    font-size: clamp(12px, 1.35vw, 24px);
    font-weight: normal;
    color: #fff;
    white-space: nowrap;
}
/* 섹션별 네온 색 — 탭 순서: KV / 영상 / 장터 / 세일 */
.stab-item:nth-child(1) .stab-pill  { background: var(--gold); }
.stab-item:nth-child(2) .stab-pill  { background: var(--neon-green); }
.stab-item:nth-child(3) .stab-pill  { background: var(--neon-pink); }
.stab-item:nth-child(4) .stab-pill  { background: var(--neon-cyan); }
/* 활성 탭 — 해당 섹션의 네온 색으로 가득 채우고 글자는 어둡게 */
.stab-item.active:nth-child(1) { background: var(--gold); }
.stab-item.active:nth-child(2) { background: var(--neon-green); }
.stab-item.active:nth-child(3) { background: var(--neon-pink); }
.stab-item.active:nth-child(4) { background: var(--neon-cyan); }
.stab-item.active .stab-sub,
.stab-item.active .stab-title { color: var(--dark); }
.stab-item.active .stab-pill { background: rgba(255, 255, 255, .92); color: var(--dark); }
@media (max-width: 640px) {
    .stab { height: 56px; }
    .stab-pill, .stab-sub { display: none; }
    .stab-item { padding: 0 3px; }
    .stab-title { font-size: 12px; white-space: normal; text-align: center; line-height: 1.25; }
}

/* ============================================================
   페이지 캔버스 — 디자인 전체 배경(1920×7480)

   배경이 콘텐츠와 어긋나지 않으려면 섹션 높이가 디자인 비율과 같아야 한다.
   그래서 PC(1024px 이상)에서는 각 섹션 높이를 vw 로 고정한다.
     1100 + 1436 + 1943 + 2230 + 771 = 7480  (= 389.583vw)
   모바일 디자인 수령 전까지 1024px 미만은 흐름 배치 + 단색 배경으로 둔다.
   ============================================================ */
.page {
    width: 100%;
    background: var(--bg);
    position: relative;
}

@media (min-width: 1024px) {
    .page {
        background: var(--bg) url('./assets/design/bg.webp') top center / 100% auto no-repeat;
    }
    /* 섹션 높이를 디자인 비율로 고정 (배경 정렬용) */
    #secKv     { height: 57.292vw; }  /* 1100 / 1920 */
    #secVideo  { height: 74.792vw; }  /* 1436 / 1920 */
    #secMarket { height: 101.198vw; } /* 1943 / 1920 */
    /* 디자인상 푸터 콘텐츠는 y=6440 부터 시작한다. 경계를 6709 로 잡으면
       유의사항이 771px 안에 안 들어가 문서가 배경(7480)보다 길어지고 배경이 잘린다. */
    #secSale   { height: 102.135vw; } /* 4479~6440 = 1961 */
    #secFooter { height: 54.167vw; }  /* 6440~7480 = 1040 */

    /* ── KV 요소를 디자인 좌표에 고정 ──
       흐름 배치로는 타이틀이 내려오고 버튼이 캐릭터 얼굴을 가린다.
       Figma(1920 기준) : 타이틀 y=1.5 / 버튼 y=290(머리 위) / 탭 y=797
       %는 섹션 높이 1100px 기준. */
    /* .kv-inner 가 relative 라 좌표 기준이 되어버린다. 기준을 섹션으로 되돌린다. */
    #secKv .kv-inner { position: static; }

    #secKv .kv-title-img {
        position: absolute;
        left: 26.232%;            /* (572-68.35)/1920 — 글로우 여백 보정 포함 */
        top: 0.727%;              /* 8px — 글자 하단 323 < 버튼 알약 상단 331 */
        width: 47.656%;           /* 915 / 1920 */
        margin: 0;
    }
    #secKv .btn-img--kv {
        position: absolute;
        left: 34.167%;            /* 656 / 1920 */
        top: 26.364%;             /* 290 / 1100 — 캐릭터 머리 위 */
        width: 31.667%;           /* 608 / 1920 */
        margin: 0;
    }
    #secKv .kv-tabs {
        position: absolute;
        left: 21.615%;            /* 415 / 1920 */
        /* 아이돌 발끝이 77.85% 까지 내려와 기존 72.455%(설계 y797) 에서는
           탭이 다리를 59px 덮었다. 발 아래로 완전히 비킨다. */
        top: 79%;                 /* 869 / 1100 */
        width: 56.771%;           /* 1090 / 1920 */
        margin: 0;
        gap: 1.835%;              /* 20 / 1090 */
    }
}

/* ── 모바일(1024px 미만) 배경 ──
   m_bg.webp (750×8553). 상단 무대만 위치가 중요하고 아래는 그라데이션이라
   KV 높이만 맞추고 나머지는 흐름 배치로 둔다.
   배경 맨 아래 색이 rgb(2,4,16) = --bg 와 같아 이어 붙여도 경계가 보이지 않는다. */
@media (max-width: 1023px) {
    .page {
        background: var(--bg) url('./assets/design/m_bg.webp') top center / 100% auto no-repeat;
    }
    #secKv {
        height: 170.93vw;      /* 1282 / 750 — 무대 하단에 맞춤 */
        padding-top: 14px;
        display: flex;
        flex-direction: column;
    }
    /* KV 내용은 무대 위쪽에 모으고, 탭은 바닥에 붙인다 */
    #secKv .kv-inner { flex: 1; justify-content: flex-start; }
    #secKv .kv-tabs { margin-top: auto; }
}

/* ===== 배경 위 장식 오브젝트 (디자인 좌표를 % 로 환산) ===== */
.deco {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    display: none;                 /* 1024px 미만에서는 숨김 */
}
@media (min-width: 1024px) { .deco { display: block; } }
.deco img { display: block; width: 100%; height: auto; }

/* left·top·width = 디자인 좌표 ÷ (1920 / 7480) */
.deco--youtube   { left:  9.167%; top: 19.545%; width: 17.500%; }
.deco--melody    { left: 74.323%; top: 32.299%; width: 19.844%; }
.deco--jomyung   { left:  6.302%; top: 39.278%; width: 28.229%; }
.deco--mic       { left: 72.813%; top: 57.594%; width: 20.573%; }
.deco--hand      { left:  8.958%; top: 72.206%; width: 17.344%; }
.deco--celebrate { left: 73.021%; top: 81.324%; width: 17.760%; }

/* 떠다니는 느낌 — 오브젝트마다 속도를 달리해 단조로움을 피한다 */
@keyframes decoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.deco img { animation: decoFloat 5s ease-in-out infinite; }
.deco--melody img    { animation-duration: 6.5s; animation-delay: -1s; }
.deco--jomyung img   { animation-duration: 7s;   animation-delay: -2s; }
.deco--mic img       { animation-duration: 5.8s; animation-delay: -.5s; }
.deco--hand img      { animation-duration: 6.2s; animation-delay: -1.5s; }
.deco--celebrate img { animation-duration: 5.4s; animation-delay: -2.5s; }
@media (prefers-reduced-motion: reduce) {
    .deco img { animation: none; }
}

/* ============================================================
   섹션 공통
   ============================================================ */
.sec {
    position: relative;
    padding: clamp(48px, 6vw, 110px) 20px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
.sec-inner {
    width: min(var(--maxw), 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.sec-kicker {
    font-size: clamp(15px, 1.9vw, 36px);
    font-weight: normal;
    font-family: var(--font-title);
}
.sec-title {
    font-family: var(--font-title);
    font-size: clamp(32px, 4.2vw, 80px);
    font-weight: normal;
    letter-spacing: -.03em;
    line-height: 1.15;
}
.sec-desc { font-size: clamp(13px, 1.25vw, 24px); color: #e7e9f3; }
/* 1일 참여 횟수 안내 — 본문보다 한 톤 작게, 괄호 안이 중간에서 끊기지 않게 */
.sec-desc-note {
    display: inline-block;
    white-space: nowrap;
    font-size: .9em;
    color: var(--neon-green);
}

/* 날짜 알약 — 디자인의 어두운 라운드 박스 */
.sec-period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    /* 디자인 날짜 알약 (흰 알약 503×62) */
    background: url('./assets/design/bg_date.png') center / 100% 100% no-repeat;
    width: min(503px, 92%);
    aspect-ratio: 503 / 62;
    font-size: clamp(13px, 1.3vw, 26px);
    font-weight: normal;
    color: #111318;              /* 흰 알약 위라 검정 */
    font-family: var(--font-title);
    letter-spacing: -.02em;
    white-space: nowrap;
}

/* 알약 아래 보조 안내 — 'ⓘ 소진시까지' / 'ⓘ 매장 별 기간 상이' */
.sec-note {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: clamp(6px, .8vw, 14px);
    font-size: clamp(12px, 1.1vw, 20px);
    color: #d5d9e8;
    letter-spacing: -.01em;
}
.sec-note::before {
    content: '';
    width: 1.3em;
    height: 1.3em;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 27' fill='none'%3E%3Ccircle cx='13' cy='13.5' r='11.5' stroke='%23d5d9e8' stroke-width='2'/%3E%3Crect x='11.8' y='6.6' width='2.4' height='9' rx='1.2' fill='%23d5d9e8'/%3E%3Ccircle cx='13' cy='19.2' r='1.5' fill='%23d5d9e8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 섹션별 네온 강조 */
.sec-video  .sec-title { color: var(--neon-green); text-shadow: 0 0 46px rgba(0, 234, 135, .75); }
.sec-market .sec-title { color: var(--neon-pink);  text-shadow: 0 0 46px rgba(255, 67, 255, .7); }
.sec-sale   .sec-title { color: var(--neon-cyan);  text-shadow: 0 0 46px rgba(58, 214, 255, .7); }

/* ============================================================
   섹션 1: KV
   ============================================================ */
.sec-kv {
    padding-top: 24px;
    /* 배경은 .page 의 bg.webp 한 장이 전체를 덮는다 (섹션별 배경 없음) */
    min-height: clamp(520px, 56vw, 1080px);
}
.kv-logos {
    width: min(1840px, 96%);
    margin: 0 auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.kv-logo { display: block; line-height: 0; }
.kv-logo img { display: block; height: clamp(22px, 1.8vw, 34px); width: auto; }
.kv-logo--right img { height: clamp(34px, 3.6vw, 68px); }

.kv-inner {
    width: min(var(--maxw), 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}
/* 타이틀 — 디자인의 기울기(-4.46deg)와 글로우 재현 */
.kv-title-wrap {
    transform: rotate(-4.46deg) skewX(-4.91deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: clamp(8px, 2vw, 40px);
}
.kv-eyebrow {
    display: flex;
    align-items: baseline;
    gap: clamp(8px, 1.2vw, 22px);
    flex-wrap: wrap;
    justify-content: center;
}
.kv-day {
    font-family: var(--font-title);
    font-size: clamp(34px, 4.2vw, 80px);
    font-weight: normal;
    color: #fff;
    text-shadow: var(--glow-pink);
    letter-spacing: -.05em;
}
.kv-period {
    font-family: var(--font-title);
    font-size: clamp(13px, 1.45vw, 28px);
    font-weight: normal;
    color: var(--gold);
    text-shadow: var(--glow-pink);
    letter-spacing: -.05em;
}
.kv-title {
    font-family: var(--font-title);
    font-size: clamp(38px, 4.7vw, 90px);
    font-weight: normal;
    color: #fff;
    text-shadow: var(--glow-blue);
    letter-spacing: -.05em;
    line-height: 1.1;
}
.kv-sub {
    font-family: var(--font-title);
    font-size: clamp(14px, 1.65vw, 32px);
    font-weight: normal;
    color: #fff;
    text-shadow: var(--glow-pink);
    letter-spacing: -.05em;
}

/* KV CTA — 뒤 글로우 이미지 + 버튼 */
.kv-cta {
    position: relative;
    margin-top: clamp(14px, 3vw, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(608px, 92%);
    aspect-ratio: 608 / 212;
}
.kv-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('./assets/design/kv_btn_glow.png') center / contain no-repeat;
    pointer-events: none;
}
.kv-cta .btn { position: relative; width: min(500px, 84%); }

/* KV 하단 이벤트 탭 3종 */
.kv-tabs {
    width: min(1090px, 100%);
    margin-top: clamp(20px, 5vw, 90px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.1vw, 20px);
}
.kv-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;                       /* 서브카피와 이벤트명을 붙인다 */
    padding: clamp(28px, 2.9vw, 46px) 10px clamp(12px, 1.2vw, 20px);
    margin-top: 15px;
    border-radius: 18px;
    /* 디자인상 뒤 무대가 살짝 비친다 */
    background: rgba(2, 4, 16, .72);
    backdrop-filter: blur(2px);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.kv-tab-pill {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: .3em 1.1em;
    border-radius: 999px;
    font-size: clamp(11px, 1.05vw, 20px);
    font-weight: 800;
    color: var(--dark);
    white-space: nowrap;
}
.kv-tab-sub   { font-size: clamp(11px, 1.15vw, 22px); font-weight: 600; color: #fff; line-height: 1.25; }
.kv-tab-title {
    font-family: var(--font-title);
    font-size: clamp(16px, 1.85vw, 36px);
    font-weight: normal;
    letter-spacing: -.03em;
    line-height: 1.15;
}
/* 탭 순서: 영상(그린) / 장터(핑크) / 세일(시안) */
.kv-tabs .kv-tab:nth-child(1) { box-shadow: 0 0 0 2px var(--neon-green), 0 0 26px rgba(0, 234, 135, .45); }
.kv-tabs .kv-tab:nth-child(2) { box-shadow: 0 0 0 2px var(--neon-pink),  0 0 26px rgba(255, 67, 255, .45); }
.kv-tabs .kv-tab:nth-child(3) { box-shadow: 0 0 0 2px var(--neon-cyan),  0 0 26px rgba(58, 214, 255, .45); }
.kv-tabs .kv-tab:nth-child(1) .kv-tab-pill  { background: var(--neon-green); }
.kv-tabs .kv-tab:nth-child(2) .kv-tab-pill  { background: var(--neon-pink); }
.kv-tabs .kv-tab:nth-child(3) .kv-tab-pill  { background: var(--neon-cyan); }
.kv-tabs .kv-tab:nth-child(1) .kv-tab-title { color: var(--neon-green); }
.kv-tabs .kv-tab:nth-child(2) .kv-tab-title { color: var(--neon-pink); }
.kv-tabs .kv-tab:nth-child(3) .kv-tab-title { color: var(--neon-cyan); }
/* 호버 — 각 탭이 자기 네온 색으로 채워진다 */
.kv-tab:hover { transform: translateY(-3px); }
.kv-tabs .kv-tab:nth-child(1):hover { background: rgba(0, 234, 135, .9); }
.kv-tabs .kv-tab:nth-child(2):hover { background: rgba(255, 67, 255, .9); }
.kv-tabs .kv-tab:nth-child(3):hover { background: rgba(58, 214, 255, .9); }
.kv-tabs .kv-tab:nth-child(1):hover .kv-tab-title,
.kv-tabs .kv-tab:nth-child(2):hover .kv-tab-title,
.kv-tabs .kv-tab:nth-child(3):hover .kv-tab-title,
.kv-tabs .kv-tab:nth-child(1):hover .kv-tab-sub,
.kv-tabs .kv-tab:nth-child(2):hover .kv-tab-sub,
.kv-tabs .kv-tab:nth-child(3):hover .kv-tab-sub { color: var(--dark); }
.kv-tabs .kv-tab:nth-child(1):hover .kv-tab-pill,
.kv-tabs .kv-tab:nth-child(2):hover .kv-tab-pill,
.kv-tabs .kv-tab:nth-child(3):hover .kv-tab-pill { background: rgba(255, 255, 255, .92); color: var(--dark); }
/* 모바일에서도 3열 유지 (디자인 시안 기준) */
@media (max-width: 1023px) {
    .kv-tabs { grid-template-columns: repeat(3, 1fr); gap: clamp(5px, 1.4vw, 12px); }
    .kv-tab {
        padding: clamp(16px, 4.2vw, 26px) clamp(3px, 1vw, 8px) clamp(9px, 2.2vw, 14px);
        margin-top: clamp(9px, 2.1vw, 14px);
        border-radius: 14px;
        gap: 1px;
    }
    .kv-tab-pill {
        top: calc(-1 * clamp(9px, 2.1vw, 14px));
        font-size: clamp(8px, 2.05vw, 13px);
        padding: .25em .7em;
    }
    .kv-tab-sub   { font-size: clamp(9px, 2.2vw, 14px); }
    .kv-tab-title { font-size: clamp(12px, 3.3vw, 21px); line-height: 1.2; text-align: center; }
}

/* 디자인 미확정 자리표시(남아 있을 경우) */
.kv-art {
    width: 100%;
    aspect-ratio: 16 / 7;
    display: grid;
    place-items: center;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
}
.kv-art-label { font-size: 14px; color: var(--muted); text-align: center; }

/* ============================================================
   섹션 2: 응원 실황 영상 (이벤트 2)
   ============================================================ */
.sec-video { overflow: hidden; }
.vid-scatter { position: absolute; inset: 0; pointer-events: none; }
.vid-chip { display: none; } /* 배경 이미지에 포함되어 장식 요소는 숨김 */

.vid-stage {
    width: min(1000px, 100%);
    /* 모바일은 기간 알약과 플레이어 사이를 벌려 말풍선이 앉을 자리를 만든다
       (아래 모바일 블록에서 margin-top 을 다시 준다) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.6vw, 26px);
    margin-top: clamp(12px, 2vw, 30px);
}
/* 플레이어와 같은 크기의 박스 — 경품 말풍선의 기준.
   세로형일 때 좁아지는 폭을 .vid-frame 대신 이 박스가 가진다. */
.vid-frame-box {
    position: relative;
    width: 100%;
}
.vid-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #0b0d18;
    box-shadow: 0 0 0 2px rgba(0, 234, 135, .35), 0 0 48px rgba(0, 234, 135, .22);
}
.vid-frame.completed { box-shadow: 0 0 0 3px var(--neon-green), 0 0 60px rgba(0, 234, 135, .5); }
.vid-player, .vid-player iframe, iframe.vid-player, .vid-el {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    object-fit: cover;
}
.vid-cover {
    position: absolute;
    inset: 0;
    /* 안내 문구 + 재생 버튼을 세로로 쌓는다 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.2vw, 22px);
    padding: 0 16px;
    background: rgba(0, 0, 0, .4);
    border: 0;
    cursor: pointer;
}
.vid-cover.hidden { display: none; }

/* 재생 버튼 위 시청 조건 안내 */
.vid-cover-tip {
    max-width: 100%;
    padding: .5em 1.1em;
    border-radius: 999px;
    background: rgba(2, 4, 16, .72);
    border: 1px solid rgba(0, 234, 135, .55);
    color: #fff;
    font-size: clamp(12px, 1.15vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
    text-align: center;
    word-break: keep-all;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    pointer-events: none;
}
.vid-play {
    width: clamp(62px, 6.5vw, 120px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    display: grid;
    place-items: center;
    box-shadow: 0 0 40px rgba(255, 255, 255, .45);
}
.vid-play::after {
    content: '';
    border-left: clamp(18px, 1.9vw, 32px) solid var(--dark);
    border-top: clamp(11px, 1.2vw, 20px) solid transparent;
    border-bottom: clamp(11px, 1.2vw, 20px) solid transparent;
    margin-left: 5px;
}
.vid-crew {
    position: absolute;
    right: 14px; bottom: 14px;
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: clamp(11px, 1.05vw, 17px);
    pointer-events: none;
}

/* 세로형(쇼츠·릴스) — 플레이어만 9:16 으로 좁히고,
   진행률·CTA 는 가로형과 같은 폭을 유지한다 (좁히면 CTA 가 넘친다) */
.vid-stage.is-portrait .vid-frame-box {
    width: min(430px, 92%);
    margin: 0 auto;
}
.vid-stage.is-portrait .vid-frame { aspect-ratio: 9 / 16; }
/* PC 는 섹션 높이가 배경에 맞춰 고정이라, 세로형 플레이어가 가로형보다 높으면
   아래 CTA 가 섹션 밖으로 밀려 잘린다. 높이를 가로형과 동일하게 맞춘다. */
@media (min-width: 1024px) {
    /* PC 는 가로형과 같은 높이(29.323vw)를 유지하므로 폭은 9/16 비율로 환산한다 */
    .vid-stage.is-portrait .vid-frame-box { width: 16.494vw; }
    .vid-stage.is-portrait .vid-frame     { height: 29.323vw; }
}

/* 임베드가 막혔을 때를 위한 원본 링크 (인스타·틱톡에서만 노출) */
.vid-origin {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-top: 2px;
    font-size: clamp(11px, 1vw, 15px);
    color: #aeb5cc;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vid-origin:hover { color: #fff; }
/* 유튜브일 때도 자리는 유지한다 — 숨기면 영상 종류에 따라 섹션 높이가 달라져
   아래 섹션과 겹친다. */
.vid-origin.is-off { visibility: hidden; pointer-events: none; }
.vid-stage.is-portrait .vid-crew { right: 10px; bottom: 10px; font-size: clamp(10px, .95vw, 14px); }

.vid-progress { width: 100%; }
.vid-progress-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: clamp(12px, 1.1vw, 18px);
    color: #cfd4e6;
    margin-bottom: 8px;
}
.vid-progress-head b { color: var(--neon-green); font-size: 1.15em; }
.vid-bar { width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.vid-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--neon-green);
    box-shadow: 0 0 14px rgba(0, 234, 135, .9);
    transition: width .2s linear;
}

/* ============================================================
   섹션 3: 온라인 한우장터 (이벤트 3)
   ============================================================ */
.part-grid {
    width: min(1024px, 100%);
    margin-top: clamp(22px, 2.4vw, 42px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, .9vw, 16px);
}
.part-card {
    display: block;
    line-height: 0;
    border-radius: 22px;
    transition: transform .15s ease, filter .15s ease;
}
.part-card img { width: 100%; height: auto; }
.part-card:hover { transform: translateY(-4px); filter: brightness(1.05); }
@media (max-width: 680px) { .part-grid { grid-template-columns: 1fr; } }

/* ============================================================
   섹션 4: 소프라이즈 한우세일 (이벤트 4)
   ============================================================ */
.shop-grid {
    width: min(1000px, 100%);
    margin-top: clamp(22px, 3vw, 54px);
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
}
.shop-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(20px, 2vw, 36px) clamp(16px, 2vw, 40px);
    border-bottom: 1px solid #e6e6ee;
}
.shop-row:last-child { border-bottom: 0; }
.shop-label {
    font-family: var(--font-title);
    font-size: clamp(16px, 1.7vw, 30px);
    font-weight: normal;
    color: var(--dark);
    text-align: center;
    line-height: 1.3;
}
.shop-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.4vw, 26px); }
/* TODO: 제휴사 로고 이미지 수령 시 <img> 로 교체 */
.shop-logo {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid #e0e0ea;
    border-radius: 10px;
    background: #fafaff;
    font-size: clamp(11px, 1.1vw, 15px);
    font-weight: 600;
    color: #555c74;
}

/* ============================================================
   섹션 5: 유의사항 / 푸터
   배경은 .page 의 bg.webp 가 이어진다 — 별도 배경색을 깔면 잘려 보이므로 투명 유지
   ============================================================ */
.sec-footer { background: transparent; }
.sec-footer .sec-inner { align-items: stretch; text-align: left; gap: 0; }

.foot-title {
    display: flex;
    align-items: center;
    gap: .5em;
    font-family: var(--font-title);
    font-size: clamp(18px, 1.75vw, 32px);
    font-weight: normal;
    color: var(--gold);
    margin-bottom: clamp(14px, 1.6vw, 30px);
}
.foot-title img { width: clamp(22px, 2.1vw, 41px); height: auto; }

.foot-list { list-style: none; display: flex; flex-direction: column; gap: clamp(6px, .7vw, 13px); }
.foot-list li {
    position: relative;
    padding-left: 1.1em;
    font-size: clamp(11px, 1.05vw, 19px);
    line-height: 1.5;
    color: #e3e6f2;
}
.foot-list li::before {
    content: '';
    position: absolute;
    left: 0; top: .62em;
    width: .3em; height: .3em;
    border-radius: 50%;
    background: #e3e6f2;
}

.foot-info {
    margin-top: clamp(26px, 3.2vw, 62px);
    padding-top: clamp(22px, 2.6vw, 50px);
    border-top: 1px solid rgba(255, 255, 255, .22);
    text-align: center;
    font-size: clamp(11px, 1vw, 18px);
    line-height: 1.9;
    color: #c9cde0;
}
.foot-logo { display: inline-block; line-height: 0; margin-bottom: clamp(14px, 1.6vw, 30px); }
.foot-logo img { width: clamp(96px, 8.5vw, 163px); height: auto; }
/* 항목 사이 세로 구분선 */
.foot-sep {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 .7em;
    vertical-align: -.15em;
    background: rgba(255, 255, 255, .35);
}
.foot-copy { margin-top: clamp(12px, 1.4vw, 26px); letter-spacing: .02em; color: #aeb3c9; }

/* ============================================================
   섹션 종료 안내 오버레이
   ============================================================ */
.sec-end-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 4, 16, .88);
    backdrop-filter: blur(3px);
}
.sec-end-card {
    width: min(460px, 100%);
    padding: 34px 28px;
    border-radius: var(--radius);
    background: #12162a;
    border: 1px solid var(--line);
    text-align: center;
}
.sec-end-badge {
    display: inline-block;
    padding: 4px 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
}
.sec-end-title { font-size: clamp(17px, 2vw, 24px); font-weight: 700; margin-bottom: 10px; color: #fff; }
.sec-end-desc  { font-size: clamp(12px, 1.3vw, 15px); color: var(--muted); }
.sec-end-btn {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--dark);
    font-weight: 800;
}

/* ============================================================
   팝업 공통
   ⚠️ 한우먹는날 팝업 디자인은 아직 없어 메인 디자인 톤에 맞춰 구성.
      팝업 시안 수령 시 이 구역을 교체한다.
   ============================================================ */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(2, 4, 16, .75);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
.popup-overlay.active { display: flex; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.popup-close {
    position: absolute;
    top: -8px; right: -56px;
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #16182a;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 760px) {
    .popup-close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 24px; background: rgba(255,255,255,.92); }
    .steps { padding-right: 46px; }
}

.popup-body {
    padding: 18px clamp(20px, 4vw, 40px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.popup-title {
    font-family: var(--font-title);
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: normal;
    line-height: 1.3;
    color: #16182a;
}
.popup-desc { font-size: clamp(13px, 1.4vw, 16px); color: #5a6078; }

@keyframes cheer {
    0%   { transform: scale(1)    rotate(0); }
    35%  { transform: scale(1.12) rotate(-5deg); }
    70%  { transform: scale(1.06) rotate(4deg); }
    100% { transform: scale(1)    rotate(0); }
}
/* TODO: 아이돌 캐릭터 이미지 수령 시 교체 */
.field input:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: var(--red); }
.field input::placeholder { color: #aeb3c6; }

.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.consent { display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }
.consent input { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; flex: none; }
.consent span { font-size: clamp(11px, 1.2vw, 14px); color: #4b5068; }
.consent-detail {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f1f2f8;
    font-size: clamp(10px, 1.1vw, 12px);
    line-height: 1.7;
    color: #666c83;
    text-align: left;
}

/* 경품 안내 (이벤트 1) */
.prize-box { width: 100%; margin-top: 6px; padding: 16px; border: 1px solid #e6e8f1; border-radius: var(--radius); text-align: left; }
.prize-label { font-size: clamp(13px, 1.4vw, 16px); font-weight: 700; color: #16182a; }
.prize-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; }
.prize-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
/* TODO: 경품 이미지 수령 시 교체 */
.prize-thumb { width: 100%; aspect-ratio: 4 / 3; border: 1px dashed #dfe2ee; border-radius: 12px; background: #f8f9fd; }
.prize-name { font-size: clamp(12px, 1.3vw, 15px); font-weight: 700; line-height: 1.3; color: #16182a; }
.prize-qty  { font-family: var(--font-title); font-size: clamp(20px, 2.6vw, 30px); font-weight: normal; color: var(--red); line-height: 1; }
.prize-qty small { font-size: .5em; margin-left: 2px; }

/* ── 이벤트2 결과 팝업 ── */
/* TODO: 당첨/꽝 캐릭터 이미지 수령 시 교체 */

.result-remaining {
    width: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    background: #fff6de;
    border: 1px solid var(--gold);
    font-size: clamp(12px, 1.3vw, 15px);
    color: #5a4a12;
}
.result-remaining b { color: var(--red); }

/* ============================================================
   토스트
   ============================================================ */
.toast-container {
    /* left:50% + 폭 미지정이면 가용 폭이 화면의 절반밖에 안 잡혀
       토스트가 .toast 의 max-width 에 닿기도 전에 줄바꿈된다. 좌우로 펼친다. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 40px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.toast {
    max-width: min(440px, calc(100vw - 32px));
    padding: 13px 24px;
    border-radius: 999px;
    background: rgba(12, 15, 32, .96);
    color: #fff;
    font-size: clamp(13px, 1.4vw, 15px);
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.toast.show { opacity: 1; transform: none; }
.toast.success { background: rgba(0, 150, 88, .96); }
.toast.error   { background: rgba(190, 40, 54, .96); }

/* ============================================================
   모바일 타이포 — 디자인 기준폭 750px (1px = 0.1333vw)
   PC용 clamp 의 vw 는 1920 기준이라 모바일에서 전부 최솟값으로 떨어진다.
   여기서 750 기준으로 다시 잡는다.
   ============================================================ */
@media (max-width: 1023px) {
    /* 섹션 좌우 패딩(20px)을 벗어나 화면에 꽉 차게.
       width:100vw + margin-left 조합은 flex 중앙정렬과 겹쳐 왼쪽으로 치우치므로
       컨테이너를 늘린 뒤(stretch) 좌우 음수 마진으로 패딩만 상쇄한다. */
    .kv-title-img {
        align-self: stretch;
        width: auto;
        margin-left: -20px;
        margin-right: -20px;
        margin-top: clamp(2px, 1vw, 10px);
    }
    .kv-title-img img { width: 100%; }

    /* 타이틀과 버튼 사이를 좁혀 버튼이 아이돌을 덜 가리게 */
    .btn-img--kv { margin-top: clamp(-42px, -17.5vw, 14px); }

    .kv-tab-pill  { font-size: clamp(11px, 2.40vw, 20px); }
    .kv-tab-sub   { font-size: clamp(12px, 2.67vw, 22px); }
    /* 한국어는 단어(어절) 단위로만 끊기게 — '소프라이즈 한/우세일' 방지 */
    .kv-tab-title { font-size: clamp(15px, 4.00vw, 32px); word-break: keep-all; }
    .stab-title, .sec-desc, .sec-note, .foot-list li { word-break: keep-all; }

    .btn-img { --label-fs: 18px; }

    /* 이벤트2 — 모바일 전용 버튼(670×166)은 세로가 길어 2줄로 쓴다.
       어절 단위로만 끊기게 해 '열려 / 요!' 같은 어색한 줄바꿈을 막는다. */
    .btn-img--ev2 .btn-img-label {
        left: 25%;
        right: 5%;
        white-space: normal;
        word-break: keep-all;
        line-height: 1.3;
        text-align: center;
    }
    /* 2줄 텍스트 옆에 화살표가 세로 중앙으로 붙는다 */
    .btn-img--ev2 .btn-img-label::after { flex: none; }

    /* 줄바꿈 마커 — 모바일에서만 줄을 바꾼다 */
    .btn-img-label .m-br { display: inline; }

    .sec-kicker { font-size: clamp(15px, 4.00vw, 32px); }
    .sec-title  { font-size: clamp(28px, 8.53vw, 68px); }
    /* 이벤트2 타이틀만 유독 길어 모바일에서 두 줄로 접힌다.
       '하나만 봐도 즉석당첨 도전!' 의 한 줄 폭이 글자크기의 약 11.4배라
       좌우 20px 여백을 뺀 폭에 맞춰 역산한다. (문구가 바뀌면 이 값도 조정) */
    #secVideo .sec-title { font-size: calc((100vw - 48px) / 11.5); }
    .sec-desc   { font-size: clamp(13px, 3.20vw, 26px); }
    .sec-period { font-size: clamp(13px, 3.47vw, 28px); }
    .sec-note   { font-size: clamp(12px, 3.20vw, 26px); }

    .stab-title { font-size: clamp(13px, 3.20vw, 26px); }

    .foot-title   { font-size: clamp(17px, 4.80vw, 38px); }
    .foot-list li { font-size: clamp(11px, 2.93vw, 24px); }
    .foot-info    { font-size: clamp(10px, 2.67vw, 22px); }

    /* 탭을 무대 바닥에서 조금 더 올린다 */
    #secKv .kv-tabs { margin-bottom: clamp(14px, 5.5vw, 52px); }
}

/* ============================================================
   1920 고정 캔버스 비례 유지 (PC)

   섹션 높이가 배경에 맞춰 vw 로 고정돼 있으므로, 안쪽 콘텐츠 폭도 vw 여야 한다.
   px 기준(min(1000px,100%) 등)으로 두면 화면이 좁아져도 콘텐츠가 덜 줄어
   섹션을 넘쳐 아래 섹션과 겹친다(1024~1850px 구간에서 발생).

   ※ 이 블록은 반드시 파일 맨 뒤에 둔다. 미디어쿼리는 선택자 우선순위를
     올려주지 않으므로, 덮어야 할 기본 규칙보다 뒤에 와야 적용된다.
   ============================================================ */
@media (min-width: 1024px) {
    .sec           { padding-top: 5.729vw; padding-bottom: 5.729vw; }  /* 110/1920 */
    /* KV 는 로고가 상단에 붙어야 한다. 위 비례 패딩이 .sec-kv 의 24px 를 덮어
       로고가 설계보다 88px 내려가 있었다. (설계 로고 위치 y=22)
       타이틀·버튼·탭은 절대배치라 이 값에 영향받지 않는다. */
    #secKv         { padding-top: 1.146vw; }   /* 22/1920 */
    .sec-inner     { width: 62.5vw; }      /* 1200/1920 */
    .sec-period    { width: 26.198vw; }    /* 503/1920 */
    .vid-stage     { width: 52.083vw; }    /* 1000/1920 */
    /* 부위가 4개 → 6개로 늘어 3줄이 됐다. 섹션 높이는 배경에 맞춰 고정이라
       늘릴 수 없으므로 카드를 줄여 3줄이 그 안에 들어오게 한다.
       아래 이벤트4 와의 간격도 함께 확보한다.
       (710px 기준 카드 350×390, 3줄 = 1191px < 남는 높이 1322px) */
    .part-grid     { width: 37vw; }        /* 710/1920 */
    .shop-logo-img { width: 52.083vw; }    /* 1000/1920 */

    .btn-img--kv   { --btn-w: 31.667vw; }  /* 608/1920 */
    .btn-img--ev2  { --btn-w: 46.875vw; }  /* 900/1920 */
    .btn-img--ev3  { --btn-w: 33.333vw; }  /* 640/1920 */
    .btn-img--ev4  { --btn-w: 28.125vw; }  /* 540/1920 */

    /* 세로형 플레이어도 같은 비율로 */
    .vid-stage.is-portrait .vid-frame { height: 29.323vw; min-width: 0; }

    /* 한우세일 — 제휴사 로고 이미지(1000×1213)가 세로로 길어 할당 높이를
       모든 폭에서 약 100px 넘긴다. 상하 패딩과 로고 폭을 조금 줄여 맞춘다. */
    #secSale { padding-top: 4vw; padding-bottom: 4vw; }
    /* min 280px 때문에 좁은 폭에서 비례보다 커져 섹션을 넘긴다 */
    .sec-logo { width: 22.188vw; }
    #secSale .shop-logo-img { width: 50vw; margin-top: 2vw; }

    /* 푸터 — 배경 끝과 맞물리도록 패딩만 살짝 조인다 */
    #secFooter { padding-top: 4.5vw; padding-bottom: 3vw; }

    /* 고정 px 간격·글자도 비례로 — 좁은 폭에서 이것들이 안 줄어 섹션을 넘긴다.
       (1920 기준값 ÷ 1920 × 100 = vw) */
    .sec-inner         { gap: 0.729vw; }     /* 14 */
    .vid-stage         { gap: 1.354vw; }     /* 26 */
    .vid-bar           { height: 0.26vw; }   /*  5 */
    .vid-progress-head { font-size: clamp(10px, 0.938vw, 18px); margin-bottom: 0.417vw; }
    .vid-origin        { font-size: clamp(10px, 0.781vw, 15px); }

    .sec-kicker  { font-size: clamp(13px, 1.875vw, 36px); }
    .sec-title   { font-size: clamp(26px, 4.167vw, 80px); }
    .sec-desc    { font-size: clamp(11px, 1.250vw, 24px); }
    .sec-period  { font-size: clamp(11px, 1.354vw, 26px); }
    .sec-note    { font-size: clamp(10px, 1.042vw, 20px); }
    .btn-img { --label-fs: clamp(13px, 1.510vw, 29px); }

    .part-grid   { gap: 0.521vw; }           /* 10 */
    .foot-list   { gap: 0.521vw; }
    .foot-info   { margin-top: 2.6vw; padding-top: 2.2vw; }
}

/* ============================================================
   이벤트1 팝업 — 아이돌 선택 (Figma 134:718)

   디자인 카드 800×900 기준. --u 를 '디자인 1px' 로 두고 모든 치수를
   calc(N * var(--u)) 로 적어 화면 크기와 무관하게 비율이 유지되게 한다.
   ============================================================ */
/* 세 팝업(EV1 아이돌 / EV2 응모 / EV2 결과)이 같은 800x900 좌표계를 공유한다 */
.popup-ds {
    --u: calc(min(800px, 92vw) / 800);   /* 디자인 1px */
    position: relative;
    width: calc(800 * var(--u));
    margin: auto;
    padding: 0 0 calc(30 * var(--u));
    border-radius: calc(40 * var(--u));
    background: #fff;           /* 설계 카드 색. 캐릭터 PNG 의 흰 배경과 이음새가 안 보이게 */
    color: var(--dark);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    animation: popIn .22s ease;
}

/* ── 스텝 인디케이터 ── */
.popup-ds .steps {
    display: flex;
    gap: calc(20 * var(--u));
    list-style: none;
    width: calc(760 * var(--u));
    margin: calc(20 * var(--u)) auto 0;
    padding: 0;
}
.popup-ds .step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    opacity: .3;                      /* 비활성 — 디자인에서 30% */
    transition: opacity .18s ease;
}
.popup-ds .step.active { opacity: 1; }
.popup-ds .step-no {
    flex: none;
    width: calc(50 * var(--u));
    height: calc(50 * var(--u));
    border-radius: 50%;
    background: var(--dark);
    color: #fff;
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(24 * var(--u));
    display: grid;
    place-items: center;
}
.popup-ds .step-label {
    flex: 1;
    height: calc(50 * var(--u));
    /* 디자인: 번호 원 옆에 '완전한 알약' 형태로 붙는다 (한쪽만 둥근 모양 아님) */
    border-radius: calc(25 * var(--u));
    background: var(--dark);
    color: #fff;
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(23 * var(--u));
    display: grid;
    place-items: center;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* 활성 단계는 글자가 네온 그린 */
.popup-ds .step.active .step-no,
.popup-ds .step.active .step-label { color: var(--neon-green); }

/* ── 본문 ── */
.popup-ds .popup-body {
    padding: 0 calc(18 * var(--u));
    gap: 0;
}

/* 타이틀 — 형광펜 배경은 디자인 이미지 사용 */
.popup-ds .popup-title {
    margin-top: calc(38 * var(--u));
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(30 * var(--u));
    line-height: calc(50 * var(--u));
    color: var(--dark);
    white-space: nowrap;
}
.popup-ds .popup-title .hl {
    display: inline-block;
    padding: 0 calc(8 * var(--u));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.popup-ds .popup-title .hl-1 { background-image: url('./assets/design/popup_text_bg01.png'); }
.popup-ds .popup-title .hl-2 { background-image: url('./assets/design/popup_text_bg02.png'); }

/* ── 아이돌 6종 (3×2, 점선 구분) ── */
.popup-ds .idol-grid {
    width: calc(765 * var(--u));
    margin: calc(28 * var(--u)) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    /* 디자인의 점선 구분선 */
    border-top: calc(2 * var(--u)) dashed #c9ccd8;
}
.popup-ds .idol-card {
    display: block;
    padding: calc(22 * var(--u)) 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    line-height: 0;
    border-bottom: calc(2 * var(--u)) dashed #c9ccd8;
}
/* 세로 점선 — 가운데 열 좌우 */
.popup-ds .idol-card:nth-child(3n+2) {
    border-left: calc(2 * var(--u)) dashed #c9ccd8;
    border-right: calc(2 * var(--u)) dashed #c9ccd8;
}
.popup-ds .idol-grid .idol-card:nth-last-child(-n+3) { border-bottom: 0; }

.popup-ds .idol-img {
    display: block;
    width: calc(222 * var(--u));
    height: auto;
    margin: 0 auto;
    transition: transform .15s ease, opacity .15s ease;
}
/* 선택 상태 이미지는 겹쳐두고 투명도로 전환 (깜빡임 방지)
   ⚠️ transform 으로 중앙정렬하면 선택 애니메이션(cheer)의 transform 이 그걸 덮어써
      이미지가 오른쪽으로 튀어나간다. left/right + auto 마진으로 중앙정렬할 것. */
.popup-ds .idol-img--on {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(22 * var(--u));
    opacity: 0;
    transition: opacity .15s ease;
}
.popup-ds .idol-card:hover .idol-img--on,
.popup-ds .idol-card.selected .idol-img--on { opacity: 1; }
/* 두 장이 겹치면 글자가 두 번 그려져 굵어 보인다 → 기본 이미지는 숨겨 완전 교체 */
.popup-ds .idol-card:hover .idol-img:not(.idol-img--on),
.popup-ds .idol-card.selected .idol-img:not(.idol-img--on) { opacity: 0; }
.popup-ds .idol-card.cheering .idol-img { animation: cheer .45s ease; }

/* 닫기 — 카드 오른쪽 위 바깥 */
.popup-ds .popup-close {
    position: absolute;
    top: calc(-70 * var(--u));
    right: 0;
    width: calc(60 * var(--u));
    height: calc(60 * var(--u));
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--dark);
    font-size: calc(34 * var(--u));
    line-height: 1;
    cursor: pointer;
}

/* ── 모바일: 3×2 → 2×3 ──
   칸이 넓어지므로 캐릭터 이미지도 키운다.
   점선 구분선 규칙이 3열 기준이라 2열 기준으로 다시 잡는다. */
@media (max-width: 767px) {
    .popup-ds .idol-grid { grid-template-columns: repeat(2, 1fr); }

    /* 3열용 세로 점선 해제 */
    .popup-ds .idol-card:nth-child(3n+2) { border-left: 0; border-right: 0; }
    /* 2열용 — 왼쪽 칸 오른쪽에만 세로 점선 */
    .popup-ds .idol-card:nth-child(2n+1) { border-right: calc(2 * var(--u)) dashed #c9ccd8; }

    /* 마지막 줄(2칸)만 아래 점선 제거 */
    .popup-ds .idol-grid .idol-card:nth-last-child(-n+3) { border-bottom: calc(2 * var(--u)) dashed #c9ccd8; }
    .popup-ds .idol-grid .idol-card:nth-last-child(-n+2) { border-bottom: 0; }

    .popup-ds .idol-img { width: calc(300 * var(--u)); }
    .popup-ds .idol-img--on { top: calc(22 * var(--u)); }
}

/* ============================================================
   이벤트1 팝업 — 2단계: 응원 결과 (Figma 134:1234)

   카드 800x900 기준. 1단계와 같은 --u(디자인 1px) 좌표계를 그대로 쓴다.
   ============================================================ */

/* ── 스텝: 지나온 단계도 자기 색을 유지한다 (디자인 확인) ── */
.popup-ds .step.is-on { opacity: 1; }
.popup-ds .step[data-step="1"].is-on .step-no,
.popup-ds .step[data-step="1"].is-on .step-label { color: var(--neon-green); }
.popup-ds .step[data-step="2"].is-on .step-no,
.popup-ds .step[data-step="2"].is-on .step-label { color: var(--neon-pink); }
.popup-ds .step[data-step="3"].is-on .step-no,
.popup-ds .step[data-step="3"].is-on .step-label { color: var(--neon-cyan); }

/* ── 타이틀: [부위]에게 응원을 보냈어요! ── */
.popup-ds .popup-body--cheer { text-align: center; }
.popup-ds .cheer-title {
    margin-top: calc(44 * var(--u));        /* step 하단 70 → 타이틀 114 */
    line-height: calc(50 * var(--u));
    white-space: nowrap;
}
.popup-ds .cheer-part {
    font-size: calc(42 * var(--u));
    line-height: calc(50 * var(--u));       /* 설계 높이 고정 */
    padding: 0 calc(16 * var(--u));         /* 형광펜 이미지 117x50 비율 */
}
.popup-ds .cheer-title-rest { font-size: calc(33 * var(--u)); }

/* ── 캐릭터 + 반짝이 ── */
.popup-ds .cheer-art {
    position: relative;
    overflow: hidden;           /* PNG 투명 캔버스가 카드 밖으로 나가 가로 스크롤이 생긴다 */
    width: calc(601 * var(--u));
    height: calc(411 * var(--u));
    margin: calc(42 * var(--u)) auto 0;     /* 타이틀 하단 164.5 → 아트 207 */
}
.popup-ds .cheer-img {
    /* 전달받은 PNG 는 700x500 캔버스에 그림 429x411 이 가로 중앙 / 위 여백 44px.
       캔버스째 배치하고 여백만큼 당겨 설계 슬롯(429x411)에 정확히 올린다. */
    position: absolute;
    left: 50%;
    margin-left: calc(-350 * var(--u));
    top: calc(-44 * var(--u));
    width: calc(700 * var(--u));
    max-width: none;            /* 전역 img{max-width:100%} 가 캔버스를 잘라낸다 */
    height: auto;
    z-index: 1;
    pointer-events: none;
}
/* 반짝이 영역 — 디자인의 배경 이미지(601x283) 자리. 입자는 스크립트가 생성 */
.popup-ds .cheer-spark {
    position: absolute;
    left: 0;
    top: calc(61 * var(--u));
    width: calc(601 * var(--u));
    height: calc(283 * var(--u));
    pointer-events: none;
}
.popup-ds .spark {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
    animation: sparkTwinkle 2.4s ease-in-out infinite;
}
.popup-ds .spark--star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.popup-ds .spark--dot  { border-radius: 50%; }
.popup-ds .spark--bar  { border-radius: 999px; }
.popup-ds .spark--plus {
    clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%);
}

@keyframes sparkTwinkle {
    0%, 100% { opacity: 0;   transform: translateY(0)                      scale(.4) rotate(var(--rot, 0deg)); }
    25%      { opacity: 1;   transform: translateY(calc(-6 * var(--u)))    scale(1)  rotate(var(--rot, 0deg)); }
    55%      { opacity: .85; transform: translateY(calc(-11 * var(--u)))   scale(.9) rotate(var(--rot, 0deg)); }
    80%      { opacity: .2;  transform: translateY(calc(-4 * var(--u)))    scale(.6) rotate(var(--rot, 0deg)); }
}

/* ── 응답 문구 ── */
.popup-ds .cheer-reply {
    margin-top: calc(35 * var(--u));        /* 아트 하단 618 → 텍스트 653 */
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(30 * var(--u));
    line-height: calc(36 * var(--u));
    letter-spacing: -.05em;                 /* -1.5px / 30px */
    color: var(--dark);
}

/* ── 응모 버튼 (디자인 500x100, 글자 32) ── */
.popup-ds .popup-body--cheer .btn {
    width: calc(500 * var(--u));
    height: calc(100 * var(--u));
    margin: calc(35 * var(--u)) auto calc(10 * var(--u));
    padding: 0;
    gap: calc(22 * var(--u));
    font-size: calc(32 * var(--u));
    border-radius: 999px;
}

/* ── 모바일: --u 가 작아 글자가 너무 작아지므로 비율을 키운다 ── */
@media (max-width: 767px) {
    /* keep-all 이 없으면 '보/냈어요' 처럼 낱말 가운데가 끊긴다 */
    .popup-ds .cheer-title      { white-space: normal; word-break: keep-all; line-height: calc(72 * var(--u)); }
    .popup-ds .cheer-part       { font-size: calc(60 * var(--u)); padding: 0 calc(20 * var(--u)); }
    .popup-ds .cheer-title-rest { font-size: calc(46 * var(--u)); }

    .popup-ds .cheer-art   { width: calc(720 * var(--u)); height: calc(492 * var(--u)); }
    .popup-ds .cheer-img   { margin-left: calc(-419 * var(--u)); top: calc(-53 * var(--u)); width: calc(839 * var(--u)); }
    .popup-ds .cheer-spark { top: calc(73 * var(--u)); width: calc(720 * var(--u)); height: calc(339 * var(--u)); }

    .popup-ds .cheer-reply { font-size: calc(42 * var(--u)); line-height: calc(52 * var(--u)); }

    .popup-ds .popup-body--cheer .btn {
        width: calc(660 * var(--u));
        height: calc(130 * var(--u));
        font-size: calc(44 * var(--u));
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup-ds .spark { animation: none; opacity: .9; }
}

/* ============================================================
   팝업 모바일 가독성 보정
   --u 비례만 따르면 좁은 폭에서 스텝 글자가 10px 까지 내려간다.
   12px 를 바닥으로 두고 큰 폰에서는 그대로 비례해 커지게 한다.
   ============================================================ */
@media (max-width: 767px) {
    .popup-ds .step-no,
    .popup-ds .step-label { font-size: max(12px, calc(26 * var(--u))); }

    /* 1단계 타이틀 — 키운 만큼 한 줄에 안 들어가므로 낱말 단위로 흘린다 */
    .popup-ds .popup-body[data-panel="1"] .popup-title {
        font-size: calc(42 * var(--u));
        line-height: calc(64 * var(--u));
        white-space: normal;
        word-break: keep-all;
    }
}

/* ============================================================
   이벤트1 팝업 — 3단계: 응원 완료 / 응모 (Figma 134:1279)

   카드 800x900. 1·2단계와 같은 --u(디자인 1px) 좌표계.
   ============================================================ */
.popup-ds .popup-body--done {
    position: relative;
    /* .popup-body 기본값이 flex + align-items:center 라 좌측 정렬·좌표가 모두 밀린다 */
    display: block;
    /* .done-head 에 margin-top 을 주면 마진이 바깥으로 빠져나가(collapse)
       절대배치 기준점까지 밀린다. 패딩으로 띄운다. */
    padding-top: calc(38 * var(--u));
    text-align: left;
}

/* ── 헤드 카피 ── */
.popup-ds .done-head { margin-left: calc(58 * var(--u)); }   /* 설계 x76 - 본문 패딩 18 */
.popup-ds .done-title {
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(60 * var(--u));
    line-height: calc(60 * var(--u));
    color: var(--dark);
}
.popup-ds .done-desc {
    margin-top: calc(10 * var(--u));
    font-size: calc(22 * var(--u));
    font-weight: 600;
    line-height: calc(30 * var(--u));
    letter-spacing: -.05em;
    color: var(--dark);
}
/* 오른쪽 위 캐릭터 — 카드 기준 x449 y92, 296x304 */
/* 완료 팝업 캐릭터 뒤 반짝이 — 2단계와 같은 입자를 쓴다.
   캐릭터보다 조금 넓게 잡아 주변으로 흩날리게 하고, 뒤에 깔리도록 z-index 0. */
.popup-ds .done-spark {
    position: absolute;
    z-index: 0;
    top: calc(4 * var(--u));
    right: calc(0 * var(--u));
    width: calc(370 * var(--u));
    height: calc(200 * var(--u));
    pointer-events: none;
}

.popup-ds .done-char {
    z-index: 1;                  /* 반짝이 위, 입력 박스 아래 */
    position: absolute;
    /* 입력 박스(카드 기준 276)보다 164 위에서 시작 → 머리만 박스 밖으로.
       top 은 본문 기준이라 카드 좌표에서 70 을 뺀 값이다. */
    top: calc(24 * var(--u));
    right: calc(30 * var(--u));
    width: calc(296 * var(--u));
    max-width: none;
    height: auto;
    pointer-events: none;
}

/* ── 입력 박스 ── */
.popup-ds .popup-body--done .entry-form {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}
.popup-ds .form-box {
    position: relative;
    z-index: 2;                 /* 캐릭터·반짝이 위로 — 얼굴만 박스 밖으로 보인다 */
    width: calc(720 * var(--u));
    margin: calc(38 * var(--u)) 0 0 calc(22 * var(--u));   /* 설계 x40 y276 */
    padding: calc(30 * var(--u)) calc(29 * var(--u)) calc(22 * var(--u));
    border-radius: calc(20 * var(--u));
    background: #f2f2f2;
}
.popup-ds .form-box .field {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
}
.popup-ds .form-box .field + .field { margin-top: calc(20 * var(--u)); }
.popup-ds .form-box .field label {
    flex: none;
    width: calc(111 * var(--u));
    margin: 0;
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(29 * var(--u));
    line-height: calc(30 * var(--u));
    color: var(--dark);
    letter-spacing: .1em;
}
/* 설계상 '이 름' 이 '연락처' 와 비슷한 폭이 되도록 자간이 더 넓다 */
.popup-ds .form-box .field label[for="idolName"] { letter-spacing: .19em; }

.popup-ds .form-box .field input {
    flex: 1;
    width: auto;
    height: calc(60 * var(--u));
    padding: 0 calc(19 * var(--u));
    border: 0;
    border-radius: calc(12 * var(--u));
    background: #fff;
    font-size: calc(24 * var(--u));
    letter-spacing: -.05em;
    color: var(--dark);
    /* 테두리를 border 로 주면 높이가 흔들리므로 inset 그림자로 */
    box-shadow: none;
    transition: box-shadow .15s ease;
}
.popup-ds .form-box .field input::placeholder { color: var(--dark); opacity: .5; }
.popup-ds .form-box .field input:focus,
.popup-ds .form-box .field input:not(:placeholder-shown) {
    outline: 0;
    box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--dark);
}

/* ── 동의 줄 ── */
.popup-ds .form-box .consent-row {
    margin-top: calc(23 * var(--u));
    gap: calc(10 * var(--u));
    flex-wrap: nowrap;
}
.popup-ds .form-box .consent { gap: calc(9 * var(--u)); }
.popup-ds .form-box .consent input {
    appearance: none;
    -webkit-appearance: none;
    width: calc(25 * var(--u));
    height: calc(25 * var(--u));
    border-radius: 50%;
    border: calc(2 * var(--u)) solid #c9ccd8;
    background: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.popup-ds .form-box .consent input:checked {
    border-color: var(--dark);
    background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l5 5 9-10%22/%3E%3C/svg%3E") center / 62% no-repeat;
}
.popup-ds .form-box .consent span {
    font-size: calc(20 * var(--u));
    line-height: calc(25 * var(--u));
    letter-spacing: -.05em;
    color: var(--dark);
}
.popup-ds .form-box .btn-text {
    flex: none;
    width: calc(100 * var(--u));
    height: calc(40 * var(--u));
    padding: 0;
    border: 0;
    border-radius: calc(10 * var(--u));
    background: #aaaaae;
    color: #fff;
    font-size: calc(20 * var(--u));
    letter-spacing: -.05em;
    cursor: pointer;
}
.popup-ds .form-box .btn-text:hover { background: #8e8e94; color: #fff; }

.popup-ds .popup-body--done .consent-detail {
    width: calc(720 * var(--u));
    margin: calc(12 * var(--u)) 0 0 calc(22 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1.6;
}

/* ── 경품 카드 ── */
.popup-ds .popup-body--done .prize-list {
    display: flex;
    justify-content: center;
    gap: calc(24 * var(--u));
    margin-top: calc(19 * var(--u));
}
.popup-ds .popup-body--done .prize-item {
    position: relative;
    display: block;
    width: calc(350 * var(--u));
    padding-top: calc(23 * var(--u));   /* 탭이 카드 위로 올라앉는 만큼 */
}
.popup-ds .prize-tab {
    position: absolute;
    z-index: 1;                 /* 카드 몸통이 뒤에 깔리도록 */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(119 * var(--u));
    height: calc(47 * var(--u));
    background: url("./assets/design/popup_prize_tab.png") center / 100% 100% no-repeat;
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(22 * var(--u));
    line-height: calc(47 * var(--u));
    text-align: center;
    color: var(--gold);
}
.popup-ds .prize-body {
    position: relative;
    height: calc(167 * var(--u));
    border-radius: calc(20 * var(--u));
    background: #f2f2f2;
}
.popup-ds .popup-body--done .prize-thumb {
    position: absolute;
    left: calc(27 * var(--u));
    top: calc(35 * var(--u));
    width: calc(136 * var(--u));
    height: calc(120 * var(--u));
    max-width: none;
    object-fit: contain;
    border: 0;
    background: none;
    aspect-ratio: auto;
}
.popup-ds .prize-text {
    position: absolute;
    left: calc(197 * var(--u));
    top: calc(43 * var(--u));
}
.popup-ds .popup-body--done .prize-name {
    display: block;
    font-size: calc(24 * var(--u));
    font-weight: 700;
    line-height: calc(30 * var(--u));
    letter-spacing: -.05em;
    color: #000;
}
.popup-ds .popup-body--done .prize-qty {
    display: block;
    margin-top: calc(8 * var(--u));
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(30 * var(--u));
    line-height: calc(30 * var(--u));
    color: var(--dark);
}

/* ── 응모완료 버튼 — 화살표 대신 체크 아이콘 ── */
.popup-ds .popup-body--done .btn {
    display: flex;              /* inline-flex 면 margin:auto 가 먹지 않는다 */
    width: calc(500 * var(--u));
    height: calc(100 * var(--u));
    margin: calc(20 * var(--u)) auto calc(10 * var(--u));
    padding: 0;
    gap: calc(7 * var(--u));
    font-size: calc(32 * var(--u));
    letter-spacing: .017em;
    border-radius: 999px;
}
.popup-ds .popup-body--done .btn::after {
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    border-radius: 0;
    background: url("./assets/design/popup_check.svg") center / contain no-repeat;
}

/* ── 모바일 ── */
@media (max-width: 767px) {
    /* 캐릭터가 헤드 카피를 덮지 않도록 작게 올려 붙인다 */
    /* 입력 박스(313)보다 129 위 → 모바일에서도 얼굴만 */
    .popup-ds .done-char  { width: calc(230 * var(--u)); right: calc(8 * var(--u)); top: calc(98 * var(--u)); }
    .popup-ds .done-spark { top: calc(78 * var(--u)); right: calc(0 * var(--u));
                            width: calc(290 * var(--u)); height: calc(160 * var(--u)); }
    .popup-ds .done-head  { margin-left: calc(22 * var(--u)); }
    .popup-ds .done-title { font-size: calc(72 * var(--u)); line-height: calc(76 * var(--u)); }
    .popup-ds .done-desc  { font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); }

    .popup-ds .form-box { width: calc(756 * var(--u)); margin-left: calc(4 * var(--u)); padding: calc(26 * var(--u)) calc(22 * var(--u)); }
    /* 항목명은 모바일에서 열정도체가 뭉개져 읽기 어렵다 → 프리텐다드로 */
    .popup-ds .form-box .field { display: flex; align-items: center; }
    .popup-ds .form-box .field + .field { margin-top: calc(22 * var(--u)); }
    .popup-ds .form-box .field label {
        width: calc(140 * var(--u));
        font-family: var(--font-body);
        font-weight: 700;
        font-size: calc(32 * var(--u));
        line-height: calc(110 * var(--u));
        letter-spacing: -.02em;
    }
    .popup-ds .form-box .field label[for="idolName"] { letter-spacing: -.02em; }
    .popup-ds .form-box .field input { width: auto; height: calc(110 * var(--u)); font-size: calc(28 * var(--u)); padding: 0 calc(22 * var(--u)); }
    .popup-ds .form-box .consent-row { flex-wrap: wrap; }
    /* min-width:auto 때문에 줄어들지 못해 동의문구가 '약관 내용' 버튼을 침범한다 */
    .popup-ds .form-box .consent { flex: 1 1 auto; min-width: 0; align-items: flex-start; }
    .popup-ds .form-box .consent span { white-space: normal; word-break: keep-all; }
    .popup-ds .form-box .consent input { margin-top: calc(3 * var(--u)); }
    .popup-ds .form-box .consent input { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
    .popup-ds .form-box .consent span { font-size: calc(26 * var(--u)); line-height: calc(34 * var(--u)); }
    .popup-ds .form-box .btn-text { width: calc(130 * var(--u)); height: calc(52 * var(--u)); font-size: calc(26 * var(--u)); }

    .popup-ds .popup-body--done .consent-detail { width: calc(756 * var(--u)); margin-left: calc(4 * var(--u)); font-size: calc(24 * var(--u)); }

    .popup-ds .popup-body--done .prize-list { flex-direction: column; align-items: center; gap: calc(40 * var(--u)); }
    .popup-ds .popup-body--done .prize-item { width: calc(500 * var(--u)); padding-top: calc(32 * var(--u)); }
    .popup-ds .prize-tab  { width: calc(166 * var(--u)); height: calc(66 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(66 * var(--u)); }
    .popup-ds .prize-body { height: calc(238 * var(--u)); }
    .popup-ds .popup-body--done .prize-thumb { left: calc(38 * var(--u)); top: calc(50 * var(--u)); width: calc(194 * var(--u)); height: calc(171 * var(--u)); }
    .popup-ds .prize-text { left: calc(281 * var(--u)); top: calc(61 * var(--u)); }
    .popup-ds .popup-body--done .prize-name { font-size: calc(34 * var(--u)); line-height: calc(43 * var(--u)); }
    .popup-ds .popup-body--done .prize-qty  { font-size: calc(43 * var(--u)); line-height: calc(43 * var(--u)); }

    .popup-ds .popup-body--done .btn { width: calc(660 * var(--u)); height: calc(130 * var(--u)); font-size: calc(44 * var(--u)); gap: calc(14 * var(--u)); }
    .popup-ds .popup-body--done .btn::after { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
}

/* ============================================================
   이벤트2 팝업 — 시청 완료 / 즉석당첨 결과
   (Figma 134:1362 · 134:1465 · 134:1419)

   카드 800x900, --u 좌표계는 .popup-ds 에서 공유한다.
   ============================================================ */

/* ── 디자인 버튼 — 설계는 단색(그라데이션 아님) ── */
.popup-ds .btn-green { background: var(--neon-green); }
.popup-ds .btn-gold  { background: var(--gold); }
.popup-ds .btn-green:hover { box-shadow: 0 0 46px rgba(0, 234, 135, .55); }

/* ============================================================
   1) 시청 완료 → 응모 (134:1362)
   ============================================================ */
.popup-ds .popup-body--videntry {
    position: relative;
    display: block;
    padding-top: calc(76 * var(--u));      /* 설계 헤드 y146 - 본문 상단 70 */
    text-align: left;
}
.popup-ds .popup-body--videntry .done-head { margin-left: calc(42 * var(--u)); }  /* 설계 x60 - 본문 패딩 18 */
.popup-ds .popup-body--videntry .done-title {
    font-size: calc(59 * var(--u));
    letter-spacing: .053em;
}
/* 노란 형광펜은 글자보다 짧아 뒤쪽 글자가 밖으로 나온다 (설계 그대로) */
.popup-ds .vid-sub {
    margin-top: calc(13 * var(--u));
    padding-left: calc(13 * var(--u));
    height: calc(50 * var(--u));
    line-height: calc(50 * var(--u));
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(35 * var(--u));
    letter-spacing: .03em;
    color: var(--dark);
    background: url("./assets/design/ev2_title_bg.png") left center / calc(245 * var(--u)) calc(50 * var(--u)) no-repeat;
    white-space: nowrap;
}
.popup-ds .popup-body--videntry .done-desc {
    margin: calc(22 * var(--u)) 0 0 calc(15 * var(--u));
}
.popup-ds .popup-body--videntry .done-char {
    top: calc(45 * var(--u));              /* 설계 y115 - 본문 상단 70 */
    right: calc(70 * var(--u));            /* 800 - 420 - 310 */
    width: calc(310 * var(--u));
}
.popup-ds .popup-body--videntry .entry-form { display: block; width: auto; margin: 0; padding: 0; }
.popup-ds .popup-body--videntry .form-box { margin-top: calc(74 * var(--u)); }   /* 설계 y425 */
.popup-ds .popup-body--videntry .consent-detail {
    width: calc(720 * var(--u));
    margin: calc(12 * var(--u)) 0 0 calc(22 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1.6;
}
.popup-ds .popup-body--videntry .btn {
    display: flex;
    width: calc(500 * var(--u));
    height: calc(100 * var(--u));
    margin: calc(80 * var(--u)) auto calc(10 * var(--u));   /* 설계 y760 */
    padding: 0;
    gap: calc(16 * var(--u));
    font-size: calc(31 * var(--u));
    border-radius: 999px;
}

/* ============================================================
   2) 즉석당첨 결과 — 당첨/꽝 공용 (134:1465 · 134:1419)
   ============================================================ */
.popup-ds .popup-body--vidresult {
    display: block;
    text-align: center;
}
.popup-ds .result-title {
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(59 * var(--u));
    line-height: calc(60 * var(--u));
    letter-spacing: .04em;
    color: var(--dark);
}
.popup-ds .result-art { display: block; padding: 0; line-height: 0; }
.popup-ds .result-art img {
    display: block;
    margin: 0 auto;
    max-width: none;
    height: auto;
}
/* 금색 리본 — 당첨일 때만 */
.popup-ds .result-ribbon {
    width: calc(457 * var(--u));
    height: calc(65 * var(--u));
    margin: calc(16 * var(--u)) auto 0;
    line-height: calc(65 * var(--u));
    font-family: var(--font-title);
    font-weight: normal;
    font-size: calc(31 * var(--u));
    color: var(--gold);
    background: url("./assets/design/ev2_win_ribbon.png") center / 100% 100% no-repeat;
    white-space: nowrap;
}
.popup-ds .result-desc {
    font-size: calc(22 * var(--u));
    font-weight: 600;
    line-height: calc(30 * var(--u));
    letter-spacing: -.05em;
    color: var(--dark);
}
.popup-ds .result-remaining {
    width: auto;
    margin-top: calc(20 * var(--u));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: calc(19 * var(--u));
    color: #6b6f80;
}
.popup-ds .result-remaining b { color: var(--dark); }

/* 당첨 — 아트 637x376, 리본 있음 */
.popup-ds .popup-body--vidresult.is-win { padding-top: calc(56 * var(--u)); }     /* 설계 타이틀 y126 */
.popup-ds .popup-body--vidresult.is-win .result-art { margin-top: calc(20 * var(--u)); }
.popup-ds .popup-body--vidresult.is-win .result-art img { width: calc(637 * var(--u)); }
.popup-ds .popup-body--vidresult.is-win .result-desc { margin-top: 0; }
.popup-ds .popup-body--vidresult.is-win .btn-row { margin-top: calc(37 * var(--u)); }

/* 꽝 — 캐릭터 376x376, 리본 없음 */
.popup-ds .popup-body--vidresult.is-lose { padding-top: calc(77 * var(--u)); }    /* 설계 타이틀 y147 */
.popup-ds .popup-body--vidresult.is-lose .result-art { margin-top: calc(19 * var(--u)); }
.popup-ds .popup-body--vidresult.is-lose .result-art img { width: calc(376 * var(--u)); }
.popup-ds .popup-body--vidresult.is-lose .result-desc { margin-top: calc(21 * var(--u)); }
.popup-ds .popup-body--vidresult.is-lose .btn-row { margin-top: calc(77 * var(--u)); }

/* 두 개 버튼 — 350x100 두 장, 간격 20 (설계 x40 / x410) */
.popup-ds .popup-body--vidresult .btn-row {
    width: calc(720 * var(--u));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(10 * var(--u));
    gap: calc(20 * var(--u));
    flex-wrap: nowrap;
}
.popup-ds .popup-body--vidresult .btn-row .btn {
    flex: 1 1 0;
    width: calc(350 * var(--u));
    height: calc(100 * var(--u));
    padding: 0;
    gap: calc(6 * var(--u));
    font-size: calc(30 * var(--u));
    letter-spacing: -.04em;
    border-radius: 999px;
}
.popup-ds .popup-body--vidresult .btn-row .btn::after {
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
}
/* 남은 기회가 없어 '다른 영상 보기' 가 숨으면 남은 버튼이 가운데로 */
.popup-ds .popup-body--vidresult .btn-row .btn[hidden] { display: none; }

/* ============================================================
   모바일
   ============================================================ */
@media (max-width: 767px) {
    /* ── 응모 팝업 ── */
    .popup-ds .popup-body--videntry { padding-top: calc(60 * var(--u)); }
    .popup-ds .popup-body--videntry .done-head { margin-left: calc(22 * var(--u)); }
    .popup-ds .popup-body--videntry .done-title { font-size: calc(72 * var(--u)); line-height: calc(76 * var(--u)); }
    .popup-ds .vid-sub {
        height: calc(62 * var(--u));
        line-height: calc(62 * var(--u));
        font-size: calc(44 * var(--u));
        padding-left: calc(16 * var(--u));
        background-size: calc(300 * var(--u)) calc(62 * var(--u));
    }
    .popup-ds .popup-body--videntry .done-desc { margin: calc(18 * var(--u)) 0 0; font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); }
    .popup-ds .popup-body--videntry .done-char { width: calc(250 * var(--u)); right: calc(14 * var(--u)); top: calc(14 * var(--u)); }
    .popup-ds .popup-body--videntry .form-box { margin-top: calc(40 * var(--u)); }
    .popup-ds .popup-body--videntry .consent-detail { width: calc(756 * var(--u)); margin-left: calc(4 * var(--u)); font-size: calc(24 * var(--u)); }
    .popup-ds .popup-body--videntry .btn {
        width: calc(660 * var(--u));
        height: calc(130 * var(--u));
        margin-top: calc(44 * var(--u));
        font-size: calc(44 * var(--u));
        gap: calc(20 * var(--u));
    }
    .popup-ds .popup-body--videntry .btn::after { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }

    /* ── 결과 팝업 ── */
    .popup-ds .result-title { font-size: calc(72 * var(--u)); line-height: calc(80 * var(--u)); }
    .popup-ds .result-desc  { font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); }
    .popup-ds .result-remaining { font-size: calc(24 * var(--u)); }
    .popup-ds .result-ribbon {
        width: calc(700 * var(--u));
        height: calc(100 * var(--u));
        line-height: calc(100 * var(--u));
        font-size: calc(44 * var(--u));
    }
    .popup-ds .popup-body--vidresult.is-win  { padding-top: calc(50 * var(--u)); }
    .popup-ds .popup-body--vidresult.is-win .result-art img  { width: calc(740 * var(--u)); }
    .popup-ds .popup-body--vidresult.is-win .btn-row { margin-top: calc(40 * var(--u)); }
    .popup-ds .popup-body--vidresult.is-lose { padding-top: calc(60 * var(--u)); }
    .popup-ds .popup-body--vidresult.is-lose .result-art img { width: calc(520 * var(--u)); }
    .popup-ds .popup-body--vidresult.is-lose .btn-row { margin-top: calc(50 * var(--u)); }

    /* 좁은 폭에서 버튼 두 개를 나란히 두면 글자가 깨진다 → 세로로 */
    .popup-ds .popup-body--vidresult .btn-row {
        width: calc(660 * var(--u));
        flex-direction: column;
        gap: calc(20 * var(--u));
    }
    .popup-ds .popup-body--vidresult .btn-row .btn {
        flex: none;             /* column 에서 flex:1 1 0 이면 높이가 0 으로 눌린다 */
        width: 100%;
        height: calc(120 * var(--u));
        font-size: calc(40 * var(--u));
        gap: calc(14 * var(--u));
    }
    .popup-ds .popup-body--vidresult .btn-row .btn::after { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
}

/* ============================================================
   KV 무대 — 배경과 아이돌 분리 (Figma 144:2017)

   기존 bg.webp 에는 아이돌이 배경에 합쳐져 있어 움직일 수 없었다.
   아이돌이 빠진 무대 사진(kv_stage.jpg)을 KV 영역에 덮고, 그 위에
   아이돌 6장을 설계 좌표(1903x1071 기준 %)로 올려 각자 움직이게 한다.

   .kv-stage 는 DOM 에서 타이틀/버튼/탭보다 앞에 있어 자동으로 뒤에 깔린다.
   ============================================================ */
.kv-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* 섹션 높이(1100)와 사진 비율(1071)이 2.7% 달라 세로로 늘려 채운다.
       사진이라 티가 나지 않고, 아이돌도 같은 비율로 늘어나 구도가 유지된다. */
    background: var(--bg) url('./assets/design/kv_stage.webp') center / 100% 100% no-repeat;
}

/* 상단 — 무대 조명이 화려해 타이틀이 묻힌다. 위쪽을 페이지 배경색으로
   눌러준다. ::before 는 .kv-cast 보다 먼저 그려져 아이돌 뒤에 깔리므로
   캐릭터와 타이틀은 그대로 두고 사진만 가라앉는다. */
.kv-stage::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(2, 4, 16, .95)  0%,
        rgba(2, 4, 16, .84) 22%,
        rgba(2, 4, 16, .66) 44%,
        rgba(2, 4, 16, .50) 64%,
        rgba(2, 4, 16, .40) 82%,
        rgba(2, 4, 16, .36) 100%);
}

/* 무대 사진은 관객석 한가운데서 끝난다. 원래 bg.webp 는 한 장이라 이음새가
   없었는데 무대를 덮으면서 생겼다 → 아래쪽을 페이지 배경색으로 녹인다. */
.kv-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15%;
    background: linear-gradient(to bottom,
        rgba(2, 4, 16, 0) 0%,
        rgba(2, 4, 16, .55) 45%,
        rgba(2, 4, 16, .92) 80%,
        var(--bg) 100%);
}



/* ============================================================
   KV 아이돌 — 그룹 크기 / 등장 / 상시 모션
   ============================================================ */

/* 그룹 전체 크기. 발 선(78%)을 축으로 줄여 무대에 그대로 서 있게 한다.
   이 값 하나만 바꾸면 6명이 비율 그대로 커지고 작아진다. */
.kv-cast {
    position: absolute;
    inset: 0;
    transform: scale(var(--kv-cast-scale, .78));
    transform-origin: 50% 78%;
}

/* ── 1겹: 등장 ──
   양쪽 바깥에서 미끄러져 들어온다. 끝에서 살짝 넘어갔다 돌아오는
   이징이라 '샤샤삭' 하고 멈춰 서는 느낌이 난다. */
.kv-idol {
    position: absolute;
    display: block;
    left: var(--x);              /* PHP 가 PC(--x…) / 모바일(--mx…) 좌표를 둘 다 넘긴다 */
    top: var(--y);
    width: var(--w);
    height: var(--h);
    z-index: var(--z, 3);
    /* button 요소라 기본 스타일을 지운다 (클릭하면 해당 부위 응원 결과로) */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /* 박스 전체로 받으면 옆 아이돌의 투명 여백이 클릭을 가로챈다.
       실제 입력은 아래 .kv-idol-hit 만 받는다. */
    pointer-events: none;
    animation: var(--enter) .62s cubic-bezier(.17, .89, .32, 1.28) both;
    animation-delay: var(--in-delay, 0s);
}
/* 마우스를 올린 아이돌이 맨 앞으로 — 말풍선이 옆 아이돌에 가리지 않게 */
.kv-idol:hover,
.kv-idol:focus-visible { z-index: 9; }
.kv-idol:focus-visible { outline: 3px solid var(--neon-green); outline-offset: 4px; border-radius: 12px; }
/* 키보드 포커스에도 호버와 같은 반응 */
.kv-idol:focus-visible .kv-idol-say { opacity: 1; }
/* 신발 밑창 그림자 - 발 위치는 PHP 가 캔버스 대비 %로 찍어준다.
   들썩임(.kv-idol-bob) 바깥에 둬서 캐릭터가 떠올라도 바닥에 붙어 있는다. */
.kv-idol-bob::before {
    content: "";
    position: absolute;
    z-index: 0;                       /* 캐릭터(.kv-idol-bob, z1) 뒤.
                                         음수 z 는 filter 와 겹치면 크로미움에서 사라진다 */
    left: var(--fx, 50%);
    top: var(--fy, 100%);
    width: var(--fw, 60%);
    aspect-ratio: 4 / 1;
    transform: translate(-50%, -50%);   /* 타원 중심이 발바닥 선에 오도록 */
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    filter: blur(9px);                  /* 그라데이션보다 접지 그림자에 가깝다 */
    pointer-events: none;
}

.kv-idol--from-l { --enter: kvCastInL; }
.kv-idol--from-r { --enter: kvCastInR; }

@keyframes kvCastInL {
    from { opacity: 0; transform: translateX(-70vw); }
    40%  { opacity: 1; }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes kvCastInR {
    from { opacity: 0; transform: translateX(70vw); }
    40%  { opacity: 1; }
    to   { opacity: 1; transform: translateX(0); }
}

/* 바깥쪽부터 차례로, 센터(3번)가 마지막에 꽂힌다 */
.kv-idol--1 { --in-delay: 0s;    }
.kv-idol--6 { --in-delay: .06s;  }
.kv-idol--2 { --in-delay: .14s;  }
.kv-idol--5 { --in-delay: .20s;  }
.kv-idol--4 { --in-delay: .28s;  }
.kv-idol--3 { --in-delay: .38s;  }

/* ── 2겹: 캐릭터 칸 (상시 움직임 없음) ── */
.kv-idol-bob {
    display: block;
    position: relative;
    z-index: 1;                 /* 발 그림자 위 */
    width: 100%;
    height: 100%;
    /* 벌어짐은 여기서. .kv-idol 의 transform 은 등장 애니메이션이 쓰고 있다 */
    transform: translateX(var(--shift, 0px));
    transition: transform .34s cubic-bezier(.2, .72, .28, 1);
}
.kv-idol-fig { z-index: 1; }    /* 발 그림자 위 */

/* 클릭·호버를 받는 영역 — 캐릭터 몸통만. 벌어질 때 같이 움직이도록
   .kv-idol-bob 안에 둔다. */
.kv-idol-hit {
    position: absolute;
    z-index: 2;
    left: var(--fx, 50%);
    top: var(--hy, 0%);
    width: var(--hw, 40%);
    height: var(--hh, 100%);
    transform: translateX(-50%);
    pointer-events: auto;
}

/* ── 마우스를 올리면 양옆이 벌어진다 ──
   호버한 아이돌은 제자리, 그보다 앞에 있는 형제는 왼쪽, 뒤는 오른쪽으로.
   (--spread 는 각 아이돌 캔버스 폭 기준) */
.kv-cast { --spread: 30%; }
@media (hover: hover) and (pointer: fine) {
.kv-cast:has(.kv-idol:hover) .kv-idol                  { --shift: calc(var(--spread) * -1); }
.kv-cast:has(.kv-idol:hover) .kv-idol:hover ~ .kv-idol { --shift: var(--spread); }
.kv-cast:has(.kv-idol:hover) .kv-idol:hover            { --shift: 0px; }
.kv-idol:hover .kv-idol-say { opacity: 1; }
}

/* ── 3겹: 이미지 두 장이 겹치는 칸 ── */
.kv-idol-fig {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
/* 기본/말풍선 두 장은 캔버스가 같아 같은 칸에 겹쳐두면 정확히 포개진다 */
.kv-idol-fig img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* z-index = 앞뒤 겹침. 앞 ← 3 · (2,4) · (1,5) · 6 → 뒤 */
.kv-idol--1 { --z: 3; }
.kv-idol--2 { --z: 4; }
.kv-idol--3 { --z: 5; }
.kv-idol--4 { --z: 4; }
.kv-idol--5 { --z: 3; }
.kv-idol--6 { --z: 2; }

/* ── 말풍선 — 마우스를 올린 아이돌만 ──
   _active 는 캐릭터 + 말풍선이 함께 그려진 같은 캔버스 이미지다.
   기본 장을 깔아둔 채 통째로 덮어씌우면 캐릭터 픽셀은 제자리에 겹쳐
   그대로고, 말풍선만 떠오르는 것처럼 보인다. */
.kv-idol-say {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .24s ease;
}
.kv-idol:hover .kv-idol-say { opacity: 1; }

/* 둘레 광 - 섹션 타이틀(.sec-title)의 네온 글로우와 같은 결.
   text-shadow 가 글자 모양을 따라가듯 drop-shadow 는 알파 실루엣을
   따라가므로, 캐릭터와 말풍선 테두리에만 빛이 돈다. */
.kv-idol-say img {
    filter: drop-shadow(0 0 6px  rgba(255, 255, 255, .85))
            drop-shadow(0 0 24px rgba(255, 67, 255, .7))
            drop-shadow(0 0 48px rgba(255, 67, 255, .4));
}

@media (prefers-reduced-motion: reduce) {
    .kv-idol { animation: none; opacity: 1; }
    .kv-idol-bob { transition: none; }
}

/* ============================================================
   모바일 — 세로 무대(m_kv_stage.webp)에 뒤줄 3 / 앞줄 3
   호버가 없으므로 말풍선은 자동 순환, 탭하면 바로 응원 결과로 간다.
   ============================================================ */
@media (max-width: 1023px) {
    .kv-stage {
        background-image: url('./assets/design/m_kv_stage.webp');
    }
    .kv-cast {
        --kv-cast-scale: 1;            /* 모바일 좌표는 이미 최종 크기 */
        translate: 0 3.5%;             /* 말풍선이 머리를 덜 가리게 조금 내린다 */
    }

    /* 무대 조명이 세서 전체를 한 번 더 눌러준다.
       ::before 는 .kv-cast 보다 먼저 그려져 아이돌 뒤에만 깔리므로,
       사진만 가라앉고 캐릭터 밝기는 그대로다.
       아이돌이 서는 중간(45~68%)을 가장 옅게 둬 인물이 묻히지 않는다. */
    .kv-stage::before {
        height: 100%;
        background: linear-gradient(to bottom,
            rgba(2, 4, 16, .95)   0%,
            rgba(2, 4, 16, .78)  22%,
            rgba(2, 4, 16, .58)  45%,
            rgba(2, 4, 16, .48)  68%,
            rgba(2, 4, 16, .60)  88%,
            rgba(2, 4, 16, .72) 100%);
    }

    /* .kv-inner 가 세로로 꽉 차서 무대 위를 덮는다. 컨테이너는 투과시키고
       실제 조작 대상(타이틀/버튼/탭)만 입력을 받게 한다. */
    /* 아이돌을 키운 만큼 탭을 아래로 내려 무대 자리를 비운다 */
    #secKv .kv-tabs    { transform: translateY(15.3vw); }
    #secKv .kv-inner   { pointer-events: none; }
    #secKv .kv-inner > * { pointer-events: auto; }

    .kv-idol {
        left: var(--mx);
        top: var(--my);
        width: var(--mw);
        height: var(--mh);
    }
    /* 탭 영역을 열 간격만큼 넓힌다 (44px 이상 확보) */
    .kv-idol-hit { width: var(--mhw, 55%); }

    /* 한 줄 - 왼쪽이 앞으로 겹치게 (PC 와 같은 결) */
    .kv-idol--1 { --z: 7; }
    .kv-idol--2 { --z: 6; }
    .kv-idol--3 { --z: 5; }
    .kv-idol--4 { --z: 4; }
    .kv-idol--5 { --z: 3; }
    .kv-idol--6 { --z: 2; }

    /* 말풍선 자동 순환 — 2.4초씩 한 바퀴 14.4초 */
    .kv-idol-say {
        animation: kvSayTurn 14.4s linear infinite;
        animation-delay: calc(1.2s + var(--turn, 0) * 2.4s);
    }
    .kv-idol {
        animation: var(--enter) .62s cubic-bezier(.17, .89, .32, 1.28) both,
                   kvSayFront 14.4s infinite;
        animation-timing-function: cubic-bezier(.17, .89, .32, 1.28), step-end;
        animation-delay: var(--in-delay, 0s), calc(1.2s + var(--turn, 0) * 2.4s);
    }
    @keyframes kvSayTurn {
        0%            { opacity: 0; }
        1.5%          { opacity: 1; }
        13.5%         { opacity: 1; }
        16.667%, 100% { opacity: 0; }
    }
    @keyframes kvSayFront {
        0%      { z-index: 9; }
        16.667% { z-index: var(--z, 3); }
    }
}

/* ============================================================
   모바일 오브젝트 — 작게, 가장자리에서 일부 잘린 채로 노출
   PC 좌표(1920 기준)를 그대로 쓰면 화면 밖으로 나가 안 보였다.
   좌우를 번갈아 붙이고 바깥으로 살짝 빼 '떠다니는 장식'만 비친다.
   ============================================================ */
@media (max-width: 1023px) {
    .deco { display: block; width: 26%; }

    .deco--youtube   { left: -6%;  right: auto; top: 19.5%; }
    .deco--melody    { left: auto; right: -7%;  top: 32.3%; }
    .deco--jomyung   { left: -8%;  right: auto; top: 39.3%; }
    .deco--mic       { left: auto; right: -6%;  top: 57.6%; }
    .deco--hand      { left: -5%;  right: auto; top: 72.2%; }
    .deco--celebrate { left: auto; right: -7%;  top: 81.3%; }

    /* 떠오르는 폭도 화면에 맞게 줄인다 */
    @keyframes decoFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-8px); }
    }
}

/* ============================================================
   경품 안내 말풍선 (Figma 160:2 · 159:38)

   설계의 Black Han Sans 는 프로젝트 타이틀 폰트(RIX열정도)로 대체했다.
   폰트를 한 벌 더 받지 않고 페이지 톤도 유지된다.
   당첨 인원은 config.php 값을 PHP 가 찍어주므로 수량을 바꿔도 따라간다.

   말풍선은 정사각(250x250)을 유지해야 꼬리가 찌그러지지 않으므로,
   경품 이미지는 흐름에서 빼 절대배치하고 위로 살짝 걸치게 둔다.
   ============================================================ */
/* 이벤트2 안내 문구 강조 — 섹션 강조색(연두)과 동일 */
.sec-desc-hl { color: var(--neon-green); font-weight: 700; }

.prize-bubble {
    position: absolute;
    z-index: 3;
    display: none;                       /* PC 에서만 — 아래 미디어쿼리에서 켠다 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    /* 절대배치 요소의 % 패딩은 '부모 섹션' 폭 기준이라 38% 가 729px 이 된다.
       말풍선 폭(12.6vw) 기준으로 환산해 vw 로 적는다.
       아래를 두텁게 잡아 원의 아랫배(꼬리 쪽) 를 피하면서 내용은 가운데로 모인다. */
    padding: 0.88vw 0.76vw 1.32vw;       /* 7% / 6% / 10.5% of 12.6vw */
    background: url('./assets/design/bubble_shape.svg') center / 100% 100% no-repeat;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .35));
    pointer-events: none;
    user-select: none;
    text-align: center;
}
/* 경품 이미지는 말풍선 안에 — 흐름에 두고 글과 함께 세로 가운데로 묶는다.
   흐름에 둬도 aspect-ratio 가 높이를 잡아줘 정사각은 유지된다. */
.prize-bubble-img {
    display: block;
    width: 48%;
    height: auto;
    margin: 0 auto 4%;           /* 글과 붙지 않게 아래 여백 */
}
/* popup_prize02.png 은 버거가 캔버스 오른쪽에 6.7% 여백을 두고 있어
   그대로 가운데 정렬하면 왼쪽으로 치우쳐 보인다. 그 절반만큼 되민다. */
.prize-bubble--ev1 .prize-bubble-img { transform: translateX(7%); }
/* 이벤트2 한우세트는 살짝 내려 앉히고, 버거보다 작아 보여 1.15 배로 키운다 */
.prize-bubble--ev2 .prize-bubble-img { position: relative; top: 4%; width: 55.2%; }
.prize-bubble-lead {
    font-size: clamp(12px, 1.02vw, 19.5px);
    font-weight: 700;
    line-height: 1.45;
    color: var(--dark);
    word-break: keep-all;        /* 길면 낱말 단위로 두 줄 */
}
.prize-bubble-name {
    font-family: var(--font-title);
    font-weight: normal;
    font-size: clamp(13px, 1.18vw, 22.5px);
    line-height: 1.38;
    letter-spacing: -.02em;
    color: var(--dark);
    white-space: nowrap;
}
.prize-bubble-qty {
    font-family: var(--font-title);
    font-weight: normal;
    font-size: clamp(20px, 1.98vw, 38px);
    line-height: 1.22;
    color: #d4126f;
}

@media (min-width: 1024px) {
    .prize-bubble { display: flex; }
    /* 좌표 = 설계값 ÷ 섹션 크기 */
    .prize-bubble--ev1 { left: 64.8%; top: 22.9%; width: 12.6%; }
    /* 플레이어 박스 오른쪽 위. 좌표가 전부 '박스 기준 %' 라 임베드 종류·화면 폭에
       흔들리지 않는다. top 의 % 는 박스 높이 기준이라 가로형(16:9)에서
       -33.3% = 말풍선이 영상 위로 솟고 아래쪽 55px 만 걸친다. */
    .prize-bubble--ev2 { left: auto; right: -3%; top: -33.3%; width: 12.6vw; }
}

/* 모바일 경품 말풍선 — 폭이 좁아 글자·여백을 말풍선 폭(38vw) 기준으로 다시 잡는다.
   이벤트1 은 무대 위 아이돌 머리 위, 이벤트2 는 영상 오른쪽 위에 걸친다. */
@media (max-width: 1023px) {
    .prize-bubble {
        display: flex;
        width: 26vw;                     /* 최대한 작게 — 경품명(7글자)이 들어가는 한계 */
        padding: 1.82vw 1.56vw 2.34vw;   /* 7% / 6% / 9% of 26vw */
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4));
    }
    /* 좁은 말풍선에는 리드 문구가 안 들어가 뒷말을 뗀다
       (응원만 해도 ~추첨증정 / 영상만 봐도 ~즉석당첨 기회) */
    .lead-tail { display: none; }
    .prize-bubble-img  { width: 46%; margin: 0 auto 3.5%; }
    .prize-bubble--ev2 .prize-bubble-img { width: 50%; }
    .prize-bubble-lead { font-size: 2.47vw; line-height: 1.4; }
    .prize-bubble-name { font-size: 2.99vw; line-height: 1.32; }
    .prize-bubble-qty  { font-size: 4.03vw; line-height: 1.2; }

    /* 이벤트1 — 무대 위, 오른쪽 아이돌들 머리 위 빈 공간 */
    .prize-bubble--ev1 { left: 62%; top: 47.5%; }
    /* 이벤트2 — 플레이어 박스 오른쪽 위.
       모바일은 기간 알약과 영상 사이가 26px 뿐이라 조금만 올린다.
       태블릿 폭에서는 박스가 커져 -8% 가 26px 을 넘으므로 18px 로 상한을 둔다. */
    .prize-bubble--ev2 { left: auto; right: -2%; top: max(-18px, -8%); width: 26vw;
                         padding: 1.82vw 1.56vw 2.34vw; }
}

/* 세로형(쇼츠·릴스)은 플레이어가 좁고 세로로 길다. 박스 높이가 커져 같은 % 라도
   훨씬 많이 올라가므로 top 을 따로 준다.
   PC 는 옆에 자리가 있어 바깥 오른쪽에 나란히 세우고, 모바일은 자리가 없어
   모서리에 걸친다. */
@media (min-width: 1024px) {
    .vid-stage.is-portrait .prize-bubble--ev2 { right: auto; left: 104%; top: 0; }
}
@media (max-width: 1023px) {
    .vid-stage.is-portrait .prize-bubble--ev2 { top: 3%; }
}

/* 400px 이하 — 라벨이 알약 밖으로 나가기 직전이라 폭에 비례해 줄인다.
   (모바일 기본 --label-fs 는 18px 고정이라 화면이 좁아져도 안 줄어든다) */
@media (max-width: 400px) {
    .btn-img--ev2 { --label-fs: 4.1vw; }   /* 390→16.0px · 360→14.8 · 320→13.1 */
    .btn-img--ev3 { --label-fs: 4.0vw; }   /* ×1.15 → 390→17.9px · 360→16.6 · 320→14.7 */
}


/* 모바일 — 플레이어가 작아 안내 문구를 한 단계 줄인다 */
@media (max-width: 1023px) {
    .vid-cover     { gap: 10px; }
    .vid-cover-tip { font-size: clamp(11px, 3.1vw, 16px); padding: .45em .95em; }
}