/* ===========================================================================
   홈 풀페이지 전환 스타일 — home.html 전용 (공용 styles.css와 분리)
   1024px 이하에서는 일반 스크롤 폴백.
   =========================================================================== */
html.fp-mode, html.fp-mode body { height: 100%; overflow: hidden; }

.fp { position: fixed; inset: 0; overflow: hidden; }
.fp__track {
  height: 100%;
  will-change: transform;
}
/* 전환은 '패널 내비게이션 중'에만 적용 — 리사이즈로 인한 vh 재계산 등
   그 외 transform 변화는 즉시 반영되어야 흰 공백(트랙 지연)이 생기지 않음 */
.fp__track.is-animating {
  transition: transform .9s cubic-bezier(.77, 0, .175, 1);
}
.fp-panel { height: 100vh; overflow: hidden; position: relative; }

/* 패널 내부: 섹션을 뷰포트에 맞춰 세로 중앙 배치 + 컴팩트 패딩 */
.fp .section {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 1rem) 0 3rem;
}
.fp .section .section-title { margin-bottom: 3.6rem; }
.fp .section > .container { width: 100%; } /* flex-column 안 margin:auto 수축 방지 (메가메뉴와 동일 이슈) */
.fp .hero { height: 100%; min-height: 0; }
.fp .lineup-panel { margin-top: 4.5rem; }
.fp .lineup-tabs { margin-top: 4rem; }
/* 기종 렌더 종횡비가 제각각(정방~와이드)이라 고정 높이 박스 + contain 으로 통일 —
   이미지가 컬럼 폭대로 커지면 패널이 100vh 를 넘어 타이틀 클리핑·heading 위 과대 공백 발생 */
.fp .lineup-panel__media img {
  height: clamp(28rem, 46vh, 44rem);
  object-fit: contain; object-position: center right;
}

/* PR 패널 = PR CENTER + 푸터를 한 화면에 */
.fp-panel--pr { display: flex; flex-direction: column; }
.fp-panel--pr .section { flex: 1 1 auto; height: auto; }
.fp-panel--pr .site-footer { flex: 0 0 auto; }
.fp .pr-card__thumb { aspect-ratio: auto; height: clamp(16rem, 28vh, 28rem); }

/* 패널 진입 리빌(2톤 타이틀·카드 fade-up, JS가 stagger delay 부여) */
.fp [data-fpr] {
  opacity: 0; transform: translateY(4rem);
  transition: opacity .8s cubic-bezier(.23, 1, .32, 1), transform .8s cubic-bezier(.23, 1, .32, 1);
}
.fp .fp-panel.is-active [data-fpr] { opacity: 1; transform: none; }

/* 골드 스크롤탑 — 풀페이지에서는 콘텐츠 가장자리(--inner-pad)가 아닌
   슬라이드 모서리 기준: dot 내비와 같은 우측 라인(2.8rem)에 정렬.
   데스크탑 fp 모드에서는 패널 내부 버튼을 숨기고 body 직속 fixed 버튼
   (fullpage.js 생성) 하나를 2번째 패널부터 노출 — 전환 중에도 뷰포트에 고정.
   패널 내부 버튼은 ≤1024px 일반 스크롤 폴백에서만 표시. */
.fp .to-top { right: 2.8rem; bottom: 2.8rem; display: none; }
.to-top--fixed {
  /* bottom은 dot 라인(2.8rem)보다 살짝 낮게 — 극단적으로 낮은 창 높이에서 헤더와 안 겹치도록 */
  position: fixed; right: 2.8rem; bottom: 1.4rem; z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.to-top--fixed.show { opacity: 1; pointer-events: auto; }

/* 우측 골드 dot 내비게이션 */
.fp-nav {
  position: fixed; right: 2.8rem; top: 50%; transform: translateY(-50%);
  z-index: 150;
  display: flex; flex-direction: column; gap: 2rem;
}
.fp-nav button {
  position: relative;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: transparent;
  transition: background .3s, border-color .3s, transform .3s;
}
.fp-nav button.on {
  background: var(--color-gold); border-color: var(--color-gold);
  transform: scale(1.3);
}
.fp-nav.on-light button { border-color: rgba(29,43,55,.45); }
.fp-nav.on-light button.on { background: var(--color-gold); border-color: var(--color-gold); }
.fp-nav button .lab {
  position: absolute; right: 2.6rem; top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-en); font-size: 1.1rem; letter-spacing: .1em;
  color: var(--color-gold);
  opacity: 0; transition: opacity .25s;
}
.fp-nav button:hover .lab { opacity: 1; } /* 라벨은 hover 시에만 — 상시 노출은 콘텐츠와 겹침 */

/* 극단적으로 낮은 창 높이: dot 4개를 헤더·화살표와 안 겹치게 배치할 공간 자체가 없음
   (헤더 80px + 화살표 영역 제외 시 잔여 부족) → 부분 노출 대신 전체 숨김 (all-or-nothing) */
@media (max-height: 280px) {
  .fp-nav { display: none; }
}

/* 1024px 이하: 풀페이지 해제 → 일반 스크롤 폴백 (JS도 동일 기준으로 비활성) */
@media (max-width: 1024px) {
  html.fp-mode, html.fp-mode body { height: auto; overflow: auto; }
  .fp { position: static; }
  .fp__track { transform: none !important; }
  .fp-panel { height: auto; overflow: visible; }
  .fp .section { height: auto; display: block; padding: 8rem 0; }
  .fp .hero { height: 100vh; }
  .fp-nav { display: none; }
  /* 일반 스크롤 폴백에서도 데스크탑과 동일한 전역 fixed 버튼 사용
     (표시/스크롤탑 동작은 fullpage.js가 scroll 이벤트 기준으로 토글) */
  .fp .to-top { display: none; }
  .fp [data-fpr] { opacity: 1; transform: none; }
}