/* ═══════════════════════════════════════════
   DESIGN TOKENS — 테마별 CSS 변수
═══════════════════════════════════════════ */
:root {
  --acc: #e8ff47;
  --acc-fg: #000;
  /* light/dark + skin에서 덮어씀 */
}

/* ── DARK BASE ── */
[data-theme="dark"] {
  --bg:    #0a0a0a;
  --bg2:   #111;
  --bg3:   #181818;
  --bg4:   #202020;
  --border:#272727;
  --border2:#333;
  --t0:    #f0f0f0;
  --t1:    #aaa;
  --t2:    #666;
  --t3:    #333;
  --green: #3ddc84;
  --red:   #ff4757;
  --shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ── LIGHT BASE ── */
[data-theme="light"] {
  --bg:    #f5f5f5;
  --bg2:   #fff;
  --bg3:   #ececec;
  --bg4:   #e0e0e0;
  --border:#ddd;
  --border2:#ccc;
  --t0:    #111;
  --t1:    #555;
  --t2:    #999;
  --t3:    #ccc;
  --green: #1a9e5c;
  --red:   #e03131;
  --shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ═══ SKINS ═════════════════════════════════ */

/* 1. 모던 미니멀 */
html[data-skin="minimal"] {
  --radius:4px;
  --font-ui:'Barlow Condensed',sans-serif;
  --font-mono:'DM Mono',monospace;
  --font-display:'Bebas Neue',sans-serif;
}

/* ─────────────────────────────────────────
   2. 반투명 유리
   ref: frosted glass UI kit (이미지 1~5)
   핵심: inner highlight 상단선 + 하단 색상 drop-shadow
         두꺼운 blur + 베이지~화이트 배경 + 3D 깊이감
───────────────────────────────────────── */
html[data-skin="glass"] {
  --radius: 22px;
  --font-ui: 'Barlow Condensed', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-display: 'Bebas Neue', sans-serif;

  /* 유리 공통 토큰 */
  --glass-blur: blur(28px) saturate(1.8);
  --glass-inner: inset 0 1.5px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.15);
  --glass-inner-dark: inset 0 1.5px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.12);
}

/* DARK: 짙은 slate — 밀키 유리판 */
html[data-skin="glass"][data-theme="dark"] {
  --bg:       #12151c;
  --bg2:      rgba(255,255,255,.07);
  --bg3:      rgba(255,255,255,.045);
  --bg4:      rgba(255,255,255,.025);
  --border:   rgba(255,255,255,.13);
  --border2:  rgba(255,255,255,.22);
  --t0: #eef2ff; --t1: #a8b4cc; --t2: #60708a; --t3: rgba(255,255,255,.08);
  --green: #4ade80; --red: #f87171;
  /* 하단 색상 그림자 — 이미지 1의 입체감 */
  --shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 20px 60px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.12) inset;
  --card-shadow:
    0 20px 50px rgba(0,0,0,.5),
    0 4px 12px rgba(0,0,0,.3),
    inset 0 1.5px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

/* LIGHT: 크림/베이지 — 이미지 2~5 스타일 */
html[data-skin="glass"][data-theme="light"] {
  --bg:       #eeeae4;          /* 이미지 1 베이지 배경 */
  --bg2:      rgba(255,255,255,.72);
  --bg3:      rgba(255,255,255,.50);
  --bg4:      rgba(255,255,255,.32);
  --border:   rgba(255,255,255,.85);
  --border2:  rgba(255,255,255,.95);
  --t0: #1c2130; --t1: #4a5568; --t2: #8896a8; --t3: rgba(0,0,0,.06);
  --green: #15803d; --red: #dc2626;
  /* 이미지 4의 눌린 입체감: 상단 흰 선 + 하단 색상 그림자 */
  --shadow:
    0 20px 60px rgba(160,140,120,.22),
    0 4px 16px rgba(140,120,100,.16),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1.5px 0 rgba(140,120,100,.12);
  --card-shadow:
    0 16px 48px rgba(140,120,100,.2),
    0 4px 14px rgba(140,120,100,.12),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(180,160,140,.18);
}

/* ─────────────────────────────────────────
   3. Y2K 레트로
   ref1 (light): 이미지 3,4,6,7,8 — 크림/베이지 OS,
     컬러 타이틀바(오렌지#E8A020+파랑#4A6FBD), 1px 아웃라인
   ref2 (dark): 이미지 2,5 — 다크 네이비 #1a1d2e,
     크림#F5E6C8 + 오렌지#E8803A + 틸#6DB5B8 팔레트
───────────────────────────────────────── */
html[data-skin="y2k"] {
  --radius: 4px;
  --font-ui: 'Barlow Condensed', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-display: 'Bebas Neue', sans-serif;

  /* 타이틀바 컬러 토큰 */
  --y2k-title-bg: #4A6FBD;
  --y2k-title-fg: #ffffff;
  --y2k-btn-close: #E81123;
  --y2k-btn-min:   #FFC200;
  --y2k-btn-max:   #00CC6A;
}

/* LIGHT: 크림 OS (이미지 6,7,8) */
html[data-skin="y2k"][data-theme="light"] {
  --bg:     #d4c8b8;      /* 베이지 OS 배경 */
  --bg2:    #f5f0e8;      /* 창 내부 크림 */
  --bg3:    #ede8dc;
  --bg4:    #e4ddd0;
  --border: #8a7a6a;      /* 두꺼운 아웃라인 */
  --border2:#4A6FBD;      /* 액티브 파랑 */
  --t0: #1a1208; --t1: #3a2e20; --t2: #7a6a58; --t3: #c8b89a;
  --green: #00884a; --red: #cc2200;
  --shadow: 2px 2px 0 #8a7a6a, 4px 4px 0 rgba(100,80,60,.25);
  /* 이미지 1의 Win98 raised 버튼 스타일 */
  --y2k-raised:
    inset 1px 1px 0 rgba(255,255,255,.9),
    inset -1px -1px 0 rgba(80,60,40,.5),
    2px 2px 0 rgba(60,40,20,.2);
  --y2k-sunken:
    inset 1px 1px 0 rgba(80,60,40,.4),
    inset -1px -1px 0 rgba(255,255,255,.7);
}

/* DARK: 네이비 게임 UI (이미지 2,5) */
html[data-skin="y2k"][data-theme="dark"] {
  --bg:     #14172a;      /* 딥 네이비 */
  --bg2:    #1e2238;      /* 패널 배경 */
  --bg3:    #252840;
  --bg4:    #2c3050;
  --border: #F5E6C8;      /* 크림 아웃라인 */
  --border2:#E8803A;      /* 오렌지 강조 */
  --t0: #F5E6C8; --t1: #c8b898; --t2: #7a6a58; --t3: #2c3050;
  --green: #6DB5B8; --red: #e84040;
  --shadow: 0 0 0 2px #F5E6C8, 3px 3px 0 rgba(245,230,200,.15);
  --y2k-raised:
    inset 1px 1px 0 rgba(245,230,200,.3),
    inset -1px -1px 0 rgba(0,0,0,.5),
    2px 2px 0 rgba(0,0,0,.3);
  --y2k-sunken:
    inset 2px 2px 0 rgba(0,0,0,.4),
    inset -1px -1px 0 rgba(245,230,200,.1);
}

/* ─────────────────────────────────────────
   4. 8비트
   ref DARK  (이미지 5,6): 블랙 #1a1c18 + 아이보리 #e8e4c8
             Game Boy Pocket 팔레트 — 세그먼트 UI, +/- 버튼
   ref LIGHT (이미지 3,4): Game Boy Green
             #9bbc0f (밝은 그린) / #306230 (중간) / #0f380f (어두운)
             2색 픽셀 아트, 창문 스타일 OS
───────────────────────────────────────── */
html[data-skin="pixel"] {
  --radius: 0px;
  --font-ui:      'Press Start 2P', monospace;
  --font-mono:    'Press Start 2P', monospace;
  --font-display: 'Press Start 2P', monospace;
}

/* DARK: 이미지 5,6 — 블랙+아이보리 2색 pixel UI */
html[data-skin="pixel"][data-theme="dark"] {
  --bg:     #0c0e0a;   /* 거의 블랙 */
  --bg2:    #181c14;   /* 패널 배경 */
  --bg3:    #222820;
  --bg4:    #2c3228;
  --border: #e8e4c8;   /* 아이보리 1px 아웃라인 */
  --border2:#f0edd8;
  --t0: #e8e4c8; --t1: #b8b49a; --t2: #686450; --t3: #2c3228;
  --green: #88cc44; --red: #cc4422;
  /* pixel-perfect 2px 그림자 */
  --shadow: 2px 2px 0 #e8e4c8;
  /* raised 버튼: 이미지 5 설정 패널 스타일 */
  --px-raised:
    inset 1px 1px 0 rgba(232,228,200,.4),
    inset -1px -1px 0 rgba(0,0,0,.6);
  --px-sunken:
    inset 1px 1px 0 rgba(0,0,0,.6),
    inset -1px -1px 0 rgba(232,228,200,.2);
  --px-color1: #e8e4c8;
  --px-color2: #0c0e0a;
}

/* LIGHT: 이미지 3,4 — Game Boy Green 팔레트
   배경은 밝은 그린, 텍스트/보더는 극명한 어두운 그린으로 대비 확보 */
html[data-skin="pixel"][data-theme="light"] {
  --bg:     #c4d44a;   /* 밝은 연그린 배경 — 눈에 덜 자극적 */
  --bg2:    #b8cc3a;   /* 창/패널 배경 */
  --bg3:    #9bbc0f;   /* 중간 그린 */
  --bg4:    #7a9a00;
  --border: #0f380f;   /* 극어두운 그린 — 선명한 아웃라인 */
  --border2:#1a5a1a;
  --t0: #0a2a0a;       /* 거의 블랙 그린 — 메인 텍스트 */
  --t1: #0f380f;       /* 어두운 그린 — 서브 텍스트 */
  --t2: #1a5a1a;       /* 중간 그린 — 보조 텍스트 */
  --t3: #7a9a00;
  --green: #0f380f; --red: #8a1a00;
  --shadow: 2px 2px 0 #0f380f;
  --px-raised:
    inset 1px 1px 0 rgba(196,212,74,.8),
    inset -1px -1px 0 rgba(15,56,15,.9);
  --px-sunken:
    inset 1px 1px 0 rgba(15,56,15,.8),
    inset -1px -1px 0 rgba(196,212,74,.5);
  --px-color1: #0f380f;   /* 타이틀바 배경 */
  --px-color2: #c4d44a;   /* 타이틀바 텍스트 */
}

/* ─────────────────────────────────────────
   5. 팝 키치
   ref LIGHT (이미지 1,6,7): 로열블루 #1a35e0 배경,
     핫오렌지 #ff4500 + 옐로우 #ffe000 + 핫핑크 #ff2d78
     두꺼운 검정 아웃라인, 만화 스티커 감성
   ref DARK  (이미지 4,5): 블랙 배경 + 네온 시안/핑크/옐로우
     레이저 글로우, 음악 페스티벌 포스터 에너지
───────────────────────────────────────── */
html[data-skin="pop"] {
  --radius: 6px;
  --font-ui:      'Nunito', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Nunito', sans-serif;  /* 볼드 산세리프 */

  /* 공통 팝 토큰 */
  --pop-outline: 3px solid #000;         /* 두꺼운 검정 아웃라인 */
  --pop-outline2: 2px solid #000;
  --pop-yellow:  #ffe000;
  --pop-orange:  #ff4500;
  --pop-pink:    #ff2d78;
  --pop-cyan:    #00e5ff;
  --pop-lime:    #ccff00;
}

/* LIGHT: 이미지 1,6,7 — 비비드 블루 + 스티커 팝 */
html[data-skin="pop"][data-theme="light"] {
  --bg:     #1a35e0;   /* 로열 블루 */
  --bg2:    #ffffff;   /* 카드 흰색 */
  --bg3:    #f0f0ff;
  --bg4:    #e0e0ff;
  --border: #000000;   /* 두꺼운 검정 */
  --border2:#ffe000;   /* 옐로우 강조 */
  --t0: #000000; --t1: #1a0044; --t2: #440088; --t3: #ccccff;
  --green: #00cc44; --red: #ff2200;
  --shadow: 3px 3px 0 #000000;
  --acc: #ff4500;      /* 오렌지 기본 포인트 */
  --acc-fg: #ffffff;
}

/* DARK: 이미지 4,5 — 블랙 + 네온 글로우 */
html[data-skin="pop"][data-theme="dark"] {
  --bg:     #050508;   /* 딥 블랙 */
  --bg2:    #0e0e18;
  --bg3:    #181828;
  --bg4:    #222238;
  --border: #00e5ff;   /* 네온 시안 */
  --border2:#ff2d78;   /* 네온 핑크 */
  --t0: #ffffff; --t1: #ccddff; --t2: #6688cc; --t3: #222238;
  --green: #00ff88; --red: #ff2d78;
  --shadow:
    0 0 0 2px #00e5ff,
    0 0 12px rgba(0,229,255,.4),
    3px 3px 0 rgba(0,229,255,.2);
}

/* ─────────────────────────────────────────
   6. 귀여운 동물들
   ref LIGHT (이미지 1,2,3,5):
     파스텔 핑크+민트+하늘 3색 그라디언트 배경
     흰 카드 + 파스텔 아웃라인 + 큰 radius
     이미지1: 핑크 그리드, 파스텔 창문
     이미지2: 하늘색 bg, 파란 타이틀바
     이미지3: 라벤더 그리드, 파스텔 퍼플/민트
   ref DARK (이미지4,5):
     웜 올리브/가을 팔레트 — 어두운 포근함
───────────────────────────────────────── */
html[data-skin="animals"] {
  --radius: 18px;
  --font-ui:      'Nunito', sans-serif;
  --font-mono:    'Nunito', sans-serif;
  --font-display: 'Nunito', sans-serif;

  /* 공통 */
  --ani-outline: 2px solid;
  --ani-r: 18px;
}

/* LIGHT: 이미지 1,3 파스텔 OS */
html[data-skin="animals"][data-theme="light"] {
  --bg:     #fdf0f8;     /* 연한 핑크 */
  --bg2:    #ffffff;     /* 카드 흰 */
  --bg3:    #f5f0ff;     /* 연보라 */
  --bg4:    #e8f8f0;     /* 연민트 */
  --border: #e8b4d0;     /* 파스텔 핑크 아웃라인 */
  --border2:#b4d4f0;     /* 파스텔 블루 아웃라인 */
  --t0: #3d2255; --t1: #7755aa; --t2: #bb88cc; --t3: #f0d8ff;
  --green: #55cc99; --red: #ff7799;
  --shadow: 0 4px 0 #e8b4d0, 0 6px 20px rgba(200,150,200,.15);
  /* 창문 타이틀 컬러 */
  --ani-title-pink:   #f9c8dc;
  --ani-title-blue:   #b4d4f0;
  --ani-title-purple: #d4b8f0;
  --ani-title-mint:   #b4f0d8;
  --ani-title-yellow: #f8f0b4;
}

/* DARK: 라이트와 동일한 파스텔 감성, 어두운 버전 */
html[data-skin="animals"][data-theme="dark"] {
  --bg:     #160d1e;    /* 진한 다크 퍼플 — 라이트와 확실히 구분 */
  --bg2:    #241630;    /* 카드 배경 — bg보다 밝게 */
  --bg3:    #2e1e3a;
  --bg4:    #3a2848;
  --border: #c088a8;
  --border2:#88aad0;
  --t0: #fce8f8; --t1: #e0aad0; --t2: #a07090; --t3: #3a2848;
  --green: #66ccaa; --red: #ee7799;
  --shadow: 0 4px 0 #8a5070, 0 8px 24px rgba(0,0,0,.5);
  --ani-title-pink:   #4a1e38;
  --ani-title-blue:   #1e2a4a;
  --ani-title-purple: #32185a;
  --ani-title-mint:   #1a3830;
  --ani-title-yellow: #3a2c1a;
}

/* ─────────────────────────────────────────
   7. 솜사탕 (ref: Cotton Candy UI kit — Bubblegum/Grape/Lemon flavors,
      rounded pill buttons with thick outlines, pastel 3D emboss)
   - dark: 딥 다크 배경 + 핑크/라벤더 소프트 글로우
   - light: 크림 흰 + 핑크+퍼플+민트 3색 accent
───────────────────────────────────────── */
/* ─────────────────────────────────────────
   7. 솜사탕 (ref 이미지 1-6)
   핵심 팔레트:
     핫핑크  #ff69b4 / 파스텔핑크 #ffb3d1 / 연핑크 #fce4ec
     스카이블루 #87ceeb / 파스텔블루 #b3e5fc / 연블루 #e3f6ff
     흰 카드 #ffffff / 라벤더 bg #f5e6ff
   LIGHT: 흰 배경 + 핑크+하늘 2색 (이미지 5,6)
   DARK:  딥 다크 + bubblegum 핑크 (이미지 2)
───────────────────────────────────────── */
html[data-skin="candy"] {
  --radius: 999px;
  --font-ui:      'Nunito', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Pacifico', cursive;

  /* 팔레트 토큰 */
  --cc-pink:      #ff69b4;
  --cc-pink-soft: #ffb3d1;
  --cc-pink-pale: #fce4ec;
  --cc-blue:      #5bc8f5;
  --cc-blue-soft: #b3e5fc;
  --cc-blue-pale: #e3f6ff;
  --cc-white:     #ffffff;
  --cc-outline:   2px solid;
}

/* LIGHT: 이미지 5,6 — 흰 배경 + 핑크+하늘 */
html[data-skin="candy"][data-theme="light"] {
  --bg:     #fff5fa;
  --bg2:    #ffffff;
  --bg3:    #fce4ec;
  --bg4:    #e3f6ff;
  --border: #ffb3d1;
  --border2:#b3e5fc;
  --t0: #4a1a3a; --t1: #cc5588; --t2: #ff69b4; --t3: #fce4ec;
  --green: #5bc8a0; --red: #ff4488;
  --shadow: 0 4px 0 #ffb3d1, 0 8px 20px rgba(255,105,180,.15);
}

/* DARK: 이미지 2 bubblegum dark */
html[data-skin="candy"][data-theme="dark"] {
  --bg:     #1a1220;
  --bg2:    #261830;
  --bg3:    #301e3a;
  --bg4:    #3a2848;
  --border: #ff69b4;
  --border2:#5bc8f5;
  --t0: #ffe8f4; --t1: #ffb3d1; --t2: #cc5588; --t3: #3a2848;
  --green: #5bc8a0; --red: #ff4488;
  --shadow: 0 4px 0 #cc3388, 0 8px 24px rgba(255,105,180,.3);
}

/* ─────────────────────────────────────────
   8. 동양풍 — 단청 (丹靑)
   ref DARK  (이미지 4,5): 옻칠 흑색 배경 + 오방색 채색 운문(雲紋)
     금 외곽선, 청(靑)·황(黃)·홍(紅)·녹(綠) 소용돌이 구름
   ref LIGHT (이미지 1,2,3): 단청 격자 + 연꽃 메달리온
     녹색(碧色) 바탕, 연꽃 핑크, 주홍·황·청·백 오방색 스트라이프
───────────────────────────────────────── */
html[data-skin="oriental"] {
  --radius: 2px;
  --font-ui:      'Noto Serif KR', serif;
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Noto Serif KR', serif;

  /* 오방색 토큰 */
  --or-gold:    #d4a017;   /* 황(黃) */
  --or-red:     #c8312a;   /* 홍(紅)/주홍 */
  --or-blue:    #2a4fa8;   /* 청(靑) */
  --or-green:   #2e7a3a;   /* 녹(綠) */
  --or-teal:    #3a9a8a;   /* 청록 */
  --or-pink:    #e87890;   /* 연꽃 핑크 */
  --or-ink:     #0a0806;   /* 먹빛 */
}

/* LIGHT: 이미지 1,2,3 — 단청 격자+메달리온, 오방색 */
html[data-skin="oriental"][data-theme="light"] {
  --bg:     #2e6040;    /* 단청 녹색(碧色) 바탕 */
  --bg2:    #1e4a30;    /* 격자 내부 */
  --bg3:    #254d35;
  --bg4:    #1a3d28;
  --border: #d4a017;    /* 금 테두리 */
  --border2:#e87890;    /* 연꽃 핑크 */
  --t0: #fff8e8; --t1: #f5d890; --t2: #a8c890; --t3: #1e4a30;
  --green: #a8e060; --red: #c8312a;
  --acc:    #e87890;
  --acc-fg: #1a0808;
  --shadow:
    0 0 0 2px #d4a017,
    0 4px 20px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,248,200,.15);
}

/* DARK: 단청 녹색 다크 — 라이트와 같은 녹색 계열 */
html[data-skin="oriental"][data-theme="dark"] {
  --bg:     #0e2018;    /* 짙은 단청 녹색 */
  --bg2:    #162e22;
  --bg3:    #1a3828;
  --bg4:    #1e4a30;
  --border: #d4a017;    /* 금 외곽선 */
  --border2:#e87890;    /* 연꽃 핑크 강조 */
  --t0: #fff8e8; --t1: #d4a017; --t2: #6aaa80; --t3: #1a3828;
  --green: #3a9a8a; --red: #c8312a;
  --acc:    #d4a017;
  --acc-fg: #0a0806;
  --shadow:
    0 0 0 1px rgba(212,160,23,.4),
    0 8px 32px rgba(0,0,0,.70),
    0 0 40px rgba(212,160,23,.06);
}

/* ─────────────────────────────────────────
   9. 푸른 바다 (ref: #FFF8E7 Clouds / #8CC1E9 Clear Skies /
      #12284B Deep Ocean / #0055A0 Blueberry / #438BC4 Bluebird,
      layered wave animation)
   - dark: Deep Ocean #12284B 기반, 파도 레이어
   - light: Clear Skies #8CC1E9 → Clouds #FFF8E7 그라디언트
───────────────────────────────────────── */
html[data-skin="ocean"] {
  --radius:14px;
  --font-ui:'Barlow Condensed',sans-serif;
  --font-mono:'DM Mono',monospace;
  --font-display:'Bebas Neue',sans-serif;
}
html[data-skin="ocean"][data-theme="dark"] {
  --bg:#06111f;--bg2:#0e2340;--bg3:#0a1e38;--bg4:#122e50;
  --border:#0055a0;--border2:#438bc4;
  --t0:#d4eeff;--t1:#8cc1e9;--t2:#3a6fa0;--t3:#0a1e38;
  --green:#22d3c8;--red:#f97316;
  --shadow:0 4px 24px rgba(0,0,0,.5),0 0 0 1px rgba(67,139,196,.2);
}
html[data-skin="ocean"][data-theme="light"] {
  --bg:#ddeeff;--bg2:#fff8e7;--bg3:#d0e8f8;--bg4:#b8d8f0;
  --border:#438bc4;--border2:#0055a0;
  --t0:#06111f;--t1:#12284b;--t2:#0055a0;--t3:#b0cce8;
  --green:#0891b2;--red:#dc4a00;
  --shadow:0 4px 16px rgba(18,40,75,.12),0 0 0 1px rgba(67,139,196,.3);
}

/* ═══ GLOBAL RESET & BASE ══════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
html{font-family:var(--font-ui,'Barlow Condensed',sans-serif);}
body{
  background:var(--bg);color:var(--t0);
  font-family:inherit;
  font-size:15px;display:flex;flex-direction:column;
  transition:background .4s,color .3s;
}
button{cursor:pointer;font-family:inherit}
input,select{font-family:inherit}

/* ── 미니 볼륨 컨트롤 ── */
.vol-mini{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;color:var(--t2);
  margin-top:6px;
}
.vol-mini input[type=range]{
  flex:1;accent-color:var(--acc);height:3px;cursor:pointer;
}
.vol-mini span{min-width:24px;text-align:right;font-size:9px}

/* ── Per-skin body backgrounds ── */

/* ─── GLASS BODY BACKGROUNDS ─────────────── */
html[data-skin="glass"][data-theme="dark"] body {
  background: linear-gradient(145deg, #0e1016 0%, #131720 45%, #0f0e18 100%);
}
html[data-skin="glass"][data-theme="light"] body {
  /* 이미지 1: 웜 베이지 그라디언트 */
  background: radial-gradient(ellipse at 30% 20%, #ddd8d0 0%, #e8e2d8 40%, #ede8e0 70%, #e4e0d8 100%);
}

/* noise grain — 유리 질감 */
html[data-skin="glass"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* ambient light blob — 이미지 1의 따뜻한 광원 */
html[data-skin="glass"][data-theme="light"] body::after {
  content:''; position:fixed; pointer-events:none; z-index:0;
  width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,240,200,.35) 0%, transparent 70%);
  top:-100px; left:50%; transform:translateX(-50%);
  filter: blur(60px);
}
html[data-skin="glass"][data-theme="dark"] body::after {
  content:''; position:fixed; pointer-events:none; z-index:0;
  width:500px; height:500px; border-radius:50%;
  background: radial-gradient(circle, rgba(100,120,200,.12) 0%, transparent 70%);
  top:-80px; left:40%; transform:translateX(-50%);
  filter: blur(80px);
}

/* ─── GLASS BACKDROP-FILTER ──────────────── */
html[data-skin="glass"] #setupScreen,
html[data-skin="glass"] #headerEl,
html[data-skin="glass"] .np,
html[data-skin="glass"] .add-bar,
html[data-skin="glass"] .side,
html[data-skin="glass"] .setup-box,
html[data-skin="glass"] #themePanel,
html[data-skin="glass"] .q-item,
html[data-skin="glass"] .preview,
html[data-skin="glass"] #shareModal .share-box,
html[data-skin="glass"] .qj-box {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ─── 카드 입체 그림자 (이미지 1,4,5 공통) ─ */
html[data-skin="glass"] .setup-box,
html[data-skin="glass"] #themePanel,
html[data-skin="glass"] #shareModal .share-box,
html[data-skin="glass"] .qj-box {
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border2);
}

html[data-skin="glass"] .q-item {
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border);
  transition: box-shadow .2s, transform .15s;
}
html[data-skin="glass"] .q-item:hover {
  transform: translateY(-1px);
  box-shadow:
    0 24px 56px rgba(0,0,0,.18),
    0 6px 18px rgba(0,0,0,.1),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(140,120,100,.14);
}

/* ─── 버튼 유리 입체감 ────────────────────── */
html[data-skin="glass"] .btn-setup-primary,
html[data-skin="glass"] .btn-add,
html[data-skin="glass"] .btn-qi {
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    0 2px 6px rgba(0,0,0,.12),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.15);
  transition: all .15s;
}
html[data-skin="glass"] .btn-setup-primary:hover,
html[data-skin="glass"] .btn-add:hover {
  box-shadow:
    0 12px 32px rgba(0,0,0,.22),
    0 3px 8px rgba(0,0,0,.15),
    inset 0 1.5px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(0,0,0,.18);
  transform: translateY(-1px);
}
html[data-skin="glass"] .btn-setup-primary:active,
html[data-skin="glass"] .btn-add:active {
  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    inset 0 2px 4px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.3);
  transform: translateY(1px);
}

/* ─── input / 채팅 유리 ──────────────────── */
html[data-skin="glass"] .setup-input,
html[data-skin="glass"] .add-url,
html[data-skin="glass"] .add-nick,
html[data-skin="glass"] .chat-in,
html[data-skin="glass"] .qj-input {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.8),
    0 1px 0 rgba(255,255,255,.6);
}
html[data-skin="glass"][data-theme="dark"] .setup-input,
html[data-skin="glass"][data-theme="dark"] .add-url,
html[data-skin="glass"][data-theme="dark"] .add-nick,
html[data-skin="glass"][data-theme="dark"] .chat-in,
html[data-skin="glass"][data-theme="dark"] .qj-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 1px 0 rgba(255,255,255,.05);
}

/* ─── header 유리 패널 ───────────────────── */
html[data-skin="glass"] #headerEl {
  box-shadow:
    0 4px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(255,255,255,.6);
}
html[data-skin="glass"][data-theme="dark"] #headerEl {
  box-shadow:
    0 4px 20px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ─── NP 패널 ────────────────────────────── */
html[data-skin="glass"] .np {
  box-shadow:
    0 8px 32px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.5);
}
html[data-skin="glass"][data-theme="dark"] .np {
  box-shadow:
    0 8px 32px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* ─── progress bar 유리 ──────────────────── */
html[data-skin="glass"] .progress-bar {
  background: rgba(0,0,0,.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1), inset 0 -1px 0 rgba(255,255,255,.5);
  border-radius: 99px;
  height: 5px;
}
html[data-skin="glass"][data-theme="dark"] .progress-bar {
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.05);
}
html[data-skin="glass"] .progress-fill {
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(var(--acc-rgb,232,255,71),.4);
}

/* ─── 액션 버튼 pill ─────────────────────── */
html[data-skin="glass"] .act-btn,
html[data-skin="glass"] .hc-btn,
html[data-skin="glass"] .btn-vote,
html[data-skin="glass"] .btn-del,
html[data-skin="glass"] .hbtn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 2px 8px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.05);
  transition: all .15s;
}
html[data-skin="glass"] .act-btn:hover,
html[data-skin="glass"] .hbtn:hover {
  background: rgba(255,255,255,.32);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.06);
}
html[data-skin="glass"][data-theme="dark"] .act-btn,
html[data-skin="glass"][data-theme="dark"] .hc-btn,
html[data-skin="glass"][data-theme="dark"] .btn-vote,
html[data-skin="glass"][data-theme="dark"] .hbtn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 2px 8px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.1);
}

/* ─── NP thumb 유리 프레임 ───────────────── */
html[data-skin="glass"] .np-thumb {
  box-shadow:
    0 4px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.6);
}
html[data-skin="glass"][data-theme="dark"] .np-thumb {
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ─── 채팅 패널 ──────────────────────────── */
html[data-skin="glass"] .side {
  box-shadow: inset 2px 0 0 rgba(255,255,255,.5);
  border-left: none;
}
html[data-skin="glass"][data-theme="dark"] .side {
  box-shadow: inset 2px 0 0 rgba(255,255,255,.06);
}
html[data-skin="glass"] .chat-hdr,
html[data-skin="glass"] .chat-foot {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.5);
  border-color: transparent;
}
html[data-skin="glass"][data-theme="dark"] .chat-hdr,
html[data-skin="glass"][data-theme="dark"] .chat-foot {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

/* ─── queue wrap 배경 ────────────────────── */
html[data-skin="glass"] .queue-wrap {
  background: rgba(255,255,255,.05);
}
html[data-skin="glass"][data-theme="dark"] .queue-wrap {
  background: rgba(0,0,0,.08);
}

/* ─── toast ──────────────────────────────── */
html[data-skin="glass"] .toast {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border2);
}

/* ═══ Y2K BODY ═══════════════════════════════ */

/* LIGHT: 이미지 8 베이지+그리드 */
html[data-skin="y2k"][data-theme="light"] body {
  background: #d4c8b8;
}
html[data-skin="y2k"][data-theme="light"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(100,80,60,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,80,60,.4) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* DARK: 이미지 2,5 halftone dot 패턴 */
html[data-skin="y2k"][data-theme="dark"] body {
  background: #14172a;
}
html[data-skin="y2k"][data-theme="dark"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.18;
  background-image: radial-gradient(circle, #F5E6C8 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ── 창 공통 (raised 입체 테두리) ──────────── */
html[data-skin="y2k"] .setup-box,
html[data-skin="y2k"] #themePanel,
html[data-skin="y2k"] #shareModal .share-box,
html[data-skin="y2k"] .qj-box {
  border: 2px solid var(--border);
  box-shadow: var(--y2k-raised);
  border-radius: 4px;
}

html[data-skin="y2k"] .np,
html[data-skin="y2k"] .add-bar,
html[data-skin="y2k"] .side {
  border-color: var(--border);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}

/* ── 타이틀바 (이미지 1,3,4,6,7) ────────────
   .np-tag와 setup-logo 위에 컬러 타이틀바 삽입  */
/* y2k: .np-tag를 타이틀바로 사용 */
html[data-skin="y2k"] .np-tag {
  background: var(--y2k-title-bg);
  color: var(--y2k-title-fg) !important;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1px;
  border-bottom: 2px solid var(--border);
  margin: -16px -20px 12px;
  padding: 6px 8px;
  display: block;
}
html[data-skin="y2k"][data-theme="dark"] .np-tag {
  background: linear-gradient(90deg, #1e2238 0%, #2c3050 40%, #E8803A 100%);
  border-color: #F5E6C8;
  color: #F5E6C8 !important;
}

html[data-skin="y2k"] .setup-box::before {
  content: '♪ JUKEBOX.EXE  ─  □  ✕';
  display: block;
  height: 28px; line-height: 28px;
  padding: 0 8px;
  margin: -18px -18px 16px;
  background: var(--y2k-title-bg);
  color: var(--y2k-title-fg);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  border-bottom: 2px solid var(--border);
}
html[data-skin="y2k"][data-theme="dark"] .setup-box::before {
  background: linear-gradient(90deg, #1e2238, #E8803A);
  border-color: #F5E6C8;
}

/* ── 버튼 (이미지 1: raised, 이미지 2: 아웃라인) */
html[data-skin="y2k"] .btn-setup-primary,
html[data-skin="y2k"] .btn-add,
html[data-skin="y2k"] .act-btn,
html[data-skin="y2k"] .hc-btn,
html[data-skin="y2k"] .btn-vote {
  border: 2px solid var(--border);
  box-shadow: var(--y2k-raised);
  border-radius: 3px;
  transition: all .1s;
}
html[data-skin="y2k"] .btn-setup-primary:active,
html[data-skin="y2k"] .btn-add:active,
html[data-skin="y2k"] .act-btn:active {
  box-shadow: var(--y2k-sunken);
  transform: translate(1px, 1px);
}

/* dark 버튼: 이미지 2 스타일 두꺼운 아웃라인 pill */
html[data-skin="y2k"][data-theme="dark"] .btn-setup-primary,
html[data-skin="y2k"][data-theme="dark"] .btn-add {
  border: 2px solid #F5E6C8;
  border-radius: 40px;
  background: #1e2238;
  color: #F5E6C8;
  box-shadow: 0 0 0 1px #F5E6C8, 3px 3px 0 rgba(245,230,200,.2);
  letter-spacing: 3px;
}
html[data-skin="y2k"][data-theme="dark"] .btn-setup-primary {
  background: #E8803A;
  color: #14172a;
  border-color: #F5E6C8;
}

/* ── input (sunken 홈) ──────────────────────── */
html[data-skin="y2k"] .setup-input,
html[data-skin="y2k"] .add-url,
html[data-skin="y2k"] .add-nick,
html[data-skin="y2k"] .chat-in {
  border: 2px solid var(--border);
  box-shadow: var(--y2k-sunken);
  border-radius: 2px;
  background: var(--bg2);
}
html[data-skin="y2k"][data-theme="dark"] .setup-input,
html[data-skin="y2k"][data-theme="dark"] .add-url,
html[data-skin="y2k"][data-theme="dark"] .add-nick,
html[data-skin="y2k"][data-theme="dark"] .chat-in {
  border-color: #F5E6C8;
  color: #F5E6C8;
}

/* ── 큐 아이템 ────────────────────────────── */
html[data-skin="y2k"] .q-item {
  border: 1px solid var(--border);
  box-shadow: var(--y2k-raised);
  margin-bottom: 4px;
}
html[data-skin="y2k"][data-theme="dark"] .q-item {
  border-color: #F5E6C8;
  border-width: 1.5px;
}

/* ── 채팅 헤더 타이틀바 ─────────────────── */
html[data-skin="y2k"] .chat-hdr {
  background: var(--y2k-title-bg);
  color: var(--y2k-title-fg) !important;
  border-bottom: 2px solid var(--border);
  font-size: 11px; letter-spacing: 1px;
}
html[data-skin="y2k"][data-theme="dark"] .chat-hdr {
  background: linear-gradient(90deg, #1e2238, #E8803A);
  color: #F5E6C8 !important;
  border-color: #F5E6C8;
}
html[data-skin="y2k"] .chat-hdr::before { content: '✉ '; }

/* ── progress bar ────────────────────────── */
html[data-skin="y2k"] .progress-bar {
  height: 14px;
  background: var(--bg3);
  border: 2px solid var(--border);
  box-shadow: var(--y2k-sunken);
  border-radius: 2px;
  overflow: hidden;
}
html[data-skin="y2k"] .progress-fill {
  /* 이미지 1,4: 세그먼트 진행바 스타일 */
  background: repeating-linear-gradient(
    90deg,
    var(--acc) 0px, var(--acc) 10px,
    transparent 10px, transparent 12px
  );
  border-radius: 0;
  height: 100%;
}

/* ── add-bar ─────────────────────────────── */
html[data-skin="y2k"] .add-bar {
  background: var(--bg3);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}

/* ── 헤더 ────────────────────────────────── */
html[data-skin="y2k"] #headerEl {
  background: var(--y2k-title-bg);
  border-bottom: 2px solid var(--border);
  height: 36px;
}
html[data-skin="y2k"][data-theme="dark"] #headerEl {
  background: linear-gradient(90deg, #14172a 0%, #1e2238 60%, #2c3050 100%);
  border-bottom: 2px solid #F5E6C8;
}
html[data-skin="y2k"] .logo { color: #ffffff; }
html[data-skin="y2k"][data-theme="dark"] .logo { color: #F5E6C8; }
html[data-skin="y2k"] .room-pill,
html[data-skin="y2k"] .live-pill,
html[data-skin="y2k"] .host-badge {
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.2);
  border-radius: 2px;
}
html[data-skin="y2k"][data-theme="dark"] .room-pill {
  border-color: #F5E6C8;
  color: #F5E6C8;
}
html[data-skin="y2k"] .hbtn {
  border-color: rgba(255,255,255,.5);
  color: #fff;
  background: rgba(0,0,0,.2);
  border-radius: 2px;
}

/* ── 토스트 ──────────────────────────────── */
html[data-skin="y2k"] .toast {
  border: 2px solid var(--border2);
  box-shadow: var(--y2k-raised);
  border-radius: 3px;
}
html[data-skin="y2k"] .toast::before { content: '⚡ '; }

/* ═══ PIXEL BODY ══════════════════════════════ */
html[data-skin="pixel"] body {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* DARK: 블랙 배경 + 도트 매트릭스 패턴 (이미지 5,6) */
html[data-skin="pixel"][data-theme="dark"] body {
  background: #0c0e0a;
}
html[data-skin="pixel"][data-theme="dark"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.08;
  background-image: radial-gradient(circle, #e8e4c8 1px, transparent 1px);
  background-size: 6px 6px;
}

/* DARK: CRT scanlines (이미지 2) */
html[data-skin="pixel"][data-theme="dark"] body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 4px
  );
  pointer-events:none;
}

/* LIGHT: Game Boy Green — 밝은 배경 + 어두운 격자 */
html[data-skin="pixel"][data-theme="light"] body {
  background: #c4d44a;
}
html[data-skin="pixel"][data-theme="light"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(#0f380f 1px, transparent 1px),
    linear-gradient(90deg, #0f380f 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ── 모든 패널: 2px solid border + pixel shadow ──────────── */
html[data-skin="pixel"] .setup-box,
html[data-skin="pixel"] #themePanel,
html[data-skin="pixel"] #shareModal .share-box,
html[data-skin="pixel"] .qj-box,
html[data-skin="pixel"] .np,
html[data-skin="pixel"] .add-bar,
html[data-skin="pixel"] .side {
  border: 2px solid var(--border);
  image-rendering: pixelated;
}
html[data-skin="pixel"] .setup-box,
html[data-skin="pixel"] #themePanel,
html[data-skin="pixel"] #shareModal .share-box,
html[data-skin="pixel"] .qj-box {
  box-shadow: var(--shadow);
  background: var(--bg2);
}

/* ── 타이틀바 (이미지 1,3,6 창 스타일) ─────────────────── */
html[data-skin="pixel"] .setup-box::before {
  content: '> JUKEBOX.EXE';
  display: block;
  background: var(--px-color1);
  color: var(--px-color2);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 5px 8px;
  margin: -16px -16px 14px;
  letter-spacing: 1px;
  image-rendering: pixelated;
}
/* pixel: .np-tag를 타이틀바로 사용 */
html[data-skin="pixel"] .np-tag {
  background: var(--px-color1);
  color: var(--px-color2) !important;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 5px 8px;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--border);
  margin: -16px -20px 12px;
  display: block;
  line-height: 14px;
}
html[data-skin="pixel"] .chat-hdr {
  background: var(--px-color1) !important;
  color: var(--px-color2) !important;
  border-bottom: 2px solid var(--border);
  font-size: 7px;
}
html[data-skin="pixel"] .chat-hdr::before { content: '> '; }

/* ── 버튼 (이미지 5: +/- 스타일, raised) ─────────────────── */
html[data-skin="pixel"] .btn-setup-primary,
html[data-skin="pixel"] .btn-add,
html[data-skin="pixel"] .act-btn,
html[data-skin="pixel"] .hc-btn,
html[data-skin="pixel"] .btn-vote,
html[data-skin="pixel"] .hbtn {
  border: 2px solid var(--border);
  box-shadow: var(--px-raised);
  border-radius: 0;
  transition: all .05s;
  font-family: 'Press Start 2P', monospace;
}
html[data-skin="pixel"] .btn-setup-primary {
  background: var(--px-color1);
  color: var(--px-color2);
  font-size: 9px;
  padding: 12px;
  letter-spacing: 2px;
}
html[data-skin="pixel"] .btn-setup-primary:hover {
  box-shadow: var(--px-sunken);
}
html[data-skin="pixel"] .btn-setup-primary:active,
html[data-skin="pixel"] .btn-add:active,
html[data-skin="pixel"] .act-btn:active {
  box-shadow: var(--px-sunken);
  transform: translate(2px, 2px);
}

/* ── input (sunken) ──────────────────────────────────────── */
html[data-skin="pixel"] .setup-input,
html[data-skin="pixel"] .add-url,
html[data-skin="pixel"] .add-nick,
html[data-skin="pixel"] .chat-in,
html[data-skin="pixel"] .qj-input {
  border: 2px solid var(--border);
  box-shadow: var(--px-sunken);
  border-radius: 0;
  background: var(--bg3);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

/* ── 큐 아이템 ───────────────────────────────────────────── */
html[data-skin="pixel"] .q-item {
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 3px;
  background: var(--bg2);
}
html[data-skin="pixel"] .q-item:hover {
  background: var(--bg3);
}

/* ── 진행바 (이미지 5,6: 세그먼트 블록 스타일) ───────────── */
html[data-skin="pixel"] .progress-bar {
  height: 12px;
  background: var(--bg3);
  border: 2px solid var(--border);
  box-shadow: var(--px-sunken);
  overflow: hidden;
}
html[data-skin="pixel"] .progress-fill {
  background: repeating-linear-gradient(
    90deg,
    var(--px-color1) 0px,  var(--px-color1) 8px,
    var(--bg3)       8px,  var(--bg3)       10px
  );
  border-radius: 0;
  height: 100%;
}

/* ── 헤더 ────────────────────────────────────────────────── */
html[data-skin="pixel"] #headerEl {
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  height: 32px;
}
html[data-skin="pixel"] .logo {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--t0);
}
html[data-skin="pixel"] .room-pill {
  font-size: 7px;
  border: 2px solid var(--border);
  border-radius: 0;
  background: var(--bg2);
  color: var(--t0);
  box-shadow: var(--px-raised);
}
html[data-skin="pixel"] .host-badge {
  font-size: 7px;
  border-radius: 0;
  background: var(--px-color1);
  color: var(--px-color2);
}

/* ── NP thumb 픽셀 프레임 ────────────────────────────────── */
html[data-skin="pixel"] .np-thumb {
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  image-rendering: pixelated;
}

/* ── 스크롤바 ────────────────────────────────────────────── */
html[data-skin="pixel"] ::-webkit-scrollbar { width: 8px; }
html[data-skin="pixel"] ::-webkit-scrollbar-track {
  background: var(--bg2); border-left: 2px solid var(--border);
}
html[data-skin="pixel"] ::-webkit-scrollbar-thumb {
  background: var(--px-color1);
  border: 1px solid var(--bg);
}

/* ── 토스트 ──────────────────────────────────────────────── */
html[data-skin="pixel"] .toast {
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 0;
  font-size: 8px;
  letter-spacing: 1px;
}
html[data-skin="pixel"] .toast::before { content: '> '; }

/* ── vol-mini 슬라이더 픽셀 스타일 ──────────────────────── */
html[data-skin="pixel"] .vol-mini input[type=range] {
  accent-color: var(--px-color1);
  height: 6px;
}

/* 라이트 모드 텍스트 명시적 오버라이드 */
html[data-skin="pixel"][data-theme="light"] .np-title,
html[data-skin="pixel"][data-theme="light"] .np-artist,
html[data-skin="pixel"][data-theme="light"] .np-req,
html[data-skin="pixel"][data-theme="light"] .q-title,
html[data-skin="pixel"][data-theme="light"] .q-sub,
html[data-skin="pixel"][data-theme="light"] .queue-label,
html[data-skin="pixel"][data-theme="light"] .queue-count,
html[data-skin="pixel"][data-theme="light"] .np-time,
html[data-skin="pixel"][data-theme="light"] .msg-text,
html[data-skin="pixel"][data-theme="light"] .msg-nick,
html[data-skin="pixel"][data-theme="light"] .setup-label,
html[data-skin="pixel"][data-theme="light"] .setup-sub,
html[data-skin="pixel"][data-theme="light"] .add-nick,
html[data-skin="pixel"][data-theme="light"] .add-url,
html[data-skin="pixel"][data-theme="light"] .chat-in,
html[data-skin="pixel"][data-theme="light"] .room-pill,
html[data-skin="pixel"][data-theme="light"] .live-pill,
html[data-skin="pixel"][data-theme="light"] .loop-badge,
html[data-skin="pixel"][data-theme="light"] .act-btn,
html[data-skin="pixel"][data-theme="light"] .hc-btn,
html[data-skin="pixel"][data-theme="light"] .hbtn { color: #0a2a0a; }

html[data-skin="pixel"][data-theme="light"] .setup-input { color: #0a2a0a; }
html[data-skin="pixel"][data-theme="light"] .setup-logo  { color: #0a2a0a; }
html[data-skin="pixel"][data-theme="light"] .logo        { color: #0a2a0a; }
html[data-skin="pixel"][data-theme="light"] .np-tag      { color: #0f380f; }
html[data-skin="pixel"][data-theme="light"] .progress-times { color: #0f380f; }

html[data-skin="pixel"][data-theme="light"] .btn-setup-primary {
  background: #0f380f;
  color: #c4d44a;
  border-color: #0a2a0a;
}
html[data-skin="pixel"][data-theme="light"] .btn-setup-secondary {
  border-color: #0f380f;
  color: #0f380f;
}
html[data-skin="pixel"][data-theme="light"] .btn-add {
  background: #0f380f;
  color: #c4d44a;
  border-color: #0a2a0a;
}
html[data-skin="pixel"][data-theme="light"] #headerEl {
  background: #0f380f;
  border-color: #0a2a0a;
}
html[data-skin="pixel"][data-theme="light"] #headerEl .logo,
html[data-skin="pixel"][data-theme="light"] #headerEl .room-pill,
html[data-skin="pixel"][data-theme="light"] #headerEl .live-pill,
html[data-skin="pixel"][data-theme="light"] #headerEl .hbtn { color: #c4d44a; }
html[data-skin="pixel"][data-theme="light"] #headerEl .room-pill {
  background: rgba(0,0,0,.3); border-color: #c4d44a;
}

/* ═══ POP BODY ════════════════════════════════ */

/* LIGHT: 로열 블루 + 이중 체커보드 (이미지 6) */
html[data-skin="pop"][data-theme="light"] body {
  background: #1a35e0;
}
html[data-skin="pop"][data-theme="light"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.04;
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
}

/* DARK: 블랙 + 별/점 패턴 (이미지 4,5) */
html[data-skin="pop"][data-theme="dark"] body {
  background: #050508;
}
html[data-skin="pop"][data-theme="dark"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.08;
  background-image:
    radial-gradient(circle, #00e5ff 1px, transparent 1px),
    radial-gradient(circle, #ff2d78 1px, transparent 1px);
  background-size: 30px 30px, 50px 50px;
  background-position: 0 0, 15px 15px;
}

/* ── 카드 공통 — 두꺼운 검정 아웃라인 (이미지 1,6,7) ──── */
html[data-skin="pop"][data-theme="light"] .setup-box,
html[data-skin="pop"][data-theme="light"] #themePanel,
html[data-skin="pop"][data-theme="light"] #shareModal .share-box,
html[data-skin="pop"][data-theme="light"] .qj-box {
  border: var(--pop-outline);
  box-shadow: 5px 5px 0 #000;
  background: #fff;
  border-radius: 8px;
}
html[data-skin="pop"][data-theme="dark"] .setup-box,
html[data-skin="pop"][data-theme="dark"] #themePanel,
html[data-skin="pop"][data-theme="dark"] #shareModal .share-box,
html[data-skin="pop"][data-theme="dark"] .qj-box {
  border: 2px solid #00e5ff;
  box-shadow: 0 0 0 1px #ff2d78, 4px 4px 0 rgba(0,229,255,.3);
  background: #0e0e18;
}

/* ── NP 패널 ─────────────────────────────────────────── */
html[data-skin="pop"][data-theme="light"] .np {
  background: #fff;
  border-bottom: var(--pop-outline);
  position: relative;
}
html[data-skin="pop"][data-theme="dark"] .np {
  background: #0e0e18;
  border-bottom: 2px solid #00e5ff;
}

/* ── 타이틀바 스트라이프 (이미지 1,6) ──────────────── */
/* pop light: .np-tag를 타이틀바로 사용 */
html[data-skin="pop"][data-theme="light"] .np-tag {
  background: #ff4500;
  color: #fff !important;
  font-family: 'Nunito', sans-serif;
  font-size: 10px; font-weight: 900;
  text-align: center; letter-spacing: 3px;
  border-bottom: 3px solid #000;
  margin: -16px -20px 12px;
  padding: 5px 20px;
  display: block;
  justify-content: center;
}

/* pop dark: .np-tag를 타이틀바로 사용 */
html[data-skin="pop"][data-theme="dark"] .np-tag {
  background: #0e0e18;
  border-left: 4px solid #00e5ff;
  border-bottom: 1px solid #00e5ff;
  color: #00e5ff !important;
  font-size: 10px; font-weight: 900;
  letter-spacing: 3px;
  margin: -16px -20px 12px;
  padding: 5px 20px;
  display: block;
}

html[data-skin="pop"][data-theme="light"] .setup-box::before {
  content: '♪ JUKEBOX ♪';
  display: block;
  background: #1a35e0;
  color: #ffe000; font-weight: 900;
  font-size: 10px; letter-spacing: 3px; text-align: center;
  padding: 6px 0;
  margin: -18px -18px 16px;
  border-bottom: 3px solid #000;
  text-shadow: 1px 1px 0 #000;
}
html[data-skin="pop"][data-theme="dark"] .setup-box::before {
  content: '♪ JUKEBOX ♪';
  display: block;
  background: linear-gradient(90deg, #00e5ff 0%, #ff2d78 50%, #ffe000 100%);
  color: #000; font-weight: 900;
  font-size: 10px; letter-spacing: 3px; text-align: center;
  padding: 6px 0;
  margin: -18px -18px 16px;
  border-bottom: 2px solid #00e5ff;
}

/* ── 버튼 (이미지 1: 검정 아웃라인 + 컬러 fill) ──────── */
html[data-skin="pop"][data-theme="light"] .btn-setup-primary,
html[data-skin="pop"][data-theme="light"] .btn-add {
  background: #ff4500;
  color: #fff;
  border: var(--pop-outline);
  box-shadow: 4px 4px 0 #000;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 6px;
  transition: all .1s;
}
html[data-skin="pop"][data-theme="light"] .btn-setup-primary:hover,
html[data-skin="pop"][data-theme="light"] .btn-add:hover {
  background: #ffe000;
  color: #000;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #000;
}
html[data-skin="pop"][data-theme="light"] .btn-setup-primary:active,
html[data-skin="pop"][data-theme="light"] .btn-add:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #000;
}
html[data-skin="pop"][data-theme="dark"] .btn-setup-primary,
html[data-skin="pop"][data-theme="dark"] .btn-add {
  background: #00e5ff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 0 0 12px rgba(0,229,255,.5), 3px 3px 0 #000;
  font-weight: 900; border-radius: 6px;
}
html[data-skin="pop"][data-theme="dark"] .btn-setup-primary:hover,
html[data-skin="pop"][data-theme="dark"] .btn-add:hover {
  background: #ff2d78;
  box-shadow: 0 0 20px rgba(255,45,120,.6), 3px 3px 0 #000;
}

/* ── 액션 버튼 ────────────────────────────────────────── */
html[data-skin="pop"][data-theme="light"] .act-btn,
html[data-skin="pop"][data-theme="light"] .hc-btn {
  background: #ffe000;
  color: #000;
  border: var(--pop-outline2);
  box-shadow: 2px 2px 0 #000;
  font-weight: 700;
  border-radius: 5px;
}
html[data-skin="pop"][data-theme="light"] .act-btn:hover { background: #ff4500; color: #fff; }
html[data-skin="pop"][data-theme="dark"] .act-btn,
html[data-skin="pop"][data-theme="dark"] .hc-btn {
  border: 1px solid #00e5ff;
  box-shadow: 0 0 6px rgba(0,229,255,.3);
}

/* ── input ────────────────────────────────────────────── */
html[data-skin="pop"][data-theme="light"] .setup-input,
html[data-skin="pop"][data-theme="light"] .add-url,
html[data-skin="pop"][data-theme="light"] .add-nick,
html[data-skin="pop"][data-theme="light"] .chat-in,
html[data-skin="pop"][data-theme="light"] .qj-input {
  border: var(--pop-outline2);
  background: #fff;
  color: #000;
  box-shadow: 2px 2px 0 #000;
  border-radius: 5px;
}
html[data-skin="pop"][data-theme="dark"] .setup-input,
html[data-skin="pop"][data-theme="dark"] .add-url,
html[data-skin="pop"][data-theme="dark"] .add-nick,
html[data-skin="pop"][data-theme="dark"] .chat-in {
  border: 1px solid #00e5ff;
  background: #181828;
  color: #fff;
  box-shadow: 0 0 8px rgba(0,229,255,.2);
}

/* ── 큐 아이템 ────────────────────────────────────────── */
html[data-skin="pop"][data-theme="light"] .q-item {
  border: var(--pop-outline2);
  box-shadow: 2px 2px 0 #000;
  background: #fff;
  border-radius: 6px;
}
html[data-skin="pop"][data-theme="light"] .q-item:hover {
  background: #ffe000;
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 #000;
}
html[data-skin="pop"][data-theme="dark"] .q-item {
  border: 1px solid rgba(0,229,255,.3);
  box-shadow: 0 0 6px rgba(0,229,255,.1);
}

/* ── 진행바 (이미지 6: 비비드 레인보우) ──────────────── */
html[data-skin="pop"][data-theme="light"] .progress-bar {
  height: 12px;
  background: rgba(0,0,0,.1);
  border: var(--pop-outline2);
  border-radius: 4px;
  overflow: hidden;
}
html[data-skin="pop"][data-theme="light"] .progress-fill {
  background: repeating-linear-gradient(
    90deg,
    #ff4500 0px, #ff4500 20px,
    #ffe000 20px, #ffe000 40px,
    #00cc44 40px, #00cc44 60px,
    #1a35e0 60px, #1a35e0 80px,
    #ff2d78 80px, #ff2d78 100px
  );
  border-radius: 3px;
}
html[data-skin="pop"][data-theme="dark"] .progress-fill {
  background: linear-gradient(90deg, #00e5ff, #ff2d78, #ffe000);
  box-shadow: 0 0 8px rgba(0,229,255,.5);
}

/* ── 헤더 ─────────────────────────────────────────────── */
html[data-skin="pop"][data-theme="light"] #headerEl {
  background: #1a35e0;
  border-bottom: 3px solid #000;
  /* 하단에만 얇은 레인보우 라인 — 덜 자극적 */
  box-shadow: 0 3px 0 #ffe000, 0 6px 0 #ff4500, 0 9px 0 #ff2d78;
  height: 52px;
  padding-bottom: 9px;
}
html[data-skin="pop"][data-theme="light"] #headerEl .logo { color: #fff; text-shadow: 2px 2px 0 #000; }
html[data-skin="pop"][data-theme="light"] #headerEl .room-pill {
  background: #ffe000; color: #000; border: 2px solid #000;
  box-shadow: 2px 2px 0 #000; border-radius: 4px;
}
html[data-skin="pop"][data-theme="light"] #headerEl .host-badge {
  background: #ff4500; color: #fff; border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}
html[data-skin="pop"][data-theme="light"] #headerEl .hbtn {
  background: rgba(255,255,255,.9); color: #000;
  border: 2px solid #000; box-shadow: 2px 2px 0 #000;
  border-radius: 4px;
}
html[data-skin="pop"][data-theme="dark"] #headerEl {
  background: #050508;
  border-bottom: 2px solid #00e5ff;
  box-shadow: 0 2px 20px rgba(0,229,255,.2);
}

/* ── 채팅 헤더 ────────────────────────────────────────── */
html[data-skin="pop"][data-theme="light"] .chat-hdr {
  background: #1a35e0;
  color: #ffe000 !important;
  border-bottom: 3px solid #000;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2px;
}
html[data-skin="pop"][data-theme="dark"] .chat-hdr {
  background: linear-gradient(90deg, #050508, #0e0e18);
  color: #00e5ff !important;
  border-bottom: 2px solid #00e5ff;
}

/* ── 토스트 ───────────────────────────────────────────── */
html[data-skin="pop"][data-theme="light"] .toast {
  border: var(--pop-outline2);
  box-shadow: 3px 3px 0 #000;
  background: #ffe000;
  color: #000;
  font-weight: 900;
  border-radius: 6px;
}
html[data-skin="pop"][data-theme="dark"] .toast {
  border: 2px solid #00e5ff;
  box-shadow: 0 0 16px rgba(0,229,255,.4);
  background: #0e0e18;
}

/* ── 공유/빠른입장 모달 light 텍스트 ─────────────────── */
html[data-skin="pop"][data-theme="light"] .setup-box,
html[data-skin="pop"][data-theme="light"] #themePanel,
html[data-skin="pop"][data-theme="light"] .qj-box {
  color: #000;
}
html[data-skin="pop"][data-theme="light"] .setup-label,
html[data-skin="pop"][data-theme="light"] .setup-sub,
html[data-skin="pop"][data-theme="light"] .setup-input,
html[data-skin="pop"][data-theme="light"] .tp-label,
html[data-skin="pop"][data-theme="light"] .tp-title { color: #000 !important; }
html[data-skin="pop"][data-theme="light"] .setup-logo { color: #1a35e0; text-shadow: 2px 2px 0 #000; }
html[data-skin="pop"][data-theme="light"] .qj-logo   { color: #ff4500; text-shadow: 2px 2px 0 #000; }
html[data-skin="pop"][data-theme="light"] .qj-room em { color: #1a35e0; }
html[data-skin="pop"][data-theme="light"] .btn-setup-secondary {
  border: 2px solid #000; color: #000; background: rgba(255,255,255,.8);
  box-shadow: 2px 2px 0 #000; border-radius: 5px;
}

/* ═══ ANIMALS BODY ═════════════════════════════ */

/* LIGHT: 이미지 1,3 — 파스텔 3색 그라디언트 */
html[data-skin="animals"][data-theme="light"] body {
  background: linear-gradient(135deg,
    #ffd6e8 0%, #f5e8ff 25%,
    #e8f0ff 50%, #d8f8f0 75%,
    #fdf0f8 100%);
}
/* 연보라 그리드 (이미지 3) */
html[data-skin="animals"][data-theme="light"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(#e0c8f0 1px, transparent 1px),
    linear-gradient(90deg, #e0c8f0 1px, transparent 1px);
  background-size: 24px 24px;
}

/* DARK: 라이트와 같은 핑크-민트-블루 계열, 어두운 버전 */
html[data-skin="animals"][data-theme="dark"] body {
  background: linear-gradient(135deg,
    #2a1428 0%, #261830 40%,
    #1e2030 70%, #241828 100%) !important;
}
html[data-skin="animals"][data-theme="dark"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(rgba(200,136,168,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,136,168,.6) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── 카드 기본 — 흰 + 파스텔 아웃라인 + 큰 radius ────── */
html[data-skin="animals"][data-theme="light"] .setup-box,
html[data-skin="animals"][data-theme="light"] #themePanel,
html[data-skin="animals"][data-theme="light"] #shareModal .share-box,
html[data-skin="animals"][data-theme="light"] .qj-box {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--ani-r);
  box-shadow: var(--shadow);
}
html[data-skin="animals"][data-theme="dark"] .setup-box,
html[data-skin="animals"][data-theme="dark"] #themePanel,
html[data-skin="animals"][data-theme="dark"] #shareModal .share-box,
html[data-skin="animals"][data-theme="dark"] .qj-box {
  background: #241630;
  border: 2px solid var(--border);
  border-radius: var(--ani-r);
  box-shadow: 0 4px 0 #8a5070, 0 8px 32px rgba(0,0,0,.6);
}

/* ── 타이틀바 (이미지 1,2 — 파스텔 창문) ────────────── */
html[data-skin="animals"][data-theme="light"] .np-tag {
  background: var(--ani-title-pink);
  color: #cc4488 !important;
  font-weight: 900; font-size: 11px; letter-spacing: 1px;
  border-bottom: 2px solid var(--border);
  border-radius: var(--ani-r) var(--ani-r) 0 0;
  margin: -16px -20px 12px;
  padding: 7px 16px;
  display: flex; align-items: center; gap: 6px;
}
html[data-skin="animals"][data-theme="light"] .np-tag::after {
  content: '○ ○ ○';
  margin-left: auto;
  font-size: 10px;
  color: #f9c8dc;
  letter-spacing: 3px;
  text-shadow: 0 0 0 #ff6699, 4px 0 0 #ffcc44, 8px 0 0 #88dd88;
}
html[data-skin="animals"][data-theme="dark"] .np-tag {
  background: var(--ani-title-pink);
  color: #e0aad0 !important;
  font-weight: 900; font-size: 11px;
  border-bottom: 2px solid var(--border);
  border-radius: var(--ani-r) var(--ani-r) 0 0;
  margin: -16px -20px 12px;
  padding: 7px 16px;
  display: flex; align-items: center; gap: 6px;
}
html[data-skin="animals"][data-theme="dark"] .np-tag::after {
  content: '○ ○ ○';
  margin-left: auto; font-size:10px;
  color: #c088a8; letter-spacing:3px;
}

/* ── 셋업 창 타이틀바 ────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] .setup-box::before {
  content: '🐾 JUKEBOX';
  display: block;
  background: var(--ani-title-blue);
  color: #4488cc;
  font-weight: 900; font-size: 11px; letter-spacing: 2px;
  text-align: left; padding: 7px 16px;
  margin: -18px -18px 16px;
  border-bottom: 2px solid var(--border2);
  border-radius: var(--ani-r) var(--ani-r) 0 0;
}
html[data-skin="animals"][data-theme="dark"] .setup-box::before {
  content: '🌙 JUKEBOX';
  display: block;
  background: var(--ani-title-blue);
  color: #88aad0;
  font-weight: 900; font-size: 11px; letter-spacing: 2px;
  text-align: left; padding: 7px 16px;
  margin: -18px -18px 16px;
  border-bottom: 2px solid var(--border);
  border-radius: var(--ani-r) var(--ani-r) 0 0;
}

/* ── NP 패널 ─────────────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] .np {
  background: #fff;
  border-bottom: 2px solid var(--border);
}
html[data-skin="animals"][data-theme="dark"] .np {
  background: #241630;
  border-bottom: 2px solid var(--border);
}

/* ── 버튼 (이미지 1 — 파스텔 pill) ──────────────────── */
html[data-skin="animals"][data-theme="light"] .btn-setup-primary,
html[data-skin="animals"][data-theme="light"] .btn-add {
  background: #ff99bb;
  color: #fff;
  border: 2px solid #ee6699;
  border-radius: 999px;
  box-shadow: 0 4px 0 #ee6699;
  font-weight: 900; font-size: 15px;
  transition: all .1s;
}
html[data-skin="animals"][data-theme="light"] .btn-setup-primary:hover,
html[data-skin="animals"][data-theme="light"] .btn-add:hover {
  background: #88ddcc;
  border-color: #55bbaa;
  box-shadow: 0 4px 0 #55bbaa;
  color: #fff;
}
html[data-skin="animals"][data-theme="light"] .btn-setup-primary:active,
html[data-skin="animals"][data-theme="light"] .btn-add:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #ee6699;
}
html[data-skin="animals"][data-theme="light"] .btn-setup-secondary {
  border: 2px solid var(--border); color: var(--t1);
  border-radius: 999px; font-weight: 700;
}
html[data-skin="animals"][data-theme="dark"] .btn-setup-primary,
html[data-skin="animals"][data-theme="dark"] .btn-add {
  background: #cc7799;    /* 라이트 핑크의 어두운 버전 */
  color: #fff;
  border: 2px solid #aa5577;
  border-radius: 999px;
  box-shadow: 0 4px 0 #aa5577;
  font-weight: 900;
}
html[data-skin="animals"][data-theme="dark"] .btn-setup-primary:hover,
html[data-skin="animals"][data-theme="dark"] .btn-add:hover {
  background: #55aa99; border-color: #338877;
  box-shadow: 0 4px 0 #338877;
}
html[data-skin="animals"][data-theme="dark"] .btn-setup-primary:active,
html[data-skin="animals"][data-theme="dark"] .btn-add:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #aa5577;
}

/* ── 액션 버튼 ────────────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] .act-btn,
html[data-skin="animals"][data-theme="light"] .hc-btn {
  background: #f5f0ff;
  border: 2px solid var(--border);
  border-radius: 999px;
  color: var(--t1);
  font-weight: 700;
  box-shadow: 0 3px 0 var(--border);
  transition: all .1s;
}
html[data-skin="animals"][data-theme="light"] .act-btn:hover { background: #ffd6e8; border-color: #ff99bb; }
html[data-skin="animals"][data-theme="light"] .act-btn:active { transform:translateY(2px); box-shadow: 0 1px 0 var(--border); }

/* ── input ────────────────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] .setup-input,
html[data-skin="animals"][data-theme="light"] .add-url,
html[data-skin="animals"][data-theme="light"] .add-nick,
html[data-skin="animals"][data-theme="light"] .chat-in,
html[data-skin="animals"][data-theme="light"] .qj-input {
  border: 2px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--t0);
  padding: 9px 16px;
}
html[data-skin="animals"][data-theme="light"] .setup-input {
  border-radius: 12px;
}

/* ── 큐 아이템 (이미지 1 — 둥근 카드) ────────────────── */
html[data-skin="animals"][data-theme="light"] .q-item {
  border: 2px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 var(--border);
  transition: all .15s;
}
html[data-skin="animals"][data-theme="light"] .q-item:hover {
  background: #fdf0f8;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border);
}
html[data-skin="animals"][data-theme="dark"] .q-item {
  background: #241630;
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 3px 0 #8a5070;
}
html[data-skin="animals"][data-theme="dark"] .q-item:hover {
  background: #2e1e3a;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #8a5070;
}

/* ── 진행바 (하트 모양 핸들) ──────────────────────────── */
html[data-skin="animals"] .progress-bar {
  height: 8px;
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 999px;
}
html[data-skin="animals"][data-theme="light"] .progress-fill {
  background: linear-gradient(90deg, #ff99bb, #bb88ee, #88ccff);
  border-radius: 999px;
}
html[data-skin="animals"][data-theme="dark"] .progress-fill {
  background: linear-gradient(90deg, #aa8833, #cc6644);
  border-radius: 999px;
}

/* ── 헤더 ─────────────────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] #headerEl {
  background: linear-gradient(90deg, #ffd6e8 0%, #e8d6ff 50%, #d6eeff 100%);
  border-bottom: 2px solid var(--border);
}
html[data-skin="animals"][data-theme="light"] #headerEl .logo {
  color: #cc4488; text-shadow: 1px 1px 0 rgba(255,150,200,.3);
}
html[data-skin="animals"][data-theme="light"] #headerEl .room-pill {
  background: #fff; border: 2px solid var(--border);
  border-radius: 999px; color: var(--t1);
  box-shadow: 0 2px 0 var(--border);
}
html[data-skin="animals"][data-theme="light"] #headerEl .host-badge {
  background: #ff99bb; color: #fff;
  border: 2px solid #ee6699; border-radius: 999px;
  box-shadow: 0 2px 0 #ee6699;
}
html[data-skin="animals"][data-theme="dark"] #headerEl {
  background: #1e1030;
  border-bottom: 2px solid var(--border);
}
html[data-skin="animals"][data-theme="dark"] .add-bar {
  background: #1c0e2a;
  border-bottom: 2px solid var(--border);
}
html[data-skin="animals"][data-theme="dark"] .chat-msgs {
  background: #160d1e;
}
html[data-skin="animals"][data-theme="dark"] .queue-wrap {
  background: #160d1e;
}
html[data-skin="animals"][data-theme="dark"] .side {
  background: #1e1030;
  border-left: 2px solid var(--border);
}

/* ── 채팅 헤더 ────────────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] .chat-hdr {
  background: var(--ani-title-blue);
  color: #4488cc !important;
  border-bottom: 2px solid var(--border2);
  font-weight: 900; font-size: 11px;
}
html[data-skin="animals"][data-theme="dark"] .chat-hdr {
  background: var(--ani-title-blue);
  color: #88aad0 !important;
  border-bottom: 2px solid var(--border2);
  font-weight: 900;
}

/* ── 토스트 ───────────────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] .toast {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--t1);
  font-weight: 700;
}
html[data-skin="animals"][data-theme="light"] .toast::before { content: '🐾 '; }
html[data-skin="animals"][data-theme="dark"] .toast::before  { content: '🌙 '; }

/* ── 공통 텍스트 light ────────────────────────────────── */
html[data-skin="animals"][data-theme="light"] .np-title,
html[data-skin="animals"][data-theme="light"] .q-title { color: #3d2255; font-weight: 700; }
html[data-skin="animals"][data-theme="light"] .np-artist,
html[data-skin="animals"][data-theme="light"] .q-sub   { color: #bb88cc; }

/* 솜사탕: 소프트 그라디언트 */
/* ═══ CANDY BODY ════════════════════════════ */

/* LIGHT: 흰 배경 + 핑크/하늘 도트 (이미지 5) */
html[data-skin="candy"][data-theme="light"] body {
  background: #fff5fa;
}
html[data-skin="candy"][data-theme="light"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.25;
  background-image:
    radial-gradient(circle, #ffb3d1 1.5px, transparent 1.5px),
    radial-gradient(circle, #b3e5fc 1.5px, transparent 1.5px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}

/* DARK: 딥 다크 + 핑크 글로우 (이미지 2) */
html[data-skin="candy"][data-theme="dark"] body {
  background: #1a1220;
}
html[data-skin="candy"][data-theme="dark"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.08;
  background-image: radial-gradient(circle, #ff69b4 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ── 카드 (이미지 1,2,3,4 — 흰/다크 카드) ──────────── */
html[data-skin="candy"][data-theme="light"] .setup-box,
html[data-skin="candy"][data-theme="light"] #themePanel,
html[data-skin="candy"][data-theme="light"] #shareModal .share-box,
html[data-skin="candy"][data-theme="light"] .qj-box {
  background: #fff;
  border: 2px solid var(--cc-pink-soft);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
html[data-skin="candy"][data-theme="dark"] .setup-box,
html[data-skin="candy"][data-theme="dark"] #themePanel,
html[data-skin="candy"][data-theme="dark"] #shareModal .share-box,
html[data-skin="candy"][data-theme="dark"] .qj-box {
  background: #261830;
  border: 2px solid var(--cc-pink);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* ── 타이틀바 (핑크 그라디언트) ─────────────────────── */
html[data-skin="candy"][data-theme="light"] .np-tag {
  background: linear-gradient(90deg, var(--cc-pink-soft), var(--cc-blue-soft));
  color: #fff !important;
  font-weight: 900; font-size: 11px; letter-spacing: 1px;
  border-bottom: 2px solid var(--cc-pink-soft);
  border-radius: 999px 999px 0 0;
  margin: -16px -20px 12px;
  padding: 7px 16px;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 2px rgba(255,105,180,.4);
}
html[data-skin="candy"][data-theme="light"] .np-tag::after {
  content: '♡ ☆ ♡';
  margin-left: auto; font-size: 10px; color: #fff; letter-spacing: 4px;
}
html[data-skin="candy"][data-theme="dark"] .np-tag {
  background: linear-gradient(90deg, #cc3388, #3388cc);
  color: #fff !important;
  font-weight: 900; font-size: 11px;
  border-bottom: 2px solid var(--cc-pink);
  border-radius: 999px 999px 0 0;
  margin: -16px -20px 12px;
  padding: 7px 16px;
  display: flex; align-items: center; gap: 6px;
}
html[data-skin="candy"][data-theme="dark"] .np-tag::after {
  content: '♡ ☆ ♡';
  margin-left: auto; font-size: 10px; color: rgba(255,255,255,.7);
}

/* ── 셋업 타이틀바 ────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] .setup-box::before {
  content: '☁ JUKEBOX ☁';
  display: block;
  background: linear-gradient(90deg, var(--cc-pink-soft), var(--cc-blue-soft));
  color: #fff; font-weight: 900; font-size: 11px; letter-spacing: 2px;
  text-align: center; padding: 8px 18px;
  margin: -18px -18px 16px;
  border-bottom: 2px solid var(--cc-pink-soft);
  border-radius: 26px 26px 0 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}
html[data-skin="candy"][data-theme="dark"] .setup-box::before {
  content: '☁ JUKEBOX ☁';
  display: block;
  background: linear-gradient(90deg, #cc3388, #3388cc);
  color: #fff; font-weight: 900; font-size: 11px; letter-spacing: 2px;
  text-align: center; padding: 8px 18px;
  margin: -18px -18px 16px;
  border-bottom: 2px solid var(--cc-pink);
  border-radius: 26px 26px 0 0;
}

/* ── NP 패널 ─────────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] .np {
  background: #fff;
  border-bottom: 2px solid var(--cc-pink-soft);
}
html[data-skin="candy"][data-theme="dark"] .np {
  background: #261830;
  border-bottom: 2px solid var(--cc-pink);
}

/* ── 버튼 (이미지 2: 두꺼운 pill + 진한 하단 그림자) ── */
html[data-skin="candy"][data-theme="light"] .btn-setup-primary,
html[data-skin="candy"][data-theme="light"] .btn-add {
  background: linear-gradient(90deg, var(--cc-pink), var(--cc-pink-soft));
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 5px 0 #e05090, 0 8px 20px rgba(255,105,180,.3);
  font-weight: 900; font-size: 15px;
  transition: all .12s;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
html[data-skin="candy"][data-theme="light"] .btn-setup-primary:hover,
html[data-skin="candy"][data-theme="light"] .btn-add:hover {
  background: linear-gradient(90deg, var(--cc-blue), var(--cc-blue-soft));
  box-shadow: 0 5px 0 #3a9acc, 0 8px 20px rgba(91,200,245,.3);
  transform: translateY(-1px);
}
html[data-skin="candy"][data-theme="light"] .btn-setup-primary:active,
html[data-skin="candy"][data-theme="light"] .btn-add:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #e05090;
}
html[data-skin="candy"][data-theme="light"] .btn-setup-secondary {
  border: 2px solid var(--cc-blue-soft);
  color: var(--cc-blue);
  border-radius: 999px; font-weight: 700;
  background: #fff;
}
html[data-skin="candy"][data-theme="dark"] .btn-setup-primary,
html[data-skin="candy"][data-theme="dark"] .btn-add {
  background: linear-gradient(90deg, #ff69b4, #cc3388);
  color: #fff; border: none; border-radius: 999px;
  box-shadow: 0 5px 0 #aa2266, 0 8px 20px rgba(255,105,180,.4);
  font-weight: 900;
  transition: all .12s;
}
html[data-skin="candy"][data-theme="dark"] .btn-setup-primary:hover,
html[data-skin="candy"][data-theme="dark"] .btn-add:hover {
  background: linear-gradient(90deg, var(--cc-blue), #3388cc);
  box-shadow: 0 5px 0 #226688;
}
html[data-skin="candy"][data-theme="dark"] .btn-setup-primary:active,
html[data-skin="candy"][data-theme="dark"] .btn-add:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #aa2266;
}

/* ── 액션 버튼 ────────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] .act-btn,
html[data-skin="candy"][data-theme="light"] .hc-btn,
html[data-skin="candy"][data-theme="light"] .loop-badge {
  background: #fff;
  border: 2px solid var(--cc-pink-soft);
  border-radius: 999px; color: var(--cc-pink);
  font-weight: 700;
  box-shadow: 0 3px 0 var(--cc-pink-soft);
  transition: all .1s;
}
html[data-skin="candy"][data-theme="light"] .act-btn:hover { 
  background: var(--cc-pink-pale); 
  box-shadow: 0 4px 0 var(--cc-pink-soft);
  transform: translateY(-1px);
}
html[data-skin="candy"][data-theme="light"] .act-btn:active { 
  transform: translateY(2px); box-shadow: 0 1px 0 var(--cc-pink-soft);
}

/* ── input ────────────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] .setup-input,
html[data-skin="candy"][data-theme="light"] .add-url,
html[data-skin="candy"][data-theme="light"] .add-nick,
html[data-skin="candy"][data-theme="light"] .chat-in,
html[data-skin="candy"][data-theme="light"] .qj-input {
  border: 2px solid var(--cc-pink-soft);
  border-radius: 999px;
  background: #fff;
  color: #4a1a3a;
  padding: 9px 16px;
  box-shadow: inset 0 2px 4px rgba(255,180,210,.15);
}
html[data-skin="candy"][data-theme="light"] .setup-input {
  border-radius: 16px;
}
html[data-skin="candy"][data-theme="dark"] .setup-input,
html[data-skin="candy"][data-theme="dark"] .add-url,
html[data-skin="candy"][data-theme="dark"] .add-nick,
html[data-skin="candy"][data-theme="dark"] .chat-in {
  border: 2px solid var(--cc-pink);
  border-radius: 999px;
  background: #1a1220;
  color: var(--t0);
}

/* ── 큐 아이템 (이미지 1 — 흰 pill 카드) ─────────── */
html[data-skin="candy"][data-theme="light"] .q-item {
  background: #fff;
  border: 2px solid var(--cc-pink-soft);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--cc-pink-soft);
  transition: all .15s;
}
html[data-skin="candy"][data-theme="light"] .q-item:hover {
  background: var(--cc-pink-pale);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--cc-pink-soft);
}
html[data-skin="candy"][data-theme="dark"] .q-item {
  background: #261830;
  border: 2px solid rgba(255,105,180,.4);
  border-radius: 18px;
  box-shadow: 0 3px 0 rgba(255,105,180,.3);
}
html[data-skin="candy"][data-theme="dark"] .q-item:hover {
  background: #301e3a;
  transform: translateY(-2px);
}

/* ── 진행바 (이미지 2: 핑크→하늘 그라디언트) ────── */
html[data-skin="candy"] .progress-bar {
  height: 10px;
  background: var(--bg3);
  border-radius: 999px;
  overflow: hidden;
}
html[data-skin="candy"][data-theme="light"] .progress-fill {
  background: linear-gradient(90deg, var(--cc-pink), var(--cc-blue));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255,105,180,.4);
}
html[data-skin="candy"][data-theme="dark"] .progress-fill {
  background: linear-gradient(90deg, var(--cc-pink), var(--cc-blue));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,105,180,.5);
}

/* ── 헤더 ─────────────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] #headerEl {
  background: linear-gradient(90deg, var(--cc-pink-pale), #fff, var(--cc-blue-pale));
  border-bottom: 2px solid var(--cc-pink-soft);
}
html[data-skin="candy"][data-theme="light"] #headerEl .logo {
  background: linear-gradient(90deg, var(--cc-pink), var(--cc-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-skin="candy"][data-theme="light"] .room-pill {
  background: #fff;
  border: 2px solid var(--cc-pink-soft);
  border-radius: 999px;
  color: var(--cc-pink);
  box-shadow: 0 2px 0 var(--cc-pink-soft);
}
html[data-skin="candy"][data-theme="light"] .host-badge {
  background: linear-gradient(90deg, var(--cc-pink), var(--cc-blue));
  color: #fff; border: none; border-radius: 999px;
  box-shadow: 0 2px 0 #cc3388;
}
html[data-skin="candy"][data-theme="dark"] #headerEl {
  background: linear-gradient(90deg, #1a1220, #261830);
  border-bottom: 2px solid var(--cc-pink);
}

/* ── 채팅 ─────────────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] .chat-hdr {
  background: linear-gradient(90deg, var(--cc-pink-soft), var(--cc-blue-soft));
  color: #fff !important;
  border-bottom: 2px solid var(--cc-pink-soft);
  font-weight: 900; font-size: 11px;
}
html[data-skin="candy"][data-theme="dark"] .chat-hdr {
  background: linear-gradient(90deg, #cc3388, #3388cc);
  color: #fff !important;
  border-bottom: 2px solid var(--cc-pink);
  font-weight: 900;
}
html[data-skin="candy"][data-theme="light"] .chat-msgs,
html[data-skin="candy"][data-theme="light"] .queue-wrap,
html[data-skin="candy"][data-theme="light"] .add-bar {
  background: rgba(255,255,255,.7);
}
html[data-skin="candy"][data-theme="dark"] .chat-msgs,
html[data-skin="candy"][data-theme="dark"] .queue-wrap {
  background: #1a1220;
}

/* ── 토스트 ───────────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] .toast {
  background: #fff;
  border: 2px solid var(--cc-pink-soft);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--cc-pink);
  font-weight: 700;
}
html[data-skin="candy"][data-theme="light"] .toast::before { content: '♡ '; }
html[data-skin="candy"][data-theme="dark"]  .toast::before { content: '♡ '; }

/* ── 텍스트 ───────────────────────────────────────── */
html[data-skin="candy"][data-theme="light"] .np-title   { color: #4a1a3a; font-weight: 700; }
html[data-skin="candy"][data-theme="light"] .np-artist  { color: var(--cc-pink); }
html[data-skin="candy"][data-theme="light"] .q-title    { color: #4a1a3a; font-weight: 700; }
html[data-skin="candy"][data-theme="light"] .queue-label { color: var(--cc-pink); font-weight: 900; }
html[data-skin="candy"][data-theme="light"] .setup-logo  { 
  background: linear-gradient(90deg, var(--cc-pink), var(--cc-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-skin="candy"][data-theme="dark"] .queue-label  { color: var(--cc-pink); font-weight: 900; }

/* 동양풍: 한지 질감 */
/* ═══ ORIENTAL BODY ════════════════════════════ */

/* LIGHT: 한지 흰 배경 (이미지 6,8) */
html[data-skin="oriental"][data-theme="light"] body {
  background: #f8f4ec;
}
/* 청록 운문 물결 패턴 (이미지 7) */
html[data-skin="oriental"][data-theme="light"] body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 20 Q10 0 20 20 Q30 40 40 20 Q50 0 60 20 Q70 40 80 20' fill='none' stroke='%237fb5a8' stroke-width='1'/%3E%3Cpath d='M0 30 Q10 10 20 30 Q30 50 40 30 Q50 10 60 30 Q70 50 80 30' fill='none' stroke='%237fb5a8' stroke-width='.5' opacity='.5'/%3E%3C/svg%3E");
  background-size: 80px 40px;
}

/* DARK: 심블랙 야화 (이미지 1,2,3) */
html[data-skin="oriental"][data-theme="dark"] body {
  /* SVG nacreLayer가 배경 전담 */
  background: #050406 !important;
}
html[data-skin="oriental"][data-theme="dark"] body::before {
  display: none !important;
}

/* ── 카드: 이중 테두리 프레임 (이미지 6) ────────────── */
html[data-skin="oriental"][data-theme="light"] .setup-box,
html[data-skin="oriental"][data-theme="light"] #themePanel,
html[data-skin="oriental"][data-theme="light"] #shareModal .share-box,
html[data-skin="oriental"][data-theme="light"] .qj-box {
  background: #fffdf6;
  border: 1px solid var(--or-teal);
  outline: 3px solid var(--or-gold);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
html[data-skin="oriental"][data-theme="dark"] .setup-box,
html[data-skin="oriental"][data-theme="dark"] #themePanel,
html[data-skin="oriental"][data-theme="dark"] #shareModal .share-box,
html[data-skin="oriental"][data-theme="dark"] .qj-box {
  background: #160c10;
  border: 1px solid var(--or-pink);
  outline: 3px solid rgba(136,51,204,.5);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* ── NP 타이틀바 ────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .np-tag {
  background: linear-gradient(90deg, var(--or-teal), #a8c8c0);
  color: #fff !important;
  font-weight: 700; font-size: 11px; letter-spacing: 3px;
  border-bottom: 1px solid var(--or-gold);
  margin: -16px -20px 12px;
  padding: 7px 16px;
  display: flex; align-items: center;
}
html[data-skin="oriental"][data-theme="light"] .np-tag::after {
  content: '꽃잎 ❀';
  margin-left: auto; font-size: 10px;
  color: rgba(255,255,255,.8); letter-spacing: 1px;
}
html[data-skin="oriental"][data-theme="dark"] .np-tag {
  background: linear-gradient(90deg, #050406, #0c0a10);
  border-bottom: 1px solid var(--or-teal);
  border-left: 3px solid var(--or-teal);
  color: var(--or-teal) !important;
  font-weight: 700; font-size: 11px; letter-spacing: 3px;
  margin: -16px -20px 12px;
  padding: 7px 16px;
  display: flex; align-items: center;
}
html[data-skin="oriental"][data-theme="dark"] .np-tag::after {
  content: '✦ 나전';
  margin-left: auto; font-size: 10px;
  color: var(--or-teal); letter-spacing: 2px;
}

/* ── 셋업 타이틀바 ──────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .setup-box::before {
  content: '❀ 주크박스 ❀';
  display: block;
  background: linear-gradient(90deg, var(--or-teal), #a8c8c0);
  color: #fff; font-weight: 700; font-size: 12px;
  letter-spacing: 4px; text-align: center;
  padding: 8px 18px;
  margin: -18px -18px 16px;
  border-bottom: 1px solid var(--or-gold);
  border-radius: 4px 4px 0 0;
}
html[data-skin="oriental"][data-theme="dark"] .setup-box::before {
  content: '✿ 주크박스 ✿';
  display: block;
  background: linear-gradient(90deg, #1a0a18, #2a1028);
  color: var(--or-pink); font-weight: 700; font-size: 12px;
  letter-spacing: 4px; text-align: center;
  padding: 8px 18px;
  margin: -18px -18px 16px;
  border-bottom: 1px solid var(--or-pink);
  border-radius: 4px 4px 0 0;
  text-shadow: 0 0 8px rgba(224,82,154,.5);
}

/* ── NP 패널 ─────────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .np {
  background: #fffdf6;
  border-bottom: 1px solid var(--or-teal);
  border-top: 1px solid var(--or-gold);
}
html[data-skin="oriental"][data-theme="dark"] .np {
  background: rgba(12,10,16,0.82);
  border-bottom: 1px solid var(--or-pink);
}

/* ── 버튼 (이미지 6: 주홍 채움 / 이미지 1: 핑크 글로우) */
html[data-skin="oriental"][data-theme="light"] .btn-setup-primary,
html[data-skin="oriental"][data-theme="light"] .btn-add {
  background: var(--or-red);
  color: #fff; border: none; border-radius: 3px;
  box-shadow: 0 3px 0 #8a1a0a, 0 6px 16px rgba(204,51,34,.25);
  font-weight: 700; font-size: 14px; letter-spacing: 3px;
  transition: all .12s;
}
html[data-skin="oriental"][data-theme="light"] .btn-setup-primary:hover,
html[data-skin="oriental"][data-theme="light"] .btn-add:hover {
  background: var(--or-teal);
  box-shadow: 0 3px 0 #3a6a60, 0 6px 16px rgba(127,181,168,.3);
}
html[data-skin="oriental"][data-theme="light"] .btn-setup-primary:active,
html[data-skin="oriental"][data-theme="light"] .btn-add:active {
  transform: translateY(3px); box-shadow: 0 1px 0 #8a1a0a;
}
html[data-skin="oriental"][data-theme="light"] .btn-setup-secondary {
  border: 1px solid var(--or-teal); color: var(--or-teal);
  border-radius: 3px;
}

html[data-skin="oriental"][data-theme="dark"] .btn-setup-primary,
html[data-skin="oriental"][data-theme="dark"] .btn-add {
  background: transparent;
  color: var(--or-teal); border: 1px solid var(--or-teal); border-radius: 3px;
  box-shadow: 0 0 12px rgba(127,181,168,.25), inset 0 0 20px rgba(127,181,168,.04);
  font-weight: 700; letter-spacing: 3px;
  transition: all .15s;
}
html[data-skin="oriental"][data-theme="dark"] .btn-setup-primary:hover,
html[data-skin="oriental"][data-theme="dark"] .btn-add:hover {
  background: rgba(127,181,168,.12);
  box-shadow: 0 0 20px rgba(127,181,168,.4);
  color: #fff;
}

/* ── 액션 버튼 ────────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .act-btn,
html[data-skin="oriental"][data-theme="light"] .hc-btn {
  border: 1px solid var(--or-teal); color: var(--or-teal);
  background: rgba(127,181,168,.06); border-radius: 3px;
  font-weight: 700;
  transition: all .12s;
}
html[data-skin="oriental"][data-theme="light"] .act-btn:hover { 
  background: var(--or-teal); color: #fff;
}
html[data-skin="oriental"][data-theme="dark"] .act-btn,
html[data-skin="oriental"][data-theme="dark"] .hc-btn {
  border: 1px solid rgba(224,82,154,.4); color: var(--or-pink);
  background: transparent; border-radius: 3px;
}
html[data-skin="oriental"][data-theme="dark"] .act-btn:hover {
  border-color: var(--or-pink); box-shadow: 0 0 8px rgba(224,82,154,.3);
}

/* ── input ──────────────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .setup-input,
html[data-skin="oriental"][data-theme="light"] .add-url,
html[data-skin="oriental"][data-theme="light"] .add-nick,
html[data-skin="oriental"][data-theme="light"] .chat-in,
html[data-skin="oriental"][data-theme="light"] .qj-input {
  border: 1px solid var(--or-teal);
  border-radius: 3px; background: #fffdf6; color: #1a3828;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
html[data-skin="oriental"][data-theme="light"] .setup-input::placeholder,
html[data-skin="oriental"][data-theme="light"] .add-url::placeholder,
html[data-skin="oriental"][data-theme="light"] .add-nick::placeholder,
html[data-skin="oriental"][data-theme="light"] .chat-in::placeholder,
html[data-skin="oriental"][data-theme="light"] .qj-input::placeholder {
  color: #6aaa80;
}
html[data-skin="oriental"][data-theme="dark"] .setup-input,
html[data-skin="oriental"][data-theme="dark"] .add-url,
html[data-skin="oriental"][data-theme="dark"] .add-nick,
html[data-skin="oriental"][data-theme="dark"] .chat-in {
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 3px; background: #0e2018; color: #fff8e8;
}
html[data-skin="oriental"][data-theme="dark"] .setup-input::placeholder,
html[data-skin="oriental"][data-theme="dark"] .add-url::placeholder,
html[data-skin="oriental"][data-theme="dark"] .add-nick::placeholder,
html[data-skin="oriental"][data-theme="dark"] .chat-in::placeholder {
  color: #6aaa80;
}

/* ── 큐 아이템 (이중 왼쪽 강조선) ───────────────────── */
html[data-skin="oriental"][data-theme="light"] .q-item {
  border: 1px solid rgba(127,181,168,.4);
  border-left: 3px solid var(--or-teal);
  background: #fffdf6; border-radius: 3px;
  box-shadow: 0 2px 8px rgba(127,181,168,.1);
  transition: all .15s;
}
html[data-skin="oriental"][data-theme="light"] .q-item:hover {
  border-left-color: var(--or-red);
  background: #f8f4ec;
  box-shadow: 0 4px 12px rgba(127,181,168,.2);
}
html[data-skin="oriental"][data-theme="dark"] .q-item {
  border: 1px solid rgba(127,181,168,.18);
  border-left: 3px solid var(--or-teal);
  background: rgba(12,10,16,0.85); border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: all .15s;
}
html[data-skin="oriental"][data-theme="dark"] .q-item:hover {
  border-left-color: #b0d8d0;
  background: rgba(10,8,14,0.80);
  box-shadow: 0 0 12px rgba(127,181,168,.12);
}

/* ── 진행바 ──────────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .progress-bar {
  height: 6px; background: rgba(127,181,168,.2);
  border: 1px solid rgba(127,181,168,.3); border-radius: 2px;
}
html[data-skin="oriental"][data-theme="light"] .progress-fill {
  background: linear-gradient(90deg, var(--or-teal), var(--or-gold));
  border-radius: 2px;
}
html[data-skin="oriental"][data-theme="dark"] .progress-bar {
  height: 6px; background: rgba(127,181,168,.06);
  border: 1px solid rgba(127,181,168,.18); border-radius: 2px;
}
html[data-skin="oriental"][data-theme="dark"] .progress-fill {
  /* 홀로그램 느낌: 청록→보라→핑크 */
  background: linear-gradient(90deg, #7fb5a8, #a0d0d8, #c8b0e0);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(127,181,168,.3);
}

/* ── 헤더 ────────────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] #headerEl {
  background: #f8f4ec;
  border-bottom: 1px solid var(--or-teal);
  box-shadow: 0 1px 0 var(--or-gold);
}
html[data-skin="oriental"][data-theme="light"] #headerEl .logo {
  color: var(--or-red); letter-spacing: 5px;
}
html[data-skin="oriental"][data-theme="light"] .room-pill {
  border: 1px solid var(--or-teal); color: var(--or-teal);
  background: rgba(127,181,168,.08); border-radius: 3px;
}
html[data-skin="oriental"][data-theme="dark"] #headerEl {
  background: rgba(5,4,6,0.88);
  border-bottom: 1px solid var(--or-pink);
  box-shadow: 0 2px 20px rgba(224,82,154,.1);
}
html[data-skin="oriental"][data-theme="dark"] #headerEl .logo {
  color: var(--or-teal); letter-spacing: 5px;
  text-shadow: 0 0 12px rgba(127,181,168,.4), 0 0 24px rgba(180,220,216,.2);
}
html[data-skin="oriental"][data-theme="dark"] .room-pill {
  border: 1px solid rgba(224,82,154,.5); color: var(--or-pink);
  background: rgba(224,82,154,.06); border-radius: 3px;
}

/* ── 채팅 헤더 ────────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .chat-hdr {
  background: var(--or-teal);
  color: #fff !important;
  border-bottom: 1px solid var(--or-gold);
  letter-spacing: 3px; font-weight: 700;
}
html[data-skin="oriental"][data-theme="dark"] .chat-hdr {
  background: rgba(5,4,6,0.82);
  color: var(--or-teal) !important;
  border-bottom: 1px solid var(--or-teal);
  letter-spacing: 3px; font-weight: 700;
  border-left: 3px solid var(--or-teal);
}

/* ── 토스트 ──────────────────────────────────────────── */
html[data-skin="oriental"][data-theme="light"] .toast {
  background: #fffdf6; border: 1px solid var(--or-teal);
  outline: 2px solid var(--or-gold); outline-offset: 2px;
  border-radius: 3px; color: var(--or-red); font-weight: 700;
}
html[data-skin="oriental"][data-theme="dark"] .toast {
  background: rgba(5,4,6,0.82); border: 1px solid var(--or-teal);
  border-radius: 3px; color: var(--or-teal);
  box-shadow: 0 0 16px rgba(127,181,168,.25);
}

/* ── 텍스트 ──────────────────────────────────────────── */
html[data-skin="oriental"] .np-title { letter-spacing: 4px; font-weight: 700; }
html[data-skin="oriental"][data-theme="light"] .np-title { color: var(--or-ink); }
html[data-skin="oriental"][data-theme="dark"]  .np-title { color: #f5e0ef; text-shadow: 0 0 12px rgba(224,82,154,.3); }
html[data-skin="oriental"][data-theme="light"] .queue-label { color: var(--or-teal); letter-spacing: 4px; font-weight: 700; }
html[data-skin="oriental"][data-theme="dark"]  .queue-label { color: var(--or-pink); letter-spacing: 4px; }
html[data-skin="oriental"] .logo::after { content: ' 囍'; font-size: .6em; color: var(--or-gold); }
html[data-skin="oriental"][data-theme="dark"] .logo::after { color: var(--or-pink); }

/* 바다: 레이어드 웨이브 배경 */
html[data-skin="ocean"][data-theme="dark"] body {
  background: linear-gradient(180deg,#06111f 0%,#0e2340 60%,#122e50 100%);
}
html[data-skin="ocean"][data-theme="light"] body {
  background: linear-gradient(180deg,#8cc1e9 0%,#ddeeff 50%,#fff8e7 100%);
}
/* wave animation for ocean */
html[data-skin="ocean"] .progress-bar::after {
  content:'';position:absolute;top:0;left:-200%;width:400%;height:100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 20px,
    rgba(255,255,255,.15) 20px, rgba(255,255,255,.15) 21px
  );
  animation: waveScroll 4s linear infinite;
}
@keyframes waveScroll { to { transform: translateX(50%); } }
html[data-skin="ocean"] .np {
  border-bottom:1px solid var(--border2);
  background: linear-gradient(180deg,var(--bg2) 0%,rgba(14,35,64,.9) 100%);
}

/* ═══ SETUP SCREEN ═════════════════════════ */
#setupScreen{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
}
.setup-box{
  width:440px;background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius,4px);
  padding:40px;
  box-shadow:var(--shadow);
}



.setup-logo{
  font-family:var(--font-display);font-size:48px;letter-spacing:4px;
  color:var(--acc);line-height:1;margin-bottom:4px;
}
html[data-skin="pixel"] .setup-logo{font-size:20px;letter-spacing:2px}



.setup-sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:3px;
  color:var(--t2);margin-bottom:32px;
}
html[data-skin="pixel"] .setup-sub{font-size:7px;letter-spacing:1px}

.setup-section{margin-bottom:20px}
.setup-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--t2);margin-bottom:8px;
}
html[data-skin="pixel"] .setup-label{font-size:7px}

.setup-input{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  color:var(--t0);padding:10px 14px;font-size:13px;
  border-radius:var(--radius,4px);
  outline:none;transition:border .15s,background .15s;
}
.setup-input:focus{border-color:var(--acc)}
.setup-input::placeholder{color:var(--t3)}
html[data-skin="pixel"] .setup-input{border:2px solid var(--border2);font-size:8px;padding:8px}

.setup-row{display:flex;gap:8px}
.setup-row .setup-input{flex:1}

.btn-setup-primary{
  width:100%;background:var(--acc);color:var(--acc-fg,#000);border:none;
  padding:12px;font-family:var(--font-display);font-size:18px;letter-spacing:2px;
  border-radius:var(--radius,4px);
  transition:all .15s;margin-bottom:8px;
}
.btn-setup-primary:hover{filter:brightness(1.1)}
.btn-setup-primary:disabled{opacity:.4;pointer-events:none}
html[data-skin="pixel"] .btn-setup-primary{font-size:10px;border:2px solid var(--acc)}

.setup-divider{
  text-align:center;font-family:var(--font-mono);font-size:10px;
  color:var(--t3);margin:16px 0;letter-spacing:2px;
}
.btn-setup-secondary{
  width:100%;background:none;border:1px solid var(--border2);color:var(--t1);
  padding:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:2px;
  border-radius:var(--radius,4px);
  transition:all .15s;
}
.btn-setup-secondary:hover{border-color:var(--acc);color:var(--acc)}
.btn-setup-secondary:disabled{opacity:.4;pointer-events:none}

.setup-error{
  font-family:var(--font-mono);font-size:11px;color:var(--red);
  margin-top:10px;min-height:16px;
}

/* ═══ HEADER ════════════════════════════════ */
#headerEl{
  display:none;
  flex-shrink:0;
  height:52px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:0 20px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

html[data-skin="pixel"] #headerEl{border-bottom:3px solid var(--border2)}

.logo{font-family:var(--font-display);font-size:24px;letter-spacing:4px;color:var(--acc)}
.logo em{color:var(--t2);font-style:normal}
html[data-skin="pixel"] .logo{font-size:12px;letter-spacing:1px}

.header-center{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}
.header-right{display:flex;align-items:center;gap:10px}

.room-pill{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--t2);background:var(--bg3);
  border:1px solid var(--border);padding:4px 12px;
  border-radius:var(--radius,4px);
  cursor:pointer;transition:all .15s;
}
.room-pill:hover{border-color:var(--acc);color:var(--acc)}

/* ═══ SHARE MODAL ════════════════════════ */
#shareModal{
  position:fixed;inset:0;z-index:400;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
}
#shareModal.open{display:flex}
.share-box{
  width:360px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius,4px);
  padding:28px;box-shadow:var(--shadow);
  position:relative;
}
.share-close{
  position:absolute;top:12px;right:14px;
  background:none;border:none;color:var(--t2);
  font-size:18px;cursor:pointer;transition:color .15s;
  line-height:1;
}
.share-close:hover{color:var(--red)}
.share-title{
  font-family:var(--font-display);font-size:22px;letter-spacing:2px;
  color:var(--t0);margin-bottom:20px;
}
.share-code-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius,4px);
  padding:12px 16px;margin-bottom:12px;
}
.share-code{
  font-family:var(--font-display);font-size:32px;letter-spacing:6px;
  color:var(--acc);flex:1;
}
.btn-copy{
  background:none;border:1px solid var(--border2);color:var(--t1);
  padding:6px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;
  border-radius:var(--radius,4px);transition:all .15s;white-space:nowrap;
}
.btn-copy:hover{border-color:var(--acc);color:var(--acc)}
.btn-copy.copied{border-color:var(--green);color:var(--green)}
.share-url-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius,4px);
  padding:8px 12px;margin-bottom:16px;
}
.share-url{
  font-family:var(--font-mono);font-size:10px;color:var(--t2);
  flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.share-hint{
  font-family:var(--font-mono);font-size:9px;letter-spacing:2px;
  color:var(--t3);text-align:center;
}
.share-qr{
  display:flex;justify-content:center;margin-bottom:14px;
}
.share-qr canvas{border-radius:var(--radius,4px)}

/* ═══ QUICK JOIN MODAL (링크 접속) ══════ */
#quickJoinModal{
  position:fixed;inset:0;z-index:500;
  display:none;align-items:center;justify-content:center;
  background:var(--bg);
}
#quickJoinModal.open{display:flex}
.qj-box{
  width:380px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius,4px);
  padding:36px;box-shadow:var(--shadow);
  text-align:center;
}
.qj-logo{
  font-family:var(--font-display);font-size:36px;letter-spacing:4px;
  color:var(--acc);margin-bottom:4px;
}
.qj-room{
  font-family:var(--font-mono);font-size:11px;letter-spacing:3px;
  color:var(--t2);margin-bottom:28px;
}
.qj-room em{color:var(--acc);font-style:normal}
.qj-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--t2);margin-bottom:10px;text-align:left;
}
.qj-input{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  color:var(--t0);padding:14px 16px;
  font-family:var(--font-display);font-size:22px;letter-spacing:3px;
  border-radius:var(--radius,4px);
  outline:none;transition:border .15s;margin-bottom:16px;
  text-align:center;
}
.qj-input:focus{border-color:var(--acc)}
.qj-input::placeholder{color:var(--t3);font-size:16px;letter-spacing:1px}
.btn-qj{
  width:100%;background:var(--acc);color:var(--acc-fg,#000);border:none;
  padding:14px;font-family:var(--font-display);font-size:20px;letter-spacing:3px;
  border-radius:var(--radius,4px);
  transition:all .15s;
}
.btn-qj:hover{filter:brightness(1.1)}
.btn-qj:disabled{opacity:.4;pointer-events:none}
.qj-error{
  font-family:var(--font-mono);font-size:11px;color:var(--red);
  margin-top:10px;min-height:16px;
}
.host-badge{
  font-family:var(--font-mono);font-size:9px;letter-spacing:2px;
  background:var(--acc);color:var(--acc-fg,#000);
  padding:3px 10px;border-radius:var(--radius,4px);
}
.live-pill{
  display:flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:11px;color:var(--t2);
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* header icon buttons */
.hbtn{
  background:none;border:1px solid var(--border);color:var(--t1);
  padding:5px 10px;font-size:12px;letter-spacing:1px;
  border-radius:var(--radius,4px);
  font-family:var(--font-mono);
  transition:all .15s;
}
.hbtn:hover{border-color:var(--acc);color:var(--acc)}
.hbtn.danger:hover{border-color:var(--red);color:var(--red)}

/* ═══ THEME PANEL ══════════════════════════ */
#themePanel{
  position:fixed;top:60px;right:16px;z-index:200;
  width:280px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius,4px);
  padding:18px;box-shadow:var(--shadow);
  display:none;
}
#themePanel::-webkit-scrollbar{width:3px}
#themePanel::-webkit-scrollbar-thumb{background:var(--border2)}
#themePanel.open{display:block}


.tp-title{
  font-family:var(--font-mono);font-size:9px;letter-spacing:3px;
  color:var(--t2);margin-bottom:14px;
}
.tp-section{margin-bottom:14px}
.tp-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--t2);margin-bottom:8px}

/* light/dark toggle */
.mode-toggle{display:flex;gap:6px}
.mode-btn{
  flex:1;padding:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;
  background:var(--bg3);border:1px solid var(--border);color:var(--t1);
  border-radius:var(--radius,4px);transition:all .15s;
}
.mode-btn.active{background:var(--acc);color:var(--acc-fg,#000);border-color:var(--acc)}

/* skin grid */
.skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.skin-btn{
  padding:7px 6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.5px;
  background:var(--bg3);border:1px solid var(--border);color:var(--t1);
  border-radius:4px;transition:all .15s;text-align:center;line-height:1.4;
}
.skin-btn:hover{border-color:var(--acc);color:var(--acc)}
.skin-btn.active{border-color:var(--acc);color:var(--acc);background:rgba(var(--acc-rgb,232,255,71),.1)}

/* accent color */
.acc-row{display:flex;align-items:center;gap:8px}
.acc-presets{display:flex;gap:5px;flex-wrap:wrap}
.acc-dot{
  width:20px;height:20px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:transform .15s,border .15s;
}
.acc-dot:hover{transform:scale(1.2)}
.acc-dot.active{border-color:var(--t0)}
.acc-custom{
  background:var(--bg3);border:1px solid var(--border);color:var(--t0);
  padding:4px 8px;font-family:var(--font-mono);font-size:10px;
  border-radius:4px;width:76px;outline:none;
}
.acc-custom:focus{border-color:var(--acc)}

/* vol for all users */
.vol-row{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--t2)}
.vol-row input[type=range]{flex:1;accent-color:var(--acc)}

/* ═══ APP LAYOUT ════════════════════════════ */
#appEl{display:none;flex:1;min-height:0}
#appEl.visible{display:flex}
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.side{width:300px;flex-shrink:0;border-left:1px solid var(--border);display:flex;flex-direction:column}

/* ═══ NOW PLAYING ═══════════════════════════ */
.np{
  border-bottom:1px solid var(--border);
  padding:16px 20px 14px;flex-shrink:0;
  background:var(--bg2);
}


.np-tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:4px;
  color:var(--acc);margin-bottom:10px;display:flex;align-items:center;gap:10px;
}
html[data-skin="pixel"] .np-tag{font-size:6px;letter-spacing:2px}

.np-body{display:flex;align-items:center;gap:14px}
.np-thumb-wrap{position:relative;flex-shrink:0}
.np-thumb{
  width:80px;height:45px;object-fit:cover;
  border-radius:var(--radius,4px);
  background:var(--bg3);border:1px solid var(--border);
  display:block;
}
.np-playing-anim{
  position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;
  gap:2px;padding-bottom:6px;background:rgba(0,0,0,.4);
  border-radius:var(--radius,4px);
}
.np-playing-anim.show{display:flex}
.np-bar{width:3px;background:var(--acc);border-radius:2px;animation:barDance 1s ease-in-out infinite}
.np-bar:nth-child(1){height:8px;animation-delay:0s}
.np-bar:nth-child(2){height:14px;animation-delay:.2s}
.np-bar:nth-child(3){height:10px;animation-delay:.4s}
.np-bar:nth-child(4){height:16px;animation-delay:.1s}
@keyframes barDance{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.3)}
}

.np-info{flex:1;min-width:0}
.np-title{
  font-size:17px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.2;letter-spacing:.3px;
}
html[data-skin="pixel"] .np-title{font-size:9px;letter-spacing:0}
.np-artist{font-family:var(--font-mono);font-size:11px;color:var(--t1);margin-top:3px}
.np-req{font-family:var(--font-mono);font-size:10px;color:var(--t2);margin-top:4px}
.np-req em{color:var(--acc);font-style:normal}

/* progress */
.progress-wrap{margin-top:12px}
.progress-bar{height:3px;background:var(--bg4);border-radius:2px;overflow:hidden;position:relative;cursor:default}
.progress-fill{height:100%;background:var(--acc);width:0%;transition:width .9s linear;border-radius:2px}
html[data-skin="pixel"] .progress-fill{border-radius:0;transition:none}
.progress-times{display:flex;justify-content:space-between;margin-top:5px;
  font-family:var(--font-mono);font-size:9px;color:var(--t2)}

/* actions row */
.np-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;align-items:center}
.act-btn{
  background:none;border:1px solid var(--border2);color:var(--t1);
  padding:5px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;
  border-radius:var(--radius,4px);
  transition:all .15s;display:flex;align-items:center;gap:5px;
}
.act-btn:hover{border-color:var(--acc);color:var(--acc)}
.act-btn.skip-voted{border-color:var(--acc);color:var(--acc);background:rgba(0,0,0,.2)}
.act-btn.liked{border-color:var(--red);color:var(--red)}
.act-btn:disabled{opacity:.35;pointer-events:none}
html[data-skin="pixel"] .act-btn{border:2px solid var(--border);font-size:7px;padding:4px 8px}

/* host controls */
.host-ctrl{
  display:none;align-items:center;gap:8px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);flex-wrap:wrap;
}
.host-ctrl.show{display:flex}
.hc-btn{
  background:none;border:1px solid var(--border2);color:var(--t1);
  padding:5px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;
  border-radius:var(--radius,4px);
  transition:all .15s;
}
.hc-btn:hover{border-color:var(--acc);color:var(--acc)}
.hc-btn.on{border-color:var(--green);color:var(--green)}
.loop-badge{
  font-family:var(--font-mono);font-size:9px;color:var(--t2);
  background:var(--bg3);border:1px solid var(--border);padding:3px 8px;
  border-radius:var(--radius,4px);
  cursor:pointer;transition:all .15s;
}
.loop-badge:hover{border-color:var(--acc);color:var(--t0)}
.loop-badge.on{border-color:var(--acc);color:var(--acc);background:rgba(0,0,0,.15)}
.loop-badge em{color:var(--acc);font-style:normal}

/* hidden YT player */
#ytPlayerWrap{position:fixed;bottom:-9999px;left:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none}
/* ── 재생 시작 오버레이 (자동재생 차단 대응) ── */
#playOverlay{
  position:fixed;inset:0;z-index:600;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  cursor:pointer;
}
#playOverlay.show{display:flex}
.po-box{
  text-align:center;pointer-events:none;
}
.po-icon{
  font-size:64px;line-height:1;margin-bottom:16px;
  color:var(--acc);
}
.po-title{
  font-family:var(--font-display);font-size:28px;letter-spacing:4px;
  color:var(--t0);margin-bottom:8px;
}
.po-sub{
  font-family:var(--font-mono);font-size:11px;letter-spacing:2px;
  color:var(--t2);
}

/* ═══ ADD BAR ═══════════════════════════════ */
.add-bar{border-bottom:1px solid var(--border);padding:10px 20px;flex-shrink:0;background:var(--bg)}
.add-row{display:flex;gap:7px}
.add-nick{
  width:110px;flex-shrink:0;background:var(--bg2);
  border:1px solid var(--border);color:var(--t0);
  padding:8px 10px;font-size:12px;
  border-radius:var(--radius,4px);outline:none;transition:border .15s;
}
.add-nick:focus{border-color:var(--acc)}
.add-nick::placeholder{color:var(--t3)}
.add-url{
  flex:1;background:var(--bg2);border:1px solid var(--border);color:var(--t0);
  padding:8px 10px;font-size:12px;font-family:var(--font-mono);
  border-radius:var(--radius,4px);outline:none;transition:border .15s;
}
.add-url:focus{border-color:var(--acc)}
.add-url::placeholder{color:var(--t3)}
.btn-add{
  background:var(--acc);color:var(--acc-fg,#000);border:none;
  padding:8px 18px;font-family:var(--font-display);font-size:15px;letter-spacing:2px;
  border-radius:var(--radius,4px);
  transition:all .15s;white-space:nowrap;
}
.btn-add:hover{filter:brightness(1.1)}
.btn-add:disabled{opacity:.4;pointer-events:none}
html[data-skin="pixel"] .btn-add{font-size:8px;border:2px solid var(--acc-fg,#000)}

/* preview */
.preview{
  display:none;margin-top:8px;
  background:var(--bg2);border:1px solid var(--border);
  padding:10px 12px;align-items:center;gap:12px;
  border-radius:var(--radius,4px);
}
.preview.open{display:flex}
.prev-thumb{width:68px;height:38px;object-fit:cover;flex-shrink:0;background:var(--bg3);border-radius:var(--radius,4px)}
.prev-info{flex:1;min-width:0}
.prev-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev-ch{font-family:var(--font-mono);font-size:10px;color:var(--t1);margin-top:2px}
.prev-acts{display:flex;gap:7px;margin-top:7px}
.btn-qi{
  background:var(--acc);color:var(--acc-fg,#000);border:none;
  padding:5px 14px;font-family:var(--font-display);font-size:13px;letter-spacing:1px;
  border-radius:var(--radius,4px);transition:all .15s;
}
.btn-qi:hover{filter:brightness(1.1)}
.btn-qi:disabled{opacity:.4;pointer-events:none}
.btn-cancel{
  background:none;border:1px solid var(--border);color:var(--t1);
  padding:5px 10px;font-family:var(--font-mono);font-size:10px;
  border-radius:var(--radius,4px);transition:all .15s;
}
.btn-cancel:hover{border-color:var(--red);color:var(--red)}

/* ═══ QUEUE ══════════════════════════════════ */
.queue-wrap{flex:1;overflow-y:auto;padding:14px 20px}
.queue-wrap::-webkit-scrollbar{width:3px}
.queue-wrap::-webkit-scrollbar-thumb{background:var(--border)}
.queue-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.queue-label{font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--t2)}
.queue-meta{display:flex;align-items:center;gap:8px}
.queue-count{font-family:var(--font-mono);font-size:10px;color:var(--t2)}
.loop-mode-badge{
  font-family:var(--font-mono);font-size:8px;letter-spacing:1px;
  padding:2px 7px;border:1px solid var(--border2);color:var(--t2);
  border-radius:3px;
}

.q-empty{
  font-family:var(--font-mono);font-size:10px;letter-spacing:3px;
  color:var(--t3);text-align:center;padding:32px 0;
}

/* LOOP SECTION in queue */
.q-loop-section{margin-bottom:10px}
.q-loop-label{
  font-family:var(--font-mono);font-size:8px;letter-spacing:3px;
  color:var(--t3);margin-bottom:6px;padding-left:4px;
}
.q-divider{
  height:1px;background:var(--border);margin:8px 0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:8px;color:var(--t3);letter-spacing:2px;
}
.q-divider::before,.q-divider::after{content:'';flex:1;height:1px;background:var(--border);margin:0 8px}

.q-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;
  border:1px solid var(--border);background:var(--bg2);
  border-radius:var(--radius,4px);
  margin-bottom:5px;
  transition:border .15s,background .15s;
  animation:fadeSlide .2s ease;
}
.q-item:hover{border-color:var(--border2)}
.q-item.loop-item{opacity:.6;border-style:dashed}
.q-item.loop-item:hover{opacity:.85}

html[data-skin="pixel"] .q-item{border:2px solid var(--border);border-radius:0;margin-bottom:3px}

@keyframes fadeSlide{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.q-num{font-family:var(--font-display);font-size:20px;color:var(--t3);min-width:24px;text-align:right}
html[data-skin="pixel"] .q-num{font-size:10px}
.q-thumb{
  width:48px;height:27px;object-fit:cover;
  background:var(--bg3);flex-shrink:0;
  border-radius:var(--radius,4px);border:1px solid var(--border);
}
.q-info{flex:1;min-width:0}
.q-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-skin="pixel"] .q-title{font-size:7px}
.q-sub{font-family:var(--font-mono);font-size:9px;color:var(--t2);margin-top:2px}
.q-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.q-votes{font-family:var(--font-mono);font-size:11px;color:var(--t2);min-width:18px;text-align:center}
.btn-vote{
  background:none;border:1px solid var(--border);color:var(--t2);
  padding:3px 7px;font-size:11px;
  border-radius:var(--radius,4px);
  transition:all .15s;line-height:1;
}
.btn-vote:hover{border-color:var(--acc);color:var(--acc)}
.btn-vote.voted{color:var(--acc);border-color:var(--acc)}
.btn-del{
  background:none;border:1px solid var(--border);color:var(--t2);
  padding:3px 7px;font-size:11px;line-height:1;
  border-radius:var(--radius,4px);
  transition:all .15s;
}
.btn-del:hover{border-color:var(--red);color:var(--red);background:rgba(255,60,60,.08)}

/* ═══ CHAT ═══════════════════════════════════ */
.chat-hdr{
  padding:11px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
  font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--t2);
  background:var(--bg2);
}
.chat-msgs{
  flex:1;overflow-y:auto;padding:12px 16px;
  display:flex;flex-direction:column;gap:7px;
  background:var(--bg);
}
.chat-msgs::-webkit-scrollbar{width:3px}
.chat-msgs::-webkit-scrollbar-thumb{background:var(--border)}
.msg{display:flex;flex-direction:column;gap:1px}
.msg-head{display:flex;align-items:baseline;gap:7px}
.msg-nick{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--acc);letter-spacing:1px}
html[data-skin="pixel"] .msg-nick{font-size:7px}
.msg-time{font-family:var(--font-mono);font-size:9px;color:var(--t3)}
.msg-text{font-size:13px;color:var(--t0);line-height:1.5;word-break:break-word}
html[data-skin="pixel"] .msg-text{font-size:8px;line-height:2}
.msg.sys .msg-nick{color:var(--t2)}
.msg.sys .msg-text{
  color:var(--t2);font-family:var(--font-mono);font-size:10px;
  padding-left:8px;border-left:2px solid var(--border2);
}

.chat-foot{
  padding:9px 12px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;gap:7px;background:var(--bg2);
}
.chat-in{
  flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--t0);
  padding:8px 11px;font-size:13px;
  border-radius:var(--radius,4px);outline:none;transition:border .15s;
}
.chat-in:focus{border-color:var(--acc)}
.chat-in::placeholder{color:var(--t3)}
.btn-send{
  background:none;border:1px solid var(--border2);color:var(--t2);
  padding:8px 13px;font-family:var(--font-display);font-size:14px;letter-spacing:1px;
  border-radius:var(--radius,4px);transition:all .15s;
}
.btn-send:hover{border-color:var(--acc);color:var(--acc)}

/* ═══ TOAST ══════════════════════════════════ */
.toast{
  position:fixed;bottom:20px;left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--bg2);border:1px solid var(--border2);
  color:var(--t1);padding:7px 18px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  border-radius:var(--radius,4px);
  opacity:0;transition:all .25s;z-index:400;pointer-events:none;
  box-shadow:var(--shadow);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--acc);color:var(--acc)}
.toast.err{border-color:var(--red);color:var(--red)}
.toast.info{border-color:var(--green);color:var(--green)}

/* spinner */
.spin{display:inline-block;width:10px;height:10px;border:1.5px solid var(--border2);border-top-color:var(--acc);border-radius:50%;animation:_spin .6s linear infinite}
@keyframes _spin{to{transform:rotate(360deg)}}

/* ── skin ornaments ── */
html[data-skin="y2k"] .setup-logo::after   { content:' .EXE'; font-size:.35em; color:var(--t2); margin-left:6px; vertical-align:middle; }
html[data-skin="y2k"][data-theme="dark"] .setup-logo::after { color:#E8803A; }

/* 큐 레이블 파일 탐색기 스타일 */
html[data-skin="y2k"] .queue-label::before { content:'📁 '; }
html[data-skin="y2k"][data-theme="dark"] .queue-label { color:#6DB5B8; letter-spacing:2px; }

html[data-skin="pixel"] .queue-label::before { content:'> '; }
html[data-skin="pixel"] .q-empty::before { content:'_ '; }

html[data-skin="animals"] .q-empty::before { content:'🐾\a'; white-space:pre; display:block; font-size:24px; margin-bottom:8px; }


html[data-skin="pop"][data-theme="light"] .setup-logo::before { content:'🎵 '; }
html[data-skin="pop"][data-theme="dark"]  .setup-logo::before { content:'⚡ '; }

html[data-skin="pop"][data-theme="light"] .q-title  { font-weight:700; color:#000; }
html[data-skin="pop"][data-theme="dark"]  .q-title  { color:#fff; }
html[data-skin="pop"][data-theme="light"] .queue-label { color:#ffe000; letter-spacing:3px; font-weight:900; text-shadow:1px 1px 0 #000; }
html[data-skin="pop"][data-theme="dark"]  .queue-label { color:#00e5ff; letter-spacing:2px; }

html[data-skin="ocean"] .np-tag::before    { content:'〰 '; }
html[data-skin="ocean"] .q-empty::before   { content:'🌊\a'; white-space:pre; display:block; font-size:24px; margin-bottom:8px; }

/* pixel font size reductions */

html[data-skin="pixel"] .q-title   { font-size:7px; line-height:1.8; }
html[data-skin="pixel"] .msg-text  { font-size:7px; line-height:2; }


html[data-skin="pixel"] .act-btn   { font-size:6px; padding:6px 8px; border:2px solid var(--border); }
html[data-skin="pixel"] .hc-btn    { font-size:6px; padding:6px 8px; }

/* oriental decoration borders */




/* ocean wave on progress */
html[data-skin="ocean"] .bar-fill { background: linear-gradient(90deg, #0055a0, #438bc4, #8cc1e9); }


/* 스킨별 np-tag 텍스트 오버라이드 */
html[data-skin="y2k"] .np-tag span:first-child::before    { content: '♪ NOW PLAYING  ─  □  ✕'; }
html[data-skin="y2k"] .np-tag span:first-child            { font-size:0; }
html[data-skin="y2k"] .np-tag span:first-child::before    { font-size:10px; }
html[data-skin="pixel"] .np-tag span:first-child::before  { content: '> NOW PLAYING'; }
html[data-skin="pixel"] .np-tag span:first-child          { font-size:0; }
html[data-skin="pixel"] .np-tag span:first-child::before  { font-size:7px; }
html[data-skin="pop"] .np-tag span:first-child::before    { content: '♪ NOW PLAYING ♪'; }
html[data-skin="pop"] .np-tag span:first-child            { font-size:0; }
html[data-skin="pop"] .np-tag span:first-child::before    { font-size:10px; }
html[data-skin="animals"][data-theme="light"] .setup-logo { color: #cc4488; }
html[data-skin="animals"][data-theme="dark"]  .setup-logo { color: #c8a84a; }
html[data-skin="animals"][data-theme="light"] .setup-logo::before { content: '🐱 '; }
html[data-skin="animals"][data-theme="dark"]  .setup-logo::before { content: '🐱 '; }
html[data-skin="animals"][data-theme="light"] .q-empty::before { content: '🐾\a'; white-space:pre; display:block; font-size:28px; margin-bottom:8px; }
html[data-skin="animals"][data-theme="dark"]  .q-empty::before { content: '✦\a'; white-space:pre; display:block; font-size:28px; margin-bottom:8px; color:var(--border2); }
html[data-skin="animals"][data-theme="light"] .queue-label { color: #cc6699; font-weight:900; }
html[data-skin="animals"][data-theme="dark"]  .queue-label { color: #c8a84a; font-weight:900; }
html[data-skin="candy"] .setup-logo::before { content:'🍬 '; }
html[data-skin="candy"] .q-empty::before {
  content: '☁\a'; white-space:pre; display:block;
  font-size:28px; margin-bottom:8px;
}
html[data-skin="oriental"][data-theme="light"] .setup-logo::before { content:'❀ '; color: var(--or-teal); }
html[data-skin="oriental"][data-theme="dark"]  .setup-logo::before { content:'✿ '; color: var(--or-pink); }
html[data-skin="oriental"][data-theme="light"] .q-empty::before { content:'❀\a'; white-space:pre; display:block; font-size:24px; margin-bottom:8px; color:var(--or-teal); }
html[data-skin="oriental"][data-theme="dark"]  .q-empty::before { content:'✿\a'; white-space:pre; display:block; font-size:24px; margin-bottom:8px; color:var(--or-pink); }

/* ════════════════════════════════════════
   CANVAS BACKGROUND — z-index 체계
════════════════════════════════════════ */
#bgCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* 나전칠기 SVG 레이어 */
#nacreLayer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#nacreLayer svg {
  width: 100% !important;
  height: 100% !important;
}

/* 모든 앱 UI는 canvas 위에 */
#headerEl,
#appEl,
#shareModal,
#playOverlay,
.toast {
  position: relative;
  z-index: 1;
}
/* setupScreen, quickJoinModal은 fixed + 높은 z-index 유지 */
#themePanel { z-index: 200; }

/* 앱 레이아웃 배경 반투명 처리 — canvas가 비쳐 보이게 */
html[data-skin="minimal"] .main,
html[data-skin="minimal"] .side { background: transparent; }

html[data-skin="glass"] .main,
html[data-skin="glass"] .side,
html[data-skin="glass"] .np,
html[data-skin="glass"] .add-bar,
html[data-skin="glass"] .queue-wrap,
html[data-skin="glass"] .chat-msgs,
html[data-skin="glass"] .chat-foot,
html[data-skin="glass"] .chat-hdr { background: transparent; }

/* ocean: 물결이 아래에서 보이도록 */
html[data-skin="ocean"] body { background: transparent !important; }
html[data-skin="ocean"] #bgCanvas { z-index: 0; }

/* pop: 컨페티가 뒤에서 */
html[data-skin="pop"] .main,
html[data-skin="pop"] .side { background: transparent; }

/* candy: 버블이 뒤에서 */
html[data-skin="candy"] .main,
html[data-skin="candy"] .side { background: transparent; }

/* animals: 별/하트가 뒤에서 */
html[data-skin="animals"] .main,
html[data-skin="animals"] .side { background: transparent; }

/* oriental: nacreLayer SVG가 배경 전담 */
html[data-skin="oriental"][data-theme="dark"] .main,
html[data-skin="oriental"][data-theme="dark"] .side,
html[data-skin="oriental"][data-theme="dark"] .queue-wrap,
html[data-skin="oriental"][data-theme="dark"] .add-bar,
html[data-skin="oriental"][data-theme="dark"] #appEl { background: transparent; }
html[data-skin="oriental"][data-theme="light"] .main,
html[data-skin="oriental"][data-theme="light"] .side { background: transparent; }