/* path: frontend/css/styles.css */
/* モーダル見出し／キャンセル／モードバッジ: modules/trust-modal.css（本ファイル末尾に同一内容を追記） */

/* ========== App shell ヘッダー（全ページ共通の右スロット配置） ========== */
@import url('./modules/app-shell-header-layout.css');
@import url('./modules/admin-verification-access.css');

/* ========== 選択UI モジュールインポート ========== */
@import url('./modules/selection-ui.css');
@import url('./modules/genre-selection.css');
@import url('./modules/style-selection.css');
@import url('./modules/selection-states.css');
@import url('./modules/selection-themes.css');

/* ========== まとめセクションON/OFF設定 ========== */
.toggle-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.2s ease;
  cursor: pointer;
}

.toggle-option:hover {
  border-color: #007bff;
  background: #f0f8ff;
}

/* アクセシビリティ強化: フォーカス管理 */
.toggle-option:focus-within {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.toggle-option[role="checkbox"]:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.toggle-option input[type="checkbox"] {
  margin: 0;
  transform: scale(1.2);
  cursor: pointer;
}

.toggle-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.toggle-label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1rem;
  line-height: 1.4;
}

.toggle-desc {
  color: #6c757d;
  font-size: 0.875rem;
  line-height: 1.3;
}

/* ========== Reset & Base ========== */
*{box-sizing:border-box}
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

:where(img, svg, canvas, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ========== Chart.js Styles ========== */
.chart-container {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    text-align: center;
    min-height: 200px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
}

.chart-container canvas {
    max-width: 100%;
    max-height: 300px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 4px;
}

.chart-container img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: block;
    visibility: visible;
    opacity: 1;
}

/* 履歴表示用の高品質グラフ画像スタイル */
.history-chart-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: block;
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.history-chart-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.chart-caption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    text-align: center;
    display: block;
    visibility: visible;
    opacity: 1;
}

/* === ブランドカラーパレット & デザインシステム変数 === */
:root {
  --color-bg: #F9F6F2;
  --color-surface: #E6E1D9;
  --color-text: #3A3A3A;
  --color-accent: var(--trust-cta); /* オレンジ */
  --color-accent2: var(--trust-verified-light); /* グリーン */
  --color-accent3: var(--trust-intelligence); /* パープル */
  --radius-card: 18px;
  --radius-btn: 12px;
  --shadow-card: 0 4px 24px rgba(37, 99, 235, 0.10);
}

:root {
  /* Trust design tokens (Step 1) */
  --trust-primary: #1e3a5f;
  --trust-primary-light: #2d5a8e;
  --trust-primary-surface: rgba(30, 58, 95, 0.06);
  --trust-cta: #2563eb;
  --trust-cta-hover: #1d4ed8;
  --trust-cta-surface: rgba(37, 99, 235, 0.08);
  --trust-verified: #0d9488;
  --trust-verified-light: #14b8a6;
  --trust-verified-surface: rgba(13, 148, 136, 0.08);
  --trust-intelligence: #4f46e5;
  --trust-intelligence-light: #6366f1;
  --trust-intelligence-surface: rgba(79, 70, 229, 0.06);
  --trust-warning: #d97706;
  --trust-warning-surface: rgba(217, 119, 6, 0.08);
  --trust-danger: #dc2626;
  --trust-danger-surface: rgba(220, 38, 38, 0.06);
  --trust-bg: #f8fafc;
  --trust-surface: #f1f5f9;
  --trust-surface-elevated: #ffffff;
  --trust-border: #e2e8f0;
  --trust-border-strong: #cbd5e1;
  --trust-text: #0f172a;
  --trust-text-secondary: #64748b;
  --trust-text-tertiary: #94a3b8;
  --trust-radius-sm: 6px;
  --trust-radius-md: 10px;
  --trust-radius-lg: 14px;
  --trust-radius-xl: 20px;
  --trust-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --trust-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --trust-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);
}

:root {
  --color-bg: var(--trust-bg);
  --color-surface: var(--trust-surface);
  --color-text: var(--trust-text);
  --color-accent: var(--trust-cta);
  --color-accent2: var(--trust-verified);
  --color-accent3: var(--trust-intelligence);
  --radius-card: var(--trust-radius-lg);
  --radius-btn: var(--trust-radius-md);
  --shadow-card: var(--trust-shadow-md);
}

/* Step 2: Trust styling for index/home core UX */
.brand-header {
  background: var(--trust-primary);
  border-bottom: 3px solid var(--trust-cta);
  box-shadow: var(--trust-shadow-lg);
}

.main-title,
.header-catch,
.ai-badge {
  color: #ffffff;
}

.brand-nav-btn {
  background: var(--trust-primary-light);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.22);
}

.brand-nav-btn:hover,
.brand-nav-btn:focus {
  background: var(--trust-cta);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
}

.brand-card {
  background: var(--trust-surface-elevated);
  border-color: var(--trust-border);
  box-shadow: var(--trust-shadow-md);
}

.brand-btn {
  background: var(--trust-cta);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.26);
}

.brand-btn:hover {
  filter: none;
  background: var(--trust-cta-hover);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.34);
}

#status-wrapper {
  background: var(--trust-primary-surface);
  border-color: var(--trust-border);
}

#status {
  color: var(--trust-intelligence);
}

.error,
.validation-error,
.feedback.error,
.char-count.error {
  color: var(--trust-danger);
}

.user-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.user-badge:focus,
.user-badge:hover {
  background: rgba(255, 255, 255, 0.22);
}

.account-dropdown {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  box-shadow: var(--trust-shadow-lg);
}

.trust-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--trust-border, #e2e8f0);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  background: var(--trust-surface, #f1f5f9);
  color: var(--trust-text-secondary, #64748b);
  margin-bottom: 0.5rem;
  width: fit-content;
}

.trust-status-badge--large {
  font-size: 0.82rem;
  padding: 0.35rem 0.8rem;
}

.trust-status-badge-icon {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.trust-status-badge--state-unverified {
  background: var(--trust-surface, #f1f5f9);
  color: var(--trust-text-tertiary, #94a3b8);
  border-color: var(--trust-border, #e2e8f0);
}

.trust-status-badge--state-verifying {
  background: var(--trust-intelligence-surface, rgba(79, 70, 229, 0.06));
  color: var(--trust-intelligence, #4f46e5);
  border-color: color-mix(in srgb, var(--trust-intelligence, #4f46e5) 35%, white);
}

.trust-status-badge--state-verifying .trust-status-badge-icon {
  animation: trust-badge-pulse 1s ease-in-out infinite;
}

.trust-status-badge--state-verified {
  background: var(--trust-verified-surface, rgba(13, 148, 136, 0.08));
  color: var(--trust-verified, #0d9488);
  border-color: color-mix(in srgb, var(--trust-verified, #0d9488) 32%, white);
}

.trust-status-badge--state-issues-found {
  background: var(--trust-warning-surface, rgba(217, 119, 6, 0.08));
  color: var(--trust-warning, #d97706);
  border-color: color-mix(in srgb, var(--trust-warning, #d97706) 34%, white);
}

.trust-status-badge--state-failed {
  background: var(--trust-danger-surface, rgba(220, 38, 38, 0.06));
  color: var(--trust-danger, #dc2626);
  border-color: color-mix(in srgb, var(--trust-danger, #dc2626) 34%, white);
}

@keyframes trust-badge-pulse {
  0% { opacity: 0.65; }
  50% { opacity: 1; }
  100% { opacity: 0.65; }
}

body{
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  margin:0;
  padding:0 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* =========================================================
 * Page scope separation (Phase 1)
 * - 全ページの body.page-* をスコープルートとして利用
 * - 既存グローバル指定を段階的に page スコープへ移管
 * ========================================================= */
body[class*="page-"] {
  --page-shell-max-width: 900px;
  --page-shell-padding-x: 2.2rem;
}

body.page-catalog {
  --page-shell-max-width: min(1280px, 100%);
  --page-shell-padding-x: 1.25rem;
}

body.page-usage-dashboard {
  --page-shell-max-width: 1240px;
  --page-shell-padding-x: 1.25rem;
}

/* モーダルが開いている時のbodyスクロール制御 */
body.modal-open {
  overflow: hidden;
  /* スクロール制御を高速化するための最適化 */
  will-change: overflow;
  transform: translateZ(0); /* GPU加速 */
}

/* モーダル非表示時のスクロール復活を確実にする（高速化版） */
body:not(.modal-open) {
  overflow: auto;
  overflow-x: hidden;
  /* スクロール復活を高速化するための最適化 */
  will-change: auto;
  transform: none;
  /* 即座にスクロール可能にする */
  scroll-behavior: auto;
}

/* 統計データ作成・検索モーダルのスクロール制御 */
.stat-create-container,
.stat-search-container {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 #f8f9fa;
}

/* Webkit系ブラウザ用のスクロールバースタイル */
.stat-create-container::-webkit-scrollbar,
.stat-search-container::-webkit-scrollbar {
  width: 8px;
}

.stat-create-container::-webkit-scrollbar-track,
.stat-search-container::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
}

.stat-create-container::-webkit-scrollbar-thumb,
.stat-search-container::-webkit-scrollbar-thumb {
  background: #dee2e6;
  border-radius: 4px;
}

.stat-create-container::-webkit-scrollbar-thumb:hover,
.stat-search-container::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

/* モーダル内のフォーム要素のスクロール制御 */
.stat-data-form {
  overflow: visible;
}

.stat-data-form .form-row {
  overflow: visible;
}

/* モーダル表示時のスクロール制御 */
dialog[open] {
  overflow: hidden;
}

dialog[open] .stat-create-container,
dialog[open] .stat-search-container {
  overflow-y: auto;
}
.container{
  width: min(100%, var(--page-shell-max-width, 900px));
  max-width: var(--page-shell-max-width, 900px);
  margin:1.5rem auto;
  padding:1.2rem var(--page-shell-padding-x, 2.2rem);
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}

/* ========== Buttons ========== */
.btn-primary {
  padding: .45rem .9rem;
  font-size: .9rem;
  border: none;
  border-radius: 4px;
  background: #2b6cb0;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background: #1e4a8a;
}

.btn-warn {
  padding: .45rem .9rem;
  font-size: .9rem;
  border: none;
  border-radius: 4px;
  background: #ff9800;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-warn:hover {
  background: #e68900;
}

.btn-disabled {
  background: #9e9e9e;
  cursor: default;
  opacity: .55;
}

/* ========== Header ========== */
.brand-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 1.1rem 2.2rem 1.1rem 2.2rem;
  background: var(--color-surface);
  border-bottom: 4px solid var(--color-accent);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 4px 24px var(--trust-cta)22;
  min-height: unset;
}
.header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.header-center {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
}
.header-center nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 180px;
}
.main-title {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  font-family: 'Inter','Noto Sans JP',sans-serif;
}
.ai-badge {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.98em;
  color: var(--color-accent3);
  margin-left: 1.2em;
}
.header-catch {
  margin-left: 1.2em;
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0.85;
}
@media (max-width: 900px) {
  .brand-header {
    flex-direction: column;
    align-items: stretch;
    padding: 1.1rem 1.2rem;
    gap: 0.7rem;
  }
  .header-left, .header-center, .header-right {
    justify-content: center;
    margin: 0 auto;
  }
  .header-center {
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
  }
  .header-center nav {
    flex-direction: column;
    gap: 0.5em;
  }
  .header-right {
    min-width: unset;
    margin-top: 0.5em;
  }
}

/* ========== Form layouts ========== */
.form-inline{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.form-inline label{min-width:6rem;font-weight:600;margin-top:.35rem}
.form-inline input,.form-inline textarea{flex:1;padding:.5rem;font-size:1rem;font-family:inherit}

.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.radio-group{display:flex;flex-wrap:wrap;gap:1rem}
.radio-group label{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;min-width:7.5rem}
.radio-group input{margin:0}

#articleForm .btn-primary{margin-top:1.2rem}

/* ========== Dialog ========== */
dialog {
  border: none;
  border-radius: 24px;
  padding: 0;
  max-width: 420px;
  width: 90%;
  position: relative;
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 
    0 24px 56px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

/* リライトモーダル専用スタイル */
#rewriteModal {
  max-width: 600px;
  max-height: 90vh;
  overflow: visible;
  position: relative;
  background: #ffffff;
  backdrop-filter: none;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

#rewriteModal form {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(90vh - 96px); /* パディング分を引く */
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#rewriteModal::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  background: linear-gradient(45deg, var(--trust-cta), var(--trust-verified-light), var(--trust-intelligence), var(--trust-cta));
  border-radius: 32px;
  z-index: -1;
  opacity: 0.3;
  animation: borderGlow 3s ease-in-out infinite;
  pointer-events: none;
  /* スクロール時に背景が切れないように、より大きなサイズで設定 */
  min-height: calc(100% + 16px);
  min-width: calc(100% + 16px);
}

dialog::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--trust-cta), var(--trust-verified-light), var(--trust-intelligence), var(--trust-cta));
  border-radius: 26px;
  z-index: -1;
  opacity: 0.14;
  animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: none;
}

.close-modal {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: #f8fafc;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #6B7280;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.close-modal:hover {
  background: #e2e8f0;
  color: var(--trust-cta);
  transform: scale(1.1);
}

/* モーダル内フォームスタイル */
dialog form {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

dialog h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-verified-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

dialog p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

dialog p strong {
  color: var(--trust-cta);
  font-weight: 600;
}

/* テキスト系のみ — checkbox/radio はネイティブ表示のまま（width:100% 等で行が潰れるのを防ぐ） */
dialog input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #E5E7EB;
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

dialog input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  border-color: var(--trust-cta);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

dialog input:not([type="checkbox"]):not([type="radio"]):hover {
  border-color: #D1D5DB;
  transform: translateY(-1px);
}

dialog input:not([type="checkbox"]):not([type="radio"])::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.dialog-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 100px;
}

.dialog-actions .btn-warn {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 2px solid rgba(239, 68, 68, 0.2);
}

.dialog-actions .btn-warn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

.dialog-actions .btn-primary {
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-cta-hover));
  color: white;
  border: none;
}

.dialog-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.3);
}

dialog .btn-primary {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-cta-hover));
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}

dialog .btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

dialog .btn-primary:hover::before {
  left: 100%;
}

dialog .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
}

dialog .btn-primary:active {
  transform: translateY(0);
}

dialog .error {
  color: var(--color-accent);
  font-size: 0.85rem;
  text-align: center;
  font-weight: 600;
  margin-top: 8px;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  dialog {
    width: 95%;
    max-width: none;
    margin: 20px;
  }
  
  dialog form {
    padding: 32px 24px;
    gap: 20px;
  }
  
  dialog h2 {
    font-size: 24px;
  }
  
  dialog input:not([type="checkbox"]):not([type="radio"]) {
    padding: 14px 16px;
    font-size: 16px;
  }
  
  dialog .btn-primary {
    padding: 14px 20px;
    font-size: 16px;
  }
  
  /* リライトモーダルのレスポンシブ対応 */
  #rewriteModal {
    width: 95%;
    max-width: none;
    max-height: 95vh;
    margin: 10px;
  }
  
  #rewriteModal form {
    padding: 24px 20px;
    gap: 16px;
    max-height: calc(95vh - 48px);
  }
  
  #rewriteModal textarea {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 100px;
  }
  
  #rewriteModal fieldset {
    padding: 12px 16px;
  }
  
  #rewriteModal fieldset label {
    margin-right: 12px;
    font-size: 14px;
  }
  
  #rewriteModal .form-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  #rewriteModal .form-actions .btn-primary {
    width: 100%;
    min-width: auto;
  }
  
  /* モバイルでの文字数カウンターとエラーメッセージの統一 */
  .feedback, .char-count {
    font-size: 0.85rem;
    margin-top: 0.08em;
    margin-bottom: 0.8rem;
  }
  
  .feedback.error, .char-count.error {
    text-align: center;
  }
  
  dialog .error {
    font-size: 0.8rem;
    margin-top: 6px;
  }
  
  /* 部分リライトモーダルのレスポンシブ対応 */
  #sectionRewriteModal {
    width: 95%;
    max-width: none;
    max-height: 95vh;
    margin: 10px;
  }
  
  #sectionRewriteModal form {
    padding: 24px 20px;
    gap: 16px;
    max-height: calc(95vh - 48px);
  }
  
  #sectionRewriteModal textarea {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 100px;
  }
  
  #sectionRewriteModal .section-checkboxes {
    max-height: 200px;
    overflow-y: auto;
  }
  
  #sectionRewriteModal .section-checkbox-item {
    padding: 8px 12px;
    margin: 4px 0;
  }
}

/* ========== Output sections ========== */
/* ホームページの記事生成結果セクション - 新しいBIデザイン */
.section-wrapper {
  background: rgba(249, 246, 242, 0.8);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  padding: 1.2rem;
  margin-top: 1.2rem;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.section-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
  transition: left 0.6s ease-in-out;
}

.section-wrapper:hover::before {
  left: 100%;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quality-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 20px;
  font-size: 0.9rem;
  color: #495057;
}

.quality-label {
  font-weight: 500;
  color: #6c757d;
}

.quality-value {
  font-weight: 600;
  color: #28a745;
  font-size: 1.1em;
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 15px;
}

.section-heading h2 {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-accent3);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.section-heading .btn-primary {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  border: none;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-heading .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.output-box {
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(230, 225, 217, 0.5);
  border-radius: 12px;
  padding: 1rem;
  min-height: 120px;
  font-family: 'Inter', 'Noto Sans JP', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.output-box:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 履歴ページ専用セクションスタイル */
.hist-detail-wrapper .section-wrapper {
  background: rgba(249, 246, 242, 0.8);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  padding: 1.2rem;
  margin-top: 1.2rem;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible; /* オーバーフローを許可して、詳細パネル全体で制御 */
  /* 高さ制限を削除 - 詳細パネル全体でスクロール制御 */
  /* 親要素からオーバーフローしないように制限 */
  box-sizing: border-box;
  max-width: 100%;
}

.hist-detail-wrapper .section-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
  transition: left 0.6s ease-in-out;
}

.hist-detail-wrapper .section-wrapper:hover::before {
  left: 100%;
}

.hist-detail-wrapper .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  /* narrow表示時のレイアウト調整 */
  gap: 0.75rem;
  flex-wrap: wrap;
  min-height: auto;
  /* 上下方向のレイアウト安定化 */
  box-sizing: border-box;
  position: relative;
}

.hist-detail-wrapper .section-heading h3 {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-accent3);
  margin: 0;
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  /* 上下方向のレイアウト安定化 */
  line-height: 1.3;
  min-height: 1.5rem;
  box-sizing: border-box;
}

.hist-detail-wrapper .section-heading h3::after {
  content: attr(data-char-count);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--color-text);
  opacity: 0.7;
  background: rgba(37, 99, 235, 0.1);
  padding: 0.2em 0.6em;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  white-space: nowrap;
}

.hist-detail-wrapper .section-heading .btn-primary {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  border: none;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* 上下方向のレイアウト安定化 */
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.hist-detail-wrapper .section-heading .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.hist-detail-wrapper .output-box {
  white-space: normal;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(230, 225, 217, 0.3);
  border-radius: 20px;
  padding: 2.5rem;
  min-height: 200px;
  /* 高さ制限を削除 - 詳細パネル全体でスクロール制御 */
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #2d3748;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: visible; /* スクロール制御を親に委ねる */
  /* 親要素からオーバーフローしないように制限 */
  box-sizing: border-box;
  max-width: 100%;
}

/* 履歴詳細パネルのoutput-boxのスクロールバースタイル - 削除（詳細パネル全体で制御） */

.hist-detail-wrapper .output-box:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 世界最高水準の記事表示スタイル */
.article-heading {
  font-weight: 700;
  line-height: 1.3;
  margin: 2.5rem 0 1.5rem 0;
  color: #1a202c;
  position: relative;
}

.article-heading.h1 {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 0;
  margin-bottom: 2rem;
  text-align: center;
  letter-spacing: -0.02em;
}

.article-heading.h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2d3748;
  border-left: 4px solid #667eea;
  padding-left: 1rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.article-heading.h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #4a5568;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  position: relative;
}

.article-heading.h3::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #667eea;
  border-radius: 50%;
}

.article-paragraph {
  margin: 1.5rem 0;
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
  color: #4a5568;
  font-size: 1.05rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.article-paragraph:first-of-type {
  margin-top: 0;
  font-size: 1.1rem;
  line-height: 1.9;
  color: #2d3748;
  font-weight: 500;
}

.article-strong {
  font-weight: 700;
  color: #2d3748;
  background: linear-gradient(120deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
  padding: 0.1em 0.3em;
  border-radius: 4px;
}

.article-em {
  font-style: italic;
  color: #4a5568;
  font-weight: 500;
}

.article-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.article-link:hover {
  color: #5a67d8;
  border-bottom-color: #5a67d8;
  background: rgba(102, 126, 234, 0.05);
  padding: 0.1em 0.2em;
  border-radius: 4px;
}

/* Phase1.5.1: 履歴詳細での Markdown テーブル表示（比較記事の表） */
.article-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
  color: #4a5568;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.article-table-th,
.article-table-td {
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.article-table-th {
  background: #f7fafc;
  font-weight: 600;
  color: #2d3748;
}
.article-table-td {
  background: #fff;
}

.article-image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin: 2rem auto;
  display: block;
  transition: transform 0.3s ease;
}

.article-image:hover {
  transform: scale(1.02);
}

.article-chart {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(230, 225, 217, 0.2);
}

/* リストのスタイリング */
.article-paragraph ul {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.article-paragraph li {
  margin: 0.75rem 0;
  line-height: 1.7;
  color: #4a5568;
  position: relative;
  padding-left: 0.5rem;
}

.article-paragraph li::before {
  content: '•';
  color: #667eea;
  font-weight: bold;
  position: absolute;
  left: -1rem;
  font-size: 1.2em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .hist-detail-wrapper .output-box {
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
  }
  
  .article-heading.h1 {
    font-size: 2rem;
    text-align: left;
  }
  
  .article-heading.h2 {
    font-size: 1.5rem;
  }
  
  .article-heading.h3 {
    font-size: 1.1rem;
  }
  
  .article-paragraph {
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .article-paragraph:first-of-type {
    font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  .hist-detail-wrapper .output-box {
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  .article-heading.h1 {
    font-size: 1.75rem;
  }
  
  .article-heading.h2 {
    font-size: 1.25rem;
  }
  
  .article-heading.h3 {
    font-size: 1rem;
  }
}

/* 履歴ページタイトルとメタ情報 */
#historyContainer h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

#historyContainer h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(37, 99, 235, 0.3);
}

/* 履歴タイトルセクションのスタイル */
.history-title-section h1 {
  font-size: 1.8rem; /* 1.4rem → 1.8remに拡大 */
  font-weight: 700; /* 600 → 700に強化 */
  color: var(--color-accent);
  margin-bottom: 0.5rem; /* 1rem → 0.5remに縮小 */
  line-height: 1.2;
}

/* 履歴タイトルセクションの説明文スタイル - 最高優先度で強制適用 */
/* 基本セレクター */
.history-header .history-title-section p,
#historyContainer .history-title-section p,
.container#historyContainer .history-header .history-title-section p,
.container#historyContainer .history-title-section p,
/* より具体的なセレクターで確実に適用 */
body .container#historyContainer .history-header .history-title-section p,
body.page-history .container#historyContainer .history-header .history-title-section p,
/* インラインスタイルを上書きするための最高優先度 */
.history-header .history-title-section p[style*="text-align"],
#historyContainer .history-title-section p[style*="text-align"],
.container#historyContainer .history-title-section p[style*="text-align"],
/* 最終手段：最も具体的なセレクター */
body.page-history .container#historyContainer .history-header .history-title-section p,
body.page-history .container#historyContainer .history-title-section p,
/* 属性セレクターで完全制御 */
p[class*="history-title-section"],
p[class*="history-title-section"][style*="text-align"] {
  margin-bottom: 0.8rem; /* 1.2em → 0.8remに縮小、!importantで強制 */
  color: #666; /* #444 → #666に変更、!importantで強制 */
  font-size: 1rem; /* 1.08em → 1remに調整、!importantで強制 */
  text-align: center; /* left → centerに変更、!importantで強制 */
  line-height: 1.5; /*で強制 */
  max-width: 600px; /* 最大幅を制限、!importantで強制 */
  display: block; /* ブロック要素として強制 */
  width: 100%; /* 幅を100%に強制 */
  /* インラインスタイルを完全に無効化 */
  text-align: center;
  text-align-last: center;
  text-justify: center;
  /* CSSカスタムプロパティで強制適用 */
  --force-text-align: center;
  /* 疑似要素でも中央揃えを強制 */
  &::before,
  &::after {
    text-align: center;
  }
  /* アニメーションとトランジションで強制適用 */
  animation: forceCenterAlign 0.1s ease-in-out infinite;
  transition: text-align 0s;
}

/* 中央揃えを強制するアニメーション */
@keyframes forceCenterAlign {
  0%, 100% {
    text-align: center;
    text-align-last: center;
    text-justify: center;
  }
}

/* 履歴ヘッダーのスタイル */
.history-header,
/* より具体的なセレクターで確実に適用 */
body .history-header,
body.page-history .history-header,
.container .history-header,
#historyContainer .history-header,
.container#historyContainer .history-header {
  display: flex; /*で強制 */
  justify-content: center; /* space-between → centerに変更、!importantで強制 */
  align-items: center; /* flex-start → centerに変更、!importantで強制 */
  margin-bottom: 1rem; /* 20px → 1remに縮小、!importantで強制 */
  padding: 1rem 0; /* 上下のパディングを追加、!importantで強制 */
  text-align: center; /* 中央揃えを追加、!importantで強制 */
  width: 100%; /* 幅を100%に強制 */
  flex-direction: column; /* 縦並びを強制 */
  /* 中央揃えを確実にするための追加プロパティ */
  text-align-last: center;
  text-justify: center;
}

.history-title-section,
/* より具体的なセレクターで確実に適用 */
body .history-title-section,
body.page-history .history-title-section,
.container .history-title-section,
#historyContainer .history-title-section,
.container#historyContainer .history-title-section,
.history-header .history-title-section {
  flex: 1; /*で強制 */
  min-width: 0; /* フレックスアイテムの最小幅を制限、!importantで強制 */
  max-width: 800px; /* 最大幅を制限して中央配置を最適化、!importantで強制 */
  width: 100%; /* 幅を100%に強制 */
  text-align: center; /* 中央揃えを強制 */
  /* 中央揃えを確実にするための追加プロパティ */
  text-align-last: center;
  text-justify: center;
}

.history-nav-links {
  display: flex;
  gap: 1rem; /* 15px → 1remに調整 */
  flex-shrink: 0;
  align-items: center;
}

.history-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px → 0.5remに調整 */
  color: var(--color-accent);
  text-decoration: none;
  padding: 0.75rem 1.25rem; /* 10px 16px → 0.75rem 1.25remに調整 */
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem; /* フォントサイズを調整 */
  transition: all 0.2s;
  background: white;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.history-nav-link:hover {
  background: var(--color-accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.history-nav-link svg {
  width: 16px; /* 18px → 16pxに調整 */
  height: 16px; /* 18px → 16pxに調整 */
  flex-shrink: 0; /* SVGの縮小を防ぐ */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .history-header {
    flex-direction: column; /*で強制 */
    align-items: center; /* stretch → centerに変更、!importantで強制 */
    gap: 1rem; /* 縦並び時の間隔を調整、!importantで強制 */
  }
  
  .history-title-section {
    max-width: 100%; /* モバイルでは最大幅を解除、!importantで強制 */
  }
  
  .history-title-section h1 {
    font-size: 1.6rem; /* モバイルでは少し小さく、!importantで強制 */
    text-align: center; /* モバイルでは中央揃え、!importantで強制 */
  }
  
  .history-title-section p {
    text-align: center; /* モバイルでは中央揃え、!importantで強制 */
    max-width: 100%; /* モバイルでは最大幅を解除、!importantで強制 */
  }
}

/* メタ情報の改善 */
#histMeta {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(13, 148, 136, 0.05));
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
  /* フローティングアクションとの重複を防ぐ - 条件付きで制御 */
  margin-right: 0; /* デフォルトでは右マージンなし */
  /* 親要素からオーバーフローしないように制限 */
  max-width: 100%;
  box-sizing: border-box;
}

#histMeta.hist-query-meta {
  padding: 1.25rem 1.35rem;
}

#histMeta h2 {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

#histMeta.hist-query-meta h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

/* 履歴詳細: クエリ情報ブロック（グリッド＋テキスト欄） */
.hist-query-meta__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.hist-query-meta__head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.hist-query-meta__badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.hist-query-meta__time {
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.85;
  white-space: nowrap;
}

.hist-query-meta__record-id {
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.9;
  white-space: nowrap;
}

.hist-query-meta__record-id-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  font-weight: 600;
}

.hist-query-meta__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
  margin-bottom: 1rem;
}

@media (min-width: 720px) {
  .history-layout.detail-open.wide-mode .hist-query-meta__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hist-query-meta__cell {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(37, 99, 235, 0.12);
  box-sizing: border-box;
}

.hist-query-meta__cell-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  opacity: 0.9;
  margin-bottom: 0.2rem;
}

.hist-query-meta__cell-value {
  display: block;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--color-text);
  word-break: break-word;
}

/* リライト詳細: クエリ情報の「元記事」— 記事ID表示 + オリジナル本文の表示トグル */
.hist-query-meta__src-article-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.hist-query-meta__src-article-id {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--color-text);
  word-break: break-word;
  min-width: 0;
}

.hist-query-meta__original-toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: background 0.18s ease;
}

.hist-query-meta__original-toggle-switch:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.2);
}

.hist-query-meta__original-toggle-switch--on {
  background: rgba(37, 99, 235, 0.55);
}

.hist-query-meta__original-toggle-switch--on:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.7);
}

.hist-query-meta__original-toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  right: auto;
  width: calc(1.35rem - 4px);
  height: calc(1.35rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: left 0.18s ease, right 0.18s ease;
}

.hist-query-meta__original-toggle-switch--on .hist-query-meta__original-toggle-switch-thumb {
  left: auto;
  right: 2px;
}

.hist-query-meta__original-toggle-switch:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hist-original-section--collapsed {
  display: none !important;
}

.hist-query-meta__textual {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hist-query-meta__field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.hist-query-meta__field-body {
  margin: 0;
  padding: 0.55rem 0.65rem;
  font-size: 0.88rem;
  line-height: 1.55;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(230, 225, 217, 0.45);
  white-space: pre-wrap;
  word-break: break-word;
}

.hist-query-meta__empty {
  color: rgba(0, 0, 0, 0.35);
}

.hist-query-meta__comparison {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(37, 99, 235, 0.15);
}

.hist-query-meta__comparison-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.6rem 0;
  color: var(--color-accent);
}

.hist-query-meta__comparison-line {
  margin: 0.35rem 0;
  font-size: 0.88rem;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
}

.hist-query-meta__comparison-k {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-accent);
  font-size: 0.78rem;
}

.hist-query-meta__comparison-v {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.hist-query-meta__comparison-actions {
  margin-top: 0.75rem;
}

/* ローディング状態の改善 */
.hist-table-wrapper tr td[colspan] {
  text-align: center;
  padding: 2rem;
  color: var(--color-text);
  font-style: italic;
  background: rgba(249, 246, 242, 0.5);
  border-radius: 8px;
  margin: 1rem 0;
}

/* 履歴ページ専用ローディング状態 */
.loading-state {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(249, 246, 242, 0.8);
  border-radius: 12px;
  margin: 1rem 0;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: fadeInLoading 0.2s ease-out;
}

.loading-content p {
  color: var(--color-accent);
  font-weight: 500;
  margin: 0;
  font-size: 0.95rem;
  animation: pulseText 2s ease-in-out infinite;
}

.detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: rgba(249, 246, 242, 0.8);
  border-radius: 16px;
  border: 2px dashed rgba(37, 99, 235, 0.3);
  animation: fadeInLoading 0.2s ease-out;
}

@keyframes fadeInLoading {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.detail-loading p {
  color: var(--color-accent);
  font-weight: 500;
  margin: 1rem 0 0 0;
  font-size: 1rem;
  animation: pulseText 2s ease-in-out infinite;
}

@keyframes pulseText {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* エラー状態のスタイル */
.error-state {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(239, 68, 68, 0.05);
  border-radius: 12px;
  margin: 1rem 0;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.error-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.error-content p {
  color: #EF4444;
  font-weight: 500;
  margin: 0;
  font-size: 0.95rem;
}

.retry-btn {
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.retry-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* --- 文字数表示 --- */
.char-count, .feedback {
  font-size: 0.92em;
  color: #888;
  margin-left: 0.1em;
  margin-top: 0.1em;
  margin-bottom: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  text-align: right;
}
.char-count.error, .feedback.error {
  color: var(--color-accent);
  font-weight: 600;
  text-align: center;
}

/* ========== Toast ========== */
#toast{
  position:fixed;
  top:25%;
  left:50%;
  transform:translateX(-50%);
  display:none;
  min-width: 240px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px) saturate(1.4);
  border-radius: 18px;
  border: 1.5px solid var(--color-accent);
  box-shadow: 0 0 24px var(--color-accent)55, 0 2px 12px var(--trust-intelligence)33;
  color: var(--color-text);
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:0.01em;
  z-index:999999;
  padding:1.1rem 2.2rem;
  text-align:center;
  animation: toast-float-in 0.38s cubic-bezier(.7,1.6,.5,1) 1;
  user-select: none;
}

/* #toast のバリアント（カタログ等: JS はクラス指定のみ・インライン background を付けない） */
#toast.toast-success {
  background: var(--trust-verified-surface);
  color: var(--trust-verified);
  border-color: color-mix(in srgb, var(--trust-verified) 36%, white);
  box-shadow: var(--trust-shadow-md);
}
#toast.toast-error {
  background: var(--trust-danger-surface);
  color: var(--trust-danger);
  border-color: color-mix(in srgb, var(--trust-danger) 34%, white);
  box-shadow: var(--trust-shadow-md);
}
#toast.toast-success a.catalog-toast-link,
#toast.toast-error a.catalog-toast-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* モーダル内toast要素 */
.modal-toast{
  position:fixed;
  top:25%;
  left:50%;
  transform:translateX(-50%);
  display:none;
  min-width: 240px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px) saturate(1.4);
  border-radius: 18px;
  border: 1.5px solid var(--color-accent);
  box-shadow: 0 0 24px var(--color-accent)55, 0 2px 12px var(--trust-intelligence)33;
  color: var(--color-text);
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:0.01em;
  z-index:999999;
  padding:1.1rem 2.2rem;
  text-align:center;
  animation: toast-float-in 0.38s cubic-bezier(.7,1.6,.5,1) 1;
  user-select: none;
}
@keyframes toast-float-in {
  0% { opacity:0; transform:translateX(-50%) translateY(30px) scale(0.98); }
  80%{ opacity:1; transform:translateX(-50%) translateY(-6px) scale(1.04); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

/* ========== Verification Toast（閉じ可能） ========== */
.verification-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  min-width: 200px;
  max-width: 320px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px) saturate(1.4);
  border-radius: 12px;
  border: 1.5px solid var(--color-accent);
  box-shadow: 0 0 20px var(--color-accent)44;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 600;
  z-index: 999998;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.verification-toast-message {
  flex: 1;
}
.verification-toast-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.verification-toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.verification-toast-close:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ========== Generic Spinner ========== */
.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid rgba(37, 99, 235, 0.2);
  border-top: 4px solid var(--color-accent);
  border-right: 4px solid var(--color-accent2);
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.6, 0.2, 0.4, 1) infinite;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.3);
  margin: 8px auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === ログイン中オーバーレイ（authSpinner） === */
.spinner-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  backdrop-filter: blur(6px) saturate(1.2);
  z-index:999999;
  pointer-events:none;
}
html .spinner-overlay[hidden] {
  display: none;
}

/* ========== Status wrapper (生成時) ========== */
#status-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 40px;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(249, 246, 242, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.1);
}

#status {
  font-size: 0.95rem;
  color: var(--color-accent);
  margin-top: 8px;
  font-weight: 500;
  text-align: center;
}

/* ========== Table styles (usage/history) ========== */
.data-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}
.data-table th,.data-table td{border:1px solid #ccc;padding:.4rem .5rem;text-align:center}
.data-table th{background:#e9f0f9;font-weight:600}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:1rem;
  font-size:.9rem;
}
table th,table td{border:1px solid #ccc;padding:.4rem .6rem}
table th{background:#f0f0f0;text-align:left}

/* ========== 履歴ページ - OOUI/OOUX対応 ========== */
.history-type-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.history-type-toggle button {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(249, 246, 242, 0.8);
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.history-type-toggle button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  transition: left 0.5s;
}

.history-type-toggle button:hover::before {
  left: 100%;
}

.history-type-toggle button:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.history-type-toggle button.active {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  color: white;
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transform: translateY(-2px);
}

/* Phase2.4: 統合履歴「比較記事のみ」フィルタ（統合タブ時のみ表示） */
.history-unified-filter {
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.history-unified-filter .history-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95em;
  cursor: pointer;
}
.history-unified-filter .history-filter-label input[type="checkbox"] {
  margin: 0;
}
.history-unified-filter .input-desc {
  display: block;
  margin-top: 0.25rem;
  margin-left: 0;
  font-size: 0.85em;
  color: var(--color-text-muted, #6c757d);
}

/* 履歴レイアウト - Flex に統一（master/detail は1行・1〜2子のため。HISTORY_MASTER_DETAIL 4.3） */
.history-layout {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  margin-top: 1rem;
  width: 100%;
  transition: all 0.3s ease;
  min-height: calc(100vh - 220px);
  max-height: calc(100vh - 120px);
  position: relative;
  z-index: 70; /* 履歴コンテナより下位のレイヤー */
}

/* テーブルラッパー - デフォルトで全幅 */
.hist-table-wrapper {
  flex: 1 1 0;
  min-width: 450px;
  max-width: 100%;
  transition: all 0.3s ease;
  overflow-y: auto;
  max-height: calc(100vh - 140px); /* 重要度を上げて上書きを防ぐ */
  position: relative;
  z-index: 90; /* 詳細パネルより下位のレイヤー */
}

/* 履歴テーブル専用スタイル - 汎用テーブルスタイルを上書き */
#historyTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  font-size: 0.9rem;
}

#historyTable th,
#historyTable td {
  border: 1px solid #ccc;
  padding: 0.4rem 0.6rem;
  text-align: center; /* 中央揃えを強制 */
}

#historyTable th {
  background: #f0f0f0;
  text-align: center; /* 左揃えを上書きして中央揃えに */
  font-weight: 600;
  color: #333;
}

/* #histJaSection のセクションヘッダーを横並び・上下中央揃えに - 優先度最適化 */
.hist-detail-wrapper #histJaSection > div.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  box-sizing: border-box;
}

.hist-detail-wrapper #histJaSection > div.section-heading h3,
.hist-detail-wrapper #histJaSection > div.section-heading h4 {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-accent3);
  line-height: 1.3;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* より汎用的なセレクタも追加 - 現在のHTML構造に対応 */
.hist-detail-wrapper .section-wrapper .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  box-sizing: border-box;
}

.hist-detail-wrapper .section-wrapper .section-heading h3,
.hist-detail-wrapper .section-wrapper .section-heading h4 {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-accent3);
  line-height: 1.3;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* 言語テキストと文字数の水平表示 */
.hist-detail-wrapper #histJaSection > div.section-heading h3 .lang-text,
.hist-detail-wrapper #histJaSection > div.section-heading h4 .lang-text {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-accent3);
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.hist-detail-wrapper #histJaSection > div.section-heading h3 .char-count,
.hist-detail-wrapper #histJaSection > div.section-heading h4 .char-count {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.1;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}

/* より汎用的なセレクタでも言語テキストと文字数を水平表示 */
.hist-detail-wrapper .section-wrapper .section-heading h3 .lang-text,
.hist-detail-wrapper .section-wrapper .section-heading h4 .lang-text {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-accent3);
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.hist-detail-wrapper .section-wrapper .section-heading h3 .char-count,
.hist-detail-wrapper .section-wrapper .section-heading h4 .char-count {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.1;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}

.hist-detail-wrapper #histJaSection > div.section-heading .btn-primary,
.hist-detail-wrapper #histJaSection > div.section-heading .btn-secondary {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  border: none;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.hist-detail-wrapper #histJaSection > div.section-heading .btn-secondary {
  background: linear-gradient(135deg, #6c757d, #495057);
}

.hist-detail-wrapper #histJaSection > div.section-heading .btn-primary:hover,
.hist-detail-wrapper #histJaSection > div.section-heading .btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* 詳細パネル - デフォルト非表示 */
.hist-detail-wrapper {
  flex: 0 0 40%;
  min-width: 350px;
  max-width: 500px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  margin-left: 0;
  transition: all 0.3s ease;
  display: none;
  overflow-y: auto; /* 詳細パネル全体でスクロール制御 */
  overflow-x: hidden; /* 横スクロールは無効化 */
  max-height: calc(100vh - 140px); /* 重要度を上げて上書きを防ぐ */
  position: relative;
  padding: 0;
  z-index: 100; /* レイヤー構造を整えるためz-indexを設定 */
  /* 子要素のオーバーフローを防ぐための設定 */
  box-sizing: border-box;
  /* 詳細パネル内の要素がはみ出さないようにする */
  word-wrap: break-word;
  word-break: break-word;
}

/* フローティングボタン関連のスタイルは削除されました */

/* 新しい基本状態のCSS - 第一段階 */
/* 基本レイアウト状態 */
.history-layout {
  display: flex;
  gap: 20px;
  transition: all 0.3s ease;
}

/* 詳細パネルが開いている状態（narrowモード） */
.history-layout.detail-open {
  --detail-width: max(30%, 400px); /* 最小幅400pxを保証 */
  --table-width: calc(100% - var(--detail-width));
  /* レイアウトの安定性を向上 */
  --min-detail-width: 400px;
  --max-detail-width: none;
}

/* 詳細パネルが開いている状態（wideモード） */
.history-layout.detail-open.wide-mode {
  --detail-width: 100%;
  --table-width: 0%;
}

/* テーブル非表示状態（wideモードと同じ） */
.history-layout.table-hidden {
  --detail-width: 100%;
  --table-width: 0%;
}

/* 具体的な要素のスタイル - CSS変数ベースのレイアウト制御 */
.hist-table-wrapper {
  flex: 0 0 var(--table-width, 100%); /* デフォルトは全幅 */
  min-width: 0;
  max-width: var(--table-width, 100%); /* 最大幅を制限 */
  transition: all 0.3s ease;
  overflow: hidden;
}

.hist-detail-wrapper {
  flex: 1 1 var(--detail-width, 0%); /* デフォルトは非表示 */
  min-width: 400px; /* 最小幅を保証 */
  max-width: none; /* 最大幅の制限を解除 */
  width: auto; /* 幅を自動調整 */
  transition: all 0.3s ease;
  overflow: hidden;
  display: none; /* デフォルトでは非表示 */
}

/* 詳細パネルが開いている状態での表示制御 */
.history-layout.detail-open .hist-detail-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--detail-width, max(30%, 400px));
  min-width: max(30%, 400px);
  max-width: none;
  width: auto;
  min-height: 0;
  align-self: stretch;
  /* レイアウトの安定性を向上 */
  box-sizing: border-box;
  position: relative;
  /* 幅の強制適用 */
  flex-basis: var(--detail-width, max(30%, 400px));
  flex-shrink: 0; /* 縮小を防ぐ */
  /* 内容がはみ出さないようにスクロール制御 */
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  /* 詳細パネル内の要素がはみ出さないようにする */
  word-wrap: break-word;
  word-break: break-word;
}

/* HISTORY_MASTER_DETAIL_PSEUDO_NAV_UI_PLAN Phase 1: shell / header固定 / bodyスクロール */
.hist-detail-wrapper .hist-detail-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.hist-detail-wrapper .hist-detail-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hist-detail-wrapper .hist-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 1rem 1rem;
}
.hist-detail-wrapper .hist-detail-header .detail-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hist-detail-wrapper .hist-detail-header .hist-detail-back-btn,
.hist-detail-wrapper .hist-detail-header .hist-detail-header-action-btn {
  white-space: nowrap;
}

/* narrow表示時の詳細パネル内レイアウト最適化 */
.history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper {
  /* narrow表示時の特別な調整 */
  padding: 0;
}

.history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading {
  /* narrow表示時のセクションヘッダー調整 - 基本ルールに統合 */
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0 0.75rem 0;
  /* 上下方向のレイアウト安定化 */
  min-height: auto;
  box-sizing: border-box;
}

.history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading h3 {
  /* narrow表示時の見出し調整 - 基本ルールに統合 */
  font-size: 1.2em;
  margin: 0 0 0.5rem 0;
  padding: 0.5rem 0;
  width: 100%;
  /* 上下方向のレイアウト安定化 */
  line-height: 1.4;
  min-height: 2rem;
  box-sizing: border-box;
}

.history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading .btn-primary {
  /* narrow表示時のボタン調整 - 基本ルールに統合 */
  align-self: flex-end;
  min-width: 80px;
  text-align: center;
  /* 上下方向のレイアウト安定化 */
  min-height: 2rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
}

/* レスポンシブ対応 - 基本ルールを拡張 */
@media (max-width: 1199px) {
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading {
    gap: 0.6rem;
    padding: 0.6rem 0;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading h3 {
    font-size: 1.1em;
    min-height: 1.75rem;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading .btn-primary {
    min-height: 1.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 991px) {
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading {
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading h3 {
    font-size: 1em;
    min-height: 1.5rem;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading .btn-primary {
    min-height: 1.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading {
    gap: 0.4rem;
    padding: 0.4rem 0;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading h3 {
    font-size: 0.95em;
    min-height: 1.5rem;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading .btn-primary {
    min-height: 1.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }
}

.history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .output-box {
  /* narrow表示時の出力ボックス調整 */
  padding: 1.5rem;
  min-height: 150px;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* wideモード時: テーブルを完全にレイアウトから除去（grid/flex両対応） */
.history-layout.detail-open.wide-mode .hist-table-wrapper {
  display: none !important;
}

/* wideモード時: 詳細パネルが全幅・全高を占有 */
.history-layout.detail-open.wide-mode .hist-detail-wrapper {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.history-layout.detail-open.wide-mode .hist-detail-wrapper .hist-detail-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* wideモード時: テーブル非表示で詳細が1子として全幅占有（Flex のため grid 上書き不要） */

/* 詳細パネルが表示されている時のレイアウト（既存の複雑なクラスを置換予定） */
/* .history-layout.detail-open .hist-table-wrapper {
  flex: 0 0 60%;
  transition: all 0.3s ease;
}

.history-layout.detail-open .hist-detail-wrapper {
  display: block;
  transition: all 0.3s ease;
} */

/* テーブル非表示時: テーブルを完全にレイアウトから除去（grid/flex両対応） */
.history-layout.table-hidden .hist-table-wrapper {
  display: none !important;
}

.history-layout.table-hidden .hist-detail-wrapper {
  margin-left: 0;
}

/* モバイルではテーブル非表示機能を無効化 */
@media (max-width: 1199px) {
  .hist-detail-wrapper .toggle-table-btn {
    display: none;
  }
  
  /* 制御ボタン関連のスタイルは削除されました */
  
  /* モバイルでは高さ制限を調整 */
  .history-layout {
    max-height: calc(100vh - 140px); /* 統一された高さ */
  }
  
  .hist-detail-wrapper {
    max-height: calc(100vh - 140px); /* 統一された高さ */
    padding: 3rem 0.5rem 0.5rem 0.5rem;
    min-width: 400px; /* 最小幅を400pxに統一 */
    max-width: 100%; /* 最大幅制限を緩和 */
    margin-left: 0;
    overflow-y: auto; /* モバイルでも詳細パネル全体でスクロール制御 */
    overflow-x: hidden; /* 横スクロールは無効化 */
    /* 子要素のオーバーフローを防ぐための設定 */
    box-sizing: border-box;
    /* レイアウトの安定性を向上 */
    flex: 1 1 max(30%, 400px);
    width: auto;
    /* 内容がはみ出さないようにスクロール制御 */
    flex-shrink: 0;
    flex-basis: max(30%, 400px);
    z-index: 10;
  }
  
  /* タブレットサイズでの詳細パネル内レイアウト調整 - 基本ルールに統合済み */
  
  .hist-detail-wrapper .output-box {
    padding: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  .hist-table-wrapper {
    max-height: calc(100vh - 140px); /* 統一された高さ */
    min-width: 300px;
  }
  
  /* モバイルで詳細パネルが開いている状態でテーブルを非表示にした場合 */
  .history-layout.table-hidden .hist-table-wrapper {
    display: none !important;
  }

  .history-layout.table-hidden .hist-detail-wrapper {
    margin-left: 0;
  }
}

/* 制御ボタン関連のスタイルは削除されました */

.hist-detail-wrapper .detail-control-btn:active,
body .detail-control-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(102, 126, 234, 0.3);
}

/* テーブル非表示ボタンの特別スタイル */
.hist-detail-wrapper .toggle-table-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.hist-detail-wrapper .toggle-table-btn:hover {
  background: linear-gradient(135deg, #ff5252 0%, #d63031 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

/* 詳細パネルの閉じるボタン（既存のスタイルを保持） */
.hist-detail-wrapper .close-detail-btn {
  background: linear-gradient(135deg, #636e72 0%, #2d3436 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(99, 110, 114, 0.3);
}

.hist-detail-wrapper .close-detail-btn:hover {
  background: linear-gradient(135deg, #57606f 0%, #2f3542 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 110, 114, 0.4);
}

/* レスポンシブ対応（タブレット・モバイル） */
@media (max-width: 1199px) {
  .history-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 1rem;
  }
  /* 詳細表示時は縦幅を確保（flex column でも表示エリアが圧縮されないようにする） */
  .history-layout.detail-open {
    min-height: calc(100vh - 220px);
    height: calc(100vh - 220px);
  }

  .hist-table-wrapper,
  .hist-detail-wrapper {
    flex: none;
    min-width: 100%;
    max-width: 100%;
    margin-left: 0;
    max-height: calc(100vh - 140px); /* 統一された高さ */
  }
  
  .hist-detail-wrapper {
    padding: 3rem 1rem 1rem 1rem;
    min-width: 400px; /* 最小幅を保証 */
  }
  
  /* 小さい画面での詳細パネル内レイアウト調整 */
  .hist-detail-wrapper .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    /* 上下方向のレイアウト安定化 */
    padding: 0.75rem 0;
    min-height: auto;
    box-sizing: border-box;
  }
  
  .hist-detail-wrapper .section-heading h3 {
    font-size: 1em;
    margin: 0 0 0.5rem 0;
    padding: 0.5rem 0;
    width: 100%;
    /* 上下方向のレイアウト安定化 */
    line-height: 1.3;
    min-height: 1.5rem;
    box-sizing: border-box;
  }
  
  .hist-detail-wrapper .section-heading .btn-primary {
    align-self: flex-end;
    min-width: 60px;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    /* 上下方向のレイアウト安定化 */
    min-height: 1.5rem;
  }
  
  .hist-detail-wrapper .output-box {
    padding: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

/* #histJaSection のレスポンシブ対応 */
@media (max-width: 1199px) {
  #histJaSection > div.section-heading {
    gap: 0.75rem;
    padding: 0.6rem 0;
  }
  
  #histJaSection > div.section-heading h3,
  #histJaSection > div.section-heading h4 {
    font-size: 1.05em;
    gap: 0.5rem;
  }
  
  #histJaSection > div.section-heading h3 .lang-text,
  #histJaSection > div.section-heading h4 .lang-text {
    font-size: 1.05em;
  }
  
  #histJaSection > div.section-heading h3 .char-count,
  #histJaSection > div.section-heading h4 .char-count {
    font-size: 0.85em;
  }
  
  #histJaSection > div.section-heading .btn-primary,
  #histJaSection > div.section-heading .btn-secondary {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 991px) {
  #histJaSection > div.section-heading {
    gap: 0.6rem;
    padding: 0.5rem 0;
  }
  
  #histJaSection > div.section-heading h3,
  #histJaSection > div.section-heading h4 {
    font-size: 1em;
    gap: 0.5rem;
  }
  
  #histJaSection > div.section-heading h3 .lang-text,
  #histJaSection > div.section-heading h4 .lang-text {
    font-size: 1em;
  }
  
  #histJaSection > div.section-heading h3 .char-count,
  #histJaSection > div.section-heading h4 .char-count {
    font-size: 0.8em;
  }
  
  #histJaSection > div.section-heading .btn-primary,
  #histJaSection > div.section-heading .btn-secondary {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    min-height: 1.5rem;
  }
}

@media (max-width: 768px) {
  .hist-detail-wrapper #histJaSection > div.section-heading {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
  }
  
  .hist-detail-wrapper #histJaSection > div.section-heading h3,
  .hist-detail-wrapper #histJaSection > div.section-heading h4 {
    flex: 1;
    margin-bottom: 0;
    gap: 0.4rem;
  }
  
  .hist-detail-wrapper #histJaSection > div.section-heading h3 .lang-text,
  .hist-detail-wrapper #histJaSection > div.section-heading h4 .lang-text {
    font-size: 0.95em;
  }
  
  .hist-detail-wrapper #histJaSection > div.section-heading h3 .char-count,
  .hist-detail-wrapper #histJaSection > div.section-heading h4 .char-count {
    font-size: 0.75em;
  }
  
  .hist-detail-wrapper #histJaSection > div.section-heading .btn-primary,
  .hist-detail-wrapper #histJaSection > div.section-heading .btn-secondary {
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
  }
}

/* さらに小さい画面サイズでの対応 */
@media (max-width: 768px) {
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper {
    padding: 1.5rem 0.75rem 0.75rem 0.75rem;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    /* 上下方向のレイアウト安定化 */
    padding: 0.5rem 0;
    min-height: auto;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading h3 {
    font-size: 0.95em;
    /* 上下方向のレイアウト安定化 */
    margin: 0 0 0.5rem 0;
    padding: 0.5rem 0;
    min-height: 2rem;
    line-height: 1.3;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .section-heading .btn-primary {
    /* 上下方向のレイアウト安定化 */
    min-height: 2rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
  }
  
  .history-layout.detail-open:not(.wide-mode) .hist-detail-wrapper .output-box {
    padding: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* デバッグ用: 詳細パネルのレイアウト状態を視覚化 */
.hist-detail-wrapper.debug-layout .section-heading {
  border: 2px dashed #ff6b6b;
  background: rgba(255, 107, 107, 0.05);
}

.hist-detail-wrapper.debug-layout .section-heading h3 {
  border: 1px solid #4ecdc4;
  background: rgba(78, 205, 196, 0.1);
  padding: 0.25rem;
}

.hist-detail-wrapper.debug-layout .section-heading .btn-primary {
  border: 1px solid #45b7d1;
  background: rgba(69, 183, 209, 0.1);
}

/* #histJaSection のレイアウトデバッグ用 */
.hist-detail-wrapper.debug-layout #histJaSection > div.section-heading {
  border: 2px dashed #ff6b6b;
  background: rgba(255, 107, 107, 0.05);
}

.hist-detail-wrapper.debug-layout #histJaSection > div.section-heading h3 {
  border: 1px solid #4ecdc4;
  background: rgba(78, 205, 196, 0.1);
  padding: 0.25rem;
}

.hist-detail-wrapper.debug-layout #histJaSection > div.section-heading .btn-primary {
  border: 1px solid #45b7d1;
  background: rgba(69, 183, 209, 0.1);
}

/* テーブルラッパー - より具体的なセレクタ */
#historyContainer .hist-table-wrapper {
  background: #fff;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  max-height: calc(100vh - 140px); /* 統一された高さ */
  overflow-y: auto;
  min-width: 0;
  position: relative;
}

#historyContainer .hist-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9rem;
  padding: 1.5rem;
  border: none;
  position: relative;
  table-layout: fixed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* テーブルヘッダーの固定 */
#historyTable thead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  margin-top: 0;
  will-change: transform;
}

#historyTable thead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  z-index: -1;
}

#historyTable th {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  color: white;
  font-weight: 600;
  padding: 1rem 0.8rem;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 30;
  background-clip: padding-box;
  border: 1px solid transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  will-change: transform;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#historyTable th:first-child {
  border-top-left-radius: 18px;
  border-left: none; /* 左端の境界線を削除 */
}

#historyTable th:last-child {
  border-top-right-radius: 18px;
  border-right: none; /* 右端の境界線を削除 */
}

#historyContainer .hist-table-wrapper td {
  padding: 0.8rem;
  border-bottom: 1px solid rgba(230, 225, 217, 0.5);
  transition: background-color 0.2s;
  /* 列間の境界線を追加 */
  border-right: 1px solid rgba(230, 225, 217, 0.3);
}

/* テーブル本体の最初の行がヘッダーに隠れないように調整 */
#historyContainer .hist-table-wrapper tbody tr:first-child td {
  border-top: 1px solid rgba(230, 225, 217, 0.3);
}

#historyContainer .hist-table-wrapper td:last-child {
  border-right: none; /* 右端の境界線を削除 */
}

#historyContainer .hist-table-wrapper tr:hover td {
  background: rgba(37, 99, 235, 0.05);
}

.hist-table-wrapper tr.hist-row {
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInRow 0.3s ease-out;
}

.hist-table-wrapper tr.hist-row:hover {
  background: rgba(37, 99, 235, 0.08);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

/* テーブル行の選択状態 */
.hist-table-wrapper tr.hist-row.selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(13, 148, 136, 0.1));
  border-left: 4px solid var(--color-accent);
  transform: translateX(8px);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
}

/* 統合履歴のタイプ別スタイル */
.hist-table-wrapper tr.hist-row.type-article {
  border-left: 3px solid #4CAF50;
}

.hist-table-wrapper tr.hist-row.type-rewrite {
  border-left: 3px solid #FF9800;
}

.hist-table-wrapper tr.hist-row.type-article:hover {
  background: rgba(76, 175, 80, 0.08);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}

.hist-table-wrapper tr.hist-row.type-rewrite:hover {
  background: rgba(255, 152, 0, 0.08);
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
}

.hist-table-wrapper tr.hist-row.type-article.selected {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
  border-left: 4px solid #4CAF50;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2);
}

.hist-table-wrapper tr.hist-row.type-rewrite.selected {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 152, 0, 0.05));
  border-left: 4px solid #FF9800;
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.2);
}

/* タイプバッジのスタイル */
.type-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}

.hist-table-wrapper tr.type-article .type-badge {
  background: rgba(76, 175, 80, 0.1);
  color: #2E7D32;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.hist-table-wrapper tr.type-rewrite .type-badge {
  background: rgba(255, 152, 0, 0.1);
  color: #E65100;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.type-language-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hist-table-wrapper .language-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
}

/* リライトタイプバッジのスタイル */
.rewrite-type-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  min-width: 70px;
  margin-left: 0.3rem;
}

.rewrite-type-badge.section {
  background: rgba(156, 39, 176, 0.1);
  color: #7B1FA2;
  border: 1px solid rgba(156, 39, 176, 0.3);
}

.rewrite-type-badge.full {
  background: rgba(255, 152, 0, 0.1);
  color: #E65100;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

/* 履歴ページ専用統計データ挿入UIのスタイル */
.history-stat-insert-ui {
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  overflow: hidden;
}

.stat-insert-header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-insert-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.close-stat-insert {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-stat-insert:hover {
  background: rgba(255, 255, 255, 0.3);
}

.stat-insert-content {
  padding: 1.5rem;
}

.stat-insert-content p {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 0.9rem;
}

.stat-insert-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.stat-insert-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-insert-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.stat-insert-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.stat-insert-btn.secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.stat-insert-btn.secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
}

/* テーブル行のアニメーション */
@keyframes fadeInRow {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hist-detail-wrapper {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  max-height: 600px;
  overflow-y: auto;
  animation: slideInDetail 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}

@keyframes slideInDetail {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hist-meta-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.hist-meta-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(230, 225, 217, 0.3);
  font-size: 0.9rem;
}

.hist-meta-list li:last-child {
  border-bottom: none;
}

.hist-meta-list strong {
  color: var(--color-accent);
  font-weight: 600;
  min-width: 80px;
}

.hist-meta-list span {
  color: var(--color-text);
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

/* Phase2.5: 詳細パネルで比較メタ常時表示ブロック */
.hist-comparison-meta-block {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(230, 225, 217, 0.5);
  border-radius: 8px;
  background: rgba(248, 249, 250, 0.8);
}
.hist-comparison-meta-block .hist-comparison-meta-title {
  font-size: 1rem;
  margin: 0 0 0.75rem 0;
  color: var(--color-accent);
}
.hist-comparison-meta-block .hist-comparison-meta-body {
  font-size: 0.9rem;
}
.hist-comparison-meta-block .hist-comparison-meta-row {
  margin: 0.4rem 0;
  padding: 0;
}
.hist-comparison-meta-block .hist-comparison-meta-row strong {
  color: var(--color-accent);
  margin-right: 0.35rem;
}
.hist-comparison-meta-block .hist-comparison-meta-actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(230, 225, 217, 0.4);
}
.hist-comparison-meta-block .hist-comparison-new-generate-btn {
  font-size: 0.9rem;
}

/* 詳細ローディング状態 */
.detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--color-text);
  }
  
.detail-loading .brand-spinner {
  margin-bottom: 1rem;
}

.detail-loading p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
  }
  
/* 履歴ページのタブレスポンシブ対応 */
@media (max-width: 1199px) {
  .history-type-toggle {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
  }
  .history-type-toggle button {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    min-height: 3rem;
    min-width: 4rem;
    flex: 1;
    max-width: calc(50% - 0.15rem);
  }
  
  .hist-meta-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  
  .hist-meta-list span {
    max-width: 100%;
    text-align: left;
  }
  
  .hist-detail-wrapper .section-heading h3 {
    font-size: 1em;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
  }
  
  .hist-detail-wrapper .section-heading h3::after {
    font-size: 0.8em;
    padding: 0.15em 0.5em;
  }
  
  /* タブレットでは文字サイズを小さくして表示 */
  .hist-table-wrapper td,
  .hist-table-wrapper th {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
  }
  
      /* キーワード列は短縮表示（記事生成・リライト履歴の3番目、統合履歴の4番目） */
  #historyContainer .hist-table-wrapper td:nth-child(3),
  #historyContainer .hist-table-wrapper th:nth-child(3),
  #historyContainer .hist-table-wrapper td:nth-child(4),
  #historyContainer .hist-table-wrapper th:nth-child(4) {
    max-width: 250px;
    min-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* 追加指示列は短縮表示（記事生成履歴の4番目、リライト履歴の4番目、統合履歴の5番目） */
  /* 追加指示はモードにより列が異なる（data-history-mode は HistoryTable.renderHead が設定） */
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] tr td:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] thead th:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] tr.type-article td:nth-child(4),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] thead th:nth-child(4),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] tr.type-rewrite td:nth-child(4),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] thead th:nth-child(4) {
    max-width: 220px;
    min-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 商材（Offering）列 */
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] thead th:nth-child(6),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] tbody td:nth-child(6),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] thead th:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] tbody td:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] thead th:nth-child(6),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] tbody td:nth-child(6) {
    max-width: 200px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* タブレットではタイプバッジを小さく */
  .type-badge {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    min-width: 60px;
  }
}

@media (max-width: 767px) {
  .history-type-toggle {
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1.2rem;
  }
  .history-type-toggle button {
    padding: 0.7rem 0.8rem;
    font-size: 0.8rem;
    min-height: 3.2rem;
    min-width: 100%;
    flex: none;
    max-width: 100%;
  }
  
  /* モバイルでは文字サイズを小さくして表示 */
  .hist-table-wrapper td,
  .hist-table-wrapper th {
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
  }
  
  /* キーワード列は短縮表示（記事生成・リライト履歴の3番目、統合履歴の4番目） */
  #historyContainer .hist-table-wrapper td:nth-child(3),
  #historyContainer .hist-table-wrapper th:nth-child(3),
  #historyContainer .hist-table-wrapper td:nth-child(4),
  #historyContainer .hist-table-wrapper th:nth-child(4) {
    max-width: 150px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* 追加指示列は短縮表示（記事生成履歴の4番目、リライト履歴の4番目、統合履歴の5番目） */
  /* 追加指示・商材・文字数 は data-history-mode で列位置が変わる */
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] tr td:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] thead th:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] tr.type-article td:nth-child(4),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] thead th:nth-child(4),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] tr.type-rewrite td:nth-child(4),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] thead th:nth-child(4) {
    max-width: 130px;
    min-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] thead th:nth-child(6),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] tbody td:nth-child(6),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] thead th:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] tbody td:nth-child(5),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] thead th:nth-child(6),
  #historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] tbody td:nth-child(6) {
    max-width: 130px;
    min-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ========== 段階的開示（Progressive Disclosure）========== */
.pre-guide {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 2px solid rgba(37, 99, 235, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: #555;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  transition: all 0.3s ease;
}

.pre-guide h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pre-guide ul {
  margin: 0.5rem 0 1rem 1.25rem;
  padding: 0;
  list-style: none;
}

.pre-guide li {
  margin: 0.4rem 0;
  position: relative;
  padding-left: 1rem;
}

.pre-guide li::before {
  content: '•';
  color: var(--color-accent);
  font-weight: bold;
  position: absolute;
  left: 0;
}

.form-sections {
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(10px);
}

.form-sections[style*="display: block"],
.form-sections[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
}

.form-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.form-section:hover {
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.form-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #343a40;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(37, 99, 235, 0.15);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* セクション毎の色分け（オプション） */
.form-section#basicSection {
  border-left: 4px solid #3b82f6;
}

/* 基本情報セクション：ラベル・説明文・アイコンの視認性確保（共通フィールド・カスタムフィールドとも同じスタイルを適用） */
.form-section#basicSection .input-label,
.form-section#basicSection .input-label svg {
  color: #212529;
}
.form-section#basicSection .input-desc {
  color: #212529;
}

.form-section#contentSection {
  border-left: 4px solid #10b981;
}

.form-section#optimizationSection {
  border-left: 4px solid #f59e0b;
}

.form-section#statDataSection {
  border-left: 4px solid #8b5cf6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .pre-guide {
    padding: 1rem;
    margin: 0.75rem 0;
  }
  
  .form-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .form-section h3 {
    font-size: 1rem;
  }
}

/* ========== Misc. ========== */
.error{color:var(--color-accent);font-size:.85rem;font-weight:600}
#historyArticle{
  margin-top: 1.2rem;
  /* 高さ制限を削除 - 詳細パネル全体でスクロール制御 */
  overflow: visible; /* スクロール制御を親に委ねる */
  /* 親要素からオーバーフローしないように制限 */
  max-width: 100%;
  box-sizing: border-box;
}

/* 履歴詳細パネルのスクロールバースタイル - 不要なため削除 */
/* #historyArticle::-webkit-scrollbar {
  width: 8px;
}

#historyArticle::-webkit-scrollbar-track {
  background: rgba(37, 99, 235, 0.1);
  border-radius: 4px;
}

#historyArticle::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-cta-hover));
  border-radius: 4px;
}

#historyArticle::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--trust-cta-hover), #FF6B35);
} */

/* 履歴詳細パネル全体のスクロールバースタイル */
.hist-detail-wrapper::-webkit-scrollbar {
  width: 8px;
}

.hist-detail-wrapper::-webkit-scrollbar-track {
  background: rgba(37, 99, 235, 0.1);
  border-radius: 4px;
}

.hist-detail-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-cta-hover));
  border-radius: 4px;
}

.hist-detail-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--trust-cta-hover), #FF6B35);
}

/* 子要素のオーバーフローを完全に防ぐための追加設定 */
.hist-detail-wrapper * {
  max-width: 100%;
  box-sizing: border-box;
}

/* 記事詳細要素のスタイル */
#histArticle {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.article-header {
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.language-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.language-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
}

.language-badge.japanese {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.language-badge.bilingual {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.character-count {
  color: #666;
  font-size: 0.875rem;
}

.copy-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.copy-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
  transform: translateY(-1px);
}

.copy-icon {
  font-size: 1rem;
}

.article-content-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* 詳細パネル内での適切な表示を保証 */
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-word;
}

.article-body {
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  box-sizing: border-box;
}

.article-text {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 14px;
  color: #333;
  margin: 0;
  padding: 0;
}

/* 記事詳細要素のスクロールバー */
.article-body::-webkit-scrollbar {
  width: 6px;
}

.article-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.article-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.article-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* .detail-controls関連のスタイルは削除されました */

/* === Tabs === */
.tab-buttons{
  display:flex;
  gap:.5rem;
  margin-bottom:.8rem;
  flex-wrap: wrap;
}
.tab-btn{
  padding:.45rem .9rem;
  font-size:.9rem;
  border:none;
  border-radius:4px;
  background:#9ea9b8;     /* 非アクティブはグレー */
  color:#fff;
  cursor:pointer;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.tab-active{
  background:#2b6cb0;     /* アクティブはブルー */
}

/* スマホでのタブ表示改善 */
@media (max-width: 768px) {
  .tab-buttons {
    gap: 0.3rem;
    margin-bottom: 1rem;
  }
  .tab-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    min-height: 3rem;
    min-width: 4rem;
    flex: 1;
    max-width: calc(50% - 0.15rem);
  }
}

@media (max-width: 480px) {
  .tab-buttons {
    gap: 0.2rem;
    margin-bottom: 1.2rem;
  }
  .tab-btn {
    padding: 0.7rem 0.8rem;
    font-size: 0.8rem;
    min-height: 3.2rem;
    min-width: 3.5rem;
    flex: 1;
    max-width: calc(50% - 0.1rem);
  }
}

/* ブランドカード例 */
.brand-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2.2rem 2.8rem;
  margin: 2rem auto;
  max-width: 100%;
  min-width: 340px;
  border: 1.5px solid var(--color-accent);
}

/* ブランドボタン例 */
.brand-btn {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent2) 100%);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: var(--radius-btn);
  padding: 0.9rem 2.2rem;
  font-size: 1.2rem;
  box-shadow: 0 2px 12px var(--color-accent3)33;
  cursor: pointer;
  transition: filter 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1.2em;
}
.brand-btn:hover {
  filter: brightness(1.08) drop-shadow(0 0 8px var(--color-accent));
  box-shadow: 0 4px 24px var(--color-accent)44;
}

/* ブランドスピナー（有機的なオレンジグラデ） */
.brand-spinner {
  width: 38px;
  height: 38px;
  border: 5px solid #ffe0b2;
  border-top: 5px solid var(--color-accent);
  border-right: 5px solid var(--color-accent2);
  border-radius: 50%;
  animation: brand-spin 1s cubic-bezier(.6,.2,.4,1) infinite;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 16px var(--color-accent)55, 0 0 8px var(--color-accent2)33;
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 1002; /* モーダル閉じるボタンより上位に表示 */
}

/* 生成ボタンコンテナ */
.generate-button-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2em;
}

/* スピナー表示時の強制スタイル */
.brand-spinner[style*="display: inline-block"] {
  display: inline-block;
  visibility: visible;
  opacity: 1;
  z-index: 1002;
}
@keyframes brand-spin {
  0% { transform: rotate(0deg) scale(1);}
  60% { transform: rotate(180deg) scale(1.08);}
  100% { transform: rotate(360deg) scale(1);}
}

/* ブランドナビゲーションボタン */
.brand-nav-btn {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 0.45em 1.3em;
  font-size: 1.05em;
  margin: 0 0.1em;
  box-shadow: 0 2px 8px var(--color-accent)22;
  transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.brand-nav-btn:hover, .brand-nav-btn:focus {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent2) 100%);
  box-shadow: 0 4px 16px var(--color-accent2)33;
  transform: translateY(-2px) scale(1.04);
  outline: none;
}

/* ========== ミニマル＆洗練タブ型ブランドセレクタ ========== */
.brand-radio-group {
  display: flex;
  gap: 0.2rem;
  margin: 0.2em 0 1em 0;
  border-bottom: 1.5px solid #e0e0e0;
  background: none;
  padding: 0;
}
.brand-radio-btn {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.7em 1.4em 0.5em 1.4em;
  font-size: 1.04em;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: none;
  transition: color 0.14s, border-bottom 0.14s, font-weight 0.14s;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2.5px;
  min-width: 5.5em;
  min-height: 2.2em;
  position: relative;
  user-select: none;
  outline: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.brand-radio-btn:hover, .brand-radio-btn:focus {
  color: var(--color-accent3);
  background: none;
  border-bottom: 2.5px solid var(--color-accent2);
  font-weight: 600;
}
.brand-radio-btn.selected {
  color: var(--color-accent);
  border-bottom: 2.5px solid var(--color-accent);
  font-weight: 700;
  background: none;
}
.brand-radio-btn .desc {
  font-size: 0.92em;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 0.18em;
  letter-spacing: 0.01em;
}
.brand-radio-btn input[type="radio"] {
  display: none;
}

/* 既存UIへの影響は最小限。今後、他の部品も順次変数化・刷新可能 */

/* ========== ミニマル＆洗練フォーム入力欄 ========== */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  margin-bottom: 1.1em;
}
/* 比較記事（比較対象を追加）UI */
.comparison-article-toggle-wrap {
  margin-top: 0.5em;
}
.comparison-article-toggle-wrap label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}
.comparison-article-toggle-wrap input[type="checkbox"] {
  margin: 0;
}
.comparison-items-wrapper {
  margin-top: 0.75em;
  margin-bottom: 1em;
  padding: 1em;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: #f8f9fa;
  --cmp-offering-cell-border: #e2e8f0;
  --cmp-offering-cell-bg: rgba(255, 255, 255, 0.92);
  --cmp-offering-cell-hover-border: #cbd5e1;
  --cmp-offering-select-border: #94a3b8;
  --cmp-offering-select-border-hover: #64748b;
  --cmp-offering-shadow-ambient: rgba(15, 23, 42, 0.07);
  --cmp-offering-shadow-inset: rgba(15, 23, 42, 0.05);
  --cmp-offering-shadow-inset-hover: rgba(15, 23, 42, 0.06);
}
.comparison-items-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.comparison-item-row {
  display: grid;
  grid-template-columns: auto minmax(11rem, 1.2fr) 1fr 1fr 1fr auto;
  gap: 0.5em;
  align-items: start;
}
/* カタログ選択ブロック（ヒント＋セレクトをまとめてクリック可能に見せる） */
label.comparison-offering-cell.comparison-offering-cell--tap-target {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
  margin: 0;
  padding: 0.38rem 0.42rem 0.42rem;
  border-radius: 8px;
  background: var(--cmp-offering-cell-bg);
  border: 1px solid var(--cmp-offering-cell-border);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
label.comparison-offering-cell.comparison-offering-cell--tap-target:hover {
  border-color: var(--cmp-offering-cell-hover-border);
  background: #fff;
  box-shadow: 0 1px 4px var(--cmp-offering-shadow-ambient);
}
label.comparison-offering-cell.comparison-offering-cell--tap-target:focus-within {
  border-color: var(--color-accent, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.comparison-offering-cell__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.76rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.25;
}
.comparison-offering-cell__pulldown-mark {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-right: 2px solid var(--cmp-offering-select-border-hover);
  border-bottom: 2px solid var(--cmp-offering-select-border-hover);
  transform: rotate(45deg) translateY(-0.12em);
  flex-shrink: 0;
  opacity: 0.85;
}
/* 比較行のセレクト: 隣の brand-input（下線のみ）と差別化しクリック可能であることを明示 */
.comparison-item-row select.comparison-offering-select.brand-select {
  border: 1px solid var(--cmp-offering-select-border);
  border-radius: 8px;
  border-bottom: 1px solid var(--cmp-offering-select-border);
  padding: 0.52em 2.35em 0.52em 0.72em;
  background-color: #fff;
  box-shadow: inset 0 1px 2px var(--cmp-offering-shadow-inset);
  cursor: pointer;
}
.comparison-item-row select.comparison-offering-select.brand-select:hover {
  border-color: var(--cmp-offering-select-border-hover);
  box-shadow:
    inset 0 1px 2px var(--cmp-offering-shadow-inset-hover),
    0 1px 4px var(--cmp-offering-shadow-ambient);
}
.comparison-item-row select.comparison-offering-select.brand-select:focus {
  outline: none;
  border-color: var(--color-accent, #2563eb);
  box-shadow:
    inset 0 1px 2px var(--cmp-offering-shadow-inset),
    0 0 0 3px rgba(37, 99, 235, 0.22);
}
.comparison-item-row .comparison-item-label {
  font-size: 0.9em;
  font-weight: 600;
  color: #495057;
  min-width: 5em;
  padding-top: 0.42rem;
}
.comparison-item-row .brand-input {
  min-width: 0;
}
.comparison-add-btn {
  margin-top: 0.75em;
}
/* Phase2.9: 比較対象件数に応じた注意・警告（送信はブロックしない） */
.comparison-count-warning {
  margin-top: 0.75em;
  padding: 0.5em 0.75em;
  font-size: 0.89em;
  line-height: 1.4;
  border-radius: 6px;
}
.comparison-count-warning--info {
  background: #e7f1ff;
  color: #0d47a1;
  border: 1px solid #90caf9;
}
.comparison-count-warning--warning {
  background: #fff8e1;
  color: #e65100;
  border: 1px solid #ffb74d;
}
/* 意思決定の傾向・想定読者に応じたガイド */
.comparison-option-guide {
  margin-top: 1em;
  padding: 0.65em 0.85em;
  font-size: 0.88em;
  line-height: 1.5;
  color: #374151;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.comparison-option-guide:empty {
  display: none;
}
/* 各 select 直下用（余白を詰める） */
.comparison-option-guide--inline {
  margin-top: 0.4em;
}
.comparison-option-guide .guide-section {
  margin-bottom: 0.35em;
}
.comparison-option-guide .guide-section:last-child {
  margin-bottom: 0;
}
.comparison-option-guide .guide-label {
  font-weight: 600;
  color: #475569;
  margin-right: 0.25em;
}
.comparison-type-wrap {
  margin-top: 0.75em;
}
.comparison-type-wrap label {
  font-size: 0.9em;
  font-weight: 600;
  color: #495057;
  margin-right: 0.5em;
}
.comparison-dimensions-wrap {
  margin-top: 0.75em;
}
.comparison-dimensions-wrap .input-label {
  display: block;
  margin-bottom: 0.25em;
}
.comparison-dimensions-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.35em;
}
.comparison-dimension-input {
  min-width: 0;
  flex: 1 1 10em;
  max-width: 14em;
}
@media (max-width: 640px) {
  .comparison-dimension-input {
    max-width: none;
    flex: 1 1 100%;
  }
}
@media (max-width: 640px) {
  .comparison-item-row {
    grid-template-columns: 1fr;
  }
  .comparison-item-row .comparison-item-remove {
    justify-self: start;
  }
}
.input-label {
  font-size: 0.98em;
  font-weight: 600;
  color: #343a40;
  margin-bottom: 0.08em;
  letter-spacing: 0.01em;
  white-space: normal;
  word-break: break-word;
}
.input-desc {
  font-size: 0.89em;
  color: #495057;
  font-weight: 400;
  margin-bottom: 0.12em;
  margin-left: 0.1em;
  white-space: normal;
  word-break: break-word;
}
.brand-input, .brand-textarea, .brand-select {
  background: #fff;
  border: none;
  border-bottom: 1.7px solid #e0e0e0;
  border-radius: 0;
  padding: 0.68em 0.2em 0.48em 0.2em;
  font-size: 1.08em;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  box-shadow: none;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.brand-input:focus, .brand-textarea:focus, .brand-select:focus {
  border-bottom: 2.2px solid var(--color-accent);
  box-shadow: 0 2px 8px var(--trust-cta)22;
}
.brand-input[disabled], .brand-textarea[disabled], .brand-select[disabled] {
  background: #f5f5f5;
  color: #aaa;
}
.brand-textarea {
  min-height: 2.6em;
  max-height: 8em;
  line-height: 1.5;
}
.brand-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 1em;
  padding-right: 2.5em;
}

.disclaimer {
  margin-top: 1.3rem;
  font-size: 1.01em;
  line-height: 1.7;
  color: #7a4c00;
  background: linear-gradient(90deg, #fff8e1 60%, #e6f9e6 100%);
  border-left: 5px solid var(--color-accent);
  border-radius: 14px;
  box-shadow: 0 2px 12px var(--trust-cta)22;
  padding: 1.1em 1.3em 1.1em 1.6em;
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-weight: 500;
}
.disclaimer .disc-icon {
  font-size: 1.35em;
  margin-right: 0.3em;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px var(--trust-cta)55);
}

/* ========== ユーザーバッジ（header用） ========== */
.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: linear-gradient(90deg, #fff8e1 60%, #e6f9e6 100%);
  color: var(--color-accent3);
  border-radius: 999px;
  padding: 0.32em 1.1em 0.32em 0.9em;
  font-size: 1.01em;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--trust-cta)22;
  border: 1.5px solid var(--color-accent2);
  margin-left: 0.7em;
  min-width: 0;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-badge .user-icon {
  font-size: 1.18em;
  margin-right: 0.18em;
  color: var(--color-accent);
}
.admin-badge {
  display: inline-block;
  background: var(--color-accent3);
  color: #fff;
  font-size: 0.92em;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.13em 0.7em;
  margin-left: 0.5em;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px var(--trust-intelligence)22;
}

/* ========== アカウントバッジ＋ドロップダウンメニュー ========== */
.account-menu-wrap {
  position: relative;
  margin-left: 1.2em;
  margin-right: 0.2em;
  align-items: center;
  display: flex;
}
.user-badge {
  cursor: pointer;
  transition: box-shadow 0.16s, border 0.16s;
}
.user-badge:focus, .user-badge:hover {
  box-shadow: 0 4px 16px var(--trust-cta)33, 0 0 0 2px var(--color-accent2);
  border-color: var(--color-accent);
  outline: none;
}
.account-dropdown {
  display: none;
  position: absolute;
  top: 120%;
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px var(--trust-intelligence)22, 0 2px 12px var(--trust-cta)22;
  border: 1.5px solid var(--color-accent2);
  z-index: 1000;
  padding: 0.7em 0.2em;
  animation: fadeInMenu 0.18s;
}
@keyframes fadeInMenu {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-menu-wrap.open .account-dropdown {
  display: block;
}
.account-dropdown .account-email {
  font-size: 0.98em;
  color: var(--color-accent3);
  font-weight: 600;
  padding: 0.5em 1.2em 0.3em 1.2em;
  border-bottom: 1px solid #eee;
  margin-bottom: 0.3em;
  word-break: break-all;
}
.account-dropdown .account-action {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1.2em;
  font-size: 1.04em;
  color: var(--color-text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.13s, color 0.13s;
  text-decoration: none;
}
.account-dropdown .account-action:hover, .account-dropdown .account-action:focus {
  background: linear-gradient(90deg, #fff8e1 60%, #e6f9e6 100%);
  color: var(--color-accent3);
  outline: none;
}
.account-dropdown .admin-badge {
  margin-left: 0.5em;
}

/* 空の状態のスタイル */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(249, 246, 242, 0.8);
  border-radius: 12px;
  margin: 1rem 0;
  border: 2px dashed rgba(37, 99, 235, 0.3);
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.empty-content p {
  color: var(--color-accent);
  font-weight: 600;
  margin: 0;
  font-size: 1.1rem;
}

.empty-content small {
  color: var(--color-text);
  opacity: 0.7;
  font-size: 0.9rem;
}

/* リライトモーダルのラベルスタイル */
#rewriteModal label,
#sectionRewriteModal label {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
  display: block;
  font-size: 14px;
}

/* リライトモーダルのinput要素 */
#rewriteModal input[type="text"],
#sectionRewriteModal input[type="text"] {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #E5E7EB;
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

#rewriteModal input[type="text"]:focus,
#sectionRewriteModal input[type="text"]:focus {
  outline: none;
  border-color: var(--trust-cta);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

#rewriteModal input[type="text"]:hover,
#sectionRewriteModal input[type="text"]:hover {
  border-color: #D1D5DB;
  transform: translateY(-1px);
}

/* リライトモーダルのtextarea要素 */
#rewriteModal textarea,
#sectionRewriteModal textarea {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #E5E7EB;
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  resize: vertical;
}

/* 原文textareaの最小高さ */
#rewriteModal textarea[name="src_article"] {
  min-height: 120px;
}

/* 検索意図textareaの強制スタイル */
#rewriteModal textarea[name="search_intent"],
#sectionRewriteModal textarea[name="search_intent"] {
  min-height: 80px;
  height: 80px;
  resize: vertical;
  line-height: 1.5;
  padding: 16px 20px;
  box-sizing: border-box;
}

#rewriteModal textarea:focus,
#sectionRewriteModal textarea:focus {
  outline: none;
  border-color: var(--trust-cta);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

#rewriteModal textarea:hover,
#sectionRewriteModal textarea:hover {
  border-color: #D1D5DB;
  transform: translateY(-1px);
}

#rewriteModal fieldset,
#sectionRewriteModal fieldset {
  border: 2px solid #E5E7EB;
  border-radius: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.8);
  margin: 0;
}

#rewriteModal fieldset legend,
#sectionRewriteModal fieldset legend {
  font-weight: 600;
  color: var(--color-text);
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

#rewriteModal fieldset label,
#sectionRewriteModal fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}

#rewriteModal fieldset input[type="radio"],
#sectionRewriteModal fieldset input[type="radio"] {
  width: auto;
  margin: 0;
  transform: none;
}

#rewriteModal fieldset input[type="radio"]:focus,
#sectionRewriteModal fieldset input[type="radio"]:focus {
  transform: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

#rewriteModal .form-actions,
#sectionRewriteModal .form-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

#rewriteModal .form-actions .btn-primary,
#sectionRewriteModal .form-actions .btn-primary {
  margin-top: 0;
  min-width: 120px;
}

/* リライトモーダルのfeedbackは共通スタイルを使用 */
#rewriteModal .feedback,
#sectionRewriteModal .feedback {
  margin-top: 0.1em;
  margin-bottom: 1rem;
}

#rewriteModal .feedback.error,
#sectionRewriteModal .feedback.error {
  text-align: center;
}

/* リライトモーダルの読み取り専用フィールドスタイル */
#rewriteModal textarea.readonly {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #6c757d;
  cursor: not-allowed;
  user-select: none;
}

#rewriteModal textarea.readonly:focus {
  outline: none;
  border-color: #dee2e6;
  box-shadow: none;
  transform: none;
}

#rewriteModal textarea.readonly:hover {
  border-color: #dee2e6;
  transform: none;
}

/* ========== 部分リライトモーダル ========== */
#sectionRewriteModal {
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  margin: 0;
  border-radius: 16px;
  border: 2px solid rgba(37, 99, 235, 0.3);
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

/* section rewrite modal: glass表現を縮退し視認性を優先 */
#sectionRewriteModal {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  box-shadow: var(--trust-shadow-lg);
}

#sectionRewriteModal::before {
  display: none;
  animation: none;
  content: none;
}

#sectionRewriteModal::backdrop {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: none;
}

/* 原文プレビュー */
.article-preview-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.article-preview-header label {
  font-weight: 700;
  color: var(--color-accent);
  margin: 0;
  font-size: 1.1rem;
  text-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
}

.article-preview-header label::after {
  content: ' 📄';
  font-size: 1rem;
  opacity: 0.8;
  margin-left: 0.5rem;
}

.article-preview-container {
  position: relative;
  border: 2px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
  transition: all 0.3s ease;
}

#sectionRewriteModal .article-preview-container {
  border: 1px solid var(--trust-border);
  background: var(--trust-surface);
  box-shadow: none;
}

.article-preview-container:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}

.article-preview-container textarea {
  background: transparent;
  border: none;
  color: #2c3e50;
  cursor: not-allowed;
  font-family: 'Inter', 'Noto Sans JP', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: none;
  width: 100%;
  min-height: 300px;
  max-height: 600px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  outline: none;
}

/* 原文プレビューのスクロールバー */
.article-preview-container textarea::-webkit-scrollbar {
  width: 10px;
}

.article-preview-container textarea::-webkit-scrollbar-track {
  background: rgba(37, 99, 235, 0.05);
  border-radius: 6px;
}

.article-preview-container textarea::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.3);
  border-radius: 6px;
  transition: background 0.2s ease;
}

.article-preview-container textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.5);
}

#sectionRewriteModal form {
  padding: 2.5rem;
  gap: 1.5rem;
  max-height: calc(90vh - 5rem);
  overflow-y: auto;
}

#sectionRewriteModal h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent3);
  margin-bottom: 1rem;
  text-align: center;
}

#sectionRewriteModal textarea[name="src_article"] {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  cursor: not-allowed;
  font-family: 'Inter', 'Noto Sans JP', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: none;
  transition: all 0.3s ease;
  width: 100%;
  min-width: 100%;
  min-height: 300px;
  max-height: 600px;
  box-sizing: border-box;
}

#sectionRewriteModal textarea[name="src_article"]:focus {
  outline: none;
  border-color: #dee2e6;
  box-shadow: none;
}

/* セクション選択エリア */
#sectionSelectionArea {
  background: linear-gradient(135deg, rgba(249, 246, 242, 0.95), rgba(255, 255, 255, 0.9));
  border: 2px solid rgba(37, 99, 235, 0.15);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
  backdrop-filter: blur(10px);
}

#sectionRewriteModal #sectionSelectionArea {
  background: var(--trust-surface);
  border: 1px solid var(--trust-border);
  box-shadow: none;
  backdrop-filter: none;
}

.section-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(37, 99, 235, 0.1);
}

.section-selection-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent3);
  margin: 0;
}

.section-selection-controls {
  display: flex;
  gap: 0.5rem;
}

.btn-secondary {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-accent3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.btn-secondary:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.5);
  transform: translateY(-1px);
}

.section-selection-info {
  text-align: center;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: rgba(37, 99, 235, 0.05);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--color-accent3);
  font-weight: 500;
}

.section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.2rem;
  max-height: 450px;
  overflow-y: auto;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
}

#sectionRewriteModal .section-cards {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
}

@media (max-width: 768px) {
  .section-cards {
    grid-template-columns: 1fr;
    max-height: 350px;
  }
  
  .section-card {
    padding: 0.75rem;
  }
  
  .section-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  #sectionRewriteModal {
    width: 98%;
    max-width: none;
    max-height: 95vh;
  }
  
  #sectionRewriteModal form {
    padding: 1.5rem;
    gap: 1rem;
  }
}

/* セクションカードのスクロールバー */
.section-cards::-webkit-scrollbar {
  width: 8px;
}

.section-cards::-webkit-scrollbar-track {
  background: rgba(37, 99, 235, 0.05);
  border-radius: 4px;
}

.section-cards::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.3);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.section-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.5);
}

/* セクションローディング */
.section-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--color-accent3);
}

.section-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top: 3px solid var(--color-accent);
  border-radius: 50%;
  animation: sectionSpin 1s linear infinite;
  margin-bottom: 1rem;
}

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

.section-loading p {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

/* セクション空状態 */
.section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #6c757d;
  text-align: center;
}

.section-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.section-empty p {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: var(--color-accent3);
}

.section-empty small {
  font-size: 0.85rem;
  opacity: 0.7;
  line-height: 1.4;
}

/* セクションエラー状態 */
.section-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #dc3545;
  text-align: center;
}

.section-error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.section-error p {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: #dc3545;
}

.section-error small {
  font-size: 0.85rem;
  opacity: 0.8;
  line-height: 1.4;
  color: #6c757d;
}

.section-card {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(37, 99, 235, 0.1);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
  transition: left 0.6s ease-in-out;
}

.section-card:hover::before {
  left: 100%;
}

.section-card:hover {
  border-color: rgba(37, 99, 235, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
}

.section-card.selected {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(255, 255, 255, 0.95));
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2);
  transform: translateY(-2px) scale(1.02);
}

.section-card.selected::after {
  content: '✓';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  animation: checkmarkAppear 0.3s ease-out;
}

@keyframes checkmarkAppear {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.section-card-title {
  font-weight: 600;
  color: var(--color-accent3);
  font-size: 1rem;
  margin: 0;
  flex: 1;
}

.section-card-level {
  font-size: 0.75rem;
  color: #6c757d;
  background: rgba(37, 99, 235, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.section-card-content {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  max-height: 80px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
  white-space: pre-wrap;
  word-break: break-word;
}

.section-card-content.expanded {
  max-height: 400px;
  overflow-y: auto;
}

.section-card-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.95));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.section-card-content.expanded::after {
  opacity: 0;
}

.section-card-content:empty::after {
  display: none;
}

/* セクションカード内容のスクロールバー */
.section-card-content.expanded::-webkit-scrollbar {
  width: 6px;
}

.section-card-content.expanded::-webkit-scrollbar-track {
  background: rgba(37, 99, 235, 0.05);
  border-radius: 3px;
}

.section-card-content.expanded::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.3);
  border-radius: 3px;
  transition: background 0.2s ease;
}

.section-card-content.expanded::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.5);
}

.section-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(37, 99, 235, 0.1);
}

.section-card-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-card-toggle {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: var(--color-accent);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
    transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-weight: 500;
}

.section-card-toggle:hover {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
  cursor: pointer;
}

.section-card-checkbox {
  width: 22px;
  height: 22px;
  accent-color: var(--color-accent);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.section-card-checkbox:checked {
  transform: scale(1.1);
}

.section-card-checkbox:hover {
  transform: scale(1.05);
}

.section-card-stats {
  font-size: 0.75rem;
  color: #6c757d;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.section-card-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(37, 99, 235, 0.05);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.section-card-stats .stat-item:hover {
  background: rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

/* 文字数とレベルのスタイル */
.section-card-stats .char-count {
  background: rgba(168, 85, 247, 0.1);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.section-card-stats .level {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* ホバー効果の強化 */
.section-card-stats .char-count:hover {
  background: rgba(168, 85, 247, 0.2);
  transform: translateY(-1px) scale(1.05);
}

.section-card-stats .level:hover {
  background: rgba(245, 158, 11, 0.2);
  transform: translateY(-1px) scale(1.05);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section-selection-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
  
  .section-selection-controls {
    justify-content: center;
  }
  
  .section-cards {
    max-height: 300px;
  }
  
  .section-card {
    padding: 0.75rem;
  }
  
  .section-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* フローティングアクションボタンの基本スタイル */
.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin: 8px 0;
}

.floating-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.floating-btn:hover::before {
  left: 100%;
}

.floating-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.floating-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* フローティングボタンの種類別スタイル */
.floating-btn.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.floating-btn.btn-secondary {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #2c3e50;
}

.floating-btn.btn-info {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.floating-btn.btn-warning {
  background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
  color: white;
}

.floating-btn.btn-success {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  color: white;
}

.floating-btn.btn-danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
}

.floating-btn.btn-primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.floating-btn.btn-secondary:hover {
  background: linear-gradient(135deg, #9de4e1 0%, #f5c8d8 100%);
}

.floating-btn.btn-info:hover {
  background: linear-gradient(135deg, #45a1f4 0%, #00e0f0 100%);
}

.floating-btn.btn-warning:hover {
  background: linear-gradient(135deg, #ff9a1a 0%, #ff6b3a 100%);
}

.floating-btn.btn-success:hover {
  background: linear-gradient(135deg, #4d9a26 0%, #97d5c0 100%);
}

.floating-btn.btn-danger:hover {
  background: linear-gradient(135deg, #ff5a5a 0%, #e54a1a 100%);
}

/* セクション別結果ボタン用の特別なスタイル */
.section-detail-group {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  position: relative;
}

.section-detail-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(37, 99, 235, 0.8) 0%, 
    rgba(79, 70, 229, 0.8) 50%, 
    rgba(37, 99, 235, 0.8) 100%);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.section-detail-group::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(79, 70, 229, 0.6), 
    rgba(37, 99, 235, 0.6));
  border-radius: 1px;
}

.section-detail-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c5ce7;
  text-align: center;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.section-detail-group .floating-btn {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.05));
  color: #6c5ce7;
  border: 2px solid rgba(79, 70, 229, 0.3);
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

.section-detail-group .floating-btn:hover {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(79, 70, 229, 0.1));
  border-color: rgba(79, 70, 229, 0.5);
  box-shadow: 0 8px 30px rgba(79, 70, 229, 0.25);
  transform: translateY(-2px) scale(1.01);
}

/* フローティングボタンのアイコンとテキスト */
.floating-btn .btn-icon {
  font-size: 16px;
  margin-bottom: 2px;
  line-height: 1;
}

.floating-btn .btn-text {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* フローティングボタンのツールチップ */
.floating-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 1002;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.floating-btn[title]:hover::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.9);
  z-index: 1002;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .floating-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin: 6px 0;
  }
  
  .floating-btn .btn-icon {
    font-size: 14px;
  }
  
  .floating-btn .btn-text {
    font-size: 8px;
  }
  
  .floating-btn[title]:hover::after {
    font-size: 11px;
    padding: 6px 10px;
    right: 50px;
  }
}

/* フローティングボタン関連のスタイルは削除されました */

/* .rewrite-actions関連のスタイルは削除されました */

/* .rewrite-action-group関連のスタイルは削除されました */

.language-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.language-badge.japanese {
  background: rgba(255, 107, 107, 0.1);
  color: #d32f2f;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.language-badge.english {
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.language-badge.bilingual {
  background: rgba(156, 39, 176, 0.1);
  color: #7b1fa2;
  border: 1px solid rgba(156, 39, 176, 0.3);
}

.language-badge.unknown {
  background: rgba(158, 158, 158, 0.1);
  color: #757575;
  border: 1px solid rgba(158, 158, 158, 0.3);
}

/* 言語タブ切り替え用のスタイル */
.language-tabs {
  margin-top: 1rem;
}

.tab-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  padding-bottom: 0.5rem;
}

.tab-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(37, 99, 235, 0.2);
  border-radius: 8px 8px 0 0;
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: none;
}

.tab-btn:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.4);
}

.tab-btn.active {
  background: var(--trust-cta);
  color: white;
  border-color: var(--trust-cta);
  transform: translateY(-2px);
}

.tab-content {
  position: relative;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* インラインtoast用のアニメーション */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight-reverse {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.inline-toast {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: all 0.3s ease;
}

.inline-toast.success {
  background: rgba(76, 175, 80, 0.9);
}

.inline-toast.error {
  background: rgba(244, 67, 54, 0.9);
}

.inline-toast.info {
  background: rgba(33, 150, 243, 0.9);
}

/* .rewrite-actions .btn-primary関連のスタイルは削除されました */

/* .rewrite-actions関連のスタイルは削除されました */

@media (max-width: 768px) {
  .type-language-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .language-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
}

/* ========== 履歴コンテナ ========== */
#historyContainer {
  max-width: 1400px; /* 1500px → 1400px に調整 */
  margin: 1.5rem auto;
  padding: 1.2rem 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: relative;
  z-index: 80; /* テーブルラッパーより下位のレイヤー */
}

#historyContainer h1 {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 12px var(--trust-cta)33;
}

#historyContainer h2 {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin-bottom: 1rem;
}

/* #histMeta の見た目は「メタ情報の改善」ブロック（本ファイル冒頭付近）に統一 */

.hist-table-wrapper tr td[colspan] {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  margin: 1rem 0;
}

/* スクロールバー */
.hist-table-wrapper::-webkit-scrollbar,
.output-box::-webkit-scrollbar {
  width: 8px;
}

.hist-table-wrapper::-webkit-scrollbar-thumb,
.output-box::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 4px;
}

/* 統合履歴のキーワード列（4番目） */
#historyTable th:nth-child(4),
#historyTable td:nth-child(4) {
  max-width: 200px;
  min-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

/* 記事生成履歴のキーワード列（3番目） */
#historyTable th:nth-child(3),
#historyTable td:nth-child(3) {
  max-width: 200px;
  min-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

/* リライト履歴のキーワード列（3番目） */
#historyTable th:nth-child(3),
#historyTable td:nth-child(3) {
  max-width: 200px;
  min-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

/* キーワード列のツールチップスタイル */
#historyTable td:nth-child(3)[title]:not([title=""]),
#historyTable td:nth-child(4)[title]:not([title=""]) {
  cursor: help;
  position: relative;
}

#historyTable td:nth-child(3)[title]:not([title=""]):after,
#historyTable td:nth-child(4)[title]:not([title=""]):after {
  content: "ℹ";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7em;
  color: #666;
  opacity: 0.7;
  font-weight: bold;
}

/* テーブルタイプ別の列スタイル（data-history-mode は HistoryTable.renderHead が設定） */
/* 統合: タイプ, ID, 日時, キーワード(4), 追加指示(5), 商材(6), 文字数, 長さ, 出力, 検証 */
/* 記事: ID, 日時, キーワード(3), 追加指示(4), 商材(5), 文字数(JA/EN)(6), 長さ, 出力 */
/* リライト: ID, 日時, キーワード(3), 追加指示(4), タイプ(5), 商材(6), 文字数(7), 長さ, 出力 */

/* 統合のみ: タイプ別行で列位置が共通の「追加指示」列（5） */
#historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] thead th:nth-child(5),
#historyContainer .hist-table-wrapper #historyTable[data-history-mode="unified"] tbody tr td:nth-child(5) {
  max-width: 200px;
  min-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

/* 記事タブ／リライトタブの追加指示列（4番目） */
#historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] tr.type-article td:nth-child(4),
#historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] thead th:nth-child(4),
#historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] tr.type-rewrite td:nth-child(4),
#historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] thead th:nth-child(4) {
  max-width: 200px;
  min-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

/* 追加指示列（モードごと nth-child が異なるので data-history-mode で限定） */
#historyTable[data-history-mode="unified"] th:nth-child(5),
#historyTable[data-history-mode="unified"] td:nth-child(5),
#historyTable[data-history-mode="articles"] th:nth-child(4),
#historyTable[data-history-mode="articles"] td:nth-child(4),
#historyTable[data-history-mode="rewrites"] th:nth-child(4),
#historyTable[data-history-mode="rewrites"] td:nth-child(4) {
  max-width: 200px;
  min-width: 150px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.4;
  position: relative;
}

#historyTable[data-history-mode="unified"] td:nth-child(5)[title]:not([title=""]),
#historyTable[data-history-mode="articles"] td:nth-child(4)[title]:not([title=""]),
#historyTable[data-history-mode="rewrites"] td:nth-child(4)[title]:not([title=""]) {
  cursor: help;
  position: relative;
}

#historyTable[data-history-mode="unified"] td:nth-child(5)[title]:not([title=""])::after,
#historyTable[data-history-mode="articles"] td:nth-child(4)[title]:not([title=""])::after,
#historyTable[data-history-mode="rewrites"] td:nth-child(4)[title]:not([title=""])::after {
  content: "ℹ";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7em;
  color: #666;
  opacity: 0.7;
  font-weight: bold;
}

#historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] tr.type-article td:nth-child(4)[title]:not([title=""]) {
  cursor: help;
  position: relative;
}

#historyContainer .hist-table-wrapper #historyTable[data-history-mode="articles"] tr.type-article td:nth-child(4)[title]:not([title=""]):after {
  content: "ℹ";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7em;
  color: #666;
  opacity: 0.7;
  font-weight: bold;
}

#historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] tr.type-rewrite td:nth-child(4)[title]:not([title=""]) {
  cursor: help;
  position: relative;
}

#historyContainer .hist-table-wrapper #historyTable[data-history-mode="rewrites"] tr.type-rewrite td:nth-child(4)[title]:not([title=""]):after {
  content: "ℹ";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7em;
  color: #666;
  opacity: 0.7;
  font-weight: bold;
}

/* 文字数（元/リライト or JA/EN）列 — 統合では 7 列目 */
#historyTable[data-history-mode="unified"] th:nth-child(7),
#historyTable[data-history-mode="unified"] td:nth-child(7) {
  max-width: 200px;
  min-width: 150px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.4;
  position: relative;
}

#historyTable[data-history-mode="unified"] td:nth-child(7)[title]:not([title=""]) {
  cursor: help;
  position: relative;
}

#historyTable[data-history-mode="unified"] td:nth-child(7)[title]:not([title=""])::after {
  content: "ℹ";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7em;
  color: #666;
  opacity: 0.7;
  font-weight: bold;
}

#historyTable[data-history-mode="articles"] th:nth-child(6),
#historyTable[data-history-mode="articles"] td:nth-child(6),
#historyTable[data-history-mode="rewrites"] th:nth-child(7),
#historyTable[data-history-mode="rewrites"] td:nth-child(7) {
  max-width: 200px;
  min-width: 150px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.4;
  position: relative;
}

#historyTable[data-history-mode="articles"] td:nth-child(6)[title]:not([title=""]),
#historyTable[data-history-mode="rewrites"] td:nth-child(7)[title]:not([title=""]) {
  cursor: help;
  position: relative;
}

#historyTable[data-history-mode="articles"] td:nth-child(6)[title]:not([title=""])::after,
#historyTable[data-history-mode="rewrites"] td:nth-child(7)[title]:not([title=""])::after {
  content: "ℹ";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7em;
  color: #666;
  opacity: 0.7;
  font-weight: bold;
}

/* 商材（Offering）列 — 一覧表示用 */
#historyTable[data-history-mode="unified"] th:nth-child(6),
#historyTable[data-history-mode="unified"] td:nth-child(6),
#historyTable[data-history-mode="articles"] th:nth-child(5),
#historyTable[data-history-mode="articles"] td:nth-child(5),
#historyTable[data-history-mode="rewrites"] th:nth-child(6),
#historyTable[data-history-mode="rewrites"] td:nth-child(6) {
  max-width: 200px;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

#historyTable[data-history-mode="unified"] td:nth-child(6)[title]:not([title="—"]):not([title=""]),
#historyTable[data-history-mode="articles"] td:nth-child(5)[title]:not([title="—"]):not([title=""]),
#historyTable[data-history-mode="rewrites"] td:nth-child(6)[title]:not([title="—"]):not([title=""]) {
  cursor: help;
  position: relative;
}
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 1.5rem 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.dashboard-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(13, 148, 136, 0.08) 100%);
  border-radius: 20px;
  box-shadow: 
    0 8px 32px rgba(37, 99, 235, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  text-align: center;
  border: 2px solid rgba(37, 99, 235, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--trust-cta), var(--trust-verified-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dashboard-card:hover {
  box-shadow: 
    0 16px 48px rgba(37, 99, 235, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(37, 99, 235, 0.3);
}

.dashboard-card:hover::before {
  opacity: 1;
}

.card-title {
  font-size: 0.85rem;
  color: #6366F1;
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.8;
}

.card-value {
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-cta-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  line-height: 1;
}

/* 管理者ダッシュボード用 パネルスタイル */
.admin-panel {
  text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  border: 1px solid rgba(13, 148, 136, 0.15);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  margin: 0 auto;
  width: 100%;
}

.admin-panel h2 {
  font-size: 2rem;
  font-weight: 900;
  color: #1F2937;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-verified-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-panel h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.admin-panel h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #4B5563;
  margin-bottom: 0.75rem;
}

.admin-panel p {
  color: #6B7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.admin-panel a {
  color: var(--trust-cta);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.admin-panel a:hover {
  color: var(--trust-cta-hover);
  text-decoration: underline;
}

/* チャートセクション */
.chart-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(13, 148, 136, 0.1);
}

.chart-container {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.chart-item {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-item canvas {
  max-width: 100%;
  height: auto;
  max-height: 200px;
}

.error-list-container {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
}

.error-list {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(239, 68, 68, 0.1);
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.85rem;
  text-align: left;
}

/* 最新情報セクション */
.latest-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(13, 148, 136, 0.1);
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.latest-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(13, 148, 136, 0.1);
  text-align: left;
}

.latest-item h4 {
  color: #374151;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.latest-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.latest-item li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(13, 148, 136, 0.1);
  color: #4B5563;
}

.latest-item li:last-child {
  border-bottom: none;
}

/* レスポンシブ対応 - 最適化済み */
@media (max-width: 1200px) {
  .dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
  }
  .dashboard-card {
    padding: 1.5rem 1.25rem 1.25rem 1.25rem;
  }
  .card-value {
    font-size: 2.4rem;
  }
  .admin-panel {
    padding: 1.5rem 1rem;
  }
  .admin-panel h2 {
    font-size: 1.8rem;
  }
  .chart-container {
    gap: 1rem;
  }
  .chart-item,
  .error-list-container {
    min-width: 250px;
    max-width: 350px;
  }
  .chart-item canvas {
    max-height: 180px;
  }
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  .stats-item canvas {
    max-height: 160px;
  }
  .latest-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 900px) {
  .dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }
  .dashboard-card {
    padding: 1.25rem 1rem 1rem 1rem;
  }
  .card-value {
    font-size: 2rem;
  }
  .card-title {
    font-size: 0.8rem;
  }
  .admin-panel {
    padding: 1.25rem 0.75rem;
  }
  .admin-panel h2 {
    font-size: 1.6rem;
  }
  .chart-container {
    gap: 0.75rem;
  }
  .chart-item,
  .error-list-container {
    min-width: 220px;
    max-width: 300px;
  }
  .chart-item canvas {
    max-height: 160px;
  }
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
  }
  .stats-item canvas {
    max-height: 140px;
  }
}

@media (max-width: 768px) {
  .dashboard-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .dashboard-card {
    padding: 1rem 0.75rem 0.75rem 0.75rem;
  }
  .card-value {
    font-size: 1.8rem;
  }
  .card-title {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .admin-panel {
    padding: 1rem 0.5rem;
  }
  .admin-panel h2 {
    font-size: 1.4rem;
  }
  .chart-container {
    flex-direction: column;
    gap: 1rem;
  }
  .chart-item,
  .error-list-container {
    min-width: 100%;
    max-width: 100%;
  }
  .chart-item canvas {
    max-height: 150px;
  }
  .error-list {
    max-height: 150px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .stats-item canvas {
    max-height: 130px;
  }
  .latest-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .chart-section,
  .latest-section {
    padding: 1rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .dashboard-card {
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
  }
  .card-value {
    font-size: 1.6rem;
  }
  .card-title {
    font-size: 0.7rem;
  }
  .admin-panel {
    padding: 0.75rem 0.25rem;
  }
  .admin-panel h2 {
    font-size: 1.2rem;
  }
  .chart-section,
  .latest-section {
    padding: 0.75rem 0.5rem;
  }
  .chart-item canvas {
    max-height: 120px;
  }
  .stats-item canvas {
    max-height: 100px;
  }
  .error-list {
    max-height: 120px;
    font-size: 0.8rem;
  }
}

body.dashboard-mode .login-container {
  max-width: none;
  width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
  border: none;
}

/* リクエスト統計セクション */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.stats-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(13, 148, 136, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-item h4 {
  color: #374151;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.stats-item canvas {
  max-width: 100%;
  height: auto;
  max-height: 180px;
}

.admin-panel a.btn-primary, .admin-panel a.btn-primary:visited {
  background: linear-gradient(135deg, var(--trust-cta), var(--trust-cta-hover));
  color: #fff;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 1rem 2.2rem;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  margin: 0 auto;
}
.admin-panel a.btn-primary:hover {
  background: linear-gradient(135deg, var(--trust-cta-hover), var(--trust-cta));
  color: #fff;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.28);
  transform: translateY(-2px) scale(1.04);
  text-decoration: none;
}
.usage-log-link .material-icons {
  font-size: 1.3em;
  vertical-align: middle;
}

.admin-nav-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.admin-nav-btns .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 48px;
  font-size: 1.08rem;
  padding: 0 2.2rem;
  box-sizing: border-box;
}
.admin-nav-btns .nav-icon {
  font-size: 1.35em;
  margin-right: 0.5em;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
}
@media (max-width: 600px) {
  .admin-nav-btns {
    flex-direction: column;
    gap: 0.8em;
  }
  .admin-nav-btns .btn-primary {
    min-width: 140px;
    width: 100%;
    font-size: 1rem;
    padding: 0 1.2rem;
    height: 44px;
  }
}

/* 部分リライト条件設定エリア */
.rewrite-conditions-section {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 2px solid rgba(37, 99, 235, 0.15);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
  transition: all 0.3s ease;
}

.rewrite-conditions-section:hover {
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.12);
}

.section-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 0.5rem 0;
  text-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
}

.section-description {
  font-size: 0.95rem;
  color: #666;
  font-weight: 500;
}

/* 条件グループ */
.condition-group {
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.condition-group:hover {
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.condition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.condition-header label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95rem;
  margin: 0;
}

/* ステータスインジケーター */
.condition-status {
  display: flex;
  align-items: center;
}

.status-indicator {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.status-indicator.unchanged {
  background: rgba(52, 211, 153, 0.1);
  color: #10b981;
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.status-indicator.changed {
  background: rgba(37, 99, 235, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(37, 99, 235, 0.2);
  animation: pulse 2s infinite;
}

.status-indicator.new {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 条件入力ラッパー */
.condition-input-wrapper {
  position: relative;
}

.condition-input,
.condition-textarea,
.condition-select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid rgba(37, 99, 235, 0.15);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.9);
  color: #2c3e50;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.condition-input:focus,
.condition-textarea:focus,
.condition-select:focus {
  outline: none;
  border-color: var(--trust-cta);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.condition-input:hover,
.condition-textarea:hover,
.condition-select:hover {
  border-color: rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.condition-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

.condition-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
  padding-right: 2.5rem;
}

.condition-textarea.rewrite-specific {
  min-height: 100px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-color: rgba(59, 130, 246, 0.2);
}

.condition-textarea.rewrite-specific:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* 説明文のスタイル */
.instruction-help {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.instruction-help p {
  margin: 0 0 8px 0;
  color: #495057;
}

.instruction-help p:last-child {
  margin-bottom: 0;
}

.instruction-help p:first-child {
  font-weight: 500;
  color: #212529;
}

/* ガイドメッセージのスタイル */
.section-guide {
  margin-bottom: 20px;
}

.guide-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.guide-icon {
  font-size: 24px;
  line-height: 1;
  margin-top: 2px;
}

.guide-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.guide-content p {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6c757d;
}

.guide-content p:last-child {
  margin-bottom: 0;
}

/* 元記事情報エリアのスタイル */
.original-article-section {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.original-article-section .section-header h3 {
  color: #495057;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.original-article-section .section-description {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 16px;
}

/* 読み取り専用フィールドのスタイル */
.condition-group.readonly {
  opacity: 0.8;
}

.condition-group.readonly .condition-input,
.condition-group.readonly .condition-textarea,
.condition-group.readonly .condition-select {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #495057;
  cursor: not-allowed;
}

.condition-group.readonly .condition-input:focus,
.condition-group.readonly .condition-textarea:focus,
.condition-group.readonly .condition-select:focus {
  border-color: #dee2e6;
  box-shadow: none;
}

.status-indicator.readonly {
  background-color: #6c757d;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 元の値表示 */
.original-value {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 8px;
  font-size: 0.85rem;
  color: #666;
  transition: all 0.3s ease;
}

.original-value.show {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.original-label {
  font-weight: 600;
  color: #f59e0b;
  margin-right: 0.5rem;
}

.original-text {
  color: #666;
  font-style: italic;
}

/* 指示例 */
.instruction-examples {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.03);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 8px;
}

.example-item {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}

.example-item:last-child {
  margin-bottom: 0;
}

.example-item strong {
  color: #3b82f6;
  font-weight: 600;
}

/* フィードバック */
.rewrite-conditions-section .feedback {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #666;
  text-align: right;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .rewrite-conditions-section {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .condition-group {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .condition-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .section-header h3 {
    font-size: 1.1rem;
  }
  
  .condition-input,
  .condition-textarea,
  .condition-select {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
}

/* 希望文字数ラジオボタングループ */
.length-radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.length-radio-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(37, 99, 235, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  position: relative;
}

.length-radio-btn:hover {
  border-color: rgba(37, 99, 235, 0.3);
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.length-radio-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-custom {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(37, 99, 235, 0.3);
  border-radius: 50%;
  background: white;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.length-radio-btn input[type="radio"]:checked + .radio-custom {
  border-color: var(--trust-cta);
  background: var(--trust-cta);
}

.length-radio-btn input[type="radio"]:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.radio-label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95rem;
}

.radio-desc {
  font-size: 0.8rem;
  color: #666;
  font-weight: 400;
}

.length-radio-btn input[type="radio"]:checked ~ .radio-label {
  color: var(--trust-cta);
}

.length-radio-btn input[type="radio"]:checked ~ .radio-desc {
  color: #f59e0b;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .length-radio-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .length-radio-btn {
    min-width: auto;
    padding: 0.625rem 0.875rem;
  }
  
  .radio-label {
    font-size: 0.9rem;
  }
  
  .radio-desc {
    font-size: 0.75rem;
  }
}

/* 部分リライト結果表示モーダル */
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(20px);
  z-index: 2000;
  overflow: hidden;
  animation: modalSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.result-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  width: 100%;
}

/* 結果ヘッダー */
.result-header {
  background: linear-gradient(135deg, var(--trust-cta) 0%, var(--trust-cta-hover) 100%);
  color: white;
  padding: 2rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
  flex-shrink: 0;
}

.result-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.result-header h2 {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.result-summary {
  display: flex;
  justify-content: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.summary-label {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 500;
}

.summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 処理時間の表示スタイル改善 */
.summary-value.processing-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
}

.summary-value.processing-time.saved {
  color: #10b981;
  font-weight: 600;
}

.summary-value.processing-time.saved::before {
  content: "❌";
  font-size: 1rem;
}

.summary-value.processing-time.live {
  color: #f59e0b;
  font-weight: 600;
}

.summary-value.processing-time.live::before {
  content: "⚡";
  font-size: 1rem;
}

/* 結果ナビゲーション */
.result-navigation {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(37, 99, 235, 0.2);
  padding: 0 2rem;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: #666;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border-bottom: 3px solid transparent;
}

.nav-btn:hover {
  color: var(--trust-cta);
  background: rgba(37, 99, 235, 0.05);
}

.nav-btn.active {
  color: var(--trust-cta);
  border-bottom-color: var(--trust-cta);
}

.nav-icon {
  font-size: 1.1rem;
}

/* 結果コンテンツ */
.result-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding: 0 1rem;
}

.result-content::-webkit-scrollbar {
  width: 12px;
}

.result-content::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 6px;
  margin: 0.5rem 0;
}

.result-content::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 6px;
  border: 2px solid #f8f9fa;
}

.result-content::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.result-view {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 2rem;
}

.result-view.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 概要ビュー */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
  min-height: 200px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
}

.stat-icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
  border-radius: 12px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.overview-preview {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
}

.overview-preview h3 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}

.preview-container {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  min-height: 300px;
}

/* 履歴ページでは統計データプレビューを非表示 */
body:is(.page-history, .history-page) .insert-preview {
  display: none;
}

/* 履歴ページでも部分リライト結果モーダルのプレビューは表示 */
body:is(.page-history, .history-page) .overview-preview .preview-container {
  display: block;
}

.preview-content {
  font-family: 'Inter', 'Noto Sans JP', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #2c3e50;
  white-space: pre-wrap;
}

/* 比較ビュー */
.comparison-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.comparison-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-radius: 12px;
  color: #555;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.comparison-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.comparison-btn:hover::before {
  left: 100%;
}

.comparison-btn:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.4);
}

.comparison-btn.active {
  background: var(--trust-cta);
  color: white;
  border-color: var(--trust-cta);
}

.comparison-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  height: 700px;
  margin-top: 1.5rem;
  padding: 0 1rem;
  min-height: 500px;
}

.comparison-panel {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.panel-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
}

.char-count {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem;
  font-family: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2c3e50;
  white-space: pre-wrap;
  background: #ffffff;
}

.panel-content::-webkit-scrollbar {
  width: 10px;
}

.panel-content::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 5px;
}

.panel-content::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 5px;
  border: 2px solid #f8f9fa;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* セクション詳細ビュー */
.sections-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(37, 99, 235, 0.2);
}

.sections-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}



.sections-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* 世界最高水準のレイアウト: 適切なスペーシング */
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
  padding-bottom: 2rem;
}

.sections-list::-webkit-scrollbar {
  width: 10px;
}

.sections-list::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 5px;
}

.sections-list::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 5px;
  border: 2px solid #f8f9fa;
}

.sections-list::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.section-detail-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  /* 世界最高水準のレイアウト: 適切な高さ管理 */
  min-height: 300px;
  position: relative;
}

.section-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.3);
}

.section-content-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
}

.section-content-text:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.section-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
  position: relative;
}

.section-detail-title {
  font-weight: 700;
  color: #1a202c;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.section-detail-status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.section-detail-status.updated {
  background: rgba(52, 211, 153, 0.1);
  color: #10b981;
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.section-detail-status.unchanged {
  background: rgba(156, 163, 175, 0.1);
  color: #6b7280;
  border: 1px solid rgba(156, 163, 175, 0.2);
}

.section-detail-content {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  /* 世界最高水準のレイアウト: 適切なスペーシング */
  min-height: 200px;
  align-items: start;
}

.section-content-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  /* 世界最高水準のレイアウト: 適切な高さ管理 */
  min-height: 200px;
  max-height: none;
  overflow: visible;
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-content-panel h4 {
  margin: 0 0 1rem 0;
  color: #1a202c;
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.section-content-text {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2c3e50;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 1rem;
  position: relative;
  box-sizing: border-box;
  height: auto;
  display: block;
  overflow: visible;
  margin-top: 1rem;
  border: 1px solid rgba(224, 224, 224, 0.6);
  border-radius: 8px;
  background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
  /* 世界最高水準のレイアウト: 適切なテキスト表示 */
  min-height: 120px;
  max-height: none;
  overflow-y: visible;
  flex: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* スクロールバー関連スタイルを完全削除 - 全テキスト表示のため不要 */



/* スクロール可能コンテンツ用のクラスを削除 - 全テキスト表示のため不要 */

/* 重複したスクロールバースタイルを削除 - 全テキスト表示のため不要 */

/* フローティングアクション関連のスタイルは削除されました */

/* 履歴ページ全体のレイヤー設定 */
body:is(.page-history, .history-page) {
  position: relative;
  z-index: 60; /* 履歴レイアウトより下位のレイヤー */
}

/* .detail-controls関連のスタイルは削除されました */



/* 重複した定義を削除 - 上記の定義が優先される */

/* 結果アクション */
.result-actions {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(37, 99, 235, 0.2);
  justify-content: flex-end;
  flex-shrink: 0;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border: 2px solid;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(37, 99, 235, 0.3);
  color: #666;
}

.action-btn.secondary:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.5);
  color: var(--trust-cta);
  transform: translateY(-1px);
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--trust-cta) 0%, var(--trust-cta-hover) 100%);
  border-color: var(--trust-cta);
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}

.btn-icon {
  font-size: 1rem;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .result-modal {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
  }
  
  .comparison-container {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 600px;
  }
  
  .section-detail-content {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  
  .section-content-panel {
    max-height: 500px; /* 高さ制限を緩和 */
  }
  
  .section-content-text {
    max-height: 350px;
    height: auto;
    display: block;
    overflow-x: hidden;
  }
  
  .sections-list {
    max-height: 600px;
  }
  
  .diff-content {
    max-height: 600px;
  }
}

@media (max-width: 768px) {
  .result-modal {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
  }
  
  .result-header {
    padding: 1.5rem 1rem;
  }
  
  .result-header h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .result-summary {
    flex-direction: column;
    gap: 1.25rem;
  }
  
  .result-navigation {
    padding: 0 1rem;
  }
  
  .nav-btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
  }
  
  .result-view {
    padding: 1.25rem;
  }
  
  .overview-stats {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .comparison-container {
    gap: 1.5rem;
    height: auto;
    min-height: 500px;
  }
  
  .sections-list {
    max-height: 500px;
  }
  
  .diff-content {
    max-height: 500px;
  }
  
  .section-detail-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .section-content-panel {
    /* 世界最高水準のレイアウト: モバイル最適化 */
    min-height: 150px;
    max-height: none;
    padding: 1rem;
  }
  
  .section-content-text {
    /* 世界最高水準のレイアウト: モバイル最適化 */
    min-height: 100px;
    max-height: none;
    height: auto;
    display: block;
    overflow: visible;
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  .section-content-panel h4 {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }
  
  .section-content-text {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  
  .result-actions {
    flex-direction: column;
    padding: 1.25rem;
    gap: 1rem;
  }
  
  .action-btn {
    justify-content: center;
    padding: 1.125rem 1.5rem;
  }
}

/* ========== 部分リライト結果モーダル改善 ========== */

/* フォントとタイポグラフィの改善 */
.result-modal {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.result-modal h2,
.result-modal h3,
.result-modal h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

.result-modal h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.result-modal h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.result-modal h4 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* パネルテキストの改善 */
.panel-text {
  font-family: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2c3e50;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
  max-height: 400px;
  overflow-y: auto;
}

.panel-text::-webkit-scrollbar {
  width: 8px;
}

.panel-text::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
}

.panel-text::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.panel-text::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* 差分表示スタイル */
.diff-container {
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.diff-header {
  display: flex;
  background: #343a40;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.diff-label {
  flex: 1;
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.diff-label.original {
  background: rgba(220, 53, 69, 0.8);
  margin-right: 0.5rem;
}

.diff-label.result {
  background: rgba(40, 167, 69, 0.8);
  margin-left: 0.5rem;
}

.diff-content {
  max-height: 700px;
  overflow-y: auto;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.diff-lines {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.diff-content::-webkit-scrollbar {
  width: 12px;
}

.diff-content::-webkit-scrollbar-track {
  background: #f1f3f4;
  border-radius: 6px;
}

.diff-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
  border: 2px solid #f1f3f4;
}

.diff-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.diff-line {
  padding: 0.25rem 0.5rem;
  margin: 0.125rem 0;
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-line.unchanged {
  background: #ffffff;
  color: #495057;
  border-left: 3px solid #dee2e6;
}

.diff-line.added {
  background: rgba(34, 197, 94, 0.2);
  color: #166534;
  border-left: 4px solid #22c55e;
  font-weight: 600;
  position: relative;
}

.diff-line.added::before {
  content: '+';
  color: #22c55e;
  font-weight: bold;
  margin-right: 0.5rem;
}

.diff-line.removed {
  background: rgba(239, 68, 68, 0.2);
  color: #991b1b;
  border-left: 4px solid #ef4444;
  font-weight: 600;
  text-decoration: line-through;
  opacity: 0.9;
  position: relative;
}

.diff-line.removed::before {
  content: '-';
  color: #ef4444;
  font-weight: bold;
  margin-right: 0.5rem;
}

.diff-error {
  padding: 2rem;
  text-align: center;
  color: #721c24;
  background: #f8d7da;
  border-radius: 8px;
  border: 1px solid #f5c6cb;
}



/* 比較ボタンのアクティブ状態 */
.comparison-btn.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.comparison-btn.active:hover {
  background: var(--color-accent);
  color: white;
}

/* ========== 部分リライト統計スタイル ========== */
.section-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.section-stat-card {
  background: linear-gradient(135deg, #F9F6F2 0%, #E6E1D9 100%);
  border: 2px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
  transition: all 0.3s ease;
}

.section-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.4);
}

.section-stat-card h4 {
  color: var(--color-accent3);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-align: center;
  letter-spacing: 0.02em;
}

.section-stat-card .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

.section-stat-card .stat-item:last-child {
  border-bottom: none;
}

.section-stat-card .stat-label {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
}

.section-stat-card .stat-value {
  color: var(--color-accent3);
  font-size: 1rem;
  font-weight: 700;
  background: rgba(79, 70, 229, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(79, 70, 229, 0.2);
}

@media (max-width: 768px) {
  .section-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .section-stat-card {
    padding: 1rem;
  }
  
  .section-stat-card h4 {
    font-size: 1rem;
  }
  
  .section-stat-card .stat-item {
    padding: 0.5rem 0;
  }
  
  .section-stat-card .stat-label {
    font-size: 0.9rem;
  }
  
  .section-stat-card .stat-value {
    font-size: 0.9rem;
    padding: 0.2rem 0.5rem;
  }
}



#statDataCreateModal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

#statDataCreateModal .form-row.full-width {
  grid-template-columns: 1fr;
}

#statDataCreateModal .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

#statDataCreateModal .form-group label {
  font-weight: 700;
  color: #2c3e50;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

#statDataCreateModal .form-group input,
#statDataCreateModal .form-group select,
#statDataCreateModal .form-group textarea {
  padding: 1rem 1.25rem;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#statDataCreateModal .form-group input:focus,
#statDataCreateModal .form-group select:focus,
#statDataCreateModal .form-group textarea:focus {
  border-color: #e74c3c;
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.15);
  outline: none;
  transform: translateY(-1px);
}

#statDataCreateModal .form-group input:hover,
#statDataCreateModal .form-group select:hover,
#statDataCreateModal .form-group textarea:hover {
  border-color: #ced4da;
}

#statDataCreateModal .form-group textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}

#statDataCreateModal .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}

#statDataCreateModal .btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

#statDataCreateModal .btn-secondary:hover {
  background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

#statDataCreateModal .btn-primary {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

#statDataCreateModal .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
}

#statDataCreateModal .btn-icon {
  font-size: 1.1rem;
}

/* 統計データ作成モーダルの改善されたスタイル */
.form-section {
  margin-bottom: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  border: 2px solid #e9ecef;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.form-section:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
  border-color: #dee2e6;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 2rem 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%);
  border-radius: 10px;
  border-left: 4px solid #e74c3c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group.required label::after {
  content: ' *';
  color: #e74c3c;
  font-weight: bold;
  margin-left: 4px;
  font-size: 1.1em;
}

/* フィードバック表示エリア */
.field-feedback {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  min-height: 1.2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.field-feedback.success {
  color: #27ae60;
  background: rgba(39, 174, 96, 0.1);
  border-left: 4px solid #27ae60;
  padding: 0.5rem 0.75rem;
  border-radius: 0 6px 6px 0;
  font-weight: 500;
}

.field-feedback.error {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  border-left: 4px solid #e74c3c;
  padding: 0.5rem 0.75rem;
  border-radius: 0 6px 6px 0;
  font-weight: 500;
}

.field-feedback.warning {
  color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
  border-left: 4px solid #f39c12;
  padding: 0.5rem 0.75rem;
  border-radius: 0 6px 6px 0;
  font-weight: 500;
}

/* チェックボックスグループの改善（シンプル版） */
.checkbox-group {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: #495057;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.checkbox-label:hover {
  background: rgba(231, 76, 60, 0.05);
  border-color: rgba(231, 76, 60, 0.2);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 0.75rem;
  accent-color: #e74c3c;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"]:checked + span {
  color: #e74c3c;
  font-weight: 600;
}

/* フォームアクションの改善 */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #f0f2f5;
}

.form-actions-left,
.form-actions-right {
  display: flex;
  gap: 1rem;
}

/* 進捗表示エリア */
.form-progress {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  display: none;
}

.form-progress.show {
  display: block;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.progress-text {
  text-align: center;
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

/* ========== 統計データ検索・選択モーダル ========== */
#statDataSearchModal {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 1000px;
  width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#statDataSearchModal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.stat-search-container {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stat-search-header {
  background: linear-gradient(135deg, var(--color-accent2) 0%, #00b894 100%);
  color: white;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.stat-search-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.stat-search-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stat-search-badges .badge {
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.stat-search-badges .badge.primary {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.stat-search-badges .badge.secondary {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

#statDataSearchModal .search-filters {
  background: #f8f9fa;
  padding: 1.5rem 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid #e9ecef;
}

#statDataSearchModal .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 150px;
}

#statDataSearchModal .filter-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#statDataSearchModal .search-input,
#statDataSearchModal .search-select {
  padding: 0.5rem 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  background: white;
}

#statDataSearchModal .search-input:focus,
#statDataSearchModal .search-select:focus {
  border-color: var(--color-accent2);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
  outline: none;
}

#statDataSearchModal .search-input:hover,
#statDataSearchModal .search-select:hover {
  border-color: #ced4da;
}

#statDataSearchModal .favorite-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

#statDataSearchModal .favorite-filter:hover {
  background: rgba(255, 193, 7, 0.1);
}

#statDataSearchModal .filter-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  text-transform: none;
  letter-spacing: normal;
}

#statDataSearchModal .stat-data-grid {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  background: white;
}

#statDataSearchModal .search-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #6c757d;
}

#statDataSearchModal .search-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--color-accent2);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

#statDataSearchModal .search-loading p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

#statDataSearchModal .search-actions {
  background: #f8f9fa;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  border-top: 1px solid #e9ecef;
}

#statDataSearchModal .btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

#statDataSearchModal .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

#statDataSearchModal .btn-primary {
  background: linear-gradient(135deg, var(--color-accent2) 0%, #00b894 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#statDataSearchModal .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);
}

#statDataSearchModal .btn-primary:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

#statDataSearchModal .btn-icon {
  font-size: 1.1rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  #statDataCreateModal,
  #statDataSearchModal {
    width: 95vw;
    max-height: 95vh;
  }
  
  #statDataCreateModal .stat-create-header,
  #statDataSearchModal .stat-search-header {
    padding: 1rem 1.5rem;
  }
  
  #statDataCreateModal .stat-data-form,
  #statDataSearchModal .stat-data-grid {
    padding: 1.5rem;
  }
  
  #statDataCreateModal .form-row,
  #statDataSearchModal .search-filters {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem 1.5rem;
  }
  
  #statDataCreateModal .form-actions,
  #statDataSearchModal .search-actions {
    padding: 1rem 1.5rem;
    flex-direction: column;
  }
  
  #statDataCreateModal .btn-secondary,
  #statDataCreateModal .btn-primary,
  #statDataSearchModal .btn-secondary,
  #statDataSearchModal .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #statDataCreateModal .stat-create-title,
  #statDataSearchModal .stat-search-title {
    font-size: 1.25rem;
  }
  
  #statDataCreateModal .stat-create-badges,
  #statDataSearchModal .stat-search-badges {
    gap: 0.25rem;
  }
  
  #statDataCreateModal .stat-create-badges .badge,
  #statDataSearchModal .stat-search-badges .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}

.data-details {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #666;
}

.data-region, .data-source {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.data-actions {
  display: flex;
  gap: 0.5rem;
}

.insert-btn {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #007bff;
  background: #fff;
  color: #007bff;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.insert-btn:hover {
  background: #007bff;
  color: #fff;
}

/* フッター */
.stat-insert-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

.footer-info {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: #666;
}

.char-count, .insertion-count {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.footer-actions {
  display: flex;
  gap: 0.75rem;
}

/* ========== エディタの行単位編集 ========== */
.editor-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 100%;
}

.editor-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.editor-line:hover {
  border-color: #e0e0e0;
  background: #f8f9fa;
}

.editor-line.focused {
  border-color: #007bff;
  background: #f0f8ff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.line-number {
  flex-shrink: 0;
  width: 2rem;
  text-align: right;
  font-size: 0.8rem;
  color: #999;
  padding-top: 0.25rem;
  user-select: none;
}

.line-content {
  flex: 1;
  min-height: 1.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease;
  white-space: pre-wrap;
  word-break: break-word;
}

.line-content:focus {
  border-color: #007bff;
  background: #fff;
}

.line-content:empty::before {
  content: "ここにテキストを入力...";
  color: #ccc;
  font-style: italic;
}

.line-content[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #ccc;
  font-style: italic;
}

.line-content.graph-content {
  padding: 0;
  min-height: auto;
  overflow: hidden;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin: 0.5rem 0;
}

.line-content.graph-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.line-content.graph-content .chart-container {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fafafa;
}

.editor-line.graph-line {
  background: #f8f9fa;
  border-radius: 6px;
  margin: 0.25rem 0;
}

.editor-line.graph-line .line-content {
  padding: 0.5rem;
  min-height: 60px;
}

.editor-line.graph-line .line-number {
  background: #e9ecef;
  color: #6c757d;
}

.line-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.editor-line:hover .line-actions {
  opacity: 1;
}

.line-action-btn {
  padding: 0.25rem;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.line-action-btn:hover {
  border-color: #007bff;
  background: #f0f8ff;
}

.line-action-btn .icon {
  font-size: 0.9rem;
}

/* ドロップゾーンのスタイル */
.editor-line.drop-hover {
  border-color: #28a745;
  background: #f8fff9;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

.editor-line.drop-hover::after {
  content: "ここにドロップ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #28a745;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 10;
}

/* プレビューモード */
.preview-content {
  padding: 1rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  line-height: 1.6;
}

.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6 {
  margin: 1rem 0 0.5rem 0;
  color: #333;
}

.preview-content p {
  margin: 0.5rem 0;
}

.preview-content strong {
  font-weight: 600;
}

.preview-content em {
  font-style: italic;
}

.preview-content a {
  color: #007bff;
  text-decoration: none;
}

.preview-content a:hover {
  text-decoration: underline;
}

/* ローディング状態 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #666;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

/* レスポンシブ対応 */
@media (max-width: 1200px) {
  #statInsertModal {
    width: 95vw;
    height: 90vh;
  }
  
  .stat-insert-main {
    flex-direction: column;
  }
  
  .stat-palette-panel {
    width: 100%;
    height: 300px;
  }
  
  .article-editor-panel {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
}

@media (max-width: 768px) {
  .stat-insert-header {
    padding: 1rem;
  }
  
  .stat-insert-header h2 {
    font-size: 1.2rem;
  }
  
  .stat-insert-badges {
    display: none;
  }
  
  .editor-toolbar {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .toolbar-group {
    width: 100%;
    justify-content: center;
  }
  
  .footer-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ========== 統計データ挿入エディタ - 認証関連スタイル ========== */
.data-error {
  text-align: center;
  padding: 2rem;
  color: #e74c3c;
}

.data-error button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.data-auth-required {
  text-align: center;
  padding: 2rem;
  color: #f39c12;
}

.data-auth-required p {
  margin: 0.5rem 0;
}

.auth-required-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.auth-required-actions button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.auth-required-actions button {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.auth-required-actions button:hover {
  background: var(--color-accent3);
  transform: translateY(-1px);
}

/* ========== セクション別指示エリアのスタイル ========== */
.section-specific-instructions-area {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-card);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.section-specific-instructions-area:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
}

.section-specific-instructions-container {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-specific-instructions-info {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(37, 99, 235, 0.05);
  border-radius: 8px;
  border-left: 4px solid var(--color-accent);
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-icon {
  font-size: 1.1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.info-text {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.4;
}

/* セクション別指示フォームのスタイル */
.section-specific-instruction-form {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.section-specific-instruction-form:hover {
  border-color: rgba(79, 70, 229, 0.4);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

.section-specific-instruction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(79, 70, 229, 0.1);
}

.section-specific-instruction-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.section-specific-instruction-remove {
  background: rgba(244, 67, 54, 0.1);
  color: #d32f2f;
  border: 1px solid rgba(244, 67, 54, 0.2);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.section-specific-instruction-remove:hover {
  background: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.4);
}

.section-specific-instruction-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.section-specific-instruction-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section-specific-instruction-field.full-width {
  grid-column: 1 / -1;
}

.section-specific-instruction-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.section-specific-instruction-field input,
.section-specific-instruction-field textarea,
.section-specific-instruction-field select {
  padding: 0.75rem;
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
}

.section-specific-instruction-field input:focus,
.section-specific-instruction-field textarea:focus,
.section-specific-instruction-field select:focus {
  outline: none;
  border-color: var(--color-accent3);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.section-specific-instruction-field textarea {
  resize: vertical;
  min-height: 80px;
}

.section-specific-instruction-field .char-count {
  font-size: 0.8rem;
  color: #666;
  text-align: right;
  margin-top: 0.25rem;
}

.section-specific-instruction-field .char-count.error {
  color: #d32f2f;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section-specific-instructions-area {
    margin-top: 1.5rem;
    padding: 1rem;
  }
  
  .section-specific-instruction-form {
    padding: 1rem;
  }
  
  .section-specific-instruction-fields {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .section-specific-instruction-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .section-specific-instruction-title {
    font-size: 1rem;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .info-icon {
    margin-top: 0;
  }
}

/* ========== セクション別指示機能の手がかりメッセージ ========== */
.section-specific-hint {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.section-specific-hint:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
  border-color: rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.hint-content {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.hint-icon {
  font-size: 1.1em;
  color: var(--color-accent);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.hint-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #2c3e50;
  flex: 1;
}

.hint-text strong {
  color: var(--color-accent);
  font-weight: 600;
}

.hint-link {
  background: none;
  border: none;
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-family: inherit;
  transition: color 0.2s ease;
}

.hint-link:hover {
  color: #e67e22;
  text-decoration: none;
}

.hint-link:focus {
  outline: 2px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .section-specific-hint {
    margin-top: 0.5rem;
    padding: 0.5rem;
  }
  
  .hint-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .hint-icon {
    margin-top: 0;
  }
  
  .hint-text {
    font-size: 0.85rem;
  }
}

/* ========== 統計データ選択セクション用スタイル ========== */
.stat-data-selection-area {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.stat-data-selection-area:hover {
  border-color: #8b5cf6;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}

.stat-data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-add-stat-data {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #8b5cf6;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.btn-add-stat-data:hover {
  background: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.btn-add-stat-data:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

.stat-data-counter {
  background: white;
  color: #6b7280;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-data-counter span {
  color: #8b5cf6;
  font-weight: 700;
}

.selected-stat-data-list {
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  padding: 1rem;
}

.stat-data-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: #9ca3af;
  font-size: 0.9rem;
  text-align: center;
}

.stat-data-empty::before {
  content: "📊";
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.stat-data-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.stat-data-item:last-child {
  margin-bottom: 0;
}

.stat-data-item:hover {
  background: #e9ecef;
  border-color: #8b5cf6;
}

.stat-data-info {
  flex: 1;
  min-width: 0;
}

.stat-data-title {
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-data-details {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #6b7280;
  flex-wrap: wrap;
}

.stat-data-value {
  font-weight: 600;
  color: #8b5cf6;
}

.stat-data-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.stat-data-btn {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-data-btn.remove {
  background: #ef4444;
  color: white;
}

.stat-data-btn.remove:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.insertion-type-selection {
  margin-top: 1.5rem;
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.insertion-type-selection label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  display: block;
}

.insertion-type-selection .radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.insertion-type-selection .radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.insertion-type-selection .radio-option:hover {
  background: #f3f4f6;
}

.insertion-type-selection .radio-option input[type="radio"] {
  margin: 0;
}

.insertion-type-selection .radio-option span {
  font-size: 0.9rem;
  color: #374151;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .stat-data-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .btn-add-stat-data {
    justify-content: center;
  }
  
  .stat-data-counter {
    text-align: center;
  }
  
  .stat-data-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .stat-data-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .insertion-type-selection .radio-group {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ========== 統計データ挿入機能用スタイル (MVPでは非表示) ========== */
.stat-data-insertion-area {
  /* MVPでは非表示 */
  display: none;
  visibility: hidden;
  /* 元のスタイル（将来の拡張用に保持） */
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
  /* スクロール制御 */
  overflow: hidden;
}

.stat-data-insertion-area:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}

.stat-data-insertion-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.stat-data-insertion-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stat-data-insertion-icon {
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
}

.stat-data-insertion-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.stat-data-insertion-desc {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0;
  font-style: italic;
}

.stat-data-insertion-content {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 #f8f9fa;
}

/* Webkit系ブラウザ用のスクロールバースタイル */
.stat-data-insertion-content::-webkit-scrollbar {
  width: 8px;
}

.stat-data-insertion-content::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
}

.stat-data-insertion-content::-webkit-scrollbar-thumb {
  background: #dee2e6;
  border-radius: 4px;
}

.stat-data-insertion-content::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

.stat-data-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  /* スクロール制御 */
  position: relative;
  z-index: 1;
}

.stat-data-item:last-child {
  margin-bottom: 0;
}

.stat-data-info {
  flex: 1;
}

.stat-data-title {
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
}

.stat-data-details {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.stat-data-value {
  font-weight: 600;
  color: var(--color-accent);
}

.stat-data-actions {
  display: flex;
  gap: 0.5rem;
}

.stat-data-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-data-btn.insert {
  background: var(--color-accent);
  color: white;
}

.stat-data-btn.insert:hover {
  background: #e69a3d;
  transform: translateY(-1px);
}

.stat-data-btn.remove {
  background: #dc3545;
  color: white;
}

.stat-data-btn.remove:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.stat-data-empty {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
}

.stat-data-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.stat-data-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.stat-data-empty-actions {
  margin-top: 1rem;
  text-align: center;
}

.stat-data-empty-actions .stat-data-btn {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-data-empty-actions .stat-data-btn:hover {
  background: #e67e22;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 154, 61, 0.3);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .stat-data-insertion-area {
    padding: 1rem;
    margin: 1rem 0;
  }

  .stat-data-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .stat-data-details {
    flex-direction: column;
    gap: 0.25rem;
  }

  .stat-data-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* より細かいレスポンシブ対応を追加 */
@media (max-width: 600px) {
  .stat-data-insertion-area {
    padding: 0.75rem;
    margin: 0.75rem 0;
    border-radius: 8px;
  }

  .stat-data-insertion-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .stat-data-insertion-header-left {
    width: 100%;
    justify-content: space-between;
  }

  .stat-data-insertion-title {
    font-size: 1rem;
  }

  .stat-data-insertion-desc {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .stat-data-item {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .stat-data-title {
    font-size: 0.9rem;
  }

  .stat-data-details {
    font-size: 0.8rem;
  }

  .stat-data-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    min-width: 60px;
  }

  .stat-data-actions {
    gap: 0.4rem;
  }
}

@media (max-width: 480px) {
  .stat-data-insertion-area {
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 6px;
  }

  .stat-data-insertion-header {
    gap: 0.4rem;
  }

  .stat-data-insertion-icon {
    font-size: 1.2rem;
  }

  .stat-data-insertion-title {
    font-size: 0.95rem;
  }

  .stat-data-insertion-desc {
    font-size: 0.75rem;
  }

  .stat-data-item {
    padding: 0.6rem;
    gap: 0.6rem;
  }

  .stat-data-title {
    font-size: 0.85rem;
  }

  .stat-data-details {
    font-size: 0.75rem;
    gap: 0.2rem;
  }

  .stat-data-btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.75rem;
    min-width: 50px;
  }

  .stat-data-actions {
    gap: 0.3rem;
  }

  .stat-data-empty {
    padding: 1.5rem 1rem;
  }

  .stat-data-empty-icon {
    font-size: 1.5rem;
  }

  .stat-data-empty p {
    font-size: 0.8rem;
  }
}

/* タブレット向けの最適化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .stat-data-insertion-area {
    padding: 1.25rem;
    margin: 1.25rem 0;
  }

  .stat-data-insertion-header {
    gap: 1rem;
  }

  .stat-data-item {
    padding: 1rem;
    gap: 1rem;
  }

  .stat-data-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* 大画面向けの最適化 */
@media (min-width: 1025px) {
  .stat-data-insertion-area {
    padding: 1.75rem;
    margin: 1.75rem 0;
  }

  .stat-data-insertion-header {
    gap: 1rem;
  }

  .stat-data-item {
    padding: 1.25rem;
    gap: 1.25rem;
  }

  .stat-data-btn {
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
  }

  .stat-data-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

/* ダークモード対応（将来の拡張用） */
@media (prefers-color-scheme: dark) {
  .stat-data-insertion-area {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border-color: #4a5568;
  }

  .stat-data-insertion-title {
    color: #e2e8f0;
  }

  .stat-data-insertion-desc {
    color: #a0aec0;
  }

  .stat-data-title {
    color: #e2e8f0;
  }

  .stat-data-details {
    color: #a0aec0;
  }

  .stat-data-empty {
    color: #a0aec0;
  }
}

/* アクセシビリティ向上 */
.stat-data-insertion-area:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(230, 154, 61, 0.1);
}

.stat-data-btn:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* アニメーション改善 */
.stat-data-insertion-area {
  animation: fadeInSlideUp 0.4s ease-out;
}

@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-data-item {
  animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ホバー効果の改善 */
.stat-data-insertion-area:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.stat-data-item:hover {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ローディング状態のスタイル */
.stat-data-insertion-area.loading {
  opacity: 0.7;
  pointer-events: none;
}

.stat-data-insertion-area.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 成功・エラー状態のスタイル */
.stat-data-insertion-area.success {
  border-color: #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.stat-data-insertion-area.error {
  border-color: #ef4444;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

/* 印刷対応 */
@media print {
  .stat-data-insertion-area {
    background: white;
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  .stat-data-btn {
    display: none;
  }
}

/* ========== Modal Styles ========== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
}

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

.modal .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 1001;
}

.modal .close:hover,
.modal .close:focus {
  color: #000;
  text-decoration: none;
}

.modal h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
}

/* モーダル内のフォーム要素のスクロール対応 */
.modal .stat-data-form {
  max-height: calc(80vh - 120px);
  overflow-y: auto;
  padding-right: 10px;
}

/* モーダル内のテキストエリアのスクロール確保 */
.modal textarea {
  resize: vertical;
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
}

.modal textarea::-webkit-scrollbar {
  width: 6px;
}

.modal textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.modal textarea::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.modal textarea::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.modal .stat-data-form::-webkit-scrollbar {
  width: 8px;
}

.modal .stat-data-form::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.modal .stat-data-form::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.modal .stat-data-form::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .modal-content {
    margin: 10% auto;
    width: 95%;
    max-height: 85vh;
    padding: 15px;
  }
  
  .modal .stat-data-form {
    max-height: calc(85vh - 100px);
  }
}

@media (max-width: 480px) {
  .modal-content {
    margin: 15% auto;
    width: 98%;
    max-height: 90vh;
    padding: 10px;
  }
  
  .modal .stat-data-form {
    max-height: calc(90vh - 80px);
  }
  
  .modal h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
}

/* ========== カスタム統計データセクション ========== */
.custom-stat-data-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-card);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.custom-stat-data-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent2) 50%, var(--color-accent3) 100%);
  opacity: 0.8;
}

.custom-stat-data-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.15);
  border-color: var(--color-accent);
}

.custom-stat-data-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.custom-stat-data-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.custom-stat-data-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
  transition: all 0.3s ease;
}

.custom-stat-data-section:hover .custom-stat-data-icon {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.4);
}

.custom-stat-data-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.custom-stat-data-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge {
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.badge-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, #ff9f43 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.badge-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.badge-secondary {
  background: linear-gradient(135deg, var(--color-accent2) 0%, #00b894 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.badge-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);
}

.custom-stat-data-description {
  margin-bottom: 1.5rem;
}

.custom-stat-data-description p {
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

.custom-stat-data-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.action-card {
  background: white;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover::before {
  opacity: 1;
}

.action-card-primary {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}

.action-card-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25);
  border-color: #ff9f43;
}

.action-card-secondary {
  border-color: var(--color-accent2);
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.15);
}

.action-card-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(13, 148, 136, 0.25);
  border-color: #00b894;
}

.action-card-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.action-card:hover .action-card-icon {
  transform: scale(1.1) rotate(5deg);
}

.action-card-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.action-card-content p {
  font-size: 0.875rem;
  color: #6c757d;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  font-weight: 500;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-action:hover::before {
  left: 100%;
}

.btn-action-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, #ff9f43 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

.btn-action-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.4);
}

.btn-action-secondary {
  background: linear-gradient(135deg, var(--color-accent2) 0%, #00b894 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
}

.btn-action-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(13, 148, 136, 0.4);
}

.btn-icon {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.btn-action:hover .btn-icon {
  transform: scale(1.1);
}

.btn-text {
  font-weight: 600;
  letter-spacing: 0.25px;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .custom-stat-data-section {
    padding: 1.25rem;
    margin: 1.25rem 0;
  }
  
  .custom-stat-data-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .custom-stat-data-actions {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .action-card {
    padding: 1rem;
  }
  
  .custom-stat-data-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .custom-stat-data-title {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .custom-stat-data-section {
    padding: 1rem;
    margin: 1rem 0;
  }
  
  .custom-stat-data-actions {
    gap: 0.5rem;
  }
  
  .action-card {
    padding: 0.875rem;
  }
  
  .btn-action {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
  
  .custom-stat-data-icon {
    width: 36px;
    height: 36px;
    font-size: 1.125rem;
  }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .custom-stat-data-section {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border-color: #4a5568;
  }
  
  .action-card {
    background: #1a202c;
    border-color: #4a5568;
  }
  
  .custom-stat-data-title {
    color: #f7fafc;
  }
  
  .custom-stat-data-description p {
    color: #a0aec0;
  }
  
  .action-card-content h4 {
    color: #f7fafc;
  }
  
  .action-card-content p {
    color: #a0aec0;
  }
}

/* アニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-stat-data-section {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-card {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-card:nth-child(2) {
  animation-delay: 0.1s;
}

/* フォーカス状態 */
.custom-stat-data-section:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-action:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce) {
  .custom-stat-data-section,
  .action-card,
  .btn-action {
    transition: none;
    animation: none;
  }
  
  .custom-stat-data-section:hover,
  .action-card:hover,
  .btn-action:hover {
    transform: none;
  }
}

/* ボタンのローディング状態 */
.btn-action.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-action.loading .btn-icon {
  animation: spin 1s linear infinite;
}

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

/* モックモーダルのスタイル */
.mock-modal {
  animation: fadeIn 0.3s ease-out;
}

.mock-modal-content {
  animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 統計データ挿入エリアの表示制御 */
.stat-data-insertion-area {
  transition: all 0.3s ease;
}

.stat-data-insertion-area[style*="display: none"] {
  opacity: 0;
  transform: translateY(-10px);
}

.stat-data-insertion-area:not([style*="display: none"]) {
  opacity: 1;
  transform: translateY(0);
}

/* 統計データ追加ボタンのスタイル */
.stat-data-btn.insert {
  background: linear-gradient(135deg, var(--color-accent) 0%, #ff9f43 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-data-btn.insert:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ========== AI対応ラベル ツールチップ スタイル ========== */

/* AIアイコンとツールチップの基本スタイル */
.ai-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.ai-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.ai-tooltip:hover .ai-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

/* ツールチップの表示 */
.ai-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    max-width: 250px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ツールチップの矢印 */
.ai-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

/* ホバー時のツールチップ表示 */
.ai-tooltip:hover::before,
.ai-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* ツールチップの位置調整（右側に表示） */
.ai-tooltip.tooltip-right::before {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateX(-8px) translateY(-50%);
}

.ai-tooltip.tooltip-right::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateX(-4px) translateY(-50%);
    border-left: 6px solid rgba(0, 0, 0, 0.9);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: none;
}

.ai-tooltip.tooltip-right:hover::before,
.ai-tooltip.tooltip-right:hover::after {
    transform: translateX(-4px) translateY(-50%);
}

/* ツールチップの位置調整（左側に表示） */
.ai-tooltip.tooltip-left::before {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateX(8px) translateY(-50%);
}

.ai-tooltip.tooltip-left::after {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateX(4px) translateY(-50%);
    border-right: 6px solid rgba(0, 0, 0, 0.9);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: none;
}

.ai-tooltip.tooltip-left:hover::before,
.ai-tooltip.tooltip-left:hover::after {
    transform: translateX(4px) translateY(-50%);
}

/* ツールチップの位置調整（下側に表示） */
.ai-tooltip.tooltip-bottom::before {
    top: 100%;
    bottom: auto;
    transform: translateX(-50%) translateY(8px);
}

.ai-tooltip.tooltip-bottom::after {
    top: 100%;
    bottom: auto;
    transform: translateX(-50%) translateY(4px);
    border-top: none;
    border-bottom: 6px solid rgba(0, 0, 0, 0.9);
}

.ai-tooltip.tooltip-bottom:hover::before,
.ai-tooltip.tooltip-bottom:hover::after {
    transform: translateX(-50%) translateY(4px);
}

/* 長いテキストのための改行対応 */
.ai-tooltip::before {
    white-space: normal;
    word-wrap: break-word;
    max-width: 280px;
    min-width: 200px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .ai-tooltip::before {
        font-size: 11px;
        padding: 6px 10px;
        max-width: 200px;
        min-width: 150px;
    }
    
    .ai-icon {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .ai-tooltip::before {
        font-size: 10px;
        padding: 5px 8px;
        max-width: 180px;
        min-width: 120px;
    }
    
    .ai-icon {
        width: 16px;
        height: 16px;
        font-size: 11px;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .ai-tooltip::before {
        background: rgba(255, 255, 255, 0.95);
        color: #333;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    
    .ai-tooltip::after {
        border-top-color: rgba(255, 255, 255, 0.95);
    }
    
    .ai-tooltip.tooltip-right::after {
        border-left-color: rgba(255, 255, 255, 0.95);
    }
    
    .ai-tooltip.tooltip-left::after {
        border-right-color: rgba(255, 255, 255, 0.95);
    }
    
    .ai-tooltip.tooltip-bottom::after {
        border-bottom-color: rgba(255, 255, 255, 0.95);
    }
}

/* アニメーション対応 */
@media (prefers-reduced-motion: no-preference) {
    .ai-tooltip::before,
    .ai-tooltip::after {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .ai-icon {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* フォーカス対応（アクセシビリティ） */
.ai-tooltip:focus-within .ai-icon {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.ai-tooltip:focus-within::before,
.ai-tooltip:focus-within::after {
    opacity: 1;
    visibility: visible;
}

.ai-tooltip.tooltip-visible::before,
.ai-tooltip.tooltip-visible::after {
    opacity: 1;
    visibility: visible;
}

/* 検索・選択モーダル用の追加スタイル */
#statDataSearchModal .search-card {
  border: 2px solid #e9ecef;
  transition: all 0.2s ease;
  cursor: pointer;
}

#statDataSearchModal .search-card:hover {
  border-color: var(--color-accent2);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.15);
  transform: translateY(-2px);
}

#statDataSearchModal .search-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

#statDataSearchModal .search-card .card-title-section {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
}

#statDataSearchModal .search-card .card-title-section h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

#statDataSearchModal .search-card .card-selection {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#statDataSearchModal .search-card .card-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--color-accent2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#statDataSearchModal .search-card .card-checkbox:checked {
  background-color: var(--color-accent2);
  border-color: var(--color-accent2);
}

#statDataSearchModal .search-card .card-checkbox:hover {
  border-color: var(--color-accent);
  transform: scale(1.1);
}

#statDataSearchModal .search-card .card-content {
  margin-bottom: 1rem;
}

#statDataSearchModal .search-card .card-description {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

#statDataSearchModal .search-card .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
}

#statDataSearchModal .search-card .card-meta .meta-item {
  background: var(--color-background-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  color: var(--color-text-secondary);
}

#statDataSearchModal .search-card .card-meta .meta-item.region {
  background: rgba(102, 126, 234, 0.1);
  color: var(--color-accent);
}

#statDataSearchModal .search-card .card-meta .meta-item.source {
  background: rgba(13, 148, 136, 0.1);
  color: var(--color-accent2);
}

#statDataSearchModal .search-card .card-meta .meta-item.date {
  background: rgba(255, 193, 7, 0.1);
  color: #f57c00;
}

#statDataSearchModal .search-card .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

#statDataSearchModal .search-card .card-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#statDataSearchModal .search-card .card-btn.preview {
  background: var(--color-background-secondary);
  color: var(--color-text);
}

#statDataSearchModal .search-card .card-btn.preview:hover {
  background: var(--color-background-tertiary);
}

#statDataSearchModal .search-card .card-btn.insert {
  background: var(--color-accent2);
  color: white;
}

#statDataSearchModal .search-card .card-btn.insert:hover {
  background: var(--color-accent);
  transform: translateY(-1px);
}

#statDataSearchModal .search-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--color-text-secondary);
}

#statDataSearchModal .search-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

#statDataSearchModal .search-empty h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
}

#statDataSearchModal .search-empty p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

#statDataSearchModal .search-error {
  text-align: center;
  padding: 2rem;
  color: var(--color-error);
}

#statDataSearchModal .search-error-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

#statDataSearchModal .search-error h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

#statDataSearchModal .search-error p {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

#statDataSearchModal .search-error .retry-btn {
  background: var(--color-error);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#statDataSearchModal .search-error .retry-btn:hover {
  background: #d32f2f;
  transform: translateY(-1px);
}

/* 選択状態のスタイル */
#statDataSearchModal .search-card.selected {
  border-color: var(--color-accent2);
  background: rgba(13, 148, 136, 0.05);
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.2);
}

#statDataSearchModal .search-card.selected::after {
  content: '✓';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--color-accent2);
  color: white;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  animation: checkmarkAppear 0.3s ease-out;
}

@keyframes checkmarkAppear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 検索結果のアニメーション */
#statDataSearchModal .stat-data-grid {
  animation: fadeInUp 0.4s ease-out;
}

#statDataSearchModal .search-card {
  animation: fadeInScale 0.3s ease-out;
}

#statDataSearchModal .search-card:nth-child(1) { animation-delay: 0.1s; }
#statDataSearchModal .search-card:nth-child(2) { animation-delay: 0.15s; }
#statDataSearchModal .search-card:nth-child(3) { animation-delay: 0.2s; }
#statDataSearchModal .search-card:nth-child(4) { animation-delay: 0.25s; }
#statDataSearchModal .search-card:nth-child(5) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 統計データ管理ページ専用のAIツールチップスタイル */
.stat-data-header .ai-tooltip {
    margin-left: 8px;
}

.search-filters .ai-tooltip {
    margin-left: 6px;
}

.card-actions .ai-tooltip {
    margin-left: 8px;
    position: relative;
    z-index: 2; /* ボタン群の上に重ねる */
}

/* ヘッダーアクショングループ内のAIツールチップ */
.header-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-action-group .ai-tooltip {
    flex-shrink: 0;
}

/* フィルターグループ内のAIツールチップ */
.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group .ai-tooltip {
    flex-shrink: 0;
}

/* カードアクション内のAIツールチップ */
.card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-actions .ai-tooltip {
    flex-shrink: 0;
}

/* お気に入り星のスタイル */
.favorite-star {
    cursor: pointer;
    font-size: 18px;
    color: #ccc;
    transition: all 0.2s ease;
    user-select: none;
    padding: 4px;
    border-radius: 4px;
}

.favorite-star:hover {
    transform: scale(1.2);
    color: #ffd700;
}

.favorite-star.favorite {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.favorite-star.favorite:hover {
    color: #ffed4e;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
}

/* お気に入りフィルタのスタイル */
#favoriteFilter {
    margin-right: 8px;
}

#favoriteFilter:checked + label {
    color: #ffd700;
    font-weight: 600;
}

.favorite-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.favorite-filter:hover {
    background-color: rgba(255, 215, 0, 0.1);
}

.favorite-filter input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.filter-label {
    cursor: pointer;
    user-select: none;
}

/* ツールチップの表示状態 */
.ai-tooltip.tooltip-visible::before,
.ai-tooltip.tooltip-visible::after {
    opacity: 1;
    visibility: visible;
}

/* ツールチップのアニメーション強化 */
.ai-tooltip::before,
.ai-tooltip::after {
    transform-origin: center;
    animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px) scale(1);
    }
}

/* 右側表示のアニメーション */
.ai-tooltip.tooltip-right::before,
.ai-tooltip.tooltip-right::after {
    animation: tooltipFadeInRight 0.2s ease-out;
}

@keyframes tooltipFadeInRight {
    from {
        opacity: 0;
        transform: translateX(-12px) translateY(-50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-4px) translateY(-50%) scale(1);
    }
}

/* 左側表示のアニメーション */
.ai-tooltip.tooltip-left::before,
.ai-tooltip.tooltip-left::after {
    animation: tooltipFadeInLeft 0.2s ease-out;
}

@keyframes tooltipFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(12px) translateY(-50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(4px) translateY(-50%) scale(1);
    }
}

/* 下側表示のアニメーション */
.ai-tooltip.tooltip-bottom::before,
.ai-tooltip.tooltip-bottom::after {
    animation: tooltipFadeInBottom 0.2s ease-out;
}

@keyframes tooltipFadeInBottom {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(4px) scale(1);
    }
}

/* ツールチップのホバー状態強化 */
.ai-tooltip:hover .ai-icon {
    animation: iconPulse 0.6s ease-in-out;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* ツールチップのフォーカス状態 */
.ai-tooltip:focus-within .ai-icon {
    animation: iconFocus 0.3s ease-out;
}

@keyframes iconFocus {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    }
    100% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
    }
}

/* .detail-controls関連のスタイルは削除されました */

/* 下部の余白と途切れを修正 */
.section-wrapper:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.hist-detail-wrapper {
  padding-bottom: 1rem;
  margin-bottom: 0;
}

/* ========================================
 * テスト用テーブルスタイル
 * ======================================== */
.test-table {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  /* 表示/非表示の制御を確実にする */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* デフォルトの表示状態を確実にする */
  display: block;
  opacity: 1;
  visibility: visible;
}

/* テストテーブルの非表示状態 */
.test-table.hidden {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: none;
  /* 視覚的な変化を強調 */
  transform: scale(0.8);
  filter: blur(2px);
  transition: all 0.3s ease;
}

/* テストテーブルの表示状態を強調 */
.test-table:not(.hidden) {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
  margin: 2rem 0;
  padding: 1.5rem;
  display: block;
  /* 視覚的な変化を強調 */
  transform: scale(1);
  filter: blur(0);
  transition: all 0.3s ease;
}

.test-table h3 {
  margin: 0 0 1rem 0;
  color: #495057;
  font-size: 1.2rem;
  font-weight: 600;
}

.test-table p {
  margin: 0 0 1.5rem 0;
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.5;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.data-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
  font-size: 0.9rem;
}

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

.data-table tr:hover {
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}

/* ========== メインフッター固定表示（コンパクト・UI非干渉） ========== */
.main-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem 0.75rem;
  text-align: center;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 500;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
  z-index: 100;
  /* レスポンシブ対応 */
  box-sizing: border-box;
  /* アニメーション */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* フッター非表示状態（スクロールダウン時） */
.main-footer.footer-hidden {
  transform: translateY(100%);
}

/* フッター表示状態（スクロールアップ時） */
.main-footer.footer-visible {
  transform: translateY(0);
}

/* フッター内のコンテンツ */
.main-footer .footer-content {
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.9;
  margin-bottom: 0.2em;
}

/* UVPメッセージ（コンパクト・最新デザイン準拠） */
.main-footer .footer-description {
  font-size: 0.78em;
  line-height: 1.35;
  opacity: 0.75;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* フッターリンク */
.main-footer .footer-links {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.main-footer .footer-link {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.main-footer .footer-link:hover {
  opacity: 1;
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* メインコンテンツの下部マージン調整（フッター固定による重複防止） */
/* ※footer-controller.js が動的に --footer-height と padding-bottom を設定 */
body {
  padding-bottom: calc(var(--footer-height, 36px) + 12px);
}

/* 履歴ページでのフッター固定対応 */
body:is(.page-history, .history-page) {
  padding-bottom: calc(var(--footer-height, 36px) + 12px);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .main-footer {
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
  }
}

/* フッター固定時のスクロール制御 */
body.footer-fixed {
  overflow-x: hidden;
}

/* フッター固定時のコンテンツ調整 */
.container,
.history-layout,
.hist-table-wrapper,
.hist-detail-wrapper {
  margin-bottom: 0;
}

/* ========== 警告メッセージのUX向上スタイル ========== */

/* 制限事項通知の基本スタイル */
.limitation-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 1px solid #2196f3;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.limitation-notice .limitation-icon {
  font-size: 20px;
  color: #1976d2;
  flex-shrink: 0;
  margin-top: 2px;
}

.limitation-notice .limitation-content {
  color: #1565c0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.limitation-notice .limitation-content strong {
  color: #0d47a1;
  font-weight: 600;
}

/* セクションリライトモーダル内の制限事項通知 */
.condition-group.limitation-notice {
  margin: 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border: 1px solid #4caf50;
  border-radius: 8px;
}

.condition-group.limitation-notice .condition-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.condition-group.limitation-notice .limitation-icon {
  font-size: 18px;
  color: #2e7d32;
  flex-shrink: 0;
  margin-top: 2px;
}

.condition-group.limitation-notice .limitation-content {
  color: #1b5e20;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.condition-group.limitation-notice .limitation-content strong {
  color: #0d4f0d;
  font-weight: 600;
}

/* ========== 選択UI関連のCSSは modules/ ディレクトリに移動 ========== */
  
  .limitation-notice {
    padding: 12px 16px;
    gap: 10px;
  }
  
  .limitation-notice .limitation-content {
    font-size: 13px;
  }
  
  .limitation-notice .limitation-icon {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .limitation-notice {
    padding: 10px 12px;
    gap: 8px;
  }
  
  .limitation-notice .limitation-content {
    font-size: 12px;
  }
  
  .limitation-notice .limitation-icon {
    font-size: 16px;
  }
}

/* 文字数制限警告の基本スタイル */
.char-limit-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 1px solid #ffc107;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: warningSlideIn 0.4s ease-out;
}

/* 警告メッセージのアニメーション効果 */
@keyframes warningSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes warningSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* 警告メッセージの非表示アニメーション */
.char-limit-warning.hiding {
  animation: warningSlideOut 0.3s ease-in forwards;
}

/* 警告アイコンのスタイル */
.char-limit-warning .warning-icon {
  font-size: 18px;
  color: #f39c12;
  flex-shrink: 0;
  animation: warningPulse 2s ease-in-out infinite;
}

/* 警告アイコンのパルスアニメーション */
@keyframes warningPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 警告テキストのスタイル */
.char-limit-warning .warning-text {
  color: #856404;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

/* 文字数制限超過時のフィードバックスタイル */
.char-limit-exceeded {
  color: #dc3545;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(220, 53, 69, 0.1);
  transition: all 0.3s ease;
}

/* 警告メッセージのホバー効果 */
.char-limit-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 193, 7, 0.25);
  border-color: #ffb300;
}

/* 警告メッセージのフォーカス効果 */
.char-limit-warning:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
  border-color: #ffb300;
}

/* 警告メッセージのレスポンシブ対応 */
@media (max-width: 768px) {
  .char-limit-warning {
    padding: 10px 12px;
    gap: 6px;
  }
  
  .char-limit-warning .warning-text {
    font-size: 13px;
  }
  
  .char-limit-warning .warning-icon {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .char-limit-warning {
    padding: 8px 10px;
    gap: 4px;
  }
  
  .char-limit-warning .warning-text {
    font-size: 12px;
  }
  
  .char-limit-warning .warning-icon {
    font-size: 14px;
  }
}

/* 警告メッセージのアクセシビリティ向上 */
.char-limit-warning[aria-live="polite"] {
  /* スクリーンリーダーでの読み上げを最適化 */
}

/* 警告メッセージのキーボードナビゲーション対応 */
.char-limit-warning:focus {
  outline: 2px solid #ffb300;
  outline-offset: 2px;
}

/* 警告メッセージの高コントラストモード対応 */
@media (prefers-contrast: high) {
  .char-limit-warning {
    border-width: 2px;
    background: #fff3cd;
  }
  
  .char-limit-warning .warning-text {
    color: #856404;
    font-weight: 700;
  }
}

/* 警告メッセージのダークモード対応 */
@media (prefers-color-scheme: dark) {
  .char-limit-warning {
    background: linear-gradient(135deg, #2d1b0e 0%, #3d2b1e 100%);
    border-color: #ffb300;
    color: #fff;
  }
  
  .char-limit-warning .warning-text {
    color: #ffd54f;
  }
  
  .char-limit-warning .warning-icon {
    color: #ffb300;
  }
}

/* 警告メッセージのアニメーション無効化対応 */
@media (prefers-reduced-motion: reduce) {
  .char-limit-warning {
    animation: none;
    transition: none;
  }
  
  .char-limit-warning .warning-icon {
    animation: none;
  }
}

/* ========== 統計データ挿入タイプ選択モーダル ========== */
.insertion-type-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  border: none;
  padding: 0;
  margin: 0;
}

.insertion-type-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.insertion-type-modal .modal-content {
  background: var(--color-bg);
  border-radius: var(--radius-card);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-card);
  border: 2px solid var(--color-surface);
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
}

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

.insertion-type-modal h3 {
  color: var(--color-text);
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.insertion-type-modal p {
  color: var(--color-text);
  margin: 0 0 2rem 0;
  text-align: center;
  line-height: 1.5;
}

.insertion-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.insertion-option-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-btn);
  background: var(--color-bg);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}

.insertion-option-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
}

.insertion-option-btn:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.insertion-option-btn .icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.insertion-option-btn .option-content {
  flex: 1;
}

.insertion-option-btn .option-content strong {
  display: block;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.insertion-option-btn .option-content small {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.insertion-option-btn.instruction-btn:hover {
  border-color: var(--color-accent2);
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.2);
}

.insertion-option-btn.content-btn:hover {
  border-color: var(--color-accent3);
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.2);
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.cancel-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-btn);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  transform: translateY(-1px);
}

.cancel-btn:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .insertion-type-modal .modal-content {
    padding: 1.5rem;
    margin: 1rem;
  }
  
  .insertion-option-btn {
    padding: 1.25rem;
  }
  
  .insertion-option-btn .icon {
    font-size: 1.5rem;
  }
  
  .insertion-option-btn .option-content strong {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .insertion-type-modal .modal-content {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  .insertion-option-btn {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .insertion-option-btn .icon {
    font-size: 1.25rem;
  }
  
  .insertion-option-btn .option-content strong {
    font-size: 0.95rem;
  }
  
  .insertion-option-btn .option-content small {
    font-size: 0.85rem;
  }
}

/* ========== AI改善レポート（シンプル・アニメーションなし） ========== */

/* ページ全体 */
.page-ai-report {
  background: var(--color-bg, #f9f6f2);
  min-height: 100vh;
}
.report-page-header {
  background: var(--color-surface, #e6e1d9);
  border-bottom: 1px solid var(--color-border, #ddd);
  padding: 1rem 1.5rem;
  text-align: center;
}
.report-page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #3a3a3a);
}
.report-page-nav {
  margin-top: 0.75rem;
}
.report-page-back {
  font-size: 0.95rem;
  color: var(--color-text, #3a3a3a);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 4px;
  background: #fff;
}
.report-page-back:hover {
  background: #f5f5f5;
}

.report-page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  color: var(--color-text, #3a3a3a);
}
.report-disclaimer {
  margin: 0 0 1.25rem 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 4px;
  color: var(--color-text-muted, #555);
}
.report-period-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.report-period-label {
  font-size: 0.95rem;
  font-weight: 500;
}
.report-period-select {
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 4px;
  background: #fff;
  min-width: 140px;
}
.report-content-wrap {
  margin-top: 0;
}

/* 読み込み・エラー（アニメーションなし） */
.report-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  font-size: 0.95rem;
  color: var(--color-text-muted, #555);
}
.report-loading-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted, #888);
}
.report-error {
  padding: 1rem;
  font-size: 0.95rem;
  color: #b71c1c;
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 4px;
}
.report-error__retry {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: var(--color-text, #3a3a3a);
}
.report-error__retry:hover {
  background: #f5f5f5;
}

/* レポート本文：セクション・階層 */
.report-content {
  color: var(--color-text, #3a3a3a);
}
.report-section {
  margin-bottom: 2rem;
}
.report-section:last-child {
  margin-bottom: 0;
}
.report-section__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #3a3a3a);
}
.report-section__heading {
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text, #3a3a3a);
}
.report-section__summary {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted, #555);
}
.report-gaps-list,
.report-insight-list {
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
  line-height: 1.5;
}
.report-gaps-list__item,
.report-insight-list__item {
  margin-bottom: 0.5rem;
}
.report-gaps-list__note {
  font-size: 0.9em;
  color: var(--color-text-muted, #555);
}

/* 指標カード（Gap） */
.report-gaps-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.report-gap-item {
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  background: #fff;
}
.report-gap-item__title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-text, #3a3a3a);
}
.report-gap-item__values {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}
.report-gap-item__current,
.report-gap-item__ideal {
  font-size: 0.95rem;
}
.report-gap-item__impact {
  margin: 0 0 0.25rem 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #555);
}
.report-gap-item__note {
  margin: 0.25rem 0 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, #555);
}
.report-gap-item__hint {
  margin: 0.15rem 0 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted, #555);
}

/* 指標・参照値のツールチップ（ホームの .ai-tooltip UI に合わせる） */
.report-content .ai-tooltip.report-tooltip-inline {
  margin-left: 0.35rem;
  vertical-align: middle;
}
.report-content .ai-tooltip.report-tooltip-inline .ai-icon.report-tooltip-btn {
  border: none;
  margin: 0;
  padding: 0;
  cursor: help;
  line-height: 1;
}
.report-section__heading .ai-tooltip.report-tooltip-inline {
  margin-left: 0.4rem;
}
.report-gap-item__ideal .ai-tooltip.report-tooltip-inline {
  margin-left: 0.25rem;
}

/* 利用改善のヒント（示唆） */
.report-section--insight .report-section__summary {
  margin-bottom: 0.75rem;
}
.report-insight-intro {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted, #555);
}
.report-insight-summary {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.report-insight-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.report-insight-card {
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  background: #fff;
}
.report-insight-card__title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border, #eee);
  color: var(--color-text, #3a3a3a);
}
.report-insight-card__observation {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.report-insight-card__label {
  margin: 0.5rem 0 0.2rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted, #555);
}
.report-insight-card__list {
  margin: 0 0 0 1rem;
  padding-left: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.report-insight-card__list li {
  margin-bottom: 0.25rem;
}

/* 利用改善ヒント：明示操作で LLM（誤タップでコストがかからないよう初回は指標のみ） */
.report-section--insight-cta {
  border: 1px dashed var(--color-border, #ccc);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--color-bg, #fafafa) 92%, white);
}
.report-insight-cta__intro {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted, #555);
}
.report-insight-cta__btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary, #2563eb);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.report-insight-cta__btn:hover {
  filter: brightness(1.05);
}
.report-insight-cta__btn:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}
.report-insight-cta__btn:disabled {
  cursor: not-allowed;
  opacity: 0.75;
  filter: none;
}
.report-section--insight-cta.report-insight-cta--busy {
  border-color: color-mix(in srgb, var(--color-primary, #2563eb) 35%, var(--color-border, #ccc));
  background: color-mix(in srgb, var(--color-primary, #2563eb) 6%, var(--color-bg, #fafafa));
}
.report-insight-cta__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted, #555);
}
.report-insight-cta--busy .report-insight-cta__progress .report-loading-dot {
  animation: report-insight-cta-dot-pulse 1s ease-in-out infinite;
}
@keyframes report-insight-cta-dot-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.report-insight-cta__error {
  margin: 0.75rem 0 0 0;
  font-size: 0.875rem;
  color: #b45309;
}

/* =========================================================
 * AI Trust Design (Step 5/6: history + admin full apply)
 * ========================================================= */
.history-header {
  background: var(--trust-primary);
  border: 1px solid color-mix(in srgb, var(--trust-primary) 55%, white);
  box-shadow: var(--trust-shadow-md);
}

.history-title-section h1,
.history-header .history-title-section p,
.history-nav-link {
  color: #ffffff;
}

.history-nav-link {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.history-nav-link:hover {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 50%, white);
}

.history-type-toggle {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  box-shadow: var(--trust-shadow-sm);
}

.history-type-toggle button {
  background: var(--trust-surface);
  color: var(--trust-text-secondary);
  border: 1px solid transparent;
}

.history-type-toggle button.active {
  color: var(--trust-primary);
  border-color: color-mix(in srgb, var(--trust-primary) 35%, white);
  background: var(--trust-primary-surface);
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.12);
}

.hist-table-wrapper,
.hist-detail-wrapper,
.hist-detail-wrapper .section-wrapper {
  background: var(--trust-surface-elevated);
  border-color: var(--trust-border);
  box-shadow: var(--trust-shadow-sm);
}

#historyTable th {
  background: var(--trust-primary-surface);
  color: var(--trust-primary);
  border-color: var(--trust-border);
}

#historyTable td {
  border-color: var(--trust-border);
  color: var(--trust-text);
}

.hist-detail-wrapper .section-heading h3,
.hist-detail-wrapper .section-heading h4 {
  color: var(--trust-primary);
}

.hist-detail-wrapper .section-heading .btn-primary {
  background: var(--trust-cta);
  color: #ffffff;
}

.hist-detail-wrapper .section-heading .btn-primary:hover {
  background: var(--trust-cta-hover);
}

.hist-detail-wrapper .output-box {
  border-color: var(--trust-border);
  color: var(--trust-text);
}

.admin-panel {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  box-shadow: var(--trust-shadow-md);
}

.admin-panel h2 {
  color: var(--trust-primary);
  -webkit-text-fill-color: currentColor;
  background: none;
}

.dashboard-card {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  box-shadow: var(--trust-shadow-sm);
}

.dashboard-card::before {
  opacity: 1;
  background: linear-gradient(
    90deg,
    var(--trust-primary),
    var(--trust-cta),
    var(--trust-verified)
  );
}

.dashboard-card:hover {
  transform: translateY(-2px);
  border-color: var(--trust-border-strong);
  box-shadow: var(--trust-shadow-md);
}

.card-title {
  color: var(--trust-text-secondary);
}

.card-value {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--trust-primary);
}

.card-value[data-kpi-state="loading"] {
  color: var(--trust-text-tertiary);
}

.card-value[data-kpi-state="empty"] {
  color: var(--trust-text-secondary);
}

.card-value[data-kpi-state="error"] {
  color: var(--trust-danger);
}

.card-value[data-kpi-state="success"] {
  color: var(--trust-primary);
}

.chart-section,
.latest-section,
.latest-item {
  background: var(--trust-surface-elevated);
  border-color: var(--trust-border);
}

.error-list {
  background: var(--trust-danger-surface);
  border-color: color-mix(in srgb, var(--trust-danger) 30%, white);
}

.admin-nav-btns .btn-primary,
.admin-header-tool-links .btn-primary {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 35%, white);
}

.admin-nav-btns .btn-primary:hover,
.admin-header-tool-links .btn-primary:hover {
  background: var(--trust-cta-hover);
}

/* Step 7: decorative animation reduction */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* =========================================================
 * AI Trust Publishing Platform - Layout reinforcement
 * ========================================================= */
body {
  background: var(--trust-bg);
  color: var(--trust-text);
  line-height: 1.55;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
}

.brand-header {
  background: var(--trust-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--trust-cta) 65%, white);
  border-radius: 0 0 var(--trust-radius-lg) var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-md);
  gap: 1rem;
}

.main-title {
  color: #ffffff;
  font-size: clamp(1.2rem, 1.5vw + 0.8rem, 1.7rem);
  letter-spacing: 0.02em;
}

.header-catch,
.ai-badge {
  color: color-mix(in srgb, #ffffff 88%, var(--trust-cta) 12%);
}

.header-center {
  align-items: flex-start;
  text-align: left;
}

.header-catch {
  margin-left: 0;
}

.header-center nav {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

@media (max-width: 900px) {
  .header-center {
    align-items: flex-start;
  }

  .header-center nav {
    align-items: flex-start;
  }
}

#generatorContainer,
#historyContainer {
  margin-top: 1.25rem;
  margin-bottom: 2rem;
}

/* =========================================================
 * AI Trust Publishing Platform - Workspace layout harmonize
 * ========================================================= */
.form-sections {
  display: grid;
  gap: 1rem;
}

.form-section {
  margin-bottom: 0;
  padding: 1.1rem 1.2rem;
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
}

.form-section:hover {
  transform: none;
  border-color: var(--trust-border-strong);
  box-shadow: var(--trust-shadow-md);
}

.form-section#basicSection,
.form-section#contentSection,
.form-section#optimizationSection,
.form-section#statDataSection {
  border-left: 1px solid var(--trust-border);
}

.form-section h3 {
  color: var(--trust-primary);
  border-bottom: 1px solid var(--trust-border);
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
}

.input-group {
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.input-label {
  color: var(--trust-text);
  font-weight: 600;
}

.input-desc,
.feedback {
  color: var(--trust-text-secondary);
}

.brand-input,
.brand-textarea,
.brand-select {
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-md);
  background: var(--trust-surface-elevated);
  padding: 0.65rem 0.8rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.brand-input:focus,
.brand-textarea:focus,
.brand-select:focus {
  border-color: var(--trust-cta);
  box-shadow: 0 0 0 3px var(--trust-cta-surface);
}

.generate-button-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
}

.article-preview-container {
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  background: var(--trust-surface-elevated);
  box-shadow: var(--trust-shadow-sm);
}

.article-preview-container:hover {
  transform: none;
  border-color: var(--trust-border-strong);
  box-shadow: var(--trust-shadow-md);
}

.article-preview-header label {
  color: var(--trust-primary);
  text-shadow: none;
}

.article-preview-header label::after {
  content: "";
}

/* =========================================================
 * AI Trust Publishing Platform - Shared page shell
 * ========================================================= */
.platform-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.1rem;
  align-items: start;
  padding: 1rem 1.2rem;
}

.platform-header .header-left {
  align-items: flex-start;
}

.brand-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}

.brand-subtitle {
  font-size: 0.85rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.platform-header .brand-subtitle {
  color: #ffffff;
}

.platform-header .header-center {
  width: 100%;
}

.platform-header .header-center nav {
  margin-top: 0.55rem;
}

.platform-header .header-right {
  min-width: 0;
  align-self: start;
}

#generatorContainer,
#historyContainer {
  background: var(--trust-surface);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
  padding: 1rem;
}

/* index: 右カラム＝メインコンテンツのスロット。記事新規生成と外部リライトで同一スロットを前置換 */
.index-workspace-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  position: relative;
}

/* 右カラムをサインアップ／パスワード変更パネルに切り替えたとき、メイン index を確実に隠す（[hidden] と display:flex の競合対策） */
#generatorContainer:has(#signupPanel:not([hidden])) #indexWorkspaceLayout,
#generatorContainer:has(#changePasswordPanel:not([hidden])) #indexWorkspaceLayout {
  display: none !important;
}

#generatorContainer:has(#signupPanel:not([hidden])),
#generatorContainer:has(#changePasswordPanel:not([hidden])) {
  display: flex;
  flex-direction: column;
}

/* 管理者サインアップ: テナント種別の視覚的区別（右カラム #signupFormPanel / モーダル #signupForm） */
.signup-panel .signup-tenant-fieldset,
#signupForm .signup-tenant-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 0.85rem;
}
.signup-tenant-fieldset-desc {
  margin: 0 0 0.65rem;
  line-height: 1.45;
}
.signup-tenant-mode-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.45;
  border-radius: var(--trust-radius-md);
  border: 1px solid var(--trust-border);
  background: var(--trust-surface-elevated);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.signup-tenant-mode-status__prefix {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--trust-text-tertiary, var(--trust-text-secondary));
}
.signup-tenant-mode-status__value {
  flex: 1 1 12rem;
  min-width: 0;
  font-weight: 500;
  color: var(--trust-text-primary);
}
#signupFormPanel[data-tenant-mode="personal"] .signup-tenant-mode-status,
#signupForm[data-tenant-mode="personal"] .signup-tenant-mode-status {
  opacity: 0.96;
}
#signupFormPanel[data-tenant-mode="new_organization"] .signup-tenant-mode-status,
#signupForm[data-tenant-mode="new_organization"] .signup-tenant-mode-status {
  border-color: color-mix(in srgb, var(--trust-danger, #b91c1c) 38%, var(--trust-border));
  background: color-mix(in srgb, var(--trust-danger, #b91c1c) 7%, var(--trust-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trust-danger, #b91c1c) 12%, transparent);
}
#signupFormPanel[data-tenant-mode="existing_organization"] .signup-tenant-mode-status,
#signupForm[data-tenant-mode="existing_organization"] .signup-tenant-mode-status {
  border-color: color-mix(in srgb, var(--trust-cta) 42%, var(--trust-border));
  background: color-mix(in srgb, var(--trust-cta) 9%, var(--trust-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trust-cta) 22%, transparent);
}
.signup-org-new .input-desc,
.signup-org-existing .input-desc {
  display: block;
  margin: 0.15rem 0 0.45rem;
  line-height: 1.45;
}
.signup-tenant-field-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
}
.signup-tenant-field-label__text {
  font-weight: 600;
}
.signup-field-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  border-radius: 999px;
  vertical-align: middle;
  border: 1px solid transparent;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.signup-field-badge--input {
  color: var(--trust-danger, #b91c1c);
  background: color-mix(in srgb, var(--trust-danger, #b91c1c) 12%, var(--trust-surface));
  border-color: color-mix(in srgb, var(--trust-danger, #b91c1c) 38%, transparent);
}
.signup-field-badge--select {
  color: color-mix(in srgb, var(--trust-cta) 88%, #0f172a);
  background: color-mix(in srgb, var(--trust-cta) 14%, var(--trust-surface));
  border-color: color-mix(in srgb, var(--trust-cta) 42%, transparent);
}
#signupFormPanel[data-tenant-mode="new_organization"] .signup-org-new:not([hidden]) .signup-field-badge--input,
#signupForm[data-tenant-mode="new_organization"] .signup-org-new:not([hidden]) .signup-field-badge--input {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--trust-danger, #b91c1c) 25%, transparent);
}
#signupFormPanel[data-tenant-mode="existing_organization"]
  .signup-org-existing:not([hidden])
  .signup-field-badge--select,
#signupForm[data-tenant-mode="existing_organization"] .signup-org-existing:not([hidden]) .signup-field-badge--select {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--trust-cta) 28%, transparent);
}
.signup-tenant-option {
  display: block;
  margin: 0.45rem 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-md);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  background: var(--trust-surface-elevated);
}
.signup-tenant-option:hover {
  border-color: var(--trust-border-strong);
}
.signup-tenant-option:has(input:checked) {
  border-color: var(--trust-cta);
  background: color-mix(in srgb, var(--trust-cta) 12%, var(--trust-surface-elevated));
  box-shadow: var(--trust-shadow-sm);
}
.signup-tenant-option:has(input:focus-visible) {
  outline: 2px solid var(--trust-cta);
  outline-offset: 2px;
}
.signup-tenant-option input[type="radio"] {
  margin-right: 0.5rem;
  vertical-align: middle;
}
.signup-org-new,
.signup-org-existing {
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--trust-radius-md);
  border: 1px dashed var(--trust-border);
  background: var(--trust-surface);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}
.signup-org-new input[disabled],
.signup-org-existing select[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
#signupFormPanel[data-tenant-mode="new_organization"] .signup-org-new:not([hidden]),
#signupForm[data-tenant-mode="new_organization"] .signup-org-new:not([hidden]) {
  border-style: solid;
  border-color: color-mix(in srgb, var(--trust-cta) 50%, var(--trust-border));
  background: color-mix(in srgb, var(--trust-cta) 8%, var(--trust-surface-elevated));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trust-cta) 25%, transparent);
}
#signupFormPanel[data-tenant-mode="existing_organization"] .signup-org-existing:not([hidden]),
#signupForm[data-tenant-mode="existing_organization"] .signup-org-existing:not([hidden]) {
  border-style: solid;
  border-color: color-mix(in srgb, var(--trust-cta) 50%, var(--trust-border));
  background: color-mix(in srgb, var(--trust-cta) 8%, var(--trust-surface-elevated));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trust-cta) 25%, transparent);
}
.signup-tenant-common-head {
  margin: 0.65rem 0 0.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--trust-text-secondary);
}
.signup-tenant-fields-common {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--trust-border);
}

.index-main-col {
  flex: 1 1 auto;
  min-width: 0;
}

/* 外部記事リライト表示時: 同一スロットを前置換（絶対配置で上書き） */
.index-workspace-layout--rewrite-view .index-main-col {
  display: none !important;
}

/* 外部記事リライト表示時: パネルで右カラムmain部分を100%上書き（同一スロット） */
.index-workspace-layout--rewrite-view .index-right-col.external-rewrite-panel.external-rewrite-panel--open {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-left: none;
  z-index: 1;
}
.index-workspace-layout--rewrite-view {
  min-height: 50vh;
  width: 100%;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
/* 外部記事リライト表示時: コンテナを flex にしレイアウトが右カラム全領域を占有できるようにする */
#generatorContainer:has(.index-workspace-layout--rewrite-view) {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}
#generatorContainer:has(.index-workspace-layout--rewrite-view) .index-workspace-layout--rewrite-view {
  flex: 1 1 auto;
  min-height: 0;
}

/* 通常時は右側スリムパネル。--open 時は上記で上書きされるためここは効かない */
.index-right-col.external-rewrite-panel:not(.external-rewrite-panel--open) {
  flex: 0 0 auto;
  width: min(480px, 42%);
  min-width: 360px;
  max-height: calc(100vh - 180px);
}
.index-right-col.external-rewrite-panel {
  overflow-y: auto;
  border-left: 1px solid var(--trust-border);
  background: var(--trust-surface);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.index-right-col.external-rewrite-panel[hidden] {
  display: none !important;
}

/* 他ページから /#open=external-rewrite で遷移したとき、初回描画から記事新規生成を隠しパネルのみ表示 */
body.external-rewrite-view-initial .index-workspace-layout .index-main-col {
  display: none !important;
}
body.external-rewrite-view-initial .index-workspace-layout #externalRewritePanel,
body.external-rewrite-view-initial .index-workspace-layout #externalRewritePanel[hidden] {
  display: flex !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}
body.external-rewrite-view-initial .index-workspace-layout {
  position: relative;
  min-height: 60vh;
}

/* パネル表示時は JS で .external-rewrite-panel--open を付与。右カラム100%で表示 */
.index-right-col.external-rewrite-panel.external-rewrite-panel--open {
  display: flex !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.external-rewrite-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--trust-border);
}

.external-rewrite-panel__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--trust-primary);
}

/* 閉じる: .close-modal と同系トークン（ヘッダー見出しと色を分離し、枠・面でコントロールであることを示す） */
.external-rewrite-panel__header .close-panel {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-sm);
  background: var(--trust-surface);
  color: var(--trust-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .external-rewrite-panel__header .close-panel {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
}

.external-rewrite-panel__header .close-panel:hover {
  background: var(--trust-primary-surface);
  color: var(--trust-primary);
  border-color: color-mix(in srgb, var(--trust-primary) 28%, var(--trust-border));
}

.external-rewrite-panel__header .close-panel:focus {
  outline: none;
}

.external-rewrite-panel__header .close-panel:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--trust-cta) 55%, var(--trust-border));
  outline-offset: 2px;
}

.external-rewrite-panel__body {
  flex: 1;
  min-height: 0;
}

.external-rewrite-panel__body #rewriteForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.external-rewrite-panel__form-title {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

/* Phase 6: 履歴ページ — 全文リライトを #historyFullRewritePanel で表示（一覧・詳細を一時的に隠す） */
#historyContainer .history-layout.history-layout--full-rewrite-view .hist-table-wrapper,
#historyContainer .history-layout.history-layout--full-rewrite-view .hist-detail-wrapper {
  display: none !important;
}

#historyContainer .history-layout.history-layout--full-rewrite-view {
  min-height: 50vh;
  align-items: stretch;
}

#historyContainer .history-layout.history-layout--full-rewrite-view #historyFullRewritePanel {
  flex: 1 1 100%;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  border-left: none;
  max-height: calc(100vh - 180px);
}

@media (max-width: 900px) {
  .index-workspace-layout {
    flex-direction: column;
  }
  .index-right-col.external-rewrite-panel {
    width: 100%;
    min-width: 0;
    max-height: 70vh;
  }
}

/* =========================================================
   外部記事を取り込み（Markdown インポート）パネル
   - external-rewrite-panel と同型のレイアウト
   - 親 ADR: docs/decisions/ADR-20260423-article-import-left-menu-and-panel.md
   ========================================================= */
.index-right-col.article-import-panel {
  overflow-y: auto;
  border-left: 1px solid var(--trust-border);
  background: var(--trust-surface);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.index-right-col.article-import-panel[hidden] {
  display: none !important;
}

/* 通常時はパネル非表示・--open 時に右カラム100% で展開 */
.index-right-col.article-import-panel:not(.article-import-panel--open) {
  display: none !important;
}

.index-right-col.article-import-panel.article-import-panel--open {
  display: flex !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* 他ページから /#open=article-import で遷移したとき、初回描画から記事新規生成を隠しパネルのみ表示 */
body.article-import-view-initial .index-workspace-layout .index-main-col {
  display: none !important;
}
body.article-import-view-initial .index-workspace-layout #articleImportPanel,
body.article-import-view-initial .index-workspace-layout #articleImportPanel[hidden] {
  display: flex !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}
body.article-import-view-initial .index-workspace-layout {
  position: relative;
  min-height: 60vh;
}

.article-import-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--trust-border);
}

.article-import-panel__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--trust-primary);
}

.article-import-panel__header .close-panel {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-sm);
  background: var(--trust-surface);
  color: var(--trust-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .article-import-panel__header .close-panel {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
}

.article-import-panel__header .close-panel:hover {
  background: var(--trust-primary-surface);
  color: var(--trust-primary);
  border-color: color-mix(in srgb, var(--trust-primary) 28%, var(--trust-border));
}

.article-import-panel__header .close-panel:focus {
  outline: none;
}

.article-import-panel__header .close-panel:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--trust-cta) 55%, var(--trust-border));
  outline-offset: 2px;
}

.article-import-panel__body {
  flex: 1;
  min-height: 0;
}

.article-import-panel__lead {
  margin: 0 0 1rem;
  color: var(--trust-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.article-import-panel__form-host {
  display: block;
}

.article-import-panel__form-host .article-import-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.article-import-panel__form-host fieldset {
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-sm);
  padding: 0.75rem 1rem 1rem;
  margin: 0;
}

.article-import-panel__form-host legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--trust-primary);
}

.article-import-panel__form-host label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.article-import-panel__form-host label > span em {
  color: #c0392b;
  font-style: normal;
  margin-left: 0.15rem;
}

.article-import-panel__form-host input,
.article-import-panel__form-host textarea,
.article-import-panel__form-host select {
  font-size: 0.95rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-sm);
  background: var(--trust-surface);
  color: var(--trust-text-primary, inherit);
  width: 100%;
  box-sizing: border-box;
}

.article-import-panel__form-host textarea {
  resize: vertical;
  min-height: 5rem;
  font-family: ui-monospace, SFMono-Regular, "SFMono", Menlo, Consolas, monospace;
}

.article-import-panel__form-host .article-import-form__preview {
  font-size: 0.9rem;
  color: var(--trust-text-secondary);
  background: var(--trust-primary-surface);
  border-radius: var(--trust-radius-sm);
  padding: 0.5rem 0.75rem;
}

.article-import-panel__form-host .article-import-form__warning {
  color: #b0541b;
  margin-top: 0.25rem;
  font-weight: 600;
}

.article-import-panel__form-host .article-import-form__error {
  color: #c0392b;
  background: color-mix(in srgb, #c0392b 8%, var(--trust-surface));
  border: 1px solid color-mix(in srgb, #c0392b 30%, var(--trust-border));
  border-radius: var(--trust-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  white-space: pre-line;
}

.article-import-panel__form-host .article-import-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.article-import-panel__form-host .article-import-form__actions button {
  padding: 0.5rem 1rem;
  border-radius: var(--trust-radius-sm);
  border: 1px solid var(--trust-border);
  background: var(--trust-surface);
  cursor: pointer;
  font-size: 0.95rem;
}

.article-import-panel__form-host .article-import-form__actions button[type="submit"] {
  background: var(--trust-cta);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}

.article-import-panel__form-host .article-import-form__actions button[type="submit"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.article-import-panel__success {
  border: 1px solid color-mix(in srgb, #27ae60 35%, var(--trust-border));
  background: color-mix(in srgb, #27ae60 8%, var(--trust-surface));
  border-radius: var(--trust-radius-sm);
  padding: 1rem;
}

.article-import-panel__success-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: #1f7d3a;
}

.article-import-panel__success-meta {
  margin: 0 0 0.75rem;
  color: var(--trust-text-secondary);
  font-size: 0.92rem;
}

.article-import-panel__success-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 専用 URL: /article-import.html（左メニュー遷移先。index の右カラム / `/#open=article-import` は従来どおり） */
body.page-article-import .article-import-workspace main {
  padding: 1.25rem 0 2.5rem;
  max-width: 52rem;
  margin: 0 auto;
}
body.page-article-import .article-import-page-panel {
  min-height: 42vh;
}

@media (max-width: 900px) {
  .index-right-col.article-import-panel {
    width: 100%;
    min-width: 0;
    max-height: 70vh;
  }
}

@media (max-width: 900px) {
  .platform-header {
    grid-template-columns: 1fr;
    row-gap: 0.7rem;
  }

  .platform-header .header-right {
    justify-content: flex-start;
  }
}

/* =========================================================
 * AI Trust Publishing Platform - Workspace architecture
 * ========================================================= */
.platform-workspace {
  background: var(--trust-surface);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
  padding: 1rem;
}

#generatorContainer > h1 {
  margin: 0 0 0.9rem;
  color: var(--trust-primary);
  text-shadow: none;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 48ch;
}

#generatorContainer > .brand-card {
  margin-top: 0.6rem;
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
}

#generatorContainer > .brand-card > h2 {
  color: var(--trust-primary);
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}

#generatorContainer > .brand-card > p {
  color: var(--trust-text-secondary);
  font-size: 0.94rem;
  margin-bottom: 0.9rem;
}

#historyContainer .history-header {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-md);
  box-shadow: var(--trust-shadow-sm);
  padding: 0.9rem 1rem;
  margin-bottom: 0.8rem;
}

#historyContainer .history-type-toggle {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-md);
  padding: 0.45rem;
  margin-bottom: 0.8rem;
  gap: 0.45rem;
}

/* 履歴レイアウトは Flex に統一（HISTORY_MASTER_DETAIL: 1行・1〜2子のため Grid より最適。縦幅は stretch で自然に確保される） */
#historyContainer .history-layout {
  display: flex;
  flex-direction: row;
  gap: 0.85rem;
  align-items: stretch;
}
#historyContainer .history-layout.detail-open {
  min-height: calc(100vh - 200px);
}
#historyContainer .history-layout.detail-open .hist-detail-wrapper {
  max-height: 100%;
}

#historyContainer .hist-table-wrapper,
#historyContainer .hist-detail-wrapper {
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-md);
  background: var(--trust-surface-elevated);
  box-shadow: var(--trust-shadow-sm);
}

@media (max-width: 1100px) {
  #historyContainer .history-layout {
    flex-direction: column;
  }
}

/* =========================================================
 * AI Trust Publishing Platform - Left navigation rail
 * ========================================================= */
.platform-header .main-title > span {
  color: #ffffff;
  text-shadow: none;
}

.platform-header .main-title svg circle {
  fill: var(--trust-cta);
}

.platform-header .main-title svg path {
  stroke: #ffffff;
}

.platform-header .header-center {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.45rem;
  align-items: start;
}

body:not(.has-main-sidebar) .platform-header .platform-primary-nav {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  margin-top: 0;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--trust-border) 82%, white);
  border-radius: var(--trust-radius-md);
  background: rgba(255, 255, 255, 0.06);
}

.platform-header .ai-badge,
.platform-header .header-catch {
  grid-column: 2;
}

.platform-header .header-catch {
  max-width: 52ch;
}

body:not(.has-main-sidebar) .platform-header .platform-primary-nav .brand-nav-btn {
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  border-radius: var(--trust-radius-sm);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body:not(.has-main-sidebar) .platform-header .platform-primary-nav .brand-nav-btn:hover,
body:not(.has-main-sidebar) .platform-header .platform-primary-nav .brand-nav-btn:focus {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 45%, white);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
}

/* Main navigation sidebar (OpenAI-like left rail) */
.platform-primary-nav--sidebar-main {
  position: static;
  top: auto;
  left: auto;
  bottom: auto;
  width: 100%;
  max-height: none;
  overflow-y: visible;
  overscroll-behavior: auto;
  padding: 0.55rem;
  border-radius: var(--trust-radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid color-mix(in srgb, var(--trust-border) 82%, white);
  box-shadow: none;
  z-index: auto;
}

.platform-primary-nav--sidebar-main .brand-nav-btn {
  min-height: 2.2rem;
}

/* 左カラム: 使い方ガイドのグルーピング（AI改善レポートの下・適切な余白） */
.primary-nav-guide-group {
  margin-top: 1rem;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0.75rem;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid color-mix(in srgb, var(--trust-border) 75%, transparent);
}

.primary-nav-guide-group .primary-nav-guide-link {
  width: 100%;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}

body[data-workspace-shell="1"].has-main-sidebar .platform-primary-nav--sidebar-main .primary-nav-guide-group {
  width: 100%;
  margin-top: 1rem;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0.75rem;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid color-mix(in srgb, var(--trust-border) 75%, white);
}

body[data-workspace-shell="1"].has-main-sidebar .platform-primary-nav--sidebar-main .primary-nav-guide-group .primary-nav-guide-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.52rem 0.8rem;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
  box-sizing: border-box;
  font-size: 0.92rem;
  line-height: 1.2;
}

body.has-main-sidebar .brand-header.platform-header,
body.has-main-sidebar #generatorContainer,
body.has-main-sidebar #historyContainer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1240px;
}

body.has-main-sidebar .brand-header.platform-header {
  margin-right: auto;
}

@media (max-width: 980px) {
  .platform-header .header-center {
    grid-template-columns: 1fr;
  }

  body:not(.has-main-sidebar) .platform-header .platform-primary-nav {
    grid-row: auto;
    grid-column: 1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .platform-header .ai-badge,
  .platform-header .header-catch {
    grid-column: 1;
  }

  body:not(.has-main-sidebar) .platform-header .platform-primary-nav .brand-nav-btn {
    width: auto;
  }

  .platform-primary-nav--sidebar-main {
    position: static;
    width: 100%;
    max-height: none;
    left: auto;
    top: auto;
    bottom: auto;
    box-shadow: none;
  }

  body.has-main-sidebar .brand-header.platform-header,
  body.has-main-sidebar #generatorContainer,
  body.has-main-sidebar #historyContainer {
    margin-left: auto;
    max-width: 1240px;
  }
}

/* =========================================================
 * AI Trust Publishing Platform - Global page & modal system
 * ========================================================= */
body[class*="page-"] {
  background: var(--trust-bg);
  color: var(--trust-text);
}

body[class*="page-"] > .container,
body[class*="page-"] main.container,
body[class*="page-"] .container.platform-workspace {
  max-width: 1240px;
}

body[class*="page-"] .container > header:not(.brand-header):not(.verification-page-intro) {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

body[class*="page-"] .container > header:not(.brand-header):not(.verification-page-intro) h1,
body[class*="page-"] .container > header:not(.brand-header):not(.verification-page-intro) h2 {
  color: var(--trust-primary);
  margin-top: 0;
}

body[class*="page-"] .container > header:not(.brand-header):not(.verification-page-intro) p {
  color: var(--trust-text-secondary);
}

body[class*="page-"] .container > header:not(.brand-header):not(.verification-page-intro) nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Modal baseline (dialog / div.modal / role=dialog) */
dialog,
.modal-content,
.modal-box,
.verification-result-replace-modal-panel,
[role="dialog"] .modal-box {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-lg);
}

dialog {
  padding: 0;
}

dialog::backdrop,
.modal-overlay,
.modal[style*="display: block"],
.modal[style*="display:block"] {
  background: rgba(15, 23, 42, 0.54);
  backdrop-filter: blur(3px);
}

.modal[style*="display: block"],
.modal[style*="display:block"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

dialog h2,
dialog h3,
.modal-header h3,
.modal-title,
.verification-result-replace-modal-title {
  color: var(--trust-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.modal-actions,
.modal-footer,
.verification-result-replace-modal-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.close-modal,
.modal-close,
.modal-close-btn,
.modal .close {
  background: var(--trust-surface);
  border: 1px solid var(--trust-border);
  color: var(--trust-text-secondary);
  border-radius: 999px;
}

.close-modal:hover,
.modal-close:hover,
.modal-close-btn:hover,
.modal .close:hover {
  background: var(--trust-cta-surface);
  color: var(--trust-cta);
  transform: none;
}

/* =========================================================
 * AI Trust Publishing Platform - Full-page enforcement
 * ========================================================= */
body[class*="page-"] {
  background: var(--trust-bg);
  color: var(--trust-text);
}

body[class*="page-"] .container,
body[class*="page-"] main.container,
body[class*="page-"] .platform-workspace {
  border-radius: var(--trust-radius-lg);
}

body[class*="page-"] .brand-card,
body[class*="page-"] .history-header,
body[class*="page-"] .hist-table-wrapper,
body[class*="page-"] .hist-detail-wrapper,
body[class*="page-"] .collections-header,
body[class*="page-"] .collections-list,
body[class*="page-"] .snippets-header,
body[class*="page-"] .snippets-list,
body[class*="page-"] .admin-panel,
body[class*="page-"] .dashboard-card,
body[class*="page-"] .chart-section,
body[class*="page-"] .latest-section,
body[class*="page-"] .latest-item,
body[class*="page-"] .verification-list-column,
body[class*="page-"] .verification-preview-column,
body[class*="page-"] .verification-result-card {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  box-shadow: var(--trust-shadow-sm);
}

body[class*="page-"] h1,
body[class*="page-"] h2,
body[class*="page-"] h3,
body[class*="page-"] h4 {
  color: var(--trust-primary);
}

body[class*="page-"] p,
body[class*="page-"] .input-desc,
body[class*="page-"] .help-text,
body[class*="page-"] .verification-options-hint,
body[class*="page-"] .verification-target-meta,
body[class*="page-"] .verification-target-meta-label {
  color: var(--trust-text-secondary);
}

body[class*="page-"] .btn-primary,
body[class*="page-"] .brand-btn,
body[class*="page-"] .modal-btn-primary,
body[class*="page-"] .btn-action-primary,
body[class*="page-"] .btn-snippet-primary {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 38%, white);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.24);
}

body[class*="page-"] .btn-primary:hover,
body[class*="page-"] .brand-btn:hover,
body[class*="page-"] .modal-btn-primary:hover,
body[class*="page-"] .btn-action-primary:hover,
body[class*="page-"] .btn-snippet-primary:hover {
  background: var(--trust-cta-hover);
  transform: none;
}

body[class*="page-"] .verification-btn-verify,
body[class*="page-"] .verification-btn-reverify,
body[class*="page-"] .verification-btn-outside-verify {
  background: var(--trust-verified);
  border-color: color-mix(in srgb, var(--trust-verified) 40%, white);
  color: #ffffff;
}

body[class*="page-"] .btn-secondary,
body[class*="page-"] .brand-nav-btn,
body[class*="page-"] .btn-action-secondary,
body[class*="page-"] .btn-snippet-secondary {
  border-color: var(--trust-border-strong);
}

body[class*="page-"] .modal,
body[class*="page-"] .modal-overlay,
body[class*="page-"] .verification-result-replace-modal,
body[class*="page-"] [role="dialog"] {
  background: rgba(15, 23, 42, 0.46);
}

body[class*="page-"] .modal-content,
body[class*="page-"] .modal-box,
body[class*="page-"] .verification-result-replace-modal-panel,
body[class*="page-"] dialog {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-lg);
}

body[class*="page-"] .modal-header,
body[class*="page-"] .modal-footer,
body[class*="page-"] .modal-actions {
  border-color: var(--trust-border);
}

body[class*="page-"] .close-modal,
body[class*="page-"] .modal-close,
body[class*="page-"] .modal-close-btn,
body[class*="page-"] .modal .close {
  background: var(--trust-surface);
  border: 1px solid var(--trust-border);
  color: var(--trust-text-secondary);
}

body[class*="page-"] > header:not(.brand-header) {
  background: var(--trust-primary);
  border: 1px solid color-mix(in srgb, var(--trust-primary) 65%, white);
  border-bottom: 3px solid var(--trust-cta);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
  margin: 1rem auto 0.8rem;
  padding: 1rem 1.25rem;
  max-width: 1200px;
}

body[class*="page-"] > header:not(.brand-header) h1,
body[class*="page-"] > header:not(.brand-header) p {
  color: #ffffff;
}

body[class*="page-"] > header:not(.brand-header) nav .brand-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: none;
}

body[class*="page-"] > header:not(.brand-header) nav .brand-nav-btn:hover,
body[class*="page-"] > header:not(.brand-header) nav .brand-nav-btn:focus {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 40%, white);
  transform: translateY(-1px);
}

body[class*="page-"] .container {
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
}

/* =========================================================
 * AI Trust Publishing Platform - Final layout hardening
 * ========================================================= */
#generatorContainer .brand-card,
#generatorContainer .form-section,
#historyContainer .history-header,
#historyContainer .hist-table-wrapper,
#historyContainer .hist-detail-wrapper,
#historyContainer .section-wrapper {
  background: var(--trust-surface-elevated);
  border-color: var(--trust-border);
  box-shadow: var(--trust-shadow-sm);
}

#generatorContainer .form-section h3,
#historyContainer .section-heading h3,
#historyContainer .section-heading h4 {
  color: var(--trust-primary);
  -webkit-text-fill-color: currentColor;
  background: none;
}

#generatorContainer .brand-btn,
#generatorContainer .btn-primary,
#historyContainer .btn-primary {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 38%, white);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.24);
}

#generatorContainer .brand-btn:hover,
#generatorContainer .btn-primary:hover,
#historyContainer .btn-primary:hover {
  background: var(--trust-cta-hover);
  transform: none;
}

#generatorContainer .btn-secondary,
#historyContainer .btn-secondary {
  background: var(--trust-surface-elevated);
  color: var(--trust-primary);
  border-color: var(--trust-border-strong);
}

#generatorContainer .btn-secondary:hover,
#historyContainer .btn-secondary:hover {
  background: var(--trust-surface);
  transform: none;
}

#generatorContainer .result-container {
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  background: var(--trust-surface-elevated);
  box-shadow: var(--trust-shadow-sm);
}

/* =========================================================
 * AI Trust Publishing Platform - Unified page and modal skin
 * ========================================================= */
body[class*="page-"] .brand-header,
body[class*="page-"] .brand-header.platform-header {
  background: var(--trust-primary);
  border-bottom: 3px solid var(--trust-cta);
  box-shadow: var(--trust-shadow-lg);
}

body[class*="page-"] .main-title,
body[class*="page-"] .main-title span,
body[class*="page-"] .main-title svg + span,
body[class*="page-"] .ai-badge,
body[class*="page-"] .header-catch {
  color: #ffffff;
}

/* ヘッダー内ナビのみ（workspace shell で左レールへ移動した .platform-primary-nav には当てない） */
body[class*="page-"] .brand-header .platform-primary-nav .brand-nav-btn,
body[class*="page-"] .brand-header .header-center .brand-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: none;
}

body[class*="page-"] .brand-header .platform-primary-nav .brand-nav-btn:hover,
body[class*="page-"] .brand-header .platform-primary-nav .brand-nav-btn:focus,
body[class*="page-"] .brand-header .header-center .brand-nav-btn:hover,
body[class*="page-"] .brand-header .header-center .brand-nav-btn:focus {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 40%, white);
  transform: translateY(-1px);
}

body[class*="page-"] dialog,
body[class*="page-"] .modal-content,
body[class*="page-"] .modal-box {
  backdrop-filter: none;
}

body[class*="page-"] dialog::before,
body[class*="page-"] #rewriteModal::before {
  display: none;
  animation: none;
}

body[class*="page-"] dialog::backdrop {
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: none;
}

body[class*="page-"] dialog h2,
body[class*="page-"] dialog legend {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--trust-primary);
}

body[class*="page-"] dialog input:not([type="checkbox"]):not([type="radio"]),
body[class*="page-"] dialog textarea,
body[class*="page-"] dialog select {
  border: 1px solid var(--trust-border-strong);
  border-radius: var(--trust-radius-sm);
  background: var(--trust-surface-elevated);
  transform: none;
}

body[class*="page-"] dialog input:not([type="checkbox"]):not([type="radio"]):focus,
body[class*="page-"] dialog textarea:focus,
body[class*="page-"] dialog select:focus {
  border-color: var(--trust-cta);
  box-shadow: 0 0 0 3px var(--trust-cta-surface);
}

body[class*="page-"] .dialog-actions .btn-primary,
body[class*="page-"] dialog .btn-primary {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 38%, white);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2);
}

body[class*="page-"] .dialog-actions .btn-primary:hover,
body[class*="page-"] dialog .btn-primary:hover {
  background: var(--trust-cta-hover);
  transform: translateY(-1px);
}

body[class*="page-"] .dialog-actions .btn-warn {
  background: var(--trust-danger-surface);
  color: var(--trust-danger);
  border: 1px solid color-mix(in srgb, var(--trust-danger) 30%, white);
}

body[class*="page-"] .dialog-actions .btn-warn:hover {
  background: color-mix(in srgb, var(--trust-danger) 14%, white);
  transform: translateY(-1px);
}

/* =========================================================
 * AI Trust Publishing Platform - Final global guardrails
 * ========================================================= */
body[class*="page-"] :is(.modal, .modal-overlay, [id*="modal"], [id*="Modal"]):not([hidden]) {
  background-color: rgba(15, 23, 42, 0.46);
}

body[class*="page-"] :is(.modal-content, .modal-box, .insert-confirm-content, .success-content, [role="dialog"] > div) {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-lg);
}

body[class*="page-"] :is(.modal-header, .modal-footer, .modal-actions, .form-actions) {
  border-color: var(--trust-border);
}

body[class*="page-"] :is(.modal-btn-primary, .btn-enable, .btn-snippet-primary, .btn-action-primary) {
  background: var(--trust-cta);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--trust-cta) 38%, white);
}

body[class*="page-"] :is(.modal-btn-primary, .btn-enable, .btn-snippet-primary, .btn-action-primary):hover {
  background: var(--trust-cta-hover);
}

/* =========================================================
 * AI Trust Publishing Platform - Executive UI/UX uplift
 * 全ページ・全モーダルを業務向け品質へ統一
 * ========================================================= */
html,
body {
  background: var(--trust-bg);
  color: var(--trust-text);
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body {
  letter-spacing: 0.01em;
}

main,
section,
article {
  color: var(--trust-text);
}

/* 画面の情報密度を一定化し、運用時の視線移動を短縮 */
body > .container,
body .container main,
body .collections-container,
body .snippets-container {
  max-width: 1240px;
}

body .container {
  background: color-mix(in srgb, var(--trust-surface-elevated) 90%, var(--trust-bg));
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
}

body > header:not(.brand-header),
body .container > header:not(.verification-page-intro),
body .platform-header {
  background: linear-gradient(
    130deg,
    color-mix(in srgb, var(--trust-primary) 92%, black),
    var(--trust-primary) 62%,
    color-mix(in srgb, var(--trust-intelligence) 26%, var(--trust-primary))
  );
  border: 1px solid color-mix(in srgb, var(--trust-primary) 68%, white);
  border-bottom: 3px solid var(--trust-cta);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-md);
}

:where(body) :where(h1, h2, h3, .section-title, .card-title):where(:not(.main-title)):where(:not(.ai-badge)) {
  color: var(--trust-primary);
  letter-spacing: 0.01em;
}

body :is(p, li, td, label, .text-muted, .description) {
  color: var(--trust-text-secondary);
}

body :is(.brand-card, .card, .form-section, .dashboard-card, .stat-card, .kpi-card, .collections-list, .snippets-list, .snippets-filters, .form-container) {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
}

body :is(.brand-card, .card, .dashboard-card, .stat-card, .kpi-card):hover {
  border-color: var(--trust-border-strong);
  box-shadow: var(--trust-shadow-md);
}

/* フォーム・入力系 */
body :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]) {
  border: 1px solid var(--trust-border-strong);
  border-radius: var(--trust-radius-sm);
  background: var(--trust-surface-elevated);
  color: var(--trust-text);
  min-height: 2.25rem;
}

body :is(input, textarea, select):focus,
body :is(input, textarea, select):focus-visible {
  border-color: var(--trust-cta);
  box-shadow: 0 0 0 3px var(--trust-cta-surface);
  outline: none;
}

/* ボタン統一 */
body :is(.btn-primary, .brand-btn, .modal-btn-primary, .btn-snippet-primary, .btn-enable, .btn-action-primary) {
  background: var(--trust-cta);
  border: 1px solid color-mix(in srgb, var(--trust-cta) 40%, white);
  color: #ffffff;
  border-radius: var(--trust-radius-md);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.22);
}

body[class*="page-"] :is(.btn-primary, .brand-btn, .modal-btn-primary, .btn-snippet-primary, .btn-enable, .btn-action-primary):hover {
  background: var(--trust-cta-hover);
  transform: translateY(-1px);
}

body[class*="page-"] :is(.btn-secondary, .btn-snippet-secondary, .btn-action-secondary) {
  background: var(--trust-surface-elevated);
  color: var(--trust-primary);
  border: 1px solid var(--trust-border-strong);
  border-radius: var(--trust-radius-md);
}

body[class*="page-"] :is(.btn-secondary, .btn-snippet-secondary, .btn-action-secondary):hover {
  background: var(--trust-surface);
  border-color: var(--trust-primary);
}

body[class*="page-"] :is(.btn-danger, .btn-snippet-danger, .btn-warn) {
  background: var(--trust-danger);
  border-color: color-mix(in srgb, var(--trust-danger) 38%, white);
  color: #ffffff;
}

/* テーブル統一（履歴・管理・一覧） */
body[class*="page-"] table,
body[class*="page-"] .data-table,
body[class*="page-"] #historyTable {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-md);
  overflow: hidden;
}

body[class*="page-"] :is(table th, .data-table th, #historyTable th) {
  background: color-mix(in srgb, var(--trust-primary) 8%, white);
  color: var(--trust-primary);
  border-color: var(--trust-border);
  font-weight: 600;
}

body[class*="page-"] :is(table td, .data-table td, #historyTable td) {
  border-color: var(--trust-border);
  color: var(--trust-text);
}

body[class*="page-"] :is(table tbody tr, .data-table tbody tr, #historyTable tbody tr):hover {
  background: var(--trust-primary-surface);
}

/* ステータスバッジ・KPI値を強調 */
body[class*="page-"] :is(.card-value, .stat-value, .usage-count) {
  color: var(--trust-text);
  font-weight: 700;
}

body[class*="page-"] :is(.collection-type, .snippet-type, .trust-status-badge--state-verified) {
  background: var(--trust-verified);
  color: #ffffff;
}

/* モーダル全系統 */
body[class*="page-"] :is(.modal, .modal-overlay, .verification-result-replace-modal, [id*="Modal"], [id*="modal"]):not([hidden]) {
  background: rgba(15, 23, 42, 0.5);
}

body dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
}

body :is(.modal-content, .modal-box, .dialog-content, .insert-confirm-content, .success-content, .verification-result-replace-modal-panel) {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-lg);
}

body :is(.modal-header, .modal-footer, .modal-actions, .dialog-actions, .form-actions) {
  border-color: var(--trust-border);
}

:where(body)
  :where(
    .modal-title,
    .modal-header h2,
    .modal-header h3,
    .dialog-content h3,
    .verification-result-replace-modal-title
  ) {
  color: var(--trust-primary);
}

body :is(.close-modal, .modal-close, .modal-close-btn) {
  border: 1px solid var(--trust-border);
  color: var(--trust-text-secondary);
  background: var(--trust-surface);
  border-radius: var(--trust-radius-sm);
}

body :is(.close-modal, .modal-close, .modal-close-btn):hover {
  background: var(--trust-primary-surface);
  color: var(--trust-primary);
}

/* トースト・通知 */
body :is(.toast-holder, .verification-toast-holder, .verification-toast, .verification-result-toast, .modal-toast) {
  border-radius: var(--trust-radius-md);
  border: 1px solid color-mix(in srgb, var(--trust-cta) 32%, white);
  box-shadow: var(--trust-shadow-md);
}

body :is(.toast-success, .message-success) {
  background: var(--trust-verified-surface);
  color: var(--trust-verified);
  border-color: color-mix(in srgb, var(--trust-verified) 36%, white);
}

body :is(.toast-error, .message-error) {
  background: var(--trust-danger-surface);
  color: var(--trust-danger);
  border-color: color-mix(in srgb, var(--trust-danger) 34%, white);
}

body :is(.toast-warning, .message-warning) {
  background: var(--trust-warning-surface);
  color: var(--trust-warning);
  border-color: color-mix(in srgb, var(--trust-warning) 34%, white);
}

body :is(.toast-info, .message-info) {
  background: var(--trust-cta-surface);
  color: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 34%, white);
}

/* 装飾過多の動きを抑制して、業務向けの落ち着いた体験へ */
@media (prefers-reduced-motion: no-preference) {
  body :is(.btn-primary, .brand-btn, .btn-secondary, .modal-btn, .tag-chip, .collection-item, .snippet-item, .dashboard-card) {
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }
}

/* =========================================================
 * AI Trust Publishing Platform - Final enterprise guardrails
 * 全ページの業務UI運用品質を固定化する最終統一層
 * ========================================================= */
:root {
  --trust-layout-max: 1240px;
  --trust-content-gap: 1rem;
  --trust-control-height: 2.4rem;
}

body[class*="page-"] {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[class*="page-"] :is(header, main, section, article, aside) {
  scroll-margin-top: 0.8rem;
}

/* ヘッダー配下の操作導線を安定レイアウト化 */
body[class*="page-"] .platform-header,
body[class*="page-"] > header,
body[class*="page-"] .container > header {
  max-width: var(--trust-layout-max);
  margin-left: auto;
  margin-right: auto;
}

body[class*="page-"] .platform-primary-nav,
body[class*="page-"] header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* ページ本体の読み幅を統一して、運用時の視線移動を削減 */
body[class*="page-"] .container,
body[class*="page-"] .platform-workspace,
body[class*="page-"] .collections-container,
body[class*="page-"] .snippets-container,
body[class*="page-"] .estat-container,
body[class*="page-"] .stat-data-container {
  max-width: var(--trust-layout-max);
  margin-left: auto;
  margin-right: auto;
}

body[class*="page-"] :is(.container, .platform-workspace) {
  padding: 1rem 1.2rem;
}

/* 入力操作系の業務標準サイズ */
body[class*="page-"] :is(input, textarea, select, button, .btn-primary, .btn-secondary, .modal-btn) {
  font-size: 0.92rem;
}

body[class*="page-"] :is(input, select, .btn-primary, .btn-secondary, .modal-btn) {
  min-height: var(--trust-control-height);
}

body[class*="page-"] textarea {
  min-height: 5.5rem;
}

/* テーブルの監査性を向上 */
body[class*="page-"] :is(table, .data-table, #historyTable) {
  table-layout: auto;
}

body[class*="page-"] :is(table thead th, .data-table thead th, #historyTable thead th) {
  position: sticky;
  top: 0;
  z-index: 1;
}

body[class*="page-"] :is(table td, table th, .data-table td, .data-table th, #historyTable td, #historyTable th) {
  padding: 0.5rem 0.6rem;
}

/* モーダルの運用安定化（閉じ・操作ボタンの視認性向上） */
body[class*="page-"] :is(.modal-content, .modal-box, .dialog-content, .insert-confirm-content, .success-content, .verification-result-replace-modal-panel, dialog) {
  width: min(960px, 94vw);
  max-width: 94vw;
  max-height: 90vh;
  overflow: auto;
}

body[class*="page-"] :is(.modal-header, .modal-footer, .dialog-actions, .modal-actions, .form-actions) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body[class*="page-"] :is(.modal-header h2, .modal-header h3, .dialog-content h3, .modal-title) {
  margin: 0;
  line-height: 1.35;
}

body[class*="page-"] :is(.close-modal, .modal-close, .modal-close-btn) {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* 空状態・補助文の業務UI化 */
body[class*="page-"] :is(.empty-state, .verification-empty, .loading-text, .helper-text, .hint, .description) {
  color: var(--trust-text-secondary);
}

body[class*="page-"] :is(.empty-state, .verification-empty) {
  background: var(--trust-surface);
  border: 1px dashed var(--trust-border);
  border-radius: var(--trust-radius-md);
}

/* 小画面での運用性確保 */
@media (max-width: 900px) {
  body[class*="page-"] :is(.container, .platform-workspace) {
    padding: 0.8rem;
  }

  body[class*="page-"] :is(.platform-header, body > header, .container > header:not(.verification-page-intro)) {
    border-radius: var(--trust-radius-md);
    padding: 0.85rem 0.95rem;
  }

  body[class*="page-"] :is(.platform-primary-nav, header nav) {
    gap: 0.35rem;
  }

  body[class*="page-"] :is(.modal-content, .modal-box, .dialog-content, .insert-confirm-content, .success-content, .verification-result-replace-modal-panel, dialog) {
    width: min(98vw, 98vw);
    max-width: 98vw;
    border-radius: var(--trust-radius-md);
  }
}

/* =========================================================
 * AI Trust Publishing Platform - Selection UI enterprise overrides
 * モジュールCSS由来の装飾トーンを業務向けに統一
 * ========================================================= */
body[class*="page-"] :is(.selection-option, .genre-option, .style-option) {
  border-color: var(--trust-border-strong);
  background: var(--trust-surface-elevated);
  box-shadow: var(--trust-shadow-sm);
  border-radius: var(--trust-radius-md);
}

body[class*="page-"] :is(.selection-option:hover, .genre-option:hover, .style-option:hover) {
  border-color: var(--trust-cta);
  background: var(--trust-primary-surface);
  box-shadow: var(--trust-shadow-md);
  transform: translateY(-1px);
}

body[class*="page-"] :is(.selection-option.selected, .genre-option.selected, .style-option.selected, .selection-option.default-selected, .genre-option.default-selected, .style-option.default-selected, .selection-option.active, .style-option.active) {
  border-color: color-mix(in srgb, var(--trust-cta) 55%, white);
  background: var(--trust-cta-surface);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.16);
}

body[class*="page-"] :is(.selection-option-icon, .genre-icon, .style-icon) {
  background: var(--trust-surface);
  color: var(--trust-text-secondary);
  border-radius: var(--trust-radius-sm);
}

body[class*="page-"] :is(.selection-option:hover .selection-option-icon, .genre-option:hover .genre-icon, .style-option:hover .style-icon, .selection-option.selected .selection-option-icon, .genre-option.selected .genre-icon, .style-option.selected .style-icon, .selection-option.default-selected .selection-option-icon, .genre-option.default-selected .genre-icon, .style-option.default-selected .style-icon, .selection-option.active .selection-option-icon, .style-option.active .style-icon) {
  background: var(--trust-cta);
  color: #ffffff;
  box-shadow: none;
}

body[class*="page-"] :is(.selection-option::before, .genre-option::before, .style-option::before) {
  background: none;
}

body[class*="page-"] :is(.selection-option.default-selected::after, .genre-option.default-selected::after, .style-option.default-selected::after) {
  background: var(--trust-cta);
  animation: none;
}

/* collection_elements_ui のガラス表現や有機アニメーションを業務向けへ抑制 */
body[class*="page-"] :is(.collection-toggle-card, .collection-options-card) {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
  backdrop-filter: none;
}

body[class*="page-"] :is(.collection-toggle-card:hover, .collection-options-card:hover) {
  border-color: var(--trust-border-strong);
  box-shadow: var(--trust-shadow-md);
  transform: translateY(-1px);
}

body[class*="page-"] :is(.collection-toggle-card::before, .collection-options-card::before) {
  display: none;
}

body[class*="page-"] :is(.collection-level select, .collection-search-input, .collection-search-box input) {
  border: 1px solid var(--trust-border-strong);
  border-radius: var(--trust-radius-sm);
  background: var(--trust-surface-elevated);
  color: var(--trust-text);
}

body[class*="page-"] :is(.collection-level select:focus, .collection-search-input:focus, .collection-search-box input:focus) {
  border-color: var(--trust-cta);
  box-shadow: 0 0 0 3px var(--trust-cta-surface);
}

/* =========================================================
 * AI Trust Publishing Platform - Navigation rebuild (zero-base)
 * ========================================================= */

/* 共通ヘッダー土台 */
body[class*="page-"] :is(.brand-header.platform-header, body > header, .container > header:not(.verification-page-intro)) {
  width: min(var(--trust-layout-max), calc(100% - 2rem));
  margin: 1rem auto 0.9rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--trust-radius-lg);
}

/* platform-header: 左ロゴ / 中央情報+ナビ / 右補助 */
body[class*="page-"] .brand-header.platform-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.6rem;
}

body[class*="page-"] .brand-header.platform-header .header-left,
body[class*="page-"] .brand-header.platform-header .header-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

body[class*="page-"] .brand-header.platform-header .header-center {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  row-gap: 0.45rem;
  min-width: 0;
}

body[class*="page-"] .brand-header.platform-header .header-catch {
  margin: 0;
  line-height: 1.35;
  /* 長い data-header-catch を許可（旧 .header-catch の white-space: nowrap を上書き） */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
}

/* ナビ行（全ページ共通） */
body[class*="page-"] :is(.platform-primary-nav, header nav, .container > header nav) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  margin: 0;
}

/* ドキュメント/Usage の inline style ヘッダーも吸収 */
body[class*="page-"] :is(header[style*="text-align"], header[style*="justify-content"]) {
  text-align: left;
}

body[class*="page-"] :is(header[style*="text-align"], header[style*="justify-content"]) nav {
  justify-content: flex-start;
}

/* ナビボタンを均一サイズ化 */
body[class*="page-"] :is(.brand-nav-btn, .platform-primary-nav .brand-nav-btn, header nav .brand-nav-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--trust-radius-sm);
  font-size: 0.84rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  gap: 0.35rem;
}

/* hidden属性を最優先し、ログイン状態の可視制御を壊さない */
body[class*="page-"] :is(.brand-nav-btn, .platform-primary-nav .brand-nav-btn, header nav .brand-nav-btn)[hidden] {
  display: none;
}

/* SVGアイコンは文字色に追従 */
body[class*="page-"] :is(.brand-nav-btn svg, .platform-primary-nav .brand-nav-btn svg) {
  width: 1rem;
  height: 1rem;
  margin: 0;
  filter: none;
}

body[class*="page-"] :is(.brand-nav-btn svg path, .brand-nav-btn svg circle, .brand-nav-btn svg polyline) {
  stroke: currentColor;
}

/* メインタイトル行のバランスを再固定 */
body[class*="page-"] .brand-header.platform-header .main-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

body[class*="page-"] .brand-header.platform-header .main-title > span {
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

body[class*="page-"] .brand-header.platform-header .brand-subtitle {
  color: #ffffff;
  font-size: 0.82rem;
  opacity: 0.9;
}

/* 小画面では1カラム積み上げ */
@media (max-width: 980px) {
  body[class*="page-"] .brand-header.platform-header {
    grid-template-columns: 1fr;
    row-gap: 0.55rem;
  }

  body[class*="page-"] .brand-header.platform-header .header-left,
  body[class*="page-"] .brand-header.platform-header .header-right {
    justify-content: flex-start;
  }

  body[class*="page-"] :is(.platform-primary-nav, header nav, .container > header nav) {
    gap: 0.38rem;
  }

  body[class*="page-"] :is(.brand-nav-btn, .platform-primary-nav .brand-nav-btn, header nav .brand-nav-btn) {
    min-height: 2.05rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
  }
}

/* =========================================================
 * Navigation IA phase 2 (index/history)
 * - ヘッダー内フロー固定
 * - サイドレール時代の grid-row span / 固定レイアウトを排除
 * ========================================================= */
body:is(.page-index, .page-history, .page-admin-verification-access, .page-admin.dashboard-mode) .brand-header.platform-header .header-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

body:not(.has-main-sidebar):is(.page-index, .page-history, .page-admin-verification-access, .page-admin.dashboard-mode) .brand-header.platform-header .platform-primary-nav {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
}

body:not(.has-main-sidebar):is(.page-index, .page-history, .page-admin-verification-access, .page-admin.dashboard-mode) .brand-header.platform-header .platform-primary-nav .brand-nav-btn {
  width: auto;
  min-width: fit-content;
  justify-content: flex-start;
}

body:is(.page-index, .page-history) .brand-header.platform-header .header-catch {
  max-width: 72ch;
  margin-inline-start: auto;
}

body:is(.page-index, .page-history) .brand-header.platform-header .brand-wordmark {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #ffffff;
}

body:is(.page-index, .page-history) .brand-header.platform-header .ai-badge--compact {
  font-size: 0.98em;
}

body:is(.page-index, .page-history) .brand-header.platform-header .nav-btn-icon {
  vertical-align: middle;
  margin-right: 0.4em;
}

body:is(.page-index, .page-history) .brand-header.platform-header .nav-btn-icon--glow {
  filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.35));
}

/* Phase 3 latter: index/history inline-style extraction */
body.page-index .homepage-hero-title {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 12px rgba(37, 99, 235, 0.22);
}

body.page-index .homepage-brand-card {
  margin-top: 2.2rem;
}

body.page-index .homepage-brand-headline {
  margin-top: 0;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  letter-spacing: 0.02em;
  font-size: 1.25em;
}

body.page-index .homepage-brand-lead {
  font-size: 1.08em;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.2em;
}

body.page-index .homepage-article-form {
  margin-top: 0.5em;
}

body.page-index .generate-button-container--spaced {
  margin-top: 24px;
}

body:is(.page-index, .page-history) .current-setting-card--visible {
  display: block;
}

body:is(.page-index, .page-history) .rewrite-stat-data-badge--compact {
  margin-bottom: 0.5rem;
  font-size: 0.9em;
  color: #0d6efd;
}

body:is(.page-index, .page-history) .rewrite-stat-data-titles--compact {
  margin-bottom: 0.5rem;
  font-size: 0.85em;
  color: #495057;
  padding-left: 1rem;
}

body:is(.page-index, .page-history) .ai-model-badge--compact {
  margin-top: 0.3em;
  font-size: 0.92em;
  color: #555;
  background: #f6f6fa;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 1px 4px #0001;
}

body:is(.page-index, .page-history) .language-notice--warning {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #d32f2f;
  background: #fff5f5;
  border: 1px solid #ffcdd2;
  border-radius: 4px;
  padding: 0.5em 0.8em;
}

/* =========================================================
 * AI Trust Publishing Platform - App shell stabilization
 * ========================================================= */
body[class*="page-"] .app-shell-header {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
  padding: 1rem 1.2rem;
  margin: 1rem auto 0.85rem;
  min-height: 4.4rem;
}

body[class*="page-"] .app-shell-header h1 {
  margin: 0;
  line-height: 1.22;
}

body[class*="page-"] .app-shell-header p {
  margin: 0.32rem 0 0;
  color: var(--trust-text-secondary);
}

body[class*="page-"] .app-shell-header--center {
  text-align: center;
}

body[class*="page-"] .app-shell-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

body[class*="page-"] .app-shell-nav .brand-nav-btn {
  min-height: 2.2rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--trust-radius-sm);
}

.container.platform-workspace,
.verification-workspace {
  padding: 1.05rem 1.2rem;
}

body[class*="page-"] .app-shell-nav--center {
  justify-content: center;
}

.ui-hidden {
  display: none;
}

/* hidden 属性を最優先して JS/CSS の表示競合を防ぐ */
#historyContainer .hist-detail-wrapper[hidden],
#historyContainer .tab-pane[hidden],
#historyTable[hidden],
#historyContainer .hist-table-wrapper[hidden] {
  display: none;
}

@media (max-width: 900px) {
  body[class*="page-"] .app-shell-header--center {
    text-align: left;
  }

  body[class*="page-"] .app-shell-nav--center {
    justify-content: flex-start;
  }
}

/* =========================================================
 * Workspace shell v2 layout (phase-wise rollout)
 * ========================================================= */
body[data-workspace-shell="1"].has-main-sidebar {
  --workspace-shell-sidebar-width: 240px;
  --workspace-shell-max-width: 1520px;
}
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-shell-layout="1"] {
  display: grid;
  grid-template-columns: var(--workspace-shell-sidebar-width) minmax(0, 1fr);
  gap: 1rem;
  max-width: var(--workspace-shell-max-width);
  margin: 0 auto;
  padding: 0.75rem 1rem 1rem;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-shell-left="1"] {
  position: sticky;
  top: 0.85rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-primary="1"],
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-account="1"] {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-lg);
  box-shadow: var(--trust-shadow-sm);
  padding: 0.65rem;
}

/* ログアウト時: 左カラム上方グローバルメニューをブロックごと非表示 */
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-primary="1"][hidden] {
  display: none !important;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-shell-right="1"] {
  min-width: 0;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  padding: 0.65rem;
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  border-radius: var(--trust-radius-md);
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"][hidden] {
  display: none;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > .container.platform-workspace {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #generatorContainer,
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer,
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #documentsContainer {
  width: 100%;
  max-width: none;
}

/* 履歴ページ: 右カラム全幅でテーブル・レイアウトを表示 */
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer {
  box-sizing: border-box;
  padding: 0.75rem 1rem;
}

/* 使い方ガイドページ: 右カラムを他メニューページと同様に表示（左カラムが下に押されない） */
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #documentsContainer {
  box-sizing: border-box;
  padding: 0.75rem 1rem;
}
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #documentsContainer .docs-layout {
  width: 100%;
  min-width: 0;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer .history-layout {
  width: 100%;
  min-width: 0;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer .hist-table-wrapper,
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer .hist-detail-wrapper {
  min-width: 0;
}

/* テーブルコンポーネントの横幅を #historyContainer に合わせる（レイアウト1カラムで全幅） */
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer .hist-table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* workspace-shell + wide-mode: テーブル除去 & 詳細全幅 */
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer .history-layout.detail-open.wide-mode .hist-table-wrapper {
  display: none !important;
}
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer .history-layout.detail-open.wide-mode {
  align-items: stretch;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-main-panel="1"] > #historyContainer .hist-table-wrapper table {
  width: 100%;
  max-width: 100%;
}

body[data-workspace-shell="1"].has-main-sidebar .brand-header.platform-header {
  max-width: var(--workspace-shell-max-width);
  margin: 0.75rem auto 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 1040px) {
  body[data-workspace-shell="1"].has-main-sidebar [data-workspace-shell-layout="1"] {
    grid-template-columns: 1fr;
    padding-top: 0.6rem;
  }

  body[data-workspace-shell="1"].has-main-sidebar [data-workspace-shell-left="1"] {
    position: static;
  }
}

/* Auth modal hardening: keep signin/signup/password dialogs non-glass */
body :is(#signinModal, #signupModal, #changePwModal) {
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
  box-shadow: var(--trust-shadow-lg);
  backdrop-filter: none;
}

body :is(#signinModal, #signupModal, #changePwModal)::before {
  display: none;
  opacity: 0;
  backdrop-filter: none;
}

body :is(#signinModal, #signupModal, #changePwModal)::backdrop {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: none;
}

body :is(#signinModal, #signupModal, #changePwModal) form {
  background: transparent;
}

body :is(#signinModal, #signupModal, #changePwModal) :is(input, textarea, select) {
  background: var(--trust-surface-elevated);
}

/* Workspace shell sidebar nav/account stabilization */
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-shell-left="1"] {
  gap: 0.75rem;
}

body[data-workspace-shell="1"].has-main-sidebar .platform-primary-nav--sidebar-main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem;
}

body[data-workspace-shell="1"].has-main-sidebar .platform-primary-nav--sidebar-main .brand-nav-btn {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.52rem 0.8rem;
  justify-content: flex-start;
  font-size: 0.92rem;
  line-height: 1.2;
  color: #ffffff;
  background: color-mix(in srgb, var(--trust-primary) 84%, white);
  border: 1px solid color-mix(in srgb, var(--trust-border) 68%, white);
}

/* 表示中ページに合わせて左カラムメニューをハイライト */
body[data-workspace-shell="1"].has-main-sidebar .platform-primary-nav--sidebar-main .brand-nav-btn[aria-current="page"] {
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 50%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--trust-cta) 30%, transparent);
  font-weight: 600;
}

body[data-workspace-shell="1"].has-main-sidebar .platform-primary-nav--sidebar-main .brand-nav-btn[aria-current="page"]:hover,
body[data-workspace-shell="1"].has-main-sidebar .platform-primary-nav--sidebar-main .brand-nav-btn[aria-current="page"]:focus {
  background: color-mix(in srgb, var(--trust-cta) 90%, white);
  border-color: color-mix(in srgb, var(--trust-cta) 60%, white);
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-account="1"] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-account="1"] > #userInfo {
  display: block;
  width: 100%;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-account="1"] .account-menu-wrap {
  margin: 0;
  width: 100%;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-account="1"] .user-badge {
  width: 100%;
  margin: 0;
  min-height: 2.35rem;
  padding: 0.42rem 0.78rem;
  font-size: 0.86rem;
  border-radius: var(--trust-radius-md);
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-global-account="1"] :is(#openSignin, #openSignup, #openAdmin, #openChangePw, #openAccountContext, #openOrgAdmin, #openWritingPolicy, #openGenreEditingPresets, #logoutBtn) {
  width: 100%;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.45rem 0.78rem;
  justify-content: flex-start;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.2;
}

/* Context nav tabs (history/verification) must stay readable */
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"] {
  gap: 0.5rem;
  background: var(--trust-surface-elevated);
  border: 1px solid var(--trust-border);
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"] .brand-nav-btn {
  min-height: 2.2rem;
  padding: 0.4rem 0.72rem;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--trust-primary);
  background: var(--trust-surface);
  border: 1px solid var(--trust-border-strong);
  box-shadow: none;
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"] .brand-nav-btn:hover,
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"] .brand-nav-btn:focus {
  color: #ffffff;
  background: var(--trust-cta);
  border-color: color-mix(in srgb, var(--trust-cta) 40%, white);
}

body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"] .brand-nav-btn.active,
body[data-workspace-shell="1"].has-main-sidebar [data-workspace-context-nav="1"] .brand-nav-btn[aria-current="page"] {
  color: #ffffff;
  background: var(--trust-primary);
  border-color: color-mix(in srgb, var(--trust-primary) 40%, white);
}

/* ========== modules/trust-modal.css（FAQレベル・モーダル統一・カスケード最終層） ========== */
/**
 * Trust Modal — FAQ モーダルと同等のトークン・見出し／キャンセル／モードバッジ
 *
 * 読み込み順: styles.css の末尾から @import せずインライン追記するか、
 * styles.css より後に <link> すること（メイン層より後でカスケードされること）。
 *
 * faq_snippets.css の :root にある --faq-* を参照（未読込ページはフォールバック）。
 */
:root {
  --trust-modal-surface-paper: var(--faq-surface-paper, #fff);
  --trust-modal-title-color: var(--trust-text);
  --trust-modal-subtitle-color: var(
    --faq-text-subtitle-muted,
    color-mix(in srgb, var(--trust-text-secondary) 38%, var(--trust-text))
  );
  --trust-modal-border-cancel: var(
    --faq-border-modal-btn-cancel,
    color-mix(in srgb, var(--trust-cta) 34%, var(--trust-border-strong))
  );
  --trust-modal-border-cancel-hover: var(
    --faq-border-modal-btn-cancel-hover,
    color-mix(in srgb, var(--trust-cta) 48%, var(--trust-border-strong))
  );
  --trust-modal-border-mode-add: var(
    --faq-border-mode-add,
    color-mix(in srgb, var(--trust-cta) 48%, var(--trust-border-strong))
  );
  --trust-modal-border-mode-edit: var(
    --faq-border-mode-edit,
    color-mix(in srgb, var(--trust-primary) 18%, var(--trust-border-strong))
  );
}

/* モーダル見出し: ページ本文と同じ階層色（FAQの h3#faqModalTitle と同等） */
body[class*="page-"] [role="dialog"] .modal-header :is(h1, h2, h3),
body[class*="page-"] [role="dialog"] :is(h1, h2, h3).modal-title,
body[class*="page-"] [role="dialog"] h3.snippets-modal-title,
body[class*="page-"] [role="dialog"] h3.collections-modal-title,
body[class*="page-"] dialog :is(h1, h2, h3):not(.main-title):not(.ai-badge),
[role="dialog"] .modal-header :is(h1, h2, h3),
[role="dialog"] :is(h1, h2, h3).modal-title,
[role="dialog"] h3.snippets-modal-title,
[role="dialog"] h3.collections-modal-title,
dialog :is(h1, h2, h3):not(.main-title):not(.ai-badge) {
  color: var(--trust-modal-title-color);
  background: none;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  border: none;
  box-shadow: none;
}

.verification-result-replace-modal-title {
  color: var(--trust-modal-title-color);
  -webkit-text-fill-color: currentColor;
}

[role="dialog"] .faq-snippets-modal__subtitle,
[role="dialog"] .modal-subtitle {
  color: var(--trust-modal-subtitle-color);
}

/*
 * ヘッダ右上タグ（mode-indicator）— faq_snippets の .faq-snippets-modal-content .mode-indicator と同等の原則
 * （pill・字重・字間・大文字・影・FAQ トークン）
 */
[role="dialog"] .modal-header .mode-indicator,
dialog .modal-header .mode-indicator {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 0.4rem 0.8rem;
  border-radius: var(--faq-radius-pill, 999px);
  font-size: var(--faq-font-chip-sm, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

[role="dialog"] .modal-header .mode-indicator.add-mode,
dialog .modal-header .mode-indicator.add-mode {
  background: color-mix(in srgb, var(--trust-modal-surface-paper) 40%, var(--trust-cta-surface));
  color: var(--trust-cta-hover);
  border: 1px solid var(--trust-modal-border-mode-add);
  box-shadow: var(
    --faq-shadow-mode-pill,
    0 1px 2px color-mix(in srgb, var(--trust-primary) 8%, transparent)
  );
}

[role="dialog"] .modal-header .mode-indicator.edit-mode,
dialog .modal-header .mode-indicator.edit-mode {
  background: var(--trust-modal-surface-paper);
  color: var(--trust-primary);
  border: 1px solid var(--trust-modal-border-mode-edit);
  box-shadow: var(
    --faq-shadow-mode-edit,
    0 1px 2px color-mix(in srgb, var(--trust-primary) 7%, transparent)
  );
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* キャンセル: 紙面＋アクセント境界＋プライマリラベル（FAQ .modal-btn-cancel と同等） */
body[class*="page-"] [role="dialog"] button.modal-btn.modal-btn-cancel,
body[class*="page-"] dialog button.modal-btn.modal-btn-cancel {
  background: var(--trust-modal-surface-paper);
  color: var(--trust-primary);
  border: 1px solid var(--trust-modal-border-cancel);
  box-shadow: none;
}

body[class*="page-"] [role="dialog"] button.modal-btn.modal-btn-cancel:hover,
body[class*="page-"] dialog button.modal-btn.modal-btn-cancel:hover {
  background: color-mix(in srgb, var(--trust-cta-surface) 55%, var(--trust-modal-surface-paper));
  border-color: var(--trust-modal-border-cancel-hover);
  color: var(--trust-text);
}

[role="dialog"] button.modal-btn.modal-btn-cancel,
dialog button.modal-btn.modal-btn-cancel {
  background: var(--trust-modal-surface-paper);
  color: var(--trust-primary);
  border: 1px solid var(--trust-modal-border-cancel);
  box-shadow: none;
}

[role="dialog"] button.modal-btn.modal-btn-cancel:hover,
dialog button.modal-btn.modal-btn-cancel:hover {
  background: color-mix(in srgb, var(--trust-cta-surface) 55%, var(--trust-modal-surface-paper));
  border-color: var(--trust-modal-border-cancel-hover);
  color: var(--trust-text);
}