/*
 * O-賽銭 寺社向けダッシュボード — 共通スタイル
 * 既存 dashboard.html 等の配色（teal-500: #00b8a9）を踏襲しつつ、
 * カード影・角丸・余白を整理してモダンな見た目に更新する。
 * PC・タブレットのみを対象とし、スマートフォン向けレイアウトは作らない。
 */
[x-cloak] { display: none !important; }

/* ── カラーパレット（3案を data-palette で全体切替） ──
   既定=案1「静」。data-palette="wa"=案2「和」、data-palette="kaku"=案3「格」。
   ティールは主操作・選択に限定、金は補助のみ、という方針を各案で維持する。 */
:root {
  --pal-brand: #00b8a9;      /* 主操作 */
  --pal-deep: #0b5e57;       /* ロゴ・見出しの濃色（案1提案値） */
  --pal-page: #f5f8f7;       /* 画面地 */
  --pal-surface: #ffffff;    /* カード面 */
  --pal-border: #e4eeeb;     /* 罫線 */
  --pal-side: #edf6f4;       /* サイド地 */
  --pal-side-hover: #e0f0ec;
  --pal-side-active: #d6ebe7;
  --pal-side-active-ink: #0b5e57;
  --pal-side-ink: #5d6f6c;
  --pal-gold: #b8925a;       /* 補助の金（要対応の強調のみ） */
}
:root[data-palette="wa"] {
  --pal-brand: #00a99b; --pal-deep: #0b5a54; --pal-page: #faf7f1; --pal-surface: #fffefb;
  --pal-border: #eae4d8; --pal-side: #f2ede2; --pal-side-hover: #ece5d6; --pal-side-active: #e6ddc9;
  --pal-side-active-ink: #0b5a54; --pal-side-ink: #6f6a5f; --pal-gold: #a9822f;
}
:root[data-palette="kaku"] {
  --pal-brand: #0e756c; --pal-deep: #0b5e57; --pal-page: #fbfcfc; --pal-surface: #ffffff;
  --pal-border: #e6ecea; --pal-side: #ffffff; --pal-side-hover: #f2f7f6; --pal-side-active: #eef6f4;
  --pal-side-active-ink: #0b5e57; --pal-side-ink: #5d6f6c; --pal-gold: #c2a878;
}

.temple-app { background-color: var(--pal-page); }
.temple-brand-ink { color: var(--pal-deep); }

body {
  /* OS標準フォント任せだと環境によって見た目が大きくばらつく（特にLinux/一部Windows環境）ため、
     Webフォント(Noto Sans JP)を明示的に読み込み、全環境で同じ見た目になるようにする。
     読み込み前後のちらつきを避けるため、質の近いOS標準フォントをフォールバックに残す。 */
  font-family: "Noto Sans JP", "Hiragino Sans", -apple-system, BlinkMacSystemFont,
    "Yu Gothic UI", "Yu Gothic", "Segoe UI", Meiryo, sans-serif;
  font-weight: 400;
  min-width: 960px; /* スマートフォン非対応。PC・タブレット幅を前提とする */
  -webkit-font-smoothing: antialiased;
}

/* 申込PCからQRで引き継ぐ書類撮影画面だけはスマートフォン専用。 */
body.registry-mobile-page {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
}

/* SPA外の完了画面はスマートフォンからも到達するため、PC前提の最小幅を解除する。 */
body.temple-responsive-page {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
}

.temple-shell {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.temple-card {
  background-color: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: 1rem;
  /* 単層の薄い影は平板に見えるため、近距離＋遠距離の2層シャドウで
     奥行きを出す。ティールの反射をごく僅かに混ぜてブランド感を持たせる。 */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 28px -16px rgba(15, 23, 42, 0.10);
}

/* ── 共通フォーム部品 ──
   招待・所有者変更を含む設定画面で、入力欄の形とフォーカス表現を統一する。 */
.temple-input {
  box-sizing: border-box;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  color: #1f2937;
  background-color: var(--pal-surface);
  border: 1px solid color-mix(in srgb, #64748b 28%, var(--pal-border));
  border-radius: 0.5rem;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
/* select系はTailwind Forms pluginが矢印アイコン用に padding-right:2.5rem を
   確保しているが、.temple-input の padding 一括指定が上書きしてしまい、
   矢印アイコンが文字と重なっていた。select だけ右padding を戻す。 */
select.temple-input {
  padding-right: 2.25rem;
  background-size: 1.25em 1.25em;
}
/* 金額欄: 桁の位取りを揃えるため右寄せ、末尾に「円」を表示できる余白を確保する。 */
input.temple-input[type="number"],
input.temple-input.temple-input-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 日付・件数・単位選択など、入力想定文字数が短い項目を
   グリッド列いっぱいに間延びさせないための上限幅。 */
.temple-input-compact { max-width: 11.5rem; }
.temple-amount-field { position: relative; }
.temple-amount-field .temple-input { padding-right: 2.25rem; width: 100%; }
.temple-amount-field .temple-amount-suffix {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: #7c8a86;
  pointer-events: none;
}
/* 金額と通貨単位を別セルにし、桁数にかかわらず値と「円」が重ならないようにする。 */
.temple-currency-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.temple-currency-field .temple-currency-input {
  width: 100%;
  min-width: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}
.temple-currency-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 0.75rem;
  color: #64748b;
  background-color: #f8fafc;
  border: 1px solid color-mix(in srgb, #64748b 28%, var(--pal-border));
  border-left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.875rem;
  white-space: nowrap;
}
.temple-currency-input:focus + .temple-currency-unit {
  border-color: var(--pal-brand);
}
.temple-currency-input:disabled + .temple-currency-unit {
  color: #94a3b8;
}
.temple-input:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--pal-brand) 36%, #94a3b8);
}
.temple-input:focus {
  outline: none;
  border-color: var(--pal-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-brand) 16%, transparent);
}

/* チェック操作はテキスト入力欄と別の小型コントロールとして表示する。 */
.temple-checkbox {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  flex: 0 0 1rem;
  padding: 0;
  border-radius: 0.25rem;
  border-color: #94a3b8;
  background-color: #fff;
  accent-color: var(--pal-brand);
  cursor: pointer;
  vertical-align: middle;
}
.temple-checkbox:checked { border-color: var(--pal-brand); }
.temple-checkbox:focus-visible {
  outline: 2px solid var(--pal-brand);
  outline-offset: 2px;
}
.temple-checkbox:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.temple-input:disabled {
  color: #94a3b8;
  background-color: #f8fafc;
  cursor: not-allowed;
}

/* ── ホームの操作導線 ──
   説明カードと見分けられるよう、操作面にはアイコン・矢印・hover/focusを一貫して持たせる。 */
.temple-work-menu {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 4.75rem;
  gap: 0.875rem;
  padding: .875rem 1rem;
  text-align: left;
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 24px -18px rgba(15, 23, 42, 0.16);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.temple-work-menu:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pal-brand) 42%, var(--pal-border));
  background-color: color-mix(in srgb, var(--pal-brand) 3%, var(--pal-surface));
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06), 0 18px 30px -20px rgba(0, 184, 169, 0.28);
}
.temple-work-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--pal-deep);
  background: color-mix(in srgb, var(--pal-brand) 11%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-brand) 22%, var(--pal-border));
  border-radius: 0.875rem;
}
.temple-work-menu-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temple-work-menu-label {
  display: block;
  color: #1f2937;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.temple-work-menu-description {
  display: block;
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.55;
}
/* FARC支援中の固定バー。
   sticky・top・z-index・padding-top の各ユーティリティは committed tailwind.css に
   含まれないため、位置指定はここで完結させる。通常フロー内に置くので、
   ボタンが折り返してバーが高くなっても本文へ重ならない。 */
.temple-support-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--pal-brand, #00a094);
}
.temple-support-bar-admin {
  color: #fff;
  background: #075f62;
  border-bottom: 0;
  box-shadow: 0 4px 14px rgba(7, 95, 98, 0.22);
}
.temple-support-bar-muted { color: rgba(255,255,255,.76); }
.temple-support-mode {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.1);
}
.temple-support-mode-edit {
  color: #1f2937;
  border-color: #fcd34d;
  background: #fef3c7;
}
.temple-support-exit {
  min-height: 2.5rem;
  padding: .55rem 1rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: .75rem;
  color: #075f62;
  background: #fff;
  font-size: .875rem;
  font-weight: 700;
}
.temple-support-exit:hover { background: #ecfeff; }
.admin-client-table tbody tr:hover { background: #f8fafc; }
.admin-compare-chart {
  position: relative;
  min-height: 18rem;
  margin-top: 1rem;
}
.admin-compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.admin-compare-span-full { grid-column: 1 / -1; }
/* AdminホームはCRM/SFA型のワークスペースとして、淡いキャンバス上に業務単位の面を置く。
   意味のない色線は使わず、背景・余白・高さで階層を作る。 */
.admin-home-dashboard {
  padding: 1rem;
  border-radius: 1rem;
  background: #f5f7f9;
}
.admin-home-zone {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #e6e9ed;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
}
.admin-home-zone-attention,
.admin-home-zone-overview,
.admin-home-zone-work { background: #fff; }
.admin-home-zone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin-home-zone-title {
  color: #0f172a;
  font-size: 1.125rem;
  font-weight: 700;
}
.admin-home-zone-description {
  margin-top: .25rem;
  color: #64748b;
  font-size: .8125rem;
  line-height: 1.5;
}
.admin-home-subsection + .admin-home-subsection {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.admin-home-work-groups { display: grid; gap: 1rem; }
.admin-home-work-group {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid #e8ebef;
  border-radius: .75rem;
  background: #fafbfc;
}
.admin-home-work-group:first-child { padding-top: 1rem; }
.admin-home-work-group-head h3 { color: #0f172a; font-size: .875rem; font-weight: 700; }
.admin-home-work-group-head p { margin-top: .25rem; color: #64748b; font-size: .75rem; line-height: 1.5; }
.admin-home-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.admin-home-audit { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #e5e7eb; }
@media (max-width: 1100px) {
  .admin-home-work-group { grid-template-columns: 1fr; }
  .admin-home-work-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .admin-home-dashboard { padding: .5rem; }
  .admin-home-zone { padding: 1rem; }
  .admin-home-work-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1180px) {
  .admin-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 任意値クラス（text-[10px] 等）は committed tailwind.css に含まれず無効になるため、
   小さな補助文字・最小幅は名前付きクラスで定義する。 */
.temple-text-10 { font-size: 10px; line-height: 1.4; }
.temple-text-11 { font-size: 11px; line-height: 1.45; }
.temple-menu-pop { min-width: 9rem; }

/* 業務メニューの状態・件数。説明文より強く、見出しより弱い階層で示す。 */
.temple-work-menu-status {
  display: block;
  margin-top: 0.375rem;
  color: var(--pal-deep);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.temple-work-menu-arrow {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease, stroke 160ms ease;
}
.temple-work-menu:hover .temple-work-menu-arrow {
  transform: translateX(2px);
  stroke: var(--pal-brand);
}
.temple-card-action,
.temple-inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--pal-deep);
  font-size: 0.75rem;
  font-weight: 600;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.temple-card-action {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: color-mix(in srgb, var(--pal-brand) 5%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-brand) 20%, var(--pal-border));
  border-radius: 0.75rem;
}
.temple-card-action:hover {
  color: var(--pal-side-active-ink);
  background: color-mix(in srgb, var(--pal-brand) 10%, var(--pal-surface));
  border-color: color-mix(in srgb, var(--pal-brand) 38%, var(--pal-border));
}
.temple-inline-action {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--pal-border);
  border-radius: 0.625rem;
  background: var(--pal-surface);
}
.temple-inline-action:hover {
  border-color: color-mix(in srgb, var(--pal-brand) 35%, var(--pal-border));
  background: color-mix(in srgb, var(--pal-brand) 5%, var(--pal-surface));
}
.temple-inline-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.625rem;
  color: #991b1b;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fffafa;
  border: 1px solid #fecaca;
  border-radius: 0.625rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.temple-inline-danger:hover {
  background: #fff1f2;
  border-color: #fca5a5;
}
.temple-card-action svg,
.temple-inline-action svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.temple-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  color: #8a642c;
  background: color-mix(in srgb, var(--pal-gold) 10%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-gold) 22%, var(--pal-border));
  border-radius: 0.75rem;
}
.temple-section-icon svg,
.temple-action-empty svg,
.temple-action-row-button svg,
.temple-primary-action svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temple-action-empty {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  color: #4b5563;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
}
.temple-action-empty svg {
  color: var(--pal-brand);
  flex: 0 0 auto;
}
.temple-action-row {
  display: flex;
  align-items: center;
  min-height: 3rem;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: color-mix(in srgb, var(--pal-gold) 5%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-gold) 15%, var(--pal-border));
  border-radius: 0.75rem;
}
.temple-action-row-marker {
  flex: 0 0 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--pal-gold);
  border-radius: 9999px;
}
.temple-action-row-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  padding: 0.4375rem 0.625rem;
  color: var(--pal-deep);
  background: var(--pal-surface);
  border: 1px solid color-mix(in srgb, var(--pal-brand) 24%, var(--pal-border));
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.temple-action-row-button:hover {
  background: color-mix(in srgb, var(--pal-brand) 6%, var(--pal-surface));
  border-color: color-mix(in srgb, var(--pal-brand) 40%, var(--pal-border));
}
.temple-primary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.6875rem 0.875rem;
  color: #fff;
  background: var(--pal-brand);
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 8px 18px -12px rgba(0, 107, 98, 0.5);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.temple-primary-action:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -13px rgba(0, 107, 98, 0.58);
}

/* ── APIエラー・案内バナー ── */
.temple-banner {
  border-left-width: 4px;
  border-radius: 0.75rem;
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.temple-banner-not_connected,
.temple-banner-not_configured { background-color: #f0fdfa; border-color: #00b8a9; color: #00695c; }
.temple-banner-validation { background-color: #fffbeb; border-color: #d97706; color: #92400e; }
.temple-banner-unauthorized,
.temple-banner-forbidden { background-color: #fef2f2; border-color: #dc2626; color: #991b1b; }
.temple-banner-not_found { background-color: #f8fafc; border-color: #94a3b8; color: #475569; }
.temple-banner-conflict { background-color: #fff7ed; border-color: #ea580c; color: #9a3412; }
.temple-banner-expired { background-color: #f8fafc; border-color: #64748b; color: #475569; }
.temple-banner-unavailable,
.temple-banner-server_error,
.temple-banner-network,
.temple-banner-unknown { background-color: #fffbeb; border-color: #d97706; color: #92400e; }
/* 画面側が直接指定する種別（成功・失敗・案内）。
   定義が無いと枠線色・背景色が付かず、成功と失敗が見分けられないため必ず持たせる。 */
.temple-banner-success { background-color: #f0fdf4; border-color: #16a34a; color: #166534; }
.temple-banner-error { background-color: #fef2f2; border-color: #dc2626; color: #991b1b; }
.temple-banner-info { background-color: #f8fafc; border-color: #94a3b8; color: #475569; }

/* 契約停止・重大通知など、閉じることができない固定バナー */
.temple-alert-critical {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  color: #991b1b;
}
.temple-alert-warning {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  color: #92400e;
}

.temple-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.6875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.temple-badge-plan { background-color: #f0fdfa; color: #008c7f; box-shadow: inset 0 0 0 1px #ccfbf1; }
.temple-badge-active { background-color: #f0fdfa; color: #008c7f; box-shadow: inset 0 0 0 1px #ccfbf1; }
.temple-badge-past_due { background-color: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #fde68a; }
.temple-badge-unpaid,
.temple-badge-canceled,
.temple-badge-terminated { background-color: #fef2f2; color: #991b1b; box-shadow: inset 0 0 0 1px #fecaca; }
/* 契約終了後の段階用。契約中（ティール）・注意（琥珀）・危険（赤）と混同させない。
   中立＝データ保持中、無彩＝運用データ削除済み。色だけに依存させず必ず日本語ラベルを併記する。 */
.temple-badge-neutral { background-color: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px #cbd5e1; }
.temple-badge-archived { background-color: #f5f5f5; color: #525252; box-shadow: inset 0 0 0 1px #d4d4d4; }

/* ── 左サイドナビゲーション ── */
/* サイドバーはごく淡いティール地（案1）。彩度を抑え、寒色寄りのニュートラルで清潔にまとめる。 */
.temple-sidebar { background-color: var(--pal-side); }
.temple-sidebar-shell {
  width: 14rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  transition: width 180ms ease;
}
.temple-sidebar-shell > nav {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.temple-sidebar-collapsed {
  width: 4.5rem;
}
.temple-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  min-height: 4.5rem;
  padding: 1rem 0.75rem;
}
.temple-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--pal-side-ink);
  background: color-mix(in srgb, var(--pal-surface) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--pal-side-ink) 14%, transparent);
  border-radius: 0.5rem;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.temple-sidebar-toggle:hover {
  color: var(--pal-side-active-ink);
  background: var(--pal-surface);
  border-color: color-mix(in srgb, var(--pal-brand) 28%, var(--pal-border));
}
.temple-sidebar-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temple-sidebar-collapsed .temple-sidebar-header {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.temple-sidebar-collapsed .temple-nav-item {
  justify-content: center;
  width: calc(100% - 0.75rem);
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.temple-sidebar-label {
  white-space: nowrap;
}

/* クライアントダッシュボード: 大分類と中分類を区別するサイドバー。 */
.temple-client-nav { padding-left: .55rem; padding-right: .55rem; }
.temple-client-nav-section + .temple-client-nav-section { margin-top: .2rem; }
.temple-client-nav-heading,
.temple-client-nav-child {
  width: 100%; display: flex; align-items: center; border-radius: .7rem;
  color: #64748b; transition: background-color .15s ease, color .15s ease;
}
.temple-client-nav-heading { min-height: 2.65rem; gap: .65rem; padding: .55rem .7rem; font-size: .82rem; font-weight: 600; }
.temple-client-nav-heading:hover, .temple-client-nav-heading-current { color: var(--pal-brand-ink); background: rgba(15,95,99,.055); }
.temple-client-nav-mark { width: .28rem; height: 1.15rem; border-radius: 999px; background: #cbd5e1; flex: none; }
.temple-client-nav-heading-current .temple-client-nav-mark { background: var(--pal-accent); }
.temple-client-nav-chevron { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .15s ease; }
.temple-client-nav-chevron-open { transform: rotate(180deg); }
.temple-client-nav-children { padding: .15rem 0 .3rem .65rem; }
.temple-client-nav-child { min-height: 2.55rem; gap: .65rem; padding: .5rem .65rem; font-size: .8rem; }
.temple-client-nav-child:hover { color: var(--pal-brand-ink); background: rgba(15,95,99,.045); }
.temple-client-nav-child-active { color: var(--pal-brand-ink); background: rgba(15,95,99,.09); font-weight: 600; }
.temple-sidebar-collapsed .temple-client-nav-heading { justify-content: center; padding-left: .4rem; padding-right: .4rem; }

/* 画面名と更新操作は長い業務画面でも見失わないよう上端へ追従させる。
   固定配置ではなくstickyとし、本文幅・サイドバー開閉・モーダル配置へ影響させない。 */
.temple-app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--pal-surface, #fff);
}

/* 設定・サポートもホームの業務メニューを正本とする。
   操作面の寸法・角丸・影・hoverを同じ値に揃える。 */
.temple-seg.temple-settings-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.temple-settings-nav .temple-settings-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 6.25rem;
  gap: 0.875rem;
  padding: 1rem;
  color: #4b5563;
  background: var(--pal-surface);
  border: 1px solid var(--pal-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 24px -18px rgba(15, 23, 42, 0.16);
  white-space: normal;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.temple-settings-nav .temple-settings-nav-item:hover {
  transform: translateY(-2px);
  color: var(--pal-side-active-ink);
  background: color-mix(in srgb, var(--pal-brand) 3%, var(--pal-surface));
  border-color: color-mix(in srgb, var(--pal-brand) 42%, var(--pal-border));
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06), 0 18px 30px -20px rgba(0, 184, 169, 0.28);
}
.temple-settings-nav .temple-settings-nav-item.temple-seg-item-active {
  color: var(--pal-side-active-ink);
  background: color-mix(in srgb, var(--pal-brand) 8%, var(--pal-surface));
  border-color: color-mix(in srgb, var(--pal-brand) 45%, var(--pal-border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pal-brand) 10%, transparent),
    0 10px 24px -18px rgba(0, 140, 127, 0.38);
}
.temple-settings-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--pal-deep);
  background: color-mix(in srgb, var(--pal-brand) 9%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-brand) 22%, var(--pal-border));
  border-radius: 0.875rem;
}
.temple-settings-nav-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temple-settings-nav-description {
  display: block;
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
}
/* 設定・サポートの入口に添える「現在の状態」。説明文と区別できる強さにする。 */
.temple-settings-nav-state {
  display: block;
  margin-top: 0.25rem;
  color: var(--pal-deep);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

/* 設定・サポート内の操作もホームと同じ三階層に統一する。
   主操作=ブランド面、補助操作=淡色面、危険操作=赤色面。 */
.temple-settings-section button {
  min-height: 2.75rem;
  border-radius: 0.875rem;
  font-weight: 600;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.temple-settings-section button.text-xs {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
}
.temple-settings-section button:disabled {
  cursor: not-allowed;
}
.temple-settings-section button:not(:disabled):hover {
  transform: translateY(-1px);
}
.temple-settings-section button[class*="border-gray-200"] {
  background-image: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: color-mix(in srgb, var(--pal-brand) 12%, #e5e7eb);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 18px -16px rgba(15, 23, 42, 0.28);
}
.temple-settings-section button[class*="border-gray-200"]:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--pal-brand) 35%, var(--pal-border));
  box-shadow: 0 8px 18px -13px rgba(0, 140, 127, 0.3);
}
.temple-settings-section button[class*="border-red-200"] {
  background: #fffafa;
  box-shadow: 0 1px 2px rgba(127, 29, 29, 0.04);
}
.temple-settings-section button[class*="bg-teal-500"],
.temple-settings-section button[class*="bg-teal-600"],
.temple-settings-primary {
  border: 1px solid color-mix(in srgb, var(--pal-brand) 82%, #075e57);
  box-shadow: 0 8px 18px -12px rgba(0, 107, 98, 0.52);
}
.temple-settings-primary,
.temple-settings-secondary,
.temple-settings-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.temple-settings-primary {
  color: #fff;
  background: var(--pal-brand);
}
.temple-settings-secondary {
  color: var(--pal-deep);
  background: color-mix(in srgb, var(--pal-brand) 5%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-brand) 22%, var(--pal-border));
}
.temple-settings-danger {
  color: #991b1b;
  background: #fffafa;
  border: 1px solid #fecaca;
}
/* 押せない操作は見た目でも分かるようにする。
   同意前の「承諾する」等がそのままの色だと押せるように見えるため、
   disabled は全ての操作ボタンで共通の抑えた見た目にする。 */
.temple-settings-primary:disabled,
.temple-settings-secondary:disabled,
.temple-settings-danger:disabled,
.temple-inline-action:disabled,
.temple-inline-danger:disabled {
  color: #94a3b8;
  background: #f1f5f9;
  border-color: #e2e8f0;
  box-shadow: none;
  cursor: not-allowed;
}
.temple-settings-primary:disabled:hover,
.temple-settings-secondary:disabled:hover,
.temple-settings-danger:disabled:hover,
.temple-inline-action:disabled:hover,
.temple-inline-danger:disabled:hover {
  transform: none;
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.temple-settings-primary svg,
.temple-settings-secondary svg,
.temple-settings-danger svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temple-settings-card-action {
  width: 100%;
  margin-top: auto;
}
.temple-account-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--pal-deep);
  background: color-mix(in srgb, var(--pal-brand) 9%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-brand) 18%, var(--pal-border));
  border-radius: 0.75rem;
}
.temple-account-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temple-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(100% - 1rem);
  margin: 0 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--pal-side-ink); /* 淡地の上で落ち着いて読める中間色 */
  text-align: left;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* 淡地の上でも選択状態が埋もれないよう、選択中は一段濃いティール＋濃色文字にする。 */
.temple-nav-item:hover { background-color: var(--pal-side-hover); color: var(--pal-side-active-ink); }
.temple-nav-item-active { background-color: var(--pal-side-active); color: var(--pal-side-active-ink); font-weight: 600; }
.temple-nav-item-active:hover { background-color: var(--pal-side-active); color: var(--pal-side-active-ink); }

/* 要対応の強調だけに、抑えた金を一点使う（帯・装飾には多用しない）。 */
.temple-attention { border-left: 4px solid var(--pal-gold); }
.temple-nav-item-active::before {
  content: "";
  position: absolute;
  left: -0.5rem; top: 0.375rem; bottom: 0.375rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pal-brand);
}
.temple-nav-item-disabled { color: #cbd5e1; cursor: not-allowed; }
.temple-nav-item-disabled:hover { background: transparent; color: #cbd5e1; }
.temple-nav-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* ── セグメントコントロール（ページ内サブナビ） ── */
.temple-seg { display: inline-flex; background: #f1f5f9; border-radius: 0.75rem; padding: 0.25rem; gap: 0.25rem; }
.temple-seg-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  color: #6b7280;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.temple-seg-item:hover { color: #111827; }
.temple-seg-item-active { background: #ffffff; color: #0f766e; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.temple-seg-item-active:hover { color: #0f766e; }

/* 分析条件は異なる入力形式でも同じ高さにそろえる。 */
.analytics-filter-control,
.analytics-filter-button,
.analytics-filter-segment {
  box-sizing: border-box;
  height: 2.5rem;
  min-height: 2.5rem;
}
.analytics-filter-control {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.analytics-filter-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.analytics-filter-segment .temple-seg-item {
  min-height: 2rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* 分析の取得中は古い数値を隠し、円形インジケーターだけを静かに表示する。 */
.analytics-loading-state {
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: #52666a;
  font-size: 0.875rem;
}

.analytics-loading-state-compact {
  min-height: 8rem;
  margin-bottom: 1rem;
}
.analytics-loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(8, 94, 108, 0.14);
  border-top-color: var(--pal-brand);
  border-radius: 999px;
  animation: analytics-spin 760ms linear infinite;
}
@keyframes analytics-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .analytics-loading-spinner { animation-duration: 1.6s; }
}

/* 上位プラン専用の無効タブ */
.temple-tab {
  padding: 1rem 0.125rem;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/* アクティブタブ: 単なる下線ではなく、両端を丸めたティールのインジケータで
   視認性とブランド感を上げる。下線はborderではなく擬似要素で描く。 */
.temple-tab-active { color: #0f766e; font-weight: 600; position: relative; }
.temple-tab-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--pal-side-active-ink) 0%, var(--pal-brand) 100%);
}
.temple-tab-active { color: var(--pal-side-active-ink); }
.temple-tab-inactive { color: #6b7280; }
.temple-tab-inactive:hover { color: #111827; }
.temple-tab-disabled { color: #cbd5e1; cursor: not-allowed; }
.temple-tab-lock-icon { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.3em; vertical-align: -0.1em; }

.temple-upsell-card {
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
  border: 1px solid #99f6e4;
  border-radius: 1rem;
  padding: 2.5rem;
  text-align: center;
}

.temple-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
}
.temple-step {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.25rem;
  font-size: 0.75rem;
  color: #9ca3af;
  border-bottom: 2px solid #e5e7eb;
}
.temple-step-active,
.temple-step-current {
  color: #008c7f;
  border-color: #00b8a9;
  font-weight: 600;
}
.temple-step-done {
  color: #4b5563;
  border-color: #99f6e4;
}
/* 対応待ち（審査中・承諾待ち）: 落ち着いた琥珀 */
.temple-step-waiting {
  color: #b45309;
  border-color: #f59e0b;
  font-weight: 600;
}
/* 要修正: 赤系で注意を促す */
.temple-step-correction {
  color: #b91c1c;
  border-color: #ef4444;
  font-weight: 600;
}
/* 未完了 */
.temple-step-pending {
  color: #9ca3af;
  border-color: #e5e7eb;
}

/* 簡素化ステッパー: 番号/チェックのノード＋接続線（名前は上部見出しに集約） */
.temple-stepnode {
  width: 1.75rem; height: 1.75rem;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
  border: 2px solid #e5e7eb; color: #9ca3af; background: #fff;
  flex-shrink: 0;
}
.temple-stepnode svg { width: 0.9rem; height: 0.9rem; }
.temple-stepnode-done { background: #00b8a9; border-color: #00b8a9; color: #fff; }
.temple-stepnode-current { border-color: #00b8a9; color: #0f766e; }
.temple-stepnode-waiting { border-color: #f59e0b; color: #b45309; }
.temple-stepnode-correction { border-color: #ef4444; color: #b91c1c; }
.temple-stepnode-pending { border-color: #e5e7eb; color: #9ca3af; }
.temple-stepline { height: 2px; background: #e5e7eb; }
.temple-stepline-done { background: #00b8a9; }

/* 画像アップロード行（既存 client-management.html の image-upload パターンを踏襲） */
.temple-image-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.temple-image-preview {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.25rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.temple-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.temple-image-preview span { font-size: 0.6875rem; color: #9ca3af; text-align: center; }

/* モーダル背景（セッションロック画面・各種確認/設定モーダル共通） */
.temple-lock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
/* 内容が長くなるモーダル（画像アップロード等）向け: 上寄せ+縦スクロール可 */
.temple-lock-overlay-scroll {
  align-items: flex-start;
  overflow-y: auto;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  z-index: 50;
}
.temple-lock-card {
  width: calc(100% - 2rem);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--pal-brand) 10%, #e5e7eb);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow:
    0 28px 70px -28px rgba(15, 23, 42, 0.48),
    0 12px 28px -20px rgba(0, 107, 98, 0.32);
}
.temple-modal-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.temple-modal-heading-icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  color: var(--pal-deep);
  background: color-mix(in srgb, var(--pal-brand) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--pal-brand) 16%, #e5e7eb);
}
.temple-modal-heading-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.temple-modal-notice {
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--pal-brand) 12%, #e5e7eb);
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--pal-brand) 4%, #f8fafc);
  color: #475569;
  font-size: 0.75rem;
  line-height: 1.65;
}
.temple-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 1.5rem -1.75rem -1.75rem;
  padding: 1rem 1.75rem;
  border-top: 1px solid #eef2f7;
  background: #fafcfd;
  border-radius: 0 0 1.25rem 1.25rem;
}
.temple-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.temple-modal-close:hover {
  color: var(--pal-deep);
  background: color-mix(in srgb, var(--pal-brand) 6%, #fff);
  border-color: color-mix(in srgb, var(--pal-brand) 30%, var(--pal-border));
}
@media (max-width: 640px) {
  .temple-lock-card { padding: 1.25rem; }
  .temple-modal-actions {
    flex-direction: column-reverse;
    margin: 1.25rem -1.25rem -1.25rem;
    padding: 1rem 1.25rem;
  }
  .temple-modal-actions button { width: 100%; justify-content: center; }
}

/* ==========================================================================
 * 洗練レイヤー
 * ティールを「小さなワンポイント」ではなく、ブランドカラーとして一貫して
 * 効かせるための追加スタイル。既存のTailwindユーティリティ（bg-teal-500 等）を
 * そのまま活かしつつ、影・グラデーション・フォーカスで質感を底上げする。
 * theme.cssはTailwind CDNより後に読み込まれるため、同一詳細度で上書きできる。
 * ========================================================================== */

/* 画面最上部のブランドアクセント（細いティールのグラデーション帯） */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #008c7f 0%, #00b8a9 45%, #2dd4bf 100%);
  z-index: 60;
  pointer-events: none;
}

/* プライマリボタン（bg-teal-500 を持つ button / a）:
   フラットな単色をやめ、微グラデーション＋ティール色の落ち影＋ホバーで浮く挙動にする。
   Tailwindの hover:bg-teal-600 とも両立するよう、ホバー時は自前のグラデーションを濃くする。 */
button.bg-teal-500,
a.bg-teal-500,
.temple-btn-primary {
  background-image: linear-gradient(180deg, #14c2b2 0%, #00b8a9 55%, #00a89a 100%);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 6px 16px -6px rgba(0, 140, 127, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, background-image 0.12s ease;
}
button.bg-teal-500:hover,
a.bg-teal-500:hover,
.temple-btn-primary:hover {
  background-image: linear-gradient(180deg, #00b8a9 0%, #00a094 55%, #008c7f 100%);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 22px -8px rgba(0, 140, 127, 0.55);
  transform: translateY(-1px);
}
button.bg-teal-500:active,
a.bg-teal-500:active,
.temple-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.05), 0 4px 10px -6px rgba(0, 140, 127, 0.45);
}
/* 無効化されたプライマリボタン（disabled:bg-gray-200 等）はグラデーション・影を消す */
button.bg-teal-500:disabled,
a.bg-teal-500[aria-disabled="true"],
.temple-btn-primary:disabled {
  background-image: none;
  box-shadow: none;
  transform: none;
}

/* セカンダリボタン（白地・境界線）にもホバーで軽い浮きを与えて一体感を出す */
button.bg-white:hover {
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.25);
}

/* 入力フォーカスのティールグロー（Tailwindの focus:ring と併用して発光感を足す） */
input:focus,
select:focus,
textarea:focus {
  border-color: #00b8a9;
}

/* カードのティール上辺アクセント（明示的に付けたい主要カードにのみ使う） */
.temple-card-accent {
  position: relative;
  overflow: hidden;
}
.temple-card-accent::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #008c7f 0%, #00b8a9 100%);
}

/* アップセルカードを少し立体的に */
.temple-upsell-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -24px rgba(0, 140, 127, 0.35);
}

/* ── キーボード操作のフォーカス表示 ──────────────────────
   マウス・タッチ操作では出さず、キーボード操作時だけ明示する（:focus-visible）。
   色は既存パレットの主操作色（--pal-brand）を使い、配色そのものは変更しない。
   輪郭だけで判別できるよう outline を使い、背景色の変更には依存させない。 */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--pal-brand);
  outline-offset: 2px;
  border-radius: 8px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pal-brand);
  outline-offset: 1px;
}
/* サイドナビ・セグメントナビは角丸に合わせてオフセットを詰める。 */
.temple-nav-item:focus-visible { outline-offset: -2px; border-radius: 10px; }
.temple-seg-item:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* 高コントラスト設定では輪郭を強制表示する。 */
@media (forced-colors: active) {
  button:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible { outline: 3px solid Highlight; }
}

/* ══════════════════════════════════════════════════════════════
   生成CSSに含まれないレスポンシブ用ユーティリティの補完

   common/tailwind.css は静的ビルド済みの成果物で、node_modules が無い環境では
   再生成できない。そのビルドには grid-cols 系以外のレスポンシブ変種が含まれて
   おらず、HTMLに書いた sm:flex-row / lg:items-center などが無効化されていた
   （PC幅でも常に縦積みになる不具合）。

   ここでは Tailwind と同じクラス名・同じブレークポイント（sm 640 / md 768 /
   lg 1024）で同じ宣言を定義する。将来 tailwind.css を再生成しても
   同じ宣言が重なるだけで表示は変わらない。
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:items-center { align-items: center; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:justify-between { justify-content: space-between; }
}
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════
   公開までの手続き（工程ヘッダー・進行バー）

   操作に不慣れな利用者が「いまどの工程か」「次にどこを押すか」を
   説明なしで判断できるようにするための表示。
   色だけに依存させず、番号・記号（済/現/未）・状態語を必ず併記する前提。
   Adminの temple-step-list と同じ意匠だが、寺社側は工程数が5固定ではなく
   タブレット幅も考慮するため独立したクラスにする。
   ══════════════════════════════════════════════════════════════ */
.temple-flow {
  background: var(--pal-surface);
  border: 1px solid color-mix(in srgb, var(--pal-brand) 24%, var(--pal-border));
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15, 23, 42, 0.10);
}
/* 手続き中であることを地の色でも示す（帯だけに頼らない） */
.temple-flow-active {
  background: color-mix(in srgb, var(--pal-brand) 4%, var(--pal-surface));
  border-color: color-mix(in srgb, var(--pal-brand) 40%, var(--pal-border));
}
.temple-flow-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pal-deep);
}
.temple-flow-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* 進行バー本体 */
.temple-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.375rem;
}
.temple-flow-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--pal-border);
  border-radius: 0.75rem;
  background: var(--pal-surface);
}
.temple-flow-step-complete {
  color: #374151;
  border-color: color-mix(in srgb, var(--pal-brand) 26%, var(--pal-border));
  background: color-mix(in srgb, var(--pal-brand) 6%, var(--pal-surface));
}
.temple-flow-step-current {
  color: var(--pal-deep);
  border-color: color-mix(in srgb, var(--pal-brand) 60%, var(--pal-border));
  background: color-mix(in srgb, var(--pal-brand) 12%, var(--pal-surface));
  box-shadow: inset 3px 0 0 0 var(--pal-brand);
  font-weight: 600;
}
.temple-flow-step-upcoming {
  color: #9ca3af;
  border-style: dashed;
  border-color: #e5e7eb;
  background: var(--pal-surface);
}
/* 記号（済／現／未）。色が判別できない環境でも文字で分かる。 */
.temple-flow-mark {
  flex: 0 0 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.temple-flow-mark-complete {
  color: #fff;
  background: color-mix(in srgb, var(--pal-brand) 78%, #0b5e57);
}
.temple-flow-mark-current {
  color: #fff;
  background: var(--pal-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-brand) 22%, transparent);
}
.temple-flow-mark-upcoming {
  color: #9ca3af;
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
}
.temple-flow-step-label {
  font-size: 0.75rem;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: break-word;
  min-width: 0;
}
/* タブレット幅では5列だと文字が潰れるため3行に折り返す */
@media (max-width: 1100px) {
  .temple-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temple-flow-step:last-child { grid-column: 1 / -1; }
}

/* 「いま行うこと」カード。画面内で唯一の主操作を置く場所。 */
.temple-flow-now {
  border: 1px solid color-mix(in srgb, var(--pal-brand) 45%, var(--pal-border));
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--pal-brand) 6%, var(--pal-surface));
  padding: 1rem 1.125rem;
}
.temple-flow-now-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pal-deep);
}
.temple-flow-now-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #111827;
  margin-top: 0.25rem;
}
.temple-flow-now-guide {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #4b5563;
  margin-top: 0.375rem;
}
/* 完了工程の一覧（折り畳み） */
.temple-flow-done-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.25rem;
  border-bottom: 1px solid var(--pal-border);
  font-size: 0.8125rem;
  color: #4b5563;
}
.temple-flow-done-row:last-child { border-bottom: 0; }
.temple-flow-num {
  flex: 0 0 1.5rem;
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: right;
}

/* 工程ヘッダー内の戻り導線 */
.temple-flow-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pal-deep);
}
.temple-flow-back:hover { text-decoration: underline; }

/* 保存後の「次の工程へ」帯 */
.temple-flow-next {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--pal-brand) 45%, var(--pal-border));
  border-left-width: 4px;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--pal-brand) 7%, var(--pal-surface));
}

/* ══════════════════════════════════════════════════════════════
   長いフォームの保存操作を画面下に固定する。
   スクロール位置に関係なく「保存」が常に見えるようにする。
   ══════════════════════════════════════════════════════════════ */
.temple-form-actions {
  position: sticky;
  bottom: 0.75rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  /* 背後の入力欄が透けて読めなくなるため不透明にする */
  background: var(--pal-surface);
  border: 1px solid color-mix(in srgb, var(--pal-brand) 22%, var(--pal-border));
  border-radius: 0.875rem;
  box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.22);
}
/* 固定バーの下に最後の入力欄が隠れたままにならないよう余白を確保する */
.temple-form-sticky-host { padding-bottom: 5.5rem; }
.temple-form-actions-note {
  margin-right: auto;
  font-size: 0.75rem;
  color: #6b7280;
}
/* 「公開に必要」なセクションの印。任意項目と区別する。 */
.temple-required-mark {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--pal-deep);
  background: color-mix(in srgb, var(--pal-brand) 12%, var(--pal-surface));
  border: 1px solid color-mix(in srgb, var(--pal-brand) 32%, var(--pal-border));
}

/* 画面には出さず読み上げにだけ渡す文字（生成CSSに .sr-only が無いため定義する）。
   進行バーの「完了／現在の工程／これからの工程」を色と記号以外でも伝える。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   ホームの並び順（手続き中 / 通常運用）

   公開までの工程が残っているあいだは、金額・分析より先に手続きを見せる。
   初回利用時は奉納が必ず0円になるため、上に置くと不安材料にしかならない。
   order 系ユーティリティは生成CSSに含まれないため、名前付きクラスで定義する。
   ══════════════════════════════════════════════════════════════ */
.temple-home { display: flex; flex-direction: column; }
.temple-home-flow      { order: 1; }
.temple-home-attention { order: 2; }
.temple-home-metrics   { order: 3; }
.temple-home-status    { order: 4; }
.temple-home-menu      { order: 5; }
.temple-home-recent    { order: 6; }
/* 手続き中は「当月の奉納・前期比較」と「最近の奉納」を業務メニューより下へ回す */
.temple-home-setup .temple-home-metrics { order: 7; }
.temple-home-setup .temple-home-recent  { order: 8; }

/* ── 付加機能契約 ────────────────────────────────────────
   Admin・クライアント双方で使う共通の表示。ビルド済み tailwind.css に
   含まれない構成のため、名前付きクラスで定義する。 */
.temple-addon-list { border: 1px solid #f1f5f9; border-radius: 0.75rem; }
.temple-addon-item { padding: 1rem; border-bottom: 1px solid #eef2f7; }
.temple-addon-item:last-child { border-bottom: none; }
/* 項目は4列（PC）／2列（タブレット）／1列（狭い画面）。
   1件あたりの縦が伸びて一覧を追いにくくなるのを避ける。値が長くても行は崩さない。 */
.temple-addon-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
}
.temple-addon-fields > div {
  min-width: 0;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 0.375rem;
}
.temple-addon-fields dt { font-size: 0.75rem; color: #6b7280; }
.temple-addon-fields dd { font-size: 0.875rem; color: #111827; overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  .temple-addon-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .temple-addon-fields { grid-template-columns: minmax(0, 1fr); }
}
.temple-addon-detail {
  border-top: 1px solid #f1f5f9;
  padding-top: 0.75rem;
}
/* 長文（目的・提供範囲・特約）は折り返して横スクロールを起こさない。 */
.temple-addon-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* 入力フォームは2列（PC・タブレット）／1列（狭い画面）。 */
.temple-addon-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
.temple-addon-form-wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .temple-addon-form { grid-template-columns: minmax(0, 1fr); }
}
/* 特約事項のプレビュー。許可した記法だけが描画される前提の体裁。 */
.temple-addon-markdown { font-size: 0.875rem; color: #1f2937; overflow-wrap: anywhere; }
.temple-addon-markdown h3 { font-size: 0.9375rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.temple-addon-markdown h4 { font-size: 0.875rem; font-weight: 600; margin: 0.625rem 0 0.25rem; }
.temple-addon-markdown h5 { font-size: 0.8125rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
.temple-addon-markdown p { margin: 0.25rem 0; }
.temple-addon-markdown ul,
.temple-addon-markdown ol { margin: 0.25rem 0 0.25rem 1.25rem; }
.temple-addon-markdown ul { list-style: disc; }
.temple-addon-markdown ol { list-style: decimal; }
.temple-addon-markdown li { margin: 0.125rem 0; }
.temple-addon-markdown strong { font-weight: 600; }
.temple-addon-markdown a { color: #0f766e; text-decoration: underline; }
/* 折りたたみ時の要約行。金額2件と、その状態でいま意味のある日時1件だけを横並びにする。 */
.temple-addon-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}
.temple-addon-summary > div { min-width: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.temple-addon-summary dt { font-size: 0.75rem; color: #6b7280; white-space: nowrap; }
.temple-addon-summary dd { font-size: 0.875rem; color: #111827; overflow-wrap: anywhere; }

/* モーダル内の項目一覧。カードより狭いので2列（狭い画面では1列）にする。
   media queryはビューポート基準でモーダル幅に追従しないため、専用クラスで決める。
   .temple-addon-fields と併用せず単独で使っている箇所が大半のため、
   display:grid と gap も自前で持たせ、単独使用でも崩れないようにする。 */
.temple-addon-fields-narrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
}
@media (max-width: 720px) {
  .temple-addon-fields-narrow { grid-template-columns: minmax(0, 1fr); }
}
/* 下書き編集モーダルの幅。2列フォームが収まる広さにする。
   ビルド済みtailwind.cssに max-w-3xl は含まれないため、名前付きクラスで指定する。 */
.temple-addon-modal-card { width: 100%; max-width: 48rem; }
/* 解約・撤回の注意事項リスト。 */
.temple-addon-notes { list-style: disc; margin-left: 1.25rem; font-size: 0.8125rem; color: #4b5563; }
.temple-addon-notes li { margin: 0.125rem 0; }