/* 「最近いただいたご予約」の帯（公式HP・会員サイト・温音で共通）。色はページ側で --rb-* を上書きする。
   正本は website/recent-bookings.css。apps/lovelia-member/public/ は同じ内容の写し。
   見た目（オーナー決定 2026-11-09）：上下に細い線・小さな英字の見出し・中央寄せ・明朝体・メニュー名だけアクセント色。枠・背景・先頭の点は付けない。
   明朝体はページ側で --rb-font を指定するとそれを使う（公式HPは見出しと同じ Noto Serif JP）。 */
.rb[hidden] { display: none !important; }
.rb {
  --rb-fg: #5a4636;
  --rb-sub: #8a7462;
  --rb-accent: #c8724b;
  --rb-border: rgba(200, 114, 75, .28);
  --rb-bg: #fffdf9; /* 一覧（ダイアログ）の背景 */
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 12px 4px;
  border-top: 1px solid var(--rb-border); border-bottom: 1px solid var(--rb-border);
  color: var(--rb-fg); text-align: center;
  font-family: var(--rb-font, "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  font-size: .88rem; line-height: 1.6; letter-spacing: .08em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rb:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 4px; }
.rb-title {
  margin: 0; font: 10px/1.4 Georgia, "Times New Roman", serif; letter-spacing: .28em; color: var(--rb-accent);
}
.rb-line {
  margin: 0; max-width: 100%;
  /* 日付・メニュー名・「ご予約いただきました」を並べ、収まらなければ折り返す。最大2行・上下の真ん中にそろえる */
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: baseline;
  max-height: 3em; overflow: hidden;
  transition: opacity .3s ease;
}
.rb-line.rb-out { opacity: 0; }
.rb-date { color: var(--rb-sub); margin-right: .6em; white-space: nowrap; }
.rb-menu { color: var(--rb-accent); font-weight: 500; margin-right: .6em; overflow-wrap: anywhere; }
.rb-tail { color: var(--rb-sub); white-space: nowrap; }
.rb-badge {
  font-size: .7rem; padding: 2px 6px; border-radius: 4px;
  background: var(--rb-fg); color: #fff;
}
/* 全件の一覧（帯を押すと開く）。オーナー決定 2026-11-09：PCは影で浮かせるカード、スマホは下から出るシート。外枠の線は付けない。
   ページ側の dialog の見た目より優先させるため .rb .rb-dialog で書く */
.rb .rb-dialog {
  box-sizing: border-box; width: calc(100% - 32px); max-width: 440px; max-height: 84vh; overflow: hidden;
  margin: auto; padding: 30px 26px 22px; border: 0; border-radius: 22px;
  background: var(--rb-bg); color: var(--rb-fg); text-align: center; cursor: default;
  font: inherit; font-size: 15px; letter-spacing: .06em;
  box-shadow: 0 24px 70px rgba(40, 28, 20, .28), 0 2px 8px rgba(40, 28, 20, .08);
}
.rb .rb-dialog[open] { display: flex; flex-direction: column; animation: rb-fade .22s ease-out; }
/* 見出しと「閉じる」は動かさず、一覧の部分だけスクロールする（Windowsの太いスクロールバーがカードの角を欠かないように細く淡く） */
.rb-dialog-head, .rb-back { flex: none; }
.rb .rb-dialog::backdrop { background: rgba(40, 28, 20, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rb-dialog-head { position: relative; padding: 0 30px 6px; }
.rb-dialog-head::after { content: ""; display: block; width: 28px; height: 1px; margin: 14px auto 0; background: var(--rb-accent); }
.rb-dialog-title { margin: 4px 0 0; font: inherit; font-size: 1.08rem; font-weight: 500; color: var(--rb-fg); letter-spacing: .12em; }
.rb-x {
  position: absolute; top: -10px; right: -10px; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--rb-sub); font: 400 26px/1 Georgia, serif; cursor: pointer;
}
.rb-x:hover { color: var(--rb-fg); }
.rb-list {
  list-style: none; margin: 8px -12px 0 0; padding: 0 12px 0 0; text-align: left;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* Firefox だけ標準の指定（Chrome・Safari は下の ::-webkit-scrollbar。標準の指定を使うと Chrome は▲▼を出すため） */
@supports not selector(::-webkit-scrollbar) {
  .rb-list { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--rb-sub) 40%, transparent) transparent; }
}
.rb-list::-webkit-scrollbar { width: 6px; }
.rb-list::-webkit-scrollbar-track { background: transparent; }
.rb-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rb-sub) 40%, transparent); border-radius: 6px; }
.rb-list::-webkit-scrollbar-button { display: none; height: 0; }
.rb-list li {
  /* 左に日付、右の1行目にメニュー名・2行目に小さく「ご予約いただきました」。行の区切りは余白だけ */
  display: grid; grid-template-columns: 5.4em 1fr; column-gap: .6em; row-gap: 1px; align-items: baseline;
  padding: 12px 4px;
}
.rb-list .rb-date { grid-row: 1; grid-column: 1; margin: 0; white-space: nowrap; }
.rb-list .rb-menu { grid-row: 1; grid-column: 2; margin: 0; }
.rb-list .rb-tail { grid-row: 2; grid-column: 2; font-size: .78em; white-space: normal; }
.rb-back {
  display: block; margin: 14px auto 0; padding: 8px 20px; border: 0; background: transparent;
  color: var(--rb-sub); font: inherit; font-size: .85em; letter-spacing: .14em; cursor: pointer;
  text-decoration: underline; text-underline-offset: 5px;
}
.rb-back:hover, .rb-x:focus-visible, .rb-back:focus-visible { outline: none; color: var(--rb-accent); }
@keyframes rb-fade { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rb-up { from { transform: translateY(100%); } to { transform: none; } }
/* スマホ：下から出るシート（上の角だけ丸く、つまみ付き、閉じるは指の届く下に大きめ） */
@media (max-width: 600px) {
  .rb .rb-dialog {
    width: 100%; max-width: none; max-height: 82vh; margin: auto 0 0; font-size: 14px;
    border-radius: 24px 24px 0 0; padding: 12px 26px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(40, 28, 20, .18);
  }
  .rb .rb-dialog[open] { animation: rb-up .28s cubic-bezier(.2, .8, .2, 1); }
  .rb .rb-dialog::backdrop { background: rgba(40, 28, 20, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .rb-dialog-head { padding: 22px 30px 4px; }
  .rb-dialog-head::before { content: ""; position: absolute; top: 0; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--rb-border); }
  .rb-x { top: 8px; right: -12px; }
  .rb-list li { padding: 13px 4px; grid-template-columns: 5.2em 1fr; }
  .rb-list li + li { box-shadow: 0 -1px 0 color-mix(in srgb, var(--rb-border) 45%, transparent); }
  .rb-back {
    width: 100%; margin-top: 16px; padding: 13px; border-radius: 999px; text-decoration: none;
    background: color-mix(in srgb, var(--rb-accent) 10%, transparent); color: var(--rb-accent); font-size: .95em;
  }
}
/* スマホは2行分の高さを固定して、切り替えで下の内容が動かないようにする */
@media (max-width: 600px) { .rb-line { min-height: 3em; } .rb { font-size: .84rem; } }
@media (prefers-reduced-motion: reduce) { .rb-line { transition: none; } .rb .rb-dialog[open] { animation: none; } }