/* ============================================================
* SweetAlert2
* ============================================================ */
.customMd.swal2-backdrop-show {padding: 4rem 0; background: rgba(38,38,38,0.2);}
.customMd .swal2-popup {max-width: 90%; padding: 2.7rem 2.2rem; border-radius: 0; color: var(--col-bk); font-size: 1.5rem;}
.customMd .swal2-popup .swal2-html-container {padding: 0; word-break: keep-all;}

/* 상단 닫기 버튼 */
.customMd .swal2-close {position: absolute; top: 2rem; right: 1.3rem; margin: 0; color: var(--col-bk); font-size: 3rem;}

/* 상단 타이틀 */
.customMd .swal2-title {padding: 0 0 2rem; text-align: left; font-size: 2rem; font-weight: 700; word-break: break-all;}

/* 하단 버튼*/
.customMd .swal2-actions {gap: 0.6rem; width: 100%; margin-top: 3rem;}
.customMd .swal2-actions button {flex: 1 0 0; margin: 0; padding: 1.2rem 1rem; border-radius: 0;}

@media (max-width: 576px) {
    .customMd .swal2-popup {padding: 2.7rem 2rem;}
    .customMd .swal2-close {top: 1.9rem; right: 1.2rem:}
}


/* ============================================================
* SweetAlert2 : 텍스트용 모달
* ============================================================ */
.txtCustomMd.swal2-backdrop-show {background: rgba(38,38,38,0.2);}
.txtCustomMd .swal2-popup {max-width: 90%; padding: 4.8rem 3rem 3rem; color: var(--col-bk); font-size: 1.5rem;}

/* 상단 닫기 버튼 */
.txtCustomMd .swal2-close {position: absolute; top: 1.8rem; right: 1.8rem; margin: 0; color: #0F172A; font-size: 3rem;}

/* 상단 타이틀 */
.txtCustomMd .swal2-title {padding: 0 0 1.6rem; text-align: left; font-size: 2.4rem; font-weight: 700; line-height: 1.4; word-break: break-all;}
.txtCustomMd .swal2-title .title-img {display: flex; align-items: flex-start; gap: 0.8rem;}
.txtCustomMd .swal2-title .title-img img {flex-shrink: 0; margin-top: -0.4rem;}

/* 하단 버튼 */
.txtCustomMd .swal2-actions {gap: 0.6rem; width: 100%; margin-top: 3rem;}
.txtCustomMd .swal2-actions button {flex: 1 0 0; margin: 0; padding: 1.2rem 1rem; border-radius: 0;}

/* 내용 */
.txtCustomMd .swal2-popup .swal2-html-container {padding: 0; text-align: left; word-break: keep-all;}
.txtCustomMd .body p {color: #555; line-height: 1.5;}

@media (max-width: 576px) {
    .txtCustomMd .swal2-popup {padding: 2.8rem 2.4rem 2.4rem;}
    .txtCustomMd .swal2-title {font-size: 2rem;}
}



/* ============================================================
* 공통
* ============================================================ */
.md-title {margin-bottom: 1.2rem; text-align: left;}
.md-title p {font-size: 1.6rem; font-weight: 700;}



/* ============================================================
* 리뷰 신고 모달
* ============================================================ */
.reportModal .radio-wrap {flex-direction: column; align-items: flex-start; gap: 1.4rem;}
.reportModal .etc-input textarea {border-color: var(--col-bd-gray);}



/* ============================================================
* 배송지 선택 모달
* ============================================================ */
.addressModal .btn-addAddress {width: 100%; height: 4.3rem; margin-bottom: 2rem;}
.addressModal .address-box {position: relative;}
.addressModal .address-box .radio {align-items: flex-start; gap: 1.6rem;}
.addressModal .address-box:has(.radio [type="radio"]:checked) {border-color: var(--col-theme);}
.addressModal .address-box .btn-area {position: absolute; top: 1.5rem; right: 2rem;}
.addressModal .address-box .btn-area button {height: 3rem;}
@media (max-width: 576px) {
    .addressModal .address-box .radio {flex-direction: column; width: 100%;}
}



/* ============================================================
* 배송지 관리 모달
* ============================================================ */
.address-wrap {margin-top: -2.7rem; padding: 0 1rem;}
.address-wrap .btn-area {text-align: right;}
@media (max-width: 576px) {
    .address-wrap {padding: 0;}
}



/* ============================================================
* 상품 문의 모달
* ============================================================ */
.qnaModal {text-align: left;}

/* 판매자 연락처 */
.seller-contact {padding: 0.8rem 1.2rem; background: #F2F2F2; color: var(--col-darkgray); font-size: 14px;}

/* 상품 정보 */
.qnaModal .prd-info {position: relative; display: flex; align-items: flex-start; gap: 1.6rem; padding: 1.6rem 0; border-bottom: 1px solid var(--col-bd-gray);}
.qnaModal .prd-info .img {flex-shrink: 0; width: 10rem; aspect-ratio: 1; overflow: hidden;}
.qnaModal .prd-info .img img {width: 100%; height: 100%; object-fit: cover; transition: var(--trans-25);}
.qnaModal .prd-info .seller {margin-bottom: 0.8rem; color: var(--col-darkgray); font-size: 14px;}
.qnaModal .prd-info .name {font-size: 1.6rem; font-weight: 500; line-height: 1.35; word-break: break-all;}
.qnaModal .prd-info .option {display: flex; gap: 0.4rem; margin-top: 4px; color: var(--col-darkgray); font-size: 14px; word-break: break-all;}
.qnaModal .prd-info .option dt {flex-shrink: 0;}
.qnaModal .prd-info .shipping {margin-top: 0.4rem; color: var(--col-gray); font-size: 14px;}
.qnaModal .prd-info .price-wrap {margin-top: 1rem;}
.qnaModal .prd-info .price-wrap .origin {color: var(--col-gray); font-size: 13px; text-decoration: line-through;}
.qnaModal .prd-info .price-wrap .price {font-size: 1.5rem; font-weight: 500;}
.qnaModal .prd-info .price-wrap .quantity {position: relative; margin-left: 1rem; padding-left: 1rem;}
.qnaModal .prd-info .price-wrap .quantity::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 12px; background: var(--col-bd-gray);}

/* 입력 필드 */
.qnaModal .order-number {font-size: 1.6rem; font-weight: 500;}
.qnaModal .select {display: flex;}
.qnaModal .select select,
.qnaModal input {height: 4rem;}
.qnaModal input,
.qnaModal textarea {border-color: var(--col-bd-gray);}

/* 이미지 첨부 */
.upload-list {display: flex; gap: 1.2rem;}
.upload-box {position: relative; display: flex; justify-content: center; align-items: center; width: 9rem; aspect-ratio: 1; background: #fff; border: 1px solid var(--col-bd-gray); cursor: pointer;}
.placeholder {display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--col-gray); font-size: 12px;}
.placeholder::before {content: ""; display: block; width: 2.2rem; aspect-ratio: 1; background: url("/img/icon/upload.svg") center/contain no-repeat;}
.upload-box img {width: 100%; height: 100%; object-fit: cover;}
.upload-box button {position: absolute; top: -6px; right: -6px; width: 2rem; aspect-ratio: 1; border-radius: 50%; background: var(--col-theme) url("/img/icon/close_wt.svg") center/1.1rem no-repeat;}

@media (max-width: 576px) {
    .qnaModal .prd-info {flex-direction: column;}
}



/* ============================================================
* 주문 취소 모달
* ============================================================ */
/* 상품 정보 */
.orderCancelModal {text-align: left;}
.orderCancelModal .prd-info {position: relative; display: flex; align-items: flex-start; gap: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--col-bd-gray);}
.orderCancelModal .prd-info .img {flex-shrink: 0; width: 10rem; aspect-ratio: 1; overflow: hidden;}
.orderCancelModal .prd-info .img img {width: 100%; height: 100%; object-fit: cover; transition: var(--trans-25);}
.orderCancelModal .prd-info .seller {margin-bottom: 0.8rem; color: var(--col-darkgray); font-size: 14px;}
.orderCancelModal .prd-info .name {font-size: 1.6rem; font-weight: 500; line-height: 1.35; word-break: break-all;}
.orderCancelModal .prd-info .option {display: flex; gap: 0.4rem; margin-top: 4px; color: var(--col-darkgray); font-size: 14px; word-break: break-all;}
.orderCancelModal .prd-info .option dt {flex-shrink: 0;}
.orderCancelModal .prd-info .shipping {margin-top: 0.4rem; color: var(--col-gray); font-size: 14px;}
.orderCancelModal .prd-info .price-wrap {margin-top: 1rem;}
.orderCancelModal .prd-info .price-wrap .origin {color: var(--col-gray); font-size: 13px; text-decoration: line-through;}
.orderCancelModal .prd-info .price-wrap .price {font-size: 1.5rem; font-weight: 500;}
.orderCancelModal .prd-info .price-wrap .quantity {position: relative; margin-left: 1rem; padding-left: 1rem;}
.orderCancelModal .prd-info .price-wrap .quantity::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 12px; background: var(--col-bd-gray);}
@media (max-width: 576px) {
    .orderCancelModal .prd-info {flex-direction: column; align-items: center;}
}




/* ============================================================
* 송장 정보 모달
* ============================================================ */
.trackingModal {padding: 1.6rem; border: 1px solid var(--col-bd-gray); text-align: center;}
.trackingModal p {margin-bottom: 1rem;}
.trackingModal button {display: inline-flex; align-items: center; gap: 4px; font-weight: 600;}
.trackingModal button::after {content: ""; display: block; width: 1.6rem; aspect-ratio: 1; background: url("/img/icon/copy_bk.svg") center/contain no-repeat;}



/* ============================================================
* 구매 확정 모달
* ============================================================ */
/* 상품 정보 */
.orderConfirmModal {text-align: left;}
.orderConfirmModal .prd-info {position: relative; display: flex; align-items: flex-start; gap: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--col-bd-gray);}
.orderConfirmModal .prd-info .img {flex-shrink: 0; width: 10rem; aspect-ratio: 1; overflow: hidden;}
.orderConfirmModal .prd-info .img img {width: 100%; height: 100%; object-fit: cover; transition: var(--trans-25);}
.orderConfirmModal .prd-info .seller {margin-bottom: 0.8rem; color: var(--col-darkgray); font-size: 14px;}
.orderConfirmModal .prd-info .name {font-size: 1.6rem; font-weight: 500; line-height: 1.35; word-break: break-all;}
.orderConfirmModal .prd-info .option {display: flex; gap: 0.4rem; margin-top: 4px; color: var(--col-darkgray); font-size: 14px; word-break: break-all;}
.orderConfirmModal .prd-info .option dt {flex-shrink: 0;}
.orderConfirmModal .prd-info .shipping {margin-top: 0.4rem; color: var(--col-gray); font-size: 14px;}
.orderConfirmModal .prd-info .price-wrap {margin-top: 1rem;}
.orderConfirmModal .prd-info .price-wrap .origin {color: var(--col-gray); font-size: 13px; text-decoration: line-through;}
.orderConfirmModal .prd-info .price-wrap .price {font-size: 1.5rem; font-weight: 500;}
.orderConfirmModal .prd-info .price-wrap .quantity {position: relative; margin-left: 1rem; padding-left: 1rem;}
.orderConfirmModal .prd-info .price-wrap .quantity::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 12px; background: var(--col-bd-gray);}

.orderConfirmModal .benefit {position: relative; margin-top: 4rem;}
.orderConfirmModal .benefit dt {position: absolute; top: -1.8rem; left: 1.4rem; margin: 0; padding: .6rem 1rem; background: var(--col-theme); border-radius: 20rem; color: #fff; font-size: 13px;}
.orderConfirmModal .benefit dd {display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; padding: 1.6rem 1rem; border: 1px solid var(--col-bd-gray); background: #fff; text-align: center; font-weight: 500;}
.orderConfirmModal .benefit dd::before {content: ""; display: block; width: 2.7rem; aspect-ratio: 1; background: url("/img/point.png") center/contain no-repeat;}

@media (max-width: 576px) {
    .orderConfirmModal .prd-info {flex-direction: column; align-items: center;}
}



/* ============================================================
* 리뷰 모달
* ============================================================ */
.reviewModal {text-align: left;}

.point-guide {display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem 1.8rem; border: 1px solid var(--col-bd-gray);}
.point-guide::before {content: ""; display: block; width: 3.5rem; aspect-ratio: 1; background: url("/img/point.png") center/contain no-repeat;}
.point-guide p {font-size: 1.6rem; font-weight: 500;}
.point-guide p strong {color: var(--col-red);}
.point-guide small {display: block; margin-top: 0.6rem; color: var(--col-gray); font-size: 14px;}

/* 상품 정보 */
.reviewModal .prd-info {position: relative; display: flex; align-items: flex-start; gap: 1.6rem; padding: 1.6rem 0; border-bottom: 1px solid var(--col-bd-gray);}
.reviewModal .prd-info .img {flex-shrink: 0; width: 10rem; aspect-ratio: 1; overflow: hidden;}
.reviewModal .prd-info .img img {width: 100%; height: 100%; object-fit: cover; transition: var(--trans-25);}
.reviewModal .prd-info .seller {margin-bottom: 0.8rem; color: var(--col-darkgray); font-size: 14px;}
.reviewModal .prd-info .name {font-size: 1.6rem; font-weight: 500; line-height: 1.35; word-break: break-all;}
.reviewModal .prd-info .option {display: flex; gap: 0.4rem; margin-top: 4px; color: var(--col-darkgray); font-size: 14px; word-break: break-all;}
.reviewModal .prd-info .option dt {flex-shrink: 0;}
.reviewModal .prd-info .shipping {margin-top: 0.4rem; color: var(--col-gray); font-size: 14px;}
.reviewModal .prd-info .price-wrap {margin-top: 1rem;}
.reviewModal .prd-info .price-wrap .origin {color: var(--col-gray); font-size: 13px; text-decoration: line-through;}
.reviewModal .prd-info .price-wrap .price {font-size: 1.5rem; font-weight: 500;}
.reviewModal .prd-info .price-wrap .quantity {position: relative; margin-left: 1rem; padding-left: 1rem;}
.reviewModal .prd-info .price-wrap .quantity::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 12px; background: var(--col-bd-gray);}

/* 별점 입력  */
.star-rating {position: relative; display: inline-block; height: var(--star-size);
    /* 5개 별 전체 너비: 32*5 + 4*4 = 176px */
    width: calc(var(--star-size) * 5 + var(--star-gap) * 4);}
.star-rating input {display: none;}
.star-rating label {position: absolute; top: 0; height: var(--star-size); color: #D9D9D9; cursor: pointer;}
.star-rating label::before {content: '\2605'; /* ★ */ display: block; width: var(--star-size); height: var(--star-size); text-align: center; font-size: var(--star-size); line-height: var(--star-size);}
.star-rating label.full {width: var(--star-size);}
.star-rating label.half {position: absolute; width: calc(var(--star-size) / 2); overflow: hidden;}
.star-rating label.half::before {position: absolute; left: 0;}
label[for="star5"],
label[for="star4half"] { left: calc((var(--star-size) + var(--star-gap)) * 4); }
label[for="star4"],
label[for="star3half"] { left: calc((var(--star-size) + var(--star-gap)) * 3); }
label[for="star3"],
label[for="star2half"] { left: calc((var(--star-size) + var(--star-gap)) * 2); }
label[for="star2"],
label[for="star1half"] { left: calc((var(--star-size) + var(--star-gap)) * 1); }
label[for="star1"],
label[for="starhalf"]  { left: 0; }
.star-rating input:checked ~ label {color: #FFD83D;}
@media (hover: hover) and (pointer: fine) {
    .star-rating label:hover,
    .star-rating label:hover ~ label {
        color: #FFD83D;
    }
}

.reviewModal .order-number {font-size: 1.6rem; font-weight: 500;}
.reviewModal .select {display: flex;}
.reviewModal .select select,
.reviewModal input {height: 4rem;}
.reviewModal input,
.reviewModal textarea {border-color: var(--col-bd-gray);}

/* 이미지 첨부 */
.upload-list {display: flex; gap: 1.2rem;}
.upload-box {position: relative; display: flex; justify-content: center; align-items: center; width: 9rem; aspect-ratio: 1; background: #fff; border: 1px solid var(--col-bd-gray); cursor: pointer;}
.placeholder {display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--col-gray); font-size: 12px;}
.placeholder::before {content: ""; display: block; width: 2.2rem; aspect-ratio: 1; background: url("/img/icon/upload.svg") center/contain no-repeat;}
.upload-box img {width: 100%; height: 100%; object-fit: cover;}
.upload-box button {position: absolute; top: -6px; right: -6px; width: 2rem; aspect-ratio: 1; border-radius: 50%; background: var(--col-theme) url("/img/icon/close_wt.svg") center/1.1rem no-repeat;}

@media (max-width: 576px) {
    .reviewModal .prd-info {flex-direction: column;}
}



/* ============================================================
* 상품 문의 > 판매자 정보 확인
* ============================================================ */
.sellerInfoModal input:read-only {background: transparent;}