/* ============================================================ 엔돌핀♥ — 사이트 분위기 (mood.css) ------------------------------------------------------------ html[data-mood="live"] = 방송 중 → 핑크 (따뜻하고 생기있게) html[data-mood="calm"] = 방송 없음 → 모던 (차분한 딥 차콜) ★ 색만 바꿉니다. 구조·글자크기·간격은 각 페이지 그대로. ★ 분위기 전환은 mood.js 가 를 바꾸면 자동. ============================================================ */ :root{ /* 모던(차분) 팔레트 */ --m-bg1:#171921; --m-bg2:#1d2029; --m-bg3:#232733; --m-card:#22252f; --m-card2:#282c38; --m-line:#333849; --m-line2:#3d435a; --m-ink:#e8eaf2; --m-ink-soft:#9aa1b5; --m-accent:#8ab6e8; --m-accent-d:#a9cdf5; --m-accent-soft:#243247; --m-shadow:0 10px 28px rgba(0,0,0,.42); } /* 색 전환을 부드럽게 (분위기 바뀔 때 스르륵) */ html[data-mood] body, html[data-mood] .card, html[data-mood] .gate, html[data-mood] .twig, html[data-mood] .hs-card, html[data-mood] .lv-me, html[data-mood] .lv-card, html[data-mood] .pcard, html[data-mood] .trow, html[data-mood] .home{ transition: background-color .5s ease, background .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease; } /* ============================================================ 배경은 에 칠하고 는 투명으로 비웁니다. (페이지마다 body 배경이 제각각이라, body 를 덮어쓰는 방식은 충돌함) ============================================================ */ html[data-mood]{ min-height:100%; } html[data-mood] body{ background:transparent !important; } html[data-mood]{ transition: background-color .5s ease; } /* ── 방송 중 = 핑크 (기존 느낌 유지 + 살짝 더 화사하게) ── */ html[data-mood="live"]{ background-color:#fffaf5 !important; background-image: radial-gradient(circle at 15% 12%, #ffe4ee 0, transparent 42%), radial-gradient(circle at 85% 18%, #ffeaf2 0, transparent 40%), radial-gradient(circle at 75% 92%, #fff1e0 0, transparent 44%) !important; background-attachment: fixed !important; } /* ── 방송 없음 = 모던 (딥 차콜 · 아이스블루) ── */ html[data-mood="calm"]{ background-color:#171921 !important; background-image: radial-gradient(circle at 14% 10%, #242a3c 0, transparent 46%), radial-gradient(circle at 86% 16%, #1d2a34 0, transparent 42%), radial-gradient(circle at 78% 94%, #272233 0, transparent 46%) !important; background-attachment: fixed !important; } html[data-mood="calm"] body{ color: var(--m-ink) !important; } /* ── 흰 카드류 → 어두운 표면 ───────────────────────────── */ html[data-mood="calm"] .card, html[data-mood="calm"] .gate, html[data-mood="calm"] .twig, html[data-mood="calm"] .hs-card, html[data-mood="calm"] .lv-me, html[data-mood="calm"] .lv-card, html[data-mood="calm"] .pcard, html[data-mood="calm"] .trow, html[data-mood="calm"] .bc-times-bottom, html[data-mood="calm"] .sig-modal-card{ background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-ink) !important; box-shadow: var(--m-shadow) !important; } html[data-mood="calm"] .lv-card.off, html[data-mood="calm"] .pcard.off{ background: var(--m-bg2) !important; border-color: var(--m-line) !important; box-shadow: none !important; } html[data-mood="calm"] .lv-me.off{ background: var(--m-bg2) !important; } /* ── 글자색 ────────────────────────────────────────────── */ html[data-mood="calm"] .hero .tag, html[data-mood="calm"] .hero .sub, html[data-mood="calm"] .foot, html[data-mood="calm"] .desc, html[data-mood="calm"] .tw-desc, html[data-mood="calm"] .hint, html[data-mood="calm"] .pmeta, html[data-mood="calm"] .ptitle, html[data-mood="calm"] .c-title, html[data-mood="calm"] .me-msg, html[data-mood="calm"] .note, html[data-mood="calm"] .stamp, html[data-mood="calm"] .bcdays .d2, html[data-mood="calm"] .cnt, html[data-mood="calm"] .me-note{ color: var(--m-ink-soft) !important; } html[data-mood="calm"] .name, html[data-mood="calm"] .pname, html[data-mood="calm"] .c-name, html[data-mood="calm"] .me-name, html[data-mood="calm"] .hs-val, html[data-mood="calm"] .tw-name, html[data-mood="calm"] .me-title{ color: var(--m-ink) !important; } /* ── 포인트색(핑크 → 아이스블루) ───────────────────────── */ html[data-mood="calm"] .hero .logo, html[data-mood="calm"] .ttl, html[data-mood="calm"] .home, html[data-mood="calm"] .bcdays .d1, html[data-mood="calm"] .hs-label, html[data-mood="calm"] .sec-h h2, html[data-mood="calm"] .bt-h, html[data-mood="calm"] .tl-nm{ color: var(--m-accent-d) !important; } html[data-mood="calm"] .home, html[data-mood="calm"] #st-refresh, html[data-mood="calm"] #lv-refresh{ background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-accent-d) !important; box-shadow: var(--m-shadow) !important; } /* 카드 hover 테두리 */ html[data-mood="calm"] .card:hover, html[data-mood="calm"] .gate:hover, html[data-mood="calm"] .twig:hover, html[data-mood="calm"] .lv-card:hover, html[data-mood="calm"] .pcard:hover{ border-color: var(--m-accent) !important; } /* 가지치기 선 */ html[data-mood="calm"] .branch::before{ background:linear-gradient(var(--m-line2),var(--m-accent)) !important; } html[data-mood="calm"] .branch::after{ background: var(--m-accent) !important; } /* ── 버튼·칩류 ─────────────────────────────────────────── */ html[data-mood="calm"] .tab, html[data-mood="calm"] .chip, html[data-mood="calm"] .sbtn, html[data-mood="calm"] .tbtn{ background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-ink-soft) !important; } html[data-mood="calm"] .tab.on{ background: linear-gradient(135deg,#3d5a80,#5b82b0) !important; border-color:#5b82b0 !important; color:#fff !important; } html[data-mood="calm"] .chip.on, html[data-mood="calm"] .sbtn.on, html[data-mood="calm"] .tbtn.on{ background: var(--m-accent) !important; border-color: var(--m-accent) !important; color:#12161f !important; } html[data-mood="calm"] .chip .n, html[data-mood="calm"] .sbtn .sn, html[data-mood="calm"] .tbtn .tn{ background: var(--m-accent-soft) !important; color: var(--m-accent-d) !important; } /* ── 상태 배지 (OFF는 차분하게, LIVE는 그대로 빨강 유지) ── */ html[data-mood="calm"] .pbadge.off, html[data-mood="calm"] .c-badge.off, html[data-mood="calm"] .me-badge.off{ background: var(--m-line) !important; color: var(--m-ink-soft) !important; } html[data-mood="calm"] .ptier, html[data-mood="calm"] .c-tier{ background: var(--m-bg2) !important; } /* ── 프로필 썸네일 배경 ────────────────────────────────── */ html[data-mood="calm"] .pthumb, html[data-mood="calm"] .c-thumb{ background: var(--m-bg3) !important; } /* ── 맨 위로 버튼 / 미리보기 카드 ──────────────────────── */ html[data-mood="calm"] #st-top{ background: linear-gradient(135deg,#3d5a80,#5b82b0) !important; box-shadow:0 10px 26px rgba(0,0,0,.5) !important; } html[data-mood="calm"] #st-preview{ background: var(--m-card) !important; border-color: var(--m-line2) !important; } html[data-mood="calm"] .pv-nm{ color: var(--m-ink) !important; } html[data-mood="calm"] .pv-tt{ color: var(--m-ink-soft) !important; } /* ── 변경 알림 ─────────────────────────────────────────── */ html[data-mood="calm"] .ch-g.off{ background: var(--m-bg2) !important; color: var(--m-ink-soft) !important; border-color: var(--m-line) !important; } html[data-mood="calm"] #st-changes.none .ch-t{ background: var(--m-bg2) !important; border-color: var(--m-line) !important; color: var(--m-ink-soft) !important; } /* ── 유튜브 준비중 페이지 ──────────────────────────────── */ html[data-mood="calm"] .card .ttl{ color: var(--m-accent-d) !important; } html[data-mood="calm"] .msg{ color: var(--m-ink-soft) !important; } html[data-mood="calm"] .msg b{ color: var(--m-ink) !important; } html[data-mood="calm"] .line{ background: var(--m-line) !important; } /* ── 시그(댄스) 페이지 ─────────────────────────────────── */ html[data-mood="calm"] .sig-new{ background: var(--m-accent-soft) !important; color: var(--m-accent-d) !important; } html[data-mood="calm"] .sig-modal{ background: rgba(0,0,0,.6) !important; } /* ── 풍선 가이드 (자체 변수 사용) ──────────────────────── */ html[data-mood="calm"]{ --bg: var(--m-bg1); --card: var(--m-card); --ink: var(--m-ink); --ink-soft: var(--m-ink-soft); --line: var(--m-line); } /* 방송 중엔 기기가 다크모드여도 핑크로 통일 (분위기 일관성) */ html[data-mood="live"]{ --bg:#fffaf3; --card:#fff; --ink:#5b4a52; --ink-soft:#9a8a92; --line:#f3d9e2; } /* ── 스케줄러 (디자인 시스템 변수 갈아끼우기) ──────────── */ html[data-mood="calm"]{ --luv-cream: var(--m-bg1); --luv-paper: var(--m-card); --luv-ink: var(--m-ink); --luv-ink-soft: var(--m-ink-soft); --luv-line: var(--m-line); --luv-pink: var(--m-accent); --luv-pink-deep: var(--m-accent-d); --luv-pink-soft: var(--m-line2); --luv-pink-bg: var(--m-bg2); --luv-shadow-sm: 0 4px 12px rgba(0,0,0,.34); --luv-shadow: 0 8px 24px rgba(0,0,0,.42); --luv-shadow-lg: 0 14px 34px rgba(0,0,0,.5); } html[data-mood="calm"] .bc-paper, html[data-mood="calm"] .bc-cell, html[data-mood="calm"] .bc-card3, html[data-mood="calm"] .bc-mcard, html[data-mood="calm"] .bc-day-inline{ background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-ink) !important; } html[data-mood="calm"] .bc-cell .dn{ color: var(--m-ink) !important; } /* 스케줄러 상단 메인 버튼 · 방송시간 줄 — 밝은 분홍 바탕이라 따로 어둡게 */ html[data-mood="calm"] .bc-home{ background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-accent-d) !important; } html[data-mood="calm"] .bc-times-bottom .t{ background: var(--m-bg3) !important; color: var(--m-ink) !important; } html[data-mood="calm"] .bc-times-bottom .t .tm{ color: var(--m-accent-d) !important; } html[data-mood="calm"] .bc-bcdays{ background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-ink) !important; } /* 라이브 페이지 — 흰 바탕 보조 버튼 */ html[data-mood="calm"] .me-go.ghost{ background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-accent-d) !important; } /* 남은 밝은 바탕 조각들 (공지 카드 본문 등) */ html[data-mood="calm"] .c3-body, html[data-mood="calm"] .bc-kv, html[data-mood="calm"] .dc-sec{ background: transparent !important; color: var(--m-ink) !important; } html[data-mood="calm"] .bc-cell.sat{ background:#1e2633 !important; } html[data-mood="calm"] .bc-cell.sun{ background:#2a2029 !important; } html[data-mood="calm"] .bc-cell.is-rest{ background: var(--m-bg2) !important; } html[data-mood="calm"] .bc-cell.is-rest .dn{ color: var(--m-ink-soft) !important; } html[data-mood="calm"] .slot-time{ background: var(--m-bg3) !important; color: var(--m-ink-soft) !important; } html[data-mood="calm"] .bc-banner{ background: var(--m-card) !important; }