/*
  Insights（ブログ）専用スタイル。
  参照: ~/.claude/skills/web-design.md（幅・余白・文字サイズ・文字色の初期値）
  - 本文幅は style.css の .wrap（min(80%, 1000px)）に従い、ここで独自に狭めない。
  - 段落・記事本文は最大 70ch（style.css の .section-lead と同じ考え方）。
  - 日付・種別ラベル・注記もすべて本文と同じ濃さ（var(--ink)）で表示する。薄いグレーは使わない。
  - 文字サイズは .8rem（html { font-size: 17px } のため 13.6px 相当）を下限にする。
  - 角丸は使わない（style.css の方針を踏襲）。
*/

/* ---------- プレビュー帯 ---------- */
.insight-preview-banner {
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: var(--space-xs) var(--space-s);
}

/* ---------- パンくず・メタ情報（記事ページ） ---------- */
.insight-breadcrumb {
  font-size: 0.8rem;
  color: var(--ink);
  margin: 0 0 var(--space-xs) 0;
}

.insight-breadcrumb a {
  color: var(--blue);
}

.insight-meta {
  font-size: 0.8rem;
  color: var(--ink);
  margin: 0 0 var(--space-xs) 0;
}

.insight-type {
  font-weight: 700;
}

/* ---------- 記事本文 ---------- */
/* 段落・見出し・リスト・引用だけを 70ch に収める。表と写真は器（.wrap＝画面の80%・最大1000px）の幅まで使う
   （記事全体を 70ch に絞ると、表が押し込まれて窮屈になり、右側に大きな空きができるため・2026-09-19） */
.insight-content > p,
.insight-content > h2,
.insight-content > h3,
.insight-content > ul,
.insight-content > ol,
.insight-content > blockquote {
  max-width: 70ch;
}

.insight-content p {
  margin: 0 0 var(--space-s) 0;
  text-align: left;
}

/* 見出しの前は1行ぶん空け、表の後ろは段落と同じだけ空ける（表の直後の文が表にくっつかないように） */
.insight-content h2,
.insight-content h3 {
  margin-top: var(--space-m);
}

.insight-content table {
  margin: 0 0 var(--space-s) 0;
}

.insight-content blockquote {
  margin: 0 0 var(--space-s) 0;
  padding-left: var(--space-s);
  border-left: 3px solid var(--amber);
}

.insight-content li {
  margin: 0 0 var(--space-xs) 0;
  text-align: left;
}

.insight-content h2 {
  font-size: 1.5rem;
}

.insight-content h3 {
  font-size: 1.15rem;
}

.insight-content img {
  width: 100%;
  height: auto;
}

.insight-content figure {
  margin: 0 0 var(--space-s) 0;
}

.insight-content figcaption {
  font-size: 0.8rem;
  color: var(--ink);
  margin-top: var(--space-xs);
}

/* ---------- Sources ---------- */
.insight-sources {
  max-width: 70ch;
  margin-top: var(--space-l); /* 本文とは別の節として64pxあける */
}

.insight-sources h2 {
  font-size: 1.25rem;
}

.insight-sources ul {
  margin: 0;
  padding-left: 1.25rem;
}

.insight-sources li {
  margin: 0 0 var(--space-xs) 0;
  text-align: left;
}

/* ---------- 免責・導線・更新日（関連要素なので16px以下で詰める） ---------- */
.insight-notes {
  max-width: 70ch;
  margin-top: var(--space-l); /* Sourcesの有無に関わらず本文からは64pxあける */
}

.insight-notes p {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.9rem;
  color: var(--ink);
  text-align: left;
}

/* ---------- 一覧ページ ---------- */
.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.insight-list-item {
  border-top: 1px solid var(--line);
  padding-block: var(--space-m);
}

.insight-list-item:first-child {
  border-top: none;
}

.insight-list-meta {
  font-size: 0.8rem;
  color: var(--ink);
  margin: 0 0 var(--space-xs) 0;
}

.insight-list-item h2 {
  font-size: 1.35rem;
  margin: 0 0 var(--space-xs) 0;
}

.insight-list-item h2 a {
  color: var(--ink);
  text-decoration: none;
}

.insight-list-item h2 a:hover,
.insight-list-item h2 a:focus {
  color: var(--blue);
}

.insight-list-item p {
  margin: 0;
  max-width: 70ch;
  text-align: left;
}

.insight-empty {
  font-size: 1rem;
  color: var(--ink);
}