@charset "UTF-8";
/* ==========================================================================
   Base.css  -  Phase 0 全站基礎樣式
   --------------------------------------------------------------------------
   1. 色彩 Token       : 全站配色的唯一來源，改這裡即可換色
   2. Quirks 相容修正  : 補上 DOCTYPE 後（quirks -> standards）的行為差異
   3. 版面流動化       : 把寫死的 740 / 725 / 720 / 730 px 變成可縮放
   4. 舊版屬性中和     : bgcolor / background / <font color> 由 CSS 接管
   5. 表單元件         : 輸入框、按鈕
   6. 響應式斷點       : 手機 / 平板的基本調整
   7. 列印             : 列印時回復固定寬度，避免套印跑位
   --------------------------------------------------------------------------
   注意: 本檔必須「最後」載入，才能覆蓋 Style.css / Table.css / Theme.css
   ========================================================================== */


/* ==========================================================================
   1. 色彩 Token
   --------------------------------------------------------------------------
   原本是紫色系（內文 #9932CC、底色 #EAD8FE、Purple.gif）。
   改為低彩度的藍灰（slate）系: 降低彩度與亮度對比，長時間閱讀不易疲勞。
   ========================================================================== */
:root
{
	/* --- 背景 --- */
	--bg-page:			#EDF1F5;	/* 頁面底色      （原 #EAD8FE / Purple.gif） */
	--bg-surface:		#FFFFFF;	/* 內容區底色 */
	--bg-surface-alt:	#F7FAFC;	/* 資料欄位底色  （原 .RightColor #FFF7F7） */
	--bg-label:			#DFE7EE;	/* 標題欄位底色  （原 .LeftColor  #FFD2D2） */
	--bg-section:		#CFDCE7;	/* 區段標題列    （原 bgcolor="Yellow"）   */
	--bg-menu:			#E4EBF1;	/* 選單底色      （原 #EAD8FE）            */
	--bg-hover:			#CBDCEA;	/* 滑過 / 選取   （原 #FFDDFF）            */

	/* --- 表格分色: 兩色交替（斑馬紋）--------------------------------
	   code-behind 以 BrowseRow.CssClass = "RawColor" + (n % 4) 指派，
	   會循環產生 RawColor0/1/2/3。把 0 與 2 設成同一色、1 與 3 設成另一色，
	   就會得到 A,B,A,B 的兩色交替，不需要改任何 .cs。

	   兩色的明度只差約 7%，剛好夠讓視線在長清單中跟住同一列，
	   又不會因為對比太強而造成閱讀疲勞; A 刻意不用純白，強光下較不刺眼。 */
	--row-stripe-a:		#FBFDFE;	/* 近白，帶一點冷調 */
	--row-stripe-b:		#EFF4F9;	/* 淺板岩藍 */

	--row-0:			var(--row-stripe-a);	/* 原 #ECFBFF 水藍 */
	--row-1:			var(--row-stripe-b);	/* 原 #ECFFEC 淺綠 */
	--row-2:			var(--row-stripe-a);	/* 原 #FFF4FF 粉紫 */
	--row-3:			var(--row-stripe-b);	/* 原 #FFFFEC 淺黃 */
	--row-gray:			#EDF1F4;	/* 原 #EEF2F5 */
	/* 說明列（Procedure/Default）、未完成／未回覆狀態列（News、Contact、
	   Calendar/ViewEvent）、彙總列（Browse/Insure 的總計、平均）共用這個底色。
	   原本沿用舊版的淺黃 #FEFEF2，與整體的板岩藍系不成套;
	   改為暖砂色 —— 去掉黃味、保留一點暖調，與 --row-gray（已完成）的冷灰
	   仍然分得出來，那是換色時最需要保住的區別。 */
	--row-yellow:		#F4F1E8;	/* 原 #FEFEF2，中途曾為 #F9F6EA */

	/* --- 頁籤（切換列） ---------------------------------------------------
	   原本沿用 .RawYellow 的淺黃底 + 連結藍字，與整體的板岩藍系不成套，
	   而且「目前在哪一頁」只靠 <font color=gray|red> 的字色表示，很不明顯。
	   改成三種狀態各自明確:
	     一般   淺藍底 + 深藍字，滑過時加深
	     目前   實心深藍 + 白字 + 粗體，一眼看得出所在位置
	     無權限 灰底灰字，明顯是不能點的
	   對比度: 深藍字/淺藍底 5.7:1、白字/深藍底 7.2:1，皆過 WCAG AA。 */
	--tab-bg:			#DFE7EE;
	--tab-text:			#1D5C86;
	--tab-border:		#C3D2DE;
	--tab-bg-hover:		#CBDCEA;
	--tab-text-hover:	#123F5D;
	--tab-bg-active:	#1D5C86;
	--tab-text-active:	#FFFFFF;
	--tab-bg-off:		#EDF1F4;
	--tab-text-off:		#7C8A97;

	/* --- 線條 --- */
	--line-grid:		#B9C7D3;	/* 表格格線      （原 .TableBorder #A9B8C2） */
	--line-border:		#9FB3C4;	/* 控制項外框    （原 #A557FB）              */
	--line-soft:		#FFFFFF;	/* 儲存格內縫線 */

	/* --- 文字 --- */
	--text-main:		#2F3B47;	/* 內文          （原 #9932CC） */
	--text-muted:		#6E7C89;
	--text-link:		#1D5C86;	/* 連結          （原 #5B005B） */
	--text-link-hover:	#123F5D;
	--text-danger:		#B4342A;	/* 警示          （原 red）     */
	--text-info:		#1D5C86;	/* 提示          （原 blue）    */

	/* --- 控制項 --- */
	--ctl-bg:			#FFFFFF;	/* 輸入框底色    （原 #EAD8FE） */
	--ctl-border:		#9FB3C4;
	--ctl-focus:		#4A87B5;
	--ctl-focus-rgb:	74, 135, 181;	/* = --ctl-focus，供 focus ring 的 rgba() 使用 */
	--ctl-radius:		4px;			/* Bootstrap 5 是 .375rem(6px)，此處字級較小故收斂 */
	--ctl-pad-y:		4px;
	--ctl-pad-x:		6px;
	--ctl-line:			1.4;			/* 控制項行高。設成固定值（而非 normal）
										   高度才能推算，勾選框才對得齊 */

	/* 控制項高度 = 行高 + 上下內距 + 上下框線。
	   文字框、下拉、按鈕、勾選框、單選鈕全部套用同一個值。

	   這裡用 var(--font-size-base) 而不是 1em —— 勾選框與單選鈕不會繼承
	   字級（維持瀏覽器預設的 13.3px），用 1em 會算出比文字框小的高度。

	   覺得太大就把這行改成固定值（例如 26px），其餘不必動。 */
	--ctl-height:		calc(var(--ctl-line) * var(--font-size-base) + 2 * var(--ctl-pad-y) + 2px);
	--btn-bg:			#E3EBF2;
	--btn-bg-hover:		#CBDCEA;
	--btn-bg-active:	#B9CFE1;
	--btn-border:		#9FB3C4;

	/* --- 版面 --- */
	/* 內頁內容最大寬度: none = 依 iframe 可用空間自動縮放，兩側不留白。
	   全站 95% 的欄寬是百分比（4265 個 % vs 232 個固定 px），因此表格會
	   正確依比例撐開。效益最大的是清單頁 —— 15 欄的搜尋結果在 1370px 下，
	   單列高度從 227px（折 7、8 行）降到 28px。

	   代價: 681 個 Columns="N" 的輸入框寬度由字元數決定，表格撐開時欄位
	   不會跟著長大，值儲存格右側會留下空白（1690px 下中位數約 149px；
	   欄數少的兩欄式表單如 Careers/CareersFrm.aspx 會更明顯）。

	   改回 740px 即恢復舊版置中的固定寬版面。 */
	--frame-max:		none;

	/* 內頁內容寬度: 左右各留 10px（由 <div align="center"> 置中）。

	   原本是 94%（各留 3%），但百分比會隨螢幕放大 —— 1440px 的 iframe 下
	   單邊就吃掉 36px，寬螢幕反而浪費空間。改成固定值後不論螢幕多寬
	   都是 10px，內容可用寬度隨螢幕等量增加。

	   全站 156 支後台頁面有 153 支用 <div align="center"> 包住主表格，
	   其餘 3 支（Default.aspx 外框、兩支 Excel 匯出頁）不套用本變數。

	   實測 360 / 390 / 600 / 768 / 860 / 1032 / 1280 / 1440px 共八種寬度，
	   143/143 頁都是精準的 10/10。 */
	--frame-width:		calc(100% - 20px);

	/* 巢狀在其他表格內的表格只留這個間隙，不套外層的留白 */
	--nested-gap:		2px;

	/* 表格列的最小高度（第 2-5 節）。抽成變數是因為有兩種套用方式:
	   display:table-row 的列用 height（表格版面下等同最小值），
	   被改成 display:block 的列必須改用 min-height —— 對區塊元素而言
	   height 是「固定值」，內容會直接溢出。 */
	--row-min-height:	40px;

	/* 卡片模式左邊欄名的寬度（第 10 節）。單位 em 是相對於欄名自己的字級
	   （基準字級的 .9em ≈ 13.5px），所以 7em ≈ 94px，容得下 6 個中文字。
	   Browse/ 底下最長的欄名是 6 個字（本國勞保人數、外籍外加人數 …）。
	   推廣到其他清單頁時若出現更長的欄名，調這裡即可。 */
	--card-label:		7em;

	/* 清單資料列是否折行。預設 nowrap = 每筆一行、超出寬度時橫向捲動。
	   若某個部署的欄位內容特別長（例如很長的備註欄），改成 normal
	   即可恢復折行。 */
	--list-wrap:		nowrap;

	--shell-max:		none;		/* Default.aspx 外框最大寬度: 撐滿螢幕，兩側不留白
									   （改回 1000px 即恢復舊版置中的固定寬版面） */

	/* --- 字型 ---------------------------------------------------------
	   原本是 Tahoma,Georgia,Taipei —— "Taipei" 並非實際存在的字型，
	   中文因此落到系統預設的新細明體（PMingLiU），小字級下筆畫糊成一團。
	   改為以正黑體為主的無襯線堆疊，各平台都有對應字型可用。
	   ------------------------------------------------------------------- */
	--font-family:		"Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "微軟正黑體",
						"PingFang TC", "Hiragino Sans TC", "Noto Sans TC",
						Tahoma, Arial, sans-serif;

	/* 原為 9pt（= 12px），提高到 15px、約 +25%。

	   Phase 0 時只敢調到 13px（+8%），是因為當時表格還是 740px 固定寬，
	   字級一大就會改變換行位置而破版。Phase 0-3 把版面流動化之後
	   （表格自動縮放、表單會堆疊、清單自己橫向捲動）這個限制已經不存在：
	   實測 13 / 14 / 15 / 16px 在 139 支頁面 × 390 / 1024 / 1280 三種寬度下
	   全部零溢出、零文字裁切。

	   15px 的代價: 表單頁高 +10%、清單內容寬 1238 -> 1413px（橫捲多 14%，
	   但清單在 13px 時本來就全部需要橫捲，並非新增的行為）。 */
	--font-size-base:	15px;
	--line-height-base:	1.7;			/* 原為 1.6，中文行距略放寬較好讀 */
}


/* ==========================================================================
   2. Quirks 相容修正
   --------------------------------------------------------------------------
   補上 <!DOCTYPE html> 後瀏覽器從 quirks 切到 standards mode，
   以下三項是舊版面最容易因此跑位的地方。
   ========================================================================== */

/* 2-1. 盒模型: quirks 的 width 含 padding/border，standards 不含。
        border-box 讓行為回到與舊版一致，是整個 Phase 0 最關鍵的一行。 */
*, *::before, *::after
{
	box-sizing:			border-box;
}

/* 2-2. 圖片: standards mode 下 inline 圖片底部會多出基線間隙，
        造成用 GIF 切片拼接的框線出現白縫。 */
img
{
	vertical-align:		middle;
	border:				0;
	max-width:			100%;
}

/* 2-2b. 內嵌 iframe -------------------------------------------------------
   全站只有 New/WorkerFrm.aspx 與 New/FullWorkerFrm.aspx 用到:
   <iframe id="ViewRecruit" width="760"> 載入 /Detail/Recruit.aspx 的招募函。

   寬度寫死 760px，而同一個 <div align="center"> 裡的表單表格會依第 3 節
   縮放成 --frame-width（左右各 10px）—— 1280px 螢幕下表格 1060px、iframe 只有 760px，
   上下兩塊對不齊。

   這裡設 100% 而不是 94%: iframe 裡載入的頁面本身也會套用 94%，
   若外層再收一次就變成雙重留白（實測與下方表格差 57–61px）。
   外層滿版、內層 94%，內容的左緣與寬度才會與下方表格完全一致
   （實測 1280 / 1024 / 768px 的左緣差與寬度差皆為 0）。 */
iframe
{
	max-width:			100%;
}

iframe[width]
{
	width:				100%;
}

/* 2-3. 讓 100% 高度的版面（Default.aspx 外框）在 standards mode 下仍成立 */
html, body
{
	margin:				0;
	padding:			0;
}

/* 2-4. 內頁上緣留一點間隙，避免內容直接貼齊畫面邊緣。
        左右的留白由第 3 節的 --frame-width（各 10px）負責，這裡只補上方。

        外框頁（Default.aspx）不受影響 —— Shell.css 在 Base.css 之後載入，
        它的 `html, body { padding: 0 }` 會把這裡重設回去。 */
body
{
	padding-top:		5px;
}

/* 2-5. 表格列的最小高度 ------------------------------------------------------
   CSS 表格版面裡，tr 的 height 是「最小值」而不是固定值 —— 內容更高時
   仍會自行撐開，所以這裡等同於 min-height。

   現況（實測 154 支頁面、1771 列）: 原本有 491 列低於 35px，其中 250 列是
   清單資料列（32px）、232 列是各種資料與版面列。同一頁裡列高忽高忽低，
   長時間閱讀時很容易看錯行。

   不需要排除空白列: 全站 .aspx 原始碼中「整列儲存格皆空」的 tr 是 0 處，
   看起來空的那幾列（Detail/Customer 的 ScanLink、Upload/Default 的 FailFile
   等）都是由 code-behind 填入內容的。

   列印時不套用 —— 拉高列高只會多耗紙張。 */
@media screen
{
	tr
	{
		height:				var(--row-min-height);
	}
}


/* ==========================================================================
   2.5 字型與字級
   --------------------------------------------------------------------------
   Style.css 的 body/td/p 已改用同一組 token，這裡補上它沒有涵蓋的元素:
   表單控制項預設不繼承字型，必須明確指定。
   ========================================================================== */
body, td, th, p, div, span, li, label
{
	font-family:		var(--font-family);
}

body
{
	font-size:			var(--font-size-base);
	line-height:		var(--line-height-base);
}

input, select, textarea, button
{
	font-family:		var(--font-family);
	line-height:		var(--ctl-line);
}


/* ==========================================================================
   3. 版面流動化
   --------------------------------------------------------------------------
   固定寬度有兩個來源，處理方式不同:

   (a) HTML 的 width 屬性 —— 全站 311 個 <table width="N">。
       實際使用的值是 300~750（最小 300），沒有小尺寸的間隔用表格，
       因此可以一律流動化。width 屬性是 presentational hint，
       優先權低於任何 CSS 規則，不需要 !important。

   (b) inline style 的 px 寬度 —— 來自 <asp:Table Width="N"> 與
       code-behind 的 BrowseTable.Width = N。這一組的值域很廣:
         18 20 40 50 80 90 100 120 124 125   <- 版面間隔用的小表格
         180 190 218 220 240 400 500 675 680 700 720 725 730 740
         1040 1050 1480 1510 2100            <- 比框架還寬，一定要流動化
       小尺寸強制拉滿會破版，所以改用「排除小尺寸」而非逐一列舉大尺寸 ——
       這樣將來新增任何大尺寸也會自動被涵蓋。

       排除清單的比對是安全的: 每個條件都以 "width:" 開頭錨定，
       例如 "width:1040px" 不會被 "width:100px" 或 "width:40px" 誤中。
   ========================================================================== */
table[width]:not([width$="%"])
{
	width:				var(--frame-width);
	max-width:			var(--frame-max);
}

/* inline style 的優先權高於樣式表，故需要 !important */
table[style*="width:"][style*="px"]:not(:where([style*="width:18px"],[style*="width:20px"],[style*="width:40px"],[style*="width:50px"],[style*="width:80px"],[style*="width:90px"],[style*="width:100px"],[style*="width:120px"],[style*="width:124px"],[style*="width:125px"]))
{
	width:				var(--frame-width) !important;
	max-width:			var(--frame-max);
}

/* 巢狀在其他表格內的框架表格 --------------------------------------------
   左右各 3% 的留白只適用最外層。內層表格若也套一次，等於在已經內縮過的
   外層裡再縮一次，看起來會像階梯。內層只留 2px 間隙即可。

   需要 !important 的原因: 手機斷點的
   `table[width]:not([width$="%"]) { width:100% !important }` 特異度是 (0,2,1)，
   不加 !important 會在手機上被它蓋掉，導致內外層行為不一致。
   ------------------------------------------------------------------------ */
table table[width]:not([width$="%"]),
table table[style*="width:"][style*="px"]:not(:where([style*="width:18px"],[style*="width:20px"],[style*="width:40px"],[style*="width:50px"],[style*="width:80px"],[style*="width:90px"],[style*="width:100px"],[style*="width:120px"],[style*="width:124px"],[style*="width:125px"]))
{
	width:				calc(100% - 2 * var(--nested-gap)) !important;
}

/* Table.css 用 GIF 切片拼出的表頭 / 表尾 */
.TableTop,
.TableBottom
{
	width:				var(--frame-width);
	max-width:			var(--frame-max);
}

/* 任何表格都不得撐破容器 */
table
{
	max-width:			100%;
}


/* ==========================================================================
   4. 舊版 HTML 屬性中和
   --------------------------------------------------------------------------
   bgcolor / background / <font color> 全部是 presentational hint，
   用 CSS 即可接管，不需要改動 154 支 .aspx。
   ========================================================================== */

/* 4-1. body 背景（原本 154 支頁面掛 background="/Images/Purple.gif"） */
body
{
	background-image:	none;
	background-color:	var(--bg-page);
	color:				var(--text-main);
}

/* 4-2. 區段標題列（194 處 bgcolor="Yellow"、10 處 bgcolor="Lavender"） */
[bgcolor="Yellow" i],
[bgcolor="Lavender" i],
[bgcolor="#ead8fe" i],
[bgcolor="#ffddff" i]
{
	background-color:	var(--bg-section);
	color:				var(--text-main);
}

/* 4-3. <font color="..."> */
font[color="red" i]		{ color: var(--text-danger); }
font[color="blue" i]	{ color: var(--text-info); }
font[color="gray" i]	{ color: var(--text-muted); }
font[color="black" i]	{ color: var(--text-main); }

/* 4-4. ASP.NET 以 ForeColor="Red" 算繪出的 inline style */
[style*="color:Red"],
[style*="color: Red"],
[style*="color:red"]
{
	color:				var(--text-danger) !important;
}

/* 4-5. code-behind 設定的底色 -------------------------------------------
   這是最容易漏掉的一組: 全站 61 支頁面、共 62 處在 code-behind 寫
   `BrowseRow.BackColor = System.Drawing.Color.Yellow;`，ASP.NET 會算繪成
   <tr style="background-color:Yellow;">。

   它是 inline style，不是 bgcolor 屬性，所以第 4-2 節那條規則完全對不到 ——
   這些資料列在改版後仍然是原本的鮮黃色。inline style 優先權高，需要
   !important 才能覆蓋。

   使用的顏色（依 .cs 統計）: Yellow 62、White 2、AliceBlue 3、Pink 1、Gray 1。
   Pink 用在「退件」的標示，保留可辨識的紅粉色，只降低彩度。
   ------------------------------------------------------------------------ */
[style*="background-color:Yellow" i]
{
	background-color:	var(--bg-section) !important;
}

[style*="background-color:Pink" i]
{
	background-color:	#F6DDDD !important;		/* 退件標示，維持可辨識 */
}

[style*="background-color:AliceBlue" i]
{
	background-color:	var(--row-0) !important;
}

[style*="background-color:White" i]
{
	background-color:	var(--bg-surface) !important;
}

[style*="background-color:Gray" i]
{
	background-color:	var(--line-grid) !important;
}


/* 4-x. 舊版連結 class ----------------------------------------------------
   Style.css 的 .link2 / .link3 寫死 font-family:"新細明體"、font-size:12px、
   以及自己的顏色（#429bd7 / #006）。Base.css 一直沒有中和它們，
   所以 Link/Default 的文字連結在全站字級調到 15px 之後仍然是 12px 的細明體
   （使用者截圖才發現）。

   後台頁面實際只有 Link/Default.aspx 用到 —— 另外 12 支都在 Login/ 與 Home/，
   那兩處不載入 Base.css，因此這條規則碰不到它們，前台維持原樣。

   .link1 在 Style.css 也有定義，但全站沒有任何地方使用，不處理。 */
.link2,
.link3
{
	font-family:		inherit;
	font-size:			inherit;
	color:				var(--text-link);
}

a.link2:hover,
a.link3:hover
{
	color:				var(--text-link-hover);
}


/* ==========================================================================
   5. 表單元件 —— Bootstrap 風格外觀
   --------------------------------------------------------------------------
   做法: 不載入 Bootstrap 的 CSS 檔，只把既有的控制項對應到 Bootstrap 的
   視覺語彙（圓角、內距、focus ring、扁平按鈕）。

   為什麼不直接載入 Bootstrap:
     它的 Reboot 有 table { border-collapse: collapse }，而全站有 324 張
     表格是靠 cellspacing="1" 讓表格底色透出 1px 縫隙來畫格線的。實測結果
     是水平與垂直格線都從 1px 變成 0px —— 格線會全部消失。

   為什麼用「元素選擇器」而不是「加 class」:
     全站有 636 處 class 是由 code-behind 指定的（Dotted-Line 94、
     RightColor 66、LeftColor 62 …），改 markup 碰不到那些動態產生的控制項。
     改用 input[type="text"] / select / textarea 這類元素選擇器，
     不論 class 從哪裡來、控制項是靜態還是 .cs 動態產生，一律適用。

   對應關係:
     文字欄位 / 下拉 / 多行  ->  form-control、form-select
     勾選框 / 單選鈕         ->  form-check-input
     .Button / .ButtonProc   ->  btn
   ========================================================================== */

/* --- 5-1. 文字類欄位（對應 form-control）--------------------------------
   涵蓋 asp:TextBox 669 個、原生 input 130 個、以及 .cs 動態產生的 60 個。
   ------------------------------------------------------------------------ */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea
{
	/* textarea 是多行，高度由 rows 決定，因此不套 --ctl-height（見下一條） */
	max-width:			100%;
	padding:			var(--ctl-pad-y) var(--ctl-pad-x);
	font-size:			var(--font-size-base);
	line-height:		var(--ctl-line);
	color:				var(--text-main);
	background-color:	var(--ctl-bg);
	background-clip:	padding-box;
	border:				1px solid var(--ctl-border);
	border-radius:		var(--ctl-radius);
	transition:			border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* 所有單行控制項統一高度 —— 文字框、下拉、勾選框、單選鈕、按鈕齊高。
   textarea 不列入，它的高度要由 rows 決定。 */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
select
{
	height:				var(--ctl-height);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus
{
	outline:			0;
	border-color:		var(--ctl-focus);
	box-shadow:			0 0 0 3px rgba(var(--ctl-focus-rgb), .25);
}

input::placeholder,
textarea::placeholder
{
	color:				var(--text-muted);
	opacity:			1;
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled
{
	background-color:	#EEF1F4;
	color:				var(--text-muted);
	opacity:			1;
}

/* 浮水印狀態（AjaxToolkit TextBoxWatermarkExtender 會在欄位為空時
   把 CssClass 換成 WatermarkCssClass，共 24 處） */
input.TextboxWatermark,
textarea.TextboxWatermark
{
	color:				var(--text-muted);
}

/* --- 5-1b. 欄位自動延伸到儲存格寬度 --------------------------------------
   表格改為滿版縮放後，輸入框的寬度仍由 Columns="N" 的字元數決定，
   儲存格右側會留下大片空白。這裡讓欄位填滿它所在的儲存格。

   只在「儲存格裡就這麼一個控制項」時才填滿 —— 全站 1565 個值儲存格的
   組成是:
     單一文字欄位 520、單一下拉 105、單一多行 28   -> 填滿
     勾選+下拉 30、文字+按鈕 12、多個文字並排 7、
     文字+下拉 4、按鈕群等 97                      -> 保持原寬，否則會被擠到下一行

   :only-of-type 已能擋掉「文字欄位 + 按鈕」與「多個文字欄位並排」
   （兩者都是 <input>）; 下方的 ~ 規則再擋掉前面有勾選框或其他控制項的情況。
   ------------------------------------------------------------------------ */
/* textarea 比其他控制項寬鬆一點: 不限 td.RightColor，任何儲存格裡的
   單一 textarea 都填滿。

   理由是多行輸入框沒有「短欄位」的情境 —— cols 值全站是 62~100，
   本來就打算佔滿一整列; 而 input[type=text] 有 size="6" 這種短欄位，
   在桌機一律拉滿反而難看，所以那個仍限定在 RightColor 內。

   受惠的只有 2 支（其餘 28 個 textarea 都在 td.RightColor 裡）:
     Setup/SetIntroduction  <td align="center" bgcolor="Lavender">，cols=100
     Empower/AmountFrm      <td class="LeftColor">，cols=24

   特異度 (0,1,2) 低於下面 RightColor 那組，所以那些例外仍然優先。 */
td > textarea:only-of-type
{
	width:				100%;
}

td.RightColor > input[type="text"]:only-of-type,
td.RightColor > input[type="password"]:only-of-type,
td.RightColor > textarea:only-of-type,
td.RightColor > select:only-of-type
{
	width:				100%;
}

/* 例外: 同一格裡前面已經有其他控制項（asp:CheckBox 會算繪成 <span> 包裝），
   此時填滿會把後面的控制項推到下一行。

   注意選擇器尾端的 :only-of-type 不能省 —— 上面那條的特異度是 (0,2,2)，
   若這裡寫成 `td.RightColor > span ~ select` 只有 (0,1,3)，class 數較少會輸掉，
   例外就不會生效。 */
td.RightColor > input ~ select:only-of-type,
td.RightColor > span ~ select:only-of-type,
td.RightColor > label ~ select:only-of-type,
td.RightColor > a ~ select:only-of-type,
td.RightColor > span ~ input[type="text"]:only-of-type,
td.RightColor > span ~ input[type="password"]:only-of-type,
td.RightColor > span ~ textarea:only-of-type,
td.RightColor > label ~ input[type="text"]:only-of-type,
td.RightColor > a ~ input[type="text"]:only-of-type,
td.RightColor > select ~ input[type="text"]:only-of-type,
td.RightColor > select ~ textarea:only-of-type
{
	width:				auto;
}

/* --- 5-2. 下拉選單（對應 form-select）-----------------------------------
   自帶箭號圖示，內嵌為 data URI，不會發出任何外部請求。
   注意: data URI 內無法使用 var()，箭號顏色 #6E7C89 等同 --text-muted，
   改配色時需一併調整。
   ------------------------------------------------------------------------ */
select:not([multiple]):not([size])
{
	padding-right:		20px;
	background-image:	url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E7C89' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat:	no-repeat;
	background-position: right 6px center;
	background-size:	10px 8px;
	-webkit-appearance:	none;
	-moz-appearance:	none;
	appearance:			none;
}

/* --- 5-3. 勾選框 / 單選鈕（對應 form-check-input）-----------------------
   這裡刻意「不」用 appearance:none 自繪。資料輸入系統裡，勾選狀態一旦
   因為自繪圖示失效而看不出來，代價太高。改用 accent-color 為原生控制項
   上色 —— 不支援的瀏覽器就退回原生外觀，不會有任何破圖風險。
   ------------------------------------------------------------------------ */
input[type="checkbox"],
input[type="radio"]
{
	accent-color:		var(--ctl-focus);
	vertical-align:		middle;

	/* 瀏覽器對 radio/checkbox 的預設是 margin: 3px 3px 0 5px —— 左邊那 5px
	   會讓「radio + 文字」的儲存格對不齊，清掉後左右間距才由這裡決定 */
	margin-left:		0;
	margin-right:		3px;

	/* 瀏覽器預設只有 13x13，在 15px 字級、33px 高的文字框旁邊顯得過小。
	   改為與文字框 / 下拉同高。原生控制項的勾記與圓點會跟著等比放大，
	   不需要自繪，因此沒有「圖示失效就看不出狀態」的風險。 */
	width:				var(--ctl-height);
	height:				var(--ctl-height);
	flex:				0 0 auto;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible
{
	outline:			2px solid var(--ctl-focus);
	outline-offset:		1px;
}

input[type="checkbox"] + label,
input[type="radio"] + label
{
	vertical-align:		middle;
	cursor:				pointer;
}

/* --- 5-3c. 選項表格（radio 直接放在儲存格裡）-----------------------------
   New/SelectClass.aspx 的客戶名稱／招募函文號／勞工資料，以及另外 27 支
   頁面的類似表格，都是 code-behind 把「radio + 文字」直接寫進儲存格:

       <td style="width:180px"><input type=radio ...>新北市私立忠祥老人…</td>

   問題: 儲存格只有 70–180px，文字放不下就折行，而折下來的那一行會從
   儲存格最左邊開始 —— 直接壓在 radio 底下，看起來像是文字與 radio 斷開。
   招募函文號更明顯: 十位數字是不可斷的一整串，窄一點時整串掉到下一行，
   radio 單獨留在上一行（實測 600px 以下 5/5 都這樣）。

   處理: 儲存格單行不折，表格自己成為橫向捲動容器 —— 與第 5.5 節的清單
   同一套做法。每個選項都完整地待在一行，不夠寬時捲動而不是把整頁撐開。
   實測 1032 / 600 / 390px: 折行 0、radio 被孤立 0、頁面溢出 0。

   排除 #BrowseTable: 那些清單已由第 5.5 節處理，不需要重複套用。

   ⚠ 也要排除「表單表格」。New/CustomerFrm 只是有一列「登記種類：有限公司 /
      股份有限公司」的 radio，整張表就被當成選項表格 —— 變成 display:block +
      overflow-x:auto，而且所有儲存格 white-space:nowrap，
      地址欄後面的「翻譯」鈕因此被推到畫面外（390px 下右緣 441px）。

      判斷要下在「表格」層級不是「頁面」層級 —— New/SelectClass 這種
      本來就是目標的頁面，同一頁也有表單表格。選項表格的儲存格沒有 class，
      表單表格一定有 LeftColor / RightColor。
   ------------------------------------------------------------------------ */
@supports selector(:has(*))
{
	table.TableBorder:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input[type="radio"])
	{
		display:			block;
		max-width:			100%;
		overflow-x:			auto;
		-webkit-overflow-scrolling: touch;

		/* 與第 5.5 節同理: 百分比寬度放在 <td> 裡會產生循環相依，
		   width:0 打斷它，再用 min-width 取回實際寬度 */
		width:				0 !important;
		min-width:			100%;
	}

	table.TableBorder:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input[type="radio"]) > tbody
	{
		display:			table;
		min-width:			100%;
	}

	table.TableBorder:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input[type="radio"]) td
	{
		white-space:		nowrap;
	}
}

/* --- 5-3b. 欄位標籤（由 Script/FieldLabel.js 在執行期建立）---------------
   標籤儲存格的內容會被包進 <label for="欄位ID">，讓螢幕閱讀器讀得出
   欄位名稱，點標籤也能聚焦到欄位。這裡只補上視覺提示，版面完全不變。
   ------------------------------------------------------------------------ */
label.FieldLabel
{
	display:			block;
	cursor:				pointer;
}

/* 點得到的地方給一點回饋，讓使用者知道標籤是可以點的 */
label.FieldLabel:hover
{
	text-decoration:	underline dotted;
	text-underline-offset: 2px;
}

/* --- 5-4. 包裝用的 span / table 不應該有輸入框外觀 ----------------------
   asp:CheckBox 設 CssClass 時，class 會落在外層 <span> 而非 <input>；
   asp:RadioButtonList 則落在外層 <table>。若沿用 Style.css 的
   .Dotted-Line 定義，會在勾選框與選項清單外面框出一個輸入框，
   那不是 Bootstrap 的樣子。
   ------------------------------------------------------------------------ */
span.Dotted-Line,
span.Dotted,
table.Dotted-Line,
table.Dotted
{
	background-color:	transparent;
	border:				0;
	padding:			0;
}

@supports selector(:has(*))
{
	/* 例外: 相片框（asp:Label CssClass="Dotted-Line" 內含 <img>，共 13 處）
	   保留外框，否則相片會沒有邊界。 */
	span.Dotted-Line:has(img)
	{
		display:			inline-block;
		padding:			3px;
		border:				1px solid var(--line-grid);
		border-radius:		var(--ctl-radius);
		background-color:	var(--bg-surface);
	}
}

/* --- 5-5. 按鈕（對應 btn）-----------------------------------------------
   Bootstrap 5 的按鈕是扁平的，因此移除原本的漸層。

   只選 <input type=submit|button|reset>，刻意不含 <button> 元素:
   asp:Button 算繪出來的是 <input type="submit">，專案裡完全沒有原生
   <button>。唯一的 <button> 是 Phase 1 新增的 #NavToggle 漢堡鈕與選單的
   .RmToggle 展開鈕 —— 那兩者由 Shell.css 負責，被這裡蓋掉會壞掉。
   ------------------------------------------------------------------------ */
.Button,
.ButtonProc,
input[type="submit"],
input[type="button"],
input[type="reset"]
{
	display:			inline-block;
	padding:			var(--ctl-pad-y) 12px;
	font-size:			var(--font-size-base);
	line-height:		1.5;
	text-align:			center;
	vertical-align:		middle;
	color:				var(--text-main);
	background-color:	var(--btn-bg);
	background-image:	none;
	border:				1px solid var(--btn-border);
	border-radius:		var(--ctl-radius);
	cursor:				pointer;
	user-select:		none;
	transition:			color .15s ease-in-out, background-color .15s ease-in-out,
						border-color .15s ease-in-out, box-shadow .15s ease-in-out;

	/* Style.css 的 .Button 寫死 height:20px，字級調大後會裁到文字 */
	height:				auto;
	height:				var(--ctl-height);

	/* asp:Button 的 Width="110" 會算繪成 style="width:110px"。
	   那些數字是照舊版 9pt（12px）字級抓的，字級調到 15px 之後就不夠 ——
	   Trace/Adequate 的「初次招募入國引進」需要 146px，被裁掉 36px。

	   min-width: fit-content 讓固定寬度變成「下限」而不是「上限」:
	   放得下就照原本的寬度，放不下就撐開。沒有設寬度的按鈕不受影響
	   （width 本來就是 auto，等同 fit-content）。
	   這樣連 code-behind 設寬度的情況也一併防住，不必逐支改 markup。 */
	min-width:			fit-content;
	filter:				none;			/* 清掉已失效的 IE progid 漸層 */
}

.Button:hover,
.ButtonProc:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover
{
	background-color:	var(--btn-bg-hover);
	border-color:		var(--ctl-focus);
}

.Button:active,
.ButtonProc:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active
{
	background-color:	var(--btn-bg-active);
}

.Button:focus-visible,
.ButtonProc:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible
{
	outline:			0;
	border-color:		var(--ctl-focus);
	box-shadow:			0 0 0 3px rgba(var(--ctl-focus-rgb), .25);
}

.Button:disabled,
.ButtonProc:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled
{
	opacity:			.65;
	cursor:				default;
	background-color:	var(--btn-bg);
	border-color:		var(--btn-border);
}


/* ==========================================================================
   5.5 清單 / 結果頁的資料表格（Phase 3）
   --------------------------------------------------------------------------
   清單表格由 code-behind 產生（53 支頁面的 <asp:Table ID="BrowseTable">），
   欄數還會隨使用者在「顯示欄位進階選項」的勾選而變動，無法預先得知。

   問題: 15 欄的搜尋結果在 390px 下，表格的最小內容寬就有 715px ——
   整頁被撐開橫向捲動，且每筆資料的列高達 315px（每欄折成七八行）。

   處理: 表格自己成為橫向捲動容器 + 儲存格單行不折 + 第一欄固定。
   實測列高在 390 / 768 / 1024 / 1280 全部變成 28px，且頁面不再溢出。

   辨識方式:
     (1) #BrowseTable —— 53 支頁面的清單一律命名為
         <asp:Table ID="BrowseTable">。這些頁都沒有用 MasterPage，
         id 不會被加上命名容器前綴; 手寫表格則 0 處用這個 id。

         注意: 這裡原本用的是 :not([border])，那是錯的。
         asp:Table 在 GridLines=None 時，TableStyle 會輸出 border="0"
         （專案內 Index/Worker.htm 這份渲染存檔可以佐證），
         因此 :not([border]) 反而把 53 支清單全數排除 ——
         本節規則在修正前從來沒有真正生效過。

     (2) 有 RawColorN 的資料列 —— code-behind 產生資料列時一律套用
         BrowseRow.CssClass = "RawColor" + (n % 4)。
         搜尋無結果時只輸出一列「無搜尋到符合的資料」且不帶這個 class，
         那種情況不需要捲動容器，正好被這個條件排除。

     另有 20 種表格（SelectFields、Images、Language …）也會被塞入
     RawColorN 的列，但它們是選項面板而不是清單，不適用橫向捲動，
     因此不能只靠 RawColorN 來辨識。

   包在 @supports 內: 不支援 :has() 的瀏覽器維持原本行為，不會出錯。

   若某個部署的欄位內容特別長（例如很長的備註欄），單行不折會讓表格
   變得很寬，此時把 --list-wrap 設成 normal 即可恢復折行。
   ========================================================================== */
@supports selector(:has(*))
{
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]),
	table.AsCards
	{
		display:			block;
		max-width:			100%;
		overflow-x:			auto;
		-webkit-overflow-scrolling: touch;

		/* 打斷循環相依 ----------------------------------------------------
		   有 33 支頁面的清單表格是放在 <td> 裡的（例如 Apply/Detail.aspx）。
		   捲動容器若用百分比寬度，寬度會取決於儲存格、而儲存格又取決於
		   內容 —— 瀏覽器最後改用內容的最小寬度，結果儲存格被撐成 1248px，
		   整頁跟著橫向溢出（實測 1024 -> 1250）。

		   width:0 讓它對「最小內容寬」的貢獻歸零，打斷這個循環，
		   再用 min-width 把實際寬度取回來。 */
		width:				0 !important;
		min-width:			var(--frame-width);
	}

	/* 巢狀在其他表格內的清單，比照第 3 節只留 2px 間隙 */
	table table#BrowseTable:has(> tbody > tr[class^="RawColor"]),
	table table.AsCards
	{
		min-width:			calc(100% - 2 * var(--nested-gap));
	}

	/* 欄位填滿可用寬度 ----------------------------------------------------
	   表格設成 display:block 之後，裡面的列會被包進一個匿名表格盒，
	   而那個盒子是 shrink-to-fit —— 只佔內容需要的寬度。畫面夠寬時
	   （例如 6 欄的清單只需 348px），右側就會露出一大片表格底色
	   （TableBorder 的格線灰，實測 1024px 下露出 574px、1280px 下 804px）。

	   匿名盒無法被選取，因此改讓 tbody 自己成為表格盒並撐滿 100%，
	   欄位就會依比例分配剩餘空間。內容比容器寬時仍然照常橫向捲動。 */
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) > tbody,
	table.AsCards > tbody
	{
		display:			table;
		min-width:			100%;
	}

	/* ⚠ 這裡的 id 要包在 :where() 裡，特異度必須壓低 --------------------
	   本節其他規則用 table#BrowseTable:has(…) 是為了「JS 沒跑時也要有捲動
	   容器」，那些設定的是 display / min-width，沒有人需要覆寫它們。

	   但 white-space 是會被覆寫的 —— 下游至少有兩處要蓋掉這裡的 nowrap:
	     .LcLong（長文字欄改折行）              html[…="table"] … td.LcLong
	     卡片模式的儲存格                        html[…="card"] … tr.LcCard > td

	   選擇器清單裡每一支各自計算特異度，儲存格若兩支都命中，生效的是高的
	   那一支。帶 id 的 table#BrowseTable:has(…) td 是 (1,2,2)，上面兩條
	   分別只有 (0,3,3) 與 (0,4,4) —— **兩條都從來沒有蓋成功過**。
	   症狀是 Prompt/Default 的「提示內容」（56 / 63 字的法規說明）在列表
	   與卡片模式都不折行，只能左右捲（使用者截圖兩次）。

	   ⚠ 為什麼別的頁面看起來正常: 帶 id 的那一支要求資料列是 RawColorN。
	     資料列全是 RawYellow / RawGray 的 4 支（Barthel/Default、
	     Calendar/ViewEvent、News/Default、Contact/Default）不命中它，
	     折行一直是好的 —— 這個洞因此拖了很久才被看見。

	   :where() 的特異度是 0，所以這一支從 (1,2,2) 降為 (0,1,3)，
	   比 table.AsCards td 的 (0,1,2) 只高一點，下游兩條都蓋得掉。
	   命中的元素完全不變，只有優先權變了。 */
	table:where(#BrowseTable):has(> tbody > tr[class^="RawColor"]) td,
	table.AsCards td
	{
		white-space:		var(--list-wrap);
	}

	/* 特別長的文字欄改為折行 ------------------------------------------
	   nowrap 的用意是「每筆一行、超寬時橫向捲動」，欄位短的時候很好用;
	   但 Prompt/Default 的「提示內容」是整句法規說明（50~60 字），
	   一列兩欄就把表格撐到數千 px（使用者截圖: 1500px 畫面仍要橫向捲動）。

	   CSS 看不到內容長度，所以由 ListCards.js 在標記欄名時一併判斷 ——
	   超過 40 字的儲存格加上 .LcLong。短欄位完全不受影響。

	   只在表格模式套用: 卡片模式的儲存格本來就是 normal。

	   ⚠ 不要再加 max-width。試過 max-width:30em，長欄確實會折行，但欄寬被鎖死之後
	      整張表格也撐不開了 —— 1500px 畫面下表格只有 836px，右側露出一大片底色
	      （那正是第 5.5 節 tbody:min-width:100% 當初要解決的問題）。
	      只要 white-space 是 normal，table-layout:auto 就會在容器放不下時
	      自己把欄位壓縮、讓文字折行，不需要指定上限。

	   ⚠ 這條 (0,3,3) 能生效的前提，是上面那條的 id 已經包在 :where() 裡
	      （見該處註解）。若把 :where() 拿掉，那一支會變成 (1,2,2)，
	      這裡就再也蓋不掉了。 */
	html[data-listmode="table"] table.AsCards td.LcLong
	{
		white-space:		normal;
	}

	/* 儲存格裡的巢狀表格撐滿可用寬度 --------------------------------------
	   Choose/Default.aspx 的「資訊」欄是 code-behind 另外建一張 Table 塞進
	   儲存格的（Choose/Default.aspx.cs:120），而那張表沒有設定 Width，
	   所以會照內容縮成一團 —— 實測資訊欄 811px、表格只佔 652px，右側空了
	   159px，標籤欄也跟著被壓窄。

	   第 3 節的巢狀表格規則要求元素本身帶寬度才會接管，這張表沒有，
	   因此在這裡補上。撐滿之後標籤欄由 85px 變成 105px。 */
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) td > table,
	table.AsCards td > table
	{
		width:				100%;
	}

	/* 第一欄固定 —— 橫向捲動時仍看得出正在看哪一筆資料。
	   固定欄必須有不透明底色，否則捲過去的內容會從底下透出來。 */
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) > tbody > tr > td:first-child
	{
		position:			sticky;
		left:				0;
		z-index:			1;
		background-color:	var(--bg-surface);
	}

	/* 有 RawColorN 的資料列改為繼承該列的分色 */
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) > tbody > tr[class] > td:first-child
	{
		background-color:	inherit;
	}

	/* 標題列 ---------------------------------------------------------------
	   code-behind 產生標題列時不套 CssClass（Search/View.aspx.cs 只做
	   BrowseCell.Text = Rd.GetName(i)），所以整列沒有底色，原本是靠透出
	   表格的格線灰來呈現。但上面的固定欄規則會給第一欄一個不透明底色，
	   結果變成「第一欄有顏色、其餘欄位灰色」。

	   這裡明確給整個標題列上底色，讓它成為完整的一條表頭，
	   同時與兩種資料列分色都能區隔。 */
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) > tbody > tr:not([class]) > td
	{
		background-color:	var(--bg-label);
		font-weight:		bold;
	}

	/* 「快速換頁：」與其下拉選單之間不留距離 --------------------------------
	   全站 51 支清單頁的結構都是把標籤與下拉拆在相鄰的兩個儲存格:

	     <td width="10%">快速換頁：</td>
	     <td width="16%"><asp:Label ID="jsSelectPage" /></td>   <- Page.js 寫入 select

	   兩者之間因此夾著「右內距 3px + 儲存格間隙 1px + 左內距 3px」，
	   實測 6px。把標籤格收縮到文字寬並去掉相鄰側的內距即可貼齊。

	   用 :has(+ td …) 由「下一個儲存格裡有 name=Page 的下拉」反查標籤格 ——
	   CSS 沒有前一個兄弟選擇器，這是唯一不必改 51 支 .aspx 的做法。
	   ---------------------------------------------------------------------- */
	td:has(+ td select[name="Page"])
	{
		width:				1%;			/* 表格版面下等同收縮到內容寬 */
		white-space:		nowrap;
		padding-right:		0;
	}

	td:has(select[name="Page"])
	{
		padding-left:		0;
	}

	/* ----------------------------------------------------------------------
	   清單頁的工具列: 切換列與篩選列
	   ----------------------------------------------------------------------
	   清單頁上方常有兩種橫向工具列，欄位多了就會在窄螢幕把整頁撐開:
	     切換列 —— 「切換到：立即／今天／明天／…」，全站 18 支頁面
	     篩選列 —— 起訖日期／人員／類別 等下拉，全站 34 列

	   把儲存格改成 inline-block 讓它們自然換行即可。

	   兩道限制缺一不可（先前少了這兩道，在桌機造成明顯破壞）:

	   (1) 只在窄螢幕套用。這是為了解決 390px 的溢出，桌機本來就排得下 ——
	       在桌機把儲存格改成 inline-block，反而會讓原本同一列的搜尋選項、
	       頁籤逐一換行（Apply/Default、Calendar/Default、Chase/Default、
	       Trace/Statistics 都因此跑版）。

	   (2) 切換列要整張表一起改，不能只改儲存格。只把 <td> 改成 inline-block
	       時，同一列的儲存格會被併進「一個」匿名儲存格，而那個匿名儲存格
	       仍然落在表格的第一欄 —— Trace/Statistics 的第二列是
	       <td width="13%">功能選項：</td>，第一欄因此只有約 50px，
	       十個頁籤就各佔一行、右側整片留白（實測 390px 與 768px 都是 10 行）。
	       把整張表改成 block 流排，儲存格就不再受欄寬約束
	       （實測 768px 收成 1 行、390px 收成 3 行）。

	   (3) 切換列的辨識: 同一列有兩個以上的 td.RawYellow，且整張表不含
	       RawColorN 資料列。後面這道條件是必要的 —— Upload/Default 的
	       「上傳成功／失敗檔案名稱」也是一列兩個 RawYellow，但它是資料表的
	       欄位標題，底下接著 RawColorN 資料列，改成流排會跑版。
	       另外排除 #BrowseTable 底下的表格: Choose/Default 清單裡的資訊表格
	       一列有三個 RawYellow，但那是版面表格不是切換列。
	       單列只有一個 RawYellow 的（Detail/Customer、Detail/Worker、
	       Search/Expense …）本來就不會命中。
	   ---------------------------------------------------------------------- */
	/* 筆劃數列 -----------------------------------------------------------
	   Browse/Expense/Form/FormPrint/New/SelectClass 五支頁面的
	   <asp:Table ID="sccTable">，是「筆劃數：01-03 04-05 …」的快速篩選列，
	   性質與切換列相同，因此比照處理。

	   與切換列的差別: RawYellow 掛在 <tr> 上而不是各個 <td>，所以上面那組
	   選擇器對不到，必須另外用 id 指名。列本身的淡黃底也要清掉，
	   否則籤片會浮在一條黃色帶子上。

	   標籤格（筆劃數：）不做成籤片 —— 用「有沒有 <a>」區分，
	   與切換列判斷可點與否的方式一致。 */
	/* 表格與列的底色都要清掉 —— sccTable 帶 class="TableBorder"，那是
	   var(--line-grid) 的灰底，會從 cellspacing 的 1px 間隙透出來，
	   看起來像一個框住的盒子而不是浮動的籤片（切換列的表格沒有 class）。 */
	table#sccTable,
	table#sccTable > tbody > tr
	{
		background-color:	transparent;
	}

	table#sccTable > tbody > tr > td:has(> a)
	{
		padding:			4px;		/* 對齊切換列（cellpadding 屬性是 3） */
		background-color:	var(--tab-bg);
		border:				1px solid var(--tab-border);
		border-radius:		var(--ctl-radius);
		transition:			background-color .15s ease, color .15s ease;
	}

	table#sccTable > tbody > tr > td > a
	{
		display:			block;
		color:				var(--tab-text);
		text-decoration:	none;
	}

	table#sccTable > tbody > tr > td:has(> a):hover
	{
		background-color:	var(--tab-bg-hover);
	}

	table#sccTable > tbody > tr > td:has(> a):hover > a
	{
		color:				var(--tab-text-hover);
		text-decoration:	none;
	}

	/* 目前所選的筆劃數區間 —— code-behind 已經把 CssClass="RawGray" 掛在那一格上
	   （Browse/Expense/Form/FormPrint/New 五支各 8 處），所以選取狀態本來就在 HTML 裡；
	   之前看不出來，是因為上面那條 td:has(> a) 的底色把它蓋掉了（帶 id，權重壓過
	   Table.css 的 .RawGray）。這裡把它撿回來，配色沿用切換列的 active 狀態。

	   ⚠ 連 :hover 一起指定 —— 否則滑過目前所選的那一格會退回淺色，看起來像被取消選取。
	   ⚠ 權重要贏過 td:has(> a) 的 (1,0,5)：td.RawGray 是 (1,1,4)，class 欄多 1 就贏，
	      不需要 !important。 */
	table#sccTable > tbody > tr > td.RawGray,
	table#sccTable > tbody > tr > td.RawGray:hover
	{
		background-color:	var(--tab-bg-active);
		border-color:		var(--tab-bg-active);
	}

	table#sccTable > tbody > tr > td.RawGray > a,
	table#sccTable > tbody > tr > td.RawGray:hover > a
	{
		color:				var(--tab-text-active);
	}


	/* 頁籤配色 ------------------------------------------------------------
	   狀態的判斷完全依賴算繪結果，不需要改任何 .aspx。
	   以下四種算繪都是實際跑 HyperLink.RenderControl() 量出來的，不是推測
	   （3.5 與 4.0 兩種 controlRenderingCompatibilityVersion 都驗過）:

	     <a href="…">                     -> 可點的頁籤（有設 NavigateUrl）
	     <font color="red|gray">          -> 目前所在，markup 寫死。10 支頁面
	     <a style="color:Red;">           -> 目前所在，code-behind 設 ForeColor
	                                         而沒設 NavigateUrl。只有
	                                         Template/OfficeView 的兩處
	     <a disabled="disabled">          -> Enabled=false（4.0 算繪是
	     <a class="aspNetDisabled">          class="aspNetDisabled"）

	   ⚠ Enabled=false 會連 href 一起吃掉，所以「目前所在」與「無權限」
	     算繪後長得一模一樣，CSS 分不出來:
	       Trace/Default 用 Enabled=false 表示「目前所在」（5 個 Method 頁籤）
	       其餘頁面用 Enabled=false 表示「沒有這項權限」
	     兩者都維持一般頁籤外觀 —— 下面那條「沒有權限」的規則因此其實
	     從來沒有命中過（它要求儲存格裡沒有 <a>，但停用的 HyperLink 仍是 <a>）。
	     要區分只能改 code-behind，故意不動。

	   <font> 的 color 屬性是表現性提示，優先權低於任何 CSS 規則，
	   所以那一種不必加 !important 就能蓋掉 gray / red；
	   ForeColor 那一種算繪成行內 style，只能用 !important 蓋。
	   -------------------------------------------------------------------- */
	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow
	{
		background-color:	var(--tab-bg);
		border:				1px solid var(--tab-border);
		border-radius:		var(--ctl-radius);
		font-weight:		normal;
		transition:			background-color .15s ease, color .15s ease;
	}

	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow a
	{
		display:			block;
		color:				var(--tab-text);
		text-decoration:	none;
	}

	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow:hover
	{
		background-color:	var(--tab-bg-hover);
	}

	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow:hover a
	{
		color:				var(--tab-text-hover);
		text-decoration:	none;
	}

	/* 目前所在的頁籤 —— 兩種算繪結果都要認
	   (1) :has(font[color])                markup 寫死的那 10 支
	   (2) 有 <a>、沒有 href、也沒有停用     code-behind 只設 ForeColor
	                                        （Template/OfficeView，Method=
	                                        Template 時是樣板套印、Method=
	                                        Procedure 時是程序作業）

	   (2) 的三道 :not() 缺一不可 ——「沒有 href」把可點的頁籤排除，
	   「沒有 disabled / aspNetDisabled」把停用的頁籤排除（見上方說明，
	   停用的 HyperLink 一樣是沒有 href 的 <a>，只差在多了那個屬性）。*/
	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow:has(font[color]),
	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow:has(> a:not([href]):not([disabled]):not(.aspNetDisabled))
	{
		background-color:	var(--tab-bg-active);
		border-color:		var(--tab-bg-active);
		font-weight:		bold;
	}

	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow:has(font[color]) font
	{
		color:				var(--tab-text-active);
	}

	/* ForeColor 算繪成 <a style="color:Red;">，行內樣式只能用 !important 蓋。
	   一併蓋掉上面 :hover 的 --tab-text-hover，讓目前所在的頁籤滑過時不變色。*/
	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow > a:not([href]):not([disabled]):not(.aspNetDisabled)
	{
		color:				var(--tab-text-active) !important;
		cursor:				default;
	}

	/* 沒有權限的頁籤（Enabled=false 的 asp:HyperLink）
	   ⚠ 這條目前不會命中，理由見本節開頭。留著是為了讓意圖留在檔案裡。*/
	table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow:not(:has(a)):not(:has(font[color]))
	{
		background-color:	var(--tab-bg-off);
		border-color:		var(--tab-bg-off);
		color:				var(--tab-text-off);
	}


	@media screen and (max-width: 860px)
	{
		/* 切換列: 整張表改成流排 */
		table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *),
		table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody,
		table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr,
		table#sccTable,
		table#sccTable > tbody,
		table#sccTable > tbody > tr
		{
			display:			block;
		}

		/* 改成 block 之後，第 2-5 節的 height 會變成「固定高度」而不是最小值 ——
		   頁籤排到第二行時內容就會溢出、壓到下方的清單（實測 480px 下溢出
		   57px）。這裡改回 min-height。 */
		table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr,
		table#sccTable > tbody > tr
		{
			height:				auto;
			min-height:			var(--row-min-height);
		}

		/* ⚠ 第三條的 :not(.TableBorder) 是必要的 --------------------------
		   這一條是給「含 <select> 的排版表格」用的，讓下拉在窄螢幕能自己
		   換行。全站被它命中的排版表格**一張都沒有 class**（逐支掃過:
		   Apply/Default、Browse/Worker、Calendar/ViewEvent、News/Default、
		   Trace/Adequate …）; 帶 TableBorder 的則是格線資料表格。

		   Template/Expansion 的 CommandTable 是後者 —— code-behind 排出
		   「標題 / 內容 / 標題 / 內容」四欄，每列 <td> 直接放 DropDownList。
		   它是 asp:Table，一定會輸出 border="0"（見 CLAUDE.md 的算繪陷阱），
		   又沒有 LeftColor / RightColor，三道條件全中: 整列儲存格變成
		   inline-block，依匿名表格盒規則併進第 0 欄（欄寬被標題列釘成
		   120px），標題與下拉就疊成一直行、右半邊露出大片底色（使用者截圖）。

		   同樣形狀的還有 Apply/ViewFrm 的 tableEx、Calendar/CareFrm 與
		   Customized/Default / Document/View 的 BrowseTable / OptionContent、
		   Change/MultiFastFrm 的 tableEx —— 全部都是 TableBorder，一起排除。

		   ⚠ Login/SelectFrm 的表格也帶 TableBorder，但 Login/ 27 支不載入
		     Base.css，不受影響。 */
		table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td,
		table#sccTable > tbody > tr > td,
		table[border]:not(.TableBorder):not(:has(td.LeftColor)):not(:has(td.RightColor)) tr:has(> td > select) > td:not(:has(table))
		{
			display:			inline-block;
			vertical-align:		middle;

			/* width:auto 不能省 —— 這些儲存格帶著 width="22%" 之類的百分比，
			   改成 inline-block 之後百分比會算出比內容還小的寬度
			   （Calendar/ViewEvent.aspx 的送出鈕: 儲存格 85px、按鈕 90px），
			   內容就從儲存格右緣溢出。改由內容決定寬度即可。 */
			width:				auto;
		}
	}
}


/* ==========================================================================
   6. 響應式斷點
   --------------------------------------------------------------------------
   Phase 0 只做「不破版、可縮放」; 表格轉卡片 / 標籤堆疊留到 Phase 2、3。
   ========================================================================== */

/* 手機 */
/* 斷點取 860px 而非常見的 767px --------------------------------------------
   基礎字級提高到 15px 之後，4–6 欄的密集表單需要約 860px 才排得下
   （實測 New/RecruitFrm、New/FactoryFrm、New/CustomerFrm、Apply/ViewFrm
   在內頁寬 768–850px 會溢出 777–842px）。

   而外框的側欄佔 210px，所以內頁寬 768–850 對應的是螢幕約 990–1075px。
   在那個區間把 6 欄表單硬擠進去，就算不溢出也已經很難讀 —— 堆疊才是
   正確的呈現方式，因此把斷點往上移到 860px，直接消除這個區間。

   13px 時整個區間都不會溢出，所以 Phase 2 當初取 767px 是合理的;
   是字級調整之後才需要跟著移動。 */
@media screen and (max-width: 860px)
{

	/* iOS Safari 在 input 字級 < 16px 時會自動放大整頁，
	   放大後版面會偏移且不會還原，因此手機上強制 16px。
	   需要 !important 才能蓋掉 .Dotted / .Dotted-Line 等舊 class 的 9pt。

	   ⚠ 只排除按鈕型的 <input>。iOS 只有在「可輸入文字的欄位」取得焦點時才縮放，
	      submit/button/reset 根本不會觸發，卻會被這條 !important 一併蓋掉 ——
	      Shell.css 用 font-size:0 隱藏登出鈕的 value（<input> 不能放子元素，
	      只能這樣藏），就是被這裡蓋回 16px，害圖示與「登出」兩字疊在一起。 */
	input:not([type="submit"]):not([type="button"]):not([type="reset"]),
	select, textarea
	{
		font-size:		16px !important;
	}

	/* 寬表格改為容器內橫向捲動，而非撐破整頁（供 Phase 3 使用） */
	.ScrollX
	{
		overflow-x:		auto;
		-webkit-overflow-scrolling: touch;
	}

	body
	{
		-webkit-text-size-adjust: 100%;
	}


	/* ----------------------------------------------------------------------
	   Phase 2: 表單 / 明細頁的標籤與欄位堆疊
	   ----------------------------------------------------------------------
	   全站表單一律是這個結構（1455 個標籤欄位，散在 108 支頁面）:

	     <tr>
	       <td width="14%" class="LeftColor"  align="center">中文姓名：</td>
	       <td width="20%" class="RightColor">欄位</td>
	       <td width="13%" class="LeftColor"  align="center">英文姓名：</td>
	       <td width="53%" class="RightColor" colspan="3">欄位</td>
	     </tr>

	   把這兩個 class 的儲存格改成 display:block 之後，瀏覽器會依 CSS 匿名
	   表格盒規則，把同一列裡連續的非儲存格子元素包進「一個」匿名 table-cell，
	   於是整列自然變成由上而下堆疊，且全部等寬對齊。

	   這麼做的好處是 <table> 與 <tr> 都不必動，因此:
	     - 不需要修改 108 支 .aspx
	     - 不需要 :has()（避開舊瀏覽器支援問題）
	     - 由 code-behind 動態指定 LeftColor/RightColor 的儲存格同樣適用

	   區段標題列（bgcolor="Yellow" 那種 colspan 整列）不帶這兩個 class，
	   維持正常的表格儲存格，因此仍是完整一列的標題。
	   ---------------------------------------------------------------------- */
	td.LeftColor,
	td.RightColor
	{
		display:		block;
		width:			100% !important;
	}

	/* 原本標籤是 align="center"，滿版之後置中會與欄位對不齊 */
	td.LeftColor
	{
		text-align:		left !important;
		font-weight:	bold;
		border-width:	1px 1px 0 1px;
	}

	/* 讓「標籤 + 欄位」在視覺上成為一組 */
	td.RightColor
	{
		border-width:	0 1px 1px 1px;
		margin-bottom:	6px;
	}

	/* 那 6px 間隙要有顏色 ------------------------------------------------
	   margin 是畫在匿名表格儲存格「裡面」的，背後依序是列 → 表格。
	   全站表單都掛 class="TableBorder"，表格底色就是格線灰 --line-grid，
	   所以每個欄位下方會露出一條灰帶（使用者截圖，實測 6px）。

	   讓「列」自己畫底色即可 —— 列的背景會蓋在匿名儲存格後面，
	   但**不會**蓋到 cellspacing 的 1px 縫（那一層是表格畫的），
	   所以區段標題那類仍是 table-cell 的列，格線依舊保留。

	   :not([class]) 是必要的: 排除 tr.LeftColor（表單的第二種型態）與
	   RawColorN / RawYellow / RawGray 這些本來就有指定底色的列。 */
	tr:not([class]):has(> td.LeftColor),
	tr:not([class]):has(> td.RightColor)
	{
		background-color:	var(--bg-page);
	}

	/* ⚠ 例外: 獨佔一列的儲存格
	   ------------------------------------------------------------------
	   分組標題、說明列、按鈕列這類「一整列只有一格」的儲存格，也可能掛著
	   LeftColor/RightColor（由 code-behind 指定，全站 23 處）。

	   它們變成 block 之後，依匿名表格盒規則會被包進一個匿名儲存格、落在
	   第 0 欄 —— 於是原本橫跨整列的橫幅縮成第一欄的寬度。
	   Barthel/Default 的「一、進食」「二、移位」分組列就是這樣（ColumnSpan=3
	   卻只有第一欄那麼寬）。

	   `:only-child` 是關鍵，不能改用 [colspan] —— 全站有 374 個帶 colspan 的
	   RightColor 儲存格，絕大多數是「跨 3 欄的表單欄位」，那些該照常堆疊。
	   獨佔一列的儲存格則本來就是滿版，堆疊沒有任何意義。 */
	/* ⚠ 表單表格裡「沒有 class 的多格列」也要一起堆疊
	   ------------------------------------------------------------------
	   FormPrint/Default 的第一列是
	     <td colspan="3">預辦事項報表套印</td><td>分公司下拉</td>
	   兩格都沒有 class，維持 table-cell 之後把第 3 欄釘在 128px。
	   下面「套印類別 / 套印年月」那兩列的 block 儲存格併進第 0 欄，
	   只拿得到 334px（表格 465px），右邊露出一段灰底（使用者截圖）。

	   讓這種列也堆疊，整張表就只剩第 0 欄有內容，欄寬自然統一。

	   ⚠ 條件是「這一列沒有任何帶 class 的儲存格」且「不只一格」——
	      單格的區段標題由下面的 :only-child 那條處理（維持 table-cell，
	      本來就橫跨整列）; 帶 class 的則是正常的標籤／欄位列。

	   ⚠ 例外: 表單第二型態（標題列在上、欄位列在下）整張表都不堆疊
	      ------------------------------------------------------------
	      Apply/ViewFrm 的送件日期 / 領件日期 … 六欄，標題與欄位分屬
	      兩列、靠欄位位置對應。第 6 節結尾那條
	      table:has(> tbody > tr.LeftColor) 已經決定「這種表格改成自己
	      橫向捲動、不堆疊」，但那條管的是表格、這條管的是儲存格 ——
	      標題列與欄位列的儲存格都沒有 class，同一張表又有一列放送出鈕
	      的 td.RightColor，於是被上面的條件命中: 六個標題連成一串、
	      六個欄位再連成一串，對應關係整個消失（使用者截圖）。
	      橫向捲動那條規則因此從來沒有真正生效過。

	      只排除那兩列還不夠 —— 勾選框那一列（tr.RawColor3）也沒有
	      class，堆疊後會被匿名表格盒併進第 0 欄，而第 0 欄的寬度已被
	      上面兩列釘成 1/6（實測 84.9px），「自動計算送件人數」會折行，
	      右邊還露出一大片底色。所以整張表一起排除。

	      ⚠ tr.LeftColor 在全站有兩種意思，另一種是清單頁的換頁列
	        （Prompt/Default、Link/Default … 11 支）。逐支掃過，那 11 支
	        沒有任何「多格且每一格都沒有 class」的列，所以這道 :not()
	        對它們是空操作。

	   ⚠ 例外 2: 清單表格不走這一節
	      ------------------------------------------------------------
	      清單另有第 5.5 節（橫向捲動）與第 10 節（卡片化）處理，本來就
	      不該進表單堆疊。但有 4 支清單頁的 code-behind 拿 RightColor /
	      LeftColor 當**分組橫幅的底色**用，例如 Barthel/Default:

	        BrowseCell.CssClass   = "RightColor";   // 「一、進食」
	        BrowseCell.ColumnSpan = 3;

	      整張表因此符合 table:has(… td.RightColor)。資料列被
	      ListCards.js 標上 td.LcAct / td.LcLong 而躲過 :not(:has(> td[class]))，
	      **只有標題列的三個儲存格完全沒有 class** —— 於是列表模式下
	      「診斷項目 / 分數 / 權限」堆成一直行，右邊露出一塊灰底
	      （使用者截圖）。同樣情形的還有 Calendar/ViewEvent（日期橫幅）、
	      Detail/CustomerItem、Template/OfficeView。

	      ⚠ 用 :not(:where(...)) 而不是 :not(#BrowseTable) —— :where() 的
	        特異度是 0，直接寫 id 會讓這條規則跳到 (2,4,4)，反而蓋掉第 6 節
	        那條 select 規則（約 (0,5,4)）。見 CLAUDE.md 陷阱第 3 條。
	      ------------------------------------------------------------ */
	table:has(> tbody > tr > td.LeftColor):not(:has(> tbody > tr.LeftColor)):not(:where(#BrowseTable, #HandleTable)) > tbody > tr:not(:has(> td[class])):has(> td + td) > td,
	table:has(> tbody > tr > td.RightColor):not(:has(> tbody > tr.LeftColor)):not(:where(#BrowseTable, #HandleTable)) > tbody > tr:not(:has(> td[class])):has(> td + td) > td
	{
		display:		block;
		width:			100% !important;
	}

	tr > td.LeftColor:only-child,
	tr > td.RightColor:only-child
	{
		display:		table-cell;
		width:			auto !important;
		margin-bottom:	0;
		border-width:	1px;
	}

	/* ⚠ 例外: 勾選格線表 —— 不是表單，也不是清單
	   ------------------------------------------------------------------
	   全站有 17 支頁面用「每 N 筆換一列」的迴圈排出勾選格線，
	   asp:Table 固定 720px、欄位一多就縮不下去，窄螢幕會逐字換行。
	   兩種形狀:

	   (A) 成對式: 勾選框自成一格，名稱在下一格。5 支，都有 <th> 標題列。
	       Setup/SetFormField（10 欄）、Setup/SetSearchFields（10 欄）、
	       Template/SetCustomerUse、Template/OfficeView、Procedure/OptionFrm

	   (B) 同格式: 勾選框與文字在同一格。12 支，都沒有 <th>。
	       Search/Default、News/NewsFrm、Form/Default、Limit/LimitFrm …

	   靠什麼辨識:
	     第 1 格與第 3 格「都」直接放著勾選框。這一條把資料清單排除掉 ——
	     Trace/Default 的 HandleTable 勾選框在第 1、2 格，第 3 格是客戶名稱;
	     Customized/Default 的 OptionContent 第 1 格是「請輸入…：」標籤。
	     兩者都不會誤中。

	   ⚠ 一定要排除 #BrowseTable。Link/Default 的清單正好是「選擇 / 連結內容」成對，
	      第 1、3 格都放 radio，會被上面的條件命中 —— 「連結內容」那兩格因為沒有
	      radio 就被 display:none 藏掉，整頁內容消失（使用者截圖）。
	      清單頁一律交給第 5.5 節與卡片模式處理，不走這一節。

	   ⚠ 三條 :has() 是串接不是巢狀（合法）。:not(:has()) 也合法。

	   為什麼整張表都要改成 block:
	     只把 <td> 改成 inline-block 的話，依匿名表格盒規則它們會全部併進
	     「一個」匿名儲存格、落在第 0 欄 —— 而第 0 欄往往只有 20px。
	     （Template/SetCustomerUse 就是這樣變成一行一個字的。） */
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])),
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody,
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr,
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])),
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody,
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr
	{
		display:		block;
		width:			100% !important;
	}

	/* block 之後 height 是固定值，見 CLAUDE.md 陷阱第 1 條 */
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr,
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr
	{
		height:			auto;
		min-height:		var(--row-min-height);
	}

	/* 整列隱藏 —— 兩種情況都只是空白:
	     (1) 標題列: 堆疊之後只是「選 / 欄位名稱」重複五次，沒有意義。
	         只把 <th> 設成 none 不夠，那一列本身還帶著 min-height，
	         會在清單最上方留下一條 40px 的空白帶（使用者截圖）。
	     (2) 整列都是填充格: code-behind 用「補滿剩餘 Cell」的迴圈把最後一列
	         塞滿 &nbsp;，桌機看不出來，堆疊之後就變成幾列空的勾選框。

	   兩者的共同特徵是「這一列沒有任何勾選框」。
	   :not(:has()) 合法（:has(:has()) 才不合法）。 */
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr:not(:has(> td > :is(input[type="checkbox"], input[type="radio"]))),
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr:not(:has(> td > :is(input[type="checkbox"], input[type="radio"])))
	{
		display:		none;
	}

	/* 儲存格預設隱藏，只放行「勾選格」與 (A) 的「名稱格」。
	   這樣一列裡混雜的填充格（&nbsp;）也會一併消失，不必判斷內容 ——
	   CSS 看不到「這一格只有一個空白字元」。 */
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td,
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td
	{
		display:		none;
	}

	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td:has(> :is(input[type="checkbox"], input[type="radio"])),
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td:has(> :is(input[type="checkbox"], input[type="radio"])) + td,
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td:has(> :is(input[type="checkbox"], input[type="radio"]))
	{
		display:		inline-block;
		width:			auto !important;
		vertical-align:	top;
		text-align:		left !important;
		margin-bottom:	0;
	}

	/* (A) 成對式: 勾選格縮到內容寬，名稱格吃掉整行剩下的空間 */
	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td:has(> :is(input[type="checkbox"], input[type="radio"]))
	{
		text-align:		center !important;
		border-width:	1px 0 1px 1px;
	}

	table:not(#BrowseTable):has(> tbody > tr > th):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td:has(> :is(input[type="checkbox"], input[type="radio"])) + td
	{
		width:			calc(100% - 3.5em) !important;
		border-width:	1px 1px 1px 0;
	}

	/* (B) 同格式: 每格就是一個選項，讓它們自然換行即可。
	   不設 nowrap —— 單一選項文字若比視窗還長，nowrap 會直接溢出。 */
	table:not(#BrowseTable):not(:has(> tbody > tr > th)):has(> tbody > tr > td:nth-child(1) > :is(input[type="checkbox"], input[type="radio"])):has(> tbody > tr > td:nth-child(3) > :is(input[type="checkbox"], input[type="radio"])) > tbody > tr > td
	{
		padding-right:	10px;
	}

	/* 欄位寬度來自 Columns="20" / size="104" 這類字元數。在表格版面下，
	   這個「最小內容寬度」會把整個表格撐得比視窗還寬（Careers/CareersFrm.aspx
	   就有 size="104" 的欄位），因此一律改為填滿所在儲存格。

	   ⚠ 為什麼是 width:0 + min-width:100% 而不是直覺的 width:100% + min-width:0
	      —— 後者對 <textarea> 沒有用。表格的最小內容寬會把 cols 的內建寬度算進去，
	      即使已經寫了 width:100%; min-width:0 也一樣（實測 Chrome）:
	      Question/QuestionFrm 的 Columns="78" 在 390px 下把表格撐到 590px、整頁橫向捲動。

	      width:0 讓這一格的最小內容寬變成 0，表格因此可以縮到容器寬;
	      欄寬定案之後 min-width:100% 再把欄位撐回填滿。實測 390px 下
	      表格 370px、textarea 360px。

	      另外試過 table-layout:fixed，表格確實縮得下去，但 textarea 只剩 83px
	      —— 欄寬改由第一列決定，跟內容脫鉤，不適用。 */
	td input[type="text"],
	td input[type="password"],
	td textarea
	{
		width:			0;
		min-width:		100%;
	}

	/* ⚠ 例外: 日期選取器的欄位不要拉滿 ------------------------------------
	   AjaxControlToolkit 的 CalendarExtender 一律是「TextBox + ImageButton
	   （日曆圖示）」成對放在同一格，由 PopupButtonID 綁在一起。欄位拉滿
	   之後圖示被擠到下一行，看起來像兩個空白框加兩顆孤立的圖示
	   （使用者截圖: Careers/CareersFrm 的「僱用期限」）。

	   日期本來就是固定長度（Format="yyyy/MM/dd"，10 個字），
	   markup 也已經給了 Columns="10"，維持原寬即可。

	   辨識方式: 同一格裡有 input[type="image"]。全站只有 4 支頁面用到
	   asp:ImageButton —— 3 支就是日期選取器（Careers/CareersFrm、
	   New/CalculateInTW、Template/Expansion 由 code-behind 動態產生），
	   第 4 支是 Default.aspx 的待辦事項關閉鈕，它獨佔一格、同格沒有文字欄，
	   不會被這條命中。

	   ⚠ 用 ~ 而不是 + —— Template/Expansion 在兩者之間還插了一個
	     <asp:Label>（算繪成 <span>&nbsp;</span>），相鄰選擇器對不上。

	   ⚠ 不能改用執行期的 .ajax__calendar 容器來辨識 —— 那個容器是
	     CalendarBehavior.js 的 _ensureCalendar() 在**第一次開啟日曆時**
	     才建立的（讀 DLL 內嵌的 debug js 確認過），載入當下並不存在。 */
	td input[type="text"]:has(~ input[type="image"])
	{
		width:			auto;
		min-width:		0;
	}

	/* 欄位與圖示不要被拆到兩行 --------------------------------------------
	   光是還原寬度還不夠: Careers/CareersFrm 的日期欄在一張巢狀版面表格裡
	   （<td width="110">），而 ≤860px 的欄位字級被拉到 16px（iOS 防縮放），
	   size="10" 算出來是 119px —— 比 markup 假設的 110px 還寬。
	   儲存格的「最小內容寬」因此取 119px（允許在欄位與圖示之間斷行），
	   圖示就掉到下一行。

	   nowrap 讓最小內容寬變成 119 + 16 = 135px，兩者永遠同一行。
	   實測 768 / 600 / 390px 三個寬度，四個日期欄全部同行，
	   巢狀表格也沒有撐破容器（390px 下仍無橫向捲動）。 */
	td:has(> input[type="text"] ~ input[type="image"])
	{
		white-space:	nowrap;
	}

	/* 第 5 節有一組例外: 同一格裡前面已經有其他控制項時，欄位維持原寬，
	   免得填滿之後把後面的控制項推到下一行。那是「同一行並排」的考量 ——
	   窄螢幕下儲存格本來就已經堆疊成上下排列，例外失去意義，
	   而它的 width:auto 會把 cols / size 的內建寬度放回來，表格又被撐破
	   （實測「勾選框 + cols=75 的 textarea」同格時，390px 下表格 590px）。

	   :is() 的特異度取最具體的參數，這條算出來是 (0,3,3)，
	   高於例外那組的 (0,2,3)，因此能蓋過去。 */
	td.RightColor > :is(span, label, a, select, input) ~ :is(input[type="text"], input[type="password"], textarea)
	{
		width:			0;
		min-width:		100%;
	}

	/* 一格裡有兩個以上文字欄時，短欄位維持原寬 ----------------------------
	   New/CustomerFrm 的「客戶地址」一格裡放了三個欄位:
	     郵遞區號 Columns="8"、中文地址 Columns="90"、英文地址 Columns="90"
	   三個都拉成滿版之後，郵遞區號會變得跟螢幕一樣寬，看起來像三個同樣的欄位
	   （使用者回報「一個 td 內有兩個 textbox，textbox 不用延伸」）。

	   全站這種儲存格只有 12 個、分布在 8 支頁面（New/ 六支 + Search/Default），
	   裡面的 Columns 值分成兩群: 短的 6/8/10/14、長的 30/90/104。
	   只讓短的維持原寬，長的照樣填滿 —— 郵遞區號還是郵遞區號，地址仍然好打。

	   ⚠ 不要改成「全部 width:auto + max-width:100%」。試過，Columns="90" 的
	      原寬約 800px 會回來，而 max-width 的百分比在「寬度由內容決定」的
	      儲存格裡解析不出上限（循環參照），結果整格撐到 765px、頁面溢出。

	   ⚠ ~ 只看直接子代，但套用對象用後代選擇器 —— 第三個欄位包在
	      UpdatePanel 算繪出來的 <div> 裡，不是直接子代。 */
	td:has(> input[type="text"] ~ input[type="text"]) input[type="text"]:is([size="3"], [size="4"], [size="5"], [size="6"], [size="8"], [size="10"], [size="12"], [size="14"])
	{
		width:			auto;
		min-width:		0;
	}

	td select
	{
		max-width:		100%;
	}

	/* 5-2 的下拉箭號需要右側留白，但窄螢幕上多個並排的下拉會因此溢出
	   （Careers/CareersFrm.aspx 與 Seekers/SeekersFrm.aspx 一列並排 5 個
	   語言能力下拉，每個多 26px 就超出視窗），故在手機上收斂間距。 */
	select:not([multiple]):not([size])
	{
		padding-left:		6px;
		padding-right:		18px;
		background-position: right 5px center;
		background-size:	9px 7px;
	}

	/* 檔案上傳欄位的預設寬度很大且不會自行縮小（相片上傳格用得到） */
	td input[type="file"]
	{
		width:			100%;
		min-width:		0;
	}

	/* 儲存格內距從 4px 收到 3px。切換列那種一列十幾格的版面（例如
	   Trace/Statistics.aspx 的「切換到：立即／今天／明天…」）差這 1px
	   就決定會不會溢出。 */
	td.LeftColor, td.RightColor, td.MenuColor,
	td.RawColor0, td.RawColor1, td.RawColor2, td.RawColor3,
	td.RawGray, td.RawYellow
	{
		padding:		3px;
	}


	/* 除了 740/725/720/730 那組主框架寬度之外，表單頁裡還散落著
	   600 / 545 / 450 / 400 / 220 … 各種寫死的表格寬度
	   （Careers/CareersFrm.aspx 就有一個 width="450"）。
	   在手機上一律改為流動; 百分比寬度不受影響。

	   主框架那四個寬度必須明確排除 —— 本規則的特異性 (0,2,1) 高於第 3 節的
	   table[width]:not([width$="%"])，又帶 !important，不排除的話會把主框架
	   拉成 100%，--frame-width 的左右留白在窄螢幕就消失了。 */
	table[width]:not([width$="%"]):not([width="740"]):not([width="730"]):not([width="725"]):not([width="720"])
	{
		width:			100% !important;
		max-width:		100%;
	}

	/* <asp:Table Width="N"> 會被算繪成 inline style="width:Npx"，優先權高於
	   樣式表，因此需要 !important。全站 asp:Table 都沒有 Height 屬性，
	   inline style 裡的 px 必定是寬度。

	   只列出在 390px 下會溢出的尺寸; 18 / 20 / 40 / 50 / 80 / 90 / 100 / 120 /
	   124 / 125 這些小尺寸是版面間隔用的，強制拉滿反而會破版，故不納入。
	   （740 / 730 / 725 / 720 已在第 3 節統一處理。） */
	table[style*="width:180px"],
	table[style*="width:190px"],
	table[style*="width:218px"],
	table[style*="width:220px"],
	table[style*="width:240px"],
	table[style*="width:400px"],
	table[style*="width:500px"],
	table[style*="width:680px"],
	table[style*="width:700px"]
	{
		width:			100% !important;
		max-width:		100%;
	}

	/* ----------------------------------------------------------------------
	   RepeatDirection="Horizontal" 的選項清單（全站 105 處）
	   ----------------------------------------------------------------------
	   ASP.NET 會把它算繪成 <table><tr><td><input><label>…</tr></table>，
	   選項一多就超出視窗寬度。這裡改成可換行流排。

	   辨識方式有兩道:

	   (1) input 緊接著 label 這個相鄰組合 —— 清單頁裡用來勾選資料列的
	       checkbox 沒有相鄰的 <label>，因此不會被誤中。

	   (2) 排除帶 cellspacing / cellpadding 屬性的表格。這是關鍵的一道:
	       asp:CheckBox 在「沒有設 CssClass」時，ASP.NET 會直接算繪成
	       <input type="checkbox"><label>，不加外層 <span>。於是任何在
	       儲存格裡放了這種勾選框的「手寫表單表格」都會誤中上面第 (1) 條，
	       整張表格的儲存格被改成 inline-block，版面就垮了。

	       本專案所有手寫表格都帶 cellspacing / cellpadding 屬性，
	       而 ASP.NET 的 RadioButtonList / CheckBoxList 兩者都不會輸出，
	       因此這一道能乾淨地把兩者分開。

	   包在 @supports 內: 不支援 :has() 的瀏覽器維持原本行為，不會出錯。
	   （35 個此類控制項沒有 CssClass，無法改用 class 選取。）
	   ---------------------------------------------------------------------- */
	@supports selector(:has(*))
	{
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="radio"] + label),
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="checkbox"] + label)
		{
			display:		block;
			width:			100% !important;
		}

		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="radio"] + label) > tbody,
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="checkbox"] + label) > tbody,
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="radio"] + label) > tbody > tr,
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="checkbox"] + label) > tbody > tr
		{
			display:		block;
		}

		/* 同上: block 之後 height 是固定值，必須改用 min-height */
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="radio"] + label) > tbody > tr,
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="checkbox"] + label) > tbody > tr
		{
			height:			auto;
			min-height:		var(--row-min-height);
		}

		/* 不設 white-space:nowrap —— 單一選項文字若比視窗還長，nowrap 會直接溢出 */
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="radio"] + label) > tbody > tr > td,
		table:not([cellspacing]):not([cellpadding]):has(> tbody > tr > td > input[type="checkbox"] + label) > tbody > tr > td
		{
			display:		inline-block;
			padding-right:	10px;
			vertical-align:	top;
		}

		/* ------------------------------------------------------------------
		   表單的第二種型態: 標題列在上、欄位列在下（全站 14 支頁面，
		   以 <tr class="LeftColor"> 標示欄位列，例如 Apply/ViewFrm.aspx 的
		   送件日期 / 領件日期 / 發文日期 … 六欄輸入）

		   這種版面的標題與欄位是「靠欄位位置對應」的，分屬不同的 <tr>。
		   若比照上面堆疊，會變成六個標題連在一起、六個欄位連在一起，
		   對應關係整個消失 —— 比橫向捲動更難用。
		   因此改為讓表格在自己的框內橫向捲動，頁面本身不會被撐破。
		   ------------------------------------------------------------------ */
		table:has(> tbody > tr.LeftColor)
		{
			display:			block;
			max-width:			100%;
			overflow-x:			auto;
			-webkit-overflow-scrolling: touch;
		}
	}

	/* 照片欄位: 表單頁左側用 rowspan 併出來的相片格（全站 15 處，
	   都是 <asp:Label ID="Photo">），滿版時改為堆疊在欄位上方。 */
	td.RawColor1[rowspan],
	td.RawColor3[rowspan]
	{
		display:		block;
		width:			100% !important;
		text-align:		center;
	}
}


/* ==========================================================================
   7. 列印
   --------------------------------------------------------------------------
   套印 / 報表列印時回復固定寬度並取消底色，避免對位跑掉、耗費碳粉。
   ========================================================================== */
@media print
{
	/* 列印時取消左右留白，讓表格用滿紙張寬度 --------------------------
	   這裡刻意「不」把表格還原成原本的固定 px 寬度。原因有兩個:

	   1. 真正需要固定寬度做對位的是 Document/ 那 24 支套印頁，而它們
	      不載入 Base.css，本來就不受影響。
	   2. CSS 的 width 宣告優先權高於 width 屬性這種 presentational hint，
	      所以 `width:auto` 只會讓表格縮成內容寬度，並不會取回 740px。
	      要還原就得逐一列舉所有尺寸，既冗長又容易漏。

	   對後台頁面而言，列印時填滿紙張本來就比固定 740px 好。 */
	:root
	{
		--bg-page:		#FFFFFF;
		--bg-surface:	#FFFFFF;
		--text-main:	#000000;
		--frame-width:	100%;
	}

	/* 清單表格必須還原成一般表格 ------------------------------------------
	   第 5.5 節讓清單成為橫向捲動容器，那些規則不在 @media screen 內，
	   列印時仍會生效 —— 捲出視野的欄位會直接被裁掉（實測 15 欄的搜尋結果
	   會少印 491px 的欄位，等於資料印不全）。

	   這裡把它還原成一般表格，並讓儲存格恢復折行，才能在紙張寬度內排完。 */
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]),
	table.AsCards
	{
		display:			table;
		overflow-x:			visible;
		width:				100% !important;
		min-width:			0;
	}

	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) > tbody
	{
		display:			table-row-group;
		min-width:			0;
	}

	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) td
	{
		white-space:		normal;
	}

	/* 固定欄在紙上沒有意義，還原成一般儲存格 */
	table#BrowseTable:has(> tbody > tr[class^="RawColor"]) > tbody > tr > td:first-child
	{
		position:			static;
	}

	body
	{
		background:		#FFFFFF;
		color:			#000000;
	}

	.Button,
	.ButtonProc,
	input[type="submit"],
	input[type="button"]
	{
		display:		none;
	}
}


/* ==========================================================================
   8. 觸控裝置的可點範圍
   --------------------------------------------------------------------------
   用 pointer:coarse 而不是螢幕寬度作為條件 —— 判斷依據是「用手指點」而不是
   「螢幕小」，滑鼠使用者把視窗縮窄時版面不會莫名其妙變鬆。

   頁籤是手機上的主要導覽，實測連結本身只有 26px 高（儲存格較高，但可點的
   只有 <a> 那塊）。WCAG 2.5.8 的下限是 24x24，這裡拉到約 37px。
   ========================================================================== */
@media (pointer: coarse)
{
	@supports selector(:has(*))
	{
		table:has(> tbody > tr > td.RawYellow ~ td.RawYellow):not(:has(td[class^="RawColor"])):not(#BrowseTable *) > tbody > tr > td.RawYellow a
		{
			padding-top:	.35rem;
			padding-bottom:	.35rem;
		}
	}

	/* 儲存格裡單獨一個連結的（「新增檔案資訊」「回覆提問」「套印會議記錄
	   簽到冊」這類動作連結）—— 這些是獨立的操作項目，不是夾在句子裡的
	   內文連結，可以安全地撐成整塊。

	   實測 183 頁: 達到 24px 的由 113/144 變成 144/144，
	   只有 4 頁的高度變動，沒有新增任何橫向溢出。

	   夾在句子中的連結刻意不動 —— 加了上下內距會讓相鄰行的可點範圍重疊，
	   反而更難點。WCAG 2.5.8 對內文連結本來就有豁免。 */
	td > a:only-child
	{
		display:			block;
		padding-top:		.3rem;
		padding-bottom:		.3rem;
	}

	/* 只包著一張圖的連結（郵遞區號查詢那顆 15x15 的放大鏡等）——
	   原本只有 20x15，手指幾乎點不到。撐到 32px 已明顯超過 WCAG 的 24px
	   下限，又不像 44px 那樣影響版面。
	   實測 183 頁: 達 24px 由 0/5 變成 5/5，只有 3 頁高度各增加 7–13px。 */
	a:has(> img:only-child)
	{
		display:			inline-flex;
		align-items:		center;
		justify-content:	center;
		min-width:			32px;
		min-height:			32px;
		vertical-align:		middle;
	}
}


/* ==========================================================================
   9. 清單頁的查詢列與換頁列
   --------------------------------------------------------------------------
   清單上方那一列查詢條件，原本是 <td width="10%"> 放輸入欄、<td width="80%">
   放按鈕 —— 按鈕本身只有幾十 px，那 80% 幾乎全是空的，輸入欄卻被壓在 10%，
   在寬螢幕上只能打進兩三個字。

   靠什麼辨識這一列:
     同一「列」裡同時有 input.Button（搜尋鈕）與查詢欄（.Dotted / .Dotted-Line）。
     全站 16 個查詢列全部符合，欄位數 1~14 個。

   ⚠ 一定要鎖「列」不能鎖「表格」。原本寫成
      table:has(> tbody > tr > td > input.Button)…> tbody > tr > td，
      在單列的查詢表格沒問題; 但 Apply/Default 的查詢表格有兩列（第一列是
      「報表匯出：」兩顆匯出鈕），Apply/ViewFrm 更是 21 格的多列查詢表單，
      那樣寫會把不相干的列一起改掉。

   ⚠ 一定要排除表單列。New/CustomerFrm 的「客戶編號」那格同時有 .Dotted-Line 欄位
      與「檢查」按鈕，整列因此被當成查詢列，強制回到 table-cell + width:1%;
      同一張表其他列的 block 儲存格就縮到第 0 欄的 226px，整頁垮掉（使用者截圖）。
      查詢列的儲存格沒有 class，表單列一定掛 LeftColor / RightColor，
      用 :not(:has(> td.LeftColor)):not(:has(> td.RightColor)) 就能乾淨分開。

   ⚠ 也不能只認 .Dotted。16 個查詢列裡有 9 個用的是 .Dotted-Line
      （Apply/Default、News/Default、Calendar/ViewEvent …），
      使用者回報 Apply/Default 的日期欄沒有延伸就是因為當初漏了這一類。

   多個文字欄時會平分剩餘空間（各自 width:100%，表格版面自動分配）。

   ⚠ 三條 :has() 是「串接」不是「巢狀」，串接合法。
      （巢狀的 :has(:has()) 會讓整條規則被靜默丟棄，見 CLAUDE.md）
   ========================================================================== */
/* 標籤、下拉、按鈕、以及原本那個空的填充格（58%~91%）一律縮到內容寬。
   width:1% 在表格版面下等同「給我最小需要的寬度」。 */
tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)) > td
{
	width:				1%;
	white-space:		nowrap;
}

/* 只有文字欄那幾格保持 auto —— 剩餘空間只會分配給 auto 的欄，
   多個文字欄時依內容比例平分（實測兩個日期欄各拿一半）。 */
tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)) > td:has(> input[type="text"])
{
	width:				auto;
	white-space:		normal;
}

/* 整列都沒有文字欄時（Chase/Regular 是四個年月下拉），改讓含下拉的那格吃剩餘 ——
   否則每一格都是 width:1%，下拉群被壓到 195px、擠成三行（實測 1280px）。
   :not(:has()) 合法。 */
tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)):not(:has(> td input[type="text"])) > td:has(select)
{
	width:				auto;
	white-space:		normal;
}

/* 輸入欄填滿自己那一格。

   ⚠ 不要改成「文字欄那一格 width:100%」。有多個文字欄時（Apply/Default 兩個
      日期欄、Apply/ViewFrm 十四個），table-layout:auto 不會平分 —— 實測第一格
      吃掉 650px、第二格只剩 14px。讓儲存格保持 auto、由版面自動分配才會均勻。

   min-width 是下限，避免欄位一多時被壓到只剩幾十 px。 */
tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)) input[type="text"]
{
	width:				100%;
	min-width:			6em;
	box-sizing:			border-box;
}

/* 下拉不必滿版，但原本 size 太窄，給個下限比較好點選 */
tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)) select
{
	min-width:			7em;
}

/* 換頁列 --------------------------------------------------------------
   「目前瀏覽 … 快速換頁：[下拉]」那一列。
   下拉給固定寬度，剩下的空間全部留給左邊的資訊文字。

   辨識方式: 那一列裡直接有 <span id="jsSelectPage">（asp:Label 的算繪結果）。

   ⚠ 選擇器要鎖在「列」而不是「表格」。一開始寫成
      table:has(> tbody > tr > td > span#jsSelectPage) > tbody > tr > td，
      在 Browse/Worker 那種「換頁列自成一張小表格」的頁面沒問題;
      但有 15 支頁面的換頁列是外層版面表格的第一列，那樣寫會把同一張表格的
      清單格與按鈕格一起改成 inline-block —— 兩者縮成 229px / 184px，
      表格自己的灰底大片露出來（使用者截圖）。
   51 支清單頁都用這個 id，而且不套 MasterPage，所以 id 不會被加前綴。

   ⚠ 一開始讓下拉吃掉整列的剩餘寬度（比照查詢列），結果 1100px 下拉變成 831px、
      左邊「目前瀏覽 … 每頁 80 筆】」被擠到 87px 折成一團 —— 那一格隨處可斷行，
      min-content 很小，旁邊只要有 width:100% 的格子就會被壓到最小。
      現在反過來: 資訊格拿 100%，下拉固定寬。

   ⚠ 這一列刻意「不」加進下面 860px 的 table-cell 覆寫（查詢列有加）。
      查詢列只有三個短控制項，擠在一行剛好; 這一列的資訊文字很長，
      窄螢幕上讓第 6 節把它拆成多行反而好讀。 */
/* 欄寬只在 861px 以上生效。
   860px 以下第 6 節會把這一列的儲存格改成 inline-block 讓它自然換行，
   那時百分比寬度是以「容器」計算而不是表格欄 —— width:1% 會算出 3px 的盒子，
   兩顆切換鈕直接溢出到畫面外（實測 390px 下右緣跑到 408px，整頁出現橫向捲動）。
   窄螢幕交給第 6 節的換行即可，不需要指定欄寬。 */
@media screen and (min-width: 861px)
{
	tr:has(> td > span#jsSelectPage) > td:first-child
	{
		width:			100%;			/* 剩餘空間全給資訊文字 */
	}

	tr:has(> td > span#jsSelectPage) > td:has(> span#jsSelectPage),
	tr:has(> td > span#jsSelectPage) > td.LcModeCell
	{
		width:			1%;				/* 縮到內容寬 */
		white-space:	nowrap;
	}
}

/* 860px 以下改為流排。

   ⚠ 第 6 節有一條「含 <select> 的排版表格，儲存格改 inline-block」，看起來
      應該會涵蓋這一列，但它寫的是 tr:has(> td > select) —— 直接子代。
      換頁的下拉其實是 Script/Page.js 用 document.write 寫進
      <span id="jsSelectPage"> 裡的，結構是 td > span > select，對不上。
      也就是說這一列在窄螢幕一直都不換行，只是原本三格塞得下;
      加了 76px 的切換鈕那格才撐破（390px 下表格 409px、整頁橫向捲動）。

   儲存格改成 inline-block 讓四格自然換行即可。tr 維持 table-row，
   height 仍然是最小值，不會有 CLAUDE.md 記的「block 之後 height 變固定」問題。 */
@media screen and (max-width: 860px)
{
	tr:has(> td > span#jsSelectPage) > td
	{
		display:		inline-block;
		vertical-align:	middle;
		width:			auto;			/* 蓋掉 width="74%" 等提示 */
	}
}

/* 固定寬度，剛好容得下「目前第 01 頁」與箭頭。
   max-width 是給 320px 這種極窄畫面的保險 —— 固定寬若比容器還寬會撐破版面。 */
span#jsSelectPage select
{
	width:				10em;
	max-width:			100%;
	box-sizing:			border-box;
}

.LcModeCell
{
	white-space:		nowrap;
}

/* 860px 以下: 第 6 節有一條「含 <select> 的排版表格，儲存格改 inline-block」
   （line ~1107 那條 table[border]…tr:has(> td > select) > td）。查詢列剛好符合，
   儲存格會變成 inline-block + width:auto，上面設好的欄寬失效，三個控制項各自換行。
   這裡把它扳回 table-cell —— 欄寬已經由本節接管，不需要靠 inline-block 換行。

   查詢列在任何寬度都維持同一行（不堆疊）。曾經在 599px 以下改成三個控制項各自滿版，
   但那樣一列查詢就佔掉三行高度，把下面的清單推得很遠，反而不好用。 */
@media screen and (max-width: 860px)
{
	tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)) > td
	{
		display:		table-cell !important;
		vertical-align:	middle;

		/* 窄螢幕讓標籤可以折行 —— 欄位多的查詢列（Apply/Default 七格、
		   News/Default 六格）光是標籤 nowrap 就撐破 390px（實測溢出 7px）。 */
		white-space:	normal;

		/* ⚠ !important 是必要的。第 6 節那條「含 <select> 的排版表格，儲存格改
		   inline-block」的選擇器帶了兩個 :not(:has()) 與一個 :has()，特異度約
		   (0,4,4)，比本節的 (0,2,4) 高 —— 它的 width:auto 會把上面設好的欄寬
		   全部蓋掉，文字欄就縮回 size="10" 的 122px（實測 600px 畫面下）。
		   display 也一樣要 !important —— 少了它，儲存格會維持第 6 節的 inline-block，
		   上面的 1% / auto 就變成「相對於容器」而不是表格欄寬，欄位又縮回 122px。 */
		width:			1% !important;
	}

	tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)) > td:has(> input[type="text"])
	{
		width:			auto !important;
	}

	/* 輸入欄的下限在窄螢幕要放掉，否則整列縮不下去 */
	tr:not(:has(> td.LeftColor)):not(:has(> td.RightColor)):has(> td > input.Button):has(> td :is(.Dotted, .Dotted-Line)) input[type="text"]
	{
		min-width:		0;
	}

	/* 有標籤的查詢表格改為流排 ------------------------------------------
	   擠在一行時標籤會被壓成「起 訖 日 期：」一字一行（使用者截圖）:
	     Calendar/ViewEvent  8 格、News/Default 6 格、Apply/Default 5 格、
	     Template/OfficeView 只有 3 格但標籤是「全域搜尋樣板標題：」九個字，
	     390px 下折成五行、高 130px。**所以格數不是好的判斷依據。**

	   ⚠ 條件下在「表格」而不是「列」。原本用 tr:only-child 只讓單列的查詢表格
	      流排，Apply/Default 因此被排除 —— 它的查詢表格有兩列（第一列是
	      「報表匯出：」兩顆匯出鈕）。只讓第二列流排的話，第一列仍是 table-cell
	      並把欄寬釘住，表格被撐到 461px、390px 下整頁橫向捲動。
	      改成整張表一起流排，每一列各自成為一個匿名儲存格，欄寬就不再互相牽制。

	   四道條件缺一不可:
	     :not(#BrowseTable)                    清單另有第 5.5 節處理
	     :not(:has(td.LeftColor / RightColor)) 排除表單表格
	     :has(input.Button) + :has(.Dotted…)   認出「查詢欄 + 搜尋鈕」
	     :not(:has(td:nth-child(1) > input|select))
	                                           第一格不是控制項 = 有標籤的查詢列。
	                                           Browse/Worker 那種「下拉 + 欄位 + 鈕」
	                                           沒有標籤、本來就排得下，流排反而會讓
	                                           欄位從 360px 縮到 122px。

	   ⚠ 查詢欄那一道用「後代」而不是「直接子代」。Chase/Regular 的年月下拉是
	      Script/Date.js 用 document.write 寫進 <div id="inYear"> 裡的，
	      結構是 td > div > select，寫成 > td > .Dotted-Line 就對不上
	      （與 jsSelectPage 同一類的坑，見 CLAUDE.md 陷阱第 5 條）。
	      按鈕那一道維持直接子代 —— 全站的搜尋鈕都是 <td> 的直接子代。

	   ⚠ 全站沒有任何查詢表格包住清單（逐支確認過），所以在表格層級下條件是安全的。 */
	table:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input.Button):has(> tbody > tr > td :is(.Dotted, .Dotted-Line)):not(:has(> tbody > tr > td:nth-child(1) > :is(input, select))),
	table:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input.Button):has(> tbody > tr > td :is(.Dotted, .Dotted-Line)):not(:has(> tbody > tr > td:nth-child(1) > :is(input, select))) > tbody,
	table:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input.Button):has(> tbody > tr > td :is(.Dotted, .Dotted-Line)):not(:has(> tbody > tr > td:nth-child(1) > :is(input, select))) > tbody > tr
	{
		display:		block;
		width:			100% !important;
	}

	/* block 之後 height 是固定值，見 CLAUDE.md 陷阱第 1 條 */
	table:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input.Button):has(> tbody > tr > td :is(.Dotted, .Dotted-Line)):not(:has(> tbody > tr > td:nth-child(1) > :is(input, select))) > tbody > tr
	{
		height:			auto;
		min-height:		var(--row-min-height);
	}

	table:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input.Button):has(> tbody > tr > td :is(.Dotted, .Dotted-Line)):not(:has(> tbody > tr > td:nth-child(1) > :is(input, select))) > tbody > tr > td
	{
		display:		inline-block !important;
		width:			auto !important;
		vertical-align:	middle;
		white-space:	nowrap;
	}

	/* 流排時輸入欄回到內容寬，否則 width:100% 會讓每一格各佔一行 */
	table:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input.Button):has(> tbody > tr > td :is(.Dotted, .Dotted-Line)):not(:has(> tbody > tr > td:nth-child(1) > :is(input, select))) input[type="text"]
	{
		width:			auto;
		min-width:		7em;
	}

	/* Chase/Regular 的年月下拉被 Script/Date.js 包在 <div style="float:left"> 裡。
	   流排之後儲存格寬度由內容決定，四個浮動元素排成一行不換行，撐出容器外
	   （實測 390px 下右緣 466px、整頁橫向捲動）。
	   改成 inline-block 就會跟著行框自然換行。 */
	table:not(#BrowseTable):not(:has(> tbody > tr > td.LeftColor)):not(:has(> tbody > tr > td.RightColor)):has(> tbody > tr > td > input.Button):has(> tbody > tr > td :is(.Dotted, .Dotted-Line)):not(:has(> tbody > tr > td:nth-child(1) > :is(input, select))) > tbody > tr > td > div[style*="float"]
	{
		float:			none !important;
		display:		inline-block;
		vertical-align:	middle;
	}
}

/* ==========================================================================
   10. 清單卡片化（試點）
   --------------------------------------------------------------------------
   把清單改成一列一張卡片。目前只有 Browse/Worker.aspx 掛了 Script/ListCards.js，
   其餘 52 支清單維持原本的橫向捲動。

   兩道開關，缺一不可:
     table.AsCards            這張清單「可以」卡片化。ListCards.js 標記完欄名才加，
                              JS 沒跑就完全不套用，退回第 5.5 節的橫向捲動。
     html[data-listmode=card] 現在「要不要」用卡片。由 ListCards.js 每次決定。

   哪些列做成卡片，由 tr.LcCard 決定（也是 ListCards.js 加的）。
   ⚠ 不要改回用 tr[class^="RawColor"] —— Browse/Insure 的「總計 / 平均」列掛的是
      RawYellow，前綴對不上，那兩列就會以 table-row 留在 display:block 的 tbody 裡，
      形成一個七欄的匿名表格，寬度撐破卡片版面。

   ⚠ 斷點不在這裡 —— 判斷寬度的 matchMedia(max-width:768px) 在 ListCards.js 裡。
      原本這一節整個包在 @media (max-width:768px) 內，但加了手動切換鈕之後，
      使用者在桌機也可能指定卡片模式，媒體查詢就擋住了。改由 JS 統一決定，
      CSS 只負責「被指定成卡片時長什麼樣」。

   為什麼自動切換取 768px 而不是沿用 860px:
     860px 是表單標籤／欄位改為堆疊的斷點，那是「欄位放不下」的問題;
     清單要不要卡片化是「一次看幾筆」的取捨，性質不同。768px 對應平板直式，
     以下才是真正需要一筆一卡的尺寸。

   ⚠ 卡片化的代價是頁面變長。同樣 80 筆，橫向捲動版約 3200px，
      卡片版約 24000px。若之後要推廣，這點要一併評估。
   ========================================================================== */
/* 取消第 5.5 節的橫向捲動容器 —— class 讓特異性高於原規則 */
html[data-listmode="card"] table.AsCards
{
	display:			block;
	width:				100% !important;
	min-width:			0;
	overflow-x:			visible;
	background-color:	transparent;
}

html[data-listmode="card"] table.AsCards > tbody
{
	display:			block;
	min-width:			0;
}

/* 標題列不顯示 —— 欄名改由每個儲存格的 ::before 呈現 */
html[data-listmode="card"] table.AsCards > tbody > tr.LcHead
{
	display:			none;
}

/* 一列 = 一張卡 ------------------------------------------------------ */
html[data-listmode="card"] table.AsCards > tbody > tr.LcCard
{
	display:			block;
	position:			relative;
	height:				auto;			/* 第 2-5 節的 height 對 block 是固定值 */
	min-height:			var(--row-min-height);
	margin:				0 0 10px;
	padding:			10px 12px;
	background-color:	var(--bg-surface);
	border:				1px solid var(--line-grid);
	border-radius:		8px;
	box-shadow:			0 1px 3px rgba(0, 0, 0, .07);
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td
{
	display:			block;
	width:				auto !important;
	height:				auto;
	padding:			3px 0;
	background-color:	transparent !important;
	border:				0;
	white-space:		normal;			/* 蓋掉第 5.5 節的 nowrap */
	position:			static;			/* 蓋掉第一欄的 sticky */
}

/* 一般欄位: 左標籤右值 */
html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td[data-label]:not(.LcTitle)
{
	display:			flex;
	gap:				10px;
	align-items:		baseline;
	border-top:			1px dotted var(--line-grid);
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td[data-label]:not(.LcTitle)::before
{
	content:			attr(data-label);

	/* flex-basis 用 auto + min-width，而不是固定 flex:0 0 <寬>:
	   短欄名一律撐到 --card-label，彼此對齊; 萬一某頁的欄名比這更長，
	   它會自己變寬而不是折成兩行（那一列的值會往右挪，只影響該列）。 */
	flex:				0 0 auto;
	min-width:			var(--card-label);
	white-space:		nowrap;
	color:				var(--text-muted);
	font-size:			.9em;
}

/* 卡片標題: 版面跟一般欄位相同（左欄名右值），只是值放大加粗。
   一開始把欄名獨立成上面一行，但那樣「WorkerID」與「26」會分成兩行，
   卡片標題反而變得零散，所以改成同一行。 */
html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td.LcTitle
{
	display:			flex;
	gap:				10px;
	align-items:		baseline;
	padding:			0 0 6px;
	font-size:			1.05em;
	font-weight:		bold;
}

/* 欄名的字級要換算回「相對於基準字級」，兩者才會切齊:
     一般欄位  ::before = .9em × 1em(基準)    = .90em
     標題      ::before = .857em × 1.05em(td) = .90em
   字級相同，--card-label 的 em 就會算出相同的 px，左欄名的右緣因此對齊。
   gap 用 px 不受字級影響。
   用 [data-label] 限定，沒有欄名時不會多出一個空盒子。 */
html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td.LcTitle[data-label]::before
{
	content:			attr(data-label);
	flex:				0 0 auto;
	min-width:			var(--card-label);
	color:				var(--text-muted);
	font-size:			.857em;			/* = 基準字級的 .9em */
	font-weight:		normal;
	white-space:		nowrap;
}

/* 權限欄: 一排按鈕。分隔用的 │ 在卡片裡是多餘的，隱藏掉。 */
html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td.LcAct
{
	display:			flex;
	flex-wrap:			wrap;
	gap:				6px;
	margin-top:			6px;
	padding-top:		8px;
	border-top:			1px solid var(--line-grid);
	font-size:			0;				/* 吃掉 │ 與空白文字節點 */
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td.LcAct a
{
	padding:			5px 12px;
	font-size:			var(--font-size-base);
	color:				var(--tab-text);
	background-color:	var(--tab-bg);
	border:				1px solid var(--tab-border);
	border-radius:		var(--ctl-radius);
	text-decoration:	none;
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcCard > td.LcAct a:hover
{
	background-color:	var(--tab-bg-hover);
	text-decoration:	none;
}

/* 分組標題與空狀態不做成卡片 -------------------------------------------- */
/* 卡片底色沿用該列原本的狀態色，跟表格模式看到的一致:
     RawYellow  未處理 / 未回覆 / 彙總列（Browse/Insure 的總計、平均）
     RawGray    已完成 / 已回覆
   有 4 支清單頁（News/Default、Contact/Default、Barthel/Default、
   Calendar/ViewEvent）的資料列一律是這兩種，一列 RawColorN 都沒有。 */
html[data-listmode="card"] table.AsCards > tbody > tr.LcCard.RawYellow
{
	background-color:	var(--row-yellow);
	border-color:		var(--line-border);
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcCard.RawGray
{
	background-color:	var(--row-gray);
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcGroup,
html[data-listmode="card"] table.AsCards > tbody > tr.LcEmpty
{
	display:			block;
	height:				auto;
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcGroup > td
{
	display:			block;
	height:				auto;
	margin:				14px 0 6px;
	padding:			6px 10px;
	border-radius:		var(--ctl-radius);
	white-space:		normal;
}

html[data-listmode="card"] table.AsCards > tbody > tr.LcEmpty > td
{
	display:			block;
	height:				auto;
	padding:			24px;
	text-align:			center;
	color:				var(--text-muted);
	white-space:		normal;
}


/* 模式切換鈕 ------------------------------------------------------------
   由 ListCards.js 插在「快速換頁」那一格的右邊。整格都是執行期產生的，
   .aspx 沒有動 —— 51 支頁面都有 #jsSelectPage，之後推廣時不必逐支改 markup。

   兩顆鈕在任何寬度都顯示。使用者按過之後偏好存進 localStorage，
   在桌機指定卡片、或在手機指定列表都可以，不再只跟著螢幕寬度走。 */
.LcModeBtn
{
	display:			inline-flex;
	align-items:		center;
	justify-content:	center;
	width:				var(--ctl-height);
	height:				var(--ctl-height);
	margin-left:		4px;
	padding:			0;
	color:				var(--text-main);
	background-color:	var(--btn-bg);
	border:				1px solid var(--btn-border);
	border-radius:		var(--ctl-radius);
	vertical-align:		middle;
	cursor:				pointer;
}

.LcModeBtn svg
{
	display:			block;
	width:				17px;
	height:				17px;
	fill:				none;
	stroke:				currentColor;
	stroke-width:		1.6;
	stroke-linecap:		round;
	stroke-linejoin:	round;
}

.LcModeBtn:hover
{
	background-color:	var(--bg-hover);
	border-color:		var(--text-link);
}

/* 目前所在的模式。用 aria-pressed 當選擇器，狀態只存一份，
   不必再另外掛一個 class（兩者不同步就會出現「看起來選中、其實沒有」）。 */
.LcModeBtn[aria-pressed="true"]
{
	color:				var(--tab-text-active);
	background-color:	var(--tab-bg-active);
	border-color:		var(--tab-bg-active);
	cursor:				default;
}


/* ==========================================================================
   11. 第三方元件 —— AjaxControlToolkit 的日期選取器
   --------------------------------------------------------------------------
   CalendarExtender 的彈出日曆由 CalendarBehavior.js 在用戶端組出來，樣式來自
   內嵌在 AjaxControlToolkit.dll 裡的 Calendar.css（走 WebResource.axd 送出，
   既改不到也不該改）。那份樣式是 2007 年的寫法，對執行環境有四個隱含假設，
   而 Base.css 剛好四個都改掉了。

   工具箱那邊的尺寸（實際從 DLL 取出 Calendar.css 對照，不是推測）:
     .ajax__calendar_container { width:170px; padding:4px; font-size:11px;
                                 font-family:tahoma,verdana,helvetica }
     .ajax__calendar_body      { height:139px; overflow:hidden }
     .ajax__calendar_dayname   { height:17px; width:17px; padding:0 2px }
     .ajax__calendar_day       { height:17px; width:18px; padding:0 2px;
                                 border:1px }

   | 我們的規則 | 對日曆的實測影響 |
   |---|---|
   | 第 2-1 節 * { box-sizing:border-box } | 日期格 24x19 -> 18x17，padding 與 border 從內容寬扣掉，數字擠成一團 |
   | 第 2 節結尾 tr { height:40px } | 日期列 17px -> 40px，六列讓表格高度變成 280px，塞進 height:139px 的 body，下半個月直接被 overflow:hidden 裁掉 |
   | body { line-height:1.7 } | 繼承下去變成 25.5px 的行框，放不進 17px 的儲存格 |
   | body, td, th … { font-family } | 換成中文字型（實測 Segoe UI）後，同樣 11px 的「Su」比 tahoma 寬，星期列擠成一團 |

   這四條都是全站基礎，不能為了日曆改掉；只能在日曆這個範圍內還原它預期的環境。

   ⚠ 不需要 !important —— 一層 class 就足以蓋過那四條（`*` 是 0、
     `tr` 與 `td` 都是 (0,0,1)）。工具箱的 CSS 由 ScriptManager 在執行期注入，
     順序在我們之後，但它沒有宣告 box-sizing / line-height / tr 的 height，
     唯一重疊的 font-family 兩邊值相同，所以順序不影響結果。

   ⚠ 日曆是掛在欄位的 parentNode 裡（不是 <body> 底下），所以它確實在表單表格
     之內。但它的 <table> 只有 border="0"、沒有 width 屬性，也沒有任何
     RawColor / LeftColor / RightColor 儲存格，第 3、6 節那些 :has() 規則
     全都對不上 —— 只有上面四條全域規則會影響它。

   ⚠ 全站用到 CalendarExtender 的有 3 支: Careers/CareersFrm、
     New/CalculateInTW（markup），以及 Template/Expansion（code-behind 動態掛上）。
   ========================================================================== */
.ajax__calendar_container,
.ajax__calendar_container *,
.ajax__calendar_container *::before,
.ajax__calendar_container *::after
{
	box-sizing:			content-box;
	font-family:		tahoma, verdana, helvetica, sans-serif;
	line-height:		normal;
}

/* 第 2 節的列高下限（40px）是為了資料表格的可讀性，對 17px 的日期列不適用 */
.ajax__calendar_container tr
{
	height:				auto;
}