@import "tokens.css";
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC",system-ui,sans-serif;
  font-size:13px;line-height:1.55;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important}}
svg{display:block}

/* ── 報頭 ── */
.mast{padding:18px var(--sp) 12px;border-bottom:2px solid var(--ink);position:relative}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ink)}
.mast h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1}
.mast h1 em{font-style:normal;color:var(--brand)}

/* ── 控制列 ── */
.ctrl{padding:10px var(--sp) 0}
.codes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.codes button{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  min-height:48px;padding:4px 3px;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;text-align:center;
  color:var(--ink-3);box-shadow:inset 0 -2px 0 transparent;transition:var(--ease)}
.codes button .k{display:none}
.codes button .z{font-size:11.5px;font-weight:600}
.codes button .n{font-size:9.5px;font-weight:400;opacity:.75}
.codes button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--sc,var(--ink))}
.codes button[aria-pressed="true"] .k{color:var(--sc,var(--ink))}
.codes button[data-k="*"][aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--brand);color:var(--brand-deep)}
.codes button[data-k="*"][aria-pressed="true"] .k{color:var(--brand-deep)}
.codes button:active{background:var(--paper-2)}

.segs{display:flex;gap:14px;margin:8px 0 2px;align-items:center;flex-wrap:wrap}
.segs button{font-size:12.5px;color:var(--ink-3);min-height:44px;min-width:44px;padding:0 2px 3px;border-bottom:2px solid transparent;transition:var(--ease)}
.segs button b{font-weight:700;color:inherit}
.segs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.segs .acts{margin-left:auto;display:flex;gap:12px;align-items:center}
.segs .act{font-size:12px;color:var(--brand-deep);min-height:44px;min-width:44px;padding:0 6px;
  border-bottom:0;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}

.weeknav{display:grid;grid-template-columns:repeat(10,1fr);margin:14px 0 0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.weeknav button{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  min-height:44px;padding:6px 0 5px;font-size:13px;font-weight:600;color:var(--ink-2);transition:var(--ease)}
.weeknav button:active{background:var(--paper-2)}
.weeknav button.mark{color:var(--brand-deep);font-weight:800}
.weeknav button.mark::after{content:"";display:block;width:3px;height:3px;background:var(--brand);margin:2px auto 0}
.weeknav button.now{color:var(--ink);font-weight:800;box-shadow:inset 0 0 0 2px var(--ink)}
.weeknav button.sel{background:var(--ink);color:var(--paper);font-weight:800}
.weeknav button.sel.mark{background:var(--brand);color:#fff}
.weeknav button.sel::after{background:var(--paper)}

/* ── 週 ── */
main{padding:0 var(--sp) 56px}
.wk{margin-top:22px;scroll-margin-top:8px}
.wkh{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;min-height:44px;
  border-bottom:2px solid var(--ink);padding-bottom:3px}
.wkh .no{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.wkh .dt{font-size:11px;color:var(--ink-2)}
.wkh .off{font-size:10px;font-weight:700;color:var(--brand-deep);border:1px solid var(--brand);padding:0 4px}
.wkh .cnt{margin-left:auto;font-size:10.5px;color:var(--ink-3);letter-spacing:.06em}
.wkh .cv{margin-left:6px;width:9px;height:9px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--ease);flex:none}
.wk.col .cv{transform:rotate(-45deg) translate(-1px,1px)}
.wk.now .wkh .no{color:var(--brand)}
.wk.exam .wkh{border-bottom-color:var(--exam)}
.wk.exam .wkh .no,.wk.exam .wkh .cnt{color:var(--exam)}
.wk.exam .wkh .dt{color:color-mix(in srgb,var(--exam) 75%,var(--ink))}

.body{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--ease)}
.wk.col .body{grid-template-rows:0fr}
.inner{min-height:0;overflow:hidden;transition:opacity var(--ease)}
.wk.col .inner{opacity:0}

.line{display:grid;grid-template-columns:var(--gut) 1fr;border-bottom:1px solid var(--rule-soft);padding:9px 0 10px}
.line:last-child{border-bottom:0}
.gut{position:relative}
.gut .k{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink)}
.gut::after{content:"";position:absolute;left:0;top:19px;bottom:-10px;width:2px;background:var(--sc,var(--rule))}
.line:last-child .gut::after{bottom:0}
.sub{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-2)}
.ttl{font-size:15.5px;font-weight:600;line-height:1.4;margin-top:1px;text-wrap:pretty}
.en{font-size:11px;color:var(--ink-3);margin-top:2px;letter-spacing:.01em}
.pts{margin-top:4px;list-style:none;padding:0}
.pts li{font-size:12.5px;color:var(--ink-2);padding-left:11px;position:relative}
.pts li::before{content:"–";position:absolute;left:0;color:var(--rule)}
.note{font-size:10.5px;color:var(--brand-deep);margin-top:4px}
.bks{margin-top:5px;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.bks span::after{content:" ・ "}
.bks span:last-child::after{content:""}
.tag{float:right;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--brand-deep);
  border-bottom:2px solid var(--brand);margin-left:8px}
.rng{float:right;font-size:11px;color:var(--ink-3);margin-left:8px}

.line.full{grid-template-columns:1fr;text-align:center;padding:14px 0;background:
  repeating-linear-gradient(-45deg,transparent 0 6px,var(--rule-soft) 6px 7px)}
.line.full .ttl{font-size:14px;font-weight:800;letter-spacing:.12em;
  background:var(--paper);display:inline-block;padding:2px 12px}
.line.full .en{background:var(--paper);display:inline-block;padding:0 12px}

.foot{padding:0 var(--sp) 40px;font-size:10px;color:var(--ink-3);line-height:1.7;letter-spacing:.02em}
.foot b{color:var(--ink-2);font-weight:600}
.hidden{display:none !important}

/* ── 工具列 ── */
.tools{display:flex;gap:8px;align-items:stretch;margin-bottom:2px}
.tbtn{min-height:44px;padding:0 12px;border:1px solid var(--rule);background:var(--paper);
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.tbtn:active{background:var(--paper-2)}
.tbtn.prim{flex:1;justify-content:flex-start;border-color:var(--ink);color:var(--ink)}
.tbtn .tl{font-weight:700}
.tbtn .sum{color:var(--ink-3);font-size:11.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ic-f{width:14px;height:10px;flex:none;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.ic-f::after{content:"";position:absolute;left:3px;right:3px;top:3px;border-top:2px solid currentColor}

/* ── Modal ── */
.ovl{position:fixed;inset:0;width:100vw;max-width:100vw;z-index:80;background:rgba(34,26,18,.42);
  display:flex;align-items:flex-end;animation:fade .16s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
.sheet{background:var(--paper);width:100%;max-width:100%;max-height:min(62vh,560px);overflow:hidden;
  display:flex;flex-direction:column;border-top:2px solid var(--ink);animation:rise .18s cubic-bezier(.3,.7,0,1)}
.sh{display:flex;align-items:center;padding:4px 10px 4px 14px;border-bottom:1px solid var(--rule);flex:none}
.sh h2{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.sh .x{margin-left:auto;min-width:44px;min-height:44px;font-size:16px;color:var(--ink-2)}
.sb{padding:10px 14px 6px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0}
.mlbl{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-3);margin-bottom:6px;display:flex;gap:10px;align-items:center}
.mlink{margin-left:auto;font-size:11.5px;letter-spacing:0;font-weight:500;color:var(--brand-deep);
  text-decoration:underline;text-underline-offset:3px;min-height:32px;padding:0 2px;flex:none}
.mlink + .mlink{margin-left:0}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mgrid button{min-width:0;min-height:44px;padding:0 6px;border:1px solid var(--rule);background:var(--paper);
  display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;color:var(--ink-2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mgrid button i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--sc)}
.mgrid button b{font-weight:400;font-size:11px;color:var(--ink-3);flex:none}
.mgrid button[aria-pressed="true"]{border-color:var(--sc,var(--ink));color:var(--ink);font-weight:700;
  box-shadow:inset 0 -3px 0 var(--sc,var(--ink))}
.mrows{display:flex;flex-direction:column}
.mrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mrows button{min-width:0;min-height:44px;padding:0 8px;display:flex;align-items:center;gap:7px;
  border:1px solid var(--rule);font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.mrows button b{margin-left:auto;font-weight:400;font-size:10.5px;color:var(--ink-3);flex:none}
.mrows button[aria-pressed="true"]{color:var(--ink);font-weight:700;border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--brand)}
.mrows button[aria-pressed="true"]::before{content:"";width:8px;height:8px;background:var(--brand);flex:none}
.mrows button:not([aria-pressed="true"])::before{content:"";width:8px;height:8px;border:1px solid var(--rule);flex:none}
.sf{padding:8px 14px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);flex:none}
.apply{width:100%;min-height:46px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700}
.apply:active{background:var(--brand-deep)}

@media(min-width:720px){
  :root{--sp:32px;--gut:56px}
  body{font-size:13.5px}
  .wrap{max-width:1080px;margin:0 auto}
  .mast h1{font-size:26px}
  .codes{grid-template-columns:repeat(8,1fr)}
  .weeknav{grid-template-columns:repeat(21,1fr)}
  .inner{columns:2;column-gap:34px;column-rule:1px solid var(--rule-soft)}
  .line{break-inside:avoid}
  .line.full{column-span:all}
  .wkh .no{font-size:32px}
}

/* ── 月曆檢視（進度表） ── */
.mnav{display:flex;align-items:center;gap:8px;margin:12px 0 8px}
.mnav h2{flex:1;text-align:center;margin:0;font-size:15px;font-weight:800}
.mnav button{min-width:44px;min-height:44px;border:1px solid var(--rule);background:var(--paper);
  font-size:18px;color:var(--ink-2)}
.mnav button[disabled]{opacity:.35}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cal .hd{background:var(--paper-2);text-align:center;font-size:11px;font-weight:700;color:var(--ink-2);padding:5px 0}
.cal .dy{background:var(--paper);min-height:68px;padding:3px 4px 5px;display:flex;flex-direction:column;
  gap:2px;align-items:flex-start;text-align:left;position:relative}
.cal .dy.off{background:var(--paper-2)}
.cal .dy.out{background:var(--paper-2);opacity:.4}
.cal .dy .n{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.cal .dy.today .n{background:var(--brand);color:#fff;border-radius:99px;min-width:20px;height:20px;
  display:grid;place-items:center;font-size:11px}
.cal .dy .wno{position:absolute;top:4px;right:4px;font-size:9.5px;font-weight:800;color:var(--ink-3)}
.cal .dy .exm{position:absolute;top:17px;right:4px;font-size:9px;font-weight:800;color:#fff;
  background:var(--exam);padding:0 3px;border-radius:2px}
.cal .dy .cc{display:flex;flex-wrap:wrap;gap:2px}
.cal .dy .cc i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:var(--cc,var(--ink-3));padding:0 3px;border-radius:2px;line-height:1.6}
.cal .dy .more{font-size:9px;color:var(--ink-3)}
.calhint{font-size:11px;color:var(--ink-3);margin-top:8px;line-height:1.6}
@media(min-width:760px){ .cal .dy{min-height:96px} }

/* 月曆：當日詳情與選取／整週標示 */
.cal .dy.pick{outline:2px solid var(--brand);outline-offset:-2px}
.cal .dy.inwk{background:color-mix(in srgb,var(--brand) 7%,var(--paper))}
.daybox{border:1px solid var(--rule);border-top:0;background:var(--paper)}
.dhd{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule-soft);
  background:var(--paper-2);flex-wrap:wrap}
.dhd b{font-size:13.5px}
.dhd span{font-size:11.5px;color:var(--ink-3)}
.dhd .dgo{margin-left:auto;min-height:36px;padding:0 10px;border:1px solid var(--rule);font-size:11.5px;
  background:var(--paper);color:var(--ink-2)}
.drow{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:7px 10px;border-bottom:1px solid var(--rule-soft)}
.drow:last-child{border-bottom:0}
.dp{font-size:10.5px;color:var(--ink-3);line-height:1.45}
.dp b{display:block;font-size:11.5px;color:var(--ink-2)}
.dsub{font-size:13px;font-weight:700}
.dsub i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--sc);
  padding:0 4px;border-radius:2px;margin-right:5px}
.dit{font-size:12px;color:var(--ink-2);margin-top:2px}
.dit span{display:block;font-size:10.5px;color:var(--ink-3)}
.dnone{font-size:11px;color:var(--ink-3);padding:2px 0}

/* hidden 屬性要壓過元件自己的 display */
[hidden]{display:none !important}