/* °øÅë */
:root {
    --inner-width: 750px;
}

.compuzone-live * {letter-spacing: -0.4px; line-height: 1.5; box-sizing: border-box;}
.compuzone-live .btn_M {line-height: 1;}

/* ¶óÀ̺ê Çì´õ */
.live-top {position: fixed; left: 0; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 48px; padding: 12px 16px; background: var(--coFF); border-bottom: 1px solid #e8e8e8;}
.live-top > button {width: 24px; height: 24px; background-repeat: no-repeat; background-size: 24px; background-position: center; text-indent: -9999px; background-color: transparent; cursor: pointer;}
.live-top .back-btn {background-image: url("//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_before_24.svg");}
.live-top .share-btn {background-image: url("//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_share_24.svg");}

/* ¶óÀ̺ê ÄÁÅÙÃ÷ */
.live-contents  {width: 100%; max-width: 750px; margin: 0 auto; padding-top: 48px;}

.live-container {width: 100%; aspect-ratio: 360 / 260; overflow: hidden; position: relative;}
.live-container::after {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(to bottom, transparent 0%, #000 100%); opacity: 0.5; pointer-events: none;}
.live-container>a {display: block; width: 100%; height: auto;}
.live-container img {width: 100%; height: 100%; position: relative; transform: translateY(-35%);}
.live-container .count-box {width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.live-container .count-box span {display: inline-block; margin-right: 8px;}

.live-info-area {display: flex; flex-direction: column; gap: 40px; padding: 0 16px 40px; background: var(--coFF); position: relative;}
.live-info-area::before {content: ''; display: block; position: absolute; left: 0; top: -24px; width: 100%; height: 100px; border-radius: 10px 10px 0 0; background: var(--coFF);}
.live-inner {position: relative;}
.live-inner .inner-tit {padding-bottom: 12px;}
.live-title {display: flex; flex-direction: column; gap: 8px; align-items: center;}
.live-title .tag-wrap {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;}
.live-title .tag-wrap > span {font-size: 14px;}
.live-title > h3 {text-align: center;}

.live-info-area .btn-wrap {margin-top: 16px;}

.coupon-list {display: flex; flex-direction: column; gap: 8px; margin-top: 16px;}
.coupon-list>li {position: relative; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 10px; overflow: hidden;}
.coupon-list>li::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--coD8); border-radius: 10px; box-sizing: border-box; pointer-events: none;}
.coupon-list>li::after {content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); display: block; width: 16px; height: 16px; background: var(--coFF); border: 1px solid var(--coD8); border-radius: 50%;}
.coupon-list .name-box {width: calc(100% - 76px); word-break: keep-all; display: flex; flex-direction: column; gap: 4px;}
.coupon-list .coupon-btn {width: 28px; height: 28px; background: var(--coFF) url("//image5.compuzone.co.kr/img/images/svg_icon/6C6C6C/icon_line_download_24.svg") center / contain no-repeat; text-indent: -9999px; cursor: pointer;}

.benefit-wrap {display: flex; flex-direction: column; gap: 8px;}
.benefit-wrap .benefit {padding: 16px; background: var(--coF9); border-radius: 10px; overflow: hidden;}
.benefit-wrap .benefit dt {margin-bottom: 4px;}
.benefit-wrap .benefit dd {padding-left: 6px; position: relative;}
.benefit-wrap .benefit dd::before {content: ''; display: block; width: 2px; height: 2px; background: var(--co6C); position: absolute; left: 0; top: 10px;}
.benefit-wrap .benefit dd + dd {margin-top: 4px;}

.live-inner .product-list {display: flex; flex-direction: column; gap: 8px;}
.live-inner .product-list > li> a {display: flex; gap: 16px;}
.live-inner .product-list .img-box {width: 90px; height: 90px; position: relative; border-radius: 10px; overflow: hidden; flex-shrink: 0;}
.live-inner .product-list .img-box::after {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.02);}
.live-inner .product-list .img-box > img {width: 100%; height: 100%;}
.live-inner .product-list .price-wrap {display: flex; gap: 4px; margin-top: 8px;}
.live-inner .product-list .name {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
.live-inner .product-list .total>span {margin-right: 2px;}

.live-notice {padding: 20px 16px; background: var(--coF9);}
.live-notice > p {margin-bottom: 12px;}
.live-notice .list-cont {font-family: 'noto-R'; font-size: 13px; color: var(--co3A);}