/* shop_common.css - 커스텀 쇼핑몰 페이지 통합 CSS */
/* 각 페이지는 BEM 네이밍으로 격리됨 */

/* ============================================================
   공통 모달 기본 스타일
   ============================================================ */
.modal-alert {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid var(--gray-300);
    border-radius:8px;
    font-size: var(--text-xl);
    line-height: 1.7;
    letter-spacing: -0.03em;
    
    padding:0.634em 1em;
}

.modal-alert__msg {
    color: var(--gray-800);
    
}

.modal-alert__member {
    color: #000;
    font-weight: 600;
}

/* 오버레이 */
.itemuse-modal__overlay,
.itemqa-modal__overlay,
.review-write-modal__overlay,
.table-review__modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

/* 모달 컨테이너 */
.itemuse-modal,
.itemqa-modal,
.review-write-modal,
.table-review__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 모달 콘텐츠 */
.itemuse-modal__content,
.itemqa-modal__content,
.review-write-modal__content,
.table-review__modal-content {
    position: relative;
    z-index: 10000;
    background: #fff;
    border-radius: 8px;
    padding:40px 60px;
    width: 90%;
    max-height: 96.5972vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.itemuse-modal__content {
    max-width:620px;
}

.itemuse-modal__comment {
    position: relative;
}

.itemuse-modal__ment {
    position: absolute;
    padding:1.25em 1.5em;
    inset:0;
    pointer-events:none;
    font-weight: 500;
    line-height: 1.7;
    color: var(--gray-400);
}

.itemuse-modal__ment span {
    color: var(--primary);
}

#itemuse_content:focus + .itemuse-modal__ment,
#itemuse_content:not(:placeholder-shown) + .itemuse-modal__ment {
    display: none;
}

/* 모달 헤더 */
.itemuse-modal__header,
.itemqa-modal__header,
.review-write-modal__header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.itemuse-modal__title,
.itemqa-modal__title,
.review-write-modal__title {
    font-size: var(--text-h7);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* 닫기 버튼 */
.itemuse-modal__close,
.itemqa-modal__close,
.review-write-modal__close,
.table-review__modal-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform:translateY(-50%);
}

.itemuse-modal__close:hover,
.itemqa-modal__close:hover,
.review-write-modal__close:hover,
.table-review__modal-close:hover {
    color: #333;
}


/* 필드 */
.itemuse-modal__field,
.itemqa-modal__field,
.review-write-modal__field {
    margin-bottom: 16px;
}

.itemuse-modal__field label,
.itemqa-modal__field label {
    display: block;
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 0.5em;
}

.itemuse-modal__field .frm_input,
.itemqa-modal__field .frm_input {
    width: 100%;
    box-sizing: border-box;
}

.itemuse-modal__field textarea,
.itemqa-modal__field textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* 인라인 필드 (체크박스) */
.itemqa-modal__field--inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.itemqa-modal__field--inline label {
    display: inline;
    margin-bottom: 0;
}

/* 모달 푸터 */
.itemuse-modal__footer,
.itemqa-modal__footer,
.review-write-modal__footer {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    text-align: center;
}

.itemuse-modal__submit,
.itemqa-modal__submit,
.review-write-modal__submit-btn {
    max-width: max-content;
    width: 100%;
    margin: 48px auto 0;
    padding:0.5em 1.4075em;
    font-size: var(--text-h8);
    font-weight: 600;
    color: #fff;
    background-color: var(--primary);
    border-radius:8px;
    transition: 0.3s;
}

.itemuse-modal__submit:hover,
.itemqa-modal__submit:hover,
.review-write-modal__submit-btn:hover {
    background: var(--secondary)
}

/* ============================================================
   사용후기 모달 — 이미지 첨부
   ============================================================ */

.itemuse-modal__int {
    display: flex;
    flex-direction:column;
    gap:16px;
}
.itemuse-modal__images {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:12px;
}

.itemuse-modal__img-slot {
    position: relative;
    aspect-ratio:1;
    border: 1px solid var(--gray-400);
    border-radius: 4px;
    overflow: hidden;
}

.itemuse-modal__img-preview {
    width: 100%;
    height: 100%;
}

.itemuse-modal__img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemuse-modal__img-add {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
}

.itemuse-modal__img-del {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

/* ============================================================
   사용후기/상품문의 모달 — 별점
  ============================================================ */
.itemuse-modal__prd {
    font-size: var(--text-h8);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.itemuse-modal__textarea {
    padding:20px 24px;
    height: 240px;
    border:1px solid var(--gray-300);
    border-radius: 8px;
}

.itemuse-modal__input {
    width: 100%;
    padding:0 24px;
    height: 3.334em;
    font-size: var(--text-xl);
    font-weight: 500;
    border:1px solid var(--gray-300);
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    letter-spacing: -0.03em;
}

.itemuse-modal__input::placeholder {
    color: var(--gray-400);
}

.itemuse-modal__stars,
.review-write-modal__stars {
    display: flex;
    justify-content: center;
    gap:8px;   
}

.itemuse-modal__rate {
    margin: 16px 0;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:4px;
}

.itemuse-modal__stars img,
.review-write-modal__stars img {
    width: 41px;
}

/* ============================================================
   리뷰 상세 모달 (오늘의 식탁) — 좌우 분할
   ============================================================ */
.table-review__modal-content {
    max-width: 1265px;
    width: 90%;
}

.table-review__modal-layout {
    display: flex;
    min-height: 500px;
}

/* 좌: 이미지 슬라이드 */
.table-review__modal-left {
    position: relative;
    width: 56.8%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.table-review__modal-left .swiper-button-prev,
.table-review__modal-left .swiper-button-next {
    width: 40px;
    height: 40px;
    background: none;
}

.table-review__modal-left .swiper-button-prev {
    left: 28px;
}

.table-review__modal-left .swiper-button-next {
    right: 28px;
}

.table-review__modal-left .swiper {
    width: 100%;
    height: 100%;
}

.table-review__modal-left .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-review__modal-left .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 우: 상품정보 + 리뷰 */
.table-review__modal-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding:64px;
}


.table-review__modal-product {
    font-size: var(--text-h8);
    font-weight: 600;
    line-height: 1.4;
}

.table-review__modal-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 12px;
}

.table-review__modal-stars {
    color: #f5a623;
    font-size: 16px;
}

.table-review__modal-date {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-400);
}

.table-review__modal-name {
    margin-top: 1.25em;
    padding:0.7em 1em;
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius:4px;
    border:1px solid var(--gray-200);
}

.table-review__modal-body {
    margin-top: 1.5em;
    font-size: var(--text-xs);
    line-height: 1.7;
    font-weight: 500;
}

/* 하단 썸네일 갤러리 */
.table-review__modal-thumbs {
    padding: 8px 24px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.table-review__modal-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.table-review__modal-thumb:hover {
    opacity: 1;
    border-color: #333;
}

.table-review__modal-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap:10px;
    justify-content: flex-end;
}

.table-review__modal-good-text {
    font-size: var(--text-3xs);
    color: var(--gray-400);
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .table-review__modal-layout {
        flex-direction: column;
    }
    .table-review__modal-left {
        flex: none;
        max-width: 100%;
        max-height: 300px;
    }
}

/* ============================================================
   리뷰 작성 모달 (로그인 시 유도)
   ============================================================ */
.review-write-modal__content {
    max-width: 500px;
}

.review-write-modal__desc {
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 1.6;
}

.review-write-modal__product {
    text-align: center;
    padding: 16px 0;
}

.review-write-modal__product-name {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}

.review-write-modal__textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.review-write-modal__attach {
    margin: 12px 0;
}

.review-write-modal__attach-btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
}

.review-write-modal__preview {
    margin-top: 8px;
}

.review-write-modal__done {
    text-align: center;
    padding: 40px 24px;
}

.review-write-modal__done-title {
    font-size: 20px;
    margin-bottom: 12px;
}

.review-write-modal__done-close {
    margin-top: 20px;
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 30px;
    cursor: pointer;
    border-radius: 4px;
}

/* ============================================================
   비밀글 비밀번호 입력 (상품 Q&A)
   ============================================================ */
.sit_qa_secret {
    padding: 24px;
    text-align: center;
    background-color: var(--gray-50);
}

.sit_qa_secret__text {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-800);
    letter-spacing: -0.03em;
}

.sit_qa_secret__form {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.sit_qa_secret__btn {
    background-color: var(--primary);
    color: #fff;
    padding: 0 2em;
}

/* .sit_qa_secret 반응형 */
@media (max-width:769px){
    .sit_qa_secret { padding: 16px; }
    .sit_qa_secret__text { font-size: var(--text-2xs); }
    .sit_qa_secret__btn { padding: 0 1.4em; font-size: var(--text-xs); }
}

@media (max-width:501px){
    .sit_qa_secret { padding: 14px; }
    .sit_qa_secret__form { gap: 6px; }
    .sit_qa_secret__input {
        flex: 1;
        min-width: 0;
        height: 2.4em;
        font-size: var(--text-xs);
    }
    .sit_qa_secret__btn {
        padding: 0 1em;
        font-size: var(--text-2xs);
        white-space: nowrap;
    }
}


/* ============================================================
   구매 후 후기 유도 모달
   ============================================================ */
.purchase-review-modal__overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.purchase-review-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.purchase-review-modal__content {
    position: relative;
    z-index: 10000;
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.purchase-review-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    background: none; border: none;
    font-size: 20px; color: #999; cursor: pointer;
}

.purchase-review-modal__header {
    padding: 28px 24px 16px;
    text-align: center;
}

.purchase-review-modal__title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px;
}

.purchase-review-modal__point {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.purchase-review-modal__point span {
    font-weight: 700;
    color: #e74c3c;
}

.purchase-review-modal__body {
    padding: 0 24px 16px;
}

.purchase-review-modal__label {
    font-size: 12px;
    color: #999;
    margin: 0 0 8px;
}

.purchase-review-modal__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
}

.purchase-review-modal__item-img {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #eee;
}

.purchase-review-modal__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase-review-modal__item-name {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

.purchase-review-modal__footer {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.purchase-review-modal__submit {
    width: 100%;
    padding: 14px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.purchase-review-modal__submit:hover {
    background: #555;
}

.purchase-review-modal__later {
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    font-size: 13px;
    color: #999;
    cursor: pointer;
}

/* ============================================================
   상품 상세 하단 고정 바
   ============================================================ */
.fixed-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9000;
    background-color: var(--gray-50);
}

.fixed-bar__basic {
    padding:20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fixed-bar__product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fixed-bar__thumb {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.fixed-bar__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fixed-bar__name {
    font-size: var(--text-h8);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.fixed-bar__price {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fixed-bar__discount-rate {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 3.3889em;
    height: 2.2778em;
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #fff;
    background-color: var(--primary);
    border-radius:4px;
}

.fixed-bar__sell-price {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.fixed-bar__cust-price {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.fixed-bar__buy-btn {
    width: 11.75em;
    height: 3.75em;
    font-weight: 700;
    background-color: var(--primary);
    color: #fff;
    letter-spacing: -0.03em;
}

.fixed-bar__panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    background-color: var(--gray-100);
    border-top: 1px solid #ddd;
    padding: 20px 24px;
    box-sizing: border-box;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.fixed-bar__panel-close {
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 32px;
}

.fixed-bar__panel-layout {
    position: relative;
    display: flex;
    align-items: center;
}

.fixed-bar__panel-left {
    flex: 1;
}

.fixed-bar__option-list {
    gap:10px;
    padding-left: 153px;
    max-height:calc(12em + 20px);
    overflow: auto;
}

.fixed-bar__option-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;    
    gap:8px;
    height: 4em;
    padding:0 1.25em;
    background-color: var(--gray-50);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.fixed-bar__option-item:last-child {
    margin-bottom: 0;
}

.fixed-bar__option-name {
    font-size: var(--text-xl);
    font-weight: 700;
}

.fixed-bar__option-price {
    font-size: var(--text-xs);
    color: var(--gray-800);
    margin-right: auto;
}

.fixed-bar__option-qty {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fixed-bar__qty-minus,
.fixed-bar__qty-plus,
.fixed-bar__qty-input {
    width: 2em;
    height: 2em;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
}

.fixed-bar__option-subtotal {
    min-width: 80px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
}

.fixed-bar__option-soldout {
    color: #e74c3c;
    font-size: 12px;
}

.fixed-bar__panel-right {
    margin-left: 50px;
    padding-left: 50px;
    border-left:1px solid #fff;
}

.fixed-bar__total {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--gray-800);
}

.fixed-bar__total-price {
    font-size: var(--text-h6);
    font-weight: 700;
    color: #000;
    margin-left: 0.75em;
}

.fixed-bar__total-qty {
    margin-left: 0.5em;
}

.fixed-bar__actions {
    display: flex;
    gap: 8px;
}

.fixed-bar__action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9.3125em;
    height: 3.75em;
    font-weight: 700;
    color: var(--primary);
    background-color: #fff;
    border:1px solid var(--primary)
}

.fixed-bar__action-btn--buy {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

.fixed-bar__pay {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.fixed-bar__pay-naver,
.fixed-bar__pay-kakao {
    flex: 1;
}

/* .fixed-bar 반응형 */
@media (max-width:1441px){
    .fixed-bar__option-list { padding-left: 0; }
}

@media (max-width:1281px){
    .fixed-bar__option-item {
        flex-wrap: wrap;
        row-gap: 6px;
        height: auto;
        padding: 0.75em 1.25em;
    }
    .fixed-bar__option-name { order: 1; }
    .fixed-bar__option-price {
        order: 2;
        flex: 0 0 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .fixed-bar__option-qty { order: 3; }
    .fixed-bar__option-subtotal {
        order: 3;
        margin-left: auto;
    }
}

@media (max-width:1025px){
    .fixed-bar__option-list {
        padding-left: 0;
        max-height: calc(10em + 16px);
    }
    .fixed-bar__panel-right {
        margin-left: 24px;
        padding-left: 24px;
    }
    .fixed-bar__action-btn {
        width: 8em;
        height: 3.2em;
        font-size: var(--text-sm);
    }
    .fixed-bar__buy-btn {
        width: 10em;
        height: 3.2em;
        font-size: var(--text-sm);
    }
}

@media (max-width:769px){
    .fixed-bar__basic { padding: 12px 0; gap: 10px; }
    .fixed-bar__thumb { width: 48px; height: 48px; }
    .fixed-bar__name { font-size: var(--text-sm); }
    .fixed-bar__discount-rate {
        width: 2.8em;
        height: 1.8em;
        font-size: var(--text-sm);
    }
    .fixed-bar__sell-price { font-size: var(--text-sm); }
    .fixed-bar__cust-price { display: none; }
    .fixed-bar__buy-btn {
        width: auto;
        padding: 0 1em;
        height: 3em;
        font-size: var(--text-sm);
    }
    .fixed-bar__panel { padding: 40px 16px 16px; }
    .fixed-bar__panel-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .fixed-bar__panel-right {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #fff;
        padding-top: 14px;
    }
    .fixed-bar__option-item {
        flex-wrap: nowrap;
        row-gap: 0;
        padding: 0.75em;
        min-height: 3.2em;
        gap: 6px;
    }
    .fixed-bar__option-item::after { content: none; }
    .fixed-bar__option-name { order: 0; font-size: var(--text-sm); }
    .fixed-bar__option-price {
        order: 0;
        margin-right: auto;
        margin-left: 0;
    }
    .fixed-bar__option-qty { order: 0; }
    .fixed-bar__option-subtotal {
        order: 0;
        margin-left: 0;
    }
    .fixed-bar__actions { flex-wrap: wrap; }
    .fixed-bar__action-btn {
        flex: 1;
        width: auto;
        min-width: 6em;
        height: 2.8em;
        font-size: var(--text-xs);
    }
}

@media (max-width:501px){
    .fixed-bar__product { gap: 8px; }
    .fixed-bar__thumb { width: 40px; height: 40px; }
    .fixed-bar__name {
        font-size: var(--text-xs);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .fixed-bar__discount-rate { font-size: var(--text-xs); }
    .fixed-bar__sell-price { font-size: var(--text-xs); }
    .fixed-bar__buy-btn {
        padding: 0 0.8em;
        font-size: var(--text-xs);
        height: 2.6em;
    }
    .fixed-bar__panel { padding: 14px; }
    .fixed-bar__action-btn--wish { width: 100%; flex: none; }
    .fixed-bar__total-price { font-size: var(--text-h7); }

    /* 옵션 아이템 — 1281 버전 2행 레이아웃 재적용 */
    .fixed-bar__option-item {
        flex-wrap: wrap;
        row-gap: 8px;
        height: auto;
        padding: 0.75em 1em;
    }
    .fixed-bar__option-item::after {
        content: "";
        flex-basis: 100%;
        height: 0;
        order: 2;
    }
    .fixed-bar__option-name { order: 1; }
    .fixed-bar__option-price {
        order: 1;
        margin-right: 0;
        margin-left: auto;
    }
    .fixed-bar__option-qty { order: 3; }
    .fixed-bar__option-subtotal {
        order: 3;
        margin-left: auto;
    }
}

/* ============================================================
   주문 페이지 레이아웃
   ============================================================ */
.order-form {
    padding: 66px 0 100px;
}
.order-layout {
    position: relative;
    display: flex;
    gap: 20px;    
    margin-top: 62px;
    padding-left: 115px;
}

.order-layout__left {
    display: flex;
    flex-direction:column;
    gap:60px;
    flex: 1;
    min-width: 0;
}

.order-layout__right {
    padding-top: 50px;
    flex: 0 0 440px;
    position: relative;
}

.order-products {
    padding-bottom: 18px;
    display: flex; 
    justify-content: space-between;
    border-bottom:2px solid #000;
}

.order-products__title {
    font-size: var(--text-h7);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.order-floating {
    position: sticky;
    top: 178px;
    background: #fff;
    background-color: var(--gray-50);
    border-radius:8px;
    padding: 40px;
}

.order-floating__summary {
    display: flex;
    flex-direction:column;
    padding:20px 0;
    gap:20px;
}

.order-floating__row {
    display: flex;
    justify-content: space-between;
}

.order-floating__label {
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--gray-800);
}

.order-floating__value {
    font-weight: 600;
    letter-spacing: -0.03em;
}

.order-floating__value--discount {
    color: #e74c3c;
}

.order-floating__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-300);
}

.order-floating__total {
    padding-top: 19px;
}

.order-floating__total-price {
    font-size: var(--text-h6);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.order-floating__submit {
    margin: 1.1em 0 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    height: 3.334em;
    background-color: var(--primary);
    color: #fff;
}

.order-floating__terms {
    font-size: 13px;
}

.order-floating__terms-all {
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray-400);
}

.order-floating__terms-item {
    margin-bottom: 8px;
}

.order-floating__terms-item:last-child {
    margin-bottom: 0;
}

.order-floating__terms-item a {
    flex:1;
    display: flex;
    justify-content: space-between;
}

/* 구매상품 목록 */

.order-products__item {
    display: grid;
    grid-template-columns: 120px 1fr repeat(2, 100px);
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-300);
    place-items:center;
}

.order-products__img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.order-products__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-products__info {
    flex: 1;
}

.order-products__detail {
    width: 100%;
    padding:0 20px;
}

.order-products__name {
    font-weight: 500;
    letter-spacing: -0.03em;
}

.order-products__option {
    font-size: var(--text-xs);
    color: var(--gray-600);
}

.order-products__qty {
    font-weight: 600;
    text-align: center;
}

.order-products__price {
    font-weight: 600;
}

/* 약관 모달 */
.order-term-modal__overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}

.order-term-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-term-modal__content {
    position: relative;
    z-index: 10000;
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.order-term-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
}

.order-term-modal__title {
    margin: 0;
    font-size: 16px;
}

.order-term-modal__close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.order-term-modal__body {
    padding: 24px;
    font-size: 13px;
    line-height: 1.7;
}

/* ============================================================
   구매후기 스킨
   ============================================================ */
.itemuse-header__ctrl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:8px 0 20px;
}

.itemuse-header__write-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: var(--primary);
   color: #fff;
   font-size: var(--text-xl);
   width: 7.723em;
   height: 2.2778em;
   border-radius: 8px;
}

.itemuse-header__cnt {
    font-size: var(--text-h7);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.itemuse-header__cnt span {
    color: var(--primary);
}

.itemuse-header__cnt--sub{display:block; var(--text-h6); color:var(--gray-800); margin:1em 0 1.5em;}

.itemuse-stats {
    display: flex;
    gap: 24px;
    padding: 20px;
    border: 1px solid #eee;
    margin-bottom: 16px;
}

.itemuse-stats__avg {
    text-align: center;
    min-width: 100px;
}

.itemuse-stats__stars {
    color: #f5a623;
    font-size: 18px;
}

.itemuse-stats__score {
    font-size: 28px;
}

.itemuse-stats__bars {
    flex: 1;
}

.itemuse-stats__bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
}

.itemuse-stats__bar-bg {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.itemuse-stats__bar-fill {
    height: 100%;
    background: #f5a623;
}

.itemuse-stats__photos {
    min-width: 200px;
}

.itemuse-stats__photos-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.itemuse-stats__photo-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
}

.itemuse-photo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:22px 0;
}

.itemuse-photo-toggle__btn {
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: -0.03em;
    gap:0.5em;
}

.itemuse-photo-toggle__btn:before {
    content:'';
    display: inline-block;
    width: 1.7142em;
    height: 1.7142em;
    background: url('../../include/img/review_photo_icon.svg') no-repeat center / cover;
}

.itemuse-photo-toggle__alert {
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: -0.03em;
    gap:0.5em;
}

.itemuse-photo-toggle__alert:after {
    content:'';
    display: inline-block;
    width: 1.4286em;
    height: 1.4286em;
    background: url('../../include/img/review_q_icon.svg') no-repeat center / cover;
}

.itemuse-photo-toggle__point {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding:16px;
    display: flex;
    align-items: center;
    gap:12px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: -0.02em;
    border:1px solid #000;
    border-radius:12px;
    background-color: #fff;
}

@media(max-width:769px){
    .itemuse-photo-toggle {
        flex-direction: column;
        gap:8px;
        align-items: flex-start;
    }
}


.itemuse_cards {
    border-top: 1px solid var(--gray-300);
}

.itemuse-card {
    display: flex;
    justify-content: space-between;
    align-items: center;    
    border-bottom: 1px solid var(--gray-300);
}

.itemuse-card__left {
    padding: 56px 0;
    flex: 1;
    border-right:1px solid var(--gray-300)
}

.itemuse-card__right {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    /* (2026-08-21) 310px 고정이라 내용(약 140px)보다 훨씬 넓어 오른쪽이 텅 빈 채로 커 보였다.
       flex 기본값(shrink:1)이라 좁은 화면에서는 반대로 본문 열을 95px 까지 찌그러뜨렸다.
       → 폭을 줄이고 줄어들지 않게 고정한다. */
    width: 220px;
    flex: 0 0 220px;
    padding: 24px 0;
}

/* (2026-08-21) 작성자/날짜/도움됐어요 묶음. 원래 스타일이 하나도 없어 정렬·간격 제어가 안 됐다. */
.itemuse-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.itemuse-card__stars {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.itemuse-card__stars img {
    width: 24px;
}

.itemuse-card__title {
    font-size: var(--text-h8);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.itemuse-card__text {
    margin-top: 1.1em;
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--gray-800);
}

.itemuse-card__more {
    margin-top: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6em;
    height: 2.0833em;
    font-size: var(--text-3xs);
    color: var(--gray-400);
    border:1px solid var(--gray-400);
    border-radius:2em;

}

.itemuse-card__images {
    margin-top: 24px;
    display: flex;
    gap: 12px;
}

.itemuse-card__img {
    width: 160px;
    height: 160px;
    object-fit: cover;
}

.itemuse-card__name {
    display: flex;
    /* (2026-08-21) display:flex 라서 <b>이름</b> 과 '회원' 사이 공백 텍스트가 사라진다 → gap 으로 대체 */
    gap: 0.25em;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-800);
}

.itemuse-card__date {
    /* (2026-08-21) margin 1em(=18px) + 18px 글자라 우측 열이 세로로 크게 부풀었다. */
    margin: 0;
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-400);
}

.itemuse-header__filter {
    width: 8.8889em;
    height: 2.2778em;
    font-size: var(--text-xl);
    font-weight: 600;
    border:1px solid var(--gray-400);
    color: var(--gray-800);
    border-radius: 8px;
    letter-spacing: -0.03em;
    padding:0 0.75em;
    background: url('../../include/img/review_select_arrow.svg') no-repeat center right 0.75em / 1.112em 1.112em;
    appearance: none;
}

.itemuse-card__good {
    display: flex; 
    align-items: center;
}

.itemuse-card__msg {
    font-size: var(--text-3xs);
    color: var(--gray-400);
}

.itemuse-card__good-btn {
    font-size: var(--text-3xs);
    color: var(--gray-400);
    border:1px solid var(--gray-400);
    border-radius:2em;
    padding:0 0.5em;
    margin-left: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.5em;
}

/* (2026-08-21) 구매후기 카드 모바일 대응.
   원래 이 컴포넌트에는 미디어쿼리가 하나도 없어서 390px 에서도 좌우 2단이 유지됐고,
   본문 열이 95px 까지 찌그러져 글자가 세로로 늘어졌다. → 세로 스택으로 바꾼다. */
@media (max-width: 769px) {
    .itemuse-card { flex-direction: column; align-items: stretch; }
    .itemuse-card__left { padding: 28px 0 0; border-right: 0; }
    .itemuse-card__right {
        width: 100%;
        flex: 0 0 auto;
        align-items: flex-start;
        padding: 14px 0 28px;
    }
    .itemuse-card__info {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        width: 100%;
        text-align: left;
    }
    .itemuse-card__good { margin-left: auto; }
    /* 사진 4장이면 160px x 4 + gap 이 화면을 넘어간다 */
    .itemuse-card__img { width: 21vw; height: 21vw; }
}


/* ============================================================
   상품 목록 (list.30)
   ============================================================ */
.shop-list__badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.75em;
    height: 2.0834em;
    text-align: center;
    font-size: var(--text-h7);
    font-weight: 600;
    color: #fff;
    background-color: var(--fourth);
    border-radius :0.3334em;
}

/* 상품 카드 호버 시 노출되는 액션(장바구니/바로구매) 오버레이 */
.shop-list__price {
    display: flex;
    align-items: center;
}

.shop-list__cust-price {
    margin-left: auto;
    padding-left: 10px;
    font-size: var(--text-h8);
    text-decoration: line-through;
    color: var(--gray-500);
}

.shop-list--all .shop-list__sell-price {
    margin-left: 0.3em;
}

@media(hover:hover){
    .shop-list__link:hover .shop-list__frame {
        border-radius:20px;
    }

    .shop-list__link:hover .shop-list__timer {
        border-radius:20px 20px 0 0;
    }
}

@media (max-width:1025px){
    .shop-list--all {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width:769px){
    .shop-list--all {grid-template-columns: repeat(2, 1fr);}
}


.prd-banner {
    padding: 37px 0 15px;
}

@media(max-width:501px){
    .prd-banner {padding-top: 0;}
}

.table-review__categories {
    display: flex;
    overflow: auto;
    margin-bottom: 60px;
    gap:10px;
}
.table-review__cat-row{display: flex; gap:10px;}

.table-review__cat-btn {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-700);
    text-align: center;    
    min-height: 40px;
    padding:0.25em 1.5em;
    border-radius:20px;
    border:1px solid var(--gray-400);
    transition: 0.3s;
    white-space:nowrap;
}

.table-review__cat-btn[aria-current="page"]{
    border-color: var(--primary);
    background-color: var(--primary);
    color: #fff;
}

.table-review__toolbar {
    display: flex;
    justify-content: space-between;
    gap:20px;
}

.table-review__search {
    display: flex;
    align-items: center;
    font-size: var(--text-h8);
    padding-right: 1em;
    width: 16.25em;
    height: 3em;
    border:1px solid var(--gray-400);
    border-radius: 8px;
}

.table-review__search-input {    
    width: calc(100% - 1em);
    font-weight: 500;
    letter-spacing: -0.03em;
    padding: 0 1em ;    
}

.table-review__search-input::placeholder {
    color: var(--gray-400);
}

.table-review__search-btn {
    min-width: 1em;
}

.table-review__list {
    padding-top: 80px;
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
    gap:40px 20px;
}

.table-review__link {
    display: block;
    position: relative;

}


.table-review__card {
    display: flex;
    flex-direction:column;
    border-radius:8px;
    overflow: hidden;
    box-shadow:0 0 12px rgba(0,0,0,0.25);
}

.table-review__link img {
    height: auto;
    width: 100%;
}

.table-review__card-product {
    position: absolute;
    z-index: 1;
    inset:0;
    bottom:auto;
    display: flex;
    flex-direction:column;
    align-items: flex-start;
    padding:16px;
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    font-size: var(--text-xl);
    font-weight: 700;
    gap:8px;
}



.table-review__card-cate {
    flex-shrink: 0;
    padding:0.4253em 1.2797em;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    border-radius:4px;
    background-color: #000;
    font-size: 1rem;
}

.table-review__card-title {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.table-review__card-info {
    flex:1;
    padding:24px;
}

.table-review__card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.table-review__card-text {
    padding-bottom: 0.5em;
    line-height: 1.4;
    color: var(--gray-700);
}

.table-review__card-more {
    display: flex;
    justify-content: center;
    align-items: center;;
    width: 6em;
    height: 2.0834em;
    margin: auto 0 0 auto;
    font-size: var(--text-3xs);
    color: var(--gray-400);
    border:1px solid var(--gray-400);
    gap:4px;
    border-radius:1em;
    transition: 0.3s;
}

.table-review__card-more:after {
    content:'';
    display: block;
    width: 0.6667em;
    height: 0.6667em;
    background: url('../../include/img/shop_more_icon.svg') no-repeat center / cover;    
}

.table-review__card-name {
    display: flex;
    align-items: center;
    letter-spacing: -0.03em;
    font-weight: 500;
}

/* .table-review__card-name:before {
    content:'';
    display: inline-block;
    width: 1px;
    height: 0.75em;
    background-color: var(--gray-400);
    margin:0 1.5em;
} */

.table-review__card-date {
    margin-left: auto;
    font-weight: 500;
    color: var(--gray-400);
}

.table-review__card-stars {
    display: flex; 
    align-items: center;
    gap:4px;
    margin-bottom: 16px;
    width: 100%;
}

.table-review__card-body {
    display: flex;
    flex-direction:column;
    margin:12px 0 8px;
    padding:16px 0;
    min-height: 111px;
    border-top:1px solid var(--gray-400);
    border-bottom:1px solid var(--gray-400);
}

.table-review__card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-review__card-good-text {
    font-size: var(--text-3xs);
    color: var(--gray-400);
    letter-spacing: -0.03em;
}

.table-review__card-good-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:4px;
    width: 52px;
    height: 20px;
    border:1px solid var(--gray-400);
    border-radius:20px;
    font-size: var(--text-3xs);
    color: var(--gray-400);
    transition: 0.3s;
}

.table-review__card-good-btn.is-good{
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.table-review__card-good-btn.is-good img {
    filter: brightness(0) invert(1)
}

.table-review__card-good-btn img {
    transition: 0.3s;
}

.table-review__empty {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius:16px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    padding:40px 16px;
    letter-spacing: -0.03em;
    color: var(--gray-400);
}

@media(hover:hover){
    .table-review__cat-btn:hover {
        border-color: var(--primary);
        background-color: var(--primary);
        color: #fff;
    }

    .table-review__card-good-btn:hover {
        background-color: var(--primary);
        border-color: var(--primary);
        color: #fff;        
    }

    .table-review__card-good-btn:hover img {
        filter: brightness(0) invert(1)
    }
    
    .table-review__card-more:hover {
        background-color: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
}

/* ============================================================
   table.skin 반응형
   ============================================================ */
.table-review__filter-toggle { display: none; }

@media (max-width:1025px){
    .table-review__categories { grid-template-columns: repeat(6, 1fr); }
    .table-review__list {
        padding-top: 60px;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 16px;
    }
    .table-review__cat-btn { font-size: var(--text-sm); }
    .table-review__card-product { padding: 20px 18px; }
}

@media (max-width:769px){
    .table-review__filter { margin-bottom: 8px; }
    .table-review__filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--gray-400);
        border-radius: 8px;
        background: #fff;
        font-size: var(--text-sm);
        color: var(--gray-700);
        text-align: left;
        cursor: pointer;
    }
    .table-review__filter-toggle strong { color: var(--primary); font-weight: 600; }
    .table-review__filter-arrow {
        margin-left: auto;
        width: 0; height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--gray-700);
        transition: transform 0.2s;
    }
    .table-review__filter[aria-expanded="true"] .table-review__filter-arrow { transform: rotate(180deg); }
    .table-review__categories {
        display: none;
        grid-template-columns: repeat(4, 1fr);
        margin: 8px 0 0;
    }
    .table-review__filter[aria-expanded="true"] .table-review__categories { display: grid; }
    .table-review__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .table-review__search { width: 100%; font-size: var(--text-sm); }
    .table-review__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .table-review__card-info { padding: 16px; }
    .table-review__card-body {
        min-height: auto;
        margin: 10px 0 6px;
        padding: 14px 0;
    }
    .table-review__card-name:before { margin: 0 0.75em; }
    .table-review__card-cate { font-size: var(--text-xs); }
    .table-review__card-product { font-size: var(--text-sm); padding: 18px 16px; }
    .table-review__card-meta { flex-wrap: wrap; row-gap:12px;}
    .table-review__card-name:before {display: none;}
    .table-review__card-stars { width: 100%; }
}

@media (max-width:501px){
    .table-review__categories {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .table-review__cat-btn { height: 36px; font-size: var(--text-xs); }
    .table-review__list {
        grid-template-columns: 1fr;
        padding-top: 40px;
        gap: 24px;
    }
    .table-review__card-product { padding: 14px 12px; font-size: var(--text-xs); }
    .table-review__card-cate { font-size: var(--text-2xs); padding: 0.35em 0.9em; }
    .table-review__card-info { padding: 14px; }
    .table-review__card-text { font-size: var(--text-sm); }
    .table-review__card-footer { flex-wrap: wrap; gap: 6px; }
}

.middle-review { margin-top: 200px;}
.middle-review--mt0 {margin-top: 0;}
.middle-review__container {display: flex; justify-content: space-between; gap: 24px; background-color: var(--gray-50); border-radius:12px; padding:40px 58px 37px 70px;}
.middle-review__summary {display: flex; gap:60px;}
.middle-review__left { text-align: center; min-width: 100px; }
.middle-review__stars {display: flex; gap:4px; margin-bottom: 16px;}
.middle-review__stars img {width: 20px;}
.middle-review__value {display: flex; align-items: center; justify-content: center; font-size: clamp(1.625rem, 1.227rem + 1.99vw, 2.5rem); font-weight: 700; color: var(--gray-300);}
.middle-review__avg {font-size: inherit; font-weight: inherit; color: #000;}
.middle-review__count {display: block; font-size: var(--text-xs); line-height: 1.4; font-weight: 500; letter-spacing: -0.03em;}
.middle-review__center { flex: 1; }
.middle-review__bar-row { display: flex; align-items: center; margin-bottom: 4px; font-size: var(--text-xs); font-weight: 500;}
.middle-review__bar-row:last-child {margin-bottom: 0;}
.middle-review__bar-unit {min-width: 1.85em;}
.middle-review__bar-bg {width: 244px; height: 10px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.middle-review__bar-fill { height: 100%; background: var(--gray-400); }
.middle-review__bar-fill--top { background: var(--secondary); }
.middle-review__bar-pnt {margin-left: 0.6em}
.middle-review__right { min-width: 200px; }
.middle-review__photo-title {font-size: var(--text-xs); font-weight: 500; letter-spacing: -0.03em;}
.middle-review__photo-list {display: grid; grid-template-columns: repeat(5, 1fr); gap:8px;}
.middle-review__photo-list img {width: 100px; height: 100px; object-fit: cover; border-radius: 4px; cursor: pointer; }

/* .middle-review 반응형 */
@media (max-width:1025px){
  .middle-review { margin-top: 120px; }
  .middle-review__container { padding: 32px 28px; gap: 20px; }
  .middle-review__summary { gap: 32px; }
  .middle-review__bar-bg { width: 180px; }
  .middle-review__photo-list { grid-template-columns: repeat(4, 1fr); }
  .middle-review__photo-list img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

@media (max-width:769px){
  .middle-review { margin-top: 80px; }
  .middle-review__container {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 28px 24px;
  }
  .middle-review__right { min-width: 0; width: 100%; }
  .middle-review__bar-bg { flex: 1; width: auto; min-width: 120px; }
  .middle-review__bar-row { gap: 8px; }
}

@media (max-width:501px){
  .middle-review { margin-top: 60px; }
  .middle-review__container { padding: 20px 16px; gap: 20px; }
  .middle-review__summary { flex-direction: column; gap: 20px; }
  .middle-review__left { min-width: 0; }
  .middle-review__stars { justify-content: center; margin-bottom: 8px; }
  .middle-review__photo-list { grid-template-columns: repeat(3, 1fr); }
}

.form-grid {padding-top: 20px; display: flex; flex-direction:column; gap:20px;}
.form-grid br {display: none;}
.form-row {position: relative; z-index: 0; display: flex; align-items: center; gap:20px;}
.form-row--block {display: block;}
.form-row--line {min-height: 90px; border-bottom:1px solid var(--gray-400); padding:32px 0;}
.form-row--direct {flex-wrap:wrap;}
.form-column {display: flex; flex-direction:column; gap:20px;}
.form-column--sm {gap:12px;}
.form-label{font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.03em; text-align:left; flex:1;}
.form-label__req:after {content:''; display: inline-block; width: 0.445em; height: 0.445em; border-radius:50%; background-color: var(--secondary); vertical-align: middle; margin-left: 0.5em;}
.form-control,
.form-info {min-width: 0; width: 555px;}
.form-info {font-size: var(--text-xl); font-weight: 500; color: #666; letter-spacing: -0.03em;}
.form-btn {width: 11.612em; height: 3.2778em; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.03em; background-color: var(--primary); color: #fff; font-weight: 700;}
.form-input {font-size: var(--text-xl); font-weight: 500; border:1px solid var(--gray-400); padding: 0 1em; height: 3.334em;}
.form-input::placeholder {color: var(--gray-400);}
.form-select {font-size: var(--text-xl); font-weight: 500; border:1px solid var(--gray-400); padding: 0 1em; height: 3.334em; background: url('../../include/img/review_select_arrow.svg') no-repeat center right 1em / 1.7778em 1.7778em}
.form-select--email {width: 11.6667em; appearance: none;}
.form-select--flex {flex: 1;}
.form-select--full {width: 100%;}
.form-input--flex {flex:1;}
.form-input--full {width: 100%;}
.form-radios {display: flex; gap:32px;}
.form-radios .ui-label {min-width: auto;}

.total-point__status {display: flex; justify-content: space-between;}
.total-point__calc {display: flex; align-items: center; gap:8px;}
.total-point__value {width: 8.75em; font-size: inherit; background-color: #f5f5f5; border:1px solid #d9d9d9; height: 2.5em; border-radius:4px; text-align:right; padding:0 0.5em; color: #666;}
.total-point__desc {margin-top: 0.5em;}

.guest-order {padding:97px 0 152px;}
.guest-order__form {max-width:702px; width: 100%; margin: 38px auto 0; padding:0 16px; text-align: center;}
.guest-order__container {padding:28px 17.217%; border:1px solid var(--gray-300)}
.guest-order__account {display: flex; justify-content: center; align-items: center; font-size: var(--text-h7); font-weight: 500; color: var(--primary); letter-spacing: -0.03em; min-height: 2.5em; padding:0.5em; background-color: var(--gray-50); margin:20px 0;}
.guest-order__account strong {position: relative; font-weight: 700; margin-left: 12px; padding-left: 12px;}
.guest-order__account strong:before {position: absolute; top:50%; left: 0; transform:translateY(-50%); width: 1px; height: 60%; background-color: var(--gray-400); content:''; display: block;}
.guest-order__desc {font-size: var(--text-h6); font-weight: 600; color: var(--gray-800); letter-spacing: -0.03em;}
.guest-order__fieldset {display: flex; flex-direction:column; gap:12px; margin-top: 20px;}
.guest-order__error {padding-top: 1em; font-size: var(--text-xs); font-weight: 500; line-height: 1.7; letter-spacing: -0.03em; color: var(--gray-800);}
.guest-order__input {text-align: center;}
.guest-order__submit {margin-top: 1.1112em; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.03em; background-color: var(--primary); color: #fff; width: 100%; height: 3.334em;}

/* 핸드폰번호 다건 조회 - 주문 목록 */
.guest-order__result {max-width:702px; width:100%; margin:38px auto 0; padding:0 16px; text-align:center;}
.guest-order__list {display:flex; flex-direction:column; gap:12px; margin-top:24px; text-align:left;}
.guest-order__order {border:1px solid var(--gray-300); background-color:#fff; transition:border-color .15s ease, box-shadow .15s ease;}
.guest-order__order:hover {border-color:var(--primary); box-shadow:0 2px 10px rgba(0,0,0,0.06);}
.guest-order__order-link {display:block; padding:18px 20px; color:inherit;}
.guest-order__order-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.guest-order__order-date {font-size:var(--text-sm); color:var(--gray-600); letter-spacing:-0.03em;}
.guest-order__order-status {font-size:var(--text-xs); font-weight:700; color:var(--primary); letter-spacing:-0.03em;}
.guest-order__order-name {font-size:var(--text-h7); font-weight:600; color:var(--gray-800); letter-spacing:-0.03em; line-height:1.4;}
.guest-order__order-foot {display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-200);}
.guest-order__order-no {font-size:var(--text-xs); color:var(--gray-500); letter-spacing:-0.03em;}
.guest-order__order-price {font-size:var(--text-lg); font-weight:700; color:var(--gray-900); letter-spacing:-0.03em;}
.guest-order__again {display:inline-block; margin-top:24px; font-size:var(--text-sm); font-weight:500; color:var(--gray-600); text-decoration:underline; letter-spacing:-0.03em;}
.guest-order__again:hover {color:var(--primary);}

/* (2026-08-14) 비회원 다건 목록을 마이페이지 주문내역조회와 동일한 구성(.my-order / .junam-list)으로 교체.
   목록·탭·필터 스타일은 include/common.css 의 마이페이지 규칙을 그대로 쓰므로 여기서는 래퍼만 잡는다. */
.guest-order .my-order {width:100%;}
.guest-order__foot {margin-top:32px; text-align:center;}
.guest-order__foot .guest-order__again {margin-top:0;}


/* ============================================================
   페이지별 자리 표시 — 프론트 작업용
   ============================================================ */

/* === 마이페이지 공통 === */
/* my-dashboard__, my-point__, my-posts__, my-wishlist__, my-coupon__ */

/* === 오늘의 특가 === */
/* deal__, deal__sort-btn, deal__cover, deal__countdown */

/* === 오늘의 식탁 (리뷰) === */
/* table-review__, table-review__card, table-review__modal */

/* === 장바구니 추천 === */
/* cart-recommend__ */

/* === 비회원 주문 조회 === */
/* guest-order__ */

/* === 상품 상세 체크박스 옵션 === */
/* sit_option--checkbox, sit_option_chk__ */


/* ============================================================
   .guest-order 반응형 (비밀번호 확인 / 비회원 주문조회)
   ============================================================ */
@media (max-width: 1321px) {
    .guest-order { padding: 80px 0 120px; }
    .guest-order__container { padding: 28px 10%; }
}

@media (max-width: 1025px) {
    .guest-order { padding: 60px 0 90px; }
    .guest-order__container { padding: 24px 6%; }
    .guest-order__desc { font-size: var(--text-h7); }
}

@media (max-width: 769px) {
    .guest-order { padding: 40px 0 60px; }
    .guest-order__form { margin-top: 24px; padding: 0 16px; }
    .guest-order__container { padding: 20px 16px; }
    .guest-order__account {
        font-size: var(--text-sm);
        flex-direction: column;
        gap: 4px;
        padding: 14px;
        min-height: 0;
    }
    .guest-order__account strong { margin-left: 0; padding-left: 0; }
    .guest-order__account strong:before { display: none; }
    .guest-order__desc { font-size: var(--text-h8); }
    .guest-order__submit { font-size: var(--text-lg); height: 3em; }
}

@media (max-width: 501px) {
    .guest-order { padding: 30px 0 50px; }
    .guest-order__container { padding: 18px 14px; }
    .guest-order__desc { font-size: var(--text-sm); }
    .guest-order__error { font-size: var(--text-2xs); }
    .guest-order__submit { font-size: var(--text-sm); }
}


/* ============================================================
   주문 결제 페이지 (orderform) 반응형
   order-layout / order-products / order-floating / form-* / order-term-modal
   ============================================================ */

@media (max-width: 1321px) {
    .order-layout { padding-left: 40px; margin-top: 40px; }
    .order-layout__right { flex: 0 0 380px; }
    .order-floating { padding: 32px; }
    .order-form .int-panel__title { font-size: var(--text-h4); }

    .form-info,
    .form-input,
    .form-select,
    .form-btn { font-size: var(--text-lg); }
    .form-info { width: auto; flex: 1; }

    .form-label {flex:none; width: 7.5em;}

    .order-products__title { font-size: var(--text-h8); }
    .order-products__name { font-size: var(--text-lg); }
    .order-products__option { font-size: var(--text-xs); }
    .order-products__qty,
    .order-products__price { font-size: var(--text-sm); }

    .order-floating__label,
    .order-floating__value { font-size: var(--text-sm); }
    .order-floating__total-price { font-size: var(--text-h7); }
    .order-floating__submit { font-size: var(--text-lg); }
}

@media (max-width: 1025px) {
    .order-form { padding: 40px 0 80px; }
    .order-form .int-panel__title { font-size: var(--text-h5); }

    .order-layout {
        flex-direction: column;
        padding-left: 0;
        margin-top: 30px;
        gap: 30px;
    }
    .order-layout__left { gap: 40px; min-width: 0; }
    .order-layout__right {
        padding-top: 0;
        flex: 1 1 auto;
        width: 100%;
    }
    .order-floating { position: static; top: auto; padding: 28px; }

    .form-grid { padding-top: 16px; gap: 16px; }
    .form-row { gap: 14px; }
    .form-row--line { min-height: 0; padding: 24px 0; }
    .form-label,
    .form-info,
    .form-input,
    .form-select,
    .form-btn { font-size: var(--text-sm); }
    .form-control { width: auto; flex: 1; min-width: 0; }
    .form-input,
    .form-select { height: 3em; }
    .form-btn { width: 9em; height: 3em; }
    .form-radios { gap: 20px; font-size: var(--text-sm); }

    .order-products__title { font-size: var(--text-sm); }
    .order-products__name { font-size: var(--text-sm); }
    .order-products__qty,
    .order-products__price { font-size: var(--text-xs); }

    .order-floating__total-price { font-size: var(--text-h8); }
    .order-floating__submit { font-size: var(--text-sm); }
}

@media (max-width: 769px) {
    .order-form { padding: 30px 0 60px; }
    .order-form .int-panel__title { font-size: 22px; }

    .order-layout { margin-top: 20px; gap: 24px; }
    .order-layout__left { gap: 30px; }

    .order-products { padding-bottom: 12px; }
    .order-products__title { font-size: var(--text-sm); }
    .order-products__item {
        grid-template-columns: 80px 1fr auto;
        grid-template-areas:
            "img info price"
            "img info qty";
        column-gap: 12px;
        row-gap: 4px;
        padding: 14px 0;
        align-items: center;
    }
    .order-products__img { grid-area: img; width: 80px; height: 80px; }
    .order-products__img img { width: 80px; height: 80px; }
    .order-products__info { grid-area: info; min-width: 0; }
    .order-products__qty { grid-area: qty; justify-self: end; font-size: var(--text-2xs); color: var(--gray-600); }
    .order-products__price { grid-area: price; justify-self: end; font-size: var(--text-xs); }
    .order-products__name { font-size: var(--text-xs); }
    .order-products__option { font-size: var(--text-2xs); }

    .order-floating { padding: 20px; border-radius: 6px; }
    .order-floating__summary { padding: 16px 0; gap: 12px; }
    .order-floating__label,
    .order-floating__value { font-size: var(--text-xs); }
    .order-floating__total { padding-top: 16px; }
    .order-floating__total-price { font-size: var(--text-sm); }
    .order-floating__submit { font-size: var(--text-sm); height: 3em; margin: 0.8em 0; }
    .order-floating__terms { font-size: var(--text-2xs); }

    .form-grid { padding-top: 12px; gap: 14px; }
    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .form-row--line { padding: 18px 0; }
    .form-label { flex: 0 0 auto; font-size: var(--text-xs); }
    .form-info { width: auto; font-size: var(--text-xs); }
    .form-control { width: 100%; flex: 0 0 auto; }
    .form-input,
    .form-select,
    .form-btn { font-size: var(--text-xs); height: 2.875em; }
    .form-btn { width: 100%; }    
    .form-row--email {flex-direction: row; align-items: center;}
    .form-select--email {flex:1;}
    .form-input--flex {flex:none;}
    .form-radios { gap: 14px; flex-wrap: wrap; font-size: var(--text-xs); }

    .order-term-modal__content { width: 92%; max-height: 85vh; }
    .order-term-modal__header { padding: 14px 18px; }
    .order-term-modal__title { font-size: 14px; }
    .order-term-modal__body { padding: 18px; font-size: 12px; }
}

@media (max-width: 501px) {
    .order-form { padding: 24px 0 50px; }
    .order-form .int-panel__title { font-size: 18px; }

    .order-layout { gap: 20px; }
    .order-layout__left { gap: 24px; }

    .order-products__title { font-size: var(--text-xs); }
    .order-products__item {
        grid-template-columns: 64px 1fr auto;
        padding: 12px 0;
    }
    .order-products__img,
    .order-products__img img { width: 64px; height: 64px; }
    .order-products__name { font-size: var(--text-2xs); }
    .order-products__option { font-size: var(--text-3xs); }
    .order-products__qty { font-size: var(--text-3xs); }
    .order-products__price { font-size: var(--text-2xs); }

    .order-floating { padding: 16px; }
    .order-floating__summary { padding: 12px 0; gap: 10px; }
    .order-floating__label,
    .order-floating__value { font-size: var(--text-2xs); }
    .order-floating__total-price { font-size: var(--text-xs); }
    .order-floating__submit { font-size: var(--text-xs); height: 2.9em; }
    .order-floating__terms { font-size: var(--text-3xs); }

    .form-input,
    .form-select,
    .form-btn { font-size: var(--text-2xs); height: 2.75em; }
    .form-label,
    .form-info { font-size: var(--text-2xs); }
    .form-radios { font-size: var(--text-2xs); }

    .order-term-modal__title { font-size: 13px; }
    .order-term-modal__body { padding: 14px; font-size: 11px; }
}


/* ============================================================
   모달 반응형 (itemuse / itemqa / review-write / table-review / purchase-review)
   ============================================================ */

@media (max-width: 1321px) {
    .itemuse-modal__content,
    .itemqa-modal__content,
    .review-write-modal__content {
        padding: 32px 44px;
    }
    .itemuse-modal__title,
    .itemqa-modal__title,
    .review-write-modal__title { font-size: var(--text-h8); }
    .itemuse-modal__field label,
    .itemqa-modal__field label { font-size: var(--text-lg); }
    .itemuse-modal__input { font-size: var(--text-lg); }
    .itemuse-modal__textarea { padding: 16px 20px; height: 200px; }
    .modal-alert { font-size: var(--text-lg); }
    .itemuse-modal__prd { font-size: var(--text-sm); }
    .itemuse-modal__stars img,
    .review-write-modal__stars img { width: 36px; }

    .table-review__modal-right { padding: 48px; }
    .table-review__modal-product { font-size: var(--text-sm); }
}

@media (max-width: 1025px) {
    .itemuse-modal__content,
    .itemqa-modal__content,
    .review-write-modal__content {
        padding: 28px 32px;
    }
    .itemuse-modal__title,
    .itemqa-modal__title,
    .review-write-modal__title { font-size: var(--text-sm); }
    .itemuse-modal__field label,
    .itemqa-modal__field label { font-size: var(--text-sm); }
    .itemuse-modal__input { font-size: var(--text-sm); padding: 0 18px; }
    .itemuse-modal__textarea { padding: 14px 18px; height: 180px; }
    .modal-alert { font-size: var(--text-sm); }
    .itemuse-modal__submit,
    .itemqa-modal__submit,
    .review-write-modal__submit-btn { font-size: var(--text-sm); margin-top: 32px; }
    .itemuse-modal__stars img,
    .review-write-modal__stars img { width: 32px; }

    .table-review__modal-right { padding: 32px; }
}

@media (max-width: 769px) {
    .itemuse-modal__content,
    .itemqa-modal__content,
    .review-write-modal__content,
    .table-review__modal-content {
        padding: 24px 20px;
        width: 92%;
        max-height: 92vh;
        border-radius: 6px;
    }
    .itemuse-modal__title,
    .itemqa-modal__title,
    .review-write-modal__title { font-size: var(--text-xs); }
    .itemuse-modal__int { gap: 12px; }
    .itemuse-modal__field,
    .itemqa-modal__field { margin-bottom: 12px; }
    .itemuse-modal__field label,
    .itemqa-modal__field label { font-size: var(--text-xs); }
    .itemuse-modal__input {
        font-size: var(--text-xs);
        padding: 0 14px;
        height: 2.875em;
        border-radius: 6px;
    }
    .itemuse-modal__textarea {
        padding: 12px 14px;
        height: 140px;
        border-radius: 6px;
    }
    .modal-alert { font-size: var(--text-xs); padding: 12px 14px; }
    .itemuse-modal__footer,
    .itemqa-modal__footer,
    .review-write-modal__footer { padding: 12px 0 0; }
    .itemuse-modal__submit,
    .itemqa-modal__submit,
    .review-write-modal__submit-btn {
        font-size: var(--text-xs);
        margin: 24px auto 0;
        padding: 0.7em 1.2em;
        max-width: none;
        width: 100%;
    }
    .itemuse-modal__close img,
    .itemqa-modal__close img,
    .review-write-modal__close img { width: 24px; }

    .itemuse-modal__prd { font-size: var(--text-xs); }
    .itemuse-modal__rate { margin: 12px 0; }
    .itemuse-modal__stars,
    .review-write-modal__stars { gap: 6px; }
    .itemuse-modal__stars img,
    .review-write-modal__stars img { width: 28px; }
    .itemuse-modal__images { grid-template-columns: repeat(4, 1fr); gap: 8px; }

    .table-review__modal-layout { flex-direction: column; min-height: 0; }
    .table-review__modal-left { width: 100%; flex: 0 0 auto; max-height: 320px; }
    .table-review__modal-right { padding: 20px; }
    .table-review__modal-product { font-size: var(--text-sm); }
    .table-review__modal-thumbs { padding: 8px 16px; }
    .table-review__modal-thumb { width: 48px; height: 48px; }

    .purchase-review-modal__content { max-width: 92%; }
    .purchase-review-modal__header { padding: 24px 20px 14px; }
    .purchase-review-modal__title { font-size: 15px; }
    .purchase-review-modal__body { padding: 0 20px 14px; }
    .purchase-review-modal__footer { padding: 14px 20px 20px; }
    .purchase-review-modal__submit { padding: 12px; font-size: 14px; }
}

@media (max-width: 501px) {
    .itemuse-modal__content,
    .itemqa-modal__content,
    .review-write-modal__content,
    .table-review__modal-content {
        padding: 20px 16px;
        width: 94%;
    }
    .itemuse-modal__title,
    .itemqa-modal__title,
    .review-write-modal__title { font-size: var(--text-2xs); }
    .itemuse-modal__field,
    .itemqa-modal__field { margin-bottom: 10px; }
    .itemuse-modal__field label,
    .itemqa-modal__field label { font-size: var(--text-2xs); }
    .itemuse-modal__input {
        font-size: var(--text-2xs);
        padding: 0 12px;
        height: 2.75em;
    }
    .itemuse-modal__textarea {
        padding: 10px 12px;
        height: 120px;
        font-size: var(--text-2xs);
    }
    .modal-alert { font-size: var(--text-2xs); line-height: 1.5; }
    .itemuse-modal__submit,
    .itemqa-modal__submit,
    .review-write-modal__submit-btn { font-size: var(--text-2xs); margin-top: 20px; }
    .itemuse-modal__close img,
    .itemqa-modal__close img,
    .review-write-modal__close img { width: 20px; }

    .itemuse-modal__stars img,
    .review-write-modal__stars img { width: 24px; }
    .itemuse-modal__images { grid-template-columns: repeat(3, 1fr); gap: 6px; }

    .table-review__modal-right { padding: 16px; }
    .table-review__modal-left { max-height: 240px; }
    .table-review__modal-product { font-size: var(--text-xs); }
    .table-review__modal-body { font-size: var(--text-2xs); }
    .table-review__modal-thumb { width: 40px; height: 40px; }

    .purchase-review-modal__title { font-size: 14px; }
    .purchase-review-modal__item { padding: 10px; gap: 10px; }
    .purchase-review-modal__item-img { flex: 0 0 64px; width: 64px; height: 64px; }
    .purchase-review-modal__item-name { font-size: 13px; }
    .purchase-review-modal__submit { font-size: 13px; }
}

.itemuse__empty{margin:1.5em 0;}

.sit_inf__ca-html{margin:0 auto; width:100%; max-width:860px;}