@charset "utf-8";
/* ==========================================================================
   BMTECH — 연혁 타임라인 (content/history.php PC·모바일 공용)
   원본: webdot-blueprints 03_about/history-timeline/_code/a2_ucube_history_year-group-diamond-timeline
   포팅: 좌측 연대 라벨(80px 배경 타이포) + 우측 연도 리스트 + 마름모 마커 세로 라인.
         IntersectionObserver 로 화면 진입 시 연대 라벨·연도·첫 마커 활성화.
   편차: ① .wd-history 상단 padding 130px 제거 — 페이지 셸(m_tit_wrap 마진)이 담당.
         ② 전환 0.4s ease-in-out → 사이트 규율 var(--bmt-transition)(0.3s ease).
         ③ 연도 숫자 폰트 → var(--bmt-font-num)(DM Sans) — 사이트 숫자 규율.
   ========================================================================== */

.wd-history {
  --wd-history-group-width: 590px;
  --wd-history-year-width: 110px;
  background: transparent;
  font-family: var(--bmt-font);
}

/* ── 연대 그룹 ──
   좌: 연대 라벨(590px) / 우: 연도 리스트. 라벨 쪽이 리스트보다 넓어서
   여백이 크게 남고, 그 여백이 80px 타이포를 배경처럼 보이게 한다 */
.wd-history__group {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.wd-history__group-tit-box { width: var(--wd-history-group-width); }

/* 기본이 20% 투명도라 '지나간 연대'로 읽히고,
   화면에 들어오면 100% 로 또렷해진다 (스크롤 활성화) */
.wd-history__group-tit {
  position: relative;
  bottom: 10px;
  /* 원본 80px — 페이지 대제목(역할 A, 64px)보다 커서 위계 역전. 그룹 라벨은
     대제목 아래·섹션 제목(B, 46px)급 이하로 (2026-08-26) */
  font-size: 40px;
  font-weight: 700;
  letter-spacing: var(--bmt-ls-display);
  color: rgba(0, 0, 0, 0.2);
  transition: var(--bmt-transition);
}
.wd-history__group-tit-box--active .wd-history__group-tit { color: rgba(0, 0, 0, 1); }

/* ── 연도 리스트 ── */
.wd-history__list {
  position: relative;
  width: calc(100% - var(--wd-history-group-width));
  padding-top: 10px;
}

/* 세로 라인 — 연도 컬럼(110px) 오른쪽 끝에 붙는다.
   bottom 을 음수로 빼서 그룹과 그룹 사이가 끊기지 않고 이어진다 */
.wd-history__list::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: -23px;
  left: var(--wd-history-year-width);
  width: 1px;
  background-color: var(--bmt-line-soft);
}
/* 마지막 그룹의 마지막 리스트는 라인을 끊어 준다 */
.wd-history__group:last-of-type .wd-history__list:last-of-type::before { bottom: 47px; }

.wd-history__item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-bottom: 55px;
}
.wd-history__group:last-of-type .wd-history__item:last-of-type { padding-bottom: 0; }

/* 연도도 활성화되면 브랜드색으로 바뀐다 */
.wd-history__year {
  position: relative;
  z-index: 1;
  width: var(--wd-history-year-width);
  font-family: var(--bmt-font-num);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--bmt-body);
  transition: var(--bmt-transition);
}
.wd-history__item--active .wd-history__year { color: var(--bmt-accent); }

.wd-history__month-box {
  position: relative;
  width: calc(100% - var(--wd-history-year-width));
}
.wd-history__month-item {
  position: relative;
  display: flex;
  padding-left: 30px;
  line-height: 1.4;
}

/* 월 표기가 있는 변형에서만 붙는 50px 컬럼 */
.wd-history__month {
  display: block;
  width: 50px;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--bmt-body);
}
.wd-history__txt-con { width: 100%; }
.wd-history__month + .wd-history__txt-con { width: calc(100% - 50px); }

.wd-history__txt {
  margin-bottom: 17px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: -0.03em;
  color: var(--bmt-body);
  word-break: keep-all;
}
.wd-history__txt:last-of-type { margin-bottom: 0; }

/* ── 마름모 마커 ──
   원이 아니라 clip-path 로 깎은 마름모다. 항목마다 하나씩 붙어
   세로 라인 위에 촘촘히 박히면서 리스트에 리듬을 준다 */
.wd-history__txt--only {
  position: relative;
  padding-left: 26px;
}
.wd-history__txt--only::before {
  content: '';
  position: absolute;
  left: -34.3px;
  top: 11.44px;
  width: 10px;
  height: 10px;
  background-color: var(--bmt-line);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 연도의 첫 항목만 더 크고 진한 마름모 — 연도 시작점을 표시한다.
   clip-path 는 위 규칙에서 상속되고 크기·색·위치만 덮어쓴다 */
.wd-history__txt--only:first-child::before {
  width: 15px;
  height: 15px;
  left: -36.5px;
  top: 9px;
  background-color: var(--bmt-body);
  transition: var(--bmt-transition);
}
.wd-history__item--active .wd-history__txt--only:first-child::before {
  background-color: var(--bmt-accent);
}

/* ==========================================================
   Responsive — 원본 브레이크포인트 800
   좌우 2단을 위아래로 푼다. 연대 라벨이 리스트 위에 올라앉는다
   ========================================================== */
@media screen and (max-width: 800px) {
  .wd-history__group { display: block; margin-top: 80px; }
  .wd-history__group:first-of-type { margin-top: 0; }

  .wd-history__group-tit-box { width: auto; margin-bottom: 20px; }
  .wd-history__group-tit { font-size: 34px; }

  .wd-history__list { width: 100%; }
  .wd-history__item { padding-bottom: 40px; }
  .wd-history__group-tit-box + .wd-history__list .wd-history__item:last-of-type { padding-bottom: 0; }
}

@media screen and (max-width: 480px) {
  .wd-history { --wd-history-year-width: 70px; }
  .wd-history__group-tit { font-size: 28px; }
  .wd-history__year { font-size: 20px; }
  .wd-history__txt { font-size: 15px; margin-bottom: 12px; }
  .wd-history__month-item { padding-left: 20px; }
  .wd-history__txt--only { padding-left: 18px; }
}