/* ============================================================
   Epstein Exposure — 共通スタイルシート
   epsteinexp.com / style.css
   仕様書：epsteinexp_specification.md v2.0（パターンC）
   ============================================================ */

/* ===== CSS変数 ===== */
:root {
  --bg:            #203f6c;   /* DOJ参照ネイビー */
  --text:          #dde6ee;   /* スモーキーホワイト */
  --epstein:       #ffcb47;   /* ディープアンバー：エプスタイン */
  --gates:         #4db8ff;   /* コーポレートブルー：ビル・ゲイツ */
  --person:        #ff8fa3;   /* ローズ：その他重要人物 */
  --date-ctx:      #ff6b6b;   /* アラートレッド：文脈上の重要日付 */
  --accent:        #a8c8e8;   /* アイスブルー：組織名・補色キーワード */
  --quote-bg:      #f5f0e8;   /* エージドペーパー：引用ブロック背景 */
  --quote-text:    #3a3a3a;   /* ニアブラック：引用ブロック文字 */
  --quote-border:  #ffcb47;   /* 引用ブロック左枠線 */
  --max-width:     800px;

  /* フィボナッチ余白スケール */
  --sp-1:  8px;
  --sp-2: 13px;
  --sp-3: 21px;
  --sp-4: 34px;
  --sp-5: 55px;
  --sp-6: 89px;
  --sp-7: 144px;

  /* ── index.html 互換エイリアス（既存定義を参照） ── */
  --color-text:         var(--text);
  --color-accent:       var(--accent);
  --color-border:       rgba(221,230,238,0.12);
  --color-kw-epstein:   var(--epstein);
  --color-kw-gates:     var(--gates);
  --color-kw-person:    var(--person);
  --color-date-context: var(--date-ctx);
  --content-max:        var(--max-width);
  --font-body:          'Noto Serif JP', 'Georgia', serif;
  --font-ui:            'DM Sans', sans-serif;
  --font-mono:          'JetBrains Mono', monospace;
}

/* ===== リセット・ベース ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--text);
  text-decoration: underline;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Noto Serif JP', 'Georgia', serif;
  font-size: 16px;
  line-height: 1.8;
  /* モバイル：左右3.82%（黄金比 ≈ 1/26 ≈ フィボナッチ比率） */
  padding: 0 3.82%;
}

/* ===== レイアウト ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ===== サイトヘッダー ===== */
.site-header {
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid rgba(221,230,238,0.15);
  margin-bottom: var(--sp-5);
}

.site-header .site-name {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.site-header .site-name:hover {
  color: var(--text);
}

/* ===== 記事ヘッダー ===== */
.article-header {
  margin-bottom: var(--sp-5);
}

.article-header .category-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--epstein);
  border: 1px solid var(--epstein);
  padding: 3px var(--sp-2);
  margin-bottom: var(--sp-3);
}

.article-header h1 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--sp-3);
  color: var(--text);
}

.article-header .lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--accent);
  border-left: 3px solid var(--epstein);
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.article-meta {
  font-size: 12px;
  color: rgba(221,230,238,0.5);
  letter-spacing: 0.05em;
}

/* ===== 目次（TOC）===== */
.toc {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(221,230,238,0.12);
  border-left: 3px solid var(--epstein);
  /* モバイル：縦 var(--sp-3)、横 4.72%（≒ sp-4/800px×80%） */
  padding: var(--sp-3) 4.72%;
  margin: var(--sp-5) 0;
}

.toc-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--epstein);
  margin-bottom: var(--sp-3);
}

.toc ol {
  list-style: none;
  counter-reset: toc-counter;
  padding: 0;
}

.toc ol li {
  counter-increment: toc-counter;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 5px 0;
  border-bottom: 1px solid rgba(221,230,238,0.06);
}

.toc ol li:last-child {
  border-bottom: none;
}

.toc ol li::before {
  content: counter(toc-counter) ".";
  color: var(--epstein);
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  flex-shrink: 0;
}

.toc ol li a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.toc ol li a:hover {
  color: var(--epstein);
}

/* 目次アクティブ状態（JS連動） */
.toc ol li.toc-active::before {
  color: var(--gates);
}

.toc ol li.toc-active a {
  color: var(--gates);
}

/* ===== セクション ===== */
section {
  margin-bottom: var(--sp-5);
  padding-top: var(--sp-4);
}

section h2 {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(221,230,238,0.12);
}

section h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
  margin: var(--sp-4) 0 var(--sp-2);
}

section p {
  margin-bottom: var(--sp-2);
}

/* ===== キーワードハイライト ===== */
.kw-epstein      { color: var(--epstein); font-weight: 600; }
.kw-gates        { color: var(--gates);   font-weight: 600; }
.kw-person       { color: var(--person);  font-weight: 600; }
.kw-date-context { color: var(--date-ctx); font-weight: 600; }
.kw-accent       { color: var(--accent);  font-weight: 600; }

/* ===== 証拠引用ブロック ===== */
.evidence-quote {
  background: var(--quote-bg);
  color: var(--quote-text);
  border-left: 4px solid var(--quote-border);
  /* モバイル：縦 var(--sp-3)、横 3.82%（黄金比スケール） */
  padding: var(--sp-3) 3.82%;
  margin: var(--sp-4) 0;
  border-radius: 0 4px 4px 0;
}

.evidence-quote p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: var(--sp-2);
  color: var(--quote-text);
}

.evidence-quote cite {
  display: block;
  font-size: 12px;
  color: #777;
  font-style: normal;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(0,0,0,0.1);
}

.evidence-quote cite a {
  color: #888;
  text-decoration: underline;
}

/* ===== SNSシェアボタン ===== */
.share-buttons {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(221,230,238,0.1);
}

.share-buttons button {
  background: transparent;
  border: 1px solid rgba(221,230,238,0.2);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px var(--sp-3);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.share-buttons button:hover {
  border-color: var(--epstein);
  color: var(--epstein);
}

.share-copy.copied {
  border-color: var(--gates);
  color: var(--gates);
}

/* ===== フッター ===== */
.site-footer {
  margin-top: var(--sp-7);
  padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px solid rgba(221,230,238,0.12);
  font-size: 12px;
  color: rgba(221,230,238,0.4);
  text-align: center;
}

.site-footer a {
  color: inherit;
}

/* ===== レスポンシブ ===== */
@media (min-width: 600px) {
  /* タブレット小：6.18%（黄金比 ≒ 1/16.18） */
  body { padding: 0 6.18%; }
}

@media (min-width: 768px) {
  /* タブレット：8.09%（6.18×1.309 ≒ フィボナッチ比率） */
  body { padding: 0 8.09%; }

  .toc          { padding: var(--sp-3) var(--sp-4); }
  .evidence-quote { padding: var(--sp-3) var(--sp-4); }
}

@media (min-width: 1024px) {
  body { padding: 0 var(--sp-6); }
}

/* ============================================================
   カテゴリインデックス共通スタイル
   （pandemic/index.html 等で使用）
   ============================================================ */

/* ===== 言語切替リンク ===== */
.lang-switch {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(168,200,232,0.3);
  padding: 3px 10px;
  border-radius: 3px;
  transition: border-color 0.2s, color 0.2s;
}
.lang-switch:hover {
  border-color: var(--epstein);
  color: var(--epstein);
}

/* ===== バッジ ===== */
.badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.badge--new {
  background: rgba(255,203,71,0.12);
  color: var(--epstein);
  border: 1px solid rgba(255,203,71,0.4);
  animation: badge-glow 2.4s ease-in-out infinite;
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,203,71,0); }
  50%       { box-shadow: 0 0 6px 2px rgba(255,203,71,0.25); }
}
.badge--incomplete {
  background: rgba(168,200,232,0.1);
  color: var(--accent);
  border: 1px solid rgba(168,200,232,0.3);
}
.badge--planned {
  background: rgba(168,200,232,0.06);
  color: rgba(168,200,232,0.5);
  border: 1px solid rgba(168,200,232,0.15);
}

/* ===== カテゴリカード ===== */
a.category-card,
a.category-card:visited,
a.category-card:hover,
a.category-card:active {
  color: inherit;
  text-decoration: none;
}
.category-card {
  display: block;
  background: rgba(32,63,108,0.45);
  border: 1px solid rgba(168,200,232,0.15);
  border-left: 3px solid rgba(168,200,232,0.3);
  border-radius: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.category-card:hover {
  background: rgba(32,63,108,0.7);
  border-left-color: var(--epstein);
}
.category-card--new {
  border-left: 3px solid var(--epstein);
}

.cc-status {
  margin-bottom: 6px;
}
.cc-new-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--epstein);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cc-new-label::before {
  content: "★";
  font-size: 8px;
}
.cc-lang {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.cc-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 4px;
  line-height: 1.5;
}
.cc-title-sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}
.cc-desc {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text);
  opacity: 0.85;
  margin: 6px 0 8px;
}
.cc-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--accent);
  opacity: 0.7;
}
.cc-arrow {
  font-size: 1.1rem;
  color: var(--accent);
  opacity: 0.5;
  float: right;
  margin-top: -1.5rem;
}

/* ===== カテゴリグリッド ===== */
.category-grid {
  display: flex;
  flex-direction: column;
}

/* ===== キーパーソンタグ ===== */
.key-persons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-5);
}
.kp-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.kp-tag--epstein { color: var(--epstein); border-color: rgba(255,203,71,0.4);  background: rgba(255,203,71,0.07); }
.kp-tag--gates   { color: var(--gates);   border-color: rgba(77,184,255,0.4);  background: rgba(77,184,255,0.07); }
.kp-tag--person  { color: var(--person);  border-color: rgba(255,143,163,0.4); background: rgba(255,143,163,0.07); }
.kp-tag--org     { color: var(--accent);  border-color: rgba(168,200,232,0.4); background: rgba(168,200,232,0.07); }

/* ===== セクション見出し（インデックス用） ===== */
.section-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(168,200,232,0.25);
  margin-bottom: var(--sp-4);
}

/* ===== パンデミックヘッダー ===== */
.pandemic-header {
  border-left: 4px solid var(--date-ctx);
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.pandemic-header .category-label {
  display: inline-block;
  margin-bottom: var(--sp-2);
}
.pandemic-header p {
  color: var(--text);
  line-height: 1.8;
  margin-top: var(--sp-3);
  font-size: 0.95rem;
}

/* ===== テーマ説明ボックス ===== */
.theme-desc {
  background: rgba(32,63,108,0.5);
  border: 1px solid rgba(168,200,232,0.25);
  border-radius: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text);
}
.theme-desc strong {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-2);
}

/* ============================================================
   データテーブル .data-table（ARTICLE_AGENT_GUIDE §7-1）
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  font-size: 14px;
  line-height: 1.7;
}

.data-table thead tr {
  background: rgba(168,200,232,0.1);
  border-bottom: 2px solid rgba(168,200,232,0.3);
}

.data-table th {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: var(--sp-2) var(--sp-3);
  white-space: nowrap;
}

.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid rgba(221,230,238,0.08);
  color: var(--text);
  vertical-align: top;
}

.data-table tbody tr:hover {
  background: rgba(168,200,232,0.05);
}

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

/* 追加列クラス */
.col-amount {
  font-family: 'JetBrains Mono', monospace;
  color: var(--epstein);
  white-space: nowrap;
}

.col-year {
  font-family: 'JetBrains Mono', monospace;
  color: var(--date-ctx);
  white-space: nowrap;
}

.col-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* ============================================================
   記事固有コンポーネント（agenda21.html / agenda21_en.html）
   ============================================================ */

/* ===== 中間目次 ===== */
.toc-mid {
  background: rgba(32,63,108,0.6);
  border: 1px solid rgba(168,200,232,0.3);
  border-radius: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0;
}
.toc-mid p.toc-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.toc-mid ol {
  list-style: none;
  counter-reset: toc-mid-counter;
  margin: 0;
  padding: 0;
}
.toc-mid ol li {
  counter-increment: toc-mid-counter;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 4px 0;
  border-bottom: 1px solid rgba(168,200,232,0.1);
}
.toc-mid ol li:last-child {
  border-bottom: none;
}
.toc-mid ol li::before {
  content: counter(toc-mid-counter) ".";
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  flex-shrink: 0;
}
.toc-mid ol li a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s;
}
.toc-mid ol li a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ===== 確認済み事実ラベル ===== */
.facts-label {
  display: inline-block;
  background: rgba(168,200,232,0.1);
  border: 1px solid rgba(168,200,232,0.4);
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
}

/* ===== 段落番号バッジ ===== */
.para-num {
  display: inline-block;
  background: rgba(255,203,71,0.12);
  border: 1px solid rgba(255,203,71,0.4);
  color: var(--epstein);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 3px;
  margin-right: 6px;
  letter-spacing: 0.05em;
}

/* ===== 時系列セクション ===== */
.timeline-section {
  border-left: 2px solid rgba(168,200,232,0.3);
  padding-left: var(--sp-4);
  margin: var(--sp-4) 0;
}
.timeline-section + .timeline-section {
  margin-top: var(--sp-5);
}

/* ===== 問いかけ・注目ボックス ===== */
.question-box {
  border: 1px solid rgba(255,107,107,0.5);
  background: rgba(255,107,107,0.05);
  border-radius: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
}
.question-box p { margin-bottom: var(--sp-2); }

/* ===== 結論ボックス ===== */
.conclusion-box {
  border: 1px solid rgba(255,203,71,0.4);
  background: rgba(255,203,71,0.06);
  border-radius: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
}
.conclusion-box p { margin-bottom: var(--sp-2); }
.conclusion-box ol {
  padding-left: 1.4em;
  margin: 0;
}
.conclusion-box ol li {
  margin-bottom: var(--sp-2);
  line-height: 1.8;
}