
.overlay {
	position: fixed; /* 또는 fixed */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4); /* 어두운 투명 배경 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.loader {
	width: 48px;
	height: 48px;
	border: 6px solid #fff;
	border-top: 6px solid #888;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.btn-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: #555;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ===== 키워드 클릭 → 연관 키워드 조회 시 'AI 분석 중' 풀스크린 오버레이 ===== */
#kwaiOverlay {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background: radial-gradient(120% 120% at 50% 0%, rgba(238,242,255,.95) 0%, rgba(224,231,255,.95) 45%, rgba(199,210,254,.95) 100%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: kwai-in .22s ease both;
}
#kwaiOverlay .kwai-card { text-align: center; max-width: 360px; }
#kwaiOverlay .kwai-radar {
	position: relative;
	width: 132px;
	height: 132px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(99,102,241,.12) 0%, rgba(99,102,241,0) 70%);
}
#kwaiOverlay .kwai-radar::before,
#kwaiOverlay .kwai-radar::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(99,102,241,.35);
}
#kwaiOverlay .kwai-radar::after { animation: kwai-ping 1.8s ease-out infinite; }
#kwaiOverlay .kwai-sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
}
#kwaiOverlay .kwai-sweep::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 50%;
	transform-origin: 0 0;
	background: conic-gradient(from 0deg, rgba(79,70,229,.5), rgba(79,70,229,0) 65deg);
	animation: kwai-spin 1.4s linear infinite;
}
#kwaiOverlay .kwai-core {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(79,70,229,.35);
	animation: kwai-bob 1.6s ease-in-out infinite;
}
#kwaiOverlay .kwai-title { font-size: 19px; font-weight: 900; color: #1E1B4B; letter-spacing: -.3px; }
#kwaiOverlay .kwai-title b { color: #4F46E5; }
#kwaiOverlay .kwai-sub {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #6366F1;
	min-height: 18px;
	transition: opacity .25s ease;
}
#kwaiOverlay .kwai-bar {
	margin: 18px auto 0;
	width: 220px;
	max-width: 80%;
	height: 6px;
	border-radius: 999px;
	background: rgba(99,102,241,.18);
	overflow: hidden;
}
#kwaiOverlay .kwai-bar i {
	display: block;
	height: 100%;
	width: 40%;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(99,102,241,0), #6366F1 40%, #4F46E5 60%, rgba(99,102,241,0));
	animation: kwai-slide 1.2s ease-in-out infinite;
}
@keyframes kwai-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kwai-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes kwai-spin { to { transform: rotate(360deg); } }
@keyframes kwai-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kwai-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

