/* 연혁 — 피그마 5:280 (헤더·서브비주얼·LNB·푸터 제외) */

body:has(#ctt.kl-history-page) #ctt_himg {
  display: none !important;
}

#ctt.kl-history-page {
  font-family: "Pretendard", sans-serif;
}

/* 스크롤 reveal (content.skin.php 인라인 제거) */
#ctt.kl-history-page .reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ctt.kl-history-page .reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  #ctt.kl-history-page .rev-delay-100 {
    transition-delay: 100ms;
  }

  #ctt.kl-history-page .rev-delay-200 {
    transition-delay: 200ms;
  }

  #ctt.kl-history-page .rev-delay-300 {
    transition-delay: 300ms;
  }
}

@media (max-width: 1023px) {
  #ctt.kl-history-page .reveal-up {
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  #ctt.kl-history-page .rev-delay-100 {
    transition-delay: 50ms !important;
  }

  #ctt.kl-history-page .rev-delay-200 {
    transition-delay: 100ms !important;
  }

  #ctt.kl-history-page .rev-delay-300 {
    transition-delay: 150ms !important;
  }
}

/* 타임라인: 연도·도트·텍스트 세로 중앙 정렬, 도트와 라인을 포함하는 트랙 구조 */
#ctt.kl-history-page .kl-history-list {
  --kl-history-line: 2.5rem;
  --kl-history-dot-top: 10.5px; /* (21px height / 2) */
}

@media (min-width: 640px) {
  #ctt.kl-history-page .kl-history-list {
    --kl-history-line: 4rem;
    --kl-history-dot-top: 12px; /* (24px height / 2) */
  }
}

@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-list {
    --kl-history-line: 8rem;
    --kl-history-dot-top: 22.5px; /* (45px height / 2) */
  }

  #ctt.kl-history-page .kl-history-item--gap-tall {
    --kl-history-line: 11rem;
  }
}

#ctt.kl-history-page .kl-history-item {
  position: relative;
  display: flex;
  align-items: stretch;
  column-gap: 0.5rem;
  margin: 0;
  padding: 0;
  padding-bottom: var(--kl-history-line);
}

#ctt.kl-history-page .kl-history-item:last-child {
  padding-bottom: 0;
}

#ctt.kl-history-page .kl-history-item--stack {
  /* No special stack alignment needed because we use height 45px rows */
}

@media (min-width: 640px) {
  #ctt.kl-history-page .kl-history-item {
    column-gap: 0.75rem;
  }
}

@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-item {
    column-gap: 1rem;
  }
}

#ctt.kl-history-page .kl-history-year {
  flex-shrink: 0;
  width: 3.5rem;
  text-align: right;
}

@media (min-width: 640px) {
  #ctt.kl-history-page .kl-history-year {
    width: 5rem;
  }
}

@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-year {
    width: 7.5rem;
  }
}

#ctt.kl-history-page .kl-history-body {
  flex: 1 1 0%;
  min-width: 0;
}

#ctt.kl-history-page .kl-history-track {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 2.25rem;
  position: relative;
}

@media (min-width: 640px) {
  #ctt.kl-history-page .kl-history-track {
    width: 3.5rem;
  }
}

@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-track {
    width: 6.5rem;
  }
}

/* 동적 세로 앵커 클래스 (모바일/태블릿/PC 연동) */
#ctt.kl-history-page .kl-history-anchor {
  display: flex;
  align-items: center;
  height: 21px;
}
@media (min-width: 640px) {
  #ctt.kl-history-page .kl-history-anchor {
    height: 24px;
  }
}
@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-anchor {
    height: 45px;
  }
}

/* 월 기둥 가로폭 조정 */
#ctt.kl-history-page .kl-history-month-wrap {
  width: 1.5rem;
  flex-shrink: 0;
  text-align: right;
}
@media (min-width: 640px) {
  #ctt.kl-history-page .kl-history-month-wrap {
    width: 2rem;
  }
}
@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-month-wrap {
    width: 2.5rem;
  }
}

#ctt.kl-history-page .kl-history-dot {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid #00669d;
  background-color: #00669d;
}

@media (min-width: 640px) {
  #ctt.kl-history-page .kl-history-dot {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-dot {
    width: 20px;
    height: 20px;
  }
}

#ctt.kl-history-page .kl-history-dot--outline {
  background-color: #fff;
}

/* 기간 탭 — 피그마: 활성 #00669d / 비활성 #e4e4e4 · 44px 높이 */
#ctt.kl-history-page .kl-history-tab {
  border: none;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

#ctt.kl-history-page .kl-history-tab:hover:not(.kl-history-tab--active) {
  background-color: #dadada;
}

#ctt.kl-history-page .kl-history-tab:focus-visible {
  outline: 2px solid #00669d;
  outline-offset: 2px;
}

#ctt.kl-history-page .kl-history-tab--active {
  background-color: #00669d;
  color: #fff;
}

/* 페이지 하단 배경 (histroy_bg.png) */
#ctt.kl-history-page .kl-history-page-bottom-bg {
  min-height: 135px;
  background-image: url("../../../img/sub/histroy_bg.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 50% auto;
}

@media (min-width: 1024px) {
  #ctt.kl-history-page .kl-history-page-bottom-bg {
     min-height: 135px;
  }
}