:root {
  --brandColor: #007aff;
  --hoverbgColor: #ecf5ff;
  --hoverTextColor: #223244;
  --menuBg: #4f7fc9;
  --menuThis: #fff;
  --tableColor: #edf3fd;
  --menuColor: #3f66a1;
  --red: #db2410;
  --btnPadding: 0px;
}

button.btn-reset-scon {
  border: 0;
  cursor: pointer;
  background: 0;
}

/* 공통 */
.d-none-scon {
  display: none;
}

.d-block-scon {
  display: block;
}

.w-full-scon {
  width: 100% !important;
}

.h-full-scon {
  height: 100% !important;
}

.h-100px-scon {
  height: 100px !important;
}

.p-1-scon {
  padding: .25rem !important;
}

.p-2-scon {
  padding: .5rem !important;
}

.p-3-scon {
  padding: .75rem !important;
}

.p-4-scon {
  padding: 1rem !important;
}

.p-5-scon {
  padding: 1.25rem !important;
}

.text-center-scon {
  text-align: center !important;
}

.text-right-scon {
  text-align: right !important;
}

.text-left-scon {
  text-align: left !important;
}

/* 버튼 */
.btn-scon {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: var(--btnPadding);
  background: #fff;
  color: var(--brandColor);
  border: 1px solid var(--brandColor);
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.15s;
}

.btn-scon img {
  max-width: 55px;
}

.btn-scon.red-scon {}

.btn-scon:hover {
  background: var(--hoverbgColor);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px;
  color: var(--hoverTextColor);
}

.btn_area-scon {
  display: flex;
  align-items: center;
  gap: 15px;
}

.base-font-scon {
  font-size: 15px !important;
  font-weight: 400 !important;
}

/* ========== pc 모달 ========== */
.days_box {
  margin-top: 10px;
}

.modal-scon {
  display: none;
  z-index: 1000;
  position: relative;
  z-index: 9999999999;
}

.modal-scon.show {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.modal_area-scon .modal_header-scon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

.modal_area-scon .modal_title-scon {
  font-size: 16px;
  font-weight: 700;
}

.modal_area-scon button.close-scon {
  font-size: 30px;
  font-weight: 200;
  color: #333;
  background: #e7e7e7;
  margin-left: auto;
  display: block;
}

/* .modal_area-scon.pc-scon button.close-scon:hover {
    background: #cfcfcf; 
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px; 
    color: #333; 
    font-weight: 600;
} */
.modal_header-scon button.close-scon {
  background: transparent;
}

.modal_area-scon .modal_body-scon {
  background: transparent;
  padding: 0 15px 20px 15px;
}


.modal_area-scon.pc-scon {
  position: fixed;
  left: 5px;
  bottom: 0;
  top: auto;
  width: 300px;
  transform: unset;
  background: #fff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.modal-scon:has(.modal-ldow-sconn) {
  background-color: transparent;
}

/* 모바일 모달 */
.modal_area-scon.mobile-scon {
  position: fixed;
  right: -100%;
  bottom: 0;
  width: 100%;
  transition: right 0.4s ease-out;
  z-index: 999999999;
  display: none;
  background: #DFFDFE;
  border-top: 1px solid #ddd;
}

.mobile-scon.slide-active {
  display: flex;
  right: 0;
}

.modal-scon.mobile-scon .modal_area-scon .modal_header-scon {
  gap: 8px;
}

.mobile-scon .scon_icon {
  width: 70px;
}

.modal_area-scon.mobile-scon .scon_title {
  font-size: 24px;
}

.modal_area-scon.mobile-scon .scon_title h4 {
  font-weight: 600;
  margin-bottom: 3px;
}

.modal_area-scon.mobile-scon .scon_title p {}

.modal_area-scon.mobile-scon .modal_body-scon {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal_area-scon.mobile-scon .modal_body-scon .time-scon {
  font-size: 30px;
  font-weight: 600;
}

.modal_area-scon.mobile-scon button.close-scon {
  font-size: 55px;
  line-height: 0.5;
}

@media (max-width: 786px) {
  .modal_area-scon {
    width: 100%;
  }

  .modal_area-scon.pc-scon {
    display: none;
  }

  .modal_area-scon.pc-scon {
    max-width: 100%;
    left: 0;
    border-radius: 0;
    border-radius: 10px;
  }

  .mobile-scon .scon_title_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}