/*
 * Glossary v2 — 用語集 3 ページ共通
 *   /glossary/ /ai-it-glossary/ /sales-marketing-glossary/
 *
 * 正本: source/DESIGN_SYSTEM.md（v2）§2 タイポグラフィ / §5 コンポーネント / §11 Hard Rules
 *
 * 【重要 1】このファイルは :root を定義しない。トークンは corporate-v2.css の
 * .brand-v2 スコープから継承する。必ず corporate-v2.css の「後」に読み込むこと。
 * 理由は DESIGN_SYSTEM.md §14-1（:root は media 記事 1,000 本超が参照している）。
 *
 * 【重要 2】以前はこの CSS を 3 route の inline <style> に複製していた。1 本直すと
 * 残り 2 本がずれるため共通化した。ページ側に <style> を書き戻さないこと。
 *
 * 【重要 3】用語カードは「囲い」ではなく罫線行にしている（A-4「Data」）。
 * v2 で囲いカードを使ってよいのはピックアップとアーカイブ一覧だけ（§5）。
 * 用語 190 語 / 110 語を白い角丸カードで並べると、それだけで v2 から浮く。
 */

/* ============================================================
   0. ページ土台
   旧 .sp-route-body（seo-priority-pages.css）から引き継ぐリセット。
   a / img のリセットは共通ヘッダー・フッターにも当たっていたので、
   見た目を変えないためスコープを body のまま維持する。
   ============================================================ */

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

.gl-body {
  margin: 0;
  font-family: var(--sans);
  /* 旧実装は薄青のグラデ地（#f5f8fc→#eef4f8）だった。v2 は白基調（§1） */
  background: var(--v2-bg);
  color: var(--ink);
}

.gl-body a {
  color: inherit;
  text-decoration: none;
}

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

/*
 * 素タグに効くグローバル CSS の予防的打ち消し。
 * この 3 ページは style.css を読まないので現状は無害だが、AGENTS.md の
 * 「本文で <section> / <header> を使うなら reset を明示する」に従う。
 */
.gl-body .gl-hero,
.gl-body .gl-category,
.gl-body .gl-product,
.gl-body .gl-category-head {
  position: static;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* ============================================================
   1. レイアウト（v2 の .v2-inner と同じ器）
   ============================================================ */

.gl-body .gl-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* ============================================================
   2. 共通ラベル（§2 label / eyebrow: mono 700 / 10-11px / .14-.2em）
   ============================================================ */

.gl-body .gl-eyebrow,
.gl-body .gl-product-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v2-muted);
  margin: 0 0 14px;
}

/*
 * uppercase の中でブランド表記だけ素の綴りを保つ。
 * ラベルは text-transform: uppercase なので、そのままだと末尾の小文字 i まで
 * 大文字化され、AGENTS.md の「UI copy のブランド表記は常に ファネルAi」に反する。
 * （検証はソース中の誤表記そのものを弾くため、ここに実例は書けない）
 */
.gl-body .gl-nocaps { text-transform: none; }

/* チップ（§5 淡色面＋濃色文字・コントラスト比 4.5:1 以上） */
.gl-body .gl-version-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #E8EBF0;
  color: #333D4D;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  vertical-align: middle;
}

.gl-body .gl-breadcrumb {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--faint);
  margin: 0 0 18px;
}

.gl-body .gl-breadcrumb a { color: var(--teal-d); font-weight: 700; }
.gl-body .gl-breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   3. ヒーロー
   旧実装はグラデ面＋角丸 24px＋影のパネルだった。v2 はグラデの面塗り禁止
   （§11 NG#8）なので、囲いを外して白地の上に組む。
   ============================================================ */

.gl-body .gl-hero {
  padding: 8px 0 44px;
}

.gl-body .gl-hero h1 {
  font-size: clamp(29px, 4.3vw, 44px);
  font-weight: 800;
  line-height: 1.42;
  margin: 0 0 20px;
  color: var(--ink);
}

.gl-body .gl-hero p.gl-lede {
  font-size: 15px;
  line-height: 1.9;
  color: var(--v2-muted);
  margin: 0 0 28px;
  max-width: 44em;
}

/* メタ行（§4 数字は等幅・出典のある実データのみ） */
.gl-body .gl-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.gl-body .gl-hero-meta strong {
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--faint);
  margin-right: 6px;
}

/* ============================================================
   4. 目次（罫線行・A-4「Data」）
   ============================================================ */

.gl-body .gl-toc {
  margin: 0 0 8px;
}

.gl-body .gl-toc h2 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v2-muted);
  margin: 0 0 4px;
}

.gl-body .gl-toc-grid {
  display: block;
  border-top: 1px solid var(--line);
}

.gl-body .gl-toc-card {
  display: grid;
  grid-template-columns: 3.4em 1fr;
  gap: 0 16px;
  align-items: baseline;
  padding: 16px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  /* hover で浮かせない（§11 NG#5）。背景と字色だけで表す */
  transition: background .15s var(--ease-out);
}

.gl-body .gl-toc-card:hover { background: #FAFBFC; }

.gl-body .gl-toc-num {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal-d);
}

.gl-body .gl-toc-card > span:last-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.gl-body .gl-toc-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.gl-body .gl-toc-count {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

/* ============================================================
   5. カテゴリ（囲いを外し、罫線で段落る）
   ============================================================ */

.gl-body .gl-category {
  padding: 56px 0 0;
}

.gl-body .gl-category-head {
  display: block;
  margin: 0 0 18px;
}

.gl-body .gl-category-num {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--faint);
  line-height: 1;
  margin: 0 0 10px;
}

.gl-body .gl-category-head h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--ink);
}

.gl-body .gl-category-intro {
  font-size: 14px;
  line-height: 1.8;
  color: var(--v2-muted);
  margin: 0;
  max-width: 52em;
}

/* ============================================================
   6. 用語（罫線行・多段組み）
   190 語を 1 列の行にすると縦に伸びすぎて拾い読みできないため、
   段組みは残したまま「囲い」だけ外し、罫線で行に見せる。
   ============================================================ */

.gl-body .gl-term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0 44px;
  border-top: 1px solid var(--line);
}

.gl-body .gl-term {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 100px;
  transition: background .15s var(--ease-out);
}

/* アンカー着地の明示。浮かせず、面と字色で示す（§11 NG#5） */
.gl-body .gl-term:target { background: var(--bg-sub); }
.gl-body .gl-term:target .gl-term-name { color: var(--teal-d); }

.gl-body .gl-term-name {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.gl-body .gl-term-def {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--v2-muted);
}

.gl-body .gl-term-related {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--faint);
}

/* font-size を持たせない = §2 の label 判定の対象外。親からサイズを継ぐ */
.gl-body .gl-term-related-label {
  font-weight: 700;
  color: var(--v2-muted);
  margin-right: 4px;
}

.gl-body .gl-term-related a {
  color: var(--teal-d);
  font-weight: 700;
}

.gl-body .gl-term-related a:hover { text-decoration: underline; }

.gl-body .gl-term-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-d);
}

.gl-body .gl-term-link::after {
  content: "→";
  display: inline-block;
  transition: transform .15s var(--ease-swift);
}

.gl-body .gl-term-link:hover::after { transform: translateX(4px); }

.gl-body .gl-term-inpage {
  font-size: 11px;
  color: var(--faint);
  letter-spacing: .04em;
}

/* ============================================================
   7. 索引カード（/glossary/ のみ）
   囲いカードが許されるのは一覧の入口だけ（§5）。縁色は 4 辺とも無し（§11 NG#1）
   ============================================================ */

.gl-body .gl-landing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 0 0 8px;
}

.gl-body .gl-landing-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}

.gl-body .gl-landing-card:hover {
  border-color: #C9D2DF;
  background: #FAFBFC;
}

.gl-body .gl-landing-card-num {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--teal-d);
}

.gl-body .gl-landing-card-num > span:last-child { color: var(--faint); }

.gl-body .gl-landing-card h2 {
  margin: 2px 0 4px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.gl-body .gl-landing-card-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--v2-muted);
}

.gl-body .gl-landing-card-sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--faint);
}

.gl-body .gl-landing-card-sub strong { color: var(--ink); font-weight: 700; }

.gl-body .gl-landing-card-arrow {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-d);
}

.gl-body .gl-landing-card-arrow::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform .15s var(--ease-swift);
}

.gl-body .gl-landing-card:hover .gl-landing-card-arrow::after { transform: translateX(4px); }

/* ============================================================
   8. 末尾 CTA
   ボタンは corporate-v2.css の黒 ✦（.v2-btn / .v2-btn--ghost）を使う。
   旧実装の teal→blue グラデ塗りボタンは v2 で廃止（§11 NG#8）。
   ============================================================ */

.gl-body .gl-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: center;
  margin: 64px 0 0;
  padding: 48px 0 0;
  border-top: 1px solid var(--line);
}

.gl-body .gl-product h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.gl-body .gl-product p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--v2-muted);
}

.gl-body .gl-product-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
 * .v2-btn は border:0、--ghost だけ 1px 枠を持つので、縦積みにすると高さが
 * 2px ずれる。透明枠で揃える。corporate-v2.css は他ページも読むため触らない。
 */
.gl-body .gl-product-actions .v2-btn { border: 1px solid transparent; }
.gl-body .gl-product-actions .v2-btn--ghost { border-color: #DCE2EB; }

/* ============================================================
   9. 関連リンク
   ============================================================ */

.gl-body .gl-related {
  margin: 56px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}

.gl-body .gl-related h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v2-muted);
  margin: 0 0 12px;
}

.gl-body .gl-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.gl-body .gl-related li { line-height: 1.9; }

.gl-body .gl-related a {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-d);
}

.gl-body .gl-related a:hover { text-decoration: underline; }

/* ============================================================
   10. レスポンシブ
   ============================================================ */

@media (max-width: 720px) {
  .gl-body .gl-shell { padding: 24px 20px 72px; }
  .gl-body .gl-hero { padding: 4px 0 32px; }
  .gl-body .gl-category { padding: 44px 0 0; }
  .gl-body .gl-term-grid { grid-template-columns: 1fr; gap: 0; }

  .gl-body .gl-product {
    grid-template-columns: 1fr;
    margin-top: 48px;
    padding-top: 36px;
  }

  .gl-body .gl-product-actions { flex-direction: row; flex-wrap: wrap; }
  .gl-body .gl-landing-card { padding: 24px 20px; }
}