/* ==========================================================================
   qm-typography.css — 和文組版の規定 (2026-07-28 デザイン監査 W-C)
   --------------------------------------------------------------------------
   扱う所見: TYPO-05 (見出し階層の逆転) / TYPO-08 (palt 未適用) /
             TYPO-09 (行間) / TYPO-10 (行長) / TYPO-19 (アイコン級数)

   ■ なぜ別ファイルなのか
     本ウェーブでは qmitate-ui.css / _tokens.css を他ウェーブと同時に触らない
     取り決めのため、和文組版の規定だけを 1 ファイルに切り出している。
     統合時に qmitate-ui.css の末尾へ取り込んで構わない (順序依存は下記のみ)。

   ■ 読み込み順の前提 (壊すと無効になる)
     theme.min.css → user.min.css → _tokens.css → qmitate-ui.css → 本ファイル
     → 各レイアウトのインライン <style>。
     font-feature-settings は「追記」ではなく「置換」なので、qmitate-ui.css:157
     (h1-h3) と各レイアウトのインライン宣言に palt を書き足す必要がある。
     本ファイルだけでは h1-h3 とレイアウト側の宣言に負ける。
   ========================================================================== */

:root {
    /* ── 行間 (TYPO-09) ──────────────────────────────────────────────
       body / .btn / .badge / .form-control / .table は Falcon の 1.5 を据え置く。
       1.5 → 1.75 を body に当てると --falcon-top-nav-height 固定のクロームと
       qm-sticky-save-bar の高さ計算が崩れる (監査の処方どおり散文だけに当てる)。 */
    --qm-lh-tight: 1.3;   /* 見出し */
    --qm-lh-snug:  1.5;   /* クローム・表・ボタン (Falcon 既定と同値) */
    --qm-lh-prose: 1.8;   /* 和文の散文 (JIS X 4051 系の実務値 1.7〜1.9) */

    /* ── 行長 (TYPO-10) ──────────────────────────────────────────────
       和文 1em = 全角 1 文字なので em で測る (ch は '0' の幅なので和文には不適)。
       適正 30〜45 全角の上限側を採る。改修前の実測は凡例 79.5 全角。 */
    --qm-measure: 42em;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPO-08 — palt (プロポーショナル字形) を和文全域で有効化
   ──────────────────────────────────────────────────────────────────────────
   同梱 Noto Sans JP subset は palt / halt を保持しているのに、
   font-feature-settings の指定が ss01 / cv11 / tnum のみで palt が 0 件だった。
   「」（）、。・ が advance 1000/1000 の全角ベタで並び、括弧・句読点の前後に
   0.5em の空隙が残る。palt を当てると同じ字送りのまま約物だけが詰まる。

   ⚠ .qmt-num には入れない。palt はプロポーショナル字形で、
     tnum (等幅数字) と目的が正面から衝突する。数値列は等幅のままにする。
   ══════════════════════════════════════════════════════════════════════════ */
body {
    font-feature-settings: "palt" 1, "ss01" 1, "cv11" 1;
}
/* ss02 (スラッシュ付きゼロ) は**入れない** — TYPO-13
   qmitate-ui.css:157 は見出しにだけ ss02 を当てており、「見出しの 0 だけ字形が違う」
   状態を作っていた。金額を主役にする製品でゼロの字形が場所によって変わるのは
   誤読源にしかならないので、全体適用ではなく非採用にする。
   ss01 (3/4/6/9) と cv11 (single-story 'a') は body と同じ値を保つ。
   ⚠ このブロックが qmitate-ui.css より後に読み込まれることが前提 (置換セマンティクス)。 */
.qmt-display,
h1, h2, h3, .h1, .h2, .h3 {
    font-feature-settings: "palt" 1, "ss01" 1, "cv11" 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPO-05 — 見出しが本文より小さい階層逆転を解消する
   ──────────────────────────────────────────────────────────────────────────
   Falcon の見出しスケールは h5 = 19.2px → h6 = 13.3px で 5.9px 落ち、
   本文 16px を下回る。カード見出しの標準は <h6 class="mb-0"> (427 箇所) なので、
   製品のほぼ全カードで「表題 < 中身」になっていた。
   本文 16px の 1.06 倍 (17px) + weight 600 で、級数と太さの両方で差を付ける。

   .fs--1 (14px !important) を併記している h6 は「意図的に小さい副見出し」なので
   そちらが勝つ (!important)。ここでは素の h6 だけを引き上げる。

   ⚠ 太さは 600 ではなく --qm-fw-semi (=500)。TYPO-07 (2026-07-31):
     同梱 Noto Sans JP は 400 / 500 / 700 の 3 本しか無いため、600 と書くと
     和文だけ 700 へ繰り上がり、欧文 (Inter 600 は実在) との間で
     同じカード見出しの中に 2 段の太さが並ぶ。
     Falcon の h1-h5 も既定 500 なので、h6 だけ 600 だと**見出しの中で h6 が最も太い**
     という逆転も同時に起きていた。本文 (400) との差は 17px の級数 + 500 で付ける。
   ══════════════════════════════════════════════════════════════════════════ */
h6, .h6 {
    font-size: 1.0625rem;   /* 17px */
    line-height: var(--qm-lh-snug);
    font-weight: var(--qm-fw-semi, 500);
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPO-09 — 和文の散文だけ行送りを 1.8 にする
   ══════════════════════════════════════════════════════════════════════════ */
p,
dd,
blockquote,
.form-text,
.qm-legend,
.qm-guide-content,
.qm-guide-content li,
.alert,
.alert p,
.alert li,
.qm-prose,
/* カード内の箇条書き。ナビ・ドロップダウン・list-group は密度優先なので外す */
.card-body li:not(.list-group-item):not(.nav-item):not(.dropdown-item):not(.breadcrumb-item) {
    line-height: var(--qm-lh-prose);
}

/* 密度優先の面は 1.5 に戻す (行送りを上げるとクロームが縦に膨らむ場所) */
.table p,
.badge p,
.btn p,
.navbar p,
.nav p,
.dropdown-menu p,
.card-header p,
.modal-header p,
.toast p,
.qm-sticky-summary p,
.qm-sticky-save-bar p {
    line-height: var(--qm-lh-snug);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    line-height: var(--qm-lh-tight);
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPO-10 — 和文の行長を 42 全角に制限する
   ──────────────────────────────────────────────────────────────────────────
   コンテナ幅 1400px に対し measure 制約がある Blade は 353 中 6 ファイルだけで、
   給与一覧の凡例は 1 行 79.5 全角 (適正の約 2 倍) だった。
   対象は散文だけ。表・KPI 数値・中央揃え/右揃えのテキストには当てない
   (中央揃えに max-width を当てると版面が左に寄って見える)。
   ══════════════════════════════════════════════════════════════════════════ */
.qm-legend dd,
.qm-guide-content p,
.qm-guide-content li,
.alert p,
.alert li,
.card-body p:not(.text-center):not(.text-end),
.card-body li:not(.list-group-item):not(.nav-item):not(.dropdown-item):not(.d-flex),
.qm-prose {
    max-width: var(--qm-measure);
}

/* 中央寄せの版面では max-width が「左寄り」に見えるので、中央に置き直す */
.text-center > p:not(.text-start),
.card-body.text-center p {
    margin-left: auto;
    margin-right: auto;
}

/* 孤立行 (1〜2 文字だけの最終行) を減らす。
   text-wrap は未対応ブラウザでは無視されるだけなので安全に足せる。 */
p, dd, .qm-legend dd {
    text-wrap: pretty;
}

/* TYPO-02: 見出しの折返し。
   ── 何が起きていたか (2026-07-26 監査 / 2026-07-31 再確認) ──────────────
   /pricing の h1「月末業務、経営判断、利益改善。成長段階に合わせて選ぶ。」は
   390px で 3 行に割れ、(a)「利益改善」が「利益改 / 善」で語中分断、
   (b) 句点が行頭禁則で引き戻されて最終行が「ぶ。」の 2 文字だけの孤立行になっていた。
   同じ LP のトップは .qmt-hero-title-line{white-space:nowrap} で意味単位を守っているので、
   ホーム → 料金と辿った見込み客には料金ページの見出しだけ組版が崩れて見える。

   balance は「行の長さを揃える」指定で、最終行が極端に短くなるのを防ぐ。
   未対応ブラウザでは無視されるだけなので後方互換の懸念は無い。
   語中分断そのものを止めるのは Blade 側の d-inline-block (意味単位で包む) の役目で、
   ここは全ページの見出しに一律で効かせられる下地を置く。

   ⚠ セレクタは要素だけにする。`.qmt-hero-title` / `.qmt-page-title` はどちらも
     h1 に付くクラスなので要素側で足りるうえ、ここへ書くと
     SurfaceClassUniquenessContractTest が「同じ .qmt-* を 2 ファイルで定義している」
     として落とす (実際に一度落とした)。 */
h1, h2 {
    text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPO-19 — Material Symbols が 24px 固定で本文より大きい
   ──────────────────────────────────────────────────────────────────────────
   qmitate-ui.css:27 の font-size:24px が user.min.css の 1.25em (親追従) を
   後勝ちで潰していた。.fs--1 = 14px が有効になった今 (TYPO-02 済) は
   親追従に戻すのが正しい: 本文 16px なら 20px、fs--1 の行なら 17.5px。
   インライン style / .ms-icon-* を書いている箇所はそちらが勝つ。
   ══════════════════════════════════════════════════════════════════════════ */
.material-symbols-outlined {
    font-size: 1.25em;
}

/* ══════════════════════════════════════════════════════════════════════════
   ICON-02 — アイコン級数のスケール (.qmi-*)
   ──────────────────────────────────────────────────────────────────────────
   ■ 何が問題だったか (2026-07-29 実描画実測)
     15 画面 1,198 個のアイコンを描画して computed font-size を数えたところ、
     **実効サイズが 35 種**に散っていた (20px 611 / 14px 232 / 16px 74 /
     12px 43 / 19.6px 41 / 22px 31 / 15.4px 24 / 11.5px 14 / …)。
     19.6 / 15.4 / 16.3 / 17.6 / 18.7 のような端数は、inline の em 指定が
     その場の親級数に掛かって出たもので、同じ意図の指定が画面ごとに
     別のサイズで描かれていたことを意味する。
     さらに inline の vertical-align が 192 箇所あり、値は
     -1px / -2px / -3px / -4px / middle の 5 通り。これは「px 固定のアイコンは
     どの級数の行でもベースラインに乗らない」ことを毎回手で補正した跡である。

   ■ なぜ px ではなく rem の 6 段なのか
     ・端数を生む原因は em (親追従) なので、スケール側は絶対値で定義する。
     ・ただし vertical-align は **em** で持つ。em は「その要素自身の font-size」に
       対する比なので、どの段でも一定の割合で沈み、手書き補正が要らなくなる。
       (14px 段なら -2.5px、20px 段なら -3.6px と、実測の手書き値と同域)
     ・段数は実測分布の山 (14 / 16 / 20 / 22-24 / 28-32 / 40-57) に合わせて 6 段。
       監査の処方は「5 段」だが、実測すると行内アイコン (11〜24px) と
       装飾・空状態アイコン (28〜57px) は**別の母集団**で、これを 1 段に
       畳むと最大 9.3px の丸め誤差が出る。実測に合わせて 6 段にしている。

   ■ 使い方
     <span class="material-symbols-outlined qmi-sm">check</span>
     inline の font-size / vertical-align は書かない (blade-ui-lint B1 の
     typographic_inline_styles / inline_style_attributes が天井で見張っている)。

   ■ !important が要る理由 (最初 !important 無しで書いて、実測で否定された)
     qmitate-ui.css には .qm-col-actions .btn .material-symbols-outlined /
     .navbar-top .nav-link .material-symbols-outlined のような文脈別の級数指定が
     10 数個あり、これらは (0,2,0)〜(0,3,0) で .qmi-* (0,1,0) に勝つ。
     置換前は inline style がそれらすべてに勝っていたので、**!important 無しで
     inline から .qmi-* へ移すと、文脈指定が復活してサイズが変わる**。
     実際に !important 無しで置換して 1,198 個を測り直したところ、
     144 個が 10.6px (親 13.3px × 文脈指定 0.8em) まで縮んでいた。
     (旧 .icon-lg / .icon-xl も同じ理由で !important を持っていた。
      消費側 0 件だったため CSSA-13 で撤去済み — 級数の正本はこの .qmi-* 6 段だけ。)
     サイズユーティリティは「呼び出し側の明示指定」なので、文脈既定より強くて正しい。
   ══════════════════════════════════════════════════════════════════════════ */
.qmi-xs  { font-size: 0.875rem !important; }  /* 14px — 表セル・チップ内の補助アイコン */
.qmi-sm  { font-size: 1rem !important; }      /* 16px — 本文と同級 */
.qmi-md  { font-size: 1.25rem !important; }   /* 20px — 既定 (本文 16px のときの 1.25em と同値) */
.qmi-lg  { font-size: 1.5rem !important; }    /* 24px — セクション見出し・カードヘッダ */
.qmi-xl  { font-size: 2rem !important; }      /* 32px — KPI・ヒーロー */
.qmi-2xl { font-size: 3rem !important; }      /* 48px — 空状態・エラーページ */

/* 行内で使う段だけベースライン補正を持つ。
   装飾段 (xl / 2xl) は d-block や flex 中心で使われ vertical-align が
   そもそも効かないうえ、48px に -.18em を当てると 8.6px も沈む。 */
.qmi-xs, .qmi-sm, .qmi-md, .qmi-lg {
    line-height: 1;
    vertical-align: -0.18em;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPO-19 処方④ — 装飾段の opsz を実寸に合わせる
   ──────────────────────────────────────────────────────────────────────────
   Material Symbols の `opsz` は「この級数で見せる前提の字形」を選ぶ軸で、
   小さい opsz の字形を大きく拡大すると線が設計意図より太く見える。
   製品の既定は qmitate-ui.css の `.material-symbols-outlined` = opsz 24 で、
   文脈別に 20 (表セル・バッジ・ボタン・tooltip・⌘K) が当たっている。
   一方 **32px の .qmi-xl と 48px の .qmi-2xl には opsz の指定が無く**、
   opsz 24 の字形を 1.3〜2 倍に拡大して描いていた (KPI カード・カード見出しの
   装飾アイコンと、空状態以外の大アイコン)。

   ⚠ セレクタは `.qmi-xl` (0,1,0) ではなく `.material-symbols-outlined.qmi-xl` (0,2,0)。
     user.min.css の `.empty-state .material-symbols-outlined` と
     qmitate-ui.css の `td .material-symbols-outlined` がどちらも (0,2,0) で、
     (0,1,0) では届かない。本ファイルは両者より後に読み込まれるので同点で勝つ。

   2xl の値は qmitate-ui.css の `.empty-state-icon` と同値にしてある。
   あちらは (0,1,0) のため `.empty-state` 配下では user.min.css の (0,2,0)
   (wght 300 / opsz 40) に負けて **1 度も描画に出ていなかった**。
   ここで同値を (0,2,0) で置くことで、宣言していたブランドチューニングが
   初めて空状態にも実際に届く。
   ══════════════════════════════════════════════════════════════════════════ */
.material-symbols-outlined.qmi-xl {
    font-variation-settings: 'FILL' 0, 'wght' 340, 'GRAD' -10, 'opsz' 32;
}
.material-symbols-outlined.qmi-2xl {
    font-variation-settings: 'FILL' 0, 'wght' 320, 'GRAD' -25, 'opsz' 48;
}