@theme {
  --color-primary: #1A1A2E;
  --color-primary-light: #2D2D4A;
  --color-primary-dark: #12121F;
  --color-accent: #1B7F5B;
  --color-accent-light: #34A47A;
  --color-accent-accessible: #145F44;
  --color-surface: #FFFFFF;
  --color-surface-dark: #16162A;
  --color-danger: #E74C3C;
  --color-success: #2ECC71;

  --font-sans: 'Pretendard', ui-sans-serif, system-ui, sans-serif;
}

/* Theme transition animations - View Transitions API handles this */
/* Removed global * transition for performance - View Transitions API provides better cross-fade */

/* Respect user's motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Unified focus ring styles for accessibility */
/* Remove default outline only when :focus-visible is supported */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Special focus styles for buttons and links */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(27, 127, 91, 0.2);
}

/* Input focus styles */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
}

/* Light mode focus ring - darker accent for better contrast */
.light *:focus-visible {
  outline-color: var(--color-accent-accessible);
}

.light button:focus-visible,
.light a:focus-visible,
.light [role="button"]:focus-visible {
  outline-color: var(--color-accent-accessible);
  box-shadow: 0 0 0 4px rgba(20, 95, 68, 0.2);
}

.light input:focus-visible,
.light textarea:focus-visible,
.light select:focus-visible {
  outline-color: var(--color-accent-accessible);
  border-color: var(--color-accent-accessible);
}

@layer utilities {
  .spotlight-bg {
    background: linear-gradient(180deg, rgba(27,127,91,0.05) 0%, transparent 40%), var(--color-primary) !important;
  }

  /* Light mode background */
  .light .spotlight-bg {
    background: #FFFFFF !important;
  }

  /* Light mode text colors */
  .light {
    color: var(--color-primary);
  }

  .light .text-white {
    color: var(--color-primary);
  }

  .light .text-white\/70 {
    color: rgba(26, 26, 46, 0.75);
  }

  .light .text-white\/50 {
    color: rgba(26, 26, 46, 0.65);
  }

  /* 흰 배경 위 가독성 확보: 0.3 → 0.55 (대비비 ~4.5:1, WCAG AA) */
  .light .text-white\/30 {
    color: rgba(26, 26, 46, 0.55);
  }

  .light .text-white\/40 {
    color: rgba(26, 26, 46, 0.60);
  }

  .light .text-white\/60 {
    color: rgba(26, 26, 46, 0.70);
  }

  .light .text-white\/80 {
    color: rgba(26, 26, 46, 0.85);
  }

  .light .text-white\/90 {
    color: rgba(26, 26, 46, 0.93);
  }

  .light .text-white\/5 {
    color: rgba(26, 26, 46, 0.3);
  }

  .light .text-white\/15 {
    color: rgba(26, 26, 46, 0.4);
  }

  .light .text-white\/25 {
    color: rgba(26, 26, 46, 0.48);
  }

  .light .text-white\/20 {
    color: rgba(26, 26, 46, 0.44);
  }

  /* Light mode bg overrides */
  .light .bg-white\/3 {
    background-color: rgba(26, 26, 46, 0.03);
  }

  .light .bg-white\/20 {
    background-color: rgba(26, 26, 46, 0.2);
  }

  /* group-hover:text-white */
  .light .group:hover .group-hover\:text-white {
    color: var(--color-primary);
  }

  /* hover variants */
  .light .hover\:text-white:hover {
    color: var(--color-primary);
  }

  .light .hover\:bg-white\/20:hover {
    background-color: rgba(26, 26, 46, 0.2);
  }

  /* Light mode borders */
  .light .border-white\/10 {
    border-color: rgba(26, 26, 46, 0.1);
  }

  .light .border-white\/15 {
    border-color: rgba(26, 26, 46, 0.15);
  }

  .light .border-white\/20 {
    border-color: rgba(26, 26, 46, 0.2);
  }

  .light .border-white\/30 {
    border-color: rgba(26, 26, 46, 0.3);
  }

  .light .hover\:border-white\/5:hover {
    border-color: rgba(26, 26, 46, 0.05);
  }

  .light .hover\:border-white\/10:hover {
    border-color: rgba(26, 26, 46, 0.1);
  }

  .light .hover\:border-white\/20:hover {
    border-color: rgba(26, 26, 46, 0.2);
  }

  .light .hover\:border-white\/30:hover {
    border-color: rgba(26, 26, 46, 0.3);
  }

  .light .border-white\/5 {
    border-color: rgba(26, 26, 46, 0.05);
  }

  /* Light mode backgrounds */
  .light .bg-white\/5 {
    background-color: rgba(26, 26, 46, 0.05);
  }

  .light .bg-white\/10 {
    background-color: rgba(26, 26, 46, 0.1);
  }

  .light .hover\:bg-white\/10:hover {
    background-color: rgba(26, 26, 46, 0.1);
  }

  .light .hover\:bg-white\/5:hover {
    background-color: rgba(26, 26, 46, 0.05);
  }

  /* Light mode glass panels */
  .light .glass-panel {
    background: #FFFFFF;
    border: 1px solid rgba(26, 26, 46, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  }

  /* Light mode accent color - darker for better contrast */
  .light .text-accent {
    color: var(--color-accent-accessible);
  }

  .light .hover\:text-accent:hover {
    color: var(--color-accent-accessible);
  }

  .light .bg-accent\/20 {
    background-color: rgba(20, 95, 68, 0.2);
  }

  .light .border-accent\/50 {
    border-color: rgba(20, 95, 68, 0.5);
  }

  .light .border-accent\/20 {
    border-color: rgba(20, 95, 68, 0.2);
  }

  /* Light mode gray text - darker for WCAG AA compliance */
  .light .text-gray-400 {
    color: #4B5563; /* gray-600, 대비비 7.4:1 */
  }

  .light .text-gray-500 {
    color: #374151; /* gray-700, 대비비 10.9:1 */
  }

  .light .text-gray-600 {
    color: #1F2937; /* gray-800, 명확한 보조 텍스트 */
  }

  .light .text-gray-200 {
    color: #4B5563; /* gray-600, 대비비 7.4:1 (거의 흰색인 gray-200 대응) */
  }

  .light .text-gray-300 {
    color: #4B5563; /* gray-600, 대비비 7.4:1 (얇은 폰트 대응) */
  }

  /* Light mode colored glass panels */
  .light .glass-panel-violet {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
  }

  .light .glass-panel-blue {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.15);
  }

  .light .glass-panel-green {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
  }

  .light .glass-panel-red {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
  }

  .light .glass-panel-amber {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.15);
  }

  /* Light mode card styles */
  .light .glass-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(26, 26, 46, 0.1);
  }

  .light .hover\:border-accent\/30:hover {
    border-color: rgba(20, 95, 68, 0.3);
  }

  /* Light mode: hover:text-white/60 */
  .light .hover\:text-white\/60:hover {
    color: rgba(26, 26, 46, 0.6);
  }

  /* Light mode: form input dark backgrounds → light gray */
  .light .bg-black\/40 {
    background-color: rgba(26, 26, 46, 0.10);
  }
  .light .bg-black\/30 {
    background-color: rgba(26, 26, 46, 0.04);
  }
  .light .bg-black\/20 {
    background-color: rgba(26, 26, 46, 0.03);
  }
  .light .hover\:bg-black\/30:hover {
    background-color: rgba(26, 26, 46, 0.07);
  }
  .light .hover\:bg-black\/50:hover {
    background-color: rgba(26, 26, 46, 0.08);
  }

  /* Light mode: placeholder */
  .light .placeholder-white\/30::placeholder {
    color: rgba(26, 26, 46, 0.3);
  }

  /* Light mode: bg-gray-700 (inactive 도트 등) → 연한 gray로 */
  .light .bg-gray-700 {
    background-color: #D1D5DB; /* gray-300, 다크 모드 subtle 대응 */
  }

  /* Light mode: 컬러 텍스트 — 400/300 라이트 계열 → WCAG AA 준수 다크 계열 */
  .light .text-emerald-400 {
    color: #047857; /* emerald-700, 대비비 5.3:1 */
  }
  .light .text-blue-400 {
    color: #1d4ed8; /* blue-700, 대비비 5.9:1 */
  }
  .light .text-green-400 {
    color: #15803d; /* green-700, 대비비 5.2:1 */
  }
  .light .text-green-500 {
    color: #166534; /* green-800, 대비비 6.1:1 */
  }
  .light .text-amber-400 {
    color: #b45309; /* amber-700, 대비비 5.5:1 */
  }
  .light .text-red-400 {
    color: #dc2626; /* red-600, 대비비 4.5:1 */
  }
  .light .text-purple-400 {
    color: #7c3aed; /* violet-600, 대비비 4.5:1 */
  }
  .light .text-violet-400 {
    color: #6d28d9; /* violet-700, 대비비 5.4:1 */
  }
  .light .text-violet-300 {
    color: #5b21b6; /* violet-800, 대비비 7.2:1 */
  }

  /* hover 변형 */
  .light .hover\:text-green-400:hover {
    color: #15803d;
  }
  .light .hover\:text-violet-400:hover {
    color: #6d28d9;
  }
  .light .hover\:text-red-400:hover {
    color: #dc2626;
  }
  .light .hover\:text-red-300:hover {
    color: #dc2626;
  }

  /* group-hover 변형 */
  .light .group:hover .group-hover\:text-green-400 {
    color: #15803d;
  }
  .light .group:hover .group-hover\:text-amber-400 {
    color: #b45309;
  }
  .light .group:hover .group-hover\:text-red-400 {
    color: #dc2626;
  }
  .light .group:hover .group-hover\:text-violet-400 {
    color: #6d28d9;
  }
  .light .group:hover .group-hover\:text-violet-300 {
    color: #5b21b6;
  }
  .light .group:hover .group-hover\:text-amber-300 {
    color: #b45309;
  }
  .light .group:hover .group-hover\:text-green-300 {
    color: #15803d;
  }
  .light .group:hover .group-hover\:text-purple-300 {
    color: #7c3aed;
  }
  .light .group:hover .group-hover\:text-red-300 {
    color: #dc2626;
  }

  /* Light mode: indigo 계열 — 흰 배경 위 대비비 불량(2~3:1) → indigo-800로 교체 */
  .light .text-indigo-300,
  .light .text-indigo-400,
  .light .text-indigo-500,
  .light .text-indigo-600,
  .light .text-indigo-700 {
    color: #3730A3; /* indigo-800, 대비비 6.1:1 */
  }

  /* Light mode: orange-400 → orange-700 */
  .light .text-orange-400 {
    color: #C2410C; /* orange-700, 대비비 5.2:1 */
  }

  /* Light mode: yellow 계열 — 흰 배경 위 거의 안 보임(1.1~1.5:1) → yellow-700로 교체 */
  .light .text-yellow-300,
  .light .text-yellow-400,
  .light .text-yellow-500 {
    color: #A16207; /* yellow-700, 대비비 5.5:1 */
  }

  /* Light mode: pink 계열 → pink-700 */
  .light .text-pink-300,
  .light .text-pink-400 {
    color: #BE185D; /* pink-700, 대비비 5.1:1 */
  }

  /* Light mode: amber-500 (score_color 동적 클래스) */
  .light .text-amber-500 {
    color: #B45309; /* amber-700, 대비비 5.5:1 */
  }

  /* Light mode: red-500 (score_color 동적 클래스) */
  .light .text-red-500 {
    color: #B91C1C; /* red-700, 대비비 5.6:1 */
  }

  /* Light mode: blue 계열 추가 (blue-300/500 흰 배경 위 저대비) */
  .light .text-blue-300 {
    color: #1d4ed8; /* blue-700, 대비비 5.9:1 */
  }
  .light .text-blue-500 {
    color: #1d4ed8; /* blue-700 */
  }

  /* Light mode: green 계열 추가 */
  .light .text-green-300 {
    color: #15803d; /* green-700 */
  }
  .light .text-green-600 {
    color: #15803d; /* green-700, 대비비 5.3:1 (green-600은 ~3:1로 부족) */
  }

  /* Light mode: red-300 (흰 배경 위 ~1.8:1로 거의 안 보임) */
  .light .text-red-300 {
    color: #dc2626; /* red-600 */
  }

  /* Light mode: violet 추가 */
  .light .text-violet-500 {
    color: #5b21b6; /* violet-800, 대비비 7.2:1 */
  }
  .light .text-violet-600 {
    color: #5b21b6; /* violet-800 (violet-600 ~4.5:1 경계선) */
  }

  /* Light mode: amber-300 (흰 배경 위 ~1.2:1로 거의 안 보임) */
  .light .text-amber-300 {
    color: #B45309; /* amber-700 */
  }

  /* group-hover 변형 */
  .light .group:hover .group-hover\:text-pink-300 {
    color: #BE185D;
  }
  .light .group:hover .group-hover\:text-indigo-400 {
    color: #3730A3;
  }
  .light .group:hover .group-hover\:text-blue-400 {
    color: #1d4ed8;
  }
}

/* ── Markdown content styling (md-content) — 라이트/다크 모드 공용 ── */
.md-content p { margin-bottom: 0.875rem; line-height: 1.75; }
.md-content p:last-child { margin-bottom: 0; }
.md-content strong { font-weight: 700; }
.md-content em { font-style: italic; opacity: 0.8; }
.md-content h1,.md-content h2,.md-content h3,
.md-content h4,.md-content h5,.md-content h6 {
  font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; line-height: 1.3;
}
.md-content h1 { font-size: 1.4rem; }
.md-content h2 { font-size: 1.2rem; border-bottom: 1px solid currentColor; padding-bottom: 0.4rem; opacity: 0.9; }
.md-content h3 { font-size: 1.05rem; color: var(--color-accent); }
.md-content ul,.md-content ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.md-content ul { list-style-type: disc; }
.md-content ol { list-style-type: decimal; }
.md-content li { margin-bottom: 0.3rem; line-height: 1.7; }
.md-content li > ul, .md-content li > ol { margin: 0.2rem 0; }
.md-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.875rem; }
.md-content thead th { padding: 0.6rem 0.875rem; text-align: left; font-weight: 600; font-size: 0.8rem; border-bottom: 2px solid var(--color-accent); color: var(--color-accent); }
.md-content tbody tr { border-bottom: 1px solid rgba(128,128,128,0.2); }
.md-content tbody td { padding: 0.5rem 0.875rem; }
.md-content blockquote { border-left: 3px solid var(--color-accent); padding: 0.6rem 1rem; margin: 0.875rem 0; opacity: 0.85; font-style: italic; }
.md-content code { background: rgba(128,128,128,0.15); padding: 0.15rem 0.4rem; border-radius: 0.3rem; font-size: 0.85em; color: var(--color-accent); }
.md-content pre { background: rgba(128,128,128,0.1); border: 1px solid rgba(128,128,128,0.2); border-radius: 0.5rem; padding: 0.875rem 1rem; overflow-x: auto; margin: 0.875rem 0; }
.md-content pre code { background: none; padding: 0; color: inherit; }
.md-content hr { border: none; border-top: 1px solid rgba(128,128,128,0.25); margin: 1.25rem 0; }
.md-content a { color: var(--color-accent); text-decoration: underline; }
.md-content a:hover { color: var(--color-accent-light); }
.md-content > *:first-child { margin-top: 0 !important; }

/* =============================================
   ModeCardComponent — 면접 모드 선택 카드
   ============================================= */
.mode-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mode-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
.mode-card:active {
  transform: translateY(0);
}
.mode-card-featured {
  background: #ffffff;
  border: 2px solid rgba(27,127,91,0.4);
  box-shadow: 0 0 24px rgba(27,127,91,0.08), 0 4px 16px rgba(0,0,0,0.06);
}

/* =============================================
   Dark mode overrides — 라이트 전용 하드코딩 토큰 보정
   기준: 다크 배경(#1A1A2E) 위 WCAG AA 4.5:1 대비
   Linear 다크 팔레트 표준 + Tailwind gray-100~400 신호
   ⚠ unlayered 의도: Tailwind utilities 레이어 + 본 파일 unlayered .mode-card
       양쪽을 모두 이기기 위해 레이어 밖에 둠 (캐스케이드: unlayered > @layer)
   ============================================= */
/* A. 텍스트 — gray-500/600/700/800/900 → 다크 배경에서 가독성 확보 */
.dark .text-gray-900 { color: #F3F4F6; } /* gray-100, 본문 헤더 (~15:1) */
.dark .text-gray-800 { color: #E5E7EB; } /* gray-200 */
.dark .text-gray-700 { color: #D1D5DB; } /* gray-300 */
.dark .text-gray-600 { color: #9CA3AF; } /* gray-400, 보조 텍스트 */
.dark .text-gray-500 { color: #9CA3AF; } /* gray-400, 캡션 (~4.7:1) */

/* hover 변형 */
.dark .hover\:text-gray-900:hover { color: #F3F4F6; }
.dark .hover\:text-gray-700:hover { color: #D1D5DB; }

/* B. 배경 — bg-white/gray-50/100/200 → surface-dark 계열 */
.dark .bg-white       { background-color: #16162A; } /* --color-surface-dark */
.dark .bg-gray-50     { background-color: #1F1F35; }
.dark .bg-gray-100    { background-color: #262642; }
.dark .bg-gray-200    { background-color: #2D2D4A; } /* --color-primary-light */

/* hover 변형 — 카드/리스트 호버 */
.dark .hover\:bg-gray-50:hover  { background-color: #1F1F35; }
.dark .hover\:bg-gray-100:hover { background-color: #262642; }

/* nav 의 bg-white\/80: 다크 배경 위에서 흰색 80% → 어두운 surface 80%로 */
.dark .bg-white\/80 { background-color: rgba(22, 22, 42, 0.8); }

/* C. 테두리 — gray-100/200/300 → 화이트 알파 (Linear 신호 ~6~15%) */
.dark .border-gray-100 { border-color: rgba(255, 255, 255, 0.06); }
.dark .border-gray-200 { border-color: rgba(255, 255, 255, 0.10); }
.dark .border-gray-300 { border-color: rgba(255, 255, 255, 0.15); }

.dark .hover\:border-gray-100:hover { border-color: rgba(255, 255, 255, 0.06); }
.dark .hover\:border-gray-200:hover { border-color: rgba(255, 255, 255, 0.10); }

/* D. 너무 옅은 악센트 — 다크 배경 위 시인성 보강 */
.dark .bg-accent\/5 { background-color: rgba(27, 127, 91, 0.10); }

/* E. mode-card — application.css 인라인 정의의 다크 변형 */
.dark .mode-card {
  background: #16162A;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.dark .mode-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.dark .mode-card-featured {
  background: #16162A;
  border: 2px solid rgba(27, 127, 91, 0.55);
  box-shadow: 0 0 24px rgba(27, 127, 91, 0.18), 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* placeholder 톤 보정 */
.dark .placeholder-gray-400::placeholder { color: rgba(255, 255, 255, 0.35); }
.dark .placeholder-gray-500::placeholder { color: rgba(255, 255, 255, 0.30); }

/* =============================================
   Dark mode round 3 — "유령 텍스트" 박멸
   1) glass-panel 컴포넌트 (tailwind/application.css 의 #ffffff 하드코딩)
   2) text-white/N 슬래시 알파 — 다크 배경 위 가독 알파로 상향
   3) bg-white/N 슬래시 알파 — 다크 배경 위 적정 톤
   4) hm-0 히트맵 셀 — 라이트 #f3f4f6 → 다크 surface
   ============================================= */

/* F. glass-panel 컴포넌트 — 다크에서 surface-dark 로 (라운드 1 .bg-white 와 동일 톤) */
.dark .glass-panel {
  background: #16162A;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
}
.dark .glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.dark .app-dropdown {
  background: #16162A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* 컬러 글래스 패널 — 다크에서 톤 다운 + 백그라운드 알파 상향 */
.dark .glass-panel-violet {
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.dark .glass-panel-blue {
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.dark .glass-panel-green {
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.dark .glass-panel-red {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.dark .glass-panel-amber {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* G. text-white/N — 다크 배경(#1A1A2E 또는 #16162A) 위 WCAG AA 4.5:1 확보
   30/40/50/60 같이 시인성이 부족한 알파를 상향 (브라이언 라빈 신호)
   90/80/70 은 이미 충분 → 그대로 유지하되 명시화 */
.dark .text-white\/90 { color: rgba(255, 255, 255, 0.93); } /* 헤더 (~14:1) */
.dark .text-white\/80 { color: rgba(255, 255, 255, 0.85); } /* 본문 */
.dark .text-white\/70 { color: rgba(255, 255, 255, 0.78); } /* 캡션 (~9:1) */
.dark .text-white\/60 { color: rgba(255, 255, 255, 0.75); } /* 보조 (~8.5:1) */
.dark .text-white\/50 { color: rgba(255, 255, 255, 0.70); } /* (~7.5:1) */
.dark .text-white\/40 { color: rgba(255, 255, 255, 0.65); } /* 라벨/메타 (~6.5:1) */
.dark .text-white\/30 { color: rgba(255, 255, 255, 0.55); } /* 캡션·작은 라벨 (~5:1) */
.dark .text-white\/25 { color: rgba(255, 255, 255, 0.45); }
.dark .text-white\/20 { color: rgba(255, 255, 255, 0.40); }
.dark .text-white\/15 { color: rgba(255, 255, 255, 0.30); }
.dark .text-white\/5  { color: rgba(255, 255, 255, 0.18); }

/* hover 변형 */
.dark .hover\:text-white\/70:hover { color: rgba(255, 255, 255, 0.78); }
.dark .hover\:text-white\/60:hover { color: rgba(255, 255, 255, 0.75); }

/* H. bg-white/N — 다크 카드 위에서 흰색 알파를 dim 처리
   원래 라이트 카드 위 미묘한 chip 효과 → 다크에서는 그대로 두면 너무 강함 */
.dark .bg-white\/3  { background-color: rgba(255, 255, 255, 0.04); }
.dark .bg-white\/5  { background-color: rgba(255, 255, 255, 0.06); }
.dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.08); }
.dark .bg-white\/20 { background-color: rgba(255, 255, 255, 0.12); }

/* hover 변형 */
.dark .hover\:bg-white\/5:hover  { background-color: rgba(255, 255, 255, 0.06); }
.dark .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.08); }
.dark .hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.12); }

/* I. dashboard 인라인 토큰 — hm-0 히트맵 빈 셀 (#f3f4f6 → 다크 surface)
   인라인 <style>은 외과적 변경 X → application.css 에서 상위 캐스케이드 */
.dark .hm-0 { background: #262642; }