@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:720px; max-height:95vh; vertical-align:middle; background:#fff; border-radius:16px; text-align:left;}
.modal-sm .ws-modal {max-width:720px;}
/* .modal-lg .ws-modal {padding:14px 14px 24px;} */

.ws-modal-header {display:flex; justify-content:space-between; align-items:center; position:relative; padding:34px 40px; border-bottom: 1px solid #eee;}
.ws-modal-header h2 {color:#2c2c2c; font-size:24px; line-height:1.66em; font-weight: 600; }
.ws-modal-header h2 .num {margin-left:4px; color:#a8a8a8; font-weight:600;}
.ws-modal-header .right { display: flex; gap: 16px; align-items: center;}
.ws-modal-header .right .review-all-btn { display: inline-block; padding: 14px 16px 12px; font-size: 14px; font-weight: 500; line-height: 1.14em; border: none; border-radius: 8px; background: #f1f1f1; }
.ws-modal-header .right .review-all-btn:hover { background: #2c2c2c; color: #fff; }

.ws-modal-close {display:block; width:20px; height:20px; background:none; border:0;}
.ws-modal-close svg {display:block; width:100%; height:auto;}

.ws-modal-body {position:relative; padding:30px 40px; 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-body .input { border-color: #eee; border-radius: 8px; padding: 10px 20px; height: 60px; }
.ws-modal-body select.input { color: #a8a8a8; font-weight: 400; }
.ws-modal-body .opt-count .input { border-radius: 0; padding: 0; height: 32px; }

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

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

.ws-modal-body .flex { display: flex; flex-wrap: wrap; gap: 0 16px;}
.ws-modal-body .flex > div { width: calc(100%/2 - 8px);}
.ws-modal-body .flex > div.w100 { width: 100%; }
.ws-modal-body .flex > div .fx { display: flex; gap: 6px; }
.ws-modal-body .flex > div .fx .input { flex: 1 1 auto; min-width: 0; width: 1%; }
.ws-modal-body .flex > div .fx button { height: 60px; color: #fff; line-height: 1.5em; font-weight: 700; padding: 0 20px; display: inline-flex; align-items: center; background: #121212; border-radius: 5px; border: none; }

.ws-modal-section-title {position:relative; margin-bottom:16px;}
.ws-modal-section-title h3 {color:#2c2c2c; font-size:16px; line-height:1.5em; font-weight: 600; }
.ws-modal-section-title h3 span { font-size: 14px; color: #a8a8a8; font-weight: 500; display: inline-block; padding-left: 5px; }
.ws-modal-section-title .required {color:var(--color-primary);}
.ws-modal-section-title.fx { display: flex; align-items: center; gap: 16px !important; }
.ws-modal-section-title.fx .checkbox { font-size: 14px; color: #676767; }
.ws-modal-section-title.fx .checkbox label { position: relative; top: 1px; }

.ws-modal-textarea.input {display:block; width:100%; height:160px; padding: 16px 20px;}
.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-btns .focus { min-width: 100%; height: 66px; border-radius: 8px; font-size: var(--font-size18);} */

.ws-modal-prev-next { position: relative; padding: 34px 40px; background: #fff; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;}
.ws-modal-prev-next button {display:flex; align-items:center; justify-content:center; position:relative; top:0; z-index:10; background:none; border:0; transform:none; margin: 0; gap: 8px; transition: .2s;}
.ws-modal-prev-next button span { display: inline-block; font-size: 14px; font-weight: 600; line-height: 1.14em; color: #676767; letter-spacing: -.03em; transition: .2s; position: relative; }
.ws-modal-prev-next button:hover span { color: var(--color-primary);}
.ws-modal-prev {left:auto; padding-left: 24px; }
.ws-modal-prev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 16px; height: 16px; background: url(/images/shop/review-prev.png) center no-repeat; background-size: contain; transition: .2s; }
.ws-modal-prev:hover::before { background-image: url(/images/shop/review-prev-c.png);}
.ws-modal-next {right:auto; padding-right: 24px; }
.ws-modal-next::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 16px; height: 16px; background: url(/images/shop/review-next.png) center no-repeat; background-size: contain; transition: .2s; }
.ws-modal-next:hover::before { background-image: url(/images/shop/review-next-c.png);}

.ws-modal-prev-next .swiper-pagination { position: relative; top: auto; width: auto; margin-top: 0; bottom: auto; font-size: 14px; font-weight: 600; color: #a8a8a8; line-height: 1.14em; }
.ws-modal-prev-next .swiper-pagination-current { color: #676767; }

.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:16px; width:100%; background:none; border:0; text-align:left; overflow:hidden;}
.ws-product-select-image {position:relative; width:80px; height:80px; overflow:hidden; border-radius:6px; background: #f8f8f8; }
.ws-product-select-image img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:auto !important; height:auto !important; max-width:80%; max-height:80%; object-fit:contain;}
.ws-product-select-content {display:grid; font-size:14px; line-height:1.5em;}
.ws-product-select-content .ws-product-title {color:#505050; font-weight: 400; line-height: 1.5em; font-size: 16px; }
.ws-product-select-content .ws-product-en-title {color:#2c2c2c; font-size:14px; font-weight: 500; line-height: 1.42em; margin-top: 4px;}
.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-image:url('/images/shop/rating-on.svg'); opacity:.5;}
.review-product-rating .selected .rating-input-star {background-image:url('/images/shop/rating-on.svg');}

/* 사진 업로드 */
.ws-photo-upload-input {display:none;}
.ws-photo-upload-btn {display:block; width:100%; font-weight: 600; color: #2c2c2c; line-height: 1.5em; padding: 18px 10px; background: #fff; border-radius: 8px; border: 1px solid #2c2c2c;}
.ws-photo-upload-btn img { vertical-align:middle; margin:-.2em 4px 0 0;}
.ws-photo-upload-preview {display:grid; grid-template-columns:repeat(4, 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:980px;}
.ws-photo-review {display:flex;}
.ws-photo-review-slider {position:relative; width:50%; margin-right:40px;}
.ws-photo-review-slider .slider {border-radius:8px; overflow:hidden; }
.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:50%; display:flex; flex-direction:column}
.ws-photo-review-summary .fx { display: flex; justify-content: space-between; margin-bottom: 30px; align-items: center; gap: 10px; flex-wrap: wrap;}
.ws-photo-review-summary .fx .rating-wrap { display: flex; align-items: center; gap: 10px; }
.ws-photo-review-summary .fx .rating-wrap .rating { height: 20px; }
.ws-photo-review-summary .fx .rating-num { font-size: var(--font-size20); font-weight: 500; line-height: 1.7em; color: #2c2c2c; }
.ws-photo-review-summary .fx .user-info { display: flex; gap: 0 16px; flex-wrap: wrap; font-size: 14px; line-height: 1.14em; font-weight: 400; }
.ws-photo-review-summary .fx .user-info .date { color: #a8a8a8; }
.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:980px;}
.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(7, 1fr); gap:10px;}
.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:8px; object-fit:cover;}
.ws-photo-review-list .item span {display: inline-block; position:absolute; bottom:8px; right:8px; border-radius:25px;  background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(12px); color:#fff; font-size:13px; line-height:1em; font-weight: 700; line-height: 1.2em; padding: 8px 12px 7px;}

/* 장바구니 - 옵션 변경 */
.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) {
}

@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:15px;}
	.modal-lg .ws-modal-body {position:relative; flex:1 1 auto; min-height:0; height:1%; overflow:auto;}
    .ws-modal-header { padding: 0; padding-bottom: 15px; }
    .ws-modal-header h2 { font-size: 20px; }
    .ws-modal-header .right { gap: 10px; }
    .modal-lg .ws-modal-body { padding: 15px 0;}
    .ws-photo-review-summary .fx { margin-bottom: 15px; }
    .ws-modal-section-title { margin-bottom: 10px; }
    .ws-modal-prev-next { padding: 15px 0 0; }
    .ws-modal-body .input { border-radius: 4px; padding: 10px 12px; height: 40px; }
    .ws-modal-textarea.input { height: 160px; }
	.modal-sm .ws-modal {max-width:100%;}
    .modal-sm .ws-modal-header { padding: 15px; }
    .modal-sm .ws-modal-body { padding: 15px;}
    .modal-sm .ws-modal-footer { padding: 15px;}
    .ws-modal-section-title { margin-bottom: 6px; }
    .ws-modal-section-title h3 { font-size: 14px; }
    .ws-modal-body .flex > div .fx button { height: 40px; padding: 0 10px; font-size: 12px; }
    .ws-modal-body .flex > div { width: 100%; }
    .ws-modal-section { margin-bottom: 30px; }

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

    .ws-modal-textarea.input { padding: 10px 12px;}

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

}