/* 050102.css — 연혁
   수치는 design/050102_연혁.svg(1920×3213) 를 브라우저 렌더한 픽셀 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다. */

/* 히어로 끝 503 → 필터 584 (상 81) / 마지막 행 끝 2851 → 푸터 3014 (하 163) */
.history-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 163px;
}

/* ── 필터 : 탭(높이 44)과 셀렉트(높이 52)는 위쪽 584 로 정렬 (050305 와 동일 구조) ── */
.history-filter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.history-tabs {
  display: flex;
  gap: 17px; /* 활성 탭 384~509 → 다음 탭 텍스트 542 */
}

.history-tab {
  width: 125px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.25px; /* "2014-2005" 잉크폭 88 */
  color: var(--color-text-sub);
  white-space: nowrap;
}

/* 활성 탭 : rect 125×44 rx20, fill #1740C4 10% */
.history-tab--active {
  background: var(--color-tag-bg);
  font-weight: 700;
  color: var(--color-primary);
}

/* 셀렉트 : stroke rect 279×51 rx7.5 → 280×52, radius 8 */
.year-select {
  position: relative;
  width: 280px;
  flex: none;
}

.year-select__btn {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-muted);
}

.year-select__btn--picked {
  color: var(--color-text);
}

.year-select__arrow {
  transition: transform .2s ease;
}

.year-select[data-open="true"] .year-select__arrow {
  transform: rotate(180deg);
}

.year-select__panel {
  position: absolute;
  top: 60px;
  left: 0;
  width: 280px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  border: 1px solid var(--color-card-line);
  border-radius: 8px;
  background: var(--color-bg);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.04);
  z-index: 20;
  display: none;
}

.year-select[data-open="true"] .year-select__panel {
  display: block;
}

.year-select__option {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1;
  text-align: left;
  color: var(--color-text-sub);
}

.year-select__option:hover {
  background: #f7f8fd;
}

.year-select__option--active {
  background: #f2f3fc;
  color: var(--color-primary);
}

/* ══ 타임라인 ══════════════════════════════════════════════
   점 cx392(=콘텐츠 좌단 384 + 8) / 세로선 x391 폭 2 / 연도 425 / 월 601 / 내용 648.
   연도 블록 사이 간격은 전부 74 (연도 잉크 기준 82) 로 일정하다.            */
.history-timeline {
  margin-top: 47px; /* 셀렉트 끝 636 → 연도 블록 상단 683 */
}

.history-year {
  position: relative;
  display: flex;
  padding-left: 40px; /* 연도 라벨 박스 424 → 잉크 425 */
  animation: history-year-in .45s ease;
}

@keyframes history-year-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.history-year + .history-year {
  margin-top: 74px;
}

.history-year[hidden] + .history-year {
  margin-top: 0;
}

/* 세로선은 이 블록의 점에서 다음 블록의 점까지 잇는다 (마지막 블록은 긋지 않는다) */
.history-year:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 17px;
  width: 2px;
  height: calc(100% + 74px);
  background: var(--color-card-line);
}

.history-year--last::after {
  display: none;
}

/* circle r7 + white stroke 2 → 바깥 16, 안쪽 채움 14 */
.history-year__dot {
  position: absolute;
  left: 0;
  top: 9px;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: var(--color-text);
}

/* 라벨 폭 177 = 월 열 시작(601) - 라벨 박스 시작(424) */
.history-year__label {
  flex: none;
  width: 177px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.history-list {
  flex: 1;
  margin-top: 4px; /* 연도 잉크 687 / 첫 행 잉크 688~689 */
}

.history-item {
  display: flex;
  line-height: 20px;
}

/* 행 피치는 시안이 연도 블록마다 다르다 (실측 46 / 42 / 38).
   기본 42, 나머지는 modifier 로 맞춘다. 데이터 연동 시 한 값으로 통일해도 무방하다 */
.history-item + .history-item {
  margin-top: 22px;
}

.history-year--gap46 .history-item + .history-item {
  margin-top: 26px;
}

.history-year--gap38 .history-item + .history-item {
  margin-top: 18px;
}

/* 월 열 폭 47 = 내용 열 시작(648) - 월 열 시작(601) */
.history-item__month {
  flex: none;
  width: 47px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--color-primary);
}

.history-item__desc {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.3px; /* 시안 잉크폭 324 / 188 / 608 에 맞춘 값 */
  color: var(--color-text);
}

/* 탭·연도 필터로 감춘 블록 */
.history-year[hidden] {
  display: none;
}

/* ── 태블릿 ─────────────────────────────────────────────────
   모바일 시안이 없다. 1단 축소 + 좌우 20 규칙을 따른다 */
@media (max-width: 1023px) {
  .history-section__inner {
    padding: 64px var(--gutter-mo);
  }

  .history-timeline {
    margin-top: 40px;
  }

  .history-year + .history-year {
    margin-top: 56px;
  }

  .history-year:not(:last-child)::after {
    height: calc(100% + 56px);
  }

  .history-year__label {
    width: 128px;
  }

  /* 폭이 좁아 내용이 두 줄로 흐르므로 줄간격을 준다 */
  .history-item {
    line-height: 30px;
  }

  .history-list {
    margin-top: 0;
  }

  .history-item + .history-item,
  .history-year--gap46 .history-item + .history-item,
  .history-year--gap38 .history-item + .history-item {
    margin-top: 12px;
  }
}

/* ── 모바일 : 연도를 내용 위로 올려 1단으로 흘린다 ── */
@media (max-width: 767px) {
  .history-section__inner {
    padding: 48px var(--gutter-mo);
  }

  .history-filter {
    display: block;
  }

  /* 375 에서도 3개가 한 줄에 들어가야 한다 (94×3 + gap 12 = 294) */
  .history-tabs {
    gap: 6px;
  }

  .history-tab {
    height: 40px;
    padding: 0 10px;
    font-size: 14px;
  }

  .year-select {
    width: 100%;
    margin-top: 16px;
  }

  .year-select__panel {
    width: 100%;
  }

  .history-year {
    display: block;
    padding-left: 28px;
  }

  .history-year + .history-year {
    margin-top: 40px;
  }

  .history-year:not(:last-child)::after {
    left: 5px;
    height: calc(100% + 40px);
  }

  .history-year__dot {
    top: 6px;
  }

  .history-year__label {
    display: block;
    width: auto;
    font-size: 26px;
  }

  .history-list {
    margin-top: 14px;
  }

  .history-item {
    line-height: 26px;
    word-break: keep-all;
  }

  .history-item__month {
    width: 36px;
    font-size: 16px;
  }

  .history-item__desc {
    font-size: 15px;
  }
}