/* Findings：八個研究步驟的說明頁，學術海報風。
   字體：中文標楷體、英文與數字 Times New Roman（沒有標楷體的電腦退回霞鶩文楷 TC）。
   版面：大標題 → 數據條 → 全寬主圖 → 編號方塊組成的格線。方塊各自完整，
   段落不會跨欄斷開；閱讀順序固定為由左而右、由上而下。 */
:root{
  --paper:#ffffff; --ink:#0d1214; --ink-2:#1c2427; --sub:#3c4a4f; --mute:#74848a;
  --rule:#d4dbde; --rule-2:#e9eef0; --tint:#f3f7f7;
  --teal:#0e8c84; --teal-d:#0a6b65; --teal-l:#e1f1ef; --amber:#c27a10;
  --font:"Times New Roman",Times,"BiauKai","DFKai-SB","標楷體","TW-Kai","LXGW WenKai TC",serif;
}
*{box-sizing:border-box}
html{background:var(--paper)}
/* 標楷體與 Times 都只有細的一種字重，用細描邊把筆畫加粗，字才有份量 */
body{margin:0;background:var(--paper);color:var(--ink);font:400 17.5px/1.68 var(--font);
  -webkit-text-stroke:.38px currentColor;text-rendering:optimizeLegibility}
h1,h2,.brand,.stat b,caption,thead th,figcaption b,.note b,.refs h3,strong{-webkit-text-stroke:.7px currentColor}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── 頂列 ── */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .in{max-width:1160px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:18px;height:60px}
.home{display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 11px;border:1px solid var(--rule);border-radius:999px;
  font:400 .9rem/1 var(--font);color:var(--ink);text-decoration:none;white-space:nowrap}
.home:hover{border-color:var(--teal);color:var(--teal)}
.brand{font:700 1.15rem/1 var(--font);text-decoration:none;white-space:nowrap}
.brand i{color:var(--teal);font-style:normal}
.steps{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.steps::-webkit-scrollbar{display:none}
.steps a{display:flex;align-items:baseline;gap:5px;padding:7px 10px;border-radius:7px;text-decoration:none;
  font:400 .92rem/1 var(--font);color:var(--sub);white-space:nowrap}
.steps a b{font-weight:400;font-size:.8rem;color:var(--mute)}
.steps a:hover{background:var(--tint);color:var(--ink)}
.steps a[aria-current]{background:var(--ink);color:#fff}
.steps a[aria-current] b{color:#9fd8d2}

/* ── 標題區 ── */
.sheet{max-width:1160px;margin:0 auto;padding:40px 28px 64px}
.kicker{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 .86rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.kicker span{color:var(--mute)}
h1{margin:.32em 0 0;font:700 clamp(2.4rem,4.8vw,4.3rem)/1.12 var(--font);letter-spacing:.01em;text-wrap:balance}
.lede{max-width:52em;margin:16px 0 0;font:400 1.14rem/1.72 var(--font);color:var(--ink-2);text-wrap:pretty}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat{padding:14px 18px 15px}
.stat:first-child{padding-left:0}
.stat + .stat{border-left:1px solid var(--rule)}
.stat b{display:block;font:700 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--font);font-variant-numeric:tabular-nums}
.stat b small{font-size:.55em;font-weight:400;color:var(--sub);margin-left:3px}
.stat span{display:block;margin-top:5px;font:400 .9rem/1.5 var(--font);color:var(--sub)}
.stat.key b{color:var(--teal)}

/* ── 全寬主圖 ── */
figure{margin:0}
figure img{display:block;width:100%;height:auto}
figcaption{margin-top:8px;font:400 .93rem/1.6 var(--font);color:var(--sub);text-wrap:pretty}
figcaption b{color:var(--ink);font-weight:700;margin-right:8px}
.lead{margin-top:24px;padding:18px 0 14px;border-bottom:1px solid var(--rule)}
.lead img{max-width:1120px;margin:0 auto}
.lead figcaption{max-width:1120px;margin:14px auto 0}

/* ── 方塊格線 ── */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 30px;margin-top:28px;align-items:start}
.panel{grid-column:span 12;border-top:2px solid var(--ink);padding-top:10px;min-width:0}
.s4{grid-column:span 4} .s5{grid-column:span 5} .s6{grid-column:span 6} .s7{grid-column:span 7} .s8{grid-column:span 8}
.panel h2{margin:0 0 8px;font:700 1.22rem/1.4 var(--font);display:flex;gap:12px;align-items:baseline}
.panel h2 em{font-style:normal;font-weight:400;font-size:.86rem;color:var(--teal);letter-spacing:.06em}
/* 不左右對齊：中文夾著長英文單字時，對齊會把字距拉得很開 */
.panel p{margin:0 0 .6em;text-align:left;line-break:strict;text-wrap:pretty}
.panel p:last-child{margin-bottom:0}
.panel strong{font-weight:700;color:var(--ink)}
.panel > figure, .panel > table, .panel > .eq, .panel > .note{margin-top:4px;margin-bottom:12px}
.panel > :last-child{margin-bottom:0}
.duo{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:26px;align-items:start}
.duo > div > :last-child{margin-bottom:0}
.duo > div > * + figure, .duo > div > * + table, .duo > div > * + .eq, .duo > div > * + .note{margin-top:16px}

/* 數學式 */
.eq{padding:8px 14px;background:var(--tint);border-left:3px solid var(--teal);
  font:italic 400 1.08rem/1.75 "Times New Roman",Times,serif;color:var(--ink);text-align:center;overflow-x:auto}
.eq .n{float:right;font-style:normal;font-size:.86rem;color:var(--mute)}
.eq sub,.eq sup{font-size:.7em}

/* 表 */
table{width:100%;border-collapse:collapse;font:400 .95rem/1.5 var(--font)}
caption{caption-side:top;text-align:left;font-weight:700;color:var(--ink);padding-bottom:6px}
th,td{padding:4px 8px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
thead th{border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ink);font-weight:700}
tbody tr:last-child td{border-bottom:1.5px solid var(--ink)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.hl td{background:var(--teal-l)}

/* 側註 */
.note{padding:9px 14px;border-left:3px solid var(--amber);background:#fdf7ec;font:400 .96rem/1.65 var(--font);color:var(--ink-2)}
.note b{color:var(--amber);font-weight:700}

/* ── 頁尾 ── */
.refs{margin-top:36px;padding-top:12px;border-top:3px solid var(--ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 40px;
  font:400 .9rem/1.6 var(--font);color:var(--sub)}
.refs h3{grid-column:1/-1;margin:0;font:700 .98rem/1 var(--font);color:var(--ink)}
.refs p{margin:0}

@media (max-width:980px){
  .s4,.s5,.s6,.s7,.s8{grid-column:span 12}
  .duo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){padding-left:0;border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--rule)}
  .refs{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .top .in{padding:0 16px;gap:10px} .brand{display:none}
  .sheet{padding:28px 16px 56px}
  .panel p{text-align:left}
}
@media print{ .top{position:static} 
/* 方塊裡的寬圖：兩段文字各自完整、左右並排，圖在下方橫跨整個方塊 */
.duo.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wfig{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2)}
.wfig img{max-width:1060px;margin:0 auto}
.wfig figcaption{max-width:1060px;margin:10px auto 0}
@media (max-width:980px){ .duo.even{grid-template-columns:1fr} }
@media (max-width:720px){ .grid{grid-template-columns:minmax(0,1fr);gap:34px} .grid > .panel{grid-column:1/-1} }