:root {
    --switch-dia: 20px;
    --switch-length: 30px;
    --switch-gap: 3px;
}

/* 숨겨진 checkbox */
.form-input > input[type="checkbox"] {
    display: none;
}
  
/* 스위치 스타일을 label에 바로 적용 */
.form-input:has(input[type="checkbox"]) > label {
    display: inline-block;
    width:          calc(var(--switch-dia) + var(--switch-length));
    height:         var(--switch-dia);
    line-height:    calc(var(--switch-dia) + var(--switch-gap) / 2);
    padding:        var(--switch-gap);
    background-color: #ccc;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    text-align: right;
    transition: background-color 0.3s ease;
}
  
/* 토글 버튼 부분 */
.form-input:has(input[type="checkbox"]) > label::after {
    content: "";
    position: absolute;
    width:  var(--switch-dia);
    height: var(--switch-dia);
    left: 0%; top: 50%;
    transform: translate(var(--switch-gap), -50%);
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
  
/* 체크 상태 반영 */
.form-input:has(input[type="checkbox"]:checked) > label {
    background-color: #4caf50;
    text-align: left;
    color: white;
}
.form-input:has(input[type="checkbox"]:checked) > label::after {
    transform: translate(calc(var(--switch-gap) + var(--switch-length)), -50%);
}