.member-center-page {
    --mc-black: #050505;
    --mc-text: #0a0a0a;
    --mc-muted: #666;
    --mc-quaternary: #8d8d8d;
    --mc-line: #e8e8e8;
    --mc-tab-bg: #282828;
    --mc-grades-bg: #f1f1f1;
    --mc-card-tint: #fff0e8;
    --mc-progress: #805401;
    --mc-orange: #ff6008;
    --mc-hero-underlay: 64px;
    --radius-5: 4px;
    --text-M-H6--size: 15px;
    --text-M-H5--weight: 500;
    --text-M-H6--weight: 500;
    --text-M-H6--letter-spacing: -0.6px;
    margin-top: calc(-1 * var(--mc-hero-underlay));
    position: relative;
    z-index: 1;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    color: var(--mc-text);
    background: #fff;
    word-break: keep-all;
}

/* * {
    border: 1px solid #000;
} */

.mc-hero-stack {
    display: flex;
    flex-direction: column;
}

.mc-hero-stack .mc-tabs {
    flex-shrink: 0;
    margin: 0;
}

/* Site header over hero (Figma 663:2064 — banner from nav bottom) */
body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) {
    background: transparent !important;
    background-color: transparent !important;
}

body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) .gnb_1da,
body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) .hd_search_link,
body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) .hd_login>li a span {
    color: #fff !important;
    filter: brightness(0) invert(1) !important;
}

body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) #logo .asz_logo {
    filter: brightness(0) invert(1) !important;
}

body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) .hd_search_link,
body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) .cart-icon,
body.has-member-center-hero #tnb:not(.scrolled):not(.hovering):not(:hover) .mypage-icon {
    filter: brightness(0) invert(1) !important;
}

body.has-member-center-hero #hd.is-pages-template #section-announcement .announcement,
body.has-member-center-hero #hd.is-pages-template .ga4_topbar .announcement {
    background: rgba(0, 0, 0, .35) !important;
}

body.has-member-center-hero #hd.is-pages-template .announcement-item a,
body.has-member-center-hero #hd.is-pages-template .announcement-item span {
    color: #fff !important;
}

@media (max-width: 768px) {
    .pm-anchor__tabs .js-point-anchor-tab {
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, "Shokz Sans Text");
        font-size: var(--text-utility-size, 14px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 18px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }

    body.has-member-center-hero #hd,
    body.has-member-center-hero #hd_wr:not(.scrolled) {
        background: transparent !important;
        background-color: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    body.has-member-center-hero #hd_wr:not(.scrolled) #btn_hdcate {
        background-image: url('https://static.shokz.co.kr/img/common/m-icon-menu_white.png') !important;
    }

    body.has-member-center-hero #hd_wr:not(.scrolled) #logo .logo_wr {
        background-image: url('https://static.shokz.co.kr/resource/2025/11/12/m-logo_6913a762744a8.png') !important;
    }

    body.has-member-center-hero #hd_wr:not(.scrolled) #btn_hdcart .cart-icon-mo {
        filter: brightness(0) invert(1) !important;
    }

    body.has-member-center-hero #hd_wr:not(.scrolled) #btn_hdsearch,
    body.has-member-center-hero #hd_wr:not(.scrolled) #btn_hdsearch svg {
        color: #fff !important;
    }

    body.has-member-center-hero #hd_wr:not(.scrolled) #btn_hdsearch svg circle,
    body.has-member-center-hero #hd_wr:not(.scrolled) #btn_hdsearch svg path {
        stroke: #fff !important;
    }
}

.is_community {
    display: flex;
}

.member-center-page * {
    box-sizing: border-box;
}

.mc-status__meta-wrap {
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 768px) {
    .pm-anchor__tabs .js-point-anchor-tab {
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, "Shokz Sans Text");
        font-size: var(--text-utility-size, 14px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 18px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }

    /* MO 默认：仅展示已解锁卡片；未解锁卡片在「더 알아보기」展开后显示 */
    .mc-benefits__grid:not(.is-expanded) .mc-benefit-card.is-locked {
        display: none;
    }

    .mc-benefits__link {
        display: inline-flex;
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0;
    }

    .mc-benefit-card:not(.is-locked) {
        min-height: 225px;
    }

    .mc-benefit-card:not(.is-locked) .mc-benefit-card__body {
        padding: 42px 0 28px 28px;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mc-benefit-card:not(.is-locked) .mc-benefit-card__body h3 {
        margin-bottom: 16px;
        letter-spacing: 0.16px;
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-M-H3--size, 23px);
        font-style: normal;
        font-weight: var(--text-M-H3--weight, 600);
        line-height: var(--text-M-H3--line-height, 35px);
        letter-spacing: var(--text-M-H3--letter-spacing, 0);
    }

    .mc-benefit-card__actions .mc-btn--black,
    .mc-benefit-card__actions .mc-btn--outline-dark {
        padding: 13px 32px;
    }

    .member-center-page.is-mc-mobile .mc-blacklist-alert--card .mc-blacklist-alert__body {
        gap: 4px !important;
    }

    .mc-benefit-card__actions .mc-btn:nth-child(2) {
        padding: 13px 0px;
        flex: 1;
        margin-right: 25px;
    }

    .mc-benefit-card:not(.is-locked) .mc-benefit-card__body p {
        margin-bottom: 24px;
        line-height: 24px;
        color: var(--font-icon-tertiary, #666);
        font-family: Pretendard;
        font-size: 15px;
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: 24px;
        letter-spacing: var(--text-body-letter-spacing, -0.6px);
    }

    .mc-benefit-card:not(.is-locked) .mc-benefit-card__img {
        object-fit: contain;
        object-position: bottom right;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--point .mc-benefit-card__img {
        right: 29px;
        top: -22px;
        left: auto;
        width: 81px;
        transform: rotate(7.89deg);
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--upgrade .mc-benefit-card__img {
        right: -12px;
        top: -17px;
        width: 168.792px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--upgrade.is-max-tier .mc-benefit-card__img {
        right: 0;
        top: -17px;
        width: 157px;
        height: 125px;
        object-fit: contain;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--upgrade.is-max-tier .mc-benefit-card__body p {
        max-width: 312px;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--birthday .mc-benefit-card__img {
        right: 0;
        top: -18px;
        width: 86px;
        height: 103px;
        transform: none;
        margin-right: 30px;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--ticket .mc-benefit-card__img {
        right: 15px;
        left: auto;
        top: -15px;
        width: 138px;
        height: 92px;
        transform: none;
    }

    .mc-benefit-card--ticket:not(.is-locked) .mc-benefit-card__body h3 {
        margin-bottom: 16px;
    }

    .mc-benefit-card--ticket:not(.is-locked) .mc-benefit-card__body p {
        max-width: 100%;
        margin-bottom: 0;
        letter-spacing: 0.16px;
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 15px);
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 24px);
        letter-spacing: var(--text-body-letter-spacing, -0.6px);
    }

    .mc-benefit-card--vip:not(.is-locked) .mc-benefit-card__body h3 {
        margin-bottom: 16px;
    }

    .mc-benefit-card--vip:not(.is-locked) .mc-benefit-card__body p {
        max-width: 100%;
        margin-bottom: 0;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.16px;
        max-width: min(304px, 100%);
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--vip .mc-benefit-card__img {
        right: 4.6px;
        top: -24px;
        width: 168.792px;
        height: 114px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--preview .mc-benefit-card__img {
        right: 0;
        top: -29px;
        width: 133.382px;
        height: 90px;
        transform: none;
    }


    .mc-benefit-card:not(.is-locked).mc-benefit-card--preview .mc-benefit-card__body,
    .mc-benefit-card:not(.is-locked).mc-benefit-card--vip .mc-benefit-card__body,
    .mc-benefit-card:not(.is-locked).mc-benefit-card--ticket .mc-benefit-card__body {
        padding-top: 74px;
    }

    /* Locked benefit cards (Figma 677:2886) */
    .mc-benefit-card.is-locked {
        display: block;
        min-height: 171px;
        padding: 0;
        opacity: 0.6;
        align-items: stretch;
        background: linear-gradient(113.13deg, #f5f5f5 1.97%, #ddd 90.38%);
    }

    .mc-benefit-card.is-locked .mc-benefit-card__frame {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
    }

    .mc-benefit-card.is-locked .mc-benefit-card__img {
        display: block;
        z-index: 1;
        object-fit: contain;
        object-position: bottom right;
    }

    .mc-benefit-card.is-locked--point .mc-benefit-card__img {
        right: 29px;
        top: -35px;
        width: 79px;
        transform: rotate(7.89deg);
    }

    .mc-benefit-card.is-locked--upgrade .mc-benefit-card__img {
        right: 0;
        top: -31px;
        width: 122px;
        height: auto;
        transform: none;
    }

    .mc-benefit-card.is-locked--birthday .mc-benefit-card__img {
        right: 29px;
        top: -26px;
        width: 131px;
        height: 81px;
        transform: none;
    }

    .mc-benefit-card.is-locked--ticket .mc-benefit-card__img {
        right: 15px;
        left: auto;
        top: -25px;
        width: 138px;
        height: 92px;
        transform: none;
    }

    .mc-benefit-card.is-locked--vip .mc-benefit-card__img {
        right: 4.6px;
        left: auto;
        top: -19px;
        width: 142px;
        height: 96px;
        transform: none;
    }

    .mc-benefit-card.is-locked--preview .mc-benefit-card__img {
        right: 0;
        left: auto;
        top: -35px;
        width: 133px;
        height: 90px;
        transform: none;
    }

    .mc-benefit-card.is-locked .mc-benefit-card__body {
        position: absolute;
        left: 28px;
        right: 28px;
        top: 85px;
        bottom: auto;
        width: auto;
        max-width: none;
        padding: 0;
        gap: 16px;
        z-index: 2;
    }

    .mc-benefit-card.is-locked h3 {
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-M-H3--size, 23px);
        font-style: normal;
        font-weight: var(--text-M-H3--weight, 600);
        line-height: var(--text-M-H3--line-height, 35px);
        letter-spacing: var(--text-M-H3--letter-spacing, 0);
    }

    .mc-benefit-card.is-locked .mc-benefit-card__lock-wrap {
        width: 24px;
        height: 24px;
    }

    .mc-benefit-card.is-locked .mc-benefit-card__lock-wrap .mc-benefit-card__lock {
        left: 4px;
        top: 4px;
        width: 16px;
        height: 16px;
    }

    .mc-benefits__toggle {
        margin-top: 16px;
    }
}

/* Hero */
.mc-hero {
    position: relative;
    overflow: hidden;
    height: 554px;
    min-height: 554px;
    color: #fff;
    background: #191919;
}

.mc-hero__picture,
.mc-hero__picture img,
.mc-hero__shade {
    position: absolute;
    inset: 0;
}

.mc-hero__picture {
    overflow: hidden;
}

.mc-hero__picture img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 554px;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.mc-hero__shade {
    z-index: 1;
    background: none;
    pointer-events: none;
}

.mc-hero__inner {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 54px;
    z-index: 2;
}

.mc-hero h1 {
    margin: 0 0 16px;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
}

.mc-hero__copy {
    margin: 0;
    max-width: 320px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

.mc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.mc-hero__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}

.mc-hero__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
}

.mc-hero__dot.is-on {
    width: 18px;
    background: #fff;
}

/* Buttons */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 24px;
    border-radius: 4px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s ease;
    color: var(--font-icon-primary, #050505);
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: var(--text-body-size, 15px);
    font-style: normal;
    font-weight: var(--text-body-weight, 400);
    line-height: var(--text-body-line-height, 24px);
    letter-spacing: var(--text-body-letter-spacing, -0.6px);
}

.mc-btn:hover {
    opacity: .88;
}

.mc-btn--black,
a.mc-btn--black {
    background: var(--mc-black);
    color: #fff;
    border-color: var(--mc-black);
}

.mc-btn--white,
a.mc-btn--white {
    background: #fff;
    color: var(--mc-black);
    border-color: #fff;
}

.mc-btn--outline {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .92);
}

.mc-btn--outline-dark {
    background: #fff;
    color: var(--mc-black);
    border-color: var(--mc-black);
}

.mc-btn--text {
    background: transparent;
    border: 0;
    padding: 0;
    min-height: auto;
    color: var(--mc-black);
    font-size: 15px;
    text-decoration: none;
}

.mc-btn--text img {
    margin-left: 2px;
    vertical-align: middle;
}

/* Secondary nav sticky placeholder (shared with point page anchor) */
.secondary-nav-sticky-placeholder {
    display: none;
    width: 100%;
}

.secondary-nav-sticky-placeholder.is-active {
    display: block;
}

/* Tabs */
.mc-tabs {
    position: relative;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: var(--mc-tab-bg);
}

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

.mc-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 396px;
    padding: 8px 0 16px;
    color: var(--mc-quaternary);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    font-family: var(--Shokz-Sans-Text, "Shokz Sans Text");
    font-size: var(--text-body-size, 18px);
    font-style: normal;
    line-height: var(--text-body-line-height, 26px);
    letter-spacing: var(--text-body-letter-spacing, 0.16px);
}

.mc-tabs a.is-on {
    color: #fff;
    font-weight: 400;
}

.mc-tabs a.is-on::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    height: 2px;
    background: #fff;
}

.mc-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Perks carousel styles: member-slider-mobile.php / member-slider-pc.php */

/* Blacklist alerts (member_status = 0) */
.mc-status__stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mc-status--blacklisted {
    padding-top: 48px;
}

.mc-blacklist-alert--banner {
    margin: 0;
    color: var(--state-text-danger, #DA1E28);
    text-align: center;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: var(--text-M-H4--size, 19px);
    font-style: normal;
    font-weight: var(--text-M-H4--weight, 600);
    line-height: var(--text-M-H4--line-height, 26px);
    letter-spacing: var(--text-M-H4--letter-spacing, 0);
}

.mc-blacklist-alert--banner p {
    margin: 0;
}

.mc-blacklist-section {
    padding: 0 0 48px;
    background: #fff;
}

.mc-blacklist-alert--card {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 134px;
    border-radius: 4px;
    overflow: hidden;
    padding: var(--space-04, 12px) 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    border-radius: 4px;
}

.mc-blacklist-alert__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 4px;
    overflow: hidden;
}

.mc-blacklist-alert__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: bottom;
    border-radius: 4px;
}

.mc-blacklist-alert__bg-gradient {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
            rgba(239, 252, 255, 0) 51.299%,
            rgba(239, 252, 255, 0.4) 89.607%);
}

.mc-blacklist-alert__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.mc-blacklist-alert__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.mc-blacklist-alert__title {
    margin: 0;
    letter-spacing: 0;
    color: #111317;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: var(--text-M-H3--size, 23px);
    font-style: normal;
    font-weight: var(--text-M-H3--weight, 600);
    line-height: var(--text-M-H3--line-height, 35px);
    letter-spacing: var(--text-M-H3--letter-spacing, -0.92px);
}

.mc-blacklist-alert--card .mc-blacklist-alert__title {
    color: #000;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.32px;
    font-weight: 500;
}

.mc-blacklist-alert--card .mc-blacklist-alert__desc {
    color: var(--font-icon-tertiary, #666);
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
}

.mc-blacklist-alert__desc {
    margin: 0;
    color: #000;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: var(--text-body-size, 15px);
    font-style: normal;
    font-weight: var(--text-body-weight, 400);
    line-height: var(--text-body-line-height, 24px);
    letter-spacing: var(--text-body-letter-spacing, -0.6px);
}

.mc-blacklist-alert__btn {
    align-self: flex-start;
    min-height: 32px;
    height: 32px;
    margin-top: 0;
    padding: 0 18px;
    gap: 4px;
    border: 0;
    font-weight: 400;
    padding-right: 18px;
    color: var(--font-icon-white, #FFF);
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: var(--text-body-size, 17px);
    font-style: normal;
    line-height: var(--text-body-line-height, 27px);
    letter-spacing: var(--text-body-letter-spacing, -0.68px);
}

.mc-blacklist-alert__btn-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (min-width: 769px) {
    .mc-blacklist-alert--banner {
        line-height: 24px;
        letter-spacing: 0.16px;
        text-align: left;
        color: var(--state-text-danger, #DA1E28);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H4--size, 27px);
        font-style: normal;
        font-weight: var(--text-PC-H4--weight, 600);
        line-height: var(--text-PC-H4--line-height, 41px);
        letter-spacing: var(--text-PC-H4--letter-spacing, 0);
        gap: 2px;
        display: flex;
        margin-bottom: -18px;
    }

    .mc-status-stack-container {
        position: relative;
        gap: 0;
        padding: 0px !important;
    }

    .mc-blacklist-alert__title {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.32px;
    }

    .mc-blacklist-alert__desc {
        font-size: 14px;
        line-height: 18px;
    }

    .mc-blacklist-alert--card .mc-blacklist-alert__body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .mc-blacklist-alert--card .mc-blacklist-alert__btn {
        align-self: center;
        flex-shrink: 0;
        margin-left: auto;
    }
}

.member-center-page.is-mc-mobile .mc-blacklist-alert--card .mc-blacklist-alert__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.member-center-page.is-mc-mobile .mc-blacklist-alert--card .mc-blacklist-alert__btn {
    align-self: flex-start;
    margin-left: 0;
}

/* Status card (logged-in) */
.mc-status {
    padding: 24px 0 0;
    background: #fff;
}

.mc-status__card {
    position: relative;
    border-radius: 12px;
    min-height: 280px;
    background-image: var(--mc-status-bg-pc);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: var(--mc-black);
}

.mc-status__head-card {
    position: relative;
}

.mc-status__head-card-bg {
    display: none;
}

.mc-status__user {
    min-width: 0;
}

.mc-status__card.is-l4 {
    /* color: #f3e6c0; */
}

.mc-status__wave {
    display: none;
}

.mc-status__body {
    position: relative;
    z-index: 1;
    padding: 24px 20px 28px;
}

.mc-status__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 683px;
}

.mc-status__tier {
    display: none;
    margin: 0 0 4px;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 27px;
    font-weight: 500;
    line-height: 1.3;
    color: #805401;
}

.mc-status__card.is-l4 .mc-status__tier {
    color: #e3c987;
}

.mc-status__card.is-l4 .mc-status__email {
    color: #c6c6c6;
}

.mc-status__card.is-l4 .mc-status__name {
    color: #fff;
}

.mc-status__card.is-l4 .mc-status__progress-text,
.mc-status__card.is-l4 .mc-status__progress-muted,
.mc-status__card.is-l4 .mc-status__progress-em {
    color: #ded1b2;
}

.mc-status__name {
    margin: 0;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.35;
}

.mc-status__email {
    margin: 4px 0 0;
    color: var(--mc-quaternary);
    font-size: 14px;
    line-height: 18px;
    font-family: var(--Shokz-Sans-Text, Pretendard);
}

.mc-status__email-label {
    display: inline;
}

.mc-status__progress--mo {
    display: none;
}

.mc-status__card.is-l4 .mc-status__bar {
    background: rgba(255, 249, 230, .8);
}

.mc-status__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex-shrink: 0;
    /* margin-right: 60px; */
    margin-left: auto;
}

.mc-status__actions .mc-btn--black {
    font-size: 15px;
    padding: 13px 32px;
    justify-content: center;
    align-items: center;
}

.mc-status__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 26px;
}

.mc-status__meta-item dt {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
}

.mc-status__meta-item dd {
    margin: 0;
    color: var(--font-icon-primary, #050505);
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: var(--text-PC-H4--size, 27px);
    font-weight: var(--text-PC-H4--weight, 600);
    line-height: var(--text-PC-H4--line-height, 41px);
    letter-spacing: var(--text-PC-H4--letter-spacing, 0);
}

.mc-status__progress {
    margin-top: 36px;
}

.mc-status__progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mc-status__progress-labels .is-current,
.mc-status__progress-labels .is-next {
    flex-shrink: 0;
    font-family: "Albert Sans", "Shokz Sans Display", "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: 0;
}

.mc-status__progress-labels .is-current {
    color: #3e5172;
}

.mc-status__progress-labels .is-next {
    color: #304786;
}

.mc-status__card.is-l1 .mc-status__progress-labels .is-current {
    color: #304786;
}

.mc-status__card.is-l1 .mc-status__progress-labels .is-next {
    color: #d49812;
}

.mc-status__card.is-l2 .mc-status__progress-labels .is-current {
    color: #d49812;
}

.mc-status__card.is-l2 .mc-status__progress-labels .is-next {
    color: #ff6008;
}

.mc-status__card.is-l3 .mc-status__progress-labels .is-current {
    color: #ff6008;
}

.mc-status__card.is-l3 .mc-status__progress-labels .is-next {
    color: #050505;
}

.mc-status__progress-text {
    flex: 1;
    text-align: center;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.16px;
}

.mc-status__progress-muted {
    color: #666;
}

.mc-status__progress-em {
    color: #050505;
}

.mc-status__bar {
    height: 8px;
    border-radius: 999px;
    background: #e8e8e8;
    overflow: hidden;
}

.mc-status__bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--mc-progress);
    transition: width .3s ease;
}

.mc-status__card.is-l0 .mc-status__bar-fill {
    background: #657087;
}

.mc-status__card.is-l1 .mc-status__bar-fill {
    background: #304786;
}

.mc-status__card.is-l2 .mc-status__bar-fill {
    background: #805401;
}

.mc-status__card.is-l3 .mc-status__bar-fill {
    background: #884a27;
}

.mc-status__card.is-l4 .mc-status__bar-fill {
    background: #e3c987;
}

.mc-tier-badge {
    display: block;
    object-fit: contain;
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
}

.mc-status__badge {
    display: none;
}

.mc-tier-badge--status {
    width: 100%;
    height: 100%;
}

.mc-status__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.mc-status__mobile-actions .mc-btn {
    width: 100%;
    min-height: 32px;
}

/* Member benefits (logged-in) */
.mc-benefits {
    padding: 0px 0 48px;
}

.mc-benefits__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.mc-benefits__heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 100%;
}

.mc-benefits__title {
    margin: 0;
    color: #000;
    text-align: center;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: var(--text-M-H3--size, 23px);
    font-style: normal;
    font-weight: var(--text-M-H3--weight, 600);
    line-height: var(--text-M-H3--line-height, 35px);
    letter-spacing: var(--text-M-H3--letter-spacing, 0);
}

.mc-benefits__heading .mc-info-btn img {
    width: 24px;
    height: 24px;
}

.mc-info-trigger {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.mc-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.mc-info-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: -11px;
    width: 265px;
    z-index: 30;
    text-align: left;
}

.mc-info-popover.is-open {
    display: block;
}

.mc-info-popover.is-open.is-anchored {
    position: fixed;
    top: auto;
    right: auto;
    transform: none;
    z-index: 1001;
    width: min(265px, calc(100vw - 32px));
}

.mc-info-popover.is-open.is-anchored.is-centered-x {
    left: 50%;
    right: auto;
}

.mc-info-popover__arrow {
    position: absolute;
    top: -7px;
    left: 16px;
    width: 0;
    height: 0;
    z-index: 2;
    overflow: visible;
    border-style: solid;
    border-width: 0 8px 8px;
    border-color: transparent transparent #fff;
    filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, .08));
}

.mc-info-popover.is-placement-above .mc-info-popover__arrow {
    top: auto;
    bottom: -8px;
    border-width: 8px 8px 0;
    border-color: #fff transparent transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08));
}

.mc-info-popover__body {
    padding: 12px;
    border-radius: 6px;
    background: #fff;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, .04),
        0 18px 24px rgba(0, 0, 0, .08);
}

.mc-info-popover__body p {
    margin: 0 0 8px;
    color: var(--mc-muted);
    font-size: 13px;
    line-height: 21px;
    letter-spacing: 0;
    word-break: break-all;
}

.mc-info-popover__body p:last-child {
    margin-bottom: 0;
}

.mc-info-popover--benefits .mc-info-popover__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mc-info-popover--benefits .mc-info-popover__body p {
    margin: 0;
}

.mc-benefits__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
    padding: 2px 0 2px 4px;
    color: var(--mc-black);
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-decoration: none;
}

.mc-benefits__link img {
    width: 18px;
    height: 18px;
}

button.mc-benefits__link {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

/* Tier compare modal (Figma 577:10018) */
.mc-tier-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.mc-tier-modal.is-open {
    display: flex;
}

.mc-tier-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.mc-tier-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #c6c6c6;
    border-radius: 6px;
    box-shadow:
        0 6px 32px -8px rgba(0, 0, 0, .04),
        0 18px 48px -20px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.mc-tier-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 16px 24px 24px;
    background: #fff;
}

.mc-tier-modal__title {
    margin: 0;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 23px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: -0.92px;
    color: var(--mc-black);
}

.mc-tier-modal__close {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 120px;
    background: transparent;
    cursor: pointer;
}

.mc-tier-modal__close::before,
.mc-tier-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--mc-black);
}

.mc-tier-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mc-tier-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.mc-tier-modal__body {
    flex: 1;
    min-height: 0;
    padding: 0 24px 24px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.mc-tier-modal__accordion {
    display: none;
}

.mc-tier-modal__table-wrap {
    overflow: auto;
}

.mc-tier-modal.is-mobile .mc-tier-modal__table-wrap {
    display: none;
}

.mc-tier-modal.is-mobile .mc-tier-modal__accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.mc-tier-modal__accordion .mc-tier-acc {
    margin-bottom: 0;
}

.mc-table--modal {
    width: 100%;
    border-collapse: collapse;
    /* table-layout: fixed; */
    font-size: 11px;
    line-height: 18px;
}

.mc-table--modal .mc-table__corner {
    width: 142px;
}

.mc-table--modal thead th {
    padding: 6px 4px 12px;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 500;
    vertical-align: bottom;
    background: #fff;
}

.mc-table--modal tbody th,
.mc-table--modal tbody td {
    border-bottom: 1px solid #e8e8e8;
    text-align: center;
    vertical-align: middle;
}

.mc-table--modal tbody th {
    padding-left: 16px;
    padding-right: 16px;
    font-weight: 400;
    font-size: 13px;
    color: #0a0a0a;
    background: #fff;
    white-space: normal;
}

.mc-table--modal tbody tr:nth-child(1) th,
.mc-table--modal tbody tr:nth-child(2) th {
    height: 56px;
}



.mc-grades__table-wrap tbody tr:nth-child(1) th,
.mc-grades__table-wrap tbody tr:nth-child(2) th {
    height: 78px;
}

.mc-grades__table-wrap {
    padding: 16px 0px;
}

.mc-grades__table-wrap tbody tr:not(.is-tall) th,
.mc-grades__table-wrap tbody tr:not(.is-tall) td {
    height: 56px;
}

.mc-table--modal tbody th small {
    display: block;
    margin-top: 0;
    font-size: 8px;
    line-height: 18px;
    color: var(--mc-quaternary);
    font-weight: 400;
}

.mc-table--modal tbody tr.is-tall th,
.mc-table--modal tbody tr.is-tall td {}

.mc-table--modal tbody tr:not(.is-tall) th,
.mc-table--modal tbody tr:not(.is-tall) td {
    height: 40px;
}

.mc-table--modal tbody tr.is-tall {
    height: 40px;
}

.mc-table--modal td {
    color: var(--font-icon-primary, #050505);
    text-align: center;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: var(--text-utility-size, 11px);
    font-style: normal;
    font-weight: var(--text-utility-weight, 400);
    line-height: var(--text-utility-line-height, 18px);
    letter-spacing: var(--text-utility-letter-spacing, 0);
}

.mc-table--modal td.is-multiline small {
    display: block;
    margin-top: 0;
    font-size: 8px;
    line-height: 18px;
    color: var(--mc-quaternary);
}

.mc-table--modal .mc-tier-head {
    gap: 6px;
}

.mc-table--modal .mc-tier-head span {
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}

.mc-table--modal .mc-tier-badge--table {
    width: 39px;
    height: auto;
}

.mc-table--modal .is-dash {
    color: var(--mc-quaternary);
    font-size: 11px;
}

.mc-table--modal .is-dot::before {
    width: 8px;
    height: 8px;
}

html.is-mc-modal-open,
body.is-mc-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Order history modal (Figma 626:3645) */
.mc-order-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overscroll-behavior: none;
    touch-action: none;
}

.mc-order-modal.is-open {
    display: flex;
}

.mc-order-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.mc-order-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #c6c6c6;
    border-radius: 6px;
    box-shadow:
        0 6px 32px -8px rgba(0, 0, 0, .04),
        0 18px 48px -20px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.mc-order-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 16px 24px 24px;
    background: #fff;
}

.mc-order-modal__title {
    margin: 0;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 23px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: -0.92px;
    color: var(--mc-black);
}

.mc-order-modal__close {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 120px;
    background: transparent;
    cursor: pointer;
}

.mc-order-modal__close::before,
.mc-order-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--mc-black);
}

.mc-order-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mc-order-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.mc-order-modal__body {
    flex: 1;
    /* min-height: 0; */
    padding: 0 24px;
    /* overflow: auto; */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.mc-order-modal__content {
    width: 100%;
    max-width: 852px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mc-order-modal__table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 852px;
}

.mc-order-modal__thead,
.mc-order-modal__row {
    display: grid;
    grid-template-columns: 110px 130px minmax(140px, 1fr) 130px 72px;
    column-gap: 24px;
    align-items: center;
    padding: 0 40px;
}

.mc-order-modal__thead {
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 15px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.68px;
    color: #2f2f2f;
    white-space: nowrap;
}

.mc-order-modal__row {
    min-height: 47px;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: 15px;
    line-height: 27px;
    letter-spacing: -0.68px;
    color: #2f2f2f;
    white-space: nowrap;
}

.mc-order-modal__row.is-empty {
    min-height: 40px;
}

.mc-order-modal__row.is-pos {
    color: #2f2f2f;
}

.mc-order-modal__cell.is-amount.is-pos,
.mc-order-modal__cell.is-earphone.is-pos {
    color: #198038;
}

.mc-order-modal__cell.is-amount.is-neg,
.mc-order-modal__cell.is-earphone.is-neg {
    color: #da1e28;
}

.mc-order-modal__foot {
    flex-shrink: 0;
    height: 32px;
    background: #fff;
    border-radius: 0 0 6px 6px;
}

.mc-order-modal__pager {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 24px 24px;
}

.mc-order-modal__pager.is-visible {
    display: flex;
}

.mc-order-modal.is-mobile .mc-order-modal__pager {
    display: none !important;
}

.mc-order-modal__pager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mc-order-modal__pager-btn:disabled {
    opacity: .35;
    cursor: default;
}

.mc-order-modal__pager-btn img {
    width: 24px;
    height: 24px;
    display: block;
}

.mc-order-modal__pager-btn.is-prev img {
    transform: rotate(180deg);
}

.mc-order-modal__pager-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: 13px;
    line-height: 21px;
    letter-spacing: -0.52px;
    color: var(--mc-black);
    cursor: pointer;
}

.mc-order-modal__pager-num.is-active {
    background: #ff4d0a;
    color: #fff;
    cursor: default;
}

.mc-order-modal__loading,
.mc-order-modal__loading-more,
.mc-order-modal__empty-msg {
    padding: 24px 40px;
    text-align: center;
    color: var(--mc-muted);
    font-size: 15px;
}

.mc-order-modal__loading-more {
    padding: 12px 16px;
}

.mc-benefits__grid {
    display: grid;
    gap: 21px;
}

.mc-benefit-card {
    position: relative;
    border-radius: 12px;
    /* overflow: hidden; */
    min-height: 200px;
    background: var(--mc-card-tint);
}

.mc-benefit-card__bg {
    position: absolute;
    inset: 0;
    background: var(--mc-card-tint);
}

.mc-benefit-card__img {
    position: absolute;
    right: 12px;
    top: -12px;
    width: 96px;
    height: auto;
    pointer-events: none;
}

.mc-benefit-card__body {
    position: relative;
    z-index: 1;
    padding: 28px 20px 24px;
    max-width: 72%;
}

.mc-benefit-card__body h3 {
    margin: 0 0 12px;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 19px;
    font-weight: 500;
}

.mc-benefit-card__body p {
    margin: 0 0 32px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--font-icon-tertiary, #666);
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: var(--text-body-weight, 400);
    line-height: 24px;
    letter-spacing: var(--text-body-letter-spacing, -0.6px);
}

.mc-benefit-card--ticket:not(.is-locked) .mc-benefit-card__body h3 {
    margin-bottom: 16px;
}

.mc-benefit-card--ticket:not(.is-locked) .mc-benefit-card__body p {
    /* max-width: min(304px, 100%); */
    margin-bottom: 0;
}

.mc-benefit-card--vip:not(.is-locked) .mc-benefit-card__body h3 {
    margin-bottom: 16px;
}

.mc-benefit-card--vip:not(.is-locked) .mc-benefit-card__body p {
    /* max-width: min(304px, 100%); */
    margin-bottom: 0;
}

.mc-benefit-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mc-benefit-card__actions .mc-btn--black,
.mc-benefit-card__actions .mc-btn--outline-dark {
    height: 32px;
    /* padding: 13px 32px; */
}

.mc-benefit-card.is-locked {
    opacity: 0.6;
    /* min-height: 72px; */
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(113.13deg, #f5f5f5 1.97%, #ddd 90.38%);
    border: 0;
}

.mc-benefit-card.is-locked .mc-benefit-card__bg {
    display: none;
}

.mc-benefit-card__frame {
    display: none;
    pointer-events: none;
}

.mc-benefit-card:not(.is-locked) .mc-benefit-card__frame {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.mc-benefit-card:not(.is-locked) .mc-benefit-card__img {
    z-index: 1;
}

.mc-benefit-card:not(.is-locked) .mc-benefit-card__body {
    z-index: 3;
}

.mc-benefit-card:not(.is-locked) {
    background: #fff0e8;
}

.mc-benefit-card:not(.is-locked) .mc-benefit-card__bg {
    background: #fff0e8;
}

.mc-benefit-card.is-locked .mc-benefit-card__img {
    /* display: none; */
}

.mc-benefit-card.is-locked .mc-benefit-card__body {
    padding: 0;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mc-benefit-card.is-locked h3 {
    margin: 0;
    font-size: 23px;
    line-height: 35px;
    flex: 1;
    min-width: 0;
}

.mc-benefit-card__lock-wrap {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.mc-benefit-card__lock-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--mc-black);
}

.mc-benefit-card__lock-wrap .mc-benefit-card__lock {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
}

.mc-benefits__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #404040;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: var(--text-M-H6--letter-spacing, -0.6px);
    cursor: pointer;
}

.mc-benefits__toggle-icon {
    width: 24px;
    height: 24px;
    transform: rotate(90deg);
    flex-shrink: 0;
}

.mc-benefits__toggle.is-expanded .mc-benefits__toggle-icon {
    transform: rotate(-90deg);
}

/* Grades (guest) */
.mc-grades {
    padding: 48px 0;
    background: var(--mc-grades-bg);
}

.mc-grades__head {
    text-align: center;
    margin-bottom: 28px;
}

.mc-grades__head-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.mc-grades__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 23px;
    font-weight: 500;
}

.mc-grades__head-row .mc-info-btn img {
    width: 24px;
    height: 24px;
}

.mc-grades__desc {
    margin: 0;
    color: #404040;
    font-size: 15px;
    line-height: 24px;
}

/* PC table */
.mc-grades__table-wrap {
    display: none;
    overflow-x: auto;
    background: #fff;
    border-radius: 8px;
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mc-table th,
.mc-table td {
    border-bottom: 1px solid var(--mc-line);
    text-align: center;
    vertical-align: middle;
}

.mc-table tr:last-child th,
.mc-table tr:last-child td {
    border-bottom: 0;
}

.mc-table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 500;
    background: #fff;
    border-bottom: 1px solid var(--mc-line);
}

.mc-table tbody th {
    font-weight: 400;
    color: var(--mc-text);
    background: #fff;
    white-space: nowrap;
}

.mc-table tbody th small {
    display: block;
    margin-top: 2px;
    color: var(--font-icon-quaternary, #8D8D8D);
    text-align: center;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: 8px;
    font-style: normal;
    font-weight: var(--text-utility-weight, 400);
    line-height: var(--text-utility-line-height, 18px);
    letter-spacing: var(--text-utility-letter-spacing, 0);
}

.mc-table .mc-tier-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mc-table--grades .mc-tier-badge--table {
    width: 56px;
    height: auto;
    max-height: 64px;
    margin: 0 auto;
}

.mc-table td.is-multiline {
    /* white-space: pre-line; */
}

.mc-table td.is-multiline small {
    display: block;
    color: var(--font-icon-quaternary, #8D8D8D);
    text-align: center;
    font-family: Pretendard;
    font-size: 8px;
    font-style: normal;
    font-weight: var(--text-utility-weight, 400);
    line-height: var(--text-utility-line-height, 18px);
    letter-spacing: var(--text-utility-letter-spacing, 0);
}

.mc-table .is-dash {
    color: var(--mc-quaternary);
}

.mc-table .is-dot::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mc-black);
}

/* Mobile accordion */
.mc-grades__accordion {
    display: block;
}

.mc-tier-acc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 16px;
    background: #fff;
}

.mc-tier-acc.is-l0 {
    background: linear-gradient(180.28deg, #dbe1e7 8.31%, #fff 21.67%);
}

.mc-tier-acc.is-l1 {
    background: linear-gradient(179.17deg, #9ebdfe 5%, #fff 22.67%);
}

.mc-tier-acc.is-l2 {
    background: linear-gradient(180.29deg, #ffe2af 8.31%, #fff 22.42%);
}

.mc-tier-acc.is-l3 {
    background: linear-gradient(180.29deg, #ffae72 8.31%, #fff 22.42%);
}

.mc-tier-acc.is-l4 {
    border: 1px solid #E8E8E8;
    background: linear-gradient(176deg, var(--Basic-GY-70, #525252) -186.2%, #FFF 27.23%);
}

.mc-tier-acc.is-l4 .mc-tier-acc__title,
.mc-tier-acc.is-l4 .mc-tier-acc__row dd {
    color: var(--mc-black);
}

.mc-tier-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.mc-tier-acc__title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    color: var(--mc-black);
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: var(--text-M-H4--size, 19px);
    font-style: normal;
    font-weight: var(--text-M-H4--weight, 600);
    line-height: var(--text-M-H4--line-height, 26px);
    letter-spacing: var(--text-M-H4--letter-spacing, 0);
}

.mc-tier-badge--acc {
    width: 28px;
    height: auto;
    flex-shrink: 0;
}

.mc-tier-acc__chevron {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.mc-tier-acc__chevron::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--mc-black);
    border-bottom: 1.5px solid var(--mc-black);
    transform: translate(-50%, -35%) rotate(45deg);
    transition: transform .2s ease;
}

.mc-tier-acc.is-open .mc-tier-acc__chevron::before {
    transform: translate(-50%, -65%) rotate(-135deg);
}

.mc-tier-acc__divider {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    background: #e8e8e8;
    border: 0;
}

.mc-tier-acc__body {
    display: none;
    padding: 0;
    background: transparent;
}

.mc-tier-acc:not(.is-open) .mc-tier-acc__body {
    display: none;
}

.mc-tier-acc.is-open .mc-tier-acc__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mc-tier-acc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
}

.mc-tier-acc__row dt {
    margin: 0;
    color: var(--mc-muted);
    flex: 1;
    min-width: 0;
}

.mc-tier-acc__row dt small {
    display: block;
    margin-top: 0;
    color: var(--mc-muted);
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: var(--text-utility-size, 11px);
    font-style: normal;
    font-weight: var(--text-utility-weight, 400);
    line-height: var(--text-utility-line-height, 18px);
    letter-spacing: var(--text-utility-letter-spacing, 0);
}

.mc-tier-acc__row dd {
    margin: 0;
    text-align: right;
    flex-shrink: 0;
    color: var(--mc-black);
}

.mc-tier-acc__row dd.is-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mc-black);
    font-size: 0;
    color: transparent;
    padding: 0;
}

.mc-tier-acc.is-l4 .mc-tier-acc__row:first-child {
    align-items: flex-start;
}

.mc-tier-acc.is-l4 .mc-tier-acc__row:first-child dd {
    margin-top: 9px;
    max-width: 52%;
    white-space: normal;
}

/* Enjoy (guest) */
.mc-enjoy {
    padding: 0 0 48px;
    background: #fff;
}

.mc-enjoy h2 {
    margin: 0;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.16px;
    text-align: center;
}

.mc-enjoy__body {
    margin-top: 32px;
}

.mc-enjoy__line {
    display: none;
}

.mc-enjoy__steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mc-enjoy__step {
    display: flex;
    align-items: center;
    width: 100%;
}

.mc-enjoy__step:not(.is-reverse) {
    padding-left: 32px;
}

.mc-enjoy__step.is-reverse {
    padding-right: 32px;
    justify-content: space-between;
}

.mc-enjoy__cluster {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.mc-enjoy__step:not(.is-reverse) .mc-enjoy__cluster {
    gap: 26px;
}

.mc-enjoy__step:last-child:not(.is-reverse) .mc-enjoy__cluster {
    gap: 24px;
}

.mc-enjoy__step.is-reverse .mc-enjoy__cluster {
    flex: 0 1 auto;
}

.mc-enjoy__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-enjoy__num img {
    display: block;
    width: auto;
    height: 24px;
}

.mc-enjoy__step:first-child:not(.is-reverse) .mc-enjoy__num img {
    width: 10px;
}

.mc-enjoy__step.is-reverse .mc-enjoy__num img,
.mc-enjoy__step:last-child:not(.is-reverse) .mc-enjoy__num img {
    width: 18px;
}

.mc-enjoy__icon {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    position: relative;
}

.mc-enjoy__step:not(.is-reverse) .mc-enjoy__icon {
    margin-left: auto;
}

.mc-enjoy__icon img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 7px;
    transform: translateX(-50%);
}

.mc-enjoy__step.is-reverse .mc-enjoy__icon img,
.mc-enjoy__step:last-child:not(.is-reverse) .mc-enjoy__icon img {
    width: 84px;
    height: 84px;
    top: 0;
    transform: translateX(-50%);
}

.mc-enjoy__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 1 200px;
    width: 200px;
    max-width: 200px;
    min-width: 0;
}

.mc-enjoy__copy.is-right {
    align-items: flex-end;
    text-align: right;
    padding: 6px 0;
}

.mc-enjoy__copy strong {
    display: block;
    margin: 0 0 4px;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.16px;
    background: linear-gradient(90deg, #2a1c00 21%, #c3a26d 104%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mc-enjoy__copy p {
    margin: 0;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--mc-text);
}

.mc-enjoy__desc--pc {
    display: none;
}

.mc-benefit-card__desc--pc {
    display: none;
}

/* Events */
.mc-events {
    padding: 32px 0 48px;
}

.mc-events h2 {
    margin: 0 0 24px;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: 23px;
    font-weight: 600;
    text-align: center;
}

.mc-events__body {
    padding-top: 0;
}

.mc-events__grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: stretch;
}

.mc-event {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.mc-event__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f3f3;
}

.mc-event__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.mc-event__title {
    margin: 0;
    font-size: 20px;
    color: var(--font-icon-primary, #050505);
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: var(--text-M-H3--size, 23px);
    font-style: normal;
    font-weight: var(--text-M-H3--weight, 600);
    line-height: var(--text-M-H3--line-height, 35px);
    letter-spacing: var(--text-M-H3--letter-spacing, 0);
}

/* FAQ */
.mc-faq-wrap {
    padding: 0px 0 40px;
}

.mc-faq-wrap h2 {
    margin: 0 0 24px;
    text-align: center;
    color: var(--font-icon-primary, #050505);
    text-align: center;
    font-family: var(--Shokz-Sans-Display, Pretendard);
    font-size: var(--text-PC-H4--size, 27px);
    font-style: normal;
    font-weight: var(--text-PC-H4--weight, 600);
    line-height: var(--text-PC-H4--line-height, 41px);
    letter-spacing: var(--text-PC-H4--letter-spacing, 0);
}

.mc-faq {
    max-width: 1200px;
    margin: 0 auto;
}

.mc-faq__divider {
    height: 1px;
    background: var(--mc-line);
    margin-bottom: 24px;
}

.mc-faq__item {
    border-bottom: 1px solid var(--mc-line);
}

.mc-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    cursor: pointer;
    color: var(--mc-black);
}

.mc-faq__q span {
    width: 10px;
    height: 10px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.mc-faq__item.is-open .mc-faq__q span {
    transform: translateY(3px) rotate(-135deg);
}

.mc-faq__a {
    display: none;
    padding: 0 0 16px 0;
    color: var(--mc-muted);
    font-size: 14px;
    line-height: 1.6;
}

.mc-faq__item.is-open .mc-faq__a {
    display: block;
}

.mc-note {
    max-width: 1200px;
    margin: 48px auto 0;
    padding: 0 16px;
    color: var(--mc-quaternary);
    font-size: 13px;
    line-height: 1.65;
    text-align: left;
    font-family: var(--Shokz-Sans-Text, Pretendard);
    font-style: normal;
    font-weight: var(--text-body-weight, 400);
    line-height: var(--text-body-line-height, 27px);
    letter-spacing: var(--text-body-letter-spacing, -0.68px);
}

.mc-note a,
.mc-faq__a a {
    color: var(--mc-quaternary);
    text-decoration: underline;
}

@media (min-width: 769px) {
    .mc-hero {
        height: 620px;
        min-height: 620px;
    }

    .mc-hero__picture img {
        left: 50%;
        right: auto;
        width: 100%;
        min-width: 100%;
        height: 620px;
        transform: translateX(-50%);
        object-fit: cover;
        object-position: center center;
    }

    .mc-hero__inner {
        right: auto;
        top: 201px;
        transform: none;
        width: min(1200px, calc(100vw - 40px));
        transform: translateX(-50%);
        left: 50%;
        bottom: initial;
    }

    .member-center-page.is-guest .mc-hero__inner {
        top: 201px;
    }

    .mc-hero h1 {
        font-size: 40px;
        line-height: 1.3;
        max-width: 467px;
        font-weight: var(--text-PC-H2--weight, 600);
    }

    .mc-hero__copy {
        font-size: 19px;
        max-width: 520px;
    }

    .mc-tier-modal__head {
        height: 100px;
    }

    .mc-hero__actions {
        gap: 16px;
        margin-top: 32px;
    }

    .mc-hero__dots {
        display: none;
    }

    .mc-btn {
        height: 24px;
        padding: 0 32px;
        font-size: 15px;
        /* padding-right: 0; */
        gap: 2px;
    }

    .mc-tabs a {
        font-size: 18px;
        padding-bottom: 16px;
    }

    .mc-container {
        padding: 0 0px;
    }

    .mc-grades__container {
        padding: 0;
    }

    .member-center-page.is-member .mc-hero {
        height: 620px;
        min-height: 620px;
    }

    .member-center-page.is-member .mc-hero__inner {
        left: 50%;
        right: auto;
        top: 258px;
        width: min(1200px, calc(100vw - 40px));
        transform: translateX(-50%);
    }

    .member-center-page.is-member .mc-hero h1 {
        font-size: 40px;
        line-height: 52px;
        margin-bottom: 43px;
    }

    .br-p {
        display: block;
    }

    .member-center-page.is-member .mc-hero__copy {
        max-width: none;
        font-size: 19px;
        line-height: 26px;
    }

    .mc-status {
        padding: 64px 0 48px;
    }

    .mc-status__card {
        min-height: 332px;
    }

    .mc-status__head-card {
        padding: 0;
        min-height: 0;
        background: none;
        border-radius: 0;
        padding-right: 0px;
    }

    .mc-status__body {
        padding: 61px 36px 28px 72px;
        max-width: 898px;
    }

    .mc-status__name {
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H4--size, 27px);
        font-style: normal;
        font-weight: var(--text-PC-H4--weight, 400);
        line-height: var(--text-PC-H4--line-height, 41px);
        letter-spacing: var(--text-PC-H4--letter-spacing, 0);
    }

    .mc-status__email {
        font-size: 13px;
        line-height: 21px;
    }

    .mc-status__user {
        width: 322px;
    }

    .mc-status__meta {
        grid-template-columns: repeat(3, auto);
        gap: 64px;
        justify-content: flex-start;
        width: 683px;
    }

    .mc-status__meta-item dd {
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H4--size, 27px);
        font-weight: var(--text-PC-H4--weight, 600);
        line-height: var(--text-PC-H4--line-height, 41px);
        letter-spacing: var(--text-PC-H4--letter-spacing, 0);
    }

    .mc-status__progress-text {
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 15px);
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 24px);
        letter-spacing: var(--text-body-letter-spacing, -0.6px);
    }

    .mc-status__card.is-l4 {
        min-height: 311px;
        border-radius: 6px;
        color: #fff;
    }

    mc-table thead th {
        padding: 12px 8px;
    }

    .mc-status__card.is-l4 .mc-status__body {
        padding-top: 40px;
        padding-bottom: 28px;
        max-width: 827px;
    }

    .mc-status__card.is-l4 .mc-status__email {
        color: var(--font-icon-quaternary, #8d8d8d);
    }

    .mc-status__card.is-l4 .mc-status__meta-item dt,
    .mc-status__card.is-l4 .mc-status__meta-item dd {
        color: #fff;
    }

    .mc-status__card.is-l4 .mc-status__actions .mc-btn--black {
        background: var(--button-bg-white, #fff);
        color: var(--font-icon-primary, #050505);
        border-color: #fff;
        min-height: 32px;
    }

    .mc-status__card.is-l4 .mc-status__actions .mc-btn--text {
        color: #fff;
    }

    .mc-grades__head-row {
        margin-bottom: 8px;
    }

    .mc-grades__head {
        margin-bottom: 32px;
    }

    .mc-status__card.is-l4 .mc-status__actions .mc-btn--text img {
        filter: brightness(0) invert(1);
    }

    .mc-status__card.is-l4 .mc-status__bar {
        background: #e8e8e8;
    }

    .mc-status__card.is-l4 .mc-status__progress--pc .mc-status__progress-labels .is-current,
    .mc-status__card.is-l4 .mc-status__progress--pc .mc-status__progress-labels .is-next {
        display: none;
    }

    .mc-status__card.is-l4 .mc-status__progress--pc .mc-status__progress-text,
    .mc-status__card.is-l4 .mc-status__progress--pc .mc-status__progress-muted,
    .mc-status__card.is-l4 .mc-status__progress--pc .mc-status__progress-em {
        color: #ded1b2;
        text-align: left;
        flex: none;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.16px;
    }

    .mc-status__mobile-actions {
        display: none;
    }

    .mc-status__actions {
        display: flex;
    }

    .mc-benefits {
        padding: 0 0 96px;
    }

    .mc-benefits__head {
        margin-bottom: 48px;
    }

    .mc-benefits__title {
        color: #000;
        text-align: center;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H3--size, 34px);
        font-style: normal;
        font-weight: var(--text-PC-H3--weight, 600);
        line-height: var(--text-PC-H3--line-height, 51px);
        letter-spacing: var(--text-PC-H3--letter-spacing, 0);
    }

    .mc-benefits__link {
        font-size: 19px;
        line-height: 26px;
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H5--size, 19px);
        font-style: normal;
        font-weight: var(--text-PC-H5--weight, 500);
        line-height: var(--text-PC-H5--line-height, 26px);
        letter-spacing: var(--text-PC-H5--letter-spacing, 0);
    }

    .mc-tier-modal__title {
        font-size: 27px;
        line-height: 41px;
        letter-spacing: -1.08px;
    }

    .mc-order-modal {
        align-items: stretch;
        justify-content: center;
        padding: 24px 16px;
    }

    .mc-order-modal__dialog {
        width: 900px;
        max-width: 900px;
        height: 100%;
        max-height: 555px;
        font-family: var(--Shokz-Sans-Text, Pretendard);
        top: 50%;
        transform: translateY(-50%);
    }

    .mc-order-modal__title {
        font-size: 27px;
        line-height: 41px;
        letter-spacing: -1.08px;
        color: var(--font-icon-primary, #050505);
        font-weight: var(--text-PC-H4--weight, 600);
    }

    .mc-order-modal__close {
        width: 60px;
        height: 60px;
    }

    .mc-order-modal__table .mc-order-modal__rows {
        gap: 12px;
        display: flex;
        flex-direction: column;
    }

    .mc-order-modal__thead,
    .mc-order-modal__row {
        font-size: 17px;
        line-height: 27px;
        letter-spacing: -0.68px;
    }

    .mc-order-modal__thead {
        font-size: 17px;
        line-height: 26px;
        letter-spacing: -0.68px;
        color: #2f2f2f;
    }

    .mc-order-modal__pager {
        padding: 24px 24px 24px;
    }

    .mc-benefits__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 21px 24px;
    }

    .mc-benefit-card {
        min-height: 245px;
    }

    .mc-benefit-card__body {
        padding: 44px 0 28px 28px;
        max-width: 100%;
    }

    .mc-benefit-card__body h3 {
        font-size: 23px;
        line-height: 35px;
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-style: normal;
        font-weight: var(--text-M-H3--weight, 600);
        letter-spacing: var(--text-M-H3--letter-spacing, 0);
    }

    .mc-benefit-card__body p {
        font-size: 15px;
        line-height: 24px;
        margin-right: 30px;
    }

    .mc-benefit-card__body p strong {
        color: var(--font-icon-tertiary, #666);
        font-family: Pretendard;
        font-size: var(--text-body-size, 15px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--text-body-line-height, 24px);
        letter-spacing: var(--text-body-letter-spacing, -0.6px);
    }

    .mc-benefit-card__img {
        right: 16px;
        top: -22px;
        width: 120px;
    }

    .mc-benefit-card.is-locked {
        min-height: 245px;
        display: block;
        padding: 0;
        opacity: 0.6;
        /* overflow: hidden; */
        background: linear-gradient(113.13deg, #f5f5f5 1.97%, #ddd 90.38%);
    }

    .mc-benefit-card.is-locked .mc-benefit-card__frame {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }

    .mc-benefit-card.is-locked .mc-benefit-card__img {
        display: block;
        z-index: 1;
        object-fit: contain;
        object-position: bottom right;
    }

    .mc-benefit-card.is-locked--point .mc-benefit-card__img {
        right: 29px;
        top: -22px;
        left: auto;
        width: 81px;
        transform: rotate(7.89deg);
    }

    .mc-benefit-card.is-locked--upgrade .mc-benefit-card__img {
        right: 0;
        top: -17px;
        width: 165px;
        transform: none;
    }

    .mc-benefit-card.is-locked--birthday .mc-benefit-card__img {
        right: 0;
        top: -18px;
        width: 171px;
        transform: none;
    }

    .mc-benefit-card.is-locked--ticket .mc-benefit-card__img {
        right: 0;
        top: -22px;
        width: 138px;
        height: 92px;
        transform: none;
    }

    .mc-benefit-card.is-locked--vip .mc-benefit-card__img {
        right: 0;
        top: -24px;
        width: 145px;
        height: 114px;
        transform: none;
    }

    .mc-benefit-card.is-locked--preview .mc-benefit-card__img {
        right: 0;
        top: -29px;
        width: 136px;
        height: 90px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked) .mc-benefit-card__img {
        object-fit: contain;
        object-position: bottom right;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--point .mc-benefit-card__img {
        right: 29px;
        top: -22px;
        left: auto;
        width: 81px;
        transform: rotate(7.89deg);
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--upgrade .mc-benefit-card__img {
        right: -7px;
        top: -17px;
        width: 165px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--birthday .mc-benefit-card__img {
        right: 33px;
        top: -23px;
        width: 89.03px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--ticket .mc-benefit-card__img {
        right: 15px;
        left: auto;
        top: -11px;
        width: 138px;
        height: 92px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--vip .mc-benefit-card__img {
        right: 0;
        top: -24px;
        width: 145px;
        height: 114px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--preview .mc-benefit-card__img {
        right: 0;
        top: -29px;
        width: 136px;
        height: 90px;
        transform: none;
    }

    .mc-benefit-card:not(.is-locked).mc-benefit-card--preview .mc-benefit-card__body,
    .mc-benefit-card:not(.is-locked).mc-benefit-card--vip .mc-benefit-card__body,
    .mc-benefit-card:not(.is-locked).mc-benefit-card--ticket .mc-benefit-card__body {
        padding-top: 77px;
    }

    .mc-benefit-card--ticket:not(.is-locked) .mc-benefit-card__body p {
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
        max-width: 312px;
    }

    .mc-benefit-card--vip:not(.is-locked) .mc-benefit-card__body p {
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
    }

    .mc-benefit-card.is-locked .mc-benefit-card__body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 0 0 77px 27px;
        z-index: 2;
    }

    .mc-benefit-card.is-locked h3 {
        margin: 0;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.16px;
        flex: 1;
        min-width: 0;
    }

    .mc-benefits__toggle {
        display: none;
    }

    .mc-grades {
        padding: 80px 0;
    }

    .mc-grades__title {
        font-size: 34px;
        color: #000;
        text-align: center;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-style: normal;
        font-weight: var(--text-PC-H3--weight, 600);
        line-height: var(--text-PC-H3--line-height, 51px);
        letter-spacing: var(--text-PC-H3--letter-spacing, 0);
    }

    .mc-table .mc-tier-head {
        gap: 12px;
        color: var(--font-icon-primary, #050505);
        text-align: center;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-M-H4--size, 19px);
        font-style: normal;
        font-weight: var(--text-M-H4--weight, 600);
        line-height: var(--text-M-H4--line-height, 26px);
        letter-spacing: var(--text-M-H4--letter-spacing, 0);
    }

    .mc-grades__table-wrap {
        display: block;
        border-radius: 12px;
    }

    .mc-grades__accordion {
        display: none;
    }

    .mc-enjoy {
        padding: 72px 0 96px;
    }

    .mc-enjoy h2 {
        color: #000;
        text-align: center;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H3--size, 34px);
        font-style: normal;
        font-weight: var(--text-PC-H3--weight, 600);
        line-height: var(--text-PC-H3--line-height, 51px);
        letter-spacing: var(--text-PC-H3--letter-spacing, 0);
    }

    .mc-enjoy__body {
        position: relative;
        margin-top: 56px;
        padding-top: 0;
    }

    .mc-enjoy__line {
        display: block;
        position: absolute;
        left: 50%;
        top: 48px;
        transform: translate(-50%, -50%);
        width: min(744px, calc(100% - 96px));
        height: 10px;
        z-index: 0;
        pointer-events: none;
    }

    .mc-enjoy__line img {
        display: block;
        width: 100%;
        height: 10px;
        object-fit: fill;
    }

    .mc-enjoy__steps {
        position: relative;
        z-index: 1;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
    }

    .mc-enjoy__step,
    .mc-enjoy__step.is-reverse,
    .mc-enjoy__step:not(.is-reverse) {
        flex: 0 0 384px;
        max-width: 384px;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        text-align: center;
        justify-content: flex-start;
    }

    .mc-enjoy__cluster {
        display: contents;
    }

    .mc-enjoy__step:not(.is-reverse) .mc-enjoy__icon {
        order: -2;
        margin-left: 0;
        margin-bottom: 20px;
    }

    .mc-enjoy__step:not(.is-reverse) .mc-enjoy__copy {
        order: -1;
    }

    .mc-enjoy__num {
        display: none;
    }

    .mc-enjoy__icon {
        flex: 0 0 96px;
        width: 96px;
        height: 96px;
        margin-bottom: 20px;
    }

    .mc-enjoy__icon img,
    .mc-enjoy__step.is-reverse .mc-enjoy__icon img,
    .mc-enjoy__step:last-child:not(.is-reverse) .mc-enjoy__icon img {
        width: 80px;
        height: 80px;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
    }

    .mc-status__progress {
        width: 755px;
        padding-right: 90px;
    }

    .mc-enjoy__step:last-child .mc-enjoy__icon img {
        width: 96px;
        height: 96px;
        top: 0;
    }

    .mc-enjoy__copy,
    .mc-enjoy__step:not(.is-reverse) .mc-enjoy__copy,
    .mc-enjoy__step.is-reverse .mc-enjoy__copy,
    .mc-enjoy__step:last-child:not(.is-reverse) .mc-enjoy__copy {
        flex: none;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        align-items: center;
    }

    .mc-enjoy__copy strong {
        margin-bottom: 8px;
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--font-icon-primary, #050505);
        text-align: center;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H5--size, 19px);
        font-style: normal;
        font-weight: var(--text-PC-H5--weight, 500);
        line-height: var(--text-PC-H5--line-height, 26px);
        letter-spacing: var(--text-PC-H5--letter-spacing, 0);
    }

    .mc-enjoy__copy p {
        color: var(--Basic-GY-60, #666);
        text-align: center;
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 17px);
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 27px);
        letter-spacing: var(--text-body-letter-spacing, -0.68px);
    }

    .mc-enjoy__desc--mo {
        display: none;
    }

    .mc-enjoy__desc--pc {
        display: block;
    }

    .mc-benefit-card__desc--mo {
        display: none;
    }

    .mc-benefit-card__desc--pc {
        display: block;
    }

    .mc-events {
        padding: 0px 0 96px;
    }

    .mc-faq__q {
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 17px);
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 27px);
        letter-spacing: var(--text-body-letter-spacing, -0.68px);
    }

    .mc-note {
        color: var(--font-icon-quaternary, #8D8D8D);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 17px);
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 27px);
        letter-spacing: var(--text-body-letter-spacing, -0.68px);
    }

    .mc-faq__a {
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 15px);
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 24px);
        letter-spacing: var(--text-body-letter-spacing, -0.6px);
    }

    .mc-events h2 {
        height: 54px;
        font-size: 34px;
        margin-bottom: 32px;
        color: #000;
        text-align: center;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-style: normal;
        font-weight: var(--text-PC-H3--weight, 600);
        line-height: var(--text-PC-H3--line-height, 51px);
        letter-spacing: var(--text-PC-H3--letter-spacing, 0);
    }

    .br-m {
        display: none;
    }

    .mc-events__body {
        padding-top: 0px;
    }

    .mc-events__grid {
        flex-direction: row;
        justify-content: flex-start;
        gap: 24px;
    }

    .mc-event {
        flex: 0 0 384px;
        max-width: 384px;
    }

    .mc-event__title {
        font-size: 23px;
        line-height: 35px;
    }

    .mc-faq__q {
        padding-top: 24px;
    }

    .mc-blacklist-alert--card .mc-blacklist-alert__title {
        color: #111317;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-M-H3--size, 23px);
        font-style: normal;
        font-weight: var(--text-M-H3--weight, 600);
        line-height: var(--text-M-H3--line-height, 35px);
        letter-spacing: var(--text-M-H3--letter-spacing, -0.92px);
    }

    .mc-blacklist-alert--card .mc-blacklist-alert__desc {
        color: #000;
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 15px);
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 24px);
        letter-spacing: var(--text-body-letter-spacing, -0.6px);
    }
}

@media (min-width: 769px) and (max-width: 1300px) {
    .mc-events__body {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .mc-events__body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .mc-events__grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
    }

    .mc-event {
        flex: 0 0 384px;
        width: 384px;
        max-width: 384px;
    }

    .mc-faq-wrap {
        padding: 8px 0 96px;
    }

    .mc-faq-wrap h2 {
        font-size: 27px;
    }

    .mc-faq__q {
        font-size: 17px;
        padding: 20px 0;
    }

    .mc-note {
        font-size: 17px;
    }

    a.mc-btn--text {
        padding-right: 0;
        padding-left: 0;
    }
}

.mc-info-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 1000;
    cursor: pointer;
}

.member-center-page.is-info-popover-open .mc-info-backdrop {
    display: block;
}

@media (min-width: 900px) {
    .mc-status__body {
        /* max-width: calc(100% - 130px); */
    }

    a.mc-btn--text {
        padding-right: 0;
        padding-left: 0;
    }

    .mc-status__top {
        white-space: nowrap;
    }
}

@media (min-width: 970px) {
    .mc-status__body {
        /* max-width: calc(100% - 446px); */
    }

    a.mc-btn--text {
        padding-right: 0;
        padding-left: 0;
    }

    .mc-status__top {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .pm-anchor__tabs .js-point-anchor-tab {
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, "Shokz Sans Text");
        font-size: var(--text-utility-size, 14px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 18px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }

    .mc-hero__picture img {
        inset: 0;
        width: 100%;
        height: 554px;
        max-width: none;
        transform: none;
        object-fit: cover;
        object-position: center top;
    }

    .member-center-page.is-guest .mc-hero__inner {
        left: 16px;
        right: 16px;
        bottom: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .member-center-page.is-guest .mc-hero__panel {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        width: 100%;
    }

    .member-center-page.is-guest .mc-hero__text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .mc-blacklist-alert--card .mc-blacklist-alert__title {
        color: #000;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-M-H6--size, 15px);
        font-style: normal;
        font-weight: var(--text-M-H6--weight, 500);
        line-height: var(--text-M-H6--line-height, 22px);
        letter-spacing: var(--text-M-H6--letter-spacing, 0);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .mc-blacklist-alert--card .mc-blacklist-alert__desc {
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-utility-size, 13px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 21px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }

    .mc-blacklist-alert__btn {
        display: flex;
        height: 32px;
        padding: 13px 18px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: var(--radius-5);
        background: var(--Button-BG-black, #050505);
        color: var(--font-icon-white, #FFF);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-utility-size, 13px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 21px);
        letter-spacing: var(--text-utility-letter-spacing, -0.52px);
    }

    mc-table thead th {
        padding: 6px 4px;
    }

    /* .mc-grades__table-wrap {
        display: block;
        border-radius: 12px;
    } */
    .member-center-page .mc-hero h1 {
        margin-bottom: 8px;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-PC-H2--size, 34px);
        font-style: normal;
        font-weight: var(--text-PC-H2--weight, 600);
        line-height: var(--text-PC-H2--line-height, 44px);
        letter-spacing: var(--text-PC-H2--letter-spacing, 0);
    }

    .mc-hero__inner {
        right: auto;
    }

    .br-p {
        display: none;
    }

    .member-center-page .mc-hero__copy {
        font-size: var(--text-PC-H5--size, 19px);
        font-style: normal;
        font-weight: var(--text-PC-H5--weight, 500);
        line-height: var(--text-PC-H5--line-height, 26px);
    }

    .member-center-page.is-guest .mc-hero__copy {
        font-size: var(--text-M-H5--size, 17px);
        font-weight: var(--text-M-H5--weight, 500);
        line-height: var(--text-M-H5--line-height, 23px);
        letter-spacing: var(--text-M-H5--letter-spacing, 0);
    }

    .member-center-page.is-guest .mc-hero h1 {
        margin: 0;
        font-size: 34px;
        line-height: 44px;
        text-align: left;
        font-weight: var(--text-M-H1-Banner-weight, 600);
        margin-bottom: 8px;
    }

    .pm-anchor__tabs .js-point-anchor-tab {
        color: var(--font-icon-tertiary, #666);
        font-family: var(--Shokz-Sans-Text, "Shokz Sans Text");
        font-size: var(--text-utility-size, 14px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 18px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }


    .member-center-page.is-guest .mc-hero__copy {
        font-size: 17px;
        line-height: 23px;
        max-width: 263px;
        text-align: left;
    }

    .mc-hero__copy {
        width: 263px;
    }

    .member-center-page.is-guest .mc-hero__actions {
        margin-top: 0;
        gap: 16px;
        width: 100%;
        justify-content: flex-start;
    }

    .member-center-page.is-guest .mc-hero__actions .mc-btn {
        flex: 0 0 106px;
        width: 106px;
        min-width: 106px;
        padding: 0 18px;
    }

    .member-center-page.is-guest .mc-hero__dots {
        margin-top: 0;
        gap: 8px;
        visibility: hidden;
    }

    .member-center-page.is-guest .mc-hero__dot.is-on {
        width: 36px;
        height: 6px;
        border-radius: 10px;
        opacity: .75;
    }

    .member-center-page.is-guest .mc-hero__dot:not(.is-on) {
        width: 6px;
        height: 6px;
        opacity: .4;
    }

    .mc-tabs {
        padding: 8px 16px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .mc-tabs a {
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 15px;
        color: #666;
        font-family: var(--Shokz-Sans-Text, "Shokz Sans Text");
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        letter-spacing: var(--text-body-letter-spacing, 0.16px);
        padding-top: 4px;
    }

    .mc-tabs a.is-on {
        color: #fff;
    }

    .mc-grades {
        background: #fff;
        padding: 0 0 48px;
    }

    .mc-grades__head {
        margin-bottom: 16px;
    }

    .mc-grades__accordion {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mc-tier-acc {
        margin-bottom: 0;
    }

    .member-center-page.is-guest .mc-grades__title {
        font-size: 23px;
        line-height: 35px;
        color: #000;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-weight: var(--text-M-H3--weight, 600);
        letter-spacing: var(--text-M-H3--letter-spacing, 0);
    }

    .mc-grades__desc {
        color: var(--font-secondary, #404040);
        text-align: center;
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 15px);
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 24px);
        letter-spacing: var(--text-body-letter-spacing, -0.6px);
    }

    .member-center-page.is-guest .mc-tier-acc__title {
        font-size: 19px;
        line-height: 26px;
        letter-spacing: 0;
    }

    .mc-benefit-card__body p {
        margin-right: 29px;
    }

    .mc-benefit-card__body p strong {
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-size: var(--text-M-H5--size, 17px);
        font-style: normal;
        font-weight: var(--text-M-H5--weight, 500);
        line-height: var(--text-M-H5--line-height, 23px);
        letter-spacing: var(--text-M-H5--letter-spacing, 0);
    }


    .member-center-page.is-guest .mc-tier-acc__row {
        font-size: 13px;
        line-height: 21px;
    }

    .member-center-page.is-guest .mc-tier-acc__row dt small {
        font-size: 11px;
        line-height: 18px;
    }

    .mc-enjoy {
        padding: 0 0 48px;
    }

    .mc-enjoy h2 {
        font-size: 23px;
        line-height: 35px;
        color: #000;
        text-align: center;
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-weight: var(--text-M-H3--weight, 600);
        letter-spacing: var(--text-M-H3--letter-spacing, 0);
    }

    .mc-enjoy__body {
        margin-top: 32px;
    }

    .mc-enjoy__copy strong {
        font-size: 19px;
        line-height: 26px;
        font-weight: var(--text-M-H4--weight, 600);
    }

    .mc-enjoy__copy p {
        font-size: 13px;
        line-height: 21px;
    }

    .mc-events {
        padding: 0 0 48px;
    }

    .mc-events h2 {
        font-size: 27px;
        line-height: 41px;
        color: #2f2f2f;
        margin-bottom: 35px;
    }

    .mc-event__title {
        font-size: 19px;
        line-height: 26px;
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Display, Pretendard);
        font-weight: var(--text-M-H4--weight, 600);
        line-height: var(--text-M-H4--line-height, 26px);
        letter-spacing: var(--text-M-H4--letter-spacing, 0);
    }

    .mc-faq-wrap {
        padding: 0 0 48px;
    }

    .mc-faq-wrap h2 {
        font-size: 27px;
        line-height: 41px;
        color: #2f2f2f;
        margin-bottom: 16px;
    }

    .mc-faq__divider {
        margin-bottom: 32px;
    }

    .mc-faq__item {
        /* border-bottom: 0; */
        padding-bottom: 16px;
    }

    .mc-faq__item+.mc-faq__item {
        margin-top: 24px;
        padding-bottom: 16px;
    }

    .mc-faq__q {
        font-size: 15px;
        line-height: 24px;
        color: #2f2f2f;
        padding: 0;
    }

    .mc-faq__q span {
        width: 24px;
        height: 24px;
        border: 0;
        background: url('/theme/basic/pages/images/member-center/icon-chevron-right.svg') center / 18px 18px no-repeat;
        transform: rotate(90deg);
    }

    .mc-faq__item.is-open .mc-faq__q span {
        transform: rotate(-90deg);
    }

    .mc-faq__a {
        padding: 16px 24px 0;
        font-size: 13px;
        line-height: 21px;
    }

    .mc-note {
        margin-top: 32px;
        padding: 0;
    }

    .member-center-page.is-info-popover-open .mc-info-backdrop {
        display: block;
    }

    .mc-status {
        padding: 48px 0;
    }

    .mc-status .mc-container {
        padding-left: 16px;
        /* padding-right: 0; */
    }

    .mc-container {
        width: 100%;
        max-width: 100%;
    }

    .mc-perks__indicator {
        visibility: hidden;
    }

    .mc-status__card {
        min-height: 0;
        border-radius: 0;
        background: none;
        background-image: none;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .mc-status__body {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .mc-status__card,
    .mc-status__body {
        min-width: 0;
        max-width: 100%;
    }

    .mc-status__head-card {
        position: relative;
        isolation: isolate;
        min-height: 190px;
        padding: 35px 28px 23px;
        border-radius: 6px;
        padding-right: 16px;
        background-image: var(--mc-status-bg-mo);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: 0;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }

    /* Figma 677:3354 — tier logo 112×135, right 22px / top 0 on 361px card */
    .mc-status__badge {
        display: block;
        position: absolute;
        top: -16px;
        right: 22px;
        z-index: 2;
        width: 112px;
        max-width: 31.02%;
        height: auto;
        aspect-ratio: 112 / 135;
        object-fit: contain;
        object-position: center top;
        pointer-events: none;
        user-select: none;
    }

    .mc-status__head-card .mc-status__user {
        padding-right: 37%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mc-status__meta-wrap {
        padding-right: 0;
    }

    .mc-status__head-card-bg {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: inherit;
        object-fit: cover;
        object-position: center;
        pointer-events: none;
        user-select: none;
    }

    .mc-status__head-card>.mc-status__top,
    .mc-status__head-card>.mc-status__progress--mo {
        position: relative;
        z-index: 1;
    }

    .mc-status__head-card>.mc-status__badge {
        z-index: 2;
    }

    .mc-status__top {
        display: block;
    }

    .mc-status__actions {
        display: none;
    }

    .mc-status__tier {
        display: block;
        margin: 0 0 12px;
        font-size: 27px;
        line-height: 35px;
        letter-spacing: 0;
        text-shadow: 0 1.52px 2px rgba(94, 101, 108, .4);
    }

    .mc-status__card.is-l0 .mc-status__tier {
        color: #3e5172;
    }

    .mc-status__card.is-l1 .mc-status__tier {
        color: #304786;
    }

    .mc-status__card.is-l2 .mc-status__tier {
        color: #805401;
    }

    .mc-status__card.is-l3 .mc-status__tier {
        color: #d06d33;
        background-image: linear-gradient(90deg, #d06d33, #c46a31);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .mc-status__card.is-l2 .mc-status__head-card .mc-status__name,
    .mc-status__card.is-l3 .mc-status__head-card .mc-status__name,
    .mc-status__card.is-l4 .mc-status__head-card .mc-status__name {
        font-size: 17px;
        line-height: 27px;
        letter-spacing: 0.16px;
    }

    .mc-status__card.is-l2 .mc-status__head-card .mc-status__email,
    .mc-status__card.is-l3 .mc-status__head-card .mc-status__email,
    .mc-status__card.is-l4 .mc-status__head-card .mc-status__email {
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 0;
    }

    .mc-status__name {
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: 17px;
        font-weight: 400;
        line-height: 27px;
        letter-spacing: -0.68px;
    }

    .mc-status__email {
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        color: #666;
    }

    .mc-status__email-label {
        display: none;
    }

    .mc-status__card.is-l4 .mc-status__name {
        color: #fff;
    }

    .mc-status__card.is-l4 .mc-status__email {
        color: #c6c6c6;
    }

    .mc-status__card.is-l4 .mc-status__tier {
        color: #e3c987;
        text-shadow: 0 1.52px 2px rgba(0, 0, 0, .35);
    }

    .mc-status__progress--pc {
        display: none;
    }

    .mc-status__progress--mo {
        display: block;
        margin-top: 12px;
    }

    .mc-status__progress--mo .mc-status__progress-text {
        margin: 0 0 5px;
        font-size: 11px;
        line-height: 18px;
        text-align: left;
        font-weight: 400;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    .mc-status__card.is-l0 .mc-status__progress--mo .mc-status__progress-muted,
    .mc-status__card.is-l0 .mc-status__progress--mo .mc-status__progress-em,
    .mc-status__card.is-l0 .mc-status__progress--mo .mc-status__progress-text {
        color: #3e5172;
        letter-spacing: 0;
        font-weight: 400;
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-utility-size, 11px);
        line-height: var(--text-utility-line-height, 18px);
    }

    .mc-status__card.is-l1 .mc-status__progress--mo .mc-status__progress-muted,
    .mc-status__card.is-l1 .mc-status__progress--mo .mc-status__progress-em,
    .mc-status__card.is-l1 .mc-status__progress--mo .mc-status__progress-text {
        color: #304786;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 0;
        font-weight: 400;
        font-family: var(--Shokz-Sans-Text, Pretendard);
    }

    .mc-status__card.is-l2 .mc-status__progress--mo .mc-status__progress-muted,
    .mc-status__card.is-l2 .mc-status__progress--mo .mc-status__progress-em,
    .mc-status__card.is-l2 .mc-status__progress--mo .mc-status__progress-text {
        color: #805401;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 0;
        font-weight: 400;
    }

    .mc-status__card.is-l3 .mc-status__progress--mo .mc-status__progress-muted,
    .mc-status__card.is-l3 .mc-status__progress--mo .mc-status__progress-em,
    .mc-status__card.is-l3 .mc-status__progress--mo .mc-status__progress-text {
        color: #884a27;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 0;
        font-weight: 400;
    }

    .mc-status__card.is-l4 .mc-status__progress--mo .mc-status__progress-muted,
    .mc-status__card.is-l4 .mc-status__progress--mo .mc-status__progress-em,
    .mc-status__card.is-l4 .mc-status__progress--mo .mc-status__progress-text {
        color: #ded1b2;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 0;
        font-weight: 400;
    }

    .mc-status__name {
        color: var(--font-icon-primary, #050505);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 17px);
        font-style: normal;
        font-weight: var(--text-body-weight, 400);
        line-height: var(--text-body-line-height, 27px);
        letter-spacing: var(--text-body-letter-spacing, -0.68px);
    }

    .mc-status__progress--mo .mc-status__bar {
        max-width: 222px;
        height: 5px;
        background: rgba(255, 255, 255, .5);
        box-shadow: 0 0 0 1px rgba(232, 232, 232, .2);
    }

    .mc-status__card.is-l4 .mc-status__progress--mo .mc-status__bar {
        background: rgba(255, 249, 230, .8);
        box-shadow: none;
    }

    .mc-status__meta {
        margin-top: 0;
        gap: initial;
        display: flex;
        justify-content: space-between;
        min-width: 0;
        max-width: 100%;
    }

    .mc-status__meta-item {
        text-align: center;
        min-width: 0;
        /* flex: 1; */
    }

    .mc-status__meta-item dt {
        color: var(--font-icon-quaternary, #8D8D8D);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-utility-size, 13px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 21px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }

    .mc-status__meta-item dd {
        font-size: 17px;
        line-height: 23px;
        letter-spacing: 0;
        font-weight: var(--text-M-H5--weight, 500);
    }

    .mc-status__mobile-actions {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 8px;
        margin-top: 0;
        min-width: 0;
        max-width: 100%;
    }

    .mc-status__mobile-actions .mc-btn {
        width: auto;
        min-width: 0;
        min-height: 32px;
        padding: 0 12px;
        font-size: 15px;
        white-space: nowrap;
    }

    .mc-status__mobile-actions .mc-btn.js-mc-open-order-modal {
        color: var(--font-icon-white, #FFF);
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-utility-size, 13px);
        font-style: normal;
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 21px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }

    .mc-status__mobile-actions .mc-btn--outline-dark {
        flex: 1;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 13px;
        white-space: normal;
        text-align: center;
        color: var(--font-icon-primary, #050505);
        font-weight: var(--text-utility-weight, 400);
        line-height: var(--text-utility-line-height, 21px);
        letter-spacing: var(--text-utility-letter-spacing, 0);
    }

    .mc-status__mobile-actions .js-mc-scroll-benefits {
        display: none;
    }

    /* Order history modal mobile (Figma 631:5046) */
    .mc-order-modal {
        padding: 16px;
        align-items: flex-start;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
    }

    .mc-order-modal__dialog {
        max-width: 100%;
        max-height: calc(100vh - 32px);
        border-radius: 6px;
        top: 50%;
        transform: translateY(-50%);
    }

    .mc-order-modal__rows {
        gap: 12px;
        overflow-y: auto;
        max-height: 198px;
    }

    .mc-order-modal__head {
        padding: 16px 12px 16px 16px;
    }

    .mc-order-modal__title {
        font-size: 19px;
        line-height: 29px;
        letter-spacing: -0.76px;
    }

    .mc-order-modal__body {
        padding: 0 16px;
    }

    .mc-order-modal__content {
        max-width: none;
        gap: 12px;
    }

    .mc-order-modal__table {
        min-width: 0;
        gap: 12px;
    }

    .mc-order-modal__thead {
        display: none;
    }

    .mc-order-modal__row--card {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        border: 1px solid #e7e7e7;
        border-radius: 6px;
        min-height: 93px;
        white-space: normal;
        margin-bottom: 12px;
    }

    .mc-order-modal__card-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
    }

    .mc-order-modal__reason {
        margin: 0;
        font-weight: 400;
        line-height: 27px;
        color: #050505;
        font-family: var(--Shokz-Sans-Text, Pretendard);
        font-size: var(--text-body-size, 17px);
        font-style: normal;
        letter-spacing: var(--text-body-letter-spacing, -0.68px);
    }

    .mc-order-modal__meta {
        margin: 0;
        min-width: 0;
        font-size: 13px;
        line-height: 21px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mc-order-modal__meta-sep {
        margin: 0 4px;
    }

    .mc-order-modal__card-side {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        align-self: stretch;
    }

    .mc-order-modal__card-side.is-pos {
        color: #198038;
    }

    .mc-order-modal__card-side.is-neg {
        color: #da1e28;
    }

    .mc-order-modal__amount-block {
        text-align: right;
        flex-shrink: 0;
    }

    .mc-order-modal__amount-val {
        margin: 0;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: -0.6px;
    }

    .br-m {
        display: block;
    }

    .mc-order-modal__amount-label {
        margin: 0;
        font-size: 12px;
        line-height: 18px;
        color: #666;
        text-align: center;
    }

    .mc-order-modal__ear {
        margin: 0;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: -0.6px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mc-order-modal__loading,
    .mc-order-modal__loading-more,
    .mc-order-modal__empty-msg {
        padding: 24px 16px;
        font-size: 13px;
    }

    .mc-order-modal__pager {
        display: none !important;
    }

    /* Tier compare modal mobile (Figma 577:10057) */
    .mc-tier-modal {
        padding: 16px;
        align-items: flex-start;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
    }

    .mc-tier-modal__dialog {
        max-width: 100%;
        max-height: calc(100vh - 32px);
        border-radius: 6px;
        top: 50%;
        transform: translateY(-50%);
    }

    .mc-tier-modal__head {
        padding: 16px 12px 16px 16px;
    }

    .mc-tier-modal__title {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0.16px;
    }

    .mc-tier-modal__body {
        padding: 0 16px 16px;
    }

    .mc-tier-modal.is-mobile .mc-tier-modal__accordion {
        padding-bottom: 8px;
    }
}

@media (max-width: 361px) {
    .member-center-page .mc-hero h1 {
        font-size: 32px;
    }
}

/*
 * G5_IS_MOBILE / ?device=mobile: viewport may be >768px on desktop preview —
 * keep mobile member-center layout (perks carousel, hero, copy) via .is-mc-mobile.
 */
.member-center-page.is-mc-mobile {
    overflow-x: hidden;
}

.member-center-page.is-mc-mobile .mc-hero {
    height: 554px;
    min-height: 554px;
}

.member-center-page.is-mc-mobile.is-member .mc-hero {
    height: 554px;
    min-height: 554px;
}

.member-center-page.is-mc-mobile .mc-hero__picture img {
    inset: 0;
    width: 100%;
    height: 554px;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: center top;
}

.member-center-page.is-mc-mobile.is-guest .mc-hero__inner {
    left: 16px;
    right: auto;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.member-center-page.is-mc-mobile .mc-tabs {
    padding: 8px 16px 0;
    border-bottom: 1px solid #f1f1f1;
}