/* signin.css 전체 수정본 */

/* 기본 리셋 및 공통 설정 */
html,
body {
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
	color: #5C4033;
}

/* 헤더·폼·푸터 간 여백 및 가로 중앙 정렬 */
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* 최상단부터 쌓이도록 */
	align-items: center;
	/* 가로 중앙 정렬 */
	
	/* 위/아래 여백 (헤더·푸터 높이에 맞춰 조절) */
	box-sizing: border-box;
}

/* 모달 내부 */
.modal-content h3 {
	margin-bottom: 10px;
}

.modal-content {
	width: 90%;
	max-width: 500px;
	background-color: #fff;
	padding: 20px;
	margin: 100px auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 모달 스크롤바 커스텀 */
.consent-text::-webkit-scrollbar {
	width: 6px;
}

.consent-text::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
}

/* 회원가입 폼 */
.signin-form {
	width: 40%;
	max-width: 400px;
	margin-top: 3%;
	margin-bottom: 3%;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;

	display: flex;
	flex-direction: column;

	/* 왼쪽 정렬 */
	align-items: flex-start;
	text-align: left;
}

/* 모든 레이블 */
.signin-form label {
	width: 100%;
	margin-bottom: 15px;

	display: flex;
	flex-direction: column;

	/* 왼쪽 정렬 */
	align-items: flex-start;
	text-align: left;
}

/* 이메일 입력 + 버튼 그룹 */
.input-with-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

/* 이메일 인풋 확장 */
.input-with-btn input {
	flex: 1;
	width: auto;
}

/* 이메일 확인 버튼 */
.input-with-btn button {
	white-space: nowrap;
	padding: 0 12px;
	height: 2.5em;
	margin-top: 0;
}

/* 일반 인풋 스타일 */
.signin-form input {
	width: 90%;
	padding: 10px;
	margin-top: 5px;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px solid #ddd;
}

/* 포커스 시 테두리 색 */
.signin-form input:focus {
	border-color: #D6CCC2;
	outline: none;
}
#checkDuplicateBtn{
	margin-top: 20px;
}
/* 회원가입 버튼 */
.signin-form button {
	padding: 10px 20px;
	background-color: #D6CCC2;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.signin-form button:hover {
	background-color: #E3D5CA;
}

/* 입력 오류 시 스타일 */
.input-error {
	border-color: #D5BDAF;
	background-color: #F5EBE0;
}

/* 에러 메시지 스타일 */
.field-error,
.error-message {
	color: #D5BDAF;
	font-size: 0.85em;
	align-self: flex-start;
	margin-bottom: 10px;
	width: 100%;
}

#verificationSection input#verificationCodeInput {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-sizing: border-box;
}

/* 버튼 크기 고정, 높이 맞추기 */
#verificationSection button#verifyCodeBtn {
	white-space: nowrap;
	padding: 0 12px;
	height: 2.5em;
	border: none;
	background-color: #D6CCC2;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
}

#verificationSection button#verifyCodeBtn:hover {
	background-color: #E3D5CA;
}

/* 타이머는 다음 줄로 내려서 전체 폭 사용 */
#verificationSection #timer {
	flex-basis: 100%;
	margin-top: 5px;
	color: red;
	font-weight: bold;
}

#confirmSubmit {
	background-color: #D6CCC2;
	color: #fff;
	border: 1px solid #D6CCC2;
	width: 30px;
	height: 30px;
	border-radius: 15%;
}

#cancelSubmit {
	background-color: #D6CCC2;
	color: #fff;
	border: 1px solid #D6CCC2;
	width: 30px;
	height: 30px;
	border-radius: 15%;
}

.timer-text {
  display: inline-block;
  font-size: 0.9rem;        /* 살짝 작은 크기 */
  color: #333;
  margin: 10px 0;           /* 위아래 여유 */
}

#timer {
  display: inline-block;
  margin-left: 8px;         /* 문구와 간격 */
  font-size: 0.9rem;        /* p와 동일 크기 */
  font-weight: bold;
  color: red;
  vertical-align: baseline; /* 텍스트 가운데 정렬 */
}