/* 토글버튼 */
.label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}

.toggle_input[type="checkbox"] {
appearance: none;
position: relative;
border: max(2px, 0.1em) solid gray;
border-radius: 1.25em;
width: 2.8rem;
height: 1.5em;
}

.toggle_input[type="checkbox"]::before {
content: "";
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%) !important;
width: 1em;
height: 1em;
border-radius: 50%;
transform: scale(0.8);
background-color: gray;
transition: left 250ms linear;
}

.toggle_input[type="checkbox"]:checked {
background-color: #008C43;
border-color: #008C43;
}

.toggle_input[type="checkbox"]:checked::before {
background-color: white;
left: 1.37em;
}

.toggle_input[type="checkbox"]:disabled {
border-color: lightgray;
opacity: 0.7;
cursor: not-allowed;
}

.toggle_input[type="checkbox"]:disabled:before {
background-color: lightgray;
}

.toggle_input[type="checkbox"]:disabled + span {
opacity: 0.7;
cursor: not-allowed;
}

.toggle_input[type="checkbox"]:focus-visible {
outline-offset: max(2px, 0.1em);
outline: max(2px, 0.1em) solid #008C43;
}

.toggle_input[type="checkbox"]:enabled:hover {
box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
}


.toggle_button {
border: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

/* 라디오버튼 */
.radio_label {
    font-size: 18px;
    padding: 0 0.4em;
  }
  
.radio_input[type="radio"] + span {
    vertical-align: middle;
    font-size: 17px;
  }
  
  .radio_input[type="radio"] {
    appearance: none;
    border: max(2px, 0.1em) solid gray;
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    margin-bottom: 2px;
  }
  
.radio_input[type="radio"]:checked {
    border: 0.4em solid #008C43;
  }
  
  .radio_input[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted #008C43;
  }
  
  .radio_input[type="radio"]:hover {
    /* box-shadow: 0 0 0 max(4px, 0.2em) lightgray; */
    background-color: #eee;
    cursor: pointer;
  }
  
  .radio_input[type="radio"]:hover + span {
    cursor: pointer;
  }
  
  .radio_input[type="radio"]:disabled {
    background-color: lightgray;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
  }
  
  .radio_input[type="radio"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
  }
  
  /* Global CSS */
  .radio_button {
    display: flex;
    border: none;
    margin: 0;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }