/* ==========================================================================
 * tokens.css — 이 킷의 유일한 "설정 파일"
 * ==========================================================================
 * 여기 값만 바꾸면 브랜드가 통째로 바뀐다. 다른 CSS 파일에는
 * 하드코딩된 색·크기·시간이 한 줄도 없다(있으면 버그다).
 *
 * 값 옆의 "원본 실측" 주석은 참고한 원본 사이트를 브라우저에서
 * getComputedStyle 로 잰 수치다. 색은 그대로 쓰지 않고 중립값으로 바꿔 뒀고,
 * 비율(타이포 스케일·간격·이징)은 실측 그대로 옮겼다.
 *
 * 반응형: 브레이크포인트는 768px 하나뿐이다. 모바일 값을 :root 에 두고,
 *        데스크톱에서 달라지는 토큰만 파일 맨 아래 @media 에서 덮어쓴다.
 * ========================================================================== */

:root {
  /* ------------------------------------------------------------------ *
   * 1. 색
   * ------------------------------------------------------------------ *
   * 원본 팔레트(실측): 배경 #000000 / 본문 #f1ece8 / 보조 #eadfd2
   *                    강조 #a55f2d(테라코타) / 반전 텍스트 #ffffff
   * 아래는 같은 명도 관계를 유지한 중립 버전이다. 강조색만 바꿔도
   * 사이트 전체 인상이 바뀐다.
   */

  /* 페이지 바탕. 거의 검정이지만 순검정보다 살짝 열어 뒀다 */
  --color-bg: #0b0b0b;                       /* 원본 실측 #000000 */

  /* 본문 기본 글자색. 따뜻한 오프화이트 */
  --color-ink: #f4f1ec;                      /* 원본 실측 --off-white #f1ece8 */

  /* 한 단계 가라앉은 글자색. 히어로 타이포·내비·메뉴에 쓴다 */
  --color-ink-quiet: #e8e1d6;                /* 원본 실측 --background #eadfd2 */

  /* 강조색. 푸터에 닿으면 페이지 전체가 이 색으로 반전된다.
     원본은 테라코타였다. 채린 브랜드색을 넣을 자리. */
  --color-accent: #7d6a55;                   /* 원본 실측 --foreground #a55f2d */

  /* 반전 상태(강조색 배경) 위에 올라가는 글자색 */
  --color-ink-invert: #ffffff;               /* 원본 실측 --color-white #ffffff */

  /* 면(surface) — 이미지가 로드되기 전 자리를 채우는 반투명 판.
     배경색 위에 얹히므로 알파값으로 둔다. */
  --surface-1: rgba(255, 255, 255, 0.06);    /* 아주 옅은 판 (예비 단계. 기본은 surface-2) */
  --surface-2: rgba(255, 255, 255, 0.10);    /* 원본 실측: 이미지 플레이스홀더 배경 */
  --surface-3: rgba(255, 255, 255, 0.20);    /* 원본 실측: 연표 세로 배경선 */

  /* 푸터 반전 상태(밝은 강조색 배경)에서 쓰는 판. motion.css 가 갈아 끼운다 */
  --surface-1-invert: rgba(0, 0, 0, 0.06);
  --surface-2-invert: rgba(0, 0, 0, 0.10);
  --surface-3-invert: rgba(0, 0, 0, 0.20);

  /* 선 */
  --color-line: currentColor;                /* .divider 는 글자색을 따라간다 */
  --color-line-strong: #ffffff;              /* 연표 진행선(자라나는 흰 선) */

  /* 상태별 불투명도 (실측) */
  --opacity-quiet: 0.8;                      /* 캡션·크레딧 */
  --opacity-muted: 0.75;                     /* 연표 항목 부제 */
  --opacity-idle: 0.4;                       /* 아직 지나지 않은 연도 라벨 */
  --opacity-dimmed: 0.3;                     /* 다른 항목에 호버 중인 연표 항목 */
  --opacity-veil: 0.9;                       /* 카드 스택에서 아래 카드를 덮는 레이어 */
  --opacity-hover: 0.6;                      /* 원본 실측: 링크에 마우스를 올렸을 때 */

  /* ------------------------------------------------------------------ *
   * 2. 폰트
   * ------------------------------------------------------------------ *
   * 원본은 유료 라이선스 디스플레이 서체를 쓴다. 여기엔 넣지 않는다.
   * 시스템 폰트로 시작하고, 채린이 자기 폰트를 넣을 때는
   * 아래 @font-face 자리에 선언한 뒤 --font-display 맨 앞에 이름만 추가하면 된다.
   */

  /*  ↓↓↓ 여기에 웹폰트를 넣으세요 ↓↓↓
   *
   *  @font-face {
   *    font-family: "MyDisplay";
   *    src: url("../assets/fonts/mydisplay.woff2") format("woff2");
   *    font-weight: 400 700;
   *    font-display: swap;
   *  }
   *
   *  ↑↑↑ 넣은 뒤 --font-display 의 맨 앞에 "MyDisplay", 를 추가 ↑↑↑
   */

  /* 큰 제목·히어로 타이포용 */
  /* Pretendard 를 CDN 으로 싣고 있다 (index.html / work.html <head> 참고).
     로컬 호스팅으로 바꾸려면 assets/fonts/ 에 파일을 넣고 @font-face 를 선언한 뒤
     head 의 CDN <link> 두 줄을 지우면 된다. */
  --font-display: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto,
    "Helvetica Neue", "Malgun Gothic", sans-serif;

  /* 본문용. 지금은 디스플레이와 같은 스택 */
  --font-body: var(--font-display);

  /* 자간·연도 같은 숫자 라벨에 tabular 숫자가 필요하면 여기서 바꾼다 */
  --font-numeric: var(--font-body);

  --weight-regular: 400;
  --weight-medium: 500;                      /* 원본 실측: 내비·연표 제목·캡션이 전부 500 */

  /* ------------------------------------------------------------------ *
   * 3. 타이포 스케일
   * ------------------------------------------------------------------ *
   * 모든 크기는 rem 이고, rem 의 기준(html font-size)이 뷰포트에 따라 늘어난다.
   * 즉 rem 값 하나만 정해 두면 전 해상도에서 비율이 유지된다.
   *
   * 원본 실측 루트 크기: 640px 이하 15px → 1440px 17.55px → 1920px 이상 22px
   * 아래 식은 640~1600px 구간을 오차 0.2px 안쪽으로 재현한다.
   * (원본은 1536px 부근에서 기울기를 한 번 더 키우는데, 그 꺾임은 생략했다)
   */
  --font-size-root: clamp(15px, calc(12.96px + 0.319vw), 22px);

  /* 고정 스케일 — 모바일/데스크톱 공통 */
  --text-xs: 0.75rem;                        /* 원본 실측 13.16px @1440 — 연도, 미세 라벨 */
  --text-sm: 0.875rem;                       /* 원본 실측 15.36px @1440 — 이미지 캡션 */
  --text-base: 1rem;                         /* 원본 실측 17.55px @1440 — 내비, 기본 UI */
  --text-md: 1.125rem;                       /* 원본 실측 19.75px @1440 — 본문 문단 */

  /* 가변 스케일 — 아래 @media 에서 데스크톱 값으로 덮어쓴다 */
  --text-lg: 1.25rem;                        /* 연표 항목 제목 */
  --text-year: 1.125rem;                     /* 연표 연도 라벨 */
  --text-sub: 0.625rem;                      /* 연표 항목 부제 */
  --text-quote: 1.875rem;                    /* 푸터 인용문 */
  --text-lead: 1.75rem;                      /* 섹션 도입 큰 문단 */
  --text-title: 3.75rem;                     /* 상세 페이지 h1 */
  --text-display: 3rem;                      /* 섹션 대제목 h2 */
  --text-hero: 36vw;                         /* 히어로 초대형 타이포 */

  /* 행간 (배수) */
  --leading-tight: 0.85;                     /* 원본 실측: 가장 조인 대제목 변형 */
  --leading-none: 1;                         /* 대제목·인용문 기본 */
  --leading-snug: 1.05;                      /* 연표 항목 제목 */
  --leading-body: 1.1;                       /* 본문 문단 */
  --leading-label: 1.2;                      /* 캡션 블록 */
  --leading-caption: 1.4;
  --leading-normal: 1.5;                     /* 기본 텍스트 */

  /* 자간 (em) — 큰 글자일수록 더 조인다 */
  --tracking-hero: -0.075em;                 /* 원본 실측: 히어로 타이포 */
  --tracking-display: -0.05em;               /* 대제목 / 상세 h1 */
  --tracking-snug: -0.04em;                  /* 연표 제목, 큰 도입 문단 */
  --tracking-label: -0.025em;                /* 연도, 스택 캡션, 푸터 인용문 */
  --tracking-body: -0.01em;                  /* 본문 문단 */
  --tracking-ui: -0.001em;                   /* 내비 링크 */
  --tracking-none: 0;

  /* ------------------------------------------------------------------ *
   * 4. 간격
   * ------------------------------------------------------------------ *
   * rem 기반이라 루트가 커지면 여백도 같이 커진다(원본과 동일한 방식).
   */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;                        /* 원본 실측 21.94px @1440 — 콘텐츠 그리드 갭 */
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;                          /* (space-* 는 여백 사다리라 지금 안 쓰는 칸도 남겨 둔다) */
  --space-16: 4rem;                          /* 원본 실측 70.21px @1440 — 푸터 블록 간격 */
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-45: 11.25rem;                      /* 원본 실측 197.47px @1440 — 인트로 위 여백 */
  --space-72: 18rem;                         /* 원본 실측 315.94px @1440 — 섹션 아래 여백 */

  /* 좌우 여백(거터). 원본은 데스크톱에서도 딱 1rem 으로 아주 좁다.
     넓히고 싶으면 이 값 하나만 키우면 전 컴포넌트가 따라온다. */
  --gutter: var(--space-4);

  /* 섹션 리듬 — 아래 @media 에서 데스크톱 값으로 덮어쓴다 */
  --section-pad-top: var(--space-6);         /* 원본 실측 1.5rem, 전 해상도 동일 */
  --section-pad-bottom: var(--space-40);     /* 모바일 10rem → 데스크톱 18rem */
  --section-gap: var(--space-20);            /* 섹션 내부 블록 사이 */

  /* 그리드 */
  --grid-columns: 12;                        /* 원본 실측: 일반 콘텐츠 그리드 12칸 */
  --grid-gap: var(--space-5);
  --timeline-columns: 16;                    /* 원본 실측: 연표 전용 그리드 16칸 */
  --timeline-gap: var(--space-4);            /* 모바일만. 데스크톱은 0 */

  /* 콘텐츠 최대 폭. 원본은 상한 없이 전폭이다.
     너무 넓은 화면이 싫으면 예: 1920px 로 바꾼다. */
  --content-max: none;

  /* ------------------------------------------------------------------ *
   * 5. 컴포넌트 치수
   * ------------------------------------------------------------------ */
  --hero-height: 250lvh;                     /* 히어로 스크롤 구간. mod-hero.js 가 이 길이를 전제로 스크럽한다 */
  --hero-stage-height: 100lvh;               /* 스티키 무대 높이 */
  --hero-line-1-y: 15%;                      /* 원본 실측: 앞줄 글자 중심의 세로 위치 */
  --hero-line-2-y: 84%;                      /* 원본 실측: 뒷줄 글자 중심의 세로 위치 */

  --header-height: 3.05rem;                  /* 원본 실측 53.6px @1440 */

  --timeline-line-width: 1px;
  --timeline-tip-size: var(--space-2);       /* 원본 실측 8.77px = 0.5rem */
  --timeline-title-offset: 20%;              /* 제목 상자가 이미지 바깥으로 나가는 양(셀 폭 대비) */
  --timeline-title-max-right: 45ch;          /* --timeline-title-safe-w 미설정 시 폴백 (원본 동일) */
  --timeline-title-max-left: 43ch;
  /* 모바일에서 활성 항목은 mod-timeline.js 가 사진을 1.3배로 키운다.
     아래 두 값이 그 확대분이 이웃 요소를 덮지 않게 비워 두는 자리다. */
  --timeline-title-gap-mobile: var(--space-8);   /* 원본 실측 30px = 2rem */
  --timeline-year-mobile-top: 3.75rem;           /* 원본 실측 56.25px */

  /* 설명이 붙는 연표(.timeline--annotated) 전용. 원본 연표에는 없는 값들이다.
     항목이 [사진 | 글] 두 칸으로 서는 판이라, 사진 폭과 그 사이 간격을 여기서 정한다. */
  --timeline-anno-text-w: 20rem;                 /* 사진 옆 글 상자의 최대 폭. 셀마다 인라인으로 덮어쓴다 */
  --timeline-anno-text-w-mobile: 82%;            /* 모바일에서 사진 아래 글이 차지하는 폭 */
  /* 오른쪽에 글이 오는 항목이 비워 둬야 하는 화면 오른쪽 자리.
     따라다니는 목차가 right:32px + 항목 min-width:130px (css/sidenav.css) 를 쓴다.
     이만큼 안 비우면 목차 라벨이 본문 글자 위에 겹친다. */
  --timeline-anno-edge-right: 170px;
  --timeline-anno-gap: var(--space-6);           /* 사진과 글 사이 */
  --timeline-anno-row-pad: var(--space-16);      /* 항목 위아래 여백(= 연표의 세로 리듬) */
  --timeline-anno-title-size: 1.375rem;

  --stack-height: 300svh;                    /* [data-stack-root] 인라인 style 이 덮어쓴다 */
  --stack-caption-max: 36rem;                /* 원본 실측 631.9px @1440 */
  --stack-media-height: 60%;                 /* 원본 실측: 모바일 카드에서 미디어가 차지하는 높이 */

  --carousel-item-width: 80%;                /* 원본 실측: 캐러셀 카드 폭(모바일) */
  --carousel-item-aspect: 3 / 4;
  --snap-type: none;                         /* mod-carousel.js 가 "x mandatory" 로 덮어쓴다 */

  --video-aspect: 11 / 8;                    /* 원본 실측 810×590 @1440 (≈1.374) */
  --flip-slot-aspect: 16 / 10;               /* 원본 실측: 제목 안에 비워 둔 사진 칸 */
  --parallax-overscan: 1.2;                  /* 원본 실측: 전폭 패럴랙스 이미지 확대율 */
  /* 푸터 타이틀 마스크의 비율은 마크업의 <svg viewBox> 가 정한다.
     원본 실측값은 1404.9×210.5 @1440 (≈20/3) — viewBox 를 바꿀 때 참고. */

  --footer-height: 100lvh;
  --divider-height: 1px;

  --radius-sm: 0.375rem;                     /* 원본 실측 6.58px @1440 */

  /* 키보드 포커스 링 */
  --focus-width: 2px;
  --focus-offset: 3px;

  /* 레이어 순서 — 한 곳에 모아 둬야 겹침 사고가 안 난다 */
  --z-scene: 1;
  --z-hero-overlay: 2;
  --z-timeline-track: 1;
  --z-timeline-progress: 3;
  --z-header: 50;
  --z-menu: 60;
  --z-transition-dim: 40;
  --z-transition-panel: 70;

  /* ------------------------------------------------------------------ *
   * 6. 모션 — 이징과 시간
   * ------------------------------------------------------------------ *
   * 이 이름들은 js/boot.js 가 GSAP 에 같은 커브로 등록해 둔 것과 1:1로 맞다.
   * 이름을 바꾸면 CSS 와 JS 의 움직임이 어긋난다.
   */
  --ease-magic: cubic-bezier(0.33, 0, 0, 1);        /* 원본 실측. 가장 많이 쓰는 커브 */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);  /* 원본 실측. 리빌(줄/단어/디바이더) */
  --ease-quart: cubic-bezier(0.41, 0.35, 0.2, 1);   /* 이미지 클립 리빌 */
  /* Flip 이동용. 지금은 GSAP 쪽(boot.js 의 "base.inOut")만 쓰지만,
     CSS 로 같은 커브가 필요할 때를 위해 짝을 맞춰 둔다. */
  --ease-base: cubic-bezier(0.46, 0.03, 0.12, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);          /* 원본 실측. 헤더·호버 같은 짧은 UI 전환 */

  --dur-fast: 0.3s;                          /* 원본 실측: 헤더 숨김, 크레딧 페이드 */
  --dur-image: 0.5s;                         /* 이미지 로드 페이드 */
  --dur-medium: 0.7s;                        /* 푸터 색 반전, 연표 이미지 클립 */
  --dur-reveal-image: 1.2s;                  /* .reveal-image 클립 애니메이션 */
  --dur-reveal-line: 1.4s;                   /* .reveal-lines / .reveal-divider */
  --dur-reveal-word: 1.6s;                   /* .reveal-words */

  --stagger-line: 50ms;                      /* 줄당 지연 */
  --stagger-word: 75ms;                      /* 단어당 지연 */
  --stagger-image: 0.2s;                     /* 이미지 --i 당 지연 */

  /* ------------------------------------------------------------------ *
   * 7. 브레이크포인트 (참고용)
   * ------------------------------------------------------------------ *
   * CSS 의 @media 는 커스텀 프로퍼티를 못 읽는다. 아래 값은 "이 숫자를 쓴다"는
   * 기록용이고, 실제 조건문은 각 파일의 @media (min-width: 768px) 에 박혀 있다.
   * 바꾸려면 아래 파일들의 768px 을 **전부 함께** 고쳐야 한다:
   *   css/  tokens · base · layout · motion · stage/swirl · stage/hero
   *   js/   stage/scenes/swirl-titles · stage/scenes/image-swirl · stage/scenes/hero
   *         (세 파일의 isPortrait() — CSS 와 갈리면 무대 문구 배치가 깨진다)
   */
  --bp-md: 768px;

  /* 영상 히어로 위에 까는 어두운 막의 진하기 (0~1).
     영상이 밝으면 올리고, 이미 어두우면 0 으로 낮춰라.
     ★ 2026-08-28 채린 지정: 0.28 → 0.4 → 0.5 → **0.6** ★ 처음 맞춘 값 0.4 는 naver 1784(8987)의
       커버 영상에서 가져온 것이고, 거기서 한 단계 더 눌렀다.
       그쪽은 막 대신 `.cover{background:rgba(0,0,0,.4)}` + `.cover__video{mix-blend-mode:multiply}`
       인데, `.cover` 가 z-index 로 쌓임맥락을 만들어 영상이 그 40% 검정하고만 곱해진다 —
       결과 밝기 배율 0.6012(실측)로 **검정 40% 를 그냥 덮은 것과 같다.**
     ⚠ 프리로더 첫 화면에도 같은 값이 따로 있다(css/boot.css 의 --boot-video-scrim).
       두 화면은 같은 영상이 이어지는 것처럼 보여야 하므로 **두 값을 함께 고칠 것.** */
  --hero-video-scrim: 0.6;

  /* ══ 히어로 타이틀 크기 ══════════════════════════════════════════════
     clamp(최소, 화면폭비례, 최대) — 화면이 커지면 비례해서 커지다가 최대에서 멈춘다.
     아래는 모바일(768px 미만) 값. 데스크톱 값은 이 파일 맨 아래
     @media (min-width: 768px) 안에 따로 있다.
     지금 실측: 390px 화면에서 약 33px */
  /* ★ 스월 문구와 **같은 크기** ★ (2026-08-31 채린 지정) — 390 에서 42px → 42/3.9 = 10.769vw.
     내력: clamp(1.6rem, 8.4vw, 2.6rem)(32.8px) → 10.769vw(42px) → 12.821vw(50px)
           → 17.949vw(70px) → **다시 10.769vw(42px)**.
     ⚠ 스월 문구도 같은 값이다(css/stage/swirl.css 의 세로 .swirl__title).
       **한쪽만 고치면 둘이 갈라진다** — 크기를 바꿀 땐 두 곳을 함께 볼 것. */
  --text-hero-title: 10.769vw;
  --hero-title-weight: 700;       /* 굵기 100~900 */
  /* 줄 간격. 원래 8990 값은 1.28 이었는데 채린 요청으로 좁혔다(2026-08-26).
     실측 1440 화면에서 줄 사이 122.7px → 95px. 데스크톱·모바일이 이 한 값을 같이 쓴다
     (아래 @media (min-width:768px) 에서는 글자 크기만 따로 준다). */
  /* 줄 간격. 2026-09-01 채린 요청으로 1.1 → **1.2**(데스크톱).
     ⚠ 모바일(≤767)은 아래 @media 가 1.25 로 덮으므로 이 값과 무관하다. */
  --hero-title-leading: 1.2;
  --hero-title-tracking: -0.035em;/* 자간. 음수면 좁아진다 */
  --hero-title-shadow: none;      /* 글자 뒤 그림자. 예: 0 2px 24px rgb(0 0 0 / .35) */

  /* 히어로 로고 가로 크기 (SVG 라 세로는 비율대로 따라간다) */
  --hero-logo-width: 190px;        /* 데스크톱 (히어로를 지나면 --hero-logo-width-small 로 줄어든다) — 2026-09-04 채린 150 → 170 (4차 로고 987×327 기준, 높이 56px) */
  --hero-logo-width-mobile: 155px; /* 768px 미만 — 2026-09-04 채린 120 → 140 → 155 ("좀만 더", 높이 43px) */
  --hero-logo-width-small: 136px;  /* ⚠ 지금은 안 쓴다 — 2026-09-04 채린 "축소 없애줘" 로 css/stage/stack.css 의 .is-small 규칙을 껐다 */

  /* 유튜브 임베드를 얼마나 확대해 잘라낼지. 유튜브가 얹는 제목/관련영상
     UI 를 화면 밖으로 밀어내려면 1보다 커야 한다. 1.25~1.5 권장. */
  --hero-yt-zoom: 1.22;
}

/* ==========================================================================
 * 데스크톱(≥768px)에서 달라지는 토큰만 여기서 덮어쓴다.
 * 레이아웃 구조 자체가 바뀌는 것(연표·카드 스택 등)은 layout.css 담당.
 * ========================================================================== */
@media (min-width: 768px) {
  :root {
    --text-hero: 20vw;                       /* 원본 실측: 모바일 36vw → 데스크톱 20vw */
    --text-display: 7rem;                    /* 원본 실측 122.87px @1440 */
    --text-title: 6rem;                      /* 원본 실측 105.32px @1440 */
    --text-lead: 3rem;                       /* 원본 실측 52.66px @1440 */
    --text-quote: 3rem;                      /* 원본 실측 52.66px @1440 */
    --text-lg: 1.875rem;                     /* 원본 실측 32.91px @1440 */
    --text-year: 1.875rem;                   /* 원본 실측 32.91px @1440 */
    --text-sub: 0.9375rem;                   /* 원본 실측 16.46px @1440 */

    --section-pad-bottom: var(--space-72);   /* 원본 실측: 10rem → 18rem */
    --section-gap: var(--space-24);
    --timeline-gap: 0;                       /* 원본 실측: 데스크톱 연표 그리드는 갭 0 */
    --timeline-anno-gap: var(--space-8);     /* 설명 연표: 사진과 글 사이가 데스크톱에서 넓어진다 */
    /* 연혁 항목 위아래 여백(= 연표의 세로 리듬). 2026-09-01 채린 "타이틀 윗부분 마진이
       너무 많이 남는다" → 6rem(--space-24) → **5rem**.
       ⚠ padding-block 이라 **위아래가 함께** 줄어든다 — 항목 사이 간격도 그만큼 좁아진다.
       ⚠ 768~1279 은 css/history.css:484 가 3.5rem 으로, ≤767 은 같은 파일 723행이 7rem 으로 따로 덮는다.
         여기 값은 **1280 이상**에만 닿는다. */
    --timeline-anno-row-pad: 5rem;
    --timeline-anno-title-size: 1.75rem;

    /* 원본은 캐러셀을 데스크톱에서 아예 감춘다(모바일 전용 컴포넌트).
       여기서는 감추는 대신 카드 폭만 줄여 세 장이 보이게 했다.
       원본처럼 감추고 싶으면 layout.css 의 @media 안에
       [blossom-carousel]{display:none} 한 줄만 추가하면 된다. */
    --carousel-item-width: 32%;

    /* 히어로 타이틀 — 데스크톱.
       ★ 1920 크기를 1024 까지 유지한다 ★ (2026-08-31 채린 "스월 구간처럼 1920 유지하다가 조정되게")
       전에는 폭에 그대로 비례해(6vw) 1024 에서 61px 까지 작아졌다. 스월 문구와 **같은 방식**으로,
       1920 에서의 105px 를 아래쪽으로 끌고 내려오다가 좁아지는 구간에서만 눕힌다:
         768 → 55px  ·  1280~1920 → 105px 고정  ·  1920~ → 지금 식(2560 에서 116px)
       (2026-08-31 채린이 두 번 줄였다. ① "줄어들 때 너무 크다" → 768 을 79 → 64px.
        ② "1024 는 105 로 고정하지 말고 더 줄여라" → **고정이 시작되는 폭을 1024 → 1280** 으로 올렸다.
        그래서 1024 는 이제 고정값이 아니라 눕는 구간에 들어간다.
        ③ "조금만 더 줄여줘" → 눕는 구간을 한 번 더 낮췄다(768 을 64 → 55px).
           지금: 768 55px(글줄 56%) · 1024 80px(61%) · 1280 105px(64%).)
       ⚠ 1024 밑에서도 105px 를 유지하면 "대한민국 최초의 금융" 한 줄이 화면을 넘는다
         (768 에서 화면의 107%). 그래서 768~1024 만 `1px + 10.156vw` 로 눕혀 두 지점을 잇는다 —
         어느 경계에서도 값이 튀지 않는다(1920 에서 104.9 ↔ 105).
       ⚠ 모바일(≤767)은 위쪽 :root 의 --text-hero-title(10.769vw)이 맡는다. 거기는 스월 문구와
         같은 값이라 **한쪽만 고치면 둘이 갈라진다**. */
    /* ★ 2026-09-01 채린 "1800 미만에서 좀 크다, 조금만 줄여줘" → 전체에 **0.92** 를 곱했다.
       실측: 1280~1920 이 105 → **96.6px**, 2560 은 116.2 → 107px.
       ⚠ 구간별로 다른 배수를 주면 그 경계에서 글자 크기가 튄다. 그래서 곡선 전체를 눌렀다 —
         어느 폭에서도 이어진다. 원래 크기로 되돌리려면 `* 0.92` 만 지우면 된다. */
    /* ★ 2026-09-01 (2차) 채린 "1300 화면에서 타이틀이 너무 크다" ★
       1280 부터 1920 값(96.6px)을 그대로 쓰고 있었던 게 원인이다 — 1300 에서 아랫줄이
       화면 폭의 59% 를 먹었다. 그래서 **고정이 시작되는 폭을 1280 → 1920 으로 밀고**,
       1024~1920 을 완만한 한 선으로 이었다: 세 번째 항 `2.79vw + 51.4px`
       (1024 에서 80px · 1920 에서 105px — 양 끝이 옛 값과 정확히 만나 경계가 안 튄다).
       ⚠ **배수(0.92)는 안 건드렸다** — 768 50.6 · 1024 73.6 · 1920 96.6px 은 채린이
         세 번 줄여 정착시킨 값이라 그대로 둔다. 바뀌는 건 그 사이 구간뿐이다:
         **1300 96.6 → 80.7px**(글줄 59% → 49%) · 1440 96.6 → 84.2px.
       ⚠ 세 항 중 **가장 작은 것**이 이긴다. 항을 더할 때는 768·1024·1920 세 지점을
         다시 재 볼 것(위 내력의 값과 같아야 한다). */
    --text-hero-title: calc(max(min(6vw, 5.5rem), min(105px, 9.766vw - 20px, 2.79vw + 51.4px)) * 0.92);
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 — 한 화면짜리 높이를 **얼어붙은 px** 로 (2026-08-30)
   ══════════════════════════════════════════════════════════════════════════
   카카오 인앱 브라우저는 툴바가 접힐 때 vh·svh·lvh 를 **전부** 지금 보이는 높이로 바꾼다.
   그러면 한 화면짜리 지면들이 숨쉬며 문서 높이가 654px 씩 오르내리고, 그 아래 내용이
   통째로 밀린다 — 스크롤이 "턱" 하고 걸리는 원인이다(실측 로그 HEIGHT ±654).
   --vh100 은 js/boot.js 가 처음 뜰 때의 높이로 굳혀 넣는다(폭이 바뀔 때만 다시 잰다).
   ⚠ 모바일에서 새로 한 화면짜리 높이를 쓸 일이 생기면 **여기에 같이 적을 것.** */
@media (max-width: 767px) {
  :root {
    --footer-height: var(--vh100, 100lvh);
    /* 히어로 타이틀 줄 간격 — 모바일만 넓혔다 (2026-08-30 채린 요청 1.1 → 1.25).
       ⚠ 위쪽 --hero-title-leading 은 **데스크톱도 같이 보는 값**이라 거기서 고치면 안 된다.
         그래서 모바일 범위에서만 덮어쓴다. */
    --hero-title-leading: 1.25;

    /* ★ 영상 위 검은 막 — 모바일만 옅게 ★ (2026-08-30 채린 "영상 좀만 더 밝게". 0.6 → 0.5)
       ⚠ **두 값을 반드시 같이 바꾼다.** 첫 화면과 스크롤 뒤 히어로는 각각 다른 <video> 라
         막도 두 벌이다(--boot-video-scrim / --hero-video-scrim). 한쪽만 고치면
         넘어가는 순간 밝기가 툭 바뀐다.
       ⚠ 데스크톱은 0.6 그대로다 — 채린이 그 화면에서 맞춰 둔 값이다. */
    /* 2026-08-31 채린 시안(포털 구성)에 맞춰 0.5 → 0.22.
       ⚠ 짝: css/boot.css 모바일 블록의 --boot-video-scrim. 반드시 같은 값. */
    /* ★ 폰 히어로 영상 검은 막 ★ 한글 두 줄이 얹히는 화면이다.
       2026-08-31 채린 지정: 0.22 → 0.5 → **0.6** (PC 와 같은 값이 됐다).
       ⚠ 프리로더(css/boot.css 의 --boot-video-scrim)는 폰에서 **0.22 그대로**다 —
         거기는 DJ Bank 첫 화면이라 밝아야 한다(채린 "처음 시작하는 DJ Bank 영상은 오퍼시티 빼줘").
         그래서 이 지면은 두 값이 일부러 다르다. 한쪽을 고칠 때 다른 쪽을 따라 고치지 말 것. */
    --hero-video-scrim: 0.6;
  }
  /* ⚠ 짝이 되는 --boot-video-scrim 은 **css/boot.css 안**에 있다.
     여기(tokens.css)에 `.boot { … }` 로 적어 봤지만 안 먹었다 —
     우선순위가 같으면 **뒤에 실린 파일이 이기는데**, boot.css 가 tokens.css 보다 뒤다.
     두 값은 반드시 같아야 한다(다르면 넘어가는 순간 밝기가 툭 바뀐다). */
  .chapter {
    --chapter-hold: calc(var(--vh100, 80svh) * 0.8);
    height: calc(var(--vh100, 100svh) * 3 + var(--chapter-hold));
    margin-bottom: calc(var(--vh100, 100svh) * -1);
  }
}