@charset "utf-8";

/* CareBridge 인증 화면: 회원가입·로그인 공통 및 전용 레이아웃 */

#wrap.carebridge-join {
	width: 100%;
	max-width: var(--cb-layout-max-width);
	min-height: 100vh;
	margin: 0 auto;
	background: var(--cb-color-white);
	box-shadow: var(--cb-shadow-container);
	font-family: var(--cb-font-family);
}

.join-container {
	padding: var(--cb-space-24);
}

.join-section {
	max-width: 400px;
	margin: 0 auto;
	padding: 0;
}

.join-section h1 {
	margin: 0 0 var(--cb-space-6);
	text-align: center;
	font-size: var(--cb-font-size-24);
	font-weight: 700;
	line-height: normal;
	color: var(--cb-color-text);
}

.join-fields,
.join-field {
	display: flex;
	flex-direction: column;
}

.join-fields {
	gap: var(--cb-space-16);
}

.join-field {
	gap: var(--cb-space-8);
}

.join-field > label,
.gender-field legend {
	padding: 0;
	font-size: var(--cb-font-size-14);
	font-weight: 600;
	line-height: normal;
	color: var(--cb-color-text);
}

.field-guide {
	margin: 0;
	font-size: var(--cb-font-size-13);
	line-height: normal;
	color: var(--cb-color-text-muted);
	word-break: keep-all;
}

.field-row {
	display: flex;
	gap: var(--cb-space-8);
}

.field-row .cb-field {
	min-width: 0;
	flex: 1;
}

.cb-field {
	box-sizing: border-box;
	height: 39px;
	line-height: normal;
}

#wrap.carebridge-join .cb-field:focus {
	outline: none;
	border: var(--cb-border-default);
	background: var(--cb-color-primary-soft);
}

#wrap.carebridge-join .cb-field:disabled {
	border: var(--cb-border-default);
	background: #f6f6f6;
}

.field-error {
	display: none;
	min-height: 16px;
	margin: 0;
	font-size: var(--cb-font-size-13);
	line-height: normal;
	color: var(--cb-color-error);
}

.join-field.is-error .field-error.has-message,
.find-field.is-error .field-error.has-message {
	display: block;
}

.join-field.is-error .cb-field.is-error,
.find-field.is-error .cb-field.is-error {
	border: var(--cb-border-error);
}

.cb-button {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 39px;
	padding: 0 var(--cb-space-20);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cb-button--disabled,
.cb-button:disabled {
	border-color: var(--cb-color-border);
	background: var(--cb-color-border);
	color: var(--cb-color-disabled-text);
	cursor: default;
}

.cb-button:not(:disabled):not(.cb-button--disabled):not(.cb-button--outline) {
	border-color: var(--cb-color-primary);
	background: var(--cb-color-primary);
	color: var(--cb-color-white);
}

.cb-button--outline:not(.cb-button--disabled):hover {
	border-color: var(--cb-color-primary-strong);
	background: var(--cb-color-primary-soft);
	color: var(--cb-color-primary-strong);
}

/* 회원가입 화면의 입력 보조 버튼 */
#idChkButton,
#numChkButton,
#crtfButton {
	font-size: var(--cb-font-size-14);
	font-weight: 400;
}

.gender-field {
	margin: 0;
	padding: 0;
	border: 0;
}

.gender-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cb-space-8);
	margin-top: var(--cb-space-8);
}

.gender-options input {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
}

.gender-options label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 39px;
	border: var(--cb-border-default);
	border-radius: var(--cb-radius-4);
	font-size: var(--cb-font-size-13);
	color: var(--cb-color-text);
	cursor: pointer;
}

.gender-options input:checked + label {
	border-color: var(--cb-color-primary);
	background: var(--cb-color-primary-soft);
	font-weight: 600;
	color: var(--cb-color-primary-strong);
}

.agreement {
	display: flex;
	align-items: center;
	gap: var(--cb-space-8);
	min-height: 30px;
	cursor: pointer;
}

.agreement input {
	position: absolute;
	opacity: 0;
}

.agreement span {
	width: 18px;
	height: 18px;
	border: var(--cb-border-default);
	border-radius: 2px;
	background: var(--cb-color-surface);
}

.agreement input:checked + span {
	border-color: var(--cb-color-agreement);
	background: var(--cb-color-agreement);
	box-shadow: inset 0 0 0 4px var(--cb-color-surface);
}

.agreement a {
	font-size: var(--cb-font-size-14);
	line-height: normal;
	color: #3f3f3f;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: #8f8f8f;
	cursor: pointer;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.agreement a:hover {
	color: var(--cb-color-primary-strong);
	text-decoration-color: var(--cb-color-primary-strong);
}

.join-submit {
	width: 100%;
	font-size: var(--cb-font-size-15);
}

.join-submit:not(:disabled) {
	border-color: var(--cb-color-primary);
	background: var(--cb-color-primary);
	color: var(--cb-color-white);
}

@media (max-width: 599px) {
	.carebridge-join {
		box-shadow: none;
	}
}

/* 로그인 전용 레이아웃 */

#wrap.carebridge-login {
	width: 100%;
	max-width: var(--cb-layout-max-width);
	min-height: 100vh;
	margin: 0 auto;
	background: var(--cb-color-white);
	box-shadow: var(--cb-shadow-container);
}

.login-container {
	padding: var(--cb-space-24) var(--cb-space-24);
}

.login-section {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}

.login-section h1 {
	margin: 0 0 var(--cb-space-6);
	text-align: center;
	font-size: var(--cb-font-size-24);
	font-weight: 700;
	line-height: normal;
	color: var(--cb-color-text);
}

.login-form,
.login-fields,
.login-field {
	display: flex;
	flex-direction: column;
}

.login-form {
	gap: var(--cb-space-32);
}

.login-fields {
	gap: var(--cb-space-16);
}

.login-field {
	gap: var(--cb-space-8);
}

.login-field label {
	font-size: var(--cb-font-size-14);
	font-weight: 600;
	line-height: normal;
	color: var(--cb-color-text);
}

.login-field .cb-field {
	height: 39px;
	box-sizing: border-box;
}

.login-save {
	display: flex;
	align-items: center;
	gap: var(--cb-space-8);
	min-height: 30px;
	font-size: var(--cb-font-size-14);
	line-height: normal;
	color: var(--cb-color-text-checkbox);
	cursor: pointer;
}

.login-save input {
	position: absolute;
	opacity: 0;
}

.login-save span {
	width: var(--cb-checkbox-size);
	height: var(--cb-checkbox-size);
	border: var(--cb-border-default);
	border-radius: 2px;
	background: var(--cb-color-surface);
}

.login-save input:checked + span {
	border-color: var(--cb-color-agreement);
	background: var(--cb-color-agreement);
	box-shadow: inset 0 0 0 4px var(--cb-color-surface);
}

.login-submit,
.join-link {
	width: 100%;
	height: 39px;
	font-size: var(--cb-font-size-15);
}

.login-submit:not(:disabled) {
	border-color: var(--cb-color-primary);
	background: var(--cb-color-primary);
	color: var(--cb-color-white);
}

.login-divider {
	width: 100%;
	height: 1px;
	background: var(--cb-color-border);
}

.join-link {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	border: var(--cb-border-primary);
	border-radius: var(--cb-radius-4);
	font-weight: 600;
	color: var(--cb-color-primary);
	cursor: pointer;
}

.login-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cb-space-8);
	margin-top: -16px;
}

.login-links a {
	font-size: var(--cb-font-size-14);
	line-height: normal;
	color: var(--cb-color-text-secondary-strong);
	cursor: pointer;
}

.login-links a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: #8f8f8f;
}

.login-links i {
	width: 1px;
	height: 8px;
	background: var(--cb-color-divider);
}

@media (max-width: 599px) {
	#wrap.carebridge-login {
		box-shadow: none;
	}
}

/* 아이디·비밀번호 찾기 공통 레이아웃 */
#wrap.carebridge-find {
	width: 100%;
	max-width: var(--cb-layout-max-width);
	min-height: 100vh;
	margin: 0 auto;
	background: var(--cb-color-white);
	box-shadow: var(--cb-shadow-container);
}

.find-title-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--cb-space-6);
}

.find-title-wrap #find-title {
	margin: 0;
	font-size: var(--cb-font-size-24);
	font-weight: 700;
	line-height: normal;
	color: var(--cb-color-text);
}

.find-back {
	position: absolute;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
}

.find-back img {
	display: block;
	width: 24px;
	height: 24px;
}

.find-container {
	padding: var(--cb-space-24);
}

.find-heading {
	width: 100%;
}

.find-section {
	width: 100%;
	max-width: 360px;
	margin: var(--cb-space-32) auto 0;
}

.find-section h1 {
	margin: 0 0 var(--cb-space-6);
	text-align: center;
	font-size: var(--cb-font-size-24);
	font-weight: 700;
	line-height: normal;
	color: var(--cb-color-text);
}

.find-guide {
	margin: 0 0 var(--cb-space-16);
	font-size: var(--cb-font-size-14);
	line-height: normal;
	color: var(--cb-color-text-muted);
	text-align: center;
}

.find-fields,
.find-field {
	display: flex;
	flex-direction: column;
}

.find-fields {
	gap: var(--cb-space-16);
}

.find-field {
	gap: var(--cb-space-8);
}

.find-field > label {
	font-size: var(--cb-font-size-14);
	font-weight: 600;
	line-height: normal;
	color: var(--cb-color-text);
}

.find-field .cb-field {
	box-sizing: border-box;
	height: 39px;
}

.find-submit {
	width: 100%;
	height: 39px;
	font-size: var(--cb-font-size-15);
}

.find-submit:not(:disabled) {
	border-color: var(--cb-color-primary);
	background: var(--cb-color-primary);
	color: var(--cb-color-white);
}