/* デザイントークン（色・書体・大きさ・余白・動き）
 * 案件ごとに書き換えるのはこのファイルだけ。値は DNA.md の実測値とシートのキーカラーから決める
 * 色はここだけに書く（base.css・案件のCSSは変数だけを使う）
 */
:root {
  /* color — 仮の値（中立のネイビー＋差し色1つ）。案件でシートのキーカラーに置き換える */
  --color-ink: #221713;          /* 本文 */
  --color-main: #221713;         /* 見出し・メイン */
  --color-main-2: #056564;       /* 補助（英字ラベル・線） */
  --color-accent: #056564;       /* 差し色（エントリー・重要な行動だけ） */
  --color-accent-2: #0a7a78;     /* 差し色のグラデーションの終わり */
  --color-base: #ffffff;         /* 地 */
  --color-pale: #e2dac7;         /* PC の左右の地（紙より少し濃く） */
  --color-career-text: #033b3a; /* 6Pの箇条書き：紙の背景上での可読性を確保 */
  --color-accent-text: #04504f;  /* 本文の大きさのティールの文字（アクセント #056564 を紙の地で 4.5:1 以上にした濃い版） */
  --color-paper: #ebe4d3;        /* 地の紙（参考のクラフト紙に寄せる。責任者決定 2026-10-29。白い方眼＝ベース #fffcf7） */         /* 淡い面・PCの左右の地 */
  --color-line: rgb(34 23 19 / 0.22);         /* 入力欄・表の線 */
  --color-on-dark: #ffffff;      /* 濃い面の文字 */
  --color-on-dark-line: rgb(255 255 255 / 0.6);
  --color-faint: rgb(34 23 19 / 0.45);   /* 淡い線（枠・横線）。参考の細線 1px の濃さ */
  --color-error: #c8312b;        /* フォームの必須表示 */
  --color-shadow: rgb(34 23 19 / 0.14);

  /* 面 */
  --bg-dark: linear-gradient(160deg, var(--color-main) 0%, var(--color-ink) 100%);
  --bg-accent: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);

  /* type */
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "Noto Sans JP", "Hiragino Sans", sans-serif;   /* 参考の見出し（角ゴシック・普通の太さ）に寄せる */
  --font-en: "Josefin Sans", "Noto Sans JP", sans-serif;
  /* 最小文字。画面に出る文字はすべてこれ以上にする（check_fit --min-font で検査）
   * 13px＝提出チェックの基準。社内レギュレーションの本文12.3pxに戻すときはここだけ変える */
  --fs-min: 13px;
  /* 本文。390×664 で約15px、低い画面は高さに合わせて下がるが --fs-min より小さくしない（JSで縮小しない） */
  --fs-base: clamp(var(--fs-min), min(2.1dvh, 3.6vw), 17.5px);   /* 390 幅で約14px＝参考の本文（14px・行間24px） */   /* 上限 17px：縦長の画面・PC で中身が6割に届くように（AGENTS.md 2.9 PC の本文は 17.5px 前後まで） */
  --fs-ui: max(var(--fs-min), 13px);   /* ヘッダー・NEXT・ラベルなど部品の文字 */
  --fs-input: 16px;                     /* 入力欄。16px未満だとiPhoneで画面が拡大される */
  --fw-body: 400;                /* 本文の太さ。DNA の実測で決める（400 のままだと細いと言われた。AGENTS.md 2.6） */
  --ls-body: 0.04em;
  --lh-body: 1.9;
  --lh-head: 1.5;

  /* layout */
  --col: 480px;                  /* 中央の枠の幅（PC） */
  --header-h: 56px;
  --gutter: 22px;                /* 左右の余白 */
  --sp-1: 0.45em;                /* 近接：一組の中（ラベル↔見出し・行と行のまとまり） */
  --sp-p: clamp(0.75em, 1.6dvh, 1.4em);                /* 段落同士（シートの空行） */
  --sp-g: clamp(1.1em, 2.4dvh, 2.4em);                 /* まとまり同士（見出し・図・本文・締め）＝ .page__inner の間隔 */
  --pad-y: 1.2em;                /* 1画面のページの上下の余白（ヘッダーの下と画面の下で同じ。ページごとに padding-top/bottom を書かない） */
  --next-h: 0px;                 /* NEXT の高さ（標準は NEXT なし＝0。templates/parts/nextbtn.css を使うときは 48px） */
  --radius-pill: 999px;
  --radius-s: 6px;
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);

  --paper: url("assets/paper.svg");   /* 地：方眼＋紙の繊維（DNA 要点1） */
  --fs-quote: 0.93em;            /* 枠の中の「」 */
  --radius-frame: 22px;
  --lh-dense: 1.72;               /* 文字の多いページ（p3・p4・p6）の行間。縦に長い画面では全ページと同じに戻す */
  --en-h: clamp(30px, 6.4dvh, 58px);   /* 細線の大きな英字の高さ（参考 PLAN・VOICE） */
  --radius-photo: 16px;          /* 写真の角丸（参考 402 U の写真） */
  --story-w: max(6.2em, min(17dvh, 26vw, 120px));   /* p3 代表の線画の幅（責任者指示の画像どおり大きく見せる） */
  --story-step: 1.1em;           /* p3 STORY のカードを1段ごとに右へずらす量 */
  --story-h: min(20dvh, 190px);  /* p3 締めの文の段の高さの下限（代表の線画の高さ）。低い画面は文字の高さに合わせる */
  --lh-card: 1.5;                /* p3 のカードの中の行間（短い行のかたまりなので本文より詰める） */
  --shadow-card: 2px 3px 6px var(--color-shadow);   /* カードの右下の影（先方修正 10-30 の修正後イメージ） */
  --pair-img-h: clamp(80px, 17dvh, 200px);   /* p7 カードの人物の高さ */
  --senior-w: max(6.8em, min(17dvh, 32vw));  /* p5 先輩と後輩の線画の幅（責任者指示の画像） */          /* 細線の枠の角丸（参考 VOICE の枠） */

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 32px;                  /* 出現の移動量 */
  --dur-in: 600ms;
  --dur-hover: 300ms;
}
/* 低い画面は上下の余白を詰める（上＝下は保つ） */
@media (min-width: 768px) and (max-height: 1000px) { :root { --fs-base: clamp(var(--fs-min), 1.8dvh, 16.5px); } }   /* PC の高さ 1000px 以下は本文を一段小さく（下まで収める。責任者指示） */
@media (max-height: 800px) { :root { --en-h: clamp(28px, 5dvh, 58px); --senior-w: max(6.4em, min(14dvh, 30vw)); --pair-img-h: 16.5dvh; --story-h: 0px; } }   /* 低い画面は細線の英字と p5 の絵を一回り小さく */
@media (max-height: 600px) { :root { --pad-y: 0.7em; --lh-dense: 1.6; --sp-p: 0.55em; --pair-img-h: 52px; } }
/* 縦に長い画面（430×932・縦長の PC）は、行間とまとまりの間を広げて中身を画面の6割以上に（check_layout） */
@media (min-height: 860px) and (max-width: 767px), (min-height: 1001px) { :root { --lh-dense: 1.9; --sp-g: clamp(1.1em, 3.4dvh, 2.8em); --sp-p: clamp(0.75em, 2dvh, 1.6em); } }