/* ══════════════════════════════════════════════════════════════════════════
   츄라희 노래책 — 새 디자인 (2026) 오버레이
   ──────────────────────────────────────────────────────────────────────────
   기존 style.css · season.css '뒤'에 로드되어 디자인만 덮습니다.
   기능 · 마크업(JSX)은 손대지 않습니다.

   · 라이트  : 페리윙클 그라데이션 + 별가루, 글래스 카드
   · 다크    : 별밤 (계절과 무관하게 항상)
   · 계절    : 봄 P1 / 여름·가을·겨울 P2
   · 레이아웃 : 상단 메뉴 → 좌측 사이드바

   토큰은 html(:root)이 아니라 body 에 선언합니다 — season.css 의
   :root[data-season="…"] 보다 body 가 더 가까워 항상 이깁니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS — LIGHT ─────────────────────────────────────────────────────── */
body {
  --radius: 22px;

  --font-display: "Pretendard Variable", Pretendard, "IBM Plex Sans KR", system-ui, sans-serif;
  --font-pixel:   "Pretendard Variable", Pretendard, "IBM Plex Sans KR", system-ui, sans-serif;
  --font-sans:    "Pretendard Variable", Pretendard, "IBM Plex Sans KR", system-ui, sans-serif;
  --font-mono:    "Pretendard Variable", Pretendard, ui-monospace, Menlo, monospace;

  --ink:      #1C2530;
  --ink-soft: #3A4757;
  --muted:    #5A6B7C;
  --muted-2:  #93A3B4;
  --line:        rgba(28,37,48,.10);
  --line-strong: rgba(28,37,48,.20);
  --ink-line:    rgba(28,37,48,.10);

  --page:      rgba(255,255,255,.34);
  --paper:     #FFFFFF;
  --paper-soft:#F4F8FC;
  --glass:     rgba(255,255,255,.34);
  --glass-brd: rgba(255,255,255,.55);
  --card-brd:  rgba(255,255,255,.92);
  --divider:   rgba(28,37,48,.075);
  --chrome-bg: rgba(255,255,255,.22);
  --side-bg:   rgba(255,255,255,.38);
  --side-brd:  rgba(255,255,255,.55);

  --shadow:    0 24px 55px rgba(30,52,86,.20);
  --shadow-sm: 0 10px 26px rgba(30,52,86,.10);
  --hard-shadow: rgba(30,52,86,.18);
  --hd-1: 0 6px 16px rgba(30,52,86,.10);
  --hd-2: 0 12px 30px rgba(30,52,86,.15);
  --hd-3: 0 24px 55px rgba(30,52,86,.20);
  --overlay: rgba(14,22,38,.42);

  --red:   #E54524;
  --yellow:#1E2A38;   /* 활성 알약 = 짙은 네이비 (새 디자인) */
  --pink:  #E87093;
  --green: #4CAF50;
  --accent:#1E2A38;
  --accent-fill:#1E2A38;
  --accent-ink: #FFFFFF;
  --signal:#3F7FDE;
  --sun:   #F2B01E;
  --leaf:  #4CAF50;
  --rose:  #E87093;
  --duet:  #3F7FDE;
  --spark: #FFFFFF;

  --chip-count-bg: rgba(28,37,48,.08);
  --tag-bg:  #EDF2F8;
  --tag-fg:  #5A6B7C;
  --code-bg: #F4F8FC;
  --hover-yt:   rgba(229,69,36,.12);
  --hover-soop: rgba(63,127,222,.12);
  --frame-b: #F4F8FC;
  --frame-c: #EDF2F8;
  --dot:     rgba(28,37,48,.12);
  --cream-line: rgba(28,37,48,.10);
  --cream-label: rgba(28,37,48,.5);
  --heart-ink: #1C2530;
  --alt-chip-ink: #3F7FDE;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* 배경 (겨울 P2 = 라이트 기본) */
  --bg-base: #C2D6EE;
  --bg-grad: linear-gradient(135deg,#EAF1FA 0%,#C6D9F0 48%,#A6C1E2 100%);
  --bg-glow: radial-gradient(120% 90% at 78% -10%,rgba(255,255,255,.5),transparent 56%);
  --bg-tex:
    radial-gradient(2.2px 2.2px at 14% 22%,rgba(255,255,255,.95),transparent 62%),
    radial-gradient(1.6px 1.6px at 40% 12%,rgba(255,255,255,.85),transparent 62%),
    radial-gradient(2.6px 2.6px at 66% 40%,rgba(255,255,255,.95),transparent 62%),
    radial-gradient(1.5px 1.5px at 28% 68%,rgba(255,255,255,.85),transparent 62%),
    radial-gradient(2.2px 2.2px at 82% 80%,rgba(255,255,255,.9),transparent 62%),
    radial-gradient(1.4px 1.4px at 52% 88%,rgba(255,255,255,.8),transparent 62%);
  --bg-tex-size: 260px 260px;
  --bg-tex-op: .85;
}

/* ── TOKENS — 계절 (라이트) ─────────────────────────────────────────────── */
:root[data-season="spring"] body {   /* 봄 · P1 */
  --bg-base:#F3C9DC;
  --bg-grad:linear-gradient(135deg,#FCEBF3 0%,#F5CFE0 48%,#ECB3CC 100%);
  --bg-tex:
    radial-gradient(7px 4px at 18% 22%,rgba(242,166,198,.85),transparent 72%),
    radial-gradient(6px 3.5px at 52% 12%,rgba(247,198,220,.85),transparent 72%),
    radial-gradient(7px 4px at 78% 40%,rgba(238,150,188,.8),transparent 72%),
    radial-gradient(5.5px 3px at 34% 62%,rgba(250,214,230,.85),transparent 72%),
    radial-gradient(6.5px 3.5px at 64% 78%,rgba(242,179,206,.8),transparent 72%);
  --bg-tex-size:300px 300px; --bg-tex-op:.85;
}
:root[data-season="summer"] body {   /* 여름 · P2 */
  --bg-base:#A6D7EC;
  --bg-grad:linear-gradient(135deg,#DDF2FA 0%,#A9D9EE 48%,#84C4E2 100%);
}
:root[data-season="autumn"] body {   /* 가을 · P2 */
  --bg-base:#F0CDA5;
  --bg-grad:linear-gradient(135deg,#FBEBDA 0%,#F2CFA6 48%,#E5B67F 100%);
  --bg-tex:
    radial-gradient(7px 4px at 20% 24%,rgba(224,134,58,.8),transparent 72%),
    radial-gradient(6px 3.5px at 54% 14%,rgba(201,96,30,.75),transparent 72%),
    radial-gradient(7px 4px at 80% 44%,rgba(239,168,60,.8),transparent 72%),
    radial-gradient(5.5px 3px at 36% 66%,rgba(217,149,63,.78),transparent 72%),
    radial-gradient(6.5px 3.5px at 66% 82%,rgba(180,80,27,.72),transparent 72%);
  --bg-tex-size:300px 300px; --bg-tex-op:.82;
}

/* ── TOKENS — DARK (별밤, 계절 무관) ────────────────────────────────────── */
:root[data-theme="dark"] body,
:root[data-theme="dark"][data-season="spring"] body,
:root[data-theme="dark"][data-season="summer"] body,
:root[data-theme="dark"][data-season="autumn"] body,
:root[data-theme="dark"][data-season="winter"] body {
  --ink:#EEF3FB; --ink-soft:rgba(238,243,251,.86);
  --muted:#AAB9CF; --muted-2:rgba(238,243,251,.5);
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
  --ink-line:rgba(255,255,255,.10);

  --page:rgba(255,255,255,.06);
  --paper:rgba(255,255,255,.065);
  --paper-soft:rgba(255,255,255,.05);
  --glass:rgba(255,255,255,.06);
  --glass-brd:rgba(255,255,255,.10);
  --card-brd:rgba(255,255,255,.10);
  --divider:rgba(255,255,255,.08);
  --chrome-bg:rgba(255,255,255,.04);
  --side-bg:rgba(255,255,255,.05);
  --side-brd:rgba(255,255,255,.09);

  --shadow:0 26px 60px rgba(0,0,0,.55);
  --shadow-sm:0 10px 26px rgba(0,0,0,.34);
  --hard-shadow:rgba(0,0,0,.45);
  --hd-1:0 6px 16px rgba(0,0,0,.34);
  --hd-2:0 12px 30px rgba(0,0,0,.45);
  --hd-3:0 26px 60px rgba(0,0,0,.55);
  --overlay:rgba(6,12,20,.62);

  --yellow:#EAF0FA;   /* 다크 활성 알약 = 밝은 색 + 어두운 글씨 */
  --accent:#9CC4FF; --accent-fill:#EAF0FA; --accent-ink:#141C2E;
  --signal:#5B8FF0; --duet:#5B8FF0; --spark:#CFE0FF;
  --chip-count-bg:rgba(255,255,255,.10);
  --tag-bg:rgba(255,255,255,.10); --tag-fg:#BCC9DC;
  --code-bg:rgba(255,255,255,.05);

  --bg-base:#0B1120;
  --bg-grad:linear-gradient(160deg,#2B3B5E 0%,#141E36 52%,#0A0F1C 100%);
  --bg-glow:
    radial-gradient(95% 70% at 82% 6%,rgba(150,180,255,.20),transparent 58%),
    radial-gradient(70% 60% at 10% 100%,rgba(80,120,220,.14),transparent 60%);
  --bg-tex:
    radial-gradient(1.8px 1.8px at 10% 16%,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 40%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(2.2px 2.2px at 58% 18%,rgba(207,224,255,.95),transparent 60%),
    radial-gradient(1.1px 1.1px at 80% 54%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.9px 1.9px at 22% 72%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 88%,rgba(207,224,255,.8),transparent 60%);
  --bg-tex-size:280px 280px; --bg-tex-op:.95;
}

/* ── BASE / 배경 ────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  letter-spacing: -.012em;
  background-color: var(--bg-base) !important;
  background-image: var(--bg-grad) !important;
  background-attachment: fixed !important;
  background-blend-mode: normal !important;
  transition: background-color .35s ease, color .3s ease;
}
body::before {
  content: ""; position: fixed; inset: -12%; z-index: 0; pointer-events: none;
  background-image: var(--bg-tex) !important;
  background-size: var(--bg-tex-size) !important;
  opacity: var(--bg-tex-op) !important;
}
:root[data-theme="dark"] body::before { opacity: var(--bg-tex-op) !important; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--bg-glow);
}
::selection { background: #1E2A38; color: #fff; }
:root[data-theme="dark"] ::selection { background: #CFE0FF; color: #141C2E; }
:where(button,a,input,select,[role="button"]):focus-visible { outline: 3px solid var(--duet); }

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT — 가짜 브라우저 창 (점 3개 · 주소창) + 좌측 사이드바
   ══════════════════════════════════════════════════════════════════════════ */
.app {
  position: relative;
  width: min(1560px, calc(100% - 52px));
  margin: 26px auto 44px;
  padding: 58px 24px 24px;
  display: grid;
  grid-template-columns: 236px minmax(0,1fr);
  gap: 24px;
  align-items: start;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(26px) saturate(118%);
  backdrop-filter: blur(26px) saturate(118%);
}
/* 창 상단 바 — 점 3개 (신호등) */
.app::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 46px;
  background-color: var(--chrome-bg);
  border-bottom: 1px solid var(--divider);
  border-radius: var(--radius) var(--radius) 0 0;
  background-image:
    radial-gradient(circle 5.5px at 30px 50%, #FF5F57 98%, transparent 100%),
    radial-gradient(circle 5.5px at 52px 50%, #FEBC2E 98%, transparent 100%),
    radial-gradient(circle 5.5px at 74px 50%, #28C840 98%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}
/* 주소창 */
.app::after {
  content: var(--addr-text, "수상하게 노래를 더 잘하는 게임 스트리머");
  position: absolute; top: 10px; left: 98px; right: 24px; height: 26px;
  /* style.css 의 .app::after(콘솔 하단 레드 데크)가 남긴 margin 을 반드시 지워야
     주소창이 아래로 밀리지 않고 창 상단 바 안에 정확히 붙습니다. */
  margin: 0; box-sizing: border-box;
  display: flex; align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 1px solid var(--divider);
  color: var(--ink-soft);
  font: 600 12.5px var(--font-sans);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* ── 히어로 = 좌측 사이드바 (창 안쪽 패널) ── */
.hero {
  grid-column: 1;
  position: sticky; top: 26px;
  padding: 18px 14px;
  text-align: left;
  overflow: visible;
  display: flex; flex-direction: column;
  background: var(--side-bg);
  border: 1px solid var(--side-brd);
  border-radius: 18px;
}
.hero-deco { display: none !important; }

/* ── 브랜드 (사이드바 상단) ── */
.hero .brand {
  order: -1; justify-items: start; text-align: left; gap: 6px;
  margin: 0 0 14px; padding: 0 6px 14px;
  border-bottom: 1px solid var(--divider);
  position: static;
}
.brand-home {
  display: flex; align-items: center; gap: 10px;
  justify-items: start; padding: 0; border-radius: 12px;
}
.brand-home:hover { transform: none; }
.brand-home:active { transform: none; }
.brand svg { filter: none !important; }
.brand-home svg { width: 34px; height: 34px; }
.brand-title {
  font-family: var(--font-sans); font-weight: 800;
  font-size: 20px; line-height: 1.16; letter-spacing: -.03em;
  color: var(--ink); text-shadow: none; text-transform: none;
}
.brand-sub {
  justify-content: flex-start; font-family: var(--font-sans);
  font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0;
}
.brand-meta {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  color: var(--muted); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: none; font-family: var(--font-sans);
}

/* ── 상단 내비 → 사이드바 메뉴 ── */
.topnav {
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 3px; flex-wrap: nowrap;
  padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.topnav::before { display: none; }
.nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: -.01em; text-transform: none;
  color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 11px;
  box-shadow: none; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.nav-btn i { font-size: 16px; opacity: .7; }
.nav-btn:hover { background: var(--paper-soft); color: var(--ink); transform: none; border-color: transparent; }
.nav-btn.nav-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); border-color: transparent; }
.nav-btn.nav-link { text-decoration: none; }
.nav-btn.nav-yt:hover { background: var(--paper-soft); color: #E54524; }
.nav-btn.nav-yt.nav-active { background: var(--paper); color: #E54524; }
.nav-btn.nav-soop:hover { background: var(--paper-soft); color: var(--ink); }
.nav-theme { margin-top: 8px; }
.nav-theme-t { display: inline; }
.soop-ico { width: 16px; height: 16px; }

/* ── 본문 영역 ── */
.main-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 24px; align-items: start;
}
.shell {
  min-width: 0;
  padding: 6px 4px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   컴포넌트 — 부드러운 표면으로
   ══════════════════════════════════════════════════════════════════════════ */

/* 검색 */
.searchbar {
  background: var(--paper); border: 1px solid var(--card-brd);
  border-radius: 999px; box-shadow: var(--shadow-sm);
}
.searchbar input {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 15px 46px 15px 50px;
}
.searchbar input::placeholder { color: var(--muted-2); }
.searchbar .lead { left: 18px; font-size: 18px; color: var(--muted); }
.searchbar:focus-within { border-color: var(--duet); }
.searchbar:focus-within .lead { color: var(--duet); }
.searchbar .clr {
  background: var(--paper-soft); border: 1px solid var(--line); box-shadow: none; color: var(--ink);
}
.searchbar .clr:hover { background: var(--paper); }
.hl { background: rgba(242,176,30,.40); color: inherit; border-radius: 3px; }

/* 최근 검색어 */
.recent-chip { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px; }
.recent-chip:hover { transform: none; border-color: var(--line-strong); background: var(--paper); box-shadow: var(--shadow-sm); }
.recent-clear { border: 1px dashed var(--line-strong); }
.recent-label, .filter-hint { color: var(--muted); }

/* 장르 칩 */
.chip {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 999px;
  box-shadow: none; padding: 8px 15px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  text-transform: none; letter-spacing: -.01em;
}
.chip:hover { transform: none; background: var(--paper); box-shadow: var(--shadow-sm); }
.chip.active { background: #1E2A38; color: #fff; border-color: transparent; }
:root[data-theme="dark"] .chip.active { background: #EAF0FA; color: #141C2E; }
.chip-count { background: var(--chip-count-bg); font-family: var(--font-sans); font-size: 10.5px; }
.chip.active .chip-count { background: rgba(255,255,255,.22); }
:root[data-theme="dark"] .chip.active .chip-count { background: rgba(20,28,46,.16); }

/* 툴바 */
.toolbar {
  background: var(--paper); border: 1px solid var(--card-brd);
  border-radius: 16px; box-shadow: var(--shadow-sm); background-image: none;
  padding: 16px 20px;
}
.count strong {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); text-shadow: none;
}
.count .sub { color: var(--muted); font-family: var(--font-sans); text-transform: none; }

/* 버튼 */
.btn-random, .btn-primary {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  color: #fff; background: #1E2A38; border: 0; border-radius: 999px;
  box-shadow: var(--shadow-sm); padding: 12px 20px;
}
:root[data-theme="dark"] .btn-random,
:root[data-theme="dark"] .btn-primary { color: #141C2E; background: #EAF0FA; }
.btn-random:hover, .btn-primary:hover { transform: none; box-shadow: var(--shadow); background: #16202B; }
:root[data-theme="dark"] .btn-random:hover,
:root[data-theme="dark"] .btn-primary:hover { background: #fff; }
.btn-random:active, .btn-primary:active { transform: none; box-shadow: var(--shadow-sm); }

/* 정렬·보기 방식 */
.seg { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.seg-btn {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  text-transform: none; background: var(--paper); color: var(--ink-soft);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: #1E2A38; color: #fff; }
:root[data-theme="dark"] .seg-btn.active { background: #EAF0FA; color: #141C2E; }
.sel { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; background: var(--paper); }
.sel select { font-family: var(--font-sans); font-weight: 600; text-transform: none; }
.btn-hard {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  text-transform: none; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: none; background: var(--paper);
}
.btn-hard:hover { transform: none; box-shadow: var(--shadow-sm); }
.btn-hard.on { background: #1E2A38; color: #fff; }
:root[data-theme="dark"] .btn-hard.on { background: #EAF0FA; color: #141C2E; }
.btn-hard i { color: #C98A0A; }
.btn-hard.on i { color: inherit; }
.btn-hard-n { background: var(--chip-count-bg); font-family: var(--font-sans); }
.btn-reset, .btn-favs-manage {
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: none; font-family: var(--font-sans);
}
.btn-favs-manage { background: var(--paper); }
.btn-reset:hover, .btn-favs-manage:hover { transform: none; box-shadow: var(--shadow-sm); }

/* 가수 필터 칩 */
.filter-chip {
  background: #1E2A38; color: #fff; border: 0; border-radius: 999px; box-shadow: none;
  font-family: var(--font-sans);
}
:root[data-theme="dark"] .filter-chip { background: #EAF0FA; color: #141C2E; }
.filter-x { background: rgba(255,255,255,.22); border: 0; color: inherit; }
.filter-x:hover { background: rgba(255,255,255,.4); color: inherit; }

/* 가수별 보기 */
.artist-card {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.artist-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--paper); }
.artist-card:active { transform: none; }
.artist-name { font-weight: 700; }
.artist-meta { color: var(--muted); }
.artist-meta b { font-family: var(--font-sans); }

/* 곡 카드 */
.song-grid { gap: 12px; }
.song-card {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 16px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.song-card::before { display: none; }   /* 카트리지 스트립 제거 */
.song-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.song-card:active { transform: none; box-shadow: var(--shadow-sm); }
.info { padding: 16px 16px 14px; gap: 5px; }
.info .title { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.info .artist { font-size: 11.5px; color: var(--ink-soft); }
.info .meta { gap: 6px; padding-top: 12px; }
.mono-chip {
  border: 0; background: var(--tag-bg); color: var(--tag-fg); border-radius: 7px;
  padding: 4px 8px; font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  text-transform: none; letter-spacing: .02em;
}
.mono-chip.alt { background: #1E2A38; color: #fff; }
.mono-chip.hard { background: rgba(242,176,30,.18); color: #C98A0A; }

/* 페이지네이션 */
.pg-btn {
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px;
  box-shadow: none; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
}
.pg-btn:hover:not(:disabled) { transform: none; background: var(--paper); box-shadow: var(--shadow-sm); }
.pg-btn.active { background: #1E2A38; color: #fff; border-color: transparent; box-shadow: none; }
:root[data-theme="dark"] .pg-btn.active { background: #EAF0FA; color: #141C2E; }
.pg-gap { font-family: var(--font-sans); color: var(--muted); }

/* 우측 패널 */
.side-panel { gap: 16px; }
.mascot-frame {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 18px;
  box-shadow: var(--shadow); background-image: none;
}
.side-info, .side-sec {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 18px;
  box-shadow: var(--shadow);
}
.side-info-head {
  font-family: var(--font-sans); font-size: 13px; font-weight: 800;
  text-transform: none; color: var(--ink); border-bottom: 1px solid var(--divider);
}
.side-sec-head {
  font-family: var(--font-sans); font-size: 13px; font-weight: 800;
  text-transform: none; color: var(--ink); background: transparent;
  border-bottom: 1px solid var(--divider);
}
:root[data-theme="dark"] .side-sec-head { color: var(--ink); }
.side-info p { color: var(--muted); }
.side-info b { color: var(--ink); }
.star-notice { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px; }
.star-notice i { color: #C98A0A; }
.star-notice span { color: var(--muted); }
.pf-songs li + li { border-top: 1px solid var(--divider); }
.pf-song:hover { background: var(--paper-soft); }
.pf-song-text b { color: var(--ink); }
.pf-song-text em { color: var(--muted); }
.pf-month { color: var(--muted); font-family: var(--font-sans); }
.pf-empty { color: var(--muted); }
.pf-count { background: var(--chip-count-bg); color: var(--ink); font-family: var(--font-sans); }

/* 상세 창 */
.sheet-overlay { background: var(--overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 20px;
  box-shadow: var(--shadow);
}
.sheet-close {
  background: var(--paper-soft); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: none;
}
.sheet-close:hover { background: var(--paper); color: var(--ink); }
.sheet-hero { border-bottom: 1px solid var(--card-brd); }
.sheet-tag {
  border: 0; border-radius: 8px; box-shadow: none; background: rgba(255,255,255,.85);
  color: var(--ink); font-family: var(--font-sans); font-weight: 700; text-transform: none;
}
.sheet-genre {
  border: 0; border-radius: 7px; background: var(--tag-bg); color: var(--tag-fg);
  font-family: var(--font-sans); font-weight: 700; text-transform: none;
}
.sheet-title { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.03em; }
.sheet-artist { color: var(--muted); }
.stat { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px; }
.stat .k { color: var(--muted); font-family: var(--font-sans); text-transform: none; }
.stat .v { font-family: var(--font-sans); font-weight: 800; color: var(--ink); }
.media-btn {
  border: 1px solid var(--line); background: var(--paper-soft); border-radius: 999px;
  box-shadow: none; font-family: var(--font-sans); font-weight: 700; text-transform: none;
}
.media-btn:hover { transform: none; box-shadow: var(--shadow-sm); }
.media-btn.yt:hover { background: #E54524; color: #fff; }
.media-btn.ly:hover { background: var(--duet); color: #fff; }
.lyric-box { background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-soft); }
.media-hint { color: var(--muted); }
.sheet-memo { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px; }
.sheet-memo .memo-label { color: var(--muted); border-bottom: 1px solid var(--divider); font-family: var(--font-sans); text-transform: none; }
.sheet-memo p { color: var(--ink-soft); }

/* 프로필 */
.pf-hero {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 20px;
  box-shadow: var(--shadow); background-image: none;
}
.pf-chip {
  background: #1E2A38; color: #fff; border: 0; border-radius: 999px; box-shadow: none;
  font-family: var(--font-sans); text-transform: none;
}
:root[data-theme="dark"] .pf-chip { background: #EAF0FA; color: #141C2E; }
.pf-name { font-family: var(--font-sans); font-weight: 800; color: var(--ink); text-shadow: none; }
.pf-tagline { color: var(--muted); }
.pf-tag {
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-sans); text-transform: none; color: var(--ink);
}
.pf-tag.sky { background: var(--duet); color: #fff; }
.pf-tag.mint { background: var(--green); color: #fff; }
.pf-tag.rose { background: var(--rose); color: #fff; }
.pf-link {
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: none; font-family: var(--font-sans); text-transform: none;
}
.pf-link:hover { transform: none; box-shadow: var(--shadow-sm); }
.pf-link.yt:hover { background: #E54524; color: #fff; }
.pf-link.soop:hover { background: var(--duet); color: #fff; }
.pf-card { background: var(--paper); border: 1px solid var(--card-brd); border-radius: 16px; box-shadow: var(--shadow-sm); }
.pf-card-head {
  background: transparent; color: var(--ink); border-bottom: 1px solid var(--divider);
  font-family: var(--font-sans); font-size: 13px; font-weight: 800; text-transform: none;
}
:root[data-theme="dark"] .pf-card-head { color: var(--ink); }
.pf-basic li + li { border-top: 1px solid var(--divider); }
.pf-basic-k { font-family: var(--font-sans); color: var(--muted); text-transform: none; }
.pf-basic-v { color: var(--ink); }
.pf-list li::before { background: var(--duet); border: 0; border-radius: 50%; }
.pf-tier-ico { background: var(--paper-soft); border: 1px solid var(--line); box-shadow: none; }
.pf-tier-m { font-family: var(--font-sans); text-transform: none; }
.pf-stat { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px; }
.pf-stat .k { color: var(--muted); }
.pf-stat .v { font-family: var(--font-sans); font-weight: 800; }
.pf-bar { background: var(--paper-soft); border: 1px solid var(--line); }
.pf-bar-fill { background: var(--duet); }
.pf-top-list li { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 10px; }
.pf-top-r { background: #1E2A38; color: #fff; border: 0; font-family: var(--font-sans); }
.pf-top-c { font-family: var(--font-sans); color: var(--muted); }
.pf-top-h { font-family: var(--font-sans); text-transform: none; color: var(--muted); }

/* 유튜브 */
.yt-head {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 18px;
  box-shadow: var(--shadow-sm); background-image: none;
}
.yt-title { font-family: var(--font-sans); font-weight: 800; color: var(--ink); text-shadow: none; }
.yt-head-ico { color: #E54524; }
.yt-handle { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-family: var(--font-sans); text-transform: none; }
.yt-golink {
  background: #1E2A38; color: #fff; border: 0; border-radius: 999px; box-shadow: none;
  font-family: var(--font-sans); text-transform: none;
}
:root[data-theme="dark"] .yt-golink { background: #EAF0FA; color: #141C2E; }
.yt-golink:hover { transform: none; background: #16202B; }
.yt-frame { border: 1px solid var(--card-brd); border-radius: 16px; box-shadow: var(--shadow); }
.yt-item { background: var(--paper); border: 1px solid var(--card-brd); border-radius: 16px; box-shadow: var(--shadow-sm); }
.yt-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.yt-item.active { background: var(--paper-soft); box-shadow: var(--shadow-sm); }
.yt-item img { border-bottom: 1px solid var(--card-brd); }
.yt-item-t { color: var(--ink); }
.yt-item-d { color: var(--muted); font-family: var(--font-sans); }
.yt-hint { color: var(--muted); }

/* 오늘 부른 곡 */
.today-head { background: var(--paper); border: 1px solid var(--card-brd); border-radius: 16px; box-shadow: var(--shadow-sm); }
.today-head-ico { color: var(--duet); }
.today-title { font-family: var(--font-sans); font-weight: 800; }
.today-date { color: var(--muted); }
.today-stat { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-sans); text-transform: none; }
.today-item { background: var(--paper); border: 1px solid var(--card-brd); border-radius: 14px; box-shadow: var(--shadow-sm); }
.today-item:hover { transform: none; box-shadow: var(--shadow); }
.today-at { font-family: var(--font-sans); color: var(--duet); }
.today-text b { color: var(--ink); }
.today-text em { color: var(--muted); }
.today-tabs button, .today-btn { font-family: var(--font-sans); }
.today-note { border-radius: 12px; }

/* 빈 상태 */
.empty .empty-t { font-family: var(--font-sans); font-weight: 800; color: var(--ink); }
.empty .empty-s { color: var(--muted); }

/* 찜 관리 · 팝업 · 토스트 (index.html 인라인 스타일 보정) */
.fav-overlay { background: var(--overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fav-box {
  background: var(--paper); border: 1px solid var(--card-brd); border-radius: 22px;
  box-shadow: var(--shadow);
}
.fav-head b { font-family: var(--font-sans); font-weight: 800; }
.fav-x { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 9px; box-shadow: none; }
.fav-note { color: var(--ink-soft); }
.fav-paste textarea { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 12px; }
.fav-msg { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 10px; }
.popup-card { background: var(--paper); border: 1px solid var(--card-brd); border-radius: 20px; box-shadow: var(--shadow); }
.popup-x { background: var(--paper-soft); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; box-shadow: none; }
.popup-t { font-family: var(--font-sans); font-weight: 800; }
.popup-btn { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; font-family: var(--font-sans); }
.popup-btn.ghost { background: var(--paper-soft); }
.popup-btn.primary { background: #1E2A38; color: #fff; }
.sw-toast { background: #1E2A38; color: #fff; border: 0; box-shadow: var(--shadow); font-family: var(--font-sans); }
.sw-toast-btn { border: 0; background: #EAF0FA; color: #141C2E; box-shadow: none; font-family: var(--font-sans); }

/* 신청곡 */
.req-add { background: #1E2A38; }
.req-queued { color: #E54524; }
.sel-random select { min-width: 132px; }

/* ══════════════════════════════════════════════════════════════════════════
   반응형 — 좁은 화면에서는 사이드바가 위쪽 가로 메뉴로 돌아갑니다
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .main-grid { grid-template-columns: minmax(0,1fr); }
  .side-panel { position: static; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 54px 16px 18px; }
  .hero {
    grid-column: 1; position: static;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 16px;
  }
  .hero .brand {
    order: 0; flex: 1 1 220px; margin: 0; padding: 0; border-bottom: 0;
  }
  .brand-home { gap: 8px; }
  .brand-home svg { width: 28px; height: 28px; }
  .brand-title { font-size: 17px; }
  .brand-sub, .brand-meta { display: none; }
  .topnav { flex-direction: row; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; }
  .nav-btn { width: auto; padding: 9px 12px; }
  .nav-theme { margin-top: 0; }
  .main-grid { grid-column: 1; }
}
@media (max-width: 820px) {
  .app { width: calc(100% - 20px); margin: 14px auto 30px; padding: 50px 14px 16px; }
  .app::before { background-image:
    radial-gradient(circle 5px at 26px 50%, #FF5F57 98%, transparent 100%),
    radial-gradient(circle 5px at 46px 50%, #FEBC2E 98%, transparent 100%),
    radial-gradient(circle 5px at 66px 50%, #28C840 98%, transparent 100%); }
  .app::after { left: 84px; right: 14px; font-size: 11.5px; padding: 0 14px; }
  .shell { padding: 4px 2px 0; }
  .song-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
}

/* ── 계절 전환 바 · 찜 하트 — 새 디자인 보정 ── */
.season-bar {
  background: var(--paper); border: 1px solid var(--card-brd); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.season-btn {
  border: 1px solid var(--line); background: var(--paper-soft); color: var(--ink-soft);
  font-family: var(--font-sans);
}
.season-btn.on { background: #1E2A38; color: #fff; box-shadow: none; transform: none; }
:root[data-theme="dark"] .season-btn.on { background: #EAF0FA; color: #141C2E; }
.season-toggle {
  border: 1px solid var(--line); background: var(--paper-soft); font-family: var(--font-sans);
}


/* ── 숲(SOOP) 로고 — 새 마크(∞), 테마 색(currentColor)을 따라갑니다 ── */
.nav-btn.nav-soop .soop-ico,
.pf-link.soop .soop-ico { display: none; }
.nav-btn.nav-soop::before,
.pf-link.soop::before {
  content: ""; flex: 0 0 auto; background: currentColor; opacity: .92;
  -webkit-mask: url("data:image/png;base64,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") center/contain no-repeat;
  mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAABmCAYAAABiO7sWAAAXq0lEQVR42u2deZxcVZXHv+9VpbsDCQkkIQTCFoEAgREQwVG2BGQbcEZwjMAEBcaPIC4on3FAR1BE4yiDBAcFRkWUYRgW2RGNwxJECIwgO2QQGcKSBQh70t1V9eaPc868289X3VXddV+9Ws7nU5/ururu9965v3v2c24QRRE5owCInO9xfnZpIrCFfhZU+V/22WPDXKvgXLNc5Vp5480k/f71BL+ixM8uzanjOgPA/1T5bDywPrBGrxPliWfFHC3STOAVfe8Q4FfAO8CHgduAvwQ+rkCuANvpqwKEIwB6KbBKf+9Z4Cb930uAUgpPDNx5paJuxDQwRcDmCuAIOEZ/3neYjZ/k1zrgv/Tnd4BLlc+Lga2BpxP8KernlaaDqQkSOtCXATHUHT8LeFClz7uBA4F9gGkK4s083MuTwBXAq8BK4KqEdjgCuF0/D3IiiQoJME3Q965RoVABNlU+Npr+CKwFLgQeBpYBb+h7OJusMoJ2bStAV1uYDwCfAw5SqTkl8fvllI0R1nitNGkbpkis+4F7VRLd6NxnkANzJExI5FnAIuC9QC8weYRnLtRxraiKtE3+jxeAW9X8uNgxU9I2fyYCIUtAm2SeqtL2ZZW+uwIfAT6YYFjJ+RvqAG895KrJMHGN3wJnq+njqtasgG33sjuwAfCQSuO9gb8B5iZAHCW0S+CJX/Y1aa6aafJ94Ald57JK8MzMNx+ArrY7C469agBeoE6GC+JCwiHMkioJUwhdnKuAfwVWV9EuvjXYdsDBwN8CeyXuN2gSv6KEJjCAvw08B5ynptrVqkFmKS+9SuosJHTo7OzZwBeB+Y6NVx6FSsyCygmzZpWC+iLHwQyc32uUvRgoOAZVCs9Rx3ieA+KoisnUTDIzxdbxLTVB/hn4hd5vybn/lgB0oDvxGUc9V4D11MH7KTA9IY0D8k2VhIpdAXwKuKHB0tp1lgE+BHwd2CVhUoQ551fafd6sNnajeZaJhJ6ExEeNzlObb8sWA3LaQpUdYN8F/AtwvdqLfcDzo1Sp7t8cC7wPOCnnGqxWYEd67/0aHflH/T7EQ5ivkYAu6Ou9wFPAV4CtFMy2MGELAnkk1XoGcK2q14pu2HqYWtS/6VOf4iu6+UspjmqrUtnh11PA8cDvnGdrWHKmEYBOSqQZwJHq7abZou1CFu0oIgmaw4A3nWct18A3c5TXR5I9+zlarNhm/EoKgsuRpI+X0FAjvN1j1Bs/QsHc7+zMdgOzaSTzE/ZBkjTHqEdfdp55fZW+aXwrIRm8WxXMg84maTeyDWw+ydFINnIWsIN+NhHoaZaENidmEpIq3Rr4NnB4QsV0AtnzRkgsdjFwpS7cZsqfVxLarAcJXV7rOEmdyLNngeOAO4BtkfzEmoRpGvkGtBummqhmxo+QoH+nLYwbDTGt93vgE8Djwzg+31QHKUyo4k4iM60eV2H487E6i2OR0AUkRrqNRjI2Z/jKt06gCKlU60VqQOY5ZskeuvH/F9hNBQBdng0pLjseuES11wCSGZ2qUrym6NFobdtNdJEGHTCXOnxhTHP1Ki/mqtlRUi02AbhTgf1vjr3c6TwzB7oM/ETNjwHlmZkgNYdCRyuh340kGH6J1GJ0qplRizq9GfgykvY9Ecmc9SVMty4NjYIcp77IOAW3N5Mj1EWaD5wG7NimIaZGOz5LgR8imdKumVEbqP8CiVmH6lQ3HNBWY1BB6mBnqdoc112HmkBNF8w18ytA6q1PQqoMB6gxVV6PDR0qgP8JCUWVumCu2Xl208BdMI/ML5AalgvVQay57qNWCW2hlAVq2wTdxemSZzLtfyVSDAZSIxSNVUKbmXEg8DPilG8XzF3ySeYQflQBPR7paiqOVkK7heMV4G5gz4Ra6FKXfDuJJaRp4H1IWbLbZRTVI6Hd0r9LgPfnDMzlOl9Rh4OjMgqeNZusvGIy0lwRJbBZk4Q2+3iafv91FfnNLi63nTmWWuqys5Hb3WRyQ2DRGHkWJrR2s+zpzwAXIBnXEtLiVa4F0Ggkow9JnszCX+NlLUBO0yZ3IB0QTzr3W0BSywHSyj8A/DVS8TYXyeIlF6odgZ2W6LofGdVwL/AAQ2smJiA12I8BRyGZ4I2A96SsRdikzVlG4tF7KZALSENFqRYb2h72NJXQxSY8SLJ+9iGkE/tCfYgnR/j7acDGxFOTtgD2V4Ycqotmi98u9doukCOkm+ZK4A9IA0Kpxv8TqkDoQQqoPoxUVfY0URBYAu8/kNLTHdQUucfdnGmAtoXdUX95QhOiGm728UFgoUrjCcTTlaox1UymDVTDrFIPeQrwGjKBqaCgXoDUDDRT+jRSk1ldxDXAucBy/exFVdnbqSCoVhth749X8O6BdLrPRJJpi5CS12bxy4TcLMXIGpXa0XAS2iqdvonUIAwwxqLrOm/YGPu62kyXM7ScMEyYIrVKnHEK3r2BR9U0mYUUwHwX6UiPmmwrjsW3KOqaPaxSGTWxBuvglysMJiIdOG84n2+qobNTnCBBlsLOtOkPgLN0swXDAdpUbwFpPT+U7Gp1TSpXgO/p6wX9rOgY//VEK2qt0toJKefcNcPN22hNdppq1CXDbPrRNvCGDqB6kM79/RVY48muOM3Nts5GRpNZWDlKA7QB54vAORneqKmvfuBk4MdOiLCR4SNbHJcxLkOedJzhvHemG5ifUjv3en1/f6S1aax8SgoP49V0fX8FcAtS892boQliNvxVSJHciGE7c8B2zihUZ5vmWqTjeZkDMt/TLE1iTVenZwJSuviZjE2t0fLsXOA7Gr0w7baJ2sy+qaj8moFUEe6REc9MEL2g5uNa/fklIHABHaiduRkyc2LTDOxJkzK/U9usmWSe8lTg80gRVt6qCd0hLgvVxzFwlTK6hzTpPUOl9S5kU05sG/pstSR61fkPkgHzycCpxKNrA883VURalT6rUYhiE9W8+QovI1N+vkVcTxDlCNAgyYUvE4dTSymA872pzCS02uWPIGPSivjPMto97KuO6yp73yS03cQngW8gQXWfNqQNGVyK9JGZmVHKAWgCtaHXAh9D4p4VmpdYMrKWrRuRiU2/J54V12wyX6cX+G+k1zSrYMJsZAA7QCU5ueZZJBnh2yGy6UIXqf2XFzAbL9YqD25C4t9hk4Fjps/Nat8/kzPNYSZAv0Y+cJxvnzwBmcz1/w5p6FwcNewjz+AqqeNwLjI9f02OwOxK6YqGpI5V9V5wpGSWNKBgvkJt+xUqBCBfBVdmQv4QmZzlm1ehA+gZyTcjZdounlWrJQAeUadrHfkk01irkQE6C5FA/jjiiapZkG3+R5F2pOXkN5xotvzhyJD4HxGPG/Zl5kSK2V3NWQ4T6v5A55d9hVteRspRNyf/GbkAGYKyM/A1tfnNEfPp+LjZv58j6ebXHFs1yqkQAOlu3wYZB/eSZ3NtULXoxqYhbLpliMxnM+fQ13EGgUqb7yGVUhH5rlO2wTGP6L2fjMR9TVKWPNx/2VmTc5G4+IoMNlGjAP00kn5/EqnD8Sm0TPAebLwLnR20PXEa08fDhups3aDe8Dpah8ymfgzJyh2MDI0pOmq1Mkb+mOQt6IY5BUk0bUh+TuCqlVdWPnEEUunnS0rbZtk9GeXYCTmBymxpX+bGXUg9bisO70Y3oc1iOxLpojBp7Xr10QgLGDmbwDSi2cbfR6b3L0Iyca0E5uSzV9QE8a2JzXEmiKJoBzWsz0Gygz6rp7ZVAJRzGNmo1wHqQ05+moyM9pqD1Oi6/HNPdh2Op/1IhdzFSM13r3OdQK/TijwCyQAv8RxdCdRkvjuIosgOvnwAeBf+6jfKSI31shaUOtXIUs77EZejXoCUX65GMmhpfHgVSUAsUZuzF6mfeVN9i3Ib8Mat0ntAeeGj2M3+56eAi62gZR/1TH1e8HGkaKZAPrJbjSAbULlEN+ifkO6O1Ugd8bv486q+OUih/UJVk4MJJ6fcJrwxgdUHXKeA9inEjjBAmw0SedypAL9uI8mcXLjIUbNPOJ89kfL7zxCXFgwyNO5fbiO+uJWMdyaw4IP6XTvHZ4+YLfY1xGeQtOtIgYrDS1O5ydcAEoYrO7zIxcHvngIBz5BNGe6Q1Peg54uVkbMKO2HaUsWR2pWUFzTpYPcmkMXUFyNxaZ/mZskF9DSPi1tAuirubEO1Olat1e5kfsPu6kD7fO5JQK8BekEGzlOpi+OOo8AxB6bjJyRsQYy5wDaj6aAey4N1qbPIyh3uQfIPPktKI5xMYaXL+y55FGYBcZ+jz2hawQC9Xtdm7JLHtd8Jf7U7JoyXAs8aoO/3/FBFuuewdDI9iiSTfJifJixfAN4yQF/n6UGs5HE2ko2M6JzZ0l2/YSjofFdX9gCBSc33e76YZcU6bRHDYWzKTppZvVUGG7wCRMbwzTJg7p4dILWsrX9DZCxDWmLFKg0j5/eDNuZHpBp6O/xOVxqH889vwX/qe3+aPzTd58KZ1LVm0V2RclJ77ahf5yPDId0TVKMUYLcDyAPHAujFbzRttTlr1jf3HH7O63aP6doUCd+0Sz1HwZG6AAchYwbKyDzqXYf523lIHXUv8O9IryVIxGltG5kjQQYmbYQcaEUQRZGB62GkGdSHWrAS0jOQo4ErtH6Bv1tldwgy4PKAFEYnN6/VeLhRn5XIOdePKrBfVImzKqHlWlE6b4LUcWyAn0yhYetw4CYXuEXPD1cGPoGMb2rVs8EDRypHysTb1GQ7gKEH81QYepKYW4FXTPzudOB04DIFwOvIjL1Wta8Dx37+oIK5gp+QXagC4GF0tl2gzHvQozSw68xEOjuiFpQ6Jmmt8+YupOF3ruPwhY6jF9bAk4Kz8Ga2XKqvaS2sxUwL9QBfxW+6O0COfXvOmFpB+uIWq+0Werx4jzpEe7SY42P3OR05SGcxclZLiaFjB8Yq0aw6ba5K/qMY+8lfWdNEjWpUgL8j7oQKPWEKZM5fgDNo5mmVCiWPDlvoLNZETyrIl+NnEvci4D51bi2aUfDAJzNZLkcG3JRbCNTrkAaGccjIB5+RLYsQ3WGRIrdjZT3iQ2Z8ADpwdvA5SGNuXo9YDhLgmgCcjxwRF+B/sqZtoEHgTAV1ybmnPFNFfYDzySb2XFLzD6Bk3npB7ZBrEvacDyldQkJ4X1ITZFwOF8VtbN0EGaz9aeJsZ5jRprJJVmciDRITcq7ZrMl3a+AEzxvfWtiWIr2bIU75qAH4F8ST/H2GvCrIWXPbID12eZM6GyqYZiCDX07WjTguYzCZbV1CamHORGab5FEI2LpOUlPJ9z2auXGffi26ksZMjD8glXe+pTQK5guRDuiAfITxDKx7qzQ+C5lM309zqwVt/sepyPEdAzT3tIPhnP5fIQfNlz0LKhMut7pCOXScwCkafTgL/5k82817IQNWjiQ+eapAcyS2gWMCMuzlKCfK0JsDwBR1k01GRhGXciIExjka7QKkZmfQ872Z2fU8Mm+wR98bApxB9d7XIVmqMANQl5HY9PkKJDcp0QwJEyFTkKYimbu+nKl1i6qcjgw/LzVRALjOaw+SKT3BMc18O54gw3osoBHhgDZAJv38BpmjcDfZHMNg9uF04GrgMI0k7Ej187cbrWbtOpvpwqxWtdlL/oqpzFFdDzhPTbapIzhfgcfNVdZNfwLwbRWKxYz40I+E655HZmcPsWftoQ9FzllZSHYhNWPMXsj5HNshcUy7v+Q9RmNkRFokwZJLl6pNVia/IUXjQQmd56Y2f7mK0xo1GEgWDy8hA/JvQ45kzkIym61cQJpSHk9uIDsFy2zmrYmn3dyPzFPIamHtRtcCfw/8p+OY2v31KdPeHOViuOE49zi09ygwdqO1yGK865ACqTsSgipU32hlA6MtJoQWqFkG2ZxN6JqFLyG1M8sSJkjqWd82QHBLBTYZSio3CL8UCZg/qGEgO8JihoZqglGYRDOUGW54bj+kfHM8+Ti+bbSCoIwcX7EIGRr5uppQm+vP9dbPBA4e+vW9TRVIn9fNX0lsIN9kp4F9B8lCJoddVj0a2abc3K7qLKsdmAbsN5AjLH5AXE7p3mMt1IdkKOfoJp2iQP4C8UzsVm4+cLXoi2o2LVT7cp3jr9TDf5e3n1QeHkZ8Dk+lCfyKHI36UFI6DwfogjpFJ6qxHzYhRGRMteveh0wwfRg5uLxe2luf6R+QksYgIeHagdxnWYUc0nm/8u1Pdfo1M5HyhGOQJNiWzjWCJoDZhOrlek+px0GnAdo9JnmKhmNOauLCp0nPe9Sz/Q1O2hOZEbwEKZK39+YhcyFmEbfSN3NhmsGvd5Qvj6jWTYtgmY8xX02zjYjPLjF136wQoYF0BdLG9kY1h7eahHZpuoJmUpPtS7fmOByjFAtp/4bdiKHnt4xFMoZN3vgmTC9Sq6FqSHk4QFtnxu76T47PkXoeTVq+HaVxPeAeTU4hD2ttjvpy5ESEynAObjVAu2G8dWpLXeF4tgW61KVspfNeSMJv2GM7ajE57B8cgZSXdorK7lLzyRzBXyJJv1RH0KVaVLAh/mWklLKf1uwJ7FJrSubHkYxoTSfpjgRoMz0mIUmIq4Fvkf9jevNGNrahKwRqt/kLwFtIIqfmTqpaTA7Uhu4DXtGfr0OKiLJOuLSypOlS7WAGCTUeiNR/13zcXa1e/9sK5qL+zdeQ+oCA7lETtarNbyCx3EpXUg8LZst6HlQvmOsBtJkf9o9fRYrMC8TVcl0aSpaIuAkp5DkD+DFxUVQX1H8OZsszHI2UKGxCHEuvDaQ1mhzuBqggqeM3kAzcXyGnp3bNj6FgHoek6Ocjk4O2QEZizUeKiCJHUHQ1mVAByXdcUktEoxGATqNepF7A11y8VpMyg0iV25XAxxKS2JzsS4Fjyb5aLa8Osz3/ccBPSami82FyJP/OLS2ch8SoO22Qd5r914N0zx+jP++B1JCYJN4Z+LhquUpCQnWiJgs1irFgrGAeC6ArjjQKkRj1iRr9sELwcodJGdvMX0XKUqcStwoNEhcMPYKMJHgM+BBxrUW5wzZ/RcG7FilPvUyFwZhOemiEyWGqdBLSXv9ZpOSUDrGrLZIxgIw8uDHFJKsQH1QfARvrz2uQaaxnE8/KK3bA5jdB+mukO2n5aG1mX4BO0sEaBfkAcWdy0IZANkfmEeBzSAtUjyORRyJbxPWAm5GmA6uSK7bx5n9NtfkX9PnfoUHZ50Y7IyEytf5WjX5cTzwQpV1CVZGzMAXVSPOA3+rzD9TwnEFCg61F4q6nO++NtkIur/wywfaUmhjHER/317Dn9CWhXfVxoqrUKc4itqLENoBZ1u8uZDTwjQ0SBBUk7jpNefZpR0W3aiQk2WB9FTJid8CX3+AD0G53tTmIhyDTkY5GmlFN/bRC1Z41FpgJsEIBd71jcjQi+2d82x6JV5+okmy3FgS22z73NhJ3vwHpA3zRiWQ0YjRFJhI6Ka3XR7qQZyM9fccSz3DII7AjJ3JhAFqpC3MOcdq/0UVa7vUsA3sY0uW8bQIseeOZu6lNi70EfFTNseTG9UJZABrnIW3x5yBzMHYhPmc8SnjAQRNAnHagzxNIleEifX8lEkt+RqVPFjRXAX0K0lOHY74ZsIMmbnwXxCAjKL6LnHQwVbVafxZ+QVaADhJSxYC9vUYHjlUpTspi+VSz1UD8OtJlvkijD8lnsUHbFc88s6/udb6k0ZA9kUbWZNTFd6uZ2wLl8uxRpGn5bY1wNYWylNBJJ8gN02ylDtGpSAZtUpUQWfJUqXpDRmlaw2gQGSd8C/HxHMsT6r+h9l6d2i35DJurnX0AMmJgehXJmfas9UpfqmyWV3XD34mMF1ibMDXLjG4gUMsB2gV2kFioyUjo7yDk2LQ+ZASBD1qpr8uQNp/n1ASy2Xo7A39E4qR5oSS4Z6pJUkAyj9snzJJG0zLlyXXAvRq9un2YjdcREjoN2CS8eaMeJM47GwnEr0HmRkynvrl7t6s6XE6cor+PuGnBJNB4pDE4crzxPMbPQ0fTFYnHdYFkHSfo90erNN+3Rl4ZT9cQx9YXI/HjAWQ4o0sTdcPnos47L4BOU2tpzQNTkLacjfRVD6AfG+Z6Fnpr5URGkeFb/OfUYWoEyEDM50bYTLlr7vg/jSdRgKpbVHIAAAAASUVORK5CYII=") center/contain no-repeat;
}
.nav-btn.nav-soop::before { width: 22px; height: 12px; }
.pf-link.soop::before { width: 24px; height: 13px; }


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-3 — 표시 문제 수정 (2026-10)
   1) 노래 카드 상세 창 : 화면이 낮아도 하단 버튼까지 스크롤로 닿게
   2) 활성 버튼·알약 : 라이트/다크 양쪽에서 글씨가 보이게
   3) 다크 모드에서 버튼 뒤로 비치던 밝은(하얀) 배경 정리
   4) 좌측 사이드바 탭 배경 정리
   ──────────────────────────────────────────────────────────────────────────
   원인 : 이 파일 위쪽에서 --yellow 를 「활성 알약 색(짙은 네이비/밝은 색)」으로
   바꾸면서, 예전 규칙들의 「var(--yellow) 배경 + 어두운 글씨」 조합이
   라이트에서는 네이비 배경 + 어두운 글씨, 다크에서는 밝은 배경 + 밝은 글씨가
   되어 글씨가 배경과 같아졌습니다. 아래에서 그 조합만 골라 바로잡습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 토큰 : 사이드바 탭 전용 색 (라이트 / 다크) ───────────────────────── */
body {
  --side-tab-bg:    rgba(255,255,255,.55);
  --side-tab-brd:   rgba(28,37,48,.07);
  --side-tab-hover: #FFFFFF;
  --side-tab-on:    #FFFFFF;
}
:root[data-theme="dark"] body {
  --side-tab-bg:    rgba(255,255,255,.05);
  --side-tab-brd:   rgba(255,255,255,.09);
  --side-tab-hover: rgba(255,255,255,.09);
  --side-tab-on:    rgba(255,255,255,.14);
}

/* ── 0) 좌측 사이드바 탭 배경 ─────────────────────────────────────────── */
.nav-btn {
  background: var(--side-tab-bg);
  border: 1px solid var(--side-tab-brd);
}
.nav-btn:hover { background: var(--side-tab-hover); color: var(--ink); }
.nav-btn.nav-active { background: var(--side-tab-on); color: var(--ink); border-color: transparent; }
/* style.css 의 다크 전용 테두리 규칙이 더 세므로 같은 세기로 다시 지정 */
:root[data-theme="dark"] .nav-btn:not(:hover):not(.nav-active) {
  color: var(--muted);
  border-color: var(--side-tab-brd);
}

/* ── 1) 상세 창 : 어떤 화면 높이에서도 스크롤 가능 ───────────────────── */
.sheet-overlay {
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet {
  margin: auto;                                   /* 여유가 있으면 가운데, 넘치면 맨 위부터 */
  max-height: calc(100dvh - 2 * var(--s3));       /* 모바일 주소창 높이까지 반영(dvh) */
  overflow-y: auto; overscroll-behavior: contain;
}
@supports not (height: 100dvh) {
  .sheet { max-height: min(88vh, 880px); }
}
.sheet-actions { flex-wrap: wrap; }
.sheet-actions .btn-primary { flex: 1 1 auto; min-width: 116px; }

/* ── 2·3) 활성 알약·닫기 버튼 : 라이트=짙은 네이비+흰 글씨 / 다크=밝은 색+어두운 글씨 */
.today-tab.active, .rec-period.active, .clip-x, .req-status.wait {
  background: #1E2A38; color: #fff; border-color: transparent;
}
:root[data-theme="dark"] .today-tab.active,
:root[data-theme="dark"] .rec-period.active,
:root[data-theme="dark"] .clip-x,
:root[data-theme="dark"] .req-status.wait { background: #EAF0FA; color: #141C2E; }

.rec-rank-n.top { background: #1E2A38; color: #fff; }
:root[data-theme="dark"] .rec-rank-n.top { background: #EAF0FA; color: #141C2E; }

/* 가사·검색어 하이라이트 : 배경색이 배경을 따라가므로 글씨색은 그대로 상속 */
.suggest-item mark.hl, .ch-ls-line mark { background: rgba(242,176,30,.38); color: inherit; }

/* ── 파스텔 버튼 : 라이트/다크 공통 토큰으로 (다크에서 하얗게 뜨지 않게) ── */
.today-btn.book, .clip-btn, .clip-btn.ghost, .pf-top-r, .yt-handle {
  background: var(--tag-bg); color: var(--tag-fg); border-color: transparent;
}
.clip-btn.ghost { background: var(--paper); color: var(--ink); }
.today-btn.clip { background: rgba(232,112,147,.18); color: #C1466A; border-color: transparent; }
:root[data-theme="dark"] .today-btn.clip { color: #F4A8C0; }

/* 호버 : 노란색(var(--yellow)) 대신 테마 표면색으로 */
.today-btn:hover, .ch-stage-tools button:hover, .yt-golink:hover,
.rec-none-chip:hover, .searchbar .clr:hover {
  background: var(--paper-soft); color: var(--ink);
}

/* ── 다크에서 흰 덩어리로 보이던 배지 ─────────────────────────────────── */
:root[data-theme="dark"] .sheet-tag { background: rgba(20,30,48,.78); color: #EEF3FB; }
:root[data-theme="dark"] .mono-chip.alt { background: rgba(255,255,255,.16); color: var(--ink); }

/* ── index.html 인라인 스타일(시작 팝업 · 새 버전 안내 · 공유 버튼) 보정 ──
   인라인 <style> 이 이 파일보다 뒤에 오므로 :root 를 붙여 세기를 올립니다. */
:root .popup-x, :root .popup-btn.primary, :root .sw-toast-btn { background: #1E2A38; color: #fff; }
:root[data-theme="dark"] .popup-x,
:root[data-theme="dark"] .popup-btn.primary,
:root[data-theme="dark"] .sw-toast-btn { background: #EAF0FA; color: #141C2E; }
:root .sw-toast { background: #1E2A38; color: #fff; }
:root[data-theme="dark"] .sw-toast { background: #EAF0FA; color: #141C2E; }
/* 상세 창 「공유」 버튼 : 인라인 규칙이 배경만 밝게 덮어 흰 글씨가 안 보이던 문제 */
:root .share-btn { background: var(--paper-soft); color: var(--ink); border: 1px solid var(--line); }


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-4 — 상세 창 장식 배너 삭제 · 「어려운 노래」 배지를 곡명 위로
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) 상세 창 : 체크무늬 장식 배너(음표 아이콘) 삭제 ────────────────────
   · 배지(어려운 노래 · 듀엣곡)는 남아야 하므로 배너는 「배지 줄」로 바꿉니다.
   · 배지가 없는 곡은 배너 줄 자체를 숨겨 위쪽 여백이 남지 않게 합니다. */
.sheet-hero {
  aspect-ratio: auto; height: auto; min-height: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-start;
  padding: 12px 54px 0 14px;          /* 오른쪽은 닫기(✕) 버튼 자리만큼 비움 */
  border-bottom: 0;
  background-color: transparent !important;
  background-image: none !important;
}
.sheet-hero .sheet-note { display: none; }        /* 음표 아이콘 삭제 */
.sheet-hero:not(:has(.sheet-tag)) { display: none; }   /* 배지 없으면 줄도 삭제 */
.sheet-tag, .sheet-tag.duet {                      /* 배지를 흐름 안으로(왼쪽 정렬) */
  position: static; left: auto; right: auto; bottom: auto;
}
.sheet-close { top: 12px; right: 12px; }
.sheet-body { padding-top: 18px; }

/* ── 2) 곡 카드 : 「어려운 노래」 배지를 곡명 위 배지 줄로 ───────────────
   (마크업을 옮긴 뒤, 듀엣곡 배지와 같은 모양으로 맞춥니다) */
.song-flag { flex-wrap: wrap; gap: 5px; row-gap: 4px; }
.song-flag .mono-chip.hard {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  font-size: var(--fs-micro); font-weight: 600; line-height: 1.5;
  border: 2px solid var(--ink-line); border-radius: 999px;
  background: rgba(242,176,30,.22); color: #8A6206;
  box-shadow: 1.5px 1.5px 0 var(--hard-shadow);
}
.song-flag .mono-chip.hard i { font-size: 11px; }
:root[data-theme="dark"] .song-flag .mono-chip.hard {
  background: #4A3A12; color: #FFD98A; border-color: #7A6420;
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.47-6 — 계절 선택 위젯이 우측 「최근 업데이트 곡」 카드 위에 겹치지 않게
   ──────────────────────────────────────────────────────────────────────────
   · .season-bar 는 화면 오른쪽 아래에 고정(position:fixed)되어 떠 있는 위젯이라,
     우측 칼럼(.side-panel)의 마지막 카드와 자리가 겹쳤습니다.
   · 페이지 아래 여백(body padding-bottom)만으로는 우측 칼럼 안쪽이 비지 않아
     부족했으므로, 우측 칼럼에도 위젯 높이만큼 아래 여백을 비워 둡니다.
   ══════════════════════════════════════════════════════════════════════════ */
body:has(.season-bar) .side-panel {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
/* 좁은 화면에서는 우측 칼럼이 아래로 내려가므로 같은 자리를 비워 둡니다 */
@media (max-width: 1180px) {
  body:has(.season-bar) .side-panel {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}
/* 위젯은 내용보다 위에 떠 있되, 클릭은 위젯이 우선하도록 유지 */
.season-bar { z-index: 80; }

/* ── v2.47-7 : 계절 위젯을 우측 카드 위에서 떼어냅니다 ────────────────────
   · 위젯이 화면 오른쪽 아래에 고정되어 있어, 스크롤 위치와 무관하게
     우측 칼럼의 「최근 업데이트 곡」 카드를 계속 덮었습니다.
     (아래 여백을 비켜 두는 방식으로는 고정 위젯이라 해결되지 않았습니다)
   · 넓은 화면에서는 위젯을 왼쪽 아래로 옮깁니다 — 좌측 사이드바(고정) 아래는
     늘 비어 있는 자리라 어떤 카드와도 겹치지 않습니다. */
@media (min-width: 1001px) {
  .season-bar { left: 12px; right: auto; }
  body:has(.season-bar) .side-panel { padding-bottom: 0; }   /* 우측 여백 예약 해제 */
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.47-8 — 좌측 사이드바 탭 배경·대비 점검 (다크 모드 중심)
   ──────────────────────────────────────────────────────────────────────────
   · 다크에서 사이드바 패널(--side-bg)과 탭 배경(--side-tab-bg)이 둘 다
     rgba(255,255,255,.05) 로 같아 탭 윤곽이 사라졌고, 뒤의 따뜻한 배경이
     반투명 유리로 비쳐 탭이 탁한 갈색으로 보였습니다.
   · → 다크에서는 패널에 짙은 남색 바탕을 깔아 비침을 막고,
     탭은 한 단계 밝은 표면 + 뚜렷한 테두리로 분리,
     활성 탭은 왼쪽 액센트 바로 표시합니다.
   · 라이트에서도 탭 글씨가 흐리던 것을 진하게 올렸습니다.
   ══════════════════════════════════════════════════════════════════════════ */
body {
  --side-tab-fg: #3A4757;                 /* 라이트 비활성 탭 글씨 */
}
:root[data-theme="dark"] body {
  --side-bg: rgba(9,14,26,.62);           /* 따뜻한 배경이 비쳐 탁해지던 것 방지 */
  --side-brd: rgba(255,255,255,.10);
  --side-tab-bg: rgba(255,255,255,.07);   /* 패널과 확실히 다른 밝기 */
  --side-tab-brd: rgba(255,255,255,.11);
  --side-tab-hover: rgba(255,255,255,.12);
  --side-tab-on: rgba(255,255,255,.18);
  --side-tab-fg: rgba(238,243,251,.88);
}
.nav-btn {
  color: var(--side-tab-fg);
  background: var(--side-tab-bg);
  border: 1px solid var(--side-tab-brd);
}
.nav-btn i { opacity: .8; }
.nav-btn:hover { background: var(--side-tab-hover); color: var(--ink); border-color: var(--side-tab-brd); }
.nav-btn.nav-active {
  background: var(--side-tab-on); color: var(--ink); border-color: transparent;
  box-shadow: inset 3px 0 0 var(--duet);
}
.nav-btn.nav-active i { opacity: 1; }
/* style.css 의 다크 규칙(세기 5)과 같은 세기로 맞춰 뒤에서 덮습니다 */
:root[data-theme="dark"] .nav-btn:not(:hover):not(.nav-login):not(.nav-logout) {
  color: var(--side-tab-fg); border-color: var(--side-tab-brd);
}
:root[data-theme="dark"] .nav-btn.nav-active:not(:hover):not(.nav-link) {
  color: var(--ink); border-color: transparent;
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-10 — 모바일 상단 메뉴 : 정확히 2줄로 정리
   ──────────────────────────────────────────────────────────────────────────
   전  : 항목이 폭에 따라 자연 줄바꿈되어 3 + 3 + 1 이 되고, 「다크/라이트」
         테마 버튼만 세 번째 줄에 홀로 남았습니다.
   후  : 12칸 그리드로 줄을 확정 — 1줄 3개(각 4칸) · 2줄 4개(각 3칸).
         → 홈 · 오늘 부른 곡 · 신청곡 / 프로필 · YouTube · 숲 · 다크
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .topnav {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px; flex: 1 1 100%; margin-top: 2px;
  }
  .topnav > .nav-btn {
    width: 100%; min-width: 0; justify-content: center;
    padding: 9px 6px; white-space: nowrap;
  }
  .topnav > .nav-btn:nth-child(-n+3)              { grid-column: span 4; }
  .topnav > .nav-btn:nth-child(n+4):nth-child(-n+7) { grid-column: span 3; }
  .topnav > .nav-btn:nth-child(n+8)               { grid-column: span 12; }
}
@media (max-width: 480px) {
  .topnav { gap: 5px; }
  .topnav > .nav-btn { font-size: 11.5px; padding: 9px 4px; gap: 4px; letter-spacing: -.1px; }
  .topnav > .nav-btn i { font-size: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-11 — 라이트 모드 대비 전면 점검 (버튼 · 배지 · 칩)
   ──────────────────────────────────────────────────────────────────────────
   원인 : 이 파일 위에서 --yellow 를 앰버(#F6C11B) → 짙은 네이비(#1E2A38)로
          바꾸면서, style.css 의 「background: var(--yellow) + 어두운 글씨
          (#2E2A26 / var(--ink))」 조합이 「네이비 배경 + 검은 글씨」가 되어
          대비가 1.0으로 떨어졌습니다(실측). 정적 대비 감사 결과 24개 이상의
          규칙이 4.5 미만이었고, 아래에서 라이트 모드에 한해 바로잡습니다.
   범위 : :root:not([data-theme="dark"]) — 다크 모드 값은 건드리지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. 짙은 네이비 알약/버튼 → 흰 글씨 (대비 ≈12.4) ──────────────────── */
:root:not([data-theme="dark"]) .brand-meta,
:root:not([data-theme="dark"]) .btn-random,
:root:not([data-theme="dark"]) .login-btn,
:root:not([data-theme="dark"]) .nav-login,
:root:not([data-theme="dark"]) .nav-logout,
:root:not([data-theme="dark"]) .sheet-close,
:root:not([data-theme="dark"]) .pf-card-head,
:root:not([data-theme="dark"]) .pf-chip,
:root:not([data-theme="dark"]) .pf-top-r,
:root:not([data-theme="dark"]) .yt-handle,
:root:not([data-theme="dark"]) .sheet-tag,
:root:not([data-theme="dark"]) .clip-btn,
:root:not([data-theme="dark"]) .today-btn.book,
:root:not([data-theme="dark"]) .filter-chip,
:root:not([data-theme="dark"]) .hl,
:root:not([data-theme="dark"]) .ch-ls-view,
:root:not([data-theme="dark"]) .ch-ls-line mark,
:root:not([data-theme="dark"]) .suggest-item mark.hl,
:root:not([data-theme="dark"]) .popup-x,
:root:not([data-theme="dark"]) .sw-toast-btn,
:root:not([data-theme="dark"]) .today-tab.active,
:root:not([data-theme="dark"]) .rec-period.active,
:root:not([data-theme="dark"]) .req-status.wait,
:root:not([data-theme="dark"]) .clip-x,
:root:not([data-theme="dark"]) .seg-btn.active {
  background: var(--yellow); color: #FFFFFF; border-color: transparent;
}
:root:not([data-theme="dark"]) .today-btn:hover,
:root:not([data-theme="dark"]) .ch-stage-tools button:hover {
  background: var(--yellow); color: #FFFFFF;
}

/* ── B. 옅은 배경 위 어두운 글씨가 필요했던 배지 (알파 배경 + 진한 글씨) ── */
:root:not([data-theme="dark"]) .pf-tag.mint {
  background: rgba(76,175,80,.20); color: #0E4412; border-color: rgba(76,175,80,.34);
}
:root:not([data-theme="dark"]) .pf-tag.rose {
  background: rgba(232,112,147,.20); color: #7A1B36; border-color: rgba(232,112,147,.34);
}
:root:not([data-theme="dark"]) .pf-tag.sky {
  background: rgba(63,127,222,.16); color: #17417F; border-color: rgba(63,127,222,.30);
}
:root:not([data-theme="dark"]) .sung-chip { background: #FDE3CF; color: #8F3A0A; }
:root:not([data-theme="dark"]) .mono-chip.hard,
:root:not([data-theme="dark"]) .song-flag .mono-chip.hard {
  background: rgba(242,176,30,.22); color: #6E4B02; border-color: rgba(242,176,30,.42);
}
:root:not([data-theme="dark"]) .today-btn.clip {
  background: rgba(232,112,147,.20); color: #8E2148;
}
:root:not([data-theme="dark"]) .fav-btn.on { color: #4A1024; }

/* ── C. 파랑/빨강 계열 : 밝은 글씨 대신 진한 글씨 또는 배경을 어둡게 ──── */
:root:not([data-theme="dark"]) .media-btn.ly:hover,
:root:not([data-theme="dark"]) .pf-link.soop:hover { color: #12325C; }
:root:not([data-theme="dark"]) .nav-btn.nav-yt:hover,
:root:not([data-theme="dark"]) .nav-btn.nav-yt.nav-active { color: #C0391B; }
:root:not([data-theme="dark"]) .media-btn.yt:hover,
:root:not([data-theme="dark"]) .pf-link.yt:hover,
:root:not([data-theme="dark"]) .nav-yt.nav-active,
:root:not([data-theme="dark"]) .today-btn.yt,
:root:not([data-theme="dark"]) .sheet-close:hover,
:root:not([data-theme="dark"]) .filter-x:hover { background: #C93A18; color: #FFFFFF; }

/* ── D. 반투명 흰색이 글자색으로 잘못 쓰여 안 보이던 곳 ────────────────── */
:root:not([data-theme="dark"]) .nav-user { color: var(--ink); }


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-12 — 다크 모드 대비 전수 점검 (배지 · 필터 칩 · 탭 · 토스트)
   ──────────────────────────────────────────────────────────────────────────
   다크에서 --ink / --yellow 가 각각 「밝은 색」으로 뒤집히면서, 배경이 밝은
   규칙에 color:var(--ink) 가 붙은 곳이 「밝은 배경 + 밝은 글씨」(대비 1.0)가
   되었습니다. 또 배경이 어두운데 글씨가 어두운 규칙(1.1~1.2), 파랑/빨강 위
   흰 글씨(3.2~3.4)도 함께 바로잡습니다. 라이트 규칙은 손대지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. 밝은 배경 + 밝은 글씨(대비 1.0) → 밝은 알약 + 짙은 글씨 ───────── */
:root[data-theme="dark"] .today-tab.active,
:root[data-theme="dark"] .rec-period.active,
:root[data-theme="dark"] .clip-x,
:root[data-theme="dark"] .req-status.wait,
:root[data-theme="dark"] .seg-btn.active,
:root[data-theme="dark"] .popup-x,
:root[data-theme="dark"] .sw-toast-btn,
:root[data-theme="dark"] .filter-chip,
:root[data-theme="dark"] .nav-btn.nav-active {
  background: #EAF0FA; color: #141C2E; border-color: transparent;
}

/* ── B. 어두운 글씨가 어두운 배경 위(대비 ≈1.1) → 밝은 글씨 ───────────── */
:root[data-theme="dark"] .sheet-tag {
  background: rgba(255,255,255,.14); color: var(--ink); border-color: rgba(255,255,255,.18);
}
:root[data-theme="dark"] .filter-x {
  background: rgba(255,255,255,.14); color: var(--ink);
}
:root[data-theme="dark"] .pf-count { color: var(--ink); }
:root[data-theme="dark"] .nav-user { color: var(--ink); }

/* ── C. 앰버·주황 배지 : 짙은 글씨 → 밝은 글씨 ────────────────────────── */
:root[data-theme="dark"] .mono-chip.hard,
:root[data-theme="dark"] .song-flag .mono-chip.hard {
  background: rgba(242,176,30,.22); color: #FFDA8F; border-color: rgba(242,176,30,.40);
}
:root[data-theme="dark"] .sung-chip {
  background: rgba(224,105,30,.22); color: #FFC79A;
}
:root[data-theme="dark"] .today-btn.clip { background: rgba(232,112,147,.22); color: #FFC9DC; }
:root[data-theme="dark"] .fav-btn.on { color: #FFD3E2; }

/* ── D. 파랑/빨강 위 흰 글씨(대비 3.2~3.4) → 배경을 어둡게 ────────────── */
:root[data-theme="dark"] .media-btn.ly:hover,
:root[data-theme="dark"] .pf-link.soop:hover,
:root[data-theme="dark"] .pf-tag.sky { background: #3E6FD0; color: #FFFFFF; }
:root[data-theme="dark"] .media-btn.yt:hover,
:root[data-theme="dark"] .pf-link.yt:hover,
:root[data-theme="dark"] .nav-yt.nav-active,
:root[data-theme="dark"] .today-btn.yt,
:root[data-theme="dark"] .filter-x:hover { background: #C93A18; color: #FFFFFF; }
:root[data-theme="dark"] .nav-btn.nav-yt:hover,
:root[data-theme="dark"] .nav-btn.nav-yt.nav-active {
  background: var(--paper-soft); color: #FF9A7A;
}

/* ── E. 하단 새 버전 토스트 : 밝은 배경 + 투명 글씨(대비 1.0) ─────────── */
:root[data-theme="dark"] .sw-toast {
  background: #16202B; color: #EEF3FB; border-color: rgba(255,255,255,.20);
}


/* ── v2.47-13 : 다크 활성 알약 색 고정 ────────────────────────────────────
   위쪽 v2.47-8 규칙(.nav-btn.nav-active:not(:hover):not(.nav-link))이
   세기(specificity)가 더 높아 color:var(--ink)=밝은색으로 되돌려, 밝은 알약
   위 밝은 글씨(대비 1.0)가 되던 문제를 !important 로 확정합니다. 라이트 무관. */
:root[data-theme="dark"] .nav-btn.nav-active,
:root[data-theme="dark"] .nav-btn.nav-active:not(:hover):not(.nav-link),
:root[data-theme="dark"] .nav-btn.nav-active i { color: #141C2E !important; }
:root[data-theme="dark"] .nav-btn.nav-active,
:root[data-theme="dark"] .today-tab.active,
:root[data-theme="dark"] .rec-period.active,
:root[data-theme="dark"] .clip-x,
:root[data-theme="dark"] .req-status.wait,
:root[data-theme="dark"] .seg-btn.active,
:root[data-theme="dark"] .popup-x,
:root[data-theme="dark"] .sw-toast-btn,
:root[data-theme="dark"] .filter-chip {
  background: #EAF0FA !important; color: #141C2E !important; border-color: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-14 — 모바일(375px) 대비 · 레이아웃 겹침 점검 (실제 렌더 판독 기반)
   ────────────────────────────────────────────────────────────────────────── */

/* 1) 곡 카드 ♡ 버튼(position:absolute; top:30px; right:8px)이
      긴 곡 제목·배지의 오른쪽 끝을 덮던 문제 → 텍스트 영역에 오른쪽 여백 확보 */
.song-card .info .title,
.song-card .info .artist,
.song-card .info .song-flag { padding-right: 46px !important; }

/* 2) 모바일에서 계절 위젯(고정·우하단)이 2열 카드 위를 덮던 문제
      → 위젯을 작게 줄이고, 처음엔 접힌 상태로 시작(기존 「숨김」 토글 그대로 동작) */
@media (max-width: 640px) {
  .season-bar { right: 10px; bottom: 10px; padding: 5px 6px; gap: 5px; }
  .season-btn { width: 30px; height: 30px; font-size: 10px; }
}
body:has(.season-bar.collapsed) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* 3) 다크에서 보조 글씨·배지가 흐리다는 판독 → 밝기 상향(라이트 무관) */
:root[data-theme="dark"] .song-card .info .artist { color: #C3D0E2; }
:root[data-theme="dark"] .mono-chip {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: var(--ink);
}
:root[data-theme="dark"] .mono-chip.alt { color: #BBD6FF; }
:root[data-theme="dark"] input::placeholder { color: #9FB0C7; }


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-15 — 상세 창 하단 버튼이 잘리고 스크롤로도 안 내려가던 문제
   ──────────────────────────────────────────────────────────────────────────
   · 안내·메모·가사·버튼 줄이 모두 들어가면 시트 내용이 화면보다 길어져,
     하단 버튼(찜하기·신청곡에 담기·공유·닫기)이 시트 아래로 밀려 보이지 않았습니다.
   · 하단 버튼 줄을 「시트 바닥에 붙는(sticky) 푸터」로 바꿔 스크롤 위치와
     무관하게 항상 보이게 하고, 시트 자체도 확실히 스크롤되도록 다시 선언합니다. */
.sheet {
  overflow-y: auto !important; overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.sheet-body { padding-bottom: 0; }                 /* 푸터가 아래 여백을 대신 담당 */
.sheet-actions {
  position: sticky; bottom: 0; z-index: 6;
  flex-wrap: wrap;
  margin: var(--s3) calc(-1 * var(--s3)) 0;         /* 시트 좌우 끝까지 배경 확장 */
  padding: 12px var(--s3) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--card-brd);
  box-shadow: 0 -8px 18px rgba(12,18,28,.07);
}
:root[data-theme="dark"] .sheet-actions {
  background: var(--paper); box-shadow: 0 -8px 18px rgba(0,0,0,.38);
}
@media (max-width: 640px) {
  .sheet-actions { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-16 — 상세 창 스크롤 불가의 「근본 원인」 수정
   ──────────────────────────────────────────────────────────────────────────
   · 위쪽 v2.47-8 규칙의 max-height: calc(100dvh - 2 * var(--s3)) 에서
     var(--s3) 가 이 요소 스코프에서 유효하지 않아, CSS 규칙상 값이
     「무효(invalid at computed-value time)」가 되며 max-height 가 초기값
     none 으로 리셋되었습니다(진단 실측: sheet maxH=none, canScroll=false).
     → 변수에 의존하지 않는 리터럴 값으로 높이 제한을 확실히 지정합니다.
   · 이제 시트가 스크롤 영역이 되고, 아래 v2.47-15 의 sticky 푸터가
     바닥에 붙어 하단 버튼이 항상 보입니다. */
.sheet { max-height: calc(100dvh - 32px) !important; }
@supports not (height: 100dvh) { .sheet { max-height: min(88vh, 880px) !important; } }


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-17 — 노치 · 홈 인디케이터(안전 영역) 대응
   ──────────────────────────────────────────────────────────────────────────
   · <meta viewport> 에 viewport-fit=cover 가 없어 env(safe-area-inset-*) 가
     항상 0으로 해석되던 문제를 바로잡습니다(홈 화면 앱=standalone 이라 중요).
   · 상세 창 하단 고정 버튼이 홈 인디케이터에 가리지 않도록 오버레이·푸터·
     시트 높이에 안전 영역을 반영합니다. (env 값이 0인 기기에서는 변화 없음) */
.sheet-overlay {
  padding-top:    calc(var(--s3) + env(safe-area-inset-top, 0px));
  padding-right:  calc(var(--s3) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  padding-left:   calc(var(--s3) + env(safe-area-inset-left, 0px));
}
.sheet {
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100svh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}
.sheet-actions {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
/* 바닥에 고정된 다른 요소들도 안전 영역 위로 */
.season-bar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .season-bar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-18 — 찜 관리 창(.fav-box)이 스크롤되지 않고 하단이 잘리던 문제
   ──────────────────────────────────────────────────────────────────────────
   · 찜 관리 창은 상세 창(.sheet)과 다른 모달(.fav-box)이라 앞선 수정의 대상이
     아니었습니다. 같은 방식(높이 제한 + 스크롤 + 하단 고정 푸터)으로 맞춥니다. */
.fav-overlay {
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(var(--s3) + env(safe-area-inset-top, 0px))
           calc(var(--s3) + env(safe-area-inset-right, 0px))
           calc(var(--s3) + env(safe-area-inset-bottom, 0px))
           calc(var(--s3) + env(safe-area-inset-left, 0px));
}
.fav-box {
  margin: auto;
  max-height: calc(100svh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.fav-foot {
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--s1);
  position: sticky; bottom: 0; z-index: 6;
  margin: var(--s3) calc(-1 * var(--s3)) 0;
  padding: 12px var(--s3) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--card-brd);
  box-shadow: 0 -8px 18px rgba(12,18,28,.07);
}
:root[data-theme="dark"] .fav-foot { box-shadow: 0 -8px 18px rgba(0,0,0,.38); }


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-19 — 상세 카드(및 찜 관리 창)를 위로 올리고 높이 제한을 확실히
   ──────────────────────────────────────────────────────────────────────────
   · 화면 높이를 --app-vh(JS가 실측한 실제 뷰포트 높이)로 잡고, 없으면
     100dvh 로 대체합니다. dvh 를 잘못 계산하는 브라우저에서도 안전합니다.
   · 카드를 세로 가운데 정렬하지 않고 위쪽에 붙여, 하단이 화면 밖으로
     나가지 않게 합니다(요청: 카드 위치를 더 위로). */
.sheet-overlay, .fav-overlay { align-items: flex-start !important; }
.sheet, .fav-box { margin: 0 auto !important; }
.sheet {
  max-height: calc(var(--app-vh, 100dvh) - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}
.fav-box {
  max-height: calc(var(--app-vh, 100dvh) - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 640px) {
  .sheet, .fav-box { max-height: calc(var(--app-vh, 100dvh) - 24px - env(safe-area-inset-bottom, 0px)) !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-20 — 나머지 모달 전수 점검(인라인 스타일 충돌 · 대비 · 잘림)
   ──────────────────────────────────────────────────────────────────────────
   · 시작 팝업(.popup-*)은 index.html 인라인 <style> 에 정의되어 외부 CSS보다
     나중에 적용됩니다(인라인이 이김). 인라인 .popup-btn 은 글씨색이 var(--ink),
     .popup-btn.primary 배경이 var(--yellow) 라서
       라이트: 남색 배경 + 검정 글씨 / 다크: 밝은 배경 + 밝은 글씨 → 대비 붕괴.
     → 다른 활성 알약과 동일한 값으로 고정합니다. */
:root:not([data-theme="dark"]) .popup-btn.primary { background: #1E2A38; color: #FFFFFF; }
:root[data-theme="dark"] .popup-btn.primary { background: #EAF0FA; color: #141C2E; }

/* 팝업 본문이 길어져도 카드가 잘리지 않게 가운데 영역만 스크롤 */
.popup-card { max-height: calc(var(--app-vh, 100dvh) - 24px - env(safe-area-inset-bottom, 0px)) !important; }
.popup-body { overflow-y: auto; }

/* 클립 모달(.clip-box)도 상세 창과 같은 방식으로: 위로 정렬 + 높이 제한 + 스크롤 + 안전 영역
   (기존 max-height:92vh + overflow:hidden 이라 내용이 길면 잘렸습니다) */
.clip-overlay {
  align-items: flex-start !important;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.clip-box {
  margin: 0 auto !important;
  max-height: calc(var(--app-vh, 100dvh) - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   v2.47-21 — 모달 뒤 배경 「블러」 제거
   ──────────────────────────────────────────────────────────────────────────
   · 상세 창/찜 관리/클립 창 뒤 배경이 backdrop-filter 로 뿌옇게 번져,
     뒤 카드들이 흐린 네모칸처럼 보이던 문제. 블러만 끄고 어둡게 덮는
     정도(딤)는 남깁니다. */
.sheet-overlay, .fav-overlay, .clip-overlay {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
:root:not([data-theme="dark"]) .sheet-overlay,
:root:not([data-theme="dark"]) .fav-overlay,
:root:not([data-theme="dark"]) .clip-overlay { background: rgba(14,22,38,.34); }