/* register.css */

/* 1) body에 배경색 설정하고 화면 중앙 정렬 */
body {
  margin: 0;
  min-height: 100vh;
  background-color: #2b2b3c;
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* 수직 정렬을 화면 상단 시작점으로 변경 */
  padding-top: 150px;         /* 상단 여백: 필요에 따라 숫자 조절 */
  font-family: 'Inter', sans-serif;
}

/* 2) 컨테이너 배경·패딩·쉐도우 제거 */
.auth-container {
  max-width: 420px;
  width: 100%;
  margin: 0;               /* 더는 위아래 여백 필요 없음 */
  background: transparent; /* 배경 투명 */
  padding: 0;              /* 패딩 제거 */
  box-shadow: none;        /* 그림자 제거 */
  border-radius: 0;        /* 모서리 둥글게 하지 않음 */
}

/* 3) 제목과 폼 간격만 조금 유지 */
.auth-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 20px; /* 적당히 간격 조정 */
  color: #ffffff;
}

/* 4) 폼 자체 스타일 */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* 5) 휴대폰 인증 섹션도 가로 꽉 채우기 */
.phone-verify {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* 6) 입력창·버튼 모두 100% 너비 */
.auth-form input,
.auth-form button,
.phone-verify input,
.verify-btn {
  width: 100%;
}

/* 7) 입력창 스타일 유지 */
.auth-form input,
.phone-verify input {
  padding: 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  outline: none;
}

/* 8) 인증 버튼 스타일 */
.verify-btn {
  background: #555;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* 9) 가입하기 버튼 스타일 (login과 동일하게) */
.auth-form button[type="submit"] {
  padding: 10px;
  background-color: #e71909;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

/* 10) 링크 영역 */
.auth-links {
  margin-top: 20px;
  text-align: center;
  font-size: 0.9rem;
}

.auth-links a {
  color: white;
  text-decoration: none;
  margin: 0 6px;
}