/* SoyTwo 풀뷰포트 스크롤스냅 — 벤치마크(COS, ecudemo131980.cafe24.com)는 fullpage.js를 쓰지만
   v3부터 상업용 사이트에 유료 라이선스가 필요해(SoyTwo는 마켓 판매 상품) 라이선스 없는 순수
   CSS+JS로 동일한 UX를 구현한다(2026-08-07 사용자 확정, 11_템플릿/SoyTwo.md §6).

   🔴→✅ 2026-08-08 아키텍처 전면 교체(§15~15-3): 처음엔 `overflow-y:auto`+`scroll-snap-type`
   네이티브 스크롤로 구현했었는데, 실기기(트랙패드) 애니메이션 문제가 반복 재현돼 벤치마크의
   실제 fullpage.js 번들(jquery.fullpage.min.js)을 직접 디코딩해 원리를 확인했다 — 실제
   벤치마크는 **네이티브 스크롤을 아예 쓰지 않는다.** `html`/`body`가 `overflow:hidden`+높이
   고정(뷰포트높이)으로 완전히 잠겨있고, `#fullpage` 래퍼를 JS가 `transform:translate3d()`로
   직접 움직인다 — 휠 이벤트는 순수 "방향 신호"일 뿐 실제 이동은 스크롤이 아니라 CSS 트랜스폼
   애니메이션이라, 트랙패드 관성 스크롤과 충돌할 여지 자체가 없다(실측: `#fullpage` 인라인
   style에 `transform:translate3d(...)`, `html`/`body` `overflow:hidden`+`height:900px`
   고정 확인). 이 원리를 그대로 재현한다. */

.ss-container {
  position: relative;
  /* [2026-08-08] #header가 상시 투명 오버레이(position:fixed)로 바뀌며 #container에
     헤더 높이만큼 padding-top이 생겼다(css/layout.css) — 서브페이지는 이 여백이
     필요하지만, 히어로가 있는 홈만은 벤치마크(COS)처럼 그 여백을 상쇄해 히어로가
     투명 헤더 밑까지 꽉 차게 만든다. */
  margin-top: calc(var(--hd-h) * -1);
}

.ss-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 점 네비게이션(#fp-nav 대응) — js/scroll-snap.js가 현재 인덱스에 맞춰 .is-active를 토글 */
.ss-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* [2026-08-09 정정, 전달.md] "이렇게 우측 캐러셀 백그라운드로 넣어도 안보이는데 디자인 해치지
   않고 보이게 할 방법?" — §38에서 넣은 흐린 흰색 글로우(blur)는 어두운 배경 대비용이라 MD CHOICE
   같은 밝은/흰꽃 배경(잔디+흰 꽃, sorce/soytwo/grass_flatlay)에서는 흰 글로우가 흰 배경 위에
   그대로 묻혀 효과가 없었다. 배경색과 무관하게 항상 보이도록 "불투명 채움 + 또렷한 흰 테두리
   링" 방식으로 교체 — 밝은 배경에서도 채움 자체가 눈에 띄고(0.25→0.55, 더 진하게), 어두운
   배경에서는 흐림 없는 또렷한 흰 링(box-shadow inset 아님, 바깥쪽 1.5px solid)이 실루엣을
   만든다. 박스/알약 배경 같은 큰 컨테이너를 새로 얹지 않아 도트 자체의 미니멀한 디자인은
   그대로 유지된다. */
.ss-nav button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(21, 21, 21, 0.55);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.ss-nav button.is-active {
  background: var(--ml-fg, #151515);
  transform: scale(1.3);
}

/* 데스크톱(768px 이상) — 벤치마크와 동일한 "비-스크롤 + transform" 방식.
   `.ss-container`는 뷰포트 한 화면만큼만 보여주는 창(overflow:hidden)이고,
   `.ss-track`이 실제 콘텐츠(12개 섹션)를 담아 JS가 계산한 `translateY(-Npx)`만큼 움직인다. */
@media (min-width: 768px) {
  .ss-container {
    height: 100vh;
    overflow: hidden;
  }
  .ss-track {
    will-change: transform;
    transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .ss-section {
    min-height: 100vh;
  }
  /* js/scroll-snap.js가 body에 이 클래스를 달아, 휠 이벤트의 기본 동작(스크롤 체이닝으로
     body/html이 대신 스크롤되는 것)을 원천 차단한다 — 벤치마크의 html/body overflow:hidden과
     동일 원리. `.ss-container`가 있는 페이지(홈)에서만, 데스크톱 폭일 때만 켜진다. */
  body.ss-lock-scroll {
    overflow: hidden;
    height: 100vh;
  }
}

@media (max-width: 767px) {
  /* 벤치마크 실측(§1-3): 모바일은 스냅 없이 일반 스크롤이다 — /m에 #fp-nav 자체가 없었음.
     .ss-track에 transform을 전혀 적용하지 않고(js에서도 데스크톱 폭에서만 계산) 문서 흐름
     그대로 쌓이게 둔다. */
  /* [2026-08-08] 모바일은 섹션 높이가 내용만큼만 잡혀 상시 투명 오버레이 헤더+알림 캡슐 밑에
     제목 텍스트가 바로 깔릴 수 있다(실측 발견) — .ss-container의 상쇄 마진(-var(--hd-h), 베이스
     규칙에서 항상 적용)은 그대로 두고, 첫 섹션에만 그만큼 여백을 되돌려준다. */
  .ss-section:first-of-type {
    padding-top: calc(var(--hd-h) + 56px);
  }
  /* [2026-08-09] "모바일에서 동영상이 너무 작은데?" — 모바일은 섹션 높이가 min-height 없이
     내용(텍스트)만큼만 잡히도록 의도적으로 비워뒀는데(바로 위 §1-3 실측 참고), 히어로는
     그 결과 전체 화면의 37%(317px/844px)짜리 좁은 띠에 배경 영상이 눌려 보였다. 다른 섹션은
     내용 기반 높이가 맞지만, 풀블리드 배경 영상이 있는 히어로만은 화면을 채워야 자연스러워
     데스크톱과 동일하게 100vh를 강제한다(나머지 섹션의 콘텐츠기반 높이 정책은 그대로 유지). */
  .ss-section.st-hero-video {
    min-height: 100vh;
  }
  .ss-nav {
    display: none;
  }
}