/* /member/css/member.css */

body.member-page {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 2em 0;
}

.login-container,
.register-container,
.profile-container {
	background-color: var(--content-bg-color);
	padding: 2em 2.5em;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	width: 100%;
}

.login-container,
.register-container {
	max-width: 420px;
}

.profile-container {
	max-width: 650px;
}

.login-container h1,
.register-container h1,
.profile-container h1 {
	text-align: center;
	margin-bottom: 1.5em;
}

.login-container .form-group,
.register-container .form-group {
	margin-bottom: 1.2em;
}
.profile-container .form-group {
    margin-bottom: 1.5em;
}

.login-container .button-primary,
.register-container .button-primary {
	width: 100%;
	padding: 12px;
	font-size: 1.05em;
	margin-top: 1em;
}

.login-link,
.register-link {
	text-align: center;
	margin-top: 1.5em;
	font-size: 0.9em;
}
.login-link a,
.register-link a {
	color: var(--primary-color);
	font-weight: 500;
}
.register-link {
    margin-bottom: 1.5em;
}

.sns-login-buttons {
	margin-top: 2em;
	text-align: center;
}
.sns-login-buttons p {
	font-size: 0.85em;
	color: var(--text-light-color);
	margin-bottom: 1em;
	position: relative;
	text-align: center;
}
.sns-login-buttons p::before,
.sns-login-buttons p::after {
	content: ''; position: absolute; top: 50%;
	width: 35%; height: 1px; background-color: var(--border-color);
}
.sns-login-buttons p::before { left: 0; }
.sns-login-buttons p::after { right: 0; }

.sns-login-buttons .btn-sns {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 15px; border-radius: 5px; margin: 5px;
	text-decoration: none; color: white; font-size: 0.9em;
	min-width: 150px; border: none; cursor: pointer;
    transition: opacity 0.2s ease;
}
.sns-login-buttons .btn-sns:hover { opacity: 0.9; }

.sns-login-buttons .btn-google .google-svg-logo {
    width: 18px; /* SVG 크기 조정 */
    height: 18px;
    margin-right: 8px; /* 텍스트와의 간격 */
    vertical-align: middle; /* 세로 정렬 */
}

.profile-container .sns-link-section .sns-info .google-svg-icon {
    width: 20px; /* SVG 크기 조정 */
    height: 20px;
    margin-right: 10px; /* 텍스트와의 간격 */
    vertical-align: middle;
}
/* 기존 FontAwesome 아이콘 스타일 조정 (선택적) */
.profile-container .sns-link-section .sns-info i {
     width: 20px; /* 다른 아이콘과 너비 맞춤 */
     text-align: center;
 }


.btn-sns i { margin-right: 8px; font-size: 1.2em; color: white;}
.btn-google { background-color: #DB4437; }
.btn-naver { background-color: #03C75A; }
.btn-kakao { background-color: #FEE500; color: #191919; }
.btn-kakao i { color: #191919;}


.profile-container .form-section {
    margin-bottom: 2.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--border-light-color);
}
.profile-container .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.profile-container .form-section h2 {
    font-size: 1.2em;
    margin-bottom: 1em;
}

.profile-container .sns-link-section ul {
    list-style: none; padding: 0;
}
.profile-container .sns-link-section li {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1em; padding-bottom: 1em;
    border-bottom: 1px dashed var(--border-light-color);
}
.profile-container .sns-link-section li:last-child {
    border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.profile-container .sns-link-section .sns-info {
    display: flex; align-items: center;
}
.profile-container .sns-link-section .sns-info i {
    font-size: 1.5em; margin-right: 10px; width: 25px; text-align: center;
}
.profile-container .sns-link-section .sns-info span { font-weight: 500; }
.profile-container .sns-link-section .button-secondary,
.profile-container .sns-link-section .button-danger {
    font-size: 0.9em; padding: 6px 12px;
}
.profile-container .sns-icon-google { color: #DB4437; }
.profile-container .sns-icon-naver { color: #03C75A; }
.profile-container .sns-icon-kakao { color: #191919; background-color: #FEE500; border-radius:50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; line-height: 1;}

.profile-container #delete-project-modal p { /* 프로필 페이지 내 모달 스타일 정의 */
	margin-bottom: 0.5em;
	text-align: center;
	line-height: 1.5;
}
.profile-container #delete-project-modal p strong {
	color: var(--danger-color);
	font-weight: 700;
}
.profile-container #delete-project-modal .warning-text {
	font-size: 0.9em;
	color: var(--text-light-color);
	margin-top: 1em;
}