/* =======================================================================
   paysample.css
======================================================================= */

/* Page */
.paysample-page {background-color: var(--color-bg-white);}

.paysample-page-header {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-80) 0 var(--spacing-64);
    border-bottom: 1px solid var(--color-border-light);
    background-color: #F5F8FC;
}
.paysample-page-header .container {position: relative; z-index: 1;}
.paysample-page-header .page-header-desc {line-height: var(--line-height-base);}

.paysample-section {padding: var(--spacing-48) 0 var(--section-padding-y);}

/* Tabs */
.paysample-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--spacing-8);
    width: min(100%, 560px);
    margin: 0 auto var(--spacing-80);
}
.paysample-tab {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--color-gray-30);
    border-radius: var(--radius-full);
    color: var(--color-gray-70);
    background-color: var(--color-gray-5);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.paysample-tab:hover {
    border-color: var(--color-primary-30);
    background-color: var(--color-bg-white);
    color: var(--color-primary);
}
.paysample-tab:focus-visible {outline: 0; box-shadow: 0 0 0 3px var(--color-primary-10);}
.paysample-tab.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: var(--font-weight-semibold);
}
.paysample-tab.is-active:hover {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
    color: var(--color-text-white);
}

/* Content */
.paysample-panels {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

.paysample-panel {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(260px, 380px) minmax(320px, 500px);
    align-items: center;
    justify-content: center;
    gap: var(--spacing-64);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.paysample-panel[hidden] {display: none;}

/* Visual */
.paysample-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    min-height: 260px;
    border-radius: 0;
    background-color: transparent;
    overflow: hidden;
    min-width: 0;
}
.paysample-visual::before,
.paysample-visual::after {
    content: "";
    position: absolute;
    border-radius: var(--radius-full);
    background-color: rgba(6, 74, 203, 0.08);
}
.paysample-visual::before {
    width: 170px;
    height: 170px;
    left: 10%;
    top: 14%;
}
.paysample-visual::after {
    width: 112px;
    height: 112px;
    right: 10%;
    bottom: 14%;
}

.paysample-visual-card,
.paysample-visual-message,
.paysample-visual-window {
    position: relative;
    z-index: 1;
    display: block;
    width: min(62%, 220px);
    aspect-ratio: 1.55 / 1;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-white);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}
.paysample-visual-card {background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-70) 100%);}
.paysample-visual-card::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 26px;
    left: var(--spacing-24);
    top: var(--spacing-24);
    border-radius: var(--radius-sm);
    background-color: var(--color-warning);
}
.paysample-visual-card::after {
    content: "";
    position: absolute;
    left: var(--spacing-24);
    right: var(--spacing-24);
    bottom: var(--spacing-32);
    height: 10px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 24px 0 rgba(255, 255, 255, 0.45);
}

.paysample-visual-message {aspect-ratio: 0.72 / 1; border: 1px solid var(--color-border-light);}
.paysample-visual-message::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-color: var(--color-warning);
}
.paysample-visual-message::after {
    content: "";
    position: absolute;
    left: var(--spacing-24);
    right: var(--spacing-24);
    top: 68px;
    height: 12px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-30);
    box-shadow: 0 28px 0 var(--color-gray-20), 0 56px 0 var(--color-gray-20), 0 104px 0 var(--color-primary);
}

.paysample-visual-window {aspect-ratio: 0.78 / 1; border: 1px solid var(--color-border-light);}
.paysample-visual-window::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-color: var(--color-gray-5);
}
.paysample-visual-window::after {
    content: "";
    position: absolute;
    left: var(--spacing-24);
    right: var(--spacing-24);
    top: 64px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-light);
    box-shadow: 0 54px 0 var(--color-gray-10), 0 108px 0 var(--color-gray-10), 0 162px 0 var(--color-primary);
}

.paysample-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.paysample-title {
    margin: 0 0 var(--spacing-20);
    color: var(--color-text-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}
.paysample-title-meta {
    display: inline-block;
    margin-left: var(--spacing-8);
    color: var(--color-text-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    vertical-align: middle;
}

.paysample-desc {
    max-width: 470px;
    margin: 0 0 var(--spacing-48);
    color: var(--color-text-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.paysample-cta {
    min-width: 220px;
    border-color: var(--color-bg-dark);
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
}
.paysample-cta:hover {
    border-color: var(--color-gray-90);
    background-color: var(--color-gray-90);
    color: var(--color-text-white);
}
.paysample-cta:active {
    border-color: var(--color-gray-100);
    background-color: var(--color-gray-100);
    color: var(--color-text-white);
}
.paysample-cta:focus-visible {
    outline: 2px solid var(--color-bg-dark);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--color-gray-20);
}

/* =======================================================================
   수기결제 체험 PC Modal
======================================================================= */

body.manual-pay-open {overflow: hidden;}

.manual-pay-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-24);
}
.manual-pay-modal[hidden] {display: none;}

.manual-pay-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.58);
}

.manual-pay-modal-frame {
    position: relative;
    z-index: 1;
    width: min(100%, 450px);
    height: min(700px, calc(100dvh - var(--spacing-48)));
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.manual-pay-modal-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: var(--color-bg-white);
}

/* Responsive */
@media (max-width: 1024px) {
    .paysample-page-header {text-align: center;}
    .paysample-section {padding: var(--spacing-48) 0 var(--section-padding-y-tablet);}
    .paysample-tabs {margin-bottom: var(--spacing-64);}
    .paysample-panel {
        grid-template-columns: minmax(240px, 320px) minmax(300px, 420px);
        gap: var(--spacing-48);
        padding: 0;
    }
    .paysample-visual {max-width: 320px; min-height: 240px;}
}

@media (max-width: 768px) {
    .manual-pay-modal {
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        height: 100dvh;
        padding: 0;
    }
    .manual-pay-modal-frame {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }
    .manual-pay-modal-iframe {
        display: block;
        width: 100%;
        height: 100%;
    }

    .paysample-section {padding: var(--spacing-40) 0 var(--section-padding-y-mobile);}
    .paysample-tabs {gap: var(--spacing-8); margin-bottom: var(--spacing-48);}
    .paysample-tab {
        min-height: 48px;
        padding: 0 15px;
        font-size: var(--font-size-ui);
    }
    .paysample-panel {
        grid-template-columns: 1fr;
        gap: var(--spacing-32);
        padding: 0;
    }
    .paysample-visual {max-width: 100%; min-height: 240px;}
    .paysample-content {align-items: center; text-align: center;}
    .paysample-title {font-size: var(--font-size-h4);}
    .paysample-title-meta {
        display: block;
        margin: var(--spacing-8) 0 0;
        font-size: var(--font-size-body);
    }
    .paysample-desc {max-width: none; font-size: var(--font-size-body);}
}

@media (max-width: 480px) {
    .paysample-tabs {width: 100%;}
    .paysample-tab {
        min-height: 48px;
        padding: 0 var(--spacing-8);
        font-size: var(--font-size-ui);
    }
    .paysample-panel {padding: 0;}
    .paysample-panel.is-active {
        width: calc(100% + var(--container-padding-x-mobile) * 2);
        margin-right: calc(-1 * var(--container-padding-x-mobile));
        margin-left: calc(-1 * var(--container-padding-x-mobile));
    }
    .paysample-visual {min-height: 208px;}
    .paysample-visual-card,
    .paysample-visual-message,
    .paysample-visual-window {
        width: min(66%, 190px);
    }
    .paysample-cta {width: 100%; min-width: 0;}
}

@media (max-width: 480px) {
    .footer-info-address p,
    .footer-policy,
    .footer-contact-email {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    .paysample-panel {padding: var(--spacing-20);}
    .paysample-tab {font-size: var(--font-size-ui);}
}

@media (prefers-reduced-motion: reduce) {
    .paysample-tab {transition: none;}
}