@font-face {
    font-family: 'Shokz Sans Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://static.shokz.co.kr/fonts/DisplaySans/ShokzSansDisplay-Medium.woff2?v=2609071820') format('woff2');
}

@font-face {
    font-family: 'Shokz Sans Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://static.shokz.co.kr/fonts/DisplaySans/ShokzSansDisplay-Medium.woff2?v=2609071820') format('woff2');
}

@font-face {
    font-family: 'Shokz Sans Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://static.shokz.co.kr/fonts/DisplaySans/ShokzSansText-Regular.woff2?v=2609071820') format('woff2');
}

@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://static.shokz.co.kr/fonts/NotoSansKR/NotoSansKR-Regular.woff2?v=2609071820') format('woff2');
}

.zq-page {
    --zq-cta: #ff7a3d;
    --zq-cta-soft: #ffb688;
    --zq-price: #ff4d0a;
    --zq-ink: #050505;
    --zq-wine: #500e36;
    --zq-wine-2: #6e0303;
    --zq-cream: #edddc6;
    --zq-title: #f8f0eb;
    --zq-max: 1200px;
    --zq-radius: 6px;
    color: var(--zq-ink);
    font-family: 'Pretendard', 'NotoSansKR', 'Noto Sans KR', sans-serif;
}

.zq-page img {
    max-width: 100%;
    vertical-align: top;
}

.zq-page button {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.zq-pc { display: block; }
.zq-mo { display: none; }

/* banner */
.zq-banner {
    position: relative;
    width: 100%;
    height: 620px;
    overflow: hidden;
    background: #f3b8b0;
}

.zq-banner-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.zq-banner-photo picture {
    display: block;
    position: absolute;
    inset: 0;
}

.zq-banner-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prefer the right-side family/products; left is covered by HTML copy. */
    object-position: 70% center;
}

.zq-banner-wash {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.zq-banner-content {
    position: relative;
    z-index: 1;
    max-width: var(--zq-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.zq-banner-info {
    width: 420px;
    max-width: 100%;
}

.zq-banner-kicker {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 500;
    line-height: 41px;
    background: linear-gradient(83deg, #500e36 5%, #6e0303 99%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.zq-banner-title-img {
    width: 272px;
    height: auto;
    margin-bottom: 28px;
}

.zq-banner-desc,
.zq-banner-date {
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
    background: linear-gradient(85deg, #500e36 7%, #6e0303 76%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.zq-banner-desc { margin-bottom: 16px; }
.zq-banner-date { margin-bottom: 28px; }

.zq-banner-btn,
.zq-banner-btn:link,
.zq-banner-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 202px;
    height: 48px;
    border-radius: 4px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: var(--zq-cta);
    font-size: 17px;
    letter-spacing: -0.68px;
}

.zq-banner-btn.zq-mo {
    display: none;
}

/* nav — Figma 4234:5628 锚点 tab, 1440x51 */
.zq-nav-wrap {
    height: 51px;
}

.zq-nav {
    position: relative;
    top: auto;
    z-index: 4100;
    box-sizing: border-box;
    height: 51px;
    padding: 8px 120px 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.zq-nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.zq-nav-inner {
    width: 996px;
    max-width: 100%;
    height: 43px;
    display: flex;
    align-items: flex-end;
}

.zq-nav-item {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-bottom: 16px;
    border-bottom: 2px solid transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.68px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

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

/* common section */
.zq-section {
    padding: 48px 0;
}

.zq-sec {
    scroll-margin-top: 51px;
}

.zq-section-inner {
    max-width: var(--zq-max);
    margin: 0 auto;
    padding: 0;
}

.zq-title {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    text-align: center;
    letter-spacing: 0.16px;
    overflow: visible;
}

.zq-title span {
    display: inline-block;
    padding: 0.18em 0 0.06em;
    margin-top: -0.12em;
    overflow: visible;
    background: linear-gradient(170deg, #f8f0eb 8%, #ffe6c3 78%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.zq-title-dark span {
    background: linear-gradient(86.19deg, #500e36 5.23%, #6e0303 99.4%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.zq-bundle .zq-title,
.zq-gift .zq-title {
    font-family: 'Shokz Sans Display', 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 56px;
    letter-spacing: 0;
}

.zq-desc {
    margin: 16px 0 0;
    color: var(--zq-cream);
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.zq-desc-dark {
    color: #2f2f2f;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
}

/* products */
.zq-products {
    background: linear-gradient(180deg, #8f73c4 0%, #e8ced7 100%);
}

.zq-cats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 32px 0;
}

.zq-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 16px;
    border-radius: 99px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    background: transparent;
}

.zq-cat.active {
    border-color: #fff;
    color: var(--zq-cta);
    font-size: 20px;
    background: #fff;
}

.zq-product-content { overflow: visible; }

.zq-product-panel { display: none; }
.zq-product-panel.show { display: block; overflow: visible; }
.zq-product-panel--merged { display: none !important; }

@media (min-width: 1000px) {
    .zq-swiper-center.show .swiper-wrapper {
        justify-content: center;
    }
}

@media (min-width: 1000px) {
    .zq-products {
        overflow-x: clip;
    }

    .zq-products .zq-product-panel.show,
    .zq-products .zq-product-panel.show .swiper-wrapper {
        overflow: visible;
    }
}

.zq-product-card {
    position: relative;
    background: #fff;
    border-radius: var(--zq-radius);
    box-shadow: 0 4px 16px 0 rgba(17, 17, 26, 0.10), 0 8px 32px 0 rgba(17, 17, 26, 0.05);
    overflow: hidden;
    padding-bottom: 24px;
}

.zq-badge {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 3;
    width: 86px;
    height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
}

.zq-badge img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zq-badge span {
    position: relative;
    z-index: 1;
    padding-top: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(-12deg, #ff9c55 18%, #be5000 62%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.zq-badge em {
    font-style: normal;
    font-size: 18px;
}

.zq-badge-text {
    width: auto;
    min-width: 56px;
    padding: 0 10px;
    background: linear-gradient(-12deg, #ff9c55 18%, #be5000 62%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0 0 6px 6px;
    align-items: center;
    -webkit-text-fill-color: #fff;
}

.zq-pic {
    position: relative;
    width: 100%;
    height: 274px;
    cursor: pointer;
    overflow: hidden;
}

.zq-pic-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 274px;
    object-fit: cover;
    object-position: bottom;
}

.zq-product-pic {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    max-width: none;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: center;
}

.zq-gift-bar {
    position: absolute;
    left: 24px;
    right: 24px;
    width: auto;
    height: 40px;
    bottom: 18px;
    top: auto;
    z-index: 2;
    overflow: visible;
    transform: none;
    color: var(--zq-cta);
    font-size: 13px;
    line-height: 21px;
    pointer-events: none;
}

.zq-gift-bar-skin {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff4f0;
    background-image: url("https://static.shokz.co.kr/resource/2026/08/24/gift-bar-icon_6a8bf2207ca1f.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 336px 40px;
}

.zq-page .zq-gift-bar-wave {
    position: absolute;
    right: 0;
    top: 0;
    width: 87px;
    height: 40px;
    max-width: none;
    transform: scaleX(-1);
}

.zq-gift-bar-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 243px;
    height: 32px;
    margin: 4px 0 4px 12px;
    padding-left: 28px;
    color: #ff7a3d;
    white-space: nowrap;
}

.zq-gift-bar-text--2line {
    white-space: normal;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    line-height: 1.2;
}

.zq-gift-bar-line {
    display: block;
}

.zq-page .zq-gift-bar-pic {
    position: absolute;
    left: auto;
    right: -5px;
    top: -20px;
    z-index: 2;
    width: 79px;
    height: 79px;
    max-width: none;
    object-fit: contain;
}

.zq-page .zq-gift-bar-pic--tote {
    left: auto;
    right: 5px;
    top: -15px;
    width: 58px;
    height: 54px;
}

.zq-info {
    padding: 24px;
}

.zq-name {
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0;
    color: #050505;
}

.zq-colors {
    position: relative;
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.zq-color {
    position: relative;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.zq-color span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.zq-color.is-active {
    border-color: var(--zq-cta);
}

.zq-color.is-unavailable {
    display: none;
}

.zq-type.is-unavailable {
    visibility: hidden;
    pointer-events: none;
}

.zq-type-block {
    display: flex;
    gap: 20px;
    min-height: 0;
    margin-bottom: 16px;
}

.zq-type-title {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 18px;
    color: #a3a3a3;
}

.zq-types {
    position: relative;
    display: flex;
    gap: 6px;
}

.zq-type {
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #f7f7f7;
    color: #a3a3a3;
    font-size: 13px;
    line-height: 21px;
    letter-spacing: 0;
    cursor: pointer;
}

.zq-type.is-active {
    color: var(--zq-cta);
    border: 1px solid var(--zq-cta-soft);
    background: #fff8f5;
}

.zq-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.zq-price-new {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--zq-price);
}

.zq-price-old {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.32px;
    color: #0a0a0a;
    opacity: 0.45;
    text-decoration: line-through;
}

.zq-btns {
    display: flex;
    gap: 12px;
}

.zq-btn-skip,
.zq-btn-buy {
    flex: 1;
    height: 40px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
}

.zq-btn-skip {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--zq-cta);
    color: var(--zq-cta);
    background: #fff;
    cursor: pointer;
}

.zq-btn-buy {
    color: #fff;
    background: var(--zq-cta);
}

.zq-swiper-page { margin-top: 24px; }

.zq-product-swiper.zq-swiper-no-nav .zq-swiper-page {
    display: none;
}

.zq-swiper-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
}

.zq-swiper-switch .swiper-pagination {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    text-align: left;
}

.zq-swiper-switch .swiper-pagination-bullet {
    margin: 0;
    width: 8px;
    height: 8px;
    background: #0a0a0a;
    opacity: 0.3;
    border-radius: 10px;
    flex-shrink: 0;
}

.zq-swiper-switch .swiper-pagination-bullet-active {
    width: 36px;
    height: 8px;
    border-radius: 10px;
    opacity: 0.75;
}

.zq-swiper-btns {
    display: flex;
    gap: 12px;
}

.zq-swiper-btns button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    backdrop-filter: blur(2px);
}

.zq-swiper-btns button::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-top: 2px solid #0a0a0a;
    border-right: 2px solid #0a0a0a;
}

.zq-swiper-btns .button-prev::before { transform: rotate(-135deg); }
.zq-swiper-btns .button-next::before { transform: rotate(45deg); }

.zq-swiper-btns button.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* npay — Figma 4918:3986, 1440x296 */
.zq-npay {
    position: relative;
    box-sizing: border-box;
    height: 296px;
    padding: 48px 0;
    background: linear-gradient(180deg, #e8ced7 0%, #ffe4da 74.324%);
    overflow: hidden;
}

.zq-npay-inner {
    position: relative;
    width: 620px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.zq-npay-cloud {
    position: absolute;
    top: 0;
    width: 708px;
    height: 200px;
    max-width: none;
    pointer-events: none;
    z-index: 0;
}

.zq-npay-cloud-l {
    left: calc(50% - 481.75px);
    transform: translateX(-50%) rotate(180deg) scaleY(-1) scaleX(-1);
}

.zq-npay-cloud-r {
    left: calc(50% + 481.75px);
    transform: translateX(-50%) rotate(180deg) scaleY(-1);
}

.zq-npay-copy {
    position: relative;
    z-index: 2;
    width: 319px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.zq-npay-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 40px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 99px;
    background:
        radial-gradient(circle at 50% 50%, rgba(252, 237, 217, 0.4) 0%, #fff 70%),
        #fff;
}

.zq-npay-logos img {
    height: 16px;
    width: auto;
}

.zq-npay-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.zq-npay-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.zq-npay-title img {
    width: 90px;
    height: 28px;
    object-fit: contain;
}

.zq-npay-title span {
    font-family: 'Shokz Sans Display', 'Pretendard', sans-serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 41px;
    letter-spacing: 0;
    color: #0a0a0a;
}

.zq-npay-desc {
    margin: 0;
    font-family: 'Shokz Sans Display', 'Pretendard', sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0;
    color: #404040;
    text-align: center;
}

.zq-npay-note {
    margin: 0;
    font-family: 'Shokz Sans Text', 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.6px;
    line-height: 24px;
    color: #737373;
    text-align: center;
}

.zq-npay-visual {
    position: relative;
    z-index: 2;
    width: 253px;
    height: 200px;
    flex-shrink: 0;
    overflow: hidden;
}

.zq-npay-coupon-wrap {
    position: absolute;
    left: -25px;
    top: -40px;
    width: 280px;
    height: 249px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(27.97deg);
}

.zq-npay-coupon {
    width: 232px;
    height: 159px;
    max-width: none;
}

.zq-npay-pct {
    position: absolute;
    left: 67px;
    top: 63px;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, #6c6cc9, #af84ce);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateX(-50%) rotate(0.81deg);
}

.zq-npay-arrow {
    position: absolute;
    left: 103px;
    top: 71px;
    width: 38px;
    height: 36px;
    transform: rotate(2.03deg);
}

.zq-npay-crane {
    position: absolute;
    left: 493px;
    top: -51px;
    z-index: 3;
    width: 380px;
    height: 143px;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}

/* bundle */
.zq-bundle {
    background: linear-gradient(180deg, #ffe4da 0%, #f7cdc8 100%);
    padding: 32px 0 96px;
}

.zq-bundle-tabs {
    display: flex;
    justify-content: center;
    gap: 42px;
    margin: 48px 0 64px;
}

.zq-bundle-tab {
    width: 350px;
    max-width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    border: 1.5px solid #000;
    font-size: 24px;
    cursor: pointer;
    background: transparent;
}

.zq-bundle-tab.active {
    background: #000;
    color: #fff;
    border-color: #000;
    font-weight: 500;
}

.zq-bundle-panel { display: none; }
.zq-bundle-panel.show { display: block; }

.zq-bundle-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 41px;
}

.zq-bundle-item {
    position: relative;
    width: 436px;
    max-width: 100%;
    height: 318px;
    border-radius: 12px;
    overflow: visible;
    background: linear-gradient(180deg, #fffef5 0%, #fcedd9 100%);
    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.08);
}

.zq-bundle-pic {
    display: block;
    width: 220px;
    height: 220px;
    margin: 12px auto 0;
    object-fit: contain;
}

.zq-bundle-name {
    position: absolute;
    left: 0;
    right: 0;
    top: 200px;
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zq-bundle-item:has(.zq-bundle-gift:not(.is-hidden)) .zq-bundle-name {
    left: 124px;
    right: 124px;
}

.zq-bundle-gift {
    position: absolute;
    right: 24px;
    top: 138px;
    width: 92px;
    height: 92px;
    border-radius: 80px;
    background: rgba(248, 234, 233, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
    box-sizing: border-box;
}

.zq-bundle-gift.is-hidden {
    display: none;
}

.zq-bundle-gift img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin-top: -8px;
}

/* 번들 토트백 — Figma 4994:1398 / 5091:1572 */
.zq-page .zq-bundle-gift-pic--tote {
    position: absolute;
    left: 50%;
    top: 35.45px;
    width: 55.48px;
    height: 52.144px;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
}

.zq-bundle-gift:has(.zq-bundle-gift-pic--tote) {
    padding-top: 0;
}

.zq-bundle-gift span {
    position: absolute;
    left: 0;
    right: 0;
    top: 62px;
    margin-top: 0;
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
}

.zq-bundle-gift:has(.zq-bundle-gift-pic--tote) span {
    top: 66px;
    left: 5px;
    right: 5px;
}

.zq-bundle-colors {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(173, 142, 183, 0.8);
    backdrop-filter: blur(22px);
    border-radius: 0 0 12px 12px;
}

.zq-bundle-sizes {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 2px;
}

.zq-bundle-item .zq-type {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-size: 12px;
    line-height: 28px;
}

.zq-bundle-item .zq-type.is-active {
    background: #fff;
    color: #111;
    box-shadow: 0 0 0 1.5px var(--zq-cta);
}

.zq-bundle-colors .zq-color span {
    width: 22px;
    height: 22px;
}

.zq-bundle-plus {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.zq-bundle-buy {
    margin-top: 48px;
    text-align: center;
}

.zq-bundle-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.zq-bundle-price-new {
    font-size: 34px;
    font-weight: 500;
    line-height: 51px;
}

.zq-bundle-price-old {
    font-size: 27px;
    line-height: 36px;
    color: #8d8d8d;
    text-decoration: line-through;
}

.zq-bundle-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    overflow: visible;
}

.zq-btn-black,
.zq-btn-npay {
    width: 228px;
    height: 48px;
    border-radius: 4px;
    font-size: 17px;
    letter-spacing: -0.68px;
}

.zq-btn-black,
.zq-btn-black:link,
.zq-btn-black:visited,
.zq-gift-btn,
.zq-gift-btn:link,
.zq-gift-btn:visited {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: #050505;
}

.zq-bundle-npay-btn-box {
    display: flex;
    flex: none;
    position: relative;
    overflow: visible;
}

.zq-btn-npay {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00de5a;
}

.zq-btn-npay > img {
    height: 22px;
    width: auto;
    max-width: none;
}

.zq-bundle-npay-btn-box .zq-npay-tip {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 三角标 left:15px、宽 16px，中心在气泡内 23px，对齐按钮水平中心 */
    transform: translateX(-23px);
    box-sizing: border-box;
    width: 103px;
    height: 44px;
    padding: 0 8px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04), 0 18px 24px rgba(0, 0, 0, 0.08);
    color: #2f2f2f;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.4px;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}

.zq-npay-tip-arrow {
    position: absolute;
    left: 15px;
    top: -8px;
    width: 16px;
    height: 8px;
    transform: rotate(180deg);
}

.zq-bundle-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 100%;
    gap: 0;
    margin-top: 0;
    color: #404040;
    font-size: 14px;
    pointer-events: none;
    overflow-anchor: none;
}

/* Figma 4913:3804 Expand&close — 32px hit = 16px glyph + 8px around */
.zq-bundle-notice-hit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: content-box;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.zq-bundle-notice-hit > img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* gift */
.zq-gift {
    background: linear-gradient(180deg, #f7cdc8 0%, #f3c4c0 100%);
    padding: 32px 0 96px;
}

.zq-gift-board {
    position: relative;
    max-width: 996px;
    margin: 32px auto 0;
    padding: 32px 64px;
    border-radius: 12px;
    background: #fef8f0;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 64px;
}

.zq-gift-crane {
    position: absolute;
    left: 64px;
    top: -200px;
    z-index: 2;
    width: 290px;
    height: 240px;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}

.zq-gift-grid {
    display: contents;
}

.zq-gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.zq-gift-label {
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(158deg, #f8f0eb 8%, #ffe6c3 78%);
    color: #3f0c2c;
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
}

.zq-gift-desc {
    margin: 8px 0 8px;
    color: #2f2f2f;
    font-size: 15px;
    letter-spacing: -0.6px;
    line-height: 24px;
}

.zq-gift-grid > .zq-gift-item:nth-child(3n+2) .zq-gift-label,
.zq-gift-grid > .zq-gift-item:nth-child(3n+2) .zq-gift-desc {
    white-space: nowrap;
}

.zq-gift-thumbs {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.zq-gift-thumb {
    position: relative;
    width: 118px;
    height: 118px;
    border-radius: 102px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zq-gift-thumb img {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

/* 底部赠品托特包 — Figma 7141:1490（118×118，实图 86.2×81.0 @ 15.9/14.6） */
.zq-page .zq-gift-thumb img.zq-gift-thumb-pic--tote {
    width: 86px;
    height: 86px;
    padding: 11px 12px 16px 12px;
    box-sizing: border-box;
}

.zq-gift-thumb.is-soldout img {
    opacity: 0.45;
}

.zq-gift-thumb.is-soldout::after {
    content: '증정 완료';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 47, 47, 0.55);
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.4px;
    line-height: 28px;
    text-align: center;
}

.zq-gift-deco {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 361px;
    height: 200px;
    justify-self: auto;
    pointer-events: none;
}

.zq-gift-deco img {
    position: absolute;
    object-fit: contain;
}

.zq-gift-deco img:nth-child(1) {
    left: 201px;
    top: auto;
    bottom: 0;
    width: 160px;
    height: 160px;
    z-index: 1;
}

.zq-gift-deco img:nth-child(2) {
    left: 0;
    top: auto;
    bottom: 0;
    width: 167px;
    height: 167px;
    z-index: 2;
}

.zq-gift-deco img:nth-child(3) {
    left: 80px;
    top: auto;
    bottom: 0;
    width: 200px;
    height: 200px;
    z-index: 3;
}

.zq-gift-actions {
    margin-top: 32px;
    text-align: center;
}

.zq-gift-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 auto;
    text-decoration: none;
}

.zq-gift-legal {
    margin: 16px 0 0;
    color: #737373;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.6px;
    line-height: 24px;
    text-align: center;
}

/* bubble */
.zq-bubble {
    position: relative;
}

.zq-bubble-overlay { display: none; }

.zq-bubble-content {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: 492px;
    box-sizing: border-box;
    padding: 24px 18px;
    background: #fff;
    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);
    text-align: justify;
    z-index: 20;
    overflow-anchor: none;
}

.zq-bubble.is-active .zq-bubble-content,
.zq-bubble:not(.zq-bundle-notice):hover .zq-bubble-content,
.zq-bundle-notice-hit:hover ~ .zq-bubble-content,
.zq-bundle-notice .zq-bubble-content:hover {
    display: block;
}

.zq-bubble-close {
    display: none;
}

.zq-bubble-arrow {
    position: absolute;
    left: 50%;
    top: -8px;
    width: 16px;
    height: 8px;
    transform: translateX(-50%) rotate(180deg);
}

.zq-bubble-text {
    margin: 0;
    color: #666;
    font-family: 'NotoSansKR', 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    text-align: justify;
    word-break: break-word;
}

/* Figma 4913:3807 / 3806 — 两端对齐只拉词距，不拉字距 */
.zq-bundle-notice .zq-bubble-text.zq-pc,
.zq-bundle-notice .zq-bubble-text.zq-mo {
    flex-direction: column;
    text-align: justify;
    text-justify: inter-word;
    letter-spacing: 0;
    word-spacing: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.zq-bundle-notice .zq-bubble-text.zq-pc {
    display: flex;
    width: 456px;
}

.zq-bundle-notice .zq-bubble-text.zq-pc p,
.zq-bundle-notice .zq-bubble-text.zq-mo p {
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: 18px;
    letter-spacing: 0;
    word-spacing: 0;
    text-align: justify;
    text-justify: inter-word;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.zq-select-tip {
    position: absolute;
    left: 50%;
    top: calc(100% - 14px);
    bottom: auto;
    transform: translateX(-50%);
    z-index: 40;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04), 0 18px 24px rgba(0, 0, 0, 0.08);
    color: #050505;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.zq-select-tip-arrow {
    position: absolute;
    left: 50%;
    top: -8px;
    bottom: auto;
    width: 16px;
    height: 8px;
    transform: translateX(-50%) rotate(180deg);
}

.zq-bundle-notice .zq-bubble-content {
    display: none;
    top: calc(100% + 8px);
    pointer-events: auto;
}

.zq-bundle-notice .zq-bubble-arrow {
    display: block;
}

.zq-bundle-notice-hit:hover ~ .zq-bubble-content,
.zq-bundle-notice .zq-bubble-content:hover {
    display: block;
}

@media (max-width: 999px) {
    .zq-pc { display: none !important; }
    .zq-mo { display: block; }

    .zq-page { overflow-x: hidden; }

    /* banner — Figma 4307:1412, 393x554 (site header is outside) */
    .zq-banner { height: 554px; background: #7152b1; }

    .zq-banner-photo img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
        object-position: center bottom;
    }

    .zq-banner-wash {
        display: block;
        background:
            radial-gradient(ellipse at 95% 46%, rgba(182, 122, 193, 0.4) 0%, rgba(255, 196, 205, 0) 70%),
            linear-gradient(180deg, rgb(113, 82, 177) 24%, rgba(182, 122, 193, 0.9) 61%, rgba(255, 196, 205, 0) 72%);
        opacity: 0.85;
    }

    .zq-banner-content {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 80px 16px 0;
    }

    .zq-banner-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .zq-banner-kicker {
        margin: 0 0 8px;
        font-size: 19px;
        font-weight: 500;
        line-height: 26px;
        background: none;
        -webkit-text-fill-color: #edddc6;
        color: #edddc6;
    }

    .zq-banner-title-img {
        width: 210px;
        height: auto;
        margin-bottom: 16px;
    }

    .zq-banner-desc,
    .zq-banner-date {
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        background: none;
        -webkit-text-fill-color: #edddc6;
        color: #edddc6;
    }

    .zq-banner-desc { margin-bottom: 10px; }
    .zq-banner-date { margin-bottom: 16px; }

    .zq-banner-btn {
        width: 170px;
        height: 40px;
        font-size: 15px;
        letter-spacing: -0.6px;
        text-decoration: none;
        box-sizing: border-box;
    }

    .zq-banner-btn.zq-mo {
        display: flex;
    }

    /* nav — Figma 4306:1109, 393x48 */
    .zq-nav-wrap { height: 48px; }

    .zq-nav {
        height: 48px;
        padding: 8px 16px 0;
    }

    .zq-nav-inner {
        width: 100%;
        height: 40px;
        gap: 16px;
    }

    .zq-nav-item {
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
        padding-bottom: 16px;
    }

    .zq-sec { scroll-margin-top: 48px; }

    .zq-section-inner { padding: 0 16px; }

    .zq-products .zq-section-inner {
        padding: 0 0 0 16px;
    }

    .zq-products .zq-title,
    .zq-products .zq-desc,
    .zq-products .zq-cats,
    .zq-products .zq-swiper-page {
        padding-right: 16px;
    }

    .zq-title {
        font-size: 27px;
        font-weight: 500;
        line-height: 35px;
        letter-spacing: 0;
    }

    .zq-desc {
        margin-top: 8px;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.6px;
    }

    .zq-desc-dark {
        margin-top: 12px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
        color: #2f2f2f;
    }

    /* products */
    .zq-products { padding: 48px 0 36px; }

    .zq-cats {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 15px;
        margin: 16px 0 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .zq-cats::-webkit-scrollbar { display: none; }

    .zq-cat {
        flex-shrink: 0;
        height: auto;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 18px;
    }

    .zq-cat.active {
        font-size: 14px;
        color: var(--zq-cta);
    }

    .zq-product-content { overflow: hidden; }

    .zq-products {
        overflow-x: hidden;
    }

    .zq-product-swiper { overflow: hidden; }

    .zq-slide {
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .zq-product-card {
        width: 100%;
        padding-bottom: 16px;
        box-shadow: 0 4px 16px rgba(17, 17, 26, 0.1), 0 8px 32px rgba(17, 17, 26, 0.05);
    }

    .zq-pic {
        height: 318px;
    }

    .zq-pic-bg {
        height: 100%;
        filter: blur(1px);
    }

    .zq-pic::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(251, 235, 140, 0.2);
        pointer-events: none;
        z-index: 1;
    }

    .zq-product-pic {
        top: 50%;
        left: 50%;
        width: 280px;
        height: 280px;
        z-index: 2;
        transform: translate(-50%, calc(-50% - 12px));
        object-position: center;
    }

    .zq-gift-bar {
        display: flex;
        align-items: center;
        left: 16px;
        right: 16px;
        width: auto;
        top: auto;
        bottom: 16px;
        transform: none;
        font-size: 14px;
        line-height: 18px;
        z-index: 3;
    }

    .zq-gift-bar-skin {
        background-size: auto 32px;
        background-position: -1px center;
        background-repeat: no-repeat;
    }

    .zq-gift-bar-text {
        width: 168px;
        height: 32px;
        margin: 0 0 0 32px;
        padding-left: 0;
        font-size: 13px;
        line-height: 1.2;
        display: flex;
        align-items: center;
    }

    .zq-gift-bar-text--2line {
        font-size: 11px;
        line-height: 1.2;
        gap: 2px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .zq-page .zq-gift-bar-pic {
        left: auto;
        right: -8px;
        top: 50%;
        width: 79px;
        height: 79px;
        transform: translateY(-50%);
    }

    .zq-page .zq-gift-bar-pic--tote {
        left: auto;
        right: 5px;
        top: 50%;
        width: 58px;
        height: 54px;
        transform: translateY(calc(-50% - 7px));
    }

    /* info — Figma 5307:1661 */
    .zq-info { padding: 16px 16px 0; box-sizing: border-box; }

    .zq-name {
        margin: 0 0 16px;
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.16px;
        color: #000;
    }

    .zq-colors { margin-bottom: 12px; }

    .zq-color { padding: 3px; }

    .zq-color span {
        width: 18px;
        height: 18px;
    }

    .zq-type-block {
        gap: 20px;
        min-height: 0;
        margin-bottom: 16px;
    }

    .zq-type-title {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 18px;
        color: #a3a3a3;
        text-decoration: none;
    }

    .zq-type {
        padding: 4px 8px;
        border: 1px solid transparent;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 0;
        color: #a3a3a3;
        background: #f7f7f7;
    }

    .zq-type.is-active {
        color: #ff7a3d;
        border: 1px solid #ffb688;
        background: #fff8f5;
    }

    .zq-price {
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .zq-price-new {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0.32px;
        color: #ff4d0a;
    }

    .zq-price-old {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0.16px;
        color: #0a0a0a;
        opacity: 0.45;
    }

    .zq-btns { gap: 12px; }

    .zq-btn-skip,
    .zq-btn-buy {
        height: 40px;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
    }

    .zq-swiper-page { margin-top: 24px; }

    .zq-swiper-switch {
        height: 36px;
        align-items: center;
    }

    .zq-swiper-switch .swiper-pagination {
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto;
    }

    .zq-swiper-switch .swiper-pagination-bullet {
        margin: 0;
        width: 6px;
        height: 6px;
        background: #404040;
        opacity: 0.4;
        border-radius: 10px;
        flex-shrink: 0;
        vertical-align: middle;
    }

    .zq-swiper-switch .swiper-pagination-bullet-active {
        width: 36px;
        height: 6px;
        opacity: 0.75;
        border-radius: 10px;
    }

    .zq-swiper-btns { gap: 12px; }

    /* npay — Figma 4924:6172 */
    .zq-npay {
        height: auto;
        padding: 0 16px 48px;
        overflow: hidden;
    }

    .zq-npay-inner {
        width: 361px;
        max-width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    .zq-npay-cloud { display: none; }

    .zq-npay-cloud-r {
        display: block;
        left: calc(50% + 61.5px);
        top: 188px;
        width: 708px;
        height: 200px;
        transform: translateX(-50%) rotate(180deg) scaleY(-1);
        z-index: 1;
    }

    .zq-npay-copy {
        width: 100%;
        height: auto;
        gap: 16px;
    }

    .zq-npay-logos {
        min-height: 38px;
        height: auto;
        gap: 15px;
        padding: 12px 16px;
    }

    .zq-npay-logos img { height: 14px; }

    .zq-npay-text { gap: 8px; }

    .zq-npay-title { gap: 8px; }

    .zq-npay-title img {
        width: 64px;
        height: 20px;
    }

    .zq-npay-title span {
        font-family: 'Shokz Sans Display', 'Pretendard', sans-serif;
        font-size: 19px;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: 0;
        color: #0a0a0a;
    }

    .zq-npay-desc {
        font-family: 'Shokz Sans Display', 'Pretendard', sans-serif;
        font-size: 19px;
        font-weight: 500;
        line-height: 26px;
        letter-spacing: 0;
        color: #404040;
    }

    .zq-npay-note {
        font-family: 'Shokz Sans Text', 'Pretendard', sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.6px;
        color: #737373;
    }

    .zq-npay-visual {
        width: 323px;
        height: 200px;
        margin: 0;
        overflow: hidden;
    }

    .zq-npay-coupon-wrap {
        left: -25px;
        top: -40px;
        width: 280px;
        height: 249px;
        transform: rotate(27.97deg);
    }

    .zq-npay-coupon {
        width: 232px;
        height: 159px;
    }

    .zq-npay-pct {
        left: 67px;
        top: 63px;
        font-size: 38px;
        transform: translateX(-50%) rotate(0.81deg);
    }

    .zq-npay-arrow {
        left: 103px;
        top: 71px;
        width: 38px;
        height: 36px;
        transform: rotate(2.03deg);
    }

    .zq-npay-crane {
        left: 80px;
        right: auto;
        top: 167px;
        bottom: auto;
        width: 380px;
        height: 143px;
        object-fit: cover;
        object-position: left center;
    }

    /* bundle — Figma 4924:6458 */
    .zq-bundle { padding: 48px 0; }

    .zq-bundle .zq-title {
        font-size: 27px;
        font-weight: 500;
        line-height: 35px;
        letter-spacing: 0;
    }

    .zq-bundle .zq-title-dark span {
        background: linear-gradient(83deg, #500e36 5%, #6e0303 99%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .zq-bundle .zq-desc-dark {
        margin-top: 12px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
        color: #2f2f2f;
    }

    .zq-bundle-tabs {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin: 32px 0 24px;
    }

    .zq-bundle-tab {
        box-sizing: border-box;
        width: 230px;
        height: 38px;
        padding: 8px 12px;
        border-width: 1.5px;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        color: #050505;
    }

    .zq-bundle-tab.active {
        color: #fff;
        font-weight: 500;
    }

    .zq-bundle-pair {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        gap: 6px;
    }

    /* 165×200 — 无尺码 5097:5420；有尺码 5097:5230 */
    .zq-bundle-item {
        width: auto;
        height: 200px;
        flex: 1 1 0;
        min-width: 0;
        overflow: visible;
        border-radius: 12px;
        background:
            radial-gradient(ellipse 80% 90% at 48% 44%, rgba(252, 237, 217, 0.4) 0%, #fcedd9 66%, #fcedd9 97%),
            #fff;
        box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.08);
    }

    .zq-bundle-pic {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        object-fit: contain;
    }

    .zq-bundle-name {
        top: 120px;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0;
        color: #000;
    }

    .zq-bundle-gift {
        right: 6px;
        top: 96px;
        width: 42px;
        height: 42px;
        padding-top: 0;
        border-radius: 35px;
        background: #f8eae9;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .zq-bundle-gift img {
        width: 34px;
        height: 34px;
        margin-top: 0;
    }

    .zq-bundle-gift span {
        top: 28px;
        margin-top: 0;
        font-size: 8px;
        line-height: 8px;
        color: #666;
    }

    .zq-page .zq-bundle-gift-pic--tote {
        top: 16.2px;
        width: 25.3px;
        height: 23.8px;
    }

    .zq-bundle-gift:has(.zq-bundle-gift-pic--tote) span {
        top: 30px;
        left: 2px;
        right: 2px;
    }

    .zq-bundle-colors {
        height: 56px;
        padding: 16px 13px;
        box-sizing: border-box;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        column-gap: 4px;
        row-gap: 0;
        background: #bda3c2;
        backdrop-filter: blur(22.7px);
        -webkit-backdrop-filter: blur(22.7px);
        border-radius: 0 0 12px 12px;
    }

    .zq-bundle-colors:has(.zq-bundle-sizes) {
        flex-wrap: wrap;
        align-content: center;
        height: 56px;
        min-height: 56px;
        padding: 5px 13px;
        row-gap: 2px;
        column-gap: 4px;
    }

    .zq-bundle-colors .zq-color {
        width: 24px;
        height: 24px;
        padding: 0;
        margin: 0;
        border: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .zq-bundle-colors .zq-color.is-unavailable {
        display: none;
    }

    .zq-bundle-colors .zq-color.is-active {
        box-shadow: none;
        outline: 1px solid var(--zq-cta);
        outline-offset: -1px;
    }

    .zq-bundle-colors .zq-color span {
        width: 18px;
        height: 18px;
        margin: 0;
        flex-shrink: 0;
    }

    .zq-bundle-sizes {
        flex: none;
        width: 100%;
        justify-content: center;
        margin: 0;
        gap: 6px;
    }

    .zq-bundle-item .zq-type {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        padding: 0 8px;
        border: 0;
        border-radius: 4px;
        background: #f7f7f7;
        color: #8d8d8d;
        font-family: "Noto Sans KR", Pretendard, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 18.2px;
        letter-spacing: 0;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .zq-bundle-item .zq-type[data-size="std"] {
        width: 52px;
        padding: 0;
    }

    .zq-bundle-item .zq-type[data-size="mini"] {
        width: 34px;
        padding: 0;
    }

    .zq-bundle-item .zq-type.is-active {
        background: #f7f7f7;
        color: #8d8d8d;
        box-shadow: 0 0 0 1px var(--zq-cta);
    }

    .zq-bundle-plus {
        width: 18px;
        height: 18px;
        transform: none;
    }

    .zq-bundle-buy {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 241px;
        max-width: 100%;
        margin: 24px auto 24px;
        gap: 16px;
    }

    .zq-bundle-price {
        gap: 8px;
        margin-bottom: 0;
        padding: 4px 0;
        align-items: center;
    }

    .zq-bundle-price-new {
        font-size: 17px;
        font-weight: 500;
        line-height: 23px;
        color: #050505;
    }

    .zq-bundle-price-old {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        color: #8d8d8d;
    }

    /* 240×74 — 按钮 40, 气泡 top 44, 유의사항 top 56 */
    .zq-bundle-btns {
        position: relative;
        box-sizing: border-box;
        width: 240px;
        height: 74px;
        min-height: 74px;
        margin: 0;
        padding: 0;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        overflow: visible;
    }

    .zq-bundle-btns .zq-btn-black,
    .zq-bundle-btns .zq-btn-npay {
        box-sizing: border-box;
        width: 114px;
        height: 40px;
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.6px;
        padding: 0 8px;
        border-radius: 4px;
        overflow: visible;
    }

    .zq-bundle-btns .zq-btn-black,
    .zq-bundle-btns .zq-btn-black:link,
    .zq-bundle-btns .zq-btn-black:visited {
        color: #fff;
        -webkit-text-fill-color: #fff;
    }

    .zq-bundle-btns .zq-btn-npay > img {
        height: 17px;
        width: 59px;
        max-width: none;
        object-fit: contain;
        filter: none;
    }

    .zq-select-tip {
        top: 100%;
        padding: 12px;
        border: 1px solid #f1f1f1;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04), 0 18px 24px rgba(0, 0, 0, 0.08);
        color: #2f2f2f;
        font-size: 12px;
        line-height: 1.4;
    }

    .zq-bundle-item .zq-select-tip {
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .zq-select-tip-arrow {
        top: -9px;
        width: 16px;
        height: 8px;
        transform: translateX(-50%) rotate(180deg);
    }

    .zq-bundle-npay-btn-box .zq-npay-tip {
        width: 92px;
        height: 41px;
        left: 50%;
        top: calc(100% + 4px);
        z-index: 2;
        transform: translateX(-50%);
        padding: 0 6px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 400;
    }

    .zq-bundle-npay-btn-box .zq-npay-tip-arrow {
        left: 50%;
        transform: translateX(-50%) rotate(180deg);
    }

    .zq-bundle-notice {
        position: absolute;
        left: 0;
        top: 56px;
        width: 114px;
        flex: none;
        margin: 0;
        justify-content: center;
        font-size: 12px;
        line-height: 1.5;
        color: #404040;
        gap: 0;
        z-index: 1;
        pointer-events: none;
    }

    .zq-bundle-notice-hit {
        padding: 8px;
        margin: -8px;
        pointer-events: auto;
    }

    .zq-bundle-notice-hit > img {
        width: 12px;
        height: 12px;
    }

    /* gift — Figma 4924:6647 */
    .zq-gift { padding: 48px 0; }

    .zq-gift .zq-title {
        font-size: 27px;
        font-weight: 500;
        line-height: 35px;
        letter-spacing: 0;
    }

    .zq-gift-board {
        display: block;
        position: relative;
        grid-template-columns: none;
        gap: 0;
        margin-top: 32px;
        padding: 32px 16px;
        overflow: visible;
        background:
            radial-gradient(ellipse 80% 40% at 50% 100%, rgba(252, 237, 217, 0.4) 0%, #fcedd9 66%, transparent 97%),
            #fef8f0;
    }

    .zq-gift-crane {
        left: -51px;
        top: -71px;
        width: 200px;
        height: 164px;
        transform: none;
    }

    .zq-gift-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        position: static;
        z-index: 1;
    }

    .zq-gift-item {
        gap: 8px;
    }

    .zq-gift-item:nth-child(1) { order: 1; }
    .zq-gift-item:nth-child(2) { order: 2; }
    .zq-gift-item:nth-child(4) { order: 3; }
    .zq-gift-item:nth-child(5) { order: 4; }
    .zq-gift-item:nth-child(3) { order: 5; }

    .zq-gift-grid > .zq-gift-item:nth-child(3n+2) .zq-gift-label,
    .zq-gift-grid > .zq-gift-item:nth-child(3n+2) .zq-gift-desc {
        white-space: normal;
    }

    .zq-gift-label {
        padding: 8px 12px;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        color: #3f0c2c;
        background: linear-gradient(156deg, #f8f0eb 8%, #ffe6c3 78%);
    }

    .zq-gift-desc {
        margin: 0;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 21px;
        color: #2f2f2f;
    }

    .zq-gift-thumbs { gap: 16px; }

    .zq-gift-thumb {
        width: 64px;
        height: 64px;
        border-radius: 55px;
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10.8px);
        -webkit-backdrop-filter: blur(10.8px);
    }

    .zq-gift-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .zq-page .zq-gift-thumb img.zq-gift-thumb-pic--tote {
        width: 100%;
        height: 100%;
        padding: 8px 9px 12px 9px;
    }

    .zq-gift-thumb.is-soldout::after {
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.3px;
    }

    /* pin to cream card outer corner (Figma 4924:6688) */
    html body .zq-page .zq-gift-board > .zq-gift-deco {
        display: block;
        position: absolute;
        inset: auto -16px -19px auto;
        width: 181px;
        height: 100px;
        max-width: none;
        margin: 0;
        justify-self: auto;
        transform: none;
        z-index: 3;
        pointer-events: none;
    }

    html body .zq-page .zq-gift-board > .zq-gift-deco img {
        max-width: none;
    }

    html body .zq-page .zq-gift-board > .zq-gift-deco img:nth-child(1) {
        left: auto;
        right: 1.5px;
        top: auto;
        bottom: 0;
        width: 80px;
        height: 80px;
    }

    html body .zq-page .zq-gift-board > .zq-gift-deco img:nth-child(2) {
        left: 0;
        right: auto;
        top: auto;
        bottom: 0.5px;
        width: 83.5px;
        height: 83.5px;
    }

    html body .zq-page .zq-gift-board > .zq-gift-deco img:nth-child(3) {
        left: 40px;
        right: auto;
        top: 0;
        bottom: auto;
        width: 100px;
        height: 100px;
    }

    .zq-gift-actions {
        position: relative;
        z-index: 5;
        margin-top: 32px;
    }

    .zq-gift-btn,
    .zq-gift-btn:link,
    .zq-gift-btn:visited {
        position: relative;
        z-index: 6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: auto;
        min-width: 154px;
        height: 40px;
        padding: 0 24px;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: -0.6px;
        white-space: nowrap;
        color: #fff;
        -webkit-text-fill-color: #fff;
        background: #050505;
        text-decoration: none;
        cursor: pointer;
    }

    .zq-gift-legal {
        margin-top: 8px;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: -0.6px;
        line-height: 24px;
        color: #737373;
        text-align: center;
    }

    /* 弹层在 bundle 内，需抬高整段，否则会被后续赠品区仙鹤(z-index:2)和同层按钮盖住 */
    .zq-bundle:has(.zq-bubble.is-active) {
        position: relative;
        z-index: 10000;
    }

    .zq-bubble.is-active {
        z-index: 2;
        pointer-events: auto;
    }

    .zq-bubble.is-active .zq-bubble-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1;
        pointer-events: auto;
    }

    .zq-bubble.is-active .zq-bubble-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 343px;
        max-width: calc(100% - 32px);
        padding: 22px 24px 24px;
        border-radius: 12px;
        z-index: 2;
        display: block;
        box-sizing: border-box;
    }

    .zq-bundle-notice .zq-bubble-text.zq-mo {
        display: flex;
        width: 295px;
        max-width: 100%;
    }

    .zq-bundle-notice .zq-bubble-arrow {
        display: none;
    }

    .zq-bubble-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -3px;
        right: 0;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 2;
        pointer-events: auto;
    }

    .zq-bubble-close img {
        width: 32px;
        height: 32px;
    }

    .zq-bubble:hover .zq-bubble-content,
    .zq-bundle-notice-hit:hover ~ .zq-bubble-content,
    .zq-bundle-notice .zq-bubble-content:hover { display: none; }
    .zq-bubble.is-active .zq-bubble-content { display: block; }
}