/* .card / .login-card 等は common.css で定義 */

/* ─── 会員エリア：白ベース背景（common.css のベージュを上書き） ── */
body {
  background: #ffffff;
  font-family: "LINE Seed JP", sans-serif;
}
.page-content {
  background: #ffffff;
}

/* ─── Auth shared ────────────────────────────────────────────── */
.auth-card     { margin-top: 60px; }
.register-card { max-width: 520px; margin-top: 32px; margin-bottom: 32px; }
.summary-check { color: #2A52A0; }
.summary-arrow { color: #9E9A94; }
.agree-privacy-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.agree-privacy-label input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }

/* ─── ユーザー種別ドリルダウン ───────────────────────────────── */
.pill-group { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pill {
  padding: 6px 14px;
  border: 1.5px solid #D0CAC0;
  border-radius: 20px;
  font-size: 12px;
  color: #6B6760;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.pill.selected { border-color: #2A52A0; color: #2A52A0; background: #EFF4FC; font-weight: 600; }
.pill:hover:not(.selected) { border-color: #9E9A94; }
.drill-label { font-size: 11px; color: #9E9A94; margin-bottom: 6px; }
.selected-summary {
  margin-top: 8px;
  padding: 6px 12px;
  background: #F5F3EF;
  border-radius: 6px;
  font-size: 12px;
  color: #4A4640;
  display: none;
}
.selected-summary.show { display: flex; align-items: center; gap: 6px; }

/* ─── 施設・グループ選択（U-04/U-05） ───────────────────────── */
.step-bar { display: flex; font-size: 11px; margin-bottom: 20px; }
.step-bar span { padding: 5px 14px; background: #D0CAC0; color: #6B6760; }
.step-bar span.active { background: #2A52A0; color: #fff; }
.step-bar span:first-child { border-radius: 4px 0 0 4px; }
.step-bar span:last-child  { border-radius: 0 4px 4px 0; }

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.group-card {
  border: 1px solid #D0CAC0;
  border-radius: 10px;
  padding: 14px;
  background: #FAFAF8;
  cursor: pointer;
  transition: box-shadow .15s;
}
.group-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.group-card .count      { font-size: 11px; color: #9E9A94; margin-top: 2px; }
.group-card .slot-count { font-size: 12px; color: #6B6760; margin-top: 2px; }
.group-card .arrow      { font-size: 12px; color: #2A52A0; margin-top: 6px; }

/* ─── グループカード共通（予約フロー・公開ページ共用） ──────── */
.section-label   { font-size: 12px; font-weight: 600; color: #6B6760; margin-bottom: 10px; }
.group-card-link { text-decoration: none; color: inherit; }
.group-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.group-card-name   { font-size: 13px; font-weight: 500; }
.section-divider   { border: none; border-top: 1px solid #EAE6E0; margin: 24px 0; }
.section-title     { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

/* ─── 公開閲覧（U-00） ───────────────────────────────────────── */

/* ヒーロー */
.pub-hero {
  background: linear-gradient(135deg, #1F4E79 0%, #2A52A0 100%);
  border-radius: 12px; padding: 28px 24px; margin-bottom: 24px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.pub-hero-text { flex: 1 1 320px; }
.pub-hero-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.pub-hero-sub   { font-size: 12px; opacity: 0.85; margin-bottom: 16px; line-height: 1.7; }
.pub-hero-btns  { display: flex; gap: 10px; flex-wrap: wrap; }
.pub-hero-btns .btn-primary  { background: #fff; color: #2A52A0; border: none; }
.pub-hero-btns .btn-primary:hover { background: #EBF3FB; }
.pub-hero-btns .btn-secondary {
  border: 1.5px solid rgba(255,255,255,0.55); color: #fff;
  background: transparent; padding: 7px 16px;
}
.pub-hero-btns .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* 料金表CTA（No.53）：スマホ=フル幅／PC=中央寄せの大きめボタン */
.pub-pricing-cta { margin: 14px 0 22px; text-align: center; }
.pricing-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: #0F9D8F;
  color: #fff;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(15,157,143,.30);
  transition: background .15s, transform .05s;
}
.pricing-cta-btn:hover  { background: #0C8377; }
.pricing-cta-btn:active { transform: translateY(1px); }
.pricing-cta-arrow { font-size: 18px; line-height: 1; }
@media (max-width: 600px) {
  .pricing-cta-btn {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 18px;
  }
}

.public-notice-general {
  color: #FFD966;
  font-size: 14px;
  font-weight: 700;
  padding-left: 1em;
  text-indent: -1em;
}
.pub-hero-qr { flex: 0 0 auto; text-align: center; }
.pub-hero-qr img { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.pub-hero-qr-cap { margin-top: 6px; font-size: 14px; font-weight: 600; color: #fff; }

/* 施設タブ */
.pub-facility-tabs { display: flex; border-bottom: 2px solid #E8E5E1; margin-bottom: 16px; }
.pub-facility-tab {
  padding: 9px 20px; font-weight: 600; font-size: 13px;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  text-decoration: none; color: #9E9A94; white-space: nowrap;
}
.pub-facility-tab-active { border-color: #2A52A0; color: #2A52A0; }

/* 日付チップ（横スクロール対応） */
.pub-date-chips {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  margin-bottom: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pub-date-chips::-webkit-scrollbar { display: none; }
.pub-date-chip {
  flex-shrink: 0; padding: 7px 14px; border: 1.5px solid #D0CAC0; border-radius: 20px;
  font-size: 12px; font-weight: 600; color: #4A4640; text-decoration: none; white-space: nowrap;
}
.pub-date-chip:hover { border-color: #2A52A0; color: #2A52A0; }
.pub-date-chip-active { background: #2A52A0; border-color: #2A52A0; color: #fff; }

/* 公開カレンダーラッパー */
.pub-calendar-wrap {
  background: #ffffff;
  border: 0.5px solid #D0CAC0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 24px;
}

/* 予約フローカレンダーラッパー */
.cal-wrapper {
  background: #ffffff;
  border: 0.5px solid #D0CAC0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

/* グループカード：2カラムグリッド（PC）/ 1カラム（SP） */
.group-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
@media (max-width: 767px) {
  .group-card-grid { grid-template-columns: 1fr; }
}

.pub-group-card {
  border: 1px solid #D0CAC0; border-radius: 10px; overflow: hidden; background: #FAFAF8;
  height: 100%; display: flex; flex-direction: column;
}
.pub-group-open > .pub-group-header { border-bottom: 1px solid #E8E5E1; }

.pub-group-header { padding: 14px 16px; user-select: none; }
.pub-group-clickable { cursor: pointer; }
.pub-group-clickable:hover { background: #F5F3EF; }
.pub-group-full { opacity: 0.65; cursor: not-allowed; }

/* 案B：3段レイアウト */
.pub-group-top       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pub-group-name-wrap { display: flex; align-items: center; gap: 8px; }
.pub-group-name      { font-size: 13px; font-weight: 500; color: #1A1916; }
.pub-group-meta { font-size: 11px; color: #9E9A94; margin-bottom: 8px; }

/* 空き率バー（フルWidth） */
.pub-avail-bar-row   { display: flex; align-items: center; gap: 8px; }
.pub-avail-bar-track { flex: 1; height: 8px; background: #F5F3EF; border-radius: 4px; overflow: hidden; }
.pub-avail-bar-fill  { height: 100%; background: #E6F1FB; border-radius: 4px; }
.pub-avail-text      { font-size: 11px; color: #6B6760; white-space: nowrap; flex-shrink: 0; }
.pub-avail-text-full { color: #B4B2A9; }

.pub-status-chip {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
}
.pub-status-avail { background: #E6F1FB; color: #0C447C; }
.pub-status-few   { background: #FAEEDA; color: #633806; }
.pub-status-full  { background: #F5F3EF; color: #9E9A94; }

.pub-group-toggle {
  color: #9E9A94; font-size: 11px; flex-shrink: 0; display: inline-block; transition: transform .2s;
}
.pub-group-open .pub-group-toggle { transform: rotate(180deg); }

/* 展開エリア（機械一覧・スロット） */
.pub-group-body { padding: 0 16px 14px; background: #fff; display: none; }
.pub-machine-row { padding: 10px 0; border-bottom: 1px solid #F0EDE8; }
.pub-machine-row:last-of-type { border-bottom: none; }
.pub-machine-label { font-size: 12px; font-weight: 600; color: #4A4640; margin-bottom: 7px; }
.pub-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.pub-slot {
  font-size: 10px; font-weight: 600; padding: 3px 7px;
  border-radius: 4px; white-space: nowrap; border: 1px solid transparent;
}
.pub-slot-avail   { background: #EAF3DE; color: #3B6D11; border-color: #B0D890; }
.pub-slot-taken   { background: #F0EDE8; color: #C0BBB4; border-color: #E0DDD7; opacity: 0.7; text-decoration: line-through; }
.pub-slot-past    { background: #F5F3EF; color: #C8C4BE; border-color: #E8E5E1; }
.pub-slot-outside { background: #F5F3EF; color: #C0BBB4; border-color: #E8E5E1; font-size: 9px; }
.pub-slot-closed  { background: #F0EDE8; color: #A09890; border-color: #DDD9D3; }

.pub-login-hint {
  margin-top: 12px; padding: 9px 12px;
  background: #EBF3FB; border-radius: 6px;
  font-size: 11px; color: #1F4E79; text-align: center;
}
.pub-login-hint a { color: #2A52A0; font-weight: 600; }

/* CTAバナー */
.pub-cta-banner {
  background: linear-gradient(135deg, #EBF3FB, #D8EBF7);
  border: 1px solid #A8BBD8; border-radius: 12px;
  padding: 24px; text-align: center; margin-top: 4px;
}
.pub-cta-title { font-size: 16px; font-weight: 700; color: #1F4E79; margin-bottom: 6px; }
.pub-cta-desc  { font-size: 12px; color: #4A4640; margin-bottom: 16px; }

/* ─── スマホナビ：ハンバーガーボタン ────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── スマホナビ：オーバーレイ ──────────────────────────────── */
.nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 60, .5);
  z-index: 1100;
  backdrop-filter: blur(2px);
}
.nav-drawer-overlay.is-open { display: block; }

/* ─── スマホナビ：ドロワー ───────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 270px;
  background: #fff;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
}
.nav-drawer.is-open { transform: translateX(0); }

/* ログイン時のユーザーヘッダー */
.nav-drawer-user {
  background: linear-gradient(135deg, #1F3E7A 0%, #2A52A0 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 28px 20px 18px;
  line-height: 1.4;
  letter-spacing: .01em;
}
.nav-drawer-user::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.85)'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 10px;
}

/* 未ログイン時のメニューヘッダー */
.nav-drawer-header {
  background: linear-gradient(135deg, #1F3E7A 0%, #2A52A0 100%);
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 20px 20px 16px;
}

/* メニューリスト */
.nav-drawer-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.nav-drawer-list li a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #2A2824;
  text-decoration: none;
  border-bottom: 0.5px solid #EAE6E0;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  position: relative;
}
.nav-drawer-list li a::after {
  content: '›';
  position: absolute;
  right: 18px;
  font-size: 18px;
  color: #C0BBB4;
  transition: color .15s, right .15s;
  line-height: 1;
}
.nav-drawer-list li a:hover { background: #EBF3FB; color: #1F3E7A; border-left-color: #2A52A0; }
.nav-drawer-list li a:hover::after { color: #2A52A0; right: 14px; }
.nav-drawer-list li a.is-current { background: #EBF3FB; color: #1F3E7A; border-left-color: #2A52A0; font-weight: 700; }
.nav-drawer-list li a.is-current::after { color: #2A52A0; }

/* リンクアイコン（href末尾で判定） */
.nav-drawer-list li a::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .55;
}
.nav-drawer-list li a[href$="public"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A52A0'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5C21.3 7.6 17 4.5 12 4.5zm0 12.5c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5zm0-8c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z'/%3E%3C/svg%3E");
}
.nav-drawer-list li a[href$="reservation"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A52A0'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E");
}
.nav-drawer-list li a[href$="mypage"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A52A0'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
}
.nav-drawer-list li a[href$="login"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A52A0'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z'/%3E%3C/svg%3E");
}
.nav-drawer-list li a[href$="register"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A52A0'%3E%3Cpath d='M15 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4z'/%3E%3C/svg%3E");
}

/* ログアウトフッター */
.nav-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid #EAE6E0;
  background: #FAFAF8;
}
.nav-drawer-logout {
  width: 100%;
  background: #fff;
  border: 1.5px solid #F5A9A3;
  color: #B83020;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s;
}
.nav-drawer-logout:hover { background: #FDE8E6; border-color: #E07070; }

/* ─── Responsive (user) ──────────────────────────────────────── */
@media (max-width: 767px) {
  .group-grid { grid-template-columns: 1fr; }
  .pub-hero { padding: 20px 16px; }
  .pub-hero-title { font-size: 17px; }
  .pub-bar-area { width: 90px; }
  .pub-facility-tab { padding: 8px 14px; font-size: 12px; }
  .pub-group-header { flex-wrap: wrap; }

  /* PCナビを隠してハンバーガーを表示 */
  .nav-links { display: none !important; }
  .nav-user  { display: none !important; }
  .nav-hamburger { display: flex; }
}

/* ─── ページタイトル（マイページ・会員エリア共通） ───────────── */
.page-title { font-size: 18px; font-weight: 700; margin: 0; }

/* ─── 狭幅中央寄せラッパー（プロフィール・会員証） ────────────── */
.profile-form-wrap   { max-width: 480px; margin: 0 auto; padding: 20px 16px; }
.membership-card-wrap { max-width: 480px; margin: 0 auto; padding: 20px 16px; }

/* ─── 予約フロー共通 ─────────────────────────────────────────── */
.booking-container { padding-top: 20px; }
.booking-title     { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.booking-hint      { font-size: 11px; color: #6B6760; margin-bottom: 14px; }

/* ロック通知 */
.booking-lock-banner {
  background: #FDE8E6; border: 1px solid #F5A9A3; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 20px; display: flex; gap: 12px; align-items: flex-start;
}
.lock-icon  { font-size: 22px; flex-shrink: 0; }
.lock-title { font-size: 13px; font-weight: 700; color: #B83020; }
.lock-msg   { font-size: 11px; color: #8B1A14; margin-top: 3px; }

/* ステップインジケーター */
.step-indicator {
  display: flex; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 4px;
}
.step-item   { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.step-circle {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #D0CAC0;
  background: #fff; color: #9E9A94; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-active .step-circle { border-color: #2A52A0; background: #2A52A0; color: #fff; }
.step-done   .step-circle { border-color: #1A5E40; background: #1A5E40; color: #fff; }
.step-label  { font-size: 10px; color: #6B6760; white-space: nowrap; }
.step-active .step-label  { color: #2A52A0; font-weight: 600; }
.step-done   .step-label  { color: #1A5E40; }
.step-conn   { height: 2px; flex: 1; min-width: 20px; background: #D0CAC0; margin-bottom: 14px; }

/* レイアウト（サイドバー＋メイン） */
.booking-layout {
  display: flex; gap: 20px; align-items: flex-start;
}
.booking-sidebar {
  width: 200px; flex-shrink: 0;
}
.booking-main { flex: 1; min-width: 0; }
.sidebar-box {
  background: #F5F3EF; border: 1px solid #E0DDD7; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; font-size: 12px;
}
.sidebar-label { font-size: 10px; font-weight: 600; color: #9E9A94; margin-top: 4px; }
.sidebar-value { font-size: 12px; font-weight: 600; color: #1A1916; }
.sidebar-back  { display: block; }
.slot-summary  { margin-bottom: 10px; }

/* 施設カード */
.facility-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 16px;
}
.facility-card {
  border: 1.5px solid #D0CAC0; border-radius: 10px; padding: 20px 16px;
  background: #FAFAF8; cursor: pointer; transition: box-shadow .15s, border-color .15s;
  text-decoration: none; color: inherit;
}
.facility-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); border-color: #2A52A0; }
.facility-card-disabled { opacity: 0.4; pointer-events: none; }
.facility-name  { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.facility-sub   { font-size: 11px; color: #9E9A94; }
.facility-arrow { font-size: 11px; color: #2A52A0; margin-top: 10px; }

/* 機械選択リスト（公開ページ：1カラム縦並び） */
.machine-select-list { display: flex; flex-direction: column; gap: 10px; }
.machine-select-card {
  border: 1px solid #D0CAC0; border-radius: 8px; padding: 12px 14px;
  background: #FAFAF8; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.machine-select-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.machine-card-full { opacity: 0.6; }
.machine-select-main { flex: 1; min-width: 0; }
.machine-select-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.machine-select-type { margin-bottom: 4px; }

/* 素材タグ（Step3 機械カード） */
.mat-tags         { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.mat-tag          { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mat-tag-owned    { background: #E6F1FB; border: 0.5px solid #B5D4F4; color: #0C447C; }
.mat-tag-provided { background: #FAEEDA; border: 0.5px solid #FAC775; color: #633806; }
.mat-tag-more     { background: #F5F3EF; border: 0.5px solid #D0CAC0; color: #6B6760; cursor: pointer; }
.machine-select-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* 機械選択グリッド（Step1：2カラム） */
.machine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.machine-grid .machine-select-card {
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}
.machine-grid .machine-select-main { flex: 1; }
.machine-grid .machine-card-footer {
  margin-top: auto;
  padding-top: 10px;
  flex-shrink: 0;
}
/* 許可種別外の機械（利用不可） */
.machine-card-restricted { opacity: 0.45; background: #F5F3EF !important; }
@media (max-width: 767px) {
  .machine-grid { grid-template-columns: 1fr; }
}

/* モーダル */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 12px; box-sizing: border-box;
}
.modal-box {
  background: #fff; border-radius: 12px; padding: 20px;
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.modal-title  { font-size: 13px; font-weight: 700; flex: 1; padding-right: 8px; }
.modal-close  { background: none; border: none; cursor: pointer; color: #9E9A94; font-size: 18px; padding: 0;
                min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
                flex-shrink: 0; border-radius: 4px; }
.modal-close:hover { background: #F5F3EF; }
.modal-image-wrap { margin-bottom: 10px; }
.modal-image  { width: 100%; max-height: 240px; object-fit: contain; border-radius: 6px; display: block; }
.modal-desc   { font-size: 13px; color: #4A4640; line-height: 1.7; margin-bottom: 10px; word-break: break-word; }
.modal-detail-wrap { margin-top: 12px; }
.modal-footer { text-align: right; margin-top: 12px; }
.modal-detail-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; background: #2A52A0; color: #fff;
  border-radius: 6px; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background .15s;
  box-sizing: border-box; width: 100%;
}
.modal-detail-link:hover { background: #1F3E7A; }

/* カレンダー */
.calendar-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.calendar-month { font-size: 15px; font-weight: 700; flex: 1; text-align: center; }
.calendar-table { width: 100%; border-collapse: separate; border-spacing: 4px; margin-bottom: 12px; }
.calendar-table th { text-align: center; font-size: 12px; font-weight: 600; color: #6B6760; padding: 4px 0; width: calc(100% / 7); }
.calendar-table td { padding: 0; width: calc(100% / 7); vertical-align: top; }
.cal-sat { color: #2A52A0; }
.cal-sun { color: #B83020; }
.cal-cell { border-radius: 8px; }

/* セル内レイアウト */
.cal-day-inner {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  min-height: 60px; padding: 8px 4px 6px;
  border-radius: 8px; text-decoration: none;
  border: 1px solid transparent;
}
.cal-day-num { font-size: 15px; font-weight: 700; line-height: 1; }
.cal-badge {
  display: inline-block; font-size: 9px; font-weight: 600;
  padding: 2px 5px; border-radius: 4px; line-height: 1.4; white-space: nowrap;
}

/* 予約可能日（U-00カレンダー：avail/few/full を同一見た目にまとめる） */
.cal-open .cal-day-inner { background: #E6F1FB; border: 1px solid #B5D4F4; cursor: pointer; }
.cal-open .cal-day-num { color: #0C447C; }
.cal-open a.cal-day-inner:hover { background: #cfe3f5; border-color: #8BBCEC; }

/* 空きあり */
.cal-avail .cal-day-inner { background: #E6F1FB; border: 1px solid #B5D4F4; cursor: pointer; }
.cal-avail .cal-day-num { color: #0C447C; }
.cal-avail .cal-badge { background: #E6F1FB; color: #0C447C; border: 1px solid #B5D4F4; }
.cal-avail a.cal-day-inner:hover { background: #cfe3f5; border-color: #8BBCEC; }

/* 残りわずか */
.cal-few .cal-day-inner { background: #FAEEDA; border: 1px solid #FAC775; cursor: pointer; }
.cal-few .cal-day-num { color: #633806; }
.cal-few .cal-badge { background: #FAEEDA; color: #633806; border: 1px solid #FAC775; }
.cal-few a.cal-day-inner:hover { background: #f5d5a0; border-color: #E8A845; }

/* 満席（赤系） */
.cal-full .cal-day-inner { background: #FAE0DC; border: 1px solid #EFB8B0; color: #B83020; cursor: not-allowed; }
.cal-full .cal-day-num { color: #B83020; }
.cal-full .cal-badge { background: #FAE0DC; color: #B83020; border: 1px solid #EFB8B0; }

/* 過去・利用不可（グレー） */
.cal-disabled .cal-day-inner {
  background: #EAE6E0; border: 0.5px solid #D0CAC0;
  color: #B4B2A9; opacity: 0.5; cursor: not-allowed;
}
.cal-disabled .cal-day-num { color: #B4B2A9; }

/* 今日：背景は availability スタイルに委ねてドットのみで「今日」を示す */
.cal-today .cal-day-num::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2A52A0;
  margin: 2px auto 0;
}
/* 今日・満席はドットを赤系に */
.cal-today.cal-full .cal-day-num::after {
  background: #B83020;
}
/* 今日・選択不可はドットをグレーに */
.cal-today.cal-disabled .cal-day-num::after {
  background: #B4B2A9;
}
/* 今日・選択中はドットを白に */
.cal-today.cal-selected .cal-day-num::after {
  background: #ffffff;
}

/* 選択中 */
.cal-selected .cal-day-inner { background: #185FA5 !important; border: 2px solid #0C447C !important; }
.cal-selected .cal-day-num { color: #fff !important; font-weight: 500; }
.cal-selected .cal-badge { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* 凡例 */
.calendar-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: #6B6760; margin-top: 4px; }
.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-legend-sq { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.cal-legend-sq-avail    { background: #E6F1FB; border: 1px solid #B5D4F4; }
.cal-legend-sq-few      { background: #FAEEDA; border: 1px solid #FAC775; }
.cal-legend-sq-full     { background: #FAE0DC; border: 1px solid #EFB8B0; }
.cal-legend-sq-disabled { background: #EAE6E0; border: 0.5px solid #D0CAC0; opacity: 0.6; }

@media (max-width: 767px) {
  .calendar-table { border-spacing: 2px; }
  .cal-day-inner { min-height: 48px; padding: 6px 2px 4px; }
  .cal-day-num { font-size: 13px; }
  .cal-badge { font-size: 9px; padding: 1px 3px; }
}

/* スロット */
.slot-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;
}
.slot-cell {
  border: 1.5px solid #D0CAC0; border-radius: 8px; padding: 10px 8px;
  text-align: center; cursor: default;
}
.slot-avail   { border-color: #86C8A0; background: #DCF0E6; cursor: pointer; }
.slot-avail:hover { border-color: #1A5E40; }
.slot-selected { border-color: #3A6CB0 !important; background: #3A6CB0 !important; color: #fff !important; }
.slot-anchor   { border: 2px solid #1a3a6b !important; background: #1a3a6b !important; color: #fff !important; }
.slot-anchor-badge {
  display: block; font-size: 10px; font-weight: 700;
  background: #fff; color: #1a3a6b;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 3px; padding: 1px 6px;
  margin: 3px auto 0; width: fit-content;
}
.slot-past    { background: #EEECEA; color: #B8B4AE; cursor: not-allowed; opacity: 0.6; }
.slot-taken   { background: #E8E4DE; color: #9E9A94; }
.slot-blocked { background: #F0EDE8; color: #C0BBB4; }
.slot-limit   { background: #F2EDE8; color: #7A4F00; border-color: #C89060; }
.slot-mine    { background: #EFF4FC; border-color: #A8BBD8; color: #2A52A0; }
.slot-time    { font-size: 11px; font-weight: 600; }
.slot-closed-day {
  padding: 32px 0; text-align: center;
  font-size: 16px; font-weight: 600; color: #A09890;
}
.slot-label   { font-size: 9px; margin-top: 2px; }
.slot-actions     { margin-top: 8px; }
/* 連続利用時間上限を超える選択不可スロット */
.slot-over-limit  { opacity: 0.30; background: #F0EDE8 !important;
                    border-color: #D0CAC0 !important; cursor: not-allowed !important; }
/* 連続利用上限ヒント */
.slot-limit-hint  { font-size: 11px; color: #7A4F00; background: #FFF8E8;
                    border: 1px solid #E8C060; border-radius: 6px;
                    padding: 6px 10px; margin-bottom: 10px; }

/* コマ選択ガイドボックス */
.slot-guide-box {
  background: #F5F3EF; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 14px;
}
.slot-guide-instruction {
  font-size: 12px; color: #6B6760; margin-bottom: 6px;
}
.slot-guide-limit { color: #9E9A94; }
.slot-guide-status {
  font-size: 13px; font-weight: 600; color: #1F4E79;
}

/* 選択コマ情報カード（サイドバー） */
.slot-info-card {
  border: 1px solid #D0CAC0; border-radius: 8px;
  padding: 12px; background: #FAFAF8; margin-bottom: 10px;
}
.slot-info-header-row {
  padding-bottom: 6px;
  border-bottom: 1px solid #D0CAC0;
  margin-bottom: 4px;
}
.slot-info-header {
  font-size: 11px; font-weight: 700; color: #4A4640;
}
.slot-info-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 12px;
}
.slot-info-label { color: #9E9A94; }
.slot-info-value { font-weight: 600; color: #4A4640; }
.slot-info-divider {
  border-top: 0.5px solid #D0CAC0;
  margin: 8px 0 4px; font-size: 10px;
  color: #9E9A94; text-align: center;
}
.slot-remaining { color: #2A52A0 !important; font-weight: 700 !important; }

/* リセットボタン */
.slot-reset-btn {
  display: block; width: 100%;
  margin-top: 8px; margin-bottom: 8px; text-align: center;
  box-sizing: border-box;
}

/* 確認ページ */
.confirm-box {
  border: 1px solid #D0CAC0; border-radius: 8px; overflow: hidden; margin-bottom: 16px;
}
.confirm-row {
  display: flex; padding: 9px 14px; font-size: 12px; border-bottom: 1px solid #EAE6E0;
}
.confirm-row:last-child { border-bottom: none; }
.confirm-key { color: #6B6760; width: 60px; flex-shrink: 0; }
.confirm-val { font-weight: 600; }

.overnight-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.overnight-label input { width: auto; margin-top: 3px; }
.overnight-title { font-size: 12px; font-weight: 500; color: #7A4F00; }
.overnight-desc  { font-size: 10px; color: #9E9A94; margin-top: 2px; }

/* 同伴者入力：PC=5カラム → タブレット=2カラム → スマホ=1カラム */
.companion-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 16px;
  margin: 8px 14px;
}
.companion-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.companion-label { font-size: 13px; }
.companion-row input[type="number"] {
  width: 64px;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .companion-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .companion-grid { grid-template-columns: 1fr; }
}
.companion-row input[type="number"]::-webkit-inner-spin-button,
.companion-row input[type="number"]::-webkit-outer-spin-button { margin: 0; }

/* 延長予約 */
.confirm-section-extend {
  border: 1.5px solid #639922; background: #F0FAF4; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 14px;
}
.extend-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.extend-label input { width: auto; margin-top: 3px; }
.extend-title { font-size: 12px; font-weight: 600; color: #1A5E40; }
.extend-desc  { font-size: 10px; color: #9E9A94; margin-top: 2px; }

/* 動画ポップアップ */
.video-popup-box    { border: 2px solid #2A52A0; text-align: center; }
.video-popup-title  { font-size: 14px; font-weight: 700; color: #1F4E79; margin-bottom: 10px; }
.video-popup-desc   { font-size: 11px; color: #6B6760; line-height: 1.8; margin-bottom: 12px; }

/* 完了ページ */
.complete-success-title { font-size: 16px; font-weight: 700; color: #1A5E40; margin-bottom: 6px; }
.complete-next-box {
  background: #F5F3EF; border: 1px solid #D0CAC0; border-radius: 8px;
  padding: 16px; margin-top: 20px;
}

/* 小リンク（詳細・元予約など） */
.link-sm { font-size: 11px; color: #1F4E79; text-decoration: none; }
.link-sm:hover { text-decoration: underline; }

/* ─── Responsive (予約フロー) ─────────────────────────────────── */
@media (max-width: 767px) {
  .booking-layout { flex-direction: column; }
  .booking-sidebar { width: 100%; }
  .booking-main { width: 100%; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .facility-grid { grid-template-columns: 1fr; }
  .step-label { display: none; }
}

/* ─── マイページ TOP（U-08 新デザイン） ─────────────────────── */
.mypage-top-wrap   { max-width: 600px; margin: 0 auto; }
.mypage-top-alerts { padding: 16px 16px 0; }

/* ヒーロー */
.mypage-hero {
  background: linear-gradient(135deg, #1F3E7A 0%, #2A52A0 100%);
  color: #fff; padding: 20px 24px;
  display: flex; align-items: center; gap: 14px;
}
.mypage-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.mypage-hero-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.mypage-hero-sub  { font-size: 11px; opacity: 0.85; line-height: 1.7; }

/* ナビゲーション */
.mypage-nav-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 16px;
}
.mypage-nav-item {
  border: 0.5px solid #D0CAC0; border-radius: 10px;
  padding: 16px 8px; text-align: center; background: #fff;
  text-decoration: none; display: flex; flex-direction: column;
  align-items: center; gap: 6px; transition: box-shadow .15s;
}
.mypage-nav-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.mypage-nav-disabled { cursor: not-allowed; opacity: 0.6; }
.mypage-nav-icon  { font-size: 22px; }
.mypage-nav-label { font-size: 12px; font-weight: 500; color: #2A52A0; }

/* 直近の予約サマリー */
.mypage-upcoming {
  margin: 0 16px 20px;
  background: #F5F3EF; border-radius: 8px; padding: 12px 14px;
}
.mypage-upcoming-label  { font-size: 10px; color: #9E9A94; font-weight: 500; margin-bottom: 8px; }
.mypage-upcoming-list   { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mypage-upcoming-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; text-decoration: none; color: inherit;
  padding: 6px 8px; background: #fff; border-radius: 6px;
  border: 0.5px solid #D0CAC0;
}
.mypage-upcoming-row:hover   { background: #EBF3FB; }
.mypage-upcoming-date        { font-size: 11px; color: #4A4640; flex-shrink: 0; }
.mypage-upcoming-right       { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mypage-upcoming-machine     { font-size: 11px; font-weight: 600; color: #1A1916; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mypage-upcoming-empty       { font-size: 12px; color: #9E9A94; margin-bottom: 8px; }
.mypage-upcoming-more        { font-size: 11px; color: #2A52A0; text-decoration: none; display: block; text-align: right; margin-top: 4px; }
.mypage-upcoming-more:hover  { text-decoration: underline; }

/* 旧メニュー（互換維持） */
.mypage-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 600px; margin: 32px auto; }
.mypage-menu-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px; background: #fff; border: 1px solid #D0CAC0; border-radius: 10px;
  text-decoration: none; color: #2A52A0; font-weight: 600; font-size: 15px; gap: 8px;
  transition: box-shadow .15s;
}
.mypage-menu-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.mypage-menu-item.disabled { color: #9E9A94; pointer-events: none; background: #F5F3EF; }
.mypage-menu-icon { font-size: 28px; }

/* ─── 予約一覧（タブ・カード・ページネーション） ────────────── */
.mypage-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}

/* タブ */
.res-tabs { display: flex; border-bottom: 2px solid #E8E5E1; margin-bottom: 20px; }
.res-tab {
  padding: 10px 20px; font-weight: 600; font-size: 13px;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  text-decoration: none; color: #9E9A94;
  display: flex; align-items: center; gap: 6px;
  transition: color .15s;
}
.res-tab-active { border-color: #2A52A0; color: #2A52A0; }
.res-tab:hover:not(.res-tab-active) { color: #4A4640; }
.res-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #2A52A0; color: #fff; border-radius: 10px;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px;
}

/* カードリスト */
.res-card-list { display: flex; flex-direction: column; gap: 10px; }
.res-card {
  padding: 14px 16px; border-radius: 8px;
  border: 0.5px solid #D0CAC0; background: #ffffff;
  display: flex; flex-direction: column; gap: 6px;
}
.res-card-confirmed, .res-card-completed,
.res-card-cancelled, .res-card-no_show { background: #ffffff; }
.res-card-past { opacity: 0.85; }

/* カード内レイアウト */
.res-card-top     { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.res-card-machine { font-size: 13px; font-weight: 600; color: #1A1916; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-card-meta    { font-size: 12px; color: #6B6760; }
.res-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* ステータスバッジ（ライトトーン） */
.res-status-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.res-status-confirmed { background: #E6F1FB; color: #0C447C; }
.res-status-completed { background: #EAF3DE; color: #3B6D11; }
.res-status-cancelled { background: #F5F3EF; color: #888780; }
.res-status-no_show   { background: #FDECEA; color: #A32D2D; }

/* キャンセルボタン */
.res-cancel-btn {
  background: #FDF0D0; border: 1px solid #FAC775; color: #633806;
  border-radius: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px;
  cursor: pointer; line-height: 1.4;
}
.res-cancel-btn:hover { background: #f5e0b0; }

/* 延長バッジ */
.res-extension-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  background: #639922; color: #fff; white-space: nowrap;
  vertical-align: middle;
}

/* 延長子予約カード（インデント） */
.res-card-extension-child {
  margin-left: 20px;
  border-color: #A8D4A8;
  background: #F8FCF6 !important;
}
@media (max-width: 767px) {
  .res-card-extension-child { margin-left: 10px; }
}

/* ページネーション */
.pagination { display: flex; gap: 4px; justify-content: center; margin: 24px 0 8px; flex-wrap: wrap; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid #D0CAC0; border-radius: 6px;
  font-size: 12px; font-weight: 600; text-decoration: none; color: #3C3A36;
}
.page-btn:hover { background: #F5F3EF; }
.page-btn-current { background: #2A52A0; border-color: #2A52A0; color: #fff; }
.page-btn-current:hover { background: #2A52A0; }
.page-btn-disabled { color: #C0BBB4; border-color: #E8E5E1; cursor: default; pointer-events: none; }
.page-ellipsis { display: inline-flex; align-items: center; height: 32px; color: #9E9A94; font-size: 12px; padding: 0 4px; }
.pagination-info { text-align: center; font-size: 11px; color: #9E9A94; margin-bottom: 8px; }

@media (max-width: 767px) {
  .res-card { flex-direction: column; align-items: flex-start; }
  .res-card-side { align-self: flex-end; }
  .res-tab { padding: 8px 14px; font-size: 12px; }
}

/* ─── 予約詳細 ─────────────────────────────────────────────────── */
.reservation-info-table { width: 100%; border-collapse: collapse; }
.reservation-info-table th, .reservation-info-table td {
  padding: 10px 14px; border-bottom: 1px solid #E8E4DF; text-align: left; vertical-align: top;
}
.reservation-info-table th { width: 90px; color: #6B6760; font-weight: 500; background: #F5F3EF; }

/* 予約詳細 案B（1カラム・1カード） */
.res-detail-wrap    { max-width: 600px; margin: 0 auto; padding: 16px; }
.res-detail-wrap .card { max-width: 100%; }
.res-detail-machine { font-size: 15px; font-weight: 600; color: #1A1916; margin-bottom: 4px; }
.res-detail-facility { font-size: 11px; color: #6B6760; margin-bottom: 8px; }
.res-detail-datetime { font-size: 13px; font-weight: 500; color: #1A1916; margin-bottom: 8px; }
.res-detail-sub-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 7px 0; border-bottom: 0.5px solid #F5F3EF;
  font-size: 12px;
}
.res-detail-sub-row:last-child { border-bottom: none; }
.res-detail-sub-label { color: #9E9A94; flex-shrink: 0; width: 72px; }
.res-detail-actions  { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── 会員証 ─────────────────────────────────────────────────────── */
.card-membership { max-width: 480px; margin: 32px auto; text-align: center; }
.barcode-wrap { width: 100%; overflow: hidden; margin-bottom: 12px; }
.barcode-wrap svg { width: 100% !important; height: auto; }
.member-no-text { font-size: 20px; font-weight: 700; letter-spacing: .1em; color: #2A52A0; }
.member-type-text { font-size: 13px; color: #6B6760; margin-top: 4px; }

/* ─── レスポンシブ ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mypage-menu { grid-template-columns: 1fr; max-width: 360px; }
}

/* --- display-header (閲覧専用ページ /reserve/display) --- */
.display-header {
  background: #2A52A0;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  user-select: none;
}