/* ════════════════════════════════════════════════════════════════
   NCE·XS Preheat — PC-first CSS
   breakpoint: @media screen and (max-width: 999px) for mobile
════════════════════════════════════════════════════════════════ */

/* ── @font-face ─────────────────────────────────────────────── */
@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Regular.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Medium.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Medium.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Bold.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Bold.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Black.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Black.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Shokz Sans Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Medium.woff2') format('woff2'),
        url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Medium.otf') format('opentype'),
        url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Shokz Sans Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Bold.woff2') format('woff2'),
        url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Bold.otf') format('opentype'),
        url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Bold.ttf') format('truetype');
}

/* common */
.main-content * {
    font-family: 'NotoSansKRPreheat', 'NotoSansKR', 'Poppins', sans-serif;
}

.br-m { display: none; }
.br-p { display: inline; }
@media screen and (max-width: 999px) {
    .br-m { display: inline; }
    .br-p { display: none; }
}

a:link, a:visited {
    color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   Banner — PC default
══════════════════════════════════════════════════════════════ */

.banner-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner-bg {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* PC (≥1000px): 뷰포트 너비와 무관하게 배너 높이 620px 고정 */
@media (min-width: 1000px) {
    .banner-wrapper { height: 620px; }
    .banner-bg { height: 620px; }
}

/* PC: content 가로 중앙 / top:100px */
.banner-content {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
    width: 431px;
    max-width: 431px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ① 출시일: PC 18px / Medium / #2f2f2f */
.banner-open-date {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #2f2f2f;
}

/* ② 타이틀: PC 40px / Bold / XS渐변 / lh:1.21 */
.banner-title {
    margin: 16px 0 24px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.21;
    text-align: center;
    background: linear-gradient(90deg, #1a1a1a 0%, #284d76 60.096%, #92a7d5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ③ 카운트다운 레이블: PC 20px / Medium / #050505 */
.banner-countdown-label {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 21.6px;
    letter-spacing: 0;
    color: #050505;
    text-align: center;
}

/* 카운트다운 */
.banner-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 361px;
    max-width: 100%;
    margin-bottom: 24px;
}

/* 숫자 행 */
.banner-countdown-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

@media screen and (max-width: 360px) {
    .banner-countdown-timer {
        gap: 5px;
    }
}

/* 카운트다운 박스: 60×60px */
.banner-countdown-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(240, 244, 250, 0.8);
    border-radius: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 숫자: PC 28px / Shokz Sans Display / #18497a */
.banner-countdown-box span {
    font-family: 'Shokz Sans Display', 'Shokz Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 28px;
    line-height: 30.8px;
    color: #18497a;
    letter-spacing: 0;
    white-space: nowrap;
}

/* 구분자: PC #050505 */
.banner-countdown-sep {
    font-size: 19.6px;
    color: #050505;
    line-height: 1.2;
    flex-shrink: 0;
}

/* 단위 레이블: PC 18px / Light */
.banner-countdown-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.banner-countdown-labels span {
    font-size: 18px;
    font-weight: 300;
    line-height: 21.6px;
    color: #050505;
    text-align: center;
    width: 60px;
}

/* ④ CTA 버튼: 246×48px / #0a0a0a */
.banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 246px;
    height: 48px;
    padding: 14px 20px;
    margin-top: 0;
    background: #0a0a0a;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}
.banner-btn:hover,
.banner-btn:focus { opacity: 0.85; color: #ffffff; }


/* ══════════════════════════════════════════════════════════════
   앵커 탭 네비게이션 — PC default
══════════════════════════════════════════════════════════════ */

.nav-wrapper {
    background: #C6DFF7;
    width: 100%;
    padding: 0 120px;
    position: sticky;
    top: 0;
    /* bubble-content(1000) / notice-wrap bubble(9999)보다 높게 설정하여,
       흡정 내비게이션이 스크롤 중 열려 있는 툴팁에 가려지지 않도록 한다.
       (모바일 as-modal 풀스크린 모달의 20000/20001보다는 낮게 유지해 모달이 내비 위에 정상적으로 덮이도록 함) */
    z-index: 10000;
    transition: transform 0.2s ease;
}

/* 第二个吸顶导航(.product-nav)进入吸顶状态时，第一个导航向上隐藏 */
.nav-wrapper.is-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.nav-content {
    display: flex;
    align-items: flex-end;
    max-width: 792px;
    margin: 0 auto;
}

.nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    line-height: 21.6px;
    color: #0a0a0a;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, font-weight 0.15s ease;
    user-select: none;
}

.nav-item.active {
    font-weight: 500;
    font-size: 20px;
    border-bottom-color: #0a0a0a;
}


/* ══════════════════════════════════════════════════════════════
   럭키드로우 섹션 — PC default
══════════════════════════════════════════════════════════════ */

/* PC 배경 */
.nxp-lucky {
    background: linear-gradient(180deg, #ECF4FC 0%, #FFF 100%);
    padding: 96px 0;
}

.nxp-lucky__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* PC 카드 */
.nxp-lucky__card {
    position: relative;
    height: 429px;
    background: #d8e7f6;
    border-radius: 12px;
    overflow: hidden;
    display: block;
}

/* 다른 영역(예: JTBC 마라톤 참가권 응모 버튼)에서 스크롤 이동 시, 도착 위치를 알려주는 하이라이트 효과 */
.nxp-lucky__card--flash {
    animation: nxpLuckyCardFlash 1.2s ease-out;
}
@keyframes nxpLuckyCardFlash {
    0% { box-shadow: 0 0 0 0 rgba(66, 123, 183, 0.55); }
    60% { box-shadow: 0 0 0 14px rgba(66, 123, 183, 0); }
    100% { box-shadow: 0 0 0 0 rgba(66, 123, 183, 0); }
}

/* 타이틀 블록: PC left:88px top:48px w:382px */
.nxp-lucky__text {
    position: absolute;
    left: 88px;
    top: 48px;
    width: 382px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nxp-lucky__title {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.3;
    background: linear-gradient(90deg, #1a1a1a 0%, #284d76 60.096%, #92a7d5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.nxp-lucky__subtitle {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: #2f2f2f;
}

/* 설명 박스: PC left:88px top:173px 404×92px */
.nxp-lucky__desc-box {
    position: absolute;
    left: 88px;
    top: 173px;
    width: 404px;
    height: 92px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 4px;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.nxp-lucky__desc-main,
.nxp-lucky__desc-sub {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #0a0a0a;
}
.nxp-lucky__desc-sub { color: #666; word-break: keep-all; }
.nxp-lucky__desc-normal { font-weight: 400; }
.nxp-lucky__highlight { font-weight: 700; color: #427bb7; }

/* 액션: PC left:88px top:297px w:364px */
.nxp-lucky__actions {
    position: absolute;
    left: 88px;
    top: 297px;
    width: 364px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* CTA 버튼 */
.nxp-lucky__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 188px;
    height: 48px;
    padding: 0 20px;
    background: #0a0a0a;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.nxp-lucky__btn:hover { opacity: 0.85; }
.nxp-lucky__btn.disabled {
    background: #b2b2b2;
    cursor: not-allowed;
}
.nxp-lucky__btn.disabled:hover { opacity: 1; }

/* meta 행: PC 가로 */
.nxp-lucky__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
}
/* 이미 구독(개인정보 수집 동의) 완료 상태 */
.nxp-lucky__meta.is-subscribed {
    margin-left: 50px;
}

.nxp-lucky__privacy-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nxp-lucky__privacy-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── check-wrap + bubble 시스템 ── */
.nxp-check-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #D4D4D4;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
}
.nxp-check-wrap.active { border: 1px solid #FF7A3D; background: #FF7A3D; }
.nxp-check-wrap img { display: none; width: 10px; }
.nxp-check-wrap.active img { display: block; }

.bubble-wrapper { position: relative; display: inline-flex; align-items: center; }

/* 遮罩层：默认隐藏；移动端 as-modal 打开时显示 */
.bubble-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1998;
}

.bubble-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 262px;
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    color: #737373;
    box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12);
    z-index: 1000;
    display: none;
}
.bubble-text { color: #0A0A0A; font-size: 14px; line-height: 1.3; }
.pos-bottom .bubble-content { top: calc(100% + 8px); bottom: auto; }
.pos-bottom .bubble-content::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #fff;
}
.bubble-content.mo-left { left: 0; transform: none; }
.bubble-content.mo-left::after { left: 8px; transform: none; }
.bubble-wrapper.is-active .bubble-content { display: block; }

/* 자세히 보기 bubble (Figma 2281:2389: 262×145, 화살표 left:32px) */
.bubble-content.w-privacy {
    width: 262px;
    max-width: calc(100vw - 32px);
    white-space: normal; /* .nxp-lucky__privacy-text의 nowrap 상속을 무시하고 줄바꿈 허용 */
}
.bubble-content.w-privacy::after { left: 32px; } /* 피그마 화살표 x=32px 위치와 동일 */
.bubble-content .bubble-list {
    margin: 4px 0 0;
    padding-left: 21px;
    list-style: decimal;
}
.bubble-content .bubble-list li {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}
.bubble-content .bubble-list a.bubble-link {
    color: inherit;
    text-decoration: underline;
}

.nxp-lucky__privacy-text {
    margin: 0 16px 0 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #2f2f2f;
    white-space: nowrap;
}
.nxp-lucky__link { text-decoration: underline; color: inherit; }

.nxp-lucky__reminder {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.nxp-lucky__notice-icon { width: 16px; height: 16px; flex-shrink: 0; }
.nxp-lucky__notice-text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #404040;
    white-space: nowrap;
}

/* 비주얼: PC 우측 절반 absolute */
.nxp-lucky__visual {
    position: absolute;
    left: 530px;
    top: 0;
    width: 670px;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.nxp-lucky__visual-picture { display: contents; }

.nxp-lucky__visual-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 574px;
    height: 267px;
    object-fit: contain;
    display: block;
    max-width: none;
}

.nxp-lucky__link .bubble-text {
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════
   프리오더 섹션 (Figma 406:4947)
══════════════════════════════════════════════════════════════ */
.product-wrapper {
    padding-bottom: 96px;
}

.product-wrapper__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.product-wrapper__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.product-wrapper__title {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    background: linear-gradient(90deg, #1a1a1a 0%, #284d76 60.096%, #92a7d5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.product-wrapper__subtitle {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #404040;
}

/* ── 상품 앵커 탭 (吸顶 / Figma 401:4049) — opendots-series-launch product-tab 패턴 ──
   position: sticky는 부모(#section-preorder)의 박스를 벗어나는 순간 자동으로 풀려버려서
   섹션을 지나면 탭이 사라지는 문제가 있었다. 그래서 흡착 시점부터는 JS로 판단해
   position: fixed로 전환하고, 화면 맨 아래로 스크롤해도 계속 고정 표시되도록 한다.
   fixed 전환 시 문서 흐름에서 빠지는 공간은 .product-nav-placeholder가 대신 채운다 ── */
.product-nav-sentinel {
    height: 0;
}

.product-nav-placeholder {
    width: 100%;
}

.product-nav {
    box-sizing: border-box;
    width: 100vw;
    margin-top: 48px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.product-nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    /* nav-wrapper와 동일한 이유로 bubble-content 계열보다 높게 설정 */
    z-index: 10000;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.product-nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
    height: 80px;
}

.product-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #0a0a0a;
    border-radius: 99px;
    color: #0a0a0a;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.product-nav-item.active {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #fff;
    font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════
   상품 상세 블록 (Figma 2394:17587) — 오픈런/오픈핏 에어 2
══════════════════════════════════════════════════════════════ */
.product-content {
    display: flex;
    flex-direction: column;
    gap: 96px;
    margin-top: 64px;
}

.product-block {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ── 상단: 상품 카드 + 사은품/추첨 패널 ── */
.product-block__top {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.06), 0 0 3.5px rgba(0, 0, 0, 0.05), 0 0 0.9px rgba(0, 0, 0, 0.03);
}

.product-block__card {
    box-sizing: border-box;
    position: relative;
    flex: 0 0 384px;
    width: 384px;
    height: 480px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 24px;
}

.product-block__card-img {
    width: 100%;
    height: 256px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-block__card-img img {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

.product-block__card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 336px;
}

.product-block__name {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    color: #000;
}

.product-block__desc {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 1px;
    color: #404040;
    text-align: center;
}

.product-block__buy-btn {
    width: 188px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.product-block__buy-btn:hover { opacity: 0.85; }

/* 사은품/추첨 패널 */
.product-block__gift {
    box-sizing: border-box;
    position: relative;
    flex: 1;
    height: 480px;
    background: linear-gradient(to bottom, #f4f7fa 0%, #d7e6f5 100%);
    overflow: hidden;
    
}

.left-radius-12 {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px
}

.right-radius-12 {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.product-block__gift-row {
    position: absolute;
    top: 73px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 92px;
}

.product-block__gift-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
}

.product-block__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #426687;
    border-radius: 24px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.product-block__gift-col--gift .product-block__badge { margin-bottom: 56px; }

/* 흰색 원형 배경은 컷 이미지 자체에 포함되어 있어 별도 배경 스타일 불필요 */
.product-block__gift-icon {
    box-sizing: border-box;
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.product-block__gift-icon img { width: 100%; height: 100%; object-fit: contain; }

.product-block__gift-text {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #2f2f2f;
    text-align: center;
}

.product-block__gift-col--marathon { width: 207px; }
.product-block__gift-col--marathon .product-block__badge { margin-bottom: 76px; }

.product-block__marathon-logo {
    width: 157px;
    height: 88px;
    margin-bottom: 44px;
}
.product-block__marathon-logo img { width: 100%; height: 100%; object-fit: contain; }

.product-block__marathon-text {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #2f2f2f;
    text-align: center;
}

/* 활성 상태: Figma 618:5211 */
.product-block__apply-btn {
    width: 182px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(10, 10, 10, 0.6);
    border-radius: 4px;
    color: #0a0a0a;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.2s ease;
}
.product-block__apply-btn:hover { background: rgba(10, 10, 10, 0.06); }

/* 비활성 상태(구매 후 응모 가능): Figma 618:5214 */
.product-block__apply-btn.disabled {
    border-color: #c6c6c6;
    color: rgba(10, 10, 10, 0.8);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}
.product-block__apply-btn.disabled:hover { background: #666666; }

/* ── 하단: 3분할 특징 카드 ── */
.product-block__features {
    display: flex;
    gap: 24px;
    width: 100%;
}

.product-block__feature {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: 12px;
    overflow: hidden;
}

.product-block__feature-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.product-block__feature--lg {
    flex: 1 1 588px;
    width: 588px;
    height: 296px;
    padding: 24px;
    justify-content: center;
}
.product-block__feature--lg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80.9%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}
.product-block__feature--md {
    flex: 1 1 282px;
    width: 282px;
    height: 296px;
    padding: 24px;
}
.product-block__feature--md::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(215, 230, 245, 0) 44.5%, rgba(221, 236, 250, 1) 79.3%);
    z-index: 1;
}

.product-block__feature-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 282px;
    flex: 0 0 282px;
}

.product-block__feature--sm {
    width: 282px;
    height: 136px;
    padding: 24px;
    align-items: flex-start;
    background: linear-gradient(180deg, #d7e6f5 0%, #f0f7fc 100%);
}
.product-block__feature--sm .product-block__feature-bg { opacity: 0.9; }
.product-block__feature--sm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #d7e6f5 0%, rgba(215, 230, 245, 0) 35%, rgba(215, 230, 245, 0) 65%, #f0f7fc 100%);
    z-index: 1;
}

/* 문구/그라디언트가 이미지 자체에 포함된 완성형 카드 — 별도 텍스트·오버레이 불필요 */
.product-block__feature--baked {
    padding: 0;
    background: none;
}
.product-block__feature--baked::after,
.product-block__feature--baked::before {
    content: none;
}
.product-block__feature--baked .product-block__feature-bg {
    opacity: 1;
}

.checkbox-bubble{
    left: -6px !important;
}


/* ══════════════════════════════════════════════════════════════
   모바일 오버라이드
   @media screen and (max-width: 999px)
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 999px) {

    /* ── Banner ─────────────────────────────────────── */
    /* 뷰포트 너비와 무관하게 배너 높이 554px 고정 */
    .banner-wrapper { height: 554px; }
    .banner-bg { height: 554px; }

    .banner-content {
        top: 80px;
        transform: translateX(-50%);
        width: 90%;
        max-width: 431px;
    }

    /* 출시일: 14px / Regular */
    .banner-open-date {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
    }

    /* 타이틀: 28px / lh:1.3 */
    .banner-title {
        margin: 4px 0 0;
        font-size: 28px;
        line-height: 1.3;
    }

    /* 카운트다운 레이블: 16px / Regular / ls:0.16px */
    .banner-countdown-label {
        margin: 10px 0 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    /* 카운트다운 */
    .banner-countdown { width: 100%; margin-top: 8px;margin-bottom: 0px; }

    /* 숫자: 24px / lh:1.2 */
    .banner-countdown-box span { font-size: 24px; line-height: 1.2; }

    /* 구분자: #18497a */
    .banner-countdown-sep { color: #18497a; }

    /* 단위 레이블: 15px / Regular */
    .banner-countdown-labels span { font-size: 15px; font-weight: 400; line-height: 1.3; }

    /* 버튼: margin-top 16px */
    .banner-btn { margin-top: 16px; }

    .left-radius-12 {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px
    }
    
    .right-radius-12 {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }


    /* ── Nav ────────────────────────────────────────── */
    .nav-wrapper { padding: 0 16px; background: #CDE6FF; }
    .nav-item     { font-size: 16px; }
    .nav-item.active { font-size: 16px; }

    /* ── Lucky 섹션 ─────────────────────────────────── */
    .nxp-lucky {
        padding: 0;
        background: linear-gradient(180deg, #EEF5FC 0%, #D8E7F6 100%);
    }

    .nxp-lucky__inner {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* 카드: flex-col / 카드 스타일 없음 */
    .nxp-lucky__card {
        height: auto;
        background: transparent;
        border-radius: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 48px 16px;
        gap: 24px;
    }

    /* 타이틀 블록: static / 중앙 / 24px */
    .nxp-lucky__text {
        position: static;
        width: 275px;
        gap: 12px;
        align-items: center;
        text-align: center;
    }
    .nxp-lucky__title { font-size: 24px; line-height: 1.4; text-align: center; }
    .nxp-lucky__subtitle { font-size: 18px; line-height: 1.4; text-align: center; }

    /* 설명 박스: Figma 1893:13641 · 321×85px · 절대 좌표 재현 */
    /* 행1: top:16px, left:28px / 행2: top:48px, left:16px */
    .nxp-lucky__desc-box {
        position: static;
        width: 321px;
        height: 85px;
        min-height: auto;
        padding: 0;
        gap: 0;
        justify-content: flex-start;
        margin: 0;
        overflow: hidden;
    }
    /* 행1: 14px / Regular / #0a0a0a / lh:24px — top:16 left:28 */
    .nxp-lucky__desc-main {
        font-size: 14px;
        line-height: 24px;
        margin-top: 16px;
        padding: 0 12px 0 28px;
    }
    /* 행2: 14px / #666,#427bb7 / lh:20.8px — top:48(gap 8px) left:16 */
    .nxp-lucky__desc-sub {
        font-size: 14px;
        line-height: 20.8px;
        margin-top: 8px;
        padding: 0 12px 0 16px;
    }

    /* 액션: static / 중앙 */
    .nxp-lucky__actions {
        position: static;
        width: 100%;
        align-items: center;
        gap: 16px;
    }

    /* meta: 세로 스택 */
    .nxp-lucky__meta {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }
    .nxp-lucky__meta.is-subscribed {
        margin-left: 0;
    }

    .nxp-lucky__privacy-row {
        justify-content: center;
        width: 100%;
    }

    .nxp-lucky__reminder { margin-bottom: 18px; }

    /* 비주얼: static / 하단 full-width */
    .nxp-lucky__visual {
        position: static;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .nxp-lucky__visual-img {
        position: static;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center top;
        transform: none;
    }


    /* ── 프리오더 섹션 ──────────────────────────────── */
    .product-wrapper { padding: 48px 16px; background: linear-gradient(180deg, #D8E7F6 0%, #F2F7FC 100%);}
    .product-wrapper__inner { max-width: none; margin: 0; }
    .product-wrapper__text { gap: 12px; }
    .product-wrapper__title { font-size: 24px; line-height: 1.4; white-space: normal; word-break: keep-all; }
    .product-wrapper__subtitle {
        font-size: 18px;
        line-height: 1.4;
        color: #2f2f2f;
        opacity: 0.8;
        word-break: keep-all;
    }

    /* ── 상품 앵커 탭 ────────────────────────────────── */
    .product-nav { margin-top: 32px;}
    .product-nav-content { height: auto; gap: 18px;padding: 15px 0; }
    .product-nav-item {
        width: 160px;
        height: auto;
        padding: 8px 12px;
        border-width: 1.5px;
        font-size: 16px;
    }
    .product-nav-item.active { border-width: 1.5px; }

    /* ── 상품 상세 블록 ─────────────────────────────── */
    .product-content { gap: 48px; margin-top: 32px; }
    .product-block { gap: 24px; }

    .product-block__top {
        flex-direction: column;
    }
    /* 오픈핏(--reverse) 모바일: DOM 순서(사은품 → 카드)와 무관하게 상품 카드가 위로 오도록 반전 */
    .product-block--reverse .product-block__top {
        flex-direction: column-reverse;
    }

    .product-block__card {
        width: 100%;
        flex: none;
        height: auto;
        padding: 16px 0 24px;
        gap: 20px;
    }
    .product-block__card-img { height: auto; }
    .product-block__card-img img { width: 160px; height: 160px; }
    .product-block__card-info { width: 258px; max-width: 100%; gap: 12px; }
    .product-block__name { font-size: 24px; line-height: 1.2; }
    .product-block__desc { font-size: 14px; line-height: 1.4; letter-spacing: normal; }
    .product-block__card-info .notice-wrap { font-size: 12px; gap: 6px; }
    .product-block__card-info .notice-wrap img { width: 12px; height: 12px; }

    .product-block__gift {
        width: 100%;
        height: auto;
        background: #d2e1f0;
        padding: 24px;
    }
    .product-block__gift-row {
        position: static;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .product-block__gift-col,
    .product-block__gift-col--marathon {
        width: 100%;
        gap: 16px;
    }
    .product-block__badge { font-size: 18px; }
    .product-block__gift-col--gift .product-block__badge,
    .product-block__gift-col--marathon .product-block__badge { margin-bottom: 0; }
    .product-block__gift-icon {
        width: 112px;
        height: 112px;
        margin-bottom: -8px; /* 뱃지-아이콘 16px, 아이콘-텍스트 8px 갭 구현 */
    }
    .product-block__marathon-logo {
        width: 128px;
        height: 72px;
        margin-bottom: 0;
    }
    .product-block__marathon-text { margin-bottom: 0; }
    .product-block__apply-btn { width: 125px; }

    /* 3분할 특징 카드 → 2x2 그리드 */
    .product-block__features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
        height: 360px;
    }
    .product-block__feature-col {
        display: contents;
    }
    .product-block__feature--lg,
    .product-block__feature--md,
    .product-block__feature--sm {
        width: 100%;
        height: 100%;
        flex: none;
        min-height: 0;
        padding: 16px;
    }
} /* /@media screen and (max-width: 999px) */


/* ══════════════════════════════════════════════════════════════
   유의사항 bubble — opendots-series-preheat 동일 CSS 패턴
   PC (≥1000px) : hover-trigger CSS로 :hover 시 bubble 표시
   M  (<1000px) : as-modal + is-active → position:fixed 모달
══════════════════════════════════════════════════════════════ */

/* notice-wrap 기본 레이아웃 */
.notice-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #404040;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;   /* 텍스트 줄바꿈 방지 */
}
.notice-wrap img { width: 16px; height: 16px; flex-shrink: 0; }

/* notice-wrap bubble-content: z-index 높임 + 너비 지정
   기본 .bubble-content는 wrapper(아이콘+텍스트) 전체 폭 기준 가운데 정렬되므로
   "유의사항" 텍스트 쪽으로 치우쳐 보인다. 아이콘(16px) 중심 기준으로 재정렬한다.
   주의: ::after(화살표)의 left는 wrapper가 아니라 .bubble-content 박스 자신을 기준으로 계산되므로,
   박스가 이미 아이콘 중심에 맞춰 정렬된 이상 화살표는 기존 50%(박스 자체 폭 기준 가운데) 값을
   그대로 사용해야 같은 지점(아이콘 중심)을 가리킨다 — 별도로 재정의하면 안 된다. */
.notice-wrap .bubble-content {
    z-index: 9999;
    width: 492px;
    max-width: 492px;
    padding: 24px 18px;
    white-space: normal;   /* 목록 텍스트는 줄바꿈 허용 */
    left: 8px;
}

/* 목록 스타일 — opendots .dot 완전 동일 */
.bubble-content .dot {
    position: relative;
    text-align: justify;
    word-break: break-all;
    font-size: 14px;
    color: #737373;
    line-height: 1.4;
    padding-left: 15px;
    list-style: none;
    margin-bottom: 4px;
}
.bubble-content .dot::before {
    position: absolute;
    width: 5px;
    height: 5px;
    left: 0;
    top: 8px;
    border-radius: 50%;
    background: #737373;
    content: " ";
}
.bubble-content .dot:last-child { margin-bottom: 0; }

/* 헤더·닫기 버튼: PC에서 숨김 */
.bubble-header { display: none; }
.close-btn {
    display: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #737373;
    background: none;
    border: none;
    padding: 0;
}

/* PC (≥1000px): CSS :hover 로 bubble 표시 */
@media (min-width: 1000px) {
    .bubble-wrapper.hover-trigger:not(.bubble-hide):hover .bubble-content {
        display: block;
    }
    /* 카드 overflow:visible — bubble이 카드 밖으로 나올 수 있도록 */
    .nxp-lucky__card { overflow: visible; }
}

/* Mobile (<1000px): as-modal is-active → position:fixed 모달 */
@media (max-width: 999px) {
    /* 자세히 보기 bubble (Figma 2480:2657, 모바일): 트리거 기준 왼쪽으로 펼쳐지도록
       right 정렬로 전환 — PC의 left:0(mo-left)을 그대로 쓰면 트리거가 가운데 정렬된
       행의 오른쪽에 위치할 때 화면 밖으로 넘칠 수 있음. 화살표도 오른쪽(16px)으로 이동. */
    .bubble-content.w-privacy {
        left: auto;
        right: 0;
    }
    .bubble-content.w-privacy::after {
        left: auto;
        right: 16px;
    }
    .bubble-content.w-privacy .bubble-list li { font-size: 12px; }

    .bubble-wrapper.as-modal.is-active .bubble-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: 90% !important;
        max-width: 340px !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
        z-index: 20001 !important;
        padding: 40px 18px 24px !important;
    }
    .bubble-wrapper.as-modal.is-active .bubble-overlay {
        display: block !important;
        z-index: 20000 !important;
    }

    /* 弹窗打开时禁止背景滚动 */
    body.bubble-modal-open {
        overflow: hidden;
    }

    .bubble-wrapper.as-modal.is-active .bubble-content::after {
        display: none !important;
    }
    .bubble-wrapper.as-modal.is-active .bubble-header {
        display: flex;
        justify-content: flex-end;
    }
    .bubble-wrapper.as-modal.is-active .close-btn {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 24px;
    }
}

/* ══════════════════════════════════════════════════
   ⑤ 추가 포인트 혜택 (Figma node 1893:13430)
   ══════════════════════════════════════════════════ */
.nxp-points {
    background: #d8e7f6;
    padding: 96px 0 48px;
}

.nxp-points__inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.nxp-points__title {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(90deg, #1a1a1a 0%, #284d76 60.096%, #92a7d5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.nxp-points__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 211px;
    width: 100%;
}

.nxp-points__visual {
    flex-shrink: 0;
    width: 399px;
    height: 304px;
}
.nxp-points__visual picture,
.nxp-points__card picture {
    display: contents;
}
.nxp-points__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}

.nxp-points__list {
    flex-shrink: 0;
    width: 384px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nxp-points__card {
    box-sizing: border-box;
    position: relative;
    width: 384px;
    height: 141px;
}

.nxp-points__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* 티켓 좌우 절취선 위치(x=36 / x=348)와 정확히 일치하는 얇은 구분선 */
.nxp-points__card-divider {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 93px;
    transform: translateY(-50%);
    background: #eeeded;
    z-index: 1;
}
.nxp-points__card-divider--left { left: 36px; }
.nxp-points__card-divider--right { left: 348px; }

.nxp-points__card-text {
    position: absolute;
    z-index: 2;
    left: 52px;
    top: 24px;
}

.nxp-points__card-label {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
}

.nxp-points__card-point {
    margin: 9px 0 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: #5284bd;
}
.nxp-points__card-btn {
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 텍스트 길이(바로 가기 ↔ 적립 완료)와 무관하게 항상 같은 크기를 유지하도록 최소 폭 지정
       (두 문구 모두 글자 수가 같아 실제로는 거의 동일한 폭으로 렌더링되며, min-width로 지정해
       혹시 모를 폰트 렌더링 차이로 텍스트가 잘리는 것은 방지한다) */
    min-width: 112px;
    height: 40px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #050505;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.nxp-points__card-btn:hover { opacity: 0.85; }
.nxp-points__card-btn.disabled {
    background: #a3a3a3;
    cursor: not-allowed;
    pointer-events: none;
}
.nxp-points__card-btn.disabled:hover { opacity: 1; }

@media screen and (max-width: 999px) {
    .nxp-points {
        /* 이전 섹션(흰색)에서 자연스럽게 이어지는 페이드 */
        background: #D8E7F6;
        padding: 32px 16px 16px;
    }
    .nxp-points__inner {
        padding: 0;
        gap: 24px; /* 타이틀 → 카드 그룹 */
    }
    .nxp-points__title {
        font-size: 24px;
        line-height: 1.4;
        white-space: normal;
        word-break: keep-all;
    }
    .nxp-points__content {
        flex-direction: column;
        gap: 16px; /* 카드 그룹 → 3D 이미지 */
        width: 100%;
    }
    /* Figma: 카드 그룹이 위, 3D 이미지가 아래 (PC와 DOM 순서 반대) */
    .nxp-points__visual {
        order: 2;
        width: 301px;
        max-width: 100%;
        height: 230px;
        margin: 0 auto;
    }
    .nxp-points__list {
        order: 1;
        width: 100%;
        gap: 24px;
    }
    .nxp-points__card {
        width: 100%;
        height: auto;
        aspect-ratio: 329 / 139;
    }
    /* 아래 %값은 모바일 티켓 이미지(329×139) 기준 실제 절취선 좌표(32px / 297px, 높이 91px)를 그대로 비율 환산한 값 */
    .nxp-points__card-divider {
        left: 9.7264%;
        height: 65.4676%;
    }
    .nxp-points__card-divider--right { left: 90.2736%; }
    .nxp-points__card-text {
        left: 13.3739%; /* 44 / 329 */
        top: 17.2662%; /* 24 / 139 */
        width: 32.5228%; /* 107 / 329 */
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .nxp-points__card-point { margin: 0; }
    .nxp-points__card-btn {
        right: 45px;
        min-width: 96px;
    }

    .nxp-lucky__link .bubble-list {
        padding-left: 12px;
    }
}

/* ════════════════════════════════════════════════════════════════
   추첨 결과 다이얼로그
   Figma: 1141:10380 (PC-抽奖弹窗-耳机, 실물 상품) /
          585:4877, 585:4962 (PC-抽奖弹窗-优惠券, 10,000원 / 5,000원 쿠폰)
   act_price_id → 다이얼로그 매핑은 HTML 하단 스크립트의 PRIZE_ID_* 참고
════════════════════════════════════════════════════════════════ */
body.nxp-dialog-open {
    overflow: hidden;
}

.nxp-result-dialog-overlay,
.nxp-coupon-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.7);
    z-index: 30000;
}
.nxp-result-dialog-overlay.is-active,
.nxp-coupon-dialog-overlay.is-active {
    display: flex;
}

.nxp-result-dialog,
.nxp-coupon-dialog {
    position: relative;
    width: min(716px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    padding-bottom: 48px;
    overflow: hidden;
}
.nxp-result-dialog { background: #fff; }
.nxp-coupon-dialog { background: #E4EDF6; }

/* 닫기 버튼 (Figma Expand&close 80×80 / X 아이콘) */
.nxp-result-dialog-close,
.nxp-coupon-dialog-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}
.nxp-result-dialog-close::before,
.nxp-result-dialog-close::after,
.nxp-coupon-dialog-close::before,
.nxp-coupon-dialog-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #0a0a0a;
    content: " ";
}
.nxp-result-dialog-close::before,
.nxp-coupon-dialog-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.nxp-result-dialog-close::after,
.nxp-coupon-dialog-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 실물 상품(이어폰) 시각 영역: 440×200 blur pill + 이어폰 2개 + or */
.nxp-result-dialog-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 440px;
    max-width: calc(100% - 40px);
    height: 200px;
    margin-top: 27px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.nxp-result-dialog-earbud {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.nxp-result-dialog-or {
    flex-shrink: 0;
    font-family: 'Shokz Sans Display', 'NotoSansKRPreheat', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #0a0a0a;
}

/* 쿠폰 카드 시각 영역: 금액 텍스트가 포함된 완성형 이미지 (PC/모바일 구분, 높이 고정 + 너비 자동) */
.nxp-coupon-card {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.nxp-coupon-card-img {
    width: auto;
    height: 200px;
    object-fit: contain;
}

/* 본문: 타이틀 + 설명 + 버튼 (두 다이얼로그 공통) */
.nxp-result-dialog-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
}
.nxp-result-dialog-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}
.nxp-result-dialog-title {
    margin: 0;
    width: 100%;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    word-break: keep-all;
    background: linear-gradient(90deg, #1a1a1a 0%, #284d76 60.096%, #92a7d5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.nxp-result-dialog-desc {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    color: #666;
    text-align: center;
    word-break: keep-all;
}
.nxp-result-dialog-btn,
.nxp-coupon-dialog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 40px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #0a0a0a;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.nxp-result-dialog-btn:hover,
.nxp-coupon-dialog-btn:hover { opacity: 0.85; }

@media screen and (max-width: 999px) {
    .nxp-result-dialog-overlay,
    .nxp-coupon-dialog-overlay {
        padding: 16px;
    }
    .nxp-result-dialog,
    .nxp-coupon-dialog {
        padding-bottom: 32px;
    }
    .nxp-result-dialog-close,
    .nxp-coupon-dialog-close {
        width: 56px;
        height: 56px;
    }
    .nxp-result-dialog-close::before,
    .nxp-result-dialog-close::after,
    .nxp-coupon-dialog-close::before,
    .nxp-coupon-dialog-close::after {
        width: 16px;
    }
    .nxp-result-dialog-visual {
        gap: 16px;
        width: 260px;
        height: 130px;
        margin-top: 16px;
    }
    .nxp-result-dialog-earbud {
        width: 130px;
        height: 130px;
    }
    .nxp-result-dialog-or {
        font-size: 16px;
    }
    .nxp-coupon-card {
        margin-top: 24px;
    }
    .nxp-coupon-card-img {
        height: 154px;
    }
    .nxp-result-dialog-body {
        gap: 20px;
        margin-top: 20px;
        padding: 0 20px;
    }
    .nxp-result-dialog-text {
        gap: 12px;
    }
    .nxp-result-dialog-title {
        font-size: 20px;
    }
    .nxp-result-dialog-desc {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* ════════════════════════════════════════════════════════════════
   이어폰 사용 스타일 설문 다이얼로그 (Figma 3652:6779)
   point_membership_content.php의 pm-preference-modal과 동일한 인터랙션
════════════════════════════════════════════════════════════════ */
.nxp-survey-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.7);
    z-index: 30000;
}
.nxp-survey-dialog-overlay.is-active {
    display: flex;
}

.nxp-survey-dialog {
    position: relative;
    width: min(900px, 100%);
    max-height: min(720px, 90vh);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c6c6c6;
    border-radius: 6px;
    box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.08), 0 6px 32px -8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    padding: 64px 24px 24px;
}

.nxp-survey-dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}
.nxp-survey-dialog-close::before,
.nxp-survey-dialog-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #050505;
    content: " ";
}
.nxp-survey-dialog-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.nxp-survey-dialog-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.nxp-survey-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nxp-survey-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nxp-survey-group__title {
    margin: 0;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.4;
    color: #050505;
}
.nxp-survey-group__title span {
    margin-left: 4px;
    font-size: 19px;
    font-weight: 400;
    color: #737373;
}

.nxp-survey-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
}

.nxp-survey-options__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 260px;
    flex: 1 1 320px;
}

.nxp-survey-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.nxp-survey-check input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.nxp-survey-check__box {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1.5px solid #050505;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nxp-survey-check input:checked + .nxp-survey-check__box {
    background: #050505;
    border-color: #050505;
}
.nxp-survey-check input:checked + .nxp-survey-check__box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 11px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.nxp-survey-check__label {
    font-size: 17px;
    line-height: 1.6;
    color: #050505;
}

.nxp-survey-submit-btn {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 52px;
    padding: 12px 18px;
    box-sizing: border-box;
    background: #050505;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.nxp-survey-submit-btn:hover { opacity: 0.85; }
.nxp-survey-submit-btn:disabled { cursor: not-allowed; opacity: 0.6; }

@media screen and (max-width: 999px) {
    /* Figma 3652:6904 (모바일 설문 다이얼로그): PC와 달리 화면 중앙에 뜨는 카드형 팝업으로,
       하단 고정 시트가 아니라 사방 여백을 두고 모서리가 전부 둥근 형태다 */
    .nxp-survey-dialog-overlay {
        padding: 16px;
    }
    .nxp-survey-dialog {
        width: 100%;
        max-width: 400px;
        max-height: 85vh;
        border-radius: 6px;
        padding: 48px 16px 16px;
    }
    .nxp-survey-dialog-close {
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
    }
    .nxp-survey-dialog-close::before,
    .nxp-survey-dialog-close::after {
        width: 16px;
    }
    .nxp-survey-form {
        gap: 24px;
    }
    .nxp-survey-group {
        gap: 12px;
    }
    .nxp-survey-group__title {
        font-size: 19px;
    }
    .nxp-survey-group__title span {
        margin-left: 4px;
        font-size: 16px;
    }
    /* PC는 좌우 2컬럼(각 컬럼 내부에서만 세로 정렬)이지만, 모바일은 한 줄에 1개씩만
       들어가는 세로 1열 목록이다. display:contents로 컬럼 래퍼를 투명하게 만들어
       체크박스들을 .nxp-survey-options의 직계 flex 아이템으로 승격시켜야
       order로 개별 항목 순서를 재배치할 수 있다 */
    .nxp-survey-options {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .nxp-survey-options__col {
        display: contents;
    }
    .nxp-survey-check {
        gap: 8px;
    }
    .nxp-survey-check__box {
        width: 20px;
        height: 20px;
    }
    .nxp-survey-check input:checked + .nxp-survey-check__box::after {
        width: 9px;
        height: 5px;
    }
    .nxp-survey-check__label {
        font-size: 15px;
        line-height: 1.4;
    }
    /* Figma 모바일 디자인은 "2. 이어폰 사용 시 중요하게 생각하는 요소" 그룹의 "기타"를
       PC(왼쪽 컬럼 5번째)와 달리 맨 마지막 항목으로 배치한다 */
    .nxp-survey-check--order-last {
        order: 1;
    }
    .nxp-survey-submit-btn {
        align-self: stretch;
        width: 100%;
        height: 40px;
        font-size: 15px;
    }
}