/* SAWA 第十三輪「第二版」共用樣式（2026-11-11 使用者選定：暖白底、圓角卡片、由上打光的柔和陰影）。
   首頁以外的頁面只載入 fonts.css 與這個檔；首頁仍用 home_v2.css，不受影響。
   JS 會用到的 class（.vframe .m3d .stage .model-overlay .qa-* .consent* .inquiry-form .carousel* .pm-* .products .card .ph）都在這裡重新定義。 */
*,*::before,*::after{box-sizing:border-box}
:root{
 --bg:#faf8f4;--bg2:#f3f0ea;--bg3:#e9e5dc;--card:#fff;
 --ink:#1a1814;--text:#33302a;--mu:#5f5a50;--line:#e2ddd3;
 --ac:#c8371b;--ac-ink:#fffdfa;--ac-soft:rgba(200,55,27,.09);
 --dk1:#1b2129;--dk2:#12161c;--dk-ink:#f1eee8;--dk-mu:#c3c8cf;--dk-ac:#f0a48f;
 --sh-card:inset 0 1px 0 rgba(255,255,255,.7),0 1px 0 rgba(40,32,20,.06),0 18px 40px -18px rgba(40,32,20,.28);
 --sh-btn:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 rgba(40,32,20,.12),0 10px 18px -6px rgba(40,32,20,.3);
 --sh-ac:inset 0 1px 0 rgba(255,255,255,.35),0 12px 24px -8px rgba(200,55,27,.42);
 --sh-panel:inset 0 1px 0 rgba(255,255,255,.7),0 1px 0 rgba(40,32,20,.08),0 40px 80px -28px rgba(40,32,20,.38);
 --sh-dark:0 40px 80px -30px rgba(10,14,20,.6);
 --g-card:linear-gradient(#fff,#faf8f4);--g-btn:linear-gradient(#fff,#f3f0ea);
 --f-head:"Instrument Sans","Noto Sans TC SAWA","Instrument Fallback","Microsoft JhengHei","PingFang TC",sans-serif;
 --f-body:"Figtree","Noto Sans TC SAWA","Figtree Fallback","Microsoft JhengHei","PingFang TC",sans-serif;
 --f-num:"Instrument Sans","Instrument Fallback",sans-serif;
 --r-card:24px;--r-big:28px;--r-panel:36px
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:16.5px;line-height:1.75;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--f-head);font-weight:500;color:var(--ink);text-wrap:balance}
b,strong{font-weight:600}
.skip{position:absolute;left:12px;top:-60px;z-index:40;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* 英文小標（SEO 用，使用者要求保留） */
.eyebrow{display:block;margin:0;font-family:var(--f-body);font-weight:600;font-size:13px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}

/* ===== 導覽列：膠囊 ===== */
header{padding:20px 0 0}
header>.head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;max-width:1176px;width:calc(100% - 64px);margin:0 auto;padding:10px 14px 10px 24px;border-radius:999px;background:var(--g-btn);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 0 rgba(40,32,20,.06),0 18px 40px -18px rgba(40,32,20,.28)}
.head .brand{display:inline-flex;flex:none;align-items:center;min-height:44px;min-width:44px}
.head .brand img{height:46px;width:auto}
.head nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin-left:auto}
.head nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:16px;text-decoration:none;color:var(--ink)}
.head nav a:hover,.head nav a[aria-current="page"]{color:var(--ac-text)}

/* ===== 按鈕 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--line);background:var(--g-btn);color:var(--ink);font-family:var(--f-body);font-weight:600;font-size:16px;line-height:1.3;text-decoration:none;cursor:pointer;box-shadow:var(--sh-btn);transition:transform .15s,box-shadow .15s}
.btn:hover{color:var(--ink);transform:translateY(-1px)}
.btn.ac{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:var(--sh-ac)}
.btn.ac:hover{background:#b3311a;color:var(--ac-ink)}
.btn.line,.btn.outline{background:var(--g-btn);color:var(--ink)}
.btn.small{min-height:44px;padding:0 22px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}}

/* ===== 麵包屑 ===== */
.crumb{margin:28px 0 0;font-size:14.5px;color:var(--mu)}
.crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--mu)}
.crumb a:hover{color:var(--ink)}

/* ===== 卡片與深色面板 ===== */
.card-v,.tile{background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-big);padding:28px 32px 30px;box-shadow:var(--sh-card);min-width:0;position:relative}
.dark{position:relative;overflow:hidden;border-radius:var(--r-panel);background:linear-gradient(150deg,var(--dk1),var(--dk2));color:var(--dk-mu);padding:clamp(28px,5vw,64px);box-shadow:var(--sh-dark)}
.dark .glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(200,55,27,.42),rgba(0,0,0,0));opacity:.5;pointer-events:none}
.dark>*:not(.glow){position:relative}
.dark .eyebrow{color:var(--dk-ac)}
.dark h2,.dark h3{color:var(--dk-ink)}
.dark p{color:var(--dk-mu)}
.dark a{color:var(--dk-ink)}

/* ===== 區塊標題 ===== */
.sec{padding-bottom:104px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 48px;margin-bottom:36px}
.sec-head>div{display:flex;flex-direction:column;gap:12px}
.sec-head h2,.sec h2.big-h{margin:0;font-size:clamp(30px,3.6vw,48px);line-height:1.16;letter-spacing:-.02em}
.sec-head .sec-desc{margin:0;max-width:26em;font-size:17px;line-height:1.75;color:var(--mu)}

/* ===== 產品頁 hero ===== */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:56px;padding-bottom:104px}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px}
.hero-copy h1{margin:0;font-size:clamp(42px,6vw,84px);line-height:1.08;letter-spacing:-.03em;overflow-wrap:break-word}
.hero-copy h1 .alt{display:block;margin-top:14px;font-family:var(--f-body);font-size:clamp(17px,1.6vw,21px);font-weight:500;line-height:1.45;letter-spacing:0;color:var(--mu)}
.hero-copy .alias{margin:-8px 0 0;font-size:clamp(17px,1.6vw,21px);font-weight:500;line-height:1.45;color:var(--mu)}
.hero-copy .en{margin:-6px 0 0;font-size:15px;color:var(--mu);letter-spacing:.02em}
.hero-copy .say{margin:0;max-width:29em;font-size:20px;line-height:1.75;color:var(--text)}
.hero-copy .intro{margin:0;max-width:34em;font-size:17px;line-height:1.8;color:var(--text)}
.hero-copy .actions{padding-top:6px}
.hero-visual{flex:1 1 480px;min-width:0;position:relative;padding:28px 12px 44px}
.hero-visual .glow{position:absolute;left:8%;right:0;top:6%;bottom:0;border-radius:50%;background:radial-gradient(closest-side,rgba(200,55,27,.42),rgba(255,255,255,0));opacity:.55;pointer-events:none}
.hero-panel{position:relative;margin:0;border-radius:32px;background:linear-gradient(160deg,#fff 0%,var(--bg2) 60%,var(--bg3) 100%);border:1px solid var(--line);padding:44px 36px 52px;box-shadow:var(--sh-panel)}
.hero-panel img{width:100%;height:400px;object-fit:contain;filter:drop-shadow(0 28px 26px rgba(30,24,14,.35))}
.hero-panel.photo{padding:22px}
.hero-panel.photo img{height:auto;max-height:440px;border-radius:20px;filter:none;box-shadow:0 18px 36px -16px rgba(30,24,14,.45)}
.stat{position:absolute;z-index:1;background:var(--g-card);border:1px solid var(--line);border-radius:18px;padding:14px 18px;box-shadow:var(--sh-card);max-width:calc(100% - 16px)}
.stat .k{margin:0;font-weight:500;font-size:13px;line-height:1.5;color:var(--mu)}
.stat .v{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;line-height:1.25}
.stat .num{font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;font-weight:500;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.stat .num.txt{font-family:var(--f-head);font-size:21px;letter-spacing:0}
.stat .unit{font-size:14px;color:var(--mu)}
.stat.s1{left:-8px;top:0}
.stat.s2{right:-4px;top:38%}
.stat.s3{left:24px;bottom:6px}

/* ===== 特點卡片 ===== */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px}
.fcard{min-width:0;background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 28px 30px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-card)}
.fcard .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fcard .no{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--ac-soft);font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;font-weight:500;font-size:16px;color:var(--ac)}
.fcard .en{font-size:13px;color:var(--mu);text-align:right}
.fcard h3{margin:0;font-size:24px;line-height:1.3}
.fcard p{margin:0;font-size:16.5px;line-height:1.75}
.prose-card{grid-column:1/-1}
.prose-card p{margin:0 0 12px;max-width:62em}
.prose-card p:last-child{margin-bottom:0}

/* ===== 影片／3D 深色面板 ===== */
.media-panel .glow{right:-10%;top:-40%;width:60%;height:140%}
.dp-head{display:flex;flex-direction:column;gap:14px;max-width:44em;margin-bottom:36px}
.dp-head h2{margin:0;font-size:clamp(30px,3.6vw,48px);line-height:1.16;letter-spacing:-.02em}
.dp-head p{margin:0;font-size:18px;line-height:1.75}
.media-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px 36px;align-items:start}
.media-grid>div{min-width:0}
.media-grid .eyebrow{font-size:12px;margin-bottom:4px}
.media-grid h3{margin:0 0 14px;font-size:20px;line-height:1.35}
.vframe{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0d0e11;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}
.vframe img,.vframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vframe video.inline{display:block;object-fit:contain;background:#000;z-index:2}
.vframe .play{position:absolute;left:22px;bottom:22px;z-index:1;background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 28px -8px rgba(200,55,27,.5)}
.vframe .play:hover{background:#b3311a;color:var(--ac-ink)}
.m3d .stage{position:relative;aspect-ratio:4/3;width:100%;max-width:100%;border-radius:22px;overflow:hidden;background:#0d0e11;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}
.m3d iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0}
.stage-visible{min-height:240px}
/* 修正2：3D 要「直接顯示可互動」，JS 產生的「點一下操作 3D」遮罩一律不顯示，拖曳直接落在 iframe 上（JS 不改）。 */
.model-overlay{display:none!important}
.m3d-open{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:600;color:var(--dk-ac)!important}

/* ===== 比較表（陶瓷欄用紅色） ===== */
.cmp-card{padding:28px 32px 24px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;vertical-align:top}
.cmp{border-collapse:separate;border-spacing:0;min-width:640px}
.cmp th,.cmp td{padding:18px 24px;border-top:1px solid var(--line);font-size:16.5px;line-height:1.7}
.cmp thead th{border-top:0;padding-top:16px;padding-bottom:16px;font-weight:600;font-size:15px;color:var(--mu)}
.cmp thead th:first-child,.cmp tbody th{padding-left:0}
.cmp thead th:nth-child(2){background:var(--ac);color:var(--ac-ink);border-radius:18px 18px 0 0}
.cmp tbody th{width:17%;font-weight:600;color:var(--ink)}
.cmp td.c{width:45%;background:var(--ac-soft);color:var(--ink)}
.cmp td.c b{color:#a52a12;font-weight:600}
.cmp td.m{color:var(--mu)}
.cmp tbody tr:last-child td.c{border-radius:0 0 18px 18px}
.note{margin:16px 0 0;font-size:14.5px;line-height:1.7;color:var(--mu)}

/* ===== 規格與應用（暖灰底帶） ===== */
.spec-band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:104px}
.spec-grid{display:flex;flex-wrap:wrap;gap:48px;padding-top:96px;padding-bottom:104px;align-items:flex-start}
.spec-col{flex:3 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px;scroll-margin-top:16px}
.apps-col{flex:2 1 360px;min-width:0;display:flex;flex-direction:column;gap:28px}
.spec-grid.wide .spec-col,.spec-grid.wide .apps-col{flex-basis:100%}
.col-head{display:flex;flex-direction:column;gap:12px}
.col-head h2{margin:0;font-size:clamp(30px,3.6vw,48px);line-height:1.16;letter-spacing:-.02em}
.spec-card{padding:14px 32px 20px}
.spec-card>.table-wrap>table th,.spec-card>.table-wrap>table td{padding:15px 0;border-top:1px solid var(--line)}
.spec-card>.table-wrap>table tr:first-child th,.spec-card>.table-wrap>table tr:first-child td{border-top:0}
.spec-card>.table-wrap>table th{width:220px;padding-right:24px;font-weight:600;font-size:16px;color:var(--ink)}
.spec-card>.table-wrap>table td{font-size:16.5px;line-height:1.6;color:var(--text)}
.spec-card td.ask{color:var(--mu)}
th .en,td .en{display:block;font-size:13.5px;font-weight:400;color:var(--mu);letter-spacing:.01em}
.spec-card .note{padding-top:16px;border-top:1px solid var(--line)}
.spec-card h3{margin:30px 0 12px;font-size:21px;line-height:1.35}
.spec-card h3 .en{display:block;font-family:var(--f-body);font-size:13.5px;font-weight:400;color:var(--mu)}
.spec-card ul{margin:0;padding-left:1.3em}
.spec-card li{margin:6px 0}
.models{border:1px solid var(--line);border-radius:18px;background:#fff}
.models table{font-size:15px}
.models th,.models td{padding:12px 14px;border-top:1px solid var(--line);white-space:normal}
.models thead th{border-top:0;background:var(--bg2);font-weight:600;font-size:14.5px;color:var(--ink)}
.models tbody th{font-weight:600;color:var(--ink)}
.models td{font-variant-numeric:tabular-nums}
.apps-card{display:flex;flex-direction:column;gap:18px}
.apps-card h3{margin:0 0 -6px;font-family:var(--f-body);font-weight:600;font-size:15px;color:var(--mu)}
.apps-card p{margin:0;font-size:16.5px;line-height:1.8}
.apps-card p.note{padding-top:18px;border-top:1px solid var(--line)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:9px 18px;border-radius:999px;background:var(--g-btn);border:1px solid var(--line);font-weight:500;font-size:16px;line-height:1.5;color:var(--ink);box-shadow:var(--sh-btn)}

/* ===== 照片（一律不裁切） ===== */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px}
.photo-grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.photo-grid figure{margin:0;min-width:0;border-radius:var(--r-big);overflow:hidden;background:linear-gradient(160deg,#fff,var(--bg3));border:1px solid var(--line);box-shadow:var(--sh-card);display:flex;flex-direction:column}
.photo-grid img{width:100%;height:360px;object-fit:contain;padding:28px;filter:drop-shadow(0 20px 20px rgba(30,24,14,.28))}
.photo-grid.g4 img{height:300px;padding:22px}
.photo-grid figcaption{margin-top:auto;padding:16px 24px 20px;border-top:1px solid var(--line);background:#fff;font-weight:500;font-size:16.5px;color:var(--ink)}

/* ===== 詢價深色面板 ===== */
.inq-panel{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:36px 64px;padding:clamp(32px,6vw,80px)}
.inq-panel .glow{left:-12%;bottom:-60%;width:60%;height:160%}
.inq-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px}
.inq-copy h2{margin:0;font-size:clamp(32px,4.4vw,56px);line-height:1.15;letter-spacing:-.02em}
.inq-panel .actions{flex:0 1 380px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.inq-panel .actions .btn{order:2;background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:var(--sh-ac)}
.inq-panel .actions .btn:hover{background:#b3311a}
.inq-panel a.tel{order:1;display:inline-flex;align-items:center;min-height:48px;font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;font-weight:500;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;text-decoration:none;color:var(--dk-ink)}
.inq-panel a.tel:hover{color:var(--dk-ac)}

/* ===== 相關問題／產品 ===== */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.rel-grid h2{margin:10px 0 16px;font-size:24px;line-height:1.3}
.others{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.others a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--g-btn);border:1px solid var(--line);box-shadow:var(--sh-btn);text-decoration:none;font-weight:500;font-size:15.5px;color:var(--ink)}
.others a:hover{color:var(--ac)}

/* ===== 內頁（產品系列、關於、聯絡、FAQ、隱私、404） ===== */
main.wrap{padding-bottom:8px}
.bento{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:24px;margin:0 0 24px}
.bento>.tile{grid-column:1/-1}
.bento>.span-6{grid-column:span 6}.bento>.span-4{grid-column:span 4}.bento>.span-5{grid-column:span 5}
.tile>h2,.tile .tile-h{margin:8px 0 16px;font-size:clamp(24px,2.4vw,32px);line-height:1.25;letter-spacing:-.01em}
.page-head{background:none!important;border:0!important;box-shadow:none!important;padding:40px 0 32px!important}
.page-head h1,.tile h1{margin:14px 0 18px;font-size:clamp(38px,5vw,68px);line-height:1.1;letter-spacing:-.03em}
.page-head h1 .alt,.tile h1 .alt{display:block;margin-top:14px;font-family:var(--f-body);font-size:clamp(16px,1.5vw,20px);font-weight:500;line-height:1.5;letter-spacing:0;color:var(--mu)}
.page-head .lead,.tile .lead{margin:0;max-width:44em;font-size:18px;line-height:1.8;color:var(--text)}
.page-head .actions{margin-top:26px}
.page-head .faq-toc{margin-top:24px}
.prose p,.prose li{font-size:16.5px}
.prose>p,.prose>ul{max-width:62em}
.prose h2{margin:34px 0 12px;font-size:clamp(22px,2.2vw,28px);line-height:1.3}
.prose>h2:first-child,.prose>.eyebrow+h2,.prose>h1+p{margin-top:8px}
.prose p a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
.prose ul{padding-left:1.3em}
.tile .note{font-size:14.5px;color:var(--mu)}
.p-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;overflow:hidden;border:0!important;border-radius:var(--r-panel)!important;background:linear-gradient(150deg,var(--dk1),var(--dk2))!important;padding:clamp(32px,5vw,64px)!important;box-shadow:var(--sh-dark)!important}
.p-cta::before{content:"";position:absolute;left:-12%;bottom:-60%;width:60%;height:160%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,55,27,.42),rgba(0,0,0,0));opacity:.5;pointer-events:none}
.p-cta>*{position:relative}
.p-cta .eyebrow{color:var(--dk-ac)}
.p-cta h2{margin:10px 0 0;color:var(--dk-ink);font-size:clamp(28px,3.4vw,44px);line-height:1.18;letter-spacing:-.02em}
.p-cta .actions{align-items:center;gap:14px 24px}
.p-cta .btn{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:var(--sh-ac)}
.p-cta a.tel{display:inline-flex;align-items:center;min-height:48px;font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;font-weight:500;font-size:clamp(24px,2.6vw,32px);text-decoration:none;color:var(--dk-ink)}
.p-cta a.tel:hover{color:var(--dk-ac)}

/* 產品系列卡片 */
.sec-head.in{margin:8px 0 28px}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px;margin-bottom:24px}
.card{min-width:0;background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-big);padding:14px 14px 24px;display:flex;flex-direction:column;box-shadow:var(--sh-card)}
.card .ph{display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#fff,var(--bg3))}
.card .ph img{width:100%;height:100%;object-fit:contain}
.card h2{margin:16px 10px 0;font-size:24px;line-height:1.3}
.card h2 a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.card h2 a:hover{color:var(--ac)}
.card .en{margin:0 10px 8px;font-size:14px;color:var(--mu);letter-spacing:.02em}
.card p{margin:0 10px 16px;font-size:16px;color:var(--text);flex:1}
.card .en{flex:none}
.card .actions{margin:0 10px;gap:10px}

/* 關於我們 */
.p-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:44px 48px}
.p-hero h1{margin:14px 0 18px}
.p-hero .lead{margin:0 0 26px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:16.5px}
.timeline li:first-child{border-top:0}
.timeline b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:500;color:var(--ac)}
.big{margin:6px 0 10px;font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;font-size:clamp(34px,3.6vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.carousel{min-width:0}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:24px;background:linear-gradient(160deg,#fff,var(--bg3));border:1px solid var(--line);cursor:grab;overscroll-behavior-x:contain}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track.dragging{scroll-snap-type:none;cursor:grabbing}
.carousel-track figure{flex:0 0 100%;margin:0;position:relative;aspect-ratio:4/3;scroll-snap-align:start}
.carousel-track img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.carousel-track figcaption{position:absolute;left:14px;bottom:14px;padding:4px 14px;border-radius:999px;background:rgba(26,24,20,.8);color:#fff;font-size:14px}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:10px}
.carousel-nav button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--g-btn);color:var(--ink);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.carousel-dots{display:flex}
.carousel-dots button{border:0;background:transparent;font-size:0}
.carousel-dots button::after{content:"";display:block;width:10px;height:10px;margin:auto;border-radius:50%;background:#b9b3a8}
.carousel-dots button[aria-current="true"]::after{background:var(--ac)}

/* 產品系列／聯絡頁的影片與 3D 媒體區（js/產品媒體與輪播_v5.js） */
.pmedia{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--dk1)}
.pm-tabs{display:flex;gap:4px;padding:4px;background:var(--dk1)}
.pm-tabs button{flex:1;min-height:44px;border:0;border-radius:14px;background:transparent;color:#dcdfe3;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.pm-tabs button:hover{background:#2a313b;color:#fff}
.pm-tabs button[aria-pressed="true"]{background:var(--ac);color:#fff}
.pm-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--dk2)}
.pm-stage video{display:block;width:100%;height:100%;object-fit:contain}
.pm-stage [hidden]{display:none!important}
.pm-3d{position:absolute;inset:0;overflow:hidden}
.pm-3d iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:var(--dk2)}
.pm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:44px;padding:0 20px;white-space:nowrap;border:0;border-radius:999px;background:var(--ac);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.card .pmedia{margin-bottom:2px}
.contact-media{margin-top:32px}
.contact-media .pm-stage{aspect-ratio:16/9}
.contact-media h2{font-size:clamp(20px,2vw,24px);margin:0 0 6px}
.prose .cm-name{font-size:15px;color:var(--mu);margin:0 0 12px}
.cm-name b{color:var(--ink)}

/* FAQ */
.faq-group h2{scroll-margin-top:16px;margin:8px 0 6px}
.faq-group{scroll-margin-top:16px}
.faq-item{padding:22px 0;border-top:1px solid var(--line);scroll-margin-top:16px}
.faq-item:first-of-type{border-top:0;padding-top:8px}
.faq-item h3{margin:0 0 10px;font-size:20px;line-height:1.45}
.faq-answer p{margin:0 0 8px;max-width:62em}
.prose .faq-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin:4px 0 0}
.faq-links a,.qa-all-faq{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#a52a12}

/* ===== 詢價表單 ===== */
.inquiry-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.inquiry-form label{display:grid;gap:6px;font-weight:500;color:var(--ink)}
.inquiry-form .full{grid-column:1/-1}
.inquiry-form input:not([type=checkbox]),.inquiry-form select,.inquiry-form textarea,.qa-dialog input{width:100%;min-height:50px;border:1px solid #b9b2a5;border-radius:14px;padding:11px 14px;font:inherit;font-weight:400;color:var(--ink);background:#fff;box-shadow:inset 0 1px 2px rgba(40,32,20,.06)}
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus,.qa-dialog input:focus{outline:2px solid var(--ink);outline-offset:1px}
.inquiry-form textarea{min-height:150px;resize:vertical}
.inquiry-form .check{display:flex;align-items:flex-start;gap:10px;font-weight:400}
.check input{width:20px;height:20px;flex:none;margin-top:4px;accent-color:var(--ac)}
.hp{position:absolute;left:-10000px}
.inquiry-form [hidden],.consent[hidden],.consent [hidden]{display:none!important}
[data-status]{white-space:pre-wrap}
.inquiry-form button.btn{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:var(--sh-ac)}
.inquiry-form [data-fallback] .btn{background:var(--g-btn);border-color:var(--line);color:var(--ink);box-shadow:var(--sh-btn);margin:0 8px 8px 0}
.consent p a,.inquiry-form .check a{display:inline-block;min-height:44px;min-width:44px;padding:10px 0;margin:-10px 0;vertical-align:baseline;color:#a52a12}
.contact-side{display:flex;flex-direction:column;gap:6px}
.contact-side .btn{align-self:flex-start;margin-top:10px}

/* ===== 產品問答浮動視窗 ===== */
.qa-launch{position:fixed;right:20px;bottom:20px;z-index:12;min-height:48px;padding:0 22px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:linear-gradient(150deg,var(--dk1),var(--dk2));color:var(--dk-ink);font:inherit;font-weight:600;cursor:pointer;box-shadow:0 18px 36px -14px rgba(10,14,20,.6)}
.qa-dialog{border:1px solid var(--line);border-radius:28px;padding:26px;width:min(560px,calc(100% - 32px));max-height:85vh;background:var(--bg);color:var(--text);box-shadow:0 40px 80px -28px rgba(10,14,20,.55)}
.qa-dialog::backdrop{background:rgba(18,22,28,.6)}
.qa-dialog h2{margin:0 0 8px;font-size:22px}
.qa-dialog>p{margin:0;font-size:15px;color:var(--mu)}
.qa-dialog button{min-height:44px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--g-btn);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;box-shadow:var(--sh-btn)}
.qa-dialog>button:first-of-type{position:absolute;right:20px;top:20px}
.qa-messages{max-height:35vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 16px;margin:14px 0}
.qa-answer p,.qa-user{margin:8px 0}
.qa-user{font-weight:600;color:var(--ink)}
.qa-answer a{display:inline-flex;align-items:center;min-height:44px;color:#a52a12;font-weight:600}
.suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.qa-dialog form{display:flex;gap:8px}
.qa-dialog form button{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:var(--sh-ac)}
.qa-all-faq{padding:0 4px;margin-top:8px}
.inquiry-notice-on .qa-launch{visibility:hidden}

/* ===== Cookie 同意框（js/同意與追蹤_v3.js） ===== */
.consent{position:fixed;z-index:30;bottom:16px;left:16px;right:16px;max-width:900px;margin:auto;padding:20px 24px;border-radius:24px;background:var(--g-card);border:1px solid var(--line);color:var(--text);box-shadow:0 30px 70px -20px rgba(40,32,20,.45)}
.consent p{margin:0 0 10px}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent button{min-height:44px;border:1px solid var(--ink);border-radius:999px;padding:8px 20px;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.consent button.outline{background:var(--g-btn);border-color:var(--line);color:var(--ink);box-shadow:var(--sh-btn)}

/* ===== 頁尾 ===== */
.foot{margin-top:40px;border-top:1px solid var(--line);padding:0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1.6fr 1.3fr;gap:28px 56px;padding:48px 0 56px;font-size:15.5px;line-height:1.8}
.foot img{height:56px;width:auto;margin-bottom:12px}
.foot strong{display:block;margin-bottom:6px;font-family:var(--f-head);font-weight:600;font-size:17px;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:500}
.foot li a:hover{color:var(--ac)}
.foot address{font-style:normal}
p.small{font-size:14.5px;color:var(--mu);margin:4px 0}
p.small a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.foot [data-privacy-links] a+a{margin-left:12px}
.foot .cookie-settings{min-height:44px;margin-left:12px;padding:0 4px;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}

/* ===== 斷點 ===== */
@media (max-width:1100px){
 .media-grid{grid-template-columns:minmax(0,1fr)}
 .bento>.span-6,.bento>.span-4,.bento>.span-5{grid-column:1/-1}
 .p-hero{grid-template-columns:minmax(0,1fr);padding:36px}
 .foot-grid{grid-template-columns:1fr 1fr}
 .foot-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
 body{font-size:16px}
 .wrap{padding:0 18px}
 header{padding-top:12px}
 header>.head{width:calc(100% - 28px);border-radius:26px;padding:10px 12px 8px 18px;gap:2px 12px}
 .head .brand img{height:38px}
 .head nav{order:3;width:100%;margin:0;justify-content:space-between;gap:0}
 .head nav a{font-size:15px;padding:0 4px}
 .head>.btn{margin-left:auto}
 .crumb{margin-top:14px}
 .hero{gap:28px;padding-top:24px;padding-bottom:64px}
 .hero-copy{gap:16px}
 .hero-copy .say{font-size:18px}
 .hero-copy .intro{font-size:16px}
 .hero-copy .actions .btn{min-height:48px;padding:0 20px;font-size:15px}
 .hero-visual{padding:8px 0 0;display:flex;flex-wrap:wrap;gap:10px}
 .hero-visual .glow{left:0;top:0;bottom:30%}
 .hero-panel{flex:1 1 100%;padding:26px 18px 30px;border-radius:26px}
 .hero-panel img{height:260px}
 .hero-panel.photo{padding:14px}
 .stat{position:static;flex:1 1 calc(50% - 5px);max-width:none;padding:12px 14px}
 .stat .num{font-size:22px}
 .stat .num.txt{font-size:18px}
 .sec{padding-bottom:64px}
 .sec-head{margin-bottom:24px}
 .fcard{padding:22px 22px 24px}
 .fcard h3{font-size:21px}
 .dark{border-radius:28px}
 .dp-head{margin-bottom:24px}
 .dp-head p{font-size:16.5px}
 .vframe .play{left:14px;bottom:14px;min-height:48px;padding:0 20px}
 .spec-band{margin-bottom:64px}
 .spec-grid{padding-top:56px;padding-bottom:64px;gap:40px}
 .spec-card{padding:6px 20px 16px}
 .spec-card>.table-wrap>table,.spec-card>.table-wrap>table tbody,.spec-card>.table-wrap>table tr,.spec-card>.table-wrap>table th,.spec-card>.table-wrap>table td{display:block;width:100%}
 .spec-card>.table-wrap>table th{padding:14px 0 2px;border-top:1px solid var(--line)}
 .spec-card>.table-wrap>table td{padding:0 0 14px;border-top:0}
 .spec-card>.table-wrap>table tr:first-child th{border-top:0}
 .models thead{display:none}
 .models table,.models tbody,.models tr,.models th,.models td{display:block;width:auto}
 .models tbody th{background:var(--bg2);padding:10px 14px}
 .models td{display:flex;justify-content:space-between;gap:12px;padding:8px 14px}
 .models td::before{content:attr(data-label);color:var(--mu);font-size:14px}
 .cmp-card{padding:18px 16px}
 .cmp{min-width:0}
 .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto!important}
 .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .cmp tr{border:1px solid var(--line);border-radius:18px;background:#fff;margin:0 0 12px;overflow:hidden}
 .cmp th,.cmp td{border-top:0}
 .cmp tbody th{padding:12px 16px 4px}
 .cmp td,.cmp td.c{padding:8px 16px}
 .cmp tbody tr:last-child td.c{border-radius:0}
 .cmp td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--mu);margin-bottom:2px}
 .cmp td.c::before{color:#a52a12}
 .cmp td.m{padding-bottom:14px}
 .photo-grid img,.photo-grid.g4 img{height:260px;padding:18px}
 .inq-panel{gap:24px}
 .inq-panel .actions{flex-basis:100%}
 .rel-grid{gap:16px}
 .bento{gap:16px}
 .tile{padding:22px 20px 24px}
 .page-head{padding:20px 0 12px!important}
 .p-hero{padding:24px 20px;gap:24px}
 .p-cta{padding:30px 22px!important}
 .timeline li{grid-template-columns:minmax(0,1fr);gap:2px}
 .inquiry-form{grid-template-columns:1fr}
 .inquiry-form .full{grid-column:auto}
 .qa-launch{right:12px;bottom:12px;width:44px;height:44px;min-height:44px;padding:0;font-size:0}
 .qa-launch::before{content:"?";font-size:22px;line-height:1}
 .qa-avoid-on .qa-launch{visibility:hidden}
 .foot{padding-bottom:68px}
 .consent{bottom:8px;left:8px;right:8px;max-height:70vh;overflow:auto;padding:16px 18px}
 .foot-grid{grid-template-columns:minmax(0,1fr);padding:36px 0 40px;gap:20px}
}
.photo-grid img.solid{filter:none;border-radius:16px}
/* 中文標題只在標點處換行，避免「工／件」這種斷法；太長時仍可斷字，不會溢出 */
.inq-copy h2,.dp-head h2,.p-cta h2,.sec-head h2{word-break:keep-all;overflow-wrap:anywhere}
/* 第13輪第5段修正2：詢價標題的前半句比一行長時，keep-all＋anywhere 會把「，」斷到行首；改回一般中文斷行（瀏覽器避頭規則會處理） */
.inq-copy h2{word-break:normal}
/* 對比修正：淺底上的紅色小字（英文小標、特點編號）用深一階的紅，SAWA 紅 #c8371b 留給按鈕與底色。
   最不利處（hero 光暈上）4.93:1；深色面板上的小標仍用 --dk-ac */
:root{--ac-text:#b3311a}
.eyebrow,.fcard .no{color:var(--ac-text)}
.dark .eyebrow,.p-cta .eyebrow{color:var(--dk-ac)}
/* 390 寬：內頁 h1（如「陶瓷真空吸盤常見問題」9 字）一行放得下，不在詞中間斷行 */
@media (max-width:760px){.page-head h1,.tile h1{font-size:clamp(30px,8.2vw,40px)}}
/* 第13輪第5段修正2：手機版型號表被 .spec-card > .table-wrap > table td（權重較高）蓋掉內距與左右對齊，文字貼框；這裡用更高權重補回原設計 */
@media (max-width:760px){
 .spec-card > .table-wrap.models > table th{padding:10px 14px}
 .spec-card > .table-wrap.models > table td{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;border-top:1px solid var(--line)}
}
/* 第13輪第5段修正2：聯絡頁說明句 390 寬時「、」「。」跟在電話／信箱連結後被斷到行首；連結與標點包成不換行；FAQ 說明句的電話號碼在 390 被斷成兩行，同樣包起來 */
.nobr{white-space:nowrap}

/* 2026-11-13 導覽列 LOGO 與公司名稱放大（使用者 21:44「LOGO跟公司名稱太小」）：原本整張直式標誌（圖示在上、公司名稱在下）縮到 46px 高，
   公司名稱只剩約 4px；改成圖示（sawa-mark.svg）＋網頁文字橫排，公司名稱 1440／1920 為 20px、手機 16px。導覽列高度只多幾 px，右側選單不動。 */
.head .brand{gap:12px;text-decoration:none;color:var(--ink)}
.head .brand img{height:48px;width:auto}
.brand-t{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.brand-t b{font-size:20px;font-weight:900;letter-spacing:.08em}
.brand-t small{margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--mu)}
@media (max-width:760px){
 .head .brand{gap:9px}
 .head .brand img{height:38px}
 .brand-t b{font-size:16px;letter-spacing:.06em}
 .brand-t small{margin-top:3px;font-size:9.5px;letter-spacing:.18em}
}