/**
 * 체크아웃 페이지 전용 스타일
 *
 * @package Terra_TossPay
 */

/* =============================================================================
   Google Fonts Import
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

/* =============================================================================
   CSS Variables
   ============================================================================= */
:root {
    --toss-blue: #0064FF;
    --toss-blue-light: #4A90FF;
    --toss-blue-dark: #0050CC;
    --toss-blue-bg: rgba(0, 100, 255, 0.04);
    --toss-black: #191F28;
    --toss-gray-900: #333D4B;
    --toss-gray-700: #4E5968;
    --toss-gray-500: #8B95A1;
    --toss-placeholder: #9CA3AF;
    --toss-gray-400: #B0B8C1;
    --toss-gray-300: #D1D6DB;
    --toss-gray-200: #E5E8EB;
    --toss-gray-100: #F2F4F6;
    --toss-gray-50: #F9FAFB;
    --toss-white: #FFFFFF;
    --toss-red: #F04452;
    --toss-green: #03C75A;
    --toss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --toss-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --toss-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --toss-radius-sm: 8px;
    --toss-radius-md: 12px;
    --toss-radius-lg: 16px;
    --toss-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   Base Reset
   ============================================================================= */
body.woocommerce-checkout {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: linear-gradient(180deg, var(--toss-gray-50) 0%, var(--toss-gray-100) 100%);
    color: var(--toss-black);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* =============================================================================
   Canvas Mode - 헤더/푸터/사이트제목 모두 숨기기
   ============================================================================= */
/* 사이트 제목 영역 */
body.woocommerce-checkout .wp-block-group.alignwide.is-content-justification-space-between,
body.woocommerce-checkout .wp-block-group:has(.wp-block-site-title),
body.woocommerce-checkout .wp-block-site-title,
body.woocommerce-checkout p.wp-block-site-title {
    display: none !important;
}

/* WooCommerce 알림 영역 */
body.woocommerce-checkout .wc-block-store-notices,
body.woocommerce-checkout .wp-block-woocommerce-store-notices,
body.woocommerce-checkout [data-block-name="woocommerce/store-notices"] {
    display: none !important;
}

/* 기타 헤더/푸터 */
body.woocommerce-checkout header,
body.woocommerce-checkout footer,
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-footer,
body.woocommerce-checkout .wp-block-template-part {
    display: none !important;
}

/* =============================================================================
   테마 레이아웃 리셋 (twentytwentyfive theme.json 오버라이드)
   ============================================================================= */
body.woocommerce-checkout,
body.woocommerce-checkout .wp-site-blocks {
    padding: 0 !important;
    max-width: 100% !important;
}

body.woocommerce-checkout .wp-site-blocks > *,
body.woocommerce-checkout main,
body.woocommerce-checkout main > *,
body.woocommerce-checkout article,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout main.wp-block-group,
body.woocommerce-checkout main.wp-block-group.is-layout-constrained,
body.woocommerce-checkout .entry-content.is-layout-flow,
body.woocommerce-checkout .wp-block-post-content,
body.woocommerce-checkout .is-layout-constrained,
body.woocommerce-checkout .is-layout-flow,
body.woocommerce-checkout [class*="is-layout-"],
body.woocommerce-checkout .has-global-padding,
body.woocommerce-checkout .alignwide,
body.woocommerce-checkout .alignfull {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
}

/* =============================================================================
   Layout Container
   ============================================================================= */
body.woocommerce-checkout .woocommerce {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px 24px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
}

.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title {
    display: none !important;
}

/* =============================================================================
   1열 레이아웃 (청구상세 → 주문요약 → 결제)
   ============================================================================= */
body.woocommerce-checkout form.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

body.woocommerce-checkout #customer_details {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
}

/* 헤딩 숨기기 (카드 안에 CSS로 표시) */
body.woocommerce-checkout #order_review_heading {
    display: none !important;
}

body.woocommerce-checkout #order_review {
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
}

/* 카드 안에 헤딩 표시 */
body.woocommerce-checkout #order_review::before {
    content: '주문 내역';
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--toss-black);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--toss-gray-100);
}

/* =============================================================================
   Card Sections
   ============================================================================= */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
    background: var(--toss-white);
    border-radius: var(--toss-radius-md);
    padding: 24px;
    box-shadow: var(--toss-shadow-sm);
    border: 1px solid var(--toss-gray-200);
    margin: 0;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order {
    background: transparent;
    padding: 0;
}

/* =============================================================================
   Section Headers
   ============================================================================= */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--toss-black);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--toss-gray-100);
    text-align: left !important;
}

/* =============================================================================
   Form Fields - 2열 그리드
   ============================================================================= */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.woocommerce-checkout .form-row {
    margin-bottom: 0;
    position: relative;
}

/* 이메일은 전체 너비 */
.woocommerce-checkout #billing_email_field {
    grid-column: 1 / -1;
}

.woocommerce-checkout .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--toss-gray-700);
    margin-bottom: 4px;
}

.woocommerce-checkout .form-row label .required {
    color: var(--toss-blue);
    margin-left: 2px;
}

.woocommerce-checkout .form-row label .optional {
    color: var(--toss-gray-400);
    font-weight: 400;
    font-size: 10px;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--toss-black);
    background: var(--toss-gray-50);
    border: 1.5px solid var(--toss-gray-200);
    border-radius: var(--toss-radius-sm);
    transition: var(--toss-transition);
    outline: none;
    box-sizing: border-box;
}

.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: var(--toss-gray-400);
}

.woocommerce-checkout input.input-text:hover,
.woocommerce-checkout select:hover {
    border-color: var(--toss-gray-300);
    background: var(--toss-white);
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--toss-blue);
    background: var(--toss-white);
    box-shadow: 0 0 0 3px var(--toss-blue-bg);
}

/* =============================================================================
   Order Table - 가로 배치
   ============================================================================= */
table.woocommerce-checkout-review-order-table {
    border: none !important;
    border-collapse: collapse !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: fixed !important;
}

table.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

table.woocommerce-checkout-review-order-table tbody {
    display: block !important;
    width: 100% !important;
}

table.woocommerce-checkout-review-order-table tbody tr.cart_item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
    width: 100% !important;
}

table.woocommerce-checkout-review-order-table tbody tr.cart_item td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
}

table.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name {
    flex: 1 1 auto !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding-right: 16px !important;
}

/* === [제거] 링크 (수량 옆) === */
.tosspay-checkout-remove {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #999 !important;
    text-decoration: none !important;
    margin-left: 4px !important;
    cursor: pointer !important;
}
.tosspay-checkout-remove:hover {
    color: #e74c3c !important;
}

table.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total {
    flex: 0 0 auto !important;
    text-align: right !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    white-space: nowrap !important;
}

table.woocommerce-checkout-review-order-table tfoot {
    display: block !important;
    width: 100% !important;
}

table.woocommerce-checkout-review-order-table tfoot tr {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    width: 100% !important;
}

table.woocommerce-checkout-review-order-table tfoot tr th,
table.woocommerce-checkout-review-order-table tfoot tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    min-width: 0 !important;
}

table.woocommerce-checkout-review-order-table tfoot tr th {
    flex: 1 1 auto !important;
    text-align: left !important;
    white-space: nowrap !important;
}

table.woocommerce-checkout-review-order-table tfoot tr td {
    flex: 0 0 auto !important;
    text-align: right !important;
}

table.woocommerce-checkout-review-order-table tfoot tr.cart-discount {
    padding-right: 30px !important;
}

/* 소계 숨기기 (총계만 표시) */
table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
    display: none !important;
}

table.woocommerce-checkout-review-order-table tfoot tr.order-total {
    border-top: 2px solid var(--toss-gray-200) !important;
    border-bottom: none !important;
    padding-top: 14px !important;
    margin-top: 4px !important;
}

table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
    font-size: 15px !important;
    font-weight: 700 !important;
}

table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--toss-blue) !important;
}

/* 상품 옵션(variation) 가로 배치 */
table.woocommerce-checkout-review-order-table .variation {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    color: var(--toss-gray-500) !important;
}

table.woocommerce-checkout-review-order-table .variation dt,
table.woocommerce-checkout-review-order-table .variation dd {
    display: inline !important;
    margin: 0 !important;
}

table.woocommerce-checkout-review-order-table .variation dd p {
    display: inline !important;
    margin: 0 !important;
}

/* =============================================================================
   Payment Section (오더범프 + 결제버튼 카드)
   ============================================================================= */
.woocommerce-checkout #payment {
    background: var(--toss-white);
    border-radius: var(--toss-radius-md);
    box-shadow: var(--toss-shadow-sm);
    margin-bottom: 20px;
    order: 3 !important;
}

/* 카드 제목 - PHP에서 동적 생성 */
.woocommerce-checkout #payment::before {
    display: none !important;
}

/* 결제 방법 목록은 보이게 (라디오 버튼) */
.woocommerce-checkout .wc_payment_methods {
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}

/* 기본 payment_box 숨기기 */
.woocommerce-checkout .payment_box {
    display: none !important;
}

/* tosspay_onetime 결제수단 선택 필드는 보이게 (ID 선택자로 우선순위 높임) */
#payment .wc_payment_methods .payment_box.payment_method_tosspay_onetime {
    display: block !important;
    background: transparent !important;
    padding: 12px 0 0 0 !important;
    margin: 0 !important;
}

/* =============================================================================
   Place Order Button
   ============================================================================= */
.woocommerce-checkout #place_order {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: var(--toss-white);
    background: linear-gradient(135deg, var(--toss-blue) 0%, var(--toss-blue-dark) 100%);
    border: none;
    border-radius: var(--toss-radius-sm);
    cursor: pointer;
    transition: var(--toss-transition);
    margin-top: 0px;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

.woocommerce-checkout #place_order::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    opacity: 0;
    transition: var(--toss-transition);
}

.woocommerce-checkout #place_order:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 100, 255, 0.35);
}

.woocommerce-checkout #place_order:hover::before {
    opacity: 1;
}

.woocommerce-checkout #place_order:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 100, 255, 0.25);
}

/* =============================================================================
   Messages
   ============================================================================= */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
    background: #FFF5F5;
    border: 1px solid var(--toss-red);
    border-radius: var(--toss-radius-sm);
    padding: 16px 20px;
    color: var(--toss-red);
    list-style: none;
    margin-bottom: 20px;
    font-size: 14px;
}

.woocommerce-checkout .woocommerce-message {
    background: rgba(3, 199, 90, 0.05);
    border-color: var(--toss-green);
    color: var(--toss-green);
}

/* =============================================================================
   Coupon Section (청구 상세내용 아래)
   ============================================================================= */
.tosspay-coupon-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--toss-gray-100);
}

.tosspay-coupon-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--toss-gray-700);
    margin: 0 0 8px;
}

.tosspay-coupon-form {
    display: flex;
    gap: 8px;
}

.tosspay-coupon-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--toss-black);
    background: var(--toss-gray-50);
    border: 1.5px solid var(--toss-gray-200);
    border-radius: var(--toss-radius-sm);
    transition: var(--toss-transition);
    outline: none;
}

.tosspay-coupon-input:focus {
    border-color: var(--toss-blue);
    background: var(--toss-white);
    box-shadow: 0 0 0 3px var(--toss-blue-bg);
}

.tosspay-coupon-input::placeholder {
    color: var(--toss-gray-400);
}

.tosspay-coupon-button {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--toss-blue);
    background: var(--toss-white);
    border: 1.5px solid var(--toss-blue);
    border-radius: var(--toss-radius-sm);
    cursor: pointer;
    transition: var(--toss-transition);
    white-space: nowrap;
}

.tosspay-coupon-button:hover {
    background: var(--toss-blue);
    color: var(--toss-white);
}

.tosspay-coupon-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tosspay-coupon-message {
    margin-top: 8px;
    font-size: 13px;
}

.tosspay-coupon-message .success {
    color: var(--toss-green);
}

.tosspay-coupon-message .error {
    color: var(--toss-red);
}

/* 기존 WooCommerce 쿠폰 폼 숨기기 */
.woocommerce-form-coupon-toggle,
.checkout_coupon {
    display: none !important;
}

/* =============================================================================
   Hide Unnecessary Elements
   ============================================================================= */
/* 빈 알림 영역 숨기기 */
.woocommerce-checkout .wc-block-store-notices:empty,
.woocommerce-checkout .wc-block-store-notices:has(.woocommerce-notices-wrapper:empty) {
    display: none !important;
}

.woocommerce-checkout .wc-block-store-notices {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-checkout .woocommerce-notices-wrapper:empty {
    display: none !important;
}

/* =============================================================================
   Hide Unnecessary Fields
   ============================================================================= */
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #billing_company_field,
.woocommerce-checkout .col-2 {
    display: none !important;
}

.woocommerce-checkout #customer_details {
    display: block;
}

.woocommerce-checkout #customer_details .col-1 {
    width: 100%;
    float: none;
}

/* =============================================================================
   Privacy & Terms
   ============================================================================= */
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 13px;
    color: var(--toss-gray-500);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--toss-gray-100);
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--toss-blue);
    text-decoration: none;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-top: 20px;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--toss-gray-700);
    cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__input-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--toss-blue);
    flex-shrink: 0;
    margin-top: 2px;
}

/* =============================================================================
   Loading State
   ============================================================================= */
@keyframes toss-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.woocommerce-checkout.processing #place_order {
    animation: toss-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}



/* =============================================================================
   Responsive - 모바일
   ============================================================================= */
@media (max-width: 900px) {
    /* 전체 레이아웃 리셋 */
    body.woocommerce-checkout,
    body.woocommerce-checkout .wp-site-blocks,
    body.woocommerce-checkout .wp-site-blocks > *,
    body.woocommerce-checkout main,
    body.woocommerce-checkout article,
    body.woocommerce-checkout .entry-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body.woocommerce-checkout .woocommerce {
        padding: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 폼 세로 배치 */
    body.woocommerce-checkout form.woocommerce-checkout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    /* 카드 스타일 */
    body.woocommerce-checkout #customer_details,
    body.woocommerce-checkout #order_review {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }

    body.woocommerce-checkout #order_review_heading {
        display: none !important;
    }

    /* col-1 리셋 */
    body.woocommerce-checkout #customer_details .col-1 {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 섹션 헤더 */
    .woocommerce-checkout h3,
    .woocommerce-checkout .woocommerce-billing-fields h3 {
        font-size: 15px !important;
        margin: 0 0 12px !important;
        padding-bottom: 10px !important;
    }

    /* 폼 필드 */
    .woocommerce-checkout .form-row {
        margin-bottom: 12px !important;
    }

    .woocommerce-checkout .form-row label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .woocommerce-checkout input.input-text,
    .woocommerce-checkout select {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* 주문 테이블 */
    table.woocommerce-checkout-review-order-table tbody tr.cart_item {
        padding: 12px 0 !important;
    }

    table.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name {
        font-size: 13px !important;
    }

    table.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total {
        font-size: 13px !important;
    }

    table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
        font-size: 18px !important;
    }

    /* 결제 수단 */
    .woocommerce-checkout .wc_payment_method > label {
        padding: 12px !important;
        font-size: 13px !important;
    }

    .woocommerce-checkout .payment_box {
        padding: 12px !important;
        font-size: 13px !important;
    }

    /* 주문 버튼 */
    .woocommerce-checkout #place_order {
        padding: 14px 20px !important;
        font-size: 15px !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    /* 페이지 타이틀 */
    .woocommerce-checkout .entry-title,
    .woocommerce-checkout .page-title {
        font-size: 18px !important;
        margin: 0 0 12px !important;
        padding: 0 12px !important;
    }

    /* 개인정보 텍스트 */
    .woocommerce-checkout .woocommerce-privacy-policy-text {
        font-size: 11px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
    }
}

/* =============================================================================
   PHP에서 이동한 CSS (class-checkout.php)
   ============================================================================= */

/* === 1. 읽기 전용 필드 스타일 (로그인 사용자 정보 수정 방지) === */
.tosspay-readonly-field {
    background-color: #f5f5f5 !important;
    opacity: 0.8;
    cursor: not-allowed;
}

/* === 2. 장바구니 추가 후 "보기" 버튼 숨기기 === */
.added_to_cart.wc-forward {
    display: none !important;
}

/* === 3. 가상/다운로드 상품 - 기본 장바구니 버튼 숨기기 === */
.single_add_to_cart_button:not(.tosspay-buy-now-button) {
    display: none !important;
}

/* === 4. 바로구매 버튼 스타일 === */
.tosspay-buy-now-button {
    margin-left: 6px !important;
}
/* 가상 상품 전용 */
.single_add_to_cart_button:not(.tosspay-buy-now-button) ~ .tosspay-buy-now-button {
    margin-left: 0 !important;
}

/* === 5. 정기구독 상품 - 장바구니/체크아웃 가격 표시 (4열 그리드) === */
.tosspay-cart-single-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: auto;
    margin-left: auto;
}

.tosspay-price-row {
    display: grid !important;
    grid-template-columns: 70px 60px 60px 30px !important;
    align-items: baseline !important;
    column-gap: 4px !important;
    font-size: 12px;
    color: var(--toss-black);
}

.tosspay-col-label {
    text-align: right;
    padding-right: 0;
    margin-right: -2px !important;
    font-size: 12px;
    color: var(--toss-gray-500);
    white-space: nowrap;
}

.tosspay-col-del {
    text-align: right;
}

.tosspay-col-del del {
    color: var(--toss-placeholder) !important;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(156, 163, 175, 0.5);
}

.tosspay-col-del del .woocommerce-Price-amount,
.tosspay-col-del del .woocommerce-Price-amount bdi,
.tosspay-col-del del span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--toss-placeholder) !important;
}

.tosspay-col-price {
    text-align: right;
}

.tosspay-col-price .woocommerce-Price-amount {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--toss-black) !important;
}

.tosspay-col-suffix {
    text-align: left;
    font-size: 12px;
    color: var(--toss-gray-500);
}

.tosspay-price-row--sub {
    color: var(--toss-gray-500);
    padding-top: 8px;
    border-top: 1px solid var(--toss-gray-200);
}

.tosspay-discount-badge {
    display: inline-block;
    background: #FF6B6B;
    color: var(--toss-white);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
}

/* 정기구독 상품 수량 숨기기 */
.woocommerce-cart-form .cart_item:has(.tosspay-cart-single-price) .product-quantity {
    visibility: hidden;
}

/* === 6. 장바구니 합계 - 정기결제 정보 박스 === */
.tosspay-subscription-box {
    background: #F8FAFC;
    border: 1px solid var(--toss-gray-200);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.tosspay-subscription-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--toss-gray-200);
}

.tosspay-subscription-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tosspay-subscription-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--toss-black);
}

.tosspay-subscription-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tosspay-subscription-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--toss-white);
    border-radius: 8px;
    border: 1px solid var(--toss-gray-200);
}

.tosspay-subscription-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--toss-black);
}

.tosspay-subscription-detail {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tosspay-subscription-period {
    font-size: 12px;
    color: var(--toss-white);
    background: var(--toss-blue);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.tosspay-subscription-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.tosspay-subscription-row + .tosspay-subscription-row {
    border-top: 1px solid var(--toss-gray-100);
    margin-top: 4px;
    padding-top: 8px;
}

.tosspay-subscription-label {
    font-size: 13px;
    color: var(--toss-gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tosspay-sub-badge {
    display: inline-block;
    background: #FF6B6B;
    color: var(--toss-white);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 2px;
}

.tosspay-subscription-price del {
    color: #999;
    text-decoration: line-through;
    font-size: 12px;
    font-weight: 400;
    margin-right: 2px;
}

.tosspay-subscription-price strong {
    font-size: 15px;
    color: var(--toss-black);
}

.tosspay-subscription-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--toss-black);
}

.tosspay-subscription-notice {
    margin-top: 14px;
    padding: 10px 12px;
    background: #FFF8E6;
    border-radius: 6px;
    font-size: 12px;
    color: #946800;
    line-height: 1.5;
}

/* === 7. 오더범프 (Order Bump) - 체크아웃 추가 상품 추천 === */
            .tosspay-ob-section {
                margin: 24px 0 20px;
                background: var(--toss-white);
                border-radius: 12px;
            }
            .tosspay-ob-header {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 0px;
                padding-bottom: 12px;
            }
            .tosspay-ob-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                background: var(--toss-blue);
                color: var(--toss-white);
                font-size: 16px;
                font-weight: 700;
                border-radius: 6px;
            }
            .tosspay-ob-section-title {
                font-size: 15px;
                font-weight: 700;
                color: var(--toss-black);
            }
            #tosspay-order-bump {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .tosspay-ob-card {
                display: flex !important;
                flex-direction: column !important;
                gap: 12px !important;
                padding: 16px !important;
                background: #f9fafb !important;
                border: 2px solid var(--toss-gray-200) !important;
                border-radius: 12px !important;
                cursor: pointer;
                transition: all 0.2s ease;
                position: relative;
            }
            .tosspay-ob-card:hover {
                border-color: var(--toss-gray-300);
                background: var(--toss-gray-100);
            }
            .tosspay-ob-card.is-checked {
                border-color: var(--toss-blue);
                background: rgba(0, 100, 255, 0.04);
                box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.15), 0 4px 12px rgba(0, 100, 255, 0.2);
            }
            .tosspay-ob-card input[type="checkbox"] {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
            }
            /* === 1행: 체크 + 상품명 + 제목 + 할인배지 === */
            .tosspay-ob-row1 {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
            }
            .tosspay-ob-check {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .tosspay-ob-check-icon {
                width: 22px;
                height: 22px;
                color: var(--toss-gray-300);
                transition: all 0.2s ease;
            }
            .tosspay-ob-check-icon .check-mark {
                opacity: 0;
                transition: opacity 0.2s ease;
            }
            .tosspay-ob-card.is-checked .tosspay-ob-check-icon {
                color: var(--toss-blue);
            }
            .tosspay-ob-card.is-checked .tosspay-ob-check-icon circle {
                fill: var(--toss-blue);
                stroke: var(--toss-blue);
            }
            .tosspay-ob-card.is-checked .tosspay-ob-check-icon .check-mark {
                opacity: 1;
                stroke: var(--toss-white);
            }
            .tosspay-ob-name {
                font-weight: 700;
                font-size: 15px;
                color: var(--toss-black);
                flex: 1;
            }
            /* === 2행: 이미지 + 제목/설명 + 가격 === */
            .tosspay-ob-row2 {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                width: 100%;
                padding-left: 34px;
            }
            .tosspay-ob-image {
                flex-shrink: 0 !important;
                width: 56px !important;
                height: 56px !important;
                border-radius: 8px !important;
                overflow: hidden !important;
                background: var(--toss-white) !important;
                border: 1px solid var(--toss-gray-200) !important;
            }
            .tosspay-ob-image img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
            }
            .tosspay-ob-content {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .tosspay-ob-title {
                font-size: 14px;
                font-weight: 600;
                color: var(--toss-gray-900);
                margin: 0;
                line-height: 1.3;
            }
            .tosspay-ob-desc {
                font-size: 13px;
                color: var(--toss-gray-500);
                margin: 0;
                line-height: 1.4;
            }
            .tosspay-ob-price {
                flex-shrink: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-end !important;
                gap: 4px !important;
                margin-left: auto !important;
            }
            .tosspay-ob-price del {
                color: var(--toss-placeholder) !important;
                font-size: 13px;
                text-decoration: line-through;
                text-decoration-thickness: 1.5px;
                text-decoration-color: rgba(156, 163, 175, 0.5);
                line-height: 1;
                order: -1;
            }
            .tosspay-ob-price del .woocommerce-Price-amount,
            .tosspay-ob-price del .woocommerce-Price-amount bdi,
            .tosspay-ob-price del span {
                color: var(--toss-placeholder) !important;
                font-weight: 500 !important;
            }
            .tosspay-ob-price del .woocommerce-Price-currencySymbol {
                color: var(--toss-placeholder) !important;
            }
            .tosspay-ob-discount-col {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 6px;
            }
            .tosspay-ob-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: #ff3b5c;
                color: var(--toss-white);
                font-size: 12px;
                font-weight: 700;
                padding: 3px 4px;
                border-radius: 4px;
                line-height: 1;
                animation: tosspay-blink 1.5s ease-in-out infinite;
            }
            @keyframes tosspay-blink {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }
            .tosspay-ob-price strong {
                color: var(--toss-blue);
                font-size: 18px;
                font-weight: 700;
            }
            .tosspay-ob-loading {
                opacity: 0.5;
                pointer-events: none;
            }

            /* === 모바일 반응형 (768px 이하) === */
            @media (max-width: 768px) {
                .tosspay-ob-section {
                    margin: 16px 0;
                    padding: 16px;
                }
                .tosspay-ob-card {
                    padding: 14px !important;
                    gap: 10px !important;
                }
                .tosspay-ob-name {
                    font-size: 14px;
                }
                .tosspay-ob-row2 {
                    padding-left: 32px;
                    gap: 10px;
                }
                .tosspay-ob-image {
                    width: 50px !important;
                    height: 50px !important;
                }
                .tosspay-ob-title {
                    font-size: 13px;
                }
                .tosspay-ob-desc {
                    font-size: 12px;
                }
                .tosspay-ob-badge {
                    font-size: 11px;
                    padding: 2px 5px;
                }
                .tosspay-ob-price del {
                    font-size: 12px;
                }
                .tosspay-ob-price strong {
                    font-size: 16px;
                }
            }

            /* === 작은 모바일 (480px 이하) === */
            @media (max-width: 480px) {
                .tosspay-ob-section {
                    margin: 12px 0;
                    padding: 12px;
                    border-radius: 10px;
                }
                .tosspay-ob-header {
                    margin-bottom: 10px;
                    padding-bottom: 8px;
                }
                .tosspay-ob-section-title {
                    font-size: 13px;
                }
                .tosspay-ob-card {
                    padding: 12px !important;
                    gap: 8px !important;
                }
                .tosspay-ob-check {
                    width: 20px;
                    height: 20px;
                }
                .tosspay-ob-check-icon {
                    width: 18px;
                    height: 18px;
                }
                .tosspay-ob-name {
                    font-size: 13px;
                }
                .tosspay-ob-row2 {
                    padding-left: 26px;
                    gap: 8px;
                }
                .tosspay-ob-image {
                    width: 44px !important;
                    height: 44px !important;
                }
                .tosspay-ob-title {
                    font-size: 12px;
                }
                .tosspay-ob-desc {
                    font-size: 11px;
                }
                .tosspay-ob-badge {
                    font-size: 10px;
                    padding: 2px 4px;
                }
                .tosspay-ob-price del {
                    font-size: 11px;
                }
                .tosspay-ob-price strong {
                    font-size: 15px;
                }
            }

/* === 8. 체크아웃 총계 섹션 (Summary) - 정기결제 금액 표시 === */
                @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

                .woocommerce-checkout-review-order-table tr.order-total { display: none !important; }
                .tosspay-checkout-summary td { padding: 0 !important; width: 100% !important; }
                .tosspay-checkout-summary th { display: none; }

                .tosspay-sm {
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                    margin-top: 0;
                    background-color: #e5f2ff;
                    margin-left: -24px;
                    margin-right: -24px;
                    padding-left: 24px;
                    padding-right: 24px;
                    overflow: visible;
                }

                .tosspay-sm-row {
                    display: grid !important;
                    grid-template-columns: 90px 1fr auto 20px !important;
                    align-items: center !important;
                    column-gap: 0 !important;
                    padding: 16px 0;
                }
                .tosspay-sm-row--recurring {
                    padding-top: 8px;
                    border-top: 1px solid var(--toss-gray-200);
                }

                /* 4열 Grid 컬럼 스타일 */
                .tosspay-sm-label {
                    text-align: left;
                    font-family: 'Manrope', sans-serif;
                    font-size: 16px;
                    font-weight: 700;
                    color: var(--toss-black);
                }

               .tosspay-sm-suffix:empty,
                  .tosspay-sm-spacer:empty {
                  display: none;
                }
                /* .tosspay-sm-spacer: 그리드 빈 공간 (스타일 불필요) */
                .tosspay-sm-price-group {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    justify-content: flex-end;
                }
                .tosspay-sm-discount {
                    font-family: 'Manrope', sans-serif;
                    font-size: 12px;
                    font-weight: 800;
                    color: var(--toss-white);
                    background: linear-gradient(135deg, #FF3B3B 0%, #E02424 100%);
                    padding: 4px 12px;
                    border-radius: 6px;
                    box-shadow: 0 2px 8px rgba(255, 59, 59, 0.3);
                    letter-spacing: 0.5px;
                    white-space: nowrap;
                }
                .tosspay-sm-price {
                    white-space: nowrap;
                    padding-top: 4px;
                    padding-bottom: 4px;
                }
                .tosspay-sm-price .woocommerce-Price-amount,
                .tosspay-sm-price .woocommerce-Price-amount bdi,
                .tosspay-sm-price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
                    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
                    font-size: 25px !important;
                    font-weight: 700 !important;
                    font-style: normal !important;
                    color: var(--toss-blue) !important;
                    letter-spacing: -0.5px !important;
                    white-space: nowrap !important;
                    line-height: 1.4 !important;
                }
                .tosspay-sm-suffix {
                    text-align: left;
                    font-family: 'Manrope', sans-serif;
                    font-size: 14px;
                    font-weight: 600;
                    color: var(--toss-gray-700);
                }

                .tosspay-sm-left {
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    flex: 1;
                }

                .tosspay-sm-tag {
                    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
                    font-size: 11px;
                    font-weight: 800;
                    padding: 7px 14px;
                    border-radius: 8px;
                    white-space: nowrap;
                    letter-spacing: 0.8px;
                    text-transform: uppercase;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
                    position: relative;
                    overflow: hidden;
                }
                .tosspay-sm-tag::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
                    animation: shimmer 3s infinite;
                }
                @keyframes shimmer {
                    0% { left: -100%; }
                    50%, 100% { left: 100%; }
                }

                .tosspay-sm-tag--blue {
                    background: linear-gradient(135deg, var(--toss-blue) 0%, #0052DD 100%);
                    color: var(--toss-white);
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                }
                .tosspay-sm-tag--dark {
                    background: linear-gradient(135deg, var(--toss-gray-900) 0%, #2A3441 100%);
                    color: var(--toss-white);
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                }

                .tosspay-sm-discount {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    animation: fadeInUp 0.5s ease-out 0.2s both;
                }
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                .tosspay-sm-badge {
                    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
                    font-size: 13px;
                    font-weight: 800;
                    color: var(--toss-white);
                    background: linear-gradient(135deg, #FF3B3B 0%, #E02424 100%);
                    padding: 4px 10px;
                    border-radius: 6px;
                    box-shadow:
                        0 2px 8px rgba(255, 59, 59, 0.25),
                        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
                    letter-spacing: 0.3px;
                    position: relative;
                }
                .tosspay-sm-badge::before {
                    content: '';
                    position: absolute;
                    top: 1px;
                    left: 1px;
                    right: 1px;
                    height: 40%;
                    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
                    border-radius: 4px 4px 0 0;
                }

                .tosspay-sm-discount del {
                    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
                    font-size: 14px;
                    color: var(--toss-placeholder);
                    text-decoration-thickness: 1.5px;
                    text-decoration-color: rgba(156, 163, 175, 0.5);
                }
                .tosspay-sm-discount del .woocommerce-Price-amount {
                    color: var(--toss-placeholder) !important;
                    font-size: 14px !important;
                    font-weight: 500 !important;
                }

                .tosspay-sm-right {
                    display: flex;
                    align-items: baseline;
                    gap: 4px;
                    flex-shrink: 0;
                }
                .tosspay-sm-right del {
                    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
                    font-size: 14px;
                    color: var(--toss-placeholder);
                    text-decoration-thickness: 1.5px;
                    text-decoration-color: rgba(156, 163, 175, 0.5);
                    margin-right: 8px;
                }
                .tosspay-sm-right del .woocommerce-Price-amount {
                    color: var(--toss-placeholder) !important;
                    font-size: 14px !important;
                    font-weight: 500 !important;
                }


                .tosspay-sm-suffix {
                    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
                    display: inline-block;
                    width: 28px;
                    font-size: 14px;
                    font-weight: 600;
                    color: var(--toss-gray-700);
                    text-align: left;
                    letter-spacing: 0.2px;
                }

                @media (max-width: 768px) {
                    .tosspay-sm {
                        margin-left: 0px;
                        margin-right: 0px;
                    }
                    .tosspay-sm-row {
                        flex-direction: column;
                        align-items: flex-start;
                        padding: 20px 0px;
                        gap: 14px;
                    }
                    .tosspay-sm-left {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 10px;
                        width: 100%;
                    }
                    .tosspay-sm-right {
                        align-self: flex-end;
                    }
                    .tosspay-sm-price .woocommerce-Price-amount {
                        font-size: 24px !important;
                    }
                }

/* === 오더범프 가격 중복 방지 === */
.tosspay-ob-name + .woocommerce-Price-amount {
    display: none !important;
}


/* =============================================================================
   결제수단 라벨
   ============================================================================= */
.payment_method_tosspay label,
.payment_method_tosspay_billing label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment_method_tosspay img,
.payment_method_tosspay_billing img {
    max-height: 24px;
    width: auto;
}

/* 정기결제 설명 박스 */
.payment_box.payment_method_tosspay_billing {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%) !important;
    border: 1px solid #d0e3ff !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-top: 12px !important;
}

.payment_box.payment_method_tosspay_billing::before {
    display: none !important;
}

.payment_box.payment_method_tosspay_billing p {
    margin: 0;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment_box.payment_method_tosspay_billing p::before {
    content: "💳";
    font-size: 20px;
}