/* 회원가입 폼 */
#joinForm {
  width: 440px; /* 약간 넓혀 여유 확보 */
  margin: 40px auto; /* 상단 여백 확대 */
  padding: 40px 45px; /* 내부 여백 살짝 늘림 */
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* 그림자 살짝 강조 */
  display: flex;
  flex-direction: column;
  gap: 14px; /* 입력칸 간격 약간 늘림 */
  box-sizing: border-box;
}

/* 입력창 + 버튼을 동일 폭으로 */
#joinForm input,
#joinForm .joinBtn {
  width: 100%;
  height: 44px; /* 살짝 높여 시원하게 */
  border-radius: 8px;
  font-size: 15px; /* 가독성 향상 */
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif; /* 시스템 폰트 지정 */
}

/* 입력 필드 */
#joinForm input {
  padding: 0 12px;
  border: 1px solid #d1d5db;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#joinForm input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ✅ 추가됨: 입력 + 버튼을 같은 줄에 배치할 경우 */
#joinForm .formGroup {
  display: flex;
  align-items: center;
  gap: 8px;
}

#joinForm .formGroup input {
  flex: 1;
}

#joinForm .formGroup button {
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background-color: #457cf1;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#joinForm .formGroup button:hover {
  background-color: #2563eb;
}

#joinForm .formGroup button:active {
  transform: scale(0.97);
}

/* 가입 버튼 */
#joinForm .joinBtn {
  background-color: #2563eb;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  margin-top: 6px; /* 위 입력칸과의 여백 */
}

#joinForm .joinBtn:hover {
  background-color: #1d4ed8;
}

#joinForm .joinBtn:active {
  transform: scale(0.98);
}

/* 약관 텍스트 영역 + 체크박스 */
#joinForm .terms {
  display: flex;
  flex-direction: column; /* textarea 위, 체크박스 아래 */
  gap: 8px;
  font-size: 13px;
}

/* 약관 내용 textarea */
#joinForm .terms textarea {
  width: 100%;
  height: 120px; /* ✅ 조정 가능 */
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  resize: none; /* 크기 조절 불가 */
  background-color: #f9fafb;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  overflow-y: auto;
}

/* 체크박스 + 링크 */
#joinForm .terms label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

#joinForm .terms input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

#joinForm .terms a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;
}

#joinForm .terms a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}