@charset "UTF-8";

/* =========================================================
   STUDY MATE - LOGIN / JOIN
   ========================================================= */

:root {

	/* Main Color */
	--primary: #6366F1;
	--primary-hover: #5558E8;

	/* Background */
	--page-bg: #F8F9FC;
	--left-bg: #EDF0FE;

	/* Text */
	--text-main: #222222;
	--text-sub: #777777;
	--text-placeholder: #9CA3AF;

	/* Border */
	--border: #E8EAF3;
	--input-border: #E5E7EB;

	/*
       왼쪽 영역 비율
       피그마 보고 나중에 이 값 하나만 조절하면 됨
    */
	--left-width: 48%;
}


/* =========================================================
   RESET
   ========================================================= */

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Noto Sans KR", sans-serif;
	color: var(--text-main);
	background-color: var(--page-bg);
}


/* =========================================================
   전체 페이지
   ========================================================= */
.auth-background {
	width: 100%;
	min-height: 100vh;
	min-width: 850px;

	display: flex;
	justify-content: center;
	align-items: center;

	padding: 36px;

	background-color: #F4F5F9;
}

.auth-page {
	width: 100%;
	max-width: 1200px;

	height: min(760px, calc(100vh - 72px));
	min-height: 650px;

	display: flex;

	margin: 0;

	background-color: var(--page-bg);

	border: 1px solid #E8EAF3;
	border-radius: 18px;

	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);

	overflow: hidden;
}


/* =========================================================
   LEFT
   ========================================================= */

.auth-left {
	position: relative;

	flex: 0 0 var(--left-width);
	width: var(--left-width);
	max-width: var(--left-width);

	height: 100%;
	min-height: 100%;

	background-color: var(--left-bg);

	overflow: hidden;
}


/* 위쪽 큰 곡선 */
.auth-left::before {
	content: "";

	position: absolute;

	top: -20%;
	right: -74%;

	width: 95%;
	height: 100%;

	border-radius: 50%;
	background-color: #F8F9FC;

	z-index: 1;
}


/* 아래쪽 곡선 */
.auth-left::after {
	content: "";

	position: absolute;

	bottom: -25%;
	right: -50%;

	width: 56%;
	height: 78%;

	border-radius: 50%;
	background-color: #F8F9FC;

	z-index: 1;
}


/* =========================================================
   왼쪽 실제 내용
   ========================================================= */

.left-content {
	position: relative;
	z-index: 3;

	width: 58%;

	margin: 0 auto;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-box {
	padding-top: clamp(38px, 6vh, 70px);

	text-align: center;
}

.auth-logo {
	display: inline-block;

	width: clamp(120px, 8.5vw, 165px);
	height: auto;
}


/* =========================================================
   왼쪽 문구
   ========================================================= */

.auth-copy {
	margin-top: clamp(26px, 4vh, 45px);
}

.auth-copy h1 {
	margin: 0;

	font-size: clamp(28px, 2vw, 38px);
	font-weight: 700;

	line-height: 1.35;

	letter-spacing: -0.5px;

	color: var(--text-main);
}

.auth-copy p {
	margin: 18px 0 0;

	font-size: clamp(14px, 1vw, 16px);
	font-weight: 600;

	line-height: 1.55;

	color: var(--primary);
}


/* =========================================================
   사람 일러스트

   왼쪽 하단에 크게 배치
   ========================================================= */

.people-box {
	position: absolute;

	left: 0;
	bottom: 0;

	z-index: 3;

	width: 83%;
}

.people-image {
	display: block;

	width: 100%;
	max-width: 680px;
	max-height: 52vh;

	margin: 0 auto;

	object-fit: contain;
	object-position: left bottom;
}


/* =========================================================
   RIGHT
   ========================================================= */

.auth-right {
	flex: 1;

	min-width: 0;
	height: 100%;
	min-height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	padding: 40px 5%;

	background-color: var(--page-bg);
}


/* =========================================================
   LOGIN FORM

   카드 없음
   오른쪽 화면 중앙에 폼만 배치
   ========================================================= */

.login-form-wrap {
	width: 64%;
	min-width: 360px;
	max-width: 480px;

	transform: translate(-4%, -2%);
}


/* =========================================================
   로그인 TITLE
   ========================================================= */

.login-title {
	margin: 0 0 clamp(28px, 4vh, 40px);

	text-align: center;

	font-size: clamp(28px, 2vw, 34px);
	font-weight: 700;

	letter-spacing: -0.5px;

	color: var(--text-main);
}


/* =========================================================
   INPUT
   ========================================================= */

.auth-input {
	width: 100%;

	height: clamp(48px, 5.5vh, 54px);

	padding: 0 16px;

	border: 1px solid var(--input-border);
	border-radius: 10px;

	background-color: #FFFFFF;

	color: #1F2937;

	font-size: 14px;

	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.05);

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.auth-input::placeholder {
	color: var(--text-placeholder);
}

.auth-input:focus {
	border-color: var(--primary);

	outline: none;

	box-shadow:
		0 0 0 3px rgba(99, 102, 241, 0.10);
}


/* Bootstrap 기본 focus 덮어쓰기 */

.form-control:focus {
	border-color: var(--primary);

	box-shadow:
		0 0 0 3px rgba(99, 102, 241, 0.10);
}


/* =========================================================
   로그인 유지
   ========================================================= */

.remember-box {
	margin-top: 14px;
	margin-bottom: 25px;

	font-size: 13px;

	color: var(--text-sub);
}

.remember-box .form-check-input {
	margin-top: 0.2em;

	border: 1px solid #9CA3AF;

	border-radius: 3px;

	box-shadow: none;
}

.remember-box .form-check-input:checked {
	background-color: var(--primary);

	border-color: var(--primary);
}

.remember-box .form-check-input:focus {
	border-color: var(--primary);

	box-shadow:
		0 0 0 3px rgba(99, 102, 241, 0.10);
}


/* =========================================================
   PRIMARY 로그인 버튼

   네 디자인 시스템 기준
   ========================================================= */

.login-btn {
	width: 100%;

	height: clamp(48px, 5.5vh, 54px);

	padding: 0 20px;

	border: none;
	border-radius: 10px;

	background-color: var(--primary);

	color: #FFFFFF;

	font-size: 14px;
	font-weight: 600;

	box-shadow:
		0 2px 8px rgba(99, 102, 241, 0.15);

	transition: background-color 0.15s ease;
}

.login-btn:hover,
.login-btn:focus,
.login-btn:active {
	background-color: var(--primary-hover) !important;

	color: #FFFFFF !important;

	border-color: transparent !important;
}


/* =========================================================
   또는 DIVIDER
   ========================================================= */

.login-divider {
	width: 100%;

	display: flex;

	align-items: center;

	gap: 14px;

	margin: clamp(26px, 4vh, 36px) 0;

	color: var(--text-sub);

	font-size: 13px;
}

.login-divider::before,
.login-divider::after {
	content: "";

	flex: 1;

	height: 1px;

	border-top: 1px dashed #9CA3AF;
}


/* =========================================================
   GOOGLE 버튼

   OAuth2 구현 전 임시 디자인
   ========================================================= */

   .google-login-link {
       display: flex;
       justify-content: center;
       width: 100%;
   }

   .google-login-img {
       display: block;
       height: 56px;
       width: auto;
       margin: 0 auto;
   }


/* =========================================================
   회원가입 안내
   ========================================================= */

.join-guide {
	margin-top: 24px;

	text-align: center;

	font-size: 13px;

	color: var(--text-sub);
}

.join-guide a {
	margin-left: 6px;

	color: var(--primary);

	font-weight: 600;

	text-decoration: none;
}

.join-guide a:hover {
	color: var(--primary-hover);

	text-decoration: underline;
}

/* =========================================================
   비밀번호 css
   ========================================================= */

.password-input-wrap {
	position: relative;
}

.password-input-wrap .auth-input {
	padding-right: 45px;
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);

	border: none;
	background: transparent;
	padding: 0;

	color: #9CA3AF;
	font-size: 18px;
	cursor: pointer;
}

.password-toggle:hover {
	color: #6366F1;
}

/* =========================================================
   JOIN 페이지에서도 같이 사용하기 위한 스타일
   ========================================================= */

.join-form-wrap {
	width: 64%;
	min-width: 390px;
	max-width: 520px;
}

.auth-label {
	font-size: 14px;
	font-weight: 600;

	color: #4B5563;
}

.join-form-wrap .auth-label {
	height: 48px;
	display: flex;
	align-items: center;
	white-space: nowrap;
}


/* Radio */

.form-check-label {
	font-size: 14px;

	color: #4B5563;
}

.form-check-input:checked {
	background-color: var(--primary);

	border-color: var(--primary);
}

/* =========================================================
   join 검증 문구 스타일
   ========================================================= */


.validation-message {
	margin-top: 5px;
	font-size: 12px;
}

.validation-message:empty {
	display: none;
}

.validation-message.success {
	color: #22C55E;
}

.validation-message.error {
	color: #EF4444;
}

/* =========================================================
   큰 모니터

   화면만 커지고 내부 요소가 너무 작아지는 문제 방지
   ========================================================= */

/*@media (min-width: 1500px) {

	.left-content {
		width: 60%;
		max-width: 520px;
	}

	.login-form-wrap {
		width: 60%;
		max-width: 500px;
	}

	.people-box {
		width: 94%;
	}

	.people-image {
		max-width: 820px;
		max-height: 60vh;
	}

}*/


/* =========================================================
   Notebook / 작은 데스크탑
   ========================================================= */

/*@media (max-width: 1200px) {

	:root {
		--left-width: 48%;
	}

	.left-content {
		width: 68%;
	}

	.login-form-wrap {
		width: 70%;
		min-width: 320px;
	}

	.people-box {
		width: 95%;
	}

}*/


/* =========================================================
   Tablet
   ========================================================= */

/*@media (max-width: 991px) {

	.auth-page {
		display: block;
	}

	.auth-left,
	.auth-right {
		width: 100%;
		max-width: 100%;

		flex: none;
	}

	.auth-left {
		min-height: 540px;
	}

	
       세로 배치에서는 곡선이 어색해서 숨김
    
	.auth-left::before,
	.auth-left::after {
		display: none;
	}

	.left-content {
		width: 70%;
		max-width: 500px;
	}

	.people-box {
		width: 70%;

		left: 50%;

		transform: translateX(-50%);
	}

	.people-image {
		max-height: 270px;
	}

	.auth-right {
		min-height: 620px;

		padding: 60px 30px;
	}

	.login-form-wrap,
	.join-form-wrap {
		width: 100%;

		min-width: 0;
		max-width: 460px;

		transform: none;
	}

}*/


/* =========================================================
   Mobile
   ========================================================= */

/*@media (max-width: 576px) {

	.auth-left {
		min-height: 500px;
	}

	.logo-box {
		padding-top: 35px;
	}

	.auth-logo {
		width: 120px;
	}

	.left-content {
		width: 82%;
	}

	.auth-copy h1 {
		font-size: 26px;
	}

	.auth-copy p {
		font-size: 14px;
	}

	.people-box {
		width: 90%;
	}

	.people-image {
		max-height: 245px;
	}

	.auth-right {
		min-height: auto;

		padding: 55px 24px;
	}

	.login-title {
		font-size: 28px;
	}

}*/