:root { --ink:#17212b; --muted:#5d6b75; --line:#dbe4e5; --paper:#f7f8f5; --teal:#0f766e; --dark:#0b514d; --gold:#b88932; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); }
.nav,.wrap { width:min(1120px,calc(100% - 32px)); margin:auto; }
.nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:900; }
.brand img { width:76px; height:48px; object-fit:contain; }
.brand small { display:block; color:var(--gold); font-size:.8rem; }
.nav-link { color:var(--teal); font-weight:800; }
.hero { padding:62px 0 45px; background:linear-gradient(115deg,#073f3c,#12736d); color:#fff; }
.breadcrumb { color:#ccece7; font-size:.92rem; font-weight:700; }
.hero h1 { max-width:800px; margin:13px 0 10px; font-size:clamp(2.05rem,5vw,3.8rem); line-height:1.16; }
.hero p { max-width:720px; margin:0; color:#e0f1ef; font-size:1.08rem; }
.section { padding:54px 0; }
.product-layout { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(320px,.97fr); gap:38px; align-items:start; }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.gallery img { width:100%; aspect-ratio:1/1; object-fit:contain; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 14px 35px rgba(20,42,45,.1); }
.eyebrow { margin:0 0 8px; color:var(--teal); font-size:.9rem; font-weight:900; }
h2 { margin:0; font-size:clamp(1.65rem,3vw,2.35rem); line-height:1.3; }
.lead { margin:16px 0 22px; color:var(--muted); font-size:1.06rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.tag-list span { padding:5px 10px; border-radius:999px; color:var(--dark); background:#dff0ed; font-size:.88rem; font-weight:800; }
.spec { overflow:hidden; margin:24px 0; border:1px solid var(--line); border-radius:12px; background:#fff; }
.spec div { display:grid; grid-template-columns:130px 1fr; border-bottom:1px solid var(--line); }
.spec div:last-child { border:0; }
.spec dt,.spec dd { margin:0; padding:13px 15px; }
.spec dt { color:var(--dark); background:#eef6f4; font-weight:900; }
.spec dd { color:#384651; }
.notice { padding:17px 18px; border-left:4px solid var(--gold); border-radius:0 10px 10px 0; background:#fff8e8; color:#655224; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; margin-top:23px; padding:0 20px; border-radius:8px; color:#fff; background:var(--teal); font-weight:900; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product-cards { margin-top:52px; }
.benefit { padding:22px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.benefit-image { width:calc(100% + 44px); aspect-ratio:4/3; margin:-22px -22px 18px; border-radius:12px 12px 0 0; object-fit:contain; background:#eef4f2; }
.benefit h3 { margin:0 0 7px; color:var(--dark); font-size:1.08rem; }
.benefit p { margin:0; color:var(--muted); }
.faq { display:grid; gap:12px; margin-top:20px; }
.faq details { padding:15px 17px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.faq summary { cursor:pointer; font-weight:900; }
.faq p { margin:12px 0 0; color:var(--muted); }
footer { padding:25px 0; color:#daeae8; background:#17212b; font-size:.92rem; }
@media(max-width:760px){ .nav { align-items:flex-start; padding:12px 0; } .nav-link { padding-top:14px; } .hero { padding:44px 0 36px; } .product-layout,.benefits,.gallery { grid-template-columns:1fr; } .spec div { grid-template-columns:105px 1fr; } .spec dt,.spec dd { padding:11px; } }