/* 寶光紹興・佛規禮節本 閱讀器
   設計語彙：Accessible First（高對比、大字、大按鈕、可關動效）
   目標裝置：手機／平板直握，長者友善 */

:root{
  --paper:#FFFFFF;
  --ink:#111827;
  --muted:#4b5563;
  --line:#e5e7eb;
  --brand:#0F766E;      /* 藍綠 teal */
  --brand-d:#0b5b54;
  --accent:#B79B6C;     /* 霧金點綴 */
  --bg:#eceae4;         /* 舞台底色，襯托紙頁 */
  --btn:#0F766E;
  --btn-ink:#ffffff;
  --tap:44px;           /* 最小觸控目標 */
  --safe-b:env(safe-area-inset-bottom, 0px);
  font-size:18px;       /* 長者友善基準字級 */
  /* 工具列尺寸（預設＝中；比初版小一點）。可由「介面大小」設定切換小/中/大 */
  --tb-h:48px; --tb-btn-h:38px; --tb-fs:15px; --tb-title:17px;
  --nav-h:46px; --nav-fs:16px;
  --zoom-w:50px; --zoom-fs:18px; --zoom-fit-fs:15px;
  --pg-fs:14px;
}
.app.ui-s{--tb-h:42px;--tb-btn-h:34px;--tb-fs:13px;--tb-title:15px;--nav-h:40px;--nav-fs:14px;--zoom-w:44px;--zoom-fs:16px;--zoom-fit-fs:13px;--pg-fs:13px;}
.app.ui-l{--tb-h:58px;--tb-btn-h:46px;--tb-fs:18px;--tb-title:20px;--nav-h:56px;--nav-fs:19px;--zoom-w:60px;--zoom-fs:22px;--zoom-fit-fs:16px;--pg-fs:16px;}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}   /* 修正：讓 hidden 屬性壓過下方 display:flex 等規則 */
html,body{height:100%;margin:0;}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ============ 進入門鎖 ============ */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0f766e 0%,#0b5b54 60%,#08403b 100%);padding:24px;}
.gate-card{width:100%;max-width:380px;background:var(--paper);border-radius:18px;
  padding:34px 26px 28px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.28);}
.gate-mark{display:inline-block;font-size:20px;letter-spacing:.3em;color:var(--paper);
  background:var(--brand);border-radius:10px;padding:8px 16px 8px 22px;margin-bottom:18px;}
.gate-title{font-size:24px;margin:0 0 8px;font-weight:700;
  font-family:"Noto Serif TC","Songti TC",serif;}
.gate-sub{font-size:16px;color:var(--muted);margin:0 0 22px;line-height:1.7;}
.gate-input{width:100%;height:54px;font-size:20px;text-align:center;letter-spacing:.15em;
  border:2px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:14px;}
.gate-input:focus{outline:none;border-color:var(--brand);}
.gate-btn{width:100%;height:54px;font-size:20px;font-weight:700;letter-spacing:.3em;
  color:var(--btn-ink);background:var(--brand);border:none;border-radius:12px;cursor:pointer;}
.gate-btn:active{background:var(--brand-d);}
.gate-err{color:#b91c1c;font-size:15px;margin:14px 0 0;}

/* ============ 版面骨架（沉浸式：頁面吃滿全螢幕，工具列半透明疊層、可隱藏） ============ */
.app{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;}

/* 閱讀舞台：填滿整個畫面 */
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);}
.canvas-wrap{position:absolute;inset:0;overflow:auto;display:flex;align-items:center;justify-content:center;
  -webkit-overflow-scrolling:touch;padding:6px;perspective:1600px;}
#page-canvas{display:block;background:var(--paper);box-shadow:0 4px 18px rgba(0,0,0,.18);border-radius:2px;}
/* 翻書：覆蓋層 canvas，沿書脊 rotateY 翻走，過 90° 因 backface 隱形，露出底下新頁 */
#flip-canvas{position:absolute;display:none;pointer-events:none;background:var(--paper);
  border-radius:2px;box-shadow:0 4px 18px rgba(0,0,0,.22);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;z-index:5;}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--muted);pointer-events:none;}
/* 雙頁換頁輕淡入 */
@keyframes pgFade{from{opacity:.4}to{opacity:1}}
#page-canvas.pg-fade{animation:pgFade .18s ease-out;}
/* 版面切換鈕：只在夠寬的螢幕顯示（窄螢幕一律單頁，不需此鈕） */
#btn-layout{display:none;}
@media (min-width:760px){#btn-layout{display:inline-block;}}

/* 迷你頁碼（工具列隱藏時仍知道頁次；工具列顯示時自動淡出） */
.mini-page{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-b));
  z-index:20;pointer-events:none;background:rgba(17,24,39,.55);color:#fff;font-size:13px;
  padding:3px 12px;border-radius:20px;transition:opacity .2s;}
.app:not(.chrome-off) .mini-page{opacity:0;}

/* 頂部工具列（疊在頁面上、半透明、可隱藏） */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:6px;
  height:var(--tb-h);padding:0 8px;padding-top:env(safe-area-inset-top,0);box-sizing:content-box;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);transition:transform .22s ease,opacity .22s ease;}
.topbar-title{flex:1;min-width:0;text-align:center;font-size:var(--tb-title);font-weight:700;
  font-family:"Noto Serif TC","Songti TC",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-btn{height:var(--tb-btn-h);padding:0 10px;font-size:var(--tb-fs);border:none;border-radius:9px;
  background:#f1f3f2;color:var(--ink);cursor:pointer;white-space:nowrap;}
.tb-btn:active{background:#e3e7e5;}

/* 底部工具列組（疊在頁面上、半透明、可隱藏） */
.bottom-chrome{position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);transition:transform .22s ease,opacity .22s ease;}
.bottombar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;}
.bb-btn{height:var(--nav-h);border:none;border-radius:11px;font-weight:700;cursor:pointer;}
.bb-btn.nav{flex:1;background:var(--brand);color:var(--btn-ink);max-width:150px;font-size:var(--nav-fs);}
.bb-btn.nav:active{background:var(--brand-d);}
.bb-btn.nav:disabled{background:#cbd5d1;color:#eef2f0;cursor:default;box-shadow:none;}
.zoom-group{display:flex;gap:6px;}
.bb-btn.zoom{width:var(--zoom-w);background:#f1f3f2;color:var(--ink);font-size:var(--zoom-fs);}
.bb-btn.zoom#btn-zoom-fit{font-size:var(--zoom-fit-fs);}
.bb-btn.zoom:active{background:#e3e7e5;}
.pagebar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 12px calc(8px + var(--safe-b));font-size:var(--pg-fs);color:var(--muted);}
.pg-mark{border:none;background:transparent;color:var(--brand);font-size:26px;line-height:1;
  cursor:pointer;padding:4px 12px;min-width:44px;min-height:40px;}
.pg-mark.on{color:var(--accent);}   /* 已收藏＝霧金填滿星 */
.pg-jump{display:flex;align-items:center;gap:6px;}
.pg-input{width:64px;height:38px;font-size:16px;text-align:center;border:1.5px solid var(--line);border-radius:8px;}
.pg-go{height:38px;padding:0 12px;border:none;border-radius:8px;background:#f1f3f2;font-size:15px;cursor:pointer;}

/* 沉浸式：收起工具列（點畫面中央切換） */
.app.chrome-off .topbar{transform:translateY(-100%);opacity:0;pointer-events:none;}
.app.chrome-off .bottom-chrome{transform:translateY(110%);opacity:0;pointer-events:none;}

/* ============ 抽屜／面板 ============ */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;}
.drawer{position:fixed;top:0;bottom:0;right:0;width:min(86vw,360px);z-index:50;background:var(--paper);
  box-shadow:-8px 0 30px rgba(0,0,0,.2);display:flex;flex-direction:column;
  transform:translateX(0);}
.drawer-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 16px;border-bottom:1px solid var(--line);font-size:19px;font-weight:700;
  font-family:"Noto Serif TC","Songti TC",serif;}
.drawer-x{border:none;background:transparent;font-size:20px;cursor:pointer;width:44px;height:44px;}
.drawer-note{margin:12px 16px;font-size:14px;color:var(--muted);line-height:1.7;}
.toc-front{display:block;width:calc(100% - 24px);margin:12px;padding:12px;border:1px solid var(--line);
  border-radius:10px;background:#f5faf8;color:var(--brand);font-size:15px;font-weight:600;cursor:pointer;}
.toc-front:active{background:#e9f3f0;}

.toc-list,.result-list,.marks-list{list-style:none;margin:0;padding:0 0 20px;overflow:auto;flex:1;}
.toc-list li,.result-list li,.marks-list li{border-bottom:1px solid var(--line);}
.toc-list button,.result-list button,.marks-list .mk-go{width:100%;text-align:right;border:none;background:none;
  padding:16px;font-size:17px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:10px;}
.toc-list button:active,.result-list button:active{background:#f1f3f2;}
.toc-list .toc-pg,.result-list .rs-pg{color:var(--brand);font-variant-numeric:tabular-nums;flex:0 0 auto;}
/* 目錄三階層（依原書 禮標題1/2/3）：L1 大單元、L2 子項、L3 編號項 */
.toc-list li.toc-l1 button{font-weight:700;font-size:17px;padding:14px 16px;background:#f5faf8;}
.toc-list li.toc-l2 button{font-size:15.5px;padding:11px 16px 11px 36px;}
.toc-list li.toc-l3 button{font-size:14.5px;padding:9px 16px 9px 56px;color:#5b6b66;}
.toc-list li.toc-l3 .toc-pg{color:#8aa39c;}
.toc-list .toc-t{text-align:left;}
.result-list .rs-snip{display:block;font-size:14px;color:var(--muted);text-align:right;padding:0 16px 12px;line-height:1.6;}

.search-form,.marks-io{display:flex;gap:8px;padding:14px 16px;}
.search-input{flex:1;height:46px;font-size:17px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;}
.search-go,.io-btn{height:46px;padding:0 16px;border:none;border-radius:10px;background:var(--brand);
  color:var(--btn-ink);font-size:16px;cursor:pointer;}
.io-btn{background:#f1f3f2;color:var(--ink);flex:1;}

.marks-list li{display:flex;align-items:center;}
.marks-list .mk-go{justify-content:space-between;align-items:center;gap:10px;}
.marks-list .mk-label{text-align:right;line-height:1.6;flex:1;}
.marks-list .mk-page{color:var(--muted);font-size:15px;margin-left:8px;}
.marks-list .mk-title{font-weight:700;color:var(--brand);background:#eaf3f1;
  border-radius:6px;padding:2px 8px;}
.marks-list .mk-del{border:none;background:transparent;color:#b91c1c;font-size:18px;width:52px;height:52px;cursor:pointer;}

@media (min-width:820px){
  :root{font-size:19px;}
  .bb-btn.nav{max-width:200px;}
}