/* ===== 逐點通 Design System — see DESIGN.md =====
* 最終色票 2026-04-18 定案：
* 數 #2563EB 藍 / 英 #7C3AED 紫 / 國 #DC2626 紅 / 自 #D97706 amber / 社 #0F766E teal
* 全站禁寫死 hex，一律用 var(--*)
* ================================================== */
:root {
/* ── 中性色 ── */
--bg: #FAFAF8;
--bg-surface: #F5F5F0;
--bg-card: #FFFFFF;
--bg-card2: #F5F5F0;
--border: #E8E5DE;
/* ── 主色 (藍／品牌／focus) ── */
--accent: #2563EB;
--accent2: #1D4ED8;
--accent-hover: #1D4ED8;
--accent-light: #EFF6FF;
--accent-border: #93C5FD;
/* ── 語意色 ── */
--success: #16A34A;
--success-light: #F0FDF4;
--success-border: #86EFAC;
--success-text: #166534;
--warning: #CA8A04; /* ochre — 詳解區黃線 */
--warning-light: #FFFBEB;
--warning-border: #FDE68A;
--warning-text: #92400E;
--danger: #DC2626;
--danger-light: #FEF2F2;
--danger-border: #FECACA;
--danger-text: #991B1B;
/* ── 舊別名（相容性，勿在新程式碼用）── */
--accent-green: var(--success);
--accent-red: var(--danger);
--accent-yellow: var(--warning);
--green-light: var(--success-light);
--red-light: var(--danger-light);
--yellow-light: var(--warning-light);
/* ── 文字 ── */
--text-primary: #1A1A18;
--text-secondary: #6B6B63;
--text-muted: #9C9C94;
--text-on-accent: #FFFFFF;
/* ── 圓角 ── */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
/* ── 陰影 ── */
--shadow-xs: 0 1px 2px rgba(0,0,0,.06);
--shadow: 0 1px 3px rgba(0,0,0,.04);
--shadow-md: 0 2px 8px rgba(0,0,0,.06);
--shadow-lg: 0 10px 30px rgba(0,0,0,.25);
/* ── 字體 ── */
--font: 'Noto Sans TC', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* ── 動畫 ── */
--t-fast: 120ms ease;
--transition: 150ms ease;
--t: 150ms ease;
--t-slow: 300ms ease;
/* ── 間距 (4px base) ── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
/* ── 版面 ── */
--container: 680px;
--container-wide: 900px;
--hit-min: 44px;
/* ── 科目主題色（最終定案 2026-04-18）── */
--subject-math: #2563EB; --subject-math-light: #EFF6FF;
--subject-eng: #7C3AED; --subject-eng-light: #F5F3FF;
--subject-chinese: #DC2626; --subject-chinese-light: #FEF2F2;
--subject-science: #D97706; --subject-science-light: #FEF3C7;
--subject-social: #0F766E; --subject-social-light: #F0FDFA;
/* 短別名（給新程式碼用）*/
--subj-math: var(--subject-math); --subj-math-light: var(--subject-math-light);
--subj-eng: var(--subject-eng); --subj-eng-light: var(--subject-eng-light);
--subj-chinese: var(--subject-chinese); --subj-chinese-light: var(--subject-chinese-light);
--subj-science: var(--subject-science); --subj-science-light: var(--subject-science-light);
--subj-social: var(--subject-social); --subj-social-light: var(--subject-social-light);
/* ── 難度色 (送分→魔王) ── */
--diff-gift-bg: #DCFCE7; --diff-gift-fg: #166534;
--diff-basic-bg: #DBEAFE; --diff-basic-fg: #1E40AF;
--diff-mid-bg: #FEF3C7; --diff-mid-fg: #92400E;
--diff-key-bg: #FED7AA; --diff-key-fg: #9A3412;
--diff-boss-bg: #FECACA; --diff-boss-fg: #991B1B;
/* ── 會考等級色 ── */
--grade-a-bg: #34D399; --grade-a-fg: #064E3B;
--grade-b-bg: #FBBF24; --grade-b-fg: #78350F;
--grade-c-bg: #F87171; --grade-c-fg: #7F1D1D;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); font-size:14px; background:var(--bg); color:var(--text-primary); min-height:100vh; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
/* ── Element type defaults (DS 對齊) ──
* 注意：h2/h3 不硬寫 color，交給父層繼承，避免在有色卡片裡撞字白
* (卡片內文字色 = 卡片 color 繼承；若要指定用 .t-h2/.t-h3 class)
*/
h1 { font-size:1.8rem; font-weight:700; color:var(--accent); line-height:1.25; }
h2 { font-size:1.2rem; font-weight:700; line-height:1.35; }
h3 { font-size:1rem; font-weight:700; line-height:1.4; }
p { line-height:1.7; }
code,kbd,samp { font-family:var(--font-mono); font-size:.9em; }
small { font-size:.8rem; color:var(--text-secondary); }
/* ── Type roles（DS 11 class，用於直接套用字級）── */
.t-display { font-size:2rem; font-weight:700; line-height:1.2; letter-spacing:-.01em; color:var(--accent); }
.t-h1 { font-size:1.8rem; font-weight:700; line-height:1.25; color:var(--accent); }
.t-h2 { font-size:1.2rem; font-weight:700; line-height:1.35; color:var(--text-primary); }
.t-h3 { font-size:1rem; font-weight:700; line-height:1.4; color:var(--text-primary); }
.t-body { font-size:.95rem; font-weight:400; line-height:1.7; color:var(--text-primary); }
.t-body-sm { font-size:.85rem; font-weight:400; line-height:1.65; color:var(--text-primary); }
.t-helper { font-size:.8rem; font-weight:400; line-height:1.55; color:var(--text-secondary); }
.t-caption { font-size:.72rem; font-weight:500; line-height:1.45; color:var(--text-muted); letter-spacing:.02em; }
.t-overline{ font-size:.72rem; font-weight:700; line-height:1; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; }
.t-stat { font-size:2rem; font-weight:800; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.t-score { font-size:4rem; font-weight:800; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.t-mono { font-family:var(--font-mono); font-size:.85rem; }
/* ===== Background Orbs (deprecated, kept for backward compat) ===== */
.bg-orbs { display:none; }
.orb { display:none; }
/* ===== Layout ===== */
.container { position:relative; z-index:1; max-width:680px; margin:0 auto; padding:2rem 1.25rem 4rem; }
.container-wide { max-width:900px; }
/* ===== Card ===== */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.card:hover { /* no default hover on all cards */ }
.card.hover-accent:hover { border-color:var(--accent); box-shadow:var(--shadow-md); }
.card+.card { margin-top:.85rem; }
.card2 { background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin-top:.75rem; font-size:.85rem; color:var(--text-primary); }
/* ===== Tags & Chips (DS) ===== */
.ds-tag { display:inline-flex; align-items:center; gap:.3rem; padding:3px 10px; border-radius:12px; font-size:.75rem; font-weight:600; }
.ds-tag.t-strong { background:var(--success-light); color:var(--success-text); }
.ds-tag.t-weak { background:var(--danger-light); color:var(--danger-text); border:1px solid var(--danger-border); }
.ds-tag.t-mid { background:var(--warning-light); color:var(--warning-text); }
.ds-tag.t-neutral { background:var(--bg-card2); color:var(--text-secondary); border:1px solid var(--border); }
.ds-chip { display:inline-flex; align-items:center; gap:.3rem; padding:4px 12px; border-radius:var(--radius-pill); border:1.5px solid var(--border); background:#fff; color:var(--text-secondary); font-size:.75rem; font-weight:600; cursor:pointer; transition:all var(--t); }
.ds-chip.active { background:var(--accent-hover); color:#fff; border-color:var(--accent-hover); }
.ds-chip:hover:not(.active) { border-color:var(--accent); color:var(--accent); }
/* ===== Progress (DS) ===== */
.ds-bar { height:4px; background:var(--border); border-radius:4px; overflow:hidden; }
.ds-bar .ds-fill { height:100%; background:var(--accent); border-radius:4px; transition:width var(--t-slow); }
.ds-track { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.ds-track .ds-fill { height:100%; background:var(--accent); border-radius:4px; }
/* ===== Stats & Score (DS) ===== */
.ds-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.ds-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.85rem .5rem; text-align:center; }
.ds-stat .val { font-size:1.4rem; font-weight:800; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.ds-stat .lbl { font-size:.72rem; color:var(--text-muted); margin-top:4px; }
.ds-scorewrap { padding:1.25rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); text-align:center; box-shadow:var(--shadow); }
.ds-scorebig { font-size:4rem; font-weight:800; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.ds-scorebig .den { font-size:1.6rem; color:var(--text-secondary); }
.ds-scorewrap .pct { color:var(--text-secondary); margin-top:.35rem; font-size:.95rem; }
/* ===== Site Header ===== */
.site-header { text-align:center; padding:2.5rem 0 2rem; }
.site-header .logo { font-size:3.5rem; margin-bottom:.5rem; }
.site-header h1 { font-size:2rem; font-weight:700; color:var(--accent); }
.site-header .subtitle { color:var(--text-secondary); margin-top:.25rem; }
/* ===== Buttons (DS 對齊) ===== */
.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.65rem 1.25rem; border-radius:var(--radius-sm); border:none; cursor:pointer; font-size:.95rem; font-family:var(--font); font-weight:600; transition:all var(--t); text-decoration:none; white-space:nowrap; min-height:var(--hit-min); }
.btn-primary { background:var(--accent); color:var(--text-on-accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--bg-card2); color:var(--text-primary); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent); }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text-primary); border-color:var(--text-secondary); }
.btn-sm { padding:.4rem .85rem; font-size:.85rem; min-height:36px; }
.btn-lg { padding:.85rem 2rem; font-size:1.1rem; min-height:52px; }
/* ===== Card (DS 對齊) ===== */
/* ===== Inputs (DS 對齊) ===== */
.input-row { display:flex; gap:.5rem; }
.input-row input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
flex:1; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
color:var(--text-primary); padding:.65rem 1rem; font-size:1rem; outline:none; transition:border-color .2s; font-family:inherit;
}
.input-row input:focus, input:focus, select:focus, textarea:focus { border-color:var(--accent); }
input.has-error, select.has-error, textarea.has-error { border-color:var(--danger); }
label.ds-label { display:block; font-size:.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:.35rem; }
.ds-err { font-size:.78rem; color:var(--danger); margin-top:.25rem; }
.ds-help { font-size:.78rem; color:var(--text-muted); margin-top:.25rem; }
/* ===== Student Login ===== */
.login-card h2 { font-size:1.2rem; margin-bottom:1.25rem; color:var(--text-secondary); }
.student-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.6rem; margin-bottom:1rem; }
.student-btn { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); padding:.65rem .5rem; cursor:pointer; font-size:.9rem; text-align:center; transition:all .2s; font-family:inherit; }
.student-btn:hover { border-color:var(--accent); background:var(--accent-light); }
.or-divider { text-align:center; color:var(--text-muted); font-size:.85rem; position:relative; margin:1rem 0; }
.or-divider::before,.or-divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--border); }
.or-divider::before { left:0; } .or-divider::after { right:0; }
/* ===== Chapter Grid ===== */
.chapter-card { margin-top:1.25rem; }
.welcome-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.welcome-row strong { color:var(--accent); }
.chapter-grid { display:grid; grid-template-columns:1fr; gap:.75rem; }
.chapter-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem 1.25rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); transition:all .2s; }
.chapter-item:hover { border-color:var(--accent); background:var(--accent-light); }
.chapter-label { flex:1; min-width:0; }
.chapter-unit { display:block; font-size:.75rem; color:var(--text-muted); margin-bottom:.15rem; }
.chapter-name { display:block; font-weight:600; font-size:.98rem; color:var(--text-primary); }
.chapter-actions { display:flex; gap:.5rem; flex-shrink:0; }
.teacher-link-row { text-align:center; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
/* ===== Quiz Header / Progress ===== */
.quiz-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 0 .75rem; gap:1rem; flex-wrap:wrap; }
.quiz-meta { color:var(--text-secondary); font-size:.9rem; }
.quiz-meta .sep { margin:0 .3rem; }
.progress-info { font-size:.9rem; color:var(--text-secondary); }
.progress-bar-wrap { height:4px; background:var(--border); border-radius:4px; margin-bottom:1.5rem; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--accent); border-radius:4px; transition:width .4s ease; }
/* ===== Quiz Card ===== */
.q-number { font-size:.8rem; color:var(--accent); font-weight:700; letter-spacing:.05em; margin-bottom:.5rem; }
.q-text { font-size:1.08rem; line-height:1.7; margin-bottom:1rem; color:var(--text-primary); }
.q-image-wrap { text-align:center; margin-bottom:1.25rem; padding:.75rem; background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.q-image-wrap img { max-width:100%; max-height:300px; height:auto; border-radius:6px; }
/* ===== 題目圖／題組圖／選項圖（五科共用，勿在 year-viewer 重覆定義） ===== */
.q-figure { text-align:center; margin:0 0 .75rem; }
.q-figure img,
.q-figure-img img { max-width:100%; max-height:300px; height:auto; border-radius:8px; border:1px solid var(--border); display:inline-block; }
.passage-figures { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 1rem; }
.passage-figures img { max-width:100%; max-height:300px; height:auto; border-radius:8px; border:1px solid var(--border); }
.option-img { text-align:center; }
.option-img img { max-width:100%; max-height:150px; height:auto; border-radius:4px; margin-bottom:4px; }
.listening-images { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.listening-images img { max-width:30%; max-height:200px; height:auto; border-radius:8px; border:1.5px solid var(--border); cursor:pointer; }
/* 保險底線：任何圖片不得超出容器寬度（避免未來新 class 漏訂） */
img { max-width:100%; height:auto; }
/* ===== Options ===== */
.options-grid { display:grid; gap:.6rem; }
.option-btn { display:flex; align-items:flex-start; gap:.85rem; padding:.9rem 1.1rem; background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; text-align:left; color:var(--text-primary); font-size:.97rem; font-family:inherit; transition:all .2s; width:100%; line-height:1.5; }
.option-btn:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-light); }
.option-btn:disabled { cursor:default; }
.opt-key { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--bg-card2); border:1px solid var(--border); font-size:.8rem; font-weight:700; flex-shrink:0; transition:all .2s; color:var(--text-secondary); }
.option-btn.correct { border-color:var(--accent-green); background:rgba(22,163,74,0.06); }
.option-btn.correct .opt-key { background:var(--accent-green); color:#fff; border-color:var(--accent-green); }
.option-btn.wrong { border-color:var(--accent-red); background:rgba(220,38,38,0.05); }
.option-btn.wrong .opt-key { background:var(--accent-red); color:#fff; border-color:var(--accent-red); }
/* ===== Result Banner ===== */
.result-banner { margin-top:1.25rem; padding:.9rem 1.25rem; border-radius:var(--radius-sm); font-size:1.05rem; font-weight:700; animation:fadeIn .25s ease; line-height:1.4; }
.result-correct { background:rgba(22,163,74,0.08); border:1.5px solid rgba(22,163,74,0.3); color:var(--accent-green); }
.result-wrong { background:rgba(220,38,38,0.06); border:1.5px solid rgba(220,38,38,0.25); color:var(--accent-red); }
/* ===== Explanation Box ===== */
.explanation-box { margin-top:1.25rem; padding:1.1rem 1.25rem; background:#fffbeb; border:1px solid #fde68a; border-left:4px solid var(--accent-yellow); border-radius:var(--radius-sm); animation:fadeIn .3s ease; }
.exp-header { font-weight:700; color:var(--accent-yellow); margin-bottom:.5rem; font-size:.9rem; }
.exp-body { font-size:.92rem; color:var(--text-primary); line-height:1.7; white-space:pre-wrap; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* ===== Nav Row ===== */
.nav-row { display:flex; justify-content:flex-end; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
/* ===== Result Card ===== */
.result-card { text-align:center; }
.result-emoji { font-size:4rem; margin-bottom:.5rem; }
.result-card h2 { font-size:1.5rem; margin-bottom:1.5rem; }
.score-display { font-size:4.5rem; font-weight:800; color:var(--accent); line-height:1; }
.score-den { font-size:2rem; color:var(--text-secondary); }
.score-pct { color:var(--text-secondary); margin-top:.5rem; font-size:1.1rem; }
.result-actions { display:flex; gap:.75rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }
.wrong-section { text-align:left; margin-top:2rem; }
.wrong-section h3 { font-size:.95rem; color:var(--accent-red); margin-bottom:1rem; }
.wrong-item { padding:.8rem 1rem; background:rgba(220,38,38,0.04); border:1px solid rgba(220,38,38,0.12); border-radius:var(--radius-sm); margin-bottom:.6rem; font-size:.88rem; line-height:1.6; }
.wrong-q { font-weight:600; margin-bottom:.3rem; }
.wrong-your { color:var(--accent-red); font-size:.85rem; }
.wrong-ans { color:var(--accent-green); font-size:.85rem; font-weight:600; }
.wrong-exp { color:var(--text-secondary); font-size:.83rem; margin-top:.4rem; padding-top:.4rem; border-top:1px solid var(--border); }
/* ===== Teacher Dashboard ===== */
.teacher-login-card { max-width:400px; margin:4rem auto; text-align:center; }
.teacher-login-card .logo { font-size:3rem; margin-bottom:.5rem; }
.teacher-login-card h2 { margin-bottom:.25rem; }
.teacher-login-card p { color:var(--text-secondary); margin-bottom:1rem; }
.error-msg { color:var(--accent-red); font-size:.9rem; margin-top:.5rem; }
.stats-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin:1.25rem 0; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem 1.25rem; text-align:center; }
.stat-val { font-size:2rem; font-weight:800; color:var(--accent); }
.stat-label { font-size:.8rem; color:var(--text-secondary); margin-top:.15rem; }
.filter-row { display:flex; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.filter-row select { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); padding:.5rem .85rem; font-family:inherit; font-size:.9rem; cursor:pointer; }
.table-card { padding:0; overflow-x:auto; }
.score-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.score-table th { background:var(--bg-card2); padding:.85rem 1rem; text-align:left; color:var(--text-secondary); font-size:.8rem; font-weight:600; border-bottom:1px solid var(--border); }
.score-table td { padding:.8rem 1rem; border-bottom:1px solid var(--border); }
.score-table tr:last-child td { border-bottom:none; }
.score-table tr:hover td { background:var(--bg-surface); }
.score-high { color:#16a34a; font-weight:700; }
.score-mid { color:#d97706; font-weight:700; }
.score-low { color:#dc2626; font-weight:700; }
.empty-msg { text-align:center; padding:2rem; color:var(--text-muted); }
/* ===== Loading ===== */
.loading-spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg)} }
/* ===== Subject Cards (Entry Page) ===== */
.subject-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem; }
.subject-card { display:flex; flex-direction:column; align-items:center; padding:2.5rem 1.5rem; background:var(--bg-card); border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all .3s; text-decoration:none; color:inherit; box-shadow:var(--shadow); }
.subject-card:hover { border-color:var(--accent); box-shadow:var(--shadow-md); }
.subject-card .icon { font-size:4rem; margin-bottom:1rem; }
.subject-card h2 { font-size:1.3rem; margin-bottom:.3rem; }
.subject-card p { color:var(--text-secondary); font-size:.9rem; }
/* ===== Subject Icon (五科 SVG — 內文通用) =====
*
* 需要大尺寸卡片 icon：加 subj-ico--lg
* 路徑改動只需動這裡；全站自動更新
* ================================================ */
.subj-ico {
display: inline-block;
width: 1.1em; height: 1.1em;
vertical-align: -0.2em;
background-color: currentColor;
-webkit-mask: center/contain no-repeat;
mask: center/contain no-repeat;
flex-shrink: 0;
}
.subj-ico--lg { width: 44px; height: 44px; vertical-align: middle; }
@media (max-width: 480px) {
.subj-ico--lg { width: 38px; height: 38px; }
}
/* 預設帶科目色；父元素若有 color 會覆蓋（h1 subject-color 就生效） */
.subj-ico--chinese { color: var(--subject-chinese); -webkit-mask-image: url("/assets/icons/subj-chinese.svg"); mask-image: url("/assets/icons/subj-chinese.svg"); }
.subj-ico--eng { color: var(--subject-eng); -webkit-mask-image: url("/assets/icons/subj-eng.svg"); mask-image: url("/assets/icons/subj-eng.svg"); }
.subj-ico--math { color: var(--subject-math); -webkit-mask-image: url("/assets/icons/subj-math.svg"); mask-image: url("/assets/icons/subj-math.svg"); }
.subj-ico--science { color: var(--subject-science); -webkit-mask-image: url("/assets/icons/subj-science.svg"); mask-image: url("/assets/icons/subj-science.svg"); }
.subj-ico--social { color: var(--subject-social); -webkit-mask-image: url("/assets/icons/subj-social.svg"); mask-image: url("/assets/icons/subj-social.svg"); }
/* ===== Nav Icon (currentColor 可染色) =====
*
* 顏色跟著 color 屬性走（mask 技術）
* ========================================== */
.nav-ico {
display: inline-block;
width: 1.1em; height: 1.1em;
vertical-align: -0.2em;
background-color: currentColor;
-webkit-mask: center/contain no-repeat;
mask: center/contain no-repeat;
flex-shrink: 0;
}
.nav-ico--lg { width: 44px; height: 44px; vertical-align: middle; }
@media (max-width: 480px) {
.nav-ico--lg { width: 38px; height: 38px; }
}
.nav-ico--diagnostic {
-webkit-mask-image: url("/assets/icons/nav-diagnostic.svg");
mask-image: url("/assets/icons/nav-diagnostic.svg");
}
.nav-ico--mylearning {
-webkit-mask-image: url("/assets/icons/nav-mylearning.svg");
mask-image: url("/assets/icons/nav-mylearning.svg");
}
/* ===== UI Icon (Antigravity 線稿組，取代 emoji) =====
*
* 同 nav-ico 的 mask 機制，顏色跟著 color 走
* 對應關係見 design-system/ANTIGRAVITY_SPEC.md
* ============================================================= */
.ui-ico {
display: inline-block;
width: 1.1em; height: 1.1em;
vertical-align: -0.2em;
background-color: currentColor;
-webkit-mask: center/contain no-repeat;
mask: center/contain no-repeat;
flex-shrink: 0;
}
.ui-ico--lg { width: 44px; height: 44px; vertical-align: middle; }
.ui-ico--hello { -webkit-mask-image: url("/assets/icons/ui-hello.svg"); mask-image: url("/assets/icons/ui-hello.svg"); }
.ui-ico--target { -webkit-mask-image: url("/assets/icons/ui-target.svg"); mask-image: url("/assets/icons/ui-target.svg"); }
.ui-ico--insight { -webkit-mask-image: url("/assets/icons/ui-insight.svg"); mask-image: url("/assets/icons/ui-insight.svg"); }
.ui-ico--science { -webkit-mask-image: url("/assets/icons/ui-science.svg"); mask-image: url("/assets/icons/ui-science.svg"); }
.ui-ico--gift { -webkit-mask-image: url("/assets/icons/ui-gift.svg"); mask-image: url("/assets/icons/ui-gift.svg"); }
.ui-ico--news { -webkit-mask-image: url("/assets/icons/ui-news.svg"); mask-image: url("/assets/icons/ui-news.svg"); }
.ui-ico--book { -webkit-mask-image: url("/assets/icons/ui-book.svg"); mask-image: url("/assets/icons/ui-book.svg"); }
.ui-ico--check { -webkit-mask-image: url("/assets/icons/ui-check.svg"); mask-image: url("/assets/icons/ui-check.svg"); }
.ui-ico--stats { -webkit-mask-image: url("/assets/icons/ui-stats.svg"); mask-image: url("/assets/icons/ui-stats.svg"); }
.ui-ico--laptop { -webkit-mask-image: url("/assets/icons/ui-laptop.svg"); mask-image: url("/assets/icons/ui-laptop.svg"); }
.ui-ico--paper { -webkit-mask-image: url("/assets/icons/ui-paper.svg"); mask-image: url("/assets/icons/ui-paper.svg"); }
.ui-ico--celebrate { -webkit-mask-image: url("/assets/icons/ui-celebrate.svg"); mask-image: url("/assets/icons/ui-celebrate.svg"); }
.ui-ico--repeat { -webkit-mask-image: url("/assets/icons/ui-repeat.svg"); mask-image: url("/assets/icons/ui-repeat.svg"); }
.ui-ico--clipboard { -webkit-mask-image: url("/assets/icons/ui-clipboard.svg"); mask-image: url("/assets/icons/ui-clipboard.svg"); }
.ui-ico--gear { -webkit-mask-image: url("/assets/icons/ui-gear.svg"); mask-image: url("/assets/icons/ui-gear.svg"); }
/* ===== 全站 Emoji 自動替換 — aria-label attribute selector =====
* 所有帶 的 emoji 自動換成 SVG icon
* 不用改 HTML，只靠 CSS 選到 aria-label 對應的 span
*
* UI icons：mask-image + background-color: currentColor（可染色）
* tier icons：background-image（保留原色塊）
* ============================================================= */
[role="img"][aria-label="打招呼"],
[role="img"][aria-label="目標"],
[role="img"][aria-label="提示"],
[role="img"][aria-label="科學"],
[role="img"][aria-label="書本"],
[role="img"][aria-label="完成"],
[role="img"][aria-label="統計"],
[role="img"][aria-label="電腦"],
[role="img"][aria-label="紙筆"],
[role="img"][aria-label="筆記"],
[role="img"][aria-label="慶祝"],
[role="img"][aria-label="重複"],
[role="img"][aria-label="夾板"],
[role="img"][aria-label="設定"] {
display: inline-block;
width: 1.1em; height: 1.1em;
vertical-align: -0.2em;
/* 隱藏原 emoji 字元：text-indent 推出視窗，overflow 裁掉（不用 font-size:0，避免 em 失效）*/
text-indent: 100em;
overflow: hidden;
white-space: nowrap;
line-height: 1;
background-color: currentColor;
-webkit-mask: center/contain no-repeat;
mask: center/contain no-repeat;
}
[role="img"][aria-label="打招呼"] { -webkit-mask-image: url("/assets/icons/ui-hello.svg"); mask-image: url("/assets/icons/ui-hello.svg"); }
[role="img"][aria-label="目標"] { -webkit-mask-image: url("/assets/icons/ui-target.svg"); mask-image: url("/assets/icons/ui-target.svg"); }
[role="img"][aria-label="提示"] { -webkit-mask-image: url("/assets/icons/ui-insight.svg"); mask-image: url("/assets/icons/ui-insight.svg"); }
[role="img"][aria-label="科學"] { -webkit-mask-image: url("/assets/icons/ui-science.svg"); mask-image: url("/assets/icons/ui-science.svg"); }
[role="img"][aria-label="書本"] { -webkit-mask-image: url("/assets/icons/ui-book.svg"); mask-image: url("/assets/icons/ui-book.svg"); }
[role="img"][aria-label="統計"] { -webkit-mask-image: url("/assets/icons/ui-stats.svg"); mask-image: url("/assets/icons/ui-stats.svg"); }
[role="img"][aria-label="電腦"] { -webkit-mask-image: url("/assets/icons/ui-laptop.svg"); mask-image: url("/assets/icons/ui-laptop.svg"); }
[role="img"][aria-label="紙筆"] { -webkit-mask-image: url("/assets/icons/ui-paper.svg"); mask-image: url("/assets/icons/ui-paper.svg"); }
[role="img"][aria-label="筆記"] { -webkit-mask-image: url("/assets/icons/ui-paper.svg"); mask-image: url("/assets/icons/ui-paper.svg"); }
[role="img"][aria-label="慶祝"] { -webkit-mask-image: url("/assets/icons/ui-celebrate.svg"); mask-image: url("/assets/icons/ui-celebrate.svg"); }
[role="img"][aria-label="重複"] { -webkit-mask-image: url("/assets/icons/ui-repeat.svg"); mask-image: url("/assets/icons/ui-repeat.svg"); }
[role="img"][aria-label="夾板"] { -webkit-mask-image: url("/assets/icons/ui-clipboard.svg"); mask-image: url("/assets/icons/ui-clipboard.svg"); }
[role="img"][aria-label="設定"] { -webkit-mask-image: url("/assets/icons/ui-gear.svg"); mask-image: url("/assets/icons/ui-gear.svg"); }
[role="img"][aria-label="完成"] {
-webkit-mask-image: url("/assets/icons/ui-check.svg");
mask-image: url("/assets/icons/ui-check.svg");
background-color: var(--success, #16A34A); /* 完成統一用成功綠，維持原 ✅ 的綠色語意 */
}
/* 五級難度 tier — 色塊含文字，用 background-image 保留原色 */
[role="img"][aria-label="送分"],
[role="img"][aria-label="基礎"],
[role="img"][aria-label="中等"],
[role="img"][aria-label="決勝"],
[role="img"][aria-label="魔王"] {
display: inline-block;
width: 1.3em; height: 1.3em;
vertical-align: -0.3em;
text-indent: 100em;
overflow: hidden;
white-space: nowrap;
line-height: 1;
background: center/contain no-repeat;
border-radius: 4px;
}
[role="img"][aria-label="送分"] { background-image: url("/assets/icons/diff-gift.svg"); }
[role="img"][aria-label="基礎"] { background-image: url("/assets/icons/diff-basic.svg"); }
[role="img"][aria-label="中等"] { background-image: url("/assets/icons/diff-mid.svg"); }
[role="img"][aria-label="決勝"] { background-image: url("/assets/icons/diff-key.svg"); }
[role="img"][aria-label="魔王"] { background-image: url("/assets/icons/diff-boss.svg"); }
/* ===== KaTeX overrides ===== */
.katex { font-size:1em !important; }
.q-text .katex, .exp-body .katex, .option-btn .katex { font-size:1.05em !important; }
/* ===== Self-Eval Mode ===== */
.self-eval-box { padding:1.5rem; text-align:center; }
.self-eval-box .answer-reveal { padding:1rem 1.5rem; background:var(--accent-light); border:1px solid var(--accent); border-radius:var(--radius-sm); margin:1rem 0; text-align:left; line-height:1.7; }
.self-eval-btns { display:flex; gap:1rem; justify-content:center; margin-top:1rem; }
.btn-correct { background:rgba(22,163,74,0.08); color:var(--accent-green); border:1px solid var(--accent-green); padding:.6rem 1.5rem; border-radius:var(--radius-sm); cursor:pointer; font-size:1rem; font-family:inherit; font-weight:600; transition:all .2s; }
.btn-correct:hover { background:rgba(22,163,74,0.15); }
.btn-wrong-mark { background:rgba(220,38,38,0.06); color:var(--accent-red); border:1px solid var(--accent-red); padding:.6rem 1.5rem; border-radius:var(--radius-sm); cursor:pointer; font-size:1rem; font-family:inherit; font-weight:600; transition:all .2s; }
.btn-wrong-mark:hover { background:rgba(220,38,38,0.12); }
/* ===== Tabs ===== */
.tab-bar { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.tab-btn { padding:.5rem 1rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); cursor:pointer; font-family:inherit; font-size:.88rem; transition:all .2s; }
.tab-btn:hover { border-color:var(--accent); color:var(--text-primary); }
.tab-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
/* ===== Notes Styles ===== */
.notes-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.5rem; background:rgba(250,250,248,0.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.notes-section { margin-bottom:2.5rem; }
.notes-section h3 { font-size:1.1rem; color:var(--accent); margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.example-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.25rem; margin-bottom:1rem; position:relative; box-shadow:var(--shadow); }
.example-card .example-label { display:inline-block; background:var(--accent); color:#fff; padding:2px 10px; border-radius:4px; font-size:.78rem; font-weight:700; margin-bottom:.75rem; }
.example-card .example-q { font-size:1.02rem; line-height:1.7; margin-bottom:.75rem; }
.solution-toggle { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--accent-yellow); padding:.4rem .8rem; cursor:pointer; font-size:.85rem; font-family:inherit; transition:all .2s; }
.solution-toggle:hover { border-color:var(--accent-yellow); background:rgba(217,119,6,0.06); }
.solution-content { margin-top:.75rem; padding:1rem; background:#fffbeb; border:1px solid #fde68a; border-left:4px solid var(--accent-yellow); border-radius:var(--radius-sm); line-height:1.8; font-size:.95rem; color:var(--text-primary); white-space:pre-wrap; }
/* ── Science Notes Styles ── */
.notes-container { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:2rem 1.25rem 6rem; }
.notes-loading { text-align:center; padding:4rem 2rem; color:var(--text-secondary); }
.notes-loading .loading-spinner { margin:0 auto 1.25rem; }
.notes-content { padding:2rem 2.5rem; }
.notes-body { font-size:1.1rem; line-height:1.85; color:var(--text-primary); }
.notes-body h1, .notes-body h2 { font-size:1.3rem; font-weight:700; color:var(--accent); margin:1.75rem 0 .75rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); }
.notes-body h3 { font-size:1.05rem; font-weight:700; color:var(--accent); margin:1.25rem 0 .5rem; }
.notes-body p { margin-bottom:.85rem; }
.notes-body ul, .notes-body ol { padding-left:1.5rem; margin-bottom:.85rem; }
.notes-body li { margin-bottom:.35rem; }
.notes-body strong { color:var(--accent-yellow); font-weight:700; }
.notes-body sub, .notes-body sup { font-size:.72em; line-height:0; }
.notes-body img { max-width:100%; height:auto; border-radius:var(--radius-sm); margin:.75rem auto; display:block; border:1px solid var(--border); }
.notes-body .img-row { display:flex; gap:10px; flex-wrap:wrap; margin:.75rem 0; }
.notes-body .img-row img { flex:1; min-width:200px; max-width:48%; margin:0; }
.notes-body table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:1rem; }
.notes-body th { background:var(--bg-card2); padding:.6rem .85rem; text-align:left; border:1px solid var(--border); font-weight:600; color:var(--text-secondary); }
.notes-body td { padding:.55rem .85rem; border:1px solid var(--border); }
.blank { color:var(--accent); font-weight:600; border-bottom:1px dashed var(--accent); padding:0 4px; margin:0 2px; }
.notes-bottom-bar { position:fixed; bottom:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:rgba(250,250,248,0.95); backdrop-filter:blur(16px); border-top:1px solid var(--border); }
/* ===== Utility ===== */
.hidden { display:none !important; }
.mt-1 { margin-top:1rem; }
.mt-2 { margin-top:2rem; }
.text-center { text-align:center; }
.text-muted { color:var(--text-secondary); }
/* ===== Responsive ===== */
@media(max-width:600px) {
.subject-grid { grid-template-columns:1fr; }
.subject-card { padding:2rem 1.25rem; }
}
@media(max-width:480px) {
.container { padding:1rem .85rem 3rem; }
.card { padding:1.4rem; }
.site-header h1 { font-size:1.5rem; }
.score-display { font-size:3.5rem; }
.chapter-actions { width:100%; }
.chapter-actions .btn { flex:1; justify-content:center; }
.notes-content { padding:1.25rem 1rem; }
.notes-body { font-size:1rem; }
.notes-bottom-bar { padding:.75rem 1rem; }
.notes-header { padding:.65rem 1rem; }
}
/* ===== Accessibility ===== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }