/* rb-hero — 260728a2lp0 히어로 보정 (자체호스트 · 외부 의존 0 · G6)
   ① .rbv 풀블리드   ② 좌측 섹션 인디케이터(점 레일) 활성화 */

/* ══ ① 배경 영상 ═════════════════════════════════════════════════════════
   .rbv 클래스는 마크업에만 있고 CSS 가 이 토큰 어디에도 없었다.
   그래서 <video> 가 기본 인라인 크기(1280×720)로 좌상단에 놓이고, 그 뒤로
   같은 프레임의 포스터 background-image 가 cover 로 깔려 화면이 타일처럼
   반복돼 보였다. (antiaging·animal 은 우연히 `[data-sec] > video` 규칙에
   걸려 정상 동작 — home 은 video 가 .s0-bg 안에 중첩돼 있어 매칭 실패)  */
.rbv{position:absolute;inset:0;z-index:0;
  inline-size:100%;block-size:100%;max-inline-size:none;
  object-fit:cover;object-position:center;display:block;border:0}

/* .s0-bg 는 inset:0 과 aspect-ratio:36/25 가 동시에 걸려 과제약 상태였다
   (1440 기준 높이 1000 = 섹션 900 보다 100px 초과). 비율은 버리고 섹션을 채운다. */
[data-sec="0"] .s0-bg{aspect-ratio:auto}

/* ══ ② 좌측 섹션 인디케이터 ══════════════════════════════════════════════
   원래는 §0 안에 absolute 로 박힌 장식이라 히어로와 함께 스크롤되어 사라졌고,
   활성 점도 :first-child 고정이었다. 화면에 고정하고 현재 섹션을 따라가게 한다. */
/* ★ §0 의 transform 을 없앤다.
   리빌 규칙 `html.js .rb-reveal.is-in{transform:translate3d(0,0,0)}` 은 값이
   항등행렬이어도 **fixed 의 컨테이닝 블록을 만든다** → 레일을 position:fixed 로
   바꿔도 §0 안에 갇혀 함께 스크롤 아웃된다(실측: railTop -7976px).
   §0 만 transform 리빌을 포기하고 opacity 페이드는 그대로 둔다. */
html.js section[data-sec="0"].rb-reveal,
html.js section[data-sec="0"].rb-reveal.is-in{transform:none}

/* ★ §0 는 `isolation:isolate` 로 자체 스택 컨텍스트를 만든다. 그 안의 레일은
   z-index 를 아무리 올려도 §0 컨텍스트 밖으로 못 나가서, 뒤따르는 섹션들이
   레일 위를 덮는다(실측: elementFromPoint 가 SECTION/DIV 를 반환).
   §0 자체를 위로 올려야 고정된 레일이 전 섹션 위에 그려진다.
   §0 의 박스는 최상단 900px 뿐이라 다른 섹션과 겹치지 않는다 — 헤더(60)·
   퀵CTA(80)보다는 낮게 두어 그쪽 클릭을 가리지 않는다. */
section[data-sec="0"]{z-index:45}

/* ★ 특이도: 페이지 원본이 `[data-sec="0"] .s0-rail{position:absolute}` (0,2,0) 이라
   `.rb-secnav` (0,1,0) 로는 못 이긴다. 섹션+클래스 2개로 (0,3,0) 을 만든다. */
[data-sec="0"] .s0-rail.rb-secnav{position:fixed;z-index:40;
  inset-block-start:50%;transform:translateY(-50%);
  inset-block-end:auto;pointer-events:none}
/* 점 자체는 페이지 고유 규칙(크기·간격·모양)을 그대로 쓰되, 최소 크기만 보장 */
.rb-secnav [data-rb-bead]{min-inline-size:0.3125rem;min-block-size:0.3125rem}
.rb-secnav [data-rb-bead]{pointer-events:auto;cursor:pointer;
  padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;
  transition:opacity var(--rb-dur-1, .18s) var(--rb-ease, ease),
             transform var(--rb-dur-1, .18s) var(--rb-ease, ease)}
/* 히트 타깃 44px 확보(점 자체 크기는 그대로) */
.rb-secnav [data-rb-bead]{position:relative}
.rb-secnav [data-rb-bead]::after{content:"";position:absolute;
  inset-inline-start:50%;inset-block-start:50%;
  inline-size:2.75rem;block-size:1.375rem;transform:translate(-50%, -50%)}
.rb-secnav [data-rb-bead]:hover{opacity:.75;transform:scale(1.35)}
.rb-secnav [data-rb-bead]:focus-visible{outline:2px solid var(--rb-cyan-400, #35c8c8);
  outline-offset:4px;border-radius:50%}

/* 활성 점 — 페이지마다 점 클래스 어휘가 다르므로(.s0-dots>span / .s0-bead /
   .s0-dot) 공통 is-on 으로 통일한다. home 의 :first-child 고정 규칙도 덮는다. */
/* 어두운 섹션 위 = 원래대로 밝은 점 */
[data-sec="0"] .rb-secnav.rb-secnav--dark .s0-dots > span,
[data-sec="0"] .rb-secnav.rb-secnav--dark .s0-dots > span:first-child,
[data-sec="0"] .rb-secnav.rb-secnav--dark .s0-dot,
[data-sec="0"] .rb-secnav.rb-secnav--dark .s0-bead{
  background:var(--rb-line-inv, rgba(255, 255, 255, 0.34));opacity:1}
/* 밝은 섹션 위 = 어두운 점(원래 값은 rgba(255,255,255,.24) 라 흰 배경에서 소실) */
[data-sec="0"] .rb-secnav:not(.rb-secnav--dark) .s0-dots > span,
[data-sec="0"] .rb-secnav:not(.rb-secnav--dark) .s0-dots > span:first-child,
[data-sec="0"] .rb-secnav:not(.rb-secnav--dark) .s0-dot,
[data-sec="0"] .rb-secnav:not(.rb-secnav--dark) .s0-bead{
  background:rgba(0, 11, 23, 0.26);opacity:1}
/* ★ 활성 점은 위의 톤 규칙(:not() 로 클래스 4개 = 0,4,2)보다 특이도가 높아야 한다.
   .s0-rail 을 한 번 더 걸어 (0,5,1) 로 만든다 — 안 그러면 활성 점이 회색으로 묻힌다. */
[data-sec="0"] .s0-rail.rb-secnav .s0-dots > span.is-on,
[data-sec="0"] .s0-rail.rb-secnav .s0-dot.is-on,
[data-sec="0"] .s0-rail.rb-secnav .s0-bead.is-on{background:var(--rb-cyan-400, #35c8c8);
  transform:scale(1.5)}

@media (prefers-reduced-motion:reduce){
  .rb-secnav [data-rb-bead]{transition:none}
  .rb-secnav [data-rb-bead]:hover{transform:none}
}
@media (max-width:60rem){
  .rb-secnav{display:none}          /* 원래 규칙과 동일하게 모바일에서는 숨김 */
}