/* ============================================================
   Event Invite Landing — dark theme rebuild (2026.05)
   Scope: <main class="invite-event"> on /event/invite/{locale}/
   Based on Figma 1920×6561 spec. Mobile responsive via @media.
   ============================================================ */

/* ---------- Multi-script Noto Sans (Khmer / Thai / Myanmar / Sinhala /
              Bengali / Devanagari / Lao / Urdu Nastaliq) ----------
   Loaded only on event pages. Google Fonts CSS uses unicode-range so the
   browser downloads only the subset whose glyphs the page actually uses.
   Needed because NanumSquareNeo doesn't cover non-Korean scripts, and
   system Khmer/Thai/etc. fonts render with broken shaping on some devices. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Khmer:wght@400;700;800;900&family=Noto+Sans+Thai:wght@400;700;800;900&family=Noto+Sans+Myanmar:wght@400;700;800;900&family=Noto+Sans+Sinhala:wght@400;700;800;900&family=Noto+Sans+Bengali:wght@400;700;800;900&family=Noto+Sans+Devanagari:wght@400;700;800;900&family=Noto+Sans+Lao:wght@400;700;800;900&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');

/* ---------- NanumSquare Neo — unified family per weight ----------
   Naver's official CDN exposes each weight as a separate font-family
   (NanumSquareNeoBold/ExtraBold/Heavy), which means font-weight: 900 on
   'NanumSquareNeo' falls back to synthetic bold. Below we re-declare them
   under one family name so font-weight 700/800/900 actually picks the right
   file. font-display: swap avoids invisible text during font load. */
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"),
         url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"),
         url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
}
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"),
         url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
}
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"),
         url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
}

/* ---------- Header (fixed overlay, scroll-aware) ----------
   At the top (over the hero): transparent bg, white text.
   After scrolling past the hero: site-default look (white bg, dark text) via the
   `is-scrolled` class added by JS. Transitions soften the swap. */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    border-bottom: none !important;
    z-index: 10;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.header__nav a.header__nav-link,
.header__nav a.header__nav-link.active,
.header__nav a.header__nav-link:hover,
.header .lang-selector__current {
    color: #FFFFFF !important;
    transition: color 0.25s ease;
}

.header .lang-selector__current svg path,
.header__hamburger svg path {
    stroke: #FFFFFF !important;
    fill: #FFFFFF !important;
    transition: stroke 0.25s ease, fill 0.25s ease;
}

.header__logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.25s ease;
}

/* Scrolled state — revert to the site default light header */
.header.is-scrolled {
    background: var(--color-bg, #FFFFFF) !important;
    border-bottom: 1px solid #E5E5E5 !important;
}

.header.is-scrolled .header__nav a.header__nav-link,
.header.is-scrolled .header__nav a.header__nav-link.active,
.header.is-scrolled .header__nav a.header__nav-link:hover,
.header.is-scrolled .lang-selector__current {
    color: #111111 !important;
}

.header.is-scrolled .lang-selector__current svg path,
.header.is-scrolled .header__hamburger svg path {
    stroke: #111111 !important;
    fill: #111111 !important;
}

.header.is-scrolled .header__logo img {
    filter: none;
}

.invite-event {
    --ie-bg: #1D1D1F;
    --ie-bg-notice: #171717;
    --ie-text: #FFFFFF;
    --ie-text-dim: #DADADA;
    --ie-text-muted: #AAAAAA;
    --ie-card: #383838;
    --ie-content-w: 1240px;
    font-family: 'NanumSquareNeo', 'NanumSquare Neo', 'Noto Sans', 'Noto Sans Khmer', 'Noto Sans Thai', 'Noto Sans Myanmar', 'Noto Sans Sinhala', 'Noto Sans Bengali', 'Noto Sans Devanagari', 'Noto Sans Lao', 'Noto Nastaliq Urdu', 'Spoqa Han Sans Neo', -apple-system, sans-serif;
    background: var(--ie-bg);
    color: var(--ie-text);
    overflow-x: hidden;
    position: relative;
    letter-spacing: -0.03em;
}

.invite-event *,
.invite-event *::before,
.invite-event *::after {
    box-sizing: border-box;
}

.invite-event__inner {
    max-width: var(--ie-content-w);
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* ---------- Hero ---------- */
.ie-hero {
    position: relative;
    width: 100%;
    height: 820px;
    background-image: url('/images/event/invite/mainhero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000C55;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding-bottom: 60px;
}


.ie-hero__title {
    position: relative;
    z-index: 2;
    max-width: 940px;
    width: min(60%, 940px);
    height: auto;
    display: block;
}

/* Text-based hero title fallback for locales without a localized webp image
   (ko/en/zh/vi/ja have images; other 21 locales render text instead).
   Figma spec: Spoqa Han Sans Neo Bold (700), solid white, no gradient. */
.ie-hero__title-text {
    position: relative;
    z-index: 2;
    max-width: 940px;
    width: min(80%, 940px);
    margin: 0;
    padding: 0 16px;
    font-family: 'Noto Sans', 'Noto Sans Khmer', 'Noto Sans Thai', 'Noto Sans Myanmar', 'Noto Sans Sinhala', 'Noto Sans Bengali', 'Noto Sans Devanagari', 'Noto Sans Lao', 'Noto Nastaliq Urdu', 'Spoqa Han Sans Neo', 'NanumSquareNeo', 'NanumSquare Neo', -apple-system, sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.8vw, 68px);
    line-height: 1.3;
    letter-spacing: -0.025em;
    text-align: center;
    color: #F6F7F8;
    word-break: keep-all;
}

/* When a text title precedes the period, switch period from badge style
   to plain subtitle (Figma spec for image-less locales: simple white text below title).
   Note: white-space stays `nowrap` (inherited) so the date doesn't break. */
.ie-hero__title-text + .ie-hero__period {
    margin-top: 12px;
    padding: 0;
    border: none;
    background: transparent;
    transform: none;
    -webkit-text-stroke: 0;
    font-family: 'Noto Sans', 'Noto Sans Khmer', 'Noto Sans Thai', 'Noto Sans Myanmar', 'Noto Sans Sinhala', 'Noto Sans Bengali', 'Noto Sans Devanagari', 'Noto Sans Lao', 'Noto Nastaliq Urdu', 'Spoqa Han Sans Neo', 'NanumSquareNeo', 'NanumSquare Neo', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: #F6F7F8;
}

/* Responsive line breaks — toggle <br> per viewport.
   Use class="br-desktop" for breaks only on desktop, "br-mobile" for mobile-only. */
.br-mobile { display: none; }

@media (max-width: 768px) {
    .br-desktop { display: none; }
    .br-mobile { display: inline; }
}

/* Event period — in flow below title image (separate so font size is controllable).
   Negative margin-top pulls it up into the title image's bottom area (the new
   period-less image still has transparent bottom padding). */
.ie-hero__period {
    position: relative;
    z-index: 3;
    margin-top: -30px;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    -webkit-text-stroke: 4px #061E4C;
    paint-order: stroke fill;
    white-space: nowrap;
    transform: matrix(1, -0.05, -0.07, 1, 0, 0);
}

.ie-hero::before,
.ie-hero::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    pointer-events: none;
    z-index: 1;
}
.ie-hero::before {
    left: 0;
    background: linear-gradient(90deg, #010826 0%, rgba(1, 8, 38, 0) 100%);
}
.ie-hero::after {
    right: 0;
    background: linear-gradient(270deg, #010826 0%, rgba(1, 8, 38, 0) 100%);
}

.ie-hero__divider {
    width: 100%;
    height: 1px;
    background: #AAAAAA;
}

/* ---------- Tab navigation (below hero) ---------- */
.ie-tabs {
    height: 76px;
    border-bottom: 1px solid #AAAAAA;
    background: var(--ie-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.ie-tabs__inner {
    display: flex;
    gap: 40px;
    align-items: center;
    height: 100%;
}

.ie-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 6px;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.5;
    color: var(--ie-text-muted);
    text-decoration: none;
    letter-spacing: -0.025em;
    transition: color 0.15s ease;
    scroll-margin-top: 80px;
}

.ie-tab:hover {
    color: var(--ie-text);
}

.ie-tab.is-active {
    color: var(--ie-text);
    font-weight: 900;
}

/* Thick white underline under the active tab (sits on top of the tabs' gray
   border-bottom). Triangle hangs just below the underline, pointing down. */
.ie-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;          /* overlay the 1px gray bar border-bottom */
    height: 1px;
    background: #FFFFFF;
}

.ie-tab.is-active::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;          /* triangle top edge touches the underline */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #FFFFFF;
    transform: translateX(-50%);
    z-index: 1;
}


/* Anchor targets need offset matching the fixed header (80px desktop, 60px mobile)
   plus a small breathing gap so smooth-scrolled sections don't hide under it. */
#section-event,
#share-section,
#section-notice {
    scroll-margin-top: 100px;
}

/* ---------- Intro (text + paper-plane illustration) ---------- */
.ie-intro {
    padding: 102px 20px 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.ie-intro__title {
    font-weight: 900;
    font-size: 60px;
    line-height: 1.4;
    color: var(--ie-text);
    margin: 0 0 20px;
}

.ie-intro__desc {
    font-weight: 800;
    font-size: 22px;
    line-height: 1.4;
    color: var(--ie-text-dim);
    margin: 0 0 32px;
}

.ie-intro__highlight {
    background: linear-gradient(90deg, #348AED 0%, #4ED0E6 39.42%, #9EACF6 93.75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ie-intro__accent {
    color: #15B9FF;
}

.ie-intro__art {
    display: block;
    width: 778px;
    max-width: 100%;
    height: auto;
    margin: 60px auto 0;
}

/* ---------- Step cards (초대하려면 / 초대받았다면) ---------- */
.ie-steps {
    /* margin-top: -23 — boxes pulled up so icons overlap further into illustration. */
    margin: -23px auto 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.ie-step {
    width: 380px;
    min-height: 203px;
    background: var(--ie-bg);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    position: relative;
}

/* 2px linear-gradient stroke — Figma's stroke property doesn't survive CSS export,
   so we mimic it with ::before + mask-composite (same trick as 1등 prize card). */
.ie-step::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 2px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.ie-step--sender::before {
    background: linear-gradient(135deg, #A89CE3 0%, #7166CC 100%);
}
.ie-step--sender {
    box-shadow: 0 4px 20px rgba(100, 198, 235, 0.35);
}

.ie-step--receiver::before {
    background: linear-gradient(135deg, #829DF4 0%, #5654EA 100%);
}
.ie-step--receiver {
    box-shadow: 2px 4px 20px rgba(158, 173, 247, 0.35);
}

/* Icon floats above the box, centered. Figma: icon top is 34px above box top
   so roughly half of the icon overlaps into the box. */
.ie-step__icon {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 61px;
    height: 58px;
    object-fit: contain;
    z-index: 2;
}

/* Character illustration — mobile only (replaces icon + paper plane on phones). */
.ie-step__character {
    display: none;
}

.ie-step__title {
    font-weight: 800;
    font-size: 32px;
    line-height: 1.4;
    color: var(--ie-text);
    margin: 0;
}

.ie-step__desc {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4;
    color: var(--ie-text);
    text-align: center;
    margin: 0;
}

.ie-step__accent {
    color: #9EADF7;
    font-weight: 900;
}

.ie-accent-gold {
    color: #FFDC72;
    font-weight: 900;
}

.ie-accent-blue {
    color: #6BAFFD;
    font-weight: 900;
}

/* Step icons sit above the cards in Figma; we place them inline at top of each card. */

/* ---------- Section header (with gradient lines) ---------- */
.ie-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 560px;
    margin: 130px auto 60px;
    padding: 0 20px;
}

.ie-section-header__line {
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, rgba(166, 154, 226, 0) 0%, #A69AE2 100%);
}
.ie-section-header__line--right {
    background: linear-gradient(90deg, #A69AE2 0%, rgba(166, 154, 226, 0) 100%);
}

.ie-section-header__title {
    font-weight: 800;
    font-size: 34px;
    line-height: 1.5;
    color: var(--ie-text);
    margin: 0;
    white-space: nowrap;
}

/* ---------- Section intro (text block above prize cards / ranking / etc.) ---------- */
.ie-section-intro {
    text-align: center;
    margin: 0 auto 60px;
    max-width: 700px;
    padding: 0 20px;
}

.ie-section-intro__title {
    font-weight: 900;
    font-size: 40px;
    line-height: 1.4;
    color: var(--ie-text);
    margin: 0 0 20px;
}

.ie-section-intro__desc {
    font-weight: 800;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ie-text-dim);
    margin: 0;
}

/* ---------- Prize cards (1등 / 2등 / 3등) ---------- */
.ie-prizes {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.ie-prize {
    width: 300px;
    min-height: 320px;
    background: var(--ie-card);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 35px 30px 30px;
    position: relative;
}

/* 1등상 — gold gradient border + glow. Uses a ::before layer for the gradient border
   (border-image doesn't combine with border-radius reliably across browsers). */
.ie-prize--1 {
    border: none;
}

.ie-prize--1::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 3px;
    background: linear-gradient(135deg,
        #A67C00 0%,
        #DFB538 20%,
        #EFC23C 40%,
        #FDF3D7 55%,
        #EFC23C 70%,
        #FFCF40 90%,
        #A67C00 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.ie-prize__image {
    /* Fixed container — every prize image fits within the same box (object-fit: contain
       preserves each image's aspect ratio while keeping badge + name at the same Y). */
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.3));
    margin: 0;
    flex: none;
}

.ie-prize__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: auto;       /* push info to the bottom — same position for all 3 cards */
}

.ie-prize__badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.4;
    color: var(--ie-text);
    text-shadow: 0 4px 8.9px rgba(0, 0, 0, 0.3);
}

.ie-prize--1 .ie-prize__badge {
    background: linear-gradient(106.26deg, #A67C00 19.69%, #DFB538 38.34%, #A67C00 58.51%, #EFC23C 76.92%, #FDF3D7 88%, #A67C00 98.51%, #FFCF40 118.22%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
.ie-prize--2 .ie-prize__badge {
    background: linear-gradient(106.26deg, #969696 8.99%, #DEDEDE 13.69%, #969696 19.77%, #565656 68.92%, #DEDEDE 87.63%, #969696 115.58%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    text-shadow: 0 4px 8.9px rgba(0, 0, 0, 0.6);
}
.ie-prize--3 .ie-prize__badge {
    background: linear-gradient(106.26deg, #98725E -3.93%, #C49655 17.61%, #A67F65 34.85%, #CDA478 55.31%, #B48B6C 82.24%);
}

.ie-prize__name {
    font-weight: 800;
    font-size: 24px;
    line-height: 1.4;
    color: var(--ie-text);
    text-align: center;
    margin: 0;
}

/* ---------- Coffee banner ---------- */
.ie-coffee-banner {
    display: block;
    max-width: 940px;
    margin: 80px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.ie-coffee-banner__bg {
    width: 100%;
    min-height: 220px;
    background: #141414 url('/images/event/invite/coffee-banner.webp') center / cover no-repeat;
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 24px 56px;
}

.ie-coffee-banner__text {
    max-width: 80%;
}

.ie-coffee-banner__title {
    font-weight: 900;
    font-size: 32px;
    line-height: 1.4;
    color: var(--ie-text);
    margin: 0 0 11px;
}

.ie-coffee-banner__sub {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ie-text-dim);
    margin: 0;
}

.ie-coffee-banner__sub strong {
    font-weight: 900;
    color: var(--ie-text);
}

/* ---------- Share section (white card with code + 5 SNS buttons) ---------- */
.ie-share {
    margin: 60px auto 0;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.ie-share__card {
    background: #FFFFFF;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    max-width: 460px;
    margin: 0 auto;
    padding: 40px 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.ie-share__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.ie-share__label {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
    color: #666666;
    margin: 0;
    letter-spacing: -0.04em;
}

.ie-share__code {
    font-weight: 900;
    font-size: 40px;
    line-height: 1.4;
    color: #111111;
    margin: 0;
    letter-spacing: -0.04em;
    user-select: all;
}

/* Wrap around the share card — same width as the card so the absolute
   overlay (.ie-share__lock) with inset:0 covers exactly the card area
   (not the full section width). */
.ie-share__wrap {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
}

/* No-code state — Figma spec:
   1. Card itself fades to 0.5 opacity (NOT filter:blur)
   2. Hide sharer's 5 platform buttons; keep receiver-style copy + install
      visible (faded) behind the frosted overlay
   3. Lock = backdrop-filter blur overlay (frosted glass), light white tint
   4. Text + button overlays on top */
.ie-share.is-no-code .ie-share__card {
    pointer-events: none;
}

/* Hide sharer-only buttons. Copy code (.ie-share__copy) and install
   (.ie-share-btn--install) stay visible behind the overlay as in the design. */
.ie-share.is-no-code .ie-share-btn--copy,
.ie-share.is-no-code .ie-share-btn--kakao,
.ie-share.is-no-code .ie-share-btn--instagram,
.ie-share.is-no-code .ie-share-btn--x,
.ie-share.is-no-code .ie-share-btn--facebook {
    display: none !important;
}

/* Lock = frosted glass overlay over the card, holds text + CTA. */
.ie-share__lock {
    display: none;
}
.ie-share.is-no-code .ie-share__lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: 40px;
    background: rgba(0, 0, 0, 0.6);                /* 검정 + 반투명 */
    backdrop-filter: blur(8px);                     /* 뒤 카드가 흐릿하게 비침 */
    -webkit-backdrop-filter: blur(8px);
    border-radius: 30px;
    text-align: center;
}

.ie-share__lock-text {
    margin: 0;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: -0.04em;
}

.ie-share__create-cta {
    display: none;
}
.ie-share.is-no-code .ie-share__create-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 320px;
    min-height: 52px;
    padding: 8px 32px;
    background: #2084F7;
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    letter-spacing: -0.04em;
    transition: transform 0.1s ease;
}
.ie-share.is-no-code .ie-share__create-cta:active {
    transform: translateY(1px);
}

.ie-share__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #AAAAAA;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    padding: 6px 4px;
    letter-spacing: -0.03em;
    transition: color 0.15s ease;
}

.ie-share__copy:hover {
    color: #666666;
}

.ie-share__copy-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    /* Source icon is white-on-blue; invert to dark + reduce opacity to match #AAAAAA text */
    filter: brightness(0) opacity(0.33);
}

.ie-share__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ie-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: inherit;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.4;
    cursor: pointer;
    letter-spacing: -0.04em;
    text-decoration: none;
    transition: transform 0.1s ease;
}
.ie-share-btn:active { transform: translateY(1px); }

.ie-share-btn__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ie-share-btn--copy    { background: #2084F7; color: #FFFFFF; }
.ie-share-btn--kakao   { background: #FDDC3F; color: #3E2723; }
.ie-share-btn--instagram {
    background: linear-gradient(90deg, #800BFD 0%, #FC01D7 28.97%, #FF0C53 55.47%, #FFC300 88.8%);
    color: #FFFFFF;
}
.ie-share-btn--x       { background: #111111; color: #FFFFFF; }
.ie-share-btn--facebook { background: #1778F2; color: #FFFFFF; }
.ie-share-btn--install { background: #2084F7; color: #FFFFFF; }

.ie-share__divider {
    width: 100%;
    max-width: 387px;
    height: 3px;
    background: linear-gradient(90deg, rgba(134, 156, 243, 0) 0%, #869CF3 50%, rgba(134, 156, 243, 0) 100%);
    margin: 60px auto 0;
}

/* ---------- Shared background wrap (covers share section → rank section) ----------
   Figma: the dark "curtain" overlay starts mid-share-section and extends down past
   the rank table. We anchor the image to the bottom so the curtain stays near the
   rank table, and the upper portion (flat dark) bleeds up into the share section. */
.ie-bgwrap {
    position: relative;
    background-image: url('/images/event/invite/rank-bg-active.webp');
    background-size: 100% 100%;        /* stretch to fill wrap — full image visible end-to-end */
    background-position: center center;
    background-repeat: no-repeat;
}

.ie-bgwrap--empty {
    background-image: url('/images/event/invite/rank-bg-empty.webp');
}

.ie-bgwrap > * {
    position: relative;
    z-index: 1;
}

/* ---------- Rank section ---------- */
.ie-rank {
    position: relative;
    padding: 0 20px 60px;       /* top:0 — preceding section-intro provides the 60px gap */
}

/* State toggle — show only the matching state */
.ie-rank[data-state="coming-soon"] .ie-rank__card { display: none; }
.ie-rank[data-state="active"] .ie-rank__coming-soon { display: none; }

/* Coming Soon state — trophy + "Coming Soon!" + localized "랭킹이 집계중입니다" */
.ie-rank__coming-soon {
    background: var(--ie-card);
    border: 10px solid rgba(255, 255, 255, 0.04);
    border-radius: 30px;
    max-width: 620px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.ie-rank__trophy {
    width: 100px;
    height: auto;
    object-fit: contain;
    margin-bottom: 8px;
}

.ie-rank__coming-soon-title {
    font-weight: 900;
    font-size: 36px;
    line-height: 1.3;
    color: var(--ie-text);
    margin: 0;
    letter-spacing: -0.03em;
}

.ie-rank__coming-soon-desc {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ie-text-dim);
    margin: 0;
}

.ie-rank__card {
    background: var(--ie-card);
    border: 10px solid rgba(255, 255, 255, 0.04);
    border-radius: 30px;
    max-width: 620px;
    margin: 0 auto;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ie-rank__me {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, rgba(134, 156, 243, 0) 0%, #869CF3 50%, rgba(134, 156, 243, 0) 100%) 1;
}

.ie-rank__me-label,
.ie-rank__me-value {
    font-weight: 900;
    font-size: 26px;
    line-height: 1.5;
    color: var(--ie-text);
}

.ie-rank__table {
    width: 100%;
    border-collapse: collapse;
}

.ie-rank__table th,
.ie-rank__table td {
    padding: 15px 0;
    text-align: center;
    color: var(--ie-text);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.5;
}

.ie-rank__table th {
    font-weight: 900;
    font-size: 26px;
    padding-bottom: 30px;
}

/* When ranking is empty, show fallback message */
.ie-rank__empty-msg {
    text-align: center;
    color: var(--ie-text-dim);
    font-weight: 800;
    font-size: 22px;
    padding: 40px 20px;
    margin: 0;
}

/* ---------- Notice section ---------- */
.ie-notice {
    background: var(--ie-bg-notice);
    padding: 60px 20px 120px;
}

.ie-notice__inner {
    max-width: 940px;
    margin: 0 auto;
}

.ie-notice__title {
    font-weight: 900;
    font-size: 24px;
    line-height: 1.4;
    color: var(--ie-text);
    margin: 0 0 20px;
    letter-spacing: -0.04em;
}

.ie-notice__body {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ie-text-muted);
    letter-spacing: -0.04em;
}

.ie-notice__body h3 {
    font-weight: 900;
    color: inherit;
    margin: 40px 0 12px;
    font-size: 14px;
    line-height: 1.4;
}
.ie-notice__body h3:first-child { margin-top: 0; }
.ie-notice__body h3::before { content: '['; }
.ie-notice__body h3::after { content: ']'; }

.ie-notice__body p {
    margin: 0 0 8px;
}

.ie-notice__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.ie-notice__body li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 6px;
    line-height: 1.6;
}

.ie-notice__body li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: inherit;
}

.ie-notice__caution {
    display: block;
    margin-top: 4px;
}

/* ---------- Decorative blobs (absolute positioned, behind content) ---------- */
.ie-deco {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}

/* Decoration positions are absolute and approximate — they should sit near
   their related content sections at typical desktop layouts:
     trophy → near step cards (초대하려면/초대받았다면)
     gift   → near prize cards (1등상)
     ticket → near coffee banner */
.ie-deco--trophy {
    width: 1051px;
    top: 910px;
    left: -390px;
    transform: rotate(8deg);
    animation: ie-deco-float 5.5s ease-in-out infinite;
}

.ie-deco--gift {
    width: 560px;
    top: 1550px;
    right: -30px;
    transform: rotate(-6deg);
    animation: ie-deco-float 4.5s ease-in-out -1.5s infinite;
}

.ie-deco--ticket {
    width: 660px;
    top: 2850px;
    left: -20px;
    animation: ie-deco-float 5s ease-in-out -2.5s infinite;
}

@keyframes ie-deco-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -18px; }
}

@media (prefers-reduced-motion: reduce) {
    .ie-deco { animation: none; }
}

/* ---------- Install CTA (shown in no-code mode only) ---------- */
.ie-install-cta {
    padding: 40px 20px;
    text-align: center;
    background: var(--ie-bg);
}

.ie-install-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    background: linear-gradient(90deg, #348AED 0%, #4ED0E6 39.42%, #9EACF6 93.75%);
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 800;
    font-size: 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.1s ease;
    box-shadow: 0 4px 30px rgba(78, 208, 230, 0.3);
}
.ie-install-cta__btn:active { transform: translateY(1px); }

/* ---------- Toast (preserve existing JS hook #share-toast) ---------- */
#share-toast {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    color: #111111;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}
#share-toast.is-visible { opacity: 1; }

/* ---------- Scroll-to-top button (fixed, bottom-right) ----------
   Image: /images/event/invite/top_button.svg (58×58 white circle + arrow).
   Appears after 300px scroll, smooth-scrolls to top on click. */
.ie-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 50;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ie-top-btn picture {
    display: block;
    width: 100%;
    height: 100%;
}

.ie-top-btn img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.ie-top-btn.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ie-top-btn:active {
    transform: translateY(0) scale(0.92);
    transition: transform 0.08s ease;
}

.ie-top-btn[hidden] { display: none !important; }

@media (max-width: 768px) {
    .ie-top-btn {
        width: 32px;
        height: 32px;
        right: 16px;
        bottom: 16px;
    }
    .ie-top-btn img {
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    }
}

/* ---------- Receiver / no-code mode hidden states ----------
   `display: inline-flex` on .ie-share-btn / .ie-share__copy beats the
   user-agent [hidden]{display:none} rule, so re-assert it explicitly. */
.ie-share[hidden],
.ie-share-btn[hidden],
.ie-share__copy[hidden],
.cta-download[hidden],
.cta-open-app[hidden],
.ie-install-cta[hidden],
.ie-rank__me[hidden] {
    display: none !important;
}

/* ============================================================
   Responsive — mobile / tablet
   ============================================================ */

@media (max-width: 1024px) {
    .ie-hero { height: 600px; padding-bottom: 60px; }
    .ie-hero__title { width: min(70%, 720px); }
    .ie-intro__title { font-size: 44px; }
    .ie-intro__desc { font-size: 18px; }
    .ie-section-header__title { font-size: 28px; }
    .ie-section-intro__title { font-size: 32px; }
    .ie-section-intro__desc { font-size: 18px; }
    .ie-coffee-banner__bg { padding: 0 32px; }
    .ie-coffee-banner__title { font-size: 26px; }

    /* Decorations scale down + shift behind content */
    .ie-deco--trophy  { width: 280px; top: 1100px; left: -90px; }
    .ie-deco--gift    { width: 360px; top: 1700px; right: -90px; }
    .ie-deco--ticket  { width: 440px; top: 2500px; left: -130px; }
}

/* ============================================================
   Mobile @360px Figma spec — applied to all phones up to 768px.
   ============================================================ */
@media (max-width: 768px) {
    /* Anchor scroll offset matches mobile header (60px) + small gap */
    #section-event,
    #share-section,
    #section-notice {
        scroll-margin-top: 80px;
    }

    /* Hero */
    .ie-hero { height: 444px; padding-bottom: 30px; gap: 0; }
    .ie-hero__title { width: 90%; max-width: 360px; }
    .ie-hero__title-text {
        width: 92%;
        font-size: clamp(24px, 7vw, 38px);
        line-height: 1.3;
        padding: 0 8px;
    }
    .ie-hero__period {
        margin-top: -15px;
        -webkit-text-stroke-width: 2px;
        font-size: 14px;
    }
    /* Text-mode mobile: override badge style with subtitle */
    .ie-hero__title-text + .ie-hero__period {
        margin-top: 8px;
        font-size: 13px;
    }

    /* Tab nav */
    .ie-tabs { height: 54px; }
    .ie-tabs__inner { gap: 32px; }
    .ie-tab { font-size: 16px; }

    /* Intro */
    .ie-intro { padding-top: 50px; }
    .ie-intro__title { font-size: 26px; line-height: 1.4; }
    .ie-intro__desc { font-size: 14px; }
    .ie-intro__art { display: none; }   /* paper plane hidden; replaced by per-card characters */

    /* Step cards (초대하려면 / 초대받았다면) — stack vertically with character above each */
    .ie-steps {
        gap: 60px;
        margin-top: 0;
        padding: 0 20px;
        flex-direction: column;
        align-items: center;
    }
    .ie-step__character {
        display: block;
        width: 182px;
        height: auto;
        margin: 0 auto -80px;       /* 60 gap - 80 = -20: character overlaps card top by 20px */
    }
    .ie-step__character--receiver { width: 180px; }
    .ie-step { width: 100%; max-width: 320px; min-height: 171px; padding: 40px; }
    .ie-step__title { font-size: 26px; }
    .ie-step__desc { font-size: 18px; }
    /* Small icon stays visible on mobile too (overlays card top edge, behind character) */
    .ie-step__icon { display: block; top: -29px; }

    /* Section header */
    .ie-section-header { margin: 60px auto 32px; gap: 8px; max-width: 320px; }
    .ie-section-header__line { height: 1.71px; }
    .ie-section-header__title { font-size: 20px; }

    /* Section intro */
    .ie-section-intro { margin-bottom: 32px; }
    .ie-section-intro__title { font-size: 26px; }
    .ie-section-intro__desc { font-size: 14px; }

    /* Prize cards — horizontal scroll (3 cards @188px = 588px overflows 360px).
       Force 20px left padding so the first card doesn't hug the viewport edge. */
    .ie-prizes {
        gap: 12px;
        max-width: none;
        margin: 0;
        padding-top: 0;
        padding-right: 20px;
        padding-bottom: 8px;
        padding-left: 20px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
    }
    .ie-prize {
        flex: 0 0 188px;
        width: 188px;
        min-height: 200px;
        padding: 20px;
        border-radius: 20px;
        scroll-snap-align: start;
    }
    .ie-prize__image { width: 86px; height: 112px; }
    .ie-prize__info { gap: 10px; }
    .ie-prize__badge { padding: 3px 8px; font-size: 15px; }
    .ie-prize__name { font-size: 16px; }

    /* Coffee banner (mobile image) */
    .ie-coffee-banner { margin-top: 60px; padding: 0 20px; }
    .ie-coffee-banner__bg {
        height: auto;
        aspect-ratio: 320 / 160;
        padding: 0 24px;
        align-items: center;             /* keep row + vertical center */
        background-image: url('/images/event/invite/coffee-banner-mobile.webp');
        background-size: cover;
        background-position: center;
        border-radius: 10px;
    }
    .ie-coffee-banner__text { max-width: none; flex: 1; }
    .ie-coffee-banner__title { font-size: 18px; }
    .ie-coffee-banner__sub { font-size: 14px; }

    /* Share card */
    .ie-share { margin-top: 40px; padding: 0 20px; }
    .ie-share__wrap { max-width: 320px; }
    .ie-share__card {
        max-width: 320px;
        padding: 28px 48px;
        border-radius: 20px;
        gap: 20px;
    }
    .ie-share__head { gap: 6px; }
    .ie-share__label { font-size: 16px; }
    .ie-share__code { font-size: 27px; }
    .ie-share__buttons { gap: 6px; }
    .ie-share-btn {
        width: 220px;
        min-height: 48px;
        font-size: 14px;
        border-radius: 8.35px;
        gap: 7px;
    }
    .ie-share-btn__icon { width: 20px; height: 20px; }
    .ie-share__divider { margin-top: 40px; }

    /* No-code lock overlay — match mobile share card border-radius */
    .ie-share.is-no-code .ie-share__lock { padding: 30px 20px; border-radius: 20px; }
    .ie-share__lock-text { font-size: 18px; }
    .ie-share.is-no-code .ie-share__create-cta {
        width: 220px; min-height: 48px; font-size: 14px; border-radius: 8.35px;
    }

    /* Rank section — hide shared bg image on mobile */
    .ie-bgwrap,
    .ie-bgwrap--empty { background-image: none; }
    .ie-rank { padding: 0 20px 40px; }
    .ie-rank__card {
        max-width: 320px;
        padding: 20px 30px;
        border-width: 4px;
        border-radius: 16px;
        gap: 16px;
    }
    .ie-rank__me { padding-bottom: 8px; }
    .ie-rank__me-label,
    .ie-rank__me-value { font-size: 14px; }
    .ie-rank__table th { font-size: 14px; padding-bottom: 16px; }
    .ie-rank__table td { font-size: 14px; padding: 8px 0; }

    /* Coming-soon state */
    .ie-rank__coming-soon {
        max-width: 320px;
        padding: 40px 20px;
        border-width: 4px;
        border-radius: 16px;
        gap: 12px;
    }
    .ie-rank__trophy { width: 80px; }
    .ie-rank__coming-soon-title { font-size: 26px; }
    .ie-rank__coming-soon-desc { font-size: 14px; }

    /* Notice */
    .ie-notice { padding: 40px 20px 60px; }
    .ie-notice__inner { max-width: 320px; }
    .ie-notice__title { font-size: 18px; }
    .ie-notice__body { font-size: 12px; line-height: 1.4; }
    .ie-notice__body h3 { font-size: 12px; margin: 32px 0 10px; }

    /* On mobile, decorations off */
    .ie-deco { display: none; }
}

/* Hero responsive variants — swap to smaller webp on narrow viewports */
@media (max-width: 1280px) {
    .ie-hero {
        background-image: url('/images/event/invite/mainhero-1280.webp');
    }
}
@media (max-width: 960px) {
    .ie-hero {
        background-image: url('/images/event/invite/mainhero-960.webp');
    }
}
@media (max-width: 768px) {
    /* Mobile uses a different hero composition (portrait, 360×444) */
    .ie-hero {
        background-image: url('/images/event/invite/hero-mobile.webp');
        background-position: center top;
    }
}