/* ==========================================================================
 * stage/stack.css — 무대 골격 · 쌓임 순서 · 두 시스템을 붙이는 접착제
 * ==========================================================================
 * css/stage/ 셋 중 **맨 마지막**에 로드된다(원본과 같은 순서). 그래서
 * hero.css / swirl.css 와 값이 겹치면 여기가 이긴다. 씬끼리의 z-index 는
 * "여기서만" 정한다 — 씬 파일이 각자 정하면 서로 덮어써서 전환이 깨진다.
 *
 * 이 파일이 하는 일은 넷이다.
 *   1. 무대 골격    원본 base.css 의 .stage / .stage__pin / .scene 이식
 *   2. 원본 토큰    hero.css · swirl.css 가 쓰는 --ink / --cream / --accent / --sans …
 *   3. 쌓임 순서    씬 세 개의 z-index
 *   4. 편입 보정    250lvh 짜리 히어로 섹션을 핀 한 화면 안으로 접어 넣는 규칙
 * ========================================================================== */

/* ==========================================================================
 * 1. 원본 토큰 · 서체
 * ==========================================================================
 * hero.css / swirl.css 는 원본(breakthrough-energy-clone)에서 그대로 가져온
 * 파일이라 원본 토큰 이름을 쓴다. 그 이름들이 scroll-kit 에는 없으므로 여기서 잇는다.
 *
 * ⚠ 단위 주의. 원본은 html{font-size:62.5%} 라 1rem = 10px 이었지만,
 *   scroll-kit 의 1rem 은 15~22px 로 유동한다(css/tokens.css --font-size-root).
 *   그래서 원본이 rem 으로 적어 둔 "픽셀 값"은 전부 px 로 환산해 옮겼다.
 *   원본 식:  min(calc(2rem + (3.2 - 2) * (100vw - 37.5rem) / 106.5), 3.2rem)
 *            = 375px 에서 20px → 1440px 에서 32px
 * ========================================================================== */

:root {
  /* 스월 구간과 히어로 타이틀 두 벌이 쓰는 팔레트.
     ★ 스월 배경색 바꾸는 곳 ★ --cream(앞부분) / --accent(뒷부분)

     --accent 는 원본에서 --lime(연두 #dfff5c)이었다. 그 색은 Breakthrough Energy 의
     브랜드색이라 DJ Bank 파랑으로 바꿨다. 이름도 색이 아니라 역할로 바꿔 뒀다 —
     다음에 색을 또 바꿔도 이름이 거짓말을 하지 않도록.

     ⚠ 이 색을 바꾸면 함께 봐야 하는 곳이 둘 있다.
       · css/stage/swirl.css 의 .swirl__title-wrap  — 문구 색(지금은 이 파랑 위의 잉크)
       · index.html 맨 아래 LIGHT_TO               — 로고를 되돌리는 시점 */
  --ink: #12110e;
  /* 원본은 크림(#fafbf8)이었다. 따뜻한 기가 도는 흰색인데, 순백으로 바꿨다.
     이 한 값이 세 군데를 한꺼번에 바꾼다 —
       히어로 타이틀(영상 위 벌) · 스월 앞부분 배경 · Scroll for more 문구 */
  --cream: #ffffff;
  --accent: #00aaff;

  /* 사각형(패널) 색. Intro. 화면과 장 표지(Part I.)가 같은 값을 쓴다 —
     둘은 같은 그림이라 색이 갈리면 어색하다.
     한때 --accent(하늘색)였는데 사진 배경 위에서 안 어울려 짙은 남색으로 바꿨다.
     따로 두고 싶으면 .chapter__fill 쪽만 다른 색으로 덮으면 된다. */
  --intro-panel: #000713;

  /* 무대 문구도 페이지 나머지와 같은 Pretendard 를 쓴다.
     원본은 Saans(유료 서체)였다. assets/fonts/Saans*.woff2 는 이제 아무도 안 쓴다 —
     지워도 된다. */
  --sans: var(--font-display);

  /* 원본 12칸 그리드에서 실제로 쓰이는 것만 옮겼다(좌우 여백과 그 폭). */
  --grid-side-margin: min(calc(20px + 12 * (100vw - 375px) / 1065), 32px);
  --grid-max-outer-width: 1920px;
  --grid-max-width: calc(var(--grid-max-outer-width) - var(--grid-side-margin) * 2);
  --grid-width: min(calc(100vw - var(--grid-side-margin) * 2), var(--grid-max-width));
}

/* ==========================================================================
 * 2. 무대 골격
 * ==========================================================================
 * 아주 긴 세로 트랙(.stage) 안에 한 화면(.stage__pin)이 sticky 로 붙어 있고,
 * 그 안에서 씬들이 겹겹이 쌓여 스크롤 진행도에 따라 교대로 등장한다.
 * ========================================================================== */

.stage {
  position: relative;
  /* 진짜 높이는 js/stage/core/stage.js 가 인라인 style 로 덮어쓴다
     (씬 길이 합 × 화면 높이, 그리고 margin-bottom 으로 한 화면을 당긴다).
     아래 값은 무대 JS 가 아직 안 떴거나 영영 안 뜰 때의 안전한 기본값이다 —
     여기서 26배 높이를 박아 두면 JS 가 죽었을 때 빈 스크롤이 그만큼 남는다. */
  height: var(--stage-total, 100svh);
}

.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  /* 궤도를 도는 영상·사진이 화면 밖으로 나가도 가로 스크롤이 생기면 안 된다 */
  overflow: hidden;
}

/* ── 무대 → 본문 인계 ──────────────────────────────────────────────────
 * 트랙은 아래 한 화면을 margin-bottom 으로 당겨 겹친다(core/stage.js 의 layout).
 * 그래서 트랙이 끝나기 한 화면 전부터 **다음 섹션이 핀 위로 겹쳐 올라온다** —
 * 마지막 씬의 배경을 덮으며 올라오는 게 무대의 마지막 전환이다.
 *
 * scroll-kit 의 섹션들은 배경이 없다(어두운 바탕은 body 것이다). 그대로 두면
 * 덮지 못하고 무대 배경이 글자 뒤로 비쳐 본문이 안 읽힌다(실측: t=6.5~7.5 구간).
 * 그래서 무대 바로 다음 형제에게만 불투명 배경과 위 레이어를 준다.
 * z-index 1 은 무대(.stage, z-index auto)만 넘는 값이다 —
 * 헤더(50)·메뉴(60)·페이지 전환(40/70)은 그대로 이 위에 그려진다. */
.stage + * {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
}

/* 씬은 핀 안에서 전면 레이어로 겹친다.
   기본은 숨김 — 자기 구간에 들어온 씬에만 무대가 .is-live 를 붙인다. */
.scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene.is-live {
  visibility: visible;
}

/* ⚠ 히어로 씬만 예외다.
   무대는 **인트로가 끝난 뒤에야** 돌기 시작하므로(js/stage/main.js), 그 전에는
   히어로 씬에도 .is-live 가 없다. 위 규칙만 두면 인트로 내내 영상이 안 보인다.
   그래서 무대가 첫 프레임을 그리기 전까지는 부모([data-hero])의 가시성을 따르게 한다.
   visible 이 아니라 inherit 인 게 핵심 — 인트로가 열어 주기 전의 hidden 도 같이 따른다.
   .stage-ready 는 "edx:stage-ready" 를 받은 index.html 의 한 줄이 붙인다.
   무대 JS 가 죽어 그 이벤트가 안 오면 히어로는 계속 보인다(안전한 실패). */
html:not(.stage-ready) .scene--hero {
  visibility: inherit;
}

/* 원본 유틸(h1 등). scroll-kit 의 .visually-hidden 과 같은 역할이다. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
 * 3. 씬 쌓임 순서
 * ==========================================================================
 * 원본 값 그대로다: SwirlTitles 0 / ImageSwirl 0 / Hero 4.
 * 같은 0 끼리는 DOM 순서가 결정하므로 index.html 의 순서(스월 → 소용돌이)를
 * 바꾸면 이 파일도 같이 봐야 한다.
 *
 * 히어로는 [data-hero] 래퍼(.hero)가 씬 자리를 대신 차지한다 —
 * 로고가 히어로 씬(t=2에서 꺼짐)보다 오래 남아야 해서 씬 밖에 있기 때문이다.
 *
 * scroll-kit 의 --z-* 토큰과는 충돌하지 않는다. .stage__pin 이 sticky 라
 * 자기 쌓임 맥락을 만들고, 아래 0~4 는 전부 그 안에서만 유효하기 때문이다.
 * 헤더(--z-header 50)·메뉴(60)·페이지 전환(40/70)은 무대 밖 body 직계라
 * 언제나 무대 위에 그려진다.
 * ========================================================================== */

.stage__pin > .scene--swirl-titles,
.stage__pin > .scene--image-swirl {
  z-index: 0;
}

.stage__pin > .hero {
  z-index: 4;
}

/* ==========================================================================
 * 4. 히어로 편입 보정
 * ==========================================================================
 * 히어로는 원래 "250lvh 섹션 + 안쪽 100lvh sticky" 였다. 무대 안에서는
 * 스크롤 길이를 무대가 쥐므로, 히어로는 핀 한 화면을 그대로 덮기만 하면 된다.
 * (layout.css 의 히어로 규칙을 무대 안에서만 접어 넣는 것이라, 무대 밖 페이지
 *  — work.html 등 — 의 히어로는 아무 영향도 받지 않는다.)
 * ========================================================================== */

.stage__pin > .hero {
  position: absolute;
  inset: 0;
  height: auto; /* layout.css 의 --hero-height(250lvh) 무효화 */
}

/* 핀 안에서는 스크롤이 없으니 sticky 가 할 일이 없다. 그냥 한 화면을 덮는다. */
.scene--hero .hero__sticky {
  position: absolute;
  inset: 0;
  height: auto;
}

/* 오버레이(로고)도 마찬가지. 음수 마진으로 앞 스티키 위에 겹치던 트릭이 필요 없다. */
.hero > .hero__overlay {
  position: absolute;
  inset: 0;
  height: auto;
  margin-top: 0;
}

/* ── 히어로 안쪽 레이어 ───────────────────────────────────────────────
 * BE 방식의 핵심은 "영상이 두 벌의 글자 사이에 끼는 것"이다.
 *   1 잉크 벌   영상 밖(크림 배경)에서만 보인다
 *   2 영상
 *   3 크림 벌   영상 박스 모양으로 잘려 영상 위에서만 보인다
 *   4 로고      씬이 꺼져도 남는다 → 씬 밖(.hero__overlay)
 * .hero__titles 는 z-index 도 transform 도 없는 그냥 껍데기여야 한다.
 * 거기에 position 이나 z-index 를 주면 두 벌이 한 덩어리로 묶여 영상이
 * 사이에 못 끼고, 색 갈라짐이 통째로 사라진다. */
.hero__titles {
  position: static;
}

.scene--hero .hero__inner--ink {
  z-index: 1;
}

.scene--hero .hero__sticky {
  z-index: 2;
}

.scene--hero .hero__inner--masked {
  z-index: 3;
}

.hero > .hero__overlay {
  z-index: 3;
}

/* 두 벌의 "색"은 여기서 정하지 않는다 — css/stage/hero.css 담당이다
   (.hero__inner--ink → --ink, .hero__inner--masked → --cream).
   타이틀의 크기·서체·정렬도 마찬가지로 여기서 건드리지 않는다 —
   css/layout.css 의 .hero__title 하나가 인트로와 무대 양쪽의 기준이다.
   이 파일이 정하는 건 "어느 층에 놓이느냐"뿐이다. */

/* ── 로고 ─────────────────────────────────────────────────────────────
 * 흰 로고는 크림 배경 위에서 안 보인다. 그 구간에만 .is-on-light 가 붙어
 * 컬러 로고로 교차한다.
 *   (붙이는 쪽: index.html 맨 아래 인라인 스크립트. 무대 씬에서 직접 붙이기로
 *    하면 그 블록을 지우면 된다 — 클래스 이름만 맞추면 여기는 그대로 돈다)
 * 아무도 안 붙이면 흰 로고 그대로다 — 그게 안전한 실패다. */
.hero__logo {
  position: absolute; /* layout.css 가 이미 absolute 로 두지만, 겹치기의 전제라 여기서도 못 박는다 */
}

/* 두 벌을 정확히 포개 놓고 투명도만 맞바꾼다.
   첫 벌(흰색)이 자리를 잡고, 둘째 벌(컬러)이 그 위에 절대 위치로 겹친다. */
.hero__logo-img {
  display: block;
  transition:
    opacity var(--dur-fast, 0.3s) var(--ease-ui, ease),
    width var(--dur-base, 0.5s) var(--ease-ui, ease);
}

/* ★ 히어로를 지나면 로고가 작아진다 ★
   .is-small 은 index.html 맨 아래 인라인 스크립트가 스크롤 위치를 보고 붙인다.
   크기 자체는 css/tokens.css 의 --hero-logo-width-small 이 정한다 —
   여기서는 "언제 어느 값으로 바꾸는가"만 잇는다.
   위 transition 의 width 가 있어야 툭 바뀌지 않고 부드럽게 줄어든다. */
/* ★ 2026-09-04 채린 "화이트 화면으로 바뀔 때 축소되는 거 없애줘, 그냥 유지" ★
   그래서 아래 규칙을 **껐다** — .is-small 은 여전히 붙지만 크기를 안 바꾼다(170px 그대로).
   되살리려면 주석만 풀면 된다(값은 css/tokens.css --hero-logo-width-small).
.hero__logo.is-small {
  --hero-logo-width: var(--hero-logo-width-small, 100px);
}
*/

.hero__logo-img--on-light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.hero__logo.is-on-light .hero__logo-img--on-dark {
  opacity: 0;
}

.hero__logo.is-on-light .hero__logo-img--on-light {
  opacity: 1;
}

/* 모션 최소화 설정에서는 색 반전이 튀지 않게 즉시 바꾼다 */
@media (prefers-reduced-motion: reduce) {
  .hero__logo {
    transition: none;
  }
}

/* 모바일 — 무대 핀도 보이는 화면 전체를 덮게 한다 (2026-08-30).
   내력·이유는 css/partcover.css 의 같은 블록 참고(주소창 때문에 svh 가 90px 짧다).
   ⚠ 무대 트랙 높이와 씬 경계는 js/stage/core/stage.js 가 EDX.vh() 로 계산한다 —
     그쪽도 함께 봐야 값이 안 갈린다. */
@media (max-width: 767px) {
  /* ⚠ 뷰포트 단위가 아니라 **얼어붙은 px** — 이유는 js/boot.js 의 --vh100 주석 참고 */
  .stage__pin { height: var(--vh100, 100lvh); }
}

/* ── 스월 문구가 사진보다 위에 ── (2026-08-31 폰 · **2026-09-01 데스크톱까지 확대**)
 * 두 씬은 원래 같은 층(z-index 0)이라 **DOM 순서**대로 사진(.scene--image-swirl)이
 * 나중에 그려져 문구를 덮었다.
 *   · 폰 (2026-08-31 채린 "사진이 텍스트랑 겹치지 않게") — 문구가 화면 폭을 거의 다 써서
 *     겹치는 자리가 많고 글자가 안 읽혔다.
 *   · 데스크톱 (2026-09-01 채린 "이렇게 보여지면 안 될 것 같아 이미지가") — 회전을 줄이면서
 *     사진이 문구 위에 오래 머물러 "더존·신한·제주은행이 합작한" 이 가려졌다.
 *     궤도 반지름만으로는 못 막는다 — 사진마다 크기가 다르고 표류(wander)까지 얹히기 때문이다.
 * → 문구를 한 층 올린다. 사진은 그대로 궤도를 돌되 **글자 뒤로** 지나간다.
 * ⚠ 씬을 그냥 올리기만 하면 **사진이 통째로 사라진다** — 문구 씬은 자기 흰 바탕판
 *   (.swirl__bg--white)을 갖고 있어서, 씬이 위로 가면 그 판이 사진을 덮어 버린다.
 *   그래서 바탕판은 사진 씬으로 넘기고, 문구 씬은 **투명한 글자 층**만 남긴다.
 *   순서: [흰 바탕 + 사진] → [문구]. */
.stage__pin > .scene--swirl-titles { z-index: 1; }
.scene--swirl-titles .swirl__bg--white { background-color: transparent; }
.stage__pin > .scene--image-swirl { background-color: var(--cream); }
/* 바탕이 검정으로 바뀌는 구간(인트로 패널 뒤)도 같이 옮긴다 —
   클래스는 여전히 문구 씬의 바탕판에 붙으므로, 그때는 사진 씬 바탕을 함께 어둡게 한다. */
.stage__pin > .scene--image-swirl:has(~ .scene--swirl-titles .swirl__bg--white.is-behind-panel) {
  background-color: var(--color-bg);
}