/* =====================================================================
   GUNDAMPEDIA EXTENSIONS（gp-ext.css）
   zudaru-base.css（zudaru.com実CSSの全量コピー・無改変）の後に読み込む。
   トークン（--bg/--pink/--cyan/--yellow等）はベース側の :root を共有する。
   ===================================================================== */

/* ---- グローバルヘッダー ---- */
.gp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,15,30,.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.gp-header__in {
  max-width: 1080px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.gp-logo {
  font-weight: 900; font-size: 20px; letter-spacing: .04em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.gp-logo .gp-logo__g { color: var(--pink); text-shadow: 0 0 18px rgba(255,63,180,.45); }
.gp-logo .gp-logo__sub {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .3em;
  color: var(--fg-muted);
}
.gp-logo__img { height: 68px; width: auto; display: block; }
@media (max-width: 640px) { .gp-logo__img { height: 52px; } }
.gp-header__nav { display: flex; gap: 4px 14px; flex-wrap: wrap; margin-left: auto; }
.gp-header__nav a { color: var(--fg-muted); text-decoration: none; font-size: 13px; font-weight: 700; }
.gp-header__nav a:hover { color: var(--cyan); }

/* ---- 検索 ---- */
.gp-search { display: flex; gap: 8px; margin-top: 22px; }
.gp-search input {
  flex: 1; min-width: 0; padding: 12px 16px; font-size: 16px;
  color: var(--fg); background: rgba(20,28,52,.9);
  border: 1px solid var(--line); border-radius: 999px; outline: none;
}
.gp-search input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(63,224,255,.15); }
.gp-search button {
  padding: 12px 22px; font-size: 15px; font-weight: 900; cursor: pointer;
  color: #fff; background: var(--pink); border: 0; border-radius: 999px;
}
.gp-search button:hover { background: var(--pink-2); }

/* ---- ボタン ---- */
.gp-btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  font-weight: 900; font-size: 15px; text-decoration: none;
  color: #fff; background: var(--pink);
}
.gp-btn:hover { background: var(--pink-2); }
.gp-btn--ghost {
  background: transparent; color: var(--cyan);
  border: 1px solid var(--cyan);
}
.gp-btn--ghost:hover { background: rgba(63,224,255,.1); }

/* ---- 用語カード ---- */
.gp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 640px) { .gp-cards { grid-template-columns: 1fr; } }
.gp-card {
  display: block; text-decoration: none; color: var(--fg);
  background: linear-gradient(180deg, rgba(24,33,60,.9), rgba(20,28,52,.9));
  border: 1px solid var(--line); border-radius: 14px; padding: 18px;
}
.gp-card:hover { border-color: var(--cyan); }
.gp-card__term { font-size: 20px; font-weight: 900; color: #fff; }
.gp-card__reading { display: block; font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.gp-card__ex { margin-top: 10px; font-size: 14px; color: var(--fg-muted); line-height: 1.7; }
.gp-card__foot { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---- カテゴリチップ・タグ ---- */
.gp-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--cyan); border: 1px solid rgba(63,224,255,.5);
  text-decoration: none;
}
.gp-chip--pink { color: var(--pink-2); border-color: rgba(255,63,180,.5); }
.gp-chip--yellow { color: var(--yellow); border-color: rgba(255,212,92,.5); }
.gp-chip--ext { color: var(--fg-muted); border-color: var(--line); }

/* ---- 五十音インデックス ---- */
.gp-kana { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gp-kana a {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--fg); text-decoration: none; font-weight: 700;
  background: rgba(20,28,52,.6);
}
.gp-kana a:hover { border-color: var(--pink); color: var(--pink-2); }
.gp-kana a.is-empty { opacity: .35; pointer-events: none; }
.gp-kana__label { flex: 0 0 36px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--fg-muted); }

/* ---- パンくず ---- */
.gp-crumb { padding: 14px 20px 0; max-width: 1080px; margin: 0 auto; }
.gp-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--fg-muted); }
.gp-crumb li + li::before { content: "›"; margin: 0 6px; color: var(--fg-muted); }
.gp-crumb a { color: var(--fg-muted); }
.gp-crumb a:hover { color: var(--cyan); }

/* ---- 記事メタ ---- */
.gp-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px;
  font-size: 12px; color: var(--fg-muted);
}

/* ---- セリフ引用ブロック（引用要件の明瞭区別） ---- */
.gp-quote {
  margin-top: 20px; padding: 20px 22px;
  border-left: 4px solid var(--yellow);
  background: rgba(255,212,92,.06);
  border-radius: 0 14px 14px 0;
}
.gp-quote p { font-size: clamp(20px, 5vw, 26px); font-weight: 900; color: #fff; }
.gp-quote cite {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 12px; color: var(--fg-muted);
}

/* ---- 作品別リスト ---- */
.gp-works { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 640px) { .gp-works { grid-template-columns: 1fr; } }
.gp-works a {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--fg); text-decoration: none; font-size: 14px;
  background: rgba(20,28,52,.6);
}
.gp-works a:hover { border-color: var(--cyan); }
.gp-works a.is-empty { opacity: .45; pointer-events: none; }
.toc a.is-empty { opacity: .45; pointer-events: none; }
.gp-works .gp-works__count { color: var(--fg-muted); font-size: 12px; white-space: nowrap; }

/* ---- アンカー先の見出しが固定ヘッダーに隠れないようにする（2026-08-25 ユーザー指摘） ---- */
section[id], h3[id] { scroll-margin-top: 104px; }
@media (max-width: 640px) { section[id], h3[id] { scroll-margin-top: 84px; } }

/* ---- 五十音かな表（行ごとに1ライン・2026-08-25「あいうえお管理」指示） ---- */
.gp-kana-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.gp-kana-grid .gp-kana { margin-top: 0; }

/* ---- トップの「ガンペディア」h1: スマホで1行に収める（2026-08-24 ユーザー指示） ---- */
body.gp-home .hero h1 { font-size: clamp(34px, 13.5vw, 104px); }

/* ---- PC幅の拡大（zudaru既定の720pxはPCでは狭いため上書き） ---- */
@media (min-width: 1100px) {
  .narrow { max-width: 1020px; }             /* 全ページ共通: トップと同幅（2026-08-24 ユーザー指示） */
  .gp-crumb, .gp-header__in { max-width: 1080px; }
}