@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; }