@charset "UTF-8";

/*
	입력 양식 공통 안내. 브라우저 기본 유효성 말풍선 대신 입력칸 아래에 직접 보여준다.
	form-validation.js 가 .kr-invalid 와 .kr-field-msg 를 붙인다. (2026-10-02)
*/

.kr-invalid {
	border-color: #d94a4a !important;
	background-color: #fffafa !important;
}

.kr-invalid:focus {
	border-color: #d94a4a !important;
	box-shadow: 0 0 0 3px rgba(217, 74, 74, 0.14) !important;
}

/* 체크박스·라디오는 테두리만 물들인다 */
input[type="checkbox"].kr-invalid,
input[type="radio"].kr-invalid {
	background-color: transparent !important;
	outline: 2px solid rgba(217, 74, 74, 0.45);
	outline-offset: 1px;
}

.kr-field-msg {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin: 6px 0 0;
	padding: 0;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: #d94a4a;
	word-break: keep-all;
}

.kr-field-msg::before {
	content: "";
	flex: none;
	margin-top: 1px;
	width: 14px;
	height: 14px;
	background: #d94a4a url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 4.5v4'/%3E%3Cpath d='M8 11.2h.01'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	border-radius: 50%;
}