/* ==========================================================================
   회사소개 > 연혁 (company/history.php)
   - 비주얼은 about.css 그대로 (.public-director-visual), 제목은 메인 FEATURE 제목(.aw-strengths__*, common.css 12)
   - 동작: assets/js/main.js initHistoryTimeline (세로선 채움 · 점 켜짐 · 글자 또렷해짐), initStoryReveal (사진·글 등장)
   1. 하위 메뉴 탭 (.aw-company-tab) — common.css 16 으로 옮김 (제품소개 페이지도 사용)
   2. 연혁 타임라인 (.aw-history)
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. 연혁 타임라인
      - PC: 가운데 세로선(.aw-history__line) 기준으로 사진 · 연혁이 좌우로 엇갈림
      - 세로선 채움(.aw-history__bar 높이) · 점 켜짐(.is-active) · 글자 투명도는 main.js 가 스크롤에 맞춰 지정
      - 1023px 이하: 세로선 · 점 숨김, 사진 위 · 글 아래 한 줄
   -------------------------------------------------------------------------- */
.fidelity .aw-history {
  padding: clamp(80px, 8vw, 160px) 0 clamp(100px, 10vw, 200px);
}

.fidelity .aw-history__inner {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 80px); /* 오른쪽 빠른 메뉴와 겹치지 않도록 */
}

/* 제목 — 한글이라 Marcellus 대신 Noto Serif KR (about OUR BUSINESS 제목과 같음) */
.fidelity .aw-history__title {
  font-family: "Noto Serif KR", serif;
  letter-spacing: -0.02em;
}

.fidelity .aw-history__list {
  position: relative;
  margin-top: clamp(16px, 2vw, 40px);
}

/* 가운데 세로선 (회색 바탕 + 나무색 채움) */
.fidelity .aw-history__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-border);
  transform: translateX(-50%);
}

.fidelity .aw-history__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--color-secondary);
}

.fidelity .aw-history__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(80px, 8vw, 160px);
}

.fidelity .aw-history__item + .aw-history__item {
  margin-top: clamp(80px, 8vw, 160px);
}

/* 홀수 항목: 글 왼쪽 · 사진 오른쪽 / 짝수 항목: 사진 왼쪽 · 글 오른쪽 (참고 사이트와 같은 순서) */
.fidelity .aw-history__item:nth-of-type(odd) {
  flex-direction: row-reverse;
}

.fidelity .aw-history__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 668 / 428;
  background: var(--color-primary);
}

.fidelity .aw-history__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

/* 세로선 위의 점 — 지나가면 커지며 나무색 + 옅은 테두리 */
.fidelity .aw-history__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fidelity .aw-history__dot.is-active {
  width: 18px;
  height: 18px;
  border: 4px solid rgb(var(--color-secondary-rgb) / 0.35);
  background: var(--color-secondary);
  background-clip: padding-box;
}

.fidelity .aw-history__desc {
  flex: 1 1 0;
  min-width: 0;
}

.fidelity .aw-history__label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgb(var(--color-secondary-rgb) / 0.12);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-secondary);
}

.fidelity .aw-history__year {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(32px, 1.4vw + 22px, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.fidelity .aw-history__events {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-history__events li {
  position: relative;
  display: flex;
  gap: 12px;
  padding-left: 16px;
  font-family: var(--font-base);
  font-size: clamp(15px, 0.2vw + 13px, 17px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

/* 앞쪽 짧은 가로선 */
.fidelity .aw-history__events li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: var(--color-text-secondary);
}

.fidelity .aw-history__events li + li {
  margin-top: 6px;
}

/* 연월 (2003. 03) — 숫자 폭 고정 */
.fidelity .aw-history__events time {
  flex: none;
  min-width: 4.6em;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .fidelity .aw-history__line,
  .fidelity .aw-history__dot {
    display: none;
  }

  .fidelity .aw-history__item,
  .fidelity .aw-history__item:nth-of-type(odd) {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .fidelity .aw-history__item + .aw-history__item {
    margin-top: 56px;
  }

  .fidelity .aw-history__media,
  .fidelity .aw-history__desc {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .fidelity .aw-history__label {
    margin-bottom: 14px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .fidelity .aw-history__events time {
    min-width: 4.4em;
  }
}