ERP-node/frontend/app/globals.css

/* ===== 서명용 손글씨 폰트 (완전한 한글 지원 폰트) ===== */
@import url("https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@700&family=Great+Vibes&family=Pacifico&family=Satisfy&family=Caveat:wght@700&family=Permanent+Marker&family=Shadows+Into+Light&family=Kalam:wght@700&family=Patrick+Hand&family=Indie+Flower&family=Amatic+SC:wght@700&family=Covered+By+Your+Grace&family=Nanum+Brush+Script&family=Nanum+Pen+Script&family=Gaegu:wght@700&family=Hi+Melody&family=Gamja+Flower&family=Poor+Story&family=Do+Hyeon&family=Jua&display=swap");

/* ===== Tailwind CSS & Animations ===== */
@import "tailwindcss";
@import "tw-animate-css";

/* ===== Dark Mode Variant ===== */
@custom-variant dark (&:is(.dark *));

/* ===== Tailwind Theme Extensions ===== */
@theme {
  /* Color System - HSL Format (shadcn/ui Standard) */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  /* Success, Warning, Info Colors */
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-info: hsl(var(--info));
  --color-info-foreground: hsl(var(--info-foreground));

  /* Chart Colors */
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  /* Sidebar Colors */
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* Font Families */
  --font-sans: var(--font-inter);
  --font-mono: var(--font-jetbrains-mono);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* ===== CSS Variables (shadcn/ui Official) ===== */
:root {
  /* Light Theme Colors - HSL Format */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;

  /* Success Colors (Emerald) */
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  /* Warning Colors (Amber) */
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  /* Info Colors (Cyan) */
  --info: 188 94% 43%;
  --info-foreground: 0 0% 100%;

  /* Chart Colors */
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;

  /* Border Radius */
  --radius: 0.5rem;

  /* Sidebar Colors */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ===== Dark Theme ===== */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;

  /* Success Colors (Emerald) - Dark */
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  /* Warning Colors (Amber) - Dark */
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  /* Info Colors (Cyan) - Dark */
  --info: 188 94% 43%;
  --info-foreground: 0 0% 100%;

  /* Chart Colors - Dark */
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  /* Sidebar Colors - Dark */
  --sidebar-background: 222.2 84% 4.9%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-primary: 217.2 91.2% 59.8%;
  --sidebar-primary-foreground: 222.2 47.4% 11.2%;
  --sidebar-accent: 217.2 32.6% 17.5%;
  --sidebar-accent-foreground: 210 40% 98%;
  --sidebar-border: 217.2 32.6% 17.5%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ===== Base Styles ===== */
* {
  border-color: hsl(var(--border));
}

body {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

/* Button 기본 커서 스타일 */
button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

/* ===== Dialog/Modal Overlay ===== */
/* Radix UI Dialog Overlay - 60% 불투명도 배경 */
[data-radix-dialog-overlay],
.fixed.inset-0.z-50.bg-black {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
}

/* DialogPrimitive.Overlay 클래스 오버라이드 */
.fixed.inset-0.z-50 {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
}

/* ===== Accessibility - Focus Styles ===== */
/* 모든 인터랙티브 요소에 대한 포커스 스타일 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* TableSearchWidget의 SelectTrigger 포커스 스타일 제거 */
[role="combobox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

button[role="combobox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: hsl(var(--input)) !important;
}

/* ===== Scrollbar Styles (Optional) ===== */
/* Webkit 기반 브라우저 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--muted));
}

/* ===== Animation Utilities ===== */
/* Smooth transitions for interactive elements */
button,
a,
input,
textarea,
select {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Disable animations for users who prefer reduced motion */
@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;
  }
}

/* ===== Print Styles ===== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 2cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ===== Custom Utilities (Project-Specific) ===== */
/* 손글씨 폰트 클래스 */
.font-handwriting {
  font-family: "Allura", cursive;
}

.font-dancing-script {
  font-family: "Dancing Script", cursive;
}

.font-great-vibes {
  font-family: "Great Vibes", cursive;
}

.font-pacifico {
  font-family: "Pacifico", cursive;
}

.font-satisfy {
  font-family: "Satisfy", cursive;
}

.font-caveat {
  font-family: "Caveat", cursive;
}

/* 한글 손글씨 폰트 */
.font-nanum-brush {
  font-family: "Nanum Brush Script", cursive;
}

.font-nanum-pen {
  font-family: "Nanum Pen Script", cursive;
}

.font-gaegu {
  font-family: "Gaegu", cursive;
}

/* ===== Component-Specific Overrides ===== */
/* 필요시 특정 컴포넌트에 대한 스타일 오버라이드를 여기에 추가 */
/* 예: Calendar, Table 등의 미세 조정 */

/* 모바일에서 테이블 레이아웃 고정 (화면 밖으로 넘어가지 않도록) */
@media (max-width: 639px) {
  .table-mobile-fixed {
    table-layout: fixed;
  }
}

/* 데스크톱에서 테이블 레이아웃 자동 (기본값이지만 명시적으로 설정) */
@media (min-width: 640px) {
  .table-mobile-fixed {
    table-layout: auto;
  }
}

/* 그리드선 숨기기 */
.hide-grid td,
.hide-grid th {
  border: none !important;
}

.hide-grid {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ===== End of Global Styles ===== */