@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');

/* 추석 인트로 팝업(popup_260923) - 기준 스테이지 590x640 */
.pop_songpyeon {
	--u: 1px; /* 컨테이너 쿼리 미지원 시 디자인 원본 배율 */
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
}

@supports (container-type: inline-size) {
	.pop_songpyeon {
		container-type: inline-size;
		--u: 0.169492cqw; /* 100cqw / 590 */
	}
}

.pop_songpyeon_visual {
	display: block;
	width: 100%;
	height: auto;
}

.pop_songpyeon_btn {
	position: absolute;
	left: 50%;
	bottom: calc(var(--u) * 30);
	transform: translateX(-50%);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 10);
	width: calc(var(--u) * 380);
	height: calc(var(--u) * 70);
	padding: calc(var(--u) * 20) 0;
	border: calc(var(--u) * 4) solid #af7542;
	border-radius: 99px;
	background-image: linear-gradient(to bottom, #5d2f15 14.667%, #713918 32.645%, #5d2f15 123.33%);
	box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 5.5) rgba(77, 56, 46, 0.24);
}

.pop_songpyeon_line {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: calc(var(--u) * 376);
	height: calc(var(--u) * 66);
	border: calc(var(--u) * 2) solid #d29b63;
	border-radius: 99px;
	box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 5.5) rgba(77, 56, 46, 0.24);
	pointer-events: none;
}

.pop_songpyeon_star {
	flex: 0 0 auto;
	display: block;
	width: calc(var(--u) * 22);
	height: calc(var(--u) * 22);
}

.pop_songpyeon_txt {
	flex: 0 0 auto;
	font-family: 'Nanum Myeongjo', '나눔명조', NanumMyeongjo, serif;
	font-style: normal;
	font-weight: 400;
	font-size: calc(var(--u) * 24);
	line-height: normal;
	letter-spacing: calc(var(--u) * -0.24);
	color: #fcc88f;
	text-align: center;
	white-space: nowrap;
}

/* 테두리를 따라 도는 반짝임 - offset-path 미지원 브라우저에서는 숨김 */
.pop_songpyeon_glow {
	display: none;
}

@supports (offset-path: border-box) {
	.pop_songpyeon_glow {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		offset-path: border-box;
		offset-rotate: 0deg;
		offset-distance: 0%;
		animation: pop_songpyeon_run 3s linear infinite;
		pointer-events: none;
	}

	.pop_songpyeon_glow--t1 { width: calc(var(--u) * 56); height: calc(var(--u) * 56); animation-delay: -0.98s; }
	.pop_songpyeon_glow--t2 { width: calc(var(--u) * 50); height: calc(var(--u) * 50); animation-delay: -0.96s; }
	.pop_songpyeon_glow--t3 { width: calc(var(--u) * 47); height: calc(var(--u) * 47); animation-delay: -0.94s; }
	.pop_songpyeon_glow--t4 { width: calc(var(--u) * 49); height: calc(var(--u) * 49); animation-delay: -0.92s; }
	.pop_songpyeon_glow--t5 { width: calc(var(--u) * 50); height: calc(var(--u) * 50); animation-delay: -0.90s; }
	.pop_songpyeon_glow--t6 { width: calc(var(--u) * 52); height: calc(var(--u) * 52); animation-delay: -0.88s; }

	.pop_songpyeon_glow--lead {
		width: calc(var(--u) * 93);
		height: calc(var(--u) * 93);
		animation-delay: -1s;
		mix-blend-mode: color-dodge;
	}

	.pop_songpyeon_glow--sparkle {
		width: calc(var(--u) * 36);
		height: calc(var(--u) * 36);
		object-fit: cover;
		animation-delay: -1s;
		mix-blend-mode: color-dodge;
	}
}

@keyframes pop_songpyeon_run {
	from { offset-distance: 0%; }
	to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pop_songpyeon_glow { animation: none; }
}