/* 共用外框樣式（頁首頁籤、測試層提示、頁尾連結列）。
   標記由 scripts/apply-shell.mjs 灌進各頁；顏色全部沿用各頁已有的 :root 變數（含深色），
   類別一律 sx- 開頭，避免和各頁頁內樣式互相覆蓋。 */

.sx-head{position:relative;z-index:2}
.sx-in{max-width:760px;margin:0 auto;padding-inline:16px}
.sx-logo{display:inline-block;font-family:var(--hand);font-weight:700;font-size:26px;letter-spacing:.04em;color:var(--green);text-decoration:none;padding-block:12px 4px}

/* 頁籤列：資料夾書籤式，目前頁籤變亮並和下方頁面相連 */
.sx-tabwrap{position:relative}
.sx-tabwrap.sx-more::after{content:"";position:absolute;right:0;top:0;bottom:2px;width:28px;background:linear-gradient(to right,transparent,var(--paper));pointer-events:none}
.sx-tabs{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;scrollbar-width:none;padding-top:4px;border-bottom:2px solid var(--ink)}
.sx-tabs::-webkit-scrollbar{display:none}
.sx-tab{flex:0 0 auto;position:relative;top:2px;margin-bottom:0;font-family:var(--hand);font-weight:700;font-size:15px;line-height:1.6;white-space:nowrap;
  color:var(--muted);text-decoration:none;background:var(--paper2);border:2px solid rgba(106,86,56,.35);border-bottom:0;border-radius:10px 10px 0 0;padding:6px 16px 6px}
.sx-tab:hover{color:var(--ink);top:0;padding-bottom:8px}
.sx-tab[aria-current="page"]{top:2px;background:var(--card);color:var(--ink);border-color:var(--ink);padding-top:9px;padding-bottom:8px;box-shadow:0 2px 0 var(--card)}
.sx-tab:focus-visible,.sx-sub a:focus-visible,.sx-links a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sx-arrow{font-size:11px;opacity:.7;margin-left:3px}

/* 測試層（只出現在 /test/*）：橘色提示列＋第二列「招募｜教學」 */
.sx-testnote{font-size:12px;text-align:center;color:var(--stamp);background:var(--paper2);border-bottom:1px dashed var(--stamp);border-top:6px solid var(--orange);padding:5px 16px}
.sx-sub{background:var(--card);border-bottom:1px dashed rgba(106,86,56,.4);font-size:13px}
.sx-sub .sx-in{display:flex;gap:8px;align-items:center;padding-block:8px}
.sx-sub span{color:var(--muted)}
.sx-sub a{font-family:var(--hand);font-weight:700;color:var(--ink);padding:3px 12px;border-radius:99px;border:1.5px solid rgba(106,86,56,.4);text-decoration:none}
.sx-sub a[aria-current="page"]{background:var(--stamp);color:var(--card);border-color:var(--stamp)}

/* 頁尾連結列：放在各頁自己的 <footer> 最上面，各頁原本的「草稿」「© 送你啦」等文字維持不動 */
.sx-links{margin-bottom:4px}
.sx-links a{color:var(--muted)}

@media (max-width:480px){
  .sx-logo{font-size:24px}
  .sx-tab{padding-inline:13px}
}