/*
Theme Name: AI News Desk
Theme URI: https://ai-news-desk.localtest.me/
Author: AI News Desk 編集部
Description: 「AIが取材し、AIが書く」ニュースサイト AI News Desk のためのクラシックPHPテーマ。ビルドツール不要のプレーンCSS。編集ページらしい落ち着いたタイポグラフィと、AIの関与を隠さず明示するUIを主眼に設計。
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-news-desk
*/

/* ==========================================================================
   0. Design tokens
   案B「シグナル」— 2026-08-17 リデザイン採用案。配色・タイポグラフィの出典:
   docs/design-explorations/2026-08-17_white-gothic-redesign.html (.scheme-b)
   ========================================================================== */

:root {
  --font-heading: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-label: "Space Grotesk", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "Zen Kaku Gothic New", monospace;

  --color-bg: #f5f7fb;
  --color-bg-elevated: #ffffff;
  --color-text: #12141c;
  --color-text-muted: #5d6472;
  --color-border: #e1e5ee;
  --color-border-strong: #12141c;
  --color-accent: #3452eb;      /* masthead / links: signal blue */
  --color-accent-warm: #7a3ff2; /* AI disclosure / small highlights: violet */
  --color-tag-bg: #eceffb;

  /* ファクトオンリービュー用: 未確認フラグ(AI開示のvioletとは別の意味を持たせる) */
  --color-caution: #a35b00;
  --color-caution-bg: #fff2dc;
  --color-caution-border: #f0c274;

  --measure: 42em;       /* comfortable reading line length */
  --container: 46rem;    /* index / page container */
  --container-wide: 56rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b0d14;
    --color-bg-elevated: #12151f;
    --color-text: #e7eaf5;
    --color-text-muted: #8d93a8;
    --color-border: #252a3a;
    --color-border-strong: #e7eaf5;
    --color-accent: #7d95ff;
    --color-accent-warm: #b98bff;
    --color-tag-bg: #1a1e2c;

    --color-caution: #f0b74a;
    --color-caution-bg: #2c2210;
    --color-caution-border: #4f3c14;
  }
}

/* 明示的なダークモード切り替え([data-theme="dark"])。現状テーマ切り替えUIは
   実装していないが、prefers-color-schemeだけでなくこの属性でも上書きできる
   ようにしておく(案Bモックアップの二重対応パターンに合わせる)。 */
:root[data-theme="dark"] {
  --color-bg: #0b0d14;
  --color-bg-elevated: #12151f;
  --color-text: #e7eaf5;
  --color-text-muted: #8d93a8;
  --color-border: #252a3a;
  --color-border-strong: #e7eaf5;
  --color-accent: #7d95ff;
  --color-accent-warm: #b98bff;
  --color-tag-bg: #1a1e2c;

  --color-caution: #f0b74a;
  --color-caution-bg: #2c2210;
  --color-caution-border: #4f3c14;
}

/* ==========================================================================
   1. Reset / base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.container--wide {
  max-width: var(--container-wide);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   2. Header / masthead
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 1.75rem 0 1.25rem;
}

.site-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.site-branding {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.site-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
}

.site-title a {
  color: var(--color-text);
  text-decoration: none;
}

.site-tagline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.site-nav {
  align-self: center;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.site-nav a:hover {
  border-bottom-color: var(--color-accent-warm);
}

/* AI disclosure strip under the masthead — always visible, low-key */
.ai-brand-strip {
  background: var(--color-tag-bg);
  border-bottom: 1px solid var(--color-border);
}

.ai-brand-strip__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

/* AIバッジの意匠: 「四角い縁取り+AI文字」(Adobe Illustratorのアプリアイコンに酷似)を廃止し、
   同心円状の信号(シグナル)パルスを表す自作インラインSVGへ変更(2026-08-17)。
   円形の塗りバッジの中にアイコンを置く形状にすることで、角丸四角のロゴマークとは
   明確に異なる見た目にしている。アイコン本体は ains_ai_signal_icon() (functions.php)
   が出力し、ヘッダーの開示帯(このクラス)と記事内AI開示ブロック(.ai-disclosure__badge)
   の両方で使い回す。 */
.ai-brand-strip__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--color-accent-warm);
  color: var(--color-bg-elevated);
  flex: none;
}

.ai-brand-strip__mark svg,
.ai-disclosure__badge svg {
  width: 60%;
  height: 60%;
  display: block;
}

/* ==========================================================================
   3. Article list (index.php)
   ========================================================================== */

.post-list {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4rem;
}

.post-list__heading {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
  margin: 0 0 1.5rem;
}

/* 案B: カード化(背景・枠線・角丸・淡い影)。内部のdate+content 2カラム
   グリッド自体はテンプレート(index.php)の構造を変えずに維持している。 */
.post-card {
  padding: 1.4rem 1.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 8px 20px -16px rgba(20, 30, 80, 0.35);
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.post-card:last-child {
  margin-bottom: 0;
}

.post-card__meta {
  padding-top: 0.3rem;
}

.post-card__date {
  font-family: var(--font-label);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.post-card__kicker {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-tag-bg);
  text-transform: uppercase;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  margin: 0 0 0.6rem;
}

.post-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.post-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-accent);
}

.post-card__excerpt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  max-width: var(--measure);
}

.empty-state {
  padding: 3rem 0;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

/* ==========================================================================
   4. Single article
   ========================================================================== */

.article {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.article__header {
  max-width: var(--measure);
  margin: 0 auto 2.25rem;
}

/* 案B: kickerをピル形状のラベルに(タグ的な「機能」の見せ方) */
.article__kicker {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-tag-bg);
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.article__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.article__meta {
  font-family: var(--font-label);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: 0.85rem;
}

.article__body {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.95;
}

.article__body h2 {
  font-size: 1.4rem;
  margin: 2.4rem 0 1rem;
}

.article__body h3 {
  font-size: 1.15rem;
  margin: 2rem 0 0.85rem;
}

.article__body p {
  margin: 0 0 1.4rem;
}

.article__body a {
  color: var(--color-accent);
}

.article__body ul,
.article__body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
}

.article__body blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 1.25rem;
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-style: italic;
}

.article__body img,
.article__body figure {
  margin: 1.75rem 0;
}

/* AI disclosure block — deliberately distinct from body copy */
.ai-disclosure {
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  padding: 1.1rem 1.25rem;
  background: var(--color-tag-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-warm);
  border-radius: 12px;
  box-shadow: 0 8px 20px -16px rgba(120, 50, 230, 0.35);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

/* AIバッジ本体: 円形の塗りバッジ+同心円シグナルアイコン。
   意匠変更の経緯は .ai-brand-strip__mark 側のコメントを参照。 */
.ai-disclosure__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-accent-warm);
  color: var(--color-bg-elevated);
  margin-top: 0.15rem;
}

.ai-disclosure p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.article__nav {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.article__nav a {
  text-decoration: none;
}

/* ==========================================================================
   5. Static page (page.php)
   ========================================================================== */

.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.page__title {
  font-size: 1.85rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.page__body {
  font-size: 1.05rem;
  line-height: 1.95;
}

.page__body p {
  margin: 0 0 1.4rem;
}

.page__body h2 {
  font-size: 1.3rem;
  margin: 2rem 0 0.85rem;
}

/* 「このサイトについて」ページ: 制作フローの可視化(取材→執筆→査読→
   人間の確認→公開)。カード・ピルなど既存のデザイントークンを流用する。 */
.about-flow {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  counter-reset: none;
}

.about-flow__step {
  flex: 1 1 9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 20px -16px rgba(20, 30, 80, 0.35);
}

.about-flow__step--publish {
  border-color: var(--color-accent-warm);
}

.about-flow__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-tag-bg);
  color: var(--color-accent);
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
}

.about-flow__step--publish .about-flow__num {
  background: var(--color-accent-warm);
  color: var(--color-bg-elevated);
}

.about-flow__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.15rem;
}

.about-flow__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

.about-flow__desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer {
  border-top: 3px solid var(--color-border-strong);
  background: var(--color-bg);
  margin-top: 2rem;
}

.site-footer__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 2.5rem;
}

.site-footer__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.site-footer__disclosure {
  max-width: 42em;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 1.1rem;
}

.site-footer__meta a {
  color: var(--color-text-muted);
}

/* 訂正カウンター(タスク3) — 隠さない・誇張しない透明性表示 */
.site-footer__corrections {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 1.1rem;
}

.site-footer__corrections b {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text);
}

/* ==========================================================================
   7. ファクトオンリービュー / 査読ログ
   ========================================================================== */

/* --- トグルスイッチ共通(全体トグル・個別トグルで共用) --- */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.88rem;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.toggle__track {
  width: 2.6rem;
  height: 1.5rem;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  border-radius: 999px;
  position: relative;
  flex: none;
  transition: background 0.15s ease;
}

.toggle__thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.toggle input:checked + .toggle__track {
  background: var(--color-accent);
}

.toggle input:checked + .toggle__track .toggle__thumb {
  transform: translateX(1.1rem);
  background: var(--color-bg-elevated);
}

.toggle input:focus-visible + .toggle__track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 全体トグル(header.php内) */
.toggle--global {
  margin-left: auto;
  font-size: 0.78rem;
}

/* 全体トグル操作時の保存確認テキスト(即時フィードバックUX)。
   トグル自体は「次回以降の既定値」を変えるだけで見た目がその場で
   変わらないことがあるため、操作した事実をテキストで一時的に示す。 */
.toggle__feedback {
  font-size: 0.75rem;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.toggle__feedback.is-visible {
  opacity: 1;
}

/* --- 確認状況サマリー + 個別トグル(記事本文の直前) --- */
.verify-bar {
  max-width: var(--measure);
  margin: 0 auto 2.2rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 20px -16px rgba(20, 30, 80, 0.35);
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.verify-bar__stats {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-label);
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.verify-bar__stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.verify-bar__stat b {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.verify-bar__stat--caution b {
  color: var(--color-caution);
}

/* --- 未確認区間(著者記法の <div class="uncertain" data-reason="…"> を
   functions.php の ains_process_uncertain_blocks() が展開した構造) --- */
.uncertain {
  margin: 0 0 1.4rem;
  padding: 1rem 1.15rem 0.85rem;
  background: var(--color-caution-bg);
  border: 1px solid var(--color-caution-border);
  border-left: 4px solid var(--color-caution);
  border-radius: 12px;
}

.uncertain > p:last-of-type {
  margin-bottom: 0.6rem;
}

.uncertain__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--color-caution);
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.uncertain__label::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-caution);
  flex: none;
}

.uncertain__why {
  margin: 0;
  padding: 0;
}

.uncertain__why summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--color-caution);
  list-style: none;
}

.uncertain__why summary::-webkit-details-marker {
  display: none;
}

.uncertain__why summary::before {
  content: "根拠を見る ▸";
}

.uncertain__why[open] summary::before {
  content: "根拠を隠す ▾";
}

.uncertain__why-body {
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-caution-border);
  border-radius: 12px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* 折りたたみ済み(facts-onlyオン時)のプレースホルダー。既定では非表示 */
.uncertain__collapsed {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-caution);
}

.uncertain__collapsed-icon {
  flex: none;
}

/* facts-only モード: 個別トグル(#facts-only)の状態でCSSのみで切り替える */
.article-body-wrap:has(#facts-only:checked) .uncertain__full {
  display: none;
}

.article-body-wrap:has(#facts-only:checked) .uncertain {
  padding: 0.7rem 1.15rem;
}

.article-body-wrap:has(#facts-only:checked) .uncertain__collapsed {
  display: flex;
}

.article-body-wrap:has(#facts-only:checked) .uncertain__label {
  display: none;
}

/* --- 査読ログ(タスク2) — 「根拠を見る」と同じ視覚パターンを流用 --- */
.review-log {
  max-width: var(--measure);
  margin: 1.75rem auto 0;
}

.review-log__summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  list-style: none;
}

.review-log__summary::-webkit-details-marker {
  display: none;
}

.review-log__summary::before {
  content: "▸ ";
}

.review-log__details[open] > .review-log__summary::before {
  content: "▾ ";
}

.review-log__body {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.review-log__body ul {
  margin: 0;
  padding-left: 1.2rem;
}

.review-log__body li {
  margin-bottom: 0.5rem;
}

.review-log__body p {
  margin: 0;
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .site-title {
    font-size: 1.6rem;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* .site-nav の align-self: center(通常時、baseline中央揃え用)が
     縦積みレイアウトでも残ってしまい、タイトル・タグラインは左寄せなのに
     ナビだけ中央寄せになる不揃いが発生していた。縦積み時は左寄せに揃える。 */
  .site-nav {
    align-self: flex-start;
    margin-top: 0.4rem;
  }

  .post-card {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1.1rem 1.15rem;
  }

  .post-card__meta {
    padding-top: 0;
  }

  .article__title {
    font-size: 1.55rem;
  }

  .article__body {
    font-size: 1.02rem;
  }

  .ai-disclosure {
    flex-direction: column;
  }

  .verify-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .toggle--global {
    margin-left: 0;
  }
}