/* ══════════════════════════════════════════════════════════════
   skin.css — 팝 스킨 1단계: 로비 (2026-10-12)
   · 생성 그림(img/ui2/*.webp)으로 바탕·칩·카드 색조·이어하기 버튼·
     히든 타일·아래 탭 아이콘을 덧씌운다. 시안: docs/mockups/lobby_hybrid_v3.html
   · 기존 css 는 건드리지 않는다 — index.html 에서 이 파일 링크만 빼면 원래대로.
   · 로고·마스코트·디스크(새 vinyl_*)·아이템 그림은 그대로. 구조(HTML)도 그대로
     (home.js 에서 바꾼 것은 불꽃·가방 칩·친구 그림 세 곳뿐).
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 로비 바탕: 우주에서 본 지구 (지구 스킨 skin-earth.css 가 같은 자리를 다시 정한다 · K-Pop 분홍 배경은 2026-10-23 지움) ── */
body.home-active { background: url(../img/ui2/bg_lobby_earth.webp) center / cover no-repeat fixed, #0b1a33 !important; }
@media (min-width: 701px) {
  body.home-active { background: url(../img/ui2/bg_lobby_earth_pc.webp) center / cover no-repeat fixed, #0b1a33 !important; }
}

/* ── 2. 상단 칩: 흰 알약 → 칩마다 다른 색조 유리 ── */
#music-home .ui-chip { border: 1.5px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 10px rgba(139, 92, 246, .14); }
#music-home #ui-chip-score { background: linear-gradient(180deg, #fff6e3, #ffeecb); color: #a4731f; }
#music-home #ui-chip-streak { background: linear-gradient(180deg, #ffeede, #ffdfc2); color: #c75a16; }
#music-home #ui-chip-bag { background: linear-gradient(180deg, #f0e8fd, #e4d8fa); color: #7a5cd0; }
#music-home .ui-chip-me { background: linear-gradient(180deg, #f3e9ff, #dccbf8); }   /* 프로필 동그라미: 흰 바탕에서는 흰 토끼(코비)가 묻혔다 → 다른 칩처럼 연보라 (2026-10-13 사용자) */
/* 불꽃·가방은 이제 투명 webp 그림 — 동그라미 바탕을 없애고 그림 그대로 */
#music-home img.ui-flame, #music-home .ui-chip-bag img { border-radius: 0; object-fit: contain; background: none; }

/* ── 3. 카드 색조(시안 v2·v3 의 구역별 파스텔) ── */
#music-home .ui-lobby .ui-card.ui-lb-next { background: linear-gradient(180deg, #fff3f9, #ffe4f1); border: 1.5px solid #ffc3de; box-shadow: 0 10px 24px rgba(240, 61, 146, .13), inset 0 2px 0 #fff; }
#music-home .ui-lobby .ui-lb-streak { background: linear-gradient(180deg, #fff6ea, #ffe8cf); border: 1.5px solid #ffcf9a; box-shadow: 0 10px 24px rgba(255, 122, 26, .15), inset 0 2px 0 #fff; }
#music-home .ui-lobby .ui-card.ui-lb-any { background: linear-gradient(180deg, #eef6ff, #dcebfd); border: 1.5px solid #b9d6f5; box-shadow: 0 10px 24px rgba(42, 143, 216, .15), inset 0 2px 0 #fff; }
#music-home .ui-lb-now { background: rgba(255, 255, 255, .72); border-color: #ffd7e8; }

/* 친구 버튼: 진분홍 그라데이션 + 토끼 그림 */
#music-home .ui-lb-friends { background: linear-gradient(150deg, #ff8cc0, #f03d92); border: 0; box-shadow: 0 10px 22px rgba(240, 61, 146, .27), inset 0 2px 0 rgba(255, 255, 255, .35); color: #fff; }
#music-home .ui-lb-friends b { color: #fff; }
#music-home .ui-lb-friends small { color: #ffe3f2; }
#music-home .ui-lb-friends .ui-fr-bun { display: block; width: 56px; height: 40px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .2)); }

/* ── 4. 이어하기 버튼: 생성 사탕 버튼(양끝 보존) — 로비의 그 버튼만 ── */
#music-home #ui-lb-go {
  border: solid transparent; border-width: 0 26px;
  border-image: url(../img/ui2/btn_cta_earth.webp) 0 141 fill stretch;
  background: none; box-shadow: none; border-radius: 0;
  text-shadow: 0 2px 4px #b3287a;
  filter: drop-shadow(0 8px 14px rgba(240, 61, 146, .35));
  transition: transform .08s, filter .08s;
}
#music-home #ui-lb-go:active { transform: translateY(2px); filter: drop-shadow(0 4px 8px rgba(240, 61, 146, .35)); }

/* ── 5. 히든 무대 타일: 밤 무대 배경 + 금 테두리 (CLEAR CLUB 문법) ── */
#music-home .ui-lb-tile.is-dark {
  background: linear-gradient(170deg, #16305a, #0b1a33);
  border: 0;
  box-shadow: 0 0 0 1.5px rgba(243, 210, 122, .6), 0 0 0 4px rgba(243, 210, 122, .14), 0 10px 24px rgba(36, 26, 74, .45);
}
#music-home .ui-lb-tile.is-dark b { text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
#music-home .ui-lb-tile.is-dark small { color: #d9d0f2; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
#music-home .ui-lb-tile.is-dark img { opacity: .3; }

/* ── 6. 아래 탭: SVG 선 아이콘 → 생성 사탕 아이콘 (그림은 CSS 가 그린다) ── */
#music-home .ui-nav svg { display: none; }
#music-home .ui-nav > button::before {
  content: ''; display: block; width: 26px; height: 26px; margin: 0 auto 3px;
  background: center / contain no-repeat;
  filter: grayscale(.75) opacity(.62); transition: transform .2s, filter .2s;
}
#music-home .ui-nav > button[data-home-nav="home"]::before { background-image: url(../img/ui2/tab_home.webp); }
#music-home .ui-nav > button[data-home-nav="stage"]::before { background-image: url(../img/ui2/tab_stage.webp); }
#music-home .ui-nav > button[data-home-nav="artist"]::before { background-image: url(../img/ui2/tab_artist.webp); }
#music-home .ui-nav > button[data-home-nav="collection"]::before { background-image: url(../img/ui2/tab_disc.webp); }
#music-home .ui-nav > button[data-home-nav="rank"]::before { background-image: url(../img/ui2/tab_rank.webp); }
#music-home .ui-nav > button.is-on::before { filter: none; transform: translateY(-3px) scale(1.25); }
#music-home .ui-nav > button.is-on { color: var(--ui-pink, #e0489e); }
#music-home .ui-nav { background: linear-gradient(180deg, rgba(246, 241, 255, .94), rgba(235, 226, 251, .94)); border-color: #fff; }
/* PC(701px~)의 알약 가로 배치: 아이콘을 글자 왼쪽에 작게 */
@media (min-width: 701px) {
  #music-home .learning-mobile-nav.ui-nav > button::before { width: 20px; height: 20px; margin: 0; }
}

/* ── 7. 아직 희던 곳들: PC 알약 줄 · 소식 띠 · 탭 줄 · 바로가기 카드 · 홈페이지 · 로그인 ── */
/* PC 위 메뉴 알약 줄 — 연보라 유리 (ui.css 596 보다 구체적인 같은 선택자로 덮는다) */
@media (min-width: 701px) {
  #music-home .learning-mobile-nav.ui-nav { background: linear-gradient(180deg, rgba(246, 241, 255, .95), rgba(235, 226, 251, .95)); border: 1.5px solid #fff; }
  #music-home .learning-mobile-nav.ui-nav button.is-on { background: linear-gradient(135deg, #ffe3f2, #e6dafa); }
}
/* 소식 띠 */
#music-home .kcn-bar { background: linear-gradient(180deg, rgba(244, 239, 255, .92), rgba(233, 225, 251, .92)); border: 1.5px solid #fff; box-shadow: 0 6px 14px rgba(139, 92, 246, .13); }
/* 무대 탭의 KPOP · 플레이리스트 · KOREAN 줄 */
#music-home .home-tabs { background: linear-gradient(180deg, rgba(244, 239, 255, .88), rgba(233, 225, 251, .88)); border: 1.5px solid #fff; }
#music-home .home-tab[aria-selected="true"] { background: linear-gradient(135deg, #ffe3f2, #e6dafa); }
/* 바로가기 세 카드: 단어장=크림 · 주간 리그=금 · 내 프로필=분홍보라 */
#music-home .home-utilities button { border: 1.5px solid #fff; box-shadow: 0 8px 18px rgba(139, 92, 246, .13), inset 0 2px 0 #fff; }
#music-home .home-utilities button:nth-child(1) { background: linear-gradient(180deg, #fff6ea, #ffecd4); }
#music-home .home-utilities button:nth-child(2) { background: linear-gradient(180deg, #fff6e3, #ffeec6); }
#music-home .home-utilities button:nth-child(3) { background: linear-gradient(180deg, #ffeef7, #f0e6fc); }
/* 홈페이지로 */
#music-home .site-back { background: rgba(241, 235, 253, .85); border: 0; box-shadow: inset 0 0 0 1.5px #fff, 0 6px 14px rgba(139, 92, 246, .12); }
/* 로그인 — 사탕 분홍 알약 */
#music-home .ui-chip-login { background: linear-gradient(180deg, #ff8cc0, #f03d92); border: 1.5px solid rgba(255, 255, 255, .8); color: #fff; box-shadow: 0 3px 0 #c22276, 0 6px 10px rgba(240, 61, 146, .3); text-shadow: 0 1px 2px rgba(179, 40, 122, .6); }

/* ══════════════════════════════════════════════════════════════
   팝 스킨 2단계: 겹창 (2026-10-12) — 순위 창 = 밤 무대 · 가방 창 = 색조 줄
   시안: docs/mockups/overlays_hybrid.html
   ══════════════════════════════════════════════════════════════ */

/* ── 8. 순위 창(#ranking-modal) — 밤 무대 패널 + 금 테두리 ── */
#ranking-modal .ranking-modal-card {
  background: linear-gradient(180deg, rgba(11, 26, 51, .5), rgba(11, 26, 51, .9)), url(../img/ui2/bg_lobby_earth.webp) center / cover no-repeat, #0b1a33;
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(243, 210, 122, .6), 0 0 0 6px rgba(243, 210, 122, .13), 0 28px 56px rgba(0, 0, 0, .7);
}
/* 머리띠: 옛 흰 바탕(style.css)이 남아 흰→금빛 제목이 거의 안 보였다(2026-10-13 사용자) → 카드의 밤 무대가 그대로 비치게, 아래에 금빛 실선 */
#ranking-modal .ranking-modal-header { background: linear-gradient(180deg, rgba(10, 7, 20, .55), rgba(10, 7, 20, .2)); border-bottom: 1px solid rgba(243, 210, 122, .28); }
#ranking-modal .ranking-header-title { color: #fff; background: linear-gradient(180deg, #fff, #f3d27a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#ranking-modal .modal-close-btn { background: rgba(255, 255, 255, .14); color: #fff; border: 0; }
/* 제목·상태 이모지 → 생성 아이콘 (글자는 투명, 그림으로) */
#ranking-modal .ranking-header-icon, #ranking-modal .rank-state-emoji, #ranking-modal .tier-badge-icon, #ranking-modal .timer-icon {
  color: transparent !important; display: inline-block; background: center / contain no-repeat; overflow: hidden;
}
#ranking-modal .ranking-header-icon { width: 30px; height: 30px; background-image: url(../img/ui2/tab_rank.webp); }
#ranking-modal .rank-state-emoji { width: 76px; height: 76px; background-image: url(../img/ui2/hud_lock.webp); filter: drop-shadow(0 0 20px rgba(243, 210, 122, .35)); margin: 0 auto; }
#ranking-modal .tier-badge-icon { width: 30px; height: 30px; background-image: url(../img/ui2/hud_bolt.webp); }
#ranking-modal .timer-icon { width: 16px; height: 16px; background-image: url(../img/ui2/hud_hourglass.webp); }
/* 탭: 어두운 받침 + 금 사탕 활성 */
#ranking-modal .ranking-tab-bar { background: rgba(0, 0, 0, .35); border: 0; }
#ranking-modal .rank-tab-btn { background: transparent; color: #d9d0f2; border: 0; }
#ranking-modal .rank-tab-btn .tab-sub-tag { color: #b9aed6; }
#ranking-modal .rank-tab-btn.active { background: linear-gradient(135deg, #ffe9b0, #f3d27a); color: #2a1648; box-shadow: 0 0 14px rgba(243, 210, 122, .35); }
#ranking-modal .rank-tab-btn.active .tab-title, #ranking-modal .rank-tab-btn.active .tab-sub-tag { color: #2a1648; }
/* 규칙 글 상자 · 상태 상자 */
#ranking-modal .zone-legend-bar { background: transparent; }
#ranking-modal .legend-item { background: rgba(0, 0, 0, .32); color: #d9d0f2; border: 1px solid rgba(255, 255, 255, .13); }
#ranking-modal .rank-state-box { background: transparent; }
#ranking-modal .rank-state-title { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
#ranking-modal .rank-state-btn { background: linear-gradient(180deg, #ff9ccb, #f03d92); border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; box-shadow: 0 4px 0 #c22276, 0 10px 18px rgba(240, 61, 146, .35); text-shadow: 0 1px 2px rgba(179, 40, 122, .6); }
/* 로그인 후의 순위 줄들: 어두운 유리 줄 + 내 줄은 금 테 */
#ranking-modal .rank-item { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
#ranking-modal .rank-item.is-current-user { background: rgba(243, 210, 122, .14); border: 1.5px solid rgba(243, 210, 122, .65); }
#ranking-modal .rank-name, #ranking-modal .rank-num, #ranking-modal .rank-score-num { color: #fff; }
#ranking-modal .rank-score-unit, #ranking-modal .rank-ex, #ranking-modal .rank-friend-note, #ranking-modal .rank-scope { color: #b9aed6; }
/* 아래 내 순위 띠: 선택자가 없는 클래스(.ranking-sticky-footer)를 가리켜 옛 흰 띠가 그대로 남아 있었다 — 실제는 #rank-sticky-footer.ranking-sticky-wrap (2026-10-13). 비어 있을 땐(게스트·불러오는 중) 접는다 */
#ranking-modal .ranking-sticky-wrap { background: rgba(10, 7, 20, .92); border-top: 1px solid rgba(243, 210, 122, .35); box-shadow: none; }
#ranking-modal .ranking-sticky-wrap:empty { display: none; }

/* ── 9. 아이템 가방(.item-modal-overlay) — 연보라 유리 + 줄마다 색조 ── */
#item-modal-overlay .item-modal-card {
  background: linear-gradient(180deg, #fdfbff, #efe8fb);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(214, 200, 245, .35), 0 28px 56px rgba(58, 42, 94, .4);
}
#item-modal-overlay .item-modal-title { background: linear-gradient(135deg, #f03d92, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#item-modal-overlay .item-modal-x { background: #ece5f8; color: #8a7fae; border: 0; }
#item-modal-overlay .item-modal-tabs { background: #e9e2f6; border: 0; }
#item-modal-overlay .item-modal-tab { color: #8a7fae; background: transparent; }
#item-modal-overlay .item-modal-tab.active { background: linear-gradient(135deg, #ff6fb0, #8b5cf6); color: #fff; box-shadow: 0 4px 10px rgba(139, 92, 246, .33); }
/* 줄: 다섯 색조 돌려 쓰기(분홍→보라→하늘→민트→살구) */
#item-modal-overlay .item-row { border: 1.5px solid #fff; box-shadow: 0 4px 12px rgba(139, 92, 246, .1), inset 0 2px 0 #fff; }
#item-modal-overlay .item-row:nth-child(5n+1) { background: linear-gradient(180deg, #fff3f9, #ffe7f2); }
#item-modal-overlay .item-row:nth-child(5n+2) { background: linear-gradient(180deg, #f4efff, #eae2fb); }
#item-modal-overlay .item-row:nth-child(5n+3) { background: linear-gradient(180deg, #eef6ff, #ddecfd); }
#item-modal-overlay .item-row:nth-child(5n+4) { background: linear-gradient(180deg, #eafcf6, #d9f5ec); }
#item-modal-overlay .item-row:nth-child(5n+5) { background: linear-gradient(180deg, #fff6ea, #ffecd4); }
#item-modal-overlay .item-row.unowned { opacity: .78; }
#item-modal-overlay .item-count-badge.has { background: linear-gradient(135deg, #ff6fb0, #8b5cf6); color: #fff; }
#item-modal-overlay .item-use:not(.off):not([disabled]) { background: linear-gradient(180deg, #ffe9a8, #ffc83d); color: #7a4c00; border: 0; box-shadow: 0 3px 0 #d79b17, 0 6px 10px rgba(255, 200, 61, .3); }

/* ══════════════════════════════════════════════════════════════
   팝 스킨 3단계: 설정 모달 · 연속학습 창 (2026-10-12)
   시안: docs/mockups/settings_hybrid.html · overlays_hybrid.html(B)
   ══════════════════════════════════════════════════════════════ */

/* ── 10. 게임 설정(#settings-modal-overlay) — 연보라 유리 + 색조 줄 ── */
#settings-modal-overlay .settings-modal-card {
  background: linear-gradient(180deg, #fdfbff, #efe8fb);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(214, 200, 245, .35), 0 28px 56px rgba(58, 42, 94, .4);
}
#settings-modal-overlay .modal-title { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #f03d92, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#settings-modal-overlay .modal-close-btn { background: #ece5f8; color: #8a7fae; border: 0; }
.sm-ticon { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(139, 92, 246, .25)); -webkit-text-fill-color: initial; }
img.sm-icon { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(139, 92, 246, .2)); }
.sm-icon.sm-glyph { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #a79dc8, #8a7fae); color: #fff; font-weight: 900; font-size: 17px; }
/* 메뉴 단추: 줄마다 다른 색조(해=크림 · 음표=분홍 · 소리=하늘 · 언어=민트 · 시점=연보라) */
#settings-modal-overlay .settings-menu-btn { border: 1.5px solid #fff; box-shadow: 0 4px 12px rgba(139, 92, 246, .1), inset 0 2px 0 #fff; color: #3a2a5e; }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(1) { background: linear-gradient(180deg, #eef6ff, #ddecfd); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(2) { background: linear-gradient(180deg, #fff3f9, #ffe7f2); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(3) { background: linear-gradient(180deg, #fff6ea, #ffecd4); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(4) { background: linear-gradient(180deg, #eafcf6, #d9f5ec); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(5) { background: linear-gradient(180deg, #f4efff, #eae2fb); }
/* 구성 개편(2026-10-12): 섹션 라벨·바닥 정보 링크·계정 아이콘 */
#settings-modal-overlay .settings-sec { font-size: 10.5px; font-weight: 900; letter-spacing: .22em; color: #c86da4; margin: 13px 4px 6px; }
#settings-modal-overlay .settings-sec:first-child { margin-top: 2px; }
#settings-modal-overlay .settings-foot { text-align: center; margin-top: 12px; padding-top: 10px; border-top: 1.5px solid #ece5f8; }
#settings-modal-overlay .settings-info-link { border: 0; background: none; cursor: pointer; font: 700 11.5px var(--ui-font, sans-serif); color: #8a7fae; }
#settings-modal-overlay .settings-info-link span { border-bottom: 1px solid #d6c8ec; }
/* 로비 톱니 칩 */
#music-home #ui-chip-set { background: linear-gradient(180deg, #f4efff, #e6dafa); padding: 0 7px 0 5px; }
#music-home #ui-chip-set img { border-radius: 0; object-fit: contain; }
/* 정답 도움 · 직접 눌러서 듣기 블록 */
#assist-setting, #songtap-setting { background: linear-gradient(180deg, #fff3f9, #ffe9f3); border: 1.5px solid #ffc3de; border-radius: 16px; box-shadow: inset 0 2px 0 #fff; }
#songtap-setting { background: linear-gradient(180deg, #f4efff, #eae2fb); border-color: #d0bef2; }
.as-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 2px; }
#assist-setting .assist-seg { background: #f0e6f4; border-radius: 999px; padding: 4px; }
#assist-setting .assist-seg button { border-radius: 999px; color: #8a7fae; }
#assist-setting .assist-seg button.is-on { background: linear-gradient(135deg, #ff6fb0, #8b5cf6); color: #fff; box-shadow: 0 3px 8px rgba(139, 92, 246, .35); }
#songtap-setting .ui-switch:not(.is-off) { background: linear-gradient(135deg, #ff6fb0, #8b5cf6); }

/* ── 11. 연속학습(#streak-modal) — 밤 무대 패널 + 금 테두리 ── */
#streak-modal .streak-panel {
  background: linear-gradient(180deg, rgba(11, 26, 51, .5), rgba(11, 26, 51, .9)), url(../img/ui2/bg_lobby_earth.webp) center / cover no-repeat, #0b1a33;
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(243, 210, 122, .6), 0 0 0 6px rgba(243, 210, 122, .13), 0 28px 56px rgba(0, 0, 0, .7);
  border: 0;
}
#streak-modal .streak-panel h2 { background: linear-gradient(180deg, #fff, #f3d27a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#streak-modal .streak-close { background: rgba(255, 255, 255, .14); color: #fff; border: 0; }
#streak-modal .streak-hero img { width: 86px; height: 86px; object-fit: contain; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 0 24px rgba(255, 122, 26, .55)); animation: skin-flo 4s ease-in-out infinite; }
@keyframes skin-flo { 50% { transform: translateY(-4px); } }
#streak-modal .streak-hero strong { background: linear-gradient(180deg, #fff, #ffd84a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#streak-modal #streak-progress span { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
#streak-modal #streak-progress span.filled { background: linear-gradient(90deg, #ffb13d, #ff7a1a); box-shadow: 0 0 10px rgba(255, 122, 26, .75); }
#streak-modal .streak-next-row, #streak-modal .streak-stats { background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; color: #e6ddfa; }
#streak-modal .streak-stats b { color: #ffe9b0; }
#streak-modal #streak-owed p, #streak-modal #streak-choices p { color: #e6ddfa; }
#streak-modal #streak-owed button, #streak-modal #streak-choices button {
  background: linear-gradient(135deg, #ffe9b0, #f3d27a 45%, #ff8fc8 115%); color: #2a1648; border: 0;
  box-shadow: 0 0 18px rgba(243, 210, 122, .4), 0 4px 0 #9c6f1f, 0 10px 18px rgba(0, 0, 0, .5);
}
#streak-modal .streak-badge span { color: #b9aed6; }
#streak-modal .streak-badge img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .2), 0 4px 10px rgba(0, 0, 0, .45); }
#streak-modal .streak-rule { color: #b9aed6; border-top: 1px solid rgba(255, 255, 255, .14); }

/* ══════════════════════════════════════════════════════════════
   팝 스킨 4단계: 아바타/더보기/초대 시트 · 완료 창 · 남은 아이콘 (2026-10-12)
   ══════════════════════════════════════════════════════════════ */

/* ── 12. 올라오는 시트(.ui-sheet — 아바타·더보기·초대 공통) ── */
.ui-sheet { background: linear-gradient(180deg, #fdfbff, #efe8fb); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(214, 200, 245, .35), 0 -18px 48px rgba(58, 42, 94, .35); }
.ui-sheet .ui-tabs { background: #e9e2f6; border: 0; }
.ui-sheet .ui-tabs button { color: #8a7fae; }
.ui-sheet .ui-tabs button.is-on { background: linear-gradient(135deg, #ff6fb0, #8b5cf6); color: #fff; box-shadow: 0 4px 10px rgba(139, 92, 246, .33); }
.ui-sheet .ui-tabs button.is-on small { color: rgba(255, 255, 255, .85); }
.ui-sheet .ui-rows { background: #ffffffb8; box-shadow: inset 0 0 0 1.5px #fff, 0 4px 12px rgba(139, 92, 246, .1); }
.ui-sheet .ui-row + .ui-row { border-top-color: #efe8fb; }
.ui-hp-ic, .ui-ht-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; }
.ui-ht-ic.is-grey { filter: grayscale(1) opacity(.45); }
.ui-inv-heart { background: none; border: 0; }

/* ── 13. 완료 창(#modal .ui-done) — 진주 테두리 + 칩 색조 ── */
#modal .modal-box.ui-done { border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(214, 200, 245, .4), 0 24px 50px rgba(26, 15, 58, .55); }
#modal .ui-done .ui-done-chip { border: 1.5px solid #fff; box-shadow: 0 4px 12px rgba(139, 92, 246, .12), inset 0 2px 0 #fff; }
#modal .ui-done .ui-done-chip.is-claim { background: linear-gradient(180deg, #fff6e3, #ffeecb); }
/* 「광고 보고 보물상자」 칩 (2026-10-13 사용자: 순위 1등인 사람도 못 보고 지나쳤다 → 금빛으로 번쩍이고 누르고 싶게).
   움직이는 것은 transform 뿐 · 완료 창이 떠 있을 때만(#modal.show) · 20초쯤 뒤에는 멈춘다(켜 둔 채 두어도 폰이 데워지지 않게) · 움직임 줄이기 설정이면 처음부터 멈춤 */
#modal .ui-done .ui-done-chip.is-ad { overflow: hidden; gap: 8px; padding: 9px 10px; border: 2px solid #fff; background: linear-gradient(180deg, #fff3ad 0%, #ffd54d 46%, #ffab1c 100%); box-shadow: 0 4px 0 #d98200, 0 8px 18px rgba(255, 160, 20, .5), inset 0 2px 0 rgba(255, 255, 255, .85); }
#modal .ui-done .ui-done-chip.is-ad:active { animation: none; transform: translateY(3px) scale(.98); background: linear-gradient(180deg, #ffe680, #ffb21e); box-shadow: 0 1px 0 #d98200, inset 0 2px 0 rgba(255, 255, 255, .6); }
#modal .ui-done .ui-done-chip.is-ad > span b { font-size: 15px; line-height: 1.2; white-space: normal; color: #5b2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
#modal .ui-done .ui-done-chip.is-ad > span u { font-weight: 800; color: #8a4a06; }
#modal .ui-done .ui-done-chip.is-ad i.ui-done-adbox { width: 46px; height: 46px; background: none; border-radius: 0; overflow: visible; }
#modal .ui-done .ui-done-chip.is-ad i.ui-done-adbox img { width: 50px; height: 50px; filter: drop-shadow(0 2px 3px rgba(120, 60, 0, .4)); }
#modal .ui-done .ui-done-adgo { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 0 #e7a22a, inset 0 -2px 0 #fff0c9; }
#modal .ui-done .ui-done-adgo img { width: 24px; height: 24px; object-fit: contain; display: block; }
#modal .ui-done .ui-done-chip.is-ad::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); transform: translateX(-150%) skewX(-18deg); pointer-events: none; }
#modal.show .ui-done .ui-done-chip.is-ad { animation: cwAdPulse 1.3s ease-in-out 16; }
#modal.show .ui-done .ui-done-chip.is-ad::after { animation: cwAdShine 2.6s ease-in-out 8; }
#modal.show .ui-done .ui-done-chip.is-ad i.ui-done-adbox img { animation: cwAdWobble 1.3s ease-in-out 16; }
@keyframes cwAdPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes cwAdShine { 0%, 45% { transform: translateX(-150%) skewX(-18deg); } 100% { transform: translateX(460%) skewX(-18deg); } }
@keyframes cwAdWobble { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { #modal.show .ui-done .ui-done-chip.is-ad, #modal.show .ui-done .ui-done-chip.is-ad::after, #modal.show .ui-done .ui-done-chip.is-ad i.ui-done-adbox img { animation: none; } }
#modal .ui-done .ui-done-gift img { width: 30px; height: 30px; object-fit: contain; display: block; }

/* 아이템 줄의 「광고 보고 받기」 TV 아이콘 */
.item-use .as-icon { width: 17px; height: 17px; vertical-align: -3.5px; }

/* 5단계에서 바꾼 아이콘들의 크기 */
.pm-star-ic { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
.pm-star img { width: 54px; height: 54px; object-fit: contain; }
img.sound-mixer-icon { width: 30px; height: 30px; object-fit: contain; }
#ks-overlay .ks-lk { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; }
#ks-overlay .ks-gl { position: static !important; width: 70% !important; height: 70% !important; object-fit: contain; border-radius: 0 !important; margin: 15%; }
#ks-overlay .ks-crown img { width: 26px; height: 26px; object-fit: contain; display: block; }
#ks-overlay .ks-lock .pad img { width: 62px; height: 62px; object-fit: contain; }
.podium-crown img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* 소리 설정 창 — 연보라 유리 + 줄 색조 */
#sound-settings-overlay .sound-settings-card { background: linear-gradient(180deg, #fdfbff, #efe8fb); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(214, 200, 245, .35), 0 28px 56px rgba(58, 42, 94, .4); }
#sound-settings-overlay .modal-title { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #f03d92, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#sound-settings-overlay .modal-close-btn { background: #ece5f8; color: #8a7fae; border: 0; }
#sound-settings-overlay .sound-mixer-row { border: 1.5px solid #fff; box-shadow: 0 4px 12px rgba(139, 92, 246, .1), inset 0 2px 0 #fff; border-radius: 16px; }
#sound-settings-overlay .sound-mixer-list > .sound-mixer-row:nth-child(1) { background: linear-gradient(180deg, #eef6ff, #ddecfd); }
#sound-settings-overlay .sound-mixer-list > .sound-mixer-row:nth-child(2) { background: linear-gradient(180deg, #fff3f9, #ffe7f2); }
#sound-settings-overlay .sound-mixer-list > .sound-mixer-row:nth-child(3) { background: linear-gradient(180deg, #fff6ea, #ffecd4); }
#sound-settings-overlay .sound-settings-note { background: #f1ebfd; color: #8a7fae; border: 1.5px solid #fff; }

/* BGM 주크박스: 돌림판 = 진짜 노래판 그림 · 볼륨 아이콘 */
#bgm-turntable img { width: 100%; height: 100%; object-fit: contain; animation: skin-spin 9s linear infinite; }
@keyframes skin-spin { to { transform: rotate(360deg); } }
img.bgm-vol-icon { width: 24px; height: 24px; object-fit: contain; }

/* BGM 주크박스 창 — 연보라 유리 */
#bgm-modal-overlay .bgm-modal-card { background: linear-gradient(180deg, #fdfbff, #efe8fb); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(214, 200, 245, .35), 0 28px 56px rgba(58, 42, 94, .4); }
#bgm-modal-overlay .modal-title { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #f03d92, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#bgm-modal-overlay .modal-close-btn { background: #ece5f8; color: #8a7fae; border: 0; }

/* i18n 이모지 제거분의 아이콘 크기 */
.rk-tab-ic { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 3px; }
.bag-ticon { width: 26px; height: 26px; object-fit: contain; vertical-align: -6px; margin-right: 6px; }

/* 남은 자리 아이콘 크기 */
.pc-star-ic { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; }
.ui-done-ms img { width: 28px; height: 28px; object-fit: contain; display: block; }

/* ── 14. ARTIST 탭 히든 무대 소개 카드 — 밤 공연 입구 ── */
#music-home .artist-intro {
  background: linear-gradient(180deg, rgba(11, 26, 51, .5), rgba(11, 26, 51, .9)), url(../img/ui2/bg_lobby_earth.webp) center / cover no-repeat, #0b1a33;
  color: #fff; border: 0; border-radius: 22px;
  box-shadow: 0 0 0 1.5px rgba(243, 210, 122, .55), 0 0 0 4px rgba(243, 210, 122, .12), 0 12px 28px rgba(36, 26, 74, .45);
}
#music-home .artist-intro > b { background: linear-gradient(180deg, #fff, #f3d27a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#music-home .artist-intro p { color: #e6ddfa; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
#music-home .artist-intro ol li { background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #e6ddfa; }
#music-home .artist-intro ol li i { background: linear-gradient(135deg, #ffe9b0, #f3d27a); color: #2a1648; }

/* ── 15. 로비 오늘의 미션 줄 — 흰 알약 → 색조 ── */
#music-home .ui-ms-row { background: linear-gradient(180deg, #f8f4ff, #efe8fc); border: 1.5px solid #fff; box-shadow: 0 3px 8px rgba(139, 92, 246, .08); }
#music-home .ui-ms-row.is-done { background: linear-gradient(180deg, #eafcf3, #d9f5e8); border-color: #b5e8cf; }
#music-home .ui-ms-go { background: #fff9fcd9; box-shadow: inset 0 0 0 1.5px #f2b5d4; color: #f03d92; border: 0; }
/* 이어서 할 무대 안쪽 줄: 흰색 → 분홍 기운 */
#music-home .ui-lb-now { background: linear-gradient(180deg, #fff0f7cc, #ffe4f0cc); border-color: #ffc9e0; }
/* 소식 띠: 흰 기운을 더 걷어낸다 */
#music-home .kcn-bar { background: linear-gradient(180deg, rgba(238, 229, 252, .94), rgba(226, 214, 248, .94)); }

/* ── 16. 로비 「그림 퍼즐」 타일 — 민트 유리 ── */
#music-home .ui-lb-tile:not(.is-dark) { background: linear-gradient(180deg, #eafcf6, #d4f5ec); border: 1.5px solid #9fe3cd; box-shadow: 0 10px 24px rgba(35, 194, 126, .16), inset 0 2px 0 #fff; }
#music-home .ui-lb-tile:not(.is-dark) small { color: #4f9b82; }

/* ── 17. 컬렉션 탭(#achv-panel) — 흰 상자 일괄 색조 ── */
#achv-panel .ui-col-seg { background: linear-gradient(180deg, rgba(244, 239, 255, .92), rgba(233, 225, 251, .92)); border: 1.5px solid #fff; }
#achv-panel .achv-total > span { border: 1.5px solid #fff; box-shadow: inset 0 2px 0 #fff, 0 4px 10px rgba(139, 92, 246, .1); }
#achv-panel .achv-total > span:nth-child(1) { background: linear-gradient(180deg, #f4efff, #eae2fb); }
#achv-panel .achv-total > span:nth-child(2) { background: linear-gradient(180deg, #fff3f9, #ffe7f2); }
#achv-panel .achv-chips button { background: #f4efffd9; border: 1.5px solid #fff; }
#achv-panel .achv-card { background: linear-gradient(180deg, #fbf8ff, #f0e9fb); border: 1.5px solid #fff; }
#achv-panel .achv-more { background: #f4efffcc; }
#achv-panel .ui-col-tier { background: linear-gradient(180deg, #fbf8ff, #f0e9fb); border: 1.5px solid #fff; }
#achv-panel .ui-col-item { border: 1.5px solid #fff; box-shadow: inset 0 2px 0 #fff, 0 6px 14px rgba(139, 92, 246, .1); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+1) { background: linear-gradient(180deg, #fff3f9, #ffe7f2); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+2) { background: linear-gradient(180deg, #f4efff, #eae2fb); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+3) { background: linear-gradient(180deg, #eef6ff, #ddecfd); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+4) { background: linear-gradient(180deg, #eafcf6, #d9f5ec); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+5) { background: linear-gradient(180deg, #fff6ea, #ffecd4); }

/* ── 18. 추가 지적분(2026-10-12): 앨범 화면 3단 차별 · 알약들 · KOREAN 패널 ── */
/* 앨범 화면: NOW 카드 = 분홍, 앨범 상자 = 연보라 유리, 바탕과 셋이 구분되게 */
.ui-alb-now { background: linear-gradient(180deg, #fff0f7, #ffe0ef) !important; border: 1.5px solid #ffb7d9 !important; }
.ui-alb-box { background: linear-gradient(180deg, #f6f1fdd9, #ebe2fad9); border: 1.5px solid #fff; border-radius: 22px; box-shadow: 0 8px 20px rgba(139, 92, 246, .12), inset 0 2px 0 #fff; }
.picker-size-tabs button { background: #f1e9fcd9; border: 1.5px solid #fff; }
/* 「전부 열려 있어요」·「최근 플레이」 알약 */
#music-home .ui-lb-head > span { background: linear-gradient(180deg, #f4efff, #e9e1fb); border: 1.5px solid #fff; }
/* 「판 고르기 →」 */
#music-home .ui-btn-sub { background: linear-gradient(180deg, #fff0f7, #ffe4f0); border: 1.5px solid #ffc3de; color: #c2297d; }
/* 「← 홈페이지」 — 모듈/기존 규칙에 밀리지 않게 */
#music-home .site-back { background: linear-gradient(180deg, #f1e9fc, #e5d9f8) !important; border: 1.5px solid #fff !important; box-shadow: 0 4px 10px rgba(139, 92, 246, .12) !important; }
/* KOREAN·BASIC·ENGLISH 패널 */

/* ── 19. 로비 「그림 퍼즐」 타일 채우기 — 사탕 퍼즐 조각 + 반짝이 ── */
#music-home .ui-lb-tile:not(.is-dark) {
  background: url(../img/ui2/globe_earth.webp) right -26px bottom -30px / 110px no-repeat, #fbf6ea;
}
#music-home .ui-lb-tile:not(.is-dark) i {
  right: 16px; bottom: 16px; width: 46px; height: 46px; font-size: 24px;
  background: linear-gradient(135deg, #b9a2f2, #8b5cf6);
  box-shadow: 0 0 0 2.5px #fff, 0 6px 12px rgba(139, 92, 246, .35); transform: rotate(6deg);
}

/* 톱니 칩이 생겨 좁아진 폰 상단: 로고·칩을 조여 아바타까지 한 줄에 (2026-10-12) */
@media (max-width: 700px) {
  /* 2026-10-13 (SM-A908N, 폭 360px): 디스크 수가 두 자리가 되자 프로필 동그라미가 화면 밖으로 잘렸다 — 칩 줄은 줄지 않고, 로고가 먼저 44px 까지 줄어든다.
     그래도 모자라면 home.js fitChips 가 chips-tight 를 달아 로고를 접는다(숫자·로그인 여부·언어마다 폭이 달라 고정값으로는 못 맞춘다) */
  #music-home .learning-topbar .learning-logo { width: 72px; height: 44px; flex: 0 1 72px; min-width: 44px; }
  #music-home .ui-chips { gap: 3px; flex: 0 0 auto; }
  #music-home.chips-tight .learning-topbar .learning-logo { display: none; }
  #music-home .ui-chip { padding: 0 6px 0 3px; font-size: 13px; gap: 3px; }
  #music-home #ui-chip-set { padding: 0 4px; }
  #music-home .ui-chip img, #music-home img.ui-flame { width: 22px; height: 22px; }
  #music-home .ui-chip-me { padding: 0 3px; }
  #music-home .ui-chip-me img { width: 27px; height: 27px; }
  #music-home .ui-chip-login { padding: 0 8px; font-size: 12px; }
}

/* 새 버전 안내 카드(앱판 전용 — app-update.js 가 로비 맨 위에 꽂는다) */
#upd-soft { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 10px 9px 12px;
  border-radius: 16px; color: #fff; font: 700 12.5px var(--ui-font, sans-serif);
  background: linear-gradient(135deg, #8b5cf6, #e0489e); border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 8px 18px rgba(139, 92, 246, .35), inset 0 1.5px 0 rgba(255, 255, 255, .35); }
#upd-soft img { width: 24px; height: 24px; object-fit: contain; flex: none; filter: drop-shadow(0 0 6px rgba(255, 216, 74, .8)); }
#upd-soft span { flex: 1; min-width: 0; }
#upd-soft .upd-soft-go { flex: none; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer;
  font: 900 12px var(--ui-font, sans-serif); color: #7a4c00;
  background: linear-gradient(180deg, #ffe9a8, #ffc83d); box-shadow: 0 3px 0 #d79b17, inset 0 1.5px 0 #fff6d9; }
#upd-soft .upd-soft-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .22); color: #fff; font-weight: 900; }

/* 테마 고르기 창의 그림 아이콘(themes.js THEME_ICON_IDS 에 든 테마만 — 나머지는 이모지 그대로) */
.theme-preview-icon { flex: none; }
.theme-preview-icon img { display: block; width: 46px; height: 46px; object-fit: contain; }

/* ── 20. 게임 화면 버튼 셋 — 뒤로(분홍 동그라미) · 가방 · 설정(흰 유리 칩 + 팝 스킨 그림) — 로비 칩과 같은 문법 (2026-10-12, 사용자: 「이 버튼들 디자인도」) ──
   뒤로: 단추 자체는 폰 3D 에서 44px 에 margin -10px 로 넓게 잡혀 있어(ui.css) 그림은 ::after(동그라미)·::before(화살표)로 가운데에만 그린다 */
.cw-game-back { background: transparent !important; border: 0; box-shadow: none; filter: none; overflow: visible; border-radius: 0; }
.cw-game-back img { display: none; }
.cw-game-back::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(180deg, #ff8cc0, #f03d92); border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: 0 3px 0 #c22276, 0 6px 10px rgba(240, 61, 146, .3), inset 0 1.5px 0 rgba(255, 255, 255, .45); transition: transform .08s, box-shadow .08s; }
.cw-game-back::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 14px; height: 14px; border-left: 4px solid #fff; border-bottom: 4px solid #fff; border-radius: 2px;
  transform: translate(-30%, -50%) rotate(45deg); filter: drop-shadow(0 1px 1px rgba(179, 40, 122, .5)); }
.cw-game-back:hover { filter: brightness(1.06); }
.cw-game-back:active { transform: none; }
.cw-game-back:active::after { transform: translate(-50%, calc(-50% + 2px)); box-shadow: 0 1px 0 #c22276, 0 3px 6px rgba(240, 61, 146, .3); }
body.in-game-3d .cw-game-back::after { width: 32px; height: 32px; }
body.in-game-3d .cw-game-back::before { width: 10px; height: 10px; border-width: 3px; }
/* 가방: 흰 유리 칩 + 가방 그림 + 수 */
.hud-btn.item-bag-btn { gap: 4px; padding: 5px 11px 5px 7px; border: 1.5px solid rgba(255, 255, 255, .95); border-radius: 999px; color: #7a5cd0;
  background: linear-gradient(180deg, #fbf8ff, #efe6fd); box-shadow: 0 4px 10px rgba(139, 92, 246, .22), inset 0 1.5px 0 #fff; }
.hud-btn.item-bag-btn .item-bag-ico { display: none; }
.hud-btn.item-bag-btn::before { content: ''; width: 24px; height: 24px; flex: none; background: url(../img/ui2/hud_bag.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(139, 92, 246, .3)); }
/* 설정(⋯): 흰 유리 칩 + 톱니 그림 */
.ui-more-btn { border: 1.5px solid rgba(255, 255, 255, .95); border-radius: 15px; color: #7a5cd0; background: linear-gradient(180deg, #fbf8ff, #efe6fd);
  box-shadow: 0 4px 10px rgba(139, 92, 246, .25), inset 0 1.5px 0 #fff; }
.ui-more-btn svg { display: none; }
.ui-more-btn::before { content: ''; width: 30px; height: 30px; background: url(../img/ui2/hud_gear.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(139, 92, 246, .3)); transition: transform .25s; }
.ui-more-btn:hover::before { transform: rotate(40deg); }
.ui-more-btn:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(139, 92, 246, .25), inset 0 1.5px 0 #fff; }