/* ============================================================
   Slider — 連続値
   感覚的な量・強さの指定。トラックは署名色 --brand。
   正確な数値が要るときは Stepper を使う。
   ============================================================ */

.slider { position: relative; height: 46px; display: flex; align-items: center; width: 100%; max-width: 360px; }
.slider .track { position: absolute; left: 0; right: 0; height: 3px; background: var(--line); border-radius: 2px; }
.slider .range { position: absolute; left: 0; height: 3px; background: var(--brand); border-radius: 2px; }
.slider .knob {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,.14); transform: translateX(-50%);
}
.slider input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; margin: 0; }