/****************************************
*     Common
****************************************/
.user-wrap {}
.user-wrap .user-sub-wrap {
	margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;
	width: 100%; min-width: 340px; max-width: 500px;
}

hr.sep { border-width: 1px 0 0 0; border-style: solid; border-color: #dde1e5; }

/****************************************
*
****************************************/
#sec_user {
	padding-top: 50px; padding-bottom: 100px;
}
#sec_user_inner {
	padding: 40px;
	width: 100%;
	background: #fff;
	border: 1px solid #f0ece4; border-radius: 20px;
	box-shadow: 0 14px 40px rgba(29, 37, 51, 0.07);
}

/****************************************
*     User Info
****************************************/
#user_info { display: flex; flex-direction: column; gap: 20px; }

#user_info .fld { display: flex; flex-direction: column; gap: 5px; }
#user_info .fld span { color: #33425a; font-size: 0.9rem; font-weight: 600; }
#user_info .fld span.needed::after { content: ' *'; color: #28a77b; font-weight: 700; }

#user_info .fld .fld-inline {
	display: flex; flex-direction: row; align-items: stretch; gap: 5px;
}

#user_info .fld label {
	width: 100%; height: 50px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #dde1e5; border-radius: 10px;
	display: flex; flex-direction: row; align-items: center; gap: 10px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
#user_info .fld label input[type=text],
#user_info .fld label input[type=tel],
#user_info .fld label input[type=password] {
	flex: 1;
	width: 100%; height: 100%;
	color: #1d2533;
	font-size: 0.95rem;
	background: transparent;
	border: none;
}
#user_info .fld label img#view_passwd {
	width: 18px; height: 18px;
	flex: 0 0 auto;
	opacity: 0.5;
	cursor: pointer;
}
#user_info .fld label input[type=text]::placeholder,
#user_info .fld label input[type=tel]::placeholder,
#user_info .fld label input[type=password]::placeholder { color: #b5bbc1; }

#user_info .fld label:focus-within,
#user_info .fld label:focus-within,
#user_info .fld label:focus-within {
	border-color: #28a77b;
	box-shadow: 0 0 0 3px rgba(40, 167, 123, 0.15);
}

#user_info .fld #check_login_id {
	padding: 0 16px;
	height: 50px;
	color: #15835e;
	font-size: 0.9rem; font-weight: 600;
	white-space: nowrap;
	background: #eaf7f1;
	border: 1px solid #cfede0; border-radius: 10px;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#user_info .fld .btn-check:hover { color: #fff; background: #28a77b; border-color: #28a77b; }

#user_info .fld select {
	width: 100%; height: 50px;
	padding: 0 38px 0 14px;
	color: var(--kh-ink);
	font-family: var(--font-pretendard); font-size: 0.98rem; font-weight: 400;
	background-color: #fff;
	background-image: url('../icon/caret-down-solid-full.svg');
	background-size: 11px 11px; background-repeat: no-repeat; background-position: calc(100% - 14px) 50%;
	border: 1px solid #dde1e5; border-radius: 12px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
#user_info .fld select:focus {
	border-color: var(--kh-teal-4);
	box-shadow: 0 0 0 3px rgba(40, 167, 123, 0.15);
	outline: none;
}
#user_info .fld select:invalid { color: #b5bbc1; }

/****************************************
*     Agree Info
****************************************/
#agree_info { display: flex; flex-direction: column; gap: 10px; }

#agree_info label {
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #cfede0; border-radius: 12px;
	display: flex; flex-direction: row; align-items: center; gap: 10px;
	cursor: pointer;
}


#agree_info label input[type=checkbox] {
	width: 18px; height: 18px;
	accent-color: #28a77b;
	flex: 0 0 auto;
	cursor: pointer;
}
#agree_info label span {
	flex: 1;
	color: #33425a;
	font-size: 0.95rem;
}
#agree_info label span em {
	color: #15835e;
	font-style: normal; font-weight: 600;
}
#agree_info label a {
	color: #5b6579;
	font-size: 0.9rem;
	text-decoration: underline; text-underline-offset: 2px;
	flex: 0 0 auto;
}
#agree_info label a:hover { color: #15835e; }


/****************************************
*     Button Submit
****************************************/
#btn_submit {
	width: 100%; height: 50px;
	color: #fff;
	font-size: 1.1rem; font-weight: 700;
	background: #28a77b;
	border: none; border-radius: 10px;
	box-shadow: 0 8px 18px rgba(40, 167, 123, 0.25);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s, border-color 0.15s, color 0.15s;
}
#btn_submit:hover { background: #15835e; transform: translateY(-2px); }

/****************************************
*     반응형
****************************************/
@media (max-width: 960px) {
	.user-wrap { padding: 0 15px; }

	#sec_user_inner { padding: 30px; }
@media (max-width: 560px) {
	.user-wrap { padding: 0 10px; }

	#sec_user_inner { padding: 20px; }
}