/* 허봇스 결제 페이지 — 메인 홈페이지의 색·서체를 그대로 쓴다 */
@font-face{font-family:'Pretend';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/pretendard-400.woff2') format('woff2')}
@font-face{font-family:'Pretend';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/pretendard-500.woff2') format('woff2')}
@font-face{font-family:'Pretend';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/pretendard-700.woff2') format('woff2')}
@font-face{font-family:'Bahn';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/bahn-700.woff2') format('woff2')}
:root{
  color-scheme:dark;
  --ink:#0A0A0A; --ink-2:#111111; --ink-3:#171717; --bone:#F2F2F2; --bone-2:#BDBDBD; --warm:#8E8E8E;
  --line:#222222; --line-2:#2F2F2F; --brass:#4F86F7; --brass-lt:#EDEDED; --sage:#4F86F7; --bad:#E07A6B;
  --sans:"Pretend","Pretendard","Apple SD Gothic Neo",-apple-system,system-ui,sans-serif;
  --tech:"Bahn","Bahnschrift",var(--sans);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.7;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:var(--brass-lt)}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,4vw,40px);border-bottom:1px solid var(--line)}
.top .logo{font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--bone);text-decoration:none}
.top .logo small{font-family:var(--tech);font-size:9px;color:var(--brass);letter-spacing:.14em;margin-left:6px;vertical-align:2px}
.top .back{font-size:13.5px;color:var(--warm);text-decoration:none}
.top .back:hover{color:var(--brass-lt)}
main{max-width:560px;margin:0 auto;padding:clamp(24px,5vw,48px) clamp(18px,4vw,28px) 80px}
h1{font-size:clamp(22px,4vw,28px);line-height:1.35;letter-spacing:-.03em;margin:0 0 6px}
.sub{color:var(--warm);font-size:14px;margin:0 0 26px}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:16px}
.card h2{font-size:13px;letter-spacing:.02em;color:var(--warm);font-weight:700;margin:0 0 12px;text-transform:uppercase}
.prod{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.prod .n{font-weight:700;font-size:17px;line-height:1.4}
.prod .d{color:var(--bone-2);font-size:13.5px;margin-top:4px}
.prod .p{font-family:var(--tech);font-size:24px;color:var(--brass-lt);white-space:nowrap;line-height:1.2}
.prod .p small{font-family:var(--sans);font-size:12px;color:var(--warm);display:block;text-align:right;font-weight:500}
.seat{margin-top:12px;font-size:13px;color:var(--sage)}
.seat.full{color:var(--bad)}
label{display:block;font-size:13px;color:var(--bone-2);margin:12px 0 5px}
input[type=text],input[type=tel],input[type=email],input[type=password]{width:100%;background:var(--ink-3);border:1px solid var(--line-2);border-radius:9px;color:var(--bone);font:inherit;font-size:16px;padding:12px 14px;outline:none}
input:focus{border-color:var(--brass)}
input.err{border-color:var(--bad)}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--bone-2);margin-top:16px;line-height:1.55}
.agree input{margin-top:4px;accent-color:var(--brass)}
/* 10-14 — hidden 을 작성자 스타일이 이기면 로그인 전에 회색 결제 버튼이 떠 「고장났나」로 읽힌다 */
.btn[hidden],[hidden]{display:none!important}
.steps{margin:0 0 10px;color:var(--warm,#8E8E8E);font-size:14px}
.steps b{color:#F2F2F2}
.got{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:14.5px}
.got td{padding:8px 0;border-top:1px solid #222;vertical-align:top;line-height:1.6}
.got td:first-child{color:#8E8E8E;white-space:nowrap;width:5.5em;padding-right:12px}
.got ul{margin:0;padding-left:18px}
.got li{margin:1px 0}
.got .grp{color:#BDBDBD;font-weight:700;margin-top:4px}
.btn{display:block;width:100%;border:0;border-radius:10px;padding:16px;font:inherit;font-size:16.5px;font-weight:700;cursor:pointer;background:#F2F2F2;color:#0A0A0A;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:.15s}
.btn:hover{background:#FFFFFF}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.line{background:rgba(147,147,147,.06);color:var(--brass-lt);border:1px solid rgba(147,147,147,.55);box-shadow:none}
.msg{margin:12px 0 0;font-size:13.5px;color:var(--bad);min-height:1.4em}
.note{font-size:12.5px;color:var(--warm);margin-top:14px;line-height:1.6}
.refund{font-size:13.5px;color:var(--bone-2)}
.refund summary{cursor:pointer;color:var(--brass-lt);font-weight:700;font-size:13.5px}
.refund ul{margin:10px 0 0;padding-left:18px}
.refund li{margin:3px 0}
.legal{margin-top:34px;font-size:12px;color:var(--warm);line-height:1.7;border-top:1px solid var(--line);padding-top:16px}
.legal a{color:var(--warm)}
/* 완료 화면 */
.done-icon{width:54px;height:54px;border-radius:50%;background:rgba(79,134,247,.14);color:var(--sage);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px}
.done-icon.bad{background:rgba(224,122,107,.14);color:var(--bad)}
table.kv{width:100%;border-collapse:collapse;font-size:14.5px}
table.kv td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.kv td:first-child{color:var(--warm);width:92px;white-space:nowrap}
table.kv tr:last-child td{border-bottom:0}
.amt{font-family:var(--tech);color:var(--brass-lt);font-size:18px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--brass);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
#payment-method,#agreement{margin:0 -6px}