/* ==========================================================================
   로그인 · 가입 신청 화면
   포털 안쪽과 같은 토큰을 쓰되, 화면 하나짜리라 골격은 따로 둡니다.
   ========================================================================== */

.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--sp-7);
  background: var(--bg);
}

.login { width: 100%; max-width: 380px; }
.login--wide { max-width: 520px; }

.login__card {
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-h);
}

.login__brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.login__logo { height: 18px; width: auto; display: block; }
.login__brandtext { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.login__brandtext .login__org { order: 2; }
.login__brandtext .login__sub { order: 3; flex-basis: 100%; margin-top: calc(var(--sp-1) * -1); }
.login__org { font-size: var(--fs-xl); font-weight: var(--fw-mid); line-height: var(--lh-tight); }
.login__sub { font-size: var(--fs-sm); color: var(--text-3); }

.login__lead {
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body);
  padding-bottom: var(--sp-6); margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-2);
}

.login__form { display: flex; flex-direction: column; gap: var(--sp-5); }

/* 아이디 저장 — 이메일만 남깁니다 */
.login__remember {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; user-select: none;
}
.login__remember input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* 비밀번호 분실 안내 — 폼 아래 한 줄 (docs/06 화면 순서) */
.login__hint {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-body);
}

.login__error {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius);
  background: var(--danger-bg); color: var(--danger);
  font-size: var(--fs-sm); line-height: var(--lh-body);
}

.login__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border-2);
}
.login__footright { display: flex; align-items: center; gap: var(--sp-4); }

/* 가입 신청 — 직급을 고르면 어떤 권한이 되는지 그 자리에서 보여 줍니다 */
.rolehint {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent-bg); border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.rolehint__k { font-size: var(--fs-xs); color: var(--text-3); }
.rolehint__v { color: var(--accent); font-weight: var(--fw-mid); line-height: 1.4; }

/* 신청 완료 */
.login__done { text-align: center; padding: var(--sp-4) 0 var(--sp-2); }
.login__doneicon {
  width: 44px; height: 44px; margin: 0 auto var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--ok-bg); color: var(--ok); border-radius: 50%;
}
.login__doneicon svg { width: 22px; height: 22px; }
.login__donetitle {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-3);
}
.login__donedesc {
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body);
  margin-bottom: var(--sp-6);
}