/* ============================================================================
   pcog-white.css — 「白いゲーム雑誌」リデザイン（2026-09-03）
   gamestreet-light.css の直後（最後）に読み込む前提の最終上書き層。
   節: ①トークン ②共通シャシー ③一覧・カード ④記事 ⑤ダーク残骸白地化
   仕様書: KAGOYA ~/codex/work/pcog-redesign/DESIGN-SPEC.md
   ========================================================================== */

/* ============================================================
   ① デザイントークン + 旧変数のリマップ
   ダーク(gamestreet.css)とライト(gamestreet-light.css)は同名変数を
   参照している。ここで最後に再定義すると全参照が一括で置き替わる。
   ============================================================ */
body.gs-page-front,
body.gs-page-archive,
body.gs-page-article {
  /* 新トークン */
  --pw-bg: #ffffff;
  --pw-bg-soft: #f8f9fb;
  --pw-ink: #1a1d23;
  --pw-ink-dim: #555b66;
  --pw-ink-mute: #8a91a0;
  --pw-line: #e8eaef;
  --pw-line-2: #d6dae2;
  --pw-orange: #f97316;
  --pw-orange-deep: #ea580c;
  --pw-orange-soft: #fff4ec;
  --pw-yellow: #ffc801;
  --pw-gold: #d99a06;
  --pw-blue: #2f6fed;
  --pw-green: #17903a;
  --pw-red: #d92c3f;
  --pw-radius: 14px;
  --pw-radius-sm: 8px;
  --pw-shadow: 0 1px 2px rgba(20,24,33,.05), 0 8px 24px -12px rgba(20,24,33,.12);
  --pw-shadow-hover: 0 2px 4px rgba(20,24,33,.06), 0 16px 32px -12px rgba(249,115,22,.18);

  /* 旧変数のリマップ（ダーク/ライトの参照を一括で暖色系へ） */
  --bg: #ffffff;
  --bg-2: #f8f9fb;
  --panel: #ffffff;
  --panel-2: #f8f9fb;
  --line: #e8eaef;
  --line-2: #d6dae2;
  --fg: #1a1d23;
  --fg-dim: #555b66;
  --fg-mute: #8a91a0;
  --neon: #ea580c;        /* 旧ピンク → オレンジ（文字にも使うので濃いめ） */
  --cyan: #2f6fed;        /* 旧シアン → 情報ブルー */
  --acid: #17903a;        /* スコア・無料表示 → グリーン */
  --gold: #d99a06;
  --lime: #17903a;
  --brand-blue: #ea580c;  /* ライトのホバー色 → オレンジ */
  --brand-violet: #8b5cf6;
  --surface-blue: #fff4ec; /* ホバー淡地 → オレンジ淡地 */
}

body.gs-page-front,
body.gs-page-archive,
body.gs-page-article {
  background: var(--pw-bg) !important;
  color: var(--pw-ink);
}

/* ============================================================
   ② 共通シャシー（ティッカー / ヘッダー / サイドバー / フッター / ページャ）
   ============================================================ */

/* --- ティッカー: 黒帯はブランドとして残す。区切り記号を黄色に --- */
.gs-ticker {
  background: #0d0f14;
  border-bottom: 2px solid var(--pw-yellow);
}
.gs-ticker__item { color: #cfd4de; }
.gs-ticker__item b, .gs-ticker__item strong { color: #fff; }
.gs-ticker__item::before { color: var(--pw-yellow); }

/* --- ヘッダー --- */
.gs-header {
  background: #fff;
  border-bottom: 1px solid var(--pw-line);
  box-shadow: 0 1px 0 rgba(20,24,33,.03);
}
.gs-logo__mark { color: var(--pw-orange); }
.gs-logo__monogram { color: var(--pw-orange-deep); }

/* ナビ: hover/現在地はオレンジ下線。淡地ホバーは変数リマップで既に効く */
.gs-nav__link {
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 -3px 0 transparent;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.gs-nav__item:hover .gs-nav__link,
.gs-nav__link:hover {
  background: var(--pw-orange-soft);
  box-shadow: inset 0 -3px 0 var(--pw-orange);
}
.gs-nav__item:hover .gs-nav__jp { color: var(--pw-orange-deep); }

/* 【バグ修正】「ジャンル」項目: a.gs-nav__link の包みが無く、
   素の span 2つが flex 行で重なる。transform.py が span.gs-nav__link で
   包む恒久修正を行うが、CSSでも保険をかける（:has 対応ブラウザ） */
.gs-nav__item--has-menu:not(:has(> .gs-nav__link)) {
  flex-direction: column;
  justify-content: center;
  padding: 15px 20px;
  min-width: 136px;
}
/* span.gs-nav__link（transform後）にも a 用レイアウトが当たるよう明示 */
span.gs-nav__link { cursor: default; }

/* メガメニュー */
.gs-nav__menu {
  background: #fff;
  border: 1px solid var(--pw-line);
  border-top: 3px solid var(--pw-orange);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px -18px rgba(20,24,33,.25);
}
.gs-nav__menu-title { color: var(--pw-orange-deep); }
.gs-nav__menu-grid a { color: var(--pw-ink-dim); border-radius: 8px; }
.gs-nav__menu-grid a:hover {
  color: var(--pw-orange-deep);
  background: var(--pw-orange-soft);
}
.gs-nav__count { color: var(--pw-ink-mute); }

/* 検索 */
.gs-header-search {
  background: var(--pw-bg-soft);
  border: 1px solid var(--pw-line);
  border-radius: 999px;
}
.gs-header-search:focus-within {
  border-color: var(--pw-orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.gs-header-search button,
.gs-header-search [type="submit"] {
  background: var(--pw-orange);
  color: #fff;
  border-radius: 999px;
}
.gs-header-search button:hover,
.gs-header-search [type="submit"]:hover { background: var(--pw-orange-deep); }

/* --- サイドバー（カテゴリツリー・検索箱） --- */
.gs-search, .gs-ctree__root {
  background: #fff;
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow);
}
.gs-ctree__root-sum {
  border-color: var(--pw-line);
  background: linear-gradient(90deg, var(--pw-orange-soft), #fff 74%);
}
.gs-ctree__root-sum:hover { background: linear-gradient(90deg, #ffe9d9, #fff 78%); }
.gs-ctree__icon { color: var(--pw-orange); }

/* 【バグ修正】リーフ項目の右寄せ:
   .gs-ctree__link は grid(1fr auto) で ::before の「▸」が1列目(1fr)を
   占有し、名前が2列目(右端)へ押し出されていた。flex化して解消 */
.gs-ctree__link {
  display: flex !important;
  align-items: center;
  gap: 7px;
}
.gs-ctree__link::before { color: var(--pw-orange); flex: none; }
.gs-ctree__link .gs-ctree__link-name { flex: 1 1 auto; text-align: left; }

/* --- フッター: 常に黒帯（モバイル含む） --- */
.gs-footer {
  background: #16181d !important;
  color: #d7dbe3 !important;
  border: 0;
}
.gs-footer__logo { color: #fff; }
.gs-footer__h { color: var(--pw-yellow); }
.gs-footer__sub, .gs-footer__text, .gs-footer__link,
.gs-footer__bottom, .gs-footer__bottom a { color: #a7adba; }
.gs-footer__link:hover, .gs-footer__bottom a:hover { color: #fff; }
.gs-footer__bottom { border-color: rgba(255,255,255,.14); }

/* --- ページネーション --- */
.gs-pager { color: var(--pw-ink-dim); }
.gs-pager a, .gs-pager span { border-radius: 10px; }
.gs-pager .is-active,
.gs-pager [aria-current],
.gs-pager .current {
  background: var(--pw-orange) !important;
  border-color: var(--pw-orange) !important;
  color: #fff !important;
}
.gs-pager a:hover {
  border-color: var(--pw-orange);
  color: var(--pw-orange-deep);
  background: var(--pw-orange-soft);
}
.gs-pager__bar, .gs-pager [data-progress] { background: var(--pw-line); }
.gs-pager__bar > span, .gs-pager [data-progress] > span { background: var(--pw-orange); }

/* --- ハンバーガー / ドロワー（モバイル） --- */
#gs-floating-hamburger {
  background: var(--pw-orange);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(249,115,22,.5);
}
#gs-hamburger-drawer { background: #fff; color: var(--pw-ink); }
#gs-hamburger-drawer a { color: var(--pw-ink-dim); }
#gs-hamburger-drawer a:hover { color: var(--pw-orange-deep); background: var(--pw-orange-soft); }

/* ============================================================
   ③ 一覧・カード・フィルタバー
   gamestreet-light.css 末尾の「Revenue-oriented catalogue v2」節を
   後勝ちで上書きし、密度を回復する。
   ============================================================ */

/* --- フィルタバー: 白地・высさ圧縮・オレンジ --- */
.gs-filterbar {
  background: #fff;
  border-bottom: 1px solid var(--pw-line);
  box-shadow: 0 1px 0 rgba(20,24,33,.03);
}
.gs-filterbar .gs-sort-tab.is-active,
.gs-filterbar .gs-view__btn.is-active {
  background: var(--pw-orange) !important;
  border-color: var(--pw-orange) !important;
  color: #fff !important;
}
.gs-filterbar .gs-sort-tab:hover,
.gs-filterbar .gs-view__btn:hover {
  border-color: var(--pw-orange);
  color: var(--pw-orange-deep);
}
.gs-apply {
  background: var(--pw-orange) !important;
  border-color: var(--pw-orange) !important;
  color: #fff !important;
  border-radius: 10px;
  box-shadow: 0 6px 16px -6px rgba(249,115,22,.45);
}
.gs-apply:hover { background: var(--pw-orange-deep) !important; }
.gs-filterbar input[type="range"] { accent-color: var(--pw-orange); }
.gs-release, .gs-price { color: var(--pw-ink-dim); }

/* --- カード一覧: 密度回復（デスクトップ） --- */
body.gs-page-front .gs-cards,
body.gs-page-archive .gs-cards { gap: 18px; }

body.gs-page-front .gs-card,
body.gs-page-archive .gs-card {
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
  background: #fff;
  box-shadow: var(--pw-shadow);
}
body.gs-page-front .gs-card:hover,
body.gs-page-archive .gs-card:hover {
  border-color: #f3c9a8;
  box-shadow: var(--pw-shadow-hover);
}

/* 画像列は約30%・本文が高さを決める。画像は絶対配置の cover で追従 */
body.gs-page-front .gs-card__inner,
body.gs-page-archive .gs-card__inner {
  grid-template-columns: minmax(230px, 30%) minmax(0, 1fr);
}
body.gs-page-front .gs-card__visual,
body.gs-page-archive .gs-card__visual {
  position: relative;
  height: 100%;
  min-height: 172px;      /* 本文が極端に短い場合の下限だけ確保 */
  aspect-ratio: auto;
  overflow: hidden;
  border-right: 1px solid var(--pw-line);
  background: #eef1f5;
}
body.gs-page-front .gs-card__visual .gs-card__media,
body.gs-page-archive .gs-card__visual .gs-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 縦580px問題・ロゴ見切れの根治 */
}

/* 見出し: 黄下線は記憶色 #ffc801 を3pxに */
.gs-card__headline {
  padding: 13px 18px 12px;
  border-bottom: 3px solid var(--pw-yellow);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.45;
  background: #fff;
}
.gs-card__headline-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px 1px 7px;
  margin-right: .5em;
  border-radius: 999px;
  background: var(--pw-orange-soft);
  color: #b45309;
  font-size: .82em;
  vertical-align: 2px;
}
/* 王冠バッジ（transform.py が 1〜3位の span に gs-rank--N を付与） */
.gs-rank--1, .gs-rank--2, .gs-rank--3 { position: relative; }
.gs-rank--1::before, .gs-rank--2::before, .gs-rank--3::before {
  content: '';
  width: 15px; height: 15px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-1.6 10H4.6L3 8zm1.6 12h14.8v2H4.6v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-1.6 10H4.6L3 8zm1.6 12h14.8v2H4.6v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gs-rank--1 { background: #fff7dc; color: #b8860b; }
.gs-rank--2 { background: #f1f3f7; color: #6b7280; }
.gs-rank--3 { background: #f9ede4; color: #a05a2c; }

/* 本文: 3行クランプで縦を制御 */
body.gs-page-front .gs-card__body,
body.gs-page-archive .gs-card__body { padding: 14px 18px 13px; }
body.gs-page-front .gs-card__jp,
body.gs-page-archive .gs-card__jp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  color: #3b4352;
}

/* 統計: 無料=緑 / 同接=青 / レビュー=灰 に整理 */
body.gs-page-front .gs-stats,
body.gs-page-archive .gs-stats {
  padding: 7px 0;
  border-top: 1px solid var(--pw-line);
  border-bottom: 1px solid var(--pw-line);
}
.gs-stat__label { color: var(--pw-ink-mute); }
.gs-stat__value.is-free { color: var(--pw-green) !important; }
.gs-stat__value.is-cyan { color: var(--pw-blue) !important; }
.gs-stat__value.is-neon { color: var(--pw-ink-dim) !important; }

.gs-card__foot { color: var(--pw-ink-mute); margin-top: 6px; padding-top: 4px; }

/* スコアバッジ: カード外への食み出し(bottom:-16px)をやめて内側へ */
.gs-card__score {
  bottom: 10px !important;
  right: 10px !important;
  border-radius: 9px;
  background: rgba(18,22,30,.86);
}

/* ジャンル色システム */
.gs-genre-chip {
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: var(--pw-orange);
  border: 0;
}
.gs-card[data-genre="FPS"] .gs-genre-chip,
.gs-card[data-genre="TPS"] .gs-genre-chip,
.gs-card[data-genre="シューティング"] .gs-genre-chip { background: var(--pw-blue); }
.gs-card[data-genre="MMORPG"] .gs-genre-chip,
.gs-card[data-genre="RPG"] .gs-genre-chip,
.gs-card[data-genre="アクションRPG"] .gs-genre-chip { background: var(--pw-red); }
.gs-card[data-genre="アクション"] .gs-genre-chip,
.gs-card[data-genre="アクションゲーム"] .gs-genre-chip { background: #8b5cf6; }
.gs-card[data-genre="シミュレーション"] .gs-genre-chip,
.gs-card[data-genre="ストラテジー"] .gs-genre-chip,
.gs-card[data-genre="経営シム"] .gs-genre-chip { background: #0d9488; }
.gs-card[data-genre="カードゲーム"] .gs-genre-chip { background: var(--pw-gold); }
.gs-card[data-genre="ギャルゲー"] .gs-genre-chip { background: #ec4899; }
.gs-card[data-genre="サバイバル"] .gs-genre-chip,
.gs-card[data-genre="ホラー"] .gs-genre-chip,
.gs-card[data-genre="ゾンビ"] .gs-genre-chip { background: #57534e; }

/* CTA: 深紅 → オレンジ */
.gs-card__cta {
  min-width: 168px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--pw-orange);
  box-shadow: 0 7px 18px -6px rgba(249,115,22,.5);
  transition: background .15s ease, transform .15s ease;
}
.gs-card:hover .gs-card__cta {
  background: var(--pw-orange-deep);
  transform: translateY(-1px);
}
.gs-card__actions { margin-top: 11px; }

/* 一覧内の広告枠 */
.gs-ad {
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
  background: #fff;
}
/* in-feed 4枠は非表示のまま維持する。
   理由: gamestreet.js の並び替えがカードだけを container 末尾へ append
   し直すため、DOM上のフィード広告が毎回先頭に固まって表示される
   （初期表示で広告2連発になる）。iframe化した広告ノードを動かすと
   広告が消えるため、JS改修なしに表示へ戻せない。従来と同じ扱い */
.gs-ad--catalog-feed { display: none; }

/* 未充填広告はGoogle公式の作法で折り畳む（空の巨大白枠対策）。
   充填済み広告には一切影響しない */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.gs-ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }

/* アーカイブヒーロー */
.gs-ahdr {
  background: #fff;
  border-bottom: 1px solid var(--pw-line);
}
.gs-ahdr__title {
  color: var(--pw-ink);
  border-left: 6px solid var(--pw-orange);
  padding-left: 14px;
}
.gs-ahdr__desc { color: var(--pw-ink-dim); }
.gs-ahdr .mono { color: var(--pw-ink-mute); }

/* SEO全記事索引 */
.gs-complete-index {
  background: #fff;
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
}
.gs-complete-index__list { columns: 2; column-gap: 28px; }
.gs-complete-index__list a { color: var(--pw-ink-dim); }
.gs-complete-index__list a:hover { color: var(--pw-orange-deep); }

/* リスト表示モード（.gs-row）の白地化 */
.gs-row { background: #fff; }
.gs-row__title { color: var(--pw-ink); }
.gs-row__jp { color: var(--pw-ink-dim); }

/* --- 中間幅 --- */
@media (max-width: 980px) and (min-width: 681px) {
  body.gs-page-front .gs-card__inner,
  body.gs-page-archive .gs-card__inner {
    grid-template-columns: minmax(200px, 36%) minmax(0, 1fr);
  }
  body.gs-page-front .gs-card__visual,
  body.gs-page-archive .gs-card__visual { min-height: 150px; }
  body.gs-page-front .gs-card__body,
  body.gs-page-archive .gs-card__body { padding: 12px 15px 12px; }
}

/* --- モバイル(≤680px): 全幅縦積み → メディアオブジェクト型 --- */
@media (max-width: 680px) {
  body.gs-page-front .gs-cards,
  body.gs-page-archive .gs-cards { gap: 14px; }

  body.gs-page-front .gs-card__inner,
  body.gs-page-archive .gs-card__inner {
    grid-template-columns: 38% minmax(0, 1fr);
    grid-template-areas:
      "headline headline"
      "visual body";
  }
  /* 見出し: rank ピルを左に固定し、テキスト側だけを2行クランプする
     （親に -webkit-box を当てると子 span が縦積みになり崩れるため） */
  .gs-card__headline {
    padding: 10px 13px 9px;
    border-bottom-width: 3px;
    font-size: 15px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    max-height: none;
  }
  .gs-card__headline-rank {
    flex: none;
    margin: 1px 0 0;
    vertical-align: 0;
    font-size: .78em;
    padding: 0 8px;
  }
  .gs-card__headline > span:not(.gs-card__headline-rank) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-width: 0;
  }
  body.gs-page-front .gs-card__visual,
  body.gs-page-archive .gs-card__visual {
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
    border-right: 1px solid var(--pw-line);
    border-bottom: 0;
  }
  body.gs-page-front .gs-card__body,
  body.gs-page-archive .gs-card__body { padding: 10px 12px 10px; }
  body.gs-page-front .gs-card__jp,
  body.gs-page-archive .gs-card__jp {
    -webkit-line-clamp: 2;
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.6;
  }
  body.gs-page-front .gs-stats,
  body.gs-page-archive .gs-stats { padding: 5px 0; gap: 10px; }
  .gs-stat__label { font-size: 9px; }
  .gs-card__foot { display: none; }  /* 日付・読了はモバイル一覧では畳む */
  .gs-card__actions { margin-top: 8px; }
  .gs-card__cta {
    width: auto;
    min-width: 0;
    padding: 7px 14px;
    font-size: 12.5px;
  }
  .gs-card__score { transform: scale(.85); transform-origin: bottom right; }
}

/* ============================================================
   ④ 記事ページ
   article.css は !important が多いので、同じ
   `html body.gs-page-article …` 形で後勝ちさせる。
   ============================================================ */

/* --- パンくず --- */
.gs-crumb { color: var(--pw-ink-mute); background: transparent; }
.gs-crumb a { color: var(--pw-ink-mute); }
.gs-crumb a:hover { color: var(--pw-orange-deep); }

/* --- ヒーロー: 暗背景+演出 → 白雑誌の扉 --- */
.gs-ahero {
  background: #fff !important;
  border-bottom: 1px solid var(--pw-line);
}
.gs-ahero__bg {
  filter: saturate(1.02) contrast(1) brightness(1) !important;
  opacity: 1;
}
.gs-ahero__fade {
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.42) 100%),
    linear-gradient(0deg, rgba(255,255,255,.9), transparent 55%) !important;
}
.gs-ahero__scan, .gs-ahero__glow, .gs-ahero__stroke { display: none !important; }
.gs-glitch::before, .gs-glitch::after { display: none !important; }

.gs-ahero__title { color: var(--pw-ink) !important; text-shadow: none !important; }
.gs-ahero__subtitle { color: var(--pw-ink-dim) !important; }
.gs-ahero__eyebrow { color: var(--pw-orange-deep) !important; }
.gs-ahero__topmeta, .gs-ahero__topmeta a { color: var(--pw-ink-mute) !important; }
.gs-ahero__issue {
  background: var(--pw-orange) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 3px 12px;
}
.gs-ahero__cat, .gs-ahero__date { color: var(--pw-ink-mute) !important; }
.gs-ahero__meta { border-color: var(--pw-line) !important; }
.gs-ahero__metaitem {
  border-color: var(--pw-line) !important;
  background: rgba(255,255,255,.82) !important;
  border-radius: 10px;
}
.gs-ahero__metakey { color: var(--pw-ink-mute) !important; }
.gs-ahero__metaval { color: var(--pw-ink) !important; }

/* --- TLDR（要点） --- */
.gs-tldr {
  background: #fff;
  border: 1px solid var(--pw-line);
  border-top: 3px solid var(--pw-orange);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow);
}
.gs-tldr__label, .gs-tldr__title { color: var(--pw-orange-deep); }
.gs-tldr__item { color: var(--pw-ink-dim); border-color: var(--pw-line); background: var(--pw-bg-soft); }

/* --- 目次 --- */
.gs-toc {
  background: #fff;
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow);
}
.gs-toc__item { color: var(--pw-ink-dim); }
.gs-toc__item:hover { color: var(--pw-orange-deep); background: var(--pw-orange-soft); }
.gs-toc__item.is-active {
  color: var(--pw-orange-deep);
  border-left-color: var(--pw-orange) !important;
  background: var(--pw-orange-soft);
}
.gs-toc__num { color: var(--pw-ink-mute); }
[data-toc-progress] { background: var(--pw-orange) !important; }

/* --- 見出し: h2=白地+オレンジ縦帯+黄下線 / h3=オレンジ淡地帯 --- */
html body.gs-page-article .gs-article-body h2 {
  margin: 46px 0 22px !important;
  padding: 12px 18px 12px 20px !important;
  color: var(--pw-ink) !important;
  border: 0 !important;
  border-left: 6px solid var(--pw-orange) !important;
  border-bottom: 3px solid var(--pw-yellow) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}
html body.gs-page-article .gs-article-body h3 {
  margin: 34px 0 16px !important;
  padding: 9px 16px !important;
  color: var(--pw-ink) !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-orange) !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--pw-orange-soft) !important;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
  font-weight: 700 !important;
}
html body.gs-page-article .gs-article-body h4 {
  color: var(--pw-ink) !important;
  border-bottom: 2px solid var(--pw-line-2) !important;
}

/* --- 本文の読みやすさ --- */
html body.gs-page-article .gs-article-body p {
  margin: 0 0 1.05em !important;
  line-height: 1.85 !important;
  color: var(--pw-ink);
}
html body.gs-page-article .gs-article-body { font-size: 16px; }

/* 黄マーカーの鎮静化（下半分だけ薄黄に統一） */
.post_content span[style*="#ffff99"],
.post_content span[style*="#fff3b0"],
.post_content span[style*="#fff9c4"],
.post_content b[style*="#ffff99"],
.post_content strong[style*="#ffff99"] {
  background: linear-gradient(transparent 62%, #ffedb0 62%) !important;
  color: inherit !important;
  padding: 0 !important;
}
/* インライン赤字・橙字の鎮静化（太字+黒に寄せる） */
.post_content span[style*="color:#ff0000"],
.post_content span[style*="color: #ff0000"],
.post_content span[style*="color:#e74c3c"],
.post_content span[style*="color: #e74c3c"],
.post_content span[style*="color:#ff6600"],
.post_content span[style*="color: #ff6600"],
.post_content strong[style*="color:#ff0000"],
.post_content strong[style*="color: #ff0000"],
.post_content b[style*="color:#ff0000"],
.post_content b[style*="color: #ff0000"] {
  color: var(--pw-ink) !important;
  font-weight: 700;
}

/* 画像・動画の整形 */
html body.gs-page-article .gs-article-body img.aligncenter,
html body.gs-page-article .gs-article-body img.size-large {
  display: block;
  margin: 22px auto !important;
  border-radius: 10px;
  box-shadow: var(--pw-shadow);
  max-width: 100%;
  height: auto;
}
html body.gs-page-article .gs-article-body img.alignleft {
  max-width: 300px;
  border-radius: 10px;
  margin: 4px 20px 12px 0 !important;
}
@media (max-width: 680px) {
  html body.gs-page-article .gs-article-body img.alignleft {
    float: none !important;
    display: block;
    max-width: 100%;
    margin: 16px auto !important;
  }
}
.video-container, .gs-ytwrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--pw-shadow);
  margin: 22px 0 28px;
  background: #0d0f14;
}

/* 広告枠: 空のとき巨大空白にならないよう抑制（ins/pushは不変） */
.gs-ad--article-top, .gs-ad--article-bottom {
  min-height: 0 !important;
  background: var(--pw-bg-soft);
  border: 1px dashed var(--pw-line-2);
}
.post_content .code-block {
  margin: 22px 0 !important;
  min-height: 0 !important;
}

/* 関連記事 */
.gs-related-section h2 { color: var(--pw-ink); }
.gs-related__card {
  background: #fff;
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius-sm);
  box-shadow: var(--pw-shadow);
}
.gs-related__card:hover {
  border-color: #f3c9a8;
  box-shadow: var(--pw-shadow-hover);
}
.gs-related__body { color: var(--pw-ink-dim); }
.gs-related__thumb img { object-fit: cover; }

/* タクソノミータグ */
.pcog-taxonomies .pcog-tag {
  display: inline-flex;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--pw-orange-soft);
  color: #b45309;
  border: 1px solid #fbd8bb;
  font-weight: 600;
}
.pcog-taxonomies .pcog-tag:hover { background: #ffe4cd; color: var(--pw-orange-deep); }

/* ============================================================
   ⑤ ダーク残骸の白地化（クラス層の一括上書き）
   主犯: swell-child/style.css がダーク部品集のまま。
   （インライン層28記事104箇所は transform.py が置換する）
   ============================================================ */

/* --- 表 --- */
.post_content table {
  background: #fff !important;
  border: 1px solid var(--pw-line-2) !important;
  border-radius: 10px;
  overflow: hidden;
}
.post_content table th {
  background: #f2f4f8 !important;
  color: var(--pw-ink) !important;
  border-bottom: 1px solid var(--pw-line-2) !important;
  border-right: 1px solid var(--pw-line) !important;
}
.post_content table td {
  color: var(--pw-ink-dim) !important;
  border-bottom: 1px solid var(--pw-line) !important;
}
.post_content table tbody tr:nth-child(even),
.post_content table tbody tr:nth-child(even) th { background: var(--pw-bg-soft) !important; }
.post_content table tbody tr:hover,
.post_content table tbody tr:hover th { background: var(--pw-orange-soft) !important; }
.post_content table thead tr,
.post_content table thead th {
  background: #f2f4f8 !important;
  color: var(--pw-ink) !important;
  border-bottom: 2px solid var(--pw-line-2) !important;
}
.post_content table a { color: var(--pw-blue) !important; }
.post_content table a:hover { color: var(--pw-orange-deep) !important; }
.post_content table[style] {
  background: #fff !important;
  border-color: var(--pw-line-2) !important;
}
.post_content table tr[style], .post_content table td[style], .post_content table th[style] {
  background: inherit !important;
  color: inherit !important;
}

/* --- 引用 --- */
.post_content blockquote,
.post_content blockquote[style] {
  background: var(--pw-bg-soft) !important;
  border-left: 4px solid var(--pw-line-2) !important;
  color: var(--pw-ink-dim) !important;
  border-radius: 0 10px 10px 0;
}

/* --- 箱系部品 --- */
.post_content .gs-box {
  background: #fff !important;
  border: 1px solid var(--pw-line-2) !important;
  border-radius: 12px !important;
  color: var(--pw-ink-dim) !important;
  box-shadow: none !important;
}
.post_content .gs-box p { color: var(--pw-ink-dim) !important; }
.post_content .gs-box-title {
  color: var(--pw-ink) !important;
  font-weight: 800 !important;
  border-bottom: 2px solid var(--pw-yellow) !important;
  padding-bottom: 6px !important;
  background: none !important;
}
.post_content .gs-box-quote {
  background: var(--pw-bg-soft) !important;
  border-left: 4px solid var(--pw-line-2) !important;
  color: var(--pw-ink-dim) !important;
}
.post_content .gs-cta-box {
  background: var(--pw-orange-soft) !important;
  border: 1px solid #fbd8bb !important;
  border-radius: 12px !important;
  color: var(--pw-ink) !important;
}
.post_content .gs-cta-box a { color: var(--pw-orange-deep) !important; }

/* --- コールアウト（info/success/warning/danger/neutral） --- */
.post_content .gs-callout-info,
.post_content div[style*="border-left:4px solid #2196f3"],
.post_content div[style*="border-left: 4px solid #2196f3"] {
  background: #eff4ff !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-blue) !important;
  color: #1e3a5f !important;
  border-radius: 0 10px 10px 0 !important;
}
.post_content .gs-callout-success,
.post_content div[style*="border-left:4px solid #4caf50"],
.post_content div[style*="border-left: 4px solid #4caf50"] {
  background: #f0f7f0 !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-green) !important;
  color: #1d4a2a !important;
  border-radius: 0 10px 10px 0 !important;
}
.post_content .gs-callout-warning,
.post_content div[style*="border-left:4px solid #ff9800"],
.post_content div[style*="border-left: 4px solid #ff9800"] {
  background: var(--pw-orange-soft) !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-orange) !important;
  color: #7c3d0e !important;
  border-radius: 0 10px 10px 0 !important;
}
.post_content .gs-callout-danger,
.post_content div[style*="border-left:4px solid #d94a4a"],
.post_content div[style*="border-left: 4px solid #d94a4a"] {
  background: #fdf2f2 !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-red) !important;
  color: #7c1f2b !important;
  border-radius: 0 10px 10px 0 !important;
}
.post_content .gs-callout-neutral {
  background: var(--pw-bg-soft) !important;
  border: 0 !important;
  border-left: 4px solid var(--pw-line-2) !important;
  color: var(--pw-ink-dim) !important;
  border-radius: 0 10px 10px 0 !important;
}
.post_content .gs-callout-info *,
.post_content .gs-callout-success *,
.post_content .gs-callout-warning *,
.post_content .gs-callout-danger *,
.post_content .gs-callout-neutral * { color: inherit !important; }
.post_content .gs-callout-info a,
.post_content .gs-callout-success a,
.post_content .gs-callout-warning a,
.post_content .gs-callout-danger a { color: var(--pw-blue) !important; text-decoration: underline; }

/* --- SWELLブロック（FAQ・全幅） --- */
.swell-block-faq__q, .swell-block-faq__a {
  background: #fff !important;
  color: var(--pw-ink-dim) !important;
  border-color: var(--pw-line) !important;
}
.swell-block-faq__q { color: var(--pw-ink) !important; font-weight: 700 !important; }
.swell-block-fullWide { background: var(--pw-bg-soft) !important; color: var(--pw-ink) !important; }

/* --- 文字色ユーティリティの再マップ --- */
.post_content .gs-accent { color: var(--pw-orange-deep) !important; }
.post_content .gs-accent-blue { color: var(--pw-blue) !important; }
.post_content .gs-accent-green { color: var(--pw-green) !important; }
.post_content .gs-accent-red { color: var(--pw-red) !important; }
.post_content .gs-text-muted { color: var(--pw-ink-mute) !important; }
.post_content .gs-caption { color: var(--pw-ink-mute) !important; }
.post_content .gs-separator { border-color: var(--pw-line-2) !important; background: none !important; }

/* --- フォーム（お問い合わせ） --- */
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"],
.wpcf7-form input[type="url"], .wpcf7-form input[type="tel"],
.wpcf7-form textarea, .wpcf7-form select {
  background: #fff !important;
  color: var(--pw-ink) !important;
  border: 1px solid var(--pw-line-2) !important;
  border-radius: 8px !important;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
  border-color: var(--pw-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important;
  outline: none;
}
.wpcf7-form input[type="submit"], .wpcf7-form button[type="submit"] {
  background: var(--pw-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
}

/* --- SWELL残置モーダル --- */
.p-indexModal, .p-indexModal__inner {
  background: #fff !important;
  color: var(--pw-ink) !important;
}

/* Steam紺ボタン a[style*="background:#1b2838"] はブランド色として維持（触らない） */