/* ===== ver211: 설정창 볼륨 슬라이더 데굴데굴 블럭 노드 ===== */
.settingsVolumeControl input[type="range"] {
  --volumePercent: 42%;
  --volumeDeg: 302deg;
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.settingsVolumeControl input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #ffd166 0 var(--volumePercent), rgba(17,24,39,0.10) var(--volumePercent) 100%);
  border: 1px solid rgba(17,24,39,0.08);
  box-shadow: inset 0 1px 2px rgba(17,24,39,0.08), 0 1px 0 rgba(255,255,255,0.72);
}

.settingsVolumeControl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0 13%, transparent 14%),
    linear-gradient(145deg, #ffffff 0%, #ffe4a3 42%, #ffd166 100%);
  border: 2px solid rgba(255,255,255,0.96);
  box-shadow:
    0 8px 16px rgba(15,23,42,0.18),
    inset -4px -5px 8px rgba(194,126,0,0.15),
    inset 3px 3px 7px rgba(255,255,255,0.78);
  transform: rotate(var(--volumeDeg)) scale(1);
  transform-origin: 50% 50%;
  transition: transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .16s ease;
}

.settingsVolumeControl input[type="range"]:hover::-webkit-slider-thumb,
.settingsVolumeControl input[type="range"].is-rolling::-webkit-slider-thumb {
  transform: rotate(var(--volumeDeg)) scale(1.08);
  box-shadow:
    0 10px 20px rgba(15,23,42,0.22),
    0 0 0 5px rgba(255,209,102,0.22),
    inset -4px -5px 8px rgba(194,126,0,0.15),
    inset 3px 3px 7px rgba(255,255,255,0.82);
}

.settingsVolumeControl input[type="range"].is-rolling::-webkit-slider-thumb {
  animation: degulSliderHop .28s ease;
}

.settingsVolumeControl input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #ffd166 0 var(--volumePercent), rgba(17,24,39,0.10) var(--volumePercent) 100%);
  border: 1px solid rgba(17,24,39,0.08);
}

.settingsVolumeControl input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0 13%, transparent 14%),
    linear-gradient(145deg, #ffffff 0%, #ffe4a3 42%, #ffd166 100%);
  border: 2px solid rgba(255,255,255,0.96);
  box-shadow:
    0 8px 16px rgba(15,23,42,0.18),
    inset -4px -5px 8px rgba(194,126,0,0.15),
    inset 3px 3px 7px rgba(255,255,255,0.78);
  transform: rotate(var(--volumeDeg)) scale(1);
  transition: transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .16s ease;
}

.settingsVolumeControl input[type="range"]:hover::-moz-range-thumb,
.settingsVolumeControl input[type="range"].is-rolling::-moz-range-thumb {
  transform: rotate(var(--volumeDeg)) scale(1.08);
  box-shadow:
    0 10px 20px rgba(15,23,42,0.22),
    0 0 0 5px rgba(255,209,102,0.22),
    inset -4px -5px 8px rgba(194,126,0,0.15),
    inset 3px 3px 7px rgba(255,255,255,0.82);
}

@keyframes degulSliderHop {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 -3px; }
}

body.dark-mode .settingsVolumeControl input[type="range"]::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, #ffd166 0 var(--volumePercent), rgba(17,24,39,0.13) var(--volumePercent) 100%);
  border-color: rgba(17,24,39,0.10);
}

body.dark-mode .settingsVolumeControl input[type="range"]::-moz-range-track {
  background:
    linear-gradient(90deg, #ffd166 0 var(--volumePercent), rgba(17,24,39,0.13) var(--volumePercent) 100%);
  border-color: rgba(17,24,39,0.10);
}