/* col-shell.css —— 只管版面骨架，不帶色票（2026-09-26 Roy：「從來沒有要求綁色票」）。
   黑板那套在 col-theme-chalk.css，要就載、不要就不載；molds/README 的限制 #1 因此解除。
 —— 手機柱模型的共用骨架（當代中文系列三站＋華語城堡；上游在 ZPD/Layout/，各站放副本，check.js 驗分岔）
   v1.0（2026-09-19，路線 A）：從三站 v2.00.00 的 index.html 抽出來的相同段落——之後由 bake-col.js 從 col.spec 烘出（路線 B），站的掛載不變。
   規則（SpecBoard 四鐵律換算子）：柱寬是唯一輸入（字級 cqw、幾何 375 基準×U）、所有狀態住 #col、一柱一個伸縮件（#play flex:1）、auditLayout 實磅 0 違規。
   帶：#status → #nav → #board → #play → #dock → #hint；桌機（body.wide）：#left｜#col｜#right，節點由 col-shell.js 搬家。
   站專屬（題目區高度、拇指區欄數、drill／盤面樣式）寫在各站 index.html，不寫這裡。
   v2.0.1（2026-10-12，三站施工單 P2-2）：小字加地板——狀態帶、提示、選單標籤、結算副標、錯在哪裡、封面小字 max(14px,…)；回饋句 .note max(16px,…)（學生作答後唯一的文字回應）。2K 原值本來就大，不受影響。
   v1.1.1：可按件加 max(44px,…)／max(20px,…) 地板——cqw 量的是柱的內容盒，gutter 變寬時 12.5cqw 會掉到 44 以下。
   v1.1（2026-09-22，升為題答型公版）：模子參數走 CSS 變數——--vf（觀景窗占比）、--gutter（柱左右留白）、--keyh（鍵高）、
   --keycols（鍵欄數）、--gap（帶距／鍵距）；由 col-shell.js 從 CONFIG.col 寫入 :root。規格圖：ZPD/Layout/molds/qa-phone.spec.txt。 */
:root{
  --vf:.36; --gutter:10px; --keyh:64px; --keycols:4; --gap:8px; --ts:1;   /* 版面 token（唯一屬於殼的東西）；站在 CONFIG.col 覆寫 */
  /* 以下是「名字」與中性預設值，不是設計。主題請另外載入一份（例如 col-theme-chalk.css）或在站自己的 <style> 覆寫。
     留中性預設的理由：沒載主題的站也要能看，不能整片透明或看不到字。 */
  --ink:#f7f7f8; --panel:#ffffff; --panel-2:#f0f1f3;
  --rule:rgba(0,0,0,.14);
  --chalk:#1c1f23; --dim:#6b7280;
  --beam:#2f6fd0; --beam-soft:rgba(47,111,208,.14);
  --ok:#1f8a4c; --err:#c23b3b;
  --pip:rgba(0,0,0,.14); --on-beam:#ffffff; --ok-soft:rgba(31,138,76,.10);
  --veil:rgba(255,255,255,.94); --cover-bg:var(--ink);
  --num:ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
  --han:'Songti TC','Noto Serif CJK TC',PMingLiU,Georgia,serif;
  --hei:'Noto Sans TC','Source Han Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --ui:'PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --title:var(--han);

}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  background:var(--ink);                 /* 背景材質屬於主題，不屬於骨架 */
  color:var(--chalk);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
}
button,select{ font:inherit;color:inherit;touch-action:manipulation;-webkit-touch-callout:none;user-select:none; }
button:focus-visible{ outline:2px solid var(--beam);outline-offset:2px; }

/* ═══ 骨架：手機＝單柱；≥ wideMin ＝ 左欄｜柱｜右欄 ═══ */
#app{ position:fixed;inset:0;display:grid;grid-template-columns:1fr;justify-items:center;height:100%; }
#left,#right{ display:none; }
#col{ position:relative;width:100%;max-width:var(--colmax,560px);height:100%;container-type:inline-size;
  display:flex;flex-direction:column;padding:max(8px,env(safe-area-inset-top)) var(--gutter) max(10px,env(safe-area-inset-bottom));overflow:hidden; }
/* v2.0（2026-10-12，肚皮型，molds/qa-belly-desktop）：桌機不再是一根柱——左銀邊｜中央肚皮（吃剩下的寬）｜右銀邊。
   柱內字級仍寫 cqw，但肚皮比柱寬很多：col-shell.js 算「等效柱寬」Weq＝min(肚皮寬, (視窗高−28)×ratio×wideBoost)，
   把 --ts 乘上 Weq／肚皮寬（--tsw，柱的子孫吃這個），並給 --u＝Weq 的 1%，殼的幾何在桌機改用 --u。手機（窄）一行不變。 */
#col > *{ --ts:var(--tsw,1); }
body.wide #app{ grid-template-columns:var(--rail) minmax(0,1fr) var(--rail);gap:24px;padding:16px 24px;align-items:stretch;justify-items:stretch;
  --rail:clamp(240px,19vw,480px); }
body.wide #left,body.wide #right{ display:flex;flex-direction:column;gap:16px;width:100%;min-width:0;padding:24px;
  background:rgba(0,0,0,.12);border:1px solid var(--rule);border-radius:14px;overflow:auto; }
body.wide #col{ max-width:none;width:100%;padding:calc(2*var(--u)) calc(3*var(--u)) calc(2*var(--u));border:1px solid var(--rule);border-radius:14px;background:rgba(0,0,0,.12); }
body.wide #status{ min-height:calc(8*var(--u));gap:calc(2*var(--u)); }
/* 🎵 音效開關：三站同一個位置＝狀態帶最右（設定類，一局按 0～1 次，離開作答動線；三站施工單 P2-1） */
#status #muteBtn{ order:99;flex:0 0 auto;margin-left:auto;min-width:44px;min-height:44px;width:11cqw;height:11cqw;padding:0;border:1px solid var(--rule);border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--chalk);font-size:max(18px,calc(4.4cqw*var(--ts)));line-height:1;cursor:pointer; }
#status:has(> #hud,> #stats) #muteBtn{ margin-left:0; }   /* order:99＝永遠最後（#stats 會被殼搬回狀態帶尾端）；前面已有靠右的 #hud／#stats 就緊貼它，不平分空白 */
#status #muteBtn:active{ transform:scale(.92); }
body:not(.wide):has(#dp-handle) #status{ padding-right:52px; }   /* 手機：⚙ 把手固定在右上（見檔尾 #dp-handle），狀態帶右端讓出來，🎵 才不會被蓋住 */
body.wide #status #muteBtn{ width:calc(8*var(--u));height:calc(8*var(--u));font-size:calc(3.6*var(--u)); }
body.wide .boardTop{ min-height:calc(7*var(--u));gap:calc(2*var(--u)); }
body.wide #col #pips,body.wide #col .pips{ gap:var(--u); }
body.wide #col .pip{ width:calc(3*var(--u));height:calc(1.2*var(--u));border-radius:var(--u); }   /* 進度點照等效柱寬，不跟肚皮拉長（拉長會像按鈕）
body.wide #board{ padding-top:var(--u); }
body.wide #play{ padding-top:calc(2*var(--u)); }
body.wide #dock{ gap:calc(2*var(--u));padding-top:calc(2*var(--u)); }
body.wide .chips{ gap:calc(2.4*var(--u)); }
body.wide .chips button{ min-height:calc(14*var(--u));padding:calc(2*var(--u));border-radius:calc(2*var(--u)); }
body.wide .mini{ gap:calc(2*var(--u));padding-top:calc(2*var(--u)); }
body.wide .mini button{ min-height:max(44px,calc(12.5*var(--u)));border-radius:calc(2*var(--u)); }
body.wide #col .mini{ max-width:calc(60*var(--u));width:100%;align-self:center; }   /* 看答案：肚皮中央，不拉滿 1500px */
body.wide .note{ margin-top:calc(1.5*var(--u));min-height:calc(5*var(--u)); }
body.wide #card{ padding:calc(4*var(--u)); }
body.wide .sheet{ max-width:calc(100*var(--u));border-radius:calc(3*var(--u));padding:calc(5*var(--u)); }
body.wide #cardGo,body.wide #cardNext{ min-height:max(44px,calc(13*var(--u)));border-radius:calc(2*var(--u)); }   /* 桌機柱寬 13cqw 會到 188px，兩顆鈕撐破結算卡（P2-4） */
body.wide #cardNext:not([hidden]) + #cardGo{ margin-top:calc(2.4*var(--u)); }

/* ═══ 帶（字級全 cqw：1cqw＝柱寬 1%；375 寬時 1cqw≈3.6px） ═══ */
#status{ flex:0 0 auto;display:flex;align-items:center;gap:2.5cqw;min-height:11cqw;font-size:max(14px,calc(3.2cqw*var(--ts)));color:var(--dim);overflow:hidden; }
.brand{ font-family:var(--han);font-size:calc(4.2cqw*var(--ts));letter-spacing:.04em;color:var(--beam);white-space:nowrap; }
#stats,#hud{ display:flex;align-items:center;gap:2cqw;margin-left:auto;min-width:0;font-family:var(--num);white-space:nowrap; }
#pips,.pips{ display:flex;gap:1cqw; }
.pip{ width:3cqw;height:1.2cqw;border-radius:1cqw;background:var(--pip); }
.pip.done{ background:var(--ok); } .pip.now{ background:var(--beam); }
#status #pips{ min-width:0;flex:0 1 auto;flex-wrap:wrap;gap:.8cqw;align-content:center; } #status .pip{ flex:0 0 auto;width:2cqw; }   /* 狀態帶擠的時候進度點換行排兩列，不鑽到 🎵 底下（P2-1） */

#nav{ flex:0 0 auto;display:flex;flex-direction:column;gap:1.6cqw;margin-top:1.6cqw; }
#nav label{ display:flex;align-items:center;gap:2cqw;font-size:max(14px,calc(3.6cqw*var(--ts)));color:var(--dim);min-width:0; }
#nav label > span{ display:none; }
select{ width:100%;min-height:max(44px,12.5cqw);font-size:max(20px,calc(6cqw*var(--ts)));color:var(--chalk);background:var(--panel-2);
  border:1px solid var(--rule);border-radius:2cqw;padding:0 3cqw; }
.gone{ display:none !important; }
.tabs,.seg{ display:flex;background:var(--panel-2);border:1px solid var(--rule);border-radius:2cqw;overflow:hidden; }
.tabs button,.seg button{ flex:1;font-size:max(20px,calc(6cqw*var(--ts)));color:var(--dim);background:none;border:0;min-height:max(44px,12.5cqw);padding:0 3cqw;cursor:pointer;white-space:nowrap; }
.tabs button[aria-selected="true"],.seg button.on{ background:var(--panel);color:var(--chalk);box-shadow:inset 0 -2px 0 var(--beam); }
.seg button.on,.seg button[aria-selected="true"]{ background:var(--beam);color:var(--on-beam);box-shadow:none; }   /* 模式切換三站同一種控件（P2-3）：drill-shell 的分頁用 aria-selected */
.seg button:disabled{ opacity:.35;cursor:default; }
.tog{ font-size:max(20px,calc(6cqw*var(--ts)));color:var(--dim);background:var(--panel-2);border:1px solid var(--rule);border-radius:2cqw;min-height:max(44px,12.5cqw);padding:0 3cqw;cursor:pointer;white-space:nowrap; }
.tog.on{ color:var(--ok);border-color:var(--ok); }
.tog[hidden]{ display:none; }

#board{ flex:0 0 calc(var(--vf) * 100%);position:relative;display:flex;flex-direction:column;min-height:0;padding-top:1cqw; }   /* 觀景窗高度＝模子 --vf（站 CONFIG.col.board 覆寫） */
.boardTop{ display:flex;align-items:center;gap:2cqw;min-height:8cqw; }
#play{ flex:1 1 auto;position:relative;min-height:0;display:flex;flex-direction:column;padding-top:2cqw; }   /* 一柱唯一的伸縮件 */
#dock{ flex:0 0 auto;display:flex;align-items:center;gap:2cqw;padding-top:2cqw; }
/* 九宮格（模子 play 帶的預設輸入裝置，class=keypad——不用 .pad，句型站的列車煞車片叫 .pad）：貼邊、鍵高 ≥ --keyh、欄數 --keycols */
#play .keypad{ display:grid;grid-template-columns:repeat(var(--keycols),1fr);gap:var(--gap);width:100%; }
#play .keypad button{ min-height:var(--keyh);min-width:0; }
#hint{ flex:0 0 auto;font-size:max(14px,calc(3.4cqw*var(--ts)));color:var(--dim);text-align:center;padding:1.6cqw 0 0;min-height:5cqw; }
.note{ font-size:max(16px,calc(3.6cqw*var(--ts)));margin-top:1.5cqw;min-height:5cqw;color:var(--err);line-height:1.35; }
.note b{ color:var(--chalk); }
.note.good{ color:var(--ok); } .note.good b{ color:var(--ok); }
.hide{ display:none !important; }
@keyframes shake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.shake{ animation:shake .3s; }
@keyframes blink{ 50%{ opacity:.35; } }

/* 拇指區通用件：選項格與「看答案」列 */
.chips{ display:grid;gap:2.4cqw;align-content:start; }
.chips button{ text-wrap:pretty; color:var(--chalk);background:var(--panel);border:1px solid var(--rule);border-radius:2cqw;min-height:14cqw;padding:2cqw;cursor:pointer;transition:background .12s,border-color .12s,transform .06s; }
.chips button:active{ transform:translateY(1px); }
.chips button.right{ border-color:var(--ok);color:var(--ok);background:var(--ok-soft); }
.chips button.wrong{ border-color:var(--err);color:var(--err); }
.chips button:disabled{ cursor:default; }
.mini{ display:flex;gap:2cqw;margin-top:auto;padding-top:2cqw; }
.mini button{ flex:1;font-size:max(20px,calc(6cqw*var(--ts)));color:var(--dim);background:none;border:1px solid var(--rule);border-radius:2cqw;min-height:max(44px,12.5cqw);cursor:pointer; }

/* ═══ 桌機側欄：搬過去的節點照側欄字級走（柱外沒有容器單位，用 vh：1vh ≈ 柱寬 0.56%） ═══ */
body.wide #left #nav{ margin:0;gap:10px; }
body.wide #left select,body.wide #left .tabs button,body.wide #left .seg button,body.wide #left .tog{ font-size:calc(2.6vh*var(--ts));min-height:6vh;border-radius:8px;padding:0 min(14px,1vw); }
body.wide #left #nav label{ flex-direction:column;align-items:stretch;gap:4px; }
body.wide #left #nav label > span{ display:none; }   /* 三站左欄下拉都不加標籤：下拉內容自己說明了（第一課…／第 1 組…／整課語法點）（P2-8，KISS） */
body.wide #left #dock{ padding:0;flex-wrap:wrap;gap:10px; }
body.wide #left #hint{ font-size:2vh;text-align:left;padding:4px 0 0; }
body.wide #right #stats{ margin:0;font-size:2.6vh;gap:16px;flex-wrap:wrap; }
body.wide #right .pip{ width:22px;height:7px; }
body.wide #right #pips,body.wide #right .pips{ flex-wrap:wrap; }

/* ═══ 結算卡（柱內覆蓋） ═══ */
#card{ position:absolute;inset:0;background:var(--veil);display:grid;place-items:center;z-index:5;padding:4cqw; }
#card[hidden]{ display:none; }
.sheet{ width:100%;background:var(--panel);border:1px solid var(--rule);border-radius:3cqw;padding:5cqw; }
.sheet h2{ font-family:var(--han);font-size:calc(7.5cqw*var(--ts));margin:0 0 1cqw;font-weight:500;color:var(--beam); }
.sheet .sub{ font-size:max(14px,calc(3.6cqw*var(--ts)));color:var(--dim);margin-bottom:4cqw;line-height:1.3; }
.rows{ display:grid;gap:2.4cqw;margin-bottom:4cqw; }
.row{ display:flex;align-items:baseline;gap:2cqw;font-size:calc(4.3cqw*var(--ts));flex-wrap:wrap; }
.row span{ color:var(--dim); }
.row b{ margin-left:auto;font-family:var(--num);font-size:calc(7.5cqw*var(--ts));font-weight:500; }
.row b.good{ color:var(--ok); } .row b.gold{ color:var(--beam); }
#cardBars{ display:grid;gap:1.6cqw;margin-bottom:4cqw; }
#cardBars div{ font-size:max(14px,calc(3.6cqw*var(--ts)));color:var(--dim);display:flex;align-items:center;gap:2cqw;line-height:1.3; }
#cardBars i{ height:1.6cqw;background:var(--err);display:block;min-width:1cqw;flex:0 0 auto; }
#cardBars .w{ font-family:var(--han);color:var(--chalk); }
#cardGo,#cardNext{ width:100%;font-size:max(20px,calc(5.4cqw*var(--ts)));font-weight:600;background:var(--beam);color:var(--on-beam);border:0;min-height:max(44px,13cqw);cursor:pointer;border-radius:2cqw; }
#cardNext[hidden]{ display:none; }
#cardNext:not([hidden]) + #cardGo{ background:none;color:var(--ok);border:1px solid var(--ok);font-weight:500;margin-top:2.4cqw; }   /* 黃鈕＝往下走、框鈕＝再玩一次（三站施工單 P2-4，同句型站） */

/* ═══ 封面（柱內覆蓋） ═══ */
#cover{ position:absolute;inset:0;z-index:10;background:var(--cover-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .5s;padding:0 max(16px,4cqw); }   /* v1.1.2 補回：色票拆檔時掉了這行，封面字貼左邊（2026-10-12 手機量到 left 0） */
#cover.lifted{ opacity:0;pointer-events:none; }
#coverTitle{ font-family:var(--title);font-weight:900;font-size:calc(9.6cqw*var(--ts));letter-spacing:.06em;color:var(--beam);white-space:nowrap;max-width:100%; }
#coverEn{ font-family:var(--num);font-size:max(14px,calc(3.5cqw*var(--ts)));letter-spacing:.3em;color:var(--dim);margin-top:1.5cqw;text-align:center; }
#coverRule{ width:50%;height:2px;background:linear-gradient(90deg,transparent,var(--beam),transparent);margin:5cqw 0; }
#coverRpg{ font-family:var(--num);font-size:calc(4.3cqw*var(--ts));color:var(--chalk);min-height:6cqw; }
#coverCode{ margin:2cqw 0 4cqw !important;font-size:calc(4.3cqw*var(--ts)) !important;color:var(--chalk);text-align:center;line-height:1.5 !important; }
#coverCode label{ display:inline-flex;align-items:center;gap:2cqw; }
#coverCode input{ font:inherit;width:min(17ch,60cqw) !important;min-height:11cqw;text-align:center;background:transparent;color:inherit;border:2px solid currentColor;border-radius:1.5cqw !important;padding:.1em .3em; }
#syncStatus{ font-size:max(14px,calc(3.4cqw*var(--ts)));color:var(--dim);margin-top:1cqw; }
#coverStart{ font-size:calc(5.3cqw*var(--ts));color:var(--chalk);animation:blink 1.2s steps(2) infinite;text-align:center; }
@media (pointer:coarse){   /* 手機沒有「任意鍵」：同一行字畫成大按鈕（整張封面仍可點） */
  #coverStart{ animation:none;border:2px solid currentColor;border-radius:2cqw;padding:0 8cqw;min-height:max(44px,13cqw);display:flex;align-items:center;justify-content:center; }
}
#coverStartEn{ font-family:var(--num);font-size:max(14px,calc(3.5cqw*var(--ts)));letter-spacing:.3em;color:var(--dim);margin-top:1cqw; }
#coverVer{ position:absolute;right:3cqw;bottom:2cqw;font-size:max(14px,calc(3.2cqw*var(--ts)));color:var(--dim);font-family:var(--num); }
#dp-handle{ left:auto!important;right:10px!important;bottom:auto!important;top:max(10px,env(safe-area-inset-top))!important; }   /* 設計師把手右上：左下是拇指區的地盤 */
@media (prefers-reduced-motion:reduce){ *{ animation:none!important;transition:none!important; } }