/* ======================================================
   LiveCommerce
   - 라이브커머스 고객 화면 전용
   - 기존 site_theme_* / --site-* 토큰을 기준으로 사용
   - 실제 하단 버튼: 상품 / 내주문
   ====================================================== */

.LiveCommerce_page {
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    background: var(--site-bg, #e9e1d6);
    color: var(--site-text, #3e342d);
}

.LiveCommerce {
    --lc-accent: var(--lc-live-accent, var(--site-primary, #8a6f5b));
    --lc-accent-dark: var(--lc-live-accent-dark, var(--site-primary-dark, #5a4638));
    --lc-accent-soft: var(--lc-live-accent-soft, var(--site-primary-soft, #e7dccf));
    --lc-accent-text: #ffffff;
    --lc-soldout-bg: rgba(126, 126, 126, 0.92);
    --lc-soldout-text: #ffffff;
    --lc-bottom-safe: max(1rem, env(safe-area-inset-bottom));
    --lc-bottom-bar-h: 3rem;
    --lc-buy-card-h: 5.9rem;
    --lc-gap: 0.7rem;
    --lc-chat-bottom: calc(var(--lc-bottom-safe) + var(--lc-bottom-bar-h) + 0.85rem);
    --lc-answer-bottom: calc(var(--lc-bottom-safe) + var(--lc-bottom-bar-h) + 0.55rem);
    --lc-radius-sm: 0.75rem;
    --lc-radius-md: 0.95rem;
    --lc-radius-lg: 1.25rem;
    --lc-glass-dark: rgba(0, 0, 0, 0.48);
    --lc-glass-deep: rgba(0, 0, 0, 0.68);
    --lc-line-light: rgba(255, 255, 255, 0.16);
    --lc-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.28);
    --lc-control-bg: var(--lc-accent);
    --lc-control-bg-hover: color-mix(in srgb, var(--lc-accent) 88%, #000000 12%);
    --lc-control-border: color-mix(in srgb, var(--lc-accent) 68%, rgba(255, 255, 255, 0.22));
    --lc-control-ripple: rgba(255, 255, 255, 0.28);
    width: 100%;
    max-width: 600px;
    min-height: 100dvh;
    margin: 0 auto;
    background: #111;
}

    .LiveCommerce.has-product-card {
        --lc-chat-bottom: calc(var(--lc-bottom-safe) + var(--lc-bottom-bar-h) + var(--lc-buy-card-h) + 1.45rem);
        --lc-answer-bottom: calc(var(--lc-bottom-safe) + var(--lc-bottom-bar-h) + var(--lc-buy-card-h) + 1.15rem);
    }


/* ======================================================
   Common Interactive Buttons
   - 패널/구매/쿠폰창 내부 버튼의 클릭 피드백 통합
   - 쿠폰 티켓 버튼(.LiveCommerce_couponEntry)은 고유 디자인 유지
   ====================================================== */

.LiveCommerce_buyBtn,
.LiveCommerce_panelBuyBtn,
.LiveCommerce_productItemBtn,
.LiveCommerce_commentSend,
.LiveCommerce_actionBtn,
.LiveCommerce_iconBtn,
.LiveCommerce_productOnlyRestore,
.LiveCommerce_modeBtn,
.LiveCommerce_optionItem,
.LiveCommerce_quantityStepper button,
.LiveCommerce_infoBtn,
.LiveCommerce_infoClose,
.LiveCommerce_panelClose,
.LiveCommerce_noticeToggle,
.LiveCommerce_noticeClose,
.LiveCommerce_couponItem button,
.LiveCommerce_couponAllBtn,
.LiveCommerce_couponClose {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

    .LiveCommerce_buyBtn::after,
    .LiveCommerce_panelBuyBtn::after,
    .LiveCommerce_productItemBtn::after,
    .LiveCommerce_commentSend::after,
    .LiveCommerce_actionBtn::after,
    .LiveCommerce_iconBtn::after,
    .LiveCommerce_productOnlyRestore::after,
    .LiveCommerce_modeBtn::after,
    .LiveCommerce_optionItem::after,
    .LiveCommerce_quantityStepper button::after,
    .LiveCommerce_infoBtn::after,
    .LiveCommerce_infoClose::after,
    .LiveCommerce_panelClose::after,
    .LiveCommerce_noticeToggle::after,
    .LiveCommerce_noticeClose::after,
    .LiveCommerce_couponItem button::after,
    .LiveCommerce_couponAllBtn::after,
    .LiveCommerce_couponClose::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        border-radius: 999px;
        background: var(--lc-control-ripple);
        opacity: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .LiveCommerce_buyBtn:not(:disabled):active,
    .LiveCommerce_panelBuyBtn:not(:disabled):active,
    .LiveCommerce_productItemBtn:not(:disabled):active,
    .LiveCommerce_commentSend:not(:disabled):active,
    .LiveCommerce_actionBtn:not(:disabled):active,
    .LiveCommerce_iconBtn:not(:disabled):active,
    .LiveCommerce_productOnlyRestore:not(:disabled):active,
    .LiveCommerce_modeBtn:not(:disabled):active,
    .LiveCommerce_optionItem:not(:disabled):active,
    .LiveCommerce_quantityStepper button:not(:disabled):active,
    .LiveCommerce_infoBtn:not(:disabled):active,
    .LiveCommerce_infoClose:not(:disabled):active,
    .LiveCommerce_panelClose:not(:disabled):active,
    .LiveCommerce_noticeToggle:not(:disabled):active,
    .LiveCommerce_noticeClose:not(:disabled):active,
    .LiveCommerce_couponItem button:not(:disabled):active,
    .LiveCommerce_couponAllBtn:not(:disabled):active,
    .LiveCommerce_couponClose:not(:disabled):active {
        transform: translateY(1px) scale(0.985);
    }

        .LiveCommerce_buyBtn:not(:disabled):active::after,
        .LiveCommerce_panelBuyBtn:not(:disabled):active::after,
        .LiveCommerce_productItemBtn:not(:disabled):active::after,
        .LiveCommerce_commentSend:not(:disabled):active::after,
        .LiveCommerce_actionBtn:not(:disabled):active::after,
        .LiveCommerce_iconBtn:not(:disabled):active::after,
        .LiveCommerce_productOnlyRestore:not(:disabled):active::after,
        .LiveCommerce_modeBtn:not(:disabled):active::after,
        .LiveCommerce_optionItem:not(:disabled):active::after,
        .LiveCommerce_quantityStepper button:not(:disabled):active::after,
        .LiveCommerce_infoBtn:not(:disabled):active::after,
        .LiveCommerce_infoClose:not(:disabled):active::after,
        .LiveCommerce_panelClose:not(:disabled):active::after,
        .LiveCommerce_noticeToggle:not(:disabled):active::after,
        .LiveCommerce_noticeClose:not(:disabled):active::after,
        .LiveCommerce_couponItem button:not(:disabled):active::after,
        .LiveCommerce_couponAllBtn:not(:disabled):active::after,
        .LiveCommerce_couponClose:not(:disabled):active::after {
            width: 180%;
            height: 180%;
            opacity: 1;
            transition: width 220ms ease, height 220ms ease, opacity 320ms ease;
        }

    .LiveCommerce_buyBtn:focus-visible,
    .LiveCommerce_panelBuyBtn:focus-visible,
    .LiveCommerce_productItemBtn:focus-visible,
    .LiveCommerce_commentSend:focus-visible,
    .LiveCommerce_actionBtn:focus-visible,
    .LiveCommerce_iconBtn:focus-visible,
    .LiveCommerce_productOnlyRestore:focus-visible,
    .LiveCommerce_modeBtn:focus-visible,
    .LiveCommerce_optionItem:focus-visible,
    .LiveCommerce_quantityStepper button:focus-visible,
    .LiveCommerce_infoBtn:focus-visible,
    .LiveCommerce_infoClose:focus-visible,
    .LiveCommerce_panelClose:focus-visible,
    .LiveCommerce_noticeToggle:focus-visible,
    .LiveCommerce_noticeClose:focus-visible,
    .LiveCommerce_couponItem button:focus-visible,
    .LiveCommerce_couponAllBtn:focus-visible,
    .LiveCommerce_couponClose:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--lc-accent) 48%, #ffffff);
        outline-offset: 2px;
    }

.LiveCommerce_view {
    position: relative;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #111;
    isolation: isolate;
}

/* ======================================================
   Video
   - 실제 라이브/리플레이 영상 레이어
   ====================================================== */

.LiveCommerce_video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #111;
}

.LiveCommerce_videoPlayer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
}

.LiveCommerce_videoShade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, transparent 22%, transparent 58%, rgba(0, 0, 0, 0.58) 100%), radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--lc-accent) 18%, transparent), transparent 28%);
}

.LiveCommerce_playerNoticeLayer {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    pointer-events: none;
}

button.LiveCommerce_playerNoticeLayer.is-action {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.LiveCommerce_playerNoticeCard {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: min(100%, 20rem);
    min-height: 8.5rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: var(--lc-radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.28);
    color: #332c27;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.LiveCommerce_playerNoticeSpinner {
    color: var(--lc-accent-dark) !important;
}

.LiveCommerce_playerNoticeTouch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--lc-accent-dark);
}

    .LiveCommerce_playerNoticeTouch::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 48%;
        width: 1.8rem;
        height: 1.8rem;
        border: 2px solid color-mix(in srgb, var(--lc-accent) 58%, transparent);
        border-radius: 999px;
        transform: translate(-50%, -50%) scale(0.45);
        animation: LiveCommerce_playerNoticeTouchRipple 1.5s ease-out infinite;
    }

    .LiveCommerce_playerNoticeTouch .mud-icon-root {
        position: relative;
        z-index: 1;
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 2.25rem !important;
        color: inherit !important;
        animation: LiveCommerce_playerNoticeTouchPress 1.5s ease-in-out infinite;
    }

@keyframes LiveCommerce_playerNoticeTouchPress {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    38% {
        transform: translateY(0.18rem) scale(0.92);
    }

    58% {
        transform: translateY(0) scale(1);
    }
}

/* 인앱브라우저 안내는 상단 UI(40·45)와 패널(60·70·86) 위에 놓아 진입 직후 가려지지 않게 합니다. */
.LiveCommerce_playerNoticeLayer.is-guide {
    z-index: 90;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.LiveCommerce_inappGuideCard {
    gap: 0.65rem;
}

.LiveCommerce_inappGuideStep {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: #6b625b;
}

.LiveCommerce_inappGuideActions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.LiveCommerce_inappGuideBtn {
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid var(--lc-accent);
    border-radius: 0.75rem;
    color: var(--lc-accent-dark);
    background: var(--site-surface);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 950;
    cursor: pointer;
}

    .LiveCommerce_inappGuideBtn.is-primary {
        color: var(--lc-accent-text);
        background: var(--lc-accent);
    }

    .LiveCommerce_inappGuideBtn:not(:disabled):hover,
    .LiveCommerce_inappGuideBtn:not(:disabled):focus-visible {
        color: var(--lc-accent-text);
        background: var(--lc-control-bg);
    }

.LiveCommerce_inappGuideClose {
    border: 0;
    background: transparent;
    color: #8a807a;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

@keyframes LiveCommerce_playerNoticeTouchRipple {
    0%, 30% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45);
    }

    42% {
        opacity: 0.72;
    }

    78%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.25);
    }
}

button.LiveCommerce_playerNoticeLayer.is-action:focus-visible {
    outline: 0;
}

button.LiveCommerce_playerNoticeLayer.is-action:focus-visible .LiveCommerce_playerNoticeCard {
    outline: 2px solid color-mix(in srgb, var(--lc-accent) 62%, #ffffff);
    outline-offset: 3px;
}

/* ======================================================
   Top / Brand / Buttons
   - 상단 좌표, 브랜드 로고, LIVE/REPLAY, 상단 아이콘 버튼 최종 통합
   - 브랜드 로고: 텍스트 / 아이콘+텍스트 / 이미지 로고 대응
   - 이미지 경로: images/LiveLogoIcon.png, images/LiveLogoWhite.png
   ====================================================== */

.LiveCommerce {
    --lc-top-x: 1rem;
    --lc-top-y: max(0.9rem, env(safe-area-inset-top));
    --lc-top-btn-size: 2.05rem;
    --lc-ui-x: var(--lc-top-x);
    --lc-ui-top: var(--lc-top-y);
    --lc-ui-notice-top: calc(var(--lc-ui-top) + 3.68rem);
    --lc-shop-gap: 0.55rem;
}

.LiveCommerce_top {
    position: absolute;
    left: var(--lc-ui-x);
    right: var(--lc-ui-x);
    top: var(--lc-ui-top);
    z-index: 40;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 220ms ease;
    box-sizing: border-box;
}

.LiveCommerce_liveMeta,
.LiveCommerce_topActions {
    display: inline-flex;
    min-width: 0;
    pointer-events: auto;
}

.LiveCommerce_liveMeta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.26rem;
}

.LiveCommerce_topActions {
    align-items: center;
    gap: 0.34rem;
}

.LiveCommerce_brandLogo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.34rem;
    min-width: 0;
    max-width: 10.8rem;
    min-height: 1.45rem;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 0.16rem 0.55rem rgba(0, 0, 0, 0.42);
    white-space: nowrap;
}

.LiveCommerce_brandLogoText {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
}

.LiveCommerce_brandLogoIcon {
    flex: 0 0 1.42rem;
    display: block;
    width: 1.42rem;
    height: 1.42rem;
    border-radius: 0.24rem;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 0.22rem 0.6rem rgba(0, 0, 0, 0.28);
}

.LiveCommerce_liveMetaRow {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    min-width: 0;
}

.LiveCommerce_liveBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0 0.65rem;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #19c875, #0fae64);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    box-shadow: 0 0 0.95rem rgba(20, 184, 106, 0.42);
}

    .LiveCommerce_liveBadge.is-live {
        background: linear-gradient(135deg, #19c875, #0fae64);
    }

.LiveCommerce_viewer {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: var(--lc-glass-dark);
    border: 1px solid var(--lc-line-light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.72rem;
    font-weight: 700;
}

    .LiveCommerce_viewer::before {
        content: "";
        display: inline-block;
        width: 0.38rem;
        height: 0.38rem;
        margin-right: 0.36rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 0 0.45rem rgba(255, 255, 255, 0.45);
    }

.LiveCommerce_iconBtn,
.LiveCommerce_iconBtn.mud-icon-button,
.LiveCommerce_productOnlyRestore {
    width: var(--lc-top-btn-size) !important;
    min-width: var(--lc-top-btn-size) !important;
    height: var(--lc-top-btn-size) !important;
    min-height: var(--lc-top-btn-size) !important;
    padding: 0 !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    background: rgba(0, 0, 0, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 0.38rem 0.8rem rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .LiveCommerce_iconBtn .mud-icon-root,
    .LiveCommerce_iconBtn.mud-icon-button .mud-icon-root,
    .LiveCommerce_productOnlyRestore .mud-icon-root {
        width: 1.05rem !important;
        height: 1.05rem !important;
        color: inherit !important;
        font-size: 1.05rem !important;
    }

    .LiveCommerce_iconBtn:hover,
    .LiveCommerce_iconBtn:focus-visible,
    .LiveCommerce_productOnlyRestore:hover,
    .LiveCommerce_productOnlyRestore:focus-visible {
        background: rgba(0, 0, 0, 0.58) !important;
        border-color: rgba(255, 255, 255, 0.28) !important;
    }

.LiveCommerce_modeBtn,
.LiveCommerce_modeBtn.mud-icon-button {
    color: var(--lc-accent-text) !important;
    background: var(--lc-control-bg) !important;
    border-color: var(--lc-control-border) !important;
    box-shadow: 0 0.42rem 1rem color-mix(in srgb, var(--lc-accent) 24%, rgba(0, 0, 0, 0.18)) !important;
}

    .LiveCommerce_modeBtn:hover,
    .LiveCommerce_modeBtn:focus-visible {
        background: var(--lc-control-bg-hover) !important;
    }


.LiveCommerce_productOnlyRestore {
    position: absolute;
    top: var(--lc-ui-top);
    right: var(--lc-ui-x);
    z-index: 45;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

@media (max-width: 600px) {
    .LiveCommerce {
        --lc-top-x: 0.72rem;
        --lc-top-y: max(0.72rem, env(safe-area-inset-top));
        --lc-top-btn-size: 1.96rem;
        --lc-ui-notice-top: calc(var(--lc-ui-top) + 3.42rem);
        --lc-shop-gap: 0.48rem;
    }

    .LiveCommerce_topActions {
        gap: 0.28rem;
    }

    .LiveCommerce_brandLogo {
        max-width: 8.6rem;
        min-height: 1.28rem;
        gap: 0.28rem;
    }

    .LiveCommerce_brandLogoText {
        font-size: 0.78rem;
    }

    .LiveCommerce_brandLogoIcon {
        flex-basis: 1.24rem;
        width: 1.24rem;
        height: 1.24rem;
        border-radius: 0.2rem;
    }

    .LiveCommerce_liveMetaRow {
        gap: 0.3rem;
    }

    .LiveCommerce_liveBadge,
    .LiveCommerce_viewer {
        min-height: 1.38rem;
        padding: 0 0.56rem;
        font-size: 0.64rem;
    }
}

.LiveCommerce_answerHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.28rem;
    color: color-mix(in srgb, var(--lc-accent) 45%, #ffffff);
    font-size: 0.64rem;
    font-weight: 950;
}

    .LiveCommerce_answerHead .mud-icon-root {
        width: 0.9rem !important;
        height: 0.9rem !important;
        font-size: 0.9rem !important;
        color: color-mix(in srgb, var(--lc-accent) 45%, #ffffff) !important;
    }

.LiveCommerce_answerQuestion,
.LiveCommerce_answerReply {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.28;
    white-space: pre-wrap;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.LiveCommerce_answerQuestion {
    color: rgba(255, 255, 255, 0.72);
}

.LiveCommerce_answerReply {
    margin-top: 0.2rem;
    color: #ffffff;
    font-weight: 760;
}


/* ======================================================
   Chat / Manager Answers
   - 일반 채팅, 매니저 강조 채팅, 매니저 답변 카드 최종 통합
   - 하단 답변 제거, 채팅 내부 답변 + 답변 고정만 사용
   ====================================================== */

.LiveCommerce_chat {
    position: absolute;
    left: var(--lc-ui-x, 1rem);
    right: var(--lc-ui-x, 1rem);
    bottom: var(--lc-chat-bottom);
    z-index: 24;
    max-height: 31%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.45rem;
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    transition: bottom 240ms cubic-bezier(0.19, 1, 0.22, 1), opacity 180ms ease, transform 220ms ease;
}

.LiveCommerce_chatScroll {
    max-height: 11.8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-right: 0.2rem;
    pointer-events: auto;
}

.LiveCommerce_chatScroll.is-overflowing {
    mask-image: linear-gradient( to bottom, transparent 0, rgba(0, 0, 0, 0.16) 0.95rem, rgba(0, 0, 0, 1) 2.65rem, rgba(0, 0, 0, 1) 100% );
    -webkit-mask-image: linear-gradient( to bottom, transparent 0, rgba(0, 0, 0, 0.16) 0.95rem, rgba(0, 0, 0, 1) 2.65rem, rgba(0, 0, 0, 1) 100% );
}

    .LiveCommerce_chatScroll::-webkit-scrollbar {
        display: none;
    }

.LiveCommerce_chatMsg {
    width: fit-content;
    max-width: min(82%, 24rem);
    margin: 0.28rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.76rem;
    line-height: 1.28;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72), 0 0 0.5rem rgba(0, 0, 0, 0.48);
}

    .LiveCommerce_chatMsg b {
        margin-right: 0.35rem;
        color: rgba(255, 255, 255, 0.72);
        font-weight: 850;
    }

    .LiveCommerce_chatMsg span {
        color: rgba(255, 255, 255, 0.96);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .LiveCommerce_chatMsg.is-manager {
        display: block;
        color: color-mix(in srgb, var(--lc-accent) 42%, #ffffff);
        font-weight: 760;
    }

    .LiveCommerce_chatMsg.is-manager b {
        color: color-mix(in srgb, var(--lc-accent) 68%, #ffffff);
    }

    .LiveCommerce_chatMsg.is-manager span {
        color: color-mix(in srgb, var(--lc-accent) 42%, #ffffff);
    }

.LiveCommerce_pinnedChat {
    display: none;
    align-items: center;
    width: min(82%, 30rem);
    gap: 0.42rem;
    color: #ffffff;
    pointer-events: auto;
}

    .LiveCommerce_pinnedChat.is-active {
        display: flex;
    }

    .LiveCommerce_pinnedChat > .mud-icon-root {
        flex: 0 0 auto;
        color: #D97706;
    }

.LiveCommerce_pinnedChatText {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    gap: 0.42rem;
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72), 0 0 0.5rem rgba(0, 0, 0, 0.48);
}

    .LiveCommerce_pinnedChatText b {
        flex: 0 1 auto;
        max-width: 35%;
        overflow: hidden;
        color: #D97706;
        font-weight: 850;
        text-overflow: ellipsis;
    }

    .LiveCommerce_pinnedChatText span {
        min-width: 0;
        overflow: hidden;
        color: #FFF4E6;
        text-overflow: ellipsis;
    }

.LiveCommerce_answerCard {
    width: min(62%, 21rem);
    max-width: 62%;
    border-left: 3px solid var(--lc-accent);
    border-radius: 0.92rem;
    background: rgba(0, 0, 0, 0.62);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0.8rem 1.4rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .LiveCommerce_answerCard.is-inline {
        margin: 0.45rem 0;
        padding: 0.62rem 0.68rem;
    }

    .LiveCommerce_answerCard.is-inline,
    .LiveCommerce_pinnedAnswer.is-visible,
    .LiveCommerce_pinnedAnswer.is-active {
        background: linear-gradient( 135deg, color-mix(in srgb, var(--lc-accent-dark) 28%, transparent), color-mix(in srgb, var(--lc-accent) 18%, transparent) ), rgba(15, 15, 15, 0.38);
        border-left: 3px solid color-mix(in srgb, var(--lc-accent) 76%, #ffffff);
        border-top: 1px solid rgba(255, 255, 255, 0.26);
        border-right: 1px solid rgba(255, 255, 255, 0.17);
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.22), 0 0 0.85rem color-mix(in srgb, var(--lc-accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px) saturate(1.35);
        -webkit-backdrop-filter: blur(18px) saturate(1.35);
    }

.LiveCommerce_pinnedAnswer {
    display: none;
    position: relative;
    z-index: 2;
    width: min(50%, 20rem);
    max-width: 50%;
    padding: 0.52rem 0.62rem;
    border-radius: 0.92rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.45rem);
    pointer-events: none;
}

    .LiveCommerce_pinnedAnswer.is-visible,
    .LiveCommerce_pinnedAnswer.is-active {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        animation: LiveCommerce_pinnedSlideDown 220ms cubic-bezier(0.19, 1, 0.22, 1);
    }


    .LiveCommerce_pinnedAnswer .LiveCommerce_answerQuestion,
    .LiveCommerce_pinnedAnswer .LiveCommerce_answerReply {
        display: block;
        max-height: calc(1.28em * 2);
        overflow-y: auto;
        overflow-x: hidden;
        text-overflow: clip;
        white-space: normal;
        word-break: keep-all;
        scrollbar-width: none;
    }

        .LiveCommerce_pinnedAnswer .LiveCommerce_answerQuestion::-webkit-scrollbar,
        .LiveCommerce_pinnedAnswer .LiveCommerce_answerReply::-webkit-scrollbar {
            display: none;
        }

@keyframes LiveCommerce_pinnedSlideDown {
    from {
        opacity: 0;
        transform: translateY(-0.65rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 601px) {
    .LiveCommerce_chatMsg {
        max-width: min(92%, 29rem);
    }

    .LiveCommerce_chatScroll {
        max-height: 12.2rem;
    }
}

@media (max-width: 600px) {
    .LiveCommerce_chat {
        max-height: 30%;
    }

    .LiveCommerce_chatScroll {
        max-height: 10.8rem;
    }

    .LiveCommerce_answerCard {
        width: min(66%, 18.5rem);
        max-width: 66%;
    }

    .LiveCommerce_pinnedAnswer {
        width: min(50%, 18.5rem);
        max-width: 50%;
    }
}

/* ======================================================
   Current Product CTA
   - 하단 현재 상품 카드 / 구매 버튼 최종 통합
   - 화이트 카드, 균일 패딩, 왼쪽 포인트 라인 제거
   ====================================================== */

.LiveCommerce_buyLayer {
    position: absolute;
    left: var(--lc-ui-x, 1rem);
    right: var(--lc-ui-x, 1rem);
    bottom: calc(var(--lc-bottom-safe) + var(--lc-bottom-bar-h) + 0.7rem);
    z-index: 35;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.25rem;
    align-items: center;
    gap: 0.72rem;
    min-height: var(--lc-buy-card-h);
    padding: 0.68rem;
    border-radius: var(--lc-radius-lg);
    color: var(--site-text);
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--lc-accent) 30%, rgba(0, 0, 0, 0.13));
    box-shadow: 0 0.85rem 1.75rem rgba(0, 0, 0, 0.22), 0 0 0.85rem color-mix(in srgb, var(--lc-accent) 16%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(0.19, 1, 0.22, 1), filter 180ms ease, bottom 220ms ease;
}

    .LiveCommerce_buyLayer::before {
        content: none;
        display: none;
    }

    .LiveCommerce_buyLayer.is-hidden {
        opacity: 0;
        transform: translateY(1.4rem);
        pointer-events: none;
    }

.LiveCommerce.has-panel-open .LiveCommerce_buyLayer {
    opacity: 0.22;
    transform: translateY(0.55rem);
    pointer-events: none;
}

.LiveCommerce_productMini {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.LiveCommerce_productInfo {
    min-width: 0;
}

.LiveCommerce_productThumb,
.LiveCommerce_productItemThumb,
.LiveCommerce_orderThumb {
    display: grid;
    place-items: center;
    flex: 0 0 3.55rem;
    width: 3.55rem;
    height: 3.55rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.78rem;
    background: linear-gradient( 135deg, color-mix(in srgb, var(--lc-accent) 18%, #ffffff), color-mix(in srgb, var(--lc-accent) 52%, #ffffff) );
    color: var(--lc-accent-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 0.58rem;
    font-weight: 900;
}

.LiveCommerce_productThumb {
    flex-basis: 3.7rem;
    width: 3.7rem;
    height: 3.7rem;
    border-radius: var(--lc-radius-sm);
}

.LiveCommerce_productThumb img,
.LiveCommerce_productItemThumb img,
.LiveCommerce_orderThumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.LiveCommerce_productImageButton {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in;
}

.LiveCommerce_productImageButton:focus-visible {
    outline: 3px solid var(--lc-accent);
    outline-offset: -3px;
}

.LiveCommerce_productBadges,
.LiveCommerce_productItemBadges {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    margin-bottom: 0.25rem;
}

    .LiveCommerce_productBadges span,
    .LiveCommerce_productItemBadges span {
        display: inline-flex;
        align-items: center;
        min-height: 1.05rem;
        padding: 0 0.38rem;
        border-radius: 999px;
        background: var(--lc-live-accent-soft, var(--lc-accent-soft));
        color: var(--lc-accent-dark);
        font-size: 0.6rem;
        font-weight: 850;
        line-height: 1;
        white-space: nowrap;
    }

.LiveCommerce_productName,
.LiveCommerce_productPrice {
    margin: 0;
}

.LiveCommerce_productName {
    overflow: hidden;
    color: var(--site-text-strong);
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.24;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.LiveCommerce_productPrice {
    margin-top: 0.2rem;
    color: var(--site-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.LiveCommerce_buyBtn,
.LiveCommerce_panelBuyBtn,
.LiveCommerce_productItemBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.15rem;
    border: 0;
    border-radius: var(--lc-radius-md);
    background: var(--lc-control-bg);
    color: var(--lc-accent-text);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.03em;
    box-shadow: 0 0.62rem 1.18rem color-mix(in srgb, var(--lc-accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}


    .LiveCommerce_buyBtn.is-soldout,
    .LiveCommerce_buyLayer.is-soldout .LiveCommerce_buyBtn,
    .LiveCommerce_panelBuyBtn.is-soldout,
    .LiveCommerce_panelBuyBtn:disabled,
    .LiveCommerce_productItemBtn.is-soldout,
    .LiveCommerce_productItemBtn:disabled {
        background: var(--lc-soldout-bg);
        color: var(--lc-soldout-text);
        box-shadow: none;
        cursor: not-allowed;
        pointer-events: none;
    }

@media (max-width: 600px) {
    .LiveCommerce_buyLayer {
        grid-template-columns: minmax(0, 1fr) 6.4rem;
        min-height: 5.55rem;
        padding: 0.65rem;
    }

    .LiveCommerce_productThumb {
        flex-basis: 3.35rem;
        width: 3.35rem;
        height: 3.35rem;
    }

    .LiveCommerce_productName {
        font-size: 0.8rem;
    }

    .LiveCommerce_productPrice {
        font-size: 0.73rem;
    }

    .LiveCommerce_buyBtn {
        min-height: 2.9rem;
        font-size: 0.86rem;
    }
}


/* ======================================================
   Bottom Input / Action Buttons
   - 채팅 입력창, 전송, 채팅잠금, 상품, 내주문 버튼 최종 통합
   - 하단 도크 크기 변수와 버튼 상태를 한 곳에서 관리
   ====================================================== */

.LiveCommerce {
    --lc-bottom-control-size: 2.85rem;
    --lc-bottom-icon-size: 1rem;
    --lc-bottom-label-size: 0.52rem;
    --lc-bottom-bar-h: var(--lc-bottom-control-size);
    --lc-shop-dock-compact-w: var(--lc-bottom-control-size);
}

.LiveCommerce_commentBar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    height: auto;
    min-height: var(--lc-bottom-control-size);
    padding: 0.32rem 0.32rem 0.32rem 0.88rem;
    border-radius: calc(var(--lc-bottom-control-size) / 2);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--lc-line-light);
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .LiveCommerce_commentBar textarea {
        flex: 1 1 auto;
        min-width: 0;
        min-height: calc(var(--lc-bottom-control-size) - 0.68rem);
        max-height: 3.65rem;
        padding: 0.42rem 0;
        overflow-y: hidden;
        resize: none;
        border: 0;
        outline: 0;
        background: transparent;
        color: #ffffff;
        /* iOS Safari는 폼 컨트롤 글자가 16px 미만이면 포커스 시 화면을 자동 확대하고 키보드를 내려도 되돌리지 않으므로 1rem 미만으로 낮추지 않는다. */
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.35;
        box-sizing: border-box;
    }

        .LiveCommerce_commentBar textarea::placeholder {
            color: rgba(255, 255, 255, 0.58);
        }

.LiveCommerce_chatConnectionText {
    flex: 1 1 auto;
    align-self: center;
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .LiveCommerce_commentBar.is-locked {
        opacity: 0.72;
    }

.LiveCommerce_commentSend {
    flex: 0 0 calc(var(--lc-bottom-control-size) - 0.68rem);
    display: inline-grid;
    place-items: center;
    width: calc(var(--lc-bottom-control-size) - 0.68rem);
    min-width: calc(var(--lc-bottom-control-size) - 0.68rem);
    height: calc(var(--lc-bottom-control-size) - 0.68rem);
    min-height: calc(var(--lc-bottom-control-size) - 0.68rem);
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--lc-control-bg);
    color: var(--lc-accent-text);
    box-shadow: 0 0.52rem 1rem color-mix(in srgb, var(--lc-accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

    .LiveCommerce_commentSend:disabled {
        background: rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.42);
        box-shadow: none;
    }

    .LiveCommerce_commentSend .mud-icon-root {
        color: inherit !important;
    }

    /* 연결 동작 버튼은 원형 전송버튼과 달리 사각형이라 입력 바의 둥근 테두리에서 조금 더 띄운다. */
    .LiveCommerce_commentSend.is-connection-action {
        flex: 0 0 auto;
        display: inline-flex;
        width: auto;
        min-width: auto;
        margin-right: 0.5rem;
        padding: 0 0.52rem;
        border-radius: 0.5rem;
        gap: 0.22rem;
    }

        .LiveCommerce_commentSend.is-connection-action span {
            color: inherit;
            font-size: 0.62rem;
            font-weight: 800;
            white-space: nowrap;
        }

.LiveCommerce_actionBtn,
.LiveCommerce_actionBtn.mud-button-root {
    flex: 0 0 var(--lc-bottom-control-size) !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    width: var(--lc-bottom-control-size) !important;
    min-width: var(--lc-bottom-control-size) !important;
    max-width: var(--lc-bottom-control-size) !important;
    height: var(--lc-bottom-control-size) !important;
    min-height: var(--lc-bottom-control-size) !important;
    max-height: var(--lc-bottom-control-size) !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--lc-line-light);
    border-radius: 50% !important;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .LiveCommerce_actionBtn .mud-icon-root {
        width: var(--lc-bottom-icon-size) !important;
        min-width: var(--lc-bottom-icon-size) !important;
        height: var(--lc-bottom-icon-size) !important;
        min-height: var(--lc-bottom-icon-size) !important;
        color: inherit !important;
        font-size: var(--lc-bottom-icon-size) !important;
        line-height: 1 !important;
    }

    .LiveCommerce_actionBtn span {
        display: block;
        max-width: 100%;
        color: inherit;
        font-size: var(--lc-bottom-label-size) !important;
        font-weight: 850;
        line-height: 1 !important;
        letter-spacing: -0.055em;
        white-space: nowrap;
    }

    .LiveCommerce_actionBtn.is-active,
    .LiveCommerce_actionBtn.is-chat-lock.is-active {
        border-color: color-mix(in srgb, var(--lc-accent) 56%, rgba(255, 255, 255, 0.22));
        background: color-mix(in srgb, var(--lc-accent) 58%, rgba(0, 0, 0, 0.48));
        color: var(--lc-accent-text);
    }

    .LiveCommerce_actionBtn.is-product,
    .LiveCommerce_actionBtn.is-product.mud-button-root {
        border-color: var(--lc-control-border);
        background: var(--lc-control-bg);
        color: var(--lc-accent-text);
        box-shadow: 0 0.42rem 1rem color-mix(in srgb, var(--lc-accent) 24%, rgba(0, 0, 0, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }

        .LiveCommerce_actionBtn.is-product:hover,
        .LiveCommerce_actionBtn.is-product:focus-visible {
            border-color: color-mix(in srgb, var(--lc-accent) 78%, rgba(255, 255, 255, 0.24));
            background: var(--lc-control-bg-hover);
        }



@media (max-width: 600px) {
    .LiveCommerce {
        --lc-bottom-control-size: 2.68rem;
        --lc-bottom-icon-size: 0.96rem;
        --lc-bottom-label-size: 0.48rem;
    }

    .LiveCommerce_commentBar {
        padding-left: 0.78rem;
    }

    .LiveCommerce_commentSend {
        flex-basis: calc(var(--lc-bottom-control-size) - 0.62rem);
        width: calc(var(--lc-bottom-control-size) - 0.62rem);
        min-width: calc(var(--lc-bottom-control-size) - 0.62rem);
        height: calc(var(--lc-bottom-control-size) - 0.62rem);
        min-height: calc(var(--lc-bottom-control-size) - 0.62rem);
    }
}

/* ======================================================
   Panels
   ====================================================== */

.LiveCommerce_dim {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.44);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

    .LiveCommerce_dim.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

.LiveCommerce_optionPanel,
.LiveCommerce_productSheet,
.LiveCommerce_orderSheet {
    position: absolute;
    left: 0;
    right: 0;
    /* overflow 스크롤이 만드는 둥근 클립 경계가 모바일 소수점 배율에서 뒤의 어두운 래퍼를 비치게 하므로
       경계를 화면 밖으로 2px 내려 감춘다. 넘친 부분은 래퍼의 overflow: hidden이 깔끔하게 자른다. */
    bottom: -2px;
    z-index: 70;
    width: 100%;
    max-width: 100%;
    max-height: 78%;
    overflow-y: auto;
    padding: 0.65rem 1rem calc(var(--lc-bottom-safe) + 0.9rem);
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--site-surface);
    color: var(--site-text);
    box-shadow: 0 -1rem 2.6rem rgba(0, 0, 0, 0.26);
    box-sizing: border-box;
    touch-action: pan-y;
    pointer-events: none;
    transform: translateY(105%);
    transition: transform 260ms cubic-bezier(0.19, 1, 0.22, 1), opacity 180ms ease;
}

    .LiveCommerce_optionPanel.is-open,
    .LiveCommerce_productSheet.is-open,
    .LiveCommerce_orderSheet.is-open {
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
    }

    .LiveCommerce_optionPanel.is-dragging,
    .LiveCommerce_productSheet.is-dragging,
    .LiveCommerce_orderSheet.is-dragging {
        transition: none;
    }

.LiveCommerce_panelHandle {
    appearance: none;
    display: block;
    position: relative;
    width: 3.25rem;
    height: 1.05rem;
    min-height: 1.05rem;
    margin: -0.22rem auto 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: grab;
    touch-action: none;
}

    .LiveCommerce_panelHandle::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2.8rem;
        height: 0.28rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--site-text-muted) 30%, transparent);
        transform: translate(-50%, -50%);
    }

    .LiveCommerce_panelHandle:active {
        cursor: grabbing;
    }

/* 패널 손잡이·제목·설명과 상품목록 검색줄은 목록을 내려도 상단에 남는다.
   sticky 오프셋은 스크롤 영역의 안쪽 여백을 기준으로 계산되므로 패널 위쪽 여백만큼 끌어올려 맞춘다. */
.LiveCommerce_panelSticky {
    position: sticky;
    top: -0.65rem;
    z-index: 3;
    margin: -0.65rem -1rem 0.75rem;
    padding: 0.65rem 1rem 0.5rem;
    background: var(--site-surface);
}

    .LiveCommerce_panelSticky::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0;
        height: 1px;
        background: color-mix(in srgb, var(--site-border) 70%, transparent);
    }


.LiveCommerce_panelHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    touch-action: none;
}

.LiveCommerce_panelSticky .LiveCommerce_panelHead {
    margin-bottom: 0.6rem;
}

.LiveCommerce_panelSticky .LiveCommerce_panelHead:last-child {
    margin-bottom: 0;
}

.LiveCommerce_panelSticky .LiveCommerce_productSearch {
    margin-bottom: 0;
}

.LiveCommerce_panelTitle,
.LiveCommerce_panelDesc,
.LiveCommerce_optionLabel,
.LiveCommerce_sheetTitle {
    margin: 0;
}

.LiveCommerce_panelTitle {
    font-size: 1rem;
    font-weight: 950;
    color: var(--site-text-strong);
}

.LiveCommerce_panelDesc {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--site-text-muted);
}

.LiveCommerce_panelClose,
.LiveCommerce_panelClose.mud-icon-button {
    color: var(--site-text-muted) !important;
}

.LiveCommerce_sheetSection + .LiveCommerce_sheetSection {
    margin-top: 1.1rem;
}

.LiveCommerce_productItem.is-current + .LiveCommerce_productList {
    margin-top: 0.75rem;
}

.LiveCommerce_productItem.is-current[hidden] + .LiveCommerce_productList {
    margin-top: 0;
}

.LiveCommerce_sheetTitle {
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    font-weight: 950;
    color: var(--site-text-strong);
}


/* ======================================================
   Panel Product / Order Lists
   - 상품 패널 상품 리스트 / 내 주문 리스트 최종 통합
   - 오늘 소개한 상품은 3개까지 보이고 이후 내부 스크롤
   ====================================================== */

/* 현재 판매 상품 카드와 함께 패널 하나의 스크롤로 움직이도록 목록 자체 스크롤은 두지 않는다. */
.LiveCommerce_productList {
    display: flex;
    flex-direction: column;
    gap: 0.52rem;
}

.LiveCommerce_productList.has-scroll-end-space {
    padding-bottom: 0.7rem;
}

.LiveCommerce_productSearch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.38rem;
    margin-bottom: 0.55rem;
}

    .LiveCommerce_productSearch input {
        min-width: 0;
        height: 2.15rem;
        padding: 0 0.7rem;
        border: 1px solid var(--site-border);
        border-radius: 0.62rem;
        background: var(--site-surface);
        color: var(--site-text-strong);
        /* input은 본문 글자를 상속하지 않아 브라우저 기본값이 16px 미만이므로 iOS 자동 확대를 막기 위해 명시한다. */
        font-size: 1rem;
    }

    .LiveCommerce_productSearch button,
    .LiveCommerce_productPaging button {
        min-height: 2.15rem;
        padding: 0 0.62rem;
        border: 1px solid var(--site-border);
        border-radius: 0.62rem;
        background: var(--site-surface-soft);
        color: var(--site-text-strong);
        font-size: 0.7rem;
        font-weight: 850;
    }

.LiveCommerce_productPaging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.62rem;
}

    .LiveCommerce_productPaging span,
    .LiveCommerce_orderNumber,
    .LiveCommerce_panelEmpty {
        color: var(--site-text-muted);
        font-size: 0.72rem;
        font-weight: 750;
    }

.LiveCommerce_panelEmpty {
    margin: 0.7rem 0;
    text-align: center;
}

    .LiveCommerce_productList::-webkit-scrollbar {
        display: none;
    }

.LiveCommerce_productItem {
    display: grid;
    grid-template-columns: 3.55rem minmax(0, 1fr) 3rem;
    align-items: center;
    gap: 0.55rem;
    min-height: 4.55rem;
    padding: 0.55rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--site-border);
    background: var(--site-surface-soft);
}

    .LiveCommerce_productItem.is-current {
        border-color: color-mix(in srgb, var(--lc-accent) 44%, var(--site-border));
        background: color-mix(in srgb, var(--lc-accent) 9%, var(--site-surface));
    }

    .LiveCommerce_productItem.is-soldout {
        opacity: 0.64;
    }

    .LiveCommerce_productItem:not(.is-current) .LiveCommerce_productItemBadges {
        display: none;
    }

.LiveCommerce_productItemInfo {
    min-width: 0;
}

    .LiveCommerce_productItemInfo p,
    .LiveCommerce_productItemInfo strong,
    .LiveCommerce_productTime {
        display: block;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .LiveCommerce_productItemInfo p {
        color: var(--site-text-strong);
        font-size: 0.78rem;
        font-weight: 850;
    }

    .LiveCommerce_productItemInfo strong {
        margin-top: 0.22rem;
        color: var(--site-text-muted);
        font-size: 0.7rem;
        font-weight: 800;
    }

    /* 옵션있음은 가격줄 끝에 붙는 보조표시이므로 가격과 색을 나누고 금액 숫자와 붙어 읽히지 않게 띄운다. */
    .LiveCommerce_productItemInfo strong .LiveCommerce_optionMark {
        margin-left: 0.32rem;
        color: var(--lc-accent-dark);
        font-size: 0.66rem;
        font-weight: 900;
        white-space: nowrap;
    }

    /* 한 줄 말줄임은 뒤쪽의 옵션있음부터 잘라내므로, 표시가 붙은 가격줄만 금액과 표시 사이 줄바꿈을 허용한다. */
    .LiveCommerce_productItemInfo strong.has-option-mark {
        white-space: normal;
    }

        .LiveCommerce_productItemInfo strong.has-option-mark .LiveCommerce_priceText {
            white-space: nowrap;
        }

.LiveCommerce_productTime {
    margin-top: 0.16rem;
    color: rgba(17, 17, 17, 0.48);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.LiveCommerce_productItemBtn {
    min-height: 1.75rem;
    height: 1.75rem;
    padding: 0 0.42rem;
    border-radius: 0.58rem;
    font-size: 0.68rem;
    font-weight: 900;
}

.LiveCommerce_orderList {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 0;
    border-bottom: 1px solid var(--site-border);
}

.LiveCommerce_orderNumber {
    margin: 0 0 0.35rem;
    user-select: all;
}

.LiveCommerce_orderCoupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--lc-accent) 18%, var(--site-border));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--lc-accent) 7%, var(--site-surface));
    color: var(--site-text-strong);
    font-size: 0.78rem;
    font-weight: 850;
}

.LiveCommerce_orderCoupon strong {
    color: var(--lc-accent-dark);
    font-size: 0.9rem;
    font-weight: 950;
}

.LiveCommerce_orderItem {
    display: grid;
    grid-template-columns: 3.65rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.2rem 0.65rem;
    padding: 0.75rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    .LiveCommerce_orderItem + .LiveCommerce_orderItem {
        border-top: 1px solid var(--site-border);
    }

.LiveCommerce_orderThumb {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.LiveCommerce_orderName {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    color: var(--site-text-strong);
    font-size: 0.84rem;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.LiveCommerce_orderOption {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    color: var(--site-text-muted);
    font-size: 0.74rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.LiveCommerce_orderPrice {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    color: var(--site-text-strong);
    font-size: 0.82rem;
    font-weight: 950;
    white-space: nowrap;
    text-align: right;
}

.LiveCommerce_orderActions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.28rem;
}

.LiveCommerce_orderAdjustBtn,
.LiveCommerce_orderCancelBtn {
    min-height: 1.65rem;
    padding: 0 0.55rem;
    border: 1px solid color-mix(in srgb, var(--lc-accent) 32%, var(--site-border));
    border-radius: 999px;
    color: var(--lc-accent-dark);
    background: var(--site-surface);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 900;
    cursor: pointer;
}

.LiveCommerce_orderAdjustBtn:disabled,
.LiveCommerce_orderCancelBtn:disabled,
.LiveCommerce_cancelAllBtn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.LiveCommerce_orderAdjustBtn:not(:disabled):hover,
.LiveCommerce_orderAdjustBtn:not(:disabled):focus-visible,
.LiveCommerce_orderCancelBtn:not(:disabled):hover,
.LiveCommerce_orderCancelBtn:not(:disabled):focus-visible {
    border-color: var(--lc-accent);
    background: color-mix(in srgb, var(--lc-accent) 8%, var(--site-surface));
}

.LiveCommerce_orderSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    padding: 0;
    border-top: 0;
}

    .LiveCommerce_orderSummary span {
        color: var(--site-text-strong);
        font-size: 0.82rem;
        font-weight: 850;
    }

    .LiveCommerce_orderSummary strong {
        color: var(--lc-accent-dark);
        font-size: 1rem;
        font-weight: 950;
    }

.LiveCommerce_cancelAllBtn {
    width: 100%;
    min-height: 2.45rem;
    margin-top: 0.85rem;
    border: 1px solid var(--lc-accent);
    border-radius: 0.75rem;
    color: var(--lc-accent-dark);
    background: var(--site-surface);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 950;
    cursor: pointer;
}

.LiveCommerce_cancelAllBtn:not(:disabled):hover,
.LiveCommerce_cancelAllBtn:not(:disabled):focus-visible {
    color: var(--lc-accent-text);
    background: var(--lc-control-bg);
}

/* 담는 중인 주문과 구분되도록 지난 주문서 요약은 강조색 없이 안내 카드로만 표시합니다. */
.LiveCommerce_orderPast {
    margin-top: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--site-border);
    border-radius: 0.75rem;
    background: var(--site-surface-soft);
}

.LiveCommerce_orderPastCount {
    margin: 0;
    color: var(--site-text-strong);
    font-size: 0.78rem;
    font-weight: 850;
}

.LiveCommerce_orderPastDesc {
    margin: 0.25rem 0 0;
    color: var(--site-text-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

@media (max-width: 600px) {
    .LiveCommerce_productList {
        gap: 0.48rem;
    }

    .LiveCommerce_productItem {
        grid-template-columns: 3.35rem minmax(0, 1fr) 2.9rem;
        gap: 0.18rem 0.55rem;
        min-height: 4.28rem;
    }

    .LiveCommerce_productItemThumb,
    .LiveCommerce_orderThumb {
        flex-basis: 3.35rem;
        width: 3.35rem;
        height: 3.35rem;
    }

    .LiveCommerce_productItemInfo p {
        font-size: 0.76rem;
    }

    .LiveCommerce_productItemBtn {
        min-height: 1.68rem;
        height: 1.68rem;
        font-size: 0.64rem;
    }

    .LiveCommerce_orderItem {
        grid-template-columns: 3.45rem minmax(0, 1fr) auto;
        gap: 0.18rem 0.55rem;
    }
}


.LiveCommerce_optionGroup {
    margin-top: 0.25rem;
}

.LiveCommerce_optionGroups:not([hidden]) + .LiveCommerce_quantityGroup {
    margin-top: 0.85rem;
}

.LiveCommerce_optionProduct {
    display: grid;
    grid-template-columns: 3.55rem minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.LiveCommerce_optionGroup {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* 아직 고르지 않은 옵션그룹은 선택이 남아 있다는 것을 테두리와 배지로 함께 알린다. */
.LiveCommerce_optionGroup.is-required {
    padding: 0.6rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid color-mix(in srgb, #c8393f 34%, var(--site-border));
    background: color-mix(in srgb, #c8393f 5%, transparent);
}

.LiveCommerce_optionRequiredBadge {
    margin-left: 0.35rem;
    padding: 0.1rem 0.38rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-text-muted) 16%, transparent);
    color: var(--site-text-muted);
    font-size: 0.66rem;
    font-weight: 900;
    font-style: normal;
    vertical-align: middle;
}

.LiveCommerce_optionGroup.is-required .LiveCommerce_optionRequiredBadge {
    background: color-mix(in srgb, #c8393f 12%, transparent);
    color: #a52a30;
}


    .LiveCommerce_optionGroup + .LiveCommerce_optionGroup,
    .LiveCommerce_optionGroup + .LiveCommerce_quantityGroup {
        margin-top: 0.85rem;
    }

.LiveCommerce_optionLabel {
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--site-text-strong);
}

.LiveCommerce_optionList,
.LiveCommerce_optionList.is-compact,
.LiveCommerce_optionList.is-size {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.38rem;
    pointer-events: auto;
}

    .LiveCommerce_optionItem,
    .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem,
    .LiveCommerce_optionList.is-size .LiveCommerce_optionItem {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 2.48rem;
        max-width: none;
        min-height: 2rem;
        height: auto;
        padding: 0.38rem 0.58rem;
        border-radius: 0.7rem;
        border: 1px solid var(--site-border);
        background: var(--site-surface-soft);
        color: var(--site-text);
        box-shadow: none;
        font-size: 0.74rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        gap: 0.2rem;
        appearance: none;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 2;
        touch-action: manipulation;
        user-select: none;
    }

        .LiveCommerce_optionItem span {
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.74rem;
            line-height: 1;
        }

        .LiveCommerce_optionItem.is-selected,
        .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem.is-selected,
        .LiveCommerce_optionList.is-size .LiveCommerce_optionItem.is-selected {
            border-color: var(--lc-accent-dark);
            background: var(--lc-accent);
            color: var(--lc-accent-text);
            box-shadow: none;
            font-weight: 950;
        }

            .LiveCommerce_optionItem.is-selected span,
            .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem.is-selected span,
            .LiveCommerce_optionList.is-size .LiveCommerce_optionItem.is-selected span {
                color: inherit;
                font-weight: 950;
            }

        .LiveCommerce_optionItem.is-soldout,
        .LiveCommerce_optionItem:disabled,
        .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem.is-soldout,
        .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem:disabled,
        .LiveCommerce_optionList.is-size .LiveCommerce_optionItem.is-soldout,
        .LiveCommerce_optionList.is-size .LiveCommerce_optionItem:disabled {
            opacity: 1;
            cursor: not-allowed;
            border-color: color-mix(in srgb, var(--site-text-light) 62%, var(--site-border));
            border-style: dashed;
            background: color-mix(in srgb, var(--site-text-light) 10%, var(--site-surface-soft));
            color: var(--site-text-light);
            box-shadow: none;
        }

        .LiveCommerce_optionItem em {
            flex: 0 0 auto;
            margin-left: 0.24rem;
            padding: 0.16rem 0.28rem;
            border-radius: 999px;
            background: color-mix(in srgb, var(--site-text-light) 14%, transparent);
            color: var(--site-text-muted);
            font-size: 0.56rem;
            font-style: normal;
            font-weight: 900;
            line-height: 1;
        }

        .LiveCommerce_optionItem.is-soldout span,
        .LiveCommerce_optionItem:disabled span,
        .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem.is-soldout span,
        .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem:disabled span,
        .LiveCommerce_optionList.is-size .LiveCommerce_optionItem.is-soldout span,
        .LiveCommerce_optionList.is-size .LiveCommerce_optionItem:disabled span {
            color: inherit;
            text-decoration: line-through;
            text-decoration-thickness: 1px;
            text-decoration-color: currentColor;
        }

@media (max-width: 600px) {
    .LiveCommerce_optionPanel,
    .LiveCommerce_productSheet,
    .LiveCommerce_orderSheet {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .LiveCommerce_optionItem,
    .LiveCommerce_optionList.is-compact .LiveCommerce_optionItem,
    .LiveCommerce_optionList.is-size .LiveCommerce_optionItem {
        min-width: 2.36rem;
        min-height: 1.9rem;
        padding: 0.34rem 0.52rem;
        border-radius: 0.62rem;
    }
}


/* ======================================================
   Panel Auxiliary UI
   - 옵션 수량, 합계, 구매 안내, 품절 안내, 정보 팝업 최종 통합
   ====================================================== */

.LiveCommerce_quantityGroup {
    margin-top: 0.85rem;
}

.LiveCommerce_quantityHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

    .LiveCommerce_quantityHead span {
        color: var(--site-text-muted);
        font-size: 0.72rem;
        font-weight: 750;
    }

.LiveCommerce_quantityStepper {
    width: 100%;
    min-height: 2.65rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--site-border);
    background: var(--site-surface-soft);
    color: var(--site-text-strong);
}

.LiveCommerce_quantityStepper {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr) 2.65rem;
    overflow: hidden;
}

    .LiveCommerce_quantityStepper button,
    .LiveCommerce_quantityStepper input {
        border: 0;
        background: transparent;
        color: inherit;
        font-weight: 900;
        text-align: center;
    }

    .LiveCommerce_quantityStepper button {
        font-size: 1.05rem;
        color: var(--lc-accent-dark);
        background: transparent;
    }

        .LiveCommerce_quantityStepper button:not(:disabled):hover,
        .LiveCommerce_quantityStepper button:not(:disabled):focus-visible {
            background: color-mix(in srgb, var(--lc-accent) 12%, transparent);
            color: var(--lc-accent-dark);
        }

        .LiveCommerce_quantityStepper button:disabled {
            color: var(--site-text-light);
            opacity: 0.5;
        }

    .LiveCommerce_quantityStepper input {
        min-width: 0;
        border-left: 1px solid var(--site-border);
        border-right: 1px solid var(--site-border);
        outline: 0;
        /* 수량·조절 입력도 iOS 자동 확대를 막기 위해 16px 이상을 유지한다. */
        font-size: 1rem;
    }

        .LiveCommerce_quantityStepper input::-webkit-outer-spin-button,
        .LiveCommerce_quantityStepper input::-webkit-inner-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }

.LiveCommerce_totalBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0.75rem;
    padding: 0.9rem;
    border-radius: var(--lc-radius-md);
    background: var(--site-surface-soft);
    color: var(--site-text-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

    .LiveCommerce_totalBox strong {
        color: var(--site-text-strong);
        font-size: 1rem;
        font-weight: 950;
    }

.LiveCommerce_noCancelNotice {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid color-mix(in srgb, #c8393f 42%, var(--site-border));
    background: color-mix(in srgb, #c8393f 9%, #ffffff);
    color: #a52a30;
}

    .LiveCommerce_noCancelNotice .mud-icon-root {
        flex: 0 0 auto;
        margin-top: 0.05rem;
        font-size: 1.05rem !important;
        color: #c8393f !important;
    }

    .LiveCommerce_noCancelNotice span:last-child {
        font-size: 0.76rem;
        font-weight: 850;
        line-height: 1.35;
        word-break: keep-all;
    }

.LiveCommerce_purchaseGuide {
    display: flex;
    align-items: flex-start;
    gap: 0.48rem;
    margin: -0.25rem 0 1rem;
    padding: 0.72rem 0.78rem;
    border-radius: var(--lc-radius-md);
    background: color-mix(in srgb, var(--lc-accent) 13%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--lc-accent) 38%, var(--site-border));
    color: var(--lc-accent-dark);
    box-shadow: 0 0.45rem 1rem color-mix(in srgb, var(--lc-accent) 10%, transparent);
}

    .LiveCommerce_purchaseGuide .mud-icon-root {
        flex: 0 0 auto;
        margin-top: 0.05rem;
        color: var(--lc-accent) !important;
    }

    .LiveCommerce_purchaseGuide span {
        font-size: 0.76rem;
        font-weight: 850;
        line-height: 1.35;
        word-break: keep-all;
    }

.LiveCommerce_soldoutNotice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 5rem;
    padding: 1rem;
    border-radius: var(--lc-radius-md);
    background: var(--site-surface-soft);
    color: var(--site-text);
}

    .LiveCommerce_soldoutNotice .mud-icon-root {
        color: var(--lc-soldout-bg) !important;
    }

    .LiveCommerce_soldoutNotice p,
    .LiveCommerce_soldoutNotice span {
        margin: 0;
    }

    .LiveCommerce_soldoutNotice p {
        color: var(--site-text-strong);
        font-weight: 950;
    }

    .LiveCommerce_soldoutNotice span {
        display: block;
        margin-top: 0.2rem;
        color: var(--site-text-muted);
        font-size: 0.8rem;
    }

.LiveCommerce_panelTitleRow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.LiveCommerce_infoBtn,
.LiveCommerce_infoClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.LiveCommerce_infoBtn {
    width: 1.65rem;
    height: 1.65rem;
    background: color-mix(in srgb, var(--lc-accent) 14%, var(--site-surface));
    color: var(--lc-accent-dark);
}

    .LiveCommerce_infoBtn .mud-icon-root,
    .LiveCommerce_infoClose .mud-icon-root {
        color: inherit !important;
    }

.LiveCommerce_infoDialog {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 50%;
    z-index: 86;
    max-width: min(calc(100% - 2rem), 24rem);
    max-height: min(70dvh, 25rem);
    overflow-y: auto;
    border-radius: 1.15rem;
    background: #ffffff;
    color: var(--site-text);
    border: 1px solid color-mix(in srgb, var(--lc-accent) 24%, var(--site-border));
    box-shadow: 0 1.35rem 3rem rgba(0, 0, 0, 0.32);
    opacity: 0;
    transform: translateY(-45%) scale(0.96);
    pointer-events: none;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.19, 1, 0.22, 1);
}

    .LiveCommerce_infoDialog.is-open {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        pointer-events: auto;
    }

.LiveCommerce_infoDialogHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--site-border);
    background: color-mix(in srgb, var(--lc-accent) 8%, #ffffff);
}

    .LiveCommerce_infoDialogHead p {
        margin: 0;
        color: var(--site-text-strong);
        font-size: 0.95rem;
        font-weight: 950;
    }

.LiveCommerce_infoClose {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    background: var(--site-surface-soft);
    color: var(--site-text-muted);
}

    .LiveCommerce_infoBtn:not(:disabled):hover,
    .LiveCommerce_infoBtn:not(:disabled):focus-visible,
    .LiveCommerce_infoClose:not(:disabled):hover,
    .LiveCommerce_infoClose:not(:disabled):focus-visible,
    .LiveCommerce_panelClose:not(:disabled):hover,
    .LiveCommerce_panelClose:not(:disabled):focus-visible {
        background: color-mix(in srgb, var(--lc-accent) 12%, var(--site-surface-soft));
        color: var(--lc-accent-dark) !important;
    }

.LiveCommerce_infoDialogBody {
    padding: 1rem;
}

.LiveCommerce_productInfoDialog {
    max-height: min(70dvh, 25rem);
    border: 1px solid color-mix(in srgb, var(--lc-accent) 24%, var(--site-border));
    border-radius: 0.8rem;
    box-shadow: 0 1.35rem 3rem rgba(0, 0, 0, 0.32);
}

.LiveCommerce_productInfoDialog .static-dialog-header {
    padding: 0.9rem 1rem;
    background: color-mix(in srgb, var(--lc-accent) 8%, #ffffff);
}

.LiveCommerce_productInfoDialog .static-dialog-title {
    color: var(--site-text-strong);
    font-size: 0.95rem;
    font-weight: 950;
}

.LiveCommerce_productInfoDialog .static-dialog-close {
    width: 2rem;
    height: 2rem;
    color: var(--site-text-muted);
    background: var(--site-surface-soft);
}

.LiveCommerce_productInfoDialog .static-dialog-content {
    padding: 0;
}

.LiveCommerce_infoDialogBody p {
    margin: 0;
    color: var(--site-text);
        font-size: 0.82rem;
        font-weight: 650;
        line-height: 1.55;
        word-break: keep-all;
    }

/* 내주문 수량조절 Dialog는 .LiveCommerce 바깥에 렌더링되므로 재사용 컴포넌트가 쓰는 토큰만 다시 정의한다. */
.LiveCommerce_adjustDialog {
    --lc-accent: var(--site-primary, #8a6f5b);
    --lc-accent-dark: var(--site-primary-dark, #5a4638);
    --lc-accent-text: #ffffff;
    --lc-control-bg: var(--lc-accent);
    --lc-control-bg-hover: color-mix(in srgb, var(--lc-accent) 88%, #000000 12%);
    --lc-control-border: color-mix(in srgb, var(--lc-accent) 68%, rgba(255, 255, 255, 0.22));
    --lc-control-ripple: rgba(255, 255, 255, 0.28);
    --lc-radius-md: 0.95rem;
}

.LiveCommerce_adjustName {
    margin: 0;
    color: var(--site-text-strong);
    font-size: 0.88rem;
    font-weight: 950;
    word-break: keep-all;
}

.LiveCommerce_adjustOption {
    margin: 0.25rem 0 0;
    color: var(--site-text-muted);
    font-size: 0.76rem;
    font-weight: 750;
    word-break: keep-all;
}

.LiveCommerce_adjustDialog .LiveCommerce_quantityStepper {
    margin-top: 0.85rem;
}

.LiveCommerce_adjustError:not([hidden]) + .LiveCommerce_quantityStepper {
    margin-top: 0;
}

.LiveCommerce_adjustNotice {
    margin: 0;
    color: var(--site-text-muted);
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.5;
    word-break: keep-all;
}

/* 조절 버튼이 비활성인 이유를 스테퍼 바로 위에서 먼저 읽도록 둔다. */
.LiveCommerce_adjustError {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.85rem 0 0.5rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid color-mix(in srgb, #c8393f 42%, var(--site-border));
    background: color-mix(in srgb, #c8393f 9%, #ffffff);
    color: #a52a30;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.45;
    word-break: keep-all;
}

@media (max-width: 600px) {
    .LiveCommerce_purchaseGuide span {
        font-size: 0.72rem;
    }

    .LiveCommerce_infoDialog {
        left: 0.85rem;
        right: 0.85rem;
    }
}

/* ======================================================
   View Mode / Bottom Dock / Compact Product Geometry
   - 보기 모드별 하단 도크, 채팅 위치, 상품 카드 위치 최종 통합
   - 모드 변경 시 좌표 기준은 유지하고 보이는 요소만 전환
   ====================================================== */

.LiveCommerce_bottomDock {
    position: absolute;
    left: var(--lc-ui-x, 1rem);
    right: var(--lc-ui-x, 1rem);
    bottom: var(--lc-bottom-safe);
    z-index: 36;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: 0.5rem;
    width: auto;
    min-height: var(--lc-bottom-control-size);
    box-sizing: border-box;
    transform: none;
    transition: opacity 180ms ease, transform 220ms ease;
}

.LiveCommerce_chatDock,
.LiveCommerce_shopDock {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.38rem;
}

.LiveCommerce_chatDock {
    justify-content: flex-start;
    position: relative;
}

.LiveCommerce_chatError {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.32rem);
    z-index: 2;
    max-width: min(22rem, 78vw);
    margin: 0;
    padding: 0.32rem 0.52rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.55rem;
    background: rgba(35, 20, 20, 0.88);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.LiveCommerce_chatSnackbar {
    margin-top: 0;
    background-color: #ff9800 !important;
    color: rgba(0, 0, 0, 0.87) !important;
    transform: translateY(calc(100vh - max(1rem, env(safe-area-inset-bottom)) - 3.35rem - 100% - 24px));
    transform: translateY(calc(100dvh - max(1rem, env(safe-area-inset-bottom)) - 3.35rem - 100% - 24px));
}

.LiveCommerce_shopDock {
    justify-content: flex-end;
    flex: 0 0 auto;
}

.LiveCommerce.is-view-minimal .LiveCommerce_notice,
.LiveCommerce.is-view-minimal .LiveCommerce_commentBar {
    display: none;
    opacity: 0;
    transform: translateY(0.8rem);
    pointer-events: none;
}

.LiveCommerce.is-view-product .LiveCommerce_topActions,
.LiveCommerce.is-view-product .LiveCommerce_liveMetaRow,
.LiveCommerce.is-view-product .LiveCommerce_chat,
.LiveCommerce.is-view-product .LiveCommerce_commentBar,
.LiveCommerce.is-view-product .LiveCommerce_actionBtn.is-chat-lock {
    display: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(0.8rem);
    pointer-events: none;
}

.LiveCommerce.is-view-product .LiveCommerce_productOnlyRestore {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.LiveCommerce.is-view-minimal .LiveCommerce_bottomDock,
.LiveCommerce.is-view-product .LiveCommerce_bottomDock {
    left: var(--lc-ui-x, 1rem);
    right: var(--lc-ui-x, 1rem);
    bottom: var(--lc-bottom-safe);
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.LiveCommerce.is-view-minimal .LiveCommerce_chatDock,
.LiveCommerce.is-view-product .LiveCommerce_chatDock {
    display: none;
}

.LiveCommerce.is-view-minimal .LiveCommerce_shopDock,
.LiveCommerce.is-view-product .LiveCommerce_shopDock {
    grid-column: 2 / 3;
    justify-self: end;
    width: var(--lc-bottom-control-size);
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.35rem;
    pointer-events: auto;
}

.LiveCommerce.is-view-minimal .LiveCommerce_actionBtn.is-product,
.LiveCommerce.is-view-minimal .LiveCommerce_actionBtn.is-order,
.LiveCommerce.is-view-product .LiveCommerce_actionBtn.is-product,
.LiveCommerce.is-view-product .LiveCommerce_actionBtn.is-order {
    display: inline-flex;
    width: var(--lc-bottom-control-size);
    min-width: var(--lc-bottom-control-size);
    max-width: var(--lc-bottom-control-size);
    height: var(--lc-bottom-control-size);
    min-height: var(--lc-bottom-control-size);
    max-height: var(--lc-bottom-control-size);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.LiveCommerce.is-view-minimal .LiveCommerce_buyLayer,
.LiveCommerce.is-view-product .LiveCommerce_buyLayer {
    left: var(--lc-ui-x, 1rem);
    right: calc(var(--lc-ui-x, 1rem) + var(--lc-bottom-control-size) + var(--lc-shop-gap, 0.55rem));
    bottom: var(--lc-bottom-safe);
    width: auto;
    min-height: 5.4rem;
    grid-template-columns: minmax(0, 1fr) 4.25rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem;
    transform: none;
}

    .LiveCommerce.is-view-minimal .LiveCommerce_buyLayer.is-hidden,
    .LiveCommerce.is-view-product .LiveCommerce_buyLayer.is-hidden {
        opacity: 0;
        transform: translateY(1rem);
        pointer-events: none;
    }

.LiveCommerce.is-view-minimal .LiveCommerce_productMini,
.LiveCommerce.is-view-product .LiveCommerce_productMini {
    gap: 0.42rem;
}

.LiveCommerce.is-view-minimal .LiveCommerce_productThumb,
.LiveCommerce.is-view-product .LiveCommerce_productThumb {
    flex-basis: 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 0.7rem;
}

.LiveCommerce.is-view-minimal .LiveCommerce_productBadges,
.LiveCommerce.is-view-product .LiveCommerce_productBadges {
    display: none;
}

.LiveCommerce.is-view-minimal .LiveCommerce_productName,
.LiveCommerce.is-view-product .LiveCommerce_productName {
    font-size: 0.73rem;
    line-height: 1.18;
}

.LiveCommerce.is-view-minimal .LiveCommerce_productPrice,
.LiveCommerce.is-view-product .LiveCommerce_productPrice {
    margin-top: 0.12rem;
    font-size: 0.66rem;
}

.LiveCommerce.is-view-minimal .LiveCommerce_buyBtn,
.LiveCommerce.is-view-product .LiveCommerce_buyBtn {
    min-height: 2.42rem;
    border-radius: 0.75rem;
    font-size: 0.76rem;
}

.LiveCommerce.is-view-minimal.has-no-product-card {
    --lc-chat-bottom: calc(var(--lc-bottom-safe) + 0.45rem);
    --lc-answer-bottom: calc(var(--lc-bottom-safe) + 0.45rem);
}

.LiveCommerce.is-view-minimal.has-product-card,
.LiveCommerce.is-view-product.has-product-card {
    --lc-chat-bottom: calc(var(--lc-bottom-safe) + 6.05rem);
    --lc-answer-bottom: calc(var(--lc-bottom-safe) + 5.7rem);
}

.LiveCommerce.is-view-minimal .LiveCommerce_chat {
    left: var(--lc-ui-x, 1rem);
    right: var(--lc-ui-x, 1rem);
    bottom: var(--lc-chat-bottom);
}

.LiveCommerce.is-view-minimal.has-no-product-card .LiveCommerce_chat {
    max-height: 42%;
}

.LiveCommerce.is-view-minimal.has-no-product-card .LiveCommerce_chatScroll {
    max-height: 13rem;
}

@media (max-width: 600px) {
    .LiveCommerce_bottomDock {
        gap: 0.42rem;
    }

    .LiveCommerce_chatDock,
    .LiveCommerce_shopDock {
        gap: 0.3rem;
    }

    .LiveCommerce.is-view-minimal .LiveCommerce_buyLayer,
    .LiveCommerce.is-view-product .LiveCommerce_buyLayer {
        right: calc(var(--lc-ui-x, 0.85rem) + var(--lc-bottom-control-size) + var(--lc-shop-gap, 0.48rem));
        min-height: 5.05rem;
        grid-template-columns: minmax(0, 1fr) 3.85rem;
    }

    .LiveCommerce.is-view-minimal .LiveCommerce_productThumb,
    .LiveCommerce.is-view-product .LiveCommerce_productThumb {
        flex-basis: 2.7rem;
        width: 2.7rem;
        height: 2.7rem;
    }

    .LiveCommerce.is-view-minimal .LiveCommerce_buyBtn,
    .LiveCommerce.is-view-product .LiveCommerce_buyBtn {
        min-height: 2.42rem;
        font-size: 0.7rem;
    }

    .LiveCommerce.is-view-minimal.has-no-product-card {
        --lc-chat-bottom: calc(var(--lc-bottom-safe) + 0.35rem);
        --lc-answer-bottom: calc(var(--lc-bottom-safe) + 0.35rem);
    }

        .LiveCommerce.is-view-minimal.has-no-product-card .LiveCommerce_chatScroll {
            max-height: 12.4rem;
        }
}

/* ======================================================
   v6 Patch
   - 담기/정산서 구조 반영
   - 라이브 전용 선명 포인트 컬러
   - 상품 카드 화이트화
   - 채팅/쇼핑 하단 레이아웃 분리
   - 내 주문 상세 정보 카드
   ====================================================== */

/* 테마 톤을 유지하되 라이브 화면에서는 더 선명하게 */
.LiveCommerce_page.site_theme_beige.lc_tone_theme .LiveCommerce {
    --lc-live-accent: #d86f3f;
    --lc-live-accent-dark: #9f3f20;
    --lc-live-accent-soft: #ffe1d2;
}

.LiveCommerce_page.site_theme_green.lc_tone_theme .LiveCommerce {
    --lc-live-accent: #16b873;
    --lc-live-accent-dark: #087b4b;
    --lc-live-accent-soft: #d8f8e9;
}

.LiveCommerce_page.site_theme_pink.lc_tone_theme .LiveCommerce {
    --lc-live-accent: #ef4f86;
    --lc-live-accent-dark: #ad2854;
    --lc-live-accent-soft: #ffe0ea;
}

.LiveCommerce_page.site_theme_blue.lc_tone_theme .LiveCommerce {
    --lc-live-accent: #2f8cff;
    --lc-live-accent-dark: #0d55b7;
    --lc-live-accent-soft: #ddebff;
}

.LiveCommerce_page.site_theme_white.lc_tone_theme .LiveCommerce {
    --lc-live-accent: #2f6bff;
    --lc-live-accent-dark: #173aa8;
    --lc-live-accent-soft: #dfe7ff;
}

.LiveCommerce_page.lc_tone_pink .LiveCommerce {
    --lc-live-accent: #F61067;
    --lc-live-accent-dark: #B60043;
    --lc-live-accent-soft: #FFE0EC;
}

.LiveCommerce_page.lc_tone_purple .LiveCommerce {
    --lc-live-accent: #9635FF;
    --lc-live-accent-dark: #5217B8;
    --lc-live-accent-soft: #F0E4FF;
}

.LiveCommerce_page.lc_tone_blue .LiveCommerce {
    --lc-live-accent: #217AFF;
    --lc-live-accent-dark: #0647B8;
    --lc-live-accent-soft: #DCEAFF;
}

.LiveCommerce_page.lc_tone_green .LiveCommerce {
    --lc-live-accent: #00BD8E;
    --lc-live-accent-dark: #00795D;
    --lc-live-accent-soft: #D8FFF5;
}

.LiveCommerce_page.lc_tone_orange .LiveCommerce {
    --lc-live-accent: #FF513D;
    --lc-live-accent-dark: #B91F10;
    --lc-live-accent-soft: #FFE0DC;
}

.LiveCommerce_tonePreview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

    .LiveCommerce_tonePreview .lc_tone_pink {
        --mud-palette-primary: #F61067;
    }

    .LiveCommerce_tonePreview .lc_tone_purple {
        --mud-palette-primary: #9635FF;
    }

    .LiveCommerce_tonePreview .lc_tone_blue {
        --mud-palette-primary: #217AFF;
    }

    .LiveCommerce_tonePreview .lc_tone_green {
        --mud-palette-primary: #00BD8E;
    }

    .LiveCommerce_tonePreview .lc_tone_orange {
        --mud-palette-primary: #FF513D;
    }


/* ======================================================
   v7 Patch
   - 라이브 포인트 색상 10종 분리
   - 상품 카드 화이트 유지 / 왼쪽 보더 제거
   - PC 채팅 폭 확대
   - 내 주문 목록을 정산서 상품 리스트 형태로 변경
   - 옵션 정보 팝업 추가
   - 상품 패널 구매 버튼 축소
   - 간소화/상품 집중 모드 쇼핑 버튼 세로 분리
   ====================================================== */

/* 기존 v6 lc_tone_theme 계열과 겹치지 않는 라이브 포인트 10종 */
.LiveCommerce_page.lc_tone_theme_beige .LiveCommerce {
    --lc-live-accent: #b96a3f;
    --lc-live-accent-dark: #7c3f22;
    --lc-live-accent-soft: #f4ddcf;
}

.LiveCommerce_page.lc_tone_theme_green .LiveCommerce {
    --lc-live-accent: #3f8f5b;
    --lc-live-accent-dark: #285f3c;
    --lc-live-accent-soft: #dcebdd;
}

.LiveCommerce_page.lc_tone_theme_pink .LiveCommerce {
    --lc-live-accent: #c75f7b;
    --lc-live-accent-dark: #8d3650;
    --lc-live-accent-soft: #f1d8df;
}

.LiveCommerce_page.lc_tone_theme_blue .LiveCommerce {
    --lc-live-accent: #4d86a8;
    --lc-live-accent-dark: #2d5a73;
    --lc-live-accent-soft: #dceaf1;
}

.LiveCommerce_page.lc_tone_theme_white .LiveCommerce {
    --lc-live-accent: #4a5568;
    --lc-live-accent-dark: #1f2937;
    --lc-live-accent-soft: #e4e7ec;
}

.LiveCommerce_page.lc_tone_bright_pink .LiveCommerce {
    --lc-live-accent: #ff2f92;
    --lc-live-accent-dark: #c6005a;
    --lc-live-accent-soft: #ffe0f0;
}

.LiveCommerce_page.lc_tone_bright_purple .LiveCommerce {
    --lc-live-accent: #9635FF;
    --lc-live-accent-dark: #5217B8;
    --lc-live-accent-soft: #F0E4FF;
}

.LiveCommerce_page.lc_tone_bright_blue .LiveCommerce {
    --lc-live-accent: #0078ff;
    --lc-live-accent-dark: #004fc4;
    --lc-live-accent-soft: #dcecff;
}

.LiveCommerce_page.lc_tone_bright_green .LiveCommerce {
    --lc-live-accent: #00bd6f;
    --lc-live-accent-dark: #007946;
    --lc-live-accent-soft: #d9f8e9;
}

.LiveCommerce_page.lc_tone_bright_orange .LiveCommerce {
    --lc-live-accent: #ff6a00;
    --lc-live-accent-dark: #bd3d00;
    --lc-live-accent-soft: #ffe2cc;
}

.LiveCommerce_tonePreview {
    align-items: center;
}

    .LiveCommerce_tonePreview > span {
        flex: 0 0 100%;
        color: var(--site-text-muted);
        font-size: 0.72rem;
        font-weight: 850;
        line-height: 1.2;
    }

    .LiveCommerce_tonePreview .lc_tone_theme_beige {
        --mud-palette-primary: #b96a3f;
    }

    .LiveCommerce_tonePreview .lc_tone_theme_green {
        --mud-palette-primary: #3f8f5b;
    }

    .LiveCommerce_tonePreview .lc_tone_theme_pink {
        --mud-palette-primary: #c75f7b;
    }

    .LiveCommerce_tonePreview .lc_tone_theme_blue {
        --mud-palette-primary: #4d86a8;
    }

    .LiveCommerce_tonePreview .lc_tone_theme_white {
        --mud-palette-primary: #4a5568;
    }

    .LiveCommerce_tonePreview .lc_tone_bright_pink {
        --mud-palette-primary: #ff2f92;
    }

    .LiveCommerce_tonePreview .lc_tone_bright_purple {
        --mud-palette-primary: #9635FF;
    }

    .LiveCommerce_tonePreview .lc_tone_bright_blue {
        --mud-palette-primary: #0078ff;
    }

    .LiveCommerce_tonePreview .lc_tone_bright_green {
        --mud-palette-primary: #00bd6f;
    }

    .LiveCommerce_tonePreview .lc_tone_bright_orange {
        --mud-palette-primary: #ff6a00;
    }

/* ======================================================
   v8 Patch
   - 테마 연동 컬러와 선명 포인트 컬러 목적 분리
   - 상품 카드 왼쪽 보더 완전 제거
   - PC 채팅 폭 추가 확대 / 모바일 유지
   - 내 주문 칩 제거 전제의 정산 예정 상품 리스트 확정
   - 상품 목록 내부 구매 버튼 더 소형화
   ====================================================== */

/* 테마 연동 5종: 기존 몰 톤을 유지하되 라이브에서만 조금 또렷하게 */
.LiveCommerce_page.lc_tone_theme_beige .LiveCommerce {
    --lc-accent: #9f5f3f;
    --lc-accent-dark: #6f3d28;
    --lc-accent-soft: #efd9cb;
    --lc-live-accent: #9f5f3f;
    --lc-live-accent-dark: #6f3d28;
    --lc-live-accent-soft: #efd9cb;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_theme_green .LiveCommerce {
    --lc-accent: #4f7f48;
    --lc-accent-dark: #31572d;
    --lc-accent-soft: #dce9d8;
    --lc-live-accent: #4f7f48;
    --lc-live-accent-dark: #31572d;
    --lc-live-accent-soft: #dce9d8;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_theme_pink .LiveCommerce {
    --lc-accent: #b95772;
    --lc-accent-dark: #81354c;
    --lc-accent-soft: #efd2da;
    --lc-live-accent: #b95772;
    --lc-live-accent-dark: #81354c;
    --lc-live-accent-soft: #efd2da;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_theme_blue .LiveCommerce {
    --lc-accent: #507c99;
    --lc-accent-dark: #31566f;
    --lc-accent-soft: #dbe8ef;
    --lc-live-accent: #507c99;
    --lc-live-accent-dark: #31566f;
    --lc-live-accent-soft: #dbe8ef;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_theme_white .LiveCommerce {
    --lc-accent: #2f3742;
    --lc-accent-dark: #121820;
    --lc-accent-soft: #dde2e8;
    --lc-live-accent: #2f3742;
    --lc-live-accent-dark: #121820;
    --lc-live-accent-soft: #dde2e8;
    --lc-accent-text: #fff;
}

/* 선명 포인트 5종: 몰 테마와 무관하게 화이트 베이스 위에서 확실히 보이는 컬러 */
.LiveCommerce_page.lc_tone_bright_pink .LiveCommerce {
    --lc-accent: #ff2f92;
    --lc-accent-dark: #d60068;
    --lc-accent-soft: #ffe0f0;
    --lc-live-accent: #ff2f92;
    --lc-live-accent-dark: #d60068;
    --lc-live-accent-soft: #ffe0f0;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_bright_purple .LiveCommerce {
    --lc-accent: #9635FF;
    --lc-accent-dark: #5217B8;
    --lc-accent-soft: #F0E4FF;
    --lc-live-accent: #9635FF;
    --lc-live-accent-dark: #5217B8;
    --lc-live-accent-soft: #F0E4FF;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_bright_blue .LiveCommerce {
    --lc-accent: #0078ff;
    --lc-accent-dark: #0052c7;
    --lc-accent-soft: #dcecff;
    --lc-live-accent: #0078ff;
    --lc-live-accent-dark: #0052c7;
    --lc-live-accent-soft: #dcecff;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_bright_green .LiveCommerce {
    --lc-accent: #00b96b;
    --lc-accent-dark: #007a47;
    --lc-accent-soft: #d9f8e9;
    --lc-live-accent: #00b96b;
    --lc-live-accent-dark: #007a47;
    --lc-live-accent-soft: #d9f8e9;
    --lc-accent-text: #fff;
}

.LiveCommerce_page.lc_tone_bright_orange .LiveCommerce {
    --lc-accent: #ff6a00;
    --lc-accent-dark: #c44800;
    --lc-accent-soft: #ffe2cc;
    --lc-live-accent: #ff6a00;
    --lc-live-accent-dark: #c44800;
    --lc-live-accent-soft: #ffe2cc;
    --lc-accent-text: #fff;
}


/* 톤 프리뷰 버튼이 각각 자기 색을 확실히 보여주게 */
.LiveCommerce_tonePreview .mud-button-root {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 54%, var(--site-border)) !important;
}

.LiveCommerce_tonePreview .mud-button-filled {
    background: var(--mud-palette-primary) !important;
    color: #fff !important;
}


.LiveCommerce_tonePreview {
    align-items: flex-start !important;
}

    .LiveCommerce_tonePreview > span {
        flex: 0 0 100% !important;
    }

    .LiveCommerce_tonePreview .mud-button-root {
        min-height: 1.9rem !important;
        height: 1.9rem !important;
        padding: 0 0.62rem !important;
        font-size: 0.72rem !important;
    }


/* ======================================================
   Notice / Coupon / Top Utility
   - 공지와 쿠폰 상단 묶음 최종 통합
   - 쿠폰이 있으면 공지는 왼쪽, 쿠폰은 오른쪽
   - 쿠폰이 없으면 공지는 100%
   - 상품만 모드에서도 쿠폰은 오른쪽 원래 위치 유지
   ====================================================== */

/* 공지 + 쿠폰 상단 묶음 */
.LiveCommerce_noticeWrap {
    --lc-notice-coupon-height: 2.08rem;
    position: absolute;
    left: var(--lc-ui-x, var(--lc-top-x, 1rem));
    right: var(--lc-ui-x, var(--lc-top-x, 1rem));
    top: var(--lc-ui-notice-top, calc(var(--lc-top-y, max(0.9rem, env(safe-area-inset-top))) + 3.68rem));
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 0.48rem;
    pointer-events: none;
    transform: none;
    box-sizing: border-box;
}

.LiveCommerce_favoriteLogin {
    position: absolute;
    left: 0;
    top: calc(100% + 0.42rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-height: 1.86rem;
    padding: 0.24rem 0.68rem;
    border: 1px solid color-mix(in srgb, var(--lc-accent) 36%, rgba(255, 255, 255, 0.42));
    border-radius: 999px;
    appearance: none;
    cursor: pointer;
    pointer-events: auto;
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lc-accent-dark) 66%, transparent), color-mix(in srgb, var(--lc-accent) 52%, transparent));
    box-shadow: 0 0.48rem 1rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
}

    .LiveCommerce_favoriteLogin .mud-icon-root {
        width: 0.94rem;
        height: 0.94rem;
        color: inherit !important;
        font-size: 0.94rem;
    }

    .LiveCommerce_favoriteLogin:hover,
    .LiveCommerce_favoriteLogin:focus-visible {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    .LiveCommerce_favoriteLogin:disabled {
        cursor: wait;
        opacity: 0.68;
    }

.LiveCommerce.is-view-minimal .LiveCommerce_favoriteLogin,
.LiveCommerce.is-view-product .LiveCommerce_favoriteLogin {
    display: none;
}

    .LiveCommerce_noticeWrap.has-coupon {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .LiveCommerce_noticeWrap.has-no-coupon {
        grid-template-columns: minmax(0, 1fr);
    }

    .LiveCommerce_noticeWrap .LiveCommerce_notice {
        position: relative;
        inset: auto;
        grid-column: 1 / 2;
        display: block;
        width: 100%;
        min-width: 0;
        height: var(--lc-notice-coupon-height);
        min-height: var(--lc-notice-coupon-height);
        padding: 0;
        overflow: hidden;
        pointer-events: auto;
        box-sizing: border-box;
        border-radius: var(--lc-radius-md);
        color: #ffffff;
        background: linear-gradient( 135deg, color-mix(in srgb, var(--lc-accent-dark) 54%, transparent), color-mix(in srgb, var(--lc-accent) 42%, transparent) ), var(--lc-glass-dark);
        border: 1px solid color-mix(in srgb, var(--lc-accent) 42%, rgba(255, 255, 255, 0.14));
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-size: 0.78rem;
        font-weight: 750;
        word-break: keep-all;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 180ms ease, transform 220ms ease;
    }

    .LiveCommerce_noticeWrap.has-no-coupon .LiveCommerce_notice {
        grid-column: 1 / -1;
    }

.LiveCommerce_notice.is-open {
    height: auto;
}

.LiveCommerce_noticeBar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    height: var(--lc-notice-coupon-height);
    min-height: var(--lc-notice-coupon-height);
    padding: 0 0.35rem 0 0.78rem;
    box-sizing: border-box;
}

    .LiveCommerce_noticeBar > .mud-icon-root {
        align-self: center;
        color: #ffffff !important;
    }

.LiveCommerce_noticeMarquee {
    min-width: 0;
    overflow: hidden;
    color: #ffffff;
    white-space: nowrap;
}

    .LiveCommerce_noticeMarquee span {
        display: inline-block;
        padding-left: 100%;
        color: #ffffff;
        white-space: nowrap;
        animation: LiveCommerce_noticeMarquee 15s linear infinite;
    }

.LiveCommerce_noticeToggle,
.LiveCommerce_noticeClose {
    appearance: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

    .LiveCommerce_noticeToggle,
    .LiveCommerce_noticeToggle.mud-button-root {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: 1.34rem !important;
        min-width: 1.34rem !important;
        max-width: 1.34rem !important;
        height: 1.34rem !important;
        min-height: 1.34rem !important;
        max-height: 1.34rem !important;
        padding: 0 !important;
        margin: -0.15rem 0 0 0 !important;
        transform: translateY(-0.02rem) !important;
        border-radius: 999px !important;
        line-height: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
    }

        .LiveCommerce_noticeToggle .mud-button-label {
            width: 100%;
            height: 100%;
            min-height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
        }

        .LiveCommerce_noticeToggle .mud-icon-root {
            display: block;
            width: 0.84rem;
            min-width: 0.84rem;
            height: 0.84rem;
            min-height: 0.84rem;
            margin: 0;
            color: inherit !important;
            font-size: 0.84rem;
            line-height: 1;
            transform: none;
        }

.LiveCommerce_noticeBody {
    display: grid;
    gap: 0.36rem;
    padding: 0.12rem 0.78rem 0.72rem 2.35rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.38;
}

    .LiveCommerce_noticeBody p {
        margin: 0;
    }

    /* 본문 줄은 래퍼 안에 있어 부모 grid gap이 닿지 않으므로 같은 간격을 여기서 다시 준다. */
    /* 공지가 길면 카드가 화면 아래로 넘어가 읽을 수 없으므로 본문만 화면 절반으로 제한하고 스크롤을 준다.
       닫기 버튼은 스크롤 밖에 두어 항상 보이게 하고, 스크롤 연쇄로 뒤의 영상 화면이 움직이지 않게 막는다. */
    .LiveCommerce_noticeBody [data-player-notice-lines] {
        display: grid;
        gap: 0.36rem;
        max-height: 40dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

.LiveCommerce_noticeClose {
    justify-self: flex-start;
    min-height: 1.65rem;
    margin-top: 0.1rem;
    padding: 0 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 850;
}

@keyframes LiveCommerce_noticeMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 쿠폰 버튼 */
.LiveCommerce_couponEntry,
.LiveCommerce.is-view-product .LiveCommerce_noticeWrap.has-coupon .LiveCommerce_couponEntry {
    position: relative;
    grid-column: 2 / 3;
    justify-self: end;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4.35rem;
    min-width: 4.35rem;
    max-width: 4.35rem;
    height: var(--lc-notice-coupon-height);
    min-height: var(--lc-notice-coupon-height);
    padding: 0 0.44rem 0 1.92rem;
    border: 0;
    border-radius: 0.62rem;
    overflow: hidden;
    appearance: none;
    cursor: pointer;
    pointer-events: auto;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #ff2b2b 0%, #ff513d 52%, #ff7a45 100%);
    box-shadow: 0 0.48rem 1rem rgba(255, 81, 61, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
    animation: LiveCommerce_couponTicketNudge 4.8s ease-in-out infinite;
}

    .LiveCommerce_couponEntry::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 1.58rem;
        height: auto;
        border-radius: 0.62rem 0 0 0.62rem;
        background: #ffffff;
        pointer-events: none;
    }

    .LiveCommerce_couponEntry::after {
        content: "";
        position: absolute;
        left: 1.58rem;
        top: 0.26rem;
        bottom: 0.26rem;
        width: 1px;
        background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.9) 0 0.18rem, rgba(255, 255, 255, 0) 0.18rem 0.36rem );
        pointer-events: none;
    }

    .LiveCommerce_couponEntry .mud-icon-root {
        position: absolute;
        left: 0.32rem;
        top: 50%;
        z-index: 2;
        width: 0.94rem;
        min-width: 0.94rem;
        height: 0.94rem;
        min-height: 0.94rem;
        color: #ff513d !important;
        font-size: 0.94rem;
        transform: translateY(-50%);
        filter: none;
    }

    .LiveCommerce_couponEntry span,
    .LiveCommerce_couponEntry strong {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 950;
        line-height: 1;
        letter-spacing: -0.055em;
        white-space: nowrap;
        text-shadow: 0 0.06rem 0.08rem rgba(120, 0, 0, 0.2);
    }

    .LiveCommerce_couponEntry:hover,
    .LiveCommerce_couponEntry:focus-visible,
    .LiveCommerce_couponEntry.is-open {
        transform: translateY(-1px) scale(1.015);
        filter: brightness(1.04) saturate(1.08);
        box-shadow: 0 0.82rem 1.45rem rgba(255, 81, 61, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.26) inset;
    }

@keyframes LiveCommerce_couponTicketNudge {
    0%, 72%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    76% {
        transform: translateY(-2px) rotate(-1.6deg) scale(1.025);
    }

    80% {
        transform: translateY(0) rotate(1.6deg) scale(1.015);
    }

    84% {
        transform: translateY(-1px) rotate(-0.8deg) scale(1.02);
    }

    88% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* 쿠폰 패널 */
.LiveCommerce_couponPanel {
    pointer-events: auto;
    grid-column: 1 / -1;
    display: grid;
    gap: 0.72rem;
    width: 100%;
    margin-top: 0;
    padding: 0.9rem;
    border-radius: var(--lc-radius-lg);
    background: rgba(255, 255, 255, 0.98);
    color: #1e1e1e;
    border: 1px solid color-mix(in srgb, var(--lc-accent) 28%, rgba(0, 0, 0, 0.08));
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.22), 0 0.5rem 1.2rem color-mix(in srgb, var(--lc-accent) 18%, transparent);
    animation: LiveCommerce_panelDrop 190ms ease both;
}

@keyframes LiveCommerce_panelDrop {
    from {
        opacity: 0;
        transform: translateY(-0.45rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.LiveCommerce_couponHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

    .LiveCommerce_couponHead p {
        margin: 0;
        color: #111111;
        font-size: 0.95rem;
        font-weight: 950;
        letter-spacing: -0.04em;
    }

    .LiveCommerce_couponHead span {
        display: block;
        margin-top: 0.18rem;
        color: rgba(17, 17, 17, 0.62);
        font-size: 0.72rem;
        font-weight: 750;
    }

.LiveCommerce_couponClose {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: #222222;
}

    .LiveCommerce_couponClose .mud-icon-root {
        color: inherit !important;
    }

    .LiveCommerce_couponClose:hover,
    .LiveCommerce_couponClose:focus-visible {
        background: color-mix(in srgb, var(--lc-accent) 12%, rgba(0, 0, 0, 0.06));
        color: var(--lc-accent-dark);
    }

.LiveCommerce_couponList {
    display: grid;
    gap: 0.48rem;
}

.LiveCommerce_couponBalance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--lc-accent) 20%, rgba(0, 0, 0, 0.06));
    border-radius: 0.95rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lc-accent) 9%, #ffffff), #ffffff);
    color: #222222;
    font-size: 0.78rem;
    font-weight: 850;
}

.LiveCommerce_couponBalance strong {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
    color: var(--lc-accent-dark);
}

.LiveCommerce_couponBalance b {
    font-size: 1.35rem;
    font-weight: 950;
}

.LiveCommerce_couponBalance em {
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 900;
}

.LiveCommerce_couponItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.72rem;
    border-radius: 0.95rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lc-accent) 9%, #ffffff), #ffffff);
    border: 1px solid color-mix(in srgb, var(--lc-accent) 18%, rgba(0, 0, 0, 0.06));
}

    .LiveCommerce_couponItem strong {
        display: block;
        color: #111111;
        font-size: 0.82rem;
        font-weight: 950;
        letter-spacing: -0.035em;
    }

    .LiveCommerce_couponItem span {
        display: block;
        margin-top: 0.12rem;
        color: var(--lc-accent-dark);
        font-size: 0.74rem;
        font-weight: 900;
    }

    .LiveCommerce_couponItem button,
    .LiveCommerce_couponAllBtn {
        appearance: none;
        border: 0;
        cursor: pointer;
        font-family: inherit;
        border-radius: 999px;
        background: var(--lc-control-bg);
        color: var(--lc-accent-text);
        font-weight: 950;
        box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--lc-accent) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }

    .LiveCommerce_couponItem button {
        min-height: 1.85rem;
        padding: 0 0.68rem;
        font-size: 0.68rem;
        white-space: nowrap;
    }

.LiveCommerce_couponAllBtn {
    min-height: 2.35rem;
    font-size: 0.82rem;
}

    .LiveCommerce_couponItem button:hover,
    .LiveCommerce_couponItem button:focus-visible,
    .LiveCommerce_couponAllBtn:hover,
    .LiveCommerce_couponAllBtn:focus-visible {
        background: var(--lc-control-bg-hover);
    }


/* 상품만 모드: 공지는 숨기고 쿠폰은 오른쪽 원래 칸 유지 */
.LiveCommerce.is-view-product .LiveCommerce_noticeWrap.has-no-coupon {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.LiveCommerce.is-view-product .LiveCommerce_noticeWrap.has-coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-content: stretch;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;
}

    .LiveCommerce.is-view-product .LiveCommerce_noticeWrap.has-coupon .LiveCommerce_notice {
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .LiveCommerce.is-view-product .LiveCommerce_noticeWrap.has-coupon .LiveCommerce_couponEntry {
        grid-column: 2 / 3;
        justify-self: end;
        align-self: start;
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .LiveCommerce.is-view-product .LiveCommerce_noticeWrap.has-coupon .LiveCommerce_couponPanel {
        grid-column: 1 / -1;
        width: 100%;
    }

/* ======================================================
   Sound Hint
   - 최초 진입 사운드 해제 안내
   ====================================================== */

.LiveCommerce_soundHint {
    appearance: none;
    border: 0;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 70;
    transform: translate(-50%, -50%);
    display: inline-grid;
    place-items: center;
    gap: 0.28rem;
    min-width: 8.2rem;
    padding: 1rem 1.15rem 0.95rem;
    border-radius: 1.35rem;
    background: rgba(0, 0, 0, 0.58);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-family: inherit;
    animation: LiveCommerce_soundHintIn 240ms ease both;
}

.LiveCommerce_soundHintCircle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 999px;
    background: var(--lc-control-bg);
    color: var(--lc-accent-text);
    box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--lc-accent) 24%, rgba(0, 0, 0, 0.18));
}

    .LiveCommerce_soundHintCircle .mud-icon-root {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 2rem !important;
        color: inherit !important;
    }

.LiveCommerce_soundHint strong {
    margin-top: 0.24rem;
    font-size: 0.92rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.LiveCommerce_soundHint em {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 750;
    white-space: nowrap;
}

.LiveCommerce_soundHint.is-activated {
    pointer-events: none;
    animation: LiveCommerce_soundHintAbsorb 520ms cubic-bezier(.22,.85,.34,1) both;
}

    .LiveCommerce_soundHint.is-activated .LiveCommerce_soundHintCircle {
        background: #ffffff;
        color: var(--lc-accent-dark);
    }

@keyframes LiveCommerce_soundHintIn {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes LiveCommerce_soundHintAbsorb {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + 10.5rem), calc(-50% - 16.5rem)) scale(0.34);
    }
}

@media (max-width: 600px) {
    .LiveCommerce_noticeWrap {
        --lc-notice-coupon-height: 2rem;
        gap: 0.36rem;
    }

    .LiveCommerce_noticeBody {
        padding: 0.1rem 0.72rem 0.68rem 2.25rem;
        font-size: 0.7rem;
    }

    .LiveCommerce_noticeMarquee span {
        animation-duration: 13s;
    }

    .LiveCommerce_noticeToggle,
    .LiveCommerce_noticeToggle.mud-button-root {
        width: 1.28rem;
        min-width: 1.28rem;
        max-width: 1.28rem;
        height: 1.28rem;
        min-height: 1.28rem;
        max-height: 1.28rem;
    }

        .LiveCommerce_noticeToggle .mud-icon-root {
            width: 0.8rem;
            min-width: 0.8rem;
            height: 0.8rem;
            min-height: 0.8rem;
            font-size: 0.8rem;
        }

    .LiveCommerce_couponEntry,
    .LiveCommerce.is-view-product .LiveCommerce_noticeWrap.has-coupon .LiveCommerce_couponEntry {
        width: 4.18rem;
        min-width: 4.18rem;
        max-width: 4.18rem;
        height: var(--lc-notice-coupon-height);
        min-height: var(--lc-notice-coupon-height);
        padding: 0 0.38rem 0 1.78rem;
        border-radius: 0.62rem;
    }

        .LiveCommerce_couponEntry::before {
            width: 1.46rem;
            border-radius: 0.62rem 0 0 0.62rem;
        }

        .LiveCommerce_couponEntry::after {
            left: 1.46rem;
        }

        .LiveCommerce_couponEntry .mud-icon-root {
            left: 0.3rem;
            width: 0.88rem;
            min-width: 0.88rem;
            height: 0.88rem;
            min-height: 0.88rem;
            font-size: 0.88rem;
        }

        .LiveCommerce_couponEntry span,
        .LiveCommerce_couponEntry strong {
            font-size: 0.64rem;
        }

    .LiveCommerce_couponPanel {
        padding: 0.78rem;
        border-radius: 1.05rem;
    }

    .LiveCommerce_soundHint {
        min-width: 7.4rem;
        padding: 0.9rem 1rem 0.86rem;
    }

    .LiveCommerce_soundHintCircle {
        width: 3.75rem;
        height: 3.75rem;
    }

        .LiveCommerce_soundHintCircle .mud-icon-root {
            width: 1.82rem !important;
            height: 1.82rem !important;
            font-size: 1.82rem !important;
        }

    @keyframes LiveCommerce_soundHintAbsorb {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        100% {
            opacity: 0;
            transform: translate(calc(-50% + 7.7rem), calc(-50% - 16.6rem)) scale(0.32);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .LiveCommerce_couponEntry,
    .LiveCommerce_noticeMarquee span,
    .LiveCommerce_playerNoticeTouch::before,
    .LiveCommerce_playerNoticeTouch .mud-icon-root {
        animation: none;
    }
}

/* Static SSR Player의 초기 상태, 브라우저 아이콘, 결과 안내입니다. */
.LiveCommerce_page [hidden] {
    display: none !important;
}

.LiveCommerce_staticState {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.28);
}

.LiveCommerce_staticState.is-reload {
    cursor: pointer;
}

.LiveCommerce_staticStateContent {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    max-width: 90%;
    text-align: center;
}

.LiveCommerce_staticStateContent p {
    margin: 0;
    color: #fff;
}

/* 호스트 미복귀 안내에서만 노출하는 새로고침 버튼입니다. */
.LiveCommerce_staticStateAction {
    padding: 0.55rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
}

    .LiveCommerce_staticStateAction:hover {
        background: rgba(255, 255, 255, 0.24);
    }

    .LiveCommerce_staticStateAction[hidden] {
        display: none;
    }

/* 시청자 퇴장 종료 화면의 홈·주문내역 이동 버튼 줄입니다. */
.LiveCommerce_staticStateNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

    .LiveCommerce_staticStateNav[hidden] {
        display: none;
    }

.LiveCommerce_staticSpinner {
    width: 3rem;
    height: 3rem;
    border: 0.24rem solid rgba(255, 255, 255, 0.32);
    border-top-color: #fff;
    border-radius: 50%;
    animation: LiveCommerce_staticSpin 0.8s linear infinite;
}

.LiveCommerce .material-symbols-outlined.mud-icon-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
}

.LiveCommerce_staticToast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 40;
    max-width: min(90vw, 30rem);
    padding: 0.8rem 1rem;
    color: #fff;
    background: rgba(27, 29, 33, 0.94);
    border-radius: 0.8rem;
    box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translate(-50%, 0.65rem);
    transition: opacity 160ms ease, transform 160ms ease;
}

.LiveCommerce_staticToast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.LiveCommerce_staticToast.is-warning,
.LiveCommerce_staticToast.is-error {
    background: rgba(132, 33, 33, 0.96);
}

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


/* ======================================================
   v26 restore refinements
   - June 복구본 기준 유지
   - 채팅/답변 고정/내부 패널 톤 정리
   - 포인트 컬러 최종값 반영
   - 상품 카드 패딩 균일화
   ====================================================== */

/* 포인트 컬러 최종값: 선명 5종 */
.LiveCommerce_page.lc_tone_pink .LiveCommerce,
.LiveCommerce_page.lc_tone_bright_pink .LiveCommerce {
    --lc-accent: #F61067;
    --lc-accent-dark: #B60043;
    --lc-accent-soft: #FFE0EC;
    --lc-live-accent: #F61067;
    --lc-live-accent-dark: #B60043;
    --lc-live-accent-soft: #FFE0EC;
    --lc-accent-text: #ffffff;
}

.LiveCommerce_page.lc_tone_purple .LiveCommerce,
.LiveCommerce_page.lc_tone_bright_purple .LiveCommerce {
    --lc-accent: #9635FF;
    --lc-accent-dark: #5217B8;
    --lc-accent-soft: #F0E4FF;
    --lc-live-accent: #9635FF;
    --lc-live-accent-dark: #5217B8;
    --lc-live-accent-soft: #F0E4FF;
    --lc-accent-text: #ffffff;
}

.LiveCommerce_page.lc_tone_green .LiveCommerce,
.LiveCommerce_page.lc_tone_bright_green .LiveCommerce {
    --lc-accent: #00BD8E;
    --lc-accent-dark: #00795D;
    --lc-accent-soft: #D8FFF5;
    --lc-live-accent: #00BD8E;
    --lc-live-accent-dark: #00795D;
    --lc-live-accent-soft: #D8FFF5;
    --lc-accent-text: #ffffff;
}

.LiveCommerce_page.lc_tone_orange .LiveCommerce,
.LiveCommerce_page.lc_tone_bright_orange .LiveCommerce {
    --lc-accent: #FF513D;
    --lc-accent-dark: #B91F10;
    --lc-accent-soft: #FFE0DC;
    --lc-live-accent: #FF513D;
    --lc-live-accent-dark: #B91F10;
    --lc-live-accent-soft: #FFE0DC;
    --lc-accent-text: #ffffff;
}

.LiveCommerce_page.lc_tone_blue .LiveCommerce,
.LiveCommerce_page.lc_tone_bright_blue .LiveCommerce {
    --lc-accent: #217AFF;
    --lc-accent-dark: #0647B8;
    --lc-accent-soft: #DCEAFF;
    --lc-live-accent: #217AFF;
    --lc-live-accent-dark: #0647B8;
    --lc-live-accent-soft: #DCEAFF;
    --lc-accent-text: #ffffff;
}

.LiveCommerce_tonePreview .lc_tone_pink,
.LiveCommerce_tonePreview .lc_tone_bright_pink {
    --mud-palette-primary: #F61067;
}

.LiveCommerce_tonePreview .lc_tone_purple,
.LiveCommerce_tonePreview .lc_tone_bright_purple {
    --mud-palette-primary: #9635FF;
}

.LiveCommerce_tonePreview .lc_tone_green,
.LiveCommerce_tonePreview .lc_tone_bright_green {
    --mud-palette-primary: #00BD8E;
}

.LiveCommerce_tonePreview .lc_tone_orange,
.LiveCommerce_tonePreview .lc_tone_bright_orange {
    --mud-palette-primary: #FF513D;
}

.LiveCommerce_tonePreview .lc_tone_blue,
.LiveCommerce_tonePreview .lc_tone_bright_blue {
    --mud-palette-primary: #217AFF;
}