/* ============================================================
   田庄食品 tjgoodfood.com  ·  共用樣式
   顏色、字級全部集中在這裡改,所有頁面會一起變。
   ============================================================ */

:root{
  /* 色票 —— 取自陶爐、湯色、不鏽鋼 */
  --ground:  #E9EBE5;   /* 瓷灰綠 · 頁面底色 */
  --white:   #FBFBF9;   /* 卡片底 */
  --kiln:    #1C2620;   /* 窯墨綠 · 深色區塊與標題 */
  --steel:   #6E7B7A;   /* 不鏽鋼灰 · 次要文字 */
  --broth:   #B8801E;   /* 湯琥珀 · 唯一重點色,用得越少越有力 */
  --line:    #C9CEC6;   /* 分隔線 */

  --serif: "Noto Serif TC", serif;
  --sans:  "Noto Sans TC", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:clip; }

body{
  margin:0;
  background:var(--ground);
  color:var(--kiln);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- 通用文字元件 ---------- */

.tag{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--broth); display:block; margin-bottom:1rem;
}

h1,h2,h3{
  font-family:var(--serif); font-weight:700;
  line-height:1.3; letter-spacing:.01em; margin:0 0 1rem;
}
h1,h2,h3{ overflow-wrap:break-word; line-break:strict; word-break:normal; }
h2{ font-size:clamp(1.6rem, 3.6vw, 2.4rem); }
h3{ font-size:1.15rem; margin-bottom:.5rem; }
p{ margin:0 0 1.1rem; }

.lead{
  font-size:clamp(1.05rem, 2vw, 1.2rem);
  color:var(--steel); max-width:44ch;
}

/* ---------- 頁首 ---------- */

.nav{ border-bottom:1px solid var(--line); background:var(--ground); position:sticky; top:0; z-index:50; }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px; }
.nav__logo{
  font-family:var(--serif); font-weight:700; font-size:1.15rem;
  text-decoration:none; letter-spacing:.04em; white-space:nowrap;
}
.nav__logo span{ color:var(--broth); }
.nav__links{ display:flex; gap:clamp(.9rem,2.4vw,2rem); list-style:none; margin:0; padding:0; font-size:.9rem; }
.nav__links a{ text-decoration:none; padding-block:.4rem; border-bottom:2px solid transparent; white-space:nowrap; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ border-bottom-color:var(--broth); }
.nav__tel{ font-family:var(--mono); font-size:.85rem; text-decoration:none; white-space:nowrap; }

/* 漢堡按鈕 —— 桌機隱藏 */
.nav__toggle{
  display:none; background:none; border:1px solid var(--line);
  width:44px; height:44px; padding:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav__toggle span{
  display:block; width:18px; height:1.5px; background:var(--kiln);
  transition:transform .2s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- 主視覺 ---------- */

.hero{ position:relative; overflow:hidden; padding-block:clamp(3.5rem,9vw,7rem); }
.hero__mark{
  position:absolute; right:-.12em; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(20rem,44vw,34rem); line-height:1;
  color:var(--kiln); opacity:.05; pointer-events:none; user-select:none;
}
.hero__inner{ position:relative; max-width:46rem; }
.hero h1{ font-size:clamp(2.1rem,6vw,3.7rem); margin-bottom:1.5rem; }
.hero h1 em{ font-style:normal; background:linear-gradient(transparent 68%, rgba(184,128,30,.35) 68%); }
.hero__sub{ font-size:clamp(1rem,2vw,1.15rem); max-width:38ch; color:var(--steel); }
.hero--slim{ padding-block:clamp(2.5rem,6vw,4.5rem); }

/* 廠籍資料條 */
.specbar{
  border-block:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.08em; color:var(--steel); padding-block:.9rem;
}
.specbar ul{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; list-style:none; margin:0; padding:0; }

/* ---------- 麵包屑 ---------- */
.crumb{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--steel); padding-block:1.25rem;
}
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--broth); }

/* ---------- 按鈕 ---------- */

.btns{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.btn{
  display:inline-block; text-decoration:none;
  padding:.85rem 1.7rem; font-size:.95rem; font-weight:500;
  border:1px solid var(--kiln); transition:.18s ease;
}
.btn--solid{ background:var(--kiln); color:var(--ground); }
.btn--solid:hover{ background:var(--broth); border-color:var(--broth); }
.btn--ghost:hover{ background:var(--kiln); color:var(--ground); }
.band--dark .btn--ghost{ border-color:var(--ground); color:var(--ground); }
.band--dark .btn--ghost:hover{ background:var(--ground); color:var(--kiln); }

/* ---------- 區塊 ---------- */

.band{ padding-block:clamp(3rem,7vw,5.5rem); }
.band--dark{ background:var(--kiln); color:var(--ground); }
.band--dark .lead{ color:#A9B4AC; }
.band--dark .tag{ color:var(--broth); }
.band--paper{ background:var(--white); }
.band__head{ max-width:48rem; margin-bottom:2.75rem; }

/* ---------- 網格卡片 ---------- */

.grid{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.cell{
  background:var(--white); padding:2rem 1.75rem;
  text-decoration:none; color:inherit; display:block; transition:background .18s ease;
}
.cell:hover{ background:#F4F2EC; }
.cell p{ font-size:.94rem; color:var(--steel); margin:0; }
.cell__code{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  color:var(--broth); display:block; margin-bottom:.9rem;
}

/* 有圖版本的產品卡 */
.cell--photo{ padding:0; }
.cell--photo .cell__body{ padding:1.75rem; }
.ph{
  aspect-ratio:4/3; background:var(--ground);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--steel); border-bottom:1px solid var(--line);
  text-align:center; padding:1rem;
}
.ph img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 理由清單 ---------- */

.reasons{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.reason h3{ font-size:1.2rem; }
.reason p{ font-size:.95rem; color:var(--steel); margin:0; }
.band--dark .reason p{ color:#A9B4AC; }

/* ---------- 流程 ---------- */

.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.step{
  counter-increment:s; display:grid; grid-template-columns:3.5rem 1fr;
  gap:1.25rem; padding-block:1.6rem; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:.85rem; color:var(--broth); padding-top:.3rem;
}
.step p{ margin:0; font-size:.95rem; color:var(--steel); }
.band--dark .step{ border-color:rgba(255,255,255,.14); }
.band--dark .step p{ color:#A9B4AC; }

/* ---------- 規格表 ---------- */

.spec{ width:100%; border-collapse:collapse; font-size:.95rem; max-width:100%; }
.spec th, .spec td{
  text-align:left; padding:1rem 1.25rem;
  border-bottom:1px solid var(--line); vertical-align:top;
}
.spec th{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--steel); font-weight:500; width:11rem; white-space:nowrap;
}
.spec td{ color:var(--kiln); }

/* ---------- 客戶類型 ---------- */

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:0; list-style:none; }
.chips li{ border:1px solid var(--line); padding:.5rem 1.1rem; font-size:.9rem; background:var(--white); }
.band--dark .chips li{ border-color:rgba(255,255,255,.2); background:transparent; }

/* ---------- 常見問題 ---------- */

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:1.35rem 0; list-style:none;
  font-family:var(--serif); font-weight:700; font-size:1.05rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--broth); font-size:1.1rem; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ font-size:.95rem; color:var(--steel); padding-bottom:1.35rem; margin:0; max-width:52ch; }

/* ---------- 詢價區 ---------- */

.cta{ text-align:center; }
.cta h2{ margin-bottom:.75rem; }
.cta__tel{
  font-family:var(--mono); font-size:clamp(1.8rem,5vw,2.8rem);
  letter-spacing:.02em; text-decoration:none;
  display:inline-block; margin-block:1rem; border-bottom:2px solid var(--broth);
}
.cta .btns{ justify-content:center; }
.cta .lead{ margin-inline:auto; }

/* ---------- 聯絡資訊 ---------- */

.contact{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.contact__item h3{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--broth); font-weight:500; }
.contact__item p{ margin:0; font-size:1.05rem; }
.contact__item a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contact__item a:hover{ border-color:var(--broth); }

.map{ border:1px solid var(--line); aspect-ratio:16/7; width:100%; }
.map iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- 內頁長文 ---------- */

.prose{ max-width:40rem; }
.prose h2{ margin-top:3rem; }
.prose h2:first-child{ margin-top:0; }
.prose ul{ padding-left:1.1rem; }
.prose li{ margin-bottom:.5rem; }

/* 待補資料提醒 —— 上線前刪掉 */
.todo{
  border:1px dashed var(--broth); background:rgba(184,128,30,.07);
  padding:1rem 1.25rem; font-size:.88rem; color:var(--broth);
  font-family:var(--mono); margin-bottom:1.5rem; line-height:1.7;
}

/* ---------- 頁尾 ---------- */

.foot{ background:var(--kiln); color:#A9B4AC; padding-block:3.5rem 2.5rem; font-size:.9rem; }
.foot a{ color:var(--ground); text-decoration:none; }
.foot a:hover{ color:var(--broth); }
.foot__cols{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.foot h4{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--broth); margin:0 0 1rem; font-weight:500;
}
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:.5rem; overflow-wrap:anywhere; }
.foot__base{
  border-top:1px solid rgba(255,255,255,.12); margin-top:2.75rem;
  padding-top:1.5rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
}

/* ---------- 進場動畫 ---------- */

.rise{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.rise.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; transform:none; transition:none; }
}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--broth); outline-offset:3px;
}

/* ---------- 手機 ---------- */
@media (max-width:820px){
  body{ font-size:16px; }

  .nav__inner{ min-height:64px; gap:.5rem; }
  .nav__toggle{ display:flex; order:3; }
  .nav__tel{
    order:2; margin-left:auto; margin-right:.5rem;
    border:1px solid var(--line); padding:.55rem .9rem;
    min-height:44px; display:flex; align-items:center;
  }
  .nav__logo{ order:1; font-size:1rem; }

  /* 選單收合 */
  .nav__links{
    order:4; width:100%; display:none;
    flex-direction:column; gap:0;
    border-top:1px solid var(--line); margin-top:.5rem;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links li{ border-bottom:1px solid var(--line); }
  .nav__links li:last-child{ border-bottom:0; }
  .nav__links a{
    display:block; padding:.95rem .25rem;
    border-bottom:0; min-height:44px;
  }
  .nav__links a[aria-current="page"]{ color:var(--broth); border-bottom:0; }

  .hero__mark{ opacity:.04; }

  /* 規格表改成上下堆疊，不會爆版 */
  .spec th{
    width:auto; display:block; border:0;
    padding:1rem 0 .15rem; color:var(--broth);
  }
  .spec td{ display:block; padding:0 0 1rem; border-bottom:1px solid var(--line); }

  /* 地圖在直式螢幕拉高一點 */
  .map{ aspect-ratio:4/3; }

  /* 按鈕好按 */
  .btn{ min-height:48px; display:inline-flex; align-items:center; }
  .btns{ gap:.6rem; }
  .cta .btns .btn{ width:100%; justify-content:center; }

  .faq summary{ padding:1.15rem 0; }
}

@media (max-width:420px){
  .nav__tel{ display:none; }
  .nav__logo{ font-size:.92rem; letter-spacing:0; }
}

/* ---------- 2026-10-15 新增 ---------- */
.chips--list{ flex-direction:column; align-items:flex-start; gap:.9rem; }
.faq__group{ margin:3rem 0 .5rem; font-size:1.25rem; }
.faq__group:first-of-type{ margin-top:0; }
.spec td a{ color:var(--broth); }
.prose a{ color:var(--broth); }
.lead a{ color:var(--broth); }
.small{ font-size:.85rem; color:var(--steel); }
.line-fab{ position:fixed; right:16px; bottom:16px; z-index:50; background:#06C755; color:#fff; font-weight:700; font-size:.95rem; text-decoration:none; padding:.75rem 1.1rem; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.line-fab:hover{ background:#05b14c; }
@media print{ .line-fab{ display:none; } }
.photos{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:start; }
.photos figure{ margin:0; }
.photos img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); background:var(--white); }
.photos figcaption{ font-size:.85rem; color:var(--steel); margin-top:.5rem; line-height:1.6; }
.spec--dark th{ color:var(--broth); }
.spec--dark td{ color:#E3E8E2; }
.spec--dark th, .spec--dark td{ border-color:rgba(255,255,255,.14); }
.prose table{ margin:1rem 0 1.5rem; }
.prose ol{ padding-left:1.3rem; }
.prose ol li{ margin-bottom:.5rem; }
.video-row{ display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:2rem; align-items:start; }
.video-row video{ width:100%; height:auto; aspect-ratio:9/16; background:#000; border:1px solid var(--line); }
@media (max-width:720px){ .video-row{ grid-template-columns:1fr; } .video-row video{ max-width:320px; margin:0 auto; display:block; } }