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

/* 1. 全螢幕/左右兩側背景色設為灰色 */
body {
  margin: 0;
  background-color: #f0f0f0; /* 灰色背景 */
  min-height: 100vh;
}
/* 2. 中央主要顯示區域 */
.main-content {
  /* background-color: #ffffff; */ /* 白色背景 */
  /* 寬度與限制 */
  width: 100%;             /* 視窗較小（如手機）時自動佔滿 */
  max-width: 800px;        /* 視窗變大時，最大限制為 800px */
  /* 水平置中 */
  margin: 0 auto;
  /* 建議加上內邊距與最小高度 */
  padding: 20px;
  box-sizing: border-box;
  min-height: 100vh;      /* 讓白色區塊高度至少與螢幕同高 */
}
/*
body {
  background-color: #FFFFFD;
  font-family: "微軟正黑體", "Microsoft JhengHei", 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;
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
}

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