/* 馥靈之鑰 學苑共用外殼 v4 ｜ 桌機定格側邊欄 + 手機抽屜 + 單頁單功能 view 切換
設計語言：neo-brutalism / 多巴胺 2026（粗框 + 實心偏移硬陰影 + 高對比品牌色）
v4 調整（Ruby 6-07）：
· 側邊欄定格 position:fixed，不被上下捲動帶走
· 移除所有 emoji（改 CSS 小方塊與乾淨文字），避免視覺疲乏
· 掛上該學苑所有實際分頁（抽牌／各牌陣／延伸），側邊欄更豐富
· 放大、留白大方、眼睛舒服、手機觸控目標夠大
結構：.hl-academy > (nav.hl-asd#hlAsd + .hl-asd-main(.hl-asd-bar + 多個 .hl-vsec[data-view]))
側邊欄類別 ；子頁 放 .hl-asd-links；首頁 vsec 加 hl-on。
SEO：隱藏區塊仍在 DOM（display:none），爬蟲讀得到，h1/h2/h3 不動。 */
/* 變數放 :root 全域可見（footer 與注入區塊在 .hl-academy 外也要用 var(--asd-w)） */
:root{--asd-w:292px;--asd-ink:#3D3835;--asd-teal:#007B7F;--asd-pink:#FFCCCC;--asd-blue:#2E5EA6;--asd-bg:#F0EEE9;--asd-panel:#F6F4EE;--asd-top:52px}
/* view 切換 */
.hl-vsec{display:none}
.hl-vsec.hl-on{display:block;animation:hlvw .28s ease}
@keyframes hlvw{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 品牌區塊 — 粉色 chip + 粗體名 */
.hl-asd-brand{margin:0 22px 18px;padding-bottom:18px;border-bottom:2.5px dashed var(--asd-ink);font-size:1.2rem;font-weight:900;color:var(--asd-ink);letter-spacing:-.02em;line-height:1.3}
.hl-asd-brand small{display:block;width:max-content;max-width:100%;padding:5px 12px;background:var(--asd-pink);border:2px solid var(--asd-ink);box-shadow:3px 3px 0 var(--asd-teal);font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--asd-ink);margin-bottom:13px}
/* 類別項（切 view）— 乾淨文字無 emoji，選中才用粗框硬陰影跳出來 */
.hl-asd-cat{display:flex;flex-direction:column;gap:3px;margin:5px 14px;padding:13px 16px;border-radius:13px;border:2.5px solid transparent;color:var(--asd-ink);text-decoration:none;transition:transform .14s,box-shadow .14s,background .14s,border-color .14s}
.hl-asd-cat .t{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.hl-asd-cat .sub{font-size:.75rem;font-weight:600;color:#998f86;line-height:1.45}
.hl-asd-cat:hover{background:#fff;border-color:var(--asd-ink)}
.hl-asd-cat.on{background:#fff;border-color:var(--asd-ink);box-shadow:5px 5px 0 var(--asd-teal);transform:translate(-1px,-1px)}
.hl-asd-cat.on .sub{color:var(--asd-teal)}
/* 區段標籤 */
.hl-asd-grouplabel{margin:16px 24px 6px;font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--asd-teal);text-transform:uppercase}
/* 子頁連結（真實分頁）— 縮排、小方塊 bullet（非 emoji）、層級清楚 */
.hl-asd-links{display:flex;flex-direction:column;margin:2px 16px 8px;padding-left:14px;border-left:2.5px solid #e4dfd5}
.hl-asd-links a{position:relative;padding:10px 10px 10px 18px;font-size:.92rem;font-weight:700;color:#5C5651;text-decoration:none;border-radius:9px;line-height:1.35;transition:background .12s,color .12s}
.hl-asd-links a::before{content:"";position:absolute;left:1px;top:50%;width:7px;height:7px;margin-top:-4px;background:var(--asd-teal);border:1.5px solid var(--asd-ink);border-radius:2px}
.hl-asd-links a:hover{background:#fff;color:var(--asd-ink)}
/* 側欄最下方收束：前往其他學苑 — 與其他學苑互導·虛線分隔·膠囊連結（圓點 bullet 區別於子頁方塊） */
.hl-asd-more{margin:26px 16px 8px;padding-top:20px;border-top:2.5px dashed var(--asd-ink)}
.hl-asd-more .hl-asd-grouplabel{margin:0 8px 11px}
.hl-asd-morelist{display:flex;flex-direction:column;gap:9px}
.hl-asd-morelist a{display:flex;align-items:center;gap:10px;padding:12px 15px;background:#fff;border:2.5px solid var(--asd-ink);border-radius:12px;box-shadow:3px 3px 0 var(--asd-pink);color:var(--asd-ink);text-decoration:none;font-weight:800;font-size:.92rem;letter-spacing:-.01em;transition:transform .14s,box-shadow .14s}
.hl-asd-morelist a::before{content:"";flex:0 0 auto;width:9px;height:9px;background:var(--asd-teal);border:1.5px solid var(--asd-ink);border-radius:50%}
.hl-asd-morelist a:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--asd-teal)}
/* 桌機：側邊欄定格 fixed，主內容讓開左欄寬度 */
@media(min-width:1000px){
.hl-asd{position:fixed;left:0;top:var(--asd-top);bottom:0;width:var(--asd-w);overflow-y:auto;background:var(--asd-panel);border-right:3px solid var(--asd-ink);padding:26px 0 96px;z-index:30}
.hl-asd-main{margin-left:var(--asd-w)}
.hl-asd-bar,.hl-asd-burger,.hl-asd-scrim{display:none!important}
/* footer 與 hl-academy-related.js 注入的「延伸學苑」在 .hl-academy 外（body 層），
固定側邊欄會蓋住其左側 → 讓它們讓開側邊欄寬度，並在右側內容區置中 */
/* footer 與注入的「延伸學苑」可能在 .hl-asd-main（已右移）或 body 層·只有 body 層才需補側邊欄寬·避免雙重位移 */
body>.hl-footer{margin-left:var(--asd-w)}
body>#hl-acad-related-block{padding-left:var(--asd-w)}
/* 內容與上方 section 同基準對齊：max-width 1080·padding 20·置中 */
#hl-acad-related-block{box-sizing:border-box;max-width:none;width:auto;margin:36px 0 28px;padding-top:24px;padding-bottom:24px}
#hl-acad-related-block>*{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;box-sizing:border-box}
/* 分頁注入模式：側邊欄已 fixed·把頁面內容右移讓開·topnav 反向補回滿版（不搬移 DOM） */
body.hl-acad-page{padding-left:var(--asd-w)}
body.hl-acad-page #hl-top-nav{margin-left:calc(-1 * var(--asd-w));width:calc(100% + var(--asd-w));max-width:none}
/* 左下浮動意見鈕原本壓在側邊欄上·學苑頁移到側邊欄右側內容區免遮擋 */
.hl-has-asd .hl-fb-fab{left:calc(var(--asd-w) + 18px)!important}
}
/* 手機：頂部 ☰ 條 + 抽屜（觸控目標放大、好操作） */
@media(max-width:999px){
.hl-asd-bar{position:sticky;top:var(--asd-top);z-index:50;display:flex;align-items:center;gap:14px;background:var(--asd-ink);color:#F6F4EE;padding:12px 16px}
.hl-asd-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:46px;height:46px;background:var(--asd-pink);border:2.5px solid #F6F4EE;border-radius:12px;cursor:pointer;padding:11px;flex:0 0 auto}
.hl-asd-burger span{display:block;height:2.8px;width:100%;background:var(--asd-ink);border-radius:2px}
.hl-asd-cur{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.hl-asd{position:fixed;top:var(--asd-top);left:0;z-index:9990;width:88%;max-width:344px;height:calc(100% - var(--asd-top));overflow-y:auto;background:var(--asd-panel);border-right:3px solid var(--asd-ink);padding:20px 0 48px;transform:translateX(-105%);transition:transform .26s ease;box-shadow:10px 0 32px rgba(61,56,53,.3)}
.hl-asd.open{transform:none}
.hl-asd-cat{min-height:58px;justify-content:center}
.hl-asd-cat .t{font-size:1.1rem}
.hl-asd-links a{padding-top:12px;padding-bottom:12px;font-size:.98rem}
.hl-asd-scrim{position:fixed;inset:var(--asd-top) 0 0 0;z-index:9985;background:rgba(61,56,53,.5);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.hl-asd-scrim.show{opacity:1;visibility:visible}
body.hl-asd-lock{overflow:hidden}
}