/*
Theme Name: r-steam-eroge-child
Template: steam-base-theme
Description: エロゲー特化子テーマ（18禁Steam セールウォッチ）
*/
:root{
  /* --- ブランド色（落ち着いたヴァイオレット系） --- */
  --bg-base:       #140f1a;
  --bg-surface:    #1c1424;
  --bg-card:       #241a2e;
  --text-primary:  #f0eafb;
  --text-secondary:#c2a9d8;
  --text-muted:    #806f9a;
  --border:        #3a2a4a;
  --accent:        #a06bff;
  --accent-glow:   rgba(160,107,255,.35);
  --accent-deep:   #6d3fc0;
  --price:         #f0eafb;
  --sale:          #c89aff;
  --warn-bg:       #2a1f3a;
  --warn-text:     #c4a6f0;
  --info-bg:       #221430;
  --info-text:     #bb8fe8;
  --band-bg:       #1c1424;
  --band-text:     #c2a9d8;
}

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

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