* { padding: 0; margin: 0; list-style: none;}
body { padding: 0px;}

.history { margin-top: 50px; }

/* 선이 기준점을 잡을 수 있도록 relative 부여 */
.history-container { 
  position: relative; 
  padding: 0 0 0 48px; 
}

/* 1. 얇은 배경 선 (페이지 로드 시 즉시 빠르게 내려감) */
.line-bg {
  position: absolute;
  left: 7.5px; /* 원 중앙(8.5px)에 정확히 맞춤 */
  top: 10px;
  width: 2px;
  height: 0; /* 애니메이션 시작 전 높이 */
  background: #e1e8ed; /* 흰색 배경에 보이도록 연한 회색 */
  animation: dropLine 0.6s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; 
  z-index: 1;
}

/* 배경 선 그리기 애니메이션 (scale 대신 확실하게 height로 변경) */
@keyframes dropLine {
  0% { height: 0; }
  100% { height: calc(100% - 10px); }
}

/* 2. 두꺼운 진행 선 (스크롤 시 0.4초 뒤 단번에 원까지 뻗어나감) */
.line-progress {
  position: absolute;
  left: 6.5px; /* 4px로 두꺼워지므로 중앙축을 맞추기 위해 1px 이동 */
  top: 10px;
  width: 4px;
  height: 0; 
  background: #3866d1; /* ARGOS 파란색 */
  /* 선이 중간에 안 멈추고 꽉 차게 점프하는 핵심 (ease-out) */
  transition: height 0.4s ease-out; 
  z-index: 2;
}

/* 3. 연도별 동그라미 (h2) */
.history h2 { 
  position: relative; 
  font-size: 32px; 
  color: black; 
  line-height: 1; 
  z-index: 3; /* 선보다 원이 위로 올라오게 설정 */
  display: inline-block; 
  background: white; /* 선이 원을 뚫고 지나가 보이지 않게 가림 */
}

/* 동그라미 기본 상태 (회색 테두리) */
.history h2:before { 
  content: ""; 
  position: absolute; 
  left: -48px; 
  top: 50%; 
  width: 17px; 
  height: 17px; 
  border-radius: 100%; 
  background: white; 
  border: 4px solid #e1e8ed; 
  transform: translateY(-50%);
  box-sizing: border-box;
  transition: border-color 0.4s ease, border-width 0.2s ease;
}

/* 스크롤이 닿았을 때 (파란색 테두리로 활성화) */
.history h2.active:before {
  border-color: #3866d1;
  border-width: 5px;
}

/* 텍스트 여백 설정 */
.history ol { padding: 20px 0 74px; }
.history li { font-size: 17px; color: black; line-height: 29px; margin-top: 10px; }

/* =========================================
   스마트폰 전용 반응형 수정 (767px 이하)
   - 연혁 타임라인 컴팩트(다이어트) 모드
========================================= */
@media (max-width: 767px) {
  /* 1. 전체 여백 축소 */
  .history { 
    margin-top: 30px; 
  }
  
  /* 2. 타임라인 왼쪽 여백 축소 (원래 48px -> 28px) */
  .history-container { 
    padding: 0 0 0 28px; 
  }

  /* 3. 선 위치 정밀 조정 (줄어든 여백에 맞춰 중심축 이동) */
  .line-bg {
    left: 6.5px; /* 폭 2px, 중심축 7.5px */
  }
  .line-progress {
    left: 5.5px; /* 폭 4px, 중심축 7.5px */
  }

  /* 4. 연도별 동그라미 크기 및 위치 축소 */
  .history h2 { 
    font-size: 22px; /* 32px -> 22px로 앙증맞게 */
  }
  .history h2:before { 
    left: -28px; /* 축소한 컨테이너 여백에 딱 맞춤 */
    width: 15px; 
    height: 15px; 
    border-width: 3px;
  }
  .history h2.active:before {
    border-width: 4px; /* 활성화 시 테두리 두께 */
  }

  /* 5. 텍스트(내용) 크기 및 줄간격 다이어트 */
  .history ol { 
    padding: 12px 0 40px; /* 아래로 길게 늘어지던 여백(74px) 반토막 */
  }
  .history li { 
    font-size: 14px; /* 17px -> 14px */
    line-height: 1.4; 
    margin-top: 8px; 
    word-break: keep-all; /* 모바일에서 단어가 중간에 뚝뚝 끊기지 않게 보호 */
  }

  /* 6. 맨 위 '충남대학교 정보보안 동아리 ARGOS' 제목 축소 및 상단 여백 추가 */
  .about_section {
    padding-top: 100px !important; /* 👈 상단바 높이만큼 넉넉하게 띄워주기 */
  }
  
  .about_section .detail-box h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
}