/* =============================================================
   Lilla 生徒ホーム／予約フロー — lesson.css
   .lilla-lesson の中だけに効く。色・間隔・角丸・動きはすべて tokens.css の変数。
   テーマから借りるのは .mascot--evolving と .evolve__burst の2クラスと
   data-reveal / data-count の仕組みだけ。自前の keyframes は lbr- 接頭辞。
   スマホ（360〜430px）を最優先で組み、広い画面は伸ばすだけ。
   ============================================================= */

/* ---------------------------------------------------------------
   0. 共通
   --------------------------------------------------------------- */
/* テーマは body{overflow-x:hidden}（html は clip）。この組み合わせだと body がスクロール容器になり、
   固定サマリー .lbr-bill と固定CTA .lbr-cta-bar の position:sticky が効かない。
   横のはみ出しは html の clip が防いでいるので、生徒ページでは body も clip にして sticky を生かす */
body.lbr-lesson { overflow-x: clip; }

.lilla-lesson .page-head h1 { font-size: var(--fs-lg); }
/* 予約フローは .lbr-book の gap が間隔を持つ。テーマの .page-head の下マージンと重なって空きすぎるのを戻す */
.lilla-lesson .lbr-book > .page-head { margin-bottom: 0; }
.lilla-lesson .lbr-book > .notice-card { margin-bottom: 0; }
/* 予約フローの小さいボタン（変える・えらびなおす・もどる）もタップ領域 44px（テーマの .btn--sm は 40px） */
.lilla-lesson .lbr-book .btn--sm { min-height: 44px; }
/* 語の途中で折らない塊（「チケットが戻ります。」「16:00〜16:50」など）。塊と塊の間でだけ折れる */
.lilla-lesson .lbr-nb { display: inline-block; max-width: 100%; }
/* 予約フローの間だけ、下のナビを透かさない（テーマは rgba(.94) でぼかし無し。先生のタイルや確定ボタンの字がナビのラベルの下に透けて読みにくい）。
   テーマのファイルは触らず、このページの body クラスで上書きする */
body.lbr-lesson--book .bottom-nav,
body.lbr-lesson--book .site-header.is-scrolled { background: var(--surface); }
.lilla-lesson .lbr-home,
.lilla-lesson .lbr-book,
.lilla-lesson .lbr-resume { display: grid; gap: var(--space-5); min-width: 0; }
/* 1列の grid は列を minmax(0,1fr) にして、横に長い子（サマリー帯のチップ列など）で親が広がらないようにする */
.lilla-lesson :is(.lbr-home, .lbr-book, .lbr-resume, .lbr-step, .lbr-cal, .lbr-confirm, .lbr-day, .lbr-hero__inner, .lbr-hero__count, .lbr-cast__body, .lbr-cancel__form, .lbr-yatta__panel, .lbr-resume__form, .lbr-resume__opts) { grid-template-columns: minmax(0, 1fr); }
.lilla-lesson .lbr-card__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  color: var(--ink-900); margin-bottom: var(--space-3); line-height: var(--lh-tight);
}
.lilla-lesson .lbr-card__title svg { color: var(--sky-500); flex: none; }
.lilla-lesson .lbr-sep { color: var(--ink-300); }

/* お知らせ帯（テーマの .notice-card に横並びを足す） */
.lilla-lesson .lbr-notice {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 0;
}
.lilla-lesson .lbr-notice__text { flex: 1 1 200px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lilla-lesson .lbr-notice__text svg { flex: none; }
/* 文が2行以上になる帯は、ベルを1行目にそろえる（ホームの帯・welcome と同じ） */
.lilla-lesson .lbr-notice--top .lbr-notice__text { align-items: flex-start; line-height: var(--lh-snug); }
.lilla-lesson .lbr-notice--top .lbr-notice__text svg { margin-top: 3px; }
/* お月謝の確認待ち（予約フローの入口で止める） */
.lilla-lesson .lbr-blocked { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); text-align: center; }
.lilla-lesson .lbr-blocked__lead { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--ink-900); line-height: var(--lh-snug); }
.lilla-lesson .lbr-notice--open { animation: fade-up var(--dur-slow) var(--ease-out) both, lbr-pop 420ms var(--ease-back) 1; }
.lilla-lesson .lbr-notice .sparkle { color: var(--mint-600); }
/* テーマの .notice-card には mint / lemon / lav / rose しか無いので、空色（予約の開始月の帯）はここで足す */
.lilla-lesson .notice-card--sky { background: var(--sky-100); color: var(--sky-700); border-color: var(--sky-200); }

/* ---------------------------------------------------------------
   1. ヒーロー（主役）
   --------------------------------------------------------------- */
.lilla-lesson .lbr-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--sky-200), var(--lav-200) 55%, var(--rose-200));
  padding: var(--space-6); box-shadow: var(--sh-md);
}
.lilla-lesson .lbr-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-4); }

/* 相棒（parts/buddy.php が出す .lbr-buddy > .lbr-buddy__art + .lbr-emote + .lbr-buddy__name） */
.lilla-lesson .lbr-hero__buddy-row { display: flex; align-items: flex-start; gap: var(--space-4); }
.lilla-lesson .lbr-buddy { position: relative; flex: none; display: grid; justify-items: center; gap: 6px; }
.lilla-lesson .lbr-buddy__art {
  position: relative; width: var(--lbr-size, 120px); height: var(--lbr-size, 120px);
  display: grid; place-items: center;
}
.lilla-lesson .lbr-buddy__art > svg,
.lilla-lesson .lbr-buddy__art > .mascot {
  display: block; width: 100%; height: auto; max-height: 100%; overflow: visible;
  animation: lbr-bob var(--lbr-bob, 5s) var(--ease-soft) infinite;
  filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--sky-500) 22%, transparent));
}
.lilla-lesson .lbr-buddy[data-state="rest"] .lbr-buddy__art > svg,
.lilla-lesson .lbr-buddy[data-state="rest"] .lbr-buddy__art > .mascot { animation: none; filter: saturate(.75); }
.lilla-lesson .lbr-buddy--hop .lbr-buddy__art > svg,
.lilla-lesson .lbr-buddy--hop .lbr-buddy__art > .mascot {
  animation: lbr-hop 600ms var(--ease-back) 1, lbr-bob var(--lbr-bob, 5s) var(--ease-soft) 600ms infinite;
}
.lilla-lesson .lbr-buddy--lean .lbr-buddy__art > svg,
.lilla-lesson .lbr-buddy--lean .lbr-buddy__art > .mascot { animation: none; transform: rotate(-8deg) translateX(3px); transition: transform var(--dur-slow) var(--ease-back); }

/* 小物（音符・汗・zzz・キラキラ…）。相棒の右上。全部 aria-hidden */
.lilla-lesson .lbr-emote {
  position: absolute; top: -6px; right: -10px; width: 28px; height: 28px;
  color: var(--rose-500); pointer-events: none;
}
.lilla-lesson .lbr-emote__item {
  position: absolute; inset: 0; display: grid; place-items: center;
  /* note×2 のように複数のときは --i で少し散らす */
  transform: translate(calc(var(--i, 0) * -16px), calc(var(--i, 0) * 12px));
}
.lilla-lesson .lbr-emote svg { width: 28px; height: 28px; display: block; }
.lilla-lesson .lbr-emote--note .lbr-emote__item,
.lilla-lesson .lbr-emote--heart .lbr-emote__item { animation: lbr-float 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 500ms); }
.lilla-lesson .lbr-emote--heart { color: var(--rose-400); }
.lilla-lesson .lbr-emote--sweat { color: var(--sky-500); }
.lilla-lesson .lbr-emote--sweat .lbr-emote__item { animation: lbr-drip 1.8s ease-in infinite; }
.lilla-lesson .lbr-emote--zzz { color: var(--lav-500); }
.lilla-lesson .lbr-emote--zzz .lbr-emote__z { animation: lbr-rise 2.4s ease-out infinite; animation-delay: calc(var(--i, 0) * 400ms); transform-box: fill-box; transform-origin: center; }
.lilla-lesson .lbr-emote--sparkle { color: var(--lemon-600); }
.lilla-lesson .lbr-emote--sparkle .lbr-emote__item { animation: lbr-twinkle 2.8s ease-in-out infinite; }
.lilla-lesson .lbr-emote--bang,
.lilla-lesson .lbr-emote--question { color: var(--rose-600); }
.lilla-lesson .lbr-emote--bang .lbr-emote__item,
.lilla-lesson .lbr-emote--question .lbr-emote__item { animation: lbr-pop 420ms var(--ease-back) 1; }
.lilla-lesson .lbr-emote--lock { color: var(--ink-500); }

/* 吹き出し */
.lilla-lesson .lbr-bubble {
  position: relative; flex: 1 1 160px; min-width: 0; align-self: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--sh-sm);
  font-size: var(--fs-sm); color: var(--ink-900); line-height: var(--lh-snug);
}
.lilla-lesson .lbr-bubble::before {
  content: ""; position: absolute; left: -5px; top: 50%; width: 12px; height: 12px;
  background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px;
}
.lilla-lesson .lbr-bubble--solo::before { display: none; }
.lilla-lesson .lbr-bubble__say { margin: 0; }
.lilla-lesson .lbr-bubble__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lilla-lesson .lbr-bubble__cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700);
}
.lilla-lesson .lbr-bubble.is-in,
.lilla-lesson .lbr-say.is-in { animation: lbr-bubble-in 240ms var(--ease-out) both; }
.lilla-lesson .lbr-bubble.is-swapping,
.lilla-lesson .lbr-say.is-swapping { opacity: 0; }

/* 大数字 */
.lilla-lesson .lbr-hero__count { display: grid; gap: 4px; justify-items: start; }
.lilla-lesson .lbr-hero__count .eyebrow::before,
.lilla-lesson .lbr-hero__count .eyebrow::after { display: none; }
.lilla-lesson .lbr-hero__num {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-4xl); line-height: var(--lh-tight); color: var(--sky-700);
  display: flex; align-items: baseline; gap: .12em;
}
.lilla-lesson .lbr-hero__num b { font-weight: 600; }
.lilla-lesson .lbr-hero__num small { font-size: .38em; color: var(--ink-700); font-weight: 600; }
.lilla-lesson .lbr-hero__num--text { font-size: var(--fs-3xl); }
.lilla-lesson .lbr-hero__num--empty { font-size: var(--fs-xl); color: var(--ink-700); }
.lilla-lesson .lbr-hero__num.lbr-pop { animation: lbr-pop 420ms var(--ease-back) 1; }

/* みちのり（今日→レッスン日の点。毎日1つ減る） */
.lilla-lesson .lbr-path { position: relative; display: flex; align-items: center; gap: 14px; padding: 6px 4px; }
.lilla-lesson .lbr-path::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
  border-top: 2px dotted var(--sky-300); transform: translateY(-50%);
}
.lilla-lesson .lbr-path__dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--sky-200); }
.lilla-lesson .lbr-path__dot.is-today { background: var(--sky-500); animation: lbr-glow 2.4s ease-in-out infinite; }
.lilla-lesson .lbr-path__star { position: relative; display: grid; color: var(--lemon-300); filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--lemon-600) 40%, transparent)); }

/* 日時・場所・締切 */
.lilla-lesson .lbr-hero__detail { display: grid; gap: 6px; justify-items: start; }
.lilla-lesson .lbr-hero__when {
  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-lesson .lbr-hero__when small { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 500; }
.lilla-lesson .lbr-hero__where { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); }
.lilla-lesson .lbr-hero__actions { flex-wrap: wrap; }
.lilla-lesson .lbr-hero__actions .text-muted { align-self: center; }

/* 開始月が開くまで（0.1.23。lbr-home.php の data-lbr-countdown）。数字の下の「10月20日（火）12:00 オープン」「あと 30分」「まもなく」。
   最後の 1時間は rose（is-near。lesson.js の initCountdown が付け外しする。サーバーも同じ条件で付ける） */
.lilla-lesson .lbr-hero__opens {
  margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base);
  color: var(--ink-700); line-height: var(--lh-snug);
}
.lilla-lesson .lbr-hero__opens.is-near { color: var(--rose-700); }
.lilla-lesson [data-lbr-cd-open][hidden],
.lilla-lesson [data-lbr-cd-wait][hidden],
.lilla-lesson [data-lbr-cd-teachers][hidden] { display: none; }

/* 締切ピル。3時間以内だけ先頭に rose の点が2回脈打つ */
.lilla-lesson .lbr-pill--urgent::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rose-600);
  animation: lbr-pulse 1.4s var(--ease-soft) 2;
}

/* ---------------------------------------------------------------
   2. 先生からの一言
   --------------------------------------------------------------- */
.lilla-lesson .lbr-note__body { margin: 0; font-size: var(--fs-base); color: var(--ink-900); line-height: var(--lh-base); }
.lilla-lesson .lbr-note__by { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-500); text-align: right; }
.lilla-lesson .lbr-note__locked { position: relative; overflow: hidden; border-radius: var(--r-md); min-height: 150px; }
.lilla-lesson .lbr-note__locked::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--sky-300), var(--lav-500)); opacity: .72;
}
.lilla-lesson .lbr-note__body--blur { filter: blur(6px); user-select: none; padding: var(--space-4); }
.lilla-lesson .lbr-note__locked .lock-overlay { z-index: 2; }
.lilla-lesson .lbr-note__locked .lock-overlay .btn { margin-top: 4px; }

/* ---------------------------------------------------------------
   3. 今月のレッスン（半券）
   --------------------------------------------------------------- */
.lilla-lesson .lbr-stubs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--space-4) 0 var(--space-3); }
.lilla-lesson .lbr-stubs--gold { margin: var(--space-3) 0 0; gap: 10px; }
.lilla-lesson .lbr-stub {
  --stub-opacity: 1;
  position: relative; width: 54px; height: 36px; flex: none;
  border-radius: var(--r-xs); background: var(--grad-candy); color: var(--sky-800);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  display: grid; place-items: center; box-shadow: var(--sh-xs);
  opacity: var(--stub-opacity);
}
/* 半券のミシン目（左右の切り欠き） */
.lilla-lesson .lbr-stub::before,
.lilla-lesson .lbr-stub::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); transform: translateY(-50%);
}
.lilla-lesson .lbr-stub::before { left: -5px; }
.lilla-lesson .lbr-stub::after { right: -5px; }
.lilla-lesson .lbr-stub.is-used {
  --stub-opacity: .38;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink-900) 14%, transparent) 6px 8px),
    var(--grad-candy);
}
.lilla-lesson .lbr-stub.is-booked { background: var(--sky-100); color: var(--sky-700); box-shadow: inset 0 0 0 2px var(--sky-300); }
.lilla-lesson .lbr-stub.is-booked svg { color: var(--sky-700); }
.lilla-lesson .lbr-stub--gold {
  width: auto; padding: 0 14px; gap: 6px; grid-auto-flow: column;
  background: var(--grad-cta); color: var(--color-on-primary); box-shadow: var(--sh-cta);
}
.lilla-lesson .lbr-stub--gold svg { color: var(--lemon-300); }
.lilla-lesson .lbr-stub__meta { font-size: var(--fs-sm); color: var(--ink-700); }
/* 出現。JS があるときだけ隠し、親の data-reveal が済んでから1枚ずつ */
.js .lilla-lesson .lbr-stub { opacity: 0; transform: translateY(8px); }
.js .lilla-lesson .is-revealed .lbr-stub {
  animation: lbr-stub-in 360ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.lilla-lesson .lbr-month__count { margin: 0; font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink-700); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.lilla-lesson .lbr-month__count b { font-size: var(--fs-xl); color: var(--sky-700); font-weight: 600; }
.lilla-lesson .lbr-month__label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500); letter-spacing: .04em; }
.lilla-lesson .lbr-month__next { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------
   4. 通算・連続練習・一覧・導線
   --------------------------------------------------------------- */
.lilla-lesson .lbr-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lilla-lesson .lbr-metrics a.metric { color: inherit; transition: transform var(--dur-base) var(--ease-back), box-shadow var(--dur-base) var(--ease-out); }
.lilla-lesson .lbr-metrics a.metric:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.lilla-lesson .lbr-metrics .pill { margin-top: 2px; }

.lilla-lesson .lbr-list .log-item__head .pill { margin-left: auto; }
.lilla-lesson .lbr-list .log-item .row { flex-wrap: wrap; }

.lilla-lesson .lbr-links {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-500);
}
.lilla-lesson .lbr-links__text { flex: 1 1 220px; line-height: 2; }
.lilla-lesson .lbr-links__text a { color: var(--sky-700); font-weight: 700; }
.lilla-lesson .lbr-links .btn { margin-left: auto; }

/* ---------------------------------------------------------------
   5. スマホ固定CTA
   --------------------------------------------------------------- */
.lilla-lesson .lbr-cta-bar { display: none; }
@media (max-width: 860px) {
  .lilla-lesson .lbr-cta-bar {
    display: block; position: sticky; z-index: var(--z-sticky);
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 12px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .js .lilla-lesson .lbr-cta-bar:not(.is-shown) { opacity: 0; transform: translateY(12px); pointer-events: none; }
  .lbr-lesson.has-lbr-cta .toast-wrap { bottom: calc(var(--bottomnav-h) + 20px + 72px); }
}

/* ---------------------------------------------------------------
   6. 取消モーダル（parts/cancel-modal.php。0.1.20: 悲しい顔の相棒・理由のチップ・ひとこと・「やめる」が主役）
   --------------------------------------------------------------- */
/* 375px でチップと 2つのボタンまで入るように、パネルの余白を少し詰める */
/* パネルの地は一色に（下に貼り付くボタンの帯の地と継ぎ目を作らない。テーマの grad-card は下端が #F8FCFF） */
.lilla-lesson .lbr-cancel .modal__panel { padding: var(--space-4); background: var(--surface); }
.lilla-lesson .lbr-cancel__buddy { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 0; }
.lilla-lesson .lbr-cancel__buddy .lbr-buddy__art > svg { animation: none; filter: none; }
.lilla-lesson .lbr-cancel__buddy .lbr-bubble { flex: 1 1 auto; min-width: 0; }
/* 相棒の絵が出せない人のもち（白・∧の口） */
.lilla-lesson .lbr-cancel__mochi { flex: none; width: 52px; display: grid; place-items: center; }
.lilla-lesson .lbr-cancel__mochi svg { display: block; width: 100%; height: auto; }
.lilla-lesson .lbr-cancel__title {
  margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base);
  color: var(--ink-900); text-align: center; line-height: var(--lh-tight);
}
.lilla-lesson .lbr-cancel__lead { margin: 6px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-700); }
.lilla-lesson .lbr-cancel__late { margin: var(--space-3) 0 0; }
.lilla-lesson .lbr-cancel__form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
/* 理由のチップ。テーマの label.chip（:has(input:checked) で青く）に乗せ、丸いラジオは隠してチップの色で選んだことを示す */
.lilla-lesson .lbr-cancel__reasons { margin: 0; padding: 0; border: 0; min-width: 0; }
.lilla-lesson .lbr-cancel__reasons legend { padding: 0; margin-bottom: 8px; }
.lilla-lesson .lbr-cancel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* チップは 375px で 2行に収まる大きさ（13px・左右 10px。高さ 44px はそのまま）: 体調／仕事・学校 ＋ 家庭／別の日／その他 */
.lilla-lesson .lbr-cancel__chip { position: relative; gap: 0; min-height: 44px; padding: 0 10px; font-size: 13px; }
.lilla-lesson .lbr-cancel__chip input { position: absolute; left: 10px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.lilla-lesson .lbr-cancel__note { display: block; }
.lilla-lesson .lbr-cancel__note textarea.field { min-height: 64px; resize: none; } /* 中身に合わせて lesson.js が伸ばす（autoGrow） */
.lilla-lesson .lbr-cancel__note-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lilla-lesson .lbr-cancel__who { flex: 1 1 auto; min-width: 0; }
.lilla-lesson .lbr-cancel__count { flex: none; text-align: right; white-space: nowrap; }
/* ボタンの帯はパネルの下に貼り付ける（テーマの .modal__panel は max-height: min(88vh, 720px) で中がスクロール。375×667 では中身 660px 超が入らず、
   iOS はスクロールバーも出ないので下にボタンがあると分からなかった）。パネルの padding ぶん外へ張り出し、上はうすく透かして「続きがある」と分かるように */
.lilla-lesson .lbr-cancel__actions {
  position: sticky; bottom: calc(-1 * var(--space-4)); z-index: 1;
  display: grid; gap: 10px;
  margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
  padding: 10px var(--space-4) var(--space-4);
  background: linear-gradient(to top, var(--surface) 80%, transparent);
}
/* 「取り消す」は控えめ（ghost の白地に rose の字）。理由をえらぶまでは薄く、押せない（JS は disabled に。JS が無くても :has で同じ見え方） */
.lilla-lesson .lbr-cancel__submit { --btn-fg: var(--rose-600); box-shadow: inset 0 0 0 2px var(--rose-200), var(--sh-sm); }
.lilla-lesson .lbr-cancel__form:not(:has(input[name="reason"]:checked)) .lbr-cancel__submit { opacity: .55; pointer-events: none; }
.lilla-lesson .lbr-cancel__submit.is-busy { opacity: .7; pointer-events: none; }

/* ---------------------------------------------------------------
   7. 予約フロー — 固定サマリー・見出し・相棒の一言
   --------------------------------------------------------------- */
/* 外側は画面に貼りつく透明の帯。ヘッダーのすぐ下から白い丸い帯の下までをぼかす
   （白い帯だけをぼかすと、ヘッダーとの 8px のすき間を下の字が通り抜けて見える。テーマのヘッダーと同じ手） */
.lilla-lesson .lbr-bill {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  padding: 8px 0; margin: -8px 0;
  background: color-mix(in srgb, var(--sky-50) 55%, transparent); /* ぼかしただけだと、下を通る写真の色がにじんで見える */
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* ページの一番上に居る間（まだ貼りついていない）は、帯の下地を見せない */
.lilla-lesson .lbr-bill:not(.is-stuck) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lilla-lesson .lbr-bill__pill {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; max-height: 56px; padding: 4px 10px 4px 6px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: var(--r-pill); box-shadow: var(--sh-sm);
}
@media (max-width: 860px) {
  /* スマホは画面の端から端まで（.wrap-app の左右の余白ぶんを外へ） */
  .lilla-lesson .lbr-bill { padding-inline: var(--lbr-gutter, 16px); margin-inline: calc(var(--lbr-gutter, 16px) * -1); }
}
.lilla-lesson .lbr-bill__buddy { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.lilla-lesson .lbr-bill__buddy .lbr-buddy { display: block; }
.lilla-lesson .lbr-bill__buddy .lbr-buddy__art > svg { animation: none; filter: none; }
.lilla-lesson .lbr-bill__chips {
  flex: 1; display: flex; gap: 6px; list-style: none; margin: 0; padding: 0 12px 0 0; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* 右へ続きがあるときは、右端でうすく消える（校舎・コースのチップが切れて見えるだけにしない）。JS が最後に埋まったチップまで寄せる */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent);
}
/* 右へ寄せたあとは、左へ流れたチップも端でうすく消える（JS が .is-scrolled を付ける） */
.lilla-lesson .lbr-bill__chips.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.lilla-lesson .lbr-bill__chips::-webkit-scrollbar { display: none; }
.lilla-lesson .lbr-bill__chip {
  flex: none; display: inline-flex; border-radius: var(--r-pill);
  background: var(--surface-sunk); color: var(--ink-500);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; letter-spacing: .02em;
}
.lilla-lesson .lbr-bill__inner { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: inherit; color: inherit; text-decoration: none; }
/* 埋まったチップは、そのステップへ戻るリンク。帯の高さ（48px）いっぱいをタップ領域にする */
.lilla-lesson a.lbr-bill__inner { position: relative; }
.lilla-lesson a.lbr-bill__inner::after { content: ""; position: absolute; inset: -11px -3px; }
.lilla-lesson a.lbr-bill__inner:hover { color: var(--sky-700); }
.lilla-lesson a.lbr-bill__inner:active { transform: scale(.96); }
/* まだ決まっていないものは、名前だけのうすいチップ（「先生：—」だと、無効になった入力欄に見える） */
.lilla-lesson .lbr-bill__chip:not(.is-set) { opacity: .75; }
.lilla-lesson .lbr-bill__chip:not(.is-set) .lbr-bill__value { display: none; }
.lilla-lesson .lbr-bill__check { display: none; color: var(--mint-600); }
.lilla-lesson .lbr-bill__chip.is-set { background: var(--sky-100); color: var(--sky-800); }
.lilla-lesson .lbr-bill__chip.is-set .lbr-bill__check { display: inline-grid; }
.lilla-lesson .lbr-bill__chip.is-set .lbr-bill__label { display: none; }
.lilla-lesson .lbr-bill__chip.lbr-pop .lbr-bill__value { display: inline-block; animation: lbr-pop 420ms var(--ease-back) 1; }
.lilla-lesson .lbr-bill__chip.lbr-pop .lbr-bill__check svg path { stroke-dasharray: 24; animation: lbr-draw 400ms var(--ease-out) both; }

.lilla-lesson .lbr-step { display: grid; gap: var(--space-4); min-width: 0; }
.lilla-lesson .lbr-step__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* 予約の 2段目: 先生さがしのプロフィールへの 1行（2026-10-06） */
.lilla-lesson .lbr-step__profile { margin: calc(var(--space-2) * -1) 0 var(--space-3); font-size: var(--fs-sm); }
.lilla-lesson .lbr-step__profile a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
.lilla-lesson .lbr-step__profile a:hover { text-decoration: underline; }
.lilla-lesson .lbr-step__head .icon-btn { margin-left: -8px; width: 44px; height: 44px; flex: none; } /* テーマは狭い画面で 40px に縮む。もどるはタップ領域 44px を保つ */
.lilla-lesson .lbr-step__head .icon-btn svg { transform: rotate(180deg); }
.lilla-lesson .lbr-step__title { 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-lesson .lbr-step__sub { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--ink-700); }
.lilla-lesson .lbr-say {
  position: relative; margin: 0; display: inline-block;
  padding: 8px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--sh-xs);
  font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug);
  /* 折り返しは文節で・2行目に 1字だけ落とさない（0.1.54「…えらんでくださ／い」。対応していないブラウザは今までどおり） */
  word-break: auto-phrase; text-wrap: pretty;
}
.lilla-lesson .lbr-say::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 10px; height: 10px;
  background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px;
}

/* ---------------------------------------------------------------
   8. Step 1 だれと？
   --------------------------------------------------------------- */
.lilla-lesson .lbr-cast { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.lilla-lesson .lbr-cast__photo {
  width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--sky-100); box-shadow: var(--sh-sm);
}
.lilla-lesson .lbr-cast__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.lilla-lesson .lbr-cast__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--ink-900); line-height: var(--lh-tight); }
.lilla-lesson .lbr-cast__meta { font-size: var(--fs-xs); color: var(--ink-500); }
.lilla-lesson .lbr-cast__pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lilla-lesson .lbr-cast__pills .pill { padding: 3px 10px; }
.lilla-lesson .lbr-cast__go { color: var(--sky-500); flex: none; display: grid; }
.lilla-lesson .lbr-cast--usual { position: relative; box-shadow: var(--sh-md); }
.lilla-lesson .lbr-cast--usual::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: var(--grad-candy);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lilla-lesson .lbr-cast--usual .lbr-cast__photo { width: 84px; height: 84px; }
.lilla-lesson .lbr-cast--usual .lbr-cast__name { font-size: var(--fs-lg); }
.lilla-lesson .lbr-cast-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lilla-lesson .lbr-cast-grid .card { padding: var(--space-4); }

/* 8-1. 先頭の1枚（いつもの先生／体験でお会いした先生）。札 → 名前 → 担当コース → 前回 or 校舎 */
.lilla-lesson .lbr-cast__course {
  /* 「何を教える先生か」はこの画面の主役の情報。13px・本文寄りの色（白地で約 8:1）で読めるようにする */
  font-size: 0.8125rem; font-weight: 700; color: var(--ink-700); line-height: 1.45; max-width: 100%;
  /* 3行まで。コース名と「ほか2コース」は語の途中で折れない（.lbr-cast__c / .lbr-cast__more） */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.lilla-lesson .lbr-cast__c,
.lilla-lesson .lbr-cast__more { display: inline-block; white-space: nowrap; max-width: 100%; }
.lilla-lesson .lbr-cast__more { font-weight: 500; }
.lilla-lesson .lbr-cast__course.is-in { animation: lbr-bubble-in 240ms var(--ease-out) both; }
.lilla-lesson .lbr-cast--usual[hidden] { display: none; }
.lilla-lesson .lbr-cast__tag { padding: 3px 10px; gap: 4px; margin-bottom: 2px; }
.lilla-lesson .lbr-cast__tag svg { flex: none; }
.lilla-lesson .lbr-cast--usual .lbr-cast__course { font-size: var(--fs-sm); }
.lilla-lesson .lbr-cast--usual .lbr-cast__meta { color: var(--ink-700); } /* 「前回 9/12 心斎橋校」。読む字なので本文寄りの色 */
.lilla-lesson .lbr-cast--trial::before { background: linear-gradient(135deg, var(--lemon-300), var(--sky-300)); }

/* 8-2. 見出しの行（右に人数）と、しぼりこみ */
.lilla-lesson .lbr-step__subrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2);
  /* しぼりこみのあと、JS がこの見出しを固定サマリー帯のすぐ下へ寄せるときの余白（帯は 64px。その下に 16px） */
  scroll-margin-top: calc(var(--header-h) + 80px);
}
.lilla-lesson .lbr-step__subrow .lbr-step__sub { margin: 0; }
.lilla-lesson .lbr-cast-count { padding: 3px 12px; gap: 1px; font-family: var(--font-display); }
.lilla-lesson .lbr-cast-count.lbr-pop { animation: lbr-pop 420ms var(--ease-back) 1; }
.lilla-lesson .lbr-filter { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
/* チップは折り返して全部見せる。横に流すと「難波校」「オンライン」が画面の外に隠れ、右のチップを選ぶと「すべて」も流れて戻し方が見えなくなる。
   行の名前（校舎／ジャンル）は同じ行の先頭に置く（チップが名前の下へ流れ込まないので、くっついて読めることが無い） */
.lilla-lesson .lbr-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.lilla-lesson .lbr-filter__label {
  flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 2px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-700); letter-spacing: .04em;
}
.lilla-lesson .lbr-filter__label svg { flex: none; color: var(--sky-500); }
.lilla-lesson .lbr-filter__row .chip {
  flex: none; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
  min-height: 44px; /* タップ領域 44px 以上（テーマの .chip は 40px） */
  padding: 0 14px;
}
.lilla-lesson .lbr-filter__row .chip:active { transform: scale(.96); }
/* コースの select（0.1.54）。行の名前の右いっぱいに。高さはチップと同じ 44px。字は 16px（iOS がタップで拡大しない）。
   いちばん長いコース名（ボーカル・ボイストレーニング・ミュージックビデオ制作コース。14字）が 375px で切れないように、字間は 0・左右の余白と矢印を詰める
   （0.1.54 検証の直し。テーマの字間と余白のままだと「ボーカル・ボイストレーニン」で切れていた）。
   「しぼる」のボタンは JS の無いときだけ（JS が hidden にする）。select の幅が足りない画面では、ボタンは次の行の右へ回る */
.lilla-lesson .lbr-filter__row--course { flex-wrap: wrap; margin: 0; }
.lilla-lesson .lbr-filter__select {
  flex: 1 1 15em; width: auto; min-width: 0; min-height: 44px; padding: 6px 32px 6px 12px; font-size: 16px; letter-spacing: 0;
  background-position: right 10px center; background-size: 16px;
}
.lilla-lesson .lbr-filter__go { flex: none; min-height: 44px; margin-left: auto; }
.lilla-lesson .lbr-filter__go[hidden] { display: none; }
/* 担当していない先生に着いたとき（0.1.54）の、そのコースの先生へのリンク。帯の文の下に折り返して並べる */
.lilla-lesson .lbr-sv-wrong__links { display: flex; flex-wrap: wrap; gap: 6px 8px; width: 100%; padding-left: 26px; }
.lilla-lesson .lbr-sv-wrong__links .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; background: var(--surface); }

/* 8-3. 先生のタイル。スマホで2列（顔を上、名前、担当コースの1行、校舎）。広い画面は列が増えるだけ */
.lilla-lesson .lbr-cast-grid.lbr-cast-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; } /* 320px でも2列、375〜430px は2列、広い画面は列が増える */
.lilla-lesson .lbr-cast-grid--tiles .lbr-cast--tile {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; justify-items: center; align-items: stretch; gap: 6px;
  padding: 12px 8px 10px; text-align: center; border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.lilla-lesson .lbr-cast--tile[hidden] { display: none; }
.lilla-lesson .lbr-cast--tile .lbr-cast__photo { width: 64px; height: 64px; }
/* 同じ段のタイルは高さがそろう。校舎のピルは下にそろえる（担当コースが1行の先生と2行の先生が並んでも段がずれない） */
.lilla-lesson .lbr-cast--tile .lbr-cast__body { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.lilla-lesson .lbr-cast--tile .lbr-cast__name { font-size: var(--fs-base); max-width: 100%; overflow-wrap: anywhere; }
.lilla-lesson .lbr-cast--tile .lbr-cast__pills { justify-content: center; margin-top: auto; padding-top: 6px; }
.lilla-lesson .lbr-cast--tile .lbr-cast__pills .pill { padding: 2px 8px; letter-spacing: 0; }
.lilla-lesson .lbr-cast--tile:active { transform: scale(.97); }
.lilla-lesson .lbr-cast--tile.is-in { animation: lbr-bubble-in 240ms var(--ease-out) both; }
.lilla-lesson .lbr-cast-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border-radius: var(--r-md); background: var(--surface-sunk); text-align: center; }
.lilla-lesson .lbr-cast-empty[hidden] { display: none; }
.lilla-lesson .lbr-cast-empty p { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
/* 一覧のタイルに入った先頭の先生の札（いつもの先生／体験でお会いした先生。0.1.51）。タイルは狭いので小さく */
.lilla-lesson .lbr-cast--tile .lbr-cast__tag {
  font-size: var(--fs-xs); padding: 2px 8px; margin-bottom: 0; letter-spacing: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 2列のタイル（375px で 150px）に「体験でお会いした先生」が 1行で収まるように。星は出さない */
}
.lilla-lesson .lbr-cast--tile .lbr-cast__tag svg { display: none; }

/* 8-4. 切り替え（先生からえらぶ／日時からえらぶ。0.1.51）。2つのタブ風のボタン（44px）。いまの画面は白く浮かせる */
.lilla-lesson .lbr-mode {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: var(--r-pill); background: var(--surface-sunk);
}
.lilla-lesson .lbr-mode__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700);
  text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lilla-lesson .lbr-mode__tab svg { flex: none; color: var(--sky-500); }
.lilla-lesson .lbr-mode__tab[aria-current="page"] { background: var(--surface); color: var(--sky-700); box-shadow: var(--sh-sm); }
.lilla-lesson .lbr-mode__tab:active { transform: scale(.97); }

/* 8-5. 日時からえらぶ（0.1.51）。校舎のチップ → カレンダー（Step2 と同じ部品）→ 日の下に空いている先生のカード（顔・札・名前・担当コース・校舎）と時間のチップ */
.lilla-lesson .lbr-dayfirst { display: grid; gap: var(--space-4); }
.lilla-lesson .lbr-day--teachers .lbr-day__date { font-size: var(--fs-base); }
.lilla-lesson .lbr-df-list { display: grid; gap: 10px; }
.lilla-lesson .lbr-df-teacher { display: grid; gap: 10px; padding: var(--space-3); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-sm); }
.lilla-lesson .lbr-df-teacher .lbr-cast { gap: 10px; }
.lilla-lesson .lbr-df-teacher .lbr-cast__photo { width: 56px; height: 56px; }
.lilla-lesson .lbr-df-teacher .lbr-cast__tag { justify-self: start; font-size: var(--fs-xs); padding: 2px 8px; margin-bottom: 0; letter-spacing: 0; }
.lilla-lesson .lbr-df-teacher .lbr-cast__course { -webkit-line-clamp: 2; line-clamp: 2; }
.lilla-lesson .lbr-df-teacher .lbr-cast__pills .pill { padding: 2px 8px; letter-spacing: 0; }
/* 時間のチップ。校舎「すべて」のときは時間の横に校舎の短い表記（.lbr-day__where）が付くので 2列（375px で 1列 141px）。深夜の「13日 2:00」だけが付くチップは今までどおり 2つぶんの幅 */
.lilla-lesson .lbr-dayfirst[data-loc="0"] .lbr-df-teacher .lbr-day__slots { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.lilla-lesson .lbr-df-teacher .lbr-day__slots .chip:has(small) { grid-column: auto; }
.lilla-lesson .lbr-df-teacher .lbr-day__slots .chip:has(small:not(.lbr-day__where)) { grid-column: span 2; }
.lilla-lesson .lbr-df-teacher .lbr-day__slots .chip .lbr-day__where { font-size: 11px; }

/* ---------------------------------------------------------------
   9. Step 2 いつ？ — カレンダー
   --------------------------------------------------------------- */
.lilla-lesson .lbr-cal { display: grid; gap: var(--space-5); }
.lilla-lesson .lbr-cal__month { background: var(--surface); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--sh-sm); scroll-margin-top: calc(var(--header-h) + 80px); }
.lilla-lesson .lbr-cal__title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--ink-900); line-height: var(--lh-tight);
}
.lilla-lesson .lbr-cal__title.is-unlocked { animation: lbr-pop 420ms var(--ease-back) 1; }
.lilla-lesson .lbr-cal__title.is-unlocked .lbr-cal__ym { box-shadow: 0 0 0 3px var(--lemon-300); border-radius: var(--r-pill); padding: 0 10px; }
.lilla-lesson .lbr-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lilla-lesson .lbr-cal__wd { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500); padding: 4px 0; }
.lilla-lesson .lbr-cal__wd:first-child { color: var(--rose-500); }
.lilla-lesson .lbr-cal__wd:nth-child(7) { color: var(--sky-600); }
.lilla-lesson .lbr-cal__day {
  position: relative; aspect-ratio: 1; min-height: 40px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--ink-700); background: var(--surface-soft); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-back);
}
.lilla-lesson a.lbr-cal__day:hover { background: var(--sky-100); color: var(--sky-700); }
.lilla-lesson a.lbr-cal__day:active { transform: scale(.94); }
.lilla-lesson .lbr-cal__day.is-locked { opacity: .45; background: transparent; }
.lilla-lesson .lbr-cal__day.is-past { opacity: .35; } /* 過ぎた日は薄いだけ。鍵は「まだ開いていない日」だけ */
.lilla-lesson .lbr-cal__lock { position: absolute; top: 2px; right: 3px; color: var(--ink-300); display: grid; }
.lilla-lesson .lbr-cal__mark { position: absolute; right: 2px; bottom: 1px; display: grid; place-items: center; width: 22px; height: 22px; }
.lilla-lesson .lbr-cal__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.lilla-lesson .lbr-cal__day.is-done .lbr-cal__mark { color: var(--mint-600); }
.lilla-lesson .lbr-cal__day.is-booked { box-shadow: inset 0 0 0 2px var(--sky-300); }
.lilla-lesson .lbr-cal__day.is-booked .lbr-cal__mark svg { animation: lbr-bob-sm 4.4s var(--ease-soft) infinite; animation-delay: var(--d, 0s); }
.lilla-lesson .lbr-cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-500); }
/* 読み込み中は日セルがゆらぐ */
.lilla-lesson .lbr-cal__month.is-loading .lbr-cal__day:not(.is-locked) {
  background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--surface-soft) 37%, var(--surface-sunk) 63%);
  background-size: 400% 100%; animation: lbr-shimmer 1.4s ease infinite;
}
/* 空きのある日は左上から順に灯る */
.lilla-lesson .lbr-cal__day.is-open {
  background: var(--lemon-100); color: var(--ink-900); box-shadow: 0 0 0 2px var(--lemon-300);
  animation: lbr-light 300ms var(--ease-out) calc(var(--i, 0) * 25ms) both, lbr-glow 2.4s ease-in-out calc(var(--i, 0) * 25ms + 300ms) infinite;
}
.lilla-lesson .lbr-cal__day.is-open.is-booked { box-shadow: 0 0 0 2px var(--lemon-300), inset 0 0 0 2px var(--sky-300); }
.lilla-lesson .lbr-cal__day[aria-pressed="true"] { background: var(--grad-blue); color: var(--color-on-primary); box-shadow: none; animation: none; }
.lilla-lesson .lbr-cal__day[aria-pressed="true"] .lbr-cal__mark { color: var(--color-on-primary); }
.lilla-lesson .lbr-cal__month.is-empty .lbr-cal__grid { opacity: .7; }

/* 日パネル */
.lilla-lesson .lbr-day {
  margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--r-md);
  background: var(--surface-sunk); display: grid; gap: var(--space-3);
  /* JS が scrollIntoView(nearest) で寄せるときの余白。上は固定ヘッダー＋サマリー帯、下はボトムナビ */
  scroll-margin-top: calc(var(--header-h) + 80px);
  scroll-margin-bottom: calc(var(--bottomnav-h, 0px) + env(safe-area-inset-bottom, 0px) + 20px);
}
.lilla-lesson .lbr-day__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lilla-lesson .lbr-day__date { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.lilla-lesson .lbr-day__len { flex: 1 1 100%; font-size: var(--fs-sm); color: var(--ink-700); }
/* 時間のチップは同じ幅でそろえる（375px で4つ並び）。深夜枠の「26:00 13日 2:00」は2つぶんの幅 */
.lilla-lesson .lbr-day__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.lilla-lesson .lbr-day__slots .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; min-height: 44px; padding: 0 6px; white-space: nowrap;
}
.lilla-lesson .lbr-day__slots .chip:has(small) { grid-column: span 2; }
.lilla-lesson .lbr-day__slots .chip small { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-500); }
.lilla-lesson .lbr-day__slots .chip:active { transform: scale(.96); }

/* ---------------------------------------------------------------
   10. Step 3・4 コース・確認
   --------------------------------------------------------------- */
/* スマホでは Step3・4 の間、ページの見出し（BOOK＋レッスンを予約する）を畳む。確定ボタンが最初の画面に入るように。
   h1 は読み上げ用に残す（テーマの .sr-only と同じ形） */
@media (max-width: 860px) {
  .lilla-lesson .lbr-book:is([data-lbr-step="3"], [data-lbr-step="4"]) > .page-head {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
.lilla-lesson .check-grid { display: flex; flex-wrap: wrap; gap: 8px; }
/* コースの選択肢は横いっぱいの行（幅がばらばらだと、押せる範囲が分かりにくい） */
.lilla-lesson .lbr-course__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lilla-lesson .lbr-course__opts .check-chip { display: flex; width: 100%; min-height: 48px; border-radius: var(--r-md); line-height: var(--lh-snug); padding: 6px 14px; }
.lilla-lesson .lbr-course__opts .check-chip input { flex: none; }
.lilla-lesson .lbr-course__opts .check-chip input:focus-visible { outline: none; } /* 輪は行（label）に出る。二重にしない */
.lilla-lesson .lbr-course-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.lilla-lesson .lbr-course-form .field-label { display: block; margin: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); }
.lilla-lesson .lbr-course-form__hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug); }
.lilla-lesson .lbr-course-form .btn { margin-top: var(--space-2); }
/* えらぶまで「つぎへ」はうすい（JS が付ける。JS が無い経路は required が止める） */
.lilla-lesson .lbr-course-form .btn.is-waiting { opacity: .55; }

/* 確定ボタンを貼り付けるために flex の縦並び（grid の子は自分の段の中でしか sticky にならない） */
.lilla-lesson .lbr-confirm { display: flex; flex-direction: column; gap: var(--space-4); --lbr-card-pad: var(--space-5); }
@media (max-width: 560px) { .lilla-lesson .lbr-confirm { --lbr-card-pad: var(--space-4); } } /* テーマの .card は 560px 以下で余白が 16px になる */
.lilla-lesson .lbr-confirm__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-lesson .lbr-confirm__when .lbr-nb { margin-right: .3em; }
.lilla-lesson .lbr-confirm__when small { font-size: var(--fs-sm); color: var(--ink-700); font-weight: 500; }
/* だれと・どこで。先生の顔 + 名前 + 校舎 */
.lilla-lesson .lbr-confirm__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.lilla-lesson .lbr-confirm__who .lbr-cast__photo { width: 52px; height: 52px; }
.lilla-lesson .lbr-confirm__who-body { margin: 0; display: grid; gap: 2px; min-width: 0; }
.lilla-lesson .lbr-confirm__teacher { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--ink-900); line-height: var(--lh-tight); }
.lilla-lesson .lbr-confirm__where { margin: 0; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
.lilla-lesson .lbr-confirm__where svg { color: var(--sky-500); flex: none; }
/* 先生へのひとこと（0.1.40。確認画面の欄。コースの下・きまりの上） */
.lilla-lesson .lbr-confirm__note { display: grid; gap: 6px; }
.lilla-lesson .lbr-confirm__note .field-label { display: block; margin: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); }
/* 欄は 3行ぶん（rows=3）を床にして、lesson.js が中身に合わせて伸ばす（100字で 3〜4行。枠の下で切れない。0.1.40 の検証の直し） */
.lilla-lesson .lbr-confirm__note textarea.field { min-height: 110px; resize: none; }
.lilla-lesson .lbr-confirm__note textarea.field:disabled { opacity: .55; }
/* 説明と残り字数。1行に入らなければ残り字数だけ次の行の右へ（説明を単語の途中で折らない: keep-all。狭すぎるときだけ anywhere で折る） */
.lilla-lesson .lbr-confirm__note-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.lilla-lesson .lbr-confirm__note-foot .field-hint { margin: 0; flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.lilla-lesson .lbr-confirm__note-foot .lbr-confirm__note-count { flex: none; margin-left: auto; text-align: right; white-space: nowrap; } /* .field-hint の margin: 0 より強く（右へ寄せる） */
/* 回数と取消のきまり。予約の内容（上）と分けて、うすい下地にまとめる。読む字は本文寄りの色（下地の上で約 7:1） */
.lilla-lesson .lbr-confirm__rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--surface-sunk); }
.lilla-lesson .lbr-credit__note { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug); }
.lilla-lesson .lbr-confirm__deadline { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6; }
.lilla-lesson .lbr-confirm__deadline svg { flex: none; margin-top: 3px; color: var(--rose-500); }
.lilla-lesson .lbr-confirm > .btn--ghost { align-self: center; }
/* 確定ボタン。スマホでは下のナビのすぐ上に貼り付く（ホームの .lbr-cta-bar と同じ位置）。後ろの字はボタンの下地で隠す */
.lilla-lesson .lbr-confirm__cta { position: relative; }
@media (max-width: 860px) {
  .lilla-lesson .lbr-confirm__cta {
    position: sticky; z-index: 2;
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 8px);
  }
  .lilla-lesson .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%);
  }
}
/* その週7セル（飾り）。えらんだ日だけ下地。ほかの日は字だけ（時刻チップや日付ボタンと同じ見た目にしない） */
.lilla-lesson .lbr-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: start; }
.lilla-lesson .lbr-week__cell {
  display: grid; justify-items: center; align-content: start; gap: 2px;
  padding: 6px 0; border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--ink-500);
}
.lilla-lesson .lbr-week__cell b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--ink-700); line-height: 1; }
.lilla-lesson .lbr-week__cell.is-selected { background: var(--lemon-100); box-shadow: 0 0 0 2px var(--lemon-300); color: var(--ink-700); }
.lilla-lesson .lbr-week__cell.is-selected b { color: var(--ink-900); }
.lilla-lesson .lbr-week__buddy { width: 28px; height: 22px; display: grid; place-items: center; }
.lilla-lesson .lbr-week__buddy svg { display: block; width: 100%; height: auto; overflow: visible; animation: lbr-bob-sm 4.4s var(--ease-soft) infinite; }
.lilla-lesson .lbr-week__note { grid-column: 1 / -1; text-align: center; font-size: var(--fs-xs); color: var(--ink-700); }
.lilla-lesson .lbr-credit { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-base); color: var(--ink-700); }
.lilla-lesson .lbr-credit b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--sky-700); line-height: 1; }
.lilla-lesson .lbr-credit svg { color: var(--rose-500); }
.lilla-lesson .lbr-course { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-base); color: var(--ink-700); }
.lilla-lesson .lbr-course__line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lilla-lesson .lbr-course__label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-700); letter-spacing: .04em; }
.lilla-lesson .lbr-course__line b { color: var(--ink-900); }
/* 「変える」はコース名の右。開いたら下の段いっぱいに選択肢を出し、同じボタンが「とじる」になる */
.lilla-lesson .lbr-course { justify-content: space-between; }
.lilla-lesson .lbr-course__picker { flex: 0 0 auto; }
.lilla-lesson .lbr-course__picker[open] { flex: 1 1 100%; }
.lilla-lesson .lbr-course__picker summary { list-style: none; cursor: pointer; width: fit-content; }
.lilla-lesson .lbr-course__picker summary::-webkit-details-marker { display: none; }
/* 開いている間の「とじる」は、閉じているときの「変える」と同じ場所（コース名の右）に居る */
.lilla-lesson .lbr-course { position: relative; }
.lilla-lesson .lbr-course__line { min-height: 44px; }
.lilla-lesson .lbr-course__picker[open] summary { position: absolute; top: 0; right: 0; }
.lilla-lesson .lbr-course:has(.lbr-course__picker[open]) .lbr-course__line { padding-right: 104px; }
.lilla-lesson .lbr-course__picker[open] .lbr-course__opts { margin-top: 0; }
.lilla-lesson .lbr-course__close,
.lilla-lesson .lbr-course__picker[open] .lbr-course__open { display: none; }
.lilla-lesson .lbr-course__picker[open] .lbr-course__close { display: inline; }
.lilla-lesson .lbr-course__picker .lbr-course__opts { margin-top: var(--space-3); }
.lilla-lesson .btn.is-busy { opacity: .7; pointer-events: none; }

/* ---------------------------------------------------------------
   11. 確定演出 .lbr-yatta（自動遷移なし）
   --------------------------------------------------------------- */
.lilla-lesson .lbr-yatta {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--space-4);
  /* 下の確認画面の字が透けると「やったー！」「あと◯日」に重なって読みにくいので、透かさない。色はホームのヒーローと同じ並び */
  background: linear-gradient(160deg, var(--sky-100), var(--lav-100) 60%, var(--rose-100));
  animation: lbr-fade 200ms var(--ease-out) both;
  overflow-y: auto; overscroll-behavior: contain;
}
.lilla-lesson .lbr-yatta[hidden] { display: none; }
.lilla-lesson .lbr-yatta__panel {
  position: relative; width: min(100%, 420px);
  display: grid; justify-items: center; gap: var(--space-3); text-align: center;
}
.lilla-lesson .lbr-yatta__art { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.lilla-lesson .lbr-yatta__art .evolve__burst { inset: -30px; overflow: visible; }
.lilla-lesson .lbr-yatta__buddy { position: relative; z-index: 1; width: 200px; height: 200px; display: grid; place-items: center; }
.lilla-lesson .lbr-yatta__buddy svg { display: block; width: 100%; height: auto; overflow: visible; opacity: 0; }
.lilla-lesson .lbr-yatta__buddy svg.mascot--evolving { opacity: 1; }
.lilla-lesson .lbr-yatta__star { color: var(--lemon-300); }
.lilla-lesson .lbr-notes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.lilla-lesson .lbr-notes span {
  position: absolute; top: 46%; left: calc(50% + (var(--i, 0) - 2.5) * 34px);
  color: var(--rose-400); opacity: 0;
  animation: lbr-rise-fade 1.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 300ms);
}
.lilla-lesson .lbr-notes span:nth-child(even) { color: var(--sky-500); }
.lilla-lesson .lbr-yatta__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); color: var(--rose-600); line-height: var(--lh-tight); opacity: 0; }
.lilla-lesson .lbr-yatta__days { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); color: var(--sky-700); line-height: var(--lh-tight); opacity: 0; display: flex; align-items: baseline; gap: .15em; }
.lilla-lesson .lbr-yatta__days small { font-size: .45em; color: var(--ink-700); }
.lilla-lesson .lbr-yatta__days b { font-size: 1.5em; line-height: 1; } /* 「あと◯日」の数字がこの画面の主役 */
/* 「予約できました」— 本当に取れたのかを確かめたい人のための事実の1行。濃い色で */
.lilla-lesson .lbr-yatta__done {
  margin: 0; display: inline-flex; align-items: center; gap: 6px; opacity: 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--ink-900); line-height: var(--lh-tight);
}
.lilla-lesson .lbr-yatta__done svg { flex: none; color: var(--mint-600); }
/* 予約の内容。本文の色で読める大きさ（小さいグレーの1行にしない） */
.lilla-lesson .lbr-yatta__detail {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 100%;
  padding: var(--space-3) var(--space-4); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.lilla-lesson .lbr-yatta__detail p { margin: 0; font-size: 0.9375rem; color: var(--ink-700); line-height: var(--lh-snug); }
.lilla-lesson .lbr-yatta__detail .lbr-yatta__when { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--ink-900); }
.lilla-lesson .lbr-yatta__when small { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-700); }
.lilla-lesson .lbr-yatta__who { font-weight: 700; }
.lilla-lesson .lbr-yatta__course:empty { display: none; }
.lilla-lesson .lbr-yatta__hitokoto { overflow-wrap: anywhere; }
.lilla-lesson .lbr-yatta__hitokoto .lbr-hitokoto__mark { color: var(--rose-500); font-weight: 700; }

/* 先生へのひとこと（0.1.40。parts/booking-note.php。ホームの次のレッスン・これからの予約・予約一覧）。
   書いてあれば「♪ 先生へのひとこと ◯◯」の小さな吹き出し、始まるまでは「ひとことを直す」（details。JS が hidden を外す） */
.lilla-lesson .lbr-hitokoto { display: grid; gap: 6px; justify-items: start; max-width: 100%; }
.lilla-lesson .lbr-hitokoto__line {
  margin: 0; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; max-width: 100%;
  padding: 5px 12px; border-radius: var(--r-md); background: var(--lemon-100); color: var(--ink-900);
  font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere;
}
.lilla-lesson .lbr-hitokoto__line[hidden] { display: none; }
.lilla-lesson .lbr-hitokoto__mark { color: var(--rose-500); font-weight: 700; }
.lilla-lesson .lbr-hitokoto__label { font-size: var(--fs-xs); color: var(--ink-700); }
.lilla-lesson .lbr-hitokoto__edit { max-width: 100%; }
.lilla-lesson .lbr-hitokoto__edit[hidden] { display: none; }
.lilla-lesson .lbr-hitokoto__toggle { list-style: none; cursor: pointer; display: inline-flex; }
.lilla-lesson .lbr-hitokoto__toggle::-webkit-details-marker { display: none; }
.lilla-lesson .lbr-hitokoto__form { display: grid; gap: 6px; margin-top: 8px; width: min(100%, 440px); }
.lilla-lesson .lbr-hitokoto__form .field-label { display: block; margin: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); }
.lilla-lesson .lbr-hitokoto__form textarea.field { min-height: 110px; resize: none; }
/* 説明と残り字数。一覧のカードの中は確認画面より狭いので、1行に入らなければ残り字数だけ次の行の右へ（説明は keep-all で単語の途中で折らない） */
.lilla-lesson .lbr-hitokoto__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.lilla-lesson .lbr-hitokoto__foot .field-hint { margin: 0; flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.lilla-lesson .lbr-hitokoto__foot .lbr-hitokoto__count { flex: none; margin-left: auto; white-space: nowrap; } /* .field-hint の margin: 0 より強く（右へ寄せる） */
/* 2行目の説明「レッスンが始まるまで直せます。空にして保存すると消えます」（残り字数の横に置くと 375px で単語の途中で折れる） */
.lilla-lesson .lbr-hitokoto__when { display: block; margin: 0; }
.lilla-lesson .lbr-hitokoto__actions { gap: 8px; }
.lilla-lesson .lbr-hitokoto__go { font-size: var(--fs-sm); color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; }
/* 相棒の一言は相棒のすぐ下。しっぽは上向き（相棒を指す） */
.lilla-lesson .lbr-yatta__say { opacity: 0; margin-top: -4px; color: var(--ink-900); }
.lilla-lesson .lbr-yatta__say::before { left: 50%; top: -4px; transform: translateX(-50%) rotate(45deg); }
.lilla-lesson .lbr-yatta__say.is-in { opacity: 1; }
.lilla-lesson .lbr-yatta__title.is-in,
.lilla-lesson .lbr-yatta__done.is-in,
.lilla-lesson .lbr-yatta__days.is-in { animation: lbr-bubble-in 240ms var(--ease-out) both; }
.lilla-lesson .lbr-yatta__actions { display: grid; gap: 10px; width: 100%; margin-top: var(--space-2); animation: lbr-bubble-in 240ms var(--ease-out) both; }
.lilla-lesson .lbr-yatta__actions[hidden] { display: none; }
.lilla-lesson .lbr-yatta__note { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); }

/* ---------------------------------------------------------------
   11b. 復帰届 .lbr-resume（/lesson/resume/）
   --------------------------------------------------------------- */
.lilla-lesson .lbr-resume__hero .lbr-hero__inner { gap: var(--space-3); }
.lilla-lesson .lbr-resume__form { display: grid; gap: var(--space-4); }
.lilla-lesson .lbr-resume__form .lbr-card__title { margin-bottom: 0; }
.lilla-lesson .lbr-resume__course { margin: 0; font-size: var(--fs-sm); }
.lilla-lesson .lbr-resume__opts { display: grid; gap: 10px; }
/* 月の選択肢はカード型の radio。選ばれた1枚だけ sky の枠で立つ */
.lilla-lesson .lbr-resume__opt {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-soft); box-shadow: inset 0 0 0 2px transparent;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-back);
}
.lilla-lesson .lbr-resume__opt:hover { background: var(--sky-50); }
.lilla-lesson .lbr-resume__opt:active { transform: scale(.985); }
.lilla-lesson .lbr-resume__opt input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--sky-500); cursor: pointer; }
.lilla-lesson .lbr-resume__opt:has(input:checked) { background: var(--sky-100); box-shadow: inset 0 0 0 2px var(--sky-400); }
.lilla-lesson .lbr-resume__opt:has(input:focus-visible) { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.lilla-lesson .lbr-resume__opt-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.lilla-lesson .lbr-resume__opt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lilla-lesson .lbr-resume__month { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--ink-900); line-height: var(--lh-tight); }
.lilla-lesson .lbr-resume__opt .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; }
.lilla-lesson .lbr-resume__desc { font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug); }
.lilla-lesson .lbr-resume__opt[data-mode="airpay"]:has(input:checked) { background: var(--lemon-100); box-shadow: inset 0 0 0 2px var(--lemon-300); }
/* 復帰月がもう決まっている月（受付ずみ・押せない。0.1.22 検証） */
.lilla-lesson .lbr-resume__opt[data-mode="done"] { cursor: default; }
.lilla-lesson .lbr-resume__opt[data-mode="done"]:active { transform: none; }
.lilla-lesson .lbr-resume__opt[data-mode="done"] input { cursor: default; accent-color: var(--mint-600); }
.lilla-lesson .lbr-resume__opt[data-mode="done"]:has(input:checked) { background: var(--mint-100); box-shadow: inset 0 0 0 2px var(--mint-200); }
/* 注意書き。お金の話なので、吹き出しではなく本文で */
.lilla-lesson .lbr-resume__notes { display: grid; gap: 8px; }
.lilla-lesson .lbr-resume__note {
  margin: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--lav-100); color: var(--lav-500); font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-snug);
}
.lilla-lesson .lbr-resume__note svg { flex: none; margin-top: 2px; }
.lilla-lesson .lbr-resume__note--airpay { background: var(--lemon-100); color: var(--lemon-600); animation: lbr-bubble-in 240ms var(--ease-out) both; }
.lilla-lesson .lbr-resume__explain { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-base); }
.lilla-lesson .lbr-resume__form .btn--ghost { justify-self: center; }
/* 受付済み */
.lilla-lesson .lbr-resume__done { display: grid; gap: var(--space-3); }
.lilla-lesson .lbr-resume__done .lbr-card__title { margin-bottom: 0; }
.lilla-lesson .lbr-resume__lead { margin: 0; font-size: var(--fs-base); color: var(--ink-900); line-height: var(--lh-base); }
.lilla-lesson .lbr-resume__body { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-base); }
.lilla-lesson .lbr-resume__done .field-hint { margin: -6px 0 0; text-align: center; }
.lilla-lesson .lbr-resume__actions { flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------
   11c. はじめての方へ .lbr-welcome（/lesson/welcome/）
   相棒は居ない。ヒーローの中は文と体験レッスンのボタン、下に「生徒様だけができること」と先生20名
   --------------------------------------------------------------- */
.lilla-lesson .lbr-welcome,
.lilla-lesson .lbr-listpage { display: grid; gap: var(--space-5); min-width: 0; }
.lilla-lesson :is(.lbr-welcome, .lbr-listpage, .lbr-perks, .lbr-perk__body, .lbr-history__months, .lbr-history__month) { grid-template-columns: minmax(0, 1fr); }
.lilla-lesson .lbr-welcome__hero .lbr-hero__inner { gap: var(--space-3); }
.lilla-lesson .lbr-welcome__lead {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--sky-700);
}
.lilla-lesson .lbr-welcome__sub { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-base); }
.lilla-lesson .lbr-welcome__note { margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.lilla-lesson .lbr-welcome__body { margin: 0 0 var(--space-4); font-size: var(--fs-base); color: var(--ink-700); line-height: var(--lh-base); }
.lilla-lesson .lbr-welcome__trial .field-hint { margin: var(--space-2) 0 0; text-align: center; }

/* 生徒様だけができること。アイコン＋見出し＋一文の3行 */
.lilla-lesson .lbr-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.lilla-lesson .lbr-perk {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--surface-sunk);
}
.lilla-lesson .lbr-perk__icon {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--sky-100); color: var(--sky-700);
}
.lilla-lesson .lbr-perk__body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.lilla-lesson .lbr-perk__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--ink-900); line-height: var(--lh-tight); }
.lilla-lesson .lbr-perk__text { font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-snug); }
/* 半券の見本。ホームの半券と同じ絵で、切り欠きの色だけ下地（surface-sunk）に合わせる */
.lilla-lesson .lbr-perk__stubs { margin: var(--space-2) 0 0; }
.lilla-lesson .lbr-perk__stubs .lbr-stub::before,
.lilla-lesson .lbr-perk__stubs .lbr-stub::after { background: var(--surface-sunk); }

/* 先生のカード。予約フローの .lbr-cast をそのまま使い、担当コースの一行を足す。在籍中の人にだけリンク */
.lilla-lesson .lbr-welcome__grid { margin-top: var(--space-2); }
.lilla-lesson .lbr-welcome__cast { align-items: flex-start; }
.lilla-lesson .lbr-welcome__cast .lbr-cast__photo { margin-top: 2px; }
.lilla-lesson .lbr-welcome__cast .lbr-cast__go { align-self: center; }
.lilla-lesson .lbr-welcome__courses { line-height: var(--lh-snug); color: var(--ink-700); margin-top: 2px; }
.lilla-lesson .lbr-welcome__mismatch { align-items: flex-start; }
.lilla-lesson .lbr-welcome__mismatch .lbr-notice__text { align-items: flex-start; line-height: var(--lh-snug); }
.lilla-lesson .lbr-welcome__mismatch svg { margin-top: 3px; }

/* ---------------------------------------------------------------
   11d. 予約一覧・受講履歴 .lbr-listpage（/lesson/list/）
   上に「これからの予約」（ホームと同じ .log-item）、下に月ごとの受講履歴
   --------------------------------------------------------------- */
.lilla-lesson .lbr-listpage .lbr-metrics a.metric { text-decoration: none; }
.lilla-lesson .lbr-listpage__empty { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-base); }
.lilla-lesson .lbr-listpage__actions { margin-top: var(--space-4); flex-wrap: wrap; }
/* 予約の開始月より前（0.1.22）: ボタンの代わりの1行「11月の予約は 10月20日（火）12:00 から」と、受講の記録が空のときの添え書き */
.lilla-lesson .lbr-listpage__opens { margin: var(--space-4) 0 0; font-size: var(--fs-sm); line-height: var(--lh-base); }
.lilla-lesson .lbr-listpage__note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); line-height: var(--lh-base); }
.lilla-lesson .lbr-list__now { box-shadow: inset 0 0 0 2px var(--sky-300); }
.lilla-lesson .lbr-list__now .pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }

.lilla-lesson .lbr-history__hint { margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.lilla-lesson .lbr-history__hint a { color: var(--sky-700); font-weight: 700; }
.lilla-lesson .lbr-history__months { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.lilla-lesson .lbr-history__month { display: grid; gap: var(--space-2); }
/* 月の見出し。左に小さな丸、右に回数 */
.lilla-lesson .lbr-history__ym {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--ink-900); line-height: var(--lh-tight);
}
.lilla-lesson .lbr-history__ym::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky-400); align-self: center; flex: none; }
.lilla-lesson .lbr-history__ym small { font-size: var(--fs-xs); font-weight: 700; }
.lilla-lesson .lbr-history__item .log-item__head .pill { display: inline-flex; align-items: center; }
.lilla-lesson .lbr-history__nth { margin-left: auto; }
.lilla-lesson .lbr-history__item.is-consumed .log-item__date { color: var(--ink-500); }
/* 先生からの一言。行の中の小さな吹き出し。本文はプレミアムだけ、ほかの人は「届いています」 */
.lilla-lesson .lbr-history__note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.lilla-lesson .lbr-history__note-icon { flex: none; display: grid; color: var(--sky-500); margin-top: 3px; }
.lilla-lesson .lbr-history__note-body { margin: 0; font-size: var(--fs-sm); color: var(--ink-900); line-height: var(--lh-base); min-width: 0; }
.lilla-lesson .lbr-history__note-by { display: inline-block; margin-left: 8px; font-size: var(--fs-xs); color: var(--ink-500); white-space: nowrap; }
.lilla-lesson .lbr-history__note--locked { background: var(--lav-100); }
.lilla-lesson .lbr-history__note--locked .lbr-history__note-icon { color: var(--lav-500); }
.lilla-lesson .lbr-history__note--locked .lbr-history__note-body { color: var(--lav-500); font-weight: 700; }
.lilla-lesson .lbr-history__unlock { margin-left: 6px; color: var(--sky-700); font-weight: 700; white-space: nowrap; }
/* それより前（畳む） */
.lilla-lesson .lbr-history__older { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.lilla-lesson .lbr-history__older summary { list-style: none; cursor: pointer; width: fit-content; justify-self: center; }
.lilla-lesson .lbr-history__older summary::-webkit-details-marker { display: none; }
.lilla-lesson .lbr-history__older[open] summary { display: none; }
.lilla-lesson .lbr-history__older .lbr-history__months { margin-top: 0; }

@media (max-width: 560px) {
  .lilla-lesson .lbr-welcome__lead { font-size: var(--fs-lg); }
  .lilla-lesson .lbr-welcome__hero .lbr-hero__actions .btn--ghost { flex: 0 0 auto; }
  .lilla-lesson .lbr-perk { padding: var(--space-3); }
  .lilla-lesson .lbr-history__note-by { display: block; margin: 2px 0 0; text-align: right; }
}

/* ---------------------------------------------------------------
   12. Keyframes（すべて lbr- 接頭辞）
   --------------------------------------------------------------- */
@keyframes lbr-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes lbr-bob-sm { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes lbr-hop { 0% { transform: translateY(0) } 40% { transform: translateY(-22px) scale(1.04) } 70% { transform: translateY(0) scale(.97) } 100% { transform: none } }
@keyframes lbr-float { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-8px) rotate(6deg) } }
@keyframes lbr-drip { 0% { transform: translateY(0); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(6px); opacity: 0 } }
@keyframes lbr-rise { 0% { transform: translateY(4px); opacity: 0 } 40% { opacity: 1 } 100% { transform: translateY(-10px); opacity: 0 } }
@keyframes lbr-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: .7 } 50% { transform: scale(1.22) rotate(14deg); opacity: 1 } }
@keyframes lbr-pop { 0% { transform: scale(1) } 45% { transform: scale(1.12) } 100% { transform: scale(1) } }
@keyframes lbr-bubble-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes lbr-glow { 0%, 100% { box-shadow: 0 0 0 2px var(--lemon-300) } 50% { box-shadow: 0 0 0 5px var(--lemon-200) } }
@keyframes lbr-light { from { background-color: var(--surface-soft); box-shadow: none } to { background-color: var(--lemon-100); box-shadow: 0 0 0 2px var(--lemon-300) } }
@keyframes lbr-stub-in { to { opacity: var(--stub-opacity, 1); transform: none } }
@keyframes lbr-shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
@keyframes lbr-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lbr-rise-fade { 0% { transform: translateY(0) scale(.6); opacity: 0 } 25% { opacity: 1 } 100% { transform: translateY(-90px) scale(1.1); opacity: 0 } }
@keyframes lbr-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rose-600) 42%, transparent) } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--rose-600) 0%, transparent) } }
@keyframes lbr-draw { from { stroke-dashoffset: 24 } to { stroke-dashoffset: 0 } }

/* 今日の点は lbr-glow を丸に合わせて使う */
.lilla-lesson .lbr-path__dot.is-today { animation-name: lbr-glow-dot; }
@keyframes lbr-glow-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sky-500) 45%, transparent) } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sky-500) 0%, transparent) } }

/* ---------------------------------------------------------------
   13. Responsive（360〜430px を最優先）
   --------------------------------------------------------------- */
@media (max-width: 560px) {
  .lilla-lesson .lbr-hero { padding: var(--space-5); }
  .lilla-lesson .lbr-hero__inner { gap: var(--space-3); }
  .lilla-lesson .lbr-hero .lbr-buddy__art { width: 88px; height: 88px; }
  .lilla-lesson .lbr-buddy .pill { padding: 3px 10px; }
  .lilla-lesson .lbr-hero__buddy-row { gap: var(--space-3); }
  .lilla-lesson .lbr-hero__course,
  .lilla-lesson .lbr-hero__course + .lbr-sep,
  .lilla-lesson .lbr-sep:has(+ .lbr-hero__course) { display: none; }
  .lilla-lesson .lbr-hero__actions .btn { flex: 1 1 auto; }
  .lilla-lesson .lbr-cast-grid { grid-template-columns: 1fr; }
  .lilla-lesson .lbr-links .btn { margin-left: 0; width: 100%; }
  .lilla-lesson .lbr-cal__month { padding: var(--space-3); }
  .lilla-lesson .lbr-cal__grid { gap: 3px; }
  .lilla-lesson .lbr-cal__day { min-height: 44px; border-radius: var(--r-xs); } /* 幅は 43px 前後。高さでタップ領域 44px を保つ */
  .lilla-lesson .lbr-yatta__art { width: 180px; height: 180px; }
  .lilla-lesson .lbr-yatta__buddy { width: 160px; height: 160px; }
}
@media (max-width: 380px) {
  .lilla-lesson .lbr-hero { padding: var(--space-4); }
  .lilla-lesson .lbr-hero .lbr-buddy__art { width: 76px; height: 76px; }
  .lilla-lesson .lbr-stub { width: 46px; height: 32px; }
  .lilla-lesson .lbr-stub--gold { width: auto; } /* 金の半券はラベル幅。上の行に負けて縦に折れないように */
}

/* 背の低い画面（667px など）でもボタンまで入るように、相棒を小さくする */
@media (max-height: 740px) {
  .lilla-lesson .lbr-yatta__art { width: 140px; height: 140px; }
  .lilla-lesson .lbr-yatta__buddy { width: 124px; height: 124px; }
  .lilla-lesson .lbr-yatta__panel { gap: var(--space-2); }
}

/* ---------------------------------------------------------------
   13b. オンラインのお部屋（0.1.32。online-room-spec.md 2・3章。LBR_Room）
   入口 .lbr-room-entry（ホームの次のレッスン・予約の一覧）と、お部屋のページ /lesson/room/（.lilla-room）。
   お部屋のカードは先生・事務の見本（/lesson/staff/rooms/。.lilla-lesson も付いている）でも同じものを使う。
   375px で押せる高さは 44px 以上（大きなボタンは 56px）。コピーのボタンは字の横に
   --------------------------------------------------------------- */
/* 入口: 開いているときは押せるボタン、開く前は押せない形＋「当日の 13:45 から入れます」 */
.lilla-lesson .lbr-room-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 0; }
.lilla-lesson .lbr-room-entry__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lilla-lesson .lbr-room-entry__btn svg { flex: none; }
.lilla-lesson .lbr-room-entry.is-wait .lbr-room-entry__btn { opacity: .55; cursor: default; pointer-events: none; box-shadow: none; }
.lilla-lesson .lbr-room-entry__when { font-size: var(--fs-sm); font-weight: 700; color: var(--sky-700); }
.lilla-lesson .lbr-room-entry--lg .lbr-room-entry__btn { min-height: 48px; }
.lilla-lesson .lbr-room-open-notice .lbr-room-entry { margin: 0; }

/* ページの骨組み（ログインしていない体験のお客様は 640px の 1列） */
.lilla-room .lbr-room-wrap { max-width: 640px; }
.lilla-room .lbr-room { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.lilla-room .lbr-room > .page-head, .lilla-room .lbr-room > .notice-card { margin-bottom: 0; }
.lilla-room .lbr-room__back { margin: 0; }
/* 縦に並べる帯（先生・事務の見本・開く前の「時間になったら、このページを開き直してください」）。.lbr-notice__text の flex: 1 1 200px が
   縦向きでは高さ 200px になって間延びするので、高さは中身のまま（flex: none） */
.lilla-room .lbr-room__sample, .lilla-room .lbr-room__wait { flex-direction: column; align-items: flex-start; gap: 4px; }
.lilla-room .lbr-room__sample .lbr-notice__text, .lilla-room .lbr-room__wait .lbr-notice__text { flex: none; }
.lilla-room .lbr-room__sample small, .lilla-room .lbr-room__wait small { font-size: var(--fs-xs); line-height: var(--lh-snug); }
.lilla-room .lbr-room__wait small { padding-left: 26px; font-weight: 600; }
/* 帯の中のボタン（事務の「オンラインのお部屋 →」・見本の「お部屋を設定する →」）も 44px */
.lilla-room .lbr-notice .btn { min-height: 44px; }
/* ログインしていない体験のお客様には、会員向けの部品（ヘッダの CTA・ドロワー・下のナビ・サイドナビ）を出さない。
   フッターも会員向けの列（サービス・料金プラン など）は出さず、/taiken/ と同じ小さなフッター（templates/lbr-room.php） */
body.lbr-room-guest .site-header .header-cta,
body.lbr-room-guest #drawer,
body.lbr-room-guest .bottom-nav,
body.lbr-room-guest .side-nav { display: none !important; }
body.lbr-room-guest .app-main { padding-bottom: var(--space-8); }
body.lbr-room-guest .lbr-room-footer .footer-bottom { flex-wrap: wrap; gap: 8px; }

/* 先生と日時 */
.lilla-lesson .lbr-room-who { display: flex; align-items: center; gap: var(--space-3); }
.lilla-lesson .lbr-room-who__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--sky-50); }
.lilla-lesson span.lbr-room-who__photo { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 700; color: var(--sky-700); background: var(--sky-100); }
.lilla-lesson .lbr-room-who__body { display: grid; gap: 2px; min-width: 0; }
.lilla-lesson .lbr-room-who__body p { margin: 0; }
.lilla-lesson .lbr-room-who__teacher { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-900); line-height: var(--lh-tight); }
.lilla-lesson .lbr-room-who__when { font-weight: 700; color: var(--ink-900); }
.lilla-lesson .lbr-room-who__when small { font-weight: 500; color: var(--ink-500); }
.lilla-lesson .lbr-room-who__when.is-sample { font-weight: 500; color: var(--ink-500); font-size: var(--fs-sm); }
.lilla-lesson .lbr-room-who__course { font-size: var(--fs-sm); color: var(--ink-700); overflow-wrap: anywhere; }

/* お部屋のカード（大きなボタン・ID・パスコード・先生のひとこと） */
.lilla-lesson .lbr-room-card { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); text-align: center; }
.lilla-lesson .lbr-room-card__lead { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--ink-900); line-height: var(--lh-snug); }
/* 大きなボタン。375px でも「Zoomでレッスンに参加する」が 1行に入る字の大きさ（入らない端末では折り返す） */
.lilla-lesson .lbr-room-card__join { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-left: 16px; padding-right: 16px; font-size: var(--fs-base); white-space: normal; text-align: center; line-height: var(--lh-tight); text-wrap: balance; }
.lilla-lesson .lbr-room-card__join svg { flex: none; }
/* ボタンの文は「Zoomで／レッスンに参加する」の間でだけ折る（JOIN_LABEL_PARTS。320px でも語の途中で折れない） */
.lilla-lesson .lbr-room-card__join-label { min-width: 0; }
.lilla-lesson .lbr-room-card__tab { margin: -4px 0 0; font-size: var(--fs-xs); }
.lilla-lesson .lbr-room-info { display: grid; gap: 8px; margin: 0; text-align: left; }
.lilla-lesson .lbr-room-info__row { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-soft, var(--sky-50)); }
.lilla-lesson .lbr-room-info dt { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500); }
.lilla-lesson .lbr-room-info dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.lilla-lesson .lbr-room-info__value { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); font-weight: 700; color: var(--ink-900); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.lilla-lesson .lbr-room-info__copy { min-height: 44px; min-width: 88px; }
.lilla-lesson .lbr-room-info__copy.is-done { color: var(--mint-600); }
.lilla-lesson .lbr-room-card__note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--lemon-100); text-align: left; }
.lilla-lesson .lbr-room-card__note p { margin: 0; color: var(--ink-900); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.lilla-lesson .lbr-room-card__note b { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.lilla-lesson .lbr-room-card__note-icon { flex: none; margin-top: 2px; color: var(--lemon-600); }

/* レッスンの準備・つながらないとき・本人でないとき */
.lilla-lesson .lbr-room-prep__list { margin: 0; padding-left: 1.2em; list-style: disc; display: grid; gap: 6px; color: var(--ink-700); line-height: var(--lh-base); }
.lilla-lesson .lbr-room-help__lead { margin: 0 0 6px; color: var(--ink-700); }
.lilla-lesson .lbr-room-help__line { margin: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-base); color: var(--ink-700); }
.lilla-lesson .lbr-room-help__line svg { flex: none; color: var(--sky-500); }
.lilla-lesson .lbr-room-help__line a { font-weight: 700; color: var(--sky-700); overflow-wrap: anywhere; }
.lilla-lesson .lbr-room-msg { display: grid; gap: var(--space-2); }
.lilla-lesson .lbr-room-msg p { margin: 0; }
.lilla-lesson .lbr-room-msg__text { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; color: var(--ink-900); line-height: var(--lh-snug); }
.lilla-lesson .lbr-room-msg__text svg { flex: none; margin-top: 2px; color: var(--ink-500); }
.lilla-lesson .lbr-room-msg__sub { font-size: var(--fs-sm); color: var(--ink-700); }
.lilla-lesson .lbr-room-msg .btn { min-height: 44px; }

/* ---------------------------------------------------------------
   14. reduced-motion。テーマ側で data-reveal は即表示になる
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lilla-lesson *, .lilla-lesson *::before, .lilla-lesson *::after { animation: none !important; transition: none !important; }
  .lilla-lesson .lbr-cal__day.is-open { box-shadow: 0 0 0 2px var(--lemon-300); }
  .lilla-lesson .lbr-buddy--lean svg, .lilla-lesson .lbr-buddy--hop svg, .lilla-lesson .lbr-stub { transform: none !important; opacity: var(--stub-opacity, 1) !important; }
  .js .lilla-lesson .lbr-stub { opacity: var(--stub-opacity, 1) !important; transform: none !important; }
  .js .lilla-lesson .lbr-cta-bar:not(.is-shown) { transform: none; }
  .lilla-lesson .lbr-yatta__title, .lilla-lesson .lbr-yatta__done, .lilla-lesson .lbr-yatta__days, .lilla-lesson .lbr-yatta__say, .lilla-lesson .lbr-yatta__buddy svg { opacity: 1 !important; }
}

/* ---------------------------------------------------------------
   追加チケット（0.1.58。ticket-order-spec.md 2章）
   ホームの「◯月のレッスン」のカードの下: お支払いの確認待ちの行と「追加チケットを買う」。買うページ /lesson/?lbr_view=buy（.lbr-buy）
   --------------------------------------------------------------- */
.lilla-lesson .lbr-torder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--ink-200); justify-items: start; }
.lilla-lesson .lbr-torder__buy { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.lilla-lesson .lbr-torder__waits { display: grid; gap: 8px; width: 100%; }
.lilla-lesson .lbr-torder__wait { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--lav-50, var(--surface-sunk)); }
.lilla-lesson .lbr-torder__wait-text { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); line-height: var(--lh-snug); }
.lilla-lesson .lbr-torder__wait-text svg { flex: none; margin-top: 2px; color: var(--sky-500); }
.lilla-lesson .lbr-torder__cancel-form { margin: 0; }
.lilla-lesson .lbr-torder__cancel {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.lilla-lesson .lbr-torder__cancel:hover { color: var(--sky-500); }
.lilla-lesson .lbr-torder-line { margin: var(--space-2) 0 0; font-size: var(--fs-sm); font-weight: 700; }
.lilla-lesson .lbr-torder-line a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky-700); }
.lilla-lesson .lbr-book > .lbr-torder-line { margin: 0; }
.lilla-lesson .lbr-buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.lilla-lesson .lbr-buy > .notice-card { margin-bottom: 0; }
.lilla-lesson .lbr-buy__waits { display: grid; gap: var(--space-2); }
.lilla-lesson .lbr-buy__waits .field-hint { margin: 0; }
.lilla-lesson .lbr-buy__lead { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--ink-900); line-height: var(--lh-snug); }
.lilla-lesson .lbr-buy__price { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--sky-700); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.lilla-lesson .lbr-buy__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lilla-lesson .lbr-buy__points li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-700); }
.lilla-lesson .lbr-buy__points svg { flex: none; color: var(--sky-500); }
.lilla-lesson .lbr-buy__flow { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 10px; }
.lilla-lesson .lbr-buy__flow li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-base); color: var(--ink-900); line-height: var(--lh-snug); }
.lilla-lesson .lbr-buy__no {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sky-100); color: var(--sky-700); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
}
.lilla-lesson .lbr-buy__name { margin: 0; font-size: var(--fs-sm); }
.lilla-lesson .lbr-buy__buttons { display: grid; gap: 10px; }
.lilla-lesson .lbr-buy__form { margin: 0; }
.lilla-lesson .lbr-buy__form .btn.is-busy,
.lilla-lesson .lbr-torder__cancel-form .is-busy { opacity: .6; pointer-events: none; }
.lilla-lesson .lbr-buy__hint { margin: var(--space-2) 0 0; }