/* banggeul-assets/pay/pay.css — 랜딩과 같은 토큰 */
:root{--blue:#0062FF;--blue-deep:#0044B4;--blue-bg:#EDF5FF;--ink:#151A23;--gray:#6B7280;--line:#E7EAF0;--bg:#F7F9FC;--danger:#D92D20;
  --app-bg:var(--blue-bg);--app-ink:var(--blue-deep);--app-line:#C9DDFF;--phone-bg:#FFF6E6;--phone-ink:#8A4B00;--phone-line:#F5D9A8;
  --font:"Pretendard Variable","Pretendard",-apple-system,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
[hidden]{display:none!important}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-bottom:1px solid var(--line)}
.brand{font-weight:800;color:var(--blue);text-decoration:none;font-size:1.1rem}
.wrap{max-width:560px;margin:0 auto;padding:24px 20px 48px}
h1{font-size:1.5rem;margin:8px 0 12px;letter-spacing:-.03em}
h2{font-size:1.05rem;margin:0 0 10px}
.lead{margin:0 0 20px;color:var(--gray)}
.muted{color:var(--gray)}.small{font-size:.88rem}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin:0 0 14px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:48px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn.block{width:100%;margin-top:10px}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:disabled{background:#B9C7E0;border-color:#B9C7E0;cursor:not-allowed}
.btn.danger{color:var(--danger);border-color:#F3C4C0}
.btn.naver{background:#03C75A;border-color:#03C75A;color:#fff;width:100%}
.btn.kakao{background:#FEE500;border-color:#FEE500;color:rgba(0,0,0,.85);width:100%}
.link{background:none;border:0;color:var(--gray);font:inherit;cursor:pointer}
#view-login{width:100%;max-width:400px;margin-inline:auto}
.social{display:grid;gap:12px;margin-bottom:16px}
.social .btn{min-height:40px;height:40px;border-radius:4px}
.google-slot{display:flex;justify-content:center;width:100%;min-height:40px}
.email-login summary{cursor:pointer;color:var(--gray);margin:8px 0}
form label{display:block;margin:10px 0;font-size:.92rem}
form input{display:block;width:100%;min-height:46px;margin-top:4px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.choices{display:grid;gap:8px}
.choice{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.choice input{width:18px;height:18px;accent-color:var(--blue)}
.choice .price{margin-left:auto;font-weight:700}
.notice ul{margin:0 0 12px;padding-left:18px}
.notice li{margin:6px 0}
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:700;margin:6px 0}
.consent input{width:20px;height:20px;margin-top:3px;accent-color:var(--blue)}
.banner{background:#FEF3F2;color:#B42318;border:1px solid #FECDCA;border-radius:12px;padding:12px 14px}
.banner.ok{background:var(--blue-bg);color:var(--blue-deep);border-color:#C9DDFF}
.status{font-weight:800;font-size:1.1rem;margin:0 0 8px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px}
.facts dt{color:var(--gray)}.facts dd{margin:0;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.history{width:100%;border-collapse:collapse;font-size:.92rem}
.history th,.history td{text-align:left;padding:8px 4px;border-bottom:1px solid var(--line)}
.foot{text-align:center;color:var(--gray);font-size:.82rem;padding:24px 20px 40px}
dialog{border:0;border-radius:16px;padding:20px;max-width:420px;width:calc(100% - 40px)}
dialog::backdrop{background:rgba(21,26,35,.45)}
/* 결제 2차 — 가치 요약·쉬어가기·해지 화면·환불 요청 */
.values{list-style:none;padding:14px 18px;background:var(--blue-bg);border-color:#C9DDFF}
.values li{position:relative;padding-left:22px;margin:4px 0;font-weight:600;color:var(--blue-deep)}
.values li::before{content:"✓";position:absolute;left:0;color:var(--blue)}
.pause-box{background:var(--blue-bg);border-radius:12px;padding:12px 14px;margin:0 0 14px}
.pause-box p{margin:0 0 8px}
.pause-offer{background:var(--blue-bg);border-color:#C9DDFF}
.pause-offer h3{font-size:1rem;margin:0 0 6px}
.pause-offer p{margin:0}
.reasons{border:0;padding:0;margin:14px 0}
.reasons legend{font-weight:700;margin-bottom:8px}
textarea{display:block;width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;resize:vertical}
.actions.even{display:grid;grid-template-columns:1fr 1fr}
.history .btn{min-height:36px;padding:0 10px;font-size:.85rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
dialog{max-height:calc(100% - 40px);overflow:auto}
/* 요금제 카드(9/18 2차) — 부모님별 방식·포함 내용·금액. 360px에서도 줄바꿈으로 읽히게 한다. */
.family-modes{margin:0 0 4px}
.family-modes-label{margin:0 0 6px;font-weight:700;font-size:.92rem}
.mode-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mode-chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;border:1px solid;font-size:.9rem;font-weight:600;overflow-wrap:anywhere;max-width:100%}
.mode-chip.mode-app{background:var(--app-bg);color:var(--app-ink);border-color:var(--app-line)}
.mode-chip.mode-phone{background:var(--phone-bg);color:var(--phone-ink);border-color:var(--phone-line)}
.plan-summary{margin:0;font-size:1rem;color:var(--ink);overflow-wrap:anywhere}
.plan-summary strong,.plan-lines strong{font-weight:800;color:var(--ink)}
.plan-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.plan-head{display:flex;align-items:center;gap:10px;min-height:28px;cursor:pointer}
.plan-head input{width:18px;height:18px;accent-color:var(--blue)}
.plan-head .price{margin-left:auto;font-weight:700}
.plan-name{font-weight:700}
.plan-card .price{white-space:nowrap}
.plan-lines{margin:0;padding-left:18px;font-size:.88rem;color:var(--gray);overflow-wrap:anywhere}
.plan-lines li{margin:2px 0}
.plan-note{margin:2px 0 0;font-size:.85rem;color:var(--blue-deep)}
.plan-card:has(input:checked){border-color:var(--blue);background:var(--blue-bg)}
.plan-card:has(input:disabled){background:#FAFBFC}
.plan-card:has(input:disabled) .plan-head{cursor:not-allowed}
#msg-plans{margin-top:16px}
.price-table summary{cursor:pointer;color:var(--gray);margin:4px 0}
.price-table h3{font-size:.95rem;margin:10px 0 4px}
/* 단계 선택(9/19) — ① 이용 방식 → ② 몇 분·누구 → ③ 요금제. 40~60대 보호자: 글자 16px 이상, 누르는 곳 52px 이상, 360px에서 가로 스크롤 없음. */
.step{display:block;min-width:0;margin:0 0 14px}
.step>legend{display:flex;align-items:center;gap:10px;float:left;width:100%;padding:0;margin:0 0 12px;font-size:1.15rem;font-weight:800}
.step>legend+*{clear:both}
.step-no{display:inline-flex;justify-content:center;align-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-size:1rem}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.step .choice{min-height:56px;padding:8px 12px;gap:8px;font-size:1.05rem;font-weight:700;min-width:0;line-height:1.35}
.step .choice input{flex:none;width:22px;height:22px}
.choice-text{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.step .choice:has(input:checked){border-color:var(--blue);background:var(--blue-bg);color:var(--blue-deep)}
.step .choice:has(input:disabled){background:#FAFBFC;color:var(--gray);cursor:not-allowed}
.step .choice:has(input:focus-visible),.plan-head:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.step-link{display:inline-flex;align-items:center;min-height:48px;margin:6px 0 0;padding:0;color:var(--blue);font-size:1rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.step-text{margin:10px 0 0;font-size:1rem}
.step-hint{margin:0 0 10px;font-size:1rem;color:var(--gray)}
.step-note{margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px solid var(--phone-line);background:var(--phone-bg);color:var(--phone-ink);font-size:1rem;overflow-wrap:anywhere}
.step-error{margin:10px 0 0;font-size:1rem;font-weight:700;color:var(--danger)}
.step-error:empty{display:none}
.per-parent{display:grid;gap:12px;margin-top:10px}
.per-row{min-width:0;margin:0;padding:8px 10px 10px;border:1px solid var(--line);border-radius:12px}
.per-row>legend{padding:0 6px;font-size:1rem;font-weight:700;overflow-wrap:anywhere;max-width:100%}
.who{min-width:0;margin:16px 0 0;padding:0;border:0}
.who>legend{padding:0;margin:0 0 8px;font-size:1.05rem;font-weight:800}
.step .plan-card{padding:14px}
.step .plan-head,#mg-plans .plan-head{min-height:48px}
.step .plan-head input,#mg-plans .plan-head input{flex:none;width:22px;height:22px}
.step .plan-name,.step .plan-head .price{font-size:1.1rem}
.step .plan-note{font-size:1rem}
#mg-selection-card .btn{min-height:52px}
#mg-steps{margin-top:12px}
#mg-steps .step{border-color:var(--line);padding:14px}