/* 리뉴얼(2026-09-27)에서 새로 생긴 조각 — 히어로 날짜, 데이터가 도는 길, 다음 마일스톤.
   styles.css 의 변수와 리셋에 얹힌다. */

.hero .lead b{ color:var(--ink); font-weight:600; }
.hero-note{
  margin-top:28px; font-size:13px; color:var(--ink-faint);
  border-left:2px solid var(--mint-dim); padding-left:12px;
}
.hero-note b{ color:var(--ink-dim); }

/* ---------- 02. 데이터가 도는 길 ----------
   걸음마다 "됨 / 여는 중 / 아직" 을 붙인다. 지우면 그럴듯한 그림이 되고, 그림은 거짓말을 한다. */
.flow{
  list-style:none; counter-reset:flow;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:900px){ .flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .flow{ grid-template-columns:1fr; } }
.flow-step{
  counter-increment:flow;
  background:var(--bg-raised); padding:26px 22px 28px; position:relative;
}
.flow-step::before{
  content:counter(flow); display:block;
  font-family:var(--serif); font-size:30px; line-height:1; color:var(--ink-faint);
  margin-bottom:14px;
}
.flow-step.done::before{ color:var(--mint); }
.flow-state{
  position:absolute; top:26px; right:22px;
  font-size:11px; letter-spacing:0.08em; font-weight:600;
  padding:3px 9px; border:1px solid var(--line-strong); color:var(--ink-faint);
}
.flow-step.done .flow-state{ color:var(--mint); border-color:var(--mint); }
/* 아직 · 여는 중 — 주황. 되는 것(민트)과 한눈에 갈리게 */
.flow-step:not(.done) .flow-state{ color:var(--warm); border-color:var(--warm-dim); }
.flow-step h3{ font-family:var(--serif); font-size:17px; margin-bottom:10px; line-height:1.4; }
.flow-step p{ font-size:14px; color:var(--ink-dim); line-height:1.7; }
.flow-step p b{ color:var(--ink); }
#flow .principle{ margin-top:40px; max-width:560px; }

/* ---------- 04. 다음 ---------- */
.ms-list{ border-top:1px solid var(--line); }
.ms-row{
  display:grid; grid-template-columns:44px 1fr; gap:22px; align-items:start;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.ms-id{
  width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:14px; color:var(--ink-faint);
}
.ms-row h3{ font-family:var(--serif); font-size:17px; margin-bottom:4px; }
.ms-row p{ font-size:14px; color:var(--ink-dim); }