/* ============================================================
   超かんたん作成ウィザード（public/js/wizard.js が制御）
   既存の modal-overlay / modal / modal-header / modal-body /
   modal-footer / form-row / stepper / hint / btn-save / btn-cancel /
   modal-nav-btn はそのまま流用し、ウィザード専用の見た目だけ
   ez- プレフィックスで独立させる。色は既存パレットのみを使用：
   緑 #5a7a4f（確定・選択）／青 #2980b9（ガイド系）／
   ベージュ #efeae0・#fafaf5（背景）／グレー #555・#888（文字）。
   ============================================================ */

/* 既存の .form-row .hint（11px）・.ts-label（11px）はグローバルには触らず、
   ウィザード内に表示される時だけ ez- スコープの上書きで12px以上にする
   （「分」「クラス」「終了予定」「余裕」等のラベル類）。 */
#ezWizardModal .form-row .hint,
#ezWizardModal .ts-label {
  font-size: 12px;
}

/* 「戻る」「×」のタップ領域を390px幅の指でも押しやすい大きさに拡張。
   見た目（ボーダー・文字サイズ）は既存のまま、余白だけ広げる。 */
#ezWizardModal #ezBackBtn {
  min-height: 44px;
  padding: 10px 18px;
}
#ezWizardModal #ezNextBtn {
  min-height: 44px;
}
#ezWizardModal #ezWizardCloseX {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ステッパー（−/＋ボタン）のタップ領域を44pxに拡張。
   .stepper は align-items: stretch なので、ボタン側の min-height を上げれば
   コンテナ（＝数値入力欄）もそれに合わせて伸びるため、縦位置ズレは起きない。
   style.css の共有部品（.stepper-btn）は他画面（一括生成モーダル等）にも
   使われているため触らず、ここではウィザード内だけ ez- スコープで上書きする。 */
#ezWizardModal .stepper-btn {
  min-width: 44px;
  min-height: 44px;
}

/* 時刻入力（コースを使える時間／お昼休み・全体項目の「時刻で指定」）を、本体①全体の枠の
   時刻入力（.time-row input[type="time"]、style.css）と同じ見た目に統一する。
   フレーム画面は .time-row を共有しているため元々一致していたが、お昼休み・全体項目は
   .ez-time-range-row（クラス無しの生 input）のためスタイルが素の見た目のまま
   min-height の拡張しか当たっておらず、本体と見た目が違って見えていた。
   .time-row / .ez-time-range-row はどちらも align-items: center のため、
   入力欄だけ丈が変わってもラベル・ヒントは中央揃えのままズレない。 */
#ezWizardModal input[type="time"] {
  min-height: 44px;
  font-size: 16px;
  padding: 6px 10px;
  border: 1px solid #c8c2b3;
  border-radius: 4px;
  font-family: inherit;
  background: #fff;
}

/* モーダル本体：ヘッダー内の進捗ラベル・進捗バー */
.ez-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: #777;
  white-space: nowrap;
}
.ez-progress-track {
  height: 4px;
  background: #efeae0;
  flex: 0 0 auto;
}
.ez-progress-fill {
  height: 100%;
  background: #5a7a4f;
  width: 0%;
  transition: width 0.2s ease;
}
.ez-footer-spacer { flex: 1 1 auto; }

/* ステップ共通の見出し・補足文 */
.ez-step-title {
  font-size: 17px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 0 0 6px;
  text-wrap: balance;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-step-sub {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin: 0 0 16px;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* ステップ1：イベント種別の大きなカード型ボタン（6択・常に2列×3行）。
   以前は auto-fit minmax(140px,1fr) にしていたが、モーダル幅が480pxまで
   確保できる768px以上の画面では1行に3列並んでしまい、カード内の短い
   単語（「レース」等）が真ん中で割れる原因になっていた。固定2列にして解消。 */
.ez-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* 「レース」「ローテーション」等、途中で割れると読みにくい単語をまとめて
   1つのインライン要素にする。Safari は word-break: auto-phrase に非対応で
   分節を認識できず、overflow-wrap: anywhere が最終手段としてはたらいて
   単語の真ん中で改行してしまうことがある（例:「レー／ス」）。
   white-space: nowrap で単語ごと次の行に丸ごと送ることで、
   ブラウザ・画面幅を問わず単語の途中割れを防ぐ。 */
.ez-nowrap { white-space: nowrap; }
.ez-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: #fff;
  border: 1px solid #c8c2b3;
  border-radius: 8px;
  padding: 14px 12px;
  cursor: pointer;
  font-family: inherit;
}
.ez-card:hover { background: #f5f3ee; border-color: #95a88a; }
.ez-card.selected {
  background: #5a7a4f;
  border-color: #5a7a4f;
  color: #fff;
}
.ez-card-title {
  font-size: 15px;
  font-weight: 700;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-card-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-card.selected .ez-card-desc { color: #e4ede0; }

/* 2〜3択の選択肢（お昼休み／走行と走行の間／決勝の決め方）。
   ネイティブ radio を使い、選択中は :has() で見た目を変える
   （既存の genLunchMode ラジオタブと同じ考え方）。 */
.ez-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.ez-choice-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #c8c2b3;
  border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
}
.ez-choice-btn:hover { background: #f5f3ee; border-color: #95a88a; }
.ez-choice-btn:has(input:checked) {
  background: #eef4ea;
  border-color: #5a7a4f;
}
.ez-choice-btn input[type="radio"] { margin: 3px 0 0; flex-shrink: 0; }
.ez-choice-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-choice-hint {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  line-height: 1.5;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-sub-field {
  margin: 4px 0 10px 26px;
  padding: 10px 12px;
  background: #fafaf5;
  border: 1px solid #e8e2d2;
  border-radius: 6px;
}
.ez-sub-field .form-row:last-child { margin-bottom: 0; }

/* 全体項目ステップ（受付／車検／ブリーフィング・ミーティング／表彰式・閉会式／完全撤収）。
   ラベルが長い項目（「ブリーフィング・ミーティング」等）があるため、.form-row の
   固定90px幅ラベルは使わず、ラベルを可変幅にして select と横並び→折り返しにする。 */
.ez-extras-item { margin-bottom: 14px; }
.ez-extras-item:last-child { margin-bottom: 0; }
.ez-extras-item-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ez-extras-item-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  /* flex-basis は auto ではなく 0 にする。auto だとラベルの改行前サイズ（max-content）を
     基準に「同じ行に収まるか」を判定するブラウザがあり（Chromium）、長いラベル
     （「ブリーフィング・ミーティング」）だけ select ごと次の行に落ちてしまう
     （WebKit は素直に縮めるため起きない）。0 にして flex-grow だけで幅を配分させることで、
     両エンジンとも select と同じ行に収まるようになる（wq9指摘）。 */
  flex: 1 1 0%;
  min-width: 0;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-extras-mode,
.ez-extras-place-select {
  flex: 0 0 auto;
  /* ラベルが長く2行になって select が次の行に落ちても、justify-content の
     行ごとの配置ではなく margin-left: auto でこの要素自身を右端に固定する。
     これでラベルの行数に関わらず、常に他の項目と同じ右端位置にそろう。 */
  margin-left: auto;
  /* Safari の select はネイティブ外観（appearance: auto）のままだと min-height や
     padding を実測サイズに反映しない（タップ領域44px未満になる）。appearance: none で
     ネイティブ外観を外し、消えた矢印をCSSだけの矢印（グラデーション2本）で補う。 */
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 14px 30px 14px 10px;
  font-size: 14px;
  border: 1px solid #c8c2b3;
  border-radius: 4px;
  font-family: inherit;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  max-width: 100%;
}
/* 「入れる」を選んだ項目だけ展開する詳細（占有時間に含める／時間の指定方法）。
   ここが折りたたまれている間は select 1行分の高さで済み、390px幅でも窮屈にならない。 */
.ez-extras-detail {
  margin: 8px 0 0 0;
}
.ez-extras-item-note {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  line-height: 1.5;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* お昼休み「時刻で指定」の時刻2つ＋区切り「〜」。ラベルだけ独立した行にして、
   時刻2つと「〜」は常に1つのまとまりとして扱う（767px以下で .hint を
   強制的に100%幅にする狭幅対応の対象外にするため、.hint ではなく専用の
   ez-time-sep クラスを使う。区切り記号1文字が単独で行送りされて
   左に飛んで見える不具合を防ぐ）。 */
.ez-time-range-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 14px;
}
.ez-time-range-label {
  flex: 1 1 100%;
  font-size: 13px;
  color: #555;
}
.ez-time-sep {
  color: #888;
  font-size: 13px;
  flex: 0 0 auto;
}

/* 補足メモ・エラー表示 */
.ez-note {
  background: #f0f4f7;
  border-left: 3px solid #95b8d4;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  color: #2c4a66;
  line-height: 1.7;
  border-radius: 3px;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-error {
  background: #fdecea;
  border-left: 3px solid #c43a3a;
  padding: 12px 14px;
  font-size: 14px;
  color: #6b1f1f;
  line-height: 1.7;
  border-radius: 3px;
  margin-bottom: 14px;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* ステップ7：提案カード（最大3件） */
.ez-proposal-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ez-proposal-card {
  border: 1px solid #e0dcd2;
  border-radius: 8px;
  background: #fafaf5;
  padding: 14px;
}
.ez-proposal-label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-proposal-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ez-proposal-class-chip {
  font-size: 12px;
  color: #555;
  background: #efeae0;
  border-radius: 3px;
  padding: 3px 8px;
  line-height: 1.5;
  /* 「15分」「決勝」等が数値と単位・単語の途中で割れないように（wq7指摘）。
     このクラスだけ他の ez- テキスト要素と違い自動フィットの5点セットが漏れていたのが原因。 */
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-proposal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}
/* 12px未満禁止ルールのため、冒頭の #ezWizardModal .ts-label 上書き(12px)に頼らず自前でも12pxを指定 */
.ez-proposal-summary-item .ts-label { font-size: 12px; color: #888; letter-spacing: 0.05em; margin-bottom: 2px; }
.ez-proposal-summary-item .ts-value { font-size: 16px; font-weight: 600; font-family: "SF Mono", Menlo, monospace; }
.ez-proposal-select { width: 100%; min-height: 44px; }

/* ステップ8：確定画面 */
.ez-confirm-box {
  border: 1px solid #e0dcd2;
  border-radius: 8px;
  background: #fafaf5;
  padding: 14px;
  margin-bottom: 14px;
}

/* 完了画面 */
.ez-done {
  text-align: center;
  padding: 20px 8px;
}
.ez-done-icon { font-size: 40px; margin-bottom: 10px; }
.ez-done-title {
  font-size: 16px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 8px;
  text-wrap: balance;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.ez-done-note {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  text-wrap: pretty;
  line-break: strict;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* 狭幅対応：ラベル＋入力欄の右にヒント文を詰めると、残り幅が数十pxしかなく
   数字や記号が1〜2文字ずつ縦に割れてしまう。767px以下ではヒントを行の下に
   まるごと回して読める幅を確保する（既存の modal-large 狭幅対応と同じ考え方）。 */
@media (max-width: 767px) {
  #ezWizardModal .form-row { flex-wrap: wrap; }
  #ezWizardModal .form-row .hint {
    flex: 1 1 100%;
    margin-top: 2px;
    text-wrap: pretty;
    line-break: strict;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  /* クラス数画面の「分」「クラス」等の単位ヒントは1〜3文字と短く、上の全幅折り返しを
     適用すると数字から離れて左下に落ちてしまう（wq7指摘）。ステッパーの右隣にそのまま
     収まる幅なので、全幅化だけ打ち消して同じ行に残す。 */
  #ezWizardModal .form-row .hint.ez-unit-hint {
    flex: 0 0 auto;
    margin-top: 0;
  }
  /* 全体項目（受付・車検等）の「分で指定」詳細行は .ez-sub-field の左マージン／パディング分
     さらに幅が狭く、90px固定ラベルのままだと ez-unit-hint を同じ行に残しても入り切らない
     （wq9指摘）。ラベルは「時間」の2文字だけなのでここだけ幅を詰めて収める。 */
  #ezWizardModal .ez-extras-detail .form-row label {
    width: 70px;
  }
}

/* ウィザードから出す確認ダイアログ（既存共通の #customDialogOverlay を流用）。
   グローバルには触らず、wizard.js が表示直前だけ .ez-dialog-scope を
   付け外しした時にのみ「はい／いいえ」のタップ領域を44pxに広げる。 */
.ez-dialog-scope #customDialogOk,
.ez-dialog-scope #customDialogCancel {
  min-height: 44px;
}