/* =========================================================================
   auth.css — 로그인 · 가입 화면과 헤더의 로그인 표시
   ========================================================================= */

/* ---------- 헤더 ---------- */
.hd-me{font-size:13.5px;font-weight:700;color:var(--ink);max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-out{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-soft);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.hd-out:hover{color:var(--ink)}
.hd-out:disabled{opacity:.5;cursor:default}
#authSlot{display:flex;align-items:center;gap:12px}

/* ---------- 로그인 · 가입 화면 ---------- */
main.auth{padding-top:var(--header-h);min-height:100vh;background:#fafafa}
.auth-in{max-width:440px;margin:0 auto;padding:64px 24px 90px}
.auth-card{background:#fff;border:1px solid var(--line);padding:38px 34px 34px}
.auth-card h1{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.auth-card .sub{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:28px}
.auth-card label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.auth-card input{width:100%;height:50px;border:1px solid var(--line);padding:0 14px;
  font-size:16px;font-family:inherit;background:#fff;margin-top:7px}
.auth-card input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.auth-card .row{display:flex;gap:10px}
.auth-card .row label{flex:1 1 0}
.auth-card .btn{width:100%;min-width:0;margin-top:8px}
.auth-msg{margin-top:16px;font-size:13.5px;line-height:1.65;min-height:20px}
.auth-msg.err{color:#b42318}
.auth-msg.ok{color:#1a7f4b}
.auth-alt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-soft);line-height:1.9}
.auth-alt a{text-decoration:underline;font-weight:600;color:var(--ink)}
.auth-hint{margin-top:8px;font-size:12.5px;color:#9aa3b0;line-height:1.6}
.auth-note{margin-top:20px;font-size:12.5px;color:#9aa3b0;line-height:1.7;text-align:center}
.auth-note b{color:var(--ink-soft)}
.auth-step{display:none}
.auth-step.on{display:block}

@media (max-width:520px){
  .auth-in{padding:36px 18px 70px}
  .auth-card{padding:28px 20px 26px}
  .auth-card .row{flex-direction:column;gap:0}
}

/* 비밀번호 표시/숨김 토글 + 확인 일치 표시 */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:48px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#9aa3b0;cursor:pointer;padding:0;border-radius:6px}
.pw-eye:hover{color:var(--ink,#111)}
.pw-eye:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pw-eye svg{display:block;pointer-events:none}
.auth-hint.ok{color:#1a9d5a}
.auth-hint.bad{color:#d64545}