/*
Theme Name: Steam Base Theme
Description: ジャンル特化型 Steam セール追跡サイト網の共通親テーマ。中立な骨格のみ提供し、デザインは子テーマで上書きする。プレーンCSS（ビルド不要）。
Author: steam-hub project
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.2
Text Domain: steam-base
*/

/* === デザイントークン（中立デフォルト。ブランド色は子テーマで上書き）===
   親は無彩色のみ。アクセント/ブランド色を持たない。
   例外: 評価の意味色（緑/黄/赤）は全サイト共通なので親が持つ。 */
:root {
  --bg-base:        #0e0f12;
  --bg-surface:     #16181d;
  --bg-card:        #1b1e24;
  --text-primary:   #e9eaec;
  --text-secondary: #aeb2b8;
  --text-muted:     #6f747c;
  --border:         rgba(255,255,255,.10);
  --accent:         #8a8f98;   /* 中立グレー。ブランド色は子テーマで上書き */
  --accent-glow:    #aab0b8;
  --accent-deep:    #5f656d;
  --price:          #e9eaec;   /* 中立（text-primary 相当）*/
  --sale:           #4a9c6d;   /* 割引率の緑（意味色）*/
  --warn-bg:        rgba(255,255,255,.08);   /* 中立な半透明 */
  --warn-text:      #aab0b8;                 /* 中立な明るめグレー */
  --info-bg:        rgba(120,160,220,.12);   /* セールバッジ＝青系の意味色として残す */
  --info-text:      #8fb4e6;
  --cta-text:       #fff;      /* CTA文字色（白は中立。子で上書き可）*/

  /* 評価の意味色（全サイト共通・意味色）*/
  --rating-positive: #7fd86a;  /* 好評＝緑 */
  --rating-mixed:    #e8c34a;  /* 賛否両論＝黄 */
  --rating-negative: #e2645a;  /* 不評＝赤 */

  /* 見出し帯（色は中立トークン参照。具体色を持たない）*/
  --band-bg:        var(--bg-card);
  --band-text:      var(--text-primary);

  --radius:         10px;
  --maxw:           880px;
  --font: system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --serif: "Times New Roman","Hiragino Mincho ProN",serif;
}

/* === ベース === */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-base); color: var(--text-primary);
  font-family: var(--font); line-height: 1.7; font-size: 16px;
}
a { color: var(--accent-glow); text-decoration: none; }
a:hover { text-decoration: underline; }
/* UIリンク（ロゴ・カード）はホバー時も下線を出さない。本文中の通常リンクには影響しない。 */
.sb-brand, .sb-brand:hover, .sb-card, .sb-card:hover { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.sb-container { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.sb-section { margin: 2rem 0; }
.sb-h2 { font-size: 18px; font-weight: 500; margin: 0 0 .8rem; }
.sb-h2--band { display: inline-block; padding: 7px 16px; border-radius: 6px; background: var(--band-bg); color: var(--band-text); }

/* === ヘッダー / フッター === */
.sb-header { border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.sb-header__inner { max-width: var(--maxw); margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sb-brand__logo { font-family: var(--serif); font-size: 20px; letter-spacing: .04em; color: var(--accent-glow); }
.sb-brand__sub { display: block; font-size: 12px; color: var(--text-secondary); }
.sb-nav { display: flex; gap: 1rem; font-size: 14px; }
.sb-footer { border-top: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: 13px; }
.sb-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1rem; }

/* === パンくず === */
.sb-breadcrumb { font-size: 12px; color: var(--text-secondary); margin-bottom: 1rem; }

/* === 作品ヒーロー === */
.sb-hero__title { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0 0 4px; }
.sb-hero__meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.sb-hero__image { position: relative; overflow: hidden; width: 100%; background: var(--bg-surface); border-radius: var(--radius); margin-bottom: 1rem; }
.sb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(24px) brightness(0.6); transform: scale(1.1); z-index: 0; }
.sb-hero__fg { position: relative; z-index: 1; display: block; margin: 0 auto; max-width: 460px; width: 100%; height: auto; }
.sb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-tag { font-size: 12px; padding: 3px 10px; border-radius: var(--radius); background: var(--bg-card); color: var(--text-secondary); }

/* === 価格ボックス === */
.sb-price { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.25rem 0; }
.sb-price--lowest { border-color: var(--accent); }
.sb-price__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sb-price__now { font-size: 30px; font-weight: 500; }
.sb-price__orig { font-size: 14px; color: var(--text-muted); text-decoration: line-through; margin-left: 8px; }
.sb-price__off { font-size: 14px; color: var(--sale); font-weight: 500; margin-left: 6px; }
.sb-badge { font-size: 12px; padding: 3px 9px; border-radius: var(--radius); display: inline-block; }
.sb-badge--sale { background: var(--info-bg); color: var(--info-text); }
.sb-badge--lowest { background: var(--warn-bg); color: var(--warn-text); }
.sb-badge--normal { background: var(--bg-surface); color: var(--text-secondary); }
.sb-verdict { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-text); font-size: 13px; }
.sb-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.sb-stat { background: var(--bg-surface); border-radius: var(--radius); padding: .6rem .8rem; }
.sb-stat__label { font-size: 12px; color: var(--text-secondary); }
.sb-stat__value { font-size: 18px; font-weight: 500; }
.sb-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: var(--cta-text); font-weight: 500; white-space: nowrap; }
.sb-cta:hover { background: var(--accent-deep); text-decoration: none; }

/* === 価格推移グラフ === */
.sb-chart { width: 100%; height: auto; display: block; }
.sb-chart-wrap { margin: 1.5rem 0; }

/* === 評価帯 === */
.sb-rating { display: flex; flex-wrap: wrap; gap: 20px; padding: .9rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 1.5rem 0; }
.sb-rating__label { font-size: 12px; color: var(--text-secondary); }
.sb-rating__value { font-size: 15px; font-weight: 500; }

/* === ユーザー評価 === */
.sb-review-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: .8rem; }
.sb-review-score__desc { font-size: 20px; font-weight: 500; color: var(--text-primary); }
.sb-review-score__desc.is-positive { color: var(--rating-positive); }
.sb-review-score__desc.is-mixed    { color: var(--rating-mixed); }
.sb-review-score__desc.is-negative { color: var(--rating-negative); }
.sb-review-score__pct { font-size: 15px; font-weight: 500; }
.sb-review-score__count { font-size: 13px; color: var(--text-secondary); }
.sb-review-summary { background: var(--bg-card); border: 0.5px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; line-height: 1.8; color: var(--text-secondary); }
.sb-review-summary p { margin: 0 0 1rem; }
.sb-review-summary p:last-child { margin-bottom: 0; }

/* === トップ: 統計カード === */
.sb-stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 1.5rem 0; }
.sb-stat-card { background: var(--bg-surface); border-radius: var(--radius); padding: .9rem 1rem; }
.sb-stat-card__label { font-size: 13px; color: var(--text-secondary); }
.sb-stat-card__value { font-size: 24px; font-weight: 500; line-height: 1.2; margin-top: 2px; }

/* === トップ: フィルターチップ === */
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; }
.sb-chip { font: inherit; font-size: 14px; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 2px solid transparent; background: var(--bg-surface); color: var(--text-secondary); }
.sb-chip:hover { color: var(--text-primary); }
.sb-chip.is-active { border-color: var(--accent); color: var(--text-primary); }

/* === カード一覧 === */
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.sb-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sb-card__thumb { background: var(--bg-surface); aspect-ratio: 16/7; }
.sb-card__thumb img { width: 100%; height: auto; display: block; }
.sb-card__body { padding: .8rem 1rem; }
.sb-card__title { font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.sb-card__price { display: flex; align-items: baseline; gap: 8px; }
.sb-card__spark { margin: 8px 0 6px; }
.sb-spark { width: 100%; height: 34px; display: block; }
.sb-card__low { font-size: 12px; color: var(--text-secondary); }
.sb-card__low-now { color: var(--warn-text); margin-left: 2px; }

/* === 広告枠 === */
.sb-ad { border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.1rem; text-align: center; color: var(--text-muted); font-size: 12px; margin: 1.25rem 0; }

/* === サテライト / PR ラベル（色は中立トークン参照のみ）=== */
.sb-pr-label { display: inline-block; font-size: 10px; line-height: 1; padding: 2px 6px; border-radius: 4px; background: var(--bg-surface); color: var(--text-muted); letter-spacing: .08em; }
.sb-card--pr { position: relative; }
.sb-card--pr .sb-pr-label { position: absolute; top: 8px; right: 8px; z-index: 2; }
.sb-sat-below { display: flex; align-items: center; gap: 8px; margin: 1.25rem 0; font-size: 14px; color: var(--text-secondary); }

/* === 本文 === */
.sb-content p { margin: 0 0 1rem; }
.sb-content h2 { font-size: 18px; font-weight: 500; margin: 1.6rem 0 .6rem; }