/* 공통 슬라이더 스타일 */
input[type="range"] {
    -webkit-appearance: none; /* 기본 스타일 제거 */
    width: 100%; /* 슬라이더 너비 */
    height: 10px; /* 슬라이더 높이 */
    border-radius: 5px; /* 슬라이더 모서리 둥글게 */
    background: linear-gradient(90deg, #4CAF50, #2196F3); /* 그라데이션 색상 */
    outline: none; /* 초점 표시 제거 */
    opacity: 0.9; /* 살짝 투명 효과 */
    transition: opacity 0.2s; /* 마우스 오버 시 부드러운 전환 */
}

/* 마우스 오버 시 스타일 */
input[type="range"]:hover {
    opacity: 1; /* 불투명해짐 */
}

/* 슬라이더 손잡이 스타일 */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* 기본 스타일 제거 */
    width: 20px; /* 손잡이 너비 */
    height: 20px; /* 손잡이 높이 */
    border-radius: 50%; /* 원형 손잡이 */
    background: #FF5722; /* 손잡이 색상 */
    cursor: pointer; /* 포인터 커서 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 손잡이 그림자 */
    transition: background 0.2s, transform 0.2s; /* 색상 및 크기 전환 */
}

/* 마우스 오버 시 손잡이 스타일 */
input[type="range"]::-webkit-slider-thumb:hover {
    background: #E64A19; /* 손잡이 색상 어두워짐 */
    transform: scale(1.2); /* 손잡이 커짐 */
}

/* 파이어폭스 지원 */
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FF5722;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.2s, transform 0.2s;
}

input[type="range"]::-moz-range-thumb:hover {
    background: #E64A19;
    transform: scale(1.2);
}

/* 슬라이더의 기본 트랙 스타일 (파이어폭스) */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #4CAF50, #2196F3);
    outline: none;
}