/* 로그인 페이지 css */
/* 주의 이상한점 === 로그인 페이지에 뭐때문인지 모르겠지만 
p 에 기본으로 마진이 적용되어있음 */
/* 헤더 부분 (로그인 페이지만 헤더 다름) */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* overflow-y: hidden; */
  /* 오른쪽 스크롤 바 숨기기 */
  overflow-x: hidden;
}

.header_area {
  background-color: #333333;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  height: 102px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
p {
  margin: 0px;
}

.login_wrapper {
  /* flex: 1 0 0; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  padding: 260px 0px;
}

.login_box {
  margin: 0 auto;
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  color: #333333;
}

.login_brand_img {
  display: flex;
  margin-bottom: 20px;
}
/* 타이틀 부분 */
.login_title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.login_title > h1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0px;
}
.login_title > h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0px;
}

.id_box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.id_input_box {
  margin-bottom: 20px;
}
.password_input_box {
  margin-bottom: 20px;
}

.login_label {
  font-size: 16px;
  font-weight: 500;
  color: #646464;
  letter-spacing: -0.4px;
  margin: 0px !important;
}

.login_input {
  box-sizing: border-box;

  width: 100%;
  height: 48px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  background-color: transparent;
  padding: 0px 12px;

  /* input 속 글자 스타일 */
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.login_input:hover {
  background-color: #f8f8f8;
}
.login_input:focus {
  border: 1px solid #333333;
}

/* 체크박스 부분 */
.maintain_box {
  display: flex;
  align-items: center;
  gap: 4px;
}

.find_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 33px;
}

/* 기본 체크박스 스타일 */
.custom-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  padding: 8px;
}

/* 체크된 상태 */
.custom-checkbox:checked {
  background-color: #000;
}

/* 체크 표시: 정중앙에 위치 */
.custom-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg); /* 정중앙 정렬 + 회전 */
}

/* 라벨 */
.maintain_box > span {
  font-size: 15px;
  color: #a0a0a0;
  cursor: pointer;
  font-weight: 500;
}
/* 체크박스가 체크되면 글자 색깔 변경 */
.maintain_box > input.custom-checkbox:checked + span {
  color: #000;
}
.find_id_pw {
  font-size: 15px;
  color: #a0a0a0;
  cursor: pointer;
}

.find_id_pw a {
  text-decoration: none;
  color: inherit !important; /* 기존 스타일 유지 */
}

/* 로그인 버튼 부분 */
.login_btn {
  margin-bottom: 24px;
  width: 100%;
  height: 51px;
  border-radius: 4px;
  border: none;
  background-color: #333333;

  /* 버튼 속 글자 스타일 */
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.4px;
  cursor: pointer;
}

.login_btn:hover {
  background-color: #646464;
}

/* 사용문의 부분 */
.login_question {
  font-size: 14px;
  color: #a0a0a0;
  letter-spacing: -0.35px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  margin-top: 4px;
  margin-bottom: 0px;
}

/* 로그인 에러 메시지 css */
.login_error_message {
  font-weight: 500;
  font-size: 16px;
  color: red;
  margin-bottom: 20px;
}