:root{
  --bg:#f6f1e7; --surface:#fff; --text:#1f2328; --muted:#5b6168;
  --wood:#b8895b; --wood-dark:#8a5f38; --line:rgba(0,0,0,.08);
  --shadow:0 10px 30px rgba(0,0,0,.10); --r:18px; --r2:14px; --container:1120px;
  --focus: 0 0 0 3px rgba(184,137,91,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif, system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial;
  color:var(--text); background:var(--bg); line-height:1.6;}
a{color:inherit}
.container{width:min(100% - 32px, var(--container)); margin-inline:auto}
.section{padding:56px 0}
.section.tight{padding:36px 0}
.kicker{letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--muted)}
h1{font-size:clamp(28px,3.4vw,44px); line-height:1.1; margin:0 0 10px}
h2{font-size:clamp(20px,2.2vw,28px); margin:0 0 10px}
h3{font-size:18px; margin:0 0 8px}
p{margin:0 0 12px}
.small{font-size:13px;color:var(--muted)}
.hr{height:1px;background:var(--line); margin:18px 0}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px}
.card ul{margin:0; padding-left:18px}
.card-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.card-link{display:inline-block; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; text-decoration:none; background:rgba(184,137,91,.12); border:1px solid rgba(184,137,91,.28); color:var(--wood-dark); transition:background .2s, border-color .2s}
.card-link:hover{background:rgba(184,137,91,.22); border-color:var(--wood)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  background:rgba(184,137,91,.16); border:1px solid rgba(184,137,91,.25); color:var(--wood-dark); font-weight:700; font-size:12px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; will-change:transform}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn.primary{background:var(--wood); color:#1b1208; box-shadow:0 10px 26px rgba(184,137,91,.30)}
.btn.primary:hover{background:#c79969; transform:translateY(-1px)}
.btn.ghost{background:transparent; border-color:rgba(0,0,0,.14)}
.btn.ghost:hover{background:rgba(0,0,0,.04); transform:translateY(-1px)}
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:var(--r2); border:1px solid var(--line); background:#eee}
@media(max-width:980px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .gallery{grid-template-columns:1fr; gap:0; margin-inline:calc(-50vw + 50%); width:100vw; max-width:100vw}
  .gallery img{height:50vh; min-height:220px; border-radius:0; border-left:none; border-right:none; filter:brightness(0.88)}
  .section:has(.gallery){overflow-x:clip}
}

/* Carousel (when .gallery--carousel and 5+ images) */
.gallery--carousel{display:block; position:relative; overflow:hidden}
.gallery--carousel .carousel-viewport{overflow:hidden; border-radius:var(--r2); border:1px solid var(--line); background:#eee}
.gallery--carousel .carousel-track{display:flex; transition:transform .35s ease-out}
.gallery--carousel .carousel-slide{flex:0 0 100%; min-width:0}
.gallery--carousel .carousel-slide img{width:100%; height:280px; object-fit:cover; display:block; border-radius:0}
@media(min-width:521px){
  .gallery--carousel .carousel-slide{flex:0 0 50%}
  .gallery--carousel .carousel-slide img{height:260px}
}
@media(min-width:981px){
  .gallery--carousel .carousel-slide{flex:0 0 25%}
  .gallery--carousel .carousel-slide img{height:220px}
}
.gallery--carousel .carousel-nav{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; flex-wrap:wrap}
.gallery--carousel .carousel-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s}
.gallery--carousel .carousel-btn:hover{background:rgba(184,137,91,.12); border-color:var(--wood)}
.gallery--carousel .carousel-btn:focus{outline:none; box-shadow:var(--focus)}
.gallery--carousel .carousel-dots{display:flex; gap:8px; align-items:center}
.gallery--carousel .carousel-dot{width:10px; height:10px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:background .2s, transform .2s}
.gallery--carousel .carousel-dot:hover{background:rgba(184,137,91,.25)}
.gallery--carousel .carousel-dot.active{background:var(--wood); border-color:var(--wood)}

.hero{position:relative; min-height:70vh; display:grid; align-items:center; overflow:hidden; background:#111; z-index:0}
.hero .media{position:absolute; inset:0; z-index:-1}
.hero video,.hero .media img{width:100%; height:100%; object-fit:cover; transform:scale(1.02)}
.hero .overlay{position:absolute; inset:0;
  background:radial-gradient(80% 60% at 50% 35%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%),
            linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.70) 100%)}
.hero .inner{position:relative; z-index:2; color:#fff; padding:72px 0 68px}
.hero .title{max-width:20ch}
.hero .subtitle{max-width:72ch; opacity:.92}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.pill{font-size:12px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px)}

.site-header{position:sticky; top:0; z-index:50; background:rgba(246,241,231,.9); backdrop-filter:blur(10px)}
.site-footer{background:rgba(246,241,231,.9); backdrop-filter:blur(10px)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900}
.brand img{width:61px;height:61px;object-fit:contain}
.menu{display:flex; gap:16px; align-items:center}
.menu a{color:var(--text); text-decoration:none; font-weight:700; font-size:14px}
.menu a:hover{color:var(--wood-dark)}
.nav-cta{margin-left:8px}
.mobile-toggle{display:none; border:1px solid var(--line); background:rgba(255,255,255,.7); border-radius:12px; padding:10px}
.mobile-toggle:focus{outline:none; box-shadow:var(--focus)}
.dropdown{position:relative}
.dropdown > button{all:unset; cursor:pointer; font-weight:800; font-size:14px}
.dropdown > button:hover{color:var(--wood-dark)}
.dropdown-panel{display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:220px; z-index:60;
  background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:10px}
.dropdown-panel a{display:block; padding:10px 10px; border-radius:10px}
.dropdown-panel a:hover{background:rgba(184,137,91,.14)}
.dropdown.open .dropdown-panel{display:block}

@media(max-width:980px){
  .mobile-toggle{display:inline-flex}
  .menu{display:none; position:absolute; left:16px; right:16px; top:64px; flex-direction:column; align-items:stretch;
    background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px}
  .menu.open{display:flex}
  .dropdown-panel{position:static; box-shadow:none; border:none; padding:6px 0 0; background:transparent}
  .dropdown-panel a{padding:10px 0}
  .menu.open .dropdown .dropdown-panel{display:block}
}

.footer-grid{display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:24px; padding:26px 0}
.footer-grid a{text-decoration:none; color:var(--muted)}
.footer-grid a:hover{color:var(--wood-dark)}
.footer-sitemap h3{margin-bottom:10px}
.sitemap-list{list-style:none; margin:0; padding:0; font-size:14px}
.sitemap-list li{margin:0 0 6px}
.sitemap-list li a{display:inline-block; padding:2px 0}
.sitemap-list .sitemap-group{margin-top:12px; margin-bottom:4px; font-weight:700; color:var(--wood-dark); font-size:13px}
.sitemap-list .sitemap-group:first-child{margin-top:0}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr}}
}

/* ---------- SEO 文章頁：小編／專家分享風格 ---------- */
.seo-article .section.tight .container{max-width:720px}
.article-hero{position:relative; border-radius:var(--r); overflow:hidden; margin-bottom:24px; background:#111; aspect-ratio:16/9; min-height:240px}
.article-hero__media{position:absolute; inset:0; z-index:0}
.article-hero__media img,.article-hero img{width:100%; height:100%; object-fit:cover; display:block}
.article-byline{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:20px}
.article-lead{font-size:17px; line-height:1.65; color:var(--text); margin-bottom:28px; max-width:72ch}
.article-body .card{margin-bottom:16px}
.article-body .card:last-child{margin-bottom:0}
.comparison-table{width:100%; border-collapse:collapse; font-size:14px; margin:16px 0}
.comparison-table th,.comparison-table td{border:1px solid var(--line); padding:12px 14px; text-align:left}
.comparison-table th{background:rgba(184,137,91,.12); font-weight:700; color:var(--wood-dark)}
.comparison-table tr:nth-child(even){background:rgba(255,255,255,.6)}
.comparison-table tr:hover{background:rgba(184,137,91,.06)}
@media(max-width:640px){.comparison-table th,.comparison-table td{padding:10px}; .comparison-table{font-size:13px}}
.expert-callout{background:linear-gradient(135deg, rgba(184,137,91,.08) 0%, rgba(184,137,91,.04) 100%); border:1px solid rgba(184,137,91,.22); border-radius:var(--r); padding:18px 20px; margin:20px 0}
.expert-callout .label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--wood-dark); font-weight:700; margin-bottom:6px}
.expert-callout p{margin:0; font-size:14px; line-height:1.6; color:var(--text)}
.seo-article h2{margin-top:32px; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--line)}
.seo-article h2:first-of-type{margin-top:0}