/* 공통 사용 */
:root {
    --inner-width: 1204px;
    --live-bg: #F3FAFF;
}
.wrapper {position: relative; min-width: var(--inner-width);}
.contents {position: relative; width: 100%; min-width: 1300px;}
header.scroll, .right_fix_menu, .top_fix_head {display: none;}

/* 라이브 미리보기 */
.compuzone-live {display: flex; flex-direction: column; gap: 30px; background: var(--live-bg); padding: 80px 0 100px;}
.compuzone-live > div {width: var(--inner-width); margin: 0 auto;}
.compuzone-live * {box-sizing: border-box; line-height: 1.5;}

/* 라이브 미리보기 페이지 상단 영역 */
.live-top {display: flex; justify-content: space-between; align-items: flex-end;}
.live-top .tag-wrap {display: flex; align-items: center; gap: 8px; padding-bottom: 4px;}
.live-top .btn-wrap {position: relative; display: flex; align-items: center; gap: 4px;}
.live-top .btn-wrap > button {display: flex; justify-content: center; align-items: center; height: 26px; padding: 5px 10px; background: var(--coFF); color: var(--co1C); border: 1px solid var(--co1C); border-radius: 30px; font-size: 12px;}
.live-top .btn-wrap > button:hover, .live-top .btn-wrap> button.on {background: var(--co1C); color: var(--coFF);}
.live-top .btn-wrap .share-btn::after {content: ''; display: inline-block; width: 16px; height: 16px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/1C8FED/icon_line_share_24.svg") center / 16px no-repeat;}
.live-top .btn-wrap button.share-btn:hover::after, .live-top .btn-wrap button.share-btn.on::after {background-image: url("//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_share_24.svg");}

/* 공유하기 레이어*/
#share_box {position: absolute; right: 0; top: 42px; z-index: 10;}
.layer_popup .share_inner .lst {display: flex; flex-wrap: wrap; gap: 36px;} 
.layer_popup .share_inner .lst li {width: 60px; text-align: center; } 
.layer_popup .share_inner .lst li button {background: transparent;}
.layer_popup .share_inner .lst li .share i {display: block; width: 100%; color: #6C6C6C; white-space: nowrap; font-family: '맑은고딕'; font-style: normal; font-size: 13px; } 
.layer_popup .share_inner .lst li .share i::before {display: block!important; margin: 0 auto; margin-bottom: 7px; content: ""; width: 60px; height: 60px;} 
.layer_popup .share_inner .lst li .share i.kakao::before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_kakao_24.png') center center/cover no-repeat;} 
.layer_popup .share_inner .lst li .share i.facebook::before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_facebook_24.png') center center/cover no-repeat;} 
.layer_popup .share_inner .lst li .share i.twitter::before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_x_24.png') center center/cover no-repeat;} 
.layer_popup .share_inner .lst li .share i.url::before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_url_24.png') center center/cover no-repeat;} 

/* 라이브 미리보기 페이지 컨텐츠 영역 */
.live-contents {position: relative; height: 100%; display: flex; justify-content: space-between; gap: 60px;}
.live-contents .left-area {position: relative; min-height: calc(100vh - 298px);}
.live-contents .right-area {width: calc(100% - 460px);}

.live-container {position: sticky; left: 0; top: 30px; width: 400px; height: 696px;}
.live-container .thumbnail {position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 20px; overflow: hidden;}
.live-container .thumbnail>img {width: 100%; height: 100%; object-fit: cover;}
.live-container .thumbnail .count-box {display: flex; flex-direction: column; gap: 4px; position: absolute; left: 50%; top: 80px; transform: translateX(-50%); text-align: center; z-index: 1;}
.live-container .thumbnail::after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 400px; height: 400px; background: linear-gradient(to bottom, #163ECA 0%, transparent 100%); opacity: 0.6;}

.live-info-list>li {display: flex; gap: 30px; padding: 20px 0;}
.live-info-list>li:first-child {align-items: center;}
.live-info-list>li:not(:first-child) {border-top: 1px solid var(--coD8);}
.live-info-list>li>p {min-width: 80px;}
.live-info-list .list-cont {width: 100%; font-family: 'noto-R'; font-size: 14px; color: var(--co6C);}

.coupon-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
.coupon-list>li {position: relative; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 80px; padding: 20px; background: var(--co1C); border-radius: 10px; overflow: hidden;}
.coupon-list>li::before {content: ''; width: 16px; height: 16px; background: var(--live-bg); position: absolute; top: 50%; left: -8px; transform: translateY(-50%); border-radius: 50%;}
.coupon-list:not(:has(li + li)) {gap: 0;}
.coupon-list>li.type-wide, .coupon-list>li:only-child {grid-column: span 2;}
.coupon-list .name-box {width: 203px; word-break: keep-all; display: flex; flex-direction: column;}
.coupon-list .name-box > span {color: #e8e8e8;}
.coupon-list>li.type-wide .name-box, .coupon-list>li:only-child .name-box {width: max-content;}
.coupon-btn {width: calc(100% - 218px); max-width: 54px; height: 42px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; background: transparent; color: var(--coFF);}
.coupon-btn::before {content: ''; display: block; width: 20px; height: 20px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_download_24.svg") center / 20px no-repeat; flex-shrink: 0;}

.benefit-wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
.benefit-wrap .benefit {padding: 20px; background: var(--coFF); border-radius: 10px; overflow: hidden;}
.benefit.type-wide, .benefit-wrap .benefit:only-child {grid-column: span 2;}
.benefit-wrap .benefit dd {margin-top: 4px; padding-left: 6px; position: relative;}
.benefit-wrap .benefit dd::before {content: ''; display: block; position: absolute; left: 0; top: 9px; width: 2px; height: 2px; background: var(--co6C);}

.live-info-list .product-wrap {padding: 20px; background: var(--coFF); border-radius: 10px; overflow: hidden;}
.live-info-list .product-list {display: flex; flex-direction: column; gap: 16px;}
.live-info-list .product-list>li>a {display: flex; gap: 16px; width: 100%;}
.live-info-list .product-list .img-box {width: 90px; height: 90px; position: relative; border-radius: 5px; overflow: hidden; flex-shrink: 0;}
.live-info-list .product-list .img-box::after {content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.02);}
.live-info-list .product-list .img-box>img {width: 100%; height: 100%;}
.live-info-list .product-list .name {margin-bottom: 8px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
.live-info-list .product-list .price-wrap {display: flex; align-items: center; gap: 8px;}
.live-info-list .product-list .discount {margin-right: 8px;}
.live-info-list .product-list .original {text-decoration: line-through;}

/* snackbar UI 컴포넌트 임시 추가 */
.snackbar {position: absolute; left: 50%; top: 100px; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: fit-content; max-width: 1030px; height: 40px; padding: 0 40px; border-radius: 10px; background: rgba(0,0,0,0.8); opacity: 0; transition: 0.5s;}
.snackbar.on {opacity: 1; top: 80px;}