/* 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;
    width: 310px;
}

.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;
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--gray-600);
}

.itemuse-card__date {
    margin:1em 0;
    display: block;
    font-size: var(--text-xl);
    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;
}


/* ============================================================
   상품 목록 (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;
}

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


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

/* === 마이페이지 공통 === */
/* 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;}

/* ================================================
   mypage 전용 스타일 (junam common.css 발췌·이식)
   ================================================ */
.int-panel--center { text-align: center; }
.int-panel__title { font-size: var(--text-h3);
	font-weight: 700;
	color: var(--primary);
	line-height: 1.4;
	letter-spacing: -0.015em; }
.int-panel__title--complete { color: var(--secondary); }
.int-panel__title--complete:before { content:'';
	display: block;
	margin: 0 auto 0.4em;
	width: 2.2728em;
	height: 2.2728em;
	background: url('./img/complete_icon.svg') no-repeat center / cover; }
.int-panel__desc { margin-top: 0.75em;
	font-size: var(--text-h6);
	font-weight: 600;
	letter-spacing: -0.02em; }
.int-panel__ment { margin-top: 0.55em;
  font-size: var(--text-h8);
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--gray-800); }
@media(max-width:769px) {
.int-panel__title { font-size: var(--text-h6); }
}
.ly-my { 
	display: flex;
	gap:100px; }
.my-content { flex:1; min-width:0; } /* min-width:auto 함정 — 자식 min-content(테이블/검색폼)가 컨테이너를 밀어내 480 가로 넘침 (26.07.28) */
.my-aside__nav { display: flex;
	flex-direction: column;;
	gap:38px;
	min-width: 210px;
	margin-top: 17px;
	padding-top: clamp(16px, 4.5vw, 40px);
	border-top:2px solid #000; }
.my-aside__title { font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.03em; }
.my-aside__list { display: flex;
	flex-direction:column;
	gap:12px;
	margin-top: 21px; }
.my-aside__link { color: var(--gray-600);
	font-weight: 500;
	letter-spacing: -0.025em; }
.my-aside__link.is-active { color: var(--primary);
	font-weight: 700; }
@media(max-width:769px) {
.my-aside__title { font-size: 1rem; }
.my-aside__list { gap:8px; }
.my-aside__link { font-size: var(--text-xs); }
}
.my-dashboard__order { display: flex;
	gap:20px; }
.my-dashboard__status { flex:1; }
.my-dashboard__status-list { display: flex;
	align-items: center;	
	padding-top: 26px; }
.my-dashboard__status-item { display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap:4px; }
.my-dashboard__status-arrow { flex:1;
	text-align: center; }
.my-dashboard__status-arrow:before { content:'';
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background: url('./img/arrow_right_icon_gray.svg') no-repeat center / cover; }
.my-dashboard__status-count { display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(1.625rem, 1.227rem + 1.99vw, 2.5rem);
	font-weight: 800;
	width: 1.85em;
	height: 1.4em;
	color: var(--gray-300); }
.my-dashboard__status-label { font-weight: 500;
	letter-spacing: -0.03em; }
.my-dashboard__cancel { display: flex;
	justify-content: center;
	align-items: center;
	width: 210px;
	height: 140px;
	padding:16px 26px;
	background-color: var(--gray-100); }
.my-dashboard__cancel-list { width: 100%; }
.my-dashboard__cancel-item { display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
	border-bottom:1px solid var(--gray-400);
	color: var(--gray-400); }
.my-dashboard__cancel-item:last-child { border-bottom:none; }
.my-dashboard__cancel-label { font-size: var(--text-3xs);	
	font-weight: 500;	
	letter-spacing: -0.015em;
	min-width: 5em; }
.my-dashboard__cancel-count { font-size: var(--text-h7);
	font-weight: 800; }
.my-dashboard__summary { margin-top: 16px; }
.my-dashboard__summary-list { display: flex;
	background-color: var(--primary);
	color: #fff;
	border-radius:4px; }
.my-dashboard__summary-item { position: relative;
	flex:1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: 500;
	min-height: 60px;
	padding:12px;
	gap:12px; }
.my-dashboard__summary-item:after { position: absolute;
	top: 50%;
	right:0;
	transform: translateY(-50%);
	content:'';
	display: block;
	width: 1px;
	height: 40%;
	background-color: #fff; }
.my-dashboard__summary-item:last-child:after { display: none; }
.my-dashboard__summary-value { font-size: var(--text-h7);
	font-weight: 500; }
.my-dashboard__nav { padding:20px 0; }
.my-dashboard__nav-list { display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:22px 20px; }
.my-dashboard__nav-item { min-width: 0; }
.my-dashboard__card { display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	padding:18px 16px;
	border-radius:4px;
	border:1px solid var(--gray-400);
	text-align: center;
	color: var(--gray-800);
	height: 100%;
	transition: 0.3s; }
.my-dashboard__card-title { margin:0.5em 0;
	font-size: var(--text-xl);
	font-weight: 500;
	letter-spacing: -0.04em; }
.my-dashboard__card-desc { font-size: var(--text-xs);
	font-weight: 500;	
	letter-spacing: -0.03em; }
.my-dashboard__card-icon { width: 3.75rem;
	transition: 0.3s; }
.my-dashboard__coupon-link { display: flex; 
	justify-content: center;
	align-items: center;
	background-color: var(--primary);
	color: #fff;
	border-radius:4px;
	min-height: 60px;
	gap:20px;
	transition: 0.3s; }
.my-dashboard__coupon-label { font-size: var(--text-xl);
	font-weight: 500;
	letter-spacing: -0.03em; }
@media(hover:hover) {
.my-dashboard__card:hover { border-color: var(--secondary);
		background-color: var(--secondary);		
		color: #fff; }
.my-dashboard__card:hover .my-dashboard__card-icon { filter:brightness(0) invert(1); }
.my-dashboard__coupon-link:hover { background-color: var(--secondary); }
}
.my-order__tab { margin-top: 20px; }
.my-order__tab-list { display: flex; }
.my-order__tab-item { flex:1; }
.my-order__tab-btn { display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 3.334em;
	font-size: var(--text-xl);
	font-weight: 500;	
	color: var(--gray-800);
	border: 1px solid var(--primary);	
	letter-spacing: -0.03em; }
.my-order__tab-btn[aria-current="page"] { background-color: var(--primary);
	color: #fff; }
.my-order__tab-item:first-child .my-order__tab-btn { border-right:none; }
.my-order__sch { display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 12px 0;
	padding:10px;

	background-color: var(--gray-100); }
.my-order__filter { display: flex;
	align-items: center; }
.my-order__filter--btn { gap:8px; }
.my-order__filter--input { gap:16px; }
.my-order__period { display: flex;
	align-items: center;
	gap:8px; }
.my-order__option { font-weight: 500;
	height: 2.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border:1px solid var(--primary);
	color: var(--gray-800);
	background-color: #fff;
	letter-spacing: -0.03em; }
.my-order__option--btn { min-width: 3.75em; }
.my-order__option--select { flex:1;
	padding-left: 24px;
	padding-right: 56px;
	background: var(--primary) url('./img/my_select_icon.svg') no-repeat right 24px center / 20px 20px;
	appearance: none;
	color: #fff;
	text-align:left; }
.my-order__option--input { width: 11.25em; }
.my-order__option--submit { min-width: 4.375em;
	background-color: var(--primary);
	color: #fff;
	border-color:var(--primary);
	gap:4px; }
.my-order__manuel { padding:24px;
	background-color: var(--gray-50); }
.my-order__manuel-text { font-size: var(--text-xs);
	font-weight: 500;
	color: var(--gray-800);	
	line-height: 1.715;
	letter-spacing: -0.03em; }
.my-order__list { display: flex;
	flex-direction:column;
	gap:8px;
	margin-top: 21px; }
.my-order__list-title { font-size: var(--text-h7);
	font-weight: 600;
	letter-spacing: -0.01em; }
.my-point { display: flex;
	flex-direction:column;
	gap:32px; }
.my-inquiry__form { padding:20px 0; }
.my-inquiry__item { display: flex;
	align-items: center;
	margin-bottom: 20px; }
.my-inquiry__item--items-start { align-items: flex-start; }
.my-inquiry__email { width: 11.667em; }
.my-inquiry__item:last-child { margin-bottom: 0; }
.my-inquiry__group { display: flex;
	align-items: center;
	flex:1;
	gap:20px; }
.my-inquiry__label { font-size: var(--text-xl);
	font-weight: 500;
	min-width: 8.334em; }
.my-inquiry__attach { display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--gray-400);
	letter-spacing: -0.03em;
	gap:8px;
	border:1px solid var(--gray-400);
	width: 11.6667em;
	height: 3.3334em; }
.my-inquiry__attach img { width: 2.223em; }
.my-inquiry__attach-btn { display: none; }
.my-inquiry__attach-name { font-size: var(--text-xl);
	font-weight: 500;
	color: var(--gray-400);
	letter-spacing: -0.03em; }
.my-inquiry__submit { margin: 2.223em auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--gray-800);
	border:1px solid var(--gray-400);
	width: 11.6667em;
	height: 3.3334em;
	text-align: center; }
@media(max-width:769px) {
.my-inquiry__item { flex-direction :column;
		align-items: stretch;
		gap:8px; }
.my-inquiry__item .ui-input--flex { flex:none; }
.my-inquiry__label,
	.my-inquiry__attach,
	.my-inquiry__attach-name,
	.my-inquiry__submit { font-size: var(--text-xs); }
}
.ba-list { border-top:2px solid #000; }
.ba-list__row { display: grid;	
	border-bottom:1px solid var(--gray-400) }
.ba-list__row--order { grid-template-columns: 60px 260px 1fr 80px repeat(3, 120px); }
.ba-list__row--wish { grid-template-columns: 28px 120px 1fr repeat(2, 203px) 56px; }
.ba-list__row--cart { grid-template-columns: 28px 120px 1fr 130px 188px 190px 50px; }
.ba-list__row--point { grid-template-columns: 60px 219px 334px 1fr 119px; }
.ba-list__row--post { grid-template-columns: 37px 60px 100px 1fr 140px 80px 120px 98px; }
.ba-list__row--center { text-align: center; }
.ba-list__cell { display: flex;
	justify-content: center;
	align-items: center;
	text-align: center; }
.ba-list__cell--th { font-weight: 600;
	min-height: 3.75em; }
.ba-list__cell--td { padding:20px 0;
	color: var(--gray-600);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em; }
.ba-list__cell--sbj { text-align:left;
	padding-right: 12px; 
	padding-left: 12px; }
.ba-list__cell--td img { height: auto; }
.ba-list__cell--empty { min-height: 3.75em; }
.ba-list__sm { font-size: var(--text-xs); }
.ba-list__lg { font-size: var(--text-h8); }
.ba-list__eb { font-weight: 600;	
	line-height: 1.4;
	color: #000; }
.ba-list__eb--text-left { text-align:left; }
@media(max-width: 769px) {
.ba-list__cell { font-size: var(--text-sm); }
.ba-list__lg { font-size: var(--text-sm); }
.ba-list__cell--sbj { margin-top: 10px; }
}
.my-coupon__rgst { padding-top: 15px; }
.my-coupon__rgst-box { display: flex;
	gap:12px;
	padding:20px;	
	background-color: var(--gray-100); }
.my-coupon__rgst-input { flex:1;
	height: 3.334em;
	padding:0 1.3em;
	font-size: var(--text-xl);
	font-weight: 500;	
	background-color: #fff;
	border:1px solid var(--gray-400);
	letter-spacing: -0.03em; }
.my-coupon__rgst-input::placeholder { color: var(--gray-400); }
.my-coupon__rgst-btn { display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 8.8889em;
	height: 3.334em;
	font-size: var(--text-xl);
	font-weight: 700;
	background-color: var(--primary);
	color: #fff; }
.my-coupon__manuel { margin-top: 49px;
	padding:24px;
	background-color: var(--gray-50); }
.my-coupon__manuel--point { margin-top: 15px; }
.my-coupon__manuel-title { display: flex;
	align-items: center;
	font-size: var(--text-xs);
	font-weight: 700;
	gap:10px;	
	letter-spacing: -0.03em; }
.my-coupon__manuel-title:before { content:'';
	width: 1.4286em;
	height: 1.4286em;
	background: url('./img/my_manuel_icon.svg') no-repeat center / cover; }
.my-coupon__manuel-list { margin-top: 15px; }
.my-coupon__manuel-item { position: relative;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--gray-800);
	line-height: 1.7;
	padding-left: 1.5em;
	letter-spacing: -0.03em; }
.my-coupon__manuel-item:before { position: absolute;
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--gray-800);
	top: 0.7em;
	left: 0.65em;
	content:''; }
.my-coupon__status { margin-top: 62px; }
.my-coupon__status-header { display: flex;
	align-items: center; }
.my-coupon__status-title { display: flex;
	align-items: center;
	font-size: var(--text-h7);
	font-weight: 600;
	letter-spacing: -0.03em;
	gap:0.5em; }
.my-coupon__status-title:before { content:'';
	display: block;
	width: 1.667em;
	height: 1.667em;
	background: url('./img/my_coupon_icon_color.svg') no-repeat center / cover; }
.my-coupon__status-cnt { margin-left: 0.6em;
	font-size: var(--text-h7);
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--secondary); }
.my-coupon__list { display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:29px;
	margin-top: 20px;
	padding-right: 115px; }
.my-coupon__item { min-width: 0;
	padding:21px 24px 17px 0;
	color: #fff;
	background: url('./img/coupon_bg.png') no-repeat center / cover; }
.my-coupon__header { display: flex; 
	justify-content: space-between;
	align-items: center;
	gap:34px; }
.my-coupon__info { padding-left: 70px;
	flex:1; }
.my-coupon__category { font-size: var(--text-h7);
	font-weight: 700; }
.my-coupon__name { margin-top: 0.2em;
	font-size: var(--text-h8);
	font-weight: 700;
	color: var(--primary);
	letter-spacing: -0.03em; }
.my-coupon__rate { display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 5.8334em;
	height: 5.8334em;
	border-radius:50%;
	font-size: var(--text-h7);
	font-weight: 600;
	background-color: var(--primary);
	color: #fff; }
.my-coupon__rate-value { font-size: 1.667em;
	line-height: 1.2; }
.my-coupon__desc { margin-top: 1em;
	padding:0.3417em 1em;
	font-size: var(--text-3xs);
	background-color: #fff;
	color: #000;
	border-radius:2em;
	font-weight: 500;
	text-align: center; }
.my-coupon__date { text-align:right; }
.my-coupon__date-label { margin-top: 2.3572em;
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--secondary);
	background-color: #fff;
	padding:0.015em 0.665em;
	border-radius:2em; }
.my-coupon__date-period { margin-top: 0.2em;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: -0.03em; }
@media(max-width: 769px) {
.my-coupon__manuel { margin-top: 32px; }
.my-coupon__status { margin-top: 32px; }
}
/* ============================================================
   마이페이지 공통 반응형: .ba-list / .ba-actions / .ba-ctrl
   ============================================================ */

/* 1321 이하: 셀 패딩·버튼 축소 */
@media (max-width: 1321px) { .ba-list__cell--td { padding: 16px 0; }
    .ba-actions__btn { font-size: var(--text-lg); width: 9em; }
    .ba-actions__btn--cart { width: 10.5em; } }
/* ============================================================
   .my-order__tab / __form / __manuel 반응형
   ============================================================ */

@media (max-width: 1441px) { .my-order__sch {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .my-order__filter--btn,
    .my-order__filter--input { width: 100%; } }
@media (max-width: 1321px) {
.my-order__tab-btn { font-size: var(--text-lg); }
.my-order__option { font-size: var(--text-sm); }
.my-order__option--input { width: 10em; }
}
@media (max-width: 1025px) {
.my-order__tab-btn { font-size: var(--text-sm); min-height: 2.8em; }
.my-order__filter { flex-wrap: wrap; gap: 8px; }
.my-order__period { flex-wrap: wrap; gap: 6px; }
.my-order__option--select { flex: 1 1 100%; padding: 0 20px; background-position: right 16px center; }
.my-order__option--input { width: 9em; }
.my-order__manuel { padding: 18px; }
}
@media (max-width: 769px) {
.my-order__tab { margin-top: 12px; }
.my-order__tab-btn { font-size: var(--text-xs);
        min-height: 2.6em;
        padding: 0 6px;
        line-height: 1.3; }
.my-order__sch { padding: 12px;
        margin: 10px 0;
        gap: 10px; }
.my-order__filter--btn { flex-direction: column; align-items: stretch; }
.my-order__filter--input { flex-direction: column; align-items: stretch; }
.my-order__period--btn { display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px 22px;
        width: 100%; }
.my-order__period--btn--cal { display: flex;
				flex-wrap:nowrap;;
        justify-content: center;
        align-items: center;
        gap: 6px; }
.my-order__option { height: 2.6em;
        font-size: var(--text-xs); }
.my-order__option--btn { min-width: 0; }
.my-order__option--input { width: 100%;
        flex: 1 1 auto;
        min-width: 0; }
.my-order__option--submit { width: 100%;
        min-width: 0; }
.my-order__manuel { padding: 14px; }
.my-order__manuel-text { font-size: var(--text-2xs);
        line-height: 1.6; }
.my-order__list { margin-top: 16px; gap: 6px; }
.my-order__list-title { font-size: var(--text-h8); }
}
@media (max-width: 501px) {
.my-order__tab-btn { font-size: var(--text-2xs); min-height: 2.4em; }
.my-order__sch { padding: 10px; gap: 8px; }
.my-order__period--btn { gap:4px; }
.my-order__option { height: 2.4em; font-size: var(--text-2xs); }
.my-order__option--select { flex:none; padding: 0 16px; background-position: right 12px center; background-size: 16px 16px; }
.my-order__manuel { padding: 12px; }
.my-order__manuel-text { font-size: var(--text-3xs); }
}
/* ============================================================
   .my-coupon__rgst-box / .my-coupon__list 반응형
   ============================================================ */

@media (max-width: 1321px) { .my-coupon__list { padding-right: 60px; gap: 20px; }
    .my-coupon__rgst-input,
    .my-coupon__rgst-btn { font-size: var(--text-lg); }
    .my-coupon__rgst-btn { width: 7.5em; } }
@media (max-width: 1025px) {
.my-coupon__list { padding-right: 0; gap: 16px; }
.my-coupon__rgst-box { padding: 16px; gap: 10px; }
.my-coupon__rgst-input,
    .my-coupon__rgst-btn { font-size: var(--text-sm); height: 3em; }
.my-coupon__rgst-btn { width: 7em; }
.my-coupon__info { padding-left: 30px; }
.my-coupon__rate { width: 5em; height: 5em; font-size: var(--text-h8); }
}
@media (max-width: 769px) {
.my-coupon__rgst-box { flex-direction: column;
        padding: 14px;
        gap: 8px; }
.my-coupon__rgst-input { flex: 0 0 auto;
        width: 100%;
        height: 2.875em;
        padding: 0 1em;
        font-size: var(--text-sm); }
.my-coupon__rgst-btn { width: 100%;
        height: 2.875em;
        font-size: var(--text-sm); }
.my-coupon__list { grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 16px; }
.my-coupon__item { padding: 18px 20px 14px 0; }
.my-coupon__header { gap: 16px; }
.my-coupon__info { padding-left: 24px; }
.my-coupon__category { font-size: var(--text-sm); }
.my-coupon__name { font-size: var(--text-xs); }
.my-coupon__desc { font-size: var(--text-3xs); }
.my-coupon__rate { width: 4.5em;
        height: 4.5em;
        font-size: var(--text-sm); }
.my-coupon__date-label,
    .my-coupon__date-period { font-size: var(--text-2xs); }
.my-coupon__date-label { margin-top: 1.5em; }
}
@media (max-width: 501px) {
.my-coupon__rgst-box { padding: 12px; }
.my-coupon__rgst-input,
    .my-coupon__rgst-btn { font-size: var(--text-xs); height: 2.75em; }
.my-coupon__item { padding: 16px 16px 12px 0; }
.my-coupon__info { padding-left: 16px; }
.my-coupon__header { gap: 10px; }
.my-coupon__rate { width: 4em; height: 4em; font-size: var(--text-xs); }
}


/* ===== account(회원정보) 탭 스타일 (junam member style.css 발췌) ===== */
.auth { padding: 73px 0 100px; }
.auth__inner { max-width:1162px;	
	width: 100%;
	margin: 0 auto;
	padding: 0 16px; }
.auth__container { margin-top: 52px;
	display: flex; }
.auth__panel { flex:1; }
.auth__panel--sns { margin-right: 125px;
	padding-right: 125px;	
	border-right:1px solid var(--gray-500) }
.auth__int { display: flex; 
	flex-direction:column;
	gap:20px; }
.auth__title { font-size: var(--text-h7);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-align: center; }
.auth__btn { display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 210px;
	font-size: var(--text-h8);
	font-weight: 700;
	letter-spacing: -0.03em;
	min-height: 3em;
	padding:0 1em;
	border-radius:0.4em;
	gap:0.5em }
.auth__btn--kakao { background-color: var(--kakao); }
.auth__btn--naver { background-color: var(--naver); }
.auth__btn--guest { background-color: var(--gray-500);
	color: #fff; }
.auth__btn--cancel { background-color: var(--gray-600);
	color: #fff;
	border-radius:0; }
.auth__btn--primary { border-radius:0;
	background-color: var(--primary);
	color: #fff; }
.auth__btn--full { width: 100%; }
.auth__btn-sm { font-size: var(--text-xl); }
.auth__btn--kakao::before,
.auth__btn--naver::before { content:'';
	display: block;
	width: 2.8em;
	height: 2.8em;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center; }
.auth__btn--kakao::before { background-image: url('./img/login_kakao_icon.svg'); }
.auth__btn--naver::before { background-image: url('./img/login_naver_icon.svg'); }
.auth__guest { margin-top: 54px; }
.auth__sns-list { display: flex; 
	flex-direction:column;
	gap:12px; }
.auth__inputs { display: flex;
	flex-direction:column;
	gap: 12px; }
.auth__memory { gap:2em;
	margin:20px 0;
	display: flex;
	justify-content: center; }
.auth__actions { margin-top: 12px;
	min-height: 60px;
	display: flex;
	align-items: center;
	border:1px solid var(--gray-400);
	background-color: var(--gray-50); }
.auth__actions-btn { flex:1;
	text-align: center;
	font-weight: 600;
	color: var(--gray-600);
	border-right:1px solid var(--gray-400);
	transition: 0.3s; }
.auth__actions-btn:last-child { border-right:none; }
@media(hover:hover) {
.auth__actions-btn:hover { color: var(--primary); }
}
.auth__flow { margin: 40px 0 115px;
	display: flex;
	justify-content: center; }
.auth__flow-step { display: flex;
	align-items: center;
	font-size: var(--text-h8);
	font-weight: 500;
	color: var(--gray-400);
	letter-spacing: -0.015em; }
.auth__flow-step:after { content:'';
	display: block;
	margin: 0 2em;
	width: 1em;
	height: 1em;
	background: url('./img/rgst_arrow_icon.svg') no-repeat center / cover; }
.auth__flow-step:last-child:after { display: none; }
.auth__flow-step[aria-current="step"] { font-weight: 700;
	color: #000; }
.auth__header { display: flex;
	justify-content: space-between;
	border-bottom:1px solid #000;
	padding-bottom: 10px;
	margin-bottom: 40px; }
.auth__page { font-size: var(--text-h7);
	font-weight: 700;
	letter-spacing: -0.03em; }
.auth__rsgt-wrap { display: flex;
	flex-direction:column;
	gap:40px; }
.auth__rgst-panel { padding-top: 24px;
	background-color: var(--gray-50); }
.auth__rgst-panel--pb { padding-bottom: 24px; }
.auth__rgst-row { padding:0 44px; }
.auth__checkbox-content { display: flex; 
	flex-direction:column;
	gap:10px; }
.auth__checkbox-desc { font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.7;
	color: var(--gray-600);
	letter-spacing: -0.03em; }
.auth__rgst-terms { margin-top: 24px;
	display: block;
	width: 100%;
	background-color: #fff;
	overflow: auto;
	height: 123px;
	padding:24px 72px;
	border:1px solid var(--gray-200);
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.7;
	color: var(--gray-600); }
.auth__rgst-terms--agree { height: 245px; }
.auth__footer { margin-top: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:16px; }
.auth__required { display: flex;
	align-items: center;
	gap:0.5715em;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--gray-700);
	letter-spacing: -0.03em; }
.auth__required:after { content:'';
	display: block;
	width: 0.5715em;
	height: 0.5715em;
	border-radius:50%;
	background-color: var(--secondary); }
.auth__fieldset { padding-top: 3px;
	display: flex;
	flex-direction: column;
	gap:20px; }
.auth__item { display: flex;
	align-items: center; }
.auth__group { display: flex;
	flex-direction:column;
	flex:1;
	gap:12px; }
.auth__btn-field { flex:1;
	display: flex;
	align-items: center;
	gap:20px; }
.auth__seperator { flex:1;
	display: flex;
	gap:20px; }
.auth__completed { padding: 23px 16px 24px;
	margin: 0 auto;
	max-width:702px;	
	width: 100%;
	display: flex;
	flex-direction:column;
	gap:40px; }
.auth__greeting { padding:28px 114px 26px;
	border:1px solid var(--gray-300);
	text-align: center; }
.auth__celebrate { font-size: var(--text-h6);
	font-weight: 700;	
	color: var(--secondary);
	letter-spacing: -0.02em; }
.auth__member { margin:20px 0 12px;
	font-size: var(--text-h7);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 60px;
	background-color: var(--gray-50);
	padding:4px 16px;
	color: var(--primary); }
.auth__id:before { content:'';
	display: inline-block;
	width: 1px;
	height: 0.75em;
	background-color: var(--primary);
	vertical-align: middle;
	margin:0 .5em; }
.auth__msg { margin-top: 1.8em;
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: -0.03em;
	color: var(--gray-800); }
/* .auth (login.skin / register.skin) 반응형 */
@media (max-width:1025px) { .auth { padding: 50px 0 80px; }
	.auth__container { margin-top: 40px; }
	.auth__panel--sns { margin-right: 60px; padding-right: 60px; }
	.auth__btn-sm { font-size: var(--text-lg); }
	.auth__btn--kakao::before,
	.auth__btn--naver::before { width: 2.4em; height: 2.4em; }

	/* register */
	.auth__flow { margin: 32px 0 70px; }
	.auth__rgst-row { padding: 0 32px; }
	.auth__rgst-terms { padding: 20px 48px; }
	.auth__footer { margin-top: 70px; }

	/* register_form */
	.auth__fieldset { gap: 16px; }
	.auth__item {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.auth__item .ui-label { min-width: 0; }
	.auth__group { min-width: 0; }
	.auth__btn-field { gap: 12px; min-width: 0; }
	.auth__seperator { gap: 10px; min-width: 0; flex-wrap: wrap; }
	.auth__item .ui-input { min-width: 0; }
	.auth__item .ui-input--flex {
		flex: 1 1 0;
		min-width: 0;
		width: 0;
	}
	.auth__item .ui-input--select {
		background-size: 1em auto;
		background-position: center right 0.6em;
		padding-right: 1.8em;
	}
	.auth__btn-field > .auth__btn {
		flex-shrink: 0;
		width: auto;
		min-width: 6em;
		height: 60px;
		min-height: 0;
		padding: 0 0.8em;
		font-size: var(--text-sm);
	}

	/* register_result */
	.auth__completed { gap: 32px; }
	.auth__greeting { padding: 28px 60px 26px; } }
@media (max-width:769px) {
.auth { padding: 40px 0 60px; }
.auth__container { flex-direction: column;
		gap: 40px;
		margin-top: 28px; }
.auth__panel--sns { margin-right: 0;
		padding-right: 0;
		padding-bottom: 40px;
		border-right: none;
		border-bottom: 1px solid var(--gray-500); }
.auth__guest { margin-top: 32px; }
.auth__actions { min-height: 52px; }
.auth__actions-btn { font-size: var(--text-sm); }
/* register */
	.auth__flow { margin: 24px 0 48px; }
.auth__flow-step:after { margin: 0 1em; }
.auth__header { margin-bottom: 28px; }
.auth__page { font-size: var(--text-h8); }
.auth__rgst-row { padding: 0 20px; }
.auth__rgst-panel { padding-top: 20px; }
.auth__rgst-panel--pb { padding-bottom: 20px; }
.auth__rgst-terms { margin-top: 16px;
		padding: 16px 24px;
		height: 140px;
		font-size: var(--text-2xs); }
.auth__rgst-terms--agree { height: 200px; }
.auth__footer { margin-top: 50px; }
/* register_form */
	.auth__item { flex-direction: column;
		align-items: stretch;
		gap: 8px; }
.auth__item .ui-label { min-width: 0; font-size: var(--text-sm); }
.auth__item .ui-input { height: 48px; font-size: var(--text-sm); }
.auth__item .ui-input--sm { font-size: var(--text-sm); padding: 0 0.8em; }
.auth__btn-field { gap: 8px; flex-wrap: wrap; }
.auth__btn-field > .auth__seperator { flex-basis: 100%; }
.auth__btn-field > .auth__btn { width: 100%; height: 48px; }
.auth__seperator { gap: 8px; }
.auth__required { font-size: var(--text-2xs); }
/* register_result */
	.auth__greeting { padding: 24px 28px; }
.auth__celebrate { font-size: var(--text-h7); }
.auth__member { font-size: var(--text-h8);
		min-height: 48px;
		margin: 16px 0 10px; }
}
@media (max-width:501px) {
.auth { padding: 32px 0 48px; }
.auth__container { gap: 28px; margin-top: 20px; }
.auth__panel--sns { padding-bottom: 28px; }
.auth__title { font-size: var(--text-h8); }
.auth__int { gap: 14px; }
.auth__btn { min-height: 2.6em; font-size: var(--text-sm); }
.auth__btn-sm { font-size: var(--text-sm); }
.auth__btn--kakao::before,
	.auth__btn--naver::before { width: 2.2em; height: 2.2em; }
.auth__guest { margin-top: 24px; }
.auth__memory { margin: 8px 0; }
.auth__actions { min-height: 44px; }
.auth__actions-btn { font-size: var(--text-xs); }
/* register */
	.auth__flow { margin: 16px 0 32px; }
.auth__flow-step { font-size: var(--text-sm); }
.auth__flow-step:after { margin: 0 0.6em; width: 0.8em; height: 0.8em; }
.auth__header { margin-bottom: 20px; padding-bottom: 8px; }
.auth__page { font-size: var(--text-lg); }
.auth__rsgt-wrap { gap: 24px; }
.auth__rgst-row { padding: 0 8px; }
.auth__rgst-panel { padding-top: 16px; }
.auth__rgst-panel--pb { padding-bottom: 16px; }
.auth__checkbox-desc { font-size: var(--text-2xs); line-height: 1.5; }
.auth__rgst-terms { margin-top: 12px;
		padding: 14px 16px;
		height: 120px; }
.auth__rgst-terms--agree { height: 180px; }
.auth__footer { margin-top: 32px; gap: 8px; }
/* register_form */
	.auth__fieldset { gap: 14px; }
.auth__item .ui-label { font-size: var(--text-xs); }
.auth__item .ui-input { height: 42px; font-size: var(--text-xs); padding: 0 0.6em; }
.auth__item .ui-input--sm { font-size: var(--text-xs); padding: 0 0.7em; }
.auth__seperator { gap: 6px; }
.auth__btn-field { gap: 6px; }
.auth__btn-field > .auth__btn { height: 42px; }
/* register_result */
	.auth__completed { gap: 24px; padding: 16px 12px; }
.auth__greeting { padding: 20px 14px; }
.auth__celebrate { font-size: var(--text-lg); }
.auth__member { font-size: var(--text-sm);
		min-height: 44px;
		margin: 14px 0 8px; }
.auth__msg { margin-top: 1.2em;
		font-size: var(--text-2xs); }
}
/* ============================== */
/* 회원정보 찾기 (password_lost)  */
/* ============================== */
.auth__container--single { justify-content: center; }
.auth__container--single .auth__panel { flex: 0 1 420px;
	max-width: 420px; }
.auth__container--single .auth__panel--login { padding: 32px 32px;
	background-color: var(--gray-50);
	border:1px solid var(--gray-200); }
.auth__fieldset #captcha { margin-top: 12px; }
.auth__btn-pair { margin-top: 8px;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px; }
.auth__btn-pair .auth__btn { flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 0 0.4em; }
@media(hover:hover) {
.auth__btn--primary:hover { background-color: #150a8a; }
.auth__btn--cancel:hover { background-color: var(--gray-700); }
}
@media (max-width:1025px) {
.auth__container--single .auth__panel--login { padding: 28px 24px; }
}
@media (max-width:769px) {
.auth__container--single .auth__panel { flex: 1 1 auto;
		max-width: 100%; }
.auth__container--single .auth__panel--login { padding: 24px 20px; }
.auth__btn-pair { flex-wrap: nowrap;
		gap: 6px; }
.auth__btn-pair .auth__btn { padding: 0 0.2em; }
}


/* ================================================
   온라인구매 목록 (list.book) 기본 스타일
   ================================================ */
/* 2뎁스 카테고리 탭 — 160×48 r10 (Figma 2719:4977, 26.07.22) */
.book-cate {margin:0 0 60px;}
.book-cate__tabs {display:flex; flex-wrap:wrap; gap:20px; margin:0; padding:0; list-style:none;}
.book-cate__tab a {display:flex; align-items:center; justify-content:center; width:160px; padding:14px 20px; border:1px solid var(--main-color); border-radius:10px; background:var(--white); font-size:18px; font-weight:400; line-height:1.1; color:var(--gray-500); text-decoration:none;}
.book-cate__tab.is-active a {background:var(--main-color); border-color:var(--main-color); font-weight:700; color:var(--fourth);}

/* 섹션 — 타이틀 36 + 전체 N건, 아래 1px 라인 */
.book-list {width:100%; max-width:1200px; margin:0 auto; padding:100px 0 140px;}
@media(max-width:1240px){.book-list {padding:100px 4% 140px;}}
#sct_sort {display:none;} /* 코어 정렬바(총 N개/인기순) — 시안에 없음. 섹션별 '전체 N건'이 대체 */
.book-sec {margin:0;}
.book-sec + .book-sec {margin-top:120px;}
.book-sec__head {display:flex; align-items:center; justify-content:space-between; margin:0 0 60px; padding:0 0 60px; border-bottom:1px solid var(--gray-300);}
.book-sec__title {margin:0; font-size:36px; font-weight:700; line-height:1; color:var(--gray-950);}
.book-sec__count {font-size:16px; font-weight:700; line-height:1; color:var(--fifth);}
.book-sec__count strong {color:var(--main-color); font-weight: 700;}
.book-sec__empty {padding:60px 0; color:var(--rgba01); text-align:center;}

/* 카드 그리드 — 4열 264 gap 48 (1200) */
.book-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:60px 4%; margin:0; padding:0; list-style:none;}
@media (max-width:1080px){ .book-grid {grid-template-columns:repeat(3, 1fr);} }
@media (max-width:768px){ .book-grid {grid-template-columns:repeat(2, 1fr); gap:40px 4%;} }
.book-card {position:relative;}
.book-card__link {display:block; color:inherit; text-decoration:none;}

/* 썸네일 — 정사각 r10 gray-100, 이미지 중앙 (D8 예외: 시안 264×264 비율 고정) */
.book-card__img {display:flex; align-items:center; justify-content:center; position:relative; aspect-ratio:1 / 1; overflow:hidden; border-radius:10px; background:var(--gray-100);}
.book-card__img img {display:block; width:auto; max-width:70%; max-height:70%;}
.book-card__hover {position:absolute; right:0; bottom:0; left:0; height:80px; background:linear-gradient(180deg, rgba(49, 64, 91, 0) 0%, rgba(49, 64, 91, 1) 100%); opacity:0; transition:opacity 0.3s;} /* 시안 264×80 */
.book-card:hover .book-card__hover {opacity:0.3;}

/* 호버 액션 — 좋아요/장바구니 (44 원형, 시안 gap 20) */
.book-card__acts {display:flex; align-items:flex-end; justify-content:center; gap:12px; position:absolute; top:0; right:0; left:0; aspect-ratio:1 / 1; padding:0 0 16px; opacity:0; pointer-events:none; transition:opacity 0.3s;} /* 썸네일 영역 하단 — K1 예외(호버 오버레이). 버튼 44 + gap 12 (시안 3033) */
.book-card:hover .book-card__acts {opacity:1;}
/* 버튼 = 44 흰 원 (기본 보더 없음, hover grad04 2px — 시안 3033:3893→3910). grad 보더 기법: 배경 2중 레이어 */
.book-card__act {display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:2px solid transparent; border-radius:50%; background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(var(--white), var(--white)) padding-box; box-shadow:0 4px 8px rgba(8, 9, 10, 0.10); cursor:pointer; pointer-events:auto; transition:background 0.2s;} /* 버튼만 클릭 — 나머지 썸네일은 상세 링크 유지 */
.book-card__act:hover {background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad01) border-box;}
/* 아이콘 크기 — 시안 3033 실측 (하트 16×14 / 카트 18×16). SVG 자체 width/height 무시하고 CSS로 강제 */
.book-card__act img {display:block;}
.book-card__act--wish img {width:16px; height:14px;} /* 하트 (찜 상태 채운 하트도 동일 크기) */
.book-card__act--cart img {width:18px; height:16px;} /* 카트 */

/* 카드 본문 — 제목 gap 10, 아래 1px 라인, 가격 */
.book-card__body {display:flex; flex-direction:column; gap:10px; margin:20px 0 0; padding:0 0 20px; border-bottom:1px solid var(--gray-300);}
.book-card__name {margin:0; font-size:18px; font-weight:700; line-height:1.39; color:var(--gray-950);}
.book-card__headline {margin:0; font-size:16px; font-weight:700; line-height:1.1; color:var(--main-color);}
.book-card__summary {margin:0; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
.book-card__price {display:flex; align-items:center; gap:4px; margin:20px 0 0; font-size:18px; font-weight:700; line-height:1.39; color:var(--gray-950);}
.book-card__price strong {font-weight: 700;}
.book-card__dc {font-style:normal; color:var(--alert);}

/* 더보기 */
.book-more {margin:60px 0 0; text-align:center;}
.book-more__btn {min-width:160px; padding:15px 31px; border:1px solid var(--gray-300); border-radius:10px; background:var(--white); font-size:18px; font-weight:700; line-height:1; color:var(--fifth); cursor:pointer; transition:all 0.2s;}
.book-more__btn:hover {border-color:var(--main-color); background:var(--main-color); color:var(--white);}
.book-more__btn:disabled {opacity:0.5;}

/* ==========================================================
   상품 상세 상단 구매영역 (pd-*) — 시안 2719:8501 (26.07.24)
   inner 1200 · 좌 갤러리 590(49.17%) / 우 info 510(42.5%) · gap 100(8.33%)
   ========================================================== */
#sit_ov_from {max-width:1200px; margin:100px auto 0;} /* 히어로 → 구매영역 100 (시안 y436→536) */
#sit_ov_wrap {display:flex; justify-content:space-between; gap:40px 8.33%;}
#sit_ov_wrap #sit_pvi {float:none; width:49.17%; margin:0;}
#sit_ov_wrap #sit_ov {float:none; width:42.5%; margin:0; padding:0;}
/* 우측 정보 — 상품명 36 / 헤드라인 18 main / 설명 16 fifth */
#sit_ov #sit_title {margin:0 0 10px; padding:0; border:0; font-size:36px; font-weight:700; line-height:1.39; color:var(--gray-950);}
#sit_desc.pd-headline {margin:0 0 10px; font-size:18px; font-weight:700; line-height:1.39; color:var(--main-color);}
.pd-summary {margin:0 0 40px; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth);}
/* 가격 — 정가 취소선 18 / 판매가 28 / 할인율 28 빨강 */
.pd-price {margin:0 0 40px;}
.pd-price__cust {display:block; margin:0 0 10px; font-size:18px; font-weight:400; line-height:1; color:var(--gray-400); text-decoration:line-through;}
.pd-price__sale {font-size:28px; font-weight:700; line-height:1; color:var(--gray-950);}
.pd-price__dc {margin-left:9px; font-size:28px; font-weight:700; line-height:1; color:var(--alert);}
.pd-price__stop {font-size:28px; font-weight:700; color:var(--gray-400);}
/* 배송 정보 — 라벨 123 / 16px fifth */
.pd-delivery {margin:0; padding:40px 0; border-top:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300);}
.pd-delivery__row {display:flex; margin:0; font-size:16px; line-height:1.38; color:var(--fifth);}
.pd-delivery__row + .pd-delivery__row {margin-top:20px;}
.pd-delivery__row dt {display:flex; align-items:center; flex:0 0 123px; font-weight:700;}
.pd-delivery__row dt::before, #sit_ov .sit_option h3::before {content:''; flex:0 0 4px; width:4px; height:4px; margin:0 12px 0 10px; border-radius:50%; background:var(--fifth);} /* 라벨 앞 dot — 시안 픽셀 실측 4×4 fifth, 들여쓰기 10/간격 12 */
.pd-delivery__row dd {margin:0; color:var(--fifth);}
.pd-delivery__cond {color:var(--fifth);}
/* 시안에 없는 레거시 요소 숨김 — 스펙 테이블 / 별점·SNS / 옵션 안내문 / 구식 브레드크럼(히어로 네비가 대체) */
#sit_ov .sit_info, #sit_star_sns, #sit_opt_info, #sct_location.view_location {display:none;}
/* 선택옵션 행 — 라벨 123 + 셀렉트 40h (옵션 상품만 렌더) */
#sit_ov .sit_option {display:flex; align-items:center; margin:0; padding:40px 0; border-bottom:1px solid var(--gray-300);}
#sit_ov .sit_option h3 {display:flex; align-items:center; flex:0 0 123px; margin:0; font-size:16px; font-weight:700; line-height:1.38; color:var(--fifth);}
#sit_ov .sit_option .get_item_options {flex:1;}
#sit_ov .sit_option .get_item_options label {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);} /* sr-only — 시안은 셀렉트만 노출 */
#sit_ov .sit_option .get_item_options span {display:block;}
#sit_ov .sit_option .get_item_options span ~ span {margin-top:10px;} /* 옵션 2단 이상 간격 */
#sit_ov .sit_option select {width:100%; height:40px; padding:0 44px 0 20px; border:1px solid var(--gray-300); border-radius:0; background:var(--white) url("../../include/img/ico_select_down.svg") no-repeat right 20px center / 10px 10px; font-size:16px; color:var(--rgba01); appearance:none; -webkit-appearance:none;}
/* 선택된 옵션 박스 (510×122 r10 gray-50, 시안 2719:8562) — X 우상단 / 가격은 스테퍼 행 우측 (한 박스) */
#sit_sel_option {margin:40px 0 0; padding:20px; border-radius:10px; background:var(--gray-50);}
#sit_sel_option:not(:has(.sit_opt_list)) {display:none;} /* 옵션 선택 전 빈 박스 숨김 */
#sit_opt_added {margin:0; padding:0; background:transparent; list-style:none;}
/* li = grid 2행 (1행 옵션명+X / 2행 스테퍼) — del이 opt_count 안에 있어 display:contents로 그리드 참여 (K2) */
#sit_opt_added .sit_opt_list {display:grid; grid-template-columns:40px 71px 40px 1fr 32px; row-gap:20px; margin:0; padding:0; border:0;}
#sit_opt_added .sit_opt_list + .sit_opt_list {margin-top:20px; padding-top:20px; border-top:1px solid var(--gray-200);}
/* 레거시(default_shop.css 856행대 li .opt_*) 특이도 대응 — li 포함 셀렉터로 격상 */
#sit_opt_added li .opt_name {grid-row:1; grid-column:1/5; align-self:center; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth);}
#sit_opt_added li .opt_count {position:static; display:contents;} /* 레거시 absolute 해제 + 자식들을 li 그리드에 직접 배치 */
/* 수량 스테퍼 — 시안 12px 선 아이콘 (fa 폰트 대신 SVG 배경, 26.07.24) */
#sit_opt_added .sit_qty_minus, #sit_opt_added .sit_qty_plus {grid-row:2; width:40px; height:40px; padding:0; border:1px solid var(--gray-300); background-color:var(--white); background-repeat:no-repeat; background-position:center; background-size:12px 12px; cursor:pointer;}
#sit_opt_added .sit_qty_minus {grid-column:1;}
#sit_opt_added .sit_qty_plus {grid-column:3;}
#sit_opt_added .sit_qty_minus {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0 6h12' stroke='%2331405b' stroke-width='1'/%3E%3C/svg%3E");}
#sit_opt_added .sit_qty_plus {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0 6h12M6 0v12' stroke='%2331405b' stroke-width='1'/%3E%3C/svg%3E");}
#sit_opt_added .sit_qty_minus i, #sit_opt_added .sit_qty_plus i {display:none;}
#sit_opt_added .num_input {grid-row:2; grid-column:2; width:71px; height:40px; margin:0; padding:0; border:1px solid var(--gray-300); border-left:0; border-right:0; border-radius:0; background:var(--white); font-size:16px; text-align:center; color:var(--gray-950);} /* 좌우 보더는 양옆 버튼과 공유 (시안 이중선 없음) */
#sit_opt_added .sit_opt_prc {display:none;} /* 옵션 추가금 — 시안 미노출 (셀렉트 항목 텍스트에 이미 표기) */
/* 옵션 삭제 X — 1행 우측 상단 32×32, 시안 8×8 (텍스트 '삭제'는 font-size 0으로 감춤, 스크린리더는 읽음) */
#sit_opt_added .sit_opt_del {grid-row:1; grid-column:5; place-self:start end; width:32px; height:32px; margin:0 0 -10px; padding:0; border:0; font-size:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cpath d='M0 0l8 8M8 0L0 8' stroke='%2331405b' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 8px 8px; cursor:pointer;}
/* 총금액 — 마지막 스테퍼 행 우측에 정렬 (시안 8562: 가격 28 bold가 스테퍼와 같은 행) */
/* 레거시 style.css(669~672행 1.167em/lh45/strong 1.5em) 대응 — #sit_ov 포함 특이도 격상 */
#sit_ov #sit_tot_price {display:flex; justify-content:flex-end; align-items:flex-end; height:40px; margin:-60px 0 40px; padding:0 20px; font-size:28px; font-weight:700; line-height:1; text-align:right; color:var(--gray-950);} /* -60 = 박스 padding 20 + 스테퍼 행 40 (겹침 배치) · 하단 40 = 당김 보정 20 + 버튼 간격 20 */
#sit_ov #sit_tot_price:empty {display:none;}
#sit_ov #sit_tot_price span {display:none;} /* '총 금액 :' 라벨 — 시안 미노출 */
#sit_ov #sit_tot_price strong {font-size:28px; font-weight:700; line-height:1; margin:0;} /* 시안: 숫자·'원' 동일 28 bold */
/* 구매 버튼 — 구매하기 풀폭 60 (시안) + 장바구니 아이콘 60×60 (기능 유지) */
/* 장바구니 / 구매하기 반반 (D9 — M = gap 10 / 2 = 5) */
#sit_ov_btn.pd-actions {display:flex; align-items:center; gap:10px; margin:20px 0 0;}
/* 찜(하트)·장바구니 = 아이콘 정사각 60 아웃라인 / 구매하기 = 나머지 채움 (26.07.24 찜 추가) */
#sit_ov_btn .pd-actions__wish, #sit_ov_btn .pd-actions__cart {display:flex; align-items:center; justify-content:center; gap:8px; flex:0 0 60px; width:60px; height:60px; margin:0; border:1px solid var(--main-color); border-radius:10px; background:var(--white); color:var(--main-color); cursor:pointer; transition:background 0.2s;}
#sit_ov_btn .pd-actions__wish:hover, #sit_ov_btn .pd-actions__cart:hover {background:var(--bg05);}
#sit_ov_btn .pd-actions__wish img {width:28px; height:28px;}
#sit_ov_btn .pd-actions__cart i {font-size:22px;}
#sit_ov_btn .pd-actions__cart span {display:none;} /* 아이콘만 (라벨은 sr-only 아니지만 좁아서 숨김) */
#sit_ov_btn .pd-actions__buy {display:flex; align-items:center; justify-content:center; flex:1; height:60px; margin:0; border:0; border-radius:10px; background:var(--main-color); color:var(--fourth); font-size:18px; font-weight:700; line-height:1; cursor:pointer;}
#sit_ov_btn .pd-actions__buy:hover {background:var(--grad01);}

/* ==========================================================
   상세 하단 구획 (26.07.09 시안 2.png 뼈대)
   상세정보 → 관련상품 → 상품구매안내 → 사용후기 → 상품문의
   ========================================================== */
/* ==========================================================
   상세 하단 구획 — 시안 2719:8501 (26.07.24 재작성)
   상세정보 → [탭바+관련상품] → [탭바+구매안내] → [탭바+후기] → [탭바+문의]
   ========================================================== */
.pd-detail {margin:60px 0 0;}
.pd-detail__title {margin:0; padding:0 0 60px; border-bottom:1px solid var(--gray-300); font-size:36px; font-weight:700; line-height:1; color:var(--gray-950);}
#sit_inf_explan {padding:60px 0 0; text-align:center;}
#sit_inf_explan img {max-width:100%; height:auto;}
.pd-sec {margin:100px 0 0;}
#sit_info section.pd-sec {position:static; margin:100px 0 0; padding:0; border:0; background:transparent;} /* 레거시 style.css #sit_rel(481행 보더 박스) 무력화 — b특이도 우위 */
/* 탭바 — 풀블리드 하단 라인(gray-600) + 활성 탭은 상단 라운드 grad 보더 (회원가입 스텝탭 패턴) */
.pd-sec__tabs {position:relative; display:flex; justify-content:center; margin:0 0 40px; padding:0; list-style:none;} /* 탭 4×300=1200(컨테이너 폭) 딱 참 → 풀블리드 vw 불필요(가로스크롤 유발) 제거, 라인은 탭 아래 1200 폭 (26.07.24) */
.pd-sec__tabs::after {content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gray-400);} /* 26.09.29 시안 실측 rgb(178,178,178) — 기존 --gray-600(#656565) 과함 */ /* 하단 라인 2px — K1 허용 (사용자 요청 26.07.24) */
.pd-sec__tab {width:300px;}
.pd-sec__tab a {display:flex; justify-content:center; align-items:center; gap:10px; height:60px; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth); opacity:0.6;}
.pd-sec__tab.is-active {position:relative; z-index:1; border:2px solid var(--navy); border-bottom:0; border-radius:20px 20px 0 0; background:var(--white);} /* 26.09.29 시안 실측 #182b54 단색 — 기존 --grad01(navy→sky) 그라데이션에서 변경 */ /* 활성 탭 grad 보더 2px — 하단 라인과 동일 두께 */
.pd-sec__tab.is-active a {font-weight:700; opacity:1;}
/* 카운트 뱃지 — 활성 탭에만 노출 (시안: 00 캡슐 fifth) */
.pd-sec__cnt {display:none;}
.pd-sec__tab.is-active .pd-sec__cnt {display:inline-flex; align-items:center; justify-content:center; min-width:33px; height:24px; padding:4px 6px; border-radius:20px; background:var(--fifth); font-size:16px; font-weight:700; line-height:1; color:var(--white);}
.pd-sec__empty {padding:60px 0; text-align:center; font-size:16px; color:var(--rgba01);}
/* 상품구매안내 아코디언 — 라벨 18 rgba01 60h · 열림 항목만 앞 dot · 우측 ▼/▲ */
.pd-acc {border:0;}
.pd-acc__item {border:0;}
.pd-acc__item summary {display:flex; align-items:center; min-height:60px; padding:12px 0; font-size:18px; font-weight:500; line-height:1.39; color:var(--rgba01); cursor:pointer; list-style:none;}
.pd-acc__item summary::-webkit-details-marker {display:none;}
.pd-acc__item summary::before {content:''; flex:0 0 4px; width:4px; height:4px; margin:0 12px 0 9px; border-radius:50%; background:transparent;} /* dot 자리 고정 — 텍스트 들여쓰기 25 유지 */
.pd-acc__item[open] summary::before {background:var(--fifth);}
.pd-acc__item summary::after {content:''; flex:0 0 10px; width:10px; height:10px; margin-left:auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M0 2.5h10L5 8.5 0 2.5z' fill='%2331405b'/%3E%3C/svg%3E") no-repeat center / 10px 10px;}
.pd-acc__item[open] summary::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M0 7.5h10L5 1.5 0 7.5z' fill='%2331405b'/%3E%3C/svg%3E");} /* 방향별 SVG — rotate 금지 (M2) */
.pd-acc__body {padding:20px 40px; background:var(--gray-50); font-size:16px; font-weight:500; line-height:1.38; color:var(--gray-600);}

/* 기존 테마 style.css의 #sit_info(inline-flex·테두리·600px) / #sit_inf h2(font-size:0) 무력화 + inner 1200 */
#sit_info.pd-secs {display:block; border:0; min-height:0; width:100%; max-width:1200px; margin:0 auto; overflow:visible; background:transparent;}
#sit_info.pd-secs .pd-detail__title {position:static; font-size:36px; line-height:1;}

/* (26.07.24) 26.07.09 book-card 뼈대 잔재 삭제 — 상단 .book-card__* 시안 스타일(3640행~)이 단일 출처 */
.book-card__price .book-card__cust,
.book-card__cust { font-weight:400; }
/* 관련상품 그리드 여백 */
.pd-rel__grid { margin:0; }

/* ============================================================
   사용후기 (rv-*) — 카드형 3열 + 작성/상세 모달 (26.07.10, 시안 2.png/리뷰창.png)
   ============================================================ */
/* 상단: 후기작성 버튼 — 160×48 r10 main (시안 2719:8501) */
.pd-sec .rv-head {display:flex; justify-content:flex-end; margin-bottom:20px;}
.pd-sec .rv-btn-write {min-width:160px; padding:15px 31px; background:var(--main-color); color:var(--fourth); border:0; border-radius:10px; font-size:18px; font-weight:700; line-height:1; cursor:pointer; transition:background .2s;}
.pd-sec .rv-btn-write:hover {background:var(--grad01);}

/* 카드 그리드 (3열, 386×266 r20) — 자식 % + 좌우 gap % (E3: 20/1200=1.67%) */
#sit_use .rv-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:20px 1.67%; list-style:none; margin:0; padding:0;}
#sit_use .rv-card {display:flex; flex-direction:column; padding:20px; border:1px solid var(--gray-300); border-radius:20px; background:var(--white); cursor:pointer; transition:box-shadow .2s;}
#sit_use .rv-card:hover {box-shadow:var(--shadow02);}
#sit_use .rv-card__date {margin:2px 0 0; font-size:16px; font-weight:500; line-height:1.38; color:var(--rgba04);}
#sit_use .rv-card__tit {margin:14px 0 0; font-size:18px; font-weight:700; line-height:1.39; color:var(--gray-950); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#sit_use .rv-card__txt {margin:32px 0 0; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:66px;}
#sit_use .rv-card__foot {display:flex; justify-content:space-between; align-items:center; margin-top:40px;}
#sit_use .rv-card__name {font-size:16px; color:var(--gray-400);}
.pd-sec .rv-empty {padding:60px 0; text-align:center; color:var(--rgba01); font-size:16px;}

/* 별점 — 마이페이지와 동일 SVG (M11, xi 폰트는 font-size 0으로 감춤) */
.rv-stars {display:inline-flex; gap:3px; font-size:0; line-height:1;}
.rv-stars i {display:block; width:22px; height:22px; font-size:0; color:transparent; background:url("../../include/img/ico_star_on.svg") no-repeat center / 22px 22px;} /* xi-star 폰트 글자(검은 별) 숨김 → SVG만 */
.rv-stars i::before {display:none;} /* 폰트 아이콘 글리프 제거 */
.rv-stars i.is-off {background-image:url("../../include/img/ico_star_off.svg");}

/* 페이징 — 원형 40 (edge 흰+bd / move grad04 흰 화살표), 숫자 그룹과 gap 40 (시안 넘버링) */
/* 리뷰 페이징 — default_shop.css의 .pg_wrap 디자인과 동일 (마크업은 rv-pg 유지, 방향은 aria-label로 구분. 26.07.24) */
.pd-sec .rv-pg {clear:both; display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; margin:60px auto 0; text-align:center;}
.pd-sec .rv-pg a:focus, .pd-sec .rv-pg a:hover {text-decoration:none;}
/* 숫자 = .pg_page / 현재 = .pg_current */
.pd-sec .rv-pg__num {display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:auto; padding:0; border:0; background:none; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth); border-radius:0; text-decoration:none;}
.pd-sec .rv-pg__num.is-cur {font-weight:700; color:var(--main-color);}
.pd-sec a.rv-pg__num:hover {background:none; color:var(--main-color);}
/* 화살표 4종 = .pg_start/prev/next/end — 40 원형, 폰트아이콘 숨기고 배경 SVG (방향 aria-label) */
.pd-sec .rv-pg__btn {width:40px; height:40px; padding:0; border-radius:50%; overflow:hidden; text-indent:-999px;}
.pd-sec .rv-pg__btn i {display:none;}
.pd-sec .rv-pg__btn.is-off {opacity:.35; cursor:default;}
.pd-sec .rv-pg [aria-label="이전"] {margin-right:30px; border:1px solid var(--gray-200); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'%3E%3Cpath d='M5 1L1 6l4 5' stroke='%23656565' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 6px 12px;}
.pd-sec .rv-pg [aria-label="다음"] {margin-left:30px; border:1px solid var(--gray-200); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'%3E%3Cpath d='M1 1l4 5-4 5' stroke='%23656565' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 6px 12px;}
.pd-sec .rv-pg [aria-label="처음"] {border:1px solid var(--gray-200); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Cpath d='M5 1L1 6l4 5M9 1L5 6l4 5' stroke='%23656565' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 10px 12px;}
.pd-sec .rv-pg [aria-label="맨끝"] {border:1px solid var(--gray-200); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Cpath d='M1 1l4 5-4 5M5 1l4 5-4 5' stroke='%23656565' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 10px 12px;}
/* hover — 그라데이션 원 + 흰 화살표 */
.pd-sec .rv-pg [aria-label="이전"]:hover {border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'%3E%3Cpath d='M5 1L1 6l4 5' stroke='white' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 6px 12px, var(--grad05);}
.pd-sec .rv-pg [aria-label="다음"]:hover {border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'%3E%3Cpath d='M1 1l4 5-4 5' stroke='white' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 6px 12px, var(--grad05);}
.pd-sec .rv-pg [aria-label="처음"]:hover {border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Cpath d='M5 1L1 6l4 5M9 1L5 6l4 5' stroke='white' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 10px 12px, var(--grad05);}
.pd-sec .rv-pg [aria-label="맨끝"]:hover {border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Cpath d='M1 1l4 5-4 5M5 1l4 5-4 5' stroke='white' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 10px 12px, var(--grad05);}

/* ---- 후기작성 모달 (시안 2742:21735, 26.07.24 재작성) ---- */
.rv-modal {display:none; position:fixed; inset:0; z-index:10000; background:var(--rgba-modal, rgba(8, 9, 10, 0.2)); padding:24px; overflow-y:auto;}
.rv-modal.is-open {display:flex; align-items:flex-start; justify-content:center;}
body.rv-lock {overflow:hidden;}
/* 660 카드 r10, padding 30 (헤더/본문 좌우 30) */
.rv-modal__dlg {width:660px; max-width:100%; margin:4vh auto; padding:30px; border-radius:10px; background:var(--white); box-shadow:0 20px 60px rgba(8, 9, 10, 0.25);}
.rv-modal__head {display:flex; justify-content:space-between; align-items:center; margin:0 0 20px; padding-bottom:20px; border-bottom:2px solid var(--main-color);}
.rv-modal__head h3 {margin:0; font-size:24px; font-weight:700; line-height:1; color:var(--gray-950);}
#sit_use .rv-modal__head h3, #sit_qa .rv-modal__head h3 {font-size:24px; line-height:1;} /* 테마 h3 font-size:0 대응 */
.rv-modal [hidden] {display:none;} /* hidden 속성이 display:flex에 밀리지 않게 */
/* 닫기 — 우상단(margin-left:auto), 폰트아이콘 대신 SVG X 18×18 fifth (시안 2742:21735, xi-close glyph 미표시 대응) */
.rv-modal__close {flex:0 0 24px; width:24px; height:24px; margin-left:auto; padding:0; border:0; font-size:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M1 1l16 16M17 1L1 17' stroke='%2331405b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px; cursor:pointer;}
.rv-modal__close i {display:none;}
.rv-modal__btns {display:flex; justify-content:center; gap:20px; margin:30px 0 0;} /* 버튼 2개(수정/삭제) 시 gap 20 — 시안 2719:6792 */
.rv-btn-submit {min-width:160px; padding:15px 31px; border:0; border-radius:10px; background:var(--main-color); color:var(--white); font-size:18px; font-weight:700; line-height:1; cursor:pointer; transition:background 0.2s;}
.rv-btn-submit:hover {background:var(--grad01);}
.rv-btn-submit:disabled {opacity:.6; cursor:default;}
/* 수정/삭제 버튼 — 시안 2719:6792: 160×48 r10, 18 w700 흰 글씨 (주요=main / 보조=gray-300), gap 20 */
.rv-btn-line {display:inline-flex; align-items:center; justify-content:center; min-width:160px; padding:15px 31px; border:0; border-radius:10px; background:var(--main-color); font-size:18px; font-weight:700; line-height:1; color:var(--white); cursor:pointer; text-decoration:none; transition:background 0.2s;}
.rv-btn-line:hover {background:var(--grad01); color:var(--white);}
.rv-btn-del, a.rv-btn-del:link {background:var(--gray-300); color:var(--white);} /* 보조(삭제) = gray-300. a:link 병기 — 레거시 a{color:#555} 대응 */
.rv-btn-del:hover {background:var(--gray-400);}

/* 상품 정보 — 이미지 104 + 이름/옵션, 하단 라인 */
.rv-prod {display:flex; gap:20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--gray-300);}
.rv-prod__img {display:flex; align-items:center; justify-content:center; flex:0 0 104px; width:104px; height:104px; border-radius:10px; background:var(--gray-100); overflow:hidden;}
.rv-prod__img img {max-width:60%; max-height:80%; object-fit:contain;}
.rv-prod__name {margin:0; font-size:16px; font-weight:400; line-height:1; color:var(--gray-950);}
.rv-prod__opt {margin:8px 0 0; font-size:14px; font-weight:400; line-height:1; color:var(--fifth);}

/* 폼 행 — 라벨 124(좌) + 필드(우), gap 없이 라벨 고정폭 */
.rv-frow {display:flex; align-items:flex-start; margin:20px 0 0;}
.rv-frow--star, .rv-frow--input {align-items:center;} /* 짧은 필드(별점·제목) = 라벨 세로 중앙 (시안) */
.rv-frow__label {flex:0 0 124px; font-size:18px; font-weight:700; line-height:1.4; color:var(--gray-950);} /* 긴 필드(내용·사진) 기본 = 상단 정렬 (시안) */
.rv-frow__label em {color:var(--secondary); font-style:normal;}
.rv-frow__field {flex:1; min-width:0;}

/* 별점 선택 — 24px SVG 별 (ico_star_on/off), 라디오 hover/checked 연동 */
.rv-starpick {display:flex; gap:4px;}
.rv-starpick label {cursor:pointer;}
.rv-starpick input {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}
.rv-starpick i {display:block; width:24px; height:24px; font-size:0; color:transparent; background:url("../../include/img/ico_star_on.svg") no-repeat center / 24px 24px;} /* 기본 = 채운 별. xi-star 폰트 글자(검은 별) 숨김 → SVG만 (JS가 선택 초과분에 is-off 부여) */
.rv-starpick i::before {display:none;} /* 폰트 아이콘 글리프 완전 제거 */
.rv-starpick i.is-off {background-image:url("../../include/img/ico_star_off.svg");}

/* 제목: 그라디언트 라운드 인풋 (r30 grad04 2px) */
/* 제목 인풋 — 제휴문의/회원가입과 동일 공식: 기본 1px gray-300, focus 2px grad04(패딩 1px 감소로 이동 방지) */
.rv-grad {padding:0; border-radius:0; background:none;} /* 래퍼는 투명 — 보더는 input이 직접 */
.rv-grad input, input.rv-grad__input {display:block; width:100%; padding:13px 19px; border:1px solid var(--gray-300); border-radius:30px; background:var(--white); font-size:16px; line-height:1.38; color:var(--gray-950); box-sizing:border-box;} /* input. 병기 — 레거시 input[type=text] radius 리셋 대응 */
.rv-grad input:focus, input.rv-grad__input:focus {padding:12px 18px; border:2px solid transparent; background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad01) border-box; outline:0;}
.rv-grad input::placeholder {color:var(--rgba01); opacity:1;}

/* 내용: 카운터 포함 textarea (r20 gray-300 보더, 160h) */
/* 내용 textarea — 제휴문의와 동일 공식: 기본 1px gray-300, focus 2px grad04(패딩 1px 감소) */
.rv-ta {position:relative; padding:0; border:0; border-radius:0; background:none;} /* 래퍼는 투명(카운터 배치용) — 보더는 textarea가 직접 */
.rv-ta textarea {display:block; width:100%; height:160px; padding:19px; border:1px solid var(--gray-300); border-radius:20px; background:var(--white); font-size:16px; line-height:1.5; color:var(--gray-950); resize:none; box-sizing:border-box;}
.rv-ta textarea:focus {padding:18px; border:2px solid transparent; background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad01) border-box; outline:0;}
.rv-ta textarea::placeholder {color:var(--rgba01);}
.rv-ta__cnt {position:absolute; right:20px; bottom:16px; font-size:16px; color:var(--main-color);}
.rv-ta__cnt b {color:var(--main-color); font-weight:400;}

/* 사진 슬롯 (4칸, 104×104 r10 gray-100) */
.rv-photos {display:flex; gap:20px; list-style:none; margin:0; padding:0;}
.rv-photos__slot {position:relative; flex:0 0 104px; width:104px; height:104px; border-radius:10px; background:var(--gray-100); overflow:hidden;}
.rv-photos__slot input[type=file] {position:absolute; width:1px; height:1px; opacity:0;}
.rv-photos__add {display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--gray-400); font-size:24px; cursor:pointer;}
.rv-photos__slot img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.rv-photos__del {position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:0; border-radius:50%; background:var(--rgba01); color:var(--white); font-size:11px; cursor:pointer; z-index:2;}

/* 안내문 — dot + gray-600 14px */
.rv-notes {list-style:none; margin:30px 0 0; padding:0; font-size:14px; line-height:1.4; color:var(--gray-600);} /* lh 19.6/14 = 1.4 (시안) */
.rv-notes li {position:relative; margin:0; padding-left:12px;}
.rv-notes li + li {margin-top:10px;} /* 시안 gap 10 */
.rv-notes li strong {font-weight:700; color:var(--gray-600);}
.rv-notes li::before {content:''; position:absolute; left:2px; top:8px; width:3px; height:3px; border-radius:50%; background:var(--gray-600);}

/* 상세보기 모달 */
.rv-view__meta {display:flex; align-items:center; gap:12px; margin-top:18px;}
/* (26.07.27 제거) .rv-view__meta .rv-stars{font-size:17px} — .rv-stars의 font-size:0을 덮어 xi-star 검은 별이 되살아나던 원인. 별 크기는 .rv-stars i(22px)가 결정 */
.rv-view__sub {font-size:13px; color:#98a0ad;}
.rv-view__tit {font-size:18px; font-weight:700; color:#111; margin:12px 0 14px; line-height:1.4;}
.rv-view__content {font-size:15px; color:#444; line-height:1.75; word-break:break-word;}
.rv-view__photos {display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.rv-view__photos img {height:140px; border-radius:8px; display:block;}
.rv-view__reply {background:#f7f8fb; border-radius:10px; padding:16px 18px; margin-top:20px; font-size:14px; color:#555; line-height:1.7;}
.rv-view__reply-badge {display:inline-block; background:#6b74f8; color:#fff; font-size:12px; border-radius:4px; padding:3px 8px; margin-bottom:8px;}

/* 반응형 — 모달(rv-*)은 파일 하단 트랙2 블록(1080/768/500)에서 일괄 처리 (임의 BP 992/640 정규화, 26.07.28) */

/* ============================================================
   상품문의 (qa-*) — 리스트형 아코디언 + 작성 모달 (26.07.10, 시안 2.png/문의창.png)
   모달/페이징/버튼은 .rv-* 공용 재사용
   ============================================================ */
.qa-head {gap:20px;}
.pd-sec .qa-btn-faq {display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
#sit_qa .qa-list {list-style:none; margin:0; padding:0; border-top:1px solid var(--gray-300);}
#sit_qa .qa-item {border-bottom:1px solid var(--gray-300);}
/* 행 70h — pill + 제목 + 자물쇠 / 우측 날짜 + ▼ (시안 2719:8501) */
#sit_qa .qa-item__row {display:flex; align-items:center; gap:8px; width:100%; min-height:70px; background:none; border:0; padding:20px 0; cursor:pointer; text-align:left;}
.qa-badge {display:inline-flex; align-items:center; flex:0 0 auto; height:30px; padding:4px 12px; border-radius:20px; border:1px solid; background:var(--white); font-size:14px; line-height:1;}
.qa-badge.is-wait {color:var(--secondary); border-color:var(--secondary);}
.qa-badge.is-done {color:var(--main-color); border-color:var(--main-color);}
/* 제목 = 텍스트 + 자물쇠(내부) 세로 중앙 정렬, gap 8 (시안 2719:8763). 버튼 컨텍스트라 letter-spacing 리셋됨 → -0.5 재지정 */
#sit_qa .qa-item__tit {display:inline-flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; font-size:18px; font-weight:500; line-height:1.39; letter-spacing:-0.5px; color:var(--rgba01); white-space:nowrap;}
.qa-lock {flex:0 0 16px; display:inline-block; width:16px; height:16px; font-size:0; background:url("../../include/img/ico_lock.svg") no-repeat center / 16px 16px;} /* xi 폰트 → SVG (M11), inline-flex 항목이라 flex:0 0 16 */
#sit_qa .qa-item__date {flex:0 0 auto; margin-left:auto; font-size:16px; font-weight:500; color:var(--rgba04);}
#sit_qa .qa-item__arrow {flex:0 0 10px; width:10px; height:10px; margin-left:20px; font-size:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M0 2.5h10L5 8.5 0 2.5z' fill='%2331405b'/%3E%3C/svg%3E") no-repeat center / 10px 10px;}
#sit_qa .qa-item.is-open .qa-item__arrow {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M0 7.5h10L5 1.5 0 7.5z' fill='%2331405b'/%3E%3C/svg%3E");} /* 방향별 SVG — rotate 금지 (M2) */
#sit_qa .qa-item__body {padding:0 0 20px;}
#sit_qa .qa-item__body[hidden] {display:none;}
/* 펼침 내용 — 시안 2719:8216: Q는 배경 없음(글자 아이콘+텍스트), A는 흰 박스+grad04 2px 보더 (26.07.24, .qa-item__row는 무수정) */
.qa-qa {display:flex; align-items:flex-start; gap:9px; padding:0; border:0; border-radius:0; background:none;}
.qa-q {padding:12px 0;}
.qa-a {margin-top:12px; padding:18px 30px; border:2px solid transparent; border-radius:20px; background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad04) border-box;} /* 흰 박스 + grad04 2px 보더 */
.qa-a.is-empty .qa-qa__cnt {color:var(--rgba01);}
/* Q/A 글자 아이콘 — 원형 배경 제거, 큰 글자 (Q=fifth / A=main, 시안 28px vector) */
.qa-alp {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:auto; min-width:28px; height:auto; border-radius:0; background:none; font-size:26px; font-weight:700; line-height:1; color:var(--fifth);}
.qa-alp--a {color:var(--main-color);}
/* 텍스트 — Q는 rgba01(60%) / A는 gray-950, 둘 다 18 w500 */
.qa-qa__cnt {flex:1; min-width:0; font-size:18px; font-weight:500; line-height:1.44; color:var(--gray-950); word-break:break-word;}
.qa-q .qa-qa__cnt {color:var(--rgba01);}
.qa-qa__cnt p {margin:0;}
.qa-secret-msg {display:flex; align-items:center; gap:6px; color:var(--rgba01); margin:0;}
#sit_qa .qa-item__cmd {display:flex; justify-content:flex-end; gap:20px; margin-top:20px;} /* 시안 2719:6792 버튼 gap 20 */
.qa-secret-chk {display:flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; color:#555; cursor:pointer;}
.qa-secret-chk span {color:#98a0ad;}
.qa-secret-chk input {width:15px; height:15px; accent-color:#6b74f8;}
.qa-secret-chk .xi-lock-o {color:#98a0ad;}
@media (max-width: 640px) {
  #sit_qa .qa-item__row {flex-wrap:wrap; gap:8px;}
  #sit_qa .qa-item__tit {flex:1 1 100%; order:4; white-space:normal;}
}

/* ==========================================================
   BA 마이페이지 리뉴얼 (26.07.13) — 공통 프레임(.ba-my) + 장바구니(.ba-cart)
   ========================================================== */
.ba-my {width:100%; max-width:1200px; margin:100px auto 140px; padding:0;} /* Figma 2719:6411 재작성 (26.07.22) */
@media(max-width:1240px){.ba-my {padding:0 4%;}}

/* 상단 요약 카드 — 1200×292 r30, grad04 2px 보더, 3컬럼 400 */
.ba-my__card {display:flex; margin-bottom:80px; padding:40px 0; border:2px solid transparent; border-radius:30px; background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad04) border-box; box-shadow:var(--shadow07);}
.ba-my__card-col {display:flex; flex-direction:column; flex:1; min-width:0; padding:0 60px;}
.ba-my__card-col + .ba-my__card-col {border-left:1px solid var(--gray-200);}
.ba-my__hello, .ba-my__card-lb {margin:0 0 10px; font-size:18px; font-weight:400; line-height:1; color:var(--fifth);}
.ba-my__name, .ba-my__point {margin:0; font-size:28px; font-weight:700; line-height:1; color:var(--gray-950);}
.ba-my__point span {font-size:18px; font-weight:400; color:var(--fifth);}
.ba-my__edit {display:inline-flex; align-items:center; gap:4px; align-self:flex-end; margin-top:auto; padding-top:20px; font-size:16px; font-weight:400; line-height:1.38; color:var(--gray-950); opacity:0.6; text-decoration:none;} /* Figma 수정하기 프레임 60% */
.ba-my__edit img {width:24px; height:24px;}
.ba-my__hist {margin:0; padding:20px; border-radius:10px; background:var(--bg01); list-style:none;}
.ba-my__hist li {display:flex; align-items:center; padding:15px 0; font-size:18px; font-weight:400; line-height:1; color:var(--fifth); list-style:none;}
.ba-my__hist li + li {border-top:1px solid var(--gray-300);}
.ba-my__hist strong {margin-left:auto; margin-right:4px; font-size:20px; font-weight:700; color:var(--gray-950);}

/* 본문: 좌 LNB 240 + gap 80 + 우 콘텐츠 880 */
.ba-my__body {display:flex; gap:80px; align-items:flex-start;}
.ba-my__aside {flex:0 0 240px; width:240px;}
.ba-my__nav {margin:0; padding:0; list-style:none;}
.ba-my__nav li {list-style:none;}
.ba-my__nav a {display:flex; align-items:center; min-height:60px; padding:10px 0; border-bottom:1px solid var(--gray-300); font-size:18px; font-weight:400; line-height:1; color:var(--rgba01); text-decoration:none;}
.ba-my__nav a:hover {color:var(--gray-950);}
.ba-my__nav a.is-active {border-bottom:2px solid transparent; background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad04) border-box; font-weight:700; color:var(--gray-950);} /* 하단만 grad04 1px (border-bottom만 존재 → border-box 배경이 하단에만) */
.ba-my__content {flex:1; min-width:0;}

/* 콘텐츠 타이틀 (전체 N건 우측) — 보더는 테이블 헤더가 담당 */
.ba-my__cttit {display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; padding-bottom:0; border-bottom:0;}
.ba-my__cttit h3 {margin:0; font-size:16px; font-weight:700; line-height:1; color:var(--rgba02);}
.ba-my__ctcnt {font-size:16px; font-weight:400; line-height:1.38; color:var(--rgba02);}
.ba-my__ctcnt strong {font-weight:700;}

/* 장바구니 — 헤더바 60(상단 2px main + bg01), 행 140, 구분선 gray-300 */
.ba-cart input[type=checkbox] {appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; border:1px solid var(--gray-300); border-radius:4px; background:var(--white); vertical-align:middle; cursor:pointer;} /* M9 */
.ba-cart input[type=checkbox]:checked {background:var(--white) url('../../include/img/ico_check_blue.svg') no-repeat center / 10px 8px;}
.ba-cart__tblwrap {overflow-x:auto;}
.ba-cart__tbl {width:100%; border-collapse:collapse;}
.ba-cart__col-no, .ba-cart__col-chk {width:42px;} /* Figma 컬럼폭 */
.ba-cart__col-qty {width:84px;}
.ba-cart__col-price, .ba-cart__col-send {width:126px;}
.ba-cart__col-sum {width:125px;}
.ba-cart__tbl thead th {padding:21px 0; border-top:2px solid var(--main-color); border-bottom:0; background:var(--bg01); font-size:16px; font-weight:400; line-height:1; color:var(--rgba01); text-align:center;}
.ba-cart__tbl tbody td {padding:20px 0; border-bottom:1px solid var(--gray-300); font-size:16px; font-weight:400; color:var(--gray-950); text-align:center; vertical-align:middle;}
.ba-cart__no {color:var(--rgba01);}
.ba-cart__prd {display:flex; align-items:center; gap:20px; text-align:left;}
.ba-cart__img {display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:100px; height:100px; border-radius:10px; background:var(--gray-100);} /* 정사각 썸네일 박스 — D8 예외 */
.ba-cart__img img {display:block; width:auto; max-height:80px;}
.ba-cart__name {min-width:0;}
.ba-cart__nm {display:block; margin-bottom:8px; font-size:16px; font-weight:400; line-height:1; color:var(--gray-950); text-decoration:none;}
.ba-cart__opt {font-size:14px; color:var(--fifth);}
.ba-cart__opt table, .ba-cart__opt th, .ba-cart__opt td {border:0; padding:0; background:none; font-size:14px; color:var(--fifth);}
.ba-cart__sum .total_prc {font-weight:700; color:var(--main-color);}
.ba-cart__empty {padding:70px 0; color:var(--rgba01);}
.ba-cart .sod_option_btn {margin-top:12px;}
/* 선택사항수정 — 사이트 아웃라인 보조 버튼 톤(흰 배경/gray-300 보더/fifth, hover main), 카드 안이라 축소 */
.ba-cart .sod_option_btn button {height:auto; padding:8px 16px; border:1px solid var(--gray-300); border-radius:20px; background:var(--white); font-size:14px; font-weight:500; line-height:1; color:var(--fifth); cursor:pointer; transition:all 0.2s;} /* 레거시 height:23px 해제 → padding 자연 높이 (D8) */
.ba-cart .sod_option_btn button:hover {border-color:var(--main-color); color:var(--main-color);}

.ba-cart__btns {display:flex; gap:20px; margin-top:20px;}
.ba-cart__del, .ba-cart__clear {min-width:160px; padding:15px 31px; border:0; border-radius:10px; background:var(--main-color); font-size:18px; font-weight:700; line-height:1; color:var(--white); cursor:pointer;} /* 160×48 — 체크 1개+ 시 활성(main) */
.ba-cart__del[disabled], .ba-cart__clear[disabled] {background:var(--gray-300); cursor:default;} /* 체크 0개 → 비활성 gray-300 */

.ba-cart__tot {margin-top:60px; padding:30px 100px; border-radius:10px; background:var(--bg01);}
.ba-cart__tot ul {display:flex; justify-content:space-between; margin:0; padding:0;}
.ba-cart__tot li {position:relative; flex:1; list-style:none; text-align:center;}
.ba-cart__tot li + li::before {content:''; position:absolute; top:50%; left:0; width:1px; height:40px; margin-top:-20px; background:var(--gray-300);} /* 40px 세로 구분선 — J3 3순위 */
.ba-cart__tot span {display:block; margin-bottom:24px; font-size:16px; font-weight:400; line-height:1; color:var(--rgba01);}
.ba-cart__tot strong {font-size:18px; font-weight:700; line-height:1; color:var(--main-color);}

.ba-cart__act {margin-top:60px; text-align:center;}
.ba-cart__order, a.ba-cart__order:link, a.ba-cart__order:visited {display:inline-block; min-width:160px; padding:15px 31px; border:0; border-radius:10px; background:var(--main-color); font-size:18px; font-weight:700; line-height:1; color:var(--white); cursor:pointer; text-decoration:none; text-align:center;} /* 160×48 — a:link 병기 */

/* 반응형 */
@media (max-width:1080px) {
    .ba-my__body {flex-direction:column; gap:30px; align-items:stretch;} /* base flex-start가 column에서 shrink-to-fit(자식 max-content 폭)으로 작동 — 넘침 원인 */
    .ba-my__aside {width:100%; flex:none;}
    .ba-my__nav {display:flex; flex-wrap:wrap; gap:2px 20px;}
    .ba-my__nav a {min-height:0; border-bottom:0; padding:10px 0;}
    .ba-cart__tot {padding:30px 40px;}
}
@media (max-width:768px) {
    .ba-my {margin:50px auto 80px;}
    .ba-my__card {flex-direction:column; gap:20px; padding:24px 0;}
    .ba-my__card-col {padding:0 24px;}
    .ba-my__card-col + .ba-my__card-col {border-left:0; border-top:1px solid var(--gray-200); padding-top:20px;}
    .ba-my__edit {align-self:flex-start; padding-top:12px;}
    .ba-cart__tbl {min-width:640px;}
    .ba-cart__tot {padding:24px 20px;}
    .ba-cart__tot span {margin-bottom:12px;}
}

/* ==========================================================
   BA 마이페이지 2차 (26.07.13) — 주문 리스트 공용(.ba-od) : order/cancel/refund
   ========================================================== */
/* 기간 필터 — 880 bg01 r10, 퀵버튼 좌 / 날짜+조회 우 (Figma 2719:6232 26.07.22) */
.ba-od__sch {display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:20px 0 60px; padding:35px 40px 35px 60px; border-radius:10px; background:var(--bg01);} /* Figma 2973:3875 — 좌 60 / 우 40 */
.ba-od__quick {display:flex; gap:40px;}
.ba-od__quick button {padding:0; border:0; background:none; font-size:16px; font-weight:400; line-height:1; color:var(--rgba01); cursor:pointer;}
.ba-od__quick button.is-on {color:var(--main-color); font-weight:700; text-decoration:underline; text-underline-offset:4px;} /* Figma: 활성 밑줄 */
.ba-od__range {display:flex; align-items:center; gap:4px; margin-left:auto;} /* input↔대시 4px */
.ba-od__range input[type=date] {position:relative; width:160px; height:50px; padding:0 20px; border:1px solid var(--gray-300); border-radius:30px; background:var(--white); font-size:16px; color:var(--rgba01); box-sizing:border-box; cursor:pointer;} /* 텍스트 60% */
.ba-od__range input[type=date]::-webkit-calendar-picker-indicator {position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer;} /* 네이티브 달력 아이콘 숨김 + 필드 전체 클릭 시 피커 (Figma 깔끔한 필드) */
.ba-od__range input[type=date]::-webkit-inner-spin-button {display:none;}
.ba-od__range span {display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:20px; color:var(--fifth);} /* 대시 프레임 20폭 */
.ba-od__go {display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:50px; height:50px; margin-left:6px; padding:0; border:0; border-radius:30px; background:var(--grad05); cursor:pointer;} /* 원형 조회 — 135deg 대각 grad, input과 10px (gap4+6) */
.ba-od__go img {display:block; width:19px; height:19px;} /* Figma 돋보기 SVG 원본 */

.ba-my__cttit--sub {margin-top:0;}

/* 리스트 헤더 — 7열, 상단 2px main, bg01 */
.ba-od__hd, .ba-od__row {display:grid; grid-template-columns:147px 98px 48px 1fr 147px 97px 147px; align-items:center; text-align:center;}
.ba-od__hd {padding:20px 0; border-top:2px solid var(--main-color); background:var(--bg01); font-size:16px; color:var(--rgba01);}
.ba-od__hd .ba-od__c5 {line-height:1.4;}

/* 주문 그룹 카드 (테두리 1px gray-400) */
.ba-od__group {border:1px solid var(--gray-400);}
.ba-od__group + .ba-od__group {margin-top:-1px;} /* 인접 테두리 겹침 → 1px 라인 */
.ba-od__row {padding:20px 0; border-bottom:1px solid var(--gray-200); font-size:16px; color:var(--gray-950);}
.ba-od__odid {color:var(--gray-950); text-decoration:none;}
.ba-od__odid:hover {text-decoration:underline;}
.ba-od__c2, .ba-od__c5 {line-height:1.4;} /* 2~3줄 */
.ba-od__row .ba-od__c4 {display:flex; flex-direction:column; gap:8px; min-width:0; text-align:left;}
.ba-od__c4 strong {font-weight:400; color:var(--gray-950); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ba-od__c4 em {font-style:normal; font-size:14px; color:var(--fifth); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ba-od__st {color:var(--gray-950);}
.ba-od__st.is-red {color:var(--alert); font-weight:700;}
.ba-od__st.is-blue {color:var(--main-color); font-weight:700;}
.ba-od__st.is-muted {color:var(--fifth); font-weight:700; opacity:0.6;} /* 환불완료 (2719:7223) */
.ba-od__rvlink {color:var(--main-color); font-weight:700; text-decoration:none;}
.ba-od__row .ba-od__c7 {color:var(--gray-950);} /* 행만 — 헤더 c7(후기상태)은 rgba01 유지 */

/* 주문 상품 블록 — 100x100 썸네일 + 정보 + 교재 상세보기(우하) */
.ba-od__item {display:flex; align-items:center; gap:30px; padding:20px;}
.ba-od__item + .ba-od__item {border-top:1px solid var(--gray-200);}
.ba-od__item-img {display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:100px; height:100px; border-radius:10px; background:var(--gray-100);} /* 정사각 썸네일 — D8 예외 */
.ba-od__item-img img {display:block; width:auto; max-height:80px;}
.ba-od__item-info {min-width:0;}
.ba-od__item-info strong {display:block; margin-bottom:8px; font-size:18px; font-weight:700; color:var(--gray-950);}
.ba-od__item-info span {font-size:16px; color:var(--gray-950); opacity:0.6;}
.ba-od__item-more {align-self:flex-end; margin-left:auto; font-size:14px; color:var(--gray-950); opacity:0.4; text-decoration:none;}
.ba-od__item-more:hover {opacity:0.7;}

.ba-od__empty {padding:70px 0; text-align:center; color:var(--rgba01);}

/* 페이징 (G5 기본 마크업 스타일링) */
.ba-my .pg_wrap {display:block; margin-top:40px; text-align:center; float:none;}
.ba-my .pg {display:inline-flex; gap:4px; align-items:center;}
.ba-my .pg_page, .ba-my .pg_current {display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 6px; border:0; border-radius:8px; background:none; font-size:14px; color:var(--rgba01); text-decoration:none;}
.ba-my .pg_current {background:var(--main-color); color:var(--white); font-weight:700;}
.ba-my .pg_page:hover {background:var(--gray-100);}

@media (max-width:1080px) {
    .ba-od__sch {padding:24px; gap:16px;}
    .ba-od__quick {gap:24px;}
    .ba-od__range {margin-left:0; flex-wrap:wrap;}
}
@media (max-width:900px) {
    .ba-od__hd {display:none;}
    .ba-od__row {grid-template-columns:1fr 1fr; text-align:left; gap:8px;}
}

/* ==========================================================
   BA 마이페이지 3차 (26.07.13) — 회원정보/탈퇴(.ba-acc) + 검색(.ba-mysch) + 문의(.ba-qa) + 후기(.ba-rvl)
   ========================================================== */
/* 회원정보 수정 / 탈퇴 */
.ba-my__cttit--line {padding-bottom:20px; border-bottom:2px solid var(--main-color);} /* 회원정보 수정 타이틀 (2719:7884) */
.ba-acc {margin-top:20px; padding:0;}
.ba-acc__row {display:flex; align-items:center;}
.ba-acc__row + .ba-acc__row {margin-top:36px;}
.ba-acc__row:last-child {margin-top:28px;}
.ba-acc__lb {display:flex; gap:8px; flex:0 0 160px; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth);}
.ba-acc__lb em {font-style:normal; font-size:20px; line-height:1.1; color:var(--secondary);}
.ba-acc__val {font-size:20px; font-weight:400; line-height:1.4; color:var(--fifth);}
.ba-acc__pw {width:388px; max-width:100%;}
.ba-acc__btns {margin-top:120px; text-align:center;}
.ba-act-btn {min-width:160px; padding:15px 31px; border:0; border-radius:10px; background:var(--main-color); font-size:18px; font-weight:700; line-height:1; color:var(--white); cursor:pointer;} /* 160×48 */

/* 마이페이지 검색바 — 880 bg01 r10 중앙 (Figma 2719:7402, 26.07.22) */
.ba-mysch {display:flex; justify-content:center; align-items:center; gap:20px; margin:20px 0; padding:35px 0; border-radius:10px; background:var(--bg01);}
.ba-mysch .ba-select {width:160px;}
.ba-mysch__stx {width:320px; border-radius:30px;}
.ba-mysch .ba-od__go {margin-left:0;}

/* 나의 상품 문의 (아코디언) */
.ba-qa__list {margin:0; padding:0; list-style:none;}
.ba-qa__item {border-bottom:1px solid var(--gray-400);}
.ba-qa__row {display:flex; align-items:center; gap:8px; width:100%; padding:20px 0; border:0; background:none; text-align:left; cursor:pointer;}
.ba-qa__badge {flex:0 0 auto; padding:3px 11px; border:1px solid var(--secondary); border-radius:20px; background:var(--white); font-size:16px; font-weight:400; line-height:1.38; color:var(--secondary);} /* 78×30 pill */
.ba-qa__badge.is-done {border-color:var(--secondary); background:var(--secondary); color:var(--white);}
.ba-qa__tit {min-width:0; font-size:18px; font-weight:500; line-height:1.39; color:var(--gray-950); opacity:0.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ba-qa__lock {flex:0 0 auto; width:16px; height:16px;}
.ba-qa__date {flex:0 0 auto; margin-left:auto; font-size:16px; font-weight:500; line-height:1.38; color:var(--fifth); opacity:0.6;}
.ba-qa__arrow {flex:0 0 auto; width:24px; height:24px; transition:transform 0.2s;}
.ba-qa__item.is-open .ba-qa__arrow {transform:rotate(180deg);}
.ba-qa__question {padding:0 0 20px; font-size:16px; font-weight:500; line-height:1.38; color:var(--gray-600);}
.ba-qa__body[hidden] {display:none;}
.ba-qa__answer {display:flex; flex-direction:column; gap:20px; margin:0 0 20px; padding:20px 40px; border-radius:10px; background:var(--bg01);}
.ba-qa__answer strong {font-size:18px; font-weight:700; line-height:1.39; color:var(--gray-800);}
.ba-qa__answer p {margin:0; font-size:16px; font-weight:400; line-height:1.38; color:var(--gray-800);}
.ba-qa__answer.is-empty p {color:var(--rgba01);}
.ba-qa__body .ba-od__item {margin:0; padding:20px 0; border-top:1px solid var(--gray-200);}

/* 나의 상품 후기 — Figma 2719:7579 (26.07.22) */
.ba-rvl {padding:20px 0 0; border-bottom:1px solid var(--gray-400);}
.ba-rvl__head {display:flex; justify-content:space-between; align-items:flex-start; margin:0 0 40px;}
.ba-rvl__date {display:block; margin:0 0 20px; font-size:16px; font-weight:700; line-height:1; color:var(--fifth); opacity:0.6;}
.ba-rvl__tit {margin:0; font-size:18px; font-weight:700; line-height:1; color:var(--gray-950);}
.ba-rvl__edit {display:inline-flex; align-items:center; gap:4px; font-size:16px; font-weight:400; line-height:1; color:var(--fifth); opacity:0.6; text-decoration:none;}
.ba-rvl__edit img {width:12px; height:12px;}
.ba-rvl__edit:hover {opacity:1;}
.ba-rvl__cnt {margin:0 0 40px; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth);}
.ba-rvl__meta {display:flex; justify-content:space-between; align-items:center; margin:0 0 20px;}
.ba-rvl__who {font-size:16px; font-weight:400; color:var(--fifth); opacity:0.6;}
.ba-rvl__stars {display:flex; align-items:center; gap:3px;}
.ba-rvl__stars img {display:block; width:17px; height:17px;} /* Figma 별 도형 17 (슬롯 20 = 17 + gap 3) */
.ba-rvl .ba-od__item {margin:0; padding:20px 0; border-top:1px solid var(--gray-200); border-bottom:0;}

@media (max-width:768px) {
    .ba-acc__row {flex-direction:column; align-items:flex-start; gap:8px;}
    .ba-acc__lb {flex:none;} /* column에서 flex-basis 160px이 높이 160px로 작동 — 라벨 아래 대형 공백 원인 */
    .ba-acc__val {font-size:17px;}
    .ba-acc__row + .ba-acc__row {margin-top:24px;}
    .ba-acc__btns {margin-top:60px;}
    .ba-mysch {flex-wrap:wrap; gap:12px; padding:20px;}
    .ba-mysch .ba-select {width:140px;}
    .ba-mysch__stx {max-width:none; flex:1 1 160px; width:auto; min-width:0;} /* 고정 320 해제 — 남는 폭 비례 */
    /* 주문 리스트 — 7열 고정 그리드 → 카드형 재구성 (헤더 숨김, 라벨은 ::before) */
    .ba-od__hd {display:none;}
    .ba-od__group {margin-bottom:12px; border-radius:10px;}
    .ba-od__group + .ba-od__group {margin-top:0;}
    .ba-od__hd, .ba-od__row {grid-template-columns:1fr auto;}
    .ba-od__row {gap:8px 12px; padding:16px; text-align:left;}
    .ba-od__row .ba-od__c1 {grid-column:1; grid-row:1;}
    .ba-od__row .ba-od__c2 {grid-column:2; grid-row:1; font-size:14px; text-align:right;}
    .ba-od__row .ba-od__c4 {grid-column:1/3; grid-row:2;}
    .ba-od__row .ba-od__c3 {grid-column:1; grid-row:3;}
    .ba-od__row .ba-od__c3::before {content:'수량 '; color:var(--rgba01);}
    .ba-od__row .ba-od__c6 {grid-column:2; grid-row:3; text-align:right;}
    .ba-od__row .ba-od__c5 {display:flex; gap:12px; grid-column:1/3; grid-row:4; font-size:14px; line-height:1.5; text-align:left;}
    .ba-od__row .ba-od__c5::before {content:'주문금액\A입금액\A미입금액'; white-space:pre; font-size:14px; line-height:1.5; color:var(--rgba01);}
    .ba-od__row .ba-od__c7 {grid-column:1/3; grid-row:5; text-align:left;}
    /* 주문 상품 조각 — [이미지+정보] 한 줄 / '교재 상세보기'는 다음 줄 우측 */
    .ba-od__item {flex-wrap:wrap; gap:12px 16px; padding:16px;}
    .ba-od__item-info {flex:1 1 calc(100% - 116px);} /* basis = 이미지 100 + gap 16 제외 전부 — 첫 줄을 꽉 채워 more를 강제 줄바꿈 (grow만으론 wrap 안 됨) */
    .ba-od__item-more {align-self:auto; margin-left:auto;}
    /* 문의/후기 리스트 소폭 */
    .ba-qa__tit {font-size:16px;}
    .ba-qa__date {font-size:13px;}
    .ba-qa__answer {padding:16px 20px;}
    /* 장바구니 — 7열 테이블 → 카드형 (min-width 640 스크롤 해제, 라벨은 ::before) */
    .ba-cart__tbl {min-width:0;}
    .ba-cart__tbl, .ba-cart__tbl tbody {display:block;}
    .ba-cart__tbl colgroup, .ba-cart__tbl thead {display:none;}
    .ba-cart__tbl tbody {border-top:2px solid var(--main-color);} /* thead 숨김으로 사라진 상단 main 라인 복원 */
    .ba-cart__row {display:grid; grid-template-columns:auto 1fr; gap:8px 12px; padding:16px 0; border-bottom:1px solid var(--gray-300);}
    .ba-cart__tbl tbody .ba-cart__row td {display:block; padding:0; border:0; text-align:left;}
    .ba-cart__tbl tbody .ba-cart__row td.ba-cart__no {display:none;} /* 번호 열 — 모바일 생략 (td display:block과 동일 특이도군 — 병기 격상) */
    .ba-cart__tbl tbody .ba-cart__row td:nth-child(2) {grid-column:1; grid-row:1;} /* 체크박스 */
    .ba-cart__tbl tbody .ba-cart__row td.ba-cart__prd {display:flex; grid-column:2; grid-row:1;}
    .ba-cart__img {width:72px; height:72px;}
    .ba-cart__img img {max-height:58px;}
    .ba-cart__tbl tbody .ba-cart__row td:nth-child(n+4) {display:flex; grid-column:1/3; justify-content:space-between; font-size:14px;} /* 수량~합계 = 라벨:값 행 */
    .ba-cart__tbl tbody .ba-cart__row td:nth-child(4)::before {content:'총수량'; color:var(--rgba01);}
    .ba-cart__tbl tbody .ba-cart__row td:nth-child(5)::before {content:'판매가'; color:var(--rgba01);}
    .ba-cart__tbl tbody .ba-cart__row td:nth-child(6)::before {content:'배송비'; color:var(--rgba01);}
    .ba-cart__tbl tbody .ba-cart__row td:nth-child(7)::before {content:'합계'; color:var(--rgba01);}
    .ba-cart__row .sod_option_btn {margin-top:8px;}
    .ba-cart__tbl .ba-cart__empty {display:block; border-bottom:1px solid var(--gray-300);}
    .ba-cart__btns {gap:12px;}
    .ba-cart__del, .ba-cart__clear {min-width:0; flex:1; padding:13px 0; font-size:16px;}
}
@media (max-width:500px) {
    /* 기간 필터 — date 인풋 160×2 고정 해제 */
    .ba-od__sch {padding:20px; gap:16px;}
    .ba-od__quick {gap:20px; flex-wrap:wrap;}
    .ba-od__range {flex:1 1 100%; margin-left:0;}
    .ba-od__range input[type=date] {flex:1 1 auto; width:auto; min-width:0; padding:0 12px;}
}

/* ==========================================================
   BA 주문서(#sod_frm) / 주문상세(#sod_fin) 리스킨 (26.07.13)
   — 마크업 무변경 CSS 오버라이드. 시안: 상품주문_주문정보입력/상세
   ========================================================== */
/* ---- 공통 섹션 타이틀 ---- */
#sod_fin section > h2, #sod_fin section > h3 {position:static; margin:0 0 60px; padding:0; border:0; background:none; font-size:36px; font-weight:700; line-height:1; color:var(--gray-950); text-align:left; overflow:visible;} /* 레거시 position:absolute·font-size:0 무력화 */ /* 시안: 타이틀 36 + 60 아래 표(표 상단 2px main 라인) */

/* ---- 주문서 레이아웃 — 시안 2719:6600: 1단 세로 흐름 (좌/우 2단 해제) ---- */
#sod_frm {max-width:1200px; margin:100px auto 140px;}
#sod_frm .sod_left, #sod_frm .sod_right {float:none; width:100%; margin:0; padding:0;}
#sod_frm section {margin:100px 0 0;} /* 섹션 간격 (시안 상품표→주문자 100) */
#sod_frm .tbl_head03 {margin:0;}
/* 섹션 컨테이너 — default_shop {border:1px solid #e3e5e8;background:#fff} 무력화 */
#sod_frm #sod_frm_orderer, #sod_frm #sod_frm_taker, #sod_frm #sod_frm_pay {margin:100px 0 0; border:0; background:none;}
/* 섹션 타이틀 — 36 w700 + 하단 2px main 라인 (시안). #sod_frm_pay h2는 default_shop이 font-size:0으로 숨김 → 복구 */
/* 섹션 타이틀 — 시안: 36 w700, 타이틀 아래 60 후 라인(라인까지 96 = 36 + 60) */
#sod_frm section > h2 {position:static; margin:0 0 40px; padding:0 0 60px; border:0; border-bottom:2px solid var(--main-color); font-size:36px; font-weight:700; line-height:1; color:var(--gray-950); text-align:left; overflow:visible;}
/* 결제수단 — 시안엔 하단 라인 없음 (주문자/받으시는 분만 라인). default_shop이 font-size:0으로 숨기던 것도 복구 */
#sod_frm #sod_frm_pay h2 {position:static; margin:0 0 60px; padding:0; border:0; font-size:36px; font-weight:700; line-height:1; color:var(--gray-950); text-align:left; overflow:visible;}
/* 상품표 타이틀 — 시안 y536 '상품주문' (라인 없이 60 아래 표 시작) */
#sod_frm .od-sec-title {margin:0 0 60px; padding:0; border:0; font-size:36px; font-weight:700; line-height:1; color:var(--gray-950); text-align:left;}

/* 상품표 반응형 — 표(1200 고정 컬럼)는 줄이지 않고 wrapper 안에서 가로 스크롤 (주문서·주문상세 공용) */
#sod_frm .od_prd_list, #sod_fin .od_prd_list {overflow-x:auto; -webkit-overflow-scrolling:touch;}
#sod_frm #sod_list, #sod_fin table.sod_list {min-width:1200px;}
/* ---- 상품 테이블 — 시안 2782:13359 (컬럼 No.86 / 상품명 429+체크85 / 총수량86 / 판매가171 / 배송비172 / 소계171, 행 140h) ---- */
#sod_frm #sod_list {width:100%; border-collapse:collapse; border-top:0; table-layout:fixed;}
#sod_frm #sod_list col.od-col-no {width:86px;}
#sod_frm #sod_list col.od-col-prd {width:514px;} /* 시안 체크85 + 상품명429 (체크박스 컬럼은 주문서에 없으므로 합산) */
#sod_frm #sod_list col.od-col-qty {width:86px;}
#sod_frm #sod_list col.od-col-price {width:171px;}
#sod_frm #sod_list col.od-col-dvr {width:172px;}
#sod_frm #sod_list col.od-col-sum {width:171px;}
#sod_frm #sod_list thead th {height:60px; padding:0 6px; border:0; border-top:2px solid var(--main-color); border-bottom:1px solid var(--gray-300); background:var(--bg01); font-size:16px; font-weight:400; line-height:1; color:var(--rgba01); text-align:center;}
#sod_frm #sod_list tbody td {height:140px; padding:20px 6px; border:0; border-bottom:1px solid var(--gray-300); background:none; font-size:16px; font-weight:400; color:var(--gray-950); text-align:center; vertical-align:middle;}
#sod_frm #sod_list .td_no {color:var(--rgba01);}
#sod_frm #sod_list .td_sum .total_price {font-weight:700; color:var(--main-color);} /* 소계 = main 강조 (시안) */
#sod_frm #sod_list .td_sum {font-weight:700; color:var(--main-color);}
/* 상품 셀 — 썸네일 100 r10 + 이름/옵션 (시안). td 안에 flex wrapper를 두지 않고 셀 자체를 flex로 하면 컬럼이 깨지므로,
   내부 요소를 inline-block으로 나란히 두되 float 잔재를 해제하고 폭을 명시 */
/* default_shop .od_prd_list .td_prd{padding-left:90px} + .sod_img{position:absolute} 무력화 → 나란히 배치 */
#sod_frm #sod_list .td_prd, #sod_frm .od_prd_list .td_prd {position:relative; height:140px; min-height:0; padding:20px 0; text-align:left;}
#sod_frm #sod_list .sod_img {display:inline-block; position:static; float:none; width:100px; margin:0 20px 0 0; vertical-align:middle;}
#sod_frm #sod_list .sod_name {display:inline-block; position:static; float:none; width:calc(100% - 124px); min-height:0; margin:0; vertical-align:middle;}
#sod_frm #sod_list .sod_img img {display:block; width:100px; height:100px; border-radius:10px; background:var(--gray-100); object-fit:contain;}
#sod_frm #sod_list .sod_name {width:calc(100% - 124px); text-align:left;}
/* .required 배경(wrest.gif !important) 방어 — 클래스는 마크업에서 제거했으나 코어가 다시 붙일 경우 대비 */
#sod_frm .frm_input.required {background-image:none;}
#sod_frm #sod_list .sod_name b {display:block; font-size:16px; font-weight:400; line-height:1.4; color:var(--gray-950);}
#sod_frm #sod_list .sod_opt {margin-top:8px; font-size:14px; line-height:1.4; color:var(--fifth);}
/* 전화번호=핸드폰 통합 — 숨긴 핸드폰 행 (값은 JS 동기화) */
#sod_frm .od-row-hide {display:none;}
/* ---- 전화번호 — 시안: 앞자리 셀렉트 184 + gap 20 + 뒷자리 388 ---- */
#sod_frm .od-tel-row {font-size:0; line-height:0;} /* inline 요소 사이 공백 제거 + baseline 여백 방지 */
#sod_frm .od-tel-head {width:184px; height:50px; padding:0 19px; border:1px solid var(--gray-300); border-radius:30px; background:var(--white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 2.5h10L5 8.5z' fill='%2331405b'/%3E%3C/svg%3E") no-repeat right 19px center; background-size:10px 10px; font-size:16px; line-height:48px; color:var(--gray-950); appearance:none; vertical-align:top; cursor:pointer;}
/* 뒷자리 388 — default_shop 932행 '#sod_frm #od_tel{width:40%}'(ID 2개)를 이기려면 동일 특이도 필요 */
#sod_frm #od_tel, #sod_frm #od_b_tel {width:388px; max-width:100%; margin-left:18px; vertical-align:top;}
/* ---- 주소 — 시안: [우편184][gap20][기본386][gap22][버튼160] / [상세590] ---- */
/* inline-block baseline 정렬이 행마다 어긋나 flex로 전환 (간격은 시안이 20/22로 달라 gap 대신 자식 margin — E2) */
#sod_frm .od-addr-row {display:flex; align-items:center; font-size:0; line-height:0;}
#sod_frm .od-addr-row + .od-addr-row {margin-top:20px;}
#sod_frm .tbl_frm01 td .od-addr-row .od-addr-zip {width:184px; margin:0 18px 0 0; vertical-align:top;}
#sod_frm .tbl_frm01 td .od-addr-row .od-addr-base {width:386px; margin:0 22px 0 0; vertical-align:top;} /* 레거시 margin-top:10px 무력화 */
#sod_frm .tbl_frm01 td .od-addr-row .od-addr-detail {width:590px; margin:0; vertical-align:top;}
#sod_frm .od-addr-row .btn_address {vertical-align:top;}
#sod_frm .od-addr-row.od-row-hide {display:none;} /* 참고항목 — 위 display:flex보다 뒤에 와야 이김 */

/* ---- 입력 폼 (주문자/받으시는 분) — 라벨 183 좌 + 필드, 인풋 r30 50h ---- */
/* default_shop 숨은 규칙 무력화: .tbl_frm01{padding:20px 10px} · th{width:70px→114px} · td{line-height:45px} · td input{width:100%} · #od_name 등{width:40%} · #od_zip{width:90px} */
#sod_frm .tbl_frm01, #sod_frm div.tbl_frm01, #sod_frm_taker div.tbl_frm01 {margin:0; padding:0;}
#sod_frm .tbl_frm01 table {width:100%; border:0; border-collapse:collapse;}
#sod_frm .tbl_frm01 th, #sod_frm .tbl_frm01 td {padding:10px 0; border:0; background:none; line-height:1.4; vertical-align:middle;}
#sod_frm .tbl_frm01 th {width:203px; padding-right:20px; font-size:20px; font-weight:400; color:var(--fifth); text-align:left;} /* 시안 라벨 20px fifth, 183 + gap 20 */
#sod_frm .tbl_frm01 th .required, #sod_frm .tbl_frm01 th span {color:var(--secondary);}
/* 텍스트/전화/이메일 인풋만 590 — 라디오·체크박스는 제외 (제외 안 하면 배송지선택 라디오가 590으로 늘어남) */
#sod_frm .tbl_frm01 td input[type=text], #sod_frm .tbl_frm01 td input[type=tel], #sod_frm .tbl_frm01 td input[type=email], #sod_frm .tbl_frm01 td input:not([type]), #sod_frm #od_name, #sod_frm #od_pwd, #sod_frm #od_b_name, #sod_frm #ad_subject, #sod_frm #od_hope_date {width:590px; max-width:100%;} /* 시안 인풋 590. od_tel/od_b_tel은 앞자리 셀렉트와 나눠 388 — 아래 .od-tel-body 참조 */
#sod_frm .tbl_frm01 td .addr input[type=text] {width:590px; max-width:100%;}
#sod_frm .tbl_frm01 td input[type=radio], #sod_frm .tbl_frm01 td input[type=checkbox] {width:18px; height:18px;}
#sod_frm .frm_input {height:50px; padding:0 19px; border:1px solid var(--gray-300); border-radius:30px; background:var(--white); font-size:16px; line-height:1.38; color:var(--gray-950); box-sizing:border-box;}
#sod_frm .frm_input:focus {padding:0 18px; border:2px solid transparent; background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad04) border-box; outline:0;} /* 사이트 공통 focus 공식 */
#sod_frm .frm_input::placeholder {color:var(--rgba01); opacity:1;}
#sod_frm textarea {width:100%; max-width:590px; min-height:150px; padding:19px; border:1px solid var(--gray-300); border-radius:20px; background:var(--white); font-size:16px; line-height:1.38; color:var(--gray-950); resize:none; box-sizing:border-box;}
#sod_frm textarea:focus {padding:18px; border:2px solid transparent; background:linear-gradient(var(--white), var(--white)) padding-box, var(--grad04) border-box; outline:0;}
#sod_frm textarea::placeholder {color:var(--rgba01); opacity:1;}
/* 우편번호 인풋 — default_shop {width:90px} / .addr input{width:20%} 무력화, 시안 184 */
#sod_frm #od_zip, #sod_frm #od_b_zip, #sod_frm .tbl_frm01 td .addr input#od_zip, #sod_frm .tbl_frm01 td .addr input#od_b_zip {width:184px; margin-right:18px;}
/* 주소찾기·배송지목록 버튼 — 160×50 r10 main (시안). .btn_address는 코어 주소검색 버튼 */
#sod_frm .btn_frmline, #sod_frm .tbl_frm01 td .btn_address, #sod_frm a.btn_frmline:link {display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:160px; height:50px; padding:0 31px; border:0; border-radius:10px; background:var(--main-color); font-size:18px; font-weight:700; line-height:1; color:var(--white); cursor:pointer; text-decoration:none; vertical-align:middle; transition:background 0.2s;} /* .tbl_frm01 td 병기 — default_shop 934행(0,1,3) 특이도 대응 */
#sod_frm .btn_frmline:hover, #sod_frm .tbl_frm01 td .btn_address:hover {background:var(--grad01); color:var(--white);}
/* 주소 행 — 우편번호 인풋(184) + 버튼 나란히, 기본/상세주소는 590 */
#sod_frm .frm_input[id$="_zip"], #sod_frm #od_zip, #sod_frm #od_b_zip {width:184px; margin-right:18px;}
#sod_frm .frm_input[id$="_addr1"], #sod_frm .frm_input[id$="_addr2"], #sod_frm .frm_input[id$="_addr3"] {width:100%; max-width:590px; margin-top:10px;}
#sod_frm td > br {display:none;} /* 레거시 br 줄바꿈 — margin으로 대체 */
/* 배송지 선택 행 — default_shop {배경#edf3fc,보더,position:relative} 무력화 (시안: 배경 없는 체크 나열).
   라디오+라벨이 형제 인라인이라 flex 아이템이 각각 분리됨 → block + inline 흐름으로 두고 라벨에 margin */
/* flex + align-items:center — 라디오(18h)와 배송지목록 버튼(50h) 세로 중심 정렬 */
#sod_frm .order_choice_place, #sod_frm_taker .order_choice_place {display:flex; align-items:center; flex-wrap:wrap; position:static; padding:0; border:0; background:none; font-size:0;}
/* 라디오·체크박스 — 시안: 18×18 r4, 1px gray-300 테두리, 흰 배경. checked 시 파란 체크 SVG (M2/M9/M10) */
#sod_frm .order_choice_place input[type="radio"], #sod_frm .order_choice_place input[type="checkbox"],
#sod_frm_taker .order_choice_place input, #sod_frm .od-check input[type="checkbox"] {width:18px; height:18px; margin:0 12px 0 0; padding:0; border:1px solid var(--gray-300); border-radius:4px; background:var(--white) no-repeat center; background-size:10px 8px; appearance:none; vertical-align:middle; cursor:pointer;}
#sod_frm .order_choice_place input[type="radio"]:checked, #sod_frm .order_choice_place input[type="checkbox"]:checked,
#sod_frm_taker .order_choice_place input:checked, #sod_frm .od-check input[type="checkbox"]:checked {background-image:url("../../img/ico_check_blue.svg");}
/* 라벨 — 체크박스에서 30px(박스18+12), 항목 사이 40px (시안 563→717 = 114+40) */
#sod_frm .order_choice_place label, #sod_frm .od-check label {display:inline-block; margin:0 40px 0 0; font-size:16px; line-height:1.38; color:var(--gray-950); vertical-align:middle; cursor:pointer;}
#sod_frm .order_choice_place .btn_frmline {margin-left:0; vertical-align:middle;}
/* 배송지명 — 인풋 아래 체크 (시안 y1903 인풋 → y1963 체크, 하단에서 10px) */
#sod_frm .od-check {display:block; margin-top:10px; font-size:0;}
/* 배송지목록 버튼 — default_shop {float:right;width:80px;height:30px;absolute} 무력화 */
#sod_frm_taker .tbl_frm01 .btn_frmline {position:static; float:none; width:auto; min-width:160px; height:50px; line-height:1;}
#sod_frm input[type=checkbox], #sod_frm input[type=radio] {width:18px; height:18px; accent-color:var(--main-color); vertical-align:middle;}

/* ---- 결제정보 박스 — 시안: r20 gray-50, 행 60h(라벨 좌 18 w700 / 값 우), 총계 상단 라인 ----
   default_shop 숨은 규칙 무력화: li{float:left;width:33.333%;height:70px} · .sod_bsk_point/.sod_bsk_cnt{width:100%} · ::before "-"/"+" 원형 뱃지 · .sod_right/#forderform 보더 */
#sod_frm #sod_bsk_tot, #forderform .sod_right #sod_bsk_tot, .sod_right #sod_bsk_tot {margin:0; padding:0 20px; border:0; border-radius:20px; background:var(--gray-50);}
#sod_frm #sod_bsk_tot ul {display:block; margin:0; padding:0;}
#sod_frm #sod_bsk_tot li, #sod_frm #sod_bsk_tot .sod_bsk_point, #sod_frm #sod_bsk_tot .sod_bsk_cnt {display:flex; box-sizing:border-box; align-items:center; position:static; float:none; clear:none; width:auto; height:auto; min-height:60px; padding:19px 0; border:0; background:none; list-style:none; text-align:left; line-height:1.2;}
/* 레거시 "-"/"+" 원형 뱃지 제거 — default_shop 946·947행이 '#sod_frm  #sod_bsk_tot .sod_bsk_dvr:before'(공백2칸=0,2,1)라 동일 특이도로 맞춤 */
#sod_frm #sod_bsk_tot li::before, #sod_frm #sod_bsk_tot li::after,
#sod_frm #sod_bsk_tot .sod_bsk_dvr::before, #sod_frm #sod_bsk_tot .sod_bsk_coupon::before,
#sod_frm #sod_bsk_tot .sod_bsk_sell::before, #sod_frm #sod_bsk_tot .sod_bsk_cnt::before {display:none; content:none;}
#sod_frm #sod_bsk_tot li span, #sod_frm #sod_bsk_tot .sod_bsk_cnt span {display:block; float:none; margin:0; font-size:18px; font-weight:700; line-height:1.2; color:var(--gray-950);}
#sod_frm #sod_bsk_tot li strong {margin-left:auto; font-size:18px; font-weight:400; line-height:1.2; color:var(--gray-950);} /* 금액과 '원'(텍스트노드)을 우측에 붙임 */
/* default_shop 942행 세로 구분선(border-right) 제거 — 시안에 없음 */
#sod_frm #sod_bsk_tot .sod_bsk_sell, #sod_frm #sod_bsk_tot .sod_bsk_coupon {border-right:0;}
#sod_frm #sod_bsk_tot li.sod_bsk_point {display:none;} /* 적립금 — 시안 미노출 */
#sod_frm #sod_bsk_tot li.sod_bsk_cnt {border-bottom:1px solid var(--gray-300);} /* 총계 행 — 시안 individualStrokeWeights bottom:1 */
/* 추가 배송비 — 시안 86h, 좌측 2줄(제목 w700 + 설명 fifth, gap 10) */
#sod_frm #sod_bsk_tot li.sod_bsk_dvr2 {min-height:86px; padding:17px 0;}
#sod_frm #sod_bsk_tot li.sod_bsk_dvr2 span em {display:block; margin-top:9px; font-size:18px; font-weight:400; font-style:normal; line-height:1.2; color:var(--fifth);}
/* 총 가격 — 시안 74h, 상단 라인, 금액 24px w700 main */
#sod_frm #sod_bsk_tot li.sod_bsk_total {min-height:74px; padding:22px 0; border-top:1px solid var(--gray-300);}
#sod_frm #sod_bsk_tot li.sod_bsk_total strong {font-size:24px; font-weight:700; color:var(--main-color);}
#sod_frm #sod_bsk_tot li.sod_bsk_cnt strong {font-size:18px; font-weight:700; color:var(--main-color);}

/* ---- 결제정보 표(기본 배송비 등) / 총 가격 ---- */
#sod_frm .pay_tbl table {width:100%; border:0; border-collapse:collapse;}
#sod_frm .pay_tbl th {width:203px; padding:20px 0; border:0; border-bottom:1px solid var(--gray-300); background:none; font-size:18px; font-weight:700; color:var(--gray-950); text-align:left;}
#sod_frm .pay_tbl td {padding:20px 0; border:0; border-bottom:1px solid var(--gray-300); background:none; font-size:18px; color:var(--rgba02);}
/* 총 가격 — 시안 24px main */
#sod_frm #od_tot_price {display:flex; justify-content:space-between; align-items:center; margin:0; padding:25px 20px; border:0; border-top:1px solid var(--gray-300); border-radius:0 0 20px 20px; background:var(--gray-50); text-align:left;}
#sod_frm #od_tot_price span {font-size:18px; font-weight:700; color:var(--gray-950);}
#sod_frm #od_tot_price strong {font-size:24px; font-weight:700; color:var(--main-color);}

/* ---- 결제수단 — r20 gray-50 박스, 라디오 행 + 입금자명 ---- */
#sod_frm #od_pay_sl h3 {margin:0 0 20px; padding:0; background:none; font-size:18px; font-weight:700; color:var(--gray-950);}
/* 결제수단 — 라디오+라벨 형제 인라인 구조 (배송지선택과 동일 방식) */
/* ---- 결제수단 — 시안 3167: 박스 1200 r20 #fafafa, padding 0 20 / 행1 62h(체크 gap 40) / 행2 93h ---- */
/* 박스는 #od_pay_sl이 담당 — 결제수단 fieldset · 포인트 · 입금자명이 모두 이 div의 자식이라
   fieldset에 배경을 주면 포인트/입금자명이 박스 밖으로 나감 (26.07.27 admin 계정에서 확인) */
#sod_frm #od_pay_sl {padding:20px; border-radius:20px; background:var(--gray-50);}
#sod_frm #sod_frm_paysel {display:block; padding:0; border:0; border-radius:0; background:none; font-size:0;}
#sod_frm #od_pay_sl h3 {display:none;} /* 시안 박스 안엔 소제목 없음 (섹션 h2 '결제수단'과 중복) */
#sod_frm #sod_frm_paysel legend {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;} /* 스크린리더용만 */
/* 행1 — 결제수단 선택 (라디오 18 + 12 + 라벨, 항목 간격 40) */
#sod_frm #sod_frm_paysel input[type="radio"] {position:static; visibility:visible; width:18px; height:18px; margin:0 12px 0 0; padding:0; border:1px solid var(--gray-300); border-radius:4px; background:var(--white) no-repeat center; background-size:10px 8px; appearance:none; vertical-align:middle; cursor:pointer;}
#sod_frm #sod_frm_paysel input[type="radio"]:checked {background-image:url("../../img/ico_check_blue.svg");}
/* .pay_tbl — default_shop 952·953행 th/td border-bottom + 흰 배경 제거 */
#sod_frm .sod_right .pay_tbl th, #sod_frm .sod_right .pay_tbl td, #sod_frm_pay .pay_tbl th, #sod_frm_pay .pay_tbl td {border:0; background:none;}
/* 레거시 무력화 — default_shop 977행(.od_pay_buttons_el 테두리) · 1075행(#settle_bank 흰 박스) · 963행(checked 분홍 테두리) */
#sod_frm #forderform .od_pay_buttons_el, #forderform .od_pay_buttons_el {margin:0; padding:0; border:0; background:none;}
#sod_frm #settle_bank, #settle_bank {margin:0; padding:0; border:0; background:none; line-height:1.2;}
/* default_shop 1077행 '#settle_bank label{float:left;width:30%}' 무력화 — float이 남으면 space-between이 안 먹음 */
#sod_frm #settle_bank label, #settle_bank label {float:none; width:auto; line-height:1.2;}
/* 1078행 '#settle_bank select, input{width:70%;height:32px;border;radius:3px}' 무력화 */
#sod_frm #settle_bank select, #sod_frm #settle_bank input {width:auto; height:auto; margin:0; border:0; border-radius:0; text-align:left;}
/* 1082행 '#display_pay_button{background:#fff;padding:20px;border:1px solid}' 무력화 */
#sod_frm #display_pay_button, #display_pay_button {padding:0; border:0; background:none;}
#sod_frm #od_pay_sl input[type="radio"]:checked + .lb_icon, #sod_frm #sod_frm_paysel input[type="radio"]:checked + .lb_icon {border:0; color:var(--gray-950); font-weight:400;}
#sod_frm #sod_frm_paysel .lb_icon, #sod_frm #od_pay_sl .lb_icon {display:inline-block; position:static; float:none; width:auto; height:auto; margin:0 40px 0 0; padding:0; border:0; background:none; font-size:16px; font-weight:400; line-height:1.38; color:var(--gray-950); text-indent:0; overflow:visible; vertical-align:middle; cursor:pointer;}
/* 행2 — 입금자명 (좌: 라벨 + 계좌 select / 우: 인풋 200×50) */
#sod_frm #settle_bank {display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding:0; border:0; font-size:0;}
/* 계좌가 1개면 select가 아니라 hidden + 텍스트노드로 출력됨 → 부모 font-size:0을 여기서 되살림 */
#sod_frm .settle_bank__info {display:block; font-size:18px; font-weight:400; line-height:1.2; color:var(--fifth);}
#sod_frm .settle_bank__label {display:block; margin-bottom:10px; font-size:18px; font-weight:700; line-height:1.2; color:var(--gray-950);}
#sod_frm #settle_bank select {display:block; width:auto; min-width:330px; height:auto; margin:10px 0 0; padding:0; border:0; background:none; font-size:18px; font-weight:400; line-height:1.2; color:var(--fifth); appearance:none; cursor:pointer;}
#sod_frm #settle_bank input#od_deposit_name, #sod_frm input#od_deposit_name {width:200px; height:50px; margin-left:auto; padding:0 20px; border:1px solid var(--gray-300); border-radius:0; background:var(--white); font-size:16px; line-height:48px; color:var(--gray-950);}
/* ---- 포인트 사용 (시안 미수록) — 입금자명 행과 동일 톤으로 맞춤 ----
   default_shop 979·984~987행(테두리 · 흰 배경 · label float · text-align:right) 무력화 */
#sod_frm #sod_frm_pay .sod_frm_point, #sod_frm .sod_frm_point {margin:20px 0 0; padding:0; border:0; background:none;}
#sod_frm #sod_frm_pay .sod_frm_point div, #sod_frm .sod_frm_point > div {display:flex; align-items:center; padding:0; background:none; font-size:18px; text-align:left;}
#sod_frm .sod_frm_point label {float:none; margin:0; font-size:18px; font-weight:700; line-height:1.2; color:var(--gray-950);}
#sod_frm .sod_frm_point #od_temp_point {width:200px; height:50px; margin:0 10px 0 auto; padding:0 20px; border:1px solid var(--gray-300); border-radius:0; background:var(--white); font-size:16px; line-height:48px; color:var(--gray-950); text-align:left;}
/* 보유/최대 포인트 — 라벨 아래 보조정보 */
#sod_frm #forderform #sod_frm_pt, #sod_frm #sod_frm_pt {display:flex; flex-wrap:wrap; margin:10px 0 0; padding:0; border:0; background:none; font-size:18px; font-weight:400; line-height:1.2; color:var(--fifth);}
#sod_frm #sod_frm_pt span {margin:0 30px 0 0;}
#sod_frm #sod_frm_pt strong {margin:0 8px 0 0; font-weight:400; color:var(--fifth);}
#sod_frm #sod_frm_pt em {font-style:normal;}
#sod_frm #sod_frm_paysel input[type="radio"] {width:18px; height:18px; margin:0 8px 0 0; vertical-align:middle;}
/* 라벨 — default_shop #od_pay_sl .lb_icon{float:left;width:50%;height:60px;padding-left:65px;배경이미지} 무력화 */
#sod_frm #sod_frm_paysel .lb_icon, #sod_frm #od_pay_sl .lb_icon {display:inline-block; position:static; float:none; width:auto; height:auto; margin:0 30px 0 0; padding:0; border:0; background:none; font-size:16px; line-height:1.38; color:var(--gray-950); text-indent:0; overflow:visible; vertical-align:middle; cursor:pointer;}
/* (26.07.27 제거) checked 라벨 main/700 — 시안은 검정 w400 유지, 선택 표시는 체크박스로만. 위 4365행 규칙이 최종 */
#sod_frm #sod_frm_pt_alert {margin:8px 0; font-size:14px; color:var(--rgba01);}
/* (26.07.27 제거) 옛 settle_bank 박스 스타일 — 시안은 결제수단 박스 안의 한 행 */
/* (26.07.27 제거) 옛 select/인풋 r30 — select는 평문 표기, 인풋은 위 200×50 r0 규칙 */
#sod_frm .sod_frm_point {margin:20px 0 0; padding:20px; border-radius:20px; background:var(--gray-50); font-size:16px; color:var(--gray-950);}
#sod_frm .sod_frm_point input {height:50px; padding:0 19px; border:1px solid var(--gray-300); border-radius:30px;}

/* ---- 하단 버튼 — 시안 2719:6792: 160×48 r10, 취소=gray-300 / 주문하기=main, gap 20 ---- */
#sod_frm .btn_confirm, #sod_frm #display_pay_button {display:flex; justify-content:center; gap:20px; margin:100px 0 0; text-align:center;}
/* 시안 순서 [취소][주문하기] — 버튼은 코어(/shop/orderform.php)가 출력하므로 DOM은 두고 order로만 교체(Enter 기본 submit 유지) */
#sod_frm #display_pay_button .btn01 {order:-1;}
#sod_frm .btn_submit, #sod_frm input[type=submit], #sod_frm #display_pay_button button {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:160px; min-width:160px; height:48px; padding:0 31px; border:0; border-radius:10px; background:var(--main-color); font-size:18px; font-weight:700; line-height:1; color:var(--white); cursor:pointer; transition:background 0.2s;} /* flex 늘어남 방지 — 시안 160 고정 */
#sod_frm .btn_submit:hover, #sod_frm #display_pay_button button:hover {background:var(--grad01);}
/* 취소 — PG include가 .btn01로 출력 (a 태그). a:link 병기 — 레거시 a{color:#555} 대응 */
#sod_frm .btn_cancel, #sod_frm .btn01, #sod_frm a.btn_cancel:link, #sod_frm a.btn01:link {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:160px; min-width:160px; height:48px; margin:0; padding:0 31px; border:0; border-radius:10px; background:var(--gray-300); font-size:18px; font-weight:700; line-height:1; color:var(--white); text-align:center; text-decoration:none;}
#sod_frm .btn_cancel:hover, #sod_frm .btn01:hover {background:var(--gray-400); color:var(--white);}

/* ---- 주문상세 ---- */
/* --- 주문상세 (26.07.27 시안 2719:6836 기준으로 갱신) --- */
#sod_fin {max-width:1200px; margin:0 auto;}
/* 시안에 없는 요소 — 주문번호 배너(결제정보 첫 행과 중복) · 묶음 h2 · 상태설명 */
#sod_fin #sod_fin_no, #sod_fin #sod_fin_view > h2, #sod_fin #sod_sts_wrap {display:none;}
#sod_fin #sod_fin_view {margin:0;} /* default_shop 1187행 margin:10px 제거 */
#sod_fin section {margin:100px 0 0;}
/* default_shop 1240행 '#sod_fin_pay,...{margin:10px;background:#fff;border:1px solid #e3e5e8}' 무력화 */
#sod_fin #sod_fin_pay, #sod_fin #sod_fin_orderer, #sod_fin #sod_fin_receiver, #sod_fin #sod_fin_dvr, #sod_fin #sod_fin_cancel {margin:100px 0 0; padding:0; border:0; background:none;}
#sod_fin #sod_fin_cancel button, #sod_fin #sod_fin_cancel .btn_frmline {width:auto; min-width:160px; height:48px; margin:0; padding:0 31px; border:0; border-radius:10px; background:var(--main-color); font-size:16px; font-weight:700; line-height:1; color:var(--white); cursor:pointer;}
#sod_fin #sod_fin_cancel p {font-size:16px; color:var(--gray-950);}
/* 정보 테이블 — 시안: 행 80h, 라벨 160/18 w600, 값 x520/16 w400, 하단 1px, 표 상단 2px main */
#sod_fin .odf_tbl {padding:0;}
#sod_fin .odf_tbl table {width:100%; border:0; border-top:2px solid var(--main-color); border-collapse:collapse; table-layout:fixed;}
#sod_fin .odf_tbl th {width:160px; height:80px; padding:0; border:0; border-bottom:1px solid var(--gray-300); background:none; font-size:18px; font-weight:600; line-height:1.4; color:var(--gray-950); text-align:left; vertical-align:middle;}
#sod_fin .odf_tbl td {height:80px; padding:0; border:0; border-bottom:1px solid var(--gray-300); background:none; font-size:16px; font-weight:400; line-height:1.4; color:var(--gray-950); vertical-align:middle;}
/* 주문상품 표 — 시안: 주문서(orderform)와 동일 (헤더 60h bg01 + 2px main, 행 140h, 썸네일 100 r10) */
#sod_fin table.sod_list {width:100%; border:0; border-collapse:collapse; table-layout:fixed;}
#sod_fin .sod_list col.od-col-no {width:86px;}
#sod_fin .sod_list col.od-col-prd {width:514px;}
#sod_fin .sod_list col.od-col-qty {width:86px;}
#sod_fin .sod_list col.od-col-price {width:171px;}
#sod_fin .sod_list col.od-col-dvr {width:172px;}
#sod_fin .sod_list col.od-col-sum {width:171px;}
#sod_fin .sod_list thead th {width:auto; height:60px; padding:0 6px; border:0; border-top:2px solid var(--main-color); border-bottom:1px solid var(--gray-300); background:var(--bg01); font-size:16px; font-weight:400; line-height:1; color:var(--rgba01); text-align:center;}
#sod_fin .sod_list tbody td {height:140px; padding:20px 6px; border:0; border-bottom:1px solid var(--gray-300); background:none; font-size:16px; font-weight:400; color:var(--gray-950); text-align:center; vertical-align:middle;}
#sod_fin .sod_list .td_no {color:var(--rgba01);}
#sod_fin .sod_list .td_sum {font-weight:700; color:var(--main-color);}
#sod_fin .sod_list .td_sum .total_price {display:inline; position:static; width:auto; margin:0; padding:0; border:0; background:none; font-weight:700; color:var(--main-color); clear:none; text-align:center; line-height:1.4;} /* 레거시 block+회색배경 무력화 */
#sod_fin .sod_list .td_prd {height:140px; padding:20px 0; text-align:left;}
#sod_fin .sod_list .sod_img {display:inline-block; position:static; float:none; width:100px; margin:0 20px 0 0; vertical-align:middle;}
#sod_fin .sod_list .sod_img img {display:block; width:100px; height:100px; border-radius:10px; background:var(--gray-100); object-fit:contain;}
#sod_fin .sod_list .sod_name {display:inline-block; position:static; float:none; width:calc(100% - 124px); vertical-align:middle; text-align:left;}
#sod_fin .sod_list .sod_name b {display:block; font-size:16px; font-weight:400; line-height:1.4; color:var(--gray-950);}
#sod_fin .sod_list .sod_opt {margin-top:8px; padding:0; border:0; background:none; font-size:14px; line-height:1.4; color:var(--fifth);}
/* --- default_shop 주문상세 레거시 전수 무력화 (26.07.27 감사 — 증상별 땜질 대신 일괄) --- */
#sod_fin table.sod_list {margin:0; font-size:16px;} /* 788행 .sod_list{margin:10px;font-size:0.85em} */
#sod_fin .sod_list .sod_opt li {margin:0; padding:0; background:none; color:var(--fifth); line-height:1.4;} /* 765·780·802행 bullet.gif + #777 */
#sod_fin .sod_list .sod_opt li + li {margin-top:4px;}
/* 배송정보 빈 행 — 개명한 od-empty (시안: 80h 좌측 16px) */
#sod_fin .odf_tbl td.od-empty {height:80px; padding:0; font-size:16px; color:var(--gray-950); text-align:left;}
/* 취소사유 폼 — 1269~1271행 absolute 버튼·전폭 인풋 재구성 */
#sod_fin #sod_fin_cancelfrm {position:static; margin:20px 0 0; padding:0; background:none; text-align:center;} /* 버튼 행 아래 중앙 */
#sod_fin #sod_fin_cancelfrm .frm_input {width:386px; height:50px; margin:0 18px 0 0; padding:0 19px; background:var(--white); vertical-align:middle;}
#sod_fin #sod_fin_cancelfrm .btn_frmline, #sod_fin_cancelfrm .btn_frmline {position:static; top:auto; right:auto; width:auto; min-width:160px; height:50px; vertical-align:middle; padding:0 31px; border:0; border-radius:10px; background:var(--main-color); font-size:16px; font-weight:700; color:var(--white); cursor:pointer;}
/* 취소내역 알림 — 1268행 빨간 경고 박스 톤 정리 */
#sod_fin #sod_fin_cancel p {margin:0; padding:26px 20px; border:0; border-radius:10px; background:var(--bg01); font-size:16px; font-weight:400; color:var(--gray-950); text-align:center;}
/* 배송조회 링크 — 1244행 파랑 하드코딩 */
#sod_fin .odf_tbl .dvr_link {display:inline-block; margin-left:10px; padding:0 16px; border:1px solid var(--main-color); border-radius:10px; background:var(--white); font-size:14px; line-height:32px; color:var(--main-color); text-decoration:none;}
/* 포인트 결제 상세 — 1259~1261행 absolute title */
#sod_fin #sod_fin_tot #alrdy .right {margin-top:8px; font-size:13px; color:var(--rgba01); text-align:center;}
#sod_fin #sod_fin_tot #alrdy .right p {position:static;}
#sod_fin #sod_fin_tot #alrdy .right .title {position:static; display:inline-block; margin-right:6px; padding:0;}
#sod_fin .sod_list .sod_opt ul {margin:0; padding:0; list-style:none;}
/* 상태/후기 뱃지 — 스킨 인라인 style(position:absolute)이 있어 static으로 복구 */
#sod_fin .sod_list .sod_stat {margin-top:8px; font-size:0;}
#sod_fin .sod_list .prqty_stat {display:inline-block; position:static; float:none; margin:0 8px 0 0; padding:2px 8px; border-radius:5px; background:var(--main-color); font-size:12px; line-height:20px; color:var(--white);}
#sod_fin .sod_fin_list .prqty_stat2, #sod_fin .sod_list .prqty_stat2 {display:inline-block; position:static; margin:0 8px 0 0; padding:2px 8px; border-radius:5px; background:var(--fifth); font-size:12px; line-height:20px; color:var(--white); font-weight:400;}
/* 상품표 아래 합계 박스 — 시안: 1200×160 r10 bg01, 스탯(라벨 16 + 값 18 w700 main) 가로 나열 */
#sod_fin .sod_ta_wr {display:flex; align-items:center; min-height:160px; margin:60px 0 0; padding:20px 0; border:0; border-radius:10px; background:var(--bg01);}
#sod_fin .sod_ta_wr dl {flex:1;}
/* dl 자체가 id=m_sod_bsk_tot — default_shop 830행 '#m_sod_bsk_tot{background:#f4f4f4;border-radius:5px;padding:5px 10px}'가 ID 특이도로 살아남아 이중 배경 발생 → 무력화 */
#sod_fin .sod_ta_wr #m_sod_bsk_tot, #sod_fin #m_sod_bsk_tot {margin:0; padding:0; border:0; border-radius:0; background:none;}
#sod_fin #m_sod_bsk_tot::after {content:none;} /* 831행 clearfix — grid에서 유령 아이템이 되어 5번째 열 생성 + overflow로 center 무효화 */
#sod_fin #m_sod_bsk_tot .sod_bsk_cnt {margin:0; border-top:0; background:none;} /* 834행 border-top·margin만 무력화 (border 전체를 끄면 구분선까지 사라짐) */
#sod_fin .sod_ta_wr dl {display:grid; grid-auto-flow:column; grid-template-rows:auto auto; grid-auto-columns:255px; justify-content:center; margin:0; padding:0;} /* 시안 — 그룹 중앙 클러스터 (박스 좌우 여백 90 비율, 4칸 255px) */
#sod_fin .sod_ta_wr dt {width:100%; margin:0; padding:0 0 12px; border:0; background:none; float:none; clear:none; font-size:16px; font-weight:400; line-height:1.4; color:var(--rgba01); text-align:center;}
#sod_fin .sod_ta_wr dd {width:100%; margin:0; padding:12px 0 0; border:0; background:none; float:none; clear:none; text-align:center;}
/* 스탯 사이 세로 구분선 (시안 Vector 40h) — 첫 열 제외 좌측 라인, dt/dd가 이어져 한 줄로 보임 */
#sod_fin .sod_ta_wr dt:not(:first-of-type), #sod_fin .sod_ta_wr dd:not(:first-of-type) {border-left:1px solid var(--gray-300);}
#sod_fin .sod_ta_wr dd strong {font-size:18px; font-weight:700; line-height:1.4; color:var(--main-color);}
/* 결제합계 — 시안 하단 3분할 */
#sod_fin #sod_fin_tot {display:flex; align-items:center; min-height:160px; margin:60px 0 0; padding:20px; border:0; border-radius:10px; background:var(--bg01);}
#sod_fin #sod_fin_tot > ul {flex:1; display:flex; justify-content:center;}
#sod_fin #sod_fin_tot > h2 {display:none;}
#sod_fin #sod_fin_tot ul {display:flex; margin:0; padding:0; border:0; background:none;} /* default_shop 1255행 파란 1px 보더 + 흰 배경 무력화 */
#sod_fin #sod_fin_tot li {flex:0 0 340px; float:none; width:auto; padding:0; border:0; background:none; font-size:16px; color:var(--rgba01); list-style:none; text-align:center;} /* 시안 피치 340 (3칸 중앙) */
#sod_fin #sod_fin_tot li + li {border-left:1px solid var(--gray-300);}
#sod_fin #sod_fin_tot li strong {display:block; float:none; margin-top:24px; font-size:18px; font-weight:700; line-height:1.4; color:var(--rgba02); text-align:center;}
#sod_fin #sod_fin_tot li:last-child strong {color:var(--main-color);} /* 시안 — 결제액만 main */
/* 확인 버튼 — 시안 160×48 r10 main */
#sod_fin .btn_confirm {display:flex; justify-content:center; gap:20px; margin:60px 0 140px; text-align:center;}
/* 주문 취소하기 — 확인과 나란히, 주문서 하단 취소 버튼과 동일 톤(gray-300) */
#sod_fin .btn_confirm .od-btn-cancel {display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:160px; height:48px; padding:0 31px; border:0; border-radius:10px; background:var(--gray-300); font-size:18px; font-weight:700; line-height:1; color:var(--white); cursor:pointer; transition:background 0.2s;}
#sod_fin .btn_confirm .od-btn-cancel:hover {background:var(--fifth);}
#sod_fin .btn_confirm a, #sod_fin .btn_confirm button, #sod_fin .btn_confirm input {display:inline-flex; align-items:center; justify-content:center; width:160px; min-width:160px; height:48px; padding:0 31px; border:0; border-radius:10px; background:var(--main-color); font-size:18px; font-weight:700; line-height:1; color:var(--white); text-align:center; text-decoration:none; cursor:pointer;}

@media (max-width:1080px) {
    /* 768~1080 사각지대 — 고정 피치(dl 255×4 / li 340×3 = 1020px)가 넘침 → 균등 비례. 768↓는 아래 블록(소스 뒤)이 세로 리스트로 재정의 */
    #sod_fin .sod_ta_wr dl {grid-auto-columns:minmax(0, 1fr); width:100%;}
    #sod_fin #sod_fin_tot > ul {width:100%;}
    #sod_fin #sod_fin_tot li {flex:1 1 0; min-width:0;}
}
@media (max-width:768px) {
    #sod_frm .tbl_frm01 th, #sod_fin .odf_tbl th {width:110px; font-size:13px;}
    #sod_frm #sod_frm_paysel {gap:8px 14px;}
    #sod_fin #sod_fin_tot ul {flex-direction:column; gap:14px;}
    #sod_fin #sod_fin_tot li {flex:none; width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left;}
    #sod_fin #sod_fin_tot li + li {border-left:0;}
    #sod_fin #sod_fin_tot li strong {margin-top:0;}
    #sod_fin #sod_fin_tot {min-height:0; padding:20px;}
    /* 상단 합계 박스(dl) — 고정 255px 칸이 넘쳐 라벨 좌/값 우 세로 리스트로 전환 */
    #sod_fin .sod_ta_wr {min-height:0; padding:20px;}
    #sod_fin .sod_ta_wr dl {display:grid; grid-template-columns:auto 1fr; grid-auto-flow:row; row-gap:14px;}
    #sod_fin .sod_ta_wr dt {grid-row:auto; grid-column:1; width:auto; padding:0; border:0; text-align:left;}
    #sod_fin .sod_ta_wr dd {grid-row:auto; grid-column:2; width:auto; padding:0; border:0; text-align:right;}
    #sod_fin .sod_ta_wr dt:not(:first-of-type), #sod_fin .sod_ta_wr dd:not(:first-of-type) {border-left:0;} /* 데스크탑 구분선 규칙과 동일 특이도로 해제 */
}

/* 주문서 상품표 포인트 컬럼 숨김 — 시안에 없음, 적립 로직은 유지 (26.07.13) */
/* (26.07.27 무효화) 구 포인트 컬럼(5번째) 숨김 — 시안 컬럼 재구성으로 5번째가 '배송비'가 되어 잘못 숨겨지던 규칙. 포인트는 마크업에서 제거됨 */

/* ===== 상품목록: 코어 list.php의 "관련 분류" aside 숨김 — 자체 탭/섹션과 중복 (26.07.14) ===== */
#sct_ct_1, .sct_ct {display:none;}

/* 회원정보수정 비밀번호 오류 (26.07.23) */
.ba-acc__err {margin:16px 0 0; font-size:14px; color:var(--alert);}

/* 마이페이지 문의 수정하기 버튼 배치 (26.07.24) */
.ba-qa__editwrap {margin:16px 0 0; text-align:right;}

/* ============================================================
   장바구니 옵션수정 모달 (#mod_option_frm) — cartoption.php (26.07.24)
   시안 없음: 사이트 토큰(gray-50 / main-color / r10 / SVG)로 통일.
   상세페이지 #sit_* 전역 규칙 + 레거시 default_shop.css 충돌을 모달 스코프로 재정의.
   ============================================================ */
/* 컨테이너 — 중앙 카드 (레거시 #sod_bsk_list #mod_option_frm{max-height:500px} 대응해 부모 붙여 특이도 확보) */
#sod_bsk_list #mod_option_frm, #mod_option_frm {width:540px; max-width:calc(100vw - 40px); height:auto; max-height:80vh; padding:0 0 20px; border:0; border-radius:14px; background:var(--white); box-shadow:0 20px 60px rgba(8,9,10,0.25); overflow-y:auto; overflow-x:hidden;}
#mod_option_frm h2 {margin:0 0 20px; padding:0 24px; border-bottom:1px solid var(--gray-200); font-size:20px; font-weight:700; line-height:60px; color:var(--gray-950);}
#mod_option_frm form {margin:0;}
/* 선택옵션 셀렉트 박스 — 레거시 회색(.option_wr) → 흰 카드 + 커스텀 화살표 */
#mod_option_frm .option_wr {margin:0 20px 20px; padding:0; background:transparent;}
#mod_option_frm .option_wr h3 {display:flex; align-items:center; margin:0 0 10px; font-size:16px; font-weight:700; line-height:1.38; text-align:left; color:var(--fifth);}
#mod_option_frm .option_wr h3::before {content:''; flex:0 0 4px; width:4px; height:4px; margin:0 8px 0 0; border-radius:50%; background:var(--fifth);}
#mod_option_frm .option_wr .get_item_options {margin:0;}
#mod_option_frm .option_wr .get_item_options + .get_item_options {margin-top:10px;}
#mod_option_frm .option_wr label {display:none;} /* '선택' 중복 라벨 숨김 (셀렉트 첫 항목이 '선택') */
#mod_option_frm .option_wr span {display:block;}
/* 셀렉트 — 상세 #sit_ov .sit_option select 와 동일 (height 40 / radius 0 / pad 0 44 0 20 / color rgba01) */
#mod_option_frm .option_wr select {width:100%; height:40px; padding:0 44px 0 20px; border:1px solid var(--gray-300); border-radius:0; background:var(--white) url("../../include/img/ico_select_down.svg") no-repeat right 20px center / 10px 10px; font-size:16px; color:var(--rgba01); appearance:none; -webkit-appearance:none;}
/* 선택된 옵션 리스트 박스 */
#mod_option_frm #sit_sel_option {margin:0 20px; padding:16px 20px; border-radius:10px; background:var(--gray-50);}
#mod_option_frm #sit_sel_option > h3 {margin:0 0 12px; font-size:14px; font-weight:700; text-align:left; color:var(--fifth);}
#mod_option_frm #sit_opt_added {margin:0; padding:0; border:0; background:transparent; list-style:none;}
/* li = grid 2행: 1행(제목 1fr / 가격 auto / X auto), 2행(스테퍼 좌측) */
#mod_option_frm #sit_opt_added li.sit_opt_list {display:grid; grid-template-columns:1fr auto 32px; row-gap:16px; align-items:center;}
/* ① 옵션명/제목 — 1행 1열(전체 폭), 좌측정렬 */
#mod_option_frm #sit_opt_added li .opt_name,
#mod_option_frm #sit_opt_added li > .sit_opt_subj {grid-row:1; grid-column:1; align-self:center; text-align:left; font-size:16px; font-weight:400; line-height:1.38; color:var(--fifth);}
/* ② 옵션 추가금 — 모달에서는 노출 (상세는 display:none). 1행 2열 */
#mod_option_frm #sit_opt_added .sit_opt_prc {display:block; grid-row:1; grid-column:2; place-self:center end; float:none; width:auto; margin:0 14px 0 0; padding:0; font-size:15px; font-weight:400; line-height:1; color:var(--fifth);}
/* 스테퍼 3종(−/입력/+) — 2행 좌측에 나란히. 상세의 grid-column(1·2·3)을 모달 3컬럼에 맞게 전부 1열 stacking + 자체 위치 */
#mod_option_frm #sit_opt_added .sit_qty_minus, #mod_option_frm #sit_opt_added .num_input, #mod_option_frm #sit_opt_added .sit_qty_plus {grid-row:2; grid-column:1; height:40px;}
#mod_option_frm #sit_opt_added .sit_qty_minus {justify-self:start; margin:0;}
#mod_option_frm #sit_opt_added .num_input {justify-self:start; margin:0 0 0 40px; width:71px; border-left:0; border-right:0;} /* 마이너스(40) 우측 */
#mod_option_frm #sit_opt_added .sit_qty_plus {justify-self:start; margin:0 0 0 111px;} /* 40 + 71 */
/* ③ 삭제 X — 1행 3열 (상세 grid-column:5 무력화) */
#mod_option_frm #sit_opt_added .sit_opt_del {grid-row:1; grid-column:3; place-self:center end; margin:0;}
/* ④ 동적 li: shop.js가 만든 div 래퍼를 display:contents로 풀어 자식(입력·버튼)이 li grid에 직접 편입 */
#mod_option_frm #sit_opt_added li > div {display:contents;}
/* 동적 li의 텍스트 버튼(증가/감소/삭제) — 상세 SVG 배경 규칙 상속되나 텍스트를 감춤 (특이도 위해 button 태그 명시) */
#mod_option_frm #sit_opt_added li > div button.sit_qty_minus, #mod_option_frm #sit_opt_added li > div button.sit_qty_plus, #mod_option_frm #sit_opt_added li > div button.sit_opt_del {font-size:0; color:transparent; line-height:0;}
#mod_option_frm #sit_opt_added li > div .frm_input {grid-row:2; grid-column:1; justify-self:start; width:71px; height:40px; margin:0 0 0 40px; padding:0; border:1px solid var(--gray-300); border-left:0; border-right:0; border-radius:0; background:var(--white); font-size:16px; text-align:center; color:var(--gray-950);} /* 동적은 .frm_input (상세는 .num_input) */
/* 총 금액 — 상세페이지 -60 마진/레거시 20 마진 무력화, 리스트 아래 정렬 */
#mod_option_frm #sit_tot_price {display:flex; justify-content:flex-end; align-items:baseline; gap:8px; height:auto; margin:20px 20px 0; padding:0; background:transparent; border-radius:0; font-size:20px; font-weight:700; line-height:1; color:var(--gray-950);}
#mod_option_frm #sit_tot_price:empty {display:none;}
#mod_option_frm #sit_tot_price span {display:inline; font-size:14px; font-weight:400; color:var(--fifth);}
#mod_option_frm #sit_tot_price strong {font-size:20px; font-weight:700; margin:0;}
/* 확인 / 닫기 버튼 */
#mod_option_frm .btn_confirm {display:flex; gap:10px; margin:20px 20px 0;}
#mod_option_frm .btn_confirm .btn_submit {flex:1; position:static; width:auto; height:48px; border:0; border-radius:10px; background:var(--main-color); color:var(--fourth) !important; font-size:16px; font-weight:700; cursor:pointer; transition:background 0.2s;}
#mod_option_frm .btn_confirm .btn_submit:hover {background:var(--grad01);}
#mod_option_frm .btn_confirm .btn_close {flex:0 0 48px; position:static; width:48px; height:48px; border:1px solid var(--gray-300); border-radius:10px; background:var(--white); color:var(--fifth); font-size:16px; cursor:pointer;}
#mod_option_frm .btn_confirm .btn_close:hover {background:var(--gray-50);}
/* 헤더 X(모달 닫기)는 h2 기준 우상단 — 코어 마크업엔 없으나 방어 */
#mod_option_frm #mod_option_close_top {position:absolute; top:16px; right:20px;}

/* ============================================================
   상품 상세 반응형 (트랙2) — 26.07.28
   ============================================================ */
@media(max-width:1080px){
	#sit_ov_from {margin:60px auto 0;}
	#sit_ov_wrap {flex-direction:column; gap:40px;} /* 갤러리+정보 2단 → 1단 */
	#sit_ov_wrap #sit_pvi {width:100%; max-width:590px; margin:0 auto;}
	#sit_ov_wrap #sit_ov {width:100%;}
	#sit_ov #sit_title {font-size:28px;}
	/* 주문서 폼 — th 좌열(203) + 고정 인풋(590/388/184)이 넘침 → 라벨 위/필드 아래 block 흐름 */
	#sod_frm .tbl_frm01 table, #sod_frm .tbl_frm01 tbody, #sod_frm .tbl_frm01 tr, #sod_frm .tbl_frm01 th, #sod_frm .tbl_frm01 td {display:block; width:100%;}
	#sod_frm .tbl_frm01 th {padding:0 0 6px; font-size:16px;}
	#sod_frm .tbl_frm01 td {padding:0 0 18px;}
	#sod_frm .tbl_frm01 tr.od-row-hide, #sod_frm .od-addr-row.od-row-hide {display:none;} /* 숨김 행 유지 — 위 tr display:block(0,2,2)에 밀리지 않게 격상 */
	#sod_frm .tbl_frm01 td input[type=text], #sod_frm .tbl_frm01 td input[type=tel], #sod_frm .tbl_frm01 td input[type=email], #sod_frm .tbl_frm01 td input:not([type]), #sod_frm #od_name, #sod_frm #od_pwd, #sod_frm #od_b_name, #sod_frm #ad_subject, #sod_frm #od_hope_date {width:100%; max-width:590px;}
	#sod_frm .od-tel-head {width:132px; padding:0 14px; background-position:right 14px center;}
	#sod_frm #od_tel, #sod_frm #od_b_tel {width:calc(100% - 150px); max-width:388px; margin-left:14px;} /* 셀렉트 132 + 18 */
	#sod_frm .od-addr-row {flex-wrap:wrap; gap:12px;}
	#sod_frm .od-addr-row + .od-addr-row {margin-top:12px;}
	#sod_frm .tbl_frm01 td .od-addr-row .od-addr-zip, #sod_frm .frm_input[id$="_zip"], #sod_frm #od_zip, #sod_frm #od_b_zip {flex:1 1 auto; width:auto; min-width:0; margin:0; order:1;} /* 줄1: 우편번호 + 주소찾기 (회원가입과 동일 배치 — order 재배치) */
	#sod_frm .od-addr-row .btn_address, #sod_frm .tbl_frm01 td .btn_address {flex:0 0 auto; min-width:0; padding:0 20px; font-size:16px; order:2;}
	#sod_frm .tbl_frm01 td .od-addr-row .od-addr-base {flex:1 1 100%; width:auto; margin:0; order:3;} /* 줄2: 주소 풀폭 */
	#sod_frm .tbl_frm01 td .od-addr-row .od-addr-detail {flex:1 1 100%; width:auto; margin:0;}
	#sod_frm .order_choice_place, #sod_frm_taker .order_choice_place {row-gap:12px;} /* wrap 시 상하 간격 */
	/* 결제수단 — inline-block 형제는 공백 없어도 사이 줄바꿈 가능 → input을 sr-only로 숨기고 체크 UI를 label ::before로 (짝 분리 원천 차단) */
	#sod_frm #sod_frm_paysel input[type="radio"] {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}
	#sod_frm #sod_frm_paysel .lb_icon, #sod_frm #od_pay_sl .lb_icon {display:inline-flex; align-items:center; margin:6px 40px 6px 0;}
	#sod_frm #sod_frm_paysel .lb_icon::before, #sod_frm #od_pay_sl .lb_icon::before {content:''; flex:0 0 18px; width:18px; height:18px; margin-right:12px; border:1px solid var(--gray-300); border-radius:4px; background:var(--white) no-repeat center / 10px 8px;}
	#sod_frm #sod_frm_paysel input[type="radio"]:checked + .lb_icon::before, #sod_frm #od_pay_sl input[type="radio"]:checked + .lb_icon::before {background-image:url("../../img/ico_check_blue.svg");}
	.pd-detail {margin:40px 0 0;}
	.pd-detail__title {padding:0 0 40px; font-size:28px;}
	#sit_info.pd-secs .pd-detail__title {font-size:28px;}
	.pd-sec {margin:60px 0 0;}
	#sit_info section.pd-sec {margin:60px 0 0;}
	#sit_use .rv-grid {grid-template-columns:repeat(2, 1fr);} /* 후기 3열 → 2열 (구 992 블록 대체) */
}
@media(max-width:768px){
	/* 후기/문의 작성 모달 (rv-* 공용) */
	.rv-modal {padding:12px;}
	.rv-modal__dlg {margin:2vh auto; padding:20px 18px 26px;}
	.rv-modal__head h3, #sit_use .rv-modal__head h3, #sit_qa .rv-modal__head h3 {font-size:20px;}
	.rv-frow {flex-direction:column; gap:8px;}
	.rv-frow--star, .rv-frow--input {align-items:flex-start;} /* column 전환 시 가로 중앙 정렬 방지 */
	.rv-frow__label {flex:none; font-size:16px;}
	.rv-frow__field {width:100%;} /* column에서 flex:1은 폭을 못 채움 — 인풋 절반 폭 방지 */
	.rv-prod {gap:14px; padding:14px 0;}
	.rv-prod__img {flex:0 0 80px; width:80px; height:80px;}
	.rv-photos {flex-wrap:wrap; gap:12px;}
	.rv-photos__slot {flex:0 0 calc(25% - 9px); width:auto; height:auto; aspect-ratio:1 / 1;} /* 4칸 균등 — M = 12×3/4 = 9 (D9) */
	.rv-btn-submit, .rv-btn-line {min-width:130px; padding:13px 24px; font-size:16px;}
	.rv-view__photos img {height:100px;}
	/* 문의 리스트 행 */
	#sit_qa .qa-item__row {min-height:56px; padding:14px 0;}
	#sit_qa .qa-item__tit {overflow:hidden; text-overflow:ellipsis; font-size:16px;} /* J5 — 행 제목 1줄 잘림 */
	#sit_qa .qa-item__date {font-size:13px;}
	#sit_qa .qa-item__arrow {margin-left:10px;}
	#sit_ov #sit_title {font-size:24px;}
	#sit_desc.pd-headline {font-size:16px;}
	#sit_ov .sit_option {padding:24px 0;}
	#sit_ov .sit_option h3 {flex:0 0 100px; font-size:14px;}
	#sit_ov #sit_tot_price {font-size:24px;}
	#sit_ov #sit_tot_price strong {font-size:24px;}
	#sit_inf_explan {padding:40px 0 0;}
	/* 탭바 — 고정 300×4 → 균등 25% */
	.pd-sec__tab {width:25%;}
	.pd-sec__tab a {gap:6px; height:52px; font-size:14px;}
	.pd-sec__tab.is-active {border-radius:14px 14px 0 0;}
	.pd-sec__tab.is-active .pd-sec__cnt {min-width:26px; height:20px; padding:2px 5px; font-size:13px;}
	/* 후기 3열 → 2열 (좌우 gap % — E3) */
	#sit_use .rv-grid {grid-template-columns:repeat(2, 1fr); gap:16px 2.2%;}
	.pd-sec .rv-btn-write {min-width:130px; padding:12px 20px; font-size:16px;}
	.pd-acc__item summary {min-height:52px; font-size:16px;}
	.pd-acc__body {padding:16px 20px; font-size:14px;}
	.pd-sec__empty {padding:40px 0; font-size:14px;}
}
@media(max-width:500px){
	#sit_ov #sit_title {font-size:22px;}
	#sit_ov_btn .pd-actions__wish, #sit_ov_btn .pd-actions__cart {flex:0 0 52px; width:52px; height:52px;}
	#sit_ov_btn .pd-actions__buy {height:52px; font-size:16px;}
	.pd-sec__tab a {gap:4px; font-size:12px;}
	#sit_use .rv-grid {grid-template-columns:100%;} /* 후기 1열 */
}

/* ============================================================
   26.10.06 상품 상세설명 텍스트 블록 (.pd-desc)
   - 배경: 프런트는 상세설명을 "이미지 한 장" 전제로 짜서
     shop_common.css 에 `#sit_inf_explan { text-align:center }` 가 걸려 있다.
     텍스트로 설명을 쓰면 제목·목록이 전부 가운데 정렬 평문으로 뭉개진다.
   - 그 규칙을 지우면 기존 이미지형 상세(가운데 정렬)가 깨지므로,
     건드리지 않고 `.pd-desc` 안쪽만 왼쪽 정렬로 되돌린다.
   ============================================================ */
#sit_inf_explan .pd-desc {max-width:860px; margin:0 auto; text-align:left; word-break:keep-all;}
#sit_inf_explan .pd-desc__lead {margin:0 0 28px; padding-bottom:20px; border-bottom:1px solid var(--gray-200,#e5e5e5);
  font-size:18px; font-weight:600; line-height:1.6; color:var(--dark,#111);}
#sit_inf_explan .pd-desc h4 {margin:28px 0 12px; padding-left:12px; border-left:3px solid var(--navy,#182b54);
  font-size:16px; font-weight:700; line-height:1.4; color:var(--navy,#182b54); text-align:left;}
#sit_inf_explan .pd-desc h4:first-of-type {margin-top:0;}
#sit_inf_explan .pd-desc ul {margin:0; padding:0; list-style:none; text-align:left;}
#sit_inf_explan .pd-desc li {position:relative; margin:0 0 8px; padding-left:16px;
  font-size:15px; line-height:1.7; color:var(--gray-800,#454545); text-align:left;}
#sit_inf_explan .pd-desc li::before {content:""; position:absolute; left:0; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--sky,#00abff);}
#sit_inf_explan .pd-desc p {margin:0; font-size:15px; line-height:1.7; color:var(--gray-800,#454545); text-align:left;}
#sit_inf_explan .pd-desc__note {margin:16px 0 0 !important; padding:14px 16px; border-radius:8px;
  background:var(--gray-50,#f7f8fa); font-size:14px !important; color:var(--gray-600,#656565) !important;}

@media (max-width:768px) {
	#sit_inf_explan .pd-desc__lead {margin-bottom:22px; padding-bottom:16px; font-size:16px;}
	#sit_inf_explan .pd-desc h4 {margin:22px 0 10px; font-size:15px;}
	#sit_inf_explan .pd-desc li, #sit_inf_explan .pd-desc p {font-size:14px;}
}

/* ============================================================
   26.10.06 상품정보제공고시 표 (.pd-gosi)
   - 전자상거래 고시 항목. 원래 테마가 display:none 으로 숨겨둔 것을 노출로 전환했다.
   - 상세설명과 같은 폭(860px)을 쓰고, 부모의 text-align:center 를 안쪽에서 되돌린다.
   ============================================================ */
/* ★ 영카트 스킨에 `#sit_inf h3 {position:absolute; font-size:0}` 가 있다(숨김용 제목 전제).
   font-size 는 특이도로 이기지만 position 은 선언하지 않으면 absolute 가 남아 표 위로 겹친다.
   그래서 position/line-height 를 명시적으로 되돌린다. */
#sit_inf .pd-gosi__title {position:static; max-width:860px; margin:48px auto 14px; padding-left:12px;
  border-left:3px solid var(--navy,#182b54); font-size:16px; font-weight:700; line-height:1.4;
  color:var(--navy,#182b54); text-align:left;}
#sit_inf table.pd-gosi {width:100%; max-width:860px; margin:0 auto; border-collapse:collapse;
  border-top:2px solid var(--navy,#182b54); table-layout:fixed; text-align:left;}
#sit_inf table.pd-gosi th,
#sit_inf table.pd-gosi td {padding:13px 16px; border-bottom:1px solid var(--gray-200,#e5e5e5);
  font-size:14px; line-height:1.6; text-align:left; vertical-align:top; word-break:keep-all;}
#sit_inf table.pd-gosi th {width:34%; background:var(--gray-50,#f7f8fa);
  font-weight:600; color:var(--gray-800,#454545);}
#sit_inf table.pd-gosi td {color:var(--dark,#111);}

@media (max-width:768px) {
	#sit_inf .pd-gosi__title {margin:36px auto 12px; font-size:15px;}
	#sit_inf table.pd-gosi {table-layout:auto;}
	#sit_inf table.pd-gosi th,
	#sit_inf table.pd-gosi td {display:block; width:auto; padding:10px 14px; font-size:13px;}
	#sit_inf table.pd-gosi th {border-bottom:0; padding-bottom:4px;}
}