/**
 * KoMaP Navigation Redesign - CSS Design System
 * 
 * This stylesheet implements the modern 2-tier navigation structure with:
 * - Design tokens (CSS custom properties)
 * - Pretendard typography system
 * - Responsive mega dropdowns
 * - Mobile hamburger menu
 * 
 * Requirements: 1.1, 1.5, 1.6, 4.1-4.9, 12.1, 18.1-18.10
 */

/* =============================================================================
   1. FONT IMPORT & TYPOGRAPHY SYSTEM
   Requirements: 4.2, 4.3, 4.4, 12.1
   ============================================================================= */

/**
 * Pretendard Font Import
 * Using font-display: swap for non-blocking load (Requirement 12.1)
 * Source: JSDelivr CDN for optimal performance
 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* =============================================================================
   2. DESIGN TOKENS (CSS Custom Properties)
   Requirements: 4.1, 4.5, 4.6
   ============================================================================= */

:root {
  /* Primary Colors */
  --navy: #15294d;
  --navy2: #1d3866;
  --blue: #2e6fd6;
  --blue2: #5b9bd5;
  --blue-soft: #e8f0fc;
  
  /* Background Colors */
  --bg: #eef2f8;
  --card: #ffffff;
  
  /* Border Colors */
  --line: #e1e7f0;
  --line2: #eef2f8;
  
  /* Text Colors */
  --text: #1a2233;
  --muted: #4a5d78;
  
  /* Semantic Colors */
  --success: #1f9d6b;
  --warn: #e08a2b;
  --danger: #d2473f;
  
  /* Effects */
  --shadow: 0 1px 3px rgba(20,41,77,.06), 0 6px 20px rgba(20,41,77,.06);
  --radius: 14px;

  /* Type scale — 확연한 가독성 상향 (메인·komap_new 동기화) */
  --fs-xs: 14px;
  --fs-sm: 15.5px;
  --fs-base: 18px;
  --fs-md: 17.5px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --lh-tight: 1.25;
  --lh-body: 1.7;
  --lh-loose: 1.8;
  --tracking-tight: -0.02em;
}

/* =============================================================================
   3. GLOBAL RESETS & BASE STYLES
   Requirements: 4.3, 4.4, 4.5
   ============================================================================= */

/**
 * Box-sizing reset for predictable layouts
 */
*, *::before, *::after {
  box-sizing: border-box;
}

/**
 * Base typography and text rendering optimizations
 * - Pretendard font family with comprehensive fallbacks
 * - Antialiased rendering for smoother text
 * Requirements: 4.2, 4.3, 4.4
 */
body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text);
  line-height: var(--lh-body);
  font-size: var(--fs-base);
}

/* =============================================================================
   4. TYPE SCALE SYSTEM
   Requirements: 4.2, 4.3
   ============================================================================= */

/**
 * Page Title (h1)
 * Usage: Main page headings, hero titles
 */
h1, .heading-1 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}

/**
 * Section Title (h2)
 * Usage: Section headings, card group titles
 */
h2, .heading-2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 0;
}

/**
 * Card Title (h3)
 * Usage: Card titles, subsection headings
 */
h3, .heading-3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--text);
  margin: 0;
}

/**
 * Small Heading (h4)
 * Usage: Small section titles, emphasized labels
 */
h4, .heading-4 {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--text);
  margin: 0;
}

/**
 * Navigation Link Typography
 * Usage: Menu items, navigation links
 * Requirements: 4.2
 */
.nav-link,
.nav-text {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

/**
 * Body Text
 * Usage: Paragraphs, descriptions, content
 */
p, .body-text {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0;
  margin: 0;
}

/**
 * Small Text
 * Usage: Secondary information, metadata
 */
.small-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
}

/**
 * Caption Text
 * Usage: Image captions, helper text
 */
.caption {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

/**
 * Micro Text
 * Usage: Fine print, legal text
 */
.micro {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

/**
 * Label Text (Uppercase)
 * Usage: Category labels, section markers
 */
.label,
.label-text {
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =============================================================================
   5. UTILITY CLASSES
   ============================================================================= */

/**
 * Text Color Utilities
 */
.text-primary { color: var(--blue); }
.text-navy { color: var(--navy); }
.text-muted { color: var(--muted); }
.text-success { color: var(--success); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }

/**
 * Font Weight Utilities
 */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/**
 * Text Alignment
 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/**
 * Text Truncation
 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================================
   6. SPACING SYSTEM
   ============================================================================= */

/**
 * Common spacing values derived from design reference
 * Usage: margins, padding, gaps
 */
.spacing-xs { gap: 6px; }
.spacing-sm { gap: 10px; }
.spacing-md { gap: 16px; }
.spacing-lg { gap: 24px; }
.spacing-xl { gap: 32px; }

/* =============================================================================
   7. BORDER RADIUS SCALE
   Requirements: 4.9
   ============================================================================= */

.radius-sm { border-radius: 7px; }
.radius-md { border-radius: 11px; }
.radius-lg { border-radius: 14px; }
.radius-xl { border-radius: 18px; }
.radius-full { border-radius: 9999px; }

/* =============================================================================
   8. BUTTON BASE STYLES
   ============================================================================= */

/**
 * Base button reset and typography
 */
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
}

button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* =============================================================================
   9. LINK BASE STYLES
   ============================================================================= */

/**
 * Base link styles with smooth transitions
 */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--blue);
}

a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =============================================================================
   10. ACCESSIBILITY UTILITIES
   Requirements: 13.1, 13.2, 13.4
   ============================================================================= */

/**
 * Screen reader only content
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/**
 * Focus visible styles for keyboard navigation
 * Requirements: 13.4
 */
.focus-visible:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* =============================================================================
   11. ANIMATION & TRANSITION UTILITIES
   Requirements: 18.1, 18.2, 18.5
   ============================================================================= */

/**
 * Smooth transition utilities
 */
.transition-fast { transition: all 0.12s ease; }
.transition { transition: all 0.15s ease; }
.transition-slow { transition: all 0.18s ease; }

/**
 * Reduced motion preference support
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   END OF BASE STYLES & TYPOGRAPHY SYSTEM
   
   Component-specific styles (navigation, mega dropdowns, mobile menu, etc.)
   will be added in subsequent tasks.
   ============================================================================= */