@charset "UTF-8";
@import "./tokens.css";


/* 모달 */
.modal {
  --modal--size-large: 760px;
  --modal--size-medium: 560px;
  --modal--size-small: 400px;
  --modal--size-min-height: 264px;
  --modal--wrap-radius: var(--radius-xlarge1);
  --modal--padding: var(--padding-10);
  --modal--header-padding-top: var(--number-17);
  --modal--header-pc-font-size: var(--pc-fs-heading-medium);
  --modal--header-mobile-font-size: var(--mobile-fs-heading-medium);
  --modal--conts-padding-top: var(--padding-6);
  --modal--conts-padding-bottom: var(--padding-3);
  --modal--conts-gap: var(--gap-5);
  --modal--btn-gap: var(--gap-3);
  --modal--btn-padding-top: var(--padding-6);
  --modal--btn-size-min-wdith: 7.8rem;
  --modal--btn-close-position: var(--gap-7);
  --modal--mobile-gap: var(--gap-7);
  --modal--mobile-width: calc(100% - var(--gap-7));
  --modal--mobile-height: calc(100% - var(--modal--mobile-gap) * 2);
  --modal--mobile-padding: var(--padding-8);
  --modal--mobile-header-padding-top: 5.2rem;
  --modal--mobile-btn-close-position: var(--gap-6);
  --modal--mobile-btn-padding-top: var(--padding-6);
  --modal--mobile-btn-padding-bottom: var(--padding-8);
  --modal--border-width: var(--width-variable-regular);
  --modal--color-text: var(--text-basic);
  --modal--wrap-color-surface: var(--surface-white-subtler);
  --modal--wrap-color-border: var(--border-gray);
  --modal--wrap-shadow: 0 0 0.2rem 0 var(--alpha-shadow2), 0 1.6rem 2.4rem 0 var(--alpha-shadow3);
  --modal--color-dim: var(--background-dim);
  --modal--full-popup-surface: var(--surface-secondary-subtler);
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: visibility 0.15s 0.3s, z-index 0s 0.3s, opacity 0.2s;
  font-size: var(--pc-fs-body-medium);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
}

@media (max-width: 767px) {
  .modal {
    font-size: var(--mobile-fs-body-medium);
  }
}

.modal>* {
  width: 100%;
}

.modal.in {
  z-index: 1010;
  transition-delay: 0s;
  opacity: 1;
  visibility: visible;
}

.modal.shown {
  display: block;
}

.modal .modal-back {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  z-index: -1;
  background-color: var(--modal--color-dim);
}

.modal .modal-back.in {
  display: block;
  z-index: 1000;
  visibility: visible;
}

.modal .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  position: relative;
  z-index: 1020;
  width: var(--modal--size-large);
  height: 100%;
  min-height: var(--modal--size-min-height);
  margin: 0 auto;
}

.modal .modal-dialog.modal-sm {
  max-width: var(--modal--size-small);
}

.modal .modal-dialog.modal-md {
  max-width: var(--modal--size-medium);
}

.modal .modal-dialog.modal-lg {
  max-width: var(--modal--size-large);
}

.modal .modal-dialog .modal-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-height: 80%;
  background-color: var(--modal--wrap-color-surface);
  border-radius: var(--modal--wrap-radius);
  border: var(--modal--border-width) solid var(--modal--wrap-color-border);
  color: var(--modal--color-text);
  outline-color: transparent;
  transition: outline-color 0.1s;
  box-shadow: var(--modal--wrap-shadow);
}

.modal .modal-dialog .modal-content>*:not(.btn-close) {
  width: 100%;
}

.modal .modal-dialog .modal-content:focus {
  box-shadow: var(--box-shadow-outline-inset);
  outline-offset: 0.4rem;
}

.modal .modal-dialog .modal-header {
  width: 100%;
  background-color: inherit;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  padding-top: var(--modal--header-padding-top);
  padding-inline: var(--modal--padding);
}

.modal .modal-dialog .modal-header .modal-title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: var(--modal--header-pc-font-size);
  font-weight: var(--font-weight-bold);
}

.modal .modal-dialog .modal-conts {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  width: 100%;
  padding: var(--modal--conts-padding-top) var(--modal--padding) var(--modal--conts-padding-bottom);
}

.modal .modal-dialog .modal-conts::-webkit-scrollbar {
  width: 0.3125rem;
}

.modal .modal-dialog .modal-conts::-webkit-scrollbar-thumb {
  background-color: var(--element-secondary-light);
  border-radius: 0.3125rem;
}

.modal .modal-dialog .modal-conts::-webkit-scrollbar-track {
  background-color: var(--element-secondary-lighter);
}

.modal .modal-dialog .modal-conts>* {
  width: 100%;
}

.modal .modal-dialog .modal-conts .conts-area {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--modal--conts-gap);
}

.modal .modal-dialog .modal-conts .conts-area>* {
  width: 100%;
}

.modal .modal-dialog .modal-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: var(--modal--btn-gap);
  padding: var(--modal--btn-padding-top) var(--modal--padding) var(--modal--padding);
}

.modal .modal-dialog .modal-btn .btn {
  min-width: var(--modal--btn-size-min-wdith);
}

.modal .modal-dialog .modal-btn.multi-conts {
  justify-content: space-between;
}

.modal .modal-dialog .btn-close {
  position: absolute;
  top: var(--modal--btn-close-position);
  right: var(--modal--btn-close-position);
  z-index: 901;
}

.modal[data-type=full] {
  background-color: var(--modal--full-popup-surface);
}

.modal[data-type=full] .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.modal[data-type=full] .modal-header,
.modal[data-type=full] .modal-conts {
  padding: 0;
}

.modal[data-type=full] .modal-content {
  height: 100%;
  max-height: 100%;
  background: none;
  margin: 0 auto;
  border: none;
  border-radius: 0;
}

.modal[data-type=full] .modal-back.in {
  display: none;
}

.modal[data-type=bottom-sheet] {
  --modal--bottom-sheet-radius: var(--radius-xlarge1);
  --modal--bottom-sheet-padding: var(--padding-6);
  --modal--bottom-sheet-btn-close-position-top: var(--gap-6);
  --modal--bottom-sheet-btn-close-position-right: var(--gap-5);
  --modal--bottom-sheet-btn-padding-top: var(--padding-10);
}

.modal[data-type=bottom-sheet] .modal-content {
  position: fixed;
  left: 0;
  bottom: -100%;
  border-radius: 0;
  border-top-left-radius: var(--modal--bottom-sheet-radius);
  border-top-right-radius: var(--modal--bottom-sheet-radius);
  max-height: 90%;
  transition: var(--transition-base);
}

.modal[data-type=bottom-sheet] .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding: var(--modal--bottom-sheet-padding);
  flex-shrink: 0;
}

.modal[data-type=bottom-sheet] .modal-header .modal-title {
  font-size: var(--pc-fs-heading-small);
}

.modal[data-type=bottom-sheet] .modal-conts {
  display: block;
  padding: 0 var(--modal--bottom-sheet-padding);
}

.modal[data-type=bottom-sheet] .modal-conts::-webkit-scrollbar {
  width: 0.3125rem;
}

.modal[data-type=bottom-sheet] .modal-conts::-webkit-scrollbar-thumb {
  background-color: var(--element-secondary-light);
  border-radius: 0.3125rem;
}

.modal[data-type=bottom-sheet] .modal-conts::-webkit-scrollbar-track {
  background-color: var(--element-secondary-lighter);
}

.modal[data-type=bottom-sheet] .btn-close {
  top: var(--modal--bottom-sheet-btn-close-position-top);
  right: var(--modal--bottom-sheet-btn-close-position-right);
}

.modal[data-type=bottom-sheet] .pop-filter-top {
  width: auto;
}

.modal[data-type=bottom-sheet] .modal-btn.btn-wrap {
  padding: var(--modal--bottom-sheet-btn-padding-top) var(--modal--bottom-sheet-padding) var(--modal--bottom-sheet-padding);
}

.modal[data-type=bottom-sheet] .modal-btn.btn-wrap .btn {
  flex: 1;
}

.modal[data-type=bottom-sheet].in .modal-content {
  bottom: 0;
}

/* mobile */
@media (max-width: 767px) {
  .modal:not([data-type=bottom-sheet]) .modal-dialog {
    width: var(--modal--mobile-width);
    height: var(--modal--mobile-height);
    min-height: var(--modal--mobile-height);
    margin: var(--modal--mobile-gap) auto;
  }

  .modal:not([data-type=bottom-sheet]) .modal-dialog .modal-header {
    padding: var(--modal--mobile-header-padding-top) var(--modal--mobile-padding) 0;
  }

  .modal:not([data-type=bottom-sheet]) .modal-dialog .modal-header .modal-title {
    font-size: var(--modal--header-mobile-font-size);
  }

  .modal:not([data-type=bottom-sheet]) .modal-dialog .modal-content {
    max-height: 100%;
  }

  .modal:not([data-type=bottom-sheet]) .modal-dialog .modal-conts {
    padding-inline: var(--modal--mobile-padding);
    padding-bottom: 0;
  }

  .modal:not([data-type=bottom-sheet]) .modal-dialog .modal-conts .conts-area>* {
    width: 100%;
  }

  .modal:not([data-type=bottom-sheet]) .modal-dialog .modal-btn {
    padding: var(--modal--mobile-btn-padding-top) var(--modal--mobile-padding) var(--modal--mobile-btn-padding-bottom);
  }

  .modal:not([data-type=bottom-sheet]) .modal-dialog .btn-close {
    top: var(--modal--mobile-btn-close-position);
    right: var(--modal--mobile-btn-close-position);
  }

  .modal[data-type=full] {
    --modal--full-mobile-btn-close-size: var(--size-height-4);
  }

  .modal[data-type=full] .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .modal[data-type=full] .modal-dialog .btn-close {
    width: var(--modal--full-mobile-btn-close-size);
    height: var(--modal--full-mobile-btn-close-size);
  }
}


/* 모달 : 통합 검색 */
#popTotalSchType1 .modal-conts,
#popTotalSch .modal-conts {
  padding-inline: 0;
  max-width: 792px;
  padding: 10rem 0 var(--gap-12);
}

#popTotalSchType1 .modal-dialog .modal-conts,
#popTotalSch .modal-dialog .modal-conts {
  max-width: 792px;
  padding: 10rem 0 var(--gap-12);
}

#popTotalSchType1 .modal-dialog .btn-close,
#popTotalSch .modal-dialog .btn-close {
  top: var(--gap-12);
  right: var(--gap-12);
}

#popTotalSch .main-tit-wrap {
  gap: var(--gap-3);
}

#popTotalSch .main-tit-wrap.basic_tab ul {
  gap: var(--gap-8);
}

#popTotalSch .main-tit-wrap.basic_tab ul {
  position: relative;
}

#popTotalSch .main-tit-wrap ul li:not(.active) {
  opacity: 0.6;
}

#popTotalSch .main-tit-wrap ul li:first-child:after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: var(--gray-30);
  position: absolute;
  top: 50%;
  margin-top: -2.5px;
  right: -1.2rem;
}

#popTotalSch .check-area.chk-column {
  flex-direction: row;
}


@media (max-width: 767px) {
  #popTotalSchType1 .modal-dialog .btn-close,
  #popTotalSch .modal-dialog .btn-close {
    width: var(--size-height-4);
    height: var(--size-height-4);
    top: var(--gap-6);
    right: var(--gap-5);
  }

  #popTotalSchType1 .modal-dialog .modal-conts, #popTotalSch .modal-dialog .modal-conts {
    padding: 7rem var(--padding-6);
  }
}

@media (max-width: 530px) {
  #popTotalSch .tab-area {
    gap: var(--gap-3);
  }
  #popTotalSch .check-area.chk-column {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-3);
  }
}