/**
 * デザインシステム - 統一UIコンポーネント
 * 12の神器ツール管理画面用
 */

/* ========================================
   CSS変数定義
   ======================================== */
:root {
  /* 弊社テーマカラー（ネイビー・ティール）— その色と薄めの2択 */
  --theme-navy: #1a3168; /* ネイビー（その色）：ヘッダー・主要ボタン・グラデーション始点 */
  --theme-navy-pale: #eef2f7; /* ネイビーの淡いトーン：バッジ等の背景（2026-09-11 追加。表の選択行と同値） */
  --theme-navy-light: #2d4a8a; /* ネイビー（薄め） */
  --theme-teal: #008ca5; /* ティール（その色）：グラデーション終点・サブ */
  --theme-teal-light: #26a5b0; /* ティール（薄め） */
  --theme-navy-rgb: 26, 49, 104;
  --theme-teal-rgb: 0, 140, 165;
  --theme-gradient: linear-gradient(
    135deg,
    var(--theme-navy) 0%,
    var(--theme-teal) 100%
  );
  --theme-gradient-hover: linear-gradient(
    135deg,
    var(--theme-navy-light) 0%,
    var(--theme-teal-light) 100%
  );

  /* 弊社アクセント：イエロー。頻繁に使用しないこと。強調要素に限定 */
  --brand-accent-yellow: #fdd34e;
  --brand-accent-yellow-bg: rgba(253, 211, 78, 0.15);
  --brand-accent-yellow-border: rgba(253, 211, 78, 0.4);

  /* Primary（テーマに統一・エイリアス） */
  --primary-gradient: var(--theme-gradient);

  /* Secondary Colors */
  --secondary-color: #6c757d;
  --secondary-color-rgb: 108, 117, 125;
  --secondary-light: var(--gray-50);
  --secondary-dark: #495057;

  /* Semantic Colors */
  /* ド顕在キーワードの等級 A〜E の色（2026-10-04 ユーザー指示「A-D は色分けでわかりやすく」・正本はここだけ）
     🔴 2026-10-07 林周平さん指示「緑がよい・黄色が中間・灰色がだめ」＝等級の意味に色を合わせた
     （A・B＝そのまま使える→緑／C＝可能→黄／D・E＝要変更→灰）。⚠ 青と赤は使わない＝
     青は「良いのか悪いのか分からない」・赤は「壊れている」に見える。濃さで A と B、D と E を分ける。
     同じ 3 色の帯を、項目の棒（0〜100 点）でも使う（style.css の .kw-bar__value[data-band]） */
  --grade-a-bg: #047857;
  --grade-b-bg: #059669;
  --grade-c-bg: #f59e0b;
  --grade-d-bg: #9ca3af;
  --grade-e-bg: #6b7280;
  /* 点（0〜100）の 3 段。よい 70 以上・中間 40〜69・だめ 40 未満（等級の境と同じ考え方） */
  --band-good: #059669;
  --band-mid: #f59e0b;
  --band-poor: #9ca3af;
  /* 中間の段を文字色に使う時（--band-mid は背景向けで、白地の小さな文字だと薄い・2026-10-09） */
  --band-mid-text: #b45309;
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --success-color: #10b981;
  --success-dark: #059669;
  --success-hover-end: #047857;

  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --danger-color: #ef4444;
  --danger-dark: #dc2626;
  --danger-hover-end: #b91c1c;

  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --warning-color: #f59e0b;
  --warning-dark: #d97706;
  --warning-hover-end: #b45309;

  --info-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --info-color: #3b82f6;
  --info-color-rgb: 59, 130, 246;
  --info-dark: #2563eb;
  --info-hover-end: #1e40af;

  /* AI Special Gradient */
  --ai-gradient: linear-gradient(90deg, #3289f0, #eb00ff 64.5%, #ff33ba);
  --ai-gradient-hover: linear-gradient(90deg, #2a7ae8, #d400e6 64.5%, #e62aa3);

  /* Neutral Colors */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-900-rgb: 17, 24, 39;
  --tooltip-bg: rgba(var(--gray-900-rgb), 0.88);
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-light: #e0e0e0;
  --border-lighter: #e9ecef;
  --body-bg: #f4f7fa;

  /* Alert / メッセージ用（セマンティック） */
  --alert-success-bg: #d4edda;
  --alert-success-border: #c3e6cb;
  --alert-success-text: #155724;
  --alert-error-bg: #f8d7da;
  --alert-error-border: #f5c6cb;
  --alert-error-text: #721c24;
  --alert-warning-bg: #fff3cd;
  --alert-warning-border: #ffeaa7;
  --alert-warning-text: #856404;
  --acting-header-bg: #92400e; /* 代理ログイン中のヘッダ（白文字とのコントラスト 7.1:1・通常のネイビーと見分ける） */
  --alert-info-bg: #d1ecf1;
  --alert-info-border: #bee5eb;
  --alert-info-text: #0c5460;

  /* Info / リンク・フォーカス用（直書き置換用） */
  --info-link: #007bff;
  --info-link-rgb: 0, 123, 255;
  --info-link-hover: #0056b3;
  --overlay-bg: rgba(0, 0, 0, 0.6);

  /* 画面の上に貼り付く物の基準（グローバルメニューの高さ・お知らせ帯の高さ・貼り付く位置）。
     🔴 **貼り付く物の top をこの外で数値で書かない**（2026-09-12）。以前は各所に `60px` と
        書いてあり、お知らせ帯（40px）が出ている時だけ 40px 足りず、編集画面の固定ヘッダーが
        グローバルメニューの下へ潜っていた。足し算はここと `.layout-with-notice--has-notice`
        の 2 行だけが持つ。 */
  --app-header-height: 60px;
  --global-notice-height: 40px;
  --app-sticky-top: var(--app-header-height);

  /* Z-index レイヤー（CODING_STANDARDS 5.7：直書き避けトークンで管理） */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-debug: 1000;
  /* 編集画面で .site-header を .lp-editor-fixed-header (1000) より手前にする用。ツールチップ時は固定ヘッダーが 1101 のため 1010 < 1101 を維持すること。 */
  --z-editor-site-header: 1010;
  /* 同上。1101/1102 との大小関係を維持すること。 */
  --z-above-base: 1;
  --z-lp-editor-fixed-header: 1000;
  --z-editor-fixed-header-elevated: 1101;
  --z-editor-overflow-menu: 1102;
  /* ヘルプツールチップ（.c-help-tooltip）: エディタ用 UI（〜1102）より手前。トーストより奥（下位 z-index）。 */
  --z-tooltip: 1103;
  --z-tooltip-arrow: 1104;
  /* トースト: ヘルプツールチップより手前。モーダル（300）より上。 */
  --z-toast: 1105;

  /* AI グラデーション用 RGB（シャドウ等） */
  --ai-gradient-start-rgb: 50, 137, 240;
  --ai-gradient-mid-rgb: 235, 0, 255;
  --ai-gradient-end-rgb: 255, 51, 186;
  --ai-gradient-pink-rgb: 240, 147, 251;

  /* 制限到達行など（admin） */
  --limit-reached-bg: #fff5f5;
  --limit-reached-bg-hover: #fef2f2;
  /* 表で選んでいる行。⚠ 縞（--gray-50 #f9fafb）と見分けが付く濃さにする
     （旧 ad_ops の #f8fafc は縞とほぼ同色で、統合すると選択が見えなくなった） */
  --table-row-selected: #eef2f7;

  /* 管理画面バッジ用（使用履歴・ステータス等） */
  --badge-purple: #6f42c1;
  --badge-orange: #fd7e14;
  --badge-teal: #20c997;
  --badge-pink: #e83e8c;

  /* 半透明（ヘッダー・シャドウ等） */
  --white-90: rgba(255, 255, 255, 0.9);
  --white-95: rgba(255, 255, 255, 0.95);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-30: rgba(255, 255, 255, 0.3);
  --black-05: rgba(0, 0, 0, 0.05);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-80: rgba(0, 0, 0, 0.8);
  --danger-rgb: 239, 68, 68;

  /* Spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 0.75rem; /* 12px */
  --spacing-lg: 1rem; /* 16px */
  --spacing-xl: 1.5rem; /* 24px */
  --spacing-2xl: 2rem; /* 32px */
  --spacing-3xl: 3rem; /* 48px */

  /* Layout */
  --container-max-width: 1600px; /* 管理画面コンテンツの最大幅（.main-container / .admin-container 共通の SoT） */

  /* Header action button (LP/Thanks editor fixed header) */
  --header-action-btn-min-height: calc(
    var(--spacing-md) * 2 + 0.375rem
  ); /* 約1.875rem */
  --header-action-btn-min-width: 6.5rem;
  --header-action-btn-width: 8.25rem; /* 保存する・公開URLをコピー・一覧へ戻るを同じ幅に */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Typography */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   ベースリセット
   ======================================== */

/*
 * hidden 属性を常に効かせる。
 *
 * ⚠ ブラウザ既定の `[hidden]{display:none}` は**作者スタイルより弱い**ので、
 *    要素のクラスに display を書くと hidden が黙って無効になる。
 *    実害の例（2026-09-03 に発見）: `.fa-spinner{display:inline-block}` のせいで
 *    AIチェックのスピナーが常時描画され、ボタンのラベルが 27px 右へずれていた
 *    （白地に白いスピナーで見えないまま回り続けていた）。
 *    JS は `el.hidden = true/false` で表示を切る箇所が 12 あり、同じ穴が再発しうるので
 *    個別に打ち消さずここで構造的に閉じる。
 * ⚠ 表示のオン/オフを**クラスで**やりたい要素は、hidden 属性に頼らずクラス側で完結させる
 *    （例: `.fa-spinner` は `.btn.is-loading` で出す）。
 */
[hidden] {
  display: none !important;
}

/* ========================================
   ボタンシステム
   ======================================== */

/* ベースボタンスタイル */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* ボタン内テキストのはみ出しを省略表示（進捗・長ラベル共通）。
   ⚠ `.button-text` は**ボタン内の文字要素**で、廃止した `.button` とは別物。 */
.btn .button-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ボタン内のSVGアイコンのスタイル */
.btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--theme-navy-rgb), 0.1);
}

/* 押せないボタン。⚠ **色を灰色で塗り直す**（薄くするだけにしない）。
   グラデーションの主ボタンは `opacity` だけだと色が残り、押せるように見える。
   ⚠ `.btn-primary` 等の修飾と**同じ詳細度**（クラス 2 つ）にして、`!important` を使わずに勝つ。
   2026-09-11 に `!important` 7 個 → 0 個へ（数えられる＝機械で守れる）。 */
.btn:disabled,
.btn:disabled:hover {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: var(--gray-500);
  color: var(--white);
  border-color: var(--gray-500);
}

/* ボタンサイズ */
/* 小さいボタン。⚠ **値をここで決め直した**（2026-09-11）。
   統一前は 4 種類あった（正本 8/16px・ad_ops が 2/10px・button-small が 4/8px・button-sm が 4/8px）。
   実測すると正本は通常ボタンの**高さ 77%** で「小さい」と言えず、button-small は 57% で
   表の行に入れると窮屈だった。⇒ **余白を縦だけ詰める**（横は押しやすさのため残す）形にして
   高さ 66% 前後に置く。表のセル・行に並ぶ操作ボタンがこの値を使う。 */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: var(--font-size-base);
}

/* プライマリボタン */
.btn-primary {
  background: var(--primary-gradient);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--theme-gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* セカンダリボタン */
.btn-secondary {
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--theme-navy);
  color: var(--theme-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 枠線だけのボタン（会員のダッシュボード「あとで」・チュートリアルの「スキップ」でも使う） */
.btn-outline {
  background: transparent;
  border: 1px solid var(--theme-navy);
  color: var(--theme-navy);
}

.btn-outline:hover:not(:disabled) {
  background: var(--theme-navy);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 成功ボタン */
.btn-success {
  background: var(--success-gradient);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-success:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--success-dark) 0%,
    var(--success-hover-end) 100%
  );
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 危険ボタン */
.btn-danger {
  background: var(--danger-gradient);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--danger-dark) 0%,
    var(--danger-hover-end) 100%
  );
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 危険ボタン（アウトライン） */
.btn-danger-outline {
  background: var(--white);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
  box-shadow: var(--shadow-sm);
}

.btn-danger-outline:hover:not(:disabled) {
  background: var(--danger-color);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 情報ボタン */
.btn-info {
  background: var(--info-gradient);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-info:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--info-dark) 0%,
    var(--info-hover-end) 100%
  );
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 警告ボタン */
.btn-warning {
  background: var(--warning-gradient);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-warning:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--warning-dark) 0%,
    var(--warning-hover-end) 100%
  );
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* AIボタン（特別なグラデーション・立体感） */
.btn-ai {
  background: var(--ai-gradient);
  color: var(--white);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(var(--ai-gradient-start-rgb), 0.35),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.btn-ai:hover:not(:disabled) {
  background: var(--ai-gradient-hover);
  box-shadow: 0 6px 16px rgba(var(--ai-gradient-start-rgb), 0.4),
    0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.btn-ai:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(var(--ai-gradient-start-rgb), 0.25);
}

/* AIボタンのキラッと光るアイコン */
.btn-ai .sparkle-icon {
  width: 16px;
  height: 16px;
  transition: all var(--transition-normal);
  /* アニメーションは継続 */
}

/* 通常時（非ローディング時）のアニメーション制御 */
.btn-ai:not(.loading) .sparkle-icon {
  animation: none; /* デフォルトではアニメーション停止 */
}

.btn-ai:not(.loading):hover .sparkle-icon {
  animation: sparkle 2s ease-in-out infinite; /* ホバー時のみアニメーション */
}

/* ローディング中は常にアニメーション */
.btn-ai.loading .sparkle-icon {
  animation: sparkle 2s ease-in-out infinite;
}

.btn-ai.loading .button-text {
  display: none;
}

.btn-ai.loading .spinner {
  display: inline-block;
}

/* リンク風ボタン */
.btn-link {
  background: none;
  color: var(--theme-navy);
  border: 1px solid var(--gray-300);
  box-shadow: none;
  padding: var(--spacing-sm) var(--spacing-md);
}

.btn-link:hover:not(:disabled) {
  background: var(--gray-50);
  color: var(--theme-navy-light);
  transform: none;
  box-shadow: none;
}

/* ローディングスピナー */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ========================================
   フォームコンポーネント
   ======================================== */

/* フォームグループ */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  font-size: var(--font-size-sm);
}

/* 入力フィールド */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  background: var(--white);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--theme-navy);
  box-shadow: 0 0 0 3px rgba(var(--theme-navy-rgb), 0.1), var(--shadow-md);
  transform: translateY(-1px);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray-400);
}

/* 絞り込みの帯（入力と「絞り込む」を 1 行に並べる器）。
   ⚠ 囲み罫線は使わない＝背景トーンだけで区切る（ui-design-style.md）。
   ⚠ **ここが .fa-filter の唯一の定義**（2026-09-23 に fa_request.css / fa_send_history.css の
      写しをここへ寄せた。FA の 3 画面が同じ形の帯を持つため、ページごとに書き直さない）。 */
.fa-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--gray-50);
}

.fa-filter .form-input {
  width: auto;
  min-width: 160px;
  margin: 0;
}

/* ===== 社内の一覧の共通部品（並び替え・チェック・KPI）=================== */
/* 🔴 ここが唯一の定義。画面ごとの CSS に写さない（正本
   docs/plans/archive/admin-list-common-parts.md）。 */

/* 列見出しの並び替えリンク。⚠ 押せると分かる色にする（色を落ち着かせるとただの文字に見える）。 */
.c-table__sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.c-table__sort:hover {
  text-decoration: underline;
}

.c-table__sort-mark {
  margin-left: 4px;
  font-size: 0.75em;
  color: var(--gray-400);
}

.c-table__sort.is-sorted {
  font-weight: var(--font-weight-bold);
}

.c-table__sort.is-sorted .c-table__sort-mark {
  color: var(--theme-navy);
}

/* チェックの列。⚠ .c-table--compact でも潰れない幅を持たせ、この列だけ上下中央に置く
   （表の既定は vertical-align: top なのでチェックだけ上にずれる）。 */
.c-table th.c-table__check,
.c-table td.c-table__check {
  width: 2.5rem;
  text-align: center;
  vertical-align: middle;
}

/* 🔴 行の状態は必ず `> td` に塗る（tr に塗ると縞 tbody tr:nth-child(even) に負けて
   偶数行だけ色が消える）。⚠ 重なり順は「選択中 > 一括の対象 > 上限到達 > 縞」。
   ⚠ is-selected（いま詳細を開いている 1 行）と is-checked（一括の対象）は別の色にする
   ＝意味が違うので、同じ色だと操作の対象を取り違える。 */
.c-table tbody tr.is-checked > td {
  background: rgba(var(--theme-navy-rgb), 0.06);
}

.c-table tbody tr.is-checked:hover > td {
  background: rgba(var(--theme-navy-rgb), 0.1);
}

/* 件数の但し書き（「全 320 件のうち、この並びで先頭 100 件」）。 */
.c-list-note {
  margin: 6px 0 16px;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* 一括の帯。⚠ 囲み罫線は使わない（背景トーンだけ・ui-design-style.md）。 */
.c-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--gray-50);
}

.c-bulk-bar .form-input {
  width: auto;
  min-width: 140px;
  margin: 0;
}

.c-bulk-bar__count {
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.c-bulk-bar__op,
.c-bulk-bar__reason {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.c-bulk-bar__op-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
}

.c-bulk-bar__note {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* 要約の数字（KPI）。⚠ 罫線で囲まず背景トーンで区別。率は値の下に小さく添える。
   ⚠ 2026-09-23 に fa_request.css の .fa-stats* をここへ移して 1 系統にした
   （ad_ops.css の .ad-ops-kpi* と campaign_analytics の inline style も畳む）。 */
.c-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 8px 0 16px;
}

.c-kpi__item {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gray-50);
}

.c-kpi__item--link {
  color: inherit;
  text-decoration: none;
}

.c-kpi__item--link:hover {
  background: var(--gray-100);
}

/* いま選んでいる KPI（押すと一覧がその区分に絞られる物）。
   ⚠ 濃色の上では見出しの灰色が読めないので、中の字も白へ上書きする
   （2026-09-23 に ad_ops.css の `.ad-ops-kpi-link.is-active` からここへ寄せた）。 */
.c-kpi__item--link.is-active {
  background: var(--gray-700);
}

.c-kpi__item--link.is-active .c-kpi__label,
.c-kpi__item--link.is-active .c-kpi__value,
.c-kpi__item--link.is-active .c-kpi__unit,
.c-kpi__item--link.is-active .c-kpi__rate {
  color: var(--white);
}

.c-kpi__item--main {
  background: rgba(16, 185, 129, 0.08);
}

.c-kpi__label {
  display: block;
  margin: 0 0 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--gray-500);
}

.c-kpi__value {
  display: block;
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.c-kpi__unit {
  margin-left: 2px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--gray-500);
}

/* 要約の段（数字の帯・ファネルなど）を**横に並べる**器。
   ⚠ 縦に積むと、その分だけ「押すと変わる表」が画面の折り返しより下へ落ちる（2026-09-23 実測）。
   ⚠ 狭い画面では自動で縦に戻る。 */
.c-summary-row {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(300px, 420px);
  gap: 16px;
  align-items: start;
  margin: 0 0 16px;
}

/* 左右が同じくらいの重さの時（依頼詳細の「進み具合｜事務局の操作」）。
   ⚠ 画面ごとに grid を書き直さない＝器はこの 1 つで、違いは列幅の修飾だけ。 */
.c-summary-row--even {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.c-summary-row > * {
  margin: 0;
}

/* 右側に入る数字の帯は 2 列に畳む（1 列だと縦に伸びて意味が無い） */
.c-summary-row .c-kpi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .c-summary-row {
    grid-template-columns: 1fr;
  }
}

/* 一覧の見出し行。絞り込みと、その状態を示す一言を**同じ 1 行**に置く器。
   ⚠ 縦に積むと、その分だけ一覧が画面の折り返しの下へ落ちる（2026-09-23 に実測して 1 行へ寄せた）。 */
.c-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.c-list-head .c-tabs,
.c-list-head .fa-filter {
  margin: 0;
}

/* 数字の帯の小さい版。一覧が主役の画面で使う（数字は読めるまま、高さだけ落とす）。 */
.c-kpi--compact {
  gap: 8px;
  margin: 4px 0 12px;
}

.c-kpi--compact .c-kpi__item {
  padding: 6px 12px;
}

.c-kpi--compact .c-kpi__label {
  margin: 0;
}

.c-kpi--compact .c-kpi__value {
  display: inline;
  font-size: 16px;
}

.c-kpi--compact .c-kpi__rate {
  display: inline;
  margin-left: 6px;
}

/* タブの帯（.c-tabs）。**縦に長い 1 枚の画面を節ごとに切り替える**時に使う
   （依頼詳細＝`panel-tabs.js`）。⚠ 一覧の区分は**タブにしない**（2026-09-23 ユーザー決定＝
   上段の数字（`.c-kpi`）の方が読みやすい。同じ区分を数字とタブの 2 か所に出さない）。
   ⚠ 囲みは背景トーンと「いまここ」の下線だけ（全周罫線・左アクセントバーは使わない＝UI 規約）。
   ⚠ 折り返さない（区分の並びが読めなくなる）＝狭い画面では横スクロール。 */
.c-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 12px;
  overflow-x: auto;
}

/* タブは画面によって「リンク（一覧の区分）」と「ボタン（節の切り替え）」の 2 通りになる。
   ⚠ 見た目は 1 つ＝`button.c-tab` にも同じ形を当てる（素のボタンの枠と背景を消す）。 */
button.c-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  cursor: pointer;
}

.c-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  text-decoration: none;
  white-space: nowrap;
}

.c-tab:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

/* ⚠ **選んでいる＝`is-active`**（`.c-kpi__item--link` と同じ呼び名）。
   `is-current` は「道の現在地」（進み具合の段・ご利用の流れ）に使う別の印＝混ぜない。 */
.c-tab.is-active {
  border-bottom-color: var(--theme-navy);
  color: var(--gray-900);
  font-weight: var(--font-weight-bold);
}

.c-kpi__rate {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

/* タブ型フィールド（steps_*.json の type: "tabs"）。
   値は隣の hidden input が持ち、ここは見た目と操作だけ。ハンドラは lp_creation_editor.js の click 委譲。 */
.field-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 4px;
}

.field-tabs__tab {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.field-tabs__tab:hover:not(:disabled) {
  color: var(--theme-navy);
}

.field-tabs__tab.is-active {
  background: var(--white);
  color: var(--theme-navy);
  box-shadow: var(--shadow-sm);
}

.field-tabs__tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.field-tabs__tab:focus-visible {
  outline: 2px solid var(--theme-navy);
  outline-offset: 2px;
}

/* チェックボックス・ラジオボタン */
.form-checkbox,
.form-radio {
  margin-right: var(--spacing-sm);
  width: 18px;
  height: 18px;
  accent-color: var(--theme-navy);
  cursor: pointer;
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

/* .form-group の中でも横並びを保つ。style.css の `.form-group label { display: block }` と
   `.form-group input { width: 100% }` が勝つと、丸が中央に浮き選択肢の文字が次の行へ落ちる
   （2026-10-16 解約フォームで実測） */
.form-group .radio-label {
  display: flex;
  margin-bottom: var(--spacing-xs);
}

.form-group .radio-label input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0;
  flex: none;
}

/* ラベル文字はドラッグで選択させない（チェックを外そうとして範囲選択になるため） */
.checkbox-label span,
.radio-label span {
  user-select: none;
}

/* フォームヘルプテキスト */
.form-help {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  line-height: 1.4;
}

/* ========================================
   カードコンポーネント
   ======================================== */

.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.card-body {
  padding: var(--spacing-xl);
}

.card-footer {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

/* 統計カード */
.stat-card {
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: all var(--transition-normal);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.stat-number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-navy);
  line-height: 1;
}

/* ========================================
   ヘルプツールチップコンポーネント
   ======================================== */
.c-help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-xs);
  cursor: help;
}

.c-help-tooltip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--gray-300);
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.c-help-tooltip:hover .c-help-tooltip__icon,
.c-help-tooltip--visible .c-help-tooltip__icon,
.c-help-tooltip--open .c-help-tooltip__icon {
  background-color: var(--info-color);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.c-help-tooltip__content {
  /* display:none は必須。visibility:hidden だけだと absolute 配置の幅が document の
     scrollWidth に残り、トリガーが右寄りのページで空の横スクロールが生まれる */
  display: none;
  position: absolute;
  bottom: calc(100% + var(--spacing-sm));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 600px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-md);
  background-color: var(--tooltip-bg);
  color: var(--white);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-tooltip);
  white-space: normal;
  word-wrap: break-word;
  /* 置かれた場所の揃えを受け継がない（数字の列の見出しは右揃え＝そのままだと文言が右に寄る） */
  text-align: center;
}

/* 改行をそのまま出す説明（箇条書きのような文）。⚠ 既定は normal のまま＝既存の
   ツールチップ（HTML で書いてある物）の見た目を変えない。
   ⚠ 複数行は**左揃え**（2026-10-08 の画面で、箇条書きが中央に寄って読みにくかった）＝
   1 行の説明は中央のまま（短い文が左に寄ると落ち着かない）。 */
.c-help-tooltip__content--lines {
  white-space: pre-line;
  text-align: left;
}


/* 矢印は親に配置し、スクロール領域外にする（1行でもスクロールバーが出るのを防ぐ） */
.c-help-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + var(--spacing-sm) - 6px);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--tooltip-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-tooltip-arrow);
}

.c-help-tooltip:hover::after,
.c-help-tooltip--visible::after,
.c-help-tooltip--open::after {
  opacity: 1;
  visibility: visible;
}

.c-help-tooltip:hover .c-help-tooltip__content,
.c-help-tooltip--visible .c-help-tooltip__content,
.c-help-tooltip--open .c-help-tooltip__content {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* 切り取る親（横スクロールする表の器など）の中では、ふきだしを画面の座標で置く
   （`help-tooltip.js` が `position: fixed` にする）。その時だけ矢印の向きを合わせる。
   ⚠ 下に開いた時は矢印も下向き＝三角が本文と逆を向いたままにしない。 */
/* 下向き（help_tip.php の $tipPosition = 'bottom'）: 本文を下に開く（画面の座標で置く時は help-tooltip.js が下を優先する） */
.c-help-tooltip__content--bottom {
  top: calc(100% + var(--spacing-sm));
  bottom: auto;
}

.c-help-tooltip.is-tip-below::after,
.c-help-tooltip:has(> .c-help-tooltip__content--bottom)::after {
  border-top-color: transparent;
  border-bottom-color: var(--tooltip-bg);
  top: 100%;
  bottom: auto;
}

.c-help-tooltip--visible .c-help-tooltip__content,
.c-help-tooltip--open .c-help-tooltip__content {
  pointer-events: auto;
}

/* ツールチップ内容のスタイル */
.c-help-tooltip__content strong {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-semibold);
}

.c-help-tooltip__content ul {
  margin: var(--spacing-xs) 0;
  text-align: left;
  padding-left: var(--spacing-lg);
  list-style-type: disc;
}

.c-help-tooltip__content li {
  margin-bottom: var(--spacing-xs);
}

/* モバイル: ツールチップがビューポート右端からはみ出さないよう幅を制限 */
@media (max-width: 768px) {
  .c-help-tooltip__content {
    max-width: min(600px, calc(100vw - 24px));
  }
}

/* ========================================
   モーダルコンポーネント
   ======================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-bg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(60px + var(--spacing-lg)) 0 var(--spacing-3xl) 0; /* ヘッダー下に上余白・画面下に下余白 */
  z-index: var(--z-debug);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  width: 90%;
  max-width: 500px;
  max-height: calc(100vh - 60px - var(--spacing-lg) - var(--spacing-3xl) - var(--spacing-3xl)); /* ヘッダー＋上余白＋下余白内に収める */
  min-height: 0;
  margin-bottom: var(--spacing-3xl); /* 画面下との余白を確実に確保（flex 子の margin で効かせる） */
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: modalSlideIn 0.3s ease-out;
}

.modal-large {
  max-width: 900px;
}

.modal-close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  color: var(--gray-400);
  padding: var(--spacing-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  color: var(--gray-600);
  background: var(--gray-100);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================
   アラート・トーストコンポーネント
   ======================================== */

.alert {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.alert-success {
  background-color: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

.alert-error {
  background-color: var(--alert-error-bg);
  border-color: var(--alert-error-border);
  color: var(--alert-error-text);
}

.alert-warning {
  background-color: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.alert-info {
  background-color: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

/* アラートの中の箇条書き（既定の上下余白と字下げを打ち消す） */
.alert ul {
  margin: 0;
  padding-left: var(--spacing-xl);
}

/* トースト通知の見た目は style.css の「トースト通知システム」が唯一の正本（2026-09-27 に二重定義を畳んだ） */

/* ========================================
   バッジコンポーネント
   ======================================== */

/* バッジ ＝ 状態を示す短いラベル。ここが唯一の正本（画面ごとに作らない）。
   2026-09-11 に 5 系統（.badge / .fa-badge / .status-badge / .merge-tag-badge / .reports-badge）を
   ここへ寄せた。

   🔴 **既定は「淡い背景＋濃い文字」**（ユーザー決定 2026-09-11）。
      以前はグラデーション＋白文字を 6 色ぶら下げていたが、UI 規約
      （~/.claude/docs/rules/ui-design-style.md）の「アクセント色は 2 色まで」
      「塗りバッジの乱発を避ける」「強グラデは避ける」の 3 つとも外れていた。
      表の行にバッジが並ぶ画面では、淡いトーンの方が読みやすい。
      ⚠ 塗りが要る所だけ `.badge--solid` で opt-in する。

   🔴 **`white-space: nowrap` を既定にしない**。2026-09-10 に、文章を入れたバッジが
      nowrap のままページ本体を横へ押し広げた（390px の画面で 699px）。
      呼び出し側だけ直すと罠が残るので、**既定は折り返し**・必要な所だけ
      `.badge--nowrap` を付ける。 */

.badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  line-height: 1.5;
  background: var(--gray-100);
  color: var(--gray-700);
}

/* --- 意味（淡いトーン）。⚠ 増やす前に「既存で表せないか」を見る -------------- */

.badge-success {
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
}

.badge-danger {
  background: var(--alert-error-bg);
  color: var(--alert-error-text);
}

.badge-warning {
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
}

.badge-info {
  background: var(--alert-info-bg);
  color: var(--alert-info-text);
}

.badge-secondary {
  background: var(--gray-200);
  color: var(--gray-600);
}

.badge-primary {
  background: var(--theme-navy-pale, var(--gray-100));
  color: var(--theme-navy);
}

/* ⚠ `.badge-active` は削除した（2026-09-11）。`.badge-success` と 1 文字も違わず、
   **同じ見た目のクラスを 2 つ持つ**状態だった（今回まさに畳もうとしている形）。
   呼び出し側（アクティブ／非アクティブ）は `.badge-success` / `.badge-secondary` を使う。 */

/* --- 修飾 ------------------------------------------------------------------ */

/* 折り返さない（短い固定ラベルだけ）。⚠ 文章には**付けない**＝ページが横に伸びる */
.badge--nowrap {
  white-space: nowrap;
}

/* 塗りつぶし。⚠ 乱発しない（UI 規約でアクセントは 2 色まで） */
.badge--solid.badge-success {
  background: var(--success-color);
  color: var(--white);
}

.badge--solid.badge-danger {
  background: var(--danger-color);
  color: var(--white);
}

.badge--solid.badge-secondary {
  background: var(--gray-500);
  color: var(--white);
}

/* ========================================
   テーブルコンポーネント
   ======================================== */

/* 表（.c-table）— 画面ごとに表クラスを作らない。ここが唯一の正本。
   ⚠ **囲みは背景トーンだけ**（左アクセントバー・全周罫線は使わない＝UI スタイル規約）。
   ⚠ **横に長い表は wrap の中だけを横スクロールさせる**（列を減らさない・ページ本体は伸ばさない）。
   ⚠ 生値を書かない（色・余白・文字サイズはトークン経由）。
   修飾は modifier だけ: --compact（行を詰める）/ --lined（行に下罫線）/ --sticky-head（見出しを固定）。 */

.c-table-wrap {
  /* 幅の広い表はここの中だけが横に動く */
  overflow-x: auto;
  margin: var(--spacing-sm) 0 var(--spacing-lg);
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  /* 下地を白で持つ＝薄い灰色の画面に置いても表が面として見え、縞（--gray-50）が効く */
  background: var(--white);
}

.c-table th,
.c-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
}

.c-table th {
  background: var(--gray-50);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-700);
  white-space: nowrap;
}

.c-table td {
  vertical-align: top;
}

/* 縞（囲み罫線の代わりに行の切れ目を示す） */
.c-table tbody tr:nth-child(even) {
  background: var(--gray-50);
}

.c-table tbody tr {
  transition: background-color 0.15s ease;
}

.c-table tbody tr:hover {
  background: var(--gray-100);
}

/* 🔴 **行の状態はセルに塗る**。行（tr）に塗ると縞（tr:nth-child(even)）に負けて
   偶数行だけ色が消える。状態クラスを足す時は必ず `> td` に塗ること。 */
.c-table tbody tr.is-selected > td {
  background: var(--table-row-selected);
}

.c-table tbody tr.is-limit-reached > td {
  background: var(--limit-reached-bg);
}

.c-table tbody tr.is-limit-reached:hover > td {
  background: var(--limit-reached-bg-hover);
}

/* 合計など、明細でない行 */
.c-table tbody tr.is-total > th,
.c-table tbody tr.is-total > td {
  background: var(--gray-100);
  font-weight: var(--font-weight-medium);
}

/* 行を詰める（行数の多い一覧） */
.c-table--compact th,
.c-table--compact td {
  padding: var(--spacing-sm) var(--spacing-md);
}

/* 行に下罫線を引く（明細の区切りが縞だけでは足りない表） */
.c-table--lined th,
.c-table--lined td {
  border-bottom: 1px solid var(--gray-200);
}

.c-table--lined tbody tr:last-child td {
  border-bottom: none;
}

/* 見出しを画面上端に固定（縦に長い一覧） */
.c-table--sticky-head th {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}

/* 縦に長い一覧で、スクロール中も見出しの行を残す箱（2026-10-21 顧客一覧・林周平さん指示）。
   ⚠ `.c-table--sticky-head` だけでは効かない場所がある＝`.c-table-wrap` は横に送る箱（overflow-x）で、
      その中の `th` はページには貼り付けられない。箱そのものを縦にも送る箱にして、見出しを箱の上端に貼る。
   ⚠ 高さは「画面の高さ − 全体のヘッダー」（--app-sticky-top）＝箱の下端が画面の外へ出ない。
   使い方: `<div class="c-table-wrap c-table-wrap--sticky-head"><table class="c-table c-table--sticky-head">`。 */
.c-table-wrap--sticky-head {
  max-height: calc(100vh - var(--app-sticky-top) - 24px);
  overflow: auto;
}

/* 見出しの背景は `.c-table th` の塗り（不透明）のまま＝下の行が透けない。重なり順だけ行より上へ */
.c-table-wrap--sticky-head > .c-table--sticky-head thead th {
  z-index: 2;
}

/* --- セルの補助（1 か所だけに持つ） --------------------------------------- */

/* 数値列は右寄せ・桁を揃える・折り返さない。
   ⚠ **セレクタを `.c-table th/td` より強くする**。`.c-table th, .c-table td` の
      `text-align: left`（クラス 1＋要素 1）は `.c-table__num` 単独（クラス 1）に勝つ＝
      素直に書くと右寄せが効かない。要素まで書いて詳細度を上げる。 */
.c-table th.c-table__num,
.c-table td.c-table__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 日時・リンクなど折り返すと読めなくなる列 */
.c-table th.c-table__nowrap,
.c-table td.c-table__nowrap {
  white-space: nowrap;
}

/* ⚠ 値が無い・出せない欄（「—」）の文字色は**既存の `.text-muted` を使う**。
   ここに同じ色の別名を作らない（同じ見た目のクラスを 2 つ持たない）。 */

/* 長い URL は 1 行に省略する（幅を決めないと URL だけで表が横に伸びる） */
.c-table__url {
  max-width: 320px;
}

.c-table__url a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 件名など長い文字列の列は 1 行に切る（全文は title 属性に入れる）。
   ⚠ 幅は 180px＝共有の配信一覧が 10 列あり、1100px の画面で最後の列まで見える値。
      これより広げると、幅の狭い画面で右端の列が wrap の外へ出る。 */
.c-table__subject {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 行の中のリンク（明細へ入る導線） */
.c-table__row-link {
  color: var(--theme-teal);
  text-decoration: none;
}

.c-table__row-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .c-table {
    font-size: var(--font-size-xs);
  }

  .c-table th,
  .c-table td {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* 🔴 幅の狭い画面で**ページ本体を横に伸ばさない**。表を wrap で包むのが作法だが、
     包み忘れても表そのものが横スクロールの器になるようにしておく（守りを 1 か所に置く）。
     ⚠ wrap の中にある表は器が二重になるので、素の table に戻す。 */
  .c-table {
    display: block;
    overflow-x: auto;
  }

  .c-table-wrap > .c-table {
    display: table;
    overflow-x: visible;
  }
}

@media (max-width: 480px) {
  .c-table th,
  .c-table td {
    padding: var(--spacing-sm);
  }
}

/* ========================================
   プログレスバー
   ======================================== */

.progress-bar {
  width: 100px;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: inline-block;
  margin-right: var(--spacing-sm);
}

.progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  transition: width var(--transition-normal);
}

.progress-text {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* ========================================
   ユーティリティクラス
   ======================================== */

/* テキスト */
.text-primary {
  color: var(--theme-navy);
}
.text-success {
  color: var(--success-color);
}
.text-danger {
  color: var(--danger-color);
}
.text-warning {
  color: var(--warning-color);
}
.text-info {
  color: var(--info-color);
}
.text-muted {
  color: var(--gray-500);
}

/* 背景 */
.bg-primary {
  background: var(--primary-gradient);
}
.bg-success {
  background: var(--success-gradient);
}
.bg-danger {
  background: var(--danger-gradient);
}
.bg-warning {
  background: var(--warning-gradient);
}
.bg-info {
  background: var(--info-gradient);
}

/* マージン・パディング */
.m-0 {
  margin: 0;
}
.mt-1 {
  margin-top: var(--spacing-xs);
}
.mt-2 {
  margin-top: var(--spacing-sm);
}
.mt-3 {
  margin-top: var(--spacing-md);
}
.mt-4 {
  margin-top: var(--spacing-lg);
}
.mb-1 {
  margin-bottom: var(--spacing-xs);
}
.mb-2 {
  margin-bottom: var(--spacing-sm);
}
.mb-3 {
  margin-bottom: var(--spacing-md);
}
.mb-4 {
  margin-bottom: var(--spacing-lg);
}

.p-0 {
  padding: 0;
}
.p-1 {
  padding: var(--spacing-xs);
}
.p-2 {
  padding: var(--spacing-sm);
}
.p-3 {
  padding: var(--spacing-md);
}
.p-4 {
  padding: var(--spacing-lg);
}

/* フレックス */
.d-flex {
  display: flex;
}
.align-items-center {
  align-items: center;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.gap-1 {
  gap: var(--spacing-xs);
}
.gap-2 {
  gap: var(--spacing-sm);
}
.gap-3 {
  gap: var(--spacing-md);
}
.gap-4 {
  gap: var(--spacing-lg);
}

/* 表示・非表示 */
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-inline-block {
  display: inline-block;
}

/* テキスト */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.font-weight-bold {
  font-weight: var(--font-weight-bold);
}
.font-weight-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-weight-medium {
  font-weight: var(--font-weight-medium);
}

/* 角丸 */
.rounded {
  border-radius: var(--radius-md);
}
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-full {
  border-radius: var(--radius-full);
}

/* シャドウ */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media (max-width: 768px) {
  .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-xs);
  }

  /* ⚠ 余白は基底と同じになったので書かない（2026-09-11 に基底を詰めた）。
     狭い画面で更に縮めたいのは文字サイズだけ。 */
  .btn-sm {
    font-size: 11px;
  }

  .modal-content {
    width: 95%;
    padding: var(--spacing-lg);
  }

  .card-body {
    padding: var(--spacing-lg);
  }

  .table th,
  .table td {
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  /* 🔴 **ボタンを無条件で全幅にしない**（2026-09-11）。
     以前は `.btn { width: 100% }` だったが、実測すると **表のセルの中のボタンや、
     横に並んだ小ボタンまで全幅**になっていた（480px で 58px → 219px / 448px）。
     ⇒ 全幅にしたいのは「フォームの下に単独で置く主要アクション」だけなので、
     その器（`.form-actions`）の中に限る。
     ⚠ 他の場所で全幅にしたい時は、器の側にクラスを足して opt-in する。 */
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .modal-content {
    width: 98%;
    margin: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
  }
}

/* ========================================
   トグルスイッチ（ON/OFF）共通コンポーネント
   markup: <label class="toggle-switch"><input type="checkbox"><span class="toggle-switch__slider"></span></label>
   ======================================== */
.toggle-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  cursor: pointer;
  vertical-align: middle;
}

.toggle-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.toggle-switch__slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300, #cbd5e1);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.toggle-switch__slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--white, #fff);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-switch__slider {
  background: var(--info-color, #2563eb);
}

.toggle-switch input:checked + .toggle-switch__slider::before {
  transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-switch__slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-switch input:focus-visible + .toggle-switch__slider {
  outline: 2px solid var(--info-link, #2563eb);
  outline-offset: 2px;
}

/* ===== 左右 2 ペイン（左＝選ぶ・右＝選んだ物の中身）=====================================
 * 一覧の下に詳細を積むと、選ぶたびにスクロールで往復することになる。左右に並べて
 * 「選ぶ」と「見る」を同時に置く。狭い画面では縦に積む（同じ HTML のまま）。
 *
 * 🔴 **ここが並べ方の正本**（2026-10-01 に `ad_ops.css` から移した）。同じ役割の部品を
 *    画面ごとに作らない＝使う画面は広告運用の 4 つと「送り先の下見」。
 * ⚠ 中身の調整（見出しの固定・選択行の太字など）は**各画面の CSS**で
 *    `.c-split__list ...` のように祖先で絞って書く（ここを上書きしない）。
 *
 *   <div class="c-split">                     … 既定は左が狭い（選ぶ側が一覧）
 *   <div class="c-split c-split--side">       … 左を広く（一覧が主役の画面）
 *     <div class="c-split__pane c-split__list">…</div>
 *     <div class="c-split__pane c-split__detail">
 *       <p class="c-split__empty">左から選ぶと、ここに…が出ます。</p>
 *     </div>
 */
.c-split {
  display: grid;
  grid-template-columns: minmax(340px, 38%) 1fr;
  gap: 20px;
  align-items: start;
}

/* 一覧が主役の画面。⚠ 基底と併記して**比率だけ**を変える
   （sticky・狭い画面での縦積みは基底のまま効かせる）。 */
.c-split--side {
  grid-template-columns: 1fr minmax(300px, 30%);
}

.c-split__pane {
  min-width: 0; /* grid 内で表が横にはみ出さない */
}

.c-split__list {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* ⚠ `top` は `--app-sticky-top`（全体のヘッダーの下）**ではない**＝ペインは本文の中で
   貼り付くので、ヘッダー分を空けると右側だけ下がって見える。移設前の値をそのまま保つ。 */
.c-split__detail {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* まだ何も選んでいない時の案内。⚠ 器は常に描いてここを出す（器ごと消さない＝
   後から中身が来た時に書き込む先が無くなる・ui-live-updates の決まり）。 */
.c-split__empty {
  color: var(--gray-500);
  padding: 40px 8px;
  text-align: center;
}

@media (max-width: 1100px) {
  .c-split,
  .c-split--side {
    grid-template-columns: 1fr;
  }

  .c-split__list,
  .c-split__detail {
    position: static;
    max-height: none;
  }
}

/* ===== グロースハックラボ退会申請フォーム（membership_cancel*.php・2026-10-17 改訂 4） =====
   土台はマニュアルの記事（docs.css の .doc-article--manual）。ここはこの画面だけの部品。
   囲みは背景の色だけで分ける（罫線・左の縦線は使わない＝UI の規約）。 */

/* マニュアルの記事の本文と同じくらいの幅に（記事は左右の目次と並ぶが、この画面は 1 列） */
.doc-article--manual.c-cancel {
  /* 本文の白い枠の左右の内側の余白（docs.css の .doc-article--manual と同じ値）＝色の範囲を枠の端まで広げる幅 */
  --bleed: 2.5rem;
  max-width: 880px;
  margin: 0 auto;
  overflow: hidden;
}

/* 色の範囲を本文の白い枠の左右の端まで広げる（横に白を残さない・2026-10-17 林周平さん） */
.c-cancel__intro,
.c-cancel__formarea {
  margin-left: calc(var(--bleed) * -1);
  margin-right: calc(var(--bleed) * -1);
  padding-left: var(--bleed);
  padding-right: var(--bleed);
}

/* --- LP のような読ませ方（2026-10-17 林周平さん）＝見出し・案内文・カード・メッセージは中央揃え、
   見出しは大きく前後を広く。⚠ 注意事項の箇条書き・確認の印・入力欄は左揃えのまま（長い文と入力は中央だと読みにくい） --- */
.c-cancel .doc-article__head {
  justify-content: center;
  text-align: center;
}

.c-cancel .doc-article__title {
  font-size: 2rem;
}

.c-cancel .doc-article__body > p {
  margin-bottom: 1.25rem;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 2;
}

.c-cancel .doc-article__body h2 {
  margin: 5rem 0 2.5rem;
  padding: 0;
  border-bottom: none;
  text-align: center;
  font-size: 3rem;
  line-height: 1.35;
  /* 語の途中で折らず <wbr> の位置で折る。幅が足りない時だけ途中でも折る（はみ出さない） */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.c-cancel .c-cancel__period,
.c-cancel .c-cancel__intro-label {
  text-align: center;
}

/* --- 退会申請のスケジュール（受付開始 → 締め切り → 契約更新日を時系列の比率で） ---
   帯の上に●の印、印から日付の吹き出しへ縦の罫線を引く（締め切りは帯の上・開始と更新日は帯の下） */
.c-cancel__schedule {
  margin: 2.5rem 0 4rem;
  padding: 2rem 2rem 1.75rem;
  background: var(--gray-50);
  border-radius: 12px;
}

/* 「◯◯様のご契約内容」＝契約期間の上の見出し（2026-10-18 林周平さん） */
.c-cancel .c-cancel__period-title {
  margin: 0 0 0.75rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--theme-navy);
}

.c-cancel__period {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.c-cancel__timeline {
  --deadline: 75%;
  --pin: 1rem;
  --leader: 1.25rem;
  display: grid;
  padding: 0 calc(var(--pin) / 2);
}

.c-cancel__above,
.c-cancel__below {
  position: relative;
  height: calc(var(--leader) + 3rem);
}

.c-cancel__track {
  position: relative;
  height: 2rem;
}

.c-cancel__bands {
  display: flex;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.c-cancel__band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.c-cancel__band span {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.375rem;
}

.c-cancel__band--open {
  flex: 0 0 var(--deadline);
  background: #fde68a;
  color: #78350f;
}

.c-cancel__band--closed {
  flex: 1 1 auto;
  background: var(--gray-300);
  color: var(--gray-700);
}

/* ●の印（帯の中央の高さ・日付の位置） */
.c-cancel__pin {
  position: absolute;
  top: 50%;
  width: var(--pin);
  height: var(--pin);
  margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);
  border-radius: 50%;
  background: var(--theme-navy);
  box-shadow: 0 0 0 3px #fff;
}

.c-cancel__pin--start {
  left: 0;
}

.c-cancel__pin--deadline {
  left: var(--deadline);
  background: var(--warning-dark);
}

.c-cancel__pin--renewal {
  left: 100%;
}

/* 吹き出し（日付）と、●へ向かう縦の罫線 */
.c-cancel__callout {
  position: absolute;
  display: grid;
  gap: 0.125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.c-cancel__callout::before {
  content: "";
  position: absolute;
  width: 2px;
  height: var(--leader);
  background: currentColor;
}

.c-cancel__callout-label {
  font-size: 0.75rem;
  font-weight: 700;
}

.c-cancel__callout-date {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
}

/* 締め切り: 帯の上・吹き出しの右端が締め切りの位置（右へはみ出さない） */
.c-cancel__callout--deadline {
  bottom: var(--leader);
  right: calc(100% - var(--deadline));
  margin-right: -1px;
  text-align: right;
  justify-items: end;
  color: var(--warning-dark);
}

.c-cancel__callout--deadline::before {
  right: 0;
  top: 100%;
}

/* 開始と更新日: 帯の下・左端と右端から */
.c-cancel__callout--start,
.c-cancel__callout--renewal {
  top: var(--leader);
  color: var(--theme-navy);
}

.c-cancel__callout--start {
  left: -1px;
}

.c-cancel__callout--start::before {
  left: 0;
  bottom: 100%;
}

.c-cancel__callout--renewal {
  right: -1px;
  text-align: right;
  justify-items: end;
}

.c-cancel__callout--renewal::before {
  right: 0;
  bottom: 100%;
}

.c-cancel__note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--gray-600);
  line-height: 1.7;
}

/* 携帯の縦のステップ（下の @media で出す）。左の列に●と色の縦線、右の列に日付と期間の名前 */
.c-cancel .c-cancel__steps {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-cancel .c-cancel__steps li {
  margin: 0;
}

.c-cancel__step,
.c-cancel__span {
  position: relative;
  padding-left: 1.75rem;
}

.c-cancel__step {
  display: grid;
  gap: 0.0625rem;
  padding-block: 0.125rem;
  font-variant-numeric: tabular-nums;
}

/* ● */
.c-cancel__step::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.3rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--theme-navy);
}

.c-cancel__step--deadline::before {
  background: var(--warning-dark);
}

.c-cancel__step-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-600);
}

.c-cancel__step--deadline .c-cancel__step-label {
  color: var(--warning-dark);
}

.c-cancel__step-date {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
}

/* ●と●の間の期間＝色の縦線と、その期間の名前 */
.c-cancel__span {
  padding-block: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.c-cancel__span::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 0.375rem;
  border-radius: 3px;
}

.c-cancel__span--open {
  color: #78350f;
}

.c-cancel__span--open::before {
  background: #fcd34d;
}

.c-cancel__span--closed {
  color: var(--gray-600);
}

.c-cancel__span--closed::before {
  background: var(--gray-300);
}

/* 準備中の枠（アイキャッチ画像・林のメッセージ動画）＝決まるまで場所だけ見せる */
.c-cancel__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 10px;
}

.c-cancel__placeholder--eyecatch {
  aspect-ratio: 16 / 5;
  max-width: 100%;
  margin: 0 0 1.5rem;
}

.c-cancel__placeholder--video {
  position: absolute;
  inset: 0;
  color: var(--gray-300);
  background: var(--gray-800);
  border-radius: 0;
}

/* --- 更新特典のご案内（2026-10-20・views/renewal_benefit.php と退会申請フォームの冒頭のリンク） --- */
/* 動画の下でめくるスライド（横のスクロールを 1 枚ずつ吸着させる＝指のスワイプもボタンも同じ動き） */
.c-benefit-slides {
  margin-bottom: 1rem;
}

.c-benefit-slides__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--gray-100);
}

.c-benefit-slides__track::-webkit-scrollbar {
  display: none;
}

.c-benefit-slides .c-benefit-slides__slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

/* 記事の画像の指定（余白・角丸・影）を外し、スライドをすき間なく並べる */
.c-benefit-slides .c-benefit-slides__slide img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.c-benefit-slides__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.c-benefit-slides__count {
  min-width: 4.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 退会申請フォームの冒頭の「更新特典のご案内を見る」（罫線なしの背景トーンで目に留める） */
.c-cancel .doc-article__body > .c-cancel__benefit-link {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: #fffbeb;
}

/* --- 「退会申請の前にまずはこちらをご覧ください」（動画・振り返り ↓ 予定） --- */
.c-cancel__intro {
  margin-top: 4rem;
  margin-bottom: 0;
  padding-top: 1.5rem;
  padding-bottom: 5rem;
  background: #fffbeb;
}

.c-cancel .c-cancel__intro-label {
  margin: 3.5rem 0 2.5rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--theme-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.c-cancel__video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin-bottom: 3rem;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-900);
}

.c-cancel__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.c-cancel__box {
  padding: 2.5rem 2rem 2.5rem;
  border-radius: 14px;
}

.c-cancel__box--lookback {
  background: var(--theme-navy-pale);
}

.c-cancel__box--roadmap {
  background: rgba(var(--theme-teal-rgb), 0.1);
}

/* 色の枠の上の小さな見出し（確認画面の「活用方法のご相談」） */
.c-cancel .c-cancel__box-label {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--theme-navy);
}

/* 色の枠の見出しの下の 1 行（確認画面の「残った期間で…ご提案します」） */
.c-cancel .c-cancel__box-sub {
  margin: -1.5rem 0 2rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--theme-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 振り返りと予定の見出しは「以下は、退会フォームのご案内です」と同じ大きさ（2026-10-19 林周平さん指示） */
.c-cancel .c-cancel__box h2 {
  margin: 0.5rem 0 2.5rem;
  font-size: 1.75rem;
}

/* 次の節へつなぐ下向きの三角（文字の ↓ でなく図形＝2026-10-18 林周平さん指示） */
.c-cancel__arrow {
  width: 0;
  height: 0;
  margin: 1.75rem auto;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 24px solid var(--theme-teal);
}

/* 2×2 のカード（携帯では 1 列）。タイトル 1 行・内容 2 行（文字数の上限は MembershipRetention） */
.c-cancel__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.c-cancel__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(var(--theme-navy-rgb), 0.08);
}

.c-cancel__card .doc-icon {
  flex: none;
}

.c-cancel__card-text {
  min-width: 0;
}

.c-cancel .c-cancel__card h3 {
  margin: 0.25rem 0 0.5rem;
  /* 改行は見出しの <wbr>（意味の切れ目）だけ。幅が足りない時だけ途中でも折る（はみ出さない） */
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.5;
}

/* 見出しの区切りの中は折らない（`^` の位置の <wbr> と `|` の位置の <br> でだけ改行する） */
.c-cancel__nobr {
  white-space: nowrap;
}

.c-cancel .c-cancel__card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--gray-700);
}

/* アップデート予定の下の、ご支援のメッセージ（2026-10-17 林周平さん） */
/* ご支援のメッセージ＝白い囲みを外し、節の地の色のまま読ませる（2026-10-18 林周平さん指示） */
.c-cancel__message {
  margin-top: 1rem;
  padding: 2rem 1rem 3rem;
  text-align: center;
}

.c-cancel .c-cancel__message p {
  margin: 0 0 1rem;
  line-height: 1.8;
}

.c-cancel .c-cancel__message p:last-child {
  margin-bottom: 0;
}

.c-cancel .c-cancel__message-lead {
  margin-bottom: 2rem;
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--theme-navy);
  text-wrap: balance;
}

/* 「退会フォームはこちら」から下＝背景を薄い灰色に（上の案内と分ける） */
.c-cancel__formarea {
  padding-top: 5rem;
  padding-bottom: 4rem;
  background: var(--gray-100);
}

/* 灰色の範囲を枠の下端まで届かせる（下にも白を残さない）＝この画面だけ枠と本文の下の余白をなくす。
   受付期間外などで案内だけが出る時は、その案内の下に余白を持たせる */
.doc-article--manual.c-cancel {
  padding-bottom: 0;
}

.c-cancel .doc-article__body {
  padding-bottom: 0;
}

.c-cancel .doc-article__body > .alert:last-of-type,
.c-cancel .doc-article__body > form:last-of-type {
  margin-bottom: 2rem;
}

.c-cancel .c-cancel__formarea h2 {
  margin-top: 0;
  font-size: 1.75rem;
}

/* 灰色の範囲の中に置いた色の枠（確認画面の相談の案内）は、送信ボタンから離し、枠の見出しの大きさのまま */
.c-cancel .c-cancel__formarea .c-cancel__box {
  margin-top: 2.5rem;
}

.c-cancel .c-cancel__formarea .c-cancel__box h2 {
  margin: 0.5rem 0 2.5rem;
  font-size: 2.6rem;
}

.c-cancel .c-cancel__notice h3 {
  margin-bottom: 1.25rem;
  text-align: center;
  font-size: 1.5rem;
}

/* 送る文面の下書きをそのまま見せる枠（退会の申し出の処理の画面）。
   改行と空白を活かし、長い行は折り返す（横スクロールを出さない） */
.c-pre {
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: var(--gray-100, #f3f4f6);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- 確認画面（お申し出の内容）＝全体を白く、囲みを減らす（2026-10-18 林周平さん） --- */
.c-cancel--confirm .c-cancel__formarea {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
  background: #fff;
}

/* 取り下げ不可の確認は囲まない（地の白のまま読ませる） */
.c-cancel__final {
  margin: 0;
}

.c-cancel .c-cancel__final p {
  margin: 0 0 0.75rem;
  line-height: 1.8;
}

/* 相談の案内＝本文に差し込むコラム（小さめ・白の中の薄い面） */
.c-cancel--confirm .c-cancel__box {
  max-width: 560px;
  margin: 2rem auto 0;
  padding: 1.5rem 1.5rem 1.75rem;
}

.c-cancel--confirm .c-cancel__box-label {
  font-size: 0.8125rem;
}

.c-cancel--confirm .c-cancel__formarea .c-cancel__box h2 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.c-cancel--confirm .c-cancel__box-sub {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

.c-cancel--confirm .c-cancel__box p {
  font-size: 0.875rem;
  line-height: 1.8;
}

/* ボタンの下の注意書き（実施期限・日程の相談先）＝ボタンに揃えて中央・本文より一段小さく */
.c-cancel--confirm .c-cancel__box .c-cancel__note {
  text-align: center;
  font-size: 0.8125rem;
}

.c-cancel--confirm .c-cancel__box .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* --- 退会申請フォーム（注意事項は事務的に・落ち着いた見た目） --- */
.c-cancel__form {
  display: grid;
  gap: 2.5rem;
}

.c-cancel__notice {
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: 12px;
}

.c-cancel .c-cancel__notice h3 {
  margin-top: 0;
}

/* 注意事項の 1 項目＝見出し（太字）＋説明の段落（2026-10-18 に箇条書きから変更・文面は林周平さん）。
   ⚠ 囲みの `.c-cancel__notice` とは別のクラスにする＝同じ名前にすると囲みの余白（2.5rem）が
      項目ごとに掛かって間延びする（2026-10-18 に実際に起きた） */
.c-cancel__notice-item {
  margin: 0 0 1.25rem;
}

.c-cancel .c-cancel__notice-item h4 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--theme-navy);
}

.c-cancel .c-cancel__notice-item p {
  margin: 0 0 0.5rem;
  line-height: 1.85;
}

.c-cancel .c-cancel__notice-item p:last-child {
  margin-bottom: 0;
}

.c-cancel .c-cancel__checks-lead {
  margin: 0 0 1rem;
  font-weight: 700;
}

.c-cancel__checks {
  display: grid;
  gap: 0.75rem;
}

/* 確認の印は行全体を押せる大きさに（携帯で押しやすく） */
.c-cancel__check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--gray-50);
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.6;
}

.c-cancel__check input {
  width: auto;
  flex: none;
  margin: 0.3em 0 0;
}

.c-cancel__field {
  display: grid;
  gap: 0.75rem;
}

.c-cancel__field label {
  font-weight: 700;
  color: var(--gray-900);
}

.c-cancel__required {
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: 0.1em;
  color: #fff;
  background: var(--danger-dark);
}

/* ボタンの並びは中央寄せ（2026-10-18 林周平さん指示） */
.c-cancel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .c-cancel__cards {
    grid-template-columns: 1fr;
  }

  .c-cancel__schedule,
  .c-cancel__box,
  .c-cancel__notice {
    padding: 1.5rem 1rem;
  }

  .c-cancel__cards {
    gap: 1rem;
  }

  .c-cancel__message {
    padding: 2rem 1.25rem;
  }

  .doc-article--manual.c-cancel {
    --bleed: 1rem;
    padding: 1.25rem 1rem 0;
  }

  /* 1 列のカードは幅が狭いので余白を詰める（アイコンは上に置いているので幅を食わない）。
     見出しの 1 行（最大 18 文字＝MembershipRetention::CARD_TITLE_LINE_MAX）が 360px 幅でも途中で折れない幅にする */
  .c-cancel__card {
    padding: 1rem 0.625rem;
  }

  .c-cancel__box {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .c-cancel .c-cancel__card h3 {
    font-size: 0.8125rem;
  }

  .c-cancel .c-cancel__card p {
    font-size: 0.8125rem;
  }

  /* LP の見出しを携帯の幅に合わせて縮める */
  .c-cancel .doc-article__title {
    font-size: 1.5rem;
  }

  .c-cancel .doc-article__body h2 {
    margin: 3.5rem 0 1.75rem;
    font-size: 1.75rem;
  }

  .c-cancel .c-cancel__box h2 {
    margin-bottom: 1.75rem;
    font-size: 1.375rem;
  }

  .c-cancel .c-cancel__intro-label {
    margin-top: 2.5rem;
    font-size: 2rem;
  }

  .c-cancel__formarea {
    padding-top: 3.5rem;
  }

  .c-cancel .c-cancel__formarea h2 {
    font-size: 1.375rem;
  }

  .c-cancel .c-cancel__formarea .c-cancel__box h2 {
    margin-bottom: 1.75rem;
    font-size: 1.5rem;
  }

  .c-cancel .c-cancel__message-lead {
    font-size: 1.25rem;
  }

  .c-cancel .doc-article__body > p {
    font-size: 1rem;
  }

  /* 比率の横帯をやめて縦のステップに（狭い幅で日付の吹き出しが重なるため） */
  .c-cancel__timeline {
    display: none;
  }

  .c-cancel .c-cancel__steps {
    display: block;
  }
}

/* 代理ログイン中の帯（Laravel の `/_l/*` の 2 つのレイアウト・laravel/resources/views/layouts/partials/acting-bar.blade.php）。
   v3 は全体のヘッダ自体の色を変える（style.css の .site-header--acting）。Laravel の画面には全体のヘッダが無いので、
   同じ色の帯を上に貼り付ける＝スクロールしても「誰のアカウントか」が見える。
   ⚠ 高さは全体のヘッダと同じ（--app-header-height）＝編集画面の固定ヘッダ（top: var(--app-sticky-top)）がその下にちょうど付く。
   ⚠ 囲み罫線は使わない（背景のトーンで分ける）。 */
.acting-bar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-lp-editor-fixed-header) + 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
  height: var(--app-header-height);
  padding: 0 1rem;
  background: var(--acting-header-bg);
  color: var(--white);
  font-family: system-ui, sans-serif;
}
/* 決まりの小窓（.acting-bar__rules）の基準は帯そのもの（sticky の帯が位置の基準になる）＝狭い幅でも帯の中に収める */
.acting-bar__who {
  min-width: 0;
}
.acting-bar__who > summary {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  line-height: 1.2;
}
.acting-bar__who > summary::-webkit-details-marker {
  display: none;
}
.acting-bar__who > summary:hover,
.acting-bar__stop-button:hover {
  background: var(--white-15);
}
.acting-bar__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* ⚠ ユーザーが自由に付けた名前が入る＝1 行に省略する（全文は title と、開いた決まりの中） */
.acting-bar__name {
  max-width: 60vw;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acting-bar__rules {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0.5rem;
  box-sizing: border-box;
  width: min(36rem, calc(100% - 1rem));
  max-height: 70vh;
  overflow: auto;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  line-height: 1.6;
}
.acting-bar__rules ul {
  margin: 0;
  padding-left: 1.2rem;
}
.acting-bar__stop {
  flex: 0 0 auto;
  margin: 0;
}
.acting-bar__stop-button {
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--white-10);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* ── 日別の棒グラフ（views/_partials/chart/daily_bars.php）。色は主色 1 つ＋灰の濃淡・文字は灰 ── */
.c-chart { margin: 0 0 0.75rem; }
.c-chart svg { width: 100%; height: auto; display: block; }
.c-chart__title { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 4px; }
.c-chart__empty { font-size: 0.875rem; color: var(--gray-500); }
.c-chart__grid { stroke: var(--gray-200); stroke-width: 1; }
.c-chart__axis { stroke: var(--gray-300); stroke-width: 1; }
.c-chart__tick { fill: var(--gray-500); font-size: 11px; }
.c-chart__bar { shape-rendering: crispEdges; }
.c-chart__bar--primary { fill: var(--theme-navy); background: var(--theme-navy); }
.c-chart__bar--muted1 { fill: var(--gray-400); background: var(--gray-400); }
.c-chart__bar--muted2 { fill: var(--gray-500); background: var(--gray-500); }
.c-chart__bar--muted3 { fill: var(--gray-300); background: var(--gray-300); }
.c-chart__bar--muted4 { fill: var(--gray-700); background: var(--gray-700); }
.c-chart__nodata { fill: var(--gray-100); background: var(--gray-100); }
.c-chart__legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.8rem; color: var(--gray-600); }
.c-chart__legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.c-chart__key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }