/*
 * 客用チャットボット — Design Token 層（S15-A / M1）
 *
 * 出典: docs/design/07_customer_chat_design_tokens.md
 *       （原典 = 受領資料「G-FRONT 客用チャットボット メンエス版 Design Token定義 20260814」）
 * ★値は一切創作していない。原典に無いものは定義せず、理由をコメントで明示する。
 *
 * ■ なぜ Tailwind ビルドに載せないのか
 *   既存 G-FRONT のテーマは brand × mode の2軸（data-theme × data-mode）で、
 *   brand = アプリ領域（store/admin/customer/…）を指す。一方この正本の brand は
 *   「加盟店ごとのアクセントカラー」で、意味が衝突する（07 §1）。
 *   さらに店舗色は DB で実行時に決まるためビルド済CSSへ焼けない。
 *   → 客用チャットは独立したトークン層を持つ。素のCSSなのでビルド不要
 *     （= クローン直後に CSS が無く全画面が素のHTMLになる、という既知の罠を踏まない）。
 *
 * ■ Phase 1 はライトモードのみ（07 §1 / DEC-608）。ダークモードは初期実装しない。
 *   将来のテーマ追加に備え、色は必ず Semantic Token 経由で参照すること。
 *
 * ■ 店舗ブランドカラー（--color-brand-*）はここで定義しない。
 *   サーバーが PHP 側（App\CustomerChat\Design\BrandPalette）で
 *   コントラスト補正した結果を <html style="--color-brand-…"> へ実行時注入する。
 *   ここに既定値を書くと、注入に失敗したとき「読めない配色のまま表示される」ため書かない。
 */

:root {
  color-scheme: light;

  /* ===== 2.1 ニュートラル・表面・文字（§4.1） ===== */
  --color-bg-canvas: #F7F8FA;
  --color-surface-card: #FFFFFF;
  --color-surface-subtle: #F2F4F7;
  --color-text-primary: #1F2937;
  --color-text-secondary: #667085;
  --color-text-disabled: #98A2B3;
  --color-border-default: #D0D5DD;
  --color-divider: #EAECF0;
  --color-overlay-scrim: rgba(16, 24, 40, 0.48);

  /* ===== 2.3 Semantic Color（§4.3・全店舗共通・変更不可） =====
     ★店舗カラーをここへ転用することは禁止（07 §2.2 の禁止事項）。 */
  --color-success: #067647;
  --color-success-subtle: #ECFDF3;
  --color-warning: #B54708;
  --color-warning-subtle: #FFFAEB;
  --color-error: #B42318;
  --color-error-subtle: #FEF3F2;
  --color-info: #175CD3;
  --color-info-subtle: #EFF8FF;

  /* ===== 2.4 Typography（§5） =====
     店舗独自フォントは不可（ロゴ等の画像素材のみ）。 */
  --font-family-ui: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
    "Yu Gothic", "Meiryo", system-ui, sans-serif;

  --font-size-display: 24px;
  --font-line-display: 32px;
  --font-weight-display: 700;

  --font-size-screen-title: 20px;
  --font-line-screen-title: 28px;
  --font-weight-screen-title: 700;

  --font-size-card-title: 18px;
  --font-line-card-title: 26px;
  --font-weight-card-title: 700;

  --font-size-body: 16px;
  --font-line-body: 24px;
  --font-weight-body: 400;

  --font-size-label: 14px;
  --font-line-label: 20px;
  --font-weight-label: 500;

  /* ★意味のある文字は 14px 未満にしない（§5） */
  --font-size-caption: 14px;
  --font-line-caption: 20px;
  --font-weight-caption: 400;

  /* amount は 18〜22px の範囲指定。下限を初期値に採る（範囲の中央値は原典に無いため創作しない） */
  --font-size-amount: 18px;
  --font-weight-amount: 700;

  /* ===== 2.5 Spacing（§6） ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ===== 2.6 Radius・Border・Shadow（§7） ===== */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 999px;

  --border-default: 1px solid var(--color-border-default);
  /* border.selected は brand.action を参照する。注入前は視認できる中立色へ落とす */
  --border-selected-width: 2px;

  --shadow-card-default: 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-card-emphasis: 0 4px 12px rgba(16, 24, 40, 0.12);
  --shadow-sticky: 0 -2px 10px rgba(16, 24, 40, 0.08);
  --shadow-modal: 0 16px 36px rgba(16, 24, 40, 0.20);

  /* ===== 2.7 Size・Touch Target（§8） ===== */
  --size-control-touch-min: 44px;
  --size-button-primary-height: 48px;   /* 48〜52px の下限 */
  --size-button-secondary-height: 44px; /* 44〜48px の下限 */
  --size-header-mobile: 56px;           /* 52〜56px */
  --size-icon-small: 16px;
  --size-icon-default: 20px;
  --size-icon-large: 24px;
  --size-input-min-height: 48px;

  /* ===== 2.8 Layout・Responsive（§9） ===== */
  --layout-content-max: 720px;   /* Desktop 本文 720〜760px の下限 */
  --layout-breakpoint: 768px;    /* 参照用（メディアクエリには直接使えない） */
  --width-chat-bubble-max: 80%;  /* 80〜85% の下限 */

  /* ===== 2.9 Image（§10） ===== */
  --image-therapist-aspect: 3 / 4; /* 縦長3:4・全カードで統一 */
  /* 案内写真（S20-G3c-2）。★トークン仕様は `image.therapist.aspect` しか定めていないので
     当方で用意した（DEV-102）。★横長にしたのは、建物・入口・目印・道順のどれも
     「まわりに何があるか」が要るため（縦長だと目印が画角から外れる）。 */
  --image-guidance-aspect: 4 / 3;

  /* ===== 2.10 Motion（§11） ===== */
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 180ms;
  --motion-duration-slow: 240ms; /* 画面／ボトムシート遷移の上限 */
  --motion-easing-standard: cubic-bezier(0, 0, 0.2, 1); /* ease-out 相当 */

  /* ===== 2.11 Z-index（§14） ===== */
  --z-base: 0;
  --z-sticky: 100;
  --z-drawer: 300;
  --z-scrim: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ===== 3. チャット固有トークン（§17A）のうち寸法系 =====
     ★色（--color-chat-{ai,store,customer,system}-*）はここで定義しない。
       原典は「既存 Semantic の別名として定義」とのみ記し、どの Semantic を割り当てるかを
       明示していない。推測で割り当てると創作になるため M4（店舗メッセージ）で確定させる。
       送信者は色だけで区別しない（アイコン・ラベル・境界・形状・位置を併用）のが大原則。 */
  --size-chat-avatar: 32px;
  --size-chat-avatar-compact: 24px;

  --font-size-chat-sender: 14px;
  --font-line-chat-sender: 20px;
  --font-weight-chat-sender: 600;

  --font-size-chat-meta: 14px;
  --font-line-chat-meta: 20px;
  --font-weight-chat-meta: 400;

  --space-chat-avatar-gap: 8px;
  --space-chat-group-gap: 4px;   /* 同一送信者の連続 */
  --space-chat-sender-gap: 12px; /* 送信者が変わる */

  --radius-chat-bubble: 12px;
  --radius-chat-bubble-tail: 4px;

  --height-chat-participant-status: 28px; /* 28〜32px の下限 */
  --height-chat-unread-divider: 24px;     /* 24〜28px の下限 */
  --height-chat-new-message-jump: 44px;   /* 44px 以上 */
  --opacity-chat-typing: 0.72;

  --font-size-corrected-label: 14px;
  --font-line-corrected-label: 20px;
  --font-weight-corrected-label: 500;
  --opacity-corrected-original: 0.68;

  --size-attachment-thumb: 96px; /* 96〜144px の下限 */

  /* ===== Safe Area（§9） ===== */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ============================================================
   ベース
   ============================================================ */

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

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

body.cc {
  margin: 0;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body);
  line-height: calc(var(--font-line-body) / var(--font-size-body));
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  /* ★通常画面で横スクロールを起こさない（§9） */
  overflow-x: hidden;
}

/* 本文は原則左揃え。長文の中央揃えは禁止（§5） */
.cc p,
.cc li,
.cc dd {
  text-align: left;
}

/* 店舗名と短い完了見出しのみ中央可。
   ★上の `.cc p, .cc li, .cc dd` は要素セレクタを含むぶん `.cc-center` 単体より
     詳細度が高く、**後に書いても勝てない**。9箇所すべてが <p> なので、
     一度も中央寄せになっていなかった（2026-08-27 実機で判明）。
     → `.cc` を前置してクラス2つにし、詳細度で上回らせる。 */
.cc .cc-center {
  text-align: center;
}

/* ============================================================
   タイポグラフィのユーティリティ（トークンと1対1）
   ============================================================ */

.cc-display {
  font-size: var(--font-size-display);
  line-height: calc(var(--font-line-display) / var(--font-size-display));
  font-weight: var(--font-weight-display);
  margin: 0;
}

/* ★案内番号の `tel:` リンク（§8.6・S20-G3）。ブラウザ既定の青＋下線だと
   Design Token の外の色が 1 箇所だけ入り、同じカードの他の文字と揃わない。
   ★**下線は残す**——押せる（電話をかけられる）ことが分かるのはこの画面の要点。 */
.cc-display a {
  color: inherit;
}

.cc-screen-title {
  font-size: var(--font-size-screen-title);
  line-height: calc(var(--font-line-screen-title) / var(--font-size-screen-title));
  font-weight: var(--font-weight-screen-title);
  margin: 0;
}

.cc-card-title {
  font-size: var(--font-size-card-title);
  line-height: calc(var(--font-line-card-title) / var(--font-size-card-title));
  font-weight: var(--font-weight-card-title);
  margin: 0;
}

.cc-label {
  font-size: var(--font-size-label);
  line-height: calc(var(--font-line-label) / var(--font-size-label));
  font-weight: var(--font-weight-label);
}

.cc-caption {
  font-size: var(--font-size-caption);
  line-height: calc(var(--font-line-caption) / var(--font-size-caption));
  font-weight: var(--font-weight-caption);
  color: var(--color-text-secondary);
}

/*
 * 予約の要点（S17-F・2026-08-27 指摘）。
 *
 * ★<p> の既定マージン（1em）がそのまま効いて、日時・指名・コース・合計の4行が
 *   間延びしていた。ここは**ひとかたまりで読ませたい**情報なので行間を詰める。
 * ★見出しとの間だけは逆に広げる（.cc-result-title）。かたまりの境目が分かるように。
 */
.cc-reservation-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cc-reservation-summary > * {
  margin: 0;
}

/*
 * 「予約が確定しました」「〈予約確定〉」（S17-F・2026-08-27 指摘）。
 *
 * ★赤は Design Token の Error 色をそのまま使う。**Danger 用の新しい赤を作らない。**
 *   ここでの赤は「危険」ではなく、その画面でいちばん伝えたい結果の強調。
 */
.cc-result-title {
  color: var(--color-error);
  margin: 0 0 var(--space-6);
}

.cc-amount {
  font-size: var(--font-size-amount);
  font-weight: var(--font-weight-amount);
  color: var(--color-text-primary);
}

/* ============================================================
   面・カード
   ============================================================ */

.cc-card {
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-default);
  padding: var(--space-4);
}

/* カードが続くときは離す（S17-C）。
   ★.cc-status は margin を持っているのに .cc-card は持たず、
     カードどうしだけが密着して境界が読み取りにくかった。間隔は .cc-status と揃える。
   ★隣接セレクタなので、単独のカードには余白が付かない。 */
.cc-card + .cc-card {
  margin-top: var(--space-3);
}

/* 選択中・重要カードは影を1段階だけ強める（§7・多重ネスト禁止） */
.cc-card--selected {
  border: var(--border-selected-width) solid var(--color-brand-action, var(--color-text-primary));
  box-shadow: var(--shadow-card-emphasis);
}

/* §9.1 コースカードの「所要時間」と「料金」を1行に並べる（S17-G）。
   ★`<p>` のまま使う。`.cc-card > p + form` の余白規則に乗せ続けるため
     （`div` にすると選ぶボタンとの間隔が消える）。
   ★baseline で揃える。料金だけ文字が大きいので、中央揃えだと数字が浮いて見える。 */
.cc-course-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* §10.1 オプション選択の□（AUD-011A）。
   ★押せる範囲を行全体にする（小さな□だけが押せると、スマホで外しやすい）。
   ★名前・料金・延びる時間・説明は独立した要素のまま縦に積む（正本 §6.4「説明文へ埋め込まない」）。 */
.cc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-default);
  cursor: pointer;
}

.cc-check input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex: none;
}

.cc-check > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

.cc-check__desc {
  flex-basis: 100%;
}

.cc-surface-subtle {
  background: var(--color-surface-subtle);
}

.cc-divider {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-3) 0;
}

/* ============================================================
   Semantic（状態表示）
   ============================================================ */

.cc-status {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-label);
  line-height: calc(var(--font-line-label) / var(--font-size-label));
}

.cc-status--success { background: var(--color-success-subtle); color: var(--color-success); }
.cc-status--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.cc-status--error   { background: var(--color-error-subtle);   color: var(--color-error); }
.cc-status--info    { background: var(--color-info-subtle);    color: var(--color-info); }

/* ============================================================
   操作要素（44×44px 以上・§8）
   ============================================================ */

/*
 * ★★ ボタンの配色ルール（S17-K → S17-L で色を差し替え・2026-08-28 眞鍋さん 指示）
 *
 *   進む系（選ぶ・変更する・次へ・確認・送る）… グリーン `--color-btn-go`   #167C49
 *   戻る系（戻る・最初から）・その他・迷ったら … グレー   `--color-btn-back` #888888
 *   確定系（確定・決定）                      … オレンジ `--color-warning`  #B54708
 *   アラート系（キャンセル・やり直す）        … レッド   `--color-error`    #B42318
 *
 * ★**文字はすべて白・枠なし。**
 * ★hover / active は**色を足さず** `filter: brightness()` で暗くする。
 *   色を1つ足すたびに「どこで使う色か」を決め直すことになるので増やさない。
 *
 * ⚠⚠ **進む系とグレーの2色は Design Token の外にある**（S17-L）。
 *    S17-K では `--color-info`（#175CD3・ブルー）と `--color-text-secondary`（#667085）を
 *    使っていたが、2026-08-28 に「**ブルーをグリーンへ／彩度は少し下げる／
 *    グレーは青みを抜いて #777 に**」と指示があり、**原典に無い値になった。**逸脱ログ DEV-058。
 *    ★**`--color-text-secondary` 自体は変えていない。**注記・「未選択」の文字色は従来どおり。
 *      ボタンの背景だけを別の変数に分けてある（戻すときはこの2行だけ）。
 *
 * ⚠ **`#888888` は白文字とのコントラストが 3.54:1 で、WCAG AA（4.5:1）を満たさない。**
 *   ご指示の値をそのまま使っている（2026-08-28「コントラストは気にしないで」）。**AA を満たすなら `#757575`（4.61:1）。**
 */

:root {
  /* ★Design Token の外。上の警告を読むこと。 */
  --color-btn-go: #167C49;   /* HSL 150/70%/28.5% ・白文字 5.23:1 */
  /* ⚠ S17-N（2026-08-28）で副次CTA が「白＋薄い枠」になり、**画面に出るボタンでは
       使われなくなった**（参照は未使用の基底 `.cc-btn` のみ）。★値は残してある——
       グレー塗りへ戻す判断になれば `.cc-btn--secondary` の数行で復帰できる。 */
  --color-btn-back: #888888; /* HSL 0/0%/53.3%    ・白文字 3.54:1（AA 未達・眞鍋さん 承知のうえ） */
}

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-button-secondary-height);
  min-width: var(--size-control-touch-min);
  /* ★上下にも余白を持たせ、文言が 2 行になったら中央でそろえる（2026-10-29・幅 320～375 で確認）。
     ［本日の予約（到着のご連絡・お部屋番号）へ］などが折り返すと、左寄せで枠の上下に文字が付いていた。
     1 行のボタンは min-height のほうが大きいので高さは変わらない。 */
  padding: var(--space-2) var(--space-4);
  text-align: center;
  text-wrap: balance;
  border-radius: var(--radius-card);
  /* ★枠なし・白文字（2026-08-28 指示）。既定はグレー＝「迷ったらグレー」。 */
  border: none;
  background: var(--color-btn-back);
  color: #fff;
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-label);
  /* ★下線を出さない。`.cc-btn` は <a> にも <button> にも付くので、素のままだと
     リンクのときだけ下線が出て**同じ並びのボタンで見た目が食い違う**（2026-08-27 指摘）。 */
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}

.cc-btn:hover { filter: brightness(0.92); }
.cc-btn:active { filter: brightness(0.86); }

/* 進む系（主要CTA）＝★**店舗ブランドカラー**（S17-N・2026-08-28）。
   ★受領済みの採用デザイン基準（`E_Adopted v03`）が「主要CTA・送信ボタン＝店舗アクセントカラーの塗り」
     としており、Design Token §4.2 の `color.brand.action` はそのための変数。**基準へ戻した。**
   ★★**S17-K〜M の「役割で色分け」は捨てていない。**確定＝オレンジ／取消＝レッド／戻る＝グレーは
     そのまま残っている（基準も危険＝赤なので矛盾しない）。変えたのは進む系の 1 色だけ。
   ⚠ 店舗色が未設定なら `--color-btn-go`（グリーン）へフォールバックする。
     ★**ここを `--color-text-primary` にしない。**未設定の店舗で主要CTAが灰色になり、
     どれが主要CTAなのか分からなくなる（S17-K 以前の状態へ戻ってしまう）。
   逸脱ログ DEV-058 の追記を参照。 */
.cc-btn--primary {
  min-height: var(--size-button-primary-height);
  background: var(--color-brand-action, var(--color-btn-go));
  color: var(--color-brand-on-action, #ffffff);
  font-weight: 700;
  width: 100%;
}

/* 二者択一の「もう一方」＝★**塗りは主要CTAのまま、文字色だけ変える**（S17-O・2026-08-28 指示）。
   ★使うのは §6.1 の［指名する］／［フリーで予約する］のように、**どちらを選んでも正しい**
     選択肢が並ぶ場面だけ。★**片方を副次CTA（白＋薄い枠）にしない**——
     「指名するのが推奨」という主従が生まれ、対等な二者択一でなくなる。
   ⚠⚠ **`#FFF3C4` は Design Token の外の値**（原典に無い・逸脱ログ DEV-060）。
     店舗色 `#5B4FC7` の塗りに対して **5.57:1** で WCAG AA（4.5:1）を満たす。
   ★★**「塗りの色を少し薄くする」案は採らなかった。**`#7C72D6` まで明度を上げると
     白文字が **4.01:1** で AA を割る（2026-08-28 実測）。**紫は薄くすると急に読めなくなる。**
   ★ボタン内の補足文も同じ色になる（`.cc-btn .cc-caption { color: inherit }`）。
   ★詳細度は 0,2,0。`.cc-btn--primary` と同じ 0,1,0 にすると**宣言順しだいで負ける**
     （S17-F の `.cc-center` と同じ罠）。無効時は `.cc-btn--primary[disabled]` が後勝ちする。 */
.cc-btn--primary.cc-btn--alt {
  color: #FFF3C4;
}

/* 戻る系・その他＝★**白＋薄い枠＋濃い文字**（S17-N・2026-08-28 指示）。
   ★採用デザイン基準（`E_Adopted v03`）が「主要CTA だけを塗り、副次は白＋薄い枠」としている。
     Design Token §17 の合格基準 2「**強い主要CTAが乱立していない**」もこの形を求める。
   ⚠ 全部を塗ると、どれが次の一手なのか色から読めなくなる（S17-K〜M の状態）。
   ★★**無効なボタンと見分けが付くこと**が条件。無効は薄グレー背景＋**薄い文字**
     （`.cc-btn[disabled]`）で、こちらは白背景＋**濃い文字**。背景だけでなく
     文字色でも差が出るようにしてある。**片方だけにすると区別できなくなる。**
   ⚠ グレー塗り（`--color-btn-back`）はこれで画面から消えるが、**変数は残してある**
     （戻す判断になれば数行で復帰できる）。 */
.cc-btn--secondary {
  min-height: var(--size-button-primary-height);
  width: 100%;
  background: var(--color-surface-card);
  border: var(--border-default);
  color: var(--color-text-primary);
  font-weight: 700;
}

/* 確定系（オレンジ）。★**不可逆な確定だけ**に使う（予約の確定・変更の確定）。
   進む系と同じブルーにすると「まだ先がある」ように見える。 */
.cc-btn--commit {
  min-height: var(--size-button-primary-height);
  width: 100%;
  background: var(--color-warning);
  font-weight: 700;
}

/* 表の行に置く小さなボタン（S17-J・2026-08-28 指摘）。
   ★［変更する］［…を修正］は**リンクではなくボタンの見た目**にする。
     下線つきの青文字だと「文章の一部」に見えて、押せることが伝わりにくい。
   ★上下の余白を半分に詰めた（44px → 32px・2026-08-28 指示）。
     WCAG 2.2 AA の最小操作サイズ（24×24px）は満たすが、**AAA の 44px は下回る。**
   ★横も詰める（`--space-3`）。「コースを修正」でも1行に収まる。
   ★色は進む系のブルー（変更する・…を修正はどれも前進の操作）。 */
.cc-btn--inline {
  width: auto;
  min-height: calc(var(--size-button-secondary-height) - var(--space-3));
  padding: 0 var(--space-3);
  /* ★副次CTA と同じ「白＋薄い枠＋濃い文字」（S17-N・2026-08-28 指示）。
     表の行に置く小さな操作は主要CTAではないので、店舗色でも進む系でも塗らない
     （塗ると 1 画面に強い CTA が乱立し、次の一手が読めなくなる）。 */
  background: var(--color-surface-card);
  border: var(--border-default);
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
}

/* ★見た目は 32px のまま、押せる範囲だけ上下 6px ずつ広げて 44px にする（S28-K3-G・REQ-CUST-0345「見た目が小さくても周囲に透明なタップ領域」）。
   ★2026-08-28 の指示（余白を詰める）は見た目の話なので変えない。 */
.cc-btn--inline {
  position: relative;
}
.cc-btn--inline::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

/* 白系ボタンの hover / active（S17-N）。
   ★基底の `filter: brightness()` は**塗り前提**で、白地ではほとんど変化が見えない。
     背景を一段落とすほうが「反応した」ことが伝わる。
   ★`.cc-btn:hover` と詳細度が同じ（0,2,0）なので**後に書いて勝たせる**。
     ⚠ `.cc-btn[disabled]:hover` はさらに後ろにあるため、無効時はそちらが勝つ（意図どおり）。 */
.cc-btn--secondary:hover,
.cc-btn--inline:hover {
  background: var(--color-surface-subtle);
  filter: none;
}

.cc-btn--secondary:active,
.cc-btn--inline:active {
  background: var(--color-surface-subtle);
  filter: brightness(0.96);
}

/* ★ボタンの中の補足文（S17-K）。
   `.cc-caption` は `--color-text-secondary`（グレー）なので、**塗ったボタンの上では読めない。**
   実際 §6.1 の［指名する］［フリーで予約する］の説明が青地に沈んだ（2026-08-28 実測）。
   ★色を足さず親の白を継承させる。少しだけ落として本文との差は残す。 */
.cc-btn .cc-caption {
  color: inherit;
  opacity: 0.9;
}

/* ★無効なボタンの中では、親（グレー文字）をそのまま継承させる。 */
.cc-btn[disabled] .cc-caption {
  opacity: 1;
}

/* form で包んだボタンも、単体のボタンと同じ幅で並ぶようにする
   （CTA 領域は縦積み。form が inline のままだと幅が揃わない） */
.cc-cta__inner form { display: block; width: 100%; }
/* カード内の form も同じ扱い。ボタンの幅がカードに合わない状態を作らない。 */
.cc-card > form { display: block; width: 100%; margin: 0; }

/* カードの中に操作を縦へ並べたときの間隔（S17-C）。
   ★CTA 領域（.cc-cta__inner）は gap を持つが、カードの中には無く、
     ボタンどうしが密着していた（2026-08-26 のステージング実機で指摘）。
   ★**下ではなく上に**マージンを置く。こうするとボタンとその直後の説明文
     （aria-describedby で結び付いている cc-caption）は近いまま、
     次の操作との間だけが空く。最後の要素に余分な余白も残らない。
   ★直接の子に限定する。選択肢の一覧（.cc-choice-list）は自前の gap を持っており、
     そちらへ二重に効かせない。 */
.cc-card > .cc-btn + .cc-btn,
.cc-card > form + .cc-btn,
.cc-card > p + .cc-btn,
.cc-card > form + form,
.cc-card > p + form,
.cc-card > .cc-btn + form {
  margin-top: var(--space-4);
}

/* カードに入れず本文へ直接ボタンを縦積みしたときの間隔（S17-F）。
   ★`.cc-main` には gap が無く、ボタンどうしが密着していた
     （§11.1「ほかの時間を見る」と「時間を自由に入力」・2026-08-27 実機で指摘）。
   ★カード内（上のブロック）と同じく**下ではなく上に**置く。直後の説明文
     （aria-describedby で結び付く .cc-caption）は近いまま、操作どうしだけが空く。
   ★直接の子に限定する。カード・チップ列・CTA 領域は自前の間隔を持っている。 */
.cc-main > .cc-btn + .cc-btn {
  margin-top: var(--space-4);
}

/* 操作できないことは「薄くする」のではなくトークンで明示する。
   ★色つきの各モディファイアより詳細度が高い（クラス＋属性）ので後勝ちになる。
   ここを外すと、押せないボタンが押せる見た目のまま出る（D-76 に反する）。
   ★**ここだけは枠を残す**（S17-K）。ほかのボタンは塗りで存在感を出しているので、
     薄いグレーの塗りだけだとカードの白地に沈んで**ボタンだと分からなくなる。** */
.cc-btn[disabled],
.cc-btn--primary[disabled] {
  background: var(--color-surface-subtle);
  color: var(--color-text-disabled);
  border: var(--border-default);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1; /* 既定の薄化に頼らず、意味色で示す */
}

/* 無効時は hover/active でも見た目を変えない（反応するように見せない）。
   ★`filter` も戻す（S17-K で hover に brightness を入れたため）。 */
.cc-btn[disabled]:hover,
.cc-btn[disabled]:active,
.cc-btn--primary[disabled]:hover,
.cc-btn--primary[disabled]:active {
  background: var(--color-surface-subtle);
  filter: none;
}

/* アイコンのみのボタンも透明領域で 44×44 を確保（§8） */
.cc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-touch-min);
  height: var(--size-control-touch-min);
  border: none;
  background: transparent;
  color: inherit;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.cc-input {
  width: 100%;
  min-height: var(--size-input-min-height);
  padding: 0 var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-body);
}

/*
 * Danger 操作（S16-G / テキストワイヤー §18.1）。
 *
 * ★色は Design Token §4.3 の「Error / Danger」と同じ（#B42318 / #FEF3F2）。
 *   **Danger 専用の新しい色を作らない。**
 * ★§18.1「『OK』『はい』だけの曖昧CTAは禁止」＝**色だけで危険を伝えない。**
 *   文言側で何が起きるかを言い切る。
 */
.cc-btn--danger {
  /* ★体裁は primary / secondary と同じにする。**違うのは色だけ**（2026-08-27 指摘）。
     ここだけ幅・高さ・太さの指定が無く、フォームに入れると内容幅（実測 194px）に
     縮んで、隣のボタン（468px）と揃っていなかった。 */
  min-height: var(--size-button-primary-height);
  width: 100%;
  font-weight: 700;
  background: var(--color-error);
  color: #fff;
  /* ★枠は出さない（S17-K）。塗りだけで示す。 */
}

.cc-card--danger {
  background: var(--color-error-subtle);
  border-color: var(--color-error);
}

/* ============================================================
   開発段階①の動作確認用（S17-F・2026-08-27）

   ★**製品の一部ではない。**SMS を実送信しない間だけ出す仮の導線で、
     実ドライバへ差し替えると描画されなくなる（`FakeSmsSender` のときだけ出す）。
   ★色は Design Token を使わず、**わざと浮く赤**にしている。
     本物の Danger（予約の取消）と同じ色にすると取り違えるおそれがあるため。
   ============================================================ */

.cc-btn--dev,
.cc-dev-note {
  background: #e11900;
  color: #fff;
  line-height: 1.5;
  font-weight: 700;
}

.cc-btn--dev {
  width: 100%;
  min-height: var(--size-button-primary-height);
  /* ★文が長いので折り返させる。`.cc-btn` は上下 padding 0 なので、ここで足す。 */
  padding: var(--space-3) var(--space-4);
  border-color: #e11900;
  white-space: normal;
  text-align: center;
}

.cc-btn--dev:hover,
.cc-btn--dev:active {
  background: #b81400;
  border-color: #b81400;
}

.cc-dev-note {
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}

/*
 * 入力欄1つぶん（S16-F / テキストワイヤー §13.1）。
 * ★ラベルは入力後も消えない＝プレースホルダーで代用しない。
 */
.cc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

/* ★エラーは**対象欄の直下**（§13.1）。画面上部にまとめない。 */
/*
 * ★入力欄の直下に置く補足（「※ハイフンなし」など）。
 *   <p> の既定マージン（1em＝14px）がそのまま効いて `.cc-field` の gap 4px と合わせ
 *   **18px 空いていた**ので、上だけ詰めて 8px にした（2026-08-27 指摘・実測値）。
 * ★下の余白は触っていない。ここを 0 にすると欄と欄の間隔まで詰まる。
 */
.cc-field .cc-caption {
  margin-top: var(--space-1);
}

.cc-field-error {
  color: var(--color-error);
  font-size: var(--font-size-label);
}

/*
 * 自由入力欄（§29.1「内容を入力…」）。S16-J。
 *
 * ★`.cc-input` を流用しない。あちらは1行入力用に `padding: 0 …`（上下0）で
 *   `min-height` を効かせているので、複数行だと文字が上端に貼り付く。
 * ★`resize: vertical` … 横に広げられると本文が画面幅を超え、body に横スクロールが出る。
 */
.cc-textarea {
  width: 100%;
  min-height: calc(var(--size-input-min-height) * 3);
  padding: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-body);
  line-height: 1.6;
  resize: vertical;
}

/*
 * 受け付けた本文の再表示（§26.1「受付内容の要点」）。S16-J。
 *
 * ★顧客が書いたそのままを見せる場所。改行を保ち、長い1語でも折り返す
 *   （URL を貼られても横スクロールが出ない）。
 */
.cc-quote {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cc-input--invalid {
  border-color: var(--color-error);
}

.cc-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control-touch-min);
  padding: 0 var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  /* ★文字の色・書体・行の高さ・ボタンの既定の見た目を、端末（ブラウザ）の既定に任せない（ENG-05）。
     この部品は <button> にも <label> にも付く。<button> は文字色と書体を親から引き継がないため、
     指定しないと端末ごとの既定値になり、iPhone で時間の枠の文字が読めないという観測があった
     （原因は実機で未確定。`.cc-btn` と同じく、見え方に関わる値をここで決め切る）。
     ★`-webkit-text-fill-color` は Safari が `color` より優先して使う値。両方そろえる。 */
  color: var(--color-text-primary);
  -webkit-text-fill-color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-label);
  line-height: calc(var(--font-line-label) / var(--font-size-label));
  -webkit-appearance: none;
  appearance: none;
  opacity: 1;
  cursor: pointer;
}

/* ★通信が切れている間は送信ボタンを押せなくする（cc_offline_notice）。そのときも文字は読める濃さで残す。
   端末の既定（Safari は薄い灰色）に任せると、白地の枠の中で文字が消えたように見える。 */
.cc-chip[disabled] {
  color: var(--color-text-secondary);
  -webkit-text-fill-color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  opacity: 1;
  cursor: not-allowed;
}

/* ★時刻を読めない候補（REQ-CUST-1528）。送信のフォームを持たない枠なので、押せない見た目を同じ値で出す。 */
.cc-chip[aria-disabled="true"] {
  color: var(--color-text-secondary);
  -webkit-text-fill-color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  cursor: not-allowed;
}

.cc-chip--selected {
  border: var(--border-selected-width) solid var(--color-brand-action, var(--color-text-primary));
  background: var(--color-brand-subtle, var(--color-surface-subtle));
}

/* キーボード操作の可視化（アクセシビリティ） */
.cc :focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* ============================================================
   レイアウト（§9）
   ============================================================ */

.cc-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--color-bg-canvas);
}

/* 固定ヘッダー。★操作位置は正本で固定（§15・変更不可）:
   左＝メニュー／中央＝店舗名／右＝Close・×。3分割のため左右を同じ幅で確保し、
   店舗名が長くても中央がずれないようにする。 */
.cc-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: var(--size-control-touch-min) 1fr var(--size-control-touch-min);
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-header-mobile);
  padding: 0 var(--space-2);
  padding-top: var(--safe-area-top);
  padding-left: max(var(--space-2), var(--safe-area-left));
  padding-right: max(var(--space-2), var(--safe-area-right));
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-divider);
}

/* 店舗名。長文は省略し、全文は title 属性と詳細導線で確認できるようにする（§15） */
.cc-header__title {
  font-size: var(--font-size-card-title);
  line-height: calc(var(--font-line-card-title) / var(--font-size-card-title));
  font-weight: var(--font-weight-card-title);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

/* メニュー（ドロワー）。項目が渡されたときだけ描画される。中身は M2 以降で確定 */
.cc-menu {
  position: sticky;
  top: var(--size-header-mobile);
  z-index: var(--z-drawer);
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: var(--shadow-card-default);
}

.cc-menu[hidden] {
  display: none;
}

.cc-menu__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  max-width: var(--layout-content-max);
  margin-inline: auto;
}

.cc-menu__list a {
  display: flex;
  align-items: center;
  min-height: var(--size-control-touch-min);
  padding: 0 var(--space-4);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* 状態サマリー（§9 Mobile: 固定ヘッダー＋状態サマリー＋本文＋固定CTA） */
.cc-summary {
  position: sticky;
  top: var(--size-header-mobile);
  z-index: calc(var(--z-sticky) - 1);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-2) var(--space-4);
  padding-left: max(var(--space-4), var(--safe-area-left));
  padding-right: max(var(--space-4), var(--safe-area-right));
  font-size: var(--font-size-label);
  line-height: calc(var(--font-line-label) / var(--font-size-label));
  font-weight: var(--font-weight-label);
  color: var(--color-text-secondary);
}

.cc-main {
  flex: 1;
  width: 100%;
  max-width: var(--layout-content-max);
  margin: 0 auto;
  padding: var(--space-4);
  padding-left: max(var(--space-4), var(--safe-area-left));
  padding-right: max(var(--space-4), var(--safe-area-right));
}

/* 固定CTA／入力領域。Safe Area を足して iOS のホームバーに重ならないようにする */
.cc-cta {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sticky);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + var(--safe-area-bottom));
  padding-left: max(var(--space-4), var(--safe-area-left));
  padding-right: max(var(--space-4), var(--safe-area-right));
}

/* ★Tab で移ったフォーカスを、上下の固定欄（ヘッダー・状態サマリー／固定CTA）の下に隠さない
     （WCAG 2.4.11・No.819 ②）。ブラウザはフォーカス時のスクロールでこの余白を空ける。
     値はレイアウトの script が固定欄の実寸で --cc-sticky-top／--cc-sticky-bottom に入れる（固定欄は画面ごとに高さが違う）。
     script が動かないときの既定は、ヘッダー 1 段・ボタン 1 つの CTA の高さ。 */
html {
  scroll-padding-top: calc(var(--cc-sticky-top, 56px) + 8px);
  scroll-padding-bottom: calc(var(--cc-sticky-bottom, 80px) + 8px);
}

/* ★「下に続きます」（REQ-CUST-1527）。本文を覆わない控えめな短文。押せない（閲覧位置を動かさない）。
     操作欄が無い画面だけ、画面の下（Safe Area の内側）に小さく浮かせる。 */
.cc-more-below {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-area-bottom) + var(--space-2));
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  -webkit-text-fill-color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  pointer-events: none;
}

/* ★下部の操作欄がある画面は、操作欄の中（ボタンの上）に置く。本文の上に重ならない（2026-10-14 実測で重なった）。 */
.cc-more-below--in-cta {
  position: static;
  transform: none;
  display: flex;
  width: fit-content;
  margin: 0 auto var(--space-2);
}

.cc-more-below[hidden] {
  display: none;
}

/* ★処理中のお知らせ（REQ-CUST-1131）。操作欄の中（ボタンの上）に出す。JS が出すまで隠す。 */
.cc-pending {
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-2);
}

.cc-pending[hidden],
.cc-pending [hidden] {
  display: none;
}

.cc-cta__inner {
  width: 100%;
  max-width: var(--layout-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .cc-main {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

/* 画像（§10）。引き伸ばさず領域高を維持する */
.cc-photo {
  aspect-ratio: var(--image-therapist-aspect);
  width: 100%;
  object-fit: cover;
  background: var(--color-surface-subtle);
  border-radius: var(--radius-card);
  display: block;
}

/* ============================================================
   読み込み・エラー・オフライン（テキストワイヤー §32）
   ============================================================ */

/* §32.1 Skeleton。
   ★「完了後と同じ領域高を確保し、画面ジャンプを抑える」のが要件なので、
   高さは中身に合わせて呼び出し側が指定する。ここでは面と動きだけを定義する。 */
.cc-skeleton {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-control);
  /* 派手な演出は禁止（§11）。ごく控えめな明滅に留める */
  animation: cc-skeleton-pulse 1.4s var(--motion-easing-standard) infinite;
}

.cc-skeleton--text {
  height: var(--font-line-body);
  margin-bottom: var(--space-2);
}

.cc-skeleton--title {
  height: var(--font-line-card-title);
  width: 60%;
  margin-bottom: var(--space-3);
}

/* セラピスト写真は縦長3:4（§10）。取得失敗時も同じ高さを保つ */
.cc-skeleton--photo {
  aspect-ratio: var(--image-therapist-aspect);
  width: 100%;
}

@keyframes cc-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* §32.2 通信エラー。
   ★色だけで状態を伝えない（アイコン・見出し・本文・操作を併用する）。 */
.cc-offline {
  position: sticky;
  top: var(--size-header-mobile);
  z-index: calc(var(--z-sticky) + 1);
  background: var(--color-error-subtle);
  border-bottom: 1px solid var(--color-error);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  padding-left: max(var(--space-4), var(--safe-area-left));
  padding-right: max(var(--space-4), var(--safe-area-right));
}

.cc-offline[hidden] {
  display: none;
}

.cc-offline__title {
  font-size: var(--font-size-label);
  line-height: calc(var(--font-line-label) / var(--font-size-label));
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.cc-offline__body {
  font-size: var(--font-size-caption);
  line-height: calc(var(--font-line-caption) / var(--font-size-caption));
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.cc-offline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ============================================================
   予約条件入力（S16-D。テキストワイヤー §4.1・§5.1・§6.1・§9.1・§11.1）
   ============================================================ */

/* §4.1 条件サマリー（S16-D → S17-I で表組みへ統一）。
   ★選択済みも未選択も同じ形で並べる（何が残っているか分かるように）。
   ★**S17-I で `--table` の見せ方を既定へ格上げした**（2026-08-27 実機で指摘）。
     S17-H では最終確認と変更確認の2画面にだけ効かせていたが、
     条件サマリー・料金内訳・お客様情報・ご本人確認は流し込みのままで、
     **同じ「ラベル＋値」なのに画面ごとに見え方が違っていた。**
     既定にしておけば、**次に足す一覧も何もしなくても揃う。** */
.cc-summary-list {
  margin: 0;
  display: grid;
  gap: 0;
}

.cc-summary-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-divider);
}

.cc-summary-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ★カードの見出しの直後に来るときだけ1段離す（S17-I）。
   1行目は `padding-top: 0` なので、見出しと表がくっついて1つの塊に見えていた。 */
.cc-card-title + .cc-summary-list {
  margin-top: var(--space-3);
}

/* ★ラベルは折り返さない（折り返すと値の位置が行ごとにずれる）。
   ★`min-width` で短いラベルの幅を揃える。「変更後の合計」のような長いラベルは
     そのぶん広がってよい（`4.5em` 固定にすると2行に折れる。S17-H で実測済み）。 */
.cc-summary-item dt {
  min-width: 4.5em;
  white-space: nowrap;
}

/* ★値は太字（2026-08-27 実機で指摘）。「時間 18:40」なら **18:40 だけ**。
     ラベルは `.cc-label`（500）のままにして、目が値へ行くようにする。 */
.cc-summary-item dd {
  margin: 0;
  display: block;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ★TEST-CUSTINT-048：ページを 200% に拡大すると（390px の画面で 195px 相当）、ラベル（折り返さない）と
     ［変更する］（折り返さない）だけで行の幅を超え、ページが横にスクロールしていた（本人確認の電話番号の行で実測）。
     狭いときだけラベルを 1 行目に出し、値と操作を 2 行目に並べる。 */
@media (max-width: 300px) {
  .cc-summary-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cc-summary-item dt {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

/* ★まだ決まっていない値はグレーの細字（S17-J・2026-08-28 指摘）。
   決まった値と同じ濃さ・太さだと、**何が決まっていて何が残っているのかが一目で分からない。**
   ★色だけに頼らない（太さも戻す）。文言も「未選択」のままで、見た目に意味を負わせていない。 */
.cc-summary-item dd.cc-summary-empty {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
}

/* §14.1 最終確認の日時（S17-H）。
   ★その画面でいちばん伝えたい1行なので赤で強調する（2026-08-27 実機で指摘）。
   ★Design Token の Error 色をそのまま使い、**新しい赤を作らない**
     （`.cc-result-title` と同じ考え方。ここでの赤は「危険」ではなく強調）。 */
.cc-confirm-datetime {
  color: var(--color-error);
  margin: 0 0 var(--space-3);
}

/* ★［変更する］［…を修正］は右端で縦に揃える。折り返すと列が崩れるので改行させない。
   ★**操作は太字にしない。**太字は「その行の値」を指すためのもので、
     操作まで太くすると何が値なのか分からなくなる。
   ★中身は 44px のボタン（`.cc-btn--inline`）なので、ラベル・値の baseline ではなく
     行の中央へ合わせる（S17-J）。baseline のままだとボタンだけが下へずれる。 */
.cc-summary-item dd.cc-summary-edit {
  justify-self: end;
  align-self: center;
  white-space: nowrap;
  font-weight: var(--font-weight-body);
}

/* AI の発話。★送信者ごとの配色は正本が「既存 Semantic の別名」とだけ記して
   どの Semantic かを示していないため、まだ決めない（M4 で確定）。
   ここでは色を足さず、余白だけで発話として読めるようにしておく。 */
.cc-bot {
  margin-top: var(--space-4);
}

/* 選択肢のチップ列（§5.1 今日／明日・§11.1 時間チップ）。
   ★1つ1つが form（POST）。GET で状態を変えないため（api-contract §1）。 */
.cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.cc-choice-form {
  margin: 0;
}

/* ★時刻の枠（REQ-CUST-1367）。基本は 2 列。1 枠の最小幅を文字の大きさ（em）で決めるので、
     狭い画面や文字を大きくしたときは 2 列が入らず自然に 1 列へ折り返す。
     ★1 枠の最小幅は「半分の幅」以上なので、3 列以上にはならない。
     ★ラベルを縮めたり切ったりして 2 列を保たない（文字の大きさ・省略の指定を足さない）。
     ★並び順は HTML の順のまま（grid の自動配置・行方向）。 */
.cc-chips--times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(7em, calc((100% - var(--space-2)) / 2)), 1fr));
}

.cc-chips--times .cc-choice-form,
.cc-chips--times .cc-chip {
  width: 100%;
}

.cc-chips--times .cc-chip {
  justify-content: center;
}

/* ★追加の候補（REQ-CUST-0016）。いまの候補の下に分けて出す。
     ［ほかの時間を見る］のあと、この位置へ移る（上の固定ヘッダーに隠れないよう上に余白を取る）。 */
.cc-more-times {
  margin-top: var(--space-3);
  scroll-margin-top: 72px;
}

/* ★上下に余白を入れる（S17-G）。`.cc-btn` は `padding: 0 var(--space-4)` で、
     高さを min-height だけに頼っていた。ラベルと補足の2行が入ると中身が
     min-height をほぼ埋め、窮屈に見えた（2026-08-27 実機で指摘）。
   ★1行だけのボタン（［選ぶ］［この人を選ぶ］）は min-height 48px に収まるので
     実測 48px → 50px。**2行のボタンだけが 48px → 72～74px に広がる。** */
.cc-choice-form .cc-btn {
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* 日付ピッカーのような「入力してから送る」形 */
.cc-inline-form {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* ★S27-W2: 文章の入力欄を「開く」形にする（小さい画面では閉じた状態で始める）。
     見出しは押せる 1 行。欄のラベルは見出しと同じ文字なので、読み上げ用に残して見た目だけ隠す。 */
.cc-free-text-fold {
  margin: 0 0 var(--space-2);
}

.cc-free-text-fold__summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-label);
  font-weight: 700;
  color: var(--color-text-primary);
  -webkit-text-fill-color: var(--color-text-primary);
}

.cc-free-text-fold__summary { list-style: none; }
.cc-free-text-fold__summary::-webkit-details-marker { display: none; }

.cc-free-text-fold__summary::after {
  content: "▼";
  font-size: 0.7em;
  color: var(--color-text-secondary);
  -webkit-text-fill-color: var(--color-text-secondary);
}

.cc-free-text-fold[open] > .cc-free-text-fold__summary::after {
  content: "▲";
}

.cc-free-text-fold .cc-inline-form {
  margin-top: 0;
}

.cc-free-text-fold label[for="cc-free-text"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* §7.1 セラピスト標準カード。写真は左、情報は右。
   ★写真の幅は固定にする。**取得できたかどうかで一覧の形が変わらないようにする**
   （§7.1「写真領域は取得失敗時も同じ高さのプレースホルダー」）。 */
.cc-therapist {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.cc-therapist .cc-photo {
  flex: 0 0 96px;
  width: 96px;
}

.cc-therapist__body {
  flex: 1;
  min-width: 0;
}

.cc-therapist__body > * {
  margin: 0 0 var(--space-1);
}

/* セラピスト一覧の表示切替（ワイヤー §7.1・TEST-CUSTINT-007・設計 41）。
   ★変わるのは見た目だけ。候補・並び・料金・選べるかはどの表示でも同じ。 */
.cc-view-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.cc-view-switch__label {
  font-size: var(--font-size-label);
  color: var(--color-text-secondary);
}

.cc-view-switch .cc-chip {
  text-decoration: none;
}

/* ★一覧を div で包んだので、続く「指名せずフリーで予約する」のカードとの間隔をここで付ける。 */
.cc-therapist-list + .cc-card {
  margin-top: var(--space-3);
}

/* リスト：写真を小さくして、1 人ぶんの高さを詰める。 */
.cc-therapist-list--list .cc-therapist .cc-photo {
  flex-basis: 56px;
  width: 56px;
}

/* 写真重視：2 列の格子。写真は幅いっぱい、情報はその下。
   ★列は minmax(0, 1fr)——長い名前でも横にはみ出さない（折り返す）。 */
.cc-therapist-list--photo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.cc-therapist-list--photo > .cc-card {
  margin: 0;
  min-width: 0;
}

.cc-therapist-list--photo .cc-therapist {
  flex-direction: column;
}

.cc-therapist-list--photo .cc-therapist .cc-photo {
  flex: none;
  width: 100%;
}

.cc-therapist-list--photo .cc-therapist__body {
  width: 100%;
  overflow-wrap: anywhere;
}

.cc-therapist-list--photo .cc-btn {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 狭い画面（拡大時を含む）では写真重視も 1 列にする（2 列だとボタンの文字が欠ける）。 */
@media (max-width: 300px) {
  .cc-therapist-list--photo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 詳細（§8.1）の写真は本文幅いっぱい */
.cc-photo--detail {
  width: 100%;
  margin-bottom: var(--space-3);
}

/* セラピスト詳細の複数枚（No.1217 便 1）。横へ送って 1 枚ずつ見る（JavaScript を使わない）。 */
.cc-photo-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-bottom: var(--space-3);
}

.cc-photo-strip__item {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.cc-photo-strip__item .cc-photo--detail {
  margin-bottom: var(--space-1);
}

/* 写真が無いときのプレースホルダー。★読み込み中（cc-skeleton）とは別物。
   アニメーションさせない——「待てば出てくる」と誤解させないため。 */
.cc-photo--empty {
  background: var(--color-surface-subtle);
  border: var(--border-default);
}

/* 案内写真（正本 §8.3「写真で確認する」・S20-G3c-2）。
   ★★**切り取らない**（`contain`）。セラピスト写真は `cover` で寄せてよいが、
     案内写真は**端に写っている目印こそが手掛かり**で、切ると用を成さない。
   ★それでも `aspect-ratio` は指定する——縦横比の違う写真が並んでも
     読み込みのたびに画面が飛ばない（§10 placeholder = 領域高を維持）。 */
.cc-photo--guide {
  aspect-ratio: var(--image-guidance-aspect);
  object-fit: contain;
}

/* 写真 1 枚と、その説明文のまとまり。
   ★★**写真どうしの間隔を、写真と説明文の間隔より広くする。**同じにすると
     説明文が「上の写真のもの」か「下の写真のもの」か読めない（画面を撮って気づいた）。 */
.cc-guide-photo {
  margin: 0 0 var(--space-6);
}

.cc-guide-photo .cc-caption {
  margin: var(--space-1) 0 0;
}


/* §17.1 予約変更の確認の見出し（S17-H）。★中央・大きく（2026-08-27 実機で指摘）。 */
.cc-change-title {
  margin: 0 0 var(--space-4);
}

/* 変更前 → 変更後を縦に積む（S17-H）。
   ★横に「A → B」と流すと、値が長いときに折り返して境目が分からなくなる
     （2026-08-27 実機で指摘）。
   ★変更後を濃く太く、変更前を薄くする。**色だけに頼らない**——間に矢印を置いて向きも示す。 */
.cc-summary-item dd.cc-change {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
}

/* ★S17-I で値を太字にしたので、**変更前と矢印は明示的に戻す。**
   戻さないと dd から 700 を継承し、S17-H で付けた「変更後だけ濃く太く」の差が消える。 */
.cc-change__before {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
}

.cc-change__arrow {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
  line-height: 1;
  padding-left: var(--space-2);
}

.cc-change__after {
  font-weight: 700;
}

/* §18.1 キャンセル確認の見出し（S17-H）。
   ★Design Token の Error 色をそのまま使い、**新しい赤を作らない**。
     ここは危険な操作の確認なので、Error 色の意味とも合っている。 */
.cc-cancel-title {
  color: var(--color-error);
}

/* 続けて読む短い行を詰める（S17-H）。
   ★<p> の既定マージン（1em＝16px）が行ごとに入り、4行が離れて
     別々の話に見えていた（2026-08-27 実機で指摘）。 */
.cc-lines {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.cc-lines > p {
  margin: 0;
}

/* ★最後の注記だけは1段離す。事実の列挙と、店舗の定めについての断りは別の話なので。 */
.cc-lines > .cc-lines__note {
  margin-top: var(--space-3);
}

/* ============================================================
   Motion（§11）。OS の「視差効果を減らす」に従う
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 80ms !important;
    animation-duration: 80ms !important;
  }
}

/* ============================================================
   画面の自動更新の知らせ（5-9・components/cc_poll.php）
   ★入力の途中で取り直さないときだけ出す。既定は hidden。
   ============================================================ */

.cc-poll-notice {
  align-items: center;
  justify-content: space-between;
  margin: var(--space-2) var(--space-4) 0;
}

.cc-poll-notice[hidden] {
  display: none;
}

/* ============================================================
   会話（③店舗メッセージ・customer_chat/conversation.php）
   ★送信者は色だけで区別しない（正本 §16.2.3）——位置（左右中央）・ラベル・境界の形を併用する。
   ★チャット色トークン（§17A）は「既存 Semantic の別名」とだけ定められていたので、③で割り当てた
     （逸脱ログ DEV-120）: AI＝subtle ／ 店舗＝info-subtle ＋ 実線 ／ お客様＝card ＋ 実線 ／ システム＝枠なし。
   ============================================================ */

:root {
  --color-chat-ai-bg: var(--color-surface-subtle);
  --color-chat-store-bg: var(--color-info-subtle);
  --color-chat-customer-bg: var(--color-surface-card);
  --color-chat-system-text: var(--color-text-secondary);
}

.cc-handler {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin: 0 0 var(--space-3);
}

.cc-handler__value {
  font-weight: var(--font-weight-chat-sender);
}

.cc-transcript {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-chat-sender-gap);
}

/* 日付の区切り（S28-K3-G・REQ-CUST-1364）。目立たせない補足の色・大きさ。 */
.cc-transcript__date {
  text-align: center;
  color: var(--color-text-secondary, #667085);
  font-size: var(--font-size-chat-meta);
}

.cc-transcript__unread {
  text-align: center;
  min-height: var(--height-chat-unread-divider);
  color: var(--color-info);
  font-size: var(--font-size-chat-meta);
  border-top: 1px solid var(--color-info);
  padding-top: var(--space-1);
}

.cc-msg {
  max-width: var(--width-chat-bubble-max);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-chat-bubble);
  overflow-wrap: anywhere;
}

.cc-msg--left { align-self: flex-start; border-top-left-radius: var(--radius-chat-bubble-tail); }
.cc-msg--right { align-self: flex-end; border-top-right-radius: var(--radius-chat-bubble-tail); }
.cc-msg--center { align-self: center; max-width: 100%; padding: var(--space-1) var(--space-2); }

.cc-msg--ai { background: var(--color-chat-ai-bg); }
.cc-msg--store { background: var(--color-chat-store-bg); border: 1px solid var(--color-info); }
.cc-msg--customer { background: var(--color-chat-customer-bg); border: var(--border-default); }
.cc-msg--system { color: var(--color-chat-system-text); text-align: center; }

.cc-msg__label {
  margin: 0;
  font-size: var(--font-size-chat-sender);
  line-height: calc(var(--font-line-chat-sender) / var(--font-size-chat-sender));
  font-weight: var(--font-weight-chat-sender);
}

.cc-msg--system .cc-msg__label { font-weight: 400; }

.cc-msg__tag { margin-left: var(--space-1); font-weight: 400; color: var(--color-text-secondary); }

.cc-msg__body { margin: var(--space-1) 0 0; white-space: pre-wrap; }

/* §16.2.9 Link Card（DEV-132）。用途・タイトル・ドメインを縦に並べ、タップ領域を広く取る（§16.2.10 の 44px）。 */
.cc-linkcard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-card);
  color: inherit;
  text-decoration: none;
}
.cc-linkcard__purpose { font-size: var(--font-size-chat-meta); color: var(--color-text-secondary); }
.cc-linkcard__title { font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
/* §16.2.8 ProposalCard（DEV-133）。変更前／変更後を表で並べ、Primary と［変更しない］を縦に分ける。 */
.cc-proposal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface-card);
  border: var(--border-default);
  border-radius: var(--radius-card);
}
.cc-proposal__title { margin: 0; font-weight: 600; }
.cc-proposal__diff { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-2); margin: 0; }
.cc-proposal__diff dt { color: var(--color-text-secondary); }
.cc-proposal__diff dd { margin: 0; }
.cc-proposal form { margin: 0; }
.cc-proposal .cc-btn { width: 100%; }
.cc-proposal__status { margin: 0; font-weight: 600; }
.cc-linkcard__host { font-size: var(--font-size-chat-meta); color: var(--color-text-secondary); overflow-wrap: anywhere; }

.cc-msg__time {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-chat-meta);
  color: var(--color-text-secondary);
}

.cc-composer { display: flex; flex-direction: column; gap: var(--space-2); }

/* ============================================================
   店舗別の背景（REQ-CUST-1335・台帳 No.725）
   ★html に data-cc-bg が付くのは、店舗が色か審査済みの画像を適用しているときだけ。
     付いていなければこの節は何も効かない（今の見た目のまま）。
   ★色はサーバーで配色を検査済み（本文・注記 4.5:1 以上／主要ボタン 3:1 以上）。
     画像は背景色を 85% 重ねた上に薄く敷く（ChatBackground::IMAGE_SCRIM）。
   ★白カード（--color-surface-card）・警告色・操作の位置は変えない。
   ============================================================ */
html[data-cc-bg] body.cc,
html[data-cc-bg] .cc-shell {
  background-color: var(--cc-shop-bg-color, var(--color-bg-canvas));
}

html[data-cc-bg] .cc-shell {
  background-image: var(--cc-shop-bg-image, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* 画像の上の文字の下地（台帳 No.746 ②(1)・DEV-151）
   ★背景色を 85% 重ねるだけでは、画像の上の文字のコントラストは保証できない（画像の明るさを測れない）。
     そこで、画像を適用しているとき（data-cc-bg-image）は、本文の欄（.cc-main）の直下の要素のうち、
     自分の地を持たないもの（吹き出し・注記・選択肢の並び・工程の帯など）に**不透明な下地**を敷く。
     カード（.cc-card）・ボタン（.cc-btn）・色つきのお知らせ（.cc-status--*）は自分の不透明な地を持つので対象外。
   ★下地の色は店舗の背景色（未設定なら color.bg.canvas）。背景色は保存時と表示時に本文・注記 4.5:1 以上を検査済み
     （ChatBackground）なので、背景色を変えたあとも、この下地の上の文字は基準を満たす。
   ★下地は要素の外側へ影（box-shadow の広がり）で少しはみ出させる。余白・位置は変えない（レイアウトを動かさない）。
   ★:where() で詳細度を低くしてある（角丸は触らない＝要素の角丸に沿って広がる）。 */
html[data-cc-bg-image] .cc-main > :where(:not(.cc-card, .cc-btn, [class*="cc-status--"])) {
  background-color: var(--cc-shop-bg-color, var(--color-bg-canvas));
  box-shadow: 0 0 0 var(--space-2) var(--cc-shop-bg-color, var(--color-bg-canvas));
}

/* ── 店舗ロゴ（S28-K3-F・REQ-CUST-0356）。チャット開始時とメニュー上部に小さく出す。ヘッダーには出さない。
 *   ★高さで揃え、幅は縦横比のまま（横長のロゴでも最大幅で止める）。 */
.cc-shop-logo {
    display: block;
    max-height: 48px;
    max-width: min(200px, 60%);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 0 var(--space-2, 8px);
}
.cc-menu__logo {
    padding: var(--space-3, 12px) var(--space-4, 16px) 0;
}
.cc-shop-logo--menu {
    max-height: 32px;
    margin: 0;
}
/* TEST-CUSTINT-043 画像の選択・プレビュー（既定は無効＝部品を出さない）と、会話の中の画像（§16.2.9 小型プレビュー＋用途ラベル）。 */
.cc-image-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  border: var(--border-default);
  border-radius: var(--radius-card);
}
.cc-image-picker__purposes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cc-image-picker__purpose { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.cc-image-picker__slot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-image-picker__slot input[type="file"] { max-width: 100%; }
.cc-image-picker__preview { max-width: 160px; max-height: 160px; object-fit: contain; border: var(--border-default); border-radius: var(--radius-card); }
.cc-image-picker__preview[hidden],
.cc-image-picker [data-cc-image-client-error][hidden] { display: none; }
.cc-images { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.cc-images__item { display: flex; flex-direction: column; gap: 2px; max-width: 140px; }
.cc-images__purpose { font-size: var(--font-size-chat-meta); color: var(--color-text-secondary); }
.cc-images__thumb { display: block; width: 120px; height: 120px; object-fit: cover; border: var(--border-default); border-radius: var(--radius-card); }
.cc-images__link { display: block; }
.cc-images__pending { font-size: var(--font-size-chat-meta); color: var(--color-text-secondary); }

/* ★No.1249・No.1274：予約変更デモの帯。説明を 1 行目に、［最初から試し直す］と（枠の中のときだけ）［別の画面で開く］を 2 行目に並べる。
   枠（LP の中の幅 390px 前後）でボタンの文字が縦に潰れないようにする。 */
.cc-status[data-lp-demo-banner] { flex-wrap: wrap; align-items: center; }
.cc-status[data-lp-demo-banner] > span { flex: 1 1 100%; }
.cc-status[data-lp-demo-banner] .cc-btn { white-space: nowrap; }
.cc-status[data-lp-demo-banner] [data-lp-demo-open-full] { margin: 0; }