/* ブンリンAIラボ — journal.css の上にブランド差分だけを重ねる。
   白基調は共通、差し色を紫系へ変えて Le Journal と別ブランドと分かる見た目にする。 */
:root {
  /* 白基調で確定した紙面（journal.spec §7.1 と同じ）。ブラウザの自動ダーク化に
     反転させない */
  color-scheme: light;
  --accent: #6741d9;   /* バイオレット（journal のオレンジと差別化） */
  --link: #1a5fb4;
}

/* 文字中心の紙面（サムネイル運用をしないため縦横比枠を使わない） */
.lead-textonly { display: block; }
.lead-textonly .lead-body { padding: 20px 24px; }
.card-meta .chip-cat { margin-right: 8px; }
/* メタ行（カテゴリチップ＋日付）とタイトルの間隔（2026-08-31 ユーザー指定: 5px 以上） */
.lead-textonly .lead-title { margin-top: 8px; }

/* タイトル一覧（2026-09-01 カード型グリッドから移行。一画面あたりの見出し数を優先し、
   抜粋・日付は一覧に出さない — 日付は記事面で表示する） */
.headline-list { border-top: 1px solid var(--line); }
.headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.headline .chip-cat { flex: none; }
.headline-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.55; }
.headline-title a { color: var(--ink); }
/* 一覧内の PR 枠は記事行と同じ体裁に捩じ込む（枠なし白背景・チップ幅の PR バッジ・
   タイトルのみ。説明文は一覧では出さない） */
.headline-list .ad-slot {
  background: none; border: none; border-radius: 0;
  margin: 0; padding: 10px 4px; min-height: 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 10px;
}
.headline-list .ad-label {
  flex: none; margin-bottom: 0;
  /* チップ（font-size 12px・5em ＋ padding 16px ＝ 76px）と同幅に。1px ボーダー分を引く */
  font-size: 12px; min-width: calc(5em - 2px);
  text-align: center; box-sizing: content-box;
  padding: 2px 8px; border-radius: 4px;
  background: #fff;
}
.headline-list .ad-headline { margin-top: 0; font-size: 15px; font-weight: 600; line-height: 1.55; }
.headline-list .ad-body { display: none; }

/* モバイルのナビは横スクロールさせず多段に折り返す（8 項目は 1 画面幅に収まらず、
   スクロール可能と伝わらないままぶつ切りに見えるため） */
@media (max-width: 600px) {
  .band-nav { flex-wrap: wrap; overflow-x: visible; }
}

/* カテゴリ色 */
.cat-news { --cat: #1a5fb4; }
.cat-releases { --cat: #2b8a3e; }
.cat-models { --cat: #b0483a; }
.cat-cloud { --cat: #0b7285; }
.cat-hardware { --cat: #5c5f66; }
.cat-features { --cat: #6741d9; }

/* 記事面: 見出しブロックと本文の左右幅を揃える（journal.css は本文だけ 720px で、
   見出し・タグ・罫線がコンテナ幅いっぱいに伸びて段違いになる） */
.article { max-width: 720px; margin-left: auto; margin-right: auto; }

/* SNS 共有（素のインテントリンク。ウィジェット・スクリプトなし） */
/* 記事トップの共有アイコン — カテゴリチップの行の右寄せ */
.article-topline { display: flex; align-items: center; justify-content: space-between;
                   gap: 12px; }
.share-icons { display: flex; gap: 6px; align-items: center; }
.share-icon { display: inline-flex; line-height: 0; opacity: .92; }
.share-icon:hover { opacity: 1; }
.share-icon svg { width: 26px; height: 26px; display: block; }

.share { display: flex; align-items: center; justify-content: flex-end;
         margin: 28px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.share-label { font-size: 13px; color: var(--ink-dim); margin-right: 4px; }

/* フッタも中央寄せ（記事ブロックを中央へ寄せたのに合わせる） */
.jfooter .inner { text-align: center; }
.jfooter .footnav { justify-content: center; }

/* モデル評価レポート等の本文表組み（ベンチマーク表を Markdown table で描く） */
.article-body table {
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.article-body th, .article-body td {
  border: 1px solid var(--line);
  padding: 6px 12px;
  text-align: left;
  white-space: nowrap;
}
.article-body th { background: var(--page); }

/* レポート風の節見出し */
.article-body h2 {
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  margin-top: 32px;
  font-size: 19px;
}
/* カテゴリ幅は最長の「モデル評価」に合わせて統一（一覧の見出し開始位置を揃える） */
.chip-cat { background: var(--cat, var(--accent)); color: #fff;
            min-width: 5em; text-align: center; box-sizing: content-box; }

.page-note { color: var(--ink-dim); font-size: 14px; margin: -6px 0 20px; }

/* 問い合わせはCookieを使わない通常POST。入力欄を記事本文と同じ幅・色に揃える。 */
.contact-form { display: grid; gap: 18px; margin-top: 24px; }
.contact-field { display: grid; gap: 6px; }
.contact-field label, .contact-agree { font-weight: 600; }
.contact-field input, .contact-field select, .contact-field textarea {
  box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: 5px;
  background: var(--paper); color: var(--ink); font: inherit; padding: 9px 10px;
}
.contact-field textarea { line-height: 1.55; resize: vertical; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-agree { display: block; font-size: 14px; line-height: 1.55; }
.contact-submit { justify-self: start; border: 0; border-radius: 5px; padding: 10px 18px;
                  background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.contact-submit:hover { filter: brightness(.92); }
.contact-error { border-left: 4px solid #b42318; background: #fff1f0; color: #5a1510;
                 padding: 10px 12px; }
.contact-result { border: 1px solid var(--line); border-left: 4px solid var(--accent);
                  background: var(--page); padding: 16px; margin-top: 20px; }
.contact-result h2 { margin: 18px 0 8px; font-size: 18px; }
.contact-result p { white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-received { font-weight: 700; }
.contact-delivery { color: var(--ink-dim); font-size: 14px; }

/* アソシエイトガジェット。広告であることが一目で分かる PR 表示を付け、
   Cookie や外部 SDK を使わず、検証済みの商品リンクへ直接遷移する。 */
.affiliate-gadget {
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--page);
  box-sizing: border-box;
}
.article-body .affiliate-gadget-inline { margin: 24px 0; }
.affiliate-gadget-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 14px 0;
}
.affiliate-gadget-label {
  color: #fff; background: var(--accent); border-radius: 4px;
  padding: 2px 7px; font-size: 11px; font-weight: 700;
}
.affiliate-gadget-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 10px 14px 14px;
  color: var(--ink);
}
.affiliate-gadget-link.has-image {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 252px;
}
.affiliate-gadget-link:hover { text-decoration: none; }
.affiliate-gadget-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 14px 14px;
}
.affiliate-gadget-product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.affiliate-gadget-product.has-image {
  display: block;
  padding: 0;
  overflow: hidden;
}
.affiliate-gadget-product:hover { text-decoration: none; }
.affiliate-gadget-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 128px;
  max-height: 220px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.affiliate-gadget-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
}
.affiliate-gadget-link.has-image .affiliate-gadget-media {
  min-height: 250px;
  max-height: none;
  border: 0;
  border-radius: 0;
}
.affiliate-gadget-link.has-image .affiliate-gadget-media img { max-height: 250px; }
.affiliate-gadget-product.has-image .affiliate-gadget-media {
  min-height: 200px;
  border: 0;
  border-radius: 0;
}
.affiliate-gadget-product.has-image .affiliate-gadget-media img { max-height: 240px; }
.affiliate-gadget-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.affiliate-gadget-link.has-image .affiliate-gadget-copy {
  justify-content: space-between;
  align-items: flex-end;
  padding: 14px;
  background: var(--page);
}
.affiliate-gadget-title { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.affiliate-gadget-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.affiliate-gadget-facts b { color: var(--ink); font-weight: 600; }
.affiliate-gadget-cta { color: var(--link); font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) {
  .affiliate-gadget {
    width: 100%;
    margin-top: 20px;
  }
  .affiliate-gadget-head { padding-left: 12px; padding-right: 12px; }
  .affiliate-gadget-link {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px 12px;
  }
  .affiliate-gadget-products {
    gap: 10px;
    padding: 10px 12px 12px;
  }
  .affiliate-gadget-link.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 164px; }
  .affiliate-gadget-media {
    width: 100%;
    min-height: 0;
    max-height: 180px;
  }
  .affiliate-gadget-media img { max-height: 180px; }
  .affiliate-gadget-link.has-image .affiliate-gadget-media { min-height: 162px; }
  .affiliate-gadget-link.has-image .affiliate-gadget-media img { max-height: 162px; }
  .affiliate-gadget-product.has-image .affiliate-gadget-media { min-height: 130px; }
}
/* 特集共通の断り（記事本文の外。テンプレート側で features だけに出す） */
.feature-note { margin: 32px 0 0; padding: 14px 16px; border: 1px solid var(--line);
                border-left: 4px solid var(--accent); background: var(--page);
                font-size: 14px; color: var(--ink-dim); }
.feature-note p { margin: 0; }
.feature-note-title { font-weight: 600; color: var(--ink); margin-bottom: 4px !important; }

/* リリース時系列 */
.project-list { list-style: none; margin: 0; padding: 0; }
.project-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.project-name { font-weight: 700; font-size: 16px; }
.project-meta { color: var(--ink-dim); font-size: 13px; }

/* 関連記事（広告下の回遊導線） */
.related-list { list-style: none; margin: 0; padding: 0; }
.related-list li {
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}
.related-list .related-title { font-weight: 600; flex: 1; min-width: 0; }

/* 発言年表（時点ベースの縦タイムライン。2026-09-01 に人物列マトリクスから移行） */
.statement-feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.feed-entry {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.feed-date { color: var(--ink-dim); font-size: 13px; white-space: nowrap; }
.statement { margin: 0 0 8px; line-height: 1.55; }
.statement:last-child { margin-bottom: 0; }
/* 行動主体バッジ（発言者名＝青・出来事＝緑・モデル発表＝紫。色とバッジで見分ける） */
.st-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
  color: #fff;
  padding: 1px 7px;
  margin-right: 6px;
  vertical-align: 1px;
  white-space: nowrap;
  /* 幅は最長の人物名（現状 9 文字）に合わせて統一。それ以上は個別に広がる */
  min-width: 9em;
  text-align: center;
  box-sizing: content-box;
}
.st-badge-person { background: #1a5fb4; }
.st-badge-event { background: #2b8a3e; }
.st-badge-model { background: var(--accent); }
@media (max-width: 600px) {
  .feed-entry { grid-template-columns: 1fr; gap: 2px; }
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-entry {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.timeline-date { color: var(--ink-dim); font-size: 13px; white-space: nowrap; }
/* タイトルとリンクを 1 行に — 出典・要約記事は右寄せ（2026-09-01 ユーザー指示） */
.timeline-body { display: flex; align-items: baseline; gap: 12px; }
.timeline-title { font-weight: 600; flex: 1; min-width: 0; }
.timeline-links { font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) {
  .timeline-entry { grid-template-columns: 1fr; gap: 2px; }
}

/* カテゴリ別リリース索引。項目は日付と内部記事名だけに絞る。 */
.library-layout { display: grid; grid-template-columns: minmax(190px, 0.32fr) minmax(0, 1fr); gap: 34px; }
.library-nav { border-right: 1px solid var(--line); padding-right: 22px; }
.library-nav nav { display: grid; gap: 3px; }
.library-nav nav a { padding: 8px 10px; border-radius: 4px; color: var(--ink-dim); }
.library-nav nav a.on { background: var(--accent); color: #fff; font-weight: 700; }
.library-records .page-title { margin-top: 0; }
.library-timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.library-timeline li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.library-timeline time { color: var(--ink-dim); font-size: 13px; white-space: nowrap; }
.library-timeline a { font-weight: 600; }
@media (max-width: 600px) {
  .library-layout { display: block; }
  .library-nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 18px; margin-bottom: 22px; }
  .library-timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* ホームの人気記事（閲覧数上位。ainews.py の _popular_articles） */
.popular { margin: 18px 0 6px; }
/* 閲覧数上位はすべてカード（先頭の最新記事と同じ .lead の体裁を 2 列に並べる。2026-09-03） */
.popular-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.popular-card { margin: 0; }
.popular-card .lead-body { padding: 16px 18px; }
.popular-card .lead-title { font-size: 17px; line-height: 1.5; }
.popular-card .lead-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 700px) {
  .popular-cards { grid-template-columns: 1fr; }
}