/* ---------------------------------------------------------------
   씬 2 · 이미지 소용돌이 + 스월 타이틀
   배경(크림→--accent), 중앙 회전 마크, 두 개의 문구가 한 레이어에 있고
   그 위(아래)로 15장의 이미지가 타원 궤도를 돈다.

   ── 이식 메모 ────────────────────────────────────────────────────
   원본(breakthrough-energy-clone)은 이 파일이 css/tokens.css 의
   --cream/--accent/--ink/--sans 에 기대고 있었다(값은 stack.css).
   scroll-kit 의 css/tokens.css 에는 그 넷이 없다(수정 금지 파일이다).
   그래서 넷의 정의와 Saans @font-face 는 **css/stage/stack.css** 가 :root 에
   들고 있다. 이 파일은 그걸 var() 로 쓰기만 한다.
   ⚠ 여기에 같은 이름을 다시 정의하지 마라. 씬 클래스에 걸면 :root 보다
     구체적이라 stack.css 쪽 값을 조용히 이겨서, 거기 적힌
     "★ 스월 배경색 바꾸는 곳 ★" 을 고쳐도 화면이 안 바뀐다.
   --------------------------------------------------------------- */

.scene--swirl-titles {
  z-index: 0;
}

.swirl__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swirl__bg--white {
  background-color: var(--cream);
}

/* 하늘색이 사각형으로 오므라든 뒤, 그 **바깥**을 채우는 색.
   흰 배경 레이어를 그대로 재활용한다 — 하늘색이 화면을 다 덮은 순간(BG_TO)에
   이 클래스가 붙으므로, 색이 바뀌는 장면은 하늘색에 가려 보이지 않는다.
   페이지 바탕(--color-bg)과 같은 색이라 다음 섹션으로 넘어갈 때 이음매가 안 보인다.
   ★ 이 색 바꾸는 곳 ★ 아래 background-color
   (붙이는 쪽: js/stage/scenes/swirl-titles.js 의 is-behind-panel) */
.swirl__bg--white.is-behind-panel {
  background-color: var(--color-bg);
  /* ★ 사각형 바깥 사진 바꾸는 곳 ★
     사진이 안 뜨거나 로딩 전이면 위 background-color 가 그대로 보인다(안전한 실패).
     ⚠ 사진을 같은 이름으로 덮어썼으면 뒤의 ?v= 날짜를 함께 올려라.
       안 그러면 브라우저가 옛 사진을 캐시에서 계속 꺼내 써서 "안 바뀐다". */
  background-image: url("../../assets/img/intro-bg.jpg?v=260918-1124");
  background-size: cover;
  background-position: center;
  /* ★ 블러 세기 ★ 사각형 안 글자에 시선이 가도록 배경을 흐린다.
     scale 을 살짝 키우는 건 블러가 화면 가장자리를 흐릿하게 갉아먹는 걸 막기 위해서다
     (블러 반경만큼 바깥이 비어 보인다). 블러를 키우면 scale 도 같이 키운다. */
  filter: blur(0.2px);
  transform: scale(1.01);
}
/* ★ 폰에서는 그 블러를 끈다 ★ (2026-09-02 채린 "버벅거린다")
   0.2px 은 눈에 거의 안 보이는데, 화면을 꽉 채운 면에 filter 가 걸리면 GPU 가 그 층을 따로
   합성한다 — 스크롤마다 다시 그려야 해서 폰에서 비싸다. scale 도 함께 되돌린다(블러가 없으면
   가장자리를 갉아먹을 일도 없다). ⚠ 데스크톱은 그대로 둔다. */
@media (max-width: 767px) {
  .swirl__bg {
    filter: none;
    transform: none;
  }
}

/* 뒤 배경 = Intro. 화면. 덮을 때부터 사각형이 될 때까지 줄곧 검정(--intro-panel)이다.
   ★ 쌓임 순서 ★ 이 면은 **문구 1 위, 문구 2 아래**에 온다.
   그래야 문구 1(DJ Bank:)이 따로 빠지지 않고 검정에 덮여 사라지고,
   문구 2(Intro.)는 그 검정 사각형 위에 얹힌다. 아래 세 z-index 는 한 세트다. */
.swirl__bg--green {
  background-color: var(--intro-panel);
  opacity: 0;
  z-index: 1;
}

.swirl__titleblock--1 {
  z-index: 0; /* 검정 면 아래 — 덮여서 사라진다 */
}

.swirl__titleblock--2 {
  z-index: 2; /* 검정 면 위 — 사각형 안에 보인다 */
}

.swirl__logo {
  width: 22.7vh;
  height: 22.7vh;
}

/* 가운데 심볼은 두 벌이다. 배경이 넘어갈 때 함께 교차해서, 같은 자리에서 색만 바뀌어 보인다.
     흰 배경 위    → 컬러 — 지금은 끄고 쓴다(바로 아래)
     --accent 배경 위 → 흰색 (아래에서 정한다) */

/* ★ 가운데 D 심볼은 두 벌 다 쓰지 않는다 ★ 문구 뒤가 비어 있는 쪽이 읽기 좋다.
   되살리려면 이 규칙만 지우면 된다 — 마크업(index.html)과 JS 는 그대로 살아 있어서,
   지우는 즉시 흰 배경엔 컬러 D, 하늘색 배경엔 흰 D 가 다시 나온다.
   한 벌만 살리려면 --green(흰 배경) / --white(하늘색 배경) 중 하나만 남겨 두면 된다. */
.swirl__logo {
  display: none;
}
.swirl__logo--white {
  color: #fff;
}

.swirl__logo svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* ★ 흰 심볼 진하기 ★ --accent 배경 위의 흰 심볼만 물러나 있게 한다.
   앞의 컬러 심볼(크림 배경 위)은 원래 색 그대로 100% 다.
   감싸는 .swirl__logo 가 아니라 안쪽 svg 에 거는 게 중요하다 —
   바깥쪽 opacity 는 js/stage/scenes/swirl-titles.js 가 배경 전환에 맞춰
   매 프레임 덮어쓰기 때문에 여기 적어도 그대로 지워진다. */
.swirl__logo--white svg {
  opacity: 0.2;
}

.swirl__title-wrap {
  position: absolute;
  inset: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 두 문구가 놓이는 바탕이 서로 다르다 — 그래서 색도 아래에서 각자 정한다.
       문구 2(DJ Bank:)  흰 배경 위  → 잉크(검정)
       문구 3(Intro.)    검정 사각형 위 → 흰색
     여기서는 기본값만 둔다. */
  color: var(--ink);
}

.swirl__titleblock {
  position: absolute;
  left: 0;
  width: 100%;
}

/* 2·3번째 문구 색은 위 .swirl__title-wrap 의 잉크(검정) 하나로 통일돼 있다.
   한쪽만 다른 색으로 하고 싶으면 여기에 예외를 준다:
     .swirl__titleblock--1 { color: #ffffff; }   ← 2번째만
     .swirl__titleblock--2 { color: #ffffff; }   ← 3번째만 */

/* 3번째 문구는 검정 사각형 위에 놓이므로 흰 글자다. */
.swirl__titleblock--2 {
  color: var(--cream);
}

/* ★ 사각형 안에서 문구 덩어리의 세로 위치 ★ (3번째 문구 전용)
   문구는 화면 세로 한가운데에 놓이는데 하늘색 사각형은 그보다 조금 아래에 있어서,
   그냥 두면 문구가 사각형 안에서 위로 붙는다. 이 값으로 통째로 밀어 맞춘다.
     음수  위로 간다 → 사각형 아래쪽 여백이 늘어난다
     양수  아래로 간다
   px 단위로 적어야 한다(em·% 는 못 읽는다).
   ⚠ 이 값은 JS 가 만들어질 때 한 번만 읽는다 — 고친 뒤 새로고침해야 반영된다.
     (js/stage/scenes/swirl-titles.js 의 --t2-offset-y) */
.swirl__titleblock--2 {
  --t2-offset-y: 20px;
}

.swirl__title {
  font-family: var(--sans);
  font-weight: 600;
  font-style: normal;
  /* ★ 크기 ★ 화면 폭 비례. **2560 에서 몇 px 인가 ÷ 25.6 = vw 값**이다.
     2026-08-28 채린 지정 **2560 에서 90px** → 90 / 25.6 = 3.515625vw
     (전 4.3vw = 110.1px). 1920 67.5px · 1440 50.6px.
     ⚠ 세로(모바일) 값은 아래 @media 에 따로 있다 — 그쪽은 이미 '더 작아지면 안 되는' 하한이라
       같이 줄이지 않았다. 두 곳을 함께 바꿔야 할 때는 잊지 말 것. */
  /* ★ 1920 크기를 모바일 직전(768)까지 유지 ★ (2026-08-31 채린 지정)
     전에는 폭에 그대로 비례해서 1440 에서 50.6px 까지 작아졌다. 넓은 화면에서 잡아 둔
     크기가 좁은 데스크톱에서 흐려지는 셈이라, **1920 에서의 67.5px 를 하한**으로 둔다.
       768~1920  → 67.5px 고정   ·   1920~  → 3.515625vw (2560 에서 90px)
     1920 에서 두 값이 정확히 같아 이어지는 지점에 단차가 없다.
     ⚠ 768 미만은 아래 @media 가 자기 값으로 덮는다 — 거기까지 67.5px 을 끌고 가면 글자가 화면을 넘는다.

     ★ 768~1024 만 조금 작게 ★ (2026-08-31 채린) — 768 에서 67.5px 이면 "더존·신한·제주은행이
     합작한" 한 줄이 화면 폭을 꽉 채워 좌우 여백이 0 이었다. 그 구간만 **60px → 67.5px 로
     이어지게** 눕혔다(37.5px + 2.9297vw 가 768 에서 60, 1024 에서 67.5 를 지난다).
     세 값이 만나는 자리마다 수치가 같아 **어디에도 단차가 없다**:
       768 → 60px  ·  1024 → 67.5px  ·  1024~1920 → 67.5px 고정  ·  1920~ → 3.515625vw
     ⚠ 미디어쿼리를 쓰지 않았다 — 경계에서 값이 툭 바뀌지 않게 하려는 것이다.

     ★ 2026-09-08 채린: 좁은 데스크톱에서는 **화면 폭에 비례해 줄인다** ★
     문구가 '더존비즈온과 신한금융그룹 제주은행이'(09-07)로 길어져 67.5px 한 줄이 998px 다.
     1440 에선 화면의 69% 라 괜찮지만 1000 안팎(아이패드 가로·좁은 창)에선 99% 를 차지해
     양옆 스월 사진과 겹쳤고, 768~900 에선 줄이 감겨 세 줄이 됐다(실측).
     → 한 줄이 늘 **화면의 약 71%** 가 되게 4.8vw 로 따라가고, 67.5px 에서 멈춘다.
       768 → 36.9px · 1000 → 48px · 1200 → 57.6px · 1406 → 67.5px(여기부터 고정) · 1920~ → 3.515625vw
     세 식이 만나는 자리(1406·1920)에서 값이 같아 단차는 없다. 옛 식은 아래 줄에 남겨 둔다.
       (옛) font-size: max(3.515625vw, min(67.5px, 37.5px + 2.9297vw));
     ⚠ 문구를 더 길게 바꾸면 4.8 을 다시 잰다: 67.5 × 0.71 × 화면폭 ÷ 한줄폭(px) → vw 값. */
  font-size: max(3.515625vw, min(67.5px, 4.8vw));
  letter-spacing: -0.02em;
  /* 원본은 37.5rem 이라고 썼다. 원본 html 은 font-size:62.5% 라 37.5rem = 375px 였지만
     scroll-kit 의 루트는 clamp(15px…22px) 라 같은 37.5rem 이 562~825px 로 변한다.
     뜻(375px = 유동 타이포의 하한 뷰포트)을 지키려고 px 로 고정했다. 값은 그대로다. */
  /* ★ 줄 간격(행간) ★ 글자 크기의 몇 배인가. 1.1 = 글자 크기 × 1.1
     넓히려면 1.3, 좁히려면 1.0. 이 값은 문구 안의 **모든 줄 사이**에 적용된다.
     ("DJ Bank:" 아래만 더 띄우는 건 아래쪽 .swirl__line:first-child 의 margin 담당)
     원래는 화면 폭에 따라 1.07~1.1 로 미세하게 변하는 식이었는데(원본 이식),
     차이가 3% 뿐이라 고치기 쉽게 한 숫자로 폈다. */
  line-height: 1.35;   /* 2026-08-30 채린 요청으로 1.2 → 1.35 (줄 사이를 더 띄움) */
  text-align: center;
  width: 100%;
  text-rendering: optimizeSpeed;
}

.swirl__line {
  will-change: translate;
}

/* ★ 색을 주는 줄 ★ (2026-08-27 채린 요청: "국내 첫 ERP뱅킹" 을 블루로)
   예전에는 첫 줄("DJ Bank:")이 브랜드 이름이라 파랬는데, 그 줄을 빼면서 **마지막 줄**로 옮겼다.
   지금 문구는 두 줄이다(가로판):
     더존비즈온과 신한금융그룹 제주은행이   ← 검정 (2026-09-07 문구 변경)
     합작한 국내 첫 ERP뱅킹              ← 블루 — 단, '합작한' 은 아래 규칙으로 검정
   ⚠ 줄 수가 바뀌면 :last-child 가 가리키는 줄도 바뀐다 — 문구를 고칠 때 함께 볼 것.
   여백을 line-height 로 주지 않는 이유: 그건 모든 줄 사이가 같이 벌어진다. */
.swirl__titleblock--1 .swirl__line:last-child {
  color: #0046ff;
}

/* ★ 블루 줄 안에서 검정으로 되돌릴 단어 ★ (2026-09-03 채린 "합작한 > 검정텍스트로")
   어느 단어인지는 js/stage/scenes/swirl-titles.js 의 INK_WORDS 가 정하고 클래스를 붙인다.
   여기서는 색만 원래 글자색(--ink)으로 되돌린다. 뒤의 규칙이라 위 :last-child 를 이긴다. */
.swirl__titleblock--1 .swirl__word--ink {
  color: var(--ink);
}

/* ★ "Part I." ★ 3번째 문구의 첫 줄은 표제처럼 크게 쓰고 아래를 넉넉히 띄운다.
   아래 두 줄(본문)은 서로 붙어 있어야 한 덩어리로 읽힌다 — 그 사이는 건드리지 않는다.
     font-size    본문 대비 배수 (1 이면 본문과 같은 크기)
     margin-bottom  아래 본문과의 거리. 단위 em 은 **이 줄의 커진 글자 크기** 기준이다. */
.swirl__titleblock--2 .swirl__line:first-child {
  font-size: 1em;
  margin-bottom: 150px;
}

/* ★ 영문 줄 서체 규칙은 껐다 (2026-08-27) ★
   'DJ Bank:' 줄을 빼면서 이 덩어리의 첫 줄이 한글이 됐다. 규칙을 그대로 두면 한글이
   AT Arges(한글 글리프 없음)를 거쳐 **엉뚱한 대체 서체**로 그려진다.
   영문 줄이 다시 생기면 아래를 풀고 :first-child 대신 그 줄을 가리키게 하면 된다.

:root {
  --swirl-en-family: 'Arges Cond', 'Arial Narrow', sans-serif;
  --swirl-en-size: 1.5em;
  --swirl-en-weight: 400;
  --swirl-en-tracking: 0.005em;
}
.swirl__titleblock--1 .swirl__line:first-child {
  font-family: var(--swirl-en-family);
  font-weight: var(--swirl-en-weight);
  font-size: var(--swirl-en-size);
  letter-spacing: var(--swirl-en-tracking);
}
*/

.swirl__word {
  display: inline-block;
  white-space: pre;
}

/* --- 이미지 소용돌이 --- */

.scene--image-swirl {
  z-index: 1;
}

.swirl__rect {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 30lvh;
  width: auto;
  will-change: translate, scale;
}

/* ---------------------------------------------------------------
   세로(모바일) — 원본은 같은 클래스명을 쓰는 별도 컴포넌트라
   스코프 CSS 값이 다르다. 여기서 그 차이만 덮어쓴다.
   --------------------------------------------------------------- */

/* ⚠ px 로 적는다. 원본은 48em 이었는데, em 은 **브라우저 기본 글꼴 크기에 따라 변한다** —
   접근성 설정으로 기본 글꼴을 20px 로 키운 사용자에겐 48em 이 960px 이 된다.
   그런데 이 씬의 JS(js/stage/scenes/*.js 의 isPortrait)는 항상 768px 로 판정하므로,
   그 사이 폭에서 JS 는 가로용 줄 배치로 계산하는데 CSS 는 세로용 큰 글씨를 씌워 문구가 깨진다.
   768px = 프로젝트 공용 브레이크포인트(css/tokens.css 의 --bp-md). */
@media only screen and (width < 768px) {
  /* 주소창이 접혔다 펴져도 배경이 화면 아래까지 닿게 하던 보정.
     ⚠ **이제 0 이다** (2026-09-01) — 핀 자체가 `--vh100`(본 것 중 가장 큰 높이)이라
       배경이 이미 가장 큰 화면까지 덮는다. 여기에 (lvh - svh) 를 더하면 그만큼 더 내려가
       아래가 넘친다. 브라우저마다 lvh/svh 가 달라 이 값도 제각각이었다. */
  .swirl__bg {
    padding-bottom: 0;
  }

  /* 세로 로고는 높이가 아니라 폭 기준(29vw)이 먼저 걸린다. 390×844 → 113.09px */
  .swirl__logo {
    width: min(29vw, 16.1svh);
    height: min(29vw, 16.1svh);
  }

  /* 4.15vw 로는 너무 작아 세로에서만 6.1vw. 자간도 -0.02em 이 아니라 -0.01em 이다.
     세로 스코프에만 있는 font-kerning:none 도 그대로 옮긴다(커닝 페어 해제). */
  .swirl__title {
    /* ★ 크기 ★ **390 에서 몇 px 인가 ÷ 3.9 = vw 값**이다.
       2026-09-01 채린 지정 **390 에서 38px** → 38 / 3.9 = 9.7436vw
       (내력: 6.1vw = 23.8px → 10.769vw = 42px → **9.7436vw = 38px**).
       ⚠ vw 라 화면 폭을 따라간다 — 390 에서 38px · 430 에서 41.9px 이다.
         어느 폰에서나 딱 38px 로 고정하려면 `font-size: 38px` 로 적으면 된다(그때는 안 커진다).
       ⚠ 가로(데스크톱) 값은 이 파일 위쪽 .swirl__title 에 따로 있다(3.515625vw). 두 곳이 따로 논다. */
    font-size: 9.7436vw;
    /* 굵기·자간도 세로만 한 단계씩 (2026-08-30 채린 지정)
       굵기 600 → **700** · 자간 -0.01em → **-0.02em**(가로와 같은 값이 됐다).
       ⚠ 굵기는 원래 이 블록에 없었다 — 위 .swirl__title 의 600 을 물려받고 있었으므로
         여기 적어야 **세로에서만** 굵어진다. */
    font-weight: 700;
    letter-spacing: -0.02em;
    font-kerning: none;
  }

  /* ★ 사진 크기 ★ **--vh100 기준** (2026-09-01 채린 "브라우저마다 크기가 다르게 보인다")
     전에는 30svh 였다. 그런데 **카카오 인앱 브라우저는 svh 를 툴바에 따라 바꾸고**,
     사파리·크롬·슬랙도 툴바 높이가 제각각이라 같은 폰에서도 사진 크기가 달라 보였다
     (채린이 카톡 화면과 사파리 화면을 나란히 보내 확인). --vh100 은 js/boot.js 가 px 로
     굳혀 넣는 값이라 어느 브라우저에서든 같다.
     ⚠ 이 프로젝트의 모바일 CSS 에서 svh/lvh/vh 를 쓰면 안 된다는 규칙과 같은 이유다
       (js/boot.js 의 --vh100 머리말 참고).
     ⚠ 무대 JS 도 같은 값을 본다(EDX.vh()). 한쪽만 바꾸면 사진 크기와 가운데가 어긋난다. */
  .swirl__rect {
    height: calc(var(--vh100, 100svh) * 0.3);
  }

  /* 문구 블록도 같은 기준으로 — 이게 svh 면 문구가 핀 가운데가 아니라 툴바 기준 가운데에 선다
     (채린 슬랙 화면: 텍스트가 위로 올라가 보였다). */
  .swirl__title-wrap {
    height: var(--vh100, 100svh);
  }
}