/*
Theme Name: r-steam-adult-child
Template: steam-base-theme
Description: アダルトSteam 価格ナビ / 成人向け全般・人気作の価格追跡（ピンク系）。R18・要 steam-age-gate プラグイン併用。
*/
:root{
  /* --- ブランド色（柔らか・ポップなピンク系） --- */
  --bg-base:       #1a0f16;
  --bg-surface:    #241420;
  --bg-card:       #2e1a28;
  --text-primary:  #fbeaf2;
  --text-secondary:#d8a9c2;
  --text-muted:    #9a6f86;
  --border:        #4a2a3c;
  --accent:        #ff6fae;
  --accent-glow:   #ff9ac8;
  --accent-deep:   #c24685;
  --price:         #fbeaf2;
  --sale:          #ff9ac8;
  --warn-bg:       #3a1f2a;
  --warn-text:     #f0a6c4;
  --info-bg:       #2a1422;
  --info-text:     #e88fbb;
  --band-bg:       #241420;
  --band-text:     #d8a9c2;
}

/* === 作品ページ 2カラムレイアウト（single-game.php 上書き版用） === */
.ra-cols{
  display:grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.ra-col-side{
  position:sticky;
  top:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* 右カラムのセクション見出しの帯を詰める（サイド幅向け） */
.ra-col-side .sb-section{ margin-top:0; }
/* モバイルは1カラムに折り返し（価格を上に） */
@media (max-width: 768px){
  .ra-cols{ grid-template-columns: 1fr; }
  .ra-col-side{ position:static; }
}

/* === トップページ ヒーロー＋密グリッド（front-page.php 上書き版用） === */
.ra-hero{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius, 12px);
  padding:32px 28px;
  margin-bottom:24px;
}
.ra-hero__title{
  font-size:26px;
  font-weight:700;
  margin:0 0 12px;
  color:var(--accent-glow);
  line-height:1.4;
}
.ra-hero__lead{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.8;
  margin:0 0 20px;
}
.ra-hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.ra-stat{
  flex:1;
  min-width:90px;
  background:var(--bg-surface);
  border-radius:var(--radius, 12px);
  padding:12px 16px;
  text-align:center;
}
.ra-stat__label{
  display:block;
  font-size:11px;
  color:var(--text-muted);
  margin-bottom:4px;
}
.ra-stat__value{
  display:block;
  font-size:22px;
  font-weight:700;
  color:var(--text-primary);
}
/* グリッドを密に（親 sb-grid より1枚あたりを小さく＝多列） */
.ra-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
@media (max-width: 768px){
  .ra-hero{ padding:24px 20px; }
  .ra-hero__title{ font-size:21px; }
  .ra-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}