/* nav.css — 三端不同的導航
   桌面 ≥1024px：頂欄 = 標誌 + 居中膠囊導航（墨色滑塊）+ 主題按鈕
   平板 640–1023px：標誌 + 漢堡按鈕 → 右側全高抽屜（大字編號選單）
   手機 <640px：精簡頂欄 + 底部浮動標籤欄（圖標，下滑收起、上滑出現）
   所有尺寸的頂欄高度都固定，捲動時絕不改變（避免與捲動位置互相拉扯造成抽搐） */

/* ---------- 頂欄 ---------- */
.topbar .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:76px;padding:0;font-size:14px;animation:fade .8s var(--ease) backwards}
.logo{justify-self:start;font:900 22px var(--serif);letter-spacing:.08em}
.logo i{color:var(--accent);font-style:normal}
.nav-right{justify-self:end;display:flex;align-items:center;gap:10px}
.theme-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--fg);font-size:16px;line-height:1;cursor:pointer;transition:transform .5s var(--ease),border-color .2s,color .2s}
.theme-btn:hover{border-color:var(--accent);color:var(--accent);transform:rotate(180deg)}
.theme-btn:active{transform:rotate(180deg) scale(.9)}
.topbar.scrolled .pill{box-shadow:0 12px 28px -16px rgba(40,20,10,.6)}

/* ---------- 桌面：膠囊導航 ---------- */
.topbar .pill{position:relative;display:flex;gap:2px;margin:0;padding:5px;list-style:none;border:1px solid var(--line);border-radius:999px;background:var(--card);box-shadow:0 8px 22px -18px rgba(40,20,10,.5);transition:box-shadow .3s}
.pill li{position:relative;z-index:1}
.pill a{display:block;padding:9px 24px;border-radius:999px;background:none;color:var(--mute);font-size:14px;letter-spacing:.06em;transition:color .3s}
.pill a:hover{color:var(--fg)}
.pill a.cur{color:var(--bg)}
.pill-ind{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:0;border-radius:999px;background:var(--fg);opacity:0;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
.burger,#navmask,#navdrawer,.tabbar{display:none}

/* ---------- 平板：漢堡 + 右側抽屜 ---------- */
@media (max-width:1023px){
  .topbar .nav{grid-template-columns:1fr auto;height:68px}
  .topbar .pill{display:none}
  .burger{display:grid;place-content:center;gap:6px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);cursor:pointer}
  .burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--fg);transition:transform .4s var(--ease)}
  .nav-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
  #navmask{display:block;position:fixed;inset:0;z-index:40;background:rgba(20,12,8,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .35s}
  .nav-open #navmask{opacity:1;pointer-events:auto}
  .nav-open{overflow:hidden}
  #navdrawer{display:flex;flex-direction:column;position:fixed;z-index:41;top:0;right:0;bottom:0;width:min(420px,88vw);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);border-radius:28px 0 0 28px;background:var(--card);box-shadow:-30px 0 70px -30px rgba(0,0,0,.6);transform:translateX(105%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
  .nav-open #navdrawer{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
  .nd-head{display:flex;justify-content:space-between;align-items:center;padding:20px 28px 0}
  .nd-brand{font:900 24px var(--serif);letter-spacing:.06em}
  .nd-brand i{color:var(--accent);font-style:normal}
  #navclose{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--mute);font-size:16px;cursor:pointer;transition:color .2s,background .2s}
  #navclose:hover{color:var(--accent);background:var(--glow)}
  .nd-list{flex:1;margin:18px 0 0;padding:0 28px;list-style:none;overflow:auto}
  .nd-list li{border-bottom:1px solid var(--line)}
  .nav-open .nd-list li{animation:slideIn .55s var(--ease) backwards;animation-delay:calc(.12s + var(--i,0) * 60ms)}
  .nd-list a{display:grid;grid-template-columns:44px 1fr;column-gap:6px;align-items:baseline;padding:20px 0}
  .nd-list b{grid-row:1 / 3;font:400 14px var(--serif);color:var(--mute);transition:color .2s}
  .nd-list span{font:900 32px/1.2 var(--serif);transition:transform .35s var(--ease),color .2s}
  .nd-list em{font-style:normal;font-size:13px;color:var(--mute)}
  .nd-list a:hover span{transform:translateX(8px);color:var(--accent)}
  .nd-list a.cur span,.nd-list a.cur b{color:var(--accent)}
  .nd-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 28px;border-top:1px solid var(--line)}
  .nd-foot small{color:var(--mute);font-size:13px;text-align:right}
}

/* ---------- 手機：精簡頂欄 + 底部標籤欄 ---------- */
@media (max-width:639px){
  .topbar .nav{height:60px}
  .burger,#navmask,#navdrawer{display:none}
  .logo{font-size:20px}
  .theme-btn{width:38px;height:38px}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:26;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 18px 40px -18px rgba(40,20,10,.6);transition:transform .45s var(--ease)}
  .tabbar.hide{transform:translateY(calc(100% + 24px))}
  .tabbar a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;border-radius:18px;color:var(--mute);font-size:11px;letter-spacing:.06em;transition:color .3s}
  .tabbar a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar .ic-kana{display:grid;place-items:center;width:22px;height:22px;font:900 19px/1 var(--serif);font-style:normal}
  .tabbar a.cur{color:var(--accent)}
  .tab-ind{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:18px;background:var(--glow);opacity:0;transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s}
  /* 回到頂部與目錄按鈕要躲開標籤欄 */
  #top{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  #toc-fab{bottom:calc(146px + env(safe-area-inset-bottom,0px))}
}