/*
====================================================================
【查經目錄共用母版 CSS】

這份 CSS 是所有書卷共用的「外觀母版」。不要在這裡寫死馬太福音、28 章等
單一書卷資料；書卷資料由 bible-index-master.js 從 HTML 的 bookConfig 讀取。

① 這一區負責什麼？
   - 全站共用字體、色調、頁面寬度
   - 快速前往左右雙區塊
   - 六欄一頁式查經目錄與表格內捲
   - 電子書一列一書
   - Gotop 與所有 RWD 版面

② 為什麼這樣設計？
   核心使用習慣是「一眼看到六個單元，再往下找章」。因此手機不改成六張
   卡片，而維持六欄表格；章數多時由 JS 調整內捲高度。

③ 哪些數值可以安全修改？
   顏色、font-size、padding、gap、min-height、欄寬通常可以微調。
   但 .directory-scroll 的 overflow 與 thead 的 sticky 不要隨意刪改，
   它們關係到「表格內捲」與「整頁捲動」能否自然銜接。

④ 修改後會影響什麼？
   - 字體 / padding → 一次可看到的章數與表格高度感
   - Grid minmax → 快速前往一行能放幾個章數
   - 電子書欄寬 → 書名、作者、PDF 的折行
   - bottom / height 等相關規則 → 內捲與頁面捲動的銜接

⑤ 手機 / 桌面有什麼不同？
   760px、600px、380px 是目前主要 RWD 分界。380px 以下保留作者、
   書名可折行且向上對齊；章數若變成 3 位數（例如 100、101、150），
   不應再假設只有兩位數，表格與快速前往會自動使用同一套 Grid。

⑥ 如果要新增功能，要改哪裡？
   純視覺問題 → 本 CSS；點擊、切換、資料產生、動態高度 → master.js；
   新增 HTML 元素 → master.html。若是某一卷專屬資料，不應寫進 CSS。
====================================================================
*/
:root{
  --text:#252525; --heading:#29485f;  --link:#164f78;
  --line:#d0d6da; --head-bg:#e3edff; /* 原 f3f6f7 */
  --alt:#fcfcfc;  --hover:#f3ffff;   /* 原 f1f5f7 */
  --focus:#356b8c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--text);
  font-family: system-ui, "Noto Sans TC","Microsoft JhengHei","PingFang TC",Arial,sans-serif;
  font-size:18px;line-height:1.5;
}
a{color:var(--link);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
.page-wrap{width:min(1180px,calc(100% - 24px));margin-inline:auto}

.site-header{background:#fff;border-bottom:1px solid var(--line)}
.top-nav{padding:8px 0 6px;border-bottom:1px solid #e5ebee;color:#68777e;font-size:15px}
.title-row{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{margin:0;color:#bb0000; /* 原 var(--heading); */
font-size:28px;font-weight:600}
#quickToggle{
  min-height:40px;padding:5px 12px;border:1px solid #91aebc;border-radius:3px;
  background:#fff;color:var(--link);font:inherit;font-size:18px;cursor:pointer
}
#quickToggle:hover,#quickToggle[aria-expanded=true]{background:var(--hover)}

/* ---------- 快速前往：左右雙區塊 ---------- */
.quick-panel{
  display:grid;grid-template-columns:100px minmax(0,1fr);
  gap:8px;padding:8px 0 14px
}
.quick-panel[hidden]{display:none}
.quick-units,.quick-chapters{min-width:0;border:1px solid var(--line);background:#fff}
.quick-panel-title{
  min-height:35px;display:flex;align-items:center;justify-content:center;padding:4px 8px;
  background:var(--head-bg);color:var(--heading);border-bottom:1px solid var(--line);
  font-size:17px;font-weight:550;letter-spacing:4px;
}
.unit-button{
  width:100%;min-height:43px;display:block;padding:5px 8px;
  border:0;border-bottom:1px solid #e2e9ec;background:#fff;color:var(--text);
  font:inherit;font-size:18px;text-align:center;cursor:pointer
}
.unit-button:last-child{border-bottom:0}
.unit-button:hover,.unit-button:focus{background:var(--hover)}
.unit-button.is-active{
  background:#f6f9fa;color:var(--link);font-weight:600;
  box-shadow:inset 3px 0 0 #0066ff /* 原 var(--focus) */
}
.chapter-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));
  gap:4px;padding:7px
}
.chapter-grid a{
  min-height:39px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:2px;color:var(--link);
  font-size:18px;white-space:nowrap
}
.chapter-grid a:hover,.chapter-grid a:focus{
  background:var(--hover);border-color:#d2e0e5;text-decoration:none
}



/* ---------- 查經目錄 區塊 ---------- */
.directory-section{padding-top:18px}
.section-heading{
  display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:6px
}


/* 名稱：電子書目錄 */
.section-heading h2 {
  margin:0; color:#6877ce; /* 原 var(--heading); font-size:23px */ 
  font-size:22px;font-weight:600 }
.section-heading p{margin:0;color:#68777e;font-size:15px}
.ebook-format { font-size:15px; font-weight:400; margin-left:6px; }

.directory-scroll{
  height:var(--directory-height,360px);
  overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);
  overscroll-behavior:auto;scrollbar-gutter:stable;
  /* 讓內捲區在手機仍可自然交回整頁捲動；不要隨意改 overflow。 */
}
.directory-table{
  width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:18px
}
.directory-table th,.directory-table td{
  width:16.6667%;padding:0;text-align:center;vertical-align:middle;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
.directory-table th:last-child,.directory-table td:last-child{border-right:0}
.directory-table thead th {
  position:sticky;top:0;z-index:2; height:45px; font-size:19px; letter-spacing:2px;
  background:var(--head-bg);color:#000088; /* var(--heading); */
  font-weight:600; box-shadow:0 1px 0 var(--line)
}
.directory-table td{height:42px;background:#fff}
.directory-table tbody tr:nth-child(even) td{background:var(--alt)}
.directory-table td a{
  min-height:42px;display:flex;align-items:center;justify-content:center
}
.directory-table td a:hover,.directory-table td a:focus{
  background:var(--hover);text-decoration:none
}

/* ---------- 電子書 區塊：一本一列 ---------- */
.books-section{padding:22px 0 30px;}
.book-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.book-list li{border-bottom:1px solid var(--line)}
.book-list a{
  text-decoration:none;
  min-height:44px;display:grid;
/* 刪  grid-template-columns:72px minmax(0,1fr) 105px 42px; */
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;gap:7px;padding:4px 6px;color:var(--text);
}
.book-list a:visited{text-decoration:none}
.book-list a:hover{background:#f9ffff;text-decoration:none}
.book-no{color:#68777e;font-size:16px}
.book-title{color:var(--link)}
.book-author{color:#68777e;font-size:17px;white-space:nowrap}

/* 設定無網址，未完成的電子書 */
.book-not-ready .book-no,
.book-not-ready .book-title,
.book-not-ready .book-author{ color:#bebebe; }
.book-not-ready { cursor:default; }

/* 刪 .book-pdf{color:var(--link);font-size:15px;text-align:right} */


/* 頁尾 區塊 */
.site-footer{margin-top:1em; text-align:center; padding:22px 0 10px;border-top:1px solid #0088a8; color:#ffef55;font-size:27px;}
@media(max-width:400px) {.site-footer {padding-bottom:35px;} }

@media(max-width:760px){
  .page-wrap{width:calc(100% - 14px)}
  .quick-panel{grid-template-columns:105px minmax(0,1fr)}
  .chapter-grid{grid-template-columns:repeat(auto-fit,minmax(46px,1fr))}
  .book-list a{grid-template-columns:62px minmax(0,1fr) 82px 38px}
}
@media(max-width:600px){
  .title-row{min-height:62px} h1{font-size:25px}
  #quickToggle{min-height:38px;padding-inline:9px;font-size:17px}
  .quick-panel{grid-template-columns:78px minmax(0,1fr);gap:5px}
  .quick-panel-title{font-size:14px}
  .unit-button{min-height:42px;padding-inline:6px;font-size:18px}
  .chapter-grid{grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:3px;padding:5px}
  .chapter-grid a{min-height:38px;font-size:18px}
  .section-heading{display:block}
  .section-heading p{margin-top:2px;font-size:14px}
  .directory-table{font-size:18px}
  .directory-table thead th{height:44px;font-size:17px}
  .directory-table td,.directory-table td a{height:42px;min-height:42px}
  .book-list a { grid-template-columns:56px minmax(0,1fr); gap:4px; }
   /* 刪 grid-template-columns:56px minmax(0,1fr) 60px 34px;gap:4px} */
  .book-author{font-size:15px}
}
@media(max-width:380px){
  .quick-panel{grid-template-columns:70px minmax(0,1fr)}
  .chapter-grid{grid-template-columns:repeat(auto-fit,minmax(39px,1fr))}
  .chapter-grid a{font-size:17px}
  .directory-table thead th{font-size:16px}
  .directory-table td{font-size:17px}
  .book-list a{ grid-template-columns:52px minmax(0,1fr); align-items:start; }
   /* 刪 grid-template-columns:52px minmax(0,1fr) 34px} */
  .book-author{display:block;font-size:16px;font-weight:400;white-space:normal;overflow-wrap:anywhere}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- 回頂端 ---------- */
.go-top{
  position:fixed;right:18px;bottom:18px;z-index:20;
  width:44px;height:44px;border:1px solid #aebdc5;border-radius:50%;
  background:rgba(255,255,255,.94);color:#244f70;
  font:600 22px/1 Arial,sans-serif;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}
.go-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.go-top:hover,.go-top:focus{background:#f1f5f7}

/* 手機版刻意保留表格與電子書之間的呼吸空間。 */
@media(max-width:600px){
  .directory-section{padding-bottom:18px}
  .books-section{padding-top:30px}
  .go-top{right:12px;bottom:14px;width:42px;height:42px}
}


/* =========================================================
   v7 修正：保留 v6 的所有功能，只做小幅版面與導航調整
   ========================================================= */

/* 第一行：只顯示本卷書標題，置中 */
.title-row{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.title-row h1{
  width:100%;
  text-align:center;
}

/* 第二行：左「首頁／簡體／EN」，右「快速前往」 */
.function-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  border-top:1px solid #e5ebee;
  border-bottom:1px solid #e5ebee;
}
.function-row .top-nav{
  padding:7px 0;
  border:0;
  font-size:16px;
  white-space:nowrap;
}
.function-row .top-nav a{
  color:var(--link);
  text-decoration:none;
}
.function-row .top-nav a:hover,
.function-row .top-nav a:focus{
  text-decoration:underline;
}

#quickToggle{
  flex:0 0 auto;
}

/* 快速前往中的「電子書」：與六個單元一樣是按鈕，不出現底線 */
.quick-book-button{
  margin-top:7px;
  border-top:0 !important;
  border-bottom:0 !important;
  text-decoration:none !important;
}
.quick-book-button:hover,
.quick-book-button:focus{
  text-decoration:none !important;
}

/* 快速前往面板的「關閉」 */
.quick-panel{
  position:relative;
  padding-bottom:42px;
}
.quick-close{
  position:absolute;
  right:10px;
  bottom:8px;
  border:0;
  padding:10px 5px;
  background:transparent;
  color:#0040ff;
  font-size:15px;
  font-weight:400;
  cursor:pointer;
}
.quick-close:hover,
.quick-close:focus{
  color:var(--link);
  text-decoration:underline;
}

/* 電子書：標題簡潔；作者始終保留 */
.books-section .section-heading{
  justify-content:flex-start;
}
.book-author{
  font-weight:400;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* v7：避免狹窄手機把電子書「作者」藏掉 */
@media(max-width:380px){
  .book-list a{
    /* 編號／書名／作者／PDF 四欄仍保留 */
    grid-template-columns:52px minmax(0,1fr) 52px 34px;
  }
  .book-author{
    display:block !important;
    font-size:16px !important;
    font-weight:400 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
  /* 刪 .book-pdf{ font-size:14px; } */
}

@media(max-width:600px){
  .function-row{
    min-height:44px;
  }
  .function-row .top-nav{
    font-size:16px;
  }
  .title-row{
    min-height:58px;
  }
  .title-row h1{
    font-size:25px;
  }
}


/* ================================================================
   母版｜查經目錄：直欄底色
   ---------------------------------------------------------------
   目的：取消「奇數列 / 偶數列」的橫向條紋，改用直向欄位區別六個單元。

   為什麼？
   使用者閱讀這張表時，通常是「先認出單元，再往下找章」。
   因此讓同一單元的欄位保持一致，比讓 01、02、03 各自形成橫條更有用。

   可安全修改：
   - #eef4f8：1、3、5 欄，稍帶藍灰。
   - #f8fafc：2、4、6 欄，接近白色。
   若希望差異更明顯，只調這兩個色碼即可；不必改 HTML 或 JS。
   ================================================================ */
.directory-table tbody tr:nth-child(even) td{
  background:inherit;
}
.directory-table tbody td:nth-child(1),
.directory-table tbody td:nth-child(3),
.directory-table tbody td:nth-child(5){
  background:#eef4f8;
}
.directory-table tbody td:nth-child(2),
.directory-table tbody td:nth-child(4),
.directory-table tbody td:nth-child(6){
  background:#f8fafc;
}

/* ================================================================
   母版｜表格底部「欄位提示」
   ---------------------------------------------------------------
   這不是第二個表頭，也不 sticky。
   它只在使用者捲到表格底部時，提供一次「六欄各代表什麼」的提示。

   ① 目的：避免讀者在表格底端看到 28、29、30 章時，忘了欄位名稱。
   ② 為什麼不固定：固定會浪費手機高度，也可能被誤認為第二個表頭。
   ③ 可安全修改：15px、5px 2px、文字顏色與背景色。
   ④ 不要加入 position:sticky；這一列就是普通內容。
   ⑤ 手機會與表格一起捲動，桌面也是如此。
   ⑥ 若日後增加第七個單元，HTML 與此處的 grid 欄數要同步增加。
   ================================================================ */
.directory-footer-hint{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  font-size:15px;
  font-weight:400;
  padding:5px 2px;
  color:#606060; /* 原 #68777e; */
  background:#e3edff;  /* 原 fafafa */
  border-top:1px solid var(--line);
}
.directory-footer-hint span{
  text-align:center;
  line-height:1.4;
  padding:0 2px;
  border-right:1px solid var(--line);
}
.directory-footer-hint span:last-child{border-right:0}

/* ================================================================
   母版｜電子書：讓「書名＋作者」成為同一個內容區
   ---------------------------------------------------------------
   v8 把書名與作者放進 `.book-main`，因此手機 380px 以下可以真正使用
   「52px + 主要內容 + 34px」三欄，而不會因 Grid 有第四個獨立元素而
   把作者或 PDF 推到錯誤的位置。

   第 1 欄：編號，例如 40BT01。
   第 2 欄：書名＋作者，佔用所有剩餘寬度。
   第 3 欄：PDF。

   這個結構特別適合手機：書名可以折成兩行，作者仍然保留。
   ================================================================ */
.book-list a{
  /* 原 grid-template-columns:72px minmax(0,1fr) 42px; */
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
}
.book-main{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.book-no{color:#606F75; font-size:15px;}
.book-title{
  min-width:0;
  color:#606F75;
  overflow-wrap:anywhere;
}
.book-author{
  flex:0 0 auto;
  font-weight:400;
  white-space:nowrap;
  color:#606F75; /* #68777e; */
  font-size:16px;
}
/* 刪 .book-pdf { white-space:nowrap; } */

/* ================================================================
   母版｜380px 以下：電子書內容向上對齊
   ---------------------------------------------------------------
   ① 目的：手機很窄時，書名可能折成兩行，作者也可能另起一行。
   ② 為什麼用 start：若使用 center，單行與雙行會產生不同的上下位置，
      看起來像「跳動」；start 讓每列都從同一個上緣開始。
   ③ 52px 是編號欄；34px 是 PDF 欄；中間欄吃掉剩餘寬度。
   ④ 如果手機字太大，可先調 `.book-author` 的 16px，不要先縮 PDF。
   ⑤ 桌面不受此段影響；只有 380px 以下啟用。
   ⑥ 若日後要增加手機操作項目，要同步重新計算三欄寬度。
   ================================================================ */

@media(max-width:384px){
  .book-list a{
    grid-template-columns:68px minmax(0,1fr);
    align-items:start; /* 386 靠上對齊 */
  }
}


@media(max-width:359px){
  .book-list a{ 
    grid-template-columns:68px minmax(0,1fr); /* 34px */
    align-items:start;  /* 靠上對齊 */
  }
  .book-main{
    display:block;
  }
  .book-title{
    display:block;
    font-size:16px;
    line-height:1.45;
  }
  .book-author{
    display:block;
    margin-top:1px;
    font-size:16px;
    font-weight:400;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.4;
  }
/* 刪  .book-pdf { font-size:14px; text-align:right; } */
}

/* ================================================================
   母版｜手機底部提示列
   ---------------------------------------------------------------
   六欄在手機仍然各佔 1/6 寬度；15px 已是提示文字，不再放大。
   若手機太窄，提示仍可自然縮小／換行，不影響章節連結。
   ================================================================ */
@media(max-width:600px){
  .directory-footer-hint{
    font-size:15px;
    padding:5px 2px;
  }
  .directory-footer-hint span{
    line-height:1.35;
  }
}