@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 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');
}

.bf-page {
    --bf-cta: #ff7a3d;
    --bf-cta-soft: #ffb688;
    --bf-price: #ff4d0a;
    --bf-ink: #050505;
    --bf-max: 1200px;
    --bf-display: 'Shokz Sans Display', 'Pretendard', 'NotoSansKR', sans-serif;
    --bf-text: 'Shokz Sans Text', 'Pretendard', 'NotoSansKR', sans-serif;
    color: var(--bf-ink);
    font-family: 'Pretendard', 'NotoSansKR', 'Noto Sans KR', sans-serif;
}

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

.bf-page button {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.bf-page a,
.bf-page a:hover {
    text-decoration: none;
}

.bf-page p,
.bf-page h1,
.bf-page h2,
.bf-page h3,
.bf-page ul {
    margin: 0;
}

/* banner */
.bf-banner {
    position: relative;
    height: 620px;
    overflow: hidden;
    background: #000;
}

.bf-banner-photo {
    position: absolute;
    inset: 0;
}

.bf-banner-photo picture {
    display: block;
    height: 100%;
}

.bf-banner-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

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

.bf-banner-info {
    width: 342px;
}

.bf-banner-kicker {
    width: fit-content;
    margin-bottom: 16px;
    color: #ffd05e;
    font-family: var(--bf-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0px;
    padding-bottom: 16px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
        radial-gradient(66% 1.6em at 50% 50%, #ffebaf 0%, #ffdd79 25.34%, #ffd75e 38.01%, #ffd043 50.68%, #ffb032 58.754%, #ff9021 66.828%, #ff7111 74.902%, #ff5100 82.976%, #f54c0a 83.89%, #eb4714 84.804%, #d73d27 86.631%, #b0294f 90.286%, #881576 93.941%, #750b8a 95.769%, #61019d 97.596%);
    background-origin: content-box;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bf-banner-title {
    display: block;
    width: 310px;
    height: 109.777px;
    margin-bottom: 32px;
}

.bf-banner-desc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
}

.bf-page .bf-banner-btn {
    height: 48px;
    padding: 0 32px;
    border-radius: 4px;
    background: var(--bf-cta);
    color: #fff;
    font-family: var(--bf-text);
    font-size: 17px;
    line-height: 27px;
    letter-spacing: -0.68px;
}

/* anchor nav */
.bf-nav-wrap {
    height: 56px;
}

.bf-nav {
    position: relative;
    z-index: 4100;
    box-sizing: border-box;
    height: 56px;
    padding-top: 8px;
    background: linear-gradient(90deg, #341c62 0%, #6f3424 100%);
    display: flex;
    justify-content: center;
}

.bf-nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.bf-nav-inner {
    width: 996px;
    max-width: 100%;
    display: flex;
}

.bf-page .bf-nav-item {
    flex: 1;
    min-width: 0;
    height: 48px;
    box-sizing: border-box;
    padding-bottom: 16px;
    border-bottom: 2px solid transparent;
    color: #fff;
    font-family: var(--bf-text);
    font-size: 17px;
    line-height: 27px;
    letter-spacing: -0.68px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

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

/* common */
.bf-main {
    background: linear-gradient(166deg, #13001b 0%, #3f1521 45%, #5e2427 100%);
}

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

.bf-sec {
    scroll-margin-top: 56px;
}

.bf-title {
    font-family: var(--bf-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 52px;
    text-align: center;
    padding-bottom: 16px;
}

/* 按设计稿实际渲染取色：中线为黄色，向上下边缘与两端依次过渡到橙红、紫色；纵向半径需贴近字形高度，紫色才会落在字上 */
.bf-title span {
    --bf-title-ry: 0.58em;
    display: inline-block;
    color: #ffd05e;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
        radial-gradient(88% var(--bf-title-ry) at 50% 50%, #ffebaf 0%, #ffdd79 28%, #ffd75e 42%, #ffd043 55%, #ffb032 62%, #ff9021 69%, #ff7111 75%, #ff5100 81%, #eb4714 84%, #d73d27 86%, #b0294f 89%, #881576 92%, #750b8a 95%, #61019d 98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bf-title--lg {
    font-size: 40px;
    font-weight: 600;
}

.bf-desc {
    margin-top: 16px;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.16px;
    text-align: center;
}

/* products */
.bf-products {
    padding-top: 96px;
    overflow-x: clip;
}

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

.bf-page .bf-cat {
    box-sizing: border-box;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #fff;
    border-radius: 99px;
    color: #fff;
    font-family: var(--bf-text);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
}

.bf-page .bf-cat.active {
    height: 46px;
    background: #fff;
    color: var(--bf-cta);
    font-size: 20px;
    line-height: 28px;
}

.bf-products .bf-product-panel {
    display: none;
    overflow: visible;
}

.bf-products .bf-product-panel.show {
    display: block;
}

.bf-product-panel .bf-slide {
    width: 384px;
    height: auto;
}

.bf-product-panel.bf-swiper-center .swiper-wrapper {
    justify-content: center;
}

.bf-card {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 24px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(17, 17, 26, 0.1), 0 8px 16px rgba(17, 17, 26, 0.05);
    overflow: hidden;
}

.bf-pic {
    position: relative;
    display: block;
    height: 290px;
    overflow: hidden; /* 卡片 overflow:visible 时仍裁切产品图模糊边缘 */
}

.bf-pic::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 274px;
    background: #fff;
}

.bf-page .bf-pic-bg,
.bf-page .bf-pic-product {
    position: absolute;
    left: 0;
    top: 0;
    width: 384px;
    height: 274px;
    max-width: none;
}

/* 黑底与背景图同层模糊，边缘透出卡片白底形成浅色边（与设计稿图层结构一致） */
.bf-pic-bg {
    object-fit: cover;
    background: #000;
    filter: blur(3px);
}

.bf-page .bf-pic-product {
    object-fit: contain;
}

/* PC 默认图：仅指定 slug 调整；orpro2 等未列出的保持满幅 384×274 */
@media (min-width: 1000px) {
    .bf-page .bf-pic--opendots2 .bf-pic-product {
        left: 41px;
        top: 29px;
        width: 292px;
        height: 193px;
    }

    .bf-page .bf-pic--openfitpro .bf-pic-product {
        left: 52px;
        top: 24px;
        width: 285px;
        height: 197px;
    }

    /* 左右满幅原位；仅中间오픈핏 2+ 做赠品条上方间距 */
    .bf-page .bf-pic--openfitair2 .bf-pic-product,
    .bf-page .bf-pic--opendotsone .bf-pic-product {
        left: 0;
        top: 0;
        width: 384px;
        height: 274px;
        object-fit: contain;
    }

    .bf-page .bf-pic--openfit2plus .bf-pic-product {
        left: 0;
        top: 25px;
        width: 384px;
        height: 185px;
        object-fit: cover;
        object-position: center center;
    }
}

.bf-page .bf-pic.bf-pic--sku .bf-pic-product,
.bf-page .bf-pic.bf-pic--alt .bf-pic-product {
    left: 0;
    top: 0;
    width: 100%;
    height: 274px;
    object-fit: contain;
}

/* 切换颜色/选项后不再是默认合成图时，改为白色底图 */
.bf-page .bf-pic.bf-pic--sku::before,
.bf-page .bf-pic.bf-pic--alt::before {
    background: #fff;
}

.bf-page .bf-pic.bf-pic--sku .bf-pic-bg,
.bf-page .bf-pic.bf-pic--alt .bf-pic-bg {
    display: none;
}

/* SKU 图只占赠品条上方区域，避免被赠品条遮挡 */
.bf-page .bf-pic.bf-pic--sku.bf-pic--gift .bf-pic-product {
    height: 218px;
}

/* PC：오픈컴 2「동글 없음」规格图满幅偏大 */
@media (min-width: 1000px) {
    .bf-page .bf-pic.bf-pic--alt-sm.bf-pic--opencomm2 .bf-pic-product {
        transform: scale(0.835);
        transform-origin: center center;
    }
}

.bf-label {
    position: absolute;
    left: 266px;
    top: 20px;
    box-sizing: border-box;
    width: 102px;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 99px;
    background: #ffefc0;
    backdrop-filter: blur(10px);
    color: #2f2f2f;
    font-family: var(--bf-text);
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-badge {
    position: absolute;
    left: 16px;
    top: 0;
    width: 78px;
    height: 40px;
    display: flex;
    justify-content: center;
}

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

.bf-badge-text {
    position: relative;
    padding-top: 6px;
    font-family: var(--bf-display);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    background: linear-gradient(-13.19deg, #ff9c55 18.461%, #be5000 62.283%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.bf-badge--swim .bf-badge-text {
    background-image: linear-gradient(-13.19deg, #f9a245 18.461%, #f5662c 62.283%);
}

.bf-gift-bar {
    position: absolute;
    left: 24px;
    top: 218px;
    width: 336px;
    height: 40px;
    border-radius: 4px;
    background: #fff4f0 url('https://static.shokz.co.kr/resource/2026/10/14/black-friday/gift-bar-icon.webp') no-repeat left top / 336px 40px;
}

.bf-gift-bar.is-hidden {
    display: none;
}

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

.bf-gift-bar-text {
    position: absolute;
    left: 12px;
    top: 4px;
    height: 32px;
    padding-left: 28px;
    display: flex;
    align-items: center;
    color: var(--bf-cta);
    font-family: var(--bf-text);
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
}

.bf-page .bf-gift-bar-pic {
    position: absolute;
    left: 267px;
    top: -14px;
    width: 66px;
    height: 66px;
    max-width: none;
}

.bf-page .bf-gift-bar-pic--pouch {
    left: 270px;
    top: -18px;
}

.bf-page .bf-gift-bar-pic--case {
    left: 270px;
    top: -17px;
}

.bf-page .bf-gift-bar-pic--cap {
    left: 268px;
    top: -15px;
}

.bf-info {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bf-info-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bf-name {
    color: #000;
    font-family: var(--bf-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
}

.bf-product-desc {
    color: #404040;
    font-family: var(--bf-text);
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.16px;
}

.bf-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bf-colors {
    display: flex;
    gap: 4px;
}

.bf-page .bf-color {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 50%;
}

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

/* Figma 色点资源（如 오픈런 프로 2 실버）：SVG 铺满圆点，双端同尺寸 */
.bf-color .bf-color-dot--swatch {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: none;
}

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

.bf-page .bf-color.is-unavailable {
    display: none;
}

.bf-type-block {
    display: flex;
    gap: 20px;
}

.bf-type-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bf-type-title {
    color: #a3a3a3;
    font-family: var(--bf-text);
    font-size: 13px;
    line-height: 21px;
}

.bf-types {
    display: flex;
    gap: 6px;
}

.bf-page .bf-type {
    padding: 3px 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #f7f7f7;
    color: #a3a3a3;
    font-family: var(--bf-text);
    font-size: 13px;
    line-height: 21px;
    white-space: nowrap;
}

.bf-page .bf-type.is-active {
    border-color: var(--bf-cta-soft);
    background: #fff8f5;
    color: var(--bf-cta);
}

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

.bf-buy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bf-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bf-price {
    min-height: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bf-price-new {
    color: var(--bf-price);
    font-family: var(--bf-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.16px;
}

.bf-price-old {
    color: #0a0a0a;
    opacity: 0.45;
    font-family: var(--bf-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.32px;
    text-decoration: line-through;
}

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

.bf-page .bf-btn-skip,
.bf-page .bf-btn-buy {
    flex: 1;
    box-sizing: border-box;
    height: 40px;
    border-radius: 4px;
    font-family: var(--bf-text);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-page .bf-btn-skip {
    border: 1px solid var(--bf-cta);
    background: #fff;
    color: var(--bf-cta);
}

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

.bf-page .bf-btn-buy:disabled {
    opacity: 0.6;
    cursor: default;
}

.bf-page .bf-btns .bf-btn-skip {
    display: none;
}

.bf-page .bf-btn-skip--link,
.bf-page .bf-btn-skip--link:hover {
    flex: none;
    height: auto;
    border: none;
    background: none;
    color: #050505;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.16px;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-position: from-font;
}

.bf-btn-npay-wrap {
    position: relative;
    flex: none;
}

.bf-page .bf-btn-npay {
    flex: none;
    width: 162px;
    height: 40px;
    border-radius: 4px;
    background: #00de5a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-page .bf-btn-npay img {
    width: 66px;
    height: 20px;
    object-fit: contain;
}

.bf-page .bf-btn-npay:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 25만원 이상 상품: Npay 버튼 아래 5% 추가 할인 气泡 */
.bf-page .bf-npay-tip {
    position: absolute;
    left: 50%;
    top: calc(100% + 0px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 103px;
    height: 44px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid var(--border-primary, #F1F1F1);
    border-radius: 6px;
    box-shadow: 0 6px 32px -8px rgba(0, 0, 0, 0.04), 0 18px 48px -20px rgba(0, 0, 0, 0.08);
    color: #2f2f2f;
    font-family: var(--bf-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.4px;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}

.bf-page .bf-npay-tip[hidden] {
    display: none;
}

.bf-page .bf-npay-tip > span {
    display: block;
    line-height: 1;
}

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

/* 气泡叠在卡片上，不撑高；放开 overflow 以免被裁切 */
.bf-card--npay-tip {
    overflow: visible;
}

.bf-page .bf-product-panel.swiper-container {
    overflow: visible;
}

/* Npay 미노출 카드: 가격은 단독 행, 하단에 제품보기·바로구매 버튼 2개 */
.bf-page .bf-card--no-npay .bf-btn-skip--link {
    display: none;
}

.bf-page .bf-card--no-npay .bf-btns .bf-btn-skip {
    display: flex;
}

.bf-swiper-page {
    margin-top: 24px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

/* Swiper watchOverflow 默认把 lock 按钮/分页 display:none；多分类需始终可见 */
.bf-page .bf-swiper-btns button.swiper-button-lock {
    display: block;
}

.bf-page .bf-swiper-page .swiper-pagination.swiper-pagination-lock {
    display: flex;
}

.bf-swiper-page .swiper-pagination {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    bottom: auto;
}

.bf-swiper-page .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 10px;
    background: #fff;
    opacity: 0.4;
}

.bf-swiper-page .swiper-pagination-bullet-active {
    width: 36px;
    opacity: 1;
}

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

.bf-page .bf-swiper-btns button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
}

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

.bf-swiper-btns .button-prev::before {
    transform: translateX(2px) rotate(-135deg);
}

.bf-swiper-btns .button-next::before {
    transform: translateX(-2px) rotate(45deg);
}

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

/* Npay benefit banner (PC) */
.bf-npay {
    position: relative;
    height: 240px;
    margin-top: 24px;
    border-radius: 6px;
    overflow: hidden;
    background:
        url('https://static.shokz.co.kr/resource/2026/10/16/npay-banner-texture_6ad1c6ba4c86e.webp') center / cover no-repeat,
        linear-gradient(232.34deg, rgba(255, 110, 61, 0) 45%, rgba(255, 110, 61, 0.41) 139.58%),
        url('https://static.shokz.co.kr/resource/2026/10/16/npay-banner-glow_6ad1c6b7bdb86.webp') 298.68px -146.93px / 1325.04px 570.12px no-repeat,
        #000;
}

.bf-npay picture {
    display: contents;
}

.bf-page .bf-npay-purchase {
    position: absolute;
    left: 564.19px;
    top: -146.81px;
    width: 521.409px;
    height: 521.409px;
    max-width: none;
    transform: rotate(-18.83deg);
}

.bf-npay-copy {
    position: absolute;
    left: 160px;
    top: 50%;
    width: 420px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    color: #fff;
}

.bf-npay-title {
    font-family: var(--bf-display);
    font-size: 27px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: 0.16px;
    white-space: nowrap;
}

.bf-npay-cards {
    padding: 4px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 16px;
}

.bf-page .bf-npay-cards img {
    width: auto;
    height: 12px;
}

.bf-npay-cond {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}

.bf-npay-benefit {
    font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 31px;
    white-space: nowrap;
}

.bf-npay-ticket {
    position: absolute;
    left: 703.26px;
    top: 30.83px;
    width: 242.886px;
    height: 166.305px;
}

.bf-page .bf-npay-ticket-bg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.bf-npay-ticket-copy {
    position: absolute;
    left: 41.64px;
    top: 59.16px;
    width: 143.96px;
    height: 78.401px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-npay-ticket-row {
    flex: none;
    width: 138.729px;
    height: 66.697px;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: rotate(4.94deg);
}

.bf-npay-ticket-pct,
.bf-npay-ticket-arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-npay-ticket-pct {
    width: 81.706px;
    height: 64.411px;
}

.bf-npay-ticket-pct span {
    transform: rotate(-4.94deg);
    color: #5f3000;
    font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: normal;
    white-space: nowrap;
}

.bf-npay-ticket-arrow {
    width: 55.104px;
    height: 57.993px;
}

.bf-page .bf-npay-ticket-arrow img {
    width: 50.835px;
    height: 53.995px;
    max-width: none;
    transform: rotate(-4.72deg);
}

/* 1+1 event */
.bf-event {
    padding: 96px 0;
}

.bf-event .bf-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.bf-event-list {
    width: 921px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bf-event-card {
    position: relative;
    height: 308px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 3px 4px 34px rgba(26, 0, 74, 0.2);
}

.bf-event-card--first-day {
    background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        linear-gradient(148.19deg, #572aa8 35.49%, #e35783 85.224%, #ff7148 98.741%, #ff3c3d 109.65%);
}

.bf-event-card--signature {
    background: #35164b;
}

.bf-event-card--signature::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(117.6deg, rgba(95, 48, 147, 0) 54.987%, #3f2467 101.08%, #35164b 190.41%),
        linear-gradient(156.16deg, rgba(87, 42, 168, 0.3) 28.333%, rgba(227, 87, 131, 0.3) 78.277%, rgba(255, 113, 72, 0.3) 91.852%, rgba(255, 60, 61, 0.3) 102.8%);
}

.bf-page .bf-event-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.bf-event-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.bf-event-card--first-day .bf-event-copy {
    left: 60.5px;
    width: 356px;
    gap: 24px;
}

.bf-event-card--signature .bf-event-copy {
    left: 386.5px;
    width: 487px;
    gap: 16px;
}

.bf-event-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.bf-event-card--signature .bf-event-head {
    gap: 6px;
}

.bf-event-title {
    font-family: var(--bf-display);
    font-size: 27px;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: 0.16px;
    background: linear-gradient(148.19deg, #ffda99 19.432%, #e46a2b 120.37%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bf-event-card--signature .bf-event-title {
    padding-bottom: 5px;
    background-image: linear-gradient(153.17deg, #ffdfa7 19.432%, #ff955e 120.37%);
}

.bf-event-text {
    width: 298px;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0.16px;
}

.bf-event-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.32px;
}

.bf-event-lines .bf-event-lines-strong {
    font-family: 'Pretendard', 'NotoSansKR', sans-serif;
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 0;
}

.bf-event-lines-strong strong {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
}

.bf-page .bf-event-btn {
    box-sizing: border-box;
    width: 153px;
    height: 48px;
    border-radius: 4px;
    background: #fff;
    color: var(--bf-ink);
    font-family: 'Pretendard', 'NotoSansKR', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-page .bf-event-btn--lg {
    font-size: 17px;
    line-height: 27px;
    letter-spacing: -0.68px;
}

.bf-event-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.bf-event-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #fff;
    font-family: var(--bf-text);
    font-size: 13px;
    line-height: 21px;
    font-weight: 400;
}

.bf-page .bf-event-product {
    position: absolute;
    z-index: 2;
    left: 54.34%;
    top: calc(50% + 0.44px);
    width: 272.9px;
    height: 272.9px;
    transform: translateY(-50%);
}

.bf-event-earphone {
    position: absolute;
    z-index: 2;
    left: 79.5px;
    top: 65px;
    width: 209px;
    height: 234px;
}

.bf-page .bf-event-earphone img {
    position: absolute;
    max-width: none;
}

.bf-page .bf-event-earphone-reflection {
    left: 35px;
    top: 148px;
    width: 170.2px;
    height: 88.144px;
    border-radius: 500px;
    filter: blur(2px);
    transform: rotate(-179.54deg) scaleY(-1);
}

.bf-page .bf-event-earphone-case {
    left: 0;
    top: 0;
    width: 209px;
    height: 162.612px;
    object-fit: cover;
}

.bf-page .bf-event-earphone-sign {
    left: 25.49px;
    top: 12.59px;
    width: 150.755px;
    height: 150.755px;
    transform: rotate(7.08deg);
}

.bf-page .bf-reminder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.32px;
}

.bf-reminder-wrap {
    position: relative;
    z-index: 10;
}

.bf-popover {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    box-sizing: border-box;
    width: 492px;
    padding: 24px 18px;
    border: 1px solid #f1f1f1;
    border-radius: 6px;
    background: #fff;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.04)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.08));
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

/* 트리거와 팝오버 사이 12px 간격에서도 hover 유지 */
.bf-popover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -13px;
    height: 13px;
}

.bf-popover::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    width: 11.314px;
    height: 11.314px;
    border-radius: 2px 0 0 0;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.bf-reminder-wrap.is-open .bf-popover {
    opacity: 1;
    visibility: visible;
}

.bf-page .bf-reminder img {
    display: block;
    flex: none;
}

/* 韩文实际由 Pretendard 渲染；首选字体若为 Shokz Sans Display，行盒按其度量计算，文字会相对图标偏移 */
.bf-page .bf-reminder span {
    display: block;
    font-family: 'Pretendard', 'NotoSansKR', sans-serif;
}

@media (min-width: 1000px) {
    .bf-reminder:focus-visible + .bf-popover {
        opacity: 1;
        visibility: visible;
    }

    .bf-banner-desc p {
        white-space: nowrap;
    }
}

@media (hover: hover) and (min-width: 1000px) {
    .bf-reminder-wrap:hover .bf-popover {
        opacity: 1;
        visibility: visible;
    }
}

.bf-page .bf-popover-list {
    padding-left: 1.5em;
    color: #666;
    font-family: var(--bf-text);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
    text-align: justify;
    list-style: disc;
}

.bf-page .bf-popover-close {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
}

.bf-page .bf-popover-close img {
    display: block;
    width: 32px;
    height: 32px;
}

/* gift */
.bf-gift {
    padding-bottom: 96px;
}

/* 상단 padding이 없는 섹션: 1+1 이벤트(padding-top 96px)와 같은 위치에 타이틀이 오도록 */
.bf-gift.bf-sec {
    scroll-margin-top: 152px;
}

.bf-gift-boards {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

.bf-gift-board {
    position: relative;
    flex-shrink: 0;
    height: 514px;
}

.bf-gift-board--line {
    width: 792px;
}

.bf-gift-board--bag {
    width: 384px;
}

.bf-page .bf-gift-board-bg {
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: 509px;
    border-radius: 12px;
}

.bf-gift-ribbon {
    position: absolute;
    z-index: 1;
    left: calc(50% + 0.5px);
    top: 0;
    width: 207px;
    height: 46px;
    transform: translateX(-50%);
    background: url('https://static.shokz.co.kr/resource/2026/10/14/black-friday/ribbon.webp') no-repeat center top / 172px 46px;
    text-align: center;
}

.bf-gift-ribbon::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 5px;
    background: url('https://static.shokz.co.kr/resource/2026/10/14/black-friday/ribbon-top.webp') no-repeat center / 100% 100%;
}

.bf-gift-ribbon span {
    position: relative;
    display: block;
    padding-top: 8px;
    color: #fff;
    font-family: 'NotoSansKR', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.bf-gift-ribbon--bag span {
    padding-top: 9px;
}

.bf-gift-grid {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 61px;
    transform: translateX(-50%);
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 285px 295px;
    column-gap: 73px;
    row-gap: 49px;
}

.bf-gift-grid::before {
    content: "";
    position: absolute;
    left: 321px;
    top: 50%;
    width: 1px;
    height: 400px;
    background: #d89977;
    transform: translateY(-50%);
}

.bf-gift-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bf-gift-item:nth-child(-n+2)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -25px;
    width: 285px;
    height: 1px;
    background: #d89977;
}

.bf-gift-head {
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bf-gift-tag {
    padding: 6px 20px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ffe8d2 0%, #ffd8d6 50%, #ecbdda 100%);
    color: #3f0c2c;
    font-family: var(--bf-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.16px;
    white-space: nowrap;
}

.bf-gift-cond {
    color: #fff;
    font-family: var(--bf-text);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
    text-align: center;
    white-space: nowrap;
}

.bf-gift-cond em {
    font-family: var(--bf-display);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: 0.16px;
}

.bf-page .bf-gift-pic {
    width: 118px;
    height: 118px;
}

.bf-gift-bag {
    position: absolute;
    z-index: 1;
    left: 32px;
    top: 87px;
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.bf-gift-bag .bf-gift-head {
    height: 81px;
}

.bf-page .bf-gift-bag-pic {
    width: 320px;
    height: 208.7px;
}

.bf-gift-thumb {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}

.bf-gift-item.is-soldout .bf-gift-thumb::after,
.bf-gift-thumb--bag.is-soldout::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
}

.bf-gift-thumb--bag.is-soldout::after {
    border-radius: 6px;
}

.bf-gift-soldout {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'NotoSansKR', 'Noto Sans KR', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.bf-gift-thumb--bag .bf-gift-soldout {
    font-size: 24px;
}

.bf-gift-cta {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.bf-page .bf-gift-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    height: 48px;
    border-radius: 4px;
    background: #fff;
    color: var(--bf-ink);
    font-family: var(--bf-text);
    font-size: 17px;
    line-height: 27px;
    letter-spacing: -0.68px;
}

.bf-gift-legal {
    color: #fff;
    font-family: var(--bf-text);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
    text-align: center;
}

.bf-balance {
    scroll-margin-top: 56px;
    margin-top: 64px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.bf-balance-title {
    color: #fff;
    font-family: var(--bf-display);
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: 0.16px;
    text-align: center;
}

.bf-page .bf-balance-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ff9962;
    font-family: var(--bf-display);
    font-size: 27px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: 0.16px;
}

.bf-page .bf-balance-link span {
    display: block;
    font-family: 'Pretendard', 'NotoSansKR', sans-serif;
}

.bf-page .bf-balance-link img {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
}

/* winners */
.bf-winners {
    padding-bottom: 96px;
}

.bf-winner-groups {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bf-winner-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bf-winner-title {
    color: #fff;
    font-family: var(--bf-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.16px;
    text-align: center;
}

.bf-winner-list {
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'NotoSansKR', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.bf-winner-list li {
    white-space: pre;
}

.bf-winner-list--grid {
    width: 999px;
    margin-left: calc(50% - 470.5px);
    display: grid;
    grid-template-columns: repeat(5, 187px);
    column-gap: 16px;
    row-gap: 16px;
    text-align: left;
}

/* notice */
.bf-notice {
    padding-bottom: 64px;
}

.bf-notice-list {
    box-sizing: border-box;
    width: 1055px;
    margin: 32px auto 0;
    padding-left: 30px;
    list-style: disc;
    color: #fff;
    font-family: var(--bf-text);
    font-size: 19px;
    line-height: 28px;
    font-weight: 400;
}

.bf-notice-list li {
    list-style: disc;
}

/* PC 缩放会缩小 CSS 视口，仅用 max-width 会误进移动端；叠加触控特征避免桌面缩放串样式 */
@media (max-width: 999px) and (pointer: coarse), (max-width: 999px) and (hover: none) {
    #fixed_bottom,
    #ch-plugin,
    [id^="ch-plugin"] {
        display: none !important;
    }

    .bf-page {
        word-break: keep-all;
    }

    /* banner */
    .bf-banner {
        height: auto;
        display: flex;
        justify-content: center;
        /* 图片未加载完时避免顶部闪白 */
        background: #160428;
    }

    /*
     * 移动端首屏：完整展示 Banner（含底部耳机）。
     * 高度需扣除公告条 + Header；旧逻辑只减 48px，容器过高 + object-position:bottom
     * 会在顶部留出空白（刷新偶现更明显）。
     */
    .bf-banner-photo {
        position: relative;
        inset: auto;
        --bf-banner-chrome: calc(var(--announcement-height, 40px) + var(--header-height, 48px));
        width: min(100%, 600px, calc((100vh - var(--bf-banner-chrome)) * 786 / 1108));
        width: min(100%, 600px, calc((100dvh - var(--bf-banner-chrome)) * 786 / 1108));
        max-width: 600px;
        margin: 0 auto;
        aspect-ratio: 786 / 1108;
        background: #160428;
    }

    .bf-banner-photo picture,
    .bf-banner-photo img {
        background: #160428;
    }

    .bf-banner-photo img {
        object-fit: contain;
        object-position: center top;
    }

    .bf-banner-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: block;
        height: auto;
        padding: 20px 16px 12px;
        text-align: center;
    }

    .bf-banner-info {
        width: auto;
    }

    .bf-page .bf-banner-kicker {
        margin: 0 auto;
        font-size: 19px;
        line-height: 22px;
        padding-bottom: 10px;
        font-weight: 600;
    }

    .bf-banner-title {
        width: 227px;
        height: 80.385px;
        margin: 0 auto 12px;
    }

    .bf-banner-desc {
        gap: 8px;
        margin-bottom: 12px;
        font-size: 17px;
        line-height: 23px;
        font-weight: 500;
    }

    .bf-page .bf-banner-btn {
        width: 151px;
        height: 40px;
        padding: 0;
        font-size: 15px;
        line-height: 22px;
        letter-spacing: 0.16px;
        font-weight: 400;
    }

    /* anchor nav */
    .bf-nav-wrap,
    .bf-nav {
        height: 48px;
    }

    .bf-nav {
        padding: 0 16px;
    }

    .bf-nav-inner {
        gap: 16px;
    }

    /* 하단 2px 언더라인만큼 상단 padding 을 줘서 텍스트를 48px 높이 기준 정중앙에 배치 */
    .bf-page .bf-nav-item {
        height: 48px;
        padding: 2px 0 0;
        align-items: center;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
        white-space: nowrap;
    }

    /* common */
    .bf-section-inner {
        padding: 0 16px;
    }

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

    .bf-title {
        font-size: 27px;
        line-height: 35px;
    }

    /* 移动端字号小，紫色边缘显得更重，纵向半径放大以减少紫色 */
    .bf-title span {
        --bf-title-ry: 0.58em;
    }

    .bf-title--lg {
        font-size: 27px;
        line-height: 36px;
        font-weight: 600;
    }

    .bf-desc {
        margin-top: 8px;
        font-family: var(--bf-text);
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.6px;
        padding-bottom: 12px;
    }

    /* products */
    .bf-products {
        padding-top: 48px;
    }

    .bf-products .bf-title {
        padding-bottom: 0;
    }

    .bf-page .bf-products .bf-desc {
        margin-top: 8px;
        padding-bottom: 0;
    }

    .bf-cats {
        flex-wrap: wrap;
        gap: 12px 16px;
        width: 236px;
        margin: 16px auto 24px;
    }

    .bf-page .bf-cat,
    .bf-page .bf-cat.active {
        width: 110px;
        height: 34px;
        padding: 0 12px;
        font-size: 14px;
        line-height: 18px;
    }

    .bf-products .bf-product-panel {
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: clip;
        overflow-y: visible;
    }

    .bf-product-panel .bf-slide {
        width: 318px;
    }

    .bf-product-panel.bf-swiper-center .swiper-wrapper {
        justify-content: flex-start;
    }

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

    /* 设计稿按 393 宽、卡片 318 固定排版；更窄屏幕整卡等比缩小，保持右侧露出下一张卡 */
    @supports (zoom: 1) {
        @media (max-width: 380px) {
            .bf-product-panel .bf-slide {
                width: 303px;
            }

            .bf-product-panel .bf-card {
                zoom: 0.9528;
            }
        }

        @media (max-width: 370px) {
            .bf-product-panel .bf-slide {
                width: 291px;
            }

            .bf-product-panel .bf-card {
                zoom: 0.9151;
            }
        }

        @media (max-width: 340px) {
            .bf-product-panel .bf-slide {
                width: 259px;
            }

            .bf-product-panel .bf-card {
                zoom: 0.8145;
            }
        }
    }

    .bf-pic {
        height: 334px;
    }

    .bf-pic::before {
        height: 318px;
    }

    .bf-page .bf-pic-bg {
        width: 318px;
        height: 318px;
        filter: blur(1.5px);
    }

    /* 移动端默认合成图统一 top，避免按 slug 漏写 */
    .bf-page .bf-pic-product {
        top: 16px;
    }

    .bf-page .bf-pic--orpro2 .bf-pic-product {
        left: -39px;
    }

    .bf-page .bf-pic--opendots2 .bf-pic-product,
    .bf-page .bf-pic--opendotsair .bf-pic-product {
        left: -28px;
    }

    .bf-page .bf-pic--openfitpro .bf-pic-product {
        left: -19px;
    }

    .bf-page .bf-pic--openrunair2 .bf-pic-product {
        left: -14px;
    }

    .bf-page .bf-pic--openfitair2 .bf-pic-product,
    .bf-page .bf-pic--openswim .bf-pic-product,
    .bf-page .bf-pic--opencomm2 .bf-pic-product,
    .bf-page .bf-pic--openmeet .bf-pic-product,
    .bf-page .bf-pic--openmove .bf-pic-product,
    .bf-page .bf-pic--openfit2plus .bf-pic-product,
    .bf-page .bf-pic--opendotsone .bf-pic-product {
        left: -33px;
    }

    .bf-page .bf-pic.bf-pic--sku .bf-pic-product,
    .bf-page .bf-pic.bf-pic--alt .bf-pic-product {
        left: 0;
        top: 0;
        width: 100%;
        height: 318px;
    }

    .bf-page .bf-pic.bf-pic--sku.bf-pic--gift .bf-pic-product {
        height: 260px;
    }

    /* 오픈핏 2+ 그레이 图主体占画布比例大，按与默认合成图同等视觉面积缩到约 88% */
    .bf-page .bf-pic.bf-pic--sku.bf-pic--openfit2plus .bf-pic-product {
        box-sizing: border-box;
        padding: 19px 0;
    }

    /* 오픈컴 2 Type-A/C */
    .bf-page .bf-pic.bf-pic--alt.bf-pic--opencomm2:not(.bf-pic--alt-sm) .bf-pic-product {
        transform: scale(1.16);
        transform-origin: center center;
    }

    /* 오픈컴 2「동글 없음」小于 Type-A/C */
    .bf-page .bf-pic.bf-pic--alt-sm.bf-pic--opencomm2 .bf-pic-product {
        transform: scale(0.7);
        transform-origin: center center;
    }

    .bf-label {
        left: 227px;
        top: 16px;
        width: 75px;
        min-height: 24px;
        font-size: 12px;
        line-height: 1.2;
    }

    .bf-badge {
        width: 100px;
    }

    .bf-badge-text,
    .bf-badge--swim .bf-badge-text {
        padding: 2px 8px 6px;
        font-size: 14px;
        background-image: linear-gradient(-13deg, #f9a245 18.461%, #f5662c 62.283%);
    }

    .bf-badge-text em {
        font-size: 24px;
    }

    .bf-gift-bar {
        left: 16px;
        top: 260px;
        width: 286px;
        background:
            url('https://static.shokz.co.kr/resource/2026/10/14/black-friday/gift-bar-icon-mo.webp') no-repeat left top / 286px 40px,
            url('https://static.shokz.co.kr/resource/2026/10/14/black-friday/gift-bar-wave-mo.webp') no-repeat 204px 0 / 82px 40px,
            #fff4f0;
    }

    .bf-page .bf-gift-bar-wave {
        display: none;
    }

    .bf-gift-bar-text {
        left: 24px;
        width: 168px;
        padding-left: 0;
        line-height: 16px;
        white-space: normal;
    }

    .bf-page .bf-gift-bar-pic {
        left: 219px;
        top: -14px;
    }

    .bf-page .bf-gift-bar-pic--pouch {
        left: 219px;
        top: -17px;
    }

    .bf-page .bf-gift-bar-pic--case {
        left: 222px;
        top: -17px;
    }

    .bf-page .bf-gift-bar-pic--cap {
        left: 223px;
        top: -15px;
    }

    .bf-info {
        padding: 0 16px;
    }

    .bf-info-head {
        gap: 8px;
    }

    .bf-name {
        font-size: 17px;
        line-height: 23px;
        letter-spacing: 0;
    }

    .bf-product-desc {
        color: #2f2f2f;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0;
    }

    .bf-price-new {
        font-size: 17px;
        line-height: 23px;
        letter-spacing: 0;
    }

    .bf-price-old {
        font-family: var(--bf-text);
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    .bf-price-row {
        align-items: center;
    }

    .bf-price {
        min-height: 23px;
        gap: 8px;
    }

    .bf-page .bf-btn-npay {
        width: 137px;
    }

    .bf-page .bf-btn-npay img {
        width: 53px;
        height: 16px;
    }

    .bf-page .bf-npay-tip {
        width: 108px;
        height: 42px;
        top: calc(100% + 0px);
        padding: 0 6px;
        font-size: 12px;
        line-height: 1;
    }

    .bf-page .bf-npay-tip > span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        line-height: 1;
        transform: translateY(2px);
    }

    .bf-card--no-npay .bf-price {
        min-height: 23px;
    }

    .bf-npay {
        height: 180px;
        background:
            url('https://static.shokz.co.kr/resource/2026/10/16/npay-banner-texture-m_6ad1ca99924ea.webp') center / cover no-repeat,
            linear-gradient(252.8deg, rgba(255, 110, 61, 0) 45%, rgba(255, 110, 61, 0.41) 139.58%),
            url('https://static.shokz.co.kr/resource/2026/10/16/npay-banner-glow_6ad1c6b7bdb86.webp') right -310.82px top -72.7px / 754.31px 324.56px no-repeat,
            #000;
    }

    .bf-page .bf-npay-purchase {
        display: none;
    }

    .bf-npay-copy {
        z-index: 1;
        left: 12px;
        top: calc(50% - 5.5px);
        width: 247px;
        gap: 12px;
    }

    .bf-npay-title {
        font-size: 19px;
        line-height: 24px;
    }

    .bf-npay-cond {
        color: rgba(255, 255, 255, 0.8);
    }

    .bf-page .bf-npay-cond img {
        width: 54px;
        height: 18px;
    }

    .bf-npay-benefit {
        height: 31px;
        font-family: var(--bf-display);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: 0.16px;
    }

    .bf-npay-ticket {
        left: auto;
        right: 16.19px;
        top: 68.33px;
        width: 132.101px;
        height: 89.915px;
    }

    /* 窄于设计稿（横幅 361px）时券会压到左侧「25만원 이상 Npay 결제 시」，靠右并缩小让位 */
    @media (max-width: 392px) {
        .bf-npay-ticket {
            right: 6px;
            transform: scale(0.85);
            transform-origin: right center;
        }
    }

    .bf-npay-ticket-copy {
        left: 22.11px;
        top: 31.76px;
        width: 79.204px;
        height: 43.134px;
    }

    .bf-npay-ticket-row {
        width: 76.326px;
        height: 36.695px;
    }

    .bf-npay-ticket-pct {
        width: 41.351px;
        height: 32.249px;
    }

    .bf-npay-ticket-pct span {
        font-size: 24px;
    }

    .bf-npay-ticket-arrow {
        width: 23.628px;
        height: 24.867px;
    }

    .bf-page .bf-npay-ticket-arrow img {
        width: 21.798px;
        height: 23.153px;
        transform: rotate(175.28deg) scaleY(-1);
    }

    .bf-swiper-page .swiper-pagination {
        gap: 8px;
    }

    .bf-swiper-page .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }

    .bf-swiper-page .swiper-pagination-bullet-active {
        width: 36px;
    }

    /* 1+1 event */
    .bf-event {
        padding: 48px 0;
    }

    .bf-event .bf-section-inner {
        gap: 24px;
    }

    .bf-event .bf-title {
        padding-bottom: 0;
    }

    .bf-reminder-wrap.is-open {
        z-index: 10005;
    }

    .bf-reminder-wrap::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
    }

    .bf-reminder-wrap.is-open::before {
        opacity: 1;
        visibility: visible;
    }

    .bf-popover {
        position: fixed;
        top: 50%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: calc(100vw - 32px);
        max-width: 492px;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        padding: 36px 16px 16px 8px;
        border: 0;
        border-radius: 12px;
        filter: none;
        transform: translate(-50%, -50%);
    }

    .bf-popover::before,
    .bf-popover::after {
        display: none;
    }

    .bf-page .bf-popover-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-left: 19.5px;
        color: #737373;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 0;
    }

    .bf-page .bf-popover-close {
        display: block;
    }

    .bf-event-list {
        width: 100%;
        gap: 16px;
    }

    .bf-event-card {
        height: 286px;
    }

    .bf-event-card--first-day {
        background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            linear-gradient(124.24deg, #572aa8 35.49%, #e35783 85.224%, #ff7148 98.741%, #ff3c3d 109.65%);
    }

    .bf-event-card--signature {
        background: #0a010e;
    }

    .bf-event-card--signature::before {
        background:
            linear-gradient(102.56deg, rgba(95, 48, 147, 0) 55.321%, #3f2467 101.32%, #35164b 190.48%),
            linear-gradient(133.69deg, rgba(87, 42, 168, 0.3) 28.333%, rgba(227, 87, 131, 0.3) 78.277%, rgba(255, 113, 72, 0.3) 91.852%, rgba(255, 60, 61, 0.3) 102.8%);
    }

    .bf-page .bf-event-bg {
        object-fit: fill;
    }

    .bf-event-copy {
        top: 16px;
        left: 16px;
        transform: none;
    }

    .bf-event-card--first-day .bf-event-copy {
        left: 16px;
        bottom: 16px;
        width: 281px;
        gap: 0;
        justify-content: space-between;
    }

    .bf-event-card--signature .bf-event-copy {
        left: 16px;
        width: 329px;
        gap: 16px;
    }

    .bf-event-head,
    .bf-event-card--signature .bf-event-head {
        gap: 4px;
    }

    .bf-event-title {
        font-size: 19px;
        line-height: 24px;
        font-weight: 600;
        letter-spacing: 0;
        background-image: linear-gradient(152.34deg, #ffda99 19.432%, #e46a2b 120.37%);
    }

    /* 卡片高度固定，标题不能折行；窄于设计稿时按卡片内宽 (100vw - 64px) 缩小字号 */
    .bf-event-card--signature .bf-event-title {
        padding-bottom: 0;
        font-size: min(19px, calc((100vw - 64px) / 17.5));
        white-space: nowrap;
        background-image: linear-gradient(154.6deg, #ffda99 19.432%, #e46a2b 120.37%);
    }

    .bf-event-text {
        width: 289px;
        font-family: var(--bf-text);
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
    }

    .bf-event-text-line {
        display: block;
        white-space: nowrap;
    }

    .bf-event-card--first-day .bf-event-btn {
        margin-top: 33px;
    }

    .bf-event-lines {
        gap: 4px;
        font-family: var(--bf-text);
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    .bf-event-lines .bf-event-lines-strong {
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
        font-weight: 400;
    }

    .bf-event-lines-strong strong {
        font-size: 16px;
    }

    .bf-page .bf-event-btn,
    .bf-page .bf-event-btn--lg {
        width: auto;
        min-width: 151px;
        height: 40px;
        padding: 0 12px;
        font-size: 15px;
        line-height: 22px;
        letter-spacing: 0.16px;
        font-weight: 400;
    }

    .bf-event-action {
        gap: 8px;
    }

    .bf-event-notes {
        gap: 4px;
        font-size: 11px;
        line-height: 16px;
        font-weight: 400;
    }

    .bf-event-card--first-day .bf-event-notes p:last-child {
        width: 330px;
        white-space: nowrap;
    }

    .bf-event-card--signature .bf-event-notes {
        gap: 26px;
    }

    .bf-event-card--signature .bf-event-notes p:first-child {
        width: 188px;
    }

    .bf-event-card--signature .bf-event-notes p:last-child {
        width: 266px;
    }

    .bf-page .bf-event-product {
        left: auto;
        right: 0;
        top: 68px;
        width: 160px;
        height: 160px;
        transform: none;
    }

    .bf-event-earphone {
        left: auto;
        right: 16px;
        top: 143px;
        width: 117.2px;
        height: 130.31px;
    }

    .bf-page .bf-event-earphone-reflection {
        left: 20px;
        top: 83px;
        width: 95.442px;
        height: 49.428px;
    }

    .bf-page .bf-event-earphone-case {
        width: 117.2px;
        height: 91.187px;
    }

    .bf-page .bf-event-earphone-sign {
        left: 14.29px;
        top: 7.06px;
        width: 84.539px;
        height: 84.539px;
    }

    /* gift */
    .bf-gift {
        padding-bottom: 24px;
    }

    .bf-gift.bf-sec {
        scroll-margin-top: 96px;
    }

    .bf-gift .bf-title {
        padding-bottom: 0;
    }

    .bf-gift .bf-desc {
        margin-top: 12px;
        padding-bottom: 0;
    }

    .bf-gift-boards {
        flex-direction: column;
        gap: 27px;
        margin-top: 32px;
    }

    .bf-gift-board--line,
    .bf-gift-board--bag {
        width: 361px;
        max-width: 100%;
    }

    .bf-gift-board--line {
        height: 710px;
    }

    .bf-gift-board--bag {
        height: 420px;
    }

    .bf-page .bf-gift-board-bg {
        height: calc(100% - 5px);
        object-fit: cover;
    }

    .bf-gift-grid {
        left: 16px;
        right: 16px;
        top: 70px;
        transform: none;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .bf-gift-grid::before,
    .bf-gift-item:nth-child(-n+2)::after {
        display: none;
    }

    .bf-gift-item {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .bf-gift-item + .bf-gift-item {
        margin-top: 24px;
        padding-top: 23px;
        border-top: 1px solid #d89977;
    }

    .bf-gift-item:nth-child(2) {
        order: 2;
    }

    .bf-gift-item:nth-child(3) {
        order: 1;
    }

    .bf-gift-item:nth-child(4) {
        order: 3;
    }

    .bf-gift-head {
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .bf-gift-item .bf-gift-cond {
        max-width: 173px;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 0;
        text-align: left;
        white-space: normal;
    }

    .bf-gift-item:first-child .bf-gift-cond {
        max-width: 129px;
    }

    .bf-page .bf-gift-pic {
        flex-shrink: 0;
    }

    .bf-gift-bag {
        left: 16px;
        top: 70px;
        align-items: flex-start;
        gap: 36px;
    }

    .bf-gift-bag .bf-gift-head .bf-gift-cond {
        text-align: left;
    }

    .bf-gift-cta {
        margin-top: 28px;
    }

    .bf-balance {
        scroll-margin-top: 48px;
        margin-top: 72px;
    }

    .bf-balance-title {
        font-size: min(28px, 7.5vw);
        line-height: 36px;
    }

    .bf-balance-title-line {
        display: block;
        white-space: nowrap;
    }

    .bf-page .bf-balance-link {
        font-size: 23px;
        line-height: 32px;
        font-weight: 600;
    }

    .bf-page .bf-balance-link img {
        width: 32px;
        height: 32px;
    }

    /* winners */
    .bf-winners {
        padding: 24px 0 48px;
    }

    .bf-winner-groups {
        margin-top: 16px;
        padding-top: 16px;
        gap: 16px;
    }

    .bf-winner-group {
        gap: 8px;
    }

    .bf-winner-title {
        font-family: var(--bf-text);
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
    }

    .bf-winner-list {
        font-size: 14px;
        font-weight: 400;
    }

    .bf-winner-list--grid {
        width: 100%;
        margin-left: 0;
        grid-template-columns: repeat(3, 100px);
        justify-content: space-between;
        column-gap: 0;
        row-gap: 8px;
    }

    /* notice */
    .bf-notice {
        padding: 48px 0;
    }

    /* 缩进抵消圆点占位（含字形左侧留白），使圆点到左边缘与文字到右边缘同为 16px */
    .bf-notice-list {
        width: 100%;
        padding-left: 14px;
        font-size: 19px;
        line-height: 30px;
        text-align: justify;
        word-break: normal;
        font-weight: 400;
    }
}

/* 사인 각인 이어폰 이벤트 응모 버튼 / 팝업 */
.bf-page button.bf-event-btn {
    border: 0;
    cursor: pointer;
}

.bf-page button.bf-event-btn:disabled {
    background: #a3a3a3;
    color: #fff;
    cursor: default;
}

.bf-quiz-layer[hidden],
.bf-quiz-form[hidden],
.bf-quiz-done[hidden],
.bf-quiz-msg[hidden] {
    display: none !important;
}

.bf-quiz-layer {
    position: fixed;
    z-index: 10010;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
}

.bf-quiz-dialog {
    position: relative;
    box-sizing: border-box;
    width: min(716px, 100%);
    border-radius: 12px;
    background: linear-gradient(73.97deg, #fdfdfd 38.307%, #f1f1f1 70.908%);
    box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.12);
    color: var(--bf-ink);
}

.bf-page .bf-quiz-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bf-quiz-form {
    box-sizing: border-box;
    padding: 52px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    text-align: center;
}

.bf-quiz-title {
    color: #575e64;
    font-family: var(--bf-display);
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
}

.bf-quiz-intro {
    font-family: var(--bf-text);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.68px;
}

.bf-quiz-intro strong {
    font-family: var(--bf-display);
    font-weight: 500;
}

.bf-quiz-field {
    width: min(377px, 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.bf-quiz-question {
    font-family: var(--bf-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0.16px;
    white-space: nowrap;
    word-break: keep-all;
}

.bf-page .bf-quiz-input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: var(--bf-ink);
    font-family: var(--bf-text);
    font-size: 16px;
    line-height: 24px;
}

.bf-page .bf-quiz-input:focus {
    outline: none;
    border-color: var(--bf-ink);
}

.bf-quiz-msg {
    color: #ff4d0a;
    font-family: var(--bf-text);
    font-size: 13px;
    line-height: 20px;
}

.bf-page .bf-quiz-submit {
    min-width: 218px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 4px;
    background: var(--bf-ink);
    color: #fff;
    font-family: var(--bf-text);
    font-size: 18px;
    line-height: 26px;
    cursor: pointer;
}

.bf-page .bf-quiz-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.bf-quiz-done {
    box-sizing: border-box;
    height: 440px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #575e64;
    font-family: var(--bf-display);
    font-size: 34px;
    font-weight: 600;
    line-height: 51px;
    text-align: center;
}

@media (max-width: 999px) and (pointer: coarse), (max-width: 999px) and (hover: none) {
    .bf-quiz-layer {
        padding: 6px;
    }

    .bf-quiz-dialog {
        width: min(375px, 100%);
    }

    .bf-page .bf-quiz-close {
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
    }

    .bf-quiz-form {
        padding: 48px 23px 40px;
        gap: 40px;
        text-align: center;
    }

    .bf-quiz-title {
        padding: 0 24px;
        font-size: 19px;
        line-height: 26px;
        text-align: center;
    }

    .bf-quiz-intro {
        font-size: 17px;
        line-height: 26px;
        word-break: keep-all;
        text-align: center;
    }

    .bf-quiz-field {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .bf-quiz-question {
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        white-space: nowrap;
        word-break: keep-all;
        text-align: center;
    }

    .bf-page .bf-quiz-input {
        height: 40px;
        font-size: 15px;
    }

    .bf-page .bf-quiz-submit {
        min-width: 209px;
        height: 40px;
        font-size: 16px;
        line-height: 22px;
    }

    .bf-quiz-done {
        height: 220px;
        font-size: 27px;
        line-height: 35px;
    }
}