/* ============================================================
   Roadmap — the signature "지하철 노선도" 7-stage map.
   Reusable across slides. Stages light up via .lit / data-lit.
   ============================================================ */
.roadmap {
  --gap: 0;
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 8px 8px;
}

/* the connecting line behind stations —
   node centers sit at (2k-1)/14 of the width (7 equal flex columns),
   so the track runs exactly from first to last center, at node mid-height */
.roadmap::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  top: 56px;                       /* padding-top 28 + node 62/2 − 3 */
  height: 6px;
  border-radius: 6px;
  background: #ece3d6;
  z-index: 0;
}
/* the lit progress overlay on the line */
.roadmap::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 56px;
  height: 6px;
  width: var(--lit-pct, 0%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--stage-1), var(--stage-3), var(--stage-5), var(--stage-7));
  box-shadow: 0 1px 8px rgba(168,85,247,.35);
  transition: width var(--t-slow) var(--ease-out);
  z-index: 0;
}

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* station node */
.stage .node {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #e2d8ca;
  display: grid; place-items: center;
  color: var(--ink-faint);
  transition: border-color var(--t-med) var(--ease-spring), color var(--t-med) var(--ease-spring), background var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-spring), transform var(--t-med) var(--ease-spring);
  position: relative;
}
.stage .node .ic { width: 32px; height: 32px; }
.stage .node .num {
  position: absolute; top: -12px; left: -12px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #e2d8ca; color: #fff;
  font-size: 15px; font-weight: 800;
  display: grid; place-items: center;
  transition: background var(--t-med);
}
.stage .label {
  font-size: 19px; font-weight: 700; color: var(--ink-faint);
  transition: color var(--t-med);
  line-height: 1.15;
  min-height: 44px;                 /* reserve 2 lines → subs align across stages */
  display: flex; align-items: flex-start; justify-content: center;
}
.stage .sub {
  font-size: 15px; color: var(--ink-faint); opacity: .7;
  transition: opacity var(--t-med);
  margin-top: -6px;
}

/* --- LIT state --- */
.stage.lit .node {
  border-color: var(--c, var(--purple));
  color: var(--c, var(--purple));
  background: color-mix(in srgb, var(--c, var(--purple)) 12%, #fff);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent),
              0 10px 24px color-mix(in srgb, var(--c) 35%, transparent);
  transform: translateY(-4px) scale(1.08);
}
.stage.lit .node .num { background: var(--c, var(--purple)); }
.stage.lit .label { color: var(--ink); }
.stage.lit .sub { opacity: 1; color: var(--c); font-weight: 700; }

/* --- ACTIVE (current focus) pulse --- */
.stage.active .node {
  animation: pulseNode 1.6s var(--ease-out) infinite;
}
@keyframes pulseNode {
  0%,100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent),
                         0 10px 24px color-mix(in srgb, var(--c) 35%, transparent); }
  50%     { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c) 4%, transparent),
                         0 14px 30px color-mix(in srgb, var(--c) 45%, transparent); }
}
/* (no "지금 여기" pin — the whole map is covered in this single lecture;
   .active only adds the pulse while the reveal animation is running) */

/* per-stage color binding */
.stage:nth-child(1){ --c: var(--sky); }
.stage:nth-child(2){ --c: var(--teal); }
.stage:nth-child(3){ --c: #e2a400; }
.stage:nth-child(4){ --c: var(--purple); }
.stage:nth-child(5){ --c: var(--coral); }

/* --- group bands under the map --- */
.roadmap-groups {
  display: flex; width: 100%; gap: 12px; margin-top: 18px;
}
.rg {
  flex: 1; text-align: center;
  padding: 14px 10px; border-radius: var(--r-md);
  font-size: 20px; font-weight: 700;
  background: #faf4ec; color: var(--ink-soft);
  border: 2px dashed #e7ddd0;
  transition: background var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.rg.say  { flex: 2; }
.rg.tool { flex: 3; }
.rg.auto { flex: 2; }
.rg.on.say  { background: color-mix(in srgb, var(--grp-say) 12%, #fff);  border-color: var(--grp-say);  color: var(--grp-say); }
.rg.on.tool { background: color-mix(in srgb, var(--grp-tool) 12%, #fff); border-color: var(--grp-tool); color: #0f9b73; }
.rg.on.auto { background: color-mix(in srgb, var(--grp-auto) 12%, #fff); border-color: var(--grp-auto); color: #db2777; }
.rg small { display:block; font-weight: 600; font-size: 11px; opacity:.7; margin-top:2px; }

/* compact variant for in-section navigation header */
.roadmap.mini { padding: 8px 4px; transform: scale(.86); transform-origin: top center; }
.roadmap.mini .label, .roadmap.mini .sub { font-size: 11px; }