/* ============================================================
   Japanese Typography Layer
   DESIGN.md 準拠 / Tailwind CDN 上書き
   ----------------------------------------------------------
   読み込み順: Tailwind CDN <script> の直後に <link> すること。
   ページ固有の <style> ブロックがあれば、その更に後ろに置く。
   ============================================================ */

/* ---------- ルート / 基本設定 ---------- */

html {
  /* モバイルブラウザの自動文字サイズ調整を無効化（DESIGN.md 8 と整合） */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* DESIGN.md 3.3 — 和欧混植のフォールバックチェーン（環境依存を防ぐ） */
  /*   ・先頭の 'Inter' はラテン字形のブランド表現を優先するための意図的配置 */
  /*   ・日本語字形は 'Noto Sans JP' 以降に自然フォールバック */
  font-family:
    'Inter',
    'Noto Sans JP',
    'Hiragino Kaku Gothic ProN',
    'Hiragino Sans',
    'BIZ UDPGothic',
    'Yu Gothic',
    'YuGothic',
    'Meiryo',
    system-ui,
    -apple-system,
    sans-serif;

  /* DESIGN.md 3.5 — 本文 line-height は 1.7〜2.0 が読みやすい */
  line-height: 1.85;

  /* DESIGN.md 3.5 — 全角主体の本文は 0.04em で可読性が向上 */
  letter-spacing: 0.04em;

  /* DESIGN.md 3.7 — 本文には palt を当てない（可読性低下を避ける）。kern は維持 */
  font-feature-settings: "kern" 1;

  /* DESIGN.md 3.6 — 禁則処理 */
  line-break: strict;
  overflow-wrap: break-word;
  word-break: normal;

  /* DESIGN.md Don'ts — 純粋な #000000 は使用せず、僅かに柔らかい黒で */
  color: #1a1a1a;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 見出し ---------- */

h1, h2, h3, h4, h5, h6 {
  /* DESIGN.md 3.5 — 見出しの行間は 1.3〜1.5 */
  line-height: 1.45;

  /* DESIGN.md 3.5 — 見出しの字間は 0〜0.05em（負値は不可） */
  /*   既存コードの -0.01em を修正 */
  letter-spacing: 0.01em;

  /* DESIGN.md 3.7 — 見出しは palt + kern 推奨 */
  font-feature-settings: "palt" 1, "kern" 1;

  font-weight: 600;
}

/* ---------- 短いラベル群（ナビ・ボタン・eyebrow）には palt を効かせる ---------- */

nav,
button,
[role="button"],
.eyebrow,
a[class*="rounded-md"],
a[class*="rounded-full"],
.font-bold,
.font-semibold {
  font-feature-settings: "palt" 1, "kern" 1;
}

/* ---------- 本文・段落・リスト ---------- */

p,
li,
dd,
dt,
blockquote {
  /* leading-* ユーティリティが付かない場合のための保険 */
  line-height: inherit;
  letter-spacing: inherit;
}

/* ---------- 強調 ---------- */

strong, b {
  /* 太字の和文は字間を僅かに詰めて締まりを出す */
  letter-spacing: 0.02em;
}

/* ============================================================
   Tailwind ユーティリティ上書き
   Tailwind の line-height / letter-spacing は欧文ベース。
   日本語に最適化するため、和文文脈で安全な値に再定義する。
   ============================================================ */

/* line-height（leading-*）— 和文本文に合わせて広めに調整 */
.leading-none    { line-height: 1     !important; }
.leading-tight   { line-height: 1.35  !important; } /* 短い見出し用（元 1.25） */
.leading-snug    { line-height: 1.55  !important; } /* 中見出し（元 1.375） */
.leading-normal  { line-height: 1.7   !important; } /* 本文下限（元 1.5） */
.leading-relaxed { line-height: 1.85  !important; } /* 本文標準（元 1.625） */
.leading-loose   { line-height: 2.05  !important; } /* ゆったり本文（元 2.0） */

/* letter-spacing（tracking-*）— 和文用に正値化 */
.tracking-tighter { letter-spacing: -0.02em !important; } /* 緊急時のみ */
.tracking-tight   { letter-spacing: 0       !important; } /* 元 -0.025em（負値を排除） */
.tracking-normal  { letter-spacing: 0.02em  !important; } /* 元 0 */
.tracking-wide    { letter-spacing: 0.06em  !important; } /* 元 0.025em */
.tracking-wider   { letter-spacing: 0.1em   !important; } /* 元 0.05em */
.tracking-widest  { letter-spacing: 0.18em  !important; } /* 元 0.1em（ロゴ等） */

/* 黒テキスト色 — 純粋 #000000 を回避 */
.text-black     { color: #111111 !important; }
.text-gray-900  { color: #1a1a1a !important; }

/* ============================================================
   既存クラスの再定義（互換性維持）
   ============================================================ */

/* .ja-tight — 日本語見出し用の字間モディファイア。
   DESIGN.md 3.5 の 0〜0.05em 範囲内に収め、見出しに視覚的締まりを与える。 */
.ja-tight {
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1, "kern" 1;
}

/* ============================================================
   レスポンシブ（DESIGN.md 8 準拠）
   モバイル: 本文 14–16px、見出しは PC の 70–80%
   ============================================================ */

@media (max-width: 767px) {
  body {
    font-size: 15px;
    /* モバイル幅では密度が上がるため字間を僅かに詰める */
    letter-spacing: 0.02em;
    line-height: 1.8;
  }
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.01em;
  }
  .ja-tight {
    letter-spacing: 0.015em;
  }

  /* Tailwind デフォルトの大型見出しサイズを 70–80% に圧縮 */
  .text-6xl { font-size: 2.5rem  !important; line-height: 1.25 !important; } /* 60px → 40px */
  .text-5xl { font-size: 2.125rem !important; line-height: 1.25 !important; } /* 48px → 34px */
  .text-4xl { font-size: 1.875rem !important; line-height: 1.3  !important; } /* 36px → 30px */
  .text-3xl { font-size: 1.625rem !important; line-height: 1.35 !important; } /* 30px → 26px */
  .text-2xl { font-size: 1.375rem !important; line-height: 1.4  !important; } /* 24px → 22px */
}

/* ============================================================
   印刷時
   ============================================================ */

@media print {
  body {
    color: #000;
    line-height: 1.7;
  }
}

/* ============================================================
   タッチターゲット（DESIGN.md 8）
   モバイル時 44×44px を最低保証
   ============================================================ */

@media (max-width: 767px) {
  a[class*="rounded-md"],
  button {
    min-height: 44px;
  }
}