/* 마이페이보릿 수강료 결제 — 아카데미 브랜드, 탈-AI */
@font-face {
  font-family: "Pretendard"; font-weight: 45 920; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
}
:root {
  --navy:#0c2a54; --navy-2:#08203f; --green:#1b7a45; --green-d:#12592f;
  --gold:#d7a93a; --gold-hi:#f0cd6c; --gold-d:#a87c1f;
  --ivory:#f5f2ea; --ivory-2:#ece7da; --paper:#fffdf8; --ink:#14130f; --ink-soft:#5a564d; --line:#ddd6c6;
  --disp:"Anton","Pretendard",system-ui,sans-serif; --body:"Pretendard",system-ui,sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:var(--body); color:var(--ink); line-height:1.65; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:break-word;
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 60%, #061a35 100%); min-height:100vh; }
a { color:inherit; }
::selection { background:var(--gold); color:var(--navy); }

.wrap { max-width:560px; margin:0 auto; padding:clamp(28px,6vw,64px) 20px 60px; }
.pay-top { display:flex; align-items:center; gap:13px; margin-bottom:24px; }
.pay-top img { width:46px; height:46px; }
.pay-top b { font-family:var(--disp); color:#fff; font-size:20px; display:block; line-height:1; letter-spacing:.01em; }
.pay-top span { font-size:12.5px; color:var(--gold-hi); letter-spacing:.05em; }
.pay-top a { margin-left:auto; font-size:12.5px; color:rgba(245,242,234,.7); }
.pay-top a:hover { color:var(--gold-hi); }

.card { background:var(--paper); border:1px solid rgba(245,242,234,.12); border-radius:7px; padding:clamp(22px,4vw,34px); }
.card h1 { font-family:var(--disp); font-weight:400; font-size:clamp(24px,4vw,34px); color:var(--navy); margin:0 0 4px; letter-spacing:.005em; }
.card .sub { color:var(--ink-soft); font-size:14px; margin:0 0 22px; }

.field { display:grid; gap:7px; margin-bottom:16px; }
.field > span { font-size:13px; font-weight:600; color:var(--ink-soft); }
.field i { color:var(--gold-d); font-style:normal; }
.field input, .field select { font:inherit; font-size:15px; padding:13px 14px; border:1px solid var(--line); border-radius:4px; background:#fff; width:100%; }
.field input:focus, .field select:focus { outline:none; border-color:var(--gold-d); }

.amount-box { background:var(--navy); border-radius:5px; padding:18px 20px; margin:6px 0 20px; display:flex; align-items:baseline; justify-content:space-between; }
.amount-box .lbl { color:var(--gold-hi); font-size:13px; font-weight:700; letter-spacing:.03em; }
.amount-box .amt { font-family:var(--disp); color:#fff; font-size:34px; line-height:1; }
.amount-box .amt small { font-family:var(--body); font-size:16px; font-weight:700; margin-left:2px; }

.methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.method { position:relative; cursor:pointer; }
.method input { position:absolute; opacity:0; }
.method span { display:block; text-align:center; padding:13px; border:1px solid var(--line); border-radius:4px; font-weight:700; font-size:14.5px; color:var(--ink-soft); transition:.18s; }
.method input:checked + span { border-color:var(--navy); background:var(--navy); color:#fff; }

.agree { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-soft); margin-bottom:20px; }
.agree input { margin-top:3px; }
.agree a { color:var(--green-d); text-decoration:underline; text-underline-offset:2px; }

.pay-btn { width:100%; font-family:inherit; font-weight:800; font-size:17px; color:var(--navy); background:var(--gold);
  border:0; padding:16px; border-radius:4px; cursor:pointer; transition:background .2s, transform .15s; }
.pay-btn:hover { background:var(--gold-hi); }
.pay-btn:active { transform:translateY(1px); }
.pay-btn:disabled { opacity:.55; cursor:default; }

.note { margin-top:16px; font-size:12px; color:var(--ink-soft); text-align:center; line-height:1.6; }
.secure { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; color:rgba(245,242,234,.6); font-size:12px; }

/* result (success/fail) */
.result { text-align:center; }
.result .icon { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; margin:6px auto 18px; font-size:38px; }
.result .icon.ok { background:var(--green); color:#fff; }
.result .icon.no { background:#b3261e; color:#fff; }
.result h1 { margin:0 0 8px; }
.result .sub { margin-bottom:22px; }
.receipt { border:1px solid var(--line); border-radius:5px; text-align:left; overflow:hidden; margin-bottom:22px; }
.receipt .r { display:flex; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--ivory-2); font-size:14px; }
.receipt .r:last-child { border-bottom:0; }
.receipt .r .k { color:var(--ink-soft); }
.receipt .r .v { font-weight:700; }
.receipt .r.total { background:var(--ivory-2); }
.receipt .r.total .v { font-family:var(--disp); font-size:22px; color:var(--navy); font-weight:400; }
.btn-row { display:flex; gap:10px; }
.btn-line { flex:1; text-align:center; padding:14px; border-radius:4px; font-weight:700; font-size:15px; }
.btn-line.fill { background:var(--navy); color:#fff; }
.btn-line.ghost { border:1px solid var(--line); color:var(--navy); }
.spin { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-3px; margin-right:7px; }
@keyframes sp { to { transform:rotate(360deg); } }