/* 最低限のレスポンシブスタイル（土台）。
   小さい画面を基準にし、大きい画面でも崩れず中央に収まるようにする。 */

:root {
  --color-bg: #0f172a;
  --color-fg: #f8fafc;
  --color-accent: #38bdf8;
  --max-width: 720px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  /* 共通ヘッダー(.site-header)＋本体(main.container)＋フッターを必ず縦に積む。
     既定の flex-direction:row のままだと、全画面共通ヘッダー追加後に
     <header> と <main> が横並びの兄弟フレックス要素になり、ヘッダーが左カラム化して
     本体カードが右側へ細長く潰れる（管理画面の崩れの根本原因）。column で縦積みに固定する。 */
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--color-bg);
  color: var(--color-fg);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;           /* 横方向中央（縦積みの body 内でも中央に置く） */
  padding: 1.5rem;
  flex: 1;                  /* ヘッダー下の残り高さを占有（フッターを下へ・従来の中央寄せを維持） */
  min-width: 0;             /* 子が内容幅で押し広げて横溢れするのを防ぐ */
  display: flex;
  /* flash（通知）と本体を必ず縦積みにする。row のままだと通知表示時に
     通知と本体カードが同じ行の兄弟フレックス要素となり、横並びで幅を奪い合って
     本体カードが右側へ細長く潰れる（＝再発崩れの根本原因）。
     column にすることで、通知の有無に関わらず本体カードの幅・位置が変わらない。 */
  flex-direction: column;
  align-items: center;      /* 子（通知・カード）を横方向中央に */
  justify-content: center;  /* 単一カード時は縦方向も中央（従来の見た目を維持） */
}

.hero {
  text-align: center;
}

.hero__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 6vw, 3rem);
  letter-spacing: 0.05em;
}

.hero__status {
  margin: 0;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  color: var(--color-accent);
}

/* ===== フォーム系（登録・ログイン・ダッシュボード）=====
   機能優先だがスマホで崩れない最低限の白ベースUI。 */

.card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  background: #ffffff;
  color: #1f2937;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.card__title {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  text-align: center;
}

.form__group {
  margin-bottom: 1.1rem;
}

.form__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.form__input {
  width: 100%;
  max-width: 100%;              /* 親からはみ出さない（datetime-local 対策の要） */
  min-width: 0;                 /* intrinsic min-width で広がらないようにする */
  box-sizing: border-box;       /* padding込みで100%に収める（明示） */
  padding: 0.85rem 0.9rem;      /* 入力欄は大きめ（タップしやすく） */
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
}

/* iOS Safari の日付・時刻入力は native の intrinsic 幅を持ち width:100% を無視して
   横にはみ出す＋高さも他入力と不揃いになる。appearance を解除して共通 input と
   同じ箱（幅100%・同じ padding/高さ）に統一する。Safari 専用の分岐は増やさない。 */
.form__input[type="datetime-local"],
.form__input[type="date"],
.form__input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 1.25rem;          /* 空でも他入力と同等の高さを確保 */
}

.form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.form__error {
  margin: 0.35rem 0 0;
  color: #dc2626;
  font-size: 0.85rem;
}

.form__button {
  width: 100%;
  padding: 0.9rem 1rem;         /* 押しやすい大きめボタン */
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.form__button:hover {
  background: #1d4ed8;
}

.form__button--secondary {
  background: #64748b;
}

.form__button--secondary:hover {
  background: #475569;
}

.form--inline {
  margin-top: 1.25rem;
}

.form__hint {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.9rem;
}

/* カード内リンクの色。:where() で詳細度を要素相当(0,0,1)に抑え、a要素の
   ボタン(.form__button 等 = 0,1,0)の文字色が必ず勝つようにする。
   これを .card a(0,1,1) にすると a要素ボタンの文字色を奪い、
   青地に青文字＝不可視になる（新規イベント作成・商品を登録する 等）。
   通常のテキストリンクは a 要素として引き続き青になる。 */
:where(.form__hint) a,
:where(.card) a {
  color: #2563eb;
}

/* フラッシュメッセージ（エラー/成功が分かりやすいように）。
   本体カードの上に縦積みで表示し、コンテンツ列（--max-width）と同じ横幅基準に揃える。
   通知の有無で本体カードの幅・位置は一切変わらない（.container を column にしたため）。 */
.flash {
  list-style: none;
  margin: 0 auto 1rem;
  padding: 0;
  width: 100%;
  max-width: var(--max-width);  /* コンテンツ列と同じ幅基準。カードを横から押さない */
  box-sizing: border-box;
}

.flash__item {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  /* 長い日本語やURLでも安全に折り返す（ボタンではなく本文なので anywhere で可）。
     1文字ずつの不自然な改行は起こさず、はみ出し・横スクロールも防ぐ。 */
  overflow-wrap: anywhere;
}

/* 色だけで意味を伝えないよう、記号の接頭辞を付与（アクセシビリティ）。 */
.flash__item::before {
  font-weight: 700;
  margin-right: 0.4rem;
}

.flash__item--error {
  background: #fee2e2;
  color: #991b1b;
}
.flash__item--error::before { content: "⚠ "; }

.flash__item--success {
  background: #dcfce7;
  color: #166534;
}
.flash__item--success::before { content: "✓ "; }

.dashboard__welcome {
  font-size: 1.05rem;
}

.dashboard__role {
  color: #64748b;
  font-size: 0.9rem;
}

.dashboard__menu {
  padding: 0.75rem 1rem;
  background: #f1f5f9;
  border-radius: 8px;
}

/* ===== イベント管理・公開 ===== */

.card--wide {
  max-width: 640px;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}
.badge--draft { background: #94a3b8; }
.badge--published { background: #16a34a; }
.badge--private { background: #d97706; }
/* 販売形式（イベント / グッズ販売）。公開状態バッジと色で区別する */
.badge--sales-type { background: #334155; }

.event-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.event-list__item {
  padding: 0.85rem 0;
  border-top: 1px solid #e2e8f0;
}

.event-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.event-list__title {
  font-weight: 700;
}

.event-list__actions {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.9rem;
}

.event-list__empty {
  margin-top: 1.25rem;
  color: #64748b;
}

.event-status {
  margin: 0 0 1rem;
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.25rem;
}

.event-actions .form__button {
  width: auto;
  padding: 0.7rem 1.2rem;
}

.event-thumb {
  max-width: 100%;
  height: auto;
  margin-top: 0.5rem;
  border-radius: 8px;
}

/* 出品者向け: イベント編集・一覧から商品登録/管理へ進む導線を明確にする。
   （購入者の light テーマではなく管理画面の既存スタイルに合わせる） */
.manage-panel {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.manage-panel__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2937;
}
.manage-panel__lead { margin: 0 0 0.35rem; color: #1f2937; }
/* イベント公開状態の1行表示（バッジは商品公開バッジと別セクション） */
.event-publish__state { margin: 0 0 0.6rem; font-size: 0.95rem; color: #1f2937; }
/* 公開URLは長い一続きの文字列。スマホで折り返して横にはみ出さないようにする */
.event-publish__url { word-break: break-all; overflow-wrap: anywhere; }

/* 危険操作エリア（イベント削除）。公開操作と視覚的に分離し、誤タップを防ぐ。 */
.danger-zone { margin-top: 1.5rem; border-color: #fecaca; background: #fef2f2; }
.danger-zone__title { color: #b91c1c; }
.form__button--danger { background: #dc2626; color: #fff; }
.form__button--danger:hover { background: #b91c1c; }
/* 無効状態（削除不可）は押せないと分かるが文言は読める（opacityを下げすぎない） */
.form__button:disabled,
.form__button--danger:disabled {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}
.manage-panel__hint { margin: 0 0 0.85rem; color: #64748b; font-size: 0.9rem; }
.manage-panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* 商品CTAは押しやすい大きさを確保（高さ52px以上・文字は必ず表示） */
.manage-panel .form__button {
  width: auto;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* イベント一覧カード内の商品管理ボタン（テキストリンクと区別した補助CTA） */
/* 初回出品フローの進行ステップ表示（管理画面・購入者どちらの白面でも読める自己完結色）。
   スマホで横スクロールしないよう縮小・折返し可。色だけに依存しない。 */
.ob-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.ob-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #94a3b8;
}
.ob-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #eef1fa;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}
.ob-steps__sep { width: 0.9rem; height: 1px; background: #cbd5e1; flex: none; }
.ob-steps__item.is-current { color: #3c477f; font-weight: 700; }
.ob-steps__item.is-current .ob-steps__num { background: #4c589c; color: #fff; }
.ob-steps__item.is-done { color: #3c477f; }
.ob-steps__item.is-done .ob-steps__num { background: #4c589c; color: #fff; }

/* 戻り導線のリンク行（どこへ戻るか具体的に・複数を横並び） */
.nav-return { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

.event-list__cta { margin-top: 0.6rem; }
.event-list__cta .form__button {
  width: auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* 公開・プレビュー表示 */
.event-detail {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.event-detail__hero {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.event-detail__title {
  margin: 1rem 0 0.75rem;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
}

.event-detail__meta {
  margin: 0 0 1rem;
}
.event-detail__meta div {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.event-detail__meta dt {
  min-width: 5.5rem;
  color: #64748b;
  margin: 0;
}
.event-detail__meta dd {
  margin: 0;
}

.event-detail__desc {
  white-space: pre-wrap;   /* 改行を保持（nl2brフィルタ不要） */
  line-height: 1.7;
}

.preview-banner {
  max-width: 640px;
  margin: 0 auto 1rem;
  padding: 0.6rem 1rem;
  background: #fef9c3;
  color: #854d0e;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}

/* ===== 商品（管理・公開・購入） =====
   白ベース・スマホ優先。各商品は独立したカードで表示する。 */

.badge--active { background: #16a34a; }
.badge--hidden { background: #94a3b8; }
.badge--soldout { background: #dc2626; }

.product-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

/* 各商品カード（見比べやすいよう独立したカード） */
.product-card {
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.product-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.product-card__name {
  font-weight: 700;
  font-size: 1.05rem;
}

.product-card__desc {
  margin: 0.5rem 0 0;
  color: #475569;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.product-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.6rem 0;
}

.product-card__price {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1f2937;
}

.product-card__stock {
  color: #64748b;
  font-size: 0.9rem;
}

/* 管理側のカード内アクション（編集・公開/非公開） */
.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.product-card__actions a {
  color: #2563eb;
}

/* リンク風ボタン（フォーム内の公開/非公開切替） */
.linkbutton {
  padding: 0;
  border: none;
  background: none;
  color: #2563eb;
  font-size: 0.9rem;
  cursor: pointer;
}
.linkbutton:hover {
  text-decoration: underline;
}

/* 公開ページの商品セクション見出し */
.products {
  width: 100%;
  max-width: 640px;
  margin: 1.5rem auto 0;
}
.products__heading {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

/* 商品選択画面 */
.product-detail {
  margin-bottom: 1.25rem;
}
.product-detail__name {
  margin: 0;
  font-weight: 700;
  font-size: 1.15rem;
}
.product-detail__price {
  margin: 0.35rem 0;
  font-weight: 700;
  font-size: 1.15rem;
}
.product-detail__desc {
  margin: 0.35rem 0;
  color: #475569;
  white-space: pre-wrap;
}
.product-detail__stock {
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

/* 購入内容確認 */
.confirm {
  margin: 1.25rem 0;
}
.confirm__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid #e2e8f0;
}
.confirm__row dt {
  color: #64748b;
  margin: 0;
}
.confirm__row dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.confirm__row--total {
  border-top: 2px solid #cbd5e1;
  font-size: 1.1rem;
}
.confirm__row--total dd {
  color: #2563eb;
  font-weight: 700;
}
.confirm__note {
  padding: 0.75rem 1rem;
  background: #f1f5f9;
  border-radius: 8px;
  color: #475569;
  font-size: 0.9rem;
}

/* ===== 注文・支払い =====
   白ベース・スマホ優先。状態は色分けバッジ、注文一覧はカード形式。 */

/* 入金状態バッジ */
.badge--pending { background: #d97706; }
.badge--paid { background: #16a34a; }
.badge--cancelled { background: #94a3b8; }
.badge--expired { background: #64748b; }   /* 期限切れ（自動キャンセル） */
.badge--requested { background: #7c3aed; }      /* キャンセル申請中 */
.badge--refund_pending { background: #b45309; } /* 返金待ち（承認済み） */
.badge--refunded { background: #78716c; }       /* 返金済み（キャンセル成立） */

/* キャンセル申請一覧 */
.cancel-req-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.cancel-req { border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; padding: 0.9rem 1rem; }
.cancel-req__main { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cancel-req__number { font-weight: 700; }
.cancel-req__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.35rem;
  font-size: 0.85rem; color: var(--color-text-muted, #6b7280); }
.cancel-req__reason { margin: 0.4rem 0 0; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.cancel-req__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

/* 支払い方法の大きな選択カード */
.pay-options {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.pay-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
}
.pay-option:hover {
  border-color: #cbd5e1;
}
.pay-option input {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}
.pay-option:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}
.pay-option__body {
  display: flex;
  flex-direction: column;
}
.pay-option__title {
  font-weight: 700;
}
.pay-option__note {
  color: #64748b;
  font-size: 0.85rem;
}

/* 支払い案内 */
.pay-guide {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  background: #f1f5f9;
  border-radius: 8px;
  color: #334155;
  font-size: 0.95rem;
}

/* 注文番号を大きく表示 */
.order-number {
  margin: 1rem 0;
  padding: 1rem;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}
.order-number__label {
  display: block;
  color: #64748b;
  font-size: 0.85rem;
}
.order-number__value {
  display: block;
  margin-top: 0.25rem;
  font-size: clamp(1.35rem, 6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #1f2937;
  word-break: break-all;
}

/* 注文一覧（スマホでも見やすいカード） */
.order-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.order-card {
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.order-card__number {
  font-weight: 700;
  color: #2563eb;
  word-break: break-all;
}
.order-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.order-card__amount {
  font-weight: 700;
}
.order-card__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
  color: #64748b;
  font-size: 0.85rem;
}

/* 詳細画面のセクション見出し */
.section-title {
  margin: 1.25rem 0 0.25rem;
  font-size: 1.05rem;
  color: #334155;
}

/* ===== 支払い設定画面 =====
   白ベース・スマホ優先。トグルスイッチで各支払い方法の入力を出し分ける。 */

/* 支払い方法ごとの設定ブロック */
.pay-setting {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

/* 利用有無のスイッチ（チェックボックス） */
.switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.switch__input {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
}
.switch__label {
  font-weight: 700;
  color: #1f2937;
}

/* スイッチ ON で表示する入力群 */
.pay-setting__fields {
  margin-top: 0.75rem;
}
/* JS 無効時は常に表示。JS 有効時は hidden 属性で開閉する */
.pay-setting__fields[hidden] {
  display: none;
}

/* ===== 支払い案内（完了画面・注文詳細・プレビュー共通） ===== */
.pay-guide__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
}
.pay-guide__label {
  color: #64748b;
}
.pay-guide__value {
  font-weight: 700;
  text-align: right;
}
/* スナップショット本文。改行を保持し項目ごとに読める形で表示する */
.pay-guide__body {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e2e8f0;
  white-space: pre-line;
  word-break: break-word;
  line-height: 1.7;
}

/* ===== 受付（QRチェックイン） ===== */
/* チケット状態バッジ（未使用=要対応の琥珀 / 使用済み=完了の緑 / 無効=グレー） */
.badge--ticket-unused { background: #d97706; }
.badge--ticket-used { background: #16a34a; }
.badge--ticket-void { background: #94a3b8; }

/* 受付中のイベントを常に上部に固定表示（共通ヘッダーの直下に貼り付く） */
.reception-bar {
  position: sticky;
  top: var(--header-h, 56px);
  z-index: 30;
  background: #16a34a;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 0.6rem 1rem;
  letter-spacing: 0.02em;
}
.card--has-reception-bar { margin-top: 0.75rem; }

/* 受付状態バナー */
.reception-status {
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.reception-status--on { background: rgba(22, 163, 74, 0.15); color: #15803d; border: 1px solid #16a34a; }
.reception-status--pre { background: rgba(217, 119, 6, 0.12); color: #b45309; border: 1px solid #f59e0b; }
.reception-status--off { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

.reception-event { margin-bottom: 1rem; }
.reception-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }

.link-button {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}
.link-button:hover { background: rgba(56, 189, 248, 0.25); }

.form__button--primary { background: #16a34a; }
.form__button--primary:hover { background: #15803d; }

/* --- QRチケット表示（購入者の注文詳細） --- */
.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.qr__frame {
  background: #ffffff;
  padding: 12px;
  border-radius: 12px;
  line-height: 0;                 /* 画像下の余白を消す */
  max-width: 100%;
}
.qr__img {
  width: 220px;
  height: 220px;
  max-width: 100%;
  height: auto;
  display: block;
}
.qr__zoom {
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-weight: 700;
  cursor: pointer;
}
.qr__zoom:hover { background: rgba(56, 189, 248, 0.15); }
.qr__status { margin: 0.25rem 0 0; }
.qr__used-at { color: #94a3b8; margin: 0; }

/* --- QR拡大オーバーレイ（JSで表示） --- */
.qr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  z-index: 1000;
}
.qr-overlay__img {
  background: #ffffff;
  padding: 16px;
  border-radius: 16px;
  width: min(80vw, 80vh, 420px);
  height: auto;
}
.qr-overlay__hint { color: #f8fafc; font-size: 0.9rem; }

/* --- 受付統計（管理画面） --- */
.checkin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.checkin-stat {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 0.9rem 0.5rem;
  text-align: center;
}
.checkin-stat--rate { background: rgba(56, 189, 248, 0.15); }
.checkin-stat__value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}
.checkin-stat__label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* --- 受付検索フォーム --- */
.checkin-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}
.checkin-search .form__input { flex: 1 1 220px; }

/* --- 受付結果 --- */
.checkin-result {
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 0.75rem 0;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.checkin-result--unused { border-color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.checkin-result--used { border-color: #dc2626; background: rgba(220, 38, 38, 0.1); }
.checkin-result--none { border-color: #94a3b8; }
.checkin-result__headline {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
}
.checkin-result__note { color: #fca5a5; font-weight: 700; }

/* レスポンシブ: 狭幅では統計を2列に */
@media (max-width: 480px) {
  .checkin-stats { grid-template-columns: repeat(2, 1fr); }
  .checkin-search .form__button { width: 100%; }
}

/* ===== 運営ダッシュボード（owner / organizer） =====
   白ベース・スマホ最優先・カードUI。数字を大きく、一目で状況が分かる構成。 */

.dashboard__scope {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 700;
}

/* セクション見出し */
.dash-heading {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.05rem;
  color: #334155;
}

/* ショートカット（タップで対象画面へ移動する大きなカード） */
.dash-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 1.25rem 0 0.5rem;
}
.dash-shortcut {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dash-shortcut:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.dash-shortcut__title {
  font-weight: 700;
  font-size: 1rem;
  color: #1f2937;
}
.dash-shortcut__note {
  color: #64748b;
  font-size: 0.8rem;
}

/* 主要指標カード（大きな数字） */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.dash-stat {
  padding: 1rem 0.5rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  text-align: center;
}
.dash-stat--good { background: #f0fdf4; border-color: #dcfce7; }
.dash-stat--warn { background: #fffbeb; border-color: #fef3c7; }
.dash-stat__value {
  display: block;
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: #0f172a;
}
.dash-stat__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #64748b;
}

/* 金額カード（売上の状況）。桁数が多いためカウント用より小さめの文字にして、
   3カラムのままスマホでもはみ出さないようにする。 */
.dash-stats--money .dash-stat__value {
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.dash-note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

/* 売上合計（最重要指標を大きく強調） */
.dash-sales-total {
  margin: 1.5rem 0 0.5rem;
  padding: 1.25rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  text-align: center;
}
.dash-sales-total__label {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
}
.dash-sales-total__value {
  display: block;
  margin-top: 0.3rem;
  font-size: clamp(1.9rem, 9vw, 2.75rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* 一覧（イベント別売上・最新注文・最新イベント共通） */
.dash-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}
.dash-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;                 /* 長いタイトルを省略できるように */
  text-decoration: none;
  color: #1f2937;
  flex: 1 1 auto;
}
.dash-row__main:hover .dash-row__title { text-decoration: underline; }
.dash-row__title {
  font-weight: 700;
  color: #2563eb;
  word-break: break-word;
}
.dash-row__sub {
  color: #64748b;
  font-size: 0.82rem;
}
.dash-row__amount {
  flex: none;
  text-align: right;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
}
.dash-row__amount .badge {
  margin-left: 0.35rem;
  vertical-align: middle;
}
.dash-empty {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

/* レスポンシブ: 3列指標は狭幅でも3列を維持（数字を優先）。
   ショートカットは極狭幅で1列に。 */
@media (max-width: 380px) {
  .dash-shortcuts { grid-template-columns: 1fr; }
}

/* ===================== 顧客管理（CRM） ===================== */
/* 顧客ランクのバッジ色（既存 .badge を継承。ランクが一目で分かる配色）。 */
.badge--rank-normal { background: #94a3b8; }   /* 通常 */
.badge--rank-repeater { background: #2563eb; } /* リピーター */
.badge--rank-vip { background: #d97706; }      /* VIP */

/* --- 顧客一覧（スマホ優先のカードUI・白ベース） --- */
.customer-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.customer-card {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.customer-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.customer-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.customer-card__name {
  font-weight: 700;
  color: #1f2937;
  word-break: break-word;
}
.customer-card__contact {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  color: #64748b;
  font-size: 0.82rem;
  word-break: break-all;
}
.customer-card__stats {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.customer-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: center;
}
.customer-card__stat-value {
  font-weight: 700;
  color: #1f2937;
  font-size: 0.95rem;
}
.customer-card__stat-label {
  color: #64748b;
  font-size: 0.72rem;
}

/* --- 顧客詳細 --- */
.customer-detail__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.customer-info {
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.4rem;
}
.customer-info__row {
  display: flex;
  gap: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 0.4rem;
}
.customer-info__row dt {
  flex: 0 0 6.5rem;
  color: #64748b;
  font-size: 0.85rem;
}
.customer-info__row dd {
  margin: 0;
  color: #1f2937;
  word-break: break-all;
}
.customer-memo {
  resize: vertical;
  min-height: 5.5rem;
  font-family: inherit;
}

/* ===================== 発送プライバシー ===================== */
/* 商品フォームの必須情報チェックボックス群 */
.form__fieldset {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
.form__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  color: #1f2937;
}
.form__check input {
  width: 1.15rem;
  height: 1.15rem;
}
/* 管理者のみに見せる内部情報（発送元住所など）。購入者画面では使わない */
.notice-internal {
  margin: 0.5rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
}
.notice-internal__label {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 0.82rem;
  color: #b45309;
}

/* ===================== 購入条件 ===================== */
/* 商品フォームの購入条件セクション。詳細欄はチェックで開閉（JS無効時は常時表示）。 */
.req-fieldset__legend {
  font-size: 1.05rem;
}
.req-detail {
  margin: 0.25rem 0 0.5rem 1.65rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid #e2e8f0;
}
/* JS 有効時は hidden 属性で開閉。JS 無効時は常に表示され入力・送信できる */
.req-detail[hidden] {
  display: none;
}

/* 購入画面に表示する購入条件・注意事項ブロック（購入者向け） */
.requirements {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.requirements__block + .requirements__block {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e2e8f0;
}
.requirements__title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2937;
}
.requirements__list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.7;
  color: #1f2937;
}
/* 注意事項本文は改行を保持して項目ごとに読める形で表示する */
.requirements__text {
  margin: 0;
  white-space: pre-line;
  word-break: break-word;
  line-height: 1.7;
  color: #1f2937;
}
/* 購入画面の同意チェック（購入条件がある商品のみ表示） */
.form__agreement {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
}

/* 各種書類（請求書・領収書・QR）のダウンロードボタン群。
   スマホでも押しやすいよう縦積み・全幅、PCでは折り返して横並びにする。 */
.doc-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0 0.25rem;
}
.doc-download {
  flex: 1 1 220px;
  padding: 0.8rem 1rem;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: #2563eb;
  border-radius: 8px;
  text-decoration: none;
}
.doc-download:hover {
  background: #1d4ed8;
}

/* ===================== 公開前の警告・注意ブロック ===================== */
/* 支払い設定未完了などの警告（イベント作成・編集画面）。目立たせつつ操作は妨げない。 */
.notice {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.notice--warning {
  border-color: #f59e0b;
  background: #fffbeb;
}
.notice__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: #b45309;
}
.notice__list {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
  line-height: 1.7;
  color: #1f2937;
}

/* 未入金であることを購入者へ強く案内する完了画面のコールアウト（銀行振込）。 */
.pay-callout {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  background: #fffbeb;
}
.pay-callout__title {
  margin: 0;
  font-weight: 700;
  color: #b45309;
}
/* 注文確認URLの保存・ブックマーク案内 */
.save-hint {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px dashed #94a3b8;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  line-height: 1.7;
}
.save-hint__title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: #1f2937;
}

/* 公開トップページ等の購入者向けスタイルは tokens.css / components.css /
   customer.css へ移設（body.page-customer 配下にスコープ）。管理画面用の
   ダークテーマは本ファイルで維持する。 */

/* ===== 注文詳細の明細・受付状況（管理画面・複数商品/複数QR対応） ===== */
.order-items { list-style: none; margin: 0.75rem 0; padding: 0; }
.order-item { padding: 0.6rem 0; border-top: 1px solid #e2e8f0; }
.order-item__head {
  display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap;
}
.order-item__name { font-weight: 600; word-break: break-word; }
.order-item__type {
  font-size: 0.8rem; color: #3c477f; background: #eef1fa;
  padding: 2px 0.5rem; border-radius: 999px;
}
.order-item__calc {
  display: flex; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.25rem; color: #475569; font-size: 0.9rem;
}
.order-item__subtotal { font-weight: 600; color: #1f2937; }
.order-item__recv { margin: 0.25rem 0 0; color: #475569; font-size: 0.9rem; }

.ticket-status-list { list-style: none; margin: 0.5rem 0; padding: 0; }
.ticket-status {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  padding: 0.5rem 0; border-top: 1px solid #e2e8f0;
}
.ticket-status__for { font-weight: 600; word-break: break-word; }
.ticket-status__used { color: #475569; font-size: 0.85rem; }

/* ===== 商品サムネイル（管理画面・1:1）。商品一覧・注文明細で表示 ===== */
.product-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f3f8;
  border: 1px solid #e2e8f0;
}
.product-thumb--sm { width: 56px; border-radius: 8px; }
.product-thumb--md { width: 96px; }
.product-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb--placeholder {
  background: radial-gradient(120% 120% at 70% 22%, #eef1fa, #f1f3f8);
  color: #4c589c;
}
.product-thumb__moon { width: 44%; height: 44%; opacity: 0.7; }

/* 商品一覧（管理）：サムネイル + 内容 */
.product-card__row { display: flex; gap: 0.9rem; align-items: flex-start; }
.product-card__content { flex: 1 1 auto; min-width: 0; }

/* 注文明細（管理・注文詳細）：サムネイル + 内容 */
.order-item { display: flex; gap: 0.75rem; align-items: flex-start; }
.order-item__body { flex: 1 1 auto; min-width: 0; }

/* 商品管理ページの主要操作（「商品を追加」／「イベント情報を編集」）。
   同じ視覚レベル・同じ大きさで並べ、役割の混同を防ぐ。
   スマホでは縦積み・全幅にして押しやすくする（タップ領域 48px 以上）。 */
.manage-actions--primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
}
.manage-actions--primary .form__button {
  /* .form__button は既定で width:100%。行内では横並びに均等配置する（PCの見た目維持） */
  width: auto;
  flex: 1 1 220px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (max-width: 480px) {
  /* スマホは縦積み・全幅で押しやすく */
  .manage-actions--primary { flex-direction: column; }
  .manage-actions--primary .form__button { width: 100%; flex: 1 1 auto; }
}

/* =============================================================================
   運営銀行口座 一覧テーブル（運営口座一覧画面 専用）。
   ページ全体は横スクロールさせず、テーブル部分だけ横スクロール可能にする。
   列が極端に潰れないよう min-width を設定し、操作列はスマホ幅で折り返す。
   ※ このスタイルは専用クラスにスコープし、他画面へ副作用を与えない。
   ============================================================================= */
.pba-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;                 /* テーブルだけ横スクロール（ページ本体は横に伸びない） */
  -webkit-overflow-scrolling: touch;
}
.platform-bank-accounts-table {
  width: 100%;
  /* 列潰れ防止の下限。管理画面の本文最大幅(約592px)以下にし、PCでは幅いっぱいに収めて
     不要な横スクロールを出さない。これ未満の幅（スマホ）ではラッパー内で横スクロールする。 */
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.platform-bank-accounts-table th,
.platform-bank-accounts-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(248, 250, 252, 0.14);
  white-space: nowrap;
}
.platform-bank-accounts-table th {
  font-weight: 600;
  color: rgba(248, 250, 252, 0.75);
  border-bottom-color: rgba(248, 250, 252, 0.28);
}
/* 操作セルは折り返しを許可し、ボタンが画面外へはみ出さないようにする */
.platform-bank-accounts-table .pba-cell-actions { white-space: normal; }
.pba-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.pba-action-form { margin: 0; display: inline; }
/* スマホ幅では操作を縦並びにして重なり・はみ出しを防ぐ */
@media (max-width: 480px) {
  .pba-actions { flex-direction: column; align-items: stretch; }
  .pba-actions .btn { width: 100%; }
}

/* ============================================================
   販売形式の選択（新規作成の最初の画面）
   スマホでも押しやすい大きなカード。カード全体がタップ領域。
   ============================================================ */
.type-choice {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
}

/* 管理画面カードは白ベース（.card）のため、.manage-panel と同じライト配色に合わせる */
.type-choice__card {
  display: block;
  padding: 1.25rem;
  min-height: 120px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #1f2937;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.type-choice__card:hover,
.type-choice__card:focus-visible {
  border-color: #2563eb;
  background: #eff6ff;
}

.type-choice__icon {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.type-choice__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #1f2937;
}
.type-choice__lead {
  display: block;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #1f2937;
}
.type-choice__meta {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: #64748b;
}

/* 販売期間（期間指定 / 販売期限なし） */
.sales-period {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  color: #1f2937;
}
.sales-period > .form__label {
  padding: 0;
}
.sales-period__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
}
.sales-period__mode {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;   /* スマホで押しやすいタップ領域 */
  cursor: pointer;
}