/* 공통 사용 css */
:root {
    --inner-width: 750px;
    --max-width: calc(100% - 32px);
    --point-bg : #120626;
}

a:visited {color: inherit;}

/* flex */
.flex {display: flex;}
.justify-center {justify-content: center;}
.space-between {justify-content: space-between;}
.align-center {align-items: center;}
.align-start {align-items: flex-start;}
.flex-col {display: flex; flex-direction: column;}

/* grid */
.grid {display: grid;}
.col2 {grid-template-columns: repeat(2, 1fr);}

/* gap - spacing */
.gap4 {gap: 4px;}
.gap8 {gap: 8px;}
.gap10 {gap: 10px;}
.gap12 {gap: 12px;}
.gap16 {gap: 16px;}
.gap20 {gap: 20px;}

/* 텍스트 관련 */
.ellipsis {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; word-break: break-all;}
.ellipsis.line2 {-webkit-line-clamp: 2;}
.ellipsis.line3 {-webkit-line-clamp: 3;}
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}

/* 뱃지 관련 */
.my-recom .batF1 {background: var(--coFF);}

/* 그라데이션 박스 */
.my-recom .box {width: 100%; max-width: var(--max-width); position: relative; }
.my-recom .box::before { content: ''; position: absolute; inset: 0; border-radius: 10px; padding: 1px;  -webkit-mask:  linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor;mask-composite: exclude; z-index: -1;}
.my-recom .box1 {padding: 20px; background: rgb(0, 0, 0,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);  display: flex; flex-direction: column; gap: 12px; border-radius: 10px;}
.my-recom .box1::before {background: linear-gradient(270deg, var(--co1C) 0%, var(--co84) 100%);}
.my-recom .box2 {height: 40px; background: var(--coFF); padding: 0 16px; border-radius: 5px;}
.my-recom .box2::before {background: linear-gradient(90deg, var(--co1C) 0%, var(--co84) 100%); z-index: unset;  border-radius: 5px;}
.my-recom .box2 span {flex-shrink: 0;}

/* 아이콘 */
.c-icon20 {display: block; width: 20px; height: 20px; background: url("//image5.compuzone.co.kr/img/images/my_recom/icon1.png") center / contain no-repeat; flex-shrink: 0;}
.cate-search24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_category_search.svg") center / contain no-repeat; flex-shrink: 0;}
.monitor-chart24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_monitor_chart.svg") center / contain no-repeat; flex-shrink: 0;}
.search-chart24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_search_chart.svg") center / contain no-repeat; flex-shrink: 0;}
.hot24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_badge_hot.svg") center / contain no-repeat;}

/* 컨텐츠 공통 */
.my-recom * {letter-spacing: -0.35px; line-height: 1.5; box-sizing: border-box;}
.my-recom {background: var(--point-bg);}
.my-recom .section {width: 100%; position: relative; overflow: hidden;}
.my-recom .section .inner {position: relative; width: 100%; max-width: var(--inner-width); margin: 0 auto; height: 100%; padding: 40px 0;}
.my-recom .section h3 {margin-bottom: 20px; padding: 0 16px;}
.my-recom .section h3:has(span.ellipsis) {display: flex; justify-content: center; gap: 4px;}
.my-recom .section h3 span.ellipsis {max-width:calc(100% - 218px);}
.my-recom .pro_inner .probox .price_line p {margin-bottom: 0;}
.my-recom video {width: 100%; height: 100%; display: block;}

/* 제품 이미지 박스 */
.my-recom .circle-img-box {width: 24px; height: 24px; background: var(--coF9); overflow: hidden; border-radius: 50%; flex-shrink: 0;}
.my-recom .circle-img-box img {width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply;}
.my-recom .img-box {position: relative; border-radius: 5px; overflow: hidden;}
.my-recom .img-box > img {width: 100%; height: 100%;}
.my-recom .img-box::after {content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.06)}
.my-recom .section:nth-child(even) .prod-img::before{display: none;}

/*컨텐츠 bg */
.my-recom .section:nth-child(odd) {background: var(--coFF);}
.my-recom .section:nth-child(even) {background: #E8E6EB;}
.my-recom .section:nth-child(even)::before {content: ''; width: 100%; height: 100%; background: url("//image5.compuzone.co.kr/img/images/my_recom/m-bg-obj.png") center top / cover no-repeat; position: absolute; top: 0; left:0;}

.my-recom .section:nth-child(2) { clip-path: inset(0 calc((100% - var(--inner-width)) / 2) 0 calc((100% - var(--inner-width)) / 2)); -webkit-clip-path: inset(0 calc((100% - var(--inner-width)) / 2) 0 calc((100% - var(--inner-width)) / 2)); transition: all .6s ease;}
.my-recom .section:nth-child(2).on {clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0);}

/* 비주얼 섹션 */
.my-recom .section.visual-sc { background: var(--point-bg);}
.my-recom .visual-sc .inner {min-height: 540px; padding: 150px 0 30px; display: flex; flex-direction: column; justify-content: space-between;}
.visual-sc .motion {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%)  scale(0.6); animation: maincircleMove 1s ease-in both 0.8s;} 
@keyframes maincircleMove {
    0% {top: 80%; transform: translateX(-50%) scale(0.6);}
    100% {top: 0;transform: translateX(-50%) scale(1);}
}
@media screen and (max-width: 540px) {
    @keyframes maincircleMove {
        0% {top: 80%; transform: translateX(-50%) scale(0.6);}
        100% {top: 0;transform: translateX(-50%) scale(1.32);}
    }
}

.visual-sc .circle { position: absolute; --circle-size: 800px; width: var(--circle-size); height: var(--circle-size); animation: rotateAnim 6s infinite linear; transition: all 8s; background-color: 1.7s; opacity: 0.4; filter: blur(12px);}
.visual-sc .circle1 {bottom: -550px; right: -500px; background: radial-gradient(circle, rgba(186, 42, 231, 0.4) 0%, rgb(189 0 255 / 0.2) 80%, rgba(186, 42, 231, 1) 100%)}
.visual-sc .circle2 {bottom: -550px; left: -500px; background: radial-gradient(circle, rgba(116, 78, 254, 0.4) 0%, rgba(55, 0, 255, 0.4) 30%, rgba(55, 0, 255, 0.2) 55%, rgba(116, 78, 254, 0.1) 100%);}

@keyframes rotateAnim {
    0% {transform: rotate(0); border-radius: 30%;}
    50% { border-radius: 45%;}
    100% {transform: rotate(360deg); border-radius: 30%;}
}

.visual-sc .cont-wrap {width: 100%; gap: 20px; align-items: center;}
.visual-sc .scroll i:first-child {animation: scrollMove2 1.4s infinite both;}
.visual-sc .scroll i:last-child {animation: scrollMove 1.4s infinite both;}
.visual-sc .swiper-container {width: 100%; mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 50%, #000 95%, transparent); margin-top: 4px;}
.visual-sc .swiper-container li {width: max-content; max-width: 170px; height: 32px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border-radius: 28px; border: 1px solid var(--coD8);}
.visual-sc .swiper-container p {text-align: center;}
.visual-sc .swiper-container li:first-child {margin-left: 6px;}
.visual-sc .swiper-container li:last-child {margin-right: 6px;}

@keyframes scrollMove {
    0% {transform: translateY(-6px); opacity: 1;}
    70% {opacity: 1;}
    100% {transform: translateY(0px); opacity: 0;}
}
@keyframes scrollMove2 {
    0% {transform: translateY(-12px); opacity: 1;}
    70% {opacity: 1;}
    100% {transform: translateY(12px);; opacity: 0;}
}
.visual-sc .cont-wrap .exclamation16_D8 {display: inline-block; vertical-align: sub;}

.speech_bubble {position: absolute; width: 268px; background: var(--coFF); border: 1px solid var(--co3A); left: calc(50% + 8px); top: 42px; transform: translateX(-50%);  display: none; border-radius: 5px; padding: 12px; gap: 8px; z-index: 3;}
.speech_bubble.on {display: flex;}
.speech_bubble p {letter-spacing: -0.33px; word-break: keep-all;}

/* 스와이퍼 공통 */
.basic-swiper {width: 100%; position: relative; }
.basic-swiper .swiper-container {padding: 0 16px;}
.basic-swiper li{  width: calc((100% - 72px) / 2); max-width: 256px;}
.basic-swiper li a {width: 100%;}
.basic-swiper .prod-price {margin-top: 0;}

.my-recom .swiper-pagination-progressbar {width: var(--max-width);  height: 1px !important; background:var(--coD8); opacity: 1; position: static; margin: 20px auto 0; } 
.my-recom .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:var(--co1A);} 

/* 인기급상승 키워드 아코디언 */
.keyword-sc .accordion {width: var(--max-width); overflow: hidden;}
.keyword-sc .accordion > ul {border-bottom: 1px solid var(--coD8); }
.keyword-sc .accordion > ul > li  {width: 100%; height: 40px; overflow: hidden; border-top: 1px solid var(--coD8); transition: all .3s;}
.keyword-sc .accordion > ul > li > a {width: 100%; height: 40px; padding: 0 20px;}
.keyword-sc .basic-swiper .swiper-container {padding: 0 20px;}
.keyword-sc .basic-swiper li {width: calc((100% - 32px) / 2);}
.keyword-sc .basic-swiper .swiper-pagination-progressbar {width: calc(100% - 40px);}
.keyword-sc .accordion ul > li.on {border-top: 1px solid var(--co1A); background: var(--coF9);}
.keyword-sc .accordion li.on .down20_6C {transform: rotate(180deg);}
.keyword-sc .accordion li.on .ranking span {font-weight: bold;}

/* 한 달 써 본 구매자가 추천해요 */
.review-sc .basic-swiper .swiper-container {padding: 0; width: var(--max-width); margin: 0 auto;}
.review-sc .basic-swiper li {width: 100%; max-width: unset;}
.review-sc .swiper-slide li {width: 100%;  border: 1px solid var(--coD8);
border-radius: 10px; overflow: hidden;}
.review-sc .swiper-slide a > div {padding: 20px; background: var(--coFF);}
.review-sc .review-line {display: flex; gap: 16px;}
.review-sc .review-line > span {position: relative;}
.review-sc .review-line > span::before {content: ''; width: 1px; height: 12px; background: var(--coF2); top: 50%;  left: -8px; transform: translateY(-50%); position: absolute;}
.review-sc .img-box {width: 83px; flex-shrink: 0;}
.review-sc .swiper-slide .info-box {height: 40px; padding: 0px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--coF9);}
.review-sc .info-box > div {flex-shrink: 0;}

/* 최근 잘나가는 인기 아이템 & 딜러고객님을 위한 파격할인 */
.hot-item-sc .basic-swiper ul, .dealer-sc .basic-swiper ul {width: calc(100% - 4px);}
.hot-item-sc .basic-swiper li, .dealer-sc .basic-swiper li {width: 100%; max-width: unset;}
.num-badge {min-width: 29px; height: 25px; padding: 0 8px; position: absolute; top: 8px; left: 8px; background: var(--co1A); color: var(--coFF); display: flex; align-items: center; justify-content: center; border-radius: 5px;} 
.hot-item-sc .swiper-slide li, .dealer-sc .swiper-slide li{border: 1px solid var(--coD8); border-radius: 10px; overflow: hidden;}
.hot-item-sc .img-box, .dealer-sc .img-box {width: 100px; height: 100px; flex-shrink: 0; border-radius: 0;}
.hot-item-sc .info-box, .dealer-sc .info-box {width: 100%; padding: 12px; background: var(--coFF); display: flex; flex-direction: column; gap: 8px;}

/* 내 취향 PICK */
.pick-sc .pick-tit {display: flex; flex-direction: column; gap: 4px; width: var(--max-width); margin: 0 auto 20px;}
.pick-sc .pick-tit > div > div {margin-left: -6px;}
.pick-sc .motion-logo {width: 30px; height: 30px; position: relative; mix-blend-mode: darken;} 
.pick-sc .motion-logo::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("//image5.compuzone.co.kr/img/images/my_recom/icon2.png") center/contain no-repeat;}

/* 다른 추천상품보기 버튼 */
.round-btn {width: var(--max-width); height: 40px; display: flex; align-items: center; justify-content: center; gap:4px; background: var(--coFF); border: 1px solid var(--coD8); border-radius: 25px; margin: 4px auto 0;}
.round-btn span { letter-spacing: 1.4px;}

/* 서둘러요! 곧 종료되는 이벤트 */
.evt-sc .evt-swiper .swiper-container {position: relative; padding: 0 16px;}
.evt-sc .swiper-slide {width: 100%; max-width: unset;; width: calc(100% - 12px);}
.evt-sc .item { border-radius: 15px; border: 1px solid var(--coD8); overflow: hidden;}
.evt-sc .bg-img {width: 100%; height: 160px; filter: blur(10px); position: absolute; top: 0; left: 0; z-index: -1;}
.evt-sc .bg-img img {width: 100%; height: 100%;  object-fit: cover; transform: scale(1.3);}
.evt-sc .bg-img::before {content: ''; width: 100%; height: 100%;  position: absolute; top: 0; left: 0; background: rgb(0, 0, 0,0.5); z-index: 1;}
.evt-sc .evt-box {width: 100%; position: relative; padding: 20px; display: flex; gap: 12px; align-items: center;}
.evt-sc .evt-box .evt-img {width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: block;}
.evt-sc .evt-box .evt-img img {width: 100%; height: auto;}
.evt-sc .blue-bat {display: flex; align-items: center; justify-content: center; width: max-content; height: 24px; border-radius: 5px; background: var(--co0D); font-size: 12px; font-family: 'noto-M'; font-weight: normal; color: var(--coFF); padding: 0 8px; box-sizing: border-box;}
.evt-sc .prod-list {background: var(--coFF); padding: 20px; display: flex; flex-direction: column; gap: 8px;}
.evt-sc .prod-list .img-box {width: 80px; height: 80px; flex-shrink: 0;}
.evt-sc .prod-list .txt-box {display: flex; flex-direction: column; gap: 8px;}