/* =========================================================================
   pc.css  ―  個別査定PC_CVページ（査定依頼フォーム）PC 本文スタイル
   --------------------------------------------------------------------------
   読み込み順: ../_shared/skeleton-base.css → tokens.css → ../_shared/chrome-pc.css → pc.css
   ★色・体裁は Figma「個別査定PC_CVページ」準拠（tokens.css 参照）。
   ★ヘッダー/フッターは共有 _shared/chrome-pc.css の標準（赤ロゴ・赤下線タブ）をそのまま使用（上書きなし）。
   ★フォーム部品は online_assessment_top と同じ .scl-cv-field / .scl-cv-select / .scl-cv-req 名を踏襲。
     画面固有ブロックは .scl-cv-* 接頭辞で他画面・本番CSSと非衝突。
   ========================================================================= */

/* ---- ページ土台 ------------------------------------------------------- */
.scl-page { margin: 0; background: var(--scl-color-bg); color: var(--scl-color-text); font-family: var(--scl-font-base); font-size: var(--scl-fs-md); line-height: var(--scl-lh-base); }
.scl-page a { color: inherit; text-decoration: none; }
.scl-page img { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* ---- 本文コンテナ（フォーム読み幅 720px 中央） ------------------------ */
.scl-cv { padding: var(--scl-space-7) 0 var(--scl-space-8); }
.scl-cv-container { max-width: var(--scl-content-max); margin: 0 auto; padding: 0 24px; }

/* 共通フォーカスリング（PC/SP整合） */
.scl-cv-select:focus-visible, .scl-cv-input:focus-visible, .scl-cv-btn:focus-visible,
.scl-cv-choice__opt:focus-visible, .scl-page a:focus-visible, .scl-cv-consent input:focus-visible,
.scl-cv-check input:focus-visible {
    outline: 3px solid var(--scl-color-accent); outline-offset: 2px;
}

/* ---- ① 査定を依頼する買取店カード（Figma PC: 上に#EBEBEB帯＋白背景/影のカード。枠線なし・下角丸8px・写真63×48） ---- */
.scl-cv-shop { margin-bottom: var(--scl-space-6); background: var(--scl-color-surface); box-shadow: var(--scl-shadow-card); border-radius: 0 0 var(--scl-radius-btn) var(--scl-radius-btn); overflow: hidden; }
.scl-cv-shop__header { margin: 0; padding: var(--scl-space-2) 20px; background: var(--scl-color-band-bg); color: var(--scl-color-text); font-size: var(--scl-fs-sm); }
.scl-cv-shop__body { padding: var(--scl-space-4) 20px var(--scl-space-5); }
.scl-cv-shop__name { margin: 0 0 var(--scl-space-1); font-size: 18px; font-weight: 700; color: var(--scl-color-heading); line-height: 1.2; }
.scl-cv-shop__addr { margin: 0 0 var(--scl-space-3); font-size: var(--scl-fs-sm); color: var(--scl-color-text); }
.scl-cv-shop__detail { display: flex; align-items: flex-start; gap: var(--scl-space-2); }
.scl-cv-shop__photo { flex: 0 0 auto; width: 63px; height: 48px; object-fit: contain;object-position: center; }
.scl-cv-shop__facts { margin: 0; display: flex; flex-direction: column; gap: var(--scl-space-1); }
.scl-cv-shop__facts > div { display: flex; align-items: center; gap: var(--scl-space-2); }
.scl-cv-shop__facts dt { margin: 0; background: var(--scl-color-band-bg); color: var(--scl-color-text); font-size: var(--scl-fs-xs); padding: 3px 12px; border-radius: var(--scl-radius-sm); white-space: nowrap; }
.scl-cv-shop__facts dd { margin: 0; font-size: var(--scl-fs-sm); color: var(--scl-color-text); }

/* ---- セクション見出し ------------------------------------------------- */
.scl-cv-section { margin-top: var(--scl-space-6); padding-top: var(--scl-space-6); border-top: 1px solid var(--scl-color-border); }
.scl-cv-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }   /* 先頭（クルマ情報）は線なし。お客様情報の上にだけ区切り線が入る */
.scl-cv-h1 { margin: 0 0 var(--scl-space-3); font-size: var(--scl-fs-h1); font-weight: 700; color: var(--scl-color-heading); }
.scl-cv-lead { margin: 0 0 var(--scl-space-5); font-size: var(--scl-fs-lead); color: var(--scl-color-text-sub); line-height: var(--scl-lh-base); }

/* ---- フォーム項目（ラベル上・コントロール全幅の縦積み） --------------- */
.scl-cv-field { display: block; padding: var(--scl-space-3) 0; }   /* ★Figma は項目間に区切り線なし（余白のみ） */
.scl-cv-field__label { display: flex; align-items: center; gap: var(--scl-space-2); font-weight: 700; font-size: var(--scl-fs-label); color: var(--scl-color-text); margin-bottom: var(--scl-space-2); }

/* Legacy vehicle details, restyled for the renewed CV form. */
.scl-cv-vehicle-details[hidden] { display: none; }
.scl-cv-vehicle-details { border-top: 1px solid var(--scl-color-border); border-bottom: 1px solid var(--scl-color-border); }
.scl-cv-option-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scl-space-3); width: 100%; }
.scl-cv-option { position: relative; display: flex; cursor: pointer; }
.scl-cv-option input { position: absolute; opacity: 0; pointer-events: none; }
.scl-cv-option span { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 16px; border: none; border-radius: var(--scl-radius-sm); background: var(--scl-color-choice-bg); color: var(--scl-color-text); text-align: center; }
.scl-cv-option span:hover { background: #e8e8e8; }
.scl-cv-option input:checked + span { background: var(--scl-color-choice-on-bg); color: var(--scl-color-choice-on-fg); font-weight: 700; }
.scl-cv-option input:focus-visible + span { outline: 3px solid var(--scl-color-accent); outline-offset: 2px; }
.scl-cv-exhaust-row { display: flex; align-items: center; gap: var(--scl-space-2); }
.scl-cv-exhaust-row .scl-cv-select { flex: 1 1 auto; }
.scl-cv-unit { flex: 0 0 auto; }
.scl-cv-check { display: inline-flex; align-items: center; gap: var(--scl-space-2); margin-top: var(--scl-space-2); cursor: pointer; }
/* ラベル内の「（半角）」「（全角）」等の補足＝細字・やや小さく（本体は太字） */
.scl-cv-field__sub { font-weight: 400; font-size: var(--scl-fs-sm); }
.scl-cv-field__control { display: block; }
/* 車検期限（年・月の2列） */
/* 車検期限（年・月）: Figma は各159px固定・gap8px（横幅いっぱいに伸ばさない） */
.scl-cv-field__control--row2 { display: grid; grid-template-columns: 159px 159px; gap: var(--scl-space-2); }
/* 車検「無し」「わからない」チェックボックス（年月select の下に横並び。同意チェックと同じ赤枠＋白レ点様式で統一） */
.scl-cv-inspection-none { display: flex; gap: var(--scl-space-4); margin-top: var(--scl-space-2); }
.scl-cv-check { display: inline-flex; align-items: center; gap: var(--scl-space-2); font-size: var(--scl-fs-md); color: var(--scl-color-text); cursor: pointer; }
.scl-cv-check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid var(--scl-color-accent); border-radius: 2px; background: #fff; cursor: pointer; position: relative; }
.scl-cv-check input:checked { background: var(--scl-color-accent); }
.scl-cv-check input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* 住所（縦積み） */
.scl-cv-field__control--stack { display: flex; flex-direction: column; gap: var(--scl-space-3); }
.scl-cv-field__note { margin: var(--scl-space-2) 0 0; font-size: var(--scl-fs-sm); color: var(--scl-color-text-sub); }
.scl-cv-field__note--top { margin: 0 0 var(--scl-space-2); }   /* ラベル直下・入力欄の上に置く説明文（氏名など） */
.scl-cv-error,
.scl-cv .caution,
.scl-cv .caution_sub { display: block; width: 100%; margin: 0 0 var(--scl-space-2); color: var(--scl-color-required); font-size: var(--scl-fs-xs); font-weight: 400; line-height: 1.5; }
.scl-cv-error[hidden] { display: none; }
.scl-cv-error--center { text-align: center; }
.scl-cv-field.is-error .scl-cv-select,
.scl-cv-field.is-error .scl-cv-input,
.scl-cv-field:has(.scl-cv-error:not([hidden])) .scl-cv-select,
.scl-cv-field:has(.scl-cv-error:not([hidden])) .scl-cv-input { border-color: var(--scl-color-required); }

/* ★Figma で「必須」と「OK」は表示方法が異なる（ラベルの左に置く）:
     必須＝赤い「文字」のみ（塗りなし） / OK＝青い塗りバッジ（白抜き文字）
   ★OK＝相場シミュから引き継いだ入力済み項目、必須＝この画面で新規入力する項目（README 参照） */
.scl-cv-req, .scl-cv-ok { order: -1; font-style: normal; font-size: var(--scl-fs-xs); font-weight: 700; line-height: 1; }
/* 必須＝赤文字のみ（背景・枠なし） */
.scl-cv-req { color: var(--scl-color-required); background: none; padding: 0; }
/* OK＝青の塗りバッジ（白抜き文字） */
.scl-cv-ok  { color: var(--scl-color-badge-ok-fg); background: var(--scl-color-badge-ok-bg); padding: 4px 6px; border-radius: var(--scl-radius-sm); }

/* select / input 共通 */
.scl-cv-select, .scl-cv-input, #car_list select, #registration_year_list select, #grade_list select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--scl-color-input-border); border-radius: var(--scl-radius-sm); background: #fff; font-size: var(--scl-fs-md); color: var(--scl-color-text); }
.scl-cv-input::placeholder { color: var(--scl-color-placeholder); }
/* select の ∨ は赤（グーレッド） */
.scl-cv-select, #car_list select, #registration_year_list select, #grade_list select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23dc0000' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; color: #000; }
.scl-cv-select option, #car_list select option, #registration_year_list select option, #grade_list select option { color: #000; }
.scl-cv-select:disabled, #car_list select:disabled, #registration_year_list select:disabled, #grade_list select:disabled { background-color: #f4f5f6; color: #000; }

/* 修復歴（なし/あり/不明のボタン） */
.scl-cv-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scl-space-3); width: 100%; }
.scl-cv-choice__opt { height: 48px; border: none; border-radius: var(--scl-radius-sm); background: var(--scl-color-choice-bg); font-size: var(--scl-fs-md); color: var(--scl-color-text); cursor: pointer; }
.scl-cv-choice__opt:hover { background: #e8e8e8; }
.scl-cv-choice__opt.is-on { background: var(--scl-color-choice-on-bg); border-color: var(--scl-color-choice-on-bg); color: var(--scl-color-choice-on-fg); font-weight: 700; }

/* ---- ④ 同意チェック ＋ 送信 ------------------------------------------ */
/* 同意チェック＋送信ボタン: Figma は白背景カード（角丸8px・padding16） */
.scl-cv-submit { margin-top: var(--scl-space-6); background: var(--scl-color-surface); border-radius: var(--scl-radius-btn); padding: var(--scl-space-4); }
.scl-cv-consent { display: flex; align-items: center; justify-content: center; gap: var(--scl-space-3); padding: var(--scl-space-4); font-size: var(--scl-fs-md); color: var(--scl-color-text); cursor: pointer; }
/* 同意チェックボックス（Figma: 白地・赤枠 #DC0000・角丸2px・16px。チェック時は赤地に白レ点＝Figma未確認のため一般的な表現） */
.scl-cv-consent input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid var(--scl-color-accent); border-radius: 2px; background: #fff; cursor: pointer; position: relative; }
.scl-cv-consent input:checked { background: var(--scl-color-accent); }
.scl-cv-consent input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.scl-cv-consent a { text-decoration: underline; }
.scl-cv-submit__wrap { text-align: center; margin-top: var(--scl-space-3); }
/* CTA＝赤の角丸長方形（グーレッド） */
.scl-cv-btn { min-width: 280px; height: 56px; padding: 0 40px; background: var(--scl-color-btn); color: var(--scl-color-btn-text); font-size: var(--scl-fs-cta); font-weight: 700; border: none; border-radius: var(--scl-radius-btn); cursor: pointer; }
.scl-cv-btn:hover { background: var(--scl-color-btn-hover); }
.scl-cv-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- レスポンシブ微調整（PC内で幅が縮んだとき） ---------------------- */
@media (max-width: 760px) {
  .scl-cv-choice, .scl-cv-option-group { grid-template-columns: 1fr; }
  .scl-cv-btn { min-width: 0; width: 100%; }
}