
:root{--bg:#F5F1EA;--card:#fff;--ink:#1F1B16;--muted:#6B645B;--t2:#4A443C;--line:#DDD5C8;--amber:#C2710C;--amber-d:#94520A;
--purple:#6A4C9C;--purple-d:#4B3378;--gray:#8C857B;--track:#E9E4DA;--soft-a:#FAEFDD;--soft-p:#EFE9F7}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans TC','PingFang TC',sans-serif;line-height:1.6}
a{color:inherit}a:hover{color:var(--amber-d)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.banner{background:#F6E3C8;color:#5C3303;font-size:13px;text-align:center;padding:9px 16px}
header.top{background:#FBF8F3;border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:stretch;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:'Noto Serif TC',serif;font-weight:700;font-size:24px}
.brand img{width:40px;height:40px;border-radius:8px;object-fit:cover}
nav{display:flex;gap:24px;font-size:15px;flex-wrap:wrap}
nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--t2);border-bottom:3px solid transparent}
nav a.on{color:var(--ink);font-weight:700;border-color:var(--amber)}
main{padding:48px 0 32px}
h1{font-family:'Noto Serif TC',serif;font-weight:700;font-size:40px;line-height:1.3;margin:0}
h2{font-family:'Noto Serif TC',serif;font-weight:700;font-size:22px;margin:0}
.eyebrow{font-size:13px;letter-spacing:.14em;color:var(--muted)}
.lede{font-size:17px;line-height:1.75;color:var(--t2);margin:12px 0 0;max-width:820px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:48px}
.hero img{flex:none;width:260px;height:260px;border-radius:16px;object-fit:cover}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-top:14px}
.legend{display:flex;align-items:center;gap:32px;margin-top:32px}
.seg{display:flex;height:10px;border-radius:5px;overflow:hidden}
.seg i{display:block}
.small{font-size:13px;color:var(--muted)}
.evt{display:block;text-decoration:none;color:inherit;margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.evt:hover{border-color:var(--amber)}
.evt-h{display:flex;align-items:baseline;gap:16px}
.evt-h b{flex:1;font-family:'Noto Serif TC',serif;font-size:21px;line-height:1.45}
.cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:18px}
.cell{font-size:13px;color:var(--muted)}
.cell .n{margin-bottom:6px}.cell .v{font-size:14px;color:var(--ink)}.cell.off{opacity:.5}
.trk{position:relative;height:9px;border-radius:5px;background:var(--track)}
.trk i{position:absolute;top:0;bottom:0;border-radius:5px}
.trk u{position:absolute;top:0;bottom:0;width:2px;left:calc(50% - 1px);background:#B8B0A2}
.num{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:16px}
.sq{display:inline-block;width:10px;height:10px;border:1.5px solid var(--gray);margin-right:6px;vertical-align:-1px}
.chip{display:inline-block;padding:3px 10px;border:1px solid #BFB6A6;border-radius:14px;font-size:13px;color:var(--ink)}
.chip.big{padding:7px 16px;border-color:var(--gray);font-size:15px;font-weight:500;border-radius:20px}
.row{display:grid;grid-template-columns:110px minmax(0,1fr) 250px 250px;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 24px;margin-top:12px}
.row.l{grid-template-columns:110px minmax(0,1fr) 190px 190px}
.row .t{font-size:18px;font-weight:500;line-height:1.5;text-decoration:none}
.row .t:hover{text-decoration:underline}
.axis{position:relative;height:130px;margin-top:14px}
.axis>i{position:absolute;top:44px;height:42px}
.axis .d{position:absolute;top:57px;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:2px solid #fff}
.axis .l{position:absolute;transform:translateX(-50%);white-space:nowrap;font-size:13px}
.strip{display:flex;height:42px;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin-top:14px}
.strip div{display:flex;align-items:center;justify-content:center;font-size:14px}
.mrow{display:grid;grid-template-columns:140px minmax(0,1fr) 300px;gap:28px;align-items:center}
.steps li{margin-bottom:10px}
/* 指數 */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 22px}
.tile .big{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:38px;line-height:1.2;margin:6px 0}
.ck{display:inline-block;padding:2px 9px;border:1px solid var(--ink);border-radius:12px;font-size:12px;margin:0 6px 6px 0}
.ck.no{border-style:dashed;border-color:#B8B0A2;color:var(--muted)}
.pcols{display:flex;gap:3px;align-items:flex-end;margin-top:14px}
.pc{flex:1;min-width:0;text-align:center}.pcs{display:flex;flex-direction:column;height:180px}.pcs i{display:block}
.pi{font-family:'IBM Plex Mono',monospace;font-size:11px;height:18px;line-height:18px;margin-top:4px}.pi.hot{background:#F6E3C8;font-weight:700}
.pd{font-size:10px;color:var(--muted);height:14px;white-space:nowrap;overflow:visible}
.key i{display:inline-block;width:14px;height:14px;margin:0 6px -2px 14px}
footer{padding:24px 0 48px;font-size:13px;line-height:1.7;color:var(--muted)}
.two{display:flex;gap:56px}.two>div:first-child{flex:1;max-width:780px}.two aside{flex:none;width:300px}
.two aside img{width:300px;height:300px;border-radius:16px;object-fit:cover;display:block;margin-bottom:20px}
@media(max-width:860px){
h1{font-size:28px}.hero{flex-direction:column;align-items:flex-start;gap:20px}.hero img{width:100%;height:auto;max-height:260px}
.legend{flex-direction:column;align-items:stretch;gap:12px}.cells{grid-template-columns:repeat(2,minmax(0,1fr))}
.row,.row.l,.mrow{grid-template-columns:1fr;gap:10px}.evt-h{flex-direction:column;gap:6px}
.two{flex-direction:column;gap:24px}.two aside{width:auto}.two aside img{width:100%;height:auto;max-height:280px}
main{padding-top:28px}nav{gap:16px}.cell.off{display:none}.axis .l{display:none}.tiles{grid-template-columns:1fr}.pd{display:none}}
