/* =====================================================================
   UniFine AI Alliance — Ultra-Futuristic Light Mode (LUMEN 2.0)
   
   철학 및 원칙:
   1. 다크 모드의 우주적 레이아웃·스톤 배치·카드 규격(150x190px)·플로팅 모션을 100% 보존
   2. 수동적인 색상 변경을 탈피한 Apple visionOS 스타일의 크리스털 퓨처리즘 글래스모피즘
   3. 7대 인피니티 스톤의 영롱한 네온 젬(Gem) 프리즘 광채와 입체적 굴절감
   4. 우주적 여명(Cyber-Dawn Horizon)과 펄 오로라 메쉬 배경의 하이테크 미래미
   ===================================================================== */

@charset "UTF-8";

/* ---------- 라이트 모드 전역 변수 및 기본 설정 ---------- */
html[data-theme="light"] {
  --l-bg: #f8faff;
  --l-surface: #ffffff;
  --l-ink-primary: #0b1021;
  --l-ink-secondary: #334155;
  --l-ink-muted: #64748b;
  --l-border-glass: rgba(255, 255, 255, 0.95);
  --l-border-subtle: rgba(15, 23, 42, 0.06);

  /* 테크 네온 팔레트 */
  --neon-indigo: #4f46e5;
  --neon-violet: #8b5cf6;
  --neon-cyan: #06b6d4;
  --neon-rose: #f43f5e;
  --neon-emerald: #10b981;

  color-scheme: light;
}

html[data-theme="light"] body {
  background-color: var(--l-bg) !important;
  color: var(--l-ink-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="light"] ::selection {
  background: rgba(79, 70, 229, 0.18);
  color: #0b1021;
}

/* =====================================================================
   1. 배경: 하이퍼스페이스 오로라 프리즘 (Cyber-Cosmic Aurora)
   ===================================================================== */
html[data-theme="light"] .star-field {
  position: fixed !important;
  top: -10% !important;
  left: -10% !important;
  right: -10% !important;
  bottom: -10% !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 14% 16%, rgba(139, 92, 246, 0.22) 0%, transparent 62%),
    radial-gradient(38vw 38vw at 86% 12%, rgba(6, 182, 212, 0.18) 0%, transparent 60%),
    radial-gradient(45vw 45vw at 78% 84%, rgba(244, 114, 182, 0.14) 0%, transparent 62%),
    radial-gradient(40vw 40vw at 16% 88%, rgba(16, 185, 129, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.98) 0%, #f6f9fe 55%, #ebf1fc 100%) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: lumenAuroraDrift 24s ease-in-out infinite alternate !important;
}

/* 미세 사이버네틱 나노 그리드 오버레이 */
/* 격자무늬 완전 제거 */
html[data-theme="light"] .star-field::after,
html[data-theme="light"] .star-field::before {
  display: none !important;
}

/* 가운데 가로선(지평선 라인) 완전 제거: 화면 분할 없는 매끄러운 펄 캔버스 */
html[data-theme="light"] .horizon,
html[data-theme="light"] .horizon::before,
html[data-theme="light"] .horizon::after {
  display: none !important;
}

/* =====================================================================
   3. 파티클 시스템: 순수 보석빛 스파클 (Luminous Gem Stardust)
   ===================================================================== */
html[data-theme="light"] #particle-canvas {
  opacity: 0.88 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* =====================================================================
   4. 메인 컨테이너 및 타이틀 섹션 (Liquid Chrome & Prism Holo)
   ===================================================================== */
html[data-theme="light"] .main-container {
  position: relative;
  z-index: 2;
}

/* 타이틀 섹션: 다크 모드와 동일한 레이아웃 구조 유지 (임의 뱃지 제거) */
html[data-theme="light"] .title-section::before {
  display: none !important;
}

/* 화이트모드 메인 타이틀: 다크모드와 100% 동일한 첫 시작 애니메이션(fadeInUp 1s ease 0.3s forwards) + 딥 크롬 광택 회전 */
html[data-theme="light"] .title-section .main-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: clamp(2.5rem, 7vw, 5.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: 8px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  background: linear-gradient(
    135deg,
    #090d1a 0%,
    #1e2540 20%,
    #536387 40%,
    #090d1a 60%,
    #323e5c 80%,
    #151c2e 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  opacity: 0;
  animation: gradientShift 6s ease-in-out infinite, lightFadeInUp 1s ease 0.3s forwards !important;
  filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.14)) drop-shadow(0 2px 4px rgba(99, 102, 241, 0.12)) !important;
  transition: filter 0.4s ease;
}

/* 가운틀렛 디바이더: 미래형 레이저 빔 & 크리스털 다이아몬드 */
html[data-theme="light"] .gauntlet-divider .line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.55) 45%,
    rgba(6, 182, 212, 0.6) 55%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.25) !important;
}

html[data-theme="light"] .gauntlet-divider .diamond {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important;
  border: 0 !important;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.16),
    0 0 18px rgba(79, 70, 229, 0.5),
    0 0 30px rgba(6, 182, 212, 0.3) !important;
  animation: diamondPrismPulse 3s ease-in-out infinite alternate !important;
}

/* =====================================================================
   5. 스톤 카드: 7대 크리스털 아티팩트 (Crystal Holographic Cards)
   다크 모드의 150x190px 크기와 float 모션을 유지하되 초현대적 글래스로 변신
   ===================================================================== */

/* 각 스톤별 하이퍼 비비드 네온 젬 컬러 토큰 */
html[data-theme="light"] .stone-card[data-stone="power"]   { --sc: #7c3aed; --sc-light: #a855f7; }
html[data-theme="light"] .stone-card[data-stone="time"]    { --sc: #059669; --sc-light: #10b981; }
html[data-theme="light"] .stone-card[data-stone="reality"] { --sc: #e11d48; --sc-light: #f43f5e; }
html[data-theme="light"] .stone-card[data-stone="space"]   { --sc: #2563eb; --sc-light: #38bdf8; }
html[data-theme="light"] .stone-card[data-stone="mind"]    { --sc: #d97706; --sc-light: #fbbf24; }
html[data-theme="light"] .stone-card[data-stone="soul"]    { --sc: #ea580c; --sc-light: #f97316; }
html[data-theme="light"] .stone-card[data-stone="news"]    { --sc: #db2777; --sc-light: #f472b6; }

html[data-theme="light"] .stone-card {
  position: relative !important;
  width: 150px !important;
  height: 190px !important;
  border-radius: 18px !important;
  color: var(--l-ink-primary) !important;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(246, 249, 255, 0.65) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 12px 28px -6px rgba(15, 23, 42, 0.12),
    0 20px 42px -12px rgba(99, 102, 241, 0.09) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
          backdrop-filter: blur(24px) saturate(190%) !important;
  overflow: hidden !important;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease,
    background 0.45s ease !important;
}

/* 카드 상단: 레이저 젬 림 (Laser Gem Cap) */
html[data-theme="light"] .stone-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 32% !important;
  right: 32% !important;
  bottom: auto !important;
  width: auto !important;
  height: 3.5px !important;
  border-radius: 0 0 6px 6px !important;
  background: linear-gradient(90deg, var(--sc), var(--sc-light)) !important;
  box-shadow: 0 2px 10px var(--sc) !important;
  opacity: 0.85 !important;
  filter: none !important;
  transform: none !important;
  transition:
    left 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    right 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    opacity 0.45s ease !important;
  z-index: 3 !important;
}

/* 카드 내부: 앰비언트 오로라 젬 글로우 */
html[data-theme="light"] .stone-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: radial-gradient(
    115% 75% at 50% -5%,
    color-mix(in srgb, var(--sc) 22%, transparent) 0%,
    transparent 65%
  ) !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 0 !important;
  pointer-events: none;
}

/* 카드 호버 인터랙션 */
html[data-theme="light"] .stone-card:hover {
  transform: translateY(-12px) scale(1.045) !important;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 251, 255, 0.8) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--sc) 50%, white) !important;
  box-shadow:
    inset 0 1.5px 0 0 #ffffff,
    0 0 0 1px color-mix(in srgb, var(--sc) 32%, transparent),
    0 24px 48px -12px color-mix(in srgb, var(--sc) 48%, transparent),
    0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .stone-card:hover::before {
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  opacity: 1 !important;
  box-shadow:
    0 3px 16px var(--sc),
    0 0 10px var(--sc-light) !important;
}

html[data-theme="light"] .stone-card:hover::after {
  opacity: 1 !important;
}

/* 스톤 아이콘: 크리스털 젬 캡슐 (Crystal Gem Pod) */
html[data-theme="light"] .stone-card .stone-icon {
  box-sizing: border-box !important;
  width: 54px !important;
  height: 54px !important;
  margin-bottom: 6px !important;
  padding: 12px !important;
  border-radius: 17px !important;
  color: var(--sc) !important;
  background: color-mix(in srgb, var(--sc) 9%, white) !important;
  border: 1px solid color-mix(in srgb, var(--sc) 22%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 16px -4px color-mix(in srgb, var(--sc) 35%, transparent) !important;
  filter: none !important;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease !important;
  z-index: 2 !important;
}

/* 카드 호버 시 아이콘 점화 */
html[data-theme="light"] .stone-card:hover .stone-icon {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--sc), var(--sc-light)) !important;
  border-color: transparent !important;
  transform: scale(1.1) rotate(-4deg) !important;
  box-shadow:
    0 10px 24px -4px color-mix(in srgb, var(--sc) 65%, transparent),
    0 0 18px color-mix(in srgb, var(--sc-light) 65%, transparent) !important;
  animation: none !important;
}

/* 스톤 이름 */
html[data-theme="light"] .stone-card .stone-name {
  color: #0f172a !important;
  font-family: 'Orbitron', 'Pretendard', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.06em !important;
  text-shadow: none !important;
  opacity: 0.95 !important;
  transition: color 0.35s ease, text-shadow 0.35s ease !important;
  z-index: 2 !important;
}

html[data-theme="light"] .stone-card:hover .stone-name {
  color: var(--sc) !important;
  opacity: 1 !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--sc) 40%, transparent) !important;
}

/* 스톤 설명 */
html[data-theme="light"] .stone-card .stone-desc {
  color: #475569 !important;
  font-family: 'Pretendard', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
  opacity: 0.88 !important;
  transition: color 0.35s ease, opacity 0.35s ease !important;
  z-index: 2 !important;
}

html[data-theme="light"] .stone-card:hover .stone-desc {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* =====================================================================
   6. 실시간 통계 배너: 하이테크 HUD 패널 (Cybernetic Metrics HUD)
   ===================================================================== */
html[data-theme="light"] .stats-banner {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(246, 250, 255, 0.65) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    inset 0 1.5px 0 #ffffff,
    0 0 0 1px rgba(99, 102, 241, 0.08),
    0 16px 36px -10px rgba(15, 23, 42, 0.12),
    0 28px 56px -18px rgba(99, 102, 241, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
          backdrop-filter: blur(24px) saturate(180%) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="light"] .stats-banner:hover {
  border-color: rgba(99, 102, 241, 0.32) !important;
  box-shadow:
    inset 0 1.5px 0 #ffffff,
    0 0 0 1px rgba(99, 102, 241, 0.18),
    0 20px 44px -10px rgba(99, 102, 241, 0.22) !important;
  transform: translateY(-2px);
}

html[data-theme="light"] .stat-divider {
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.12), transparent) !important;
}

html[data-theme="light"] .stat-label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* TODAY 카운터 */
html[data-theme="light"] .today-group .stat-tag {
  color: #4338ca !important;
  background: rgba(79, 70, 229, 0.08) !important;
  border: 1px solid rgba(79, 70, 229, 0.2) !important;
  box-shadow: 0 2px 8px -2px rgba(79, 70, 229, 0.2) !important;
}

html[data-theme="light"] .today-group .stat-count {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #0891b2 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #4338ca !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 8px rgba(79, 70, 229, 0.25)) !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .today-group .stat-unit {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* TOTAL 카운터 */
html[data-theme="light"] .total-group .stat-tag {
  color: #334155 !important;
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html[data-theme="light"] .total-group .stat-count {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .total-group .stat-unit {
  color: #64748b !important;
  font-weight: 600 !important;
}

/* =====================================================================
   7. 테마 토글 버튼: 골든 썬 샤인 & 펄 글래스
   ===================================================================== */
html[data-theme="light"] .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 16px -2px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.6) !important;
  -webkit-backdrop-filter: blur(14px) !important;
          backdrop-filter: blur(14px) !important;
}

html[data-theme="light"] .theme-toggle-btn:hover {
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 8px 24px -4px rgba(245, 158, 11, 0.35) !important;
}

html[data-theme="light"] .theme-toggle-btn .toggle-thumb {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%) !important;
  box-shadow:
    0 0 14px rgba(245, 158, 11, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .toggle-icon {
  color: #64748b !important;
}

/* =====================================================================
   8. 푸터 & 커스텀 커서
   ===================================================================== */
html[data-theme="light"] .footer,
html[data-theme="light"] .footer p {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .cursor-dot {
  background: #4f46e5 !important;
  box-shadow:
    0 0 10px rgba(79, 70, 229, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="light"] .cursor-ring {
  border-color: rgba(79, 70, 229, 0.4) !important;
}

html[data-theme="light"] .cursor-ring.hover {
  background: rgba(79, 70, 229, 0.08) !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 16px rgba(79, 70, 229, 0.25) !important;
}

/* =====================================================================
   9. 미래지향적 애니메이션 키프레임
   ===================================================================== */
@keyframes chromeShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes lumenAuroraDrift {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.05) translate(-1.5%, 1%);
  }
  100% {
    transform: scale(1.02) translate(1.5%, -1%);
  }
}

@keyframes diamondPrismPulse {
  0% {
    box-shadow:
      0 0 0 4px rgba(99, 102, 241, 0.16),
      0 0 16px rgba(79, 70, 229, 0.45);
    transform: rotate(45deg) scale(1);
  }
  100% {
    box-shadow:
      0 0 0 6px rgba(6, 182, 212, 0.22),
      0 0 24px rgba(6, 182, 212, 0.6);
    transform: rotate(45deg) scale(1.08);
  }
}

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