/* 회원가입 페이지 전용 CSS */

/* 회원가입 섹션 컨테이너 */
.login_sec_01 {
  padding: 60px 0;
  background: #fff;
}

.login_sec_01 .container {
  max-width: 400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 회원가입 제목 */
.login_sec_01 h1 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 40px;
  text-align: left;
}

/* 섹션 제목 (로그인 정보, 회원정보) */
.join_txt01 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  margin-top: 30px;
}

/* 입력 필드 리스트 */
.login_sec_01 .list {
  margin-bottom: 15px;
  display: block !important;
  flex-direction: row !important;
  white-space: normal !important;
  font-size: 0;
}

.login_sec_01 .list p {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  margin-bottom: 8px;
  display: block !important;
  width: 100% !important;
  flex-basis: 100% !important;
}

/* 입력 필드 스타일 */
.login_sec_01 .list input[type="text"],
.login_sec_01 .list input[type="password"],
.login_sec_01 .list input[type="tel"] {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px !important;
  color: #333;
  background: #f8f9fa;
  box-sizing: border-box;
  display: block;
  font-weight: normal;
}

.login_sec_01 .list input::placeholder {
  color: #999;
}

.login_sec_01 .list input:focus {
  outline: none;
  border-color: #4285f4;
  background: #fff;
}

/* 아이디 입력란 - 중복확인 버튼이 있는 경우 */
.login_sec_01 .list input#loginId {
  width: calc(100% - 130px) !important;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 0 !important;
  font-weight: normal;
}

/* 중복확인 버튼 */
.login_sec_01 .list input.id_check {
  width: 120px !important;
  height: 48px;
  padding: 0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #d0d0d0;
  font-size: 14px !important;
  font-weight: 400;
  cursor: pointer;
  display: inline-block !important;
  vertical-align: middle;
  margin-left: 10px !important;
  text-align: center;
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

.login_sec_01 .list input.id_check::placeholder {
  color: #000;
}

.login_sec_01 .list input.id_check:hover {
  background: #f8f9fa;
  border-color: #b0b0b0;
}

/* 안내 문구 */
.login_sec_01 > .container > p {
  font-size: 12px;
  color: #666;
  margin: 20px 0;
  line-height: 1.5;
}

/* 체크박스 영역 */
.check_area {
  border-radius: 4px;
}

.check_wrap {
  margin-bottom: 12px;
}

.check_wrap:last-child {
  margin-bottom: 0;
}

.check_area > div > .check_wrap {
  margin-bottom: 10px;
  font-weight: normal;
}

/* 체크박스 스타일 */
.check_wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}

.check_wrap label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.check_wrap label span {
  color: #333;
}

.check_wrap label span a {
  color: #4285f4;
  text-decoration: none;
}

.check_wrap label span a:hover {
  text-decoration: underline;
}

/* 전체동의 스타일 */
.check_area > .check_wrap label {
  font-weight: 700;
  font-size: 15px;
}

/* 버튼 영역 */
.btn_area_02 {
  margin-top: 30px;
  text-align: center;
}

.btn_area_02 button {
  width: 100%;
  height: 52px;
  background: #4285f4;
  border: none;
  border-radius: 26px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s;
}

.btn_area_02 button:hover {
  background: #3367d6;
}

.btn_area_02 button:active {
  background: #2851a3;
}

/* 로그인 링크 */
.btn_area_02 p {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.btn_area_02 p a {
  color: #4285f4;
  text-decoration: none;
  font-weight: 500;
}

.btn_area_02 p a:hover {
  text-decoration: underline;
}

/* 마지막 입력 필드 하단 여백 조정 */
.login_sec_01 .list.last {
  margin-bottom: 15px;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .login_sec_01 .container {
    max-width: 100%;
    padding: 0 15px;
  }

  .login_sec_01 h1 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .join_txt01 {
    font-size: 15px;
    margin-top: 25px;
  }

  /* 모바일에서도 아이디 입력과 중복확인 버튼을 옆으로 유지 */
  .login_sec_01 .list input#loginId {
    width: calc(100% - 100px) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font-weight: normal;
  }

  .login_sec_01 .list input.id_check {
    width: 90px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
  }
}

@media (max-width: 770px) {
  /* 770px 이하에서도 중복확인 버튼을 옆으로 유지 */
  .login_sec_01 .list {
    display: block !important;
    flex-direction: row !important;
  }

  .login_sec_01 .list input#loginId {
    width: calc(100% - 100px) !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .login_sec_01 .list input.id_check {
    width: 90px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
  }
}