/* ============================================================
   style.css — 世界建築史 · Architecture Atlas
   6 主題狀態（3 組合 × 日夜）、RWD、Breathe Clamp、全部 UI 元件
   ============================================================ */
:root{
  /* 主題變數由 theme.js 依 combo+mode 注入 */
  --bg:#f5efe3; --surface:#fffdf7; --surface2:#efe6d2;
  --ink:#2b2418; --ink2:#7a6a50; --accent:#8b5a2b; --accent2:#b8860b;
  --border:rgba(120,90,40,.18);
  --fs-base:16px;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --shadow-lg:0 14px 40px rgba(0,0,0,.14);
  --serif:'Noto Serif TC',serif,'Microsoft JhengHei',system-ui,sans-serif;
  --sans:'Noto Sans TC',sans-serif,'Microsoft JhengHei',system-ui;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--serif);background:var(--bg);color:var(--ink);line-height:1.85;font-size:var(--fs-base);transition:background .35s,color .35s}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---- 密度（舒適/緊湊）---- */
[data-density="compact"]{ --pad-lg:14px; --pad-md:10px; --gap:10px; --card-pad:12px; --card-img-h:110px; }
[data-density="comfort"]{ --pad-lg:26px; --pad-md:18px; --gap:18px; --card-pad:18px; --card-img-h:150px; }

/* ============================================================
   Header / Nav
   ============================================================ */
.header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{max-width:1280px;margin:0 auto;padding:10px var(--pad-lg);display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;color:var(--accent);white-space:nowrap}
.logo svg{width:26px;height:26px}
.logo small{font-weight:400;color:var(--ink2);font-size:11px;letter-spacing:.5px}
.nav-spacer{flex:1}
.nav-tools{display:flex;align-items:center;gap:6px}
.icon-btn{width:38px;height:38px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:.2s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 閱讀進度條 */
.progress-bar{position:absolute;left:0;bottom:-1px;height:3px;background:var(--accent2);width:0;transition:width .1s}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#6b4a2a 0%,#c9a06b 46%,#ffffff 100%);color:#111}
.hero-inner{max-width:1280px;margin:0 auto;padding:var(--pad-lg) var(--pad-lg) calc(var(--pad-lg)*1.4);position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.3);color:#2b1f12;border:1px solid rgba(43,31,18,.35);padding:5px 14px;border-radius:999px;font-size:12px;font-weight:700;font-family:var(--sans)}
.hero h1{font-size:clamp(28px,5vw,46px);margin:18px 0 10px;letter-spacing:1px;line-height:1.25;color:#111}
.hero h1 span{color:#6b4a2a}
.hero p{color:#2b2b2b;max-width:640px;font-size:16px}
.hero-stats{display:flex;gap:clamp(16px,4vw,40px);margin-top:26px;flex-wrap:wrap}
.hero-stat b{font-size:clamp(22px,3.5vw,34px);color:#6b4a2a;display:block;font-family:var(--sans)}
.hero-stat span{font-size:12px;color:#4a4a4a;font-family:var(--sans)}

/* ============================================================
   Layout: Sidebar + Main
   ============================================================ */
.layout{max-width:1280px;margin:0 auto;padding:var(--pad-md) var(--pad-lg);display:grid;grid-template-columns:250px 1fr;gap:var(--gap);align-items:start}
.sidebar{position:sticky;top:78px;display:flex;flex-direction:column;gap:16px}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--card-pad);box-shadow:var(--shadow)}
.side-card h3{font-size:13px;color:var(--accent);font-family:var(--sans);display:flex;align-items:center;gap:8px;margin-bottom:12px;letter-spacing:.5px}
.side-card h3 svg{width:16px;height:16px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav button{display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--ink2);padding:8px 10px;border-radius:8px;font-size:14px;text-align:left;width:100%;transition:.15s}
.side-nav button:hover{background:var(--surface2);color:var(--accent)}
.side-nav button.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:700}
.side-nav button svg{width:16px;height:16px;flex:none}
.side-nav .side-link{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:8px 10px;border-radius:8px;font-size:14px;text-align:left;width:100%;text-decoration:none;transition:.15s}
.side-nav .side-link:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent)}
.side-nav .side-link svg{width:16px;height:16px;flex:none}
.side-chip{display:flex;align-items:center;gap:6px;font-size:11px;font-family:var(--sans);color:var(--ink2);background:var(--surface2);padding:3px 9px;border-radius:999px}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;font-family:var(--sans);color:var(--ink2);margin-bottom:var(--pad-md)}
.breadcrumb a{color:var(--ink2)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:var(--border);opacity:.7}
.breadcrumb .here{color:var(--accent);font-weight:700}

/* ============================================================
   Toolbar / Filter
   ============================================================ */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--pad-md)}
.search-box{position:relative;flex:1;min-width:200px}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink2)}
.search-box input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font-size:14px;font-family:var(--sans)}
.search-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--pad-md)}
.filter-row .lbl{font-size:12px;color:var(--ink2);font-family:var(--sans);display:flex;align-items:center;gap:5px}
.filter-row .lbl svg{width:14px;height:14px}
select,.btn{appearance:none;padding:8px 12px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:10px;font-size:13px;font-family:var(--sans);cursor:pointer;transition:.2s}
select:focus{outline:none;border-color:var(--accent)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08);color:#fff}
.btn svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.view-tabs{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.view-tabs button{border:none;background:var(--surface);color:var(--ink2);padding:8px 12px;font-size:12px;font-family:var(--sans);display:inline-flex;align-items:center;gap:5px}
.view-tabs button.active{background:var(--accent);color:#fff}
.view-tabs button svg{width:14px;height:14px}

/* ============================================================
   檢視模式：卡片 / 清單 / 地圖 / 時間軸
   ============================================================ */
.cat-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:var(--pad-md)}
.cat-pill{flex:none;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 15px;font-size:13px;font-family:var(--sans);color:var(--ink2);display:inline-flex;gap:7px;align-items:center;cursor:pointer;transition:.2s}
.cat-pill:hover{border-color:var(--accent);color:var(--accent)}
.cat-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cat-pill b{font-size:11px;opacity:.75}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s;position:relative;cursor:pointer;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card img{width:100%;height:var(--card-img-h);object-fit:cover;transition:transform .4s}
.card:hover img{transform:scale(1.05)}
.card-body{padding:var(--card-pad);flex:1;display:flex;flex-direction:column}
.card-title{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:4px}
.card-en{font-size:11px;color:var(--ink2);font-family:var(--sans);margin-bottom:8px}
.tl-en{font-size:11px;color:var(--ink2);font-family:var(--sans);margin:2px 0 6px}
.card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tag{font-size:10.5px;font-family:var(--sans);padding:2px 8px;border-radius:999px;background:var(--surface2);color:var(--ink2)}
.tag.accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px dashed var(--border)}
.card-foot .read{font-size:11px;color:var(--ink2);font-family:var(--sans);display:flex;align-items:center;gap:4px}
.card-foot .read svg{width:13px;height:13px}
.fav-btn{width:30px;height:30px;border:none;background:transparent;color:var(--ink2);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.fav-btn:hover{background:var(--surface2);color:var(--accent)}
.fav-btn.on{color:#e2574c}
.fav-btn svg{width:17px;height:17px}
.card.featured{border-color:color-mix(in srgb,var(--accent2) 55%,transparent)}
.card .ribbon{position:absolute;top:10px;left:10px;background:var(--accent2);color:#fff;font-size:10px;font-family:var(--sans);padding:2px 9px;border-radius:999px;letter-spacing:.5px}

/* 清單檢視 */
.list-view{display:flex;flex-direction:column;gap:8px}
.list-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:.18s}
.list-item:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.list-item .idx{font-family:var(--sans);font-size:12px;color:var(--ink2);min-width:34px}
.list-item .li-title{font-weight:700;font-size:15px;flex:1}
.list-item .li-title small{display:block;font-weight:400;color:var(--ink2);font-size:11px;font-family:var(--sans)}
.list-item .li-meta{font-size:12px;color:var(--ink2);font-family:var(--sans);white-space:nowrap}

/* 網站地圖檢視 */
.map-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap)}
.map-node{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--card-pad)}
.map-node h4{font-size:15px;color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--sans)}
.map-node h4 svg{width:16px;height:16px}
.map-node ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.map-node li{padding:5px 8px;border-radius:6px;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.map-node li:hover{background:var(--surface2);color:var(--accent)}
.map-node li small{color:var(--ink2);font-size:11px;font-family:var(--sans)}

/* 時間軸檢視 */
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:linear-gradient(var(--accent2),var(--accent))}
.tl-item{position:relative;margin-bottom:var(--gap)}
.tl-item::before{content:'';position:absolute;left:-26px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
.tl-era{font-family:var(--sans);font-size:12px;color:var(--accent);font-weight:700}
.tl-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;transition:.2s}
.tl-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.tl-card b{font-size:15px}

/* ============================================================
   文章閱讀
   ============================================================ */
.article-wrap{max-width:880px;margin:0 auto}
.article-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:var(--pad-md);position:relative}
.article-hero img{width:100%;max-height:360px;object-fit:cover}
.article-hero .overlay{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.65));display:flex;align-items:flex-end;padding:var(--pad-lg)}
.article-hero h1{color:#fff;font-size:clamp(22px,4vw,34px);text-shadow:0 2px 10px rgba(0,0,0,.4)}
.article-body{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad-lg)}
.article-summary{font-size:16px;color:var(--ink2);border-left:4px solid var(--accent2);padding:6px 0 6px 16px;margin-bottom:18px;font-style:italic}
.article-body h2{font-size:20px;color:var(--accent);margin:26px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--surface2);display:flex;align-items:center;gap:8px}
.article-body h2 svg{width:18px;height:18px}
.article-body p{margin:12px 0;text-align:justify;text-indent:2em}
.article-body p.noindent{text-indent:0}
.article-body ul,.article-body ol{margin:10px 0 10px 22px}
.article-body li{margin:4px 0}
.term{color:var(--accent);border-bottom:1px dashed var(--accent);cursor:help;font-weight:600}
.article-tools{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;padding:12px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border)}
.chip-list{display:flex;flex-wrap:wrap;gap:6px}
.data-table{width:100%;border-collapse:collapse;margin:14px 0;font-family:var(--sans);font-size:14px;table-layout:fixed}
.data-table th,.data-table td{border:1px solid var(--border);padding:9px 12px;text-align:left}
.data-table th{background:var(--surface2);color:var(--accent);font-weight:700}
.data-table tr:nth-child(even) td{background:color-mix(in srgb,var(--surface2) 40%,transparent)}
.key-buildings{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:10px 0}
.kb-item{background:var(--surface2);border-radius:8px;padding:10px 12px;font-size:13px;display:flex;gap:8px;align-items:flex-start}
.kb-item svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:2px}
.kb-item small{display:block;font-weight:400;color:var(--ink2);font-size:11px;font-family:var(--sans);margin-top:2px}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap);margin-top:8px}
.related .card{cursor:pointer}
.prevnext{display:flex;justify-content:space-between;gap:12px;margin-top:var(--pad-md)}
.prevnext a{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;font-size:13px;transition:.2s}
.prevnext a:hover{border-color:var(--accent)}
.prevnext .dir{display:block;font-size:11px;color:var(--ink2);font-family:var(--sans);margin-bottom:3px}
.prevnext a.right{text-align:right}

/* 文章目錄 TOC */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--card-pad);margin-bottom:var(--pad-md);position:sticky;top:78px}
.toc h4{font-size:13px;color:var(--accent);font-family:var(--sans);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.toc h4 svg{width:16px;height:16px}
.toc a{display:block;padding:5px 10px;font-size:13px;color:var(--ink2);border-radius:6px;font-family:var(--sans)}
.toc a:hover{background:var(--surface2);color:var(--accent)}

/* ============================================================
   Breathe Clamp 組件
   ============================================================ */
.breathe-clamp{position:relative;overflow:hidden;--clamp-lines:3;display:-webkit-box;-webkit-line-clamp:var(--clamp-lines);-webkit-box-orient:vertical;line-height:1.8;color:var(--ink2);font-size:14px;transition:-webkit-line-clamp .35s ease}
.breathe-clamp.expanded{-webkit-line-clamp:unset;display:block}
.breathe-clamp-toggle{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--accent);background:none;border:none;display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);transition:.2s}
.breathe-clamp-toggle:hover{color:var(--accent2)}
.breathe-clamp-toggle svg{width:14px;height:14px;transition:transform .3s}
.breathe-clamp-toggle.expanded svg{transform:rotate(180deg)}

/* ============================================================
   Toast
   ============================================================ */
.toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:5000;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:999px;font-size:13.5px;font-family:var(--sans);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-10px);transition:.35s;white-space:nowrap}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:var(--accent)}
.toast.warn{background:#c0392b}

/* ============================================================
   Modal
   ============================================================ */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:3000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-mask.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius);max-width:640px;width:100%;max-height:85vh;overflow:auto;box-shadow:var(--shadow-lg);animation:pop .3s}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad-md);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.modal-head h3{font-size:16px;color:var(--accent);display:flex;align-items:center;gap:8px}
.modal-head h3 svg{width:18px;height:18px}
.modal-body{padding:var(--pad-md)}
.modal-close{border:none;background:var(--surface2);width:30px;height:30px;border-radius:8px;font-size:16px;color:var(--ink2)}

/* ============================================================
   Accordion / Tabs
   ============================================================ */
.accordion-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.accordion-head{width:100%;background:var(--surface);border:none;padding:12px 16px;font-size:14.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.accordion-head svg{width:16px;height:16px;transition:transform .3s;color:var(--accent)}
.accordion-item.open .accordion-head svg{transform:rotate(180deg)}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s ease;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.accordion-body-inner{padding:14px 16px;font-size:14px;color:var(--ink2)}
.tabs{border-bottom:2px solid var(--border);display:flex;gap:4px;margin-bottom:14px;overflow-x:auto}
.tab-btn{border:none;background:none;padding:9px 16px;font-size:14px;font-family:var(--sans);color:var(--ink2);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fade .35s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
   Carousel
   ============================================================ */
.carousel{position:relative;overflow:hidden;border-radius:var(--radius)}
.carousel-track{display:flex;transition:transform .5s ease}
.carousel-slide{flex:0 0 100%}
.carousel-slide img{width:100%;height:280px;object-fit:cover}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:5}
.carousel-btn.prev{left:12px}.carousel-btn.next{right:12px}
.carousel-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.carousel-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.5)}
.carousel-dots button.active{background:#fff;transform:scale(1.3)}

/* ============================================================
   統計 / 進度 / 徽章
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat-box{background:var(--surface2);border-radius:10px;padding:14px;text-align:center}
.stat-box b{display:block;font-size:24px;color:var(--accent);font-family:var(--sans)}
.stat-box span{font-size:11.5px;color:var(--ink2);font-family:var(--sans)}
.bar{height:8px;background:var(--surface2);border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;transition:width .6s ease}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;font-size:11px;font-family:var(--sans);padding:3px 10px;border-radius:999px}

/* ============================================================
   回到頂部 / 浮動
   ============================================================ */
.back-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;border:none;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s;z-index:900}
.back-top.show{opacity:1;pointer-events:auto}
.back-top svg{width:20px;height:20px}

/* ============================================================
   功能地圖（Modal 內）
   ============================================================ */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.feature-item{background:var(--surface2);border-radius:10px;padding:12px;display:flex;gap:10px;align-items:flex-start}
.feature-item svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px}
.feature-item b{font-size:13.5px;display:block}
.feature-item span{font-size:11px;color:var(--ink2);font-family:var(--sans)}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:4000;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px}
.lightbox .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:14px;font-family:var(--sans)}

/* ============================================================
   Footer
   ============================================================ */
.footer{border-top:1px solid var(--border);margin-top:40px;background:var(--surface2)}
.footer-inner{max-width:1280px;margin:0 auto;padding:26px var(--pad-lg);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.footer .brand{font-weight:800;color:var(--accent);font-size:16px}
.footer p{font-size:12.5px;color:var(--ink2);font-family:var(--sans)}
.footer .links{display:flex;gap:14px;font-size:13px;font-family:var(--sans)}
.footer .links a{color:var(--ink2)}
.footer .links a:hover{color:var(--accent)}

/* ============================================================
   空狀態 / 揭示動畫 / 響應式
   ============================================================ */
.empty{text-align:center;padding:50px 20px;color:var(--ink2)}
.empty svg{width:60px;height:60px;opacity:.3;margin:0 auto 14px}
.empty p{font-family:var(--sans);font-size:14px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.revealed{opacity:1;transform:none}
.skip{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}

/* 防複製提示 */
.copy-warn::selection{background:var(--accent);color:#fff}

/* ============================================================
   Hover 強化（統一互動回饋；touch 裝置自動停用避免卡 hover）
   ============================================================ */
@media (hover:hover){
  .tab-btn,.view-tabs button,.accordion-head,.carousel-btn,.carousel-dots button,.modal-close,.badge,.map-node li,.toc a,.data-table tbody tr,.hero-stat{transition:all .18s ease}
  .logo:hover{color:var(--accent2)}
  .hero-badge:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
  .hero-stat:hover{transform:translateY(-3px)}
  .hero-stat:hover b{color:var(--accent2);transform:scale(1.05)}
  .hero-stat b{transition:color .2s,transform .2s;display:inline-block}
  select:hover{border-color:var(--accent);background:color-mix(in srgb,var(--surface) 96%,transparent)}
  .view-tabs button:hover{background:var(--surface2);color:var(--accent)}
  .tab-btn:hover{color:var(--accent)}
  .accordion-head:hover{background:var(--surface2)}
  .carousel-btn:hover{background:var(--accent);transform:translateY(-50%) scale(1.08)}
  .carousel-dots button:hover{background:#fff;transform:scale(1.25)}
  .modal-close:hover{background:var(--accent);color:#fff}
  .back-top:hover{transform:translateY(-3px);filter:brightness(1.12)}
  .kb-item{transition:transform .18s,box-shadow .18s,background .18s}
  .kb-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:color-mix(in srgb,var(--accent) 7%,var(--surface2))}
  .feature-item{transition:transform .18s,box-shadow .18s,border-color .18s;border:1px solid transparent}
  .feature-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border)}
  .stat-box{transition:transform .2s,box-shadow .2s}
  .stat-box:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .data-table tbody tr:hover td{background:color-mix(in srgb,var(--accent) 6%,var(--surface2))}
  .prevnext a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .btn.primary:hover{transform:translateY(-1px)}
  .fav-btn:hover{transform:scale(1.12)}
  .badge:hover{filter:brightness(1.12)}
  .toc a:hover{transform:translateX(2px)}
  .list-item:hover{transform:translateY(-1px)}
  .tl-card:hover{transform:translateY(-2px)}
  .map-node li:hover{transform:translateX(2px)}
  .breathe-clamp-toggle:hover{transform:translateX(2px)}
}

@media (max-width:1020px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .side-card{flex:1;min-width:220px}
  .toc{position:static}
  .hero-fig{display:none}
}
@media (max-width:640px){
  .nav{flex-wrap:wrap;gap:8px}
  .logo small{display:none}
  .layout{padding-left:12px;padding-right:12px}
  .sidebar{flex-direction:column}
  .side-card{flex:none;min-width:0;width:100%}
  .main,main{min-width:0;width:100%}
  .toolbar{flex-direction:column;align-items:stretch}
  .search-box{width:100%}
  .view-tabs{overflow-x:auto}
  .filter-row .lbl{flex:none}
  .filter-row select{max-width:46%}
  .grid{grid-template-columns:1fr}
  .hero-stats{gap:16px}
  .prevnext{flex-direction:column}
  .list-item{flex-wrap:wrap;gap:6px}
  .list-item .li-meta{display:none}
  .article-hero .overlay{padding:14px}
  .timeline{padding-left:20px}
  .tl-item::before{left:-18px}
}
/* 縮放隱藏（簡易防複製之外，保留可用性） */
@media print{
  .header,.sidebar,.footer,.back-top,.article-tools,.toolbar,.filter-row{display:none!important}
  .layout{display:block}
  body{background:#fff;color:#000}
}