@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@400;700&display=swap&text=0123456789%C2%B7%C3%97%E2%80%94%E3%80%81%E3%83%BB%E4%B8%80%E4%B8%81%E4%B8%89%E4%B8%8A%E4%B8%8D%E4%B8%99%E4%B8%BB%E4%B9%8B%E4%B9%99%E4%BA%8B%E4%BA%8C%E4%BA%A4%E4%BA%BA%E4%BB%8B%E4%BB%98%E4%BB%A3%E4%BB%A5%E4%BB%B2%E4%BB%B6%E4%BB%BB%E4%BC%B0%E4%BD%8D%E4%BD%8F%E4%BD%95%E4%BD%9C%E4%BD%BF%E4%BE%8B%E4%BE%9D%E4%BF%82%E4%BF%9D%E4%BF%A1%E5%80%8B%E5%80%9F%E5%81%9C%E5%82%99%E5%82%B5%E5%83%B9%E5%84%9F%E5%84%AA%E5%85%88%E5%85%8D%E5%85%A5%E5%85%A7%E5%85%A8%E5%85%A9%E5%85%AC%E5%85%B1%E5%85%B6%E5%87%B6%E5%87%BA%E5%88%86%E5%88%91%E5%88%97%E5%88%A4%E5%88%A5%E5%88%A9%E5%88%B0%E5%88%B6%E5%89%87%E5%89%8D%E5%89%B2%E5%8A%83%E5%8A%9B%E5%8A%A0%E5%8B%95%E5%8B%99%E5%8D%80%E5%8D%87%E5%8D%94%E5%8D%B3%E5%8E%9F%E5%8E%BB%E5%8F%8A%E5%8F%8D%E5%8F%96%E5%8F%AF%E5%90%84%E5%90%88%E5%90%8C%E5%90%8D%E5%90%91%E5%90%A6%E5%90%AB%E5%91%8A%E5%93%A1%E5%94%AE%E5%95%86%E5%96%AE%E5%9B%9B%E5%9B%9E%E5%9B%A0%E5%9C%8B%E5%9C%8D%E5%9C%9F%E5%9C%B0%E5%9D%87%E5%9F%9F%E5%9F%B7%E5%9F%BA%E5%A0%B1%E5%A4%96%E5%A4%9A%E5%A4%A7%E5%A4%B1%E5%A5%91%E5%A6%82%E5%A7%94%E5%AA%92%E5%AD%97%E5%AE%85%E5%AE%88%E5%AE%9A%E5%AE%B9%E5%AF%86%E5%AF%93%E5%AF%A6%E5%B0%87%E5%B0%8D%E5%B0%B1%E5%B1%8B%E5%B1%A4%E5%B1%AC%E5%B7%AE%E5%B8%B3%E5%B8%B6%E5%B8%B8%E5%B9%B3%E5%B9%B4%E5%BA%8F%E5%BA%A6%E5%BB%88%E5%BB%A3%E5%BB%BA%E5%BC%8F%E5%BC%B5%E5%BC%B7%E5%BD%A2%E5%BD%B1%E5%BE%8B%E5%BE%8C%E5%BE%97%E5%BE%B5%E6%80%A7%E6%83%85%E6%83%A0%E6%84%8F%E6%85%AE%E6%87%89%E6%87%B2%E6%88%90%E6%88%91%E6%88%92%E6%88%B6%E6%88%BF%E6%89%80%E6%89%BF%E6%8A%97%E6%8A%98%E6%8A%B5%E6%8A%BC%E6%8B%86%E6%8B%8D%E6%8B%98%E6%8C%81%E6%8C%87%E6%8E%A1%E6%8E%A8%E6%8E%AA%E6%8F%90%E6%8F%9B%E6%92%A4%E6%93%94%E6%93%9A%E6%93%AC%E6%94%AF%E6%94%B6%E6%94%BF%E6%95%88%E6%95%91%E6%95%B4%E6%95%B8%E6%96%B0%E6%96%B7%E6%96%B9%E6%96%BD%E6%97%A5%E6%98%8E%E6%98%93%E6%98%A0%E6%98%AF%E6%99%82%E6%99%AF%E6%9B%B4%E6%9B%B8%E6%9B%BF%E6%9C%83%E6%9C%88%E6%9C%89%E6%9C%8D%E6%9C%9F%E6%9C%AA%E6%9C%AC%E6%9D%9F%E6%9E%90%E6%9E%9C%E6%A0%BC%E6%A2%9D%E6%A5%AD%E6%A5%B5%E6%A6%82%E6%A7%8B%E6%A8%93%E6%A8%99%E6%A8%A1%E6%A9%9F%E6%AC%8A%E6%AC%B2%E6%AC%BE%E6%AD%A2%E6%AD%A3%E6%AD%B8%E6%AE%B5%E6%AF%94%E6%B0%91%E6%B0%B4%E6%B1%82%E6%B1%BA%E6%B3%95%E6%B6%88%E6%B7%A8%E6%B8%85%E6%B8%9B%E6%B8%AC%E6%BA%96%E6%BC%B2%E6%BF%9F%E7%82%BA%E7%84%A1%E7%88%AD%E7%89%A9%E7%89%B9%E7%8E%87%E7%90%86%E7%91%95%E7%94%A2%E7%94%A8%E7%94%B1%E7%94%B2%E7%94%B3%E7%95%8C%E7%95%AB%E7%95%B0%E7%96%B5%E7%99%BB%E7%99%BC%E7%9A%84%E7%9B%8A%E7%9B%AE%E7%9B%B8%E7%9C%8B%E7%9F%A5%E7%A2%BA%E7%A6%81%E7%A7%91%E7%A7%9F%E7%A8%85%E7%A8%8B%E7%A8%AE%E7%A9%8D%E7%A9%BA%E7%AB%8B%E7%AB%99%E7%AB%A0%E7%AB%B6%E7%AC%A6%E7%AC%AC%E7%AD%94%E7%AE%97%E7%AE%A1%E7%AF%84%E7%B0%BD%E7%B4%80%E7%B4%84%E7%B4%85%E7%B4%8D%E7%B4%A0%E7%B4%AF%E7%B4%B0%E7%B6%93%E7%B6%AD%E7%B7%9A%E7%B7%A8%E7%B8%BD%E7%BA%8C%E7%BD%AE%E7%BD%B0%E7%BE%A9%E8%80%83%E8%80%85%E8%80%90%E8%81%AF%E8%83%8C%E8%83%BD%E8%87%AA%E8%88%87%E8%88%8A%E8%88%AC%E8%8B%A5%E8%99%95%E8%99%9F%E8%A1%8C%E8%A1%A8%E8%A3%81%E8%A3%9C%E8%A6%81%E8%A6%8F%E8%A6%BD%E8%A7%A3%E8%A8%82%E8%A8%88%E8%A8%98%E8%A8%AD%E8%A8%B1%E8%A9%95%E8%A9%A6%E8%AA%8D%E8%AA%AA%E8%AA%B2%E8%AA%BF%E8%AB%8B%E8%AB%96%E8%AC%82%E8%AD%89%E8%AD%B0%E8%AD%B7%E8%AE%93%E8%B2%A0%E8%B2%AC%E8%B2%B8%E8%B2%BB%E8%B3%83%E8%B3%87%E8%B3%A0%E8%B3%A3%E8%B3%AA%E8%B3%BC%E8%B4%88%E8%B6%8A%E8%B7%8C%E8%B8%90%E8%BC%83%E8%BC%89%E8%BD%89%E8%BE%A6%E8%BE%AF%E9%80%99%E9%80%9A%E9%80%9F%E9%80%A3%E9%80%B2%E9%80%BE%E9%81%8B%E9%81%8E%E9%81%93%E9%81%95%E9%81%A9%E9%81%B5%E9%81%B7%E9%81%BA%E9%82%84%E9%83%A8%E9%85%8C%E9%85%8D%E9%85%AC%E9%87%8D%E9%87%8F%E9%87%91%E9%8A%80%E9%8A%B7%E9%8C%84%E9%96%8B%E9%96%93%E9%97%9C%E9%98%B2%E9%99%90%E9%99%A2%E9%99%A4%E9%99%B8%E9%9A%8E%E9%9B%A2%E9%9D%A2%E9%9F%BF%E9%A0%82%E9%A0%85%E9%A0%90%E9%A0%98%E9%A1%8C%E9%A1%8D%E9%A1%9E%E9%A1%AF%E9%A4%8A%E9%A9%97%E9%AB%94%E9%AB%98%E9%BB%9E%EF%BC%81%EF%BC%88%EF%BC%89%EF%BC%8C%EF%BC%8E%EF%BC%9A%EF%BC%9F');
/* =====================================================
   好悍筆記 HENOVIA　樣式表
   想改顏色、字體、圓角，先看最上面這一區就好
   ===================================================== */
:root{
  /* 基本色（取自 logo：墨綠 + 淺灰紙） */
  --paper:#F4F4F2;      /* 淺灰紙（底色） */
  --ink:#3B5142;        /* 墨綠（文字與粗線框） */
  --muted:#6F7F74;      /* 次要文字 */
  --hl:#F8D27E;         /* 暖橙黃（重點標示、主要按鈕） */
  --accent:#BCD0C1;     /* 選取中的按鈕 */
  --bad:#F3C9C4;        /* 答錯提示 */
  --good:#CFE3D3;       /* 答對提示 */
  /* 四科顏色：淺色用在標題列，深色用在進度條 */
  --civil:#D5E3D8;  --civil-d:#5F8268;
  --val:#F3DDD0;    --val-d:#C08A6E;
  --land:#F5E6C3;   --land-d:#D9A441;
  --law:#D6E5EE;    --law-d:#5E8AA3;
  /* 形狀 */
  --line:3px solid var(--ink);
  --r:24px;
  --font:"Huninn","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.7 var(--font)}
b,strong,h1,h2,h3{font-weight:400}
button{font:inherit;color:var(--ink);cursor:pointer}
:focus-visible{outline:3px dashed var(--ink)!important;outline-offset:3px!important}
.off,[hidden]{display:none!important}

/* ---------- 版面 ---------- */
#app{max-width:640px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom,0px))}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 0 6px}
.top h1{font-size:1.35rem;line-height:1.3;margin:0}
.fsz{display:flex;gap:6px;flex:none}
.fsz button{min-width:44px;min-height:44px;border:var(--line);border-radius:99px;background:var(--paper)}
.fsz button:disabled{opacity:.35;cursor:not-allowed}
h2.pt{font-size:1.25rem;margin:18px 0 8px}
.muted{color:var(--muted)}
.empty{color:var(--muted);margin:6px 0}

/* ---------- 底部導覽 ---------- */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
nav.tabs div{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
nav.tabs button{position:relative;min-height:52px;border:var(--line);border-radius:18px;background:var(--paper);font-size:.9rem;padding:4px 2px}
nav.tabs button[aria-current="page"]{background:var(--accent)}
nav.tabs .bd{position:absolute;top:-8px;right:2px;min-width:22px;height:22px;border-radius:99px;border:2.5px solid var(--ink);background:var(--bad);font-size:.72rem;line-height:17px;padding:0 4px}

/* ---------- 共用元件 ---------- */
.card{background:#fff;border:var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px}
.btn{min-height:48px;padding:8px 20px;border:var(--line);border-radius:99px;background:var(--paper)}
.btn.pri{background:var(--hl)}
.btn.blue{background:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chip{display:inline-block;padding:0 10px;border:2.5px solid var(--ink);border-radius:99px;font-size:.8rem;line-height:1.7}
.bar{height:16px;background:var(--paper);border:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 8px}
.seg button{min-height:48px;border:var(--line);border-radius:18px;background:var(--paper)}
.seg button[aria-pressed="true"]{background:var(--accent)}
.pass{margin:0 0 14px;color:var(--muted);font-size:.95rem}
.back{min-height:44px;padding:4px 16px;border:var(--line);border-radius:99px;background:var(--paper);margin:8px 0}
.s-civil{--c:var(--civil);--cd:var(--civil-d)}
.s-val{--c:var(--val);--cd:var(--val-d)}
.s-land{--c:var(--land);--cd:var(--land-d)}
.s-law{--c:var(--law);--cd:var(--law-d)}

/* ---------- 首頁 ---------- */
.cd{text-align:center}
.cdt{margin:0 0 6px;white-space:nowrap;font-size:min(1rem,3.9vw)}
.cdn{font-size:min(2.6rem,8.4vw);white-space:nowrap;line-height:1.2}
.cdn small{font-size:.4em}
.treebox{text-align:center;padding:12px 12px 14px}
.treebox svg,#wtree{--ink:#3E3A39;--paper:#FFFCF6}
.treebox svg{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}
.big{font-size:2.4rem;line-height:1}
.big small{font-size:1rem;color:var(--muted);margin-left:6px}
.tmsg{margin:4px 0 0}
.lg{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:8px;font-size:.9rem}
.lg i{display:inline-block;width:16px;height:16px;border-radius:50%;border:2.5px solid var(--ink);vertical-align:-3px;margin-right:4px}

details.sub{background:var(--paper);border:var(--line);border-radius:var(--r);margin:0 0 12px;overflow:hidden}
details.sub>summary{list-style:none;cursor:pointer;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;background:var(--c)}
details.sub>summary::-webkit-details-marker{display:none}
details.sub[open]>summary{border-bottom:var(--line)}
details.sub summary b{font-size:1.3rem}
details.sub summary .cnt{text-align:right;font-size:.9rem}
details.sub summary .meta{grid-column:1/-1;font-size:.85rem}
details.sub summary .bar{grid-column:1/-1;height:14px;margin-top:8px}
details.sub summary .bar i{background:var(--cd)}
.row{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:2px dashed var(--ink);min-height:56px;cursor:pointer}
.row:last-child{border-bottom:0}
.row input{width:24px;height:24px;accent-color:var(--ink);flex:none}
.row .t{flex:1;font-size:.95rem}
.row .t span{padding:0 6px;border-radius:8px;transition:background-color .3s}
.row.done .t span{background:var(--hl)}
.row.done .t{opacity:.55}
.row .rd{min-width:84px;min-height:50px;padding:6px 20px;font-size:1.05rem;border:var(--line);border-radius:99px;background:var(--paper);flex:none}

/* 進度樹動畫 */
.fc{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;stroke-dasharray:3 3;opacity:.55}
.fx{display:none}
.fx .pe{fill:var(--p);stroke:var(--ink);stroke-width:2.2}
.fx .ce{fill:var(--c)}
.fr{transform-box:fill-box;transform-origin:50% 25%}
.fr.on .fc{opacity:0}
.fr.on .fx{display:inline}
.fr.new{animation:pop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.pt-fall{animation:fall 5.5s ease-in infinite;transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate(var(--x),112px) rotate(220deg);opacity:0}}
#sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.spk{fill:var(--hl);stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:tw 1.6s ease-in-out infinite}
@keyframes tw{0%,100%{transform:scale(.4);opacity:.4}50%{transform:scale(1.1);opacity:1}}
@media (prefers-reduced-motion:reduce){#sway,.spk,.fr.new,.pt-fall{animation:none}}

/* ---------- 章節頁與內容樣式（填內容時會用到） ---------- */
.ch h2{font-size:1.6rem;margin:6px 0 4px}
.ch .sec{margin:20px 0}
.ch .sec>h3{display:inline-block;margin:0 0 10px;padding:6px 16px;background:var(--c,var(--civil));border:var(--line);border-radius:99px;font-size:1.15rem}
.ctn ol,.ctn ul{padding-left:1.3em;margin:6px 0}
.ctn li{margin:6px 0}
.ctn mark{background:linear-gradient(180deg,transparent 18%,rgba(247,196,99,.88) 18%,rgba(247,196,99,.88) 94%,transparent 94%);color:var(--ink);padding:0 3px;border-radius:3px 7px 4px 8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ctn .red{color:#C00000}
.ctn .ref{color:var(--muted);font-size:.85rem}
.box{border:var(--line);border-radius:20px;padding:12px 14px;margin:14px 0}
.box.sup{background:var(--hl)}
.box.qa{background:var(--civil)}
.box p{margin:0}
.tw{overflow-x:auto;margin:12px 0}
.tbl{width:100%;min-width:440px;border-collapse:separate;border-spacing:0;border:var(--line);border-radius:16px;overflow:hidden}
.tbl th,.tbl td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:2px dashed var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:var(--val);font-weight:400}
.age{display:flex;border:var(--line);border-radius:16px;overflow:hidden;margin:10px 0}
.age div{flex:1;padding:8px 4px;text-align:center;font-size:.9rem}
.age div+div{border-left:var(--line)}
.todo{border:3px dashed var(--ink);border-radius:var(--r);padding:16px;color:var(--muted);text-align:center}

/* ---------- 測驗 ---------- */
.quiz{background:var(--val);border:var(--line);border-radius:var(--r);padding:16px}
.qprog{font-size:.9rem;margin-bottom:6px}
.qq{margin:0}
.qb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.qb button,.qn{min-height:52px;padding:10px 14px;border:var(--line);border-radius:18px;background:var(--paper)}
.fb{padding:10px 12px;border:var(--line);border-radius:18px;background:var(--hl);margin:12px 0;font-size:.95rem}
.fb.bad{background:var(--bad)}
.scope{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.scope button{min-height:48px;padding:6px 16px;border:var(--line);border-radius:99px;background:var(--paper)}
.scope button[aria-pressed="true"]{background:var(--accent)}
.wl{list-style:none;padding:0;margin:0}
.wl li{padding:10px 0;border-bottom:2px dashed var(--ink)}
.wl li:last-child{border-bottom:0}

/* ---------- 衝刺、搜尋、紀錄 ---------- */
details.cmp{border:var(--line);border-radius:20px;margin:0 0 10px;background:var(--paper);overflow:hidden}
details.cmp>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--c)}
details.cmp>summary::-webkit-details-marker{display:none}
details.cmp .in{padding:10px 14px 14px}
input.q-in{width:100%;min-height:50px;padding:6px 16px;border:var(--line);border-radius:99px;background:var(--paper);color:var(--ink);font:inherit}
.hit{display:block;width:100%;text-align:left;padding:12px 14px;border:var(--line);border-radius:20px;background:var(--paper);margin:0 0 10px}
.hit small{display:block;color:var(--muted)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.days span{aspect-ratio:1;border:2.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;background:var(--paper)}
.days span.on{background:var(--hl)}
.days span.today{border-style:dashed}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat .card{margin:0;text-align:center}
.stat b{display:block;font-size:1.8rem;line-height:1.2}
.sbar{margin:10px 0}
.sbar .bar{height:14px;margin-top:4px}
.sbar .bar i{background:var(--cd)}
.link{display:block;width:100%;text-align:left;padding:14px 16px;border:var(--line);border-radius:var(--r);background:var(--c,var(--paper));margin:0 0 12px;font-size:1.1rem}
.link small{display:block;font-size:.85rem;color:var(--ink)}

/* ---------- 動畫首頁 ---------- */
body.landing .top,body.landing nav.tabs{display:none}
body.landing #app{padding-bottom:24px}
.wel{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 0}
.wchip{background:var(--accent);animation:rise .6s ease both}
.wtitle{margin:14px 0 4px;font-size:min(3.2rem,12.5vw);line-height:1.25;display:flex;justify-content:center;flex-wrap:wrap}
.wtitle span{display:inline-block;animation:drop .7s cubic-bezier(.3,1.6,.5,1) both,bob 3s ease-in-out infinite;animation-delay:calc(var(--i)*.09s),calc(.9s + var(--i)*.15s)}
@keyframes drop{from{transform:translateY(-40px) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
#wtree{width:100%;max-width:340px;height:auto;display:block;margin:4px auto 0}
.wsub{margin:6px 0 16px;font-size:1.15rem;animation:rise .8s .8s ease both}
.wgo{min-width:200px;min-height:58px;font-size:1.25rem;animation:rise .8s 1.1s ease both,pulse 2.4s 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.wdays{margin:14px 0 0;color:var(--muted);animation:rise .8s 1.3s ease both}
.wdays b{font-size:1.3em;color:var(--ink);font-weight:400}
.top h1{cursor:pointer}
@media (prefers-reduced-motion:reduce){.wchip,.wtitle span,.wsub,.wgo,.wdays{animation:none}}

/* ---------- 開場動畫（動態圖形；配色取自 logo：墨綠 + 淺灰方格紙） ---------- */
body.on-splash .top,body.on-splash nav.tabs{display:none}
body.on-splash #app{padding-bottom:24px}
body.on-splash{background-color:#F1F1F1;background-image:linear-gradient(#E8E8E8 2px,transparent 2px),linear-gradient(90deg,#E8E8E8 2px,transparent 2px);background-size:30px 30px}
.splash{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.art{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(50% + 20px);width:100%;max-width:320px;height:auto;overflow:visible}
.grp{position:relative;top:80px;display:flex;flex-direction:column;align-items:center;gap:46px}
.stitle{position:relative;display:inline-block;font-size:min(2.2rem,7.6vw);line-height:1.35;margin:0;white-space:nowrap;padding:0 8px;color:#465D4C}
.stitle .mk{position:absolute;left:-2px;right:-4px;bottom:3px;height:.62em;background:linear-gradient(180deg,rgba(247,196,99,.78),rgba(247,196,99,.95) 35%,rgba(247,196,99,.82));clip-path:polygon(1.5% 22%,99% 0,100% 100%,0 88%);border-radius:3px;transform:rotate(-1.4deg);transform-origin:0 50%;mix-blend-mode:multiply;animation:mkh .4s cubic-bezier(.5,0,.3,1) 1.9s backwards;z-index:0}
@keyframes mkh{from{transform:rotate(-1.4deg) scaleX(0)}}
.stitle .cl{position:relative;z-index:1;display:inline-block;overflow:visible;vertical-align:bottom;padding:0 1px}
.stitle .cl b{display:inline-block;animation:flash .22s ease-out backwards}
@keyframes mk{from{transform:scaleX(0)}}
@keyframes flash{0%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:none}}
.loopbox{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;transition:opacity .45s}
.loopbox.out{opacity:0}
.ssub{margin:0 0 6px;color:var(--muted);animation:fade .5s ease-out 2.3s backwards}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.btn.pri.sgo{min-width:180px;font-size:1.2rem;margin-top:8px;background:#465D4C;color:#fff;border-color:#465D4C;animation:pop2 .5s cubic-bezier(.2,1.8,.4,1) 2.4s backwards}
@keyframes pop2{from{transform:scale(0)}}
.gb{transform-box:fill-box;transform-origin:50% 100%;animation:grow .8s cubic-bezier(.2,1.6,.4,1) calc(var(--i)*.1s) backwards,wave 2.4s ease-in-out calc(1.4s + var(--i)*.28s) infinite}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@keyframes grow{from{transform:scaleY(0)}}
.gl{stroke-dasharray:1;stroke-dashoffset:0;animation:draw .5s cubic-bezier(.6,0,.2,1) backwards}
@keyframes draw{from{stroke-dashoffset:1}}
.pp{transform-box:fill-box;transform-origin:50% 100%;animation:drop .7s cubic-bezier(.2,1.5,.4,1) backwards,sway 4s ease-in-out 1.1s infinite}
@keyframes drop{from{transform:translateY(-220px) scaleY(1.15);opacity:0}}
@keyframes sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.pen{animation:fade 0.3s ease .9s backwards,write 3.2s ease-in-out .9s infinite alternate backwards;transform:translate(70px,150px)}
@keyframes write{0%{transform:translate(70px,150px)}35%{transform:translate(160px,160px)}70%{transform:translate(255px,150px)}100%{transform:translate(285px,170px)}}
.ab{transform-box:fill-box;transform-origin:center;animation:pop3 .45s cubic-bezier(.2,1.8,.4,1) backwards,spinp 14s linear infinite}
@keyframes pop3{from{transform:scale(0)}}
@keyframes spinp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stitle .mk,.stitle .cl b,.ssub,.sgo,.gb,.gl,.pp,.pen,.ab{animation:none}}
.sgo .ex{margin-right:-.55em}

.stitle .sp{display:inline-block;width:.35em}

/* ---------- 第二層：選擇考試類別 ---------- */
.pick{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:24px 0}
.ptitle{position:relative;isolation:isolate;align-self:center;margin:0;font-size:1.6rem;line-height:1.4;padding:0 10px;color:#465D4C}
.ptitle .mk{position:absolute;left:-2px;right:-4px;bottom:5px;height:.62em;background:linear-gradient(180deg,rgba(247,196,99,.78),rgba(247,196,99,.95) 35%,rgba(247,196,99,.82));clip-path:polygon(1.5% 22%,99% 0,100% 100%,0 88%);border-radius:3px;transform:rotate(-1.4deg);transform-origin:0 50%;mix-blend-mode:multiply;animation:mkh .4s cubic-bezier(.5,0,.3,1) .1s backwards;z-index:-1}
.pcards{display:flex;flex-direction:column;gap:16px}
.pk{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 16px;border:var(--line);border-radius:var(--r);background:#fff;animation:cardin .6s cubic-bezier(.2,1.4,.4,1) var(--d) backwards;transition:transform .15s}
.pk:active{transform:scale(.97)}
.pk.on{background:#fff;box-shadow:0 6px 0 #F7C463}
.pk.soon{background:#FAFAF9}
.pi{flex:none;width:104px}.pi svg{display:block;width:100%;height:auto;overflow:visible}
.pt2{display:flex;flex-direction:column;gap:2px;min-width:0}
.pt2 b{font-size:1.45rem;line-height:1.3}
.pt2 small{font-size:1rem;color:var(--muted)}
.ptag{align-self:flex-start;margin-top:4px;font-style:normal;font-size:.85rem;line-height:1.7;padding:0 12px;border-radius:99px;border:2.5px solid var(--ink);background:#F4F4F2}
.pk.on .ptag{background:#F7C463}
.pk.soon .pi{opacity:.85}
@keyframes cardin{from{transform:translateY(60px) scaleY(1.12);opacity:0}}
.pk.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
/* 圖示動畫 */
.ib{transform-box:fill-box;transform-origin:50% 100%;animation:grow .7s cubic-bezier(.2,1.6,.4,1) calc(.5s + var(--i)*.1s) backwards,wave 2.4s ease-in-out calc(1.4s + var(--i)*.28s) infinite}
.ib.it{transform-origin:50% 50%;animation:pop3 .5s cubic-bezier(.2,1.8,.4,1) calc(.5s + var(--i)*.08s) backwards,tile 3s ease-in-out calc(1.2s + var(--i)*.25s) infinite}
@keyframes tile{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
.ipl{stroke-dasharray:1;animation:plloop 3.6s ease-in-out 1s infinite}
@keyframes plloop{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.iar{transform-box:fill-box;transform-origin:center;animation:float 2.4s ease-in-out infinite}
.iro{transform-box:fill-box;transform-origin:50% 100%;animation:pop3 .5s cubic-bezier(.2,1.8,.4,1) .3s backwards,rbob 3s ease-in-out 1.2s infinite}
@keyframes rbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ihs{transform-box:fill-box;transform-origin:50% 100%;animation:grow .6s cubic-bezier(.2,1.6,.4,1) .3s backwards,float 3s ease-in-out 1.2s infinite}
@media (prefers-reduced-motion:reduce){.pk,.ptitle .mk,.ib,.ipl,.iar,.iro,.ihs{animation:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bk{flex:none;width:36px;height:36px;margin-right:8px;border:var(--line);border-radius:99px;background:#fff;font-size:1.3rem;line-height:1;padding:0 0 3px}
.top .bk{margin-right:2px}
.top h1{flex:1;min-width:0}
.pbk{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:0;margin:0}
.pick{position:relative}
.top h1{white-space:nowrap;font-size:min(1.35rem,4.6vw);overflow:hidden;text-overflow:clip}
.top .bk{width:32px;height:32px;font-size:1.2rem}
.coin{animation:coindrop 5s ease-in calc(.4s + var(--i)*.45s) infinite backwards;transform-box:fill-box;transform-origin:50% 100%}
@keyframes coindrop{0%{transform:translateY(-90px);opacity:0}6%{opacity:1}16%{transform:translateY(0) scaleY(1)}20%{transform:translateY(0) scaleY(.82)}26%{transform:scaleY(1)}84%{opacity:1}94%,100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.coin{animation:none}}
.pg{transform-box:fill-box;transform-origin:50% 0;animation:pgflip 6s ease-in-out calc(.5s + var(--i)*.7s) infinite backwards}
@keyframes pgflip{0%{transform:scaleY(1)}14%{transform:scaleY(0)}28%{transform:scaleY(-1)}80%{transform:scaleY(-1);opacity:1}92%{transform:scaleY(-1);opacity:0}93%{transform:scaleY(1);opacity:0}100%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.pg{animation:none}}
.stp{animation:stamp 2.6s ease-in-out infinite;transform-box:fill-box}
@keyframes stamp{0%,100%{transform:translateY(-6px)}45%,60%{transform:translateY(14px)}}
.key{transform-box:fill-box;transform-origin:50% 0;animation:keysw 2.4s ease-in-out infinite}
@keyframes keysw{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.flg{transform-box:fill-box;transform-origin:0 50%;animation:flagw 1.4s ease-in-out infinite}
@keyframes flagw{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.8) skewY(8deg)}}
@media (prefers-reduced-motion:reduce){.stp,.key,.flg{animation:none}}
.stp{animation:stamp2 3s ease-in-out infinite}
@keyframes stamp2{0%{transform:translateY(-2px)}30%,40%{transform:translateY(30px)}62%,100%{transform:translateY(-2px)}}
.imp{animation:impr 3s linear infinite}
@keyframes impr{0%,37%{opacity:0}40%,90%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.imp{animation:none}}
.arw .as{stroke-dasharray:1;animation:arwd 3.4s ease-in-out infinite}
@keyframes arwd{0%{stroke-dashoffset:1;opacity:1}38%,84%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
.arw .ah{transform-box:fill-box;transform-origin:50% 50%;animation:arwh 3.4s ease-in-out infinite}
@keyframes arwh{0%,34%{transform:scale(0);opacity:1}44%{transform:scale(1.25)}50%,84%{transform:scale(1);opacity:1}94%,100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.arw .as,.arw .ah{animation:none}}
.ipl{animation:plloop 3.6s ease-in-out 1s infinite backwards}
.iar{transform-box:fill-box;transform-origin:50% 50%;animation:arpop 3.6s ease-in-out 1s infinite backwards}
@keyframes arpop{0%,44%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.3)}56%,84%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.5)}}
@media (prefers-reduced-motion:reduce){.ipl,.iar{animation:none}}
.key{transform-box:view-box;transform-origin:98px 19px;animation:keyp 3.2s ease-in-out infinite}
@keyframes keyp{0%{transform:rotate(0)}10%{transform:rotate(20deg)}28%{transform:rotate(-14deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}90%,100%{transform:rotate(0)}}
.gl1,.gl2{transform-box:fill-box;transform-origin:center;opacity:0;animation:twk 3.2s ease-in-out infinite}
.gl2{animation-delay:.45s}
@keyframes twk{0%,15%{opacity:0;transform:scale(0) rotate(0)}30%{opacity:1;transform:scale(1.2) rotate(45deg)}45%,100%{opacity:0;transform:scale(.4) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.key,.gl1,.gl2{animation:none}.gl1,.gl2{opacity:0}}
.pk .pt2{flex:1;align-items:center;text-align:center}
.pk .ptag{align-self:center}
.pi{width:92px}
.pk .pt2{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px}
.pk .pt2 b{font-size:1.25rem;white-space:nowrap}
.pk .ptag{margin-top:0;white-space:nowrap;flex:none}
@media (max-width:380px){.pi{width:78px}.pk{padding:12px 12px}.pk .pt2 b{font-size:1.1rem}.pk .ptag{padding:0 8px;font-size:.8rem}}
@media (max-width:340px){.pk .pt2{flex-wrap:wrap}}
.pk .pt2{justify-content:flex-start;text-align:left;padding-left:10px}
.pk .pt2{padding-left:0;gap:6px}
.brand{text-align:center;color:var(--muted);font-size:.9rem;letter-spacing:.08em;margin:28px 0 4px}
body.landing .brand{display:none}
body.on-splash .brand{position:fixed;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));margin:0;pointer-events:none;z-index:1}
/* 首頁：繼續上次讀到 */
.cont{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:64px;margin:14px 0 4px;padding:10px 16px;box-shadow:0 5px 0 #E3B24D}
.cont small{font-size:.85rem;color:var(--ink)}
.cont b{font-size:1.2rem;line-height:1.4}
/* 題庫：歷屆年度、模擬考計時 */
.yl{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.yr{display:flex;flex-direction:column;align-items:center;min-height:64px;padding:8px;border:var(--line);border-radius:18px;background:#fff}
.yr b{font-size:1.15rem}.yr small{color:var(--muted)}
.yr[aria-disabled="true"]{background:#FAFAF9;opacity:.8}
.yr.shake{animation:shake .45s}
.mtm{text-align:center;margin:0 0 12px;background:var(--hl)}
.mtm b{font-size:1.5rem;font-variant-numeric:tabular-nums}
/* 章節：影片 */
.vid{position:relative;aspect-ratio:16/9;border:var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-style:dashed;background:#FAFAF9;color:var(--muted)}
.vid.soon svg{width:30%;max-width:120px;height:auto;overflow:visible}
.vid.soon .pj{transform-box:fill-box;transform-origin:center;animation:float 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vid.soon .pj{animation:none}}
/* 進度頁：勾選章節（方塊之間留足空隙，手指好點） */
.cgn{text-align:center;margin:10px 0 0;min-height:1.7em;color:var(--muted)}
.chk{padding:14px 16px 6px}
.cg{margin:0 0 20px}
.cgh{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.cgh b{font-size:1.15rem}
.cgc{color:var(--muted);font-size:.9rem}
.cgs{display:flex;flex-wrap:wrap;gap:12px 12px}
.cc{width:48px;height:48px;border:var(--line);border-radius:14px;background:#fff;font-size:1.05rem;line-height:1;transition:transform .12s}
.cc:active{transform:scale(.92)}
.cc[aria-pressed="true"]{background:var(--cd);color:#fff}
.cc[aria-pressed="true"]::after{content:"";}
/* 筆記頁目錄：沒有方框；讀完的章節前面顯示小勾 */
.row .ck{width:22px;flex:none;text-align:center;font-style:normal;color:var(--ink);font-size:1.1rem;line-height:1}
.row.done .t span{background:none}
.row.done .t{opacity:.6}
.row:active{background:var(--c)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.row .ck{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.row .ck svg{display:block}
/* 筆記頁：練習＋閱讀兩顆按鈕 */
.row .pr,.row .rd{min-width:64px;min-height:44px;padding:4px 12px;font-size:1rem;flex:none}
.row .pr{border:var(--line);border-radius:99px;background:var(--hl)}
.row{gap:8px}
.row .t{min-width:0}
.ch .seg{margin:6px 0 14px}
.seg.two{grid-template-columns:repeat(2,1fr);margin:8px 0}

.row .t{font-size:1.1rem}
details.sub summary .meta{font-size:1rem}

.row .pr{background:var(--paper)}
.row{cursor:default}
.row:active{background:none}
.row .t{text-align:left}
.row .t span{padding:0}

.ysj{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ysj .ysn{flex:1 1 140px;font-size:1.05rem;min-width:0}
.ysj .yb{display:flex;gap:8px;flex:none}
.ysj .yb button{min-width:76px;min-height:46px;padding:4px 16px;font-size:1.05rem;border:var(--line);border-radius:99px;background:var(--paper)}
.ysj .yb button.shake{animation:shake .45s}
#ymsg{margin:4px 0 12px}

.seg.mk4{grid-template-columns:repeat(4,1fr);margin:6px 0 4px}
.seg.mk4 button{padding:4px 2px;font-size:.95rem}

.btn.shake{animation:shake .45s}

.rvh{margin:14px 0 6px;font-size:1.05rem}
.rvl{list-style:none;margin:0;padding:0}
.rv{border:var(--line);border-radius:18px;background:#fff;padding:10px 12px;margin:0 0 10px}
.rv.bad{background:var(--paper)}
.rv p{margin:6px 0 0}
.rvd{margin-top:12px}.rvd summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}

.yr{justify-content:center;text-align:center}
.yr b{display:block;width:100%;text-align:center}

.wx{margin-top:8px}.wx summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:700}.wx p{margin:4px 0 0}

.tblw{overflow-x:auto}
.sprs .seg{margin:6px 0 10px}
.sprs .tbl{min-width:0;width:100%}.sprs .tbl th,.sprs .tbl td{padding:8px 8px}

.calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.calh b{font-size:1.1rem}
.calh button{width:44px;height:44px;border:var(--line);border-radius:50%;background:var(--paper);font-size:1.3rem;line-height:1}
.calh button:disabled{opacity:.35}
.calw{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:.85rem;margin-bottom:6px}
.calw i{font-style:normal}
.calw i:first-child,.calw i:last-child{color:#B24A3A}
.days.cal span.cd0{border:0;background:none}

.brand span,.brand small{display:block}
.brand small{margin-top:4px;font-size:.72rem;letter-spacing:.02em;line-height:1.5;padding:0 12px}

.brand{margin-bottom:18px}
body.on-splash .brand{margin-bottom:0}

.mkc{margin:0 0 12px}
.mkr{display:flex;gap:8px;margin-top:8px}
.mkr .q-in{flex:1;min-width:0}
.mkr .btn{flex:none;min-height:48px;padding:4px 16px}
.mkc .muted{margin:8px 0 0;font-size:.9rem}
.mkl{margin:8px 0 0;text-align:center}
.tp{margin:0 0 12px}
.tp .tpl{margin:6px 0 10px;line-height:1.6}
.tp .tpl small{color:var(--muted);margin-left:4px}

section.cd{background:#fff}
.cdn .cdd{font-weight:400;color:#C0392B;font-size:1.25em}
.cdn .cdh{color:#465D4C}
.cdn .cds{color:#7E9A85}
.cdn small{color:#6B7F70}

.row button.ck{width:44px;height:44px;margin:-6px -4px -6px -10px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.row button.ck svg{display:block}
.row button.ck:active{transform:scale(.9)}

/* ---- 進度頁、速記頁：配色比照「更多」頁，每個區塊用四科的淡色底 ---- */
section.cd.s-land{background:var(--c)}
.cdn .cds{color:#5F8268}
.cdn small{color:#6B5A2E}
.tp.s-law{background:var(--c)}
.tp .tpl .muted,.tp .tpl small{color:#4E6354}
p.pass{background:var(--val);border:var(--line);border-radius:var(--r);padding:12px 16px;margin:0 0 12px;color:var(--ink)}
.card.chk{background:none;border:0;padding:0;margin:0}
.cg{background:var(--c);border:var(--line);border-radius:var(--r);padding:14px 16px 6px;margin:0 0 12px}
.cg:last-child{margin-bottom:12px}
.sprs{background:var(--c);border:var(--line);border-radius:var(--r);padding:12px 16px 14px;margin:0 0 12px}
.sprs h3{margin:0 0 8px!important}
.sprs .seg{margin:6px 0 10px}
.sprs details.cmp{background:#fff}
.sprs details.cmp>summary{background:#fff}
.sprs .todo{background:#fff}
.sprs .vid.soon{background:#fff}

/* ---------- 會員 ---------- */
.pw{text-align:center;padding:24px 18px}
.pw h2{font-size:1.2rem;margin:6px 0 10px}
.pw p{text-align:left}
.pwi{font-size:2.2rem;line-height:1}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.plan{border:var(--line);border-radius:18px;padding:12px 10px;background:var(--paper);text-align:center}
.plan.hot{background:var(--hl)}
.plan b{display:block}
.plan .pp2{display:block;font-size:1.25rem}
.plan small{display:block;font-size:.8rem;color:var(--ink)}
.frb{flex:none;font-style:normal;font-size:.75rem;border:2px solid var(--ink);border-radius:99px;padding:0 8px;background:var(--good);margin-right:4px}
.lkc .btn{display:block;width:100%;margin-top:10px}
.protw{position:relative}
.prot{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.prot .wm{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.07;font-size:14px;line-height:3.4;word-break:break-all;transform:rotate(-12deg);transform-origin:center}
@media print{body{display:none!important}}

/* 到期提醒視窗 */
.rnw{position:fixed;inset:0;z-index:50;background:rgba(59,81,66,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.rnb{width:100%;max-width:420px;max-height:90vh;overflow:auto;margin:0;padding:22px 18px}
.rnb h2{font-size:1.25rem;margin:0 0 8px}

/* 裝置清單 */
.dvl{list-style:none;padding:0;margin:8px 0 12px}
.dvl li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:2px dashed #cfd6d0}
.dvl li:last-child{border-bottom:0}
.dvl span{display:flex;flex-direction:column}
.dvl small{color:var(--muted);font-size:.8rem}
.dvl .btn{min-height:40px;padding:4px 14px;flex:none}

/* 頁尾連結 */
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:8px 0 2px;font-size:.8rem;letter-spacing:0;pointer-events:auto}
.flinks a,.mlinks a{color:var(--muted)}
.mlinks{text-align:center;font-size:.85rem;margin:14px 0 0}
/* 方案介紹與法律頁 */
.pl-hero h2{font-size:1.3rem;margin:0 0 6px}
.pl-hero p{margin:0}
.plans.big .plan{padding:18px 10px}
.plans.big .pp2{font-size:1.5rem}
.ptg{display:inline-block;margin-top:6px;font-style:normal;font-size:.78rem;border:2px solid var(--ink);border-radius:99px;padding:0 8px;background:#fff}
.fl{list-style:none;margin:0;padding:0}
.fl li{padding:10px 0 10px 30px;border-bottom:2px dashed #cfd6d0;position:relative}
.fl li:last-child{border-bottom:0}
.fl li::before{content:'✓';position:absolute;left:4px;top:9px;font-size:1.1rem}
.fl small{display:block;color:var(--muted);font-size:.85rem}
.faq details{border-bottom:2px dashed #cfd6d0;padding:10px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-size:1rem}
.faq p{margin:8px 0 0;color:var(--ink)}
.legal h3{font-size:1.05rem;margin:22px 0 6px}
.legal p,.legal li{font-size:.95rem}
.legal ol{padding-left:1.4em;margin:6px 0}
.legal li{margin:4px 0}

/* 開場、選類別、選考試：頁尾跟著內容排在最下面，不再固定在畫面上（避免視窗較矮時蓋住卡片） */
body.on-splash #app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:0}
body.on-splash #view{flex:1;display:flex;flex-direction:column}
body.on-splash .splash,body.on-splash .pick{min-height:0;flex:1}
body.on-splash .grp{top:0;margin-top:80px}
body.on-splash .brand{position:static;margin:24px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom));pointer-events:auto}
/* 開場：圖、標題、按鈕排成一列，間距固定，整組置中（不再用畫面高度定位） */
body.on-splash .splash{justify-content:center;padding:32px 0 8px}
body.on-splash .art{position:static;transform:none;margin:0 auto 14px;width:100%;max-width:min(320px,51vh)}
body.on-splash .grp{top:0;margin-top:0}
.oo{padding-left:1.4em;margin:6px 0 14px}
.oo li{margin:4px 0}

/* 珩嘉文化 logo：開場標題、頁尾 */
.hjlogo{display:block;width:100%;height:100%}
.stitle.hjt{display:inline-flex;align-items:center;gap:.42em;padding:0}
.stitle .hjm{flex:none;width:1.3em;height:1.3em;animation:hjpop .5s cubic-bezier(.2,1.6,.4,1) 1.05s backwards}
.stitle .hjm .hjlogo{animation:hjturn 2s cubic-bezier(.5,0,.2,1) 2.6s}
@keyframes hjpop{from{transform:scale(0) rotate(-60deg)}}
@keyframes hjturn{0%{transform:none}30%,62%{transform:rotate(90deg)}92%,100%{transform:none}}
.stitle .stx{position:relative;display:inline-block;padding:0 6px;letter-spacing:.06em}
.stitle .stx .mk{animation-delay:1.7s}
.fbrand{display:inline-flex!important;align-items:center;gap:8px}
.fbrand .hjlogo{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.stitle .hjm,.stitle .hjm .hjlogo{animation:none}}

/* ===== 時事速覽 × 申論擬答（搶先體驗） ===== */
.nwh h1{font-size:1.5rem;line-height:1.4;margin:2px 0 8px}
.nwh p{margin:0 0 12px}
.nwk{color:var(--muted);font-size:.9rem;margin:0!important}
.nwok{color:#3F7A52;font-weight:700}
.nwl{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:12px}
.nws{display:grid;gap:6px;text-align:left;font:inherit;color:inherit;cursor:pointer;margin:0;background:var(--c,#fff);border-left-width:10px;border-left-color:var(--cd,var(--ink))}
.nws b{font-size:1.15rem}
.nws span{font-size:.88rem;line-height:1.6}
.nws em{font-style:normal;font-weight:700;justify-self:end}
.nws:hover{transform:translateY(-2px)}
.nwf{text-align:center;font-size:.9rem}
.nwt{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 10px}
.nwt button{flex:0 1 auto;max-width:100%;font:inherit;font-size:.9rem;padding:6px 14px;border:2px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.nwsec{scroll-margin-top:60px}
.nwsec h2{font-size:1.2rem;margin:18px 4px 10px}
.nwq h3{font-size:1.15rem;line-height:1.5;margin:0 0 12px}
.nwn{margin:0;color:var(--muted);font-size:.85rem;font-weight:700;letter-spacing:.08em}
.nwb,.nwm{margin:0 0 12px}
.nwb b,.nwm b,.nwx>summary>span:first-child{display:block;font-size:.88rem;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}
.nwb p{margin:0;padding:10px 14px;background:var(--paper);border-radius:12px;font-size:.95rem;line-height:1.85}
.nwm p{margin:0;font-weight:400;color:#2E6B45;line-height:1.85}
.nwa{width:100%;min-height:44px;font-weight:700}
.nwx{border-top:2px dashed var(--accent);padding-top:10px}
.nwx>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.nwx>summary::-webkit-details-marker{display:none}
.nwx>summary>span:first-child{margin:0}
.nwx>summary .nwa{width:auto;min-height:40px;padding:4px 18px;display:inline-flex;align-items:center;background:var(--hl)}
.nwx .nwa i{font-style:normal}
.nwx .nwa .c,.nwx[open] .nwa .o{display:none}
.nwx[open] .nwa .c{display:inline}
.nwx ol{position:relative;margin:12px 0 0;padding-left:1.5em;display:grid;gap:10px;line-height:1.85}
.nwx mark,.nwb mark{background:linear-gradient(180deg,transparent 45%,rgba(247,196,99,.85) 45%);color:inherit;padding:0 2px}
.lw{font-weight:700;color:#2F6B45}
.nt{display:block;margin-top:4px;color:var(--muted);font-size:.92rem}
.nwp{margin:0;text-align:center}
.nwsrc summary{cursor:pointer;font-weight:700}
.nwsrc ul{margin:10px 0 0;padding-left:1.2em;font-size:.88rem;line-height:1.8}
.nwsrc a{color:var(--muted);overflow-wrap:anywhere}
.nwsoon{margin:0 0 14px;padding-left:1.3em;line-height:2}
.mkt{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:.95rem;line-height:1.6;cursor:pointer}
.mkt input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:#465D4C}
.lgl{font-size:.82rem;margin:12px 0 0;line-height:1.6}
.lgl a{color:inherit}
nav.tabs div{grid-template-columns:repeat(var(--tn,5),1fr)}

.nwok.gold{color:#9C7C45}
.btn.dkg{background:#465D4C;border-color:#465D4C;color:#fff}
nav.tabs button{line-height:1.3}
.nb{white-space:nowrap;display:inline-block}
.nwsoon{list-style:none;padding-left:0}
.nwsoon li{position:relative;padding-left:1.6em}
.nwsoon li::before{content:'';position:absolute;left:.25em;top:.62em;width:.72em;height:.72em;border-radius:50%;background:#E8963A;box-shadow:0 0 0 3px #FBE3C4}
/* 擬答要點：統一顏色、先不用螢光筆 */
.nwx ol,.nwx ol li::marker{color:var(--ink)}
.nwq mark{background:none!important;color:inherit;padding:0}
.nwq .lw{color:inherit;font-weight:inherit}
.nwq .nt{color:inherit;font-size:inherit}
/* 時事擬答：適度加入品牌綠 */
.nwq .nwn{display:inline-block;background:#465D4C;color:#fff;border-radius:99px;padding:1px 12px;letter-spacing:.06em;margin-bottom:6px}
.nwb b,.nwm b,.nwx>summary>span:first-child{color:#465D4C;font-weight:700;display:flex;align-items:center;gap:6px}
.nwb b::before,.nwm b::before,.nwx>summary>span:first-child::before{content:'';width:4px;height:1em;border-radius:2px;background:#7E9A85}
.nwb p{background:#EEF4EF;border-left:4px solid #7E9A85;border-radius:4px 12px 12px 4px}
.nwsec h2{display:flex;align-items:center;gap:8px;color:#465D4C}
.nwsec h2::before{content:'';width:6px;height:1.1em;border-radius:3px;background:#465D4C}
.nwx{border-top-color:#BCD0C1}
.nwt button:hover{background:#EEF4EF}
.nwh .nwk{color:#5F8268;font-weight:700}
/* 背景：跟珩嘉官網一樣的淡淡格線（開場畫面維持原本的格紙） */
html{background:#F1F1F1}
body:not(.on-splash){background-color:#F1F1F1;background-image:linear-gradient(rgba(70,93,76,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(70,93,76,.075) 1px,transparent 1px);background-size:28px 28px;background-position:center top}

/* 題目標題比題號醒目 */
.nwq h3{font-size:1.25rem;font-weight:700;color:#2E3F33;line-height:1.5}
.nwq .nwn{font-size:.78rem;padding:0 10px;margin-bottom:4px}
/* 頁首：hJ 標誌 + HENOVIA */
#ttl{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer}
#ttl .tlg .hjlogo{width:30px;height:30px;display:block}
#ttl .tlt{display:flex;flex-direction:column;line-height:1.15}
#ttl .tlt b{font-size:1.05rem;letter-spacing:.12em;color:#465D4C}
#ttl .tlt small{font-size:.72rem;color:var(--muted);font-weight:400;letter-spacing:.04em}
/* 回到頂端 */
.totop{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:25;width:48px;height:48px;border-radius:50%;border:var(--line);background:#fff;color:var(--ink);font-size:1.3rem;font-weight:700;box-shadow:0 2px 8px rgba(30,38,33,.15);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.totop.on{opacity:1;pointer-events:auto;transform:none}
@media (min-width:700px){.totop{right:calc(50% - 360px)}}
/* 模擬試題與時事背景同色 */
.nwm p{color:#3B5142}
.nwb p{color:#3B5142}
.totop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#465D4C;border-color:#465D4C;color:#fff;padding:0}
.totop svg{display:block;margin-top:-2px}
.totop small{font-size:.58rem;letter-spacing:.12em;font-weight:700;line-height:1;margin-top:-3px}
#ttl .tlt b{letter-spacing:.06em;white-space:nowrap}
#ttl .tlt b{font-size:17px}
.fbrand{font-size:16px!important}
/* ===== 答題方向（小標、答題方向、法條依據、展開條文） ===== */
.nwd{font-size:.85rem;color:var(--muted);margin:8px 0 0!important;line-height:1.6}
.nwfr{text-align:center;font-size:.85rem;margin:8px 0 0!important}
.nwtry{display:inline-block;margin:0 0 4px 8px;padding:0 10px;border-radius:99px;background:#F8D27E;color:#3B5142;font-size:.78rem;font-weight:700;vertical-align:1px}
.nwbody{position:relative}
.nwx>summary{flex-wrap:wrap}
.nwx ol.nwpts{list-style:none;counter-reset:pt;padding:0;margin:12px 0 0;display:grid;gap:14px}
.nwpt{counter-increment:pt;position:relative;padding:12px 14px 12px 46px;border:1.5px solid #DCE5DE;border-radius:14px;background:#FBFCFA;min-width:0}
.nwpt::before{content:counter(pt);position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:50%;background:#465D4C;color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.nwpt h4{margin:0 0 4px;font-size:1.05rem;line-height:1.5;color:#2E3F33;font-weight:700;overflow-wrap:anywhere}
.nwdir{margin:0;line-height:1.85;color:#3B5142;overflow-wrap:anywhere}
.nwlaw{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-top:8px;font-size:.92rem;line-height:1.6}
.nwll{flex:0 0 auto;font-size:.8rem;font-weight:700;color:#fff;background:#7E9A85;border-radius:6px;padding:1px 8px}
.nwln{color:#2E3F33;font-weight:700;overflow-wrap:anywhere;min-width:0}
.nwfull{margin-top:6px}
.nwfull summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:40px;padding:2px 14px;border:2px solid #465D4C;border-radius:99px;font-size:.88rem;color:#465D4C;background:#fff}
.nwfull summary::-webkit-details-marker{display:none}
.nwfull summary .c,.nwfull[open] summary .o{display:none}
.nwfull[open] summary .c{display:inline}
.nwart{margin-top:10px;padding:10px 12px;background:#EEF4EF;border-radius:10px}
.nwart b{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:.88rem;color:#465D4C}
.nwart b small{font-weight:400;font-size:.75rem;border:1px solid #7E9A85;border-radius:6px;padding:0 6px;color:#5F8268}
.nwart p{margin:4px 0 0;font-size:.95rem;line-height:1.85;overflow-wrap:anywhere}
.nwmore{margin-top:10px;background:var(--hl)}
@media (max-width:420px){.nwpt{padding:12px 12px 12px 40px}.nwpt::before{left:9px}}
.nwbody{overflow:hidden}
.nwt button{white-space:normal;text-align:left;line-height:1.4}
.nwk2{display:inline-block;margin-right:6px;vertical-align:1px}
.nwkey{background:#B79A62}
/* ===== 複習標記 ===== */
.nwrb,.nwsb{display:none;margin:0 0 4px 8px;padding:0 10px;border-radius:99px;font-size:.78rem;font-weight:700;vertical-align:1px}
.nwrb{background:#DCEADF;color:#2F6B45}
.nwsb{background:#FFF1C9;color:#8A6A1F}
.nwq.is-r .nwrb,.nwq.is-s .nwsb{display:inline-block}
.nwq.is-r{border-color:#7E9A85}
.nwmk{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1.5px solid #E5ECE6}
.nwmk button{flex:1 1 140px;min-height:44px;border:2px solid #465D4C;border-radius:99px;background:#fff;color:#465D4C;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
.nwmk .nwmr[aria-pressed="true"]{background:#465D4C;color:#fff}
.nwmk .nwms{border-color:#C9A24A;color:#8A6A1F}
.nwmk .nwms[aria-pressed="true"]{background:#F8D27E;color:#3B5142;border-color:#C9A24A}
.nwfl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.nwfl button{font:inherit;font-size:.9rem;min-height:40px;padding:4px 16px;border:2px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);cursor:pointer}
.nwfl button[aria-pressed="true"]{background:#465D4C;border-color:#465D4C;color:#fff}
.nwfc{margin-left:auto;font-size:.85rem;color:var(--muted)}
.nwpg{display:grid;gap:4px}
.nwbar{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.7);border:1.5px solid rgba(59,81,66,.35);overflow:hidden}
.nwbar i{display:block;height:100%;background:#465D4C;border-radius:99px}
.nwpg small{font-size:.82rem;color:#3B5142}
.nwq[hidden],.nwsec[hidden],#nwempty[hidden]{display:none!important}
.nwmkt{margin:10px 0 4px;padding:10px 12px;border:2px dashed #C9A24A;border-radius:14px;background:#FFFBEF}
.nwok[hidden]{display:none}
/* 題號跳轉 */
.nwgo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:10px 12px;background:#fff;border:2px solid #DCE5DE;border-radius:16px}
.nwgo b{font-size:.85rem;color:#465D4C;margin-right:4px;width:100%}
.nwgo button{width:38px;height:38px;border-radius:50%;border:2px solid #465D4C;background:#fff;color:#465D4C;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;position:relative;padding:0}
.nwgo button.r{background:#465D4C;color:#fff}
.nwgo button.s::after{content:'⭐';position:absolute;top:-9px;right:-7px;font-size:.7rem}
.nwq{scroll-margin-top:12px}
@keyframes nwhit{0%{box-shadow:0 0 0 0 rgba(248,210,126,.95)}100%{box-shadow:0 0 0 14px rgba(248,210,126,0)}}
.nwq.nwhit{animation:nwhit 1.2s ease-out 2}
/* 依子問題分組 */
.nwgrp{margin-top:16px}
.nwgrp:first-child{margin-top:12px}
.nwgh{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:12px;background:#465D4C;color:#fff;font-size:1rem;line-height:1.5}
.nwgh span{flex:0 0 auto;font-weight:700;color:#fff}
.nwgrp .nwpts{margin-top:10px;padding-left:10px;border-left:3px solid #BCD0C1}

/* 科目進度：圓環 */
.nws .nwpg{display:flex;align-items:center;gap:12px}
.nws .nwring{--p:0;width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#465D4C calc(var(--p)*1%),rgba(255,255,255,.75) 0);border:1.5px solid rgba(59,81,66,.3)}
.nws .nwring i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c,#fff);font-style:normal;font-weight:700;font-size:.8rem;line-height:1;color:#2E3F33}
.nws .nwpg small{font-size:.85rem;line-height:1.6;color:#3B5142}


/* =====================================================
   時事擬答：手繪風改版（首頁 #/news、題目頁 #/nw/…）
   框線畫在 ::before 上並套 #wobble 濾鏡，文字不會跟著抖；少框、靠留白分層
   ===================================================== */
:root{--hair:#C9D3CB;--note:#F7F8F4;--hand:"LXGW WenKai TC","Kaiti TC","STKaiti","BiauKai",serif}
.dr{position:relative;isolation:isolate}
.dr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,#fff);border:3px solid var(--ink);border-radius:var(--shape,24px);filter:url(#wobble);pointer-events:none}
.sa{--shape:26px 30px 24px 32px / 30px 24px 32px 26px}
.sb{--shape:22px 18px 26px 20px / 18px 24px 20px 26px}
.sc{--shape:20px 26px 18px 24px / 24px 18px 26px 20px}
.pl{--shape:999px}
.nwbtn{font:inherit;color:var(--ink);background:none;border:0;padding:8px 18px;min-height:44px;cursor:pointer;--fill:#fff}
.nwbtn:hover{--fill:var(--civil)}
.nwcta{display:block;width:100%;text-align:center;font-size:1rem;font-weight:700;padding:12px 16px;--fill:var(--hl)}
.nwcta:hover{--fill:#F4C55C}
.nwbtn:focus-visible,.nwsj:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
.nwsq{display:block;height:12px;max-width:100%}
.nwey{margin:0;font-size:.82rem;color:var(--muted);letter-spacing:.08em}
.nwhd{font-family:var(--hand);font-weight:700;line-height:1.25;margin:4px 0 2px;text-wrap:balance}

/* 首頁 */
.nwin{margin:30px 0 0;padding:28px 24px 22px}
.nwin .nwhd{font-size:clamp(1.9rem,7vw,2.5rem)}
.nwin .nwhd .x{font-weight:400;color:var(--muted);margin:0 .15em}
.nwin .nwsq{margin:2px 0 14px}
.nwin>p{margin:0}
.nwin mark{background:linear-gradient(transparent 55%,var(--hl) 55%);color:inherit;padding:0 1px}
.nwin .nwsign{margin-top:10px;font-family:var(--hand);font-size:1.05rem;color:var(--muted)}
.nwin .nwcta{margin-top:20px}
.nwin .nwok{margin-top:16px}
.nwin .nwfr{margin:10px 0 0;text-align:center;font-size:.82rem;color:var(--muted)}
.nwdood{position:absolute;right:18px;top:-28px;width:74px;height:74px;transform:rotate(8deg)}
@media (max-width:420px){.nwdood{width:58px;height:58px;top:-22px;right:12px}}
.nwlab{margin:34px 4px 12px;font-family:var(--hand);font-weight:700;font-size:1.2rem}
.nwgr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:520px){.nwgr{grid-template-columns:1fr}}
.nwsj{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:20px 20px 16px;text-align:left;font:inherit;color:var(--ink);background:none;border:0;cursor:pointer;--fill:var(--c,#fff);transition:transform .18s ease}
.nwsj:nth-child(odd){transform:rotate(-.6deg)}
.nwsj:nth-child(even){transform:rotate(.5deg)}
.nwsj:hover{transform:rotate(0) translateY(-3px)}
.nwsjn{font-family:var(--hand);font-weight:700;font-size:1.4rem;line-height:1.35;text-wrap:balance}
.nwmeta{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;color:var(--muted)}
.nwmeta span:last-child{color:var(--ink)}
.nwsj .nwpg{display:flex;align-items:center;gap:12px}
.nwsj .nwring{--p:0;width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#465D4C calc(var(--p)*1%),rgba(255,255,255,.75) 0);border:1.5px solid rgba(59,81,66,.3)}
.nwsj .nwring i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c,#fff);font-style:normal;font-weight:700;font-size:.8rem;line-height:1;color:#2E3F33}
.nwsj .nwpg small{font-size:.85rem;line-height:1.6;color:#3B5142}
.nwnote{margin:28px 0 8px;text-align:center;font-size:.88rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.nwsj,.nwsj:nth-child(n){transition:none;transform:none}}

/* 題目頁 */
.nwback{margin:10px 0 0;font-size:.9rem;padding:6px 16px;min-height:40px}
.nwsh{margin:16px 0 0;padding:22px 24px 20px;--fill:var(--c,#fff)}
.nwsh .nwhd{font-size:clamp(1.7rem,6.5vw,2.2rem)}
.nwsrc{margin:0;font-size:.88rem;color:var(--muted)}
.nwsec h2.nwgt{display:flex;align-items:center;gap:10px;margin:30px 4px 12px;font-family:var(--hand);font-weight:700;font-size:1.2rem;color:var(--ink)}
.nwsec h2.nwgt::before{display:none}
.nwtag{font-family:inherit;font-family:"Huninn","Noto Sans TC",sans-serif;font-weight:400;font-size:.75rem;background:var(--hl);padding:1px 10px;border-radius:999px}
#view .nwq{background:none;border:0;margin:0 0 18px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:22px;border-radius:28px}
.nwq.is-r{--fill:#FBFDFB}
.nwqh h3{margin:0;font-size:1.3rem;line-height:1.45;font-weight:700;color:var(--ink);text-wrap:balance}
.nwqno{margin:0 0 2px;font-family:var(--hand);font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nwqno .nwtry,.nwqno .nwrb,.nwqno .nwsb{margin:0;font-family:"Huninn","Noto Sans TC",sans-serif}
.nwq.is-r .nwqno .nwrb,.nwq.is-s .nwqno .nwsb{display:inline-block}
.nwpart h4,.nwx>summary h4{margin:0 0 6px;font-family:var(--hand);font-weight:700;font-size:1.08rem;color:var(--ink)}
.nwnews{background:var(--note);border-radius:14px;padding:14px 16px;font-size:.95rem;line-height:1.85;overflow-wrap:anywhere}
.nwfrom{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px}
.nwask{margin:0;font-size:1.06rem;line-height:1.85;color:var(--ink)}
.nwlock .nwbtn{width:100%;font-weight:700}
#view .nwx{border-top:2px dashed var(--hair);padding-top:18px}
.nwx>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.nwx>summary h4{margin:0}
#view .nwx>summary .nwa{width:auto;min-height:36px;padding:4px 16px;font-size:.88rem;background:none;--fill:var(--hl);display:inline-flex;align-items:center}
.nwx .nwbody{margin-top:14px}
.nwis+.nwis,.nwps+.nwis,.nwis+.nwps{margin-top:24px}
.nwis>h5{margin:0;letter-spacing:.02em;font-family:var(--hand);font-weight:700;font-size:1.18rem;line-height:1.4;color:var(--ink)}
.nwis>.nwsq{width:120px;margin:2px 0 10px}
#view .nwx ol.nwps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;counter-reset:pt}
.nwpi{position:relative;counter-increment:pt;padding-left:42px;min-height:30px;line-height:1.85}
.nwpi::before{content:"";position:absolute;left:0;top:2px;width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;filter:url(#wobble);box-sizing:border-box}
.nwpi::after{content:counter(pt);position:absolute;left:0;top:2px;width:30px;height:30px;display:grid;place-items:center;font-family:var(--hand);font-weight:700;font-size:1.05rem;line-height:1}
.nwpi strong{display:block;font-size:1rem;font-weight:700;color:var(--ink)}
.nwpi>p{margin:2px 0 6px;overflow-wrap:anywhere}
.nwlw{font-size:.86rem;color:var(--muted);line-height:1.7}
.nwlb{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1.5px dashed var(--ink);padding:0;margin-left:8px;cursor:pointer;white-space:nowrap}
.nwlw blockquote{margin:8px 0 0;padding:10px 14px;background:var(--note);border-radius:12px;color:var(--ink);font-size:.93rem;line-height:1.8;overflow-wrap:anywhere}
.nwlw blockquote p{margin:0}
.nwlw blockquote p+p{margin-top:6px}
.nwlw blockquote b{font-weight:700}
.nwlw blockquote small{color:var(--muted)}
.nwlw blockquote[hidden]{display:none}
#view .nwmk{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding-top:18px;border-top:2px dashed var(--hair)}
#view .nwmk .nwbtn{flex:1 1 auto;min-height:44px;border:0;border-radius:0;background:none;font-size:.95rem;font-weight:700;color:var(--ink)}
#view .nwmk .nwmr[aria-pressed="true"]{--fill:var(--civil)}
#view .nwmk .nwms{color:var(--ink)}
#view .nwmk .nwms[aria-pressed="true"]{--fill:var(--hl)}
#view .nwmk .nwcta{flex-basis:100%}

/* 底部導覽：手描線，目前頁面實心深綠 */
nav.tabs button{border:0;background:none;isolation:isolate;--fill:#fff;color:var(--ink)}
nav.tabs button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);border:3px solid var(--ink);border-radius:999px;filter:url(#wobble);pointer-events:none}
nav.tabs button[aria-current="page"]{background:none;--fill:var(--ink);color:#fff}

/* 時事背景／模擬試題／擬答要點：黃色螢光筆痕 */
.nwlb1{display:inline-block;padding:0 8px;margin-left:-4px!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20120%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M3%207%20C%2030%203%2C%2070%205%2C%20117%204%20L%20116%2015%20C%2080%2017%2C%2040%2014%2C%204%2016%20Z%27%20fill%3D%27%23F8D27E%27%20opacity%3D%27.9%27/%3E%3C/svg%3E") no-repeat 0 85%/100% 62%}

/* 補充／複習／對照：不編號，改小黃標 */
.nwpi.nwpx{counter-increment:none}
.nwpi.nwpx::before{display:none}
.nwpi.nwpx::after{content:attr(data-tag);width:auto;height:auto;top:5px;padding:0 6px;border-radius:999px;background:var(--hl);font-family:"Huninn","Noto Sans TC",sans-serif;font-weight:400;font-size:.72rem;line-height:1.7}

/* 題目頁工具列：篩選、題號、章節（手繪風、少框） */
#view .nwfl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0 0}
#view .nwfl button{position:relative;isolation:isolate;font:inherit;font-size:.9rem;color:var(--ink);background:none;border:0;border-radius:0;min-height:38px;padding:4px 14px;cursor:pointer;--fill:#fff}
#view .nwfl button::before,#view .nwt button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);border:2.5px solid var(--ink);border-radius:999px;filter:url(#wobble);pointer-events:none}
#view .nwfl button[aria-pressed="true"]{--fill:var(--ink);color:#fff}
#view .nwfc{margin-left:auto;font-size:.85rem;color:var(--muted)}
#view .nwgo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 0;padding:0;background:none;border:0;box-shadow:none}
#view .nwgo b{font-family:var(--hand);font-weight:700;font-size:1rem;margin-right:6px;color:var(--ink)}
#view .nwgo button{width:34px;height:34px;min-height:0;padding:0;border:1.5px solid var(--hair);border-radius:50%;background:#fff;color:var(--ink);font:inherit;font-size:.85rem;line-height:1;cursor:pointer}
#view .nwgo button.r{background:#465D4C;border-color:#465D4C;color:#fff}
#view .nwt{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;background:none;border:0;position:static}
#view .nwt button{position:relative;isolation:isolate;font:inherit;font-size:.88rem;color:var(--ink);background:none;border:0;border-radius:0;min-height:36px;padding:4px 14px;white-space:normal;cursor:pointer;--fill:var(--c,#fff)}
.nwlw{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6em}
.nwlw .nwlb{margin-left:0}
.nwlw blockquote{flex-basis:100%}

/* 分享這題 */
.nwqno .nwshr{margin-left:auto;font-family:"Huninn","Noto Sans TC",sans-serif;font-size:.8rem;color:var(--ink);background:none;border:0;border-bottom:1.5px dashed var(--ink);padding:0;cursor:pointer;white-space:nowrap}

/* 即將推出、我的帳號、登入視窗：手繪風（框畫在 ::before 上） */
.hdp .card{position:relative;isolation:isolate;background:none;border:0;padding:20px;margin:0 0 18px}
.hdp .card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,#fff);border:3px solid var(--ink);border-radius:26px 30px 24px 32px / 30px 24px 32px 26px;filter:url(#wobble);pointer-events:none}
.hdp .card:nth-of-type(even)::before{border-radius:22px 18px 26px 20px / 18px 24px 20px 26px}
.hdp .btn,.hdp .back{position:relative;isolation:isolate;background:none;border:0;color:var(--ink);--fill:#fff}
.hdp .btn::before,.hdp .back::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);border:3px solid var(--ink);border-radius:999px;filter:url(#wobble);pointer-events:none}
.hdp .btn.pri{--fill:var(--hl);font-weight:700}
.hdp .btn.dkg{--fill:#465D4C;color:#fff}
.hdp h1,.hdp h2.pt,.hdp .rnb h2{font-family:var(--hand);font-weight:700}
.hdp h1{font-size:clamp(1.7rem,6.5vw,2.2rem);line-height:1.3;margin:4px 0 2px}
.hdp h2.pt{font-size:1.5rem}
.hdp .nwsq{margin:2px 0 12px}
.hdp .nwsoon{margin:6px 0 16px;padding-left:1.3em;line-height:2}
.hdp .nwsoon li::marker{color:#C9A24A}
.hdp .nwmkt{border:0;background:var(--note);border-radius:14px}
.rnw.hdp .rnb{overflow:visible}
.rnw.hdp .rnb.card::before{--fill:#fff}
.hdp .fsz button{position:relative}
.hdp a{color:var(--ink);text-decoration-style:dashed;text-underline-offset:4px}

/* 回報連結 */
#view .nwrep{margin:-8px 0 0;text-align:right;font-size:.8rem}
#view .nwrep a{color:var(--muted);text-decoration-style:dashed;text-underline-offset:3px}
/* 沒登入的登入提醒（浮在底部導覽上方） */
.nwstk{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:19;width:min(640px,calc(100% - 24px));display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;isolation:isolate;font-size:.95rem;font-weight:700;color:var(--ink);animation:nwup .25s ease-out}
.nwstk::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hl);border:3px solid var(--ink);border-radius:999px;filter:url(#wobble);box-shadow:0 6px 0 rgba(59,81,66,.12)}
.nwstk[hidden]{display:none}
.nwstk span{flex:1 1 auto;min-width:0}
.nwstk .nwstb{flex:0 0 auto;min-height:38px;padding:4px 18px;--fill:#fff;font-weight:700}
.nwstx{flex:0 0 auto;width:34px;height:34px;border:0;background:none;font:inherit;font-size:1rem;color:var(--ink);cursor:pointer;border-radius:50%}
@keyframes nwup{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.nwstk{animation:none}}
body:has(#nwstk:not([hidden])) .totop{bottom:calc(144px + env(safe-area-inset-bottom,0px))}