/* ---- 基本設定（色はここで調整） ---- */
:root{
  --accent: #C0A226;        /* 有効線・有効丸 */
  --muted:  #D6D9E0;        /* 無効線・無効丸 */
  --label:  #333;           /* テキスト色 */
  --label-dim:#8A8FA0;      /* 先のステップの文字 */
  --size:   26px;           /* 丸の直径（元のSVGに合わせて26px）*/
  --gap:    clamp(12px, 3vw, 28px);
}

/* ---- コンテナ ---- */
.c-steps { padding-inline: clamp(8px, 3vw, 24px); }
.step-indicator{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* ---- 各ステップ ---- */
.step-indicator > li{
  position: relative;
  flex: 1 1 0;
  text-align:center;
  padding-top: calc(var(--size) + 10px);
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.4;
  color: var(--label-dim);
  min-width: 0; /* 折り返し安定 */
  word-break: keep-all;
}

/* ---- 丸（デフォルト：グレーの空丸） ---- */
.step-indicator > li::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:var(--size);
  height:var(--size);
  transform: translateX(-50%);
  border-radius:50%;
  border: 2px solid var(--muted);
  background: #fff;
  z-index: 1;
}

/* ---- 連結線（右方向のみ描画） ---- */
.step-indicator > li::after{
  content:"";
  position:absolute;
  top: calc(var(--size)/2 - 1px);   /* 丸の中心に合わせる */
  left: calc(50% + var(--size)/2 + 6px);
  right: calc(-50% + var(--size)/2);
  height:2px;
  background: var(--muted);
  z-index: 0;
}
.step-indicator > li:last-child::after{ display:none; }

/* ---- 完了ステップ（チェック入りの塗り丸＋濃い文字） ---- */
.step-indicator > li.active{
  color: var(--label);
  font-weight: 600;
}
.step-indicator > li.active::before{
  border-color: #C0A226;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'>\
<circle cx='13' cy='13' r='13' fill='%23C0A226'/>\
<path d='M8 13.5l3.5 3.8L18.5 10' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") center/cover no-repeat;
}

/* ---- 現在ステップ（枠だけアクセント・数字表示も可） ---- */
.step-indicator > li.current{
  color: var(--label);
  font-weight: 700;
}
.step-indicator > li.current::before{
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---- 線の色を段階で塗り分け（active の右側まではアクセント色） ---- */
.step-indicator > li.active ~ li::after{ background: var(--muted); }
.step-indicator > li.active::after{ background: var(--accent); }
/* 連続 active に対応：active の次も active ならその区間をアクセント色に */
.step-indicator > li.active + li.active::before{ /* 連続時の丸は既に上で塗り済み */ }
.step-indicator > li.active + li.active::after{ background: var(--accent); }

/* ---- レスポンシブ（狭幅時は文字を折返し・余白調整） ---- */
@media (max-width: 480px){
  :root{ --size: 22px; }
  .step-indicator{ gap: 10px; }
  .step-indicator > li{ font-size: 12px; padding-top: calc(var(--size) + 8px); }
  .step-indicator > li::after{ left: calc(50% + var(--size)/2 + 4px); }
}

/* ---- ダークモード軽対応 ---- */
@media (prefers-color-scheme: dark){
  .step-indicator > li{ color: color-mix(in srgb, white 70%, black); }
  .step-indicator > li:not(.active):not(.current){ color: color-mix(in srgb, white 55%, black); }
  .step-indicator > li::before{ background: #0f0f12; border-color: color-mix(in srgb, white 22%, black); }
  .step-indicator > li::after{ background: color-mix(in srgb, white 22%, black); }
}