/* =========================================================
   schedule-board.css｜課程規範區（schedule.html）專用
   03 雙校區 18 週進度：總覽條＋依階段分組的對照表
   05 校區規範：共同規範卡、校區差異對照表、情境對照
   只在 schedule.html 載入，沿用 site-agent.css 的色彩 Token（.sa-page 底下）。
   ========================================================= */
.sa-page {
	--sb-tp: var(--u-brand);
	--sb-tp-soft: #CFF1EE;
	--sb-hc: var(--u-agent);
	--sb-hc-soft: #E4DEFA;
	--sb-remote: #2563C9;
	--sb-remote-soft: #E3F0FF;
	--sb-off: #C2410C;
	--sb-off-soft: #FDECE5;
	--sb-exam: #B7791F;
	--sb-exam-soft: #FFF3C4;
}

/* ---------- 03-A 18 週總覽條 ---------- */
.sb-overview { padding: 18px 20px 16px; margin-bottom: 18px; }
.sb-ov-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.sb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--u-ink-2); }
.sb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sb-legend .sw { width: 16px; height: 12px; border-radius: 4px; display: inline-block; }
.sw.class-tp { background: var(--sb-tp-soft); box-shadow: inset 0 0 0 1px var(--sb-tp); }
.sw.class-hc { background: var(--sb-hc-soft); box-shadow: inset 0 0 0 1px var(--sb-hc); }
.sw.remote { background: var(--sb-remote); }
.sw.off { background: repeating-linear-gradient(135deg, var(--sb-off-soft) 0 3px, #F6B9A0 3px 5px); box-shadow: inset 0 0 0 1px #F2A07F; }
.sw.exam { background: #F5C842; }
.sw.now { background: #fff; box-shadow: inset 0 0 0 2px var(--u-ink); }
.sb-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-stats span { font-size: 12px; color: var(--u-ink-2); background: var(--u-bg); border: 1px solid var(--u-line); border-radius: 999px; padding: 3px 10px; }
.sb-stats b { font-family: var(--u-font-mono); color: var(--u-ink); }

.sb-strip-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.sb-strip { --cols: 18; display: grid; grid-template-columns: 54px repeat(var(--cols), minmax(46px, 1fr)); gap: 4px; min-width: 900px; }
.sb-strip .lab { display: flex; align-items: center; font: 700 12px/1.2 "Noto Sans TC", sans-serif; color: var(--u-ink-2); }
.sb-strip .lab.tp { color: var(--u-brand-strong); }
.sb-strip .lab.hc { color: var(--u-agent); }
/* 階段帶 */
.sb-strip .band { grid-row: 1; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--u-ink); background: var(--u-bg); border: 1px dashed #B9DCD9; white-space: nowrap; overflow: hidden; padding: 0 6px; }
.sb-strip .band b { font: 700 10px/1 var(--u-font-mono); color: var(--u-ink-3); }
.sb-strip .band.exam { background: #FFF8DB; border-color: #F0D27A; }
/* 週次 */
.sb-strip .wkn { grid-row: 2; text-align: center; font: 700 11px/1 var(--u-font-mono); color: var(--u-ink-3); padding: 4px 0 2px; border-radius: 6px; }
.sb-strip .wkn.is-now { background: var(--u-ink); color: #fff; }
/* 每週格 */
.sb-strip .cell { position: relative; appearance: none; border: 0; cursor: pointer; min-height: 46px; border-radius: 8px; padding: 6px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 700 11px/1.25 "Noto Sans TC", sans-serif; color: var(--u-ink); text-align: center; transition: transform .15s var(--sa-ease), box-shadow .15s; }
.sb-strip .cell small { font: 600 10px/1 var(--u-font-mono); color: var(--u-ink-3); }
.sb-strip .cell:hover, .sb-strip .cell:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(16,20,23,.5); outline: none; }
.sb-strip .cell.tp.t-class { background: var(--sb-tp-soft); }
.sb-strip .cell.hc.t-class { background: var(--sb-hc-soft); }
.sb-strip .cell.t-remote { background: var(--sb-remote); color: #fff; }
.sb-strip .cell.t-remote small { color: rgba(255,255,255,.8); }
.sb-strip .cell.t-off { background: repeating-linear-gradient(135deg, var(--sb-off-soft) 0 5px, #F9CDB9 5px 8px); color: var(--sb-off); }
.sb-strip .cell.t-exam { background: #F5C842; }
.sb-strip .cell.t-exam small { color: #7A5A00; }
.sb-strip .cell.is-past { opacity: .45; }
.sb-strip .cell.is-now { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--u-ink); opacity: 1; }
.sb-strip .cell.is-diff::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--u-figjam); }
html[data-campus="tp"] .sb-strip .cell.is-diff::after, html[data-campus="hc"] .sb-strip .cell.is-diff::after { display: none; }
html[data-campus="tp"] .sb-strip .hc, html[data-campus="hc"] .sb-strip .tp { display: none; }

/* ---------- 03-B 對照表 ---------- */
.sb-table-wrap { overflow: hidden; }
.sb-table thead th.wk-h { width: 84px; text-align: center; }
.sb-table thead th { font-size: 15px; }
.sb-table thead th .sa-mono { font-size: 11px; }
.sb-table td { padding: 12px 16px; vertical-align: middle; }
.sb-table tr:nth-child(even) td { background: rgba(255,255,255,.7); }
.sb-table td.wk { width: 84px; }
.sb-table td.wk b { display: block; font: 900 17px/1.2 var(--u-font-mono); }
.sb-diff { display: inline-block; margin-top: 4px; font: 700 10.5px/1 "Noto Sans TC", sans-serif; padding: 3px 6px; border-radius: 6px; background: var(--u-figjam-soft); color: var(--u-figjam-strong); white-space: nowrap; }
html[data-campus="tp"] .sb-table .sb-diff, html[data-campus="hc"] .sb-table .sb-diff { display: none; }
/* 階段分組列 */
.sb-table tr.sb-phase td { background: var(--u-ink) !important; color: #fff; padding: 10px 16px; border-top: 0; }
.sb-table tr.sb-phase td > * { vertical-align: middle; }
.sb-table tr.sb-phase .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--u-brand-grad); font: 700 12px/1 var(--u-font-mono); margin-right: 10px; }
.sb-table tr.sb-phase b { font-family: var(--u-font-display); font-size: 16px; margin-right: 10px; }
.sb-table tr.sb-phase .w { font: 700 11.5px/1 var(--u-font-mono); color: var(--u-brand); background: rgba(10,186,181,.14); padding: 4px 8px; border-radius: 6px; margin-right: 12px; }
.sb-table tr.sb-phase .d { font-size: 13px; color: rgba(255,255,255,.7); }
/* 每格：日期塊＋內容 */
.sb-cell { display: flex; align-items: center; gap: 14px; }
.sb-date { flex: none; width: 58px; text-align: center; border-radius: 10px; padding: 6px 0 5px; background: var(--u-paper); border: 1px solid var(--u-line); line-height: 1.1; }
.sb-date b { display: block; font: 800 15px/1.1 var(--u-font-mono); color: var(--u-ink); }
.sb-date small { font-size: 11px; color: var(--u-ink-3); }
.tp-c .sb-date { border-top: 3px solid var(--sb-tp); }
.hc-c .sb-date { border-top: 3px solid var(--sb-hc); }
.sb-table td .sb-date .cl { display: none; }
.sb-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 14.5px; color: var(--u-ink); line-height: 1.55; }
.sb-body .sa-tag { font-size: 11.5px; }
.sb-body .topic-plain { color: var(--u-ink); }
.sb-unit { font: 700 10.5px/1 var(--u-font-mono); letter-spacing: .04em; padding: 3px 6px; border-radius: 5px; background: var(--u-brand-soft); color: var(--u-brand-strong); }
.sb-table td.t-remote { background: linear-gradient(90deg, var(--sb-remote-soft), rgba(255,255,255,.7) 70%) !important; }
.sb-table td.t-exam { background: linear-gradient(90deg, #FFF6D6, rgba(255,255,255,.7) 70%) !important; }
.sb-table td.t-off { background: repeating-linear-gradient(135deg, #FFF6F2 0 8px, #FDEBE3 8px 16px) !important; }
.sb-table td.t-off .sb-date { opacity: .7; }
.sb-off { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sb-off); }
.sb-off b { flex: none; white-space: nowrap; font-size: 12px; color: #fff; background: var(--sb-off); padding: 2px 8px; border-radius: 6px; }
.sb-muted { flex-basis: 100%; font-size: 12.5px; color: var(--u-ink-3); text-decoration: line-through; text-decoration-color: rgba(138,145,153,.5); }
/* 本週 */
.sb-table tr.is-now td { box-shadow: inset 0 2px 0 var(--u-ink), inset 0 -2px 0 var(--u-ink); }
.sb-table tr.is-now td.wk { box-shadow: inset 5px 0 0 var(--u-brand), inset 0 2px 0 var(--u-ink), inset 0 -2px 0 var(--u-ink); }
.sb-table tr.is-now td.wk::after { margin-top: 6px; }
.sb-table tr.is-past:not(.is-now) td { opacity: .55; }
.sb-table tr.is-past:not(.is-now):hover td { opacity: 1; }

/* ---------- 05 規範 ---------- */
.sb-subh { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 900; margin: 30px 0 14px; }
.sb-subh:first-of-type { margin-top: 6px; }
.sb-subh .n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 13px/1 var(--u-font-mono); color: #fff; background: var(--u-ink-grad); }
.sb-musts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.sb-must { position: relative; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--u-brand); }
.sb-must.t-exam { border-top-color: #F5C842; }
.sb-must .ic { position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 17px; background: var(--u-brand-grad); }
.sb-must.t-exam .ic { background: linear-gradient(135deg, #F5C842, #D69E00); }
.sb-must h4 { font-size: 17px; font-weight: 900; margin: 0; padding-right: 46px; }
.sb-must .big { display: flex; align-items: baseline; gap: 6px; }
.sb-must .big b { font: 900 30px/1.1 var(--u-font-mono); color: var(--u-ink); letter-spacing: -.01em; }
.sb-must .big small { font-size: 13px; font-weight: 700; color: var(--u-ink-3); }
.sb-must p { margin: 0; font-size: 14px; line-height: 1.7; }
.sb-must p strong { color: var(--u-ink); }
.sb-must .warn { margin-top: auto; padding: 8px 10px; border-radius: 10px; background: var(--u-warn-soft); color: var(--u-ink); font-size: 13px; }
.sb-must .warn i { color: var(--u-warn); margin-right: 4px; }

.sb-compare-wrap { overflow: hidden; }
.sb-compare { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; border-collapse: separate; border-spacing: 0; font-family: inherit; font-weight: 400; color: inherit; font-size: 14px; }
.sb-compare th, .sb-compare td { border-left: 0; border-right: 0; border-bottom: 0; }
.sb-compare thead th { background: var(--u-ink); color: #fff; padding: 13px 18px; font-size: 14px; text-align: left; }
.sb-compare thead th:first-child { width: 190px; }
.sb-compare thead th.tp { box-shadow: inset 0 -4px 0 var(--sb-tp); }
.sb-compare thead th.hc { box-shadow: inset 0 -4px 0 var(--sb-hc); }
.sb-compare tbody th { padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--u-ink); background: var(--u-bg); border-top: 1px solid var(--u-line); white-space: nowrap; vertical-align: top; }
.sb-compare tbody th i { color: var(--u-brand-strong); margin-right: 8px; }
.sb-compare td { padding: 14px 18px; border-top: 1px solid var(--u-line); vertical-align: top; background: rgba(255,255,255,.8); color: var(--u-ink-2); width: 40%; }
.sb-compare td + td { border-left: 1px solid var(--u-line); }
.sb-big { display: block; font-family: var(--u-font-display); font-size: 20px; font-weight: 900; color: var(--u-ink); line-height: 1.3; }
.sb-compare td small { font-size: 12.5px; color: var(--u-ink-3); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chip { display: inline-flex; align-items: center; font: 700 12.5px/1 "Noto Sans TC", sans-serif; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.sb-chip.remote { background: var(--sb-remote-soft); color: var(--sb-remote); }
.sb-chip.off { background: var(--sb-off-soft); color: var(--sb-off); }
.sb-chip.exam { background: var(--sb-exam-soft); color: #92400E; font-size: 14px; }
.sb-none { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--u-ink-3); }
.sb-none::before { content: "—"; color: #B9C9CB; }
.sb-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--u-warn-soft); color: var(--u-ink) !important; font-size: 13px; line-height: 1.6; }
.sb-note i { color: var(--u-warn); margin-right: 4px; }
.sb-note.info { background: var(--u-bg); }
.sb-note.info i { color: var(--u-brand-strong); }
html[data-campus="tp"] .sb-compare .hc-c, html[data-campus="hc"] .sb-compare .tp-c { display: none; }
html[data-campus="tp"] .sb-compare td, html[data-campus="hc"] .sb-compare td { width: auto; }
.sb-compare tbody th { width: 200px; }
html[data-campus="tp"] .sb-diff-legend, html[data-campus="hc"] .sb-diff-legend { display: none !important; }

.sb-cases { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.sb-case { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); align-items: center; gap: 10px; padding: 13px 16px; border-radius: 14px; background: var(--u-paper); border: 1px solid var(--u-line); font-size: 14px; }
.sb-case .q { color: var(--u-ink); font-weight: 700; }
.sb-case > i { color: var(--u-ink-3); }
.sb-case .r { color: var(--u-ink-2); }
.sb-case .r b { color: var(--u-brand-strong); }
.sb-case.bad { border-color: #F6C3AE; background: #FFF8F5; }
.sb-case.bad .r b { color: var(--sb-off); }

/* ---------- 響應式 ---------- */
@media (max-width: 991px) {
	.sb-musts { grid-template-columns: 1fr; }
	.sb-cases { grid-template-columns: 1fr; }
	/* 進度表 → 每週一張卡（覆寫 site-agent.css 的卡片版） */
	.sb-table tr { grid-template-columns: 60px minmax(0,1fr); }
	.sb-table tr.sb-phase { display: block; }
	.sb-table tr.sb-phase td { display: block; }
	.sb-table tr.sb-phase .d { display: block; margin-top: 6px; }
	.sb-table td.wk { grid-row: span 2; }
	.sb-table td.tp-c, .sb-table td.hc-c { padding: 10px 12px; }
	.sb-table td.hc-c { border-top: 1px dashed var(--u-line) !important; }
	.sb-table td.t-remote, .sb-table td.t-exam, .sb-table td.t-off { background-clip: padding-box; }
	.sb-table td.t-remote { background: var(--sb-remote-soft) !important; }
	.sb-table td.t-exam { background: #FFF6D6 !important; }
	.sb-table td.t-off { background: repeating-linear-gradient(135deg, #FFF6F2 0 8px, #FDEBE3 8px 16px) !important; }
	.sb-table td .sb-date .cl { display: block; margin: 0 auto 4px; width: max-content; }
	.sb-date { width: 56px; }
	html[data-campus="tp"] .sb-table td.wk, html[data-campus="hc"] .sb-table td.wk { grid-row: span 1; }
	.sb-compare thead { display: none; }
	.sb-compare, .sb-compare tbody, .sb-compare tr, .sb-compare th, .sb-compare td { display: block; width: 100% !important; }
	.sb-compare tbody th { border-top: 1px solid var(--u-line); }
	.sb-compare td { border-top: 0; border-left: 0 !important; padding: 10px 18px; }
	.sb-compare td::before { display: block; font: 700 11px/1 var(--u-font-mono); letter-spacing: .06em; margin-bottom: 6px; }
	.sb-compare td.tp-c::before { content: "台北校區"; color: var(--u-brand-strong); }
	.sb-compare td.hc-c::before { content: "新竹校區"; color: var(--u-agent); }
}
@media (max-width: 640px) {
	.sb-overview { padding: 14px 12px; }
	.sb-case { grid-template-columns: 1fr; gap: 2px; }
	.sb-case > i { display: none; }
	.sb-compare tbody th { white-space: normal; }
	.sb-chip { white-space: normal; }
}