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

/* ===== POP (Production Operation Panel) Styles ===== */

/* POP 전용 다크 테마 변수 */
.pop-dark {
  /* 배경 색상 */
  --pop-bg-deepest: 8 12 21;
  --pop-bg-deep: 10 15 28;
  --pop-bg-primary: 13 19 35;
  --pop-bg-secondary: 18 26 47;
  --pop-bg-tertiary: 25 35 60;
  --pop-bg-elevated: 32 45 75;

  /* 네온 강조색 */
  --pop-neon-cyan: 0 212 255;
  --pop-neon-cyan-bright: 0 240 255;
  --pop-neon-cyan-dim: 0 150 190;
  --pop-neon-pink: 255 0 102;
  --pop-neon-purple: 138 43 226;

  /* 상태 색상 */
  --pop-success: 0 255 136;
  --pop-success-dim: 0 180 100;
  --pop-warning: 255 170 0;
  --pop-warning-dim: 200 130 0;
  --pop-danger: 255 51 51;
  --pop-danger-dim: 200 40 40;

  /* 텍스트 색상 */
  --pop-text-primary: 255 255 255;
  --pop-text-secondary: 180 195 220;
  --pop-text-muted: 100 120 150;

  /* 테두리 색상 */
  --pop-border: 40 55 85;
  --pop-border-light: 55 75 110;
}

/* POP 전용 라이트 테마 변수 */
.pop-light {
  --pop-bg-deepest: 245 247 250;
  --pop-bg-deep: 240 243 248;
  --pop-bg-primary: 250 251 253;
  --pop-bg-secondary: 255 255 255;
  --pop-bg-tertiary: 245 247 250;
  --pop-bg-elevated: 235 238 245;

  --pop-neon-cyan: 0 122 204;
  --pop-neon-cyan-bright: 0 140 230;
  --pop-neon-cyan-dim: 0 100 170;
  --pop-neon-pink: 220 38 127;
  --pop-neon-purple: 118 38 200;

  --pop-success: 22 163 74;
  --pop-success-dim: 21 128 61;
  --pop-warning: 245 158 11;
  --pop-warning-dim: 217 119 6;
  --pop-danger: 220 38 38;
  --pop-danger-dim: 185 28 28;

  --pop-text-primary: 15 23 42;
  --pop-text-secondary: 71 85 105;
  --pop-text-muted: 148 163 184;

  --pop-border: 226 232 240;
  --pop-border-light: 203 213 225;
}

/* POP 배경 그리드 패턴 */
.pop-bg-pattern::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.pop-light .pop-bg-pattern::before {
  background: repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
}

/* POP 글로우 효과 */
.pop-glow-cyan {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
}

.pop-glow-cyan-strong {
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5), 0 0 50px rgba(0, 212, 255, 0.3);
}

.pop-glow-success {
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

.pop-glow-warning {
  box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}

.pop-glow-danger {
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
}

/* POP 펄스 글로우 애니메이션 */
@keyframes pop-pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.4);
  }
}

.pop-animate-pulse-glow {
  animation: pop-pulse-glow 2s ease-in-out infinite;
}

/* POP 프로그레스 바 샤인 애니메이션 */
@keyframes pop-progress-shine {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.pop-progress-shine::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
  animation: pop-progress-shine 1.5s ease-in-out infinite;
}

/* POP 스크롤바 스타일 */
.pop-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.pop-scrollbar::-webkit-scrollbar-track {
  background: rgb(var(--pop-bg-secondary));
}

.pop-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(var(--pop-border-light));
  border-radius: 9999px;
}

.pop-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--pop-neon-cyan-dim));
}

/* POP 스크롤바 숨기기 */
.pop-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.pop-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Marching Ants Animation (Excel Copy Border) ===== */
@keyframes marching-ants-h {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 16px 0;
  }
}

@keyframes marching-ants-v {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 16px;
  }
}

.animate-marching-ants-h {
  background: repeating-linear-gradient(
    90deg,
    hsl(var(--primary)) 0,
    hsl(var(--primary)) 4px,
    transparent 4px,
    transparent 8px
  );
  background-size: 16px 2px;
  animation: marching-ants-h 0.4s linear infinite;
}

.animate-marching-ants-v {
  background: repeating-linear-gradient(
    180deg,
    hsl(var(--primary)) 0,
    hsl(var(--primary)) 4px,
    transparent 4px,
    transparent 8px
  );
  background-size: 2px 16px;
  animation: marching-ants-v 0.4s linear infinite;
}

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