/* ==========================================================================
   tw-forms —— 前台樣式
   --------------------------------------------------------------------------
   色票、字級、圓角、輸入框高度全部沿用站上既有的 corporate.css 與
   contact-form.css，不是另外調的：

     主文字   #192a3d        內文     #3a4f66
     次要     #55677a（白底 5.62:1）
     連結與主按鈕 #1559ed（白底 5.70:1）
       ★ 不是品牌藍 #2872fa —— 那個只有 4.16:1，未達 WCAG AA
     金色分隔線 #d3b574      金色文字 #7d6019
     線 #e1e8ed  淺線 #eef1f4  底 #fafbfc  輸入框框線 #d5dee6
     錯誤 #b3261e / #7f1d1d / 底 #fdeceb / 框 #f0c4c1
     成功 #14532d / 底 #e6f4ea

   輸入框 46px 高、**字級 16px**（iOS Safari 聚焦時不會放大整頁）、
   按鈕 48px；手機上一律 ≥ 48px。

   ⚠️ 這個檔案改完一定要跑 `python3 tools/csscheck.py`
      —— 一組懸空的選擇器會讓整個 @media 區塊被解析器丟掉，而且不會有錯誤訊息。
   ========================================================================== */

.twf {
	--twf-ink: #192a3d;
	--twf-body: #3a4f66;
	--twf-mute: #55677a;
	--twf-link: #1559ed;
	--twf-link-hover: #0f47c4;
	--twf-gold: #d3b574;
	--twf-gold-ink: #7d6019;
	--twf-gold-bg: #fdf7e8;
	--twf-gold-line: #e6d3a8;
	--twf-line: #e1e8ed;
	--twf-line-soft: #eef1f4;
	--twf-field-line: #d5dee6;
	--twf-ground: #fafbfc;
	--twf-ph: #7a8da1;
	--twf-bad: #b3261e;
	--twf-bad-ink: #7f1d1d;
	--twf-bad-bg: #fdeceb;
	--twf-bad-line: #f0c4c1;
	--twf-good: #14532d;
	--twf-good-bg: #e6f4ea;

	color: var(--twf-ink);
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

.twf *,
.twf *::before,
.twf *::after {
	box-sizing: border-box;
}

.twf a {
	color: var(--twf-link);
	text-decoration: none;
}

.twf a:hover,
.twf a:focus {
	color: var(--twf-link-hover);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   版面
   -------------------------------------------------------------------------- */

.twf-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.twf-main {
	width: 100%;
	min-width: 0;
}

.twf-aside {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 20px;
}

.twf-form {
	padding: 26px 20px 30px;
	border: 1px solid var(--twf-line);
	border-radius: 5px;
	background: #fff;
}

/* --------------------------------------------------------------------------
   開場說明
   -------------------------------------------------------------------------- */

.twf-intro {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 28px;
	padding: 12px 16px;
	border-radius: 4px;
	background: #eef4ff;
	color: var(--twf-body);
	font-size: 14px;
	line-height: 1.7;
}

.twf-intro .twf-i {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--twf-link);
}

.twf-note {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 4px;
	color: var(--twf-body);
	font-size: 14px;
	line-height: 1.75;
}

.twf-note--info {
	background: #eef4ff;
}

.twf-note--plain {
	padding: 0;
}

/* --------------------------------------------------------------------------
   群組（fieldset / legend）

   每一個 section 是一個 `<fieldset>`，標題是它的 `<legend>`。這張表單有
   兩組長得一模一樣的人員欄位（聯絡人／軟體管理人），讀屏要靠 legend
   才分得出「姓名（中文）」是哪一組的姓名。

   ⚠️ fieldset 與 legend 的瀏覽器預設樣式很重，而且 legend 的 `display`
   有歷史包袱（各家支援度不齊）。所以：
     · fieldset 的框線／內距／外距全部歸零，並補 `min-width: 0`
       —— fieldset 的預設 min-width 是 min-content，不補的話裡面的
       `.twf-grid` 會把容器撐破（這是 fieldset 最有名的一個坑）
     · legend 只當一個 block，版面交給裡面的 `.twf-section`（span），
       原本的樣式原封不動搬過去，畫面不變
   -------------------------------------------------------------------------- */

.twf-fs {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.twf-legend {
	display: block;
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   群組標題
   -------------------------------------------------------------------------- */

.twf-section {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 22px 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--twf-line-soft);
}

/* ⚠️ 這裡**刻意沒有**「第一個群組不要上方留白」那一條規則。

   1.1.0 寫過 `.twf-form > .twf-fs:first-child > …`，2026-09-07 驗收實測
   證明它**一次都沒有命中**：`.twf-form` 的第一個子元素永遠是
   `<p class="twf-intro">`（送出被擋時是 `<div class="twf-errsum">`），
   `.twf-fs` 不可能是 `:first-child`。再更早的 `.twf-section:first-child`
   也是同樣的理由從來沒生效過，所以 1.1.0 的註解把因果講反了。

   也就是說**五個群組標題一直都是 margin-top: 22px**，畫面一直長這樣。
   改成 `:first-of-type` 可以讓它「生效」，但那會把一個從來沒有人要求過的
   版面變動帶上營運站。所以規則刪掉，把事實留在這裡。
   哪天真的要讓第一個群組貼齊 intro，再加回去，並且當場量一次。 */

.twf-section-num {
	display: flex;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--twf-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.twf-section-title {
	margin: 0;
	color: var(--twf-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
}

.twf-section-hint {
	color: var(--twf-mute);
	font-size: 13px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   欄位

   ⚠️ 互動元件的選擇器一律寫成 `.twf .twf-xxx`（兩個 class），不是 `.twf-xxx`。

   父主題 Blocksy 的 `main.min.css` 對表單元素下了這些規則：

       input[type="date"] { min-height: var(--theme-form-field-height, 40px) }   ← (0,1,1)
       .button, …, [type="submit"], … { min-height: var(--theme-button-min-height) }

   單一 class 的 `.twf-input`（0,1,0）**打不過** `input[type="date"]`（0,1,1）；
   `.twf-submit`（0,1,0）跟 `[type="submit"]`（0,1,0）同分，而 Blocksy 的
   樣式表排在我們後面，所以它贏。

   2026-09-06 在 390 寬實測到的後果：日期欄位與送出按鈕都變成 **40px 高**，
   低於手機觸控目標的 48px 下限。改成兩個 class（0,2,0）之後才蓋得過去。
   -------------------------------------------------------------------------- */

.twf-field {
	margin: 0 0 22px;
}

.twf-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 24px;
}

.twf-label {
	display: block;
	margin-bottom: 8px;
	color: var(--twf-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.twf-req {
	margin-left: 6px;
	color: var(--twf-bad);
	font-size: 13px;
	font-weight: 400;
}

.twf-opt {
	margin-left: 6px;
	color: var(--twf-mute);
	font-size: 13px;
	font-weight: 400;
}

.twf .twf-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--twf-field-line);
	border-radius: 4px;
	margin: 0;
	background: #fff;
	color: var(--twf-ink);
	font-family: inherit;
	/* ★ 16px：iOS Safari 聚焦時小於 16px 會自動放大整頁 */
	font-size: 16px;
	line-height: 1.6;
	box-shadow: none;
}

.twf .twf-input::placeholder {
	color: var(--twf-ph);
	opacity: 1;
}

.twf .twf-input:focus {
	border-color: var(--twf-link);
	outline: 2px solid rgba(21, 89, 237, 0.28);
	outline-offset: 1px;
}

.twf .twf-textarea {
	min-height: 120px;
	padding-top: 13px;
	resize: vertical;
}

.twf .twf-field--bad .twf-input {
	border: 2px solid var(--twf-bad);
	background: #fffafa;
}

.twf-hint {
	margin: 6px 0 0;
	color: var(--twf-mute);
	font-size: 13px;
	line-height: 1.7;
}

.twf-error {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 7px 0 0;
	color: var(--twf-bad);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
}

.twf-error svg {
	flex-shrink: 0;
	margin-top: 3px;
}

/* select 的箭頭 */
.twf-selectwrap {
	position: relative;
}

.twf .twf-select {
	padding-right: 42px;
	-webkit-appearance: none;
	appearance: none;
}

.twf-caret {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--twf-mute);
	pointer-events: none;
	transform: translateY(-50%);
}

/* number 的單位 */
.twf-numwrap {
	position: relative;
}

.twf-numwrap .twf-suffix {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--twf-mute);
	font-size: 14px;
	pointer-events: none;
	transform: translateY(-50%);
}

.twf-numwrap .twf-number {
	padding-right: 46px;
}

/* radio / checkbox 群組 */
.twf-choices {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.twf .twf-choice {
	display: flex;
	min-height: 48px;
	align-items: center;
	gap: 10px;
	padding: 6px 2px;
	color: var(--twf-body);
	font-size: 16px;
	line-height: 1.6;
}

.twf .twf-choice input {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   個資同意
   -------------------------------------------------------------------------- */

.twf-consent {
	display: flex;
	gap: 12px;
	margin: 6px 0 26px;
	padding: 16px 18px;
	border: 1px solid var(--twf-line);
	border-radius: 4px;
	background: var(--twf-ground);
}

.twf-consent--bad {
	border: 2px solid var(--twf-bad);
	background: var(--twf-bad-bg);
}

.twf-consent input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin: 3px 0 0;
}

.twf-consent-body {
	flex-grow: 1;
	min-width: 0;
}

.twf-consent-body label {
	display: block;
	color: var(--twf-body);
	font-size: 15px;
	line-height: 1.85;
}

/* --------------------------------------------------------------------------
   「與上述聯絡人為同一人」

   觸控目標：整列 ≥ 56px，而且**整個標籤都是可點區**（`<label for>` 是
   block 且有上下內距）—— 不是只有那個 24px 的方框。24px 的方框本身
   低於 44px 的建議值，靠標籤把有效點擊區撐起來。

   ⚠️ 選擇器一律 `.twf .twf-same…`（0,2,0）—— 父主題 Blocksy 對
   `input[type="checkbox"]`（0,1,1）有自己的尺寸規則，單一 class 打不過。
   -------------------------------------------------------------------------- */

.twf-same {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	margin: 0 0 22px;
	padding: 6px 16px;
	border: 1px solid var(--twf-line);
	border-radius: 4px;
	background: var(--twf-ground);
}

.twf .twf-same input[type="checkbox"] {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin: 0;
}

.twf-same-body {
	min-width: 0;
	flex-grow: 1;
}

.twf-same-body label {
	display: block;
	padding: 9px 0;
	color: var(--twf-ink);
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.twf-same-body .twf-hint {
	margin: 0 0 8px;
}

/* 「同一人」勾了、但下面那一組填的是**另一個人** —— 這不是「沒填」，
   是要使用者自己選一份留下來。訊息很長是刻意的（它要把兩條出路講完），
   所以框線用跟其他錯誤一樣的紅，但整塊不壓縮。 */
.twf-same--bad {
	border: 2px solid var(--twf-bad);
	background: var(--twf-bad-bg);
}

.twf-same-body .twf-error {
	margin-bottom: 8px;
}

/* JS 把重複的那一組欄位收起來時用。JS 不跑就不會有這個屬性，
   欄位照常顯示、照常可以填 —— 帶入本來就是伺服器端做的。 */
.twf [hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   蜜罐 —— 絕對定位移出畫面，不是 display:none
   （有些機器人會直接跳過 display:none 的欄位）
   -------------------------------------------------------------------------- */

.twf-hp {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   送出
   -------------------------------------------------------------------------- */

.twf-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.twf .twf-submit {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 13px 44px;
	border: 0;
	border-radius: 4px;
	background: var(--twf-link);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.twf .twf-submit:hover,
.twf .twf-submit:focus {
	background: var(--twf-link-hover);
	color: #fff;
}

.twf-submit-hint {
	margin: 0;
	color: var(--twf-mute);
	font-size: 14px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   F2-a 表單級錯誤摘要
   -------------------------------------------------------------------------- */

.twf-errsum {
	margin: 0 0 30px;
	padding: 18px 20px;
	border: 1px solid var(--twf-bad-line);
	border-left: 4px solid var(--twf-bad);
	border-radius: 4px;
	background: var(--twf-bad-bg);
}

.twf-errsum-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	color: var(--twf-bad);
}

.twf-errsum-head h2 {
	margin: 0;
	color: var(--twf-bad-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.twf-errsum-list {
	margin: 0;
	padding: 0 0 0 32px;
	list-style: none;
}

.twf-errsum-list li {
	margin: 0 0 7px;
	color: var(--twf-bad-ink);
	font-size: 15px;
	line-height: 1.8;
}

.twf-errsum-list a {
	color: var(--twf-bad-ink);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   F2-b 安全驗證過期
   重點不是「失效」，是「你填的內容都還在」
   -------------------------------------------------------------------------- */

.twf-stale {
	display: flex;
	gap: 14px;
	margin: 0 0 28px;
	padding: 22px 20px;
	border: 1px solid var(--twf-gold-line);
	border-left: 4px solid var(--twf-gold-ink);
	border-radius: 4px;
	background: var(--twf-gold-bg);
}

.twf-stale-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--twf-gold-ink);
}

.twf-stale-body {
	flex-grow: 1;
	min-width: 0;
}

.twf-stale-body h2 {
	margin: 0 0 10px;
	color: var(--twf-ink);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
}

.twf-stale-body p {
	margin: 0 0 6px;
	color: var(--twf-body);
	font-size: 16px;
	line-height: 1.9;
}

.twf-kept {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 16px 0 0 !important;
	padding: 12px 16px;
	border-radius: 4px;
	background: var(--twf-good-bg);
	color: var(--twf-good) !important;
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.75 !important;
}

.twf-kept svg {
	flex-shrink: 0;
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   側欄卡片
   -------------------------------------------------------------------------- */

.twf-card {
	padding: 22px 22px 24px;
	border: 1px solid var(--twf-line);
	border-radius: 5px;
	background: #fff;
}

.twf-card h3 {
	margin: 0 0 12px;
	color: var(--twf-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.twf-card p {
	margin: 0;
	color: var(--twf-body);
	font-size: 14px;
	line-height: 1.85;
}

.twf-card--dark {
	border-color: var(--twf-ink);
	background: var(--twf-ink);
}

.twf-card--dark h3 {
	color: #fff;
}

.twf-card--dark p {
	color: #c9d4de;
}

.twf-rule {
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 13px;
	background: var(--twf-gold);
}

.twf-card-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.twf-card-list li {
	display: flex;
	gap: 9px;
	margin: 0 0 11px;
	color: var(--twf-body);
	font-size: 14px;
	line-height: 1.8;
}

.twf-card-num {
	color: var(--twf-gold-ink);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   F3 送出完成
   -------------------------------------------------------------------------- */

.twf-done {
	max-width: 760px;
	margin: 0 auto;
}

.twf-done-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32px;
	text-align: center;
}

.twf-done-head h1 {
	margin: 20px 0 12px;
	color: var(--twf-ink);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.4px;
	line-height: 1.35;
}

.twf-done-head p {
	max-width: 620px;
	margin: 0;
	color: var(--twf-body);
	font-size: 17px;
	line-height: 1.9;
}

.twf-codecard {
	margin-bottom: 22px;
	padding: 28px 24px 30px;
	border-radius: 6px;
	background: var(--twf-ink);
}

.twf-codecard-kicker {
	margin: 0 0 14px;
	color: var(--twf-gold);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.2px;
	line-height: 1.6;
}

.twf-codecard-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.twf-code {
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 2px;
	line-height: 1.25;
	word-break: break-all;
}

.twf .twf-copy {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border: 1px solid #6d8299;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
}

.twf .twf-copy:hover,
.twf .twf-copy:focus {
	border-color: #fff;
	color: #fff;
}

.twf-codecard-note {
	max-width: 620px;
	margin: 18px 0 0;
	color: #c9d4de;
	font-size: 15px;
	line-height: 1.85;
}

.twf-mailwarn {
	display: flex;
	gap: 14px;
	margin-bottom: 30px;
	padding: 18px 20px;
	border: 1px solid var(--twf-gold-line);
	border-left: 4px solid var(--twf-gold-ink);
	border-radius: 4px;
	background: var(--twf-gold-bg);
}

.twf-mailwarn svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--twf-gold-ink);
}

.twf-mailwarn p {
	margin: 0;
	color: var(--twf-body);
	font-size: 15px;
	line-height: 1.85;
}

.twf-mailwarn-title {
	margin: 0 0 6px !important;
	color: var(--twf-ink) !important;
	font-size: 16px !important;
	font-weight: 700;
}

.twf-summary {
	margin-bottom: 30px;
	padding: 4px 20px 6px;
	border: 1px solid var(--twf-line);
	border-radius: 5px;
	background: #fff;
}

.twf-summary-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 16px 0 14px;
	border-bottom: 1px solid var(--twf-line);
}

.twf-summary-head h2 {
	margin: 0;
	color: var(--twf-ink);
	font-size: 17px;
	font-weight: 700;
}

.twf-summary-head span {
	color: var(--twf-mute);
	font-size: 13px;
}

.twf-summary-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	border-bottom: 1px solid var(--twf-line-soft);
}

.twf-summary-row:last-child {
	border-bottom: 0;
}

.twf-summary-k {
	width: 150px;
	flex-shrink: 0;
	padding: 13px 0 0;
	color: var(--twf-mute);
	font-size: 15px;
}

.twf-summary-v {
	flex-grow: 1;
	min-width: 0;
	padding: 0 0 13px;
	color: var(--twf-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	word-break: break-word;
}

.twf-summary-missing {
	margin-bottom: 30px;
	padding: 16px 18px;
	border: 1px solid var(--twf-line);
	border-radius: 4px;
	background: var(--twf-ground);
	color: var(--twf-body);
	font-size: 15px;
	line-height: 1.85;
}

.twf-done-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.twf .twf-btn {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border: 1px solid #7a8da1;
	border-radius: 4px;
	background: #fff;
	color: var(--twf-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.twf .twf-btn:hover,
.twf .twf-btn:focus {
	border-color: var(--twf-ink);
	color: var(--twf-ink);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   降級模式（資料表不可用時，前台唯一會看到的東西）
   -------------------------------------------------------------------------- */

.twf-degraded {
	padding: 22px 24px;
	border: 1px solid #e6d3a8;
	border-left: 4px solid #7d6019;
	border-radius: 4px;
	background: #fdf7e8;
	color: #3a4f66;
	font-size: 16px;
	line-height: 1.85;
}

.twf-degraded strong {
	display: block;
	margin-bottom: 8px;
	color: #192a3d;
	font-size: 19px;
}

.twf-degraded p {
	margin: 0 0 8px;
}

.twf-degraded-sub {
	color: #7f1d1d;
}

.twf-admin-warn {
	padding: 10px 14px;
	border-left: 4px solid #b3261e;
	background: #fdeceb;
	color: #7f1d1d;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   ≥ 768px：兩欄與三欄的欄位格線
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.twf-form {
		padding: 36px 40px 40px;
	}

	.twf-grid--half {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.twf-grid--third {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.twf .twf-input {
		min-height: 46px;
	}

	.twf-actions {
		flex-direction: row;
		align-items: center;
		gap: 22px;
	}

	.twf-done-head h1 {
		font-size: 34px;
	}

	.twf-codecard {
		padding: 34px 40px 36px;
	}

	.twf-code {
		font-size: 44px;
	}

	.twf-summary {
		padding: 4px 28px 6px;
	}

	.twf-summary-k {
		padding: 15px 0;
	}

	.twf-summary-v {
		padding: 15px 0;
	}
}

/* --------------------------------------------------------------------------
   ≥ 1024px：表單 ＋ 側欄
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.twf-layout {
		flex-direction: row;
		gap: 40px;
	}

	.twf-aside {
		width: 320px;
		flex-shrink: 0;
	}

	.twf-main {
		flex-grow: 1;
	}
}

/* --------------------------------------------------------------------------
   來源脈絡的揭露面板（404 頁／站內搜尋帶進來的）
   --------------------------------------------------------------------------
   404 頁的設計稿上寫著「表單會自動帶上您剛才開啟的網址，您不必自己抄」——
   那是一句對使用者的承諾，所以帶了什麼一定要當場攤開來給他看，
   而且要給一條「不要帶」的路。偷偷塞進隱藏欄位是不好的做法。

   顏色沿用成功綠（--twf-good）：這是一件替使用者省事的好事，不是警告。
   -------------------------------------------------------------------------- */

.twf-src {
	margin: 0 0 28px;
	padding: 16px 18px 14px;
	border: 1px solid #bfe0c9;
	border-left: 4px solid var(--twf-good);
	border-radius: 4px;
	background: var(--twf-good-bg);
}

.twf-src-head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--twf-good);
}

.twf-src-head svg {
	flex-shrink: 0;
}

.twf-src-head h2 {
	margin: 0;
	color: var(--twf-good);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.twf-src-list {
	margin: 10px 0 0;
}

.twf-src-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 5px 0;
	border-top: 1px solid #cfe6d6;
}

.twf-src-row:first-child {
	border-top: 0;
}

.twf-src-row dt {
	flex-shrink: 0;
	width: 140px;
	color: var(--twf-body);
	font-size: 14px;
	line-height: 1.7;
}

.twf-src-row dd {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	color: var(--twf-ink);
	font-size: 14px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.twf-src-row code {
	padding: 1px 6px;
	border-radius: 3px;
	background: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

.twf-src-note {
	color: var(--twf-mute);
	font-size: 13px;
}

.twf-src-foot {
	margin: 10px 0 0;
	color: var(--twf-body);
	font-size: 13px;
	line-height: 1.75;
}

.twf-src-foot a {
	margin-left: 6px;
	text-decoration: underline;
}

@media (max-width: 640px) {

	.twf-src-row dt {
		width: 100%;
		color: var(--twf-mute);
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
   列印：成功頁要能印成 PDF 當憑據
   -------------------------------------------------------------------------- */

@media print {

	.twf-done-actions {
		display: none;
	}

	.twf-codecard {
		border: 2px solid #192a3d;
		background: #fff;
	}

	.twf-code {
		color: #192a3d;
	}

	.twf-codecard-kicker {
		color: #7d6019;
	}

	.twf-codecard-note {
		color: #3a4f66;
	}
}