/* 《板鼻在雲端》 */
/* ⚠ §201 */
@font-face{font-family:"Latin Quotes";src:local("Georgia"),local("Noto Serif"),local("NotoSerif-Regular"),local("Times New Roman"),local("DejaVu Serif");font-weight:100 550;unicode-range:U+2018-2019,U+201C-201D}
@font-face{font-family:"Latin Quotes";src:local("Georgia Bold"),local("Georgia-Bold"),local("Noto Serif Bold"),local("NotoSerif-Bold"),local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT"),local("DejaVu Serif Bold"),local("DejaVuSerif-Bold");font-weight:551 900;unicode-range:U+2018-2019,U+201C-201D}
:root{
  --bg:#fdfcfa; --fg:#1c1b19; --muted:#6b675e; --fg-soft:#4f4b43; --rule:#e7e4de; --accent:#1a67c2;
  /* ⚠ §170　判定色（失智量表、資料表的超標值） */
  --ok:#6b9178; --warn:#c06a3c; --alert:#a8433a;
  --ok-line:#bcd3c4; --warn-line:#e2c3ad; --alert-line:#d8aca4;
  /* ⚠ §172　--alert-line 由失智量表的警示框線與年份索引的年度標註框線共用。
     這兩者刻意共用（都是同一支警示紅），跟 --sec-blog／--ok 的情況不同。 */
  /* ⚠ §170　熱度五階（主題標籤與年份索引共用，原本兩處各寫一份） */
  --heat1:#e4ecf6; --heat2:#c4d4eb; --heat3:#a3bce0; --heat4:#81a5d4; --heat5:#5b8ec9;
  --yheat1:#e4ecf6; --yheat2:#cddbee; --yheat3:#b7cae6; --yheat4:#a0b9dd; --yheat5:#89a8d5; --yheat6:#7297cd; --yheat7:#5c86c5;
  /* ⚠ §170　選取色、隔行底色（--sunk 原本從未定義過，只有 fallback 在用） */
  --pick:#dbe7f7; --sunk:#f4f4f2;
  /* ⚠ §171　四個分區的識別色（.tag 的小圓點）。
     ⚠ --sec-blog 的值剛好跟 --ok 一樣，但意義無關，不要合併成同一個變數。 */
  --sec-fb:#4a7ab5; --sec-xr:#e65b48; --sec-bwfs:#8578a8; --sec-blog:#6b9178;
  /* ⚠ §171　年度標註的紅色調（跟 --alert 同一家） */
  --alert-bg:#f3e0dd; --alert-bg-hover:#e9c9c3; --alert-dark:#8d382f;
  /* ⚠ §171　資料表的強調列、影片播放鈕的底色 */
  --row-hl:#edf2f6; --play-face:#f2efe9;
  /* ⚠ §218 */
  --sel-bg:#eeece7; --mark-fg:#124f97;
  --sans:system-ui,-apple-system,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --serif:"Latin Quotes","Noto Serif TC","Source Han Serif TC",Georgia,"Songti TC","PMingLiU",serif;
  --measure:720px;
  /* ⚠ §188　大事記的年份大數字（比 --rule 深、比 --muted 淡） */
  --ms-year:#cfc9be;
  /* ⚠ §176 §210　頁首導覽與頁尾共用這一級字 */
  --nav-fs:.86rem;
}
*{box-sizing:border-box}
html{
  font-size:106.25%;
  -webkit-text-size-adjust:100%; color-scheme:light;
  scrollbar-gutter:stable;
}
@supports not (scrollbar-gutter:stable){ html{overflow-y:scroll} }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--serif); font-size:1rem; font-weight:500; line-height:1.95;
  letter-spacing:.01em; font-feature-settings:"palt" 1; text-autospace:normal;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.25rem}
.wrap{   /* ⚠ §113 */
  padding-left:max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right:max(1.25rem, env(safe-area-inset-right, 0px));
}
/* ⚠ §6 */
[hidden]{display:none !important}
a{
  color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
/* ⚠ §7 */
.post-link:active{color:var(--accent)}
.site-head nav a:active, .site-foot a:active, .prose a:active{opacity:.6}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:.5px}
.prose{overflow-wrap:break-word}
.prose a{overflow-wrap:anywhere}
.skip{position:absolute; left:-9999px}
.site-head nav, .post-list > li > time, .tag, .post-head .meta, .prose figcaption,
.post-nav span, .archive time, .site-foot, .prose th{
  font-family:var(--sans);
}
.skip:focus{left:1rem; top:1rem; background:var(--bg); padding:.5rem; z-index:9}
/* ⚠ §170　鍵盤焦點框的通則。用 :where() 是為了不提高優先權，個別元件仍可覆寫。 */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* 頁首 */
.site-head{   /* ⚠ §113 */
  position:sticky; top:0; z-index:50;
  padding:.72rem 0;
  padding-top:calc(.72rem + env(safe-area-inset-top, 0px));
  background:rgba(253,252,250,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .22s ease;
}
.scrolled .site-head{border-bottom-color:var(--rule)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head{background:var(--bg)}
}
/* ⚠ §111 */
.site-head .wrap{display:flex; flex-wrap:nowrap; align-items:center;
  gap:.75rem 1.25rem}
.brand{flex:0 0 auto; white-space:nowrap}
.site-head nav{
  flex-wrap:nowrap; min-width:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  /* ⚠ §112 */
  padding-right:1.2rem; margin-right:-1.2rem;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 1.2rem), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 1.2rem), transparent);
}
.site-head nav::-webkit-scrollbar{display:none}
.site-head nav a, .site-head nav .nav-about{white-space:nowrap}
.site-head nav .nav-short{display:none}   /* ⚠ §210 */
/* ⚠ §8 */
.brand{font-family:var(--serif); font-size:1.34rem; line-height:1.3; font-weight:600; letter-spacing:.04em; margin-right:auto; font-feature-settings:"palt" 0}
.site-head nav{display:flex; gap:1rem; font-size:var(--nav-fs); color:var(--muted)}
.site-head nav a:hover{color:var(--accent)}

/* 搜尋：導覽列圖示 */
.search-open{   /* ⚠ §108 */
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:1.9rem; height:1.9rem; padding:0; margin-left:-.35rem;
  background:none; border:0; cursor:pointer; color:var(--muted);
  align-self:center;
}
.search-open svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.search-open:hover{color:var(--accent)}

/* ⚠ §108　窄螢幕的頁首 */
@media (max-width:560px){
  .site-head .wrap{gap:.6rem}
  .brand{font-size:1.2rem}
  .site-head nav{gap:.72rem}
  .search-open{margin-left:0}
}
@media (max-width:380px){
  .site-head nav{gap:.62rem}
}

/* 搜尋：浮層 */
.search-panel{
  position:fixed; inset:0; z-index:200; background:rgba(28,27,25,.32);
  display:flex; justify-content:center; padding:8vh 1.25rem 2rem;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
/* ⚠ §6 */
.search-panel[hidden]{display:none !important}
.search-box{
  width:100%; max-width:560px; max-height:80vh; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 18px 50px rgba(28,27,25,.18); overflow:hidden;
}
.search-field{display:flex; align-items:center; border-bottom:1px solid var(--rule)}
.search-field input{
  flex:1; font:inherit; font-family:var(--serif); font-size:1.05rem;
  padding:.95rem 1.1rem; border:0; background:none; color:var(--fg); outline:none;
}
.search-field input::-webkit-search-cancel-button{display:none}
.search-close{
  background:none; border:0; cursor:pointer; color:var(--muted);
  font-size:.95rem; padding:.6rem 1rem; line-height:1;
}
.search-close:hover{color:var(--accent)}
/* ⚠ §109　搜尋浮層的資訊列 */
.search-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  padding:.55rem 1.1rem; border-bottom:1px solid var(--rule);
}
.search-hint{
  margin:0; padding:0; min-width:0; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.05em; color:var(--muted);
}
.search-alltopics{
  flex:0 0 auto; font-family:var(--sans); font-size:.72rem; letter-spacing:.05em;
  color:var(--accent); text-decoration:none; white-space:nowrap;
}
.search-alltopics:hover{text-decoration:underline}
.search-tips{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  padding:.6rem 1.1rem; border-bottom:1px solid var(--rule);
}
.search-tips[hidden]{display:none}
.search-tips-lab{font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; color:var(--muted)}
.search-tip{
  font:inherit; font-family:var(--sans); font-size:.78rem; line-height:1.6;
  padding:.1rem .7rem; border:1px solid var(--rule); border-radius:999px;
  background:none; color:var(--fg-soft); cursor:pointer;
}
.search-tip:hover{border-color:var(--accent); color:var(--accent)}
.topic-group{border-top:1px solid var(--rule); padding-top:1rem; margin-top:2rem}
.topic-group h2{font-family:var(--serif); font-size:1.15rem; font-weight:600;
  margin:0; letter-spacing:.05em; line-height:1.6}
.topic-desc{margin:.1rem 0 .8rem; font-size:.82rem; color:var(--muted)}
.topic-terms{display:flex; flex-wrap:wrap; gap:.5rem}
.topic-term{display:inline-flex; align-items:baseline; gap:.35rem;
  font:inherit; font-family:var(--sans); font-size:.88rem; line-height:1.7;
  padding:.15rem .8rem; border:1px solid var(--rule); border-radius:999px;
  background:none; color:var(--fg-soft); cursor:pointer; text-decoration:none}
.topic-term span{font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
/* ⚠ §176　hover 只給有滑鼠的裝置：手機沒有滑鼠，:hover 會黏在剛點過的那一個上。 */
@media (hover:hover){
  .topic-term:hover{border-color:var(--accent); color:var(--accent)}
  .topic-term:hover span{color:var(--accent)}
}
.topic-term.is-zone{border-style:dashed}
/* ⚠ §133 */
.topic-term[data-heat]{color:var(--fg); border-color:transparent}
.topic-term[data-heat] span{color:var(--fg)}
.topic-term[data-heat="1"]{background:var(--heat1)}
.topic-term[data-heat="2"]{background:var(--heat2)}
.topic-term[data-heat="3"]{background:var(--heat3)}
.topic-term[data-heat="4"]{background:var(--heat4)}
.topic-term[data-heat="5"]{background:var(--heat5)}
@media (hover:hover){   /* ⚠ §176 */
  .topic-term[data-heat]:hover,.topic-term[data-heat]:hover span{color:var(--fg)}
  .topic-term[data-heat]:hover{border-color:var(--fg)}
}
.topic-group:last-of-type{padding-bottom:2.4rem}   /* ⚠ §108 */
.search-body{flex:1; min-height:0; overflow-y:auto}
.search-results{list-style:none; margin:0; padding:0}
.search-fullread,
.search-more{
  display:block; width:calc(100% - 2.2rem); margin:.6rem 1.1rem; padding:.6rem .9rem;
  font:inherit; font-family:var(--sans); font-size:.8rem; letter-spacing:.03em;
  background:none; border:1px solid var(--rule); border-radius:4px; color:var(--fg);
  cursor:pointer; text-align:center; flex:none;
}
.search-fullread:hover:not(:disabled),
.search-more:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.search-fullread:disabled,
.search-more:disabled{cursor:default; color:var(--muted)}
.search-fullread[hidden],
.search-more[hidden]{display:none}
.search-more{margin:1.1rem 1.1rem 1.6rem}
/* 全部展開閱讀 */
.search-full-item{border-top:1px solid var(--rule); padding:0 1.1rem}
.search-full-item .post-head{padding:1.5rem 0 1rem}
.search-full-item .prose{padding-bottom:1.5rem}
.full-error{padding:1rem 0; color:var(--muted); font-size:.85rem}
.search-results li{border-bottom:1px solid var(--rule)}
.search-results li:last-child{border-bottom:0}
.search-results a{display:block; padding:.85rem 1.1rem}
.search-results a:hover, .search-results a.is-active{background:var(--sel-bg)}
.r-meta{display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.08em; color:var(--muted)}
.r-title{display:block; font-family:var(--serif); font-size:1rem; font-weight:600; margin:.15rem 0 .25rem}
.r-snip{display:block; font-size:.84rem; line-height:1.75; color:var(--muted)}
/* ⚠ §215 */
.search-results a.r-also{padding:0 1.1rem .8rem; margin-top:-.45rem; font-family:var(--sans); font-size:.76rem; letter-spacing:.04em; color:var(--accent)}
.search-results mark{background:rgba(26,103,194,.14); color:var(--mark-fg); padding:0 .1em; border-radius:2px}

@media (max-width:480px){
  .search-panel{padding:0}
  .search-box{max-width:none; max-height:100vh; height:100%; border:0; border-radius:0}
}

/* 文章列表 */
.post-list{list-style:none; margin:0; padding:0}
/* ⚠ §9 §185 */
.post-list > li{padding:2.25rem 0; border-bottom:1px solid var(--rule); position:relative; overflow-anchor:none}
.post-list > li:last-child{border-bottom:0}
.post-list > li > time{display:block; font-size:.78rem; letter-spacing:.08em; color:var(--muted)}
.post-list > li > h2{font-family:var(--serif); font-size:1.32rem; line-height:1.6; font-weight:600; margin:.4rem 0 .5rem}
.post-list .excerpt{
  margin:0; color:var(--fg-soft); font-size:1.02rem; line-height:1.9;
}
.post-list .excerpt .post-expand.inline,
.post-list .post-expand.tail{
  display:inline; font-family:var(--serif); font-size:1.02rem; line-height:inherit;
  letter-spacing:inherit; color:var(--accent); padding:0; margin-left:.15em;
}
.post-list .excerpt .post-expand.inline:hover,
.post-list .post-expand.tail:hover{
  text-decoration:underline; text-underline-offset:.2em;
}
.post-list > li:not(.is-open) .post-actions .post-expand{display:none}
.post-link:hover{color:var(--accent)}
.post-list .thumb{display:block; width:100%; height:auto; aspect-ratio:var(--ar);
  margin:1rem 0 1.1rem; background:var(--rule)}
@media (min-width:620px){
  .post-list .thumb{margin-left:auto; margin-right:auto; object-fit:cover}
  /* ⚠ §164 */
  .post-list .thumb.landscape{width:86%}
  .post-list .thumb.portrait{width:52%; aspect-ratio:3/4}
}
.post-list .thumb-video{margin:1rem 0 1.1rem}
.post-list > li > iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:6px;
  margin:1rem 0 1.1rem; display:block}
@media (min-width:620px){
  .post-list .thumb-video,
  .post-list > li > iframe{width:86%; margin-left:auto; margin-right:auto}
}
.tag{display:inline-block; margin-top:.75rem; font-size:.72rem; letter-spacing:.1em; color:var(--muted); border:1px solid var(--rule); border-radius:999px; padding:.1rem .6rem}

/* 文章頁 */
.post-head{padding:2rem 0}   /* ⚠ §125 */
.post-head .meta{
  margin:0 0 .75rem; font-size:.78rem; letter-spacing:.08em; color:var(--muted);
  display:flex; align-items:center; gap:.9rem;
}
.post-head .meta-right{margin-left:auto; display:inline-flex; align-items:center; gap:.9rem}
.post-head .meta .tag{margin-top:0}
.post-head .meta a:hover{color:var(--accent)}
.post-head h1{font-family:var(--serif); font-size:1.85rem; line-height:1.55; font-weight:600; margin:0}
.prose{padding-bottom:1.5rem}
.prose h2{font-family:var(--serif); font-size:1.3rem; font-weight:600; line-height:1.6; margin:3rem 0 1rem; padding-top:.5rem; border-top:1px solid var(--rule)}
.prose h3{font-size:1.05rem; font-weight:600; margin:2.25rem 0 .75rem}
.prose p{margin:1.35em 0}
/* ⚠ §200 */
@media (min-width:620px){.prose p,.prose li{text-align:justify}}
.prose p.has-bare,.prose li.has-bare{text-align:left}
.prose img{max-width:100%; height:auto; display:block; margin:2.25rem auto}
.prose figure{margin:2.5rem 0}
@media (min-width:620px){
  .prose figure{width:86%; margin-left:auto; margin-right:auto}
  /* ⚠ §10 */
  .prose figure.portrait{width:58%}
}
.prose figure img{margin:0 auto}
/* 圖說 */
.prose figcaption{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-top:0; padding:.85rem .25rem;
  font-size:.82rem; line-height:1.85; color:var(--muted); text-align:center;
}
.prose .chart-more{
  margin:-2rem 0 2.8rem; text-align:center;
  font-family:var(--sans); font-size:.82rem; line-height:1.7;
}
.prose blockquote{margin:2rem 0; padding:.25rem 0 .25rem 1.25rem; border-left:2px solid var(--rule); color:var(--muted)}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li{margin:.5em 0}
.prose hr{border:0; border-top:1px solid var(--rule); margin:3rem 0}
.prose table{width:fit-content; max-width:100%; border-collapse:collapse; font-size:.9rem; margin:2rem auto; display:block; overflow-x:auto}   /* ⚠ §11 §214 */
.prose th,.prose td{border-bottom:1px solid var(--rule); padding:.6rem .5rem; text-align:left}
.prose th{font-weight:600}   /* ⚠ §169 */
.prose table.tight{font-size:.84rem}
.prose table.tight th,.prose table.tight td{padding:.3rem .5rem; line-height:1.55}
.prose table.tight thead th{position:sticky; top:0; background:var(--bg); z-index:1}
@media (max-width:560px){   /* ⚠ §196 */
  .prose table{font-size:.82rem}
  .prose th,.prose td{padding:.5rem .4rem; word-break:keep-all}
}
/* ⚠ §11 */
.prose .table-scroll{overflow-x:auto; margin:2rem 0}
.prose .table-scroll table{display:table; width:100%; margin:0}
/* ⚠ §12 */
.prose .table-title{margin:2rem 0 .8rem; text-align:center;
  font-family:var(--serif); font-size:1rem; font-weight:500; line-height:1.95; color:var(--fg)}
.prose .table-title + .table-scroll{margin-top:0}
.prose table.data thead th{color:var(--muted); font-weight:500; font-size:.86em; white-space:nowrap}
.prose table.data thead th:not(:first-child){text-align:right}
/* ⚠ §13 */
.prose table.data thead th.ref{text-align:left}
.prose table.data th[scope=row]{font-weight:500; text-align:left; white-space:nowrap}
.prose table.data th.sub{padding-left:1.9rem; color:var(--fg-soft)}
.prose table.data tr.lv0 th, .prose table.data tr.lv0 td{padding-top:1.7rem}
.prose table.data tbody tr:first-child.lv0 th,
.prose table.data tbody tr:first-child.lv0 td{padding-top:.6rem}
/* ⚠ §14 */
.prose table.wrap th[scope=row]{white-space:normal}
.prose table.data td{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.prose table.data td.ref{color:var(--muted); font-size:.9em; text-align:left}
.prose table.data td.over{color:var(--alert); font-weight:600}
.prose table.data tr.grp th{padding:1.6rem .5rem .35rem; border-bottom:0;
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em;
  color:var(--muted); text-align:left}
.prose table.data tbody tr:first-child.grp th{padding-top:.35rem}
/* ⚠ §15 */
.prose table.data tbody th, .prose table.data tbody td{border-bottom:0}
.prose table.data tbody tr:nth-child(odd) th,
.prose table.data tbody tr:nth-child(odd) td{background:var(--sunk)}

/* ⚠ §16 */
.prose table.data th:first-child{position:sticky; left:0; z-index:2; background:var(--bg);
  box-shadow:8px 0 8px -8px rgba(28,27,25,.14)}
.prose table.data tbody tr:nth-child(odd) th:first-child{background:var(--sunk)}
.prose table.data thead th:first-child{z-index:3}

/* ⚠ §17 */
.prose table.data tbody tr.grp th,
.prose table.data tbody tr.grp th:first-child{
  background:none; position:static; box-shadow:none}

.prose table.feed{font-size:.82rem}
.prose table.feed th, .prose table.feed td{padding:.5rem .55rem}
.prose table.feed thead th{white-space:nowrap}
.prose table.feed thead tr:first-child th{border-bottom:0; font-weight:600; color:var(--fg)}
.prose table.feed thead tr.sub th{padding-top:0; font-size:.92em; font-weight:400}
.prose table.data .hl{background:rgba(26,103,194,.07)}
.prose table.feed tbody tr th.hl,
.prose table.feed tbody tr td.hl{background:rgba(26,103,194,.09)}
.prose .table-note .hl-legend{background:rgba(26,103,194,.14); padding:.1em .4em; border-radius:3px}
.prose .table-note{margin:-.6rem 0 2rem; font-family:var(--sans); font-size:.82rem;
  line-height:1.9; color:var(--muted); text-align:center}
.prose code{font-size:.88em; background:var(--rule); padding:.1em .35em; border-radius:3px}
.prose pre{overflow-x:auto; padding:1rem; background:var(--rule); border-radius:4px}
.prose pre code{background:none; padding:0}

/* 上下篇 */
.post-nav{display:flex; gap:1.5rem; flex-wrap:wrap; border-top:1px solid var(--rule); padding:2rem 0 3rem; font-size:.9rem}
.post-nav a{flex:1 1 12rem; line-height:1.6}
@media (min-width:620px){
  .post-nav{flex-wrap:nowrap}
  .post-nav a{flex:0 1 46%}
  .post-nav .next{margin-left:auto; text-align:right}
}
.post-nav span{display:block; font-size:.75rem; letter-spacing:.1em; color:var(--muted); margin-bottom:.3rem}
.post-nav a:hover{color:var(--accent)}

/* 彙整 */
.archive{list-style:none; padding:0; margin:2rem 0 1rem}
.archive li{display:flex; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--rule); font-size:.95rem}
.archive li:last-child{border-bottom:0}
.archive time{color:var(--muted); font-size:.8rem; letter-spacing:.05em; flex:0 0 6rem; padding-top:.2rem}
.archive a:hover{color:var(--accent)}

/* 頁尾 */
.site-foot{border-top:1px solid var(--rule); padding:1.1rem 0 1.5rem;
  font-size:var(--nav-fs); color:var(--muted)}   /* ⚠ §176　跟頁首同一級 */
.site-foot p{margin:.4em 0}
/* ⚠ §169 */
.foot-nav{display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; margin:0 0 .5rem}
.foot-nav a{color:var(--muted)}
.site-foot .foot-copy{letter-spacing:.02em}
.site-foot a:hover{color:var(--accent)}

/* 字級：手機 20 ／ 平板 22 ／ 桌機 17px */
@media (max-width:1024px){
  html{font-size:137.5%}
}
@media (hover:none) and (pointer:coarse){
  html{font-size:137.5%}
}

@media (max-width:620px){
  html{font-size:125%}
  .post-head h1{font-size:1.6rem}
  .site-head{padding:.72rem 0 .5rem}   /* ⚠ §108 §114 */
  .site-head{padding-top:calc(.72rem + env(safe-area-inset-top, 0px))}
  .site-head .wrap{gap:.15rem .7rem; padding-left:1rem; padding-right:1rem}
  .brand{font-size:.98rem; letter-spacing:0}
  :root{--nav-fs:.72rem}   /* ⚠ §176 §205 §210 */
  .site-head nav{gap:.55rem}
  .site-head nav a[href="/milestones/"]{display:none}   /* ⚠ §205 */
  /* ⚠ §115 */
  .site-head nav{padding-right:0; margin-right:0;
    -webkit-mask-image:none; mask-image:none}
  .search-open{
    width:2.2rem; height:2.2rem;
    margin:-.475rem -.475rem -.475rem -.625rem;
  }
  .site-foot{padding:.9rem 0 .8rem}   /* ⚠ §116 */
}
@media (hover:none) and (pointer:coarse) and (max-height:620px){
  html{font-size:125%}
}

@media (max-width:430px){
  .brand{font-size:.98rem; letter-spacing:0}
  .site-head nav{gap:.45rem}
  .wrap{padding:0 1rem}
  .site-head .wrap{gap:.4rem .6rem}
}

/* ───────── 以下是本站比基礎版多出來的版面 ───────── */

/* 首頁與分區頁的引言 */
.home-lead{
  font-family:var(--sans); font-size:.86rem; line-height:1.9; color:var(--muted);
  margin:1.75rem 0 2.5rem;
}
.home-lead kbd{
  font-family:var(--sans); font-size:.8em; border:1px solid var(--rule); border-radius:4px;
  padding:.05em .4em; background:#fff; color:var(--fg-soft);
}

/* 分頁　⚠ §3 */
.pager{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.3rem; margin:2.5rem 0 1rem; font-family:var(--sans); font-size:.85rem;
}
.pager .is-off{visibility:hidden}
.pg-nums{display:flex; align-items:center; gap:.3rem}
.pg-num,.pg-arrow,.pg-edge{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  min-width:2.75rem; height:2.75rem; padding:0 .45rem;
  border-radius:4px; text-decoration:none;   /* ⚠ §170 */
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.pg-num,.pg-arrow{color:var(--accent)}
@media (hover:hover){   /* ⚠ §176 */
  .pg-num:hover,.pg-arrow:hover{background:rgba(26,103,194,.09)}
}
/* ⚠ §20 */
.pg-num.is-cur{
  background:none; color:var(--fg); font-weight:600; cursor:default;
  border:1px solid var(--accent); box-sizing:border-box;
}
.pg-edge{color:var(--muted); font-size:1.05rem}
.pg-edge:hover{color:var(--accent)}
.pg-word{display:none}
.pg-num{display:none}
.pg-num.lv1{display:inline-flex}
.pg-edge{display:none}
.pg-goto{
  margin-left:.5rem; border:0; background:none; padding:.4rem .2rem;
  color:var(--muted); font:inherit; font-variant-numeric:tabular-nums;
  letter-spacing:.05em; cursor:pointer;
}
.pg-goto:hover{color:var(--accent); text-decoration:underline}
.pg-jump{
  flex-basis:100%; display:flex; justify-content:center; align-items:center;
  gap:.4rem; margin-top:.6rem; color:var(--muted);
}
.pg-jump input{
  width:5rem; padding:.35rem .5rem; font:inherit; text-align:center;
  border:1px solid var(--rule); border-radius:6px; background:var(--bg); color:var(--fg);
}
.pg-jump button{
  padding:.4rem .8rem; font:inherit; color:#fff; background:var(--accent);
  border:0; border-radius:6px; cursor:pointer;
}
@media (min-width:600px){
  .pg-num.lv2,.pg-edge{display:inline-flex}
  .pg-word{display:inline}
  .pg-num,.pg-arrow,.pg-edge{min-width:2.3rem; height:2.3rem}
}
@media (min-width:900px){
  .pg-num.lv3{display:inline-flex}
}

/* 年份索引 */
.year-list{
  list-style:none; padding:0; margin:2rem 0 3rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(7.5rem, 1fr)); gap:.75rem;
}
.year-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:.7rem .9rem; border:1px solid var(--rule); border-radius:6px; color:var(--fg);
}
.year-list a:hover{border-color:var(--accent); color:var(--accent)}
.year-list .y{font-family:var(--serif); font-size:1.05rem; font-weight:600}
.year-list .n{font-family:var(--sans); font-size:.72rem; color:var(--muted)}
.archive .tag{margin-top:0; align-self:center; flex:0 0 auto}
@media (max-width:560px){
  .archive li{flex-wrap:wrap; gap:.3rem .7rem; padding:.85rem 0}
  .archive time{flex:0 0 auto; padding-top:0; order:1}
  .archive .tag{order:2; margin-left:auto; align-self:auto}
  .archive a{order:3; flex:0 0 100%; line-height:1.7}
}

/* YouTube　⚠ §4 */
/* ⚠ §19 */
.prose figure.video{margin:2rem auto}
.video-play{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  width:100%; aspect-ratio:16/9; border:1px solid var(--rule); border-radius:6px;
  background:var(--play-face); color:var(--fg-soft); cursor:pointer; font-family:var(--sans); font-size:.82rem;
}
.video-play:hover{border-color:var(--accent); color:var(--accent)}
.video-play.has-poster{position:relative; overflow:hidden; border-color:transparent; padding:0}
.video-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.video-play.has-poster .video-play-icon,
.video-play.has-poster .video-play-text{position:relative; z-index:1; color:#fff}
.video-play.has-poster .video-play-icon{
  border-width:.85rem 0 .85rem 1.4rem;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.55));
}
.video-play.has-poster .video-play-text{text-shadow:0 1px 6px rgba(0,0,0,.65)}
.video-play.has-poster::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.22) 100%);
}
.video-play.has-poster:hover::after{background:radial-gradient(ellipse at center, rgba(0,0,0,.20) 0%, rgba(0,0,0,.04) 60%, rgba(0,0,0,.16) 100%)}
.video-play-icon{
  width:0; height:0; border-style:solid; border-width:.7rem 0 .7rem 1.15rem;
  border-color:transparent transparent transparent currentColor; margin-left:.2rem;
}
.prose figure.video iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:6px}

/* 列表頁的「查看更多」 */
.post-actions{display:flex; align-items:center; gap:.9rem; margin:.75rem 0 0}
.post-actions .tag{margin-top:0}
.post-actions .post-share{margin-left:auto}
.post-expand{
  font:inherit; font-family:var(--sans); font-size:.78rem; letter-spacing:.05em; color:var(--accent);
  background:none; border:0; padding:.15rem 0; cursor:pointer;
}
.post-expand:hover{text-decoration:underline; text-underline-offset:.25em}
.post-list > li.is-open > .excerpt{display:none}
.post-full{margin-top:.5rem; color:var(--fg-soft); font-size:1.02rem; line-height:1.9}
.post-full p{margin:0 0 1.2rem}
.post-full > :first-child{margin-top:0}
/* ⚠ §19 */
.post-full figure{margin:1.4rem auto}
.post-full img{max-width:100%; height:auto; display:block; margin:1.4rem auto}

/* 分區頁的年份時間軸 */
.sec-title{padding:1.5rem 0 .25rem}
.sec-title h1{
  margin:0; font-family:var(--serif); font-size:1.55rem; font-weight:600; line-height:1.5;
  letter-spacing:.02em;
}
.sec-title p{
  margin:.4rem 0 0; font-family:var(--sans); font-size:.8rem; color:var(--muted); line-height:1.8;
}

.timeline-wrap{display:flex; align-items:flex-start; gap:.7rem; margin:1.1rem 0 2.75rem}
/* ⚠ §21 */
.timeline{
  flex:1 1 auto; display:flex; align-items:baseline; justify-content:space-between;
  gap:.4rem; overflow-x:auto; scrollbar-width:none;
  padding:0 .1rem 1.1rem;
  background-image:linear-gradient(var(--rule), var(--rule));
  background-repeat:no-repeat; background-size:100% 1px;
  background-position:0 calc(100% - .55rem);
}
.timeline::-webkit-scrollbar{display:none}
.timeline a{
  position:relative; flex:0 0 auto; white-space:nowrap;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.02em; color:var(--muted);
}
.timeline a::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(-.55rem - 1.5px); width:3px; height:3px; border-radius:50%; background:var(--rule);
}
@media (hover:hover){   /* ⚠ §176 */
  .timeline a:hover{color:var(--accent)}
  .timeline a:hover::after{background:var(--accent)}
}
.timeline a.is-cur{color:var(--fg); font-weight:600}
.timeline a.is-cur::after{
  width:9px; height:9px; bottom:calc(-.55rem - 4.5px); background:var(--bg);
  border:1.5px solid var(--accent); box-sizing:border-box;
}
.timeline.is-drag{cursor:grabbing; user-select:none}
.timeline.can-drag{cursor:grab}
.timeline.can-drag{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 1.15rem, #000 calc(100% - 1.15rem), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 1.15rem, #000 calc(100% - 1.15rem), transparent 100%);
}
.timeline.can-drag.at-start{
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 1.15rem), transparent 100%);
          mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 1.15rem), transparent 100%);
}
.timeline.can-drag.at-end{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 1.15rem, #000 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 1.15rem, #000 100%);
}
.timeline.can-drag.at-start.at-end{-webkit-mask-image:none; mask-image:none}

/* ⚠ §23 */
@media (max-width:1179.98px){
  .timeline-wrap{
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    margin:0; padding:.55rem 0 0;
    padding-bottom:.35rem;
    padding-bottom:calc(.35rem + env(safe-area-inset-bottom, 0px));
    background:rgba(253,252,250,.94);
    border-top:1px solid var(--rule);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:opacity .2s ease, transform .2s ease;
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .timeline-wrap{background:var(--bg)}
  }
  .timeline{padding-left:1.25rem; padding-right:1.25rem}
  /* ⚠ §22 */
  .timeline:not(.can-drag){justify-content:safe center; gap:1.4rem}
  .nav-away .timeline-wrap{
    opacity:0; transform:translateY(100%); pointer-events:none;
  }
  /* ⚠ §23 */
  body.has-rail{padding-bottom:3.8rem}
  body.has-rail{padding-bottom:calc(3.8rem + env(safe-area-inset-bottom, 0px))}
  @media (prefers-reduced-motion:reduce){
    .timeline-wrap{transition:none}
  }
}

/* 寬螢幕：右緣的直式拇指索引 */
@media (min-width:1180px){
  .timeline-wrap{
    display:block; position:fixed; right:0; top:4.2rem;
    margin:0; gap:0; z-index:40; max-height:calc(100vh - 5.5rem);
  }
  .timeline{
    display:block; overflow-y:auto; overflow-x:visible; max-height:calc(100vh - 5.5rem);
    padding:0; background-image:none;
  }
  /* ⚠ §24 */
  .timeline a{
    display:block; text-align:center; padding:.14rem .65rem;
    font-size:.7rem; line-height:1.35;
    margin:0 0 1px; border-radius:6px 0 0 6px;
    background:var(--bg); border:1px solid var(--rule); border-right:0;
  }
  /* ⚠ §24 */
  .timeline.is-scroll{
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 1.2rem,
                                       #000 calc(100% - 1.2rem), transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 1.2rem,
                               #000 calc(100% - 1.2rem), transparent);
  }
  /* ⚠ §25 */
  /* ⚠ §207 */
  .timeline a[data-heat]{color:var(--fg)}
  .timeline a[data-heat="1"]{background:var(--yheat1)}
  .timeline a[data-heat="2"]{background:var(--yheat2)}
  .timeline a[data-heat="3"]{background:var(--yheat3)}
  .timeline a[data-heat="4"]{background:var(--yheat4)}
  .timeline a[data-heat="5"]{background:var(--yheat5)}
  .timeline a[data-heat="6"]{background:var(--yheat6)}
  .timeline a[data-heat="7"]{background:var(--yheat7)}
  .timeline a::after{content:none}
  .timeline a.is-cur{
    background:var(--accent); color:#fff; padding-right:1.05rem;
  }
  @media (hover:hover){ .timeline a:hover:not(.is-cur){background:var(--rule)} }   /* ⚠ §176 */
}

/* 搜尋的全部展開閱讀 */
.read-mode{padding-top:2rem}
.read-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--rule); padding:.2rem 0 .7rem}
.read-title{margin:0; font-weight:600}
.read-exit{flex:none; font:inherit; font-family:var(--sans); font-size:.8rem; letter-spacing:.03em;
  background:none; border:1px solid var(--rule); border-radius:4px; color:var(--fg);
  padding:.4rem .8rem; cursor:pointer}
.read-exit:hover{border-color:var(--accent); color:var(--accent)}
.read-status{margin:.9rem 0 0; color:var(--muted); font-family:var(--sans); font-size:.82rem}
.year-read-wrap{margin:0 0 1.2rem; text-align:right}
.archive + .year-read-wrap{margin:.6rem 0 3.5rem}
.year-read{font:inherit; font-family:var(--sans); font-size:.8rem; letter-spacing:.03em;
  background:none; border:1px solid var(--rule); border-radius:4px; color:var(--fg);
  padding:.4rem .8rem; cursor:pointer}
.year-read:hover{border-color:var(--accent); color:var(--accent)}
.read-body .search-full-item{padding:0}
.read-body .search-full-item:first-child{border-top:0}
.read-body .search-full-item + .search-full-item{margin-top:2rem}
/* ⚠ §27 */
.read-pager{margin:3rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--rule)}
.read-pager button{font:inherit; background:none; border:0; cursor:pointer}
.read-pager button:disabled{cursor:default}
.read-pager .read-pageno{
  margin-left:.5rem; padding:.4rem .2rem; color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.05em;
}

/* 首頁的分區索引 */
/* ⚠ §28 */
.home-secs{list-style:none; margin:1.4rem 0 2.2rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:.9rem 1.6rem}
.home-secs li{border-top:1px solid var(--rule); padding-top:.7rem; line-height:1.7}
.home-secs a{font-weight:600; text-decoration:none}
.home-secs a:hover{text-decoration:underline}
.home-secs span{color:var(--fg-soft); font-size:.86rem; margin-left:.6rem}
.home-secs em{display:block; font-style:normal; color:var(--fg-soft); font-size:.9rem}

/* ⚠ §110　手機首頁的分區清單與留白 */
@media (max-width:560px){
  main{padding:.6rem 0 1.6rem}
  .home-secs{margin:.7rem 0 1.1rem; gap:.55rem 1.6rem}
  .home-secs li{
    padding-top:.5rem; line-height:1.6;
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .5rem;
  }
  .home-secs a{flex:1 0 100%}
  .home-secs em{order:2; display:inline; font-size:.86rem}
  .home-secs span{order:3; margin-left:0}
  .post-list > li{padding:1.4rem 0}
}

/* ⚠ §23 */
.post-list > li,
.post-list > li > h2[id]{scroll-margin-top:calc(var(--head-h, 3.5rem) + 1.2rem)}
@media (min-width:1180px){
  .post-list > li,
  .post-list > li > h2[id]{scroll-margin-top:1.5rem}
}

/* 裸網址、年份分隔、照片、分區色、分享鈕 */

.prose a.bare{
  display:inline-block; max-width:100%; vertical-align:bottom;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.prose figure img, .thumb, .video-poster{border-radius:3px}
.prose figcaption{
  text-align:center; margin-top:.55rem; font-size:.82rem;
  color:var(--muted); line-height:1.75;
}

/* 分區識別色 */
.tag::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:.45em; vertical-align:.06em; background:var(--muted);
}
.tag[data-sec="fb"]::before{background:var(--sec-fb)}
.tag[data-sec="xr"]::before{background:var(--sec-xr)}
.tag[data-sec="bwfs"]::before{background:var(--sec-bwfs)}
.tag[data-sec="blog"]::before{background:var(--sec-blog)}

/* ⚠ §29 */
.prose figure.embed{margin:2rem auto; text-align:center}
.prose figure.embed a{font-family:var(--sans); font-size:.85rem; line-height:1.7}

/* 分享鈕 */
.post-share{
  font:inherit; font-family:var(--sans); font-size:.78rem; letter-spacing:.03em;
  background:none; border:0; color:var(--muted); cursor:pointer;
  padding:.2rem .1rem;
}
.post-share:hover{color:var(--accent)}
.post-share.is-done{color:var(--accent)}

::selection{background:var(--pick)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* 已下架的影片 */
.video-gone{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:0; min-height:8rem; padding:1.4rem;
  font-family:var(--sans); font-size:.85rem; letter-spacing:.03em; color:var(--muted);
  background:var(--rule); border-radius:3px;
}
.video-gone-icon{
  width:1.1rem; height:1.1rem; flex:none; border-radius:2px;
  border:1.5px solid currentColor; opacity:.7;
  background:linear-gradient(to bottom right,
    transparent calc(50% - 1px), currentColor calc(50% - 1px),
    currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

/* 板鼻的介紹（/archive/ 最上面） */
.about{margin:.5rem 0 2.4rem}
.about p{margin:0 0 1rem; color:var(--fg-soft)}
.about p:last-child{margin-bottom:0}
.about a{
  color:var(--accent); text-decoration:underline;
  text-underline-offset:.2em; text-decoration-thickness:.5px;
}
.about a:active{opacity:.6}
@media (max-width:400px){
  .site-head .wrap{gap:.4rem .5rem; padding-left:.8rem; padding-right:.8rem}
  .brand{font-size:.9rem}
  .site-head nav{gap:.45rem}
}
@media (max-width:374px){   /* ⚠ §210 */
  .site-head nav .nav-full{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .site-head nav .nav-short{display:inline}
  .site-head nav{gap:0}
  .site-head nav a{padding:0 .25rem}
}

/* 臉書貼文結尾的出處 */
.post-source{
  margin:2rem 0 0; padding-top:.7rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:.78rem; line-height:1.8; color:var(--muted);
}
.post-source .src-link{display:block; margin-top:.15rem}
.post-source a{color:var(--muted); text-decoration:underline;
  text-underline-offset:.25em; text-decoration-thickness:.5px}
.post-source a:hover{color:var(--accent)}


/* ⚠ §26 */
.timeline a[data-mark]{color:var(--alert); font-weight:600}
.timeline a[data-mark]::after{background:var(--alert)}
@media (hover:hover){ .timeline a[data-mark]:hover:not(.is-cur){color:var(--alert-dark)} }   /* ⚠ §176 */
/* ⚠ §26 */
@media (min-width:1180px){
  .timeline a[data-mark]{background:var(--alert-bg); border-color:var(--alert-line); color:var(--alert)}
  .timeline a[data-mark].is-cur{background:var(--alert); border-color:var(--alert); color:#fff}
  @media (hover:hover){ .timeline a[data-mark]:hover:not(.is-cur){background:var(--alert-bg-hover)} }   /* ⚠ §176 */
}

/* 專輯頁 /awuwu2018 的曲目清單 */
.album{list-style:none;padding:0;margin:1.8rem 0 2.2rem}
.album li{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule);
}
.album li:first-child{border-top:1px solid var(--rule)}
.album .tk{font-family:var(--sans);font-size:.92rem;min-width:8.5rem}
.album audio{height:34px;flex:1 1 15rem;min-width:0}
.album a{font-family:var(--sans);font-size:.82rem;color:var(--accent);
  text-decoration:none;white-space:nowrap}
.album a:hover{text-decoration:underline;text-underline-offset:.25em}
@media (max-width:560px){
  .album li{gap:.4rem .7rem}
  .album .tk{flex-basis:100%;min-width:0}
}

/* 失智犬診斷 100 分法則計算機　⚠ §38 */
.dq{margin:2rem 0}
.dq-list{list-style:none; margin:0; padding:0; counter-reset:dq}
.dq-list > li{margin:0 0 2rem; padding:0}
.dq-q{margin:0 0 .5rem; font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--fg)}
.dq-list > li.is-done .dq-q{color:var(--muted); font-weight:500}
.dq label{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.55rem .7rem; border-radius:6px; cursor:pointer;
  font-family:var(--sans); font-size:.86rem; line-height:1.7;
}
.dq label:hover{background:rgba(26,103,194,.06)}
/* ⚠ §1 */
.dq label.is-picked{background:rgba(26,103,194,.1)}
.dq input[type=radio]{margin:.45rem 0 0; flex:none; accent-color:var(--accent)}
.dq-t{flex:1}
.dq-p{flex:none; min-width:2.2em; text-align:right; color:var(--muted);
  font-variant-numeric:tabular-nums}
.dq label.is-picked .dq-p{color:var(--accent); font-weight:600}

/* ⚠ §30 */
.dq-result{
  position:sticky; bottom:0; z-index:5;
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin:2rem 0 0; padding:.9rem 1.1rem;
  background:var(--bg); border:1px solid var(--rule); border-radius:6px;   /* ⚠ §170 */
  box-shadow:0 -6px 18px rgba(28,27,25,.05);
}
.dq-score{margin:0; font-family:var(--sans); font-size:1.6rem; font-weight:600;
  color:var(--fg); font-variant-numeric:tabular-nums; line-height:1}
.dq-unit{font-size:.9rem; font-weight:400; color:var(--muted)}
.dq-verdict{margin:0; font-family:var(--sans); font-size:.88rem; color:var(--muted)}
.dq-result.is-done .dq-verdict{font-weight:600}
.dq-result.is-ok .dq-verdict{color:var(--ok)}
.dq-result.is-warn .dq-verdict{color:var(--warn)}
.dq-result.is-alert .dq-verdict{color:var(--alert)}
.dq-result.is-ok{border-color:var(--ok-line)}
.dq-result.is-warn{border-color:var(--warn-line)}
.dq-result.is-alert{border-color:var(--alert-line)}
.dq-reset{margin:1rem 0 0; text-align:right}
.dq-reset button{font:inherit; font-family:var(--sans); font-size:.8rem; letter-spacing:.03em;
  background:none; border:1px solid var(--rule); border-radius:4px; color:var(--fg);
  padding:.4rem .8rem; cursor:pointer}
.dq-reset button:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:560px){
  .dq label{padding:.5rem .4rem; font-size:.84rem}
  .dq-score{font-size:1.35rem}
}

/* 熱量與餵食量計算機　⚠ §38 */
.calc{margin:1.5rem 0 2rem}
.calc-row{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:0 0 .8rem; font-family:var(--sans); font-size:.88rem;
}
.calc-row label{flex:0 0 6.5em; color:var(--fg)}
.calc-row input, .calc-row select{
  font:inherit; font-family:var(--sans); font-size:.95rem;
  padding:.45rem .6rem; border:1px solid var(--rule); border-radius:4px;   /* ⚠ §170 */
  background:var(--bg); color:var(--fg); font-variant-numeric:tabular-nums;
}
.calc-row input{width:7rem; text-align:right}
.calc-row select{max-width:100%; flex:1 1 14rem}
.calc-u{font-family:var(--sans); font-size:.8rem; color:var(--muted)}

.calc-out{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  margin:1.2rem 0 0; padding:.7rem .9rem;
  background:rgba(26,103,194,.05); border-radius:6px;
}
.calc-out .calc-label{font-family:var(--sans); font-size:.82rem; color:var(--muted); flex:0 0 auto}
.calc-num{
  font-family:var(--sans); font-size:1.35rem; font-weight:600; color:var(--fg);
  font-variant-numeric:tabular-nums; margin-left:auto;
}
.calc-sub{background:none; padding:.2rem 0; margin-top:.4rem}
.calc-sub .calc-num{font-size:1.05rem; color:var(--fg-soft)}
.calc-final{border:1px solid var(--accent); background:rgba(26,103,194,.08)}
.calc-final .calc-num{font-size:1.7rem; color:var(--accent)}
.calc-note{margin:.5rem 0 0; font-family:var(--sans); font-size:.8rem; color:var(--muted)}
.calc-hint{margin:.4rem 0 0; font-family:var(--sans); font-size:.78rem; color:var(--accent)}
.calc-hint[hidden]{display:none}
.calc-more{margin:.2rem 0 1rem; padding:.55rem .85rem; border:1px dashed var(--rule); border-radius:6px; font-family:var(--sans)}
.calc-more summary{cursor:pointer; font-size:.84rem; color:var(--accent)}
.calc-more[open] summary{margin-bottom:.8rem}
.calc-more .calc-note{margin-top:0}
.calc-reset{margin:1.2rem 0 0; text-align:right}
.calc-reset button{font:inherit; font-family:var(--sans); font-size:.8rem; letter-spacing:.03em;
  background:none; border:1px solid var(--rule); border-radius:4px; color:var(--fg);
  padding:.4rem .8rem; cursor:pointer}
.calc-reset button:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:560px){
  .calc-row label{flex:0 0 5.5em}
  .calc-row input{width:5.5rem}
  .calc-num{font-size:1.2rem}
  .calc-final .calc-num{font-size:1.45rem}
}

/* ⚠ §128 §135 §136　文末延伸區 */
.prose .same-day, .prose .post-dogs, .prose .post-fbref, .prose .post-tags{
  margin:2rem 0 0; padding-top:.7rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:.78rem; line-height:1.8; color:var(--muted);
}
.prose .post-source + .same-day,
.prose .post-source + .post-dogs,
.prose .post-source + .post-fbref,
.prose .same-day + .post-fbref,
.prose .same-day + .post-dogs,
.prose .post-fbref + .post-dogs,
.prose .post-source + .post-tags,
.prose .same-day + .post-tags,
.prose .post-fbref + .post-tags,
.prose .post-dogs + .post-tags{margin-top:1.15rem; padding-top:0; border-top:0}
.prose .same-day .lab, .prose .post-dogs .lab, .prose .post-fbref .lab, .prose .post-tags .lab{display:block}
.prose .same-day .links, .prose .post-dogs .links, .prose .post-fbref .links, .prose .post-tags .links{
  display:flex; flex-wrap:wrap; gap:.1rem 1.15rem; margin-top:.15rem;
}
.prose .same-day a, .prose .post-dogs a, .prose .post-fbref a{
  color:var(--muted); text-decoration:underline;
  text-underline-offset:.25em; text-decoration-thickness:.5px;
}
.prose .same-day a:hover, .prose .post-dogs a:hover, .prose .post-fbref a:hover{color:var(--accent)}
.prose .post-tags button{   /* ⚠ §137 */
  font:inherit; color:var(--muted); background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:.5px;
}
.prose .post-tags button:hover{color:var(--accent)}
.prose .post-dogs .n{margin-left:.25em; opacity:.62; text-decoration:none}

/* ⚠ §18 */
.prose table.data tbody tr th.hl,
.prose table.data tbody tr td.hl,
.prose table.data tbody tr th.hl:first-child{background:var(--row-hl)}

/* ⚠ §14 */
.prose table.data.headwrap thead th{white-space:normal}

/* 影片的配樂出處 */
.prose .credit{margin:2.5rem 0 0; font-family:var(--sans); font-size:.78rem;
  line-height:1.9; color:var(--muted)}

/* 分區底下的分頁鈕 */
.sec-tabs{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.3rem 0 1.7rem}
.sec-tabs a, .sec-tabs .is-cur{
  display:inline-block; padding:.3rem .85rem; border:1px solid var(--rule); border-radius:999px;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.02em; line-height:1.7;
  color:var(--fg-soft); text-decoration:none;
}
.sec-tabs a:hover{border-color:var(--accent); color:var(--accent)}
.sec-tabs .is-cur{background:var(--fg); border-color:var(--fg); color:var(--bg); cursor:default}
.sec-tabs .n{margin-left:.4em; font-size:.92em; color:var(--muted)}
.sec-tabs .is-cur .n{color:rgba(253,252,250,.7)}

/* 板鼻的朋友們（/bwfs-friends/） */
.dog-index{margin:1.6rem 0 2.6rem}
.dog-index .y{font-size:1rem}
.dog{margin:2.6rem 0 0; padding-top:1.3rem; border-top:1px solid var(--rule)}
.dog h2{
  font-family:var(--serif); font-size:1.2rem; font-weight:600; margin:0 0 .8rem;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.7rem;
}
.dog-note{
  margin:3rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:.78rem; line-height:1.9; color:var(--muted);
}

.dog-group{
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.08em;
  color:var(--muted); margin:2.2rem 0 0; padding-top:0; border-top:0;
}
.dog-group + .dog-index{margin-top:.9rem}

/* ⚠ §79 §150 */
.figures{margin:3.5rem 0 1rem; padding-top:2rem; border-top:1px solid var(--rule)}
.figures h2{font-family:var(--serif); font-size:1.15rem; font-weight:600; margin:0 0 .4rem}
.figures h3{font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.08em;
  color:var(--muted); margin:2.4rem 0 .8rem}
.fig-lead{font-family:var(--sans); font-size:.85rem; color:var(--muted); margin:0}
.fig-tiles{list-style:none; padding:0; margin:1.4rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr)); gap:.9rem}
.fig-tiles li{border:1px solid var(--rule); border-radius:6px; padding:.75rem .9rem}
.fig-tiles b{display:block; font-family:var(--serif); font-size:1.4rem; font-weight:600;
  line-height:1.25; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.fig-tiles span{font-family:var(--sans); font-size:.72rem; color:var(--muted)}
.fig-bars{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.fig-bars th{font-weight:500; font-size:.78rem; color:var(--muted); text-align:left;
  width:3.2em; padding:.18rem 0}
.fig-bars td.bar{width:100%; padding:.18rem .6rem}
.fig-bars .barwrap{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap}
.fig-bars td.bar span{display:block; flex:0 0 auto; height:.65rem; background:var(--accent);
  opacity:.5; border-radius:0 2px 2px 0; min-width:2px}
.fig-bars tr.mk td.bar span{opacity:1}
.fig-bars td.num{font-size:.78rem; color:var(--fg-soft); text-align:right; white-space:nowrap}
.fig-bars .mkn{font-size:.72rem; font-style:normal; color:var(--accent); white-space:nowrap}
.fig-grid{width:100%; border-collapse:collapse; font-size:.9rem;
  font-variant-numeric:tabular-nums}
.fig-grid th, .fig-grid td{border-bottom:1px solid var(--rule); padding:.5rem .4rem;
  text-align:right}
.fig-grid th{font-weight:500; font-size:.75rem; color:var(--muted); letter-spacing:.05em}
.fig-grid th:first-child, .fig-grid td:first-child{text-align:left}
/* 字數對照：站名那一列加底、換算那一列不畫線 */
.fig-cmp tr.me td{background:var(--sunk); font-weight:500}
.fig-cmp tr.sum td{border-bottom:0; border-top:1px solid var(--rule);
  padding-top:.7rem; color:var(--muted)}
.fig-cmp tr.sum td:last-child{color:var(--accent)}
@media (max-width:560px){
  .fig-tiles{grid-template-columns:repeat(2, 1fr)}
}
/* ⚠ §134 */
@media (min-width:621px){
  .fig-tiles{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .fig-tiles li{container-type:inline-size}
  .fig-tiles b{font-size:min(1.4rem, 21cqi)}
}

/* 大事記　⚠ §167 */
.ms{position:relative; display:grid; gap:1.7rem; margin:2rem 0 2.6rem}
.ms-y{display:grid; gap:1.7rem}
.ms::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:6px; margin-left:-3px;
  border-radius:3px; background:var(--rule)}   /* ⚠ §170　軌道改灰，藍色只留圓點 */
.ms-year{position:relative; z-index:1; display:flex; justify-content:center; margin:0}
.ms-year b{font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.06em;
  background:var(--bg); color:var(--fg); border:1px solid var(--rule);
  border-radius:999px; padding:.08rem .75rem;
  font-variant-numeric:tabular-nums}   /* ⚠ §170　黑底白字跟「目前分頁」撞了；700 是 <b> 的預設 */
/* ⚠ §188 */
@media (min-width:621px){
  .ms{gap:3.4rem}
  .ms-year{position:sticky; top:var(--head-h, 3.5rem); z-index:3}
  .ms-year b{font-family:var(--serif); font-size:2.6rem; font-weight:600; letter-spacing:.02em;
    line-height:1.1; color:var(--ms-year); background:none; border:0; border-radius:0; padding:0 .55rem}
  .ms-year::before{content:""; position:absolute; inset:-1.5rem -1.25rem -.7rem;
    background:var(--bg); z-index:-1;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 80%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 80%,rgba(0,0,0,0) 100%)}
}
.ms-item{position:relative; display:grid; grid-template-columns:1fr 1fr; column-gap:44px}
/* ⚠ §187 */
.ms-item::after{content:""; position:absolute; left:50%; top:2.2rem; width:20px; height:20px;
  box-sizing:border-box; transform:translateX(-50%);
  border-radius:50%; background:var(--bg); border:3px solid var(--accent); z-index:1}
.ms-card{grid-column:1; display:block; background:#fff; border:1px solid var(--rule);
  border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(28,27,25,.05);   /* ⚠ §170 */
  transition:transform .2s ease}
.ms-item.r .ms-card{grid-column:2}
@media (hover:hover){   /* ⚠ §176 */
  .ms-card:hover{transform:translateY(-3px)}
}
.ms-pic{position:relative; display:block; aspect-ratio:16/9; background:var(--rule); overflow:hidden}
.ms-pic img{width:100%; height:100%; object-fit:cover; display:block}
.ms-pic.is-album{display:grid; place-content:center; text-align:center; background:var(--fg); color:var(--bg)}
.ms-pic.is-album b{font-size:1.35rem; letter-spacing:.08em}
.ms-pic.is-album i{display:block; font-style:normal; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.2em; opacity:.75}
.ms-play{position:absolute; left:50%; top:50%; width:52px; height:36px; margin:-18px 0 0 -26px;
  border-radius:6px; background:rgba(20,20,20,.72)}   /* ⚠ §170　壓在照片上，維持近黑 */
.ms-play::after{content:""; position:absolute; left:21px; top:10px; border-left:14px solid #fff;
  border-top:8px solid transparent; border-bottom:8px solid transparent}
.ms-kind{position:absolute; right:.5rem; top:.5rem; font-family:var(--sans); font-size:.66rem;
  letter-spacing:.08em; background:var(--bg); color:var(--muted); border:1px solid var(--rule);
  border-radius:999px; padding:.02rem .55rem}   /* ⚠ §170　跟列表頁的 .tag 同一種長相 */
.ms-txt{display:block; padding:.7rem .95rem .9rem}
.ms-date{display:block; font-family:var(--sans); font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.04em}
.ms-h{display:block; margin:.1rem 0 .2rem; font-size:1.24rem; line-height:1.55; text-wrap:balance}   /* ⚠ §170 */
.ms-say{display:block; font-size:.86rem; color:var(--fg-soft); line-height:1.75}
.ms-quote{font-family:var(--sans); font-size:.9rem; color:var(--muted); text-align:center;
  margin:2.6rem 0 1rem}
@media (max-width:620px){
  .ms{gap:1.1rem}
  .ms-y{gap:1.1rem}
  .ms::before{display:none}
  .ms-year{position:sticky; top:var(--head-h, 3.2rem); z-index:2; justify-content:flex-start;
    align-items:center; gap:.55rem; padding:.45rem 0 .4rem;
    background:rgba(253,252,250,.88);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .ms-year{background:var(--bg)}
  }
  .ms-year::after{content:""; flex:1; height:1px; background:var(--rule)}
  .ms-year b{background:none; color:var(--fg); border:0; padding:0; font-size:.8rem; letter-spacing:.1em}
  .ms-item{grid-template-columns:1fr}
  .ms-item::after{display:none}
  .ms-card, .ms-item.r .ms-card{grid-column:1}
  .ms-pic{aspect-ratio:3/2}
}

/* 大事記：點開一則的浮層　⚠ §167 */
.ms-ovl{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:1.5rem;
  background:rgba(28,27,25,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:ms-fade .18s ease}
@keyframes ms-fade{from{opacity:0} to{opacity:1}}
@keyframes ms-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
/* ⚠ §175　浮層的內文寬度跟文章頁一致：內層用同一個 --measure，
   外層再加內距與捲軸的寬度。這樣算出來才不會因為捲軸寬度不同而跡掉。 */
.ms-pan{position:relative; width:min(780px,100%); max-height:calc(100dvh - 3rem);
  overflow:auto; -webkit-overflow-scrolling:touch; background:var(--bg); border-radius:6px;   /* ⚠ §170 */
  box-shadow:0 10px 40px rgba(28,27,25,.22); animation:ms-rise .22s ease}
.ms-x{position:absolute; right:.6rem; top:.6rem; z-index:3; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--rule); background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:1rem; line-height:1; cursor:pointer}
.ms-x:hover{border-color:var(--accent); color:var(--accent)}
.ms-bar{display:none}
.ms-pan .ms-inner{max-width:var(--measure); margin-inline:auto; padding:1.4rem 1.25rem 1.6rem}
.ms-meta{display:flex; align-items:center; gap:.7rem; margin:0; font-family:var(--sans);
  font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums;
  padding-right:2.2rem}
.ms-meta .post-share{margin-left:auto}
.ms-pan h2{margin:.35rem 0 1rem; font-size:1.42rem; line-height:1.6; letter-spacing:.02em;
  text-wrap:balance; padding-right:2rem}
.ms-pan .prose{margin:0}
.ms-nav{display:flex; gap:.6rem; margin:1rem 0 0; padding-top:.9rem; border-top:1px solid var(--rule)}
.ms-nav button{flex:1; font-family:var(--sans); font-size:.82rem; background:transparent;
  border:1px solid var(--rule); border-radius:999px; padding:.3rem .7rem; color:var(--fg-soft);
  cursor:pointer}
.ms-nav button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.ms-nav button:disabled{opacity:.35; cursor:default}
@media (max-width:620px){
  .ms-ovl{padding:0; place-items:stretch}
  .ms-pan{width:100%; max-height:none; height:100%; border-radius:0; animation:ms-fade .18s ease}
  .ms-x{display:none}
  .ms-bar{position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:.5rem;
    background:var(--bg); border-bottom:1px solid var(--rule); font-family:var(--sans);
    font-size:.88rem; padding:.5rem .9rem;
    padding-top:calc(.5rem + env(safe-area-inset-top, 0px))}
  .ms-bar button{background:none; border:none; font:inherit; color:var(--accent); cursor:pointer;
    padding:.15rem .2rem}
  .ms-bar .post-share{margin-left:auto}
  .ms-pan .ms-inner{padding:1rem 1.1rem 2.4rem}
  .ms-pan h2{font-size:1.2rem; padding-right:0}
  .ms-meta{padding-right:0}
  .ms-meta .post-share{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ms-ovl, .ms-pan{animation:none}
  .ms-card{transition:none}
}

/* ⚠ §211 §223　照片點開放大 */
@media (hover:hover) and (pointer:fine){
  .prose figure.landscape > img, .prose figure.portrait > img{cursor:pointer}
}
.zoom[open]{display:flex; align-items:center; justify-content:center;
  width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0;
  border:0; background:transparent; cursor:pointer}
.zoom::backdrop{background:rgba(20,19,17,.9)}
.zoom img{display:block; max-width:92vw; max-height:90vh; width:auto; height:auto; border-radius:3px}
.zoom-close{position:fixed; top:.8rem; right:1rem; width:2.4rem; height:2.4rem; padding:0;
  border:0; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem; cursor:pointer}

/* ⚠ §216　相片 */
.pw-year{margin:0 0 1.8rem}
.pw-year h2{display:flex; align-items:baseline; gap:.6rem; margin:0 0 .6rem; font-size:1.1rem;
  scroll-margin-top:calc(var(--head-h, 3.5rem) + 1.2rem)}
.pw-year h2 .n{font-family:var(--sans); font-size:.75rem; font-weight:400; color:var(--muted)}
.pw-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:3px}
.pw-grid a{position:relative; display:block; aspect-ratio:1; border-radius:3px; color:#fff; text-decoration:none}
.pw-card{position:absolute; inset:0; display:block; overflow:hidden; border-radius:3px; background:var(--rule)}
.pw-grid img{display:block; width:100%; height:100%; object-fit:cover; border-radius:3px}
.pw-t{position:absolute; left:0; right:0; bottom:0; padding:1.4em .45em .35em;
  background:linear-gradient(transparent, rgba(0,0,0,.72)); font-size:.7rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  opacity:0; transition:opacity .2s}
.pw-grid a:hover .pw-t, .pw-grid a:focus-visible .pw-t, .pw-grid a.is-show .pw-t{opacity:1}
.pw-grid a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pw.is-flip .pw-grid a{perspective:700px}
.pw.is-flip .pw-card{overflow:visible; background:none; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2, .7, .2, 1)}
.pw.is-flip .pw-card > img, .pw-back{position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden}
.pw-back{display:block; overflow:hidden; border-radius:3px; background:var(--fg); transform:rotateY(180deg)}
.pw-bg{position:absolute; inset:0; background:center / cover no-repeat;
  filter:brightness(.35) blur(1px); transform:scale(1.06)}
.pw.is-flip .pw-t{top:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:.5em; background:none; opacity:1; font-size:.76rem; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pw.is-flip .pw-grid a:hover .pw-card, .pw.is-flip .pw-grid a:focus-visible .pw-card,
.pw.is-flip .pw-grid a.is-show .pw-card{transform:rotateY(180deg)}
@media (min-width:600px){
  .pw-grid{grid-template-columns:repeat(5, 1fr); gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .pw-t{transition:none}
  .pw.is-flip .pw-card{transition:none; transform:none !important}
  .pw-back{transform:none; opacity:0}
  .pw.is-flip .pw-grid a:hover .pw-back, .pw.is-flip .pw-grid a:focus-visible .pw-back,
  .pw.is-flip .pw-grid a.is-show .pw-back{opacity:1}
}
/* ⚠ §220 */
.dash{letter-spacing:-.1em; margin-right:.1em}