/* ══════════════════════════════════════════════════════════════════════
   로그인 — 이 앱에서 유일하게 사이드바가 없는 화면

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

.login{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,440px) 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{ margin-bottom:var(--sp-3); }
.login__lead{ color:var(--muted); max-width:34ch; margin-bottom:var(--sp-5); }
.login__lead b{ color:var(--ink); }

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

.login__foot{
  margin-top:var(--sp-4);
  font-size:var(--fs-caption); color:var(--faint);
}

/* 우측 면 — 괘선으로만 나눈다. 카드로 감싸지 않는다. */
.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;
  font-size:13px; color:var(--muted);
}
.login__list li{
  padding:var(--sp-2) 0;
  border-bottom:1px solid var(--line);
}
.login__list li:last-child{ border-bottom:0; }
.login__list b{ color:var(--ink); font-weight:700; }
.login__meta{
  margin-top:var(--sp-4);
  font-size:var(--fs-caption); color:var(--faint);
}

@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);
  }
}