/* ==========================================================================
   pages/form.css — 入力フォーム専用CSS（寄付申込フォーム_仕様_260908.md 4章）
   --------------------------------------------------------------------------
   読み込み対象：/corporations/form/ 配下の入力・確認・完了画面

   方針（仕様書4章）：
   - 見た目は既存の .c-table--row に揃える（ラベル幅30%・ラベル文字は紺・
     行下の横罫線のみ・768px以下で縦積み）。サイト内で浮かないため
   - ただしマークアップに <table> は使わない。ラベルと入力欄の対応は
     表形式のデータではないため、div + <label for> で組む
   - クラス名は p-form__ 系。ひな形として流用するため donation を含めない
   - 色・余白・角丸・遷移はすべて common.css のトークン経由

   新サイト・短大・カタログのいずれにもフォーム部品のCSSが無いため
   （normalize相当のリセットとヘッダー検索専用の定義のみ）、全て新規定義。
   ========================================================================== */


/* ==========================================================================
   1. フォーム全体
   ========================================================================== */
.p-form {
  margin-top: var(--spacing-xl);
}

/* 個人情報の説明文など、入力欄の前に置くリード文 */
.p-form__lead {
  margin-bottom: var(--spacing-xl);
  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   2. 行（ラベル＋入力欄）
   --------------------------------------------------------------------------
   .c-table--row 相当：上端に1本、各行の下に1本の横罫線のみ。縦罫線なし。
   ========================================================================== */
.p-form__list {
  border-top: 1px solid var(--color-border-light);
}

.p-form__row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border-light);
}

/* ラベル列：幅30%・紺文字・太字（.c-table--row th 相当）
   上下は --spacing-xl（32px）で行に高さを持たせ、左右は --spacing-md（16px）で
   .c-table th,td（padding: var(--spacing-md)）と横位置を揃える。

   flex コンテナにしているのは、**必須／任意マークを項目名の先頭に出す**ため。
   HTMLは「項目名のテキスト → <span class="p-form__required">」の順のまま変えず、
   マーク側の order: -1 で前に出す（項目名は無名フレックスアイテムで order 0）。
   長い項目名でも行が破綻しないよう flex-wrap: wrap を入れる。
   項目名とマークの間隔は gap で取る（マーク側の margin-left は 0 にしてある）。 */
.p-form__label {
  flex: 0 0 30%;
  max-width: 30%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--color-main);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}

/* 入力列（.c-table--row td 相当） */
.p-form__field {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--spacing-xl) var(--spacing-md);
  line-height: var(--lh-normal);
}

/* 入力欄の下に添える補足（一口の金額・入力例など）。**入力欄の直後に置く**。

   上の余白は --spacing-md（16px）→ --spacing-sm（8px）に詰めた。
   補足は直前の入力欄に属する情報なので、行と行の区切りより明らかに近づける。
     入力欄 → 補足 ………… 8px
     行 → 行 ……………… 64px（.p-form__field の上下 padding 32px×2）
   この8倍の差で、補足が次の項目のものと読み違えられないようにする。

   下の余白は 0。<p> は components.css の `p { margin-bottom: var(--spacing-md) }`
   で 16px を持っており、そのままだと補足のある行だけ下側が 48px（16＋32）になって
   行の高さが不揃いになる。ここで打ち消して、補足の有無にかかわらず 32px にそろえる。 */
.p-form__note {
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  line-height: var(--lh-normal);
}

/* 姓名やフリガナを横に並べるときの入れ物 */
.p-form__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}


/* ==========================================================================
   3. 必須／任意マーク
   ========================================================================== */
/* order: -1 で項目名より前に出す。間隔は .p-form__label の gap が持つため
   margin-left は 0。vertical-align は flex アイテムでは効かないため使わず、
   .p-form__label の align-items: baseline で項目名の文字と揃える。 */
.p-form__required,
.p-form__optional {
  display: inline-block;
  order: -1;
  margin-left: 0;
  padding: 0 var(--spacing-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.8;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.p-form__required {
  color: #ffffff;
  background-color: var(--color-text-red);
}

.p-form__optional {
  color: var(--color-gray-700);
  background-color: var(--color-gray-200);
}


/* ==========================================================================
   4. 入力部品
   ========================================================================== */
/* 枠線は --color-gray-350（#cccccc）。--color-border（#dddddd）より一段濃くして、
   入力できる場所が白背景の上ではっきり分かるようにする。
   ヘッダー検索の入力欄（nav.css 297行）も同じ --color-gray-350 を使っている。 */
.p-form__input,
.p-form__textarea,
.p-form__select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: #ffffff;
  border: 1px solid var(--color-gray-350);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.p-form__textarea {
  min-height: 6em;
  resize: vertical;
}

/* 幅の指定（郵便番号・口数・卒業年度など短い入力用） */
.p-form__input--short { max-width: 12em; }
.p-form__input--half  { flex: 1 1 12em; width: auto; }

/* フォーカス：メインカラーの枠＋薄いリング */
.p-form__input:focus,
.p-form__textarea:focus,
.p-form__select:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-main) 20%, transparent);
}

/* キーボード操作時のみ枠を強調（マウスクリックでは出さない） */
.p-form__input:focus-visible,
.p-form__textarea:focus-visible,
.p-form__select:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}


/* ==========================================================================
   5. エラー表示
   --------------------------------------------------------------------------
   実際の出し分け（is-error の付与、メッセージの差し込み）はエンジニア実装。
   制作側は表示位置とスタイルのみ用意する。
   ========================================================================== */

/* 項目ごとのエラーメッセージ（入力欄の直下） */
.p-form__error {
  margin-top: var(--spacing-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-red);
  line-height: var(--lh-normal);
}

/* エラーのある行・入力欄 */
.p-form__row.is-error {
  background-color: color-mix(in srgb, var(--color-text-red) 4%, transparent);
}

.p-form__input.is-error,
.p-form__textarea.is-error,
.p-form__select.is-error {
  border-color: var(--color-text-red);
}

.p-form__input.is-error:focus,
.p-form__textarea.is-error:focus,
.p-form__select.is-error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-red) 20%, transparent);
}

/* フォーム全体のエラーサマリ（入力欄の前・送信失敗時に表示） */
.p-form__summary {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-text-red);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-text-red) 4%, transparent);
}

.p-form__summary-title {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--color-text-red);
  line-height: var(--lh-normal);
}

.p-form__summary-list {
  margin: var(--spacing-sm) 0 0;
  padding-left: var(--spacing-lg);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}


/* ==========================================================================
   6. 送信ボタンの並び
   ========================================================================== */
.p-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
}


/* ==========================================================================
   7. SP（768px以下）：ラベルと入力欄を縦積み
   --------------------------------------------------------------------------
   .c-table--row のSP挙動（各セルを縦積み・横スクロールにしない）に合わせる。
   ========================================================================== */
@media (max-width: 768px) {
  .p-form__row {
    display: block;
  }
  .p-form__label,
  .p-form__field {
    /* .p-form__row の display:flex を解除すると、ラベルは <label>／<span>＝インライン要素に
       戻り、上下の padding が行の高さに反映されない（左右のみ効く）。block 化して効かせる。
       ※ .p-form__label だけは下で display: flex に戻す（block にすると必須／任意マークの
          order: -1 が効かず、マークが項目名の後ろに戻ってしまうため）。flex も block レベルの
          ボックスなので、上下の padding はそのまま効く。 */
    display: block;
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  /* 縦積みでは「ラベル→入力欄」を詰め、「行→行」を広く取って区切りを読み取れるようにする。
     ラベル下 --spacing-sm（8px）＋入力欄上 0 ＝ ラベルと入力欄の間は 8px。
     入力欄下 --spacing-xl（32px）＋次のラベル上 --spacing-xl（32px）＝ 行間は 64px。
     PCと違い罫線しか区切りが無いため、この差（8px対64px）で項目のまとまりを示す。 */
  .p-form__label {
    display: flex;
    padding-bottom: var(--spacing-sm);
  }
  .p-form__field {
    padding-top: 0;
  }
  .p-form__inline {
    gap: var(--spacing-sm);
  }
  .p-form__input--half {
    flex: 1 1 100%;
  }
}