/* ============================================================
   뷰피크 번역 로딩 모달
   이미지·라이브러리 없음 / CSS만 사용
   ※ 이전 SVG 스피너(.spinner-wrapper/.spinner)와 모달 고정 width·blur 는 제거됨.
      남아 있으면 폭이 그대로 넓고 스피너도 번져 보인다.
   ============================================================ */
.vp-loading {
	--vp-pink-1: #FF6FB1;
	--vp-pink-2: #C2185B;

	width: 100%;
	max-width: 360px;              /* 모달 가로 폭 — 여기서만 조정 */
	background: #fff;
	border-radius: 16px;
	padding: 40px 28px 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 8자 궤도 스피너 */
.vp-loading__spinner {
	position: relative;
	width: 56px;
	height: 34px;
	margin-bottom: 22px;
}
.vp-loading__spinner i {
	position: absolute;
	top: 0; left: 0;
	width: 9px; height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--vp-pink-1), var(--vp-pink-2));
	offset-path: path("M5,17 C5,3 22,3 28,17 C34,31 51,31 51,17 C51,3 34,3 28,17 C22,31 5,31 5,17");
	offset-rotate: 0deg;
	animation: vp-orbit 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.vp-loading__spinner i:nth-child(2) { animation-delay: -0.26s; opacity: 0.45; }
.vp-loading__spinner i:nth-child(3) { animation-delay: -0.52s; opacity: 0.18; }
@keyframes vp-orbit {
	0%   { offset-distance: 0%; }
	100% { offset-distance: 100%; }
}

/* 문구 */
.vp-loading__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #1C1C1E;
}
.vp-loading__title b { font-weight: 600; }
.vp-loading__dots i {
	display: inline-block;
	animation: vp-dot 1.4s ease-in-out infinite;
	font-style: normal;
}
.vp-loading__dots i:nth-child(2) { animation-delay: 0.18s; }
.vp-loading__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes vp-dot {
	0%, 60%, 100% { opacity: 0.2; }
	30%           { opacity: 1; }
}
.vp-loading__desc {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: -0.01em;
	color: #8E8E96;
}

@media (prefers-reduced-motion: reduce) {
	.vp-loading__spinner i { animation-duration: 4.5s; }
	.vp-loading__dots i { animation: none; opacity: 1; }
}

/* offset-path 미지원 구형 브라우저 대체 — 좌우로 흐르는 점 */
@supports not (offset-path: path("M0,0 L1,1")) {
	.vp-loading__spinner i {
		top: 50%;
		animation: vp-orbit-fallback 1.6s ease-in-out infinite;
	}
	@keyframes vp-orbit-fallback {
		0%, 100% { transform: translateX(0)    scale(0.7); }
		50%      { transform: translateX(47px) scale(1); }
	}
}

/* ── 오버레이 ── */
.loading-box{display:none;z-index:9999;position:fixed;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.60);}
.loading-box.on{display:block}
/* 고정 width/height(577x342)·배경 제거 — 폭은 .vp-loading 의 max-width 가 결정 */
.loading-box .loading{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:100%;max-width:360px;padding:0 16px;box-sizing:border-box;
	display:flex;justify-content:center;text-align:center
}