/* =========================================================
   ICARUS 연혁(HISTORY) — 가로 타임라인 (왼쪽 1996 → 오른쪽 지금)
   마크업: index.html #history (.ht-head + 빈 .ht), 카드·고도선·버튼: assets/js/history.js (HISTORY 배열만 고치면 됨)
   - 섹션 하나가 데스크톱 한 화면 안에 들어가도록: 제목 줄(HISTORY · 30년째) + 카드 한 줄 + ← → 버튼
   - 옆으로: 터치 스와이프 · 트랙패드/Shift+휠 · 마우스 끌기 · ← → 버튼 · 키보드(트랙에 초점 → 방향키). 세로 휠은 페이지 스크롤 그대로
   - 자동 넘김(모션): 섹션이 반쯤 보이면 1996 → 2026 으로 천천히 넘어가며 카드가 하나씩 켜짐(.is-on / .is-active, .ht.is-touring).
     사용자가 조작하면 바로 멈춤. 동작 줄이기면 없음. 자세한 규칙은 history.js '자동 넘김' 주석
   - 카드 왼쪽 선 = 사이트 격자 왼쪽 선(모바일 16px). 트랙은 화면 오른쪽 끝까지 이어진다
   - 색은 light.css 토큰(라이트/다크). 여기서는 연혁 전용 토큰만 정의
   ========================================================= */
:root {
  --tl-track: #D5DCE5; --tl-mark: #C3CCD8; --tl-award-bg: #FBF6EC;
  --ht-year: var(--display-ink); --ht-year-award: var(--brass); --ht-line: var(--brand); --ht-src-line: rgba(95, 107, 122, .35);
}
:root[data-theme="dark"] {
  --tl-track: rgba(244, 235, 220, .16); --tl-mark: rgba(244, 235, 220, .3); --tl-award-bg: rgba(217, 165, 74, .14);
  /* 해 질 녘 톤: 연도는 아이보리, 수상 연도는 금빛, 고도선은 따뜻한 베이지 */
  --ht-year: var(--ink); --ht-year-award: var(--display-ink); --ht-line: var(--ink-2); --ht-src-line: rgba(244, 235, 220, .3);
}

.history {
  --sec-bg: var(--bg-alt);
  /* 카드 왼쪽 선 = .container 안쪽 선 */
  --ht-pad-l: max(var(--gutter), env(safe-area-inset-left, 0px), calc((100% - var(--maxw)) / 2));
  --ht-pad-r: max(var(--gutter), env(safe-area-inset-right, 0px), calc((100% - var(--maxw)) / 2));
  --ht-card: min(296px, calc(100vw - 88px));     /* 휴대폰: 다음 카드가 오른쪽에 살짝 보임 */
  --ht-gap: 24px;
  --ht-group-gap: 48px;
  --ht-num: 44px;
  --ht-era-h: 56px;
  --ht-spine-top: 18px;      /* 고도선 위쪽 여백 (점 중심까지) */
  --ht-spine-bot: 18px;      /* 고도선 아래쪽 여백. 연속 우승 괄호·이름표가 있으면 넓힘 (.has-streak) */
  --ht-fade: 24px;
}
@media (min-width: 768px) {
  .history { --ht-card: clamp(256px, 22vw, 312px); --ht-gap: clamp(28px, 2.6vw, 40px); --ht-group-gap: clamp(56px, 4.6vw, 72px); --ht-num: clamp(48px, 4.2vw, 64px); --ht-era-h: 60px; --ht-spine-top: 20px; --ht-spine-bot: 20px; --ht-fade: 72px; }
}

/* ---- 제목 줄: [HISTORY + 한글 제목] ……… [30년째] ---- */
.ht-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px clamp(24px, 4vw, 64px); margin-bottom: clamp(24px, 4svh, 48px);
}
.ht-head .sec-head { margin-bottom: 0; }
#history .history-open { margin: 0; }
#history .about-years { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; }
#history .about-years .years-num { font-size: clamp(56px, 8vw, 128px); }   /* HISTORY 글자와 같은 크기 */
#history .about-years .years-sub { margin: 0; padding-bottom: .5em; max-width: 9.5em; font-size: 16px; line-height: 1.5; text-wrap: balance; }
html[lang="en"] #history .about-years .years-sub { max-width: 12em; }
@media (max-width: 767px) {
  .ht-head { flex-direction: column; align-items: flex-start; }
  #history .about-years .years-sub { padding-bottom: .35em; }
}

/* ---- 가로 트랙 ---- */
.ht { position: relative; width: 100%; }
.ht-scroller {
  --fl: 0px; --fr: 0px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ht-pad-l) var(--ht-pad-r);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.ht-scroller::-webkit-scrollbar { display: none; }
.ht-scroller.can-l { --fl: var(--ht-fade); }
.ht-scroller.can-r { --fr: var(--ht-fade); }
.ht-scroller:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .ht-scroller { cursor: grab; } }
.ht-scroller.is-dragging { scroll-snap-type: none; cursor: grabbing; -webkit-user-select: none; user-select: none; }

.ht-lane {
  position: relative; display: flex; gap: var(--ht-group-gap);
  width: max-content; padding: 4px var(--ht-pad-r) 8px var(--ht-pad-l);
}

/* 시대 묶음: 위에 시대 이름, 아래에 카드 한 줄 */
.ht-group { display: flex; flex-direction: column; }
.ht-era { height: var(--ht-era-h); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 6px; white-space: nowrap; }
.ht-decade { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ht-era-name { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; letter-spacing: -0.035em; color: var(--ink); }
.ht-list { display: flex; gap: var(--ht-gap); }

/* 카드: [연도] [고도선 위 점] [제목 · 한 줄 사실 · 출처] */
.ht.has-streak { --ht-spine-bot: 42px; }
.ht-item {
  position: relative; z-index: 1; flex: none; width: var(--ht-card); min-width: 0;
  display: grid; grid-template-rows: auto calc(var(--ht-spine-top) + var(--ht-spine-bot)) auto; align-content: start;
  scroll-snap-align: start;
}
.ht-item:hover, .ht-item:focus-within { z-index: 2; }   /* 말풍선이 옆 카드 밑으로 숨지 않게 */
.ht-when { display: flex; align-items: baseline; gap: 2px; margin-top: 6px; white-space: nowrap; }
.ht-num {
  display: inline-block; clip-path: inset(-30% -10% 0 -10%);   /* 숫자가 아래에서 올라오게 */
  font-weight: 800; font-size: var(--ht-num); line-height: 1; letter-spacing: -0.055em; padding-bottom: .04em;
  color: var(--ht-year); font-variant-numeric: tabular-nums;
}
.ht-num-in { display: inline-block; }
.is-award .ht-num { color: var(--ht-year-award); }
/* 기간(2011–2016): 시작 연도는 작게, 끝 연도를 크게 */
.ht-from { font-size: calc(var(--ht-num) * .4); font-weight: 700; color: var(--brass-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* 고도선 위의 점 (카드 왼쪽 끝 = 연도 왼쪽 선). 점 중심 = 고도선 줄 위에서 --ht-spine-top 아래 */
.ht-node {
  align-self: start; justify-self: start; position: relative; margin-top: calc(var(--ht-spine-top) - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sec-bg); box-shadow: inset 0 0 0 2px var(--tl-mark);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ht-item.is-on .ht-node { background: var(--ht-line); box-shadow: inset 0 0 0 2px var(--ht-line), 0 0 0 5px var(--brand-tint-2); }
.ht-item.is-award.is-on .ht-node { background: var(--brass); box-shadow: inset 0 0 0 2px var(--brass), 0 0 0 6px rgba(207, 174, 110, .3); }
/* 수상 지점: 켜질 때 한 번 브라스 고리가 퍼진다 */
.is-award .ht-node::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--brass-light); opacity: 0; pointer-events: none;
}
.ht-motion .ht-item.is-award.is-on .ht-node::after { animation: ht-ping 1.2s var(--ease) 1 both; }
@keyframes ht-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* 수상 점 = 버튼 (마우스 올림·초점·탭 → 수상 이름 말풍선, aria-describedby). 누르는 면은 44px */
button.ht-node { padding: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; border: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.ht-node::before { content: ""; position: absolute; inset: -15px; border-radius: 50%; }
button.ht-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }
.ht-tip {
  position: absolute; left: -9px; bottom: calc(100% + 12px); z-index: 3;
  width: max-content; max-width: min(248px, calc(var(--ht-card) - 16px));
  padding: 7px 11px 8px; border-radius: 8px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; line-height: 1.45; font-weight: 600; letter-spacing: -0.005em; text-align: left;
  white-space: normal; word-break: keep-all; text-wrap: balance;
  box-shadow: 0 6px 18px -8px rgba(25, 31, 40, .45);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ht-tip::after { content: ""; position: absolute; left: 13px; top: 100%; border: 5px solid transparent; border-top-color: var(--ink); }   /* 꼬리: 점 바로 위 */
.ht-tip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--brass-light); vertical-align: middle; }   /* 브라스 점 = 수상 */
button.ht-node:hover .ht-tip, button.ht-node:focus-visible .ht-tip, button.ht-node.is-tip .ht-tip {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
button.ht-node.tip-x .ht-tip { opacity: 0; visibility: hidden; }
button.ht-node.tip-r .ht-tip { left: auto; right: -9px; }
button.ht-node.tip-r .ht-tip::after { left: auto; right: 13px; }

.ht-body { min-width: 0; padding-right: 4px; }
.ht-title { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.42; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.ht-detail { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ht-meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.ht-award {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px;
  background: var(--tl-award-bg); color: var(--brass-text); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ht-src { display: inline-flex; flex-wrap: wrap; gap: 0 4px; }
.ht-src a { color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--ht-src-line); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.ht-src a:hover { color: var(--brand); text-decoration-color: currentColor; }
.ht-photo { margin-top: 12px; }
.ht-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--bg-deep); }
.ht-photo figcaption { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
/* 영어는 단어 사이에서 자연스럽게 줄바꿈 (구절 묶음은 한국어용) */
html[lang="en"] .ht-item .ph { display: inline; }
@media (max-width: 767px) {
  .ht-detail { font-size: 15px; }
}

/* ---- 고도선(가로): 위치는 JS가 점 위치를 재서 맞춘다 (--y = 점 중심 높이) ---- */
.ht-rail { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ht-track, .ht-fill, .ht-gap, .ht-streak, .ht-tick { position: absolute; display: block; top: var(--y, 0px); }
.ht-track, .ht-fill { height: 2px; margin-top: -1px; border-radius: 2px; }
.ht-track { background: var(--tl-track); }
.ht-fill { background: var(--ht-line); transform-origin: 0 50%; }
/* 기록이 비어 있는 긴 시간(1996 → 2011, 2016 → 2024)은 점선으로 접어 보인다 */
.ht-gap { height: 4px; margin-top: -2px; background: repeating-linear-gradient(to right, var(--sec-bg) 0 6px, transparent 6px 12px); }
/* 2011–2016 6년 연속 우승 구간: 고도선 바로 아래 브라스 선 */
/* 2011–2016 6년 연속 우승 구간: 고도선 바로 아래 브라스 괄호(가는 선 + 양 끝 눈금, 2011·2016 점에 맞춤) + 가운데 이름표 */
.ht-streak { height: 0; }
.ht-sk-line { position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--brass) 26%, transparent); overflow: hidden; }
.ht-streak-fill { position: absolute; inset: 0; background: var(--brass); transform-origin: 0 50%; }
.ht-sk-end { position: absolute; top: 9px; width: 1.5px; height: 7px; border-radius: 1px; background: var(--brass); }
.ht-sk-a { left: -.75px; }
.ht-sk-b { right: -.75px; }
.ht-sk-label {
  position: absolute; left: 50%; top: 19px; transform: translateX(-50%);
  font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  color: var(--brass-text); font-variant-numeric: tabular-nums;
}
.ht-sk-short { display: none; }
@media (max-width: 767px) {
  .ht-sk-label { font-size: 12px; }
  .ht-sk-long { display: none; }
  .ht-sk-short { display: inline; }
}
/* 시대가 바뀌는 지점: 고도계 눈금처럼 세로 눈금 */
.ht-tick { width: 2px; height: 18px; margin-top: -9px; margin-left: -1px; border-radius: 2px; background: var(--tl-mark); transition: background-color .45s var(--ease); }
.ht-tick.is-on { background: var(--ink-3); }

/* ---- ← → 버튼 (데스크톱) ---- */
.ht-ctrl { display: none; }
@media (min-width: 768px) {
  .ht-ctrl { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
}
.ht.is-static .ht-ctrl { display: none; }
.ht-btn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair), 0 1px 3px -1px rgba(25, 31, 40, .12);
  transition: color .2s, background-color .2s, opacity .2s;
}
.ht-btn svg { width: 20px; height: 20px; }
.ht-prev svg { transform: rotate(180deg); }
.ht-btn:hover { color: var(--brand); }
.ht-btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.ht-btn[aria-disabled="true"]:hover { color: var(--ink-2); }
[data-theme="dark"] .ht-btn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }

/* ---- 모션: JS가 html.ht-motion 을 붙였을 때만 (동작 줄이기면 처음부터 최종 상태).
        history.js 의 자동 넘김이 playhead 위치에 맞춰 카드(.is-on)·시대(.ht-group.is-on)·눈금·괄호를 켠다.
        재생 중(.ht.is-touring): 스냅 끔, 지나간 카드는 살짝 흐리게, 지금 카드(.is-active)는 살짝 떠오름 ---- */
.ht-motion .ht-fill, .ht-motion .ht-streak-fill { transition: transform .9s var(--ease); }
/* 아직 닿지 않은 카드: 글은 아주 옅은 윤곽만, 연도는 숨김 → 닿으면 연도가 아래에서 올라오고 글이 또렷해진다 */
.ht-motion .ht-num-in { transform: translateY(105%); transition: transform .8s var(--ease); }
.ht-motion .ht-item.is-on .ht-num-in { transform: none; }
.ht-motion .ht-from { opacity: 0; transition: opacity .7s var(--ease); }
.ht-motion .ht-item.is-on .ht-from { opacity: 1; }
.ht-motion .ht-when { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ht-motion .ht-body { opacity: .13; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ht-motion .ht-item.is-on .ht-body { opacity: 1; }
.ht-motion .ht-era { opacity: 0; transform: translateX(-10px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.ht-motion .ht-group.is-on .ht-era { opacity: 1; transform: none; }
/* 연속 우승 괄호: 2011 에서 앞 눈금·이름표가 나타나고 선이 차오르다 2016 에서 뒤 눈금으로 닫힌다 */
.ht-motion .ht-sk-end, .ht-motion .ht-sk-line { opacity: 0; transition: opacity .6s var(--ease); }
.ht-motion .ht-sk-label { opacity: 0; transition: opacity 1.4s var(--ease); }
.ht-motion .ht-streak.is-on .ht-sk-a, .ht-motion .ht-streak.is-on .ht-sk-line, .ht-motion .ht-streak.is-on .ht-sk-label,
.ht-motion .ht-streak.is-done .ht-sk-b { opacity: 1; }

.ht.is-touring .ht-scroller { scroll-snap-type: none; }
.ht.is-touring .ht-fill, .ht.is-touring .ht-streak-fill { transition: none; }   /* 재생 중엔 JS가 매 프레임 그린다 */
.ht.is-touring .ht-item.is-on:not(.is-active) .ht-when,
.ht.is-touring .ht-item.is-on:not(.is-active) .ht-body { opacity: .5; }
.ht.is-touring .ht-item.is-active .ht-when { transform: translateY(-4px); }
.ht.is-touring .ht-item.is-active .ht-body { transform: translateY(-3px); }
.ht.is-touring .ht-item.is-active .ht-node { box-shadow: inset 0 0 0 2px var(--ht-line), 0 0 0 8px var(--brand-tint-2); }
.ht.is-touring .ht-item.is-award.is-active .ht-node { box-shadow: inset 0 0 0 2px var(--brass), 0 0 0 9px rgba(207, 174, 110, .32); }
@media (prefers-reduced-motion: reduce) {
  .ht-node, .ht-tick, .ht-tip { transition: none; }
}