/*
 * hint Commons のデザインシステム「校正（kosei）」の写し。
 * 出どころ: hint-co-jp/hint-commons @ 5fb52f1 の app/ui/tokens.css（kosei の段）と app/ui/semantics.css。
 * 値はここで発明しない。替えるときは hint Commons 側を直し、写し直す。
 */
:root,
[data-world='kosei'] {
  /* 紙｜地と面。黄みを抜いた白（種は 2 段目。塗りは 2 段目、乗せる字との差 13.51:1） */
  --paper-1: #ffffff;
  --paper-2: #f1f2f3;
  --paper-3: #e9ebec;
  --paper-4: #dddfe1;
  --paper-5: #cfd2d4;
  --paper-6: #bfc2c5;
  --paper-7: #acafb2;
  --paper-8: #94979b;
  --paper-9: #717578;
  --paper-10: #606467;
  --paper-11: #434648;
  --paper-12: #252628;
  --paper-solid: var(--paper-2);
  --paper-solid-strong: var(--paper-3);
  --paper-on-solid: #252628;

  /* 墨｜字と罫。青みのごく淡い黒（種は 12 段目。塗りは 12 段目、乗せる字との差 18.11:1） */
  --ink-1: #fafafc;
  --ink-2: #f3f4f7;
  --ink-3: #e8eaef;
  --ink-4: #dbdfe5;
  --ink-5: #ced2d9;
  --ink-6: #bdc2ca;
  --ink-7: #aaafb8;
  --ink-8: #9297a1;
  --ink-9: #70757f;
  --ink-10: #5f636d;
  --ink-11: #42464d;
  --ink-12: #14161a;
  --ink-solid: var(--ink-12);
  --ink-solid-strong: var(--ink-12);
  --ink-on-solid: #ffffff;

  /* 紺｜主役。押しどころ、現在地、リンク（種は 12 段目。塗りは 12 段目、乗せる字との差 13.03:1） */
  --brand-1: #f8fbff;
  --brand-2: #eff5ff;
  --brand-3: #dfebff;
  --brand-4: #cde0ff;
  --brand-5: #b8d3ff;
  --brand-6: #9ec3ff;
  --brand-7: #7fafff;
  --brand-8: #5e96f3;
  --brand-9: #3670d3;
  --brand-10: #285fbb;
  --brand-11: #174288;
  --brand-12: #16305c;
  --brand-solid: var(--brand-12);
  --brand-solid-strong: var(--brand-12);
  --brand-on-solid: #ffffff;

  /* 淡墨｜見出しの下の字と、注記（種は 11 段目。塗りは 11 段目、乗せる字との差 8.05:1） */
  --second-1: #f9fbfc;
  --second-2: #f2f5f8;
  --second-3: #e6ebf0;
  --second-4: #d9dfe5;
  --second-5: #cbd3da;
  --second-6: #bbc3cb;
  --second-7: #a7b0b8;
  --second-8: #8f98a1;
  --second-9: #6c767f;
  --second-10: #5b646d;
  --second-11: #4a5158;
  --second-12: #22262b;
  --second-solid: var(--second-11);
  --second-solid-strong: var(--second-12);
  --second-on-solid: #ffffff;

  /* 朱｜印。強調、現在地の下線、札（種は 9 段目。塗りは 9 段目、乗せる字との差 5.43:1） */
  --accent-1: #fff9f8;
  --accent-2: #fff1ee;
  --accent-3: #ffe3df;
  --accent-4: #ffd3cc;
  --accent-5: #ffc0b6;
  --accent-6: #ffa79a;
  --accent-7: #ff8677;
  --accent-8: #ec6859;
  --accent-9: #c3352b;
  --accent-10: #b12921;
  --accent-11: #801712;
  --accent-12: #4a0b07;
  --accent-solid: var(--accent-9);
  --accent-solid-strong: var(--accent-10);
  --accent-on-solid: #ffffff;

  /* 山吹｜このままだと進めない（種は 9 段目。塗りは 10 段目、乗せる字との差 6.13:1） */
  --warn-1: #fffaf2;
  --warn-2: #fff3e1;
  --warn-3: #ffe7c5;
  --warn-4: #f9d9ac;
  --warn-5: #f1cb94;
  --warn-6: #e4ba7c;
  --warn-7: #d4a661;
  --warn-8: #bf8d3f;
  --warn-9: #a8730c;
  --warn-10: #855900;
  --warn-11: #5e3e00;
  --warn-12: #352100;
  --warn-solid: var(--warn-10);
  --warn-solid-strong: var(--warn-11);
  --warn-on-solid: #ffffff;

  /* 緋｜取り返しがつかない（種は 10 段目。塗りは 10 段目、乗せる字との差 6.91:1） */
  --danger-1: #fff9f8;
  --danger-2: #fff1ee;
  --danger-3: #ffe3de;
  --danger-4: #ffd3cb;
  --danger-5: #ffc0b5;
  --danger-6: #ffa799;
  --danger-7: #fd8878;
  --danger-8: #e86b5b;
  --danger-9: #c54032;
  --danger-10: #a92a1f;
  --danger-11: #7e1c14;
  --danger-12: #480d08;
  --danger-solid: var(--danger-10);
  --danger-solid-strong: var(--danger-11);
  --danger-on-solid: #ffffff;

  /* 藍｜済んだこと。緑は使わない（種は 10 段目。塗りは 10 段目、乗せる字との差 6.96:1） */
  --done-1: #f5fbff;
  --done-2: #e9f7ff;
  --done-3: #d7effc;
  --done-4: #c5e4f6;
  --done-5: #b2d8ee;
  --done-6: #9ec8e1;
  --done-7: #87b6d0;
  --done-8: #6c9fbb;
  --done-9: #457c99;
  --done-10: #2a5f7a;
  --done-11: #224b60;
  --done-12: #112936;
  --done-solid: var(--done-10);
  --done-solid-strong: var(--done-11);
  --done-on-solid: #ffffff;

  /* かたち */
  --radius-1: 0;
  --radius-2: 2px;
  --radius-3: 4px;
  --radius-round: 999px;
  --line-weight: 1px;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 6px 24px rgb(20 22 26 / 0.1);
  --shadow-pressed: inset 0 1px 0 rgb(20 22 26 / 0.22);

  /* 字 */
  --type-note: 0.8125rem;
  --leading-note: 1.75;
  --type-body: 0.9375rem;
  --leading-body: 1.9;
  --type-body-lg: 1.0625rem;
  --leading-body-lg: 1.85;
  --type-title: 1.3125rem;
  --leading-title: 1.55;
  --type-head: 1.8125rem;
  --leading-head: 1.4;
  --type-display: 2.5rem;
  --leading-display: 1.28;
  --type-hero: 3.5rem;
  --leading-hero: 1.2;
  --tracking-head: -0.01em;
  --face-display: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'JP Fallback Mincho', serif;

  /* 和文の約物を詰めます。これ1行で、括弧と読点のアキが整います。 */
  --jp-kerning: 'palt' 1;

  /* 余白は8の倍数。447種類を9段に。 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* 動き。一つの速さと、一つのイージング。 */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --quick: 130ms;
  --calm: 260ms;

  /* 指で押す場所の下限。 */
  --tap: 44px;
  /*
   * 押しどころが立つ高さ。（2026-09-19）
   *
   * > 斉藤さん（2026-09-19、ナレッジの断りの画面を見て）
   * > 「ボタンのカタチが大きすぎてダサい。幅も揃っていない。」
   * > 同「ボタンの高さも高すぎると思う。」
   * > 同「もっと美しいボタンで統一してほしい。」
   *
   * 実測は 59px と 57px でした（幅1280、docs/qa/button-shape/a-前-1280.txt）。
   * 高さは padding と行送りの積み上げでできていて、決めた人はいません。
   *
   * だから、高さのほうを物差しに載せます。机の上（ポインタ）は --control-h、
   * 指で触るとき（pointer: coarse）は --tap。指の下限は 1px も下げていません。
   *
   * --control-min は、縦や横に並ぶ押しどころの幅をそろえる下限です。
   * 字の大きさに比例させたいので em で持ちます（--measure と同じ作法）。
   */
  --control-h: 40px;
  --control-min: 9em;
  /*
   * 押しどころの角。（2026-09-19）
   *
   * > 斉藤さん（2026-09-19、押しどころの見本を見て）
   * > 「ボタンにならないの？Googleとかどういうボタンをつかってる？すごくダサいんだけど。」
   *
   * ボタンだけの角です。カードや入力欄（--radius-1〜3）とは別にしました
   * ——一緒に丸めると、画面ぜんたいの話になってしまいます。
   *
   * 丸型です。（2026-09-19 夕）
   *
   * > 斉藤さん（2026-09-19、A 丸型／B やや丸（8px）／C いま（2px）の3つを見て）
   * > 「Aがいい。」
   *
   * それまでは 2px（ほぼ四角）でした。出どころは ui.css の「罫で組み、影を
   * 落とさず、角は立てる」——こちらが立てた見立てで、斉藤さんの言葉では
   * ありません。紙の校正に角丸が無いから、という理屈でしたが、画面は紙では
   * ありませんでした。
   *
   * 担当は B（8px）を推しました。和文の長いラベルがピル型に入ると横に伸びる、
   * Google が丸型なのは短い英語（SAVE / NEXT）が前提だから、という理由です。
   * 斉藤さんは A を選ばれました。好みの領域なので、選ばれたほうにします。
   *
   * 3つ並べた絵は docs/qa/button-shape/f-見本-角3つ.png。
   * 替えるのは、この1行だけです。
   */
  --radius-button: var(--radius-round);
  /*
   * 対話の入力欄の角と影。（2026-09-24）
   *
   * > 斉藤さん（2026-09-24、本番を見て）「入力欄が四角くなってしまった。。。周りも色が
   * > 薄くてみえない。ボタンも見えにくくなって。」
   *
   * 世界の角（--radius-3）にまかせると、校正の世界では 4px の四角になり、影も落ちません。
   * 入力欄だけは世界に依らず、Claude と同じ丸い箱に薄い影で立たせます（ボタンの角と同じ考え方）。
   */
  --radius-field: 18px;
  --shadow-field: 0 1px 2px rgb(13 15 18 / 0.06), 0 4px 16px rgb(13 15 18 / 0.06);
  --shadow-field-focus: 0 1px 2px rgb(13 15 18 / 0.06), 0 4px 16px rgb(13 15 18 / 0.1);
  /* 読みやすい行長。和文は38〜42字。 */
  --measure: 40em;
}
/* 役どころから、置き場所へ。（2026-09-17）。 */

:root {
  /* 既定は昼です。夜は、端末が夜を望むときと、札を付けたときだけ（この一枚の後半）。 */
  color-scheme: light;

  /* ── 面 ────────────────────────────────────────────────────── */
  --bg: var(--paper-1); /* 画面のいちばん下 */
  --surface: var(--paper-1); /* カード・紙 */
  --surface-sunk: var(--paper-3); /* 一段沈んだ面（見本の枠・入れ子） */
  --surface-quiet: var(--paper-2);

  /* ── 罫 ────────────────────────────────────────────────────── */
  --line-soft: var(--ink-4); /* 行と行のあいだ */
  --line: var(--ink-6); /* ふつうの境い目 */
  --line-strong: var(--ink-9); /* 章の切れ目・表の頭 */

  /* ── 字 ────────────────────────────────────────────────────── */
  --text: var(--ink-12);
  --text-quiet: var(--second-11);
  --text-faint: var(--ink-9);
  --text-mark: var(--accent-11); /* 印の字。少しだけ使います */
  --text-head: var(--second-12); /* 見出し */

  /* ── 主役（塗りつぶした押しどころ・現在地）───────────────────── */
  --fill: var(--brand-solid);
  --fill-strong: var(--brand-solid-strong);
  --on-fill: var(--brand-on-solid);
  --fill-tint: var(--brand-2); /* 主役の淡い面（hover の地） */
  --fill-line: var(--brand-7);
  --fill-text: var(--brand-12);

  /* ── 印（accent）。塗りません。線と字だけに使います ───────── */
  --mark: var(--accent-solid);
  --mark-tint: var(--accent-2);
  --mark-line: var(--accent-7);

  /* ── 合図の四つ ────────────────────────────────────────────── */
  --warn-bg: var(--warn-2);
  --warn-line: var(--warn-7);
  --warn-text: var(--warn-12);
  --danger-bg: var(--danger-2);
  --danger-line: var(--danger-7);
  --danger-text: var(--danger-12);
  --danger-fill: var(--danger-solid);
  --danger-on-fill: var(--danger-on-solid);
  --done-bg: var(--done-2);
  --done-line: var(--done-7);
  --done-text: var(--done-12);
  --done-fill: var(--done-solid);
  --done-on-fill: var(--done-on-solid);
  --info-bg: var(--second-2);
  --info-line: var(--second-6);
  --info-text: var(--second-12);

  /* ── 押せない ──────────────────────────────────────────────── */
  --off-bg: var(--ink-3);
  --off-line: var(--ink-5);
  --off-text: var(--ink-8);

  /* 製品の19個の色の名前を、直接の段ではなくこの置き場所へ向け直しています（2026-09-18。昼の値は変えていません）。 */
  --page: var(--paper-2); /* 画面のいちばん下。`--bg` より一段沈んだ地（`html` と `body`） */
  --sheet: var(--paper-2); /* 刷り紙。**夜も替えません**（下の註） */
  --text-muted: var(--second-10); /* 本文の次に多い字。製品の `--muted`（233か所） */
  --fill-mark: var(--brand-11); /* 主役の線と、主役の淡い面の上の字（`--green-2` `--blue`） */
  --info-mark: var(--second-9); /* 知らせの淡い面の上の字（`--sage`） */
  --warn-fill: var(--warn-solid); /* `--danger-fill` `--done-fill` と揃いの、山吹の塗り（`--gold`） */
  --avatar-fill: var(--accent-6); /* 人の丸。**夜も替えません**（下の註） */

  /* ── 自分で描かなかったところ ────────────────────────────────
   * 選んだ字・キャレット・焦点の輪・スクロールバー。
   * ここを既定のままにすると、「組み立てただけの画面」に見えます。 */
  --focus: var(--fill);
  accent-color: var(--fill);
  caret-color: var(--mark);
  scrollbar-color: var(--ink-7) transparent;
}

::selection {
  background: var(--mark-tint);
  color: var(--text);
}

/* 夜の姿。（2026-09-17）— 色は1つも足していません。 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    /* ── 面。地がいちばん暗く、紙はそこから一段浮く ─────────────── */
    --bg: var(--ink-12);
    --surface: var(--paper-12);
    --surface-sunk: var(--ink-11);
    /* **2026-09-18、`--paper-11` から一段下げました。** */
    --surface-quiet: var(--paper-12);

    /* ── 罫 ────────────────────────────────────────────────────── */
    --line-soft: var(--ink-11);
    --line: var(--ink-9);
    --line-strong: var(--ink-8);

    /* ── 字。真っ白は使いません（夜の白は、痛い） ───────────────── */
    --text: var(--paper-2);
    --text-quiet: var(--second-7);
    --text-faint: var(--ink-8);
    --text-mark: var(--accent-7);
    --text-head: var(--second-1);

    /* ── 主役。塗りは明るい側の段へ、乗せる字は同じ色のいちばん濃い段へ ─────────────────── */
    --fill: var(--brand-6);
    --fill-strong: var(--brand-5);
    --on-fill: var(--brand-12);
    --fill-tint: var(--brand-12);
    --fill-line: var(--brand-8);
    --fill-text: var(--brand-6);

    /* ── 印 ────────────────────────────────────────────────────── */
    --mark: var(--accent-7);
    --mark-tint: var(--accent-12);
    --mark-line: var(--accent-8);

    /* ── 合図の四つ。地が12段目、字が3段目。塗りは7段目で、字は12段目 ───────── */
    --warn-bg: var(--warn-12);
    --warn-line: var(--warn-8);
    --warn-text: var(--warn-3);
    --danger-bg: var(--danger-12);
    --danger-line: var(--danger-8);
    --danger-text: var(--danger-3);
    --danger-fill: var(--danger-7);
    --danger-on-fill: var(--danger-12);
    --done-bg: var(--done-12);
    --done-line: var(--done-8);
    --done-text: var(--done-3);
    --done-fill: var(--done-7);
    --done-on-fill: var(--done-12);
    --info-bg: var(--second-12);
    --info-line: var(--second-8);
    --info-text: var(--second-3);

    /* `--sheet` と `--avatar-fill` は、字が直書きの色に合わせてあるため夜も昼のままにしています。 */
    --page: var(--ink-12);
    --text-muted: var(--second-8); /* 昼 6.02:1（白地）→ 夜 6.19:1（地の上） */
    --fill-mark: var(--brand-5); /* 昼 8.83:1（淡い面の上）→ 夜 8.56:1 */
    --info-mark: var(--second-7); /* 昼 4.23:1（淡い面の上）→ 夜 6.92:1 */
    --warn-fill: var(--warn-7); /* 昼 5.59:1（淡い面の上）→ 夜 6.89:1 */

    /* ── 押せない ──────────────────────────────────────────────── */
    --off-bg: var(--ink-11);
    --off-line: var(--ink-10);
    --off-text: var(--ink-8);

    /* ── 自分で描かなかったところ ──────────────────────────────── */
    scrollbar-color: var(--ink-9) transparent;
  }
}

/* 双子の片割れ。上の `@media` の中身と、1行ずつ同じです。 */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* ── 面。地がいちばん暗く、紙はそこから一段浮く ─────────────── */
  --bg: var(--ink-12);
  --surface: var(--paper-12);
  --surface-sunk: var(--ink-11);
  /* 2026-09-18、`--paper-11` から一段下げました。理由は上の双子の註のとおりです。 */
  --surface-quiet: var(--paper-12);

  /* ── 罫 ────────────────────────────────────────────────────── */
  --line-soft: var(--ink-11);
  --line: var(--ink-9);
  --line-strong: var(--ink-8);

  /* ── 字。真っ白は使いません（夜の白は、痛い） ───────────────── */
  --text: var(--paper-2);
  --text-quiet: var(--second-7);
  --text-faint: var(--ink-8);
  --text-mark: var(--accent-7);
  --text-head: var(--second-1);

  /* ── 主役。塗りは明るい側の段へ、乗せる字は同じ色のいちばん濃い段へ ─────────────────── */
  --fill: var(--brand-6);
  --fill-strong: var(--brand-5);
  --on-fill: var(--brand-12);
  --fill-tint: var(--brand-12);
  --fill-line: var(--brand-8);
  --fill-text: var(--brand-6);

  /* ── 印 ────────────────────────────────────────────────────── */
  --mark: var(--accent-7);
  --mark-tint: var(--accent-12);
  --mark-line: var(--accent-8);

  /* ── 合図の四つ。地が12段目、字が3段目。塗りは7段目で、字は12段目 ───────── */
  --warn-bg: var(--warn-12);
  --warn-line: var(--warn-8);
  --warn-text: var(--warn-3);
  --danger-bg: var(--danger-12);
  --danger-line: var(--danger-8);
  --danger-text: var(--danger-3);
  --danger-fill: var(--danger-7);
  --danger-on-fill: var(--danger-12);
  --done-bg: var(--done-12);
  --done-line: var(--done-8);
  --done-text: var(--done-3);
  --done-fill: var(--done-7);
  --done-on-fill: var(--done-12);
  --info-bg: var(--second-12);
  --info-line: var(--second-8);
  --info-text: var(--second-3);

  /* ── 製品の19個の名前が渡る先。**足したのはここ**（2026-09-18）──────
   * 上の `@media` の中と、1行ずつ同じです（双子。片方だけ直さないこと）。
   * `--sheet` と `--avatar-fill` は夜も替えません。理由は上の註のとおりです。
   */
  --page: var(--ink-12);
  --text-muted: var(--second-8); /* 昼 6.02:1（白地）→ 夜 6.19:1（地の上） */
  --fill-mark: var(--brand-5); /* 昼 8.83:1（淡い面の上）→ 夜 8.56:1 */
  --info-mark: var(--second-7); /* 昼 4.23:1（淡い面の上）→ 夜 6.92:1 */
  --warn-fill: var(--warn-7); /* 昼 5.59:1（淡い面の上）→ 夜 6.89:1 */

  /* ── 押せない ──────────────────────────────────────────────── */
  --off-bg: var(--ink-11);
  --off-line: var(--ink-10);
  --off-text: var(--ink-8);

  /* ── 自分で描かなかったところ ──────────────────────────────── */
  scrollbar-color: var(--ink-9) transparent;
}

/*
 * ペルコモの言い換え（2026-10-02）
 *
 * ここから下は hint Commons の写しではありません。ペルコモの画面が使う名前のうち、上の写しと値が
 * 違うもの・写しにないものを、ここで一度だけ決めます。できるだけ写しの段を指し、写しにない値だけを
 * 生で書きます。ほかの CSS は色・角・字の形をこの名前（と上の役どころの名前）だけで使います。
 */
:root {
  /* 字。写しの値から一段だけ替えています */
  --text-muted: var(--second-9);
  --fill-text: var(--brand-9);
  --text-mark: var(--accent-9);

  /* 面と罫。写しより少し青みのある、ペルコモの値です */
  --surface-quiet: #f3f5f8;
  --line: #cfd5dd;
  --line-soft: #e9edf2;

  /* 押しどころ。塗りの上に乗せたとき（hover）と、選んだものの地 */
  --fill-hover: #244b83;
  --chosen-bg: #eff4fb;

  /* 角。ペルコモのボタンと選択肢は 6px、カードは 8px */
  --radius-field: 6px;
  --radius-control: 6px;
  --radius-card: 8px;

  /* 字の形 */
  --serif: var(--face-display), 'JP Fallback Mincho', serif;
  --choice-small: 0.875rem;
  --choice-body: 1rem;
  --choice-title: 1.25rem;

  /* ロゴ（ペルコモの印）の紺 */
  --logo-ink: #182d4b;

  /* report.js が「画像を保存」で字の色として読む名前（getComputedStyle(:root) の --ink）。CSS からは使いません */
  --ink: var(--ink-12);
}

/*
 * ペルコモのデザインシステム（2026-10-10、画面の点検 2026-10-09 とデザインシステムの tokens.json から）
 *
 * 斉藤さん（2026-10-09）「フォントの大きさが違う。こういうのも、すべてUXで洗い直してほしい」
 * 「全画面でUXは徹底的に統一してほしい」。
 *
 * どの画面の CSS も、字の大きさ・間・角・影・押す場所の高さを、ここの名前だけで書きます。
 * 生の数値を書かない。足りないときは、ここに段を足す前に、近い段に寄せられないかを考えます。
 */
:root {
  /* 字の段は8つ。明朝は上の3段（と大きく見せる数字）だけ、太さ500。ゴシックは400と600だけ。12pxより小さくしない。 */
  --fs-display: 2.5rem; /* 40px 大見出し。トップの大見出しだけ */
  --fs-head: 1.8125rem; /* 29px 画面の題。1画面に1つ。大きく見せる数字 */
  --fs-title: 1.3125rem; /* 21px 見出し。段の見出し・小窓の題・大きく出す人の名前 */
  --fs-lead: 1.0625rem; /* 17px 書き込む字・相手の言葉・リード文。600で小見出し（まとまりの名前・カードの題・並べた人の名前） */
  --fs-body: 0.9375rem; /* 15px 本文・表 */
  --fs-control: 0.875rem; /* 14px 主役・脇役のボタン、作業の帯の切り替え、頭のメニュー */
  --fs-note: 0.8125rem; /* 13px 説明・欄の名前・小さい脇役のボタン・札・知らせ */
  --fs-tag: 0.75rem; /* 12px 英語名・人数・日付 */
  --lh-display: 1.3;
  --lh-head: 1.4;
  --lh-title: 1.55;
  --lh-lead: 1.7;
  --lh-body: 1.9;
  --lh-control: 1.5;
  --lh-note: 1.75;
  --lh-tag: 1.5;
  --track-display: 0.05em;
  --track-head: 0.04em;
  --track-tag: 0.02em;
  --font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'JP Fallback Gothic', sans-serif;
  --font-serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'JP Fallback Mincho', serif;

  /* 前からの名前は、上の段を指します（ほかの CSS が使っている名前） */
  --type-note: var(--fs-note);
  --type-body: var(--fs-body);
  --type-body-lg: var(--fs-lead);
  --type-title: var(--fs-title);
  --type-head: var(--fs-head);
  --type-display: var(--fs-display);
  --leading-head: var(--lh-head);
  --leading-display: var(--lh-display);
  --serif: var(--font-serif);
  --choice-small: var(--fs-control);
  --choice-body: var(--fs-lead);
  --choice-title: var(--fs-title);

  /* 間は9段だけ（--space-1〜9 は上の写しにあります：4・8・12・16・24・32・48・64・96） */
  --gutter: max(16px, 4%);
  --measure-read: 40rem;
  --measure-work: 64rem;

  /* 押す場所。主役・脇役は44px（--control-h）、文字だけ（小さい脇役）は見た目30px・押せる範囲44px */
  --control-sm-h: 30px;
  --bar-h: 56px;

  /* 角は4つと、対話の質問欄の例外1つ */
  --radius-pill: 999px;
  --radius-face: 50%;
  --radius-composer: 18px;

  /* 影は3つ。カード・ボタン・入力欄には付けない */
  --shadow-float: 0 6px 24px rgb(20 22 26 / 0.1);
  --shadow-sticky: 0 -8px 24px rgb(20 22 26 / 0.1);
  --shadow-composer: 0 1px 2px rgb(13 15 18 / 0.06), 0 4px 16px rgb(13 15 18 / 0.06);
  --shadow-field: var(--shadow-composer);

  /* 字の色を一段濃く（淡い面の上でも 4.5:1 を超えるように。デザインシステムの値） */
  --text-muted: var(--second-10); /* #5b646d */
  --fill-text: var(--brand-10); /* #285fbb */
}
/* スマホ（700px以下）は、見出しの3段だけ小さくします */
@media (max-width: 700px) {
  :root {
    /* 大見出し（トップの15字）は1行のまま、画面の幅に合わせる：390px で 22px、320px で 18px */
    --fs-display: min(1.625rem, calc((100vw - 2rem) / 16));
    /* 画面の題は 24px。幅 360px でも14字の題が1行に収まるよう、狭い画面では少しだけ小さく */
    --fs-head: min(1.5rem, calc((100vw - 2rem) / 15.5));
    --fs-title: 1.1875rem; /* 19px */
  }
}
/* ボタンは3つの形だけ（2026-10-11、parts.css の「ボタン」）。主役・脇役の高さは、机の上でもスマホでも44px（指の下限）。
 * それまでは机の上 40px・スマホ 44px で、同じ主役が画面の幅で 40 と 44 に分かれていました。 */
:root {
  --control-h: var(--tap);
  /* 主役・脇役の横の余白。狭い並び（2列の格子など）に収めるときだけ、置き場所の側でこの名前を小さくする */
  --control-pad: var(--space-5);
}

/* 新しいトップのトンマナを、ほかの画面にも少しだけ（斉藤さん 2026-10-24「トップのトンマナ（ブルーとか）をすこし継承」）。
   public/js/top-flow.js が html に data-top="new" を付けたときだけ：主役の紺をトップの紺に、印の字を金に寄せ、カードの角を
   トップに近い丸みに、ページの大きな見出しを明朝の太字に。並びと中身は変えない。 */
html[data-top='new'] {
  --brand-12: #16233f;
  --brand-11: #22355e;
  --text-mark: #9a7413;
  --radius-card: 16px;
  /* 紺と金（斉藤さん 2026-10-25「全体的に紺色とゴールドをいれて、デザイントンマナの統一したい」）。トップ・相手を選ぶ画面と同じ値。
     金の塗りの上は紺の字、白地の金の字は濃い金（--text-mark）。紺の帯の上の淡い字は --on-navy-sub */
  --gold: #f2c14e;
  --gold-hover: #e6b43c;
  --on-navy-sub: #c9d0dc;
  --font-mincho: 'Top Hero Mincho Full', 'Top Hero Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
html[data-top='new'] main h1:not(.pch-card h1) {
  font-family: 'Top Hero Mincho Full', var(--font-serif);
  font-weight: 800;
  letter-spacing: .04em;
}