/* 섹션 점프 내비 — 긴 페이지에서 섹션 사이를 건너뛰는 고정 내비 (2026-09-10).
   마크업은 없다: main.js `initJumpNav()` 가 런타임에 만든다 — JS 가 없으면 아무것도 생기지 않는
   순수 강화 요소이고, 그때도 콘텐츠는 그대로 완결이다(CSS 가 초기 상태를 숨기지 않는다는 규약과 같은 이유).
   스크롤·해시·포커스는 `initAnchorRouting()`, 시트 열고 닫기·스크롤 잠금·포커스 복귀는
   `initModals()`(components/modal.css)가 맡는다 — 여기서는 자리와 상태만 그린다.

   두 모드가 폭으로 갈린다:
     ≥1280px  우측 도트 레일. 홈 `.cine-rail` 과 같은 경계·같은 자리다(그쪽도 1279 이하에서 사라진다).
              1440 에서 컨테이너(1200px) 밖 여백이 좌우 113px 이라 라벨이 콘텐츠를 덮지 않는다.
              1280~1366 에서는 여백이 40px 뿐이라 **hover 중에만** 라벨이 콘텐츠 가장자리를 살짝 덮는다(받아들인 손실).
     <1280px  우하단 알약 → 하단 시트. 여백이 0에 가까워 레일이 살 수 없다.
   법정 문서(data-mode="legal")는 901px 이상에서 `.legal-toc` 스티키 목차가 이미 그 일을 하므로 통째로 감춘다. */
.c-jumpnav {
  position: fixed;
  z-index: 90; /* 헤더(100)·토스트(200) 아래. <dialog> 는 top layer 라 이 값과 무관하게 앞이다 */
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  pointer-events: none; /* 고정 박스가 빈 자리에서 클릭을 먹지 않게 — 자식만 받는다 */
}

.c-jumpnav__rail,
.c-jumpnav__fab {
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition:
    opacity 0.2s ease,
    translate 0.2s ease,
    visibility 0.2s;
}

/* 첫 섹션에 닿기 전에는 없다 — 히어로 위에서 목차가 떠 있으면 히어로 액션과 자리를 다툰다 */
.c-jumpnav.is-visible .c-jumpnav__rail,
.c-jumpnav.is-visible .c-jumpnav__fab {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* 예약 섹션에 닿으면 알약은 물러난다 — 달력이 유일한 전환 경로라 그 위에 뜬 버튼은 순손실이고,
   페이지 끝에서 점프 내비의 할 일은 이미 끝났다. 레일은 컨테이너 밖이라 겹치지 않으므로 남는다. */
/* 푸터 구간에서는 통째로 물러난다 — 사이트 크롬 위에 떠 있는 섹션 목차는 자기 자리를 잃는다 */
.c-jumpnav.is-tail .c-jumpnav__rail,
.c-jumpnav.is-tail .c-jumpnav__fab {
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
}

.c-jumpnav.is-parked .c-jumpnav__fab {
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
}

/* 모달·모바일 GNB 시트가 열린 동안에는 비운다(포커스 차단은 main.js 의 inert 가 따로 한다) */
html.has-modal .c-jumpnav {
  opacity: 0;
  pointer-events: none;
}

/* ---------- 데스크톱: 우측 도트 레일 ---------- */
.c-jumpnav__rail {
  display: none;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 도트를 잇는 헤어라인(track)과 지나온 만큼 채워지는 진행선(fill).
   항목 높이는 도트(5px) + 상하 패딩(10px)로 고정이라(라벨은 absolute 라 높이에 관여하지 않는다)
   첫·마지막 도트 중심 = 12.5px. fill 높이는 JS 가 --jump-fill 에 실측해 넣는다. */
.c-jumpnav__rail::before,
.c-jumpnav__rail::after {
  content: '';
  position: absolute;
  right: 14.5px; /* 도트 열 중심: padding-inline-end 12px + 도트 반지름 2.5px */
  width: 1px;
  top: 12.5px;
}

.c-jumpnav__rail::before {
  bottom: 12.5px;
  background: var(--color-border);
}

.c-jumpnav__rail::after {
  height: var(--jump-fill, 0px);
  background: var(--color-primary);
  transition: height 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 히어로 항목만 <button>(문서 맨 위로, 해시 없음)이고 나머지는 <a> 다 — 두 태그가 같이 온다 */
.c-jumpnav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.c-jumpnav__dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  /* 지나지 않은 도트 — border 색(#e2e8f0)은 흰 밴드에서 사실상 보이지 않아 "건너뛸 곳이 더 있다"를
     말하지 못했다(2026-09-10 실측). 뮤트 텍스트색을 옅게 깔아 존재만 남긴다. */
  background: var(--color-text-muted);
  opacity: 0.45;
  transition:
    background 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.c-jumpnav__item.is-passed .c-jumpnav__dot {
  background: var(--color-primary);
  opacity: 1;
}

.c-jumpnav__item.is-current .c-jumpnav__dot {
  background: var(--color-primary-fill);
  opacity: 1;
  transform: scale(1.8);
}

.c-jumpnav__item:hover .c-jumpnav__dot {
  background: var(--color-primary-fill);
  opacity: 1;
}

/* 라벨은 의도(hover·키보드 포커스)에만 응답해 도트 왼쪽에서 떠오른다 — 평소에는 위치만 말한다 */
.c-jumpnav__label {
  position: absolute;
  right: calc(100% - 8px);
  top: 50%;
  translate: 6px -50%;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease;
}

.c-jumpnav__item:hover .c-jumpnav__label,
.c-jumpnav__item:focus-visible .c-jumpnav__label {
  opacity: 1;
  translate: 0 -50%;
}

.c-jumpnav__item:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 2px;
}

/* 다크 챕터(.detail-dark·.detail-hero) 위에서는 밝은 쪽으로 뒤집는다 — anchor-link.css 와 같은 처리.
   현재 섹션 요소를 이미 알고 있는 스크롤스파이가 data-on-dark 를 달아 준다(추가 계산 없음). */
.c-jumpnav[data-on-dark] .c-jumpnav__rail::before {
  background: rgba(248, 250, 252, 0.28);
}

.c-jumpnav[data-on-dark] .c-jumpnav__rail::after {
  background: var(--color-glow);
}

.c-jumpnav[data-on-dark] .c-jumpnav__dot {
  background: var(--color-ink-contrast);
  opacity: 0.4;
}

.c-jumpnav[data-on-dark] .c-jumpnav__item.is-passed .c-jumpnav__dot,
.c-jumpnav[data-on-dark] .c-jumpnav__item.is-current .c-jumpnav__dot,
.c-jumpnav[data-on-dark] .c-jumpnav__item:hover .c-jumpnav__dot {
  background: var(--color-glow);
  opacity: 1;
}

.c-jumpnav[data-on-dark] .c-jumpnav__label {
  background: var(--color-ink);
  border-color: rgba(248, 250, 252, 0.18);
  color: var(--color-ink-contrast);
}

.c-jumpnav[data-on-dark] .c-jumpnav__item:focus-visible {
  outline-color: var(--color-glow);
}

/* ---------- 모바일·태블릿: 알약 → 시트 ---------- */
.c-jumpnav__fab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.c-jumpnav__fab svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.c-jumpnav__fab-name {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-jumpnav__fab-count {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.c-jumpnav__fab:hover {
  border-color: var(--color-primary);
}

/* 다크 무대 전용(시네마틱 홈) — 흰 알약은 필름 위에서 튄다. 레일 색은 [data-on-dark] 가
   이미 맡고 있고(그 페이지에서는 상시 켜진다), 여기서는 알약만 무대에 맞춘다. */
.c-jumpnav[data-stage='dark'] .c-jumpnav__fab {
  background: rgba(20, 22, 21, 0.72);
  backdrop-filter: blur(8px);
  border-color: rgba(248, 250, 252, 0.22);
  color: var(--color-ink-contrast);
}

.c-jumpnav[data-stage='dark'] .c-jumpnav__fab svg,
.c-jumpnav[data-stage='dark'] .c-jumpnav__fab-count {
  color: rgba(248, 250, 252, 0.62);
}

.c-jumpnav[data-stage='dark'] .c-jumpnav__fab:hover {
  border-color: var(--color-glow);
}

/* 시트 본문 — <dialog class="c-modal c-modal--jump"> 안. 600px 미만 하단 시트는 modal.css 가 이미 한다. */
.c-jumpnav__sheet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.c-jumpnav__sheet-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  word-break: keep-all;
  cursor: pointer;
}

.c-jumpnav__sheet-link:hover {
  background: var(--color-surface);
}

.c-jumpnav__sheet-num {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.c-jumpnav__sheet-link.is-current {
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-weight: 700;
}

.c-jumpnav__sheet-link.is-current .c-jumpnav__sheet-num {
  color: var(--color-primary-deep);
}

.c-jumpnav__top {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.c-jumpnav__top:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}

@media (min-width: 1280px) {
  .c-jumpnav {
    right: 28px; /* .cine-rail 과 같은 자리 */
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  .c-jumpnav__rail {
    display: block;
  }

  .c-jumpnav__fab {
    display: none;
  }
}

/* 법정 문서는 901px 이상에서 .legal-toc 스티키 목차가 같은 일을 한다 — 목차를 둘 두지 않는다 */
@media (min-width: 901px) {
  .c-jumpnav[data-mode='legal'] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-jumpnav__rail,
  .c-jumpnav__fab,
  .c-jumpnav__rail::after,
  .c-jumpnav__dot,
  .c-jumpnav__label {
    transition: none;
  }
}

@media print {
  .c-jumpnav {
    display: none !important;
  }
}