/**
 * history.css
 * 연혁(역사) 페이지 전용 스타일
 * - .timeline: 연도별 그룹 세로 타임라인
 * - 연도 필터: tabs--pill-lg 사용 (components.css)
 * - 월 배지: badge--outline 사용 (components.css)
 */

/* ===================================
   Timeline (연혁)
   연도별 그룹 → 월별 서브그룹 세로 타임라인
   BEM: .timeline > .timeline__group > .timeline__items-col > .timeline__month-group > .timeline__events > .timeline__event
   =================================== */
.timeline.tabs__panel {
  padding: 0;
}

.timeline {
  position: relative;
  padding: 0 0 var(--space-12);
  margin-top: var(--gap-form-divider);
}

/* 세로선: JS가 .timeline__line의 top/bottom을 동적으로 제어 */
.timeline__line {
  position: absolute;
  left: 159px;
  top: 24px;
  bottom: 48px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary-100) 0%,
    var(--color-primary-100) 92%,
    transparent 100%
  );
  pointer-events: none;
}

/* --- 연도 그룹 --- */
.timeline__group {
  display: flex;
  gap: 0;
}

.timeline__group + .timeline__group {
  margin-top: var(--space-12);
}

/* --- 좌측 연도 컬럼 (Sticky) --- */
.timeline__year-col {
  flex: 0 0 160px;
  padding-top: var(--space-3);
  padding-right: var(--space-8);
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

.timeline__year-heading {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary-700);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls);
}

/* --- 우측 이벤트 컬럼 --- */
.timeline__items-col {
  flex: 1;
  padding-left: 28px;
}

/* --- 월 그룹: 같은 달 이벤트 묶음 --- */
.timeline__month-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px var(--space-3);
  position: relative;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}

.timeline__month-group:hover {
  background-color: var(--color-primary-25);
}

.timeline__month-group + .timeline__month-group {
  border-top: 1px solid var(--color-gray-100);
}

/* 02_ctc 연혁: 월별 구분 실선을 또렷한 연한선으로 (timeline--ruled 한정, 타 부서 영향 없음) */
.timeline--ruled .timeline__month-group + .timeline__month-group {
  border-top-color: var(--color-gray-200);
}

/* 타임라인 점 — box-sizing: border-box로 border 포함하여 정확한 정렬
   dot 중심 = month-group padding-top(14) + badge padding(3) + border(1) + font-center(12.8) = 30.8px
   standard dot(10px): top = 30.8 - 5 = 26px → 중심 31px ✓ */
.timeline__month-group::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 26px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-700);
  border: 2px solid var(--color-primary-700);
  box-sizing: border-box;
  z-index: 1;
}

/* 각 연도 첫 번째 월 그룹: 강조 dot(14px) 중심 = 30.8px, top = 30.8-7 = 24px */
.timeline__month-group:first-child::before {
  width: 14px;
  height: 14px;
  left: -35px;
  top: 24px;
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  box-shadow: 0 0 0 3px var(--color-primary-25);
}

/* --- 월 배지: badge--outline 기반, 타임라인 내 고정 너비 --- */
.timeline__month-group .badge {
  flex: 0 0 56px;
  width: 56px;
  justify-content: center;
  text-align: center;
  padding: 3px 0;
  line-height: var(--lh-body);
  letter-spacing: 0;
}

/* "월" 텍스트를 CSS로 추가하여 HTML에는 숫자만 기술 */
.timeline__month-group .badge::after {
  content: "월";
  font-weight: var(--fw-medium);
}

/* --- 이벤트 목록 --- */
.timeline__events {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline__event {
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  word-break: var(--word-break-base);
  padding-left: 14px;
  position: relative;
}

/* 이벤트 앞 소형 bullet dot */
.timeline__event::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-300);
}

/* 두 번째 이상 이벤트: padding-top 8px 만큼 dot 위치 보정 */
.timeline__event + .timeline__event::before {
  top: calc(0.8em + 8px);
}

.timeline__event + .timeline__event {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-gray-300);
}

/* 강조 이벤트 (예: 원장 취임 등 주요 이벤트) */
.timeline__event--highlight {
  color: var(--color-primary-700);
  font-weight: var(--fw-bold);
}


/* --- 반응형: 모바일 (767px 이하) ---
   dot box-sizing: border-box → 총 크기 = width
   선 중심 = year-col(80px) + padding(20px) - dot-offset(25px) + dot-radius(4px) = 79px
   선 left: 78px (중심 79px) */
@media (max-width: 767px) {
  .timeline__line {
    left: 102px;
  }

  .timeline__year-col {
    flex: 0 0 104px;
    padding-right: var(--space-6);
    position: relative;
    top: 0;
  }

  .timeline__year-heading {
    font-size: var(--fs-section);
  }

  .timeline__items-col {
    padding-left: var(--space-5);
  }

  .timeline__month-group {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
  }

  /* 모바일 dot 중심 = padding-top(12) + badge padding(2) + border(1) + font-center(12.8) = 27.8px
     standard dot(8px): top = 27.8 - 4 = 24px */
  .timeline__month-group::before {
    left: -25px;
    width: 8px;
    height: 8px;
    top: 24px;
  }

  /* first-child dot(12px): top = 27.8 - 6 = 22px */
  .timeline__month-group:first-child::before {
    width: 12px;
    height: 12px;
    left: -27px;
    top: 22px;
  }

  .timeline__month-group .badge {
    flex: 0 0 48px;
    width: 48px;
    padding: 2px 0;
    font-size: var(--fs-tag);
  }

  .timeline__event {
    font-size: var(--fs-small);
  }

}