/* =============================================================================
   SELUNEA 共通コンポーネント（購入者向け）
   -----------------------------------------------------------------------------
   ボタン・フォーム・カード・バッジ・ヘッダー・フッター・ステップ・通知など、
   全画面で再利用する部品。すべて body.page-customer 配下にスコープし、
   既存の管理画面（ダークテーマ）へ影響しないようにする。
   ============================================================================= */

/* ---------------------------------------------------------------------------
   ベース：page-customer のレイアウト土台（既存 body の中央寄せダークを上書き）
   --------------------------------------------------------------------------- */
body.page-customer {
  display: block;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* base.html の <main class="container"> を全幅ブロックに戻す（中央寄せflexを解除） */
body.page-customer .container {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: initial;
  justify-content: initial;
}

/* 本文中のリンク色。:where() で詳細度を要素相当(0,0,1)に抑え、
   ボタン・CTA等のコンポーネント（.btn--primary 等 = 0,1,0）の文字色が
   必ず勝つようにする。これを普通の `.page-customer a`(0,1,1) にすると
   a要素の主要ボタン文字色を奪い、ブランド地にブランド文字＝不可視になる。 */
:where(.page-customer) a {
  color: var(--color-brand);
}

.page-customer :focus-visible {
  outline: 3px solid var(--color-brand-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 横スクロール防止（画像・表・コード等がはみ出さない） */
.page-customer img,
.page-customer svg {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   コンテンツ幅ラッパ
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  margin: 0 auto;
  /* 購入者画面共通の左右余白（呼吸できる余白）。トークンで統一（24px）。
     画面ごとに個別の padding を足さず、この共通ラッパで左右余白を一元管理する。 */
  padding: 0 var(--space-5);
}
/* コンテンツ列幅は従来どおり（左右余白ぶんを max-width に足して列幅を維持）。
   余白トークン(space-5=24px)の左右2つぶんを加算する。 */
.wrap--wide { max-width: calc(var(--width-wide) + var(--space-5) * 2); }
.wrap--md { max-width: calc(var(--width-md) + var(--space-5) * 2); }
.wrap--narrow { max-width: calc(var(--width-narrow) + var(--space-5) * 2); }

/* ページ本文の縦余白。左右は共通ラッパ .wrap の余白を活かすため、縦のみを指定する
   （padding ショートハンドで左右を 0 に上書きしない）。 */
.page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

/* ---------------------------------------------------------------------------
   ヘッダー（購入者共通・auth対応・スマホメニュー）
   --------------------------------------------------------------------------- */
.site-header {
  /* ヘッダーを全ページで完全に同一に描画するための自己完結トークン。
     購入者トークンは tokens.css で body.page-customer 配下にスコープされているため、
     管理画面（ダークテーマ）ではヘッダーの var(...) が未定義になり崩れていた。
     そこで、ヘッダーが使う購入者トークンの実値をヘッダー自身に定義し、その子孫
     （ロゴ・メニュー・ボタン）へ継承させる。ページ本文には影響しない（ヘッダー配下のみ）。
     値は tokens.css の body.page-customer と一致させており、トップページの見た目は不変。 */
  --color-text: #17191f;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f3f8;
  --color-border: #e4e7ec;
  --color-border-strong: #d3d8e0;
  --color-brand: #4c589c;
  --color-brand-hover: #3e4a85;
  --color-brand-contrast: #ffffff;
  --color-brand-ring: rgba(76, 88, 156, 0.32);
  --shadow-lg: 0 14px 40px rgba(20, 25, 40, 0.10);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-pill: 980px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --text-sm: 0.875rem;
  --tap-min: 44px;
  --width-wide: 1120px;

  position: sticky;
  top: 0;
  z-index: 50;
  /* 全ページ共通で不透明の白。半透明のままだと管理画面の濃紺ボディ上で灰色に見えるため
     不透明にして、どのページでも同じ白ヘッダーにする。 */
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  max-width: calc(var(--width-wide) + 40px);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
}
/* ロゴ：SELUNEA は文字間を広げて上品に */
.site-header__logo {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-text);
  text-decoration: none;
  padding-right: 0.22em; /* letter-spacing の右余白ぶんを補正 */
  white-space: nowrap;
}
.site-header__logo:hover { color: var(--color-brand); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link:hover { background: var(--color-surface-soft); }
.site-nav__link--cta {
  background: var(--color-brand);
  color: var(--color-brand-contrast);
}
.site-nav__link--cta:hover { background: var(--color-brand-hover); }
/* ヘッダー内のログアウトはPOST+CSRF。見た目はテキストリンクに合わせる */
.site-nav__logout { margin: 0; }
.site-nav__logout-btn {
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.site-nav__logout-btn:hover { background: var(--color-surface-soft); }

/* ハンバーガー（スマホのみ表示） */
.site-nav__toggle {
  display: none;
  width: var(--tap-min);
  height: var(--tap-min);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.site-nav__toggle-bar,
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav__toggle-bar::before { content: ""; position: absolute; top: -6px; }
.site-nav__toggle-bar::after { content: ""; position: absolute; top: 6px; }

@media (max-width: 640px) {
  .site-nav__toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    right: 12px;
    left: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }
  /* JS 有効時のみ折りたたむ（無効時は展開表示のまま操作できる） */
  .site-nav.site-nav--collapsed { display: none; }
  .site-nav__link,
  .site-nav__logout-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   フッター（購入者共通）
   --------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.site-footer__inner {
  max-width: calc(var(--width-wide) + 40px);
  margin: 0 auto;
  padding: var(--space-6) 20px var(--space-7);
  text-align: center;
}
.site-footer__brand {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-text);
  padding-right: 0.2em;
}
.site-footer__nav {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.site-footer__link {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.site-footer__link:hover { color: var(--color-text); text-decoration: underline; }
/* 未実装リンクは「準備中」と分かる無効表示にする（実装済みに見せない） */
.site-footer__link--pending {
  color: var(--color-text-faint);
  cursor: not-allowed;
}
.site-footer__link--pending:hover { text-decoration: none; color: var(--color-text-faint); }
.site-footer__copy {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ---------------------------------------------------------------------------
   見出し・セクション
   --------------------------------------------------------------------------- */
.page-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.page-lead {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}
.section-heading {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   サーフェス（カード）
   --------------------------------------------------------------------------- */
.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.surface + .surface { margin-top: var(--space-4); }
@media (min-width: 640px) {
  .surface { padding: var(--space-6); }
}
.surface--soft {
  background: var(--color-surface-soft);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   ボタン（主要=塗り / 補助=白+枠 / 弱い=テキスト / 危険=赤）
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-brand);
  color: var(--color-brand-contrast);
}
.btn--primary:hover { background: var(--color-brand-hover); }

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--secondary:hover { background: var(--color-surface-soft); }

.btn--ghost {
  background: transparent;
  color: var(--color-brand);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  font-weight: 500;
}
.btn--ghost:hover { background: var(--color-brand-soft); }

.btn--danger {
  background: var(--color-danger);
  color: #fff;
}
.btn--danger:hover { background: var(--color-danger-text); }

/* 主要操作（スマホで押しやすい大きめ・全幅） */
.btn--lg {
  min-height: var(--btn-primary-h);
  font-size: var(--text-lg);
  border-radius: var(--radius-md);
}
.btn--block { width: 100%; }

.btn:disabled,
.btn--disabled {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
  /* 無効でもラベルは読めるようにする（faint だとコントラスト不足）。
     押せないことは背景・カーソル・文言(売り切れ等)で伝える。 */
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover,
.btn--disabled:hover { background: var(--color-surface-soft); transform: none; }

/* テキストリンク型の戻る・キャンセル */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  color: var(--color-brand);
  text-decoration: none;
  font-size: var(--text-sm);
}
.textlink:hover { text-decoration: underline; }

/* ボタンを縦に積むアクション列（スマホ最適・下端の主要操作を見失わせない） */
.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.actions--center { align-items: center; }

/* ---------------------------------------------------------------------------
   フォーム
   --------------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.field__req,
.field__opt {
  margin-left: var(--space-2);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  vertical-align: middle;
}
.field__req { background: var(--color-danger-soft); color: var(--color-danger-text); }
.field__opt { background: var(--color-surface-soft); color: var(--color-text-muted); }

.input,
.textarea,
.select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-text-faint); }

.field__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.field__error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-danger-text);
}
/* エラーのある入力欄を枠色でも示す（色だけに依存しない：文言も表示） */
.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select { border-color: var(--color-danger); }

/* パスワード表示切替つき入力 */
.input-reveal { position: relative; }
.input-reveal .input { padding-right: 68px; }
.input-reveal__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
}
.input-reveal__toggle:hover { background: var(--color-surface-soft); }

/* チェック/ラジオ（大きなタップ領域） */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.choice input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--color-brand);
}
.choice__text { font-size: var(--text-base); }

/* ---------------------------------------------------------------------------
   支払い方法の選択カード（カード全体をタップ可能・選択状態を色/枠/印で明示）
   --------------------------------------------------------------------------- */
.pay-methods {
  display: grid;
  gap: var(--space-3);
}
.pay-method {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pay-method:hover { border-color: var(--color-border-strong); }
.pay-method__radio {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--color-brand);
}
.pay-method__body { display: flex; flex-direction: column; gap: 2px; }
.pay-method__title { font-weight: 600; }
.pay-method__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.pay-method:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}
.pay-method:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

/* ---------------------------------------------------------------------------
   フラッシュメッセージ（base.html 共有マークアップを page-customer で上書き）
   --------------------------------------------------------------------------- */
.page-customer .flash {
  list-style: none;
  max-width: calc(var(--width-md) + 40px);
  margin: var(--space-4) auto 0;
  padding: 0 20px;
}
.page-customer .flash__item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}
.page-customer .flash__item--error,
.page-customer .flash__item--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
  border-color: rgba(192, 57, 43, 0.25);
}
.page-customer .flash__item--success {
  background: var(--color-success-soft);
  color: var(--color-success-text);
  border-color: rgba(30, 135, 75, 0.25);
}
.page-customer .flash__item--info,
.page-customer .flash__item--message {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  border-color: rgba(76, 88, 156, 0.22);
}
.page-customer .flash__item--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border-color: rgba(184, 121, 12, 0.25);
}

/* ---------------------------------------------------------------------------
   バッジ（page-customer 内は淡い面＋濃い文字のピル。色＋文言で状態を伝える）
   --------------------------------------------------------------------------- */
.page-customer .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
}
/* 状態色ルール：未入金=黄 / 入金済み=緑 / キャンセル=赤 / 受付=青紫 */
.page-customer .badge--pending { background: var(--color-warning-soft); color: var(--color-warning-text); }
.page-customer .badge--paid { background: var(--color-success-soft); color: var(--color-success-text); }
.page-customer .badge--cancelled { background: var(--color-danger-soft); color: var(--color-danger-text); }
.page-customer .badge--expired { background: var(--color-danger-soft); color: var(--color-danger-text); }
.page-customer .badge--requested { background: var(--color-warning-soft); color: var(--color-warning-text); }
.page-customer .badge--refund_pending { background: var(--color-warning-soft); color: var(--color-warning-text); }
.page-customer .badge--refunded { background: var(--color-danger-soft); color: var(--color-danger-text); }
.page-customer .badge--soldout { background: var(--color-danger-soft); color: var(--color-danger-text); }
.page-customer .badge--ticket-unused { background: var(--color-warning-soft); color: var(--color-warning-text); }
.page-customer .badge--ticket-used { background: var(--color-brand-soft); color: var(--color-brand-strong); }

/* ---------------------------------------------------------------------------
   購入ステップ表示（現在地を示す。処理順は変えない・表示のみ）
   --------------------------------------------------------------------------- */
.steps {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-xs);
}
.steps__label { white-space: nowrap; }
.steps__sep {
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--color-border-strong);
}
.steps__item--current { color: var(--color-brand-strong); font-weight: 600; }
.steps__item--current .steps__num {
  background: var(--color-brand);
  color: var(--color-brand-contrast);
}
.steps__item--done .steps__num {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

/* ---------------------------------------------------------------------------
   コールアウト（注意・案内）
   --------------------------------------------------------------------------- */
.callout {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.callout__title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}
.callout p { margin: var(--space-1) 0 0; }
.callout--warning {
  background: var(--color-warning-soft);
  border-color: rgba(184, 121, 12, 0.3);
}
.callout--warning .callout__title { color: var(--color-warning-text); }
.callout--info {
  background: var(--color-brand-soft);
  border-color: rgba(76, 88, 156, 0.22);
}
.callout--info .callout__title { color: var(--color-brand-strong); }
.callout--success {
  background: var(--color-success-soft);
  border-color: rgba(30, 135, 75, 0.25);
}
.callout--success .callout__title { color: var(--color-success-text); }

/* ---------------------------------------------------------------------------
   明細（イベント／商品／金額のサマリ）
   --------------------------------------------------------------------------- */
.summary { margin: 0; }
.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.summary__row:first-child { border-top: none; }
.summary__row dt,
.summary__label { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.summary__row dd,
.summary__value { margin: 0; text-align: right; font-weight: 500; word-break: break-word; }
/* 合計は視線が集まるよう大きく強調 */
.summary__row--total {
  margin-top: var(--space-2);
  border-top: 2px solid var(--color-border-strong);
  padding-top: var(--space-4);
}
.summary__row--total .summary__label,
.summary__row--total dt { color: var(--color-text); font-size: var(--text-base); font-weight: 600; }
.summary__row--total .summary__value,
.summary__row--total dd {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-brand-strong);
}

/* ---------------------------------------------------------------------------
   注文番号（大きく表示）
   --------------------------------------------------------------------------- */
/* ※ .order-number は legacy(style.css)でも定義され管理画面が使用するため、
   購入者向けの見た目は必ず .page-customer 配下にスコープする（管理画面へ非干渉）。 */
.page-customer .order-number {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  text-align: center;
  background: var(--color-surface-soft);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}
.page-customer .order-number__label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.page-customer .order-number__value {
  display: block;
  margin-top: var(--space-1);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
   書類ダウンロード（請求書・領収書・QR）。何がDLできるか一目で分かる明確なボタン
   --------------------------------------------------------------------------- */
.doc-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 560px) {
  .doc-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.doc-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  min-height: var(--tap-min);
}
.doc-btn:hover { background: var(--color-surface-soft); border-color: var(--color-brand); }
.doc-btn__icon { flex: none; color: var(--color-brand); }

/* ---------------------------------------------------------------------------
   月モチーフ（幻想感20%：淡い月光・月の弧。強い発光やグラデは使わない）
   --------------------------------------------------------------------------- */
.moon-glow { position: relative; overflow: hidden; }
.moon-glow > * { position: relative; z-index: 1; }
.moon-glow::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(76, 88, 156, 0.10), rgba(76, 88, 156, 0.03) 55%, transparent 70%);
  pointer-events: none;
}

/* 画像なしプレースホルダーに使う薄い月の弧 */
.moon-arc {
  width: 56px;
  height: 56px;
  color: var(--color-brand);
  opacity: 0.28;
}

/* ---------------------------------------------------------------------------
   モーション配慮
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-customer *,
  .page-customer *::before,
  .page-customer *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}