:root {
    --pay-primary:#1197d5;
    --pay-primary-dark:#087cad;
    --pay-text:#1f2933;
    --pay-muted:#6b7680;
    --pay-border:#dbe2e8;
    --pay-surface:#ffffff;
    --pay-background:#f3f7fa;
    --pay-danger:#c93030;
}

* { box-sizing:border-box; }

html, body { min-height:100%; }

body {
    margin:0;
    background:
        radial-gradient(circle at 18% 12%, rgba(17,151,213,.10), transparent 31%),
        linear-gradient(145deg, #f8fbfd 0%, var(--pay-background) 60%, #eaf3f8 100%);
    color:var(--pay-text);
    font-family:'Noto Sans KR', sans-serif;
}

button, input { font:inherit; }

.pay-page {
    display:flex;
    min-height:100vh;
    padding:48px 0 0;
    align-items:center;
    flex-direction:column;
}

.pay-card {
    width:100%;
    max-width:500px;
    margin:auto 20px;
    border:1px solid rgba(204,216,225,.9);
    border-radius:12px;
    background:var(--pay-surface);
    box-shadow:0 22px 55px rgba(42,72,91,.12);
    overflow:hidden;
}

.pay-card-header {
    position:relative;
    display:flex;
    padding:20px 32px;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #edf1f4;
}

.pay-logo img { display:block; width:142px; height:auto; }

.pay-heading { padding:34px 36px 23px; }

.pay-eyebrow {
    display:block;
    margin-bottom:8px;
    color:var(--pay-primary);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
}

.pay-heading h1,
.pay-result h1 { margin:0; font-size:26px; line-height:1.35; }

.pay-heading p,
.pay-result > p { margin:9px 0 0; color:var(--pay-muted); font-size:13px; line-height:1.7; }

.pay-alert {
    margin:0 36px 20px;
    padding:11px 13px;
    border:1px solid #f0caca;
    border-radius:5px;
    background:#fff3f3;
    color:var(--pay-danger);
    font-size:12px;
    line-height:1.55;
}

.pay-auth-form { padding:0 36px 34px; }

.pay-form-group { margin-bottom:19px; }

.pay-form-group label {
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:600;
}

.pay-form-group input {
    width:100%;
    height:46px;
    padding:0 13px;
    border:1px solid var(--pay-border);
    border-radius:5px;
    outline:none;
    color:var(--pay-text);
    background:#fff;
    font-size:14px;
    transition:border-color .15s, box-shadow .15s;
}

.pay-form-group input:focus {
    border-color:var(--pay-primary);
    box-shadow:0 0 0 3px rgba(17,151,213,.12);
}

.pay-form-group input::placeholder { color:#a6afb7; }

.pay-form-help { margin:6px 0 0; color:#89939b; font-size:11px; line-height:1.55; }

.pay-submit-button {
    width:100%;
    height:48px;
    border:0;
    border-radius:5px;
    background:var(--pay-primary);
    color:#fff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s, transform .15s;
}

.pay-submit-button:hover { background:var(--pay-primary-dark); }
.pay-submit-button:active { transform:translateY(1px); }
.pay-submit-button:disabled { background:#a8b5bd; cursor:not-allowed; }

.pay-security-note {
    padding:14px 20px;
    border-top:1px solid #edf1f4;
    background:#fafcfd;
    color:#7c8790;
    text-align:center;
    font-size:11px;
}

.pay-security-note span { margin-right:5px; color:#39a86b; font-size:8px; }

.pay-auth-success-layer {
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(19, 34, 44, .48);
    backdrop-filter:blur(2px);
}

.pay-auth-success-dialog {
    width:100%;
    max-width:390px;
    padding:31px 30px 27px;
    border:1px solid #dbe4e9;
    border-radius:10px;
    background:#fff;
    box-shadow:0 16px 45px rgba(18, 39, 52, .24);
    text-align:center;
}

.pay-auth-success-image { display:block; width:132px; height:132px; margin:0 auto 13px; object-fit:contain; }

.pay-auth-success-dialog h2 { margin:0; color:var(--pay-text); font-size:21px; line-height:1.45; }
.pay-auth-success-dialog p { margin:10px 0 23px; color:var(--pay-muted); font-size:13px; line-height:1.75; }
.pay-auth-success-dialog button {
    width:100%;
    height:44px;
    border:0;
    border-radius:5px;
    background:var(--pay-primary);
    color:#fff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.pay-auth-success-dialog button:hover { background:var(--pay-primary-dark); }
.pay-auth-success-dialog button:focus-visible { outline:3px solid rgba(17,151,213,.22); outline-offset:2px; }

.pay-result { padding:42px 36px 38px; text-align:center; }

.pay-result-icon {
    display:flex;
    width:52px;
    height:52px;
    margin:0 auto 17px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e7f7ed;
    color:#259d57;
    font-size:25px;
    font-weight:700;
}

.pay-result-error-icon { background:#fde9e9; color:#c93636; }
.pay-link-button { display:flex; width:100%; height:48px; margin-top:25px; align-items:center; justify-content:center; border-radius:5px; background:var(--pay-primary); color:#fff; font-size:14px; font-weight:700; text-decoration:none; }
.pay-link-button:hover { background:var(--pay-primary-dark); color:#fff; }

.pay-detail-card { width:calc(100% - 40px); max-width:1040px; }
.pay-detail-heading { padding:32px 36px 23px; border-bottom:1px solid #edf1f4; }
.pay-detail-heading h1 { margin:0; font-size:26px; line-height:1.35; }
.pay-detail-heading p { margin:9px 0 0; color:var(--pay-muted); font-size:13px; }
.pay-detail-content { padding:0 36px 36px; }
.pay-detail-section { padding:26px 0; border-bottom:1px solid #e7ecef; }
.pay-detail-section h2 { margin:0 0 15px; font-size:15px; }
.pay-detail-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); margin:0; border-top:1px solid #e1e6ea; border-left:1px solid #e1e6ea; }
.pay-detail-list div { display:grid; grid-template-columns:120px minmax(0, 1fr); min-height:43px; border-right:1px solid #e1e6ea; border-bottom:1px solid #e1e6ea; }
.pay-detail-list .wide { grid-column:1 / -1; }
.pay-detail-list dt, .pay-detail-list dd { margin:0; padding:11px 12px; font-size:12px; line-height:1.65; }
.pay-detail-list dt { background:#f7f9fa; color:#697680; font-weight:600; }
.pay-detail-list dd { color:#263139; font-weight:500; word-break:break-all; }
.pay-payment-type-badge { display:inline-flex; min-height:23px; padding:2px 9px; align-items:center; justify-content:center; border-radius:4px; font-size:11px; font-weight:700; line-height:1.4; }
.pay-payment-type-badge.one-time { background:#eee8fa; color:#67479a; }
.pay-payment-type-badge.subscription { background:#e5f4e9; color:#347848; }
.pay-item-table-wrap { width:100%; overflow:visible; }
.pay-item-table { width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; }
.pay-item-table col.number { width:46px; }
.pay-item-table col.name { width:140px; }
.pay-item-table col.standard { width:150px; }
.pay-item-table col.quantity { width:55px; }
.pay-item-table col.money { width:92px; }
.pay-item-table th,
.pay-item-table td { height:39px; padding:7px 6px; border:1px solid #e1e6ea; color:#39444c; text-align:center; font-size:11px; line-height:1.5; word-break:break-word; }
.pay-item-table thead th { background:#f5f7f9; color:#55616a; font-weight:700; }
.pay-item-table td.item-name { font-weight:600; }
.pay-item-table td.money { text-align:right; white-space:nowrap; }
.pay-item-table td.total { color:var(--pay-primary-dark); font-weight:700; }
.pay-item-table tfoot th,
.pay-item-table tfoot td { background:#eef8fc; font-weight:700; }
.pay-item-table tfoot th { text-align:right; }
.pay-item-table tfoot td { text-align:right; white-space:nowrap; }
.pay-amount-list { margin:0; }
.pay-amount-list div { display:flex; padding:10px 4px; align-items:center; justify-content:space-between; color:#66727b; font-size:13px; }
.pay-amount-list dt, .pay-amount-list dd { margin:0; }
.pay-amount-list .total { margin-top:7px; padding:16px 14px; border-radius:6px; background:#eef8fc; color:#17242d; font-size:16px; font-weight:700; }
.pay-amount-list .total dd { color:var(--pay-primary-dark); font-size:21px; }
.pay-detail-meta { display:flex; margin-top:12px; gap:7px; flex-wrap:wrap; }
.pay-detail-meta span { padding:5px 8px; border-radius:4px; background:#f1f4f6; color:#66737c; font-size:11px; }
.pay-agreement-section { border-bottom:0; }
.pay-agreement-row { display:flex; padding:10px 0; align-items:flex-start; gap:9px; color:#4e5b64; font-size:12px; line-height:1.65; cursor:pointer; }
.pay-agreement-row input { width:17px; height:17px; margin-top:2px; accent-color:var(--pay-primary); }
.pay-agreement-row strong { color:var(--pay-primary-dark); }
.pay-agreement-row a { color:#2c596e; font-weight:700; }
.pay-recurring-agreement { margin-top:8px; padding:9px 12px 11px; border:1px solid #cfe4ef; border-radius:6px; background:#f2f9fc; }
.pay-recurring-agreement .pay-agreement-row { padding:4px 0; color:#34444e; }
.pay-next-billing-date { margin:5px 0 0 26px; color:#64747e; font-size:12px; line-height:1.6; }
.pay-next-billing-date strong { color:var(--pay-primary-dark); }
.pay-payment-preparing { margin:8px 0 0; color:#8b969e; text-align:center; font-size:11px; }

.pay-verified-summary { margin:26px 0; border-top:1px solid #e7ecef; text-align:left; }
.pay-verified-summary div { display:grid; grid-template-columns:105px 1fr; padding:11px 2px; border-bottom:1px solid #e7ecef; font-size:12px; }
.pay-verified-summary dt { color:#7a858d; }
.pay-verified-summary dd { margin:0; color:#30383e; font-weight:600; word-break:break-all; }

.pay-footer { width:100%; margin-top:48px; padding:26px 20px 29px; border-top:1px solid #dce3e8; background:rgba(255,255,255,.82); color:#66747e; text-align:center; font-size:13px; line-height:1.8; }
.pay-footer-inner { width:100%; max-width:760px; margin:0 auto; }
.pay-footer p { margin:2px 0; }
.pay-footer a { color:#52616c; text-decoration:none; }
.pay-footer a:hover { text-decoration:underline; }
.pay-footer-links { display:flex; margin:0 -11px 14px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pay-footer-links a { position:relative; padding:0 11px; color:#3f4c55; }
.pay-footer-links a + a::before { position:absolute; left:0; color:#c4ccd2; content:'|'; }
.pay-footer-business p { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.pay-footer-business span { position:relative; padding:0 8px; }
.pay-footer-business strong + span { margin-left:8px; }
.pay-footer-business span + span::before { position:absolute; left:0; color:#cbd2d7; content:'·'; }
.pay-footer-copyright { margin-top:10px !important; color:#89959d; font-size:12px; }

@media (max-width:800px) {
    .pay-item-table-wrap { overflow-x:auto; }
    .pay-item-table { min-width:720px; }
}

@media (max-width:560px) {
    .pay-page { padding:20px 0 0; justify-content:flex-start; }
    .pay-card { width:calc(100% - 28px); margin:6vh 14px 0; border-radius:9px; }
    .pay-card-header { padding:20px 22px; }
    .pay-logo img { width:130px; }
    .pay-heading { padding:29px 24px 20px; }
    .pay-heading h1, .pay-result h1 { font-size:23px; }
    .pay-auth-form { padding:0 24px 28px; }
    .pay-alert { margin:0 24px 18px; }
    .pay-auth-success-dialog { max-width:340px; padding:27px 23px 23px; }
    .pay-auth-success-image { width:116px; height:116px; }
    .pay-auth-success-dialog h2 { font-size:20px; }
    .pay-result { padding:35px 24px 31px; }
    .pay-detail-heading { padding:28px 24px 20px; }
    .pay-detail-heading h1 { font-size:23px; }
    .pay-detail-content { padding:0 24px 28px; }
    .pay-detail-list { grid-template-columns:1fr; }
    .pay-detail-list .wide { grid-column:auto; }
    .pay-detail-list div { grid-template-columns:105px minmax(0, 1fr); }
    .pay-amount-list .total dd { font-size:18px; }
    .pay-footer { margin-top:38px; padding:20px 20px 23px; }
    .pay-footer-business p { display:block; }
    .pay-footer-business span { display:inline; padding:0 4px; }
    .pay-footer-business span + span::before { position:static; margin-right:7px; }
}