// src/components/TPopUp/TNewPopUp.module.less

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

// 👇 TPopUp.module.less에서 가져온 floatLayer 스타일을 optionalConfirm용으로 수정
// [id="floatLayer"] {
//   // optionalConfirm일 때만 다른 위치 적용
//   > div:not([id]) > div > div:nth-child(2) {
//     &:has(.src_components_TPopUp_TNewPopUp_optionalConfirm) {
//       bottom: unset !important;
//       transform: none !important;
//       overflow: unset;

//       > div {
//         overflow: unset;
//       }
//     }

//     // 다른 팝업들은 기존 TPopUp 방식 유지
//     &:not(:has(.src_components_TPopUp_TNewPopUp_optionalConfirm)) {
//       bottom: 50%;
//       transform: translateY(50%);
//       overflow: unset;

//       > div {
//         overflow: unset;
//       }
//     }
//   }
// }

// html body [id="floatLayer"] > div:not([id]) > div > div:nth-child(2) {
//   &:has(.src_components_TPopUp_TNewPopUp_optionalConfirm) {
//     bottom: unset !important;
//     transform: none !important;
//   }
// }

.tNewPopUp {
  //enact popup reset
  margin: 0 auto !important;
  background: transparent !important;
  > div {
    padding: 0 !important;
    > div > div {
      width: unset !important;
      margin: 0 !important;
      > div {
        font-family: @baseFont;
      }
    }
  }
  box-shadow: 0 20px 70px rgba(2, 3, 3, 0.7) !important;

  .default-style(@width: 780px) {
    .commonInfo {
      width: @width;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .commonTextLayer {
      width: 100%;

      .commonTitle {
        text-align: left;
        font-size: 36px;
        font-weight: bold;
        line-height: normal;
        color: @COLOR_BLACK;
        background-color: @COLOR_SKYBLUE;
        padding: 30px 60px;
      }

      .commonText {
        min-height: 180px;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }
    }
  }

  // kind

  &.introTermsPopup {
    .default-style();

    .introTermsInfo {
      .size(@w: 1100px , @h: 564px);
      padding: 60px 42px 30px 60px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .introTermsButtonContainer {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        gap: 12px;
        > div {
          min-width: 300px;
          height: 78px;
        }
      }
    }
  }

  &.descriptionPopup {
    .default-style();

    .descriptionInfo {
      .size(@w: 1100px , @h: 824px);
      padding: 60px 42px 30px 60px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .descriptionImg {
      .size(@w: 200px, @h: 200px);
    }

    .descriptionButtonContainer {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }

  &.textPopup,
  &.exitPopup {
    .default-style();

    .textExitInfo {
      width: 780px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .textExitText {
        padding: 0 60px;
        min-height: 180px;
        margin: 30px 0;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }

      .textExitButtonContainer {
        margin: 0 0 30px 0;
        display: flex;
        justify-content: center;
        > div {
          min-width: 240px;
          height: 78px;
          margin: 0 6px;
        }
      }
    }
  }

  &.optionPopup {
    .default-style();

    .optionInfo {
      width: 820px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .optionItem {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .optionLayer {
      margin: 0 auto;
      width: 700px;
      max-height: 410px;
      margin-top: 31px;

      .optionChoice {
        box-sizing: border-box;
        border: 1px solid @COLOR_GRAY02;
        background: @COLOR_WHITE;
        font-size: 24px;
        font-weight: bold;
        color: @COLOR_GRAY03;
        padding: 30px;
        height: 90px;
        line-height: normal;
        align-items: center;
        display: flex;

        &:focus {
          background: @PRIMARY_COLOR_RED;
          color: @COLOR_WHITE;
        }

        .optionImg {
          width: 60px;
          height: 60px;
          margin: 0 12px 0 0;
        }

        &.optionSoldOut {
          background: @BG_COLOR_02;
          > * {
            opacity: 0.4;
          }
        }

        &.optionItem {
          display: flex;
          color: red;
        }
      }

      &.optionScroll {
        overflow-y: auto;
      }

      .selectedOption {
        box-sizing: border-box;
        background: @COLOR_WHITE;
        color: @PRIMARY_COLOR_RED;
        border: 4px solid @PRIMARY_COLOR_RED;
      }
    }

    .optionButtonContainer {
      margin: 30px 0 30px 0;
      display: flex;
      justify-content: center;
    }
  }

  &.eventBannerPopup {
    .default-style();

    .eventBannerInfo {
      width: 600px;
      height: 510px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      > p > img {
        width: 600px;
        height: 510px;
      }
    }

    .eventBannerButtonContainer {
      display: flex;
      justify-content: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 50px;

      > div {
        margin: 0 6px;
        min-width: 240px;
        height: 78px;
      }
    }
  }

  &.supportPopup {
    .default-style();

    .supportInfo {
      width: 960px;
      height: 640px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .supportButtonContainer {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        > div {
          min-width: 300px;
          height: 78px;
        }
      }
    }
  }

  &.couponPopup {
    .default-style();

    .couponInfo {
      width: 960px;
      height: 640px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .couponButtonContainer {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        > div {
          min-width: 300px;
          height: 78px;
        }
      }
    }
  }

  &.mobileSendPopup {
    .default-style();

    .mobileSendInfo {
      width: 960px;
      height: 640px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .mobileSendButtonContainer {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        > div {
          min-width: 300px;
          height: 78px;
        }
      }
    }
  }

  &.qrPopup {
    .default-style();

    .qrInfo {
      width: 960px;
      height: 640px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .qrButtonContainer {
      display: flex;
      justify-content: center;
      padding: 30px 0;

      > div {
        margin-top: 2;
        min-width: 340px;
        height: 80px;
        margin: 0 10px;
        background: @COLOR_GRAY09;
      }
    }
  }

  &.checkoutTermsPopup {
    .checkoutTermsInfo {
      .size(@w: 1100px , @h: 750px);
      padding: 60px 60px 30px 60px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;

      .checkoutTermsTitle {
        text-align: left;
        font-size: 36px;
        font-weight: bold;
        line-height: normal;
        color: @COLOR_BLACK;
        padding: 0 0 30px 0;
      }

      .checkoutTermsText {
        height: 480px;
        overflow-y: auto;
        font-size: 24px;
        line-height: 36px;
        padding-right: 20px;

        &::-webkit-scrollbar {
          width: 8px;
          height: 300px;
        }
        &::-webkit-scrollbar-track-piece {
          background-color: #fff;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #7a808d;
        }
      }
    }

    .checkoutTermsButtonContainer {
      display: flex;
      justify-content: center;
      padding: 30px 0;

      > div {
        min-width: 300px;
        height: 78px;
        margin: 0 10px;
        background: @COLOR_GRAY09;
        font-size: 30px;
        &:focus {
          box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
          background-color: @PRIMARY_COLOR_RED;
          color: @COLOR_WHITE;
        }
      }
    }
  }

  &.scrollPopup {
    .default-style();

    .scrollInfo {
      width: 900px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .scrollButtonContainer {
      display: flex;
      justify-content: center;
      padding: 30px 0;

      > div {
        min-width: 300px;
        height: 78px;
        margin: 0 10px;
        background: @COLOR_GRAY09;
        font-size: 30px;
        &:focus {
          box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
          background-color: @PRIMARY_COLOR_RED;
          color: @COLOR_WHITE;
        }
      }
    }
  }

  &.watchPopup {
    position: absolute;
    right: 42px;
    bottom: -330px;

    .watchInfo {
      width: 1038px;
      height: 168px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;

      .watchThumbnail {
        width: 300px;
        height: 168px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .watchTextLayer {
        width: 552px;
        height: 168px;
        padding: 30px;
        box-sizing: border-box;
      }

      .watchTitle {
        color: @COLOR_BLACK;
        font-size: 30px;
        text-align: left;
        font-weight: bold;
        width: 552px;
        height: 36px;
        .elip(@clamp:1);
        img {
          width: 100%;
          height: 100%;
        }
      }

      .watchText {
        color: #1a1a1a;
        font-size: 24px;
        text-align: left;
        font-weight: normal;
        width: 552px;
        height: 30px;
        .elip(@clamp:1);
      }
    }

    .watchButtonContainer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 18px 30px;
      width: 180px;
      > div {
        min-width: 180px;
        height: 60px;
        margin: 0 0 12px 0;
        background: @COLOR_GRAY09;
        font-size: 24px;
        line-height: 60px;
        &:focus {
          box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
          background-color: @PRIMARY_COLOR_RED;
          color: @COLOR_WHITE;
        }
      }
    }
  }

  &.setPinCodePopup {
    .default-style();

    .setPinCodeInfo {
      width: 780px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .setPinCodeText {
        padding: 0 60px;
        min-height: 180px;
        margin: 30px 0;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }

      .setPinCodeButtonContainer {
        margin: 0 0 30px 0;
        display: flex;
        justify-content: center;
        > div {
          min-width: 240px;
          height: 78px;
          margin: 0 6px;
        }
      }
    }
  }

  &.errorPopup {
    .default-style();

    .errorInfo {
      width: 780px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .errorText {
        padding: 0 60px;
        min-height: 180px;
        margin: 30px 0;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }

      .errorButtonContainer {
        margin: 0 0 30px 0;
        display: flex;
        justify-content: center;
        > div {
          min-width: 240px;
          height: 78px;
          margin: 0 6px;
        }
      }
    }
  }

  &.orderDetailPopup {
    .default-style();
    width: 900px;
    background-color: @BG_COLOR_01;
  }

  &.orderCancelPopup {
    > div > div > div {
      box-shadow: 0 20px 70px rgba(2, 3, 3, 0.7) !important;
      border-radius: 6px !important;
    }
    .default-style();
    position: relative;

    .orderCancelInfo {
      width: 780px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .orderCancelText {
        padding: 0 60px;
        min-height: 180px;
        margin: 30px 0;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }

      .orderCancelButtonContainer {
        margin: 0 0 30px 0;
        display: flex;
        justify-content: center;
        > div {
          min-width: 240px;
          height: 78px;
          margin: 0 6px;
        }
      }
    }
  }

  &.returnExchangePopup {
    .default-style();

    .returnExchangeInfo {
      width: 780px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .returnExchangeText {
        padding: 0 60px;
        min-height: 180px;
        margin: 30px 0;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }

      .returnExchangeButtonContainer {
        margin: 0 0 30px 0;
        display: flex;
        justify-content: center;
        > div {
          min-width: 240px;
          height: 78px;
          margin: 0 6px;
        }
      }
    }
  }

  &.trackPackagePopup {
    .default-style(@width: 860px);

    .trackPackageInfo {
      width: 860px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .trackPackageText {
        padding: 0 60px;
        min-height: 180px;
        margin: 30px 0;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }

      .trackPackageButtonContainer {
        margin: 0 0 30px 0;
        display: flex;
        justify-content: center;
        > div {
          min-width: 240px;
          height: 78px;
          margin: 0 6px;
        }
      }
    }
  }

  &.cancelConfirmPopup {
    .default-style();
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;

    > div > div > div {
      box-shadow: 0 20px 70px rgba(2, 3, 3, 0.7) !important;
      border-radius: 6px !important;
    }

    .cancelConfirmInfo {
      width: 780px;
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      box-sizing: border-box;
      border-radius: 4px;

      .cancelConfirmText {
        padding: 0 60px;
        min-height: 180px;
        margin: 30px 0;
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        .flex();
      }

      .cancelConfirmButtonContainer {
        margin: 0 0 30px 0;
        display: flex;
        justify-content: center;
        > div {
          min-width: 240px;
          height: 78px;
          margin: 0 6px;
        }
      }
    }
  }

  /* 👇 새로운 팝업 스타일 */
  &.optionalAgreement {
    .default-style();

    // 팝업 위치를 정중앙보다 아래로 명시적으로 지정
    position: absolute !important;
    top: 80% !important; // 50%가 정중앙, 값을 키우면 아래로 이동
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    .optionalAgreementInfo {
      .size(@w: 1064px, @h: 240px);
      top: 80% !important;
      padding: 60px 57px 40px; // 상단 60px, 좌우 57px, 하단 40px 패딩 적용
      box-sizing: border-box; // 패딩이 너비/높이에 포함되도록 설정
      background-color: @BG_COLOR_01;
      color: @COLOR_GRAY03;
      display: flex;
      flex-direction: column;
      font-weight: normal;
      border-radius: 4px;

      // 컨텐츠 영역
      .optionalAgreementContentContainer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      // 텍스트 영역 스타일
      .optionalAgreementTextLayer {
        flex: 1; // 남은 공간을 모두 차지하도록 설정
        min-height: 0; // flex item이 부모를 넘어 수축할 수 있도록 허용
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden; // 내용이 넘칠 경우 숨김

        .optionalAgreementText {
          font-size: 30px;
          line-height: 38px;
          text-align: center;
          color: @COLOR_GRAY03;
        }
      }

      // 버튼 컨테이너 스타일
      .optionalAgreementButtonContainer {
        margin-top: 3%; // gap 대신 margin 사용
        display: flex;
        justify-content: center;
        gap: 12px; // 버튼 간 간격
        flex-shrink: 0; // 컨테이너가 줄어들지 않도록 설정

        > div {
          min-width: 300px;
          height: 80px; // 높이 80px로 수정
        }
      }
    }
  }

  &.optionalConfirm {
    .default-style();

    bottom: unset !important;
    transform: none !important;
    top: 20% !important;

    // 기존 위치 스타일들...

    .optionalConfirmInfo {
      width: 100vw;
      height: 198px;
      background-color: #e6ebf0;
      border-radius: 4px;
      box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      // gap: 15px;

      .optionalConfirmContentContainer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 25px 140px 25px 140px;
        box-sizing: border-box;
        justify-content: center;
        // gap: 20px;

        .optionalConfirmTextSection {
          // flex: 1; // 나머지 높이를 모두 차지
          height: 30px;
          display: flex;
          flex-direction: column;
          min-height: 0;
          // border : 1px solid red;
          margin-bottom: 20px;
        }

        .optionalConfirmButtonSection {
          height: 60px;
          // margin-top: 15px; // gap 대신 margin으로 간격 처리
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-shrink: 0; // 줄어들지 않도록 고정
          // border : 1px solid blue;

          .optionalConfirmLeftButtonSection {
            width: 320px;
            height: 60px; // 부모 높이(60px) 모두 사용
            display: flex;
            align-items: center; // 수직 중앙 정렬
            display: flex;
            justify-content: space-between;

            .optionalTermsButton {
              width: 100% !important;
              height: 100% !important;
              min-width: unset !important;
              max-width: unset !important;
              padding: 0 20px !important;
              margin: 0 !important;
              background: white !important;
              border: 1px solid #cfcfcf !important;
              border-radius: 4px !important;
              display: flex !important;
              align-items: center !important;
              justify-content: space-between !important; // 👈 flex-start → space-between 변경
              flex-shrink: 0;
              box-sizing: border-box !important;

              // 포커스 스타일
              &:focus {
                outline: 2px solid #c70850;
                outline-offset: -1px;
              }

              .optionalTermsTitle {
                height: 100%;
                color: #1a1a1a;
                font-size: 22px;
                font-family: "LG Smart UI";
                font-weight: 600;
                line-height: 22px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;
              }

              // 👈 '>' 아이콘 스타일 추가
              .optionalTermsIcon {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                border: 2px solid #1a1a1a;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                margin-left: 8px;

                &::after {
                  content: ">";
                  font-size: 14px;
                  font-weight: bold;
                  color: #1a1a1a;
                }
              }
            }
          }

          .optionalConfirmRightButtonSection {
            // width: 332px;
            height: 100%; // 부모 높이(60px) 모두 사용
            display: flex;
            align-items: center; // 수직 중앙 정렬
            justify-content: space-between;
            // gap: 12px;

            .optionalConfirmButton {
              width: 160px;
              height: 60px;
              flex-shrink: 0; // 크기 고정
              margin-right: 12px;
            }
          }
        }
      }
    }
  }

  /* 👇 새로운 약관 팝업 스타일 */
  &.figmaTermsPopup {
    .figmaTermsInfo {
      .size(@w: 1064px, @h: 750px);
      padding: 60px 57px 40px;
      background: #e6ebf0;
      box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
    }

    .figmaTermsContentContainer {
      display: flex;
      flex-direction: column;
      // gap: 40px;
    }

    .figmaTermsCard {
      background: white;
      border-radius: 4px;
      border: 1px solid #cccccc;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .figmaTermsTitleBar {
      padding: 17px 31px;
      border-bottom: 1px solid #cccccc;
    }

    .figmaTermsTitleText {
      color: #c70850;
      font-size: 30px;
      font-weight: 700;
    }

    .figmaTermsContentBody {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin-bottom: 40px;

      .scrollerContent {
        padding: 31px;
        font-size: 26px;
        line-height: 1.5;
      }
    }

    .figmaTermsButtonContainer {
      display: flex;
      justify-content: center;
      align-items: center; // 버튼 수직 정렬을 위해 추가
      margin-top: 40px;
      // gap: 15px; // 버튼 사이 간격
    }

    .figmaTermsAgreeButton {
      // 이제 TButton의 type="popup" 스타일을 사용하므로,
      // 여기서는 추가적인 스타일이 필요 없습니다.
      margin-right: 15px;
    }

    .figmaTermsCloseButton {
      // TButton의 type="popup" 스타일을 사용합니다.
      margin-left: 0px; // lint 오류 대비용용
    }
  }
}