/*! Do not edit this file. Please integrate your custom style either on your theme templates or through Widget > Custom CSS */.wp-social-login-provider-list{padding:10px}.wp-social-login-provider-list a{text-decoration:none}.wp-social-login-provider-list img{border:0}
/* 전체 소셜 로그인 박스 */
.jeopju-social-login-box {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.jeopju-social-login-box h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

/* 소셜 로그인 연결 버튼 목록 */
.wp-social-login-provider-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.wp-social-login-provider-list .wp-social-login-provider-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 112px;
	padding: 10px 13px;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 999px;
	background: var(--box-bg, #fff);
	color: var(--text-color, #222);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.wp-social-login-provider-list a.wp-social-login-provider-button:hover,
.wp-social-login-provider-list a.wp-social-login-provider-button:focus {
	transform: translateY(-1px);
	border-color: #222;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}

.wp-social-login-provider-list .provider-name {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.wp-social-login-provider-list .provider-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 7px;
	border-radius: 999px;
	background: #f1f1f1;
	color: #666;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

/* 이미 연결된 provider 버튼 */
.wp-social-login-provider-list .wp-social-login-provider-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	background: #f5f5f5;
	color: #777;
}

.wp-social-login-provider-list .wp-social-login-provider-disabled .provider-status {
	background: #e5e5e5;
	color: #555;
}

/* provider별 hover 포인트 */
.wp-social-login-provider-facebook:hover,
.wp-social-login-provider-facebook:focus {
	border-color: #1877f2;
	color: #1877f2;
}

.wp-social-login-provider-google:hover,
.wp-social-login-provider-google:focus {
	border-color: #ea4335;
	color: #ea4335;
}

.wp-social-login-provider-twitter:hover,
.wp-social-login-provider-twitter:focus {
	border-color: #111;
	color: #111;
}

.wp-social-login-provider-naver:hover,
.wp-social-login-provider-naver:focus {
	border-color: #03c75a;
	color: #03c75a;
}

.wp-social-login-provider-kakao:hover,
.wp-social-login-provider-kakao:focus {
	border-color: #fee500;
	color: #3c1e1e;
}

.wp-social-login-provider-discord:hover,
.wp-social-login-provider-discord:focus {
	border-color: #5865f2;
	color: #5865f2;
}

.wp-social-login-provider-telegram:hover,
.wp-social-login-provider-telegram:focus {
	border-color: #229ed9;
	color: #229ed9;
}

/* 연결된 소셜 계정 목록 */
.user-provider ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.user-provider li.profile-connect {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 12px;
	background: var(--box-bg, #fff);
	font-size: 15px;
	font-weight: 600;
	color: var(--text-color, #222);
}

.user-provider li.profile-connect > div {
	display: block;
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #eee;
}

.user-provider li.profile-connect .disconnect {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border: 1px solid #d33;
	border-radius: 999px;
	color: #d33;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.user-provider li.profile-connect .disconnect:hover,
.user-provider li.profile-connect .disconnect:focus {
	background: #d33;
	color: #fff;
	transform: translateY(-1px);
}

.user-provider li.profile-connect .disconnect:active {
	transform: translateY(0);
}

.user-provider .no-connect-provider {
	margin: 0;
	padding: 14px;
	border: 1px dashed var(--border-color, #ccc);
	border-radius: 12px;
	color: #777;
	font-size: 14px;
	text-align: center;
}

/* 모바일 */
@media (max-width: 480px) {
	.wp-social-login-provider-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-social-login-provider-list .wp-social-login-provider-button {
		width: 100%;
		min-width: 0;
	}

	.user-provider li.profile-connect {
		padding: 10px 12px;
		gap: 10px;
	}

	.user-provider li.profile-connect > div {
		width: 42px;
		height: 42px;
		flex-basis: 42px;
	}

	.user-provider li.profile-connect .disconnect {
		padding: 6px 9px;
		font-size: 12px;
	}
}