/* ============================================================================
   event-award.css — 이벤트 특별상 참여 안내(/event-award/*)

   크루매치(crew) · 7080(gen7080) 두 페이지가 같은 본문 파셜(_AwardBody)을 쓰므로
     스타일은 여기 한 곳에만 둔다. 테마색만 [data-ea="crew|gen7080"] 로 갈린다.

   색은 공개 사이트 토큰(--ro-*) 기준(라이트)으로 먼저 정의하고, 다크에서 값을 덮는다.
     다크 블록에서만 정의한 색은 라이트에서 사라져 글자가 안 보인다.
   site.css 에 `section { padding: 80px 0 }` 전역 규칙이 있어, 이 안의 <section> 은
     모두 클래스로 padding 을 되돌린다.
   ============================================================================ */

.ea {
    --ea-grad: linear-gradient(135deg, #4560e8 0%, #6b4fe0 52%, #8348dc 100%);
    --ea-accent: var(--ro-primary-700, #4359c9);
    --ea-accent-soft: color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 12%, var(--ro-surface, #fff));
    --ea-ring: color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 30%, var(--ro-surface, #fff));
    --ea-card: var(--ro-surface, #fff);
    --ea-soft: var(--ro-surface-alt, #f6f8fc);
    --ea-line: var(--ro-border, #e6eaf1);
    --ea-text: var(--ro-text, #131722);
    --ea-sub: var(--ro-text-sub, #5c6678);
    --ea-glow: rgba(69, 96, 232, .28);
    --ea-ink: #4a3fcf; --ea-ink-soft: #eceaff; /* 흰 배경(쿠폰) 위 고정 진한색 — 테마 전환에 안 바뀜 */
    max-width: 860px; margin: 0 auto; padding: 16px 16px 72px; color: var(--ea-text);
    overflow: clip;
}
/* 7080 — 따뜻한 노을(주황→자홍). 두 페이지가 한눈에 달라 보이게. */
.ea[data-ea="gen7080"] {
    --ea-grad: linear-gradient(135deg, #f5793b 0%, #ef4d6b 50%, #c026d3 100%);
    --ea-accent: #c0344f;
    --ea-accent-soft: color-mix(in srgb, #ef4d6b 12%, var(--ro-surface, #fff));
    --ea-ring: color-mix(in srgb, #ef4d6b 30%, var(--ro-surface, #fff));
    --ea-glow: rgba(239, 77, 107, .26);
    --ea-ink: #c0344f; --ea-ink-soft: #ffe6ec;
}

/* ── 히어로 ───────────────────────────────────────────────────────── */
.ea-hero { position: relative; overflow: hidden; border-radius: 26px; padding: 30px 26px 28px;
    color: #fff; background: var(--ea-grad); background-size: 200% 200%;
    animation: ea-grad 16s ease infinite; box-shadow: 0 20px 50px -14px var(--ea-glow);
    isolation: isolate; }
.ea-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(42% 60% at 86% 8%, rgba(255,255,255,.26), transparent 70%),
        radial-gradient(40% 55% at 4% 98%, rgba(255,255,255,.14), transparent 70%); }
/* 떠다니는 빛망울 — 느리게 돈다. */
.ea-hero::after { content: ""; position: absolute; z-index: 0; width: 320px; height: 320px;
    right: -90px; top: -120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 62%);
    filter: blur(8px); animation: ea-float 13s ease-in-out infinite; }
.ea-hero > * { position: relative; z-index: 1; }

.ea-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ea-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800;
    padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.20); color: #fff;
    backdrop-filter: blur(3px); letter-spacing: .01em; }
.ea-chip .ea-dot { width: 7px; height: 7px; border-radius: 50%; background: #7CF2B0;
    box-shadow: 0 0 0 0 rgba(124,242,176,.7); animation: ea-pulse 1.8s infinite; }
.ea-back { margin-left: auto; color: #fff; font-size: 12.5px; font-weight: 700;
    text-decoration: none; opacity: .92; display: inline-flex; align-items: center; gap: 4px; }
.ea-back:hover { opacity: 1; text-decoration: underline; }

/* 마스코트는 바닥에 '서 있게' 하단 정렬(세로 중앙이면 공중에 떠 보여 어색). */
.ea-hero-grid { display: flex; align-items: flex-end; gap: 20px; }
.ea-hero-body { flex: 1 1 auto; min-width: 0; }
.ea-mascot { width: 150px; height: 150px; object-fit: contain; object-position: bottom; flex: 0 0 auto;
    align-self: flex-end; margin-bottom: -4px;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); animation: ea-bob 4.4s ease-in-out infinite; }
.ea-kicker { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255,255,255,.86); margin-bottom: 7px; }
/* 앱에서 참여자/관리자에게만 뜨는 'OOO님' 인사 — 처음에 화려하게 팝인 + 광택 + 이름 글로우로 참여 유도 */
.ea-hello { position: relative; overflow: hidden; display: inline-block; font-size: 13.5px; font-weight: 700;
    color: #fff; line-height: 1.3; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px; padding: 8px 15px; margin-bottom: 11px; backdrop-filter: blur(3px);
    transform-origin: left center; animation: ea-hello-pop .72s cubic-bezier(.17,.89,.32,1.3) .2s both; }
.ea-hello b { color: #ffe08a; animation: ea-hello-glow 1.8s ease-in-out 1s infinite; }
/* 광택이 인사 위를 한 번씩 스쳐 지나간다 */
.ea-hello::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.6) 50%, transparent 66%);
    transform: translateX(-130%); animation: ea-hello-shine 3s ease-in-out 1s infinite; }
@keyframes ea-hello-pop {
    0% { opacity: 0; transform: scale(.3) translateY(-12px); }
    55% { opacity: 1; transform: scale(1.1); }
    75% { transform: scale(.96); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes ea-hello-glow { 0%, 100% { text-shadow: 0 0 0 rgba(255,224,138,0); } 50% { text-shadow: 0 0 10px rgba(255,224,138,.8); } }
@keyframes ea-hello-shine { 0%, 62% { transform: translateX(-130%); } 86%, 100% { transform: translateX(130%); } }
.ea-title { font-size: clamp(25px, 5.2vw, 38px); line-height: 1.16; font-weight: 900;
    margin: 0 0 10px; letter-spacing: -.02em; text-wrap: balance; }
.ea-sub { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 16px; max-width: 46ch; }

/* 카운트다운 — 숫자 칩. 값은 한 덩어리로 흘려 좁은 폭에서 단위가 떨어지지 않게. */
.ea-cd { display: inline-flex; align-items: stretch; gap: 8px; margin-bottom: 4px; }
.ea-cd-box { min-width: 58px; padding: 8px 10px; border-radius: 13px; text-align: center;
    background: rgba(0,0,0,.22); backdrop-filter: blur(3px); }
.ea-cd-n { font-size: 25px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
    display: block; }
.ea-cd-l { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.82); margin-top: 5px; display: block; }
.ea-cd-when { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.9); margin-top: 10px; }
.ea-started { font-size: 15px; font-weight: 800; }

.ea-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ea-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800;
    padding: 12px 20px; border-radius: 13px; text-decoration: none; border: 0; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.ea-btn-primary { position: relative; overflow: hidden; background: #fff; color: var(--ea-accent);
    box-shadow: 0 10px 22px -8px rgba(0,0,0,.4); animation: ea-pulseglow 2.6s ease-in-out infinite; }
.ea-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(0,0,0,.5); }
@keyframes ea-pulseglow {
    0%, 100% { box-shadow: 0 10px 22px -8px rgba(0,0,0,.4), 0 0 0 0 rgba(255,255,255,0); }
    50% { box-shadow: 0 14px 28px -8px rgba(0,0,0,.5), 0 0 22px 2px rgba(255,255,255,.4); }
}
/* 하이라이트가 주기적으로 스쳐 지나간다. */
.ea-btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-20deg); animation: ea-shine 4.8s ease-in-out infinite; pointer-events: none; }
@keyframes ea-shine { 0%, 62% { left: -60%; } 86%, 100% { left: 130%; } }
.ea-btn-ghost { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.ea-btn-ghost:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }

/* 큰 상단 지표(총 N명 시상 / 참여 N명) */
.ea-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ea-stat { flex: 1 1 130px; background: rgba(0,0,0,.18); border-radius: 15px; padding: 13px 15px;
    backdrop-filter: blur(3px); }
.ea-stat b { font-size: 24px; font-weight: 900; display: block; line-height: 1;
    font-variant-numeric: tabular-nums; }
.ea-stat span { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 6px; display: block; }

/* ── 본문 섹션 ────────────────────────────────────────────────────── */
.ea-sec { padding: 0; margin-top: 46px; scroll-margin-top: calc(var(--ro-header-h, 64px) + 16px); }
.ea-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 900;
    letter-spacing: .03em; color: var(--ea-accent); background: var(--ea-accent-soft);
    border: 1px solid var(--ea-ring); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
    box-shadow: 0 6px 16px -8px var(--ea-glow); }
.ea-h2 { font-size: clamp(20px, 3.6vw, 27px); font-weight: 900; letter-spacing: -.02em;
    margin: 0 0 8px; line-height: 1.25; text-wrap: balance; }
.ea-lead { font-size: 15px; line-height: 1.65; color: var(--ea-sub); margin: 0 0 22px; max-width: 58ch; }

/* 한눈 요약: 두 이벤트 카드 */
.ea-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ea-eventcard { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 20px;
    background: var(--ea-card); border: 1px solid var(--ea-line);
    box-shadow: 0 10px 30px -18px rgba(20,30,60,.4); transition: transform .18s ease, box-shadow .18s ease; }
.ea-eventcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(20,30,60,.5); }
.ea-eventcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
    background: var(--ea-grad); background-size: 200% 100%; animation: ea-grad 8s ease infinite; }
.ea-ev-no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 11px; background: var(--ea-grad); color: #fff; font-weight: 900; font-size: 16px;
    margin-bottom: 12px; box-shadow: 0 8px 18px -8px var(--ea-glow); }
.ea-ev-title { font-size: 17px; font-weight: 900; margin: 0 0 4px; }
.ea-ev-win { font-size: 13px; font-weight: 800; color: var(--ea-accent); margin-bottom: 12px; }
.ea-ev-desc { font-size: 13.5px; line-height: 1.6; color: var(--ea-sub); margin: 0 0 14px; }
.ea-prize { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800;
    padding: 8px 12px; border-radius: 11px; color: var(--ea-text);
    background: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 14%, var(--ea-card));
    border: 1px solid color-mix(in srgb, var(--ro-warn-500, #f59e0b) 34%, var(--ea-card)); }
.ea-prize .ea-coin { font-size: 16px; }

/* 조건 칩 목록 */
.ea-cond { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.ea-cond li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55;
    background: var(--ea-soft); border: 1px solid var(--ea-line); border-radius: 13px; padding: 13px 15px; }
.ea-cond li b { color: var(--ea-text); }
.ea-cnum { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 8px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff;
    background: var(--ea-accent); margin-top: 1px; }
.ea-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.ea-tag { font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
    color: var(--ea-accent); background: var(--ea-accent-soft); border: 1px solid var(--ea-ring); }

/* 선정 기준 박스 */
.ea-pick { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 18px;
    border-radius: 16px; background: var(--ea-accent-soft); border: 1px solid var(--ea-ring); }
.ea-pick .ea-ico { font-size: 26px; flex: 0 0 auto; }
.ea-pick b { color: var(--ea-accent); }
.ea-pick p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ea-text); }
.ea-score { display: inline-flex; gap: 8px; margin-top: 8px; }
.ea-score span { font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 9px;
    background: var(--ea-card); border: 1px solid var(--ea-ring); color: var(--ea-text); }

/* ── 단계 안내(스크린샷 카드) ─────────────────────────────────────── */
.ea-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-top: 4px; }
.ea-step { position: relative; background: var(--ea-card); border: 1px solid var(--ea-line);
    border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 10px 28px -20px rgba(20,30,60,.5); }
/* 앱 스크린샷은 잘리지 않게 전체를 보여 준다(세로가 길어도 그대로). */
.ea-step-shot { position: relative; background: #0b0d12; overflow: hidden; }
.ea-step-shot img { width: 100%; height: auto; display: block; }
.ea-step-badge { position: absolute; top: 12px; left: 12px; z-index: 2; width: 30px; height: 30px;
    border-radius: 10px; background: var(--ea-grad); color: #fff; font-weight: 900; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -4px rgba(0,0,0,.5); }
.ea-step-cap { padding: 13px 15px 16px; }
.ea-step-cap h4 { font-size: 14.5px; font-weight: 800; margin: 0 0 4px; }
.ea-step-cap p { font-size: 12.5px; line-height: 1.5; color: var(--ea-sub); margin: 0; }

/* ── 예시 갤러리 ──────────────────────────────────────────────────── */
.ea-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.ea-shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--ea-line); background: #0b0d12;
    box-shadow: 0 10px 24px -18px rgba(20,30,60,.5); transition: transform .18s ease; }
.ea-shot:hover { transform: translateY(-3px) scale(1.01); }
.ea-shot img { width: 100%; height: auto; display: block; }
.ea-gal-note { font-size: 12.5px; color: var(--ea-sub); margin: 12px 2px 0; }

/* ── 참여 인증 등록 폼 ────────────────────────────────────────────── */
.ea-join { color-scheme: light dark; margin-top: 18px; border-radius: 20px; overflow: hidden;
    border: 1px solid var(--ea-ring); background: var(--ea-card); }
.ea-join-head { padding: 18px 20px; background: var(--ea-accent-soft); border-bottom: 1px solid var(--ea-ring); }
.ea-join-head h3 { margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.ea-join-head p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ea-sub); }
.ea-join-body { padding: 18px 20px 20px; }
.ea-field { margin-bottom: 14px; }
.ea-field label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; color: var(--ea-text); }
.ea-field input, .ea-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14.5px;
    padding: 11px 13px; border-radius: 11px; border: 1.5px solid var(--ea-line);
    background: var(--ea-soft); color: var(--ea-text); transition: border-color .15s ease, box-shadow .15s ease; }
.ea-field input::placeholder, .ea-field textarea::placeholder { color: var(--ro-text-sub, #5c6678); }
.ea-field input:focus, .ea-field textarea:focus { outline: 0; border-color: var(--ea-accent);
    box-shadow: 0 0 0 3px var(--ea-accent-soft); }
.ea-field .ea-hint { font-size: 11.5px; color: var(--ea-sub); margin-top: 5px; }
.ea-ig-wrap { position: relative; }
.ea-ig-wrap .ea-ig-at { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    font-weight: 800; color: var(--ea-sub); pointer-events: none; }
.ea-ig-wrap input { padding-left: 28px; }
.ea-join-submit { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 15px;
    padding: 13px 22px; border-radius: 12px; border: 0; cursor: pointer; color: #fff;
    background: var(--ea-grad); box-shadow: 0 12px 26px -12px var(--ea-glow);
    transition: transform .15s ease, box-shadow .15s ease; }
.ea-join-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px var(--ea-glow); }

/* 이미 등록 / 로그인 안내 / 결과 배너 */
.ea-note { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }
.ea-note .ea-ico { font-size: 20px; flex: 0 0 auto; margin-top: 1px; }
.ea-note.ok { background: color-mix(in srgb, #16a34a 12%, var(--ea-card));
    border: 1px solid color-mix(in srgb, #16a34a 34%, var(--ea-card)); color: var(--ea-text); }
.ea-note.err { background: color-mix(in srgb, #dc2626 10%, var(--ea-card));
    border: 1px solid color-mix(in srgb, #dc2626 32%, var(--ea-card)); color: var(--ea-text); }
.ea-note.info { background: var(--ea-soft); border: 1px solid var(--ea-line); color: var(--ea-text); }
.ea-note a { color: var(--ea-accent); font-weight: 800; }
.ea-mine { font-size: 12.5px; color: var(--ea-sub); margin-top: 10px; }
.ea-mine a { color: var(--ea-accent); font-weight: 700; }

/* ── 유의사항 ─────────────────────────────────────────────────────── */
.ea-callout { background: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 9%, var(--ea-card));
    border: 1px solid color-mix(in srgb, var(--ro-warn-500, #f59e0b) 28%, var(--ea-card));
    border-radius: 16px; padding: 18px 20px; }
.ea-callout h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 900;
    color: var(--ro-warn-700, #a4620a); }
.ea-callout ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ea-callout li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--ea-text); }
.ea-callout li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--ro-warn-500, #f59e0b); }

/* ── 이벤트 일정(타임라인) ────────────────────────────────────────── */
.ea-timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.ea-timeline li { position: relative; padding: 0 0 22px 32px; }
.ea-timeline li:last-child { padding-bottom: 0; }
.ea-timeline li::before { content: ""; position: absolute; left: 7px; top: 7px; bottom: -7px; width: 2px;
    background: var(--ea-ring); }
.ea-timeline li:last-child::before { display: none; }
.ea-tl-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--ea-grad); box-shadow: 0 0 0 4px var(--ea-accent-soft); }
.ea-tl-c b { font-size: 15px; font-weight: 800; display: block; color: var(--ea-text); }
.ea-tl-c p { font-size: 13.5px; color: var(--ea-sub); margin: 3px 0 0; line-height: 1.55; }

/* ── 자주 묻는 질문(아코디언) ─────────────────────────────────────── */
.ea-faq { display: flex; flex-direction: column; gap: 10px; }
.ea-faq-item { background: var(--ea-card); border: 1px solid var(--ea-line); border-radius: 14px; overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease; }
.ea-faq-item[open] { border-color: var(--ea-ring); box-shadow: 0 10px 28px -20px rgba(20,30,60,.5); }
.ea-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
    padding: 15px 18px; font-size: 14.5px; font-weight: 700; color: var(--ea-text); }
.ea-faq-item summary::-webkit-details-marker { display: none; }
.ea-faq-chev { flex: 0 0 auto; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--ea-accent);
    border-bottom: 2px solid var(--ea-accent); transform: rotate(45deg); transition: transform .2s ease; }
.ea-faq-item[open] .ea-faq-chev { transform: rotate(-135deg); }
.ea-faq-item[open] summary { color: var(--ea-accent); }
.ea-faq-a { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.6; color: var(--ea-sub); }

/* 맺음 CTA */
.ea-final { margin-top: 44px; text-align: center; border-radius: 22px; padding: 34px 24px 38px;
    background: var(--ea-grad); background-size: 200% 200%; animation: ea-grad 16s ease infinite;
    color: #fff; box-shadow: 0 20px 50px -18px var(--ea-glow); position: relative; overflow: hidden; }
.ea-final::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(44% 70% at 82% 0, rgba(255,255,255,.22), transparent 70%); }
.ea-final > * { position: relative; }
.ea-final-mascot { width: 96px; height: 96px; object-fit: contain; margin-bottom: 8px;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.28)); animation: ea-bob 4.4s ease-in-out infinite; }
.ea-final h2 { font-size: clamp(21px, 4vw, 29px); font-weight: 900; margin: 0 0 8px; letter-spacing: -.02em; }
.ea-final p { font-size: 14.5px; color: rgba(255,255,255,.92); margin: 0 0 20px; }

/* ── 인라인 SVG 아이콘(이모지 대신) ──────────────────────────────── */
.ea-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }
.ea-eyebrow .ea-svg { font-size: 15px; }
.ea-prize .ea-svg { font-size: 16px; color: var(--ea-accent); }
.ea-pick-ic, .ea-mustall-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; }
.ea-pick-ic { font-size: 22px; color: #fff; background: var(--ea-grad); box-shadow: 0 8px 18px -8px var(--ea-glow); }
.ea-mustall-ic { font-size: 20px; color: #fff; background: linear-gradient(135deg, #16a34a, #22c55e); }
.ea-callout-ic { display: inline-flex; font-size: 17px; margin-right: 7px; vertical-align: -0.18em;
    color: var(--ro-warn-700, #a4620a); }
html[data-theme="dark"] .ea-callout-ic,
:root:not([data-theme="light"]) .ea-callout-ic { color: #fcd34d; }

/* 선물 표시 칩(히어로) — 작은 점으로 강조 */
.ea-chip-gift::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: #ffd166;
    display: inline-block; margin-right: 2px; }

/* ── 히어로 컨페티(색종이) ────────────────────────────────────────── */
.ea-hero > .ea-confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ea-confetti i { position: absolute; top: -8%; opacity: .82;
    animation-name: ea-confetti-fall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes ea-confetti-fall {
    0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
    8% { opacity: .85; }
    92% { opacity: .85; }
    100% { transform: translate3d(16px, 460px, 0) rotate(620deg); opacity: 0; }
}

/* ── 상품 티커(흐르는 띠) ─────────────────────────────────────────── */
.ea-ticker { overflow: hidden; border-radius: 999px; margin: 10px 0 2px; padding: 0;
    background: var(--ea-accent-soft); border: 1px solid var(--ea-ring); }
.ea-ticker-in { display: inline-flex; gap: 0; white-space: nowrap; will-change: transform;
    animation: ea-ticker 18s linear infinite; }
.ea-ticker span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800;
    color: var(--ea-accent); padding: 9px 18px; }
.ea-ticker span::after { content: "·"; margin-left: 18px; opacity: .5; }
@keyframes ea-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 참여 3단계(한눈에 참여 경로) ─────────────────────────────────── */
.ea-how3 { display: flex; align-items: stretch; gap: 10px; padding: 18px 16px; border-radius: 18px;
    background: var(--ea-card); border: 1px solid var(--ea-line); box-shadow: 0 12px 32px -22px rgba(20,30,60,.5); }
.ea-how3-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 7px; }
.ea-how3-n { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-size: 17px; font-weight: 900; color: #fff; background: var(--ea-grad);
    box-shadow: 0 8px 18px -8px var(--ea-glow); }
.ea-how3-step b { font-size: 14px; font-weight: 800; display: block; }
.ea-how3-step small { font-size: 11.5px; color: var(--ea-sub); line-height: 1.4; display: block; }
.ea-how3-arrow { align-self: center; flex: 0 0 auto; width: 9px; height: 9px;
    border-top: 2.5px solid var(--ea-accent); border-right: 2.5px solid var(--ea-accent); transform: rotate(45deg); }
@media (max-width: 480px) {
    .ea-how3 { flex-direction: column; gap: 12px; }
    .ea-how3-step { flex-direction: row; text-align: left; gap: 12px; }
    .ea-how3-arrow { transform: rotate(135deg); align-self: center; margin: 2px 0; }
}

/* ── 상품 배너(이벤트성 강조) ─────────────────────────────────────── */
.ea-prizeband { position: relative; overflow: hidden; border-radius: 24px; padding: 28px 24px 26px;
    text-align: center; color: #fff; background: var(--ea-grad); background-size: 220% 220%;
    animation: ea-grad 14s ease infinite; box-shadow: 0 22px 52px -16px var(--ea-glow); isolation: isolate; }
.ea-prizeband::before { content: ""; position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(50% 72% at 82% -12%, rgba(255,255,255,.32), transparent 70%),
                radial-gradient(44% 60% at 8% 112%, rgba(255,255,255,.16), transparent 70%); }
.ea-pb-in { position: relative; z-index: 2; }
.ea-pb-k { display: inline-block; font-size: 12.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,.22); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.ea-pb-sub { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.95); margin: 16px auto 0; max-width: 42ch; }
.ea-pb-sub b { color: #fff; border-bottom: 2px solid rgba(255,255,255,.6); padding-bottom: 1px; }

/* 쿠폰 티켓 그래픽 — 점선 절취선 + 좌우 노치로 진짜 쿠폰처럼 */
/* 쿠폰은 항상 흰 배경 → 글자색을 테마와 무관한 고정 어두운 색으로(다크에서 묻힘 방지) */
.ea-coupon { position: relative; display: flex; align-items: stretch; max-width: 420px; margin: 0 auto;
    background: #fff; color: #1b1f2a; border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.4); }
/* 홀로그램 광택이 주기적으로 쿠폰을 스쳐 지나간다 */
.ea-coupon::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 48%, transparent 64%);
    transform: translateX(-130%); animation: ea-coupon-shine 4.2s ease-in-out infinite; }
@keyframes ea-coupon-shine { 0%, 55% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
.ea-coupon-l { flex: 1 1 auto; padding: 18px 20px; text-align: left; position: relative; z-index: 1; }
.ea-coupon-badge { display: inline-block; font-size: 10.5px; font-weight: 900; letter-spacing: .12em;
    color: var(--ea-ink, #4a3fcf); background: var(--ea-ink-soft, #eceaff); padding: 4px 9px; border-radius: 6px; margin-bottom: 8px; }
.ea-coupon-v { font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #1b1f2a; }
.ea-coupon-v small { font-size: 20px; font-weight: 800; margin-left: 2px; }
.ea-coupon-note { font-size: 12px; color: #6b7280; margin-top: 7px; }
.ea-coupon-r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 0 22px; color: #fff; background: var(--ea-grad); position: relative; }
/* 절취선(점선) + 위아래 반원 노치 */
.ea-coupon-r::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px dashed rgba(255,255,255,.65); }
.ea-coupon-r b { font-size: 40px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ea-coupon-r span { font-size: 12.5px; font-weight: 700; }

/* CSS 장식 도형(이모지 대신) — 은은한 빛망울 */
.ea-blob { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%); filter: blur(2px); }
.ea-blob.b1 { width: 160px; height: 160px; top: -50px; left: -36px; animation: ea-float 13s ease-in-out infinite; }
.ea-blob.b2 { width: 130px; height: 130px; bottom: -44px; right: -30px; animation: ea-float 16s ease-in-out infinite reverse; }

/* ── 조건 모두 충족 강조 ──────────────────────────────────────────── */
.ea-mustall { display: flex; gap: 11px; align-items: center; margin: 0 0 16px; padding: 14px 16px;
    border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--ea-text);
    background: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 15%, var(--ea-card));
    border: 1.5px solid color-mix(in srgb, var(--ro-warn-500, #f59e0b) 42%, var(--ea-card)); }
.ea-mustall-ic { font-size: 20px; flex: 0 0 auto; }
.ea-mustall b { color: var(--ro-warn-700, #a4620a); }
html[data-theme="dark"] .ea-mustall b,
:root:not([data-theme="light"]) .ea-mustall b { color: #fcd34d; }

/* ── 바로가기 칩 네비(한눈에 파악) ───────────────────────────────── */
.ea-nav { position: sticky; top: var(--ro-header-h, 64px); z-index: 20; display: flex; gap: 8px;
    overflow-x: auto; padding: 11px 2px; margin: 6px -2px 0; scrollbar-width: none;
    background: color-mix(in srgb, var(--ea-card) 84%, transparent); backdrop-filter: blur(10px);
    -webkit-overflow-scrolling: touch; }
.ea-nav::-webkit-scrollbar { display: none; }
.ea-nav a { flex: 0 0 auto; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
    padding: 8px 15px; border-radius: 999px; color: var(--ea-text); background: var(--ea-soft);
    border: 1px solid var(--ea-line); transition: transform .15s ease, background .15s ease, color .15s ease; }
.ea-nav a:hover, .ea-nav a:focus-visible { color: #fff; background: var(--ea-accent);
    border-color: var(--ea-accent); transform: translateY(-1px); }

/* ── 사진 확대(라이트박스) ────────────────────────────────────────── */
.ea-step-shot img, .ea-shot img { cursor: zoom-in; }
.ea-lb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
    background: rgba(8,10,16,.92); backdrop-filter: blur(5px); padding: 24px; }
.ea-lb.open { display: flex; animation: ea-lb-fade .2s ease; }
.ea-lb img { max-width: 94vw; max-height: 88vh; border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.6);
    animation: ea-lb-zoom .26s cubic-bezier(.2,.8,.2,1); }
.ea-lb-close { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%;
    border: 0; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
    transition: background .15s ease, transform .15s ease; }
.ea-lb-close:hover { background: rgba(255,255,255,.3); transform: rotate(90deg); }
.ea-lb-hint { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7);
    font-size: 12.5px; pointer-events: none; }
@keyframes ea-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ea-lb-zoom { from { transform: scale(.9); opacity: .3; } to { transform: none; opacity: 1; } }

/* ── 누가 받나요: 상품 대상 + 누구나 환영 ─────────────────────────── */
.ea-elig { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ea-elig-card { position: relative; overflow: hidden; border-radius: 20px; padding: 24px 22px;
    border: 1px solid var(--ea-line); background: var(--ea-card);
    box-shadow: 0 12px 34px -20px rgba(20,30,60,.5); }
.ea-elig-card.prize { background: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 10%, var(--ea-card));
    border-color: color-mix(in srgb, var(--ro-warn-500, #f59e0b) 30%, var(--ea-card)); }
.ea-elig-card.cheer { background: var(--ea-accent-soft); border-color: var(--ea-ring); }
.ea-elig-ic { font-size: 34px; line-height: 1; margin-bottom: 12px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.14)); animation: ea-bob 5s ease-in-out infinite; }
.ea-elig-card h3 { margin: 0 0 7px; font-size: 16.5px; font-weight: 900; }
.ea-elig-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ea-sub); }
.ea-elig-card.prize b, .ea-elig-card.cheer b { color: var(--ea-text); }

/* ── 애니메이션 ───────────────────────────────────────────────────── */
/* 히어로·맺음 배경이 살아 움직인다(배경 위치 이동). */
@keyframes ea-grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes ea-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px, 26px); } }
@keyframes ea-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ea-pulse { 0% { box-shadow: 0 0 0 0 rgba(124,242,176,.6); } 70% { box-shadow: 0 0 0 8px rgba(124,242,176,0); } 100% { box-shadow: 0 0 0 0 rgba(124,242,176,0); } }

/* 스크롤 등장 — JS 가 .is-in 을 붙인다. JS 미동작 시에도 보이게 기본은 opacity:1. */
.ea-reveal { opacity: 1; }
.js .ea-reveal { opacity: 0; transform: translateY(30px) scale(.965); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.25,1); }
.js .ea-reveal.is-in { opacity: 1; transform: none; }
.js .ea-reveal.d1 { transition-delay: .06s; }
.js .ea-reveal.d2 { transition-delay: .12s; }
.js .ea-reveal.d3 { transition-delay: .18s; }
.js .ea-reveal.d4 { transition-delay: .24s; }

/* ── 재미난 효과(호버 줌·팝·폭죽) ─────────────────────────────────── */
.ea-step-shot img, .ea-shot img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.ea-step:hover .ea-step-shot img, .ea-shot:hover img { transform: scale(1.05); }
.ea-ticker:hover .ea-ticker-in { animation-play-state: paused; }
@keyframes ea-cd-pop { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.ea-cd-n.pop { animation: ea-cd-pop .32s ease; display: inline-block; }
/* 컨페티 폭죽 — 상품 배너가 처음 보일 때 1회(JS가 조각을 만든다) */
.ea-burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.ea-burst i { position: absolute; top: 46%; left: 50%; width: 9px; height: 9px; border-radius: 2px; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
    .ea-hero, .ea-final, .ea-hero::after, .ea-mascot, .ea-final-mascot, .ea-elig-ic,
    .ea-chip .ea-dot, .ea-eventcard::before, .ea-btn-primary::after, .ea-coupon::after { animation: none; }
    .ea-step:hover .ea-step-shot img, .ea-shot:hover img { transform: none; }
    .ea-hero, .ea-final { background-position: 0% 50%; }
    .ea-lb.open, .ea-lb img { animation: none; }
    .ea-lb-close:hover { transform: none; }
    .ea-ticker-in, .ea-btn-primary, .ea-pb-deco { animation: none; }
    .ea-ticker-in { transform: none; }
    .ea-hello, .ea-hello b, .ea-hello::after { animation: none; }
    .ea-hello { opacity: 1; transform: none; }
    .js .ea-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 앱 웹뷰 경량화 ───────────────────────────────────────────────────
   안드로이드 WebView 등은 끊임없이 도는 입자/그라디언트 애니메이션 + blur/backdrop-filter
   를 겹치면 몇 번 로드 후 컴포지터가 뻗어 '검은 화면'으로 멈춘다. 웹뷰에서는 무거운 효과를
   끄고 정적으로 렌더한다(디자인·그라디언트·카운트다운·펼침 등장은 유지). 일반 웹은 그대로. */
body.ron-webview .ea-hero, body.ron-webview .ea-prizeband, body.ron-webview .ea-final {
    animation: none; background-position: 0% 50%; }
/* blur 필터 자체를 제거(가장 큰 크래시 원인) */
body.ron-webview .ea-nav, body.ron-webview .ea-chip, body.ron-webview .ea-cd-box,
body.ron-webview .ea-stat, body.ron-webview .ea-hello,
body.ron-webview .ea-lb, body.ron-webview .ea-lb-close { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.ron-webview .ea-nav { background: var(--ea-card); }          /* 반투명+블러 대신 불투명 */
body.ron-webview .ea-hero::after, body.ron-webview .ea-blob { display: none; }  /* filter:blur 요소 제거 */
/* 무한 반복 애니메이션 정지 */
body.ron-webview .ea-mascot, body.ron-webview .ea-final-mascot, body.ron-webview .ea-elig-ic,
body.ron-webview .ea-chip .ea-dot, body.ron-webview .ea-eventcard::before,
body.ron-webview .ea-btn-primary, body.ron-webview .ea-btn-primary::after,
body.ron-webview .ea-pb-deco, body.ron-webview .ea-coupon::after,
body.ron-webview .ea-hello::after, body.ron-webview .ea-hello b,
body.ron-webview .ea-ticker-in { animation: none; }
body.ron-webview .ea-ticker-in { transform: none; }               /* 티커 정지 */
body.ron-webview .ea-hero, body.ron-webview .ea-prizeband, body.ron-webview .ea-final {
    background-size: 100% 100%; }

/* ── 다크 보정 ────────────────────────────────────────────────────── */
html[data-theme="dark"] .ea,
:root:not([data-theme="light"]) .ea {
    --ea-card: var(--ro-surface, #171a21);
    --ea-soft: var(--ro-surface-alt, #1e222b);
    --ea-line: var(--ro-border, #2b303b);
    /* 다크에서 밝은 파랑/분홍으로 뒤집어 대비를 확보한다. */
    --ea-accent: color-mix(in srgb, var(--ro-primary-500, #5b7cfa) 80%, #fff);
}
html[data-theme="dark"] .ea[data-ea="gen7080"],
:root:not([data-theme="light"]) .ea[data-ea="gen7080"] { --ea-accent: #ff9fb0; }
html[data-theme="dark"] .ea-eventcard,
:root:not([data-theme="light"]) .ea-eventcard { box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }

/* ── 반응형 ───────────────────────────────────────────────────────── */
/* 태블릿 — 쿠폰이 폭을 꽉 채우게(가운데 400px 고정이면 좁은 폭에서 양옆이 떠 보임) */
@media (max-width: 560px) {
    .ea-coupon { max-width: 100%; }
}
/* 큰 모바일·세로 태블릿 */
@media (max-width: 640px) {
    .ea { padding: 12px 14px 60px; }
    .ea-hero { padding: 24px 18px 22px; border-radius: 22px; }
    .ea-hero-grid { gap: 12px; }
    .ea-mascot { width: 108px; height: 108px; }
    .ea-twin { grid-template-columns: 1fr; }
    .ea-elig { grid-template-columns: 1fr; }
    .ea-cd-box { min-width: 52px; }
    .ea-cd-n { font-size: 22px; }
    .ea-hero-cta .ea-btn { flex: 1 1 auto; justify-content: center; } /* 버튼이 폭을 나눠 채움 */
}
/* 작은 모바일(≈375) */
@media (max-width: 440px) {
    .ea-mascot { display: none; }
    .ea-hero { padding: 22px 16px 20px; }
    .ea-stats { gap: 7px; }
    .ea-stat { flex: 1 1 0; padding: 11px 9px; }       /* 3개가 한 줄에 균등하게 */
    .ea-stat b { font-size: 20px; }
    .ea-stat span { font-size: 10.5px; }
    .ea-coupon-v { font-size: 36px; }
    .ea-coupon-l { padding: 15px 16px; }
    .ea-coupon-r { padding: 0 16px; }
    .ea-coupon-r b { font-size: 34px; }
    .ea-cd-box { min-width: 46px; padding: 7px 8px; }
    .ea-cd-n { font-size: 20px; }
    .ea-cd-l { font-size: 10px; }
}
/* 초소형(≈320) */
@media (max-width: 348px) {
    .ea-cd-wrap .ea-cd { gap: 5px; }
    .ea-cd-box { min-width: 42px; }
    .ea-coupon-badge { font-size: 9.5px; }
    .ea-stat span { font-size: 10px; }
}