/* ==========================================================
   login.css
   목적: 로그인 페이지 전용 스타일
   ========================================================== */

/* ── 배경 캔버스 ── */
.bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── 페이지 래퍼 ── */
.login {
  position: relative;
  z-index: 1;
  background-color: transparent;
  width: 100%;
  height: 100%;
  min-width: var(--layout-max-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── 메인 타이틀 ── */
.login .lg-main-title {
  height: 1.75rem;           /* 28px */
  width: 20.75rem;           /* 332px */
  align-self: center;
  margin-top: 0;
  font-family: var(--ff-medium);
  font-weight: var(--fw-semibold);
  color: var(--clr-txt-medium);
  font-size: var(--fs-md);   /* 20px */
  text-align: center;
  letter-spacing: -0.5px;
  line-height: 1.75rem;      /* 28px */
  white-space: nowrap;
}

/* ── 로그인 폼 ── */
.login .lg-login-form {
  align-self: center;
  width: 27.5625rem;         /* 441px */
  margin-top: 1.25rem;       /* 20px */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;             /* 10px */
}

.login .input-item-id,
.login .input-item-pw {
  width: 27.5rem;            /* 440px */
  height: 3.75rem;           /* 60px */
  position: relative;
  background-color: var(--clr-white);
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
}

.login .input-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 1.875rem;       /* 0 30px */
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--ff-light);
  font-size: var(--fs-md);   /* 20px */
  color: var(--clr-txt-medium);
  letter-spacing: -0.5px;
}

/* ── 아이디 저장 체크박스 ── */
.login .lg-login-keep-wrap {
  align-self: center;
  width: 27.5625rem;         /* 441px */
  margin-top: 0.625rem;      /* 10px */
  display: flex;
  align-items: center;
  gap: 0.625rem;             /* 10px */
}

.login .keep-check {
  width: 1.25rem;            /* 20px */
  height: 1.25rem;
  border-radius: 0.25rem;    /* 4px */
  border: 1px solid var(--clr-border);
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #00438a;
}

.login .keep-text {
  font-family: var(--ff-light);
  font-weight: var(--fw-regular);
  color: var(--clr-txt-dark);
  font-size: var(--fs-sm);   /* 16px */
  letter-spacing: var(--ls-base);
  line-height: var(--lh-base);
  white-space: nowrap;
  cursor: pointer;
}

/* ── 로그인 버튼 영역 ── */
.login .btn-login-wrap {
  height: 5.75rem;           /* 92px */
  width: 27.75rem;           /* 444px */
  align-self: center;
  position: relative;
  margin-top: 1.875rem;      /* 30px */
}

.login .btn-login {
  position: absolute;
  top: 0;
  left: 0;
  width: 27.5rem;            /* 440px */
  height: 3.75rem;           /* 60px */
  background-color: #00438a;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  font-family: var(--ff-medium);
  font-weight: var(--fw-semibold);
  color: #f2f2f2;
  font-size: var(--fs-md);   /* 20px */
  text-align: center;
  letter-spacing: -0.5px;
  line-height: 1.75rem;      /* 28px */
  transition: background-color 0.15s;
}
.login .btn-login:hover { background-color: #003070; }

/* ── 로고 영역 ── */
.login .lg-cp-icon-wrap {
  height: 5.75rem;           /* 92px */
  width: 16.6875rem;         /* 267px */
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;              /* 20px */
}

.login .cp-icon {
  width: 16.5625rem;         /* 265px */
  height: 3.125rem;          /* 50px */
  object-fit: contain;
}

.login .cp-text {
  font-family: var(--ff-light);
  font-weight: var(--fw-semibold);
  color: var(--clr-txt-medium);
  font-size: var(--fs-md);   /* 20px */
  text-align: center;
  letter-spacing: var(--ls-base);
  line-height: var(--lh-base);
  white-space: nowrap;
}

/* ── 로그인 오류 메시지 ── */
.login .input-group-id {
  position: relative;
  height: 3.75rem;           /* 60px */
  flex-shrink: 0;
}

.login .input-item-id.error,
.login .input-item-pw.error {
  border-color: var(--clr-danger);
}

.login .login-error-msg {
  align-self: center;
  width: 27.5625rem;         /* 441px */
  height: 1.125rem;          /* 18px */
  margin-top: 0.375rem;      /* 6px */
  color: var(--clr-danger);
  font-family: var(--ff-light);
  font-size: 0.8125rem;      /* 13px */
  line-height: 1.125rem;     /* 18px */
  letter-spacing: var(--ls-base);
  white-space: nowrap;
}