/*!
 * 08-locales.css
 * 語系專屬排版 — 日本語・繁體中文
 *
 * 為什麼需要這個檔：
 *   Archivo 與 IBM Plex Sans 都沒有 CJK 字符。日文與中文頁面會掉到系統備援字型，
 *   而備援字型在 Windows（Yu Gothic／微軟正黑體）、macOS（Hiragino／蘋方）、
 *   Android 上長得都不一樣，而且沒有 Archivo 的寬度軸——
 *   「展開粗體大寫」這個設計特徵在 CJK 頁面上會完全消失。
 *
 *   另外 text-transform:uppercase 對 CJK 無效，
 *   而 letter-spacing:.18em 用在中日文上會鬆散得像排版失誤。
 *
 * 字型只在對應語系載入，見 inc/enqueue.php——
 * 不讓德文訪客白白下載一套日文字型。
 */

/* ── 日本語 ── */
html[lang^="ja"] {
  --f-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --f-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  /* 型號與規格仍用等寬拉丁字型：K8311、208MM 這類字串本來就是拉丁字符 */
  --f-mono:    "IBM Plex Mono", "Noto Sans JP", ui-monospace, monospace;
}

/* ── 繁體中文 ── */
html[lang^="zh"] {
  --f-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --f-body:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --f-mono:    "IBM Plex Mono", "Noto Sans TC", ui-monospace, monospace;
}

/* ── CJK 共通調整 ── */
html[lang^="ja"] h1, html[lang^="zh"] h1,
html[lang^="ja"] h2, html[lang^="zh"] h2,
html[lang^="ja"] h3, html[lang^="zh"] h3 {
  /* uppercase 對 CJK 無效，font-stretch 在無寬度軸的字型上也是空轉 */
  text-transform: none;
  font-stretch: normal;
  font-weight: 700;
  letter-spacing: .01em;
}
html[lang^="ja"] h1, html[lang^="zh"] h1 {
  line-height: 1.24;          /* 拉丁的 1.02 對漢字太緊，會黏在一起 */
  font-size: clamp(30px, 5.2vw, 58px);
}
html[lang^="ja"] h2, html[lang^="zh"] h2 {
  line-height: 1.3;
  font-size: clamp(24px, 3.4vw, 38px);
}

html[lang^="ja"] body, html[lang^="zh"] body {
  line-height: 1.85;          /* 漢字字面大，行距要放寬才好讀 */
  letter-spacing: .02em;
}

/* 標籤類：拉丁的寬字距在 CJK 上會鬆散得像排版失誤 */
html[lang^="ja"] .eyebrow, html[lang^="zh"] .eyebrow,
html[lang^="ja"] .cap-k,   html[lang^="zh"] .cap-k,
html[lang^="ja"] .card-cat,html[lang^="zh"] .card-cat,
html[lang^="ja"] .crow .k, html[lang^="zh"] .crow .k,
html[lang^="ja"] .facts dt,html[lang^="zh"] .facts dt,
html[lang^="ja"] .mark span, html[lang^="zh"] .mark span {
  letter-spacing: .06em;
  text-transform: none;
}

html[lang^="ja"] .btn, html[lang^="zh"] .btn,
html[lang^="ja"] .chip, html[lang^="zh"] .chip,
html[lang^="ja"] .nav a, html[lang^="zh"] .nav a,
html[lang^="ja"] .nav button.navlink, html[lang^="zh"] .nav button.navlink {
  letter-spacing: .04em;
  text-transform: none;
  font-family: var(--f-body);
}

/* 換行：CJK 可任意換行，但不能把型號 K8311 拆開 */
html[lang^="ja"] .lede, html[lang^="zh"] .lede,
html[lang^="ja"] .card-body p, html[lang^="zh"] .card-body p,
html[lang^="ja"] .cap p, html[lang^="zh"] .cap p,
html[lang^="ja"] .app p, html[lang^="zh"] .app p {
  line-break: strict;
  overflow-wrap: break-word;
  word-break: normal;
}
html[lang^="ja"] .card-model, html[lang^="zh"] .card-model,
html[lang^="ja"] .mono, html[lang^="zh"] .mono {
  letter-spacing: .08em;
  word-break: keep-all;
}

/* CJK 的數字仍用 Archivo：1958、40+ 這種展示數字要保留原本的力道 */
html[lang^="ja"] .mark b, html[lang^="zh"] .mark b {
  font-family: "Archivo", sans-serif;
  font-stretch: 110%;
  letter-spacing: -.01em;
}

/* ── 德文 ── */
/*
 * 德文不需要換字型（Archivo 與 IBM Plex 都涵蓋德文字符與變音符號），
 * 但複合名詞很長：Gartenschneidwerkzeuge、Anfrageliste、
 * Produktbeschreibung 等。實測 320–1440px 六種寬度未溢出，
 * 這裡只補一道保險，避免超長複合字在窄欄位撐破容器。
 */
html[lang^="de"] h1,
html[lang^="de"] h2,
html[lang^="de"] h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}
html[lang^="de"] .btn,
html[lang^="de"] .chip {
  letter-spacing: .05em;   /* 預設 .08em 讓長按鈕再變寬，收緊一點 */
}
html[lang^="de"] .card h3 {
  hyphens: auto;
}

/* ── 回覆語言提示 ── */
/*
 * 日德市場沒有當地代理商，詢問由台灣總部以英文回覆。
 * 這段提示要看得見但不能喧賓奪主，用金色左邊線標示為「須知」。
 */
.reply-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  border-radius: var(--r);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.drawer-ft .reply-note,
.drawer-ft .note + .note {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  padding: 10px 12px;
  border-radius: var(--r);
  letter-spacing: 0;
}