/* 連結樣式 */
a:link    { color:#000066; text-decoration:none; }
a:visited { color:#000066; text-decoration:none; }
a:active  { color:#ff0000; text-decoration:underline; }
a:hover   { color:#ff0000; text-decoration:underline; }

/* 全域基底 */
body {
  background-color: #FFFFFD;
  color: #000066;
  font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
  font-size: 21px;
  margin: 0;
  padding: 0;
}

/* 字體大小類別（原 #fontXX 改為 .fontXX） */
.font08 { font-size:8px;  color:#000066; }
.font09 { font-size:9px;  color:#000066; }
.font10 { font-size:10px; color:#000066; }
.font11 { font-size:11px; color:#000066; }
.font12 { font-size:12px; color:#000066; }
.font13 { font-size:13px; color:#000066; }
.font14 { font-size:14px; color:#000066; }
.font15 { font-size:15px; color:#000066; }
.font16 { font-size:16px; color:#000066; }
.font17 { font-size:17px; color:#000066; }
.font18 { font-size:18px; color:#000066; }
.font19 { font-size:19px; color:#000066; }
.font20 { font-size:20px; color:#000066; }
.font21 { font-size:21px; color:#000066; }
.font22 { font-size:22px; color:#000066; }
.font23 { font-size:23px; color:#000066; }
.font24 { font-size:24px; color:#000066; }
.font25 { font-size:25px; color:#000066; }
.font26 { font-size:26px; color:#000066; }
.font27 { font-size:27px; color:#000066; }
.font28 { font-size:28px; color:#000066; }
.font29 { font-size:29px; color:#000066; }
.font30 { font-size:30px; color:#000066; }
.font31 { font-size:31px; color:#000066; }
.font32 { font-size:32px; color:#000066; }
.font33 { font-size:33px; color:#000066; }
.font34 { font-size:34px; color:#000066; }
.font35 { font-size:35px; color:#000066; }
.font36 { font-size:36px; color:#000066; }
.font37 { font-size:37px; color:#000066; }
.font38 { font-size:38px; color:#000066; }
.font39 { font-size:39px; color:#000066; }
.font40 { font-size:40px; color:#000066; }
.font41 { font-size:41px; color:#000066; }
.font42 { font-size:42px; color:#000066; }
.font43 { font-size:43px; color:#000066; }
.font44 { font-size:44px; color:#000066; }
.font45 { font-size:45px; color:#000066; }
.font46 { font-size:46px; color:#000066; }
.font47 { font-size:47px; color:#000066; }
.font48 { font-size:48px; color:#000066; }
.font49 { font-size:49px; color:#000066; }
.font50 { font-size:50px; color:#000066; }

/* 表格佈局（取代過時屬性） */
.outer-table {
  width: 100%;
  border-collapse: collapse;
}
.outer-table td {
  padding: 0;
  vertical-align: top;
}

.header-table {
  width: 100%;
  border: none;
}
.header-table td {
  text-align: center;
  white-space: nowrap;
  padding: 7px;
}

.title-area {
  text-align: center;
}

/* 分隔線圖片專用樣式 */
.title-area img {
  display: block;
  margin: 0 auto 10px;  /* 上 0、左右 auto（置中）、下 10px */
  /* 或者分開寫： margin-bottom: 10px; */
}

.main-wrapper {
  text-align: center;  /* 讓內部表格置中 */
  margin-top: 0px;     /* 與上方間隔 3px */
}

.main-table {
  width: 95%;
  margin: 0 auto;      /* 水平置中 */
  border: 5px solid #336601; /* 外框顏色 */ /* 與導航鏈接同顏色 */
  background-color: #FFFFFD;
  border-collapse: collapse;
}
.main-table td {
  padding: 5px;        /* 原 cellpadding=5 */
  text-align: left;    /* 內容預設靠左，可依需求調整 */
  vertical-align: top;
}

.footer-table {
  width: 100%;
  border: none;
}
.footer-table td {
  text-align: center;
  padding: 0;
}

/* 輔助類別 */
.right-align {
  text-align: right;
}
.title-block {
  text-align: center;
}

/* 所有圖片無邊框 */
img {
  border: 0;
}

/* 導航鏈接水平排列並置中 */
.nav-links {
  display: flex;
  flex-wrap: nowrap;        /* 強制不換行 */
  justify-content: center;  /* 水平置中 */
  gap: 5px;                 /* 圖片之間間隙 */
  margin-top: 10px;         /* 與上方書名的間距（可調整） */
  margin-bottom: 0;         /* 整排按鈕與下方內容的間距（可調整） */
}

.nav-links a {              /* 這是個別指定 */
  display: inline-block;    /* 確保鏈接本身也是行內塊，但非必須 */
  gap:
}

.bottom-nav-links {
  display: flex;
  flex-wrap: nowrap;        /* 強制不換行 */
  justify-content: center;  /* 水平置中 */
  gap: 5px;                 /* 圖片之間間隙 */
  margin-top: 2px;          /* 與上方的間距（可調整） */
  margin-bottom: 0;         /* 整排按鈕與下方內容的間距（可調整） */
}


/* ========================================
   全域手機版修復 (針對 index1 & index2)
   ======================================== */

/* ① 強制所有圖片不超出螢幕寬度（解決 600px、497px 寬圖溢出問題） */
img {
  max-width: 100%;
  height: auto;
}

/* ② 手機螢幕專用設定 (螢幕寬度小於 768px) */
@media (max-width: 768px) {

  /* 調整整體字體與內距，讓手機閱讀更舒適 */
  body {
    font-size: 18px;
    padding: 10px;
  }

  /* --------------------------------------
     針對 index2 (主目錄頁) 的修改
     -------------------------------------- */
  /* 將兩欄表格改為單欄垂直排列，避免手機上文字擠在一起 */
  table.main-table,
  table.main-table tbody,
  table.main-table tr,
  table.main-table td {
    display: block;
    width: 100% !important;  /* 強制撐滿寬度 */
    text-align: center !important;
    padding: 4px 0;
  }
  /* 讓不同列之間有一點間距 */
  table.main-table tr {
    margin-bottom: 8px;
  }
  /* 確保儲存格內的連結文字大小適中 */
  table.main-table td a {
    font-size: 18px;
  }

  /* --------------------------------------
     針對 index1 (提燈照路 選單頁) 的修改
     -------------------------------------- */
  /* 將窄表格強制拉寬，避免文字被截斷 */
  table[width="35%"],
  table[width="38%"] {
    width: 100% !important;
  }
  /* 選單文字保持不換行，並稍微縮小字體以容納長文 */
  table[width="38%"] td {
    white-space: nowrap;
    font-size: 16px;
    padding: 5px 2px;
  }
  /* 如果手機真的很小（< 360px），讓文字強制換行避免擠壓 */
  @media (max-width: 360px) {
    table[width="38%"] td {
      white-space: normal;
      word-break: keep-all;
    }
  }

  /* --------------------------------------
     針對內頁模板 (文章頁) 的導航按鈕修改
     -------------------------------------- */
  /* 讓「上一頁、回主頁、回目錄、下一頁」按鈕組自動換行，不擠破畫面 */
  .nav-links {
    flex-wrap: wrap;
    gap: 5px 10px; /* 垂直間距5px，水平間距10px */
    justify-content: center;
  }
  /* 手機上稍微縮小導航按鈕圖片 (125px 變 90px) */
  .nav-links a img {
    max-width: 90px;
    height: auto;
  }

  /* 將模板中的分隔線圖片寬度設為 100%，不超出螢幕 */
  .title-area img[src*="background-picture-02.jpg"] {
    max-width: 100%;
  }
}