/* ============================================================
   日日製作 design.zoz — 全站共用設計來源（single source of truth）
   以首頁 index.html 為基準抽出。改設計只動這一檔，全站跟著變。
   hero / 輪播等首頁限定樣式留在 index.html，不放這裡。
   ============================================================ */

/* ---------- 設計 tokens ---------- */
:root{
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC",sans-serif;
  --cream:#f7f4ef;       /* 主背景奶油 */
  --cream-2:#fffdf9;     /* 淺一階奶油（區塊交錯用） */
  --ink:#2c2824;         /* 主文字 / 深底 */
  --ink-2:#211e1a;       /* 頁尾更深 */
  --ink-soft:#6f675c;    /* 次要文字 */
  --bronze:#a08e74;      /* 古銅 eyebrow / 線 */
  --bronze-2:#bfa982;    /* 古銅亮（深底上用） */
  --line:#e7e0d4;        /* 卡片分隔線 */
  --foot-text:#9b9286;   /* 頁尾文字 */
}

/* ---------- 基底 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--serif);background:var(--cream);color:var(--ink)}

/* ---------- 共用導覽列（捲動變白） ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:24px 5vw;color:#fff;transition:background .4s,padding .4s}
.nav.scrolled{background:rgba(247,244,239,.96);color:var(--ink);padding:16px 5vw;box-shadow:0 1px 20px rgba(0,0,0,.06)}
/* 非 hero 頁面預設沒有深色背景墊底，導覽列文字一進場就用深色，避免白底白字 */
.nav.solid{background:rgba(247,244,239,.96);color:var(--ink);padding:16px 5vw;box-shadow:0 1px 20px rgba(0,0,0,.06)}
.nav .brand{font-family:var(--sans);font-size:14px;letter-spacing:.35em}
.nav .links{font-family:var(--sans);font-size:13px;letter-spacing:.2em;display:flex;gap:32px;opacity:.92}
.nav .links a{color:inherit;text-decoration:none;transition:opacity .3s}
.nav .links a:hover{opacity:.6}
.burger{display:none;font-size:24px;line-height:1;cursor:pointer}

/* 手機全螢幕選單 */
.mobile-menu{position:fixed;inset:0;z-index:40;background:rgba(28,24,22,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{color:#f4efe7;font-family:var(--sans);font-size:20px;letter-spacing:.35em;text-decoration:none}
.mobile-menu .mclose{position:absolute;top:20px;right:6vw;font-size:30px;color:#f4efe7;cursor:pointer;line-height:1}

/* ---------- 共用 section 節奏 ---------- */
section{padding:clamp(70px,9vw,130px) 6vw}
.sec-eyebrow{font-family:var(--sans);letter-spacing:.45em;font-size:12px;color:var(--bronze);text-align:center;margin-bottom:16px}
.sec-title{text-align:center;font-size:clamp(26px,3.4vw,40px);font-weight:500;letter-spacing:.18em;margin-bottom:14px}
.sec-sub{text-align:center;font-size:15px;letter-spacing:.12em;color:var(--ink-soft);max-width:560px;margin:0 auto 56px;line-height:2}

/* 交錯背景工具 class */
.bg-cream{background:var(--cream)}
.bg-cream-2{background:var(--cream-2)}

/* ---------- 四格 / 卡片（hover 上浮） ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);max-width:1180px;margin:0 auto;border:1px solid var(--line)}
.card{background:var(--cream-2);padding:44px 30px;text-align:center;transition:background .4s,transform .4s;text-decoration:none;color:inherit;display:block}
.card:hover{background:#fff;transform:translateY(-4px)}
.card .en{font-family:var(--sans);font-size:12px;letter-spacing:.4em;color:var(--bronze);margin-bottom:18px}
.card h3{font-size:21px;font-weight:500;letter-spacing:.2em;margin-bottom:14px}
.card p{font-size:13.5px;color:var(--ink-soft);line-height:2;letter-spacing:.04em}

/* ---------- 共用按鈕 ---------- */
.btn-line{font-family:var(--sans);display:inline-block;border:1px solid var(--bronze);color:var(--ink-soft);padding:13px 44px;font-size:13px;letter-spacing:.25em;text-decoration:none;transition:all .3s;background:transparent}
.btn-line:hover{background:var(--bronze);color:#fff}
.btn-fill{font-family:var(--sans);background:var(--bronze-2);color:var(--ink);border:none;padding:15px 60px;font-size:14px;letter-spacing:.35em;cursor:pointer;transition:background .3s}
.btn-fill:hover{background:#d4c19c}

/* ---------- 深色諮詢 / 表單區（沿用首頁 .contact） ---------- */
.contact{background:var(--ink);color:#f4efe7}
.contact .sec-eyebrow{color:var(--bronze-2)}
.contact .sec-sub{color:#c8bfb0}
.form{max-width:680px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form .full{grid-column:1/3}
.field label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--bronze-2);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid #5a544b;color:#f4efe7;padding:9px 2px;font-family:inherit;font-size:15px;letter-spacing:.06em}
.field input:focus,.field select,.field textarea:focus{outline:none;border-bottom-color:var(--bronze-2)}
.field select option{color:var(--ink)}
.field textarea{resize:vertical;min-height:70px}
.submit{grid-column:1/3;margin-top:10px;text-align:center}
.submit button{font-family:var(--sans);background:var(--bronze-2);color:var(--ink);border:none;padding:15px 60px;font-size:14px;letter-spacing:.35em;cursor:pointer;transition:background .3s}
.submit button:hover{background:#d4c19c}

/* ---------- 共用頁尾 ---------- */
footer.site-footer{background:var(--ink-2);color:var(--foot-text);padding:54px 6vw;font-family:var(--sans);font-size:13px;letter-spacing:.08em;line-height:2.1}
footer.site-footer .foot-wrap{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
footer.site-footer .foot-wrap a{color:var(--bronze-2);text-decoration:none}
footer.site-footer .foot-brand{font-family:var(--serif);font-size:16px;letter-spacing:.3em;color:#f4efe7;margin-bottom:14px}
footer.site-footer .copy{text-align:center;margin-top:40px;font-size:11.5px;color:#6b635a;letter-spacing:.1em}

/* ---------- 手機 ---------- */
@media(max-width:768px){
  .nav{padding:18px 6vw}
  .nav .links{display:none}
  .nav .burger{display:block}
  .nav .brand{font-size:12px;letter-spacing:.2em}
  .cards{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .form .full,.submit,.form .field{grid-column:1}
  footer.site-footer .foot-wrap{flex-direction:column}
}