/* ════════════════════════════════════════════════════════════════
   NCE·XS Launch — PC-first CSS (banner / nav / product)
   breakpoint: @media screen and (max-width: 999px) for mobile
   Copied from nce-xs-preheat.css
════════════════════════════════════════════════════════════════ */

/* ── @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; }
}


/* ══════════════════════════════════════════════════════════════
   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:176px / width:708px (Figma 3877:4908) */
.banner-content {
    position: absolute;
    left: 50%;
    top: 176px;
    transform: translateX(-50%);
    width: 708px;
    max-width: 708px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
}

/* ① 타이틀: PC 40px / Bold / 그라디언트 (Figma 3877:4910) */
.banner-title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    background: linear-gradient(270deg, #8EB2FF -60.5%, #1A1A1A 134.21%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ② 부제목: PC 24px / Medium / #262626 (Figma 3877:4911) */
.banner-subtitle {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: #262626;
}

/* ③ 기간: PC 20px / Regular / #525252 (Figma 3877:4912) */
.banner-period {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: #525252;
}

/* ④ CTA 버튼: 48px / #050505 / 17px (Figma 3877:4913) */
.banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 13px 32px;
    margin-top: 0;
    background: #050505;
    color: #ffffff;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.68px;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.banner-btn:hover,
.banner-btn:focus { opacity: 0.85; color: #ffffff; }


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

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

.nav-content {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    max-width: 996px;
    margin: 0 auto;
}

.nav-item {
    box-sizing: border-box;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    padding: 0;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.16px;
    color: #666;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.nav-item.active {
    color: #050505;
    border-bottom-color: #050505;
}

.bubble-wrapper { position: relative; display: inline-flex; align-items: center; }
.bubble-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 262px;
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    color: #666;
    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-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1998;
}


/*.points-survey-more {*/
/*    --bubble-left-extra: 20px;   !* 左侧多出量，方便调试 *!*/
/*    position: relative;*/
/*}*/

/*.points-survey-more .bubble-content {*/
/*    !*display: block;*!*/
/*    width: 300px;*/
/*    max-width: 300px;*/
/*    padding: 16px 18px;*/
/*    white-space: normal;*/
/*    text-align: left;*/

/*    !* 以触发文字中心为基准，整体左偏 20px *!*/
/*    left: 50%;*/
/*    right: auto;*/
/*    transform: translateX(calc(-50% - var(--bubble-left-extra)));*/
/*}*/

/*!* 三角在框内居中再右移 20px，抵消上面的左移 *!*/
/*.points-survey-more .bubble-content::after {*/
/*    left: calc(50% + var(--bubble-left-extra));*/
/*    right: auto;*/
/*    transform: translateX(-50%);*/
/*}*/

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

.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;
    color: #013F67;
  
}

.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-bottom: 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은 JS에서 .nav-wrapper 높이만큼 지정해 첫 번째 흡정 내비 아래에 붙인다 */
    top: var(--product-nav-fixed-top, 0px);
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    /* nav-wrapper(10000)보다 낮게 두어 두 흡정 내비가 겹칠 때도 상단 앵커 내비가 위에 유지되도록 함 */
    z-index: 9999;
    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: 32px;
}

.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;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

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

/* 모바일 전용 사은품 코너 썸네일 — PC에서는 숨김 */
.product-block__card-gift {
    display: none;
}

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

.product-block__card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.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: 1.4;
    color: #404040;
    text-align: left;
}

/* 색상/옵션 태그 (Figma 2279:12081) */
.product-block__card-attrs {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
}

.product-block__attr {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.product-block__colors {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* 색상 스와치 — 기본 24px 영역, 내부 18px 컬러 (Figma 2363:14109) */
.product-block__color-swatch {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.product-block__color-swatch > span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
/* 선택됨: 주황 아웃라인 링 (Figma stroke #FF6008) */
.product-block__color-swatch.is-active {
    border-color: #ff6008;
}

.product-block__tags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-block__tag {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    margin: 0;
    background: #f7f7f7;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #8d8d8d;
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
/* 선택됨: 피치 배경 + 주황 보더/텍스트 (Figma 2363:14107) */
.product-block__tag.is-active {
    background: #fff8f5;
    border-color: #ffb688;
    color: #ff7a3d;
    font-weight: 500;
}
.product-block__tag.is-unavailable {
    display: none;
}
.product-block__color-swatch.is-unavailable {
    visibility: hidden;
    pointer-events: none;
}

/* 옵션 미선택 안내 버블 (Figma 578:817)
   absolute 오버레이 — 표시해도 카드 원래 레이아웃(가격/버튼)을 밀지 않음
   해당 옵션 컨테이너(색상/사이즈) 가로 중앙에 정렬 */
.product-block__option-tip {
    display: none;
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: 220px;
    padding: 12px;
    border-radius: 6px;
    background: #fff;
    color: #0a0a0a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.08),
        0 3px 6px -4px rgba(0, 0, 0, 0.12),
        0 9px 28px 8px rgba(0, 0, 0, 0.05);
    pointer-events: none;
}
.product-block__option-tip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
}
.product-block__attr.is-tip-open {
    z-index: 21;
}
.product-block__attr.is-tip-open .product-block__option-tip {
    display: block;
}

/* 가격 + CTA 버튼 (Figma 2279:12084) */
.product-block__card-purchase {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.product-block__price {
    margin: 0;
    padding: 8px 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #ff4d0a;
}

.product-block__card-btns {
    display: flex;
    gap: 12px;
    width: 100%;
}

.product-block__btn {
    box-sizing: border-box;
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.68px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    margin: 0;
    padding: 0;
}
.product-block__btn:hover { opacity: 0.85; }

a.product-block__btn--outline,
button.product-block__btn--outline {
    border: 1px solid #050505;
    color: #050505;
    background: transparent;
}

a.product-block__btn--filled,
button.product-block__btn--filled {
    border: none;
    background: #050505;
    color: #fff;
}

/* 시리즈 리본 (Figma 2363:14137) — 카드 상단좌측 150×42 가로 뱃지 */
.product-block__ribbon {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 42px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(181deg, #3C6595 -54.14%, #DDF2FE 164.76%);
    /* TL·BR 라운드 — 카드 모서리 정렬 + 안쪽 플래그 컷 */
    border-radius: 12px 0 12px 0;
    z-index: 2;
}

.product-block__ribbon.right-radius{
    border-radius: 0px 0 12px 0;
}
.product-block__ribbon span {
    white-space: nowrap;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

/* 사은품 + 특징 통합 패널 (Figma 2279:12092) */
.product-block__promo {
    box-sizing: border-box;
    position: relative;
    flex: 1;
    min-width: 0;
    height: 480px;
    padding: 42px 35px 20px;
    background: linear-gradient(131deg, rgba(255, 255, 255, 0.58) -0.01%, rgba(255, 255, 255, 0.00) 27.71%), linear-gradient(246deg, rgba(255, 255, 255, 0.80) -11.43%, rgba(213, 230, 255, 0.80) 52.37%, rgba(217, 226, 234, 0.80) 76.54%, rgba(255, 255, 255, 0.80) 105.15%), linear-gradient(235deg, #FFF -47.33%, #EEF4FB 36.59%, #EEF4FB 68.39%, #FFF 106.04%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    overflow: hidden;
}

/* 하단 특징 카드 영역의 물결형 프로스트 패널 (Figma Union) */
.product-block__promo-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 282px;
    pointer-events: none;
    z-index: 0;
}

.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__promo-gift {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 438px;
    max-width: 100%;
    flex-shrink: 0;
}

/* 흰색 원형 배경은 컷 이미지 자체에 포함되어 있어 별도 배경 스타일 불필요 */
.product-block__gift-icon {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    /* background: rgba(255, 255, 255, 0.5); */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-block__gift-icon img { width: 100%; height: 100%; object-fit: contain; }

.product-block__promo-gift-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 244px;
    text-align: left;
}

.product-block__gift-text {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #2f2f2f;
    text-align: left;
}

.product-block__gift-note {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #666;
    text-align: left;
}
.product-block__gift-note p { margin: 0; }

/* 두 사은품 재고 모두 소진 (Figma 2363:13309) — 사은품 정보 숨기고 특징 카드만 */
.product-wrapper.is-all-gift-soldout .product-block__promo-gift,
.product-wrapper.is-all-gift-soldout .product-block__card-gift {
    display: none !important;
}
/* 개별 사은품 재고 소진 — 모바일 카드 사은품 썸네일만 숨김 */
.product-block__card-gift.is-gift-soldout {
    display: none !important;
}
.product-wrapper.is-all-gift-soldout .product-block__promo {
    justify-content: center;
    gap: 0;
    padding-top: 20px;
}
.product-wrapper.is-all-gift-soldout .product-block__promo-wave {
    display: none;
}

/* ── 하단: 3분할 특징 카드 (Figma 2279:12107) ── */
.product-block__features {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 16px;
    width: 746px;
    max-width: 100%;
    flex-shrink: 0;
}

.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: 0 0 300px;
    width: 300px;
    height: 228px;
    padding: 16px;
    justify-content: center;
}
.product-block__feature--lg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 33, 43, 0) 55.7%, rgba(20, 33, 43, 0.6) 100%);
    z-index: 1;
}
.product-block__feature--md {
    flex: 0 0 194px;
    width: 194px;
    height: 228px;
    padding: 16px;
}
.product-block__feature--md::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(166, 200, 235) 0%, rgba(215, 230, 245, 0) 40.2%),
        linear-gradient(180deg, rgba(234, 244, 251, 0) 44.5%, rgb(221, 236, 250) 79.3%);
    z-index: 1;
}

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

.product-block__feature--sm {
    width: 220px;
    height: 106px;
    padding: 6px 16px;
    align-items: flex-start;
    background: linear-gradient(180deg, #a4c7ea 16.5%, #d9e9f9 52.8%, #f0f7fc 110%);
}
.product-block__feature--sm .product-block__feature-bg { opacity: 0.9; }
.product-block__feature--sm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(172deg, rgba(234, 244, 251, 0) 67.9%, rgb(221, 236, 250) 90.6%);
    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;
}


/* ══ 동시 구매 할인 (bundle) ══ */
.bundle-wrapper {
    padding: 96px 16px;
    background: #EFF6FF;
}
.bundle-wrapper__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.bundle-wrapper__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    margin-bottom: 40px;
}
.bundle-wrapper__title {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    color: #013F67;
}
.bundle-wrapper__subtitle {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #2F2F2F;
}
.mo-only { display: none; }

/* 탭 */
.bundle-tabs {
    display: flex;
    justify-content: center;
    gap: 42px;
    margin: 0 auto 64px;
    width: 100%;
    max-width: 740px;
}

.bundle-tabs__btn {
    flex: 1 1 0;           /* 两个按钮等宽 */
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;   /* 单行；若会换行见下方说明 */
    border-radius: 999px;
    border: 1px solid #D9D9D9;
    background: #fff;
    color: #404040;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    box-sizing: border-box;
}
.bundle-tabs__btn.is-active {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #fff;
}

/* 상품 영역 — PC 가로 */
.bundle-panel { display: none; }
.bundle-panel.is-active { display: block; }
.bundle-products {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.bundle-product {
    flex: 1;
    max-width: 436px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    text-align: center;
    /* overflow: hidden; */
}
/* 图片区作为定位参照 */
.bundle-product__img {
    position: relative;          /* 关键 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    margin-bottom: 0;
    padding: 24px 16px 16px;
    background: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.bundle-product__img img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}


/* 赠品：右下角绝对定位 */
.bundle-product__gift {
    position: absolute;
    right: 24px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    pointer-events: none;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #e9eef6;
    box-sizing: border-box;
}
.bundle-product__gift img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bundle-product__name {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: #0A0A0A;
}
.bundle-product__attrs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    background: #91AAC5;
    justify-content: center;
    overflow: visible;
    position: relative;
    z-index: 1;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.bundle-product__attrs .product-block__attr {
    align-items: center;
}
.bundle-product__attrs .product-block__attr.is-tip-open {
    z-index: 22;
}
.bundle-products__plus {
    flex-shrink: 0;
}

/* 하단 가격/버튼 */
.bundle-footer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.bundle-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.bundle-price__sale {
    font-size: 32px;
    font-weight: 500;
    color: #0A0A0A;
}
.bundle-price__origin {
    font-size: 24px;
    color: #8D8D8D;
    font-weight: 400;
    text-decoration: line-through;
}
.bundle-actions {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: none;
}
.bundle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 228px;
    height: 48px;
    min-height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.68px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s;
}
.bundle-btn:hover { opacity: .85; }
.bundle-btn--primary {
    flex: 0 0 228px;
    background: #050505;
    color: #fff;
}
.bundle-btn--npay {
    flex: 0 0 228px;
    width: 228px;
    background: #00DE5A;
    color: #fff;
}
.bundle-btn__npay-logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bundle-notice__trigger {
    border: 0;
    background: transparent;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}
/* N pay 按钮 + 常驻气泡 */
.bundle-npay-wrap {
    position: relative;
    flex: 0 0 228px;
    width: 228px;
    display: flex;
    flex-direction: column;
}

/* 常驻：覆盖默认 display:none */
.bundle-npay-wrap.is-always-visible .bubble-content {
    display: block !important;
    position: absolute;
    top: 100%;
    left: calc(50% - 26px - 20px);   /* N 标志正下方 */
    transform: none;           /* 取消居中 */
    width: max-content;
    max-width: none;           /* 按需，避免被裁切 */
    padding: 10px 14px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 三角形对准 N，在气泡左边缘 */
.bundle-npay-wrap.is-always-visible .bubble-content::after {
    left: 20px;
    transform: none;
}

.bundle-npay-wrap .bundle-btn--npay {
    width: 100%;
}
.bundle-npay-btn-box {
    position: relative;
    width: 228px;
    height: 48px;
    min-height: 48px;
    flex: none;
    cursor: pointer;
}
.bundle-npay-visual {
    pointer-events: none;
}
.bundle-npay-sdk-form {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}
.bundle-npay-sdk {
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}
.bundle-npay-sdk a,
.bundle-npay-sdk img,
.bundle-npay-sdk table,
.bundle-npay-sdk span {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}
.bundle-npay-fallback {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
}

/* M 端：给常驻气泡留高 */
@media (max-width: 999px) {
    .bundle-actions {
        padding-bottom: 48px;
    }
}


/* ══ 积分问卷落地页 ══ */
.points-survey-wrapper {
    padding: 96px 16px;
    background: #fff;
}
.points-survey-wrapper__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.points-survey-wrapper__title {
    margin: 0 0 48px;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    color: #013F67;
}

/* ── 卡片容器：浅蓝底 ── */
.points-survey-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 48px 100px;
    border-radius: 12px;
    overflow: visible;
    background: linear-gradient(236.29deg, #FFFFFF -22.77%, #E0EFFF 74.28%, #FFFFFF 139.19%);

}

/* ── 内容区：PC 白底不需要，M 需要白底内框 ── */
.points-survey-card__body {
    flex: 1;
    min-width: 0;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.points-survey-card__desc {
    margin: 0 0 24px;
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    color: #0A0A0A;
    word-break: keep-all;
}
.points-survey-card__desc strong {
    color: #C36A1C;
    font-weight: 700;
}

/* 黑色矩形按钮 — Figma 2554:9421 188×48 / radius 4 */
.points-survey-btn-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 4;
}
.points-survey-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 188px;
    min-width: 188px;
    height: 48px;
    padding: 0 32px;
    border: none;
    border-radius: 4px;
    background: #050505;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.68px;
    cursor: pointer;
    transition: opacity .2s;
}
.points-survey-card__btn.disabled{
    background: #b2b2b2;
    cursor: not-allowed;
}

.points-survey-card__btn:hover { opacity: .85; }

/* 底部：同意行 + 유의사항（对齐 nxp-lucky__meta） */
.points-survey-card__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 16px;
    width: auto;
}
.points-survey-card__divider {
    width: 1px;
    height: 12px;
    background: #C4C4C4;
    flex-shrink: 0;
}

/* Row1: checkbox + 文案 + 자세히 보기 */
.points-survey-privacy-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.points-survey-agree {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.points-survey-agree input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.points-survey-agree__box {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.points-survey-agree input:checked + .points-survey-agree__box {
    border-color: #FF6008;
    background: #FF6008 url(https://static.shokz.co.kr/resource/2026/04/09/check_69d722e585b4e.svg) center / 10px no-repeat;
}
.points-survey-agree__text {
    margin: 0 8px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #2f2f2f;
    white-space: nowrap;
}

/* 미동의 시 CTA 클릭 → 체크박스 아래 tip (Figma 2554:9426 / preheat 동일 패턴) */
.points-survey-agree-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
}
.points-survey-agree-tip.is-active {
    z-index: 30;
}
.points-survey-agree-bubble {
    left: -21px;
    max-width: none;
    white-space: nowrap;
    z-index: 40;
}
.points-survey-agree-bubble .bubble-text {
    color: #0a0a0a;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
}

/* 미로그인 CTA 하단 상주 气泡 — Figma 2245:17782 Popover / 2554:9398
   与同意 tip 分离：不用 bubble-wrapper.is-active，避免两气泡叠层 */
.points-survey-login-bubble {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: none;
    padding: 12px;
    border-radius: 6px;
    background: #fff;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}
.points-survey-login-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #fff;
}
.points-survey-btn-wrap.is-login-tip .points-survey-login-bubble {
    display: block;
}
.points-survey-btn-wrap.is-login-tip.is-agree-tip-open .points-survey-login-bubble {
    display: none;
}
.points-survey-login-bubble .bubble-text {
    color: #0a0a0a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

.points-survey-notice__btn {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #2f2f2f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 右侧插图 */
.points-survey-card__visual {
    flex-shrink: 0;
    width: 42%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.points-survey-card__visual img {
    width: 100%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
}

/* 자세히 보기 - 개인정보 동의 bubble（PC/M 모두 툴팁, 모달 아님） */
.points-survey-notice .points-survey-privacy-bubble,
.points-survey-notice .bubble-content {
    width: 320px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 16px;
    white-space: normal;
    box-sizing: border-box;
}

/* 标题：第一行 - 更大、更黑、更粗 */
.points-survey-privacy__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    line-height: 1.5;
    word-break: keep-all;
    text-align: left;
}

/* 数字列表 */
.points-survey-privacy__list {
    margin: 0;
    padding-left: 1.2em;
    list-style: decimal;
}

.points-survey-privacy__list li {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 1.5;
    margin-bottom: 6px;
    word-break: keep-all;
    text-align: left;
}

.points-survey-privacy__list li:last-child {
    margin-bottom: 0;
}

/* 取消 dot 圆点（若还有残留） */
.points-survey-privacy-bubble .dot::before {
    display: none;
}

.points-survey-privacy__list a {
    color: #666;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* M端 — Figma 2554:9616 气泡提示，非弹窗 */
@media (max-width: 999px) {
    .points-survey-notice .points-survey-privacy-bubble,
    .points-survey-notice .bubble-content {
        position: absolute;
        width: min(300px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        padding: 16px;
        left: auto;
        right: 0;
        transform: none;
        z-index: 50;
    }
    .points-survey-notice .bubble-content::after {
        left: auto;
        right: 24px;
        transform: none;
    }
    .points-survey-notice .bubble-overlay,
    .points-survey-notice .close-btn {
        display: none !important;
    }

    .points-survey-privacy__title {
        font-size: 14px;
        margin-bottom: 10px;
        font-weight: 400;
    }

    .points-survey-privacy__list li {
        font-size: 12px;
        line-height: 1.5;
    }
}



/* ── 问卷弹窗 ── */
.survey-modal {
    position: fixed;
    inset: 0;
    z-index: 20002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}
.survey-modal.is-open {
    display: flex;
}
.survey-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* Figma 757:933 / 889:1086 — 716 弹窗 + 渐变底 */
.survey-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 716px;
    padding: 35px 48px 48px;
    border-radius: 12px;
    background:
        linear-gradient(
            60.74deg,
            rgba(123, 164, 207, 0.2) 23.92%,
            rgba(230, 247, 255, 0.2) 54.21%,
            rgba(255, 255, 247, 0.2) 82.12%,
            rgba(253, 243, 230, 0.2) 119.09%
        ),
        #f1f1f1;
    box-sizing: border-box;
    overflow: hidden;
}

.survey-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #2f2f2f;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.survey-modal__close:hover {
    color: #0a0a0a;
}

#surveyModalTitle {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: #3b3c44;
}

.survey-modal__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 32px;
}

.survey-modal__question {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: #3b3c44;
    word-break: keep-all;
}

.survey-modal__panel {
    display: none;
}
.survey-modal__panel.is-active {
    display: block;
}

.survey-modal__options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.survey-modal__option {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    margin: 0;
    border-radius: 6px;
    background: #fff;
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
}
.survey-modal__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* Figma 889:1086 — 方形 checkbox + 选中橙边 */
.survey-modal__option:has(input:checked) {
    border-color: #ff6008;
}
.survey-modal__radio {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.survey-modal__option input:checked + .survey-modal__radio {
    border-color: #ff6008;
    background: #ff6008 url(https://static.shokz.co.kr/resource/2026/04/09/check_69d722e585b4e.svg) center / 14px no-repeat;
}

.survey-modal__option-text {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #3b3c44;
    word-break: keep-all;
}

.survey-modal__submit {
    display: block;
    width: 188px;
    height: 48px;
    margin: 24px auto 0;
    padding: 0 32px;
    border: none;
    border-radius: 4px;
    background: #050505;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.68px;
    line-height: 1;
    cursor: pointer;
}
.survey-modal__submit:hover {
    opacity: 0.85;
}

/* Step 指示器 */
.survey-modal__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 23px;
    border: 0.6px solid #fff;
    background: linear-gradient(180deg, #f6f6f6 0%, #d5d5d5 100%);
    box-shadow: 0 0 13.8px 0 rgba(232, 232, 232, 0.3);
    color: #666;
    font-size: 24px;
    font-weight: 400;
    line-height: 16px;
    pointer-events: none;
    box-sizing: border-box;
}
.survey-modal__step.is-active {
    background: linear-gradient(180deg, #ffd8b8 0%, #ff6d2a 100%);
    box-shadow: 0 0 13.8px 0 rgba(255, 157, 112, 0.3);
    color: #fff;
}
.survey-modal__step-line {
    width: 102px;
    height: 2px;
    margin: 0;
    background: #d4d4d4;
}
.survey-modal.is-step-2 .survey-modal__step-line {
    background: #ff6008;
}

/* Step1 类别图 — Figma 302×348 / gap 16 / radius 6 */
.survey-modal__categories {
    display: flex;
    gap: 16px;
}
.survey-modal__category {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 348px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}
.survey-modal__category-img {
    position: absolute;
    inset: 0;
}
.survey-modal__category-img picture,
.survey-modal__category-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* 问卷提交成功弹窗 — Figma 1680:1908 */
.survey-success-modal {
    position: fixed;
    inset: 0;
    z-index: 20003;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}
.survey-success-modal.is-open {
    display: flex;
}
.survey-success-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.survey-success-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 716px;
    min-height: 360px;
    padding: 80px 48px;
    border-radius: 12px;
    background:
        linear-gradient(
            52.3deg,
            rgba(123, 164, 207, 0.2) 23.92%,
            rgba(230, 247, 255, 0.2) 54.21%,
            rgba(255, 255, 247, 0.2) 82.12%,
            rgba(253, 243, 230, 0.2) 119.09%
        ),
        #f1f1f1;
    text-align: center;
    box-sizing: border-box;
}
.survey-success-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2f2f2f;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}
.survey-success-modal__title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    color: #3b3c44;
}
.survey-success-modal__desc {
    margin: 0 0 32px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    color: #3b3c44;
}
.survey-success-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 188px;
    min-width: 188px;
    height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 4px;
    background: #050505;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.68px;
    cursor: pointer;
}
.survey-success-modal__btn:hover {
    opacity: 0.85;
}



/* ══════════════════════════════════════════════════════════════
   모바일 오버라이드
   @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: 64px;
        transform: translateX(-50%);
        width: 94%;
        max-width: 500px;
        gap: 20px;
    }

    /* 타이틀: 28px / Bold */
    .banner-title {
        font-size: 26px;
        line-height: 1.3;
    }

    /* 부제목: 18px */
    .banner-subtitle {
        font-size: 18px;
    }

    /* 기간: 16px */
    .banner-period {
        font-size: 16px;
    }

    /* 버튼 */
    .banner-btn {
        font-size: 15px;
        padding: 12px 24px;
        height: 44px;
        letter-spacing: -0.5px;
    }

    .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: #e0ecf8; }
    .nav-item     { font-size: 16px; line-height: 24px; letter-spacing: 0; }
    .nav-item.active { font-size: 16px; }

    /* ── 프리오더 섹션 ──────────────────────────────── */
    .product-wrapper { padding: 48px 16px; background: #F9FCFE;}
    .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-bottom: 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; }

    /* ── 상품 상세 블록 (Figma 678:781 모바일) ───────── */
    .product-content { gap: 48px; margin-top: 32px; }
    .product-block { gap: 24px; }

    /*
     * 모바일 구조 (Figma):
     *  [상품카드 + 사은품] 한 덩어리(상·하 라운드 + 그림자)
     *  ↓ 24px
     *  [특징 2×2]
     * promo에 display:contents를 써서 gift/features를 top의 직접 자식처럼 배치한다.
     */
    .product-block__top {
        flex-direction: column;
        gap: 0;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
    }
    .product-block--reverse .product-block__top {
        flex-direction: column;
    }

    .product-block__promo {
        display: contents;
    }

    .product-block__card {
        width: 100%;
        flex: none;
        height: auto;
        padding: 0 0 24px;
        gap: 0;
        order: 1;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .product-block__card-img {
        height: 257px;
        width: 100%;
    }
    .product-block__card-img > img {
        width: 240px;
        height: 240px;
    }

    /* 제품 이미지 우하단 사은품 썸네일 + 플러스 (Figma 1002:5359) */
    .product-block__card-gift {
        display: block;
        position: absolute;
        right: 12px;
        bottom: 0;
        width: 99px;
        height: 82px;
        z-index: 2;
        pointer-events: none;
    }
    .product-block__card-gift-box {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background: #fefefe;
       
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-block__card-gift-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .product-block__card-gift-plus {
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        line-height: 0;
    }
    .product-block__card-gift-plus svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .product-block__card-info {
        width: calc(100% - 48px);
        max-width: 313px;
        gap: 16px;
        margin-top: 0;
    }
    .product-block__card-meta { gap: 12px; }
    .product-block__name { font-size: 24px; line-height: 1; }
    .product-block__desc { font-size: 14px; line-height: 1.4; height: auto; }

    .product-block__ribbon {
        width: 150px;
        height: 42px;
        padding: 12px 16px;
    }
    .product-block__ribbon span { font-size: 18px; }

    .product-block__card-attrs { gap: 32px; flex-wrap: nowrap; }

    /* 모바일: 색상 버블이 카드 왼쪽에서 잘리지 않도록 우측으로 펼침 */
    .product-block__card,
    .product-block__card-info,
    .product-block__card-attrs,
    .product-block__attr {
        overflow: visible;
    }
    .product-block__option-tip {
        left: 0;
        transform: none;
    }
    .product-block__option-tip::before {
        left: 24px; /* 색상 스와치(~48px) 중앙 */
        transform: none;
    }

    .product-block__price { font-size: 20px; padding: 8px 0; }
    .product-block__card-btns { gap: 16px; }
    .product-block__btn {
        font-size: 15px;
        height: 40px;
        letter-spacing: -0.6px;
        padding: 0 24px;
    }

    /* 사은품 영역 — 카드 하단과 이어지는 라운드 + 그라디언트 */
    .product-block__promo-gift {
        order: 2;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 24px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        background:
            linear-gradient(142deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 27.71%),
            linear-gradient(236deg, rgba(255, 255, 255, 0.8) 11.43%, rgba(213, 230, 255, 0.8) 52.37%, rgba(217, 226, 234, 0.8) 76.54%, rgba(255, 255, 255, 0.8) 105.15%),
            linear-gradient(223deg, #fff 47.33%, #eef4fb 36.59%, #eef4fb 68.39%, #fff 106.04%);
    }
    .product-block__promo-wave { display: none; }
    .product-block__gift-icon {
        width: 103px;
        height: 103px;
        border-radius: 51.5px;
        /* background: rgba(255, 255, 255, 0.5); */
    }
    .product-block__promo-gift-text {
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
    .product-block__gift-text {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        text-align: center;
        color: #2f2f2f;
    }
    .product-block__gift-note { text-align: center; }

    /* 모바일: 두 사은품 모두 소진 시 gift 카드 영역도 제거 */
    .product-wrapper.is-all-gift-soldout .product-block__promo-gift {
        display: none !important;
        padding: 0;
        box-shadow: none;
        background: none;
    }
    .product-wrapper.is-all-gift-soldout .product-block__card {
        border-radius: 12px;
    }

    /* 특징 카드 2×2 — 사은품 카드 바깥 (Figma gap 16 / ~173²) */
    .product-block__features {
        order: 3;
        display: grid;
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 16px;
        height: auto;
        margin-top: 24px;
    }
    .product-block__feature-col {
        display: contents;
    }
    .product-block__feature--lg,
    .product-block__feature--md,
    .product-block__feature--sm {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        flex: none;
        min-height: 0;
        padding: 0;
    }

    .bundle-wrapper { padding: 48px 16px; }
    .bundle-wrapper__title { font-size: 24px; }
    .bundle-wrapper__subtitle { font-size: 18px; line-height: 1.4; }
    .mo-only { display: inline; }


    /* Tab：横向并排胶囊 */
    .bundle-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 auto 24px;
        max-width: none;
        width: 70%;
    }
    .bundle-tabs__btn {
        flex: 1;
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 36px;
        padding: 8px 12px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25;
        white-space: normal;       /* 长文案允许换行 */
        word-break: keep-all;
        border-radius: 999px;
    }

    /* 产品：左右并排 — Figma 1141:10512 / 1141:10531 (165×200) */
    .bundle-panel,
    .bundle-products {
        overflow: visible;
    }

    .bundle-products {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
    }

    .bundle-product {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        max-width: 165px;
        width: auto;
        height: 200px;
        min-height: 200px;
        padding: 0;
        border-radius: 12px;
        box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }

    /* 主图区：144px（200 − 56） */
    .bundle-product__img {
        position: relative;
        flex: 0 0 144px;
        height: 144px;
        min-height: 144px;
        padding: 0;
        background: #fff;
        overflow: hidden;
        box-sizing: border-box;
       
    }
    .bundle-product__img > img:first-of-type {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 140px;
        height: 140px;
        max-width: 140px;
        max-height: 140px;
        object-fit: contain;
        z-index: 1;
    }

    /* 赠品：42×42（图片自带「사은품」文案） */
    .bundle-product__gift {
        right: 6px;
        bottom: 6px;
        width: 42px;
        height: 42px;
        border-radius: 35px;
        background: #e9eef6;
        justify-content: center;
        z-index: 2;
    }
    .bundle-product__gift img {
        width: 100%;
        height: 100%;
        padding: 0;
        object-fit: contain;
        box-sizing: border-box;
    }

    /* 蓝条：Figma 10832:2809 / 2831 固定 56px；色点上、尺码下 */
    .bundle-product__attrs {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        flex: 0 0 56px;
        gap: 2px;
        height: 56px;
        min-height: 56px;
        padding: 5px 13px;
        background: #91aac5;
        overflow: visible;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }
    .bundle-product__attrs:not(:has(.product-block__attr--size)) {
        padding: 14px 12px;
        gap: 0;
    }

    .bundle-product .product-block__attr {
        align-items: center;
        overflow: visible;
    }

    /* 옵션 tip：蓝条下方；内容右移避免左侧裁切，三角位置保持 */
    .bundle-product .product-block__option-tip {
        top: calc(100% + 6px);
        bottom: auto;
        left: 50%;
        transform: translateX(calc(-50% + 39px));
        z-index: 60;
        max-width: 160px;
        padding: 8px 10px;
        font-size: 12px;
        white-space: normal;
        word-break: keep-all;
    }
    .bundle-product .product-block__option-tip::before {
        top: auto;
        bottom: 100%;
        left: calc(50% - 39px);
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #fff;
        border-top-color: transparent;
        filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
    }

    .bundle-products {
        position: relative;
        z-index: 20;
    }

    .bundle-product.is-option-tip-open {
        overflow: visible;
        z-index: 50;
    }
    .bundle-product.is-option-tip-open .bundle-product__attrs {
        overflow: visible;
        z-index: 60;
    }
    .bundle-product.is-option-tip-open .product-block__attr.is-tip-open {
        z-index: 61;
    }

    .bundle-footer {
        position: relative;
        z-index: 1;
    }

    .bundle-product .product-block__colors {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .bundle-product .product-block__color-swatch {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .bundle-product .product-block__color-swatch > span {
        width: 18px;
        height: 18px;
    }

    .bundle-product .product-block__tags {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .bundle-product .product-block__tag {
        height: 20px;
        min-height: 20px;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3;
        color: #8d8d8d;
        background: #f7f7f7;
        border-radius: 4px;
        white-space: nowrap;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .bundle-product .product-block__tag[data-size="standard"] {
        width: 52px;
    }
    .bundle-product .product-block__tag[data-size="mini"] {
        width: 34px;
    }
    .bundle-product .product-block__tag.is-active {
        background: #fff8f5;
        border-color: #ffb688;
        color: #ff7a3d;
        font-weight: 500;
    }

    /* 提示气泡 */
    .bundle-product__gift-tip {
        margin: 0;
        padding: 6px 8px;
        background: #fff;
        font-size: 10px;
        line-height: 1.35;
        color: #666;
        text-align: center;
        border-top: 1px solid #f0f0f0;
        word-break: keep-all;
    }

    /* 单价 */
    .bundle-product__price {
        margin: 0;
        padding: 6px 8px 10px;
        background: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        color: #0A0A0A;
        text-align: center;
    }

    /* 中间 + 号 */
    .bundle-products__plus {
        flex-shrink: 0;
        align-self: center;
        margin: 0 -2px;
    }
    .bundle-products__plus svg {
        width: 17px;
        height: 17px;
    }

    .bundle-price__sale {
        font-size: 18px;
        color: #050505;
    }
    .bundle-price__origin { font-size: 13px; }

    /* bundle-actions：M — Figma 2924:6352 双按钮各 114×40，gap 12 */
    .bundle-actions {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 12px;
        width: 100%;
        max-width: none;
        padding-bottom: 36px;
        position: relative;
        box-sizing: border-box;
    }

    .bundle-actions > .bundle-btn--primary,
    .bundle-actions > .bundle-npay-wrap {
        flex: 0 0 114px;
        width: 114px;
        min-width: 114px;
        max-width: 114px;
    }

    .bundle-actions .bundle-btn {
        width: 114px;
        height: 40px;
        min-height: 40px;
        padding: 0 12px;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
        border-radius: 4px;
    }

    .bundle-npay-wrap {
        flex: 0 0 114px;
        width: 114px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .bundle-npay-wrap .bundle-btn--npay,
    .bundle-npay-btn-box {
        width: 114px;
        height: 40px;
        min-height: 40px;
    }

    .bundle-npay-wrap .bundle-btn--npay {
        padding: 0;
    }

    .bundle-npay-visual svg {
        width: 59px;
        height: 17px;
    }

    /* N pay 气泡：按钮正下方居中 + 上箭头（Figma / 设计参考图） */
    .bundle-npay-wrap.is-always-visible .bubble-content {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: calc(100% + 6px);
        width: max-content;
        max-width: min(260px, calc(100vw - 24px));
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.4;
        white-space: nowrap;
        text-align: center;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
        z-index: 20;
    }

    .bundle-npay-wrap.is-always-visible .bubble-content::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #fff;
    }

    .bundle-npay-wrap.is-always-visible .bubble-text {
        font-size: 12px;
        line-height: 1.4;
        color: #0A0A0A;
        white-space: nowrap;
    }

    /* 유의사항：按钮下方居中一行 */
    .bundle-notice {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 4px;
    }

    .bundle-footer {
        margin-top: 28px;
        gap: 12px;
    }

    .points-survey-wrapper__title { font-size: 24px; }
    .points-survey-card {
        flex-direction: column;
        padding: 24px 20px;
        overflow: visible;
    }
    .points-survey-card__body,
    .points-survey-card__footer,
    .points-survey-privacy-row,
    .points-survey-btn-wrap {
        overflow: visible;
    }
    .points-survey-agree-bubble,
    .points-survey-login-bubble {
        z-index: 50;
    }
    /* ── Survey modal M — Figma 757:963 / 889:1064 / 1680:1877 ── */
    .survey-modal {
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    .survey-modal__dialog {
        width: 100%;
        max-width: 343px;
        max-height: 90vh;
        align-self: center;
        margin: 0 auto;
        padding: 30px 16px 24px;
        border-radius: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .survey-modal__close {
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .survey-modal__steps {
        margin-bottom: 24px;
    }
    .survey-modal__step {
        width: 36px;
        height: 36px;
        font-size: 19px;
        border-radius: 18px;
        box-shadow: 0 0 10.8px 0 rgba(232, 232, 232, 0.3);
    }
    .survey-modal__step.is-active {
        box-shadow: 0 0 10.8px 0 rgba(255, 157, 112, 0.3);
    }
    .survey-modal__step-line {
        width: 64px;
    }
    #surveyModalTitle,
    .survey-modal__question {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4;
        margin-bottom: 24px;
    }

    /* Step1：竖排双卡 311×142 / gap 12 */
    .survey-modal__categories {
        flex-direction: column;
        gap: 12px;
    }
    .survey-modal__category {
        flex: none;
        width: 100%;
        height: 142px;
        border-radius: 6px;
    }

    /* Step2：选项 12px 字号 / checkbox 18 */
    .survey-modal__options {
        gap: 12px;
    }
    .survey-modal__option {
        padding: 12px;
        gap: 12px;
        border-radius: 6px;
    }
    .survey-modal__radio {
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }
    .survey-modal__option input:checked + .survey-modal__radio {
        background-size: 12px;
    }
    .survey-modal__option-text {
        font-size: 12px;
        line-height: 1.3;
    }
    .survey-modal__submit {
        width: 114px;
        height: 40px;
        margin-top: 24px;
        padding: 0 24px;
        font-size: 15px;
        letter-spacing: -0.6px;
        border-radius: 4px;
    }

    /* Success M — Figma 1680:1877 */
    .survey-success-modal {
        padding: 16px;
    }
    .survey-success-modal__dialog {
        max-width: 343px;
        min-height: 240px;
        padding: 48px 16px 40px;
        border-radius: 12px;
    }
    .survey-success-modal__close {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .survey-success-modal__title {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 12px;
    }
    .survey-success-modal__desc {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 24px;
    }
    .survey-success-modal__btn {
        width: 133px;
        min-width: 133px;
        height: 40px;
        padding: 0 12px;
        font-size: 15px;
        letter-spacing: -0.6px;
        border-radius: 4px;
    }

    .points-survey-wrapper {
        padding: 48px 16px;
        background: #F7FAFD;
    }
    .points-survey-wrapper__title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .points-survey-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 20px 0px 0;
        border-radius: 16px;
    }

    /* M 端：白色内框 */
    .points-survey-card__body {
        max-width: none;
        padding: 24px 20px 20px;
        border-radius: 12px;
        background: transparent;
        text-align: center;
    }

    .points-survey-card__desc {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .points-survey-card__btn {
        width: 114px;
        min-width: 114px;
        height: 40px;
        padding: 0 10px;
        font-size: 15px;
        line-height: 24px;
        font-weight: 400;
        letter-spacing: -0.6px;
    }

    .points-survey-card__footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        margin-top: 16px;
        gap: 16px;
    }
    .points-survey-privacy-row {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    /* 插图在底部，仍在浅蓝区域内 */
    .points-survey-card__visual {
        width: 100%;
        max-width: none;
        padding: 8px 0 16px;
    }
    .points-survey-card__visual img {
        max-width: 260px;
        margin: 0 auto;
    }
    .points-survey-notice__btn,
    .points-survey-agree__text {
        font-size: 13px;
    }
    .points-survey-card__footer .notice-wrap {
        font-size: 12px;
        gap: 6px;
    }
    .points-survey-card__footer .notice-wrap img {
        width: 12px;
        height: 12px;
    }

} /* /@media screen and (max-width: 999px) */

@media (max-width: 999px) {

    /* 1. bundle CTA M — Figma 2924:6352：两按钮等宽 114×40 */
    .bundle-actions {
        width: auto;
        max-width: none;
        margin: 0 auto;
        padding-bottom: 44px; /* 常驻气泡高度 */
        gap: 12px;
        align-items: flex-start;
        justify-content: center;
    }

    .bundle-actions > .bundle-btn--primary,
    .bundle-actions > .bundle-npay-wrap {
        flex: 0 0 114px;
        width: 114px;
        min-width: 114px;
        max-width: 114px;
    }

    .bundle-actions .bundle-btn,
    .bundle-npay-wrap .bundle-btn--npay,
    .bundle-npay-btn-box {
        width: 114px;
        height: 40px;
        min-height: 40px;
    }

    /* 2. N pay 气泡 M — 对齐第二张图：按钮正下方居中 + 上箭头 */
    .bundle-npay-wrap.is-always-visible .bubble-content {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: calc(100% + 6px);
        width: max-content;
        max-width: min(260px, calc(100vw - 24px));
        padding: 8px 12px;
        white-space: nowrap;
        text-align: center;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
        z-index: 20;
    }

    .bundle-npay-wrap.is-always-visible .bubble-content::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #fff;
    }

    .bundle-npay-wrap.is-always-visible .bubble-text {
        font-size: 12px;
        line-height: 1.4;
        color: #0A0A0A;
        white-space: nowrap;
    }

    /* 3. notice 与 N pay 气泡同一行：左 유의사항 / 右 气泡 */
    .bundle-notice {
        width: 240px; /* 114 + 12 + 114 */
        max-width: none;
        margin: -40px auto 0;
        display: flex;
        justify-content: flex-start;
        position: relative;
        z-index: 1;
    }

    .bundle-footer {
        gap: 8px;
    }

    .bundle-wrapper__text{
        margin-bottom: 32px;
    }
}
/* ══════════════════════════════════════════════════════════════
   유의사항 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: #666;
    line-height: 18px;
    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; }
.bubble-content .bubble-list a.bubble-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 헤더·닫기 버튼: 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;
    }

    /* bundle 유의사항 PC — Figma 625:754 트리거 기준 가운데 정렬
       mo-left / notice-wrap left:8px 오버라이드 */
    .bundle-notice .notice-wrap .bubble-content,
    .bundle-notice .notice-wrap .bubble-content.mo-left {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .bundle-notice .notice-wrap .bubble-content::after,
    .bundle-notice .notice-wrap .bubble-content.mo-left::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Mobile (<1000px): as-modal is-active → position:fixed 모달 */
@media (max-width: 999px) {
    body.bubble-modal-open {
        overflow: hidden;
    }

    /* 자세히 보기 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; }

    /* bundle 유의사항：PC 492px 드롭다운이 화면을 넘치지 않도록 뷰포트 안으로 제한
       as-modal.is-active 시 아래 fixed 모달 규칙이 !important 로 덮어씀 */
    .bundle-notice .notice-wrap .bubble-content,
    .bundle-notice .notice-wrap .bubble-content.mo-left {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
        padding: 16px;
    }
    .bundle-notice .notice-wrap .bubble-content.mo-left::after {
        left: 24px;
        transform: none;
    }

    .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: 90% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 20001 !important;
        padding: 22px 16px 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }
    .bubble-wrapper.as-modal.is-active .bubble-overlay {
        display: block !important;
        z-index: 20000 !important;
    }
    .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-start;
        align-items: center;
        margin-bottom: 12px;
        padding-right: 28px;
        font-size: 16px;
        font-weight: 500;
        color: #0A0A0A;
    }
    .bubble-wrapper.as-modal.is-active .close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        color: #737373;
        z-index: 2;
    }
    .bubble-wrapper.as-modal.is-active .close-btn svg {
        display: block;
        width: 14px;
        height: 14px;
    }

    /* points-survey 유의사항 M 모달 — 내용 폭 100%（자세히 보기는 일반 버블） */
    .points-survey-wrapper .notice-wrap.as-modal.is-active .bubble-list {
        display: block;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-inline-start: 0 !important;
        list-style: none !important;
        box-sizing: border-box;
    }
    .points-survey-wrapper .notice-wrap.as-modal.is-active .dot {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 18px;
        text-align: left;
        word-break: break-word;
        overflow-wrap: anywhere;
        margin-bottom: 6px;
        padding-left: 15px;
        list-style: none;
    }

    /* bundle / survey 유의사항 모달 공통:
       sticky 내비·옵션팁보다 오버레이가 위에 오도록 */
    body.bubble-modal-open .product-nav,
    body.bubble-modal-open .product-nav.is-fixed {
        z-index: 1;
    }
    body.bubble-modal-open .bundle-products {
        z-index: 0;
    }
    body.bubble-modal-open .bundle-product.is-option-tip-open,
    body.bubble-modal-open .bundle-product.is-option-tip-open .bundle-product__attrs,
    body.bubble-modal-open .bundle-product .product-block__attr.is-tip-open {
        z-index: 0 !important;
    }

    /* survey 등 기타 모달: footer 낮게 유지 → N pay 상주 버블이 오버레이 아래 */
    body.bubble-modal-open .bundle-footer {
        z-index: 1;
    }
    body.bubble-modal-open .bundle-npay-wrap.is-always-visible .bubble-content {
        z-index: 1 !important;
    }

    /* bundle 유의사항 모달만: footer 스택 올려 fixed 모달이 페이지 위에 뜨게 함.
       동시에 액션/상주 버블은 오버레이(20000) 아래로 유지 */
    body.bubble-modal-bundle .bundle-footer {
        z-index: 20010;
    }
    body.bubble-modal-bundle .bundle-actions,
    body.bubble-modal-bundle .bundle-npay-wrap,
    body.bubble-modal-bundle .bundle-npay-btn-box {
        z-index: 1;
        position: relative;
    }
    body.bubble-modal-bundle .bundle-npay-wrap.is-always-visible .bubble-content {
        z-index: 1 !important;
    }
    body.bubble-modal-bundle .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-overlay {
        z-index: 20000 !important;
    }
    body.bubble-modal-bundle .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-content {
        z-index: 20001 !important;
    }

    .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-content {
        width: 90% !important;
        max-width: 90% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 75vh !important;
        padding: 22px 16px 16px !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-content::-webkit-scrollbar {
        width: 4px;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-content::-webkit-scrollbar-thumb {
        background: #cfcfcf;
        border-radius: 4px;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-header {
        display: block;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-header span {
        display: none;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        color: #737373;
        z-index: 2;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .close-btn svg {
        display: block;
        width: 14px;
        height: 14px;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .bubble-list {
        display: block;
        width: 100% !important;
        max-width: none !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .bundle-notice .bubble-wrapper.as-modal.is-active .dot {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 18px;
        color: #404040;
        word-break: break-word;
        overflow-wrap: anywhere;
        margin-bottom: 6px;
    }
}



@media (max-width: 365px) {
    .bundle-product__attrs {
        gap: 2px;
        padding-left: 8px;
        padding-right: 8px;
    }
}