/* ==========================================================
   挑物所 TIAOWU — 設計系統
   參考 picklogs.com 的極簡閱讀型版面語言：
   純白底、大留白、藍色單一強調色、灰底標題帶、圓角圖卡
   ========================================================== */

:root{
  --ink:#192A3D;          /* 標題 */
  --body:#3A4F66;         /* 正文 */
  --muted:#7E93A8;        /* 輔助文字 */
  --line:#E4EBF1;         /* 邊框 */
  --wash:#F2F5F7;         /* 灰底 */
  --wash-2:#F7FAFC;
  --brand:#2872FA;        /* 強調藍 */
  --brand-dk:#1559ED;
  --brand-soft:#EAF1FF;
  --warm:#F0562B;         /* 導購橘 */
  --amber:#F59E0B;
  --ok:#12A150;
  --shadow-s:0 2px 10px rgba(25,42,61,.05);
  --shadow-m:0 10px 30px rgba(25,42,61,.08);
  --shadow-l:0 18px 50px rgba(25,42,61,.12);
  --r-s:8px; --r-m:14px; --r-l:18px; --r-xl:24px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "Noto Sans TC", "Microsoft JhengHei", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; font-family:var(--font); font-size:16px; line-height:1.8;
  color:var(--body); background:#fff;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-dk)}
h1,h2,h3,h4{color:var(--ink); margin:0; line-height:1.4; letter-spacing:-.01em; font-weight:700}
p{margin:0}
::selection{background:#CFE0FF}

.wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 24px}
.wrap--narrow{max-width:1170px}

/* ---------- 讀取進度 ---------- */
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--brand); z-index:200; transition:width .1s linear}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line);
}
.hd-inner{display:flex; align-items:center; gap:40px; height:76px}
.logo{display:flex; align-items:center; gap:10px; flex:0 0 auto; color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-mark{
  width:34px; height:34px; border-radius:11px; flex:0 0 auto; display:block;
  background:linear-gradient(145deg,#3C86FF,#1559ED 55%,#0B3FBF);
  box-shadow:0 4px 12px rgba(21,89,237,.28);
}
img.logo-mark{border-radius:0; background:none; box-shadow:none}
.logo-txt{font-size:21px; font-weight:800; letter-spacing:.04em; line-height:1}
.logo-sub{display:block; font-size:10px; letter-spacing:.26em; color:#5F768B; font-weight:700; margin-top:3px}
.nav{display:flex; align-items:center; gap:30px; margin-left:8px}
.nav a{
  position:relative; font-size:15px; font-weight:500; color:#5B7186;
  padding:26px 0; transition:color .2s;
}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--brand); font-weight:700}
.nav a.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:16px;
  width:18px; height:3px; border-radius:2px; background:var(--brand);
}
.hd-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.icon-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:.2s;
}
.icon-btn:hover{border-color:#C9D8E6; background:var(--wash-2)}
.btn-ghost{
  height:42px; padding:0 18px; border-radius:22px; border:1px solid var(--line);
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--ink); background:#fff; transition:.2s;
}
.btn-ghost:hover{border-color:#BFD3E8; color:var(--brand)}
.hd-toggle{display:none}
.demo-chip{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; color:#8C9CAC;
  background:#fff; border:1px solid var(--line); padding:3px 8px; border-radius:6px;
}

/* ---------- Hero ---------- */
.hero{padding:54px 0 40px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center}
.brandbar{
  background:linear-gradient(90deg,#3C86FF 0%,#1F68F5 45%,#1559ED 100%);
  color:#fff; text-align:center; padding:12px 20px;
}
.brandbar span{
  font-size:14.5px; font-weight:700; letter-spacing:.34em; text-indent:.34em;
  display:inline-block;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; color:var(--brand); text-transform:uppercase; margin-bottom:20px;
}
.kicker::before{content:""; width:22px; height:2px; background:var(--brand); border-radius:2px}
.hero h1{
  font-size:clamp(34px,4.2vw,54px); line-height:1.24; letter-spacing:-.025em; font-weight:800;
}
.hero h1 em{font-style:normal; color:var(--brand); position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:10px;
  background:rgba(40,114,250,.13); border-radius:3px; z-index:-1;
}
.hero p.lead{margin-top:22px; font-size:17px; line-height:1.95; color:#52697F; max-width:33em}
.hero-cta{display:flex; align-items:center; gap:14px; margin-top:32px; flex-wrap:wrap}
.btn{
  height:50px; padding:0 26px; border-radius:26px; display:inline-flex; align-items:center; gap:10px;
  font-size:15.5px; font-weight:700; border:1px solid transparent; cursor:pointer; transition:.22s;
}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 24px rgba(40,114,250,.26)}
.btn-primary:hover{background:var(--brand-dk); color:#fff; transform:translateY(-1px); box-shadow:0 14px 30px rgba(40,114,250,.32)}
.btn-line{background:#fff; color:var(--ink); border-color:#D8E3EE}
.btn-line:hover{border-color:#B9CEE6; color:var(--brand); transform:translateY(-1px)}
.hero-stats{display:flex; gap:34px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line)}
.hero-stats b{display:block; font-size:26px; color:var(--ink); line-height:1.2; letter-spacing:-.02em}
.hero-stats span{font-size:12.5px; color:var(--muted); letter-spacing:.02em}
.hero-art{position:relative}
.hero-art img{width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-l)}
.hero-note{
  position:absolute; left:-18px; bottom:26px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; box-shadow:var(--shadow-m); display:flex; gap:10px; align-items:center;
}
.hero-note i{
  width:34px; height:34px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-style:normal; font-size:17px;
}
.hero-note b{display:block; font-size:13.5px; color:var(--ink); line-height:1.4}
.hero-note span{font-size:11.5px; color:var(--muted)}

/* ---------- 分類 chips ---------- */
.chips{
  display:flex; gap:10px; overflow-x:auto; padding:6px 0 26px; scrollbar-width:none;
  border-bottom:1px solid var(--line); margin-bottom:8px;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; height:40px; padding:0 18px; border-radius:20px; border:1px solid var(--line);
  background:#fff; color:#546B80; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:7px;
  transition:.2s;
}
.chip:hover{border-color:#C6D8EA; color:var(--ink); background:var(--wash-2)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chip.on:hover{color:#fff}

/* ---------- 區塊標題 ---------- */
.sec{padding:52px 0 8px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.sec-title{display:flex; align-items:center; gap:12px; font-size:25px; font-weight:800; letter-spacing:-.02em}
.sec-title::before{content:""; width:5px; height:24px; border-radius:3px; background:var(--brand)}
.sec-title small{font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:2px}
.sec-link{font-size:14px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.sec-link:hover{color:var(--brand)}
.sec-note{font-size:12.5px; color:var(--muted)}

/* ---------- 文章卡 ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.card{display:block; color:inherit; border-radius:var(--r-l); transition:.28s; isolation:isolate}
.card:hover{color:inherit; transform:translateY(-4px)}
.card-media{position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--wash); aspect-ratio:4/3}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.035)}
.cat-tag{
  position:absolute; left:12px; top:12px; height:28px; padding:0 12px; border-radius:14px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px); color:var(--ink);
  font-size:12px; font-weight:700; display:inline-flex; align-items:center; letter-spacing:.02em;
}
.card-body{padding:18px 4px 0}
.card h3{font-size:18.5px; line-height:1.55; letter-spacing:-.01em; transition:color .2s}
.card:hover h3{color:var(--brand)}
.card .excerpt{margin-top:9px; font-size:14px; line-height:1.75; color:#6B8299; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.meta{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:12.5px; color:var(--muted)}
.meta .dot{width:3px; height:3px; border-radius:50%; background:#C6D3DF}
.meta .pill{background:var(--wash); color:#5F768B; padding:2px 8px; border-radius:6px; font-weight:600}

/* ---------- 需求找物 band ---------- */
.finder-band{
  margin:64px 0 8px; background:linear-gradient(160deg,#F6F9FF,#EEF4FF 60%,#F7FAFF);
  border:1px solid #E2ECFB; border-radius:var(--r-xl); padding:38px 40px;
}
.finder-band h2{font-size:23px; font-weight:800; letter-spacing:-.02em}
.finder-band p.sub{margin-top:8px; font-size:14.5px; color:#6B8299}
.finder-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px}
.finder-item{
  background:#fff; border:1px solid #E1EAF7; border-radius:var(--r-m); padding:16px 16px 14px;
  color:var(--ink); transition:.22s; display:block;
}
.finder-item:hover{border-color:#B9D3FA; box-shadow:0 10px 24px rgba(40,114,250,.10); transform:translateY(-2px); color:var(--ink)}
.finder-item b{display:block; font-size:14.5px; line-height:1.5}
.finder-item span{display:block; margin-top:6px; font-size:12.5px; color:var(--muted)}
.finder-item i{font-style:normal; color:var(--brand); font-size:12.5px; font-weight:700; display:inline-block; margin-top:10px}

/* ---------- 列表列 ---------- */
.rows{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:56px 132px 1fr auto; gap:22px; align-items:center; padding:20px 6px; border-bottom:1px solid var(--line); transition:.2s}
.row:hover{background:var(--wash-2)}
.row-num{font-size:15px; font-weight:800; color:#B7C7D6; letter-spacing:.04em}
.row:hover .row-num{color:var(--brand)}
.row-thumb{width:132px; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--wash)}
.row-thumb img{width:100%; height:100%; object-fit:cover}
.row-main h3{font-size:16.5px; line-height:1.5; transition:color .2s}
.row:hover .row-main h3{color:var(--brand)}
.row-main .meta{margin-top:8px}
.row-arrow{color:#C2D1DF; font-size:20px}
.row:hover .row-arrow{color:var(--brand)}

/* ---------- 方法論 ---------- */
.method{margin:70px 0 0; padding:44px 0 0; border-top:1px solid var(--line)}
.method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:24px}
.step b{display:flex; align-items:center; gap:10px; font-size:17.5px; color:var(--ink); letter-spacing:-.01em}
.step b i{
  width:26px; height:26px; border-radius:8px; background:var(--brand-soft); color:var(--brand);
  font-style:normal; font-size:13px; font-weight:800; display:grid; place-items:center;
}
.step p{margin-top:10px; font-size:14px; line-height:1.85; color:#6B8299}

/* ---------- Footer ---------- */
.site-footer{margin-top:76px; background:var(--wash); border-top:1px solid var(--line); padding:52px 0 34px}
.ft-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.ft-brand p{margin-top:14px; font-size:13.5px; line-height:1.9; color:#6B8299; max-width:26em}
.ft-tagline{margin-top:16px !important; font-size:14.5px !important; font-weight:700; color:var(--ink) !important; letter-spacing:.02em}
.ft-col h4{font-size:13px; letter-spacing:.1em; color:#5F768B; font-weight:800}
.ft-col a{display:block; margin-top:11px; font-size:13.5px; color:#5F768B}
.ft-col a:hover{color:var(--brand)}
.ft-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid #E1E8EF;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:#8C9CAC;
}
.disclosure{
  margin-top:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  padding:14px 18px; font-size:12.5px; line-height:1.8; color:#7E93A8;
}

/* ==========================================================
   文章頁
   ========================================================== */
.crumb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); padding:26px 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--brand)}
.crumb span{color:#C2D1DF}

.art-head{padding:18px 0 26px; max-width:860px}
.art-tagline{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.tag{
  font-size:12px; font-weight:700; padding:5px 11px; border-radius:7px;
  background:var(--brand-soft); color:var(--brand); letter-spacing:.02em;
}
.tag--gray{background:var(--wash); color:#5F768B}
.tag--warm{background:#FFF1EB; color:#D9491F}
.art-title{font-size:clamp(27px,3.4vw,38px); line-height:1.38; letter-spacing:-.025em; font-weight:800}
.art-dek{margin-top:16px; font-size:16.5px; line-height:1.9; color:#5B7186; max-width:52em}
.art-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; font-size:13px; color:var(--muted)}
.art-meta .who{display:flex; align-items:center; gap:8px; color:#4D6579}
.art-meta .avatar{
  width:28px; height:28px; border-radius:50%; background:linear-gradient(140deg,#4C8DFF,#1559ED);
  color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center;
}
.art-meta .sep{width:1px; height:14px; background:var(--line)}

.art-hero{margin:6px 0 40px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-m)}
.art-hero img{width:100%; aspect-ratio:21/9; object-fit:cover}

.art-layout{display:grid; grid-template-columns:minmax(0,810px) 300px; gap:60px; align-items:start}
.art-body{font-size:16.5px; line-height:2.0; letter-spacing:.012em; color:#3D5468; min-width:0}
.art-body > p{margin:0 0 22px}
.art-body > p.lead{font-size:17.5px; color:#334A5F}
.art-body .first::first-letter{
  float:left; font-size:52px; line-height:.92; font-weight:800; color:var(--brand);
  margin:6px 12px 0 0; letter-spacing:-.03em;
}
.art-body strong{color:var(--ink); font-weight:700}
.art-body em{font-style:normal; background:linear-gradient(transparent 62%,#DCE9FF 62%); padding:0 2px}
.art-body a.inline{border-bottom:1px solid #BFD6F7}

/* h2：灰底標題帶（picklogs 的核心識別） */
.art-body h2{
  font-size:24px; line-height:1.5; letter-spacing:-.02em; font-weight:800;
  background:var(--wash); border-left:4px solid var(--brand); border-radius:0 10px 10px 0;
  padding:12px 18px; margin:54px 0 24px; scroll-margin-top:100px;
}
.art-body h2 .h2-num{color:var(--brand); font-size:15px; font-weight:800; letter-spacing:.06em; display:block; margin-bottom:3px}
.art-body h3{font-size:19.5px; line-height:1.6; margin:36px 0 14px; letter-spacing:-.01em}
.art-body ul,.art-body ol{margin:0 0 22px; padding-left:0; list-style:none}
.art-body ul li{position:relative; padding-left:26px; margin-bottom:10px}
.art-body ul li::before{
  content:""; position:absolute; left:6px; top:14px; width:6px; height:6px; border-radius:2px;
  background:var(--brand); opacity:.65;
}
.art-body ul.check li::before{
  content:"✓"; background:none; left:0; top:0; font-size:14px; color:var(--ok); font-weight:800; opacity:1;
}
.art-body ol{counter-reset:ol}
.art-body ol li{position:relative; padding-left:34px; margin-bottom:12px; counter-increment:ol}
.art-body ol li::before{
  content:counter(ol); position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:7px;
  background:var(--brand-soft); color:var(--brand); font-size:12px; font-weight:800; display:grid; place-items:center;
}

/* 開場引言塊 */
.pull{
  border-left:3px solid var(--line); padding:2px 0 2px 20px; margin:0 0 26px;
  font-size:16.5px; color:#5B7186;
}
.callout{
  border-radius:var(--r-m); padding:18px 20px; margin:0 0 26px; font-size:15.5px; line-height:1.9;
  border-left:4px solid var(--brand); background:#F5F9FF; color:#2F4B69;
}
.callout b{display:block; font-size:14px; letter-spacing:.02em; margin-bottom:6px; color:var(--brand-dk)}
.callout--warn{background:#FFF7F4; border-left-color:var(--warm); color:#6B3A28}
.callout--warn b{color:#C8421A}
.callout--gray{background:var(--wash-2); border-left-color:#C6D3DF; color:#54697E}
.callout--gray b{color:#4A6076}

/* 首選卡 */
.top-pick{
  position:relative; border:1.5px solid #CFE0FF; border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(180deg,#F8FBFF,#fff 55%); box-shadow:0 12px 34px rgba(40,114,250,.09);
  margin:0 0 30px;
}
.top-pick-head{
  display:flex; align-items:center; gap:10px; padding:14px 22px; background:var(--brand); color:#fff;
  font-size:13.5px; font-weight:800; letter-spacing:.06em;
}
.top-pick-head span{margin-left:auto; font-weight:600; opacity:.85; letter-spacing:0}
.top-pick-body{padding:22px 24px 24px; display:grid; grid-template-columns:1fr 150px; gap:24px; align-items:center}
.top-pick-body h3{font-size:21px; margin:0 0 10px; line-height:1.45}
.top-pick-body p{font-size:15px; line-height:1.9; color:#4B6377; margin:0}
.top-pick-body .why-price{margin-top:14px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.top-pick-body .why-price b{font-size:26px; color:var(--warm); letter-spacing:-.02em}
.top-pick-body .why-price small{font-size:12px; color:var(--muted)}
.top-pick-media{border-radius:12px; overflow:hidden; background:#fff; aspect-ratio:1/1; display:grid; place-items:center}
.top-pick-media img{width:100%; height:100%; object-fit:cover}
.top-pick-media .ph{font-size:12px; color:#A9BACB; text-align:center; padding:10px; line-height:1.6}
.top-pick .btn-shopee{margin:0 24px 24px; width:calc(100% - 48px); justify-content:center}

/* 10 秒懶人包 */
.finder10{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 26px}
.f10{
  border:1px solid var(--line); border-radius:var(--r-m); padding:14px 16px; background:#fff;
  transition:.2s; display:block; color:inherit;
}
.f10:hover{border-color:#BFD6F7; background:#FBFDFF; color:inherit; box-shadow:var(--shadow-s)}
.f10 b{display:block; font-size:13px; color:var(--brand); font-weight:800; letter-spacing:.02em}
.f10 span{display:block; margin-top:4px; font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.55}
.f10 em{font-style:normal; display:block; margin-top:6px; font-size:12.5px; color:var(--muted)}

/* 選購重點 */
.kp{display:flex; flex-direction:column; gap:0; margin:0 0 28px; border-top:1px solid var(--line)}
.kp-row{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:20px 4px; border-bottom:1px solid var(--line)}
.kp-num{
  width:32px; height:32px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  font-size:14px; font-weight:800; display:grid; place-items:center; margin-top:2px;
}
.kp-row h4{font-size:16.5px; margin:0 0 6px; line-height:1.5}
.kp-row p{font-size:15px; line-height:1.9; color:#5B7186; margin:0}

/* 規格表 */
.table-wrap{margin:0 0 26px; border:1px solid var(--line); border-radius:var(--r-m); overflow:auto}
table.spec{width:100%; border-collapse:collapse; font-size:14px; min-width:660px}
table.spec th,table.spec td{padding:13px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
table.spec thead th{
  background:var(--wash-2); color:var(--ink); font-weight:800; font-size:13.5px; line-height:1.5;
  position:sticky; top:0; white-space:nowrap;
}
table.spec thead th small{display:block; font-weight:600; color:var(--muted); font-size:11.5px; margin-top:2px}
table.spec tbody td:first-child{font-weight:700; color:var(--ink)}
table.spec tbody tr:last-child td{border-bottom:none}
table.spec tbody tr:hover{background:#FCFDFF}
table.spec .price{color:var(--warm); font-weight:800; white-space:nowrap}
.table-hint{margin:-14px 0 28px; font-size:12.5px; color:var(--muted)}

/* 產品卡 */
.product{
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; background:#fff;
  margin:0 0 34px; box-shadow:var(--shadow-s); scroll-margin-top:100px;
}
.product-head{padding:22px 22px 16px; display:flex; align-items:flex-start; gap:14px}
.num{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:16px; font-weight:800;
}
.product-head .t{flex:1; min-width:0}
.product-head h3{font-size:20px; line-height:1.45; margin:0}
.product-head .badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:9px}
.product-head .badge{
  font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px;
  background:#FFF4ED; color:#C8421A; border:1px solid #FFDCCB;
}
.product-head .badge--blue{background:var(--brand-soft); color:var(--brand-dk); border-color:#D3E2FF}
.product-head .badge--gray{background:var(--wash); color:#5F768B; border-color:var(--line)}

.slider{position:relative; background:var(--wash-2)}
.slider-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:16/9; max-height:380px}
.slider-track::-webkit-scrollbar{display:none}
.slider-track .shot{
  flex:0 0 100%; scroll-snap-align:start; display:grid; place-items:center; background:#F7FAFC;
  color:#A9BACB; font-size:13px; text-align:center; padding:20px; line-height:1.7;
}
.slider-track img{width:100%; height:100%; object-fit:cover}
.img-note{position:absolute; left:14px; bottom:12px; font-size:11px; letter-spacing:.04em; color:#fff; background:rgba(25,42,61,.42); padding:4px 9px; border-radius:6px; backdrop-filter:blur(2px)}
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:44px; border:none;
  background:rgba(25,42,61,.45); color:#fff; font-size:17px; cursor:pointer; display:grid; place-items:center;
  transition:.2s; z-index:5;
}
.slider-nav:hover{background:rgba(25,42,61,.75)}
@media (hover:hover){
  .slider-nav{opacity:0}
  .slider:hover .slider-nav,.slider:focus-within .slider-nav{opacity:.85}
}
.slider-nav.prev{left:0; border-radius:0 8px 8px 0}
.slider-nav.next{right:0; border-radius:8px 0 0 8px}
.dots{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; pointer-events:none}
.dots i{width:8px; height:4px; border-radius:2px; background:rgba(25,42,61,.22); transition:.25s}
.dots i.on{width:20px; background:var(--brand)}

.p-body{padding:20px 22px 4px}
.why{
  background:#FFFBF6; border-left:4px solid var(--amber); border-radius:0 10px 10px 0;
  padding:15px 18px; margin:0 0 14px; font-size:15.5px; line-height:1.9; color:#5A4A38;
}
.why b{display:block; font-size:12.5px; color:#B8770F; letter-spacing:.06em; margin-bottom:5px}
.quote{
  background:#F3F8FF; border-left:4px solid var(--brand); border-radius:0 10px 10px 0;
  padding:15px 18px; margin:0 0 18px; font-size:15px; line-height:1.9; color:#2F4E70;
}
.quote b{display:block; font-size:12.5px; color:var(--brand-dk); letter-spacing:.06em; margin-bottom:5px}
.feat{list-style:none; padding:0; margin:0 0 16px}
.feat li{position:relative; padding:9px 0 9px 26px; border-bottom:1px solid #F1F5F8; font-size:15px; color:#3D5468}
.feat li:last-child{border-bottom:none}
.feat li::before{content:"✓"; position:absolute; left:0; top:9px; color:var(--ok); font-weight:800}
.feat li b{color:var(--ink)}
.warnbox{
  background:#FFF6F6; border-left:4px solid #F05252; border-radius:0 10px 10px 0;
  padding:14px 18px; margin:0 0 18px; font-size:14.5px; line-height:1.85; color:#7A3131;
}
.warnbox b{color:#C53030; font-weight:800}
.specs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; margin:0 0 20px;
  padding:16px 18px; background:var(--wash-2); border-radius:12px; font-size:14px;
}
.specs div{display:flex; gap:8px; color:#4B6377}
.specs span{color:var(--muted); flex:0 0 auto}
.buy{
  display:flex; align-items:center; gap:16px; padding:16px 22px 20px; border-top:1px solid var(--line);
  background:#FCFDFE; flex-wrap:wrap;
}
.buy .price{display:flex; flex-direction:column}
.buy .price small{font-size:11.5px; color:var(--muted)}
.buy .price b{font-size:28px; color:var(--warm); letter-spacing:-.02em; line-height:1.3}
.btn-shopee{
  margin-left:auto; height:50px; padding:0 26px; border-radius:12px; background:var(--warm); color:#fff;
  font-size:15.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:.22s; box-shadow:0 8px 20px rgba(240,86,43,.22);
}
.btn-shopee:hover{background:#DC4A20; color:#fff; transform:translateY(-1px); box-shadow:0 12px 26px rgba(240,86,43,.3)}

/* 選擇障礙決策卡 */
.decide{display:flex; flex-direction:column; gap:14px; margin:0 0 26px}
.decide-card{
  border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px; background:#fff;
  box-shadow:var(--shadow-s);
}
.decide-card .who-tag{
  display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:7px;
  background:var(--ink); color:#fff; font-size:12px; font-weight:700; margin-bottom:12px;
}
.decide-card h4{font-size:16px; margin:0 0 10px; line-height:1.6}
.decide-card .line{font-size:14.5px; color:#54697E; line-height:1.85; margin:0 0 8px}
.decide-card .line b{color:var(--ink)}
.decide-card .verdict{
  margin-top:12px; padding:12px 16px; border-radius:10px; background:var(--brand-soft);
  font-size:14.5px; color:#14478F; font-weight:700;
}
.decide-card .verdict em{font-style:normal; color:var(--brand); }

/* FAQ */
.faq{border-top:1px solid var(--line); margin:0 0 10px}
details.q{border-bottom:1px solid var(--line); padding:2px 0}
details.q summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.6;
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:8px; background:var(--wash); color:#5F768B;
  display:grid; place-items:center; font-size:17px; font-weight:600; transition:.2s;
}
details.q[open] summary::after{content:"−"; background:var(--brand); color:#fff}
details.q[open] summary{color:var(--brand-dk)}
details.q .a{padding:0 44px 22px 0; font-size:15.5px; line-height:1.95; color:#4B6377}

/* 延伸閱讀 */
.related{margin:60px 0 0; padding-top:34px; border-top:1px solid var(--line)}
.related h2{font-size:20px; margin-bottom:20px; display:flex; align-items:center; gap:10px}
.related h2::before{content:""; width:4px; height:18px; border-radius:2px; background:var(--brand)}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rel-card{border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; color:inherit; transition:.22s; background:#fff}
.rel-card:hover{box-shadow:var(--shadow-m); transform:translateY(-3px); color:inherit}
.rel-card .im{aspect-ratio:16/10; background:var(--wash); overflow:hidden}
.rel-card .im img{width:100%; height:100%; object-fit:cover}
.rel-card .tx{padding:14px 16px 16px; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.6}
.rel-card:hover .tx{color:var(--brand)}

/* 側欄 */
.rail{position:sticky; top:100px; display:flex; flex-direction:column; gap:22px}
.rail-card{border:1px solid var(--line); border-radius:var(--r-m); padding:18px 18px 8px; background:#fff}
.rail-card h4{font-size:13px; letter-spacing:.1em; color:#5F768B; font-weight:800; margin-bottom:12px}
.toc{list-style:none; margin:0; padding:0 0 8px; max-height:340px; overflow:auto}
.toc li{margin:0}
.toc a{
  display:block; padding:7px 0 7px 12px; border-left:2px solid var(--line); font-size:13.5px;
  color:#5F768B; line-height:1.6; transition:.18s;
}
.toc a:hover{color:var(--brand); border-left-color:#BFD6F7}
.toc a.on{color:var(--brand); font-weight:700; border-left-color:var(--brand); background:#F6FAFF}
.rail-list{display:flex; flex-direction:column; gap:2px; padding-bottom:10px}
.rail-item{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid #F1F5F8; color:inherit}
.rail-item:last-child{border-bottom:none}
.rail-item:hover .rt{color:var(--brand)}
.rail-item .rim{width:62px; height:52px; border-radius:8px; overflow:hidden; background:var(--wash); flex:0 0 auto}
.rail-item .rim img{width:100%; height:100%; object-fit:cover}
.rail-item .rt{font-size:13px; font-weight:600; line-height:1.55; color:var(--ink); transition:.2s}
.rail-cta{background:linear-gradient(160deg,#F1F7FF,#E9F2FF); border:1px solid #DEEBFB; border-radius:var(--r-m); padding:20px}
.rail-cta b{display:block; font-size:15px; color:var(--ink); line-height:1.55}
.rail-cta p{font-size:12.5px; color:#6B8299; margin-top:8px; line-height:1.8}
.rail-cta a{display:inline-flex; margin-top:14px; font-size:13px; font-weight:700}

/* 文章頁尾 */
.art-foot{margin-top:26px; padding:20px 22px; background:var(--wash-2); border-radius:var(--r-m); font-size:13px; line-height:1.85; color:#7E93A8}
.art-foot b{color:#5F768B}

/* 搜尋層 */
.search-layer{
  position:fixed; inset:0; background:rgba(25,42,61,.42); backdrop-filter:blur(3px);
  z-index:300; display:none; padding:14vh 20px 20px;
}
.search-layer.on{display:block}
.search-box{max-width:640px; margin:0 auto; background:#fff; border-radius:18px; padding:18px; box-shadow:var(--shadow-l)}
.search-box input{
  width:100%; height:52px; border:1px solid var(--line); border-radius:12px; padding:0 16px;
  font-size:16px; font-family:var(--font); color:var(--ink); outline:none;
}
.search-box input:focus{border-color:#BFD6F7; box-shadow:0 0 0 4px rgba(40,114,250,.1)}
.search-res{margin-top:10px; max-height:46vh; overflow:auto}
.search-res a{display:block; padding:12px 10px; border-radius:10px; color:var(--ink); font-size:14.5px}
.search-res a:hover{background:var(--wash-2); color:var(--brand)}
.search-res a small{display:block; color:var(--muted); font-size:12px; margin-top:2px}

/* ---------- 首頁補充：篩選、索引、方法論 ---------- */
.sec--first{padding-top:30px}
button.chip{font-family:var(--font); cursor:pointer; -webkit-appearance:none}
.chip em{font-style:normal; font-size:11.5px; color:#9AABBA; font-weight:700; margin-left:2px}
.chip.on em{color:rgba(255,255,255,.7)}
.card.hide{display:none}

.style-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.style-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px;
  padding:24px 22px 22px; border:1px solid var(--line); border-radius:var(--r-m);
  background:linear-gradient(170deg,#FBFDFF,#fff 60%); color:inherit; transition:.22s;
}
.sc-letter{
  position:absolute; right:14px; top:8px; font-size:64px; font-weight:800; line-height:1;
  color:#EAF1FF; letter-spacing:-.04em; pointer-events:none;
}
.style-card:hover{border-color:#C6DBF8; box-shadow:var(--shadow-m); transform:translateY(-3px); color:inherit}
.sc-tag{font-size:11.5px; font-weight:700; color:var(--brand); letter-spacing:.02em}
.style-card b{font-size:17px; color:var(--ink); line-height:1.5}
.style-card p{font-size:13.5px; line-height:1.85; color:#6B8299; flex:1}
.style-card i{font-style:normal; font-size:12.5px; font-weight:700; color:var(--brand); margin-top:4px}
.index-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px 40px}
.idx-group h3{
  font-size:13px; letter-spacing:.08em; color:#54697E; font-weight:800;
  padding-bottom:10px; border-bottom:2px solid var(--ink); display:flex; align-items:center; justify-content:space-between;
}
.idx-group h3 span{font-size:11px; color:var(--muted); background:var(--wash); padding:2px 7px; border-radius:6px; letter-spacing:0}
.idx-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 2px; border-bottom:1px solid var(--line); color:inherit}
.idx-row:hover{color:var(--brand)}
.idx-row:hover .idx-t{color:var(--brand)}
.idx-t{font-size:14px; font-weight:600; color:var(--ink); line-height:1.6; transition:.18s}
.idx-m{flex:0 0 auto; font-size:11.5px; color:var(--muted); white-space:nowrap}

.method{margin:66px 0 0; padding:0; border-top:none}
.method-inner{background:var(--wash-2); border:1px solid var(--line); border-radius:var(--r-xl); padding:34px 36px 36px}
.method-inner .sec-head{margin-bottom:20px}
.method-grid{margin-top:0}
.step b i{width:30px; height:30px; border-radius:9px}
.step p{color:#5B7186}

/* ---------- 首頁：主次分明的版面 ---------- */
/* 修：卡片內 span 未設 block 導致高度塌陷、文字疊到圖片與下一區塊 */
.card-media,.card-body,.feat-media,.feat-body,.mini-media,.mini-body,.hc-media,.hc-body{display:block}
.card h3,.card .meta,.feat h3,.mini h3{display:block}
.card .excerpt,.feat .excerpt{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}

.hero{padding:56px 0 34px}
.hero h1{font-size:clamp(36px,4.4vw,58px); line-height:1.2}
.hero p.lead{margin-top:20px; font-size:17px; max-width:30em; color:#4E6579}
.hero-src{margin-top:22px; font-size:12.5px; color:var(--muted); letter-spacing:.01em}

/* 右側：主打卡（取代抽象圖，第一屏就有明確重點） */
.hero-card{
  display:block; background:#fff; border:1px solid var(--line); border-radius:20px;
  overflow:hidden; box-shadow:0 18px 44px rgba(25,42,61,.10); color:inherit; transition:.25s;
}
.hero-card:hover{transform:translateY(-3px); box-shadow:0 24px 54px rgba(25,42,61,.14); color:inherit}
.hc-media{display:block; overflow:hidden; background:var(--wash)}
.hc-media img{width:100%; aspect-ratio:16/11; object-fit:cover; transition:transform .5s}
.hero-card:hover .hc-media img{transform:scale(1.03)}
.hc-body{padding:18px 20px 20px}
.hc-tag{font-size:11.5px; font-weight:800; color:var(--brand); letter-spacing:.06em}
.hc-body b{display:block; font-size:18.5px; line-height:1.6; color:var(--ink); margin-top:8px; letter-spacing:-.01em}
.hc-meta{display:block; font-size:12.5px; color:var(--muted); margin-top:9px}
.hc-go{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:14px; font-weight:800; color:var(--brand)}

/* 最新評比：兩欄大卡 */
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:30px}
.grid2 .card-media{aspect-ratio:16/10}
.grid2 .card h3{font-size:21px; line-height:1.5}
.grid2 .card .excerpt{-webkit-line-clamp:2}
/* 最新評比：一主二副 */
.mix-grid{display:grid; grid-template-columns:1.42fr 1fr; gap:34px; align-items:start}
.feat{display:block; color:inherit}
.feat-media{position:relative; display:block; border-radius:var(--r-l); overflow:hidden; background:var(--wash)}
.feat-media img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .5s}
.feat:hover .feat-media img{transform:scale(1.025)}
.feat-body{padding-top:16px}
.feat h3{font-size:23px; line-height:1.5; letter-spacing:-.015em; transition:color .2s}
.feat:hover h3{color:var(--brand)}
.feat .excerpt{margin-top:10px; font-size:14.5px; line-height:1.85; color:#667E93}
.mini-list{display:flex; flex-direction:column; gap:20px}
.mini{display:grid; grid-template-columns:128px 1fr; gap:16px; color:inherit; align-items:start}
.mini-media{border-radius:12px; overflow:hidden; background:var(--wash)}
.mini-media img{width:100%; aspect-ratio:1/1; object-fit:cover}
.mini-tag{font-size:11.5px; font-weight:700; color:var(--brand); letter-spacing:.04em}
.mini h3{font-size:15.5px; line-height:1.6; margin-top:5px; transition:color .2s}
.mini:hover h3{color:var(--brand)}
.mini .meta{margin-top:8px}

/* 需求帶：降低重量，改成白底細框 */
.finder-band{margin:68px 0 0; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 32px}
.fb-head h2{font-size:20px; letter-spacing:-.02em}
.fb-head p{margin-top:7px; font-size:13.5px; color:var(--muted)}
.finder-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px}
.finder-item{background:var(--wash-2); border:1px solid transparent; border-radius:12px; padding:14px 15px 13px}
.finder-item:hover{background:#fff; border-color:#C6DBF8; box-shadow:0 8px 20px rgba(40,114,250,.08)}
.fi-icon{position:absolute; left:15px; top:15px; color:var(--brand); opacity:.85}
.finder-item{position:relative; padding-left:46px}
.finder-item b{font-size:14px}
.finder-item span{font-size:12px; margin-top:5px}
.finder-item i{margin-top:8px; font-size:12px}

.sec{padding:66px 0 8px}
.sec--first{padding-top:14px}
.sec-title{font-size:27px}
.sec-title::before{height:26px}

/* ---------- RWD ---------- */
@media (max-width:1080px){
  .mix-grid{grid-template-columns:1fr; gap:28px}
  .mini-list{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  .finder-grid{grid-template-columns:repeat(2,1fr)}
  .method-inner{padding:28px 24px 30px}
  .art-layout{grid-template-columns:minmax(0,1fr); gap:0}
  .rail{position:static; margin-top:34px; flex-direction:row; flex-wrap:wrap}
  .rail > *{flex:1 1 300px}
  .hero-grid{gap:36px}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-note{left:14px; bottom:14px}
  .grid3{grid-template-columns:repeat(2,1fr); gap:20px}
  .finder-grid{grid-template-columns:repeat(2,1fr)}
  .method-grid{grid-template-columns:1fr; gap:22px}
  .row{grid-template-columns:36px 96px 1fr; gap:14px}
  .row-thumb{width:96px}
  .row-arrow{display:none}
}
@media (max-width:720px){
  .nav,.hd-actions .btn-ghost,.demo-chip{display:none}
  .hd-toggle{display:grid}
  .hd-inner{gap:14px; height:64px}
  .nav.open{
    display:flex; position:absolute; left:0; right:0; top:64px; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 18px;
    border-bottom:1px solid var(--line); box-shadow:0 20px 30px rgba(25,42,61,.08);
  }
  .nav.open a{padding:15px 0; border-bottom:1px solid #F1F5F8; font-size:16px}
  .nav.open a.active::after{display:none}
  .wrap{padding:0 18px}
  .hero{padding:30px 0 26px}
  .mini-list{grid-template-columns:1fr}
  .mini{grid-template-columns:104px 1fr}
  .feat h3{font-size:20px}
  .grid3{grid-template-columns:1fr}
  .style-grid{grid-template-columns:1fr}
  .method-inner{padding:22px 18px 24px; border-radius:18px}
  .card-media{aspect-ratio:16/10}
  .finder-band{padding:24px 18px; border-radius:18px}
  .finder-grid{grid-template-columns:1fr}
  .sec{padding:48px 0 8px}
  .sec-title{font-size:22px}
  .chips{padding-bottom:20px}
  .art-body{font-size:16px; line-height:1.95}
  .art-body h2{font-size:20px; padding:10px 14px; margin:38px 0 18px}
  .art-body h3{font-size:17.5px}
  .art-hero{border-radius:16px; margin-bottom:26px}
  .art-hero img{aspect-ratio:16/10}
  .top-pick-body{grid-template-columns:1fr; gap:16px}
  .top-pick-media{aspect-ratio:16/9}
  .finder10{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .buy{gap:12px}
  .btn-shopee{margin-left:0; width:100%}
  .related-grid{grid-template-columns:1fr}
  .product-head{padding:18px 16px 12px}
  .p-body{padding:16px 16px 0}
  .why,.quote,.warnbox{margin-left:0; margin-right:0}
  .decide-card{padding:16px}
  .ft-grid{grid-template-columns:1fr; gap:26px}
  /* 手機觸控目標 */
  .chip{height:44px}
  .btn{height:52px}
  details.q summary{padding:18px 40px 18px 0; font-size:16px}
  .toc a{padding:11px 0 11px 12px; font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}