/* [수정 2026-09-10] 웨이브 페이드 + 동그란 빛 정원(비율 유지) */

/* 스택: bg(0) → wave(1) → overlay(2) → content(3) */



.dsa-wave-test-banner {

	position: sticky;

	top: 0;

	z-index: 200;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: space-between;

	gap: 1.2rem 2rem;

	padding: 1.2rem 2.4rem;

	background: #102543;

	color: #fff;

	font-size: 1.4rem;

	line-height: 1.4;

}



.dsa-wave-test-banner a {

	color: #5fd4ff;

	text-decoration: underline;

}



.dsa-wave-test-banner .dsa-wave-test-actions {

	display: flex;

	flex-wrap: wrap;

	gap: 0.8rem;

}



.dsa-wave-test-banner button {

	appearance: none;

	border: 1px solid rgba(255, 255, 255, 0.35);

	background: rgba(255, 255, 255, 0.08);

	color: #fff;

	border-radius: 999px;

	padding: 0.6rem 1.4rem;

	font: inherit;

	cursor: pointer;

}



.dsa-wave-test-banner button.is-on {

	background: #3ba9d9;

	border-color: #3ba9d9;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-bg {
	z-index: 0;
}

/* [수정 2026-09-11] main 전용 — main_bg07 중앙 배 선명 표시 (cover/오버레이로 흐려지지 않게) */
.main-visual.dsa-hero.dsa-hero--bg07 .dsa-hero-bg {
	background: #0a2f3d;
	overflow: hidden;
}
.main-visual.dsa-hero.dsa-hero--bg07 .dsa-hero-bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	/* 히어로 높이(784) = 이미지 높이 → 세로 1:1, 가로만 크롭 / 배는 중앙 */
	object-fit: cover;
	object-position: center center;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
	-ms-interpolation-mode: bicubic;
	/* 구체·배 디테일 대비 살짝 살려 선명하게 */
	filter: contrast(1.08) saturate(1.06) brightness(1.04);
	transform: translateZ(0);
	backface-visibility: hidden;
}
/* 어두운 오버레이 제거 → 원본 대비/선명도 유지 */
.main-visual.dsa-hero.dsa-hero--bg07 .hero-overlay {
	background: none !important;
}

/* [수정 2026-09-11] 태블릿/모바일 — object-position만 사용 (translateX 시 좌측 여백 잘림) */
@media screen and (max-width: 1024px) {
	.main-visual.dsa-hero.dsa-hero--bg07 .dsa-hero-bg img {
		object-position: 70% 42%;
		transform: translateZ(0);
	}
}

@media screen and (max-width: 768px) {
	.main-visual.dsa-hero.dsa-hero--bg07 .dsa-hero-bg img {
		object-fit: cover;
		object-position: 72% 40%;
		/* 가로 translate 제거 → 왼쪽 끝 배경 잘림 방지 */
		inset: 0;
		width: 100%;
		height: 100%;
		transform: translateZ(0);
	}
	/* [수정 2026-09-11] 모바일 가독성 — 카피 영역 대비 강화, 배는 가장자리 유지 */
	.main-visual.dsa-hero.dsa-hero--bg07 .hero-overlay {
		background:
			radial-gradient(ellipse 90% 70% at 50% 38%, rgba(4, 28, 40, 0.72) 0%, rgba(4, 28, 40, 0.35) 45%, transparent 72%),
			linear-gradient(180deg, rgba(4, 28, 40, 0.45) 0%, rgba(4, 28, 40, 0.2) 40%, rgba(4, 28, 40, 0.15) 70%, rgba(4, 28, 40, 0.4) 100%) !important;
	}
	.main-visual.dsa-hero.dsa-hero--bg07 .hero-title img {
		filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
	}
	.main-visual.dsa-hero.dsa-hero--bg07 .dsa-hero-tagline {
		text-shadow:
			0 1px 2px rgba(0, 0, 0, 0.85),
			0 0 14px rgba(0, 0, 0, 0.55),
			0 2px 10px rgba(0, 0, 0, 0.45);
	}
	.main-visual.dsa-hero.dsa-hero--bg07 .hero-desc {
		text-shadow:
			0 1px 2px rgba(0, 0, 0, 0.9),
			0 0 12px rgba(0, 0, 0, 0.5),
			0 2px 8px rgba(0, 0, 0, 0.4);
	}
}

@media screen and (max-width: 480px) {
	.main-visual.dsa-hero.dsa-hero--bg07 .dsa-hero-bg img {
		object-position: 74% 38%;
		transform: translateZ(0);
	}
	.main-visual.dsa-hero.dsa-hero--bg07 .hero-overlay {
		background:
			radial-gradient(ellipse 95% 75% at 50% 36%, rgba(4, 28, 40, 0.78) 0%, rgba(4, 28, 40, 0.4) 48%, transparent 74%),
			linear-gradient(180deg, rgba(4, 28, 40, 0.5) 0%, rgba(4, 28, 40, 0.22) 42%, rgba(4, 28, 40, 0.18) 72%, rgba(4, 28, 40, 0.42) 100%) !important;
	}
}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave {

	position: absolute;

	inset: 0;

	z-index: 1;

	pointer-events: none;

	overflow: hidden;

	-webkit-mask-image:

		linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),

		linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);

	mask-image:

		linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),

		linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);

	-webkit-mask-composite: source-in;

	mask-composite: intersect;

}



.main-visual.dsa-hero.dsa-hero--wave-test .hero-overlay {

	z-index: 2;

}



.main-visual.dsa-hero.dsa-hero--wave-test .hero-content {

	position: relative;

	z-index: 3;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .ocean {

	position: absolute;

	left: 0;

	right: 0;

	bottom: 6%;

	height: 0;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-layer {

	position: absolute;

	left: 0;

	top: -14rem;

	width: 6400px;

	height: 20rem;

	background-repeat: repeat-x;

	background-position: 0 0;

	background-size: 1600px 200px;

	transform: translate3d(0, 0, 0);

	will-change: transform, opacity;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-layer--a {

	background-image: url('../../lib/images/2026/wave_line.svg');

	top: -15rem;

	opacity: 0.85;

	animation:

		dsa-wave-x 18s linear infinite,

		dsa-wave-swell 10.5s ease-in-out -1.8s infinite,

		dsa-wave-fade 18s ease-in-out infinite;

	filter: drop-shadow(0 0 6px rgba(95, 212, 255, 0.45));

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-layer--b {

	background-image: url('../../lib/images/2026/wave_line.svg');

	top: -13.5rem;

	opacity: 0.45;

	animation:

		dsa-wave-x 15s linear -0.2s infinite,

		dsa-wave-swell 10.5s ease-in-out -1.8s infinite,

		dsa-wave-fade-b 15s ease-in-out -0.2s infinite;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-layer--c {

	background-image: url('../../lib/images/2026/wave_line.svg');

	top: -14rem;

	opacity: 0.3;

	animation:

		dsa-wave-x 16.5s linear -0.2s infinite reverse,

		dsa-wave-swell 12s ease-in-out -0.7s infinite,

		dsa-wave-fade-c 16.5s ease-in-out -0.2s infinite;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-path-svg {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	z-index: 0;

	/* HTML: preserveAspectRatio="xMidYMid slice" — 균등 스케일로 circle 정원 유지 */

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-path-svg path {

	fill: none;

	stroke-linecap: round;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-path-svg #dsaWavePath,
.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-path-svg #dsaWavePath2 {

	stroke: none;

}



.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-path-svg path.wave-path--guide {

	display: none;

	stroke: #ff4d4d;

	stroke-width: 2;

	stroke-dasharray: 16 12;

	opacity: 0.9;

	filter: drop-shadow(0 0 5px rgba(255, 77, 77, 0.65));

}



.main-visual.dsa-hero.dsa-hero--wave-test.is-wave-show-guide .dsa-hero-wave .wave-path-svg path.wave-path--guide {

	display: block;

}



/* 동그란 빛 — 정원 (비균등 SVG 스케일/불필요 rotate 제거는 HTML에서 처리) */

.main-visual.dsa-hero.dsa-hero--wave-test .wave-mover {

	fill: #ebfcff;

	stroke: rgba(140, 230, 255, 0.7);

	stroke-width: 1.2;

	filter: drop-shadow(0 0 5px rgba(140, 230, 255, 0.9));

}



.main-visual.dsa-hero.dsa-hero--wave-test .wave-mover--soft {

	fill: rgba(200, 240, 255, 0.7);

	stroke: none;

	filter: drop-shadow(0 0 4px rgba(140, 230, 255, 0.55));

}



.main-visual.dsa-hero.dsa-hero--wave-test.is-wave-paused .dsa-hero-wave .wave-layer {

	animation-play-state: paused;

}



.main-visual.dsa-hero.dsa-hero--wave-test.is-wave-hide-scroll .dsa-hero-wave .wave-layer {

	display: none;

}



.main-visual.dsa-hero.dsa-hero--wave-test.is-wave-hide-lights .wave-mover-group {

	display: none;

}



@keyframes dsa-wave-x {

	0% { transform: translate3d(0, 0, 0); }

	100% { transform: translate3d(-1600px, 0, 0); }

}



@keyframes dsa-wave-swell {

	0%, 100% { margin-top: -0.8rem; }

	50% { margin-top: 0.5rem; }

}



@keyframes dsa-wave-fade {

	0% { opacity: 0; }

	8% { opacity: 0.85; }

	88% { opacity: 0.85; }

	100% { opacity: 0; }

}



@keyframes dsa-wave-fade-b {

	0% { opacity: 0; }

	8% { opacity: 0.45; }

	88% { opacity: 0.45; }

	100% { opacity: 0; }

}



@keyframes dsa-wave-fade-c {

	0% { opacity: 0; }

	8% { opacity: 0.3; }

	88% { opacity: 0.3; }

	100% { opacity: 0; }

}



@media (prefers-reduced-motion: reduce) {

	.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .wave-layer {

		animation: none;

		opacity: 0.55;

	}



	.main-visual.dsa-hero.dsa-hero--wave-test .wave-path-svg animateMotion,

	.main-visual.dsa-hero.dsa-hero--wave-test .wave-path-svg animate {

		display: none;

	}

}



@media screen and (max-width: 768px) {

	.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave .ocean {

		bottom: 12%;

	}



	.main-visual.dsa-hero.dsa-hero--wave-test .dsa-hero-wave {

		-webkit-mask-image:

			linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),

			linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);

		mask-image:

			linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),

			linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);

	}

}