/* =========================================================
   shell.css｜使用者介面設計 全站外框：Header、頁面標題（Page Title）
   參考 digi／plan／web-design 的頁首架構：
   左＝字標＋課程名＋英文小標；右＝首頁／課程單元（大型下拉，含週次與狀態）／作業區／課程規範／資源／影音。
   視覺沿用本課程的 Tiffany Blue＋Figma Agent 紫＋FigJam 桃紅，深墨綠底呼應單元頁的 Figma 工具列。
   由 header.html 自動載入；頁面 <head> 也可直接連結避免閃爍。
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@500;700;900&family=Noto+Sans+TC:wght@400;500;700&family=JetBrains+Mono:wght@500;700;800&display=swap");

:root {
	--accent-color: #0ABAB5;
	--nav-color: rgba(255,255,255,.78);
	--nav-hover-color: #ffffff;
	--nav-dropdown-color: #3B4650;
	--nav-dropdown-hover-color: #067A76;
	--nav-mobile-background-color: #ffffff;
	--nav-font: "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
	--default-font: "Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif;
	--heading-font: "Chiron GoRound TC","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;

	--s-ink: #0F1A1A;
	--s-ink-2: #172424;
	--s-line: rgba(255,255,255,.1);
	--s-text: #F1F6F5;
	--s-mute: #9AABA9;
	--s-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--s-display: "Chiron GoRound TC", "Noto Sans TC", "PingFang TC", sans-serif;
	--s-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	/* 課程漸層：Tiffany Blue → Figma Agent 紫 → FigJam 桃紅 */
	--s-grad: linear-gradient(120deg, #0ABAB5 0%, #4F9FBF 55%, #8C86CF 100%);
	/* 各單元識別色 */
	--u1: #0ABAB5; --u2: #1E9E6B; --u3: #2F80C9; --u4: #6350C4; --u5: #8A4FD8;
	--u6: #EE4A85; --u7: #E4572E; --u8: #D98F00; --u9: #0E8E89; --u10: #4C3D9E; --u11: #1B6FB5;
	--hdr-h: 68px;
}

/* ---------- Header ---------- */
#header.header {
	--background-color: #18292D;
	--heading-color: #fff;
	height: var(--hdr-h);
	padding: 0;
	/* 柔和版：左側霧灰藍紫、右側深青，跟下方頁面標題（左青右紫）方向相反；彩度壓低，不搶內容 */
	background:
		radial-gradient(ellipse at 0% 0%, rgba(150,140,210,.16), transparent 55%),
		radial-gradient(ellipse at 100% 100%, rgba(10,186,181,.18), transparent 55%),
		linear-gradient(100deg, #1F2D38 0%, #1A2F31 55%, #163A3A 100%);
	border-bottom: 1px solid rgba(255,255,255,.06);
	box-shadow: none;
	font-family: var(--s-font);
}
.scrolled #header.header { box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
#header .container-xl { max-width: 1240px; padding: 0 24px; height: 100%; }
#header .logo { gap: 11px; line-height: 1.1; text-decoration: none; margin: 0; }
#header .logo .mark { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--s-grad); color: #fff; font: 800 14px/1 var(--s-mono); letter-spacing: .02em; box-shadow: 0 6px 16px -8px rgba(10,186,181,.6); }
#header .logo .txt { display: flex; flex-direction: column; }
#header .logo .sitename { font: 900 18px/1.15 var(--s-display); color: var(--s-text); margin: 0; letter-spacing: .02em; }
#header .logo small { font: 700 9.5px/1.3 var(--s-mono); letter-spacing: .16em; color: var(--s-mute); text-transform: uppercase; margin-top: 3px; }

@media (min-width: 1200px) {
	#header .navmenu > ul { gap: 2px; }
	#header .navmenu > ul > li > a, #header .navmenu > ul > li > a:focus {
		position: relative; color: #D5E2E0; font: 700 14.5px/1 var(--s-font); padding: 0 13px; height: var(--hdr-h); letter-spacing: .02em;
	}
	#header .navmenu > ul > li > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 15px; height: 2px; border-radius: 2px; background: var(--s-grad); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
	#header .navmenu > ul > li:hover > a, #header .navmenu > ul > li > a.active, #header .navmenu > ul > li > a.is-current { color: #fff; }
	#header .navmenu > ul > li:hover > a::after, #header .navmenu > ul > li > a.active::after, #header .navmenu > ul > li > a.is-current::after { transform: scaleX(1); }
	#header .navmenu li:last-child > a { padding-right: 13px; }
	#header .navmenu > ul > li > a .toggle-dropdown { color: inherit; }
	/* 課程單元：大型下拉選單（以 header 容器為定位基準、靠右對齊） */
	#header .navmenu li.dropdown.units { position: static; }
	/* 選單貼齊頁首底緣、不滑動，離開時延遲 0.28 秒才關閉，滑鼠往下移到第二排以後也不會消失 */
	#header .navmenu .dropdown.units > ul, #header .navmenu .dropdown.units:hover > ul { top: 100%; }
	#header .navmenu .dropdown.units > ul { transition: opacity .18s ease, visibility 0s linear .28s; }
	#header .navmenu .dropdown.units:hover > ul { transition-delay: 0s; }
	/* 點「課程單元」也能開關（觸控螢幕、或滑鼠移動時不小心離開都不會失效） */
	#header .navmenu .dropdown.units.is-open > ul { opacity: 1; visibility: visible; transition-delay: 0s; }
	#header .navmenu .dropdown.units.is-open > a::after { transform: scaleX(1); }
	#header .navmenu .dropdown.units > ul::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
	#header .navmenu .dropdown.units > ul {
		left: auto; right: 24px; transform: none; width: 740px; padding: 14px; border-radius: 18px;
		display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
		background: #fff; border: 1px solid #DCEDEB; box-shadow: 0 30px 60px -24px rgba(10,30,30,.5);
	}
	#header .navmenu .dropdown.units > ul > li { min-width: 0; }
	#header .navmenu .dropdown.units > ul > li.mega-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding: 2px 8px 8px; border-bottom: 1px solid #E6F2F1; margin-bottom: 4px; }
	#header .navmenu .dropdown.units > ul > li.mega-head b { font: 900 15px var(--s-display); color: #16191C; }
	#header .navmenu .dropdown.units > ul > li.mega-head b small { font: 700 11px var(--s-mono); color: #8A939C; letter-spacing: .08em; margin-left: 8px; }
	#header .navmenu .dropdown.units > ul > li.mega-head a { padding: 0; font: 700 12px var(--s-font); color: #067A76; display: inline; }
	#header .navmenu .dropdown.units > ul > li.mega-head a:hover { color: #0ABAB5; background: none; }
}
#header .navmenu .dropdown.units .u { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 10px; padding: 9px 10px !important; border-radius: 11px; white-space: normal !important; color: #16191C !important; font-family: var(--s-font) !important; transition: background .2s; }
#header .navmenu .dropdown.units .u:hover { background: #EFF8F7; }
#header .navmenu .dropdown.units .u.active { background: #DFF6F4; box-shadow: inset 3px 0 0 #0ABAB5; }
#header .navmenu .dropdown.units .u .no { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 800 12px/1 var(--s-mono); background: var(--c, #16191C); }
#header .navmenu .dropdown.units .u .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
#header .navmenu .dropdown.units .u .tt small { font: 600 10.5px/1.4 var(--s-mono); color: #8A939C; letter-spacing: .02em; }
#header .navmenu .dropdown.units .u .st { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 2px 8px; background: #DFF6F4; color: #067A76; }
#header .navmenu .dropdown.units .u .st.key { background: #FDE8F0; color: #C93A6C; }
#header .navmenu .dropdown.units .u.exam .no { background: linear-gradient(135deg, #16191C, #34404A); font-size: 10px; }
#header .navmenu .dropdown.units .u.exam .tt { color: #16191C; }

@media (max-width: 1199px) {
	#header .mobile-nav-toggle { color: #E3EEEC; margin-right: 0; font-size: 28px; }
	.mobile-nav-active #header .mobile-nav-toggle { color: #fff; top: 18px; right: 18px; }
	/* backdrop-filter 會讓 position:fixed 的手機選單被限制在 header 內，開啟選單時先關掉 */
	.mobile-nav-active #header.header { background: linear-gradient(100deg, #1F2D38 0%, #1A2F31 55%, #163A3A 100%); }
	.mobile-nav-active .navmenu { background: rgba(8,16,16,.8) !important; }
	#header .navmenu > ul { inset: 72px 14px 14px 14px; border-radius: 18px; padding: 10px; }
	#header .navmenu a, #header .navmenu a:focus { font-family: var(--s-font); font-size: 16px; color: #16191C; padding: 12px 14px; border-radius: 10px; }
	#header .navmenu > ul > li > a.active:not(.u), #header .navmenu > ul > li > a.is-current { color: #067A76; background: #EFF8F7; }
	#header .navmenu .dropdown.units > ul { margin: 4px 0 8px; padding: 6px; border-radius: 14px; border: 1px solid #DCEDEB; background: #F8FCFB; }
	#header .navmenu .dropdown.units > ul > li.mega-head { display: none; }
	#header .navmenu .dropdown.units .u .tt { font-size: 13.5px; }
	#header .navmenu a i.toggle-dropdown { background: #E6F2F1 !important; color: #16191C !important; }
}
@media (max-width: 575px) {
	#header .logo small { display: none; }
	#header .logo .sitename { font-size: 16px; }
}

/* ---------- 頁面標題（各單元頁頂）：深墨綠＋課程漸層光暈＋網點 ---------- */
.page-title.dark-background {
	--background-color: #142325;
	background: radial-gradient(ellipse at 6% 120%, rgba(10,186,181,.24), transparent 50%), radial-gradient(ellipse at 94% -20%, rgba(150,140,210,.18), transparent 50%), linear-gradient(100deg, #15302F 0%, #172A2D 50%, #1C2A36 100%) !important;
	padding: calc(var(--hdr-h) + 30px) 0 28px !important;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.page-title.dark-background::before { background: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 22px 22px !important; opacity: 1 !important; }
.page-title.dark-background::after { content: none; }
.page-title.dark-background .container { max-width: 1240px; padding: 0 24px; position: relative; z-index: 1; }
.page-title.dark-background h1 { font: 900 clamp(22px, 2.8vw, 30px)/1.25 var(--s-display); color: #fff; margin: 0 0 10px; letter-spacing: .02em; }
.page-title.dark-background .breadcrumbs ol { justify-content: flex-start; font: 600 13px var(--s-font); color: var(--s-mute); gap: 0; align-items: center; }
.page-title.dark-background .breadcrumbs ol li + li::before { content: "/"; color: rgba(255,255,255,.3); padding: 0 10px; display: inline; }
.page-title.dark-background .breadcrumbs a { color: #DCE8E6; font-family: var(--s-mono); font-size: 12px; letter-spacing: .06em; }
.page-title.dark-background .breadcrumbs a:hover { color: #fff; }
.page-title.dark-background .breadcrumbs .current { color: #7FE6E2; font-weight: 700; }
@media (max-width: 1199px) { .page-title.dark-background { padding: calc(var(--hdr-h) + 22px) 0 22px !important; } }

/* ---------- 回到頂端按鈕：統一配色 ---------- */
.scroll-top { background: var(--s-ink-2) !important; border: 1px solid rgba(255,255,255,.15); border-radius: 12px !important; }
.scroll-top:hover { background: #067A76 !important; }

/* ---------- 修正：AOS 會把還沒播放進場動畫的元素設成 pointer-events: none，
   首頁的單元卡片若剛好還沒觸發動畫（例如在視窗下緣），就會「點了沒反應」。
   全站改成永遠可以點，動畫照常播放。 ---------- */
[data-aos] { pointer-events: auto !important; }