@charset "utf-8";

/* modal */
.ws-modal-open,
.ws-modal-open body {_overflow:hidden; /*사이트에 position:sticky 사용으로 인해서 overflow:hidden 사용 불가 */ }

.ws-modal-wrap {display:flex; flex-direction:column; align-items:center; justify-content:center; position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; overflow:hidden; background:rgba(0,0,0,.4); transition:.2s;}

.ws-modal-outer {position:relative; flex:0 0 auto; width:100%; max-height:100%; padding:20px; overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}

.ws-modal-inner {position:relative; width:100%; max-width:720px; margin:0 auto; padding:40px; background:#fff; border-radius:10px;}

.modal-sm .ws-modal-inner {max-width:400px; padding:30px;}

.ws-modal-header {position:relative; margin-bottom:30px;}
.ws-modal-header h2 {color:#2c2c2c; font-size:20px; line-height:1.3em;}
.ws-modal-header h2 .num {margin-left:4px; color:#a8a8a8; font-weight:600;}

.ws-modal-close {position:absolute; top:0; right:0; border:0; width:18px; height:18px; background:none;}
.ws-modal-close svg {display:block; width:100%; height:auto;}

.ws-modal-section {margin-bottom:30px;}
.ws-modal-section:last-child {margin-bottom:0;}

.ws-modal-section-title {position:relative; margin-bottom:12px;}
.ws-modal-section-title h3 {color:#2c2c2c; font-size:15px; line-height:1.3em;}
.ws-modal-section-title .required {color:#f84949;}

.ws-modal-textarea.input {display:block; width:100%; height:120px;}
.ws-modal-textarea.input.h200 {height:200px;}

.ws-modal-btns {display:flex; justify-content:center; gap:12px; margin-top:50px;}
.ws-modal-btns .block {width:100%;}

.ws-modal-prev-next button {display:flex; align-items:center; justify-content:center; position:absolute; top:50%; z-index:10; width:60px; height:60px; background:none; border:0; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.ws-modal-prev-next button span {display:none;}
.ws-modal-prev {left:-80px;}
.ws-modal-next {right:-80px;}

.ws-modal-input-group {display:grid; gap:8px;}
.ws-modal-input-group .btn-pack {display:block; width:100%; font-weight:700;}
.ws-modal-input-group .input {display:block; width:100%;}

/* 삭제 */
.ws-password .txt {margin-bottom:1.5rem; text-align:center; font-size:15px; font-weight:500; line-height:1.5em;}
.ws-password .input-wrap {display:flex;}
.ws-password .input-wrap .input {flex:1 1 auto; min-width:0; width:1%; border-top-right-radius:0; border-bottom-right-radius:0; border-right:0;}
.ws-password .input-wrap .btn-pack {border-top-left-radius:0; border-bottom-left-radius:0;}

/* 상품 선택 */
.ws-product-select-wrap {position:relative; z-index:2;}
.ws-product-select-wrap.active .ws-product-select-list {display:block;}
.ws-product-select-btn {display:flex; align-items:center; justify-content:space-between; width:100%; height:40px; padding:6px 13px; border:1px solid #dfdfdf; border-radius:6px; background:#fff; color:#a8a8a8; font-size:15px; text-align:left;}
.ws-product-select-list {display:none; position:absolute; margin-top:2px; width:100%; max-height:300px; overflow:auto; border:1px solid #dfdfdf; border-radius:6px; background:#fff;}
.ws-product-select-list .ws-product-select-item {padding:13px; border-bottom:1px solid #eee; transition:.2s;}
.ws-product-select-list .ws-product-select-item:last-child {border-bottom:0;}
.ws-product-select-list .ws-product-select-item:hover {background:#f7f7f7;}

.ws-product-select-item {display:flex; align-items:center; gap:20px; width:100%; background:none; border:0; text-align:left; overflow:hidden;}
.ws-product-select-image {position:relative; width:60px; height:60px; overflow:hidden; border-radius:6px;}
.ws-product-select-image img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.ws-product-select-content {display:grid; font-size:14px; line-height:1.5em;}
.ws-product-select-content .ws-product-title {color:#505050;}
.ws-product-select-content .ws-product-price {font-weight:700;}

/* 별점 평가 */
.review-product-rating ul {display:flex; gap:5px;}
.review-product-rating .rating-input-star {display:block; position:relative; width:40px; height:40px; background:url('/images/shop/rating-off.svg') 50% 50%/contain no-repeat; transition:.2s;}
.review-product-rating .rating-input-star input {position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1;}
.review-product-rating .hover .rating-input-star {background:url('/images/shop/rating-on.svg'); opacity:.5;}
.review-product-rating .selected .rating-input-star {background:url('/images/shop/rating-on.svg');}

/* 사진 업로드 */
.ws-photo-upload-input {display:none;}
.ws-photo-upload-btn {display:block; width:100%;}
.ws-photo-upload-btn svg { vertical-align:middle; margin:-.2em 4px 0 0;}
.ws-photo-upload-btn path {fill:var(--color-primary);}
.ws-photo-upload-preview {display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-top:10px;}
.ws-photo-upload-preview li {position:relative;}
.ws-photo-upload-preview li:before {content:''; display:block; padding-bottom:100%;}
.ws-photo-upload-preview li img {position:absolute; top:0; left:0; width:100%; height:100%; border-radius:6px; object-fit:cover;}
.ws-photo-upload-preview li button {display:flex; align-items:center; justify-content:center; position:absolute; top:-5px; right:-5px; width:20px; height:20px; border:0; border-radius:100%; background:rgba(0,0,0,.7);}
.ws-photo-upload-preview li button svg {width:8px; height:auto;}

/* 포토 리뷰 - 상세 */
#wsPhotoReview .ws-modal-inner {max-width:880px;}
.ws-photo-review {display:flex;}
.ws-photo-review-slider {position:relative; width:57%; margin-right:50px;}
.ws-photo-review-slider .slider {border-radius:10px; overflow:hidden; margin-bottom:10px;}
.ws-photo-review-slider .img {position:relative; padding-bottom:100%; overflow:hidden;}
.ws-photo-review-slider .img img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.ws-photo-review-slider .thumbs .img {border-radius:4px; cursor:pointer;}
.ws-photo-review-slider .thumbs .swiper-slide-thumb-active .img:after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; border:2px solid var(--color-primary); border-radius:4px;}
.ws-photo-review-summary {width:43%; display:flex; flex-direction:column}
.ws-photo-review-summary .review-item-cnt-info {position:static; display:block; margin-bottom:20px;}
.ws-photo-review-summary .review-item-cnt-info .info {margin-bottom:33px;}
.ws-photo-review-summary .review-item-cnt-info .rating {width:100%;}
.ws-photo-review-summary .review-item-cnt-txt {flex:1 1 auto; min-height:0; height:1%; max-height:27rem; overflow:auto; margin-bottom:0; word-break:break-all;}

/* 포토 리뷰 - 목록 */
#wsPhotoReviewList .ws-modal-inner {max-width:880px;}
.ws-photo-review-list {position:relative; overflow:auto; max-height:530px; margin-right:-10px; padding-right:10px;}
.ws-photo-review-list::-webkit-scrollbar {width:4px; border-radius:4px;}
.ws-photo-review-list::-webkit-scrollbar-thumb {background:#505050; border-radius:4px;}
.ws-photo-review-list::-webkit-scrollbar-track {background:#dfdfdf; border-radius:4px;}
.ws-photo-review-list .items {display:grid; grid-template-columns:repeat(6, 1fr); gap:16px;}
.ws-photo-review-list .item {position:relative;}
.ws-photo-review-list .item:before {content:''; display:block; padding-bottom:100%;}
.ws-photo-review-list .item img {position:absolute; top:0; left:0; width:100%; height:100%; border-radius:6px; object-fit:cover;}
.ws-photo-review-list .item span {display:flex; align-items:center; justify-content:center; position:absolute; bottom:0; right:0; width:24px; height:24px; border-radius:100%; background:rgba(0,0,0,.7); color:#fff; font-size:12px; line-height:1em;}

/* 장바구니 - 옵션 변경 */
.ws-modal-option .add-options {max-height:26vh; overflow:auto;}


/* 반응형 */
@media (min-width: 1024px) {
	.ws-modal-btns .btn-pack.large {height:56px; line-height:54px; font-size:17px; font-weight:700;}
	
}
@media (max-width: 1400px) {
	.ws-modal-prev {left:-60px;}
	.ws-modal-next {right:-60px;}
}

@media (max-width: 1024px) {
	#wsPhotoReview .ws-modal-inner {max-width:800px;}
	#wsPhotoReviewList .ws-modal-inner {max-width:800px;}
}

@media (max-width: 900px) {
	.ws-modal-prev-next {display:flex; justify-content:space-between; margin-top:40px;}
	.ws-modal-prev-next button {display:inline-flex; gap:8px; position:static; transform:none !important; width:auto; height:auto; padding:12px 20px; border:1px solid #ccc; border-radius:30px; color:#505050; font-size:14px; font-weight:500; line-height:1.3em;}
	.ws-modal-prev-next button svg {width:8px; height:auto; margin-top:-.1em;}
	.ws-modal-prev-next button path {fill:#505050;}
	.ws-modal-prev-next button span {display:block;}
}

@media (max-width: 640px) {	
	.ws-modal-open,
	.ws-modal-open body {overflow:hidden;}

	.ws-modal-inner {padding:20px;}
	.ws-modal-header {margin-bottom:20px;}

	.modal-lg .ws-modal-outer {height:100%; padding:0;}
	.modal-lg .ws-modal-inner {display:flex; flex-direction:column; border-radius:0; height:100%;}
	.modal-lg .ws-modal-content {position:relative; flex:1 1 auto; min-height:0; height:1%; overflow:auto;}

	.modal-sm .ws-modal-inner {max-width:320px; padding:20px;}

	.ws-modal-btns {margin-top:20px;}

	.ws-modal-prev-next {margin-top:20px;}

	.ws-photo-review {display:block;}
	.ws-photo-review-slider {width:100%; margin:0 0 20px;}
	.ws-photo-review-summary {display:block; width:100%;}
	.ws-photo-review-summary .review-item-cnt-info .info {margin-bottom:24px;}
	.ws-photo-review-summary .review-item-cnt-txt {max-height:none;}

	.ws-photo-review-list {max-height:none; margin-right:0; padding-right:0;}
	.ws-photo-review-list .items {grid-template-columns: repeat(4, 1fr); gap:8px;}
}