/* ==========================================================================
   優廚歐化系統廚具 · 方向 A「施工圖」
   系統內建字體，不下載任何網頁字體。色票取自 Logo 與名片。
   ========================================================================== */
/* --------------------------------------------------------------------------
   色票：官網預設深色。這不是「跟隨系統」的深色模式，是這個站的主色系。
   深綠近黑的底 ＋ 米白字 ＋ 從 Logo 與名片取樣的兩支綠。
   想看淺色版（例如印出來對稿）在 <html> 加 data-theme="light"。
   -------------------------------------------------------------------------- */
:root{
  --font-sans:"PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei","Heiti TC",system-ui,-apple-system,sans-serif;
  --font-serif:"Songti TC","Noto Serif TC","Noto Serif CJK TC","PMingLiU",serif,var(--font-sans);
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;

  --paper:#101410;        /* 近黑的深綠底 */
  --surface:#171C16;
  --surface-2:#1E241D;
  --ink:#E9EAE3;
  --ink-2:#9BA595;
  --line:#282F27;
  --line-2:#3D453B;
  --brand:#A9C3AE;        /* 連結、次要標題 */
  --brand-deep:#D2E3D3;   /* 主標題，深色底上要更亮才站得住 */
  --sage:#63705F;
  --accent:#6ABA51;       /* 取自名片亮綠 */
  --line-green:#06C755;   /* LINE 官方綠，只用在 LINE 按鈕 */
  --red:#E09383;
  --gold:#CFAE55;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --measure:34em;
  color-scheme:dark;
}

/* 淺色版：只在明確指定時才用（對稿、列印） */
:root[data-theme="light"]{
  --paper:#F2EBE8;--surface:#FBF8F6;--surface-2:#F5EFEC;
  --ink:#16211A;--ink-2:#5C6459;--line:#DFD4CE;--line-2:#C9BDB6;
  --brand:#2E4A38;--brand-deep:#0E2E1D;--sage:#A4BAAB;
  --red:#8E3B2F;--gold:#7A5A12;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.9;font-weight:400;
  padding-bottom:56px;                      /* 讓開手機底部的聯絡列 */
  overflow-wrap:break-word;
}
@media (min-width:900px){body{padding-bottom:0}}
.wrap{max-width:46rem;margin:0 auto;padding:0 var(--s5)}
.site-head .wrap,.site-foot .wrap{max-width:72rem}
.num,table td,table th,time{font-variant-numeric:tabular-nums;font-family:var(--font-mono);letter-spacing:-.01em}
h1,h2,h3,h4{font-family:var(--font-serif);line-height:1.45;letter-spacing:.02em;text-wrap:balance;margin:0;color:var(--brand-deep)}
h1{font-size:clamp(28px,5.4vw,40px);margin:0 0 var(--s5)}
h2{font-size:clamp(21px,3.2vw,27px);margin:var(--s8) 0 var(--s4);padding-top:var(--s5);border-top:1px solid var(--line)}
h3{font-size:19px;margin:var(--s6) 0 var(--s3)}
h4{font-size:17px;margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s4);max-width:var(--measure)}
ul,ol{max-width:var(--measure);padding-left:1.3em;margin:0 0 var(--s4)}
li{margin:0 0 var(--s2)}
strong{font-weight:600;color:var(--brand-deep)}
a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s}
a:hover{color:var(--brand-deep)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--brand-deep);color:var(--paper);padding:var(--s2) var(--s4);border-radius:2px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--s5)}

/* ── 頁首 ─────────────────────────────────────────────── */
.site-head{background:var(--surface);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s4);padding-bottom:var(--s4)}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brand-logo{
  /* 原稿 420x109（比例 3.85）。跟著視窗縮放，手機不會把選單擠掉，
     桌機放到 252px 仍只用到原稿六成，不會糊。 */
  display:block;
  width:clamp(190px,23vw,252px);
  height:clamp(49px,5.97vw,65px);
  background:url(/assets/logo-lockup.png) left center/contain no-repeat;
}
/* 淺底與列印用深色版——淺綠印在白紙上等於沒印 */
:root[data-theme="light"] .brand-logo{background-image:url(/assets/logo-lockup-ink.png)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.menu-btn{
  font:inherit;font-size:14px;letter-spacing:.1em;padding:var(--s2) var(--s3);
  background:transparent;color:var(--brand-deep);border:1px solid var(--line-2);border-radius:2px;cursor:pointer;
}
.site-nav{display:none;width:100%;flex-direction:column;padding:var(--s2) 0 var(--s3);border-top:1px solid var(--line);margin-top:var(--s3)}
.site-nav.open{display:flex}
.site-nav a{padding:var(--s2) 0;font-size:16px;text-decoration:none;color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--brand-deep);font-weight:600}
@media (min-width:900px){
  .menu-btn{display:none}
  .site-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--s5);width:auto;border:0;margin:0;padding:0}
  .site-nav a{font-size:15px;padding:0}
  .site-nav a[aria-current="page"]{box-shadow:0 2px 0 var(--accent)}
}

/* ── 內文區塊 ─────────────────────────────────────────── */
main{padding:var(--s7) 0 var(--s8)}
.crumb{font-size:14px;color:var(--ink-2);margin:0 0 var(--s5)}
/* 觸控目標：WCAG 2.5.8 要求 24x24，純文字連結的行高撐不到 */
.crumb a{color:var(--ink-2);display:inline-block;padding:4px 0}
.crumb span{margin:0 var(--s2);color:var(--line-2)}
.stamp{font-size:13px;color:var(--ink-2);letter-spacing:.04em;margin:0 0 var(--s5)}
.eyebrow{font-family:var(--font-serif);font-size:12px;letter-spacing:.5em;text-indent:.5em;color:var(--brand);margin:0 0 var(--s5);text-transform:none}
.lede{font-size:19px;line-height:1.85;color:var(--ink);max-width:32em;margin:0 0 var(--s5)}

/* 文章開場水彩：同一隻收養混種犬，透過不同廚房事件帶入主題。 */
.story-opener{
  margin:var(--s5) 0 var(--s7);max-width:none;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
}
.story-opener img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:0;
}
.story-opener figcaption{
  padding:var(--s2) var(--s3);font-size:13px;letter-spacing:.04em;color:var(--ink-2);
}
@media (max-width:639px){
  .story-opener{margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);border-left:0;border-right:0}
  .story-opener figcaption{padding-left:var(--s4);padding-right:var(--s4)}
}

/* 風格 × 格局願景：照片先回答「我想要哪一種」，文字再講尺寸取捨。 */
.vision-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);margin:0 0 var(--s7)}
@media (min-width:760px){.vision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vision-card{margin:0;border:1px solid var(--line);background:var(--surface)}
.vision-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:0}
.vision-card figcaption{padding:var(--s3) var(--s4) var(--s4)}
.vision-card b{display:block;font-family:var(--font-serif);font-size:19px;color:var(--brand-deep);margin-bottom:var(--s1)}
.vision-card span{display:block;font-size:14px;line-height:1.75;color:var(--ink-2)}
.caption{margin-top:calc(var(--s5) * -1);margin-bottom:var(--s7);font-size:13px;line-height:1.75;color:var(--ink-3)}

/* 購置流程：圖先講現場發生什麼，文字說明這一步如何影響成品。 */
.process-story{display:grid;grid-template-columns:1fr;gap:var(--s5);margin:0 0 var(--s7);counter-reset:process}
@media (min-width:760px){.process-story{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1120px){.process-story{grid-template-columns:repeat(4,minmax(0,1fr))}}
.process-scene{margin:0;border-top:2px solid var(--brand);padding-top:var(--s3);counter-increment:process}
.process-scene img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line)}
.process-scene figcaption{padding:var(--s3) 0 0}
.process-scene b{display:block;font-family:var(--font-serif);font-size:18px;color:var(--brand-deep);margin-bottom:var(--s1)}
.process-scene b::before{content:"0" counter(process) "　";font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--brand)}
.process-scene span{display:block;font-size:14px;line-height:1.75;color:var(--ink-2)}
.answer{
  border-left:3px solid var(--accent);background:var(--surface);
  padding:var(--s4) var(--s5);margin:0 0 var(--s6);max-width:var(--measure);
}
.answer p:last-child{margin:0}
.answer b{display:block;font-family:var(--font-serif);font-size:13px;letter-spacing:.24em;color:var(--brand);margin:0 0 var(--s2)}

/* 卡片格 */
.cards{display:grid;gap:var(--s4);grid-template-columns:1fr;margin:0 0 var(--s6);padding:0;list-style:none;max-width:none}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.cards li{margin:0}
.card{display:block;background:var(--surface);border:1px solid var(--line);padding:var(--s5);text-decoration:none;color:inherit;transition:border-color .15s}
a.card:hover{border-color:var(--sage)}
.card b{display:block;font-family:var(--font-serif);font-size:18px;color:var(--brand-deep);margin:0 0 var(--s2)}
.card span{display:block;font-size:15px;color:var(--ink-2);line-height:1.75}

/* 事實表 */
.facts{margin:0 0 var(--s6);padding:0;border-top:1px solid var(--line);max-width:var(--measure)}
.facts div{display:flex;gap:var(--s5);align-items:baseline;border-bottom:1px solid var(--line);padding:var(--s3) 0}
.facts dt{flex:0 0 6em;margin:0;color:var(--ink-2);font-size:15px}
.facts dd{margin:0;flex:1}

/* 表格
   中文沒有詞距，欄位一窄就會兩三個字一行（「不鏽／鋼」）。三件事解決：
   第一欄是短標籤，不准斷；其餘欄位給最小寬度；夠寬的螢幕讓表格越過正文欄寬。
   手機另外處理——見下面的卡片化。 */
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.75;min-width:34rem}
th,td{
  text-align:left;vertical-align:top;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);min-width:8em;line-break:strict;overflow-wrap:normal;
}
thead th{
  font-family:var(--font-sans);font-size:12px;letter-spacing:.16em;color:var(--ink-2);
  font-weight:500;border-bottom:1px solid var(--line-2);white-space:nowrap;
}
/* 第一欄是名字不是句子（build.py 判斷後加的 .label-col），一行讀完才對 */
tbody tr>:first-child{min-width:7em;color:var(--brand-deep);font-weight:600}
.label-col tbody tr>:first-child{white-space:nowrap;min-width:0}
tbody tr:hover{background:var(--surface)}
caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--ink-2);padding-top:var(--s3)}

/* 欄位越多，每欄的下限就得放寬一點，才不會在中等寬度被迫左右拖 */
.cols-5 th,.cols-5 td{min-width:6.4em}

/* 桌機夠寬時，讓表格對稱地撐出正文欄寬，四五欄才排得開 */
@media (min-width:1060px){
  main.wrap>.scroll-x{
    width:min(56rem,calc(100vw - 5rem));margin-left:50%;transform:translateX(-50%);
  }
}

/* 手機：一列 ＝ 一張卡片。每個值自己帶欄位名（data-label 由 build.py 寫入），
   所以不必左右拖表格也讀得完整。 */
@media (max-width:700px){
  .scroll-x{overflow-x:visible;margin-bottom:var(--s6)}
  table{display:block;min-width:0;font-size:16px}
  table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table tbody,table tr,table th,table td{display:block}
  table tr{
    border:1px solid var(--line);border-left:3px solid var(--sage);
    background:var(--surface);padding:var(--s4);margin:0 0 var(--s3);
  }
  table tr:hover{background:var(--surface)}
  table th,table td{border:0;padding:0;min-width:0;white-space:normal}
  table tr>*+*{margin-top:var(--s4)}
  table td[data-label]::before,table th[data-label]::before{
    content:attr(data-label);display:block;
    font-family:var(--font-sans);font-size:11px;letter-spacing:.16em;
    color:var(--ink-2);margin-bottom:var(--s1);
  }
  table tr>:first-child,.label-col tbody tr>:first-child{
    font-family:var(--font-serif);font-size:19px;line-height:1.5;white-space:normal;
    padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line);
  }
  table caption{display:block;padding-top:0}
}

/* 提示盒 */
.note{border:1px solid var(--line);border-left:3px solid var(--sage);background:var(--surface);padding:var(--s4) var(--s5);margin:0 0 var(--s5);max-width:var(--measure);font-size:16px}
.note.warn{border-left-color:var(--red)}
.note.tip{border-left-color:var(--gold)}
.note p:last-child,.note ul:last-child,.note ol:last-child{margin:0}
.note b{color:var(--brand-deep)}
.note.warn b{color:var(--red)}

/* 步驟 */
.steps{list-style:none;counter-reset:s;padding:0;max-width:var(--measure)}
.steps li{counter-increment:s;position:relative;padding-left:2.6em;margin:0 0 var(--s4)}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.05em;
}

/* 做／不做 */
.dodont{display:grid;gap:var(--s4);grid-template-columns:1fr;margin:0 0 var(--s6)}
@media (min-width:640px){.dodont{grid-template-columns:1fr 1fr}}
.dodont section{border:1px solid var(--line);padding:var(--s4) var(--s5);background:var(--surface)}
.dodont h3{margin:0 0 var(--s3);font-size:14px;letter-spacing:.16em;font-family:var(--font-sans);font-weight:600}
.dodont .do h3{color:var(--brand)}
.dodont .dont h3{color:var(--red)}
.dodont ul{margin:0;font-size:15px;line-height:1.75}

/* 問答 */
.qa{border-top:1px solid var(--line);margin:0 0 var(--s6)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer;padding:var(--s4) 2em var(--s4) 0;position:relative;list-style:none;
  font-family:var(--font-serif);font-size:17px;color:var(--brand-deep);line-height:1.6;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"＋";position:absolute;right:0;top:var(--s4);color:var(--accent);font-family:var(--font-mono)}
.qa details[open] summary::after{content:"−"}
.qa .a{padding:0 0 var(--s4)}
.qa .a p:last-child{margin:0}
.qa .a a{font-size:inherit}

/* 圖 */
figure{margin:0 0 var(--s6)}
figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}
figcaption{font-size:14px;color:var(--ink-2);padding-top:var(--s2);line-height:1.7}

/* ── 行動呼籲 ─────────────────────────────────────────── */
.cta{border:1px solid var(--line-2);background:var(--surface);padding:var(--s5);margin:var(--s7) 0;max-width:none}
.cta-note{font-family:var(--font-serif);font-size:18px;color:var(--brand-deep);margin:0 0 var(--s4);max-width:none}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.cta-id{font-size:14px;color:var(--ink-2);margin:var(--s4) 0 0;max-width:none}
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);padding:14px 24px;border-radius:2px;
  font-size:16px;text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s;
}
.btn-line{background:var(--line-green);color:#fff;font-weight:600;border-color:var(--line-green)}
.btn-line:hover{background:#05a948;color:#fff}
.btn-ghost{background:transparent;color:var(--brand-deep);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand)}

/* QR */
.qr{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;border:1px solid var(--line);background:var(--surface);padding:var(--s5);margin:0 0 var(--s6)}
.qr img{width:148px;height:148px;flex:none;background:#fff;padding:var(--s2);border:1px solid var(--line)}
.qr div{flex:1;min-width:14rem}
.qr p{margin:0 0 var(--s2);max-width:none}
.qr .id{font-family:var(--font-mono);font-size:22px;color:var(--brand-deep);letter-spacing:.02em}

/* ── 頁尾 ─────────────────────────────────────────────── */
.site-foot{background:var(--surface);border-top:1px solid var(--line);padding:var(--s7) 0 var(--s7);font-size:15px;color:var(--ink-2)}
.foot-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media (min-width:640px){.foot-grid{grid-template-columns:1.6fr 1fr}}
.foot-brand{font-family:var(--font-serif);font-size:19px;color:var(--brand-deep);margin:0 0 var(--s1);max-width:none}
.foot-legal{font-size:13px;margin:0 0 var(--s4);max-width:none}
.nap{margin:0;border-top:1px solid var(--line)}
.nap div{display:flex;gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.nap dt{flex:0 0 3.5em;margin:0;font-size:13px;letter-spacing:.1em}
.nap dd{margin:0}
.nap dd a,.facts dd a{display:inline-block;padding:3px 0}
.nap .more{color:var(--sage)}
.foot-nav{display:flex;flex-direction:column;gap:var(--s1)}
.foot-nav a{color:var(--ink-2);text-decoration:none;padding:2px 0}
.foot-nav a:hover{color:var(--brand)}
/* 價格排在最後，和上面的分類隔開 */
.foot-nav .foot-last{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.foot-h{font-size:12px;letter-spacing:.24em;color:var(--brand);margin:var(--s4) 0 var(--s2);max-width:none}
.foot-h:first-child{margin-top:0}
.foot-fine{font-size:13px;line-height:1.8;margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);max-width:none}

/* ── 手機底部聯絡列 ───────────────────────────────────── */
.dock{position:fixed;left:0;right:0;bottom:0;height:56px;display:flex;background:var(--surface);border-top:1px solid var(--line-2);z-index:20}
.dock a{flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--brand-deep);font-size:15px;border-right:1px solid var(--line)}
.dock a:last-child{border-right:0}
.dock-line{background:var(--line-green);color:#fff;font-weight:600}
.dock-line:hover{color:#fff}
/* QR 那顆是次要動作，給它最窄的一格：圖示在上、標籤在下，直排才塞得進 */
.dock-qr{flex:.62;flex-direction:column;gap:2px;font-size:10px!important;letter-spacing:.14em;color:var(--ink-2)!important}
.dock-qr .qr-ico{width:19px;height:19px;display:block}
.dock-qr[aria-expanded="true"]{color:var(--brand-deep)!important;background:var(--surface-2)}
@media (min-width:900px){.dock{display:none}}

/* ── 部位圖的互動 ───────────────────────────────────────
   圖上的編號與下面的清單互相對應。滑過、聚焦或點擊任一邊，
   兩邊會一起亮起來。沒有 JS 的話一切照舊，只是不會亮。 */
.d-hit{cursor:pointer}
.d-hit circle{fill:transparent;pointer-events:all}
.d-hit:focus{outline:none}
.d-hit:focus-visible circle{fill:rgba(106,186,81,.14);stroke:var(--accent);stroke-width:2}
.d-zone{fill:transparent;stroke:none;transition:fill .15s}
.diagram [data-part] rect,.diagram [data-part] path,.diagram [data-part] circle{transition:stroke .15s,stroke-width .15s}
.diagram [data-part].on rect,.diagram [data-part].on path{stroke:var(--accent);stroke-width:3.5}
.diagram .d-soft [data-part].on rect,.diagram .d-soft [data-part].on path{stroke-width:2.5}
.d-zone.on{fill:rgba(106,186,81,.10);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4}
.d-hit.on text{fill:var(--paper)}
.d-hit.on circle{fill:var(--accent)}
.d-hint{display:block;margin-top:var(--s2);color:var(--sage)}
/* 編號是要用手指點的。圖等比縮小時熱區會跟著縮到 11px，
   所以設下限寬並改成橫向捲動，讓熱區維持在 24px 以上。 */
.diagram .canvas svg{min-width:40rem;border:0;background:none;padding:var(--s4)}
.parts div{transition:background .15s;border-radius:2px}
.parts div.on{background:var(--surface-2)}
.parts div.on .pn{background:var(--accent);color:var(--paper)}
.parts div{cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .d-zone,.diagram [data-part] rect,.diagram [data-part] path,.parts div{transition:none}
}

/* ── 示意圖：側視標準尺寸與五種格局 ─────────────────────
   從《系統廚具構造指南》移植過來。線稿用 currentColor，
   標註與量測線用 --accent，跟站上其他圖同一套語彙。
   刻意不用 color-mix，改寫成等效 rgba，維持全站零新語法風險。 */
.lgd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:12.5px;color:var(--sage);margin:0 0 var(--s4)}
.lgd span{width:15px;height:10px;display:inline-block;margin-right:4px;border:1.4px solid currentColor}
.lgd .k-run{background:rgba(155,165,149,.14)}
.lgd .k-fx{border-color:var(--accent);border-radius:2px}
.lgd .k-cn{background:rgba(106,186,81,.20);border-style:dashed}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);margin:0 0 var(--s5)}
.plan{margin:0;border:1px solid var(--line);background:var(--surface)}
.plan svg{display:block;width:100%;height:auto;color:var(--ink-2);padding:var(--s3) var(--s3) 0;box-sizing:border-box}
.plan .rm{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 3;opacity:.3}
.plan .run{fill:rgba(155,165,149,.14);stroke:currentColor;stroke-width:1.6}
.plan .fx{fill:none;stroke:var(--accent);stroke-width:1.4}
.plan .cn{fill:rgba(106,186,81,.20);stroke:none}
.plan .dim{fill:none;stroke:var(--accent);stroke-width:1.2}
.plan .lb{fill:var(--sage);font-family:var(--font-mono);font-size:8px}
.plan figcaption{padding:var(--s3);border-top:1px solid var(--line)}
.plan b{display:block;font-family:var(--font-serif);font-size:16px;color:var(--ink);margin-bottom:2px}
.plan span{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.canvas{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--surface)}
.canvas svg{display:block;border:0;padding:var(--s4);box-sizing:border-box}
.sect .wl{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.75}
.sect .bx{fill:none;stroke:currentColor;stroke-width:1.7}
.sect .sl{fill:rgba(155,165,149,.22);stroke:currentColor;stroke-width:1.7}
.sect .ext{fill:none;stroke:currentColor;stroke-width:.9;opacity:.45}
.sect .dln{fill:none;stroke:var(--accent);stroke-width:1.3}
.sect .ah{fill:var(--accent);stroke:none}
.sect .dt{fill:var(--ink-2);font-family:var(--font-mono);font-size:13px}
.sect .pt{fill:var(--sage);font-family:var(--font-sans);font-size:13px}
.sect .fg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.sect .gd{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:5 4}
.sect .fm{fill:var(--ink);font-family:var(--font-mono);font-size:14px}
.sect .fm2{fill:var(--ink-2);font-family:var(--font-sans);font-size:13px}
.sect .canvas svg{min-width:36rem}
.chart{margin:0 0 var(--s6)}
.chart svg{display:block;width:100%;height:auto;color:var(--ink-2)}
.chart figcaption{margin-top:var(--s3);font-size:13.5px;color:var(--sage);max-width:var(--measure)}

/* ── 常駐 LINE 入口 ─────────────────────────────────────
   手機靠底部那條，桌機用右下角這顆。LINE 是主要管道，
   任何一頁都要一眼看得到、一下點得到。 */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:25;display:none;
  flex-direction:column;align-items:flex-start;gap:2px;
  padding:11px 16px 12px;border-radius:3px;text-decoration:none;
  background:var(--line-green);color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.fab-main{font-size:16px;line-height:1.35;font-weight:600;letter-spacing:.02em}
/* QR 需要淺底才掃得到，所以另外墊一塊白 */
.fab-qr{display:block;background:#fff;border-radius:2px;padding:7px;margin:7px 0 4px;line-height:0}
.fab-qr img{display:block;width:128px;height:128px}
.fab-hint{font-size:12px;line-height:1.35;letter-spacing:.04em;opacity:.95}
.fab-id{font-size:12px;line-height:1.3;opacity:.9}
.fab:hover,.fab:focus-visible{
  background:#05a948;color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
@media (min-width:900px){.fab{display:inline-flex}}

/* 手機底部那條：LINE 佔比放大，它是主要管道 */
.dock a.dock-line{flex:1.5}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .fab:hover,.fab:focus-visible{transform:none}
}

/* ── 手機上的 QR 彈窗 ───────────────────────────────────
   自己的手機掃不了自己的螢幕，所以手機版不常駐 QR——那只會佔掉版面，
   還跟一點就開的 LINE 連結搶位置。改成底部聯絡列按一下才開，用途是把
   畫面拿給旁邊的人掃。要自己加的人點 QR 本身就直接開 LINE。 */
.qrsheet{
  border:0;padding:0;background:transparent;color:inherit;
  max-width:100%;max-height:100%;margin:auto;
}
.qrsheet::backdrop{background:rgba(0,0,0,.72)}
.qrsheet-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s2);padding:var(--s5) var(--s5) var(--s4);
  background:var(--line-green);color:#fff;border-radius:4px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  max-height:100dvh;overflow-y:auto;max-width:min(90vw,320px);
}
.qrsheet-h{font-family:var(--font-serif);font-size:20px;font-weight:600;letter-spacing:.02em;margin:0;max-width:none}
/* QR 要淺底才掃得到，所以另外墊一塊白 */
.qrsheet-qr{
  display:block;background:#fff;border-radius:3px;padding:10px 10px 6px;
  margin-top:var(--s1);text-decoration:none;line-height:0;
}
.qrsheet-qr img{display:block;width:min(56vw,240px);height:auto}
.qrsheet-tap{
  display:block;padding-top:7px;line-height:1.3;
  font-size:12px;letter-spacing:.04em;color:var(--line-green);font-weight:600;
}
.qrsheet-hint{font-size:13px;line-height:1.5;letter-spacing:.02em;margin:var(--s1) 0 0;max-width:20em;opacity:.95}
.qrsheet-id{font-size:12.5px;margin:0;opacity:.9}
.qrsheet-x{
  font:inherit;font-size:13px;letter-spacing:.1em;cursor:pointer;
  margin-top:var(--s2);padding:var(--s2) var(--s5);
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:2px;
}
.qrsheet-x:hover{background:rgba(255,255,255,.14)}
/* 橫著拿手機時高度很吃緊——把 QR 改成受高度限制，說明那行先讓位。
   QR 本身跟「點一下就開 LINE」不能少，那兩個才是這張卡的用途。 */
@media (max-height:560px){
  .qrsheet-card{gap:var(--s1);padding:var(--s4) var(--s5) var(--s3)}
  .qrsheet-qr img{width:min(46vw,44vh,240px)}
  .qrsheet-hint{display:none}
}
/* 彈窗開著的時候底下不要跟著捲 */
body.sheet-open{overflow:hidden}

@media print{.fab,.dock-qr,.qrsheet{display:none}}
@media print{
  :root{--paper:#fff;--surface:#fff;--surface-2:#fff;--ink:#000;--ink-2:#444;
        --line:#ccc;--line-2:#999;--brand:#0E2E1D;--brand-deep:#0E2E1D;color-scheme:light}
  .brand-logo{background-image:url(/assets/logo-lockup-ink.png)}
  .dock,.site-nav,.menu-btn,.cta{display:none}
  body{padding:0}
  .map iframe{filter:none}
}

/* 品牌宣言：只用在首頁 */
.statement{
  font-family:var(--font-serif);font-size:clamp(21px,3.4vw,29px);line-height:1.75;
  color:var(--brand-deep);margin:var(--s7) 0;padding:0 0 0 var(--s5);
  border-left:2px solid var(--accent);max-width:22em;
}

/* 嵌入地圖 */
.map{margin:0 0 var(--s6)}
.map iframe{display:block;width:100%;border:1px solid var(--line);background:var(--surface)}
/* OSM 圖磚本身是淺色的。深色頁面上反相＋轉色相，維持道路與標籤的可讀性。 */
:root:not([data-theme="light"]) .map iframe{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(1.05)}
.map figcaption{line-height:1.9}

/* 部位圖：線稿在深底上要夠亮才看得清 */
.diagram{margin:0 0 var(--s6)}
.diagram svg{display:block;width:100%;height:auto;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);padding:var(--s4)}
.diagram .d-num{fill:var(--accent)}
.parts dt{flex:0 0 8.5em;display:flex;align-items:baseline;gap:var(--s2);color:var(--ink);font-size:16px}
.parts .pn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:1.6em;height:1.6em;border-radius:50%;
  background:var(--surface-2);color:var(--accent);
  font-family:var(--font-mono);font-size:12px;
}

/* 溫暖陪伴：全站共用色彩與形狀，2026-09 */
:root[data-theme="light"]{
 --paper:#FAF7F0;--surface:#FFFDF8;--surface-2:#F0EBDD;
 --ink:#313C33;--ink-2:#62685D;--ink-3:#62685D;--line:#E3DDCF;--line-2:#C7CBB9;
 --brand:#3D654A;--brand-deep:#294532;--sage:#69745C;--accent:#6ABA51;--line-green:#237346;
}
h1,h2,h3,h4{font-family:var(--font-sans);letter-spacing:.01em}
h1{font-weight:650}h2,h3{font-weight:600}
.site-head{background:var(--paper)}
.brand-logo{background-image:url(/assets/logo-lockup-ink.png)}
.btn,.menu-btn{border-radius:12px;min-height:44px}
.btn-primary{background:var(--brand-deep);color:#fff}.btn-primary:hover{background:var(--brand);color:#fff}
.btn-line:hover{background:#195A35}
.dock a.dock-line,.dock a.dock-line:hover{color:#fff}
.cta,.card,.qr,details,.vision-card,.story-opener{border-radius:16px;overflow:hidden}
.cta{background:var(--surface-2);border:0;padding:32px}
.eyebrow{font-family:var(--font-sans);font-size:14px;letter-spacing:.1em;text-indent:0}
.site-foot{background:var(--surface-2)}
.fab{border-radius:16px;padding:14px 18px 12px;box-shadow:0 4px 16px #29453218}
/* LINE QR 要常駐：桌機看網站、拿手機掃，是加 LINE 最直接的一條路 */
.fab-qr{border-radius:10px;padding:8px}.fab-hint,.fab-id{opacity:1}
.fab:hover{background:#195A35;box-shadow:0 5px 20px #29453224}
.home-page main{max-width:1160px;padding-top:48px}
.welcome{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:72px}
.welcome h1{font-size:clamp(36px,4.5vw,58px);line-height:1.3;letter-spacing:.02em}
.welcome .lede{font-size:18px;line-height:1.9}
.welcome-note{font-size:14px;color:var(--ink-2);margin-top:20px}
.welcome-image{margin:0;min-width:0}.welcome-image img{width:100%;height:auto;border:0;border-radius:100px 24px 24px 24px}
.welcome-image figcaption{padding:12px 8px;text-align:center;font-size:14px}
.journey{scroll-margin-top:24px}.journey h2{border:0;padding:0;margin:0 0 28px;font-size:30px}.journey .eyebrow{margin-bottom:12px}
.journey-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.journey-card{display:flex;flex-direction:column;background:var(--surface);padding:26px 22px;border:1px solid var(--line);border-radius:20px}
.step-label{font-size:14px;color:var(--brand)}.journey-card h3{font-size:21px;margin:22px 0 16px;line-height:1.6}
.journey-card p{font-size:16px;line-height:1.85}.journey-card a{font-size:15px;margin-top:auto;padding-top:16px;font-weight:600}
.home-promise{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin:80px 0;padding:40px;background:var(--surface-2);border-radius:24px}
.home-promise h2{border:0;padding:0;margin:0 0 24px;font-size:30px}.home-promise img{width:100%;height:auto;border-radius:16px}
.home-page main > h2,.home-page main > h3,.home-page main > p,.home-page main > .facts{max-width:800px;margin-left:auto;margin-right:auto}
.home-page .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.home-page .cards .card{padding:28px}
.content-page main{padding-top:40px}.content-page h1{line-height:1.5}
@media(max-width:960px){.welcome{gap:28px}.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-promise{gap:28px;padding:28px}}
@media(max-width:639px){
 .home-page main{padding-top:28px}.welcome{grid-template-columns:1fr;gap:24px;margin-bottom:44px}.welcome h1{font-size:38px}.welcome-image img{border-radius:48px 16px 16px 16px}
 .journey-grid,.home-page .cards{grid-template-columns:1fr}.journey-card{padding:24px}.journey-card h3{margin-top:12px}.journey-card h3 br{display:none}
 .home-promise{grid-template-columns:1fr;margin:48px 0;padding:24px;gap:24px}.home-promise h2,.journey h2{font-size:26px}.cta{padding:24px}
}

/* LINE QR 小卡在 900–1599px 的筆電縮成 112px（make-qr.py --verify 實掃過的最小尺寸）仍常駐；首頁內容讓出右側，不被小卡蓋住。放檔尾才蓋得過上面的 .home-page main */
@media (min-width:900px) and (max-width:1599px){
 .fab{padding:10px 12px;right:16px;bottom:16px}.fab-main{font-size:14px}.fab-qr{padding:6px;margin:6px 0 2px}.fab-qr img{width:112px;height:112px}.fab-hint{display:none}
 .home-page main{max-width:calc(100vw - 360px)}
}
@media (min-width:900px) and (max-width:1279px){.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px) and (max-width:1023px){.content-page main{max-width:calc(100vw - 360px)}}
/* 首頁「搜尋結果」信任區：卡片仿搜尋結果的結構，但用本站色票，不用 Google 的標誌與配色。
   整張卡可點（標題連結的 ::after 撐滿），觸控目標夠大；鍵盤焦點落在標題，外框畫在整張卡上。 */
.search-proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;margin:80px 0;padding:40px;background:var(--surface);border:1px solid var(--line);border-radius:24px}
.sp-head h2{border:0;padding:0;margin:12px 0 20px;font-size:30px;line-height:1.5}
.sp-head > p:not(.eyebrow){line-height:1.9;margin:0 0 24px}
.sp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sp-head,.sp-card{min-width:0}
.sp-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px;transition:border-color .2s,box-shadow .2s,transform .2s}
.sp-card:hover{border-color:var(--line-2);box-shadow:0 6px 20px #29453214;transform:translateY(-2px)}
.sp-card:focus-within{outline:2px solid var(--brand);outline-offset:3px}
.sp-card :focus-visible{outline:0}
.sp-title{margin:0 0 6px;font-size:17px;line-height:1.5;font-weight:600}
.sp-title a{color:var(--brand);text-decoration:none}
.sp-title a::after{content:"";position:absolute;inset:0;border-radius:16px}
.sp-desc{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.sp-card{transition:none}.sp-card:hover{transform:none}}
@media (max-width:1100px){.search-proof{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:639px){
 .search-proof{margin:48px 0;padding:24px 16px;gap:24px;border-radius:20px}.sp-head h2{font-size:26px}
 .sp-list{grid-template-columns:minmax(0,1fr)}  }
/* 首頁評論區：月桂五顆星＋無限輪播（輪播機制見檔尾「評論輪播 v2」） */
.testimonials{margin:80px 0;padding:48px 0 40px;background:var(--surface-2);border-radius:24px;overflow:hidden}
.tm-head{text-align:center;padding:0 24px;margin-bottom:32px}.tm-head .eyebrow{margin-left:auto;margin-right:auto;text-align:center}
.tm-head h2{border:0;padding:0;margin:8px 0 0;font-size:30px;line-height:1.5}
.laurel{display:inline-flex;align-items:center;gap:4px;margin-bottom:20px}
.laurel>svg{width:60px;height:105px;fill:var(--brand);stroke:var(--brand)}
.laurel-r{transform:scaleX(-1)}
.laurel-core{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:140px}
.laurel-stars{display:inline-flex;gap:2px}.laurel-stars svg,.tm-stars svg{width:18px;height:18px;fill:var(--gold);stroke:none}
.tm-track{flex:none;max-width:none;display:flex;gap:20px;list-style:none;margin:0;padding:8px 0}
.tm-card{flex:0 0 320px;display:flex;flex-direction:column;gap:12px;margin:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.tm-stars{margin:0;display:flex;gap:2px}
.tm-text{margin:0;padding:0;border:0;flex:1}.tm-text p{margin:0;font-size:16px;line-height:1.85;color:var(--ink)}
.tm-who{display:flex;align-items:center;gap:12px;margin:4px 0 0}
.tm-avatar{flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--brand-deep);color:#fff;font-weight:600}
.tm-who b{display:block;font-size:16px}.tm-who small{display:block;font-size:13px;color:var(--ink-2)}
.tm-project{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--brand)}
@media (max-width:639px){
 .testimonials{margin:48px 0;padding:32px 0 24px;border-radius:20px}.tm-head h2{font-size:24px}
 .tm-card{flex-basis:78vw;max-width:300px}.laurel>svg{width:44px;height:77px}
}
.tm-label{margin:0;font-size:13px;letter-spacing:.08em;color:var(--brand)}
.tm-worry{margin:0;font-size:19px;line-height:1.6;font-weight:600;color:var(--brand-deep)}
.tm-answer{margin:0;flex:1;font-size:15px;line-height:1.85;color:var(--ink)}
.tm-concern .tm-project a{display:inline-block;padding:6px 0;font-size:14px;font-weight:600}
/* 廚視示範影片與內測登記 */
.beta-media{margin:0;min-width:0;text-align:center}
.beta-video{display:block;width:100%;max-width:360px;height:auto;max-height:78vh;margin:0 auto;aspect-ratio:9/16;object-fit:cover;background:#2B3028;border-radius:28px;box-shadow:0 12px 40px #29453226}
.beta-media figcaption{margin-top:12px;font-size:13px;color:var(--ink-2)}
.beta-video-cover{position:relative;overflow:hidden;cursor:pointer}
.beta-video-cover img{display:block;width:100%;height:100%;object-fit:cover}
.beta-video-cover .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:#101410b8;box-shadow:0 4px 18px #0006;transition:transform .15s}
.beta-video-cover .play::after{content:"";position:absolute;left:27px;top:21px;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.beta-video-cover:hover .play,.beta-video-cover:focus-visible .play{transform:scale(1.08)}
.beta-video-cover:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.video-watch{margin:8px 0 40px}
.beta-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;margin-bottom:56px}
.beta-hero h1{font-size:clamp(32px,4vw,48px);line-height:1.35}
.beta-badge{display:inline-block;padding:10px 16px;border-radius:12px;background:var(--surface-2);font-size:15px;max-width:none}
.beta-badge strong{color:var(--brand-deep)}
.beta-steps li{margin-bottom:12px;line-height:1.85}
.beta-signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin:64px 0;padding:40px;background:var(--surface-2);border-radius:24px;scroll-margin-top:24px}
.beta-signup h2{border:0;padding:0;margin:8px 0 16px;font-size:28px;line-height:1.5}
.beta-card{display:flex;flex-direction:column;gap:16px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.beta-card p{margin:0;max-width:none}
.beta-detect{font-size:15px;color:var(--brand-deep);font-weight:600}
.beta-platform{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px}
.beta-platform legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:600}
.beta-platform label{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;font-size:15px}
.beta-platform label:has(input:checked){border-color:var(--brand-deep);background:var(--surface-2);font-weight:600}
.beta-platform input{accent-color:var(--brand-deep)}
.beta-field{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
.beta-field small{font-weight:400;color:var(--ink-2)}
.beta-field input,.beta-field textarea{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);color:var(--ink);width:100%;box-sizing:border-box}
.beta-field input:focus-visible,.beta-field textarea:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.beta-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.beta-card .btn{align-self:flex-start;border:0;cursor:pointer;font:inherit;font-weight:600;padding:0 24px}
.beta-card .btn:disabled{opacity:.6;cursor:wait}
.beta-status{min-height:1.5em;font-weight:600;color:var(--brand-deep)}
.beta-privacy{font-size:13px;line-height:1.8;color:var(--ink-2)}
.home-beta{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;margin:80px 0}
.home-beta h2{border:0;padding:0;margin:8px 0 20px;font-size:30px;line-height:1.5}
.home-beta .beta-video{max-width:320px}
@media (max-width:900px){.beta-hero,.beta-signup,.home-beta{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:639px){
 .beta-signup{padding:24px 16px;margin:48px 0}.beta-card{padding:20px}.home-beta{margin:48px 0}
 .beta-video{max-width:280px}.home-beta .beta-video{max-width:260px}.home-beta h2,.beta-signup h2{font-size:24px}
}
/* 內頁欄寬窄，兩欄會把標題擠斷：影片介紹頁一律上下排 */
.content-page .beta-hero,.content-page .beta-signup{grid-template-columns:minmax(0,1fr);gap:32px}
.content-page .beta-hero .beta-video{max-width:340px}
/* 首屏 LINE QR（手機不顯示）。它在畫面上時右下角小卡淡出、也不能被 Tab 到 */
.hero-qr{display:none}
@media (min-width:900px){
 .hero-qr{display:inline-flex;align-items:center;gap:16px;margin-top:24px;padding:12px 20px 12px 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;box-shadow:0 4px 16px #29453212;transition:border-color .2s,box-shadow .2s}
 .hero-qr:hover{border-color:var(--brand);box-shadow:0 6px 20px #2945321f}
 .hero-qr img{display:block;width:112px;height:112px;padding:6px;background:#fff;border-radius:10px}
 .hero-qr span{display:flex;flex-direction:column;gap:4px}
 .hero-qr b{font-size:17px;color:var(--brand-deep)}.hero-qr small{font-size:13px;color:var(--ink-2)}
 .fab{transition:opacity .25s,transform .25s,visibility 0s linear 0s}
 .hero-qr-on .fab{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility 0s linear .25s}
}
@media (prefers-reduced-motion:reduce){.fab,.hero-qr-on .fab{transition:none}}
/* 首頁敘事：願景（首屏）→ 使命 → 流程 */
.home-mission{margin:0 0 80px;text-align:center}
.home-mission h2{border:0;padding:0;margin:8px 0 32px;font-size:30px;line-height:1.5}
.home-mission .eyebrow{margin-left:auto;margin-right:auto}
.mission-grid{list-style:none;margin:0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.mission-grid li{display:flex;flex-direction:column;padding:28px 24px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.mission-no{font-family:var(--font-mono);font-size:14px;color:var(--accent);letter-spacing:.08em}
.mission-grid h3{margin:10px 0 12px;font-size:22px;color:var(--brand-deep)}
.mission-grid p{margin:0;font-size:16px;line-height:1.85;max-width:none}
.mission-grid a{margin-top:auto;padding-top:16px;font-size:15px;font-weight:600}
.home-page main > h2#process-detail{margin-top:64px}
@media (max-width:960px){.mission-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:639px){.home-mission{margin-bottom:48px}.home-mission h2{font-size:26px}.mission-grid li{padding:24px}}
/* 搜尋區卡片：不模擬搜尋結果，搜尋字當標籤，整張卡連到內容 */
.sp-tags{list-style:none;margin:0;padding:0;max-width:none;display:flex;flex-wrap:wrap;gap:6px}
.sp-tags li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:13px;font-weight:600;color:var(--ink)}
.sp-tags svg{width:13px;height:13px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.sp-card .sp-title{font-size:20px;margin:4px 0 0}
.sp-card .sp-desc{font-size:15px;color:var(--ink)}
.sp-cta{margin:auto 0 0;font-size:15px;font-weight:600;color:var(--brand)}
.sp-card:hover .sp-cta{text-decoration:underline;text-underline-offset:3px}
/* 首頁「美感系統廚房」：三組風格，色塊只是門片＋檯面的示意 */
.home-style{margin:80px 0}
.style-head{max-width:800px;margin:0 auto 32px;text-align:center}
.style-head h2{border:0;padding:0;margin:8px 0 20px;font-size:30px;line-height:1.5}
.style-head .eyebrow,.style-head p{margin-left:auto;margin-right:auto}
.style-grid{list-style:none;margin:0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.style-card{display:flex;flex-direction:column;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.style-swatch{display:flex;height:72px;border-radius:12px;overflow:hidden;margin-bottom:18px;box-shadow:inset 0 0 0 1px #0000000f}
.style-swatch i{flex:1}.style-swatch i+i{flex:.7}
.style-card h3{margin:0 0 6px;font-size:21px;color:var(--brand-deep)}
.style-combo{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--brand)}
.style-card p:not(.style-combo){margin:0;font-size:15px;line-height:1.85;max-width:none}
.style-card a{margin-top:auto;padding-top:16px;font-size:15px;font-weight:600}
.style-note{text-align:center;margin:24px auto 0;font-size:15px;color:var(--ink-2)}
@media (max-width:960px){.style-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:639px){.home-style{margin:48px 0}.style-head h2{font-size:26px}}
/* 評論輪播 v2：用捲動容器取代 transform＋mask。
   舊做法整條 9,500px 被當成一張合成圖層，Retina（2×）上超過瀏覽器 16,384px 的圖層上限，整排消失。
   捲動容器是分塊繪製的，沒有這個上限；JS 每幀推 scrollLeft，捲到一半接回開頭，看起來無限。
   手機可以直接滑，滑的時候暫停；滑鼠移上去、鍵盤焦點進來也暫停；減少動態就只能手動滑。 */
.tm-rail{position:relative}
.tm-rail::before,.tm-rail::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none}
.tm-rail::before{left:0;background:linear-gradient(90deg,var(--surface-2),transparent)}
.tm-rail::after{right:0;background:linear-gradient(270deg,var(--surface-2),transparent)}
.tm-window{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding:8px 0;outline-offset:-4px}
.tm-window::-webkit-scrollbar{display:none}
.tm-track{padding:0}
.laurel-core{min-width:120px}
.laurel-stars svg{width:26px;height:26px}
.tm-cta{margin-top:28px;padding:0 24px;text-align:center}
.tm-cta p{margin:0 auto 14px;font-size:18px;font-weight:600;color:var(--brand-deep)}
.tm-cta .cta-row{justify-content:center}
@media (prefers-reduced-motion:reduce){.tm-window{scroll-snap-type:x mandatory;padding:8px 24px}.tm-card{scroll-snap-align:start}.tm-clone{display:none}}
@media (max-width:639px){.tm-rail::before,.tm-rail::after{width:24px}.laurel-stars svg{width:22px;height:22px}}
/* 「每一步」極簡版：七個節點一條線 */
.process{list-style:none;margin:32px 0 16px;padding:0;max-width:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;counter-reset:step}
.process li{position:relative;padding:28px 8px 0;text-align:center;counter-increment:step}
.process li::before{content:"";position:absolute;top:8px;left:0;right:0;height:1px;background:var(--line-2)}
.process li:first-child::before{left:50%}.process li:last-child::before{right:50%}
.process li::after{content:"";position:absolute;top:3px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--paper);border:2px solid var(--brand)}
.process b{display:block;font-size:17px;color:var(--brand-deep)}
.process span{display:block;margin-top:6px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.process-goal{font-size:18px;color:var(--ink)}
.process-more{font-size:14px;color:var(--ink-2)}
@media (max-width:760px){
 .process{grid-template-columns:minmax(0,1fr);gap:0;margin:24px 0}
 .process li{padding:0 0 20px 32px;text-align:left}
 .process li::before{top:0;bottom:0;left:7px;right:auto;width:1px;height:auto}
 .process li:first-child::before{left:7px;top:10px}.process li:last-child::before{bottom:auto;height:10px;right:auto}
 .process li::after{top:4px;left:2px;margin-left:0}
 .process b,.process span{display:inline}.process span{margin:0 0 0 10px}
}
.home-page main > .process{max-width:800px;margin-left:auto;margin-right:auto}
/* 完工實景：一張一張往下看，照片維持原本的比例不裁切；直幅的縮窄置中，不然一張就佔滿兩個螢幕。 */
.show-list{margin:var(--s5) 0 var(--s7)}
.show-photo{margin:0 0 var(--s5);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.show-photo img{border:0}
.show-photo figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px var(--s4) 16px;border-top:1px solid var(--line)}
.show-story{font-family:var(--font-serif);font-size:18px;font-weight:600;line-height:1.6;color:var(--brand-deep)}
.show-fit,.strip-fit{font-size:13px;line-height:1.5;padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--brand-deep);white-space:nowrap}
.show-feat{flex-basis:100%;font-size:14px;line-height:1.7;color:var(--ink-2)}
.show-photo.is-tall{max-width:500px;margin-left:auto;margin-right:auto}
.vision-card a{display:block}
/* 完工實景總覽：三組封面。照片下方有品牌帶，所以照原比例顯示、不裁切 */
.show-index{display:grid;grid-template-columns:1fr;gap:var(--s5);margin:0 0 var(--s7)}
@media (min-width:760px){.show-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.show-index .vision-card img{aspect-ratio:auto;object-fit:initial}
/* 拉水平之後每張照片的比例不一樣；桌機三張並排，框統一成 4:3，比較寬的照片左右各裁一點，比較高的裁掉下緣 */
@media (min-width:760px){.show-index .shot{aspect-ratio:4/3!important}.show-index .shot img{width:calc(100% * max(1, var(--r) * .75));margin-left:calc((100% - 100% * max(1, var(--r) * .75)) / 2)}}
/* 只顯示照片本身：品牌帶裁在框外。框的比例等於照片本身，圖從上緣對齊 */
.shot{display:block;overflow:hidden}
.shot img{display:block;width:100%;height:auto;max-width:none}
.welcome-image .shot{border-radius:100px 24px 24px 24px}
.welcome-image .shot img{border-radius:0}
@media (max-width:639px){.welcome-image .shot{border-radius:48px 16px 16px 16px}}

/* 首頁：完工實景橫向列。不自動捲動；手機用手滑，桌機多兩顆按鈕 */
.home-show{margin:0 0 80px}
.home-show h2{border:0;padding:0;margin:8px 0 12px;font-size:30px;line-height:1.5}
.show-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 20px;max-width:none;font-size:15px;font-weight:600}
.strip{position:relative}
.strip-track{--strip-h:clamp(240px,40vw,460px);display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.strip-track:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.strip-item{flex:none;width:min-content;scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.strip-item .shot{height:var(--strip-h);width:calc(var(--strip-h) * var(--r));flex:none}
.strip-item img{border:0}
.strip-cap{display:block;padding:10px 14px 12px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.strip-cap b{display:block;font-family:var(--font-serif);font-size:16px;color:var(--brand-deep)}
.strip-cap{font-size:15px;color:var(--ink)}
.strip-fit{display:inline-block;margin-top:8px}
.strip-more{width:clamp(200px,24vw,280px);justify-content:center;align-items:center;text-align:center;gap:8px;padding:24px;background:var(--line-green);border-color:var(--line-green);color:#fff}
a.strip-more,a.strip-more:visited,a.strip-more:hover{color:#fff}
.strip-more b{font-family:var(--font-serif);font-size:22px;line-height:1.5}
.strip-more span{font-size:14px;line-height:1.6}
.strip-nav{display:none;gap:8px;justify-content:flex-end;margin-top:4px}
.strip-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--brand-deep);font-size:22px;line-height:1;cursor:pointer}
.strip-btn:disabled{opacity:.35;cursor:default}
.strip-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover) and (min-width:900px){.strip-nav{display:flex}}
@media (max-width:639px){.home-show{margin-bottom:48px}.home-show h2{font-size:26px}}

/* 首頁：先從問題看起。順序照 Search Console 上最多人查的問題排，每張一個小圖、一句回答 */
.home-pain{margin:0 0 72px}
.home-pain h2{border:0;padding:0;margin:8px 0 20px;font-size:30px;line-height:1.5}
.pain-card{flex:0 0 clamp(224px,23vw,256px);scroll-snap-align:start;display:flex;flex-direction:column;padding:18px 18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.pain-ico{display:block;border-radius:12px;background:var(--surface-2);padding:14px 0;margin:0 0 14px}
.pain-ico svg{display:block;width:116px;height:87px;margin:0 auto;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pain-ico .s{stroke:var(--brand-deep)}
.pain-ico .a{stroke:#B4552F}
.pain-ico .d{fill:#B4552F;stroke:none}
.pain-ico .w{fill:var(--sage);stroke:none;opacity:.45}
.pain-card h3{margin:0 0 8px;font-size:19px;line-height:1.5;color:var(--brand-deep)}
.pain-card p{margin:0;font-size:15px;line-height:1.75;max-width:none}
.pain-card a{margin-top:auto;padding-top:14px;font-size:15px;font-weight:600}
@media (max-width:639px){.home-pain{margin-bottom:48px}.home-pain h2{font-size:26px}.pain-card{flex-basis:74%}}

/* 首頁流程卡：每張上面一張插畫。手機改成橫向一張一張滑 */
.journey-pic{margin:-26px -22px 18px}
.journey-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:0}
.journey-card{overflow:hidden}
.journey-card h3{margin-top:12px}
@media (max-width:639px){
 .journey-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:2px 2px 14px;scrollbar-width:thin}
 .journey-card{flex:0 0 78%;scroll-snap-align:start}
 .journey-pic{margin:-24px -24px 16px}
}
/* 頁尾簽名：台灣島圖標＋「優廚在台灣設計與製作。」 */
.foot-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px}
.made-in{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.made-mark{width:9px;height:16px;fill:var(--brand)}