@charset "utf-8";

/* modal */
.ws-modal-wrap {position:fixed; top:0; left:0; z-index:1300; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; width:100%; height:100%; background:rgba(0,0,0,.4); text-align:center;}
.ws-modal-wrap:before {content:''; height:100%; display:inline-block; vertical-align:middle;}
.ws-modal-wrap form {width:100%;}

.ws-modal {position:relative; display:inline-flex; flex-direction:column; width:94%; max-width:600px; max-height:78vh; vertical-align:middle; background:#fff; border-radius:8px; text-align:left;}
.modal-sm .ws-modal {max-width:400px;}
.modal-lg .ws-modal {padding:14px 14px 24px;}


.ws-modal-header {display:flex; justify-content:space-between; align-items:center; position:relative; padding:16px;}
.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 {display:block; width:18px; height:18px; background:none; border:0;}
.ws-modal-close svg {display:block; width:100%; height:auto;}

.ws-modal-body {position:relative; padding:10px 16px; flex:0 1 auto; height:100%;  overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-body::webkit-scrollbar {display:none;}
.ws-modal-body.bg {background:#f8f8f8; padding-top:20px; padding-bottom:20px;}

.ws-modal-footer {padding:16px;}

.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-uselock {margin-top:16px; color:#767676; font-size:15px; line-height:1.3em;}

.ws-modal-btns {display:flex; justify-content:center; gap:12px;}
.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%;}

/* 삭제 */
#wsDelete .ws-modal {max-width:320px;}
.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; margin-bottom:1rem;}
.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 #ddd; 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:260px; overflow:auto; border:1px solid #ddd; 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.selected {background:#fafafa;}

.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:#2c2c2c; font-size:16px;}
.ws-product-select-content .ws-product-price {color:#2c2c2c; font-weight:700;}
.ws-product-select-content .ws-product-option {color:#767676; margin-top:2px;}

#selectProduct.ws-product-select-item {margin-top:10px; padding:13px; border:1px solid #ddd; border-radius:6px;}

/* 별점 평가 */
.review-product-rating ul {display:flex; gap:2px;}
.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-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;}
.ws-photo-upload-text {margin-top:10px; font-size:13px; line-height:1.5em; letter-spacing:-.02em; color:#999;}

/* 포토 리뷰 - 상세 */
#wsPhotoReview .ws-modal {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 {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;}
.ws-modal-option .gs-selling-total .price {color:#000;}

/* 결제 - 개인정보 수집 및 이용 */
.ws-modal-agree {max-height:50vh; overflow:auto; font-size:12px; line-height:1.5em; color:#505050;}
.ws-modal-agree p {margin:1em 0;}
.ws-modal-agree table {width:100%; table-layout: fixed; border-collapse:collapse; border-spacing:0px; margin:1em 0; font-size:inherit; line-height:inherit; word-break:break-all; color:#2c2c2c;}
.ws-modal-agree table thead th {padding:10px; background:#f7f7f7; border:1px solid #e5e5e5; font-weight:600;}
.ws-modal-agree table tbody td {padding:10px; background:#ffffff; border:1px solid #e5e5e5; text-align:left; white-space:pre-line;}



/* 반응형 */
@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) {
	.modal-lg form {height:100%;}
	.modal-lg .ws-modal {border-radius:0; width:100%; height:100%; max-height:100%; padding:10px;}
	.modal-lg .ws-modal-body {position:relative; flex:1 1 auto; min-height:0; height:1%; overflow:auto;}

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

	.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;}
}