/* 小日驚奇 App 外框 hb-shell v1.5（2026-09-28）
   v1.3：變數改名 --hbs-*（不會改到 App 內容的顏色字型）；手機抽屜圖層 1000；App 自己的黏頂列請用 top:var(--hbs-top)（66px）讓出上方列
   正本＝企業中控台（https://hibihatto-hq.web.app）實測數值；規格說明見 hibihatto-style skill 的 references/app-shell.md
   用法：<link rel="stylesheet" href="hb-shell.css"><script src="hb-shell.js"></script> → HBShell.mount({...})
   兩種版型：body.hb-th-6 圓點版（圓角、膠囊選單、橘色）／body.hb-th-8 方塊版（方角 3px、藍色、左邊直條）
   ⚠️ 所有 class 都以 hb- 開頭，不會跟各 App 自己的樣式撞名 */
:root{
  --hbs-bg:#ffffff; --hbs-side:#f5f6f7; --hbs-line:#eceff2; --hbs-card:#f5f6f7;
  --hbs-ink:#2b2f33; --hbs-ink2:#5d646b; --hbs-ink3:#9aa1a8;
  --hbs-o:#ee8b74; --hbs-b:#6db4d4; --hbs-y:#efbe4f; --hbs-g:#79c197;
  --hbs-o-bg:#fcebe6; --hbs-b-bg:#e6f2f8; --hbs-y-bg:#fcf3dc; --hbs-g-bg:#e6f4ec;
  --hbs-accent:var(--hbs-o);           /* 選中顏色：圓點版橘、方塊版藍 */
  --hbs-sidew:272px; --hbs-mini:78px; --hbs-top:66px;
  --hb-top:var(--hbs-top);              /* 舊名相容（v1.3 改名前的 App 還在用；2026-10-02 社群腳本申請補回） */
  --hbs-font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
body.hb-th-8{--hbs-accent:var(--hbs-b)}
body.hb-on{margin:0;background:var(--hbs-bg);color:var(--hbs-ink);font-family:var(--hbs-font);-webkit-font-smoothing:antialiased}
.hb-app{display:flex;min-height:100vh;align-items:stretch}
.hb-app *,.hb-app *::before,.hb-app *::after{box-sizing:border-box}

/* ---------- 側欄 ---------- */
.hb-app .hb-side{padding:0;overflow:visible;width:var(--hbs-sidew);flex:none;background:var(--hbs-side);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:1000;transition:width .2s ease;font-family:var(--hbs-font)}
.hb-app .hb-rs{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:2}
.hb-app .hb-rs:hover,.hb-app .hb-drag .hb-rs{background:rgba(109,180,212,.35)}
body.hb-drag{cursor:col-resize;user-select:none}
body.hb-drag .hb-app .hb-side{transition:none}
body.hb-drag iframe{pointer-events:none}   /* 拖拉經過內嵌頁面不會斷 */

/* LOGO 區：高 82px；LOGO 44px 寬＋公司名 17/700＋HIBIHATTO 12；整塊點了回首頁；≡ 30×30 固定右上 */
.hb-app .hb-brand{position:relative;display:flex;align-items:center;min-height:82px;padding:20px 60px 16px 22px}
.hb-app .hb-brandlink{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.hb-app .hb-mk{flex:none;width:44px;display:grid;place-items:center}.hb-app .hb-mk img{width:44px;height:auto;display:block}
.hb-app .hb-bn{min-width:0}
.hb-app .hb-bn b{display:block;font-size:17px;font-weight:700;letter-spacing:1px;line-height:1.6;color:var(--hbs-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-app .hb-bn small{display:block;font-size:12px;letter-spacing:1.2px;line-height:1.6;color:var(--hbs-ink3);white-space:nowrap}
.hb-app .hb-tg{position:absolute;right:22px;top:28px;width:30px;height:30px;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--hbs-ink3);cursor:pointer;display:grid;place-items:center}
.hb-app .hb-tg:hover{background:#fff;color:var(--hbs-ink)}

/* 系統名稱白卡：寬＝側欄－28、高 48、白底、圓角 12、15px 次要色 */
.hb-app .hb-org{margin:6px 14px 12px;padding:11px 14px;border-radius:12px;background:#fff;display:flex;align-items:center;gap:8px;font-size:15px;line-height:24px;color:var(--hbs-ink2);white-space:nowrap;overflow:hidden}
.hb-app .hb-org span{overflow:hidden;text-overflow:ellipsis}

/* 選單：分組標題 13px 灰、字距 2px、可點收合（▾）；項目高 46、16px、圖示 18、間距 12 */
.hb-app .hb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 12px 12px}
.hb-app .hb-grp-h{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:14px 8px 6px 14px;font:inherit;font-size:13px;letter-spacing:2px;line-height:1.6;color:var(--hbs-ink3);cursor:pointer;text-align:left}
.hb-app .hb-grp-h:hover{color:var(--hbs-ink)}
.hb-app .hb-grp-h i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 0 0 4px;transition:transform .15s}
.hb-app .hb-grp.closed .hb-grp-h i{transform:rotate(-45deg);margin-top:0}
.hb-app .hb-grp.closed .hb-grp-b{display:none}
.hb-app .hb-nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 14px;margin:2px 0;border-radius:12px;font-size:16px;line-height:1.6;color:var(--hbs-ink2);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.hb-app .hb-nav a svg,.hb-app .hb-nav a img{flex:none;width:18px;height:18px}
.hb-app .hb-nav a .hb-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hb-app .hb-nav a .hb-no{flex:none;font-size:12.5px;color:var(--hbs-ink3)}
.hb-app .hb-nav a:hover{background:rgba(255,255,255,.7);color:var(--hbs-ink)}
.hb-app .hb-nav a.on{background:#fff;color:var(--hbs-ink);font-weight:600;box-shadow:0 1px 3px rgba(30,40,50,.06)}
.hb-app .hb-nav a.on svg{color:var(--hbs-accent)}
body.hb-th-6 .hb-app .hb-nav a.on::before{content:'';position:absolute;left:-4px;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);background:var(--hbs-o)}
body.hb-th-8 .hb-app .hb-nav a.on::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;height:auto;border-radius:0;transform:none;background:var(--hbs-b)}
/* 側欄窄（<250）：部門編號、副標自動隱藏 */
body.hb-narrow .hb-app .hb-nav a .hb-no,body.hb-narrow .hb-app .hb-bn small{display:none}

/* 側欄底：高 80、內距 12/20；左版本 13px 灰、右登出；第二列版型切換 圓／方 24px */
.hb-app .hb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 8px;min-height:56px;padding:12px 20px;border-top:1px solid #e8ebee;font-size:13px;color:var(--hbs-ink3)}
.hb-app .hb-foot button{border:0;background:none;font:inherit;color:var(--hbs-ink3);cursor:pointer;padding:0}.hb-app .hb-foot button:hover{color:var(--hbs-ink)}
.hb-app .hb-thbar{order:3;width:100%;display:flex;gap:8px}
.hb-app .hb-thbar button{width:24px;height:24px;border-radius:50%;border:1px solid var(--hbs-line);background:#fff;font-size:11.5px;color:var(--hbs-ink2)}
.hb-app .hb-thbar button.on{background:var(--hbs-ink);border-color:var(--hbs-ink);color:#fff}

/* ---------- 收合（≥861px）：寬 78，只留 LOGO；滑到 LOGO 上換成 ≡（40×40 白底），點了展開；0.2 秒滑動 ---------- */
@media (min-width:861px){
  body.hb-mini .hb-app .hb-side{width:var(--hbs-mini)}
  body.hb-mini .hb-app .hb-brand{justify-content:center;padding:18px 0 14px;min-height:62px}
  body.hb-mini .hb-app .hb-bn{display:none}
  body.hb-mini .hb-app .hb-tg{display:none;left:50%;right:auto;top:18px;transform:translateX(-50%);width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--hbs-line)}
  body.hb-mini .hb-app .hb-brand:hover .hb-brandlink,body.hb-mini .hb-app .hb-brand:focus-within .hb-brandlink{visibility:hidden}
  body.hb-mini .hb-app .hb-brand:hover .hb-tg,body.hb-mini .hb-app .hb-brand:focus-within .hb-tg{display:grid}
  body.hb-mini .hb-app .hb-org,body.hb-mini .hb-app .hb-foot,body.hb-mini .hb-app .hb-rs{display:none}
  body.hb-mini .hb-app .hb-nav{padding:0 10px}
  body.hb-mini .hb-app .hb-grp-h{font-size:0;padding:0;height:13px;margin-top:6px;border-top:1px solid var(--hbs-line);pointer-events:none}
  body.hb-mini .hb-app .hb-grp-h i{display:none}
  body.hb-mini .hb-app .hb-grp.closed .hb-grp-b{display:block}
  body.hb-mini .hb-app .hb-nav a{justify-content:center;padding:11px 0;gap:0;min-height:40px}
  body.hb-mini .hb-app .hb-nav a .hb-l,body.hb-mini .hb-app .hb-nav a .hb-no{display:none}
  body.hb-mini.hb-th-6 .hb-app .hb-nav a.on::before{left:2px}
}

/* ---------- 主區與上方列：高 66；三欄＝麵包屑｜金句（正中間）｜搜尋＋我的 ---------- */
.hb-app .hb-main{flex:1;min-width:0;display:flex;flex-direction:column}
.hb-app .hb-top{height:auto;position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.6fr) auto;gap:18px;align-items:center;min-height:var(--hbs-top);padding:8px 20px 8px 32px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hbs-line);font-family:var(--hbs-font)}
body.hb-th-8 .hb-app .hb-top{background:rgba(253,251,248,.9)}
.hb-app .hb-tl{display:flex;align-items:center;gap:10px;min-width:0}
.hb-app .hb-menu{display:none;width:40px;height:40px;border:0;background:none;color:var(--hbs-ink2);cursor:pointer;place-items:center;border-radius:10px}
.hb-app .hb-crumb{font-size:15.5px;color:var(--hbs-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-app .hb-crumb a{color:var(--hbs-ink3);text-decoration:none}.hb-app .hb-crumb a:hover{color:var(--hbs-ink)}
.hb-app .hb-quote{text-align:center;min-width:0}
.hb-app .hb-quote b{display:block;font-size:14.5px;font-weight:500;letter-spacing:.5px;color:var(--hbs-ink);line-height:1.45}
.hb-app .hb-quote small{display:block;font-size:12.5px;letter-spacing:.5px;color:var(--hbs-ink2);line-height:1.5}
.hb-app .hb-tr{display:flex;align-items:center;gap:16px;justify-self:end}
.hb-app .hb-sbtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--hbs-line);background:#fff;color:var(--hbs-ink2);display:grid;place-items:center;cursor:pointer}
.hb-app .hb-me{display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer}
.hb-app .hb-av{width:38px;height:38px;border-radius:50%;background:var(--hbs-b-bg);color:#3f93b8;display:grid;place-items:center;font-size:15px;font-weight:700}
.hb-app .hb-nm{font-size:15.5px;font-weight:700;line-height:1.3;color:var(--hbs-ink)}.hb-app .hb-nm small{display:block;font-size:13px;font-weight:400;color:var(--hbs-ink2)}
.hb-app .hb-page{flex:1;width:100%;max-width:1360px;padding:40px 44px 80px}
@media (max-width:1100px){.hb-app .hb-quote{visibility:hidden}}
/* 沒有金句的 App：上方列改兩欄（麵包屑｜右側），麵包屑不會被擠 */
body.hb-noquote .hb-app .hb-top{grid-template-columns:minmax(0,1fr) auto}body.hb-noquote .hb-app .hb-quote{display:none}
/* fill:true＝主區填滿（放整頁 iframe 的 App），內距 0、不限寬 */
body.hb-fill .hb-app .hb-page{max-width:none;padding:0;display:flex;flex-direction:column}body.hb-fill .hb-app .hb-page>iframe{flex:1;width:100%;border:0;min-height:calc(100vh - var(--hbs-top))}

/* v1.5：圓點版與方塊版都是圓角；差別在選中標示（小圓點／左直條）、選中色（橘／藍）、選單圖示（圓形／圓角方塊） */


/* ---------- 手機 ≤860px：側欄變抽屜（寬 272，從左滑出 0.2 秒），上方列左邊出現 ≡ ---------- */
.hb-app .hb-scrim{display:none}
@media (max-width:860px){
  .hb-app .hb-side{display:flex;position:fixed;left:0;top:0;width:272px!important;transform:translateX(-100%);transition:transform .2s ease;box-shadow:none}
  .hb-app .hb-side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.15)}
  .hb-app .hb-rs,.hb-app .hb-tg{display:none}
  .hb-app .hb-scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:999}
  .hb-app .hb-menu{display:grid}
  .hb-app .hb-top{grid-template-columns:1fr auto;padding:8px 14px}
  .hb-app .hb-quote{display:none}
  .hb-app .hb-nm{display:none}
  .hb-app .hb-page{padding:24px 16px 60px}
}

/* v1.2 第二層選單（children）：父項選中或展開時顯示在下方，14.5px、左縮排 44px、高 36；停用項目（disabled）淡色、不可點 */
.hb-app .hb-nav .hb-sub{display:none;margin:0 0 4px}
.hb-app .hb-nav .hb-par.open+.hb-sub,.hb-app .hb-nav .hb-par.on+.hb-sub{display:block}
.hb-app .hb-nav .hb-sub a{min-height:36px;padding:6px 14px 6px 44px;font-size:14.5px;margin:0}
.hb-app .hb-nav .hb-sub a.on{box-shadow:none;background:rgba(255,255,255,.7)}
.hb-app .hb-nav .hb-sub a.on::before{display:none}
.hb-app .hb-nav a.hb-dis{opacity:.5;cursor:default}.hb-app .hb-nav a.hb-dis:hover{background:none;color:var(--hbs-ink2)}
@media (min-width:861px){body.hb-mini .hb-app .hb-nav .hb-sub{display:none!important}}

/* 讓錨點跳轉時留出上方列高度 */
html:has(body.hb-on){scroll-padding-top:calc(var(--hbs-top) + 8px)}

/* v1.4 右上：版本鈕（圓點＋方塊）＋頭像按鈕；點開的選單 */
.hb-app .hb-ver{color:var(--hbs-ink2)}
.hb-pop{position:fixed;z-index:2000;width:320px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--hbs-line);border-radius:16px;box-shadow:0 12px 36px rgba(30,40,50,.14);padding:14px;font-family:var(--hbs-font);color:var(--hbs-ink)}

.hb-ph{display:flex;gap:10px;align-items:center;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--hbs-line)}.hb-ph b{display:block;font-size:16px}.hb-ph small{display:block;font-size:12.5px;color:var(--hbs-ink3)}
.hb-pop .hb-av{width:38px;height:38px;border-radius:50%;background:var(--hbs-b-bg);color:#3f93b8;display:grid;place-items:center;font-weight:700;flex:none}
.hb-upd{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;max-height:280px;overflow:auto}.hb-upd li{display:grid;grid-template-columns:auto 1fr;gap:0 8px;font-size:13.5px;line-height:1.5;padding:8px 10px;border-radius:10px;background:var(--hbs-card)}.hb-upd li.on{background:var(--hbs-y-bg)}.hb-upd small{color:var(--hbs-ink3)}.hb-upd span{grid-column:1/-1;color:var(--hbs-ink2)}
.hb-pth{display:flex;align-items:center;gap:6px;margin:0 0 10px}.hb-pth small{color:var(--hbs-ink3);font-size:12.5px;margin-right:4px}.hb-pth button{border:1px solid var(--hbs-line);background:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:13.5px;cursor:pointer;color:var(--hbs-ink2)}.hb-pth button.on{background:var(--hbs-ink);border-color:var(--hbs-ink);color:#fff}

.hb-plinks{display:grid;margin:0 0 8px}.hb-plinks a{display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:10px;color:var(--hbs-ink);text-decoration:none;font-size:15px}.hb-plinks a:hover{background:var(--hbs-card)}
.hb-pbtn{width:100%;border:1px solid var(--hbs-line);background:#fff;border-radius:10px;padding:8px;font:inherit;font-size:14px;cursor:pointer;color:var(--hbs-ink2)}.hb-pbtn:hover{background:var(--hbs-card)}

/* v1.5 頭像旁名字＋身分；選單圖示上色；照片 */
.hb-app .hb-me{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:999px}.hb-app .hb-me:hover{background:var(--hbs-card)}
.hb-app .hb-me .hb-mn{display:flex;flex-direction:column;line-height:1.3;text-align:left}.hb-app .hb-me .hb-mn b{font-size:15px;color:var(--hbs-ink)}.hb-app .hb-me .hb-mn small{font-size:12.5px;color:var(--hbs-ink3)}
.hb-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.hb-app .hb-av{overflow:hidden}
.hb-plinks a .hb-mi{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
body.hb-th-8 .hb-plinks a .hb-mi{border-radius:9px}
.hb-mi.c0{background:#fcebe6;color:#c25a44}.hb-mi.c1{background:#e6f2f8;color:#3f93b8}.hb-mi.c2{background:#fcf3dc;color:#b8871d}.hb-mi.c3{background:#e6f4ec;color:#2e7d4f}
.hb-pver{display:flex;align-items:center;gap:6px;margin-top:8px;padding:10px 6px 2px;border-top:1px solid var(--hbs-line);font-size:13px;color:var(--hbs-ink3);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;font-family:inherit}.hb-pver:hover{color:var(--hbs-ink)}
@media (max-width:860px){.hb-app .hb-me .hb-mn{display:none}}

/* v1.8（2026-10-04）中文斷行與名稱不拆字（Skill hibihatto-textwrap）
   預設（不影響版面）：標題平均斷行、段落避免孤字。
   選用：在 .hb-app 加上 class「hb-tw」→ 表格標題、按鈕、標籤、側欄項目一律一行；表格外層放不下就左右捲。 */
.hb-app h1,.hb-app h2,.hb-app h3{text-wrap:balance}.hb-app p,.hb-app li,.hb-app td{text-wrap:pretty;line-break:strict}
.hb-app.hb-tw th,.hb-app.hb-tw button,.hb-app.hb-tw .btn,.hb-app.hb-tw .nw,.hb-app.hb-tw .tag,.hb-app.hb-tw .pill,.hb-app.hb-tw .chip,.hb-app.hb-tw nav a{white-space:nowrap}
.hb-app.hb-tw .tbl,.hb-app.hb-tw .tblwrap{overflow-x:auto}
.hb-app .hb-nw{white-space:nowrap}

/* v2.0 版型兩張小預覽卡（HQ-314） */
.hb-pth2{display:block}.hb-pth2>small{display:block;margin:0 0 6px}.hb-pthg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hb-pth2 button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border-radius:12px;padding:8px;text-align:left}.hb-pth2 button svg{width:100%;height:auto;display:block;margin-bottom:2px}.hb-pth2 button b{font-size:13.5px;color:var(--hbs-ink)}.hb-pth2 button i{font-style:normal;font-size:12px;color:var(--hbs-ink3)}.hb-pth2 button.on{background:#fff;color:var(--hbs-ink);border:2px solid var(--hbs-ink)}.hb-pth2 button.on i{color:#2e7d55;font-weight:700}.hb-pth2.hb-flash{animation:hbflash 1.2s}@keyframes hbflash{0%,60%{background:#fff7d6}100%{background:transparent}}