/* 🌙 밤 테마 (누나 건의 #32+33) — 일기·슬롯 페이지 전용 꾸미기
 * 토큰 가게에서 테마를 구매하면 열리고, night-theme.js가 html[data-night-theme=...]를 세팅.
 * 방식: 다크모드와 같은 변수 오버라이드 (html+속성 선택자라 [data-theme=dark]보다 우선). */

/* ═══ 달빛 밤하늘 (night_*_moon) — 남색 밤하늘 + 별 ═══ */
html[data-night-theme="moon"] {
  --bm-header-grad: linear-gradient(120deg, #232c52, #3b436e);
  --bm-header-ink: #eef1ff;
  --bm-header-sub: #b8c0e8;
  --color-bg: #1c2547;
  --color-bg-secondary: #232c52;
  --color-surface: #2a3560;
  --color-text: #eef1ff;
  --color-text-secondary: #b8c0e8;
  --color-olive: #a3ad7a;
  --color-olive-light: #7a8450;
  --color-olive-dark: #cdd6a8;
  --color-purple: #c9a5d9;
  --color-purple-light: #9b6bb0;
  --color-purple-bg: #33305e;
  --color-cream: #232c52;
  --color-yellow: #8a7844;
  --color-yellow-light: #262f56;
  --color-warm: #2e3a6b;
  --color-border: #3d4778;
  --color-shadow: rgba(0, 0, 10, 0.35);
  --color-shadow-heavy: rgba(0, 0, 10, 0.5);
  --olive-bg: #2e3a52;
  --purple-bg: #33305e;
  --cream: #232c52;
  --butter: #3b436e;
  --yellow-l: #262f56;
  --warm: #2e3a6b;
  --orange-bg: #3a3560;
  --ink: #eef1ff;
  --text-sec: #b8c0e8;
  --muted: #92a0d8;
  --border-soft: #3d4778;
  --sh-card: 0 3px 0 rgba(0, 0, 10, 0.4);
  --sh-strong: 0 4px 0 rgba(0, 0, 10, 0.45);
}

/* ═══ 반딧불 초롱길 (night_*_lantern) — 호박빛 여름밤 ═══ */
html[data-night-theme="lantern"] {
  --bm-header-grad: linear-gradient(120deg, #3a3222, #5c4a28);
  --bm-header-ink: #ffeacd;
  --bm-header-sub: #d8bd94;
  --color-bg: #2e2a1d;
  --color-bg-secondary: #363021;
  --color-surface: #3d3524;
  --color-text: #ffeacd;
  --color-text-secondary: #d8bd94;
  --color-olive: #b3a86e;
  --color-olive-light: #8a7d4a;
  --color-olive-dark: #d9cd9c;
  --color-purple: #c9a5d9;
  --color-purple-light: #9b6bb0;
  --color-purple-bg: #423349;
  --color-cream: #363021;
  --color-yellow: #a8863f;
  --color-yellow-light: #3a331f;
  --color-warm: #4a3d27;
  --color-border: #55482c;
  --color-shadow: rgba(20, 10, 0, 0.35);
  --color-shadow-heavy: rgba(20, 10, 0, 0.5);
  --olive-bg: #3d3a22;
  --purple-bg: #423349;
  --cream: #363021;
  --butter: #5c4c22;
  --yellow-l: #3a331f;
  --warm: #4a3d27;
  --orange-bg: #4c351b;
  --ink: #ffeacd;
  --text-sec: #d8bd94;
  --muted: #bd9f6e;
  --border-soft: #55482c;
  --sh-card: 0 3px 0 rgba(20, 10, 0, 0.4);
  --sh-strong: 0 4px 0 rgba(20, 10, 0, 0.45);
}

/* ═══ 네온 미드나잇 (night_*_neon) — 보랏빛 자정 + 네온 ═══ */
html[data-night-theme="neon"] {
  --bm-header-grad: linear-gradient(120deg, #241740, #3c2568);
  --bm-header-ink: #f0e6ff;
  --bm-header-sub: #c9b3e8;
  --color-bg: #17102b;
  --color-bg-secondary: #1f1538;
  --color-surface: #2a1b4a;
  --color-text: #f0e6ff;
  --color-text-secondary: #c9b3e8;
  --color-olive: #b3a86e;
  --color-olive-light: #8a7d4a;
  --color-olive-dark: #d9cd9c;
  --color-purple: #e9b8ff;
  --color-purple-light: #c86bd9;
  --color-purple-bg: #38225e;
  --color-cream: #241740;
  --color-yellow: #8a7844;
  --color-yellow-light: #281a45;
  --color-warm: #322050;
  --color-border: #45336e;
  --color-shadow: rgba(10, 0, 25, 0.4);
  --color-shadow-heavy: rgba(10, 0, 25, 0.55);
  --olive-bg: #2e2752;
  --purple-bg: #38225e;
  --cream: #241740;
  --butter: #43307a;
  --yellow-l: #281a45;
  --warm: #322050;
  --orange-bg: #3e2358;
  --ink: #f0e6ff;
  --text-sec: #c9b3e8;
  --muted: #a98fd0;
  --border-soft: #45336e;
  --sh-card: 0 3px 0 rgba(10, 0, 25, 0.45);
  --sh-strong: 0 4px 0 rgba(10, 0, 25, 0.5);
}

/* ── 배경 그라데이션 (변수만으론 심심하니 몸통에 살짝) ── */
html[data-night-theme="moon"] body {
  background: linear-gradient(180deg, #1c2547 0%, #2b3562 55%, #303a68 100%) fixed;
}
html[data-night-theme="lantern"] body {
  background: linear-gradient(180deg, #2e2a1d 0%, #3a3222 55%, #443a26 100%) fixed;
}
html[data-night-theme="neon"] body {
  background: linear-gradient(180deg, #17102b 0%, #241740 55%, #2c1b4e 100%) fixed;
}

/* ── 장식 요소 (night-theme.js가 주입) ── */
.nt-decor { pointer-events: none; }

.nt-moon {
  position: fixed;
  top: 10px; right: 16px;
  font-size: 1.7rem;
  z-index: 60;
  filter: drop-shadow(0 0 12px rgba(255, 233, 173, 0.85));
}

.nt-star {
  position: fixed;
  color: #ffe9ad;
  font-size: 0.8rem;
  z-index: 0;
  animation: nt-twinkle 2.8s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255, 233, 173, 0.7);
}
@keyframes nt-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.nt-lantern-string {
  position: fixed;
  top: 4px; left: 0; right: 0;
  text-align: center;
  letter-spacing: 18px;
  font-size: 1.05rem;
  z-index: 60;
  filter: drop-shadow(0 0 8px rgba(255, 180, 80, 0.9));
  animation: nt-sway 5s ease-in-out infinite;
}
@keyframes nt-sway {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

.nt-firefly {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffdd77;
  box-shadow: 0 0 8px 2px rgba(255, 221, 119, 0.8);
  z-index: 0;
  animation: nt-fly 6s ease-in-out infinite;
}
@keyframes nt-fly {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  50% { transform: translate(12px, -16px); opacity: 1; }
}

.nt-neon-sign {
  position: fixed;
  top: 12px; right: 14px;
  z-index: 60;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ff8ad8;
  border: 1.5px solid #ff8ad8;
  border-radius: 8px;
  padding: 3px 9px;
  text-shadow: 0 0 8px #ff8ad8;
  box-shadow: 0 0 14px rgba(255, 138, 216, 0.55), inset 0 0 8px rgba(255, 138, 216, 0.2);
  background: rgba(23, 16, 43, 0.55);
  animation: nt-neon-flicker 2s ease-in-out infinite;
}
@keyframes nt-neon-flicker {
  0%, 91%, 100% { opacity: 1; }
  93% { opacity: 0.45; }
  95% { opacity: 1; }
  97% { opacity: 0.6; }
}

/* ── 테마 선택 칩 ── */
.nt-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.nt-picker-label { font-weight: 700; }
.nt-chip {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nt-chip.active {
  background: var(--color-olive);
  border-color: var(--color-olive);
  color: #fff;
}

/* ── 구매자 크레딧 ── */
.nt-credit {
  text-align: center;
  font-size: 0.76rem;
  color: var(--color-text-secondary);
  margin: 22px 0 8px;
  cursor: pointer;
}

.nt-thanks-pop {
  position: fixed;
  z-index: 200;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 6px 18px var(--color-shadow-heavy);
  font-size: 0.82rem;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}