.tBody {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #FFFFFF;
}

.termsContainer {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 5vh 2.24% 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  transition: all 0.3s ease-in-out;
}

.welcomeSection {
  width: 100%;
  max-width: 1834px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
}

.welcomeTitle {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.welcomeText {
  color: #807f81;
  font-size: clamp(48px, 3.23vw, 62px);
  font-family: 'LG Smart UI';
  font-weight: 400;
  line-height: 1;
  word-break: break-word;
}

.brandTitle {
  font-size: clamp(54px, 3.65vw, 70px);
  font-family: 'LG Smart_Korean';
  font-weight: 700;
  line-height: 1.07;
  word-break: break-word;
  display: inline;
}

.brandShop {
  color: #57585a;
}
.brandO {
  color: #c91d53;
}
.brandPTime {
  color: #57585a;
}

.welcomeDescription {
  width: 100%;
  max-width: 1012.49px;
  text-align: center;
  color: #807f81;
  font-size: clamp(24px, 1.875vw, 36px);
  font-family: 'LG Smart UI';
  font-weight: 400;
  line-height: 1.19;
  word-break: break-word;
  margin-top: 1vh;
}

.termsSection {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0; // 패딩 제거
}

.mandatoryTerms {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  padding-right: 60px; // 구분선과의 간격 확보
}

.termItem {
  height: 120px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px; // 디자인 스펙에 맞게 20px로 변경
  margin: 0; // 마진 제거
}

.termCheckbox,
.selectAllCheckbox {
  width: 45px !important;
  height: 45px !important;
  min-width: 45px !important;
  min-height: 45px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;

  &.tCheckBox {
    border-radius: 0 !important;
    border: 3px solid #C70850 !important;
    background: #fff !important;
    transition: background 0.15s, border 0.15s;
  }

  &.tCheckBox.selected {
    border: 3px solid #7A808D !important;
    background: #7A808D !important;
  }

  &.tCheckBox::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px !important;
    height: 10px !important;
    border-left: 4px solid #fff !important;
    border-bottom: 4px solid #fff !important;
    transform: translate(-50%, -70%) rotate(-45deg) scale(0);
    border-radius: 0 !important;
    transition: transform 0.2s ease-in-out;
  }

  &.tCheckBox.selected::before {
    transform: translate(-50%, -70%) rotate(-45deg) scale(1);
  }
}

.termBox {
  // 기존 스타일 유지
  width: 530px; // 630px에서 530px로 너비 변경
  height: 120px;
  padding: 0 50px; // 디자인 스펙에 맞게 50px 유지
  background: white;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.20);
  border-radius: 6px;
  outline: 1px #CFCFCF solid;
  outline-offset: -1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  will-change: transform;

  // ✅ 일반 포커스 스타일 (모든 모드에서 적용)
  &:focus {
    outline: 2px #C91D53 solid !important;
    outline-offset: 2px !important;
    background-color: rgba(201, 29, 83, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(201, 29, 83, 0.3) !important;
  }

  &.hovered {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  // ✅ benefitMode에서도 버튼으로 동작하도록 수정
  &.benefitMode {
    cursor: pointer; // default → pointer로 변경

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
      transform: translate3d(0, -2px, 0);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

      .termName {
        color: #207847;
      }

      &[data-type='OPTIONAL_TERMS'] .termName {
        color: #c70850;
      }
    }

    // ✅ benefitMode에서도 포커스 효과 동일하게 적용
    &:focus {
      outline: 2px #C91D53 solid !important;
      outline-offset: 2px !important;
      background-color: rgba(201, 29, 83, 0.1) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 12px rgba(201, 29, 83, 0.3) !important;
    }
  }
}

// ✅ Spotlight 포커스 스타일 강화
.termBox[data-spotlight-id] {
  &:focus {
    outline: 2px solid #C91D53 !important;
    outline-offset: 2px !important;
    background-color: rgba(201, 29, 83, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(201, 29, 83, 0.3) !important;
    transition: all 0.2s ease !important;
  }
}


.termName {
  color: #1a1a1a;
  font-size: 35px;
  font-family: 'LG Smart UI';
  font-weight: 700;
  line-height: 35px;
  word-wrap: break-word;
  transition: color 0.3s ease;
  // ✅ 좌측 정렬 확실히
  flex: 1;
  text-align: left;
  margin-right: 20px;

  &.titleHovered {
    color: #c70850;
    font-weight: bold;
  }
}

.termNameMandatory {
  color: #207847 !important;
}

.termBox[data-type='OPTIONAL_TERMS'] .termName {
  color: #1a1a1a;
}

.termBox[data-type='OPTIONAL_TERMS']:hover .termTitle {
  color: #c70850;
}

.expandIconContainer {
  width: 37px;
  height: 37px;
  position: relative;
  border-radius: 100px;
  outline: 2.5px black solid;
  outline-offset: -2.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  // ✅ 우측 정렬 확실히
  flex-shrink: 0;
  margin-left: auto;

  &:hover {
    transform: scale(1.05);
  }
}

.expandIcon {
  width: 14.66px;
  height: 6.99px;
  position: absolute;
  left: 16.01px;
  top: 25.83px;
  transform: rotate(-90deg);
  transform-origin: top left;
  outline: 2.5px black solid;
  outline-offset: -1.25px;

  &.iconHovered {
    transform: scale(1.1);
  }
}

.optionalTermsInfo {
  flex: 1;
  align-self: stretch;
  padding-left: 60px; // 구분선과의 간격 확보
  border-left: 1px #c5c6c9 solid;
  display: flex;
  align-items: center;
}

.optionalDescription {
  width: 100%;
  max-width: 595px;
  color: #807f81;
  font-size: clamp(22px, 1.35vw, 26px);
  font-family: 'LG Smart UI';
  font-weight: 400;
  line-height: 1.65;
  word-break: break-word;
}

.selectAllSection {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 2vh;
}

.selectAllText {
  color: #1a1a1a;
  font-size: 35px;
  font-family: 'LG Smart UI';
  font-weight: 700;
  line-height: 35px;
  word-break: break-word;
}

.buttonSection {
  width: 100%;
  max-width: 940px;
  height: 100px;
  position: relative;
  margin-top: 2vh;
  display: flex;
  gap: 40px;
  justify-content: center;
}

// bottomBtnLayer 클래스 추가
.bottomBtnLayer {
  width: 100%;
  max-width: 940px;
  height: 100px;
  position: relative;
  margin-top: 2vh;
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

/* 약관 팝업 스타일 - TPopUp 컴포넌트 사용 */

.termsPopup {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  z-index: 9999 !important;
  
  :global(.info) {
    background-color: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: relative !important;
  }
  
  :global(.bg) {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    z-index: 9998 !important;
  }
  
  :global(.buttonContainer) {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #6e7178 !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    border-radius: 0 0 10px 10px !important;
    display: flex !important;
    justify-content: center !important;
    
    button {
      background-color: transparent !important;
      color: white !important;
      border: none !important;
      box-shadow: none !important;
      min-width: 150px !important;
      height: 60px !important;
      font-size: 28px !important;
      font-weight: bold !important;
      margin: 0 15px !important;
      transition: background-color 0.2s ease !important;
    }
  }
}

/* TermsOfService와 동일한 exitPopup 스타일 적용 - TPopUp의 기본 스타일 사용 */
/* 팝업 호출 방식 수정으로 별도의 CSS 오버라이드 불필요 */

.termsPopupContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: white;
  border-radius: 4px;
  outline: 1px solid #CCCCCC;
  overflow: hidden;
}

.termsTitle {
  align-self: stretch;
  padding: 17px 31px;
  background: white;
  border-bottom: 1px solid #CCCCCC;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  
  color: #C70850;
  font-size: 30px;
  font-family: 'LG Smart UI';
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  word-wrap: break-word;
}

.termsContentWrapper {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.termsContentText {
  flex: 1;
  height: 460px;
  padding: 31px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
  
  .termsHeading {
    color: black;
    font-size: 26px;
    font-family: 'LG Smart UI';
    font-weight: 700;
    word-wrap: break-word;
  }
  
  .termsBody {
    color: black;
    font-size: 26px;
    font-family: 'LG Smart UI';
    font-weight: 400;
    word-wrap: break-word;
  }
}

.termsScrollbar {
  width: 44px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
  .scrollButton {
    align-self: stretch;
    height: 44px;
    position: relative;
    background: #9C9898;
    box-shadow: 0px 8px 6.6px rgba(156, 152, 152, 0.34);
    
    .scrollIcon {
      width: 27px;
      height: 16.5px;
      left: 8.5px;
      top: 13.75px;
      position: absolute;
      
      .iconPath {
        width: 21.99px;
        height: 10.48px;
        left: 24.5px;
        top: 13.49px;
        position: absolute;
        transform: rotate(180deg);
        transform-origin: top left;
        outline: 2.5px solid #F9F1F1;
        outline-offset: -1.25px;
      }
    }
  }
  
  .scrollTrack {
    align-self: stretch;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    .scrollBar {
      width: 4px;
      align-self: stretch;
      position: relative;
      background: #CCCCCC;
      
      .scrollThumb {
        width: 4px;
        height: 100px;
        left: 0;
        top: 0;
        position: absolute;
        background: #666666;
      }
    }
  }
}

.termsTab {
  margin-bottom: 10px;
}

.termsScroller {
  width: 100%;
  max-height: 500px;
  overflow-y: auto;
}

.termsContent {
  padding: 20px;
  font-size: 20px;
  line-height: 1.5;
  color: #333333;
  max-height: 400px;
  overflow-y: auto;
}

.agreeButton {
  width: 450px;
  height: 100px;
  padding-left: 50px;
  padding-right: 50px;
  background-color: #C70850 !important;
  border: 2px solid #C70850 !important;
  color: white !important;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  font-family: 'LG Smart UI';
  font-weight: 700;
  transition: all 0.3s ease;

  &:hover,
  &:focus,
  &.spott-focus {
    background-color: #a40640 !important;
    border-color: #a40640 !important;
    color: white !important;
    transform: scale(1.05);
  }
  &:active {
    background-color: #8f0533 !important;
    border-color: #8f0533 !important;
    color: white !important;
  }
}

.disagreeButton {
  width: 450px;
  height: 100px;
  padding-left: 50px;
  padding-right: 50px;
  background-color: #999999 !important;
  border: 2px solid #999999 !important;
  color: white !important;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  font-family: 'LG Smart UI';
  font-weight: 700;
  transition: all 0.3s ease;

  &:hover,
  &:focus,
  &.spott-focus {
    background-color: #7a7a7a !important;
    border-color: #7a7a7a !important;
    color: white !important;
    transform: scale(1.05);
  }
  &:active {
    background-color: #666666 !important;
    border-color: #666666 !important;
    color: white !important;
  }
}


.agreeButton:hover,
.agreeButton:focus,
.agreeButton.spott-focus {
  border-color: #c70850;
  background-color: #c70850;
}

.buttonSection {
  .agreeButton {
    :global(.TButton) {
      background-color: #C70850 !important;
      color: white !important;
      border: none !important;
    }
  }
  .disagreeButton {
    :global(.TButton) {
      background-color: #999999 !important;
      color: white !important;
      border: none !important;
    }
  }
}


.popupContent {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.popupTitle {
  font-size: 30px !important; // 24px → 30px
  font-weight: 700 !important; // bold → 700
  font-family: 'LG Smart UI' !important;
  margin-bottom: 15px;
  padding: 17px 31px !important; // 패딩 추가
  border-bottom: 1px solid #CCCCCC !important; // #e0e0e0 → #CCCCCC
  color: #C70850 !important; // #1a1a1a → #C70850 (와인색)
  text-align: left !important;
  background: white !important;
}

.viewToggleSection {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.viewToggleButton {
  min-width: 200px;
  height: 60px;
  font-size: 24px;
  border-radius: 8px;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &:focus {
    outline: 2px solid #c70850;
    outline-offset: 2px;
  }
}

.benefitImageContainer {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  // ✅ 우측 정렬 확실히
  flex-shrink: 0;
  margin-left: auto;

  &:hover {
    transform: scale(1.05);
  }
}

.benefitImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

// Spotlight 포커스 스타일
[data-spotlight-id]:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}

.termBox[data-spotlight-id]:focus {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

.termCheckbox[data-spotlight-id]:focus {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

// ✅ TButton을 termBox로 사용할 때의 전역 스타일 오버라이드
:global(.Button.termBox) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
  padding: 0 0 !important; // 패딩 제거
  
  // TButton의 내부 구조 오버라이드
  :global(.Button_bg),
  :global(.Button_client) {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

// .termsOptionalPanel {
//     /* 기존 패널 스타일 유지 */
//     /* 필요한 경우 여기에 일반 패널 모드일 때의 추가 스타일 */
// }

.modalModePanel {
    /* IntroPanel.module.less의 .panel 스타일 참고 */
    position: absolute !important; /* 다른 요소들 위에 떠 있도록 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; /* 다른 UI 요소들보다 위에 오도록 z-index 설정 (TPanel 기본값보다 높게) */
    background-color: #202020; /* 배경색 (테마에 맞게 조정) */
    padding: 0; /* TPanel 기본 padding 제거 */

    // :global(.sand- তুরস্ক-TPanel_TPanel_header) {
    //     /* 모달 모드일 때 TPanel 헤더 숨기거나 다르게 스타일링 가능 */
    //     /* display: none; */
    // }

    .body {
        /* TPanel 내부의 TBody가 전체 높이를 차지하도록 */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .termsContainer {
        flex-grow: 1; /* 약관 내용이 남은 공간을 채우도록 */
        overflow-y: auto; /* 내용이 많을 경우 스크롤 */
    }

    .bottomBtnLayer {
        /* 버튼 레이어 스타일은 기존과 동일하게 유지하거나 모달에 맞게 조정 */
        margin-top: auto; /* 버튼을 하단에 고정 (flex 사용 시) */
    }
}

/* 기존 .panelContent, .modalContent 등의 클래스는 .termsOptionalPanel, .modalModePanel로 통합 또는 조정될 수 있음 */
/* 기존 .tBody, .termsContainer, .bottomBtnLayer 등의 스타일은 유지하거나 .modalModePanel 내부에서 약간씩 조정될 수 있음 */

// 전체화면 모드를 위한 스타일 추가
// .termsOptionalPanel {
//   &.modalModePanel {
//     position: fixed !important;
//     top: 0 !important;
//     left: 0 !important;
//     width: 100vw !important;
//     height: 100vh !important;
//     z-index: 10000 !important;
//     background-color: #FFFFFF !important;
    
//     // TPanel 내부 구조 전체화면 적용
//     > * {
//       width: 100% !important;
//       height: 100% !important;
//     }
    
//     // 버튼 영역이 항상 보이도록 하단 고정
//     .bottomBtnLayer,
//     .buttonSection {
//       position: fixed !important;
//       bottom: 0 !important;
//       left: 0 !important;
//       right: 0 !important;
//       background: #FFFFFF !important;
//       padding: 30px 0 !important;
//       margin: 0 !important;
//       box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
//       z-index: 10001 !important;
//       width: 100% !important;
//       max-width: none !important;
//       box-sizing: border-box !important;
//       display: flex !important;
//       justify-content: center !important;
//       align-items: center !important;
//       gap: 40px !important;
//       height: auto !important;
//       min-height: 120px !important;
//     }
//   }
// }

.body {
  &.modalModeBody {
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    
    // 전체화면 모드일 때 termsContainer 조정
    .termsContainer {
      flex: 1 !important;
      min-height: 0 !important; // flex 아이템에서 최소 높이 제한 해제
      max-height: none !important;
      overflow-y: auto !important;
      padding-bottom: 140px !important; // 버튼 공간 확보 (고정 버튼 높이 + 여백)
      box-sizing: border-box !important;
    }
  }
}

.tBody {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #FFFFFF;
  
  // 전체화면 모드일 때 flex 대신 block으로 변경
  &.modalModeBody {
    display: block !important;
    min-height: 100vh !important;
    height: 100vh !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
}

/* ✅ 최종 해결책: 커스텀 클래스로 Specificity를 높여 Enact 스타일 강제 오버라이드 */
.customAlertPopup, .customExitPopup {
  // Enact Alert의 body 부분 타겟
  :global(.enact_sandstone_Alert_Alert_body) {
    min-width: 750px !important;
    min-height: 350px !important;
    width: 750px !important;
    height: 350px !important;
    padding: 0 !important;
    overflow: hidden !important;

    > :global(.enact_ui_Layout_Layout_layout) {
      height: 100% !important;
    }
  }

  // Enact Alert의 content 부분 타겟
  :global(.enact_sandstone_Alert_Alert_content) {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  // TPopUp의 info 영역 타겟
  :global(.src_components_TPopUp_TPopUp_info) {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  // 텍스트 레이어
  :global(.src_components_TPopUp_TPopUp_textLayer) {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
  }

  :global(.src_components_TPopUp_TPopUp_title) {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #1a1a1a !important;
    margin-bottom: 15px !important;
  }

  :global(.src_components_TPopUp_TPopUp_text) {
    font-size: 24px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    color: #555 !important;
    width: 100% !important;
    word-break: keep-all !important;
    
    p {
      font-size: 26px !important;
      font-weight: bold !important;
      color: #000 !important;
      margin-top: 10px !important;
    }
  }

  // 버튼 컨테이너
  :global(.src_components_TPopUp_TPopUp_buttonContainer) {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;

    :global(.src_components_TButton_TButton_tButton) {
      width: 180px !important;
      height: 70px !important;
      font-size: 24px !important;
      transition: background-color 0.2s ease, border-color 0.2s ease !important;
      
      // 기본 스타일
      background-color: #6c757d !important;
      border-color: #6c757d !important;
      border: 2px solid #6c757d !important;
      
      // Enact의 내부 스타일도 함께 오버라이드
      &::before,
      &::after {
        background-color: #6c757d !important;
      }
      
      // 포커스/호버 상태
      &.spottable-focused,
      &.spott-focus,
      &:focus,
      &:hover {
        background-color: #c70850 !important;
        border-color: #c70850 !important;
        border: 2px solid #c70850 !important;
        
        &::before,
        &::after {
          background-color: #c70850 !important;
        }
      }

      :global(.src_components_TButton_TButton_text) {
        color: white !important;
      }
    }
  }

  // Spotlight 포커스 강제 활성화
  z-index: 99999 !important;
  
  // Spotlight 컨테이너 강제 활성화
  :global([data-spotlight-container]) {
    z-index: 99999 !important;
    pointer-events: auto !important;
  }
  
  // 버튼들이 포커스 가능하도록 강제
  :global([data-spotlight-id*="tPopupBtn"]) {
    z-index: 99999 !important;
    pointer-events: auto !important;
    position: relative !important;
    
    &:focus {
      outline: 3px solid #007bff !important;
      outline-offset: 2px !important;
    }
  }
}

/* Styles for Terms Detail Popup to enable scrolling */
.termsDetailPopup {
  /* Targeting the main content text area of the TPopUp */
  /* These selectors attempt to cover various TPopUp internal structures or common patterns */
  :global(.popup-content), /* Generic popup content class */
  :global(.enact-sandstone-Popup_Popup_content .text), /* For Enact Sandstone based TPopUp */
  :global(.text), /* If TPopUp uses a simple 'text' class for its content area */
  :global(.src_components_TPopUp_TPopUp_text) { /* Specific to TPopUp's known internal class for text */
    max-height: 450px; /* Adjust this value as needed for desired popup height */
    overflow-y: auto; /* Enable vertical scrollbar when content overflows */
    padding: 10px 24px 24px; /* Adjust padding as needed */
    word-break: break-word; /* Prevent long words from breaking layout */
    white-space: pre-wrap;  /* Preserve newlines and spaces from HTML content */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
    line-height: 1.5; /* Improve readability */
  }

  /* Optional: Styling for the title within this specific popup, if needed */
  :global(.popup-title), /* Generic popup title class */
  :global(.enact-sandstone-Popup_Popup_title), /* For Enact Sandstone based TPopUp title */
  :global(.title), /* If TPopUp uses a simple 'title' class */
  :global(.src_components_TPopUp_TPopUp_title) { /* Specific to TPopUp's known internal class for title */
    margin-bottom: 10px; /* Adjust spacing below the title */
    font-weight: bold;
  }
}

.divider {
  width: 1px;               /* 수직선이므로 너비 1px */
  height: 100%;             /* 컨테이너 높이 전체 */
  background-color: #c5c6c9;/* 회색 (원하는 색상으로 변경 가능) */
  margin: 0 16px;           /* 양옆 여백, 필요시 조절 */
  display: inline-block;    /* 라인 형태로 표시 */
}