/* ============================================================================
   ANC Fullpage Transition Component  (공용·opt-in)  — Nova 2026-07-17
   ----------------------------------------------------------------------------
   목적: profile 6섹션 프리뷰에서 검증된 "전환 시스템 3종"을 페이지마다 복붙하지
        않고 공통 셸(site.css/site.js)에 한 곳으로 정의해 opt-in 스위치로 상속.
   전환 3종:
     1) 풀스크린(100svh) 세로 스크롤-스냅 섹션
     2) 섹션 하단 흐린 blink+bounce 아래화살표 스크롤 큐(현재 섹션에만)
     3) 섹션 진입 슬라이드-인 리빌(IntersectionObserver, stagger)
   스위치(body 클래스):
     • body.fullpage    = 3종 전부 (마케팅·콘텐츠 페이지)
     • body.reveal-only = 리빌만 (폼·계산기·긴 표·목록 페이지 — 스냅/큐 없음)
     • 둘 다 없음        = 제외(기존 그대로)
   섹션 규약: 참여 섹션 = <section class="fp" id="...">
              다크 밴드 섹션엔 .is-dark 추가(스크롤 큐 색 accent 반전)
   접근성/안전:
     • prefers-reduced-motion:reduce → 애니메이션 전부 비활성(즉시 표시)
     • 리빌 대상은 JS가 data-reveal → .fp-reveal 로 태깅(무JS 시 콘텐츠 그대로 노출)
     • @media print → 큐/도트 숨김·리빌 강제표시·스냅 해제
   토큰: site.css :root(--ci-*·--bar-h·--ease) 상속, 없으면 fallback.
   ============================================================================ */

/* ── 스냅 컨테이너: JS가 body.fullpage 감지 시 html에 .fullpage-root 부여 ── */
html.fullpage-root{ scroll-snap-type:y mandatory; scroll-behavior:smooth; }

/* ── 1) 풀스크린 스냅 섹션 (fullpage 모드) ── */
body.fullpage .fp{
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:center;
  box-sizing:border-box;
  padding-top:calc(var(--bar-h,64px) + clamp(1.6rem,4vw,3rem));
  padding-bottom:clamp(1.6rem,4vw,3rem);
  position:relative; overflow:hidden;
}
/* 고정 상단바 클리어는 섹션 내부 패딩으로 처리 → 셸 has-fixed-bar body 패딩 무력화
   (그래야 스냅 정렬이 뷰포트 상단 기준으로 정확) */
body.fullpage.has-fixed-bar{ padding-top:0 !important; }

/* ── 2) 스크롤 큐(흐린 blink+bounce 아래화살표) ── */
.fp-scrollcue{
  position:absolute; left:50%; bottom:clamp(1rem,2.4vw,1.7rem);
  transform:translateX(-50%);
  width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--fp-cue, var(--ci-warm,#8B6F47));
  opacity:0; transition:opacity .5s ease; z-index:6;
}
.fp-scrollcue svg{ width:26px; height:26px; display:block; }
.fp-scrollcue.up svg{ transform:rotate(180deg); }              /* 마지막 섹션 = 맨 위로 */
.fp-scrollcue:hover{ opacity:.95 !important; }
/* 현재 섹션(.is-current)일 때만 노출·애니메이션 → 넘어가면 사라지고 새 섹션 큐가 뜸 */
body.fullpage .fp.is-current .fp-scrollcue{ opacity:.5; animation:fpCue 1.9s ease-in-out infinite; }
/* 다크 밴드 섹션: 큐 색을 웜 pale accent로 반전(대비 확보). 톤 밴드 자체는 페이지 소관(design SoT). */
.fp.is-dark{ --fp-cue: var(--ci-warm-pale,#D4BFA0); }
@keyframes fpCue{
  0%,100%{ transform:translateX(-50%) translateY(0);   opacity:.30; }
  50%    { transform:translateX(-50%) translateY(6px); opacity:.62; }
}

/* ── 3) 슬라이드-인 리빌 (fullpage 자동 + reveal-only 공통) ── */
.fp-reveal{
  opacity:0; transform:translateY(42px);
  transition:opacity .72s var(--ease,cubic-bezier(.4,0,.2,1)),
             transform .72s var(--ease,cubic-bezier(.4,0,.2,1));
  transition-delay:calc(var(--ri,0) * 95ms);
  will-change:opacity, transform;
}
/* fullpage: 섹션에 .in-view 부여 시 리빌 / reveal-only: 요소에 .is-revealed 직접 부여 */
body.fullpage .fp.in-view .fp-reveal,
.fp-reveal.is-revealed{ opacity:1; transform:none; }

/* ── 우측 세로 섹션 도트 네비 (fullpage 모드, JS가 .fp[id]로 생성) ── */
.fp-dots{
  position:fixed; top:50%; right:clamp(.7rem,2vw,1.6rem); transform:translateY(-50%);
  z-index:450; display:flex; flex-direction:column; gap:.9rem; margin:0; padding:0; list-style:none;
}
.fp-dots a{ display:block; width:11px; height:11px; border-radius:50%;
  background:rgba(90,96,114,.32); border:1px solid transparent; transition:all .25s ease; }
.fp-dots a:hover{ background:var(--ci-warm,#8B6F47); transform:scale(1.15); }
.fp-dots a.active{ background:var(--ci-warm,#8B6F47); border-color:var(--ci-warm-pale,#D4BFA0); transform:scale(1.25); }
@media(max-width:560px){ .fp-dots{ right:.5rem; gap:.7rem; } .fp-dots a{ width:9px; height:9px; } }

/* ── 접근성: 모션 최소화 선호 → 애니메이션 전부 비활성(즉시 표시) ── */
@media (prefers-reduced-motion: reduce){
  .fp-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  body.fullpage .fp.is-current .fp-scrollcue{ animation:none; opacity:.5; }
}

/* ── 인쇄: 큐·도트 숨김, 리빌 강제표시, 스냅 해제 ── */
@media print{
  .fp-scrollcue, .fp-dots{ display:none !important; }
  .fp-reveal{ opacity:1 !important; transform:none !important; }
  body.fullpage .fp{ min-height:auto; page-break-inside:avoid; }
}