@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

@custom-variant dark (&:is(.dark *));

:root {
  --font-size: 16px;
  /* Clean minimalist background */
  --background: #FAFAFA;
  --foreground: #1A1A1A;
  --card: #FFFFFF;
  --card-foreground: #1A1A1A;
  --popover: #FFFFFF;
  --popover-foreground: #1A1A1A;
  /* Modern blue primary palette */
  --primary: #3B82F6;
  --primary-foreground: #FFFFFF;
  --secondary: #F1F5F9;
  --secondary-foreground: #1A1A1A;
  --muted: #F8FAFC;
  --muted-foreground: #6B7280;
  --accent: #F0F9FF;
  --accent-foreground: #1A1A1A;
  /* Clean destructive color */
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  --border: #E2E8F0;
  --input: #FFFFFF;
  --input-background: #F8FAFC;
  --switch-background: #F1F5F9;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: rgba(59, 130, 246, 0.3);
  /* Clean chart colors */
  --chart-1: #3B82F6;
  --chart-2: #10B981;
  --chart-3: #F59E0B;
  --chart-4: #EF4444;
  --chart-5: #8B5CF6;
  /* Minimal rounded corners */
  --radius: 0.75rem;
  /* Clean sidebar */
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1A1A1A;
  --sidebar-primary: #3B82F6;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F0F9FF;
  --sidebar-accent-foreground: #1A1A1A;
  --sidebar-border: #E2E8F0;
  --sidebar-ring: rgba(59, 130, 246, 0.3);
  
  /* Clean design tokens */
  --clean-blur: blur(8px);
  --clean-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --clean-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --clean-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --clean-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  
  /* SAM MES Design System - Semantic Color Tokens */
  --success-color: #10B981;
  --success-hover: #059669;
  --success-light: #34D399;
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-700: #047857;
  
  --warning-color: #F59E0B;
  --warning-hover: #D97706;
  --warning-50: #FFF7ED;
  --warning-100: #FFEDD5;
  --warning-200: #FED7AA;
  --warning-700: #C2410C;
  
  --error-color: #EF4444;
  --error-hover: #DC2626;
  --error-50: #FEF2F2;
  --error-200: #FECACA;
  --error-700: #B91C1C;
  
  --info-color: #3B82F6;
  --info-hover: #2563EB;
  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-200: #BFDBFE;
  --info-700: #1D4ED8;
  
  /* SAM MES - Functional Color Tokens */
  --quote-color: #65A30D;
  --quote-bg: #F7FEE7;
  --quote-hover: #4D7C0F;
  
  --calculation-color: #2563EB;
  --calculation-bg: #EFF6FF;
  
  --order-color: #9333EA;
  --order-bg: #FAF5FF;
  
  --item-product-color: #7E22CE;
  --item-part-color: #C2410C;
  --item-material-color: #047857;
  --item-raw-color: #1D4ED8;
  
  --status-active-color: #10B981;
  --status-development-color: #3B82F6;
  --status-discontinued-color: #EF4444;
}

.dark {
  /* Clean dark theme */
  --background: #0F172A;
  --foreground: #F8FAFC;
  --card: #1E293B;
  --card-foreground: #F8FAFC;
  --popover: #1E293B;
  --popover-foreground: #F8FAFC;
  --primary: #60A5FA;
  --primary-foreground: #1E293B;
  --secondary: #334155;
  --secondary-foreground: #F8FAFC;
  --muted: #475569;
  --muted-foreground: #94A3B8;
  --accent: #1E40AF;
  --accent-foreground: #F8FAFC;
  --destructive: #F87171;
  --destructive-foreground: #1E293B;
  --border: #334155;
  --input: #1E293B;
  --input-background: #334155;
  --switch-background: #475569;
  --ring: rgba(96, 165, 250, 0.3);
  
  /* Dark mode chart colors */
  --chart-1: #60A5FA;
  --chart-2: #34D399;
  --chart-3: #FBBF24;
  --chart-4: #F87171;
  --chart-5: #A78BFA;
  
  /* Dark sidebar */
  --sidebar: #1E293B;
  --sidebar-foreground: #F8FAFC;
  --sidebar-primary: #60A5FA;
  --sidebar-primary-foreground: #1E293B;
  --sidebar-accent: #1E40AF;
  --sidebar-accent-foreground: #F8FAFC;
  --sidebar-border: #334155;
  --sidebar-ring: rgba(96, 165, 250, 0.3);
  
  /* Dark mode clean shadows */
  --clean-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --clean-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --clean-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --clean-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
}



@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  }

  body {
    @apply bg-background text-foreground;
    /* Pretendard Korean font stack */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    /* Clean text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Simple clean background */
    background: var(--background);
    min-height: 100vh;
  }

  /* Clean glass utilities */
  .clean-glass {
    backdrop-filter: var(--clean-blur);
    -webkit-backdrop-filter: var(--clean-blur);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
    position: relative;
  }

  .dark .clean-glass {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--border);
  }

  /* Clean shadows */
  .clean-shadow-sm {
    box-shadow: var(--clean-shadow-sm);
  }

  .clean-shadow {
    box-shadow: var(--clean-shadow);
  }

  .clean-shadow-lg {
    box-shadow: var(--clean-shadow-lg);
  }

  .clean-shadow-xl {
    box-shadow: var(--clean-shadow-xl);
  }

  /* Smooth transitions for all interactive elements */
  * {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.3s ease;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  /* Scrollbar appears on hover and scroll */
  *:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
  }

  .dark *:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Custom scrollbar for calendar detail */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 3px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
  }
}

/**
 * Apple-inspired typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
@layer base {
  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
    h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
      letter-spacing: -0.01em;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
    }

    p {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.6;
    }

    label {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
      letter-spacing: 0.01em;
    }

    button {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
      letter-spacing: 0.01em;
    }

    input {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.4;
    }
  }
}

/* Clean modern component styles */
@layer components {
  .clean-input {
    @apply bg-input-background border border-border rounded-lg px-4 py-3;
    @apply focus:bg-card focus:border-primary focus:ring-2 focus:ring-primary/20;
    @apply transition-all duration-200 ease-out;
  }

  .clean-input::placeholder {
    @apply text-muted-foreground;
  }

  .clean-button {
    @apply rounded-lg px-6 py-3 font-medium transition-colors duration-200;
    @apply bg-primary text-primary-foreground hover:bg-primary/90;
  }

  .clean-button-secondary {
    @apply rounded-lg px-6 py-3 font-medium transition-colors duration-200;
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
  }

  .clean-card {
    @apply bg-card border border-border rounded-lg p-6;
    @apply transition-shadow duration-200;
    box-shadow: var(--clean-shadow);
  }

  .clean-card:hover {
    box-shadow: var(--clean-shadow-lg);
  }

  .clean-gradient-card {
    @apply bg-card border border-border;
  }

  .clean-hero-gradient {
    @apply bg-primary;
  }

  /* Dark mode compatibility fixes */
  .dark .bg-gray-50 {
    background-color: rgba(71, 85, 105, 0.2) !important;
  }

  .dark .bg-gray-100 {
    background-color: rgba(71, 85, 105, 0.3) !important;
  }

  .dark .text-gray-800 {
    color: #F8FAFC !important;
  }

  .dark .text-gray-600 {
    color: #94A3B8 !important;
  }

  .dark .text-gray-900 {
    color: #F8FAFC !important;
  }

  .dark .text-gray-500 {
    color: rgba(148, 163, 184, 0.8) !important;
  }

  .dark .border-gray-200 {
    border-color: rgba(51, 65, 85, 0.3) !important;
  }

  /* Icon background dark mode compatibility */
  .dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
  }

  .dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
  }

  .dark .bg-yellow-100 {
    background-color: rgba(251, 191, 36, 0.2) !important;
  }

  .dark .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.2) !important;
  }

  .dark .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.2) !important;
  }

  .dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.2) !important;
  }

  .dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
  }

  /* Icon text dark mode compatibility */
  .dark .text-blue-600 {
    color: #60A5FA !important;
  }

  .dark .text-green-600 {
    color: #34D399 !important;
  }

  .dark .text-yellow-600 {
    color: #FBBF24 !important;
  }

  .dark .text-purple-600 {
    color: #A78BFA !important;
  }

  .dark .text-orange-600 {
    color: #FB923C !important;
  }

  .dark .text-indigo-600 {
    color: #818CF8 !important;
  }

  .dark .text-red-600 {
    color: #F87171 !important;
  }

  /* Additional dark mode text color fixes */
  .dark .text-gray-400 {
    color: #94A3B8 !important;
  }

  .dark .text-gray-700 {
    color: #E2E8F0 !important;
  }

  /* Badge dark mode compatibility */
  .dark .bg-gray-500 {
    background-color: rgba(100, 116, 139, 0.8) !important;
  }

  /* Additional gradient dark mode fixes */
  .dark .from-green-50 {
    --tw-gradient-from: rgba(34, 197, 94, 0.1) !important;
  }

  .dark .to-blue-50 {
    --tw-gradient-to: rgba(59, 130, 246, 0.1) !important;
  }

  /* Chart and graph dark mode fixes */
  .dark .recharts-text {
    fill: #94A3B8 !important;
  }

  .dark .recharts-cartesian-axis-line {
    stroke: #475569 !important;
  }

  .dark .recharts-cartesian-grid-horizontal line,
  .dark .recharts-cartesian-grid-vertical line {
    stroke: #334155 !important;
  }

  .dark .recharts-tooltip-wrapper .recharts-default-tooltip {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    color: #F8FAFC !important;
  }

  .dark .recharts-legend-item-text {
    color: #94A3B8 !important;
  }

  /* Global dark mode text replacements */
  .dark *[class*="text-gray-400"] {
    color: #94A3B8 !important;
  }

  .dark *[class*="text-gray-500"] {
    color: rgba(148, 163, 184, 0.8) !important;
  }

  .dark *[class*="text-gray-600"] {
    color: #94A3B8 !important;
  }

  .dark *[class*="text-gray-700"] {
    color: #E2E8F0 !important;
  }

  .dark *[class*="text-gray-800"] {
    color: #F8FAFC !important;
  }

  .dark *[class*="text-gray-900"] {
    color: #F8FAFC !important;
  }

  /* Global dark mode background replacements */
  .dark *[class*="bg-gray-50"] {
    background-color: rgba(71, 85, 105, 0.2) !important;
  }

  .dark *[class*="bg-gray-100"] {
    background-color: rgba(71, 85, 105, 0.3) !important;
  }

  .dark *[class*="bg-gray-500"] {
    background-color: rgba(100, 116, 139, 0.8) !important;
  }

  /* Global dark mode border replacements */
  .dark *[class*="border-gray-200"] {
    border-color: rgba(51, 65, 85, 0.3) !important;
  }

  .dark *[class*="border-gray-300"] {
    border-color: rgba(51, 65, 85, 0.5) !important;
  }

  /* Enhanced color contrast for icons in dark mode */
  .dark .text-blue-600,
  .dark .text-blue-700 {
    color: #60A5FA !important;
  }

  .dark .text-green-600,
  .dark .text-green-700 {
    color: #34D399 !important;
  }

  .dark .text-yellow-600,
  .dark .text-yellow-700 {
    color: #FBBF24 !important;
  }

  .dark .text-red-600,
  .dark .text-red-700 {
    color: #F87171 !important;
  }

  .dark .text-purple-600,
  .dark .text-purple-700 {
    color: #A78BFA !important;
  }

  .dark .text-orange-600,
  .dark .text-orange-700 {
    color: #FB923C !important;
  }

  .dark .text-indigo-600,
  .dark .text-indigo-700 {
    color: #818CF8 !important;
  }

  /* Enhanced background colors for icons in dark mode */
  .dark .bg-blue-50,
  .dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
  }

  .dark .bg-green-50,
  .dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.15) !important;
  }

  .dark .bg-yellow-50,
  .dark .bg-yellow-100 {
    background-color: rgba(251, 191, 36, 0.15) !important;
  }

  .dark .bg-red-50,
  .dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
  }

  .dark .bg-purple-50,
  .dark .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.15) !important;
  }

  .dark .bg-orange-50,
  .dark .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.15) !important;
  }

  .dark .bg-indigo-50,
  .dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.15) !important;
  }

  /* Search input placeholder dark mode */
  .dark input::placeholder {
    color: #64748B !important;
  }

  /* Card and dialog improvements for dark mode */
  .dark .clean-glass {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(51, 65, 85, 0.5) !important;
  }

  /* Badge dark mode improvements */
  .dark .badge {
    border: 1px solid rgba(51, 65, 85, 0.3);
  }

  /* Form input dark mode improvements */
  .dark .clean-input {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #F8FAFC !important;
  }

  .dark .clean-input:focus {
    background-color: #1E293B !important;
    border-color: #60A5FA !important;
  }

  /* Comprehensive chart dark mode theming */
  .dark .recharts-wrapper {
    background: transparent !important;
  }

  .dark .recharts-surface {
    background: transparent !important;
  }

  .dark .recharts-text {
    fill: #94A3B8 !important;
  }

  .dark .recharts-cartesian-axis {
    color: #94A3B8 !important;
  }

  .dark .recharts-cartesian-axis text {
    fill: #94A3B8 !important;
  }

  .dark .recharts-cartesian-axis-line {
    stroke: #475569 !important;
  }

  .dark .recharts-cartesian-axis-tick {
    stroke: #475569 !important;
  }

  .dark .recharts-cartesian-grid line {
    stroke: #334155 !important;
    stroke-opacity: 0.6 !important;
  }

  .dark .recharts-tooltip-wrapper {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)) !important;
  }

  .dark .recharts-default-tooltip {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3) !important;
    color: #F8FAFC !important;
  }

  .dark .recharts-tooltip-label {
    color: #F8FAFC !important;
  }

  .dark .recharts-tooltip-item {
    color: #F8FAFC !important;
  }

  .dark .recharts-legend-wrapper {
    color: #94A3B8 !important;
  }

  .dark .recharts-legend-item {
    color: #94A3B8 !important;
  }

  .dark .recharts-legend-item-text {
    color: #94A3B8 !important;
  }

  /* Progress bar dark mode improvements */
  .dark .progress-track {
    background-color: #334155 !important;
  }

  /* Table dark mode improvements */
  .dark table {
    border-color: #334155 !important;
  }

  .dark th {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
  }

  .dark td {
    border-color: #334155 !important;
    color: #F8FAFC !important;
  }

  /* Modal and dialog dark mode improvements */
  .dark .modal-content,
  .dark .dialog-content {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
  }

  /* Dropdown menu dark mode improvements */
  .dark .dropdown-menu {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  }

  .dark .dropdown-menu-item {
    color: #F8FAFC !important;
  }

  .dark .dropdown-menu-item:hover {
    background-color: #334155 !important;
  }

  /* Calendar optimization for maximum visibility */
  .calendar-container {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .rdp {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    --rdp-cell-size: 100%;
    --rdp-accent-color: var(--primary);
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .rdp-months {
    display: flex;
    width: 100% !important;
    height: 100% !important;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    flex: 1 !important;
  }

  .rdp-month {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
  }

  .rdp-caption_label {
    flex-shrink: 0 !important;
  }

  .rdp-table {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .rdp-thead {
    width: 100% !important;
    flex-shrink: 0 !important;
    display: table-header-group !important;
  }

  .rdp-thead tr {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }

  .rdp-head_cell {
    flex: 1 !important;
    text-align: center !important;
    padding: 6px 0 !important;
    font-size: 0.875rem !important;
    color: var(--muted-foreground) !important;
  }

  .rdp-tbody {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rdp-row {
    flex: 1 !important;
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rdp-cell {
    flex: 1 !important;
    padding: 0 !important;
    position: relative;
    display: flex !important;
    min-height: 0 !important;
  }

  .rdp-day {
    width: 100% !important;
    height: 100% !important;
    min-height: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    position: relative !important;
    overflow: visible !important;
    cursor: pointer !important;
  }

  .rdp-day:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
    z-index: 10 !important;
  }

  .rdp-day_selected {
    background: linear-gradient(135deg, var(--primary) 0%, #2563EB 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-2px) !important;
    z-index: 20 !important;
  }

  .rdp-day_today {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(59, 130, 246, 0.15) !important;
  }

  .rdp-day_outside {
    opacity: 0.3 !important;
  }

  .rdp-day_disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
  }

  /* Calendar header improvements */
  .rdp-head_cell {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 12px 0 !important;
    text-align: center !important;
    color: var(--muted-foreground) !important;
  }

  .rdp-caption {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
  }

  /* Calendar day content improvements */
  .rdp-day > span {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
  }

  .rdp-day .flex.flex-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    margin-bottom: 0;
  }

  /* Enhanced calendar for expanded view */
  .calendar-expanded {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .calendar-expanded .rdp {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
  }

  .calendar-expanded .rdp-month {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  .calendar-expanded .rdp-table {
    height: 100% !important;
  }

  .calendar-expanded .rdp-tbody {
    height: 100% !important;
    gap: 5px !important;
  }

  .calendar-expanded .rdp-thead tr {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  .calendar-expanded .rdp-row {
    flex: 1 !important;
    gap: 5px !important;
  }

  .calendar-expanded .rdp-cell {
    flex: 1 !important;
  }

  .calendar-expanded .rdp-day {
    height: 100% !important;
    min-height: 70px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
  }

  .calendar-expanded .rdp-day > span:first-child {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  /* Mega calendar for maximum view */
  .calendar-mega .rdp-cell {
    height: 140px !important;
  }

  .calendar-mega .rdp-day {
    padding: 12px !important;
    border-radius: 20px !important;
    border: 2px solid transparent !important;
  }

  .calendar-mega .rdp-day span {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }

  .calendar-mega .rdp-day .w-3.h-3 {
    width: 8px !important;
    height: 8px !important;
    margin: 2px !important;
  }

  .calendar-mega .rdp-caption_label {
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin-bottom: 2rem !important;
  }

  .calendar-mega .rdp-head_cell {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    padding: 16px 8px !important;
  }

  /* Dark mode calendar improvements */
  .dark .rdp-day {
    background-color: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
  }

  /* Blob animation for login/signup pages */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  .dark .rdp-day:hover {
    background-color: rgba(96, 165, 250, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25) !important;
  }

  .dark .rdp-day_selected {
    background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%) !important;
    color: #1E293B !important;
    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.5) !important;
  }

  .dark .rdp-day_selected span {
    color: #1E293B !important;
  }

  .dark .rdp-day_today {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.25) 0%, rgba(147, 51, 234, 0.25) 100%) !important;
    border: 2px solid #60A5FA !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3), 0 4px 12px rgba(96, 165, 250, 0.2) !important;
  }

  .dark .rdp-head_cell {
    color: #94A3B8 !important;
  }

  .dark .rdp-caption_label {
    color: #F8FAFC !important;
  }

  /* Calendar header improvements */
  .rdp-head_row {
    display: flex !important;
    width: 100% !important;
  }

  .rdp-head_cell {
    flex: 1 !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: var(--muted-foreground) !important;
    text-align: center !important;
    padding: 12px 8px !important;
  }

  .rdp-caption {
    margin-bottom: 20px !important;
    padding: 0 !important;
  }

  .rdp-caption_label {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
  }

  .rdp-row {
    display: flex !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .rdp-tbody {
    width: 100% !important;
  }

  /* Calendar navigation buttons */
  .rdp-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .rdp-nav_button {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
  }

  .rdp-nav_button:hover {
    background-color: var(--accent) !important;
    border-color: var(--primary) !important;
  }

  .rdp-nav_button_previous {
    position: absolute !important;
    left: 0 !important;
  }

  .rdp-nav_button_next {
    position: absolute !important;
    right: 0 !important;
  }

  /* Event dots enhancements */
  .calendar-expanded .rdp-day .w-2.h-2 {
    width: 6px !important;
    height: 6px !important;
    margin: 1px !important;
  }

  .calendar-expanded .rdp-day .w-3.h-3 {
    width: 10px !important;
    height: 10px !important;
    margin: 1.5px !important;
  }

  /* Calendar responsive improvements */
  @media (max-width: 768px) {
    .rdp-cell {
      min-height: 70px !important;
    }
    
    .calendar-expanded .rdp-cell {
      min-height: 80px !important;
    }

    .calendar-expanded .rdp-day {
      min-height: 80px !important;
      padding: 6px 4px !important;
    }

    .calendar-expanded .rdp-day > span:first-child {
      font-size: 1rem !important;
    }

    .rdp-day .w-3.h-3 {
      width: 6px !important;
      height: 6px !important;
    }
  }

  @media (min-width: 1280px) {
    .rdp-cell {
      min-height: 100px !important;
    }

    .calendar-expanded .rdp-cell {
      min-height: 120px !important;
    }

    .calendar-expanded .rdp-day {
      min-height: 120px !important;
    }
    
    .calendar-expanded .rdp-cell {
      height: 110px !important;
    }
  }

  @media (min-width: 1536px) {
    .calendar-expanded .rdp-cell {
      height: 120px !important;
    }
    
    .calendar-expanded .rdp-day {
      padding: 10px !important;
    }

    .calendar-mega .rdp-cell {
      height: 160px !important;
    }

    .calendar-mega .rdp-day {
      padding: 14px !important;
    }
  }

  @media (min-width: 1920px) {
    .calendar-mega .rdp-cell {
      height: 180px !important;
    }
  }

  /* Navigation buttons */
  .rdp-nav_button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--background) !important;
    transition: all 0.2s !important;
  }

  .rdp-nav_button:hover {
    background: var(--accent) !important;
    transform: scale(1.05) !important;
    box-shadow: var(--clean-shadow) !important;
  }

  /* Senior mode calendar enhancements */
  .senior .rdp-cell {
    height: 120px !important;
  }

  .senior .calendar-expanded .rdp-cell {
    height: 140px !important;
  }

  .senior .rdp-day {
    padding: 12px !important;
    border-width: 2px !important;
  }

  .senior .rdp-day span {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
  }

  .senior .rdp-day .w-3.h-3 {
    width: 8px !important;
    height: 8px !important;
    margin: 2px 1px !important;
  }

  .senior .rdp-caption_label {
    font-size: 2rem !important;
    font-weight: 800 !important;
  }

  .senior .rdp-head_cell {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    padding: 16px 6px !important;
  }

  .senior .rdp-nav_button {
    width: 50px !important;
    height: 50px !important;
    border-width: 2px !important;
  }

  .senior .rdp-day_today {
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
  }

  .senior .rdp-day_selected {
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.5) !important;
  }

  /* 사이드바 접힌 상태 최적화 */
  .sidebar-collapsed {
    min-width: 80px;
    max-width: 80px;
  }

  .sidebar-collapsed .sidebar-logo {
    transform: scale(0.9);
    transform-origin: center;
  }

  /* 로고 스타일 개선 */
  .sidebar-logo {
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
  }

  .sidebar-logo::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    z-index: -1;
  }

  .sidebar-collapsed .sidebar-menu-item {
    min-height: 44px;
    width: 44px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-collapsed .sidebar-menu-icon {
    transform: scale(0.9);
  }

  /* Sidebar scroll container - scrollbar only visible when scrolling */
  .sidebar-scroll-container {
    position: relative;
  }

  .sidebar-scroll-container::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar-scroll-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar-scroll-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.3s ease;
  }

  .sidebar-scroll-container.is-scrolling::-webkit-scrollbar-thumb {
    background: rgb(203 213 225);
  }

  .dark .sidebar-scroll-container.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5);
  }

  /* 사이드바 툴팁 최적화 */
  .sidebar-collapsed [title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    box-shadow: var(--samsung-shadow);
  }

  .sidebar-collapsed [title]:hover::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6px;
    border: 6px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    pointer-events: none;
  }
}

html {
  font-size: var(--font-size);
}

/* ==============================================
   🎨 반응형 개선: 애니메이션 & 다크모드 최적화
   ============================================== */

/* LNB 사이드바 부드러운 전환 애니메이션 */
@layer components {
  .sidebar-menu-item {
    @apply will-change-transform;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .sidebar-menu-icon {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .sidebar-collapsed {
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 스크롤 컨테이너 부드러운 스크롤 */
  .sidebar-scroll-container {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 축소 시 Tooltip 애니메이션 */
  [data-radix-popper-content-wrapper] {
    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-8px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* 타블릿 화면 최적화 */
  @media (min-width: 768px) and (max-width: 1024px) {
    .sidebar-collapsed {
      /* 타블릿에서 아이콘만 보이도록 최적화 */
      @apply shadow-sm;
    }
    
    /* 검색창 최소 너비 보장 */
    .search-container {
      min-width: 200px;
    }
  }
  
  /* 다크모드 타블릿 최적화 - 명암비 개선 */
  .dark {
  
  /* 모바일 바텀시트 스타일 */
  .mobile-bottom-sheet {
    @apply md:static md:translate-y-0 md:left-auto md:right-auto md:rounded-lg;
  }
  
  @media (max-width: 767px) {
    .mobile-bottom-sheet {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      transform: translateX(0) translateY(0) !important;
      border-radius: 1rem 1rem 0 0 !important;
      height: 90vh !important;
      max-height: 90vh !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  }
  
    /* 타블릿 화면에서 사이드바 배경 강조 */
    @media (min-width: 768px) and (max-width: 1024px) {
      .clean-glass {
        background-color: rgba(30, 41, 59, 0.95) !important;
        border-color: rgba(51, 65, 85, 0.5) !important;
      }
      
      /* 메뉴 아이콘 명암비 강화 */
      .sidebar-menu-icon {
        @apply ring-1 ring-white/10;
      }
      
      /* 활성 메뉴 명암비 개선 */
      .sidebar-menu-item[style*="backgroundColor"] {
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
      }
      
      /* 서브메뉴 hover 효과 강화 */
      .text-muted-foreground:hover {
        @apply text-foreground/90;
      }
    }
  }
  
  /* 모바일 터치 최적화 */
  @media (max-width: 767px) {
    .sidebar-menu-item {
      /* 터치 영역 최소 44px 보장 */
      min-height: 44px;
    }
  }
  
  /* 데스크톱 호버 효과 개선 */
  @media (min-width: 1025px) {
    .sidebar-menu-item:hover {
      @apply transition-all duration-200;
    }
    
    .sidebar-menu-item:active {
      @apply transition-all duration-75;
    }
  }
  
  /* 검색창 반응형 애니메이션 */
  .search-input-wrapper {
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* LNB 토글 버튼 애니메이션 */
  button:has(svg.lucide-menu) {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  button:has(svg.lucide-menu):hover {
    transform: scale(1.05);
  }
  
  button:has(svg.lucide-menu):active {
    transform: scale(0.95);
  }
  
  /* 다크모드 색상 전환 부드럽게 */
  * {
    transition-property: background-color, border-color, color;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 단, 레이아웃 전환과 transform은 유지 */
  *[class*="transition-all"],
  *[class*="transition-transform"] {
    transition-property: all;
  }
}