/* assets/column.css — コラム (オウンドメディア) 専用スタイル。
 *
 * 編集ポリシー: skiresort プロジェクトの編集観 + 2026年の長文閲読ベストプラクティス。
 *   - 本文 17px / line-height 1.8 (--fs-reading, theme.css 定義)
 *   - 1段組 / max-width 680px (長文は狭めが読みやすい)
 *   - chapter divider は `❋` の hr
 *   - pull quote (要所に 1つ)
 *   - 見出しのみ text-wrap: balance（短い見出しの行長均等化）。本文は既定 greedy のまま
 *     （日本語長文で pretty/balance は右側に不自然な余白を作るため使わない）
 *
 * spacing は theme.css の 3トークン (--col-gap-tight/default/section) だけで全て表現。
 * モバイル時は本ファイル末尾のメディアクエリで --col-gap-* を再定義 → 全要素自動スケール。
 *
 * 色・トークンは theme.css 完全準拠。フォールバック値は使わない (audit.css 同様)。
 */

/* ===== ページレイアウト ===== */
/* 外周パディングは縦リズムと別系統 (画面端のフレーム)。
   ただし上下は --col-gap-section と揃えて、最初の要素までの呼吸を統一する。 */
.column-main {
  max-width: 680px;       /* 長文閲読の快適幅 (changelog の 800px より狭い) */
  margin: 0 auto;
  padding: var(--col-gap-section) 20px;
  box-sizing: border-box;
  min-width: 0;           /* 子 (表など) が縮めて良い = 横はみ出しの起点を断つ */
  overflow-x: clip;       /* 万一はみ出しても横スクロールを作らない最終ガード */
}

/* 一覧ページは横を広めに (カードグリッド) */
.column-list-main {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--col-gap-section) 20px;
  box-sizing: border-box;
}

/* ===== パンくず ===== */
.column-breadcrumb {
  font-size: var(--fs-caption);
  color: var(--ink-mute);
  margin-bottom: var(--col-gap-default);
}
.column-breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}
.column-breadcrumb a:hover { color: var(--accent); }
.column-breadcrumb-sep { margin: 0 8px; color: var(--border-strong); }

/* ===== ヒーロー (個別記事) ===== */
/* meta → title → excerpt は同一ユニット (記事の冒頭ブロック)。
   ユニット内は default、ユニット → 本文は section で隔てる。 */
.column-hero { margin-bottom: var(--col-gap-section); }
.column-hero-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  margin-bottom: var(--col-gap-default);
  flex-wrap: wrap;
}
.column-hero-meta-sep {
  width: 3px; height: 3px;
  background: var(--border-strong);
  border-radius: 50%;
}
.column-tag {
  /* 分類チップの共通スタイル。category (アーキタイプ=歴史/ノンフィクション/データ) と
     tag (主題=景表法/薬機法...) は読者視点でどちらも同じ「ラベル」なので、視覚を統一。
     クリッカブルな <a class="column-tag"> は category-{slug}.html / tag-{slug}.html へ。
     カード内の <span class="column-tag"> はリンク不可 (nested <a> 防止) で静的表示のみ。 */
  font-weight: 600;
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  text-decoration: none;
  transition: color 120ms ease;
}
a.column-tag:hover {
  /* hover は <a> 限定。<span class="column-tag"> はリンク不可なので hover 反応しない。 */
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 関連記事セクションの見出し内 tag リンクは見出し色と一致させる。
   ホバー時のみ accent + underline で「クリッカブル」を示す。 */
.column-related-title a {
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease;
}
.column-related-title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 日本語見出しの折返しポリシー（#mobile-headings, 下記4見出し共通）。
   - text-wrap: balance   行長を均等化
   - word-break: normal    日本語は禁則で自然折返し。keep-all は空白の無い日本語だと iOS の
                           auto-phrase 非対応環境で「改行点ゼロ → 横はみ出し」になるため不可。
   - word-break: auto-phrase  対応ブラウザは文節単位で折返し（非対応は normal にフォールバック）
   - line-break: strict    禁則を厳格適用
   - overflow-wrap: anywhere  長い URL / Latin 連続文字列のはみ出し保険 */
.column-title,
.column-article h2,
.column-list-h1,
.column-list-card-title {
  text-wrap: balance;
  word-break: normal;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: anywhere;
}
.column-title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 var(--col-gap-default);
  color: var(--ink);
}
/* リード文（記事の excerpt と一覧の lead）。役割が同じなので同一スタイルに集約。
   本文と同サイズ (17px / line-height 1.8)、色 (ink-soft) でのみ差別化。
   excerpt が複数段落のときの段落間 margin は下の隣接セレクタで付与。 */
.column-excerpt,
.column-list-lead {
  font-size: var(--fs-reading);
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0;
}
.column-excerpt + .column-excerpt {
  /* excerpt が複数段落のとき (frontmatter で \n マーカー使用時)、2つ目以降の <p> に
     本文段落と同じ呼吸 (--col-gap-default = 24px) を開ける。
     詳細は scripts/build-columns.py の excerpt_html 生成ロジック参照。 */
  margin-top: var(--col-gap-default);
}

/* ===== 本文 ===== */
.column-article {
  font-size: var(--fs-reading);
  line-height: 1.8;
  color: var(--ink);
  overflow-wrap: anywhere;   /* 長い URL / Latin 連続文字列が枠を割らない保険 (日本語は無害) */
}
.column-article p {
  margin: 0 0 var(--col-gap-default);
  /* text-wrap は指定しない（既定の greedy）。日本語長文は各行を端まで詰める方が読みやすく、
     pretty/balance は行末を均そうとして右側に不自然な余白を作るため使わない。 */
}
.column-article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.column-article a:hover { color: var(--accent-hover); }

/* h2 — 章テーマ語のみ (skiresort 観: 番号見出しを禁止) */
.column-article h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: var(--col-gap-section) 0 var(--col-gap-default);
  color: var(--ink);
}
.column-article h3 {
  /* body (17px) と同サイズ + 太字のみで差別化。spacing も段落と同じ default で揃え、
     「太字段落」として馴染ませる。h3は使用頻度が低いので階層を強調しなくてよい。 */
  font-size: var(--fs-reading);
  font-weight: 700;
  margin: var(--col-gap-default) 0 var(--col-gap-default);
  color: var(--ink);
}

/* chapter divider — `---` を skiresort 風に `❋` で表現 */
.column-divider {
  border: 0;
  text-align: center;
  margin: var(--col-gap-section) 0;
  height: auto;
}
.column-divider::after {
  content: "❋";
  display: inline-block;
  color: var(--ink-mute);
  font-size: 14px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;     /* letter-spacing の右側を中央へ戻す */
}


/* blockquote — 一次資料からの引用 (body と同サイズ・色と背景で差別化) */
.column-article blockquote {
  margin: var(--col-gap-default) 0;
  padding: 14px 18px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-reading);
  line-height: 1.7;
  color: var(--ink-soft);
}
.column-article blockquote p:last-child { margin-bottom: 0; }

/* テーブル (GFM 風 | a | b |) — 時系列や対比など 2-3列の小規模表で使う想定。
   blockquote と同じ視覚トーン (淡背景 + 細罫線) で本文と区別。横スクロール許容。 */
/* 横スクロールラッパー: 表は内容なりの幅を保ち、超過分はこの中だけが横スクロール。
   display:block を表自身に当てると幅100%に押し込まれ列が潰れるため、外側で包む。 */
.column-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--col-gap-default) 0;
}
.column-table {
  /* width:auto だと overflow ラッパー内でもラッパー幅に収まろうとして列が潰れる。
     max-content で「内容なりの幅」を強制 → ラッパー幅を超えた分だけ横スクロールになる。
     狭い表は min-width:100% で本文幅まで広げる。 */
  width: -webkit-max-content;   /* 古い iOS Safari 向けフォールバック */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-reading);
  line-height: 1.7;
}
.column-table thead { background: var(--bg-subtle); }
.column-table th, .column-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--ink);
  /* 日本語の語境界以外 (例: 「7」と「日」の間) で折り返さない。
     overflow-wrap は明示しない (anywhere は窮屈な列で文字単位の分断を招くため)。
     長すぎる Latin 文字列が来るような複文セル用途はテーブル非適合とし、プローズで書く。 */
  word-break: keep-all;
}
/* 1列目 (日付・カテゴリなど短いラベル想定) は折り返さず 1行確定。
   2列目以降は説明文として通常折り返す。 */
.column-table th:first-child,
.column-table td:first-child {
  white-space: nowrap;
}
.column-table th { font-weight: 600; color: var(--ink-soft); }
.column-table tr:last-child td { border-bottom: none; }

/* リスト (主に参考文献用) */
.column-article ul, .column-article ol {
  margin: 0 0 var(--col-gap-default);
  padding-left: 24px;
}
.column-article li { margin-bottom: var(--col-gap-tight); }

/* code (固有名詞・引用部の monospace) */
.column-article code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ===== FAQ セクション ===== */
/* 物語の後ろに置く「読了後の振り返り」。AI SEO (GEO/AEO) でビッグワード
   ("景表法 とは" "ステマ規制 なぜ" 等) のクエリを拾う役割。
   FAQPage JSON-LD は build-columns.py が自動生成 → ChatGPT/Perplexity 引用率最大化。 */
.column-faq {
  margin-top: var(--col-gap-section);
  padding-top: var(--col-gap-default);
  border-top: 1px solid var(--border);
}
/* FAQ の h2 / h3 / p は本文と同じスケール (24 / 17 / 17) で揃える。
   セクション区別は border-top + h2の ink-soft 色 + 回答の ink-soft 色のみ。 */
.column-faq > h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 var(--col-gap-default);
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.column-faq h3 {
  font-size: var(--fs-reading);
  font-weight: 700;
  color: var(--ink);
  margin: var(--col-gap-default) 0 var(--col-gap-default);
  line-height: 1.5;
}
.column-faq h3:first-of-type { margin-top: 0; }
.column-faq p {
  font-size: var(--fs-reading);
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 var(--col-gap-default);
}

/* ===== 参考文献セクション ===== */
.column-references {
  margin-top: var(--col-gap-section);
  padding-top: var(--col-gap-default);
  border-top: 1px solid var(--border);
}
.column-references h2 {
  /* FAQ h2と統一 (24px / ink-soft) — フォントサイズ階層を増やさない方針。 */
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 var(--col-gap-default);
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.column-references ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.column-references li {
  /* 本文と同じ 17px。参考文献も記事の一部として扱う方針。
     li 間隔は default。本文 li (tight=8) より広いが、参考文献は各項目が複数行に
     渡るので段落級の呼吸が必要。 */
  font-size: var(--fs-reading);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--col-gap-default);
}
.column-references li:last-child { margin-bottom: 0; }
.column-references a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== サービス CTA (記事末尾・控えめ) ===== */
.column-cta {
  margin-top: var(--col-gap-section);
  padding: var(--col-gap-default);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.column-cta-title {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--col-gap-tight);
}
.column-cta-text {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 var(--col-gap-default);
  line-height: 1.6;
}
.column-cta-actions {
  display: inline-flex;
  gap: var(--col-gap-tight);
}

/* ===== 関連記事カード (記事末尾) ===== */
.column-related {
  margin-top: var(--col-gap-section);
  padding-top: var(--col-gap-default);
  border-top: 1px solid var(--border);
}
.column-related-title {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 var(--col-gap-default);
  font-weight: 600;
}
.column-related-grid {
  display: grid;
  gap: var(--col-gap-default);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.column-related-card {
  display: block;
  padding: var(--col-gap-default);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.column-related-card:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.column-related-card-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 var(--col-gap-tight);
}
.column-related-card-excerpt {
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== 一覧ページ (column/index.html) ===== */
.column-list-head {
  text-align: center;
  margin-bottom: var(--col-gap-section);
}
.column-list-h1 {
  /* 記事タイトル (.column-title) と完全に揃える。一覧の H1も同じスケールで読者の脳負荷を減らす。 */
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--col-gap-tight);
  color: var(--ink);
}

.column-list-empty {
  text-align: center;
  padding: var(--col-gap-section) 20px;
  color: var(--ink-mute);
  font-size: var(--fs-body);
}

/* タグ絞り込みナビ (column TOP と各 tag ページで共有)。
   カード内の <span class="column-tag"> はリンクにできない (nested <a> 禁止) ため、
   一覧→ tag ページへの回遊導線は本ナビが担う。
   現在地は .is-current で非リンク + 強調表示 (自己リンク回避)。
   背景・borderは付けない (コラム面はカード以外を透明で統一する規範)。 */
.column-tag-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* 横並び gap は .column-hero-meta / .column-list-card-meta と同じ 14px で揃える
     (インライン水平 gap は 3トークン対象外。同種要素の数値統一規範に従う)。
     縦方向 (折返し時の row gap) は --col-gap-tight (8px) を使用。 */
  gap: var(--col-gap-tight) 14px;
  margin: 0 0 var(--col-gap-section);
}
.column-tag-nav-label {
  font-size: var(--fs-caption);
  color: var(--ink-mute);
  font-weight: 600;
}
.column-tag-nav-item {
  /* チップは .column-tag と同じ caption スケールに揃える (タグの視覚スケールは全サイト統一)。 */
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 120ms ease;
}
a.column-tag-nav-item:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.column-tag-nav-item.is-current {
  color: var(--accent);
  cursor: default;
}
.column-tag-nav-count {
  font-weight: 400;
  color: var(--ink-mute);
}

/* 並び替えトグル (古い順 ⇄ 新しい順)。tag-nav の下・グリッドの上に右寄せで置く。
   JS 無効時は hidden 属性で非表示 (プログレッシブエンハンスメント)。
   ピル型セグメント: 両方ボタンに見せ、選択中=塗り / 切替先=アウトラインにすることで
   「押すべき方 (= 非選択)」が明確にクリッカブルに見えるようにする。 */
.column-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 var(--col-gap-section);
}
.column-sort[hidden] { display: none; }
.column-sort-label {
  font-size: var(--fs-caption);
  color: var(--ink-mute);
  font-weight: 600;
  /* ラベルはボタンのすぐ左に置く (右端クラスタ)。flex-end で全体が右寄せ。 */
}
.column-sort-btn {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
/* 切替先 (非選択) のみホバー反応。選択中はホバーしても見た目を変えない。 */
.column-sort-btn:not(.is-active):hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.column-sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.column-sort-btn.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  cursor: default;
}

.column-list-grid {
  display: grid;
  gap: var(--col-gap-default);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.column-list-card {
  display: block;
  padding: var(--col-gap-default);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease;
}
.column-list-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.column-list-card-meta {
  /* メタ要素間の gap は .column-hero-meta と同じ 14px で揃える。
     インライン水平 gap は 3トークン (8/24/56) の対象外だが、同種要素の数値は統一する。 */
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  margin-bottom: var(--col-gap-tight);
}
.column-list-card-title {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 var(--col-gap-tight);
  letter-spacing: -0.01em;
}
.column-list-card-excerpt {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== モバイル調整 =====
   spacing トークンを縮めるだけで全要素のリズムが自動スケール。
   個別 margin/padding の override は不要 (オーバーライド地獄を回避)。 */
@media (max-width: 640px) {
  :root {
    --col-gap-default: 20px;
    --col-gap-section: 40px;
  }
  .column-main { padding: var(--col-gap-section) 18px; }
  .column-list-main { padding: var(--col-gap-section) 18px; }
  .column-article { font-size: 16px; line-height: 1.75; }      /* 狭幅で 17px は持て余す */
  .column-article h2 { font-size: 21px; }
  /* 一覧のリード文は、中央寄せだと折返し時に読みづらいのでモバイルは左寄せ。
     見出し(h1)は中央のまま。HTML の <br> は折返しに任せるため無効化する。 */
  .column-list-lead { text-align: left; }
  .column-list-lead br { display: none; }
}