/* ==========================================================================
   AI・アプリの導入と開発のページだけの CSS（キャンバス案E v51 の AppE。/ai-app/）
   --------------------------------------------------------------------------
   このページでだけ読む（inc/assets.php の planart_page_styles() の 'ai-app'。style.css のあと）。
   色・余白・角丸・影はトークンだけを使う（verify_site.py が見張る）。

   ■ ここにある物
     1. ヒーローの絵（parts/ai-app-hero.php）：トップの 02 の絵（style.css 13章の .c-booking・.c-assist）の大きさ違い
     2. LINE予約の段の、予約表とお知らせの絵・しくみ3つ（page-ai-app.php の .p-ai-app-line）
     ほかの段（考え方・できること・料金の表・進め方・よくある質問・相談の帯）は、共通の部品のまま（style.css 10・12・21・23〜25・27章）。

   ■ トークンは style.css の 0章（2026-11-03 まとめで、このファイルの :root から移した。名前はそのまま）。
   ========================================================================== */

/* ==========================================================================
   1. ヒーローの絵（薄い緑の面の中。面と並びは style.css 22章の .c-hero__card--row）
   キャンバスの AppE は、トップの 02 の絵より、スマホが広く（168〜220px）角と文字が少し大きい。
   AIアシスタントも内側 16px・文字 13px（トップは 14px・11px）。形は同じなので、大きさだけここで変える。
   ========================================================================== */
.p-ai-app-hero .c-booking {
  width: clamp(168px, 15cqi, 220px);
  border-radius: var(--r-32);
}

.p-ai-app-hero .c-booking__screen {
  border-radius: var(--r-26);
  font-size: 12px;
}

.p-ai-app-hero .c-booking__head {
  font-size: 13px;
}

.p-ai-app-hero .c-booking__month {
  font-size: 11px;
}

/* AIアシスタントの枠（幅 760px 以下では出さない＝.u-hide-sm。キャンバスの .pe-hide-sm） */
.p-ai-app-hero__assist {
  flex: 0 1 250px;
  min-width: 0;
  align-self: flex-end;
}

.p-ai-app-hero .c-assist {
  padding: var(--s-16);
  font-size: 13px;
  line-height: 1.55;
}

/* ==========================================================================
   2. LINE予約の段（2列：左が予約表とお知らせの絵、右がしくみ3つ。幅 760px 以下は1列＝style.css 2章の .u-grid2）
   ========================================================================== */
.p-ai-app-line {
  align-items: center;
  gap: var(--sp-line-cols);
}

/* ---- 左：予約表とお知らせの絵（読み上げない飾り） ---- */
.p-ai-app-line__visual {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-line-visual-block);
  padding-inline: var(--sp-line-visual-inline);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-card);
  background: var(--c-green-pale);
}

/* お知らせの吹き出しを、予約表の右下に重ねる台（下の 64px が吹き出しの場所） */
.p-ai-app-line__stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding-bottom: var(--s-64);
}

.p-ai-app-line__schedule {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding: var(--s-18);
  border-radius: var(--r-20);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--sh-schedule);
}

.p-ai-app-line__schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
}

.p-ai-app-line__tabs {
  display: flex;
  gap: var(--s-4);
  font-size: 11px;
  font-weight: 600;
}

.p-ai-app-line__tab {
  padding-block: var(--s-2);
  padding-inline: var(--s-9);
  border-radius: var(--r-pill);
  background: var(--c-chip);
  color: var(--c-text);
}

.p-ai-app-line__tab--on {
  background: var(--c-ink);
  color: var(--c-on-dark);
}

.p-ai-app-line__date {
  color: var(--c-sub);
  font-size: 12px;
}

.p-ai-app-line__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-10);
}

.p-ai-app-line__time {
  color: var(--c-sub);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.p-ai-app-line__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  padding-block: var(--s-8);
  padding-inline: var(--s-12);
  border-radius: var(--r-10);
  background: var(--c-surface);
  color: var(--c-ink);
}

/* 空きの行は点線の枠だけ（キャンバスと同じく、枠の 1px ぶん高い） */
.p-ai-app-line__slot--open {
  border: 1px dashed var(--c-line);
  background: none;
  color: var(--c-sub);
}

/* 予約の入り口の札（LINE／電話） */
.p-ai-app-line__via {
  padding-block: var(--s-1);
  padding-inline: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--c-green-pale);
  color: var(--c-green);
  font-size: 11px;
  font-weight: 700;
}

.p-ai-app-line__via--tel {
  border: 1px solid var(--c-line);
  background: var(--c-chip);
  color: var(--c-text);
}

/* 前日のお知らせ（右下の黒い吹き出し。右へ 8px はみ出す） */
.p-ai-app-line__notice {
  position: absolute;
  right: calc(-1 * var(--s-8));
  bottom: 0;
  box-sizing: border-box;
  width: min(292px, 92%);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-12);
  padding-inline: var(--s-14);
  border-radius: var(--r-18) var(--r-18) var(--r-4) var(--r-18);
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-size: 12px;
  line-height: 1.6;
  box-shadow: var(--sh-panel);
}

.p-ai-app-line__notice-label {
  color: var(--c-mint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---- 右：しくみ3つ ---- */
.p-ai-app-line__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-ai-app-line__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-line-points);
}

.p-ai-app-line__point {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
}

/* 塗った丸のチェック（inc/template-tags.php の 'check-fill'。色は style.css 22章の .c-check-fill） */
.p-ai-app-line__point > svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: var(--s-3);
}

.p-ai-app-line__point-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.p-ai-app-line__point-title {
  color: var(--c-ink);
  font-size: var(--fs-line-point);
  line-height: 1.5;
  font-weight: 700;
}

.p-ai-app-line__point-text {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.8;
}