/* home-core.css ＝ HOMEタブのスタイル（正本）。views/streamer.html は薄殻（#ovCatHome に描画）。
   ★トンマナ変更はこの :root 変数の書き換えだけで済むようにする（下の実スタイルは変数参照のみ）。
   初期値は既存アプリUI（streamer.html）の配色に合わせてある。 */
.home-root{
  --home-bg:        #141417;   /* HOME全体の背景（透明寄り・カード外） */
  --home-card:      #1a1a1e;   /* カード背景（.ovcat-item と同色） */
  --home-card-hover:#172040;   /* カードhover/選択の青系（.ovcat-item.active と同色） */
  --home-border:    #2a2a2e;   /* 枠線 */
  --home-accent:    #2563eb;   /* アクセント青（既存ボタン色） */
  --home-accent-ink:#cfe0ff;   /* アクセント上の文字 */
  --home-text:      #f0f0f0;   /* 主要文字 */
  --home-sub:       #cfcfcf;   /* 補助文字 */
  --home-muted:     #888888;   /* 弱い文字 */
  --home-radius:    12px;      /* 角丸（大） */
  --home-radius-sm: 8px;       /* 角丸（小） */
  --home-gap:       16px;      /* カード間の間隔 */
  --home-pad:       20px;      /* カード内余白 */
}

.home-root{color:var(--home-text);font-size:13px;line-height:1.7}

/* ① 見出し */
.home-hero{margin-bottom:24px}
.home-hero-title{font-size:22px;font-weight:700;color:var(--home-text);margin:0 0 6px}
.home-hero-lead{font-size:13px;color:var(--home-sub);margin:0}

/* 共通セクション見出し */
.home-section{margin-bottom:28px}
.home-section-title{font-size:15px;font-weight:700;color:var(--home-text);margin:0 0 12px}

/* 横並び3カード（共通グリッド：狭幅で自動的に縦積み） */
.home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--home-gap)}
@media (max-width:820px){ .home-cards{grid-template-columns:1fr} }

/* ② 配信スタイルカード */
.home-style-card{
  background:var(--home-card);border:1px solid var(--home-border);
  border-radius:var(--home-radius);padding:var(--home-pad);
  cursor:pointer;text-align:center;transition:border-color .12s,background .12s;
}
.home-style-card:hover{border-color:var(--home-accent);background:var(--home-card-hover)}
.home-style-icon{font-size:34px;line-height:0;margin-bottom:10px;color:var(--home-accent)}
.home-style-icon svg{width:34px;height:34px;display:inline-block;vertical-align:middle}
.home-style-name{font-size:15px;font-weight:700;color:var(--home-text);margin-bottom:4px}
.home-style-desc{font-size:12px;color:var(--home-sub)}

/* 準備中（スマホ）：点線ボーダーで区別 */
.home-style-card.is-soon{border-style:dashed;border-color:var(--home-muted);cursor:pointer}
.home-style-card.is-soon:hover{border-color:var(--home-sub);background:var(--home-card)}
.home-style-card.is-soon .home-style-name,
.home-style-card.is-soon .home-style-icon{color:var(--home-muted)}
.home-style-badge{
  display:inline-block;margin-top:8px;font-size:11px;color:var(--home-muted);
  border:1px solid var(--home-border);border-radius:999px;padding:2px 10px;
}
/* スマホカードをクリックした時に出る「準備中」インライン案内（自己完結・外部依存なし） */
.home-soon-note{
  grid-column:1 / -1;display:none;
  background:var(--home-card);border:1px dashed var(--home-muted);
  border-radius:var(--home-radius-sm);padding:14px 16px;
  font-size:12.5px;color:var(--home-sub);line-height:1.8;
}
.home-soon-note.is-open{display:block}
.home-soon-note a{color:var(--home-accent-ink)}

/* ③ 3ステップガイド */
.home-step-card{
  background:var(--home-card);border:1px solid var(--home-border);
  border-radius:var(--home-radius);padding:var(--home-pad);
}
.home-step-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;
  background:var(--home-accent);color:#fff;font-size:13px;font-weight:700;margin-bottom:10px;
}
.home-step-title{font-size:14px;font-weight:700;color:var(--home-text);margin-bottom:4px}
.home-step-desc{font-size:12px;color:var(--home-sub)}

/* ④ 下部バナー */
.home-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--home-card-hover);border:1px solid var(--home-accent);
  border-radius:var(--home-radius);padding:18px var(--home-pad);
}
.home-banner-text{min-width:0}
.home-banner-title{font-size:15px;font-weight:700;color:var(--home-text);margin-bottom:2px}
.home-banner-desc{font-size:12px;color:var(--home-sub)}
.home-banner-btn{
  flex-shrink:0;background:var(--home-accent);color:#fff;border:none;
  border-radius:var(--home-radius-sm);padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;
}
.home-banner-btn:hover{filter:brightness(1.1)}