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

[id="floatLayer"] {
  //common layout
  > div:not([id]) > div > div:nth-child(2) {
    bottom: 50%;
    transform: translateY(50%);
    overflow: unset;
    > div {
      overflow: unset;
    }
  }
}

.tPopUp {
  //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) {
  .info {
    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;
  }

  .textLayer {
    width: 100%;

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

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

// kind

.introTermsPopup {
  .default-style();  

  .info {
    .size(@w: 1100px , @h: 564px);
    padding: 60px 42px 30px 60px;

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

        // 첫 번째 버튼(Agree)의 오른쪽에만 마진 추가
        &:first-child {
          margin-right: 12px;
        }
      }
    }
  }
}

.descriptionPopup {
  .default-style();

  .info {
    .size(@w: 1100px , @h: 824px);
    padding: 60px 42px 30px 60px;
  }

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

  .buttonContainer {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
.textPopup,
.exitPopup {
  .default-style();

  .info {
    .text {
      padding: 0 60px;
      min-height: 180px;
      margin: 30px 0;
    }
    .buttonContainer {
      margin: 0 0 30px 0;
      display: flex;
      justify-content: center;
      > div {
        min-width: 240px;
        height: 78px;
        margin: 0 6px;
      }
    }
  }
}

.optionPopup {
  .default-style();
  .info {
    width: 820px;
  }

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

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

    .option {
      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;
      }
      .img {
        width: 60px;
        height: 60px;
        margin: 0 12px 0 0;
      }

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

      &.optionItem {
        display: flex;
        color: @PRIMARY_COLOR_RED;
      }
    }

    &.optionScroll {
      overflow-y: auto;
    }
    .selectedOption {
      box-sizing: border-box;
      background: @COLOR_WHITE;
      color: @PRIMARY_COLOR_RED;
      border: 4px solid @PRIMARY_COLOR_RED;
    }
  }
  .buttonContainer {
    margin: 30px 0 30px 0;
    display: flex;
    justify-content: center;
  }
}

.eventBannerPopup {
  .default-style();
  .info {
    width: 600px;
    height: 510px;
    > p > img {
      width: 600px;
      height: 510px;
    }
  }

  .buttonContainer {
    display: flex;
    justify-content: center;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    > div {
      margin: 0 6px;
    }

    > div {
      min-width: 240px;
      height: 80px;
    }
  }
}

.supportPopup {
  .default-style();
  position: relative;
  .info {
    width: 1064px;
    height: 784px;
    background-color: @COLOR_SKYBLUE;
    padding: 60px 57px 40px;

    .buttonContainer {
      margin: 40px 0 0 0;
      display: flex;
      justify-content: center;
    }
    .leftBtn {
      position: absolute;
      left: 10px;
      top: calc(50% - 52px);
      width: 27px;
      height: 52px;
      background-image: url(../../../assets/images/MS-arr-l.png);
      .imgElement(27px,52px, center, center);
      &:focus {
        background-image: url(../../../assets/images/MS-arr-l-s.png);
      }
    }
    .rightBtn {
      position: absolute;
      right: 10px;
      top: calc(50% - 52px);
      width: 27px;
      height: 52px;
      background-image: url(../../../assets/images/MS-arr-r.png);
      .imgElement(27px,52px, center, center);
      &:focus {
        background-image: url(../../../assets/images/MS-arr-r-s.png);
      }
    }
  }
  .title {
    width: 100%;
  }
}

.couponPopup {
  .default-style();
  .info {
    width: 960px;
    height: 640px;
    .buttonContainer {
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
      margin-bottom: 30px;
      display: flex;
      justify-content: center;
      > div {
        min-width: 300px;
        height: 78px;
        margin: 0 6px;
      }
    }
  }
  .title {
    margin-bottom: 30px;
  }
}

.mobileSendPopup {
  .default-style();
  .info {
    min-width: 1132px;
    background: @COLOR_WHITE;
  }
  .buttonContainer {
    display: flex;
    justify-content: center;
    padding: 30px 0;

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

.qrPopup {
  .default-style();
  .info {
    .size(@w: 780px , @h: 750px);
  }
  .buttonContainer {
    display: flex;
    justify-content: center;
    padding: 30px 0;

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

.checkoutTermsPopup {
  .info {
    .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;
    box-sizing: border-box;
    border-radius: 4px;
    .textLayer {
      width: 100%;
      padding-bottom: 35px;
      border-bottom: 1px solid @COLOR_GRAY02;
      .text {
        min-height: 126px;
        color: @COLOR_GRAY08;
        font-size: 36px;
        line-height: 42px;
        text-align: left;
        font-weight: bold;
        .flex();
      }
    }
    > div:nth-child(2) {
      margin-top: 30px;
      .size(@w: 980px, @h: 67px);
    }
    > div:nth-child(3) {
      .size(@w:980px,@h:300px);
      overflow-y: scroll;
      font-size: 24px;
      line-height: 32px;
      padding: 30px 30px 0 30px;
      &::-webkit-scrollbar {
        width: 8px;
        height: 300px;
      }
      &::-webkit-scrollbar-track-piece {
        background-color: @COLOR_WHITE;
      }
      &::-webkit-scrollbar-thumb {
        background-color: @COLOR_GRAY04;
      }
    }
  }
  .buttonContainer {
    display: flex;
    justify-content: center;
    padding: 30px 0;

    > div {
      min-width: 300px;
      height: 78px;
      margin: 0 10px;
      background: @COLOR_GRAY09;
      font-size: 30px;
      &:focus {
        outline: 4px solid @PRIMARY_COLOR_RED;
        background-color: @PRIMARY_COLOR_RED;
        color: @COLOR_WHITE;
      }
    }
  }
}

.scrollPopup {
  .default-style();
  .info {
    width: 900px;
  }
  .buttonContainer {
    display: flex;
    justify-content: center;
    padding: 30px 0;

    > div {
      min-width: 300px;
      height: 78px;
      margin: 0 10px;
      background: @COLOR_GRAY09;
      font-size: 30px;
      &:focus {
        outline: 4px solid @PRIMARY_COLOR_RED;
        background-color: @PRIMARY_COLOR_RED;
        color: @COLOR_WHITE;
      }
    }
  }
}

.watchPopup {
  position: absolute;
  right: 42px;
  bottom: -330px;
  .info {
    width: 1038px;
    height: 168px;
    background-color: @BG_COLOR_01;
    color: @COLOR_GRAY03;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-weight: normal;
    box-sizing: border-box;
    border-radius: 4px;
    flex-direction: row;
    .thumbnail {
      margin: 24px 19px 24px 30px;
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      > img {
        width: 100%;
      }
    }
  }
  .textLayer {
    width: 600px;
    margin: 36px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 60px;
    .title {
      color: @COLOR_GRAY06;
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 12px;
      width: 100%;
      flex: none;
    }
    > span {
      width: 42px;
      display: inline-block;
      margin-right: 6px;
      > img {
        vertical-align: middle;
        width: 100%;
        height: 100%;
      }
    }

    .text {
      color: @COLOR_GRAY08;
      font-size: 24px;
      text-align: left;
      font-weight: normal;
      width: 552px;
      height: 30px;
      .elip(@clamp:1);
    }
  }
  .buttonContainer {
    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 {
        outline: 4px solid @PRIMARY_COLOR_RED;
        background-color: @PRIMARY_COLOR_RED;
        color: @COLOR_WHITE;
      }
    }
  }
}

.setPinCodePopup {
  .default-style();

  .info {
    .text {
      padding: 0 60px;
      min-height: 180px;
      margin: 30px 0;
    }
    .buttonContainer {
      margin: 0 0 30px 0;
      display: flex;
      justify-content: center;
      > div {
        min-width: 240px;
        height: 78px;
        margin: 0 6px;
      }
    }
  }
}

.errorPopup {
  .default-style();

  .info {
    .text {
      padding: 0 60px;
      min-height: 180px;
      margin: 30px 0;
    }

    .buttonContainer {
      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;

  .info {
    .text {
      padding: 0 60px;
      min-height: 180px;
      margin: 30px 0;
    }

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

.returnExchangePopup {
  .default-style();

  .info {
    .text {
      padding: 0 60px;
      min-height: 180px;
      margin: 30px 0;
    }

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

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

  .info {
    .text {
      padding: 0 60px;
      min-height: 180px;
      margin: 30px 0;
    }

    .buttonContainer {
      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;
  }

  .info {
    .text {
      padding: 0 60px;
      min-height: 180px;
      margin: 30px 0;
    }

    .buttonContainer {
      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;

  .info {
    .size(@w: 1064px, @h: 240px);
    padding: 60px 57px 40px; // 상단 60px, 좌우 57px, 하단 40px 패딩 적용
    box-sizing: border-box; // 패딩이 너비/높이에 포함되도록 설정

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

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

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

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

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

/* 👇 '자물쇠' 추가: kind="optionalTermsConfirmPopup"일 때 적용될 위치 스타일 */
// .bottomPopup {
//   top: auto !important;
//   bottom: 60px !important; /* 화면 하단에서 60px 위 */
//   left: 50% !important;
//   transform: translateX(-50%) !important;
//   position: fixed !important;
//   margin: 0 !important;
// }

// wideLeftPopup 전용 스타일 - 다른 팝업과 완전히 분리
.tPopUp.wideLeftPopup {
  // 팝업 전체 위치 설정
  // position: absolute !important;
  // left: 0px !important;
  // top: 50% !important;
  // width: 100% !important;
  // // transform: translateY(-50%) !important;
  // margin: 0 !important;

  .info {
    // 실제 팝업 컨텐츠 크기 설정
    .size(@w: 1920px, @h: 110px);
    // .position(absolute, 20%, auto, auto, 0);

    background-color: @BG_COLOR_01;
    color: @COLOR_GRAY03;
    display: flex;
    flex-direction: column;
    font-weight: normal;
    box-sizing: border-box; 
    border-radius: 4px;
    padding: 60px 57px 40px;

    .textLayer {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        text-align: left;
        font-size: 36px;
        font-weight: bold;
        line-height: normal;
        color: @COLOR_BLACK;
        margin-bottom: 30px;
      }

      .text {
        color: @COLOR_GRAY03;
        font-size: 30px;
        line-height: 38px;
        text-align: center;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .buttonContainer {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      gap: 12px;

      > div {
        min-width: 300px;
        height: 80px;
      }
    }
  }
}
