/* login.css */

/* 1) body에 배경색 설정하고 화면 중앙 정렬 */
body {
  margin: 0;
  min-height: 100vh;
  background-color: #2b2b3c;
  display: flex;
  flex-direction: column;       /* ← 추가: 수직 스택 */
  justify-content: flex-start;  /* ← 변경: 맨 위부터 쌓이도록 */
  align-items: center;          /* ← 변경: 수평 중앙 */
  padding-top: 150px;
  font-family: 'Inter', sans-serif;
}

/* 2) 컨테이너 배경·패딩·쉐도우 제거 (기존 그대로) */
.auth-container {
  max-width: 400px;
  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; /* 기존 30px → 20px */
  color: #ffffff;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* 4) 입력창·버튼은 가로 꽉 채우기 (기존 그대로) */
.auth-form input,
.auth-form button {
  width: 100%;
}

/* 5) 입력창 스타일 (기존 그대로) */
.auth-form input {
  padding: 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  outline: none;
}

/* 6) 버튼 스타일 (기존 그대로) */
.auth-form button {
  padding: 10px;
  background-color: #e71909;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

/* 7) 링크 영역은 하단에 고정 (기존 그대로) */
.auth-links {
  margin-top: 20px;
  text-align: center;
  font-size: 0.9rem;
}

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

/* ── 4개 아이콘 컨테이너 ── */
/* 기존 선언에 width, max-width, margin만 추가했습니다. */
.action-icons {
  width: 100%;              /* ← 추가: 로그인 박스 너비와 동일하게 */
  max-width: 400px;         /* ← 추가: 최대 400px */
  margin: 24px auto 0;      /* ← 추가: 위쪽 간격 + 가로 중앙 */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 16px 0;
  border-radius: 8px;
}

/* 각 아이콘 항목 (기존 그대로) */
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/* 아이콘 이미지 (기존 그대로) */
.icon-item img {
  width: 80px;
  height: 80px;
  display: block;
  margin-bottom: 4px;
}