/* =============================================================
   Lilla 体験レッスンの申込（/taiken/） — taiken.css
   lesson.css（カレンダー・日パネル・時刻のチップ・固定サマリー・確定ボタン）の上に重ねる。
   色・間隔・角丸は tokens.css の変数。スマホ（375px）を最優先で組み、広い画面は 640px で止める。
   ============================================================= */

/* ---------------------------------------------------------------
   0. 会員向けの部品を出さない（ヘッダの CTA・ドロワー・下のナビ・サイドナビ）。お客様の画面なので
   --------------------------------------------------------------- */
body.lbr-lesson--taiken .site-header .header-cta,
body.lbr-lesson--taiken #drawer,
body.lbr-lesson--taiken .bottom-nav,
body.lbr-lesson--taiken .side-nav { display: none !important; }
body.lbr-lesson--taiken .app-main { padding-bottom: var(--space-8); }
body.lbr-lesson--taiken .site-header.is-scrolled { background: var(--surface); }
body.lbr-lesson--taiken .toast-wrap { bottom: 24px; } /* 下のナビが無いぶん、トーストを下へ */

/* ---------------------------------------------------------------
   1. 骨組み
   --------------------------------------------------------------- */
.lilla-taiken .lbr-taiken-wrap { max-width: 640px; }
.lilla-taiken .lbr-taiken { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.lilla-taiken .lbr-taiken > .page-head { margin-bottom: 0; }
.lilla-taiken .lbr-taiken > .notice-card { margin-bottom: 0; }
/* だれの申込ページか（ヘッダは りらみゅ の名前なので、h1 の上に小さく） */
.lilla-taiken .lbr-taiken__brand { display: block; margin: 2px 0 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--sky-700); letter-spacing: .02em; }
/* 開いたあとの「10月のご希望はメールで」の小さな帯 */
.lilla-taiken .lbr-notice--premonth { font-size: var(--fs-sm); }
.lilla-taiken .lbr-notice__link { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; }
/* 吹き出し・日パネルの中の小さなボタン（もう一度読み込む／開き直す） */
.lilla-taiken .lbr-say__btn { margin-left: 8px; vertical-align: middle; min-height: 30px; padding: 0 12px; }
.lilla-taiken .lbr-day__msg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.lilla-taiken .lbr-taiken__lead { margin: 0; font-size: var(--fs-base); color: var(--ink-700); line-height: var(--lh-base); }
.lilla-taiken .lbr-taiken__lead[hidden] { display: none; } /* 日時のリクエストの受付の画面では隠す（「その場でご予約が確定します」と食い違うので。0.1.60） */
.lilla-taiken .lbr-taiken__form { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.lilla-taiken .lbr-taiken__form[hidden] { display: none; }
.lilla-taiken .lbr-taiken__contact { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); text-align: center; line-height: var(--lh-base); }
.lilla-taiken .lbr-taiken__body { margin: 0; font-size: var(--fs-base); color: var(--ink-700); line-height: var(--lh-base); }
.lilla-taiken .lbr-taiken__contact-line { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); color: var(--ink-700); }
.lilla-taiken .lbr-taiken__contact-line svg { color: var(--sky-500); flex: none; }
.lilla-taiken .lbr-taiken__contact-line b { color: var(--ink-900); overflow-wrap: anywhere; }
.lilla-taiken .lbr-taiken__mail { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.lilla-taiken .lbr-taiken__mail .lbr-card__title { margin-bottom: 0; }
.lilla-taiken .lbr-taiken__mail .btn { margin-top: var(--space-2); }

/* 固定サマリーの左の絵（相棒の代わりの音符） */
.lilla-taiken .lbr-bill__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: var(--sky-500); }
.lilla-taiken .lbr-bill[hidden] { display: none; }

/* 人に見えない欄。画面の外へ（display:none にすると自動入力のロボットも飛ばすので、見えないだけにする） */
.lilla-taiken .lbr-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------
   2. 段（1〜4）
   --------------------------------------------------------------- */
.lilla-taiken .lbr-tstep { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.lilla-taiken .lbr-tstep[hidden] { display: none; }
.lilla-taiken .lbr-tstep__title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--ink-900); line-height: var(--lh-tight);
}
.lilla-taiken .lbr-tstep__num {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--grad-blue); color: var(--color-on-primary);
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
}
.lilla-taiken .lbr-tfields { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.lilla-taiken .lbr-tfield { display: block; min-width: 0; }
.lilla-taiken .lbr-tfield .field-label { display: flex; align-items: center; gap: 8px; }
.lilla-taiken .lbr-tfield .field-hint { display: block; }
.lilla-taiken .lbr-req,
.lilla-taiken .lbr-opt { padding: 2px 8px; font-size: 10px; letter-spacing: .04em; }
.lilla-taiken .lbr-opt { background: var(--surface-sunk); color: var(--ink-500); }
/* 校舎のチップ。「対面ならどこでも」は 1行いっぱい。コースに先生のいない校舎は薄く（押せない） */
.lilla-taiken .lbr-tlocs .check-chip { min-height: 48px; }
.lilla-taiken .lbr-tloc--any { flex: 1 1 100%; justify-content: center; }
.lilla-taiken .lbr-tlocs .check-chip.is-off { opacity: .45; cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--ink-300); }
.lilla-taiken .lbr-tlocs .check-chip.is-off input { cursor: not-allowed; }
.lilla-taiken .lbr-tloc-hint { color: var(--sky-700); font-weight: 700; }
.lilla-taiken .lbr-tloc-hint[hidden] { display: none; }
/* 3. 日時 の吹き出し */
.lilla-taiken .lbr-tsay { justify-self: start; max-width: 100%; }
/* 「確認にもどる」（確認から「メールアドレスを直す」で戻ってきたときだけ出る） */
.lilla-taiken .lbr-tback { display: flex; justify-content: flex-end; }
.lilla-taiken .lbr-tback[hidden] { display: none; }
/* 段・日パネルへスクロールで寄せるときの余白（固定ヘッダ + 固定サマリー）。見出しと日時が下に隠れないように */
.lilla-taiken .lbr-tstep,
.lilla-taiken .lbr-tconfirm { scroll-margin-top: calc(var(--header-h, 60px) + 72px); }
.lilla-taiken .lbr-tstep .field { scroll-margin-top: calc(var(--header-h, 60px) + 88px); }

/* カレンダーの日はボタン（JS だけで動く。JS が無いときは noscript の案内）。見た目は lesson.css の .lbr-cal__day */
.lilla-lesson button.lbr-cal__day { border: 0; font: inherit; width: 100%; padding: 0; -webkit-appearance: none; appearance: none; cursor: default; }
.lilla-lesson button.lbr-cal__day:not([disabled]) { cursor: pointer; }
.lilla-lesson button.lbr-cal__day:not([disabled]):hover { background: var(--lemon-200); }
.lilla-lesson button.lbr-cal__day:not([disabled]):active { transform: scale(.94); }
.lilla-lesson button.lbr-cal__day:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.lilla-lesson button.lbr-cal__day[disabled] { opacity: .55; }
.lilla-lesson button.lbr-cal__day.is-open { opacity: 1; }
.lilla-lesson .lbr-cal__month.is-loading button.lbr-cal__day[disabled] { opacity: 1; }
/* 時刻のチップもボタン */
.lilla-lesson .lbr-day__slots button.chip,
.lilla-lesson .lbr-day__chips button.chip { border: 2px solid var(--border); background: #fff; cursor: pointer; font: inherit; color: var(--ink-700); }
.lilla-lesson .lbr-day__slots button.chip:hover,
.lilla-lesson .lbr-day__chips button.chip:hover { border-color: var(--sky-300); color: var(--sky-700); }
.lilla-lesson .lbr-day__slots button.chip[aria-pressed="true"],
.lilla-lesson .lbr-day__chips button.chip[aria-pressed="true"] { border-color: var(--sky-400); background: var(--sky-100); color: var(--sky-800); }
.lilla-lesson .lbr-day__slots button.chip:focus-visible,
.lilla-lesson .lbr-day__chips button.chip:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
/* 「対面ならどこでも」の日パネル: 時刻ごとの行（左に時刻、右に校舎のチップ）。1日ぶんが 1画面に収まる */
.lilla-taiken .lbr-day__rows { display: grid; gap: 8px; }
.lilla-taiken .lbr-day__row { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); align-items: center; gap: 8px; }
.lilla-taiken .lbr-day__time { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.lilla-taiken .lbr-day__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lilla-taiken .lbr-day__chips .chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
}
.lilla-taiken .lbr-day__chips .chip:active { transform: scale(.96); }

/* ---------------------------------------------------------------
   3. 確認
   --------------------------------------------------------------- */
.lilla-taiken .lbr-tconfirm { --lbr-card-pad: var(--space-5); }
@media (max-width: 560px) { .lilla-taiken .lbr-tconfirm { --lbr-card-pad: var(--space-4); } }
.lilla-taiken .lbr-tconfirm__when { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--ink-900); line-height: var(--lh-tight); }
.lilla-taiken .lbr-tconfirm__where { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
.lilla-taiken .lbr-tconfirm__where svg { color: var(--sky-500); flex: none; }
.lilla-taiken .lbr-tconfirm__list { margin: 0; display: grid; gap: 6px; }
.lilla-taiken .lbr-tconfirm__row { display: flex; gap: 12px; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.lilla-taiken .lbr-tconfirm__row dt { flex: none; width: 5em; color: var(--ink-500); font-weight: 700; }
.lilla-taiken .lbr-tconfirm__row dd { margin: 0; min-width: 0; color: var(--ink-900); overflow-wrap: anywhere; white-space: pre-wrap; }
.lilla-taiken .lbr-tconfirm__row[hidden] { display: none; }
/* メールアドレスは大きく。打ち間違いに気づけるように */
.lilla-taiken .lbr-tconfirm__mail {
  display: grid; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--r-md);
  background: var(--sky-50); box-shadow: inset 0 0 0 2px var(--sky-200);
}
.lilla-taiken .lbr-tconfirm__mail-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700); }
.lilla-taiken .lbr-tconfirm__mail-label svg { flex: none; }
.lilla-taiken .lbr-tconfirm__email { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--ink-900); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.lilla-taiken .lbr-tconfirm__mail .field-hint { margin-top: 2px; }
/* 「メールアドレスを直す」（メール欄まで 2画面上なので、飛ぶ手段を置く） */
.lilla-taiken .lbr-tconfirm__fix { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.lilla-taiken .lbr-tconfirm__fix:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 4px; }
.lilla-taiken .lbr-tconfirm__note { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug); }
/* 予約できなかった理由（ボタンの上に残す） */
.lilla-taiken .lbr-talert { margin: 0; display: grid; gap: 6px; }
.lilla-taiken .lbr-talert[hidden] { display: none; }
.lilla-taiken .lbr-talert__msg { margin: 0; font-weight: 700; line-height: var(--lh-snug); }
.lilla-taiken .lbr-talert__contact { margin: 0; font-size: var(--fs-sm); }
.lilla-taiken .lbr-talert__contact[hidden] { display: none; }
.lilla-taiken .lbr-talert__contact b { overflow-wrap: anywhere; }
.lilla-taiken .lbr-tconfirm .lbr-confirm__cta { position: relative; }
@media (max-width: 860px) {
  /* 下のナビが無いので、確定ボタンは画面の下に貼り付く */
  .lilla-taiken .lbr-tconfirm .lbr-confirm__cta { position: sticky; z-index: 2; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  .lilla-taiken .lbr-tconfirm .lbr-confirm__cta::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -14px calc(var(--lbr-card-pad) * -1) -8px;
    background: linear-gradient(180deg, transparent, var(--surface) 38%);
  }
}

/* ---------------------------------------------------------------
   4. 確定の画面
   --------------------------------------------------------------- */
.lilla-taiken .lbr-tdone { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.lilla-taiken .lbr-tdone[hidden] { display: none; }
.lilla-taiken .lbr-tdone__mark { width: 72px; height: 72px; border-radius: 50%; background: var(--mint-100); color: var(--mint-600); display: grid; place-items: center; animation: lbr-pop 420ms var(--ease-back) 1; }
.lilla-taiken .lbr-tdone__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); color: var(--sky-700); line-height: var(--lh-tight); }
.lilla-taiken .lbr-tdone__when { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--ink-900); line-height: var(--lh-tight); }
.lilla-taiken .lbr-tdone__where { margin: 0; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
.lilla-taiken .lbr-tdone__where svg { color: var(--sky-500); flex: none; }
.lilla-taiken .lbr-tdone__addr { margin: -4px 0 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-snug); }
.lilla-taiken .lbr-tdone__addr[hidden] { display: none; }
.lilla-taiken .lbr-tdone__mail,
.lilla-taiken .lbr-tdone__body { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-base); }
.lilla-taiken .lbr-tdone__mail b { color: var(--ink-900); overflow-wrap: anywhere; }
.lilla-taiken .lbr-tdone__body[hidden] { display: none; }
/* 0.1.47: 確定メールと同じ「当日について」（JS が 1文ずつ span.lbr-nb で描く）。メールの箇条書きと同じく 1文 1行に */
.lilla-taiken .lbr-tdone__lines { display: grid; gap: 4px; }
.lilla-taiken .lbr-tdone__contact { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--surface-sunk); font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-base); }
.lilla-taiken .lbr-tdone__contact b { color: var(--ink-900); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------
   4b. 先生のご指名（任意。0.1.60）。目立たせない: 小さな文字の開閉 1行（ボタンの見た目にしない・色も地味に）
   --------------------------------------------------------------- */
.lilla-taiken .lbr-tnominate { min-width: 0; margin-top: calc(var(--space-2) * -1); }
.lilla-taiken .lbr-tnominate__summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none;
  font-size: var(--fs-sm); color: var(--ink-500); text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 3px;
}
.lilla-taiken .lbr-tnominate__summary::-webkit-details-marker { display: none; }
/* 開閉の小さな矢印（文字ではなく線で描く = 下線が付かない）。閉じているときは右、開くと下 */
.lilla-taiken .lbr-tnominate__summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms var(--ease-out);
}
.lilla-taiken .lbr-tnominate[open] > .lbr-tnominate__summary::before { transform: rotate(45deg); }
.lilla-taiken .lbr-tnominate__summary:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 4px; }
.lilla-taiken .lbr-tnominate__body { display: grid; gap: 8px; margin-top: 6px; padding: var(--space-3); border-radius: var(--r-md); background: var(--surface-sunk); min-width: 0; }
.lilla-taiken .lbr-tnominate__lead { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug); }
.lilla-taiken .lbr-tnominate__select { font-size: 16px; }
.lilla-taiken .lbr-tnominate__select:disabled { opacity: .6; cursor: not-allowed; }
.lilla-taiken .lbr-tnominate__hint { display: block; }
.lilla-taiken .lbr-tnominate__profile { justify-self: start; font-size: var(--fs-sm); font-weight: 700; color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lilla-taiken .lbr-tnominate__profile[hidden] { display: none; }
/* 上の札の「先生」（指名したときだけ） */
.lilla-taiken .lbr-bill__chip[hidden] { display: none; }
/* 確認・確定の「担当：◯◯先生」 */
.lilla-taiken .lbr-tconfirm__teacher { margin: -4px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
.lilla-taiken .lbr-tdone__teacher { margin: -4px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
.lilla-taiken .lbr-tconfirm__teacher[hidden],
.lilla-taiken .lbr-tdone__teacher[hidden] { display: none; }

/* ---------------------------------------------------------------
   4c. 日時のリクエスト（0.1.60）。リンクは小さな文字の 1行・カードは同じページの中
   --------------------------------------------------------------- */
.lilla-taiken .lbr-treq-link { margin: 0; text-align: center; }
.lilla-taiken .lbr-treq-open {
  border: 0; padding: 4px 0; background: none; font: inherit; font-size: var(--fs-sm); line-height: var(--lh-snug);
  color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; text-align: left;
}
.lilla-taiken .lbr-treq-open:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 4px; }
/* 開始月より前の月の帯の中と、吹き出し（空きの無い月の案内）の中は、文の下に 1行 */
.lilla-taiken .lbr-treq-open--notice,
.lilla-taiken .lbr-treq-open--say { display: block; margin-top: 4px; font-weight: 700; }
.lilla-taiken .lbr-treq { --lbr-card-pad: var(--space-5); box-shadow: inset 0 0 0 2px var(--sky-200); }
@media (max-width: 560px) { .lilla-taiken .lbr-treq { --lbr-card-pad: var(--space-4); } }
.lilla-taiken .lbr-treq__icon { background: var(--sky-100); color: var(--sky-700); }
.lilla-taiken .lbr-treq__icon svg { width: 16px; height: 16px; }
.lilla-taiken .lbr-treq__lead,
.lilla-taiken .lbr-treq__note { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug); }
.lilla-taiken .lbr-treq__note { font-weight: 700; }
.lilla-taiken .lbr-treq__from { margin: 0; }
.lilla-taiken .lbr-treq__sum { padding: var(--space-3); border-radius: var(--r-md); background: var(--surface-sunk); }
/* 見出しは 3字まで（お名前・メール・コース・校舎・先生）なので狭く。コース名が 375px でも 1行に入るように */
.lilla-taiken .lbr-treq__sum .lbr-tconfirm__row dt,
.lilla-taiken .lbr-treq-done__list .lbr-tconfirm__row dt { width: 3.5em; }
.lilla-taiken .lbr-treq .field { font-size: 16px; }
.lilla-taiken .lbr-treq__cta { display: grid; gap: 4px; justify-items: center; }
.lilla-taiken .lbr-treq__close { border: 0; padding: 0 8px; background: none; font: inherit; font-size: var(--fs-sm); color: var(--ink-500); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 40px; }
/* 受付の画面: 書いた内容は左ぞろえ（ご希望の日時は見出しの下に） */
.lilla-taiken .lbr-treq-done__list { width: 100%; text-align: left; padding: var(--space-3); border-radius: var(--r-md); background: var(--surface-sunk); }
.lilla-taiken .lbr-treq-done__list .lbr-tconfirm__row--note { flex-direction: column; gap: 2px; }
.lilla-taiken .lbr-treq-done__list .lbr-tconfirm__row--note dt { width: auto; }

/* ---------------------------------------------------------------
   5. フッター（小さいもの）
   --------------------------------------------------------------- */
.lbr-taiken-footer { margin-top: var(--space-8); }
.lbr-taiken-footer .footer-bottom { flex-wrap: wrap; gap: 8px; }

/* 375px では「ご予約が確定しました！」が 1行に入るように（2xl だと「た！」だけが次の行に落ちる） */
@media (max-width: 560px) {
  .lilla-taiken .lbr-tdone__title { font-size: var(--fs-xl); }
  .lilla-taiken .lbr-tdone__when { font-size: var(--fs-lg); }
  /* 0.1.60: 「リクエストを受け付けました！」（14字）も 375px で 1行に */
  .lilla-taiken .lbr-treq-done .lbr-tdone__title { font-size: var(--fs-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .lilla-taiken .lbr-tdone__mark { animation: none; }
}