/* ============================================================
 * みえるDM v3 - admin 共通スタイル
 *
 * version : 1.25（2026-06-26・第97回 段階4 使い方ガイド 編集ページ）：使い方ガイドの専用編集ページ用スタイル（.ge-* ＝全画面2ペイン・パレット・ブロックカード・リッチ文ツールバー・図ブロック）と、右プレビューの本文デザイン（.guide-doc 系＝顧客ダッシュボード style.css のミラー・admin/dashboard は別 Pages のため重複許容）を追加。guide-editor.html / js/guide-editor.js と対。
 * version : 1.24（2026-06-26・イベント警告強化 ステップ7）：詳細画面のアクション警告バナー（.alert-banner ほか）を追加。重大=赤（is-danger）／注意=黄（is-warn）で「ラベル＋行動文言＋操作ボタン」を全幅表示。色は一覧の警告バッジ（.badge-danger/.badge-warn）と同系で統一。detail.js renderAlerts（バナー化）/ common.js v1.19 と対。
 * version : 1.23（2026-06-25・第92回 アラート赤バッジ）：要対処（赤）バッジの見た目を2種追加。①.badge-danger＝イベント一覧の行用（黄 .badge-warn と同形・赤系 #fef2f2/#b91c1c/#fecaca）。②.nav-badge＝左メニューの件数バッジ（赤丸 #e23b3b・白文字・既定非表示／.show で表示・折りたたみ時は隠す）。common.js v1.17 / list.js（行）／サーバー monitoring.js v1.75 と対。
 * version : 1.19（2026-06-23・第88回 ②復活の作り直し）：操作結果トーストの共通クラス .app-toast を追加（既存 .mon-toast と同スタイル）。common.js v1.16 が生成・全画面共通（§7-2）。
 * version : 1.22（2026-06-24・第92回 スピナー改訂3＝箱を少し大きく）：読み込み箱(.lo-box)の最小サイズを 180×132→220×160、内側余白を 24/32→28/36 に拡大（松谷さん「枠がもう少し大きい方が良い」）。色・枠・影・入場演出は不変。dashboard style.css v1.18 と共通。
 * version : 1.21（2026-06-24・第92回 スピナー改訂2＝箱は白＋枠で明瞭化）：v1.20 の囲い(.lo-box)がグレー#EDEEF0で白背景に対し枠がぼんやりしたため、箱を白(var(--color-surface))＋枠 border:1px solid #B5D4F4(ブランドのボーダー色)＋少し締まった影(0 6px 18px rgba24,95,165,.18)に変更。背景の覆い(白)・入場(lo-enter＝囲いが上から降りて大きく)・最小サイズ(min180×132)は不変。dashboard style.css v1.17 と共通の見た目。
 * version : 1.20（2026-06-24・第92回 スピナー改訂＝背景白＋色付きの囲い）：v1.19 が覆い全体をグレーにして全画面グレーになっていたのを是正。背景の覆い（.loading-overlay）は白(rgba 255,255,255,.85)に戻し、入場演出（lo-enter＝上から降りて大きく）は中の囲い（.lo-box）だけに適用。.lo-box はほんの少しグレー(#EDEEF0)のカード（角丸＋影＋余白）として復活＝白背景の中に色付きの囲いが上からすぅっと降りて徐々に大きくなる。囲いの最小サイズ（min-width180/min-height132・中身は中央寄せ）も設定し小さすぎを防止。スピナー本体（.lo-spinner＝Material 円形）は不変。dashboard style.css v1.16 と共通の見た目。
 * version : 1.19（2026-06-24・第92回 スピナーの覆い・入場演出）：読み込み中の覆い（.loading-overlay）を白(rgba 255白.85)→ほんの少しグレー(rgba 237,238,240,.94)に。入場を「覆いごと上からすぅっと降りて徐々に大きく＋フェードイン」（keyframes lo-enter・transform-origin top center・.55s）へ変更。白いカード枠（.lo-box の背景・影・角丸・lo-box-in 拡大）は撤去し、スピナーを直接グレーの覆いに乗せる（合意したモック準拠）。スピナー本体（.lo-spinner＝Material 円形）は不変。dashboard style.css v1.15 と共通の見た目。
 * version : 1.22（2026-07-02・第101回 小改修）：⑧郵便番号データパネルに、公式データのダウンロードリンク＋URL変更保存のスタイル（.postal-dl/.postal-dl-note/.postal-dl-link/.postal-dl-none/.postal-dl-edit/.postal-dl-input）を追加。settings.js と対。
 * version : 1.21（2026-07-02・第101回）：⑧郵便番号データパネル（.postal-status/.postal-meta/.postal-none/.postal-due/.postal-howto/.postal-steps/.postal-upload/.postal-file）と、監視画面のやさしいお知らせ（.mon-notice）のスタイルを追加。settings.js／monitoring.js と対。
 * version : 1.20（2026-06-25・第93回 後半 微調整）：「パスワードを表示する」チェックの見た目（.pw-show-toggle）、操作結果トーストの複数行対応（.app-toast の white-space:pre-line）を追加。admin-users.html v1.11 / admin-users.js v1.3 と対。
 * version : 1.19（2026-06-25・第93回 管理者ユーザー編集画面の作り直し）：編集モーダルのセクション枠（.edit-section / -title / -danger / -actions / -actions-split）、結果メッセージ（.edit-msg / .success / .error）、無効ボタンのグレーアウト（.btn:disabled）、本人確認の小窓メッセージの改行反映（.dialog-message の white-space:pre-line）を追加。admin-users.html / admin-users.js v1.2 と対。
 * version : 1.18（2026-06-18・第81回）：読み込み中スピナーを Material 風 円形プログレス（SVG・回転＋弧の伸び縮み）に変更。枠（.lo-box）は拡大しながら、背景（.loading-overlay.show）はふわっとフェードインで出現。.lo-spinner は <div> から <svg><circle> へ（common.js v1.15 が生成）。keyframes lo-spin-rot/lo-spin-dash/lo-box-in/lo-overlay-in を追加。dashboard と共通の見た目（dashboard style.css v1.9）。
 * version : 1.17（2026-06-17・第76回：M7フェーズB — インライン style 外部化用クラスを追加 .req/.mt-6/.mt-8/.mb-12/.lp-open-btn・create の幅止め #ec-* を移送。見た目不変）
 * 更新日   : 2026-05-29
 *
 * 範囲（v1.6）:
 *   - ★v1.6 追加: 左サイドバー＋ページ枠（.app-wrap / .sidebar / .sidebar-logo /
 *     .sidebar-nav / .nav-item / .sidebar-footer / .main）。admin 全画面（ログイン除く）
 *     共通の開閉式サイドバー。色は v3 ブランド水色。common.js renderSidebar() と対で使用。
 *   - 以下は v1.5 から継続
 *
 * 範囲（v1.5）:
 *   - ★v1.5 追加: フォーム UX 改善（.form-blockers / .form-blockers-list / .field-status）
 *   - 以下は v1.4 から継続
 *
 * 範囲（v1.4）:
 *   - 認証モーダル用スタイル（dialog 要素・dialog::backdrop・dialog-content）
 *   - 以下は v1.3 から継続
 *
 * 範囲（v1.3）:
 *   - CSS 変数（ブランドカラー・余白・タイポグラフィ）
 *   - リセット / ベース
 *   - ログイン画面（.login-wrap / .login-card / .fg / .btn / .error）
 *   - 画面ロック overlay（.loading-overlay）
 *   - ページレイアウト（.page / .page-header / .page-body）
 *   - テーブル（.data-table）+ ステータスバッジ（.badge / .badge-lite）
 *   - ナビゲーション（.page-nav）
 *   - フォームカード（.form-card / .form-section / .form-row）
 *   - 検索ボックス・ツールバー（.search-box / .toolbar）
 *   - ★v1.3 追加: 入力タイプ拡充（email / url / date / select）
 *   - ★v1.3 追加: チェックボックス・ラジオ（.checkbox-label / .radio-label）
 *   - ★v1.3 追加: フォーム補助メッセージ（.form-hint / .form-warn / .form-warn-box / .form-success-msg）
 *   - ★v1.3 追加: 戻るリンク（.back-link）
 *
 * 改訂履歴:
 *   - v1.15 (2026-05-27): .dt-hug（枠ごと縮める）を廃止。他の全幅テーブルと差が出てバランスが悪いため
 *                         （松谷さん指摘）。情報の少ない表は「枠は全幅のまま・.fit ＋ 末尾に空列を1つ足して
 *                         中身を左に寄せ、余りを空列で吸収」する方式に統一（全表で体裁が揃う）。
 *   - v1.14 (2026-05-27): v1.13 の width:auto 一括変更を撤回（ブツ切れのため）。.data-table 既定 width:100%。
 *                         （.dt-hug を一時追加したが v1.15 で廃止）
 *   - v1.13 (2026-05-27): （撤回）データテーブルを width:auto に変更（全表一括）。ブツ切れのため v1.14 で撤回。
 *   - v1.12 (2026-05-27): 展開時ロゴ（.logo-full）の角丸 4px を復元（元の .sidebar-logo-img と同じ仕上げ）。
 *   - v1.11 (2026-05-27): サイドバーのロゴを2段構え。展開時=元ロゴ画像（.logo-full=mierudmlogo.jpg）、
 *                         折り畳み時のみアイコン版（.logo-icon=favicon-v4.svg＝封筒+虫眼鏡）を表示。
 *                         折り畳み時は アイコン＋展開ボタン（»）を縦並びで表示し「展開できる」ことを明示。
 *                         common.js renderSidebar v1.11 と対。v1.10 の「み」バッジ（.logo-mark）は廃止。色は不変。
 *   - v1.9 (2026-05-27): UI改善プロンプトv0.3 適用（admin全画面・第25回）。
 *                        枠線か影のどちらか一方に統一＝枠線を残し box-shadow を撤去
 *                        （.data-table-wrap / .form-card）。テーブルは最後の列で余白を
 *                        吸収する .data-table.fit を追加（列の間延び防止）。.main に
 *                        max-width:1600px の緩い上限を追加。色・CSS変数の値・命名は不変。
 *   - v1.5 (2026-05-12): フォーム UX 改善用スタイルを追加。
 *                        .form-blockers（送信ボタン無効理由のリスト）と
 *                        .field-status（フィールド直下のインラインヒント）。
 *                        common.js v1.3 の renderFormBlockers / renderFieldStatus と対応。
 *   - v1.4 (2026-05-10): 認証モーダル（共通機能）用に dialog 系スタイルを追加
 *   - v1.3 (2026-05-10): create.html 用に入力タイプ追加・ラジオ・注意書きボックスを追加
 *   - v1.2 (2026-05-09): 顧客管理画面用にナビゲーション・フォームカード・検索ボックス・ツールバーを追加
 *   - v1.1 (2026-05-09): list.html 用にページレイアウト・テーブル・バッジを追加
 *   - v1.0 (2026-05-09): 初版
 *
 * 範囲外（後の段階で追加）:
 *   - サイドバー / モーダル / トースト
 *   - 各画面（customers / detail / settings / monitoring）固有スタイル
 *
 * 関連:
 *   - reference/rules/coding_rules_prompt_v3.md（ブランドカラー・命名規則）
 * ============================================================ */

/* ----- CSS 変数 ----- */
:root {
  /* ブランドカラー（CLAUDE §8 / coding_rules_prompt_v3 より） */
  --brand-main: #1A9AD5;
  --brand-text-dark: #185FA5;
  --brand-bg-light: #E6F1FB;
  --brand-border: #B5D4F4;

  /* 機能色 */
  --color-text: #1B2A4A;
  --color-text-muted: #64748b;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-danger: #dc2626;
  --color-success: #10b981;

  /* レイアウト */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* タイポグラフィ */
  --font-family-base: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 14px;
}

/* ----- リセット / ベース ----- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
}

/* ----- ログイン画面 ----- */
/* 背景はサイドバーと同色（--brand-text-dark = #185FA5）。dash の薄い水色ログインと一目で区別 */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--brand-text-dark);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-top: 3px solid var(--brand-main);
  padding: 32px 28px;
}

.login-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-header img {
  max-width: 180px;
  height: auto;
}

.login-header p {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text-dark);
}

.login-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* フォームグループ */
.fg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fg label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.fg input[type="text"],
.fg input[type="password"],
.fg input[type="email"],
.fg input[type="url"],
.fg input[type="search"],
.fg input[type="date"],
.fg select {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.fg input[type="text"]:focus,
.fg input[type="password"]:focus,
.fg input[type="email"]:focus,
.fg input[type="url"]:focus,
.fg input[type="search"]:focus,
.fg input[type="date"]:focus,
.fg select:focus {
  border-color: var(--brand-main);
  box-shadow: 0 0 0 3px rgba(26, 154, 213, 0.15);
}

.fg input:disabled,
.fg select:disabled {
  background: var(--brand-bg-light);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ----- ボタン ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  font-family: inherit;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--brand-main);
  color: var(--color-surface);
  border-color: var(--brand-main);
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-text-dark);
  border-color: var(--brand-text-dark);
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--brand-border);
}

.btn-ghost:hover:not(:disabled) {
  border-color: var(--brand-main);
  color: var(--brand-main);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ----- エラーメッセージ ----- */
.error {
  font-size: 12px;
  color: var(--color-danger);
  min-height: 16px;
}

.success {
  font-size: 12px;
  color: var(--color-success);
}

/* ----- ログイン後ビュー ----- */
.welcome-view {
  text-align: center;
}

.welcome-view h1 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-text-dark);
}

.welcome-view .user-info {
  margin: 12px 0 24px;
  padding: 12px;
  background: var(--brand-bg-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
}

.welcome-view .user-info .label {
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: 6px;
}

/* ----- 画面ロック overlay ----- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85); /* ★第92回 改訂★ 背景は白の覆いに戻す（全画面グレーをやめる） */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay.show {
  display: flex;
  animation: lo-overlay-in .25s ease-out; /* 白い覆いはふわっとフェードイン */
}

.lo-box {
  background: var(--color-surface); /* ★第92回 改訂2★ 箱は白に（グレーは白背景でぼんやりするため） */
  border: 1px solid #B5D4F4; /* ★第92回 改訂2★ 枠（境界線）でしっかり分かるように（ブランドのボーダー色） */
  border-radius: var(--radius-md);
  padding: 28px 36px;
  box-shadow: 0 6px 18px rgba(24, 95, 165, .18); /* ★第92回 改訂2★ ぼんやり感を抑えた少し締まった影 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 220px; /* ★第92回 改訂3★ 箱をもう少し大きく（最小サイズを拡大） */
  min-height: 160px;
  transform-origin: top center; /* ★第92回★ 囲いが上から大きくなりながら出る基点 */
  animation: lo-enter .55s cubic-bezier(.16, .8, .3, 1); /* ★第92回★ 囲いごと上からすぅっと降りて徐々に大きく */
}

/* ★第81回★ Material 風 円形プログレス（SVG・回転＋弧の伸び縮み）。マークアップは admin common.js が <svg class="lo-spinner"><circle/></svg> を生成 */
.lo-spinner {
  width: 40px;
  height: 40px;
  animation: lo-spin-rot 1.4s linear infinite;
}

.lo-spinner circle {
  stroke: var(--brand-main);
  animation: lo-spin-dash 1.4s ease-in-out infinite;
}

@keyframes lo-spin-rot {
  to { transform: rotate(360deg); }
}

@keyframes lo-spin-dash {
  0%   { stroke-dasharray: 2, 113; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 80, 113; stroke-dashoffset: -26; }
  100% { stroke-dasharray: 80, 113; stroke-dashoffset: -104; }
}

@keyframes lo-box-in {
  from { opacity: 0; transform: scale(.88) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes lo-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lo-enter { /* ★第92回★ 覆いごと上から降りて徐々に大きく＋フェードイン */
  from { opacity: 0; transform: translateY(-18px) scale(.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.lo-msg {
  font-size: 13px;
  color: var(--color-text);
}

/* ----- ユーティリティ ----- */
.hidden {
  display: none !important;
}

/* ============================================================
 * 汎用モーダル（★第28回後半 追加・admin-users.html 等で使用）
 *   .modal（hidden が外れると flex で中央寄せ）+ .modal-backdrop（背景）+ .modal-body（白カード）
 * ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}
.modal.hidden {
  display: none !important;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.modal-body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--brand-border, #B5D4F4);
  border-radius: 12px;
  padding: 24px 24px 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

/* ============================================================
 * ページレイアウト（list.html 等で使用）
 * ============================================================ */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-header .page-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header .page-logo img {
  height: 28px;
  width: auto;
}

.page-header .page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-text-dark);
  margin: 0;
}

.page-header .page-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.page-body {
  flex: 1;
  padding: 24px;
}

.page-body h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 16px;
}

/* ----- データテーブル ----- */

.data-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  /* §5 枠線か影のどちらか一方 → 枠線を残し影は撤去 */
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  background: var(--brand-bg-light);
  color: var(--brand-text-dark);
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--brand-border);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--color-text);
}

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

.data-table tbody tr:hover {
  background: rgba(26, 154, 213, 0.04);
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* §7 列幅合計が画面幅より狭いときの間延び防止。
 * 末尾以外の列を内容幅にし、最後の列で余白を吸収する（.fit を付けた表に適用）。 */
.data-table.fit th:not(:last-child),
.data-table.fit td:not(:last-child) {
  width: 1px;
}

/* 空状態 */
.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-muted);
}

.empty-state .empty-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.empty-state .empty-desc {
  font-size: 12px;
}

/* ----- ナビゲーション（ヘッダー内） ----- */

.page-nav {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}

.page-nav a {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.page-nav a:hover {
  background: var(--brand-bg-light);
  color: var(--brand-text-dark);
}

.page-nav a.active {
  background: var(--brand-main);
  color: var(--color-surface);
}

/* ----- フォームカード（顧客管理 等） ----- */

.form-card {
  background: var(--color-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  /* §5 枠線か影のどちらか一方 → 枠線を残し影は撤去 */
  padding: 20px 24px;
  max-width: 720px;
}

.form-card h2 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-text-dark);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brand-border);
}

.form-card .form-section {
  margin-bottom: 20px;
}

.form-card .form-section:last-of-type {
  margin-bottom: 0;
}

.form-card .form-section h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-card .form-row.single {
  grid-template-columns: 1fr;
}

.form-card textarea {
  width: 100%;
  min-height: 60px;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-card textarea:focus {
  border-color: var(--brand-main);
  box-shadow: 0 0 0 3px rgba(26, 154, 213, 0.15);
}

.form-card .form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-border);
}

.form-card .read-only-value {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--color-text);
  background: var(--brand-bg-light);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
}

/* ----- 検索ボックス ----- */

.search-box {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-box:focus {
  border-color: var(--brand-main);
  box-shadow: 0 0 0 3px rgba(26, 154, 213, 0.15);
}

/* ----- 操作行（ヘッダーエリア下のツールバー） ----- */

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

/* ----- バッジ ----- */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-status {
  background: var(--brand-bg-light);
  color: var(--brand-text-dark);
  border-color: var(--brand-border);
}

.badge-active {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.badge-closed {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

.badge-warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

/* ★第92回★ 要対処（赤）バッジ＝イベント一覧の行（黄色の .badge-warn と同じ形・赤系） */
.badge-danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.badge-lite {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #ddd6fe;
  margin-left: 6px;
}

/* ============================================================
 * ★イベント警告強化★ 詳細画面のアクション警告バナー（detail.js renderAlerts）
 *   重大＝赤（is-danger）／注意＝黄（is-warn）。1 件 1 行で「ラベル＋○○してください＋操作ボタン」を全幅表示。
 *   色は一覧の警告バッジ（.badge-danger / .badge-warn）と同系で統一する。
 * ============================================================ */
.alert-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 4px;
}
.alert-banner-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.5;
}
.alert-banner-item.is-danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.alert-banner-item.is-warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.alert-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.alert-banner-label {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.6);
}
.alert-banner-msg {
  flex: 1 1 240px;
}
.alert-banner-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.alert-banner-btn {
  flex: 0 0 auto;
  padding: 4px 12px;
  font-size: 12px;
}
.alert-banner-status {
  font-size: 12px;
}

/* ============================================================
 * フォーム補助メッセージ（create.html 等で使用）
 * ============================================================ */

.form-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.form-warn {
  font-size: 12px;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.form-success-msg {
  font-size: 12px;
  color: #047857;
}

.form-warn-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #92400e;
  line-height: 1.6;
}

.form-warn-box strong {
  display: block;
  margin-bottom: 6px;
  color: #b45309;
}

.form-warn-box ul {
  margin: 0;
  padding-left: 20px;
}

.form-warn-box li {
  margin-bottom: 2px;
}

/* ============================================================
 * チェックボックス / ラジオボタン（create.html 等で使用）
 * ============================================================ */

.checkbox-label,
.radio-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  padding: 6px 0;
  line-height: 1.5;
}

.checkbox-label input,
.radio-label input {
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--brand-main);
}

.checkbox-label input:disabled,
.radio-label input:disabled {
  cursor: not-allowed;
}

.radio-label + .radio-label {
  margin-top: 4px;
}

/* ============================================================
 * 戻るリンク（create.html 等のページ上部で使用）
 * ============================================================ */

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--brand-text-dark);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s;
}

.back-link:hover {
  background: var(--brand-bg-light);
}

/* ============================================================
 * 認証モーダル（dialog 要素・askAdminPassword / askDangerConfirm 用）
 * ============================================================ */

dialog.auth-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  max-width: 440px;
  width: calc(100% - 32px);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

dialog.auth-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

dialog.auth-dialog .dialog-content {
  padding: 24px 24px 20px;
}

dialog.auth-dialog .dialog-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-text-dark);
}

dialog.auth-dialog .dialog-title.danger {
  color: var(--color-danger);
}

dialog.auth-dialog .dialog-message {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.6;
  white-space: pre-line;
}

dialog.auth-dialog .dialog-error {
  font-size: 12px;
  color: var(--color-danger);
  min-height: 16px;
  margin-bottom: 8px;
}

dialog.auth-dialog .fg {
  margin-bottom: 12px;
}

dialog.auth-dialog .dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--brand-border);
  background: #fafbfc;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

dialog.auth-dialog .danger-required-text {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

dialog.auth-dialog .danger-required-text strong {
  color: var(--color-danger);
  font-size: 13px;
}

/* ============================================================
 * フォーム UX 改善（★v1.5 追加★）
 *
 * - .form-blockers       送信ボタン直上の「あと N 項目入力してください」ボックス
 * - .field-status        各フィールド直下のインラインヒント
 *
 * 配色は既存の form-warn / form-hint と統一感を持たせる
 * （オレンジ警告 + グレーヒント。エラー色は danger）
 * ============================================================ */

.form-blockers {
  margin-top: 16px;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #92400e;
  line-height: 1.6;
}

.form-blockers-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.form-blockers-list {
  margin: 0;
  padding-left: 1.4em;
}

.form-blockers-list li {
  margin: 2px 0;
}

.field-status {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
  min-height: 0;
}

.field-status:empty {
  margin-top: 0;
}

.field-status-error {
  color: var(--color-danger);
}

.field-status-warn {
  color: #b45309;
}

.field-status-hint {
  color: var(--color-text-muted);
}

.field-status-ok {
  color: var(--color-success);
}

/* ============================================================
 * 左サイドバー ＋ ページ枠（★v1.6 追加★）
 *
 * admin 全画面（ログイン画面を除く）共通の左サイドバー。
 *   - 開閉式：展開 184px ⇄ 格納 56px（アイコンバー）。
 *     開閉状態は localStorage（admin-sidebar-collapsed）に保持し画面間で引き継ぐ。
 *   - 色は v3 ブランド水色：サイドバー = brand-text-dark(#185FA5) /
 *     アクティブ強調 = 明るい水色(#7cc6ec)。v2 のネイビーは不採用。
 *   - マークアップは common.js renderSidebar() が生成。
 *     各画面は <body><div class="app-wrap"><main class="main">…</main></div> の構造にする。
 * ============================================================ */

:root {
  --sidebar-w: 184px;
  --sidebar-w-collapsed: 56px;
  --sidebar-bg: var(--brand-text-dark);   /* #185FA5 */
  --sidebar-active: #7cc6ec;              /* アクティブ項目の明るい水色 */
}

.app-wrap {
  display: flex;
  min-height: 100vh;
}

/* 環境バナー（DEV/STG のときだけ・本番では出ない・common.js が自動挿入） */
.env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: #FEE2E2;
  color: #7F1D1D;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  border-bottom: 2px solid #EF4444;
  user-select: none;
  pointer-events: none;
}
body.env-mode { padding-top: 32px; }
body.env-mode .sidebar { top: 32px; height: calc(100vh - 32px); }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width 0.2s ease;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-logo .logo-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-logo .logo-brand .ico {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* ロゴ：展開時は元ロゴ画像（.logo-full）、折り畳み時のみアイコン版（.logo-icon）を表示 */
.sidebar-logo .logo-full {
  height: 28px;
  width: auto;
  max-width: 100%;
  display: block;
  border-radius: 4px; /* 元ロゴの角丸仕上げを復元 */
}
.sidebar-logo .logo-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: none;
}

.sidebar-logo-img {
  height: 28px;
  width: auto;
  max-width: 100%;
  display: block;
  border-radius: 4px;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: inherit;
}

.sidebar-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.nav-item .ico {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 15px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  text-decoration: none;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--sidebar-active);
  border-left-color: var(--sidebar-active);
  font-weight: 600;
}

/* ★第92回★ 左メニューの「要対処（赤）」件数バッジ（システム監視・イベント一覧）。
   .nav-item は overflow:hidden だが margin-left:auto の内側配置なのでクリップされない。
   既定は非表示・件数があるとき .show で表示。サイドバー折りたたみ時はメニューが細くなるため隠す。 */
.nav-badge {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e23b3b;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.nav-badge.show { display: inline-flex; }
.collapsed .nav-badge { display: none !important; }

.sidebar-footer {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer .foot-user {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer .foot-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.sidebar-footer .foot-role:empty {
  display: none;
}

.sidebar-footer .btn-logout {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.sidebar-footer .btn-logout:hover {
  background: rgba(255, 255, 255, 0.22);
}

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  padding: 24px 28px;
  max-width: calc(1600px + var(--sidebar-w)); /* §1 極端な広さ向けの緩い上限（作業エリアは広く使う） */
  transition: margin-left 0.2s ease;
}

.main > .page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-text-dark);
  margin: 0 0 16px;
}

/* ----- 格納時（アイコンバー） ----- */
.app-wrap.collapsed .sidebar {
  width: var(--sidebar-w-collapsed);
}

.app-wrap.collapsed .main {
  margin-left: var(--sidebar-w-collapsed);
}

.app-wrap.collapsed .sidebar-logo {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
}

/* 折り畳み時：元ロゴ画像を隠し、アイコン版（封筒+虫眼鏡）だけ表示。展開ボタン（»）は下に残す */
.app-wrap.collapsed .sidebar-logo .logo-full { display: none; }
.app-wrap.collapsed .sidebar-logo .logo-icon { display: block; }

.app-wrap.collapsed .nav-item {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
  border-left-width: 0;
}

.app-wrap.collapsed .nav-item .label,
.app-wrap.collapsed .logo-text,
.app-wrap.collapsed .sidebar-footer .foot-user,
.app-wrap.collapsed .sidebar-footer .foot-role,
.app-wrap.collapsed .sidebar-footer .btn-logout .foot-text {
  display: none;
}

.app-wrap.collapsed .sidebar-footer {
  align-items: center;
}

.app-wrap.collapsed .sidebar-footer .btn-logout {
  width: auto;
  padding: 7px 9px;
}

.app-wrap.collapsed .sidebar-footer .btn-logout::after {
  content: '⏻';
  font-size: 14px;
}

/* ----- 権限バナー（閲覧者・QR発行者の画面上部・common.js renderPermissionBanner と対）----- */
.perm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--brand-bg-light);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  color: var(--brand-text-dark);
  font-size: 13px;
  line-height: 1.6;
}

.perm-banner-ico {
  flex: 0 0 auto;
  font-size: 16px;
}

/* ロール別に隠す要素（common.js applyRoleVisibility と対）。
   既存の状態別ロジック（hidden / display 切替）より優先して隠す。 */
.is-role-hidden {
  display: none !important;
}

/* ----- 狭い画面（768px 以下）----- */
@media (max-width: 768px) {
  .main {
    padding: 16px;
  }
}

/* ============================================================
 * ★第97回 段階4★ 使い方ガイド 編集ページ（guide-editor.html / js/guide-editor.js）
 *   全画面2ペイン（左＝編集／右＝顧客と同じ仕上がりプレビュー）。
 * ============================================================ */
.ge-app { display: flex; flex-direction: column; height: 100vh; background: #eef3f8; }
body.env-mode .ge-app { height: calc(100vh - 32px); } /* DEV/STG 帯の分 */
.ge-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: #fff; border-bottom: 1px solid #e3ebf4; flex-wrap: wrap; }
.ge-back { color: var(--brand-text-dark); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ge-back:hover { text-decoration: underline; }
.ge-title { font-size: 16px; font-weight: 700; color: var(--brand-text-dark); }
.ge-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ge-statusbar { padding: 7px 18px; font-size: 12.5px; background: #f7fafe; border-bottom: 1px solid #eef2f7; color: #475569; }
.ge-statusbar.is-ok { color: #15803d; }
.ge-statusbar.is-warn { color: #b45309; }
.ge-panes { flex: 1; display: flex; min-height: 0; }
.ge-pane { flex: 1; min-width: 0; overflow: auto; padding: 16px 18px; }
.ge-edit { background: #f7fafe; border-right: 2px solid #dbe6f3; }
.ge-preview { background: #eef3f8; }
.ge-preview-head { font-size: 12px; letter-spacing: .04em; color: var(--color-text-muted); margin: 0 0 10px; }
.ge-preview-body { display: flex; justify-content: center; }

/* パレット（sticky・畳んだ1行→開くと4カテゴリ） */
.ge-palette { position: sticky; top: -16px; z-index: 5; background: #fff; border: 1px solid #e3ebf4; border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(20,60,120,.06); }
.ge-palette-bar { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-text-dark); user-select: none; }
.ge-palette-bar .caret { transition: transform .15s; display: inline-block; }
.ge-palette.open .ge-palette-bar .caret { transform: rotate(90deg); }
.ge-palette-body { display: none; margin-top: 10px; }
.ge-palette.open .ge-palette-body { display: block; }
.ge-pal-cat { margin-bottom: 8px; }
.ge-pal-cat-label { font-size: 11px; color: var(--color-text-muted); margin-bottom: 5px; }
.ge-pal-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ge-pal-btn { font-size: 12.5px; border: 1px solid var(--brand-border); background: var(--brand-bg-light); color: var(--brand-text-dark); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-family: inherit; }
.ge-pal-btn:hover { background: #dbeafe; }

/* 挿入バー（ブロックの間・一番上・一番下の「＋ ここに追加」） */
.ge-insert { text-align: center; margin: 2px 0; }
.ge-insert-btn { font-size: 11px; color: var(--brand-main); background: none; border: 1px dashed #cdddf0; border-radius: 20px; padding: 2px 14px; cursor: pointer; font-family: inherit; opacity: .55; }
.ge-insert:hover .ge-insert-btn, .ge-insert.open .ge-insert-btn { opacity: 1; background: var(--brand-bg-light); border-color: var(--brand-main); }
.ge-insert-pop { display: none; background: #fff; border: 1px solid #e3ebf4; border-radius: 10px; padding: 8px 12px; margin: 6px auto 2px; max-width: 480px; box-shadow: 0 4px 14px rgba(20,60,120,.12); text-align: left; }
.ge-insert.open .ge-insert-pop { display: block; }

/* ブロックカード */
.ge-card { background: #fff; border: 1px solid #e3ebf4; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.ge-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ge-tag { font-size: 11px; font-weight: 700; color: #fff; background: var(--brand-main); border-radius: 6px; padding: 2px 8px; }
.ge-tag.is-warn { background: #E8590C; }
.ge-tag.is-fixed { background: #94a3b8; }
.ge-card-tools { margin-left: auto; display: flex; gap: 4px; }
.ge-tbtn { font-size: 12px; border: 1px solid #dbe6f3; background: #fff; color: var(--color-text-muted); border-radius: 6px; padding: 2px 8px; cursor: pointer; font-family: inherit; }
.ge-tbtn:hover { border-color: var(--brand-main); color: var(--brand-main); }
.ge-tbtn:disabled { opacity: .4; cursor: not-allowed; }
.ge-field { margin-top: 7px; }
.ge-field-label { font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 3px; }
.ge-input { width: 100%; box-sizing: border-box; border: 1px solid #d6e2f0; border-radius: 7px; padding: 7px 9px; font-size: 13.5px; font-family: inherit; color: var(--brand-text-dark); }

/* リッチ文（contenteditable）＋ツールバー */
.ge-rich { min-height: 38px; box-sizing: border-box; border: 1px solid #d6e2f0; border-radius: 7px; padding: 7px 9px; font-size: 13.5px; font-family: inherit; color: var(--brand-text-dark); line-height: 1.7; outline: none; white-space: pre-wrap; }
.ge-rich:focus { border-color: var(--brand-main); box-shadow: 0 0 0 2px rgba(26,154,213,.15); }
.ge-rich.is-empty::before { content: attr(data-ph); color: #9fb0c8; pointer-events: none; }
.ge-rtb { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; }
.ge-rtb .lbl { font-size: 11px; color: var(--color-text-muted); }
.ge-rbtn { font-size: 12px; border: 1px solid #d6e2f0; background: #fff; border-radius: 6px; padding: 2px 9px; cursor: pointer; font-family: inherit; font-weight: 700; color: var(--brand-text-dark); }
.ge-rbtn:hover { background: var(--brand-bg-light); }
.ge-cbtn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer; padding: 0; }
.ge-cbtn.c-blue { background: #1A9AD5; } .ge-cbtn.c-dark { background: #185FA5; } .ge-cbtn.c-orange { background: #E8590C; } .ge-cbtn.c-ink { background: #1B2A4A; }
/* 丸数字ピッカー */
.ge-circled-wrap { position: relative; display: inline-block; }
.ge-circled-pop { position: absolute; z-index: 20; top: 26px; left: 0; width: 230px; max-height: 180px; overflow: auto; background: #fff; border: 1px solid #d6e2f0; border-radius: 8px; box-shadow: 0 6px 20px rgba(20,60,120,.18); padding: 6px; display: none; }
.ge-circled-wrap.open .ge-circled-pop { display: flex; flex-wrap: wrap; gap: 3px; }
.ge-circled-pop button { width: 26px; height: 26px; border: 1px solid #e3ebf4; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; }
.ge-circled-pop button:hover { background: var(--brand-bg-light); }

/* 図ブロック */
.ge-fig-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ge-fig-ph { width: 90px; height: 56px; border: 1px dashed #b9c7da; border-radius: 6px; background: #f1f5fb; display: flex; align-items: center; justify-content: center; color: #9fb0c8; font-size: 11px; flex: none; }
.ge-size-btns { display: inline-flex; gap: 4px; }
.ge-size-btn { font-size: 12px; border: 1px solid #d6e2f0; background: #fff; border-radius: 6px; padding: 2px 9px; cursor: pointer; font-family: inherit; }
.ge-size-btn.on { background: var(--brand-main); color: #fff; border-color: var(--brand-main); }
.ge-check { font-size: 12.5px; color: var(--brand-text-dark); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ge-fig-note { font-size: 11px; color: var(--color-text-muted); margin-top: 5px; }
.ge-empty-note { color: var(--color-text-muted); font-size: 13px; padding: 20px; text-align: center; }
.ge-subcard { margin: 6px 0; padding: 8px 10px; }
/* 履歴モーダル */
.ge-modal-overlay { position: fixed; inset: 0; z-index: 10005; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ge-modal { background: #fff; border: 1px solid #e3ebf4; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25); width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.ge-modal-title { font-size: 16px; font-weight: 700; color: var(--brand-text-dark); padding: 14px 18px 0; }
.ge-modal-desc { font-size: 12.5px; color: var(--color-text-muted); padding: 6px 18px 0; line-height: 1.6; }
.ge-modal-list { flex: 1; overflow: auto; padding: 12px 18px; }
.ge-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; color: var(--brand-text-dark); }
.ge-modal-row:last-child { border-bottom: none; }
.ge-modal-actions { padding: 10px 18px; border-top: 1px solid #eef2f7; text-align: right; }
@media (max-width: 900px) { .ge-panes { flex-direction: column; } .ge-edit { border-right: none; border-bottom: 2px solid #dbe6f3; } }

/* ----- 右プレビュー本文（.guide-doc 系＝顧客ダッシュボード style.css のミラー・見た目を一致させる） ----- */
.guide-doc {
  --gd-blue: #1A9AD5; --gd-dark: #185FA5; --gd-ink: #1B2A4A; --gd-muted: #64748B;
  --gd-line: #B5D4F4; --gd-soft: #E6F1FB; --gd-mark: #E8590C;
  --gd-warnbg: #fff7ed; --gd-warnbd: #fed7aa; --gd-warntx: #9a3412;
  width: 100%; max-width: 760px; background: #fff; color: var(--gd-ink);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(20,60,120,.10); overflow: hidden;
  font-size: 14px; line-height: 1.8;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
.guide-doc > :not(.guide-header) { margin-left: 26px; margin-right: 26px; }
.guide-doc > :last-child { margin-bottom: 24px; }
.guide-header { background: linear-gradient(120deg, #1f7fc0, #185FA5); color: #fff; padding: 22px 26px; }
.guide-logo { display: inline-block; background: #fff; color: var(--gd-dark); font-weight: 700; border-radius: 6px; padding: 4px 12px; font-size: 13px; }
.guide-h1 { margin: 12px 0 0; font-size: 22px; }
.guide-header-lead { margin: 8px 0 0; font-size: 13.5px; color: #eaf4fc; }
.guide-hint { background: var(--gd-warnbg); border: 1px solid var(--gd-warnbd); color: var(--gd-warntx); border-radius: 9px; padding: 10px 14px; margin-top: 16px; font-size: 13px; }
.guide-toc { background: var(--gd-soft); border: 1px solid var(--gd-line); border-radius: 10px; padding: 14px 18px; margin-top: 16px; }
.guide-toc-title { font-weight: 700; color: var(--gd-dark); margin-bottom: 6px; }
.guide-toc-list { margin: 0; padding-left: 1.2em; }
.guide-toc-list li { margin: 3px 0; }
.guide-toc-list a { color: var(--gd-dark); text-decoration: none; }
.guide-toc-list a:hover { text-decoration: underline; }
.guide-chapter { display: flex; align-items: center; gap: 11px; font-size: 19px; color: var(--gd-dark); font-weight: 700; margin-top: 28px; }
.guide-chapter-num { flex: none; min-width: 30px; height: 30px; line-height: 30px; text-align: center; background: var(--gd-blue); color: #fff; border-radius: 8px; font-size: 15px; }
.guide-sub { font-size: 15px; color: var(--gd-dark); border-left: 4px solid var(--gd-blue); padding-left: 10px; margin-top: 20px; }
.guide-p { margin: 8px 0; color: #33425a; }
.guide-p.guide-lead { color: var(--gd-ink); }
.guide-bullets { margin: 8px 0; padding-left: 0; list-style: none; }
.guide-bullets li { position: relative; padding-left: 1.2em; margin: 6px 0; color: #33425a; }
.guide-bullets li::before { content: ''; position: absolute; left: .2em; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--gd-blue); }
.guide-steps { margin: 8px 0; padding-left: 0; list-style: none; counter-reset: gd-step; }
.guide-steps li { counter-increment: gd-step; position: relative; padding-left: 1.9em; margin: 7px 0; color: #33425a; }
.guide-steps li::before { content: counter(gd-step) "."; position: absolute; left: 0; top: 0; color: var(--gd-blue); font-weight: 700; }
.guide-about { background: var(--gd-soft); border: 1px solid var(--gd-line); border-radius: 9px; padding: 12px 15px; margin-top: 14px; margin-bottom: 14px; font-size: 13.5px; color: #28405e; }
.guide-note { border-radius: 9px; padding: 10px 14px; margin-top: 12px; margin-bottom: 12px; font-size: 13.5px; }
.guide-note-blue { background: var(--gd-soft); border: 1px solid var(--gd-line); color: #28405e; }
.guide-note-orange { background: var(--gd-warnbg); border: 1px solid var(--gd-warnbd); color: var(--gd-warntx); }
.guide-note-title { display: block; font-weight: 700; margin-bottom: 3px; color: var(--gd-dark); }
.guide-note-orange .guide-note-title { color: var(--gd-warntx); }
.guide-contact { background: #fbfdff; border: 1px solid #e3ebf4; border-radius: 9px; padding: 12px 15px; margin-top: 14px; margin-bottom: 14px; }
.guide-contact-company { font-weight: 700; color: var(--gd-dark); margin-bottom: 4px; }
.guide-contact-line { color: #33425a; margin: 2px 0; }
.guide-contact-line a { color: var(--gd-dark); font-weight: 700; text-decoration: none; }
.guide-figure { margin-top: 14px; margin-bottom: 14px; text-align: center; }
.guide-figure-img { max-width: 100%; border: 1px solid #dbe6f3; border-radius: 9px; box-shadow: 0 2px 10px rgba(20,60,120,.08); }
.guide-figure-placeholder { display: inline-flex; align-items: center; justify-content: center; min-height: 84px; padding: 28px 24px; max-width: 100%; border: 1px dashed #b9c7da; border-radius: 9px; background: #f1f5fb; color: #9fb0c8; font-size: 12px; }
.guide-figure-small .guide-figure-img, .guide-figure-small .guide-figure-placeholder { max-width: 280px; }
.guide-figure-medium .guide-figure-img, .guide-figure-medium .guide-figure-placeholder { max-width: 460px; }
.guide-figure-caption { font-size: 12px; color: var(--gd-muted); margin-top: 6px; }
.guide-figure-sample { font-size: 11px; color: var(--gd-muted); margin-top: 3px; }
.guide-c-blue { color: var(--gd-blue); font-weight: 700; }
.guide-c-dark { color: var(--gd-dark); font-weight: 700; }
.guide-c-orange { color: var(--gd-mark); font-weight: 700; }
.guide-c-muted { color: var(--gd-muted); }

/* ============================================================
 * M7 フェーズB：インライン style の外部化（CSS 集約・見た目は不変）
 *   各画面の style="..." 属性・<style> ブロックを逐語でクラス化したもの。
 *   値は元のインライン指定をそのまま移送（色・数値は不変）。
 * ============================================================ */

/* 必須マーク（ラベル内の「*」印）。元: style="color:var(--color-danger)" */
.req { color: var(--color-danger); }

/* スペーシング・ユーティリティ（単一プロパティの逐語移送） */
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mb-12 { margin-bottom: 12px; }

/* create.html：短い入力欄を内容に応じた幅で止める（旧 head 内 <style> を移送） */
#ec-eid, #ec-branch, #ec-mid { max-width: 360px; }
#ec-snd, #ec-pub, #ec-clsdt { max-width: 190px; }

/* create.html：LP を別タブで開くボタン（小さめ・左寄せ）。
   元: style="align-self:flex-start;padding:6px 14px;font-size:12px" */
.lp-open-btn {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 12px;
}

/* ============================================================
 * monitoring.html から移送した固有スタイル（M7 フェーズB・逐語移送・見た目不変）
 * ============================================================ */
    /* ===== システム監視 画面 固有スタイル（汎用 .btn / .badge / .data-table は style.css 共通を使用） ===== */
    .mon-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--color-text-muted); margin:-4px 0 16px; }
    .mon-meta .reload-btn { margin-left:auto; }
    .loading-line { font-size:12px; color:var(--color-text-muted); padding:8px 0; }
    .inline-note { font-size:13px; color:#475569; line-height:1.6; }
    .cf-subhead { font-size:13px; font-weight:700; color:var(--brand-text-dark); margin:16px 0 8px; }

    /* ① 総合判定バナー（大） */
    .health { border-radius:8px; padding:20px 24px; margin-bottom:16px; border:1px solid; display:flex; align-items:center; gap:16px; }
    .health .mark { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; }
    .health .h-title { font-size:22px; font-weight:700; margin:0 0 2px; }
    .health .h-sub { font-size:13px; margin:0; line-height:1.5; }
    .health-ok { background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
    .health-ok .mark { background:#10b981; color:#fff; }
    .health-warn { background:#fffbeb; border-color:#fde68a; color:#b45309; }
    .health-warn .mark { background:#d97706; color:#fff; }
    .health-danger { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
    .health-danger .mark { background:#dc2626; color:#fff; }
    /* ★第90回 H2★ 監視データを取得できない時の別枠警告帯（①総合判定とは別・「そもそも見えていない」を目立つ赤系で示す）。 */
    .mon-unavailable { border:1px solid #fecaca; background:#fef2f2; color:#b91c1c; border-radius:8px; padding:16px 20px; margin-bottom:16px; display:flex; align-items:flex-start; gap:14px; }
    .mon-unavailable .mark { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; background:#dc2626; color:#fff; }
    .mon-unavailable .mu-title { font-size:18px; font-weight:700; margin:0 0 2px; }
    .mon-unavailable .mu-sub { font-size:13px; margin:0 0 8px; line-height:1.5; }

    /* ② 要対処リスト */
    .todo-head { font-size:12px; font-weight:700; color:var(--color-text-muted); margin:0 0 8px; letter-spacing:.3px; }
    .todo-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
    .todo-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--brand-border); border-left-width:4px; border-radius:8px; padding:12px 16px; }
    .todo-card.lv-danger { border-left-color:#dc2626; background:#fef6f6; }
    .todo-card.lv-warn { border-left-color:#d97706; background:#fffdf5; }
    .todo-main { flex:1; min-width:0; }
    .todo-title { font-weight:700; font-size:14px; margin:0 0 2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .todo-desc { font-size:13px; color:#475569; margin:0; line-height:1.5; }
    .todo-actions { display:flex; gap:8px; flex-shrink:0; align-items:center; flex-wrap:wrap; }
    @media (max-width:760px){ .todo-card{ flex-direction:column; align-items:stretch; } }

    /* ③ いま公開中の状況（細い1行） */
    .statbar-title { font-size:12px; font-weight:700; color:var(--color-text-muted); margin:0 0 8px; }
    .statbar { display:flex; flex-wrap:wrap; background:#fff; border:1px solid var(--brand-border); border-radius:8px; padding:8px 4px; margin-bottom:20px; }
    .statbar .si { flex:1; min-width:110px; text-align:center; padding:6px 12px; border-right:1px solid #eef2f7; }
    .statbar .si:last-child { border-right:none; }
    .statbar .si .v { font-size:18px; font-weight:700; color:var(--brand-text-dark); font-variant-numeric:tabular-nums; }
    .statbar .si .v .u { font-size:12px; font-weight:500; color:var(--color-text-muted); margin-left:2px; }
    .statbar .si .l { font-size:11px; color:var(--color-text-muted); margin-top:2px; }

    /* ⑤ 2階（折りたたみ） */
    .more-head { font-size:12px; font-weight:700; color:var(--color-text-muted); margin:0 0 8px; }
    .mon-section { background:#fff; border:1px solid var(--brand-border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
    .mon-section > summary { list-style:none; cursor:pointer; padding:12px 16px; font-size:14px; font-weight:600; color:var(--brand-text-dark); display:flex; align-items:center; gap:8px; }
    .mon-section > summary::-webkit-details-marker { display:none; }
    .mon-section > summary::before { content:'\25B8'; font-size:12px; color:var(--brand-main); transition:transform .15s; }
    .mon-section[open] > summary::before { transform:rotate(90deg); }
    .mon-section > summary .s-badge { margin-left:auto; }
    .mon-section .sec-body { padding:16px; border-top:1px solid #f1f5f9; }
    .sec-desc { font-size:12px; color:var(--color-text-muted); margin:0 0 12px; line-height:1.6; }

    .stat-grid { display:flex; gap:16px; flex-wrap:wrap; }
    .stat { min-width:120px; }
    .stat .s-label { font-size:11px; color:var(--color-text-muted); margin:0 0 2px; }
    .stat .s-value { font-size:18px; font-weight:700; color:var(--brand-text-dark); margin:0; font-variant-numeric:tabular-nums; }
    .stat .s-unit { font-size:12px; font-weight:500; color:var(--color-text-muted); margin-left:2px; }
    .stat .s-note { font-size:11px; color:var(--color-text-muted); margin:2px 0 0; }
    /* リソース・料金：名前＋大きな数字＋一言のカード（第39回） */
    .res-group { margin-bottom:18px; }
    .res-group:last-child { margin-bottom:0; }
    .res-group-title { font-size:13px; font-weight:700; color:var(--brand-text-dark); margin:0 0 10px; }
    .res-cards { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; grid-auto-rows:1fr; }
    .res-card.budget { grid-column:span 2; }
    @media (max-width:1080px) { .res-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); } .res-card.budget { grid-column:span 2; } }
    /* カード＝縦flex。強調数字（rc-main）は margin-top:auto で各カード下端に固定＝ラベル行数が違っても下で揃う */
    .res-card { display:flex; flex-direction:column; border:1px solid var(--brand-border); border-left:4px solid var(--brand-border); border-radius:8px; padding:14px 16px; background:#fff; }
    .res-card.warn { border-left-color:#b45309; background:#fffdf5; }
    .res-card.danger { border-left-color:#b91c1c; background:#fef6f6; }
    .res-card .rc-label { font-size:12px; color:var(--color-text-muted); margin:0 0 4px; }
    .res-card .rc-note { font-size:11px; color:var(--color-text-muted); margin:0; line-height:1.55; }
    .res-card .rc-note.warn { color:#b45309; font-weight:600; }
    .res-card .rc-main { font-size:24px; font-weight:700; color:var(--brand-text-dark); line-height:1.15; margin:0; margin-top:auto; padding-top:8px; font-variant-numeric:tabular-nums; }
    .res-card .rc-main.warn { color:#b45309; }
    .res-card .rc-main.danger { color:#b91c1c; }
    .res-card .rc-main .lim { font-size:14px; font-weight:600; color:var(--color-text-muted); }
    .res-card .rc-main .u { font-size:13px; font-weight:500; color:var(--color-text-muted); margin-left:3px; }

    .table-wrap { border:1px solid var(--brand-border); border-radius:8px; overflow:hidden; }
    .mon-tbl { width:100%; border-collapse:collapse; font-size:13px; }
    .mon-tbl thead th { background:var(--brand-bg-light); color:var(--brand-text-dark); font-weight:600; font-size:12px; text-align:left; padding:9px 12px; border-bottom:1px solid var(--brand-border); white-space:nowrap; }
    .mon-tbl tbody td { padding:9px 12px; border-bottom:1px solid #f1f5f9; }
    .mon-tbl tbody tr:last-child td { border-bottom:none; }
    .mon-tbl tbody tr.row-error td { background:#fef2f2; color:#b91c1c; }
    .mon-tbl tbody tr.row-warning td { background:#fffbeb; color:#92400e; }
    /* ★第89回★ 監視②「内容を見る」で対象（復元・強制終了）の行へ誘導した時の一瞬ハイライト（box-shadow の点滅＝背景色は壊さない）。 */
    .mon-tbl tbody tr.row-focus td { animation: rowFocusFlash 1.2s ease-in-out 0s 2; }
    @keyframes rowFocusFlash { 0%, 100% { box-shadow: none; } 45% { box-shadow: inset 0 0 0 2000px rgba(26,154,213,0.22); } }
    /* ★第47回★ 操作履歴・検知の記録テーブル：列幅を固定し、内容は2行で省略「…」＝クリックで全文展開（再クリックで畳む） */
    .audit-tbl { table-layout:fixed; }
    .audit-tbl tbody td { vertical-align:top; word-break:break-word; overflow-wrap:anywhere; }
    .audit-det { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
    .audit-det.is-clamped { cursor:pointer; }   /* ★第80回★ 実際に省略された行だけクリック可能（短い内容は反応しない） */
    .audit-det.expanded { display:block; -webkit-line-clamp:unset; overflow:visible; }
    .audit-det.is-clamped.expanded::after { content:'　▲ 閉じる'; color:var(--brand-text-dark); font-size:11px; }
    /* ★第80回★ 検知の記録／ホワイトリストの操作ボタン：各ボタンは1行表記（折り返さない）で縦に積む・コンパクト寸法 */
    .row-actions { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
    .row-actions .btn { white-space:nowrap; padding:5px 11px; font-size:12px; }
    /* ★第80回★ CSP違反をまとめてホワイトリスト登録：選択バーとチェックボックス列 */
    .csp-bulk-bar { display:flex; align-items:center; margin:6px 0 10px; }
    .csp-bulk-bar.hidden { display:none; }
    .csp-pick-cell { text-align:center; }
    .csp-pick { width:16px; height:16px; cursor:pointer; }
    /* ★第80回★ セキュリティ検知の履歴：状態バッジ（未確認＝赤系／確認済み＝緑系） */
    .sec-st { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; white-space:nowrap; }
    .sec-st-open { background:#fef2f2; color:#b91c1c; }
    .sec-st-done { background:#f0fdf4; color:#15803d; }
    /* ★第47回★ システムエラー行：技術詳細（スタック）の折りたたみ・確認ボタン */
    .sys-stack { margin-top:5px; }
    .sys-stack > summary { cursor:pointer; color:var(--color-text-muted); font-size:11px; list-style:none; }
    .sys-stack > summary::-webkit-details-marker { display:none; }
    .sys-stack pre { white-space:pre-wrap; word-break:break-all; font-size:11px; line-height:1.5; background:#f8fafc; border:1px solid #e2e8f0; border-radius:4px; padding:6px 8px; margin:4px 0 0; max-height:220px; overflow:auto; color:#475569; }
    .sys-actions { margin-top:6px; }
    .sys-confirm-btn { font-size:11px; padding:3px 12px; border:1px solid var(--brand-border); border-radius:5px; background:#fff; color:var(--brand-text-dark); cursor:pointer; }
    .sys-confirm-btn:hover { background:var(--brand-bg-light); }
    .sys-confirmed { font-size:11px; color:#15803d; font-weight:600; }
    /* ★第48回★ 黄色（参考記録）をまとめて確認 */
    .sys-pick-lb { font-size:11px; color:var(--brand-text-dark); margin-right:10px; cursor:pointer; user-select:none; }
    .sys-pick-lb input { vertical-align:middle; margin-right:3px; }
    .sys-bulk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:8px 12px; margin-bottom:10px; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; }
    .sys-bulk-all { font-size:12px; color:#92400e; cursor:pointer; user-select:none; }
    .sys-bulk-all input { vertical-align:middle; margin-right:5px; }
    .sys-bulk-btn { font-size:12px; padding:5px 14px; border:1px solid var(--brand-border); border-radius:5px; background:#fff; color:var(--brand-text-dark); cursor:pointer; }
    .sys-bulk-btn:hover { background:var(--brand-bg-light); }
    .sys-bulk-count { font-size:12px; color:#92400e; }
    .audit-actions { display:flex; }
    .audit-csv-btn { box-sizing:border-box; height:34px; padding:0 16px; font-size:12px; border:1px solid var(--brand-border); border-radius:6px; background:#fff; color:var(--brand-text-dark); cursor:pointer; white-space:nowrap; }
    .audit-csv-btn:hover { background:var(--brand-bg-light); }
    .mono { font-variant-numeric:tabular-nums; color:var(--color-text-muted); }

    /* 操作履歴の絞り込み（第40回 作り直し）：選択欄は1行・検索欄は独立した1行に分離＝
       入力欄と選択欄を同じ行に並べないことで「高さの不揃い」と「折り返しの崩れ」を構造的に解消する。 */
    .audit-controls { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
    .audit-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
    .audit-filters .fld { display:inline-flex; align-items:center; gap:6px; }
    .audit-filters label { font-size:12px; color:var(--color-text-muted); white-space:nowrap; }
    .audit-filters select { box-sizing:border-box; height:34px; padding:0 30px 0 10px; font-size:12px; border:1px solid var(--brand-border); border-radius:6px; background-color:#fff; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23185FA5' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
    .audit-search { box-sizing:border-box; display:block; width:100%; max-width:480px; height:34px; margin:0; padding:0 12px; font-size:12px; border:1px solid var(--brand-border); border-radius:6px; background:#fff; outline:none; appearance:none; -webkit-appearance:none; }
    .audit-search::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
    .pager { display:flex; justify-content:center; align-items:center; gap:16px; padding:12px; font-size:13px; color:var(--color-text-muted); }
    .pager button { padding:5px 12px; font-size:12px; border:1px solid var(--brand-border); border-radius:6px; background:#fff; cursor:pointer; }
    .pager button:disabled { opacity:.5; cursor:not-allowed; }

    .manual-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--brand-border); border-radius:6px; margin-bottom:10px; }
    .manual-row .m-info { flex:1; min-width:0; }
    .manual-row .m-title { font-size:13px; font-weight:600; margin:0 0 2px; }
    .manual-row .m-desc { font-size:12px; color:var(--color-text-muted); margin:0; }
    .manual-note { font-size:12px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:6px; padding:10px 12px; margin-bottom:14px; line-height:1.6; }

    /* トースト（★第88回★ .app-toast を共通トーストとして追加＝monitoring 専用の .mon-toast を全画面共通へ移設・同スタイル） */
    .mon-toast, .app-toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:10002; padding:10px 16px; border-radius:6px; font-size:13px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); opacity:0; pointer-events:none; transition:opacity .2s; } /* ★第81回★ DEV/STG帯(.env-banner z-index:10001)より前面に＝メッセージが帯の下に隠れない */
    .mon-toast.show, .app-toast.show { opacity:1; }
    .mon-toast.ok, .app-toast.ok { background:#10b981; } .mon-toast.err, .app-toast.err { background:#dc2626; } .mon-toast.info, .app-toast.info { background:#334155; }
    /* ★第81回★ DEV/STG では画面上部に環境バナー(高さ32px)があるので、その下へ出してメッセージ上部が隠れないようにする */
    body.env-mode .mon-toast, body.env-mode .app-toast { top:40px; }
    @media (max-width:760px){ .manual-row{ flex-direction:column; align-items:stretch; } }

/* ----- M7 フェーズB：monitoring 由来 inline style の移送先（見た目不変・逐語） ----- */
/* statbar の読み込み行は padding を 6px 12px に（元 inline style="padding:6px 12px"） */
.statbar .loading-line { padding: 6px 12px; }
/* 見出しの上余白ゼロ（元 inline style="margin-top:0"・.cf-subhead の先頭用。.cf-subhead より後に定義して上書き） */
.mt-0 { margin-top: 0; }
/* テーブル列幅（元 <col style="width:..">）。px と % */
.cw-96 { width: 96px; }
.cw-120 { width: 120px; }
.cw-160 { width: 160px; }
.cw-180 { width: 180px; }
.cw-200 { width: 200px; }
.cw-44 { width: 44px; }
.cw-110 { width: 110px; }
.cw-400 { width: 400px; }
.cw-52p { width: 52%; }
.cw-28p { width: 28%; }
.cw-20p { width: 20%; }

/* ============================================================
 * customers.html から移送した固有スタイル（M7 フェーズB・逐語移送・見た目不変）
 *   ※ .badge-muted は monitoring も未定義のまま使用中のため .cf-badge-muted に改名（漏れ防止）
 * ============================================================ */
    /* ============================================================
     * 顧客管理（会社単位）固有スタイル
     *   - css/style.css のクラス（.form-card / .form-section / .fg / .read-only-value /
     *     .data-table / .badge / .btn 等）を再利用し、会社単位レイアウトに必要な分だけ追加。
     *   - 色・ブランドは変更しない（既存の CSS 変数を使う）。
     * ============================================================ */

    /* 区画見出し（基本情報 / 会社ログイン / 担当者） */
    .sec-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--brand-border);
    }
    .sec-head h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--brand-text-dark);
      /* style.css の .form-section h3（uppercase）を上書き：会社単位の見出しは日本語そのまま太字 */
      text-transform: none;
      letter-spacing: normal;
    }
    .sec-head .sec-tag {
      margin-left: auto;
      font-size: 11px;
      color: var(--color-text-muted);
    }

    /* 会社ログイン欄（ID / パスワード状態 / 規約同意） */
    .login-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px 20px;
      margin-bottom: 12px;
    }
    .login-grid .lbl {
      font-size: 12px;
      color: var(--color-text-muted);
      margin-bottom: 4px;
    }
    .login-grid .read-only-value {
      font-family: 'Consolas', 'Menlo', monospace;
    }
    .login-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .terms-meta {
      font-size: 12px;
      color: var(--color-text-muted);
      margin-left: 4px;
    }
    /* ★第102回★ 招待メール送付済みの小さな注記（会社ログイン欄・送付済み＋リンク有効のときだけ表示） */
    .cf-invite-sent-note {
      font-size: 12px;
      color: var(--color-success);
      margin: 6px 0 0;
    }

    /* 担当者（連絡先）行：代表ラジオ ＋ 名前 ＋ メール ＋ 削除 */
    .contact-row {
      display: grid;
      grid-template-columns: 92px 1fr 1.4fr 96px;
      gap: 12px;
      align-items: end;
      padding: 12px;
      border: 1px solid #eef2f7;
      border-radius: var(--radius-sm);
      margin-bottom: 8px;
      background: #fcfdff;
    }
    .contact-row.is-rep {
      border-color: var(--brand-border);
      background: var(--brand-bg-light);
    }
    .contact-row .fg {
      margin: 0;
    }
    .rep-pick {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--color-text-muted);
      padding-bottom: 8px;
    }
    .rep-pick input {
      accent-color: var(--brand-main);
      transform: scale(1.2);
      cursor: pointer;
    }
    .rep-pick input:disabled {
      cursor: not-allowed;
    }
    .contact-row .contact-del {
      align-self: center;
    }

    /* バッジ補助（一覧の「他 N 名」用・style.css 既定の .badge とは別色のグレー） */
    .cf-badge-muted {
      background: #f1f5f9;
      color: #475569;
      border-color: #e2e8f0;
      cursor: help;
    }

/* ----- M7 フェーズB：customers.html / customers.js 由来 inline style の移送先（見た目不変・逐語） ----- */
.fc-wide { max-width: 860px; }                                   /* 元 form-card style="max-width:860px" */
.cf-kind-group { display: flex; gap: 24px; align-items: center; margin-top: 2px; }  /* 元 #cf-account-kind-group の inline */
/* 種別ラジオのラベル（.fg label の font-weight:600 に負けないよう子孫セレクタで normal を維持） */
.cf-kind-group label { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; }
.btn-compact { padding: 6px 14px; font-size: 13px; }             /* 招待/案内/担当者追加ボタン */
.fh-tight { margin: -4px 0 12px; }                               /* form-hint の詰めた余白 */
.mt-12 { margin-top: 12px; }
.empty-state .empty-title.empty-error { color: var(--color-danger); }  /* 読み込み失敗見出し（元 inline color:danger） */
.cell-actions { display: flex; gap: 6px; align-items: center; }  /* 一覧の操作セル */
.btn-row { padding: 4px 12px; font-size: 12px; }                 /* 行内ボタン（編集/削除） */
.btn-row-sm { padding: 4px 10px; font-size: 12px; }              /* 担当者行の削除/取消ボタン */
/* 危険色アウトライン（元 inline は :hover でも赤を維持＝inline が .btn-ghost:hover に勝っていたため、:hover も明示して同じ見た目に） */
.btn-danger-outline { color: var(--color-danger); border-color: #fecaca; }
.btn-danger-outline:hover:not(:disabled) { color: var(--color-danger); border-color: #fecaca; }
.th-sub { font-weight: 400; font-size: 11px; }                   /* 見出し内の補助文字（会社） */
.text-muted { color: var(--color-text-muted); }                  /* —／未発行 のグレー文字 */
.mono-text { font-family: 'Consolas', 'Menlo', monospace; }      /* ログインID 等の等幅 */

/* ============================================================
 * admin-users.html から移送した固有スタイル（M7 フェーズB・逐語移送・見た目不変）
 * ============================================================ */
    .au-role-super { color:#185FA5; font-weight:700 }
    .au-role-staff { color:#64748b }
    .au-status-active { color:#16a34a; font-weight:600 }
    .au-status-inactive { color:#d97706; font-weight:600 }
    .au-actions { display:flex; gap:8px; flex-wrap:wrap }
    .au-pw-result {
      background:#fef3c7; border:1px solid #f59e0b; border-radius:8px;
      padding:14px 16px; margin:12px 0; font-family:'Courier New',monospace;
    }
    .au-pw-result .pw {
      font-size:18px; font-weight:700; letter-spacing:1px; color:#92400e; word-break:break-all;
    }
    .au-pw-result .note { font-family:inherit; font-size:13px; color:#78350f; margin-top:6px }

/* ----- M7 フェーズB：admin-users.html 由来 inline style の移送先（見た目不変・逐語） ----- */
.page-subtitle { margin: -8px 0 16px; color: #64748b; font-size: 13px; }
.modal-title { margin: 0 0 14px; }                                          /* モーダルの h2 */
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.modal-actions-split { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-top: 14px; }
.owner-note { color: #185FA5; background: #E6F1FB; border: 1px solid #B5D4F4; border-radius: 6px; padding: 8px 10px; margin: 6px 0; }
.modal-hr { border: none; border-top: 1px solid var(--brand-border); margin: 14px 0 10px; }
.pw-section-title { margin: 0 0 8px; font-weight: 600; font-size: 13px; color: #185FA5; }
.msg-success { color: #16a34a; }
.btn-amber { background: #f59e0b; color: #fff; border-color: #f59e0b; }       /* パスワード変更ボタン（橙） */
.btn-danger-solid { background: #dc2626; color: #fff; border-color: #dc2626; } /* 削除/強制終了ボタン（赤塗り） */
.es-error { color: var(--color-danger); }                                    /* 一覧エラー時の empty-state 文字色 */

/* ----- 第93回：管理者ユーザー編集モーダルの作り直し（セクション分割・結果表示・ボタン活性制御） ----- */
.edit-section { border: 1px solid var(--brand-border, #B5D4F4); border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; }
.edit-section-title { margin: 0 0 10px; font-weight: 600; font-size: 14px; color: #185FA5; }
.edit-section-danger { border-color: #f0a9a9; }
.edit-section-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.edit-section-actions-split { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.edit-msg { white-space: pre-line; font-size: 13px; line-height: 1.6; margin-top: 8px; }
.edit-msg.success { color: #16a34a; }
.edit-msg.error { color: var(--color-danger, #dc2626); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.dialog-message { white-space: pre-line; }
.pw-show-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #185FA5; margin-top: 4px; cursor: pointer; }
.pw-show-toggle input { width: auto; margin: 0; }
.app-toast { white-space: pre-line; }

/* ============================================================
 * list.html から移送した固有スタイル（M7 フェーズB・逐語移送・見た目不変）
 * ============================================================ */
    /* イベント一覧 専用（第41回・色は css/style.css のブランド水色に合わせた固定値） */
    .evt-controls { display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
    .evt-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .evt-search { width:340px; max-width:100%; padding:8px 12px; font-size:13px; border:1px solid #B5D4F4; border-radius:6px; outline:none; }
    .evt-search:focus { border-color:#1A9AD5; box-shadow:0 0 0 3px rgba(26,154,213,.15); }
    .evt-label { font-size:12px; color:#64748b; font-weight:600; }
    .evt-hint { font-size:12px; color:#64748b; }
    .evt-spacer { flex:1; }
    .evt-seg { display:inline-flex; border:1px solid #B5D4F4; border-radius:6px; overflow:hidden; }
    .evt-seg button { border:none; background:#fff; color:#1B2A4A; font-size:12px; font-weight:500; padding:6px 12px; cursor:pointer; border-right:1px solid #B5D4F4; }
    .evt-seg button:last-child { border-right:none; }
    .evt-seg button.active { background:#1A9AD5; color:#fff; }
    .evt-sel { padding:7px 12px; font-size:12px; border:1px solid #B5D4F4; border-radius:6px; background:#fff; color:#1B2A4A; outline:none; max-width:260px; }

    .evt-wrap { background:#fff; border:1px solid #B5D4F4; border-radius:8px; overflow:auto; max-height:64vh; }
    table.evt { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; }
    table.evt thead th { position:sticky; top:0; z-index:2; background:#E6F1FB; color:#185FA5; font-weight:600; font-size:12px; text-align:left; padding:9px 8px; border-bottom:1px solid #B5D4F4; white-space:nowrap; }
    table.evt tbody td { padding:8px 8px; border-bottom:1px solid #f1f5f9; vertical-align:middle; white-space:nowrap; color:#1B2A4A; }
    table.evt tbody tr:hover { background:rgba(26,154,213,.05); }
    table.evt td.num, table.evt th.num { text-align:right; font-variant-numeric:tabular-nums; }
    table.evt td.ellip { overflow:hidden; text-overflow:ellipsis; }
    /* 警告列は複数バッジを折り返して表示（見切れ防止）。状態列は幅で2バッジを収める。 */
    table.evt td.evt-alerts { white-space:normal; line-height:1.9; }
    table.evt td.evt-state { white-space:normal; line-height:1.9; }
    th.evt-sort { cursor:pointer; user-select:none; }
    th.evt-sort .arrow { color:#1A9AD5; font-size:10px; margin-left:2px; }
    th.evt-sort.inactive .arrow { color:#cbd5e1; }
    .evt-jobno { font-family:'Consolas','Menlo',monospace; font-size:11px; }
    .evt-custno { font-family:'Consolas','Menlo',monospace; }
    .evt-rate-zero { color:#64748b; }
    .evt-detail-btn { padding:4px 10px; font-size:12px; text-decoration:none; }

    .evt-pager { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12px; color:#64748b; flex-wrap:wrap; }
    .evt-pager .pages { display:inline-flex; gap:4px; }
    .evt-pager .pages button { min-width:30px; padding:5px 8px; border:1px solid #B5D4F4; background:#fff; color:#1B2A4A; border-radius:6px; font-size:12px; cursor:pointer; }
    .evt-pager .pages button.active { background:#1A9AD5; color:#fff; border-color:#1A9AD5; }
    .evt-pager .pages button:disabled { opacity:.4; cursor:default; }

/* ----- M7 フェーズB：list.html / list.js 由来 inline style の移送先（見た目不変・逐語） ----- */
.ml-auto { margin-left: auto; }                 /* 新規作成リンク右寄せ（元 style="margin-left:auto"） */
.ml-8 { margin-left: 8px; }                      /* 「顧客」ラベル左余白 */
.no-underline { text-decoration: none; }         /* 警告バッジリンクの下線消し（元 const ls） */
.evt-wrap-auto { max-height: none; }             /* 空/エラー時の枠（元 style="max-height:none"） */
.evt-pager-ellipsis { padding: 5px 4px; color: #94a3b8; }  /* ページャの省略記号 … */
.cw-58 { width: 58px; }
.cw-60 { width: 60px; }
.cw-74 { width: 74px; }
.cw-86 { width: 86px; }
.cw-88 { width: 88px; }
.cw-138 { width: 138px; }
.cw-150 { width: 150px; }

/* ============================================================
 * settings.html から移送した固有スタイル（M7 フェーズB・逐語移送・見た目不変）
 * ============================================================ */
    .settings-layout { display: block; }
    /* カテゴリは上部の横タブ（左の縦メニューから変更・他画面と体裁を揃える） */
    /* ★第80回★ 設定カテゴリ：タブ格子 → プルダウン選択。フォームの選択欄（.fg select）と同じ作りに寄せ、
       カテゴリ選択と分かるよう「ブランド色の太め枠＋少し大きい太字」で強調する（ラベルは欄の上）。 */
    .cat-tabs { display: block; margin: 0 0 18px; max-width: 440px; }
    .cat-select-label { display: block; font-size: 13px; font-weight: 600; color: var(--brand-text-dark); margin: 0 0 6px; }
    .cat-select { width: 100%; padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--brand-text-dark); border: 2px solid var(--brand-main); border-radius: var(--radius-sm); background: var(--color-surface); outline: none; transition: box-shadow 0.15s; font-family: inherit; cursor: pointer; }
    .cat-select:focus { box-shadow: 0 0 0 3px rgba(26, 154, 213, 0.18); }
    .cat-tab { padding: 10px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.3; text-align: center; }
    .cat-tab:hover { background: var(--brand-bg-light); }
    .cat-tab.active { background: var(--brand-main); color: #fff; border-color: var(--brand-main); }
    .cat-tab .wip { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
    .cat-tab.active .wip { background: rgba(255,255,255,.25); color: #fff; border-color: transparent; }
    /* パネルは新規作成・顧客登録と同じ 720px・左寄せ */
    .settings-panel { max-width: 720px; }
    .settings-subtitle { font-size: 12px; color: var(--color-text-muted); margin: -8px 0 12px; }
    .settings-desc { font-size: 13px; color: var(--color-text); background: var(--brand-bg-light); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; line-height: 1.6; }
    .settings-note { font-size: 12px; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px; line-height: 1.6; }
    .settings-note-info { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
    .settings-note-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
    .settings-fields .fg { margin-bottom: 14px; }
    /* カテゴリ内のセクション小見出し（③配信・招待メール／⑤監視・社内通知 等の区切り） */
    .settings-section-head { font-size: 13px; font-weight: 700; color: var(--color-text-dark, #185FA5); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--brand-border); }
    .settings-section-head:first-child { margin-top: 0; }
    /* 読み取り専用の情報表示（グレーアウト・変更できない固定値の提示） */
    .ro-info label { color: var(--color-text-muted, #64748b); }
    .ro-box { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: var(--radius-sm); padding: 10px 12px; }
    .ro-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
    .ro-key { color: #6b7280; }
    .ro-val { color: #4b5563; font-weight: 600; }
    .ro-note { margin-top: 8px; font-size: 12px; color: #9ca3af; line-height: 1.5; }
    /* §1: 入力欄を内容に応じた幅で止める（画面右端まで伸ばさない） */
    .settings-fields .fg input[type="text"],
    .settings-fields .fg input[type="email"],
    .settings-fields .fg input[type="url"],
    .settings-fields .fg select { max-width: 440px; }
    .settings-fields .fg input[type="number"] { max-width: 120px; }
    .input-with-test { max-width: 520px; }
    .bday-grid { display: flex; flex-wrap: wrap; gap: 4px 16px; }
    .hours-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px 8px; }
    .hours-grid .checkbox-label { font-size: 12px; padding: 3px 0; }
    .input-with-test { display: flex; gap: 8px; align-items: center; }
    .input-with-test input { flex: 1; }
    .guard-combo-box { background: var(--brand-bg-light); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 12px 14px; }
    .guard-combo-cmd { margin-top: 6px; font-size: 13px; color: var(--color-text); line-height: 1.6; }
    @media (max-width: 760px) {
      .hours-grid { grid-template-columns: repeat(4, 1fr); }
      .cat-tabs { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .cat-tabs { grid-template-columns: 1fr; }
    }
    /* ⑨ 利用規約・プライバシーポリシー 編集タブ（第43回 段階2） */
    .terms-ver-line{margin:12px 0 4px;font-size:14px;color:var(--c-text-secondary,#185FA5)}
    .terms-tabs{display:flex;gap:6px;margin:10px 0 0}
    .terms-tab{padding:8px 14px;font-size:14px;border:1px solid var(--c-border,#B5D4F4);border-bottom:none;background:#fff;color:var(--c-text-secondary,#185FA5);border-radius:8px 8px 0 0;cursor:pointer}
    .terms-tab.active{background:var(--c-surface-alt,#E6F1FB);color:var(--c-text-dark,#185FA5);font-weight:700}
    .terms-toolbar{display:flex;gap:6px;padding:8px;border:1px solid var(--c-border,#B5D4F4);border-bottom:none;background:#f7fafd}
    .terms-toolbar button{padding:4px 12px;font-size:13px;border:1px solid var(--c-border,#B5D4F4);background:#fff;border-radius:6px;cursor:pointer}
    .terms-toolbar button:hover{background:var(--c-surface-alt,#E6F1FB)}
    .terms-editor{min-height:340px;max-height:560px;overflow-y:auto;border:1px solid var(--c-border,#B5D4F4);border-radius:0 8px 8px 8px;padding:16px 18px;background:#fff;font-size:13.5px;line-height:1.9;color:#333}
    .terms-editor:focus{outline:2px solid var(--c-main,#1A9AD5);outline-offset:-2px}
    .terms-editor h2,.terms-editor h3,.terms-editor h4{color:var(--c-text-dark,#185FA5);font-weight:700}
    .terms-editor h3{font-size:15px;margin:16px 0 5px}
    .terms-editor h4{font-size:13.5px;margin:10px 0 4px}
    .terms-editor p{margin:0 0 8px}
    .terms-newver-line{margin:8px 0 4px}
    .terms-newver-line label{display:inline-block;font-size:14px;color:var(--c-text-secondary,#185FA5);margin-right:8px;font-weight:700}
    .terms-newver-input{width:150px;padding:5px 10px;font-size:14px;border:1px solid var(--c-border,#B5D4F4);border-radius:6px}

/* ----- M7 フェーズB：settings.js 由来 inline style の移送先（見た目不変・逐語） ----- */
.btn-cal { padding: 8px 12px; white-space: nowrap; }          /* カレンダー確認/テスト送信ボタン */
.inline-msg { min-height: 18px; margin-top: 8px; }            /* cat-msg / reminder-msg */
.mt-16 { margin-top: 16px; }
/* 営業日カレンダー読み込み結果モーダル（settings.js 動的生成） */
.cal-row-hol { background: #fef2f2; }
.cal-row-normal { background: #ffffff; }
.cal-td { padding: 6px 10px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.cal-td-mark { padding: 6px 10px; border-bottom: 1px solid #e2e8f0; font-weight: 600; white-space: nowrap; }
.cal-mark-hol { color: #b91c1c; }
.cal-mark-normal { color: #185FA5; }
.cal-td-title { padding: 6px 10px; border-bottom: 1px solid #e2e8f0; color: #475569; }
.cal-modal { background: #fff; border-radius: 10px; max-width: 560px; width: 100%; max-height: 80vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.cal-modal-head { padding: 16px 20px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }
.cal-modal-title { color: #185FA5; font-size: 16px; }
.cal-modal-x { border: none; background: none; font-size: 22px; cursor: pointer; color: #64748b; line-height: 1; }
.cal-modal-desc { padding: 12px 20px; color: #475569; font-size: 13px; }
.cal-modal-body { padding: 0 20px 20px; }
.cal-modal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cal-th { text-align: left; padding: 6px 10px; border-bottom: 2px solid #B5D4F4; color: #185FA5; }
.cal-modal-foot { padding: 12px 20px; border-top: 1px solid #e2e8f0; text-align: right; }
.cal-modal-btn { padding: 8px 16px; background: #1A9AD5; color: #fff; border: none; border-radius: 6px; cursor: pointer; }

/* ============================================================
 * detail.html から移送した固有スタイル（M7 フェーズB・逐語移送・見た目不変）
 * ============================================================ */
    :root { --c-accent: #3ec8b5; }

    /* 詳細画面：v2 準拠 1 カラム（中央寄せ） */
    #detail-state { max-width: 1000px; margin: 0 auto; }

    /* ===== 1. 情報集約ヘッダー ===== */
    .det-header { background: var(--brand-text-dark); color: #fff; border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 12px; }
    .det-h-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
    .det-h-top { font-size: 11px; opacity: .8; }
    .det-h-mid { font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
    .det-h-sub { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 12px; opacity: .95; }
    .det-verify-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
    .det-verify-ok { background: #16a34a; color: #fff; }
    .det-verify-warn { background: #d97706; color: #fff; }
    .preview-btn { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
    .preview-btn:hover { background: rgba(255,255,255,.28); }

    /* ===== 2. アラート ===== */
    .alerts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .alerts:empty { display: none; }

    /* ===== 3. サマリーカード ===== */
    .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
    @media (max-width: 700px) { .summary { grid-template-columns: repeat(2, 1fr); } }
    .sum-card { background: var(--color-surface); border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: 16px; text-align: center; }
    .sum-card .num { font-size: 28px; font-weight: 700; color: var(--brand-text-dark); line-height: 1.1; }
    .sum-card .label { font-size: 12px; color: var(--color-text-muted); margin-top: 5px; }
    .sum-card.accent .num { color: var(--c-accent); }

    /* ===== 汎用カード（v2 準拠・左アクセント色） ===== */
    .det-card { background: var(--color-surface); border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 12px; }
    .det-card > h3 { margin: 0 0 12px; font-size: 14px; color: var(--brand-text-dark); display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; font-weight: 700; }
    .det-card h3 .h-action { margin-left: auto; }
    .det-card.accent-blue { border-left: 3px solid var(--brand-main); }
    .det-card.accent-green { border-left: 3px solid #16a34a; }
    .det-card.accent-orange { border-left: 3px solid #ea580c; }
    .btn-edit-small { background: none; border: 1px solid var(--brand-border); color: var(--brand-main); padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 600; font-family: inherit; }
    .btn-edit-small:hover { background: var(--brand-bg-light); }
    .btn-copy-small { background: var(--brand-bg-light); border: 1px solid var(--brand-border); color: var(--brand-text-dark); padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-family: inherit; white-space: nowrap; }
    .btn-copy-small:hover { background: var(--brand-border); }

    /* ===== STEP ラベル（v2） ===== */
    .step-label { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; margin-right: 4px; }
    .step-label.step-1 { background: #dbeafe; color: #1e40af; }
    .step-label.step-2 { background: #dcfce7; color: #166534; }
    .step-desc { font-size: 12px; color: var(--color-text-muted); margin: 0 0 8px; line-height: 1.6; }
    .import-status { padding: 9px 13px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 10px; line-height: 1.6; }
    .import-status.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
    .import-status.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

    /* ===== QR ベース URL / コピーボックス（v2） ===== */
    .copy-box { display: flex; align-items: center; gap: 8px; background: var(--brand-bg-light); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; word-break: break-all; }
    .copy-box .url-text { flex: 1; font-family: 'Consolas', 'Menlo', monospace; color: var(--brand-text-dark); }

    /* ===== 基本情報 info-grid（§1: ラベル＋値を2組ずつ横並び・値をラベルの近くに寄せ右の空白を解消） ===== */
    .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; font-size: 13px; }
    .info-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; }
    .info-row.wide { grid-column: 1 / -1; }
    .info-row .lbl { flex: 0 0 116px; color: var(--color-text-muted); font-size: 12px; }
    .info-row .val { flex: 1; min-width: 0; color: var(--color-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: break-word; }
    .info-row .val strong { font-weight: 600; }
    .info-row .val .sub { color: var(--color-text-muted); font-size: 11px; }
    .info-row .url-text { font-family: 'Consolas', 'Menlo', monospace; font-size: 12px; color: var(--brand-text-dark); word-break: break-all; }
    .info-row .val-time { color: var(--color-text-muted); font-size: 12px; }
    .info-section-title { grid-column: 1 / -1; font-size: 12px; color: var(--brand-text-dark); font-weight: 700; margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--brand-border); }
    .info-section-title:first-child { margin-top: 0; }
    @media (max-width: 760px) {
      .info-grid { grid-template-columns: 1fr; }
      .info-row.wide { grid-column: auto; }
    }

    /* ===== 展開式カード（トラッキング閲覧） ===== */
    details.expand-card { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-md); margin-bottom: 12px; }
    details.expand-card > summary { padding: 14px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-text-dark); list-style: none; display: flex; align-items: center; gap: 8px; }
    details.expand-card > summary::-webkit-details-marker { display: none; }
    details.expand-card > summary::before { content: '▶'; font-size: 11px; color: var(--color-text-muted); transition: transform .2s; }
    details.expand-card[open] > summary::before { transform: rotate(90deg); }
    details.expand-card > summary .summary-note { margin-left: auto; font-size: 10px; color: var(--color-text-muted); font-weight: 400; }
    details.expand-card .expand-body { padding: 0 16px 16px; border-top: 1px solid #e5e7eb; padding-top: 12px; }

    /* ===== クローズ処理ステータス ===== */
    .close-status-card { background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; }
    .close-status-card > h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #92400e; }

    /* ===== デモカード ===== */
    .demo-card { border: 1px dashed #f59e0b; background: #fffbf0; }

    /* ===== 手動物理削除（常用外） ===== */
    .delete-card { margin-top: 24px; padding: 16px; border: 1px solid #e0d4d4; border-radius: 8px; background: #fdfafa; }
    .delete-card > h3 { margin: 0 0 10px; color: #666; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .badge-rare { font-size: 10px; background: #999; color: #fff; padding: 2px 8px; border-radius: 10px; font-weight: 600; letter-spacing: .5px; }
    .btn-delete-rare { background: #fff; color: #888; border: 1px solid #c8c8c8; padding: 8px 16px; border-radius: 4px; font-size: 12px; cursor: pointer; font-weight: 500; font-family: inherit; }
    .btn-delete-rare:hover { background: #f5f5f5; }
    /* ===== QR モーダル（LP遷移テストのスマホ実機確認・v1.16Q） ===== */
    /* ★第79回★ QR表示は <dialog>（最前面レイヤー）で出す＝test-modal 等の他モーダルの前面に確実に重なる（z-index では <dialog> の top-layer に勝てないため）。 */
    dialog.qr-overlay { border: none; padding: 0; background: transparent; max-width: 92vw; }
    dialog.qr-overlay::backdrop { background: rgba(0,0,0,.5); }
    .qr-box { background: #fff; border-radius: 12px; padding: 24px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
    .qr-box h3 { margin: 0 0 8px; font-size: 16px; color: #185FA5; }
    .qr-box-desc { font-size: 13px; color: #555; margin: 0 0 16px; line-height: 1.6; }
    .qr-img { display: flex; justify-content: center; margin: 0 0 14px; }
    .qr-img img { max-width: 100%; height: auto; image-rendering: pixelated; }
    .qr-url { font-size: 11px; color: #888; word-break: break-all; margin: 0 0 16px; background: #f6f8fa; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; }
    .btn-qr-show { font-size: 11px; padding: 2px 8px; margin-left: 4px; background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; border-radius: 4px; cursor: pointer; font-family: inherit; }
    .btn-qr-show:hover { background: #d3e6f9; }
    /* ===== 検証カードの公開後グレーアウト（第44回・デモは対象外） ===== */
    .expand-card.inspect-locked > summary { color: #94a3b8; pointer-events: none; cursor: not-allowed; }
    /* 検証データ表：縦スクロールしてもヘッダー行を上端に固定（第44回） */
    #ins-rec-result .data-table thead th { position: sticky; top: 0; z-index: 1; }
    /* ===== トラッキングテスト・確認用データ閲覧 モーダル（第62回 第2部ピース2・モック test-modal-mock.html 準拠） ===== */
    #test-modal { max-width: 920px; width: 94vw; max-height: calc(100vh - 64px); padding: 0; border: none; border-radius: 10px; overflow: hidden; }
    #test-modal::backdrop { background: rgba(15, 30, 50, .45); }
    .test-modal-wrap { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
    .test-modal-head { background: var(--brand-text-dark); color: #fff; padding: 14px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-shrink: 0; }
    .test-modal-head .ttl { font-size: 16px; font-weight: 700; }
    .test-modal-head .sub { font-size: 12px; color: #cfe6f6; margin-top: 2px; font-weight: 400; }
    .test-modal-head .x { background: rgba(255,255,255,.15); color: #fff; border: none; width: 30px; height: 30px; border-radius: 6px; font-size: 18px; line-height: 1; flex-shrink: 0; cursor: pointer; font-family: inherit; }
    .test-modal-head .x:hover { background: rgba(255,255,255,.28); }
    .test-modal-body { padding: 18px 20px; overflow-y: auto; }
    .test-modal-foot { border-top: 1px solid #e6eaf0; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fafcfe; flex-wrap: wrap; flex-shrink: 0; }
    .test-modal-foot .note { font-size: 12px; color: var(--color-text-muted); }
    .test-info-box { background: var(--brand-bg-light); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; color: var(--brand-text-dark); line-height: 1.7; margin-bottom: 14px; }
    .test-count-line { font-size: 13px; margin: 0 0 10px; }
    .test-count-line .num { font-weight: 700; color: var(--brand-main); font-size: 15px; }
    /* モーダル内では表のスクロールはモーダル本体に任せる（二重スクロール回避・中身だけスクロール） */
    .test-modal-body .data-table-wrap { max-height: none !important; overflow: visible !important; }
    /* 削除エラー表示＋リトライ（ステップ2） */
    .test-err-box { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 14px; }
    .test-err-box .et { font-size: 14px; font-weight: 700; color: var(--color-danger); margin-bottom: 6px; }
    .test-err-box .em { font-size: 13px; color: #7f1d1d; line-height: 1.7; }
    #test-error.hidden { display: none; }
    #test-foot-error { display: flex; gap: 8px; }
    #test-foot-error.hidden { display: none; }
    /* 残テストデータの回収ダイアログ（ステップ3） */
    #recover-modal { max-width: 560px; width: 92vw; max-height: calc(100vh - 64px); padding: 0; border: none; border-radius: 10px; overflow: hidden; }
    #recover-modal::backdrop { background: rgba(15, 30, 50, .45); }
    #recover-error.hidden { display: none; }
    #recover-foot-normal { display: flex; gap: 8px; }
    #recover-foot-normal.hidden { display: none; }
    #recover-foot-error { display: flex; gap: 8px; }
    #recover-foot-error.hidden { display: none; }

/* M7 フェーズB：detail.html/js 由来（インライン style 外部化・値は逐語・見た目不変） */
.dt-m-0-0-8 { margin: 0 0 8px; }
.dt-mb-8 { margin-bottom: 8px; }
.dt-preview-box { margin-top: 8px; padding: 8px; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
.dt-ox-auto { overflow-x: auto; }
.dt-flex-end { display: flex; justify-content: flex-end; }
.dt-flex-end-mt8 { display: flex; justify-content: flex-end; margin-top: 8px; }
.dt-btn-green { background: #059669; border-color: #059669; }
/* hover でも緑を維持（このボタンは .btn-primary も持つため .btn-primary:hover(青) に負けないよう明示。元 inline が :hover に勝っていた挙動の再現） */
.dt-btn-green:hover:not(:disabled) { background: #059669; border-color: #059669; }
.dt-btn-orange { background: #d97706; color: #fff; border-color: #d97706; }
.dt-textarea-mono { width: 100%; font-family: monospace; }
.dt-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; }
.dt-status-row-dashed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed #fde68a; }
.dt-status-label { font-size: 12px; font-weight: 600; min-width: 150px; }
.dt-status-val { font-size: 12px; flex: 1; }
.dt-btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-flex-wrap-gap8 { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-sub-fullrow { flex-basis: 100%; }
.dt-btn-modal { padding: 8px 16px; font-size: 13px; }
.dt-step-desc-m { margin: 0 0 12px; }
.dt-lock-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.dt-demo-tag { font-size: 10px; color: var(--color-text-muted); font-weight: 400; text-transform: none; letter-spacing: normal; }
.dt-btn-copy-name { margin-left: 8px; padding: 2px 10px; font-size: 12px; }
.dt-status-actions-col { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.dt-danger-lead { margin: 0 0 14px; line-height: 1.7; }
.dt-strong-666 { color: #666; }
.dt-note-a33 { color: #a33; }
.dt-form-hint-fine { margin: 10px 0 0; font-size: 10px; color: #aaa; }
.dt-dialog-notify { max-width: 560px; width: 92vw; padding: 0; border: none; border-radius: 8px; }
.dt-dialog-content-pad { padding: 20px 24px; }
.dt-dialog-title-mt0 { margin-top: 0; }
.dt-dialog-msg-mb12 { margin-bottom: 12px; }
.dt-scan-hours-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; font-size: 12px; }
.dt-dialog-actions-pad { padding: 0 24px 20px; }
.dt-dialog-demo { max-width: 640px; width: 94vw; max-height: 90vh; padding: 0; border: none; border-radius: 8px; overflow: hidden; }
.dt-dialog-demo-content { padding: 20px 24px; max-height: calc(90vh - 70px); overflow-y: auto; }
.dt-demo-info-bar { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; font-size: 12px; color: #475569; display: flex; gap: 16px; flex-wrap: wrap; }
.dt-form-hint-mb12 { margin-bottom: 12px; }
.dt-flex-gap8-center { display: flex; gap: 8px; align-items: center; }
.dt-input-80 { flex: 0 0 80px; }
.dt-form-hint-m0 { margin: 0; }
.dt-demo-box { margin-top: 8px; padding: 10px 12px; background: #fafafa; border: 1px solid #e5e7eb; border-radius: 6px; }
.dt-demo-box-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #334155; }
.dt-form-hint-mt4 { margin-top: 4px; }
.dt-form-row-mt8 { margin-top: 8px; }
.dt-dialog-actions-demo { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px; border-top: 1px solid #e5e7eb; background: #fff; }
.dt-test-filter-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.dt-fg-240 { flex: 0 0 240px; margin: 0; }
.dt-recover-p1 { font-size: 14px; line-height: 1.8; margin: 0 0 6px; }
.dt-recover-p2 { font-size: 13px; line-height: 1.8; margin: 0; color: var(--color-text-muted); }
/* detail.js innerHTML 由来 */
.dt-txt-green { color: #16a34a; font-weight: 600; }
.dt-txt-muted { color: var(--color-text-muted); }
.dt-seq-ok { margin-top: 6px; color: #16a34a; }
.dt-seq-warn { margin-top: 6px; color: #d97706; }
.dt-preview-head { margin-bottom: 4px; color: #1e40af; font-weight: 600; }
.dt-preview-total { margin-top: 6px; color: #475569; }
.dt-vtable { width: 100%; border-collapse: collapse; font-family: Menlo, Consolas, monospace; font-size: 11px; table-layout: auto; }
.dt-vth { padding: 4px 8px; background: #d1fae5; border: 1px solid #6ee7b7; text-align: left; font-weight: 600; color: #065f46; }
.dt-vtd { padding: 4px 8px; border: 1px solid #d1fae5; color: #374151; word-break: break-all; }
.dt-th-right { text-align: right; }
.dt-td-rownum { text-align: right; color: #9ca3af; }
.dt-preview-head-green { margin-bottom: 6px; color: #047857; font-weight: 600; }
.dt-pager-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
.dt-inspect-table-wrap { margin-top: 8px; max-height: 420px; overflow-y: auto; }
.dt-inspect-table { font-size: 12px; }
.dt-close-sent { color: #16a34a; font-weight: 600; }
.dt-close-error { color: #dc2626; font-weight: 600; }
.dt-close-pending { color: #1e40af; font-weight: 600; }
.dt-close-none { color: #64748b; }
.dt-close-none-note { font-size: 12px; color: #94a3b8; }
.dt-csv-name { font-size: 11px; color: #64748b; margin-left: 8px; }
.dt-csv-note { font-size: 11px; color: #94a3b8; margin-left: 8px; }
.dt-hour-lbl { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.dt-hour-lbl-maint { display: flex; align-items: center; gap: 3px; cursor: not-allowed; color: #94a3b8; }

/* ===== ⑧ 郵便番号データ（都道府県判定）パネル（第101回） ===== */
.postal-status { margin: 12px 0; padding: 12px 14px; background: var(--brand-bg-light); border: 1px solid var(--brand-border); border-radius: var(--radius-md); font-size: 13px; }
.postal-meta { color: var(--brand-text-dark); }
.postal-none { color: var(--color-text-muted); line-height: 1.7; }
.postal-due { display: inline-block; margin-left: 10px; padding: 2px 8px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; }
.postal-howto { margin: 14px 0; }
.postal-steps { margin: 6px 0 8px; padding-left: 1.4em; line-height: 1.8; font-size: 13px; color: var(--color-text); }
.postal-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.postal-file { font-size: 13px; }
.postal-dl { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--brand-border); border-radius: var(--radius-md); }
.postal-dl-note { font-size: 13px; color: var(--color-text); margin-bottom: 8px; }
.postal-dl-link { text-decoration: none; }
.postal-dl-none { font-size: 13px; color: var(--color-text-muted); }
.postal-dl-edit { margin-top: 10px; }
.postal-dl-edit summary { cursor: pointer; font-size: 13px; color: var(--brand-text-dark); }
.postal-dl-edit-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.postal-dl-input { width: 100%; max-width: 640px; font-size: 13px; }

/* ===== 監視画面の「やさしいお知らせ」（第101回・赤/黄の要対処とは別枠） ===== */
.mon-notice { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; padding: 12px 14px; background: var(--brand-bg-light); border: 1px solid var(--brand-border); border-radius: var(--radius-md); font-size: 13px; }
.mon-notice .mark { flex: none; padding: 2px 8px; background: var(--brand-main); color: #fff; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; }
.mon-notice .mn-text { color: var(--color-text); line-height: 1.6; }