@import "tailwindcss";

/* ============================================
   SILMU Design System v3.0
   Stitch v2 — Indigo/Violet Premium Theme
   ============================================ */

/* ===========================================
   1. THEME CONFIGURATION
   =========================================== */
@theme {
  /* Stitch v2 Custom Tokens */
  --color-background-light: #F8FAFC;
  --color-background-dark: #0B1120;
  --color-surface-light: #ffffff;
  --color-surface-dark: #1e293b;

  /* Surface Colors */
  --color-surface-50: #fafbfc;
  --color-surface-100: #f4f6f8;
  --color-surface-200: #ebeef2;

  /* Shadows — layered depth system */
  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 30px -5px rgba(0, 0, 0, 0.05);
  --shadow-strong: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 20px 50px -10px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 20px 60px -15px rgba(0, 0, 0, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.1);

  /* Stitch v2 Glass Shadows */
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --shadow-glass-hover: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
  --shadow-glow-slate: 0 0 40px rgba(15, 23, 42, 0.15);
  --shadow-glow-emerald: 0 0 40px rgba(16, 185, 129, 0.15);
  --shadow-glow-indigo: 0 0 40px rgba(99, 102, 241, 0.2);
  --shadow-glow-amber: 0 0 40px rgba(245, 158, 11, 0.15);

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;

  /* Timing */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 400ms;
}

/* ===========================================
   2. TYPOGRAPHY SYSTEM
   =========================================== */
@layer base {
  /* Pretendard 폰트: link 태그로 로딩 (layout에서 처리) */

  html {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
                 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
                 'Segoe UI Symbol', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1;
    color-scheme: light;
  }

  body {
    @apply bg-surface-50 text-slate-900;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
    line-height: 1.3;
    word-break: keep-all;
  }

  h1 { @apply text-4xl md:text-5xl lg:text-6xl; letter-spacing: -0.025em; }
  h2 { @apply text-3xl md:text-4xl; letter-spacing: -0.02em; }
  h3 { @apply text-2xl md:text-3xl; }
  h4 { @apply text-xl md:text-2xl; }
  h5 { @apply text-lg md:text-xl; }
  h6 { @apply text-base md:text-lg; }

  /* Paragraphs */
  p {
    @apply text-slate-700;
    line-height: 1.8;
  }

  /* Links */
  a {
    @apply transition-colors duration-200;
  }

  /* Selection */
  ::selection {
    @apply bg-indigo-200 text-indigo-900;
  }

  /* Focus */
  :focus-visible {
    @apply outline-none ring-2 ring-indigo-500 ring-offset-2;
  }
}

/* ===========================================
   3. COMPONENT STYLES
   =========================================== */
@layer components {
  /* === Buttons === */
  .btn {
    @apply inline-flex items-center justify-center gap-2
           font-semibold rounded-xl
           transition-all duration-200 ease-out
           focus:outline-none focus:ring-2 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-sm { @apply px-4 py-2 text-sm; }
  .btn-md { @apply px-6 py-3 text-base; }
  .btn-lg { @apply px-8 py-4 text-lg; }

  .btn-primary {
    @apply bg-indigo-600 text-white
           hover:bg-indigo-700 hover:shadow-lg hover:-translate-y-0.5
           active:translate-y-0 active:shadow-md
           focus:ring-indigo-500;
  }

  .btn-accent {
    @apply bg-emerald-600 text-white
           hover:bg-emerald-700 hover:shadow-lg hover:-translate-y-0.5
           active:translate-y-0 active:shadow-md
           focus:ring-emerald-500;
  }

  .btn-point {
    @apply bg-indigo-600 text-white
           hover:bg-indigo-700 hover:shadow-lg hover:-translate-y-0.5
           active:translate-y-0 active:shadow-md
           focus:ring-indigo-500;
  }

  .btn-ghost {
    @apply bg-transparent text-slate-700 border-2 border-slate-200
           hover:bg-slate-50 hover:border-slate-300
           focus:ring-slate-500;
  }

  .btn-glass {
    @apply bg-white/10 backdrop-blur-md text-white border border-white/20
           hover:bg-white/20 hover:border-white/30
           focus:ring-white/50;
  }

  /* === Cards === */
  .card {
    @apply bg-white rounded-2xl border border-gray-100/80
           shadow-soft hover:shadow-medium
           transition-all duration-300 ease-out;
  }

  .card-hover {
    @apply hover:-translate-y-1 hover:border-gray-200;
  }

  .card-interactive {
    @apply cursor-pointer hover:-translate-y-2 hover:shadow-strong
           active:translate-y-0 active:shadow-soft;
  }

  .card-glass {
    @apply bg-white/70 backdrop-blur-xl border border-white/50
           shadow-soft;
  }

  .card-glow-emerald {
    @apply transition-all duration-300;
  }
  .card-glow-emerald:hover {
    box-shadow: 0 10px 40px -10px rgba(16, 185, 129, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.1);
  }

  .card-glow-indigo {
    @apply transition-all duration-300;
  }
  .card-glow-indigo:hover {
    box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.1);
  }

  .card-glow-blue {
    @apply transition-all duration-300;
  }
  .card-glow-blue:hover {
    box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.1);
  }

  .card-glow-amber {
    @apply transition-all duration-300;
  }
  .card-glow-amber:hover {
    box-shadow: 0 10px 40px -10px rgba(245, 158, 11, 0.25), 0 0 0 1px rgba(245, 158, 11, 0.1);
  }

  .card-glow-slate {
    @apply transition-all duration-300;
  }
  .card-glow-slate:hover {
    box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.1);
  }

  /* === Inputs === */
  .input {
    @apply w-full px-4 py-3
           bg-white border-2 border-gray-200 rounded-xl
           text-slate-900 placeholder-gray-400
           transition-all duration-200
           hover:border-gray-300
           focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100
           focus:outline-none;
  }

  .input-lg {
    @apply px-6 py-4 text-lg rounded-2xl;
  }

  /* === Badge === */
  .badge {
    @apply inline-flex items-center px-3 py-1
           text-xs font-semibold rounded-full
           transition-colors duration-200;
  }

  .badge-slate { @apply bg-slate-100 text-slate-700; }
  .badge-emerald { @apply bg-emerald-100 text-emerald-700; }
  .badge-indigo { @apply bg-indigo-100 text-indigo-700; }
  .badge-amber { @apply bg-amber-100 text-amber-700; }

  /* === Navigation === */
  .nav-link {
    @apply relative text-slate-600 font-medium
           hover:text-slate-900
           transition-colors duration-200;
  }

  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5
           bg-indigo-500 rounded-full
           transition-all duration-300;
  }

  .nav-link:hover::after {
    @apply w-full;
  }

  .nav-link-active {
    @apply text-slate-900;
  }

  .nav-link-active::after {
    @apply w-full;
  }

  /* === Section === */
  .section {
    @apply py-10 md:py-14;
  }

  .section-lg {
    @apply py-28 md:py-36;
  }

  .container-tight {
    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .container-wide {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* === Dividers === */
  .divider {
    @apply border-t border-gray-200;
  }

  .divider-gradient {
    @apply h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent;
  }

  /* === Glass Effect === */
  .glass {
    @apply bg-white/70 backdrop-blur-xl border border-white/50;
  }

  .glass-dark {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .glass-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .glass-panel-light {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}

/* ===========================================
   4. UTILITIES
   =========================================== */
@layer utilities {
  /* Stitch v2 Gradients */
  .gradient-slate {
    @apply bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900;
  }

  .gradient-premium {
    @apply bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950;
  }

  .gradient-emerald {
    @apply bg-gradient-to-br from-emerald-500 via-emerald-600 to-emerald-700;
  }

  .gradient-indigo {
    @apply bg-gradient-to-br from-indigo-500 via-indigo-600 to-indigo-700;
  }

  .gradient-amber {
    @apply bg-gradient-to-br from-amber-400 via-amber-500 to-amber-600;
  }

  .gradient-mesh {
    background:
      radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
      radial-gradient(at 80% 0%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
      radial-gradient(at 0% 50%, rgba(15, 23, 42, 0.1) 0px, transparent 50%);
  }

  /* Stitch v2 Hero Gradient */
  .hero-gradient {
    background: radial-gradient(circle at 50% 0%, #312e81 0%, #0f172a 60%, #020617 100%);
  }

  /* Text Gradients */
  .text-gradient-slate {
    @apply bg-gradient-to-r from-slate-600 to-slate-800 bg-clip-text text-transparent;
  }

  .text-gradient-indigo {
    @apply bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent;
  }

  .text-gradient-emerald {
    @apply bg-gradient-to-r from-emerald-400 to-emerald-600 bg-clip-text text-transparent;
  }

  .text-gradient {
    background: linear-gradient(135deg, #e0e7ff 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-hero {
    background: linear-gradient(135deg, #6ee7b7, #818cf8, #c7d2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-accent {
    background: linear-gradient(135deg, #10b981, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Stitch v2 Search Glass */
  .search-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }
  .search-glass:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  }

  /* Animations */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-soft {
    animation: pulse-soft 3s ease-in-out infinite;
  }

  .animate-slide-up {
    animation: slide-up 0.5s ease-out;
  }

  .animate-fade-in {
    animation: fade-in 0.5s ease-out;
  }

  /* Hover Effects */
  .hover-lift {
    @apply transition-all duration-300 ease-out
           hover:-translate-y-1 hover:shadow-medium;
  }

  .hover-lift-lg {
    @apply transition-all duration-300 ease-out
           hover:-translate-y-2 hover:shadow-elevated;
  }

  .hover-glow-slate {
    @apply transition-shadow duration-300
           hover:shadow-[0_0_30px_rgba(15,23,42,0.2)];
  }

  .hover-glow-indigo {
    @apply transition-shadow duration-300
           hover:shadow-[0_0_30px_rgba(99,102,241,0.25)];
  }

  .hover-glow-emerald {
    @apply transition-shadow duration-300
           hover:shadow-[0_0_30px_rgba(16,185,129,0.2)];
  }

  /* Scroll Reveal */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  /* Spacing Helpers */
  .space-section {
    @apply space-y-16 md:space-y-24;
  }

  /* Prose Enhancement */
  .prose-premium {
    @apply max-w-none text-slate-700 leading-relaxed;
  }

  .prose-premium h1,
  .prose-premium h2,
  .prose-premium h3,
  .prose-premium h4 {
    @apply font-bold tracking-tight text-slate-900 mb-4 mt-8;
  }

  .prose-premium p {
    @apply mb-4 leading-relaxed;
  }

  .prose-premium a {
    @apply text-indigo-600 hover:underline;
  }

  .prose-premium strong {
    @apply text-slate-900 font-semibold;
  }

  .prose-premium code {
    @apply text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-md text-sm;
  }

  .prose-premium ul,
  .prose-premium ol {
    @apply mb-4 pl-6;
  }

  .prose-premium li {
    @apply mb-2;
  }

  .prose-premium blockquote {
    @apply border-l-4 border-indigo-400 pl-4 py-2 my-4
           bg-indigo-50 rounded-r-xl text-slate-700 italic;
  }

  .prose-premium table {
    @apply w-full text-sm mb-6;
    border-collapse: collapse;
  }

  .prose-premium table th {
    @apply px-4 py-3 bg-slate-100 text-slate-800 font-semibold
           text-left border-b-2 border-slate-200;
  }

  .prose-premium table td {
    @apply px-4 py-3 border-b border-gray-100 text-slate-700;
  }

  .prose-premium table tr:last-child td {
    @apply border-b-0;
  }

  .prose-premium table tr:nth-child(even) td {
    @apply bg-slate-50/60;
  }

  /* 가이드/감사사례 콘텐츠 컴포넌트 */
  .guide-meta-box {
    @apply rounded-2xl overflow-hidden border border-emerald-200 shadow-sm mb-10;
  }

  .guide-tip-box {
    @apply rounded-xl border border-blue-200 bg-blue-50 p-4 my-5;
  }

  .guide-tip-box::before {
    content: '💡 꿀팁';
    @apply block text-xs font-bold text-blue-700 mb-2 uppercase tracking-wide;
  }

  .guide-alert-box {
    @apply rounded-xl border-l-4 border-amber-500 bg-amber-50 p-4 my-5;
  }

  .guide-alert-box::before {
    content: '⚠️ 주의사항';
    @apply block text-xs font-bold text-amber-700 mb-2 uppercase tracking-wide;
  }

  /* audit-content 내 마크다운 렌더링 */
  .audit-content { @apply text-slate-700 leading-relaxed; }
  .audit-content h1 { @apply text-2xl font-bold text-slate-900 mt-8 mb-3 pb-2 border-b border-gray-200; }
  .audit-content h2 { @apply text-2xl font-bold text-slate-900 mt-8 mb-3 pb-2 border-b border-gray-200; }
  .audit-content h3 { @apply text-lg font-bold text-slate-800 mt-6 mb-2; }
  .audit-content h4 { @apply text-base font-semibold text-slate-800 mt-4 mb-2; }
  .audit-content p { @apply mb-4 text-base leading-relaxed; }
  .audit-content ul { @apply pl-6 mb-4 space-y-2 list-disc; }
  .audit-content ol { @apply pl-6 mb-4 space-y-2 list-decimal; }
  .audit-content li { @apply text-slate-700 leading-relaxed; }
  .audit-content strong { @apply font-semibold text-slate-900; }
  .audit-content table { @apply w-full text-sm mb-6; border-collapse: collapse; }
  .audit-content table th { @apply px-4 py-3 bg-slate-100 text-slate-800 font-semibold text-left border-b-2 border-slate-200; }
  .audit-content table td { @apply px-4 py-3 border-b border-gray-100 text-slate-700; }
  .audit-content table tr:last-child td { @apply border-b-0; }
  .audit-content table tr:nth-child(even) td { @apply bg-slate-50/60; }
  .audit-content blockquote { @apply border-l-4 border-red-300 pl-4 py-2 my-4 bg-red-50 rounded-r-xl text-slate-700; }

  /* Icon Containers */
  .icon-container {
    @apply flex items-center justify-center rounded-xl
           transition-all duration-300;
  }

  .icon-container-sm { @apply w-10 h-10; }
  .icon-container-md { @apply w-12 h-12; }
  .icon-container-lg { @apply w-16 h-16; }

  /* Word Break - Korean Text */
  .word-keep {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .line-clamp-1 {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .line-clamp-2 {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ===========================================
   5. KEYFRAMES
   =========================================== */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes subtle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(4px) rotate(-1deg); }
}

/* Animated gradient border */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #10b981, #6366f1, #10b981);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
.gradient-border:hover::before {
  opacity: 1;
}

/* Card shine effect */
.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.card-shine:hover::after {
  animation: shine 0.6s ease-out;
}

/* ===========================================
   6. SCROLLBAR
   =========================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* ===========================================
   7. LEGAL CONTENT STYLES
   법령 콘텐츠 가시성 향상
   =========================================== */

/* 법령 콘텐츠 컨테이너 */
.legal-content {
  @apply text-slate-700 leading-relaxed;
  font-size: 0.9375rem;
}

/* 제목 스타일 */
.legal-content .legal-h3,
.legal-content h3 {
  @apply text-lg font-bold text-slate-900 mt-6 mb-4 pb-2 border-b border-gray-200;
}

.legal-content .legal-h4,
.legal-content h4 {
  @apply text-base font-semibold text-slate-800 mt-5 mb-3;
}

/* 법령명 스타일 - 17pt 진하게 색상 적용 */
.legal-content .legal-law-name {
  @apply font-bold text-indigo-600 mt-2 mb-1;
  font-size: 1.0625rem; /* 17px */
}

/* 시행령 카드 법령명 색상 */
.border-emerald-200 .legal-content .legal-law-name {
  @apply text-emerald-600;
}

/* 시행규칙 카드 법령명 색상 */
.border-amber-200 .legal-content .legal-law-name {
  @apply text-amber-600;
}

/* 조(條) 스타일 */
.legal-content .legal-article {
  @apply mt-5 mb-3 pb-2 border-b-2 border-indigo-200;
}

.legal-content .legal-article-num {
  @apply font-bold text-indigo-600;
  font-size: 0.9375rem;
}

.legal-content .legal-article-title {
  @apply font-bold text-indigo-500;
  font-size: 0.9375rem;
}

/* 시행령 카드 조문 제목 색상 (emerald) */
.border-emerald-200 .legal-content .legal-article {
  @apply border-b-2 border-emerald-200;
}
.border-emerald-200 .legal-content .legal-article-num {
  @apply text-emerald-600;
}
.border-emerald-200 .legal-content .legal-article-title {
  @apply text-emerald-500;
}

/* 시행규칙 카드 조문 제목 색상 (amber) */
.border-amber-200 .legal-content .legal-article {
  @apply border-b-2 border-amber-200;
}
.border-amber-200 .legal-content .legal-article-num {
  @apply text-amber-600;
}
.border-amber-200 .legal-content .legal-article-title {
  @apply text-amber-500;
}

/* 항(①②③) 스타일 */
.legal-content .legal-paragraph {
  @apply my-4 pl-0;
}

.legal-content .legal-para-num {
  @apply inline-flex items-center justify-center w-6 h-6
         bg-slate-100 text-slate-700 rounded-full
         text-sm font-bold mr-2 flex-shrink-0;
  vertical-align: top;
}

.legal-content .legal-para-text {
  @apply text-slate-700 leading-relaxed;
  display: inline;
}

/* 호(1. 2. 3.) 스타일 */
.legal-content .legal-item {
  @apply my-2 pl-8 relative;
}

.legal-content .legal-item-num {
  @apply absolute left-0 text-emerald-600 font-semibold;
  width: 1.5rem;
}

.legal-content .legal-item-text {
  @apply text-slate-700;
}

/* 목록 스타일 */
.legal-content .legal-list {
  @apply my-3 pl-4 space-y-2;
  list-style: none;
}

.legal-content .legal-list-item {
  @apply relative pl-5 text-slate-700;
}

.legal-content .legal-list-item::before {
  content: '•';
  @apply absolute left-0 text-emerald-500 font-bold;
}

/* 일반 텍스트 */
.legal-content .legal-text {
  @apply my-3 text-slate-700 leading-relaxed;
}

.legal-content p {
  @apply my-3;
}

/* 강조 */
.legal-content strong {
  @apply text-slate-900 font-semibold;
}

.legal-content u {
  @apply text-indigo-700 decoration-indigo-300 decoration-2 underline-offset-2;
}

/* 테이블 스타일 */
.legal-content .legal-table-wrapper {
  @apply my-5 overflow-x-auto rounded-xl border border-gray-200;
}

.legal-content .legal-table {
  @apply w-full text-sm;
  border-collapse: collapse;
}

.legal-content .legal-table th {
  @apply px-4 py-3 bg-slate-50 text-slate-800 font-semibold text-left border-b-2 border-slate-200;
}

.legal-content .legal-table td {
  @apply px-4 py-3 border-b border-gray-100 text-slate-700;
}

.legal-content .legal-table tr:last-child td {
  @apply border-b-0;
}

.legal-content .legal-table tr:hover td {
  @apply bg-surface-50;
}

.legal-content .legal-table strong {
  @apply text-indigo-700 font-bold;
}

/* 반응형 조정 */
@media (max-width: 640px) {
  .legal-content {
    font-size: 0.875rem;
  }

  .legal-content .legal-table {
    font-size: 0.8125rem;
  }

  .legal-content .legal-table th,
  .legal-content .legal-table td {
    @apply px-3 py-2;
  }
}

/* ===========================================
   8. PRINT STYLES
   =========================================== */
@media print {
  .no-print {
    display: none !important;
  }

  .legal-content {
    font-size: 10pt;
  }

  .legal-content .legal-table {
    font-size: 9pt;
  }
}

/* ===========================================
   SAFELIST — 동적 클래스 purge 방지
   ERB 템플릿에서 보간으로 생성되는 클래스를 번들에 강제 포함
   =========================================== */

/* tools/index: emerald, blue, indigo, amber */
@source inline("card-glow-emerald card-glow-blue card-glow-indigo card-glow-amber hover:border-emerald-200 hover:border-blue-200 hover:border-indigo-200 hover:border-amber-200 bg-emerald-100 bg-blue-100 bg-indigo-100 bg-amber-100 group-hover:bg-emerald-600 group-hover:bg-blue-600 group-hover:bg-indigo-600 group-hover:bg-amber-600 group-hover:shadow-emerald-500/20 group-hover:shadow-blue-500/20 group-hover:shadow-indigo-500/20 group-hover:shadow-amber-500/20 text-emerald-600 text-blue-600 text-indigo-600 text-amber-600 group-hover:text-emerald-600 group-hover:text-blue-600 group-hover:text-indigo-600 group-hover:text-amber-600");

/* audit_cases/index: red, orange, amber */
@source inline("hover:bg-red-50 hover:bg-orange-50 hover:bg-amber-50 bg-red-50 bg-orange-50 bg-amber-50 bg-red-500 bg-orange-500 bg-amber-500 group-hover:text-red-700 group-hover:text-orange-700 group-hover:text-amber-700");

/* home/index 히어로 퀵링크: indigo, emerald, amber, pink */
@source inline("text-indigo-400 text-emerald-400 text-amber-400 text-pink-400 group-hover:text-indigo-300 group-hover:text-emerald-300 group-hover:text-amber-300 group-hover:text-pink-300");

/* home/index 가이드 카드: indigo, violet, amber, emerald, blue, rose */
@source inline("bg-indigo-50 bg-violet-50 bg-amber-50 bg-emerald-50 bg-blue-50 bg-rose-50 text-indigo-600 text-violet-600 text-amber-600 text-emerald-600 text-blue-600 text-rose-600 group-hover:bg-indigo-600 group-hover:bg-violet-600 group-hover:bg-amber-600 group-hover:bg-emerald-600 group-hover:bg-blue-600 group-hover:bg-rose-600 group-hover:text-indigo-600 group-hover:text-violet-600 group-hover:text-amber-600 group-hover:text-emerald-600 group-hover:text-blue-600 group-hover:text-rose-600");

/* guides/index 인기 가이드 번호 뱃지 */
@source inline("bg-emerald-100 text-emerald-600 bg-slate-100 text-slate-500");

/* guides/show category_color 동적 클래스 (emerald, blue, amber, violet) */
@source inline("bg-violet-100 text-violet-600");

/* home/index 수의계약 Featured 카드 */
@source inline("from-indigo-50 via-white to-violet-50 border-indigo-200 hover:border-indigo-400 bg-indigo-100 border-indigo-100");

/* topics/index 서브그룹 점프 칩: JS에서 동적으로 토글 */
@source inline("inline-flex items-center gap-1.5 bg-indigo-50 border-indigo-300 text-indigo-700 hover:bg-indigo-50 hover:border-indigo-200 hover:text-indigo-700");

/* ===========================================
   FORCED LIGHT MODE
   모바일 브라우저 강제 다크모드 방지
   =========================================== */
@media (prefers-color-scheme: dark) {
  html {
    background-color: #fafbfc !important;
    color: #0f172a !important;
    color-scheme: light !important;
  }

  body {
    background-color: #fafbfc !important;
    color: #0f172a !important;
  }

  /* 네비게이션 */
  nav, nav * {
    background-color: inherit;
    color: inherit;
  }

  /* 카드, 입력필드, 테이블 */
  .card, .qd-card, .qd-doc, .qd-input,
  input, select, textarea, table, th, td {
    background-color: inherit !important;
    color: inherit !important;
    border-color: #e5e7eb !important;
  }

  /* 흰색 배경 요소 */
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background:white"],
  [style*="background:#ffffff"] {
    background-color: #ffffff !important;
  }

  /* 어두운 텍스트 보장 */
  [style*="color:#1e293b"],
  [style*="color:#334155"],
  [style*="color:#475569"],
  [style*="color:#0f172a"] {
    color: #1e293b !important;
  }

  /* 이미지, SVG 반전 방지 */
  img, svg, video, canvas {
    filter: none !important;
  }
}