/* ============================================================
   NEOWAVE audio_skin.css — FOLLOW MAIN SKIN (2 skins)
   - Skin 1: NAVY / BLUE (match main)
   - Skin 2: Paper Gray (match main)
   - Audio32 has NO 자체 스킨 버튼; it follows localStorage NW_SKIN_ID
   ============================================================ */

/* --- Defaults (Skin1 fallback) --- */
:root{
  --bg:#061824;
  --ink:#e0f2fe;
  --muted:#93c5fd;
  --brand:#5eead4;
  --brand-2:#60a5fa;
  --line: rgba(255,255,255,.10);
  --panel: rgba(14,32,45,.92);
  --panel-2: rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ==========================================================
   SKIN 1 — NAVY / BLUE (DEFAULT)
   ========================================================== */
html[data-skin="1"], body[data-skin="1"],
html:not([data-skin]), body:not([data-skin]){
  --bg:#061824;
  --ink:#e0f2fe;
  --muted:#93c5fd;
  --brand:#5eead4;
  --brand-2:#60a5fa;
  --line: rgba(255,255,255,.10);
  --panel: rgba(14,32,45,.92);
  --panel-2: rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ==========================================================
   SKIN 2 — Paper Gray
   ========================================================== */
html[data-skin="2"], body[data-skin="2"]{
  --bg:#dedad1;
  --ink:#2b2b2b;
  --muted:#4a4a4a;
  --brand:#5eead4;
  --brand-2:#60a5fa;
  --line:#b3b3b3;
  --panel:#cfcfcf;
  --panel-2:#c7c7c7;
  --shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* ==========================================================
   Apply to Audio32 UI
   ========================================================== */
html, body{
  background: var(--bg);
  color: var(--ink);
}

/* panels */
.player, .list, .side, .drop{
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

/* subtle separators */
.topbar, .now, .list-head, .viz{
  border-color: var(--line) !important;
}

/* list internals */
.row{ border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent) !important; }
.time, .small, .info .a{ color: var(--muted) !important; }

/* inputs/select */
.select{
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

/* buttons */
.btn, .iconbtn, .mini{
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  color: var(--ink);
}
.btn:hover, .iconbtn:hover, .mini:hover{
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

/* primary gradient uses brand colors (skin-specific) */
.btn.primary,
#prevBtn,#nextBtn,#shuffleBtn,#repeatBtn,#fxBtn1.iconbtn,#fxBtn2.iconbtn,#fxBtn3.iconbtn,#muteBtn.iconbtn,#playBtn{
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 70%, transparent) !important;
  color: #102015 !important;
}


/* pastel buttons: add slight text contrast */
.btn.primary,
#prevBtn,#nextBtn,#shuffleBtn,#repeatBtn,#fxBtn1.iconbtn,#fxBtn2.iconbtn,#fxBtn3.iconbtn,#muteBtn.iconbtn,#playBtn{
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}


/* ==========================================================
   SKIN 2: 진행바(Seek) 대비 강화 (종이색에서 더 잘 보이게)
   ========================================================== */
html[data-skin="2"] .seekWrap .trackBase,
body[data-skin="2"] .seekWrap .trackBase{
  background: rgba(0,0,0,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18) !important;
}
html[data-skin="2"] .seekWrap .trackFill,
body[data-skin="2"] .seekWrap .trackFill{
  /* 기존 brand 그라데이션 유지 + 조금 더 진하게 */
  filter: saturate(1.15) contrast(1.10);
  opacity: .95;
}
html[data-skin="2"] #seek::-webkit-slider-thumb,
body[data-skin="2"] #seek::-webkit-slider-thumb{
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.18);
}
html[data-skin="2"] #seek::-moz-range-thumb,
body[data-skin="2"] #seek::-moz-range-thumb{
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.18);
}

/* [NEOWAVE] Paper skin: make current-playing row/title more readable */
html[data-skin="2"] .row.is-current{
  /* blue-tinted highlight on paper background */
  background: color-mix(in srgb, var(--brand-2) 26%, transparent);
  color:#0b1220;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
html[data-skin="2"] .row.is-current .info .t{ color:inherit; }
html[data-skin="2"] .row.is-current .info .a{ color: color-mix(in srgb, #000 55%, transparent); }