/* 运动员弹窗专用字体名，避免影响页面其他写了 Shokz Sans 的地方；字体只含拉丁字形，韩文走 NotoSansKR。
   ?v=2609071820 在 CDN 上缓存了无 CORS 头的响应，跨域加载会被拦截，勿复用该参数 */
@font-face {
    font-family: "BM Shokz Sans Text";
    font-weight: 400;
    font-display: swap;
    src: url("https://static.shokz.co.kr/fonts/DisplaySans/ShokzSansText-Regular.woff2?v=2026101601") format("woff2");
}

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

/* Full-bleed: avoid shop #container / #wrapper gray gutters */
body:has(#brand-month) #wrapper,
body:has(#brand-month) #container_wr,
body:has(#brand-month) #container {
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
}

/* M shop.head 滚动后给 #container 加 .fixed，为已注释掉的 #container_title 预留 60px（jQuery 1.12 设不了 CSS 变量，总是走默认值） */
body:has(#brand-month) #container.fixed {
    padding-top: 0 !important;
}

/* Brand Month PC — scoped under .brand-month */
.brand-month {
    --bm-orange: #ff7a3d;
    --bm-orange-deep: #ff6008;
    --bm-orange-grad-from: #a42100;
    --bm-black: #050505;
    --bm-secondary: #2f2f2f;
    --bm-tertiary: #666;
    --bm-quaternary: #8d8d8d;
    --bm-white: #fff;
    --bm-bg: #fcfaf8;
    --bm-bg-2: #fbf9f6;
    --bm-bg-3: #f3f0e9;
    --bm-bg-4: #ebe6db;
    --bm-bg-5: #f6f5f1;
    --bm-radius: 12px;
    --bm-radius-btn: 4px;
    --bm-content: 1200px;
    --bm-narrow: 996px;
    width: 100%;
    color: var(--bm-black);
    background: var(--bm-bg);
    /* clip keeps wide decorative media contained without breaking sticky tabs */
    overflow: clip;
    word-break: keep-all;
}

.brand-month *,
.brand-month *::before,
.brand-month *::after {
    box-sizing: border-box;
}

/* Keep above component display rules (e.g. .bm-gift__img { display:block }) */
.brand-month .bm-only-m {
    display: none;
}

/* Keep html scrollable metric; lock visual via body position:fixed + top:-Y in JS */
html.bm-scroll-lock {
    overscroll-behavior: none;
}

body.bm-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.bm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.bm-container {
    width: 100%;
    max-width: var(--bm-content);
    margin: 0 auto;
}

.bm-h3 {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 44px;
    letter-spacing: 0.16px;
    color: var(--bm-black);
    text-align: center;
}

.bm-h3--orange {
    color: var(--bm-orange-deep);
}

.bm-h4 {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.16px;
    color: var(--bm-secondary);
    text-align: center;
}

.bm-h5 {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--bm-black);
}

.bm-body {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.16px;
    color: var(--bm-secondary);
    text-align: center;
}

.bm-body--tertiary {
    color: var(--bm-tertiary);
}

.bm-util {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: var(--bm-black);
}

.bm-note {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--bm-tertiary);
}

.bm-note a {
    color: inherit;
    text-decoration: underline;
}

.bm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: none;
    border-radius: var(--bm-radius-btn);
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0.16px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    width:248px;
}

.bm-btn:hover {
    opacity: 0.92;
}

.bm-btn--primary {
    background: var(--bm-orange);
    color: var(--bm-white);
}

.bm-btn--disabled,
.bm-btn:disabled {
    background: #c6c6c6;
    color: var(--bm-tertiary);
    cursor: not-allowed;
    opacity: 1;
}

.bm-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 2147483647;
    max-width: min(480px, calc(100vw - 32px));
    padding: 14px 18px;
    border-radius: 8px;
    background: rgba(32, 32, 32, 0.88);
    color: #fff;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    word-break: keep-all;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.bm-toast.is-show {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.bm-wheel.is-locked {
    opacity: 0.72;
    cursor: not-allowed;
}

.bm-step.is-done .bm-step__index {
    color: var(--bm-white);
    background: #737373;
}

.bm-orbit__slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.bm-btn--ghost {
    width: 100%;
    max-width: 282px;
    background: transparent;
    color: var(--bm-black);
    border: 1px solid rgba(5, 5, 5, 0.2);
}

.bm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 242px;
    padding: 4px 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    color: var(--bm-white);
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.3px;
    text-align: center;
}

.bm-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0.75px solid var(--bm-black);
    border-radius: 18px;
    font-family: "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
}

.bm-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bm-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, 0.1);
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
}

.bm-arrow img {
    display: block;
    width: 28px;
    height: 28px;
}

/* ===== Hero ===== */
.bm-hero {
    position: relative;
    width: 100%;
    height: 812px;
    overflow: hidden;
    color: var(--bm-white);
}

.bm-hero__media {
    position: absolute;
    inset: 0;
}

.bm-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.bm-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
}

.bm-hero__sound {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    color: #2f2f2f;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bm-hero__sound:hover {
    background: #fff;
}

.bm-hero__sound:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.bm-hero__sound-icon--on,
.bm-hero__sound[aria-pressed="true"] .bm-hero__sound-icon--off {
    display: none;
}

.bm-hero__sound[aria-pressed="true"] .bm-hero__sound-icon--on {
    display: block;
}

.bm-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1104px;
    height: 100%;
    margin: 0 auto;
    padding: 0 0 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.bm-hero__title-row {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1104px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.bm-hero__title {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 600;
    font-size: 65px;
    line-height: 85px;
    letter-spacing: 0;
    color: var(--bm-white);
    white-space: nowrap;
}

.bm-hero__cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin-top: auto;
}

/* ===== Join ===== */
.bm-join {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
}

.bm-join__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bm-join__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 波浪交叉点（原图 865,461 / 1568×672）位于第二个图标正下方：x 50%，y = 图标底边 96+44+32-24+22+32+36+16+180 */
.bm-join__bg img.bm-only-pc {
    position: absolute;
    left: 50%;
    top: 422px;
    width: max(112%, 1480px);
    max-width: none;
    height: auto;
    transform: translate(-55.17%, -68.6%);
}

.bm-join__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #fcf5f1 0%, rgba(252, 245, 241, 0) 100%);
}

.bm-join__inner {
    position: relative;
    z-index: 1;
    max-width: var(--bm-narrow);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.bm-join__desc {
    margin-top: -24px;
}

.bm-join__paths {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.bm-join__path {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
}

.bm-join__label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
}

.bm-join__icon {
    display: block;
    width: auto;
    height: 180px;
    object-fit: contain;
}

/* ===== Section tabs (always in flow, sticky on scroll) ===== */
.bm-tabs {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    height: 50px;
    padding: 0 120px;
    background: linear-gradient(90deg, var(--bm-orange-grad-from) 0%, var(--bm-orange-deep) 100%);
}

.bm-tabs__inner {
    width: 100%;
    max-width: var(--bm-narrow);
    height: 100%;
    display: flex;
    align-items: stretch;
}

.bm-tabs__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--bm-white);
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.16px;
    cursor: pointer;
    font-weight: 400;
}

.bm-tabs__item.is-active {
    border-bottom-color: var(--bm-white);
}

/* ===== Intro ===== */
.bm-intro {
    padding: 96px 0;
    background: linear-gradient(180deg, #fcfaf8 0%, #fbf9f6 100%);
}

.bm-intro__inner {
    max-width: var(--bm-narrow);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.bm-intro__text {
    max-width: 520px;
}

.bm-intro__text p {
    margin: 0;
}

.bm-intro__gap {
    height: 22px;
}

.bm-intro__break {
    display: none;
}

.bm-intro__keep {
    white-space: nowrap;
}

/* ===== Journey / Timeline ===== */
.bm-journey {
    padding: 0 0 96px;
    background: linear-gradient(180deg, #fbf9f6 0%, #f3f0e9 100%);
}

.bm-journey__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.bm-timeline {
    width: 588px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 128px;
}

.bm-timeline__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.bm-timeline__stage {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 40px;
}

.bm-timeline__arc {
    position: absolute;
    left: 50%;
    top: -42px;
    transform: translateX(-50%);
    width: 1920px;
    height: 960px;
    pointer-events: none;
    opacity: 0.9;
}

.bm-timeline__arc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bm-timeline__years {
    position: absolute;
    left: 50%;
    top: -104px;
    width: 900px;
    height: 220px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Year chip: positioned by DOT CENTER on the arc */
.bm-timeline__year {
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 0.16px;
    color: var(--bm-quaternary);
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    transform-origin: center center;
    transition: left 0.35s ease, top 0.35s ease, transform 0.35s ease, color 0.35s ease;
}

.bm-timeline__year > span {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Dot centers sit on the arc (R≈950)；按相对当前年份的 data-offset（首尾循环）定位，超出 ±3 的不显示 */
.bm-timeline__year:not([data-offset]) { display: none; }
.bm-timeline__year[data-offset="-3"] { left: calc(50% - 540px); top: 228px; --rot: -34.6deg; }
.bm-timeline__year[data-offset="-2"] { left: calc(50% - 373px); top: 135px; --rot: -22.87deg; }
.bm-timeline__year[data-offset="-1"] { left: calc(50% - 188px); top: 80px; --rot: -11.64deg; }
.bm-timeline__year[data-offset="0"] { left: 50%; top: 60px; --rot: 0deg; }
.bm-timeline__year[data-offset="1"] { left: calc(50% + 188px); top: 80px; --rot: 11.64deg; }
.bm-timeline__year[data-offset="2"] { left: calc(50% + 373px); top: 135px; --rot: 22.87deg; }
.bm-timeline__year[data-offset="3"] { left: calc(50% + 540px); top: 228px; --rot: 34.6deg; }

.bm-timeline__year.is-active {
    color: var(--bm-orange-deep);
}

.bm-timeline__dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #e0e0e0;
    flex-shrink: 0;
}

.bm-timeline__year.is-active .bm-timeline__dot {
    background: var(--bm-orange-deep);
}

.bm-timeline__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.bm-timeline__media {
    position: relative;
    width: 282px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-timeline__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Figma 4157:63893：240×123 置于 282×180 内（上 28 / 左右 21 / 下 29），百分比相对容器宽度，PC/M 通用 */
.bm-timeline__media img.is-inset {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 9.929% 7.447% 10.284%;
}

.bm-timeline__mark {
    position: absolute;
    left: 28.723%;
    top: 55%;
    width: 42.553%;
    pointer-events: none;
}

.bm-timeline__mark[hidden] {
    display: none;
}

.bm-timeline__mark svg {
    display: block;
    width: 100%;
    height: auto;
}

.bm-timeline__caption {
    width: 588px;
    min-height: 22px;
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
}

.bm-timeline__text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Figma 1938:3857：说明下空一行（22px）后为 12/16 注释 */
.bm-timeline__note {
    margin: 22px 0 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.16px;
    font-weight: 400;
    color: var(--bm-tertiary);
    text-align: center;
    white-space: nowrap;
    min-height: 16px;
}

/* 无注释的年份保留占位，切换年份时下方箭头和区块不位移 */
.bm-timeline__note[hidden] {
    display: block;
    visibility: hidden;
}

.bm-timeline__detail {
    display: contents;
}

.bm-timeline__active-year {
    display: none;
}

/* ===== Athletes ===== */
.bm-athletes {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.bm-athletes__br-m {
    display: none;
}

.bm-athletes__rail {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    /* break out of .bm-container horizontal padding so rail can use full 1200px */
    width: calc(100% + 240px);
    max-width: 1200px;
    margin-left: -120px;
    margin-right: -120px;
    height: 240px;
}

/* 卡片多于设计稿 11 张时折叠卡等比收窄，保证总宽不超 1200px */
.bm-athlete {
    position: relative;
    flex: 0 1 72px;
    width: 72px;
    min-width: 48px;
    height: 240px;
    padding: 12px;
    border: none;
    border-radius: var(--bm-radius);
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    transition: flex-basis 0.35s ease, width 0.35s ease;
    /* Prefer double-tap open over browser zoom on mobile */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.bm-athlete.is-expand {
    flex: 1 1 320px;
    width: auto;
    min-width: 320px;
    max-width: 420px;
}

.bm-athlete__media {
    position: absolute;
    inset: 0;
}

.bm-athlete__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC 悬停（展开）时换图，移动端在下方媒体查询里隐藏 */
.bm-athlete__media .bm-athlete__hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.bm-athlete.is-expand .bm-athlete__hover {
    opacity: 1;
}

/* Figma 2928:2433 折叠态：50% 黑蒙层 + 竖排白色姓名 */
.bm-athlete__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.bm-athlete.is-fold .bm-athlete__media::after {
    opacity: 1;
}

.bm-athlete__name {
    position: absolute;
    z-index: 2;
    color: var(--bm-white);
    white-space: nowrap;
    text-align: left;
}

.bm-athlete.is-fold .bm-athlete__name {
    left: 13px;
    top: 12px;
    width: 22px;
    font-family: "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.16px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Figma 2928:2444 展开态：左上角横排姓名 */
.bm-athlete.is-expand .bm-athlete__name {
    left: 12px;
    top: 12px;
    font-family: "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.32px;
}

/* ===== Milestone / Gift ===== */
.bm-milestone {
    padding: 0 0 96px;
    background: linear-gradient(180deg, #f3f0e9 0%, #ebe6db 100%);
}

.bm-milestone__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.bm-milestone__title {
    width: 100%;
    text-align: center;
}

.bm-milestone__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.bm-milestone__h1,
.bm-milestone__line {
    margin: 0;
    color: #000;
    opacity: 0.18;
    transition: opacity 0.05s linear;
}

.bm-milestone__h1 {
    font-family: "Pretendard", "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 85px;
    letter-spacing: 0;
}

.bm-milestone__stack--m {
    max-width: 361px;
    margin: 0 auto;
    gap: 0;
}

.bm-milestone__line {
    display: block;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -3.84px;
    text-align: center;
    word-break: keep-all;
}

.bm-milestone__sub {
    width: 100%;
}

.bm-milestone__br-m {
    display: none;
}

.bm-gift {
    width: 996px;
    max-width: 100%;
    border-radius: var(--bm-radius);
    overflow: hidden;
}

.bm-gift__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== Engage / Wheel ===== */
.bm-engage {
    position: relative;
    padding: 96px 0;
    background: #ece7dd;
    overflow: hidden;
}

/* Section-level decorative BG: PC 1938:3925 / M 1938:4512 */
.bm-engage__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bm-engage__bg img {
    position: absolute;
    max-width: none;
    display: block;
}

/* PC fill: cover section, curves sit lower-right behind wheel */
.bm-engage__bg--pc img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.bm-engage__bg--pc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(-43.51deg, rgb(236, 231, 221) 8.4407%, rgba(236, 231, 221, 0) 22.101%),
        linear-gradient(43.51deg, rgb(236, 231, 221) 39.132%, rgba(236, 231, 221, 0) 53.436%),
        linear-gradient(180deg, rgb(236, 231, 221) 26.928%, rgba(236, 231, 221, 0) 72.804%);
    pointer-events: none;
}

/* M: section-level fill (Figma 1938:4512); CDN asset already cropped */
.bm-engage__bg--m img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.bm-engage__bg--m::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #ece7dd 65.464%, rgba(236, 231, 221, 0) 72.804%);
    pointer-events: none;
}

.bm-engage__inner {
    position: relative;
    z-index: 1;
    max-width: var(--bm-narrow);
    padding: 0;
}

.bm-engage__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    text-align: center;
}

.bm-engage__grid {
    display: grid;
    grid-template-columns: 486px 486px;
    gap: 24px;
    align-items: start;
}

.bm-steps {
    padding-top: 57px;
}

.bm-steps__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.bm-step {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 32px;
    align-items: start;
    position: relative;
}

.bm-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 36px;
    bottom: -40px;
    width: 1px;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.25), rgba(5, 5, 5, 0.08));
    pointer-events: none;
}

.bm-step__index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--bm-white);
    color: var(--bm-tertiary);
    font-family: "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-size: 15px;
    line-height: 18px;
    position: relative;
    z-index: 1;
}

.bm-step.is-active .bm-step__index {
    color: var(--bm-white);
    background: linear-gradient(90deg, #bc1205 0%, #d32107 12%, #ff4608 46%, #ff4b08 76%, #fe8245 100%);
}

.bm-step__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.bm-step .bm-h5,
.bm-step .bm-util,
.bm-step .bm-note {
    text-align: left;
}

/* PC Steps — Figma 1938:3931（文字列 418px；Step1 标题→说明 8 / 说明→按钮→勾选 16；Step2、3 均为 8） */
@media (min-width: 1000px) {
    .bm-step__body {
        gap: 8px;
    }

    .bm-step[data-bm-step="1"] .bm-step__body > .bm-btn,
    .bm-step[data-bm-step="1"] .bm-agree-wrap {
        margin-top: 8px;
    }

    .bm-step[data-bm-step="1"] .bm-h5 {
        line-height: 26px;
        letter-spacing: 0;
        word-break: normal;
    }

    .bm-step[data-bm-step="1"] .bm-util {
        line-height: 21px;
    }

    .bm-step[data-bm-step="2"] .bm-h5,
    .bm-step[data-bm-step="3"] .bm-h5 {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.16px;
    }

    .bm-step[data-bm-step="2"] .bm-util,
    .bm-step[data-bm-step="3"] .bm-util {
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
    }

    .bm-step .bm-btn {
        width: auto;
        height: 48px;
        padding: 0 32px;
        white-space: nowrap;
    }

    .bm-step[data-bm-step="1"] .bm-btn {
        font-size: 17px;
        line-height: 27px;
        letter-spacing: -0.68px;
    }

    .bm-step[data-bm-step="2"] .bm-btn {
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0.16px;
    }

    .bm-agree__text {
        font-size: 12px;
    }

    .bm-agree__line {
        white-space: nowrap;
    }
}

.bm-agree-wrap {
    position: relative;
}

.bm-agree {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
}

/* Figma 2753:4822 气泡浮窗 — 相对勾选框定位，非整段文案底部 */
.bm-agree-popover {
    position: absolute;
    left: -20px;
    /* 勾选框高 16px + top 1px，尖端距框底约 6px，箭头高 8px → 气泡顶 ≈ 25px */
    top: 30px;
    z-index: 5;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 48px);
    padding: 12px;
    border: 1px solid #f1f1f1;
    border-radius: 6px;
    background: #fff;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.04),
        0 18px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.bm-agree-popover.is-show {
    opacity: 1;
    visibility: visible;
}

.bm-agree-popover[hidden] {
    display: block !important;
}

.bm-agree-popover__arrow {
    position: absolute;
    /* 相对 .bm-agree-wrap 仍对准勾选框中心 x=8；气泡 left:-50px → 8-(-50)=58 */
    left: 28px;
    top: -8px;
    width: 16px;
    height: 8px;
    margin: 0;
    transform: translateX(-50%);
    line-height: 0;
    pointer-events: none;
}

.bm-agree-popover__arrow svg {
    display: block;
    width: 16px;
    height: 8px;
}

.bm-agree-popover__text {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    color: #666;
    white-space: nowrap;
}


/* 盖过移动端 `input[type=checkbox]{-webkit-appearance:checkbox}`，避免原生勾出现在条款右侧 */
.brand-month .bm-agree__input {
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    overflow: hidden;
}

.bm-agree__box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1px solid #c6c6c6;
    border-radius: 2px;
    background: var(--bm-white);
}

.bm-agree__input:checked + .bm-agree__box {
    border-color: var(--bm-orange-deep);
    background-color: var(--bm-orange-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bm-agree__text {
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: var(--bm-quaternary);
}

.bm-agree__line {
    display: inline;
}

.bm-wheel-wrap {
    position: relative;
    width: 486px;
    min-height: 614px;
}

.bm-wheel {
    position: relative;
    z-index: 2;
    width: 480px;
    height: 480px;
    margin: 0 auto;
    cursor: pointer;
}

.bm-wheel:focus-visible {
    outline: 2px solid var(--bm-orange);
    outline-offset: 4px;
    border-radius: 50%;
}

/* Pointer + hub stay fixed over the spinning wheel (480 base) */
.bm-wheel__pointer {
    position: absolute;
    left: 50%;
    top: 22;
    z-index: 5;
    display: block;
    width: 72px;
    height: auto;
    max-width: none;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

.bm-wheel__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    display: block;
    width: 128px;
    height: 128px;
    max-width: none;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    border-radius: 50%;
}

.bm-wheel__spin {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    transition: transform 3.2s cubic-bezier(0.12, 0.75, 0.12, 1);
    will-change: transform;
}

.bm-wheel__spin.is-spinning {
    pointer-events: none;
}

.bm-wheel__base {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    width: 480px;
    height: 480px;
    max-width: none;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none;
}

.bm-wheel__prizes {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

/* Figma Spin-KR 3321:29643 — 8 wedges (mid-angle i*45+22.5) rotate as a whole;
   on the 480 wheel: image 100×100 centred at r≈148, name 57px wide centred at r≈90 */
.bm-wheel__prize {
    position: absolute;
    inset: 0;
    transform: rotate(calc(var(--i) * 45deg + 22.5deg));
}

.bm-wheel__prize-img {
    position: absolute;
    left: 39.5833%;
    top: 8.75%;
    display: block;
    width: 20.8333%;
    height: 20.8333%;
    max-width: none;
    object-fit: contain;
    user-select: none;
}

.bm-wheel__prize-name {
    position: absolute;
    left: 44.0625%;
    top: 31.25%;
    display: -webkit-box;
    width: 11.875%;
    overflow: hidden;
    font-family: "Pretendard", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 13.333px;
    color: #666;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
    transform: translateY(-50%);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bm-share-float {
    position: absolute;
    left: -3px;
    bottom: 0;
    z-index: 3;
    width: 486px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}

.bm-share-float__media {
    flex: 0 0 100px;
    width: 100px;
}

.bm-share-float__media img {
    display: block;
    width: 100px;
    height: auto;
    max-width: none;
}

.bm-share-float__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bm-share-float__title {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.32px;
    color: var(--bm-black);
    text-align: left;
}

.bm-share-float__desc {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--bm-secondary);
    text-align: left;
}

.bm-share-float__br-m {
    display: none;
}

.bm-engage__br-m {
    display: none;
}

.bm-share-float__cta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 2px 0 2px 4px;
    border: none;
    background: transparent;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.32px;
    color: var(--bm-black);
    text-decoration: none;
    cursor: pointer;
}

.bm-share-float__cta:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.bm-share-float__cta-text {
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.bm-share-float__cta-icon {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
}

/* ===== Memory card modal — Figma 1951:11475 (PC) / 1951:11494 (M) ===== */
.bm-memory-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bm-memory-modal[hidden] {
    display: none !important;
}

.bm-memory-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.45);
}

.bm-memory-modal__panel {
    position: relative;
    z-index: 1;
    width: 680px;
    max-width: calc(100vw - 48px);
}

.bm-memory-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 560px;
    padding: 48px;
    border-radius: 12px;
    background: #ff6008;
    box-sizing: border-box;
}

.bm-memory-card__deco {
    position: absolute;
    pointer-events: none;
    max-width: none;
}

.bm-memory-card__deco.bm-only-pc {
    left: -6%;
    top: -8%;
    width: 95%;
    height: auto;
}

.bm-memory-card__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.bm-memory-card__close img {
    display: block;
    width: 28px;
    height: 28px;
}

.bm-memory-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
    width: 100%;
    max-width: 584px;
    margin-left: auto;
}

.bm-memory-card__title {
    margin: 0;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 68px;
    line-height: 80px;
    letter-spacing: -0.48px;
    color: #fff;
    word-break: keep-all;
}

.bm-memory-card__head {
    position: relative;
    width: 100%;
}

.bm-memory-card__logo {
    display: block;
    flex: none;
    line-height: 0;
}

.bm-memory-card__logo svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bm-memory-card__logo--pc {
    width: 80px;
    height: 32px;
}

.bm-memory-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.bm-memory-card__rule {
    width: 100%;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.85);
}

.bm-memory-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.bm-memory-card__name,
.bm-memory-card__region {
    margin: 0;
    width: 200px;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.16px;
    color: #fff;
    word-break: break-word;
}

.bm-memory-card__region {
    text-align: right;
}

.bm-memory-card__quote {
    margin: 0;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.16px;
    color: #fff;
    white-space: pre-wrap;
    word-break: break-all;
}

.bm-memory-card__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 2px 0 2px 4px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.bm-memory-card__ig {
    display: block;
    width: 24px;
    height: 24px;
    flex: none;
}

.bm-memory-card__share-text {
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.16px;
    color: #fff;
    white-space: nowrap;
}

.bm-memory-card__chevron {
    display: block;
    width: 22px;
    height: 22px;
    flex: none;
}

.bm-memory-card.is-capturing .bm-memory-card__close,
.bm-memory-card.is-capturing .bm-memory-card__share {
    visibility: hidden;
}

.bm-memory-card__share.is-loading {
    cursor: progress;
}

.brand-month .bm-memory-card__share.is-loading .bm-memory-card__chevron {
    display: none;
}

.bm-memory-card__share.is-loading::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    animation: bmShareSpin 0.8s linear infinite;
}

@keyframes bmShareSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Prize modal — Figma 1938:5460 (PC) / 1938:5479 (M) ===== */
.bm-wheel-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bm-wheel-modal[hidden] {
    display: none !important;
}

.bm-wheel-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.45);
}

.bm-wheel-modal__panel {
    position: relative;
    z-index: 1;
    width: 716px;
    height: 440px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 12px;
    background: #f7f5f2;
}

.bm-wheel-modal__bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 12px;
    pointer-events: none;
}

.bm-wheel-modal__bg {
    position: absolute;
    left: 0;
    top: -163.59%;
    width: 100%;
    height: 442.67%;
    max-width: none;
    object-fit: cover;
}

.bm-wheel-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

.bm-wheel-modal__close img {
    display: block;
    width: 28px;
    height: 28px;
}

.bm-wheel-modal__prize {
    position: absolute;
    left: 225px;
    top: 37px;
    z-index: 1;
    width: 240px;
    height: 240px;
    overflow: hidden;
    pointer-events: none;
}

.bm-wheel-modal__prize img {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.bm-wheel-modal__copy {
    position: absolute;
    left: 50%;
    bottom: 36px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 575px;
    max-width: calc(100% - 48px);
    transform: translateX(-50%);
    text-align: center;
}

.bm-wheel-modal__title {
    margin: 0;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.16px;
    color: var(--bm-black);
    word-break: keep-all;
}

.bm-wheel-modal__desc {
    margin: 0;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.16px;
    color: var(--bm-secondary);
    word-break: keep-all;
}

.bm-wheel-modal__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 2px 0 2px 4px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.16px;
    color: var(--bm-black);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.bm-wheel-modal__link-icon {
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
}

/* ===== Athlete modal — Figma 1938:5474 ===== */
.bm-athlete-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* 连击卡片打开弹窗时，后续点击会把整块弹窗选中成蓝色 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bm-athlete-modal img {
    -webkit-user-drag: none;
}

.bm-athlete-modal[hidden] {
    display: none !important;
}

.bm-athlete-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.45);
}

.bm-athlete-modal__panel {
    position: relative;
    z-index: 1;
    flex: none;
    width: 716px;
    height: 440px;
    max-width: min(716px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    aspect-ratio: 716 / 440;
    overflow: hidden;
    border-radius: 12px;
    background: #f2f2f2;
}

.bm-athlete-modal__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 12px;
    pointer-events: none;
}

.bm-athlete-modal__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.bm-athlete-modal.is-loading .bm-athlete-modal__photo img {
    visibility: hidden;
}

/* 延迟淡入，缓存命中时不闪 loading */
.bm-athlete-modal.is-loading .bm-athlete-modal__photo::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(5, 5, 5, 0.12);
    border-top-color: #050505;
    border-radius: 50%;
    animation: bm-athlete-spin 0.8s linear infinite, bm-athlete-fade 0.2s ease 0.15s both;
}

@keyframes bm-athlete-spin {
    to { transform: rotate(360deg); }
}

@keyframes bm-athlete-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bm-athlete-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

.bm-athlete-modal__close img {
    display: block;
    width: 28px;
    height: 28px;
}

.bm-athlete-modal__copy {
    position: absolute;
    left: calc(50% - 152px);
    top: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 358px;
    transform: translate(-50%, -50%);
}

.bm-athlete-modal__copy[hidden] {
    display: none;
}

.bm-athlete-modal__name {
    margin: 0;
    width: 100%;
    font-family: "BM Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.16px;
    color: #050505;
    word-break: keep-all;
}

.bm-athlete-modal__bio {
    margin: 0;
    width: 100%;
    font-family: "BM Shokz Sans Text", Pretendard, "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
    color: #2f2f2f;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ===== Notice / T&C modal — Figma 1938:5555 ===== */
.bm-notice-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bm-notice-modal[hidden] {
    display: none !important;
}

.bm-notice-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.45);
}

.bm-notice-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 740px;
    height: 600px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.bm-notice-modal__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
    height: 64px;
    padding: 8px;
}

.bm-notice-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

.bm-notice-modal__close img {
    display: block;
    width: 28px;
    height: 28px;
}

.bm-notice-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 70px 40px;
    scrollbar-width: thin;
    scrollbar-color: #8d8d8d transparent;
}

.bm-notice-modal__body::-webkit-scrollbar {
    width: 6px;
}

.bm-notice-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.bm-notice-modal__body::-webkit-scrollbar-thumb {
    background: #8d8d8d;
    border-radius: 6px;
}

.bm-notice-modal__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.bm-notice-modal__title {
    margin: 0;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.16px;
    color: var(--bm-black);
    text-align: center;
}

.bm-notice-modal__text {
    width: 100%;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--bm-secondary);
    word-break: break-word;
}

.bm-notice-modal__text p {
    margin: 0;
    white-space: pre-wrap;
    min-height: 18px;
}

/* ===== Share form modal — Figma 1938:5501 ===== */
.bm-share-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bm-share-modal[hidden] {
    display: none !important;
}

.bm-share-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.45);
}

.bm-share-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 740px;
    height: 600px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.bm-share-modal__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
    height: 64px;
    padding: 8px;
}

.bm-share-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

.bm-share-modal__close img {
    display: block;
    width: 28px;
    height: 28px;
}

.bm-share-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 70px 32px;
}

.bm-share-modal__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.bm-share-modal__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: center;
}

.bm-share-modal__title {
    margin: 0;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.16px;
    color: #050505;
    word-break: keep-all;
}

.bm-share-modal__desc {
    margin: 0;
    width: 100%;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    color: #2f2f2f;
    word-break: keep-all;
}

.bm-share-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 480px;
}

.bm-share-form__row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.bm-share-form__row--2 {
    flex-direction: row;
    align-items: flex-start;
}

.bm-share-form__row--2 .bm-share-field {
    flex: 1 1 0;
    min-width: 0;
}

.bm-share-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.bm-share-field__label {
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.16px;
    color: #0a0a0a;
}

.bm-share-field__label i {
    font-style: normal;
    color: #f42525;
}

.bm-share-field__input,
.bm-share-field__textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    background: #fff;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #050505;
    outline: none;
    resize: none;
}

.bm-share-field__input {
    height: 51px;
}

.bm-share-field__textarea {
    height: 99px;
    min-height: 99px;
}

.bm-share-field__input:focus,
.bm-share-field__textarea:focus {
    border-color: #ff7a3d;
}

.bm-share-field__input::placeholder,
.bm-share-field__textarea::placeholder {
    color: #8d8d8d;
}

.bm-share-field--upload {
    gap: 16px;
}

.bm-share-field__hint {
    margin: -8px 0 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #737373;
    word-break: keep-all;
}

.bm-share-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px;
    border: 1px dashed #d4d4d4;
    border-radius: 6px;
    background: #f3f4f6;
    cursor: pointer;
}

.bm-share-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.bm-share-upload__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 2px;
    background: #fff;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 18.2px;
    color: #000;
}

.bm-share-upload__btn img {
    display: block;
    width: 20px;
    height: 20px;
}

.bm-share-consent {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: -8px;
    cursor: pointer;
}

.brand-month .bm-share-consent__input {
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    overflow: hidden;
}

.bm-share-consent__box {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1px solid #c6c6c6;
    border-radius: 2px;
    background: #fff;
}

.bm-share-consent__input:checked + .bm-share-consent__box {
    border-color: transparent;
    background: #ff7a3d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2L4.6 8.8L10 3.2' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.bm-share-consent__text {
    flex: 1 1 auto;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #8d8d8d;
    word-break: keep-all;
}

.bm-share-form__submit {
    width: 320px;
    max-width: 100%;
    min-width: 0;
    color: #fff;
}

.bm-share-form__submit:visited,
.bm-share-form__submit:hover,
.bm-share-form__submit:active {
    color: #fff;
}

/* ===== Offline events ===== */
.bm-offline {
    padding: 96px 0;
    background: linear-gradient(180deg, #f9faf9 0%, #f6f5f1 100%);
}

.bm-offline__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.bm-offline__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 588px;
}

.bm-offline__desc p {
    margin: 0;
}

.bm-offline__br-m {
    display: none;
}

.bm-offline__label {
    width: 100%;
}

.bm-events {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.bm-events__stage {
    position: relative;
    width: 100%;
    height: 381px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-event-card {
    display: flex;
    gap: 0;
    padding: 8px;
    border-radius: var(--bm-radius);
    background: linear-gradient(111deg, #cfc7b0 2%, #fff 98%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: left 0.5s ease, width 0.5s ease, height 0.5s ease, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}

/* 主卡与侧卡都绝对定位，切换时位置、尺寸可过渡 */
.bm-event-card--active {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 700px;
    height: 381px;
    transform: translate(-50%, -50%);
}

.bm-event-card--side {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 554px;
    height: 301px;
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.92);
}

.bm-event-card--left {
    left: 277px;
}

.bm-event-card--right {
    left: calc(100% - 277px);
}

/* 非相邻卡片收到中间淡出，避免多张侧卡叠在一起 */
.bm-event-card--hidden {
    left: 50%;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.8);
}

.bm-event-card__photo {
    flex: 0 0 auto;
    width: 322px;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .bm-event-card,
    .bm-event-card__photo {
        transition: none;
    }
}

.bm-event-card--side .bm-event-card__photo {
    width: 176px;
}

.bm-event-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-event-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 33px;
}

.bm-event-card__title {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.bm-event-card__city {
    font-family: "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
}

.bm-event-card__slash,
.bm-event-card__country {
    font-family: "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--bm-secondary);
}

.bm-event-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid rgba(5, 5, 5, 0.08);
    font-size: 14px;
    line-height: 21px;
    color: var(--bm-tertiary);
    text-align: right;
}

.bm-event-card__row img {
    flex: 0 0 20px;
}

.bm-event-card__body .bm-btn {
    margin-top: auto;
}

/* 서울 러닝 크루 — Figma 1951:6469（10/22 前）/ 1951:6488（10/22 起） */
.bm-event-card--seoul .bm-event-card__body {
    justify-content: space-between;
}

.bm-event-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bm-event-card--seoul .bm-event-card__city {
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 27px;
    line-height: 41px;
    color: var(--bm-black);
    white-space: nowrap;
}

.bm-event-card--seoul .bm-event-card__slash {
    width: 7px;
    height: 30px;
    font-size: 20px;
    line-height: 28px;
}

.bm-event-card--seoul .bm-event-card__country {
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 19px;
    line-height: 30px;
    letter-spacing: -0.76px;
    white-space: nowrap;
}

.bm-event-card--seoul .bm-event-card__row {
    gap: 17px;
    padding: 12px 0 0;
    border-top: 0.5px solid #666;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 13px;
    line-height: 21px;
}

.bm-event-card--seoul .bm-event-card__row:last-child {
    padding-bottom: 12px;
    border-bottom: 0.5px solid #666;
}

.bm-event-card--seoul .bm-event-card__row span {
    flex: 1 1 0;
    min-width: 0;
    word-break: break-all;
}

.bm-event-card__br-m {
    display: none;
}

.bm-event-card--seoul .bm-btn--ghost {
    height: 40px;
    min-height: 40px;
    max-width: none;
    margin-top: 0;
    padding: 0 32px;
    border-color: var(--bm-black);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
}

.bm-event-card__note {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 13px;
    line-height: 21px;
    color: var(--bm-tertiary);
    word-break: break-all;
    /* 固定两行：第二行约 295px，与卡片文字区 296px 几乎等宽，不能再自动折行 */
    white-space: nowrap;
}

/* 海外跑团（仅 PC）— Figma 3761:56318–56489 */
.bm-event-card--world {
    background: linear-gradient(110.86deg, #cfc7b0 2.4%, #fff 98.48%);
}

.bm-event-card--world .bm-event-card__body {
    justify-content: space-between;
}

.bm-event-card--world .bm-event-card__title {
    white-space: nowrap;
}

.bm-event-card--world .bm-event-card__city {
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 600;
    font-size: 27px;
    line-height: 41px;
    color: var(--bm-black);
    letter-spacing: 0;
}

.bm-event-card--world .bm-event-card__slash,
.bm-event-card--world .bm-event-card__country {
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 19px;
    line-height: 30px;
    letter-spacing: -0.76px;
}

.bm-event-card--world .bm-event-card__row {
    gap: 17px;
    padding: 12px 0 0;
    border-top: 0.5px solid #666;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 13px;
    line-height: 21px;
}

.bm-event-card--world .bm-event-card__row span {
    flex: 1 1 0;
    min-width: 0;
    word-break: break-word;
}

.bm-event-card--world .bm-btn--ghost {
    height: 40px;
    min-height: 40px;
    max-width: none;
    margin-top: 0;
    padding: 0 32px;
    border-color: var(--bm-black);
    font-family: "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.16px;
}

/* ===== Open stories orbit — Figma 1938:4104 / 3300:28717 (1200×500) ===== */
.bm-open {
    padding: 0 0 96px;
    background: linear-gradient(180deg, #f6f5f1 0%, #eeece6 100%);
}

.bm-open__inner {
    max-width: 1200px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.bm-open__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.bm-open__cta {
    width: 240px;
    color: #fff;
}

.bm-open__cta:visited,
.bm-open__cta:hover,
.bm-open__cta:active {
    color: #fff;
}

.bm-orbit {
    position: relative;
    flex-shrink: 0;
    width: 1200px;
    height: 500px;
    overflow: hidden;
}

/*
 * Earth placement (per product spec，设计稿 3300:28717 未画出):
 * - bottom edge flush with top of bottom slot (y=368)
 * - 97px gap from right edge of left-top slot (x=218 w=98 → 316)
 *   earth.left = 316 + 97 = 413; earth.top = 368 - 367 = 1
 */
.bm-orbit__earth {
    position: absolute;
    left: 413px;
    top: 1px;
    z-index: 2;
    display: block;
    width: 367px;
    height: 367px;
    pointer-events: none;
}

/* Figma 3300:28718 solid ring */
.bm-orbit__ring-wrap {
    position: absolute;
    left: calc(50% + 20.14px);
    top: -27px;
    z-index: 1;
    width: 1054.279px;
    height: 575.486px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.bm-orbit__ring {
    display: block;
    width: 1000px;
    height: 350px;
    flex: none;
    transform: rotate(-13.61deg);
    overflow: visible;
}

.bm-orbit__slot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: var(--s);
    height: var(--s);
    overflow: hidden;
    border-radius: var(--r, 12px);
    background: #d9d9d9;
}

/* 导出图自带圆角透明边，有图时去掉灰底避免圆角处露灰 */
.bm-orbit__slot:has(img) {
    background: transparent;
}

/* ===== Points — Figma 3221:27657 (PC) / 3221:27686 (M) ===== */
.bm-points {
    padding: 0 0 96px;
    background: linear-gradient(180deg, #eeece6 0%, #ebe7dc 100%);
}

.bm-points__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px;
    border-radius: var(--bm-radius);
}

.bm-points__bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--bm-radius);
    pointer-events: none;
}

.bm-points__bg {
    position: absolute;
    left: 0;
    top: -163.59%;
    display: block;
    width: 100%;
    height: 442.67%;
    max-width: none;
}

.bm-points__title {
    position: relative;
    width: 100%;
    line-height: 51px;
}

.bm-points__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 礼盒 446 + 券 426 = 872，窄屏 PC 时间距随剩余宽度收缩 */
    gap: clamp(24px, calc(100% - 872px), 184px);
    width: 100%;
}

.bm-points__gift {
    display: block;
    flex: none;
    width: 446px;
    height: 298px;
    max-width: none;
    object-fit: cover;
}

.bm-points__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: none;
    width: 426px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-points__ticket {
    position: relative;
    display: flex;
    align-items: center;
    height: 120px;
    padding: 0 44px 0 52px;
}

.bm-points__ticket-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
}

/* 竖分隔线素材为横向 1px SVG，旋转 90° 后按中心定位 */
.bm-points__line {
    position: absolute;
    top: 50%;
    left: 36.5px;
    display: block;
    width: 82px;
    height: 1px;
    max-width: none;
    transform: translate(-50%, -50%) rotate(90deg);
    pointer-events: none;
}

.bm-points__line--end {
    left: calc(100% - 37.5px);
}

.bm-points__info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding-top: 8px;
}

.bm-points__name {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: var(--bm-black);
    white-space: nowrap;
}

.bm-points__value {
    display: inline-block;
    margin: 0;
    font-family: "Albert Sans", "NotoSansKR", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: -0.56px;
    background: linear-gradient(90deg, #bc1205 0%, #d32107 7.0955%, #ff4608 27.054%, #ff4b08 44.954%, #fe8245 61.29%, #d1c7c2 78.094%, #d9d9d9 85.6%, #fff 100%) 0 0 / 142.19% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bm-points__action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: none;
    margin-left: auto;
}

.bm-points__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 32px;
    border-radius: var(--bm-radius-btn);
    background: var(--bm-orange);
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.6px;
    color: var(--bm-white);
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
}

/* 全站 a:link, a:visited { color:#000 } 优先级高于单类名 */
.brand-month .bm-points__btn,
.brand-month .bm-points__btn:link,
.brand-month .bm-points__btn:visited,
.brand-month .bm-points__btn:hover,
.brand-month .bm-points__btn:active {
    color: var(--bm-white);
}

.brand-month .bm-points__btn.is-done,
.brand-month .bm-points__btn:disabled {
    background: #c6c6c6;
    color: var(--bm-tertiary);
    cursor: default;
}

/* 이어폰 사용 스타일 설문 — 弹窗壳同 .bm-notice-modal */
.bm-survey-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bm-survey-modal[hidden] {
    display: none !important;
}

.bm-survey-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.45);
}

.bm-survey-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 860px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.bm-survey-modal__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
    height: 64px;
    padding: 8px;
}

.bm-survey-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(5, 5, 5, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.bm-survey-modal__close img {
    display: block;
    width: 28px;
    height: 28px;
}

.bm-survey-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 48px 40px;
}

.bm-survey-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bm-survey-group__title {
    display: block;
    margin: 0 0 16px;
    padding: 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bm-black);
}

.bm-survey-group__title span {
    margin-left: 4px;
    font-size: 15px;
    font-weight: 400;
    color: var(--bm-tertiary);
}

.bm-survey-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 40px;
}

.bm-survey-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

/* 移动端全站 checkbox 带 -webkit-appearance:checkbox，需显式去掉原生勾 */
.brand-month .bm-survey-check__input {
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.bm-survey-check__box {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--bm-black);
    border-radius: 4px;
    background: #fff;
}

.bm-survey-check__input:checked + .bm-survey-check__box {
    background: var(--bm-black);
}

.bm-survey-check__input:checked + .bm-survey-check__box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.bm-survey-check__input:focus-visible + .bm-survey-check__box {
    outline: 2px solid var(--bm-orange);
    outline-offset: 2px;
}

.bm-survey-check__label {
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--bm-black);
}

.bm-survey-form__submit {
    flex: none;
    align-self: flex-end;
    width: 200px;
}

.bm-points__note {
    margin: 0;
    font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
    font-size: 11px;
    line-height: 18px;
    color: #404040;
    white-space: nowrap;
}

@media (max-width: 999px) {
    .brand-month--pc .bm-points {
        padding: 0 0 48px;
    }

    .bm-points__card {
        padding: 32px 16px;
    }

    .bm-points__content {
        flex-direction: column;
        gap: 24px;
    }

    .bm-points__gift {
        width: 360px;
        height: auto;
        max-width: calc(100% + 32px);
        aspect-ratio: 1264 / 845;
    }

    .bm-points__list {
        width: 100%;
        max-width: 329px;
    }

    .bm-points__ticket {
        height: 139px;
        padding: 0 46px 0 42px;
    }

    .bm-points__line {
        left: 32.5px;
        width: 91px;
    }

    .bm-points__line--end {
        left: calc(100% - 31.5px);
    }

    .bm-points__info {
        flex: none;
        width: 107px;
        gap: 8px;
        padding-top: 0;
    }

    .bm-points__name span {
        display: block;
    }

    .bm-points__value {
        display: block;
        width: max-content;
        max-width: 100%;
        font-family: "NotoSansKR", sans-serif;
        letter-spacing: 0;
    }

    .bm-points__btn {
        height: 32px;
        padding: 0 24px;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 0;
    }

    /* 移动端按钮保持垂直居中，说明文字悬在按钮下方 */
    .bm-points__note {
        position: absolute;
        top: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%);
    }

    .bm-survey-modal {
        padding: 16px;
    }

    .bm-survey-modal__panel {
        width: 361px;
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
    }

    .bm-survey-modal__bar {
        height: 56px;
    }

    .bm-survey-modal__close {
        width: 40px;
        height: 40px;
    }

    .bm-survey-modal__close img {
        width: 24px;
        height: 24px;
    }

    .bm-survey-form {
        gap: 24px;
        padding: 0 16px 24px;
    }

    .bm-survey-group__title {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .bm-survey-group__title span {
        font-size: 14px;
    }

    .bm-survey-options {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bm-survey-check__label {
        font-size: 14px;
        line-height: 1.4;
    }

    .brand-month--pc .bm-survey-form__submit {
        align-self: stretch;
        width: 100%;
    }
}

/* Mobile — same template, Figma 1938:4121 (393) */
@media (max-width: 999px) {
    /* 全站公共 tail 注入的回到顶部按钮；本文件只在品牌月页加载 */
    #fixed_bottom {
        display: none !important;
    }

    .brand-month--pc .bm-h3 {
        font-weight: 600;
        font-size: 23px;
        line-height: 35px;
        letter-spacing: 0;
    }

    .brand-month--pc .bm-h4 {
        font-size: 19px;
        line-height: 26px;
    }

    .brand-month--pc .bm-h5 {
        font-size: 17px;
        line-height: 23px;
    }

    .brand-month--pc .bm-body,
    .brand-month--pc .bm-util {
        font-size: 13px;
        line-height: 21px;
    }

    .brand-month--pc .bm-container {
        padding: 0 16px;
    }

    .brand-month--pc .bm-btn {
        min-height: 40px;
        height: 40px;
        padding: 8px 24px;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
        width: auto;
    }

    /* Hero: stacked title, badge and button sit at the bottom */
    .brand-month--pc .bm-hero {
        height: calc(100vw * 612 / 393);
        min-height: 520px;
    }

    .brand-month.brand-month--pc .bm-only-pc {
        display: none;
    }

    .brand-month.brand-month--pc .bm-only-m {
        display: block;
    }

    .brand-month--pc .bm-hero__sound {
        left: 16px;
        bottom: 16px;
        width: 36px;
        height: 36px;
    }

    .brand-month--pc .bm-hero__sound svg {
        width: 20px;
        height: 20px;
    }

    .brand-month--pc .bm-hero__inner {
        max-width: none;
        padding: 0 16px 24px;
        justify-content: flex-end;
    }

    .brand-month--pc .bm-hero__title-row {
        position: static;
        transform: none;
        width: 267px;
        margin: 0 auto 12px;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .brand-month--pc .bm-hero__title {
        font-size: 34px;
        line-height: 44px;
        letter-spacing: 0;
        font-weight: 600;
        white-space: normal;
        text-align: center;
    }

    .brand-month--pc .bm-hero__cta-group {
        gap: 24px;
        margin-top: 0;
    }

    .brand-month--pc .bm-badge {
        min-width: 159px;
        width: 159px;
        padding: 2px 12px;
        font-size: 16px;
        line-height: 22px;
    }

    .brand-month--pc .bm-hero .bm-btn {
        width: 159px;
        color: #fff;
    }

    .brand-month--pc .bm-hero .bm-btn:visited,
    .brand-month--pc .bm-hero .bm-btn:hover,
    .brand-month--pc .bm-hero .bm-btn:active {
        color: #fff;
    }

    /* Join: three rows, label left, icon right */
    .brand-month--pc .bm-join {
        padding: 48px 0;
    }

    .brand-month--pc .bm-join__bg img {
        object-position: center;
    }

    .brand-month--pc .bm-join__inner {
        gap: 24px;
        max-width: none;
    }

    .brand-month--pc .bm-join .bm-h3 {
        font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.16px;
        color: #ff6008;
    }

    .brand-month--pc .bm-join__desc {
        margin-top: -12px;
        font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
        color: #2f2f2f;
    }

    .brand-month--pc .bm-join__line {
        display: block;
    }

    .brand-month--pc .bm-join__space {
        display: none;
    }

    .brand-month--pc .bm-join__paths {
        flex-direction: column;
        gap: 0;
    }

    .brand-month--pc .bm-join__path {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100px;
        gap: 12px;
    }

    .brand-month--pc .bm-join__label {
        font-size: 13px;
        line-height: 21px;
        color: var(--bm-black);
    }

    .brand-month--pc .bm-join__icon {
        width: 120px;
        height: 120px;
        object-fit: contain;
    }

    /* Tabs: content width, centered */
    .brand-month--pc .bm-tabs {
        height: auto;
        padding: 8px 16px 0;
        justify-content: center;
    }

    .brand-month--pc .bm-tabs__inner {
        width: auto;
        max-width: none;
        height: auto;
        justify-content: center;
        gap: 16px;
        align-items: flex-end;
    }

    .brand-month--pc .bm-tabs__item {
        flex: 0 0 auto;
        height: auto;
        padding: 0 0 16px;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    /* Intro */
    .brand-month--pc .bm-intro {
        padding: 48px 0;
    }

    .brand-month--pc .bm-intro__inner {
        gap: 12px;
    }

    .brand-month--pc .bm-intro__text,
    .brand-month--pc .bm-intro__text p {
        font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 0;
        color: #2f2f2f;
        text-align: center;
        letter-spacing: -0.5px;
    }

    .brand-month--pc .bm-intro__text p:first-child {
        white-space: nowrap;
    }

    .brand-month--pc .bm-intro__gap {
        height: 18px;
    }

    .brand-month--pc .bm-intro__break {
        display: inline;
    }

    /* Journey / timeline — Figma 1938:4439, 393×418 */
    .brand-month--pc .bm-journey {
        padding: 0;
        background: linear-gradient(180deg, #fbf9f6 0%, #f7f5f0 46%, #f3f0e9 100%);
    }

    .brand-month--pc .bm-journey__inner {
        gap: 0;
        align-items: stretch;
    }

    .brand-month--pc .bm-timeline {
        position: relative;
        width: calc(100% + 32px);
        height: 418px;
        margin-left: -16px;
        margin-right: -16px;
        gap: 0;
        padding: 0;
        background: linear-gradient(180deg, #fbf9f6 0%, #f7f5f0 100%);
    }

    .brand-month--pc .bm-timeline__head {
        position: relative;
        z-index: 2;
        gap: 12px;
        padding: 0 16px;
    }

    .brand-month--pc .bm-timeline__head .bm-h3 {
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.16px;
        color: #050505;
    }

    .brand-month--pc .bm-timeline__head .bm-body {
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
        color: #2f2f2f;
    }

    .brand-month--pc .bm-timeline__stage {
        position: absolute;
        inset: 0;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .brand-month--pc .bm-timeline__arc {
        left: -323px;
        top: 0;
        width: 400px;
        height: 400px;
        transform: none;
        border: 1px solid rgba(133, 126, 106, 0.45);
        border-radius: 50%;
        opacity: 1;
        /* 弧线在距屏幕左边 16px 处截断（323 + 16） */
        clip-path: inset(0 0 0 339px);
    }

    .brand-month--pc .bm-timeline__arc img {
        display: none;
    }

    .brand-month--pc .bm-timeline__years {
        inset: 0;
        width: auto;
        height: auto;
        transform: none;
        z-index: 1;
    }

    .brand-month--pc .bm-timeline__year {
        display: block;
        width: 16px;
        height: 16px;
        overflow: visible;
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.16px;
        color: #8d8d8d;
        transform: none;
        transition: none;
    }

    .brand-month--pc .bm-timeline__year > span {
        position: absolute;
        left: 22px;
        top: 50%;
        bottom: auto;
        white-space: nowrap;
    }

    .brand-month--pc .bm-timeline__year.is-prev {
        left: 57px;
        top: 118px;
    }

    .brand-month--pc .bm-timeline__year.is-prev > span {
        transform: translateY(-50%) rotate(-10deg);
        transform-origin: left center;
    }

    .brand-month--pc .bm-timeline__year.is-next {
        left: 57px;
        top: 266px;
    }

    .brand-month--pc .bm-timeline__year.is-next > span {
        left: 28px;
        transform: translateY(-50%) rotate(10deg);
        transform-origin: left center;
    }

    .brand-month--pc .bm-timeline__year.is-active {
        left: 69px;
        top: 192px;
        color: #ff6008;
    }

    .brand-month--pc .bm-timeline__year.is-active > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .brand-month--pc .bm-timeline__year.is-far {
        display: none;
    }

    .brand-month--pc .bm-timeline__dot,
    .brand-month--pc .bm-timeline__year.is-active .bm-timeline__dot {
        width: 16px;
        height: 16px;
        background: #e0e0e0;
    }

    .brand-month--pc .bm-timeline__year.is-active .bm-timeline__dot {
        background: #ff6008;
    }

    .brand-month--pc .bm-timeline__content {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: auto;
        height: auto;
    }

    .brand-month--pc .bm-timeline__media {
        position: absolute;
        left: 169px;
        top: 110px;
        width: 100px;
        height: 64px;
        overflow: visible;
    }

    .brand-month--pc .bm-timeline__media img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center top;
    }

    .brand-month--pc .bm-timeline__detail {
        position: absolute;
        left: 93px;
        right: 16px;
        top: 182px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: auto;
    }

    .brand-month--pc .bm-timeline__active-year {
        display: block;
        flex: none;
        margin: 0;
        font-family: "Shokz Sans Display", "NotoSansKR", sans-serif;
        font-weight: 500;
        font-size: 28px;
        line-height: 36px;
        letter-spacing: 0.16px;
        color: #ff6008;
        white-space: nowrap;
    }

    .brand-month--pc .bm-timeline__caption {
        flex: 1;
        width: auto;
        margin: 0;
        font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
        color: #8d8d8d;
        text-align: left;
    }

    .brand-month--pc .bm-timeline__text {
        display: block;
        flex: 1;
        min-width: 0;
    }

    .brand-month--pc .bm-timeline__note {
        margin-top: 8px;
        font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0;
        color: #8d8d8d;
        text-align: left;
        white-space: normal;
        min-height: 0;
    }

    .brand-month--pc .bm-timeline__note[hidden] {
        display: none;
    }

    .brand-month--pc .bm-timeline__content .bm-arrows {
        position: absolute;
        top: 330px;
        right: 16px;
        left: auto;
        gap: 8px;
        justify-content: flex-end;
    }

    .brand-month--pc .bm-timeline .bm-arrow {
        width: 40px;
        height: 40px;
    }

    .brand-month--pc .bm-timeline .bm-arrow img {
        width: 24px;
        height: 24px;
    }

    /* Athletes accordion */
    .brand-month--pc .bm-athletes {
        align-items: stretch;
        gap: 24px;
        padding: 0 0 48px;
    }

    .brand-month--pc .bm-athletes__lead {
        max-width: none;
        text-align: center;
        letter-spacing: 0;
    }

    .brand-month--pc .bm-athletes__br-m {
        display: inline;
    }

    .brand-month--pc .bm-athletes__rail {
        width: 100%;
        max-width: none;
        margin: 0;
        height: 240px;
        gap: 12px;
        justify-content: flex-start;
    }

    .brand-month--pc .bm-athlete,
    .brand-month--pc .bm-athlete.is-fold {
        flex: 0 0 32px;
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 240px;
        padding: 12px 0;
        border-radius: 12px;
    }

    .brand-month--pc .bm-athlete.is-expand {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
    }

    .brand-month--pc .bm-athlete__hover {
        display: none;
    }

    .brand-month--pc .bm-athlete__name {
        display: block;
        position: absolute;
        z-index: 2;
        color: var(--bm-white);
        white-space: nowrap;
    }

    .brand-month--pc .bm-athlete.is-fold .bm-athlete__name {
        left: 0;
        top: 12px;
        width: 100%;
        font-family: inherit;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: normal;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        text-align: left;
    }

    .brand-month--pc .bm-athlete.is-expand .bm-athlete__name {
        left: 12px;
        top: 12px;
        font-family: "Shokz Sans Display", "NotoSansKR", sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 22px;
        letter-spacing: normal;
    }

    .brand-month--pc .bm-athletes .bm-arrows {
        justify-content: flex-end;
    }

    /* Milestone */
    .brand-month--pc .bm-milestone {
        padding: 48px 0;
    }

    .brand-month--pc .bm-milestone__inner {
        gap: 24px;
        align-items: stretch;
    }

    /* 宽度须与下方字号公式的 100vw - 32px 一致，否则大屏机型字号到 36px 时会被窄容器挤折行 */
    .brand-month--pc .bm-milestone__stack--m {
        max-width: none;
    }

    /* Pretendard 36px 下最长行约 378px；按可用宽度等比缩字号而不是压字距，每个 span 固定一行 */
    .brand-month--pc .bm-milestone__line {
        font-size: min(36px, calc((100vw - 32px) / 10.35));
        line-height: 1.2222;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    /* 固定 2 行：每行不折行，首行约 25.5em，按可用宽度等比缩字号 */
    .brand-month--pc .bm-milestone__sub {
        font-size: min(13px, calc((100vw - 32px) / 25.5));
        line-height: 21px;
        white-space: nowrap;
    }

    .brand-month--pc .bm-milestone__br-m {
        display: inline;
    }

    .brand-month--pc .bm-gift {
        width: 100%;
    }

    /* Figma 1938:4496：361×400 底图（礼盒 + 丝带）+ 文案分层，文案左 99 / 右 12 / 上 12 */
    .brand-month.brand-month--pc .bm-gift__m {
        position: relative;
        width: 100%;
        max-width: 361px;
        aspect-ratio: 361 / 400;
        margin: 0 auto;
        border-radius: var(--bm-radius);
        overflow: hidden;
        background: #d6d3ce;
    }

    .brand-month--pc .bm-gift__m-bg {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .brand-month--pc .bm-gift__m-text {
        position: absolute;
        top: 12px;
        left: 27.424%;
        right: 3.324%;
        margin: 0;
        font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
        font-weight: 400;
        /* 四行固定断行：浏览器中最长行约 19em，文字区为卡片宽的 69.25%；卡片宽 = min(361px, 100vw - 32px)，
           浏览器字体比设计稿宽，361 宽卡片下只能到约 13.1px，达不到设计稿 14px */
        font-size: calc(min(361px, 100vw - 32px) / 27.5);
        line-height: 1.2857;
        letter-spacing: 0;
        color: #2f2f2f;
        white-space: nowrap;
    }

    /* Share steps + wheel stacked */
    .brand-month--pc .bm-engage {
        padding: 48px 0;
        background: #ece7dd;
    }

    .brand-month--pc .bm-engage__head {
        gap: 12px;
        margin-bottom: 24px;
    }

    /* Figma 1938:4512 — section 48/16, head→content 24, steps→wheel→share 0 */
    .brand-month--pc .bm-engage__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .brand-month--pc .bm-steps {
        padding-top: 0;
    }

    .brand-month--pc .bm-steps__list {
        gap: 24px;
    }

    .brand-month--pc .bm-step {
        grid-template-columns: 36px 1fr;
        column-gap: 12px;
    }

    .brand-month--pc .bm-step:not(:last-child)::before {
        bottom: -24px;
        background: rgba(5, 5, 5, 0.15);
    }

    .brand-month--pc .bm-step__body {
        gap: 8px;
    }

    .brand-month--pc .bm-step[data-bm-step="1"] .bm-step__body > .bm-btn,
    .brand-month--pc .bm-step[data-bm-step="1"] .bm-agree-wrap {
        margin-top: 8px;
    }

    /* Figma 4350:67575 — 无协议勾选时 Step1 区块高 139 */
    .brand-month--pc .bm-step[data-bm-step="1"]:has(.bm-agree-wrap[hidden]) .bm-step__body {
        min-height: 139px;
    }

    .brand-month--pc .bm-step .bm-h5 {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-step .bm-util {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }

    .brand-month--pc .bm-step[data-bm-step="2"] .bm-btn {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-wheel-wrap {
        width: 100%;
        min-height: 0;
        padding: 0;
        background: none;
    }

    .brand-month--pc .bm-wheel {
        width: min(361px, 100%);
        height: auto;
        aspect-ratio: 1;
    }

    .brand-month--pc .bm-wheel__pointer {
        width: 15%;
    }

    .brand-month--pc .bm-wheel__hub {
        width: 26.6667%;
        height: auto;
        aspect-ratio: 1;
    }

    .brand-month--pc .bm-wheel__base {
        width: 100%;
        height: 100%;
    }

    /* Figma M Spin-KR 3321:29996 — 361 wheel = PC × 0.752 */
    .brand-month--pc .bm-wheel__prize-name {
        font-size: 7.5px;
        line-height: 10px;
    }

    /* Share float — Figma 1938:4568 (361 card: media 100 + gap 12 + body 225) */
    .brand-month--pc .bm-share-float {
        position: static;
        width: 100%;
        max-width: 361px;
        margin: 0 auto;
        gap: 12px;
        padding: 12px;
        align-items: center;
        box-sizing: border-box;
    }

    /* 文案三行各自不折行；宽度不够时由左侧图片收窄让位 */
    .brand-month--pc .bm-share-float__media {
        flex: 0 1 100px;
        min-width: 0;
        width: 100px;
        height: auto;
    }

    .brand-month--pc .bm-share-float__media img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .brand-month--pc .bm-share-float__body {
        flex: 1 0 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        gap: 8px;
    }

    .brand-month--pc .bm-share-float__title {
        font-family: Pretendard, "Shokz Sans Display", "NotoSansKR", sans-serif;
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0.16px;
        white-space: nowrap;
    }

    /* Figma 1938:4578 — 11/18，断行：…주세요. / @shokzkr … 해시태그를 / 추가하여 … */
    .brand-month--pc .bm-share-float__desc {
        font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 0;
        color: #2f2f2f;
        word-break: keep-all;
        white-space: nowrap;
    }

    .brand-month--pc .bm-share-float__cta {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        flex-shrink: 0;
        max-width: 100%;
        font-family: Pretendard, "Shokz Sans Text", "NotoSansKR", sans-serif;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.32px;
        white-space: nowrap;
    }

    .brand-month--pc .bm-share-float__cta-text {
        white-space: nowrap;
    }

    .brand-month--pc .bm-share-float__br {
        display: none;
    }

    .brand-month--pc .bm-share-float__br-m {
        display: inline;
    }

    .brand-month--pc .bm-engage__br-m {
        display: inline;
    }

    .brand-month--pc .bm-share-float__cta-icon {
        flex: none;
        width: 18px;
        height: 18px;
    }

    .brand-month--pc .bm-memory-modal {
        padding: 16px;
        align-items: center;
    }

    .brand-month--pc .bm-memory-modal__panel {
        width: 100%;
        max-width: 361px;
    }

    .brand-month--pc .bm-memory-card {
        min-height: 480px;
        padding: 12px;
        justify-content: flex-end;
    }

    .brand-month--pc .bm-memory-card__deco.bm-only-m {
        left: -12px;
        top: -17px;
        width: 270px;
        height: 274px;
    }

    .brand-month--pc .bm-memory-card__close {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
    }

    .brand-month--pc .bm-memory-card__close img {
        width: 24px;
        height: 24px;
    }

    .brand-month--pc .bm-memory-card__body {
        gap: 8px;
        max-width: none;
        align-items: flex-end;
        justify-content: flex-end;
        flex: 1 1 auto;
        padding-top: 48px;
    }

    .brand-month--pc .bm-memory-card__title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-memory-card__name,
    .brand-month--pc .bm-memory-card__region {
        width: auto;
        max-width: 48%;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.32px;
    }

    .brand-month--pc .bm-memory-card__quote {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }

    .brand-month--pc .bm-memory-card__share {
        gap: 8px;
    }

    .brand-month--pc .bm-memory-card__foot {
        justify-content: flex-end;
    }

    .brand-month--pc .bm-memory-card__logo--m {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 64px;
        height: 25.474px;
    }

    .brand-month--pc .bm-memory-card__share-text {
        font-size: 16px;
        line-height: 22px;
    }

    .brand-month--pc .bm-memory-card__chevron {
        width: 20px;
        height: 20px;
    }

    /* Offline events: horizontal cards */
    .brand-month--pc .bm-offline {
        padding: 48px 0;
    }

    .brand-month--pc .bm-offline__inner,
    .brand-month--pc .bm-events {
        align-items: stretch;
        gap: 24px;
    }

    .brand-month--pc .bm-offline__head {
        gap: 12px;
        max-width: none;
    }

    /* 固定 5 行：每行不折行，最长行约 26.5em，按可用宽度等比缩字号 */
    .brand-month--pc .bm-offline__desc {
        font-size: min(13px, calc((100vw - 32px) / 26.5));
        letter-spacing: 0;
    }

    .brand-month--pc .bm-offline__desc p {
        white-space: nowrap;
    }

    .brand-month--pc .bm-offline__br-m {
        display: inline;
    }

    .brand-month--pc .bm-events__stage {
        height: auto;
        justify-content: flex-start;
        align-items: stretch;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .brand-month--pc .bm-events__stage::-webkit-scrollbar {
        display: none;
    }

    .brand-month--pc .bm-event-card,
    .brand-month--pc .bm-event-card--active,
    .brand-month--pc .bm-event-card--side,
    .brand-month--pc .bm-event-card--hidden {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        flex: 0 0 280px;
        flex-direction: column;
        width: 280px;
        height: auto;
        min-height: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        scroll-snap-align: start;
    }

    .brand-month--pc .bm-event-card__photo,
    .brand-month--pc .bm-event-card--side .bm-event-card__photo {
        width: 100%;
        height: 180px;
    }

    .brand-month--pc .bm-event-card__body {
        padding: 12px 4px;
        gap: 8px;
    }

    .brand-month--pc .bm-event-card__city {
        font-size: 19px;
        line-height: 26px;
    }

    .brand-month--pc .bm-event-card__slash,
    .brand-month--pc .bm-event-card__country {
        font-size: 15px;
        line-height: 24px;
    }

    .brand-month--pc .bm-event-card .bm-btn {
        width: 100%;
        height: 32px;
        min-height: 32px;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 0;
    }

    /* 서울 러닝 크루 — Figma 1951:6511（10/22 前）/ 1951:6529（10/22 起） */
    .brand-month--pc .bm-event-card--seoul {
        background: linear-gradient(152.2deg, #cfc7b0 7.4%, #fff 93.5%);
    }

    .brand-month--pc .bm-event-card--seoul .bm-event-card__photo img {
        object-position: 50% 77.3%;
    }

    .brand-month--pc .bm-event-card--seoul .bm-event-card__body {
        justify-content: flex-start;
    }

    .brand-month--pc .bm-event-card__info {
        gap: 8px;
    }

    .brand-month--pc .bm-event-card--seoul .bm-event-card__slash {
        width: 6px;
        height: 24px;
        font-size: 16px;
        line-height: 22px;
    }

    .brand-month--pc .bm-event-card--seoul .bm-event-card__country {
        letter-spacing: -0.6px;
    }

    .brand-month--pc .bm-event-card--seoul .bm-event-card__row {
        padding-top: 8px;
    }

    .brand-month--pc .bm-event-card__br-m {
        display: inline;
    }

    .brand-month--pc .bm-event-card__note {
        letter-spacing: -0.5px;
        word-break: keep-all;
        white-space: normal;
    }

    .brand-month--pc .bm-event-card--seoul .bm-event-card__row:last-child {
        padding-bottom: 8px;
    }

    .brand-month--pc .bm-event-card--seoul.is-open .bm-event-card__row:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .brand-month--pc .bm-event-card--seoul .bm-btn--ghost {
        padding: 0 24px;
    }

    /* 海外跑团 — Figma M 3761:56518–56528（图片 264×180） */
    .brand-month--pc .bm-event-card--world {
        background: linear-gradient(152.2deg, #cfc7b0 7.4%, #fff 93.5%);
    }

    .brand-month--pc .bm-event-card--world .bm-event-card__body {
        justify-content: flex-start;
    }

    .brand-month--pc .bm-event-card--world .bm-event-card__city {
        font-weight: 500;
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-event-card--world .bm-event-card__slash,
    .brand-month--pc .bm-event-card--world .bm-event-card__country {
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-event-card--world .bm-event-card__row {
        gap: 8px;
        padding-top: 8px;
        font-size: 13px;
        line-height: 18px;
    }

    .brand-month--pc .bm-event-card--world .bm-event-card__place {
        font-size: 13px;
        letter-spacing: -0.2px;
        white-space: nowrap;
        font-weight: 400;
    }

    .brand-month--pc .bm-event-card--world .bm-btn--ghost {
        padding: 0 24px;
    }

    .brand-month--pc .bm-events .bm-arrows {
        justify-content: flex-end;
    }

    /* Open stories */
    .brand-month--pc .bm-open {
        padding: 0 0 48px;
        background: linear-gradient(180deg, #f6f5f1 0%, #eeece6 100%);
    }

    .brand-month--pc .bm-open__inner {
        gap: 24px;
    }

    .brand-month--pc .bm-open__cta {
        width: 281px;
    }

    /* Figma 1938:4637 — 361×360 illustration */
    .brand-month--pc .bm-orbit {
        width: 100%;
        max-width: 361px;
        height: auto;
        aspect-ratio: 361 / 360;
        margin: 0 auto;
        overflow: hidden;
    }

    .brand-month--pc .bm-orbit__stage {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .brand-month--pc .bm-orbit__ring-wrap--m {
        position: absolute;
        left: calc(50% - 0.258%);
        top: 5.278%;
        z-index: 1;
        width: 146.022%;
        height: 79.929%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .brand-month--pc .bm-orbit__ring--m {
        display: block;
        width: 94.852%;
        height: auto;
        aspect-ratio: 500 / 175;
        flex: none;
        transform: rotate(-13.61deg);
    }

    .brand-month--pc .bm-orbit__globe {
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 2;
        width: 55.402%;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }

    /* Figma 3300:28745：219px 地球图放在 200px 圆框内，水平居中 +0.5px、上移 10px 裁切 */
    .brand-month--pc .bm-orbit__globe img {
        position: absolute;
        left: calc(50% + 0.25%);
        top: -5%;
        display: block;
        width: 109.5%;
        height: 109.5%;
        max-width: none;
        object-fit: cover;
        border-radius: 50%;
        transform: translateX(-50%);
    }

    /* 自转序列帧：地球占帧 96.86%（静态图为 106.23%），放大 ×1.0967 并保持中心 49.75% */
    .brand-month--pc .bm-orbit__globe canvas {
        position: absolute;
        left: calc(50% + 0.25%);
        top: -10.295%;
        display: block;
        width: 120.09%;
        height: 120.09%;
        max-width: none;
        transform: translateX(-50%);
    }

    .brand-month--pc .bm-orbit__slot--m {
        display: block;
        left: var(--x);
        top: var(--y);
        z-index: 3;
        width: var(--s);
        height: auto;
        aspect-ratio: 1;
        border-radius: var(--r, 5.774px);
        background: #d9d9d9;
    }

    .brand-month--pc .bm-orbit__slot--m:has(img) {
        background: transparent;
    }

    /* Prize modal — Figma 1938:5479（遮罩与 PC 一致） */
    .brand-month--pc .bm-wheel-modal {
        padding: 16px;
    }

    .brand-month--pc .bm-wheel-modal__panel {
        width: 343px;
        height: 500px;
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
    }

    .brand-month--pc .bm-wheel-modal__bg-wrap {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .brand-month--pc .bm-wheel-modal__bg {
        left: -76.38%;
        top: -64.27%;
        width: 222.74%;
        height: 271.64%;
    }

    .brand-month--pc .bm-wheel-modal__close {
        width: 40px;
        height: 40px;
    }

    .brand-month--pc .bm-wheel-modal__close img {
        width: 24px;
        height: 24px;
    }

    .brand-month--pc .bm-wheel-modal__prize {
        left: 51px;
        top: 65px;
        width: 240px;
        height: 240px;
        transform: none;
    }

    .brand-month--pc .bm-wheel-modal__copy {
        bottom: 66px;
        gap: 12px;
        width: 303px;
        max-width: calc(100% - 40px);
    }

    .brand-month--pc .bm-wheel-modal__title {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-wheel-modal__desc {
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
    }

    .brand-month--pc .bm-wheel-modal__link {
        gap: 0;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-wheel-modal__link-icon {
        width: 20px;
        height: 20px;
    }

    /* Athlete modal — Figma 3300:28461 (M, 343×500)
       屏幕不够时按 343:500 等比缩小，弹窗底图不被裁切 */
    .brand-month--pc .bm-athlete-modal {
        padding: 16px;
    }

    .brand-month--pc .bm-athlete-modal__panel {
        width: min(343px, calc(100vw - 32px), calc((100vh - 32px) * 343 / 500));
        height: auto;
        max-width: none;
        max-height: none;
        aspect-ratio: 343 / 500;
    }

    .brand-month--pc .bm-athlete-modal__photo img {
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
    }

    /* 40×40，距顶/右 8px（343×500 时），随弹窗等比缩放 */
    .brand-month--pc .bm-athlete-modal__close {
        top: 1.6%;
        right: 2.3324%;
        width: 11.6618%;
        height: auto;
        aspect-ratio: 1;
    }

    .brand-month--pc .bm-athlete-modal__close img {
        width: 60%;
        height: auto;
    }

    .brand-month--pc .bm-athlete-modal__copy {
        left: 50%;
        bottom: auto;
        top: 32px;
        width: 303px;
        max-width: calc(100% - 40px);
        gap: 12px;
        align-items: center;
        text-align: center;
        transform: translateX(-50%);
    }

    .brand-month--pc .bm-athlete-modal__name {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.16px;
        text-align: center;
        color: #050505;
    }

    /* Figma 3300:28461 / 3300:28519：14/18，按字断行 */
    .brand-month--pc .bm-athlete-modal__bio {
        font-family: "BM Shokz Sans Text", "NotoSansKR", sans-serif;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
        text-align: left;
        color: #2f2f2f;
        word-break: normal;
    }

    /* Notice modal — Figma 1938:5616 (M-T&C, fixed 361×500) */
    .brand-month--pc .bm-notice-modal {
        padding: 16px;
    }

    .brand-month--pc .bm-notice-modal__panel {
        width: 361px;
        height: 500px;
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
    }

    .brand-month--pc .bm-notice-modal__bar {
        height: 56px;
        padding: 8px;
    }

    .brand-month--pc .bm-notice-modal__close {
        width: 40px;
        height: 40px;
    }

    .brand-month--pc .bm-notice-modal__close img {
        width: 24px;
        height: 24px;
    }

    .brand-month--pc .bm-notice-modal__body {
        /* Display area 361×444; content 297 centered → 32px sides */
        height: 444px;
        flex: 1 1 auto;
        padding: 0 32px 24px;
    }

    .brand-month--pc .bm-notice-modal__content {
        gap: 12px;
        max-width: 297px;
    }

    .brand-month--pc .bm-notice-modal__title {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.16px;
    }

    .brand-month--pc .bm-notice-modal__text {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }

    .brand-month--pc .bm-notice-modal__text p {
        min-height: 16px;
    }

    /* Share form modal — Figma 1938:5574 */
    .brand-month--pc .bm-share-modal {
        padding: 16px;
    }

    .brand-month--pc .bm-share-modal__panel {
        width: 361px;
        height: 500px;
        max-width: calc(100vw - 32px);
    }

    .brand-month--pc .bm-share-modal__bar {
        height: 56px;
    }

    .brand-month--pc .bm-share-modal__close {
        width: 40px;
        height: 40px;
    }

    .brand-month--pc .bm-share-modal__close img {
        width: 24px;
        height: 24px;
    }

    .brand-month--pc .bm-share-modal__body {
        padding: 0 32px 24px;
    }

    .brand-month--pc .bm-share-modal__content {
        gap: 16px;
        max-width: 297px;
    }

    .brand-month--pc .bm-share-modal__title {
        font-size: 20px;
        line-height: 24px;
    }

    .brand-month--pc .bm-share-modal__desc {
        font-size: 12px;
        line-height: 16px;
    }

    .brand-month--pc .bm-share-form {
        gap: 16px;
        max-width: none;
    }

    .brand-month--pc .bm-share-form__row {
        gap: 16px;
    }

    .brand-month--pc .bm-share-field__label {
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
    }

    .brand-month--pc .bm-share-field__hint {
        font-size: 12px;
        line-height: 16px;
    }

    .brand-month--pc .bm-share-field__textarea {
        font-size: 12px;
        line-height: 16px;
    }

    .brand-month--pc .bm-share-form__submit {
        width: 100%;
        height: 40px;
        min-height: 40px;
        padding: 8px 24px;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
    }
}

@media (max-width: 360px) {
    .brand-month--pc .bm-intro .bm-container,
    .brand-month--pc .bm-milestone .bm-container,
    .brand-month--pc .bm-engage .bm-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .brand-month--pc .bm-offline .bm-container {
        padding-left: 11px;
        padding-right: 11px;
    }

    .brand-month--pc .bm-agree__line {
        white-space: nowrap;
    }
}