/* =====================================================
   好悍筆記 HENOVIA　樣式表
   想改顏色、字體、圓角，先看最上面這一區就好
   ===================================================== */
:root{
  /* 基本色（取自 logo：墨綠 + 淺灰紙） */
  --paper:#F4F4F2;      /* 淺灰紙（底色） */
  --ink:#3B5142;        /* 墨綠（文字與粗線框） */
  --muted:#6F7F74;      /* 次要文字 */
  --hl:#F8D27E;         /* 暖橙黃（重點標示、主要按鈕） */
  --accent:#BCD0C1;     /* 選取中的按鈕 */
  --bad:#F3C9C4;        /* 答錯提示 */
  --good:#CFE3D3;       /* 答對提示 */
  /* 四科顏色：淺色用在標題列，深色用在進度條 */
  --civil:#D5E3D8;  --civil-d:#5F8268;
  --val:#E4EBD3;    --val-d:#9DB25E;
  --land:#F5E6C3;   --land-d:#D9A441;
  --law:#DADFE2;    --law-d:#7F929B;
  /* 形狀 */
  --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}