/**
 * ConnectPlace component styles
 * Status-driven styling for selectTime / inputText.
 */
input:focus { outline: none !important; }

.select_time, .select_box {
  box-sizing: border-box !important;
  width: 120px !important;
  padding: 0 40px 0 16px !important;
  border-radius: 6px !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-weight: var(--txt-weight-regular) !important;
  line-height: var(--txt-line-height) !important;
  letter-spacing: var(--txt-letter-spacing) !important;
}

.ui-selectmenu-text {
  display: inline-block !important;
  width: 100% !important; /* 텍스트 잘림 현상을 피하기 위해 110% -> 길어지면 ... 표시, 다시 100%로 조정 */
  height: 100% !important;
  padding: 0 !important;
  margin-right: 0 !important;
  color: var(--txt-color-t900) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

.select_time.select_time_44 ~ span ~ div .ui-menu .ui-menu-item,
.select_box.select_box_44 ~ span ~ div .ui-menu .ui-menu-item {
  height: 44px !important;
  line-height: 44px !important;
}

.select_time.select_time_36 ~ span ~ div .ui-menu .ui-menu-item,
.select_box.select_box_36 ~ span ~ div .ui-menu .ui-menu-item {
  height: 36px !important;
  line-height: 36px !important;
}

.select_time.select_time_52 ~ span ~ div .ui-menu .ui-menu-item,
.select_box.select_box_52 ~ span ~ div .ui-menu .ui-menu-item {
  height: 52px !important;
  line-height: 52px !important;
}

.select_time ~ span ~ div .ui-menu .ui-menu-item-wrapper.is-selected,
.select_box ~ span ~ div .ui-menu .ui-menu-item-wrapper.is-selected {
  color: var(--txt-color-p600) !important;
}

.select_time.select_time_44,
.select_time.select_time_44 ~ span .ui-selectmenu-text,
.select_time.select_time_44 ~ span ~ div .ui-menu .ui-menu-item-wrapper,
.select_box.select_box_44,
.select_box.select_box_44 ~ span .ui-selectmenu-text,
.select_box.select_box_44 ~ div .ui-menu .ui-menu-item-wrapper {
  height: 44px !important;
  font-size: var(--txt-size-14) !important;
  font-weight: 400 !important;
  line-height: 44px !important;
}

.select_time.select_time_36,
.select_time.select_time_36 ~ span .ui-selectmenu-text,
.select_time.select_time_36 ~ span ~ div .ui-menu .ui-menu-item-wrapper,
.select_box.select_box_36,
.select_box.select_box_36 ~ span .ui-selectmenu-text,
.select_box.select_box_36 ~ div .ui-menu .ui-menu-item-wrapper {
  height: 36px !important;
  font-size: var(--txt-size-14) !important;
  font-weight: 400 !important;
  line-height: 36px !important;
}

.select_time.select_time_36,
.select_time.select_time_44,
.select_box.select_box_36,
.select_box.select_box_44 {
  background-size: 16px 16px !important;
}

.select_time.select_time_52,
.select_time.select_time_52 ~ span .ui-selectmenu-text,
.select_time.select_time_52 ~ span ~ div .ui-menu .ui-menu-item-wrapper,
.select_box.select_box_52,
.select_box.select_box_52 ~ span .ui-selectmenu-text,
.select_box.select_box_52 ~ span ~ div .ui-menu .ui-menu-item-wrapper {
  height: 52px !important;
  font-size: var(--txt-size-16) !important;
  font-weight: 400 !important;
  line-height: 52px !important;
}

.select_time.select_time_52, .select_box.select_box_52 {
  background-size: 24px 24px !important;
}

.select_time[status="default"],
.select_time[status="done"],
.select_box[status="default"],
.select_box[status="done"] {
  border: 1px solid var(--clr-w400) !important;
  background-color: var(--clr-w100) !important;
  color: var(--txt-color-t900) !important;
  -webkit-text-fill-color: var(--txt-color-t900) !important;
  caret-color: var(--txt-color-t900) !important;
}

.select_time[status="hover"], .select_box[status="hover"] {
  border: 1px solid var(--clr-w900) !important;
  background-color: var(--clr-w100) !important;
  color: var(--txt-color-t900) !important;
  -webkit-text-fill-color: var(--txt-color-t900) !important;
  caret-color: var(--txt-color-t900) !important;
}

.select_time[status="active"], .select_box[status="active"] {
  border: 1px solid var(--clr-p600) !important;
  background-color: var(--clr-w100) !important;
  color: var(--txt-color-t900) !important;
  -webkit-text-fill-color: var(--txt-color-t900) !important;
  caret-color: var(--txt-color-t900) !important;
}

.select_time[status="disabled"], .select_box[status="disabled"] {
  border: 1px solid var(--clr-n60) !important;
  background-color: var(--clr-n40) !important;
  color: var(--txt-color-t70) !important;
  -webkit-text-fill-color: var(--txt-color-t70) !important;
  caret-color: var(--txt-color-t70) !important;
}

.select_time[status="error"], .select_box[status="error"] {
  border: 1px solid var(--clr-r900) !important;
  background-color: var(--clr-w100) !important;
  color: var(--txt-color-t900) !important;
  -webkit-text-fill-color: var(--txt-color-t900) !important;
  caret-color: var(--txt-color-t900) !important;
}

.select_time[status="default"],
.select_time[status="hover"],
.select_time[status="error"],
.select_time[status="done"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 15.5' fill='none'%3E%3Cpath d='M7.75 3.86111V7.75H11.6389M7.75 14.75C3.88401 14.75 0.75 11.616 0.75 7.75C0.75 3.88401 3.88401 0.75 7.75 0.75C11.616 0.75 14.75 3.88401 14.75 7.75C14.75 11.616 11.616 14.75 7.75 14.75Z' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_time.select_time_52[status="default"],
.select_time.select_time_52[status="hover"],
.select_time.select_time_52[status="error"],
.select_time.select_time_52[status="done"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Csvg x='3' y='3' width='18' height='18' viewBox='0 0 20 20' fill='none' overflow='visible'%3E%3Cpath d='M10 5V10H15M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19Z' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%3C/svg%3E");
}

.select_time[status="active"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 15.5' fill='none'%3E%3Cpath d='M7.75 3.86111V7.75H11.6389M7.75 14.75C3.88401 14.75 0.75 11.616 0.75 7.75C0.75 3.88401 3.88401 0.75 7.75 0.75C11.616 0.75 14.75 3.88401 14.75 7.75C14.75 11.616 11.616 14.75 7.75 14.75Z' stroke='%23267BFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_time.select_time_52[status="active"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Csvg x='3' y='3' width='18' height='18' viewBox='0 0 20 20' fill='none' overflow='visible'%3E%3Cpath d='M10 5V10H15M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19Z' stroke='%23267BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%3C/svg%3E");
}

.select_time[status="disabled"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 15.5' fill='none'%3E%3Cpath d='M7.75 3.86111V7.75H11.6389M7.75 14.75C3.88401 14.75 0.75 11.616 0.75 7.75C0.75 3.88401 3.88401 0.75 7.75 0.75C11.616 0.75 14.75 3.88401 14.75 7.75C14.75 11.616 11.616 14.75 7.75 14.75Z' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_time.select_time_52[status="disabled"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Csvg x='3' y='3' width='18' height='18' viewBox='0 0 20 20' fill='none' overflow='visible'%3E%3Cpath d='M10 5V10H15M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19Z' stroke='%23B8BEC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%3C/svg%3E");
}

.select_box {
  --select-box-left-icon-16: none;
  --select-box-left-icon-24: none;
}

.select_box.select_box_has_icon {
  padding-left: 40px;
  background-position: left 16px center, right 16px center;
  background-repeat: no-repeat, no-repeat;
}

.select_box.select_box_has_icon.select_box_52 {
  padding-left: 48px;
}

.select_box[status="default"],
.select_box[status="hover"],
.select_box[status="error"],
.select_box[status="done"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_has_icon[status="default"],
.select_box.select_box_has_icon[status="hover"],
.select_box.select_box_has_icon[status="error"],
.select_box.select_box_has_icon[status="done"] {
  background-image: var(--select-box-left-icon-16), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px, 16px 16px;
}

.select_box.select_box_52[status="default"],
.select_box.select_box_52[status="hover"],
.select_box.select_box_52[status="error"],
.select_box.select_box_52[status="done"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_52.select_box_has_icon[status="default"],
.select_box.select_box_52.select_box_has_icon[status="hover"],
.select_box.select_box_52.select_box_has_icon[status="error"],
.select_box.select_box_52.select_box_has_icon[status="done"] {
  background-image: var(--select-box-left-icon-24), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 24px 24px, 24px 24px;
}

.select_box[status="active"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 7.75L7.75 0.75L14.75 7.75' stroke='%23267BFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_has_icon[status="active"] {
  background-image: var(--select-box-left-icon-16), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 7.75L7.75 0.75L14.75 7.75' stroke='%23267BFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px, 16px 16px;
}

.select_box.select_box_52[status="active"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 10L10 1L19 10' stroke='%23267BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_52.select_box_has_icon[status="active"] {
  background-image: var(--select-box-left-icon-24), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 10L10 1L19 10' stroke='%23267BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 24px 24px, 24px 24px;
}

.select_box[status="disabled"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_has_icon[status="disabled"] {
  background-image: var(--select-box-left-icon-16), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px, 16px 16px;
}

.select_box.select_box_52[status="disabled"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23B8BEC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_52.select_box_has_icon[status="disabled"] {
  background-image: var(--select-box-left-icon-24), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23B8BEC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 24px 24px, 24px 24px;
}

/* jQuery UI selectmenu mirror styles */
.select_time ~ span.ui-selectmenu-button,
.select_time[status="default"] ~ span.ui-selectmenu-button,
.select_time[status="default"] ~ span.ui-selectmenu-button:hover,
.select_time[status="default"] ~ span.ui-selectmenu-button:active,
.select_time[status="default"] ~ span.ui-selectmenu-button-open,
.select_box ~ span.ui-selectmenu-button,
.select_box[status="default"] ~ span.ui-selectmenu-button,
.select_box[status="default"] ~ span.ui-selectmenu-button:hover,
.select_box[status="default"] ~ span.ui-selectmenu-button:active,
.select_box[status="default"] ~ span.ui-selectmenu-button-open {
  box-sizing: border-box !important;
  padding: 0 38px 0 16px !important; /* 08:00, 09:00, 20:00, 22:00 깨짐 보완: 40px -> 38px */
  border-radius: 6px !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-weight: var(--txt-weight-regular) !important;
  line-height: var(--txt-line-height) !important;
  letter-spacing: var(--txt-letter-spacing) !important;
  outline: none !important;
}

.select_time ~ span.ui-selectmenu-button,
.select_box ~ span.ui-selectmenu-button {
  height: 44px;
  font-size: var(--txt-size-14);
  background-size: 16px 16px;
}

.select_time.select_time_36 ~ span.ui-selectmenu-button,
.select_box.select_box_36 ~ span.ui-selectmenu-button {
  height: 36px;
}

.select_time.select_time_52 ~ span.ui-selectmenu-button,
.select_box.select_box_52 ~ span.ui-selectmenu-button {
  height: 52px;
  font-size: var(--txt-size-16);
  background-size: 24px 24px;
}

.select_time[status="default"] ~ span.ui-selectmenu-button,
.select_time[status="done"] ~ span.ui-selectmenu-button,
.select_box[status="default"] ~ span.ui-selectmenu-button,
.select_box[status="done"] ~ span.ui-selectmenu-button {
  border: 1px solid var(--clr-w400);
  background-color: var(--clr-w100);
  color: var(--txt-color-t900);
}

.select_time[status="hover"] ~ span.ui-selectmenu-button,
.select_time[status="default"] ~ span.ui-selectmenu-button:hover,
.select_box[status="hover"] ~ span.ui-selectmenu-button,
.select_box[status="default"] ~ span.ui-selectmenu-button:hover {
  border: 1px solid var(--clr-w900) !important;
}

.select_time[status="active"] ~ span.ui-selectmenu-button,
.select_time[status="default"] ~ span.ui-selectmenu-button-open,
.select_time[status="default"] ~ span.ui-selectmenu-button:active,
.select_box[status="active"] ~ span.ui-selectmenu-button,
.select_box[status="default"] ~ span.ui-selectmenu-button-open,
.select_box[status="default"] ~ span.ui-selectmenu-button-open:hover,
.select_box[status="default"] ~ span.ui-selectmenu-button:active {
  border: 1px solid var(--clr-p600) !important;
}

.select_time[status="disabled"] ~ span.ui-selectmenu-button,
.select_box[status="disabled"] ~ span.ui-selectmenu-button {
  border: 1px solid var(--clr-n60) !important;
}

.select_time[status="disabled"] ~ span.ui-selectmenu-button .ui-selectmenu-text,
.select_box[status="disabled"] ~ span.ui-selectmenu-button .ui-selectmenu-text {
  color: var(--txt-color-t70) !important;
}

.select_time[status="error"] ~ span.ui-selectmenu-button,
.select_box[status="error"] ~ span.ui-selectmenu-button {
  border: 1px solid var(--clr-r900);
}

.select_time[status="default"] ~ span.ui-selectmenu-button,
.select_time[status="hover"] ~ span.ui-selectmenu-button,
.select_time[status="error"] ~ span.ui-selectmenu-button,
.select_time[status="done"] ~ span.ui-selectmenu-button,
.select_time[status="default"] ~ span.ui-selectmenu-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 15.5' fill='none'%3E%3Cpath d='M7.75 3.86111V7.75H11.6389M7.75 14.75C3.88401 14.75 0.75 11.616 0.75 7.75C0.75 3.88401 3.88401 0.75 7.75 0.75C11.616 0.75 14.75 3.88401 14.75 7.75C14.75 11.616 11.616 14.75 7.75 14.75Z' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.select_time.select_time_52[status="default"] ~ span.ui-selectmenu-button,
.select_time.select_time_52[status="hover"] ~ span.ui-selectmenu-button,
.select_time.select_time_52[status="error"] ~ span.ui-selectmenu-button,
.select_time.select_time_52[status="done"] ~ span.ui-selectmenu-button,
.select_time.select_time_52 ~ span.ui-selectmenu-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Csvg x='3' y='3' width='18' height='18' viewBox='0 0 20 20' fill='none' overflow='visible'%3E%3Cpath d='M10 5V10H15M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19Z' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%3C/svg%3E") !important;
}

.select_time.select_time_52[status="active"] ~ span.ui-selectmenu-button,
.select_time.select_time_52[status="default"] ~ span.ui-selectmenu-button:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Csvg x='3' y='3' width='18' height='18' viewBox='0 0 20 20' fill='none' overflow='visible'%3E%3Cpath d='M10 5V10H15M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19Z' stroke='%23267BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%3C/svg%3E") !important;
}

.select_time[status="disabled"] ~ span.ui-selectmenu-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 15.5' fill='none'%3E%3Cpath d='M7.75 3.86111V7.75H11.6389M7.75 14.75C3.88401 14.75 0.75 11.616 0.75 7.75C0.75 3.88401 3.88401 0.75 7.75 0.75C11.616 0.75 14.75 3.88401 14.75 7.75C14.75 11.616 11.616 14.75 7.75 14.75Z' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_time.select_time_52[status="disabled"] ~ span.ui-selectmenu-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Csvg x='3' y='3' width='18' height='18' viewBox='0 0 20 20' fill='none' overflow='visible'%3E%3Cpath d='M10 5V10H15M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19Z' stroke='%23B8BEC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%3C/svg%3E");
}

.select_time[status="disabled"] ~ span.ui-selectmenu-button,
.select_box[status="disabled"] ~ span.ui-selectmenu-button,
.mypageV2__content-preference .datepicker-style .time-select-wrap .select_time[status="disabled"] ~ span.ui-selectmenu-button.ui-button,
.mypageV2__content-preference .datepicker-style .time-select-wrap .select_box[status="disabled"] ~ span.ui-selectmenu-button.ui-button,
.select_time[status="disabled"] ~ span.ui-selectmenu-button.ui-button,
.select_box[status="disabled"] ~ span.ui-selectmenu-button.ui-button {
  background-color: var(--clr-n40) !important;
  opacity: 1 !important;
}

.select_box.select_box_has_icon ~ span.ui-selectmenu-button {
  padding-left: 40px !important;
  background-position: left 16px center, right 16px center !important;
  background-repeat: no-repeat, no-repeat !important;
}

.select_box.select_box_52.select_box_has_icon ~ span.ui-selectmenu-button {
  padding-left: 48px !important;
}

.select_box[status="default"] ~ span.ui-selectmenu-button,
.select_box[status="hover"] ~ span.ui-selectmenu-button,
.select_box[status="error"] ~ span.ui-selectmenu-button,
.select_box[status="done"] ~ span.ui-selectmenu-button,
.select_box[status="default"] ~ span.ui-selectmenu-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.select_box.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button,
.select_box.select_box_has_icon[status="hover"] ~ span.ui-selectmenu-button,
.select_box.select_box_has_icon[status="error"] ~ span.ui-selectmenu-button,
.select_box.select_box_has_icon[status="done"] ~ span.ui-selectmenu-button,
.select_box.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button:hover {
  background-image: var(--select-box-left-icon-16), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px, 16px 16px !important;
}

.select_box.select_box_52[status="default"] ~ span.ui-selectmenu-button,
.select_box.select_box_52[status="hover"] ~ span.ui-selectmenu-button,
.select_box.select_box_52[status="error"] ~ span.ui-selectmenu-button,
.select_box.select_box_52[status="done"] ~ span.ui-selectmenu-button,
.select_box.select_box_52[status="default"] ~ span.ui-selectmenu-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.select_box.select_box_52.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button,
.select_box.select_box_52.select_box_has_icon[status="hover"] ~ span.ui-selectmenu-button,
.select_box.select_box_52.select_box_has_icon[status="error"] ~ span.ui-selectmenu-button,
.select_box.select_box_52.select_box_has_icon[status="done"] ~ span.ui-selectmenu-button,
.select_box.select_box_52.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button:hover {
  background-image: var(--select-box-left-icon-24), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 24px 24px, 24px 24px !important;
}

.select_box[status="active"] ~ span.ui-selectmenu-button,
.select_box[status="default"] ~ span.ui-selectmenu-button-open,
.select_box[status="default"] ~ span.ui-selectmenu-button-open:hover,
.select_box[status="default"] ~ span.ui-selectmenu-button:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 7.75L7.75 0.75L14.75 7.75' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.select_box.select_box_has_icon[status="active"] ~ span.ui-selectmenu-button,
.select_box.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button-open,
.select_box.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button-open:hover,
.select_box.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button:active {
  background-image: var(--select-box-left-icon-16), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 7.75L7.75 0.75L14.75 7.75' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px, 16px 16px !important;
}

.select_box.select_box_52[status="active"] ~ span.ui-selectmenu-button,
.select_box.select_box_52[status="default"] ~ span.ui-selectmenu-button-open,
.select_box.select_box_52[status="default"] ~ span.ui-selectmenu-button-open:hover,
.select_box.select_box_52[status="default"] ~ span.ui-selectmenu-button:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 10L10 1L19 10' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.select_box.select_box_52.select_box_has_icon[status="active"] ~ span.ui-selectmenu-button,
.select_box.select_box_52.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button-open,
.select_box.select_box_52.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button-open:hover,
.select_box.select_box_52.select_box_has_icon[status="default"] ~ span.ui-selectmenu-button:active {
  background-image: var(--select-box-left-icon-24), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 10L10 1L19 10' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 24px 24px, 24px 24px !important;
}

.select_box[status="disabled"] ~ span.ui-selectmenu-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_has_icon[status="disabled"] ~ span.ui-selectmenu-button {
  background-image: var(--select-box-left-icon-16), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15.5 8.5' fill='none'%3E%3Cpath d='M0.75 0.75L7.75 7.75L14.75 0.75' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px, 16px 16px !important;
}

.select_box.select_box_52[status="disabled"] ~ span.ui-selectmenu-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23B8BEC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.select_box.select_box_52.select_box_has_icon[status="disabled"] ~ span.ui-selectmenu-button {
  background-image: var(--select-box-left-icon-24), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23B8BEC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 24px 24px, 24px 24px !important;
}

/* selectmenu 스크롤바 표시 */
.ui-menu::-webkit-scrollbar { display: block !important; }

/* 모든 스크롤바의 화살표 버튼을 숨김 */
.ui-menu::-webkit-scrollbar-button { display: none !important; }

.ui-selectmenu-menu {
  min-width: 80px !important;
}

.ui-selectmenu-menu .ui-menu {
  margin-top: 4px !important;
  box-shadow: var(--ds-e400) !important;
  border: 1px solid var(--clr-p600) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: auto !important;
  scrollbar-color: var(--clr-w300) transparent !important;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition-property: color !important;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background-color: var(--clr-p200) !important;
  color: var(--txt-color-t900);
  margin: inherit;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled { cursor: default !important; }

.input_text_wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input_text_field_wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input_text {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  border: 1px solid var(--clr-w400) !important;
  background-color: var(--clr-w100) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  color: var(--txt-color-t900) !important;
  -webkit-text-fill-color: var(--txt-color-t900);
  caret-color: var(--txt-color-t900) !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-weight: var(--txt-weight-regular) !important;
  line-height: var(--txt-line-height) !important;
  letter-spacing: var(--txt-letter-spacing) !important;
}

.input_text::placeholder {
  color: var(--txt-color-t70) !important;
  -webkit-text-fill-color: var(--txt-color-t70);
  caret-color: var(--txt-color-t70) !important;
}

.input_text.input_text_36,
.input_text.input_text_44 {
  height: 44px !important;
  font-size: var(--txt-size-14) !important;
  background-size: 16px 16px !important;
}

.input_text.input_text_36 {
  height: 36px !important;
}

.input_text.input_text_52 {
  height: 52px !important;
  font-size: var(--txt-size-16) !important;
  background-size: 24px 24px !important;
}

.input_text_wrapper[status="hover"] .input_text {
  border-color: var(--clr-w900) !important;
}

.input_text_wrapper[status="active"] .input_text {
  border-color: var(--clr-p600) !important;
  background-image: none !important;
}

.input_text_wrapper[status="disabled"] .input_text {
  border-color: var(--clr-n60) !important;
  background-color: var(--clr-n40) !important;
  color: var(--txt-color-t70) !important;
  -webkit-text-fill-color: var(--txt-color-t70) !important;
  caret-color: var(--txt-color-t70) !important;
}

.input_text_wrapper[status="error"] .input_text {
  border-color: var(--clr-r900) !important;
}

.input_text_wrapper[status="error"] .input_text.input_text_36,
.input_text_wrapper[status="error"] .input_text.input_text_44 {
  background-image: url("/figma/svg/error_red_16.svg") !important;
  padding: 0 40px 0 16px !important;
}

.input_text_wrapper[status="error"] .input_text.input_text_52 {
  background-image: url("/figma/svg/error_red_24.svg") !important;
  padding: 0 48px 0 16px !important;
}

.input_text_clear_btn {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.input_text_search_btn {
  display: block;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.input_text_wrapper[status="active"] .input_text_clear_btn {
  display: block;
}

.input_text_wrapper[status="active"] .input_text.input_text_36 ~ .input_text_clear_btn,
.input_text_wrapper[status="active"] .input_text.input_text_44 ~ .input_text_clear_btn {
  width: 16px;
  height: 16px;
  background-image: url("/figma/svg/delete_bluegray_16.svg");
  background-size: 16px 16px;
}

.input_text_wrapper[status="active"] .input_text.input_text_52 ~ .input_text_clear_btn {
  width: 24px;
  height: 24px;
  background-image: url("/figma/svg/delete_bluegray_24.svg");
  background-size: 24px 24px;
}

.input_text_wrapper[status="active"] .input_text[type="number"] ~ .input_text_clear_btn { display: none; }
.input_text_wrapper[status="active"] .input_text[readonly] ~ .input_text_clear_btn { display: none; }

.input_text.input_text_search.input_text_36, 
.input_text.input_text_search.input_text_44 {
  padding: 0 40px 0 16px !important;
}

.input_text.input_text_search.input_text_52 {
  padding: 0 48px 0 16px !important;
}

.input_text.input_text_search.input_text_36 ~ .input_text_search_btn,
.input_text.input_text_search.input_text_44 ~ .input_text_search_btn {
  width: 16px;
  height: 16px;
  background-image: url("/figma/svg/search_black_16.svg");
  background-size: 16px 16px;
}

.input_text.input_text_search.input_text_52 ~ .input_text_search_btn {
  width: 24px;
  height: 24px;
  background-image: url("/figma/svg/search_black_24.svg");
  background-size: 24px 24px;
}

.input_text_error {
  display: none !important;
  margin-top: 4px;
  color: var(--clr-r700);
  font-size: var(--txt-size-12);
  font-family: var(--txt-font-family);
  font-style: var(--txt-font-style);
  font-weight: var(--txt-weight-regular);
  line-height: var(--txt-line-height);
  letter-spacing: var(--txt-letter-spacing);
}

.input_text_wrapper[status="error"] .input_text_error {
  display: block !important;
}

.input_text[readonly],
.input_text::placeholder,
.cp-date-input::placeholder {
  color: var(--txt-color-t70) !important;
  font-size: var(--txt-size-14) !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-weight: var(--txt-weight-regular) !important;
  line-height: var(--txt-line-height) !important;
  letter-spacing: var(--txt-letter-spacing) !important;
  opacity: 1 !important;
}

.input_text.input_text_52[readonly],
.input_text.input_text_52::placeholder,
.cp-size-large .cp-date-input::placeholder {
  font-size: var(--txt-size-16) !important;
}

.input_text_wrapper[status="disabled"] .input_text::placeholder,
.cp-date-picker[status="disabled"] .cp-date-input {
  color: var(--clr-n70) !important;
}

/* Date picker components */
.cp-date-picker,
.cp-date-range-picker {
  position: relative !important;
  display: inline-flex;
  flex-direction: column !important;
  gap: 4px !important;
}

.cp-date-input-wrap {
  position: relative !important;
  display: flex;
  align-items: center !important;
}

.cp-date-input {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--clr-w400) !important;
  border-radius: 6px !important;
  background-color: var(--clr-w100) !important;
  padding: 0 40px 0 16px !important;
  color: var(--txt-color-t900) !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-weight: var(--txt-weight-regular) !important;
  line-height: var(--txt-line-height) !important;
  letter-spacing: var(--txt-letter-spacing) !important;
  cursor: pointer;
}

.cp-size-large .cp-date-input { height: 52px !important; font-size: var(--txt-size-16) !important; }
.cp-size-medium .cp-date-input { height: 44px !important; font-size: var(--txt-size-14) !important; }
.cp-size-small .cp-date-input { height: 36px !important; font-size: var(--txt-size-14) !important; }

.cp-date-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 0;
  transform: translateY(-50%);
  background-color: var(--clr-w800);
  -webkit-mask: url("/figma/svg/calendar_16.svg") no-repeat center / 16px 16px;
  mask: url("/figma/svg/calendar_16.svg") no-repeat center / 16px 16px;
  cursor: pointer;
}

.cp-size-large .cp-date-toggle {
  width: 24px;
  height: 24px;
  -webkit-mask: url("/figma/svg/calendar_24.svg") no-repeat center / 24px 24px;
  mask: url("/figma/svg/calendar_24.svg") no-repeat center / 24px 24px;
}

.cp-date-picker[status="hover"] .cp-date-input,
.cp-date-range-picker[status="hover"][cp-view-type="separated"] .cp-date-input {
  border-color: var(--clr-w900) !important;
  background-color: var(--clr-w100) !important;
}

.cp-date-picker[status="active"] .cp-date-input,
.cp-date-range-picker[status="active"][cp-view-type="separated"] .cp-date-input {
  border-color: var(--clr-p600) !important;
  background-color: var(--clr-w100) !important;
}

.cp-date-picker[status="hover"] .cp-date-toggle,
.cp-date-range-picker[status="hover"][cp-view-type="separated"] .cp-date-toggle {
  background-color: var(--clr-w800) !important;
}

.cp-date-picker[status="active"] .cp-date-toggle,
.cp-date-range-picker[status="active"][cp-view-type="separated"] .cp-date-toggle {
  background-color: var(--clr-w800) !important;
}

.cp-date-picker[status="disabled"] .cp-date-input,
.cp-date-range-picker[status="disabled"][cp-view-type="separated"] .cp-date-input,
.cp-date-range-picker[data-start-fixed="1"] .cp-drp-start .cp-date-input {
  border-color: var(--clr-n60) !important;
  background-color: var(--clr-n40) !important;
  color: var(--txt-color-t70) !important;
  -webkit-text-fill-color: var(--txt-color-t70) !important;
  caret-color: var(--txt-color-t70) !important;
}

.cp-date-picker[status="disabled"] .cp-date-toggle,
.cp-date-range-picker[status="disabled"][cp-view-type="separated"] .cp-date-toggle,
.cp-date-range-picker[data-start-fixed="1"][cp-view-type="separated"] .cp-drp-start .cp-date-toggle {
  background-color: var(--clr-n70) !important;
  pointer-events: none !important;
}

.cp-date-picker[status="error"] .cp-date-input,
.cp-date-range-picker[status="error"][cp-view-type="separated"] .cp-date-input {
  border-color: var(--clr-r900) !important;
}

.cp-date-picker[status="done"] .cp-date-input,
.cp-date-range-picker[status="done"][cp-view-type="separated"] .cp-date-input {
  border-color: var(--clr-w400) !important;
  background-color: var(--clr-w100) !important;
}

.cp-date-popup,
.cp-drp-popup {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 4px) !important;
  z-index: 50 !important;
  background-color: var(--clr-w100) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.15), 0 0 1px 0 rgba(0, 0, 0, 0.30) !important;
  padding: 16px !important;
}

.cp-date-popup.is-open,
.cp-drp-popup.is-open { display: block !important; }

.cp-dp-cal-header,
.cp-drp-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
}

.cp-dp-title {
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-size: var(--txt-size-14) !important;
  font-weight: var(--txt-weight-semibold) !important;
  color: var(--txt-color-t900) !important;
  letter-spacing: -0.28px !important;
  cursor: pointer !important;
}

.cp-dp-title:hover {
  color: var(--txt-color-t70) !important;
}

.cp-dp-nav {
  width: 36px !important;
  height: 36px !important;
  background-color: var(--clr-w100) !important;
  border: 1px solid var(--clr-w300) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.cp-dp-nav:hover {
  color: var(--txt-color-t300) !important;
  background-color: var(--clr-w200) !important;
}

.cp-dp-nav:disabled {
  background-color: var(--clr-n40) !important;
  border: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.cp-prev {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 15L5 8L12 1' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cp-prev:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 15L5 8L12 1' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cp-prev:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 15L5 8L12 1' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cp-next {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 15L12 8L5 1' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cp-next:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 15L12 8L5 1' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cp-next:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 15L12 8L5 1' stroke='%23B8BEC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cp-dp-week,
.cp-dp-day-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  column-gap: 4px !important;
}

.cp-drp-calendars .cp-dp-week, .cp-drp-calendars .cp-dp-day-grid { column-gap: 0 !important; } 

.cp-dp-week {
  padding-bottom: 8px !important;
}

.cp-dp-day-grid {
  row-gap: 8px !important;
}

.cp-dp-week span {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-weight: var(--txt-weight-semibold) !important;
  font-size: var(--txt-size-14) !important;
  color: var(--txt-color-t700) !important;
  letter-spacing: -0.28px !important;
}
.cp-dp-week span:first-child { color: var(--clr-r900) !important; }
.cp-dp-week span:last-child { color: var(--txt-color-p600) !important; }

div.cp-dp-day {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cp-dp-day-btn {
  position: relative !important;
  z-index: 10;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  cursor: pointer !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-weight: var(--txt-weight-medium) !important;
  font-size: var(--txt-size-14) !important;
  color: var(--txt-color-t900) !important;
  letter-spacing: -0.28px !important;
}
.cp-dp-day-btn:hover { background-color: var(--clr-w200) !important; opacity: 1 !important; }

.cp-dp-day-btn.cp-sun { color: var(--clr-r900) !important; }
.cp-dp-day-btn.cp-sat { color: var(--txt-color-p600) !important; }
.cp-dp-day-btn.cp-today { background-color: var(--clr-n600) !important; color: var(--txt-color-t100) !important; }
.cp-dp-day-btn.cp-muted { color: var(--txt-color-t90) !important; }
.cp-dp-day-btn.cp-muted.cp-sun { color: var(--clr-r300) !important; }
.cp-dp-day-btn.cp-muted.cp-sat { color: var(--clr-p400) !important; }
.cp-dp-day-btn.cp-selected { background-color: var(--clr-p600) !important; color: var(--txt-color-t100) !important; }
.cp-dp-day-btn.cp-selected.cp-start { border-radius: 6px 0 0 6px !important; }
.cp-dp-day-btn.cp-selected.cp-end { border-radius: 0 6px 6px 0 !important; }
.cp-dp-day-btn.cp-selected.cp-start.cp-end { border-radius: 6px !important; }
.cp-dp-day-btn.cp-in-range:not(.cp-today) { color: var(--txt-color-p600) !important; }
.cp-dp-day-btn.cp-in-range:hover { background-color: var(--clr-p200) !important; color: var(--txt-color-p600) !important; }
.cp-dp-day-btn.cp-hidden { visibility: hidden; }
.cp-dp-day-btn.cp-out-of-range,
.cp-dp-day-btn:disabled {
  color: var(--clr-n70) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.cp-dp-day-btn.cp-out-of-range:hover,
.cp-dp-day-btn:disabled:hover {
  background: transparent !important;
}

div.cp-in-range {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background-color: var(--clr-p200) !important;
}

.cp-dp-month-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; row-gap: 8px !important; column-gap: 4px !important; }
.cp-dp-year-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; row-gap: 8px !important; column-gap: 4px !important; }

.cp-dp-month-btn,
.cp-dp-year-btn {
  position: relative;
  height: 44px !important;
  padding: 12px 16px !important;
  font-family: var(--txt-font-family) !important;
  font-style: var(--txt-font-style) !important;
  font-size: var(--txt-size-14) !important;
  font-weight: var(--txt-weight-medium) !important;
  color: var(--txt-color-t900) !important;
  letter-spacing: -0.4px !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  cursor: pointer !important;
}

.cp-dp-month-btn:hover,
.cp-dp-year-btn:hover { background-color: var(--clr-w200) !important; color: var(--txt-color-t700) !important; opacity: 1 !important; }

.cp-dp-month-btn.cp-current,
.cp-dp-year-btn.cp-current { background-color: var(--clr-n600) !important; color: var(--clr-w100) !important; }

.cp-dp-month-btn.cp-selected,
.cp-dp-year-btn.cp-selected { background-color: var(--clr-p600) !important; color: var(--clr-w100) !important; }

.cp-date-error { color: var(--clr-r700) !important; font-size: var(--txt-size-12) !important; }

.cp-date-range-picker .cp-drp-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  background-color: var(--clr-w100) !important;
  overflow: hidden !important;
}

.cp-date-range-picker[cp-view-type="separated"] .cp-drp-inputs {
  border: 0 !important;
  width: 336px !important;
}

.cp-date-range-picker[cp-view-type="combined"] .cp-drp-inputs {
  --cp-drp-center-icon-size: 16px;
  --cp-drp-center-icon-margin-x: 8px;
  --cp-drp-input-padding-x: 16px;
  border: 1px solid var(--clr-w400) !important;
  border-radius: 6px !important;
  width: 280px !important;
}

.cp-date-range-picker[cp-view-type="combined"].cp-size-large .cp-drp-inputs {
  --cp-drp-center-icon-size: 24px;
  --cp-drp-center-icon-margin-x: 10px;
  --cp-drp-input-padding-x: 24px;
}

.cp-date-range-picker[cp-view-type="combined"] .cp-drp-inputs .cp-date-input-wrap {
  position: relative !important;
}

.cp-date-range-picker[cp-view-type="combined"] .cp-drp-inputs .cp-date-input {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding: 0 var(--cp-drp-center-icon-margin-x) 0 var(--cp-drp-input-padding-x) !important;
}

/* .cp-drp-inputs border 상하 1px 차감 */
.cp-date-range-picker.cp-size-large[cp-view-type="combined"] .cp-drp-inputs .cp-date-input { height: 50px !important; }
.cp-date-range-picker.cp-size-medium[cp-view-type="combined"] .cp-drp-inputs .cp-date-input { height: 42px !important; }
.cp-date-range-picker.cp-size-small[cp-view-type="combined"] .cp-drp-inputs .cp-date-input { height: 34px !important; }

.cp-date-range-picker[cp-view-type="combined"] .cp-drp-inputs .cp-date-input:focus { outline:none }

.cp-date-range-picker[cp-view-type="combined"] .cp-drp-inputs .cp-drp-start .cp-date-input {
  text-align: right;
}

.cp-date-range-picker[cp-view-type="combined"] .cp-drp-inputs .cp-drp-end .cp-date-input {
  padding: 0 var(--cp-drp-input-padding-x) 0 var(--cp-drp-center-icon-margin-x) !important;
  text-align: left;
}

.cp-date-range-picker[cp-view-type="combined"].cp-size-large .cp-drp-inputs .cp-date-input {
  max-width: 10rem !important;
}

.cp-drp-center-icon {
  width: var(--cp-drp-center-icon-size);
  height: var(--cp-drp-center-icon-size);
  border: 0;
  cursor: pointer;
}

button.cp-drp-center-icon {
  background-color: var(--clr-n400);
  -webkit-mask: url("/figma/svg/calendar_16.svg") no-repeat center / 16px 16px;
  mask: url("/figma/svg/calendar_16.svg") no-repeat center / 16px 16px;
}

div.cp-drp-center-icon { width: 16px !important; text-align: center !important; }

.cp-size-large .cp-drp-center-icon {
  -webkit-mask: url("/figma/svg/calendar_24.svg") no-repeat center / 24px 24px;
  mask: url("/figma/svg/calendar_24.svg") no-repeat center / 24px 24px;
}

.cp-date-range-picker[status="hover"][cp-view-type="combined"] .cp-drp-inputs {
  border-color: var(--clr-w900) !important;
}

.cp-date-range-picker[status="active"][cp-view-type="combined"] .cp-drp-inputs {
  border-color: var(--clr-p600) !important;
}

.cp-date-range-picker[status="disabled"][cp-view-type="combined"] .cp-drp-inputs {
  border-color: var(--clr-n60) !important;
  background-color: var(--clr-n40) !important;
}

.cp-date-range-picker[status="error"][cp-view-type="combined"] .cp-drp-inputs {
  border-color: var(--clr-r900) !important;
}

.cp-date-range-picker[status="hover"][cp-view-type="combined"] .cp-drp-center-icon {
  background-color: var(--clr-w800) !important;
}

.cp-date-range-picker[status="active"][cp-view-type="combined"] .cp-drp-center-icon {
  background-color: var(--clr-w800) !important;
}

.cp-date-range-picker[status="disabled"][cp-view-type="combined"] .cp-drp-center-icon {
  background-color: var(--clr-n70) !important;
  pointer-events: none !important;
}

.cp-drp-title-wrap {
  display: flex !important;
  flex: 1 1 0% !important;
  align-items: center !important;
}

.cp-drp-title {
  flex: 1 1 0% !important;
  display: flex !important;
  justify-content: center !important;
  font-size: var(--txt-size-14) !important;
  font-weight: var(--txt-weight-semibold) !important;
  color: var(--txt-color-t900) !important;
}

.cp-drp-title-gap {
  width: 1px !important;
  background-color: transparent !important;
  margin-left: 1rem;
  margin-right: 1rem;
}

.cp-drp-calendars { display: flex !important; gap: 20px !important; }

/* ButtonEx */
.btn_ex {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.btn_ex.btn_ex_state_disabled {
  pointer-events: none !important;
}

.btn_ex.btn_ex_size_h52 { min-width: 130px; height: 52px !important; padding: 0 24px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.32px !important; }
.btn_ex.btn_ex_size_h44 { min-width: 100px; height: 44px !important; padding: 0 16px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.28px !important; }
.btn_ex.btn_ex_size_h36 { min-width: 80px; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.28px !important; }

.btn_ex.btn_ex_icon_only.btn_ex_size_h52 { width: 52px !important; height: 52px !important; padding: 0 !important; }
.btn_ex.btn_ex_icon_only.btn_ex_size_h44 { width: 44px !important; height: 44px !important; padding: 0 !important; }
.btn_ex.btn_ex_icon_only.btn_ex_size_h36 { width: 36px !important; height: 36px !important; padding: 0 !important; }

.btn_ex.btn_ex_with_icon_text.btn_ex_size_h36 { gap: 4px !important; }
.btn_ex.btn_ex_with_icon_text.btn_ex_size_h44,
.btn_ex.btn_ex_with_icon_text.btn_ex_size_h52 { gap: 8px !important; }

.btn_ex_icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.btn_ex_variant_blue.btn_ex_state_default { background: var(--clr-p600) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_blue.btn_ex_state_default:hover { background: var(--clr-p400) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_blue.btn_ex_state_default:active { background: var(--clr-p800) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_blue.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: none !important; }

.btn_ex_variant_skyblue.btn_ex_state_default { background: var(--clr-p200) !important; color: var(--clr-p600) !important; border: none !important; }
.btn_ex_variant_skyblue.btn_ex_state_default:hover { background: var(--clr-p100) !important; color: var(--clr-p400) !important; border: none !important; }
.btn_ex_variant_skyblue.btn_ex_state_default:active { background: var(--clr-p300) !important; color: var(--clr-p600) !important; border: none !important; }
.btn_ex_variant_skyblue.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: none !important; }

.btn_ex_variant_navyblue.btn_ex_state_default { background: var(--clr-n700) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_navyblue.btn_ex_state_default:hover { background: var(--clr-n500) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_navyblue.btn_ex_state_default:active { background: var(--clr-n900) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_navyblue.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: none !important; }

.btn_ex_variant_bluegray.btn_ex_state_default { background: var(--clr-n100) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_bluegray.btn_ex_state_default:hover { background: var(--clr-n80) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_bluegray.btn_ex_state_default:active { background: var(--clr-n300) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_bluegray.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: none !important; }

.btn_ex_variant_black.btn_ex_state_default { background: var(--clr-w800) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_black.btn_ex_state_default:hover { background: var(--clr-w600) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_black.btn_ex_state_default:active { background: var(--clr-w700) !important; color: var(--txt-color-t100) !important; border: none !important; }
.btn_ex_variant_black.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: none !important; }

.btn_ex_variant_lightgray.btn_ex_state_default { background: var(--clr-w200) !important; color: var(--txt-color-t900) !important; border: 1px solid var(--clr-w200) !important; }
.btn_ex_variant_lightgray.btn_ex_state_default:hover { background: var(--clr-w100) !important; color: var(--txt-color-t300) !important; border: 1px solid var(--clr-w200) !important; }
.btn_ex_variant_lightgray.btn_ex_state_default:active { background: var(--clr-w300) !important; color: var(--txt-color-t500) !important; border: 1px solid var(--clr-w300) !important; }
.btn_ex_variant_lightgray.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: 1px solid var(--clr-n40) !important; }

.btn_ex_variant_outline_blue.btn_ex_state_default { background: var(--clr-w100) !important; color: var(--clr-p600) !important; border: 1px solid var(--clr-p600) !important; }
.btn_ex_variant_outline_blue.btn_ex_state_default:hover { background: var(--clr-w100) !important; color: var(--clr-p400) !important; border: 1px solid var(--clr-p400) !important; }
.btn_ex_variant_outline_blue.btn_ex_state_default:active { background: var(--clr-w100) !important; color: var(--clr-p800) !important; border: 1px solid var(--clr-p800) !important; }
.btn_ex_variant_outline_blue.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: 1px solid var(--clr-n40) !important; }

.btn_ex_variant_outline_navyblue.btn_ex_state_default { background: var(--clr-w100) !important; color: var(--clr-n700) !important; border: 1px solid var(--clr-n700) !important; }
.btn_ex_variant_outline_navyblue.btn_ex_state_default:hover { background: var(--clr-n30) !important; color: var(--clr-n500) !important; border: 1px solid var(--clr-n500) !important; }
.btn_ex_variant_outline_navyblue.btn_ex_state_default:active { background: var(--clr-w100) !important; color: var(--clr-n900) !important; border: 1px solid var(--clr-n900) !important; }
.btn_ex_variant_outline_navyblue.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: 1px solid var(--clr-n40) !important; }

.btn_ex_variant_outline_bluegray.btn_ex_state_default { background: var(--clr-w100) !important; color: var(--clr-n100) !important; border: 1px solid var(--clr-n100) !important; }
.btn_ex_variant_outline_bluegray.btn_ex_state_default:hover { background: var(--clr-n20) !important; color: var(--clr-n80) !important; border: 1px solid var(--clr-n80) !important; }
.btn_ex_variant_outline_bluegray.btn_ex_state_default:active { background: var(--clr-w100) !important; color: var(--clr-n300) !important; border: 1px solid var(--clr-n300) !important; }
.btn_ex_variant_outline_bluegray.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: 1px solid var(--clr-n40) !important; }

.btn_ex_variant_outline_black.btn_ex_state_default { background: var(--clr-w100) !important; color: var(--txt-color-t900) !important; border: 1px solid var(--clr-w800) !important; }
.btn_ex_variant_outline_black.btn_ex_state_default:hover { background: var(--clr-w200) !important; color: var(--txt-color-t300) !important; border: 1px solid var(--clr-w600) !important; }
.btn_ex_variant_outline_black.btn_ex_state_default:active { background: var(--clr-w100) !important; color: var(--txt-color-t500) !important; border: 1px solid var(--clr-w700) !important; }
.btn_ex_variant_outline_black.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: 1px solid var(--clr-n40) !important; }

.btn_ex_variant_outline_lightgray.btn_ex_state_default { background: var(--clr-w100) !important; color: var(--txt-color-t900) !important; border: 1px solid var(--clr-w300) !important; }
.btn_ex_variant_outline_lightgray.btn_ex_state_default:hover { background: var(--clr-w200) !important; color: var(--txt-color-t700) !important; border: 1px solid var(--clr-w300) !important; }
.btn_ex_variant_outline_lightgray.btn_ex_state_default:active { background: var(--clr-w100) !important; color: var(--txt-color-t500) !important; border: 1px solid var(--clr-w400) !important; }
.btn_ex_variant_outline_lightgray.btn_ex_state_disabled { background: var(--clr-n40) !important; color: var(--clr-n70) !important; border: 1px solid var(--clr-n40) !important; }

.btn_ex_variant_ghost_blue.btn_ex_state_default { background: transparent !important; color: var(--clr-p600) !important; border: none !important; }
.btn_ex_variant_ghost_blue.btn_ex_state_default:hover { background: transparent !important; color: var(--clr-p400) !important; border: none !important; }
.btn_ex_variant_ghost_blue.btn_ex_state_default:active { background: transparent !important; color: var(--clr-p800) !important; border: none !important; }
.btn_ex_variant_ghost_blue.btn_ex_state_disabled { background: transparent !important; color: var(--clr-n70) !important; border: none !important; }

.btn_ex_variant_ghost_black.btn_ex_state_default { background: transparent !important; color: var(--txt-color-t900) !important; border: none !important; }
.btn_ex_variant_ghost_black.btn_ex_state_default:hover { background: transparent !important; color: var(--txt-color-t900) !important; border: none !important; }
.btn_ex_variant_ghost_black.btn_ex_state_default:active { background: transparent !important; color: var(--txt-color-t900) !important; border: none !important; }
.btn_ex_variant_ghost_black.btn_ex_state_disabled { background: transparent !important; color: var(--clr-n70) !important; border: none !important; }

/* ==========================================================================
   체크박스 (Workit 컴포넌트)
   ========================================================================== */
.custom-checkbox-wrap {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.custom-checkbox-wrap .checkbox-box {
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--clr-w400);
  border-radius: 4px;
  background-color: var(--clr-w100);
  position: relative;
  transition: all 0.2s ease;
}

.custom-checkbox-wrap.h20 .checkbox-box {
  width: 20px;
  height: 20px;
}

/* 호버 효과 */
.custom-checkbox-wrap:hover .checkbox-box {
  border-color: var(--clr-w900);
}

/* 실제 input이 checked 되면 span 스타일 변경 */
.custom-checkbox-wrap input:checked + .checkbox-box {
  background-color: var(--clr-p600);
  border: 0;
}

.custom-checkbox-wrap input:disabled + .checkbox-box {
  background-color: var(--clr-n40);
  border: 1px solid var(--clr-n60);
  cursor: default;
}

/* 체크 표시 아이콘 */
.custom-checkbox-wrap .checkbox-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  mask: url("/figma/svg/check_12.svg") no-repeat center / contain;
  -webkit-mask: url("/figma/svg/check_12.svg") no-repeat center / contain;
  background-color: var(--clr-w100);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: all 0.2s ease;
}

.custom-checkbox-wrap.h20 .checkbox-box::after {
  width: 14px;
  height: 14px;
  mask: url("/figma/svg/check_14.svg") no-repeat center / contain;
  -webkit-mask: url("/figma/svg/check_14.svg") no-repeat center / contain;
}

.custom-checkbox-wrap input:checked + .checkbox-box::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.custom-checkbox-wrap input:checked:disabled + .checkbox-box::after {
  background-color: var(--clr-n70);
}

.custom-checkbox-wrap.h20 input:checked:disabled + .checkbox-box::after {
  background-color: var(--clr-n70);
}

/* ==========================================================================
   라디오 버튼 (Workit 컴포넌트)
   ========================================================================== */
.custom-radio-wrap {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

  .custom-radio-wrap + span {
    cursor: pointer;
  }

  .custom-radio-wrap .radio-circle {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--clr-w400);
    border-radius: 50%;
    background-color: var(--clr-w100);
    position: relative;
    transition: all 0.2s ease;
  }

    .custom-radio-wrap.h20 .radio-circle {
      width: 20px;
      height: 20px;
    }

  /* 호버 효과 */
  .custom-radio-wrap:hover .radio-circle {
    border-color: var(--clr-p600);
  }

  /* 실제 input이 checked 되면 span 스타일 변경 */
  .custom-radio-wrap input:checked + .radio-circle {
    background-color: var(--clr-p600);
    border-color: var(--clr-p600);
  }

  /* 내부 흰색 원 (반지름 3px -> 지름 6px) */
  .custom-radio-wrap .radio-circle::after {
    content: "";
    position: absolute;
    display: none;
    width: 6px;
    height: 6px;
    background-color: var(--clr-w100);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .custom-radio-wrap.h20 .radio-circle::after {
    width: 8px;
    height: 8px;
  }

  .custom-radio-wrap input:checked + .radio-circle::after {
    display: block;
  }

input[type=checkbox].toggle {
  display: none;
}

input[type=checkbox].toggle + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 20px;
  line-height: 20px;
  padding-right: 44px;
  font-family: var(--txt-font-family);
  font-size: var(--txt-size-14);
  font-style: var(--txt-font-style);
  font-weight: var(--txt-weight-regular);
  color: var(--txt-color-t900);
  letter-spacing: -0.28px;
}

input[type=checkbox].toggle.h28 + label {
  height: 28px;
  line-height: 28px;
  font-size: var(--txt-size-16);
  letter-spacing: -0.32px;
  padding-right: 56px;
}

input[type=checkbox].toggle.h32 + label {
  height: 32px;
  line-height: 32px;
  font-size: var(--txt-size-16);
  letter-spacing: -0.32px;
  padding-right: 64px;
}

input[type=checkbox].toggle + label::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: "";
  width: 36px;
  height: 20px;
  background-color: var(--clr-w400);
  border-radius: 16px;
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out;
}

input[type=checkbox].toggle.h28 + label::before {
  width: 48px;
  height: 28px;
}

input[type=checkbox].toggle.h32 + label::before {
  width: 56px;
  height: 32px;
}

input[type=checkbox].toggle + label::after {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  content: "";
  width: 16px;
  height: 16px;
  background: var(--clr-w100) url("/figma/svg/minus_8.svg") no-repeat center / 8px 8px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

input[type=checkbox].toggle.h28 + label::after {
  right: 22px;
  width: 24px;
  height: 24px;
  background: var(--clr-w100) url("/figma/svg/minus_14.svg") no-repeat center / 14px 14px;
}

input[type=checkbox].toggle.h32 + label::after {
  right: 26px;
  width: 28px;
  height: 28px;
  background: var(--clr-w100) url("/figma/svg/minus_16.svg") no-repeat center / 16px 16px;
}

input[type=checkbox].toggle:checked + label::before {
  background-color: var(--clr-p600);
}

input[type=checkbox].toggle:checked + label::after {
  right: 2px;
  background: var(--clr-w100) url("/figma/svg/check_black_8.svg") no-repeat center / 8px 8px;
}

input[type=checkbox].toggle.h28:checked + label::after {
  background: var(--clr-w100) url("/figma/svg/check_black_14.svg") no-repeat center / 14px 14px;
}

input[type=checkbox].toggle.h32:checked + label::after {
  background: var(--clr-w100) url("/figma/svg/check_black_16.svg") no-repeat center / 16px 16px;
}

input[type=checkbox].toggle:disabled + label {
  color: var(--clr-n90);
  cursor: default;
}

input[type=checkbox].toggle:disabled + label::before {
  background-color: var(--clr-n40);
}

input[type=checkbox].toggle:disabled + label::after {
  background: var(--clr-w100) url("/figma/svg/minus_bluegray_8.svg") no-repeat center / 8px 8px;
}

input[type=checkbox].toggle.h28:disabled + label::after {
  background: var(--clr-w100) url("/figma/svg/minus_bluegray_14.svg") no-repeat center / 14px 14px;
}

input[type=checkbox].toggle.h32:disabled + label::after {
  background: var(--clr-w100) url("/figma/svg/minus_bluegray_16.svg") no-repeat center / 16px 16px;
}

input[type=checkbox].toggle:checked:disabled + label::after {
  right: 2px;
  background: var(--clr-w100) url("/figma/svg/check_bluegray_8.svg") no-repeat center / 8px 8px;
}

input[type=checkbox].toggle.h28:checked:disabled + label::after {
  background: var(--clr-w100) url("/figma/svg/check_bluegray_14.svg") no-repeat center / 14px 14px;
}

input[type=checkbox].toggle.h32:checked:disabled + label::after {
  background: var(--clr-w100) url("/figma/svg/check_bluegray_16.svg") no-repeat center / 16px 16px;
}