/*
Theme Name: OZ BOOKING Member Theme
Theme URI: https://example.com
Author: OIKAZE+
Author URI: https://example.com
Description: OZ BOOKING 専用のユーザー向けWordPressテーマ。会員登録後の予約確認・変更・管理を、直感的で使いやすいUIで行えます。
Version: 1.0.0
*/

:root {
  /* === ブランドカラー === */
  --color-primary: #766336;
  --color-primary-dark: #5a4a27;

  /* === テキスト === */
  --color-text: #111;
  --color-text-light: #64748b;

  /* === 背景 === */
  --color-bg: #fff;
  --color-bg-secondary: #f4f7fb;
  --color-bg-tertiary: #f8fafc;

  /* === ボーダー === */
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;

  /* === フォント === */
  --font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size: 15px;

  /* === レイアウト共通 === */
  --app-max-width: 390px;
  --app-padding: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* === ステータスカラー === */
  --status-pending-bg: #fef9c3; --status-pending-text: #854d0e; --status-pending-border: #fde68a;
  --status-confirmed-bg: #EAF3DE; --status-confirmed-text: #3B6D11; --status-confirmed-border: #C0DD97;
  --status-inprogress-bg: #ffedd5; --status-inprogress-text: #9a3412; --status-inprogress-border: #fdba74;
  --status-cancelled-bg: #fee2e2; --status-cancelled-text: #991b1b; --status-cancelled-border: #fca5a5;
  --status-pre-bg: #FAEEDA; --status-pre-text: #854F0B; --status-pre-border: #FAC775;
}

body{
  font-size: var(--font-size);
  font-family: var(--font-family);
}

/* ========================================
   会員登録ページ スタイル
   ======================================== */

.register-container {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 16px;
  background-color: #fff;
  min-height: 100vh;
}

.register-step {
  display: none;
  text-align: center;
}

.register-step.active {
  display: block;
}

.register-title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  color: #222;
}

.description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.register-container label {
  display: block;
  font-size: 14px;
  color: #444;
  margin: 12px 0 4px;
  text-align: left;
}

.register-container input[type="tel"],
.register-container input[type="text"],
.register-container input[type="email"],
.register-container input[type="password"],
.register-container select {
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
  padding: 12px 4px;
  font-size: var(--font-size);
  background: transparent;
  outline: none;
}

.code-inputs {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 12px 0;
}

.code-inputs input {
  flex: 1;
  text-align: center;
  font-size: 20px;
  padding: 12px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.button,
.primary-button {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: var(--font-size);
  font-weight: bold;
  border: none;
  border-radius:3px;
  margin-top: 24px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.1);
  transition: background 0.2s;
  text-decoration: none;
}

.resend {
  text-align: center;
  margin-top: 16px;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 14px;
}

.form-note {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
  text-align: left;
}

.checkbox {
  margin-top: 16px;
  font-size: 14px;
  text-align: left;
}

.checkbox input {
  margin-right: 8px;
}

.login-note {
  margin-top: 24px;
  font-size: 14px;
  color: #444;
}

.login-note a {
  color: var(--color-primary);
  text-decoration: none;
}

.icon-success {
  margin: 24px auto 16px;
  width: 80px;
  height: 80px;
  text-align: center;
}

.icon-success svg {
  display: block;
  margin: 0 auto;
}

.completed-message {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  margin-top: 16px;
}

/* ========================================
   予約フォーム スタイル
   ======================================== */

.booking-container {
  max-width: 480px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.booking-container h1 {
  font-size: var(--font-size);
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

.booking-step {
  display: none;
}

.booking-step.active {
  display: block;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field-group {
  display: flex;
  flex-direction: column;
}

.field-group label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

.booking-container input[type="text"],
.booking-container select,
.booking-container textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.booking-container textarea {
  resize: vertical;
  font-family: inherit;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.radio-group label,
.checkbox-group label {
  background: #f4f4f4;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.radio-group input,
.checkbox-group input {
  margin-right: 6px;
}

/*.radio-vertical-group label {
  display: block;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  cursor: pointer;
}

.radio-vertical-group input[type="radio"] {
  margin-right: 8px;
}
*/
.total {
  margin-top: 16px;
  font-weight: bold;
  color: var(--color-primary);
  font-size: var(--font-size);
}

.section-title {
  font-size: var(--font-size);
  font-weight: bold;
  margin: 32px 0 8px;
  border-left: 4px solid var(--color-primary);
  padding-left: 8px;
  color: #333;
}

.selected-date-label {
  font-size: 14px;
  font-weight: bold;
  color: #555;
}

.confirmation p {
  margin: 6px 0;
  font-size: 14px;
}

/* ナビボタン */
.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.buttons button {
  width: 48%;
  padding: 12px;
  font-size: var(--font-size);
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.next-btn {
  background-color: var(--color-primary);
  color: white;
}

.prev-btn {
  background-color: #ccc;
  color: #333;
}

.next-btn.full {
  width: 100%;
  margin-top: 16px;
}

/* カレンダー */
.ozRsv_Calendar--Table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ozRsv_Calendar--DayHeader {
  background: #f0f0f0;
  font-size: 13px;
  padding: 8px;
}

.ozRsv_Calendar--DayCell {
  border: 1px solid #ddd;
  height: 56px;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  transition: background 0.2s;
  padding: 4px;
}

.ozRsv_Calendar--Date {
  font-size: 14px;
}

.ozRsv_Calendar--DayCell.selected {
  background: #f0f8ff;
  border: 2px solid var(--color-primary);
}

.ozRsv_Calendar--DayCell.disabled {
  background-color: #f2f2f2;
  color: #bbb;
  pointer-events: none;
  cursor: not-allowed;
}

.ozRsv_Calendar--Header {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  align-items: center;
}

.ozRsv_Calendar--CurrentMonth {
  font-weight: bold;
  font-size: var(--font-size);
}

.ozRsv_Calendar--Prev a,
.ozRsv_Calendar--Next a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
}

/* ========================================
   マイページ スタイル
   ======================================== */

.mypage-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 16px;
  background: #fff;
  min-height: 100vh;
}

.mypage-container h1 {
  font-size: 20px;
  margin-bottom: 16px;
  text-align: center;
}

.profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 12px;
}

.profile-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-text {
  font-size: var(--font-size);
}

.section {
  margin-bottom: 32px;
}

.section-title {
  font-weight: bold;
  font-size: var(--font-size);
  margin-bottom: 12px;
  color: #333;
}

.notice {
  background: #f0f0f0;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
}

/* スライド */
.reservation-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.reservation-card,
.add-card {
  flex: 0 0 80%;
  min-width: 280px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 16px;
  scroll-snap-align: start;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.reservation-card h3 {
  font-size: var(--font-size);
  margin-bottom: 8px;
  color: #333;
}

.reservation-details {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.status {
  display: inline-block;
  font-size: 12px;
  padding: 4px 8px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px;
  margin-top: 8px;
}

.status.confirmed {
  background: #34C759;
}

.status.pending {
  background: #ff9500;
}

.add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #aaa;
  border: 2px dashed #ccc;
  cursor: pointer;
  transition: background 0.2s;
}

.add-card:hover {
  background: #f8f8f8;
}

.button-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.button-link {
  display: block;
  text-align: center;
  padding: 14px;
  background: var(--color-primary);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  transition: background 0.2s;
}

.button-link:hover {
  background: #005ecb;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  .booking-container,
  .register-container,
  .mypage-container {
    padding: 16px;
  }
  
  .reservation-card,
  .add-card {
    min-width: 260px;
  }
}


/* reservation */

/* --- コースセクション全体 --- */
.course-block {
  margin-bottom: 24px;
  /*padding: 16px 18px;*/
  /*background: #fafafa;*/
  border-radius: 12px;
  /*border: 1px solid #eee;*/
}

/* --- h3 見出しデザイン --- */
.course-block-title {
  /*font-size: 1.1rem;*/
  /*font-weight: 600;*/
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  /*padding-left: 10px;*/
  /*border-left: 4px solid #007bff; /* お好みでブランドカラー */*/
}

/* --- 各コース項目 --- */
.checkbox-group.full-width {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- ラベル1列いっぱいに広げる --- */
.course-item {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 14px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

/* --- チェックボックス部分 --- */
.course-item input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}

/* --- ホバー・選択状態 --- */
.course-item:hover {
  background: #f0f8ff;
  border-color: #007bff;
}

.course-item input[type="checkbox"]:checked + .course-label {
  font-weight: 600;
  color: #007bff;
}

/* --- テキスト --- */
.course-label {
  flex: 1;
  line-height: 1.6;
  /*font-size: 14px;*/
  color: #333;
} 

/* --- 予約フォーム：コース選択のはみ出し防止 --- */
.booking-container .checkbox-group.full-width {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin: 0;
}

.booking-container .checkbox-group.full-width label,
.booking-container .course-item {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* 既存の背景スタイルをリセット */
/*.booking-container .checkbox-group.full-width label {
  background: none;
  padding: 0;
  border-radius: 0;
}*/

/* ラベルを1列いっぱいに広げる */
.booking-container .course-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

/* --- 選択時・ホバー時 --- */
.booking-container .course-item:hover {
  background: #f0f8ff;
  border-color: var(--color-primary);
}

.booking-container .course-item input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}

.booking-container .course-item input[type="checkbox"]:checked + .course-label {
  font-weight: 600;
  color: var(--color-primary);
}

/* ========================================
   汎用：ラジオ・チェック項目を1列表示
   ======================================== */

/* 共通：1項目を1列に */
.booking-container .checkbox-group,
.booking-container .radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 各項目ボックス（背景つき） */
.booking-container .checkbox-group label,
.booking-container .radio-group label {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  box-sizing: border-box;
}

/* チェック・ラジオ部分 */
.booking-container .checkbox-group input[type="checkbox"],
.booking-container .radio-group input[type="radio"] {
  margin-right: 10px;
  transform: scale(1.2);
}

/* ホバー＆選択時 */
.booking-container .checkbox-group label:hover,
.booking-container .radio-group label:hover {
  background: #f0f8ff;
  border-color: var(--color-primary);
}

.booking-container .checkbox-group input:checked + span,
.booking-container .radio-group input:checked + span {
  font-weight: 600;
  color: var(--color-primary);
}

/* テキスト部（spanを使用している場合） */
.booking-container .checkbox-group span,
.booking-container .radio-group span {
  flex: 1;
  line-height: 1.5;
  color: #333;
  font-weight: 200;
}


/* 時間選択 */
.booking-container .time-select-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.booking-container .time-select-group select {
  width: 100%;
  max-width: 120px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
}

/* 必須マーク */
.booking-container .required {
  color: #e00000;
  font-weight: 700;
  margin-left: 4px;
}

/* エラー表示 */
.booking-container .input-error {
  border-color: #e00000 !important;
  box-shadow: 0 0 0 3px rgba(224,0,0,0.15);
}

/* モバイル最適化 */
@media (max-width: 600px) {
  .booking-container .time-select-group {
    gap: 8px;
  }

  .booking-container .time-select-group select {
    max-width: none;
    flex: 1;
  }
}  

/* === 予約カードリンク === */
.current-booking-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}

.current-booking-link:hover .current-booking {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* === 予約カード本体 === */
.current-booking {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.booking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.booking-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #f3f4f6;
  color: #444;
}

/* ステータス別カラーリング */
.booking-status.確認中 { background: #fef3c7; color: #92400e; }
.booking-status.確定   { background: #d1fae5; color: #065f46; }
.booking-status.進行中 { background: #e0f2fe; color: #075985; }
.booking-status.完了   { background: #ecfdf5; color: #065f46; }
.booking-status.支払い完了 { background: #f3e8ff; color: #6b21a8; }
.booking-status.キャンセル { background: #fee2e2; color: #991b1b; }

.cast-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cast-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
}

.cast-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cast-meta {
  flex: 1;
}

/* reservation cast */

/* ==== キャスト情報（予約フォームヘッダー） ==== */
.booking-cast-info {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  /*border-radius: 12px;*/
  /*box-shadow: 0 2px 10px rgba(0,0,0,0.05);*/
  padding: 16px;
  margin-bottom: 24px;
}

.booking-cast-info .cast-thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
}

.booking-cast-info .cast-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.booking-cast-info .cast-details {
  flex: 1;
}

.booking-cast-info .cast-name {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #222;
}

.booking-cast-info .cast-catch {
  font-size: 0.9rem;
  color: #777;
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .booking-cast-info {
    flex-direction: column;
    text-align: center;
  }
  .booking-cast-info .cast-thumb {
    width: 100px;
    height: 100px;
  }
}

/* reservation-confirm */


/* ===== STEP3 確認テーブル：引き算デザイン ===== */

.confirm-wrap {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* テーブル */
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.confirm-table th,
.confirm-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

/* 左カラム（項目名） */
.confirm-table th {
  width: 32%;
  color: #6b7280;          /* 薄めグレー */
  font-weight: 600;
  background: #f9fafb;    /* ほんのり */
}

/* 右カラム（値） */
.confirm-table td {
  color: #111827;
}

/* 最終行の線を消す */
.confirm-table tr:last-child th,
.confirm-table tr:last-child td {
  border-bottom: none;
}

/* ===== コースラベル ===== */

.course-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.course-list li {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 14px;
    width: fit-content;
}

/* 最終合計 */
.final-total-wrap {
  margin: 28px 0 20px;
  text-align: center;
}

.final-total {
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

.final-total::before {
  /*content: "最終合計";*/
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

/* 送信ボタン */
.submit-btn {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  /*box-shadow: 0 6px 18px rgba(11,102,255,.35);*/
  transition: all .2s ease;
}

/*.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(11,102,255,.45);
}

.submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(11,102,255,.35);
}*/

/* 戻るボタン */
.prev-btn {
  background: #e5e7eb;
  color: #333;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

/* モバイル最適化 */
@media (max-width: 600px) {
  .confirm-wrap {
    padding: 20px 16px;
  }

  .confirm-table th,
  .confirm-table td {
    padding: 12px 8px;
    font-size: 14px;
  }

  .final-total {
    font-size: 18px;
  }
}

/* STEP3では「次へ」ボタンを非表示 */
.booking-step[data-step="3"].active ~ .buttons .next-btn {
  display: none;
}


/* reservation-completed */
.thankyou-container {
  max-width: 480px;
  margin: 80px auto;
  background: #fff;
  padding: 40px 24px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.thankyou-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.thankyou-message {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 32px;
}

.thankyou-id {
  font-size: 15px;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 24px;
}

.thankyou-next {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thankyou-button {
  display: block;
  padding: 14px 0;
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.thankyou-button:hover {
  background: #005ecb;
}

.thankyou-button.outline {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* mypage */

.mypage-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 50px 20px 100px;
  font-family: "Noto Sans JP", sans-serif;
  color: #222;
}

.mypage-header {
  text-align: center;
  margin-bottom: 40px;
}
.mypage-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.mypage-header .user-name {
  color: #555;
  font-size: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  border-left: 4px solid var(--color-primary);
  padding-left: 10px;
  margin-bottom: 18px;
}

/* === 予約情報 === */
.current-booking {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.booking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.booking-date {
  font-weight: 600;
  font-size: var(--font-size);
}
/* ==== ステータスバッジ（プロ仕様） ==== */
.booking-status {
  display: inline-block;
  min-width: 90px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  line-height: 1;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

/* 状態別カラー（OIKAZE+系トーン） */
.booking-status.確認中,
.booking-status.pending {
  background: #fff5d6;
  color: #9c7b00;
  border-color: #f3e3a1;
}

.booking-status.確定,
.booking-status.confirmed {
  background: #e8f8f5;
  color: #006a5e;
  border-color: #b9e3d8;
}

.booking-status.進行中,
.booking-status.in_progress {
  background: #e8f0ff;
  color: #2a4bb8;
  border-color: #c9d6ff;
}

.booking-status.完了,
.booking-status.completed {
  background: #eef8ff;
  color: var(--color-primary);
  border-color: #b8dcff;
}

.booking-status.キャンセル,
.booking-status.cancelled {
  background: #fce9e9;
  color: #b32727;
  border-color: #f4c6c6;
}

.booking-status.支払い完了,
.booking-status.paid {
  background: #e9fce9;
  color: #197a19;
  border-color: #b7e5b7;
}

/* ホバー時（管理画面や詳細ページリンクに備えて） */
.booking-status:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.cast-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cast-thumb img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
}
.cast-meta {
  flex: 1;
}
.cast-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}
.cast-area, .cast-shift, .cast-meeting {
  font-size: 13px;
  color: #555;
  margin: 2px 0;
}
.cast-status {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 500;
  margin-top: 4px;
}

/* ==== 予約履歴（横スクロール） ==== */
.mypage-history {
  margin-top: 40px;
}

.history-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.history-scroll::-webkit-scrollbar {
  height: 6px;
}
.history-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
.history-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.history-card {
  min-width: 260px;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  scroll-snap-align: start;
  padding: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.history-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-date {
  font-weight: 600;
  font-size: 0.95rem;
}

.history-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  color: #fff;
}

/* ステータス色 */
.history-status.完了 { background: #007bff; }
.history-status.支払い完了 { background: #28a745; }
.history-status.キャンセル { background: #dc3545; }
.history-status.確認中 { background: #ffc107; color: #333; }

.history-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.history-body .cast-thumb img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  object-fit: cover;
}

.cast-meta {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.4;
}

/* ========================
   VIP セクション
======================== */
.vip-section {
  margin: 40px 0 60px;
}

.vip-banner {
  background: linear-gradient(135deg, #1e1e1e, #3c3c3c);
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 28px 24px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

.vip-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}

.vip-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.vip-desc {
  font-size: 14px;
  color: #ddd;
  line-height: 1.6;
}

/* ========================
   ボタンエリア
======================== */
.button-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 40px;
}

.btn {
  display: block;
  text-align: center;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: 0.25s ease;
  text-decoration: none;
}

.btn-main {
  background: var(--color-primary);
  color: #fff;
}
.btn-main:hover {
  background: #0060d0;
}

.btn-sub {
  background: #444;
  color: #fff;
}
.btn-sub:hover {
  background: #2a2a2a;
}

/* FAQバナー */
.faq-banner {
  display: block;
  text-align: center;
  padding: 18px 16px;
  background: #f7f8fa;
  color: #222;
  border: 1px solid #eee;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: 0.25s ease;
}
.faq-banner:hover {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ========================
   レスポンシブ調整
======================== */
@media (min-width: 768px) {
  .button-area {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  .button-area a {
    flex: 1;
  }
  .faq-banner {
    flex: 2;
    margin-right: 10px;
  }
}

/* reservation-detail */

.booking-detail {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cast-info-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.cast-info-box .cast-thumb {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.cast-info-box .cast-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cast-meta .cast-name {
  font-size: var(--font-size);
  font-weight: 700;
  margin-bottom: 6px;
}

.booking-detail-table {
  margin-bottom: 28px;
}

.booking-detail-table .table-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
  border-left: 4px solid var(--color-primary);
  padding-left: 8px;
}

.booking-detail-table table {
  width: 100%;
  border-collapse: collapse;
}

.booking-detail-table th {
  width: 30%;
  text-align: left;
  background: #fafafa;
  padding: 10px 12px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #eee;
}

.booking-detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  color: #555;
}

.detail-footer {
  text-align: center;
  margin-top: 24px;
}

.btn-sub {
  display: inline-block;
  background: #eee;
  color: #333;
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-sub:hover {
  background: #ddd;
}

/* =====================================================
   マイページ（新UI） .mypage-app
===================================================== */
.mypage-app{max-width:390px;margin:0 auto;padding-bottom:40px;background:var(--color-bg-secondary)}

/* トースト */
.hdr-toast-fixed{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  background:#e8f7f1;color:#0a7c5a;
  font-size:12px;font-weight:500;
  padding:8px 16px;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  z-index:999;
}

/* セクション共通 */
.mypage-app .section{padding:20px 16px 0}
.mypage-app .empty{color:var(--color-text-light);font-size:13px;text-align:center;padding:24px 0}

/* セクションヘッダー */
.sec-head{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.sec-dot{width:4px;height:16px;border-radius:2px;background:var(--color-text);flex-shrink:0}
.sec-dot-blue{background:#185FA5}
.sec-dot-gray{background:#cbd5e1}
.mypage-app .section-title{
  font-size:12px;font-weight:500;color:var(--color-text-light);
  letter-spacing:.06em;text-transform:uppercase;
  margin:0;border:none;padding:0;
}
.sec-count{
  font-size:11px;color:var(--color-text-light);margin-left:auto;
  background:#fff;padding:2px 8px;border-radius:999px;
  border:1px solid var(--color-border);
}

/* ===== 予約カード ===== */
.ana-card{
  background:#fff;
  border-radius:20px;
  border:1px solid var(--color-border);
  margin-bottom:10px;
  overflow:hidden;
}
.pre-card{
  border-color:#bfdbfe;
  background:linear-gradient(180deg,#eff6ff 0%,#fff 60px);
}
.ana-card-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 0;
}
.ana-date{font-size:13px;font-weight:500;color:var(--color-text)}

/* ステータスバッジ */
.ana-status{
  font-size:11px;font-weight:500;
  padding:3px 10px;border-radius:999px;
  border:1px solid;
}
.ana-status.status-0{background:#fef9c3;color:#854d0e;border-color:#fde68a}
.ana-status.status-1{background:#EAF3DE;color:#3B6D11;border-color:#C0DD97}
.ana-status.status-2{background:#ffedd5;color:#9a3412;border-color:#fdba74}
.ana-status.status--1{background:#fee2e2;color:#991b1b;border-color:#fca5a5}
.ana-status.status-pre-0{background:#FAEEDA;color:#854F0B;border-color:#FAC775}
.ana-status.status-pre-1{background:#E6F1FB;color:#185FA5;border-color:#B5D4F4}
.ana-status.status-pre--1{background:#fee2e2;color:#991b1b;border-color:#fca5a5}

/* 時間表示 */
.ana-route{
  display:flex;align-items:center;justify-content:center;
  gap:0;padding:16px 0 14px;
}
.ana-time{text-align:center;flex:1}
.ana-time strong{font-size:32px;font-weight:500;display:block;color:var(--color-text);letter-spacing:-1px;line-height:1}
.ana-time span{font-size:10px;color:var(--color-text-light);margin-top:4px;display:block;letter-spacing:.06em;text-transform:uppercase}
.ana-time-sep{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:0 4px;margin-top:-6px;
}
.ana-time-sep-line{width:20px;height:1px;background:var(--color-border)}
.ana-time-sep-dot{width:5px;height:5px;border-radius:50%;border:1.5px solid var(--color-text-light)}
/* 旧デザイン矢印（後方互換） */
.ana-arrow{color:var(--color-text-light);font-size:18px}

/* カード区切り線 */
.ana-divider{height:1px;background:var(--color-bg-tertiary);margin:0 16px}

/* キャスト情報 */
.ana-info{margin:0}
.ana-cast{display:flex;align-items:center;gap:12px;padding:12px 16px}
.ana-cast img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--color-border)}
.ana-cast-placeholder{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--color-bg-tertiary);border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:500;color:var(--color-text-light);
}
.ana-cast-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ana-cast-name{font-size:14px;font-weight:500;color:var(--color-text)}
.ana-meta{font-size:12px;color:var(--color-text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-subrow{margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ana-price{font-size:15px;font-weight:500;color:var(--color-text)}
.ana-detail-link{
  font-size:11px;font-weight:500;color:#185FA5;
  text-decoration:none;padding:3px 8px;
  border-radius:999px;border:1px solid #bfdbfe;
  background:#eff6ff;
}
.ana-detail-link:hover{background:#dbeafe}

/* 事前リクエスト注記 */
.pre-note{
  display:flex;align-items:center;gap:6px;
  padding:9px 16px;
  background:#eff6ff;border-top:1px solid #bfdbfe;
}
.pre-note svg{width:13px;height:13px;flex-shrink:0}
.pre-note-text{font-size:11px;color:#185FA5}

.pre-time-unknown{
  text-align:center;font-size:12px;color:var(--color-text-light);
  margin:12px 16px;padding:8px;
  background:#f8fafc;border-radius:8px;border:1px solid var(--color-border);
}

/* 延長ボタン */
.extend-fab{
  display:block;width:calc(100% - 32px);margin:0 16px 14px;
  padding:11px;border-radius:10px;
  background:#ff7a00;color:#fff;border:none;
  font-size:13px;font-weight:800;cursor:pointer;
}

/* ===== Bottom Sheet ===== */
.extend-sheet{position:fixed;inset:0;display:none;z-index:100}
.extend-sheet.active{display:block}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.sheet-body{
  position:absolute;left:0;right:0;bottom:0;
  background:#fff;border-radius:20px 20px 0 0;
  padding:16px 16px 24px;
  animation:slideUp .22s ease-out;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:44px;height:4px;background:var(--color-border);border-radius:999px;margin:0 auto 12px}
.sheet-title{text-align:center;font-size:16px;font-weight:900;margin-bottom:16px;color:var(--color-text)}
.sheet-group{margin-bottom:12px}
.sheet-group label{display:block;font-size:12px;color:var(--color-text-light);margin-bottom:6px;font-weight:500}
.extend-select{width:100%;height:46px;border-radius:12px;border:1px solid #cbd5e1;padding:0 12px;background:#fff;font-weight:500}
.counter{display:flex;justify-content:center;align-items:center;gap:16px}
.counter .count{min-width:24px;text-align:center;font-size:18px;font-weight:900;color:var(--color-text)}
.counter button{width:44px;height:44px;border-radius:50%;border:none;background:var(--color-text);color:#fff;font-size:22px;font-weight:900;cursor:pointer}
.sheet-total{text-align:center;margin:14px 0;font-size:14px;color:#334155;font-weight:500}
.sheet-total strong{font-size:18px;color:var(--color-text)}
.sheet-submit{width:100%;padding:14px;border-radius:14px;border:none;background:var(--color-text);color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.sheet-cancel{width:100%;margin-top:10px;padding:12px;border-radius:14px;border:1px solid var(--color-border);background:#fff;color:#475569;font-weight:700;cursor:pointer}

/* ===== 過去の予約 ===== */
.history-simple{display:flex;flex-direction:column;gap:8px;padding:0;margin:0;list-style:none}
.history-row{
  background:#fff;border-radius:12px;padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--color-border);
}
.history-date{font-size:13px;font-weight:500;color:var(--color-text)}
.history-sub{font-size:11px;color:var(--color-text-light);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.history-link{
  font-size:11px;font-weight:500;color:var(--color-text-light);
  text-decoration:none;padding:4px 10px;
  border-radius:999px;border:1px solid var(--color-border);
  flex-shrink:0;
}
.history-link:hover{background:var(--color-bg-tertiary)}

/* ===== メニュー ===== */
.mypage-app .menu-links{display:flex;flex-direction:column;gap:8px}
.mypage-app .booking-cta{
  display:flex;align-items:center;gap:12px;
  background:var(--color-text);color:#fff;
  border-radius:14px;padding:14px 16px;
  text-decoration:none;font-weight:500;
  margin-bottom:0;
}
.mypage-app .booking-cta-icon{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:15px;
}
.mypage-app .booking-cta-text{flex:1;font-size:14px;color:#fff}
.mypage-app .booking-cta-arrow{font-size:18px;color:rgba(255,255,255,.4)}
.mypage-app .menu-link{
  display:flex;align-items:center;gap:10px;
  background:#fff;padding:14px 16px;border-radius:12px;
  text-decoration:none;color:#334155;font-weight:500;
  font-size:14px;border:1px solid var(--color-border);
}
.mypage-app .menu-link:hover{background:#f8fafc}
.mypage-app .menu-link-icon{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:#f1f5f9;color:#64748b;flex-shrink:0;
}
.mypage-app .menu-link-arrow{margin-left:auto;color:#cbd5e1;font-size:18px;line-height:1}
.mypage-app .menu-link.logout{color:#dc2626}
.mypage-app .menu-link.logout .menu-link-icon{background:#fff0f0;color:#dc2626}
.mypage-app .menu-link-badge{
  margin-left:auto;
  background:#ef4444;color:#fff;
  font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:999px;
  line-height:1.4;
}
/* =====================================================
   共通 APP レイアウト（ログイン・登録・予約フォーム等）
   max-width: 390px, padding: 24px, bg: white
===================================================== */
.oz-app {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 32px var(--app-padding) 48px;
  background: var(--color-bg);
  min-height: 100vh;
  font-family: var(--font-family);
  display: flex;
  flex-direction: column;
}

.oz-app-logo {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: 32px;
}

/*.oz-app-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 8px;
}*/

.oz-app-title {
    font-size: 15px;
    margin-bottom: 12px;
    color: var(--color-text);
    text-align: center;
}

.oz-app-desc {
  font-size: 13px;
  color: var(--color-text-light);
  text-align: center;
  line-height: 1.7;
  margin-top: 28px;
}

/* =====================================================
   フィールド（アンダーライン型）
===================================================== */
.oz-field {
  margin-bottom: 20px;
}

.oz-field-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-light);
  margin-bottom: 6px;
  letter-spacing: .04em;
}

.oz-field-input {
  width: 100%;
  padding: 10px 0;
  font-size: 15px;
  border: none;
  border-bottom: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-family);
  outline: none;
  transition: border-color .2s;
}

.oz-field-input:focus {
  border-bottom-color: var(--color-text);
}

.oz-field-input::placeholder {
  color: var(--color-border);
  font-size: 13px;
}

.oz-field-select {
  width: 100%;
  padding: 10px 0;
  font-size: 15px;
  border: none;
  border-bottom: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-appearance: none;
  outline: none;
}

.oz-field-hint {
  font-size: 11px;
  color: var(--color-text-light);
  margin-top: 5px;
}

/* =====================================================
   シフト開始時間ラジオグループ
===================================================== */
.oz-shift-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.oz-shift-radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-bg);
  transition: border-color .15s;
  font-size: 13px;
  color: var(--color-text);
  font-family: var(--font-family);
}

.oz-shift-radio-item:has(input:checked) {
  border-color: var(--color-text);
  background: var(--color-bg-tertiary);
}

.oz-shift-radio-item input[type="radio"] {
  accent-color: var(--color-text);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.oz-shift-placeholder {
  font-size: 12px;
  color: var(--color-text-light);
  padding: 10px 0;
}

.oz-shift-placeholder--warn {
  color: #e24b4a;
}

/* =====================================================
   ボタン
===================================================== */
.oz-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--color-text);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity .2s;
  margin-top: 8px;
}

.oz-btn:hover { opacity: .85; }

.oz-btn-outline {
  display: block;
  width: 100%;
  padding: 13px;
  background: transparent;
  color: var(--color-text);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .2s;
  margin-top: 8px;
}

.oz-btn-outline:hover { background: var(--color-bg-tertiary); }

.oz-sub-link {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 20px;
}

.oz-sub-link a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

/* =====================================================
   エラーボックス
===================================================== */
.oz-error {
  background: #fef2f2;
  border: 0.5px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: #991b1b;
  margin-bottom: 16px;
  text-align: center;
}

/* =====================================================
   ステップインジケーター
===================================================== */
.oz-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
}

.oz-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background .2s;
}

.oz-step-num.done,
.oz-step-num.active {
  background: var(--color-text);
  color: #fff;
}

.oz-step-num.idle {
  background: var(--color-bg-tertiary);
  color: var(--color-text-light);
  border: 0.5px solid var(--color-border);
}

.oz-step-line {
  flex: 1;
  height: 0.5px;
  background: var(--color-border);
  transition: background .2s;
}

.oz-step-line.done { background: var(--color-text); }

/* =====================================================
   OTPコード入力
===================================================== */
.oz-otp-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.oz-otp-row input {
  width: 44px;
  height: 52px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border);
  background: var(--color-bg-tertiary);
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  font-family: var(--font-family);
  outline: none;
  transition: border-color .2s;
}

.oz-otp-row input:focus {
  border-color: var(--color-text);
  background: var(--color-bg);
}

.oz-resend {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-light);
  cursor: pointer;
  margin-top: 4px;
}

.oz-resend span {
  color: var(--color-text);
  font-weight: 500;
}

/* =====================================================
   成功アイコン（登録完了・予約完了）
===================================================== */
.oz-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e8f5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* =====================================================
   予約完了ページ
===================================================== */
.oz-thankyou {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 32px var(--app-padding) 48px;
  background: var(--color-bg);
  min-height: 100vh;
  font-family: var(--font-family);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.oz-thankyou-id {
  background: var(--color-bg-tertiary);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin: 16px 0 24px;
  width: 100%;
}

.oz-thankyou-id-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.oz-thankyou-id-val {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  margin-top: 4px;
}

.oz-thankyou-btns {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* =====================================================
   延長申請ページ
===================================================== */
.oz-ext-card {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.oz-ext-card-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-light);
  margin-bottom: 6px;
  letter-spacing: .04em;
}

.oz-ext-input {
  width: 100%;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 16px;
  color: var(--color-text);
  font-family: var(--font-family);
  outline: none;
  transition: border-color .2s;
}

.oz-ext-input:focus { border-color: var(--color-text); }

/* =====================================================
   予約フォーム（booking）共通リセット・上書き
===================================================== */
.oz-booking-wrap {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 var(--app-padding) 48px;
  background: var(--color-bg);
  min-height: 100vh;
  font-family: var(--font-family);
}

/* キャストヘッダー */
.oz-cast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.oz-cast-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-light);
  flex-shrink: 0;
  overflow: hidden;
}

.oz-cast-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.oz-cast-av-name { font-size: 13px; font-weight: 500; color: var(--color-text); }
.oz-cast-av-sub  { font-size: 11px; color: var(--color-text-light); margin-top: 1px; }
.oz-free-cast-badge {
  font-size: 11px;
  color: var(--color-text-light);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: auto;
}

/* セクションタイトル（予約フォーム内） */
.oz-sec-ttl {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 20px 0 8px;
}

/* カレンダー */
.oz-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.oz-cal-month {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.oz-cal-nav {
  font-size: 12px;
  color: var(--color-text-light);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.oz-cal-nav:hover { background: var(--color-bg-tertiary); }

.oz-cal-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 7列を均等幅に */
}

.oz-cal-table th {
  font-size: 10px;
  color: var(--color-text-light);
  text-align: center;
  padding: 4px 0 8px;
  font-weight: 500;
}

.oz-cal-table th:first-child { color: #e24b4a; }
.oz-cal-table th:last-child  { color: #185FA5; }

/* セルは正方形を保つため aspect-ratio で制御 */
.oz-cal-table td {
  text-align: center;
  padding: 3px 2px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  position: relative;
}

/* セル内の数字を丸で囲む疑似要素アプローチ */
.oz-cal-table td > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 1;
  transition: background .15s;
}

.oz-cal-table td:first-child { color: #e24b4a; }
.oz-cal-table td:last-child  { color: #185FA5; }

.oz-cal-table td.disabled {
  color: var(--color-border);
  pointer-events: none;
}

.oz-cal-table td.selected > span {
  background: var(--color-text);
  color: #fff !important;
  font-weight: 500;
}

/* 日曜・土曜の選択時も色を保持 */
.oz-cal-table td:first-child.selected > span,
.oz-cal-table td:last-child.selected > span {
  color: #fff !important;
}

/* ホバー */
.oz-cal-table td:not(.disabled):hover > span {
  background: var(--color-bg-secondary);
}

.oz-selected-date-bar {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-text-light);
  text-align: center;
}

.oz-selected-date-bar strong { color: var(--color-text); font-weight: 500; }

/* 時間セレクト */
.oz-time-row { display: flex; gap: 8px; align-items: center; }

.oz-time-sel {
  flex: 1;
  padding: 10px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  outline: none;
}

.oz-time-colon { font-size: 18px; color: var(--color-text-light); font-weight: 300; }

/* コースアイテム */
.oz-course-block-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 0;
  border: none;
  width: 100%;
  font-family: var(--font-family);
}

.oz-course-block-hd-name { font-size: 13px; font-weight: 500; color: var(--color-text); }
.oz-course-block-hd-icon { font-size: 14px; color: var(--color-text-light); }

.oz-course-block-desc {
  font-size: 11px;
  color: var(--color-text-light);
  line-height: 1.6;
  padding: 5px 12px 6px;
  background: var(--color-bg-tertiary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-bottom: 4px;
}

.oz-course-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 4px;
  background: var(--color-bg);
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}

.oz-course-item:has(input:checked) {
  border-color: var(--color-text);
  background: var(--color-bg-tertiary);
}

.oz-course-item input[type="checkbox"],
.oz-course-item input[type="radio"] {
  accent-color: var(--color-text);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.oz-course-item-body { flex: 1; min-width: 0; }
.oz-course-item-name { font-size: 13px; font-weight: 500; color: var(--color-text); }
.oz-course-item-dur  { font-size: 11px; color: var(--color-text-light); margin-top: 1px; }
.oz-course-item-desc { font-size: 11px; color: var(--color-text-light); margin-top: 3px; line-height: 1.6; font-style: italic; }
.oz-course-item-price { font-size: 13px; font-weight: 500; color: var(--color-text); flex-shrink: 0; }

/* チップ型ラジオ（指名料・交通費・合流方法） */
.oz-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }

.oz-chip-group label {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-light);
  cursor: pointer;
  background: var(--color-bg);
  transition: all .15s;
  font-family: var(--font-family);
}

.oz-chip-group input[type="radio"] { display: none; }

.oz-chip-group label:has(input:checked) {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

/* テキスト入力（フォーム内） */
.oz-txt-input {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 0.5px solid var(--color-border);
  background: transparent;
  font-size: 13px;
  color: var(--color-text);
  font-family: var(--font-family);
  outline: none;
}

.oz-txt-input::placeholder { color: var(--color-border); }
.oz-txt-input:focus { border-bottom-color: var(--color-text); }

.oz-txt-area {
  width: 100%;
  padding: 10px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-size: 13px;
  color: var(--color-text);
  font-family: var(--font-family);
  resize: none;
  outline: none;
  line-height: 1.6;
  transition: border-color .15s;
}

.oz-txt-area:focus { border-color: var(--color-text); }

/* セレクト（フォーム内） */
.oz-sel {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 0.5px solid var(--color-border);
  background: transparent;
  font-size: 13px;
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-appearance: none;
  outline: none;
}

/* 小計バー */
.oz-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-top: 16px;
}

.oz-total-bar-label { font-size: 12px; color: var(--color-text-light); }
.oz-total-bar-val   { font-size: 16px; font-weight: 500; color: var(--color-text); }

/* 必須マーク */
.oz-required { color: #e24b4a; margin-left: 2px; font-size: 11px; }

/* ナビボタン行 */
.oz-nav-row {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 4px;
}

.oz-btn-back {
  flex: 1;
  padding: 12px;
  background: var(--color-bg-tertiary);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-light);
  cursor: pointer;
  font-family: var(--font-family);
}

.oz-btn-next {
  flex: 2;
  padding: 12px;
  background: var(--color-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-family);
  transition: opacity .2s;
}

.oz-btn-next:hover { opacity: .85; }

.oz-btn-submit {
  width: 100%;
  padding: 14px;
  background: var(--color-text);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-family);
  transition: opacity .2s;
}

.oz-btn-submit:hover { opacity: .85; }

/* 確認ページ */
.oz-confirm-card {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  padding: 4px 14px;
  margin-bottom: 12px;
}

.oz-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--color-border-light);
}

.oz-confirm-row:last-child { border-bottom: none; }

.oz-confirm-dt {
  font-size: 11px;
  color: var(--color-text-light);
  min-width: 72px;
  padding-right: 8px;
  padding-top: 1px;
}

.oz-confirm-dd {
  font-size: 12px;
  color: var(--color-text);
  text-align: right;
  flex: 1;
}

.oz-confirm-total {
  text-align: center;
  padding: 16px;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

.oz-confirm-total-label {
  font-size: 11px;
  color: var(--color-text-light);
  letter-spacing: .04em;
}

.oz-confirm-total-val {
  display: block;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-text);
  margin-top: 4px;
  letter-spacing: -1px;
}

/* チェックボックス行（利用規約） */
.oz-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.6;
}

.oz-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-text);
  width: 15px;
  height: 15px;
}

.oz-checkbox-row a { color: var(--color-text); }

/* =====================================================
   予約詳細ページ（booking-detail）
===================================================== */
.oz-detail-wrap {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 20px var(--app-padding) 48px;
  background: var(--color-bg-secondary);
  min-height: 100vh;
  font-family: var(--font-family);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oz-detail-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 0.5px solid var(--color-border);
  overflow: hidden;
  padding: 16px;
}

.oz-detail-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
}

.oz-detail-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.oz-detail-date-lg { font-size: 15px; font-weight: 500; color: var(--color-text); }
.oz-detail-time-sm { font-size: 12px; color: var(--color-text-light); margin-top: 3px; }

.oz-status-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 0.5px solid;
}

.oz-status-chip.s-0  { background: var(--status-pending-bg);    color: var(--status-pending-text);    border-color: var(--status-pending-border); }
.oz-status-chip.s-1  { background: var(--status-confirmed-bg);  color: var(--status-confirmed-text);  border-color: var(--status-confirmed-border); }
.oz-status-chip.s-2  { background: var(--status-inprogress-bg); color: var(--status-inprogress-text); border-color: var(--status-inprogress-border); }
.oz-status-chip.s--1 { background: var(--status-cancelled-bg);  color: var(--status-cancelled-text);  border-color: var(--status-cancelled-border); }
.oz-status-chip.s-pre { background: var(--status-pre-bg); color: var(--status-pre-text); border-color: var(--status-pre-border); }

.oz-detail-cast-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oz-detail-cast-img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-light);
  flex-shrink: 0;
  overflow: hidden;
}

.oz-detail-cast-img img { width: 100%; height: 100%; object-fit: cover; }

.oz-detail-cast-name { font-size: 15px; font-weight: 500; color: var(--color-text); }
.oz-detail-cast-sub  { font-size: 12px; color: var(--color-text-light); margin-top: 3px; }

/* 料金内訳 */
.oz-price-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 0 0 12px;
  cursor: pointer;
  font-family: var(--font-family);
}

.oz-price-toggle-label { font-size: 13px; font-weight: 500; color: var(--color-text); }
.oz-price-toggle-icon  { font-size: 16px; color: var(--color-text-light); transition: transform .2s; }
.oz-detail-card.open .oz-price-toggle-icon { transform: rotate(45deg); }

.oz-price-list { display: none; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.oz-detail-card.open .oz-price-list { display: flex; }

.oz-price-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}

.oz-price-row-label { font-size: 12px; font-weight: 500; color: var(--color-text); }
.oz-price-row-val   { font-size: 12px; font-weight: 500; color: var(--color-text); }
.oz-price-row-val.fee { color: #7c3aed; }

.oz-price-total-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--color-border-light);
  text-align: center;
}

.oz-price-total-label  { font-size: 11px; color: var(--color-text-light); }
.oz-price-total-amount {
  display: block;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-primary);
  margin: 4px 0 2px;
  letter-spacing: -1px;
}
.oz-price-total-method { font-size: 11px; color: var(--color-text-light); }

/* info grid */
.oz-info-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px 12px;
}

.oz-info-dt { font-size: 12px; color: var(--color-text-light); }
.oz-info-dd { font-size: 13px; color: var(--color-text); }

.oz-memo-text { font-size: 13px; color: var(--color-text); line-height: 1.7; }

.oz-back-btn {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  margin-top: 4px;
}

/* =====================================================
   booking STEP3 — 注意書き・ポリシー同意
===================================================== */
.oz-caution {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 0.5px solid #fde68a;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #92400e;
  line-height: 1.6;
  margin-bottom: 16px;
}

.oz-caution svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.oz-policy-block {
  margin-bottom: 16px;
}

.oz-policy-links {
  font-size: 11px;
  color: var(--color-text-light);
  margin-bottom: 10px;
}

.oz-policy-links a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oz-policy-sep {
  margin: 0 4px;
  color: var(--color-border);
}

.oz-policy-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.6;
}

.oz-policy-agree input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-text);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 送信ボタン disabled 状態 */
.oz-btn-submit:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* =====================================================
   oz-course-item — ラジオボタン対応（選択済みスタイル）
   :has() 非対応ブラウザ向けに JS でクラス付与も可
===================================================== */
.oz-course-item:has(input[type="radio"]:checked) {
  border-color: var(--color-text);
  background: var(--color-bg-tertiary);
}

/* =====================================================
   booking STEP3 — キャスト表示・未確定ボックス
===================================================== */
.oz-confirm-cast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

.oz-confirm-cast-img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-light);
  flex-shrink: 0;
  overflow: hidden;
}

.oz-confirm-cast-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.oz-confirm-cast-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.oz-confirm-cast-sub {
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 2px;
}

.oz-unconfirmed-box {
  background: #fffaf0;
  border: 0.5px solid #e8c97a;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}

.oz-unconfirmed-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.oz-unconfirmed-desc {
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.8;
}

.field-note {
  font-size: 11px;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: -4px 0 10px;
  padding: 0;
}

/* =====================================================
   プロフィールページ
===================================================== */
.oz-field-input--disabled {
  opacity: .5;
  cursor: not-allowed;
}

.oz-profile-notice {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
}

.oz-profile-notice--ok {
  background: #e8f5e9;
  border: 0.5px solid #a5d6a7;
  color: #2e7d32;
}


.oz-meeting-group { margin-bottom: 12px; }

.oz-meeting-group-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: .04em;
  padding: 5px 12px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

.mypage-banner-img{
  width: 100%;
}