dialog {
      border: none;
      padding: 0; /* 讓內容與按鈕可以填滿邊界 */
      width: 100%;
      max-width: 800px;
      height: 90vh; /* 固定高度為 90vh */
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border-radius: 10px 10px 0 0;
      /* 核心：利用 Flexbox 讓內部元件垂直排列 */
      display: none; /* 瀏覽器預設，當 showModal 啟用時會自動變成 flex */
      flex-direction: column; 
      overflow: hidden;
    }

    /* 當 dialog 開啟時，啟用 flex 排版 */
    dialog[open] {
      display: flex;
    }

    /* 瀏覽器原生遮罩樣式 */
    dialog::backdrop {
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
    }

    .modal-header{
      background: url(/media/tu3pzfw5/disclaimer-bg.png) no-repeat center bottom;
      background-size: cover;
      height: clamp(150px, 26vh, 260px);
      display:flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      font-weight: bold;
      color:#fff;
    }
    /* 彈窗內容區：如果文字太長就自動出現捲軸 */
    .modal-body {
      padding: 48px 28px 32px;
      line-height: 1.8;
      flex: 1; /* 自動填滿剩餘空間 */
      overflow-y: auto; /* 內容過長時允許內部垂直捲動 */

      h3{
        font-size: 2rem;
        font-weight: bold;
        margin-bottom:1.5rem;
      }
      h4{
        font-size:1rem;
        font-weight: bold;
        margin-bottom:1.5rem;
      }
      p{
        font-size: 14px;
        margin-bottom: 15px;
        word-break: break-all;       /* 確保長網址會自動斷行 */
        overflow-wrap: break-word;   /* 雙重保險 */
        line-break: loose;
      }
    }

    /* 彈窗按鈕區：固定在最下方 */
    .modal-footer {
      display: flex;
      box-shadow: 0 -2px 15px #b1b1b14d;
      button{
        border:none;
        outline: none;
        flex:1;
        height:72px;
        line-height: 72px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
      }
      .btn-decline {
        background-color: #fff;
        color: #222124;
      }
      .btn-confirm{
        background-color: #222124;
        color:#fff;
      }
    }


    body.modal-open {
  overflow: hidden;
}