@charset "utf-8";

/* ============================================================
   회사소개 › 연혁
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI
         2048:671 (본문)  ·  2048:814 (구간 인디케이터)

   모든 치수는 calc(N * var(--u)). N 은 시안(1920) 원값 그대로다.
   --u 는 /gnb/gnb.css 가 정의한다.

   좌표 배치는 쓰지 않는다.
   시안이 절대좌표로 그려져 있어도, 여기서는 격자와 흐름으로 옮긴다 —
   항목 수가 바뀌어도 무너지지 않아야 하기 때문이다.
   대신 시안 좌표에서 뽑은 '간격'을 그대로 쓴다. 계산 근거는 각 규칙 옆에 적었다.
   ============================================================ */

/* 메인용으로 걸어 둔 스냅을 푼다 (인사말 페이지와 같다) */
html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  /* hidden 은 스크롤 컨테이너를 만들어 안쪽 sticky 를 깨뜨린다. clip 은 잘라내기만 한다 */
  overflow-x: clip;
}

.hist-page {
  /* ---------- 색 ----------
     시안 변수 그대로다. --color #135a9c / --black #222 / --gray #9f9f9f.
     #9f9f9f 는 style.css 에 --gray 로 이미 있어 그걸 쓴다. */
  --hist-point: #135a9c;      /* 활성 구간·진행선 채움 */
  --hist-ink:   #222;         /* 본문 글자 */
  --hist-track: #d9d9d9;      /* 진행선 바탕 */
  --hist-nav-bg: #f3f3f3;     /* 구간 칩 바탕 */

  /* ---------- 격자 ----------
     시안에서 왼쪽 사진은 x260, 오른쪽 연도는 x1047, 항목은 x1181 에 선다.
     선은 x960 — 화면 한가운데다.
     260 + 1400 = 1660 이고 그 가운데가 960 이므로,
     '폭 1400 을 가운데 두고 반씩 나눈 격자' 하나로 셋이 모두 맞는다. */
  --grid-w: 1400;
  --gutter: 40;

  /* 시안은 87 / 134 인데, 그만큼 비우면 항목 글이 들어갈 폭이 480 밖에 안 남아
     한 항목이 두 줄로 접히면서 목록이 세로로 길어진다. 좁혀서 폭을 51 벌어 준다 */
  --year-pad: 64;    /* 시안 87  (1047 - 960) */
  --year-col: 112;   /* 시안 134 (1181 - 1047) */

  /*
    사진은 시안 마스크(601 × 400)를 비율 그대로 85% 로 줄였다.

    왼쪽 칸(제목 102 + 간격 + 사진)이 오른쪽 연혁 목록보다 길면,
    목록이 끝난 뒤에도 사진이 계속되면서 화면 오른쪽 절반 —
    정작 보여 줘야 할 연혁이 있는 자리 — 이 빈 채로 지나간다.
    사진을 줄여 그 구간을 짧게 만든다.
      전  102 + 53 + 400 = 555   (2009–2012 목록 305 → 250 이 빈다)
      후  102 + 36 + 340 = 478   (              →  173 이 빈다)
  */
  /* 2026-09-10 확정 데이터로 항목이 32개가 되어 목록이 충분히 길어졌다. 사진을 한 단 되살린다 */
  --photo-w: 500;    /* 시안 601 */
  --photo-h: 332;    /* 시안 400 (비율 1.505 유지) */
  --radius:   35;    /* 히어로·사진 공통 (마스크 rect rx) */
}

/* ==================== 첫 화면 등장 ====================
   히어로·눈썹·제목은 /css/page-hero.css 가 맡는다 (서브 페이지 공용).
   여기서는 그 뒤를 이어 칩 줄이 올라온다. */
.js .hist-nav { animation: pageHeroRise .8s var(--flow-ease) .42s both; }

/* ==================== 히어로 ====================
   /css/page-hero.css 의 .page-hero 를 쓴다.
   이 페이지가 정하는 것은 화각(--hero-pos)·흑백(--hero-gray)·어둡기(--hero-dim) 뿐이고,
   그 값은 마크업에 인라인으로 적혀 있다. */

/* ==================== 구간 내비게이터 ==================== */
/*
  시안 2048:814 — 바탕 860 × 75 라운드 1000, 그 안에 210 × 60 칩 네 개가 빈틈없이 붙는다.
  (540 · 750 · 960 · 1170 → 4 × 210 = 840, 좌우 10 씩 남는다)

  시안에서는 히어로 아래 한 자리에 고정으로 그려져 있지만,
  '현위치 표시' 가 되려면 스크롤을 따라와야 하므로 상단에 붙인다.
  헤더가 숨었다 나타나므로 그 아래에 자리 잡는다.
*/
/*
  헤더는 맨 위에서만 보이므로(gnb.js), 칩 줄이 붙을 때는 그 자리가 비어 있다.
  헤더 높이만큼 내려 붙이면 그만큼 빈 띠가 남으므로 화면 맨 위에 붙인다.
*/
.hist-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  /*
    칩 줄은 표지(히어로)보다 아래 연혁에 붙어 있어야 '이 목록을 고르는 단추' 로 읽힌다.
    그래서 위는 좁게, 아래는 넓게 준다.
      히어로 아래  18 + 18 = 36
      연혁 위      30 + 44 = 74   (75px 제목은 글상자 위에 줄간격이 37 남으므로 눈에는 111)
  */
  padding: calc(18 * var(--u)) 0 calc(30 * var(--u));
  background: var(--color-white);
}

/* 폭을 860 으로 못 박지 않고 칩 개수에 맡긴다.
   칩 하나는 시안 그대로 210 이고, 좌우 10 이 남는다 —
   네 개면 10 + 4×210 + 10 = 860 으로 시안과 정확히 같아진다.
   지금은 구간이 셋이라 650 이 된다 (칩 자체 크기는 시안 그대로다). */
.hist-nav__track {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  padding: calc(7.5 * var(--u)) calc(10 * var(--u));
  border-radius: calc(1000 * var(--u));
  background: var(--hist-nav-bg);
}

.hist-nav__btn {
  flex: none;
  width: calc(210 * var(--u));
  height: calc(60 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 0;
  border-radius: calc(1000 * var(--u));
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: calc(23 * var(--u));
  letter-spacing: -.03em;            /* -0.69 / 23 */
  white-space: nowrap;
  color: var(--hist-ink);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.hist-nav__btn[aria-current="true"] {
  background: var(--hist-point);
  color: var(--color-white);
}
.hist-nav__btn:focus-visible {
  outline: 2px solid var(--hist-point);
  outline-offset: 3px;
}

/* ==================== 연혁 ==================== */
.hist {
  position: relative;
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: calc(44 * var(--u)) auto 0;
  /* 시안은 마지막 항목 뒤로 선을 252 더 끌고 가지만,
     구간 간격을 좁힌 지금은 그만큼이면 빈 선만 길게 남는다 */
  padding-bottom: calc(100 * var(--u));
}

/* ---------- 진행선 ----------
   시안 line SVG 그대로다.
     바탕  3 × 2371  #d9d9d9
     채움  3 × 355.9 #135a9c   ← 스크롤에 따라 늘어난다
     머리  지름 20.34 원       #135a9c
   선은 격자 한가운데(x960)에 선다. */
.hist__line {
  position: absolute;
  left: 50%;
  /* 선 머리(원)가 첫 연도의 점과 같은 자리에 오도록 맞춘다.
     따로 두면 점이 위아래로 두 개 찍힌 것처럼 보인다.
     (연도 점 중심 = 블록 위 16 + 반지름 4.5) */
  top: calc(20.5 * var(--u));
  bottom: 0;
  width: calc(3 * var(--u));
  transform: translateX(-50%);
  background: var(--hist-track);
  pointer-events: none;
}

.hist__line-fill {
  position: absolute;
  inset: 0;
  background: var(--hist-point);
  /* 위에서 아래로 자란다. 높이 대신 크기를 바꿔야 다시 그리지 않는다 */
  transform: scaleY(var(--hist-p, 0));
  transform-origin: top;
}

.hist__line-head {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(20.34 * var(--u));
  height: calc(20.34 * var(--u));
  border-radius: 50%;
  background: var(--hist-point);
  transform: translate(-50%, -50%);
}

/* ---------- 구간 ---------- */
.hist-period {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 경계가 곧 선의 위치다 */
}
/* 시안 구간 간격은 210 (1157 → 1931 → 2699). 처음엔 60 으로 좁혔는데 연혁이 너무 빨리 지나가고
   등장 모션이 보이기도 전에 넘어갔다 → 시안 쪽으로 되돌린다 (2026-09-10) */
.hist-period + .hist-period { margin-top: calc(160 * var(--u)); }

/* 왼쪽 — 큰 제목과 사진 */
.hist-period__head {
  /* 사진 폭에 맞춘 칸. 제목은 그 안에서 가운데 정렬된다 (시안 중심 560.5 = 사진 중심) */
  width: calc(var(--photo-w) * var(--u));
}

.hist-period__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--u));         /* 시안 21 */
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  /* 시안 75 는 한 구간이 화면을 통째로 차지하게 만든다.
     구간을 나누는 표지일 뿐이므로 한 단 낮춘다 — 40px(1440 기준)이면 충분히 크다 */
  font-size: calc(54 * var(--u));   /* 시안 75 */
  line-height: 1.36;
  letter-spacing: -.05em;           /* -3.75 / 75 */
  color: var(--hist-ink);
  transition: color .4s ease;
}
/* 한글은 같은 크기에서 더 커 보인다. 시안도 '현재' 만 한 단 줄여 뒀다 */
.hist-period__title .is-ko { font-size: calc(50 * var(--u)); }   /* 시안 70 */

/* 시안 Rectangle — 막대가 두 숫자 사이에 놓인다 (시안 23 × 7) */
.hist-period__dash {
  flex: none;
  width: calc(17 * var(--u));
  height: calc(5 * var(--u));
  background: var(--hist-ink);
  transition: background-color .4s ease;
}

/* 지금 보고 있는 구간은 제목도 함께 파랗게 (시안 2048:812 가 그 상태다) */
.hist-period.is-current .hist-period__title { color: var(--hist-point); }
.hist-period.is-current .hist-period__dash  { background: var(--hist-point); }

.hist-period__photo {
  display: block;
  width: calc(var(--photo-w) * var(--u));
  height: calc(var(--photo-h) * var(--u));
  /* 시안 제목 위 → 사진 위가 150~175, 제목 높이를 뺀 값이 53 */
  margin-top: calc(24 * var(--u));
  border-radius: calc(var(--radius) * var(--u));
  object-fit: cover;
  background: #eff0f5;
}
/* 사진 파일이 아직 없는 구간 — 같은 크기의 옅은 판 (js 가 <img> 를 이 div 로 바꾼다) */
.hist-period__photo.is-empty {
  background:
    linear-gradient(135deg, rgba(19, 90, 156, .06), rgba(19, 90, 156, 0) 60%),
    #eff0f5;
}

/* 오른쪽 — 연도별 목록 */
.hist-period__years {
  padding-left: calc(var(--year-pad) * var(--u));
}

.hist-year {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--year-col) * var(--u)) 1fr;
}
/* 시안은 약 50. 한 해씩 끊어 읽히도록 시안보다 조금 더 벌린다 (전 34 — 너무 빨리 지나갔다) */
.hist-year + .hist-year { margin-top: calc(64 * var(--u)); }

/* 연도 지점의 점. 선은 오른쪽 칸의 왼쪽 경계에 있으므로 그 자리에 얹는다.
   (시안 선 SVG 에는 없다 — 어디까지 지나왔는지 읽히도록 더한 것이다) */
.hist-year::before {
  content: "";
  position: absolute;
  left: calc(var(--year-pad) * var(--u) * -1);
  top: calc(16 * var(--u));          /* 연도 글자 가운데 높이 */
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  margin-left: calc(-4.5 * var(--u));
  border-radius: 50%;
  background: var(--hist-track);
  transition: background-color .3s ease;
}
.hist-year.is-passed::before { background: var(--hist-point); }

/* 첫 연도의 점은 선 머리(원)가 대신한다 */
.hist-period:first-child .hist-year:first-child::before { display: none; }

.hist-year__label {
  margin: 0;
  font-weight: 700;
  font-size: calc(30 * var(--u));    /* 시안 35 */
  line-height: 1.36;
  letter-spacing: -.03em;            /* -1.05 / 35 */
  color: var(--hist-ink);
}

.hist-year__list {
  /* 시안에서 첫 항목이 연도보다 7 아래에서 시작한다 */
  padding-top: calc(4 * var(--u));
  list-style: none;
}

/*
  항목 글자는 줄이지 않는다.
  여기가 실제로 읽는 곳이고, --u 때문에 1440 화면에서는 이미 15px 이다.
  줄인 것은 앞의 월 표시와 줄 사이 간격뿐이다.
*/
.hist-item {
  display: flex;
  gap: calc(14 * var(--u));          /* 시안 17 */
  /* 배수가 아니라 길이로 준다 — 월과 본문의 글자 크기가 달라도 줄 높이가 같아야
     둘의 첫 줄이 나란히 선다 (시안도 25 라는 길이로 준다) */
  line-height: max(calc(30 * var(--u)), 22px);
}
.hist-item + .hist-item { margin-top: calc(14 * var(--u)); }   /* 전 9 */

.hist-item__month {
  flex: none;
  font-weight: 600;
  font-size: max(calc(22 * var(--u)), 15px);   /* 시안 25 */
  letter-spacing: -.03em;            /* -0.75 / 25 */
  color: var(--gray);
}
/* 월 대신 놓는 작은 점 (2026-09-18, js SHOW_MONTH = false). 첫 줄 글자 가운데 높이에 맞춘다 */
.hist-item__dot {
  flex: none;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  min-width: 5px;
  min-height: 5px;
  margin-top: calc(max(calc(30 * var(--u)), 22px) / 2 - 3px);
  border-radius: 50%;
  background: var(--hist-point, #135a9c);
}

.hist-item__text {
  /* 좁은 화면에서 읽기 어려울 만큼 작아지지 않도록 바닥을 둔다 */
  font-size: max(calc(20 * var(--u)), 15px);
  letter-spacing: -.03em;            /* -0.6 / 20 */
  color: var(--hist-ink);
  /* 낱말 중간이 아니라 띄어쓰기에서 접는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ==================== 등장 ====================
   js/reveal.js 가 화면에 들어온 [data-reveal] 에 .is-in 을 붙인다.
   연도 블록이 통째로 떠오르고, 그 안의 항목이 0.08 초 간격으로 따라온다. */
.js .hist-period__head[data-reveal],
.js .hist-year[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js .hist-period__head[data-reveal].is-in,
.js .hist-year[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.js .hist-year[data-reveal] .hist-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease-out, transform .55s ease-out;
  /* --d 는 js 가 항목 순번으로 넣는다 */
  transition-delay: calc(.18s + var(--d, 0) * .08s);
}
.js .hist-year[data-reveal].is-in .hist-item {
  opacity: 1;
  transform: none;
}

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .hist-page { --gutter: 16; }

  /* 히어로는 /css/page-hero.css 가 좁은 화면까지 맡는다 */

  /* ---------- 구간 칩 ----------
     네 칸을 화면 폭에 억지로 나눠 넣으면 글자가 줄어 읽히지 않는다.
     칩은 제 폭을 갖고, 대신 가로로 넘겨서 본다. 활성 칩은 js 가 보이는 자리로 끌어온다. */
  /* 히어로 아래 여백(page-hero.css 14)과 겹쳐 큰 쪽이 남는다. sticky 는 margin 에 영향 없다 */
  .page-hero + .hist-nav { margin-top: var(--sp-block); }
  .hist-nav {
    padding: calc(8 * var(--u)) 0 calc(14 * var(--u));
    /* 위아래로 흰 여백만 두면 지나가는 글자가 비쳐 보인다 */
    box-shadow: 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(255, 255, 255, .9);
  }
  .hist-nav__track {
    width: auto;
    margin: 0 calc(var(--gutter) * var(--u));
    padding: calc(5 * var(--u));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hist-nav__track::-webkit-scrollbar { display: none; }
  /* 칩 셋이 트랙 폭을 똑같이 나눠 채운다 (시안의 '빈틈없이 붙는 칩' 과 같은 어법).
     글자 길이대로 두면 오른쫝에 빈 트랙이 남아 어색했다. 폭이 모자라면 글자 폭을 지키고 가로로 민다 */
  .hist-nav__btn {
    flex: 1 1 0;
    width: auto;                     /* 210 은 이 폭에서 과하다 */
    min-width: max-content;
    height: calc(38 * var(--u));
    /* 구간이 넷이 되어(2026-09 데이터) 375 폭에 넷이 다 들어오도록 여백·글자를 조금 줄였다 */
    padding: 0 calc(7 * var(--u));
    font-size: calc(13 * var(--u));
    letter-spacing: -.04em;
    text-align: center;
  }

  /* ---------- 연혁 ----------
     한 칸으로 세우고 선을 왼쪽에 붙인다. 본문은 선 오른쪽으로 비켜선다. */
  .hist {
    margin-top: var(--sp-block);
    padding-bottom: var(--sp-section);   /* 마지막 항목 → 푸터 */
    /* 선이 설 자리 */
    padding-left: calc(24 * var(--u));
  }
  .hist__line {
    left: 0;
    top: calc(15 * var(--u));   /* 첫 연도 점 중심 = 11 + 4 */
    width: calc(2 * var(--u));
    transform: none;
  }
  .hist__line-head { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

  .hist-period { display: block; }
  .hist-period + .hist-period { margin-top: calc(var(--sp-section) * 1.5); }   /* 120 — 구간 사이는 섹션 간격보다 한 단 더 */

  .hist-period__head { width: auto; }
  .hist-period__title {
    justify-content: flex-start;
    gap: calc(10 * var(--u));
    font-size: calc(32 * var(--u));
  }
  .hist-period__title .is-ko { font-size: calc(30 * var(--u)); }
  .hist-period__dash { width: calc(14 * var(--u)); height: calc(4 * var(--u)); }
  /* 좁은 화면은 제목 → 사진 → 연도 순으로 세로로 쌓이므로,
     사진이 크면 첫 화면에서 연혁 항목이 한 줄도 안 보인다 */
  .hist-period__photo {
    width: 100%;
    height: calc(150 * var(--u));
    margin-top: calc(14 * var(--u));
    border-radius: calc(12 * var(--u));
  }

  .hist-period__years {
    margin-top: calc(22 * var(--u));
    padding-left: 0;
  }
  /* 연도는 항목 위로 올라간다 — 한 줄에 나란히 두기엔 폭이 없다 */
  .hist-year { display: block; }
  .hist-year + .hist-year { margin-top: calc(40 * var(--u)); }   /* 전 26 — 한 해씩 끊어 읽히게 */
  .hist-year::before {
    left: calc(-24 * var(--u));
    top: calc(11 * var(--u));
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    margin-left: calc(-3 * var(--u));
  }
  .hist-year__label { font-size: calc(22 * var(--u)); }
  .hist-year__list { padding-top: calc(6 * var(--u)); }
  .hist-item { gap: calc(10 * var(--u)); line-height: 1.5; }
  .hist-item + .hist-item { margin-top: calc(12 * var(--u)); }   /* 전 8 */
  .hist-item__month { font-size: calc(15 * var(--u)); }
  .hist-item__text  { font-size: max(calc(15 * var(--u)), 14px); }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  /* 진행선은 채워 두고 점은 모두 지난 상태로 — 움직임만 없앤다 */
  .hist__line-fill { transform: scaleY(1); }
  .hist-year::before { background: var(--hist-point); }

  .js .hist-period__head[data-reveal],
  .js .hist-year[data-reveal],
  .js .hist-year[data-reveal] .hist-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hist-nav__btn,
  .hist-period__title,
  .hist-period__dash { transition: none; }

  /* 첫 화면 등장도 움직임 없이 (히어로 쪽은 page-hero.css 가 끈다) */
  .js .hist-nav { animation: none; }
}