/* ============================================================
   古籍知識庫 Guji Library — 全站樣式
   CSS 變數驅動日夜主題 + RWD + 元件
   ============================================================ */
:root{
  --font-main:'Microsoft JhengHei','PingFang TC','Noto Sans TC',sans-serif;
  --font-serif:'Noto Serif TC','Songti TC','PMingLiU',serif;

  /* 日間主題（暖紙） */
  --bg:#f6f2ea;
  --bg-soft:#efe9dc;
  --card:#ffffff;
  --text:#2b2720;
  --text-soft:#5c5348;
  --border:#ddd4c3;
  --primary:#8a5a2b;
  --primary-soft:#f1e6d6;
  --accent:#9a2f2f;
  --accent-soft:#f6e3e3;
  --link:#7a4a1e;
  --shadow:0 2px 8px rgba(80,60,30,.08);
  --radius:10px;
  --maxw:1180px;
  --readw:740px;
  --header-bg:#2b2720;
  --header-text:#f1ece2;
}

html[data-theme="dark"]{
  --bg:#17150f;
  --bg-soft:#1f1c14;
  --card:#262218;
  --text:#e8e2d4;
  --text-soft:#a89f8d;
  --border:#3d382b;
  --primary:#d3a46a;
  --primary-soft:#3a2f1f;
  --accent:#d97b6c;
  --accent-soft:#3a2420;
  --link:#dbb27e;
  --shadow:0 2px 10px rgba(0,0,0,.4);
  --header-bg:#0f0e0a;
  --header-text:#e8e2d4;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-main);
  font-size:16px;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background .3s,color .3s;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px;}
/* 可讀性：焦點可見、文字選取 */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}
::selection{background:var(--accent);color:#fff;}
/* 減少動效偏好 */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
}

/* ============ 標題 ============ */
.site-title{font-family:var(--font-serif);letter-spacing:1px;}

/* ============ Header ============ */
.site-header{background:var(--header-bg);color:var(--header-text);position:sticky;top:0;z-index:100;box-shadow:var(--shadow);}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 0;}
.brand{font-family:var(--font-serif);font-size:20px;font-weight:700;color:var(--header-text);display:flex;align-items:center;gap:8px;white-space:nowrap;}
.brand small{font-size:11px;opacity:.7;font-family:var(--font-main);font-weight:400;display:block;line-height:1.2;}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.icon-btn{
  background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--header-text);
  border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px;font-family:var(--font-main);line-height:1;
}
.icon-btn:hover{background:rgba(255,255,255,.12);}
.searchbox{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:5px 10px;}
.searchbox input{background:transparent;border:none;outline:none;color:var(--header-text);font-family:var(--font-main);width:160px;font-size:13px;}
.searchbox input::placeholder{color:rgba(255,255,255,.5);}
.searchbox button{background:none;border:none;color:var(--header-text);cursor:pointer;font-size:14px;}

/* 主導航 */
.main-nav{background:var(--header-bg);border-top:1px solid rgba(255,255,255,.1);}
.nav-inner{display:flex;align-items:center;flex-wrap:wrap;gap:0;}
.nav-inner>a,.nav-inner .drop>a{
  color:var(--header-text);display:block;padding:11px 14px;font-size:14px;white-space:nowrap;
}
.nav-inner>a:hover,.nav-inner .drop>a:hover{background:rgba(255,255,255,.12);text-decoration:none;}
.nav-inner .drop{position:relative;}
.drop .drop-label{cursor:pointer;}
.drop-menu{
  display:none;position:absolute;left:0;top:100%;background:var(--card);color:var(--text);
  min-width:220px;box-shadow:var(--shadow);border:1px solid var(--border);border-radius:8px;overflow:hidden;z-index:120;
}
.drop:hover .drop-menu,.drop.open .drop-menu{display:block;}
.drop-menu a{display:block;padding:9px 14px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);}
.drop-menu a:last-child{border-bottom:none;}
.drop-menu a:hover{background:var(--primary-soft);text-decoration:none;}
.drop-menu .cat-num{float:right;color:var(--text-soft);font-size:11px;}

/* 漢堡選單 */
.hamburger{display:none;background:none;border:none;color:var(--header-text);font-size:22px;cursor:pointer;padding:4px 8px;}
.mobile-nav{display:none;background:var(--header-bg);border-top:1px solid rgba(255,255,255,.1);}
.mobile-nav a{display:block;color:var(--header-text);padding:12px 16px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-nav .sub{padding-left:20px;background:rgba(0,0,0,.15);}

/* ============ 麵包屑 ============ */
.breadcrumb{font-size:13px;color:var(--text-soft);padding:12px 0 2px;display:flex;flex-wrap:wrap;gap:4px;}
.breadcrumb a{color:var(--link);}
.breadcrumb .sep{margin:0 4px;color:var(--text-soft);}

/* ============ 版面：主內容 + 側欄 ============ */
.layout{display:flex;gap:24px;padding:16px 0 40px;}
.main-col{flex:1 1 auto;min-width:0;}
.side-col{flex:0 0 280px;}
@media(max-width:900px){
  .layout{flex-direction:column;}
  .side-col{flex:1 1 auto;}
}

/* 側欄 */
.sidebar .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow);}
.sidebar .panel h3{font-family:var(--font-serif);font-size:16px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);color:var(--primary);}
.sidebar .panel a{display:block;font-size:14px;padding:5px 0;color:var(--text);}
.sidebar .panel a:hover{color:var(--link);text-decoration:none;}
.sidebar .panel .num{color:var(--text-soft);font-size:12px;margin-left:4px;}

/* ============ 卡片 / 區塊 ============ */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px;}
.page-title{font-family:var(--font-serif);font-size:26px;margin-bottom:4px;color:var(--text);}
.page-sub{color:var(--text-soft);font-size:14px;margin-bottom:18px;}
h2.sec{font-family:var(--font-serif);font-size:20px;color:var(--primary);margin:22px 0 12px;padding-left:10px;border-left:4px solid var(--accent);}
.lead{font-size:15px;color:var(--text-soft);}

/* 六藏入口網格 */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.cat-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);transition:transform .15s;display:block;color:var(--text);
}
.cat-card:hover{transform:translateY(-3px);text-decoration:none;border-color:var(--primary);}
.cat-card .cname{font-family:var(--font-serif);font-size:19px;color:var(--primary);}
.cat-card .cnum{font-size:12px;color:var(--text-soft);}
.cat-card .cdesc{font-size:13px;color:var(--text-soft);margin-top:8px;}

/* 書目清單 */
.book-item{
  display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);
}
.book-item .b-cover{flex:0 0 52px;height:70px;background:var(--primary-soft);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);color:var(--primary);font-size:13px;text-align:center;padding:4px;overflow:hidden;}
.book-item .b-main{flex:1 1 auto;min-width:0;}
.book-item .b-title{font-family:var(--font-serif);font-size:17px;color:var(--text);}
.book-item .b-title:hover{color:var(--link);text-decoration:none;}
.book-item .b-meta{font-size:12px;color:var(--text-soft);margin-top:2px;}
.book-item .b-desc{font-size:13px;color:var(--text-soft);margin-top:6px;}
.tag{display:inline-block;background:var(--primary-soft);color:var(--primary);border-radius:4px;padding:1px 7px;font-size:11px;margin:2px 3px 0 0;}
.tag.demo{background:var(--accent-soft);color:var(--accent);}

/* 閱讀頁 */
.reader-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px;}
.reader-card h1{font-family:var(--font-serif);font-size:25px;text-align:center;margin-bottom:6px;letter-spacing:1px;}
.reader-meta{text-align:center;color:var(--text-soft);font-size:13px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.toc{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:14px 18px;margin:14px 0;}
.toc .toc-title{font-family:var(--font-serif);font-weight:700;color:var(--primary);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.toc .toc-list{max-height:280px;overflow-y:auto;padding-right:6px;}
.toc .toc-list::-webkit-scrollbar{width:6px;}
.toc .toc-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.toc a{display:block;font-size:14px;padding:4px 0;color:var(--text);}
.toc a:hover{color:var(--link);text-decoration:none;}
.toc a.active{color:var(--accent);font-weight:700;}
.book-text{font-family:var(--font-serif);font-size:17.5px;line-height:2.05;color:var(--text);max-width:var(--readw);margin:0 auto;}
.book-text p{margin-bottom:14px;text-indent:2em;}
.nav-book{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:14px;border-top:1px solid var(--border);font-size:14px;}
.nav-book a{color:var(--link);padding:6px 2px;}

/* ============ 表格 ============ */
table.data{width:100%;border-collapse:collapse;font-size:14px;}
table.data th,table.data td{border:1px solid var(--border);padding:8px 10px;text-align:left;}
table.data th{background:var(--primary-soft);color:var(--primary);font-family:var(--font-serif);}
table.data tr:nth-child(even){background:var(--bg-soft);}

/* ============ 分頁 ============ */
.pagination{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px;align-items:center;}
.pagination button,.pagination .page-num{
  border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:5px;
  padding:3px 8px;font-size:12px;cursor:pointer;font-family:var(--font-main);min-height:0;
}
.pagination button:hover,.pagination .page-num:hover{background:var(--primary-soft);}
.pagination .page-num.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.pagination .info{font-size:13px;color:var(--text-soft);margin-right:8px;}

/* ============ 檢索 ============ */
.search-page .bigsearch{display:flex;gap:8px;margin-bottom:18px;}
.search-page .bigsearch input{flex:1 1 auto;padding:12px 14px;font-size:16px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-family:var(--font-main);}
.search-page .bigsearch button{padding:12px 22px;font-size:15px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;}
.result-item{border-bottom:1px solid var(--border);padding:12px 0;}
.result-item .r-title{font-family:var(--font-serif);font-size:16px;}
.result-item .r-snippet{font-size:14px;color:var(--text-soft);margin-top:4px;}
mark{background:#f5d97a;color:#3a2a00;padding:0 2px;border-radius:2px;}
html[data-theme="dark"] mark{background:#6b5417;color:#fff;}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.filters .chip{border:1px solid var(--border);background:var(--card);border-radius:20px;padding:5px 13px;font-size:13px;cursor:pointer;color:var(--text);}
.filters .chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.filters .chip .n{opacity:.7;margin-left:3px;}

/* ============ Footer ============ */
.site-footer{background:var(--header-bg);color:var(--header-text);margin-top:auto;padding:30px 0 20px;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;}
.footer-grid h4{font-family:var(--font-serif);font-size:15px;margin-bottom:10px;color:var(--primary-soft);}
.footer-grid a{display:block;color:var(--header-text);font-size:13px;padding:3px 0;opacity:.85;}
.footer-grid a:hover{opacity:1;text-decoration:none;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:14px;font-size:12px;color:rgba(255,255,255,.6);text-align:center;}

/* ============ 浮動返回 ============ */
.back-top{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  background:var(--primary);color:#fff;border:none;cursor:pointer;font-size:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:.25s;z-index:90;
}
.back-top.show{opacity:1;visibility:visible;}
.back-top:hover{background:var(--accent);}

/* ============ 站內導覽 ============ */
.quick-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:80;}
.quick-nav a{
  width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--border);
  color:var(--text);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:var(--shadow);
}
.quick-nav a:hover{background:var(--primary);color:#fff;text-decoration:none;}
@media(max-width:700px){.quick-nav{display:none;}}

/* ============ 提示 ============ */
.notice{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px;}
.notice.info{background:var(--primary-soft);color:var(--primary);border-color:var(--primary);}
.empty{text-align:center;color:var(--text-soft);padding:40px 0;font-size:15px;}

/* ============ RWD ============ */
@media(max-width:700px){
  .main-nav{display:none;}
  .hamburger{display:block;}
  .searchbox input{width:120px;}
  .book-text{font-size:17px;line-height:2;}
  .reader-card{padding:16px 14px;}
  .page-title{font-size:22px;}
  .container{padding:0 14px;}
  .toc{padding:12px 12px;}
  .toc .toc-list{max-height:220px;}
  .book-item{padding:12px;}
  .footer-grid{gap:18px;}
}
@media(min-width:701px){.mobile-nav{display:none !important;}}
/* 平板微調 */
@media(max-width:1100px){.side-col{flex:0 0 240px;}}

/* ============ 易讀性補強 ============ */
.lead{line-height:1.85;}
.page-sub{line-height:1.7;}
.card{padding:22px;}
.b-title,.r-title,.lp-title,.tree-label{text-underline-offset:3px;}
.book-item .b-title{font-size:18px;}
.reader-card h1,.page-title{text-wrap:balance;}
.cat-card .cdesc,.b-desc,.r-snippet,.tl-desc{line-height:1.7;}
/* 按鈕觸控與對比 */
.btn,.icon-btn,.tab-btn,.pagination button,.page-num,.fav-btn{min-height:40px;}
.icon-btn{min-height:34px;}
.chip{padding:7px 15px;}
.nav-inner>a,.nav-inner .drop>a{padding:12px 15px;}


/* ============================================================
   進階元件：tabs / accordion / tree / fab / tag-cloud / timeline /
   social / forms / context-menu / dashboard / lazy / favorite / related
   ============================================================ */

/* ---------- Tab / 檢視切換 ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:10px;}
.tab-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:8px;padding:7px 15px;font-size:13px;cursor:pointer;font-family:var(--font-main);}
.tab-btn:hover{background:var(--primary-soft);}
.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ---------- Accordion 折疊面板 ---------- */
.acc-item{border:1px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden;background:var(--card);}
.acc-head{padding:12px 16px;font-family:var(--font-serif);font-size:15px;color:var(--primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;}
.acc-head:hover{background:var(--primary-soft);}
.acc-head .arrow{transition:transform .2s;}
.acc-item.open .acc-head .arrow{transform:rotate(90deg);}
.acc-body{display:none;padding:0 16px 14px;font-size:14px;color:var(--text-soft);}
.acc-item.open .acc-body{display:block;}

/* ---------- Tree View 樹狀檢視 ---------- */
.tree-view{font-size:14px;}
.tree-node{margin:2px 0;}
.tree-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px;cursor:pointer;}
.tree-row:hover{background:var(--primary-soft);}
.tree-toggle{width:16px;text-align:center;color:var(--text-soft);cursor:pointer;user-select:none;}
.tree-label{color:var(--text);text-decoration:none;}
.tree-label:hover{color:var(--link);text-decoration:none;}
.tree-count{color:var(--text-soft);font-size:12px;margin-left:4px;}
.tree-children{display:none;padding-left:22px;border-left:1px solid var(--border);margin-left:6px;}
.tree-node.open>.tree-children{display:block;}
.tree-node>.tree-row>.tree-toggle.closed::before{content:"▶";}
.tree-node.open>.tree-row>.tree-toggle.closed::before{content:"▼";}

/* ---------- FAB 浮動行動按鈕 ---------- */
.fab-group{position:fixed;right:22px;bottom:76px;display:flex;flex-direction:column;gap:10px;z-index:90;}
.fab{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s;color:#fff;}
.fab:hover{transform:scale(1.08);}
.fab.main{background:var(--primary);}
.fab.fav{background:var(--accent);}
.fab.share{background:#3f5a9a;}
.fab.top{background:var(--primary);}

/* ---------- Tag Cloud 標籤雲 ---------- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;align-items:center;line-height:1;}
.tag-cloud a{display:inline-block;padding:4px 12px;border:1px solid var(--border);border-radius:20px;font-size:13px;color:var(--text);background:var(--card);}
.tag-cloud a:hover{background:var(--primary);color:#fff;border-color:var(--primary);text-decoration:none;}
.tag-cloud a.s1{font-size:12px;} .tag-cloud a.s2{font-size:14px;} .tag-cloud a.s3{font-size:16px;} .tag-cloud a.s4{font-size:18px;} .tag-cloud a.s5{font-size:20px;}

/* ---------- Timeline 時間軸 ---------- */
.timeline{position:relative;padding-left:24px;margin:10px 0;}
.timeline::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--border);}
.tl-item{position:relative;margin-bottom:18px;}
.tl-dot{position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid var(--card);}
.tl-item:last-child{margin-bottom:0;}
.tl-date{font-size:12px;color:var(--text-soft);}
.tl-title{font-family:var(--font-serif);font-size:15px;color:var(--text);font-weight:700;}
.tl-desc{font-size:13px;color:var(--text-soft);margin-top:2px;}

/* ---------- Social Icons ---------- */
.social-icons{display:flex;gap:10px;}
.social-icons a{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);}
.social-icons a:hover{background:var(--primary);color:#fff;border-color:var(--primary);text-decoration:none;}

/* ---------- Contact Info ---------- */
.contact-info{display:grid;gap:8px;font-size:14px;}
.contact-info .row{display:flex;gap:8px;align-items:center;color:var(--text);}
.contact-info .lbl{color:var(--text-soft);min-width:54px;}

/* ---------- Latest Posts / 最新書目 ---------- */
.latest-posts .lp-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.latest-posts .lp-item:last-child{border-bottom:none;}
.lp-cover{flex:0 0 40px;height:54px;background:var(--primary-soft);border:1px solid var(--border);border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);color:var(--primary);font-size:12px;}
.lp-title{font-family:var(--font-serif);font-size:15px;color:var(--text);}
.lp-title:hover{color:var(--link);text-decoration:none;}
.lp-meta{font-size:12px;color:var(--text-soft);}

/* ---------- 表單 ---------- */
.form-card{max-width:520px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:13px;color:var(--text-soft);margin-bottom:5px;}
.form-group .req{color:var(--accent);}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-family:var(--font-main);font-size:14px;}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);}
.form-msg{margin-top:12px;padding:10px 14px;border-radius:8px;font-size:14px;display:none;}
.form-msg.ok{display:block;background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary);}
.form-msg.err{display:block;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);}
.btn{padding:10px 20px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:14px;cursor:pointer;font-family:var(--font-main);}
.btn:hover{background:var(--accent);}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);}

/* ---------- Context Menu 自訂右鍵選單 ---------- */
.context-menu{position:fixed;z-index:200;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);min-width:160px;padding:6px;display:none;}
.context-menu a{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:var(--text);border-radius:5px;}
.context-menu a:hover{background:var(--primary-soft);text-decoration:none;}

/* ---------- Dashboard 統計 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow);}
.stat-card .num{font-family:var(--font-serif);font-size:30px;color:var(--primary);font-weight:700;}
.stat-card .lbl{font-size:13px;color:var(--text-soft);margin-top:4px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px;}
.bar-row .bl{flex:0 0 70px;color:var(--text);}
.bar-track{flex:1 1 auto;background:var(--bg-soft);border-radius:6px;height:22px;overflow:hidden;}
.bar-fill{height:100%;border-radius:6px;background:var(--primary);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:11px;color:#fff;white-space:nowrap;}

/* ---------- Lazy Load ---------- */
.lazy-section{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;}
.lazy-section.loaded{opacity:1;transform:none;}

/* ---------- Favorite 我的最愛 ---------- */
.fav-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:14px;color:var(--text);font-family:var(--font-main);}
.fav-btn.faved{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}
.fav-count{font-size:12px;color:var(--text-soft);margin-left:4px;}

/* ---------- Related Posts 相關書籍 ---------- */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:10px;}
.rel-card{border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--card);}
.rel-card .t{font-family:var(--font-serif);font-size:15px;color:var(--text);}
.rel-card .t:hover{color:var(--link);text-decoration:none;}
.rel-card .m{font-size:12px;color:var(--text-soft);margin-top:4px;}

/* ---------- Hover 進階 ---------- */
.hover-lift{transition:transform .15s,box-shadow .15s;}
.hover-lift:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.15);}
img.lazy-img{opacity:0;transition:opacity .4s;}
img.lazy-img.loaded{opacity:1;}

/* ---------- 防複製 ---------- */
.anti-copy{-webkit-user-select:none;user-select:none;}
.protected-email{cursor:pointer;border-bottom:1px dotted var(--link);}

/* ---------- 十藏兩階下拉（追加，勿動既有規則） ---------- */
.main-nav{position:relative;}
.nav-inner .drop{position:static;}
.drop-menu{padding:0;max-height:calc(100vh - 90px);overflow-y:auto;overflow-x:hidden;left:0;right:0;top:100%;width:auto;background:var(--card);box-shadow:0 18px 48px rgba(0,0,0,.45);}
.drop-menu .drop-grid{display:grid;grid-template-columns:repeat(5,auto);justify-content:center;gap:0;max-width:none;margin:0;}
.drop-group{padding:0;margin:0;border-right:1px solid var(--border);}
.drop-group:last-child{border-right:none;}
.drop-group .drop-cat{display:block;padding:8px 10px;margin:0;font-size:13px;font-weight:700;color:var(--text);background:var(--primary-soft);border-radius:0;border-bottom:1px solid var(--primary);}
.drop-group .drop-cat .cat-num,.drop-group .drop-sub .cat-num{float:none;display:inline;margin-left:8px;font-weight:400;}
.drop-group .drop-sub{display:block;padding:2px 10px;margin:0;font-size:12.5px;line-height:1.3;color:var(--text);border-bottom:1px solid var(--border);}
.drop-group .drop-sub:hover{background:var(--primary-soft);text-decoration:none;}
.mobile-nav .sub2{padding-left:40px;font-size:13.5px;background:rgba(0,0,0,.2);}
/* ============================================================
   v3.1 介面強化：首頁背景 / 浮動島導覽 / 下拉icon與箭頭 / 進階Hover
   ============================================================ */

/* ---------- 首頁 hero 背景 ---------- */
.card.hero{
  position:relative;overflow:hidden;border:none;padding:46px 38px;
  background-image:url('../images/hero-bg.webp');
  background-size:cover;background-position:center;
}
.card.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,242,234,.35) 0%,rgba(246,242,234,.78) 100%);
}
html[data-theme="dark"] .card.hero::after{background:linear-gradient(180deg,rgba(20,18,13,.62),rgba(20,18,13,.88));}
.card.hero>*{position:relative;z-index:1;}
.hero-textbox{
  display:inline-block;max-width:760px;text-align:center;
  background:rgba(20,18,13,.78);backdrop-filter:blur(6px);
  border:1px solid rgba(255,215,150,.25);border-radius:18px;
  padding:26px 34px;box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero-textbox .page-title{margin:0 0 10px;color:#fff;}
.hero-textbox .lead{margin:0;color:#fff;}

/* ---------- 浮動島導覽 ---------- */
.float-island{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:95;
  display:flex;align-items:center;gap:4px;padding:6px 8px;
  background:var(--card);border:1px solid var(--border);border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.float-island a,.float-island button{
  width:40px;height:40px;border-radius:50%;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);cursor:pointer;
  transition:background .2s,transform .15s,color .2s;
}
.float-island a:hover,.float-island button:hover{background:var(--primary);color:#fff;transform:translateY(-3px);}
.float-island .fi-theme{font-size:18px;}
.float-island .fi-top{background:var(--primary-soft);color:var(--primary);}
.float-island .fi-top:hover{background:var(--primary);color:#fff;}
@media(max-width:520px){
  .float-island{left:14px;right:14px;transform:none;justify-content:space-between;}
  .float-island a,.float-island button{width:36px;height:36px;}
}

/* ---------- 十藏下拉：icon 與箭頭 ---------- */
.nav-inner .drop .c-ic,.nav-inner .drop-cat .c-ic,.mobile-nav .c-ic{display:inline-block;width:22px;font-size:14px;text-align:center;}
.drop-label .c-ic{font-size:14px;width:auto;}
.drop-arrow{font-size:11px;margin-left:4px;opacity:.8;display:inline-block;transition:transform .2s;}
.drop.open .drop-arrow{transform:rotate(180deg);}
.drop-cat .c-ic{font-size:15px;transition:transform .15s;}
.drop-cat:hover .c-ic{transform:scale(1.18);}
.drop-sub .arr{display:inline-block;width:16px;color:var(--text-soft);transition:transform .15s,color .15s;}
.drop-sub:hover .arr{transform:translateX(4px);color:var(--link);}
.drop-cat,.drop-sub{transition:background .15s,color .15s,padding-left .15s;}
.drop-sub:hover{padding-left:16px;}

/* ============================================================
   進階 Hover 應用（全站）
   ============================================================ */
.cat-card{transition:transform .18s,box-shadow .18s,border-color .18s;}
.cat-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 10px 24px rgba(80,60,30,.14);}
.cat-card:hover .cname{color:var(--accent);}
.cat-card .cname{transition:color .18s;}

.book-item{transition:transform .18s,box-shadow .18s,border-color .18s;}
.book-item:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 6px 18px rgba(80,60,30,.12);}
.book-item:hover .b-title{color:var(--link);}
.book-item .b-title{transition:color .18s;}
.book-item .b-cover{transition:transform .2s;}
.book-item:hover .b-cover{transform:scale(1.06);}

.rel-card{transition:transform .18s,box-shadow .18s,border-color .18s;}
.rel-card:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 6px 16px rgba(80,60,30,.12);}
.rel-card:hover .t{color:var(--link);}
.rel-card .t{transition:color .18s;}

.lp-item{transition:background .18s;}
.lp-item:hover{background:var(--bg-soft);}
.lp-cover{transition:transform .2s;}
.lp-item:hover .lp-cover{transform:scale(1.08);}

.nav-inner>a,.nav-inner .drop>a.drop-label{position:relative;}
.nav-inner>a::after,.nav-inner .drop>a.drop-label::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
.nav-inner>a:hover::after,.nav-inner .drop>a.drop-label:hover::after{transform:scaleX(1);}

.social-icons a{transition:transform .18s,background .18s,color .18s;}
.social-icons a:hover{transform:translateY(-3px);}
.tag-cloud a{transition:transform .15s,background .15s,color .15s;}
.tag-cloud a:hover{transform:translateY(-2px);}

.tab-btn,.chip,.pagination button,.page-num,.btn,.icon-btn,.fav-btn{transition:background .18s,color .18s,transform .12s,border-color .18s;}
.tab-btn:hover,.chip:hover,.pagination button:hover,.page-num:hover{transform:translateY(-1px);}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(138,90,43,.30);}
.btn{transition:transform .12s,background .18s,box-shadow .18s;}

.fab{transition:transform .15s,box-shadow .15s,background .15s;}
.fab:hover{transform:scale(1.12);}
.back-top{transition:opacity .25s,visibility .25s,transform .2s,background .2s;}
.back-top:hover{transform:translateY(-3px);}
.quick-nav a{transition:transform .15s,background .15s,color .15s;}
.quick-nav a:hover{transform:translateX(-3px);}

.tree-row{transition:background .15s,padding-left .15s;}
.tree-row:hover{padding-left:8px;}
.stat-card{transition:transform .18s,box-shadow .18s;}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(80,60,30,.14);}