/* BASIC css start */
/* 상품 상단 영역 (Split Scroll Layout) */
.page-body { display: flex; gap: 82px; align-items: flex-start; padding: 64px 0 128px;}

#sizeChart{display:none;}

/* 팝업 */
.tab-popup,.dim-popup{display: none;}
.tab-popup.active{z-index: 2; display: block; background-color: #fff; padding:20px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 550px; overflow-y: auto;}
.tab-popup .closeBtn{position: sticky; top: 20px; right: 20px; cursor: pointer; text-align: right;}
.tab-popup .closeBtn img{width: 25px;}

.dim-popup.active{background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; display: block; position: fixed; left: 0; top: 0; z-index: 1;}


/* 왼쪽: 페이지 스크롤 */
.page-body > .left { width: 800px; flex-shrink: 0; }

/* 왼쪽 내부 */
.thumb-wrap { width: 800px; }
.img-area { width: 720px; padding-bottom: 72px; }
.img-area img{width:100%;}
.img-area .mainSwiper { margin-bottom: 20px; }
.img-area .mainSwiper .swiper-slide { aspect-ratio: 1/1; }
.img-area .mainSwiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

/* 썸네일 스와이퍼 */
.img-area .thumbSwiper .swiper-slide { width: 110px; height: 110px; cursor: pointer; opacity: 0.4; transition: opacity 0.2s; }
.img-area .thumbSwiper .swiper-slide-thumb-active { opacity: 1 !important; }
.img-area .thumbSwiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

/* 같이 코디한 아이템 섹션 */
.coord-section { width: 100%; }
.coord-inner { padding-bottom: 80px; }
.coord-header { padding-bottom: 12px; margin-bottom: 16px; overflow: hidden; }
.coord-header .coord-title { float: left;  font-weight: 500; font-size: 16px; color: #111; line-height: 20px; }
.coord-header .coord-pagination { float: right; line-height: 20px; width: auto; }
.coord-header .coord-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #d9d9d9; opacity: 1; margin: 0 2px; }
.coord-header .coord-pagination .swiper-pagination-bullet-active { background: #111; }
.coord-section .prd-wrap li{width: 182px;}

.prd-detail img{width: 100%;}

/* 네비게이션 탭 (sticky) */
.view_menu_tab_basic { width: 100%; border-bottom: 2px solid #111; position: sticky; top: 175px; z-index: 1; background: #fff; text-align: center; }
.view_menu_tab_basic > div { display: inline-block; line-height: 52px; padding: 0 24px;  font-weight: 400; font-size: 14px; color: #8f8f8f; cursor: pointer; position: relative; text-align: center; }
.view_menu_tab_basic > div.tab_actv { font-weight: 600; color: #111; }
.view_menu_tab_basic > div.tab_actv::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #111; }

/* 상품 상세 설명 더보기 영역 */
.detail-wrapper { max-height: 4000px; overflow: hidden; position: relative; width: 100%; }
.detail-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.detail-toggle { display: block; width: 100%; height: 52px; line-height: 52px; text-align: center; border: 1px solid #e5e5e5; background: #fff; cursor: pointer;  font-size: 15px; color: #111; box-sizing: border-box; margin-bottom:60px;}
.detail-toggle img{ vertical-align: text-top; }

/* 오른쪽: sticky + 내부 스크롤 */
.page-body > .right { width: 518px; flex-shrink: 0; position: sticky; top: 195px; align-self: flex-start; max-height: 79vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.right::-webkit-scrollbar { display: none; }

/* 오른쪽 내부 */
.info { width: 100%; }

/* 상품 기본정보 상단 (배지+이름+가격+설명) */
.info .prd-top { padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; }

/* 배지 영역 */
.info .badges { margin-bottom: 6px; }
.info .badge { display: inline-block; }
.info .badge span {  font-weight: 500; font-size: 18px; line-height: normal; color: #8f8f8f; }

/* 상품명 영역 */
.info .name-row { margin-bottom: 20px; position: relative;}
.info .prd-name { font-weight: 600; font-size: 26px; line-height: 32px; padding-right: 96px;}
.info .icon-box { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 16px;}
.info .icon-box .icon-wish span#MS_btn_wish{display: block; width: 24px; height: 24px;}
.info .icon-box .icon-share{cursor: pointer;}
.info .icon-box .icon-wish span#MS_btn_wish img{width: 100%;}
.info .icon-box .icon-wish span#MS_btn_wish.wish-on .wishOn{display: block;}
.info .icon-box .icon-wish span#MS_btn_wish .wishOn,
.info .icon-box .icon-wish span#MS_btn_wish.wish-on .wishOff{display: none;}

/*공유버튼*/
#productDetail .shareBtn .shareWrap.active{display: block;}
#productDetail .shareBtn .shareWrap{background-color: #fff; z-index: 1; display: none; position: absolute; width: 240px; border-radius: 10px; border: 1px solid #e5e5e5; right:0;}
#productDetail .shareBtn .shareWrap .top{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding: 15px 15px 10px;}
#productDetail .shareBtn .shareWrap .bottom{padding: 20px; display: flex; justify-content: center; gap: 30px;}
#productDetail .shareBtn .shareWrap .bottom > div a{display: flex; flex-direction: column; align-items: center; gap: 6px;}
#productDetail .shareBtn .shareWrap .bottom i{border-radius: 50px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 25px;}
#productDetail .shareBtn .shareWrap .bottom i.xi-kakaotalk{color: #000; background-color: #fee500;}
#productDetail .shareBtn .shareWrap .bottom i.xi-facebook{color: #fff; background-color: #3b5998;}
#productDetail .shareBtn .shareWrap .bottom span.url{background-color: #000; color: #fff; border-radius: 50px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 600;}
#productDetail .shareBtn .shareWrap .bottom span{display: block; text-align: center; font-size: 12px; font-weight: 400;}


/* 가격 영역 */
.prd-mid{display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;}
.prd-mid .price-wrap .sale_percent{color: #FE7900; font-size: 26px; font-weight: 600; line-height: 32px; margin-right: 6px; display: inline-block;}
.prd-mid .price-wrap .priceConsumer,
.prd-mid .price-wrap .sale{font-size: 26px; font-weight: 600; line-height: 32px; margin-right: 6px; display: inline-block;}
.prd-mid .price-wrap strike{color: #b5b5b5; font-size: 16px; font-weight: 400; display: inline-block; vertical-align: super;}
.prd-mid .detail-review-count .star{font-size: 14px; font-weight: 400; line-height: 18px; display: inline-block; margin-right: 6px;}
.prd-mid .detail-review-count .count{font-size: 14px; font-weight: 400; line-height: 18px; text-decoration: underline; color: #555; display: inline-block;}


/* 상품 설명 텍스트 */
.info .desc-area { padding: 12px 0; }
.info .desc-text {  font-weight: 400; font-size: 13px; line-height: 18px; color: #979797; }
.info .desc-text p { margin: 0; }
.info .desc-text b { color: #fe7900; }

/* 옵션 영역 */
.info .options-area { padding: 20px 0;}
.info .MK_optAddWrap .MK_inner-opt-cm li{display: flex; align-items: center; border-top: 1px solid #e5e5e5; padding: 16px 0;}
.info .MK_optAddWrap .MK_inner-opt-cm li .MK_qty-ctrl{margin-right: 30px;}
.info .MK_optAddWrap .MK_inner-opt-cm li .MK_price{font-size: 12px; font-weight: 500; margin-right: 20px; flex-shrink: 0;}
.info .MK_optAddWrap .MK_inner-opt-cm li .MK_price span{font-size: 16px; font-weight: 600; margin-right: 2px; vertical-align: middle;}
.info .MK_optAddWrap .MK_inner-opt-cm li .MK_p-name{font-size: 14px; font-weight: 400; line-height: 18px; width: 263px; padding-right: 10px;}
.info .MK_optAddWrap .MK_inner-opt-cm li .MK_btn-del{background: url('/design/mazia2008/snapskin/icon_close.svg') no-repeat center; width: 16px; height: 16px; display: block;}
.info .MK_optAddWrap .MK_inner-opt-cm li .MK_btn-del img{display: none;}


/* 쿠폰/가입 배너 */
.info .opt-wrap::before{content: ''; display: block; clear: both;}
.info .coupon-banner {cursor: pointer; float: right; display: flex; width: 100%; max-width: 380px; height: 40px; line-height: 40px; padding: 0 16px; border: 1px solid #555; background: #fff; box-sizing: border-box; margin-bottom: 4px; align-items: center; justify-content: space-between;}
.info .coupon-banner .coupon-icon { display: inline-block; width: 20px; height: 20px; position: relative; vertical-align: middle; margin-right: 8px; }
.info .coupon-banner .coupon-icon img { position: absolute; left: 1px; top: 2px; width: 18px; height: 16.168px; }
.info .coupon-banner .coupon-text { display: inline;  font-size: 13px; font-weight: 400;}
.info .coupon-banner .coupon-text span{ font-weight: 600; color: #fe7900; display: inline-block; padding: 0 4px;}
.info .coupon-banner .right{font-size: 10px; font-weight: 500; line-height: 18px; color: #555;}
.info .coupon-banner .right img{ max-width: 12px; vertical-align: text-top;}


/* 옵션 선택 */
.info .opt-wrap { padding: 0; }
.info .opt-wrap .opt-row { overflow: hidden; padding: 8px 0 0; }
.info .opt-wrap .opt-row dt { float: left; width: 138px;  font-weight: 400; font-size: 13px; line-height: 44px;}
.info .opt-wrap .opt-row dd { overflow: hidden; }
.info .opt-wrap .opt-row select { width: 100%; height: 40px; line-height: 40px; padding: 0 16px; border: 1px solid #e5e5e5; box-sizing: border-box;  font-size: 13px; color: #111; background: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("https://mazia2008.img3.kr/snapskin/img/pc/common/icon_arrow_down.svg"); background-repeat: no-repeat; background-position: right 16px center; }
.info .opt-wrap .opt-qty { overflow: hidden; }
.info .opt-wrap .opt-qty input { width: 60px; height: 44px; line-height: 44px; text-align: center; border: 1px solid #e5e5e5; box-sizing: border-box; font-size: 14px; }
.info .opt-wrap .opt-qty a { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; border: 1px solid #e5e5e5; box-sizing: border-box; font-size: 18px; color: #111; text-decoration: none; vertical-align: top; }
.info .opt-add .opt-add-title {  font-weight: 500; font-size: 13px; color: #111; margin-bottom: 12px; }

/* 사이즈 찾기 */
.table-opt.info_bottom{padding: 20px 0 0; border-bottom: 1px solid #e5e5e5;}
.info_bottom:after{content: ''; display: block; clear: both;}
.info .size-finder {margin-bottom: 20px; float: right; max-width: 380px; display: block; width: 100%; height: 40px; line-height: 40px; background: #fafafa; border: 1px solid #e5e5e5; box-sizing: border-box;  font-weight: 400; font-size: 13px; color: #111; text-align: center; margin-top: 4px; }

/* 총 상품 금액 */
.info .MK_optAddWrap #MK_innerOptTotal{ display: flex; align-items: center; justify-content: space-between; padding: 24px 0;}
.info .total-label { font-weight: 600; font-size: 18px; color: #111; }
.info .total-price .MK_total { display: inline;  font-weight: 500; font-size: 28px; color: #fe7900; vertical-align: middle; }
.info .total-price .MK_txt-won { display: inline;  font-weight: 400; font-size: 16px; color: #111; margin-left: 4px; vertical-align: middle; }

/* 장바구니 / 구매하기 버튼 */
.btn-row {display: flex; width: 100%; }
.btn-row a{ display: block; width: 50%; height: 55px; line-height: 55px; box-sizing: border-box; font-weight: 600; font-size: 16px; text-align: center;}
.btn-row .btn-cart {background: #fff; border: 1px solid #000; color: #111;}
.btn-row .btn-buy {background: #000; border: 1px solid #000; color: #fff;}

/* 실시간 재고 확인 */
.stock-check { height: 40px; line-height: 40px; padding: 0 16px; border: 1px solid #e5e5e5; box-sizing: border-box; margin-top: 16px; text-align: center;}
.stock-check span {  font-weight: 400; font-size: 13px; color: #111; }


/* 아코디언 메뉴 */
.accordion-area { padding: 0 0 30px; }
.accordion-area > div{line-height: 44px; height: 44px; border-top: 1px solid #e5e5e5; font-size: 13px; font-weight: 400; cursor: pointer; position: relative;}
.accordion-area > div .arr{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.accordion-area > div .arr img{max-width: 16px;}

/* 하단 배너 영역 */
.bottom-banners img{display: block; margin-bottom: 16px;}

.qna-list thead{border-bottom: 1px solid #e5e5e5;}
.tit-detail{ display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 2px solid #e5e5e5;}
.tit-detail h3{font-size: 22px; font-weight: 600; }
.btm_write{margin-bottom: 50px; text-align: right;}
.btm_write a{padding: 10px 43px; background-color: #fff; border: 1px solid #000; font-size: 12px;}

.soldout{border: 1px solid #dfdfdf; font-size: 16px; font-weight: 300; line-height: 44px; text-align: center; width: 100%;}

/* 추가 구성 상품 */

.addOptWrap { border-bottom: 1px solid #e5e5e5; padding-bottom: 20px;}
.addOptWrap .prdWrap .wrap{display: flex; gap: 16px; align-items: flex-start;}
.addOptWrap .add-option-tit{display: block; padding: 20px 0 10px;  font-size: 14px;}
.addOptWrap .add-option-img{width: 80px; flex-shrink: 0;}
.addOptWrap .add-option-img img{width: 100%;}
.addOptWrap .add-option-wrap .infoWrap{display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.addOptWrap .add-option-wrap .price{font-weight: 600;}
.addOptWrap .add-option-wrap .price strike{display: none;}
.addOptWrap .add-option-wrap .tit-prd{font-size: 15px; font-weight: 500;}
.addOptWrap .add-option-wrap .opt-wrap dl{display: flex; align-items: center; gap: 4px; margin-bottom: 6px;}
.addOptWrap .add-option-wrap .opt-wrap dl dt{width: 70px; flex-shrink: 0; font-size:13px; color:#666;}
.addOptWrap .add-option-wrap .opt-wrap dl dd{width: 100%;}
.addOptWrap .add-option-wrap .opt-wrap dl dd select{height: 32px; line-height: 32px;}


/* 네비어페이 */
#nhn_btn .npay_button{padding-left: 0 ! important;}
#nhn_btn .npay_event,
#nhn_btn .npay_button .npay_text{display: none ! important;}

#nhn_btn .npay_btn_link.npay_btn_pay{border-color: #e5e5e5 ! important;}
#nhn_btn .npay_btn_link.btn_green{border-color:#e5e5e5 ! important; background-color: transparent !important;}
.payBtn{margin-top: 16px; margin-bottom: 30px;}
.payBtn .npay_storebtn_bx.npay_type_C_2_2{width: 100% !important; height: auto ! important;}
#nhn_btn .npay_button_box{border-top-color: #e5e5e5 ! important;}
#nhn_btn .npay_btn_link.npay_btn_pay{background-image: url('/design/mazia2008/snapskin/npay_btn.jpg')! important; background-position: center ! important;}
#nhn_btn .npay_btn_link.npay_btn_zzim{background-image: url('/design/mazia2008/snapskin/npay_wish_btn.jpg') ! important; background-size: cover ! important;}
#nhn_btn .npay_btn_link{height: 40px ! important;}
#nhn_btn .npay_btn_item.btn_width{width: 45px ! important;}
/* BASIC css end */