:root{--bg:#f2f4f6;--surface:#fff;--surface-soft:#f7f8fa;--line:#e9ecef;--text:#191f28;--muted:#8b95a1;--blue:#3182f6;--blue-hover:#1b64da;--blue-soft:#e8f3ff;--red:#f04452;--red-soft:#fff0f1;--green:#00a86b;--green-soft:#eafaf3;--radius:24px;--shadow:0 8px 30px rgba(0,0,0,.04)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{min-height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.app-shell{width:min(100%,720px);min-height:100dvh;margin:0 auto;padding:0 20px 36px;display:flex;flex-direction:column}.topbar{height:72px;justify-content:space-between}.brand{gap:10px;color:var(--text);font-size:17px;font-weight:800}.brand-logo{width:36px;height:36px;border-radius:12px;object-fit:cover;display:block;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05)}.hero{padding:38px 6px 26px}.eyebrow{margin:0 0 10px;color:var(--blue);font-size:12px;font-weight:850;letter-spacing:.08em}.hero h1{margin:0;font-size:clamp(32px,7vw,46px);line-height:1.18;letter-spacing:-.05em;font-weight:850}.stack{display:grid;gap:16px}.panel{background:var(--surface);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.panel-title h2{margin:0;font-size:20px;letter-spacing:-.035em}.panel-title p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.method-card{min-height:92px;padding:18px;border:0!important;border-radius:20px!important;background:var(--surface-soft)!important;text-align:left;cursor:pointer;transition:.16s;display:flex;align-items:center;gap:14px;color:var(--text)!important;box-shadow:none!important}.method-card:hover{background:#eef1f4!important}.method-card.active{background:var(--blue-soft)!important;box-shadow:inset 0 0 0 1.5px #9ac6ff!important}.method-card strong{display:block;font-size:16px;letter-spacing:-.02em}.method-card .method-copy span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}.method-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;color:#6b7684}.method-icon svg{width:28px;height:28px}.method-card.active .method-icon{color:var(--blue)}.form{display:grid;gap:18px}.field{display:grid;gap:9px}.field label{font-size:14px;font-weight:750}.input-wrap{position:relative}.field input{width:100%;height:56px;border:0;outline:0;border-radius:16px;background:var(--surface-soft);padding:0 16px;color:var(--text);font-size:16px;transition:box-shadow .18s,background .18s}.field input:focus{background:#fff;box-shadow:0 0 0 2px var(--blue)}.field input::placeholder{color:#b0b8c1}.input-suffix{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;font-weight:700;pointer-events:none}.notice{padding:14px 16px;border-radius:16px;background:var(--surface-soft);color:var(--muted);font-size:13px;line-height:1.6}.notice.blue{background:var(--blue-soft);color:#285c9d}.notice.red{background:var(--red-soft);color:#9d3038}.primary-button,.secondary-button,.danger-button{min-height:56px;border:0!important;border-radius:16px!important;padding:0 18px;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:.15s}.primary-button{background:var(--blue)!important;color:#fff!important}.primary-button:hover{background:var(--blue-hover)!important}.secondary-button{background:var(--surface-soft)!important;color:#4e5968!important}.secondary-button:hover{background:#eef1f4!important}.danger-button{background:var(--red-soft)!important;color:var(--red)!important}.danger-button:hover{background:#ffe3e6!important}.primary-button:active,.secondary-button:active,.danger-button:active,.method-card:active{transform:scale(.985)}button:disabled{opacity:.55;cursor:not-allowed}.summary{display:grid;gap:1px;background:var(--line);border-radius:18px;overflow:hidden}.summary-row{min-height:54px;background:var(--surface-soft);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px}.summary-row span{color:var(--muted);font-size:13px}.summary-row strong{font-size:14px;text-align:right;word-break:break-all}.amount-hero{padding:22px 0 8px;text-align:center}.amount-hero .state-icon{width:62px;height:62px;border-radius:22px;margin:0 auto 18px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:28px;font-weight:900}.amount-hero.success .state-icon{background:var(--green-soft);color:var(--green)}.amount-hero.cancel .state-icon,.amount-hero.error .state-icon{background:var(--red-soft);color:var(--red)}.amount-hero h1{margin:0;font-size:27px;letter-spacing:-.045em}.amount-hero .amount{margin:12px 0 0;font-size:34px;font-weight:850;letter-spacing:-.04em}.amount-hero p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.bank-card{padding:18px;border-radius:18px;background:var(--surface-soft);display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}.bank-card-icon{width:40px;height:40px;color:var(--blue);display:grid;place-items:center}.bank-card-icon svg{width:28px;height:28px}.bank-card-content{min-width:0}.bank-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0}.bank-line span{color:var(--muted);font-size:13px}.bank-line strong{font-size:15px;word-break:break-all;text-align:right}.footer{padding:30px 0 4px;text-align:center;color:#b0b8c1;font-size:12px;line-height:1.7}.footer a{color:inherit;text-decoration:none}.footer a:hover{color:#6b7684}.pay-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px}.pay-modal[hidden]{display:none}.pay-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(25,31,40,.42);backdrop-filter:blur(4px)}.pay-modal-card{position:relative;width:min(100%,370px);padding:26px;background:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center;animation:modal-in .18s ease-out}.pay-modal-icon{width:48px;height:48px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}.pay-modal-icon[data-icon="warning"]{background:var(--red-soft);color:var(--red)}.pay-modal-icon[data-icon="success"]{background:var(--green-soft);color:var(--green)}.pay-modal-icon svg{width:25px;height:25px}.pay-modal-card h2{margin:0;font-size:20px;letter-spacing:-.035em}.pay-modal-card p{margin:10px 0 22px;color:var(--muted);font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:keep-all}.pay-modal-actions{display:flex;gap:8px}.pay-modal-actions button{flex:1;height:48px;border:0;border-radius:14px;font-size:14px;font-weight:800}.pay-modal-confirm{background:var(--blue)!important;color:#fff!important}.pay-modal-cancel{background:#f2f4f6!important;color:#4e5968!important}.pay-modal-open{overflow:hidden}.button-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:button-spin .7s linear infinite}.secondary-button .button-spinner,.danger-button .button-spinner{border-color:rgba(78,89,104,.25);border-top-color:currentColor}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px!important}.summary-value-with-action{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.summary-value-with-action strong{min-width:0}.copy-icon-button{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:11px;background:#fff;color:#8b95a1;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,transform .15s}.copy-icon-button:hover{background:#eef1f4;color:#4e5968}.copy-icon-button:active{transform:scale(.94)}.copy-icon-button:disabled{opacity:1;cursor:default}.copy-icon-button svg{width:18px;height:18px}.copy-icon-button.copy-success{background:var(--green-soft);color:var(--green)}.copy-icon-button.copy-fail{background:var(--red-soft);color:var(--red)}button[aria-busy="true"]{pointer-events:none}.primary-button:disabled:hover{background:var(--blue)!important}.secondary-button:disabled:hover{background:var(--surface-soft)!important}.danger-button:disabled:hover{background:var(--red-soft)!important}button:disabled:active{transform:none}.button-leading-icon{width:20px;height:20px;flex:0 0 20px;display:inline-grid;place-items:center}.button-leading-icon svg{width:20px;height:20px;display:block}.payment-status-check{margin:16px auto 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;line-height:1.4}.status-state-icon{width:18px;height:18px;display:inline-grid;place-items:center;color:var(--blue);flex:0 0 18px}.status-state-icon svg{width:100%;height:100%;display:block}.payment-status-check[data-payment-status="completed"]{color:var(--green)}.payment-status-check[data-payment-status="canceled"],.payment-status-check[data-payment-status="failed"]{color:var(--red)}.payment-status-check[data-payment-status="completed"] .status-state-icon{color:var(--green)}.payment-status-check[data-payment-status="canceled"] .status-state-icon,.payment-status-check[data-payment-status="failed"] .status-state-icon{color:var(--red)}.btn.is-disabled{pointer-events:none;opacity:.55}.pay-modal-icon[data-icon="fail"]{background:var(--red-soft);color:var(--red)}.pay-modal-icon[data-icon="card"]{background:var(--blue-soft);color:var(--blue)}.amount-hero .state-icon svg{width:30px;height:30px;display:block}.copy-icon-button .button-spinner{border-color:rgba(78,89,104,.25);border-top-color:currentColor}.secondary-button.button-feedback-success{background:var(--green-soft)!important;color:var(--green)!important}.secondary-button.button-feedback-fail{background:var(--red-soft)!important;color:var(--red)!important}.secondary-button.button-feedback-success:disabled,.secondary-button.button-feedback-fail:disabled{opacity:1}.secondary-button.button-feedback-success:hover{background:var(--green-soft)!important}.secondary-button.button-feedback-fail:hover{background:var(--red-soft)!important}@media(max-width:520px){.app-shell{padding-left:16px;padding-right:16px}.hero{padding-top:28px}.panel{padding:22px}.method-grid{grid-template-columns:1fr}.summary-row{align-items:flex-start;flex-direction:column;gap:5px}.summary-row strong{text-align:left}.topbar{height:64px}.summary-value-with-action{width:100%;justify-content:space-between}.summary-value-with-action strong{max-width:calc(100% - 44px)}}@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes button-spin{to{transform:rotate(360deg)}}
.method-range{display:flex!important;flex-direction:column;gap:2px;line-height:1.45}
.status-state-icon.is-spinning{animation:none!important;position:relative}
.status-state-icon.is-spinning svg{visibility:hidden}
.status-state-icon.is-spinning::before{content:"";position:absolute;inset:1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;transform-origin:50% 50%;animation:status-spinner-fixed .9s linear infinite;will-change:transform}
@keyframes status-spinner-fixed{to{transform:rotate(360deg)}}
.referral-option{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.referral-toggle{width:100%;min-height:40px;padding:0!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--text)!important;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;box-shadow:none!important}
.referral-toggle:hover{background:transparent!important}
.referral-heading{display:inline-flex;align-items:center;gap:7px;min-width:0}
.referral-heading strong{font-size:14px;font-weight:750;letter-spacing:-.02em}
.referral-heading>span{font-size:12px;font-weight:650;color:var(--muted);background:var(--surface-soft);padding:3px 7px;border-radius:999px}
.referral-control{display:inline-flex;align-items:center;gap:3px;color:#6b7684;font-size:14px;font-weight:700;flex:0 0 auto}
.referral-toggle:hover .referral-control{color:var(--blue)}
.referral-toggle .referral-chevron{width:18px;height:18px;display:grid;place-items:center;transition:transform .18s ease}
.referral-toggle .referral-chevron svg{width:16px;height:16px;display:block}
.referral-toggle.is-open .referral-chevron{transform:rotate(180deg)}
.referral-fields{width:100%;padding-top:8px}
.referral-fields .input-wrap{width:100%}
.referral-fields input{width:100%;height:48px;border:0;outline:0;border-radius:14px;background:var(--surface-soft);padding:0 15px;color:var(--text);font-size:15px;transition:box-shadow .18s,background .18s}
.referral-fields input:focus{background:#fff;box-shadow:0 0 0 2px var(--blue)}
.referral-fields input::placeholder{color:#b0b8c1}
.referral-fields[hidden]{display:none!important}

.status-message{display:inline-flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left}
.status-api-warning{display:block;color:var(--red);font-size:12px;line-height:1.45}

.payment-guide{display:grid;gap:4px;word-break:keep-all}
.payment-guide strong{font-weight:800}