/* css styles */

p {
  line-height: 1.8; /* 預設通常是 1.5 或 1.6，調大一點 */
  margin-bottom: 1.2em;
}

/* 1. 防止整個頁面被撐開 (全域設定) */
html, body {
  overflow-x: hidden !important; /* 禁止整個網頁出現左右捲軸 */
  width: 100% !important;
}

main, .content, #quarto-content {
  overflow-x: hidden !important; /* 確保主內容區塊也不會被撐開 */
  width: 100% !important;
}

/* 2. 針對數學公式的特化設定 */
mjx-container[display="true"], 
.MathJax_Display, 
.math.display {
  display: block !important;
  
  /* 關鍵：電腦版懂 max-width，但手機版常需要 explicit width 才會聽話 */
  width: 100% !important; 
  max-width: 100% !important; 
  
  /* margin-top: 1.5em !important;
  margin-bottom: 1.5em !important; */

  overflow-x: auto !important;
  overflow-y: hidden !important;
  
  /* 讓 iOS 手機滑動更順暢 */
  -webkit-overflow-scrolling: touch; 
  
  /* 確保內距不會影響寬度計算 */
  box-sizing: border-box; 
  
  /* 選用：稍微縮小字體讓它比較容易塞進去 (可自行調整或刪除) */
  font-size: 90%; 

  /* 選用：加個內陰影讓使用者知道這是可以橫向捲動的區塊 */
  box-shadow: inset -5px 0 5px -5px rgba(0,0,0,0.3);
}

/* 3. 針對表格的特化設定 */
/* 表格容器允許滾動，覆蓋全域的 overflow-x: hidden */
.quarto-float-tbl,
figure.quarto-float-tbl,
div[id*="tbl-"] {
  overflow-x: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

table {
  /* 防止表格被壓縮 */
  white-space: nowrap;
  /* 確保表格內容不會被截斷 */
  width: auto !important;
  min-width: max-content;
}

/* 強制讓所有圖片說明文字 (Caption) 置中 */
figcaption, .figure-caption {
    text-align: center !important;
    width: 100%; /* 確保容器寬度填滿，才能置中 */
}