/* CSS 변수 정의 (custom.css가 없을 경우 대비) */
:root {
  --joora-dark-roast: #4A2B1A; /* 진한 커피색 (진행 바 색상) */
  --joora-coffee-bean: #7E5940; /* 원두색 (포인트 테두리 등) */
  --joora-crema: #EBDAC8; /* 부드러운 배경색 */
  --joora-warm-gray: #B3A08D; /* 웜 그레이 */
  --joora-light-gray-bar: #E0E0E0; /* 연한 회색 (배경 바 색상 추가) */
  --joora-text-black: #2C2C2C;
  --font-family-classic: 'Cafe24 Classic Type', sans-serif;
  --font-family-base: 'Noto Sans KR', sans-serif;
}

.history_container { font-family: var(--font-family-base); color: var(--joora-text-black); }
.joora-h2 { font-family: var(--font-family-classic);/*font-size: 3.4375rem; font-weight: 700;*/}
.joora-sub-title { font-family: 'Ridi Batang', serif; color: var(--joora-coffee-bean); font-size: 1.5rem; }

.timeline-container { 
  position: relative; 
  padding: 40px 0; 
  max-width: 900px;
  margin: 0 auto;
}

/* 중앙의 굵은 배경 바 (Vertical Bar) - 연한 회색으로 변경 */
.timeline-container::before {
  content: '';
  position: absolute;
  width: 8px; 
  background-color: var(--joora-light-gray-bar); /* 연한 회색으로 변경 */
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -4px;
  border-radius: 4px;
}

/* 중앙 바 내부에서 채워지는 요소 (진행률 표시) - 진한 커피색으로 강조 */
.timeline-progress-bar {
  content: '';
  position: absolute;
  width: 8px; 
  background-color: var(--joora-dark-roast); /* 진한 커피색으로 강조 */
  top: 0;
  left: 50%;
  margin-left: -4px;
  height: 0; 
  border-radius: 4px;
  z-index: 1; 
  transition: height 0.5s linear; 
}

/* 연도 그룹 배치 (좌우로 리듬감 있게) */
.timeline-year-group { 
  padding: 10px 0;
  position: relative;
  width: 50%; 
  margin-bottom: 50px; 
}
.timeline-year-group.left { left: 0; padding-right: 70px; }
.timeline-year-group.right { left: 50%; padding-left: 70px; }

/* 연도 표시 스타일 */
.timeline-year {
  font-family: var(--font-family-classic); 
  font-size: 2.5rem; 
  font-weight: 800;
  color: var(--joora-dark-roast);
  margin-bottom: 15px;
  display: block;
  text-align: center; 
}
.timeline-year-group.left .timeline-year { text-align: right; }
.timeline-year-group.right .timeline-year { text-align: left; }

/* 서클(Circle) 디자인 */
.timeline-circle {
  content: '';
  position: absolute;
  width: 30px; 
  height: 30px;
  background-color: var(--joora-crema); 
  border: 4px solid var(--joora-dark-roast); 
  top: 20px; 
  border-radius: 50%;
  z-index: 2;
}
.timeline-year-group.left .timeline-circle { right: -15px; }
.timeline-year-group.right .timeline-circle { left: -15px; }

/* 아이콘 배치 */
.timeline-icon {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: var(--joora-dark-roast);
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 1.5rem;
  top: 10px; 
  z-index: 3;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.timeline-year-group.left .timeline-icon { right: -25px; }
.timeline-year-group.right .timeline-icon { left: -25px; }

/* 월별 상세 항목을 감싸는 박스 (연도 콘텐츠 박스) */
.timeline-content-box {
  background-color: var(--joora-crema);
  border-radius: 0.5rem;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  padding: 20px; 
  border-left: 5px solid var(--joora-coffee-bean); 
}
/* 오른쪽 연도 그룹의 콘텐츠 박스 */
.timeline-year-group.right .timeline-content-box {
  border-left: none;
  border-right: 5px solid var(--joora-coffee-bean);
}

/* 월별 상세 항목 스타일 */
.timeline-month-detail {
  margin-bottom: 15px; 
  padding-bottom: 15px; 
  border-bottom: 1px dashed var(--joora-warm-gray); 
  
  /* 애니메이션 설정 */
  opacity: 0; 
  transform: translateY(20px); 
  transition: all 0.5s ease-out;
}
.timeline-month-detail:last-child { 
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 월 표시 스타일 */
.timeline-month {
  font-weight: 700;
  color: var(--joora-coffee-bean);
  margin-bottom: 5px;
  display: block;
  font-size: 1.1rem;
}

/* 애니메이션 적용 클래스 */
.timeline-month-detail.show { opacity: 1; transform: translateY(0); }

/* 모바일 반응형 (단일 컬럼) */
@media (max-width: 768px) {
  .timeline-container::before, .timeline-progress-bar { left: 25px; } 
  .timeline-year-group { width: 100%; padding-left: 70px; padding-right: 20px; left: 0 !important; }
  
  .timeline-circle { left: 15px !important; right: auto !important; } 
  .timeline-year-group .timeline-circle { left: 15px !important; right: auto !important; }
  
  .timeline-icon { left: 0px !important; right: auto !important; }
  .timeline-year-group .timeline-icon { left: 0px !important; right: auto !important; }

  .timeline-year-group .timeline-year { text-align: left !important; } 

  .timeline-content-box { border-right: none !important; border-left: 5px solid var(--joora-coffee-bean) !important; }
  .timeline-year-group.right .timeline-content-box { border-right: none !important; border-left: 5px solid var(--joora-coffee-bean) !important; }
}