html,body { height:auto; }
.auth { display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:40px 20px; background:#fff; font-size:15px; }
.box { width:100%; max-width:400px; }
.auth-logo { display:block; width:150px; height:34px; margin:0 auto 30px; }
.entry h1 { margin:0 0 30px; text-align:center; font-weight:400; }
.entry h1 span { display:block; font-size:23px; line-height:1.4; letter-spacing:-.03em; }
.entry h1 b { display:block; margin-top:6px; font-size:25px; font-weight:700; line-height:1.4; letter-spacing:-.04em; }
h1.solo { margin:0 0 30px; font-size:24px; font-weight:700; line-height:1.4; letter-spacing:-.04em; text-align:center; }
.stack { display:flex; flex-direction:column; gap:10px; }
.ab { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:54px; border:1px solid transparent; border-radius:10px; font:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.02em; text-decoration:none; cursor:pointer; transition:filter .15s,background .15s; }
.ab:disabled { opacity:.55; cursor:default; }
.ab-primary { background:#1e88ee; color:#fff; }
.ab-primary:hover { background:#1673d6; }
.ab-line { border-color:#e2e4e8; background:#fff; color:#111; }
.ab-line:hover { background:#f8f8f8; }
.ab-naver { background:#03c75a; color:#fff; }
.ab-kakao { background:#fee500; color:#191600; }
.ab-naver:hover,.ab-kakao:hover { filter:brightness(.97); }
.ab-google { border-color:#e2e4e8; background:#fff; color:#111; }
.ab-google:hover { background:#f8f8f8; }
.ab > span { font-weight:500; }
.ab > span b { font-weight:700; }
.si { position:absolute; left:calc(50% - 76px); display:grid; place-items:center; width:20px; height:20px; }
.si svg { display:block; width:18px; height:18px; }
.ab:has(.si) > span { padding-left:28px; }
.or { display:flex; align-items:center; gap:12px; margin:22px 0; color:#80858c; font-size:12.5px; }
.or::before,.or::after { content:""; flex:1; height:1px; background:#e2e4e8; }
.help { display:flex; align-items:center; justify-content:center; gap:14px; }
.help.inline { margin-top:26px; }
.help p { margin:0; color:#80858c; font-size:13px; line-height:1.6; }
.help-btn { flex:none; height:30px; padding:0 13px; border:1px solid #cfd2d7; border-radius:999px; background:#fff; color:#111; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.help-btn:hover { background:#f8f8f8; }
.fl { display:block; margin-bottom:18px; }
.fl-t { display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:14px; font-weight:700; letter-spacing:-.02em; }
.fl-t svg { width:14px; height:14px; fill:#111; }
.fl small { display:block; margin-top:6px; color:#80858c; font-size:12.5px; line-height:1.5; }
.fl input { display:block; width:100%; height:52px; padding:0 14px; border:1px solid #e2e4e8; border-radius:10px; background:#fff; font:inherit; font-size:15px; outline:none; transition:border-color .15s,box-shadow .15s; }
.fl input::placeholder { color:#a8acb3; }
.fl input:focus { border-color:#1e88ee; box-shadow:0 0 0 3px rgba(30,136,238,.14); }
.pw { position:relative; display:block; }
.pw input { padding-right:46px; }
.eye { position:absolute; top:50%; right:10px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; background:none; color:#80858c; cursor:pointer; transform:translateY(-50%); }
.eye:hover,.eye[aria-pressed="true"] { color:#1e88ee; }
.eye svg { width:20px; height:20px; }
.links { display:flex; justify-content:center; margin-top:20px; font-size:13.5px; }
.links a { padding:0 16px; color:#5f6368; text-decoration:none; }
.links a + a { border-left:1px solid #cfd2d7; }
.links a:hover { color:#111; }
.rule { margin:28px 0 24px; border:0; border-top:1px solid #e2e4e8; }
.err { margin:0 0 14px; color:#c8262b; font-size:14px; }
.err.notice { padding:11px 14px; border-radius:10px; background:#fdeced; text-align:center; }
.ok { margin:0 0 14px; padding:11px 14px; border-radius:10px; background:#eaf6ee; color:#16803a; font-size:14px; }
.seg { display:flex; gap:2px; margin-bottom:24px; padding:3px; border-radius:10px; background:#f1f3f4; }
.seg a { flex:1; padding:9px 0; border-radius:8px; color:#80858c; font-size:14px; font-weight:600; text-align:center; text-decoration:none; }
.seg a.on { background:#fff; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.08); }
@media (max-width:420px) { .auth { align-items:flex-start; padding-top:32px; } .entry h1 span { font-size:20px; } .entry h1 b { font-size:22px; } h1.solo { font-size:21px; } .help { flex-wrap:wrap; text-align:center; } .links a { padding:0 10px; } }