/* ==========================================================================
 * history.css — 연혁(연표) 지면의 v3 전용 손질
 * ==========================================================================
 * 연표 본체의 규격·움직임은 css/layout.css + js/mod-timeline.js 가 갖고 있다(8990 복제본).
 * 그 두 파일은 8990 과 **같은 내용으로 두고**, 여기서만 이 프로젝트 사정에 맞춰 덮는다 —
 * 그래야 나중에 8990 쪽을 다시 가져와도 이 파일만 챙기면 된다.
 *
 * 지금 담긴 것: 항목 글(제목·설명)의 **스크롤 등장** (2026-08-29 채린 요청)
 *   사진은 원래도 스크롤에 맞춰 열렸는데(clip-path scrub), 글은 처음부터 떠 있었다.
 *   그래서 섹션에 들어서는 순간 첫 항목이 "이미 나와 있는" 것처럼 보였다.
 * ========================================================================== */

/* ==========================================================================
 * ★★ 검사창에서 조절하는 값은 **전부 여기** ★★  (2026-08-29)
 * ==========================================================================
 * 쓰는 법 — 크롬에서 우클릭 → 검사 → **Elements** 탭 → 왼쪽 트리에서 맨 위 `<html>` 을
 * 클릭 → 오른쪽 **Styles** 패널을 아래로 내리면 `:root` 규칙(출처: history.css)이 보인다.
 * 거기 값들을 클릭해서 고치면 화면에 바로 반영된다(숫자는 ↑↓ 키로도 오르내린다).
 * ⚠ 새로고침하면 사라진다 — 마음에 드는 숫자를 알려주면 파일에 박아 둔다.
 *
 * ⚠ 아래 값들은 원래 쓰던 토큰과 **같은 값을 그대로 적어 둔 것**이다(검사창에 숫자로
 *   보여야 고치기 쉬워서 var() 대신 실제 값으로 적었다). 토큰 쪽을 바꾸면 여기도 볼 것.
 * ========================================================================== */
:root {
  /* ── 사진 ── */
  --tl-media-w: 75%;            /* 사진 폭 (셀 폭 기준. 100% = 셀을 꽉 채움) */

  /* ── 글 칸 폭 ── (2026-08-29 채린 요청: 사진과 글의 바깥 여백을 같게)
     1번 항목 사진의 바깥 여백(1440에서 215px)에 글의 바깥 끝을 맞춘 값이다.
     세 항목이 **같은 값**을 써서 글 오른쪽 끝(1·3번)과 왼쪽 끝(2번)이 한 줄로 선다.
     ⚠ 원래는 셀마다 인라인으로 22rem·20rem·24rem 을 따로 줬다(index.html) — 그래서
       항목마다 바깥 여백이 211·843·188px 로 들쭉날쭉했다. 이 값이 그걸 덮는다. */
  --tl-text-w: 21.76rem;        /* = 382px @1440 → 바깥 여백 215px */
  /* --tl-media-w-stack:        좁은 화면(~1279px) 사진 폭. 비워 두면 항목별 기본값 */

  /* ── 항목 제목 ── (2026-08-29 채린 지정: 1440에서 24px · 행간 30px)
     ⚠ 단위가 rem 이라 **화면 폭을 따라 자란다**(이 프로젝트의 1rem 은 1440에서 17.554px,
       1920에서 19.085px, 2560에서 21.126px, 390에서 15px). 기준 화면은 1440 이다:
         1.3672rem × 17.554px = 24.0px @1440  (1920에선 26.1px, 2560에선 28.9px)
     ⚠ 행간은 **배수**다 — 30px 을 그대로 박으면 글자만 자라고 줄 간격은 안 따라온다.
       1.25 = 30px ÷ 24px 이라 어느 화면에서든 같은 비율을 지킨다. */
  --tl-title-size: 1.3672rem;   /* = 24px @1440 */
  --tl-title-weight: 500;
  --tl-title-lh: 1.4;           /* = 31.2px @24px (2026-08-29 채린 지정. 전 1.25) */
  --tl-title-ls: -0.04em;

  /* ── 항목 설명 문단 ── (2026-08-29 채린 지정: 16px)
     흰 지면 본문(.article__body)은 18px·행간 30px 인데, 여기는 글 칸이 좁아 한 단계 작다.
     행간은 그 비율(1.667)을 그대로 써서 16px 에서 26.7px 가 된다 —
     흰 지면과 같은 '헐렁함'을 유지하려고 배수로 두었다(px 로 못 박지 않았다).
     ⚠ 크기는 rem 이라 화면 폭을 따라 자란다(1440 기준 16px). */
  /* ★ 흰 지면 본문과 **똑같은 값** ★ (2026-08-29 채린 요청)
     그쪽은 18px 로 못 박혀 있어서(화면이 바뀌어도 18px) 여기도 px 로 둔다 —
     rem 으로 두면 화면마다 크기가 갈려 '같은 본문'으로 안 읽힌다. */
  --tl-desc-size: 18px;
  --tl-desc-weight: 400;
  --tl-desc-lh: 1.6667;         /* 16px × 1.667 = 26.7px */
  --tl-desc-ls: -0.01em;
}

/* ⚠ 데스크톱에서만 건다. 모바일은 js/mod-timeline.js 가 항목이 화면 가운데 올 때
   h3 의 opacity 를 직접 0↔1 로 토글한다 — 거기에 이 규칙을 겹치면 글이 안 뜬다. */
@media (min-width: 768px) {
  /* ⚠ **transform 을 쓰면 안 된다.** 이 글 칸의 세로 위치는 css/layout.css 가
     `transform: translateY(...)`(첫 항목 기준 −253.7px)로 잡는다 — 여기서 transform 을
     주면 그걸 덮어써서 **글이 사진 아래로 뚝 떨어진다**(2026-08-29에 실제로 그랬다).
     그래서 transform 과 따로 합성되는 **translate 속성**으로 움직인다. */
  .timeline [data-timeline-title],
  .timeline [data-timeline-item-year-mobile] {
    opacity: 0;
    translate: 0 28px;
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* .is-cued 는 js/mod-timeline-cue.js 가 붙인다 —
     **진행선 끝(마름모)이 그 항목의 연도 줄을 지날 때**다(2026-08-29 채린 요청).
     화면 진입 기준(mod-reveal 의 data-scroll)이었을 때는 선이 아직 위에 있는데
     글만 먼저 떠서 둘이 따로 놀았다. */
  .timeline [data-timeline-title].is-cued,
  .timeline [data-timeline-item-year-mobile].is-cued {
    opacity: 1;
    translate: none;
  }

  /* 사진이 열리는 중에 글이 먼저 뜨면 순서가 뒤집힌다 — 살짝 늦춘다. */
  .timeline [data-timeline-title].is-cued,
  .timeline [data-timeline-item-year-mobile].is-cued { transition-delay: 0.12s; }
}

/* 움직임을 줄이는 설정이면 그냥 놓인 글로 둔다. */
@media (prefers-reduced-motion: reduce) {
  .timeline [data-timeline-title] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ── 검은 지면 ──────────────────────────────────────────────────────────
 * 한때 **흰색으로 시작해 검정으로 물들게** 했다(채린 요청). 그런데 지면에 들어서는 순간
 * 흰 바탕이 한 번 스쳤다가 검게 덮이는 게 **깜빡임**으로 보였다(2026-08-30 채린 지적).
 * 그래서 처음부터 검정이다 — 물드는 장치를 없앴다.
 * (다시 하려면 배경을 #fff 로 두고, 검은 판을 opacity 0 → 1 로 전환시키면 된다.) */
#history {
  background-color: var(--color-bg, #0b0b0b);
  isolation: isolate;
}


/* ==========================================================================
 * 본문 글의 스크롤 등장 (js/mod-textreveal.js)
 * ==========================================================================
 * 원본: brand.rememberapp.co.kr/connect/ads/ 의 .reveal — 값 그대로 옮겼다.
 *   .reveal    { opacity:0; transform: translateY(34px);
 *                transition: opacity .7s ease, transform .85s cubic-bezier(.22,.61,.36,1) }
 *   .reveal.in { opacity:1; transform:none }
 *
 * ⚠ `.tr-ready` 는 **모듈이 붙인다.** 그래서 JS 가 안 돌면 이 규칙이 아무 데도 안 걸리고
 *   글은 처음부터 보인다(가려진 채 남는 사고를 막는 장치).
 * ========================================================================== */
.tr-ready > * {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tr-ready > .tr-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tr-ready > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
 * ★ 검사창에서 바로 조절하는 값 ★ 연혁 사진 크기
 * ==========================================================================
 * 크롬 검사 → Elements 에서 <html> 을 고르고 Styles 패널의 `:root` 규칙에서 고치면
 * 즉시 반영된다. ⚠ 새로고침하면 사라진다 — 마음에 드는 숫자를 알려주면 파일에 박아 둔다.
 *
 *   --tl-media-w        사진 폭. **셀 폭 기준 %** 다(기본 100% = 셀을 꽉 채움).
 *                       셀이 몇 칸을 쓰는지는 항목마다 다르므로(9칸·8칸·7칸),
 *                       이 값은 세 항목을 **한꺼번에** 줄이거나 키운다.
 *                       예: 80% 로 두면 세 사진이 각자 원래 크기의 80% 가 된다.
 *   --tl-media-w-stack  글이 사진 아래로 내려가는 좁은 화면(~1279px)에서의 사진 폭.
 *                       기본은 항목마다 다른 인라인 값(72% · 56% · 88%)을 쓴다 —
 *                       여기에 값을 넣으면 그 셋을 한 값으로 덮는다.
 *
 * ⚠ 사진을 줄여도 **글 칸은 제자리다.** 글은 셀(그리드 칸) 기준으로 놓이기 때문이다.
 *   많이 줄이면 사진과 글 사이가 벌어져 보이므로, 그때는 셀의 인라인
 *   --timeline-anno-text-w / grid-column 도 함께 봐야 한다(index.html 의 각 셀).
 * ========================================================================== */
/* ⚠ 셀을 꽉 채우는 값이 100% 다(layout.css 1836줄). 지금 기본은 **75%** —
   2026-08-29 채린 지정. 100% 로 되돌리려면 아래 한 값만 바꾸면 된다. */
#history [data-timeline-item-child] {
  width: var(--tl-media-w);
}


@media (max-width: 1279px) {
  #history [data-timeline-item-child] {
    width: var(--tl-media-w-stack, var(--timeline-anno-media-w-stack, 70%));
  }
}

/* ==========================================================================
 * ★ 검사창에서 바로 조절하는 값 ★ 연혁 항목의 글자
 * ==========================================================================
 * 크롬 검사 → Elements 에서 <html> 을 고르고 Styles 패널의 `:root` 규칙에 아래를 적으면
 * 즉시 반영된다. ⚠ 새로고침하면 사라진다 — 마음에 드는 숫자를 알려주면 파일에 박아 둔다.
 *
 *   ── 항목 제목 ("더존비즈온–신한은행의 …") ──
 *   --tl-title-size     크기   (기본: 데스크톱 1.75rem = 30.7px@1440 / 좁은 화면 --text-lg)
 *   --tl-title-weight   굵기   (기본 500)
 *   --tl-title-lh       행간   (기본 1.05)
 *   --tl-title-ls       자간   (기본 -0.04em)
 *
 *   ── 항목 설명 문단 ──
 *   --tl-desc-size      크기   (기본 1rem = 17.55px@1440)
 *   --tl-desc-weight    굵기   (기본 400)
 *   --tl-desc-lh        행간   (기본 1.5)
 *   --tl-desc-ls        자간   (기본 -0.01em)
 *
 * ⚠ 기본값은 **원래 쓰던 토큰 그대로** 넣어 뒀다. 그래서 아무것도 안 적으면 지금과 똑같다.
 * ⚠ 크기 기본값이 rem 인 이유 — 이 프로젝트의 1rem 은 화면 폭을 따라 자란다(tokens.css).
 *   px 로 적으면 그 반응이 사라지니, 화면마다 다른 크기를 원하면 rem 으로 적을 것.
 * ========================================================================== */
#history [data-timeline-title] h3 {
  font-size: var(--tl-title-size);
  font-weight: var(--tl-title-weight);
  line-height: var(--tl-title-lh);
  letter-spacing: var(--tl-title-ls);
}

#history [data-timeline-desc] {
  font-size: var(--tl-desc-size);
  font-weight: var(--tl-desc-weight);
  line-height: var(--tl-desc-lh);
  letter-spacing: var(--tl-desc-ls);
}


/* ── 글 아래끝을 사진 아래끝에 맞춘다 ── (2026-08-29 채린 요청)
 * 원래는 글 덩어리의 **세로 가운데**를 사진 가운데에 맞췄다(top:50% + translateY(-50%)).
 * 글이 사진보다 길면 위아래로 삐져나와, 위로는 앞 지면까지 올라가고 아래로는 사진보다 내려간다.
 * 그래서 기준을 아래끝으로 바꾼다 — 글이 길어지면 **위로만** 자란다.
 *
 * ⚠ 글 상자의 기준 상자는 `.timeline__item` 이고, 그 상자는 **사진과 정확히 같은 크기**다
 *   (실측 확인). 그래서 bottom:0 이면 두 아래끝이 딱 맞는다.
 * ⚠ transform 은 반드시 none 으로 되돌린다 — layout.css 가 translateY(-50%) 를 걸어 둔다.
 * ⚠ 선택자에 `.timeline--annotated` 를 **자손으로 쓰면 안 된다** — 그 클래스는 #history
 *   자신에 붙어 있어서 `#history .timeline--annotated` 는 아무것도 안 고른다
 *   (2026-08-29에 이걸로 규칙이 통째로 안 걸렸다). */

/* ==========================================================================
 * 한 단 배치 (2026-08-29 채린 시안 Frame 632456)
 * ==========================================================================
 * 그전에는 16칸 그리드에 사진과 글이 좌우로 번갈아 앉았다. 사진과 글의 폭이 서로 얽혀
 * 화면 폭이 바뀔 때마다 여백이 어긋났다(채린 지적). 그래서 **한 단**으로 다시 짰다.
 *
 *   · 세로 스트로크가 **본문 단 왼쪽 끝**에 선다 (앞 흰 지면의 글단과 같은 자리)
 *   · 연도는 스트로크 **왼쪽**에 오른쪽 정렬로 붙는다 (마름모가 그 줄에 놓인다)
 *   · 글은 스트로크 **오른쪽**에 한 단으로 붙는다
 *   · 사진은 글 **뒤 배경 층**으로 내려가고, 스크롤에 맞춰 드러난다
 *     (드러나는 연출 자체는 원래 있던 clip-path scrub 그대로다 — js/mod-timeline.js)
 *
 * ★ 검사창에서 조절 ★ 아래 --tl-* 값들 (:root 에 선언돼 있다)
 * ⚠ 좁은 화면(~1279px)은 원본의 쌓임 배치를 그대로 쓴다 — 여기는 손대지 않는다.
 * ========================================================================== */
:root {
  --tl-col-half: 370px;      /* 본문 단 폭의 절반(740 ÷ 2). 스트로크가 이 지점에 선다 */
  --tl-text-gap: 48px;       /* 스트로크 ~ 글 */
  /* 글 폭 — 오른쪽 끝을 **흰 지면 본문의 오른쪽 끝**과 같은 줄에 세운다 (2026-08-29 채린 요청).
     단(=본문 단 폭) 전체에서 스트로크~글 사이 틈만 뺀 값이라, 단 폭을 바꿔도 따라온다. */
  --tl-text-w2: calc(var(--tl-col-half) * 2 - var(--tl-text-gap));
  --tl-year-gap: 28px;       /* 연도 ~ 스트로크 */
  --tl-year-size: 1.3rem;    /* 연도 글자 크기 (2026-08-29 채린 지정) */
  /* 연도 세로 미세 조정. 상자를 그냥 맞추면(0) **글자 윗머리는 4.4px 어긋난다** —
     연도(22.8px·행간 1.5)와 제목(24px·행간 1.25)의 줄 여백이 달라서다. 그만큼 올려 잡았다. */
  --tl-year-drop: -4px;
  /* ★ 배경 사진 ★ 셋 다 2026-08-29 채린이 검사창에서 잡은 값이다.
     ⚠ :root 값이라 **세 항목이 함께** 움직인다. 항목마다 다르게 하려면 셀에 인라인으로 준다. */
  --tl-media-w2: 450px;      /* 사진 폭 (전 380px) */
  --tl-media-top: 327px;     /* 항목 위쪽에서 사진까지 */
  --tl-media-overlap: 100px; /* 사진이 스트로크를 넘어 오른쪽으로 물리는 양 (전 73px) */
}

@media (min-width: 1280px) {
  /* 선 — 화면 가운데(50%)에서 본문 단 왼쪽 끝으로 옮긴다.
     ⚠ 마름모(tip)는 진행선의 자식이라 따라온다. 건드리지 않는다. */
  #history [data-timeline-track],
  #history [data-timeline-progress] {
    left: calc(50% - var(--tl-col-half));
  }

  /* 그리드를 풀고 **본문 단 폭의 한 단**으로. 이 단의 왼쪽 끝이 곧 스트로크 자리다. */
  #history .timeline__grid {
    display: block;
    position: relative;
    width: calc(var(--tl-col-half) * 2);
    margin: 0 auto;
  }
  #history [data-timeline-cell] {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto;
    position: relative;
    /* ★ 항목마다 위를 더 벌리는 값 ★ --tl-cell-top-extra (셀에 인라인으로 준다)
       앞 항목의 사진이 아래로 길게 내려오는 경우, 다음 항목의 글과 부딪히지 않게 띄운다.
       (사진은 흐름 밖 절대 배치라 스스로 자리를 밀어내지 못한다 — 그래서 손으로 준다) */
    padding-top: calc(var(--timeline-anno-row-pad) + var(--tl-cell-top-extra, 0px));
  }

  /* 가운데 연도 칸은 안 쓴다 — 대신 항목 안의 연도를 스트로크 왼쪽에 세운다. */
  #history [data-timeline-yearcell] { display: none; }
  #history [data-timeline-item] { position: static; }
  #history [data-timeline-item-year-mobile] {
    display: block;
    position: absolute;
    /* ⚠ left 를 auto 로 풀어야 한다 — layout.css 가 모바일용으로 left:0 을 걸어 둬서,
       left 와 right 가 같이 있으면 브라우저가 right 를 **무시한다**(과잉 지정).
       그래서 연도가 스트로크 왼쪽이 아니라 오른쪽에 붙어 있었다. */
    left: auto;
    right: calc(100% + var(--tl-year-gap));
    /* 셀은 위아래 안여백(--timeline-anno-row-pad)을 갖는다. 0 으로 두면 연도가 그 여백 위,
       즉 제목보다 한참 위에 뜬다. 그만큼 내려서 **제목 첫 줄 옆**에 세운다. */
    /* ⚠ --tl-cell-top-extra 를 여기서도 더해야 한다 — 연도는 절대 배치라 셀의 안여백을
       스스로 따라가지 않는다. 빠뜨리면 글만 내려가고 연도는 제자리에 남는다. */
    top: calc(var(--timeline-anno-row-pad) + var(--tl-cell-top-extra, 0px) + var(--tl-year-drop, 5px));
    margin: 0;
    /* ⚠ width 를 안 주면 0 이 된다 — right 만 준 절대 배치는 '남은 자리'로 폭을 잡는데,
       상자를 단 **바깥**(왼쪽)으로 내보내 남은 자리가 음수가 되기 때문이다. */
    width: max-content;
    white-space: nowrap;
    text-align: right;
    font-size: var(--tl-year-size);
    font-weight: 500;
    letter-spacing: -0.025em;
    /* ⚠ opacity 를 여기서 정하면 안 된다 — 이 선택자가 #history 라 등장 연출(.is-inview)의
       opacity 를 이겨서, 연도가 스크롤 전부터 보인다(2026-08-29에 그랬다). */
  }

  /* 사진 — 글 뒤 배경 층. 스트로크 왼쪽에 놓고 조금 물리게 둔다. */
  #history [data-timeline-item-child] {
    position: absolute;
    z-index: 0;
    /* ⚠ 사진 상자의 회색 바탕(--surface-2)을 없앤다. 그게 있으면 **아직 안 열린 아래쪽**이
       회색 판으로 보인다(채린 지적) — 바탕이 없으면 열린 만큼의 사진만 떠오른다. */
    background: none;
    width: var(--tl-media-w2);
    right: calc(100% - var(--tl-media-overlap));
    top: var(--tl-media-top);
    margin: 0;
  }

  /* ★ 사진을 오른쪽(글 아래)에 두는 변형 ★ (2026-08-29 채린 시안, 2번 항목)
     셀에 data-media-side="right" 를 주면 왼쪽 기준으로 바뀐다.
     위치·크기·어둡기는 그 셀의 인라인 --tl-media-* 로 항목마다 따로 준다. */
  #history [data-timeline-cell][data-media-side="right"] [data-timeline-item-child] {
    right: auto;
    left: var(--tl-media-left, 460px);
  }

  /* 검정 덮개 — 사진 위에 얹는다. 글보다는 아래층이라 글을 가리지 않는다.
     ★ 어둡기 ★ --tl-media-dim (0 = 없음, 0.5 = 50%) */
  #history [data-timeline-item-child]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--tl-media-dim, 0));
    pointer-events: none;
  }

  /* 글 — 스트로크 오른쪽에 붙는 한 단. 절대 배치를 흐름으로 되돌린다. */
  #history [data-timeline-title] {
    position: relative;
    inset: auto;
    transform: none;
    margin-left: var(--tl-text-gap);
    width: var(--tl-text-w2);
    max-width: none;
    z-index: 2;
  }
}

/* ── 연혁 항목 안의 인용문 ── (2026-08-29 채린 원고)
   앞 흰 지면(.chapter-read__quotebox)과 **같은 생김새**다 — 왼쪽 세로 막대 #0046FF.
   크기는 이 지면 본문(--tl-desc-*)을 따라가서, 본문을 키우면 인용문도 함께 커진다. */
.tl-quote {
  border-left: 4px solid var(--read-accent, #0046FF);
  padding-left: 24px;
  margin: 34px 0;
}
.tl-quote__text {
  /* ⚠ 색을 맞추는 건 color 가 아니라 **opacity** 다 — 본문([data-timeline-desc])은
     같은 잉크색(rgb 244,241,236)에 opacity 0.8 이 걸려 있다(layout.css).
     그걸 안 맞추면 인용문만 생백색으로 튄다(2026-08-30 채린 지적). */
  opacity: 0.8;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--tl-desc-size);
  font-weight: 400;   /* 2026-08-30 채린 지정 (전 600) — 본문과 같은 굵기 */
  line-height: var(--tl-desc-lh);
  letter-spacing: var(--tl-desc-ls);
  word-break: keep-all;
}
.tl-quote__src {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--tl-desc-size) - 2px);
  font-weight: 400;
  line-height: 1.2;   /* 2026-08-31 채린 지정 (전 1.5) — 출처 줄 다섯 지면 공통 */
  color: var(--article-quiet, #999);
  word-break: keep-all;
}

/* 모바일 출처 줄 — 다른 지면(css/cardbody.css 의 .chapter-read__source / .article__source2)과
   **같은 값**이다 (2026-08-31 채린 지정 15px / 1.3). 데스크톱은 16px / 1.2 그대로.
   ⚠ 한쪽만 고치면 같은 모양의 캡션이 지면마다 달라진다 — 세 부품이 클래스 이름만 다르다. */
@media (max-width: 767px) {
  .tl-quote__src {
    font-size: 15px;
    line-height: 1.3;
  }
}

/* ── 사진도 글과 **같은 신호**로 열린다 ── (2026-08-29 채린 요청)
 * 원래 사진은 js/mod-timeline.js 의 scrub(항목이 화면 아래에 닿으면 시작)으로 열려서,
 * 글·연도(진행선이 닿을 때)보다 **먼저** 나왔다. 여기서 그 타이밍을 하나로 묶는다.
 *
 * ⚠ !important 가 필요하다 — GSAP 이 clip-path 를 **인라인 style 로** 계속 쓰기 때문이다.
 *   CSS 의 !important 는 인라인보다 세서, 이 선언이 그 값을 무시하게 만든다.
 * ⚠ 사진 안쪽 <img> 의 시차 이동(yPercent)도 함께 끈다 — 클립을 우리가 쥐게 되면
 *   그 이동이 어긋나 사진이 위로 밀린 채 열린다. */
@media (min-width: 1280px) {
  #history [data-timeline-item-reveal] {
    clip-path: inset(0% 0% 100% 0%) !important;
    transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  }
  #history [data-timeline-cell].is-cued [data-timeline-item-reveal] {
    clip-path: inset(0% 0% 0% 0%) !important;
  }
  #history [data-timeline-item-reveal] img {
    transform: none !important;
  }
}

/* ── 사진에 마우스를 올리면 **원래 색**으로 ── (2026-08-29 채린 요청)
 * 검정 덮개(--tl-media-dim)를 투명으로 풀어 준다.
 * ⚠ 덮개는 pointer-events:none 이라 마우스를 가로채지 않는다 — 상자 자체가 hover 를 받는다.
 * ⚠ 덮개가 없는 항목(dim 0)은 올려도 그대로다.
 * (hover: hover) — 손가락으로 쓰는 기기에서는 걸지 않는다. 터치하면 눌린 채 남기 때문이다. */
@media (min-width: 1280px) and (hover: hover) {
  #history [data-timeline-item-child]::after {
    transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* ★ 올렸을 때 어둡기 ★ --tl-media-dim-hover — 0 = **원래 색 그대로** (2026-08-30 채린 지정).
     평소 어둡기는 각 셀의 --tl-media-dim 이 정한다(지금 2번 항목 0.5). */
  #history [data-timeline-item-child]:hover::after {
    background: rgba(0, 0, 0, var(--tl-media-dim-hover, 0));
  }
}

/* ── 아래로 갈수록 파랗게 ── (2026-08-30 채린 요청)
 * 검은 판(::before) 위에 파란 판을 한 겹 더 얹고, 그 **투명도**를 스크롤 진행도에 맞춘다.
 * 색 자체를 계산하지 않고 판을 겹치는 이유는 그게 합성기에서 처리돼 매끄럽기 때문이다
 * (넓은 지면의 background-color 를 프레임마다 바꾸면 뚝뚝 끊긴다 — 파트2 간지에서 겪었다).
 *
 * ⚠ --tl-bg-p 는 js/mod-timeline-cue.js 가 넣는다. 없으면 0 — 검정 그대로다(안전한 실패).
 * ★ 조절 ★ --tl-bg-blue 색 · --tl-bg-max 최대 진하기(1 = 끝에서 완전한 파랑) */
/* ★ 지금은 꺼져 있다 ★ --tl-bg-max: 0 (2026-08-30 채린 요청으로 배경을 검정으로 되돌림).
   파랗게 물들이려면 그 값을 0.6~1 로 올리면 된다 — 장치는 그대로 남겨 뒀다. */
:root { --tl-bg-max: 0; }

#history::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                 /* 검은 판과 같은 층 — 글·사진보다 아래 */
  background-color: var(--tl-bg-blue, #0046ff);
  opacity: calc(var(--tl-bg-p, 0) * var(--tl-bg-max, 1));
  pointer-events: none;
}

/* ==========================================================================
 * 테블릿 (768 ~ 1279px) — 2026-08-30 채린 요청
 * ==========================================================================
 * 데스크톱과 **같은 얼개**로 맞춘다: 왼쪽에 세로 스트로크, 그 왼쪽에 연도, 오른쪽에 글.
 * 다른 점은 하나다 — **사진이 글 뒤가 아니라 글 아래**로 내려온다.
 *   폭이 좁아 스트로크 왼쪽에 사진을 둘 자리가 없기 때문이다(두면 화면 밖으로 태반이 잘린다).
 *
 * ⚠ 여기 규칙이 없으면 이 구간은 8990 원본의 쌓임 배치(가운데 선 + 좌우 번갈이)로 돌아간다.
 *   그 배치는 새 디자인과 따로 놀아서, 폭이 바뀔 때마다 화면이 갈아엎히는 것처럼 보인다.
 *
 * ★ 조절 ★ 아래 --tl-*-t 값들 (t = tablet)
 * ========================================================================== */
/* ⚠ **가로로 넘치는 것은 지면 끝에서 자른다** (2026-09-01)
   2020 사진이 `right: -3.7vw` 로 화면 오른쪽을 넘어가는데(채린 지정), 자를 상자가 없으면
   문서 폭이 화면보다 넓어져 **좌우 스크롤이 생긴다**(실측 1279 화면에서 문서 1309px).
   ⚠ `hidden` 이 아니라 **`clip`** 이어야 한다 — hidden 은 스크롤 컨테이너를 만들어
     안쪽 sticky·고정 요소의 기준을 바꾼다. clip 은 자르기만 한다.
   ⚠ 세로는 건드리지 않는다(overflow-y 는 visible 그대로) — 자르면 연출이 잘린다.
   ⚠ 모바일에도 같은 규칙이 따로 있다(아래 max-width:767px 블록). 거기 주석에 사연이 있다. */
#history { overflow-x: clip; }

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --tl-line-x-t: 104px;      /* 왼쪽 끝에서 스트로크까지 (그 왼쪽이 연도 자리) */
    --tl-year-gap-t: 16px;     /* 연도 ~ 스트로크 */
    --tl-year-size-t: 1.3rem;  /* ★ 연도 글자 ★ 2026-08-31 채린 지정 (1.05 → 1.3rem, 데스크톱과 같은 값) */
    --tl-text-gap-t: 28px;     /* 스트로크 ~ 글 */
    --tl-media-max-t: 520px;   /* 글 아래로 내려온 사진의 최대 폭 */
    --tl-media-gap-t: 40px;    /* 글 ~ 사진 */

    /* ★ 항목 사이 세로 여백 ★ (2026-08-31 채린 "이미지랑 타이틀 사이 마진 너무 넓어 좁혀줘")
       이 값은 셀의 **위아래 안여백**이라 두 항목 사이에서 두 번 겹친다 —
       6rem 이면 앞 사진 아래끝부터 다음 제목까지 244px 이 비었다(940 실측).
       3.5rem 으로 줄여 **164px** 로 좁혔다. ★ 조절하는 곳 ★ 아래 숫자 하나.
       ⚠ 데스크톱(≥1280)은 6rem 그대로다 — 거기는 글이 사진 옆에 서서 이 여백이 그대로 리듬이 된다. */
    --timeline-anno-row-pad: 3.5rem;

    /* ★ 연도를 제목 첫 줄에 맞춘다 ★ (2026-08-31 채린 "연도랑 타이틀 어긋나 있어", 940 화면)
       이 구간은 제목이 사진 아래로 내려가는 배치라, 제목 앞에 `margin-top: var(--space-6)`
       (css/layout.css 의 .timeline--annotated 블록)이 붙는다. 그런데 연도는 셀 안여백 바로
       아래에 절대 배치라 **그 여백만큼 위에 남았다**(940 에서 획 기준 29px).
       → 같은 양(--space-6)에 글자 행간 차이(연도 1.05rem/1.5 ↔ 제목 1.3rem/1.4) 보정 5px 를 더한다.
       ⚠ 데스크톱(≥1280)은 -4px 그대로다 — 거기는 제목에 그 margin 이 안 붙어 이미 맞는다. */
    --tl-year-drop: calc(var(--space-6) + 1px);
  }

  /* 선을 가운데(50%)에서 왼쪽 스트로크 자리로 */
  /* ⚠ 선은 절대 배치라 지면의 **패딩 안쪽이 아니라 바깥(테두리)** 부터 잰다.
     그리드는 흐름이라 패딩(--gutter) 다음부터 시작한다. 그래서 선에만 --gutter 를 더해야
     둘이 같은 자리에 선다(안 그러면 딱 --gutter 만큼 어긋난다 — 2026-08-30에 겪었다). */
  #history [data-timeline-track],
  #history [data-timeline-progress] {
    left: calc(var(--gutter) + var(--tl-line-x-t));
  }

  /* 그리드를 풀고, 스트로크 오른쪽에서 시작하는 한 단으로 */
  #history .timeline__grid {
    display: block;
    position: relative;
    width: auto;
    margin: 0 0 0 var(--tl-line-x-t);
  }
  #history [data-timeline-cell] {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto;
    position: relative;
    padding-top: calc(var(--timeline-anno-row-pad) + var(--tl-cell-top-extra, 0px));
  }

  /* 가운데 연도 칸 대신, 항목 안 연도를 스트로크 왼쪽에 세운다(데스크톱과 같은 처리) */
  #history [data-timeline-yearcell] { display: none; }
  #history [data-timeline-item] {
    /* 사진을 글 **아래**로 보내려고 흐름을 세로로 세운다 (마크업 순서는 사진 → 글) */
    display: flex;
    flex-direction: column;
    /* ⚠ align-items 를 반드시 못 박는다 — layout.css 가 center 를 걸어 둬서,
       그대로 두면 사진이 단 가운데로 밀려 글과 왼쪽 끝이 안 맞는다. */
    align-items: flex-start;
    position: static;
  }
  #history [data-timeline-title] { order: 1; }

  /* ★ 오른쪽 끝을 위 카드(연혁 머리글)와 맞춘다 ★ (2026-08-31 채린 "오른쪽 마진은 위 본문
     영역이랑 맞춰야 해"). 카드는 폭이 --article-max + 48px(=788px) 로 **고정**이고 가운데 선다.
     그래서 카드 오른쪽 끝은 늘 `화면 가운데 + 394px` 다 — 그 자리에 글칸 오른쪽을 세운다.
     전에는 글칸이 화면 오른쪽 끝까지 늘어나 카드보다 60px(940) ~ 228px(1279) 더 나갔다.
     ⚠ 좁은 쪽에서 카드가 화면보다 넓어지면(min(100%…)) 이 식이 음수가 되므로 --gutter 로 받친다. */
  #history [data-timeline-title] {
    /* ⚠ **50% 가 아니라 50vw** 다 — 글칸의 부모는 화면 전체가 아니라 왼쪽 스트로크(148px)
       뒤에서 시작하는 좁은 상자라, % 로 잡으면 그 절반이 화면 절반과 달라 44~52px 이 남았다.
       카드는 화면 가운데를 기준으로 서므로 여기도 화면 기준(vw)으로 재야 맞는다. */
    margin-right: max(var(--gutter, 24px), calc(50vw - (var(--article-max) + 48px) / 2));
  }
  #history [data-timeline-item-child] { order: 2; }

  #history [data-timeline-item-year-mobile] {
    display: block;
    position: absolute;
    left: auto;
    right: calc(100% + var(--tl-year-gap-t));
    top: calc(var(--timeline-anno-row-pad) + var(--tl-cell-top-extra, 0px) + var(--tl-year-drop, -4px));
    margin: 0;
    width: max-content;
    white-space: nowrap;
    text-align: right;
    font-size: var(--tl-year-size-t);
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  /* 글 — 스트로크 오른쪽. 오른쪽 여백은 지면 좌우 여백(--gutter)이 잡는다. */
  #history [data-timeline-title] {
    position: relative;
    inset: auto;
    transform: none;
    margin-left: var(--tl-text-gap-t);
    width: auto;
    max-width: none;
    z-index: 2;
  }

  /* 사진 — 흐름 안으로 내려온다. 글과 같은 왼쪽 끝에 선다. */
  #history [data-timeline-item-child] {
    position: relative;
    right: auto;
    top: auto;
    /* ⚠ width:auto 로 두면 **0 이 된다** — 세로 flex 안에서 폭을 스스로 못 정하는데
       aspect-ratio 까지 걸려 있어 높이도 0 이 된다(2026-08-30에 실제로 그랬다). */
    width: 100%;
    max-width: var(--tl-media-max-t);
    margin: var(--tl-media-gap-t) 0 0 var(--tl-text-gap-t);
    /* ⚠ 사진 상자의 회색 바탕(--surface-2 = rgba(255,255,255,0.1))을 없앤다 (2026-09-01 채린).
       그게 있으면 사진이 **아직 안 열린 아래쪽**이 회색 판으로 보인다.
       데스크톱(≥1280)과 모바일(≤767)에는 같은 규칙이 이미 있었는데 **이 구간에만 빠져 있었다.**
       세 구간이 짝이다 — 한 곳을 고치면 나머지도 볼 것. */
    background: none;
  }

  /* ── 사진이 오른쪽 위에 걸치는 항목 ── (2026-08-31 채린 시안, 2020 항목)
     흐름에서 빼내 셀 오른쪽 위에 얹는다. 글(z-index 2)보다 **뒤**라 글자를 가리지 않고,
     반투명이라 사진 위로 글이 그대로 읽힌다.
     ⚠ 기준 상자는 셀이다(태블릿 블록에서 position: relative). 그래서 `top` 은 셀 위끝부터다 —
       제목 위 여백(--tl-cell-top-extra)과 무관하게 항목 맨 위에 붙는다.
     ★ 조절하는 곳 ★ 아래 세 변수 — **2026-09-01 채린이 검사창에서 잡은 값**이다
       (top -12px · right -3.7vw · width 51%). 셀에 인라인으로 주면 항목마다 다르게 할 수 있다.
     ⚠ top·right 가 **음수**다. 사진이 셀 위끝보다 조금 올라가고 오른쪽으로 살짝 넘어간다 —
       화면 밖으로 나가는 만큼은 #history 의 `overflow-x: clip` 이 잘라 준다. */
  #history [data-media-place="over"] [data-timeline-item-child] {
    position: absolute;
    top: var(--tl-over-top, -12px);
    right: var(--tl-over-right, -3.7vw);
    left: auto;
    bottom: auto;
    width: var(--tl-over-w, 51%);
    max-width: none;
    margin: 0;
    z-index: 0;                       /* 글보다 뒤 */
    opacity: var(--tl-media-op, 0.5);
  }

  /* ★ 제목 위 여백 ★ (2026-08-31 채린 지정, 태블릿 기준: 50px)
     전에는 0px 이었다 — "사진이 흐름 안에 있으니 다음 항목을 스스로 밀어낸다"는 이유였는데,
     그러면 제목이 앞 항목 사진에 바로 붙는다. 채린이 50px 를 지정했다.
     ⚠ **!important 가 필요하다.** 이 값은 마크업에 **인라인**으로도 들어 있고(2024 항목의
       --tl-cell-top-extra:140px 등, 데스크톱 배치를 위해 잡아 둔 값), 인라인은 보통 CSS 로는
       못 이긴다. 태블릿에서는 그 값들을 쓰지 않고 전부 50px 로 통일한다.
     ⚠ 이 변수는 연도 위치 식에도 들어간다(위 --tl-year-drop 참고) — 값이 바뀌면 연도도 같이 내려간다.
     ★ 조절하는 곳 ★ 아래 50px 하나. */
  #history [data-timeline-cell] { --tl-cell-top-extra: 50px !important; }
}

/* ── 나란한 사진 두 장 (.tl-pair) ── (시안 Frame 632463)
 * 마지막 항목의 출범 행사 사진. 글 아래에 놓이되 **글 단보다 오른쪽으로 더 넓게** 나간다.
 * ⚠ 폭을 100% 로 두면 글 단(692px) 안에 갇혀 시안보다 훨씬 작아진다. 그래서 화면 기준으로
 *   "글 왼쪽 끝 ~ 화면 오른쪽 여백"까지를 폭으로 잡는다.
 * ★ 두 장의 비율 ★ --tl-pair-a : --tl-pair-b */
.tl-pair {
  /* 두 장의 폭 비율. 내력: 28:72 → 38:62(2026-08-30 채린) → **45:55**(2026-09-01 채린
     "왼쪽 진옥동 회장 사진 좀 더 크게"). 왼쪽을 키운 만큼 오른쪽이 줄어든다 — 합이 100 이다.
     ⚠ 1279 이하는 두 장이 세로로 쌓이므로 이 비율을 안 본다(아래 @media). */
  --tl-pair-a: 45;
  --tl-pair-b: 55;
  --tl-pair-gap: 28px;

  display: flex;
  align-items: flex-start;
  gap: var(--tl-pair-gap);
  margin: 52px 0 0;
}
.tl-pair__item { margin: 0; }
.tl-pair__item--a { flex: var(--tl-pair-a) 1 0; }
.tl-pair__item--b { flex: var(--tl-pair-b) 1 0; }
.tl-pair img {
  display: block;
  width: 100%;
  height: auto;
}
.tl-pair figcaption {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 14px;   /* 2026-08-30 채린 지정 (전 12px) */
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--article-quiet, #999);
  word-break: keep-all;
}

@media (min-width: 1280px) {
  .tl-pair {
    width: calc(50vw + var(--tl-col-half) - var(--tl-text-gap) - var(--gutter));
  }
}

/* 테블릿·모바일 — 글 폭 안에서 위아래로 쌓는다(나란히 두면 둘 다 너무 작아진다). */
@media (max-width: 1279px) {
  .tl-pair {
    flex-direction: column;
    width: 100%;
    max-width: var(--tl-media-max-t, 520px);
    gap: 32px;
  }
}

/* ── 연표가 끝난 뒤 여백을 줄인다 ── (2026-08-30 채린 지적 "너무 많이 남는다")
 * 마지막 사진 아래가 **478px** 비어 있었다. 두 겹이 쌓여서다 —
 *   ① 마지막 셀 자신의 아래 안여백 --timeline-anno-row-pad (6rem ≈ 113px)  ← 연표의 세로 리듬이라 그대로 둔다
 *   ② 섹션 아래 안여백 --section-pad-bottom (18rem ≈ 338px)                ← 이걸 6rem 으로 줄였다
 * 결과 ≈ 253px. 다른 섹션의 --section-pad-bottom 은 안 건드린다(원본 실측값이다).
 * ★ 더 줄이려면 ★ 아래 값을 --space-16(4rem) 으로. 셀 쪽(①)까지 줄이면 항목 사이 간격도 같이 좁아진다. */
#history {
  padding-bottom: var(--space-24);
}


/* ══════════════════════════════════════════════════════════════════════════
   모바일 연표 한 단 배치 — 시안 `Frame 632475.png` (2026-08-31 채린)
   ══════════════════════════════════════════════════════════════════════════
   데스크톱(≥1280)의 한 단 배치와 **같은 골격**이다: 세로선이 글 단 왼쪽에 서고,
   사진은 글 뒤 배경 층으로 내려가며, 글은 한 단으로 흐른다.
   다른 점 하나 — **연도가 선 오른쪽**에 온다(데스크톱은 왼쪽에 오른쪽 정렬).

   ┌ 시안(390) 실측 ─────────────────────────────────────────────────────
   │  세로선 x        26      (굵기 1)
   │  글 단 왼쪽 x    53      → 선에서 27px 오른쪽
   │  글 단 오른쪽     363     → 오른쪽 여백 27
   │  연도 "2020"     표시서체 42px · 획 높이 30.7 · 폭 49.3
   │                  ⚠ **본문 서체가 아니라 큰 활자(--boot-title)다.**
   │                    프리텐다드로 재면 폭이 2.1배라 크기가 20px 로 나온다 —
   │                    획 높이(30.7)와 폭(49.3)이 **동시에** 맞는 건 이 서체뿐이다.
   │  제목            22px · 줄 간격 31 · 700 · 왼쪽 정렬 (두 줄)
   │  본문            15px · 줄 간격 24
   │  세로 리듬        연도 획 아래끝 →(36)→ 제목 획 위끝, 제목 아래끝 →(21)→ 본문
   └──────────────────────────────────────────────────────────────────────
   ★ 검사창에서 조절 ★ 아래 --tl-*-m 값들. 사진 세 값(폭·오른쪽·위)은 시안이 잘려 있어
     **추정값**이다 — 눈으로 보고 맞출 것.
   ⚠ 마름모(tip)는 진행선의 **자식**이라 선을 옮기면 저절로 따라온다. 건드리지 말 것. */
@media (max-width: 767px) {
  /* ⚠⚠ **가로 스크롤을 막는다.** 사진이 `right: 음수` + `scale` 로 화면 밖까지 나가는데,
     그걸 잘라 주는 상자가 없어서 문서 폭이 463px 이 되고 **좌우 스크롤이 생겼다**
     (2026-08-31 채린 지적). 사진이 오른쪽으로 흘러 나가는 모양은 그대로 두고 화면 끝에서만 자른다.
     ⚠ `hidden` 이 아니라 **`clip`** 이어야 한다 — hidden 은 스크롤 컨테이너를 만들어
       안쪽 sticky·고정 요소의 기준을 바꿔 버린다. clip 은 자르기만 한다.
     ⚠ 세로는 건드리지 않는다(overflow-y 는 visible 그대로) — 자르면 연출이 잘린다.
     ⚠ body 에 overflow-x 를 주는 방식은 안 통했다. 프리로더(.boot)가 `position: fixed` 라
       body 의 클립을 벗어나고, 모바일에서는 **fixed 요소가 가장 넓은 콘텐츠 폭을 따라간다** —
       그래서 프리로더가 463px 로 늘어나 있었다(증상이지 원인이 아니다). 원인을 잘라야 한다. */
  #history {
    overflow-x: clip;

    /* ★ 항목 위아래 여백 = 연표의 세로 리듬 ★ (2026-08-31 채린 "2020 top 영역 마진 이정도로")
       7rem = 105px @390. 기본값은 --space-16(4rem = 60px)이다.
       ⚠ **여기서만 바꾼다.** 처음엔 `--space-16` 자체를 7rem 으로 올렸다가 되돌렸다 —
         그 토큰은 푸터·메뉴 gap 과 파트 II 본문 아래 여백까지 함께 움직인다(채린 "원복"). */
    --timeline-anno-row-pad: 7rem;   /* 항목 **위** 여백 (= 2020 위 105px) */
    --tl-row-pad-b: 2rem;            /* 항목 **아래** 여백 (2026-08-31 채린 "갭 줄여줘". 7rem → 2rem) */

    --tl-line-x: 26px;          /* ★ 세로선 x ★ */
    --tl-text-in: 38px;         /* 셀 왼쪽 끝(15) → 글 단 왼쪽(53) */
    --tl-text-out: 12px;        /* 셀 오른쪽 끝(375) → 글 단 오른쪽(363) */
    /* ★ 연도 크기 ★ 42 → 32 → **28px** (2026-09-02 채린 "폰트 크기는 줄여줘" → "좀 더 줄여도 될 것 같아").
       42 는 시안(Arges, 초압축)에서 잰 값이라, 폭이 두 배인 Heros 로 갈면서 너무 커 보였다.
       ⚠ 이 값을 바꿔도 마름모 얼라인은 안 건드려도 된다 — js/mod-timeline-cue.js 가 보는 건
         **상자 높이의 비율**(0.55)이라 크기를 따라 저절로 움직인다. 다시 재야 하는 건 **서체를
         바꿀 때**뿐이다. */
    --tl-year-size-m: 28px;
    --tl-year-gap-b: 10px;      /* 연도 ~ 제목 (2026-08-31 채린 지정. 시안 실측 36 → 10) */
    --tl-title-size-m: 22px;
    --tl-title-lh-m: 31px;
    --tl-title-gap-b: 21px;     /* 제목 ~ 본문 */
    --tl-desc-size-m: 17px;     /* 2026-08-31 채린 지정 (시안 실측 15 → 17) */
    --tl-desc-lh-m: 29px;       /* 2026-08-31 채린 지정 (전 24) */
    /* ★ 배경 사진 ★ (추정 — 시안이 위에서 잘려 있다) */
    /* ⚠ 여기 폭·위치는 **CSS 상자** 값이다. 화면에 보이는 크기는 이보다 1.3배 크다 —
       GSAP 이 등장 연출로 `transform: scale(1.3)` 을 인라인으로 걸어 두기 때문이다.
       (280 을 줬는데 화면에서 364 로 재져서 규칙이 안 먹는 줄 알고 헤맸다.)
       시안 기준 보이는 크기: x 187~화면 밖 · 아래끝은 본문 첫 줄 언저리. */
    --tl-media-w-m: 200px;      /* 2026-08-31 채린 "좀만 더 크게" (175 → 200) */
    --tl-media-right-m: -20px;  /* 음수 = 화면 밖으로 물린다 */
    --tl-media-top-m: -45px;    /* 2026-08-31 채린 지정 (전 -70) */
    --tl-media-dim-m: 0.3;      /* 사진 위 검정 (글이 읽히게) */
  }

  /* ── 세로선 ── */
  #history [data-timeline-track],
  #history [data-timeline-progress] {
    left: var(--tl-line-x);
  }

  /* ── 셀 = 글 단 ── 좌우 안여백으로 단을 만든다.
     ⚠ padding-top 은 위쪽 블록이 세로 리듬으로 쓰고 있다(--timeline-anno-row-pad, 지금 7rem)
       — 덮어쓰지 말 것. **2020 위 여백**이 그 값이다(채린이 시안에서 정했다).
     ★ 항목 사이 간격 ★ --tl-row-pad-b (아래 여백)
       ⚠ 항목 사이 틈은 **위 여백 + 아래 여백**이라, 하나만 보고 잡으면 두 배로 벌어진다.
         위아래를 같은 값(7rem)으로 뒀더니 앞 글 끝 ~ 다음 연도가 225px 이었다
         (2026-08-31 채린 "20년과 21.06년 사이 갭 줄여줘"). 아래만 2rem 으로 낮춰 150px 로.
       계산: 위 105 + 아래 30 + 셀 사이 15 = 150. */
  #history [data-timeline-cell] {
    padding-left: var(--tl-text-in);
    padding-right: var(--tl-text-out);
    padding-bottom: var(--tl-row-pad-b);
  }

  /* 사진이 화면 밖으로 물려 나가려면 셀이 넘치는 것을 안 잘라야 한다 */
  #history [data-timeline-item] {
    display: block;
    position: relative;
  }

  /* ── 연도 ── 흐름 안으로 되돌린다(단 왼쪽 끝에 저절로 선다).
     ⚠ 위 블록들이 `position:absolute` + `right: calc(100% + …)`(선 왼쪽 배치)를 걸어 뒀다.
       셋을 다 풀어야 한다 — 하나라도 남으면 자리가 어긋난다. */
  #history [data-timeline-item-year-mobile] {
    display: block;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    margin: 0 0 var(--tl-year-gap-b);
    /* ★ 2026-09-02 채린 — **캡션에 쓰는 영문 서체로** 바꿨다 ★
       `--boot-title`(Arges, 초압축 Black) → **`--boot-body`**(TeX Gyre Heros).
       프리로더 캡션(.boot__line)·간지 머리글·푸터가 전부 이 값을 본다 — 영문은 여기 한 곳으로 모여 있다.
       ⚠ **굵기가 400 인 이유가 달라졌다.** 전에는 'Arges 파일이 Black 이라' 400 이었는데,
         지금은 캡션과 같은 **보통 굵기**라서 400 이다(Heros 는 400·700 두 벌뿐).
       ⚠ 시안(Frame 632475)은 Arges 로 그려져 있었다 — 획 높이(42px에서 30.7)는 두 서체가
         거의 같아 세로 자리는 안 흔들리지만, **폭은 Heros 가 훨씬 넓다**. 글 단(310px)을
         넘지 않는지 확인했다.
       ⚠ 데스크톱 연도(.timeline__year)는 `--font-numeric` 그대로다 — 여기는 모바일 블록이다. */
    font-family: var(--boot-body);
    font-size: var(--tl-year-size-m);
    /* ★ 700 ★ (2026-09-02 채린 "볼드로 변경"). Heros 는 **400·700 두 벌뿐**이라 중간값은 없다
       (500·600 을 주면 합성 없이 각각 400·700 으로 맞춰진다). */
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.005em;
    text-align: left;
    position: relative;        /* 사진 위로 */
    z-index: 2;
  }

  /* ── 사진 ── 글 뒤 배경 층. 오른쪽 위에서 화면 밖으로 물린다. */
  #history [data-timeline-item-child] {
    position: absolute;
    z-index: 0;
    background: none;          /* 회색 바탕을 없앤다 — 안 열린 아래쪽이 회색 판으로 보인다 */
    width: var(--tl-media-w-m);
    right: var(--tl-media-right-m);
    left: auto;
    top: var(--tl-media-top-m);
    margin: 0;
  }
  #history [data-timeline-item-child]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--tl-media-dim-m, 0));
    pointer-events: none;
  }

  /* ══════════════════════════════════════════════════════════════════════
     나타나는 시점 = **마름모(진행선 끝)가 연도에 닿을 때** (2026-08-31 채린 요청)
     ══════════════════════════════════════════════════════════════════════
     그전에는 GSAP(js/mod-timeline.js)이 **항목이 화면 중앙에 올 때**를 기준으로 켰다.
     그건 마름모와 무관한 시점이라 "마름모는 벌써 지났는데 글은 아직" 같은 어긋남이 생겼다.
     지금은 js/mod-timeline-cue.js 가 진행선 끝의 실제 y 를 읽어 `.is-cued` 를 붙인다.
     ⚠ 그래서 **mod-timeline.js 의 모바일 분기에서 opacity 를 전부 걷어냈다** —
       인라인 style 은 CSS 를 이기므로 하나라도 남으면 이 규칙이 통째로 죽는다.
     ⚠ 사진은 클래스가 아니라 **값**(--tl-media-op)으로 받는다 — 스크롤을 따라 진해져야 해서다. */
  /* ★★ 2026-09-02 — 클래스 전환에서 **스크롤 진행도**로 바꿨다 ★★
     (채린 "덩어리로 나오니 어색하다. 위에서 스크롤하는 속도에 맞춰서 스르륵 나오게")
     옛 방식은 마름모가 연도를 지나는 **순간** `.is-cued` 가 붙고 0.7초짜리 전환이 돌았다 —
     연도·제목·본문 네 문단이 한꺼번에 떠서 한 덩어리였고, 뜨는 속도가 스크롤과 무관했다.
     지금은 js/mod-timeline-cue.js 가 조각마다 `--tl-in`(0~1)을 넣는다. **시간이 아니라 스크롤이
     속도**라서 손을 멈추면 글도 멈춘다.
     ⚠ **transition 을 주면 안 된다** — 매 프레임 값이 바뀌는데 전환까지 걸면 늘 뒤처져 늘어진다.
     ⚠ 옛 규칙이 `[data-timeline-title]`(글 칸 통째)에 걸려 있었다. 그 층은 이제 손대지 않는다 —
       안쪽 h3·문단이 각자 뜨는데 겉층까지 흐리면 두 번 곱해진다.
     ⚠ 숨기는 일이니 `html.is-mobile-static` 안에 둔다 — JS 가 죽으면 아무것도 안 숨는다.
     ★ 올라오는 거리 ★ --tl-in-rise (연도·제목 14px · 본문 8px) */
  /* ⚠ **글 칸의 자식 전부**를 잡는다 — h3·문단 말고도 인용문(.tl-quote)·사진 짝(.tl-pair)이
     섞여 있어서, 골라 잡으면 그것들만 연출 없이 툭 남는다(js 의 collect 주석과 짝). */
  html.is-mobile-static #history [data-timeline-item-year-mobile],
  html.is-mobile-static #history [data-timeline-title] > * {
    --tl-in-rise: 8px;
    opacity: var(--tl-in, 0);
    translate: 0 calc((1 - var(--tl-in, 0)) * var(--tl-in-rise, 8px));
    transition: none;
  }
  /* 연도·제목은 조금 더 올라온다 */
  html.is-mobile-static #history [data-timeline-item-year-mobile],
  html.is-mobile-static #history [data-timeline-title] > h3 {
    --tl-in-rise: 14px;
  }
  /* ⚠ 본문 문단은 **원래 opacity 가 1 이 아니다** — css/layout.css 가 `--opacity-quiet`(0.8)를
     준다(같은 잉크색을 살짝 죽인 톤. .tl-quote__text 도 같은 값으로 맞춰 놨다).
     그냥 `opacity: var(--tl-in)` 을 주면 다 뜬 뒤 **본문만 밝아진다** → 곱해서 쓴다. */
  html.is-mobile-static #history [data-timeline-desc] {
    opacity: calc(var(--tl-in, 0) * var(--opacity-quiet, 0.8));
  }
  /* 흐름 안에 놓인 사진(2024 테크핀레이팅스)은 **자기 차례에** 뜬다 — 글 칸의 자식이라
     이미 계단에 들어 있다. 다만 **올라오지는 않는다**(사진이 들썩이면 글보다 눈에 띈다).
     ⚠ 밝기는 손대지 않는다 — 이 항목은 채린이 "오퍼시티 뺀 버전"으로 정한 또렷한 한 장이라,
       옅어지는 연출(--tl-media-op)도 검은 막도 안 걸린다(아래 data-media-place 블록). */
  html.is-mobile-static #history [data-timeline-title] > [data-timeline-item-child] {
    translate: none;
  }
  /* 글 칸 겉층은 그냥 놓여 있다(옛 규칙이 여기에 opacity 0 을 주고 있었다) */
  html.is-mobile-static #history [data-timeline-title] {
    opacity: 1;
    translate: none;
  }

  /* 움직임을 줄이는 설정이면 계단 없이 그냥 놓인 글로 둔다.
     ⚠ 본문만 `--opacity-quiet` 로 되돌린다 — 연도·제목의 제 값은 1 이다(위 주석 참고). */
  @media (prefers-reduced-motion: reduce) {
    html.is-mobile-static #history [data-timeline-item-year-mobile],
    html.is-mobile-static #history [data-timeline-title] > * {
      opacity: 1;
      translate: none;
    }
    html.is-mobile-static #history [data-timeline-desc] {
      opacity: var(--opacity-quiet, 0.8);
      translate: none;
    }
  }

  /* ★ 사진 — **글과 같은 순간에** 뜬다 ★ (2026-09-02 채린 "이미지랑 글이 같이 나오게")
     값이 **둘**이다. 헷갈리지 말 것:
       --tl-media-in  등장(0~1) — 글 첫 조각(연도)과 **같은 진행도**. js/mod-timeline-cue.js
       --tl-media-op  밝기(0.7 → 0.5) — 셀이 화면을 지나가는 동안 옅어지는 옛 연출. 그대로 둔다.
     ⚠ 옛 규칙은 밝기 하나만 썼다. 그건 **셀 윗변이 화면 아래끝에 닿는 순간 이미 0.7** 이라
       마름모가 연도에 닿기 한참 전이었다 — 그래서 사진만 먼저 대뜸 떠 있었다.
     ⚠ **transition 을 주면 안 된다**(옛 0.25s linear 를 걷어냈다) — 글은 전환이 없는데 사진만
       걸려 있으면 딱 그만큼 늦게 따라와 "같이" 가 깨진다. 값이 2% 단위라 없어도 매끄럽다. */
  #history [data-timeline-cell] [data-timeline-item-child] {
    opacity: calc(var(--tl-media-in, 0) * var(--tl-media-op, 0));
    transition: none;
  }

  /* ── 글 ── 한 단, 왼쪽 정렬, 사진 위층 */
  #history [data-timeline-title] {
    position: relative;
    inset: auto;
    transform: none;
    margin: 0;
    width: auto;
    max-width: none;
    text-align: left;
    z-index: 2;
  }
  #history [data-timeline-title] h3 {
    margin: 0 0 var(--tl-title-gap-b);
    font-size: var(--tl-title-size-m);
    font-weight: 700;
    line-height: var(--tl-title-lh-m);
    letter-spacing: -0.02em;
    text-align: left;
  }
  #history [data-timeline-desc] {
    font-size: var(--tl-desc-size-m);
    line-height: var(--tl-desc-lh-m);
    letter-spacing: -0.01em;
    text-align: left;
  }
}

/* ── 사진을 **지정한 문단 바로 뒤**에 놓는 항목 ── (2026-08-31 채린, 2024 테크핀레이팅스)
 * 셀에 `data-media-place="below"`, 기준 문단에 `data-media-after` 를 붙인다.
 * 옮기는 일은 js/mod-timeline.js 가 **모바일에서만** 한다(데스크톱은 DOM 그대로 — 위 주석 참고).
 * 여기서는 옮겨진 사진을 **흐름 안의 그림**으로 되돌려 놓기만 한다.
 * ⚠ 확대 배율은 셀의 `--tl-media-scale:1` 로 함께 꺼야 한다(기본 1.3이면 단 밖으로 나간다).
 * ★ 오퍼시티 연출 없음 ★ (채린 "오퍼시티 뺀 버전으로") — 다른 항목처럼 스크롤 따라 옅어지지 않고,
 *   위에 덮는 검은 막(--tl-media-dim-m)도 없다. 그냥 또렷한 그림 한 장이다. */
@media (max-width: 767px) {
  html.is-mobile-static #history [data-media-place="below"] [data-timeline-item-child] {
    position: static;   /* 배경 층에서 흐름으로 되돌린다 */
    inset: auto;
    width: 100%;
    height: auto;
    margin: var(--tl-media-below-gap, 28px) 0;
    /* ★ --tl-media-op(옅어지는 연출)를 안 쓴다 ★ — 또렷한 한 장이다.
       ⚠ 대신 **등장은 한다**(2026-09-02) — 계단 안 자기 차례에 글과 같이 뜬다(--tl-in). */
    opacity: var(--tl-in, 1);
  }
  html.is-mobile-static #history [data-media-place="below"] [data-timeline-item-child]::after {
    background: none;   /* 검은 막도 없앤다 */
  }
}

/* ── 사진을 **오퍼시티 없이** 쓰는 항목 ── (2026-08-31 채린, 21.06 신한금융그룹)
 * 셀에 `data-media-opaque` 만 붙이면 된다. 스크롤 따라 옅어지는 연출(--tl-media-op)도,
 * 위에 덮는 검은 막(--tl-media-dim-m)도 걸리지 않는다. 자리는 그대로 배경 층이다.
 * ⚠ 사진이 또렷해지는 만큼 그 위 글이 묻힐 수 있다 — 겹치는 항목에서는 확인할 것. */
@media (max-width: 767px) {
  html.is-mobile-static #history [data-media-opaque] [data-timeline-item-child] {
    /* 밝기는 1 고정(옅어지지 않는다). ⚠ **등장은 글과 함께** 한다(2026-09-02) — 이 항목만
       빼 두면 다른 사진은 글과 같이 뜨는데 여기만 혼자 먼저 떠 있다. */
    opacity: var(--tl-media-in, 0);
  }
  html.is-mobile-static #history [data-media-opaque] [data-timeline-item-child]::after {
    background: none;
  }
}

/* ── 연혁 인용문을 본문과 **같은 크기·행간**으로 ── (2026-08-31 채린 지적)
 * 모바일 본문은 17px/29px 인데 인용문만 18px/30px 이었다 — 같은 글인데 크기가 갈렸다.
 * ⚠ `.tl-quote__text` 는 `--tl-desc-size`(데스크톱 토큰)를 보고 있어서, 모바일 값을 준
 *   `[data-timeline-desc]` 와 갈라졌다. 여기서 같은 값으로 묶는다.
 * ⚠ 출처 줄(.tl-quote__src)은 15px/1.3 그대로다 — 다섯 지면 공통 규격이다. */
@media (max-width: 767px) {
  #history .tl-quote__text {
    font-size: var(--tl-desc-size-m, 17px);
    line-height: var(--tl-desc-lh-m, 29px);
  }
}

/* ── 항목 **사이** 여백을 좁힌다 ── (2026-08-31 채린 "마진이 너무 큼")
 * 항목 사이 틈 = 앞 항목의 아래 여백 + 뒤 항목의 위 여백 + 그리드 간격(15px).
 * 전부 105 + 30 + 15 = 150px 이었다.
 * ⚠ **첫 항목(2020)의 위 여백은 건드리면 안 된다** — 채린이 따로 정한 값이다(7rem = 105px).
 *   그래서 `~` 로 **두 번째 이후 항목에만** 작은 위 여백을 준다.
 * ★ 조절 ★ --tl-row-pad-t2 (기본 3.5rem = 52.5px) → 항목 사이 52.5 + 30 + 15 = 97.5px */
@media (max-width: 767px) {
  html.is-mobile-static #history [data-timeline-cell] ~ [data-timeline-cell] {
    --tl-row-pad-t2: 3.5rem;
    /* ⚠ `--tl-cell-top-extra` 를 **더하면 안 된다.** 그건 데스크톱에서 앞 항목 사진이 길게
       내려올 때 쓰는 값인데(2024 셀에 140px), 모바일은 사진이 배경 층이라 필요 없다.
       한 번 더해 봤더니 2024 만 위 여백이 238px 로 튀었다(채린이 지적한 바로 그 자리다). */
    padding-top: var(--tl-row-pad-t2);
  }
}

/* ── 연혁 사진 캡션 ── (2026-08-31 채린 지정, 모바일)
 * ★ 크기 ★ 12px (전 14px)
 * ⚠ `/DJ Bank` 가 줄 끝에서 갈라지지 않게 마크업에서 **&nbsp;** 로 묶었다
 *   (`<br>` 로 줄을 강제하던 것을 뺐다 — 좁은 화면에서 어색하게 한 줄만 남았다).
 *   표기도 `DJ BANK` → **`DJ Bank`** 로 통일했다(다른 지면과 같은 표기). */
@media (max-width: 767px) {
  .tl-pair figcaption { font-size: 12px; }
}

/* ── 연혁 본문을 다른 지면과 **같은 조판**으로 ── (2026-08-31 채린 지적)
 * 본문 지면 네 곳(인트로·파트 I·파트 II·파트 III)은 모바일에서 조판을 명시적으로 통일해 뒀는데
 * (css/cardbody.css 의 `html.is-mobile-static #intro-body p, .article--card .article__body`)
 * **연혁만 그 처리에서 빠져** 있었다. 실측 차이:
 *     본문 지면 : 자간 normal · 줄바꿈 normal · 문단 사이 24px
 *     연혁      : 자간 −0.17px · keep-all   · 문단 사이 11px
 * 그래서 같은 글인데 글자가 촘촘하고 문단이 붙어 보였다.
 * ⚠ 크기·행간(17px/29px)은 **채린이 따로 정한 값**이라 그대로 둔다 — 여기서 통일하는 건
 *   자간·줄바꿈·문단 간격 셋뿐이다.
 * ⚠ 인용문(.tl-quote__text)도 같은 글이므로 함께 맞춘다. */
@media (max-width: 767px) {
  #history [data-timeline-desc],
  #history .tl-quote__text,
  #history .tl-quote__src,
  #history [data-timeline-title] h3 {
    letter-spacing: normal;
    word-break: normal;

    /* ★★★ 오른쪽이 남던 진짜 원인 ★★★ (2026-08-31)
     * css/base.css 의 전역 `p { text-wrap: pretty }` 다.
     * `pretty` 는 "마지막 줄에 한두 글자만 남는 걸 피하려고 **앞줄들을 일부러 짧게**" 만든다.
     * **사파리 17.5+ 는 이걸 강하게 듣고, 크롬은 한글에서 거의 티가 안 난다** —
     * 그래서 데스크톱 크롬에서는 멀쩡한데 아이폰에서만 오른쪽이 24~44px 씩 남았다.
     * ⚠ **word-break 를 아무리 바꿔도 안 변한다. 범인이 다른 속성이다.**
     *   (2026-08-31에 본문 지면에서 한 번 잡았는데 연혁만 빠뜨려 같은 걸 두 번 헤맸다 —
     *    css/cardbody.css 의 같은 주석과 한 쌍이다. 새 지면을 만들 때마다 이 줄이 필요하다.)
     * ⚠ 데스크톱은 그대로 둔다 — 넓은 칸에서는 pretty 가 오히려 보기 좋다. */
    text-wrap: wrap;
  }
  /* 문단 사이 24px — 본문 지면과 같은 값.
     ⚠ `[data-timeline-desc]` 는 margin-bottom 이 0 이라 문단이 11px 로 붙어 있었다. */
  #history [data-timeline-desc] { margin: 0 0 24px; }
  /* 마지막 문단 뒤에는 여백을 안 남긴다(항목 사이 간격이 두 번 붙는다) */
  #history [data-timeline-desc]:last-child { margin-bottom: 0; }
}