:root { color-scheme: light; --ink:#282522; --paper:#f6f3ed; --line:#d9d0c3; --accent:#785940; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif; line-height:1.9; }
a { color:var(--accent); text-underline-offset:5px; overflow-wrap:anywhere; }
a:hover { color:#3c2818; }
a:focus-visible,summary:focus-visible { outline:3px solid #ab8862; outline-offset:5px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px clamp(20px,5vw,72px); border-bottom:1px solid var(--line); font-size:13px; }
.brand { letter-spacing:.2em; font-size:21px; text-decoration:none; color:var(--ink); font-weight:600; }
.brand span { font-size:12px; letter-spacing:.07em; margin-left:14px; font-weight:400; }
.reading { max-width:830px; margin:0 auto; padding:60px 32px 30px; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--accent); }
h1 { font-size:clamp(31px,4vw,44px); line-height:1.5; font-weight:500; letter-spacing:.025em; margin:20px 0; overflow-wrap:anywhere; }
.byline { font-size:13px; color:#625b51; margin:16px 0 30px; }
.lead { font-size:20px; line-height:1.95; border-left:2px solid var(--accent); padding-left:22px; }
.jump { display:flex; flex-wrap:wrap; gap:12px 24px; margin:30px 0 45px; font-size:14px; border-bottom:1px solid var(--line); padding-bottom:18px; }
h2 { font-size:25px; line-height:1.6; font-weight:500; margin:0 0 20px; }
h3 { font-size:19px; line-height:1.7; font-weight:600; margin:0 0 12px; }
section { margin:46px 0; scroll-margin-top:24px; }
p { margin:0 0 20px; overflow-wrap:anywhere; }
.reading article { font-size:17px; }
.quick-list { padding-left:24px; margin:0 0 24px; }
.quick-list li { margin:0 0 16px; padding-left:3px; overflow-wrap:anywhere; }
.comparison { width:100%; table-layout:fixed; border-collapse:collapse; margin:0 0 24px; font-size:16px; }
.comparison th,.comparison td { border:1px solid var(--line); padding:12px 10px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.comparison thead th { background:#eae3d8; font-weight:600; }
.comparison th:first-child { width:20%; }
.comparison tbody th { font-weight:500; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.faq-item { border-top:1px solid var(--line); padding:24px 0 4px; }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.cta { display:inline-block; padding:4px 12px; background:#ece3d6; margin:2px 0; text-decoration:none; }
.related { background:#eee7dc; border-radius:2px; padding:28px; margin-top:42px; }
.related h2 { font-size:20px; }
.related ul { padding-left:22px; margin:0; }
.related li { margin:8px 0; }
summary { cursor:pointer; }
footer { font-size:12px; color:#746c60; text-align:center; margin:50px 0 10px; }
.intro { max-width:700px; color:#64594c; margin-bottom:45px; }
@media (max-width:650px) {
 .topbar { padding:18px 20px; flex-wrap:wrap; gap:12px; }
 .brand span { display:none; }
 .reading { padding:36px 22px 20px; }
 .lead { font-size:18px; padding-left:16px; }
 .reading article { font-size:16px; }
 .quick-list { padding-left:20px; }
 .comparison { font-size:15px; line-height:1.8; }
 .comparison th,.comparison td { padding:10px 7px; }
 h2 { font-size:22px; }
 h3 { font-size:18px; }
 .byline { font-size:12px; }
 .related { padding:22px; }
 dl,.overview-card dl { grid-template-columns:1fr; gap:4px; }
}

/* 表格保留原有語意與內容，窄螢幕只在表格區域左右捲動。 */
.table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin-bottom:24px}
.table-scroll:focus-visible{outline:3px solid #ab8862;outline-offset:3px}
.table-scroll .comparison{margin-bottom:0}
.table-help{display:none;color:var(--accent);font-size:14px;margin-bottom:10px}
.topbar a,.jump a,.cta{min-height:44px;display:inline-flex;align-items:center}
.error-page{min-height:65vh}
@media(max-width:650px){
  .table-scroll .comparison{min-width:580px;font-size:16px}
  .table-help{display:block}
  .jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .jump a{justify-content:center;min-width:0;padding:6px 4px;border:1px solid var(--line);text-align:center}
}

/* 完整真實影片畫面；不裁切配戴前後成果。 */
.wear-showcase{border-top:1px solid var(--line);margin-top:56px;padding-top:36px;scroll-margin-top:24px}
.wear-kicker{font-size:12px;letter-spacing:.12em;color:var(--accent);margin:0 0 14px}
.wear-showcase h2{margin:0 0 18px}
.wear-intro{line-height:1.9;max-width:42rem}
.wear-hint{font-size:14px;color:var(--accent);margin:0 0 24px}
.wear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.wear-card{margin:0;min-width:0}
.video-frame{position:relative;background:#1d1a18;aspect-ratio:3/4;overflow:hidden}
.video-frame video{display:block;width:100%;height:100%;object-fit:contain}
.video-trigger{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:0;border-radius:0;color:#fff;background:linear-gradient(transparent 30%,rgba(0,0,0,.45));font:inherit;cursor:pointer;min-height:44px}
.video-trigger[hidden]{display:none}
.video-trigger:focus-visible{outline:3px solid #e7c79e;outline-offset:-4px}
.play-symbol{display:grid;place-items:center;width:58px;height:58px;background:rgba(28,22,20,.78);border:1px solid rgba(255,255,255,.7);border-radius:50%;font-size:20px;padding-left:3px}
.video-duration{font-size:12px;letter-spacing:.08em}
.wear-card figcaption{font-size:14px;color:var(--accent);margin-top:12px;line-height:1.7}
.video-status{font-size:14px;min-height:1.8em;color:var(--accent)}
@media(max-width:650px){.wear-grid{grid-template-columns:1fr;gap:28px}.wear-showcase{margin-top:40px;padding-top:28px}.video-frame{max-width:420px;margin-inline:auto}.wear-card figcaption{max-width:420px;margin-inline:auto}.wear-intro{font-size:16px}}