@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;700&display=swap');

:root {
  --bg: #0E2033;
  --text: #DFF3EC;
  --primary: #8FE3C6;
  --secondary: #F2F5F7;
  --font-display: 'IBM Plex Sans KR', sans-serif;
  --font-body: 'IBM Plex Sans KR', sans-serif;
}

.timeline {
  max-width: 720px;
  margin: 8px auto 56px;
  padding: 0 20px 0 44px;
  border-left: 2px solid rgba(143,227,198,0.25);
}
.tl-step {
  position: relative;
  padding-bottom: 40px;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -50px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--bg);
  transition: background 0.4s ease;
}
.tl-step.in-view .tl-dot { background: var(--primary); }
.tl-step h2 {
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--primary);
  margin-bottom: 8px;
}
.tl-step p { font-size: 0.96rem; opacity: 0.92; }

.timeline-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 920px;
  margin: 0 auto 48px;
  padding: 0 20px;
  justify-content: center;
}
.timeline-photos img { border-radius: 10px; width: 340px; max-width: 100%; height: 255px; object-fit: cover; flex: 0 1 340px; }
.timeline-photos figcaption { width: 100%; text-align: center; font-size: 0.85rem; opacity: 0.6; margin-top: 4px; }