/* ============================================================
   도레미 홈 트레이너 — 아트 테마 토큰
   html[data-art="cosmic|jungle|retro"] 로 전환
   ============================================================ */

/* ---------- 우주 뮤직 스테이션 (기본) ---------- */
html[data-art="cosmic"] {
  --bg-top:#0B1026;   --bg-bottom:#161d4a;
  --surface:#161d42;  --surface-2:#1d2657;
  --ink:#EAF6FF;      --ink-soft:#9fb3d9;
  --accent:#38E8FF;   --accent-2:#FF5DA2;  --accent-3:#FFD166;
  --line:rgba(56,232,255,.30);
  --header-bg:rgba(11,16,38,.86);
  --badge-bg:rgba(56,232,255,.14); --badge-ink:#8ff2ff;
  --accent-grad:linear-gradient(135deg,#38E8FF,#7C5CFF);
  --btn-shadow:0 3px 0 #1e40af, 0 0 16px rgba(56,232,255,.45);
  --title-shadow:0 0 18px rgba(56,232,255,.55), 0 0 40px rgba(124,92,255,.4);
  --card-radius:22px;
  --font-head:'Orbitron','Jua',system-ui,sans-serif;
  --font-body:'Pretendard',system-ui,sans-serif;
  --deco-emoji:"✦";
}

/* ---------- 정글 뮤직 밴드 ---------- */
html[data-art="jungle"] {
  --bg-top:#EAF9EC;   --bg-bottom:#CDEFCF;
  --surface:#FFFFFF;  --surface-2:#F3FBF1;
  --ink:#1C3A28;      --ink-soft:#5b7a63;
  --accent:#2F9E67;   --accent-2:#FF8A3D;  --accent-3:#FFD166;
  --line:#BFE4C7;
  --header-bg:rgba(240,255,242,.94);
  --badge-bg:#E6F7E9; --badge-ink:#1f7a4d;
  --accent-grad:linear-gradient(135deg,#4EDB86,#2F9E67);
  --btn-shadow:0 5px 0 #1f7a4d, 0 8px 18px rgba(31,122,77,.25);
  --title-shadow:0 3px 0 #BFE4C7, 0 4px 10px rgba(31,122,77,.18);
  --card-radius:24px;
  --font-head:'Jua',system-ui,sans-serif;
  --font-body:'Pretendard',system-ui,sans-serif;
  --deco-emoji:"🍃";
}

/* ---------- 레트로 아케이드 팝 ---------- */
html[data-art="retro"] {
  --bg-top:#14121f;   --bg-bottom:#241a3a;
  --surface:#1e1a2e;  --surface-2:#2a2340;
  --ink:#FDF6FF;      --ink-soft:#c7b8e8;
  --accent:#FF2E97;   --accent-2:#22E0D6;  --accent-3:#FFE23D;
  --line:rgba(255,46,151,.45);
  --header-bg:rgba(20,18,31,.9);
  --badge-bg:rgba(34,224,214,.14); --badge-ink:#7ff3ec;
  --accent-grad:linear-gradient(135deg,#FF2E97,#9B5DE5);
  --btn-shadow:0 4px 0 #7a1150, 0 0 0 2px rgba(255,226,61,.25);
  --title-shadow:2px 2px 0 #9B5DE5, 4px 4px 0 rgba(34,224,214,.5);
  --card-radius:12px;
  --font-head:'Jua',system-ui,sans-serif;
  --font-body:'Pretendard',system-ui,sans-serif;
  --deco-emoji:"◆";
}

/* ============================================================
   공용 베이스 — 테마 배경/글자색
   .app-shell(랜딩), body[data-themed] 에 적용
   ============================================================ */
html[data-art] .app-shell,
html[data-art] body.themed-bg {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) !important;
  color: var(--ink);
}

/* ---- 공용 상단바(게임 페이지 헤더) ---- */
html[data-art] .app-topbar {
  background: var(--header-bg) !important;
  border-bottom: 3px solid var(--line) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-art] .app-topbar .app-logo {
  background: var(--accent-grad) !important;
  box-shadow: var(--btn-shadow) !important;
}
html[data-art] .app-topbar .app-title {
  color: var(--ink) !important; font-family: var(--font-head) !important;
}
html[data-art] .app-topbar .app-academy {
  background: var(--badge-bg) !important; color: var(--badge-ink) !important;
  border-color: var(--line) !important;
}
html[data-art] .app-topbar .app-user { color: var(--ink-soft) !important; }
html[data-art] .app-topbar .app-coins {
  background: var(--badge-bg) !important; color: var(--badge-ink) !important;
  border: 2px solid var(--line) !important;
}
html[data-art] .app-topbar .app-coins span { color: var(--badge-ink) !important; }

/* ============================================================
   랜딩 전용 리스타일 (기존 클래스 → 토큰)
   ============================================================ */
html[data-art] .switch-shell {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) !important;
  color: var(--ink);
}
html[data-art] .site-header {
  background: var(--header-bg) !important;
  border-bottom: 3px solid var(--line) !important;
}
html[data-art] .header-logo-btn {
  background: var(--accent-grad) !important;
  box-shadow: var(--btn-shadow) !important;
}
html[data-art] .header-badge {
  background: var(--badge-bg) !important;
  border: 2px solid var(--line) !important;
  color: var(--badge-ink) !important;
}
html[data-art] .brand-title {
  color: var(--ink) !important;
  font-family: var(--font-head) !important;
  text-shadow: var(--title-shadow) !important;
}
html[data-art] .brand-sub { color: var(--accent) !important; }
html[data-art] .card-label { color: var(--ink) !important; }
html[data-art] .card-sublabel { color: var(--ink-soft) !important; }
html[data-art] .card-thumb { border-radius: var(--card-radius) !important; }
html[data-art] .game-card.featured .card-thumb { border-radius: calc(var(--card-radius) + 2px) !important; }
html[data-art] .scroll-dot { background: var(--ink-soft) !important; opacity:.4; }
html[data-art] .scroll-dot.active { background: var(--accent) !important; opacity:1; }

/* 설정 시트 */
html[data-art] .settings-sheet {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 2px solid var(--line);
}
html[data-art] .settings-sheet h3,
html[data-art] .settings-sheet p,
html[data-art] .settings-sheet strong { color: var(--ink) !important; }

/* 컨셉(테마) 선택 카드 */
.art-picker { display:flex; gap:10px; margin-bottom:18px; }
.art-opt {
  flex:1; cursor:pointer; border-radius:16px; padding:12px 8px; text-align:center;
  border:2.5px solid transparent; background:#0000000d; transition:all .15s;
  font-weight:800; font-size:12px; line-height:1.3;
}
.art-opt .art-emoji { font-size:26px; display:block; margin-bottom:4px; }
.art-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.art-opt[data-k="cosmic"] { background:linear-gradient(160deg,#0B1026,#1b1b4d); color:#eaf6ff; }
.art-opt[data-k="jungle"] { background:linear-gradient(160deg,#12452f,#2f8f5b); color:#f3fff4; }
.art-opt[data-k="retro"]  { background:linear-gradient(160deg,#14121f,#2a1a3f); color:#ffe; }

/* 우주/레트로(어두운 테마)에서 흰 카드/버튼 밝은 요소 가독성 보정 */
html[data-art="cosmic"] .settings-sheet .theme-dot,
html[data-art="retro"]  .settings-sheet .theme-dot { border-color: var(--line); }

/* ============================================================
   게임 내부 스킨 — 플레이 배경을 테마 배경으로.
   (밝은 콘텐츠 카드·악보 종이는 그대로 두어 가독성 유지)
   괴물피아노·스탭워즈는 theme.css를 포함하지 않아 영향 없음.
   ============================================================ */
html[data-art] body {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) !important;
  color: var(--ink);
}
/* 음악퀴즈 — 인게임 화면 배경을 투명 처리해 테마 배경이 비침 */
html[data-art] #screen-game { background: transparent !important; }
/* 리듬체스 — 메뉴/플레이/결과 스테이지 배경 */
html[data-art] .chess-stage {
  background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom)) !important;
}
/* 오선퍼즐·리듬피자 — 상/하단 바 */
html[data-art] .snap-bar {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
/* 오선퍼즐·리듬피자 — 시작/잠금 오버레이 */
html[data-art] #startScreen,
html[data-art] #timeLockScreen {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-art] #startScreen #startScreenDesc { color: var(--ink-soft) !important; }