:root {
  --bg: #f6f1e7;
  --surface: #ffffff;
  --ink: #17232c;
  --muted: #66706a;
  --primary: #315f8f;
  --accent: #536b4f;
  --accent2: #94743a;
  --line: #cad6d4;
  --shadow: 0 18px 45px rgba(15, 20, 20, .10);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif; line-height:1.78; letter-spacing:0; }
a { color:var(--accent); text-decoration-thickness:.08em; text-underline-offset:.18em; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:12px clamp(18px,4vw,54px); background:color-mix(in srgb, var(--bg) 92%, white 8%); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.brand { font-weight:800; color:var(--primary); white-space:nowrap; font-size:16px; }
nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
nav a { display:inline-flex; align-items:center; min-height:36px; padding:6px 12px; border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.55); border-radius:999px; text-decoration:none; font-size:14px; }
nav a[aria-current="page"], nav a:hover { background:var(--primary); color:white; border-color:var(--primary); }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:clamp(24px,4vw,52px); align-items:center; padding:clamp(36px,6vw,84px) clamp(20px,6vw,78px) clamp(28px,5vw,58px); }
.hero h1 { margin:0; font-family:"Noto Serif TC", "PMingLiU", serif; font-size:clamp(34px,5.4vw,74px); line-height:1.08; color:var(--primary); letter-spacing:0; }
.kicker { color:var(--accent); font-weight:800; margin:0 0 16px; }
.subtitle { max-width:760px; font-size:clamp(17px,2vw,22px); color:var(--muted); margin:18px 0 0; }
.hero-visual img { width:100%; border-radius:8px; box-shadow:var(--shadow); display:block; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 16px; border-radius:999px; background:var(--primary); color:#fff; text-decoration:none; font-weight:700; }
.button.secondary { background:transparent; color:var(--primary); border:1px solid var(--primary); }
.index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:0 clamp(20px,6vw,78px) 54px; }
.index-panel { border-top:4px solid var(--accent); background:rgba(255,255,255,.72); padding:22px; border-radius:8px; box-shadow:0 8px 24px rgba(20,20,20,.06); }
.index-panel h2 { margin:0 0 8px; font-size:22px; color:var(--primary); }
.shell { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:42px; padding:36px clamp(20px,5vw,72px) 80px; align-items:start; }
.article { max-width:980px; background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:8px; padding:clamp(24px,5vw,58px); box-shadow:var(--shadow); }
.article h1 { font-family:"Noto Serif TC", "PMingLiU", serif; font-size:clamp(32px,4.6vw,60px); line-height:1.15; color:var(--primary); margin:0 0 24px; }
.article h2 { font-family:"Noto Serif TC", "PMingLiU", serif; color:var(--primary); font-size:clamp(26px,3.2vw,38px); line-height:1.25; margin:48px 0 18px; padding-top:8px; border-top:2px solid var(--line); }
.article h3 { color:var(--accent); font-size:22px; line-height:1.35; margin:34px 0 12px; }
.article p { margin:0 0 18px; font-size:18px; }
.article ul, .article ol { padding-left:1.7rem; margin:0 0 24px; }
.article li { margin:0 0 12px; padding-left:.35rem; font-size:18px; display:list-item; }
.article ol { list-style:decimal outside; }
.article ul { list-style:disc outside; }
.side { position:sticky; top:88px; background:rgba(255,255,255,.68); border:1px solid var(--line); border-radius:8px; padding:20px; box-shadow:0 10px 28px rgba(20,20,20,.08); }
.side h2 { font-size:17px; margin:0 0 12px; color:var(--primary); }
.side p, .side li { font-size:14px; line-height:1.65; color:var(--muted); }
.side ul { margin:0 0 18px; padding-left:1.1rem; }
.case-figure { margin:28px 0 30px; border-radius:8px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 12px 28px rgba(20,20,20,.08); }
.case-figure img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.case-figure figcaption { padding:12px 16px; color:var(--muted); font-size:14px; line-height:1.55; background:color-mix(in srgb, var(--bg) 75%, white 25%); }
.table-wrap { overflow-x:auto; margin:24px 0 30px; border:1px solid var(--line); border-radius:8px; background:#fff; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th, td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; font-size:15px; line-height:1.58; }
th { background:color-mix(in srgb, var(--primary) 12%, white 88%); color:var(--primary); font-weight:800; }
blockquote { border-left:4px solid var(--accent2); margin:24px 0; padding:12px 18px; background:rgba(255,255,255,.58); color:var(--muted); }
.references li { margin-bottom:16px; }
.redirect-note { max-width:760px; margin:72px auto; padding:30px; background:rgba(255,255,255,.76); border:1px solid var(--line); border-radius:8px; }
.footer { padding:28px clamp(20px,5vw,72px); color:var(--muted); border-top:1px solid var(--line); font-size:13px; }
@media (max-width:980px) {
  .hero { grid-template-columns:1fr; }
  .index-grid { grid-template-columns:1fr; }
  .shell { grid-template-columns:1fr; }
  .side { position:static; }
  nav { justify-content:flex-start; }
}
@media print {
  .topbar, .side, .hero-actions { display:none; }
  body { background:white; }
  .shell, .hero { display:block; padding:0; }
  .article { box-shadow:none; border:0; max-width:none; padding:28px; }
  a { color:var(--ink); text-decoration:none; }
}