/* ── 讀書頁導覽殼（reader-nav，2026-09-25 產品換裝 P1，一般四等試點）──────────────
   設計來源：火災學總則圖書館的「結合版」導覽（13_build_library.py），使用者已定案。
   這支檔案只放「殼」：左側深色窄欄、側欄頂部返回鈕＋搜尋鈕、指令面板、手機頂列／地圖／底部五鈕。
   卡片本身的樣式不在這裡——那是各產品 view.html 的內容樣式，殼要能套在法規頁、讀書卡頁上。
   所有規則都掛在 html.rn-on 底下（reader-nav.js 啟動才加），沒呼叫 init 的頁面完全不受影響。
   色票沿用站上冷白・藏青：--ink #15130f、--promo #1e3a5f、--promo-lt #eaf1fb、--bd #dfe4ec、紅 #c0392b。 */

/* ── 頂部站台 nav：窄桌機（761–1100）連結列放不下時自己橫捲，不撐出整頁橫捲軸 ── */
html.rn-on .nav-links{min-width:0;flex-shrink:1;overflow-x:auto;scrollbar-width:none}
html.rn-on .nav-links::-webkit-scrollbar{display:none}
@media(max-width:1100px){html.rn-on .nav-tag{display:none}}

/* ── 電腦：最左深色窄欄 ─────────────────────────────────────────────── */
#rn-rail{display:none}
html.rn-pc #rn-rail{display:flex;flex-direction:column;align-items:center;gap:4px;position:sticky;top:52px;
  height:calc(100vh - 52px);width:60px;flex-shrink:0;background:#15130f;padding:10px 0;overflow-y:auto;scrollbar-width:none;z-index:5}
#rn-rail::-webkit-scrollbar{display:none}
#rn-rail button,#rn-rail a{color:#b9c3d0;background:transparent;border:0;text-decoration:none;width:48px;padding:5px 0;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.3;cursor:pointer;font-family:inherit}
#rn-rail b{font-size:16px;font-weight:700}
#rn-rail .rn-burger b{font-size:18px}
#rn-rail a.on,#rn-rail a:hover,#rn-rail button:hover{background:rgba(255,255,255,.12);color:#fff}
#rn-rail .rn-sep{width:28px;height:1px;background:rgba(255,255,255,.14);margin:4px 0}

/* 電腦版一律讓側欄在文件流裡（原本 ≤900px 會變成抽屜，但電腦版已有 ☰ 收合，兩套並存會打架） */
html.rn-pc .layout{display:flex}
/* 窄欄還沒長出來之前先留 60px（html.rn-pre 由 view.html 首繪前的小腳本加上），窄欄一插入就取代它，畫面不位移 */
html.rn-pre .layout:not(:has(#rn-rail))::before{content:"";flex:0 0 60px}
html.rn-pc #tsidebar{position:sticky;top:52px;left:auto;bottom:auto;width:252px;max-width:none;max-height:calc(100vh - 52px);
  transform:none;box-shadow:none;background:transparent;z-index:auto;padding-top:14px}
html.rn-pc #sideToggle{display:none}
html.rn-pc body.sidebar-open::after{display:none}
html.rn-pc.rn-sidecol #tsidebar{display:none}

/* ── 側欄頂部：膠囊返回鈕＋搜尋框樣式按鈕 ─────────────────────────────── */
.rn-back{display:inline-flex;align-items:center;gap:3px;font-size:14px;font-weight:600;color:var(--hb-link,#1e3a5f);background:#eaf1fb;
  border-radius:999px;padding:3px 12px 3px 9px;text-decoration:none;margin:0 8px 8px;transition:background .15s,color .15s}
.rn-back:hover{background:#1e3a5f;color:#fff}
.rn-sidesearch{display:flex;width:calc(100% - 16px);align-items:center;gap:6px;margin:6px 8px 10px;padding:7px 10px;border:1px solid var(--hb-line,#dfe4ec);
  border-radius:8px;background:var(--hb-bg,#f4f6f9);color:#6f695c;font-size:14px;cursor:pointer;text-align:left;font-family:inherit}
.rn-sidesearch:hover{border-color:#1e3a5f;color:var(--hb-link,#1e3a5f)}
.rn-sidesearch kbd{margin-left:auto;font-size:12px;border:1px solid var(--hb-line,#dfe4ec);border-radius:4px;padding:0 5px;background:var(--hb-surface,#fff);font-family:inherit}

/* ── 指令面板（搜尋跳轉）─────────────────────────────────────────────── */
#rn-pal{display:none;position:fixed;inset:0;z-index:600;background:rgba(10,15,25,.45)}
#rn-pal.open{display:block}
#rn-pal .rn-box{max-width:620px;margin:10vh auto 0;background:var(--hb-surface,#fff);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
#rn-pal input{width:100%;border:0;border-bottom:1px solid var(--hb-line,#dfe4ec);padding:14px 16px;font-size:18px;background:var(--hb-surface,#fff);color:var(--hb-fg,#1f1d18);outline:none;font-family:inherit}
#rn-pal .rn-res{max-height:60vh;overflow:auto}
#rn-pal .rn-it{display:flex;gap:10px;padding:8px 16px;cursor:pointer;align-items:baseline;font-size:14px;color:var(--hb-fg,#1f1d18);line-height:1.5}
#rn-pal .rn-it.on{background:#eaf1fb}
#rn-pal .rn-k{font-size:12px;border-radius:4px;padding:0 5px;background:#eaf1fb;color:var(--hb-link,#1e3a5f);flex-shrink:0}
#rn-pal .rn-it.on .rn-k{background:#1e3a5f;color:#fff}
#rn-pal .rn-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rn-pal .rn-sub{margin-left:auto;font-size:12px;color:#6f695c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%;flex-shrink:1}
#rn-pal .rn-empty{padding:16px;color:#6f695c;font-size:14px}
#rn-pal .rn-hint{padding:7px 16px;font-size:12px;color:#6f695c;border-top:1px solid var(--hb-line,#dfe4ec);background:var(--hb-bg,#f4f6f9)}

/* ── 手機：頂部細深色列／本科地圖／底部五鈕 ───────────────────────────── */
#rn-mtop,#rn-mbot,#rn-sheet,#rn-dim{display:none}
html.rn-mob .nav{position:relative}      /* 站台 nav 在手機不必 sticky，讓出頂端給細列 */
html.rn-mob #rn-mtop{display:block;position:sticky;top:0;z-index:120;background:#15130f;color:#fff;text-align:center;
  padding:7px 12px 7px;transition:transform .2s;cursor:pointer;overflow:hidden}
html.rn-mob.rn-hid #rn-mtop{transform:translateY(-100%)}
#rn-mtop .rn-tt{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rn-mtop .rn-cr{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em}
#rn-mtop .rn-pb{position:absolute;left:0;right:0;bottom:0;height:3px;background:#2a2f36}
#rn-mtop .rn-pb i{display:block;height:100%;width:0;background:#c0392b;transition:width .2s}

html.rn-mob #rn-mbot{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:130;background:var(--hb-surface,#fff);border-top:1px solid var(--hb-line,#dfe4ec);
  justify-content:space-around;padding:5px 0 calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 14px rgba(0,0,0,.06)}
#rn-mbot button{background:none;border:0;color:#6f695c;font-size:12px;display:flex;flex-direction:column;align-items:center;min-width:56px;cursor:pointer;font-family:inherit;padding:0}
#rn-mbot button b{font-size:18px;line-height:1.3;color:var(--hb-link,#1e3a5f)}
#rn-mbot .rn-cnt b{font-size:16px;line-height:1.7;font-variant-numeric:tabular-nums}
html.rn-mob main.content{padding-bottom:110px}
/* 底部五鈕佔了最下面一條：回饋鈕、浮動返回鈕往上讓 */
/* 2026-10-09 低等級 #5：給回饋鈕原本是 44px 高的膠囊停在右下，正好壓住內文最右一欄字。
   手機改成貼右緣的小圓鈕（文字收掉，只露出約一半），捲動時整顆滑出畫面，停下才回來。 */
html.rn-mob .fb-btn{bottom:72px;right:0;width:44px;height:44px;min-height:44px;padding:0 0 0 5px;font-size:0;gap:0;justify-content:flex-start;
  border-radius:999px 0 0 999px;transform:translateX(45%);opacity:.92;transition:transform .22s ease,opacity .22s ease}
html.rn-mob .fb-btn .hb-ic{font-size:16px;margin:0}
html.rn-mob.rn-fb-away .fb-btn{transform:translateX(105%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){html.rn-mob .fb-btn{transition:none}}
html.rn-mob .back-pill.floating{bottom:128px}
html.rn-mob .fb-toast{bottom:130px}

html.rn-mob.rn-sheet #rn-dim{display:block;position:fixed;inset:0;z-index:325;background:rgba(10,15,25,.35)}
html.rn-mob.rn-sheet #rn-sheet{display:block;position:fixed;left:0;right:0;top:0;z-index:330;background:var(--hb-surface,#fff);border-bottom:1px solid var(--hb-line,#dfe4ec);
  box-shadow:0 12px 30px rgba(0,0,0,.18);padding:10px 14px 14px;max-height:75vh;overflow:auto}
#rn-sheet .rn-hd{font-size:12px;color:#6f695c;margin-bottom:4px;display:flex;align-items:center}
#rn-sheet .rn-hd button{margin-left:auto;background:var(--hb-bg,#f4f6f9);border:1px solid var(--hb-line,#dfe4ec);border-radius:8px;width:30px;height:28px;color:#6f695c;cursor:pointer}
#rn-sheet .rn-chs{display:flex;gap:6px;overflow-x:auto;margin:0 0 8px;padding-bottom:4px}
#rn-sheet .rn-chs a{white-space:nowrap;font-size:12px;border-radius:6px;padding:1px 8px;background:var(--hb-bg,#f4f6f9);color:#6f695c;text-decoration:none}
#rn-sheet .rn-chs a.on{background:#1e3a5f;color:#fff}
#rn-sheet .rn-g{margin-top:6px}
#rn-sheet .rn-g>b{display:block;font-size:12px;color:#6f695c;margin:8px 0 2px;letter-spacing:.04em}
#rn-sheet a.rn-s{display:block;font-weight:700;padding:5px 0;color:var(--hb-fg,#1f1d18);text-decoration:none;font-size:14px}
#rn-sheet a.rn-s.on{color:var(--hb-link,#1e3a5f)}
#rn-sheet .rn-gs{margin:0 0 6px}
#rn-sheet .rn-gs a{display:inline-block;border:1px solid var(--hb-line,#dfe4ec);border-radius:14px;padding:0 10px;margin:4px 4px 0 0;font-size:14px;color:var(--hb-fg,#1f1d18);text-decoration:none}
#rn-sheet .rn-gs a.on{background:#1e3a5f;color:#fff;border-color:#1e3a5f}

/* 手機抽屜（沿用 view.html 既有 #tsidebar）：站台 nav 不再 sticky，抽屜改貼齊畫面頂端。
   站台 nav 的 z-index 是 200、回饋鈕 300，抽屜／地圖都要疊在它們上面，否則頂端被 nav 蓋住一截 */
html.rn-mob #tsidebar{top:0;z-index:340}
html.rn-mob body.sidebar-open::after{inset:0;z-index:335}
html.rn-mob #sideToggle{display:none}
html.rn-mob body.sidebar-open #sideToggle{display:flex;top:0;z-index:345}

#rn-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:#15130f;color:#fff;padding:8px 16px;border-radius:10px;
  font-size:14px;z-index:650;opacity:0;pointer-events:none;transition:opacity .25s}
#rn-toast.show{opacity:1}
html.rn-pc #rn-toast{bottom:24px}

/* 09-25 柯醒翰手機回饋：①地圖頂端的章按鈕會跟清單一起捲走、又太小點不到 → 標題列＋章列固定在地圖頂端、加大觸控範圍 */
#rn-sheet .rn-hd{position:sticky;top:-10px;z-index:2;background:var(--hb-surface,#fff);margin:-10px -14px 0;padding:10px 14px 4px}
#rn-sheet .rn-chs{position:sticky;top:26px;z-index:2;background:var(--hb-surface,#fff);margin:0 -14px 8px;padding:4px 14px 8px;border-bottom:1px solid #eef1f6;scrollbar-width:none}
#rn-sheet .rn-chs::-webkit-scrollbar{display:none}
#rn-sheet .rn-chs a{padding:6px 12px;font-size:14px;border-radius:8px;flex-shrink:0}
/* ②手機上卡片表格要左右捲才看得全 → 5 欄以內的表格直接縮到螢幕寬（中文自然換行、長英文字可斷）；6 欄以上維持左右捲 */
@media (max-width:760px){
  html.rn-on .ch-body article.card table:not(:has(tr > :nth-child(6))){display:table;width:100%;table-layout:fixed;font-size:12px}
  html.rn-on .ch-body article.card table:not(:has(tr > :nth-child(6))) th,
  html.rn-on .ch-body article.card table:not(:has(tr > :nth-child(6))) td{padding:4px 5px;overflow-wrap:anywhere}
}

/* 09-25 柯醒翰：新版導覽已有返回鈕、窄欄章號與頂部列，內文上方的麵包屑／科目小卡、側欄頂端科目大標都顯得多餘 → 收掉 */
html.rn-on #content>.breadcrumb,html.rn-on #content>.subj-summary{display:none}
/* 09-25 柯醒翰：返回鈕右邊還是要寫是哪部法規／哪科 → 科目名跟膠囊鈕同一行（取代原本帶紅底線的大標） */
html.rn-on #tsidebar .exam-now{display:inline-block;vertical-align:middle;border:0;margin:0 0 6px 6px;padding:0;font-size:14px;font-weight:800;
  max-width:168px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hb-fg,#1f1d18)}
/* 窄欄章名：兩行、每行約 4 字（看得懂的精簡名稱，不再只有「第一編」） */
#rn-rail .rn-lb{display:block;max-width:50px;font-size:12px;line-height:1.25;text-align:center;word-break:break-all;margin-top:1px}

/* 2026-10-07 rail touch：窄欄按鈕在平板直放（761–820）也要 ≥44px 高 */
@media (max-width:820px){#rn-rail button,#rn-rail a{min-height:44px;justify-content:center}}