/* ============================================================
   엔돌핀♥ — 테마 (theme.css)
   ------------------------------------------------------------
   Light = 크림 화이트 + 연핑크 포인트 + 라벤더 보조 (기본)
   Dark  = 진한 네이비 + 보라 포인트 + 흰 글자 + 은은한 글로우

   ★ 테마는 사용자가 고릅니다(☀️/🌙). 방송 ON/OFF 와는 무관합니다.
     방송 상태는 Hero 카드 한 곳만 바꿉니다.
   ============================================================ */

:root{
  /* ── Light (기본) ── */
  --bg:        #fff7f9;
  --bg-2:      #ffeef4;
  --surface:   #ffffff;
  --surface-2: #fffafc;
  --line:      #f3e2ea;
  --line-2:    #ead9e4;

  --ink:       #2f2a33;
  --ink-2:     #565061;
  --ink-3:     #6f6878;   /* 보조 글자 — 흰 바탕에서도 편히 읽히게 */

  --pink:      #ff6fa8;
  --pink-ink:  #d43c7d;   /* 글자용 진한 핑크 (배경용 --pink 와 구분) */
  --pink-soft: #ffe6ee;
  --lav:       #a78bfa;
  --lav-ink:   #6d4fd6;   /* 글자용 진한 라벤더 */
  --lav-soft:  #efe9ff;
  --mint:      #6ee7b7;
  --slate:     #64748b;

  --shadow-sm: 0 2px 8px rgba(47,42,51,.06);
  --shadow:    0 8px 24px rgba(47,42,51,.08);
  --shadow-lg: 0 18px 44px rgba(47,42,51,.12);
  --glow:      none;

  --r-sm: 12px; --r: 18px; --r-lg: 24px; --r-pill: 999px;
}

html[data-theme="dark"]{
  --bg:        #0f1220;
  --bg-2:      #151829;
  --surface:   #1a1d2e;
  --surface-2: #212539;
  --line:      #2b3049;
  --line-2:    #363c58;

  --ink:       #f1f3fa;
  --ink-2:     #cbd5e1;
  --ink-3:     #8f97ad;

  --pink:      #c084fc;
  --pink-ink:  #e0a9ff;   /* 다크에선 밝은 쪽이 잘 읽힘 */
  --pink-soft: #2a2145;
  --lav:       #a78bfa;
  --lav-ink:   #b9a3ff;
  --lav-soft:  #241f3d;
  --mint:      #34d399;
  --slate:     #94a3b8;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.34);
  --shadow:    0 10px 28px rgba(0,0,0,.42);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.5);
  --glow:      0 0 26px rgba(167,139,250,.18);
}

/* ── 하위 페이지용 떠 있는 테마 버튼 (메인은 상단바에 자체 버튼) ── */
.luv-theme-btn{
  position:fixed; top:16px; right:16px; z-index:90;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; background:var(--surface); color:var(--ink-2);
  border:1.5px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.luv-theme-btn:hover{ transform:translateY(-2px); border-color:var(--lav); box-shadow:var(--shadow), var(--glow); }
@media (max-width:640px){ .luv-theme-btn{ top:10px; right:10px; width:38px; height:38px; font-size:16px; } }

/* 테마 전환은 부드럽게 */
html[data-theme] body,
html[data-theme] .card, html[data-theme] .gate, html[data-theme] .twig,
html[data-theme] .hs-card, html[data-theme] .lv-me, html[data-theme] .lv-card,
html[data-theme] .pcard, html[data-theme] .trow, html[data-theme] .home{
  transition: background-color .35s ease, border-color .35s ease,
              color .35s ease, box-shadow .35s ease;
}

/* ============================================================
   아래는 '기존 페이지들'(스케줄러·스타·라이브·풍선·시그)이
   다크 모드를 따라가게 하는 보정입니다. 라이트는 원래 디자인 그대로.
   ============================================================ */
html[data-theme="dark"]{
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(circle at 14% 10%, #1b2140 0, transparent 46%),
    radial-gradient(circle at 86% 16%, #17203a 0, transparent 42%),
    radial-gradient(circle at 78% 94%, #221c3d 0, transparent 46%) !important;
  background-attachment: fixed !important;
}
html[data-theme="dark"] body{ background:transparent !important; color: var(--ink) !important; }

/* 흰 카드류 → 어두운 표면 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .gate,
html[data-theme="dark"] .twig,
html[data-theme="dark"] .hs-card,
html[data-theme="dark"] .lv-me,
html[data-theme="dark"] .lv-card,
html[data-theme="dark"] .pcard,
html[data-theme="dark"] .trow,
html[data-theme="dark"] .bc-times-bottom,
html[data-theme="dark"] .sig-modal-card{
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] .lv-card.off,
html[data-theme="dark"] .pcard.off{
  background: var(--bg-2) !important; border-color: var(--line) !important; box-shadow:none !important;
}
html[data-theme="dark"] .lv-me.off{ background: var(--bg-2) !important; }

/* 글자 */
html[data-theme="dark"] .hero .tag, html[data-theme="dark"] .hero .sub,
html[data-theme="dark"] .foot, html[data-theme="dark"] .desc,
html[data-theme="dark"] .tw-desc, html[data-theme="dark"] .hint,
html[data-theme="dark"] .pmeta, html[data-theme="dark"] .ptitle,
html[data-theme="dark"] .c-title, html[data-theme="dark"] .me-msg,
html[data-theme="dark"] .note, html[data-theme="dark"] .stamp,
html[data-theme="dark"] .bcdays .d2, html[data-theme="dark"] .cnt,
html[data-theme="dark"] .me-note, html[data-theme="dark"] .bc-hint{ color: var(--ink-3) !important; }

html[data-theme="dark"] .name, html[data-theme="dark"] .pname,
html[data-theme="dark"] .c-name, html[data-theme="dark"] .me-name,
html[data-theme="dark"] .hs-val, html[data-theme="dark"] .tw-name,
html[data-theme="dark"] .me-title{ color: var(--ink) !important; }

/* 포인트색 */
html[data-theme="dark"] .hero .logo, html[data-theme="dark"] .ttl,
html[data-theme="dark"] .bcdays .d1, html[data-theme="dark"] .hs-label,
html[data-theme="dark"] .sec-h h2, html[data-theme="dark"] .bt-h,
html[data-theme="dark"] .tl-nm{ color: var(--lav) !important; }

html[data-theme="dark"] .home,
html[data-theme="dark"] .bc-home,
html[data-theme="dark"] #st-refresh,
html[data-theme="dark"] #lv-refresh,
html[data-theme="dark"] .me-go.ghost{
  background: var(--surface) !important; border-color: var(--line) !important;
  color: var(--lav) !important; box-shadow: var(--shadow-sm) !important;
}

html[data-theme="dark"] .card:hover, html[data-theme="dark"] .gate:hover,
html[data-theme="dark"] .twig:hover, html[data-theme="dark"] .lv-card:hover,
html[data-theme="dark"] .pcard:hover{ border-color: var(--lav) !important; box-shadow: var(--shadow-lg), var(--glow) !important; }

/* 버튼·칩 */
html[data-theme="dark"] .tab, html[data-theme="dark"] .chip,
html[data-theme="dark"] .sbtn, html[data-theme="dark"] .tbtn{
  background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink-3) !important;
}
html[data-theme="dark"] .tab.on{
  background: linear-gradient(135deg,#7c3aed,#a78bfa) !important;
  border-color:#7c3aed !important; color:#fff !important;
}
html[data-theme="dark"] .chip.on, html[data-theme="dark"] .sbtn.on,
html[data-theme="dark"] .tbtn.on{
  background: var(--lav) !important; border-color: var(--lav) !important; color:#141726 !important;
}
html[data-theme="dark"] .chip .n, html[data-theme="dark"] .sbtn .sn,
html[data-theme="dark"] .tbtn .tn{ background: var(--lav-soft) !important; color: var(--lav) !important; }

/* 상태 배지 (LIVE 는 그대로, OFF 만 차분히) */
html[data-theme="dark"] .pbadge.off, html[data-theme="dark"] .c-badge.off,
html[data-theme="dark"] .me-badge.off{ background: var(--line) !important; color: var(--ink-3) !important; }
html[data-theme="dark"] .ptier, html[data-theme="dark"] .c-tier{ background: var(--bg-2) !important; }
html[data-theme="dark"] .pthumb, html[data-theme="dark"] .c-thumb{ background: var(--surface-2) !important; }

/* 스타 페이지 부속 */
html[data-theme="dark"] #st-top{
  background: linear-gradient(135deg,#7c3aed,#a78bfa) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] #st-preview{ background: var(--surface) !important; border-color: var(--line-2) !important; }
html[data-theme="dark"] .pv-nm{ color: var(--ink) !important; }
html[data-theme="dark"] .pv-tt{ color: var(--ink-3) !important; }
html[data-theme="dark"] .ch-g.off{ background: var(--bg-2) !important; color: var(--ink-3) !important; border-color: var(--line) !important; }
html[data-theme="dark"] #st-changes.none .ch-t{ background: var(--bg-2) !important; border-color: var(--line) !important; color: var(--ink-3) !important; }

/* 유튜브 준비중 · 시그 */
html[data-theme="dark"] .msg{ color: var(--ink-3) !important; }
html[data-theme="dark"] .msg b{ color: var(--ink) !important; }
html[data-theme="dark"] .line{ background: var(--line) !important; }
html[data-theme="dark"] .sig-new{ background: var(--lav-soft) !important; color: var(--lav) !important; }
html[data-theme="dark"] .sig-modal{ background: rgba(0,0,0,.62) !important; }

/* 풍선 가이드 (자체 변수) */
html[data-theme="dark"]{ --card: var(--surface); --ink-soft: var(--ink-3); }
html[data-theme="light"]{
  --card:#fff; --ink-soft:#9a8a92;
}

/* 스케줄러 (디자인 시스템 변수) */
html[data-theme="dark"]{
  --luv-cream:     var(--bg);
  --luv-paper:     var(--surface);
  --luv-ink:       var(--ink);
  --luv-ink-soft:  var(--ink-3);
  --luv-line:      var(--line);
  --luv-pink:      var(--lav);
  --luv-pink-deep: var(--lav);
  --luv-pink-soft: var(--line-2);
  --luv-pink-bg:   var(--bg-2);
  --luv-shadow-sm: var(--shadow-sm);
  --luv-shadow:    var(--shadow);
  --luv-shadow-lg: var(--shadow-lg);
}
html[data-theme="dark"] .bc-paper, html[data-theme="dark"] .bc-cell,
html[data-theme="dark"] .bc-card3, html[data-theme="dark"] .bc-mcard,
html[data-theme="dark"] .bc-day-inline, html[data-theme="dark"] .bc-bcdays{
  background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important;
}
html[data-theme="dark"] .bc-cell .dn{ color: var(--ink) !important; }
html[data-theme="dark"] .bc-cell.sat{ background:#182036 !important; }
html[data-theme="dark"] .bc-cell.sun{ background:#241a2c !important; }
html[data-theme="dark"] .bc-cell.is-rest{ background: var(--bg-2) !important; }
html[data-theme="dark"] .bc-cell.is-rest .dn{ color: var(--ink-3) !important; }
html[data-theme="dark"] .slot-time{ background: var(--surface-2) !important; color: var(--ink-3) !important; }
html[data-theme="dark"] .bc-times-bottom .t{ background: var(--surface-2) !important; color: var(--ink) !important; }
html[data-theme="dark"] .bc-times-bottom .t .tm{ color: var(--lav) !important; }
html[data-theme="dark"] .c3-body, html[data-theme="dark"] .bc-kv,
html[data-theme="dark"] .dc-sec{ background:transparent !important; color: var(--ink) !important; }
html[data-theme="dark"] .bc-banner{ background: var(--surface) !important; }