/* ja-contracts.css — jp-ui-contracts (media profile)
 * 日本語組版の契約 CSS。:lang(ja) に絞って既存 CSS を上書きせず追加する。
 * Kit: ~/Claude/assets/jp-ui-contracts/
 * Docs: see ./DESIGN.md（§3 Typography Rules に実測値と日本語版の差分がある）
 *
 * このファイルに普通の見た目調整（色・余白等）を足さないこと。
 * 日本語組版の破綻防止（word-break / line-break / overflow-wrap / mixed-script）に限定する。
 * 例外はフォントスタックと本文サイズで、姉妹ブランドとの統一のため §0 に置く。
 *
 * 本家 luxsinaudio.com（Shopify Impact 7.2.0 改造版）からの差分は 4 点:
 *   1. フォントを Barlow → Noto Sans JP へ（site-eversolo-jp と統一・河野様指示 2026-08-25）
 *   2. 本文サイズ 14px → 16px（同上）
 *   3. 本文 line-height 1.6 → 1.8
 *   4. 和文見出しの負の字間（--heading-letter-spacing: -0.02em）を打ち消す
 */

/* ---- 0. フォントスタック（姉妹ブランド site-eversolo-jp と統一・河野様指示 2026-08-25）
 * 本家 luxsinaudio.com は Barlow（Shopify CDN の self-host）を使うが、Luxsin と Eversolo は
 * 同じ Zidoo Group の姉妹ブランドで当社が両サイトを運営するため、フォントと本文サイズは
 * site-eversolo-jp に合わせる。実ウェブフォント（Noto Sans JP）は fonts.css の @font-face
 * でセルフホストする（ホットリンク禁止・CSP font-src 'self' と整合）。
 * → 本家との欧文フォント差は「意図的な差分」として目視ゲートに記録する。
 */
html:lang(ja) {
  --ja-font-sans:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", Meiryo, system-ui, sans-serif;
  font-family: var(--ja-font-sans);
  font-size: 1rem; /* 16px。本家 14px を eversolo と同じ 16px に統一 */
}

:lang(ja) h1, :lang(ja) h2, :lang(ja) h3,
:lang(ja) h4, :lang(ja) h5, :lang(ja) h6,
:lang(ja) button, :lang(ja) input, :lang(ja) textarea, :lang(ja) select {
  font-family: var(--ja-font-sans);
}

/* ---- 1. ja-text: html:lang(ja) と本文要素の既定 --------------------- */
html:lang(ja) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  font-kerning: auto;
  font-feature-settings: normal; /* 本文への palt 全体適用を禁ずる */
}

:lang(ja) p,
:lang(ja) li,
:lang(ja) dd {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.8; /* 本家 1.6。和文は行が詰まって見えるため広げる */
}

/* 読み幅。本家は本文に上限を持たず --container-narrow-max-width: 1350px まで
 * 伸びるが、和文 14-15px の 1350px は 1 行 90 字を超えて読めない。
 * 本文ブロックにだけ 42em を掛ける（ch 単位は全角で溢れるので使わない）。 */
:lang(ja) :where(article, .prose, .content, .rte) p {
  max-width: 42em;
}

/* ---- 2. headings: 見出しの折り返しと字間 -----------------------------
 * 本家の --heading-letter-spacing: -0.02em は和文だと字が潰れて読みにくい。
 * 和文見出しでは打ち消し、ラテン専用の要素（.latin）では本家値を維持する。
 */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3,
:lang(ja) h4, :lang(ja) h5, :lang(ja) h6 {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  font-kerning: auto;
  letter-spacing: normal;
}

:lang(ja) h1 { line-height: 1.2; }
:lang(ja) h2 { line-height: 1.3; }
:lang(ja) h3,
:lang(ja) h4,
:lang(ja) h5,
:lang(ja) h6 { line-height: 1.4; }

:lang(ja) :where(h1, h2, h3, h4, h5, h6) .latin {
  letter-spacing: -0.02em;
}

/* ---- 3. mixed-script: 和欧混植 ---------------------------------------
 * 製品名（Luxsin X9 / X8）・スペック値（DSD512, 32bit/768kHz, THD+N）・
 * 型番が日本語本文に高頻度で混在する前提。
 */
html:lang(ja) {
  text-autospace: normal;
}

:lang(ja) em,
:lang(ja) strong,
:lang(ja) a,
:lang(ja) code,
:lang(ja) .latin,
:lang(ja) .product-name,
:lang(ja) .spec-value {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 見出しは auto-phrase で文節ベースに折る（未対応ブラウザは normal にフォールバック） */
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
  word-break: auto-phrase;
}

/* ---- 4. forms: 本文ルールからの分離 ---------------------------------
 * 本サイトは EC を持たないので対象はお問い合わせ系のみ。密度は本文より詰める。
 */
:lang(ja) label,
:lang(ja) input,
:lang(ja) textarea,
:lang(ja) select,
:lang(ja) button {
  line-break: strict;
  word-break: normal;
}

:lang(ja) input,
:lang(ja) textarea,
:lang(ja) select {
  line-height: 1.5;
}

:lang(ja) .form-help,
:lang(ja) .form-error {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---- 5. tables: 本文ルールからの分離 --------------------------------
 * X8 / X9 のスペック表・ダウンロード表は走査性を優先し、本文より行間を詰める。
 */
:lang(ja) th,
:lang(ja) td {
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 見出しの泣き別れ（最終行が 1〜2 文字だけになる）を防ぐ。
   日本語は任意の位置で折り返せるため、幅次第で「…システ／ム」のような不格好な
   折り返しが起きる。text-wrap: balance は各行の長さを揃えてこれを避ける。
   対応していないブラウザでは単に無視される（劣化しない）。
   目視ゲートの指摘 2026-08-26。 */
:lang(ja) :is(h1, h2, h3, h4, h5, h6) {
  /* text-wrap: balance は各行の長さを揃えるが、**行数は変えない**ので
     「…システ／ム」のような 1 文字落ちは救えない（実測で確認）。
     日本語の見出しは文節で切れるのが自然なので、まず語単位で折る（keep-all）。
     入りきらない長い連続語は overflow-wrap で救う（無限にはみ出さないため）。 */
  text-wrap: balance;
}

/* 日本語の長い見出しは、あと 1〜2 文字だけ入らずに 1 文字が次行へ落ちることがある
   （実測: 必要 478px に対し使える幅 462px で「…システ／ム」）。
   日本語には単語境界が無いので `word-break: keep-all` では救えない（実測で確認済み）。
   字間をわずかに詰めて収める。0.01em は本文の読みやすさを損なわない範囲で、
   15 文字なら約 5px 分の余地が生まれる。それでも入らない見出しは通常どおり折り返す。 */
:lang(ja) :is(h1, h2, h3) {
  letter-spacing: -0.01em;
}