/* login.html, account.html(ADR-0005). 색과 글꼴은 site.css의 값을 쓴다. */
.auth-page{max-width:480px;padding-top:48px;padding-bottom:80px;color:var(--ink-2);font-size:16px;line-height:1.6}
.auth-page [hidden]{display:none !important}
.auth-page .h2{margin-top:10px;color:var(--ink)}
.auth-note{margin:14px 0 28px}
.auth-card{background:var(--sheet);border:1.5px solid var(--ink);padding:clamp(20px,5vw,32px);display:grid;gap:20px}
.auth-card + .auth-card{margin-top:20px}
.auth-card h2{font-size:20px;line-height:1.3;color:var(--ink);margin:0}
.auth-card > p{margin:0}
/* 크레딧 충전(account.html#credit) */
.credit-card p{margin:0}
.credit-card h2{margin-bottom:14px}
.credit-balance-label{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.credit-balance{font-size:40px;line-height:1.1;font-weight:700;color:var(--ink);margin-top:4px !important}
.credit-pick{border:0;margin:0;padding:20px 0 0;border-top:1px dashed var(--line);min-width:0}
.credit-pick legend{float:left;width:100%;padding:0;margin-bottom:12px;font-weight:600;color:var(--ink)}
/* 금액 단추와 낼 금액은 가격 페이지와 같이 쓰므로 site.css에 있다. */
.credit-pick .credit-amounts{clear:both}
.credit-covers{margin-top:10px !important;font-size:14px;color:var(--ink-3)}
.credit-go{display:grid;gap:10px}
.credit-soon{font-size:14px;text-align:center;color:var(--ink-3)}
.credit-facts{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--ink-3)}
.credit-facts li::before{content:"✓ ";color:var(--ink)}
.credit-history{border-top:1px dashed var(--line);padding-top:16px;display:grid;gap:4px;font-size:14px}
.credit-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.auth-btn-full{width:100%;text-align:center}
.auth-page button:disabled{opacity:.6;cursor:default}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;background:#fff;border:1px solid rgba(29,42,68,.35);border-radius:2px;font-size:16px;font-weight:600;cursor:pointer}
.btn-google:hover:not(:disabled){border-color:var(--ink)}
.btn-google svg{width:18px;height:18px;flex:none}
.auth-or{display:flex;align-items:center;gap:12px;margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.auth-or::before,.auth-or::after{content:"";flex:1;border-top:1px dashed var(--line)}
.auth-form{display:grid;gap:18px}
.auth-form .field-label{margin-bottom:8px}
.auth-password-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.auth-password-head a{font-size:14px;color:var(--ink-3)}
.auth-error{font-size:15px;line-height:1.5;color:var(--red);border-left:2px solid var(--red);padding:2px 0 2px 12px;margin:0}
.auth-status{margin:0}
.auth-legal{font-size:13px;line-height:1.5;color:var(--ink-3);margin:0}
.auth-switch{font-size:15px;margin:20px 0 0;text-align:center}
.auth-facts{display:grid;gap:14px;margin:0}
.auth-facts div{display:grid;gap:2px}
.auth-facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.auth-facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.auth-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-plain{background:transparent;border:1.5px solid var(--ink);color:var(--ink);padding:10px 18px;font-size:14px;font-weight:600;border-radius:2px;cursor:pointer}
.btn-plain:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.auth-danger{border-top:1px dashed var(--line);padding-top:20px;display:grid;gap:12px}
.auth-danger p{margin:0}
.btn-danger{background:transparent;border:0;padding:0;font-size:14px;color:var(--red);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start}