/* ===========================================================================
   회사 연혁 페이지 전용 스타일 (시안: MEW 홈페이지 연혁 페이지)
   - 히어로(OUR HISTORY) + 인트로 + [좌 연대 네비(스크롤 스파이) · 우 타임라인]
   - 공통 토큰 정렬: 폰트 상속, gold 액센트, ink 계열 색
   =========================================================================== */

/* ---------- 히어로 : 러닝트랙 이미지 위 OUR HISTORY (풀뷰포트) ----------
   풀스크린 베이스 = styles.css의 .hero-full. 여기선 연혁 고유값만 */
.history-hero {
  --hero-img: var(--sub-hero);   /* 베이스 ::before가 읽는 이미지 변수로 매핑 */
  display: flex;
  align-items: flex-end;
}
/* 하단 가독성용 다크 그라디언트 (이미지 위에 레이어) */
.history-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.history-hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding-bottom: 4.4rem;
}
.history-hero__title {
  margin: 0;
  font-family: var(--font-en);
  font-size: 5.2rem; line-height: 1.05; letter-spacing: .02em;
  font-weight: 300; color: #fff;
}
.history-hero__title strong { font-weight: 800; }

/* ---------- 인트로 (시안: 좌측 골드 세로바 + 진한 볼드 국문 제목 + 회색 리드) ---------- */
.history-intro {
  margin-bottom: 5.6rem;
  padding-left: 2.4rem;
  border-left: 3px solid var(--color-gold);   /* 타임라인 스파인과 동일 골드 */
}
.history-intro__title {
  margin: 0;
  font-family: var(--font-kr);
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.01em;
  color: #222;
}
.history-intro .page-lead {
  margin-top: 1.6rem;
  font-size: 1.6rem; line-height: 1.75; color: #555;
}

/* ---------- 레이아웃 : 좌 네비 + 우 타임라인 ---------- */
.history-layout {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 4rem;
  align-items: start;
}

/* ---------- 좌측 연대 네비 (스크롤 스파이) ---------- */
.history-nav {
  position: sticky;
  top: calc(var(--header-h) + 4rem);
}
.history-nav ul { list-style: none; margin: 0; padding: 0; }
.history-nav li + li { margin-top: 1.8rem; }
.history-nav a {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: 1.6rem; line-height: 1.2; color: #9a9a9a;
  text-decoration: none;
  transition: color .2s ease;
}
.history-nav a::before {
  content: '';
  width: 1rem; height: 1rem; border-radius: 50%;
  background: #c4c4c4;
  transition: background .2s ease, transform .2s ease;
}
.history-nav a:hover { color: #555; }
.history-nav a.is-active {
  color: var(--color-gold); font-weight: 700;
}
.history-nav a.is-active::before {
  background: var(--color-gold);
  transform: scale(1.15);
}

/* ---------- 우측 타임라인 ---------- */
.decade { scroll-margin-top: calc(var(--header-h) + 3rem); }
.decade + .decade { margin-top: 6.4rem; }
.decade__title {
  margin: 0 0 2.4rem;
  padding-left: 3rem;   /* 아래 년도(2026)·경계선 시작점과 좌측 정렬 */
  font-family: var(--font-en);
  font-size: 3rem; font-weight: 700; letter-spacing: .01em;
  color: var(--color-gold);
}
/* 타임라인 전체를 세로로 관통하는 '연속' 스파인 — 구간(decade)마다 끊기지 않음.
   스크롤 진행 채움: 베이스(연회색) 위에 골드 채움 레이어가 scaleY로 자람.
   --progress(0~1)는 history.js가 스크롤에 맞춰 갱신 */
.history-timeline { position: relative; }
.history-timeline::before {   /* 베이스 트랙 (아직 스크롤 안 한 구간) */
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #c4c4c4;
}
.history-timeline::after {    /* 스크롤 진행 골드 채움 */
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--color-gold);
  transform: scaleY(var(--progress, 0));
  transform-origin: top center;
  will-change: transform;
}
/* 레이어 2 — 채움 끝을 따라 이동하는 액티브 노드 (스크롤에 맞춰 이동) */
.history-timeline__node {
  position: absolute; left: 1.5px; top: calc(var(--progress, 0) * 100%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(198,154,99,.20), 0 0 10px 2px rgba(198,154,99,.45);
  z-index: 1; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .history-timeline__node::after {   /* 은은한 확산 펄스 */
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--color-gold);
    animation: historyNodePulse 1.8s ease-out infinite;
  }
}
@keyframes historyNodePulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}
.decade__list {
  list-style: none; margin: 0;
  padding: 0 0 0 3rem;   /* 년도·경계선은 스파인에서 3rem 안쪽에서 시작 */
}

.tl-row {
  display: flex; gap: 0;
  padding: 2.2rem 0;
  border-top: 2px solid #c4c4c4;   /* 좌측 네비 비활성 dot(#c4c4c4)과 동일 톤 */
}
.tl-row:last-child { border-bottom: 2px solid #c4c4c4; }
.tl-row__year {
  flex: 0 0 9rem;
  font-family: var(--font-en);
  font-size: 1.8rem; font-weight: 700; color: var(--color-gold);
  padding-top: .1rem;
}
.tl-row__body {
  flex: 1 1 auto;
  padding-left: 3rem;
}
.tl-row__body p {
  margin: 0; font-size: 1.6rem; line-height: 1.7; color: #333;
}
.tl-row__body p + p { margin-top: .5rem; }
.tl-row__hl { font-weight: 700; color: #111 !important; }

/* 하위 세부 항목 (예: 2013년 공작기계 시스템 개발) */
.tl-row__sub {
  list-style: none;
  margin: .4rem 0 .4rem;
  padding-left: 1.4rem;
}
.tl-row__sub li {
  position: relative;
  font-size: 1.5rem; line-height: 1.7; color: #666;
  padding-left: 1.2rem;
}
.tl-row__sub li::before {
  content: '·'; position: absolute; left: 0; color: #999;
}

/* 레이어 3 — 항목별 스크롤 등장. JS가 .history--reveal를 부여할 때만 숨김 상태로 시작
   (JS 미동작/모션 최소화 시엔 클래스가 없어 항상 보임 → 안전) */
.history--reveal .decade__title,
.history--reveal .tl-row {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.history--reveal .decade__title.is-in,
.history--reveal .tl-row.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .history-hero__title { font-size: 3.8rem; }
  .history-layout { grid-template-columns: 1fr; gap: 2.4rem; }

  /* 네비 = 상단 가로 스크롤 칩 (스티키) */
  .history-nav {
    top: var(--header-h);
    /* nowrap 칩의 min-content(≈433px)가 1fr(=minmax(auto,1fr)) 열을 밀어
       페이지 전체 가로 오버플로우를 유발 → min-width:0으로 열 축소 허용.
       칩 오버플로우는 아래 ul의 overflow-x:auto가 그대로 흡수(가로 스크롤). */
    min-width: 0;
    margin: 0 calc(-1 * var(--inner-pad));
    padding: 1.2rem var(--inner-pad);
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-bottom: 1px solid #eee;
    z-index: 5;
  }
  .history-nav ul { display: flex; gap: 1.6rem; overflow-x: auto; }
  .history-nav li + li { margin-top: 0; }
  .history-nav a { white-space: nowrap; font-size: 1.4rem; }
  .history-nav a::before { width: .8rem; height: .8rem; }
}

@media (max-width: 560px) {
  .history-hero__title { font-size: 3rem; }
  .tl-row { padding: 1.8rem 0; }
  .tl-row__year { flex-basis: 6.4rem; font-size: 1.6rem; }
  .tl-row__body { padding-left: 1.8rem; }
  .tl-row__body p { font-size: 1.5rem; }
}