/* =====================================================
   ARTIFEX History (content01_2) — page CSS
   Scope: .p-history — 버티컬 타임라인 + 플라이휠 로드맵 카드.
   ===================================================== */

/* ---- 연혁 타임라인 ---- */
.p-history .timeline {
  position: relative;
  max-width: var(--measure);
  margin-top: var(--sp-12);
}
/* 좌측 레일 (2px), 도트 중심(x=5px)에 정렬 */
.p-history .timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line-200);
}
.p-history .timeline-year {
  position: relative;
  padding-left: var(--sp-8);
}
.p-history .timeline-year + .timeline-year { margin-top: var(--sp-12); }
/* 연도 도트 */
.p-history .timeline-year::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-600);
}
.p-history .timeline-year h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-600);
}
.p-history .timeline-year ul {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.p-history .timeline-year li {
  font-size: 16px;
  color: var(--ink-700);
}

/* ---- 단계별 플라이휠 로드맵 (4열 넘버 카드) ---- */
.p-history .roadmap-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.p-history .roadmap-cards .card {
  padding: var(--sp-8);
}
.p-history .step-num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-100);
  font-variant-numeric: tabular-nums;
}
.p-history .roadmap-cards h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: var(--sp-6);
}
.p-history .roadmap-cards p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-500);
  margin-top: var(--sp-3);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .p-history .roadmap-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .p-history .timeline-year { padding-left: var(--sp-6); }
  .p-history .timeline-year + .timeline-year { margin-top: var(--sp-8); }

  .p-history .roadmap-cards {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .p-history .roadmap-cards .card { padding: var(--sp-6); }
}