/* 연혁 /history — Figma 260120_2025 내용 업데이트 > 연혁 (1:56869 / 1:58459) */

/* ── 히어로 ── */
.history-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 380px;
  padding: 120px 36px 160px;
  background: #0e64d3;
}
.history-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 1080px;
}
.history-hero-label,
.history-hero-title {
  margin: 0;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: pre;
}
.history-hero-label { font-size: 32px; line-height: 130%; }
.history-hero-title { font-size: 44px; line-height: 140%; }
/* 캐릭터가 얹힌 흰 사선. Framer 처럼 오른쪽 아래에 고정하고 남는 쪽은 잘린다 */
.history-hero-wave {
  position: absolute;
  z-index: 1;
  right: -372px;
  bottom: 0;
  width: 1921px;
  height: auto;
  aspect-ratio: 10.3253; /* Framer 값 그대로 — 186px 로 반올림하면 1200–1919 에서 히어로 아래 1px 파란 줄이 비친다 */
  max-width: none;
  object-fit: cover;
}

/* ── 연도별 타임라인 ── */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 60px 200px;
}
.year {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* 깃발 + 연도, 아래 2px 검정 선 */
.year-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1px;
  padding-bottom: 9px;
  border-bottom: 2px solid #000;
  color: #000;
  font-size: 48px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.02em;
}
.stamp { flex: none; width: 43px; height: 50px; margin: 0 0.5px; }
.year.old .stamp { height: 51px; }
.year-body {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.year-body > hr {
  height: 2px;
  margin: 1px 0;
  border: 0;
  border-radius: 1px;
  background: #dcdcde;
}
.cat {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-left: 24px;
}
.cat-app { padding-bottom: 24px; }
.cat-title {
  margin: 0;
  color: #000;
  font-size: 26px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.02em;
}
.entries {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}
/* 카테고리 없는 해(2023 이전)는 목록이 바로 온다 */
.year-body > .entries { padding: 0 0 0 24px; }

/* 월 | 내용. Framer 원본이 행마다 월 정렬이 달라서 그대로 옮겼다:
   기본 = 세로 가운데, .top = 위 맞춤, .pad = 위 맞춤 + 월 2px 내림 */
.entry {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}
.entry.top,
.entry.pad { align-items: flex-start; }
.entry.pad .month { padding-top: 2px; }
.month {
  flex: none;
  width: 50px;
  color: #020202;
  font-size: 20px;
  font-weight: 600;
  line-height: 130%;
}
.items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.item {
  margin: 0;
  color: #3e3e44;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.02em;
  white-space: pre-wrap;
  word-break: break-word;
}
.item:has(.more) {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.more {
  flex: none;
  color: #0e64d3;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: pre; /* 원본 문구 앞 공백(" 기사보기>")까지 살린다 */
}
/* 라이브가 모바일에서만 다른 문구·링크 없는 글자를 보여 준다 — 그대로 옮겼다 */
.only-m { display: none; }
.photo { display: block; max-width: 100%; height: 335px; object-fit: contain; }
.photo.bbc { width: 335px; margin: -4px 0 4px; }
.photo.wide { width: 628px; margin-top: 4px; }

/* ── ≥1920: 본문 폭 1200 (Framer 의 1920 구간) ── */
@media (min-width: 1920px) {
  .history-hero { padding-top: 132px; }
  .history-hero-inner { max-width: 1200px; }
  .history-hero-title { font-size: 48px; }
  .history-hero-wave { bottom: -15px; right: 0; }
  .timeline { padding: 100px 0 200px; }
}

/* ── 태블릿 810–1199 ── */
@media (max-width: 1199.98px) {
  .history-hero { height: 319px; padding-top: 148px; }
  .history-hero-inner { max-width: none; }
  .history-hero-label { font-size: 24px; }
  .history-hero-title { font-size: 36px; }
  .history-hero-wave { bottom: -35px; right: -295px; transform: scale(0.8); transform-origin: 100% 100%; }
  .timeline { padding: 100px 0 150px; }
  .year { padding: 0 36px; }
  .cat:not(.cat-app),
  .year-body > .entries { padding-left: 0; }
}
/* 태블릿에서만 Framer 'fill': 문구가 남은 폭을 채우고(링크는 오른쪽 끝으로) 넘치면 줄바꿈 */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .entry.stretch { align-self: stretch; }
  .entry.stretch .items { flex: 1; }
  .item.fill { align-self: stretch; }
  .item.fill > span { flex: 1 1 0; contain: inline-size; }
}

/* ── 모바일 <810 ── */
@media (max-width: 809.98px) {
  .history-hero { height: 257px; padding: 80px 16px 160px; }
  .history-hero-inner { gap: 8px; }
  .history-hero-label { font-size: 14px; }
  .history-hero-title { font-size: 24px; }
  .history-hero-wave { bottom: -18px; right: -441px; width: 1239px; height: 120px; object-fit: contain; transform: none; }
  .timeline { padding: 60px 16px 80px; }
  .year { gap: 24px; padding: 0; }
  .year-title { font-size: 32px; }
  .stamp { width: 28px; height: 33px; margin: 0 2px; }
  .year.old .stamp { width: 32px; height: 38px; margin: 0; }
  .cat { gap: 24px; padding-left: 0; }
  .cat-title { font-size: 20px; }
  .entries { align-items: stretch; }
  .entry,
  .entry.top,
  .entry.pad { flex-direction: column; align-items: stretch; gap: 8px; }
  .entries.spaced .entry { gap: 16px; }
  .month { font-size: 18px; }
  .item { font-size: 16px; }
  .item:has(.more) { flex-direction: column; align-items: flex-start; }
  .more { font-size: 16px; color: #1d85ff; }
  .more.alt { color: #0e64d3; }
  .only-m { display: inline; }
  .hide-m { display: none; }
  .photo.bbc { width: 100%; }
  .photo.wide { width: 100%; height: auto; }
}