/* ============================================
   s-reserve-01.css
   WEB予約セクション（jj-reserve プラグイン ウィジェット）
   オーバーライドレイヤー（あきえ皮膚科）
   ============================================ */

/* ── 設計方針 ──────────────────────────────────────────────
   jj-reserve のウィジェット（.jjr-booking-widget / .jjr-confirmation-widget）は
   ほぼ全てのカラー・角丸・余白・シャドウを --jjr-* カスタムプロパティ経由で
   参照している。カスタムプロパティはDOM継承のため、.s-reserve-01（祖先）上で
   再定義するだけで配下の全 .jjr-* セレクタへ自動的に伝播する
   （CSSファイルの読み込み順に依存しない）。
   個別セレクタの上書きは、プラグイン側の var 名ミスマッチ（フォールバック値が
   常に採用されてしまう箇所）とレイアウト/レスポンシブ補正のみに限定する。
   全て .s-reserve-01 配下にスコープする。 */

/* ── カスタムプロパティのマッピング（jjr-booking-widget / jjr-confirmation-widget 共通）── */
.s-reserve-01 {
  /* primary系: ボタン・選択状態・プログレス */
  --jjr-primary-color: var(--color-primary);
  --jjr-primary-hover: var(--color-primary-dark);
  --jjr-primary-dark: var(--color-primary-dark);
  --jjr-primary-light: var(--color-primary-light);
  --jjr-primary-lightest: var(--color-primary-lightest);

  /* success/warning 系は元は緑/amber（プラグイン既定）。サイトはダスティピンク
     単色トーン＆マナーのため「色を合わせて」に従い primary 系へ統一する
     （エラーだけ --color-danger を維持）。これで .jjr-success-icon（完了アイコン）・
     .jjr-status-success/-green（バッジ）・.jjr-selection-summary（担当/日付ストリップ）・
     凡例 .jjr-legend-circle/-triangle が一括で primary 系になる。 */
  --jjr-success-color: var(--color-primary);
  --jjr-success-light: var(--color-primary-lightest);
  --jjr-success-hover: var(--color-primary-light);
  --jjr-success-dark: var(--color-primary-dark);
  --jjr-warning-color: var(--color-accent);
  --jjr-warning-light: var(--color-primary-lightest);
  --jjr-warning-hover: var(--color-primary-light);
  --jjr-error-color: var(--color-danger);
  --jjr-error-light: color-mix(in srgb, var(--color-danger) 12%, var(--color-white));
  --jjr-error-dark: var(--color-danger);

  /* テキスト・背景・枠線 */
  --jjr-text-color: var(--color-text);
  --jjr-text-secondary: var(--color-text-light);
  --jjr-text-muted: var(--color-text-light);
  --jjr-text-disabled: var(--color-text-light);
  --jjr-border-color: var(--color-border);
  --jjr-border-focus: var(--color-primary);
  --jjr-background: var(--color-white);
  --jjr-background-light: var(--color-bg-sub);
  --jjr-background-hover: var(--color-bg-sub);
  --jjr-background-selected: var(--color-primary-lightest);
  --jjr-unavailable-bg: var(--color-bg-sub);
  --jjr-unavailable-color: var(--color-text-light);

  /* 角丸: カード=md、入力=sm、外枠/モーダル=lg、ピル状=pill */
  --jjr-radius-sm: var(--radius-sm);
  --jjr-radius-md: var(--radius-md);
  --jjr-radius-lg: var(--radius-md);
  --jjr-radius-xl: var(--radius-lg);
  --jjr-radius-full: var(--radius-pill);
  --jjr-border-radius: var(--radius-md);
  --jjr-border-radius-sm: var(--radius-sm);
  --jjr-border-radius-lg: var(--radius-lg);

  /* 余白: px実測値が最も近い space トークンへマッピング（4/8/16/24/32px） */
  --jjr-spacing-xs: var(--space-3-xs);
  --jjr-spacing-sm: var(--space-xs);
  --jjr-spacing-md: var(--space-xl);
  --jjr-spacing-lg: var(--space-3-xl);
  --jjr-spacing-xl: var(--space-5-xl);

  /* シャドウ: モーダル・フォーカスリング等の機能的用途のみ（装飾shadow禁止ルールに準拠） */
  --jjr-shadow-sm: var(--shadow-sm);
  --jjr-shadow-md: var(--shadow-md);
  --jjr-shadow-lg: var(--shadow-lg);
  --jjr-shadow-xl: var(--shadow-xl);

  /* フォント: サイト本文フォントを継承 */
  --jjr-font-family: var(--font-family-body, inherit);
}

/* ── ウィジェット外枠 ── overrides: .jjr-booking-widget / .jjr-confirmation-widget */
.s-reserve-01 .jjr-booking-widget,
.s-reserve-01 .jjr-confirmation-widget {
  font-family: var(--font-family-body, inherit);
}

/* ── フォーム別ブランディング色の無効化 ── overrides: #jjr-public-booking
   PublicBooking.php が未設定時プラグイン既定色（青#3b82f6/緑#10b981）を
   `<style>#jjr-public-booking{--jjr-primary-color:...}</style>` としてIDで
   直接出力する。要素自身への直接値は祖先での再定義（継承）に絶対勝てない
   （実測確認済み）。class1つ分だけ詳細度を足して明示的に上書きする。
   選択中カレンダー日・進捗の丸・月/週表示・disabled前の次へ・日付見出しが
   青くなる不具合は全てこれが原因。 */
.s-reserve-01 #jjr-public-booking {
  --jjr-primary-color: var(--color-primary);
  --jjr-accent-color: var(--color-primary-dark);
}

/* ── 同意ブロック（注意事項）── overrides: .jjr-cautions-intro / .jjr-caution-item /
   .jjr-cautions-agreement / .jjr-step-cautions .jjr-cautions-step-content
   プラグイン側が --jjr-warning-bg / --jjr-bg-light という「:rootで未定義の変数名」を
   参照しており、上のカスタムプロパティ再定義が効かず常にハードコードfallbackが
   採用されてしまう。ここだけは個別セレクタで明示的に上書きする。 */
.s-reserve-01 .jjr-step-cautions .jjr-cautions-step-content {
  background: var(--color-white);
}

.s-reserve-01 .jjr-cautions-intro {
  background: var(--color-primary-lightest);
}

.s-reserve-01 .jjr-caution-item,
.s-reserve-01 .jjr-cautions-agreement {
  background: var(--color-bg-sub);
}

.s-reserve-01 .jjr-cautions-agreement .jjr-checkbox {
  accent-color: var(--color-primary);
}

/* ── プログレスインジケーター ── overrides: .jjr-progress-bar /
   .jjr-progress-step.completed .jjr-progress-step-circle
   バーとアクティブ丸は --jjr-primary-color 経由で解決済み。完了ステップの丸は
   プラグイン既定で --jjr-success-color（緑）を使うが、サイトのトーン&マナー
   （進捗=primary系で統一・完了色に緑を使わない）に合わせ primary-dark へ変更する。 */
.s-reserve-01 .jjr-progress-bar {
  background: var(--color-primary);
}

.s-reserve-01 .jjr-progress-step.completed .jjr-progress-step-circle {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* ── メニューアコーディオン／一覧 ── overrides: .jjr-menu-parent-header / .jjr-menu-leaf
   カラー・角丸は上のカスタムプロパティで解決済み。選択済みメニューのチェック行の
   視認性のみ補強する。左ボーダーで選択状態を明示する（チェックアイコン相当）。 */
.s-reserve-01 .jjr-menu-leaf.selected,
.s-reserve-01 .jjr-menu-list-item.selected,
.s-reserve-01 .jjr-menu-card.selected {
  background: var(--color-primary-lightest);
  border-left: 3px solid var(--color-primary);
}

/* ── リスト装飾のリーク遮断 ── overrides: .s-content-01 由来の
   `ul:not([class*="__"]):not([class*="c-"]):not([class*="s-"]) > li::before`
   （丸チェックアイコン）と `ol li::before`（丸数字バッジ）、および
   `.s-content-01 li { position:relative; padding-left:...; margin-bottom:... }`
   が、ウィジェット内の <ul>/<li>（メニューアコーディオン #jjr-menu-accordion・
   メニュー一覧・チップ・時間帯一覧・凡例・サマリー一覧・完了ページの一覧）
   にまで及んでいる（実測で確認済み：メニュー行の左端に無関係な丸チェックが
   表示される。"jjr-menu-list" 等のクラス名は "__"/"c-"/"s-" を含まないため
   除外条件に掛からない）。ウィジェット配下の全 <li>/<ul>/<ol> をリセットする。
   例外は .jjr-consent__list のみ（下のブロックで対応済み・ネイティブ番号を維持）。
   `::before` の content 無効化は `.s-content-01 ul...` の詳細度 (0,4,2) が
   非常に強いため !important で確実に勝たせる。li 自体の余白/position は
   `.s-reserve-01 .jjr-booking-widget li`（クラス2つ）で通常の詳細度上書きが
   効く（実測で確認済み）。 */
.s-reserve-01 .jjr-booking-widget li,
.s-reserve-01 .jjr-confirmation-widget li {
  margin: 0;
  padding-inline-start: 0;
  position: static;
}

.s-reserve-01 .jjr-booking-widget li::before,
.s-reserve-01 .jjr-confirmation-widget li::before {
  content: none !important;
}

.s-reserve-01 .jjr-booking-widget ul,
.s-reserve-01 .jjr-booking-widget ol:not(.jjr-consent__list),
.s-reserve-01 .jjr-confirmation-widget ul,
.s-reserve-01 .jjr-confirmation-widget ol {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

/* ── カレンダー（○/△/×）── overrides: .jjr-calendar-day.selected /
   #jjr-selected-date-display
   背景色は --jjr-primary-color 経由で解決済み。ただし選択日セルの文字色を
   白にするプラグイン側ルール
   `.jjr-calendar-day.selected .jjr-calendar-day-number/-symbol { color:#fff }`
   は、実際にJSが描画するDOMのクラス名 `.jjr-day-number`/`.jjr-day-symbol`
   と一致しない（プラグインCSSとJSのクラス名不一致バグ・実測で確認済み）ため
   一度も適用されない。選択中セルが primary 背景のまま文字が既定色（#333）に
   なり視認性が落ちるので、実際のクラス名でここだけ明示的に白へ上書きする。 */
.s-reserve-01 .jjr-calendar-day.selected .jjr-day-number,
.s-reserve-01 .jjr-calendar-day.selected .jjr-day-symbol {
  color: var(--color-white);
}

.s-reserve-01 .jjr-calendar-day {
  font-weight: var(--font-weight-medium, 500);
}

/* ○/△/✗ の記号色（未選択時）— プラグインCSSは `.jjr-calendar-day.circle/
   .triangle/.cross` を対象にしているが、JSが実際に描画するのは
   `.jjr-day-circle`/`.jjr-day-triangle`/`.jjr-day-cross`（同じクラス名
   不一致バグ）で、これらには一切の色指定が無い。○=primary/△=accent
   （#B07578・warning系ではなくサイトのアクセント）/×=text-light。
   色は記号(.jjr-day-symbol、中の material-icons は color:inherit で追従)
   だけに置き、日付の数字(.jjr-day-number)には及ぼさない — 開いている日の
   数字は既定の --color-text のまま（セルへ置くと数字まで色が付いてしまう
   ため symbol だけをスコープする）。休診日(×)だけは数字も text-light にする。 */
.s-reserve-01 .jjr-day-circle:not(.selected) .jjr-day-symbol {
  color: var(--color-primary);
}

.s-reserve-01 .jjr-day-triangle:not(.selected) .jjr-day-symbol {
  color: var(--color-accent);
}

.s-reserve-01 .jjr-day-cross .jjr-day-symbol,
.s-reserve-01 .jjr-day-cross .jjr-day-number {
  color: var(--color-text-light);
}

/* 日付見出し「9月14日(月) の予約可能時間」— 見出し全体は --jjr-text-color
   （既に --color-text にマッピング済み）で解決済み。日付部分だけを包む
   #jjr-selected-date-display はプラグイン側で `color: var(--jjr-primary-color)`
   だが、そのまま解決すると --color-primary（本文用のやや淡いローズ）になる。
   見出し内の強調としてはより濃い primary-dark を明示指定する。 */
.s-reserve-01 #jjr-selected-date-display {
  color: var(--color-primary-dark);
}

/* 「次へ」など primary ボタンの disabled 状態 — プラグイン既定は
   `.jjr-btn-primary:disabled { opacity: 0.5; }` のみで、背景は
   --jjr-primary-color を薄めただけの水色がかった見た目になる。
   サイトのdisabled表現（primary-light 背景 + text-light 文字）に合わせる。 */
.s-reserve-01 .jjr-btn-primary:disabled {
  opacity: 1;
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-text-light);
}

/* ── タイムスロットボタン ── overrides: .jjr-timeslot
   選択・ホバー・無効状態のカラーはカスタムプロパティで解決済み。追加調整なし。 */

/* ── フォーム項目 ── overrides: .jjr-input / .jjr-textarea / .jjr-form-group
   padding/border幅/角丸はプラグイン側プロパティ名が独自
   （spacing-sm/md・2px固定・radius-md）でカスタムプロパティ経由では
   吸収しきれないため、s-form-01.css の見た目に直接合わせる。 */
.s-reserve-01 .jjr-input,
.s-reserve-01 .jjr-textarea {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.s-reserve-01 .jjr-input:focus,
.s-reserve-01 .jjr-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

.s-reserve-01 .jjr-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

.s-reserve-01 .jjr-error-message {
  color: var(--color-danger);
}

/* ── アイコン色 ── overrides: .material-icons/-outlined 全般・.jjr-search-icon /
   .jjr-cautions-icon
   Material Icons化への対応：アイコンは既定で親の文字色を継承させる
   （ボタン内アイコンはボタン文字色に自動追従・完了ステップの丸は白のまま）。
   単独の状態アイコンだけ個別に色を決め打ちする。 */
.s-reserve-01 .material-icons,
.s-reserve-01 .material-icons-outlined {
  color: inherit;
}

.s-reserve-01 .jjr-search-icon {
  color: var(--color-text-light);
}

.s-reserve-01 .jjr-cautions-icon {
  color: var(--color-primary-dark);
}

/* ── チェックボックス／ラジオ ── overrides: input[type=checkbox] / [type=radio] */
.s-reserve-01 .jjr-booking-widget input[type="checkbox"],
.s-reserve-01 .jjr-booking-widget input[type="radio"],
.s-reserve-01 .jjr-confirmation-widget input[type="checkbox"],
.s-reserve-01 .jjr-confirmation-widget input[type="radio"] {
  accent-color: var(--color-primary);
  border-color: var(--color-border);
}

/* ── 同意リストは唯一ネイティブ<ol>番号を残す例外 ── overrides: .jjr-consent__list li::marker
   バッジ(::before)は上のリーク遮断ブロックで既に content:none !important 済み。
   style.css の `.entry-content ol:not([class*="c-"]):not([class*="s-"])` が
   効かせる list-style-type:decimal はそのまま残し（"jjr-consent__list" は
   "c-"/"s-" を含まず除外条件に掛からない＝結果的に都合よく decimal が出る）、
   ::marker の色だけサイトトーンに合わせる。 */
.s-reserve-01 .jjr-consent__list li::marker {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold, 700);
}

/* ── 確認モーダル ── overrides: .jjr-modal-content / .jjr-modal-backdrop
   背景・角丸・シャドウはカスタムプロパティで解決済み。追加調整なし。 */

/* ── 予約完了ページ ── overrides: .jjr-confirmation-container / .jjr-status-*
   カード背景・角丸・シャドウ・成功アイコン・成功系バッジは上の
   --jjr-success-*/--jjr-warning-* remap で primary 系に解決済み。ただし
   保留中バッジ（.jjr-status-warning/.jjr-status-yellow）だけは文字色が
   `color:#92400e` とハードコードされておりカスタムプロパティを経由しない
   （実測で確認済み）ため、ここだけ明示的に上書きする。予約番号の強調も補強。 */
.s-reserve-01 .jjr-booking-number-value {
  color: var(--color-primary);
}

.s-reserve-01 .jjr-status-warning,
.s-reserve-01 .jjr-status-yellow {
  color: var(--color-primary-dark);
}

/* ============================================
   §4.4 余白・整列（2026-09-04 UX改善design spec）
   ============================================ */

/* 縦リズム: 見出し→lead=xs、lead→本文=xl、本文→ボタン行=3-xl。
   overrides: .jjr-step-head/.jjr-step-lead/.jjr-step-nav
   （プラグイン既定の --jjr-spacing-* 値は spec の数値と不一致のため上書き） */
.s-reserve-01 .jjr-step-head { margin-bottom: var(--space-xs); }
.s-reserve-01 .jjr-step-lead { margin-bottom: var(--space-xl); }
.s-reserve-01 .jjr-step-nav { margin-top: var(--space-3-xl); }

/* フォーム項目間=2-xl、ラベル→入力=xs、入力→補助文=3-xs。
   overrides: .jjr-form/.jjr-form-group.jjr-field/.jjr-field-head/.jjr-hint/
   .jjr-error-message（.jjr-form-groupは単一gapしか持たず非対称リズムを
   表現できないため gap:0 にして margin で組み直す） */
.s-reserve-01 #jjr-customer-form.jjr-form { gap: var(--space-2-xl); }
.s-reserve-01 .jjr-form-group.jjr-field { gap: 0; }
.s-reserve-01 .jjr-field-head { margin-bottom: var(--space-xs); }
.s-reserve-01 .jjr-hint.jjr-field-hint,
.s-reserve-01 .jjr-error-message.jjr-field-error { margin-top: var(--space-3-xs); }
.s-reserve-01 .jjr-char-counter { font-size: var(--font-size-sm); color: var(--color-text-light); }

/* ⓘヘルプボタン: 22px固定→タッチターゲット確保、色は非活性=text-light・
   hover/focus=primary、フォーカスリングは共通 shadow-focus。
   overrides: .jjr-help */
.s-reserve-01 .jjr-help {
  width: var(--touch-target-min, 2.4rem);
  height: var(--touch-target-min, 2.4rem);
  color: var(--color-text-light);
}
.s-reserve-01 .jjr-help:hover { color: var(--color-primary); }
.s-reserve-01 .jjr-help:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px var(--color-primary-light));
  color: var(--color-primary);
}

/* ポップオーバーカード: padding/font-sizeをspecトークンへ（背景・角丸・
   シャドウはカスタムプロパティで解決済み）。幅は≤480px（プラグイン側で
   inset-inline:0に切替済み）を壊さぬよう481px以上でのみ頭打ち。
   overrides: .jjr-popover */
.s-reserve-01 .jjr-popover {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
}
@media (min-width: 481px) {
  .s-reserve-01 .jjr-popover { max-width: var(--content-width-xs); }
}

/* 使い方ダイアログ: z-indexをサイト内レイヤー基準（固定ヘッダー100の上、
   cv-modalと同じ110）に固定。幅content-width-md、手順アイコン列を固定幅で
   行揃え。角丸・背景・シャドウは --jjr-radius-xl=--radius-lg 等で解決済み。
   overrides: .jjr-modal/.jjr-guide-modal__content/.jjr-guide-step */
.s-reserve-01 .jjr-modal { z-index: 110; }
.s-reserve-01 .jjr-guide-modal__content { max-width: var(--content-width-md); }
.s-reserve-01 .jjr-guide-step {
  display: grid;
  grid-template-columns: var(--space-4-xl) 1fr;
  column-gap: var(--space-xs);
  row-gap: 0;
}
.s-reserve-01 .jjr-guide-step-icon { justify-self: center; }

/* 文字階層: 見出し=2-xl+mincho、ラベル=md+bold、lead/hint=sm+text-light。
   overrides: .jjr-step-title/.jjr-label/.jjr-step-lead/.jjr-hint
   （プラグインの --jjr-font-size-* はpx固定でテーマのフルードスケールと
   連動しないため個別に明示する） */
.s-reserve-01 .jjr-step-title {
  font-size: var(--font-size-2-xl);
  font-family: var(--font-family-jp);
}
.s-reserve-01 .jjr-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.s-reserve-01 .jjr-step-lead,
.s-reserve-01 .jjr-hint.jjr-field-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* カレンダー/タイムスロット: 列ギャップをxsに統一、凡例2種をグリッド左端に
   揃える（既定はcenter）。列を minmax(0,1fr) にして、gap拡大（2px→8px）分だけ
   トラックが最小コンテンツ幅未満に縮めず本当にはみ出す事故を防ぐ
   （はみ出すと祖先 .jjr-calendar-container の overflow-x:auto と
   組み合わさり、スクロール開始側の padding が無視され左端がズレる —
   実測で確認済み）。640px未満（縦積み時）はカレンダー側の内側余白と
   同じ分だけタイムスロット側にも足して左端を一致させる（640px以上は左右
   2カラムに分かれるため対象外）。
   overrides: .jjr-calendar-grid/.jjr-calendar-weekdays/.jjr-calendar-legend* /
   .jjr-timeslots */
.s-reserve-01 .jjr-calendar-grid,
.s-reserve-01 .jjr-calendar-weekdays {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-xs);
}
.s-reserve-01 .jjr-calendar-legend-head,
.s-reserve-01 .jjr-calendar-legend { justify-content: flex-start; }
/* タイムスロット欄はプラグイン側が padding 0（カレンダー側は --jjr-spacing-md=16px）
   のため、全幅で同じ内側余白を与えて格子の左端を一致させる。入場アニメーションの
   translateX(10px) は計測中に左端がずれて見えるため、フェードのみに差し替える。 */
.s-reserve-01 .jjr-timeslots {
  padding-inline: var(--space-xl);
  animation-name: jjr-fadeIn;
}

/* 確認モーダル・完了ページの詳細行を2列グリッド(8rem/1fr)化、行間md。
   確認モーダルは <p><strong>label:</strong> <span>value</span></p> という
   フラット構造のため strong/span をそのまま列として使う。次にやることリストは
   アイコン列を固定幅化。
   overrides: .jjr-confirm-details p/.jjr-detail-row/.jjr-next-steps */
.s-reserve-01 .jjr-confirm-details p {
  display: grid;
  grid-template-columns: 8rem 1fr;
  column-gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.s-reserve-01 .jjr-confirm-details p:last-child { border-bottom: none; }
.s-reserve-01 .jjr-confirm-details p strong {
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
}
.s-reserve-01 .jjr-detail-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  column-gap: var(--space-sm);
  padding: var(--space-md) 0;
}
.s-reserve-01 .jjr-next-steps { gap: var(--space-md); }
.s-reserve-01 .jjr-next-steps li {
  display: grid;
  grid-template-columns: var(--space-4-xl) 1fr;
  column-gap: var(--space-xs);
  align-items: start;
}
.s-reserve-01 .jjr-next-steps li .material-icons-outlined { justify-self: center; }

/* 角丸統一: カード系=md（既定lgだったものを揃える）、ボタン=pill（既定md
   だったものをサイト規約のピル形状に揃える。.jjr-guide-btnは既に
   radius-full=pillで解決済み）。
   overrides: .jjr-booking-container/.jjr-booking-summary-card/
   .jjr-confirmation-container/.jjr-btn */
.s-reserve-01 .jjr-booking-container,
.s-reserve-01 .jjr-booking-summary-card,
.s-reserve-01 .jjr-confirmation-container { border-radius: var(--radius-md); }
.s-reserve-01 .jjr-btn { border-radius: var(--radius-pill); }

/* ============================================
   §4.5 アクセシビリティ: コントラスト / タッチターゲット（2026-09-04 実測）
   ============================================ */

/* コントラスト: 白文字 on --color-primary(#C4898A) は実測 2.88:1 で
   WCAG AA(4.5:1)未達。primary系のうち「白文字を乗せる背景」だけを
   primary-dark(#8B6069・白文字で約5.3:1)へ切り替える。ラベル/リンク等の
   文字色としての --color-primary は変更しない。進捗のアクティブ丸・
   月/週表示トグルも同じ primary-dark に揃えてトーンを一致させる。
   overrides: .jjr-btn-primary（#jjr-confirm-submit・ガイド/確認モーダルの
   ボタンも同一クラスのため自動的に含まれる）/ .jjr-calendar-day.selected /
   .jjr-progress-step.active .jjr-progress-step-circle / .jjr-view-btn.active */
.s-reserve-01 .jjr-btn-primary {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.s-reserve-01 .jjr-btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary-dark) 85%, black);
  border-color: color-mix(in srgb, var(--color-primary-dark) 85%, black);
}

.s-reserve-01 .jjr-calendar-day.selected {
  /* プラグイン側が同じ .jjr-calendar-day.selected に !important で
     background を指定しているため、上書きにも !important が必要
     （詳細度は .s-reserve-01 分こちらが高いので !important 同士でも勝てる）。 */
  background: var(--color-primary-dark) !important;
}

.s-reserve-01 .jjr-progress-step.active .jjr-progress-step-circle {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.s-reserve-01 .jjr-view-btn.active {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* disabled ボタンは既存の primary-light 背景 + text-light 文字のまま
   （実測4.55:1で適合）。:disabled は上の .jjr-btn-primary より詳細度が
   高く保たれているので変更不要（確認のみ）。 */

/* タッチターゲット（WCAG 2.2 ≥24px）: 同意チェックボックスが20×20pxで未達
   （実測）。24pxへ拡大し、ラベル行全体も44px以上の当たり判定にして
   チェックボックスと文字を縦中央揃えにする。
   overrides: #jjr-consent-agree / .jjr-consent__agree */
.s-reserve-01 #jjr-consent-agree {
  width: 2.4rem;
  height: 2.4rem;
}

.s-reserve-01 .jjr-consent__agree {
  align-items: center;
  min-height: 4.4rem;
}

/* 「使い方」ガイドの電話番号リンクが19px丈でタッチターゲット未達（実測）。
   inline-flex の align-items 中央寄せをやめ、line-height で縦中央に
   揃え直す（gap も併せて失うのでアイコン側に代わりの余白を足す）。
   overrides: .jjr-guide-phone */
.s-reserve-01 .jjr-guide-phone {
  display: inline-block;
  padding-block: var(--space-2-xs);
  min-height: 2.4rem;
  line-height: 2.4rem;
}
.s-reserve-01 .jjr-guide-phone .material-icons-outlined {
  margin-right: var(--space-4-xs);
}

/* ============================================
   レスポンシブ（SP 390px でのはみ出し防止）
   ============================================ */
@media (max-width: 480px) {
  /* カレンダーグリッドは repeat(7, 1fr) で自己収縮するため通常ははみ出さないが、
     セル最小高さ(48px)との兼ね合いで極端に狭い端末幅でも横スクロールで
     救済できるよう、保険としてコンテナを overflow-x: auto にしておく。 */
  .s-reserve-01 .jjr-calendar-container {
    overflow-x: auto;
  }

  .s-reserve-01 .jjr-calendar-grid {
    min-width: 280px;
  }

  /* 時間帯ボタングリッド（auto-fill, minmax(80px,1fr)）も同様に保険をかける。 */
  .s-reserve-01 .jjr-timeslot-grid {
    overflow-x: auto;
  }
}