@keyframes mountpop {
  from {
    opacity: 0;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes unmountpop {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.95;
  }
}

.modal-pop-wrap {
  position: fixed;
  width: 100%;
  min-width: 380px;
  max-width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border: 1px solid #000;
  border-radius: 4px;
  background-color: #272727;
  z-index: 9999999;

  &.sm {
    max-width: 450px;
  }

  &.ssm {
    max-width: 380px;
  }

  &.mount {
    animation: mountpop .17s ease-in-out forwards;
  }

  &.unmount {
    animation: unmountpop .17s ease-in-out forwards;
  }
}

.modal-head {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  background-color: #000;
  cursor: pointer;

  h1.title {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
  }

  .modal-close {
    margin-left: auto;
    color: #fff;
    text-indent: -999999999px;
    width: 10px;
    height: 10px;
    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
  }
}

.modal-body {
  padding: 15px;

  .modal-btn-wrap {
    display: flex;
    align-items: center;
    gap: 5px;

    button {
      flex: 1;
    }
  }

  .modal-check-btn-wrap {
    margin-top: 15px;

    .check-wrap-title {
      font-size: 12px;
      color: #fff;
      font-weight: 600;

      &.light {
        font-weight: 400;
      }
    }

    .flex-check-box {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 15px;

      &.for2 {
        button {
          width: calc(50% - 5px);
        }

        &.btn {
          gap: 5px;

          button {
            width: calc(50% - 2.5px);
          }
        }
      }

      &.for-line {
        button {
          flex: 1;
        }
      }
    }
  }

  .outer-line-wrap {
    border-top: 1px solid #3C3C3C;
    margin-top: 10px;
    padding-top: 15px;
    margin-bottom: 15px;

    > div {
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}