/**
 * layout-fix.css
 * 簡單的版面排列修正，解決固定頂部與捲軸的問題
 */

/* 調整主內容區域，確保與固定頭部有足夠間距 */
main {
  /* 確保內容區域不被頭部遮擋 */
  padding-top: 52px; /* 再減少10px */
  position: relative;
}

/* 捲軸頂部空間，確保捲軸箭頭可見 */
main > div:first-child {
  position: relative;
  height: 16px; /* 再減少高度 */
  margin-bottom: 0; /* 移除邊距 */
}

/* 內容容器設置 */
#contentContainer {
  /* 基本內容設定 */
  position: relative;
  padding-top: 14px; /* 減少頂部內邊距 */
  border-radius: 8px;
  margin-top: 40px; /* 內容區塊往下移動 40px */
  
  /* 捲軸相關設定 */
  overflow-y: auto;
  scrollbar-width: auto; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05); /* Firefox */
}

/* Webkit 瀏覽器的捲軸設定 */
#contentContainer::-webkit-scrollbar {
  width: auto; /* 使用瀏覽器預設寬度 */
}

/* 確保捲軸軌道有足夠的頂部間距 */
#contentContainer::-webkit-scrollbar-track {
  margin-top: 12px;
}