/*
 * 機能詳細ページの本文タイポグラフィ（.feature-article）。
 * TemplateLayout の stylesheets で、機能詳細ページだけに読み込む。
 *
 * ── 手本 ──
 * スパイスファクトリーのオピニオン記事（高木さん指示・2026-08-12）。
 * https://spice-factory.co.jp/opinion/ai-agent-platform/ を 1440px で実測した値:
 *
 *   本文カラム : 640px
 *   本文       : 16px / line-height 2.0 / letter-spacing 0.5px / #262626 / 段落間 32px
 *   見出し(h2) : 28px / 太字 / line-height 1.6 / 上 80px /
 *                左に 4px 幅の縦バー（::before・absolute・padding-left 20px で逃す）
 *   強調       : 700 / 本文と同色
 *   箇条書き   : disc / ul は上 16px / 左 20px
 *
 * ── 手本から変えたところ（理由付き） ──
 * - 書体は先方の有償フォント（筑紫ゴシック）は使えないので、サイト共通の
 *   Inter Tight ＋ ヒラギノ（jp-typography.css の --font-inter-tight）のまま
 * - 縦バーの色は先方のブランド黄色（#FFDA00）ではなく、pickles のダッシュボード画像
 *   （pickles-dashboard.png ほか生成画像すべて）で採用しているアンバー #EBB563
 * - 見出しのウェイトは jp-typography.css の方針どおり 600（ヒラギノ W6）
 *
 * 色・サイズとも「手本の実測値」か「サイトで採用済みの値」だけを使い、新しい値を発明しない。
 */

/*
 * カラム幅だけは手本の 640px ではなく **1170px**（2026-08-12 高木さん指示
 * 「上下のセクションに合わせて横幅を広げる」）。
 * 1170px = 直上の HERO スクリーンショットの xl 幅（risk-management-software の
 * `xl:max-w-[1170px]`）。本文ブロックの左右端が HERO の画像と揃う。
 * main-container（1290px / px-5）の内側なので、xl 未満では器の幅にそのまま従う。
 */
.feature-article {
  max-width: 1170px;
  margin-inline: auto;
}

/*
 * 見出しは手本の実測 28px から 24px へ下げた（高木さん指示・2026-08-12
 * 「記事中の文章は少し大きい」）。24px は本文 16px のちょうど 1.5 倍で、
 * テンプレートの --text-heading-5 とも同じ値。
 * 字送り +2px は jp-typography.css の h2 と揃えている（同上の指示）。
 */
.feature-article h2 {
  position: relative;
  margin-top: 80px;
  padding-left: 20px;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 2px;
  --tw-font-weight: 600;
  font-weight: 600;
  color: #262626;
}

.feature-article h2:first-child {
  margin-top: 0;
}

.feature-article h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.24em;
  display: block;
  width: 4px;
  height: 1.12em;
  /* ブランドのキーカラー（brand-2026.css が正本）。旧アンバー #ebb563 から差し替え */
  background-color: var(--brand-pickle-green, #afc70f);
}

.feature-article p {
  margin-top: 32px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.5px;
  font-weight: 400;
  color: #262626;
}

/* 見出し直後の段落は近づける（手本: h2 と次の p の間は段落間より狭い） */
.feature-article h2 + p {
  margin-top: 24px;
}

.feature-article ul {
  margin-top: 16px;
  padding-left: 20px;
  list-style-type: disc;
}

.feature-article li {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.5px;
  color: #262626;
  margin-top: 8px;
}

.feature-article li::marker {
  color: var(--brand-pickle-green, #afc70f);
}

.feature-article strong {
  --tw-font-weight: 700;
  font-weight: 700;
  color: #262626;
}

/*
 * ── 要点の下線（.u） ──
 * 高木さんレビュー（2026-08-13）「文章量が多いページは重要な点に SPAN で下線」。
 * 色はブランドのキーカラー（強調・要点の役割）。太さ・オフセットは
 * 和文 16〜17px の本文で文字と重ならない最小の値。
 * .feature-article 外（whitepaper-details 型の HERO リード等）でも使えるようスコープしない。
 */
.u {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-pickle-green, #afc70f) 80%, transparent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/*
 * ── 脚注（.footnote） ──
 * 出典バイアス注記など「本文より小さく」の指定がある注釈（原稿 02 の執筆メモ）。
 * 値はテンプレートの tagline-2（14px）と本文色の 60%（既存の濃度段）からのみ採る。
 * .feature-article p のレイヤ外要素セレクタに勝つため、同じ詳細度のクラスで上書きする。
 */
.feature-article .footnote {
  font-size: 14px;
  color: rgba(38, 38, 38, 0.6);
}

/*
 * ── 転載記事（/blog）で使う要素 ──
 * 機能詳細の本文には出てこない blockquote / ol / a / hr / 図キャプションの組み。
 * 値は手本（スパイスファクトリーのオピニオン記事 = 転載元そのもの）の実測値。
 * https://spice-factory.co.jp/opinion/deterministic-llm-hybrid/ の CSS から
 * デスクトップ設計値（calc(N * --desktop-vw-ratio) の N）を読み取った（2026-08-13）:
 *
 *   blockquote : 左罫 1px（本文色）/ padding-left 24px / padding-block 8px / 上 40px /
 *                行間 2.0 / 字送り 0.8px（書体だけは先方の明朝を使わずサイト共通のまま）
 *   ol         : list-style を持たず counter で数字を振る / li padding-left 24px / 上 32px
 *   a          : 下線（.rn-dialog-body a と同じ underline + offset 4px。サイト採用済みの値）
 *   hr         : 1px の #ccc / 前後 64px（オピニオン記事の hr 実測）
 *   キャプション: 13px / 行間 1.8 / #6a6a6a / 中央寄せ / 図との間 12px（figcaption の実測）
 *
 * img の汎用ルールは機能詳細の図解廃止（2026-08-13 高木さんレビュー）で一度消えたが、
 * 転載記事は Canvas ブランド版の図版・キャプチャを本文に持つため、ここで復帰させている
 * （機能詳細の本文に img は無いので影響しない）。値は元と同じ（本文リズムの 40px）。
 */
.feature-article img {
  display: block;
  margin: 40px auto 0;
  max-width: 100%;
  height: auto;
}

.feature-article blockquote {
  margin-top: 40px;
  padding-left: 24px;
  padding-block: 8px;
  border-left: 1px solid #262626;
}

.feature-article blockquote p {
  margin-top: 0;
  line-height: 2;
  letter-spacing: 0.8px;
}

.feature-article blockquote p + p {
  margin-top: 16px;
}

.feature-article ol {
  margin-top: 32px;
  list-style: none;
  counter-reset: ol-counter 0;
}

.feature-article ol > li {
  position: relative;
  counter-increment: ol-counter 1;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.5px;
  color: #262626;
  margin-top: 8px;
}

.feature-article ol > li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  line-height: 1.9;
  /* ul の marker と同じキーカラー */
  color: var(--brand-pickle-green, #afc70f);
}

.feature-article a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feature-article hr {
  margin-top: 64px;
  border: 0;
  border-top: 1px solid #ccc;
}

.feature-article hr + p {
  margin-top: 64px;
}

/*
 * ── 表（.feature-article table） ──
 * /onboarding のフェーズ表・/security の稟議チェックリスト表で使う。
 * 手本のオピニオン記事に表は無いので、**既存の値の組み合わせだけ**で組む（新しい値を発明しない）:
 *   文字     = li と同じ 15px / 1.9 / 0.5px / #262626
 *   罫線     = 見出し行の下は blockquote の罫と同じ #262626、行間は hr と同じ #ccc
 *   ウェイト = 見出し行は見出しと同じ 600
 *   余白     = 本文リズムの 8px / 12px / 16px / 32px
 */
.feature-article table {
  margin-top: 32px;
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.5px;
  color: #262626;
}

.feature-article th {
  --tw-font-weight: 600;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid #262626;
  padding: 8px 16px 8px 0;
}

.feature-article td {
  border-bottom: 1px solid #ccc;
  padding: 12px 16px 12px 0;
  vertical-align: top;
}

/* 行見出し（会社概要のような縦持ちの表）。罫は td と同じ #ccc に揃える */
.feature-article tbody th {
  border-bottom: 1px solid #ccc;
  padding: 12px 16px 12px 0;
  vertical-align: top;
  white-space: nowrap;
}

/* 表は本文カラムより狭い画面ではみ出すので、横スクロールで逃がす（ページ全体は動かさない） */
.feature-article .table-scroll {
  margin-top: 32px;
  overflow-x: auto;
}

.feature-article .table-scroll table {
  margin-top: 0;
  min-width: 640px;
}

/* 図の直後の段落（*…* で書いたキャプション）。手本の figcaption と同じ組み */
.feature-article p:has(> img) + p:has(> em) {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: #6a6a6a;
  text-align: center;
}

/* キャプションの和文を疑似イタリックで倒さない（手本の figcaption も直立） */
.feature-article p:has(> img) + p:has(> em) em {
  font-style: normal;
}

/*
 * ── コールアウト（.feature-callout） ──
 * プロジェクト管理カテゴリの共通注意文（原稿 03_プロジェクト管理カテゴリ注意文.md）に使う。
 * 原稿が「カード/コールアウト形式」を指定しており、2026-08-12 高木さんの指示で組んだ。
 *
 * **新しい値を発明しない**という上の方針はここでも守る:
 * - 色は既存のアンバー #EBB563 の alpha 違いだけ（新しい色相を持ち込まない）
 * - 角丸 20px は関連ページ3枚（ai-agency の Services カード = rounded-20）と同じ
 * - 余白は本文の既存リズム（80px / 40px / 32px / 24px / 16px）からのみ採る
 *
 * 本文が「線1本（縦バー）で節を区切る」組みなので、コールアウトだけが箱になる。
 * 面で主張しすぎないよう、地は 8%・枠は 32% と薄く敷いている。
 */
.feature-article .feature-callout {
  /* 直前の節との間隔は h2 の margin-top と同じにして、本文のリズムを崩さない */
  margin-top: 80px;
  padding: 40px;
  border-radius: 20px;
  background-color: rgba(235, 181, 99, 0.08);
  border: 1px solid rgba(235, 181, 99, 0.32);
}

/* 上下の余白は箱の padding に任せる（中の要素が二重に余白を持たないように） */
.feature-article .feature-callout > *:first-child {
  margin-top: 0;
}

/*
 * 見出しは縦バーをやめて 💡 に差し替える。
 * 絵文字は ::before で置く＝本文テキストには含まれないので、
 * 選択・コピーにも読み上げにも乗らない（装飾として扱う）。
 */
.feature-article .feature-callout h2 {
  margin-top: 0;
  /* 22px の絵文字＋本文と同じ 20px の逃げ。2行になっても頭が揃う（ぶら下げ） */
  padding-left: 42px;
}

.feature-article .feature-callout h2::before {
  content: '💡';
  top: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  /* 絵文字は字送りの対象外にする（h2 の letter-spacing 2px を打ち消す） */
  letter-spacing: 0;
  font-size: 22px;
  /* 22 × 1.745 ≒ 38.4px = 見出しの行送り（24 × 1.6）。1行目の中心に乗る */
  line-height: 1.745;
}

/* モバイル（手本サイトの 375px 実測: 本文 15.3px / 見出し 21px 台） */
@media (max-width: 640px) {
  .feature-article h2 {
    font-size: 20px;
    margin-top: 64px;
  }

  .feature-article p {
    font-size: 15px;
  }

  .feature-article .feature-callout {
    margin-top: 64px;
    padding: 24px;
  }

  .feature-article .feature-callout h2 {
    margin-top: 0;
    padding-left: 38px;
  }

  .feature-article .feature-callout h2::before {
    font-size: 18px;
    /* 18 × 1.78 ≒ 32px = モバイルの見出しの行送り（20 × 1.6） */
    line-height: 1.78;
  }
}

/*
 * ── リリースノートのセクション（.rn-section） ──
 * 高木さん指示（2026-08-12）で、リリースノートの縦幅とサイズを詰めた。
 * 使う場所は3つ: 機能詳細ページの「最近の改善」／ /release-notes ／
 * /release-notes/features/<slug> ／ /release-notes/<slug> の下部ナビ。
 *
 * 見出しは**テンプレート自身のトークンで一段下げる**（新しい値は作らない）:
 *   セクション見出し  h2 : heading-3(40px) → heading-4(32px)
 *
 * ユーティリティ class（text-heading-4 等）ではなくここで指定しているのは、
 * jp-typography.css の `h2 { font-size: ... }` がレイヤー無しで書かれており、
 * @layer utilities のユーティリティより優先されてしまうため。
 * `.rn-section h2`（詳細度 0,1,1）にすることで、確実にこちらが勝つ。
 *
 * コンポーネント内の scoped <style> にしないのは、`pnpm check:template-css` の
 * 走査対象が public/assets/*.css の4本だけで、scoped style を見に行かないため
 * （見に行かない＝「CSS が無い class」として毎回落ちる）。
 */
.rn-section h2 {
  font-size: var(--text-heading-4);
}

/*
 * リリースノート名（高木さん指示・2026-08-12「もう少し小さく・太字じゃなくていい」）。
 *
 * 18px はトークンに無い値。heading-6(20px) と tagline-1(16px) の間に段が無く、
 * 16px まで落とすと日付（tagline-2 = 14px）と差が付かず一覧の見出しに見えなくなるため、
 * ここだけ中間の値を置いている。
 *
 * 太さは 400。jp-typography.css の `h1〜h6 { font-weight: 600 }` はレイヤー無しで
 * 書かれていて `font-normal` ユーティリティより優先されるため、
 * class では戻せない。詳細度で上回るここで指定する。
 *
 * 2026-08-14: それまでは `.rn-section h3` に書いていたが、カードが
 * `/release-notes` でも使われるようになったので `.rn-title` 側へ移した。
 */
.rn-title {
  font-size: 18px;
  --tw-font-weight: 400;
  font-weight: 400;
}

/*
 * 2026-08-14: カードはポップアップを開くボタンではなく詳細ページへのリンクになった。
 * カード全体が <a> なので、ホバーの下線はカードのホバーで出す。
 */
a:hover .rn-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/*
 * ── /comparison の評価セル ──
 *
 * 4段階の記号だけに意味を持たせず、短い評価語を併記する。最高評価は
 * ブランドのキーカラーを面で使い、セル全体にも薄い色を敷いて視線の起点を作る。
 * キーカラー上の文字は白ではなくインク色（約9:1）にしてコントラストを確保する。
 *
 * xl 未満ではカードが折り返され、左端の項目列と対応しなくなるため、項目列を隠して
 * 各セル内に項目名を表示する。xl 以上では4列が横に揃うので従来どおり左列だけを使う。
 */
.comparison-axis-column {
  display: none;
}

.comparison-cell {
  height: 152px;
}

.comparison-cell--best {
  background-color: color-mix(in srgb, var(--brand-pickle-green, #afc70f) 12%, var(--color-white));
}

.comparison-cell__label {
  margin-bottom: 8px;
  color: var(--color-secondary);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

.comparison-cell--best .comparison-cell__label {
  color: var(--brand-ink-green, #4a5406);
}

.comparison-score {
  display: inline-flex;
  min-width: 92px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-secondary) 7%, var(--color-white));
  color: var(--color-secondary);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}

.comparison-score--best {
  background-color: var(--brand-pickle-green, #afc70f);
  color: var(--brand-ink, #1e1e16);
}

.comparison-score__symbol {
  font-size: 20px;
  line-height: 1;
}

@media (min-width: 80rem) {
  .comparison-axis-column {
    display: block;
  }

  .comparison-cell {
    height: 124px;
  }

  .comparison-cell__label {
    display: none;
  }
}