/*
 * 見た目は試作版をそのまま正とする。
 * 色・字・部品のかたちは試作のものをそのまま使い、
 * 管理画面とログイン画面も同じトークンで揃えている。
 */

:root {
  /* 文字はアイコン（カレンダーくん）の顔のプラム色から取る。地と線は淡い灰色にして、色がにじんで見えないようにする */
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #3a2c3f;
  --muted: #6e5f70;
  --line: #d9dde3;
  /* アイコン（カレンダーくん）のコーラルに寄せた色。文字を伴う用途すべてで
     小さい文字に要る 4.5 を満たす濃さにしている（白を載せて 5.48、--accent-soft に載せて 4.67）。
     アイコンそのままのコーラル（--mine）は文字には薄すぎるので、この1つを文字にも使う。 */
  --accent: #b8403a;
  --accent-ink: #ffffff;
  --accent-soft: #ffe8e4;
  --booked: #e6e8ec;
  /* 他人の予約ブロックに載せる文字。--muted だと 3.73 で、小さい文字に
     要る 4.5 に届かない。「自分のではない」と分かる程度に弱いまま濃くする。 */
  --booked-ink: #5e4f60;
  --mine: #ff7a6b;
  --hatch: #e3e6ea;
  /* --ok と --sun も、やわらかい地に小さな文字で載る。元の色は
     それぞれ 3.85 と 4.29 で届かなかったので、少しだけ濃くしている。 */
  --ok: #1a7a4d;
  --ok-soft: #ddf2e7;
  --sat: #2b5fc4;
  --sun: #c22d2d;
  --shadow: 0 -6px 24px rgb(58 44 63 / 10%);
  /* 予約画面の面の影。輪郭は線で取り、影は浮きを足すだけにする */
  --lift: 0 1px 2px rgb(20 24 32 / 6%);
  /* 塗りのボタン・選んだ枠・今日の丸。アイコンの上辺と同じコーラルの塗りに、
     顔と同じプラムの文字を載せる（濃い端で 5.8）。白い文字ではコーラルに 2.55 しか出ない */
  --brand: #ff8f82;
  --brand-deep: #ff6a5a;
  --brand-ink: #2a1a2e;
  --f-body: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    system-ui, sans-serif;
  --f-num: "Barlow Condensed", "DIN Alternate", "Arial Narrow", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #10141a;
    --surface: #1a1e25;
    --surface-2: #151920;
    --ink: #f5e9ea;
    --muted: #b6a4ae;
    --line: #313742;
    --accent: #ff8f82;
    --accent-ink: #2a1014;
    --accent-soft: #3d2426;
    --booked: #2b313b;
    /* 明るいテーマと同じ理由。暗いほうは --muted で 3.88 なので明るくする。 */
    --booked-ink: #cdbbc4;
    --mine: #ff8f82;
    --hatch: #262b33;
    --ok: #4cc38a;
    --ok-soft: #173226;
    --sat: #82a8f2;
    --sun: #f28a8a;
    --shadow: 0 -6px 24px rgb(0 0 0 / 45%);
    --lift: 0 1px 2px rgb(0 0 0 / 35%);
    --brand: #ff8f82;
    --brand-deep: #ff6a5a;
    --brand-ink: #2a1a2e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10141a;
  --surface: #1a1e25;
  --surface-2: #151920;
  --ink: #f5e9ea;
  --muted: #b6a4ae;
  --line: #313742;
  --accent: #ff8f82;
  --accent-ink: #2a1014;
  --accent-soft: #3d2426;
  --booked: #2b313b;
  /* 明るいテーマと同じ理由。 */
  --booked-ink: #cdbbc4;
  --mine: #ff8f82;
  --hatch: #262b33;
  --ok: #4cc38a;
  --ok-soft: #173226;
  --sat: #82a8f2;
  --sun: #f28a8a;
  --shadow: 0 -6px 24px rgb(0 0 0 / 45%);
  --lift: 0 1px 2px rgb(0 0 0 / 35%);
  --brand: #ff8f82;
  --brand-deep: #ff6a5a;
  --brand-ink: #2a1a2e;
}

* {
  box-sizing: border-box;
}

/* ページの端を越える引っぱり（Android の引っぱって更新）を止める。
   選択中の枠はReactの状態なので、読み込み直されると消えてしまう。
   カレンダーからページへの連鎖は、カレンダー側の指定で別に決まる。 */
html,
body {
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  padding-inline: 16px;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

a {
  color: var(--accent);
}

/* ---------- 枠組み ---------- */

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-block: 20px 140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.wrap-wide {
  max-width: 1100px;
  padding-block: 20px 64px;
  gap: 20px;
}

.wrap > *,
.ticket > * {
  min-width: 0;
}

.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand b {
  /* 日本語のグリフを持たない --f-num だと OS 任せのフォントに落ちる */
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* 字面（22px の字で約 19px）より2割ほど大きくする。絵は淡い地の中に描かれていて、
   外枠を字面と同じ高さにすると絵のほうが小さく見えるため。並びは文字のベースラインなので、
   絵だけ上下中央に置き、和文の字面が行の箱より少し上に寄るぶん持ち上げて中心をそろえる。
   スマホ幅でも右の操作ボタンと1行に収まるよう、字との間は詰める */
.brand-icon {
  width: 23px;
  height: 23px;
  border-radius: 6px;
  align-self: center;
  flex: none;
  margin-right: -3px;
  transform: translateY(-3px);
}

.brand span {
  color: var(--muted);
  font-size: 13px;
}

/* 差し込み口は常に出るので、中身が無いときは詰める（ヘッダーに隙間ができないように） */
#booking-duration:empty {
  display: none;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.top-nav a {
  color: var(--muted);
  text-decoration: none;
}

.top-nav a:hover {
  color: var(--ink);
}

/* 管理画面のメニュー。広い画面では畳まず横に並べ、開閉のボタンは出さない。 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle,
.top-nav .nav-burger {
  display: none;
}

/* 絵だけのボタン。押せると分かる程度に薄い線だけ入れ、色は控えめなまま。
   隣の利用時間と高さを揃えて36pxにしてある。 */
.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  /* 隣の利用時間と同じ高さ・同じ塗りにして、ひと組に見せる */
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(58 44 63 / 6%);
  transition: border-color 0.15s, color 0.15s;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn:hover {
  border-color: var(--muted);
  color: var(--ink);
}

h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}

h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* ---------- あなたの予約 ---------- */

.mine {
  display: grid;
  gap: 8px;
}

/* .mine はお問い合わせの自分の発言（.chat-row.mine）にも付くので、予約画面の欄に絞る */
.booking-root > .mine::before {
  content: "あなたの予約";
  /* 欄そのものに aria-label があるので、読み上げで2回続かないよう代替文を空にする */
  content: "あなたの予約" / "";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* 半券のように左端へコーラルの帯を引き、予約がひと目で自分のものと分かる形にする */
.ticket {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 14px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: center;
  box-shadow: var(--lift);
}

.ticket::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--brand-deep);
}

.ticket.live {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, var(--lift);
}

.ticket.fresh {
  border-color: var(--accent);
  animation: ticket-in 0.5s ease-out;
}

@keyframes ticket-in {
  from {
    transform: translateY(-6px);
  }
}

.t-date {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* 店舗名は小さな札にして、日付と長さから切り離す */
.t-date > span:last-child {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 18px;
}

.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  letter-spacing: 0.04em;
}

.badge.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.t-time {
  font-family: var(--f-num);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.t-time i {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
  margin: 0 4px;
}

.t-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 見た目はヘッダーと同じ 36px のまま、指で押せる範囲だけ 44px に広げる */
.t-actions .icon-btn {
  position: relative;
}

.t-actions .icon-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}

/* 触れたらアクセント色にして、押せることを伝える */
.t-actions .icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.t-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand-deep);
  color: var(--brand-ink);
}

.btn-primary:disabled {
  background: var(--hatch);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
}

.btn-ghost.danger {
  border-color: var(--sun);
  color: var(--sun);
}

.link {
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.link:hover {
  color: var(--ink);
}

.empty {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 16px;
  color: var(--muted);
  margin: 0;
}

/* ---------- カレンダー（会員の予約画面） ----------
 *
 * Googleカレンダーの日表示に近い縦の時間軸。表示中の日数の前後にも同じ日数ぶんを
 * 横に並べ、真ん中だけを見せる。スワイプで横にずらして日付を送る。
 *
 * 管理画面の週表示カレンダーが .cal-* を使っているので、ここは .bk-* で分ける。
 */

.bk-hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* 画面の端まで使う（body の padding-inline と打ち消す）。
   0:00〜24:00 は長いので、ページ全体ではなくこの中だけを縦にスクロールさせる。
   こうすると「あなたの予約」の解錠ボタンが常に上に残る。
   touch-action: pan-y で縦は browser に任せ、横のスワイプだけを自分で拾う。 */
.bk-scroll {
  touch-action: pan-y;
  margin-inline: -16px;
  padding-right: 8px;
  height: min(72vh, 680px);
  overflow-y: auto;
  /* 縦は端まで来たらページ側へ渡す。止めると、指がカレンダーの上にある限り
     上の「あなたの予約」まで戻れなくなる（カレンダーが画面の大半を占めるため）。
     横は止めたまま（ブラウザの戻るジェスチャを誘発させない） */
  overscroll-behavior: contain auto;
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* 端まで使いつつ、角を丸めたカードとして浮かせる。
   左右は 6px だけ残して丸みが見えるようにする（3日ぶんの幅はほぼ変わらない） */
@media (max-width: 639px) {
  .bk-scroll {
    margin-inline: -10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--lift);
  }
}

@media (min-width: 640px) {
  .bk-scroll {
    margin-inline: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--lift);
  }
}

.bk-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.bk-month {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.bk-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  padding: 0 0 2px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(58 44 63 / 10%);
  display: grid;
  place-items: center;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}

.bk-nav:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.bk-nav:disabled {
  opacity: 0;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
}

.bk-nav.prev {
  left: 48px;
}

.bk-nav.next {
  right: 2px;
}

.bk-dh {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 0 7px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.bk-dh b {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bk-dh.sat {
  color: var(--sat);
}

.bk-dh.sun {
  color: var(--sun);
}

.bk-dh.today {
  color: var(--accent);
  font-weight: 700;
}

.bk-dh.today b {
  background: var(--brand-deep);
  color: var(--brand-ink);
}

.bk-body {
  position: relative;
  padding-left: 44px;
  /* 深夜の枠を選んでも予約カードの上まで送れるよう、下に余白を持たせる */
  padding-bottom: 120px;
}

.bk-hlab {
  position: absolute;
  left: 0;
  width: 38px;
  transform: translateY(-50%);
  text-align: right;
  font-family: var(--f-num);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.bk-cols-clip,
.bk-head-clip {
  overflow: hidden;
}

/* 表示中の日数の3倍を並べ、真ん中だけを見せる。--cols は列の総数 */
.bk-cols,
.bk-head-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr));
  width: 300%;
  margin-left: -100%;
  will-change: transform;
}

.bk-cols.anim,
.bk-head-row.anim {
  transition: transform 0.22s ease-out;
}

/* 1時間ごとの横罫を背景で描く。--hpx は1時間の高さ */
.bk-col {
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    var(--line) 0 1px,
    transparent 1px var(--hpx, 64px)
  );
  border-left: 1px solid var(--line);
  cursor: pointer;
  touch-action: manipulation;
}

/* まだ空き状況が分からない日。触らせない */
.bk-col.off {
  background: var(--surface-2);
  cursor: default;
}

.bk-now {
  position: absolute;
  left: -5px;
  right: 0;
  height: 2px;
  background: var(--sun);
  pointer-events: none;
  z-index: 3;
}

.bk-now::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sun);
}

/* 目では見えないが読み上げには届く。見た目を変えずに見出しとラベルを足すため。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 過ぎた時間は覆って隠す（罫も予約も見せない）。
   白で塗りつぶすと空きに見えるので、うすい斜線で「もう選べない」と分かる地にする */
.bk-gone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--hatch) 6px 7px),
    var(--surface-2);
  z-index: 3;
  cursor: default;
}

/* 予約の前後に空ける入れ替え時間 */
.bk-gap {
  position: absolute;
  left: 3px;
  right: 4px;
  background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 6px);
  border-radius: 6px;
  pointer-events: none;
}

.bk-ev {
  position: absolute;
  left: 3px;
  right: 4px;
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  z-index: 1;
}

.bk-ev b {
  display: block;
  font-weight: 700;
}

.bk-ev span {
  display: block;
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* 他の会員の予約は、空きより一段沈んだ面にする。罫に溶けないよう細い縁を付ける */
.bk-booked {
  background: var(--booked);
  color: var(--booked-ink);
  cursor: not-allowed;
}

/* 入会フォームの埋まっている時間。過ぎた時間と同じ斜線で覆い、文字は出さない */
.bk-ev.bk-hatched {
  left: 0;
  right: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--hatch) 6px 7px),
    var(--surface-2);
}

.bk-mine {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
  cursor: pointer;
}

.bk-mine:hover {
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1.5px var(--accent);
}

.bk-draft {
  /* 見える位置まで送るとき、予約カードに隠れない高さを見込む */
  scroll-margin-top: 48px;
  scroll-margin-bottom: calc(var(--bk-bar-h, 0px) + 24px + env(safe-area-inset-bottom, 0px));
  background: var(--brand-deep);
  color: var(--brand-ink);
  z-index: 2;
  box-shadow: 0 1px 3px rgb(20 24 32 / 22%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.bk-draft.dragging {
  cursor: grabbing;
  box-shadow: 0 4px 10px rgb(20 24 32 / 22%);
}

.bk-draft {
  padding-inline: 5px;
}

.bk-draft span {
  font-size: 15px;
  /* 30分の枠は1行ぶんの高さしかないので、狭い列でも折り返さない */
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.bk-draft small {
  display: block;
  font-size: 10px;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* キーボードだけで使うときの入口。焦点が当たったときだけ見せる */
.bk-pick {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 3px;
  z-index: 4;
  width: auto;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  cursor: pointer;
}

.bk-pick:focus-visible {
  height: auto;
  padding: 4px 6px;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  border-radius: 6px;
}

/* 選んだ時間を確かめて予約するカード。
   幅いっぱいのバーにするとカレンダーの下側を封じるので、左右に余白を取り、
   日付と時刻を左に2行で畳んでボタンを右に置く（高さは1行ぶん）。 */
.bk-card {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  max-width: 728px;
  margin: 0 auto;
  display: grid;
  /* ✕ ／ 日時 ／ 予約する。✕ は押し間違えないよう「予約する」から離して左端に置く */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 12px 12px 12px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgb(20 24 32 / 8%), 0 8px 20px rgb(20 24 32 / 12%);
  animation: card-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.bk-card-when {
  margin: 0;
  display: grid;
  line-height: 1.3;
  min-width: 0;
}

.bk-card-when small {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-card-when b {
  font-family: var(--f-num);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bk-card-when b i {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  margin: 0 3px;
}

.bk-card-note {
  font-size: 11px;
}

/* 指で押せる大きさ（44px）を確保しつつ、絵だけなので控えめに置く */
.bk-cancel {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.bk-cancel svg {
  width: 20px;
  height: 20px;
}

.bk-cancel:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}

.bk-book {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--brand-deep);
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}

.bk-book:active:not(:disabled) {
  transform: scale(0.97);
}

.bk-book:hover:not(:disabled) {
  filter: brightness(1.06);
}

.bk-book:disabled {
  background: var(--hatch);
  color: var(--muted);
  box-shadow: none;
  cursor: wait;
}

/* color-mix() は iOS 16.2 以降の Safari から。中に var() があると、読めない Safari でも
   宣言は通ってしまい（値が無効になって消える）、前に書いた素の値へも戻らない。
   そのため素の見た目を上に書き、color-mix() を使う飾りはここにまとめる */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  /* 30分には細い点線を足し、時刻を目で追いやすくする */
  .bk-col {
    background:
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hpx, 64px)),
      repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--hpx, 64px) / 2),
        color-mix(in srgb, var(--line) 55%, var(--surface)) calc(var(--hpx, 64px) / 2)
          calc(var(--hpx, 64px) / 2 + 1px),
        transparent calc(var(--hpx, 64px) / 2 + 1px) var(--hpx, 64px)
      );
  }

  .bk-booked {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--booked) 85%, var(--ink));
  }

  .bk-mine {
    box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--accent-soft));
  }

  .bk-mine:hover {
    box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1.5px var(--accent);
  }
}

/* 幅の狭い端末では、時刻が「予約する」の裏に隠れないよう詰める */
@media (max-width: 374px) {
  .bk-card-when b {
    font-size: 21px;
  }

  .bk-book {
    padding-inline: 16px;
  }
}

@keyframes card-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

/* 利用時間：ヘッダーに小さく置く。
   会員はほとんど切り替えないので、カレンダーの上や画面の下に場所を取らせない。
   隣にログアウトが並ぶため、枠を付けて「押すと変わるもの」と分かる形にする。 */
.dur-menu {
  position: relative;
}

.dur-menu-btn {
  display: inline-flex;
  /* かたまりを上下中央に置く。中の「90」と「分」は .dur-menu-value が基線で揃える */
  align-items: center;
  height: 36px;
  /* 右の ▾ のぶんだけ左を広げ、「90分」がボタンの中央に来るようにする */
  padding: 0 10px 0 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-num);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(58 44 63 / 6%);
}

.dur-menu-value {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.dur-menu-btn small {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
}

.dur-menu-caret {
  margin-left: 3px;
  font-size: 9px;
  color: var(--muted);
}

.dur-menu-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* 切り替えられないプランの表示。押せないことが分かるよう枠を付けない */
.dur-menu-static {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 5px 2px;
  color: var(--muted);
  font-family: var(--f-num);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.dur-menu-static small {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
}

.dur-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 14;
}

.dur-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 15;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgb(58 44 63 / 18%);
  animation: card-in 0.16s ease-out;
}

.dur-menu-list p {
  margin: 2px 8px 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.dur-menu-list button {
  min-width: 96px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-num);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.dur-menu-list button small {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  margin-left: 2px;
}

.dur-menu-list button:hover {
  background: var(--surface-2);
}

.dur-menu-list button[aria-checked="true"] {
  background: var(--brand-deep);
  color: var(--brand-ink);
}

/* ---------- 確認ウィンドウ・シート ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgb(26 16 28 / 50%);
  display: grid;
  place-items: center;
  padding: 16px;
}

.scrim.sheet-scrim {
  align-items: end;
  padding: 0;
}

.dialog {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border-radius: 16px;
  padding: 22px 20px 18px;
  display: grid;
  gap: 14px;
  text-align: center;
  box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
}

.dialog h3 {
  margin: 0;
  font-size: 17px;
}

.dialog .what {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.dialog .what b {
  display: block;
  font-family: var(--f-num);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.dialog-actions button {
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.d-cancel {
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* 元に戻せる操作の承諾。赤は使わない */
.d-go {
  background: var(--brand-deep);
  border: 0;
  color: var(--brand-ink);
}

.d-ok {
  background: var(--sun);
  border: 0;
  /* 明るいテーマでは白、暗いテーマでは濃い色。--sun の明るさがテーマで入れ替わるため */
  color: var(--accent-ink);
}

.sheet {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 8px;
  box-shadow: 0 -12px 40px rgb(0 0 0 / 25%);
}

.sheet-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.sheet-option {
  display: block;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}

.sheet-close {
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 15px;
  cursor: pointer;
}

/* ---------- 通知 ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bk-bar-h, 0px) + 24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 30;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  width: max-content;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
}

.toast-alert {
  background: var(--sun);
  color: #fff;
}

.loading {
  color: var(--muted);
  padding: 24px 0;
  text-align: center;
}

.locked-note {
  background: var(--accent-soft);
  border-radius: 12px;
  color: var(--accent);
  font-size: 13px;
  padding: 10px 14px;
  /* 下の案内文とくっつかないよう空ける */
  margin: 0 0 12px;
}

/* ---------- 店舗の切り替え（管理者のみ） ---------- */

.store-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.store-switcher select {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

/* ---------- ログイン・招待 ---------- */

.auth-card {
  width: 100%;
  max-width: 400px;
  margin: 8px auto 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px;
}

/* 見出し（または説明文）と入力欄のあいだを空ける。説明文がある画面では
   隣接マージンが相殺されるので、説明文のない画面だけが広がる。 */
.auth-card form {
  margin-top: 20px;
}

.auth-lead {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 20px;
}

.auth-links {
  margin: 18px 0 0;
  font-size: 12px;
}

/* ---------- フォーム ---------- */

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

/* 縦だけ伸ばせるようにする。横に広げられると枠からはみ出す */
.field textarea {
  resize: vertical;
}

/* 複数選ぶチェックボックスの並び（店舗の担当管理者） */
.checks {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.checks small {
  color: var(--muted);
  font-size: 12px;
}

/* 対応できない日時の登録欄。項目が3〜5つ並ぶので、広い画面では横に並べ、
   狭い画面では .field の積み重ねのままにする。 */
.unavailable-form {
  margin: 20px 0 14px;
}

.unavailable-form h2 {
  font-size: 15px;
  margin: 0 0 10px;
}

.unavailable-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 12px;
}

.field-hint,
.field-static {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
}

legend {
  font-size: 12px;
  color: var(--muted);
  padding: 0 6px;
}

input[type="submit"] {
  border: 0;
  border-radius: 10px;
  padding: 11px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button-primary {
  background: var(--brand-deep);
  color: var(--brand-ink);
  border: 0;
  border-radius: 10px;
  padding: 11px 20px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.button-danger {
  background: var(--sun);
  /* 直に #fff を置くと、暗いテーマの明るい赤地に白で 2.39 にしかならない。
     地と反対側に寄る --surface なら、明るいほうで 5.66、暗いほうで 6.85 になる。 */
  color: var(--surface);
  border: 0;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 700;
  cursor: pointer;
}

/* 主要な操作（button-primary）と危険な操作（button-danger）のあいだに並ぶ、
   押しても取り返しのつく操作。地を塗らず枠だけにして、その2つの邪魔をしない。
   太さは隣の2つと同じ700。IBM Plex Sans JP は 400/500/700 しか読んでいないので、
   600 と書いても 700 で描かれる（弱めたつもりが効かない）。 */
.button-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.button-quiet:hover {
  background: var(--surface-2);
}

/* ログインまわりの画面はカードが 400px なのに、お知らせは .wrap 直下にあるため
   760px の帯になる。広い画面でカードの上に長い帯が乗るので、幅をそろえる。 */
.wrap:has(.auth-card) .flash {
  width: 100%;
  max-width: 400px;
  /* .wrap はグリッドなので margin-inline: auto だと内容の幅まで縮む。
     カードと同じ幅にそろえるには justify-self で中央に置く。 */
  justify-self: center;
}

.form-errors {
  background: var(--accent-soft);
  border-radius: 12px;
  color: var(--sun);
  margin: 0 0 16px;
  padding: 12px 16px 12px 32px;
  font-size: 13px;
}

.flash {
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 13px;
}

.flash-notice {
  background: var(--ok-soft);
  color: var(--ok);
}

.flash-alert {
  background: var(--accent-soft);
  color: var(--sun);
}

.empty-state {
  color: var(--muted);
  padding: 32px 0;
  text-align: center;
}

/* ---------- 管理画面 ---------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-lead {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* 絞り込みの開閉。つまみ本体は見えないが、キーボードで辿れるようその場に置く。 */
.filters-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.filters-btn {
  position: relative;
}

/* つまみは見出しの行の中にある。間に h1 などが挟まるので、隣接ではなく
   一般兄弟でたどる（隣接にすると、並びを変えた瞬間に黙って効かなくなる）。 */
.filters-toggle:focus-visible ~ .cal-nav .filters-btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 開いているあいだはボタンも押された状態に見せる */
.filters-toggle:checked ~ .cal-nav .filters-btn {
  border-color: var(--accent);
  color: var(--ink);
}

/* 畳んでいても絞り込み中だと分かる印 */
.filters-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 予約一覧の絞り込みは、開いてもカレンダーを押し下げないよう上に重ねる。
   行の中に置くと、開くたびにカレンダーが縮んでしまう。 */
.page-head.cal-top {
  position: relative;
}

.cal-top .filters {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  flex-wrap: nowrap;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgb(58 44 63 / 12%);
}

/* 既定は畳んでおく。開くのはつまみが入っているときだけ。 */
.filters-toggle:not(:checked) ~ .filters {
  display: none;
}

.filters input,
.filters select {
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

/* 検索欄は既定の幅だと案内の文（「名前・メール・電話で検索」）が途中で切れる。
   何で引けるのかが読めないと、電話番号で引けることに気づけない。 */
.filters input[type="text"] {
  min-width: 15em;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table th {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--hatch);
  color: var(--muted);
}

.status-active,
.status-booked,
.status-succeeded {
  background: var(--ok-soft);
  color: var(--ok);
}

.status-suspended,
.status-failed,
.status-denied {
  background: var(--accent-soft);
  color: var(--sun);
}

/* 顧客管理メモがあることだけを知らせる印。状態（.status）と同じ形にそろえるが、
   良し悪しを表すものではないので色は持たせない。 */
.memo-mark {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

/* お知らせの本文。管理者が書いた改行をそのまま見せる。
   メールで届く形と画面の見え方を合わせるため、ここだけ行間を広めに取る。 */
.broadcast-preview {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  line-height: 1.9;
}

/* 宛先の名前。300人並ぶので、横に詰めて縦に伸びすぎないようにする。 */
.recipient-names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  gap: 2px 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.recipient-store {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 6px;
}

/* 送る相手の選択の見出し。全選択の操作と、いま何人選んでいるか。 */
.recipients-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.recipients-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 送る相手の選択。店舗ごとに畳める。 */
.recipients details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}

.recipients summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}

.admin-actions {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-actions h2 {
  width: 100%;
  margin: 0;
}

.monthly-counts {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}

.monthly-counts h2 {
  margin-bottom: 6px;
}

.monthly-counts ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.warning {
  color: var(--sun);
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* 予約画面の案内。カレンダーを押し下げないよう、1〜2行ぶんの細い帯にする。
   下との間隔は .wrap の gap が持つ */
.booking-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* 1行目の文字の高さにそろえる */
.booking-notice svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* React の島は .wrap の直下に並ぶので、同じ間隔で積む */
.booking-root {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  min-width: 0;
}

/* ---------- 管理画面の予約カレンダー（週表示） ---------- */

.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 週送りの矢印。アイコンだけにして、間に今見ている週を挟む。 */
.cal-step {
  flex: none;
}

.cal-week {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}

.cal-week-short {
  display: none;
}

.cal-nav a {
  text-decoration: none;
}

.calendar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.cal-head {
  display: grid;
  grid-template-columns: 40px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.cal-day-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border-left: 1px solid var(--line);
}

.cal-day-head.is-today {
  background: var(--accent-soft);
}

.cal-dw {
  font-size: 11px;
  color: var(--muted);
}

.cal-dw-6 {
  color: var(--sat);
}

.cal-dw-0 {
  color: var(--sun);
}

.cal-dn {
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.cal-body {
  display: grid;
  grid-template-columns: 40px repeat(7, minmax(0, 1fr));
  max-height: 70vh;
  overflow-y: auto;
}

.cal-axis,
.cal-col {
  display: grid;
  grid-template-rows: repeat(24, 34px);
}

.cal-col {
  position: relative;
  border-left: 1px solid var(--line);
}

.cal-hour {
  position: relative;
  font-family: var(--f-num);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 4px;
}

.cal-hour span {
  position: relative;
  top: -6px;
}

.cal-hour:first-child span {
  top: 0;
}

.cal-slot {
  border-top: 1px solid var(--line);
}

.cal-slot:first-child {
  border-top: 0;
}

.cal-event {
  position: absolute;
  min-height: 15px;
  overflow: hidden;
  border-radius: 6px;
  padding: 1px 5px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  line-height: 1.25;
  text-decoration: none;
  /* 短い予約は1行、長い予約は折り返して店舗名まで出す */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 6px;
}

.cal-event:hover {
  filter: brightness(0.94);
}

.cal-event-canceled {
  background: var(--hatch);
  color: var(--muted);
  text-decoration: line-through;
}

/* 取り消し済みは地がやわらかく、--muted との差が 4.65 しかない。
   ここで店舗名を薄くすると届かなくなるので、弱めない。 */
.cal-event-canceled .cal-event-store {
  opacity: 1;
}

.cal-event-time {
  font-family: var(--f-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal-event-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event-store {
  /* 補助の情報なので弱めるが、弱めすぎると地の橙に溶けて読めなくなる。
     0.8 では 4.10 で、小さい文字に要る 4.5 に届かない。 */
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .cal-event-store {
    display: none;
  }

  .cal-event {
    font-size: 10px;
    padding: 1px 3px;
  }
}

/* 予約の詳細。:target で開くので JavaScript は使わない */
.cal-modal {
  display: none;
}

.cal-modal:target {
  display: grid;
}

.cal-modal-backdrop {
  position: absolute;
  inset: 0;
}

.cal-dialog {
  position: relative;
  max-width: 380px;
  text-align: left;
}

.cal-dialog h3 {
  text-align: center;
}

.cal-dialog .what {
  text-align: center;
}

.cal-detail {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
}

.cal-detail dt {
  color: var(--muted);
}

.cal-detail dd {
  margin: 0;
}

.cal-detail small {
  color: var(--muted);
}

.cal-detail-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.cal-dialog-form {
  display: contents;
}

.dialog-actions .d-cancel {
  display: grid;
  place-content: center;
  text-decoration: none;
  color: var(--ink);
}

/* ---------- お問い合わせ ---------- */

.chat-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* 会員のヘッダーはアイコン。未読の数は右上に小さく重ねる */
.chat-icon {
  position: relative;
}

.chat-icon .chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  /* ヘッダーの地の色で縁取り、アイコンの輪郭と重なっても数が読めるようにする */
  box-shadow: 0 0 0 2px var(--bg);
}

/* 未読の数。目に留まるようアクセント色の丸で出す */
.chat-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.chat {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.chat-row {
  display: grid;
  gap: 4px;
  max-width: 80%;
}

/* 自分の発言は右、相手は左。どちらが話しているか形で分かるようにする */
.chat-row.mine {
  justify-self: end;
  justify-items: end;
}

.chat-row.theirs {
  justify-self: start;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.7;
}

.chat-row.mine .chat-bubble {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.chat-bubble p {
  margin: 0;
}

.chat-bubble p + p {
  margin-top: 8px;
}

.chat-meta {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.chat-form {
  display: grid;
  gap: 10px;
}

.chat-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

/* ---------- 管理画面のスマホ対応 ---------- */

/* 画面が狭いとき。管理画面は項目が多く、横幅を前提に組んであるので、
   並べ方そのものを切り替える。640px は、表を横に並べて読める下限。 */
@media (max-width: 640px) {
  /* ナビは7項目あり、1行に入らない。横に送る形にすると右端のログアウトが
     切れて押せないので、メニューに畳む。 */
  .top-nav {
    position: relative;
    flex-wrap: nowrap;
  }

  /* アイコンのボタンは縮ませない（潰れると押せなくなる） */
  .top-nav .icon-btn {
    flex: none;
  }

  /* 開閉のつまみ。見えないが、キーボードで辿れるようその場に置いておく */
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .top-nav .nav-burger {
    display: grid;
  }

  .nav-toggle:focus-visible + .nav-burger {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* 畳んだ中身。ヘッダーの下に重ねて出す */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    min-width: 180px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  }

  .nav-toggle:checked ~ .nav-links {
    display: flex;
  }

  /* 指で押せる高さにする */
  .nav-links a {
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .nav-links a:hover {
    background: var(--surface-2);
  }

  /* 絞り込みは1列。指で押せる幅にする。 */
  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filters input,
  .filters select {
    width: 100%;
  }

  /* 表はカードに積み替える。列見出しの代わりに、各セルが自分の見出しを持つ
     （ビュー側の data-label）。横スクロールで読ませるより、縦に積むほうが
     一覧として追いやすい。 */
  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
  }

  .data-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }

  .data-table tr:last-child {
    border-bottom: 0;
  }

  .data-table td {
    padding: 3px 0;
    border-bottom: 0;
    /* 見出しと値を2列に。見出しの幅を揃えると値の頭が縦に並ぶ */
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: 10px;
    align-items: baseline;
    /* 状態のバッジが2列目いっぱいに伸びないようにする */
    justify-items: start;
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
  }

  /* 1列目はそのカードが何かを表すので、見出しを付けず大きく出す */
  .data-table td:first-child {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
  }

  .data-table td:first-child::before {
    content: none;
  }

  /* 操作のリンク（編集・開く）は見出しを持たないので、1列で右に寄せる */
  .data-table td[data-label=""] {
    display: block;
    margin-top: 8px;
    text-align: right;
  }

  .data-table td[data-label=""]::before {
    content: none;
  }

  /* 狭い画面では4つを縦に積むので、画面の幅いっぱいに引き出す */
  .cal-top .filters {
    left: 0;
    right: 0;
    flex-wrap: wrap;
  }

  /* 狭い画面では年まで入らないので月日だけにする */
  .cal-week-long {
    display: none;
  }

  .cal-week-short {
    display: inline;
  }

  /* 見出しと週送りを1行に収め、カレンダーまでの行数を減らす */
  .page-head.cal-top {
    gap: 8px;
  }

  .page-head.cal-top h1 {
    font-size: 18px;
  }

  .cal-nav {
    flex: 1;
    justify-content: flex-end;
  }

  .cal-today {
    padding: 6px 8px;
  }

  /* 予約のカレンダーは週表示のまま、1日の幅を確保して横に送る。
     390px に7日を詰めると予定の文字が読めない。 */
  .calendar {
    overflow: auto;
    /* 画面の下まで使う。70vh だと下に使い残しが出ていた。
       --cal-top はカレンダーの上端（application.ts が実測して入れる）。 */
    max-height: calc(100dvh - var(--cal-top, 190px) - 10px);
  }

  /* 縦のスクロールは .calendar に任せる。ここに持たせたままだと別の
     スクロール容器になり、中の軸を左に貼り付けられない。 */
  .cal-body {
    max-height: none;
    overflow: visible;
  }

  .cal-head,
  .cal-body {
    /* 時間の軸40px ＋ 1日110px × 7日 */
    min-width: 810px;
  }

  /* 縦に送っても曜日が見えるよう、見出しは上に貼り付ける */
  .cal-head {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  /* 横に送っても時間が見えるよう、軸は左に貼り付ける */
  .cal-axis {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }

  /* 左上の角は縦横どちらに送っても残る */
  .cal-corner {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--surface-2);
  }
}

/* ---------- 入会のお申し込み ---------- */

/* 人には見えない欄。機械はフォームをすべて埋めるので、埋まっていたら捨てる。
   display:none だと埋めない機械がいるため、画面の外に出す形で隠す。 */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------- 入会のお申し込みの見た目 ---------- */

.contact-card {
  display: grid;
  gap: 18px;
}

.contact-card h1 {
  margin: 0;
}

.contact-card form {
  display: grid;
  gap: 16px;
}

/* いま満員であることは、送る前に目に入る必要がある */
.notice-box {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
}

/* 必須と任意の印。見分けられないと、全部埋めるものだと思われる */
.tag {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

.tag-req {
  background: var(--accent-soft);
  color: var(--sun);
}

.tag-opt {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* 申込みの決め手になるボタンは幅いっぱいにして、指でも迷わず押せるようにする */
.button-wide {
  width: 100%;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 15px;
}

.contact-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* 受け付けたことが一目で伝わるようにする */
.contact-done {
  text-align: center;
  justify-items: center;
}

.contact-done p {
  margin: 0;
  line-height: 1.9;
}

.done-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}

.done-mark svg {
  width: 28px;
  height: 28px;
}

/* 入力の誤りは、どの欄のことか分かるよう枠で囲って上に出す */
.form-errors {
  margin: 0;
  padding: 12px 14px 12px 32px;
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--sun);
  font-size: 13px;
  line-height: 1.8;
}

/* 店舗が複数のときの店舗選び */
.store-picker h2 {
  margin: 0 0 10px;
  font-size: 15px;
}

.store-picker-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-picker-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

.store-picker-mode {
  font-size: 12px;
  color: var(--muted);
}

/* 入会・無料見学の二択。.field input { width: 100% } は選択肢には効かせない */
.choice-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-field legend,
.field-label {
  display: block;
  padding: 0;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--muted);
}

.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.field .choice {
  display: flex;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
}

.field .choice input {
  width: auto;
  margin: 0;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* 来店日時のカレンダー（VisitPicker）。カレンダーそのものは会員の予約画面の .bk-* を使う。
   フォームの中なので、画面の端まで広げず欄の幅に収める。 */
.visit-picker {
  display: grid;
  gap: 10px;
}

/* 広い画面ではカレンダーが1週間を並べる（会員の予約画面と同じ）。400px のカードに
   7日を詰めると1日が40px台になり、時刻も「空きなし」も読めないので、カードごと広げる。 */
@media (min-width: 640px) {
  .auth-card.contact-card:has(.visit-picker) {
    max-width: 680px;
  }
}

.visit-picker .bk-scroll {
  margin-inline: 0;
  height: min(60vh, 560px);
}

.visit-picker .bk-hint {
  margin: 0;
}

/* 会員の予約画面は下に予約カードが重なるので、その分の余白と送り幅を持つ。ここには無い */
.visit-picker .bk-body {
  padding-bottom: 8px;
}

.visit-picker .bk-draft {
  scroll-margin-bottom: 8px;
}

/* 選んだ日時は文字でも出す。枠が画面外にあっても何を選んだか分かるように */
.visit-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.visit-chosen:has(b) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.visit-chosen span {
  display: grid;
  gap: 2px;
}

.visit-chosen small {
  font-size: 11px;
  color: var(--muted);
}

.visit-chosen b {
  font-size: 15px;
  color: var(--ink);
}

.visit-chosen-empty {
  font-size: 13px;
  color: var(--muted);
}

.visit-clear {
  flex: none;
}

.visit-message,
.visit-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.visit-message {
  color: var(--muted);
}

.visit-error {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--sun);
}

/* 入会フォームの来店場所と駐車場。来店日時のすぐ下に、項目名と中身を2列で並べる */
.visit-place {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: -4px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.6;
}

.visit-place dt {
  color: var(--muted);
  font-size: 12px;
}

.visit-place dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}