
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#F1F3F7; --text:#161A22; --muted:#6B7280;
  --border:#E4E7ED; --accent:#3B5BDB; --accent-soft:#EDF1FF;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --radius:14px; --maxw:1120px; --code-bg:#111827; --code-fg:#D1E7FF;
}
[data-theme="dark"]{
  --bg:#0E1117; --surface:#171B24; --surface-2:#1E2430; --text:#EEF1F6; --muted:#9AA4B2;
  --border:#2A3140; --accent:#8AA2FF; --accent-soft:#222B45;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --code-bg:#0B0F17; --code-fg:#C7DDFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.nav{display:flex;align-items:center;gap:24px;padding:18px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.logo .mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:15px}
.nav-links{display:flex;gap:22px;font-size:14px;font-weight:600;color:var(--muted);flex:1;flex-wrap:wrap}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-tools{display:flex;gap:10px;align-items:center}
.search-open{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:13px;color:var(--muted);min-width:168px;text-align:left}
.icon-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);display:grid;place-items:center;font-size:15px}
.hero{padding:52px 0 40px;border-bottom:1px solid var(--border)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.hero h1{font-size:40px;line-height:1.3;letter-spacing:-.03em;margin:14px 0 14px;max-width:760px}
.hero p{color:var(--muted);font-size:16px;max-width:620px}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:700;border:1px solid transparent;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{border-color:var(--border);background:var(--surface);color:var(--text)}
.chips{display:flex;gap:10px;padding:22px 0;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.chip{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:.2s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--text);color:var(--surface);border-color:var(--text)}
.chip .n{opacity:.65;margin-left:6px;font-size:12px}
.grid{display:grid;grid-template-columns:1fr 300px;gap:32px;padding:32px 0 56px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.sec-head h4{font-size:19px;letter-spacing:-.01em}
.sec-head span{font-size:13px;color:var(--muted)}
.feature{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:30px}
.feature .body{padding:28px}
.feature h5{font-size:22px;line-height:1.45;letter-spacing:-.02em;margin-bottom:10px}
.feature p{color:var(--muted);font-size:14px}
.feature .visual{background:linear-gradient(135deg,var(--accent-soft),var(--surface-2));display:grid;place-items:center;min-height:210px;position:relative;overflow:hidden}
.feature .visual::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid var(--accent);opacity:.25}
.feature .visual span{font-size:86px;font-weight:800;color:var(--accent);opacity:.35}
.feature .visual.has-img{padding:0}
.feature .visual.has-img::before,.feature .visual.has-img>span{display:none}
.feature .visual img{display:none}
.feature .visual.has-img img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--border);transition:.2s}
.card:hover h5{color:var(--accent)}
.card:last-child{border-bottom:0}
.card .thumb{width:96px;height:76px;border-radius:10px;background:var(--surface-2);flex:none;display:grid;place-items:center;font-size:20px;font-weight:800}
.card .thumb.thumb-img{position:relative;overflow:hidden}
.card .thumb.thumb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .thumb.thumb-img .thumb-fallback{display:none}
.card .thumb.thumb-img.img-failed img{display:none}
.card .thumb.thumb-img.img-failed .thumb-fallback{display:grid;place-items:center;width:100%;height:100%}
.card-body h5{font-size:17px;line-height:1.5;letter-spacing:-.01em;margin-bottom:6px;transition:.2s}
.card-body p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px;letter-spacing:.02em;white-space:nowrap}
.side-card{border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:18px;background:var(--surface)}
.side-card h6{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:14px;text-transform:uppercase}
.side-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:14px;border-bottom:1px solid var(--border)}
.side-row:last-child{border:0}
.side-row .num{font-size:12px;color:var(--muted);background:var(--surface-2);padding:2px 8px;border-radius:999px}
.tagcloud{display:flex;gap:8px;flex-wrap:wrap}
.tagcloud span,.tagcloud a{font-size:12px;padding:5px 10px;background:var(--surface-2);border-radius:7px;color:var(--muted)}
.cat-hero{padding:44px 0;border-bottom:1px solid var(--border);background:var(--surface-2)}
.cat-hero .inner{padding:0 24px}
.cat-hero h1{font-size:32px;letter-spacing:-.02em;margin:10px 0}
.cat-hero p{color:var(--muted);font-size:15px;max-width:640px}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.breadcrumb a:hover{color:var(--accent)}
.reading-bar{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:30;width:0;transition:width .1s}
.article{max-width:720px;margin:0 auto;padding:40px 24px 60px}
.article h1{font-size:36px;line-height:1.35;letter-spacing:-.025em;margin:16px 0 18px}
.lead{font-size:18px;color:var(--muted);line-height:1.85;border-left:3px solid var(--accent);padding-left:18px;margin-bottom:32px}
.article h2{font-size:22px;margin:36px 0 12px;letter-spacing:-.01em}
.article h3{font-size:18px;margin:26px 0 10px}
.article p{font-size:16px;margin-bottom:18px}
.article hr{border:0;border-top:1px solid var(--border);margin:30px 0}
.article figure{margin:26px 0;text-align:center}
.article figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:var(--surface-2)}
.article figcaption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.6}
.article img{max-width:100%;height:auto;border-radius:10px}
.chart-wrap{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:14px 10px 8px;margin:26px 0;overflow-x:auto}
svg.chart{display:block;width:100%;height:auto;max-width:680px;margin:0 auto;color:var(--text)}
.article table{border-collapse:collapse;width:100%;margin:22px 0;font-size:14px}
.article th,.article td{border:1px solid var(--border);padding:9px 12px;text-align:left}
.article th{background:var(--surface-2);font-weight:700}
.event-note{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;margin:0 0 18px}
.article ul{margin:0 0 18px 22px}
.article li{margin-bottom:8px}
.article blockquote{background:var(--surface-2);border-radius:12px;padding:18px 22px;color:var(--muted);font-size:15px;margin:24px 0}
.article a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.code{background:var(--code-bg);color:var(--code-fg);border-radius:12px;padding:16px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.8;overflow-x:auto;margin:20px 0}
.inline-code{background:var(--surface-2);border-radius:5px;padding:2px 6px;font-size:.9em;font-family:ui-monospace,Menlo,monospace}
.source-box{background:var(--accent-soft);border:1px solid var(--border);border-radius:12px;padding:16px 20px;font-size:14px;margin:30px 0;word-break:break-all}
.article-footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--border)}
.related{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.related a{border:1px solid var(--border);border-radius:12px;padding:16px;font-size:14px;font-weight:600;background:var(--surface)}
.related a:hover{border-color:var(--accent)}
.archive-month{margin-bottom:28px}
.archive-month h4{font-size:18px;margin-bottom:10px}
.archive-month a{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;align-items:baseline}
.archive-month a span{color:var(--muted);font-size:12px;flex:none}
.pager{display:flex;gap:8px;margin-top:26px;align-items:center;flex-wrap:wrap}
.pager span{color:var(--muted);font-size:13px;margin-left:8px}
footer.site{border-top:1px solid var(--border);padding:26px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.empty{color:var(--muted);padding:40px 0;font-size:15px}
/* ── 關於頁 ── */
.about-hero{padding:52px 0 36px;border-bottom:1px solid var(--border)}
.about-hero h1{font-size:38px;line-height:1.3;letter-spacing:-.03em;margin:14px 0 10px}
.about-hero p{color:var(--muted);font-size:16px}
.about-grid{display:grid;grid-template-columns:320px 1fr;gap:44px;padding:40px 0 60px;align-items:start}
.about-media{position:sticky;top:24px}
.about-portrait-fig{margin:0}
.about-portrait-fig img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--surface-2)}
.about-portrait-fig figcaption{text-align:center;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-top:10px}
.about-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.about-gallery img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);filter:saturate(.85);transition:filter .2s}
.about-gallery img:hover{filter:saturate(1)}
.about-name{font-size:34px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.about-name small{font-size:16px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:3px 12px;border-radius:999px;letter-spacing:0}
.about-role{color:var(--muted);font-size:14px;margin-top:6px}
.about-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0}
.about-fact{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.about-fact b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:5px}
.about-fact span{font-size:15px;font-weight:700}
.about-group{margin-bottom:16px}
.about-group h6{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);margin-bottom:9px;text-transform:uppercase}
.about-chips{display:flex;gap:8px;flex-wrap:wrap}
.about-chip{font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--border)}
.about-chip.soft{background:var(--surface-2);color:var(--muted)}
.about-prose{margin-top:28px}
.about-prose p{font-size:16px;margin-bottom:16px;line-height:1.95}
.about-note{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:18px 22px;font-size:14px;color:var(--muted);line-height:1.85;margin:28px 0}
.about-disclaimer{font-size:13px;color:var(--muted);border-top:1px solid var(--border);padding-top:20px;margin-top:8px;line-height:1.8}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:28px}.about-media{position:static;max-width:340px}.about-hero h1{font-size:30px}.about-name{font-size:28px}}
#searchOverlay{position:fixed;inset:0;background:rgba(10,14,22,.55);backdrop-filter:blur(4px);z-index:50;display:none;padding:80px 20px;justify-content:center;align-items:flex-start}
#searchOverlay.on{display:flex}
.search-box{width:min(640px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.search-box input{width:100%;border:0;outline:0;background:var(--surface);color:var(--text);padding:18px 22px;font-size:16px;border-bottom:1px solid var(--border)}
.search-results{max-height:420px;overflow:auto;padding:8px}
.search-results a{display:block;padding:12px 14px;border-radius:10px;font-size:14px}
.search-results a:hover{background:var(--surface-2)}
.search-results small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
@media(max-width:860px){.grid{grid-template-columns:1fr}.hero h1{font-size:30px}.nav-links{order:3;width:100%}.article h1{font-size:28px}}
@media(max-width:700px){.feature{grid-template-columns:1fr}.feature .visual{min-height:140px}.related{grid-template-columns:1fr}.card .thumb{width:72px;height:64px}.wrap{padding:0 18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.btn:hover{transform:none}}
/* ── 自動視覺：封面 / 重點卡 / 表格圖表 ── */
.article-cover{margin:24px 0 30px;text-align:center}
.article-cover img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--surface-2)}
.article-cover figcaption{font-size:12px;color:var(--muted);margin-top:9px}
.article ul.key-points{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 28px;counter-reset:kp;padding:0}
.article ul.key-points li{counter-increment:kp;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:16px 16px 16px 46px;position:relative;font-size:14px;line-height:1.75;margin:0;box-shadow:var(--shadow)}
.article ul.key-points li::before{content:counter(kp);position:absolute;left:14px;top:15px;width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800;display:grid;place-items:center}
.auto-chart-note{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin:22px 0 -16px}
.article table tbody tr:nth-child(even){background:var(--surface-2)}
.article table tbody tr:hover{background:var(--accent-soft)}
.article table.kp-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;border:0;margin:20px 0 30px}
.article table.kp-table thead{display:none}
.article table.kp-table tbody{display:contents}
.article table.kp-table tr{display:block;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.article table.kp-table tr:hover{background:var(--surface)}
.article table.kp-table td{display:block;border:0;padding:2px 0;font-size:14px;line-height:1.7}
.article table.kp-table td:first-child{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.card .thumb.auto-cover img{object-fit:cover}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

:root{
--cat-ai:#3B5BDB;--cat-ai-soft:#EDF1FF;
--cat-security:#C2410C;--cat-security-soft:#FFF1E8;
}
[data-theme="dark"]{
--cat-ai:#8AA2FF;--cat-ai-soft:#222B45;
--cat-security:#FB923C;--cat-security-soft:#3A271A;
}
.tag.cat-ai,.thumb.cat-ai{background:var(--cat-ai-soft)!important;color:var(--cat-ai)!important;}
.tag.cat-security,.thumb.cat-security{background:var(--cat-security-soft)!important;color:var(--cat-security)!important;}
