/* 搜尋改成頂列語言選擇右邊的「搜尋」按鈕，按了才在頂列下方彈出搜尋欄（使用者 2026-10-24：搜索欄好礙眼）。
   搜尋本身（打字、結果、「/」）仍由 app.js 處理；開關在 search-pop.js。標示列只剩右側小字，所以壓回原本的高度。 */
:root{--strip-h:26px}
.stg-strip{position:relative}
.stg-sbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 11px;border:1px solid #E7A39E;border-radius:999px;background:var(--paper);
  color:#CC3A32;font:600 13px/1 var(--font-latin),var(--font-cjk),sans-serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.stg-sbtn span{font-size:18px;font-weight:700;line-height:1;transform:translateY(-1px)}
/* 紅字點綴（使用者 2026-10-24：搜索的字變成紅色，點綴又醒目）；比 T 字母的 #D9433B 略深，小字對比才到 4.98:1（GPT 審查 P1） */
.stg-sbtn:hover,.stg-sbtn[aria-expanded="true"]{border-color:#CC3A32}   /* 點了底色不變（使用者 2026-10-24），只把外框加深 */
.stg-sbtn:focus-visible{outline:2px solid #CC3A32;outline-offset:2px}
.stg-spop{position:fixed;z-index:95;top:calc(var(--top-h) + 8px);right:var(--side);width:min(560px,calc(100vw - 2 * var(--side)));
  padding:10px;background:rgba(255,255,255,.97);border:1px solid var(--g-mid);border-radius:14px;box-shadow:0 18px 44px rgba(32,48,42,.18);
  animation:spIn .22s var(--ease) both}
.stg-spop[hidden]{display:none}
.stg-spop .search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border:1.5px solid var(--g);border-radius:999px;background:#fff}
.stg-spop .search > span[aria-hidden]{font-size:20px;font-weight:700;color:var(--g)}
.stg-spop .search input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 15px var(--font-latin),var(--font-cjk),sans-serif;color:var(--ink)}
.stg-spop .search input::placeholder{color:var(--ink-2)}
.stg-spop .search .kbd{font:500 11px var(--font-mono);padding:1px 6px;border:1px solid var(--g);border-radius:4px;color:var(--g-dk)}
.stg-spop .search:focus-within{box-shadow:0 0 0 4px var(--sage-lt)}
.stg-spop .sres{top:calc(100% + 10px);left:-10px;right:-10px;z-index:96}
@keyframes spIn{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:767px){
  :root{--strip-h:0px}
  .stg .stg-strip{display:none}
  .stg-sbtn{height:30px;padding:0 10px;font-size:12px}
  .stg-spop{top:calc(52px + 4px);right:12px;width:calc(100vw - 24px)}
}

/* ---------- GPT 審查（2026-10-24）：手機語言選單、觸控面積、頁籤可橫滑提示 ---------- */
/* 手機只顯示目前語言：點它展開語言清單（search-pop.js 產生 .stg-lmenu） */
.stg-lmenu{position:fixed;z-index:96;top:calc(52px + 4px);right:12px;min-width:170px;padding:6px;background:#fff;border:1px solid var(--g-mid);border-radius:12px;
  box-shadow:0 18px 44px rgba(32,48,42,.18);animation:spIn .2s var(--ease) both}
.stg-lmenu[hidden]{display:none}
.stg-lmenu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-radius:8px;text-decoration:none;color:var(--ink);font:500 15px var(--font-latin),var(--font-cjk),sans-serif}
.stg-lmenu a small{font:500 11px var(--font-mono);color:var(--ink-3)}
.stg-lmenu a:hover,.stg-lmenu a:focus-visible{background:var(--sage-vlt)}
.stg-lmenu a[aria-current="true"]{color:var(--g-dk);font-weight:700}
@media (max-width:767px){
  .stg-lang a[aria-current="true"][aria-expanded]::after{content:" ▾";font-size:10px}
}
/* 觸控：外觀不變，用透明延伸把可點範圍放大到至少 44×44 */
@media (max-width:767px),(pointer:coarse){
  .stg-lang a[aria-current="true"],.stg-sbtn,.stg-hud [data-motion],.stg-hud a{position:relative}
  .stg-hud{z-index:6}                     /* 延伸的觸控區不被頁尾蓋住 */
  .stg-lang a[aria-current="true"]::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .stg-sbtn::after,.stg-hud [data-motion]::after,.stg-hud a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
/* 頁籤放不下時可橫滑：邊緣淡出，提示還有內容 */
.stg-tabs.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.stg-tabs.fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 48px),transparent)}
.stg-tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
