/**
 * 풀페이지 메인 (PRD §3) — 섹션 · 배경 영상 · 도트 내비 · 영상 제어
 *
 * 모바일(≤768px) 폴백과 반응형 오버라이드는 responsive.css 에 있다.
 * 이 파일은 template-front.php 에서만 로드된다 (조건부 enqueue).
 */

/* ── 1. 섹션 골격 ────────────────────────────────────────── */

.site-main--fullpage {
	/* 투명 헤더(변형 C/D)가 히어로 위에 겹쳐야 하므로 상단 여백을 두지 않는다. */
	margin-top: 0;
	padding-top: 0;
}

.fp-section {
	position: relative;
	display: flex;
	align-items: center;
	/* svh: iOS 주소창 표시/숨김에 따라 vh가 튀는 문제를 피한다. dvh는 스크롤 중 리플로우가 잦다. */
	min-height: 100svh;
	overflow: hidden;
	color: var(--color-white, #fff);
	isolation: isolate;
}

/* svh 미지원 브라우저 폴백 */
@supports not (height: 100svh) {
	.fp-section {
		min-height: 100vh;
	}
}

.fp-section__inner {
	position: relative;
	z-index: var(--z-section-content, 1);
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
}

.fp-section__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent, #C4A882);
}

.fp-section__title {
	margin: 0 0 24px;
	font-size: clamp(28px, 3.6vw, 56px);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.fp-section__desc {
	max-width: 46em;
	margin: 0 0 32px;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.75;
	opacity: 0.88;
}

.fp-section__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
	color: var(--color-white, #fff);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.fp-section__link:hover,
.fp-section__link:focus-visible {
	gap: 16px;
	color: var(--color-accent, #C4A882);
}

/* 줄 단위 스태거 마스크 — .line 이 잘라내고 .line__inner 가 올라온다 (Phase 2 GSAP) */
.line {
	display: block;
	overflow: hidden;
}

.line__inner {
	display: block;
}

/* ── 2. 배경 영상 ────────────────────────────────────────── */

.video-bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-video-bg, -1);
	overflow: hidden;
	/* poster 가 없거나 영상 로드 전 구간에서 흰 화면이 번쩍이지 않도록 어두운 바탕을 깐다.
	   흰 텍스트가 얹히므로 밝은 배경이 잠깐이라도 노출되면 글자가 사라져 보인다. */
	background-color: var(--color-bg-dark, #0B1B2B);
}

.video-bg__media,
.video-bg__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* 영상 위 스크림 — 흰 텍스트 명도 대비 확보 (WCAG 2.1 AA) */
.video-bg__scrim {
	position: absolute;
	inset: 0;
	z-index: var(--z-video-scrim, 0);
	background: linear-gradient(
		180deg,
		var(--video-scrim-strong, rgba(11, 27, 43, 0.65)) 0%,
		var(--video-scrim, rgba(11, 27, 43, 0.45)) 45%,
		var(--video-scrim-strong, rgba(11, 27, 43, 0.65)) 100%
	);
}

/* ── 3. HERO ─────────────────────────────────────────────── */

.hero__title {
	margin: 0 0 24px;
	font-size: clamp(32px, 4.4vw, 68px);
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: -0.025em;
	text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
}

.hero__desc {
	max-width: 42em;
	margin: 0 0 36px;
	font-size: clamp(16px, 1.25vw, 20px);
	line-height: 1.7;
	opacity: 0.9;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 30px;
	border-radius: var(--radius-full);
	background: var(--cta-bg, #C4A882);
	color: var(--cta-color, #fff);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--transition-fast), filter var(--transition-fast);
}

.hero__cta:hover,
.hero__cta:focus-visible {
	color: var(--cta-color, #fff);
	transform: translateY(-2px);
	filter: brightness(1.06);
}

/* SCROLL 인디케이터 — 반복 바운스 */
.hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--z-section-content, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.8);
}

.hero__scroll-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3em;
}

.hero__scroll-arrows {
	width: 16px;
	height: 14px;
	color: rgba(255, 255, 255, 0.8);
}

/* ── 4. SUMMARY — 수치 카드 ──────────────────────────────── */

.summary-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.summary-stats__item {
	padding: 28px 20px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(6px);
	text-align: center;
}

.summary-stats__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin-bottom: 8px;
}

.summary-stats__number {
	font-size: clamp(32px, 3.2vw, 52px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-accent, #C4A882);
	/* 카운트업 중 자릿수가 늘며 폭이 흔들리는 것을 막는다 */
	font-variant-numeric: tabular-nums;
}

.summary-stats__number--text {
	font-size: clamp(24px, 2.4vw, 40px);
}

.summary-stats__suffix {
	font-size: clamp(14px, 1vw, 18px);
	font-weight: 600;
	opacity: 0.85;
}

.summary-stats__label {
	display: block;
	font-size: 13px;
	letter-spacing: -0.01em;
	opacity: 0.75;
}

/* ── 5. RESERVATION ──────────────────────────────────────── */

.reservation-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
}

.reservation-cta__phone {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--color-white, #fff);
	text-decoration: none;
}

.reservation-cta__phone-label {
	font-size: 13px;
	letter-spacing: 0.1em;
	opacity: 0.7;
}

.reservation-cta__phone-number {
	font-size: clamp(28px, 3vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.reservation-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 32px;
	border-radius: var(--radius-full);
	background: var(--cta-bg, #C4A882);
	color: var(--cta-color, #fff);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--transition-fast), filter var(--transition-fast);
}

.reservation-cta__btn:hover,
.reservation-cta__btn:focus-visible {
	color: var(--cta-color, #fff);
	transform: translateY(-2px);
	filter: brightness(1.06);
}

/* ── 6. 도트 내비게이션 (INT-05) ─────────────────────────── */

/* 퀵메뉴는 우측 하단으로 옮겼으므로(quick-menu.css) 도트는 우측 세로 중앙을 단독으로 쓴다 */
.dot-nav {
	position: fixed;
	top: 50%;
	right: 32px;
	transform: translateY(-50%);
	z-index: var(--z-dot-nav, 50);
}

.dot-nav__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 링크는 고정 크기 정사각형 — 도트가 항상 같은 x 좌표에 놓인다.
 * 라벨을 일반 플로우에 두면 opacity:0 이어도 폭을 차지해 라벨 길이("홈" vs "사업개요")만큼
 * 도트가 밀려나 세로 정렬이 깨진다. 라벨은 absolute 로 도트 왼쪽에 띄운다. */
.dot-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	color: #fff;
	text-decoration: none;
}

.dot-nav__dot {
	display: block;
	width: 9px;
	height: 9px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: transparent;
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.dot-nav__link.is-active .dot-nav__dot {
	background: var(--color-accent, #C4A882);
	border-color: var(--color-accent, #C4A882);
	transform: scale(1.35);
}

/* 라벨은 도트 왼쪽에 absolute 로 띄운다 — 도트 정렬에 영향 없음 */
.dot-nav__label {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translate(6px, -50%);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.dot-nav__link:hover .dot-nav__label,
.dot-nav__link:focus-visible .dot-nav__label,
.dot-nav__link.is-active .dot-nav__label {
	opacity: 1;
	transform: translate(0, -50%);
}

/* ── 7. 영상 재생/정지 버튼 (WCAG 2.2.2) ─────────────────── */

.video-toggle {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: var(--z-quick-menu, 60);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-full);
	background: rgba(11, 27, 43, 0.6);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.video-toggle:hover,
.video-toggle:focus-visible {
	background: rgba(11, 27, 43, 0.85);
}

.video-toggle[hidden] {
	display: none;
}

/* ── 8. 모션 최소화 (INT-07) ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.fp-section__link,
	.hero__cta,
	.reservation-cta__btn,
	.dot-nav__dot,
	.dot-nav__label,
	.video-toggle {
		transition: none;
	}

	.hero__cta:hover,
	.reservation-cta__btn:hover {
		transform: none;
	}
}

/* ── 9. PREMIUM 핀 스토리텔링 (SEC-04) ───────────────────
 * 기본 상태 = 패널이 세로로 쌓인 일반 스크롤 (JS 없음 / 모바일 / reduced-motion).
 * JS 가 핀을 걸 수 있는 환경에서만 .is-pinned-mode 가 붙어 패널이 겹쳐진다.
 * 점진적 향상 — 스크립트가 죽어도 내용은 전부 읽힌다.
 */

.premium__head {
	margin-bottom: 32px;
}

.premium__panels {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.premium__panel {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 8px 28px;
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.premium__num {
	grid-row: 1 / span 2;
	font-size: clamp(32px, 3.4vw, 56px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-accent, #C4A882);
	font-variant-numeric: tabular-nums;
}

.premium__keyword {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.premium__desc {
	margin: 0;
	font-size: clamp(14px, 1.05vw, 17px);
	line-height: 1.7;
	opacity: 0.85;
}

/* 진행 표시 — 핀 모드에서만 의미가 있다 */
.premium__progress {
	display: none;
}

.premium__link {
	margin-top: 8px;
}

/* ── 핀 모드 (데스크톱 + JS) ─────────────────────────────── */

.fp-section--premium.is-pinned-mode .premium__body {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	/* 가장 긴 패널 기준으로 높이를 잡아 교체 시 레이아웃이 흔들리지 않게 한다 */
	min-height: 260px;
}

.fp-section--premium.is-pinned-mode .premium__panels {
	position: relative;
	flex: 1 1 auto;
	min-height: 260px;
	margin-bottom: 0;
}

/* 패널을 같은 자리에 겹쳐 놓고 .is-active 만 보인다.
   전환은 CSS 가 담당한다 — 휠 1회 = 패널 1장이라 스크럽 타임라인이 필요 없다. */
.fp-section--premium.is-pinned-mode .premium__panel {
	position: absolute;
	inset: 0;
	align-content: center;
	padding: 0;
	border-top: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(28px);
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}

.fp-section--premium.is-pinned-mode .premium__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fp-section--premium.is-pinned-mode .premium__num {
	font-size: clamp(48px, 6vw, 104px);
}

.fp-section--premium.is-pinned-mode .premium__keyword {
	font-size: clamp(26px, 2.6vw, 44px);
}

.fp-section--premium.is-pinned-mode .premium__progress {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-section--premium.is-pinned-mode .premium__progress-item {
	width: 3px;
	height: 28px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.25);
	transition: background var(--transition-fast), height var(--transition-fast);
}

.fp-section--premium.is-pinned-mode .premium__progress-item.is-active {
	height: 44px;
	background: var(--color-accent, #C4A882);
}

/* ── 10. LOCATION 입지 키워드 (SEC-03) ───────────────────── */

.location-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.location-keywords__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
	font-size: clamp(14px, 1.05vw, 17px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.location-keywords__icon {
	font-size: 13px;
	color: var(--color-accent, #C4A882);
}

/* ── 11. COMMUNITY 카드 슬라이더 (SEC-05) ────────────────── */

.community-slider {
	position: relative;
	margin: 0 0 32px;
}

/* Swiper 초기화 전/실패 시에도 카드가 가로로 읽히도록 (점진적 향상) */
.community-slider:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.community-slider:not(.swiper-initialized) .community-card {
	flex: 0 0 clamp(220px, 24vw, 300px);
}

.community-card {
	height: auto;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.community-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
}

.community-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

/* 호버 시 이미지 스케일업 (PRD SEC-05) */
.community-card:hover .community-card__img,
.community-card:focus-within .community-card__img {
	transform: scale(1.07);
}

.community-card__body {
	padding: 18px 18px 20px;
}

.community-card__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.community-card__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	opacity: 0.78;
}

.community-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(11, 27, 43, 0.6);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.community-slider__nav:hover,
.community-slider__nav:focus-visible {
	background: var(--cta-bg, #C4A882);
}

/* 화살표는 카드 위 안쪽에 둔다 — 컨테이너 밖(-12px)으로 빼면 우측 도트 내비와 겹친다 */
.community-slider__nav--prev { left: 12px; }
.community-slider__nav--next { right: 12px; }

.community-slider__nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ── 12. UNIT 타입 탭 (SEC-06) ───────────────────────────── */

.unit-tabs {
	margin: 0 0 32px;
}

.unit-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.unit-tabs__btn {
	min-height: 44px;
	padding: 0 24px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-full);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.unit-tabs__btn:hover,
.unit-tabs__btn:focus-visible {
	border-color: var(--color-accent, #C4A882);
}

.unit-tabs__btn.is-active {
	border-color: transparent;
	background: var(--cta-bg, #C4A882);
	color: var(--cta-color, #fff);
}

.unit-tabs__panel[hidden] {
	display: none;
}

.unit-tabs__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 28px;
}

.unit-tabs__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	/* 평면도는 대개 밝은 배경의 도면이라 어두운 섹션 위에서 흰 판을 깔아준다 */
	background: rgba(255, 255, 255, 0.92);
}

.unit-tabs__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 42svh;
	object-fit: contain;
}

.unit-tabs__desc {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.75;
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	.community-card__img,
	.community-slider__nav,
	.unit-tabs__btn {
		transition: none;
	}

	.community-card:hover .community-card__img {
		transform: none;
	}
}

/* 영상 재생/정지 버튼 — 아이콘 두 개를 겹쳐 두고 상태에 따라 하나만 보인다 */
.video-toggle__icon {
	position: relative;
	display: inline-flex;
	width: 1em;
	height: 1em;
	font-size: 13px;
}

.video-toggle__icon .dsummit-icon {
	position: absolute;
	inset: 0;
}

.video-toggle .video-toggle__play  { opacity: 0; }
.video-toggle .video-toggle__pause { opacity: 1; }

.video-toggle.is-paused .video-toggle__play  { opacity: 1; }
.video-toggle.is-paused .video-toggle__pause { opacity: 0; }

/* ═══════════════════════════════════════════════════════════
 * 스크롤 하이재킹 방어
 * ═══════════════════════════════════════════════════════════ */

/* scroll-behavior: smooth 가 켜져 있으면 브라우저가 스크롤을 자체 애니메이션하면서
 * GSAP 의 이동과 싸워, 섹션 이동이 튀거나 아예 멈춘다.
 * 이 CSS 는 풀페이지 템플릿에서만 로드되므로 다른 페이지에는 영향이 없다. */
html {
	scroll-behavior: auto !important;
}

/* ═══════════════════════════════════════════════════════════
 * SCROLL 인디케이터 — 마우스 아이콘 (휠이 아래로 흐르는 애니메이션)
 * ═══════════════════════════════════════════════════════════ */

.hero__scroll-mouse {
	width: 26px;
	height: 42px;
	color: rgba(255, 255, 255, 0.85);
}

.hero__scroll-body {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* 휠 점이 마우스 안에서 아래로 흘렀다가 사라진다 */
.hero__scroll-wheel {
	fill: currentColor;
	animation: dsummit-scroll-wheel 1.9s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
}

@keyframes dsummit-scroll-wheel {
	0%   { transform: translateY(0);   opacity: 0; }
	18%  { opacity: 1; }
	65%  { transform: translateY(9px); opacity: 1; }
	100% { transform: translateY(13px); opacity: 0; }
}

/* 아래 화살표 — 마우스 아래에서 순차로 흐른다 */
.hero__scroll-arrow {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	animation: dsummit-scroll-arrow 1.9s ease-in-out infinite;
}

.hero__scroll-arrow--2 {
	animation-delay: 0.18s;
}

@keyframes dsummit-scroll-arrow {
	0%   { opacity: 0; transform: translateY(-2px); }
	45%  { opacity: 0.9; }
	100% { opacity: 0; transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-wheel,
	.hero__scroll-arrow {
		animation: none;
		opacity: 1;
	}
}