@charset "utf-8";

@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");

.sns_icon { display: inline-flex; align-items: center; padding: 0; font-weight: 500; }
.sns_icon::before { content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 8px; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }
.sns_icon.google::before { background-image: url('../img/btn_google.png'); }
.sns_icon.naver::before { background-image: url('../img/btn_naver.png'); }
.sns_icon.kakao::before { background-image: url('../img/btn_kakao.png'); }
.sns_icon.discord::before { background-image: url('../img/btn_discord.png'); }
.sns_icon.apple::before { background-image: url('../img/btn_apple.png'); filter: invert(1); }
.sns_icon.twitter::before { background-image: url('../img/btn_twitter.png'); }
.sns_icon.facebook::before { background-image: url('../img/btn_facebook.png'); }
.sns_icon.github::before { background-image: url('../img/btn_github.png'); filter: invert(1); }
.sns_icon.tiktok::before { background-image: url('../img/tiktok.svg'); }

/* Container */
.sociallogin_login {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	margin: 20px 0 0 0;
	list-style: none;
	width: 100%;
}
.sociallogin_login li {
	display: block;
	width: 100%;
	margin: 0;
}
.sociallogin_login li > div {
	width: 100%;
}

/* Base Button Style */
.sociallogin_login .loginBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 50px;
	border-radius: 8px;
	text-decoration: none;
	font-family: 'Roboto', 'Noto Sans KR', sans-serif;
	font-size: 15px;
	font-weight: 500;
	transition: all 0.2s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	border: 1px solid transparent;
	box-sizing: border-box;
}

.sociallogin_login .loginBtn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Icon Container */
.sociallogin_login .loginBtn .icon, 
.sociallogin_login .loginBtn img {
	position: absolute;
	left: 18px;
	width: 24px;
	height: 24px;
	display: inline-block;
}

.sociallogin_login .loginBtn .buttonText {
	display: inline-block;
	padding-left: 10px;
}

/* Google */
.sociallogin_google .loginBtn { background: #ffffff; color: #3c4043; border-color: #dadce0; }
.sociallogin_google .loginBtn:hover { background: #f8f9fa; }
.sociallogin_google span.icon { background: url('../img/btn_google.png') center no-repeat; background-size: contain; }

/* Naver */
.sociallogin_naver .loginBtn { background: #03C75A; color: #ffffff; border-color: #03C75A; }
.sociallogin_naver .loginBtn:hover { background: #02b350; }
.sociallogin_naver span.icon { background: url('../img/btn_naver.png') center no-repeat; background-size: contain; }

/* Kakao */
.sociallogin_kakao .loginBtn { background: #FEE500; color: #000000; border-color: #FEE500; }
.sociallogin_kakao .loginBtn:hover { background: #FADA0A; }
.sociallogin_kakao span.icon { background: url('../img/btn_kakao.png') center no-repeat; background-size: contain; }

/* Discord */
.sociallogin_discord .loginBtn { background: #5865F2; color: #ffffff; border-color: #5865F2; }
.sociallogin_discord .loginBtn:hover { background: #4752C4; }
.sociallogin_discord span.icon { background: url('../img/btn_discord.png') center no-repeat; background-size: contain; }

/* Apple */
.sociallogin_apple .loginBtn { background: #000000; color: #ffffff; border-color: #000000; }
.sociallogin_apple .loginBtn:hover { background: #333333; }
.sociallogin_apple span.icon { background: url('../img/btn_apple.png') center no-repeat; background-size: contain; filter: invert(1); }

/* Twitter (Legacy) */
.sociallogin_twitter .loginBtn { background: #1DA1F2; color: #ffffff; border-color: #1DA1F2; }
.sociallogin_twitter .loginBtn:hover { background: #1a91da; }
.sociallogin_twitter span.icon { background: url('../img/btn_twitter.png') center no-repeat; background-size: contain; }

/* Facebook (Legacy) */
.sociallogin_facebook .loginBtn { background: #1877F2; color: #ffffff; border-color: #1877F2; }
.sociallogin_facebook .loginBtn:hover { background: #166fe5; }
.sociallogin_facebook span.icon { background: url('../img/btn_facebook.png') center no-repeat; background-size: contain; }

/* GitHub (Legacy) */
.sociallogin_github .loginBtn { background: #24292e; color: #ffffff; border-color: #24292e; }
.sociallogin_github .loginBtn:hover { background: #000000; }
.sociallogin_github span.icon { background: url('../img/btn_github.png') center no-repeat; background-size: contain; filter: invert(1); }

/* TikTok (Legacy) */
.sociallogin_tiktok .loginBtn { background: #000000; color: #ffffff; border-color: #000000; }
.sociallogin_tiktok .loginBtn:hover { background: #333333; }
.sociallogin_tiktok img { filter: invert(1); width: 22px !important; height: 22px !important; margin: 0 !important; top: 13px; left: 19px !important; }

/* rechecked_sns_login */
.rechecked_sns_login { padding:0; margin:20px 0 0 0; list-style:none; overflow:hidden; }
.rechecked_sns_login li { display:block; padding:0; margin-bottom:10px; }