@charset "utf-8";
/* 발전지원재단 > 연혁 — 세로 타임라인 + 시대 구분 배지 */

.history{max-width:900px;margin-inline:auto}

.history__intro{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:30px 34px;box-shadow:var(--shadow-s);margin-bottom:40px;
}
.history__intro h3{font-size:clamp(19px,2.2vw,23px);font-weight:900;letter-spacing:-.03em;
  padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--line);word-break:keep-all}
.history__intro p{font-size:14.5px;line-height:1.8;color:var(--text-mid);word-break:keep-all}

.timeline{min-width:0;position:relative}
/* 세로선 — 연도 점들이 얹히는 축. 시대 배지 구간에는 선을 비워 둔다 */
.timeline::before{
  content:"";position:absolute;left:96px;top:0;bottom:0;width:2px;
  background:var(--line-strong);
}

/* 시대 구분 배지 */
.timeline__era{position:relative;list-style:none;margin:0 0 22px;padding-left:120px}
.timeline__era:not(:first-child){margin-top:34px}
.era-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:13.5px;font-weight:800;letter-spacing:-.01em;
  word-break:keep-all;
}
.era-badge svg{flex:none;width:15px;height:15px}

/* 연도 행 */
.timeline__row{
  position:relative;list-style:none;display:grid;
  grid-template-columns:96px 24px minmax(0,1fr);
  padding-bottom:20px;
}
.timeline__row:last-child{padding-bottom:0}

.timeline__year{
  align-self:start;padding-top:14px;padding-right:20px;
  font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--navy);
  text-align:right;font-variant-numeric:tabular-nums;
}
.timeline__dot{
  align-self:start;justify-self:center;margin-top:19px;
  width:13px;height:13px;border-radius:50%;
  background:var(--surface);border:3px solid var(--brand);
  box-shadow:0 0 0 4px var(--bg-alt);
}

.timeline__card{
  min-width:0;   /* 그리드 기본값(auto)이 긴 단어의 고유 너비만큼 카드를 밀어내는 것을 막는다 */
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:14px 20px;box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;gap:8px;
}
.timeline__event{display:flex;gap:12px;align-items:baseline}
.timeline__date{
  flex:0 0 auto;min-width:44px;font-size:12.5px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.timeline__desc{
  min-width:0;font-size:14.5px;line-height:1.6;color:var(--text-mid);
  word-break:keep-all;overflow-wrap:anywhere;   /* 끊어지지 않는 긴 단어가 생겨도 폭 밖으로 넘치지 않게 */
}

/* ── 연혁 한 줄에 마우스를 올렸을 때 ────────────────────────────────
   해가 길게 이어진 화면이라 어느 해를 보고 있는지 놓치기 쉽습니다.
   줄 전체(연도 · 점 · 카드)가 함께 반응하게 해서, 마우스가 어디에 있든
   그 해가 한 덩어리로 도드라지게 했습니다.

   · 카드는 오른쪽으로 5px 밀리며 살짝 떠오르고 테두리가 파래집니다
   · 연표의 점은 속이 파랗게 차면서 조금 커집니다
   · 연도와 내용 글자는 한 톤 진해집니다

   글자색만으로 알리지 않고 위치·크기·테두리가 함께 바뀌므로, 색을
   구별하기 어려운 분도 어느 줄인지 알 수 있습니다.                  */
.timeline__card{
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.timeline__dot{
  transition:transform .22s cubic-bezier(.2,.7,.3,1), background .22s, box-shadow .22s;
}
.timeline__year{transition:color .22s}
.timeline__desc{transition:color .22s}

.timeline__row:hover .timeline__card{
  transform:translateX(5px) translateY(-2px);
  border-color:var(--brand);
  box-shadow:0 14px 26px rgba(15,45,80,.16),
             0 0 0 3px rgba(0,116,176,.14);
}
.timeline__row:hover .timeline__dot{
  transform:scale(1.35);
  background:var(--brand);
  box-shadow:0 0 0 5px rgba(0,116,176,.18);
}
.timeline__row:hover .timeline__year{color:var(--brand-strong)}
.timeline__row:hover .timeline__desc{color:var(--text)}

/* 화면이 움직이면 어지러우신 분들께는 밀거나 키우지 않고
   테두리와 색만 바꿔 알려 드립니다. */
@media (prefers-reduced-motion:reduce){
  .timeline__row:hover .timeline__card{transform:none}
  .timeline__row:hover .timeline__dot{transform:none}
}

@media (max-width:560px){
  .history__intro{padding:24px 22px}
  .timeline::before{left:64px}
  .timeline__era{padding-left:0}
  .era-badge{font-size:12.5px;padding:8px 14px}
  .timeline__row{grid-template-columns:64px 24px minmax(0,1fr)}
  .timeline__year{font-size:15px;padding-right:12px}
  .timeline__card{padding:12px 16px}
}