/* ==========================================================================
   main-fullpage.css
   메인 페이지 풀페이지 스크롤 + 섹션 등장 모션
   - 모든 동작은 body.fp-on 일 때만 활성 (JS가 부착). JS 미동작/reduced-motion
     환경에서는 클래스가 붙지 않아 기존 일반 스크롤 레이아웃으로 폴백된다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 풀페이지 컨테이너 제어 (fp-on 일 때만)
   -------------------------------------------------------------------------- */
body.fp-on,
body.fp-on .page-main {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.fp-on #fullpage-wrapper {
  width: 100%;
  height: 100%;
  /* 섹션 1칸 전환 모션 — 휠 잠금(1000ms)과 싱크 */
  transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: transform;
}

/* 각 섹션을 1 뷰포트 높이로 고정하고 내용은 세로 중앙 정렬.
   내용이 뷰포트보다 길면 패널 내부 스크롤을 허용(JS가 경계에서 패널 전환). */
body.fp-on .v-section {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center; /* flex 래퍼들의 세로 중앙 정렬 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.fp-on .v-section::-webkit-scrollbar { display: none; }

/* 고정 1000px 콘텐츠 블록이 100vh 패널 안에서 잘리지 않도록 상한 완화 */
body.fp-on .hero-section__inner,
body.fp-on .sec1-content,
body.fp-on .sec2-content,
body.fp-on .sec3-content,
body.fp-on .sec4-content {
  min-height: 0;
}

/* 마지막 패널: CTA(아웃트로) + 푸터를 한 화면에 묶음 */
body.fp-on .sec-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.fp-on .sec-footer .cta-section {
  flex: 1 1 auto;
}
body.fp-on .sec-footer .footer {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   2. 섹션 인디케이터 (우측 도트 네비게이션)
   -------------------------------------------------------------------------- */
.fp-nav {
  position: fixed;
  top: 50%;
  right: 2.25rem; /* 36px */
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
}
body.fp-on .fp-nav { display: flex; }

.fp-nav__dot {
  width: 0.625rem;  /* 10px */
  height: 0.625rem;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.fp-nav__dot:hover { transform: scale(1.25); }
.fp-nav__dot.is-active {
  background: #6fe3c4;
  border-color: #6fe3c4;
}
/* 밝은 배경 섹션 위에서는 도트를 어둡게 */
.fp-nav.is-on-light .fp-nav__dot {
  border-color: rgba(0, 28, 26, 0.5);
}
.fp-nav.is-on-light .fp-nav__dot.is-active {
  background: #00756a;
  border-color: #00756a;
}

/* --------------------------------------------------------------------------
   3. 등장 모션 정의 (fp-on 일 때만 초기 숨김 → 깜빡임/FOUC 방지)
   transition 단위는 ms/s (가이드의 1000s 표기 → 정상 단위로 교정)
   지연은 인라인 style="--d:200ms" 로 주입
   -------------------------------------------------------------------------- */
body.fp-on .motion-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: calc(var(--d, 0ms) * 2 + 0.55s);
}
body.fp-on .motion-fade-in {
  opacity: 0;
  transition: opacity 1.2s ease;
  transition-delay: calc(var(--d, 0ms) * 2 + 0.55s);
}
body.fp-on .motion-scale-up {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--d, 0ms) * 2 + 0.55s);
}
/* 좌/우 슬라이드 + 페이드 (비즈니스 row 용) */
body.fp-on .motion-slide-right {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: calc(var(--d, 0ms) * 2 + 0.55s);
}
body.fp-on .motion-slide-left {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: calc(var(--d, 0ms) * 2 + 0.55s);
}

/* 섹션 활성화(.active) 시 모션 실행 */
body.fp-on .v-section.active .motion-fade-up,
body.fp-on .v-section.active .motion-fade-in,
body.fp-on .v-section.active .motion-scale-up,
body.fp-on .v-section.active .motion-slide-right,
body.fp-on .v-section.active .motion-slide-left {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* --------------------------------------------------------------------------
   4-1. 모바일(<=768px) — 풀페이지 무력화 (일반 롱스크롤로 폴백)
   JS도 모바일에선 fp-on 을 떼지만, 데스크탑→모바일 리사이즈 등 잔여 상태를
   대비해 CSS로도 확실히 일반 스크롤/전체 표시를 보장한다.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.fp-on,
  body.fp-on .page-main {
    height: auto;
    overflow: visible;
  }
  body.fp-on #fullpage-wrapper {
    transform: none !important;
    transition: none;
  }
  body.fp-on .v-section {
    height: auto;
    overflow: visible;
  }
  body.fp-on .fp-nav { display: none; }

  body.fp-on .motion-fade-up,
  body.fp-on .motion-fade-in,
  body.fp-on .motion-scale-up,
  body.fp-on .motion-slide-right,
  body.fp-on .motion-slide-left {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   4. 접근성 — 모션 최소화 선호 시 모든 모션/숨김 해제
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.fp-on .motion-fade-up,
  body.fp-on .motion-fade-in,
  body.fp-on .motion-scale-up,
  body.fp-on .motion-slide-right,
  body.fp-on .motion-slide-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.fp-on #fullpage-wrapper { transition: none !important; }
}