/* 東亞海域經濟魚類圖鑑 — 全站樣式（fish.leevent.xyz，獨立子網域；字型全部自帶，不引用 leevent.xyz 的檔案）
   色彩與字級沿用 leevent.xyz（vent's talk）token：紙色、藍墨、細線、17/18px 本文、行距 1.8。
   本站自有：棲息環境七色（資料編碼，只用在細邊、小標、月份條）；UI 強調色只有一個 --acc（查魚按鈕、選中的篩選）。 */
@font-face{font-family:"Fish Serif";font-style:normal;font-weight:600 700;font-display:swap;src:url(fonts/fish-serif-bold.woff2) format("woff2")}
:root{
  --paper:#faf7f2;--paper-2:#f2ede4;--mat:#ece5d8;--ink:#1f2a44;--ink-2:#5b6274;--rule:#e2dbcf;--rule-2:#cfc6b6;
  --acc:#b9482e;
  --h-pel:#2f6f6a;--h-ocean:#3b4a9a;--h-bottom:#86601d;--h-reef:#7a4a3a;--h-coast:#4f6b2e;--h-deep:#6a3f68;--h-cold:#3d5f7a;
  --serif:"Fish Serif","Noto Serif TC","Source Han Serif TC","Songti TC",serif;
  --sans:"PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",-apple-system,sans-serif;
  --lat:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:17px;--lh:1.8;--measure:36em;--wrap:1200px;--gutter:clamp(16px,4vw,48px);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;
}
@media(min-width:900px){:root{--body:18px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--body);line-height:var(--lh);letter-spacing:.02em;text-rendering:optimizeLegibility;font-kerning:normal}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--rule-2)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:99}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
i.lat,.lat{font-family:var(--lat);font-style:italic;letter-spacing:0}

/* ---- leevent.xyz 站頭（與部落格一致） ---- */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.site-head-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:60px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:10px;min-width:0}
.brand-name{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.01em;white-space:nowrap}
.brand-tag{font-size:13px;color:var(--ink-2);white-space:nowrap}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;font-size:15px}
.site-nav a{text-decoration:none;color:var(--ink-2)}.site-nav a:hover{color:var(--ink)}
@media(max-width:640px){.brand-tag{display:none}.site-nav ul{gap:14px;font-size:14px}.site-nav .opt{display:none}}

/* ---- 圖鑑導覽列（本站自有，黏在頂端） ---- */
.fish-nav{position:sticky;top:0;z-index:20;background:rgba(250,247,242,.94);backdrop-filter:saturate(1.2) blur(6px);-webkit-backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--rule)}
.fish-nav .wrap{display:flex;align-items:center;gap:var(--s2);min-height:52px}
.fish-nav .home{font-family:var(--serif);font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px}
.fish-nav .home svg{width:22px;height:22px;flex:none}
.fish-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media(max-width:640px){.fish-nav ul{mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}}
.fish-nav ul::-webkit-scrollbar{display:none}
.fish-nav li a{display:block;padding:8px 10px;font-size:15px;text-decoration:none;color:var(--ink-2);white-space:nowrap;border-radius:4px}
.fish-nav li a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
@media(max-width:640px){.fish-nav .home span{display:none}.fish-nav .wrap{gap:6px}}

/* ---- 共用排版 ---- */
.kicker{font-size:13px;letter-spacing:.2em;color:var(--ink-2);text-transform:uppercase}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:.03em;margin:0}
.sec{padding:var(--s8) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.sec-head h2{font-size:clamp(26px,3.4vw,34px);line-height:1.3}
.sec-head p{margin:0;color:var(--ink-2);font-size:15px;max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1em}
.note{font-size:15px;color:var(--ink-2)}
.pill{display:inline-block;font-size:13px;line-height:1.5;padding:1px 8px;border:1px solid var(--rule-2);border-radius:999px;color:var(--ink-2);white-space:nowrap}
.iucn{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-weight:500;font-size:13px;line-height:1.5;padding:1px 9px;border-radius:999px;letter-spacing:.02em;background:var(--paper-2);color:var(--ink);white-space:nowrap}
.iucn b{font-family:var(--lat);font-weight:600;font-style:normal;letter-spacing:.04em}
.iucn.t{background:#1f2a44;color:#fff}

/* ---- 首頁開場 ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(32px,7vw,88px) 0 var(--s6)}
.hero h1{font-size:clamp(36px,5.4vw,64px);line-height:1.22;margin:12px 0 20px}
.hero .lead{max-width:25em;margin:0 0 var(--s3)}
.search{position:relative;max-width:520px}
.search form{display:flex;border:1.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:13px 6px 13px 20px;font:inherit;font-size:17px;color:var(--ink)}
.search input::placeholder{color:#626a7a}
.search input:focus{outline:none}
.search form:focus-within{box-shadow:0 0 0 3px rgba(31,42,68,.18)}
.search button{border:0;background:var(--acc);color:#fff;font:inherit;font-weight:600;padding:0 22px;cursor:pointer;letter-spacing:.08em}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--rule-2);border-radius:6px;box-shadow:0 12px 32px rgba(31,42,68,.14);list-style:none;margin:0;padding:6px;z-index:30;max-height:60vh;overflow:auto}
.suggest[hidden]{display:none}
.suggest a{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:8px;border-radius:6px;text-decoration:none}
.suggest a:hover,.suggest a[aria-selected=true]{background:var(--paper-2)}
.suggest img{width:56px;height:38px;object-fit:cover;border-radius:3px;background:var(--mat)}
.suggest b{font-family:var(--serif);font-size:18px}
.suggest small{display:block;color:var(--ink-2);font-size:13px;line-height:1.5}
.quick{margin-top:14px;font-size:15px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.quick a{text-decoration:none;color:var(--ink);border:1px solid var(--rule-2);border-radius:999px;min-height:40px;padding:0 14px;display:inline-flex;align-items:center;background:var(--paper)}
.quick a:hover{border-color:var(--ink)}
.plate{position:relative;margin:0 calc(var(--gutter) * -1) 0 0;background:var(--mat);padding:clamp(18px,3vw,32px);border-radius:2px}
.plate .no{font-family:var(--lat);font-size:14px;letter-spacing:.14em;color:var(--ink-2);display:flex;justify-content:space-between}
.plate .img{margin:10px -4% 6px;aspect-ratio:16/9;display:flex;align-items:center}
.plate img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.plate.photo .img{margin:10px 0 6px}
.plate.photo img{object-fit:cover;mix-blend-mode:normal;border-radius:2px}
.plate figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--rule-2);padding-top:10px}
.plate figcaption a{text-decoration:none}
.plate figcaption b{font-family:var(--serif);font-size:26px}
.plate figcaption .lat{color:var(--ink-2);font-size:16px;text-align:right}
.credit{font-size:13px;line-height:1.6;color:var(--ink-2);margin-top:8px;letter-spacing:0}
.credit a{color:var(--ink-2)}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding-top:var(--s2);gap:var(--s2)}.hero h1{margin-top:6px}.plate{order:-1;overflow:hidden;margin:0 calc(var(--gutter) * -1);background:transparent;padding:0 var(--gutter)}.plate .no{display:none}.plate .img{margin:0 auto;aspect-ratio:auto;height:150px;justify-content:center}.plate .img img{width:auto;max-width:100%}.plate figcaption{border-top:0;padding-top:0}.plate figcaption b{font-size:18px}.plate .credit{margin-top:2px}}

/* ---- 三個用途 ---- */
.uses{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.uses a{display:block;padding:var(--s3) var(--s3) var(--s3) 0;text-decoration:none;border-right:1px solid var(--rule)}
.uses a+a{padding-left:var(--s3)}
.uses a:last-child{border-right:0}
.uses .n{font-family:var(--lat);font-size:14px;color:var(--ink-2)}
.uses h3{font-size:22px;margin:4px 0 6px}
.uses p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.7}
@media(max-width:820px){.uses{grid-template-columns:1fr}.uses a,.uses a+a{padding:var(--s2) 0;border-right:0;border-bottom:1px solid var(--rule)}.uses a:last-child{border-bottom:0}}

/* ---- 當季 ---- */
.season{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.mswitch{display:flex;align-items:center;gap:6px}
.mswitch button{width:44px;height:44px;border:1px solid var(--rule-2);background:var(--paper);border-radius:999px;font:inherit;font-size:18px;cursor:pointer;color:var(--ink)}
.mswitch output{font-family:var(--serif);font-weight:700;font-size:20px;min-width:4.2em;text-align:center}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:var(--s2);overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.strip .card{scroll-snap-align:start}
@media(max-width:640px){.strip{grid-auto-columns:72%}}
.season .warn-line{margin:var(--s2) 0 0;font-size:15px;color:var(--ink-2);max-width:var(--measure)}

/* ---- 魚卡 ---- */
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;border-top:3px solid var(--hc,var(--ink));padding-top:10px;min-width:0}
.card .ph{aspect-ratio:3/2;background:var(--mat);overflow:hidden;border-radius:2px;display:flex;align-items:center;justify-content:center}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card .ph.spec img{object-fit:contain;mix-blend-mode:multiply;padding:6%}
.card .ph.wide img,.card .ph.draw img{object-fit:contain;padding:4%}
.card:hover .ph img{transform:scale(1.03)}
.card .hab{font-size:13px;letter-spacing:.12em;color:var(--hc);margin-top:10px;font-weight:600}
.card h3{font-size:24px;line-height:1.3;margin:2px 0 0}
.card .std{font-size:14px;color:var(--ink-2);margin:2px 0 0;line-height:1.6}
.card .al{font-size:15px;margin:6px 0 0;line-height:1.6}
.card .meta{display:flex;align-items:center;gap:8px;margin-top:10px}
.mbar{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;flex:1}
.mbar i{height:6px;background:var(--rule);border-radius:1px}
.mbar i.on{background:var(--hc,var(--ink))}
.mbar i.now{box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px var(--ink)}
.mlab{display:grid;grid-template-columns:repeat(12,1fr);font-size:12px;color:var(--ink-2);text-align:center;margin-top:4px;letter-spacing:0}

/* ---- 全部魚種 ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:var(--s2)}
.chip{border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);font:inherit;font-size:15px;padding:6px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--hc)}
.chip[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.chip[aria-pressed=true] .dot{background:#fff}
.selects{display:flex;gap:8px;flex-wrap:wrap}
.selects select{font:inherit;font-size:15px;padding:8px 14px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);color:var(--ink);min-height:44px}
.count{font-size:15px;color:var(--ink-2);margin:var(--s2) 0}
.count button{border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;padding:0 0 0 8px}
.group{margin-top:var(--s6)}
.group-head{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:var(--s3)}
.group-head h3{font-size:26px;color:var(--hc)}
.group-head p{margin:0;font-size:15px;color:var(--ink-2)}
.group-head .c{grid-column:2;font-family:var(--lat);font-size:14px;color:var(--ink-2)}
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) var(--s3)}
.cards .card{grid-column:span 3}
.cards .card.lead{grid-column:span 6;grid-row:span 2}
.cards .card.lead .ph{aspect-ratio:4/3}
.cards .card.lead h3{font-size:32px}
@media(max-width:1000px){.cards .card{grid-column:span 4}.cards .card.lead{grid-column:span 8;grid-row:auto}}
@media(max-width:640px){.cards{gap:var(--s3) 14px}.cards .card{grid-column:span 6}.cards .card.lead{grid-column:1/-1}.cards .card.lead .ph{min-height:0;aspect-ratio:16/10}.card h3{font-size:21px}.cards .card.lead h3{font-size:28px}.card .al{font-size:14px}}
.empty{padding:var(--s6) 0;color:var(--ink-2)}

/* ---- 單種頁 ---- */
.crumb{font-size:14px;color:var(--ink-2);padding-top:var(--s3)}
.crumb a{color:var(--ink-2)}
.sp-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;padding:var(--s3) 0 var(--s4)}
.sp-plate{margin:0}
.sp-plate .img{background:var(--mat);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:2px;min-height:200px}
.sp-plate .img img{width:100%;height:auto;max-height:72vh;object-fit:contain}
.sp-plate.spec .img img{mix-blend-mode:multiply;padding:5%}
.sp-plate.draw .img img{padding:6% 4%}
.sp-title .hab{font-size:13px;letter-spacing:.14em;color:var(--hc);font-weight:600}
.sp-title h1{font-size:clamp(40px,6vw,64px);line-height:1.15;margin:6px 0 10px}
.sp-title .std{margin:0;font-size:16px;color:var(--ink-2)}
.sp-title .sci{margin:4px 0 0;font-size:19px}
.sp-title .en{margin:0;font-size:15px;color:var(--ink-2)}
.calls{margin:var(--s3) 0 0;padding:14px 0 0;border-top:1px solid var(--rule)}
.calls p{margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.calls ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.calls li{font-family:var(--serif);font-weight:600;font-size:18px;padding:4px 12px;background:var(--paper-2);border-radius:6px}
@media(max-width:820px){.sp-head{grid-template-columns:1fr}.sp-plate{margin:0 calc(var(--gutter) * -1)}.sp-plate .img{border-radius:0}.sp-plate .credit{padding:0 var(--gutter)}}
.sp-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,6vw,88px);padding:var(--s4) 0 var(--s8);border-top:1px solid var(--ink)}
.sp-main section{margin-bottom:var(--s6)}
.sp-main h2{font-size:24px;margin-bottom:10px;display:flex;align-items:baseline;gap:12px}
.sp-main h2 small{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--ink-2);letter-spacing:.02em}
.sp-main p{margin:0;max-width:var(--measure)}
.idbox{border-left:4px solid var(--hc);padding:4px 0 4px 18px;font-size:calc(var(--body) + 1px)}
.danger{background:#f6e4dc;border-radius:6px;padding:14px 18px;max-width:var(--measure)}
.danger h2{color:#7a2a15}
.ring{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;max-width:520px;margin-top:12px}
.ring i{height:28px;background:var(--rule);border-radius:2px;position:relative}
.ring i.on{background:var(--hc)}
.ring i.now{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.ring+.mlab{max-width:520px;font-size:13px}
.seamap{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);gap:6px;max-width:420px;margin-top:12px}
.seamap span{border:1px solid var(--rule-2);border-radius:6px;padding:10px 8px;font-size:14px;text-align:center;color:var(--ink-2);line-height:1.4}
.seamap span.on{background:color-mix(in srgb,var(--hc) 16%,var(--paper));border:1.5px solid var(--hc);color:var(--ink);font-weight:600}
.seamap .s2{grid-area:1/1}.seamap .s3{grid-area:1/2/2/4}.seamap .s1{grid-area:2/1/3/3}.seamap .s5{grid-area:2/3/4/4}.seamap .s0{grid-area:3/2}.seamap .s4{grid-area:3/1}
.facts{border-top:3px solid var(--hc);padding-top:12px;font-size:15px;align-self:start;position:sticky;top:72px}
.facts dl{margin:0;display:grid;grid-template-columns:5.5em 1fr;gap:10px 12px}
.facts dt{color:var(--ink-2)}
.facts dd{margin:0;line-height:1.65}
.facts .src{margin-top:var(--s3);padding-top:12px;border-top:1px solid var(--rule);font-size:14px;line-height:1.9}
.facts .src a{display:block}
.vchk{font-size:13px;color:var(--ink-2)}
@media(max-width:900px){.sp-body{grid-template-columns:1fr}.facts{position:static}}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);border-top:1px solid var(--rule);padding:var(--s3) 0 var(--s6)}
.pager a{text-decoration:none;display:block}.pager a small{display:block;color:var(--ink-2);font-size:13px}.pager a b{font-family:var(--serif);font-size:20px}
.pager a:last-child{text-align:right}
.related{background:var(--paper-2);border-radius:6px;padding:16px 18px;max-width:var(--measure)}
.related a{font-weight:600}

/* ---- 易混淆 ---- */
.cmp{padding:var(--s6) 0;border-top:1px solid var(--rule)}
.cmp h2{font-size:clamp(24px,3vw,30px);line-height:1.35}
.cmp .rule{font-size:calc(var(--body) + 1px);margin:10px 0 var(--s3);max-width:var(--measure)}
.cmp .rule b{background:linear-gradient(transparent 62%,#f3c9b8 62%)}
.vs{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:var(--s3)}
.vs article{border-top:3px solid var(--hc);padding-top:10px}
.vs .ph{aspect-ratio:3/2;background:var(--mat);border-radius:2px;overflow:hidden}
.vs .ph img{width:100%;height:100%;object-fit:cover}
.vs .ph.spec img{object-fit:contain;mix-blend-mode:multiply;padding:5%}
.vs h3{font-size:24px;margin:10px 0 2px}
.vs h3 a{text-decoration:none}
.vs dl{margin:8px 0 0;display:grid;grid-template-columns:4em 1fr;gap:6px 10px;font-size:15px;line-height:1.7}
.vs dt{color:var(--ink-2)}.vs dd{margin:0}
@media(max-width:760px){.vs{grid-template-columns:1fr 1fr;gap:14px}.vs[style*="--n:4"]{grid-template-columns:1fr 1fr}.vs dl{grid-template-columns:1fr;gap:0}.vs dt{margin-top:8px;font-size:13px}.vs h3{font-size:20px}}

/* ---- 俗名對照 ---- */
.traps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s2);margin-bottom:var(--s6)}
.trap{background:var(--paper-2);border-radius:4px;padding:16px 18px}
.trap b{font-family:var(--serif);font-size:20px;display:block}
.trap p{margin:6px 0 0;font-size:15px;line-height:1.75}
.names{width:100%;border-collapse:collapse;font-size:16px}
.names th{text-align:left;font-weight:600;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--ink);padding:8px 10px 8px 0;position:sticky;top:52px;background:var(--paper)}
.names td{border-bottom:1px solid var(--rule);padding:10px 10px 10px 0;vertical-align:top;line-height:1.6}
.names td:first-child{font-family:var(--serif);font-weight:700;font-size:19px;white-space:nowrap}
.names td a{font-weight:600}
.names .lat{color:var(--ink-2);font-size:14px}
@media(max-width:640px){.names .c-sci{display:none}}

/* ---- 小測驗 ---- */
.quiz{max-width:680px;margin:0 auto;padding:var(--s4) 0 var(--s8)}
.quiz .ph{aspect-ratio:3/2;background:var(--mat);border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.quiz .ph img{width:100%;height:100%;object-fit:cover}
.quiz .ph.spec img{object-fit:contain;mix-blend-mode:multiply;padding:5%}
.quiz .q{font-family:var(--serif);font-size:24px;margin:var(--s3) 0 var(--s2)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts button{min-height:56px;border:1.5px solid var(--rule-2);background:var(--paper);border-radius:6px;font:inherit;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);cursor:pointer}
.opts button:disabled{cursor:default}
.opts button.right{border-color:var(--h-coast);background:#e3ecd8}
.opts button.wrong{border-color:var(--acc);background:#f6e4dc}
.qres{min-height:3.6em;margin:var(--s2) 0;max-width:var(--measure)}
.qfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);border-top:1px solid var(--rule);padding-top:var(--s2)}
.btn{border:1.5px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-weight:600;padding:10px 22px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block}
.modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s2)}

/* ---- 資料出處 ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.tbl th{text-align:left;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--ink);padding:6px 8px 6px 0;font-size:13px}
.tbl td{border-bottom:1px solid var(--rule);padding:8px 8px 8px 0;vertical-align:top}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ok{color:var(--h-coast);font-weight:600}.mid{color:var(--h-bottom);font-weight:600}

/* ---- 頁尾（與部落格一致） ---- */
.site-foot{border-top:1px solid var(--rule);margin-top:var(--s8);padding:var(--s6) 0 var(--s4);font-size:15px;color:var(--ink-2);background:var(--paper)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s4)}
.foot-top .brand-name{color:var(--ink);margin:0 0 6px}
.foot-top p{margin:0}
.foot-h{font-size:13px;letter-spacing:.14em;margin:0 0 6px;color:var(--ink-2)}
.foot-top ul{list-style:none;margin:0;padding:0;line-height:2}
.lv-network{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;font-size:14px}
.lv-network ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.lv-network a{text-decoration:none}.lv-network strong{color:var(--ink);margin-right:6px}
.copy{margin:var(--s2) 0 0;font-size:13px}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-top>div:first-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* 超寬照片（長條魚）一律完整顯示，不裁頭尾 */
.ph.wide img,.ph.draw img{object-fit:contain!important;padding:4%}

/* ---- L2 第 1 輪修正 ---- */
p,dd,li{text-wrap:pretty}
.nw{white-space:nowrap}
.card .tx{display:flex;flex-direction:column;min-width:0}
.card h3 .iucn{margin-left:8px;vertical-align:4px}
.card .idt{display:none;font-size:15px;line-height:1.75;color:var(--ink-2);margin:10px 0 0;max-width:30em}
.card.lead .idt,.card.w12 .idt{display:block}
.cards{grid-auto-flow:row dense}
.cards .card.w3{grid-column:span 3}.cards .card.w4{grid-column:span 4}.cards .card.w6{grid-column:span 6}
.cards .card.lead{grid-column:1 / span 6;grid-row:span 2}
.cards .card.lead.r{grid-column:7 / span 6}
.cards .card.lead .ph{aspect-ratio:auto;flex:1 1 auto;min-height:300px}
.cards .card.lead .ph img{object-fit:contain;padding:4%}
.cards .card.w12{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s4);align-items:center}
.cards .card.w12 h3{font-size:32px}
@media(max-width:1000px){.cards .card.w3,.cards .card.w4{grid-column:span 4}.cards .card.lead,.cards .card.lead.r{grid-column:span 8;grid-row:auto}}
@media(max-width:640px){
 .cards .card.w3,.cards .card.w4,.cards .card.w6{grid-column:span 6}
 .cards .card.lead,.cards .card.lead.r,.cards .card.w12,.cards .card.mtail{grid-column:1/-1}
 .cards .card.w12,.cards .card.mtail{display:grid;grid-template-columns:44% 1fr;gap:14px;align-items:start}
 .cards .card.w12 h3{font-size:24px}
 .cards .card.w12 .idt{display:none}
}
.legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin:0 0 var(--s2)}
.legend .lg{display:inline-flex;gap:2px;margin-left:4px}
.legend .lg i{width:14px;height:6px;border-radius:1px;background:var(--rule)}
.legend .lg i.on{background:var(--ink-2)}
.legend .lg i.now{box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px var(--ink)}
.strip .card:first-child{grid-column:span 2}
.strip .card:first-child .ph{aspect-ratio:3.1/1}
.plate .credit.short{display:none}
@media(max-width:820px){.plate .credit{display:none}.plate .credit.short{display:block;font-size:12px;margin-top:4px}}
@media(min-width:1200px){.plate{margin-right:calc((100vw - var(--wrap)) / -2 - var(--gutter));border-radius:2px 0 0 2px}}
@media(max-width:640px){.fish-nav ul{mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 85%,transparent);padding-left:12px}}
.sp-iucn{margin:-2px 0 10px}
.traps{display:block;margin-bottom:var(--s6)}
.trap-hero{background:var(--paper-2);border-radius:6px;padding:var(--s3) var(--s3);max-width:44em}
.trap-hero b{font-family:var(--serif);font-size:clamp(30px,4vw,40px);line-height:1.25;display:block}
.trap-hero b span{color:var(--ink-2);font-weight:400;margin:0 .2em}
.trap-hero p{margin:10px 0 0;max-width:var(--measure)}
.trap-list{list-style:none;margin:var(--s4) 0 0;padding:0;max-width:44em;counter-reset:t 1}
.trap-list li{display:grid;grid-template-columns:2.2em 11.5em 1fr;gap:4px 16px;padding:14px 0;counter-increment:t;align-items:baseline}
.trap-list li::before{content:"0" counter(t);font-family:var(--lat);color:var(--ink-2);font-size:15px}
.trap-list b{font-family:var(--serif);font-size:19px}
.trap-list span{font-size:16px;line-height:1.75}
@media(max-width:640px){.trap-list li{grid-template-columns:2em 1fr}.trap-list li span{grid-column:2}}
.quiz .qcr{font-size:12px;color:var(--ink-2);margin:6px 0 0}
img.broken{visibility:hidden}
.ph:has(img.broken)::after,.ph.noimg::after{content:"照片載入失敗";font-size:13px;color:var(--ink-2)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.card .tx{flex:1 1 auto}.card .meta{margin-top:auto;padding-top:10px}
@media(max-width:640px){.cards .card.lead .ph{min-height:0;aspect-ratio:16/10}}
.selects+.legend{margin-top:14px}

/* ---- 第二輪：圖片出處、名單檢視、行動版縮短 ---- */
.card{position:relative}
.card .stretch{text-decoration:none}
.card .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.card .stretch:focus-visible{outline:none}
.card:has(.stretch:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.cr{position:relative;z-index:2;display:block;font-size:12px;line-height:1.5;color:var(--ink-2);text-decoration:none;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:0;padding:2px 0}

.cr:hover{text-decoration:underline}
.card .hab{margin-top:6px}
.vs .cr{margin:6px 0 0}
.suggest .sgcr{font-size:11px;opacity:.85}
.quiz .qcr a{color:var(--ink-2)}
.viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:var(--s2) 0}
.viewbar .count{margin:0}
.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:999px;padding:3px;background:var(--paper)}
.seg button{border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink-2);padding:0 16px;min-height:38px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.view-list .cards{grid-template-columns:1fr;gap:0}
@media(min-width:900px){.view-list .cards{grid-template-columns:1fr 1fr;column-gap:40px}}
.view-list .cards .card,.view-list .cards .card.lead,.view-list .cards .card.lead.r,.view-list .cards .card.w12,.view-list .cards .card.mtail{grid-column:auto;grid-row:auto;display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 14px;align-items:start;border-top:1px solid var(--rule);padding:12px 0 10px;box-shadow:inset 3px 0 0 var(--hc);padding-left:12px}
.view-list .card .ph,.view-list .cards .card.lead .ph{aspect-ratio:3/2;min-height:0;width:96px}
.view-list .card .ph img{padding:0}
.view-list .card .ph.spec img,.view-list .card .ph.wide img,.view-list .card .ph.draw img{padding:3%!important}
.view-list .card .hab,.view-list .card .idt{display:none!important}
.view-list .card h3,.view-list .cards .card.lead h3,.view-list .cards .card.w12 h3{font-size:20px;margin:0}
.view-list .card .std{font-size:13px;margin:0}
.view-list .card .al{font-size:14px;margin:2px 0 0}
.view-list .card .meta{padding-top:6px}
.view-list .card .cr{order:9;margin-top:4px;font-size:11.5px}
.view-list .group{margin-top:var(--s4)}
.view-list .group-head{margin-bottom:0}
@media(max-width:640px){
 .uses a,.uses a+a{padding:12px 0}.uses p{display:none}.uses h3{font-size:19px;margin:0}.uses .n{display:none}
 .strip .card:first-child{grid-column:span 1}.strip .card:first-child .ph{aspect-ratio:3/2}
 .group-head{grid-template-columns:auto 1fr}.group-head p{font-size:14px}
 .hero{padding-bottom:var(--s4)}.sec{padding:var(--s6) 0}
}
@media(min-width:600px) and (max-width:820px){.plate .img{height:230px}}
.cr{min-height:26px;display:flex;align-items:center}
.cr::before{flex:none}
.cr{display:block;line-height:26px}

/* 名單檢視再壓縮：一列約 100px；每群先列 3 種，其餘按「再看」展開 */
.view-list .card .std{display:none}
.view-list .card .al{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view-list .cards .card,.view-list .cards .card.lead,.view-list .cards .card.lead.r,.view-list .cards .card.w12,.view-list .cards .card.mtail{padding-top:10px;padding-bottom:8px;grid-template-columns:84px minmax(0,1fr)}
.view-list .card .ph,.view-list .cards .card.lead .ph{width:84px}
.more{display:none}
.view-list .more{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:8px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.view-list .group:not(.open) .cards .card:nth-child(n+4){display:none}
/* 第二輪自檢修正：點擊範圍、窄螢幕溢出 */
.seg button{min-height:40px}
.vs article,.vs .cr{min-width:0}
.site-nav a{display:inline-flex;align-items:center;min-height:36px}
.brand,.fish-nav .home{min-height:40px;align-items:center}
.seamap span.on{background:var(--paper-2)}
.foot-top ul a,.lv-network a{display:inline-block;padding:2px 0;min-height:26px}
.names td a,.tbl td a,.crumb a,.sp-body .src a{display:inline-block;padding:3px 0;min-height:26px}
@media(max-width:640px){
 .filters,.selects{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:2px var(--gutter)}
 .filters::-webkit-scrollbar,.selects::-webkit-scrollbar{display:none}
 .filters .chip,.selects select{flex:none}
 .filters{margin-bottom:8px}
 .sec-head p{font-size:14px}
}

/* L2（第二輪）修正 */
.suggest .sgcr{font-size:12px}
.view-list .card .cr{font-size:12px}
.plate .credit.short a{display:inline-flex;align-items:center;min-height:32px}
.strip [data-month]{display:inline-flex;align-items:center;min-height:40px}
.prose a{white-space:nowrap}
.card{border-top-width:2px}
.ph.draw img{padding:0 2%!important}
@media(min-width:641px) and (max-width:1000px){
 .cards .card.w3,.cards .card.w4,.cards .card.w6{grid-column:span 6}
 .cards .card.lead,.cards .card.lead.r{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s3);align-items:center}
 .cards .card.lead .ph{min-height:0;aspect-ratio:4/3}
 .cards .card.mtail,.cards .card.w12{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);align-items:center}
}
.credit a{display:inline-block;min-height:26px;line-height:26px}

/* 2026-10-31 頁首改為圖鑑自有站名（Owner 裁決：獨立子網域，圖鑑當主角），右側小字回連部落格 */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.brand svg{width:26px;height:26px;flex:none}
.by{display:inline-flex;align-items:center;min-height:40px;font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.by:hover{color:var(--ink)}
@media(max-width:640px){.brand-name{font-size:18px}.brand svg{width:22px;height:22px}.by{font-size:13px}}
@media(max-width:360px){.brand-name{font-size:16px}}

/* ---- 2026-10-31 使用者體驗優化（第五版） ---- */
/* 三個用途改成 h2（標題層級不跳級），外觀維持原本 */
.uses h2{font-size:22px;margin:4px 0 6px;line-height:1.4}
@media(max-width:640px){.uses h2{font-size:19px;margin:0}}
/* 搜尋建議：提示列、列出全部 */
.suggest .sg-msg{padding:10px 12px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.suggest .sg-msg a{color:var(--ink);font-weight:600}
.suggest li[aria-selected=true] a{background:var(--paper-2);outline:2px solid var(--ink);outline-offset:-2px}
.suggest .sg-all button{width:100%;min-height:44px;border:0;border-top:1px solid var(--rule);background:none;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;text-align:left;padding:8px 12px}
.suggest .sg-all button:hover{background:var(--paper-2)}
/* 當季：一進來就看到數量與「列出全部」 */
.mcount{margin:0 0 var(--s2);font-size:16px}
.mcount b{font-family:var(--serif);font-size:20px;margin-right:2px}
.mcount a{display:inline-flex;align-items:center;min-height:40px;margin-left:8px;font-weight:600}
@media(max-width:640px){.mcount a{margin-left:0;display:flex}}
/* 搜尋與篩選的「清除」按鈕要好按 */
.count button{min-height:40px;padding:0 4px 0 10px}
/* 超寬照片已重新裁切，不再四周留白，讓魚盡量大 */
.card .ph.wide img,.vs .ph.wide img,.quiz .ph.wide img,.ph.wide img{padding:0!important}
/* 單種頁：麵包屑改成 nav、相似魚縮圖、查另一種魚 */
nav.crumb{font-size:14px;color:var(--ink-2);padding-top:var(--s3)}
.related{padding:18px 20px}
.related h2{font-size:22px!important;margin-bottom:6px!important}
.related p{margin:0}
.sibs{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.sibs a{display:block;text-decoration:none;border-radius:4px}
.sibs .ph{aspect-ratio:3/2;background:var(--mat);border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sibs .ph img{width:100%;height:100%;object-fit:cover}
.sibs .ph.spec img,.sibs .ph.wide img,.sibs .ph.draw img{object-fit:contain}
.sibs .ph.spec img{mix-blend-mode:multiply;padding:5%}
.sibs b{display:block;font-family:var(--serif);font-size:17px;margin-top:6px}
.sibs a:hover b{text-decoration:underline;text-underline-offset:.2em}
.mini-search{border-top:1px solid var(--rule);padding:var(--s3) 0 0;margin-top:var(--s2);max-width:520px}
.mini-search label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:6px}
.mini-row{display:flex;border:1.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.mini-row input{flex:1;min-width:0;border:0;background:transparent;padding:10px 6px 10px 18px;font:inherit;font-size:16px;color:var(--ink)}
.mini-row input:focus{outline:none}
.mini-row:focus-within{box-shadow:0 0 0 3px rgba(31,42,68,.25)}
.mini-row button{border:0;background:var(--ink);color:#fff;font:inherit;font-weight:600;padding:0 18px;min-height:44px;cursor:pointer}
.mini-row input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sec .mini-search{margin-top:var(--s4)}
/* 照片上的辨識重點 */
.sp-plate .img:has(.anno){display:block;min-height:0}
.anno{position:relative;width:100%;margin:0 auto}
.anno img{width:100%;height:100%!important;max-height:none!important;object-fit:cover!important;padding:0!important}
.anno-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.anno-svg path{fill:none;stroke:#fff;stroke-width:5;stroke-dasharray:2 9;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
.anno-svg circle{fill:none;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
.anno-tag{position:absolute;margin:0;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.4;font-weight:600;padding:5px 10px;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.25);white-space:nowrap;max-width:none}
@media(max-width:480px){.anno-tag{font-size:12.5px;padding:3px 7px}}
/* 易混淆：頁首跳組 */
.jump ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--rule-2);border-radius:999px;text-decoration:none;font-size:15px;background:var(--paper)}
.jump a:hover{border-color:var(--ink)}
.cmp{scroll-margin-top:60px}
/* 小測驗：進度、成績頁 */
.qprog{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);margin:0 0 10px}
.qtrack{flex:1;height:4px;background:var(--rule);border-radius:2px;overflow:hidden}
.qtrack i{display:block;height:100%;width:0;background:var(--ink);transition:width .3s ease}
.opts button{display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.opts .k{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--lat);font-weight:400;font-size:13px;color:var(--ink-2)}
.opts button.right::after{content:"✓";position:absolute;right:14px;font-family:var(--sans);font-size:18px;color:#3a5a1f}
.opts button.wrong::after{content:"✕";position:absolute;right:14px;font-family:var(--sans);font-size:16px;color:#8a2f17}
.btn:disabled{opacity:.35;cursor:default}
.qkeys{margin-top:var(--s2);font-size:13px}
@media(hover:none){.qkeys,.opts .k{display:none}}
.qsum{padding:var(--s2) 0}
.qsum-score{font-family:var(--serif);font-size:22px;margin:4px 0 6px}
.qsum-score b{font-size:64px;line-height:1;margin-right:6px}
.qsum-h{margin:var(--s3) 0 8px;font-weight:600}
.qmiss{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.qmiss a{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.qmiss img{width:96px;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:2px;background:var(--mat)}
.qmiss b{font-family:var(--serif);font-size:19px;display:block}
.qmiss small{display:block;font-size:14px;color:var(--ink-2);line-height:1.6}
.qsum-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s3)}
.qsum-act .btn{min-height:44px}
/* 焦點：深色按鈕上看得到 */
.btn:focus-visible,.search button:focus-visible,.mini-row button:focus-visible,.chip[aria-pressed=true]:focus-visible,.seg button[aria-pressed=true]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.card:hover .ph img{transform:none}.qtrack i{transition:none}}
/* 資料卡的來源連結各占一行（第二輪把它改成 inline-block 後擠在同一行） */
.sp-body .src a{display:block;width:fit-content}
.quiz .qcr a{display:inline-block;min-height:26px;line-height:26px}
/* 手機：測驗照片矮一點，四個選項、解說、下一題盡量留在同一屏；易混淆跳組改橫向滑動 */
@media(max-width:640px){
 .quiz{padding-top:var(--s2)}
 .quiz .ph{aspect-ratio:16/9;max-height:30vh;width:100%}
 .quiz h1{margin-bottom:12px!important}
 .opts button{min-height:52px;font-size:18px}
 .jump ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:2px var(--gutter)}
 .jump ul::-webkit-scrollbar{display:none}
 .jump li{flex:none}
}

/* ---- L2 第一輪修正（2026-10-31） ---- */
/* 阻擋 1：寬幅照片框後墊同一張圖，放大、模糊 20px、調暗 8%；前景照片維持 contain，魚身不裁 */
.ph.wide{position:relative;isolation:isolate}
.ph.wide::before{content:"";position:absolute;inset:-24px;background:var(--bg,none) center/cover no-repeat;filter:blur(20px) brightness(.92);z-index:-1;transform:scale(1.1)}
.ph.wide img{position:relative;object-fit:contain!important;padding:0!important}
/* 阻擋 2：新增縮圖的出處（13px） */
.cr-s{display:block;font-size:13px;line-height:1.5;color:var(--ink-2);letter-spacing:0;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qmiss .cr-s{font-size:13px;margin-top:4px}
/* 測驗成績頁：標本照、插畫完整顯示 */
.qmiss img.fit{object-fit:contain;padding:3px}
.qmiss img.spec{mix-blend-mode:multiply}
/* 標註：線寬不隨縮放變細，手機至少 2px；竹筴魚加引線 */
.anno-svg path,.anno-svg circle,.anno-svg line{vector-effect:non-scaling-stroke}
.anno-svg path{stroke-width:2.5;stroke-dasharray:1 6}
.anno-svg circle{stroke-width:2.5}
.anno-svg line.lead{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
@media(max-width:480px){.anno-tag{font-size:13px;padding:3px 7px}}
/* 手機名單檢視：寬幅縮圖改 2:1 */
.view-list .cards .card:has(.ph.wide){grid-template-columns:min(34vw,132px) minmax(0,1fr)}
.view-list .card .ph.wide{width:min(34vw,132px)!important;aspect-ratio:2/1!important}
/* 相似魚：只有一種時放大；與下方資料表的距離收到 32px */
.sibs:has(li:only-child){grid-template-columns:minmax(0,280px)}
@media(max-width:900px){.sp-main section:last-child{margin-bottom:0}}

/* ---- L2 第二輪修正（2026-10-31） ---- */
/* 阻擋 A：出處一律可折行，不再用省略號截斷；折行後高度自動 */
.cr,.cr-s,.view-list .card .cr,.suggest .sgcr,.quiz .qcr a,.credit a,.plate .credit.short a{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-height:auto!important;height:auto!important}
.cr{display:block;line-height:1.5;padding:4px 0;overflow-wrap:anywhere}
.cr-s{overflow-wrap:anywhere}
.credit a,.quiz .qcr a{display:inline;line-height:1.6}
.plate .credit.short a{display:inline;line-height:1.6}
.vs .cr{max-width:100%}
/* 阻擋 B：名單縮圖全部同寬 112px、3:2，每列文字與旺季色塊對齊（取消寬幅例外） */
.view-list .cards .card,.view-list .cards .card.lead,.view-list .cards .card.lead.r,.view-list .cards .card.w12,.view-list .cards .card.mtail,.view-list .cards .card:has(.ph.wide){grid-template-columns:112px minmax(0,1fr)!important}
.view-list .card .ph,.view-list .cards .card.lead .ph,.view-list .card .ph.wide{width:112px!important;aspect-ratio:3/2!important;min-height:0!important}
/* 順手：寬幅照片與模糊底圖之間的硬邊，用上下漸層遮罩融開；底圖疊一層 10% 紙色 */
.ph.wide img{-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.ph.wide::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.1;z-index:-1}
/* 遮罩要落在照片本身：寬幅照片的 img 框改成貼齊照片（寬滿、高自動、垂直置中），漸層才會蓋在照片上下緣 */
.ph.wide{display:flex!important;align-items:center;justify-content:center}
.ph.wide img{width:100%!important;height:auto!important;max-height:100%}