/* Suisou — タイポグラフィ。

     <p data-suisou-text="s16 w400">本文</p>
     <h2 data-suisou-text="s24 w700">見出し</h2>
     <p data-suisou-text="s16 w400 doc">長文（行間 +0.25rem）</p>

   ★実際の寸法は base.css のトークンが持ち、単位は rem。このファイルは
     「どの段か」を割り当てるだけ。名前の数字（s16 / lh-20）は
     ルートが 16px のときの px で、ユーザーが文字サイズ設定を変えれば
     全体が比例して動く。app.js も段しか持たず、画面に出す数値は
     computed 値（＝解決後の px）を読んで表示する。 */

[data-suisou-text] { font-size: var(--fs); line-height: var(--lh); }

/* サイズの段 … §3。14 以外はすべて4の倍数。等比スケールは採らない */
[data-suisou-text~="s12"] { --fs: var(--suisou-size-12); --lh: var(--suisou-lh-12); }
[data-suisou-text~="s14"] { --fs: var(--suisou-size-14); --lh: var(--suisou-lh-14); }
[data-suisou-text~="s16"] { --fs: var(--suisou-size-16); --lh: var(--suisou-lh-16); }
[data-suisou-text~="s20"] { --fs: var(--suisou-size-20); --lh: var(--suisou-lh-20); }
[data-suisou-text~="s24"] { --fs: var(--suisou-size-24); --lh: var(--suisou-lh-24); }
[data-suisou-text~="s28"] { --fs: var(--suisou-size-28); --lh: var(--suisou-lh-28); }
[data-suisou-text~="s32"] { --fs: var(--suisou-size-32); --lh: var(--suisou-lh-32); }

/* ── 画面幅で段を変える（2026-08-22 昇格）─────────
     <h2 data-suisou-text="s24 md:s28 w700">広い画面でひとまわり大きく</h2>

   layout と同じ md:(768) / lg:(1024) の2段だけ。sm / xl / 2xl は持たない ――
   段を増やすほど「毎回選ぶもの」に戻ってしまう。2段で表せない振り方は
   現場のもの。

   ★需要は wixdex 1 + Mado 6 の7現場（text-sm md:text-base の型）。
     Suisou に語彙が無いために、変換済みのファイルでもレスポンシブの
     文字だけ Tailwind に残り続けていた ―― handoff の「最大の穴」の実例。
   ★サイズだけ。ウェイトを画面幅で変える現場は無かった（7現場とも太さは固定）。 */
@media (min-width: 768px) {
  [data-suisou-text~="md:s12"] { --fs: var(--suisou-size-12); --lh: var(--suisou-lh-12); }
  [data-suisou-text~="md:s14"] { --fs: var(--suisou-size-14); --lh: var(--suisou-lh-14); }
  [data-suisou-text~="md:s16"] { --fs: var(--suisou-size-16); --lh: var(--suisou-lh-16); }
  [data-suisou-text~="md:s20"] { --fs: var(--suisou-size-20); --lh: var(--suisou-lh-20); }
  [data-suisou-text~="md:s24"] { --fs: var(--suisou-size-24); --lh: var(--suisou-lh-24); }
  [data-suisou-text~="md:s28"] { --fs: var(--suisou-size-28); --lh: var(--suisou-lh-28); }
  [data-suisou-text~="md:s32"] { --fs: var(--suisou-size-32); --lh: var(--suisou-lh-32); }
}
@media (min-width: 1024px) {
  [data-suisou-text~="lg:s12"] { --fs: var(--suisou-size-12); --lh: var(--suisou-lh-12); }
  [data-suisou-text~="lg:s14"] { --fs: var(--suisou-size-14); --lh: var(--suisou-lh-14); }
  [data-suisou-text~="lg:s16"] { --fs: var(--suisou-size-16); --lh: var(--suisou-lh-16); }
  [data-suisou-text~="lg:s20"] { --fs: var(--suisou-size-20); --lh: var(--suisou-lh-20); }
  [data-suisou-text~="lg:s24"] { --fs: var(--suisou-size-24); --lh: var(--suisou-lh-24); }
  [data-suisou-text~="lg:s28"] { --fs: var(--suisou-size-28); --lh: var(--suisou-lh-28); }
  [data-suisou-text~="lg:s32"] { --fs: var(--suisou-size-32); --lh: var(--suisou-lh-32); }
}

/* §6「長文は UI に +4px するだけ」。7行の対応表ではなく規則として持つ */
[data-suisou-text~="doc"] { line-height: calc(var(--lh) + 0.25rem); }

/* ウェイトは3段（§4）。★600 は無い ―― Zen Maru Gothic が 600 を持たず
   700 で描画されていた。フォールバックフォントでは 600/700 が分かれて
   環境で見た目が割れるので、段として持つのをやめた（2026-08-20）。
   実測で最頻出だった「本文サイズ + semibold の見出し」は w700 が引き受ける。 */
[data-suisou-text~="w400"] { font-weight: 400; }
[data-suisou-text~="w500"] { font-weight: 500; }
[data-suisou-text~="w700"] { font-weight: 700; }