/* =========================================================================
   THEME 02 — STREAMING HUB  (라이브 스트리밍 중심의 트렌디)
   #라이브 #커뮤니티 #트렌디 #팬소통
   같은 마크업에 다른 '레이아웃'을 입힌다 — 히어로를 2단으로 쪼개고
   라이브 레일을 드러낸다(테마가 색만 바꾸는 게 아님을 보여주는 예).
   ========================================================================= */
[data-theme="streaming-hub"]{
  --bg:#0b1020;
  --bg-2:#0e1430;
  --surface:#141b3a;
  --surface-2:#1b2350;
  --fg:#f5f7ff;
  --fg-muted:#a9b3d8;
  --fg-dim:#6b76a3;
  --accent:#5b8cff;
  --accent-2:#b98cff;
  --line:rgba(146,168,255,.14);
  --line-strong:rgba(146,168,255,.28);
  --live:#ff477e;

  --font-display:'Pretendard','Noto Sans KR',sans-serif;
  --tracking-wide:.24em;
  --radius:16px;
  --radius-lg:26px;

  --hero-image:
    radial-gradient(90% 80% at 82% 0%, rgba(91,140,255,.34), transparent 55%),
    radial-gradient(70% 70% at 8% 30%, rgba(185,140,255,.22), transparent 60%),
    linear-gradient(180deg,#0c1330 0%,#080c1e 100%);
  --hero-overlay:linear-gradient(180deg, rgba(8,12,30,.05) 0%, rgba(8,12,30,.35) 55%, var(--bg) 100%);
}
[data-theme="streaming-hub"] h1,
[data-theme="streaming-hub"] h2,
[data-theme="streaming-hub"] .brand{font-family:var(--font-display)}
[data-theme="streaming-hub"] .brand b{color:var(--accent-2)}

/* 히어로: 왼쪽 카피 + 오른쪽 라이브 레일 2단 */
[data-theme="streaming-hub"] .hero .inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  padding-block:96px;
}
[data-theme="streaming-hub"] .hero .mark{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:.16em}
[data-theme="streaming-hub"] .hero h1{font-weight:800;letter-spacing:-.02em}

/* 라이브 레일 드러내기 */
[data-theme="streaming-hub"] .live-rail{
  display:block;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);
}
[data-theme="streaming-hub"] .live-rail .screen{
  aspect-ratio:16/10;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a2350,#0d1330);border:1px solid var(--line);
  display:grid;place-items:center;
}
[data-theme="streaming-hub"] .live-rail .screen .badge{
  position:absolute;top:12px;left:12px;display:inline-flex;gap:7px;align-items:center;
  background:var(--live);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.1em;
  padding:6px 11px;border-radius:var(--radius-pill);
}
[data-theme="streaming-hub"] .live-rail .screen .badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
[data-theme="streaming-hub"] .live-rail .meta{display:flex;align-items:center;gap:10px;margin-top:14px}
[data-theme="streaming-hub"] .live-rail .meta .who{font-weight:800}
[data-theme="streaming-hub"] .live-rail .meta .sub{color:var(--fg-muted);font-size:.82rem}
[data-theme="streaming-hub"] .live-rail .chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
[data-theme="streaming-hub"] .live-rail .chips span{
  font-size:.74rem;color:var(--fg-muted);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 11px}

/* 카드도 트렌디하게: 큰 라운드 + 네온 링 */
[data-theme="streaming-hub"] .card{border-radius:var(--radius-lg)}
[data-theme="streaming-hub"] .card:hover{box-shadow:0 0 0 1px var(--accent-2), 0 24px 60px rgba(91,140,255,.18)}
[data-theme="streaming-hub"] .btn-live{box-shadow:0 8px 24px rgba(255,71,126,.35)}

@media (max-width:920px){
  [data-theme="streaming-hub"] .hero .inner{grid-template-columns:1fr;padding-block:72px}
}