@media screen and (max-width: 768px) {
	.container {
		flex-direction: column;
		height: 100vh;
	}

	html,
	body {
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		height: 100%;
	}

	h1 {
		color: #5C4033;
	}

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

	/* 모달 내부 */
	.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 {
		
		margin-top: 3%;
		margin-bottom: 3%;
		background-color: #fff;
		border-radius: 8px;
		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;
		/* 텍스트 가운데 정렬 */
	}

}