/*
  acform — Duolingo 参考パターンのスタイル。
  素の CSS のみ（プリプロセッサなし）。ビルド時に1ファイルへ結合される。

  クラス命名は BEM 風の接頭辞付き。
    l-  レイアウト / c-  コンポーネント / u-  ユーティリティ / is- 状態
*/

/*
  デザイントークン。
  基調は docs/05-design-tokens.md（j-urban.jp から抽出した配色）。
  役割の割り当ては本パターンの判断。
*/

:root {
  /* --- 文字・線・面 --- */
  --c-text: #3b3b41;
  --c-text-sub: #70757b;
  --c-line: #e6e4e1;
  --c-line-strong: #d3d0cc;
  /*
    面の3層。本配色では3つとも白なので見た目は同じだが、役割が異なるため
    トークンを分けている（層ごとに濃さを変える配色にもこのまま対応できる）。

      --c-canvas   … 画面全体の地。コンテンツの左右に見える余白
      --c-content  … 中央のコンテンツエリア（.l-shell の 640px 幅）と sticky ヘッダー
      --c-bg       … 入力欄・カード・ロゴのヘッダー・完了画面の箱の「面」
  */
  --c-canvas: #fff;
  --c-content: #fff;
  --c-bg: #fff;
  --c-bg-soft: #f7f6f4;
  --c-track: #e9e7e4;

  /*
    --- グラファイト：進捗バーと「次へ」 ---
    ボタンと進捗バーはグレー基調にする。彩度を持つ面を画面から外すと
    情報（設問・入力欄）が前に出て、落ち着いた印象になる。
    純無彩色ではなく上の文字・線と同じくわずかに暖色へ寄せ、地の色から浮かせない。
  */
  --c-graphite: #4c4f55;
  --c-graphite-strong: #363940; /* hover と下辺の影 */

  /*
    --- 進捗バーの塗り（左＝明部 → 右＝暗部のグラデーション） ---
    「次へ」と同じグラファイトで通す（バーだけ目立たせない設計）。
    右端＝暗部が進捗の境界を成すので、溝（--c-track）との比は暗部で見る。
  */
  --c-progress-from: #6f737b;
  --c-progress-to: var(--c-graphite);

  /* --- 墨：最終ステップの送信ボタン専用。「次へ」との差は明度で作る --- */
  --c-ink: #22252b;
  --c-ink-strong: #14161b;

  /*
    --- CTA：ステップの検証が通過したときの「次へ」「送信」（指示による。決定190） ---
    グレー基調から外れる唯一の面。**「押して進める」ことだけを表す。**
    文字色は #333333 と同値（3桁表記は --c-error と同じ流儀）。面との比は約 9.6:1。
    ★ 色だけで状態を伝えてはいけない（CLAUDE.md §11）。通過・不通過の判断は
      エラー文言とフォーカス移動が担い、この色は補助表現である。
  */
  --c-cta-ready: #ffe009;
  --c-cta-ready-strong: #f0d200; /* hover */
  --c-cta-ready-text: #333;

  /* --- アクセント（暖色）：選択中のカード・バッジ --- */
  /* 白背景で 4.5:1 を確保するための濃いオレンジ。枠線・アイコン・マークに使う */
  --c-accent-ink: #a96f0b;
  --c-accent-tint: #fff8ec;

  /* --- エラー --- */
  --c-error: #c00;
  --c-error-tint: #fdf3f3;

  /* --- フォーカスリング：グレーの面・白地のどちらの上でも識別できる青 --- */
  --c-focus: #1668c9;

  /* --- 形 --- */
  --radius-card: 16px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* --- 寸法 --- */
  /*
    --content-width は `.l-shell` の外形幅＝**薄い背景を敷くエリアの幅**。
    本文の幅はここから左右の --gutter を引いた値になる（PC で 720 − 60×2 = 600px）。

    PC の gutter を広く取っているのは、背景のエリアが本文にぴったり張り付くと
    詰まって見えるため（指示による。README 5.22）。
    本文幅 600px は従来（640 − 20×2）と同じで、カードの列幅も変わらない。
  */
  --content-width: 720px;
  --gutter: 60px;
  --card-min-h: 72px;

  --font-base:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* カードの影は指示により無くした（README 5.13）。トークンごと削除している */
  --duration: 0.24s;
}

/*
  モバイルは左右の余白を詰める。`.l-shell` は画面幅いっぱいになる（375 < 720）ので、
  本文幅は 375 − 20×2 = 335px。従来と同じ。
*/
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0.001s;
  }
}


/*
  エラー文のアイコン（丸囲みの「!」）。
  .c-field__error::before が mask で使うため、色を持たない形だけのSVGにしている。
  設計§4.2 の「エラー要素は常に存在させ、空のときCSSで畳む」を満たすための構成。
*/
:root {
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 7.4v5.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 16.2v.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/*
  SPIRAL 元ソースの <center> を打ち消す（P1で骨格として残しているため）。
  デザインは .l-shell が中央寄せを担っており、<center> が効くと
  補足文や短い入力欄まで中央に寄ってしまう。
  <center> 自体はSPIRALでの用途が未確認なので削除しない（CLAUDE.md §2-2）。
*/
.body_tbl {
  text-align: left;
}
/* リセットと土台 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/*
  ヘッダーがウインドウ全幅の帯になったため、画面いっぱいの高さは body で持つ。
  ヘッダーは .l-shell の外にあり、.l-shell が残りの高さを埋める（flex: 1）。
  .l-shell 側で min-height: 100vh を持つと「100vh ＋ ヘッダー高」になって
  内容が短いステップでも常にスクロールバーが出てしまう。
*/
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--c-text);
  /* 画面全体の地。コンテンツエリアの左右に見える層（_tokens.css の3層の注記） */
  background: var(--c-canvas);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* hidden はどの表示指定よりも優先させる */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p,
ul,
ol,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

fieldset {
  border: 0;
  min-width: 0;
}

a {
  color: #0b5fae;
  text-underline-offset: 0.2em;
}

a:hover {
  color: #094a87;
}

button {
  font: inherit;
  color: inherit;
}

/* フォーカスリングは消さない（docs/02-form-spec.md 9.3） */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 視覚的にのみ隠す。読み上げとフォーカスは残す */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- レイアウト --- */

/*
  ページの土台。min-height: 100vh は、内容が短いステップでも地の白を画面全体に及ばせる。

  縦フレックスは元々「ナビゲーションを画面下端に置く」ための仕掛けだった。
  エラーが消えて本文が縮んだ瞬間にボタンが動くと、押した指先がボタンから外れて
  クリックが不発になる（mousedown で blur → 縮む → mouseup では別要素）ため、
  内容が短いときは margin-top:auto で底に、長いときは position:sticky で
  画面下に留めていた。

  **指示により PC・モバイルともボタンを入力欄の直下へ移したので、この仕掛けは
  役目を終えている**（README 5.17）。上記の「ボタンが動かない」性質は失われた。
  構造だけ残しているのは、flex item 同士では margin が相殺されず、
  各ブロックの余白が CSS に書いた値のまま効くため。
*/
.l-shell {
  display: flex;
  flex-direction: column;
  /* ヘッダーを除いた残りの高さを埋める。100vh は body 側が持つ（上の注記） */
  flex: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  /*
    中央のコンテンツエリアの地。画面の地（--c-canvas）より一段淡い。
    flex: 1 で残りの高さを埋めるので、内容が短いステップでも
    この帯が画面下端まで伸びる。
  */
  background: var(--c-content);
}

.l-main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.c-form {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/*
  フォーム名。ページの見出し（h1）。ロゴとプログレスバーの間に置く。

  当初は「視線の主役は設問」という判断でサイズを控えめ（15px）にしていたが、
  指示により PC で約2倍・SP で約1.5倍に拡大した（README 5.15）。
  文字が大きいぶん行間は詰める（1.5 → 1.35）。
*/
.c-formname {
  margin: 18px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/*
  ヘッダーはロゴのみ。

  面の色（白）と下線を**ウインドウ全幅**に敷く（指示による。README 5.22）。
  そのため `.l-shell` の外に置き、幅の制限は内側のラッパーが持つ。
  地も白なので、見た目は全幅の下線として現れる。
*/
.c-header {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}

/* ロゴの左端を本文と揃える。幅と gutter は .l-shell と同じ値を使う */
.c-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 18px var(--gutter) 16px;
}

.c-header__logo {
  display: block;
  width: auto;
  height: 32px;
}

@media (max-width: 767px) {
  .c-header__inner {
    padding: 14px var(--gutter) 12px;
  }

  .c-header__logo {
    height: 26px;
  }

  /* 元の 15px に対して約1.5倍（README 5.15） */
  .c-formname {
    margin-top: 14px;
    font-size: 22px;
  }
}
/*
  ステップインジケーター。

  Duolingo にならい、ステップ番号を出さない連続プログレスバーにする。
  総ステップ数が 3 or 4 で変わる本フォームでは、番号付きステッパーより
  「割合で伸びる」表現のほうが素直（docs/02-form-spec.md 10.1-3）。
  戻る導線はここには置かず、「次へ」と同じ .c-nav にある（指示による移設。README 5.31）。
*/

.c-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 16px;
  /*
    ステップ表記（.c-remaining「あと〇ステップで完了です」）を削除したぶんの余白
    （指示による。決定189）。バーと最初の入力欄が接するのを防ぐ。

    ★ .l-shell が flex コンテナなので、このマージンは隣接要素と相殺されない。
      バー下端から入力欄までは padding-bottom(16) + margin-bottom(16) = 32px になる。
  */
  margin-bottom: 16px;
  /*
    スクロールしてくる本文を隠すための不透明な地。
    コンテンツエリアの中にあるので、面（--c-bg）でも画面の地（--c-canvas）でもなく
    --c-content を使う。ここが違う色だと sticky の帯として浮いてしまう。
  */
  background: var(--c-content);
}

/*
  バー両端の目盛り（指示による。README 5.23）。

  進捗の「起点」と「終点」を数字で示すだけの添え物なので、設問より前に出ない
  大きさ・色にする。数字の見た目が動かないよう等幅数字にしている
  （0% と 100% は桁数が違うが、幅が揺れると sticky の帯として落ち着かない）。
*/
.c-progress__scale {
  flex: none;
  color: var(--c-text-sub);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/*
  溝（track）は内側に影を落として、面にはめ込まれた細い溝に見せる。
  太いバーは進捗を強く主張するが、グレー基調では 10px 程度に抑えたほうが
  落ち着いて見える（設問より前に出ない）。
*/
.c-progress__track {
  flex: 1;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--c-track);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 7%);
  overflow: hidden;
}

/*
  塗りは横方向のグラデーション（明→暗）＋上端の細いハイライト。
  単色だとのっぺりするが、この二層で金属的な艶が出る。

  色は専用トークン（_tokens.css の --c-progress-*）。「次へ」と同じグラファイト。
  進捗の境界を成すのは右端＝暗部なので、溝との比は暗部で見る
  （6.65:1。色以外の手掛かりが無くても境界が分かる）。
*/
.c-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--c-progress-to);
  background-image:
    linear-gradient(
      to bottom,
      rgb(255 255 255 / 20%) 0,
      rgb(255 255 255 / 6%) 45%,
      rgb(0 0 0 / 8%) 100%
    ),
    linear-gradient(to right, var(--c-progress-from), var(--c-progress-to));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .c-progress__fill {
    transition: none;
  }
}

/*
  ★ ここにあった .c-remaining / __icon / __text（進捗の補助テキスト
  「あと〇ステップで完了です」）は 2026-08-21 の指示により削除した（決定189）。

  詰まったぶんは上の .c-progress の margin-bottom: 16px で補っている。
  進捗を色・位置だけで伝えない担保は .c-progress のバー（視覚）と、
  [data-step-list] / [data-step-announcer]（読み上げ）が引き続き持つ。
*/

@media (max-width: 767px) {
  /*
    目盛りが溝の幅を食う。375px 幅では目盛り2つ＋gap のぶん溝が短くなるため、
    文字と間隔を詰めて溝の長さを確保する。
  */
  .c-progress {
    gap: 8px;
  }

  .c-progress__scale {
    font-size: 11px;
  }
}
/*
  ステップ（1画面分）の枠と切替アニメーション。

  当初は設問を吹き出し（無記名アイコン＋バルーン）で提示していたが、指示により削除した
  （README 5.10）。見出しは `.u-visually-hidden` で残しており、
  ステップ切替時のフォーカス移動先として機能する（docs/04-behavior-spec.md 2.2）。
*/

.c-step {
  padding-bottom: 8px;
}

.c-step.is-active {
  animation: ac-step-in var(--duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ac-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-step.is-active {
    animation: none;
  }
}
/* テキスト入力・セレクト・バッジ・エラー表示 */

.c-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
  姓・名のように1つの設問を複数欄で受けるときのまとまり。
  legend は rendered legend のまま（display を上書きしない）、
  レイアウトは内側の span で組む（_cards.css の legend と同じ理由）。
*/
.c-group__legend {
  width: 100%;
  padding: 0;
  margin-bottom: 8px;
}

.c-group__legend-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}

.c-group__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/*
  欄ごとの「姓」「名」はグループ見出しの従属ラベルなので控えめにする。

  ★ 現在この見た目は画面に出ない。指示により `.u-visually-hidden` を併記して
    視覚的に隠しているため（README 5.28）。ラベルを戻すときは HTML 側の
    クラスを外すだけで、この指定がそのまま効く。
*/
.c-group__cols .c-field__label {
  margin-bottom: 6px;
  color: var(--c-text-sub);
  font-size: 13px;
  font-weight: 700;
}

/*
  ラベル本文とバッジを横並びにする。
  設問文がそのままラベルになる欄（セレクト式の設問・「その他」欄）は文字数が多く、
  375px 幅ではバッジまで1行に収まらない。折り返しを許して、はみ出させない。
*/
.c-field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

/*
  ラベル本文に添える補足（郵便番号の「（ハイフン不要）」など）。

  .c-field__label は flex + gap:8px なので、補足を直接置くとバッジと同じ幅だけ
  本文から離れてしまう。本文と補足を .c-field__label-text で1つの塊にまとめ、
  補足は本文に密着させ、間隔はバッジとの間だけに効かせる。
*/
/* 色はラベル本文と同じ（指示による）。小ささと太さの差だけで補足と分かる。 */
.c-field__label-note {
  font-size: 13px;
  font-weight: 400;
}

.c-input,
.c-select {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 2px solid var(--c-line);
  border-radius: var(--radius-input);
  background: var(--c-bg);
  color: var(--c-text);
  /* iOS Safari のフォーカス時自動ズームを避けるため 16px 未満にしない */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--duration), background-color var(--duration);
}

.c-input::placeholder {
  color: #a3a09c;
}

.c-input:hover,
.c-select:hover {
  border-color: var(--c-line-strong);
}

.c-input:focus,
.c-select:focus {
  border-color: var(--c-accent-ink);
  outline: none;
}

.c-input:focus-visible,
.c-select:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/*
  桁数の目安を欄の幅で示す（現在は郵便番号のみ）。
  モバイルでは解除して全幅にする（指示による。README 5.19）。
  狭い画面では欄の幅の差が「短く入力する欄」の合図として読まれにくく、
  他の欄と幅が違うことのほうが目立つため。
*/
.c-input--short {
  max-width: 260px;
}

.c-select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5' fill='none' stroke='%233b3b41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

.c-field__hint {
  margin-top: 6px;
  color: var(--c-text-sub);
  font-size: 13px;
}

/* --- 必須・任意・複数選択可のバッジ --- */

.c-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.c-badge--required {
  background: var(--c-error-tint);
  color: var(--c-error);
  border: 1px solid #f0c9c9;
}

.c-badge--optional {
  background: var(--c-bg-soft);
  color: var(--c-text-sub);
  border: 1px solid var(--c-line);
}

.c-badge--multi {
  background: var(--c-accent-tint);
  color: var(--c-accent-ink);
  border: 1px solid #f0d8ac;
}

/* --- エラー（色だけで示さず、アイコンとテキストを併用する） --- */

/*
  エラー文。中身は文言だけで、アイコンは ::before で描く（設計§4.2）。

  SPIRAL の `$error:【キーワード】$` はエラーが無いとき空文字に展開されるが、
  要素そのものは静的HTMLに常に存在する（決定96：サーバー側エラーとJSの検証が
  同じ要素に書き込む）。**中にSVGを持たせると :empty が効かず、
  エラーが無くてもアイコンが出てしまう**ため、アイコンは擬似要素にしている。
*/
.c-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  color: var(--c-error);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

/* 文言が空なら要素ごと畳む。初期表示ではすべてこの状態になる */
.c-field__error:empty {
  display: none;
}

.c-field__error::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: currentColor;
  /* 丸囲みの「!」。currentColor で塗るため mask で形だけを与える */
  mask: var(--icon-error) center / contain no-repeat;
  -webkit-mask: var(--icon-error) center / contain no-repeat;
}

.c-field.is-invalid .c-input,
.c-field.is-invalid .c-select {
  border-color: var(--c-error);
  background: var(--c-error-tint);
}

/* --- エラーサマリ（docs/04-behavior-spec.md 4.4） --- */

.c-summary {
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 2px solid var(--c-error);
  border-radius: var(--radius-card);
  background: var(--c-error-tint);
}

.c-summary:focus {
  outline: none;
}

.c-summary:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.c-summary__title {
  color: var(--c-error);
  font-size: 16px;
  font-weight: 700;
}

.c-summary__list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-summary__list a {
  color: var(--c-error);
  font-weight: 700;
}

/* --- モバイル --- */

@media (max-width: 767px) {
  /*
    高さは指示により従来（56px）の80%にした（README 5.18）。
    font-size は 16px から下げない（iOS Safari のフォーカス時自動ズームを招くため）。
    縮めたのは上下 padding のみで、45px はタップ領域の下限 44px を保っている。
  */
  .c-input,
  .c-select {
    min-height: 45px;
    padding: 8px 16px;
  }

  /* 幅の制限は解除して全幅にする（指示による。README 5.19） */
  .c-input--short {
    max-width: none;
  }
}

/* フォーム名。$entry_title$ が空のとき（キャンペーン名なし）は畳む */
.c-formname:empty {
  display: none;
}
/*
  カード式ボタン。

  Duolingo の選択肢カード（大きなタップ領域・面での選択状態・アイコン付き）を下敷きにする。
  input は display:none にせず視覚的にのみ隠す。隠すとフォーカスを受け取れず、
  キーボードでの矢印キー移動が不能になるため（docs/02-form-spec.md 9.2）。

  単一選択と複数選択の区別（同 9.4）は3点セットで行う。
    1. マークの形 …… 単一＝円 / 複数＝角丸四角にチェック
    2. バッジ　　 …… 複数選択のグループにだけ「複数選択可」
    3. 選択時の表現 … 単一＝円を塗る / 複数＝チェックが現れる
*/

/*
  legend は fieldset の「rendered legend」で、Chrome では display の上書きが効かない。
  float で通常フローへ逃がす手もあるが、直後に差し込まれるエラー文が
  フロートの脇（幅ゼロ）へ押し込まれて1文字ずつ折り返されるため採らない。
  legend 自体はブロックのまま、内側の span でレイアウトを組む。
*/
.c-cards__legend {
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
}

.c-cards__legend-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.c-cards__question {
  font-size: 16px;
  font-weight: 700;
}

.c-cards__badges {
  display: flex;
  gap: 6px;
}

.c-cards__list {
  display: grid;
  grid-template-columns: 1fr; /* モバイルは1カラム */
  gap: 10px;
}

.c-card {
  position: relative;
}

/* 視覚的にのみ隠す。フォーカスは受け取れる */
.c-card__input {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.c-card__label {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--card-min-h);
  height: 100%;
  padding: 14px 16px;
  /*
    枠は四辺とも 2px（指示による。README 5.21）。
    元は Duolingo にならって下辺だけ 4px にし、押せることを形で示していたが、
    上下左右を揃えた。影も外しているため（5.13）、厚みの表現は持たない
    フラットな造形になっている。
  */
  border: 2px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-bg);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  transition:
    background-color var(--duration),
    border-color var(--duration),
    transform 0.08s ease-out;
}

@media (hover: hover) {
  .c-card__label:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-line-strong);
  }
}

/*
  押した手応え。元は下辺の枠を 4px → 2px に縮めて「沈む」表現にしていたが、
  枠を四辺 2px に統一したため縮める余地がない（README 5.21）。
  沈み込みは transform だけで表す。margin での補正が要らないので、
  周囲のカードの位置もずれない。
*/
.c-card__label:active {
  transform: translateY(1px);
}

.c-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--c-text-sub);
  transition: color var(--duration);
}

/*
  pre-line にしているのは、選択肢ラベルの改行を `\n` で表しているため
  （src/ts/choices.ts の Choice.label）。ラベルは escapeHtml を通してから
  DOM に入るので `<br>` は使えない。連続する空白は畳まれ、改行だけが残る。
*/
.c-card__text {
  flex: 1;
  min-width: 0;
  white-space: pre-line;
}

.c-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-line-strong);
  color: transparent;
  transition: background-color var(--duration), border-color var(--duration), color var(--duration);
}

.c-card__mark--radio {
  border-radius: var(--radius-pill);
}

.c-card__mark--check {
  border-radius: 8px;
}

/* --- 選択状態（:checked + label で完結させる） --- */

.c-card__input:checked + .c-card__label {
  border-color: var(--c-accent-ink);
  background: var(--c-accent-tint);
}

.c-card__input:checked + .c-card__label .c-card__icon {
  color: var(--c-accent-ink);
}

.c-card__input:checked + .c-card__label .c-card__mark {
  border-color: var(--c-accent-ink);
}

/* 単一選択：円を塗る */
.c-card__input:checked + .c-card__label .c-card__mark--radio {
  box-shadow: inset 0 0 0 4px var(--c-accent-tint), inset 0 0 0 12px var(--c-accent-ink);
}

/* 複数選択：チェックが現れる */
.c-card__input:checked + .c-card__label .c-card__mark--check {
  background: var(--c-accent-ink);
  color: #fff;
}

/* --- フォーカス（キーボード利用者が現在位置を見失わないよう必ず出す） --- */

.c-card__input:focus-visible + .c-card__label {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* --- エラー時のグループ --- */

.c-cards.is-invalid .c-card__label {
  border-color: #e8b4b4;
}

.c-cards.is-invalid .c-card__input:checked + .c-card__label {
  border-color: var(--c-accent-ink);
}

/* --- デスクトップは多カラム。モバイルは既定1カラム（data-cols-sp で上書き） --- */

@media (min-width: 768px) {
  .c-cards__list[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-cards__list[data-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /*
    3列でラベルが長いグループは、横一列（アイコンの右にテキスト）のまま
    余白と部品を詰めてテキスト幅を確保する（指示による。README 5.13）。

    3列だとカード幅が約 193px しかなく、既定の余白（padding 16px・gap 14px・
    アイコン 34px・マーク 24px）ではテキストの取り分が 71px しか残らない。
    ご希望の「イベント相談会」は 104px、1番興味の「保証・アフター」は 105px 必要で、
    指示された改行位置より手前で折り返してしまう。

    左右 padding を 8px、gap を 8px、アイコンを 24px に詰めて 109px 確保する。
    マーク（24px）は縮めない。選択時の塗り（.c-card__mark--radio の inset 影）が
    この直径を前提にしているため。上下 padding は 14px のままでカード高さは変えない。

    **対象は data-tight="true" のグループだけ**（CardGroupSpec.tight）。同じ3列でも
    建設予定地（あり／なし／未定）はラベルが短く詰める必要がなく、詰めると
    アイコンだけが小さい浮いた見た目になる。年齢はアイコンが無いため元から 119px ある。
  */
  .c-cards__list[data-cols="3"][data-tight="true"] .c-card__label {
    gap: 8px;
    padding: 14px 8px;
  }

  .c-cards__list[data-cols="3"][data-tight="true"] .c-card__icon {
    width: 24px;
    height: 24px;
  }

  /* 枠を縮めたぶん、中の図形も 26px → 20px に合わせる */
  .c-cards__list[data-cols="3"][data-tight="true"] .c-card__icon svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 767px) {
  /* 年齢のみ2列（指示による。README 5.13）。ラベルが短くアイコンも無いため収まる */
  .c-cards__list[data-cols-sp="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
    高さは指示により 84px → 67px → **56px** と2度詰めている（README 5.18）。

    枠を四辺 2px に統一した（5.21）ぶん、内容の高さは 54px
    （padding 8px ×2 ＋ 枠 4px ＋ アイコン枠 34px）まで下がるので、
    **いまは min-height の 56px が下限として効いている**。
    さらに詰めるならアイコン（34px）を小さくする必要がある。
    ラベルが2行になるカード（ご希望の2項目）は行の高さが勝って 66px 前後になる。

    タップ領域の下限 44px は保っている。
  */
  .c-card__label {
    min-height: 56px;
    padding: 8px 12px;
    font-size: 16px;
  }
}
/*
  同意文とナビゲーション。

  同意文は最終ステップの末尾にあり、その直後が送信ボタンになる。
  間に他の要素を挟まない（docs/04-behavior-spec.md 5.2）。
*/

/*
  面の色は選択済みカードと同じ --c-accent-tint（指示による）。
  グレー（--c-bg-soft）だと直上のカード群から浮いて別種の面に見えるため揃えた。
*/
.c-consent {
  margin-top: 32px;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: var(--c-accent-tint);
}

.c-consent__text {
  color: var(--c-text-sub);
  font-size: 13px;
  line-height: 1.75;
}

.c-consent__text a {
  word-break: break-all;
}

/* --- ナビゲーション（ステップ群の外に1組だけ） --- */

/*
  入力欄（同意文がある最終ステップでは同意文）の直下に置く。
  画面下端への固定は PC・モバイルともに指示によりやめた（README 5.17）。

  末尾の env(safe-area-inset-bottom) は、iPhone のホームバー領域に
  ボタンが被らないようにするための余白。固定表示ではないのでスクロールで
  逃がせるが、最下部のボタンが指の届きにくい位置に来るのを避けている。
*/
.c-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 14px 32px;
  border: 0;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--duration), transform 0.08s ease-out;
}

.c-btn:active {
  transform: translateY(2px);
}

/*
  「戻る」：左端に置くセカンダリのボタン（指示による移設。README 5.31）。
  白地＋枠線で「次へ」より一段引っ込め、押し間違いを防ぐ。
*/
.c-btn--back {
  border: 2px solid var(--c-line-strong);
  background: var(--c-bg);
  color: var(--c-graphite);
}

.c-btn--back:hover {
  background: var(--c-bg-soft);
}

/*
  「次へ」：グラファイトの面に白文字（約 8.4:1）。平面の塗り（指示による。README 5.32）。

  margin-left: auto は「戻る」が hidden の STEP 1 対策。hidden 要素は
  スペースを取らないため、space-between だけだと「次へ」が左端へ寄ってしまう。
*/
.c-btn--next {
  margin-left: auto;
  background: var(--c-graphite);
  color: #fff;
}

.c-btn--next:hover {
  background: var(--c-graphite-strong);
}

/*
  送信ボタンだけ見た目を変える（docs/04-behavior-spec.md 3.3）。
  中間の「次へ」と同じ外観だと、意図しない送信や逆に送信のためらいを生む。

  グレー基調では色相で差を付けられないため、
    1. 明度　　 …… グラファイトより一段深い墨
    2. 字送り　 …… やや広げて改まった調子にする
    3. 横幅　　 …… flex:1 で「次へ」より広く取る
  の3点で段差を作る。
*/
.c-btn--submit {
  flex: 1;
  margin-left: auto; /* 「次へ」と同じく、「戻る」が hidden でも右側に留めるため */
  background: var(--c-ink);
  color: #fff;
  letter-spacing: 0.08em;
}

.c-btn--submit:hover {
  background: var(--c-ink-strong);
}

/*
  ステップ内の検証がすべて通過したときの「次へ」「送信」（指示による。決定190）。
  クラスの付け外しは form.js の syncCta() が行う。**任意項目は未入力でも通過とみなす。**

  「戻る」（.c-btn--back）は対象にしない。主導線ではないため。

  ★ 詳細度は .c-btn--next.is-ready (0,2,0) > .c-btn--next (0,1,0) なので、
    上の各ボタンの規則より後ろに書く必要はないが、.c-btn--* をまとめておく。
  ★ 色の変化は .c-btn の transition: background-color var(--duration) に乗る。
*/
.c-btn--next.is-ready,
.c-btn--submit.is-ready {
  background: var(--c-cta-ready);
  color: var(--c-cta-ready-text);
}

.c-btn--next.is-ready:hover,
.c-btn--submit.is-ready:hover {
  background: var(--c-cta-ready-strong);
}

@media (max-width: 767px) {
  /*
    モバイルはボタンをフルワイドにする（下部固定はやめたが、幅は画面いっぱいのまま）。
    狭い画面で右寄せの小さなボタンにすると、片手で親指が届く範囲から外れる。

    高さは指示により従来（56px）の80%にした（README 5.18）。
    行間を詰めないと padding だけでは 45px に収まらないため line-height も下げている。
    45px はタップ領域の下限 44px を保っている。
  */
  .c-btn {
    flex: 1;
    width: 100%;
    min-height: 45px;
    padding: 10px 16px;
    line-height: 1.3;
  }

  /*
    「戻る」だけは内容幅に留める。上の flex: 1 のままだと「次へ」と 50/50 に
    割れてしまい、主導線の「次へ」が痩せる。戻ると次へ（最終ステップでは送信）は
    同じ行のまま、残り幅を主導線に譲る。
  */
  .c-btn--back {
    flex: 0 0 auto;
    width: auto;
  }
}
/* 完了画面（thanks.html）。フォーム本体と同じ form.css を共有して見た目を揃える */

.c-thanks {
  padding: 40px 0 64px;
}

/* チェックマークと見出しを横並びにする（指示による。README 5.20・5.26） */
.c-thanks__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.c-thanks__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-tint);
  color: var(--c-accent-ink);
}

/*
  ページ唯一の見出し。マークの横に並ぶが、大きさは独立した h1 だったときのまま
  （24px / PC 28px）保つ。ねぎらいの一言と2本立てだった頃は競合を避けて
  一言側を一段小さくしていたが、1本になったので抑える理由がなくなった。
*/
.c-thanks__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.c-thanks__lead {
  margin-top: 12px;
  font-size: 15px;
}

.c-thanks__box {
  margin-top: 28px;
  padding: 20px;
  border: 2px solid var(--c-line);
  border-radius: var(--radius-card);
  /*
    面の色を明示する。地（--c-canvas）に色が敷かれる配色でも
    枠だけの箱にならず、カードとして立つようにするため（README 5.22）。
  */
  background: var(--c-bg);
}

.c-thanks__box-title {
  font-size: 15px;
  font-weight: 700;
}

.c-thanks__list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.7;
}

.c-thanks__list li {
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.c-thanks__list li::before {
  /*
    ★ CSS の content に非ASCII文字を直接書かない。必ずUnicodeエスケープにする（決定180）。

    貼り付け先のHTMLは Shift_JIS で、この CSS は UTF-8。
    外部CSSに文字コードの宣言が無いと、ブラウザは**参照元HTMLの文字コード**で読むため、
    UTF-8のバイト列がCP932として解釈されて文字化けする。
    2026-08-18、完了画面の「・」が「綢ｻ」に化けて発見した。

    `\30FB` は U+30FB（KATAKANA MIDDLE DOT）。エスケープなら文字コードに依存しない。
    末尾の空白はエスケープの終端で、詰めると後続文字が16進として読まれる。
  */
  content: "\30FB ";
}

.c-thanks__note {
  margin-top: 20px;
  color: var(--c-text-sub);
  font-size: 13px;
}

.c-thanks__actions {
  margin-top: 32px;
}

.c-thanks__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 32px;
  border: 2px solid var(--c-line);
  border-bottom-width: 4px;
  border-radius: 14px;
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: 700;
  text-decoration: none;
}

.c-thanks__back:hover {
  background: var(--c-bg-soft);
  color: var(--c-text);
}

@media (min-width: 768px) {
  .c-thanks__title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  /*
    375px 幅ではマークと見出しが1行に収まらない。マークを縮めたうえで文字も詰める
    （README 5.20・5.26）。幅の内訳：335 −（マーク 56 ＋ gap 12）＝ 267px に対し、
    18px × 14文字 = 252px。20px だと 280px で「お問い合わせを受け付けまし／た」と折れる。
    偶然だが、旧文言「おつかれさまでした。完了です」も14文字で同じ計算だった。
  */
  .c-thanks__head {
    gap: 12px;
  }

  .c-thanks__mark {
    width: 56px;
    height: 56px;
  }

  .c-thanks__mark svg {
    width: 28px;
    height: 28px;
  }

  .c-thanks__title {
    font-size: 18px;
  }
}