/* DR Shop Engine - 체크아웃 페이지 전용 스타일. [drshop_checkout] 숏코드가 있는 페이지에서만 로드. */

.st-page-body:has(.drshop-checkout) { max-width: none; }
.st-home:has(.drshop-checkout) {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.grid-container:has(.drshop-checkout) { max-width: 1600px; }

.drshop-checkout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .drshop-checkout { grid-template-columns: minmax(0, 1fr); } }
.drshop-step { background: #fff; border: 1px solid #e0e4d5; border-radius: 16px; box-shadow: 0 6px 18px rgba(47, 74, 55, 0.06); padding: 24px; margin-bottom: 20px; }
.drshop-step h2 { font-size: 1.15rem; margin-top: 0; }
.drshop-step input, .drshop-step textarea { width: 100%; padding: 14px; border: 1px solid #e0e4d5; border-radius: 8px; margin-bottom: 12px; font-size: 1rem; box-sizing: border-box; }
.drshop-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.drshop-order-summary { background: #fff; border: 1px solid #e0e4d5; border-radius: 16px; box-shadow: 0 6px 18px rgba(47, 74, 55, 0.06); padding: 24px; }
.drshop-summary-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f1ea; }
.drshop-summary-item img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.drshop-summary-item-info { flex: 1; min-width: 0; }
.drshop-summary-item-name { font-weight: 700; margin-bottom: 4px; word-break: keep-all; overflow-wrap: break-word; }
.drshop-summary-item-qty { font-size: 0.82rem; color: #8a8f7f; margin-bottom: 4px; }
.drshop-summary-item-price { color: #a1573a; font-weight: 800; }
.drshop-summary-total { display: flex; justify-content: space-between; padding-top: 16px; font-size: 1.15rem; font-weight: 800; }
.drshop-checkout-error { background: #fdecea; border: 1px solid #a1573a; color: #a1573a; padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; }

/* 쿠폰 박스 */
.drshop-coupon-box { margin: 16px 0; padding: 14px; background: #f7f8f3; border-radius: 10px; }
.drshop-coupon-input-row { display: flex; gap: 8px; }
.drshop-coupon-input-row input { flex: 1 1 auto; min-width: 0; margin-bottom: 0 !important; }
.drshop-coupon-input-row button, .drshop-coupon-applied button {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #2f4a37; color: #fff; border: none; border-radius: 6px; padding: 10px 16px; cursor: pointer; font-weight: 700;
}
.drshop-coupon-applied { display: flex; align-items: center; gap: 10px; color: #2f4a37; }
.drshop-coupon-message { font-size: 0.85rem; margin-top: 6px; min-height: 1.2em; }
.drshop-summary-subtotal, .drshop-summary-discount {
    display: flex; justify-content: space-between; padding: 6px 0; color: #555; font-size: 0.95rem;
}
.drshop-summary-discount { color: #a1573a; }

/* 모바일 체크아웃 - 장바구니와 통일된 카드 언어: 주문요약 상품도 개별 카드로,
   쿠폰·소계·할인·총계는 별도의 "결제 요약 카드"로 묶어서 시각적으로 분리. */
@media (max-width: 480px) {
    .drshop-step { padding: 18px; border-radius: 14px; }
    .drshop-step h2 { font-size: 1.05rem; }

    .drshop-order-summary { background: transparent; border: none; box-shadow: none; padding: 0; }
    .drshop-order-summary h2 { font-size: 1.05rem; margin: 0 0 14px; }

    .drshop-summary-item {
        background: #fff; border: 1px solid #e0e4d5; border-radius: 14px;
        box-shadow: 0 4px 14px rgba(47, 74, 55, 0.06);
        padding: 14px; margin-bottom: 10px; border-bottom: 1px solid #e0e4d5;
    }
    .drshop-summary-item img { flex: 0 0 60px; width: 60px; height: 60px; }
    .drshop-summary-item-price { font-size: 1.02rem; }

    .drshop-summary-totals-card {
        background: #fff; border: 1px solid #e0e4d5; border-radius: 14px;
        box-shadow: 0 4px 14px rgba(47, 74, 55, 0.06);
        padding: 16px; margin-top: 4px;
    }
    .drshop-summary-totals-card .drshop-coupon-box { margin-top: 0; }
    .drshop-summary-total { font-size: 1.25rem; border-top: 1px dashed #e8ebdf; margin-top: 8px; padding-top: 14px; }
    .drshop-summary-total strong { color: #a1573a; }

    .drshop-place-order { padding: 16px; font-size: 1.05rem; }
}
