/* =========================================================
   DOOGO GROUP — about-tl.css (주요 연혁 · 3D 연도 + 빛 레일) — about.css 다음에 읽힘
   그룹 소개 › 주요 연혁 타임라인 (.ab-tl3 — about.css 의 옛 .ab-tl* 규칙은 여기서 덮어씀)
   · 연도 무대(.ab-tl3-stage, about-tl.js 가 만듦): 두께 있는 3D 연도 — 자리마다 숫자 드럼(0~9 면)이 X축으로 굴러
       다음 연도로 바뀜(오도미터). 블루 그라데이션 + 윗면 광택 + 아래로 쌓인 두께 + 바닥 그리드 · 그림자.
       데스크톱(960px~) = 왼쪽 열에 붙어 있음 · 그 아래 '05 Milestones' 와 연도 바로가기(2026 … 2020)
       태블릿 · 모바일 = 탭 바 바로 아래 붙는 연도 막대(연도 + 바로가기)
   · 빛 레일(.ab-tl3-rail): 원통처럼 음영 진 레일 — 스크롤에 따라 블루 빛이 채워지고 빛 머리(꼬리 달린 구슬)가 내려감.
       채워진 구간 안에는 빛 줄기가 아래로 흐름(화면 밖이면 정지)
   · 구슬(.ab-tl-dot) · 연도 허브(h3::before): 진주색 구슬 → 빛이 닿으면 블루 유리 구슬로 켜지며 한 번 퍼지는 링
   · 항목 줄(.ab-tl3-row): 아래에서 X축으로 일어서며 차례로 등장 · 마우스를 올리면 유리 카드로 떠오르고(커서 쪽으로 살짝 기울기)
       태그 알약에 광택이 지나감
   · 상태(about-tl.js): .is-ready · .is-armed(등장 전) → li/h3 .is-up(등장) .is-done · .is-lit(빛이 닿음)
       · 연도 묶음 .is-cur · 무대 .is-in(첫 등장) .is-flip(연도가 바뀌는 순간) · .is-paused(화면 밖)
   · html.motion-off: 처음부터 다 켜진 정지 그림(레일 끝까지 · 구슬 모두 켜짐 · 흐름/맥박 없음, 연도는 바로 바뀜)
     html.soft-motion: 커서 기울기만 뺌
   ========================================================= */

.ab-tl3 {
  --rx: 20px;            /* 레일 중심 (본문 열 왼쪽에서) */
  --lx: 60px;            /* 본문 열 왼쪽 여백 = 레일 + 간격 */
  --stick: calc(var(--header-h) + var(--ab-tabs-h, 65px));
  --tl-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tl-out: cubic-bezier(.16, 1, .3, 1);
  --pearl: #DCD3C3;
  --lit: #1F6CF0;
  position: relative;
}
.ab-tl3-main { position: relative; padding-left: var(--lx); }

/* =========================================================
   1) 빛 레일
   ========================================================= */
.ab-tl3-rail {
  position: absolute; z-index: 0; left: calc(var(--rx) - 3px); top: 26px; bottom: 40px; width: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #CFC6B6 0%, #E9E3D8 30%, #FBFAF6 52%, #E4DDD1 76%, #CBC2B1 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(110, 92, 60, .07);
}
.ab-tl3-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 1) * 100%); overflow: hidden; border-radius: inherit;
  background: linear-gradient(90deg, #0640A6 0%, #1A68EE 28%, #9CC4FF 50%, #2C77F3 70%, #0743AD 100%);
  box-shadow: 0 0 12px rgba(31, 108, 240, .5), 0 0 2px rgba(31, 108, 240, .7);
}
/* 채워진 구간 안을 흐르는 빛 줄기 (240px 주기 · transform 만) */
.ab-tl3-fill::after {
  content: ""; position: absolute; left: 0; right: 0; top: -240px; height: calc(100% + 480px);
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 120px, rgba(255, 255, 255, .85) 156px, rgba(255, 255, 255, 0) 186px, rgba(255, 255, 255, 0) 240px);
  animation: tl3Flow 2.6s linear infinite;
}
@keyframes tl3Flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 240px, 0); } }
/* 빛 머리: 흰 심 + 블루 후광 + 위로 꼬리 */
.ab-tl3-head {
  position: absolute; left: 50%; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 17%, #D6E6FF 27%, rgba(84, 148, 255, .6) 45%, rgba(47, 120, 242, 0) 70%);
  transform: translate3d(0, var(--hy, 0px), 0); opacity: 0; transition: opacity .4s var(--ease);
}
.ab-tl3-head::before {
  content: ""; position: absolute; left: 50%; bottom: 50%; width: 4px; height: 120px; margin-left: -2px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(190, 216, 255, 0), rgba(214, 230, 255, .95));
}
.ab-tl3-head::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 120, 242, .3), rgba(47, 120, 242, 0) 68%);
  animation: tl3Breathe 2.4s ease-in-out infinite;
}
@keyframes tl3Breathe { 0%, 100% { transform: scale(.82); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }
.ab-tl3-rail.is-run .ab-tl3-head { opacity: 1; }

/* =========================================================
   2) 연도 묶음 머리 (h3) — 레일 위 허브 구슬 + 연도 + 가는 선
   ========================================================= */
.ab-tl3 .ab-tl-year { display: block; padding: 0; }
.ab-tl3 .ab-tl-year + .ab-tl-year { margin-top: clamp(26px, 3vw, 44px); }
.ab-tl3 .ab-tl-y {
  position: relative; top: auto; display: flex; align-items: center; gap: 16px; height: 52px; margin: 0; padding: 0;
  font-size: 1.12rem; font-weight: 600; line-height: 1; letter-spacing: .06em; color: var(--muted);
  -webkit-text-stroke: 0; transition: color .5s var(--ease);
}
.ab-tl3 .ab-tl-y > span { display: inline-block; }
.ab-tl3 .ab-tl-y:focus { outline: none; }
.ab-tl3 .ab-tl-y:focus-visible > span { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 6px; }
/* 허브: 22px 유리 구슬 + 바깥 고리 (색은 background-color · box-shadow 로만 바꿔 부드럽게 전환) */
.ab-tl3 .ab-tl-y::before {
  content: ""; position: absolute; z-index: 2; left: calc(var(--rx) - var(--lx) - 11px); top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background-color: var(--pearl);
  background-image: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .98) 0 9%, rgba(255, 255, 255, .45) 25%, rgba(255, 255, 255, 0) 52%),
                    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(30, 22, 8, .26) 100%);
  box-shadow: 0 0 0 5px var(--ivory), 0 0 0 6.5px rgba(150, 135, 110, .32), 0 3px 6px rgba(60, 45, 20, .22);
  transition: background-color .5s var(--ease), box-shadow .6s var(--ease), transform .55s var(--tl-spring);
}
.ab-tl3 .ab-tl-y::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(11, 27, 51, .18), rgba(11, 27, 51, 0) 85%); }
.ab-tl3 .ab-tl-year.is-lit .ab-tl-y { color: var(--ink); }
.ab-tl3 .ab-tl-year.is-lit .ab-tl-y::before {
  background-color: var(--lit);
  box-shadow: 0 0 0 5px var(--ivory), 0 0 0 6.5px rgba(31, 108, 240, .55), 0 0 22px 4px rgba(31, 108, 240, .35), 0 3px 8px rgba(6, 40, 110, .35);
}
.ab-tl3 .ab-tl-year.is-cur .ab-tl-y { color: var(--blue); }
.ab-tl3 .ab-tl-year.is-cur.is-lit .ab-tl-y::before { animation: tl3Hub 2.6s ease-in-out infinite; }
@keyframes tl3Hub {
  0%, 100% { box-shadow: 0 0 0 5px var(--ivory), 0 0 0 6.5px rgba(31, 108, 240, .55), 0 0 22px 4px rgba(31, 108, 240, .35), 0 3px 8px rgba(6, 40, 110, .35); }
  50% { box-shadow: 0 0 0 5px var(--ivory), 0 0 0 7px rgba(31, 108, 240, .7), 0 0 34px 10px rgba(31, 108, 240, .28), 0 3px 8px rgba(6, 40, 110, .35); }
}

/* =========================================================
   3) 항목 — 구슬(li 안, 레일 위) + 줄 카드(.ab-tl3-row)
   ========================================================= */
.ab-tl3 .ab-tl-list { position: relative; padding-left: 0; }
.ab-tl3 .ab-tl-item {
  position: relative; display: block; padding: 0; border: 0; isolation: auto;
  perspective: 1100px; perspective-origin: 50% 0;
}
.ab-tl3 .ab-tl-item::before { content: none; }
.ab-tl3 .ab-tl-item::after { content: ""; position: absolute; left: 22px; right: 0; bottom: 0; height: 1px; background: var(--line); }
.ab-tl3 .ab-tl-item:last-child::after { display: none; }

.ab-tl3 .ab-tl-dot {
  position: absolute; z-index: 2; left: calc(var(--rx) - var(--lx) - 9px); top: var(--dot-y, 50%); width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background-color: var(--pearl);
  background-image: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .98) 0 10%, rgba(255, 255, 255, .42) 27%, rgba(255, 255, 255, 0) 54%),
                    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 48%, rgba(30, 22, 8, .26) 100%);
  box-shadow: 0 0 0 4px var(--ivory), 0 2px 5px rgba(60, 45, 20, .22);
  transition: background-color .45s var(--ease), box-shadow .55s var(--ease), transform .6s var(--tl-spring);
}
.ab-tl3 .ab-tl-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(47, 120, 242, .6); opacity: 0; pointer-events: none; }
.ab-tl3 .ab-tl-item.is-lit .ab-tl-dot {
  background-color: var(--lit);
  box-shadow: 0 0 0 4px var(--ivory), 0 0 0 5.5px rgba(31, 108, 240, .28), 0 0 18px 2px rgba(31, 108, 240, .42), 0 3px 7px rgba(6, 40, 110, .32);
}
.ab-tl3 .ab-tl-item.is-lit .ab-tl-dot::after { animation: tl3Ping 1.1s var(--tl-out) both; }
@keyframes tl3Ping { 0% { opacity: .95; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.7); } }

/* 줄: 데스크톱 넓은 화면은 [월 | 내용 | 태그] 한 줄, 그 밖은 [월 | 내용 / 태그] */
.ab-tl3-row {
  --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 50%;
  position: relative; z-index: 1; display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); grid-template-areas: "m t" "m tag";
  column-gap: 18px; row-gap: 10px; align-items: start; padding: 26px 22px;
  transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform .5s var(--tl-out);
}
.ab-tl3-row > * { position: relative; z-index: 1; }
/* 유리 카드 (마우스를 올렸을 때) — 커서 위치에 반사광 */
.ab-tl3-row::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 18px; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(125deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(11, 27, 51, .045),
              0 26px 50px -26px rgba(11, 27, 51, .32), 0 10px 18px -12px rgba(11, 27, 51, .14);
  opacity: 0; transform: scale(.985); transition: opacity .4s var(--ease), transform .5s var(--tl-out);
}
.ab-tl3 .ab-tl-m {
  grid-area: m; align-self: start; font-size: clamp(1.45rem, 1.8vw, 1.8rem); font-weight: 600; line-height: 1.12; letter-spacing: -.01em;
  color: #7B8597; transition: color .5s var(--ease), text-shadow .6s var(--ease);
}
.ab-tl3 .ab-tl-item.is-lit .ab-tl-m {
  color: var(--blue);
  text-shadow: .012em .03em 0 rgba(7, 66, 163, .55), .024em .06em 0 rgba(7, 66, 163, .22), 0 .3em .5em rgba(10, 93, 226, .22);
}
.ab-tl3 .ab-tl-t {
  grid-area: t; align-self: center; font-size: clamp(1.04rem, 1.3vw, 1.2rem); font-weight: 600; line-height: 1.55; letter-spacing: -.025em;
  color: var(--ink); word-break: keep-all; overflow-wrap: anywhere;
}
.ab-tl3 .ab-tl-t .nowrap { white-space: nowrap; }

/* 태그 알약: 위 하이라이트 · 아래 그림자로 살짝 볼록 + 광택 띠 */
.ab-tl3 .ab-tl-tag {
  grid-area: tag; justify-self: start; align-self: center; position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; max-width: 100%; height: auto; min-height: 28px; padding: 4px 13px;
  border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.35; white-space: normal; color: var(--ink-2);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F1EB 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 27, 51, .1), inset 0 1px 0 #fff, 0 1px 1px rgba(11, 27, 51, .05), 0 6px 12px -8px rgba(11, 27, 51, .3);
}
.ab-tl3 .ab-tl-tag .en { font-size: .74rem; font-weight: 600; letter-spacing: .03em; }
.ab-tl3 .ab-tl-tag.is-group {
  color: #fff; background: linear-gradient(180deg, #22355A 0%, #0A1426 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 12px -6px rgba(10, 20, 38, .55);
}
.ab-tl3 .ab-tl-tag.is-global {
  color: #fff; background: linear-gradient(180deg, #4B8DF8 0%, #0A5DE2 55%, #0849B8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 6px 12px -6px rgba(10, 93, 226, .6);
}
.ab-tl3 .ab-tl-tag::after {
  content: ""; position: absolute; z-index: -1; inset: -2px auto -2px 0; width: 60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-120%, 0, 0) skewX(-18deg); opacity: 0;
}
.ab-tl3 :is(.ab-tl-tag.is-group, .ab-tl-tag.is-global)::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%); }
.ab-tl3 .ab-tl-tag { z-index: 1; }
.ab-tl3 .ab-tl-tag > * { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .ab-tl3 .ab-tl-item.is-done .ab-tl3-row:hover,
  .ab-tl3:not(.is-armed) .ab-tl3-row:hover { transform: translate3d(0, -4px, 14px) rotateX(var(--tx)) rotateY(var(--ty)); }
  .ab-tl3 .ab-tl3-row:hover::before { opacity: 1; transform: none; }
  .ab-tl3 .ab-tl-item:hover .ab-tl-dot { transform: scale(1.22); }
  .ab-tl3 .ab-tl3-row:hover .ab-tl-tag::after { opacity: 1; transform: translate3d(220%, 0, 0) skewX(-18deg); transition: transform .9s var(--tl-out), opacity .2s; }
}

/* ---------- 등장: 줄이 아래에서 X축으로 일어섬 (about-tl.js 가 .is-armed → .is-up) ---------- */
.ab-tl3.is-armed .ab-tl-item:not(.is-up) .ab-tl3-row { opacity: 0; transform: translate3d(0, 34px, -40px) rotateX(52deg); }
.ab-tl3.is-armed .ab-tl-item:not(.is-up) .ab-tl-dot { transform: scale(0); }
.ab-tl3.is-armed .ab-tl-item:not(.is-up)::after { transform: scaleX(0); }
.ab-tl3.is-armed .ab-tl-item::after { transform-origin: 0 50%; transition: transform 1s var(--tl-out) var(--d, 0ms); }
.ab-tl3.is-armed .ab-tl-item.is-up:not(.is-done) .ab-tl3-row {
  transition: transform 1.15s var(--tl-out) var(--d, 0ms), opacity .7s var(--ease) var(--d, 0ms);
}
.ab-tl3.is-armed .ab-tl-item.is-up:not(.is-done) .ab-tl-dot { transition: transform .7s var(--tl-spring) calc(var(--d, 0ms) + 120ms), background-color .45s var(--ease), box-shadow .55s var(--ease); }
.ab-tl3.is-armed .ab-tl-year:not(.is-up) .ab-tl-y > span { opacity: 0; transform: translate3d(-10px, 0, 0); }
.ab-tl3.is-armed .ab-tl-year:not(.is-up) .ab-tl-y::before { transform: scale(0); }
.ab-tl3.is-armed .ab-tl-year:not(.is-up) .ab-tl-y::after { transform: scaleX(0); }
.ab-tl3.is-armed .ab-tl-y > span { transition: opacity .7s var(--ease), transform .9s var(--tl-out); }
.ab-tl3.is-armed .ab-tl-y::after { transform-origin: 0 50%; transition: transform 1.1s var(--tl-out) .1s; }

/* =========================================================
   4) 연도 무대 — 3D 숫자 드럼
   ========================================================= */
.ab-tl3-stage { position: relative; z-index: 3; }
.ab-tl3-kick {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: .74rem; font-weight: 600; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.ab-tl3-kick i {
  width: 9px; height: 9px; border-radius: 50%; background-color: var(--lit);
  background-image: radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .95) 0 12%, rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 0 0 3px rgba(31, 108, 240, .14), 0 0 10px rgba(31, 108, 240, .5);
}
.ab-tl3-kick b { font-weight: 600; color: var(--ink); letter-spacing: .16em; }

.ab-tl3-hero { --R: 1.539em; position: relative; width: max-content; font-size: var(--fs, 8rem); }
/* 숫자 뒤의 옅은 블루 빛 */
.ab-tl3-hero::before {
  content: ""; position: absolute; z-index: -2; left: -18%; right: -18%; top: -30%; bottom: -40%; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 55%, rgba(47, 120, 242, .13), rgba(47, 120, 242, 0) 72%);
}
/* 오도미터 창: 드럼의 앞면만 보이고 위아래로 굴러 들고나는 숫자는 흐려짐 */
.ab-tl3-num {
  position: relative; height: 1.1em; margin: 0 -.12em; padding: 0 .12em; perspective: 7em; perspective-origin: 50% 46%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 .15em, #000 .94em, transparent 1.1em);
          mask-image: linear-gradient(180deg, transparent 0, #000 .15em, #000 .94em, transparent 1.1em);
}
.ab-tl3-numin { display: flex; height: 1em; transform-style: preserve-3d; transform-origin: 50% 60%; }
/* 칸 너비 = 지금 숫자의 실제 너비(about-tl.js 가 --w) — '1' 처럼 좁은 숫자도 자간이 고르게, 바뀔 때는 같이 미끄러짐 */
.ab-tl3-d { position: relative; flex: none; width: calc(var(--w, .6) * 1em - .025em); height: 1em; transform-style: preserve-3d; transition: width .7s var(--tl-out) var(--dl, 0s); }
.ab-tl3-drum {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--R) * -1)) rotateX(var(--a, 0deg));
  transition: transform var(--dur, 0s) var(--roll-ease, cubic-bezier(.22, 1.08, .36, 1)) var(--dl, 0s);
}
.ab-tl3-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 600; line-height: 1; letter-spacing: 0;
  transform: rotateX(calc(var(--k) * 36deg)) translateZ(var(--R));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.ab-tl3-face > span { grid-area: 1 / 1; display: block; }
/* 두께: 아래 · 오른쪽으로 쌓인 짙은 블루 층 */
.ab-tl3-face .x {
  color: #0B52C9;
  text-shadow:
    .002em .006em 0 #0A4FC2, .004em .012em 0 #0A4BB8, .006em .018em 0 #0947AE, .008em .024em 0 #0843A4,
    .010em .030em 0 #073F9A, .012em .036em 0 #073A90, .014em .042em 0 #063686, .016em .048em 0 #05317B,
    .018em .054em 0 #052D71, .020em .060em 0 #042866;
}
/* 앞면: 블루 그라데이션 + 윗면 광택 + 지나가는 광택 띠(.is-flip) */
.ab-tl3-face .f {
  color: transparent;
  background-image:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, #6FAAFF 0%, #2C78F4 34%, #0A5DE2 60%, #0846B0 100%);
  background-size: 260% 100%, 100% 100%, 100% 100%;
  background-position: 150% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.ab-tl3-stage.is-flip .ab-tl3-face.is-front .f { animation: tl3Sheen 1.25s var(--ease) .32s both; }
@keyframes tl3Sheen { from { background-position: 150% 0, 0 0, 0 0; } to { background-position: -50% 0, 0 0, 0 0; } }
.ab-tl3-stage.is-flip .ab-tl3-numin { animation: tl3Kick 1s var(--tl-out); }
@keyframes tl3Kick { 0% { transform: none; } 28% { transform: rotateX(16deg) translate3d(0, -.02em, 0); } 100% { transform: none; } }

/* 숫자 아래 그림자 + 바닥 그리드 (스크롤에 따라 바닥이 앞으로 흘러옴: --gy) */
.ab-tl3-shadow {
  position: absolute; z-index: -1; left: 4%; right: 6%; top: .86em; height: .2em; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 34, 96, .3), rgba(5, 34, 96, 0));
}
/* 바닥: 숫자 밑면이 지평선(소실점)인 평면 — 앞(아래)에서 뒤(위)로 멀어짐. 모두 화면 뒤쪽(z ≤ 0)이라 투영이 튀지 않음 */
.ab-tl3-floor {
  position: absolute; z-index: -2; left: -8%; right: -8%; top: .9em; height: .62em; overflow: hidden; pointer-events: none;
  perspective: 1.2em; perspective-origin: 46% 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 110% at 46% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 110% at 46% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
}
.ab-tl3-floor i {
  position: absolute; left: -60%; right: -60%; bottom: 0; height: 9em; transform-origin: 50% 100%; transform: rotateX(84deg);
  background-image: linear-gradient(rgba(10, 93, 226, .34) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 93, 226, .34) 1px, transparent 1px);
  background-size: .22em .22em; background-position: 50% var(--gy, 0px);
}

/* 이번 연도 항목 수 */
.ab-tl3-meta { display: flex; align-items: baseline; gap: 10px; margin: calc(var(--fs, 8rem) * .42) 0 0; perspective: 300px; }
.ab-tl3-meta b { display: inline-block; font-size: 1.7rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--ink); transform-origin: 50% 100%; }
.ab-tl3-meta span { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ab-tl3-meta.is-swap b { animation: tl3Swap .7s var(--tl-out); }
@keyframes tl3Swap { from { opacity: 0; transform: translate3d(0, .5em, 0) rotateX(-70deg); } to { opacity: 1; transform: none; } }

/* 연도 바로가기: 진행 선 + 구슬 + 연도 */
.ab-tl3-nav { position: relative; width: min(100%, 300px); margin-top: 22px; }
.ab-tl3-nav ol { position: relative; display: flex; justify-content: space-between; }
.ab-tl3-navtrack { position: absolute; left: 20px; right: 20px; top: 15px; height: 2px; border-radius: 2px; background: #DCD4C6; }
.ab-tl3-navtrack i {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--np, 0));
  background: linear-gradient(90deg, #6FA2F2, var(--blue)); box-shadow: 0 0 8px rgba(31, 108, 240, .45);
  transition: transform .8s var(--tl-out);
}
.ab-tl3-nav button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; width: 40px; padding: 8px 0 4px;
  font-size: .76rem; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--muted); border-radius: 10px;
  -webkit-tap-highlight-color: transparent; transition: color .35s var(--ease);
}
.ab-tl3-nav button i {
  width: 14px; height: 14px; border-radius: 50%; background-color: var(--pearl);
  background-image: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .98) 0 10%, rgba(255, 255, 255, .4) 28%, rgba(255, 255, 255, 0) 55%),
                    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 48%, rgba(30, 22, 8, .24) 100%);
  box-shadow: 0 0 0 3px var(--ivory), 0 2px 4px rgba(60, 45, 20, .2);
  transition: background-color .4s var(--ease), box-shadow .45s var(--ease), transform .5s var(--tl-spring);
}
.ab-tl3-nav button.is-past i { background-color: #5F95EE; box-shadow: 0 0 0 3px var(--ivory), 0 2px 4px rgba(6, 40, 110, .25); transform: scale(.82); }
.ab-tl3-nav button.is-on { color: var(--ink); }
.ab-tl3-nav button.is-on i {
  background-color: var(--lit); transform: scale(1.28);
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4.5px rgba(31, 108, 240, .4), 0 0 14px 2px rgba(31, 108, 240, .45), 0 2px 5px rgba(6, 40, 110, .3);
}
@media (hover: hover) { .ab-tl3-nav button:not(.is-on):hover { color: var(--ink); } .ab-tl3-nav button:not(.is-on):hover i { transform: scale(1.15); } }
.ab-tl3-nav button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* 무대 첫 등장 (.is-armed → .is-in): 위에서부터 차례로, 숫자는 X축으로 일어서며 */
.ab-tl3-stage.is-armed > * { transition: opacity .8s var(--ease), transform 1.1s var(--tl-out); }
.ab-tl3-stage.is-armed > :nth-child(2) { transition-delay: .08s; }
.ab-tl3-stage.is-armed > :nth-child(3) { transition-delay: .3s; }
.ab-tl3-stage.is-armed > :nth-child(4) { transition-delay: .42s; }
.ab-tl3-stage.is-armed:not(.is-in) > * { opacity: 0; transform: translate3d(0, 18px, 0); }
.ab-tl3-stage.is-armed:not(.is-in) .ab-tl3-hero { transform: perspective(800px) translate3d(0, .12em, 0) rotateX(-38deg); transform-origin: 50% 100%; }

/* =========================================================
   5) 데스크톱 (960px~): 왼쪽 열에 붙는 연도 무대
   ========================================================= */
@media (min-width: 960px) {
  .ab-tl3.is-ready { --yc: clamp(256px, 27vw, 380px); display: grid; grid-template-columns: var(--yc) minmax(0, 1fr); align-items: start; }
  .ab-tl3.is-ready .ab-tl3-main { grid-column: 2; grid-row: 1; }
  .ab-tl3-stage {
    --fs: calc(var(--yc) * .385);
    grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--stick) + clamp(24px, 4.5vh, 56px)); padding-top: 12px;
    transition: top .45s var(--ease);
  }
  .site-header.is-hidden ~ main .ab-tl3-stage { top: calc(var(--ab-tabs-h, 65px) + clamp(24px, 4.5vh, 56px)); }
  .ab-tl3-nav { width: max(220px, calc(var(--fs) * 2.3)); }
}
/* 넓은 화면: 월 | 내용 | 태그 한 줄 */
@media (min-width: 1200px) {
  .ab-tl3-row { grid-template-columns: 4.4rem minmax(0, 1fr) auto; grid-template-areas: "m t tag"; align-items: center; column-gap: 24px; }
  .ab-tl3 .ab-tl-m { align-self: center; }
  .ab-tl3 .ab-tl-tag { justify-self: end; white-space: nowrap; flex-wrap: nowrap; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .ab-tl3 .ab-tl-dot { --dot-y: 41px; }
}

/* =========================================================
   6) 태블릿 · 모바일 (~959px): 탭 바 아래 붙는 연도 막대
   ========================================================= */
@media (max-width: 959px) {
  .ab-tl3 { --rx: 12px; --lx: 46px; }
  .ab-tl3-stage {
    --fs: clamp(3rem, 8.6vw, 4.4rem);
    position: sticky; top: var(--stick); display: flex; align-items: center; gap: 18px 22px;
    margin: 0 calc(var(--gutter) * -1) 6px; padding: 14px var(--gutter) 20px; /* 배경은 화면 끝까지 (레일 빛이 옆으로 비치지 않게) */
    background: linear-gradient(180deg, var(--ivory) 0, var(--ivory) 76%, rgba(247, 245, 240, 0) 100%);
    transition: top .45s var(--ease);
  }
  .site-header.is-hidden ~ main .ab-tl3-stage { top: var(--ab-tabs-h, 65px); }
  .ab-tl3-kick, .ab-tl3-floor, .ab-tl3-meta { display: none; }
  .ab-tl3-hero { flex: none; }
  .ab-tl3-hero::before { left: -10%; right: -10%; top: -20%; bottom: -30%; }
  .ab-tl3-nav { flex: 1 1 auto; width: auto; max-width: 360px; margin: 0 0 0 auto; }
  .ab-tl3-nav button { width: 38px; font-size: .7rem; }
  .ab-tl3-navtrack { left: 19px; right: 19px; }
  .ab-tl3-row { grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 14px; padding: 22px 0; }
  .ab-tl3 .ab-tl-item::after { left: 0; }
  .ab-tl3 .ab-tl-m { font-size: 1.42rem; }
  .ab-tl3 .ab-tl-dot { --dot-y: 36px; }
  .ab-tl3 .ab-tl-y { height: 46px; font-size: 1.04rem; }
  .ab-tl3 .ab-tl-y::before { width: 20px; height: 20px; left: calc(var(--rx) - var(--lx) - 10px); margin-top: -10px; }
  .ab-tl3 .ab-tl-dot { width: 16px; height: 16px; margin-top: -8px; left: calc(var(--rx) - var(--lx) - 8px); }
  .ab-tl3-rail { width: 5px; left: calc(var(--rx) - 2.5px); }
}
/* 태블릿: 연도와 바로가기 사이에 그 해 항목 수 */
@media (min-width: 600px) and (max-width: 959px) {
  .ab-tl3-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding-left: 20px; border-left: 1px solid rgba(11, 27, 51, .1); }
  .ab-tl3-meta b { font-size: 1.5rem; }
  .ab-tl3-meta span { font-size: .66rem; }
}
@media (max-width: 560px) {
  .ab-tl3 { --rx: 9px; --lx: 34px; }
  .ab-tl3-stage { gap: 14px; padding-top: 12px; padding-bottom: 18px; }
  .ab-tl3-nav button { width: 34px; font-size: .66rem; letter-spacing: 0; }
  .ab-tl3-navtrack { left: 17px; right: 17px; }
  .ab-tl3-row { grid-template-columns: 2.7rem minmax(0, 1fr); column-gap: 10px; row-gap: 9px; padding: 20px 0; }
  .ab-tl3 .ab-tl-m { font-size: 1.3rem; }
  .ab-tl3 .ab-tl-dot { --dot-y: 33px; }
  .ab-tl3 .ab-tl-t { font-size: 1rem; }
  .ab-tl3 .ab-tl-tag { min-height: 26px; padding: 3px 11px; font-size: .72rem; }
  .ab-tl3 .ab-tl-tag .en { font-size: .7rem; }
}

/* =========================================================
   7) 화면 밖 정지 · 움직임 멈추기
   ========================================================= */
.ab-tl3.is-paused .ab-tl3-fill::after,
.ab-tl3.is-paused .ab-tl3-head::after,
.ab-tl3.is-paused .ab-tl-year.is-cur .ab-tl-y::before { animation-play-state: paused; }
html.motion-off .ab-tl3-fill { height: 100%; }
html.motion-off .ab-tl3-fill::after, html.motion-off .ab-tl3-head { display: none; }
html.motion-off .ab-tl3 .ab-tl-year .ab-tl-y::before { animation: none; }
html.motion-off .ab-tl3 :is(.ab-tl3-row, .ab-tl-dot, .ab-tl-y > span) { opacity: 1 !important; }
html.motion-off .ab-tl3 .ab-tl-item.is-lit .ab-tl-dot::after { animation: none; opacity: 0; }
html.motion-off .ab-tl3-stage .ab-tl3-numin, html.motion-off .ab-tl3-stage .ab-tl3-face .f { animation: none !important; }
html.motion-off .ab-tl3-drum { transition: none !important; }
html.motion-off .ab-tl3-stage > * { opacity: 1 !important; transform: none !important; }