@media (max-width: 768px) {
  .toggle-box {
    margin: 20px 0 20px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 !important;
  }
}

.toggle-box {
  display: flex;
  align-items: center;
  flex: 2;
  justify-content: center;
}

.toggleSwitch {
  width: 110px;
  height: 40px;
  display: block;
  position: relative;
  border-radius: 30px;
  background-color: #fff;
  box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
  cursor: pointer;
  margin: 0 0 0 5px;
}

.toggleSwitch .toggleButton {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: cornflowerblue;
}

#toggle:checked ~ .toggleSwitch {
  background: cornflowerblue;
}

#toggle:checked ~ .toggleSwitch .toggleButton {
  left: calc(100% - 25px);
  background: #fff;
}

.toggleSwitch,
.toggleButton {
  transition: all 0.2s ease-in;
}

/* 기본상태 스타일 */
.toggle-text-1 {
  color: cornflowerblue;
  top: 6px;
  left: 28px;
  position: relative;
}

.toggle-text-2 {
  color: white;
  top: 6px;
  left: 18px;
  position: relative;
}

/* 토글 상태 스타일 */
#toggle:checked ~ .toggle-text-1 {
  color: #fff;
}

.toggleSwitch.active .toggle-text-1 {
  display: none;
}

.toggleSwitch .toggle-text-2 {
  display: none;
}

.toggleSwitch.active .toggle-text-2 {
  display: block;
}

#toggle:checked ~ .toggle-text::before {
  content: "displine";
}

.toggle-box {
  display: flex;
  align-items: center;
}
