:root {
    --live-font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", Malgun Gothic, Helvetica, serif, Droid sans, sans-serif;
    /* color */
    --color-primary: #FF2F2F;
    --color-secondary: #E8E8E8;
    --color-neutral: #222;
    --color-accent: #FF5900;
    --color-disabled: #929292;
    --color-secondary-done: #FFF0E8;
    --color-text-light: #FFF;
    --color-text-dark: #222;
}

button {
    all: unset;
    cursor: pointer;
}

button:disabled {
    cursor: auto;
    border: 0;
    background: #B8B8B8;
}

ul {
    list-style-type: none;
}

a:link {
    text-decoration: none;
    color: inherit;
}

select:focus-visible {
    outline: none;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.hidden-input {
    position: absolute;
    left: -9999px;
    bottom: -9999px;
}
/* Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.btn-lg {
    height: 2.75rem; /* 40px */
    line-height: 2.75rem !important; /* 40px */
    flex: 1 0 0;
    border-radius: 0.5rem; /* 8px */
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    letter-spacing: -0.025rem;
}

.btn-sm {
    width: 5.625rem; /* 90px */
    height: 1.625rem; /* 28px */
    /*padding: 0 0.75rem;*/
    border-radius: 0.25rem;
    font-size: 0.75rem; /* 12px */
    line-height: 1.4;
    letter-spacing: -0.01875rem;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.btn-secondary { /*세컨찬스*/
    background: var(--color-secondary);
    color: #929292;
}

.btn-neutral {
    border: 1px solid var(--color-neutral);
    background: var(--color-neutral);
    color: var(--color-text-light);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-text-light);
}

.btn-disabled {
    border: 1px solid var(--color-disabled);
    background: var(--color-disabled);
    color: #D8D8D8;
    pointer-events: none;
}

.btn-secondary-done { /*알림신청 완료*/
    background: var(--color-secondary-done) !important;
    color: var(--color-accent);
}

.btn-remove {
    border: 1px solid #d8d8d8;
    background: var(--color-text-light);
    color: #424242;
}

.btn-submit {
    border: 1px solid #424242;
    background: #424242;
    color: #FFF !important;
}

/*주요버튼*/
.btn_type_basic {
    border-radius: var(--btn_type_basic_radius, 26px);
    background-color: var(--btn_type_basic_bacground, #13afed) !important;
    border: var(--btn_type_basic_border, none);
    border-bottom: var(--btn_type_basic_border-bottom, 6px solid rgba(0,0,0,0.14));
    color: var(--btn_type_basic_color, #ffd800);
    box-shadow: 0px var(--btn_type_basic_shadow_px,0px) var(--btn_type_basic_box-shadow);
}

/*보조 버튼 스타일*/
.btn_type_sub {
    border-radius: var(--btn_type_sub_radius, 26px);
    background-color: var(--btn_type_sub_bacground, #1565b0);
    border: var(--btn_type_sub_border, none);
    border-bottom: var(--btn_type_sub_border-bottom, 6px solid rgba(0,0,0,0.14));
    color: var(--btn_type_sub_color, #ffd800);
    box-shadow: 0px var(--btn_type_sub_shadow_px,0px) var(--btn_type_sub_box-shadow);
}

.btn_type_second {
    border-radius: var(--btn_type_basic_radius, 26px);
    background-color: #FF5900 !important;
    border: var(--btn_type_second_border, none);
    border-bottom: var(--btn_type_second_border-bottom, 6px solid rgba(0,0,0,0.14));
    color: #fff !important;
    box-shadow: 0px var(--btn_type_basic_shadow_px,0px) var(--btn_type_basic_box-shadow);
}

/* checkbox */
/* --lg / --green */
/*.checkbox--lg {
    --size: 20px;
}*/
.checkbox {
    --size: 14px;
    --active: #FF2F2F;
    --border: #D8D8D8;
    --check: #ffffff;
}

.checkbox__input {
    display: none;
}

.checkbox__icon {
    width: var(--size);
    height: var(--size);
    display: inline-flex;
}

.checkbox__svg {
    width: 100%;
    height: 100%;
}

.checkbox__bg {
    fill: none;
    stroke: var(--border);
    transition: all 0.2s ease;
}

.checkbox__check {
    fill: none;
    stroke: var(--check);
    stroke-width: 2;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

.checkbox__input:checked + .checkbox__icon .checkbox__bg {
    fill: var(--active);
    stroke: none;
}

.checkbox__input:checked + .checkbox__icon .checkbox__check {
    opacity: 1;
    transform: scale(1);
}

.label--bundle {
    display: inline-flex;
    font-size: 0.625rem;
    min-width: 29px;
    height: 16px;
    line-height: 14px;
    padding: 0 0.25rem;
    justify-content: center;
    align-items: center;
    color: #fff;
    letter-spacing: -0.25px;
    background-color: #3C763D;
    border-radius: 4px;
    margin-right: 4px;
    /*vertical-align: bottom;*/
}
.label--bundle.is-soldout {
    background-color: #929292;
    margin-right:0;
}
.label--sold-out {
    display: inline-flex;
    font-size: 0.625rem;
    width: 27px;
    height: 15px;
    /*padding: 0 0.375rem 0.063rem;*/
    justify-content: center;
    align-items: center;
    color: #fff;
    letter-spacing: -0.25px;
    background-color: #929292;
    border-radius: 4px;
    margin-right: 4px;
    vertical-align: bottom;
}

/* 라이브 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #f2f2f2;
    font-family: var(--live-font-family);
}

.live-wrapper,
.live-wrapper input,
.live-wrapper textarea,
.live-wrapper select,
.live-wrapper button {
    font-family: var(--live-font-family) !important;
}

.w-100 {
    width: 100%;
}

/* modal */
.modal {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: rgba(0, 0, 0, 0.80);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    width: 100%;
    max-width: 640px;
    padding: 0 32px;
    margin: 0 auto;
}

.modal-content {
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
}

.modal__body {
    text-align: center;
    padding: 1.25rem;
}

    .modal__body .title {
        color: var(--color-text-dark);
        font-size: 1rem;
        font-weight: 700;
    }

    .modal__body .desc {
        color: #929292;
        font-size: 13px;
        font-weight: 400;
    }

/* login modal */
.modal-login.login-modal-open {
    display: flex;
}

#loginModal .modal-login__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
}

#loginModal .modal-login__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 14px 10px;
}

    #loginModal .modal-login__close .Icon_Close {
        display: flex;
    }

        #loginModal .modal-login__close .Icon_Close img {
            width: 32px;
            height: 32px;
        }

#loginModal .modal-title {
    font-size: 1rem;
    font-weight: 700;
    width: 100%;
    height: 32px;
    line-height: 32px;
    color: #000;
    text-align: center;
}

#loginModal .modal-login__banner img {
    max-width: 100%;
    margin-bottom: 1.5rem;
}

#loginModal .login-type__button,
#loginModal .login-type__icon {
    padding: 0 1rem;
}

#loginModal .login-type__button {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

#loginModal .login-type__icon ul li:last-child {
    margin-bottom: 1.5rem;
}

.login-type__button a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    line-height: 44px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 100px;
}

.login-type__button .Naver {
    background: #37cc66;
    color: #fff;
}

.login-type__button .Kakao {
    background: #fbe300;
    color: #3b1e1e;
}

.login-type__button .Apple {
    background: #222222;
    color: #fff;
}

.login-type__button img {
    width: 34px;
}

.login-type__icon ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
}

.login-type__icon a {
    display: flex;
}

.login-type__icon img {
    width: 40px;
    height: 40px;
}

/* 단골맺기 toast modal */
.modal-favorite-toast.modal-favorite-toast-open {
    display: flex;
    z-index: 10;
}

.modal-favorite-toast .modal-dialog {
    pointer-events: none;
}

.modal-favorite-toast .modal-content {
    background: transparent;
    padding: 20px 0;
}

.favorite-toast__body {
    text-align: center;
}

@keyframes favoriteCheckIn {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.8);
    }

    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.1);
    }

    80% {
        transform: translateY(2px) scale(0.97);
    }

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

.favorite-toast__img {
    margin-bottom: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .favorite-toast__img.animate {
        animation: favoriteCheckIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

.favorite-toast__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.favorite-toast__desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.80);
    font-weight: 400;
}

/* 단골해제 modal */
.modal-favorite-cancel.modal-favorite-cancel-open {
    display: flex;
}

.modal-favorite-cancel .modal-content {
    padding: 1rem 1.25rem;
}

.modal-favorite-cancel .modal__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    padding-top: 1rem;
}

    .modal-favorite-cancel .modal__body .title > b {
        color: var(--color-primary);
        font-weight: 700;
    }

.favorite-cancel__foot {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 0;
    text-align: center;
}

.favorite-cancel__button {
    font-size: 0.875rem;
    font-weight: 700;
}

.favorite-cancel__button--sub {
    border: 1px solid #d9d9d9;
    background: #ffffff;
    color: #222222;
}

.favorite-cancel__button--primary {
    background: #222222;
    color: #ffffff;
}

/* 공유 modal */
.modal-share.modal-share-open {
    display: flex;
}

.modal-share .modal-content {
    padding: 12px 20px;
}

.modal-share .title {
    padding-bottom: 8px;
}

.modal-share .share__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 12px;
}

.modal-share .share__content .share__content--top,
.modal-share .share__content .share__content--bottom {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.modal-share .modal-share__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem
}

.modal-share .modal-share__text {
    color: #424242;
    font-size: 12px;
    font-weight: 400;
}

.modal-share .modal-share__img {
    cursor: pointer;
}

.modal-share__footer {
    padding-top: 1rem;
    text-align: center;
}

.modal-share__close {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}

.modal-share__close img {
    vertical-align: middle;
}

.live-wrapper {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
}

.live-video {
    position: absolute;
    inset: 0;
    background: #111;
    z-index: 0;
}

.live-video-state {
    display: none;
    /*    position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    flex: 1;
    align-items: center;
    justify-content: center;
}

/* 상태 메세지 (방송 중지) */
.live-stop-state.is-visible, .live-video-state.is-visible {
    text-align: center;
}

.live-stop-state.is-visible .title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-light);
    line-height: 1.4;
    margin-bottom: 4px;
    white-space: pre-wrap;
}

.live-stop-state.is-visible .desc {
    font-size: 0.875rem;
    font-weight: 400;
    color: #d8d8d8;
    line-height: 1.4;
    white-space: pre-wrap;
}

/* 상태 메세지 (마이크 꺼짐/카메라 중지)*/
.live-video-state .state-message {
    /*    position: absolute;
    top: 50%;
    left: 50%;*/
    width: 160px;
    height: 100px;
    /*    transform: translate(-50%, -50%);*/
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.80);
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    z-index: 1;
}

.live-video-state .state-message p {
    color: #fff;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.36px;
}

.live-video-state[data-live-video-state='camera-off'] .state-message {
    border: 0;
}

.live-video-state.is-visible {
    display: flex;
}

.live-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    will-change: height;
}
.live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
}

.live-header__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 2.5rem;
}

.live-header__logo .shop-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: var(--color-text-light);
    text-overflow: ellipsis;
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: -0.45px;
}

.live-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.live-header__btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-body {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1rem 0.75rem;
}

.live-info {
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
}

.live-info__row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.live-badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    width: 37px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    /*padding: 0.063rem 0.375rem 0.188rem;*/
    border-radius: 4px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.live-title-wrapper {
    position: relative;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.live-title {
    color: #fff;
    letter-spacing: -0.016rem;
    font-size: 0.875rem;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
}

.slide-text {
    animation: textFlow var(--duration, 35s) linear infinite;
}
/* 텍스트 흐름 */
@keyframes textFlow {
    0% {
        transform: translateX(0);
    }

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

.live-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.375rem;
}

.live-like,
.live-view {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.688rem;
}
/* 공지 */
.live-notice {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 0.625rem;
}

.live-notice__head {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.25rem 0.625rem;
    border-radius: 14px;
    background: rgba(17, 17, 17, 0.70);
    backdrop-filter: blur(2px);
}

.live-notice__head[aria-expanded="true"] {
    border-radius: 14px 14px 0 0;
}

.live-notice__head .title {
    color: var(--color-text-light);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.28px;
}

.live-notice__head .icon {
    color: var(--color-text-light);
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 800;
}

.live-notice__body {
    display: none;
    color: #424242;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 1rem;
    border-radius: 0 14px 14px 14px;
    background: rgba(255, 255, 255, 0.88);
    width: 260px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 9;
}

.live-stop-state {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.live-stop-state.is-visible {
    display: flex;
}

.live-stop-state .state-message {
    width: 200px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.80);
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    text-align: center;
}

.live-stop-state .state-message .title {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.36px;
}

.live-stop-state .state-message .desc {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -0.28px;
}

.live-chat {
    display: flex;
    flex-direction: column;
    gap: 0.188rem;
    max-height: 28vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 3.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.live-chat::-webkit-scrollbar {
    display: none;
}


.chat-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.188rem;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
}

.chat-list-body::-webkit-scrollbar {
    display: none;
}

.chat-item {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    /*max-width: 85%;*/
}

.chat-item__bubble {
    display: flex;
    padding: 2px 4px;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(4px);
}

.chat-item__name {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.80);
    align-self: flex-start;
}

.chat-item__text {
    font-weight: 600;
    color: #fff;
    word-break: break-all;
}

/* 시스템 챗 */
.chat-item--system .chat-item__bubble {
    background: rgba(0, 0, 0, 0.80);
}

.chat-item--system .chat-item__name {
    gap: 0.125rem;
    color: #e53935;
    font-weight: 600;
    align-self: flex-start;
}

.chat-item--system .chat-item__text {
    font-weight: 600;
}

/* 관리자 챗 */
.chat-item--admin {
    width: 100%;
}
.chat-item--admin .chat-item__bubble { 
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ffc833;
    background: rgba(0, 0, 0, 0.60);
}
.chat-item--admin .chat-item__name {
    gap: 0.25rem;
    color: #FFC833;
    font-weight: 600;
    align-self: center;
}
.chat-item--admin .chat-item__text {
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.22px;
}

/*.chat-list-body {
    margin-top: 10px;
}*/
/* 고정 챗 */
.fixed-chats-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.188rem;
    width: 100%;
}
.chat-item.chat-item--fixed {
    position: relative;
    width: 100%;
}
.chat-item--fixed .chat-item__bubble {
    width: 100%;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.40);
    align-items: flex-start; 
}
.chat-item--fixed .chat-item__name {
    align-self: flex-start;
}
.live-chat:has(.chat-item--fixed) .chat-list-body {
    mask-image: none;
    -webkit-mask-image: none;
}
.chat-item--fixed .chat-item-text-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}
.chat-item--fixed .chat-item__link {
    display: flex;
    align-items: normal;
    gap: 0.25rem;
    color: #fff;
    margin-left: auto;
    white-space: nowrap;
    font-size: var(--chat-font-size);
}

.chat-item--fixed .chat-item__link .text {
    text-decoration-line: underline;
    text-underline-position: under;
}

.chat-item--purchase .chat-item__bubble {
    gap: 0;
    color: rgba(255, 255, 255, 0.80);
    border-color: transparent;
    background: transparent;
}

.chat-item--purchase .chat-item__bubble .label--purchase {
    margin-right: 4px;
}

.live-nickname-set {
    display: flex;
    align-items: center;
    gap: 4px;
}

.label--purchase {
    display: flex;
    padding: 2px 5px 1px 5px;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border-radius: 2px;
    color: #fff;
    background: #F00;
}

.label--ban {
    display: inline-flex;
    padding: 3px 5px;
    justify-content: center;
    align-items: center;
    font-size: var(--chat-font-size);
    font-weight: 600;
    border-radius: 4px;
    color: #fff;
    background: #F00;
    gap: 4px;
}

.chat-item--purchase .chat-item__bubble .chat-item__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.chat-item--purchase .chat-item__bubble b {
    color: #fff;
    font-weight: 700;
}

.chat-item--purchase .chat-item__bubble .chat-item__state {
    margin-left: 4px;
}

.live-chat-input {
    display: flex;
    padding: 7px 12px;
    margin-top: 6px;
    margin-right: 3.75rem;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(17, 17, 17, 0.40);
    backdrop-filter: blur(2px);
}
/* 채팅 아이콘 클릭 시 액션 */
.live-wrapper.chat-compose-mode .live-banner,
.live-wrapper.chat-compose-mode .live-body > .live-goods,
.live-wrapper.chat-compose-mode .state-toast-wrap,
.live-wrapper.chat-compose-mode #directCartModal {
    display: none !important;
}

/* 채팅 모드: 페이지 스크롤 차단 (JS에서 touchmove preventDefault로 처리) */
.live-wrapper.chat-compose-mode {
    overflow: hidden !important;
}

.live-wrapper.chat-compose-mode .live-overlay {
    overflow: hidden !important;
}

.live-wrapper.chat-compose-mode .live-body {
    overflow: hidden !important;
}

.live-wrapper.live-bottom-hidden .live-chat,
.live-wrapper.live-bottom-hidden .live-banner,
.live-wrapper.live-bottom-hidden .live-body > .live-goods,
.live-wrapper.live-bottom-hidden .live-chat-input,
.live-wrapper.live-bottom-hidden .live-nickname-set {
    display: none !important;
}

.live-wrapper.live-bottom-hidden .live-stop-state,
.live-wrapper.live-bottom-hidden .live-video-state {
    padding-top: 0 !important;
}

#btnChatToggle {
    display: none;
}

.live-chat-input input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.875rem;
    font-family: var(--live-font-family) !important;
}

.live-chat-input input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--live-font-family) !important;
}

.live-chat-input #chatInput {
    font-family: var(--live-font-family) !important;
}

.live-chat-input__proxy {
    display: none;
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 0.875rem;
    font-family: var(--live-font-family) !important;
    white-space: nowrap;
    overflow: hidden;
/*    text-overflow: ellipsis;*/
    height: 24px;
    align-items: center;
}

.live-chat-input__proxy.is-placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.live-wrapper.ios-chat-proxy-mode .live-chat-input__proxy {
    display: flex;
}

/* iOS proxy 커서 */
.live-chat-input__cursor {
    display: none;
    width: 1.5px;
    height: 1.2rem;
    background: #fff;
    vertical-align: middle;
    flex-shrink: 0;
}

.live-wrapper.ios-chat-proxy-mode.chat-compose-mode .live-chat-input__cursor {
    display: inline-block;
    animation: proxy-cursor-blink 1s step-end infinite;
}

@keyframes proxy-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.live-wrapper.ios-chat-proxy-mode #chatInput {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0.01;
    font-size: 16px;
    caret-color: transparent;
    pointer-events: none;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

.live-wrapper.chat-compose-mode .live-chat {
    max-height: 15vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}


.live-chat-input #chatInput::placeholder {
    font-family: var(--live-font-family) !important;
}

.live-chat-input__send {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.live-side-btns {
    position: absolute;
    right: 16px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 1;
    padding-bottom:12px;
}

.side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
}

.side-btn__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.side-btn__badge {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--color-primary, #FF2F2F);
    color: var(--color-text-light, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}

.side-btn__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/*좋아요*/
#btnLike .side-btn__icon {
    flex-direction: column;
}

#btnLike .side-btn__icon .num {
    color: #EEE;
    text-align: center;
    font-size: 0.625rem;
    letter-spacing: -0.016rem;
}

.side-btn__label {
    color: #fff;
    font-size: 0.6rem;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.live-footer {
    display: none;
}
/*배너*/
.live-banner {
    height: 80px;
    margin-right: 3.75rem;
    margin-top: 8px;
    border-radius: 12px;
}

@media (min-width: 640px) {
    .live-banner {
        height: 120px;
    }
}

.live-banner img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    border-radius: 12px;
}
/* 상품정보 */
main .live-goods {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 8px;
    height: 64px;
    margin-right: 3.75rem;
    margin-top:8px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
}

.live-goods__thumb {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    /*background: var(--color-secondary);*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-goods__thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-goods__thumb .image-more {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3px;
    font-size: 10px;
    margin: 4px;
    display: flex;
    width: 22px;
    height: 12px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: #fff;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(0.5px);
}
.live-goods__thumb .image-zoom {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 8px;
    margin: 4px;
    display: flex;
    width: 12px;
    height: 12px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(0.5px);
}
.live-goods__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.live-goods__name {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.24px;
}

.live-goods__price {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.live-goods__price .price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.live-goods__price .price-rate {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
}

main .live-goods .btn-sm {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 350px) {
    main .live-goods {
        height: auto !important;
/*        display: flex !important;*/
        flex-direction: row !important;
        gap: 0.125rem 0.375rem;
        align-items: flex-start !important;
        position: relative !important;
    }

    main .live-goods .live-goods__thumb {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }

    main .live-goods .live-goods__info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem;
        flex: 1 !important;
        min-width: 0;
    }

    main .live-goods .live-goods__name {
        white-space: normal !important;
    }

    main .live-goods .live-goods__price {
        margin-bottom: 4px;
    }

    main .live-goods .btn.btn-sm.btn-accent,
    main .live-goods .btn.btn-sm.btn-secondary-done {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
    }

    main .live-goods {
        flex-wrap: wrap !important;
    }

    main .live-goods .btn.btn-sm {
        /*margin-left: 46px !important;*/
        flex: 1 1 100% !important;
    }

    main .live-goods .live-goods__thumb[style*="display: none"] ~ .btn.btn-sm {
        margin-left: 0 !important;
    }
}

/* 상품 품절일 경우(세컨찬스) */
.live-goods-toast .live-goods.sold-out .live-goods__thumb {
    position: relative;
}

.live-goods-toast .live-goods.sold-out .live-goods__thumb:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.80);
}

.live-goods-toast .live-goods.sold-out .live-goods__thumb:after {
    content: '품절';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0.625rem;
    padding: 0.125rem 0.313rem 0.188rem;
    color: #fff;
    letter-spacing: -0.25px;
    border-radius: 2px;
    background: rgba(34, 34, 34, 0.60);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.live-goods.sold-out .live-goods__name {
    color: #727272;
}

.live-goods.sold-out .live-goods__price .price-rate,
.live-goods.sold-out .live-goods__price .price {
    color: #929292;
}
/* toast - 상품담기 */
.toast-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9;
}

.toast {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: 32px 32px 0 0;
    background: #fff;
    transform: translateY(105%);
    transition: transform 0.24s ease;
    z-index: 10;
}
/* 판매상품/담은상품 toast 전용 바텀시트 레이아웃 */
.toast.live-goods-toast {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 95vh;
    max-height: 95dvh;
    display: flex;
    flex-direction: column;
    will-change: transform;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.toast.live-goods-toast .toast__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 하단 dimd(그라디언트) 영역에 마지막 상품이 가려지지 않도록 여유를 준다. */
    /*padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));*/
}

.live-wrapper:is(.cart-toast-open, .cart-list-toast-open, .goods-list-toast-open, .state-toast-open, .favorite-whether-toast-open) .toast-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.live-wrapper.cart-toast-open .toast-backdrop,
.live-wrapper.cart-list-toast-open .toast-backdrop,
.live-wrapper.goods-list-toast-open .toast-backdrop,
.live-wrapper.state-toast-open .toast-backdrop,
.live-wrapper.favorite-whether-toast-open .toast-backdrop,
.live-wrapper.menu-toast-open .toast-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.live-wrapper:is(.cart-list-toast-open, .goods-list-toast-open, .state-toast-open, .favorite-whether-toast-open) .toast:not(.live-goods-toast)[aria-hidden="false"] {
    transform: translateY(0);
    max-height: 90%;
    overflow-y: hidden;
}

.live-wrapper.cart-list-toast-open .toast:not(.live-goods-toast)[aria-hidden="false"],
.live-wrapper.goods-list-toast-open .toast:not(.live-goods-toast)[aria-hidden="false"],
.live-wrapper.state-toast-open .toast:not(.live-goods-toast)[aria-hidden="false"],
.live-wrapper.favorite-whether-toast-open .toast:not(.live-goods-toast)[aria-hidden="false"] {
    transform: translateY(0);
    max-height: 90%;
    overflow-y: hidden;
}

.live-wrapper.cart-toast-open .toast:not(.live-goods-toast)[aria-hidden="false"],
.live-wrapper:is(.cart-toast-open) .toast:not(.live-goods-toast)[aria-hidden="false"] {
    transform: translateY(0);
    overflow-y: hidden;
}
/* 바텀시트 타입은 내부 body만 스크롤되도록 부모 overflow를 고정한다. */
.live-wrapper:is(.cart-list-toast-open, .goods-list-toast-open) .toast.live-goods-toast {
    max-height: none;
    overflow: hidden;
}

.live-wrapper.cart-list-toast-open .toast.live-goods-toast,
.live-wrapper.goods-list-toast-open .toast.live-goods-toast {
    max-height: none;
    overflow: hidden;
}
/* 상품옵션 */
.live-wrapper.cart-toast-open .toast.cart-toast {
    min-height: 0;
}
/* 상품리스트 */
.live-wrapper.goods-list-toast-open .toast.live-goods-toast {
    min-height: 0;
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 담은상품 리스트 */
.live-wrapper.cart-list-toast-open .toast.live-goods-toast {
    min-height: 0px;
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 상태 toast*/
/* (주문완료) */
.live-wrapper.state-toast-open #orderCompleteToast {
    min-height: 120px;
}
/* (재고부족) */
.live-wrapper.state-toast-open #insufficientStockToast,
.live-wrapper.state-toast-open #soldOutToast {
    min-height: 138px;
}

.live-wrapper.state-toast-open #soldOutToast {
    min-height: 204px;
}

.state-toast-wrap .state-toast#soldOutToast .toast__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1.5rem;
}

.toast.dragging {
    transition: none;
}
/* 드래그 핸들 터치 영역: 충분한 패딩으로 터치/마우스 조작이 쉽도록 넓힘 */
.handle-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 0 2rem;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}

.handle-hr {
    display: block;
    width: 48px;
    height: 4px;
    border: none;
    border-radius: 9999px;
    background: #E5E6EB;
    margin: 0;
    pointer-events: none;
}

.toast.live-goods-toast.dragging .handle-area,
.toast.live-goods-toast.dragging .handle-hr {
    cursor: grabbing;
}

.toast__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
}

.toast__head .title {
    color: var(--color-text-dark);
    font-size: 1.125rem;
    font-weight: 700;
}

.toast__head .title > .num {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.32px;
}

.toast__head .desc {
    display: flex;
    /*height: 1.5625rem;*/
    padding: 0.25rem 0;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #FEE;
    color: var(--color-primary);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.015rem;
}

.toast .live-goods {
    display: flex;
    /*align-items: center;*/
    gap: 0.625rem;
}

.toast .live-goods__thumb {
    width: 80px;
    height: 80px;
}

.toast .live-goods__info {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0.25rem;
    padding-top: 0.25rem;
}

.toast .live-goods__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    color: #424242;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01875rem;
}

.toast .live-goods__price .price-rate {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: -0.021875rem;
}

.toast .live-goods__price .price {
    font-size: 0.875rem;
    color: var(--color-text-dark);
    font-weight: 800;
    letter-spacing: -0.021875rem;
}
/* 상품 옵션 */
.toast.cart-toast {
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.toast.cart-toast .cart-option-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--btn_type_shopbasic_background);
}

.toast.cart-toast .cart-option-mark .tab {
    text-align: center;
    width: 80px;
    height: 24px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    background-color: var(--btn_type_shopbasic_background);
}

.toast.cart-toast .cart-toast__head,
.toast.cart-toast .cart-toast__body,
.toast.cart-toast .cart-toast__foot {
    background-color: #fff;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.toast.cart-toast .cart-toast__head {
    padding-top: 1.25rem;
}

.toast.cart-toast .live-goods {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.938rem;
    border-bottom: 1px solid #e8e8e8;
}

.toast.cart-toast .live-goods__thumb {
    border-radius: 50%;
}

.toast.cart-toast .live-goods__name {
    color: var(--color-text-dark);
    font-size: 0.813rem;
    font-weight: 600;
}

.cart-toast__body {
    padding: 0.875rem 0 0.75rem;
}

select.cart-toast__select {
    display: block;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url('/contents/images/live/option-arrow--bottom.svg') no-repeat right 0.75rem center;
    background-size: 12px 12px;
    color: var(--color-text-dark);
    font-size: 0.75rem;
    font-weight: 400;
    margin-bottom: 0.625rem;
}

select.cart-toast__select::-ms-expand {
    display: none;
}

.cart-toast__option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-dark);
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
}

.cart-toast__delete,
.btn-toast-item-remove {
    color: #666;
    font-size: 0.75rem;
}

.cart-toast__delete img,
.btn-toast-item-remove img {
    vertical-align: middle;
}

.cart-toast__qty-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.813rem;
}

.cart-toast__option-row[hidden],
.cart-toast__qty-row[hidden] {
    display: none !important;
}

.cart-toast__qty-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cart-toast__qty-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem
}

.cart-toast__qty-control button {
    width: 28px;
    height: 28px;
    line-height: 28px;
    color: #fff;
    border-radius: 8px;
    background: #929292;
    font-size: 0.625rem;
    font-weight: 700;
    text-align: center;
}

.cart-toast__qty-control button:disabled {
    background: #d8d8d8;
}

.cart-toast__qty-control input {
    display: flex;
    width: 48px;
    height: 28px;
    text-align: center;
    /*padding: 11px 12px;*/
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D7D6D6;
    background: var(--color-text-light);
}

.cart-toast__line-price {
    color: #111;
    font-size: 0.875rem;
    font-weight: 700;
}

.cart-toast__sum-row {
    border-top: 1px solid var(--color-secondary);
    background: #F8F8F8;
    color: var(--color-text-dark);
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 0.75rem;
}

.cart-toast__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.875rem;
    border-top: 1px solid var(--color-secondary);
    color: #222;
    font-size: 0.8125rem;
}

.cart-toast__total-row b {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

.cart-toast__submit {
    width: 100%;
}

.cart-toast .cart-toast__foot {
    padding-bottom: 1.5rem;
}
.live-wrapper.is-ios .cart-toast .cart-toast__foot {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
/* 판매상품 toast */
#goodsListToast.live-goods-toast {
    padding: 0 1.5rem calc(2rem + env(safe-area-inset-bottom));
}
/*.live-wrapper.is-ios #goodsListToast.live-goods-toast {
    padding: 0 1.5rem calc(2rem + env(safe-area-inset-bottom))
}*/

#goodsListToast.live-goods-toast .toast__head {
    padding-bottom: 0.5rem;
}
/* 담은상품 toast */
#cartListToast .toast__head .title {
    padding-bottom: 0.75rem;
}

#cartListToast.live-goods-toast {
    padding: 0 0 calc(2rem + env(safe-area-inset-bottom));
}
/*.live-wrapper.is-ios #cartListToast.live-goods-toast {
    padding: 0 0 calc(2rem + env(safe-area-inset-bottom));
}*/

#cartListToast.live-goods-toast .toast__head {
    padding: 0 1.5rem;
}

#cartListToast.live-goods-toast .live-goods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 1.5rem 0;
}

#cartListToast.live-goods-toast .live-goods__item {
    display: flex;
    gap: 0.75rem;
}
#cartListToast.live-goods-toast .toast__body {
    padding-bottom: 3.125rem;
}
#cartListToast.live-goods-toast .toast__body .group + .group {
    padding-top: 1.5rem;
}
/* 담은상품&판매상품 toast */
.live-goods-toast .live-goods {
    padding: 0.75rem 0;
}

.live-goods-toast .live-goods + .live-goods {
    border-top: 1px solid #e8e8e8;
}

.live-goods-toast .live-goods .btn {
    position: absolute;
    right: 0;
    bottom: 0;
}
/* 담은상품 toast - 옵션 보기 */
#cartListToast.live-goods-toast .live-goods__option {
    display: flex;
    /*padding: 0.75rem;*/
    flex-direction: column;
    align-self: stretch;
    border-radius: 4px;
    background: #F2F2F2;
}

#cartListToast.live-goods-toast .goods__option-toggle {
    color: var(--color-disabled);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: -0.3px;
    text-align: center;
    padding: 0.5rem 0;
}

#cartListToast.live-goods-toast .goods__option-content {
    display: none;
}

#cartListToast.live-goods-toast .goods__option-content {
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #111;
    border-bottom: 1px solid #E8E8E8;
    letter-spacing: -0.015rem;
    background: #F9F9F9;
}

#cartListToast.live-goods-toast .goods__option-content .title {
    color: #727272;
    font-weight: 400;
}
/* 담은상품 - 묶음배송 + 일반상품(추가) */
#cartListToast.live-goods-toast .group + .group {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    border-top: 8px solid #F2F2F2;
}

#cartListToast.live-goods-toast .bundle-group__title,
#cartListToast.live-goods-toast .normal-group__title {
    display: flex;
    align-items: center;
    color: #222;
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.35px;
}
/* 담은상품 - 묶음배송 */
#cartListToast.live-goods-toast .bundle-group__option {
    display: flex;
    margin: 0 1.5rem 0;
    padding: 0.75rem 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;
    color: var(--color-text-dark);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    background: #F9F9F9;
}

#cartListToast.live-goods-toast .bundle-group__option .title {
    color: #727272;
    font-weight: 400;
}

#cartListToast.live-goods-toast .bundle-group__option .delivery {
    width: 100%;
    text-align: center;
}
    /*#cartListToast.live-goods-toast .bundle-group__option strong {
    color: var(--btn_type_second_background);
}*/

#cartListToast.live-goods-toast .total-wrap {
    display: flex;
    flex-direction: row;
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
    background: #F8F8F8;
    margin: 0 1.5rem 0;
}

#cartListToast.live-goods-toast .total-wrap .total-list + .total-list {
    border-left: 1px solid #ddd;
}

#cartListToast.live-goods-toast .total-list {
    display: flex;
    align-items: center;
    margin: 0.75rem 0;
    flex-direction: column;
    flex: 1 0 0;
    gap: 4px;
}

#cartListToast.live-goods-toast .total-list__text {
    font-size: 0.75rem;
    color: #727272;
}

#cartListToast.live-goods-toast .total-list__price {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-dark);
}

#cartListToast.live-goods-toast .toast__foot {
    padding: 0.5rem 1.5rem 0;
    box-shadow: 0 -8px 12px 0 rgba(0, 0, 0, 0.10);
}

.live-wrapper.goods-list-toast-open .toast-dimd,
.live-wrapper.cart-list-toast-open .toast-dimd {
    display: block;
}

.goods-list-toast-open .toast-dimd {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    z-index: 99;
    pointer-events: none;
}
/* 알림 toast */
.state-toast {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 2.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    transition: none;
}

.state-toast-image {
    display: none;
    position: absolute;
    z-index: 11;
    left: 50%;
    top: -24px;
    transform: translateX(-50%);
    pointer-events: none;
}

.state-toast .toast__head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0;
}

.state-toast .toast__head .title {
    color: var(--color-neutral);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.32px;
}

.state-toast .toast__head .desc {
    color: var(--color-disabled);
    text-align: center;
    font-size: 0.813rem;
    font-weight: 400;
    padding: 0;
    letter-spacing: -0.26px;
    background-color: transparent;
}

.state-toast .toast__foot {
    padding: 1rem 0;
}

.live-wrapper.state-toast-open .state-toast-image { /* 상태toast 상단 아이콘 */
    display: block;
}

.cart-list-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 196px;
    padding: 1rem 0;
    color: #666;
    font-size: 0.875rem;
}
/* modal full screen */
.modal-full-screen {
    display: flex;
    background: rgba(0, 0, 0, 1);
}

.modal-full-screen .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.modal-full-screen .modal-content {
    width: 100%;
    background: transparent;
    padding: 20px 0;
}
/* 방송종료 modal */
.modal-live-end .modal__body {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.modal-live-end .live-end__text-box {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modal-live-end .title {
    font-size: 1.25rem;
    color: var(--color-text-light);
}

.modal-live-end .desc {
    font-size: 0.875rem;
    color: #d8d8d8;
}

.modal-live-end .live-end__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-live-end .live-end__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 64px;
    padding: 0 2.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.28px;
    color: var(--color-text-light);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1A1A1A;
    white-space: nowrap;
}

.modal-live-end .live-end__item > i {
    font-style: normal;
    margin-left: auto;
}
/* 단골등록 정보입력 modal */
.modal-live-entry {
    align-items: center;
    justify-content: center;
}

.modal-live-entry .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100%;
    margin: 0 auto;
}

.modal-live-entry .modal-content {
    width: 100%;
}

.modal-live-entry.modal-live-entry-open {
    display: flex;
}

.live-entry__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.live-entry__head .title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.32px;
    text-align: center;
}

.live-entry__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-live-entry #sms_token_check { /* 인증확인 */
    min-width: 84px;
}

.live-entry__form .phone-grid {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.live-entry__form .phone-token {
    position: relative;
    width: 100%;
}

.live-entry__form #sms-token-comment {
    color: #DC3545;
    text-align: center;
    font-size: 0.813rem;
    font-weight: 400;
    letter-spacing: -0.26px;
}

.live-entry__input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    height: 40px;
    padding: 11px 12px;
    align-items: center;
    gap: 0.25rem;
    align-self: stretch;
    font-size: 0.813rem;
    border-radius: 8px;
    background: #F6F6F6;
    border: 0;
}

.modal-live-entry .btn {
    border-radius: 8px;
    width: 100%;
    font-size: 0.813rem;
}

.modal-live-entry .phone-token .timer {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    padding: 0 0.75rem;
    color: #FF9C00;
    font-size: 0.813rem;
    font-weight: 400;
    letter-spacing: -0.26px;
}

.live-entry__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    width: 100%;
    height: 44px;
    margin-top: 8px;
    margin-bottom: 1rem;
}

.live-wrapper .state-toast-wrap {
    position: absolute;
    width: 100%;
    bottom: 0px;
}

.live-wrapper.state-toast-open .toast {
    position: relative;
}

/*비디오 배경 딤드처리*/
.live-wrapper .live-video-dimmed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 71.24%, rgba(0, 0, 0, 0.60) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 53.51%, rgba(0, 0, 0, 0.80) 100%);
}
/*빅배너*/
.big-banner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: calc(100% - 64px);
}
.big-banner img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.20);
}
#favoriteStatus {
    width: 240px;
    height: 44px;
    color: #fff;
    font-weight: 700;
}
#favoriteStatus .status-red {
    color: #FF1F1F;
}

#btnBigBannerFavorite {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background : #FF2F2F; 
}
#favoriteStatus .favorite-on {
    width: 100%;
    height: 100%;
    background: #222;
    border-radius: 100px;
    align-content: center;
    border: 2px solid #FF2F2F;
}
.big-banner img {
    aspect-ratio: 640 / 420;
    object-fit: cover;
}
.modal-live-end {
    max-width: 640px;
    width: 100%;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}
.modal-live-end .live-end-header__btn {
    position: absolute;
    top: 0.875rem;
    right: 1rem;
}
.modal-live-end  .modal-dialog{
    padding: 0 24px;
}
.modal-live-end .modal__body {
    padding:0px;
}
.live-nickname-set {
    color: #FFF;
    font-size: 14px;
    margin-top: 8px;
    margin-right: 3.75rem;
}
#liveNicknameSetBtn {
    text-decoration-line: underline;
    text-underline-position: under;
}

.live-nickname__input {
    display: flex;
    align-items: flex-start;
    height: 40px;
    padding: 11px 12px;
    align-items: center;
    gap: 0.25rem;
    align-self: stretch;
    font-size: 0.813rem;
    border-radius: 8px;
    background: #F6F6F6;
    border: 0;
    width: 100%;
}
.modal-nickname-set .title{
    padding-top :16px;
}
.modal-nickname-set .desc {
    line-height: 140%;
    padding: 8px 0 16px;
}
.nickname-set-btn-wrap {
    display: flex;
    gap: 8px;
    padding: 16px 0;
}
.nickname-set-btn {
    flex: 1;
    height: 44px;
    border-radius: 100px;
}
/*.nickname-set-btn.btn-close {
    background: #C2B5AE;
    color: #fff;
}*/
.modal-nickname-set .modal-dialog {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modal-nickname-set.modal-nickname-open {
    display: flex;
}
.chat-item--purchase .chat-item__bubble{
    padding:2px 0;
    border:none;
}
#bulkOrderBlockedText .blocked-desc {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
#bulkOrderBlockedText .blocked-btn {
    width: 100%;
    border-radius: 100px;
    background: #E8E8E8;
    height: 2.75rem;
    line-height: 2.75rem;
    text-align: center;
    color: #B8B8B8;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}
/*라이브 대기중 빅배너 노출 시 */
.live-wrapper.live-ready-waiting .live-side-btns,
.live-wrapper.live-ready-waiting .live-chat-input,
.live-wrapper.live-ready-waiting .live-chat,
.live-wrapper.live-ready-waiting .live-nickname-set,
.live-wrapper.live-ready-waiting .live-goods,
.live-wrapper.live-ready-waiting .live-banner {
    display: none;
}

/* 이미지확대 modal */
.modal-goods-images .modal-dialog {
    padding: 0;
    height: 100%;
}
.modal-goods-images .modal-content {
    height: 100%;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.84);
    backdrop-filter: blur(4px);
}
.modal-goods-images .modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px;
}
.modal-goods-images .goods-images-order {
    display: inline-flex;
    height: 32px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #929292;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.14);
}
.modal-goods-images .goods-images-order > b {
    color: #fff;
}
.modal-goods-images .goods-images-close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #424242;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}
.modal-goods-images .modal__body {
    position: relative;
    padding: 0;
    height: calc(100% - 136px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-goods-images .goods-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.modal-goods-images .goods-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(2px);
    z-index: 10;
}

.modal-goods-images .goods-slide-btn.prev-btn {
    left: 16px; 
}

.modal-goods-images .goods-slide-btn.next-btn {
    right: 16px;
}
.modal-goods-images .goods-slide-btn img {
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));
}
#goodsActiveImage {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

/* 확대(zoomed) 상태 */
#goodsActiveImage.zoomed {
    cursor: grab;
}

#goodsActiveImage.zoomed:active {
    cursor: grabbing;
}
.modal-goods-images .goods-images-indicator {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}
.modal-goods-images .goods-images-indicator .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    border-radius: 100px;
    background: #727272;
}
.modal-goods-images .goods-images-indicator .dot.active {
    width: 24px;
    background: #fff;
}
.modal-goods-images .modal__footer {
    padding: 24px 0;
}
/* //이미지확대 modal END */

/* 단골맺기알림 toast */
.favorite-whether-toast {
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
}
.favorite-whether-toast .toast__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.favorite-whether-toast .image-box {
    padding: 10px;
}
.favorite-whether-toast .title {
    color: #222;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.32px;
}
.favorite-whether-toast .desc {
    color: #727272;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: -0.24px;
}
.favorite-whether-toast .toast__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

/*메뉴 토스트팝업*/
.toast.menu-toast {
    padding: 1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
}
.menu-toast .handle-area {
    width: 100%;
    height: 16px;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.font-toast .handle-area {
    width: 100%;
    height:  24px;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.menu-toast .menu-list {
    width: 100%;
}
.menu-toast .menu-list button {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
.live-wrapper.menu-toast-open .toast.menu-toast {
    min-height: 0px;
}
.live-wrapper.font-size-set-toast-open .toast.font-toast {
    min-height: 0px;
}
.live-wrapper.font-size-set-toast-open .toast-backdrop {
    opacity: 1;
    pointer-events: auto;
}
.font-toast__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.font-toast__head .title {
    font-size: 16px;
    font-weight: 600;
}
.font-toast__head .desc {
    font-size: 14px;
    font-weight: 600;
    color: var(--btn_type_basic_bacground);
}

/* 슬라이더 영역 */
.slider-container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.font-icon {
    color: #767676;
    font-weight: 600;
    user-select: none;
}

.font-icon.small {
    font-size: 12px;
}

.font-icon.large {
    font-size: 18px;
}


input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: #e9ecef;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.track-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 7px;
    background-color: var(--btn_type_basic_bacground);
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
    width: 0%;
    transition: width 0.2s ease;
}
.track-fill::after {
    content: '';
    display: block;
    width: 23.43px;
    height: 24px;
    aspect-ratio: 41/42;
    border-radius: 24px;
    border: 1px solid #E8E8E8;
    background: #FFF;
    box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.16);
    position: absolute;
    top: -100%;
    left: 100%;
    transform: translate(-50%, -12%);
}
/* 확인 버튼 */
.confirm-btn {
    width: 100%;
    height: 52px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin: 8px 0;
    text-align: center;
}

.confirm-btn:active {
    background-color: #e02068;
}
:root {
    --chat-font-size: 11px;
}
#statusText {
    font-size: 14px;
}
.chat-item__bubble {
    line-height: 140%;
    font-size: var(--chat-font-size);
    transition: font-size 0.15s ease-out;
    align-items: center;
}
.label--purchase {
    text-wrap: nowrap;
}

#btnShare, #btnFavorite {
    width: 40px;
}
#btnShare img, #btnFavorite img {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
}
.live-side-btns .side-btn__icon {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 10px;
}

.font-toast .track-wrapper {
    position: relative;
    width: 100%;
    height: 6px;
    background-color: #D9D9D9; /* 비활성 트랙 색상 */
    border-radius: 4px;
}
.font-toast .step-dot {
    position: absolute;
    top: 50%;
    width: 9.961px;
    height: 10px;
    border-radius: 10px;
    background: #D9D9D9;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
    z-index: 1;
}
.font-toast .step-dot.is-hidden {
    opacity: 0;
    visibility: hidden;
}
.font-toast #sizeRange {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 20px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

#goodsImagesModal{
    z-index:100;  /* 상품리스트 팝업창보다 위에 */
}

/*라이브 채팅 차단 시 채팅 입력창 비활성화*/
.live-chat-input.chat-disabled #chatInput,
.live-chat-input.chat-disabled #chatInputProxy {
    pointer-events: none;
}