ionic modal scss 약관

ion-modal + ion-modal {
  --backdrop-opacity: 0.6 !important;
}

// .sheet 가 아닌 경우
ion-modal:not(.sheet) {
  --border-radius: 0.75rem;
  --max-height: max-content;
  --max-width: max-content;
  --height: max-content;
  --width: max-content;
  --backdrop-opacity: 0.6;
  --padding: 1rem;
  --overflow: visible;

  .modal-wrapper {
    height: auto;
  }

  .ion-page {
    max-height: max-content;
    overflow: visible;
  }
}

// 약관
ion-modal.terms {
  --border-radius: 0.75rem;
  --backdrop-opacity: 0.6;
  --padding: 1rem;
  --overflow: auto;

  .modal-wrapper {
    height: auto;
    --overflow: auto;
  }

  .ion-page {
    overflow: visible;
  }
}

// 프로필 사진
ion-modal.rounded {
  --border-radius: 9999rem;
  --max-height: max-content;
  --max-width: max-content;
  --height: max-content;
  --width: max-content;
  --backdrop-opacity: 0.6;
  --padding: 1rem;
  --overflow: visible;
}

// 스크롤
// ::-webkit-scrollbar {
//   width: 6px;
//   height: 6px;
// }

// ::-webkit-scrollbar-track {
//   background: rgb(229, 231, 235);
// }

// ::-webkit-scrollbar-thumb {
//   background: #d65a25;
//   border-radius: 4px;
// }

<section
  class="flex flex-col w-full max-h-[80vh] gap-3 p-4 overflow-y-scroll bg-white rounded-lg"
>

약관의 경우 세로로 무한정 길어질 수 있으므로 max-h 를 설정합니다.
보통 80% 차지하도록 하는 게 일반적입니다.