/* ══════════════════════════════════════════════════════════════
   skin-earth.css — World Pop 지구 스킨 · 로비 (2026-10-16)
   · skin.css(K-Pop 팝 스킨) 뒤에 읽혀 로비 부분만 덮어쓴다. 겹창(순위·가방)은 아직 skin.css 대로.
   · 그림: img/ui2/bg_lobby_earth.webp(BG1) · globe_earth.webp(H1) · logo_earth_record.webp(L1)
     — graphics/skin/earth/ 의 생성 그림을 webp 로 줄인 것. 시안 graphics/prototypes/earth-skin/real.html
   · 팔레트: 밤하늘 #0b1a33 · 바다 #1f6fb2 / #4fb3e8 · 얕은 바다 #9fe3f5 · 땅 #4ea35a · 햇빛 #ffb53c · 산호 #ff6b5a · 엽서 종이 #fbf6ea
   · 이 파일 링크만 빼면(play.html) K-Pop 팝 스킨으로 돌아간다.
   ══════════════════════════════════════════════════════════════ */
:root {
  --wp-navy: #0b1a33; --wp-ink: #132238; --wp-ocean: #1f6fb2; --wp-sky: #4fb3e8; --wp-shallow: #9fe3f5;
  --wp-land: #4ea35a; --wp-sun: #ffb53c; --wp-sun-dark: #d99a1f; --wp-coral: #ff6b5a; --wp-paper: #fbf6ea; --wp-sand: #f3e6c4;
  --wp-glass: rgba(11, 26, 51, .66); --wp-glass-line: rgba(159, 227, 245, .28);
}

/* ── 1. 바탕: 우주에서 본 지구 ── */
body.home-active,
body.home-active.home-active { background: url(../img/ui2/bg_lobby_earth.webp) center top / cover no-repeat fixed, var(--wp-navy) !important; }
@media (min-width: 701px) {
  body.home-active { background: url(../img/ui2/bg_lobby_earth_pc.webp) center / cover no-repeat fixed, var(--wp-navy) !important; }
}
#music-home .ui-lobby { color: var(--wp-ink); }

/* ── 2. 머리띠: 지구 레코드 로고 + 유리 칩 ── */
#music-home .learning-topbar .learning-logo.wp-brand { display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; text-decoration: none; }
#music-home .wp-brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 0 1.5px rgba(159, 227, 245, .35); }
#music-home .wp-brand .wp-wordmark { width: auto; height: 46px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }

#music-home .ui-chip, #music-home #ui-chip-score, #music-home #ui-chip-streak, #music-home #ui-chip-bag, #music-home .ui-chip-me, #music-home .ui-chip-set {
  background: var(--wp-glass); border: 1.5px solid var(--wp-glass-line); color: var(--wp-paper);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#music-home .ui-chip small { color: var(--wp-shallow); }
#music-home #ui-chip-score { color: var(--wp-sun); }
#music-home #ui-chip-streak { color: #ffd38a; }
#music-home .ui-chip-me { background: linear-gradient(180deg, #1f6fb2, #0e3d6b); }
#music-home .ui-chip-login { background: linear-gradient(180deg, #ffc65e, #ffb53c); border: 1.5px solid rgba(255, 255, 255, .7); color: var(--wp-ink); box-shadow: 0 3px 0 var(--wp-sun-dark), 0 6px 12px rgba(0, 0, 0, .35); text-shadow: none; }
#music-home .kcn-bar, #music-home .home-tabs { background: var(--wp-glass); border: 1.5px solid var(--wp-glass-line); color: var(--wp-paper); backdrop-filter: blur(8px); }
#music-home .home-tab { color: #c7dcef; }
#music-home .home-tab[aria-selected="true"] { background: linear-gradient(135deg, #2a84cc, #1f6fb2); color: #fff; }
#music-home .site-back { background: var(--wp-glass); border: 0; box-shadow: inset 0 0 0 1.5px var(--wp-glass-line); color: var(--wp-paper); }

/* ── 3. 대문: 떠 있는 지구본 + 명소 핀 + 라일리 (폰·PC 모두 보인다) ── */
#music-home .ui-lobby .ui-lb-hero.wp-hero {
  display: block; position: relative; overflow: visible; min-height: 0; padding: 6px 0 0; margin: 0; border: 0; background: none; box-shadow: none; text-align: center;
}
#music-home .wp-hero .wp-copy { position: relative; z-index: 2; max-width: none; padding: 0 8px; }
#music-home .wp-hero .ui-lb-eyebrow { font-size: 11px; font-weight: 900; letter-spacing: 2.5px; color: var(--wp-sun); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#music-home .ui-lobby .wp-hero h2.ui-title { margin: 6px 0 4px; font-size: 30px; line-height: 1.12; letter-spacing: -.5px; color: var(--wp-paper); text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
#music-home .ui-lobby .wp-hero h2.ui-title em { font-style: normal; color: var(--wp-shallow); }
#music-home .wp-hero p { margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.45; color: #c7dcef; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#music-home .wp-hero .ui-btn-sub { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 999px; background: var(--wp-glass); border: 1.5px solid var(--wp-glass-line); color: var(--wp-paper); box-shadow: none; }
#music-home .wp-globe-wrap { position: relative; width: 66%; max-width: 290px; margin: 6px auto 0; aspect-ratio: 1; }
#music-home .wp-globe { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 36px rgba(79, 179, 232, .45)); animation: wp-float 6s ease-in-out infinite; }
@keyframes wp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#music-home .wp-pin { position: absolute; width: 30px; height: 30px; margin: -30px 0 0 -15px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); animation: wp-float 6s ease-in-out infinite; }
#music-home .wp-pin.is-gold { width: 36px; height: 36px; margin: -36px 0 0 -18px; }
#music-home .wp-riley { position: absolute; right: 2%; bottom: -14px; width: 44%; max-width: 200px; z-index: 3; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); pointer-events: none; }
@media (max-width: 700px) {
  #music-home .wp-brand .wp-wordmark { display: none; }   /* 폰: 칩이 많아 로고는 아이콘만 */
  #music-home .ui-lobby .ui-lb-hero.wp-hero { padding-bottom: 10px; }
  #music-home .wp-globe-wrap { margin-right: 34%; margin-left: 6%; }   /* 라일리 자리를 비워 지구본을 왼쪽으로 */
}
@media (min-width: 701px) {
  #music-home .ui-lobby .ui-lb-hero.wp-hero { display: flex; flex-direction: column; justify-content: center; min-height: 420px; padding: 24px 24px 0; text-align: left; }
  #music-home .wp-hero .wp-copy { max-width: 46%; padding: 0; }
  #music-home .ui-lobby .wp-hero h2.ui-title { font-size: clamp(32px, 3.2vw, 44px); }
  #music-home .ui-lb-hero > .wp-globe-wrap { position: relative; top: auto; right: auto; transform: none; align-self: flex-start; width: 44%; max-width: 330px; margin: -10px 0 0 6%; }   /* 라일리 왼쪽 옆 — 예전엔 ui.css 의 「.ui-lb-hero > div { position: relative }」 때문에 top 50% 만큼 아래로 밀려 디스크 줄을 가렸다(10/22) */
  #music-home .wp-riley { right: -2%; bottom: -6%; width: 36%; max-width: 260px; }
}

/* ── 4. 이어서 할 무대: 여행 엽서 ── */
#music-home .ui-lobby .ui-card { background: var(--wp-paper); border: 1.5px solid var(--wp-sand); box-shadow: 0 12px 28px rgba(0, 0, 0, .35), inset 0 2px 0 #fff; }
#music-home .ui-lobby .ui-card.ui-lb-next { position: relative; background: var(--wp-paper); border-color: var(--wp-sand); }
#music-home .ui-lobby .ui-card.ui-lb-next::after {   /* 엽서 도장(ui_postmark · 10/17) */
  content: ''; position: absolute; right: 12px; top: 10px; width: 46px; height: 46px; background: url(../img/ui2/ui_postmark.webp) center / contain no-repeat; opacity: .85; transform: rotate(-8deg); pointer-events: none;
}
#music-home .ui-lb-head h2, #music-home .ui-lobby .ui-title { color: var(--wp-ink); }
#music-home .ui-lb-head > span { background: #fff; border-color: var(--wp-sand); color: var(--wp-ocean); }
#music-home .ui-lb-now.wp-postcard { background: #fff; border: 1px solid var(--wp-sand); border-radius: 16px; padding: 8px; }
#music-home .wp-thumb { position: relative; flex-shrink: 0; width: 96px; height: 68px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
#music-home .wp-thumb .wp-place { width: 100%; height: 100%; object-fit: cover; display: block; }
#music-home .wp-thumb #ui-lb-disc { position: absolute; left: 4px; bottom: 4px; width: 30px; height: 30px; box-shadow: 0 3px 6px rgba(0, 0, 0, .45); }
#music-home .ui-lb-now p { color: #6b7a90; }
#music-home .ui-lb-missions { color: var(--wp-ink); }
#music-home #ui-lb-go {
  border: 0; border-image: none; border-radius: 16px;
  background: linear-gradient(180deg, #ffc65e, #ffb53c); color: var(--wp-ink); text-shadow: none;
  box-shadow: 0 5px 0 var(--wp-sun-dark), 0 10px 20px rgba(255, 181, 60, .35), inset 0 2px 0 rgba(255, 255, 255, .5); filter: none;
}
#music-home #ui-lb-go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--wp-sun-dark); filter: none; }
#music-home #ui-lb-go .ui-play { border-left-color: var(--wp-ink); }

/* ── 5. 연속 학습 · 친구 ── */
#music-home .ui-lobby .ui-lb-streak { background: var(--wp-paper); border: 1.5px solid var(--wp-sand); box-shadow: 0 12px 28px rgba(0, 0, 0, .35), inset 0 2px 0 #fff; }
#music-home .ui-lb-streak-copy b { color: var(--wp-coral); }
#music-home .ui-lb-dots i { background: #e8e0cc; }
#music-home .ui-lb-dots i.is-on { background: linear-gradient(90deg, var(--wp-sun), var(--wp-coral)); }
#music-home .ui-lb-friends { background: linear-gradient(150deg, #4fb3e8, #1f6fb2); border: 0; box-shadow: 0 10px 22px rgba(31, 111, 178, .4), inset 0 2px 0 rgba(255, 255, 255, .35); color: #fff; }
#music-home .ui-lb-friends small { color: #d8f1ff; }
#music-home .learning-text-action[data-book="pop_test"] { background: var(--wp-glass); border: 1.5px solid var(--wp-glass-line); color: var(--wp-shallow); border-radius: 999px; padding: 8px 14px; }

/* ── 6. 어디서든 시작: 디스크 ── */
#music-home .ui-lobby .ui-card.ui-lb-any { background: var(--wp-paper); border-color: var(--wp-sand); }
#music-home .ui-lb-discs button { color: var(--wp-ink); }
#music-home .ui-lb-discs small { color: #6b7a90; }
#music-home .ui-lb-discs img { box-shadow: 0 5px 10px rgba(0, 0, 0, .35); }
#music-home .ui-lb-discs button.is-on { color: var(--wp-ocean); }
#music-home .ui-lb-discs button.is-on img { outline-color: var(--wp-ocean); }

/* ── 7. 히든 무대(밤하늘 + 금 테두리) · 그림 퍼즐(엽서) ── */
#music-home .ui-lb-tile { background: var(--wp-paper); border: 1.5px solid var(--wp-sand); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); color: var(--wp-ink); }
#music-home .ui-lb-tile small { color: #6b7a90; }
#music-home .ui-lb-tile i { background: linear-gradient(135deg, var(--wp-sky), var(--wp-ocean)); }
#music-home .ui-lb-tile.is-dark { background: linear-gradient(170deg, #16305a, var(--wp-navy)); border: 0; color: var(--wp-paper);
  box-shadow: 0 0 0 1.5px rgba(255, 181, 60, .7), 0 0 0 4px rgba(255, 181, 60, .16), 0 12px 28px rgba(0, 0, 0, .45); }
#music-home .ui-lb-tile.is-dark b { color: var(--wp-paper); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
#music-home .ui-lb-tile.is-dark small { color: var(--wp-shallow); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#music-home .ui-lb-tile.is-dark img { filter: none; opacity: .9; right: 8px; bottom: 6px; width: 64px; height: 64px; }

/* ── 8. 아래 메뉴: 밤하늘 유리 · 선 아이콘(지구 아이콘이 나오면 바꾼다) ── */
#music-home .ui-nav, #music-home .learning-mobile-nav.ui-nav { background: var(--wp-glass); border: 1.5px solid var(--wp-glass-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
#music-home .ui-nav > button::before { display: block; filter: grayscale(.6) opacity(.7); }   /* 지구 스킨 탭 아이콘(10/17) — 그림은 skin.css 의 tab_*.webp 경로 그대로, 파일만 바뀜 */
#music-home .ui-nav > button.is-on::before { filter: none; }
#music-home .ui-nav svg { display: none; }
#music-home .ui-nav > button, #music-home .learning-mobile-nav.ui-nav button { color: #9fb3cc; }
#music-home .ui-nav > button.is-on, #music-home .learning-mobile-nav.ui-nav button.is-on { color: var(--wp-shallow); }
#music-home .ui-nav > button.is-on svg, #music-home .learning-mobile-nav.ui-nav button.is-on svg { fill: rgba(159, 227, 245, .18); }
@media (min-width: 701px) {
  #music-home .learning-mobile-nav.ui-nav button.is-on { background: rgba(79, 179, 232, .22); color: var(--wp-shallow); }
  #music-home .learning-mobile-nav.ui-nav > button::before { width: 20px; height: 20px; margin: 0; }
}

/* ── 9. 바로가기 세 카드 ── */
#music-home .home-utilities button { background: var(--wp-paper); border: 1.5px solid var(--wp-sand); box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 2px 0 #fff; color: var(--wp-ink); }
#music-home .home-utilities button:nth-child(1), #music-home .home-utilities button:nth-child(2), #music-home .home-utilities button:nth-child(3) { background: var(--wp-paper); }
#music-home .home-utilities small { color: #6b7a90; }

/* ── 10. 남은 K-Pop 보라·분홍을 한꺼번에: 로비 안에서만 ui 변수 재정의 (미션 숫자 · 받기 · Go · 로그인 카드 문구 …) ── */
#music-home {
  --ui-vio: var(--wp-ocean); --ui-vio-deep: #0e4a80; --ui-pink: var(--wp-coral);
  --ui-grad: linear-gradient(90deg, #1f6fb2, #4fb3e8); --ui-grad-edge: #0e4a80;
  --ui-ink: var(--wp-ink); --ui-soft: #3b4d66; --ui-mute: #6b7a90; --ui-off: #a3adbb;
  --ui-card: #fff; --ui-card-soft: #fff; --ui-line: var(--wp-sand); --ui-line-strong: #e2cf9c;
  --ui-piece: #4fb3e8; --ui-piece-light: #9fe3f5; --ui-piece-dark: #1f6fb2;
  --ui-shadow-card: 0 12px 28px rgba(0, 0, 0, .35); --ui-shadow-chip: 0 4px 10px rgba(0, 0, 0, .3); --ui-shadow-nav: 0 10px 26px rgba(0, 0, 0, .5);
}
#music-home .kcn-bar { background: var(--wp-glass) !important; border: 1.5px solid var(--wp-glass-line) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, .35) !important; color: var(--wp-paper); }
#music-home .kcn-bar * { color: var(--wp-paper) !important; }
#music-home .kcn-bar [class*="pin"], #music-home .kcn-bar [class*="tag"] { background: rgba(255, 181, 60, .22) !important; color: var(--wp-sun) !important; }
#music-home .ui-lb-tile:not(.is-dark) { background: url(../img/ui2/globe_earth.webp) right -26px bottom -30px / 110px no-repeat, var(--wp-paper); }
#music-home .ui-lb-tile:not(.is-dark) i { background: linear-gradient(135deg, var(--wp-sky), var(--wp-ocean)); }

/* ── 11. K-Pop 학습 탭(BASIC · KOREAN · ENGLISH)은 World Pop 에 없다 — 코드가 id 를 찾으므로 지우지 않고 숨긴다 (2026-10-16) ── */

/* ── 12. 타이틀 화면(10/17): 보케 K-Pop 사진 → 지구 일출 배경, 로고 = 워드마크 ── */
.ts-bokeh { background: url(../img/ui2/bg_title_earth.webp) center / cover !important; opacity: .55 !important; mix-blend-mode: normal !important; }
html:has(#title-screen:not(.ts-done)), html:has(#title-screen:not(.ts-done)) body { background: #0b1a33 !important; }

/* ══════════════════════════════════════════════════════════════
   지구 스킨 2단계: 겹창 (2026-10-17) — skin.css 8~13 · 17 · 20절(K-Pop 분홍 · 보라 · 밤 무대 사진)을 지구 팔레트로 덮는다.
   · 밝은 창(가방 · 설정 · 소리 · BGM · 테마 · 시트 · 완료 창) = 엽서 종이 + 바다색 제목 + 줄마다 바다 · 모래 · 땅 · 산호 · 얕은 바다 색조
   · 어두운 창(순위 · 연속 학습 · 업적 알림) = 우주에서 본 지구(bg_lobby_earth) + 햇빛 금 테두리(로비 히든 타일과 같은 문법)
   · 단추: 으뜸 = 햇빛 금(이어하기와 같음) · 버금 = 바다 그라데이션
   ══════════════════════════════════════════════════════════════ */

/* ── 13. 겹창 안에서도 ui 변수는 지구색(로비 10절과 같은 값 — 완료 창 · 시트 · 가방이 var(--ui-vio) 등을 읽는다) ── */
#modal, .ui-sheet, #item-modal-overlay, #settings-modal-overlay, #sound-settings-overlay, #bgm-modal-overlay, #theme-modal-overlay, #avatar-modal-overlay, #ranking-modal, #streak-modal, #achv-popup, #screen-game {
  --ui-vio: var(--wp-ocean); --ui-vio-deep: #0e4a80; --ui-pink: var(--wp-coral);
  --ui-grad: linear-gradient(90deg, #1f6fb2, #4fb3e8); --ui-grad-edge: #0e4a80;
  --ui-ink: var(--wp-ink); --ui-soft: #3b4d66; --ui-mute: #6b7a90; --ui-off: #a3adbb;
  --ui-card: #fff; --ui-card-soft: #fff; --ui-line: var(--wp-sand); --ui-line-strong: #e2cf9c;
  --ui-piece: #4fb3e8; --ui-piece-light: #9fe3f5; --ui-piece-dark: #1f6fb2;
  --ui-shadow-card: 0 12px 28px rgba(0, 0, 0, .35); --ui-shadow-chip: 0 4px 10px rgba(0, 0, 0, .3); --ui-shadow-sheet: 0 -14px 40px rgba(11, 26, 51, .5);
}
:root {   /* 줄 색조 5가지(가방 · 설정 · 소리 · 컬렉션이 돌려 쓴다) · 창 바탕 · 테두리 · 단추 공통값 */
  --wp-tint-sky: linear-gradient(180deg, #eef7fd, #daeefb); --wp-tint-sand: linear-gradient(180deg, #fff9ea, #f8eed3);
  --wp-tint-land: linear-gradient(180deg, #eff9ef, #ddefdd); --wp-tint-coral: linear-gradient(180deg, #fff2ee, #ffe4dd); --wp-tint-shallow: linear-gradient(180deg, #ebfbfd, #d5f4fa);
  --wp-paper-card: linear-gradient(180deg, #fffdf7, #fbf6ea); --wp-paper-ring: 0 0 0 4px rgba(159, 227, 245, .35), 0 28px 56px rgba(11, 26, 51, .5);
  --wp-title-grad: linear-gradient(135deg, #1f6fb2, #4fb3e8); --wp-ocean-grad: linear-gradient(135deg, #2a84cc, #1f6fb2);
  --wp-sun-grad: linear-gradient(180deg, #ffc65e, #ffb53c);
  --wp-night-card: 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;
  --wp-night-ring: 0 0 0 1.5px rgba(255, 181, 60, .7), 0 0 0 6px rgba(255, 181, 60, .14), 0 28px 56px rgba(0, 0, 0, .7);
  --wp-night-text: #c7dcef; --wp-night-title: linear-gradient(180deg, #fff, #ffd38a);
}

/* ── 14. 아이템 가방 ── */
#item-modal-overlay .item-modal-card { background: var(--wp-paper-card); border: 2px solid #fff; box-shadow: var(--wp-paper-ring); }
#item-modal-overlay .item-modal-title { background: var(--wp-title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#item-modal-overlay .item-modal-x { background: #e8eef5; color: #3b4d66; }
#item-modal-overlay .item-modal-tabs { background: #e6ecf2; }
#item-modal-overlay .item-modal-tab { color: #6b7a90; }
#item-modal-overlay .item-modal-tab.active { background: var(--wp-ocean-grad); color: #fff; box-shadow: 0 4px 10px rgba(31, 111, 178, .35); }
#item-modal-overlay .item-row { border: 1.5px solid #fff; box-shadow: 0 4px 12px rgba(31, 111, 178, .1), inset 0 2px 0 #fff; }
#item-modal-overlay .item-row:nth-child(5n+1) { background: var(--wp-tint-sky); }
#item-modal-overlay .item-row:nth-child(5n+2) { background: var(--wp-tint-sand); }
#item-modal-overlay .item-row:nth-child(5n+3) { background: var(--wp-tint-land); }
#item-modal-overlay .item-row:nth-child(5n+4) { background: var(--wp-tint-coral); }
#item-modal-overlay .item-row:nth-child(5n+5) { background: var(--wp-tint-shallow); }
#item-modal-overlay .item-count-badge.has { background: var(--wp-ocean-grad); color: #fff; }
#item-modal-overlay .item-use:not(.off):not([disabled]) { background: var(--wp-sun-grad); color: var(--wp-ink); box-shadow: 0 3px 0 var(--wp-sun-dark), 0 6px 10px rgba(255, 181, 60, .3); }
#item-modal-overlay .item-use.passive-badge { background: var(--wp-land); }

/* ── 15. 게임 설정 · 소리 · BGM · 테마 · 아바타 창 ── */
#settings-modal-overlay .settings-modal-card, #sound-settings-overlay .sound-settings-card, #bgm-modal-overlay .bgm-modal-card, #theme-modal-overlay .theme-modal-card, #avatar-modal-overlay .avatar-modal-card {
  background: var(--wp-paper-card); border: 2px solid #fff; box-shadow: var(--wp-paper-ring);
}
#settings-modal-overlay .modal-title, #sound-settings-overlay .modal-title, #bgm-modal-overlay .modal-title, #theme-modal-overlay .modal-title, #avatar-modal-overlay .modal-title {
  background: var(--wp-title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#settings-modal-overlay .modal-close-btn, #sound-settings-overlay .modal-close-btn, #bgm-modal-overlay .modal-close-btn, #theme-modal-overlay .modal-close-btn, #avatar-modal-overlay .modal-close-btn { background: #e8eef5; color: #3b4d66; border: 0; }
.sm-ticon { filter: drop-shadow(0 3px 6px rgba(31, 111, 178, .25)); }
img.sm-icon { filter: drop-shadow(0 2px 4px rgba(31, 111, 178, .2)); }
.sm-icon.sm-glyph { background: var(--wp-ocean-grad); }
#settings-modal-overlay .settings-menu-btn { color: var(--wp-ink); box-shadow: 0 4px 12px rgba(31, 111, 178, .1), inset 0 2px 0 #fff; }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(1) { background: var(--wp-tint-sky); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(2) { background: var(--wp-tint-sand); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(3) { background: var(--wp-tint-land); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(4) { background: var(--wp-tint-shallow); }
#settings-modal-overlay .settings-menu-list > button:nth-of-type(5) { background: var(--wp-tint-coral); }
#settings-modal-overlay .settings-sec { color: var(--wp-ocean); }
#settings-modal-overlay .settings-foot { border-top-color: var(--wp-sand); }
#settings-modal-overlay .settings-info-link { color: #6b7a90; }
#settings-modal-overlay .settings-info-link span { border-bottom-color: #e2cf9c; }
#music-home #ui-chip-set { background: var(--wp-glass); }   /* 로비 톱니 칩 — skin.css 10절의 id 선택자가 로비 칩 규칙보다 셌다 */
#assist-setting { background: var(--wp-tint-sky); border-color: #bfe0f5; }
#songtap-setting { background: var(--wp-tint-sand); border-color: #ead9ad; }
#assist-setting .assist-seg { background: #e6ecf2; }
#assist-setting .assist-seg button { color: #6b7a90; }
#assist-setting .assist-seg button.is-on { background: var(--wp-ocean-grad); color: #fff; box-shadow: 0 3px 8px rgba(31, 111, 178, .35); }
#songtap-setting .ui-switch:not(.is-off) { background: var(--wp-ocean-grad); }
#sound-settings-overlay .sound-mixer-row { box-shadow: 0 4px 12px rgba(31, 111, 178, .1), inset 0 2px 0 #fff; }
#sound-settings-overlay .sound-mixer-list > .sound-mixer-row:nth-child(1) { background: var(--wp-tint-sky); }
#sound-settings-overlay .sound-mixer-list > .sound-mixer-row:nth-child(2) { background: var(--wp-tint-sand); }
#sound-settings-overlay .sound-mixer-list > .sound-mixer-row:nth-child(3) { background: var(--wp-tint-land); }
#sound-settings-overlay .sound-settings-note { background: #eef7fd; color: #3b4d66; }
#theme-modal-overlay .theme-card { background: #fff; border-color: var(--wp-sand); }
#theme-modal-overlay .theme-card.active { border-color: var(--wp-ocean); background: #eef7fd; box-shadow: 0 4px 12px rgba(31, 111, 178, .25); }
#theme-modal-overlay .theme-card.active::after { color: var(--wp-ocean); }
#theme-modal-overlay .quick-theme-btn { background: #fff; border-color: var(--wp-sand); color: var(--wp-ink); }

/* ── 16. 올라오는 시트(아바타 · 더보기 · 초대) ── */
.ui-sheet { background: var(--wp-paper-card); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(159, 227, 245, .35), 0 -18px 48px rgba(11, 26, 51, .5); }
.ui-sheet-grab { background: #e2cf9c; }
.ui-sheet-x { background: #e8eef5; color: #3b4d66; }
.ui-sheet .ui-tabs { background: #e6ecf2; }
.ui-sheet .ui-tabs button { color: #6b7a90; }
.ui-sheet .ui-tabs button.is-on { background: var(--wp-ocean-grad); color: #fff; box-shadow: 0 4px 10px rgba(31, 111, 178, .35); }
.ui-sheet .ui-rows { background: #ffffffd9; box-shadow: inset 0 0 0 1.5px #fff, 0 4px 12px rgba(31, 111, 178, .1); }
.ui-sheet .ui-row + .ui-row { border-top-color: var(--wp-sand); }

/* ── 17. 완료 창(#modal .ui-done) — 엽서 종이 + 햇빛 금 디스크 줄 · 이어하기 단추 ── */
#modal .modal-box.ui-done { background: var(--wp-paper-card); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(159, 227, 245, .4), 0 24px 50px rgba(11, 26, 51, .6); }
#modal .ui-done .ui-done-disc { background: linear-gradient(120deg, #fff6e3, #eef7fd); border: 1px solid #ead9ad; }
#modal .ui-done .ui-done-disc b { color: #8a5a12; }
#modal .ui-done .ui-done-chip { border: 1.5px solid #fff; box-shadow: 0 3px 0 #e2cf9c, inset 0 2px 0 #fff; background: #fff; }
#modal .ui-done .ui-done-chip:active { box-shadow: 0 0 0 #e2cf9c; background: #eef7fd; }
#modal .ui-done .ui-done-chip.is-claim { background: var(--wp-tint-sand); }
#modal .ui-done .ui-done-chip.is-ad { background: linear-gradient(180deg, #fff3ad 0%, #ffd54d 46%, #ffb53c 100%); box-shadow: 0 4px 0 var(--wp-sun-dark), 0 8px 18px rgba(255, 181, 60, .5), inset 0 2px 0 rgba(255, 255, 255, .85); }
#modal .ui-done .ui-done-adgo { box-shadow: 0 2px 0 var(--wp-sun-dark), inset 0 -2px 0 #fff0c9; }
#modal .ui-done-words { background: #fffdf7; border-color: var(--wp-sand); }
#modal .ui-done-words summary b { color: var(--wp-coral); }
#modal .ui-done > .ui-btn { background: var(--wp-sun-grad); color: var(--wp-ink); box-shadow: 0 5px 0 var(--wp-sun-dark), 0 10px 20px rgba(255, 181, 60, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
#modal .ui-done > .ui-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--wp-sun-dark); }
#modal .ui-done > .ui-btn .ui-play { border-left-color: var(--wp-ink); }

/* ── 18. 순위 창 — 우주에서 본 지구 + 햇빛 금 테두리 ── */
#ranking-modal .ranking-modal-card { background: var(--wp-night-card); box-shadow: var(--wp-night-ring); }
#ranking-modal .ranking-modal-header { background: linear-gradient(180deg, rgba(11, 26, 51, .6), rgba(11, 26, 51, .15)); border-bottom-color: rgba(255, 181, 60, .3); }
#ranking-modal .ranking-header-title { background: var(--wp-night-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#ranking-modal .rank-tab-btn { color: var(--wp-night-text); }
#ranking-modal .rank-tab-btn .tab-sub-tag { color: #9fb3cc; }
#ranking-modal .rank-tab-btn.active { background: linear-gradient(135deg, #ffd38a, #ffb53c); color: var(--wp-navy); box-shadow: 0 0 14px rgba(255, 181, 60, .35); }
#ranking-modal .rank-tab-btn.active .tab-title, #ranking-modal .rank-tab-btn.active .tab-sub-tag { color: var(--wp-navy); }
#ranking-modal .weekly-header-banner { background: linear-gradient(135deg, #1f6fb2, #4fb3e8); box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(159, 227, 245, .35); }
#ranking-modal .legend-item { color: var(--wp-night-text); }
#ranking-modal .rank-state-btn { background: var(--wp-sun-grad); border: 1.5px solid rgba(255, 255, 255, .7); color: var(--wp-ink); box-shadow: 0 4px 0 var(--wp-sun-dark), 0 10px 18px rgba(255, 181, 60, .35); text-shadow: none; }
#ranking-modal .rank-item.is-current-user { background: rgba(255, 181, 60, .14); border-color: rgba(255, 181, 60, .7); }
#ranking-modal .rank-score-unit, #ranking-modal .rank-ex, #ranking-modal .rank-friend-note, #ranking-modal .rank-scope { color: var(--wp-night-text); }
#ranking-modal .ranking-sticky-wrap { background: rgba(11, 26, 51, .94); border-top-color: rgba(255, 181, 60, .4); }
#ranking-modal .rank-state-emoji { filter: drop-shadow(0 0 20px rgba(255, 181, 60, .35)); }

/* ── 19. 연속 학습 창 ── */
#streak-modal .streak-panel { background: var(--wp-night-card); box-shadow: var(--wp-night-ring); }
#streak-modal .streak-panel h2 { background: var(--wp-night-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#streak-modal .streak-hero strong { background: linear-gradient(180deg, #fff, var(--wp-sun)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#streak-modal #streak-progress span.filled { background: linear-gradient(90deg, var(--wp-sun), var(--wp-coral)); box-shadow: 0 0 10px rgba(255, 107, 90, .7); }
#streak-modal .streak-next-row, #streak-modal .streak-stats { color: var(--wp-night-text); }
#streak-modal .streak-stats b { color: #ffd38a; }
#streak-modal #streak-owed p, #streak-modal #streak-choices p { color: var(--wp-night-text); }
#streak-modal #streak-owed button, #streak-modal #streak-choices button { background: var(--wp-sun-grad); color: var(--wp-ink); box-shadow: 0 0 18px rgba(255, 181, 60, .4), 0 4px 0 var(--wp-sun-dark), 0 10px 18px rgba(0, 0, 0, .5); }
#streak-modal .streak-badge span, #streak-modal .streak-rule { color: #9fb3cc; }

/* ── 20. 업적 알림 · 자세히 보기(#achv-popup) — 밤하늘 + 햇빛 금 ── */
#achv-popup { background: radial-gradient(circle at 50% 40%, rgba(22, 48, 90, .92), rgba(11, 26, 51, .97)); }
#achv-popup .achv-popup-card { color: var(--wp-paper); }
#achv-popup .achv-tag { background: var(--wp-sun); color: var(--wp-navy); }
#achv-popup .achv-popup-why { color: #ffd38a; }
#achv-popup .achv-popup-sub, #achv-popup .achv-popup-more, #achv-popup .achv-popup-foot { color: var(--wp-night-text); }
#achv-popup .achv-popup-arts .achv-frame { border-color: rgba(255, 181, 60, .45); }
#achv-popup .achv-popup-arts figcaption b { color: var(--wp-sun); }
#achv-popup .achv-popup-arts figcaption span { color: #ffd38a; }
#achv-popup .achv-ladder li.on { background: rgba(255, 181, 60, .18); }

/* ── 21. 컬렉션 탭(#achv-panel) 흰 상자들 — 엽서 종이 ── */
#achv-panel .ui-col-seg { background: linear-gradient(180deg, rgba(255, 253, 247, .94), rgba(251, 246, 234, .94)); }
#achv-panel .achv-total > span { box-shadow: inset 0 2px 0 #fff, 0 4px 10px rgba(31, 111, 178, .1); }
#achv-panel .achv-total > span:nth-child(1) { background: var(--wp-tint-sky); }
#achv-panel .achv-total > span:nth-child(2) { background: var(--wp-tint-sand); }
#achv-panel .achv-chips button { background: #fffdf7d9; }
#achv-panel .achv-card, #achv-panel .ui-col-tier { background: var(--wp-paper-card); }
#achv-panel .achv-more { background: #fffdf7cc; }
#achv-panel .ui-col-item { box-shadow: inset 0 2px 0 #fff, 0 6px 14px rgba(31, 111, 178, .1); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+1) { background: var(--wp-tint-sky); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+2) { background: var(--wp-tint-sand); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+3) { background: var(--wp-tint-land); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+4) { background: var(--wp-tint-coral); }
#achv-panel .ui-col-items .ui-col-item:nth-child(5n+5) { background: var(--wp-tint-shallow); }

/* ── 22. 게임 화면 버튼 셋 — 뒤로(바다 동그라미) · 가방 · 설정(엽서 유리 칩) ── */
.cw-game-back::after { background: linear-gradient(180deg, #4fb3e8, #1f6fb2); box-shadow: 0 3px 0 #0e4a80, 0 6px 10px rgba(31, 111, 178, .35), inset 0 1.5px 0 rgba(255, 255, 255, .45); }
.cw-game-back::before { filter: drop-shadow(0 1px 1px rgba(14, 74, 128, .5)); }
.cw-game-back:active::after { box-shadow: 0 1px 0 #0e4a80, 0 3px 6px rgba(31, 111, 178, .3); }
.hud-btn.item-bag-btn, .ui-more-btn { color: var(--wp-ocean); background: linear-gradient(180deg, #fffdf7, #f3ebd8); box-shadow: 0 4px 10px rgba(11, 26, 51, .25), inset 0 1.5px 0 #fff; }
.hud-btn.item-bag-btn::before, .ui-more-btn::before { filter: drop-shadow(0 2px 3px rgba(11, 26, 51, .3)); }
.ui-more-btn:active { box-shadow: 0 2px 6px rgba(11, 26, 51, .25), inset 0 1.5px 0 #fff; }

/* ── 23. 눈으로 보고 남은 K-Pop 색(10/17 겹창 확인) ── */
.achv-claim, #achv-panel .achv-claim-all { background: var(--wp-sun-grad); color: var(--wp-ink); box-shadow: 0 4px 0 var(--wp-sun-dark), 0 10px 18px rgba(255, 181, 60, .35); }   /* 업적 「보상 받기」 — 보라 · 분홍 → 햇빛 금 */
#achv-panel .achv-chips button[aria-pressed="true"] { background: var(--wp-sun); border-color: var(--wp-sun); color: var(--wp-navy); }
#achv-popup { background: radial-gradient(circle at 50% 40%, rgba(22, 48, 90, .95), rgba(11, 26, 51, .98)); }   /* 뒤 로비가 덜 비치게 */
.ui-btn.is-off { background: #e9e3d2; color: #8a8470; box-shadow: 0 5px 0 #d9d0b5; }   /* 시트의 「변경사항 없음」 — 연보라 → 모래 */
.achv-claim:active { box-shadow: 0 1px 0 var(--wp-sun-dark); }

/* ══════════════════════════════════════════════════════════════
   지구 스킨 3단계: K-Pop 그림 코드 교체 + 안 쓰던 지구 그림 적용 (2026-10-17 · docs/IMAGE_AUDIT.md 3절)
   ══════════════════════════════════════════════════════════════ */

/* ── 24. 로비 ARTIST 소개 카드 — K-Pop 콘서트 사진(skin.css 14절) → 우주 지구 + 햇빛 금 테두리 ── */
#music-home .artist-intro { background: var(--wp-night-card); box-shadow: var(--wp-night-ring); }
#music-home .artist-intro > b { background: var(--wp-night-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#music-home .artist-intro p, #music-home .artist-intro ol li { color: var(--wp-night-text); }
#music-home .artist-intro ol li i { background: linear-gradient(135deg, #ffd38a, #ffb53c); color: var(--wp-navy); }

/* ── 25. 연속 학습 보상 상자 — K-Pop jpg → 지구 보물상자 아이템 그림. 오늘 받았으면(is-open · streak-rewards.js) 흐리게 ── */
#streak-modal #streak-reward-box { border-radius: 0; object-fit: contain; width: 42px; height: 42px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
#streak-modal #streak-reward-box.is-open { opacity: .45; filter: grayscale(.5); }
#streak-modal #streak-choices button img { object-fit: contain; }

/* ── 26. 이어서 할 무대 = 진짜 엽서: 엽서 틀(postcard_frame) 위에 그 등급 맵 사진 + 디스크를 우표 자리에 ── */
#music-home .ui-lb-now.wp-postcard { align-items: center; }
#music-home .wp-thumb { width: 138px; height: 87px; border-radius: 0; overflow: visible; box-shadow: none; background: url(../img/ui2/postcard_frame.webp) center / 100% 100% no-repeat; }
#music-home .wp-thumb .wp-place { position: absolute; left: 7.5%; top: 9%; width: 55%; height: 80%; object-fit: cover; border-radius: 3px; transform: rotate(-1.2deg); }
#music-home .wp-thumb #ui-lb-disc { left: auto; bottom: auto; right: 7%; top: 13%; width: 24px; height: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }

/* ── 27. 이어하기 단추 — 생성 햇빛 단추 그림(btn_cta_earth · 양끝 보존) ── */
#music-home #ui-lb-go {
  border: solid transparent; border-width: 0 26px; border-radius: 0;
  border-image: url(../img/ui2/btn_cta_earth.webp) 0 97 fill stretch;
  background: none; box-shadow: none; color: var(--wp-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  filter: drop-shadow(0 6px 0 var(--wp-sun-dark)) drop-shadow(0 10px 14px rgba(255, 181, 60, .35));
  transition: transform .08s, filter .08s;
}
#music-home #ui-lb-go:active { transform: translateY(3px); box-shadow: none; filter: drop-shadow(0 2px 0 var(--wp-sun-dark)); }

/* ── 28. 히든 무대 타일 — 여행 경로 선(ui_route) 을 아래에 살짝 ── */
#music-home .ui-lb-tile.is-dark { position: relative; overflow: hidden; }
#music-home .ui-lb-tile.is-dark::after { content: ''; position: absolute; left: 6%; right: 30%; bottom: 6px; height: 14%; background: url(../img/ui2/ui_route.webp) left center / contain no-repeat; opacity: .55; pointer-events: none; }

/* ── 29. 무대(Stages) 탭 — 「나의 학습 경로」 머리글 + 등급 카드 5개 (2026-10-17 저녁 · 전에는 K-Pop 연보라 그대로) ── */
/* 머리글: 어두운 우주 바탕 위라 엽서 종이색 글자 + 그림자(로비 대문 제목과 같은 문법) · 눈썹 글은 햇빛 금 */
#music-home .learning-path .learning-eyebrow { color: var(--wp-sun); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#music-home .learning-path .learning-eyebrow:before { background: var(--wp-sun); box-shadow: 0 0 0 5px rgba(255, 181, 60, .22); }
#music-home .learning-path .learning-section-heading h2 { color: var(--wp-paper); text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
#music-home .learning-path .learning-path-note { color: var(--wp-night-text); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
/* 등급 카드: 엽서 종이 + 모래 테두리 · 오른쪽 위 고리는 바다색 · 번호 · 디스크 이름 · 화살표는 바다 */
#music-home .learning-step { background: var(--wp-paper-card); border: 1.5px solid var(--wp-sand); color: var(--wp-ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 2px 0 #fff; }
#music-home .learning-step:before { border-color: #bfe0f5; box-shadow: 0 0 0 12px #eef7fd, 0 0 0 25px #fffdf7; opacity: .9; }
#music-home .learning-step.is-current { border-color: var(--wp-sand); background: var(--wp-paper-card); box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 2px 0 #fff; }
#music-home .learning-step.is-current:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, .4), inset 0 2px 0 #fff; }
#music-home .step-number { color: var(--wp-ocean); }
#music-home .step-body strong { color: var(--wp-ink); }
#music-home .step-body small { color: var(--wp-ocean); }
#music-home .step-body em { color: #6b7a90; }
#music-home .step-arrow { color: var(--wp-ocean); }
#music-home .learning-step .step-disc { filter: drop-shadow(0 3px 5px rgba(11, 26, 51, .35)); }
#music-home .learning-step.is-locked { background: #f3ecdc; opacity: .85; }
#music-home .learning-step.is-locked .step-body strong { color: #6b7a90; }
#music-home .locked-label { color: #6b7a90; background: #e9e3d2; }
#music-home .learning-path ~ .learning-text-action, #music-home #music-panel .learning-text-action { background: var(--wp-glass); border: 1.5px solid var(--wp-glass-line); color: var(--wp-shallow); border-radius: 999px; }   /* "<- Homepage" pill under the tier cards */

/* ── 30. 완성 엽서(postcard.js · 2026-10-17): 완료 창 단추 + 엽서 보기 창 ── */
#modal .ui-done-sec .pc-btn { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#modal .ui-done-sec .pc-btn img { width: 22px; height: 22px; object-fit: contain; }
#postcard-sheet { position: fixed; inset: 0; z-index: 10060; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 26, 51, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#postcard-sheet.open { display: flex; }
#postcard-sheet .pc-card { width: min(520px, 100%); text-align: center; }
#postcard-sheet h3 { margin: 0 0 12px; color: var(--wp-paper); font: 400 22px 'Jua', 'Noto Sans KR', sans-serif; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
#postcard-sheet img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transform: rotate(-1.5deg); }
#postcard-sheet .pc-btns { display: flex; gap: 8px; margin-top: 20px; }
#postcard-sheet .pc-btns button { flex: 1; height: 46px; border: 0; border-radius: 14px; font: 800 14px var(--ui-font); cursor: pointer; }
#postcard-sheet .pc-share { background: var(--wp-sun-grad); color: var(--wp-ink); box-shadow: 0 4px 0 var(--wp-sun-dark); }
#postcard-sheet .pc-save { background: var(--wp-ocean-grad); color: #fff; box-shadow: 0 4px 0 #0e4a80; }
#postcard-sheet .pc-close { background: var(--wp-glass); color: var(--wp-paper); border: 1.5px solid var(--wp-glass-line); }
#postcard-sheet .pc-btns button:active { transform: translateY(2px); box-shadow: none; }

/* ── 31. 크루 시스템(crew.js · 2026-10-17): 아바타 칸의 레벨 띠 · 스킬 단추 횟수 ── */
.ui-sp .ui-cell { position: relative; }
.ui-sp .ui-cell .ui-lv { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(11, 26, 51, .75); color: var(--wp-shallow); font: 900 9px var(--ui-font); font-style: normal; letter-spacing: .3px; }
.ui-sp .ui-cell .ui-lv.is-hi { background: linear-gradient(135deg, #ffd38a, #ffb53c); color: var(--wp-navy); }
.ui-sp .ui-cell.is-gold { border-color: rgba(255, 211, 138, .9); box-shadow: 0 0 14px rgba(255, 181, 60, .35); }
.ui-sp .ui-cell.is-gold img { filter: sepia(.35) saturate(1.6) brightness(1.12) drop-shadow(0 0 7px rgba(255, 211, 138, .9)); }
.hud-btn.skill-btn { background: linear-gradient(135deg, #2a84cc, #4fb3e8); }
.hud-btn.skill-btn .skill-n { margin-left: 2px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .25); font-weight: 900; }

/* ── 32. 공유 엽서 창 · 번호표 줄 · 나의 번호표 (share-card.js · 2026-10-22) ──
   K-Pop share-card.js 의 창을 엽서 종이 · 바다색으로. 아이콘 그림(hud_share · hud_medal)이 없으면 share-card.js 가 작은 SVG 를 넣는다 */
#share-card-overlay { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 26, 51, .8); opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
#share-card-overlay.open { opacity: 1; visibility: visible; }
#share-card-overlay .sc-box { width: min(340px, 100%); max-height: 100%; overflow-y: auto; border-radius: 22px; padding: 14px 14px 12px; background: var(--wp-paper-card, #fbf6ea); border: 2px solid #fff; color: #132238; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); text-align: center; font-family: 'Noto Sans KR', sans-serif; }
#share-card-overlay .sc-title { font: 1.05rem 'Jua', sans-serif; margin: 2px 0 10px; color: #1f6fb2; }
#share-card-overlay .sc-prev { position: relative; width: 100%; aspect-ratio: 1080 / 1350; border-radius: 14px; overflow: hidden; background: #0b1a33; box-shadow: 0 6px 18px rgba(11, 26, 51, .3); }
#share-card-overlay .sc-prev img { display: block; width: 100%; height: 100%; }
#share-card-overlay .sc-prev .sc-spin { position: absolute; inset: 0; display: grid; place-items: center; color: #9fe3f5; font: 700 .8rem 'Noto Sans KR', sans-serif; }
#share-card-overlay .sc-note { margin: 8px 0 0; font-size: .72rem; color: #6b5a42; word-break: keep-all; overflow-wrap: anywhere; }
#share-card-overlay .sc-opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 2px 2px; text-align: left; }
#share-card-overlay .sc-opts label { display: flex; align-items: center; gap: 8px; font: 700 .76rem 'Noto Sans KR', sans-serif; color: #33496a; cursor: pointer; word-break: keep-all; overflow-wrap: anywhere; }
#share-card-overlay .sc-opts input { accent-color: #1f6fb2; width: 17px; height: 17px; margin: 0; flex: none; }
#share-card-overlay .sc-acts { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
#share-card-overlay .sc-acts button { border: 0; border-radius: 999px; padding: 10px 18px; font: 700 .86rem 'Noto Sans KR', sans-serif; cursor: pointer; }
#share-card-overlay .sc-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, #4fb3e8, #1f6fb2); color: #fff; box-shadow: 0 3px 0 #164f80; flex: 1; }
#share-card-overlay .sc-go:disabled { opacity: .6; }
#share-card-overlay .sc-x { background: #e9dfc8; color: #5b4a32; }
.cw-ic { display: inline-flex; width: 1.35em; height: 1.35em; vertical-align: -.3em; flex: none; pointer-events: none; }
.cw-ic img, .cw-ic svg { width: 100%; height: 100%; object-fit: contain; }
.cw-share-btn .cw-ic, #share-card-overlay .sc-go .cw-ic { width: 1.5em; height: 1.5em; margin: -.25em 0; }
.cw-find-tag .cw-ic { width: 1.7em; height: 1.7em; margin: -.4em -.05em -.4em -.3em; }
#share-shelf-overlay h3 > span { display: inline-flex; align-items: center; gap: 6px; }
.cw-find-tag { display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 2px; padding: 4px 11px; border-radius: 999px; background: #132238; color: #ffd38a; font: 700 .74rem 'Noto Sans KR', sans-serif; white-space: nowrap; }
.cw-find-tag b { font: .9rem 'Black Han Sans', sans-serif; font-weight: 400; letter-spacing: .03em; }
.cw-find-tag.is-wait { opacity: .75; font-weight: 500; }
.cw-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 0; border: 0; border-radius: 999px; padding: 8px 18px; background: linear-gradient(180deg, #4fb3e8, #1f6fb2); color: #fff; box-shadow: 0 3px 0 #164f80; font: 700 .82rem 'Noto Sans KR', sans-serif; cursor: pointer; }
.cw-share-row { display: flex; justify-content: center; }
#share-shelf-overlay { position: fixed; inset: 0; z-index: 10055; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 26, 51, .6); opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
#share-shelf-overlay.open { opacity: 1; visibility: visible; }
#share-shelf-overlay .ss-box { width: min(340px, 100%); max-height: 86%; overflow-y: auto; border-radius: 20px; background: var(--wp-paper-card, #fbf6ea); border: 2px solid #fff; padding: 14px; box-shadow: 0 10px 30px rgba(11, 26, 51, .3); font-family: 'Noto Sans KR', sans-serif; color: #132238; }
#share-shelf-overlay h3 { margin: 0 0 8px; font: 1.05rem 'Jua', sans-serif; color: #1f6fb2; display: flex; justify-content: space-between; align-items: center; }
#share-shelf-overlay h3 button { border: 0; background: #e6f1f8; border-radius: 999px; width: 30px; height: 30px; cursor: pointer; color: #33496a; }
#share-shelf-overlay .ss-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid #eadfc8; }
#share-shelf-overlay .ss-row img { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; background: #e6f1f8; flex: none; }
#share-shelf-overlay .ss-row div { flex: 1; min-width: 0; font-size: .72rem; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
#share-shelf-overlay .ss-row div b { display: block; font-size: .8rem; }
#share-shelf-overlay .ss-row span { font: 1.05rem 'Black Han Sans', sans-serif; color: #1f6fb2; white-space: nowrap; }
#share-shelf-overlay .ss-row button { border: 0; background: #ffe4df; color: #d9483a; border-radius: 999px; padding: 5px 10px; font: 700 .7rem 'Noto Sans KR', sans-serif; cursor: pointer; flex: none; }
#share-shelf-overlay .ss-empty { margin: 14px 4px; font-size: .8rem; color: #6b5a42; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
#share-shelf-overlay .ss-note { margin: 8px 0 0; font-size: .66rem; color: #6b5a42; }

/* ── 33. 크루 도착 창(#curtain-call-overlay · curtain-call.js · 2026-10-22) — K-Pop 앙코르 커튼콜을 지구 모티브로 ──
   밤하늘 · 지구 지평선 · 도착 게이트 · 새벽빛 · 지구 받침 · 탑승권 스킬 카드. 그림 img/ui2/arrival_*.webp(graphics/skin/earth/SHARE_CREW_PROMPTS.md C1~C5)가 없으면
   (10/22 저녁 그림이 들어옴 — graphics/skin/earth/share-crew/make_assets.py: C1 01 · C2 01 · C3 02 · C4 01 · C5 02). 등장 단계 s1(게이트 · 빛 · 그림자) → s2(공개) → s3(리본 · 이름) → s4(스킬 · 단추) */
#curtain-call-overlay { position: fixed; inset: 0; z-index: 9400; background: rgba(6, 14, 30, .78); opacity: 0; transition: opacity .25s; }
#curtain-call-overlay.open { opacity: 1; }
#curtain-call-overlay .cc { position: absolute; left: 50%; top: 46%; width: min(330px, 84vw); aspect-ratio: 579 / 760; transform: translate(-50%, -56%); cursor: pointer; }
#curtain-call-overlay .cc-bg { position: absolute; inset: 0; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
  background: url(../img/ui2/arrival_bg.webp) center / 100% 100% no-repeat; }
#curtain-call-overlay .cc-cur { position: absolute; pointer-events: none; top: 9%; bottom: 25%; width: 37%; z-index: 4; background: linear-gradient(90deg, #12305a, #1b4680 60%, #12305a); box-shadow: inset 0 0 0 2px rgba(255, 181, 60, .55), inset 0 -30px 40px rgba(0, 0, 0, .35); transition: transform .7s cubic-bezier(.6, 0, .3, 1); }
#curtain-call-overlay .cc-cur::after { content: ''; position: absolute; top: 46%; width: 10px; height: 46px; border-radius: 6px; background: linear-gradient(180deg, #ffd38a, #e09a2b); }
#curtain-call-overlay .cc-cur.l { left: 13%; border-radius: 120px 0 0 22px; }
#curtain-call-overlay .cc-cur.l::after { right: 10px; }
#curtain-call-overlay .cc-cur.r { right: 13%; border-radius: 0 120px 22px 0; }
#curtain-call-overlay .cc-cur.r::after { left: 10px; }
#curtain-call-overlay .cc.s1 .cc-cur { opacity: 0; transition: transform .7s cubic-bezier(.6, 0, .3, 1), opacity .3s .5s; }
#curtain-call-overlay .cc.s1 .cc-cur.l { transform: translateX(-75%); }
#curtain-call-overlay .cc.s1 .cc-cur.r { transform: translateX(75%); }
#curtain-call-overlay .cc-ribbon { position: absolute; left: 4%; right: 4%; top: -3%; aspect-ratio: 900 / 226; z-index: 5; opacity: 0; transform: translateY(-18px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.2, 1.5, .4, 1);
  background: url(../img/ui2/arrival_ribbon.webp) center / contain no-repeat; }
#curtain-call-overlay .cc-ribbon span { position: absolute; left: 0; right: 0; top: 60%; transform: translateY(-50%); text-align: center; padding-left: .18em; font: 1.08rem/1 'Jua', sans-serif; letter-spacing: .18em; color: #fff3c4; text-shadow: 0 1px 0 #0b3a66, 0 0 10px rgba(255, 211, 138, .6); }
#curtain-call-overlay .cc.s3 .cc-ribbon { opacity: 1; transform: none; }
#curtain-call-overlay .cc-in { position: absolute; left: 12%; right: 12%; top: 18%; bottom: 7%; display: flex; flex-direction: column; align-items: center; text-align: center; }
#curtain-call-overlay .cc-in > * { flex-shrink: 0; }
#curtain-call-overlay .cc-zone { position: relative; width: 100%; height: 47%; }
#curtain-call-overlay .cc-spot { position: absolute; left: 50%; bottom: -4%; width: 104%; aspect-ratio: 1; translate: -50% 0; opacity: 0; transform: scaleX(1.5); transform-origin: 50% 100%; transition: opacity .5s .1s, transform .8s cubic-bezier(.3, 0, .2, 1); mix-blend-mode: screen;
  background: url(../img/ui2/arrival_beams.webp) center bottom / contain no-repeat; }
#curtain-call-overlay .cc.s1 .cc-spot { opacity: .9; transform: scaleX(1); }
#curtain-call-overlay .cc-stage { position: absolute; left: 50%; bottom: 0; width: 64%; aspect-ratio: 560 / 283; translate: -50% 0;
  background: url(../img/ui2/arrival_stage.webp) center / 100% auto no-repeat; }
#curtain-call-overlay .cc-flash { position: absolute; left: 50%; top: 46%; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 233, 168, .9) 30%, rgba(255, 200, 120, 0) 70%); opacity: 0; }
#curtain-call-overlay .cc.s2 .cc-flash { animation: cc-flash .7s ease-out both; }
#curtain-call-overlay .cc-face { position: absolute; left: 50%; bottom: 22%; width: 50%; aspect-ratio: 1; translate: -50% 0; object-fit: contain; filter: brightness(0) drop-shadow(0 0 6px rgba(255, 211, 138, .55)); opacity: 0; transform: scale(.85); transition: opacity .35s, transform .4s; }
#curtain-call-overlay .cc.s1 .cc-face { opacity: 1; transform: scale(.95); transition-delay: .55s; }
#curtain-call-overlay .cc.s2 .cc-face { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) drop-shadow(0 0 12px rgba(255, 211, 138, .5)); transform: scale(1); transition: filter .25s, transform .45s cubic-bezier(.2, 1.6, .4, 1); animation: cc-bob 2.2s ease-in-out .6s infinite; }
#curtain-call-overlay .cc.gold.s2 .cc-face { filter: sepia(.35) saturate(1.5) brightness(1.06) drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) drop-shadow(0 0 16px rgba(255, 214, 120, .85)); }
#curtain-call-overlay .cc-spark { position: absolute; inset: -6% -4% 10%; opacity: 0; transition: opacity .6s .2s; pointer-events: none;
  background: radial-gradient(3px 3px at 18% 30%, #fff3c4 50%, transparent 52%), radial-gradient(2px 2px at 80% 22%, #fff 50%, transparent 52%), radial-gradient(3px 3px at 70% 60%, #ffd38a 50%, transparent 52%), radial-gradient(2px 2px at 30% 70%, #fff 50%, transparent 52%), radial-gradient(2.5px 2.5px at 52% 12%, #9fe3f5 50%, transparent 52%); }
#curtain-call-overlay .cc.s2 .cc-spark { opacity: .9; animation: cc-twinkle 2.6s ease-in-out 1s infinite; }
#curtain-call-overlay .cc-name, #curtain-call-overlay .cc-sub, #curtain-call-overlay .cc-skill, #curtain-call-overlay .cc-go, #curtain-call-overlay .cc-later, #curtain-call-overlay .cc-share { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
#curtain-call-overlay .cc.s3 .cc-name { opacity: 1; transform: none; }
#curtain-call-overlay .cc.s3 .cc-sub { opacity: 1; transform: none; transition-delay: .1s; }
#curtain-call-overlay .cc.s4 .cc-skill { opacity: 1; transform: none; }
#curtain-call-overlay .cc.s4 .cc-go { opacity: 1; transform: none; transition-delay: .12s; }
#curtain-call-overlay .cc.s4 .cc-later, #curtain-call-overlay .cc.s4 .cc-share { opacity: 1; transform: none; transition-delay: .2s; }
#curtain-call-overlay .cc-name { margin-top: 4px; font: 1.42rem/1.15 'Jua', sans-serif; background: linear-gradient(180deg, #fff6d6 0%, #ffd38a 55%, #e09a2b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(10, 30, 60, .6)); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#curtain-call-overlay .cc-sub { margin: 3px 0 5px; font: 700 .76rem/1.25 'Noto Sans KR', sans-serif; color: #cfe8ff; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
#curtain-call-overlay .cc-hearts { color: #ff6b5a; letter-spacing: .1em; margin-left: 2px; }
#curtain-call-overlay .cc-skill { position: relative; margin-top: auto; width: 108%; aspect-ratio: 900 / 233; display: flex; align-items: center; text-align: left; padding: 0 14% 0 25%;
  background: url(../img/ui2/arrival_skill.webp) center / 100% 100% no-repeat; }
#curtain-call-overlay .cc-skill i { position: absolute; left: 2.4%; top: 50%; translate: 0 -50%; width: 12%; aspect-ratio: 1; display: grid; place-items: center; font-style: normal; font-size: 1rem; color: #fff; }
#curtain-call-overlay .cc-skill b { display: block; font: .86rem 'Jua', sans-serif; color: #1f6fb2; }
#curtain-call-overlay .cc-skill > div { min-width: 0; flex: 1; }   /* 글 칸이 탑승권 안쪽 폭을 넘지 않게(태국어는 띄어쓰기가 적어 한 줄로 밀렸다) */
#curtain-call-overlay .cc-skill small { font: 600 .62rem/1.25 'Noto Sans KR', sans-serif; color: #33496a; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 380px) { #curtain-call-overlay .cc-skill { padding: 0 13% 0 25%; } #curtain-call-overlay .cc-skill b { font-size: .8rem; } #curtain-call-overlay .cc-skill small { font-size: .56rem; line-height: 1.18; } }
#curtain-call-overlay .cc-acts { position: absolute; left: 9%; right: 9%; top: calc(100% + 6px); display: flex; flex-direction: column; align-items: center; }
#curtain-call-overlay .cc-go { width: 100%; height: 50px; border: 0; background: url(../img/ui2/btn_cta_earth.webp) center / 100% 100% no-repeat; color: #3a2400; font: 1.05rem 'Jua', sans-serif; padding: 0 16px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#curtain-call-overlay .cc-later { margin-top: 6px; border: 1px solid rgba(255, 211, 138, .4); border-radius: 999px; background: rgba(11, 26, 51, .82); color: #cfe8ff; font: 700 .86rem 'Noto Sans KR', sans-serif; padding: 6px 16px; cursor: pointer; }
#curtain-call-overlay .cc-share { margin-top: 8px; }
@keyframes cc-flash { 0% { width: 10px; height: 10px; opacity: 1; } 60% { opacity: .9; } 100% { width: 330px; height: 330px; opacity: 0; } }
@keyframes cc-bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -6px; } }
@keyframes cc-twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
html[lang="th"] #curtain-call-overlay .cc-skill small, html[lang="ja"] #curtain-call-overlay .cc-skill small { word-break: normal; line-break: strict; }   /* 태국어 · 일본어는 낱말 사이 띄어쓰기가 없어 keep-all 이면 줄이 안 바뀐다 */
#curtain-call-overlay .cc-skill small .nw { white-space: nowrap; }   /* 「3–5 ô」 같은 수 범위는 한 덩어리로(베트남어에서 「3– / 5 ô」로 갈렸다) */

/* 게임 머리띠 2D/3D 단추: 지금 모드를 글자 알약으로 (K-Pop 의 2D/3D 그림 단추 대신 · 2026-10-23) */
.mode-pill { display: inline-grid !important; place-items: center; min-width: 34px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #ffc65e, #ffb53c); color: #3a2400; font: 900 13px/1 'Nunito', system-ui, sans-serif; box-shadow: 0 3px 0 #d99a1f; }

/* 판 세트 탭(Greatest Hits · Modern · Classic — 2026-10-27 · home.js popSetTabsHtml): 로비 「아무 판이나」 · 무대 화면 · 판 고르기 창. 고른 세트 = 햇빛 금, 나머지 = 엽서 종이 */
.pop-set-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.pop-set-tabs button { flex: 1 1 0; min-width: 0; padding: 7px 4px 6px; border-radius: 14px; border: 1.5px solid #e8dcc0; background: #fffaf0; color: #0d4f6e;
  font: 900 13px/1.15 'Nunito', system-ui, sans-serif; cursor: pointer; display: grid; gap: 2px; justify-items: center; white-space: nowrap; letter-spacing: -.2px; }
@media (max-width: 400px) { .pop-set-tabs button { font-size: 12px; padding-inline: 2px; } }
.pop-set-tabs button small { font-size: 10.5px; font-weight: 700; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pop-set-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #ffc65e, #ffb53c); border-color: transparent; color: #3a2400; box-shadow: 0 3px 0 #d99a1f; }
.learning-path .pop-set-tabs { margin: 4px 0 14px; }