@charset "utf-8";
/* 메인 비주얼 (fade) — /js/main_visual.js 와 함께 사용 */

.mvisual {
	--mv-duration: 6000ms;
	--mv-fade: 1400ms;
	--mv-text: #222;
	--mv-point: #ee8797;
	position: relative;
	width: 100%;
	height: clamp(640px, 100vh, 920px);
	min-width: 1300px;
	overflow: hidden;
	background: #f4f1ee;
	isolation: isolate;
}

.mvisual__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mv-fade) ease, visibility 0s linear var(--mv-fade);
	z-index: 1;
}
.mvisual__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--mv-fade) ease, visibility 0s;
	z-index: 2;
}

/* 이미지 + 천천히 줌아웃 */
.mvisual__media,
.mvisual__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.mvisual__media img {
	object-fit: cover;
	object-position: var(--mv-pos, center);
	transform: scale(1.08);
	transition: transform calc(var(--mv-duration) + var(--mv-fade)) linear;
}
.mvisual__slide.is-active .mvisual__media img { transform: scale(1); }

/* 상단 헤더 가독성 + 우측 문구 영역 */
.mvisual__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(0,0,0,.5) 0, rgba(0,0,0,.32) 150px, rgba(0,0,0,0) 260px),
		linear-gradient(to left, rgba(255,255,255,.72) 0, rgba(255,255,255,.45) 35%, rgba(255,255,255,0) 62%);
}

/* 문구 */
.mvisual__inner {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 1300px;
	margin: 0 auto;
	padding: 90px 40px 0;
	box-sizing: border-box;
}
.mvisual__text {
	min-width: 0;
	max-width: 100%;
	text-align: right;
	color: var(--mv-text);
	word-break: keep-all;
}
.mvisual__text > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.mvisual__slide.is-active .mvisual__text > * { opacity: 1; transform: none; }
.mvisual__slide.is-active .mvisual__title { transition-delay: .5s; }
.mvisual__slide.is-active .mvisual__desc  { transition-delay: .8s; }
.mvisual__slide.is-active .mvisual__link  { transition-delay: 1.1s; }

.mvisual__title {
	margin: 0 0 40px;
	font-family: 'NBGothicB', sans-serif;
	font-size: 42px;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: -0.02em;
}
.mvisual__desc {
	margin: 0 0 50px;
	font-family: 'NBGothic', sans-serif;
	font-size: 19px;
	line-height: 1.75;
	color: #333;
}
.mvisual__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	font-family: 'NBGothicB', sans-serif;
	font-size: 18px;
	color: var(--mv-text);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}
.mvisual__link::after {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	transition: width .3s ease;
}
.mvisual__link:hover,
.mvisual__link:focus-visible { color: var(--mv-point); }
.mvisual__link:hover::after { width: 44px; }

/* 컨트롤 */
.mvisual__ctrl {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 50px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1300px;
	padding: 0 40px;
	box-sizing: border-box;
	justify-content: flex-end;
	font-family: 'NBGothic', sans-serif;
	color: #333;
}
.mvisual__ctrl button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(0,0,0,.25);
	border-radius: 50%;
	background: rgba(255,255,255,.6);
	color: #333;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.mvisual__ctrl button:hover,
.mvisual__ctrl button:focus-visible { background: #333; color: #fff; border-color: #333; }
.mvisual__ctrl svg { width: 14px; height: 14px; fill: currentColor; }

.mvisual__count { font-size: 15px; letter-spacing: .05em; min-width: 64px; text-align: center; }
.mvisual__count b { font-family: 'NBGothicB', sans-serif; font-weight: normal; color: var(--mv-text); }

.mvisual__dots { display: flex; gap: 8px; }
.mvisual__dots .mvisual__dot {
	position: relative;
	width: 48px;
	height: 3px;
	border: 0;
	border-radius: 2px;
	background: rgba(0,0,0,.18);
	overflow: hidden;
}
.mvisual__dots .mvisual__dot:hover { background: rgba(0,0,0,.35); }
.mvisual__dot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #333;
	transform: scaleX(0);
	transform-origin: left;
}
.mvisual__dot.is-active::before { animation: mvProgress var(--mv-duration) linear forwards; }
.mvisual.is-paused .mvisual__dot.is-active::before { animation-play-state: paused; }
.mvisual__dot.is-done::before { transform: scaleX(1); }
@keyframes mvProgress { to { transform: scaleX(1); } }

.mvisual__toggle .ico-play { display: none; }
.mvisual.is-paused .mvisual__toggle .ico-play { display: block; }
.mvisual.is-paused .mvisual__toggle .ico-pause { display: none; }

.mvisual .sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 태블릿 */
@media (max-width: 1023px) {
	.mvisual { min-width: 0; height: 600px; }
	.mvisual__inner { padding: 60px 40px 0; }
	.mvisual__title { font-size: 32px; margin-bottom: 28px; }
	.mvisual__desc { font-size: 16px; margin-bottom: 36px; }
	.mvisual__link { font-size: 16px; }
	.mvisual__ctrl { bottom: 30px; }
}

/* 모바일 : 문구를 하단으로 */
@media (max-width: 767px) {
	.mvisual { height: 520px; }
	.mvisual__slide::after {
		background: linear-gradient(to top, rgba(255,255,255,.92) 0, rgba(255,255,255,.75) 45%, rgba(255,255,255,0) 75%);
	}
	.mvisual__media img { object-position: var(--mv-pos-m, var(--mv-pos, center)); }
	.mvisual__inner { align-items: flex-end; justify-content: flex-start; padding: 0 20px 90px; }
	.mvisual__text { text-align: left; width: 100%; }
	.mvisual__title { font-size: 21px; margin-bottom: 14px; }
	.mvisual__desc { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
	.mvisual__desc br { display: none; }
	.mvisual__link { font-size: 14px; }
	.mvisual__ctrl { bottom: 30px; padding: 0 20px; justify-content: flex-start; gap: 12px; }
	.mvisual__dots .mvisual__dot { width: 28px; }
	.mvisual__ctrl button { width: 30px; height: 30px; }
	.mvisual__count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mvisual { --mv-fade: 1ms; }
	.mvisual__media img { transform: none !important; transition: none; }
	.mvisual__text > * { transition: none; transform: none; }
}