.switch {
    position: relative;
    display: inline-block;
    width: 5vw; /* 슬라이더 너비 조정 */
    height: 2.5vw; /* 슬라이더 높이 조정 */
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc; /* off 상태의 배경색 */
transition: .5s;
border-radius: 0.5vw;
}
.slider:hover {
background-color: rgb(100, 92, 150); /* on 상태의 배경색 */
}
.slider:before {
position: absolute;
content: "";
height: 1.5vw;
width: 1.5vw;
left: 0.5vw;
bottom: 0.5vw;
background-color: #faebd7;
transition: .5s;
border-radius: 0.5vw;
}
input:checked + .slider {
background-color: darkslateblue; /* on 상태의 배경색 */
}
input:checked + .slider:hover {
background-color: rgb(100, 92, 150); /* on 상태의 배경색 */
}
input:checked + .slider:before {
transform: translateX(2.5vw); /* 버튼 이동 거리 */
}

.button-label {
position: absolute;
color: white; /* 글자색 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}