/* ============================================================
   侖居網站 — Design System v0.2（依 Kenneth v3.html 抽取）
   日系方向：黑體、字重 ≤500、左色條 + 彩色類別字、
   Section 交替色塊 + 1px 幼線、無陰影。
   ============================================================ */
:root{
  --bg:#F5F3EE; --surface:#FBFAF6; --surface-alt:#F0ECE4;
  --skeleton:#E8E5DF; --skeleton-shine:#F0EDE7;
  --ink:#26231F; --ink-secondary:#595550; --ink-tertiary:#6E6860;
  --line:#EBE8E1; --line-strong:#DDD8CE;

  --accent-guide:#C8A24D; --accent-fund:#C87A4D; --accent-policy:#4D8CC8;
  --accent-housing:#4DA87A; --accent-neutral:#8C857D;
  /* 加深版：文字用（AA 對比 ≥4.5:1；色條仍用上面鮮色） */
  --accent-guide-ink:#8A6A1E; --accent-fund-ink:#A14E22; --accent-policy-ink:#2E6DA6;
  --accent-housing-ink:#2E7A50; --accent-neutral-ink:#595550;
  --bg-guide:rgba(200,162,77,.08); --bg-fund:rgba(200,122,77,.08);
  --bg-policy:rgba(77,140,200,.08); --bg-housing:rgba(77,168,122,.08);

  --space-xs:.25rem; --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem;
  --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem; --space-4xl:6rem;
  --space-section:clamp(5rem,10vw,7.5rem);

  --step--1:clamp(.8125rem,.8rem + .1vw,.875rem);
  --step-0:clamp(.9375rem,.9rem + .2vw,1.0625rem);
  --step-1:clamp(1.125rem,1rem + .4vw,1.25rem);
  --step-2:clamp(1.375rem,1.2rem + .7vw,1.625rem);
  --step-3:clamp(1.75rem,1.4rem + 1.2vw,2.125rem);
  --step-4:clamp(2rem,1.5rem + 1.8vw,2.75rem);

  --radius-sm:2px; --radius-md:4px; --radius-lg:6px;
  --shadow-subtle:0 1px 2px rgba(38,35,31,.04);
  --leading-tight:1.35; --leading-normal:1.75; --leading-relaxed:1.9;
  --tracking-wide:.03em;
  --font-sans:"Noto Sans TC","PingFang HK","PingFang TC","Microsoft JhengHei","Noto Sans SC","Hiragino Sans",sans-serif;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans); font-size:var(--step-0); line-height:var(--leading-normal);
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-weight:500; line-height:var(--leading-tight); letter-spacing:var(--tracking-wide)}
.container{width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--space-lg)}

/* ---------- Navbar ---------- */
.navbar{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; height:64px; gap:var(--space-md)}
.nav-brand{font-weight:600; font-size:var(--step-1); letter-spacing:var(--tracking-wide); display:flex; align-items:center; gap:var(--space-sm)}
.nav-brand::before{content:""; width:20px; height:20px; background:var(--ink); border-radius:var(--radius-sm)}
.nav-menu{display:flex; gap:var(--space-xl); list-style:none; align-items:center}
.nav-item{position:relative}
.nav-name{font-size:var(--step--1); color:var(--ink-secondary); padding-block:var(--space-sm); border-bottom:2px solid transparent; transition:.2s}
.nav-name:hover,.nav-name:focus-visible{color:var(--ink); border-bottom-color:var(--line-strong)}
.nav-toggle{border:0; background:none; cursor:pointer; font:inherit; font-size:10px; color:var(--ink-tertiary); padding:2px 4px}
.nav-item.open .nav-toggle{transform:rotate(90deg)}
.nav-dd{position:absolute; top:calc(100% + 8px); left:0; min-width:250px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-sm);
  box-shadow:0 10px 28px rgba(38,35,31,.07); display:none; z-index:120}
.nav-item.open .nav-dd{display:block}
.nav-dd a{display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-sm); font-size:var(--step--1); color:var(--ink-secondary)}
.nav-dd a:hover{background:var(--surface-alt); color:var(--ink)}
.nav-dd a .sw{width:10px;height:10px;border-radius:50%;flex:none}
.nav-dd .all{border-top:1px solid var(--line); margin-top:var(--space-xs); padding-top:var(--space-md); color:var(--ink); font-weight:500}
.nav-actions{display:flex; align-items:center; gap:var(--space-md)}
.nav-search,.nav-lang{font:inherit; font-size:var(--step--1); color:var(--ink-secondary); background:none; border:none; cursor:pointer; padding:var(--space-sm)}
.nav-cta{font-size:var(--step--1); font-weight:500; color:var(--surface); background:var(--ink); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-md); transition:.2s}
.nav-cta:hover{background:var(--ink-secondary)}
.nav-burger{display:none; margin-left:auto; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-md); padding:var(--space-sm) var(--space-md); font-size:18px; cursor:pointer}
.nav-mobile{display:none; border-top:1px solid var(--line); background:var(--surface)}
.nav-mobile.open{display:block}
.nav-mobile .m-item{border-bottom:1px solid var(--line)}
.nav-mobile .m-head{display:flex; align-items:center}
.nav-mobile .m-head a{flex:1; padding:var(--space-md) var(--space-lg); font-weight:500}
.nav-mobile .m-head button{border:0; background:none; font-size:15px; padding:var(--space-md) var(--space-lg); cursor:pointer; color:var(--ink-tertiary)}
.nav-mobile .m-sub{display:none; background:var(--bg)}
.nav-mobile .m-item.open .m-sub{display:block}
.nav-mobile .m-sub a{display:block; padding:var(--space-sm) calc(var(--space-lg) + var(--space-xl)); font-size:var(--step--1); color:var(--ink-secondary)}
.nav-mobile .m-sub a:last-child{color:var(--ink); font-weight:500}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding-block:var(--space-md); border-bottom:1px solid var(--line); background:var(--surface)}
.breadcrumb ol{display:flex; flex-wrap:wrap; list-style:none; gap:var(--space-xs); font-size:var(--step--1); color:var(--ink-tertiary)}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-inline:var(--space-sm); color:var(--line-strong)}
.breadcrumb a:hover{color:var(--ink); text-decoration:underline}

/* ---------- Section ---------- */
.section{padding-block:var(--space-section)}
.section-bordered{border-top:1px solid var(--line)}
.section-surface{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-header{margin-bottom:var(--space-2xl)}
.section-header-row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--space-md)}
.section-eyebrow{font-size:var(--step--1); color:var(--ink-tertiary); letter-spacing:var(--tracking-wide); margin-bottom:var(--space-sm); display:flex; align-items:center; gap:var(--space-sm)}
.section-eyebrow::before{content:""; width:16px; height:1px; background:var(--ink-tertiary)}
.section-title{font-size:var(--step-2); font-weight:500; margin-bottom:var(--space-sm)}
.section-desc{font-size:var(--step-0); color:var(--ink-secondary); max-width:56ch; line-height:var(--leading-relaxed)}
.link-more{font-size:var(--step--1); color:var(--ink-secondary); display:inline-flex; align-items:center; gap:var(--space-xs); white-space:nowrap; transition:.2s}
.link-more:hover{color:var(--ink)}
.link-more::after{content:"→"; transition:transform .2s}
.link-more:hover::after{transform:translateX(3px)}

/* ---------- Hero ---------- */
.hero{padding-block:var(--space-3xl) var(--space-section); background:var(--surface); border-bottom:1px solid var(--line)}
.hero-split{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-3xl)}
.hero-label{font-size:var(--step--1); color:var(--ink-tertiary); margin-bottom:var(--space-md); letter-spacing:var(--tracking-wide)}
.hero-title{font-size:var(--step-4); font-weight:500; max-width:22ch; margin-bottom:var(--space-lg)}
.hero-desc{font-size:var(--step-0); color:var(--ink-secondary); max-width:48ch; line-height:var(--leading-relaxed); margin-bottom:var(--space-2xl)}
.hero-topics{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md)}
.hero-photo-wrap{display:flex; flex-direction:column}
.hero-photo{width:100%; flex:1; min-height:240px; background:var(--skeleton); border-radius:var(--radius-md); position:relative; overflow:hidden}
.hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,var(--skeleton-shine) 50%,transparent 60%); animation:skeleton-shine 2.5s infinite}
.hero-photo-caption{position:absolute; bottom:var(--space-md); left:var(--space-md); font-size:var(--step--1); color:var(--ink-tertiary); background:rgba(251,250,246,.9); padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-sm)}
@keyframes skeleton-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------- Cards（左色條 + 彩色類別字） ---------- */
.topic-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-xl); position:relative; transition:border-color .2s}
.topic-card:hover{border-color:var(--line-strong)}
.bar-l::before{content:""; position:absolute; left:0; top:var(--bar-top,32px); width:3px; height:28px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--accent-neutral)}
.bar-guide::before{background:var(--accent-guide)} .bar-fund::before{background:var(--accent-fund)}
.bar-policy::before{background:var(--accent-policy)} .bar-housing::before{background:var(--accent-housing)}
.cat{font-size:var(--step--1); font-weight:500; letter-spacing:var(--tracking-wide); margin-bottom:var(--space-xs)}
.cat-guide{color:var(--accent-guide-ink)} .cat-fund{color:var(--accent-fund-ink)}
.cat-policy{color:var(--accent-policy-ink)} .cat-housing{color:var(--accent-housing-ink)} .cat-neutral{color:var(--accent-neutral-ink)}
.card-title{font-size:var(--step-1); font-weight:500; margin-bottom:var(--space-sm)}
.card-desc{font-size:var(--step--1); color:var(--ink-secondary); line-height:var(--leading-normal)}
.card-link{display:inline-flex; align-items:center; gap:var(--space-xs); font-size:var(--step--1); font-weight:500; color:var(--ink); margin-top:var(--space-md); transition:gap .2s}
.card-link:hover{gap:var(--space-sm)}
.tag-list{display:flex; flex-wrap:wrap; gap:var(--space-md); align-items:center}
.tag-item{font-size:var(--step--1); font-weight:500; letter-spacing:var(--tracking-wide); line-height:1}

/* ---------- Photo grid ---------- */
.photo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); align-items:start}
.photo-card{display:flex; flex-direction:column; gap:var(--space-md)}
.photo-thumb{width:100%; aspect-ratio:4/3; background:var(--skeleton); border-radius:var(--radius-md); position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s}
.photo-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,var(--skeleton-shine) 50%,transparent 60%); animation:skeleton-shine 2.5s infinite}
.photo-card:hover .photo-thumb{transform:translateY(-2px); box-shadow:var(--shadow-subtle)}
.photo-card-title{font-size:var(--step--1); font-weight:500; line-height:var(--leading-tight)}
.photo-card-meta{font-size:var(--step--1); color:var(--ink-tertiary)}
.photo-more{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-sm); padding-top:var(--space-md)}
.photo-more-arrow{width:40px; height:40px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--step-0); color:var(--ink-secondary); background:var(--surface); transition:.2s}
.photo-more:hover .photo-more-arrow{background:var(--ink); color:var(--surface); border-color:var(--ink); transform:translateX(2px)}
.photo-more-label{font-size:var(--step--1); color:var(--ink-secondary); font-weight:500; transition:.2s}
.photo-more:hover .photo-more-label{color:var(--ink)}

/* ---------- Filter bar ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-bottom:var(--space-xl)}
.filter-btn{font-family:inherit; font-size:var(--step--1); padding:var(--space-xs) var(--space-md); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); color:var(--ink-secondary); cursor:pointer; transition:.2s}
.filter-btn:hover{border-color:var(--line-strong); color:var(--ink)}
.filter-btn.active{background:var(--ink); color:var(--surface); border-color:var(--ink)}

/* ---------- Housing cards ---------- */
.housing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-lg)}
.housing-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-xl); position:relative; transition:border-color .2s}
.housing-card:hover{border-color:var(--line-strong)}
.housing-card .card-desc{margin-bottom:var(--space-lg)}

/* ---------- Article cards ---------- */
.article-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--space-lg)}
.article-card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s}
.article-card:hover{border-color:var(--line-strong)}
.article-card-inner{padding:var(--space-xl); position:relative; flex:1; display:flex; flex-direction:column}
.article-card-inner .tag-list{margin-bottom:var(--space-sm)}
.article-card-inner .card-title{margin-bottom:var(--space-sm)}
.article-card-footer{padding:var(--space-md) var(--space-xl); display:flex; justify-content:space-between; align-items:center}
.article-date{font-size:var(--step--1); color:var(--ink-tertiary)}
.article-arrow{font-size:var(--step--1); color:var(--ink-tertiary); transition:.2s}
.article-card:hover .article-arrow{color:var(--ink); transform:translateX(3px)}

/* ---------- Banner ---------- */
.banner{background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-xl) var(--space-2xl); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-lg)}
.banner-title{font-size:var(--step-1); font-weight:500; margin-bottom:var(--space-xs)}
.banner-desc{font-size:var(--step-0); color:var(--ink-secondary)}
.banner-cta{display:inline-flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-lg); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-md); font-size:var(--step--1); font-weight:500; transition:.2s}
.banner-cta:hover{background:var(--ink); color:var(--surface); border-color:var(--ink)}

/* ---------- Feature banner ---------- */
.feature-banner{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-2xl); display:flex; flex-direction:column; gap:var(--space-lg)}
.feature-banner.bar-l{--bar-top:48px}
.feature-banner-title{font-size:var(--step-2); font-weight:500}
.feature-banner-desc{font-size:var(--step-0); color:var(--ink-secondary); line-height:var(--leading-relaxed); max-width:72ch}
.feature-banner-cta{align-self:flex-start; display:inline-flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-lg); border:1px solid var(--line-strong); border-radius:var(--radius-md); font-size:var(--step--1); font-weight:500; background:var(--bg); transition:.2s}
.feature-banner-cta:hover{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.tag-item.policy{color:var(--accent-policy-ink)} .tag-item.fund{color:var(--accent-fund-ink)}
.tag-item.guide{color:var(--accent-guide-ink)} .tag-item.housing{color:var(--accent-housing-ink)} .tag-item.neutral{color:var(--accent-neutral-ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:var(--space-sm); font:inherit; font-size:var(--step--1); font-weight:500; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:var(--radius-md); padding:var(--space-sm) var(--space-lg); transition:.2s}
.btn:hover{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.btn--primary{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.btn--primary:hover{background:var(--ink-secondary); border-color:var(--ink-secondary)}
.btn--sm{padding:var(--space-xs) var(--space-md)}

/* ---------- Key-value ---------- */
.kv{background:transparent; border:0; border-radius:var(--radius-md); overflow:hidden}
.kv div{display:flex; justify-content:space-between; gap:var(--space-lg); padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--line); font-size:var(--step-0)}
.kv div:last-child{border-bottom:0}
.kv b{font-weight:500; color:var(--ink-secondary); flex:none}

/* ---------- Table ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:var(--step-0); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden}
.tbl th{text-align:left; font-weight:500; font-size:var(--step--1); padding:var(--space-md); background:var(--surface-alt); border-bottom:2px solid var(--line-strong)}
.tbl td{padding:1.1rem var(--space-md); border-bottom:1px solid var(--line)}
.tbl tbody tr:last-child td{border-bottom:0}
.ratioline{font-size:var(--step--1); color:var(--ink-tertiary); margin-top:var(--space-sm)}
@media(max-width:640px){
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:block; border-bottom:1px solid var(--line)}
  .tbl.stack td{display:flex; justify-content:space-between; gap:var(--space-md); border-bottom:0}
  .tbl.stack td::before{content:attr(data-l); font-weight:500; color:var(--ink-tertiary); font-size:var(--step--1)}
}

/* ---------- Timeline ---------- */
.tl{position:relative; padding-left:var(--space-lg); border-left:2px solid var(--line-strong)}
.tl .node{position:relative; padding-bottom:var(--space-lg)}
.tl .node:before{content:""; position:absolute; left:calc(-1 * var(--space-lg) - 5px); top:6px; width:8px; height:8px; border-radius:50%; background:var(--accent-policy); border:2px solid var(--surface)}
.tl .node time{font-size:var(--step--1); font-weight:500; color:var(--accent-policy-ink); letter-spacing:var(--tracking-wide)}
.tl .node b{display:block; font-size:var(--step-1); font-weight:500; margin:var(--space-xs) 0}
.tl .node p{font-size:var(--step--1); color:var(--ink-secondary); margin:0}

/* ---------- FAQ ---------- */
.faq{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:var(--space-md) var(--space-lg); font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:var(--space-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ink-tertiary)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 var(--space-lg) var(--space-lg); font-size:var(--step-0); color:var(--ink-secondary)}

/* ---------- Steps ---------- */
.steps{counter-reset:s; list-style:none}
.steps li{position:relative; padding:var(--space-sm) 0 var(--space-sm) calc(var(--space-xl) + var(--space-sm)); font-size:var(--step-0)}
.steps li:before{counter-increment:s; content:counter(s); position:absolute; left:0; top:var(--space-sm); width:26px; height:26px; border-radius:50%; background:var(--bg-housing); color:var(--accent-housing-ink); font-size:var(--step--1); text-align:center; line-height:26px; font-weight:500}

/* ---------- Callout ---------- */
.callout{border-left:3px solid var(--accent-policy); background:var(--bg-policy); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:var(--space-md) var(--space-lg); font-size:var(--step-0)}
.callout--warn{border-color:var(--accent-fund); background:var(--bg-fund)}
.callout b{font-weight:600}

/* ---------- Finder ---------- */
.finder{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-2xl); max-width:640px}
.fbar{height:6px; background:var(--surface-alt); border-radius:99px; overflow:hidden; margin-bottom:var(--space-xl)}
.fbar i{display:block; height:100%; background:var(--accent-housing); transition:width .25s}
.opt{display:block; width:100%; text-align:left; font:inherit; font-size:var(--step-0); cursor:pointer; border:1px solid var(--line); background:var(--bg); border-radius:var(--radius-md); padding:var(--space-md); margin:var(--space-sm) 0; color:var(--ink); transition:.15s}
.opt:hover{border-color:var(--line-strong)}
.opt.sel{background:var(--bg-housing); border-color:var(--accent-housing); color:var(--accent-housing-ink); font-weight:500}
.frow{display:flex; gap:var(--space-sm); margin-top:var(--space-lg)}

/* ---------- misc ---------- */
.prose{max-width:34em}
.muted{color:var(--ink-secondary)}
.small{font-size:var(--step--1)}
.grid{display:grid; gap:var(--space-lg)}
.g-2{grid-template-columns:1fr} .g-3{grid-template-columns:1fr} .g-4{grid-template-columns:1fr}
@media(min-width:640px){ .g-2,.g-3,.g-4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} }
.article h2{margin-top:var(--space-2xl)} .article h3{margin-top:var(--space-xl)}

/* ---------- Footer ---------- */
.footer{background:var(--surface); border-top:1px solid var(--line); padding-block:var(--space-3xl) var(--space-2xl)}
.footer-grid{display:grid; grid-template-columns:2fr repeat(2,1fr); gap:var(--space-2xl); margin-bottom:var(--space-2xl)}
.footer-brand{font-weight:600; font-size:var(--step-1); margin-bottom:var(--space-md); letter-spacing:var(--tracking-wide)}
.footer-desc{font-size:var(--step--1); color:var(--ink-secondary); line-height:var(--leading-relaxed); max-width:40ch}
.footer-col-title{font-size:var(--step--1); font-weight:600; margin-bottom:var(--space-md); letter-spacing:var(--tracking-wide)}
.footer-links{list-style:none; display:flex; flex-direction:column; gap:var(--space-sm)}
.footer-links a{font-size:var(--step--1); color:var(--ink-secondary); transition:.2s}
.footer-links a:hover{color:var(--ink); text-decoration:underline}
.footer-bottom{border-top:1px solid var(--line); padding-top:var(--space-lg); font-size:var(--step--1); color:var(--ink-tertiary); line-height:var(--leading-relaxed)}
.hkex{display:inline-flex; align-items:center; gap:var(--space-sm); font-size:var(--step--1); color:var(--ink-tertiary); border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:4px 10px; margin-top:var(--space-sm)}

/* ---------- Focus & motion ---------- */
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}html{scroll-behavior:auto}}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr}
  .hero-photo-wrap{order:-1}
  .hero-photo{min-height:280px}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .nav-menu,.nav-actions{display:none}
  .nav-burger{display:inline-flex}
}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr}
  .banner{flex-direction:column; align-items:flex-start}
  .hero-topics{grid-template-columns:1fr}
  .hero-title{font-size:var(--step-3)}
}
@media(max-width:480px){ .photo-grid{grid-template-columns:1fr} }
.demo-note{position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:200; background:var(--ink); color:#fff; font-size:12px; padding:6px 15px; border-radius:999px; opacity:.9}

/* ============================================================
   日系規格表格（依 FAQ.html，取代 zebra）
   ============================================================ */
.spec-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden}
.spec-table{width:100%; border-collapse:collapse; font-size:var(--step-0)}
.spec-table thead th{background:var(--surface-alt); color:var(--ink); font-weight:500; text-align:left; padding:var(--space-md) var(--space-xl); border-bottom:2px solid var(--line-strong); white-space:nowrap}
.spec-table.cols4 thead th:last-child{text-align:right}
.spec-table tbody tr{border-bottom:1px solid var(--line); transition:background .15s}
.spec-table tbody tr:last-child{border-bottom:none}
.spec-table tbody td{padding:18px var(--space-xl); vertical-align:middle; color:var(--ink)}
.spec-table tbody td:first-child{font-weight:500; white-space:nowrap; width:22%}
.spec-table tbody td:nth-child(3){color:var(--ink-secondary)}
.spec-table tbody td:last-child{text-align:left}
.spec-table.cols4 tbody td:last-child{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.spec-table tbody tr:hover{background:rgba(240,236,228,.5)}
.spec-table tbody tr.important{position:relative}
.spec-table tbody tr.important td:first-child{padding-left:calc(var(--space-xl) - 3px); border-left:3px solid var(--accent-policy)}
.row-tag{display:inline-block; font-size:var(--step--1); font-weight:500; padding:2px 8px; border-radius:var(--radius-sm); background:var(--bg-policy); color:var(--accent-policy-ink); margin-left:var(--space-sm); letter-spacing:var(--tracking-wide)}
.table-note{padding:var(--space-md) var(--space-xl); font-size:var(--step--1); color:var(--ink-tertiary); border-top:1px solid var(--line); background:var(--surface)}
@media(max-width:720px){
  .spec-table thead{display:none}
  .spec-table tbody tr{display:block; padding:var(--space-lg) var(--space-xl); border-bottom:1px solid var(--line)}
  .spec-table tbody td{display:flex; justify-content:space-between; align-items:baseline; padding:var(--space-xs) 0; text-align:right !important; border:none}
  .spec-table tbody td::before{content:attr(data-label); font-weight:500; color:var(--ink-secondary); text-align:left; margin-right:var(--space-md); flex-shrink:0}
  .spec-table tbody td:first-child{width:auto; padding-left:0; border-left:none}
  .spec-table tbody tr.important{border-left:3px solid var(--accent-policy); padding-left:calc(var(--space-xl) - 3px)}
  .spec-table tbody tr.important td:first-child{padding-left:0; border-left:none}
}

/* ============================================================
   日系 FAQ（依 FAQ.html）
   ============================================================ */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-lg);
  padding:var(--space-xl) var(--space-lg); background:none; border:none; font-family:inherit; font-size:var(--step-0);
  font-weight:500; color:var(--ink); text-align:left; cursor:pointer; transition:background .15s; line-height:var(--leading-tight)}
.faq-question:hover,.faq-question:focus-visible{background:rgba(240,236,228,.4)}
.faq-q-mark{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:var(--surface); font-size:var(--step--1); font-weight:600; flex-shrink:0; margin-right:var(--space-sm); margin-top:1px}
.faq-q-text{display:flex; align-items:baseline}
.faq-arrow{font-size:var(--step-0); color:var(--ink-tertiary); flex-shrink:0; transition:transform .2s; margin-top:2px}
.faq-item[open] .faq-arrow{transform:rotate(90deg)}
.faq-answer{padding:0 var(--space-lg) var(--space-xl) calc(var(--space-lg) + 22px + var(--space-sm)); color:var(--ink-secondary); line-height:var(--leading-relaxed)}
.faq-answer p + p{margin-top:var(--space-md)}
.faq-callout{margin-top:var(--space-lg); padding:var(--space-md) var(--space-lg); background:var(--bg-guide);
  border-left:3px solid var(--accent-guide); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:var(--step--1);
  color:var(--ink-secondary); line-height:var(--leading-normal)}
.faq-callout strong{color:var(--ink); font-weight:500}
.faq-steps{margin-top:var(--space-md); display:flex; flex-direction:column; gap:var(--space-sm); list-style:none}
.faq-step{display:flex; align-items:baseline; gap:var(--space-sm)}
.faq-step-num{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:var(--surface-alt); color:var(--ink-secondary); font-size:var(--step--1); font-weight:500; flex-shrink:0}
.faq-footer-callout{margin-top:var(--space-2xl); padding:var(--space-xl); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); display:flex; flex-direction:column; gap:var(--space-sm)}
.faq-footer-callout-title{font-size:var(--step-1); font-weight:500; letter-spacing:var(--tracking-wide)}
.faq-footer-callout-text{font-size:var(--step-0); color:var(--ink-secondary); line-height:var(--leading-relaxed); max-width:64ch}
.faq-footer-callout-cta{align-self:flex-start; display:inline-flex; align-items:center; gap:var(--space-sm); margin-top:var(--space-sm);
  padding:var(--space-sm) var(--space-lg); border:1px solid var(--line-strong); border-radius:var(--radius-md); font-size:var(--step--1);
  font-weight:500; color:var(--ink); background:var(--bg); transition:.2s}
.faq-footer-callout-cta:hover{background:var(--ink); color:var(--surface); border-color:var(--ink)}
@media(max-width:768px){ .faq-answer{padding-left:var(--space-lg)} .faq-q-mark{display:none} }

/* 名錄卡（機構／活動用） */
.dir-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-xl); position:relative}
.dir-card .cat{margin-bottom:var(--space-xs)}

/* finder result 卡頭 */
.card-head{display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); margin-bottom:var(--space-xs)}
.chip{font-size:var(--step--1); font-weight:500; padding:2px 10px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); color:var(--ink-secondary); background:var(--surface); white-space:nowrap}
.chip.lead{background:var(--bg-housing); color:var(--accent-housing-ink); border-color:transparent}

/* 活動卡（可選相片） */
.ev-thumb{width:100%; aspect-ratio:16/9; background:var(--skeleton); position:relative; overflow:hidden}
.ev-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,var(--skeleton-shine) 50%,transparent 60%); animation:skeleton-shine 2.5s infinite}
.ev-body{padding:var(--space-xl); position:relative}
.ev-card{display:flex; flex-direction:column}
.ev-card .ev-body{flex:1; display:flex; flex-direction:column}
.ev-card .date{margin-top:auto; padding-top:var(--space-md); font-size:var(--step--1); color:var(--ink-tertiary)}
.tabs{display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-bottom:var(--space-xl)}
.tabs a,.tabs button{font:inherit; font-size:var(--step--1); padding:var(--space-xs) var(--space-md); border-radius:var(--radius-md); border:1px solid var(--line);
  background:var(--surface); color:var(--ink-secondary); transition:.2s; cursor:pointer}
.tabs a:hover,.tabs button:hover{border-color:var(--line-strong); color:var(--ink)}
.tabs a.on,.tabs button.on{background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:500}