/* =====================================================================
   全站設計規範（SINGLE SOURCE OF TRUTH）
   ---------------------------------------------------------------------
   本檔定義整套系統的視覺標準，以「首頁 main.php」為基準。
   規則：日後所有頁面都必須依照這份規範，新頁面／新元件一律沿用下列
   token 與元件樣式，不要在各頁散落寫死顏色、字級或圓角。要調整風格
   只改這一個檔（各頁 main.css 之後載入，故此檔可覆蓋佈景預設）。

   ── 色彩 ─────────────────────────────────────────────
     主色（品牌綠）  #39a288（hover #40b598）
     頁面背景        #f4f5f7（石墨灰）
     卡片底 / 邊框   #ffffff / #e5e7eb
     輸入框底        #eef0f3
     內文 / 次要文字 #1f2937 / #6b7280
     狀態色（toast） 成功 #22c55e、錯誤 #ef4444、警告 #f59e0b
     banner/footer   banner.jpg + 藍色濾鏡（沿用佈景原設，白字）

   ── 字體 ─────────────────────────────────────────────
     Inter 打頭，中文回退 Noto Sans TC；圖示維持 FontAwesome

   ── 字級（16px 基準）─────────────────────────────────
     14px 表頭/標籤 · 16px 輸入框/按鈕/次要 · 18px 內文

   ── 圓角 ─────────────────────────────────────────────
     輸入框/按鈕 12px · 卡片/表格容器 16px

   ── 元件樣式 ─────────────────────────────────────────
     內容區          石墨灰底上的白色圓角卡片（.inner）
     header.major    綠色大寫小標(eyebrow) + 灰色副標(h2/h3) + 深色主標(h1)
     主要按鈕        .button.special = 綠底白字
     提示            toast 右上角浮出（成功綠 / 錯誤紅），取代原生 alert
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
	--cac-font: 'Inter', 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
	--cac-radius: 12px;          /* 輸入框、按鈕、卡片圓角，取自 CAC */
	--cac-primary: #39a288;   /* 主色沿用佈景原本的綠色 */
	--cac-card-bg: #ffffff;
	--cac-card-border: #e5e7eb;
	--cac-input-bg: #eef0f3;
	--cac-text: #1f2937;
	--cac-muted: #6b7280;
	/* 字級級距（16px 基準），取自 CAC theme.css */
	--cac-fs-xs: 0.875rem;   /* 14px：表頭、標籤 */
	--cac-fs-sm: 1rem;       /* 16px：輸入框、按鈕、次要文字 */
	--cac-fs-base: 1.125rem; /* 18px：內文 */
}

/* ===== 字體：Inter 打頭，中文自動回退 Noto Sans TC ===== */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, div, td, th, label, blockquote,
input, textarea, select, button, .button,
.major, .logo, .user {
	font-family: var(--cac-font) !important;
}

/* 保留圖示字體，避免被上面的字體覆蓋（FontAwesome）。 */
.icon:before,
i.icon:before,
[class^="fa-"]:before,
[class*=" fa-"]:before,
.fa, .fas, .far, .fab {
	font-family: 'FontAwesome' !important;
}

/* ===== 內文字級：貼近 CAC 的 18px 內文 ===== */
body {
	color: var(--cac-text);
}
.box p, #main p, section p {
	font-size: var(--cac-fs-base);
	line-height: 1.7;
}

/* ===== 輸入元件：16px、12px 圓角、柔和底色與邊框 ===== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
	font-size: var(--cac-fs-sm);
	border-radius: var(--cac-radius) !important;
	background-color: var(--cac-input-bg);
	border: 1px solid var(--cac-card-border) !important;
	color: var(--cac-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	background-color: var(--cac-card-bg);
	border-color: var(--cac-primary) !important;
	box-shadow: 0 0 0 4px rgba(57, 162, 136, 0.15);
}

/* ===== 按鈕：12px 圓角（字級沿用佈景既有 big/small 設定，只調圓角與字體） ===== */
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
	border-radius: var(--cac-radius) !important;
}

/* ===== 卡片式區塊 .box：柔和邊框＋陰影＋圓角，貼近 CAC 卡片 ===== */
.box {
	border-radius: var(--cac-radius);
	border: 1px solid var(--cac-card-border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* ===== 表格容器圓角 ===== */
.table-wrapper {
	border-radius: var(--cac-radius);
	overflow: hidden;
}

/* =====================================================================
   通用提示 Toast（樣式移植自 CAC_DashBoard .app-toast，改為本站淺色實際色值）
   由 toast.js 建立節點，右上角浮出、無關閉鈕、滑鼠移上暫停、約 3.8 秒淡出。
   ===================================================================== */
.app-toast-stack {
	position: fixed;
	top: 5.5rem;          /* 移到固定式頁首（#header）下方並多留餘裕，不緊貼「選單」 */
	right: 1.25rem;
	z-index: 1080;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: min(460px, calc(100vw - 2rem));
	pointer-events: none;
}
.app-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 1.15rem 1.4rem;
	background: var(--cac-card-bg);
	color: var(--cac-text);
	border: 1px solid var(--cac-card-border);
	border-left: 5px solid var(--cac-primary);
	border-radius: var(--cac-radius);
	box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.35);
	font-family: var(--cac-font);
	font-size: 1.12rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateX(120%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.app-toast--show { opacity: 1; transform: translateX(0); }
.app-toast--hide { opacity: 0; transform: translateX(120%); }
.app-toast__icon { font-size: 1.1em; margin-top: 0.12rem; flex-shrink: 0; }
.app-toast__text { flex: 1; word-break: break-word; }
.app-toast--success { border-left-color: #22c55e; }
.app-toast--success .app-toast__icon { color: #22c55e; }
.app-toast--error { border-left-color: #ef4444; }
.app-toast--error .app-toast__icon { color: #ef4444; }
.app-toast--warning { border-left-color: #f59e0b; }
.app-toast--warning .app-toast__icon { color: #f59e0b; }
.app-toast--info { border-left-color: var(--cac-primary); }
.app-toast--info .app-toast__icon { color: var(--cac-primary); }

/* 站內確認彈窗（取代瀏覽器原生 confirm）：半透明遮罩 + 置中卡片，與全站風格一致。
   由 manageSystem.js 控制顯示；帶 data-confirm 的送出鈕按下才彈出，按「確定」才送表單。 */
.confirmModal {
	position: fixed;
	inset: 0;
	z-index: 1090;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.45);
}
.confirmModal--show { display: flex; }
.confirmModal__box {
	width: 100%;
	max-width: 440px;
	padding: 1.75rem 1.9rem 1.6rem;
	background: var(--cac-card-bg);
	color: var(--cac-text);
	border-radius: var(--cac-radius);
	box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.55);
	transform: translateY(8px) scale(0.98);
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.confirmModal--show .confirmModal__box { transform: none; }
.confirmModal__title {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	font-weight: 700;
}
.confirmModal__msg {
	margin: 0 0 1.5rem;
	font-size: 1.08rem;
	line-height: 1.65;
	color: var(--cac-muted);
	white-space: pre-line;   /* 保留訊息中的換行（如刪除隊伍的多行後果說明） */
}
.confirmModal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}
.confirmModal__actions .button { margin: 0; }

/* 評分管理：評審檢視某隊上傳內容（摘要／海報／影片／其它）的彈窗。內容可捲動。 */
.reviewModal {
	position: fixed;
	inset: 0;
	z-index: 1095;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.5);
}
.reviewModal--show { display: flex; }
.reviewModal__box {
	width: 100%;
	max-width: 820px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	background: var(--cac-card-bg);
	color: var(--cac-text);
	border-radius: var(--cac-radius);
	box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.55);
	overflow: hidden;
}
.reviewModal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--cac-card-border);
}
.reviewModal__title { margin: 0; font-size: 1.2rem; font-weight: 700; word-break: break-word; }
.reviewModal__close {
	flex: 0 0 auto;
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--cac-muted);
	cursor: pointer;
	padding: 0 0.25rem;
}
.reviewModal__body { padding: 1rem 1.25rem 1.4rem; overflow-y: auto; }
/* 查看資料彈窗上方的專題資訊（專題名稱／專題組別）：淺灰卡片、標籤置左固定寬、值可換行 */
.reviewModal__meta {
	margin-bottom: 1.3rem;
	padding: 0.9rem 1.1rem;
	background: var(--cac-input-bg);
	border: 1px solid var(--cac-card-border);
	border-radius: var(--cac-radius);
}
.reviewModal__metarow {
	display: flex;
	gap: 0.9rem;
	line-height: 1.6;
}
.reviewModal__metarow + .reviewModal__metarow { margin-top: 0.5rem; }
.reviewModal__metalabel {
	flex: 0 0 5.5em;
	font-weight: 700;
	color: var(--cac-primary);
}
.reviewModal__projname,
.reviewModal__institute {
	flex: 1;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.reviewModal__sec { margin-bottom: 1.3rem; }
.reviewModal__sec:last-child { margin-bottom: 0; }
.reviewModal__sec h4 {
	margin: 0 0 0.7rem;
	padding: 0 0 0.4rem 0.7rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--cac-primary);
	border-left: 4px solid var(--cac-primary);
	border-bottom: 1px solid var(--cac-card-border);
}
.reviewModal__pre { white-space: pre-wrap; line-height: 1.7; max-height: 30vh; overflow-y: auto; overflow-wrap: anywhere; word-break: break-word; }
.reviewModal__empty { margin: 0; color: var(--cac-muted); }
.reviewModal__videowrap { position: relative; padding-top: 56.25%; }
.reviewModal__videowrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   加深層：整站 CAC 配色版型（石墨灰背景 + 白色卡片 + CAC 藍主色）
   ---------------------------------------------------------------------
   只新增覆蓋、不動上方輕量層。首頁的整片色底區塊（.wrapper.style1~style5）
   維持原本「色底＋白字」設計不碰，以免白字在淺底上消失。
   ===================================================================== */

/* 1) 石墨灰背景 + CAC 深色內文
   只套用在有 #page-wrapper 的頁面；排除 index.php 這種黑底滿版 splash 頁，
   避免把它的黑底蓋成淺灰而整體泛白／透明。 */
body:has(#page-wrapper) {
	background-color: #f4f5f7 !important;
	color: var(--cac-text);
}

/* main.php 的頁首（#header.alt）原本是「透明 + padding 1.5em 2em」，捲動時會移除 .alt
   變成「#3b4147 + padding 1em」。這裡讓頂端狀態直接等同捲動後的樣子（灰底＋較矮）。 */
#header.alt {
	background-color: #3b4147 !important;
	padding: 1em !important;
}

/* 佈景原本區塊之間的白色三角分隔，改為隱藏，換成 CAC 的平面卡片風 */
.wrapper:before,
.wrapper:after {
	display: none !important;
}

/* 2) 內容區 .inner 改成白色卡片（排除首頁整片色底 style1~style5，避免白字消失） */
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) > .inner {
	background: var(--cac-card-bg);
	border: 1px solid var(--cac-card-border);
	border-radius: 16px;
	box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.12);
	padding: 2.5em;
	margin: 3em auto;
}
/* 全站白卡自適應高度：佈景給 .wrapper.alt > .inner 設了 min-height:30em，
   會把內容少的白卡強制撐到 30em 高。這裡解除，讓每頁白卡都貼合內容高度。 */
.wrapper.alt > .inner {
	min-height: 0;
}

/* 卡片內標題／文字採 CAC 深色（不加 !important，讓首頁色底區塊的白字仍優先） */
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) h1,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) h2,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) h3,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) h4,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) h5,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) h6,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) p,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) li,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) td {
	color: var(--cac-text);
}
/* 次要文字（時間、副標）用 muted 灰 */
.wrapper .time,
.wrapper .subtitle {
	color: var(--cac-muted);
}

/* header.major 的小標（eyebrow，如「成果展示」）還原成主題綠 #39a288，
   與大標的深色形成層次。上面的內文深色規則 specificity 較高會把它壓成深色，
   這裡用同等 :not 鏈＋多一個元素選擇器蓋回綠色（只作用在非色底區，不動首頁色底白字）。 */
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) header.major p {
	color: #39a288;
}

/* header.major 的大標（含頁面主標 h1 與副標 h2/h3）改成灰色，
   與綠色小標形成「綠小標 + 灰大標」的層次。只作用在非色底區的 header.major，
   不影響 #banner 的 {$date} 與 index splash 的 header（皆非 header.major）。 */
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) header.major h1,
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) header.major h2 {
	color: var(--cac-text);
}
.wrapper:not(.style1):not(.style2):not(.style3):not(.style4):not(.style5) header.major h3 {
	color: var(--cac-muted);
}

/* 評分管理表格：所有文字統一為 CAC 主色 #1f2937（表頭、內容、隊名標籤、隊名），
   去掉表格內雜色（原本副標綠、輸入框近黑），維持粗體區分層次。只作用在這頁表格。 */
[id^="tableParticipateCompetition"] th,
[id^="tableParticipateCompetition"] td,
[id^="tableParticipateCompetition"] .subtitle,
[id^="tableParticipateCompetition"] .maintitle {
	color: var(--cac-text) !important;
}

/* 首頁 spotlights 卡片（最新消息／報名須知）：補白底＋圓角＋細邊框，
   與 CAC 白色卡片一致（所在 style2 區塊為淺底深字，補白底不會使文字消失）。 */
.spotlights article {
	background: var(--cac-card-bg);
	border: 1px solid var(--cac-card-border);
	border-radius: 16px;
	max-width: 34em;   /* 白卡寬度上限（原本比照 login 28em，這裡放寬）*/
	display: flex;
	flex-direction: column;   /* 卡片直向排列，配合下方 margin-top:auto 讓按鈕貼齊底部 */
}
/* 三張卡內容長度不一（動態最新消息／須知 vs 固定文字），把「更多資訊」按鈕推到卡片底部，
   配合 flex 等高（align-items:stretch）讓三張按鈕橫向對齊。 */
.spotlights article ul.actions {
	margin-top: auto;
}

/* 首頁 spotlights 大標（最新消息／報名須知）改灰色：
   style2 區塊的 .wrapper.style2 h2 把標題壓成 #637485 灰藍（specificity 0,2,0），
   這裡用 .spotlights header.major h2（0,2,2）蓋成 CAC 次要灰，配上綠色小標形成層次。 */
.spotlights header.major h2 {
	color: var(--cac-muted);
}

/* 首頁 spotlights 標題：灰大標置中、綠小標靠左上（同 login 窄卡排法），
   隱藏佈景裝飾線，標題下方補一條與 login 相同的灰色分隔線。 */
.spotlights header.major {
	text-align: center;
	padding-bottom: 0;
	margin-bottom: 1.2em;
}
.spotlights header.major p {
	text-align: left;
}
.spotlights header.major:after {
	display: none;
}
.spotlights .formDivider {
	width: 100%;       /* 滿寬分隔線 */
	margin: 0 0 1.5em;
	border: 0;
	border-top: 1px solid var(--cac-card-border);
}

/* 三欄並列（最新消息／報名須知／歷年優秀成果）：佈景原本兩欄 width:48% + 偶數卡左邊距 4%，
   這裡改成三欄等寬、用 container 的水平 gap 均分間距；≤980px 仍沿用佈景的單欄堆疊。 */
/* 三欄 spotlights 所在的 #one 區塊容器放寬（佈景預設 .inner 上限 75em），
   讓三張卡有更多空間變寬。 */
#one > .inner {
	max-width: 84em;
}
@media screen and (min-width: 981px) {
	.spotlights {
		gap: 0 2%;
	}
	.spotlights article {
		width: 32%;
	}
	.spotlights article:nth-child(even) {
		margin-left: 0;   /* 中和佈景偶數卡的 4% 左邊距，改由 container gap 均分 */
	}
}

/* 頁尾左側文字卡 + 右側地圖合成一個圓角面板：
   左卡只圓左邊、地圖只圓右邊，中間相接處不圓。 */
#footer .contact {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}
#footer #map {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	overflow: hidden;   /* 把 Google 注入的圖磚裁進圓角框內 */
}

/* 3) 主要按鈕：主色沿用佈景原本的綠色（#39a288），不改成藍色。
   佈景既有的 .button.special 綠底白字直接保留，這裡只補一點陰影提升卡片上的立體感。 */
.button.special,
input[type="submit"].special {
	box-shadow: 0 2px 6px -1px rgba(57, 162, 136, 0.4);
}

/* 全站按鈕統一為綠底白字：佈景預設的 .button 是「綠字白底綠框」外框樣式，這裡改成與
   .button.special 一致的實心綠底白字（含 hover／active 深淺、icon 圖示白色）。
   .button.ghost（登入頁「忘記密碼」的次要樣式）特異度較高且自帶 !important，維持白底 hover 轉綠不受影響。 */
.button,
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	background-color: var(--cac-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px -1px rgba(57, 162, 136, 0.4) !important;
}
.button:hover, .button:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus,
input[type="button"]:hover, input[type="button"]:focus,
button:hover, button:focus {
	background-color: #40b598 !important;
}
.button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active {
	background-color: #328f78 !important;
}
.button.icon:before,
input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before {
	color: #ffffff !important;
}

/* index.php splash 的「立即前往」按鈕縮小一號（22px → 18px） */
#startup-form button {
	font-size: 18px;
}

/* .narrow：窄版表單卡片工具類（登入等小表單頁用）。
   欄位欄固定為 reCAPTCHA 的 304px 寬並置中，讓帳號、密碼、reCAPTCHA、
   登入鈕上下同寬對齊；卡片縮窄包住表單。 */
.wrapper > .inner.narrow {
	max-width: 28em;
}
/* 只作用於重設密碼頁（.inner.narrow.reset-compact）：白卡上下 padding 縮小，
   內容型按鈕（前往登入／重新申請）置中。其他窄卡表單頁維持原樣。
   白卡 padding 由高特異度的 .wrapper:not(.style1)…:not(.style5) > .inner（0,7,0）
   設為 2.5em，這裡用 !important 蓋掉上下值、保留左右。 */
.wrapper > .inner.narrow.reset-compact {
	/* min-height 已由上方全站規則解除；這裡再把上下 padding 收得比其他頁更緊 */
	padding-top: 1.5em !important;
	padding-bottom: 1.5em !important;
}
/* 成功／失效狀態內容少，收緊標題與分隔線的下方留白，白卡不會空又高 */
.inner.narrow.reset-compact header.major {
	margin-bottom: 0.8em;
}
.inner.narrow.reset-compact .titleDivider {
	margin-bottom: 1em;
}
.inner.narrow.reset-compact ul.actions li {
	text-align: center !important;
}
.inner.narrow.reset-compact .formStatus {
	margin-top: 0.5em;
}
/* 中和 Pixelarity grid 的負左邊距（.row 有 margin-left:-2em 作為 gutter 補償），
   否則欄位是在往左偏的 .row 裡置中，會和直接置中的 formLinks 差半個 gutter 對不齊。 */
.inner.narrow .row {
	margin: 0;   /* 同時中和左右 gutter 與 .row.uniform 的 -2em 上邊距（欄位 padding 已歸零，
	                否則負上邊距會把表單往上拉、吃掉分隔線與帳號欄之間的距離） */
}
.inner.narrow .row > * {
	float: none;
	width: 304px;          /* = reCAPTCHA 寬度（reCAPTCHA v2 normal 固定 304px）*/
	max-width: 100%;
	margin: 0 auto;
	padding: 0;            /* 移除 .row.uniform 的 gutter，讓內容正好 304px */
	box-sizing: border-box;
}
/* 帳號、密碼、登入鈕都用 border-box：width:100% 即為含 padding/border 的
   304px 總寬，與 reCAPTCHA 的 iframe 精準對齊（佈景 input 預設是 content-box，
   會把 padding/border 外加而變寬，故在此覆蓋）。 */
.inner.narrow input[type="text"],
.inner.narrow input[type="email"],
.inner.narrow input[type="password"],
.inner.narrow .pw-field,
.inner.narrow .pw-field input[type="password"],
.inner.narrow textarea,
.inner.narrow select,
.inner.narrow .select-wrapper,
.inner.narrow input[type="submit"] {
	width: 100%;
	box-sizing: border-box;
}
.inner.narrow ul.actions,
.inner.narrow ul.actions li {
	display: block;        /* 讓登入鈕能撐滿欄寬 */
	padding: 0;
	margin: 0;
}

/* upload（上傳檔案）頁：摘要／海報／影片／其它審查資料做成分頁，一次只顯示一個項目。
   nav 按鈕列沿用 manageSystem 的 .sysNav 樣式（flex 置中、等寬 9em、.button.big），
   兩頁的分頁按鈕外觀一致；未選中的項目以 .uploadTab 隱藏。
   作用中按鈕仍走本頁既有的 .active（由 upload.js 切換）以主色綠底標示。 */
.uploadNav {
	margin-bottom: 1.5em;
}
/* 一般組只有「海報」一項，不需要分頁按鈕。整列以 CSS 隱藏但仍留在 DOM，
   讓 upload.js（$('.uploadNav a')）照常把海報分頁與預覽啟用出來。 */
.uploadNav.navHidden {
	display: none;
}
.uploadNav a.active {
	background-color: var(--cac-primary);
	/* 蓋掉 main.css 的 .button { color:#39a288 !important }，否則作用中按鈕會綠字綠底、看不到字 */
	color: #fff !important;
	box-shadow: inset 0 0 0 1px var(--cac-primary);
}
.uploadTab {
	display: none;
}
.uploadTab.active {
	display: block;
}

/* 預覽 iframe 響應式：原本寫死 640×880/640×360，在半欄（約 560px）與手機上會溢出破版。
   改為撐滿預覽欄寬度；PDF 給固定直式高度，影片維持 16:9。 */
.preview_box iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	background: #fff;
}
#preview_video {
	aspect-ratio: 16 / 9;
	height: auto;
}

/* 海報／其它審查資料：改用 pdf.js 自繪到 canvas，跨瀏覽器/手機呈現一致。
   容器可捲動（多頁 PDF 逐頁堆疊）；每頁 canvas 以固定寬度算繪，再由 CSS 撐滿欄寬。 */
.pdfPreview {
	height: 70vh;
	min-height: 400px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--cac-card-border);
	border-radius: var(--cac-radius);
}
.pdfPreview canvas {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.pdfPreview canvas + canvas {
	margin-top: 0.5em;
}

/* 摘要輸入框與預覽框：固定尺寸，不讓使用者用右下角把手拖放改大小；
   字太多時改以垂直捲軸呈現，不把版面撐開。 */
#abstract,
#preview_abstract {
	resize: none;
	overflow-y: auto;
	/* 兩邊同為 block、同 rows=10，確保輸入框與預覽框高度、排版一致 */
	display: block;
	width: 100%;
}

/* 摘要字數提示：靠右、小字、次要色；超過上限時標紅 */
.abstractCount {
	margin: 0.35em 0 0;
	text-align: right;
	font-size: 0.8em;
	color: var(--cac-muted);
}
.abstractCount--over {
	color: #9c4238;
	font-weight: 700;
}

/* upload 頁專題資訊（專題組別／指導教授／需求）：標籤靠右對齊，冒號獨立成一欄，
   右側的值整齊對齊。標籤右對齊而非 justify——字距保持自然、每列一致，
   同時各列標籤的右緣切齊，冒號也就對齊了。 */
.projectMeta {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
}
.projectMeta li {
	display: flex;
	align-items: baseline;
	padding: 0.25em 0;
	line-height: 1.7;
}
.projectMeta__label {
	flex: 0 0 4.5em;
	font-weight: 600;
	text-align: right;
}
.projectMeta__colon {
	flex: 0 0 auto;
	margin: 0 0.4em 0 0;
}
.projectMeta__value {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}
/* 兩欄式：左欄（名稱／組別／教授／需求）＋右欄（組長／組員）分屬兩個 6u 網格欄，
   因此右欄左緣與下方「摘要預覽」等 6u 預覽欄切齊；左右兩個 .projectMeta 用同一套
   列高與上邊距，各列基線自動對齊——組長對齊專題名稱、組員對齊專題組別。 */
.projectMeta--right .projectMeta__label {
	flex-basis: 2em;   /* 組長／組員皆兩字，縮短標籤寬度，冒號才不會離太遠 */
}

/* signup_info（報名）頁的報名須知：#info 這欄撐滿卡片，讓 textarea 與滿寬分隔線同寬；
   「我明白了」按鈕維持 304px 置中，與 login 家族按鈕一致。 */
#info .row > * {
	width: 100%;
}
#info ul.actions li input[type="submit"] {
	display: block;
	width: 304px;
	max-width: 100%;
	margin: 0 auto;
}

/* 報名表單：需求／競賽勾選移到左欄結尾，與上方「專題組別」下拉留出間距，
   核取方塊行距放寬好點選。（2026-08-13：填補成員多時左欄下方的空白） */
.signupNeeds {
	margin-top: 1.5em;
	line-height: 2;
}
/* reCAPTCHA + 報名／重新輸入按鈕：與上方需求區留出間距，一起固定在左欄。 */
.signupSubmit {
	margin-top: 1.5em;
}

/* 表單輔助連結（登入頁的「忘記密碼／註冊」、忘記密碼頁的「返回登入」）：置中、小字、次要色 */
.formLinks {
	list-style: none;
	padding: 0;
	margin: 1.5em 0 0;
	display: flex;
	flex-direction: column;   /* 各連結上下換行、置中 */
	align-items: center;
	gap: 0.9em;
	font-size: 0.9em;
}
.formLinks li {
	display: block;
	margin: 0;
}
/* 純文字連結（如「還沒有帳號？註冊」「返回登入」）：次要色、虛線底、hover 轉綠 */
.formLinks a:not(.button) {
	color: var(--cac-muted);
	border-bottom: 1px dotted var(--cac-card-border);
}
.formLinks a:not(.button):hover {
	color: var(--cac-primary);
}

/* 白底、hover 變綠的按鈕（登入頁「忘記密碼」用） */
.button.ghost {
	background-color: #ffffff !important;
	color: var(--cac-primary) !important;
	box-shadow: inset 0 0 0 1px var(--cac-card-border) !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.button.ghost:hover,
.button.ghost:focus {
	background-color: var(--cac-primary) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

/* ── 投票流程共用樣式（取代先前散落於模板的 inline style）──
   .voteResult：狀態結果（已投票／逾時／完成）置中；ul.actions 的 li 為 inline-block，
   父層置中即可讓返回鈕跟著置中。
   .formDivider.spaced：分隔線上下留白（wide 頁 vote_voting 的確認鈕上方用）。
   .inner.narrow 版本另外拉高特異度，蓋過 narrow 既有的分隔線／欄位 margin 規則。 */
.voteResult { text-align: center; }
.voteResult .actions { margin-top: 1.2em; }
.formDivider.spaced { margin: 1.6em 0; }
.inner.narrow .formDivider.spaced { margin-bottom: 1.6em; }
.inner.narrow .row > .fieldGap { margin-top: 1.5em; }

/* 寬版內容頁（news／poster／upload／changeName／info／sign／manageUsers／manageSystem）
   標題下方統一的分隔線：這些頁是 .inner（非 .inner.narrow），narrow 的分隔線規則套不到，
   故在此提供通用樣式 —— 一條與 login/首頁同色的淺灰細線，撐滿標題區寬度。
   同時隱藏佈景 header.major:after 那條 7em 左側裝飾線（只在標題後緊接 .titleDivider 時隱藏，
   不影響其他仍用 :after 的頁面），並收緊 header 下方留白，讓分隔線緊接標題。 */
header.major:has(+ .titleDivider) {
	padding-bottom: 0;
	margin-bottom: 1em;
}
header.major:has(+ .titleDivider):after {
	display: none;
}
/* 指定頁面（news／info／poster／awards／vote_view）：大標置中、小標靠左（同 login/首頁）。 */
header.major.headCenter {
	text-align: center;
}
header.major.headCenter p {
	text-align: left;
}

/* vote_view 統計列（共X隊參與·累計X票·更新於…）移到排行榜下方、且移出 .voteBoard，
   改用一條與標題下方相同的 .inner 層級 titleDivider（寬度必與上方分隔線一致）。
   統計列本身縮小字體、去掉原本的上/下邊框（.voteMeta 定義於 main.css，theme.css 覆蓋）。*/
.voteBoard + .titleDivider {
	margin: 1.8em 0;
}
.voteMeta {
	font-size: 0.82em;
	margin: 0;
	padding: 0;
	border: 0;
}
.formDivider {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--cac-card-border);
}
.titleDivider {
	margin: 0 0 2em;
}

/* 「登入」與「忘記密碼」之間的灰色分隔線：對齊 304px、置中 */
.inner.narrow .formDivider {
	width: 100%;
	margin: 1.6em 0 0;
	border: 0;
	border-top: 1px solid var(--cac-card-border);
}

/* 窄卡標題：大標置中、「登入」小標移到左上角，並移除標題下方的裝飾線（header.major:after） */
.inner.narrow header.major {
	text-align: center;
	padding-bottom: 0;
	margin-bottom: 1.5em;   /* 標題與其下方分隔線之間的空格 */
}
.inner.narrow header.major p {
	text-align: left;       /* 「登入」小標靠左上角 */
}
.inner.narrow header.major:after {
	display: none;
}
/* 「專題成果展系統」下方的分隔線：上方緊接標題（間距由 header 提供），下方留 2em 再接表單 */
.inner.narrow .titleDivider {
	margin: 0 0 2em;
}

/* 常駐標籤欄位：左上角標籤常駐顯示，輸入文字排在其下方（打完字仍看得到標籤） */
.labeledField {
	position: relative;
	margin-bottom: 1em;
}
.labeledField > label {
	position: absolute;
	top: 0.55em;
	left: 1.05em;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--cac-muted);
	pointer-events: none;
	z-index: 2;
}
.labeledField input[type="text"],
.labeledField input[type="email"],
.labeledField input[type="password"] {
	height: auto !important;
	line-height: 1.4 !important;
	padding-top: 1.7em !important;
	padding-bottom: 0.5em !important;
	margin-bottom: 0 !important;
}
/* 密碼欄變高後，讓「顯示密碼」圖示在整個欄位垂直置中 */
.pw-field.labeledField .pw-toggle {
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* 窄卡內的 formLinks 對齊上方欄位寬度（304px）：容器 304px 置中、按鈕撐滿 */
.inner.narrow .formLinks {
	width: 304px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.inner.narrow .formLinks li {
	width: 100%;
	text-align: center;
}
.inner.narrow .formLinks .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* 表單狀態訊息（成功/錯誤）配色 */
.formStatus {
	margin-top: 1em;
	font-size: 0.95em;
	line-height: 1.5;
}
.formStatus.success { color: #2e7d32; }
.formStatus.error   { color: #c0392b; }

/* ============================================================
   精緻淡色 Pro — 全站（2026-09-08 起套用全站）
   不換色系的加法式精緻化：卡片圓角＋層次陰影、hover 微動、
   標題與節點收斂、按鈕手感統一。定義於本設計標準檔，所有頁面共用。
   ============================================================ */
:root {
	--pro-border:   #e6e8ec;
	--pro-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
	--pro-shadow-2: 0 8px 20px rgba(16, 24, 40, 0.08), 0 24px 48px rgba(16, 24, 40, 0.08);
	--pro-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* spotlights：白卡加圓角、層次陰影、hover 上浮（原本方角、陰影過淡） */
.spotlights article {
	border: 1px solid var(--pro-border);
	border-radius: 16px;
	box-shadow: var(--pro-shadow-1);
	transition: transform 0.35s var(--pro-ease), box-shadow 0.35s var(--pro-ease);
}
.spotlights article:hover {
	transform: translateY(-4px);
	box-shadow: var(--pro-shadow-2);
}

/* 標題群：eyebrow 小標收斂加字距、主標加重、分隔線細緻 */
header.major.special p {
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.18em;
	opacity: 0.92;
}
header.major h1,
header.major h2 {
	font-weight: 700;
	letter-spacing: 0.01em;
}
.titleDivider { opacity: 0.85; }

/* features：icon hover 上浮放大、陰影加深 */
.features .icon {
	transition: transform 0.35s var(--pro-ease), box-shadow 0.35s var(--pro-ease);
}
.features li:hover .icon {
	transform: translateY(-3px) scale(1.05);
	box-shadow: -0.5em 0.5em 1.4em rgba(0, 0, 0, 0.12);
}

/* timeline：節點圓點用品牌綠 + 光環 */
.timeline > section:before {
	background: #39a288;
	box-shadow: 0 0 0 4px rgba(57, 162, 136, 0.15);
}

/* 按鈕：hover 上浮 + 平滑陰影（全站按鈕手感一致） */
.button {
	transition: transform 0.2s var(--pro-ease), box-shadow 0.2s var(--pro-ease), background-color 0.2s ease;
}
.button:hover  { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 24, 40, 0.14); }
.button:active { transform: translateY(0);    box-shadow: 0 3px 8px rgba(16, 24, 40, 0.12); }

/* banner 主 CTA：加一點陰影浮起（不動底圖濾鏡） */
#banner .button.big { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }

@media (prefers-reduced-motion: reduce) {
	.spotlights article,
	.features .icon,
	.button { transition: none; }
}

/* ============================================================
   投票完成頁 — 一票投進票箱的回饋動畫（A2，2026-09-09）
   只在投票成功時出現（.vdScene）。純 CSS，頁面載入即播一次，
   呼應使用者剛按下的投票動作。配全站淺色品牌綠。
   ============================================================ */
.vdScene { text-align: center; }
.vdStage { position: relative; width: 150px; height: 150px; margin: 0.4em auto 1.4em; }

/* 票箱 */
.vdBin {
	position: absolute; left: 50%; bottom: 20px; width: 100px; height: 62px; margin-left: -50px;
	background: linear-gradient(180deg, #e8f5f1, #d3ece5);
	border: 2px solid var(--cac-primary); border-radius: 10px;
	animation: vdBin 0.5s ease-out 0.55s both;
}
.vdSlot { position: absolute; left: 50%; top: -4px; width: 54px; height: 6px; margin-left: -27px; background: var(--cac-primary); border-radius: 4px; }
@keyframes vdBin {
	0%   { transform: scaleY(1); }
	40%  { transform: scaleY(0.9) translateY(4px); }
	100% { transform: scaleY(1); }
}

/* 選票：自上方投入票口後隱沒 */
.vdBallot {
	position: absolute; left: 50%; top: 8px; width: 42px; height: 30px; margin-left: -21px;
	background: #fff; border: 2px solid var(--cac-primary); border-radius: 5px;
	box-shadow: 0 3px 8px rgba(16, 24, 40, 0.12);
	animation: vdDrop 0.75s cubic-bezier(0.5, 0, 0.4, 1) 0.1s both;
}
@keyframes vdDrop {
	0%   { transform: translateY(-16px) rotate(-5deg); opacity: 0; }
	20%  { opacity: 1; }
	65%  { transform: translateY(46px) rotate(3deg); opacity: 1; }
	100% { transform: translateY(52px) scale(0.55); opacity: 0; }
}

/* +1 自票箱彈出 */
.vdPlus {
	position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
	font-size: 1.5rem; font-weight: 800; color: var(--cac-primary); font-variant-numeric: tabular-nums;
	opacity: 0; animation: vdPlus 0.7s ease-out 0.7s both;
}
@keyframes vdPlus {
	0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.7); }
	35%  { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
	100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}

/* 文字依序浮出 */
.vdScene h2, .vdScene .vdVoted, .vdScene .vdThanks { opacity: 0; animation: vdFadeUp 0.5s ease-out both; }
.vdScene h2 { animation-delay: 1.15s; }
.vdScene .vdVoted { animation-delay: 1.3s; }
.vdScene .vdVoted strong { color: var(--cac-primary); }
.vdScene .vdThanks { animation-delay: 1.45s; }
@keyframes vdFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.vdBallot { display: none; }
	.vdBin, .vdPlus, .vdScene h2, .vdScene .vdVoted, .vdScene .vdThanks { animation: none; opacity: 1; }
}

/* ============================================================
   即時開票看板 — 淺色動態（B1，2026-09-09）
   沿用現行淺色版型（main.css 的 .voteRank*），加上「票數流動」：
   FLIP 超車換位、票數滾動（JS）、+N 浮標。
   ============================================================ */
.voteRankItem {
	position: relative;
	transition: transform 0.7s var(--pro-ease), background-color 0.4s ease;
	will-change: transform;
}
.voteFlow {
	position: absolute; right: 0.4em; top: -0.25em;
	font-size: 1rem; font-weight: 800; color: var(--cac-primary);
	font-variant-numeric: tabular-nums; pointer-events: none;
	text-shadow: 0 1px 6px rgba(57, 162, 136, 0.35);
	animation: voteFlyUp 1.3s ease-out forwards;
}
.voteRankItem.isFirst .voteFlow { color: #c8961f; }
@keyframes voteFlyUp {
	0%   { opacity: 0; transform: translateY(6px) scale(0.7); }
	18%  { opacity: 1; transform: translateY(0) scale(1.1); }
	100% { opacity: 0; transform: translateY(-18px) scale(1); }
}
/* 進票時整列閃一下（提高權重，避免被下方透明底規則蓋掉） */
.voteRank .voteRankItem.isBump { background-color: rgba(57, 162, 136, 0.12); }
/* vote_view 看板為專用展示：一律播動畫，不因裝置的 reduce-motion 設定而關閉。 */

/* 移除金銀銅色調：所有名次統一用品牌綠（覆蓋 main.css 的 isFirst/isSecond/isThird）。
   同時拿掉每列外層的灰色底框，讓每列只剩內容、透明底。 */
.voteRankItem,
.voteRankItem.isFirst,
.voteRankItem.isSecond,
.voteRankItem.isThird {
	background-color: transparent;
	box-shadow: none;
}
.voteRankItem.isFirst .voteRankNo,
.voteRankItem.isSecond .voteRankNo,
.voteRankItem.isThird .voteRankNo {
	color: #8b9298;
	background: rgba(128, 128, 128, 0.14);
	box-shadow: none;
}
.voteRankItem.isFirst .voteRankBar,
.voteRankItem.isSecond .voteRankBar,
.voteRankItem.isThird .voteRankBar {
	background: linear-gradient(90deg, #39a288, #5fc7ac);
}
.voteRankCount,
.voteRankItem.isFirst .voteRankCount,
.voteRankItem.isSecond .voteRankCount,
.voteRankItem.isThird .voteRankCount {
	color: var(--cac-primary);
}
.voteRankItem.isFirst .voteFlow { color: var(--cac-primary); }

/* 效能:長條改用 transform: scaleX 做動畫(GPU 合成、不觸發 layout/repaint),
   高解析度/大螢幕(4K、投影)才不會因為每幀重繪 width 而卡頓。 */
.voteRankBar {
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/* ============================================================
   即時開票：左側動畫投票箱 + 右側排行（2026-09-09）
   有票數進來時才掉票入箱（JS 觸發、非循環），下方顯示總票數。純 CSS。
   ============================================================ */
.voteSplit { display: flex; align-items: flex-start; gap: 2.5em; }
.voteRankCol { flex: 1 1 auto; min-width: 0; }
.voteBoxCol { flex: 0 0 190px; text-align: center; align-self: center; }

.vbScene { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.vbBin {
	position: absolute; left: 50%; bottom: 8px; width: 104px; height: 66px; margin-left: -52px;
	background: linear-gradient(180deg, #e8f5f1, #cfe9e1);
	border: 2px solid var(--cac-primary); border-radius: 10px;
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}
.vbSlot { position: absolute; left: 50%; top: -4px; width: 58px; height: 6px; margin-left: -29px; background: var(--cac-primary); border-radius: 4px; }
.vbBallot {
	position: absolute; left: 50%; top: 4px; width: 44px; height: 30px; margin-left: -22px;
	background: #fff; border: 2px solid var(--cac-primary); border-radius: 5px;
	box-shadow: 0 3px 8px rgba(16, 24, 40, 0.12);
	opacity: 0;   /* 平時隱藏；有票數進來時才由 JS 加 .isDrop 觸發掉票 */
}
/* 有新票時(JS 於 .vbScene 加 .isDrop)才掉一次票，結束回到隱藏 */
.vbScene.isDrop .vbBallot              { animation: vbDrop 1s cubic-bezier(0.5, 0, 0.4, 1); }
.vbScene.isDrop .vbBallot:nth-child(2) { animation-delay: 0.2s; }
.vbScene.isDrop .vbBallot:nth-child(3) { animation-delay: 0.4s; }
@keyframes vbDrop {
	0%   { transform: translateY(-34px) rotate(-6deg); opacity: 0; }
	15%  { opacity: 1; }
	70%  { transform: translateY(56px) rotate(4deg); opacity: 1; }
	100% { transform: translateY(64px) scale(0.5); opacity: 0; }
}
.vbTotal { margin-top: 0.5em; font-size: 2.6em; font-weight: 800; color: var(--cac-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.vbTotalLabel { color: var(--cac-muted); font-size: 0.9em; margin-top: 0.25em; }

@media screen and (max-width: 820px) {
	.voteSplit { flex-direction: column; align-items: center; gap: 1.2em; }
	.voteRankCol { width: 100%; }
	.voteBoxCol { flex: 0 0 auto; display: flex; align-items: center; gap: 1.2em; padding-top: 0; }
	.vbScene { width: 120px; height: 120px; }
	.vbTotal { margin-top: 0; font-size: 2.2em; }
}
/* 投票箱掉票同上：看板專用展示，不因 reduce-motion 關閉。 */