/* ============================================================
   주요 연혁 (회사소개)
   · 공통 제목 · 여백은 ../research/research.css 를 씀
   · 대웅제약 연혁 모션을 그대로 옮김
     - 시대 배너: 화면 70% 에 닿으면 기간 글자가 크게 떠올랐다 작아지고, 제목이 올라오고, 사진 확대 · 흐림이 풀림
     - 왼쪽 연도: 앞 두 자리는 고정, 뒤 두 자리가 슬롯처럼 굴러감 (화면 가운데에 붙어 있음)
     - 오른쪽 항목: 화면 가운데를 지나는 연도만 진하게 + 점이 링으로 / 연도 사이사이 사진
     - 아래 시대 탭: 연혁 구간에서만 화면 아래 고정
   ============================================================ */
/* 마무리 사진 띠가 없어 푸터 위 여백을 따로 둠 */
.hs-body .r-main { padding-bottom: 140px; }
/* 페이지 제목 자리에 헤드라인 (한 줄) */
.hs-title { line-height: 1.35; }
.hs-title b { color: var(--r-g); }

/* ---------- 공통 — 연혁 한 건 ---------- */
.hs-ev + .hs-ev { margin-top: 28px; }
.hs-ev__ttl { font-size: 22px; font-weight: 700; line-height: 1.45; color: var(--r-ink); word-break: keep-all; }
.hs-ev__txt { margin-top: 8px; font-size: 18px; line-height: 1.7; color: var(--r-txt); word-break: keep-all; }
/* 수상 · 인증 표시 — 진한 면 + 아이콘으로 강조 (수상: 초록 · 트로피 / 인증: 진초록 · 인증 마크) */
.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  margin-right: 12px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--r-g);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  vertical-align: 3px;
}
.hs-badge::before { font-family: "Material Symbols Rounded"; font-size: 19px; font-weight: 400; line-height: 1; font-variation-settings: "FILL" 1; }
.hs-badge--award::before { content: "emoji_events"; }
.hs-badge--cert { background: var(--r-gd); }
.hs-badge--cert::before { content: "verified"; }
/* ---------- 연혁 ---------- */
.hsa { padding-top: 120px; }
.hsa-era + .hsa-era { margin-top: 0; }

/* 시대 배너 — 처음엔 사진이 1.5배 확대 + 흐림, 글자는 숨김 → .is-play 가 붙으면 순서대로 풀림 */
.hsa-banner { position: relative; height: 300px; border-radius: 24px; overflow: hidden; background: #22302a; isolation: isolate; }
.hsa-banner > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transition: transform 0.8s ease 1.4s; }
.hsa-banner__dim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.01); -webkit-backdrop-filter: blur(60px); backdrop-filter: blur(60px); transition: opacity 0.8s ease 1.6s; }
.hsa-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 20, 14, 0.6) 0%, rgba(8, 20, 14, 0.3) 55%, rgba(8, 20, 14, 0.05) 100%); pointer-events: none; }
.hsa-banner__txt { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; padding: 0 96px; color: #fff; }
.hsa-banner__period {
  font-size: clamp(48px, 5.13vw, 98px);
  font-weight: 900;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), font-size 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.hsa-banner__ttl {
  font-size: clamp(32px, 3.2vw, 56px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #f8f8f8;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s, transform 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s;
}
.hsa-banner.is-play > img { transform: scale(1); }
.hsa-banner.is-play .hsa-banner__dim { opacity: 0; }
.hsa-banner.is-play .hsa-banner__period { font-size: clamp(24px, 2.05vw, 40px); opacity: 1; transform: none; }
.hsa-banner.is-play .hsa-banner__ttl { opacity: 1; transform: none; }

/* 본문 — 왼쪽 연도 슬롯 + 오른쪽 목록 */
.hsa-body { display: flex; align-items: flex-start; gap: 24px; padding: 140px 0 0; margin-bottom: 140px; }

/* 왼쪽 연도 — 화면에 붙어 있고, 뒤 두 자리 목록이 한 칸(글자 2배 높이)씩 위로 굴러감 */
/* 화면 가운데(지금 연도 항목이 지나는 줄)에 붙음 — 지나간 연도는 한 칸만 흐리게 보이고 그 위는 잘라 배너와 겹치지 않게 */
.hsa-years { position: sticky; top: calc(50vh - 40px); display: flex; flex: none; width: 300px; font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: -1.6px; color: var(--r-ink); }
.hsa-years__win { height: 80px; clip-path: inset(-160px -40px -1000px -40px); }
.hsa-years__list { display: flex; flex-direction: column; gap: 80px; list-style: none; transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
.hsa-years__list li { color: #e9e9e9; transition: color 0.3s; }
.hsa-years__list li.is-current { color: var(--r-ink); }

/* 오른쪽 목록 — 세로선 · 점, 지금 연도만 진하게 */
.hsa-list { position: relative; display: flex; flex-direction: column; gap: 80px; flex: 1; min-width: 0; margin: 20px 0; padding-left: 120px; }
.hsa-list::before { content: ""; position: absolute; top: 0; left: 11.5px; width: 1px; height: 100%; background: var(--r-g); }
.hsa-year { position: relative; }
.hsa-year::before { content: ""; position: absolute; top: 4px; left: -116px; width: 16px; height: 16px; border-radius: 50%; background: var(--r-g); box-sizing: border-box; }
.hsa-year.is-current::before { top: 0; left: -120px; width: 24px; height: 24px; border: 6px solid var(--r-g); background: #fff; }
.hsa-year .hs-ev__ttl,
.hsa-year .hs-ev__txt { color: #d9d9d9; transition: color 0.3s; }
.hsa-year .hs-badge { opacity: 0.45; transition: opacity 0.3s; }
.hsa-year .hs-photo { opacity: 0.35; transition: opacity 0.3s; }
.hsa-year.is-current .hs-ev__ttl { color: var(--r-ink); }
.hsa-year.is-current .hs-ev__txt { color: var(--r-txt); }
.hsa-year.is-current .hs-badge,
.hsa-year.is-current .hs-photo { opacity: 1; }
/* 항목마다 앞에 점 */
.hsa-year .hs-ev { position: relative; padding-left: 30px; }
.hsa-year .hs-ev::before { content: ""; position: absolute; top: 14px; left: 10px; width: 5px; height: 5px; border-radius: 50%; background: #d9d9d9; transition: background-color 0.3s; }
.hsa-year.is-current .hs-ev::before { background: var(--r-ink); }
.hsa-year .hs-photo { margin-left: 30px; }.hsa-year__no { display: none; font-size: 24px; font-weight: 800; color: var(--r-g); }

/* 아래 시대 탭 — 연혁 구간 동안만 화면 아래 고정, 벗어나면 제자리(목록 끝)에 놓임 */
.hsa-tab-space { height: 76px; }
.hsa-tab { position: relative; z-index: 50; width: 100%; height: 76px; border-top: 1px solid #e9e9e9; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transform: translateY(3vw); transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; }
.hsa-tab.is-ready { opacity: 1; transform: none; }
.hsa-tab.is-fixed { position: fixed; left: 0; bottom: 0; }
.hsa-tab__list { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 40px; list-style: none; }
.hsa-tab__list button { min-width: 140px; border: 0; background: none; font: inherit; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.48px; color: #acacac; cursor: pointer; transition: all 0.3s ease; }
.hsa-tab__list button.is-active { font-size: 28px; letter-spacing: -0.56px; color: var(--r-g); }

@media (prefers-reduced-motion: reduce) {
  .hsa-banner > img, .hsa-banner__dim, .hsa-banner__period, .hsa-banner__ttl, .hsa-years__list, .hsa-tab { transition: none; }
}
/* ---------- 연도 사이 사진 ---------- */
.hs-photo { max-width: 720px; margin-top: 28px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--r-soft); }
.hs-photo img { width: 100%; height: 100%; object-fit: cover; }
.hs-photo + .hs-ev { margin-top: 28px; }

@media (max-width: 1920px) {
  .hs-body .r-main { padding-bottom: 120px; }
  .hsa { padding-top: 100px; }
  .hsa-body { padding-top: 120px; margin-bottom: 120px; }
  .hsa-years { top: calc(50vh - 36px); width: 260px; font-size: 72px; }
  .hsa-years__win { height: 72px; clip-path: inset(-144px -40px -1000px -40px); }
  .hsa-years__list { gap: 72px; }
  .hsa-list { padding-left: 96px; }
  .hsa-year::before { left: -92px; }
  .hsa-year.is-current::before { left: -96px; }
}
@media (max-width: 1024px) {
  .hs-body .r-main { padding-bottom: 80px; }
  .hs-ev + .hs-ev { margin-top: 20px; }
  .hs-ev__ttl { font-size: 18px; }
  .hs-ev__txt { margin-top: 6px; font-size: 15px; }
  .hs-badge { gap: 3px; height: 26px; margin-right: 8px; padding: 0 10px 0 7px; font-size: 12.5px; vertical-align: 2px; }
  .hs-badge::before { font-size: 15px; }

  .hsa { padding-top: 56px; }
  .hsa-banner { height: 58vw; max-height: 300px; border-radius: 16px; }
  /* 네 장 모두 인물·건물 같은 피사체가 오른쪽에 있습니다.
     세로로 자르면 가운데만 남아 피사체가 밀려나므로 오른쪽으로 당겨 옵니다. */
  .hsa-banner > img { object-position: 85% center; }
  .hsa-banner__txt { padding: 0 24px; }
  .hsa-banner__period { font-size: 13vw; }
  .hsa-banner.is-play .hsa-banner__period { font-size: clamp(22px, 6vw, 32px); }
  .hsa-banner__ttl { font-size: clamp(20px, 5.8vw, 30px); }
  .hsa-body { display: block; padding-top: 48px; margin-bottom: 64px; }
  .hsa-years { display: none; }
  .hsa-list { gap: 44px; margin: 0; padding-left: 28px; }
  .hsa-list::before { top: 10px; left: 6px; }
  .hsa-year::before,
  .hsa-year.is-current::before { top: 8px; left: -28px; width: 13px; height: 13px; border: 0; background: var(--r-g); }
  .hsa-year .hs-ev__ttl { color: var(--r-ink); }
  .hsa-year .hs-ev__txt { color: var(--r-txt); }
  .hsa-year .hs-badge, .hsa-year .hs-photo { opacity: 1; }
  .hsa-year__no { display: block; margin-bottom: 8px; font-size: 22px; }
  .hsa-year .hs-ev { padding-left: 18px; }
  .hsa-year .hs-ev::before { top: 11px; left: 4px; background: var(--r-ink); }
  .hsa-year .hs-photo { margin-left: 18px; }
  .hs-photo { margin-top: 18px; border-radius: 14px; }
  .hsa-tab-space, .hsa-tab { height: 64px; }
  .hsa-tab__list { justify-content: flex-start; gap: 28px; padding: 0 20px; overflow-x: auto; }
  .hsa-tab__list button { min-width: 0; font-size: 17px; white-space: nowrap; }
  .hsa-tab__list button.is-active { font-size: 19px; }
}

/* ===== 연혁 모바일 — 대웅제약 수치 (430px 기준 vw 환산) ====================
     시대 배너 높이      88.84vw → 382px
     배너 안쪽 여백      16.98vw / 6.98vw → 73px / 30px
     배너 연도           13.02vw → 56px
     배너 제목            9.30vw → 40px
     연도 ↔ 제목           2.09vw → 9px
     연표 연도            7.44vw → 32px
     하단 시대 탭 바     18.60vw → 80px, 글자 4.65vw / 5.58vw → 20px / 24px
   모서리 반경만 우리 값(16px)을 유지합니다. 대웅은 8px 인데
   사이트 다른 사진이 전부 16~18px 이라 그쪽에 맞췄습니다. */
@media (max-width: 1024px) {
  .hsa-banner { height: 88.84vw; max-height: 382px; }
  .hsa-banner__txt {
    gap: clamp(6px, 2.09vw, 9px);
    /* 글자를 사진 한가운데에 */
    padding: 0 clamp(22px, 6.98vw, 30px);
    justify-content: center;
  }
  .hsa-banner__period { font-size: 13vw; }
  .hsa-banner.is-play .hsa-banner__period { font-size: clamp(16px, 4.8vw, 24px); }
  .hsa-banner__ttl { font-size: clamp(28px, 9.3vw, 40px); line-height: 1.3; }

  .hsa-year__no { margin-bottom: clamp(12px, 3.72vw, 16px); font-size: clamp(24px, 7.44vw, 32px); }

  .hsa-tab-space,
  .hsa-tab { height: clamp(64px, 18.6vw, 80px); }
  .hsa-tab__list button { font-size: clamp(17px, 4.65vw, 20px); }
  .hsa-tab__list button.is-active { font-size: clamp(19px, 5.58vw, 24px); }
}

/* 태블릿 (601~1024) */
@media (min-width: 601px) and (max-width: 1024px) {
  .hs-badge { height: 28px; font-size: 14px; }
  .hs-badge::before { font-size: 17px; }
  .hsa-year__no { font-size: 36px; }
  .hsa-tab__list button { font-size: 22px; }
  .hsa-tab__list button.is-active { font-size: 26px; }
}

/* ===== 휴대폰 — 모서리 둥글기를 한 단계 줄임 =============================
   화면이 작아지면 같은 반지름도 상대적으로 더 둥글어 보입니다.
   24→18 · 20→16 · 18→14 · 16→13 · 14→12 · 12→10 · 10→8 로 한 단계씩.
   태블릿(601px 이상)과 PC 는 그대로입니다. */@media (max-width: 600px) {
  .hsa-banner { border-radius: 13px; }
  .hs-photo { border-radius: 12px; }
}

/* ===== 본문은 휴대폰 · 태블릿에서 최소 16px ==============================
   읽는 글(문장)이 15px 이하로 내려가 있던 곳을 16px 로 올립니다.
   분류 · 번호 · 안내문 같은 '라벨'은 본문이 아니라 그대로 둡니다. */@media (max-width: 1024px) {
  .hs-ev__txt { font-size: 16px; line-height: 1.6; }
}

/* 시대 필터 — 글자만 누를 수 있어 높이가 20px 뿐이었습니다.
   보이는 글자는 그대로 두고, 버튼이 막대(64~80px) 전체 높이를 차지하게 합니다. */
@media (max-width: 1024px) {
  /* 막대 안에서 글자를 감싸는 것은 <li> 입니다. li 를 먼저 늘려야 합니다. */
  .hsa-tab__list > li {
    align-self: stretch;
    display: flex;
  }
  .hsa-tab__list button {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    margin: 0 -8px;
  }
}