@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root { --auth-bg:#f4f7fb; --auth-card:#fff; --auth-text:#17233c; --auth-muted:#758195; --auth-line:#dce3ec; --auth-primary:#0f172a; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body.auth-page { margin:0; background:var(--auth-bg); color:var(--auth-text); font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.auth-shell { min-height:100vh; padding:48px 20px; display:flex; align-items:center; justify-content:center; }
.auth-card { width:100%; max-width:460px; padding:31px 44px 28px; border:1px solid rgba(220,227,236,.85); border-radius:24px; background:var(--auth-card); box-shadow:0 18px 52px rgba(31,55,90,.10); }
.auth-logo { margin:0 0 20px; text-align:center; }
.auth-logo img { display:inline-block; width:auto; max-width:154px; height:auto; }
.auth-title { margin:0; font-size:30px; line-height:1.3; font-weight:700; letter-spacing:-.8px; text-align:center; }
.auth-title span { display:block; margin-top:6px; font-size:13px; font-weight:500; }
.auth-copy { margin:9px 0 28px; color:var(--auth-muted); font-size:15px; line-height:1.6; font-weight:400; text-align:center; }
.auth-notice { margin:0 0 18px; padding:13px 14px; border:1px solid #b9dfcc; border-radius:10px; background:#eefaf4; color:#246b49; font-size:14px; line-height:1.6; }
.auth-fields { display:grid; gap:12px; }
.auth-input { display:block; width:100%; height:54px; margin:0; padding:0 16px; border:1px solid var(--auth-line); border-radius:12px; outline:none; background:#fff; color:var(--auth-text); font:500 16px/54px Pretendard,sans-serif; box-shadow:none; }
.auth-input:focus { border-color:#65a7d5; box-shadow:0 0 0 4px rgba(40,127,192,.10); }
.auth-submit { display:block; width:100%; height:54px; margin:16px 0 0; padding:0; border:0; border-radius:12px; background:var(--auth-primary); color:#fff; cursor:pointer; font:700 17px/54px Pretendard,sans-serif; box-shadow:0 7px 18px rgba(15,23,42,.18); }
.auth-options { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:17px 0 0; color:#667385; font-size:13px; }
.auth-remember { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.auth-remember input { width:16px; height:16px; margin:0; accent-color:var(--auth-primary); }
.auth-link { color:#667385; text-decoration:none; }
.auth-link:hover { color:var(--auth-primary); }
.auth-divider { display:flex; align-items:center; gap:13px; margin:29px 0 20px; color:#929baa; font-size:12px; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:#e7ebf0; }
.auth-socials { display:flex; justify-content:center; gap:22px; }
.auth-social { display:inline-flex; width:48px; height:48px; flex:0 0 48px; align-items:center; justify-content:center; overflow:hidden; border:1px solid #e1e6ed; border-radius:50%; background:#fff; text-decoration:none; box-shadow:0 5px 14px rgba(31,55,90,.08); }
.auth-social img { display:block; width:48px; height:48px; object-fit:cover; border:0; }
.auth-join { margin:27px 0 0; color:var(--auth-muted); font-size:14px; text-align:center; }
.auth-join .auth-link { margin-left:7px; color:var(--auth-primary); font-weight:700; }
@media (max-width:560px) {
  .auth-shell { padding:24px 16px; align-items:flex-start; }
  .auth-card { max-width:430px; margin-top:5vh; padding:26px 22px 23px; border-radius:20px; }
  .auth-logo { margin-bottom:17px; }
  .auth-logo img { max-width:138px; }
  .auth-title { font-size:27px; }
  .auth-copy { margin-bottom:23px; font-size:14px; }
}