.history-container {
  background: #fff;
  min-height: 100vh;
  padding: 60px 20px;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}
.history-title { text-align: center; margin-bottom: 80px; opacity: 0; animation: fadeIn 1s ease-out forwards; }
.history-title h1 { font-size: 2.5em; color: #333; margin-bottom: 15px; font-weight: 700; letter-spacing: -1px; }
.history-title .subtitle { font-size: 1.1em; color: #666; font-weight: 400; }
.timeline { position: relative; max-width: 800px; margin: 0 auto; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #e0e0e0; transform: translateX(-50%); }
.timeline-section { position: relative; margin-bottom: 100px; opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.timeline-section.visible { opacity: 1; transform: translateY(0); }
.timeline-year { position: relative; display: flex; align-items: center; margin-bottom: 40px; }
.year-left { flex: 1; text-align: right; padding-right: 40px; }
.year-dot { width: 12px; height: 12px; background: #e53e3e; border-radius: 50%; position: relative; z-index: 2; flex-shrink: 0; }
.year-right { flex: 1; padding-left: 40px; }
.year-title { font-size: 2em; font-weight: 700; color: #333; margin: 0; }
.year-description { color: #666; margin-top: 10px; font-size: 0.95em; line-height: 1.5; }
.timeline-events { list-style: none; padding: 0; margin: 0; }
.timeline-event { margin-bottom: 15px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; display: flex; align-items: center; opacity: 0; transform: translateX(20px); transition: all 0.4s ease; }
.timeline-section.visible .timeline-event { opacity: 1; transform: translateX(0); }
.timeline-section.visible .timeline-event:nth-child(1) { transition-delay: 0.2s; }
.timeline-section.visible .timeline-event:nth-child(2) { transition-delay: 0.3s; }
.timeline-section.visible .timeline-event:nth-child(3) { transition-delay: 0.4s; }
.timeline-section.visible .timeline-event:nth-child(4) { transition-delay: 0.5s; }
.timeline-section.visible .timeline-event:nth-child(5) { transition-delay: 0.6s; }
.event-date { font-weight: 600; color: #333; min-width: 80px; font-size: 0.9em; }
.event-dot { width: 4px; height: 4px; background: #999; border-radius: 50%; margin: 0 15px; flex-shrink: 0; }
.event-description { color: #666; font-size: 0.9em; line-height: 1.4; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* 제작자 정보 스타일 */
.hht-credits {
  text-align: center;
  margin-top: 60px;
  padding: 20px 0;
  border-top: 1px solid #e0e0e0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.hht-credits:hover {
  opacity: 1;
}

.hht-credits-text {
  margin: 0;
  color: #999;
  font-size: 0.85em;
}

.hht-credits-text a {
  color: #666;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.hht-credits-text a:hover {
  color: #333;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .timeline::before { left: 20px; }
  .year-left { display: none; }
  .year-dot { position: absolute; left: 14px; }
  .year-right { padding-left: 50px; flex: none; width: 100%; }
  .timeline-events { padding-left: 50px; }
  .year-title { font-size: 1.8em; }
  .history-title h1 { font-size: 2em; }
  .hht-credits { margin-top: 40px; }
}