/* 페이지 변수 */
:root {
    --inner-width: 750px;
    --border-color: var(--coD8);
}

/* 페이지 공통 CSS */

/* display */
.block {display: block;}
.inline-block {display: inline-block;}
.inline {display: inline;}

/* flex */
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.justify-center {justify-content: center;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.space-between {justify-content: space-between;}
.space-around {justify-content: space-around;}
.space-evenly {justify-content: space-evenly;}
.align-center {align-items: center;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.baseline {align-items: baseline;}
.flex-row {display: flex; flex-direction: row;}
.flex-col {display: flex; flex-direction: column;}
.flex-wrap {display: flex; flex-wrap: wrap;}

/* grid */
.grid {display: grid;}
.col2 {grid-template-columns: repeat(2, 1fr);}
.col3 {grid-template-columns: repeat(3, 1fr);}
.col4 {grid-template-columns: repeat(4, 1fr);}
.col5 {grid-template-columns: repeat(5, 1fr);}
.col6 {grid-template-columns: repeat(6, 1fr);}
.row2 {grid-template-rows: repeat(2, 1fr);}
.row3 {grid-template-rows: repeat(3, 1fr);}
.row4 {grid-template-rows: repeat(4, 1fr);}
.row5 {grid-template-rows: repeat(5, 1fr);}
.row6 {grid-template-rows: repeat(6, 1fr);}

/* gap - spacing */
.gap4 {gap: 4px;}
.gap8 {gap: 8px;}
.gap10 {gap: 10px;}
.gap12 {gap: 12px;}
.gap16 {gap: 16px;}
.gap20 {gap: 20px;}
.gap24 {gap: 24px;}
.gap30 {gap: 30px;}
.gap40 {gap: 40px;}
.gap48 {gap: 48px;}
.gap56 {gap: 56px;}
.gap80 {gap: 80px;}

/* 텍스트 */
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.bold {font-weight: 700;}
.break-all {word-break: break-all;}
.keep-all {word-break: keep-all;}
.ellipsis {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.ellipsis.line2 {-webkit-line-clamp: 2;}
.ellipsis.line3 {-webkit-line-clamp: 3;}
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}
.underline {text-decoration: underline;}

/* 컨텐츠 공통 */
body.on {overflow: hidden;}
.new-products {overflow: hidden;}
.new-products * {letter-spacing: -0.4px; line-height: 1.5; box-sizing: border-box;}
.new-products a:active {background: transparent;}
.new-products .section {width: 100%; margin: 0 auto; position: relative; background: var(--coFF); border-radius: 20px; z-index: 1; overflow: hidden;}
.new-products .section .inner {position: relative; width: 100%; max-width: var(--inner-width); margin: 0 auto; height: 100%; padding: 40px 16px;}
.new-products .section .inner.full {padding: 20px 0;}
.new-products .section-tit {font-family: 'noto-B'; font-size: 18px; font-weight: normal;}
.inner.full > .section-tit {max-width: var(--inner-width); margin: 0 auto; padding: 16px; padding-top: 0;}
.new-products .prod-price {line-height: 1; margin-top: 0;}

/* 스와이퍼 공통 */
.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;}

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

.chipbtn.swiper-container ul {gap: 0;}
.chipbtn.swiper-container ul li {display: block; width: auto;}

/* 배지 - 공통으로 옮기기 */
.bat1C_fill {display: flex; align-items: center; justify-content: center; width: max-content; height: 26px; padding: 0 10px; background: var(--co1C); color: var(--coFF); border-radius: 13px; font-weight: 700; font-size: 12px; font-family: 'noto-B';}

/* open-wrapper */
.open-wrapper {position: relative; z-index: 5; background: #fff; margin-top: 210px; border-radius: 20px 20px 0 0; overflow: hidden;}
.new-products .top-component .section .inner {padding: 20px 16px;}
.new-products .top-component .section .inner.full {padding: 20px 0;}
.new-products .top-component .section .inner {padding: 20px 16px;}
.new-products .mid-component .section .inner {padding: 40px 0;}
.new-products .btm-component .section .inner.full {padding: 0;}
.top-component {position: relative;}
.mid-component, .btm-component {margin-top: 0; transition: margin 0.5s;}
.mid-component.active, .btm-component.active {margin-top: 60px;}
.section-wrap.mid-component .section:nth-child(odd) {background: var(--coF9); border: 2px solid var(--coFF);}
.section-wrap.mid-component .section:nth-child(odd) .prod-img::before {display: none;}
.section-wrap.mid-component .section:nth-child(even) {background: var(--coFF);} 

/* 키비주얼 */
.new-products .section.sc-intro {height: 304px; position: absolute; border-radius: 0;}
.new-products .section.sc-intro .inner {overflow: hidden; padding: 0;}

.sc-intro .title {position: relative; z-index: 2; padding-top: 40px;}
.sc-intro .title > span {opacity: 0; transform: translateY(15px); animation: fadeUp .5s .3s ease-in-out forwards;}
.sc-intro .title > p {opacity: 0; transform: translateY(15px); animation: fadeUp .5s .6s ease-in-out forwards;}

.sc-intro .bg-box {position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100%; min-width: 320px; max-width: 750px; height: 100%; overflow: hidden; background: var(--coFF);}
.sc-intro .bg-box>span {position: absolute;}
.sc-intro .obj1 {left: -230px; bottom: -310px; animation: rotate 5s ease-in-out infinite;}
.sc-intro .obj2 {left: 160px; bottom: -140px; animation: rotate2 4s ease-in-out infinite;}
.sc-intro .obj3 {left: 230px; bottom: -350px; animation: rotate 5s ease-in-out infinite;}
.sc-intro .obj4 {left: 340px; bottom: -120px; animation: rotate2 3s ease-in-out infinite;}
.sc-intro .obj5 {left: 20px;bottom: -120px; animation: rotate 8s ease-in-out infinite;}
.sc-intro .bg-front {left: 50%; top: 50%; transform: translate(-50%, -50%); mix-blend-mode: overlay;}

.sc-intro .obj-wrap {position: absolute; width: 366px; height: 194px; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1;}
.sc-intro .obj-wrap>span {position: absolute;}
.sc-intro .box1 {left: 34px;  top: 29px; transform: rotate(-8deg); z-index: 1; transition: 0.5s ease-in-out; transition-delay: 0.2s;}
.sc-intro .box2 {left: 100px; top: 19px; transform: rotate(6deg); transition: 0.5s ease-in-out; transition-delay: 0.3s;}
.sc-intro .box3 {left: 163px; top: 33px; transform: rotate(-8deg); z-index: 1; transition: 0.5s ease-in-out; transition-delay: 0.4s;}
.sc-intro .box4 {left: 230px; top: 20px; transform: rotate(4deg); transition: 0.5s ease-in-out; transition-delay: 0.5s;}

.sc-intro .obj-wrap.on {bottom: 0;}
.sc-intro .obj-wrap.on .box1 {top: 19px; transform: rotate(-6deg);}
.sc-intro .obj-wrap.on .box2 {top: 9px; transform: rotate(3deg);}
.sc-intro .obj-wrap.on .box3 {top: 23px; transform: rotate(-3deg);}
.sc-intro .obj-wrap.on .box4 {top: 10px; transform: rotate(10deg);}

.sc-intro .bubble-wrap {position: absolute; width: 366px; height: 194px; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1;}
.sc-intro .bubble-wrap>span {position: absolute;}
.sc-intro .bubble-wrap>span>img {width: 100%; height: 100%;}
.sc-intro .bubble1 {width: 90px; left: 25px; top: 9px; transform: rotate(4deg);}
.sc-intro .bubble2 {width: 100px; right: 11px; top: 44px; transform: rotate(-4deg);}
.sc-intro .bubble1>img {transform: scale(0); animation: scale 0.4s 1.1s ease-in-out forwards, float 2s 1.8s ease-in-out infinite;}
.sc-intro .bubble2>img {transform: scale(0); animation: scale 0.4s 1.2s ease-in-out forwards, float 2s 2s ease-in-out infinite;}

/* 따끈따끈 신상품 모아보기 */
.new-arrivals {display: flex; flex-direction: column; gap: 40px;}
.new-arrivals .list-item {display: flex; flex-direction: column; gap: 16px;}
.list-item .top-area {padding: 16px; padding-bottom: 12px; position: relative; display: flex; justify-content: space-between; gap: 4px; flex-wrap: wrap; border-radius: 10px; overflow: hidden;}
.list-item .txt-box {display: flex; flex-direction: column; gap: 4px;}
.list-item .txt-box span {display: block;}
.list-item .img-box {flex-shrink: 0; width: 113px; height: 60px; margin-top: auto; margin-left: auto;}
.list-item .img-box>img {width: 100%; height: 100%;}
.list-item.list1 .top-area {background: url("//image5.compuzone.co.kr/img/images/new_products/bg-list01.png") center / cover no-repeat;}
.list-item.list2 .top-area {background: url("//image5.compuzone.co.kr/img/images/new_products/bg-list02.png") center / cover no-repeat;}
.list-item.list3 .top-area {background: url("//image5.compuzone.co.kr/img/images/new_products/bg-list03.png") center / cover no-repeat;}
.new-arrivals .prod-box .prod-name {margin-top: 0;}
.new-arrivals .prod-box .prod-img {width: 100%; border-radius: 10px; overflow: hidden; position: relative;}
.new-arrivals .prod-box .prod-img::after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.02);}
.new-arrivals .prod-box .prod-img > img {width: 100%; height: 100%;}

/* 맞춤추천 신규 상품 */
.sc-personalized {padding-bottom: 16px;}
.setting-recom {max-width: var(--inner-width); padding: 0 16px; display: flex; justify-content: space-between; margin: 0 auto;}
.setting-recom a {width: 46px; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 40px; overflow: hidden; background: var(--coFF); border: 1px solid var(--co94); flex-shrink: 0;}
.recom-product-wrap {margin-top: 16px;}
.new-products .chipbtn {margin-bottom: 16px; padding: 0 16px;}
.new-products .chipbtn::after {content: ''; position: absolute; z-index: 1; right: 0; top: 0; width: 40px; height: 100%; background: linear-gradient(to right, transparent 0%, var(--coFF) 100%)}

/* 스크롤 토글 박스 영역 */
.sc-interlude {width: 100%; height: 200px; margin-top: -69px; position: absolute; display: flex; justify-content: center; align-items: center;}
.sc-interlude.bg-blue {background: #D4F3FE;}
.sc-interlude.bg-green {background: #D6F5D6;}
.sc-interlude.on {display: none;}
.interlude-box {display: flex; align-items: center; gap: 4px; position: relative;}
.interlude-box::before {content: ''; display: block; position: absolute; width: 496px; height: 110px; background: url("//image5.compuzone.co.kr/img/images/new_products/confetti.png") center / contain no-repeat; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.3); opacity: 0; transition: .3s ease-in-out; pointer-events: none;}
.bg-green .interlude-box::before {transform: translate(-50%, -50%) scale(0.3) rotate(180deg);}
.sc-interlude.active .interlude-box::before {transform: translate(-50%, -50%) scale(1); opacity: 1;}
.sc-interlude.bg-green.active .interlude-box::before {transform: translate(-50%, -50%) scale(1) rotate(180deg);}
.sc-interlude.type2.bg-blue {margin-top: -16px; height: 100px;}
.sc-interlude.type2.bg-green {margin-top: 60px; height: 100px;}
.sc-interlude.type2.bg-green.active .interlude-box::before {top: calc(50% - 16px);}
.sc-interlude.type2.bg-green.active .interlude-box>p {transform: translateY(-20px);}

/* mid-component 스타일 */
.mid-component .section {overflow: hidden;}
.mid-component .section:nth-child(1)::before {content: ''; position: absolute; display: block; left: -220px; top: -230px; width: 650px; height: 643px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj1.png") center / contain no-repeat; animation: rotate 5s ease-in-out infinite;}
.mid-component .section:nth-child(1)::after {content: ''; position: absolute; display: block; right: -220px; bottom: -160px; width: 501px; height: 418px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj2.png") center / contain no-repeat; animation: rotate2 8s ease-in-out infinite;}
.mid-component .section:nth-child(3)::before {content: ''; position: absolute; display: block; left: -220px; top: -230px; width: 650px; height: 643px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj3.png") center / contain no-repeat; animation: rotate 5s ease-in-out infinite;}
.mid-component .section:nth-child(3)::after {content: ''; position: absolute; display: block; right: -220px; bottom: -160px; width: 501px; height: 418px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj4.png") center / contain no-repeat; animation: rotate2 8s ease-in-out infinite;}
.mid-component:not(:has(.section)) {margin-top: 0;}

/* 인기 신상을 소개해 드릴게요 */
.btm-component {position: relative; display: flex; flex-direction: column; gap: 40px; padding: 40px 0 80px; border-radius: 20px 20px 0 0; background: var(--coFF); z-index: 1; overflow: hidden;}
.btm-component.type2.active {margin-top: 120px;}
.btm-component:not(:has(.section)) {padding: 0;}
.new-products .btm-component .section {border-radius: 0;}
.new-products .btm-component .section .inner {padding: 0 16px;}
.sc-popular .swiper-op {width: calc(100% - 32px); margin: 0 auto;}


/* 새로 만나는 브랜드 */
.sc-brand .title-box {margin-bottom: 16px;}
.sc-brand .title-box .swiper-pagination-fraction {position: static; width: fit-content; font-size: 11px; font-family: 'spoqa R'; color: var(--co6C);}
.sc-brand .brand-box {display: flex; flex-direction: column; gap: 16px;}
.sc-brand .brand-box .banner-box {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 112px; border-radius: 10px; overflow: hidden;}
.sc-brand .brand-box .banner-box::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
.sc-brand .brand-box .banner-box>img {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; object-fit: cover;}
.sc-brand .brand-box .banner-box p {position: relative; z-index: 1;}
.sc-brand .prod-list {display: flex; flex-direction: column; gap: 8px;}
.sc-brand .prod-list .img-box {width: 100px; height: 100px; flex-shrink: 0; position: relative; border-radius: 10px; overflow: hidden;}
.sc-brand .prod-list .img-box::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.02);}
.sc-brand .prod-list .img-box > img {width: 100%; height: 100%;}

/* 주목받는 신상을 한눈에 */
.sc-trending .product-grid {display: flex; flex-wrap: wrap; gap: 20px 14px; justify-content: space-between; padding: 0 16px;}
.sc-trending .product-grid .probox {width: calc(50% - 10px);}
.sc-trending .more_btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; background: linear-gradient(to bottom, transparent, #fff 50%); position: absolute; bottom: 0; left: 0;}
.sc-trending .more_btn > a {display: flex; align-items: center; justify-content: center;}
.sc-trending .coupondis {font-size: 14px; color: #fff; font-family: 'noto-M'; position: absolute; bottom: 0; left: 0; padding: 4px 10px; height: 28px; background: #1C8FED; border-radius: 0 10px 0 10px; z-index: 2; display: flex; align-items: center;justify-content: center; line-height: 27px;}
.sc-trending .coupondis > b {font-family: 'spoqa M'; font-weight: normal; margin-left: 3px; font-style: 13px;}
.sc-trending .prod-img > em {position: absolute; left: 10px; top: 10px;}

/* 키프레임 애니메이션 */
@keyframes rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

@keyframes rotate2 {
    0% {transform: rotate(0);}
    100% {transform: rotate(-360deg);}
}

@keyframes fadeUp {
    0% {opacity: 0; transform: translateY(15px);}
    100% {opacity: 1; transform: translateY(0);}
}

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

@keyframes float {
    0%, 100% {transform: scale(1) translateY(0);}
    50% {transform: scale(1) translateY(-7px);}
}