/*
Theme Name: Gapless Child
Theme URI: https://gapless.jp/
Author: toyo
Author URI: https://gapless.jp/
Description: gapless.jp - GeneratePress 子テーマ。Dark Walnut × Editorial デザイン (Wirecutter 構造性 + monograph 審美性)。Anton + Noto Sans JP + Inter。
Template: generatepress
Version: 0.1.0
License: Proprietary
Text Domain: gapless-child
Tags: dark, editorial, magazine, japanese
*/

/* ============================================================
 * gapless.jp — Dark Walnut Theme
 * デザイントークン: Claude Design handoff (mocks/styles/tokens.css) を WP 化
 * フォント: Google Fonts (Anton + Inter + Noto Sans JP + JetBrains Mono)
 * 読み込みは functions.php の wp_enqueue_style 経由
 * ============================================================ */

:root {
  /* 背景・基調 */
  --bg-base       : #0E0F11;
  --bg-card       : #18191C;
  --bg-elevated   : #222428;
  --border        : #2C2E33;
  --border-soft   : #232529;

  /* テキスト */
  --text-primary  : #ECEAE6;
  --text-secondary: #9CA0A8;
  --text-muted    : #5F636B;

  /* アクセント */
  --accent-wood   : #C19A6B;
  --accent-honey  : #E8B86C;
  --accent-rust   : #D9603B;
  --accent-jade   : #6BA48C;

  /* ASP ブランドカラー */
  --asp-rakuten   : #BF0000;
  --asp-yahoo     : #7B0099;
  --asp-amazon    : #FF9900;

  /* 機能色 */
  --price         : #E8B86C;
  --link          : #88B4D8;
  --rating-star   : #E8B86C;
  --pro           : #6BA48C;
  --con           : #B8736B;

  /* タイポ */
  --f-display     : "Anton", "Noto Sans JP", system-ui, sans-serif;
  --f-jp-heavy    : "Noto Sans JP", system-ui, sans-serif;
  --f-sans        : "Inter", "Noto Sans JP", system-ui, sans-serif;
  --f-mono        : "JetBrains Mono", ui-monospace, monospace;

  /* 設計値 */
  --container-max : 1200px;
  --article-max   : 800px;
  --article-container-max : 1200px;  /* 当初案 article.jsx と一致 */
}

/* ============================================================
 * Base reset (子テーマ全体に適用、WP 管理画面は影響なし)
 * ============================================================ */

html, body {
  margin: 0; padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
  line-height: 1.85;
}

/* sticky ヘッダーの高さ分、アンカーリンクのスクロール位置をオフセット */
html {
  scroll-padding-top: 100px;
  overflow-x: hidden;  /* Step 1+++ (2026-05-09): 全体横スクロール強制防止 (事例 1 推奨) */
  width: 100%;
}
body {
  overflow-x: hidden;  /* Step 1+++ */
  width: 100%;
}

/* タイトル要素の長文/英単語が画面を押し広げる問題への対策 (Step 1+++、事例 1 落とし穴 ②) */
h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a { color: var(--link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-honey); }

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

button {
  font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit;
}

/* GeneratePress のデフォルトカラー上書き */
.site, .site-content, .inside-article {
  background: var(--bg-base);
  color: var(--text-primary);
}

/* ============================================================
 * Typography primitives (tokens.css ベース)
 * ============================================================ */

.gp-display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-transform: uppercase;
}

.gp-jp-display {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.18;
}

.gp-mono {
  font-family: var(--f-mono);
  font-feature-settings: "tnum" 1;
}

.gp-eyebrow {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ============================================================
 * Layout primitives
 * ============================================================ */

.gp-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

.gp-rule { height: 1px; background: var(--border); width: 100%; }

.gp-rule-cap {
  display: flex; align-items: center; gap: 12px;
}
.gp-rule-cap::before, .gp-rule-cap::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Placeholder (Claude Design 由来、画像未設定時のフォールバック) */
.gp-ph {
  position: relative;
  background-color: #15161A;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(193,154,107,0.05) 0 1px,
      transparent 1px 12px
    );
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gp-ph::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 20%, rgba(232,184,108,0.06), transparent 60%);
  pointer-events: none;
}
.gp-ph-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  padding: 8px 12px;
  z-index: 1;
}

/* ============================================================
 * Components
 * ============================================================ */

/* badge */
.gp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-family: var(--f-display);
  letter-spacing: 0.14em;
  font-size: 11px;
  text-transform: uppercase;
  border: 1px solid var(--accent-wood);
  color: var(--accent-wood);
  border-radius: 2px;
  white-space: nowrap;
}
.gp-badge.solid-honey { background: var(--accent-honey); color: #1A1305; border-color: transparent; }
.gp-badge.solid-wood  { background: var(--accent-wood);  color: #1A1305; border-color: transparent; }
.gp-badge.solid-jade  { background: var(--accent-jade);  color: #0A1612; border-color: transparent; }

/* stars */
.gp-stars {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rating-star);
  font-family: var(--f-mono); font-size: 13px;
}
.gp-stars .meta { color: var(--text-secondary); }

/* CTA buttons (Variant C tier — ADR-007) */
.gp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .15s, filter .15s;
}
.gp-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.gp-cta:focus-visible { outline: 2px solid var(--accent-honey); outline-offset: 2px; }

/* selector を強化 (.gp-article-body a の specificity 0,1,1 に勝つよう 0,2,0 へ) */
.gp-cta.gp-cta--rakuten { /* primary - 楽天 */
  background: var(--accent-honey);
  color: #1A1305;
  font-size: 15px;
}
.gp-cta.gp-cta--yahoo { /* secondary - Yahoo! */
  background: var(--accent-wood);
  color: #1A1305;
  font-size: 13px;
  padding: 10px 16px;
}
.gp-cta.gp-cta--amazon { /* tertiary - Amazon */
  background: #2A2D33;
  color: var(--accent-honey);
  border: 1px solid var(--accent-wood);
  font-size: 13px;
  padding: 10px 16px;
}
/* 記事本文内の CTA でも文字色が上書きされないよう、念のため二重で固定 */
.gp-article-body a.gp-cta { text-decoration: none; }
.gp-article-body a.gp-cta--rakuten,
.gp-article-body a.gp-cta--yahoo { color: #1A1305; }
.gp-article-body a.gp-cta--amazon { color: var(--accent-honey); }

/* hover 時も文字色を維持 (.gp-article-body a:hover の honey 化を打ち消す) */
.gp-cta.gp-cta--rakuten:hover,
.gp-cta.gp-cta--yahoo:hover,
.gp-article-body a.gp-cta--rakuten:hover,
.gp-article-body a.gp-cta--yahoo:hover { color: #1A1305; }
.gp-cta.gp-cta--amazon:hover,
.gp-article-body a.gp-cta--amazon:hover { color: var(--accent-honey); }

/* CTA row (3 buttons, mobile P1 = 縦並び3つ均等) */
.gp-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 24px 0;
}
@media (max-width: 480px) {
  .gp-cta-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ============================================================
 * Global Header
 * ============================================================ */

.gp-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(14,15,17,0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.gp-header__brand {
  display: flex; align-items: baseline; gap: 12px;
}
.gp-header__logo {
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}
.gp-header__tagline {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gp-header__nav {
  display: flex; align-items: center; gap: 28px;
  font-size: 13px;
  color: var(--text-secondary);
}
.gp-header__nav a { color: var(--text-secondary); }
.gp-header__nav a:hover { color: var(--text-primary); }
.gp-header__sns {
  display: flex; align-items: center; gap: 14px;
  color: var(--text-secondary);
}
.gp-header__sns a { color: var(--text-secondary); }
.gp-header__sns a:hover { color: var(--accent-honey); }
.gp-header__sns .divider {
  width: 1px; height: 16px; background: var(--border);
}

/* ヘッダー シェアボタン (検索ボタンの右、X 主体) — 2026-05-04 追加
 * リリース時点では X のみ正式対応。LINE / Facebook / コピーは将来対応予定として淡色化。
 * 将来正式対応時は HTML 側 modifier `--inactive` を外すだけで通常表示に戻る。 */
.gp-header__share {
  display: flex; align-items: center; gap: 8px;
}
.gp-header__share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
}
.gp-header__share-btn svg {
  width: 14px; height: 14px;
}

/* X ボタン (アクティブ): honey 色で目立たせる、hover で背景色付き */
.gp-header__share-btn--x {
  color: var(--accent-honey);
  border-color: var(--accent-honey);
}
.gp-header__share-btn--x:hover {
  background: rgba(232, 184, 108, 0.14);
  color: var(--accent-honey);
  border-color: var(--accent-honey);
}

/* 準備中ボタン (LINE / Facebook / コピー): <span> 化で機能停止 (share-row.php と整合、2026-05-10)
 * 旧コメント「pointer-events は残し、機能は動作する」は <span> 化で破棄。
 * hover 時の opacity 0.55 復帰は触れる感を残す UX 演出 (クリックは無効) */
.gp-header__share-btn--inactive {
  opacity: 0.32;
  cursor: default;
}
.gp-header__share-btn--inactive:hover {
  opacity: 0.55;
  color: var(--text-secondary);
  border-color: var(--border);
  background: transparent;
}

/* mobile (基本は scroll する想定、ハンバーガーは Phase 1 後半) */
@media (max-width: 768px) {
  .gp-header { padding: 14px 20px; }
  .gp-header__nav { display: none; } /* TODO: ハンバーガー化 */
  .gp-header__sns { gap: 10px; }
  .gp-header__share { gap: 6px; }
  .gp-header__share-btn { width: 24px; height: 24px; }
  .gp-header__share-btn svg { width: 12px; height: 12px; }
}

/* ============================================================
 * Hero (front-page)
 * ============================================================ */

.gp-hero {
  position: relative;
  height: 70vh; min-height: 520px;
  display: flex; align-items: flex-end;
  padding: 0 40px 80px;
  background: var(--bg-base);
  overflow: hidden;
}
.gp-hero__bg {
  position: absolute; inset: 0;
  background-color: #15161A;
  background-image:
    radial-gradient(1200px 600px at 70% 30%, rgba(232,184,108,0.06), transparent 60%),
    repeating-linear-gradient(135deg, rgba(193,154,107,0.04) 0 1px, transparent 1px 16px);
}
.gp-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,15,17,0.4) 0%,
    rgba(14,15,17,0.7) 60%,
    rgba(14,15,17,0.95) 100%);
}
.gp-hero__content {
  position: relative; z-index: 1;
  max-width: 720px;
}
.gp-hero__issue {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent-wood);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.gp-hero__catch {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--text-primary);
}
.gp-hero__sub {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--accent-wood);
  margin-bottom: 28px;
}
.gp-hero__lead {
  max-width: 460px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 32px;
}
.gp-hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.gp-hero__cta-primary,
.gp-hero__cta-secondary {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .15s, filter .15s;
}
.gp-hero__cta-primary {
  background: var(--accent-honey);
  color: #1A1305;
}
.gp-hero__cta-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.gp-hero__cta-primary:hover {
  transform: translateY(-2px); filter: brightness(1.05);
  color: #1A1305; /* hover で a:hover の honey 色に上書きされないよう明示 */
}
.gp-hero__cta-secondary:hover {
  transform: translateY(-2px); filter: brightness(1.05);
  color: var(--text-primary); /* 同上、白系を維持 */
  border-color: var(--accent-wood);
}

/* ============================================================
 * Section Header (番号付きエディトリアル風、monograph "NO.1 FEATURE")
 * ============================================================ */

.gp-section {
  padding: 80px 40px;
}
.gp-section--alt { background: #0B0C0E; }

/* ============================================================
 * Category Archive (Phase 1.5、category.php)
 * - アーカイブヘッダー (kicker + カテゴリ名 + 件数 + 説明)
 * - ページネーション
 * - 0 件時のフォールバック
 * ============================================================ */

/* ============================================================
 * About block (front-page Section 04、Phase 1.5)
 * - 01-03 と同じ .gp-section-header の左揃え構造に統一
 * - 本文は .gp-section-header の下に配置 (max-width 揃え)
 * ============================================================ */
.gp-about-block {
  max-width: var(--container-max);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.gp-about-block__lead {
  color: var(--text-secondary);
  line-height: 1.85;
  font-size: 15px;
  margin: 0;
  max-width: 780px;
}
.gp-about-block__promises {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  max-width: 780px;
}
.gp-about-block__promises li {
  display: flex;
  gap: 12px;
  align-items: start;
  margin: 0;
}
.gp-about-block__check {
  color: var(--accent-jade);
  flex-shrink: 0;
  font-weight: 700;
}
.gp-about-block__cta {
  display: inline-block;
  margin-top: 8px;
  justify-self: start;
}

.gp-archive__breadcrumb {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 40px 0;
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--f-display);
  letter-spacing: 0.04em;
}
.gp-archive__breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.gp-archive__breadcrumb a:hover { color: var(--accent-honey); }

.gp-archive-header-section { padding-bottom: 40px; }

.gp-archive__desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 800px;
}

.gp-archive__pagination {
  max-width: var(--container-max);
  margin: 56px auto 0;
  padding: 0 40px;
}
.gp-archive__pagination-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.gp-archive__pagination-list a,
.gp-archive__pagination-list span {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--f-display);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.15s ease;
  min-width: 40px;
  text-align: center;
}
.gp-archive__pagination-list a:hover {
  background: var(--bg-elevated);
  color: var(--accent-honey);
  border-color: var(--accent-honey);
}
.gp-archive__pagination-list .current {
  background: var(--accent-honey);
  color: var(--bg-base);
  border-color: var(--accent-honey);
  font-weight: 700;
}
.gp-archive__pagination-list .dots {
  border: none;
  background: transparent;
}

.gp-archive__empty {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 20px;
  color: var(--text-secondary);
  line-height: 1.85;
}
.gp-archive__empty p { margin: 0 0 20px; }

.gp-section-header {
  display: grid; gap: 14px;
  margin-bottom: 36px;
  max-width: var(--container-max);
}
.gp-section-header__nums {
  display: flex; align-items: baseline; gap: 18px;
  color: var(--accent-wood);
}
.gp-section-header__num {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 0.9;
  color: var(--accent-wood);
}
.gp-section-header__rule {
  flex: 0 0 64px;
  height: 1px; background: var(--accent-wood);
  opacity: 0.5;
  align-self: center;
}
.gp-section-header__kicker {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.gp-section-header__title {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: 36px;
  color: var(--text-primary);
  max-width: 640px;
  line-height: 1.18;
}
.gp-section-header__subtitle {
  color: var(--text-secondary);
  max-width: 560px;
  font-size: 14px;
  line-height: 1.7;
}

/* ============================================================
 * Categories grid (front-page)
 * ============================================================ */

.gp-categories {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  border: 1px solid var(--border);
}
.gp-categories__cell {
  padding: 32px 24px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid; gap: 14px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background .15s;
}
.gp-categories__cell:hover {
  background: var(--bg-elevated);
}
.gp-categories__cell:nth-child(5n) { border-right: none; }
.gp-categories__cell:nth-last-child(-n+5) { border-bottom: none; } /* 5列x2行 */
.gp-categories__icon {
  color: var(--accent-wood);
}
.gp-categories__label-en {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.gp-categories__name {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.3;
}
.gp-categories__count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
@media (max-width: 1024px) {
  .gp-categories { grid-template-columns: repeat(2, 1fr); }
  .gp-categories__cell:nth-child(5n) { border-right: 1px solid var(--border); }
  .gp-categories__cell:nth-child(2n) { border-right: none; }
  .gp-categories__cell:nth-last-child(-n+5) { border-bottom: 1px solid var(--border); }
  .gp-categories__cell:nth-last-child(-n+2) { border-bottom: none; }
}

/* 記事少ない時のプレースホルダー
   count == 0 の時は <span class="gp-categories__cell gp-categories__cell--empty"> でレンダリング、
   記事追加で count > 0 になれば自動的に <a class="gp-categories__cell"> に戻り hover も復活する */
.gp-categories__count--empty {
  color: var(--accent-wood);
  font-style: italic;
}
.gp-categories__cell--empty { cursor: default; }
.gp-categories__cell--empty:hover { background: transparent; }

/* ============================================================
 * Article cards (Featured / Latest grid)
 * ============================================================ */

.gp-article-card {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform .15s;
}
.gp-article-card:hover {
  transform: translateY(-4px);
}
.gp-article-card__image {
  aspect-ratio: 16/9;
  margin-bottom: 16px;
  background: #15161A;
  border: 1px solid var(--border);
  overflow: hidden;
}
.gp-article-card__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.gp-article-card__category {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-wood);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gp-article-card__title {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.gp-article-card__date {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.gp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.gp-grid-3-rows-2 { grid-template-rows: auto auto; row-gap: 56px; }
@media (max-width: 1024px) {
  .gp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gp-grid-3 { grid-template-columns: 1fr; }
}

/* 記事少ない時のフォールバック表示 */
.gp-empty-state {
  text-align: center;
  padding: 60px 40px;
  color: var(--text-muted);
}
.gp-empty-state__icon {
  font-family: var(--f-display);
  font-size: 48px;
  color: var(--accent-wood);
  opacity: 0.4;
  margin-bottom: 16px;
}
.gp-empty-state__text {
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* ============================================================
 * Article (single) page
 * ============================================================ */

.gp-article {
  /* 2カラム化により max-width/padding は子要素 (.gp-article__layout 等) で個別制御 */
  margin-top: 60px;
  margin-bottom: 60px;
}
.gp-article__breadcrumb {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}
.gp-article__breadcrumb a { color: var(--text-secondary); }

.gp-article__meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.gp-article__meta-info {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gp-article__title {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.gp-article__lead {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 40px;
}

/* Writer Agent が出力する HTML 用のスタイル (the_content() 内側) */
.gp-article-body h2 {
  font-family: var(--f-jp-heavy);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  margin: 56px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent-wood);
  color: var(--text-primary);
}

.gp-article-body h3 {
  font-family: var(--f-jp-heavy);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  margin: 40px 0 16px;
  color: var(--text-primary);
}

.gp-article-body h4 {
  font-weight: 700;
  font-size: 16px;
  margin: 24px 0 12px;
  color: var(--accent-honey);
}

.gp-article-body p {
  font-size: 16px;
  line-height: 1.95;
  margin: 0 0 20px;
  color: var(--text-primary);
}

.gp-article-body ul, .gp-article-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
  line-height: 1.85;
}
.gp-article-body li { margin-bottom: 8px; }

.gp-article-body img {
  margin: 24px auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.gp-article-body a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gp-article-body a:hover {
  color: var(--accent-honey);
}

/* Writer Agent のスペック比較表 (.aff-spec-compare) を Dark Walnut 化 */
.gp-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.gp-article-body table thead {
  background: var(--bg-elevated) !important;
}
.gp-article-body table th, .gp-article-body table td {
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  text-align: left;
}
.gp-article-body table th {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 400;
}
.gp-article-body table td {
  color: var(--text-primary);
}
.gp-article-body table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* 価格表示 (インラインスタイル使用時のレガシー対応) */
.gp-article-body table td[style*="text-align:right"] {
  font-family: var(--f-mono);
  color: var(--accent-honey);
  font-weight: 600;
}

/* スペック比較表 — Phase 1.5 改修 (#9, #10)
 * - インラインスタイル不使用前提でクラスのみ装飾
 * - 行全体クリッカブル (data-href + assets/js/spec-table.js で <a> 以外のクリックを検出)
 * - Best 3 行 (data-rank=1/2/3) を honey/rust/jade で薄く着色
 */
.gp-article-body table.gp-spec-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 13px;
}
/* スペック比較表 wrapper (2026-05-09 Step 1+ 検証)
 * 業界標準パターン (urakata.me / teratail 事例): wrapper div + overflow-x: auto + table min-width 明示指定
 * 既存の @media 700px の display:block + overflow-x:auto は維持 (PC 700px 以下の動作互換)。
 * shrink-to-fit=no と組み合わせて使用 (viewport meta に指定)。
 *
 * 必須 HTML 構造: 親 div で table を囲む
 */
.gp-article-body .gp-spec-table-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  margin: 24px 0;
  position: relative;       /* スクロールヒント矢印 (::after) の絶対配置用 */
}
/* スクロールヒント矢印 (2026-05-09 案 C: Vanilla JS + CSS)
 * scroll-hint.js が is-scrollable クラスを動的に追加 (table > wrapper の場合のみ)
 * ユーザーがスクロールしたら is-scrolled クラスで非表示 */
.gp-article-body .gp-spec-table-wrapper.is-scrollable::after {
  content: "→";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-honey);
  background: rgba(232, 184, 108, 0.15);
  border: 1px solid var(--accent-honey);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: gp-scroll-hint-pulse 1.5s ease-in-out infinite;
  z-index: 5;
}
.gp-article-body .gp-spec-table-wrapper.is-scrolled::after {
  display: none;
}
@keyframes gp-scroll-hint-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(-50%) translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) translateX(6px);
  }
}
.gp-article-body .gp-spec-table-wrapper > table.gp-spec-table {
  width: auto;              /* Step 1+++: グローバル `.gp-article-body table { width: 100% }` を上書き */
  min-width: 700px;
  table-layout: auto;       /* Step 1+++: 明示 (デフォルトだが事例 1 推奨) */
  margin: 0;
}
.gp-article-body table.gp-spec-table th {
  background: var(--bg-elevated);
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 400;
  padding: 12px 10px !important;
  border: 1px solid var(--border) !important;
  text-align: left;
}
.gp-article-body table.gp-spec-table td {
  padding: 10px !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary);
  vertical-align: middle;
}
.gp-article-body table.gp-spec-table tbody tr {
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.15s ease;
}
.gp-article-body table.gp-spec-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
.gp-article-body table.gp-spec-table tbody tr:hover {
  background: rgba(232, 184, 108, 0.07);  /* honey 7% */
}
/* Best 3 行を順位カラーで微着色 (識別性、過度なコントラスト無し) */
.gp-article-body table.gp-spec-table tbody tr[data-rank="1"] {
  background: rgba(232, 184, 108, 0.06);
  border-left: 2px solid var(--accent-honey);
}
.gp-article-body table.gp-spec-table tbody tr[data-rank="2"] {
  background: rgba(217, 96, 59, 0.06);
  border-left: 2px solid var(--accent-rust);
}
.gp-article-body table.gp-spec-table tbody tr[data-rank="3"] {
  background: rgba(107, 164, 140, 0.06);
  border-left: 2px solid var(--accent-jade);
}
.gp-article-body table.gp-spec-table tbody tr[data-rank="1"]:hover,
.gp-article-body table.gp-spec-table tbody tr[data-rank="2"]:hover,
.gp-article-body table.gp-spec-table tbody tr[data-rank="3"]:hover {
  background: rgba(232, 184, 108, 0.12);
}
.gp-article-body table.gp-spec-table td.gp-spec-table__rank {
  font-family: var(--f-display);
  font-size: 14px;
  text-align: center;
  color: var(--accent-honey);
}
.gp-article-body table.gp-spec-table td.gp-spec-table__price {
  font-family: var(--f-mono);
  color: var(--accent-honey);
  font-weight: 600;
  text-align: right;
}
.gp-article-body table.gp-spec-table td a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.gp-article-body table.gp-spec-table td a:hover {
  color: var(--accent-honey);
  border-bottom-color: var(--accent-honey);
}
@media (max-width: 700px) {
  .gp-article-body table.gp-spec-table {
    font-size: 12px;
    /* overflow-x: auto / display: block / white-space: nowrap を削除 (2026-05-09)
     * 理由: 新設 .gp-spec-table-wrapper 側で overflow-x: auto を担当するため、
     *      table 自体に overflow-x を重ねると **2 本のスクロールバー**が出てしまう。
     *      wrapper に統一することで二重スクロールを解消。 */
  }
}

/* ============================================================
 * 参考扱いセクション (合算商品、ランキング対象外)
 * 2026-05-05 追加 (ユーザー指摘 4)
 *   - SPECS: <tr class="gp-spec-table__reference-divider"> + <tr data-rank="reference">
 *   - WHO FOR: <article class="gp-persona-card gp-persona-card--reference">
 *   - REVIEWS: <article class="gp-review-item gp-review-item--reference">
 *   - 共通区切り: <div class="gp-reference-divider">
 * 視覚的に「参考扱い = 通常のランキングとは別系列」が一目で分かるよう
 * 薄い枠線 + 通常より淡い色で表現 (装飾過多にせず、誠実に区別)
 * ============================================================ */

/* 共通: 参考扱いセクションの区切り (REVIEWS / WHO FOR で使用) */
.gp-article-body .gp-reference-divider {
  margin: 56px 0 28px;
  padding: 22px 24px;
  border-left: 3px solid var(--accent-wood);
  background: var(--bg-elevated);
  border-radius: 0 6px 6px 0;
}
.gp-article-body .gp-reference-divider__title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-wood);
  margin: 0 0 10px;
}
.gp-article-body .gp-reference-divider__lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* SPECS: 参考扱い区切り行 */
.gp-article-body table.gp-spec-table tr.gp-spec-table__reference-divider {
  background: transparent !important;
  pointer-events: none;
}
.gp-article-body table.gp-spec-table tr.gp-spec-table__reference-divider:hover {
  background: transparent !important;
}
.gp-article-body table.gp-spec-table .gp-spec-table__reference-divider-cell {
  padding: 18px 14px 12px;
  border-top: 2px solid var(--accent-wood);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
  letter-spacing: 0.02em;
}
.gp-article-body table.gp-spec-table .gp-spec-table__reference-divider-cell strong {
  color: var(--accent-wood);
  font-family: var(--f-display);
  letter-spacing: 0.06em;
  margin-right: 8px;
}

/* SPECS: 参考扱い行 (data-rank="reference"、2026-05-05 改修 A 案: 通常行と統一、色のみ wood) */
.gp-article-body table.gp-spec-table tbody tr[data-rank="reference"] {
  /* 通常行と同じ背景・透明度・hover 動作を継承、色違いだけで参考扱いと判別 */
}
.gp-article-body table.gp-spec-table td.gp-spec-table__rank--reference {
  /* font-family / font-size / font-weight は通常 .gp-spec-table__rank を継承 */
  color: var(--accent-wood);  /* honey → wood (色のみ変更) */
}

/* REVIEWS: 参考扱いカード (2026-05-05 改修 A 案: 通常カードと統一、色のみ wood) */
.gp-article-body .gp-review-item--reference {
  /* 通常 .gp-review-item と同じ背景・margin・padding・shadow を継承 */
  border-top-color: var(--accent-wood);  /* honey → wood (上部アクセントボーダーの色のみ変更) */
}
.gp-article-body .gp-review-item--reference .gp-review-item__num--reference {
  /* font-family / font-weight: 600 / line-height: 1 / letter-spacing は通常 .gp-review-item__num を継承 */
  color: var(--accent-wood);  /* honey → wood (色のみ変更) */
  /* 2026-05-05 ユーザー要望: 「参考1/2/3」は日本語混じり 3 文字で通常 56px だと過大なため、
     視覚バランス調整として font-size のみ縮小 (約 65%) */
  font-size: 36px;
}

/* WHO FOR: 参考扱いペルソナカード (2026-05-05 改修 A 案: 通常カードと統一、色のみ wood) */
.gp-article-body .gp-persona-card--reference {
  /* 通常 .gp-persona-card と同じ背景・border・padding を継承 */
  border-top-color: var(--accent-wood);  /* 上部アクセント色のみ変更 (通常 .gp-persona-card に同パターンがあれば) */
}
.gp-article-body .gp-persona-card--reference .gp-persona-card__kicker--reference {
  /* font-family / font-size / letter-spacing は通常 .gp-persona-card__kicker を継承 */
  color: var(--accent-wood);  /* 色のみ変更 */
}

/* CTA リンク (Writer Agent が出力する楽天リンク等) */
.gp-article-body a[rel*="sponsored"] {
  font-weight: 600;
}

/* ============================================================
 * Share row (記事ページ)
 * ============================================================ */

.gp-share {
  display: flex; align-items: center; gap: 12px;
  margin: 32px 0;
}
.gp-share__label {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent-wood);
  text-transform: uppercase;
}
.gp-share__btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--bg-card);
  transition: color .15s, border-color .15s, background .15s;
}
.gp-share__btn:hover { color: var(--text-primary); border-color: var(--accent-honey); }
.gp-share__btn--x:hover       { color: #ECEAE6; border-color: #ECEAE6; }
.gp-share__btn--line:hover    { color: #06C755; border-color: #06C755; }
.gp-share__btn--fb:hover      { color: #1877F2; border-color: #1877F2; }

/* X ボタン (アクティブ): 通常時から honey 系で目立たせる — 2026-05-04 追加 */
.gp-share__btn--x {
  color: var(--accent-honey);
  border-color: var(--accent-honey);
}

/* 準備中ボタン (LINE / Facebook / コピー): <span> 化で機能停止 (ヘッダーと整合、2026-05-10)
 * リリース時点では X のみ正式対応。将来正式対応時は <span> を <a> に戻し、--inactive クラス削除 */
.gp-share__btn--inactive {
  opacity: 0.32;
  cursor: default;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.gp-share__btn--inactive:hover {
  opacity: 0.55;
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--bg-card);
}

/* ============================================================
 * 最終更新日 (ADR-010 SEO安定性)
 * ============================================================ */

.gp-last-updated {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 32px 0 16px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-left: 2px solid var(--accent-wood);
}

/* ============================================================
 * Page (固定ページ: ABOUT / Policy)
 * ============================================================ */

.gp-page {
  max-width: var(--article-max);
  margin: 60px auto;
  padding: 0 40px;
}
.gp-page__title {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  margin-bottom: 40px;
  color: var(--text-primary);
}
.gp-page-body p.gp-lead {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 40px;
}
.gp-page-body h2 {
  font-family: var(--f-jp-heavy);
  font-weight: 700;
  font-size: 28px;
  margin: 48px 0 16px;
  color: var(--text-primary);
}
.gp-page-body h3 {
  font-family: var(--f-jp-heavy);
  font-weight: 700;
  font-size: 19px;
  margin: 32px 0 12px;
  color: var(--accent-honey);
}
.gp-page-body p { font-size: 16px; line-height: 1.9; margin: 0 0 20px; color: var(--text-primary); }
.gp-page-body ul, .gp-page-body ol { margin: 0 0 20px; padding-left: 24px; line-height: 1.85; }
.gp-page-body li { margin-bottom: 8px; }
.gp-page-body hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }

/* レビュー方針などの番号付きステップリスト
 * - 番号 / タイトル / 説明文 を 3 カラムグリッドで揃える
 * - タイトルカラム幅を固定して説明文の頭出しを統一
 */
.gp-page-body ol.gp-steps {
  list-style: none;
  padding-left: 0;
  counter-reset: gp-step;
  margin: 0 0 24px;
}
.gp-page-body ol.gp-steps > li {
  counter-increment: gp-step;
  display: grid;
  grid-template-columns: 2.2em 11em 1fr;
  gap: 4px 14px;
  align-items: baseline;
  margin-bottom: 14px;
  line-height: 1.85;
}
.gp-page-body ol.gp-steps > li::before {
  content: counter(gp-step) ".";
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--accent-honey);
  text-align: right;
}
.gp-page-body ol.gp-steps > li strong {
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.gp-page-body ol.gp-steps__desc,
.gp-page-body ol.gp-steps .gp-steps__desc {
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .gp-page-body ol.gp-steps > li {
    grid-template-columns: 2em 1fr;
    grid-template-areas: "num title" ". desc";
  }
  .gp-page-body ol.gp-steps > li::before { grid-area: num; }
  .gp-page-body ol.gp-steps > li strong { grid-area: title; white-space: normal; }
  .gp-page-body ol.gp-steps > li .gp-steps__desc { grid-area: desc; }
}

.gp-page-body table {
  width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
}
.gp-page-body table th, .gp-page-body table td {
  padding: 12px 14px; border: 1px solid var(--border); text-align: left;
}
.gp-page-body table th {
  background: var(--bg-elevated);
  font-family: var(--f-display); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 400;
}

/* ============================================================
 * Global Footer
 * ============================================================ */

.gp-footer {
  border-top: 1px solid var(--border);
  padding: 64px 40px 32px;
  background: #0B0C0E;
}
.gp-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.gp-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
.gp-footer__brand-logo {
  font-family: var(--f-display);
  font-size: 40px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
  transition: color .15s;
}
.gp-footer__brand-logo:hover {
  color: var(--accent-honey);
}
.gp-footer__brand-mission {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.8;
  max-width: 280px;
}
.gp-footer__col h4 {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.gp-footer__col ul {
  display: grid; gap: 10px;
  list-style: none; padding: 0; margin: 0;
  font-size: 13px;
}
.gp-footer__col a { color: var(--text-secondary); }
.gp-footer__col a:hover { color: var(--text-primary); }

.gp-footer__bottom {
  border-top: 1px solid var(--border-soft);
  padding-top: 20px;
  display: flex; justify-content: space-between;
  color: var(--text-muted);
  font-size: 12px;
}
.gp-footer__copyright { font-family: var(--f-mono); }
.gp-footer__legal { display: flex; gap: 24px; }
.gp-footer__legal a { color: var(--text-muted); }
.gp-footer__legal a:hover { color: var(--text-secondary); }

@media (max-width: 1024px) {
  .gp-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .gp-footer__grid { grid-template-columns: 1fr; }
  .gp-footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ============================================================
 * Reduce motion 対応
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .gp-article-card:hover, .gp-cta:hover { transform: none; }
}

/* ============================================================
 * GeneratePress override (親テーマの一部スタイルを上書き)
 * ============================================================ */

.entry-content > * { max-width: none; }  /* GeneratePress のコンテナ制限を無効化 */
.site-header, .site-footer { display: none; } /* 子テーマ独自のヘッダー/フッターを使う */

/* ============================================================
 * Article — 2カラム Layout (TOC sticky + 本文)
 * 当初案 mocks/components/article.jsx の ArticlePage layout に対応
 * ============================================================ */

.gp-article {
  /* container と breadcrumb/title/hero/share-row は max-width 1200px のフルワイド */
}

.gp-article__layout {
  max-width: var(--article-container-max);
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
}

.gp-article__main {
  min-width: 0;
  display: grid;
  gap: 80px;
}

/* TL;DR と各 section の間に 80px の余白を入れる (Writer Agent 出力も同構造前提) */
.gp-article-body {
  display: grid;
  gap: 80px;
  min-width: 0;
}
/* Step 1++++++ (2026-05-09): .gp-article-body の直下の子 (各 section / aside) も
 * grid item で min-width: auto デフォルト → auto-grow する。
 * Console 調査で SECTION が 1098px に拡張していることを実証。
 * 事例 1 落とし穴 ① の対策を子要素全体に一括適用。 */
.gp-article-body > * {
  min-width: 0;
}

.gp-article__toc {
  position: sticky;
  top: 100px;  /* sticky ヘッダー高 (~80px) + 余白 */
  align-self: start;
}

@media (max-width: 960px) {
  .gp-article__layout {
    grid-template-columns: 1fr;
    padding: 24px 20px 60px;
    gap: 40px;
  }
  .gp-article__main { gap: 60px; }
  .gp-article__toc {
    position: static;
    border-bottom: 1px solid var(--border);
    padding-bottom: 24px;
  }
}

/* ============================================================
 * TOC (Table of Contents) Sidebar
 * ============================================================ */

.gp-toc__kicker {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent-wood);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.gp-toc__list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 12px;
  font-size: 13px;
}

.gp-toc__item {
  display: flex; gap: 12px;
  border-left: 2px solid var(--border);
  padding-left: 14px;
  line-height: 1.6;
  transition: border-color .15s;
}

.gp-toc__item--active {
  border-left-color: var(--accent-honey);
}

.gp-toc__num {
  font-family: var(--f-mono);
  color: var(--text-muted);
  min-width: 24px;
  font-size: 11px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.gp-toc__link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s;
}

.gp-toc__item--active .gp-toc__link {
  color: var(--text-primary);
}

.gp-toc__link:hover {
  color: var(--accent-honey);
}

/* ============================================================
 * TL;DR Block (記事冒頭の要約ボックス)
 * 当初案 article.jsx <Intro> に対応
 * ============================================================ */

.gp-tldr {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-honey);
  padding: 32px;
  border-radius: 4px;
  margin: 0;
}

.gp-tldr__kicker {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent-honey);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.gp-tldr__body {
  font-size: 16px;
  line-height: 2;
  color: var(--text-primary);
  margin: 0;
}

.gp-tldr__body strong {
  color: var(--accent-honey);
  font-weight: 700;
}

/* TL;DR の適合度ガイド (Step 1G / ADR-011 - パターンB「条件分岐+グラデーション」)
   旧 .gp-tldr__not-for は否定的に響く表現だったため、パターンBで書き換え。
   3段階 (strong / good / consider) で「対象読者」をポジティブに伝える */
.gp-tldr__fit-guide {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed var(--border);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 16px;
  font-size: 13px;
  line-height: 1.7;
}
.gp-tldr__fit-label {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
  padding-top: 2px;
}
.gp-tldr__fit-label--strong {
  color: var(--accent-honey);
}
.gp-tldr__fit-label--good {
  color: var(--accent-wood);
}
.gp-tldr__fit-label--consider {
  color: var(--text-muted);
}
.gp-tldr__fit-desc {
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 720px) {
  .gp-tldr__fit-guide {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .gp-tldr__fit-desc {
    margin-bottom: 8px;
  }
}

/* ============================================================
 * FAQ セクション (Step 1G - FAQPage schema 連動)
 * <details>/<summary> による折りたたみ式
 * ============================================================ */

.gp-faq {
  display: grid; gap: 0;
  border-top: 1px solid var(--border);
}
.gp-faq__item {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.gp-faq__question {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-jp-heavy);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-primary);
  position: relative;
  transition: color .15s;
}
.gp-faq__question::-webkit-details-marker { display: none; }
.gp-faq__question::before {
  content: "Q";
  font-family: var(--f-display);
  color: var(--accent-honey);
  font-size: 22px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 28px;
}
.gp-faq__question::after {
  content: "+";
  margin-left: auto;
  font-family: var(--f-mono);
  color: var(--accent-wood);
  font-size: 24px;
  font-weight: 400;
  transition: transform .2s;
}
.gp-faq__item[open] .gp-faq__question::after {
  transform: rotate(45deg);
}
.gp-faq__question:hover {
  color: var(--accent-honey);
}
.gp-faq__answer {
  padding: 0 0 24px 44px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.95;
  position: relative;
}
.gp-faq__answer::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-display);
  color: var(--accent-wood);
  font-size: 22px;
  letter-spacing: 0.04em;
  width: 28px;
}

/* CTA リンク行 (ADR-011: itemprop="text" の外、acceptedAnswer の内) */
.gp-faq__cta-row {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}
.gp-article-body .gp-faq__cta-row a {
  color: var(--accent-honey);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .15s, border-color .15s;
}
.gp-article-body .gp-faq__cta-row a:hover {
  color: var(--accent-wood);
  border-bottom-color: var(--accent-wood);
}

/* TL;DR 内のアフィリエイトリンク (商品名) — honey 色 + 細い下線、hover で wood */
.gp-tldr a,
.gp-article-body .gp-tldr a {
  color: var(--accent-honey);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .15s, border-color .15s;
}
.gp-tldr a:hover,
.gp-article-body .gp-tldr a:hover {
  color: var(--accent-wood);
  border-bottom-color: var(--accent-wood);
}

/* ============================================================
 * H2 Section Header (英語キッカー + 大きい和文タイトル)
 * 当初案 article.jsx <H2 kicker="THE VERDICT"> に対応
 * ============================================================ */

.gp-h2-header {
  display: grid; gap: 8px;
  margin: 0 0 28px;
}

.gp-h2-header__kicker {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--accent-wood);
  text-transform: uppercase;
}

/* `.gp-article-body h2` の汎用スタイル (margin 56px / border-bottom 2px) を上書きするため、
   selector specificity を 0,2,1 に強化 */
.gp-article-body .gp-h2-header__title,
.gp-article-body h2.gp-h2-header__title {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  border: 0;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .gp-article-body .gp-h2-header__title { font-size: 26px; }
}

/* ============================================================
 * Best 3 Card (monograph layout — best3.jsx Layout C)
 * 1位 = honey / 2位 = wood / 3位 = jade で色分け
 * ============================================================ */

.gp-best3-stack {
  display: grid; gap: 0;
}

.gp-best3-stack__divider {
  height: 1px;
  background: var(--border);
  margin: 80px 0;
  border: 0;
}

.gp-best3-card {
  background: var(--bg-base);
  display: grid; gap: 0;
  margin: 0;
  padding: 0;
}

.gp-best3-card__header {
  display: flex; align-items: baseline; gap: 20px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.gp-best3-card__num {
  font-family: var(--f-display);
  font-size: 88px;
  line-height: 0.85;
  color: var(--accent-honey);
}

.gp-best3-card[data-rank="2"] .gp-best3-card__num { color: var(--accent-wood); }
.gp-best3-card[data-rank="3"] .gp-best3-card__num { color: var(--accent-jade); }

.gp-best3-card__kicker {
  display: grid; gap: 4px;
}

.gp-best3-card__label {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--accent-honey);
  text-transform: uppercase;
}

.gp-best3-card[data-rank="2"] .gp-best3-card__label { color: var(--accent-wood); }
.gp-best3-card[data-rank="3"] .gp-best3-card__label { color: var(--accent-jade); }

.gp-best3-card__from {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.gp-best3-card__image {
  display: block;
  margin: 0 0 32px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-card);
  /* 2026-05-04: aspect-ratio 16/9 → 1/1 に変更 (商品画像見切れ修正)
   * 楽天/Yahoo の商品画像は通常 1:1 (1000x1000) のため、1:1 枠で完全フィット
   * cover でも余白なく表示され、上下の見切れがゼロになる
   * カード縦サイズは増えるが、商品画像の視認性向上を優先 */
  aspect-ratio: 1/1;
  border: 1px solid var(--border);
}

.gp-best3-card__image img {
  width: 100%; height: 100%;
  /* contain に変更: 万一 16:9 等の非正方形画像が来た場合も見切れなしで表示
   * (1:1 画像の場合は cover/contain どちらでも同じ結果) */
  object-fit: contain;
  display: block;
}

/* 上段: タイトル + 評価 (横全幅、改行を防ぐ) */
.gp-best3-card__title-block {
  margin: 0 0 24px;
}

.gp-best3-card__title {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.gp-best3-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.gp-best3-card__title a:hover {
  color: var(--accent-honey);
}

.gp-best3-card__rating {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 0;
}

.gp-best3-card__stars {
  color: var(--accent-honey);
  letter-spacing: 0.05em;
  margin-right: 8px;
}

/* 下段: 説明文 (左 1.6fr) + 価格 (右 1fr、底揃え) */
.gp-best3-card__body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  margin: 0 0 32px;
  align-items: end;
}

.gp-best3-card__desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.95;
  margin: 0;
}

.gp-best3-card__price {
  align-self: end;
  text-align: right;
}

.gp-best3-card__price-label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.gp-best3-card__price-value {
  font-family: var(--f-mono);
  font-size: 44px;
  color: var(--accent-honey);
  line-height: 1;
  font-weight: 500;
}

/* Best 3 価格をアフィリエイトリンク化 — 通常は本来色 (honey/wood/jade) を維持、
   hover でわずかに明るく (brightness 1.15) して反応を示す */
.gp-best3-card__price-value a {
  color: inherit;
  text-decoration: none;
  transition: filter .15s, text-shadow .15s;
}
.gp-article-body .gp-best3-card__price-value a:hover {
  color: inherit;
  filter: brightness(1.15);
  text-shadow: 0 0 12px currentColor;
}

/* スペック比較表のリンク (品名・価格セル) — 通常 white、hover で honey */
.gp-article-body table a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color .15s;
}
.gp-article-body table a:hover {
  color: var(--accent-honey);
}

.gp-best3-card[data-rank="2"] .gp-best3-card__price-value { color: var(--accent-wood); }
.gp-best3-card[data-rank="3"] .gp-best3-card__price-value { color: var(--accent-jade); }

.gp-best3-card__ctas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;  /* CTA が 2つでも 3つでも自動で等分 */
  gap: 12px;
}

/* CTA 動的非表示: 3 ASP 全てに適用 (2026-05-04 改修)
   Yahoo 専売商品で楽天 CTA が空 / 楽天専売で Yahoo CTA が空 / Amazon リンク無効 など
   いずれの場合でも空 href のボタンを visibility: hidden で非表示化。
   grid セルは残るため楽天/Yahoo/Amazon ボタンの位置関係は完全に維持される。 */
.gp-best3-card__ctas .gp-cta--yahoo[href=""],
.gp-best3-card__ctas .gp-cta--yahoo:not([href]),
.gp-best3-card__ctas .gp-cta--yahoo[href="#"],
.gp-best3-card__ctas .gp-cta--rakuten[href=""],
.gp-best3-card__ctas .gp-cta--rakuten:not([href]),
.gp-best3-card__ctas .gp-cta--rakuten[href="#"],
.gp-best3-card__ctas .gp-cta--amazon[href=""],
.gp-best3-card__ctas .gp-cta--amazon:not([href]),
.gp-best3-card__ctas .gp-cta--amazon[href="#"] {
  visibility: hidden;
  pointer-events: none;
}

/* レビュー動画の注釈 (BRAND_FALLBACK モード時、2026-05-04 追加)
 * 型番ピンポイント動画がなく、ブランド名一致動画で代用している場合に表示 */
.gp-article-body .gp-video-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  font-style: normal;
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent-wood);
  border-radius: 0 3px 3px 0;
}

/* ============================================================
 * 10 機種徹底レビュー (REVIEWS セクション、2026-05-04 改修)
 * Layout C monograph 統一、機種間境目をナンバーバッジ + 区切り線で明確化
 * Best 3 カードほどの大型化はせず、10 機種並んでも読みやすい中型カード
 * ============================================================ */
.gp-review-item {
  position: relative;
  margin: 48px 0;
  padding: 36px 32px 32px;
  background: var(--bg-card);
  border-top: 2px solid var(--accent-honey);  /* 上部にアクセントボーダー、機種境界の主役 */
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.gp-review-item:first-of-type {
  margin-top: 24px;
}

.gp-review-item__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.gp-review-item__num {
  font-family: var(--f-mono, "JetBrains Mono", "Courier New", monospace);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-honey);
  letter-spacing: -0.02em;
}

.gp-review-item__rank-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gp-review-item__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 20px;
  color: var(--text-primary);
}

.gp-review-item__title a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.gp-review-item__title a:hover {
  border-bottom-color: var(--accent-honey);
  color: var(--text-primary);
}

.gp-review-item__image {
  margin: 0 0 20px;
}

.gp-review-item__image img {
  border-radius: 3px;
  display: block;
}

.gp-review-item__lead {
  font-size: 15.5px;
  line-height: 1.85;
  margin: 0 0 24px;
  color: var(--text-primary);
}

.gp-review-item h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 24px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--accent-honey);
}

.gp-review-item ul {
  margin: 12px 0 16px;
  padding-left: 22px;
}

.gp-review-item ul li {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.gp-review-item__cta {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  text-align: right;
}

.gp-review-item__cta a {
  display: inline-block;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-honey);
  border: 1px solid var(--accent-honey);
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.gp-review-item__cta a:hover {
  background: var(--accent-honey);
  color: #1A1305;
  border-color: var(--accent-honey);
}

@media (max-width: 768px) {
  .gp-review-item {
    padding: 28px 20px 24px;
    margin: 36px 0;
  }
  .gp-review-item__num {
    font-size: 44px;
  }
  .gp-review-item__title {
    font-size: 19px;
  }
  .gp-review-item__lead {
    font-size: 15px;
  }
}

/* ============================================================
 * GAPLESS スコアブロック (Best 3 各カード内、Body と CTA の間)
 * Phase 1.5 / ADR-014: 独自評価指標の表示
 * ============================================================ */

.gp-score {
  margin: 16px 0 14px;            /* 上下スペース短縮 (24/20 → 16/14) */
  padding: 14px 22px;             /* 上下 padding 短縮 (20 → 14) */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  grid-template-rows: auto auto;
  gap: 6px 28px;                  /* 行間短縮 */
  align-items: start;
}

.gp-score__heading {
  grid-column: 1 / -1;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-honey);
  margin: 0 0 2px;                /* 4px → 2px */
  font-weight: 600;
}

.gp-score__total {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--f-display);
}
.gp-score__value {
  font-size: 44px;
  line-height: 1;
  color: var(--text-primary);
  font-weight: 700;
}
.gp-score__max {
  font-size: 16px;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Phase 1.5 改修 #2:
 * - C/P/S 文字を大きく (axis 14 → 18, axis-value 14 → 18, axis-label 12 → 14)
 * - C コスパ <-> 数値 を近接配置 (axis-value の margin-left: auto を削除)
 * - 各セット (C コスパ 2.3) を flex で密集 + セット間に余白
 */
.gp-score__breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-around;  /* 3 セットを均等に間隔配置 */
  gap: 6px 16px;
  font-size: 14px;
  align-self: center;
}
.gp-score__breakdown li {
  display: flex;
  align-items: baseline;
  gap: 8px;                       /* C / コスパ / 2.3 を近接 (6 → 8) */
  padding: 0;
}
.gp-score__axis {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;                /* 18 → 22 さらに拡大 */
  color: var(--accent-honey);
  min-width: 18px;
}
.gp-score__axis-label {
  color: var(--text-secondary);
  font-size: 15px;                /* 14 → 15 微増 */
}
.gp-score__axis-value {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 22px;                /* 18 → 22 拡大 (axis と同サイズで視覚バランス) */
  font-variant-numeric: tabular-nums;
}

.gp-score__explain {
  grid-column: 1 / -1;
  margin: 4px 0 0;                /* 6 → 4 短縮 */
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.gp-score__explain a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gp-score__explain a:hover { color: var(--accent-honey); }

@media (max-width: 720px) {
  .gp-best3-card__num { font-size: 60px; }
  .gp-best3-card__title { font-size: 24px; }
  .gp-best3-card__title-block { margin-bottom: 20px; }
  .gp-best3-card__body {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .gp-best3-card__price { text-align: left; }
  .gp-best3-card__price-value { font-size: 32px; }
  .gp-best3-card__ctas {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gp-best3-stack__divider { margin: 56px 0; }
  .gp-score {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gp-score__breakdown {
    grid-template-columns: 1fr;
    gap: 6px 12px;
  }
  .gp-score__breakdown li {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 4px;
  }
  .gp-score__breakdown li:last-child { border-bottom: 0; }
  .gp-score__explain { text-align: left; }
}

/* ============================================================
 * Points Guide (選び方の N つのポイント — 大番号 56px + 説明)
 * 当初案 article.jsx <PointsGuide> に対応
 * ============================================================ */

.gp-points-guide {
  display: grid; gap: 0;
}

.gp-points-guide__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.gp-points-guide__item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.gp-points-guide__num {
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--accent-wood);
  line-height: 0.9;
}

.gp-points-guide__body h3 {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.gp-points-guide__body p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
}

@media (max-width: 720px) {
  .gp-points-guide__item {
    grid-template-columns: 64px 1fr;
    gap: 16px;
  }
  .gp-points-guide__num { font-size: 36px; }
}

/* ============================================================
 * Persona Cards (こんな人にはこのモデル — カード形式)
 * 当初案 article.jsx <PersonaTable> に対応
 * ============================================================ */

.gp-persona-cards {
  display: grid; gap: 16px;
  margin: 0;
}

.gp-persona-card {
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-honey);  /* 1-7 位のゴールドバー、参考扱い (--reference) では wood 色に上書き */
  background: var(--bg-card);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 2fr;
  gap: 24px;
  align-items: center;
  border-radius: 4px;
}

.gp-persona-card__head { min-width: 0; }

.gp-persona-card__kicker {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-wood);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.gp-persona-card__persona {
  font-family: var(--f-jp-heavy);
  font-weight: 900;
  font-size: 18px;
  margin: 0;
  color: var(--text-primary);
  line-height: 1.4;
}

.gp-persona-card__model {
  font-family: var(--f-jp-heavy);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-honey);
  line-height: 1.3;
}

.gp-persona-card__model a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.gp-persona-card__model a:hover {
  color: var(--accent-wood);
}

.gp-persona-card__why {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 720px) {
  .gp-persona-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
  }
}

/* ============================================================
 * 記事冒頭ヘッダー (パンくず・タイトル・リード・ヒーロー画像)
 * 2カラム化前のフルワイドエリア
 * ============================================================ */

.gp-article > .gp-article__breadcrumb,
.gp-article > .gp-article__meta,
.gp-article > article > .gp-article__title,
.gp-article > article > .gp-article__lead,
.gp-article > article > .gp-article__hero,
.gp-article > article > .gp-share {
  max-width: var(--article-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 720px) {
  .gp-article > .gp-article__breadcrumb,
  .gp-article > .gp-article__meta,
  .gp-article > article > .gp-article__title,
  .gp-article > article > .gp-article__lead,
  .gp-article > article > .gp-article__hero,
  .gp-article > article > .gp-share {
    padding-left: 20px;
    padding-right: 20px;
  }
}