/* ===== 앤스넥스 계정 화면 공용 (2026-09-24) =====
   login · signup · reset · verify · email-change · submit · 404 가 쓴다.
   머리·꼬리는 랜딩과 같다: site.css(공용 헤더·푸터) + 앤스넥스 두 번째 줄(.ax-bar).
   본문 부품·색·다크 토큰은 shell.css(앱 공용 부품)를 그대로 쓰고, 여기엔 배치만 둔다.
   불러오는 순서: /site.css → /shell.css → /auth.css */

/* shell.css 는 앱 좌측 레일 자리(208px)를 비운다. 계정 화면엔 레일이 없다 */
body.auth{padding-left:0;min-height:100dvh;display:flex;flex-direction:column;font-family:var(--font)}
body.auth .site-foot{border-top:1px solid var(--line-soft)}

/* 앤스넥스 바 — 랜딩(index.html)과 같은 모양. 바탕·높이는 site.css .site-local */
.ax-bar .site-wrap{position:relative}
.ax-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.ax-logo img{height:20px;width:auto}
.ax-logo .ax-sub{font-size:12px;font-weight:400;color:#f5f5f7;opacity:.6;margin-left:2px}
.ax-bar .menu{display:flex;gap:22px;margin-left:12px}
.ax-bar .menu a{font-size:12px;line-height:1;color:#f5f5f7;opacity:.8;padding:20px 0;text-decoration:none}
.ax-bar .menu a:hover{opacity:1}
@media (max-width:900px){ .ax-bar .menu{display:none} }
@media (max-width:420px){ .ax-logo .ax-sub{display:none} }

/* 본문 */
.auth-main{flex:1;padding:48px 16px 72px}
.auth-wrap{max-width:400px;margin:0 auto}
.auth-wrap.wide{max-width:560px}
.auth-wrap.xwide{max-width:640px}
.auth-wrap.center{text-align:center}
.auth-head{margin:0 0 20px}
.auth-head h1{font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:1.3;margin:0 0 6px;color:var(--ink)}
.auth-head p{margin:0;font-size:14px;color:var(--ink-2)}
.auth-main a{color:var(--link);text-decoration:none}
.auth-main a:hover{text-decoration:underline}
.auth-main a.btn{color:var(--ink);text-decoration:none}
.auth-main a.btn.pri{color:#fff}
:root[data-theme="dark"] .auth-main a.btn.pri{color:#0E1520}

/* 폼 카드 : shell .card 에 안쪽 여백만 준다 */
.auth-card{padding:22px 22px 24px}
.auth-card+.auth-card{margin-top:12px}
.auth-card label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:14px 0 6px}
.auth-card label:first-child,.auth-card .first{margin-top:0}
.auth-card :is(input[type=text],input[type=email],input[type=password],input[type=tel],select){
  width:100%;height:34px;font-size:13.5px}
.btn.full{width:100%;margin-top:18px}
.hint{margin:5px 0 0;font-size:12px;line-height:1.55;color:var(--ink-2)}
.hint.ok{color:var(--auto)}
.hint.bad{color:var(--no)}

/* 결과 안내 : JS 가 'msg s|e' 또는 'msg ok|err' 를 붙인다. 모양은 shell .notice */
.msg{display:none;margin-top:14px;padding:11px 14px;border-radius:var(--r);font-size:12.5px;line-height:1.6}
.msg.s,.msg.ok{display:block;background:var(--auto-bg);color:var(--auto)}
.msg.e,.msg.err{display:block;background:var(--no-bg);color:var(--no)}

.auth-sep{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);text-align:center;font-size:13px;color:var(--ink-2)}
.auth-note{margin-top:16px;text-align:center;font-size:12.5px;color:var(--ink-2)}

/* 아이폰은 16px 미만 입력칸에 초점이 가면 화면을 확대한다 */
@media (max-width:600px){
  .auth-main{padding:32px 16px 56px}
  .auth-card :is(input[type=text],input[type=email],input[type=password],input[type=tel],select){font-size:16px}
  .auth-card{padding:18px 16px 20px}
}

/* 랜딩처럼 스크롤바 자리를 따로 비우지 않는다(헤더가 화면 끝까지 닿게). shell.css 의 앱용 규칙을 여기서만 되돌린다 */
html:has(body.auth){overflow-y:auto;scrollbar-gutter:auto}