/* TJ國營電學教室：黑板綠＋木框棕＋粉筆黃 */
:root{
  --board:#1f3d2b; --board2:#27503a; --board3:#2f5e45; --chalk:#f4f1e6; --chalk-d:#cfd8cc; --yellow:#f2d16b; --pink:#f0a8a0; --blue:#9cd0ee;
  --wood:#7a4a26; --wood2:#5b3519; --wood3:#a8703f; --paper:#fbf7ee; --ink:#2a2622; --muted:#6b6257; --line:#e3d9c6;
  --ok:#2f8f55; --bad:#c2453b; --r:14px; --sh:0 6px 18px rgba(40,25,10,.18);
  --hand:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--hand);color:var(--ink);background:var(--paper) radial-gradient(circle at 20% 0,#fffaf0 0,transparent 60%);line-height:1.7;font-size:16px}
img{max-width:100%;height:auto}
a{color:#2c6a4a}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:var(--ink);padding:8px 12px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
/* 頂欄：木框 */
.topbar{background:linear-gradient(180deg,var(--wood3),var(--wood) 55%,var(--wood2));border-bottom:4px solid #3d220e;position:sticky;top:0;z-index:40;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.topbar-in{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--chalk);text-decoration:none}
.brand img{border-radius:50%;border:3px solid var(--yellow);background:var(--board)}
.brand-t{display:flex;flex-direction:column;line-height:1.2}
.brand-t b{font-size:1.15rem;letter-spacing:.04em}
.brand-t small{color:#f6e2b8;font-size:.78rem}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a,.nav button{color:var(--chalk);text-decoration:none;padding:7px 12px;border-radius:999px;font:inherit;font-size:.95rem;background:none;border:0;cursor:pointer}
.nav a:hover,.nav button:hover{background:rgba(255,255,255,.14)}
.nav .nav-yt{background:#c4302b}
.nav .nav-login{background:var(--yellow);color:var(--ink);font-weight:700}
.nav-auth{display:inline-flex;gap:4px;align-items:center}
.nav-user{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px dashed rgba(255,255,255,.5)!important}
.nav-toggle{display:none;margin-left:auto;background:var(--yellow);border:0;border-radius:10px;padding:8px 14px;font:inherit;font-weight:700}
@media (max-width:820px){.nav-toggle{display:block}.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wood2);flex-direction:column;align-items:stretch;padding:10px}.nav.open{display:flex}.topbar-in{position:relative}.nav-auth{flex-direction:column;align-items:stretch}}
/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:12px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px)}
.btn-chalk{background:var(--yellow);color:var(--ink);border-color:#d8b44b;box-shadow:0 3px 0 #b8952f}
.btn-wood{background:var(--wood);color:#fff;border-color:var(--wood2);box-shadow:0 3px 0 #3d220e}
.btn-ghost{background:transparent;color:var(--board);border:2px dashed var(--board3)}
.btn-sm{padding:6px 12px;font-size:.9rem;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-yt{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:10px;background:#c4302b;color:#fff;text-decoration:none;font-size:.88rem;font-weight:700;box-shadow:0 2px 0 #861f1b}
.btn-yt:hover{background:#a82722}
/* 首頁黑板 */
.hero{background:var(--wood2);padding:26px 0 0}
.hero-in{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:center;background:radial-gradient(ellipse at 30% 20%,var(--board3),var(--board) 70%);border:14px solid var(--wood);border-image:linear-gradient(135deg,var(--wood3),var(--wood2)) 1;padding:34px 34px 28px;box-shadow:inset 0 0 60px rgba(0,0,0,.45);position:relative}
.board{color:var(--chalk)}
.chalk-s{display:inline-block;color:var(--yellow);border:2px dashed rgba(242,209,107,.6);padding:2px 12px;border-radius:999px;margin:0 0 6px;font-size:.92rem}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:.1em 0;letter-spacing:.08em;text-shadow:0 0 1px #fff,2px 2px 0 rgba(0,0,0,.25)}
.hero-lead{color:var(--chalk-d);font-size:1.08rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.hero-stats{display:flex;gap:26px;list-style:none;padding:0;margin:8px 0 0;flex-wrap:wrap}
.hero-stats li{display:flex;flex-direction:column}
.hero-stats b{font-size:1.9rem;color:var(--yellow);line-height:1.1}
.hero-stats span{color:var(--chalk-d);font-size:.88rem}
.hero-av{margin:0;text-align:center}
.hero-av img{border-radius:50%;border:6px solid var(--chalk);box-shadow:0 0 0 6px var(--wood3),0 10px 30px rgba(0,0,0,.4);width:260px}
.ledge{height:22px;background:linear-gradient(180deg,var(--wood3),var(--wood2));position:relative;max-width:1120px;margin:0 auto;border-radius:0 0 8px 8px}
.ledge span{position:absolute;top:2px;height:9px;border-radius:5px}
.ledge .c1{left:18%;width:56px;background:var(--chalk)}.ledge .c2{left:24%;width:40px;background:var(--yellow)}
.ledge .eraser{right:16%;width:90px;height:14px;top:0;background:linear-gradient(180deg,#5c6ba0 40%,#e9e4d6 40%)}
@media (max-width:760px){.hero-in{grid-template-columns:1fr;padding:22px;border-width:10px}.hero-av{order:-1}.hero-av img{width:150px}}
.co-jump{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.co-jump a{padding:8px 20px;border-radius:999px;background:var(--board);color:var(--co);font-weight:700;text-decoration:none;border:2px solid var(--co)}
.steps-sec{margin:22px auto}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;padding:0;margin:0}
.how li{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:12px}
.how b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--board);color:var(--yellow);display:grid;place-items:center}
@media (max-width:700px){.how{grid-template-columns:1fr 1fr}}
.sec-t{font-size:1.6rem;margin:30px 0 14px;display:flex;align-items:center;gap:10px}
.sec-t::before{content:"";width:12px;height:30px;background:var(--yellow);border-radius:3px;box-shadow:3px 0 0 var(--wood)}
.co-sec{margin:0 0 28px;background:var(--board);border-radius:18px;padding:18px;border:8px solid var(--wood);box-shadow:var(--sh)}
.co-head{display:flex;align-items:center;gap:14px;color:var(--chalk);margin-bottom:14px}
.co-head h3{margin:0;font-size:1.3rem}.co-head p{margin:0;color:var(--chalk-d);font-size:.9rem}
.co-badge{flex:none;background:var(--co,var(--yellow));color:var(--ink);font-weight:800;padding:6px 14px;border-radius:10px;font-size:1.1rem}
.co-n{margin-left:auto;color:var(--co);font-weight:700;white-space:nowrap}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cat-card{display:flex;flex-direction:column;background:var(--paper);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink);border-top:6px solid var(--co);transition:transform .12s,box-shadow .12s}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.cat-card h4{margin:0 0 8px;font-size:1.05rem}
.cat-card ul{list-style:none;padding:0;margin:0 0 10px;flex:1}
.cat-card li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:3px 0;font-size:.93rem}
.cat-card li b{color:var(--wood)}
.cat-card .go{color:var(--board3);font-weight:700;font-size:.9rem}
/* 聯絡 */
.contact{background:var(--board);color:var(--chalk);padding:10px 0 34px;margin-top:20px;border-top:10px solid var(--wood)}
.contact .sec-t{color:var(--chalk)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ct{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.06);border:2px dashed rgba(244,241,230,.35);border-radius:var(--r);padding:16px;color:var(--chalk);text-decoration:none}
.ct:hover{background:rgba(255,255,255,.12)}
.ct-ic{align-self:flex-start;font-weight:800;padding:2px 10px;border-radius:8px;margin-bottom:6px;color:#fff}
.ct-line .ct-ic{background:#06c755}.ct-shop .ct-ic{background:#ee4d2d}.ct-yt .ct-ic{background:#c4302b}
.ct span{color:var(--chalk-d);font-size:.92rem}.ct em{color:var(--yellow);font-style:normal;font-size:.9rem}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.foot{background:var(--wood2);color:#f3e3c6;padding:24px 0;font-size:.9rem}
.foot-in{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;align-items:start}
.foot-brand{display:flex;gap:10px;align-items:center}.foot-brand img{border-radius:50%}.foot-brand p{margin:0}
.foot-links{list-style:none;padding:0;margin:0}.foot-links a{color:#fde9b4}
.foot-note{grid-column:1/-1;margin:0;color:#d9c4a0}
@media (max-width:700px){.foot-in{grid-template-columns:1fr}}
/* 類科頁 */
.page{padding-top:18px;padding-bottom:30px}
.crumb{font-size:.9rem;color:var(--muted);margin:0 0 6px}
.cat-hero{display:flex;gap:14px;align-items:center;background:var(--board);color:var(--chalk);border:8px solid var(--wood);border-radius:16px;padding:18px 20px}
.cat-hero h1{margin:0;font-size:1.6rem}.cat-hero p{margin:0;color:var(--chalk-d)}
.ans-note{background:#fff7da;border-left:6px solid var(--yellow);padding:10px 14px;border-radius:8px;font-size:.93rem}
.subj{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:16px;margin:18px 0}
.subj-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.subj-h h2{margin:0;font-size:1.3rem;border-bottom:4px solid var(--yellow)}
.subj-h span{color:var(--muted)}.subj-h .btn{margin-left:auto}
.years{width:100%;border-collapse:collapse}
.years th,.years td{padding:9px 10px;border-bottom:1px dashed var(--line);text-align:left;vertical-align:middle}
.years thead th{background:var(--board);color:var(--chalk);font-weight:600}
.years thead th:first-child{border-radius:8px 0 0 0}.years thead th:last-child{border-radius:0 8px 0 0}
.years td small{display:block;color:var(--muted)}
.years .act{display:flex;gap:8px;flex-wrap:wrap}
.gaps{background:#f6efe2;border:2px dashed var(--wood3);border-radius:var(--r);padding:10px 16px}
.gaps h3{margin:.2em 0;color:var(--wood)}
.more-yt{text-align:center;margin-top:20px}
/* 練習頁 */
.pr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.pr-top h1{margin:0;font-size:1.5rem}
.pr-stat{display:flex;gap:8px}
.pr-stat span{background:var(--board);color:var(--chalk);padding:6px 12px;border-radius:10px;font-size:.92rem}
.pr-stat .ok b{color:#8fe3a8}.pr-stat .bad b{color:#ffb0a8}
.filters{background:var(--board);color:var(--chalk);border:8px solid var(--wood);border-radius:16px;padding:14px 16px;margin:14px 0;display:grid;gap:10px}
.f-row{display:flex;gap:12px;align-items:flex-start}
.f-row>label:not(.chk),.f-l{flex:none;width:44px;color:var(--yellow);font-weight:700;padding-top:5px}
.f-row select{flex:1;max-width:520px;padding:8px 10px;border-radius:10px;border:2px solid var(--wood3);font:inherit;background:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:.9rem;padding:5px 12px;border-radius:999px;border:2px dashed rgba(244,241,230,.45);background:transparent;color:var(--chalk);cursor:pointer}
.chip small{margin-left:5px;opacity:.7;font-size:.78rem}
.chip[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-style:solid;border-color:var(--yellow);font-weight:700}
.f-misc{align-items:center;flex-wrap:wrap}.f-misc .btn-ghost{color:var(--chalk);border-color:rgba(244,241,230,.5);margin-left:auto}
.chk{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.yt-bar{display:flex;gap:8px;flex-wrap:wrap;border-top:1px dashed rgba(244,241,230,.3);padding-top:10px}
.pr-count{color:var(--muted);margin:4px 0}
.loading,.empty{text-align:center;color:var(--muted);padding:30px}
.qlist{display:grid;gap:16px}
.q{background:#fff;border:2px solid var(--line);border-left:8px solid var(--board3);border-radius:var(--r);padding:16px 18px;box-shadow:0 2px 8px rgba(40,25,10,.06)}
.q.is-correct{border-left-color:var(--ok)}.q.is-wrong{border-left-color:var(--bad)}
.q-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{font-size:.8rem;background:#efe8da;color:var(--wood2);padding:2px 9px;border-radius:999px}
.tag-y{background:var(--board);color:var(--yellow)}.tag-v{background:#fde2dc;color:#8a3a2e}.tag-tp{background:#e2f0f8;color:#2b5d7a}
.q-stem{font-size:1.05rem;margin-bottom:8px;overflow-x:auto}
.q-img{display:block;width:100%;max-width:820px;border:1px solid var(--line);border-radius:8px;background:#fff;margin:4px 0 10px}
.q-fig{display:block;margin:6px 0 10px;border-radius:6px}
.opts{display:grid;gap:8px;margin:8px 0}
.opts-key{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));max-width:420px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;font:inherit;padding:9px 12px;border-radius:10px;border:2px solid var(--line);background:var(--paper);cursor:pointer;color:var(--ink)}
.opts-key .opt{justify-content:center;font-size:1.15rem;font-weight:700}
.opt .k{flex:none;font-weight:800;color:var(--board3);min-width:1.4em}
.opt:hover{border-color:var(--board3)}
.opt.picked{border-color:var(--yellow);background:#fff6d6}
.opt.correct{border-color:var(--ok);background:#e5f5ea}.opt.correct .k{color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:#fbe7e4}.opt.wrong .k{color:var(--bad)}
.opt.dim{opacity:.6}
.answer-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ans-input{flex:1;min-width:180px;max-width:360px;padding:8px 12px;font:inherit;border-radius:10px;border:2px solid var(--line)}
.ans-input:focus{border-color:var(--board3);outline:0}
.unit{color:var(--muted)}
.verdict{margin-top:10px;padding:10px 14px;border-radius:10px;background:#f4efe4;border:2px dashed var(--wood3)}
.verdict.ok{background:#e5f5ea;border-color:var(--ok)}.verdict.ok>b:first-child{color:var(--ok)}
.verdict.bad{background:#fbe7e4;border-color:var(--bad)}.verdict.bad>b:first-child{color:var(--bad)}
.self{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}.self .ok{color:var(--ok)}.self .bad{color:var(--bad)}
.sol{margin-top:10px;background:var(--board);color:var(--chalk);border-radius:12px;padding:8px 14px}
.sol summary{cursor:pointer;font-weight:700;color:var(--yellow)}
.sol .steps{padding-left:1.3em}.sol-h{margin:.6em 0 .2em;color:var(--yellow)}
.sol .katex{color:var(--chalk)}
.more-wrap{text-align:center;margin:18px 0}
/* 登入 */
.login-page{display:flex;justify-content:center}
.login-board{max-width:560px;width:100%;background:var(--board);color:var(--chalk);border:12px solid var(--wood);border-radius:18px;padding:26px;text-align:center;box-shadow:var(--sh);margin:16px 0}
.login-board>img{border-radius:50%;border:5px solid var(--chalk)}
.login-board h1{margin:.3em 0}.login-board .lead{color:var(--chalk-d)}
.guest{color:var(--chalk-d);font-size:.92rem}.guest a{color:var(--yellow)}
.auth-inline,.auth-card{text-align:left}
.auth-perks{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.auth-perks li{background:rgba(255,255,255,.07);border-radius:10px;padding:8px 12px;font-size:.93rem}
.auth-perks b{color:var(--yellow);margin-right:8px}
.auth-opt{display:flex;gap:8px;align-items:flex-start;margin:10px 0;cursor:pointer}
.auth-opt input{margin-top:6px;width:18px;height:18px}
.auth-google{width:100%;background:#fff;color:#333;border:2px solid #dadce0;box-shadow:0 2px 0 #b9bcc0}
.auth-msg{min-height:1.2em;font-size:.92rem;margin:10px 0}
.auth-msg.is-ok{color:#8fe3a8}.auth-msg.is-bad{color:#ffb0a8}.auth-msg.is-warn{color:var(--yellow);background:rgba(242,209,107,.12);padding:8px 10px;border-radius:8px}
.auth-privacy{font-size:.8rem;color:var(--chalk-d);border-top:1px dashed rgba(244,241,230,.3);padding-top:10px}
.auth-account .btn-ghost{color:var(--chalk);border-color:rgba(244,241,230,.5)}
.auth-modal{position:fixed;inset:0;background:rgba(20,14,8,.6);display:grid;place-items:center;z-index:90;padding:16px}
.auth-modal[hidden]{display:none}
.auth-card{position:relative;max-width:460px;width:100%;background:var(--board);color:var(--chalk);border:10px solid var(--wood);border-radius:16px;padding:22px}
.auth-title{margin:0 0 10px}
.auth-x{position:absolute;right:10px;top:6px;background:none;border:0;color:var(--chalk);font-size:1.6rem;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--board);color:var(--chalk);border:3px solid var(--yellow);padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:95;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* 404 */
.lost{text-align:center;padding:40px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.f-row select{min-width:0;width:100%}
.qlist{grid-template-columns:minmax(0,1fr)}
.years th:first-child,.years td:first-child{white-space:nowrap}
/* 2026-10-30：未登入答錯時的保存提示（練習頁） */
.save-hint{margin:8px 0 0;font-size:.9rem;color:var(--muted)}.save-hint a{color:var(--board);font-weight:700}
/* 題目附表（2026-10-31 tpcphys6：p-105-03） */
.q-stem table{border-collapse:collapse;margin:8px 0;text-align:center;font-size:.95rem}.q-stem th,.q-stem td{border:1px solid currentColor;padding:4px 12px;white-space:nowrap;font-weight:400}
/* 詳解附圖：手機上不超出卡片寬度（2026-10-31） */
.sol .q-fig{max-width:min(100%,520px)!important;height:auto;background:#fff}