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      { font-size:21px; color:#000066; }
th        { font-size:21px; color:#000066; }
td        { font-size:21px; color:#000066; }
#default  { font-size:21px; color:#000066; }

#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; }

/* === 現代化版面與樣式 === */

body {
  background-color: #FFFFFD;
  font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
  margin: 0;
  padding: 10px 0;
}
/*
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f8f9fa;
      margin: 0;
      padding: 40px 0;
      color: #333;
    }
*/

/* 頁首區域 */
.header-container {
  text-align: center;
  padding: 5px 10px 0px; /* 3rd決定與主表格間的距離 */
}

.motto { /* 格言 */
  font-size: 20px;
  font-weight: bold; /* 設定為粗體 */
  letter-spacing: 2pt;
  line-height: 1.5;
  color: #000066;
  margin: 0 auto;
  margin-bottom: 0px;
}

.divider-img {
  margin: 0px 0 0;
}

.book-name {
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  margin: 15px 0;
  margin-bottom: 5px;
  color: #000066;
}

.nav-links {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* 主要內容外框 */
.main-card {
  width: 95%;
  max-width: 1000px;
  margin: 0px auto 0px;
  padding: 20px;
  background-color: #FFFFFD;
  /* border: 10px solid #008000; */
  border: 2px solid #336601;
  box-sizing: border-box;
}

.article-title {
  text-align: center;
  font-size: 23px;
  font-weight: bold;
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 20px;
  color: #000066;
}

/* 文章內容 (@(#) DATA 預設靠左對齊) */
.article-content {
  font-size: 21px;
  line-height: 1.75;
  text-align: left;
  color: #000066;
}

.article-content p {
  text-align: left;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* 讓帶有 align="center" 的 p 標籤能正常置中 (例如 index-data.html 的頂部按鈕區) */
.article-content p[align="center"] {
  text-align: center;
}

/* 書名與文章編號 (@(#) Bookname-And-ArticleID 靠右對齊) */
.article-meta {
  text-align: right;
  font-size: 16px;
  line-height: 1.3;
  margin-top: 15px;
  margin-bottom: 15px;
  color: #000066;
}

/* 字典/註解區域 (@(#) DICTIONARY 靠左對齊) */
.dictionary-section {
  text-align: left;
  font-size: 19px;
  line-height: 1.3;
  margin-top: 15px;
  color: #000066;
}

/* 頁尾區域 */
.footer-container {
  text-align: center;
  padding: 15px 10px 30px 10px;
  margin-top: -5px;
}

.footer-nav-links {
  font-size: 20px;
  line-height: 0.6;
  margin-top: 0px;
  margin-bottom: 10px;
}

.footer-links {
  font-size: 20px;
  line-height: 1.5;
}

/* === 特殊頁面樣式 === */

/* Photo Page */
.photo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 15px 0;
}

.photo-container img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 書籍資訊表格 */
.books-info-table {
  width: 98%;
  border-collapse: collapse;
}

.books-info-table th,
.books-info-table td {
  border: 1px solid #000000;
  padding: 8px;
}

/* 下載電子書表格 */
.download-file-table {
  width: 90%;
  border-collapse: collapse;
}

.download-file-table th,
.download-file-table td {
  border: 1px solid #000000;
  padding: 8px;
  vertical-align: middle;
}

/* Book's Index */
.index-page-title {
  text-align: center;
  margin-bottom: 24px;
}

/* 1. 外層容器：確保滿版並加上 overflow 保護 */
.index-table-container {
  width: 100%;
  padding: 0;               /* 移除手機上不必要的額外 padding */
  box-sizing: border-box;
  overflow-x: auto;         /* 防止內容極寬時強行超出外框 */
}

/* 2. 內部表格：強制限制最大寬度為 100% */
.index-center-table {
  width: 100%;              /* 在小螢幕自動縮至 100% */
  max-width: 800px;         /* 在大螢幕最高 800px */
  margin: 0 auto;
  background-color: var(--bg-color);
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  table-layout: fixed;      /* 強制表格遵循寬度限制，防止內容撐大表格 */
}

.index-center-table th {
  background-color: var(--bg-color); /* #007bff -> #336601 */
  color: #000066;
  font-weight: 600;
  padding: 10px 8px;       /* 適度縮小內距，適合手機 */
  text-align: center;
}

.index-center-table td {
  padding: 10px 8px;       /* 適度縮小內距 */
  border-bottom: 1px solid #e9ecef;
  box-sizing: border-box;
  word-break: break-word;   /* 允許長文字自動換行 */
}

.index-cell-content {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  min-width: 0; 
}

.index-item-no {
  font-weight: 600;
  color: #007bff;
  background-color: #e9ecef;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  flex-shrink: 0;           /* 確保編號按鈕不被壓縮 */
}

.index-item-text {
  white-space: normal;      /* 手機上允許文章標題換行，避免撐寬 */
  word-break: break-word;
  min-width: 0;
}

.index-cell-content.main-menu-text {
  justify-content: center;
  text-align: center;
}


.index-center-table tbody tr:nth-child(even) { background-color: #f8f9fa; }
.index-center-table tbody tr:hover { background-color: #f1f3f5; }
.index-center-table tbody tr:last-child td { border-bottom: none; }

/* html5 */

  /* 基礎全域設定 */
  :root {
    --primary-color: #336601;       /* 主色調：沉穩佛寺竹綠 */
    --primary-hover: #234800;       /* 懸停深綠 */
    --text-color: #000066;          /* 傳統深藍內文 */
    --bg-color: #FFFFFD;            /* 經典暖白背景 */
    --card-bg: #FFFFFF;             /* 卡片純白背景 */
    --border-color: #e2e8f0;        /* 輕微邊框線 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "微軟正黑體", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 24px 16px;
    line-height: 1.6;
  }

  .container {
    max-width: 800px; /* 最佳閱讀與選單寬度 */
    margin: 0 auto;
  }

  /* 頁首標題區 */
  header.site-header {
    text-align: center;
    margin-bottom: 28px;
  }

  .title-large {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 12px;
  }

  .title-large a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .title-large a:hover {
    color: var(--primary-color);
  }

  .divider-line {
    max-width: 100%;
    height: auto;
    margin: 8px auto;
    display: block;
  }

  .subtitle-kaishu {
  font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.8;
    color: #000066;
    margin: 12px 0;
  }

  /* 現代化選單卡片 (HTML5 <nav> & <section>) */
  .menu-card {
    /* background-color: var(--card-bg); */
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin-bottom: 28px;
    overflow: hidden;
  }

  .menu-title {
    /* background-color: var(--primary-color); */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 14px 16px;
    margin: 0;
    letter-spacing: 1px;
  }

  .menu-title small {
    font-size: 14px;
    font-weight: normal;
    opacity: 0.9;
  }

  .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu-list li {
    border-bottom: 1px solid #f1f5f9;
  }

  .menu-list li:last-child {
    border-bottom: none;
  }

  .menu-list a {
    display: block;
    padding: 14px 20px;
    color: var(--text-color);
    text-decoration: none;
    text-align: center; /* 內文置中 */
    font-size: 18px;
    transition: all 0.2s ease;
  }

  /* 滑鼠懸停與點擊效果 */
  .menu-list a:hover {
    background-color: #f4f8f1; /* 微綠亮色背景 */
    color: var(--primary-color);
    font-weight: bold;
  }

  /* 頁尾連結 */
  footer.site-footer {
    text-align: center;
    margin-top: 36px;
    padding-top: 16px;
  }

  .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .footer-links img {
    vertical-align: middle;
    transition: opacity 0.2s ease;
  }

  .footer-links img:hover {
    opacity: 0.8;
  }

  .thanks-link {
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
  }

  .thanks-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
  }

/* end of main menu index */