/* p02.css — 고속도로휴게소철거 · 그린 · 수평 스텝 타임라인 관통형 아키타입 */
:root{
  --accent:#1F5C3D;
  --sub:#C7D64F;
  --bg:#F2F7F3;
  --surface:#FFFFFF;
  --line:#DCE8DD;
  --display-font:'Noto Serif KR',var(--font-fallback);
  --body-font:var(--font-fallback);
  --label-font:'Archivo',var(--font-fallback);
}
.hero-eyebrow{font-family:var(--label-font);}

/* 수평 스텝 타임라인: 4단계가 가로로 관통하는 라인 위에 배치 */
.step-timeline{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  position:relative;max-width:900px;margin:0 auto 40px;padding-top:20px;
}
.step-timeline::before{
  content:"";position:absolute;top:34px;left:6%;right:6%;height:2px;background:var(--line);
}
.step-timeline li{position:relative;text-align:center;padding:0 12px;}
.step-timeline .step-num{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;font-size:.85rem;margin:0 auto 14px;position:relative;z-index:1;
}
.step-timeline strong{display:block;font-size:.95rem;color:#1f2328;margin-bottom:6px;}
.step-timeline p{font-size:.82rem;color:#5a626b;margin:0;line-height:1.6;}
@media (max-width:720px){
  .step-timeline{grid-template-columns:1fr;gap:24px;}
  .step-timeline::before{top:0;bottom:0;left:14px;width:2px;height:auto;right:auto;}
  .step-timeline li{text-align:left;padding-left:44px;}
  .step-timeline .step-num{position:absolute;left:0;top:0;margin:0;}
}