/* 기본 색(:root)과 테마별 색, 계절·무대 테마의 플로어 그림과 움직임 (화면 스타일은 public/css/의 파일 여러 개를 index.html이 이 순서로 불러온다: theme.css → base.css → stage.css → playlist.css → side.css → dialogs.css → misc.css) */
/* 레이아웃: 왼쪽은 무대(영상) → 댄스 플로어 → 버튼 줄, 오른쪽은 채팅·대기열 사이드바. 좁은 화면에서는 한 줄로 쌓인다. */
:root {
  --bg: #0c0d12;
  --panel: #13151d;
  --panel-2: #1a1d28;
  --line: #262a39;
  --fg: #eceef5;
  --muted: #8a8fa6;
  --accent: #4fb8ff;
  --accent-ink: #04121d;
  --woot: #7bd64b;
  --meh: #ff5a6e;
  --grab: #b480ff;
  --warn: #f2b84b;
  --tile: rgba(79, 184, 255, 0.16);
  /* 테마마다 바뀌는 나머지 색 (아래 :root[data-theme]에서 덮어쓴다) */
  --line-hover: #3a4054;
  --accent-hover: #73c7ff;
  --accent-soft: rgba(79, 184, 255, 0.08);
  --glow: rgba(79, 184, 255, 0.18);
  --overlay: rgba(255, 255, 255, 0.08);
  --fg-soft: #cfd2de;
  --dim: #5d6278;
  --danger-text: #ff9aa6;
  --danger-strong: #ffd6dc;
  --warn-text: #f6d48f;
  --warn-strong: #fff3d6;
  --floor-top: #0f1119;
  --floor-bottom: #0a0b10;
  --name-l: 72%; /* 채팅 이름 색의 밝기 */

  --font-display: "Silkscreen", "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --gutter: 16px;
  --radius: 6px;
  /* 사용자가 끌어서 바꾸는 크기 (app.js가 덮어쓴다) */
  --side-w: 340px;
  --floor-h: 210px;
  color-scheme: dark;
}

/* ---------- 테마 (내 설정에서 고른다. app.js의 THEMES와 이름을 맞춘다) ---------- */
/* 밝은 테마: 영상 자리는 화면처럼 어둡게 둔다 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f8; --panel: #ffffff; --panel-2: #eceef4; --line: #d8dbe5; --line-hover: #b9bdcc;
  --fg: #1a1d29; --fg-soft: #3a3f52; --muted: #5f657a; --dim: #8a8fa3;
  --accent: #1f7fd6; --accent-hover: #3a94e6; --accent-ink: #ffffff; --accent-soft: rgba(31, 127, 214, 0.1); --glow: rgba(31, 127, 214, 0.18);
  --woot: #3d9b1c; --meh: #e0384f; --grab: #8a4fe0; --warn: #b8860b;
  --warn-text: #8a6100; --warn-strong: #5c4100; --danger-text: #c4283f; --danger-strong: #8e1529;
  --overlay: rgba(0, 0, 0, 0.05);
  --tile: rgba(31, 127, 214, 0.18); --floor-top: #e7ebf4; --floor-bottom: #dce2ee;
  --name-l: 36%;
}
/* 사계절 테마. 계절마다 배경색 자체를 다르게 잡는다(강조색만 다르면 서로 비슷해 보여서). 영상 자리는 어둡게 둔다 */
/* 봄 (벚꽃, id는 pink): 배경·패널·테두리·글씨까지 분홍 계열 */
:root[data-theme="pink"] {
  color-scheme: light;
  --bg: #fff0f5; --panel: #fff8fb; --panel-2: #ffe6ef; --line: #f5c9d9; --line-hover: #eba5bf;
  --fg: #4a1d33; --fg-soft: #6b3550; --muted: #a0627f; --dim: #c08aa3;
  --accent: #ff4d8d; --accent-hover: #ff70a4; --accent-ink: #ffffff; --accent-soft: rgba(255, 77, 141, 0.1); --glow: rgba(255, 77, 141, 0.22);
  --woot: #2f9a4f; --meh: #e0384f; --grab: #9b4fe0; --warn: #b8860b;
  --warn-text: #8a5a00; --warn-strong: #5c3d00; --danger-text: #c4283f; --danger-strong: #8e1529;
  --overlay: rgba(120, 20, 60, 0.06);
  --tile: rgba(255, 77, 141, 0.22); --floor-top: #ffe3ee; --floor-bottom: #ffd2e2;
  --name-l: 38%;
}
/* 여름 (바다): 동해 바다·계곡의 맑은 물빛 + 청록, 수박빨강 */
:root[data-theme="summer"] {
  color-scheme: light;
  --bg: #e6f7f5; --panel: #f6fdfc; --panel-2: #d4f1ec; --line: #aee0d8; --line-hover: #84cfc3;
  --fg: #0e3b39; --fg-soft: #22504d; --muted: #4f7f7a; --dim: #7fa9a3;
  --accent: #009e9c; --accent-hover: #14b5b2; --accent-ink: #ffffff; --accent-soft: rgba(0, 158, 156, 0.1); --glow: rgba(0, 158, 156, 0.2);
  --woot: #2f9a4f; --meh: #e8414f; --grab: #7a4fe0; --warn: #b8860b;
  --warn-text: #7f5a00; --warn-strong: #523a00; --danger-text: #c4283f; --danger-strong: #8e1529;
  --overlay: rgba(0, 60, 60, 0.06);
  --tile: rgba(0, 158, 156, 0.2); --floor-top: #d2f1ec; --floor-bottom: #bfe8e1;
  --name-l: 34%;
}
/* 가을 (단풍): 한지 같은 따뜻한 미색 + 단풍 빨강, 은행 노랑, 갈색 글씨 */
:root[data-theme="autumn"] {
  color-scheme: light;
  --bg: #f7efe2; --panel: #fffaf1; --panel-2: #efe2cc; --line: #dcc6a3; --line-hover: #c9ad80;
  --fg: #3b2314; --fg-soft: #5a3a25; --muted: #8a6a52; --dim: #b0927a;
  --accent: #c8402a; --accent-hover: #db5840; --accent-ink: #ffffff; --accent-soft: rgba(200, 64, 42, 0.1); --glow: rgba(200, 64, 42, 0.2);
  --woot: #4d8a1f; --meh: #d6365a; --grab: #8a4fc0; --warn: #b8860b;
  --warn-text: #7f5200; --warn-strong: #4f3300; --danger-text: #b42a3c; --danger-strong: #7e1424;
  --overlay: rgba(80, 40, 10, 0.06);
  --tile: rgba(200, 64, 42, 0.18); --floor-top: #f1e2c8; --floor-bottom: #e8d3b2;
  --name-l: 34%;
}
/* 겨울 (눈 오는 밤): 푸른 회색 밤하늘 + 눈처럼 흰 글씨 + 귤색. 기본(밤)보다 밝고 푸르게 */
:root[data-theme="winter"] {
  --bg: #1f2735; --panel: #273142; --panel-2: #2f3a4e; --line: #3d4a61; --line-hover: #52617c;
  --fg: #f3f6fa; --fg-soft: #d5dce6; --muted: #9aa8bd; --dim: #6c7a90;
  --accent: #ff9142; --accent-hover: #ffa865; --accent-ink: #2a1200; --accent-soft: rgba(255, 145, 66, 0.1); --glow: rgba(255, 145, 66, 0.18);
  --tile: rgba(220, 232, 255, 0.12); --floor-top: #273246; --floor-bottom: #1a2130;
}

/* ---------- 여름: 댄스 플로어를 모래사장으로. 위쪽은 물결이 흐르는 바다, 그 끝에서 하얀 파도가 밀려왔다 빠진다 ---------- */
:root[data-theme="summer"] { --floor-top: #ecd9b0; --floor-bottom: #f4e6c4; }
:root[data-theme="summer"] .floor-tiles {
  top: 40%;
  /* 모래 알갱이 */
  background-image:
    radial-gradient(circle at 30% 40%, rgba(150, 110, 50, 0.3) 0.8px, transparent 1.5px),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.6) 0.8px, transparent 1.5px),
    radial-gradient(circle at 50% 10%, rgba(170, 130, 70, 0.22) 1px, transparent 1.8px);
  background-size: 13px 13px, 19px 19px, 31px 31px;
}
:root[data-theme="summer"] .floor::before,
:root[data-theme="summer"] .floor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1; /* 아바타·DJ 부스 아래 */
  pointer-events: none;
}
/* 바다: 위는 하늘빛, 아래로 갈수록 짙은 물빛. 물결 무늬 두 겹이 서로 다른 방향으로 흐른다 */
:root[data-theme="summer"] .floor::before {
  top: 0;
  height: 40%;
  background:
    radial-gradient(ellipse 16px 2px at 16px 2px, rgba(255, 255, 255, 0.55) 60%, transparent 75%) 0 6px / 70px 15px,
    radial-gradient(ellipse 22px 2px at 22px 2px, rgba(255, 255, 255, 0.35) 60%, transparent 75%) 30px 13px / 96px 19px,
    linear-gradient(to bottom, #a6e3f3 0%, #62cbe0 30%, #27abc4 72%, #1a98b0 100%);
  animation: sea-flow 10s linear infinite;
}
/* 파도 거품: 바다와 모래가 만나는 곳의 하얀 물결 선. 밀려왔다 빠진다 */
:root[data-theme="summer"] .floor::after {
  top: calc(40% - 7px);
  height: 16px;
  /* 겹치는 타원으로 이어진 물결 선을 만들고, 주기가 다른 한 겹을 더 얹어 덜 반듯하게. 아래는 젖은 모래 */
  background:
    radial-gradient(ellipse 30px 8px at 24px 4px, rgba(255, 255, 255, 0.95) 55%, transparent 62%) 0 0 / 44px 12px repeat-x,
    radial-gradient(ellipse 40px 7px at 34px 6px, rgba(255, 255, 255, 0.6) 55%, transparent 62%) 17px 3px / 71px 13px repeat-x,
    linear-gradient(to bottom, transparent 45%, rgba(120, 90, 40, 0.2) 65%, transparent 100%);
  animation: tide 3.6s ease-in-out infinite alternate;
}
@keyframes sea-flow {
  to { background-position: 70px 6px, -66px 13px, 0 0; }
}
@keyframes tide {
  from { transform: translateY(-5px) scaleY(0.85); opacity: 0.85; }
  to { transform: translateY(6px) scaleY(1.15); opacity: 1; }
}

/* ---------- 겨울: 배경에 눈이 내린다. 작은 눈과 큰 눈 두 겹이 다른 속도로(위치 이동만 써서 가볍게) ---------- */
:root[data-theme="winter"] body::before,
:root[data-theme="winter"] body::after,
:root[data-theme="winter"] .floor::after {
  content: "";
  pointer-events: none;
  background-repeat: repeat;
  background-size: 300px 300px;
  will-change: transform;
}
:root[data-theme="winter"] body::before,
:root[data-theme="winter"] body::after {
  position: fixed;
  top: -600px;
  left: -300px;
  right: 0;
  bottom: 0;
  z-index: -1; /* 패널 뒤, 배경 위 */
}
:root[data-theme="winter"] body::before {
  background-image:
    radial-gradient(2px 2px at 40px 60px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 160px 20px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(2px 2px at 250px 180px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 100px 250px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 210px 110px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 20px 200px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 130px 140px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 280px 280px, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 190px 230px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 70px 10px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 240px 70px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 60px 150px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 170px 290px, rgba(255, 255, 255, 0.7), transparent);
  animation: snow-fall 34s linear infinite;
}
:root[data-theme="winter"] body::after {
  background-image:
    radial-gradient(3px 3px at 70px 90px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2.5px 2.5px at 220px 230px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(2.5px 2.5px at 280px 40px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(3px 3px at 150px 170px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(2.5px 2.5px at 30px 270px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(3px 3px at 250px 140px, rgba(255, 255, 255, 0.85), transparent);
  animation: snow-fall 20s linear infinite;
}
/* 댄스 플로어 위에도 눈이 내린다(아바타 앞으로) */
:root[data-theme="winter"] .floor::after {
  position: absolute;
  top: -600px;
  left: -300px;
  right: 0;
  bottom: 0;
  z-index: 20;
  opacity: 0.75;
  background-image:
    radial-gradient(2px 2px at 60px 70px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 190px 160px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 260px 250px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 120px 20px, rgba(255, 255, 255, 0.7), transparent);
  animation: snow-fall 24s linear infinite;
}
/* 한 칸(300px)씩 옆으로, 두 칸(600px)씩 아래로 움직이면 무늬가 그대로 이어져 끊김 없이 돈다 */
@keyframes snow-fall {
  from { transform: translate(0, 0); }
  to { transform: translate(300px, 600px); }
}
/* ---------- 가을: 플로어 뒤쪽에 단풍나무·은행나무가 서 있고, 바닥엔 낙엽이 깔리고, 낙엽이 바람에 살랑이며 조금씩 떨어진다 ---------- */
/* 나무·낙엽은 도트 그림(SVG 칸)이라 크기가 바뀌어도 또렷하다. 떨어지는 낙엽은 위치 이동(transform)만 써서 가볍다 */
:root[data-theme="autumn"] .floor-tiles {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' shape-rendering='crispEdges'%3E%3Crect x='6' y='4' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='12' y='4' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='6' y='7' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='9' y='7' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='12' y='7' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='9' y='10' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='40' y='8' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='43' y='8' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='46' y='8' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='43' y='11' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='70' y='2' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='73' y='5' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='73' y='2' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='82' y='26' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='88' y='26' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='82' y='29' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='85' y='29' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='88' y='29' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='85' y='32' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='20' y='30' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='23' y='30' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='26' y='30' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='23' y='33' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='52' y='34' width='3' height='3' fill='%23b5651d'/%3E%3Crect x='55' y='37' width='3' height='3' fill='%23b5651d'/%3E%3Crect x='55' y='34' width='3' height='3' fill='%23b5651d'/%3E%3Crect x='60' y='18' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='66' y='18' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='60' y='21' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='63' y='21' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='66' y='21' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='63' y='24' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='2' y='40' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='5' y='40' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='8' y='40' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='5' y='43' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='30' y='18' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='33' y='21' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='33' y='18' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='88' y='6' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='91' y='6' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='94' y='6' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='91' y='9' width='3' height='3' fill='%23f5b041'/%3E%3C/svg%3E");
  background-size: 128px 64px;
}
/* 나무 그림은 한 번만 적어 두고 여러 그루에 쓴다 */
:root[data-theme="autumn"] {
  --tree-maple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='14' height='14' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='5' height='1' fill='%23ee8a3a'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ee8a3a'/%3E%3Crect x='5' y='1' width='6' height='1' fill='%23d24a2a'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%23ee8a3a'/%3E%3Crect x='3' y='2' width='4' height='1' fill='%23d24a2a'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23f5b041'/%3E%3Crect x='8' y='2' width='4' height='1' fill='%23d24a2a'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%23ee8a3a'/%3E%3Crect x='2' y='3' width='11' height='1' fill='%23d24a2a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23ee8a3a'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23d24a2a'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23f5b041'/%3E%3Crect x='5' y='4' width='8' height='1' fill='%23d24a2a'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%23a8331d'/%3E%3Crect x='0' y='5' width='12' height='1' fill='%23d24a2a'/%3E%3Crect x='12' y='5' width='2' height='1' fill='%23a8331d'/%3E%3Crect x='1' y='6' width='8' height='1' fill='%23d24a2a'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23f5b041'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23d24a2a'/%3E%3Crect x='11' y='6' width='2' height='1' fill='%23a8331d'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%23d24a2a'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23a8331d'/%3E%3Crect x='6' y='7' width='3' height='1' fill='%23d24a2a'/%3E%3Crect x='9' y='7' width='3' height='1' fill='%23a8331d'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23a8331d'/%3E%3Crect x='5' y='8' width='3' height='1' fill='%23d24a2a'/%3E%3Crect x='8' y='8' width='2' height='1' fill='%23a8331d'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%236b4426'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%234e301a'/%3E%3Crect x='5' y='10' width='2' height='1' fill='%236b4426'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%234e301a'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%236b4426'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%234e301a'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%236b4426'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%234e301a'/%3E%3Crect x='5' y='13' width='2' height='1' fill='%236b4426'/%3E%3Crect x='7' y='13' width='2' height='1' fill='%234e301a'/%3E%3C/svg%3E");
  --tree-ginkgo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15' width='12' height='15' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='2' height='1' fill='%23f2c12e'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23ffe27a'/%3E%3Crect x='5' y='1' width='3' height='1' fill='%23f2c12e'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%23ffe27a'/%3E%3Crect x='5' y='2' width='4' height='1' fill='%23f2c12e'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%23ffe27a'/%3E%3Crect x='4' y='3' width='6' height='1' fill='%23f2c12e'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23ffe27a'/%3E%3Crect x='3' y='4' width='7' height='1' fill='%23f2c12e'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%23c9971c'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23ffe27a'/%3E%3Crect x='2' y='5' width='8' height='1' fill='%23f2c12e'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23c9971c'/%3E%3Crect x='1' y='6' width='9' height='1' fill='%23f2c12e'/%3E%3Crect x='10' y='6' width='2' height='1' fill='%23c9971c'/%3E%3Crect x='1' y='7' width='8' height='1' fill='%23f2c12e'/%3E%3Crect x='9' y='7' width='2' height='1' fill='%23c9971c'/%3E%3Crect x='2' y='8' width='7' height='1' fill='%23f2c12e'/%3E%3Crect x='9' y='8' width='2' height='1' fill='%23c9971c'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23f2c12e'/%3E%3Crect x='8' y='9' width='2' height='1' fill='%23c9971c'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%23c9971c'/%3E%3Crect x='4' y='10' width='4' height='1' fill='%23f2c12e'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23c9971c'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%236b4426'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%234e301a'/%3E%3Crect x='5' y='12' width='1' height='1' fill='%236b4426'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%234e301a'/%3E%3Crect x='5' y='13' width='1' height='1' fill='%236b4426'/%3E%3Crect x='6' y='13' width='1' height='1' fill='%234e301a'/%3E%3Crect x='4' y='14' width='2' height='1' fill='%236b4426'/%3E%3Crect x='6' y='14' width='2' height='1' fill='%234e301a'/%3E%3C/svg%3E");
}
/* 나무: 지평선(플로어 위쪽 34%) 띠의 바닥에 맞춰 세운다. 키는 띠 높이에 맞춰 줄어든다 */
:root[data-theme="autumn"] .floor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  z-index: -1; /* 아바타·DJ 부스 뒤 */
  pointer-events: none;
  background:
    var(--tree-maple) 2% 100% / auto 92% no-repeat,
    var(--tree-ginkgo) 21% 100% / auto 100% no-repeat,
    var(--tree-maple) 44% 100% / auto 66% no-repeat,
    var(--tree-ginkgo) 63% 100% / auto 82% no-repeat,
    var(--tree-maple) 99% 100% / auto 96% no-repeat;
}
:root[data-theme="autumn"] body::before,
:root[data-theme="autumn"] .floor::after {
  content: "";
  pointer-events: none;
  background-repeat: repeat;
  background-size: 300px 300px;
  will-change: transform;
}
/* 화면 배경(패널 뒤)에 작은 낙엽 */
:root[data-theme="autumn"] body::before {
  position: fixed;
  top: -600px;
  left: -100px;
  right: -100px;
  bottom: 0;
  z-index: -1;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' shape-rendering='crispEdges'%3E%3Crect x='60' y='80' width='2' height='2' fill='%23d24a2a'/%3E%3Crect x='64' y='80' width='2' height='2' fill='%23d24a2a'/%3E%3Crect x='60' y='82' width='2' height='2' fill='%23d24a2a'/%3E%3Crect x='62' y='82' width='2' height='2' fill='%23d24a2a'/%3E%3Crect x='64' y='82' width='2' height='2' fill='%23d24a2a'/%3E%3Crect x='62' y='84' width='2' height='2' fill='%23d24a2a'/%3E%3Crect x='210' y='160' width='2' height='2' fill='%23f2c12e'/%3E%3Crect x='212' y='160' width='2' height='2' fill='%23f2c12e'/%3E%3Crect x='214' y='160' width='2' height='2' fill='%23f2c12e'/%3E%3Crect x='212' y='162' width='2' height='2' fill='%23f2c12e'/%3E%3Crect x='140' y='250' width='2' height='2' fill='%23ee8a3a'/%3E%3Crect x='142' y='252' width='2' height='2' fill='%23ee8a3a'/%3E%3Crect x='142' y='250' width='2' height='2' fill='%23ee8a3a'/%3E%3Crect x='20' y='210' width='2' height='2' fill='%23f5b041'/%3E%3Crect x='22' y='210' width='2' height='2' fill='%23f5b041'/%3E%3Crect x='24' y='210' width='2' height='2' fill='%23f5b041'/%3E%3Crect x='22' y='212' width='2' height='2' fill='%23f5b041'/%3E%3Crect x='260' y='30' width='2' height='2' fill='%23a8331d'/%3E%3Crect x='264' y='30' width='2' height='2' fill='%23a8331d'/%3E%3Crect x='260' y='32' width='2' height='2' fill='%23a8331d'/%3E%3Crect x='262' y='32' width='2' height='2' fill='%23a8331d'/%3E%3Crect x='264' y='32' width='2' height='2' fill='%23a8331d'/%3E%3Crect x='262' y='34' width='2' height='2' fill='%23a8331d'/%3E%3Crect x='100' y='140' width='2' height='2' fill='%23b5651d'/%3E%3Crect x='102' y='142' width='2' height='2' fill='%23b5651d'/%3E%3Crect x='102' y='140' width='2' height='2' fill='%23b5651d'/%3E%3C/svg%3E");
  animation: leaf-fall 46s ease-in-out infinite;
}
/* 댄스 플로어 위(아바타 앞)에 떨어지는 낙엽 */
:root[data-theme="autumn"] .floor::after {
  position: absolute;
  top: -600px;
  left: -100px;
  right: -100px;
  bottom: 0;
  z-index: 20;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' shape-rendering='crispEdges'%3E%3Crect x='40' y='50' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='46' y='50' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='40' y='53' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='43' y='53' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='46' y='53' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='43' y='56' width='3' height='3' fill='%23d24a2a'/%3E%3Crect x='190' y='130' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='193' y='130' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='196' y='130' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='193' y='133' width='3' height='3' fill='%23f2c12e'/%3E%3Crect x='260' y='230' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='263' y='233' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='263' y='230' width='3' height='3' fill='%23ee8a3a'/%3E%3Crect x='110' y='260' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='116' y='260' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='110' y='263' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='113' y='263' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='116' y='263' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='113' y='266' width='3' height='3' fill='%23a8331d'/%3E%3Crect x='230' y='20' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='233' y='20' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='236' y='20' width='3' height='3' fill='%23f5b041'/%3E%3Crect x='233' y='23' width='3' height='3' fill='%23f5b041'/%3E%3C/svg%3E");
  animation: leaf-fall 30s ease-in-out infinite;
}
/* 바람에 좌우로 살랑이며 내려온다. 두 칸(600px) 내려가고 옆으로는 제자리로 돌아와 끊김 없이 돈다 */
@keyframes leaf-fall {
  0% { transform: translate(0, 0); }
  25% { transform: translate(60px, 150px); }
  50% { transform: translate(0, 300px); }
  75% { transform: translate(60px, 450px); }
  100% { transform: translate(0, 600px); }
}

/* ---------- 봄: 플로어 뒤쪽에 벚나무가 서 있고, 바닥엔 벚꽃잎이 떨어져 있고, 꽃잎이 바람에 흩날린다 ---------- */
/* 가을과 같은 방식(도트 SVG, 위치 이동만). 바닥이 분홍이라 나무는 진분홍 그늘·흰 꽃·짙은 갈색 줄기로 대비를 준다 */
:root[data-theme="pink"] {
  --tree-cherry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13' width='15' height='13' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%23ffd6e3'/%3E%3Crect x='5' y='0' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='9' y='0' width='1' height='1' fill='%23ffd6e3'/%3E%3Crect x='10' y='0' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23ffd6e3'/%3E%3Crect x='3' y='1' width='5' height='1' fill='%23ffa8c5'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23ffd6e3'/%3E%3Crect x='9' y='1' width='4' height='1' fill='%23ffa8c5'/%3E%3Crect x='13' y='1' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='0' y='2' width='2' height='1' fill='%23ffd6e3'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffa8c5'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='4' y='2' width='6' height='1' fill='%23ffa8c5'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='11' y='2' width='3' height='1' fill='%23ffa8c5'/%3E%3Crect x='14' y='2' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23ffd6e3'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ffa8c5'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='7' y='3' width='6' height='1' fill='%23ffa8c5'/%3E%3Crect x='13' y='3' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='3' y='4' width='8' height='1' fill='%23ffa8c5'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%23ffa8c5'/%3E%3Crect x='13' y='4' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='1' y='5' width='4' height='1' fill='%23ffa8c5'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='6' y='5' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='9' y='5' width='3' height='1' fill='%23ffa8c5'/%3E%3Crect x='12' y='5' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='3' y='6' width='3' height='1' fill='%23ffa8c5'/%3E%3Crect x='6' y='6' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='8' y='6' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='10' y='6' width='3' height='1' fill='%23e86a98'/%3E%3Crect x='4' y='7' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='7' y='7' width='2' height='1' fill='%235b3a2e'/%3E%3Crect x='10' y='7' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%235b3a2e'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233f271f'/%3E%3Crect x='6' y='9' width='2' height='1' fill='%235b3a2e'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%233f271f'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%235b3a2e'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%233f271f'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%235b3a2e'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%233f271f'/%3E%3Crect x='5' y='12' width='3' height='1' fill='%235b3a2e'/%3E%3Crect x='8' y='12' width='2' height='1' fill='%233f271f'/%3E%3C/svg%3E");
  --tree-cherry2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13' width='12' height='13' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='1' height='1' fill='%23ffd6e3'/%3E%3Crect x='5' y='0' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%23ffd6e3'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%23ffd6e3'/%3E%3Crect x='4' y='1' width='5' height='1' fill='%23ffa8c5'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffd6e3'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffa8c5'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='4' y='2' width='6' height='1' fill='%23ffa8c5'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23ffd6e3'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ffa8c5'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='7' y='3' width='3' height='1' fill='%23ffa8c5'/%3E%3Crect x='10' y='3' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='0' y='4' width='3' height='1' fill='%23ffa8c5'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='4' y='4' width='6' height='1' fill='%23ffa8c5'/%3E%3Crect x='10' y='4' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%23ffa8c5'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='8' y='5' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23fff7fb'/%3E%3Crect x='6' y='6' width='3' height='1' fill='%23ffa8c5'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23e86a98'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='5' y='7' width='2' height='1' fill='%23ffa8c5'/%3E%3Crect x='7' y='7' width='2' height='1' fill='%23e86a98'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%235b3a2e'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%233f271f'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%235b3a2e'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%233f271f'/%3E%3Crect x='4' y='10' width='2' height='1' fill='%235b3a2e'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%233f271f'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%235b3a2e'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%233f271f'/%3E%3Crect x='4' y='12' width='2' height='1' fill='%235b3a2e'/%3E%3Crect x='6' y='12' width='2' height='1' fill='%233f271f'/%3E%3C/svg%3E");
}
:root[data-theme="pink"] .floor-tiles {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64' shape-rendering='crispEdges'%3E%3Crect x='8' y='6' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='11' y='6' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='40' y='10' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='43' y='13' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='70' y='4' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='70' y='7' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='87' y='28' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='84' y='31' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='90' y='31' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='87' y='34' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='22' y='34' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='25' y='34' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='54' y='40' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='57' y='43' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='62' y='20' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='65' y='20' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='4' y='46' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='4' y='49' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='30' y='22' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='33' y='25' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='100' y='50' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='103' y='50' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='116' y='14' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='116' y='17' width='3' height='3' fill='%23fff7fb'/%3E%3C/svg%3E");
  background-size: 128px 64px;
}
:root[data-theme="pink"] .floor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  z-index: -1; /* 아바타·DJ 부스 뒤 */
  pointer-events: none;
  background:
    var(--tree-cherry) 2% 100% / auto 90% no-repeat,
    var(--tree-cherry2) 22% 100% / auto 100% no-repeat,
    var(--tree-cherry) 45% 100% / auto 64% no-repeat,
    var(--tree-cherry2) 66% 100% / auto 82% no-repeat,
    var(--tree-cherry) 99% 100% / auto 96% no-repeat;
}
:root[data-theme="pink"] body::before,
:root[data-theme="pink"] .floor::after {
  content: "";
  pointer-events: none;
  background-repeat: repeat;
  background-size: 300px 300px;
  will-change: transform;
}
:root[data-theme="pink"] body::before {
  position: fixed;
  top: -600px;
  left: -100px;
  right: -100px;
  bottom: 0;
  z-index: -1; /* 패널 뒤 */
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' shape-rendering='crispEdges'%3E%3Crect x='60' y='80' width='2' height='2' fill='%23e86a98'/%3E%3Crect x='62' y='80' width='2' height='2' fill='%23e86a98'/%3E%3Crect x='210' y='160' width='2' height='2' fill='%23ffa8c5'/%3E%3Crect x='212' y='162' width='2' height='2' fill='%23ffa8c5'/%3E%3Crect x='140' y='250' width='2' height='2' fill='%23e86a98'/%3E%3Crect x='140' y='252' width='2' height='2' fill='%23e86a98'/%3E%3Crect x='20' y='210' width='2' height='2' fill='%23ffa8c5'/%3E%3Crect x='22' y='210' width='2' height='2' fill='%23ffa8c5'/%3E%3Crect x='260' y='30' width='2' height='2' fill='%23e86a98'/%3E%3Crect x='262' y='32' width='2' height='2' fill='%23e86a98'/%3E%3Crect x='100' y='140' width='2' height='2' fill='%23ffa8c5'/%3E%3Crect x='100' y='142' width='2' height='2' fill='%23ffa8c5'/%3E%3Crect x='180' y='280' width='2' height='2' fill='%23e86a98'/%3E%3Crect x='182' y='280' width='2' height='2' fill='%23e86a98'/%3E%3C/svg%3E");
  animation: petal-fall 40s ease-in-out infinite;
}
:root[data-theme="pink"] .floor::after {
  position: absolute;
  top: -600px;
  left: -100px;
  right: -100px;
  bottom: 0;
  z-index: 20; /* 아바타 앞 */
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' shape-rendering='crispEdges'%3E%3Crect x='40' y='50' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='43' y='50' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='190' y='130' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='193' y='133' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='260' y='230' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='260' y='233' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='110' y='260' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='113' y='263' width='3' height='3' fill='%23e86a98'/%3E%3Crect x='230' y='20' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='233' y='20' width='3' height='3' fill='%23fff7fb'/%3E%3Crect x='73' y='170' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='70' y='173' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='76' y='173' width='3' height='3' fill='%23ffa8c5'/%3E%3Crect x='73' y='176' width='3' height='3' fill='%23ffa8c5'/%3E%3C/svg%3E");
  animation: petal-fall 26s ease-in-out infinite;
}
/* 꽃잎은 낙엽보다 가벼워서 좌우로 더 크게 흔들리며 내려온다. 두 칸(600px) 내려가고 옆으로는 제자리로 돌아와 끊김 없이 돈다 */
@keyframes petal-fall {
  0% { transform: translate(0, 0); }
  25% { transform: translate(90px, 150px); }
  50% { transform: translate(10px, 300px); }
  75% { transform: translate(90px, 450px); }
  100% { transform: translate(0, 600px); }
}

/* ---------- 겨울: 눈 쌓인 밤 놀이터. 바닥은 달빛 비친 눈밭, 지평선에 눈 쌓인 그네·미끄럼틀·시소와 눈사람·가로등·전나무 ---------- */
/* 내리는 눈은 위쪽(body::before/::after, .floor::after) 그대로. 소품은 가을·봄과 같은 도트 SVG */
:root[data-theme="winter"] {
  --park-pine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 15' width='11' height='15' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='4' y='1' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%232f6a50'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='4' y='3' width='2' height='1' fill='%232f6a50'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='3' y='4' width='4' height='1' fill='%23f3f7fc'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='3' y='5' width='4' height='1' fill='%232f6a50'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='3' y='6' width='4' height='1' fill='%232f6a50'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='2' y='7' width='6' height='1' fill='%23f3f7fc'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%232f6a50'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%232f6a50'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='1' y='10' width='8' height='1' fill='%23f3f7fc'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='1' y='11' width='8' height='1' fill='%232f6a50'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='1' y='12' width='8' height='1' fill='%232f6a50'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%231f4a39'/%3E%3Crect x='4' y='13' width='2' height='1' fill='%234a3428'/%3E%3Crect x='6' y='13' width='1' height='1' fill='%2333241b'/%3E%3Crect x='4' y='14' width='2' height='1' fill='%234a3428'/%3E%3Crect x='6' y='14' width='1' height='1' fill='%2333241b'/%3E%3C/svg%3E");
  --park-swing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10' width='15' height='10' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='15' height='1' fill='%23f3f7fc'/%3E%3Crect x='0' y='1' width='14' height='1' fill='%23d8434e'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='13' y='2' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='3' y='6' width='3' height='1' fill='%23f3f7fc'/%3E%3Crect x='9' y='6' width='3' height='1' fill='%23f3f7fc'/%3E%3Crect x='14' y='6' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23f2c12e'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23c9971c'/%3E%3Crect x='9' y='7' width='2' height='1' fill='%23f2c12e'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23c9971c'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='14' y='9' width='1' height='1' fill='%23a8303b'/%3E%3C/svg%3E");
  --park-slide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' width='14' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='4' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23f2c12e'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23c9971c'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%239aa3b3'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='5' width='4' height='1' fill='%239aa3b3'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='8' y='6' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='7' width='4' height='1' fill='%239aa3b3'/%3E%3Crect x='9' y='7' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='11' y='7' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='10' y='8' width='3' height='1' fill='%233f7fd0'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%239aa3b3'/%3E%3Crect x='11' y='9' width='3' height='1' fill='%232b5ea6'/%3E%3C/svg%3E");
  --park-seesaw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' width='12' height='7' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='0' y='1' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='4' y='3' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='8' y='4' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%23d8434e'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='8' y='5' width='2' height='1' fill='%233f7fd0'/%3E%3Crect x='10' y='5' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='0' y='6' width='3' height='1' fill='%23d8434e'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%23a8303b'/%3E%3Crect x='10' y='6' width='2' height='1' fill='%232b5ea6'/%3E%3C/svg%3E");
  --park-snowman: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14' width='9' height='14' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='3' height='1' fill='%2322262e'/%3E%3Crect x='3' y='1' width='3' height='1' fill='%2322262e'/%3E%3Crect x='2' y='2' width='5' height='1' fill='%2322262e'/%3E%3Crect x='3' y='3' width='3' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%231b1e24'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%231b1e24'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23f08a3c'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23f3f7fc'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='2' y='7' width='4' height='1' fill='%23d8434e'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='1' y='8' width='3' height='1' fill='%23f3f7fc'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23d8434e'/%3E%3Crect x='5' y='8' width='2' height='1' fill='%23f3f7fc'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='0' y='9' width='4' height='1' fill='%23f3f7fc'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23a8303b'/%3E%3Crect x='5' y='9' width='3' height='1' fill='%23f3f7fc'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='0' y='10' width='3' height='1' fill='%23f3f7fc'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%231b1e24'/%3E%3Crect x='4' y='10' width='4' height='1' fill='%23f3f7fc'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='0' y='11' width='8' height='1' fill='%23f3f7fc'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='1' y='12' width='6' height='1' fill='%23f3f7fc'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%23c3d3e8'/%3E%3Crect x='2' y='13' width='5' height='1' fill='%23c3d3e8'/%3E%3C/svg%3E");
  --park-lamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 14' width='7' height='14' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%23ffd27a' fill-opacity='0.45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffd27a' fill-opacity='0.45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ffe7a3'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23ffd27a' fill-opacity='0.45'/%3E%3Crect x='0' y='2' width='2' height='1' fill='%23ffd27a' fill-opacity='0.45'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffe7a3'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23ffd27a' fill-opacity='0.45'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23ffd27a' fill-opacity='0.45'/%3E%3Crect x='2' y='3' width='3' height='1' fill='%232a2f3a'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23ffd27a' fill-opacity='0.45'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%232a2f3a'/%3E%3Crect x='2' y='13' width='3' height='1' fill='%232a2f3a'/%3E%3C/svg%3E");
}
/* 눈밭: 지평선 쪽은 어둑하고 앞쪽은 밝게, 반짝이는 눈가루 */
:root[data-theme="winter"] .floor-tiles {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.95) 0.8px, transparent 1.6px) 0 0 / 23px 17px,
    radial-gradient(circle at 70% 70%, rgba(205, 225, 255, 0.8) 0.8px, transparent 1.6px) 0 0 / 37px 29px,
    linear-gradient(to bottom, #6f84a6 0%, #9fb2cd 30%, #c4d2e6 100%);
}
:root[data-theme="winter"] .floor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* 눈밭(.floor-tiles, 위쪽 28%부터)이 불투명해서 소품 발이 지평선에 딱 닿게 한다 */
  height: calc(28% + 3px);
  z-index: -1; /* 아바타·DJ 부스 뒤 */
  pointer-events: none;
  background:
    var(--park-pine) 1% 100% / auto 96% no-repeat,
    var(--park-swing) 17% 100% / auto 78% no-repeat,
    var(--park-slide) 38% 100% / auto 86% no-repeat,
    var(--park-snowman) 52% 100% / auto 58% no-repeat,
    var(--park-seesaw) 64% 100% / auto 44% no-repeat,
    var(--park-lamp) 82% 100% / auto 100% no-repeat,
    var(--park-pine) 99% 100% / auto 100% no-repeat;
}
/* 좁은 화면(휴대폰)에서는 소품끼리 겹치지 않게 시소·가로등을 빼고 넷만 */
@media (max-width: 900px) {
  :root[data-theme="winter"] .floor::before {
    background:
      var(--park-pine) 0% 100% / auto 90% no-repeat,
      var(--park-swing) 30% 100% / auto 70% no-repeat,
      var(--park-snowman) 52% 100% / auto 52% no-repeat,
      var(--park-slide) 76% 100% / auto 80% no-repeat;
  }
}
/* 바닥이 밝은 눈밭이라 이름에 어두운 그림자를 둘러 읽히게 한다 */
:root[data-theme="winter"] .dancer-name {
  color: var(--fg-soft);
  text-shadow: 0 1px 2px rgba(10, 18, 34, 0.9), 0 0 3px rgba(10, 18, 34, 0.6);
}

/* ---------- 무대(id audition-pink): 오디션 프로그램 같은 무대. 지평선 쪽으로 뾰족한 하얀 피라미드 무대, 위에서 부채꼴로 쏟아지는 분홍 빔,
   뒤 벽 조명 줄, 무대 앞 바닥 조명. 음악방송 무대·파랑판 초안은 theme-drafts 브랜치에 있다 ---------- */
/* 테마 효과 자리(index.html): .floor-fx는 아바타 뒤, .floor-front는 아바타 앞. 쓰지 않는 테마에서는 숨는다 */
.floor-fx, .floor-front { display: none; }
:root[data-theme="audition-pink"] {
  --bg: #10040d; --panel: #1d0819; --panel-2: #2a0d25; --line: #3d1437; --line-hover: #5c1f53;
  --fg: #fff0fa; --fg-soft: #f3d3e8; --muted: #c99bbb; --dim: #8a5e7d;
  --accent: #ff4fb4; --accent-hover: #ff76c6; --accent-ink: #ffffff; --accent-soft: rgba(255, 79, 180, 0.12); --glow: rgba(255, 79, 180, 0.3);
  --woot: #7bd64b; --meh: #ff5a6e; --grab: #6fd8ff; --warn: #ffd23d;
  --tile: rgba(255, 79, 180, 0.3); --floor-top: #12040f; --floor-bottom: #090208;
  --beam: rgba(255, 160, 232, 0.6);
}
:root[data-theme="audition-pink"] {
  --audition-stage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Crect width='200' height='100' fill='%2312040f'/%3E%3Cline x1='40.0' y1='10.0' x2='62.0' y2='100.0' stroke='%23b0306f' stroke-width='1.5' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3Cline x1='40.0' y1='60.0' x2='60.0' y2='20.0' stroke='%23b0306f' stroke-width='1.5' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3Cline x1='160.0' y1='10.0' x2='138.0' y2='100.0' stroke='%23b0306f' stroke-width='1.5' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3Cline x1='160.0' y1='60.0' x2='140.0' y2='20.0' stroke='%23b0306f' stroke-width='1.5' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3Cline x1='30.0' y1='45.0' x2='58.0' y2='75.0' stroke='%23b0306f' stroke-width='1.5' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3Cline x1='170.0' y1='45.0' x2='142.0' y2='75.0' stroke='%23b0306f' stroke-width='1.5' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3Cpolygon points='100,0 54,100 146,100' fill='%23fbf2f8' fill-opacity='0.92'/%3E%3Cpolygon points='100,28.0 66.9,100 133.1,100' fill='none' stroke='%23ff3d8a' stroke-width='2' stroke-opacity='0.85' vector-effect='non-scaling-stroke'/%3E%3Cpolygon points='100,56.0 79.8,100 120.2,100' fill='none' stroke='%23ff3d8a' stroke-width='2' stroke-opacity='0.85' vector-effect='non-scaling-stroke'/%3E%3Cline x1='83.9' y1='35.0' x2='81.6' y2='100.0' stroke='%23ff3d8a' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/%3E%3Cline x1='116.1' y1='35.0' x2='118.4' y2='100.0' stroke='%23ff3d8a' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/%3E%3Cline x1='67.8' y1='70.0' x2='104.6' y2='100.0' stroke='%23ff3d8a' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/%3E%3Cline x1='132.2' y1='70.0' x2='95.4' y2='100.0' stroke='%23ff3d8a' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/%3E%3Cline x1='77.0' y1='50.0' x2='123.0' y2='50.0' stroke='%23ff3d8a' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/%3E%3Cline x1='100.0' y1='0.0' x2='100.0' y2='100.0' stroke='%23ff3d8a' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/%3E%3Cpolygon points='100,0 54,100 146,100' fill='none' stroke='%23ff4fb4' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --audition-fixture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' shape-rendering='crispEdges'%3E%3Crect x='32' y='6' width='16' height='10' fill='%2305060c'/%3E%3Crect x='30' y='13' width='20' height='3' fill='%230d0f18'/%3E%3Crect x='36' y='7' width='8' height='4' fill='%23ffe3f6'/%3E%3Crect x='38' y='8' width='4' height='2' fill='%23ffffff'/%3E%3C/svg%3E");
  --audition-glow: #ff8fd8;
}
:root[data-theme="audition-pink"] {
  --floor-lift: 12px; --booth-lift: 6px; /* 무대 앞 바닥 조명 자리 */
}
:root[data-theme="audition-pink"] body {
  background: radial-gradient(ellipse 70% 45% at 50% -8%, color-mix(in srgb, var(--audition-glow) 30%, var(--bg)) 0%, var(--bg) 70%) fixed, var(--bg);
}
/* 피라미드 무대(원근 바닥 판에 늘려 그린다) */
:root[data-theme="audition-pink"] .floor-tiles {
  background: var(--audition-stage) 0 0 / 100% 100% no-repeat;
}
/* 무대가 하얘서 플로어 이름에 어두운 그림자 */
:root[data-theme="audition-pink"] .dancer-name {
  color: var(--fg-soft);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.6);
}
/* 뒤 벽: 어두운 객석 위로 조명이 한 줄로 늘어서 반짝이고, 무대 쪽으로 빛 안개가 번진다 */
:root[data-theme="audition-pink"] .floor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 35px 58%, #ffffff 0 1.5px, var(--audition-glow) 2.5px, transparent 8px) 0 0 / 70px 100% repeat-x,
    radial-gradient(ellipse 60% 120% at 50% 110%, color-mix(in srgb, var(--audition-glow) 45%, transparent), transparent 70%);
  animation: lamp-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes lamp-pulse {
  from { filter: brightness(0.75); }
  to { filter: brightness(1.15); }
}
/* 빔 다발(.floor-fx, 아바타 뒤): 위 가운데 한 점에서 부채꼴로 쏟아지는 빔 두 묶음(간격이 다르고 서로 반대로 흔들린다) */
:root[data-theme="audition-pink"] .floor-fx {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
:root[data-theme="audition-pink"] .floor-fx::before,
:root[data-theme="audition-pink"] .floor-fx::after {
  content: "";
  position: absolute;
  top: -30%;
  height: 160%;
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 92%);
}
:root[data-theme="audition-pink"] .floor-fx::before {
  left: -20%;
  right: -20%;
  background: repeating-conic-gradient(from 0deg at 50% 0%, transparent 0deg 4.6deg, var(--beam) 5.2deg 5.6deg, transparent 6.2deg 7deg);
  animation: beam-sway 10s ease-in-out infinite alternate;
}
:root[data-theme="audition-pink"] .floor-fx::after {
  left: -20%;
  right: -20%;
  opacity: 0.6;
  background: repeating-conic-gradient(from 0deg at 50% 0%, transparent 0deg 10deg, var(--beam) 10.8deg 11.4deg, transparent 12.2deg 13deg);
  animation: beam-sway 7s ease-in-out infinite alternate-reverse;
}
@keyframes beam-sway {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}
/* 무대 앞 바닥 조명(.floor-front, 아바타 앞): 검은 조명이 한 줄로, 렌즈가 엇갈려 깜빡이며 위로 빛을 쏜다 */
:root[data-theme="audition-pink"] .floor-front {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  z-index: 15;
  pointer-events: none;
  background: var(--audition-fixture) 0 100% / 80px 16px repeat-x;
}
:root[data-theme="audition-pink"] .floor-front::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 46px;
  background: radial-gradient(ellipse 12px 46px at 40px 100%, color-mix(in srgb, var(--audition-glow) 70%, transparent), transparent 70%) 0 100% / 80px 46px repeat-x;
  mix-blend-mode: screen;
  animation: fixture-flash 1.1s ease-in-out infinite alternate;
}
@keyframes fixture-flash {
  from { opacity: 0.25; }
  to { opacity: 0.9; }
}

/* 움직임 줄이기를 켠 기기에서는 멈춘 그림으로 */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="summer"] .floor::before,
  :root[data-theme="summer"] .floor::after,
  :root[data-theme="winter"] body::before,
  :root[data-theme="winter"] body::after,
  :root[data-theme="winter"] .floor::after,
  :root[data-theme="autumn"] body::before,
  :root[data-theme="autumn"] .floor::after,
  :root[data-theme="pink"] body::before,
  :root[data-theme="pink"] .floor::after,
  :root[data-theme="audition-pink"] .floor::before,
  :root[data-theme="audition-pink"] .floor-fx::before,
  :root[data-theme="audition-pink"] .floor-fx::after,
  :root[data-theme="audition-pink"] .floor-front::before {
    animation: none;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }