/* ============================================================
   黒基調テーマ「夜の工房」 body.theme-black で適用
   - クリームを深い焦茶黒に反転し、琥珀と生成りで温度を残す
   - 画面左下のトグルボタンで craft.css（白基調）と切替
   ============================================================ */

/* 再読み込み時の白フラッシュ防止（craft.jsが描画前に付与） */
html.theme-black-early { background: #191712; }

body.theme-black {
  --cream: #191712;       /* 背景（焦茶黒） */
  --panel: #221f19;       /* カード面 */
  --cha: #ede8dd;         /* 文字（生成り） */
  --cha-usu: #a59c8d;     /* 補助文字 */
  --kohaku: #d59a4c;      /* 琥珀（黒地向けに少し明るく） */
  --line: #37322a;        /* 罫線 */
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* ヘッダー・メニューの明色地を反転 */
body.theme-black .header.is-scrolled {
  background: rgba(25, 23, 18, .9);
  box-shadow: 0 1px 0 var(--line);
}
body.theme-black .mnav { background: rgba(25, 23, 18, .97); }

/* 写真面のプレースホルダー地 */
body.theme-black .ph { background: #2a261f; }

/* 同心円・目盛り線を生成りに */
body.theme-black .page-hero::before {
  background: repeating-radial-gradient(circle at center, transparent 0 108px, rgba(237, 232, 221, .07) 108px 109px);
}
body.theme-black .rings-bg::before {
  background: repeating-radial-gradient(circle at center, transparent 0 118px, rgba(237, 232, 221, .07) 118px 119px);
}

/* 縦英字ウォーターマーク（クリーム地では白ベタ→黒地ではごく薄く） */
body.theme-black .vwm { color: #ede8dd; opacity: .08; }

/* マーキーの文字色 */
body.theme-black .marquee-track span { color: rgba(237, 232, 221, .18); }

/* 縦書きタブ見出し（白ラベル→焦茶ラベル） */
body.theme-black .tate-title span {
  background: #2a261f;
  color: var(--cha);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}

/* 事例ピックアップのタグ（黒地に沈まないよう面を持たせる） */
body.theme-black .voice-slide .tags span { background: #352f26; color: var(--cha); }

/* 表組みの見出し面 */
body.theme-black .def-table th { background: rgba(213, 154, 76, .1); }

/* ============================================================
   テーマ切替ボタン（両テーマ共通で使用）
   ============================================================ */
.theme-toggle {
  position: fixed;
  left: max(14px, 2.6vw);
  bottom: 18px;
  z-index: 115;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gara);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--cha);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.theme-toggle::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: linear-gradient(90deg, #191712 50%, #f3f4ef 50%);
}
.theme-toggle:hover { border-color: var(--kohaku); color: var(--kohaku); }
@media (max-width: 900px) {
  .theme-toggle { font-size: 0.66rem; padding: 8px 14px; }
}