/* 재무 허브 정본 복제본 · 원본 finance-hub/public/design/login.css
   수정 금지: tools/sync-hub-design.mjs 로만 갱신한다. 급여 고유 규칙은 public/design/salary-*.css */
/* ══════════════════════════════════════════════════════════════════════
   로그인 — 이 앱에서 유일하게 사이드바가 없는 화면

   장식을 넣지 않는다. 대신 «여기 무엇이 들어 있는가» 를 적는다 —
   대부분의 사용자가 하루에 한 번 보는 유일한 문서이기 때문이다.
   ══════════════════════════════════════════════════════════════════════ */

.login{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,480px) minmax(0,1fr);
  align-items:center;
  gap:var(--sp-8);
  max-width:1080px;
  margin:0 auto;
  padding:var(--sp-7) var(--sp-5);
}

.login__panel{ min-width:0; }
.login__logo{ height:22px; width:auto; display:block; margin-bottom:var(--sp-5); }
.login__eyebrow{ margin-bottom:var(--sp-1); }
/* 헤드라인 한 줄 — 넓은 화면에서 줄바꿈 없이 들어가는 크기. 좁으면 어절 단위로 접힌다. */
.login__title{
  font-size:clamp(26px,1.4vw + 12px,32px);
  line-height:1.25; letter-spacing:-.03em;
  margin:var(--sp-2) 0 var(--sp-3);
  word-break:keep-all;
}
.login__title em{ font-style:normal; color:var(--brand); }
.login__lead{ color:var(--muted); margin-bottom:var(--sp-5); word-break:keep-all; }

.login__btn{
  height:40px; padding:0 var(--sp-5);
  font-size:14px;
  margin-top:var(--sp-4);
}
.login__btn:hover{ text-decoration:none; }

/* 우측 면 — 괘선으로만 나눈다. 카드로 감싸지 않는다. */
.login__aside{
  border-left:1px solid var(--line);
  padding-left:var(--sp-6);
  min-width:0;
}
.login__list{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.login__list li{
  display:grid; grid-template-columns:36px minmax(0,1fr); gap:var(--sp-3);
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);
}
.login__list li:last-child{ border-bottom:0; }
.login__num{
  font-size:13px; font-weight:700; color:var(--brand);
  font-variant-numeric:tabular-nums; padding-top:3px;
}
.login__list b{ display:block; font-size:16px; font-weight:700; color:var(--ink); }
.login__list p{ margin:2px 0 0; font-size:13.5px; color:var(--muted); word-break:keep-all; }

@media (max-width:860px){
  .login{
    grid-template-columns:1fr;
    gap:var(--sp-6);
    align-items:start;
    padding:var(--sp-6) var(--sp-4);
  }
  /* 좁아지면 세로 괘선은 의미를 잃는다 — 가로 괘선으로 바꾼다. */
  .login__aside{
    border-left:0; border-top:1px solid var(--line);
    padding-left:0; padding-top:var(--sp-5);
  }
}