/* === デモ: 縦並びレイアウト === */
.demo-container {
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
}

/* 各パターンを囲むカード */
.range-pattern {
  margin-bottom: 16px;
  padding: 20px;
  background: #F4F6F9;
  border-radius: 8px;
  max-width: 520px;
}

.range-pattern:last-of-type { margin-bottom: 0; }

.range-pattern-label {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* スライダーコンポーネント */
.range-wrapper { width: 100%; }

.range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.range-label {
  font-size: 14px;
  font-weight: 600;
  color: #1E2A3A;
}

.range-value {
  font-size: 14px;
  font-weight: 700;
  color: #2B7FE8;
}

/* ブラウザデフォルトのスライダーUIをリセット */
.range-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #D0D7E0;
  outline: none;
  cursor: pointer;
}

/* Chrome / Safari のつまみ */
.range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2B7FE8;
  cursor: grab;
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.25);
  transition: box-shadow 0.15s;
}

.range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 0 5px rgba(43, 127, 232, 0.25);
}

/* Firefox のつまみ */
.range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: #2B7FE8;
  cursor: grab;
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.25);
}

/* === デュアルレンジ === */
.dual-range-track {
  position: relative;
  height: 24px;
}

/* 2つの透明inputの背後にトラックを描く */
.dual-range-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  transform: translateY(-50%);
  background: #D0D7E0;
  border-radius: 3px;
  pointer-events: none;
}

.range-input--dual {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
}

.range-input--min { z-index: 1; }
.range-input--max { z-index: 2; }

.range-input--dual::-webkit-slider-thumb { pointer-events: all; }
.range-input--dual::-moz-range-thumb     { pointer-events: all; }

/* === 決定ボタン・結果エリア === */
.range-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.range-confirm-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-family: sans-serif;
  color: #fff;
  background: #2B7FE8;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.range-confirm-btn:hover { background: #1a6fd4; }

.range-result {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  font-size: 14px;
  color: #1E2A3A;
}

/* リセットボタン */
.reset-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, border-color 0.15s;
}

.reset-btn:hover {
  background: #F4F6F9;
  border-color: #9AA5B4;
}

/* プロンプトブロック */
.prompt-block { margin-bottom: 20px; }
.prompt-block:last-child { margin-bottom: 0; }

.prompt-block-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.04em;
}