:root {
  color-scheme: light;
}

/* フォームのエラー表示。JSで動的に表示するため、ユーザーがフォームの離れた
   位置にいると気づかれないことがある（対応するJS側でscrollIntoViewと併用）。
   目に留まりやすいよう出現時に軽く弾ませる。 */
@keyframes form-error-pop {
  0% { transform: scale(0.96); }
  55% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.form-error-banner {
  animation: form-error-pop 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-error-banner {
    animation: none;
  }
}

/* SMS送信ボタン等、タップ後にサーバー往復＋Firebase送信で体感できる遅延が出る
   操作のための「送信中」インジケータ。タップした手応えが無いと連打されるため、
   ボタンのdisabledだけでなく見た目もはっきり変える。 */
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner {
    animation: none;
  }
}

/* スマホでスクロール中に画面が左右にグラつくのを防ぐ。原因は主に
   overflow-y:auto な要素が（overflow-xを明示しないと）CSSの仕様で
   自動的に overflow-x:auto 扱いになり、中身が1pxでも幅をはみ出すと
   横方向のラバーバンド（弾む）スクロールが起きること。保険として
   ページ全体でも横スクロール自体を封じておく。 */
html {
  overflow-x: hidden;
}

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

/* 予約トップのお知らせ。見出しを太字、枠は赤系で目に留める */
.home-notice {
  border: 1.5px solid #F87171;
}
.home-notice-kicker {
  font-weight: 700;
  color: #334155;
}

/* お客向けヘッダーのログイン／新規会員登録。文字リンクではなく押し込みのあるボタンにする */
.header-auth {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.header-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.header-auth-btn-login {
  color: #fff;
  background: #2563EB;
  border: 1px solid #1d4ed8;
  box-shadow: 0 2px 0 #1e40af;
}
.header-auth-btn-register {
  color: #2563EB;
  background: #fff;
  border: 1px solid #2563EB;
  box-shadow: 0 2px 0 #1d4ed8;
}
.header-auth-btn:active {
  transform: translateY(1px);
}
.header-auth-btn-login:active {
  box-shadow: 0 1px 0 #1e40af;
}
.header-auth-btn-register:active {
  box-shadow: 0 1px 0 #1d4ed8;
}
@media (max-width: 360px) {
  .header-auth-btn {
    padding: 0 8px;
    font-size: 11px;
  }
}

button:disabled {
  cursor: not-allowed;
}

/* スマホでボタンを連続タップしたときのダブルタップ拡大を防ぐ
   （スタジオタブ・カレンダー日付・時間カード・前日翌日など） */
#reserve-app button {
  touch-action: manipulation;
}

/* 予約トップ下部バー: iPhoneのホームバーにボタンが埋まらないようにする */
#reserve-app #selection-bar {
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 予約トップ: スタジオタブ＋空き要約。html/body の overflow-x:hidden で
   position:sticky が効かない端末があるので、JS で is-stuck（fixed）にする */
.studio-sticky-ph {
  height: 0;
}
.studio-sticky {
  background: #F8FAFC;
  padding: 4px 0 10px;
  margin-bottom: 8px;
}
.studio-sticky.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 8px 0 10px;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.18);
}
.studio-sticky.is-stuck .studio-sticky-inner {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 16px;
}
.studio-avail-summary {
  margin: 8px 0 0;
  /* 選んでいる日付とスタジオ。小さくて見落とすので大きく（2026-10-14 店舗指摘） */
  font-size: 18px;
  line-height: 1.4;
  color: #0F172A;
  font-weight: 700;
}

.slot-day-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}
.slot-day-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  /* 連続タップをブラウザのダブルタップ拡大と誤認しない */
  touch-action: manipulation;
}
.slot-day-nav-btn.is-today {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.slot-day-nav-btn:disabled {
  opacity: 0.4;
}

.book-done-shot {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #9a3412;
  background: #fff7ed;
  border: 2px solid #f97316;
  border-radius: 12px;
  padding: 12px 14px;
}
.book-done-shot p {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #c2410c;
}

/* ===== Admin board (legacy-like) ===== */
.admin-board-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 10px 128px;
}

.admin-toolbar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}

.admin-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-toolbar-row + .admin-toolbar-row {
  margin-top: 8px;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

#notify-badge .notify-bell {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #64748b;
}

#notify-badge:hover .notify-bell {
  color: #334155;
}

.admin-btn.hidden { display: none; }
.admin-btn-sm { height: 32px; min-width: 36px; padding: 0 8px; }
.admin-btn-dark { background: #1e293b; color: #fff; border-color: #1e293b; }
.admin-btn-outline { color: #2563eb; border-color: #2563eb; }
.admin-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.admin-btn-ghost { background: #f8fafc; }

.admin-day-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.admin-day-nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  grid-column: 2;
}

@media (max-width: 700px) {
  .admin-day-nav {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .admin-day-nav-spacer { display: none; }
  .admin-day-nav-center {
    grid-column: 1;
    justify-self: center;
  }
}

.admin-btn-today {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 700;
}

.admin-btn-today:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.admin-date-headline {
  font-weight: 700;
  font-size: 18px;
  color: #1d4ed8;
  padding: 4px 8px;
  min-width: 12em;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.admin-muted { color: #64748b; font-size: 12px; }
.ml-auto { margin-left: auto; }

.admin-cal-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}

.admin-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-cal-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 7em;
}

.admin-cal-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}

.admin-cal-current {
  height: 26px;
  min-width: 52px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
}

.admin-cal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #64748b;
}

.admin-cal-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #cbd5e1;
  margin-right: 3px;
  vertical-align: -1px;
}

.admin-cal-legend .lg-past { background: #d3dbe6; }
.admin-cal-legend .lg-open { background: #fff; }
.admin-cal-legend .lg-unopened { background: #fcd34d; border-color: #f59e0b; }
.admin-cal-legend .lg-selected { background: #facc15; border-color: #ca8a04; }

.admin-cal-wrap,
.admin-day-nav,
.admin-board-wrap {
  overflow-anchor: none;
}

.admin-cal-months {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* admin-board.js の narrowQuery（max-width: 1024px）と揃える。ここがずれていると、
   JSは1ヶ月分しか描画しないのにグリッドは3列分の幅を確保したままになり、
   カレンダーの右側に大きな空白ができる（店舗指摘、2026-09-15、幅の広いタブレット） */
@media (min-width: 1025px) {
  .admin-cal-months { grid-template-columns: 1fr 1fr 1fr; }
}

.admin-month {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px;
  background: #eef2f7;
}

.admin-month h4 {
  margin: 0 0 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.admin-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.admin-month-grid .dow {
  font-size: 11px;
  font-weight: 600;
  color: #166534;
  padding: 2px 0;
  border-radius: 4px;
  background: #bbf7d0;
}

.admin-month-grid .dow.sun {
  color: #be123c;
  background: #fecdd3;
}

.admin-month-grid .dow.sat {
  color: #0369a1;
  background: #bae6fd;
}

.admin-month-grid .day.sun { color: #e11d48; }
.admin-month-grid .day.sat { color: #0284c7; }

.admin-month-grid .day,
.admin-month-grid .day-spacer {
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
}

.admin-month-grid .day-spacer {
  visibility: hidden;
  pointer-events: none;
}

.admin-month-grid .day.is-past {
  background: #d3dbe6;
  color: #94a3b8 !important;
  font-weight: 500;
}

.admin-month-grid .day.is-unopened {
  background: #fcd34d;
  color: #92400e !important;
  cursor: not-allowed;
  opacity: 0.85;
}

.admin-month-grid .day:hover:not(:disabled) { filter: brightness(0.97); }
.admin-month-grid .day.is-selected {
  background: #facc15 !important;
  color: #111 !important;
  box-shadow: inset 0 0 0 2px #ca8a04;
}
.admin-month-grid .day.is-today:not(.is-selected) { outline: 2px solid #2563eb; outline-offset: -1px; }
.admin-month-grid .day:disabled { color: #cbd5e1 !important; }

/* PC の3か月カレンダーは縦に長すぎたので、約2/3の高さに詰める（店舗指摘、2026-10-10）。
   上の基本の指定より後に置く（同じ詳細度なので後勝ち） */
@media (min-width: 1025px) {
  .admin-month { padding: 6px 8px; }
  .admin-month h4 { margin-bottom: 4px; }
  .admin-month-grid { gap: 2px 3px; }
  .admin-month-grid .dow { font-size: 10px; padding: 0; line-height: 16px; }
  .admin-month-grid .day,
  .admin-month-grid .day-spacer { height: 17px; font-size: 11px; line-height: 17px; border-radius: 4px; }
  /* 凡例との間を詰める（［当月］は「2026年10月」の下。2026-10-14 店舗指定） */
  .admin-cal-nav { margin-bottom: 4px; }
  .admin-cal-legend { margin-bottom: 6px; }
}

.admin-board-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
}

/* 縦表示⇄横表示の切り替え。スマホ・タブレット幅（1024px以下）だけ出す */
.admin-board-layout-bar {
  display: none;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.admin-board-layout-btn {
  font-size: 13px;
}

@media (max-width: 1024px) {
  .admin-board-layout-bar { display: flex; }

  /* 横表示（部屋=行・時間=列）を、横スクロールなしで画面幅に縮めて出す。
     文字は小さく、名前は3行まで。細かい印は小さくして詰める */
  .admin-slot-table.is-compact-h {
    min-width: 0;
    width: 100%;
    font-size: 9px;
  }

  .admin-slot-table.is-compact-h thead th {
    min-width: 0;
    height: 24px;
    padding: 0;
    font-size: 10px;
  }

  .admin-slot-table.is-compact-h .studio-col {
    position: static;
    min-width: 0;
    width: 34px;
    font-size: 10px;
    line-height: 1.1;
  }

  .admin-slot-table.is-compact-h .studio-col .studio-floor {
    display: none;
  }

  .admin-slot-table.is-compact-h .admin-cell {
    height: 64px;
    padding: 1px 0;
  }

  .admin-slot-table.is-compact-h .admin-cell .cell-name {
    -webkit-line-clamp: 3;
    max-height: 3.45em;
    font-size: 9px;
    line-height: 1.15;
    padding: 0 1px;
    word-break: break-all;
  }

  .admin-slot-table.is-compact-h .admin-cell .cell-meta {
    gap: 0 1px;
    font-size: 7px;
    line-height: 1.2;
  }

  .admin-slot-table.is-compact-h .admin-cell .cell-meta > *,
  .admin-slot-table.is-compact-h .admin-cell .cell-name > * {
    font-size: 7px;
    padding: 0 1px;
    margin: 0;
  }

  .admin-slot-table.is-compact-h .admin-cell svg {
    width: 8px;
    height: 8px;
  }
}

.admin-board-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
}

.admin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
}

.admin-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #cbd5e1;
  margin-right: 3px;
  vertical-align: -1px;
}

.admin-legend .lg-empty { background: #fff; }
.admin-legend .lg-sel { background: #fde047; border-color: #eab308; }
.admin-legend .lg-src-admin { background: #e2e8f0; border-color: #cbd5e1; }
.admin-legend .lg-src-pc { background: #fcd34d; border-color: #f59e0b; }
.admin-legend .lg-src-mobile { background: #86efac; border-color: #22c55e; }
.admin-legend .lg-lock { background: #fca5a5; border-color: #ef4444; }

.notify-log-item { cursor: pointer; }
.notify-log-item:active { filter: brightness(0.97); }

.admin-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  min-height: 200px;
}

.admin-board-wrap.is-loading .admin-table-scroll {
  opacity: 0.72;
  transition: opacity 0.12s ease;
}

#board-msg {
  min-height: 1.25em;
  margin: 6px 0 0;
}

.admin-slot-table {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 920px;
  width: 100%;
  font-size: 12px;
}

.admin-slot-table th,
.admin-slot-table td {
  /* 同じ色の予約が隣り合っても境目が分かるよう、罫線は少し濃いめ（店舗指摘、2026-10-02） */
  border: 1px solid #94a3b8;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.admin-slot-table thead th {
  background: #bfdbfe;
  color: #1e3a8a;
  font-weight: 700;
  height: 34px;
  min-width: 64px;
  white-space: nowrap;
  padding: 0 4px;
}

.admin-slot-table .studio-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #dbeafe;
  min-width: 72px;
  width: 72px;
  font-weight: 700;
}

.admin-slot-table tbody .studio-col {
  background: #e6eefa;
}

.admin-cell {
  height: 68px;
  min-width: 0;
  width: auto;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: background-color .08s ease, box-shadow .08s ease;
  padding: 2px;
  touch-action: none;
  user-select: none;
}

body.is-drag-selecting {
  cursor: grabbing;
  user-select: none;
}

body.is-drag-selecting .admin-table-scroll {
  overflow-x: hidden;
}

.admin-cell:hover:not(.is-booked):not(.is-locked) {
  background: #d1fae5;
}

.admin-cell.is-selected,
.admin-cell.is-locked.is-selected {
  background: #fde047 !important;
  color: #111 !important;
  box-shadow: inset 0 0 0 2px #ca8a04;
  position: relative;
}

.admin-cell.is-selected::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.admin-cell.is-booked {
  cursor: pointer;
}

/* 予約経路: 管理(電話/LINE等) / Web PC / Web スマホ
   管理は空き（白）よりわずかに薄いグレーで、枠線(#cbd5e1)より目立たせすぎない */
.admin-cell.is-booked.is-src-admin {
  background: #e2e8f0;
}

.admin-cell.is-booked.is-src-pc {
  background: #fcd34d;
}

.admin-cell.is-booked.is-src-mobile {
  background: #86efac;
}

.admin-cell.is-locked {
  background: #fca5a5;
  color: #7f1d1d;
  cursor: pointer;
}

.admin-cell .cell-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  max-height: 2.3em;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 0 2px;
}

.admin-cell .cell-note-mark {
  display: inline-block;
  margin-right: 1px;
  font-size: 10px;
  line-height: 1;
  color: #b45309;
  vertical-align: 0;
}

.admin-cell .cell-lock-mark {
  display: inline-block;
  margin-right: 2px;
  font-size: 10px;
  line-height: 1;
  vertical-align: 0;
}

.admin-cell .cell-note-label {
  color: #b45309;
  font-weight: 700;
}

.admin-cell .cell-guest-mark {
  color: #dc2626;
  font-weight: 700;
}

.admin-cell .cell-lesson-mark {
  display: inline-block;
  padding: 0 3px;
  border-radius: 4px;
  background: #FFEDD5;
  color: #9A3412;
  font-weight: 700;
  font-size: 0.9em;
}

.admin-cell .cell-obi-mark {
  display: inline-block;
  padding: 0 3px;
  border-radius: 4px;
  background: #E0E7FF;
  color: #3730A3;
  font-weight: 700;
  font-size: 0.9em;
}

.admin-cell .cell-genre-mark {
  color: #7c3aed;
  font-weight: 700;
}

/* 精算の印。未＝赤系、済＝青系。下書きも未として扱う（確定前は売上に入らない）
   コマの背景色に埋もれないよう、中は白抜き・枠と文字だけ色を付ける */
.admin-cell .cell-settle-mark {
  display: inline-block;
  margin-left: 3px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.02em;
  border-radius: 4px;
  padding: 0 4px;
  line-height: 1.35;
  white-space: nowrap;
  background: #fff;
}
.admin-cell .cell-settle-mark.is-settled { color: #1d4ed8; border: 1px solid #2563eb; }
.admin-cell .cell-settle-mark.is-unsettled { color: #b91c1c; border: 1px solid #dc2626; }

.admin-cell .cell-personal-mark {
  display: inline-block;
  color: #0891b2;
  margin-right: 1px;
  vertical-align: -2px;
}

.admin-cell .cell-personal-mark svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block;
}

.user-pick-btn.is-picked {
  background: #dbeafe;
  border-color: #2563eb;
  box-shadow: inset 0 0 0 1px #2563eb;
  font-weight: 600;
}

/* 管理モーダルのヘッダー操作。薄いグレー文字だとコントラストが足りず、
   ボタンにも見えないため、円形のアイコンボタンにしてタップ面を確保する。 */
.modal-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
  background: #fff;
  flex-shrink: 0;
  z-index: 10;
}
.modal-sheet-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.modal-sheet-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.modal-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: #F1F5F9;
  color: #0F172A;
  flex-shrink: 0;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.modal-icon-btn:hover {
  background: #E2E8F0;
}
.modal-icon-btn:active {
  background: #CBD5E1;
  transform: scale(0.96);
}
.modal-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* app.css は Tailwind の後に読むため、display 指定が .hidden を上書きしないようにする */
.modal-icon-btn.hidden {
  display: none;
}

/* 予約詳細：店舗用メモがある会員のジャンプ用アイコン */
@keyframes user-notes-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}
.user-notes-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 2px 0 4px;
  padding: 0;
  vertical-align: -7px;
  border: none;
  border-radius: 9999px;
  background: #FEF3C7;
  color: #B45309;
  flex-shrink: 0;
  animation: user-notes-blink 2.4s ease-in-out infinite;
}
.user-notes-jump:hover {
  background: #FDE68A;
  animation-play-state: paused;
  opacity: 1;
}
.user-notes-jump:active {
  transform: scale(0.96);
}
.user-notes-jump svg {
  width: 15px;
  height: 15px;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .user-notes-jump {
    animation: none;
  }
}

/* 会員検索：右サイドパレット（手動予約・会員に変更） */
#modal-panel.is-wide {
  width: min(96vw, 56rem);
  max-width: 56rem;
  max-height: 90vh;
}

#modal-body.is-split-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.member-split-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  height: 100%;
}

.member-split-main {
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.member-split-side {
  display: flex;
  flex-direction: column;
  min-height: 14rem;
  max-height: 40vh;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.member-split-side-head {
  padding: 0.65rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9;
  flex-shrink: 0;
}

.member-split-side-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.member-split-side-status {
  flex-shrink: 0;
  padding: 0.4rem 0.85rem 0.65rem;
  font-size: 0.7rem;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.member-split-side-list .user-pick-btn {
  background: #fff;
}

@media (min-width: 768px) {
  #modal-panel.is-wide {
    max-width: 56rem;
    height: 90vh;
  }

  .member-split-layout {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
  }

  .member-split-main {
    flex: 0 0 22.5rem;
    width: 22.5rem;
    max-width: 42%;
    border-right: 1px solid #e2e8f0;
  }

  .member-split-side {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    border-top: 0;
  }
}

/* 予約確定後の読み上げ用確認 */
.book-confirm {
  padding: 1rem 0.25rem 0.5rem;
  text-align: center;
  color: #0f172a;
}

.book-confirm-date {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.book-confirm-slots {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.book-confirm-slot {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* 複数日予約モードで日付が混在するときだけ、コマごとに日付を出す */
.book-confirm-date-inline {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 0.1em;
}

.book-confirm-studio {
  display: inline;
}

.book-confirm-time {
  display: inline;
  margin-left: 0.35em;
}

.book-confirm-hours {
  display: inline;
  margin-left: 0.2em;
  font-weight: 600;
  color: #334155;
}

.book-confirm-party {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.55;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}

.book-confirm-count {
  display: block;
  margin-bottom: 0.35rem;
}

.book-confirm-reserver {
  display: block;
}

.book-confirm-meta {
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 0.4rem;
}

@media (min-width: 640px) {
  .book-confirm-date {
    font-size: 1.75rem;
  }
  .book-confirm-slot,
  .book-confirm-party {
    font-size: 1.55rem;
  }
}

/* 左右+上下の4辺を個別のレイヤーにしておく。縦表示で同じ予約が複数コマに
   またがるとき、続きのコマとの境界だけ辺を落として枠全体を1つに繋げる
   （下の .admin-slot-table.is-vertical 側の上書きを参照）。 */
.admin-cell.has-note {
  box-shadow:
    inset 1.5px 0 0 0 rgba(217, 119, 6, 0.45),
    inset -1.5px 0 0 0 rgba(217, 119, 6, 0.45),
    inset 0 1.5px 0 0 rgba(217, 119, 6, 0.45),
    inset 0 -1.5px 0 0 rgba(217, 119, 6, 0.45);
}

.admin-cell .cell-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1px 3px;
  font-size: 10px;
  line-height: 1.25;
  opacity: .85;
  max-height: 3.2em;
  overflow: hidden;
}

/* id指定で他ルールに上書きされないようにする */
#selection-bar.admin-selection-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: #fff;
  border: 0;
  border-top: 1px solid #cbd5e1;
  border-radius: 16px 16px 0 0;
  padding: 14px 14px calc(36px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.12);
}

#selection-bar.admin-selection-bar.hidden { display: none; }
#selection-bar .admin-selection-actions .admin-btn.hidden { display: none; }

#selection-bar .admin-selection-text {
  font-size: 14px;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 140px;
  margin: 0;
}

#selection-bar .admin-selection-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  width: min(50%, 420px);
  margin-left: auto;
}

#selection-bar .admin-selection-actions .admin-btn {
  flex: 1 1 0;
  min-width: 0;
  height: auto !important;
  min-height: 52px;
  padding: 12px 10px !important;
  font-size: 15px !important;
  font-weight: 700;
  border-radius: 12px;
  line-height: 1.2;
}

@media (max-width: 640px) {
  #selection-bar.admin-selection-bar {
    flex-direction: column;
    align-items: stretch;
  }
  #selection-bar .admin-selection-actions {
    width: 100%;
    margin-left: 0;
  }
}

.studio-floor {
  font-size: 10px;
  font-weight: 400;
  color: #64748b;
}

/* ============================================================
   スマホ・タブレット幅の管理ボード
   「時間=縦 / 部屋=横」に組み替えて横スクロールを無くす。
   PC（1025px以上）は従来のまま。
   admin-board.js の narrowQuery（max-width: 1024px）と揃えること。
   ============================================================ */
@media (max-width: 1024px) {
  /* iOSはフォーカスした入力欄の文字が16px未満だと自動でページを拡大し、
     フォーカスを外しても縮小しないまま残る。ラベルの text-sm 等が
     継承されて14pxになっている箇所があったため、フォームは一律16pxに固定する。
     Tailwind のプリフライトより確実に勝たせるため !important を付ける。 */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* 指のスワイプをスクロールに使わせる（ドラッグ選択はPCのみ） */
  .admin-cell {
    touch-action: auto;
    width: auto;
    min-width: 0;
  }

  .admin-table-scroll {
    overflow-x: visible;
    min-height: 0;
  }

  .admin-slot-table.is-vertical {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    font-size: 13px;
  }

  /* 左端の時間列は固定幅、残りを部屋で等分 */
  .admin-slot-table.is-vertical .hour-col {
    width: 62px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
  }

  .admin-slot-table.is-vertical thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 42px;
    min-width: 0;
    font-size: 13px;
  }

  .admin-slot-table.is-vertical thead .hour-col {
    z-index: 4;
  }

  .admin-slot-table.is-vertical .admin-cell {
    height: 56px;
  }

  /* 同じ予約・ロックが続くコマ同士は、境界線を消してひとつながりの塊に見せる
     （rowSpan は使わず1時間ごとに実 td を積む方式なので、間の罫線を自前で消す） */
  .admin-slot-table.is-vertical .admin-cell.has-continuation {
    border-bottom: none;
  }
  .admin-slot-table.is-vertical .admin-cell.is-continuation {
    border-top: none;
  }

  /* has-note の枠（box-shadow）も同様に、続きのコマとの境界の辺だけ落として
     複数コマにまたがる予約でも枠全体が1つに見えるようにする */
  .admin-slot-table.is-vertical .admin-cell.has-note.has-continuation {
    box-shadow:
      inset 1.5px 0 0 0 rgba(217, 119, 6, 0.45),
      inset -1.5px 0 0 0 rgba(217, 119, 6, 0.45),
      inset 0 1.5px 0 0 rgba(217, 119, 6, 0.45);
  }
  .admin-slot-table.is-vertical .admin-cell.has-note.is-continuation {
    box-shadow:
      inset 1.5px 0 0 0 rgba(217, 119, 6, 0.45),
      inset -1.5px 0 0 0 rgba(217, 119, 6, 0.45),
      inset 0 -1.5px 0 0 rgba(217, 119, 6, 0.45);
  }
  .admin-slot-table.is-vertical .admin-cell.has-note.has-continuation.is-continuation {
    box-shadow:
      inset 1.5px 0 0 0 rgba(217, 119, 6, 0.45),
      inset -1.5px 0 0 0 rgba(217, 119, 6, 0.45);
  }

  /* 予約セルは縦結合されるので、中身を縦に積む */
  .admin-slot-table.is-vertical .admin-cell .cell-name {
    font-size: 12px;
    line-height: 1.25;
  }

  .admin-slot-table.is-vertical .admin-cell .cell-meta {
    font-size: 10px;
  }

  /* カレンダーは当月のみ。縦に大きすぎたので約半分に詰めた（店舗指摘、2026-10-13。以前は 40px） */
  .admin-month-grid .day,
  .admin-month-grid .day-spacer {
    height: 24px;
    font-size: 13px;
    line-height: 24px;
    border-radius: 5px;
  }
  .admin-month { padding: 6px; }
  .admin-month h4 { margin-bottom: 4px; }
  .admin-month-grid .dow { padding: 0; line-height: 18px; }
  /* 凡例との間を詰める（［当月］は「2026年10月」の下。2026-10-14 店舗指定） */
  .admin-cal-nav { margin-bottom: 4px; }

  .admin-cal-legend {
    gap: 8px;
    font-size: 10px;
  }

  /* ヘッダーのナビが溢れて「通知」「設定」に届かない問題 */
  .admin-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .admin-nav::-webkit-scrollbar { display: none; }

  .admin-nav a {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* モーダル: 破壊的ボタンがヘッダーで「閉じる」と重なるのを防ぐ */
  #modal-header-extra {
    display: none;
  }

  .modal-danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }

  .modal-danger-actions > button {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* 手動予約: 検索結果パネルは中身の分だけ。確定ボタンは常に見える位置に固定。
     キーボードが出ているときは --modal-vh（実際に見えている高さ）を基準に縮める */
  .member-split-side {
    max-height: calc(var(--modal-vh, 100vh) * 0.45);
    min-height: 0;
    /* 結果が出ているときに潰れないよう、縮むのは入力欄側（スクロール可）に任せる */
    flex-shrink: 0;
  }

  /* 検索中（入力欄フォーカス中）は区分・受付スタッフ等を隠す分、
     検索結果の表示領域を大きく確保する（キーボードで隠れて見えない対策） */
  .member-split-layout.is-searching .member-split-side {
    max-height: calc(var(--modal-vh, 100vh) * 0.8);
  }

  .member-split-main {
    padding-bottom: 0;
  }

  .split-main-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 8px 0;
    margin-top: 8px;
    box-shadow: 0 -6px 10px -8px rgba(15, 23, 42, 0.35);
    z-index: 1;
  }
}

/* PCでは本文側の危険操作ブロックを出さない（ヘッダーにあるため） */
@media (min-width: 1025px) {
  .modal-danger-actions { display: none; }
}


/* ============================================================
   精算画面（public/admin/settlement.php）
   iPad・スマホでの片手操作を前提に、タップ領域を大きめに取っている。
   ============================================================ */

.settle-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 12px 96px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settle-topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "back title" "back sub";
  gap: 0 8px;
  align-items: center;
}
.settle-back {
  grid-area: back;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #fff;
  font-size: 14px;
  white-space: nowrap;
}
.settle-topbar-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
}
.settle-topbar-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settle-topbar-sub {
  grid-area: sub;
  font-size: 12px;
  color: #64748B;
}

.settle-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  color: #475569;
}
.settle-status.is-open { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.settle-status.is-settled { background: #DCFCE7; border-color: #BBF7D0; color: #166534; }
.settle-status.is-void { background: #F1F5F9; color: #94A3B8; text-decoration: line-through; }

.settle-msg { font-size: 13px; color: #64748B; min-height: 1em; }
.settle-msg.is-error { color: #DC2626; font-weight: 500; }

.settle-warn {
  border: 1px solid #FCA5A5;
  background: #FEF2F2;
  color: #B91C1C;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settle-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settle-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.settle-card-head h2 { font-size: 15px; font-weight: 600; }

.settle-date { font-size: 12px; color: #64748B; display: flex; align-items: center; gap: 6px; }
.settle-input-date {
  height: 40px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0 8px;
  font-size: 14px;
}

.settle-empty {
  font-size: 13px;
  color: #94A3B8;
  padding: 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* #product-buttons は grid（1列=140px）なので、単独表示のときは全列分を使う */
  grid-column: 1 / -1;
}

.settle-items { display: flex; flex-direction: column; gap: 8px; }
.settle-item {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settle-item.is-missing { border-color: #FCA5A5; background: #FEF2F2; }
.settle-item-main { display: flex; align-items: flex-start; gap: 8px; }
.settle-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settle-item-cat { font-size: 11px; color: #64748B; }
.settle-item-label { font-size: 14px; word-break: break-word; }
.settle-item-unit { font-size: 11px; color: #94A3B8; }
.settle-item-amount { flex-shrink: 0; }
.settle-amount-input {
  width: 110px;
  height: 44px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.settle-item-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.settle-seg { display: inline-flex; border: 1px solid #E2E8F0; border-radius: 10px; overflow: hidden; }
.settle-seg button {
  height: 44px;
  min-width: 72px;
  padding: 0 12px;
  font-size: 14px;
  background: #fff;
  color: #475569;
}
.settle-seg button.is-on { background: #2563EB; color: #fff; font-weight: 600; }
/* 支払方法（現金／stera）は青一色だと選択中でもどちらか見分けにくいため色を分ける。
   stera=紫は sales-cal-split の .is-stera と揃えている */
.settle-seg button[data-act="method-stera"].is-on { background: #7C3AED; }
.settle-seg-sm button { height: 36px; min-width: 0; font-size: 12px; padding: 0 10px; }

.settle-person-select {
  height: 36px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
}
.settle-mini {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  color: #475569;
}
.settle-mini.is-danger { color: #DC2626; }

.settle-add { border-top: 1px solid #E2E8F0; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.settle-add-label { font-size: 12px; color: #64748B; }
.settle-chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.settle-chip {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #fff;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.settle-chip.is-on { background: #0F172A; color: #fff; border-color: #0F172A; }
.settle-chip-sub { height: 36px; font-size: 12px; }
.settle-chip-sub.is-on { background: #2563EB; border-color: #2563EB; }

.settle-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.settle-product {
  min-height: 56px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.settle-product-name { font-size: 13px; line-height: 1.2; }
.settle-product-price { font-size: 12px; color: #64748B; font-variant-numeric: tabular-nums; }
.settle-product-price small { color: #94A3B8; }

.settle-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #E2E8F0;
  padding-top: 10px;
  font-size: 14px;
}
.settle-total-row strong { font-size: 20px; font-variant-numeric: tabular-nums; }

.settle-payer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748B; }
.settle-payer strong { font-size: 18px; color: #0F172A; min-width: 1.5em; text-align: center; }
.settle-step {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #fff;
  font-size: 20px;
  line-height: 1;
}

.settle-payer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settle-payments { display: flex; flex-direction: column; gap: 8px; }
.settle-pay {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 枠を2pxにして paid との差を出す（padding を1px減らして高さは据え置き） */
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 7px;
  flex-wrap: wrap;
}
/* 暗めのタブレットでも、支払済の行が一目で分かるよう濃い緑の枠＋はっきりした緑地にする */
.settle-pay.is-paid { background: #DCFCE7; border-color: #16A34A; }
.settle-pay-no {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.settle-pay-amount {
  width: 104px;
  height: 44px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.settle-paid-btn {
  height: 44px;
  min-width: 84px;
  padding: 0 14px;
  border-radius: 12px;
  /* 未払は琥珀色で「まだ」だと分かるようにし、支払済（濃い緑）との差を大きくする */
  border: 2px solid #F59E0B;
  background: #FFFBEB;
  font-size: 14px;
  font-weight: 600;
  color: #B45309;
  margin-left: auto;
}
.settle-paid-btn.is-on { background: #15803D; border-color: #15803D; color: #fff; font-weight: 700; }

.settle-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid #E2E8F0;
  padding-top: 10px;
}
.settle-breakdown > div { display: flex; flex-direction: column; gap: 2px; }
.settle-breakdown span { font-size: 11px; color: #64748B; }
.settle-breakdown strong { font-size: 16px; font-variant-numeric: tabular-nums; }

.settle-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.settle-actions-sub { display: flex; gap: 8px; justify-content: flex-end; }

.settle-btn-primary,
.settle-btn-secondary,
.settle-btn-outline,
.settle-btn-ghost,
.settle-btn-danger {
  height: 56px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
}
.settle-btn-primary { background: #2563EB; color: #fff; }
.settle-btn-primary:disabled { background: #CBD5E1; color: #F8FAFC; }
.settle-btn-secondary { background: #fff; border-color: #E2E8F0; color: #334155; }
.settle-btn-outline { height: 44px; font-size: 14px; background: #fff; border-color: #E2E8F0; color: #334155; padding: 0 14px; }
.settle-btn-outline.is-on { background: #2563EB; border-color: #2563EB; color: #fff; font-weight: 600; }
.settle-btn-ghost { height: 44px; font-size: 14px; background: transparent; color: #64748B; padding: 0 14px; }
/* 「自由入力で追加」用。白いカードに馴染んでミスタップしないよう、あえて色を付けて目立たせる */
.settle-btn-add { height: 44px; font-size: 14px; background: #EFF6FF; border: 1px dashed #93C5FD; color: #2563EB; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.settle-btn-add:active { background: #DBEAFE; }
.settle-btn-add-icon { font-weight: 700; }
/* 「自由入力で追加」でカテゴリーを聞く小さなパネル。今開いているタブに紐づけて
   暗黙に決めると、タブを切り替え忘れたまま自由入力してカテゴリーを間違える事故が
   起きやすいため、必ず明示的に選ばせる（2026-08-12、店舗からの指摘） */
.settle-freecat { border: 1px solid #BFDBFE; background: #F8FAFF; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.settle-freecat-label { font-size: 13px; font-weight: 600; color: #1D4ED8; }
.settle-btn-danger { height: 44px; font-size: 14px; background: transparent; color: #DC2626; padding: 0 14px; }

@media (max-width: 380px) {
  .settle-pay-amount { width: 88px; }
}

/* ============================================================
   精算・売上（public/admin/sales.php）
   ============================================================ */

/* 幅 1160px: 一覧表は列の幅を固定していて、全部で約 1,093px ある（「ポイント」列を足して 56px 増えた）。
   左の「今日」の目印と余白を足した分が入る幅にして、PC で横スクロールが出ないようにする */
.sales-page { max-width: 1160px; margin: 0 auto; padding: 12px 8px 80px; display: flex; flex-direction: column; gap: 0; }
/* タブの中身（カレンダー／一覧表／日別明細／キャンセル料）。.sales-page の gap は
   タブ本体同士にしか効かないので、タブ内の各カード・ボタン列は自前で余白を持たないと
   互いにべったりくっついてしまう（店舗からの指摘、2026-08-12）。 */
.sales-pane { display: flex; flex-direction: column; gap: 16px; }
/* app.css は Tailwind の後に読む。display:flex/grid/inline-block が
   .hidden（display:none）を上書きし、一覧表タブなのにカレンダー等も同時に出ていた。 */
.sales-pane.hidden,
.sales-page .sales-monthnav.hidden,
.sales-close-row.hidden,
.sales-recheck.hidden,
.sales-tab-badge.hidden,
.an-card.hidden,
.settle-warn.hidden,
.settle-cancelfee.hidden,
.settle-freecat.hidden {
  display: none;
}
.sales-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sales-head h1 { font-size: 18px; font-weight: 600; }
.sales-tabs { display: flex; gap: 6px; overflow-x: auto; }
.sales-tab {
  height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #E2E8F0;
  background: #fff; font-size: 13px; white-space: nowrap; flex-shrink: 0;
}
.sales-tab.is-on { background: #0F172A; color: #fff; border-color: #0F172A; }

.sales-navbtn { height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; font-size: 13px; }
.sales-navbtn.is-sub { color: #64748B; }
.sales-page .sales-monthnav.admin-cal-nav { margin-bottom: 10px; }
.sales-msg { font-size: 13px; color: #DC2626; }
.sales-msg:empty { display: none; }
.sales-msg:not(:empty) { margin-bottom: 10px; }
.sales-note { font-size: 12px; color: #94A3B8; }
.sales-muted { color: #94A3B8; }

.sales-month-summary { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sales-sum-main { display: flex; align-items: baseline; justify-content: space-between; }
.sales-sum-main span { font-size: 13px; color: #64748B; }
.sales-sum-main strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.sales-sum-sub { display: flex; gap: 12px; font-size: 13px; color: #475569; flex-wrap: wrap; }
.sales-sum-sub .is-warn { color: #B45309; font-weight: 600; }
.sales-sum-cats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #64748B; }

.sales-cal-head, .sales-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sales-cal-head { font-size: 11px; color: #64748B; text-align: center; }
.sales-cal-head .is-sat { color: #2563EB; }
.sales-cal-head .is-sun { color: #DC2626; }
.sales-cal-cell {
  min-height: 78px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff;
  padding: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
}
.sales-cal-cell.is-blank { border: none; background: transparent; }
.sales-cal-cell.is-empty { background: #F8FAFC; }
.sales-cal-cell.is-today { border-color: #2563EB; box-shadow: inset 0 0 0 1px #2563EB; }
.sales-cal-day { font-size: 12px; color: #475569; }
.sales-cal-cell.is-sat .sales-cal-day { color: #2563EB; }
.sales-cal-cell.is-sun .sales-cal-day { color: #DC2626; }
.sales-cal-total { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sales-cal-split { display: flex; flex-direction: column; gap: 0; font-size: 10px; font-style: normal; }
.sales-cal-split i { font-style: normal; font-variant-numeric: tabular-nums; }
.sales-cal-split .is-cash { color: #475569; }
.sales-cal-split .is-stera { color: #7C3AED; }
.sales-cal-open { font-size: 10px; color: #B45309; font-weight: 600; margin-top: auto; }

.sales-table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-left: 2.2em;
  box-sizing: border-box;
}
.sales-today-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.2em;
  pointer-events: none;
}
.sales-table-scroll {
  /* 18列ある表なので、タブレット幅などコンテナが狭いと列が読めない太さまで
     詰まってしまう。テーブル側にmin-widthを持たせ、収まらない分はここで
     横スクロールさせる（以前は overflow: hidden で、はみ出した右側の列が
     スクロールもできずただ見えなくなっていた。店舗指摘、2026-09-15）。
     ただしmin-widthはPCでは常にコンテナ幅の100%に収めたいので、
     タブレット以下の幅（max-width: 1024px、admin-board.jsのnarrowQueryと
     揃えた閾値）だけに絞る（PCで不要な横スクロールが出るとの指摘、2026-09-15）。 */
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1024px) {
  .sales-table { min-width: 1100px; }
}
.sales-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}
.sales-table th, .sales-table td {
  padding: 5px 4px;
  border-bottom: 1px solid #F1F5F9;
  border-right: 1px solid #EDF1F5;
  text-align: left;
  box-sizing: border-box;
}
.sales-table th:last-child, .sales-table td:last-child { border-right: none; }
.sales-table thead th,
.sales-table thead th.is-num {
  background: #F8FAFC;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  position: sticky;
  top: 0;
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: bottom;
  text-align: center;
}
.sales-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.sales-table .is-negative { color: #DC2626; font-weight: 600; }
/* 6桁=繰越残高/当日残高/入出金/レジ集金/現金/stera/日売
   5桁=カテゴリとレジ誤差。キャンセルだけ見出しが5文字なので列を広げる */
.sales-table col.col-day { width: 2.6em; }
.sales-table col.col-dow { width: 1.5em; }
.sales-table col.col-amt5 { width: calc(4.2em + 6px); }
.sales-table col.col-amt5-wide { width: calc(5.2em + 6px); }
.sales-table col.col-amt6 { width: calc(8ch + 6px); }
.sales-table col.col-status { width: 3.4em; }
.sales-table .is-strong { font-weight: 600; }
.sales-table tbody tr { cursor: pointer; }
.sales-table tbody tr:hover { background: #F8FAFC; }
.sales-table tbody tr.is-sat td:first-child, .sales-table tbody tr.is-sat td:nth-child(2) { color: #2563EB; }
.sales-table tbody tr.is-sun td:first-child, .sales-table tbody tr.is-sun td:nth-child(2) { color: #DC2626; }
.sales-table tbody tr.is-today td { background: #EFF6FF; }
.sales-table tbody tr.is-today:hover td { background: #DBEAFE; }
.sales-today-badge {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 999px;
  background: #2563EB;
  color: #fff;
  white-space: nowrap;
}
.sales-table tfoot th, .sales-table tfoot td { background: #F1F5F9; font-weight: 600; }

/* 旧「現金出納帳」Excelの見出し配色を再現（列ごとに同じ色を割り当てて見比べやすくする） */
.sales-table thead th.th-cat-studio { background: #F4CCCC; color: #1E293B; }
.sales-table thead th.th-cat-lesson { background: #FFE599; color: #1E293B; }
.sales-table thead th.th-cat-cancel { background: #DAEEF3; color: #1E293B; }
.sales-table thead th.th-cat-membership { background: #6AA84F; color: #1E293B; }
.sales-table thead th.th-cat-other { background: #D9D9D9; color: #1E293B; }
.sales-table thead th.th-cat-rental { background: #8E7CC3; color: #1E293B; }
.sales-table thead th.th-cat-goods { background: #CCCCCC; color: #1E293B; }
.sales-table thead th.th-inout { background: #FDE9D9; color: #1E293B; }
.sales-table thead th.th-cash { background: #B8CCE4; color: #1E293B; }
.sales-table thead th.th-stera { background: #C0504D; color: #fff; }
.sales-table thead th.th-daytotal { background: #38761D; color: #fff; }

.sales-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px; margin-right: 2px; }
.sales-badge.is-warn { background: #FEF3C7; color: #92400E; }
.sales-badge.is-error { background: #FEE2E2; color: #B91C1C; }
.sales-badge.is-open { background: #FEF3C7; color: #92400E; }
.sales-badge.is-settled { background: #DCFCE7; color: #166534; }
.sales-badge.is-void { background: #F1F5F9; color: #94A3B8; }

.sales-daynav { display: flex; align-items: center; gap: 8px; }
.sales-date-input { flex: 1; height: 44px; border: 1px solid #E2E8F0; border-radius: 12px; padding: 0 10px; font-size: 15px; text-align: center; }
.sales-day-summary { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sales-day-head { font-size: 14px; font-weight: 600; }
.sales-day-main { display: flex; align-items: baseline; justify-content: space-between; }
.sales-day-main span { font-size: 13px; color: #64748B; }
.sales-day-main strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.sales-day-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sales-day-grid > div { display: flex; flex-direction: column; }
.sales-day-grid span { font-size: 11px; color: #64748B; }
.sales-day-grid strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.sales-day-grid strong.is-warn { color: #B45309; }
.sales-day-cats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #64748B; }
.sales-alert { background: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C; border-radius: 10px; padding: 8px; font-size: 12px; }

.sales-card-head { display: flex; align-items: center; justify-content: space-between; }
.sales-card-head h2 { font-size: 15px; font-weight: 600; }
.sales-newbtn { height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; font-size: 13px; color: #334155; }

.sales-daylist { display: flex; flex-direction: column; gap: 8px; }
.sales-slip { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sales-slip.is-void { opacity: 0.55; }
.sales-slip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sales-slip-name { font-size: 15px; font-weight: 600; }
.sales-slip.is-void .sales-slip-name { text-decoration: line-through; }
.sales-slip-reg-link { color: #2563EB; text-decoration: underline; font-weight: 500; }
.sales-slip-sub { font-size: 11px; color: #94A3B8; }
.sales-slip-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sales-slip-amount strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.sales-slip-amount span { font-size: 11px; color: #64748B; }

@media (max-width: 560px) {
  .sales-cal-cell { min-height: 64px; }
  .sales-cal-total { font-size: 11px; }
}

/* レジ締め（sales.php の日別明細タブの下部） */
.sales-close-state { font-size: 12px; color: #B45309; font-weight: 600; }
.sales-close-state.is-closed { color: #166534; }
.sales-recheck { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.sales-close { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.sales-close-row { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 8px; }
.sales-close-row > label { font-size: 13px; color: #475569; }
.sales-close-value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sales-close-value strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.sales-close-value strong.is-ok { color: #166534; }
.sales-close-value strong.is-error { color: #B91C1C; }
.sales-close-input {
  width: 130px; height: 44px; border: 1px solid #E2E8F0; border-radius: 10px;
  padding: 0 10px; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums;
}
.sales-close-input:disabled { background: #F8FAFC; color: #64748B; }
.sales-close-memo { flex: 1; min-width: 150px; height: 44px; border: 1px solid #E2E8F0; border-radius: 10px; padding: 0 10px; font-size: 14px; }
.sales-close-manual { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #64748B; }
.sales-sign-seg { display: inline-flex; height: 44px; border: 1px solid #E2E8F0; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.sales-sign-seg button { width: 36px; background: #fff; color: #475569; font-size: 16px; font-weight: 600; }
.sales-sign-seg button + button { border-left: 1px solid #E2E8F0; }
.sales-sign-seg button.is-on { background: #2563EB; color: #fff; }
.sales-sign-seg button[data-sign="-1"].is-on { background: #DC2626; }
.sales-sign-fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.sales-sign-fixed.is-minus {
  background: #DC2626;
  color: #fff;
}
/* 入出金とレジ集金は符号・金額・メモを同じ列幅にして縦を揃える */
.sales-topfields .sales-close-value {
  display: grid;
  grid-template-columns: 75px 130px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  align-items: center;
}
.sales-topfields .sales-sign-seg,
.sales-topfields .sales-sign-fixed {
  width: 75px;
  box-sizing: border-box;
}
.sales-topfields .sales-sign-seg button {
  flex: 1;
  width: auto;
}
.sales-topfields .sales-close-input,
.sales-topfields .sales-close-memo {
  width: 100%;
  min-width: 0;
}
.sales-close-hint { font-size: 11px; color: #94A3B8; margin: -4px 0 4px; }

/* 「レジにあるはずの金額」— カウント前に見比べる基準値として少し強調する。
   ラベルが長く7.5em幅では折り返すので、この行だけラベル/値を縦積みにする */
.sales-close-row.is-expected {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: #F8FAFC; border-radius: 10px; padding: 8px 10px; margin: 0 -2px;
}
.sales-close-row.is-expected > label { font-weight: 600; color: #334155; white-space: nowrap; }
.sales-close-row.is-expected strong { font-size: 18px; }

/* 「レジの中を数える」— 金種ごとの実数入力が主役の操作になるよう独立したカードにする */
.sales-count-card {
  background: #F8FAFF; border: 1px solid #BFDBFE; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.sales-count-head { font-size: 14px; font-weight: 600; color: #1D4ED8; }
.sales-denom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sales-denom-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sales-denom-item label { font-size: 11px; color: #64748B; }
.sales-denom-item span { font-size: 10px; color: #94A3B8; }
.sales-denom-input {
  width: 100%; height: 44px; border: 1px solid #BFDBFE; border-radius: 8px;
  text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; background: #fff;
}
.sales-count-total { text-align: right; font-size: 14px; color: #334155; border-top: 1px solid #BFDBFE; padding-top: 8px; }
.sales-count-total strong { font-size: 20px; }
@media (max-width: 480px) {
  .sales-denom-grid { grid-template-columns: repeat(2, 1fr); }
}

.sales-sign-seg button:disabled { opacity: 0.4; }

.sales-close-row.is-readonly > label { color: #64748B; }
.sales-close-row.is-total { border-top: 1px solid #E2E8F0; padding-top: 8px; }
.sales-close-row.is-total strong { font-size: 22px; }
.sales-close-sep { border-top: 1px solid #E2E8F0; padding-top: 10px; margin-top: 4px; font-size: 12px; color: #64748B; font-weight: 600; }
.sales-close-actions { display: flex; gap: 8px; margin-top: 6px; }
.sales-close-btn { flex: 1; height: 52px; border-radius: 14px; background: #0F172A; color: #fff; font-size: 15px; font-weight: 600; border: 1px solid #0F172A; }
.sales-close-btn.is-sub { background: #fff; color: #64748B; border-color: #E2E8F0; }
.sales-close-msg { font-size: 13px; color: #DC2626; min-height: 1em; }

@media (max-width: 560px) {
  .sales-close-row { grid-template-columns: 1fr; gap: 4px; }
  .sales-close-row > label { font-size: 12px; }
  .sales-topfields .sales-close-value {
    grid-template-columns: 75px minmax(0, 1fr);
  }
  .sales-topfields .sales-close-memo {
    grid-column: 1 / -1;
  }
}

/* キャンセル料一覧（sales.php の「キャンセル料」タブ） */
.sales-tab-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: #DC2626; color: #fff; font-size: 10px; line-height: 18px; text-align: center;
}
.sales-tabs.is-on .sales-tab-badge { background: #fff; color: #DC2626; }
.sales-subtabs { margin: -4px 0 2px; }
.sales-subtab {
  height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #E2E8F0;
  background: #fff; font-size: 12px; white-space: nowrap; flex-shrink: 0; color: #475569;
}
.sales-subtab.is-on { background: #0F172A; color: #fff; border-color: #0F172A; }

.sales-cancel-summary { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sales-cancel-summary .sales-sum-main strong.is-warn { color: #B45309; }
.sales-cancel-summary .sales-sum-sub .is-warn { color: #B91C1C; font-weight: 600; }

.sales-slip.is-cancel-fee { gap: 6px; }
.sales-slip-sub .is-warn { color: #B91C1C; font-weight: 600; }
.sales-cancel-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sales-mini-btn {
  height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid #E2E8F0;
  background: #fff; font-size: 12px; color: #334155; display: inline-flex; align-items: center;
}
.sales-mini-btn.is-ghost { color: #DC2626; border-color: #FCA5A5; }
.sales-badge.is-unpaid { background: #FEF3C7; color: #92400E; }
.sales-badge.is-paid { background: #DCFCE7; color: #166534; }
.sales-badge.is-waived { background: #F1F5F9; color: #94A3B8; }

/* 精算フォームの未収キャンセル料バナー（パターンB: 合算） */
.settle-cancelfee {
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.settle-cancelfee-head { font-size: 13px; font-weight: 600; color: #92400E; }
.settle-cancelfee-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: #78350F;
}
.settle-cancelfee-row strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.settle-cancelfee-btn {
  height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #F59E0B;
  background: #F59E0B; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.settle-cancelfee-btn:disabled { background: #fff; color: #92400E; border-color: #FDE68A; }

/* コマの「未収キャンセル料」印。settleMark（このコマ自体の精算状態）とは別の概念 */
.admin-cell .cell-unpaid-mark {
  display: inline-block;
  margin-right: 2px;
  padding: 0 3px;
  border-radius: 4px;
  background: #FEF3C7;
  color: #92400E;
  font-weight: 700;
  font-size: 0.85em;
}

/* データ分析タブ */
.an-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 900px) {
  .an-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.an-kpi {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 76px;
}
.an-kpi span { font-size: 12px; color: #64748B; }
.an-kpi strong { font-size: 18px; font-variant-numeric: tabular-nums; color: #0F172A; line-height: 1.2; }
.an-kpi em { font-style: normal; font-size: 12px; color: #475569; }
.an-kpi .is-up { color: #15803D; }
.an-kpi .is-down { color: #B91C1C; }
.an-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-card h2 { font-size: 15px; font-weight: 600; color: #0F172A; }
.an-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.an-card-top .sales-note { margin: 4px 0 0; }
.an-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-heat {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  min-width: 620px;
}
.an-heat th, .an-heat td {
  border: 1px solid #E2E8F0;
  text-align: center;
  padding: 4px 2px;
  font-variant-numeric: tabular-nums;
}
.an-heat thead th { background: #F8FAFC; color: #64748B; font-weight: 600; }
.an-heat tbody th { background: #F8FAFC; color: #475569; font-weight: 600; width: 3.2em; }
.an-heat td { height: 44px; }
.an-heat button {
  width: 100%;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  border-radius: 6px;
}
.an-heat td.is-empty { background: #F8FAFC; color: #CBD5E1; }
.an-heat td.is-partial button { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25); }
.an-heat thead th.an-heat-total,
.an-heat td.an-heat-total {
  background: #EEF2FF;
  color: #312E81;
  font-weight: 700;
  white-space: nowrap;
}
.an-heat td.an-heat-total.is-empty { background: #F8FAFC; color: #CBD5E1; font-weight: 600; }
.an-heat-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 10px;
  color: #94A3B8;
  padding-top: 2px;
  white-space: nowrap;
}
.an-heat-swatch {
  width: 72px;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, #FEF9C3, #FB923C, #9A3412);
}
.an-bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 8px 0 0; }
.an-bar-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
}
.an-bar-track {
  width: 100%;
  max-width: 36px;
  height: 140px;
  position: relative;
  background: #F1F5F9;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.an-bar-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #2563EB;
  border-radius: 6px 6px 0 0;
}
.an-bar-mark {
  position: absolute;
  left: 10%; right: 10%;
  height: 0;
  border-top: 2px dashed #0F172A;
}
.an-bar-lab { font-size: 11px; color: #64748B; }
.an-bar-val { font-size: 10px; color: #334155; font-variant-numeric: tabular-nums; }
.an-stack { display: flex; flex-direction: column; gap: 8px; }
.an-stack-row { display: grid; grid-template-columns: 3.2em 1fr 5.5em; gap: 8px; align-items: center; font-size: 12px; }
.an-stack-lab { color: #475569; }
.an-stack-track { height: 16px; background: #F1F5F9; border-radius: 99px; overflow: hidden; display: flex; }
.an-stack-seg { height: 100%; min-width: 0; }
.an-stack-yen { text-align: right; font-variant-numeric: tabular-nums; color: #334155; }
.an-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; color: #64748B; }
.an-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 4px; }
.an-occ { display: flex; flex-direction: column; gap: 10px; }
.an-occ-row { display: grid; grid-template-columns: 3.2em 1fr; gap: 8px; align-items: center; }
.an-occ-bars { display: flex; gap: 4px; height: 72px; align-items: flex-end; }
.an-occ-bar {
  flex: 1;
  background: #DBEAFE;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  position: relative;
}
.an-occ-bar[data-sid="1"] { background: #93C5FD; }
.an-occ-bar[data-sid="2"] { background: #60A5FA; }
.an-occ-bar[data-sid="3"] { background: #2563EB; }
.an-empty { font-size: 13px; color: #64748B; padding: 8px 0; }
.an-partial { font-size: 10px; color: #94A3B8; }

/* 新規会員登録前のスタジオご利用規約（店内掲示の文言・強調に合わせる） */
.usage-rules {
  color: #111;
  font-size: 15px;
  line-height: 1.75;
}
.usage-rules-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}
.usage-rules-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rule;
}
.usage-rules-list > li {
  position: relative;
  margin: 0 0 0.85em;
  padding-left: 2.15rem;
  counter-increment: rule;
}
.usage-rules-list > li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #2563EB;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
  letter-spacing: 0;
}
.usage-rules-list > li.is-callout {
  counter-increment: none;
  color: #e11d1d;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  margin: 12px 0;
}
.usage-rules-list > li.is-callout::before {
  content: none;
}
.usage-rules-note {
  display: block;
  margin-top: 0.25em;
}
.usage-rules-em {
  color: #e11d1d;
  font-weight: 700;
}
.usage-rules-u {
  text-decoration: underline;
}
.usage-rules-em-u {
  color: #e11d1d;
  font-weight: 700;
  text-decoration: underline;
}
.usage-rules-mark,
.usage-rules-line-mark {
  background: #fff200;
}
.usage-rules-line-mark {
  font-weight: 700;
}
.usage-rules-ten {
  font-size: 1.2em;
  font-weight: 800;
}
#rules-next:disabled {
  opacity: 0.4;
}

/* ===== デジタル会員証（マイページ最上部、docs/11 §3） =====
   スマホ画面をスキャナーで読むので、バーコード部分は必ず白地・黒バー・十分な余白。
   カードの装飾より読み取りやすさを優先する。 */
.member-card {
  /* 店のプラスチックカードに合わせた黒地。右下へ向かって、見て分かる程度に明るくする */
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #070708 0%, #15161A 50%, #3A3D47 100%);
  color: #fff;
  border-radius: 16px;
  padding: 18px 18px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/* 左下の角に飾り模様。店のプラスチックカード左下の柄を、写真からなぞって起こしたもの。
   実物と同じく左と下の縁で切れる。文字の下に敷くので薄くする */
.member-card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* 中央の注意書き（11px × 18文字 ≒ 200px）に掛からない幅にする */
  width: clamp(44px, calc((100% - 220px) / 2), 120px);
  aspect-ratio: 600 / 517;
  background: url("../img/card-ornament.png") left bottom / contain no-repeat;
  opacity: 0.65;
  pointer-events: none;
}
/* 右上の柄。プラスチックカード右上の柄を、同じく写真からなぞって起こしたもの。
   上と右の縁で切れる。縦に長いので、下の方はバーコードの白枠の後ろに回り込む */
.member-card::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: clamp(84px, 29%, 140px);
  aspect-ratio: 400 / 503;
  background: url("../img/card-ornament-top.png") right top / contain no-repeat;
  opacity: 0.65;
  pointer-events: none;
}
.member-card > * { position: relative; z-index: 1; }
/* ロゴ＋「TORIGORO」（大）と「MEMBER'S CARD」（小）の2行。氏名はその下の行に右寄せ
   （横に並べると、スマホ幅では氏名が折り返す） */
.member-card-head {
  display: flex;
  align-items: center;
}
.member-card-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.member-card-logo { height: 30px; width: auto; flex: none; }
.member-card-title { display: flex; flex-direction: column; line-height: 1.1; }
.member-card-title-main { font-weight: 700; font-size: 23px; letter-spacing: 0.12em; }
.member-card-kind { margin-top: 4px; font-size: 9px; letter-spacing: 0.24em; color: #C9D6E2; }
.member-card-name { margin-top: 8px; font-size: 18px; font-weight: 600; }
.member-card-name span { font-size: 13px; font-weight: 400; margin-left: 2px; }
.member-card-barcode {
  margin-top: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 6px;
}
.member-card-barcode svg { display: block; width: 100%; height: 88px; }
.member-card-id {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #C9D6E2;
}
.member-card-id span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: #fff;
  margin-left: 6px;
}
.member-card-note { margin: 4px auto 0; text-align: center; font-size: 11px; color: #A9B8C6; text-wrap: balance; }

/* ===== 来店確認（日別ボード・予約詳細、docs/11 §7） ===== */
.admin-btn-checkin { background: #059669; color: #fff; border-color: #059669; font-weight: 600; }
.admin-cell .cell-in-mark {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  padding: 0 4px;
  border-radius: 4px;
  background: #059669;
  color: #fff;
}
/* 手入力・手動OK（ポイントが付かない来店）は白抜きで区別 */
.admin-cell .cell-in-mark.is-manual { background: #fff; color: #047857; border: 1px solid #059669; }

.checkin-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid #A7F3D0;
  background: #ECFDF5;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
}
.checkin-box.is-done { color: #065F46; }
.checkin-method {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  background: #059669;
  color: #fff;
}
.checkin-method.is-manual { background: #FEF3C7; color: #92400E; }
.checkin-link { font-size: 12px; color: #64748B; text-decoration: underline; }

.checkin-row { display: flex; gap: 8px; }
.checkin-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 2px solid #059669;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 20px;
  letter-spacing: 0.08em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.checkin-btn {
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #CBD5E1;
  background: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.checkin-btn.is-ok { border-color: #F59E0B; color: #B45309; background: #FFFBEB; }

.checkin-ok { font-size: 15px; font-weight: 700; color: #065F46; background: #D1FAE5; border-radius: 10px; padding: 10px 12px; }
.checkin-info { font-size: 14px; color: #334155; background: #F1F5F9; border-radius: 10px; padding: 10px 12px; }
.checkin-warn { font-size: 14px; font-weight: 600; color: #92400E; background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.checkin-err { font-size: 14px; color: #B91C1C; background: #FEF2F2; border-radius: 10px; padding: 10px 12px; }

.checkin-cands { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.checkin-cand {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}
.checkin-cand input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.checkin-cand:has(input:checked) { border-color: #059669; background: #ECFDF5; }
.checkin-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  background: #DBEAFE;
  color: #1E40AF;
}
.checkin-tag.is-near { background: #FEF3C7; color: #92400E; }

/* 会員証の QR 表示（スキャナー故障時にカメラで読む用） */
.member-card-qr {
  margin: 12px auto 0;
  width: 220px;
  max-width: 70%;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}
.member-card-qr svg { display: block; width: 100%; height: auto; }
.member-card-qr.hidden, .member-card-barcode.hidden { display: none; }
.member-card-toggle {
  display: block;
  margin: 10px auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(220, 233, 245, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
}

/* ===== 精算画面のポイント欄（docs/11 §5） ===== */
.settle-card.hidden { display: none; }
.settle-points { border-color: #BFDBFE; background: #F8FAFF; }
.pt-owner { font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pt-src { font-size: 11px; padding: 0 6px; border-radius: 999px; background: #DBEAFE; color: #1E40AF; }
.pt-regno { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #64748B; font-size: 12px; }
.pt-balance { margin-left: auto; font-size: 13px; color: #334155; }
.pt-balance strong { font-size: 18px; color: #1D4ED8; }
.pt-grant { font-size: 14px; background: #EFF6FF; border-radius: 10px; padding: 8px 10px; color: #1E3A8A; }
.pt-grant strong { font-size: 17px; }
.pt-grant.is-done { background: #DCFCE7; color: #166534; font-weight: 600; }
.pt-grant.is-none { background: #F1F5F9; color: #475569; }
.pt-hint { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: #B45309; background: #FEF3C7; border-radius: 999px; padding: 0 8px; }
.pt-muted { font-size: 12px; color: #64748B; }
.pt-use { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.pt-use label { display: flex; align-items: center; gap: 8px; }
.pt-select { height: 44px; border: 1px solid #CBD5E1; border-radius: 10px; padding: 0 10px; font-size: 15px; background: #fff; }
.pt-scan { display: flex; gap: 8px; }
.pt-scan-input { flex: 1; min-width: 0; height: 44px; border: 1px solid #CBD5E1; border-radius: 10px; padding: 0 10px; font-size: 15px; }
.pt-late { display: flex; flex-direction: column; gap: 8px; border: 1px dashed #93C5FD; border-radius: 12px; padding: 10px; }
.pt-late label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pt-late-actions { display: flex; gap: 8px; align-items: center; }
.pt-late-submit { height: 48px; flex: 1; }
.pt-late-btn { align-self: flex-start; }
.settle-item.is-point { border-color: #BFDBFE; background: #F8FAFF; }
.settle-point-amount { color: #1D4ED8; font-variant-numeric: tabular-nums; }

/* ===== マイページのポイント（docs/11 §5） ===== */
.member-card-points {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: #C9D6E2;
  font-size: 12px;
}
.member-card-points strong { font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; }
.member-card-points strong small { font-size: 13px; margin-left: 2px; }
.member-card-expire { font-size: 11px; }
.member-card-expire.is-soon { color: #FCA5A5; font-weight: 700; }
.mypage-pt-est { margin-top: 6px; font-size: 12px; color: #1D4ED8; }
.mypage-pt-web { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 600; color: #B45309; background: #FEF3C7; border-radius: 999px; padding: 0 8px; }
.mypage-pt-list { display: flex; flex-direction: column; }
.mypage-pt-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #F1F5F9; }
.mypage-pt-list li:first-child { border-top: 0; }
.mypage-pt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mypage-pt-label { font-size: 14px; font-weight: 600; }
.mypage-pt-slot { font-size: 12px; color: #64748B; }
.mypage-pt-points { font-size: 16px; color: #1D4ED8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mypage-pt-points.is-minus { color: #64748B; }

/* 設定画面: ポイント設定（入力欄の右に単位） */
.pt-set-unit { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #64748B; font-size: 13px; }
.pt-set-unit input { min-width: 0; }
.pt-camp-state { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 0 8px; margin-right: 4px; }
.pt-camp-state.is-running { background: #DCFCE7; color: #166534; }
.pt-camp-state.is-upcoming { background: #DBEAFE; color: #1E40AF; }
.pt-camp-state.is-ended { background: #F1F5F9; color: #64748B; }

/* 会員詳細: ポイント */
.upt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.upt-balance { font-size: 26px; font-weight: 700; color: #1D4ED8; font-variant-numeric: tabular-nums; }
.upt-balance small { font-size: 13px; margin-left: 2px; }
.upt-expire { font-size: 13px; color: #64748B; }
.upt-expire.is-soon { color: #B91C1C; font-weight: 600; }
.upt-adjust { display: flex; flex-direction: column; gap: 8px; border: 1px dashed #CBD5E1; border-radius: 12px; padding: 10px; }
.upt-adjust.hidden { display: none; }
.upt-adjust-row { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.upt-adjust-row select, .upt-adjust-row input, .upt-reason { height: 44px; border: 1px solid #CBD5E1; border-radius: 10px; padding: 0 10px; font-size: 15px; background: #fff; min-width: 0; }
.upt-adjust-row input { flex: 1; }
.upt-list { display: flex; flex-direction: column; }
.upt-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #F1F5F9; font-size: 13px; }
.upt-list li:first-child { border-top: 0; }
.upt-sub { display: block; font-size: 12px; color: #64748B; }
.upt-pts { font-size: 15px; font-weight: 600; color: #1D4ED8; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.upt-pts.is-minus { color: #64748B; }
.upt-pts small { display: block; font-size: 11px; font-weight: 400; color: #94A3B8; }
.upt-method { display: inline-block; font-size: 11px; border-radius: 999px; padding: 0 8px; background: #F1F5F9; color: #475569; }
.upt-method.is-scan { background: #DCFCE7; color: #166534; }

/* マイページ: 実施中のキャンペーン */
.mypage-pt-camp { font-size: 13px; font-weight: 600; color: #92400E; background: #FEF3C7; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }

/* 予約完了・マイページ: ポイントの付与見込みと条件（スマホの会員証のみ） */
.book-done-pt { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px; padding: 10px 12px; }
.book-done-pt-main { font-size: 15px; color: #1E3A8A; }
.book-done-pt-main strong { font-size: 18px; }
.book-done-pt-note { margin-top: 4px; font-size: 12px; color: #B45309; }
.mypage-pt-cond { font-size: 12px; color: #B45309; background: #FEF3C7; border-radius: 10px; padding: 6px 10px; margin-bottom: 12px; }

/* ===== ポイントご利用規約（point_terms.php） ===== */
.point-terms { font-size: 14px; line-height: 1.8; color: #1E293B; }
.point-terms-title { font-size: 20px; font-weight: 700; }
.point-terms-lead { margin-top: 8px; font-size: 13px; color: #475569; }
.point-terms h2 { margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid #E2E8F0; font-size: 15px; font-weight: 700; }
.point-terms ul { margin-top: 8px; padding-left: 1.2em; list-style: disc; }
.point-terms li + li { margin-top: 4px; }
.point-terms strong { font-weight: 700; background: linear-gradient(transparent 62%, #FEF08A 62%); }
.point-terms-table { margin-top: 10px; width: 100%; max-width: 260px; border-collapse: collapse; }
.point-terms-table th, .point-terms-table td { border: 1px solid #E2E8F0; padding: 6px 12px; font-size: 14px; }
.point-terms-table th { text-align: left; font-weight: 500; background: #F8FAFC; }
.point-terms-table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.point-terms-date { margin-top: 20px; text-align: right; font-size: 12px; color: #64748B; }

/* ===== お客向けフッターのリンク（電話・LINE・ポイント規約・ログアウト） =====
   広い画面は中央寄せの1行。スマホ幅では4つが1行に収まらないので、2列×2段にそろえる */
.site-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.site-footer-links a, .site-footer-links button { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.site-footer-links svg { width: 14px; height: 14px; flex: none; }
.site-footer-links form { display: flex; }
@media (max-width: 420px) {
  .site-footer-links { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 12px 32px; }
}

/* ===== SMS 認証コードの「再送」ボタン（sms-resend.js） =====
   1回送ったあとは、すぐ上の確定ボタンと押し間違えやすいので、小さな文字リンクにして離す。
   送った直後の待ち時間中（is-cooling）は押せない */
button.sms-resend {
  display: block;
  width: auto;
  height: auto;
  margin: 26px auto 0 !important;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: #64748B;
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
}
button.sms-resend.is-cooling { color: #94A3B8; text-decoration: none; pointer-events: none; }
/* SMS を送ったあとは、ボット確認（Cloudflare）の枠を隠す（sms-resend.js の arm / revealCheck） */
.sms-turnstile.is-parked { display: none; }

/* ===== マイページ: ホーム画面に追加する案内（home-guide.js） =====
   スマホでは画面の下から出るシート、広い画面では中央のカード */
.home-guide-open {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 10px 0;
  font-size: 14px; font-weight: 600; color: #334155; text-decoration: underline; text-underline-offset: 3px;
}
.home-guide-open.hidden { display: none; }
.home-guide-open svg { width: 16px; height: 16px; flex: none; }
.home-guide { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.home-guide.hidden { display: none; }
.home-guide-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.55); }
.home-guide-sheet {
  position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  animation: home-guide-up 0.28s ease-out;
}
@keyframes home-guide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .home-guide-sheet { animation: none; } }
@media (min-width: 640px) {
  .home-guide { align-items: center; }
  .home-guide-sheet { border-radius: 20px; }
}
.home-guide-head { display: flex; align-items: center; gap: 14px; }
.home-guide-icon { width: 52px; height: 52px; flex: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.home-guide-title { font-size: 17px; font-weight: 700; line-height: 1.4; color: #0F172A; text-wrap: balance; }
.home-guide-lead { margin-top: 4px; font-size: 13px; line-height: 1.6; color: #475569; }
.home-guide-body { margin-top: 16px; }
.home-guide-steps { counter-reset: hg; display: flex; flex-direction: column; gap: 10px; }
.home-guide-steps li {
  counter-increment: hg; position: relative; padding: 10px 12px 10px 44px;
  background: #F1F5F9; border-radius: 12px; font-size: 14px; line-height: 1.6; color: #0F172A;
}
.home-guide-steps li::before {
  content: counter(hg); position: absolute; left: 12px; top: 10px;
  width: 22px; height: 22px; border-radius: 999px; background: #0F172A; color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.home-guide-inline-icon { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: #2563EB; }
.home-guide-steps kbd { display: inline-block; padding: 0 6px; border: 1px solid #CBD5E1; border-radius: 6px; background: #fff; font-size: 12px; font-family: inherit; }
.home-guide-note { margin-top: 10px; font-size: 12px; line-height: 1.6; color: #64748B; }
.home-guide-body > .home-guide-note:first-child { margin-top: 0; margin-bottom: 10px; font-size: 13px; color: #334155; }
.home-guide-primary {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-bottom: 12px;
  border-radius: 12px; background: #0F172A; color: #fff; font-size: 16px; font-weight: 600;
}
.home-guide-later { display: block; width: 100%; height: 46px; margin-top: 14px; border-radius: 12px; border: 1px solid #E2E8F0; color: #475569; font-size: 15px; }

/* スキャナーの実機確認用（日別ボードに ?scandebug=1 を付けたときだけ出る） */
.scan-debug {
  position: fixed; right: 8px; bottom: 8px; z-index: 70; max-width: 92vw; max-height: 46vh; overflow: auto;
  margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(15, 23, 42, 0.92); color: #E2E8F0;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; pointer-events: none;
}
/* 精算画面のポイント欄: 来店確認の取り消し（目立たせない。右寄せの小さなボタン） */
.pt-cancel-btn { display: block; margin: 0 0 0 auto; color: #B91C1C; font-size: 12px; }

/* ===== アプリ内ブラウザで開いたときの案内（inapp-notice.js） ===== */
.inapp-notice { max-width: 32rem; margin: 12px auto 0; padding: 12px 14px; border: 1px solid #FCD34D; border-radius: 12px; background: #FFFBEB; }
.inapp-notice.hidden { display: none; }
@media (max-width: 544px) { .inapp-notice { margin-left: 16px; margin-right: 16px; } }
.inapp-notice-text { font-size: 13px; line-height: 1.6; color: #78350F; }
.inapp-notice-actions { display: flex; gap: 8px; margin-top: 10px; }
.inapp-notice-open, .inapp-notice-copy { flex: 1; display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.inapp-notice-open { background: #0F172A; color: #fff; }
.inapp-notice-copy { border: 1px solid #D6D3D1; background: #fff; color: #44403C; }

/* 来店確認パネル: 目視確認（機器の不具合時だけ出る）と、会員の検索 */
.checkin-visual { border: 1px dashed #60A5FA; border-radius: 12px; padding: 10px; background: #EFF6FF; }
.checkin-visual p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: #1E3A8A; }
.checkin-btn.is-visual { width: 100%; border-color: #2563EB; background: #2563EB; color: #fff; }
.checkin-search { border: 1px solid #E2E8F0; border-radius: 12px; padding: 8px 12px; }
.checkin-search summary { font-size: 13px; color: #334155; cursor: pointer; }
.checkin-search-input { width: 100%; height: 46px; margin-top: 8px; border: 1px solid #CBD5E1; border-radius: 10px; padding: 0 12px; font-size: 16px; }
.checkin-search-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.checkin-search-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; text-align: left; }
.checkin-search-name { font-size: 15px; font-weight: 600; }
.checkin-search-name small, .checkin-search-meta small { display: block; font-size: 11px; font-weight: 400; color: #64748B; }
.checkin-search-meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; text-align: right; white-space: nowrap; }
.checkin-search-more { font-size: 12px; color: #64748B; }
.pt-visual-btn { border-color: #2563EB; color: #1D4ED8; }
.pt-oldcard-btn { white-space: nowrap; }
.pt-search { margin-top: 2px; }
/* ポイント欄は「会員証を読む／受付方法／ポイントを使う」を区切って並べる（2026-10-13、押し間違い対策） */
#point-body { display: flex; flex-direction: column; gap: 12px; }
.pt-sec { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #E2E8F0; padding-top: 14px; }
.pt-sec-title { font-size: 13px; font-weight: 700; color: #334155; }
.pt-sec-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pt-channel-now { font-size: 14px; color: #475569; margin-top: 2px; }
.pt-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 2px; }
.pt-alt-label { font-size: 12px; color: #64748B; margin-right: 2px; }
/* ポイント欄のボタン（2026-10-13、タブレットで「どれがボタンか」一目で分かるように）。
   入力欄・説明の枠と見分けがつくよう、色の付いた面・影・アイコンを付ける */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
  transition: transform .05s, box-shadow .1s, filter .1s;
}
.pt-btn:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); filter: brightness(.95); }
.pt-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-btn small { font-size: 12px; font-weight: 600; opacity: .8; margin-left: 2px; }
.pt-btn-primary { background: #2563EB; color: #fff; min-width: 112px; }
.pt-btn-sub { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }
.pt-btn-sub.is-blue { background: #DBEAFE; color: #1D4ED8; border-color: #93C5FD; }
.pt-btn-sub.is-green { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.pt-scan-input { height: 48px; background: #fff; }
.pt-search { border-style: dashed; background: transparent; }
.pt-search summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 36px; color: #1D4ED8; font-size: 14px; font-weight: 600; list-style: none; }
.pt-search summary::-webkit-details-marker { display: none; }
.pt-search summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pt-search summary small { font-size: 12px; font-weight: 400; color: #64748B; }
.pt-muted b { color: #1D4ED8; }

/* ===== 管理: 使い方（manual.php） =====
   スタッフが業務中に iPad やスマホで引くので、本文は大きめ、1項目を1枚のカードにして、
   検索で関係するカードだけを残す */
.manual { max-width: 46rem; margin: 0 auto; padding: 16px 12px 64px; color: #0F172A; }
.manual-head h1 { font-size: 22px; font-weight: 700; }
.manual-head p { margin-top: 4px; font-size: 13px; line-height: 1.7; color: #475569; }

.manual-search { position: sticky; top: var(--admin-header-h, 48px); z-index: 10; margin: 14px -12px 0; padding: 10px 12px; background: rgba(248, 250, 252, 0.96); backdrop-filter: blur(4px); }
.manual-search input { width: 100%; height: 52px; padding: 0 44px 0 16px; border: 2px solid #2563EB; border-radius: 14px; background: #fff; font-size: 16px; }
.manual-search input:focus { outline: 3px solid rgba(37, 99, 235, 0.25); outline-offset: 0; }
.manual-search button { position: absolute; right: 20px; top: 18px; width: 36px; height: 36px; border-radius: 999px; background: #E2E8F0; color: #334155; font-size: 18px; line-height: 1; }
.manual-search button.hidden { display: none; }
.manual-search-status { min-height: 0; margin-top: 4px; font-size: 12px; color: #1D4ED8; }
.manual-none { margin-top: 20px; padding: 16px; border-radius: 12px; background: #FEF3C7; color: #78350F; font-size: 14px; }
.manual-none.hidden { display: none; }

.manual-flow, .manual-index { margin-top: 14px; }
.manual-flow h2, .manual-index h2 { font-size: 13px; font-weight: 700; color: #475569; letter-spacing: 0.04em; }
.manual-flow ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; counter-reset: flow; }
@media (max-width: 559px) { .manual-flow ol { grid-template-columns: 1fr; } }
.manual-flow li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 12px 46px; border-radius: 14px; background: #0F172A; color: #fff; counter-increment: flow; }
.manual-flow li::before { content: counter(flow); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 999px; background: #fff; color: #0F172A; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.manual-flow li strong { font-size: 14px; }
.manual-flow li span { font-size: 12px; line-height: 1.5; color: #CBD5E1; }
.manual-flow li a { margin-top: 4px; font-size: 12px; color: #93C5FD; text-decoration: underline; }

.manual-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
@media (max-width: 479px) { .manual-index-grid { grid-template-columns: 1fr; } }
.manual-index-grid a { display: flex; align-items: center; min-height: 52px; padding: 8px 34px 8px 14px; border: 1px solid #CBD5E1; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; position: relative; }
.manual-index-grid a::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #2563EB; }
.manual-index-grid a:active { background: #EFF6FF; }

.manual-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.manual-toc a { padding: 6px 12px; border-radius: 999px; background: #E2E8F0; font-size: 12px; color: #1E293B; }

.manual-sec { margin-top: 28px; scroll-margin-top: calc(var(--admin-header-h, 48px) + 84px); }
.manual-sec.hidden { display: none; }
.manual-sec > h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.manual-sec > h2 span { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #2563EB; color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; }

.manual-block { margin-top: 10px; padding: 16px; border: 1px solid #E2E8F0; border-radius: 14px; background: #fff; scroll-margin-top: calc(var(--admin-header-h, 48px) + 84px); }
.manual-block.hidden { display: none; }
.manual-block.is-flash { animation: manual-flash 1.6s ease-out; }
@keyframes manual-flash { 0% { box-shadow: 0 0 0 3px #2563EB; } 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0); } }
@media (prefers-reduced-motion: reduce) { .manual-block.is-flash { animation: none; } }
.manual-block h3 { font-size: 16px; font-weight: 700; }
.manual-block p { margin-top: 8px; font-size: 14px; line-height: 1.8; color: #1E293B; }
.manual-block b { font-weight: 700; }
.manual-block a { color: #1D4ED8; text-decoration: underline; }
.manual-block small { font-size: 12px; color: #64748B; }

.manual-steps { counter-reset: step; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.manual-steps > li { position: relative; padding-left: 36px; font-size: 14px; line-height: 1.8; counter-increment: step; }
.manual-steps > li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 999px; background: #DBEAFE; color: #1E40AF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.manual-steps ul, .manual-list { margin-top: 6px; padding-left: 1.2em; list-style: disc; font-size: 14px; line-height: 1.8; }
.manual-list { margin-top: 8px; }
.manual-list li + li, .manual-steps ul li + li { margin-top: 2px; }

.manual-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #F1F5F9; font-size: 13px; line-height: 1.7; color: #334155; }
.manual-note.is-warn { background: #FEF2F2; color: #7F1D1D; border-left: 4px solid #DC2626; }
.manual-note.is-talk { background: #ECFDF5; color: #064E3B; border-left: 4px solid #059669; }
.manual-note.is-campaign { background: #FFFBEB; color: #78350F; border-left: 4px solid #F59E0B; }

.manual-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; line-height: 1.6; }
.manual-table th, .manual-table td { padding: 8px 10px; border: 1px solid #E2E8F0; text-align: left; vertical-align: top; }
.manual-table th { background: #F8FAFC; font-size: 12px; font-weight: 600; color: #475569; white-space: nowrap; }
.manual-table td.is-yes { color: #047857; font-weight: 700; white-space: nowrap; }
.manual-table td.is-no { color: #B91C1C; font-weight: 700; white-space: nowrap; }
.manual-chip { display: inline-block; min-width: 26px; padding: 0 6px; border-radius: 6px; font-size: 12px; text-align: center; color: #1E293B; }
.manual-mark { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.6; color: #fff; }
.manual-mark.is-red { background: #DC2626; }
.manual-mark.is-blue { background: #2563EB; }
.manual-mark.is-green { background: #059669; }
.manual-mark.is-outline { background: #fff; color: #047857; border: 1px solid #059669; }
.manual-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.manual-pill.is-on { background: #DCFCE7; color: #166534; }
.manual-pill.is-off { background: #F1F5F9; color: #64748B; }
mark.manual-hit { background: #FDE047; color: inherit; border-radius: 3px; padding: 0 1px; }
.manual-foot { margin-top: 28px; font-size: 12px; color: #64748B; text-align: center; }

/* マイページ: Web キャンセルの月の上限の案内 */
.mypage-cancel-limit { font-size: 12px; color: #64748B; margin-bottom: 12px; }
.mypage-cancel-limit.is-reached { font-weight: 600; color: #991B1B; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 8px 10px; }

/* 設定画面: アイコン付きの太字の見出し */
.settings-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #0F172A; line-height: 1.4; }
.settings-h svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: #DBEAFE; color: #1D4ED8; box-sizing: content-box; }
.settings-h.is-sub { font-size: 15px; }
/* 設定画面: 項目名（小見出し）をやや太字に。入力欄の中の文字と、右の単位は太くしない */
#admin-settings label.block { font-weight: 600; color: #1E293B; }
#admin-settings label.block input,
#admin-settings label.block select,
#admin-settings label.block textarea,
#admin-settings label.block .pt-set-unit { font-weight: 400; }
/* 使い方: 「まずはこの3つ」の下に置く、1日の終わり（レジ締め）への案内 */
.manual-flow-end { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px; padding: 10px 14px; border: 1px solid #CBD5E1; border-radius: 14px; background: #fff; }
.manual-flow-end strong { font-size: 14px; }
.manual-flow-end span { font-size: 12px; color: #475569; }
.manual-flow-end em { margin-left: auto; font-style: normal; font-size: 12px; color: #1D4ED8; white-space: nowrap; }

/* マイページ: ご予約一覧の「今後」「過去」の小見出しと［もっと見る］ */
.mypage-list-h { margin: 4px 0 10px; font-size: 13px; font-weight: 700; color: #1E293B; }
.mypage-list-h.is-past { margin-top: 22px; color: #64748B; }
.mypage-more-btn { display: block; width: 100%; height: 44px; margin-top: 12px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; font-size: 14px; color: #334155; }
/* マイページ: 過去のご予約に、その回に付いたポイント */
.mypage-pt-earned { display: inline-block; margin-top: 6px; padding: 1px 10px; border-radius: 999px; background: #DBEAFE; color: #1D4ED8; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* マイページ: 過去のご予約で、ポイントが付かなかった回 */
.mypage-pt-none { margin-top: 6px; color: #64748B; font-size: 12px; font-weight: 600; line-height: 1.5; }
.mypage-pt-could { margin-top: 4px; font-size: 12px; font-weight: 600; color: #B45309; }

/* 設定画面: 保存していない欄と、画面下の［保存する］の帯（2026-10-10） */
.settings-dirty {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px #fde68a;
  background-color: #fffbeb;
}

.settings-savebar {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 24px);
  max-width: 720px;
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: #1e293b;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
}

.settings-savebar.hidden { display: none; }

.settings-savebar.is-saved { background: #15803d; }

.settings-savebar > span { flex: 1; }

.settings-savebar-btn {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: #fbbf24;
  color: #1e293b;
  font-weight: 700;
}

.settings-savebar-btn.hidden { display: none; }

.settings-savebar-btn:disabled { opacity: .6; }

/*
 * お客さん向けページの配色（2026-10-10 店舗依頼）。白が強く文字や枠が見にくかったため、
 * 背景を薄いグレーにしてカードを白く浮かせ、文字・枠線を一段濃くする。
 * templates/layout.php の body.site-customer の中だけに効く（管理画面は別）。
 */
body.site-customer {
  background-color: #E9EDF2;
  color: #0B1220;
}

body.site-customer > header {
  border-bottom-color: #CBD5E1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.site-customer .border-line {
  border-color: #C3CCD8;
}

.site-customer main .bg-white:not(button) {
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.site-customer main input.bg-white,
.site-customer main select.bg-white,
.site-customer main textarea.bg-white,
.site-customer main button.bg-white {
  box-shadow: none;
}

.site-customer input,
.site-customer select,
.site-customer textarea {
  border-color: #B8C2CF;
}

.site-customer .text-slate-400 { color: #64748B; }
.site-customer .text-slate-500 { color: #475569; }
.site-customer .text-slate-600 { color: #334155; }
.site-customer .text-muted { color: #64748B; }

/* 見出し・ラベル・本文を少し太く */
.site-customer main h1,
.site-customer main h2,
.site-customer main h3 {
  font-weight: 700;
}

.site-customer main label,
.site-customer main .font-medium {
  font-weight: 600;
}

/* 予約できないコマ（灰色）も、文字と枠を読める濃さに */
.site-customer main .bg-slate-100 {
  background-color: #E2E8F0;
}

.site-customer main .bg-slate-50 {
  background-color: #F1F5F9;
}

.site-customer .site-footer-links a,
.site-customer .site-footer-links button {
  color: #334155;
}

.site-customer .studio-sticky {
  background: #E9EDF2;
}

/* 空きのコマの緑の枠と、過ぎた日付を少し濃く */
.site-customer .border-available\/40 {
  border-color: rgba(16, 185, 129, .75);
}

.site-customer .text-slate-300 { color: #A3AEBD; }

/* 予約トップの時間のコマ: 選んでいるコマ／カートに入れたコマ（app.js renderSlots） */
.slot-btn.is-selected {
  background: #2563EB;
  border-color: #1D4ED8;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.slot-btn.is-committed {
  background: #ECFDF5;
  border: 2px solid #10B981;
  color: #065F46;
}
.slot-btn .slot-check {
  font-size: 14px;
  font-weight: 700;
}

/* 精算画面の［予約者を変更］（admin-settlement.js openBookerModal） */
.settle-mini.hidden { display: none; }
#btn-change-booker { height: 30px; flex-shrink: 0; color: #1D4ED8; border-color: #BFDBFE; }
.booker-modal { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.booker-modal-box { width: 100%; max-width: 440px; max-height: calc(100vh - 96px); overflow-y: auto; background: #fff; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.booker-modal-box h2 { font-size: 17px; font-weight: 700; }
.booker-modal-cur, .booker-modal-guide { font-size: 13px; color: #475569; }
.booker-guest { color: #DC2626; font-weight: 700; }
.booker-q { height: 46px; border: 1px solid #CBD5E1; border-radius: 12px; padding: 0 12px; font-size: 15px; }
.booker-results { display: flex; flex-direction: column; gap: 6px; }
.booker-pick { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; font-size: 14px; text-align: left; }
.booker-pick:hover { background: #EFF6FF; border-color: #93C5FD; }
.booker-regno { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #64748B; }
.booker-none { font-size: 13px; color: #94A3B8; }
.booker-revert { height: 44px; border: 1px solid #CBD5E1; border-radius: 12px; background: #F8FAFC; font-size: 14px; color: #334155; }
.booker-err { font-size: 13px; color: #DC2626; min-height: 1em; }
.booker-close { height: 44px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; font-size: 14px; }

/* 予約トップのスタジオタブ: 部屋ごとの色（2026-10-13 店舗依頼）。Ast=紺・Bst=オレンジ・Cst=紫。
   空き=緑・選んだコマ=青・日曜祝日=赤と重ならない色にしてある。Ast の紺は選んだコマの青より暗くして区別 */
.studio-tab { --studio-color: #1E3A8A; background: #fff; border-color: #C3CCD8; color: #0F172A; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.studio-tab[data-studio-code="B" i] { --studio-color: #EA580C; }
.studio-tab[data-studio-code="C" i] { --studio-color: #7C3AED; }
.studio-tab::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--studio-color); flex-shrink: 0; }
.studio-tab.is-active { background: var(--studio-color); border-color: var(--studio-color); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(15, 23, 42, .18); }
.studio-tab.is-active::before { background: #fff; }
.studio-avail-summary[data-studio] { padding-left: 10px; border-left: 4px solid #1E3A8A; }
.studio-avail-summary[data-studio="B"] { border-left-color: #EA580C; }
.studio-avail-summary[data-studio="C"] { border-left-color: #7C3AED; }

/* 予約トップの「ようこそ」案内（2026-10-13、11/1 から表示。welcome.js） */
.welcome { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.welcome.hidden { display: none; }
body.welcome-open { overflow: hidden; }
.welcome-box { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 20px; padding: 22px 18px 18px; box-shadow: 0 12px 40px rgba(15, 23, 42, .3); }
.welcome-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: #F1F5F9; color: #475569; font-size: 20px; line-height: 1; }
.welcome-title { font-size: 18px; font-weight: 800; text-align: center; margin: 4px 28px 4px; line-height: 1.35; }
.welcome-title-brand { display: block; font-size: 24px; letter-spacing: .08em; }
.welcome-note strong { color: #0F172A; }
.welcome-lead { font-size: 13px; color: #475569; text-align: center; margin-bottom: 14px; line-height: 1.6; }
.welcome-choice { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 58px; padding: 10px 12px 10px 14px; border-radius: 14px; border: 2px solid var(--wc); background: #fff; text-align: left; margin-top: 12px; text-decoration: none; }
.welcome-choice.is-member { --wc: #2563EB; }
.welcome-choice.is-new { --wc: #10B981; }
.welcome-choice.is-guest { --wc: #94A3B8; }
.welcome-choice-head { font-size: 14px; font-weight: 700; color: #0F172A; line-height: 1.4; }
.welcome-choice-head small { display: block; font-size: 11px; font-weight: 600; color: #64748B; }
.welcome-choice-btn { flex-shrink: 0; padding: 8px 10px; border-radius: 10px; background: var(--wc); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.welcome-choice.is-guest .welcome-choice-btn { background: #fff; color: #1E293B; border: 2px solid #475569; padding: 6px 10px; }
.welcome-note { font-size: 12px; color: #475569; margin: 6px 2px 0; line-height: 1.55; }
.welcome-note a { color: #2563EB; font-weight: 700; text-decoration: underline; }
.welcome-point { margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: #FEF3C7; color: #78350F; font-size: 13px; font-weight: 700; line-height: 1.5; }
.welcome-reopen { margin-top: 8px; font-size: 13px; font-weight: 700; color: #2563EB; text-decoration: underline; text-underline-offset: 2px; }
.welcome-close { display: block; width: 100%; height: 48px; margin-top: 14px; border-radius: 12px; border: 1px solid #CBD5E1; background: #fff; color: #334155; font-size: 15px; font-weight: 700; }

/* マイページの予約一覧: ネットでのキャンセル期限と、期限を過ぎた予約の連絡先（2026-10-13） */
.mypage-cancel-until { font-size: 11px; color: #64748B; white-space: nowrap; }
.mypage-contact { margin-top: 6px; font-size: 12px; font-weight: 600; color: #9A3412; line-height: 1.5; }
.mypage-contact a { color: #2563EB; text-decoration: underline; text-underline-offset: 2px; }
.mypage-cancel-rule { margin: 0 0 10px; font-size: 12px; color: #475569; line-height: 1.5; }

/* キャンセル料一覧の［支払い期日を延長］（admin-sales.js） */
.sales-extend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 10px; background: #F8FAFC; border: 1px solid #E2E8F0; font-size: 13px; }
.sales-extend.hidden { display: none; }
.sales-extend input { height: 36px; border: 1px solid #CBD5E1; border-radius: 8px; padding: 0 8px; font-size: 13px; }
.sales-extend .sales-extend-note { flex: 1; min-width: 180px; }
.sales-extend-actions { display: inline-flex; gap: 6px; }


/* ---- 精算画面の見やすさ（2026-10-13、タブレットで操作しやすく） ---- */
/* 明細の下の操作（割り勘／一括・時間・削除）は小さすぎて押しにくかったので、ボタンらしい大きさに */
.settle-item-sub { gap: 8px; margin-top: 4px; }
.settle-seg-sm button { height: 40px; font-size: 13px; padding: 0 14px; }
.settle-item-sub .settle-mini,
.settle-item-sub .settle-person-select { height: 40px; font-size: 13px; padding: 0 12px; }
.settle-item-sub .settle-mini { background: #F8FAFC; border-color: #CBD5E1; color: #334155; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.settle-qty-edit { margin-left: 6px; font-size: 11px; font-weight: 600; color: #2563EB; }
.settle-item-sub .settle-remove-btn { margin-left: auto; background: #fff; border-color: #FECACA; color: #DC2626; }
/* 上部の［予約者を変更］［ビジター料金にする］も、ボタンだと分かる面と影を付ける */
.settle-head-btn { height: 38px; padding: 0 14px; font-size: 13px; font-weight: 700; border-color: #93C5FD; background: #EFF6FF; color: #1D4ED8; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
/* 支払：未払は「押すと支払済になる」ことが分かるように2行にして、塗りの琥珀色にする */
.settle-paid-btn { min-width: 104px; height: 52px; background: #FEF3C7; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; font-size: 15px; font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.settle-paid-btn small { font-size: 10px; font-weight: 600; opacity: .85; }
.settle-paid-btn.is-on { font-size: 15px; }
.settle-pay { padding: 8px 10px; }
.settle-pay-no { width: 36px; height: 36px; font-size: 15px; }
.settle-breakdown > div.is-due strong { color: #B45309; }
.settle-breakdown > div.is-due span { color: #B45309; font-weight: 600; }
.settle-hint { font-size: 13px; color: #B45309; text-align: center; margin: 0; }
.settle-hint.hidden { display: none; }
.settle-add-label { font-size: 13px; font-weight: 700; color: #334155; }

/* 精算の支払いの枠の下に出す、その人の物販・レンタル（admin-settlement.js renderPayments） */
.settle-pay-items { flex-basis: 100%; margin: 2px 0 0 44px; padding: 6px 10px; border-radius: 8px; background: #F8FAFC; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #334155; }
.settle-pay.is-paid .settle-pay-items { background: rgba(255, 255, 255, .6); }
.settle-pay-items li::before { content: "・"; color: #94A3B8; }
.settle-pay-item-yen { color: #64748B; margin-left: 4px; }
.settle-pay-shared { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #E0E7FF; color: #3730A3; font-size: 11px; font-weight: 700; }

/* 精算の支払い: 現金のお預かりとお釣り（admin-settlement.js。保存しない画面上の計算） */
.settle-tender { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; font-weight: 600; }
.settle-tender input { width: 96px; height: 44px; border: 1px solid #CBD5E1; border-radius: 10px; padding: 0 10px; text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; }
.settle-change-out { min-width: 0; }
.settle-change { font-size: 13px; color: #166534; font-weight: 600; white-space: nowrap; }
.settle-change strong { font-size: 18px; }
.settle-change.is-short { color: #B91C1C; }
.settle-tender-row { flex-basis: 100%; display: flex; align-items: center; gap: 12px; margin-left: 44px; }

/* マイページ: いまキャンセルしたときのキャンセル料（ネットで取り消せない予約） */
.mypage-cancel-fee { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #F0FDF4; color: #166534; font-size: 12px; line-height: 1.55; }
.mypage-cancel-fee.is-charged { background: #FEF2F2; color: #991B1B; }
.mypage-cancel-fee strong { font-size: 14px; }

/* 予約の最終確認: 予約直後からキャンセル料の対象になる日程のときの注意（book.js loadCancelWarn） */
.confirm-cancel-warn { padding: 8px 10px; border-radius: 12px; border: 2px solid #FCA5A5; background: #FEF2F2; color: #7F1D1D; font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.confirm-cancel-warn.hidden { display: none; }
.confirm-cancel-warn b { color: #B91C1C; font-size: 13px; }

/* 予約の最終確認の内容（book.js renderConfirmSummary）。大きく・内容は太字・区切り線つき */
.confirm-summary { display: flex; flex-direction: column; }
.confirm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; border-bottom: 1px solid #EEF2F6; }
.confirm-row:last-child { border-bottom: 0; }
.confirm-row dt { flex-shrink: 0; font-size: 13px; color: #475569; }
.confirm-row dd { text-align: right; font-size: 15px; font-weight: 700; color: #0F172A; }
.confirm-row.is-key dd { font-size: 16px; }
.studio-avail-name { color: #1E3A8A; }
.studio-avail-summary[data-studio="B"] .studio-avail-name { color: #EA580C; }
.studio-avail-summary[data-studio="C"] .studio-avail-name { color: #7C3AED; }

/* 精算・一覧表: CSV ダウンロードのボタン（2026-10-16） */
.sales-table-tools { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.sales-table-tools.hidden { display: none; }

/* 予約内容変更: 会員名のよみがな（2026-10-19） */
.member-kana { margin-left: 0.4em; font-size: 0.8em; color: #64748b; white-space: nowrap; }

/* ---- 日別ボードの一時メモ（2026-10-23。新システムに移ったら消す） ---- */
.board-memo { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.board-memo-head { display: flex; align-items: center; gap: 8px; }
.board-memo-title { font-size: 15px; font-weight: 700; color: #1e293b; display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; text-align: left; }
.board-memo-title small { font-size: 11px; font-weight: 400; color: #64748b; }
.board-memo-caret { display: inline-block; transition: transform .15s; }
.board-memo.is-closed .board-memo-caret { transform: rotate(-90deg); }
.board-memo-status { margin-left: auto; font-size: 12px; color: #15803d; }
.board-memo-status.is-err { color: #dc2626; }
.board-memo-body { margin-top: 8px; }
.board-memo-body.hidden { display: none; }
.board-memo-scroll { overflow: auto; max-height: 460px; border: 1px solid #e2e8f0; border-radius: 10px; }
.board-memo-table { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 13px; }
.board-memo-table th { position: sticky; top: 0; z-index: 1; background: #f1f5f9; color: #475569; font-weight: 600; font-size: 12px; padding: 6px 4px; text-align: left; white-space: nowrap; }
.board-memo-table td { padding: 4px; border-top: 1px solid #eef2f7; vertical-align: middle; }
.board-memo-table select, .board-memo-table input { height: 36px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 6px; font-size: 14px; background: #fff; }
.board-memo-table td.bm-no { color: #94a3b8; text-align: right; width: 24px; }
.board-memo-table td.bm-time { white-space: nowrap; }
.board-memo-table td.bm-time span { margin: 0 2px; color: #64748b; }
.board-memo-table .bm-num { width: 56px; }
.board-memo-table .bm-name { width: 130px; }
.board-memo-table .bm-phone { width: 130px; }
.board-memo-table .bm-memo { width: 100%; min-width: 200px; }
.board-memo-table .bm-clear { height: 32px; padding: 0 10px; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626; background: #fff; font-size: 12px; white-space: nowrap; }
.board-memo-add { margin-top: 8px; height: 40px; width: 100%; border: 1px dashed #93c5fd; border-radius: 10px; color: #1d4ed8; background: #eff6ff; font-size: 14px; font-weight: 600; }

/* 通知ログ: お客さん／スタッフの切り替えと種類の絞り込み（2026-10-24） */
.notify-filter { display: flex; flex-direction: column; gap: 8px; }
.notify-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.notify-seg button { height: 44px; font-size: 14px; font-weight: 600; color: #475569; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.notify-seg button + button { border-left: 1px solid #e2e8f0; }
.notify-seg button.is-active { background: #2563eb; color: #fff; }
.notify-seg-count:not(:empty) { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; line-height: 20px; }
.notify-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.notify-chips button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; font-size: 13px; color: #475569; }
.notify-chips button.is-active { border-color: #1e293b; background: #1e293b; color: #fff; }
.notify-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.notify-badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.notify-badge.is-customer { background: #dcfce7; color: #166534; }
.notify-badge.is-staff { background: #e2e8f0; color: #334155; }
.notify-badge.is-system { background: #dbeafe; color: #1e40af; }
.notify-badge.is-kind { background: transparent; padding-left: 2px; }

/* 予約トップ: 全スタジオの空き状況（横表示）（2026-10-24） */
.overview-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 8px 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.overview-head { padding: 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.overview-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.overview-legend { font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 4px; }
.overview-legend .ov-key { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-left: 4px; }
.overview-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.overview-table { width: 100%; border-collapse: separate; border-spacing: 2px 3px; table-layout: fixed; }
.overview-table thead th { font-size: 10px; letter-spacing: -0.02em; font-weight: 600; color: #475569; text-align: center; padding: 2px 0; font-variant-numeric: tabular-nums; }
.overview-table th.ov-room { width: 30px; font-size: 11px; font-weight: 800; text-align: left; padding-left: 2px; }
.overview-table tbody th.ov-room[data-studio="A"] { color: #1E3A8A; }
.overview-table tbody th.ov-room[data-studio="B"] { color: #EA580C; }
.overview-table tbody th.ov-room[data-studio="C"] { color: #7C3AED; }
.overview-table td { padding: 0; }
.ov-cell { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; border-radius: 5px; font-size: 11px; padding: 0; font-weight: 700; border: 1px solid transparent; }
.ov-cell.is-open, .ov-key.is-open { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
button.ov-cell.is-open { cursor: pointer; }
button.ov-cell.is-open:active { background: #d1fae5; }
.ov-cell.is-full, .ov-key.is-full { background: #f1f5f9; color: #94a3b8; }
.ov-cell.is-off, .ov-key.is-off { background: #f8fafc; color: #cbd5e1; }
.ov-cell.is-selected { background: #2563eb; border-color: #2563eb; color: #fff; }
.ov-cell.is-committed { background: #16a34a; border-color: #16a34a; color: #fff; }
.overview-note { font-size: 11px; color: #64748b; margin-top: 6px; padding: 0 4px; }

/* 予約トップ: カレンダーを左右スワイプで月送りしたときの小さな動き（2026-10-25） */
@keyframes cal-in-next { from { opacity: .3; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes cal-in-prev { from { opacity: .3; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
#cal-grid.cal-swipe-next { animation: cal-in-next .2s ease-out; }
#cal-grid.cal-swipe-prev { animation: cal-in-prev .2s ease-out; }
@media (prefers-reduced-motion: reduce) { #cal-grid.cal-swipe-next, #cal-grid.cal-swipe-prev { animation: none; } }