/* 冠東國際官網 · 設計系統 — 基礎樣式與共用版件（header / nav / footer / 按鈕 / section） */
*{box-sizing:border-box;}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}   /* height:auto：<img> 帶了 width/height（防 CLS），縮小時要等比例 */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}

/* ---- HEADER ---- */
header.site{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--hairline);}
.bar{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 20px;}
.menu-toggle{display:none;background:none;border:1px solid var(--hairline-strong);border-radius:8px;padding:6px 10px;font-size:1rem;cursor:pointer;color:var(--ink);}
.logo{display:flex;flex-direction:column;line-height:1.05;}
.logo .zh{font-weight:750;font-size:1.12rem;letter-spacing:.02em;}
.logo .en{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:var(--muted);white-space:nowrap;}
.logo .txt{display:flex;flex-direction:column;}
.logo.has-mark{flex-direction:row;align-items:center;gap:9px;}
.logo .mark{height:40px;width:auto;max-width:120px;object-fit:contain;flex:none;}
nav.main{display:flex;gap:20px;margin-left:8px;font-size:.9rem;font-weight:550;}
nav.main a{color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent;}
nav.main a.on,nav.main a:hover{color:var(--accent-ink);border-color:var(--accent);}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.lang{display:flex;gap:2px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);border:1px solid var(--hairline-strong);border-radius:999px;padding:4px 9px;}
.lang a{color:var(--muted);}
.lang a.on{color:var(--ink);font-weight:700;}
.lang a:hover{color:var(--accent-ink);}
.cta{background:var(--accent);color:#fff;font-size:.82rem;font-weight:650;padding:8px 15px;border-radius:8px;white-space:nowrap;}
@media (prefers-color-scheme:dark){.cta{color:#08171a;}}
.cta.line{background:var(--line);color:#fff;}

/* mobile nav panel */
nav.main.open{display:flex;}
@media (max-width:820px){
  nav.main{display:none;}
  .menu-toggle{display:inline-block;}
  /* 語系切換留在頂部列（不收進選單）：外國訪客第一眼要找得到；字距加大方便手指點 */
  .bar .lang{gap:0;padding:0 4px;}
  .bar .lang a{padding:5px 2px;min-width:26px;text-align:center;}
  nav.main.open{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--hairline);padding:6px 20px 14px;box-shadow:0 20px 30px -24px rgba(0,0,0,.5);}
  nav.main.open a{padding:11px 0;border-bottom:1px solid var(--hairline);}
  header.site{position:relative;}
}
@media (max-width:400px){
  .bar{gap:10px;padding:10px 14px;}
  .bar .right{gap:6px;}
  /* 英文「Request a Quote」太寬：在空白處折成兩行；中日文按鈕（詢價、見積依頼）不拆字 */
  .bar .cta{padding:6px 10px;white-space:normal;word-break:keep-all;line-height:1.2;text-align:center;}
  .logo .en{letter-spacing:.06em;}
}
@media (max-width:340px){
  .bar{gap:8px;padding:10px 12px;}
  .menu-toggle{padding:6px 8px;}
  .bar .cta{padding:6px 7px;}
}

/* ---- SECTIONS ---- */
section{padding:14px 0;}
.sec-head{display:flex;align-items:baseline;gap:12px;margin:26px 0 4px;flex-wrap:wrap;}
.sec-head h2{font-size:1.5rem;margin:0;letter-spacing:-.01em;}
.sec-head .more{margin-left:auto;font-size:.85rem;color:var(--accent-ink);font-weight:600;}
.sec-note{color:var(--muted);font-size:.9rem;margin:0 0 20px;}

/* ---- BUTTONS ---- */
.btn-lg{font-size:.95rem;font-weight:650;padding:12px 22px;border-radius:9px;border:1px solid var(--hairline-strong);color:var(--ink);}
.btn-lg.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
@media (prefers-color-scheme:dark){.btn-lg.primary{color:#08171a;}}
.btn-lg:hover{border-color:var(--accent);}

/* ---- FOOTER ---- */
footer.site{background:var(--surface);border-top:1px solid var(--hairline);margin-top:24px;}
footer.site .fgrid{max-width:var(--wrap);margin:0 auto;padding:34px 20px 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;}
@media(max-width:760px){footer.site .fgrid{grid-template-columns:1fr 1fr;}
  footer.site .fgrid>.fcol:first-child{grid-column:1/-1;}}   /* 公司資訊獨占一列：名稱、地址、電話才不會被擠成兩三行 */
/* 頁首 logo 刻意壓緊行高；頁尾的公司全名可能換行，要放鬆，中英名稱之間也留點空隙 */
footer .logo{line-height:1.3;gap:3px;}
footer .nw{white-space:nowrap;}   /* 電話、傳真號碼不從中間斷行 */
footer .fcol h2{margin:0 0 10px;font-size:.8rem;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
footer .fcol a,footer .fcol p{display:block;font-size:.85rem;color:var(--ink-soft);margin:0 0 7px;}
footer .fcol a:hover{color:var(--accent-ink);}
footer .fbottom{max-width:var(--wrap);margin:0 auto;padding:14px 20px 24px;border-top:1px solid var(--hairline);color:var(--muted);font-size:.76rem;}

/* <picture> 包裹不影響外層 flex/grid 佈局 */
picture{display:contents}