@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";

.tBody {
  height: 990px;
}
.termsContainer {
  .size(@w:100%, @h:990px);
  background: @BG_COLOR_01;
  padding-top: 42px;
  .contentsBox {
    position: relative;
    width: 100%;
    height: 100%;
    background: white;
    padding: 0 40px;
    .textBox {
      .size(@w:1680px, @h:100%);
      background-color: @BG_COLOR_02;
      border: 1px solid @COLOR_GRAY02;
      padding: 42px 60px 0;
      font-size: 24px;
      color: #808080;
      .subTitle {
        font-weight: bold;
        margin-bottom: 27px;
      }
    }
    .buttonBox {
      width: 100%;
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .locateBox {
        min-width: 360px;
        .size(@w:360px, @h:78px);
        margin-left: auto;
        margin-right: 0;
      }
      .termText {
        color: #808080;
      }
    }
    &.optionalTabActive {
      display: flex;
      flex-direction: column;
      padding-bottom: 60px;
      box-sizing: border-box;

      .tTab {
        flex-shrink: 0;
      }

      .scrollerWrapper {
        flex-grow: 1;
        min-height: 0;
      }

      .optionalContainer {
        flex-shrink: 0;
      }
    }
  }
}

.optionalContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  // gap: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.checkboxContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  // gap: 15px;
  margin-bottom: 40px;
}

.buttonContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkboxLabel {
  color: #1a1a1a;
  font-size: 35px;
  font-family: "LG Smart UI";
  font-weight: 700;
  line-height: 35px;
  word-wrap: break-word;
  margin-left: 15px;
}

.disabledLabel {
  color: #888888;
}

.agreeButton {
  width: 240px;
  height: 80px;
  background: #999999;
  border-radius: 12px;
  color: white;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 0 5px 5px #003 0 6px 7px #0000001a;
  .flex();
  margin-right: 12px;

  &:focus,
  &:hover {
    &:not([disabled]) {
      background: @PRIMARY_COLOR_RED;
      box-shadow: 0px 18px 28.2px 1.8px rgba(0, 0, 0, 0.4);
    }
  }
}

.disagreeButton {
  width: 240px;
  height: 80px;
  background: #999999;
  border-radius: 12px;
  color: white;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 0 5px 5px #003 0 6px 7px #0000001a;
  .flex();

  &:focus,
  &:hover {
    &:not([disabled]) {
      background: @PRIMARY_COLOR_RED;
      box-shadow: 0px 18px 28.2px 1.8px rgba(0, 0, 0, 0.4);
    }
  }
}

.disagreePopup {
  :global {
    .info {
      width: 950px !important;
      padding: 60px 57px 40px 57px !important;
    }

    .text {
      font-size: 35px !important;
      font-weight: 700 !important;
      text-align: center !important;
    }

    .popup_container {
      display: flex !important;
      flex-direction: column !important;
      gap: 30px !important;
    }

    .button_container {
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      gap: 12px !important;

      .button {
        width: 380px !important;
        height: 80px !important;
      }
    }
  }
}

.disagreePopup :global(.info) {
  padding: 0 !important;
}

.disagreePopupContainer {
  width: 950px;
  padding: 60px 57px 40px 57px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  box-sizing: border-box;
}

.disagreePopupText {
  font-size: 35px;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
}

.disagreePopupButtonContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}

.disagreePopupButton {
  width: 380px;
  height: 80px;
}
