path: root/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    --background: 0 0% 100% !important;
    --foreground: 222.2 84% 4.9% !important;
    --card: 0 0% 100% !important;
    --card-foreground: 222.2 84% 4.9% !important;
    --popover: 0 0% 100% !important;
    --popover-foreground: 222.2 84% 4.9% !important;
    --primary: 222.2 47.4% 11.2% !important;
    --samsung: 222.2 47.4% 11.2% !important;
    --primary-foreground: 210 40% 98% !important;
    --secondary: 210 40% 96.1% !important;
    --secondary-foreground: 222.2 47.4% 11.2% !important;
    --muted: 210 40% 96.1% !important;
    --muted-foreground: 215.4 16.3% 46.9% !important;
    --accent: 210 40% 96.1% !important;
    --accent-foreground: 222.2 47.4% 11.2% !important;
    --destructive: 0 84.2% 60.2% !important;
    --destructive-foreground: 210 40% 98% !important;
    /* --border: 214.3 31.8% 91.4% !important; */
    --border: 0 0% 79% !important;
    --input: 214.3 31.8% 91.4% !important;
    --ring: 222.2 84% 4.9% !important;
    --chart-1: 12 76% 61% !important;
    --chart-2: 173 58% 39% !important;
    --chart-3: 197 37% 24% !important;
    --chart-4: 43 74% 66% !important;
    --chart-5: 27 87% 67% !important;
    --radius: 0.5rem !important;
    --sidebar-background: 0 0% 98% !important;
    --sidebar-foreground: 240 5.3% 26.1% !important;
    --sidebar-primary: 240 5.9% 10% !important;
    --sidebar-primary-foreground: 0 0% 98% !important;
    --sidebar-accent: 240 4.8% 95.9% !important;
    --sidebar-accent-foreground: 240 5.9% 10% !important;
    --sidebar-border: 220 13% 91% !important;
    --sidebar-ring: 217.2 91.2% 59.8% !important;
  }
  .dark {
    --background: 222.2 84% 4.9% !important;
    --foreground: 210 40% 98% !important;
    --card: 222.2 84% 4.9% !important;
    --card-foreground: 210 40% 98% !important;
    --popover: 222.2 84% 4.9% !important;
    --popover-foreground: 210 40% 98% !important;
    --primary: 210 40% 98% !important;
    --primary-foreground: 222.2 47.4% 11.2% !important;
    --secondary: 217.2 32.6% 17.5% !important;
    --secondary-foreground: 210 40% 98% !important;
    --muted: 217.2 32.6% 17.5% !important;
    --muted-foreground: 215 20.2% 65.1% !important;
    --accent: 217.2 32.6% 17.5% !important;
    --accent-foreground: 210 40% 98% !important;
    --destructive: 0 62.8% 30.6% !important;
    --destructive-foreground: 210 40% 98% !important;
    --border: 217.2 32.6% 17.5% !important;
    --input: 217.2 32.6% 17.5% !important;
    --ring: 212.7 26.8% 83.9% !important;
    --chart-1: 220 70% 50% !important;
    --chart-2: 160 60% 45% !important;
    --chart-3: 30 80% 55% !important;
    --chart-4: 280 65% 60% !important;
    --chart-5: 340 75% 55% !important;
    --sidebar-background: 240 5.9% 10% !important;
    --sidebar-foreground: 240 4.8% 95.9% !important;
    --sidebar-primary: 224.3 76.3% 48% !important;
    --sidebar-primary-foreground: 0 0% 100% !important;
    --sidebar-accent: 240 3.7% 15.9% !important;
    --sidebar-accent-foreground: 240 4.8% 95.9% !important;
    --sidebar-border: 240 3.7% 15.9% !important;
    --sidebar-ring: 217.2 91.2% 59.8% !important;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    @apply scroll-smooth;
  }
  body {
    @apply bg-background text-foreground overscroll-none;
    /* font-feature-settings: "rlig" 1, "calt" 1; */
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }

  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
    [data-wrapper] {
      @apply min-[1800px]:border-t;
    }
  }
  /* Custom scrollbar styling. Thanks @pranathiperii. */
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 5px;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
}

@layer utilities {
  .step {
    counter-increment: step;
  }

  .step:before {
    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
    @apply ml-[-50px] mt-[-4px];
    content: counter(step);
  }

  .chunk-container {
    @apply shadow-none;
  }

  .chunk-container::after {
    content: "";
    @apply absolute -inset-4 shadow-xl rounded-xl border;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .border-grid {
    @apply border-border/30 dark:border-border;
  }

  .container-wrapper {
    /* 원본 */
    /* @apply min-[1800px]:max-w-[1800px] min-[1800px]:border-x border-border/30 dark:border-border mx-auto w-full; */
    @apply border-x border-border/30 dark:border-border mx-auto px-12 w-full;
    
    /* 추가 breakpoint */
    /* @apply min-[2200px]:max-w-[2000px];
    @apply min-[2600px]:max-w-[2400px]; */
  }

  .container {
    /* 원본 */
    /* @apply px-4 xl:px-6 2xl:px-4 mx-auto max-w-[1800px]; */
    /* @apply px-4 xl:px-6 2xl:px-4 mx-auto; */
    @apply min-w-full mx-auto;
    

  }

}

.MuiTreeItem-label{
  font-size: 0.875rem!important;
}

.pdftron-container {
  all: unset !important;
}

/* 읽기 전용 셀 기본 스타일 */
.read-only-cell {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
  border-left: 2px solid #ddd;
  user-select: none;
}

/* 읽기 전용 셀 호버 효과 */
.read-only-cell:hover {
  background-color: #eaeaea;
}

/* 테이블 헤더에서 읽기 전용 컬럼 표시 (선택 사항) */
th[data-read-only="true"] {
  background-color: #f0f0f0;
  font-style: italic;
}

/* 읽기 전용 필드를 색상으로 구분 - 폼에서도 사용 가능 */
.form-field-read-only {
  background-color: #f5f5f5 !important;
  border-color: #ddd !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}

/* 선택적: 편집 화면으로 이동 시 읽기 전용 필드 강조 */
.edit-mode .read-only-cell {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

@layer components {
  .tbl-compact thead th { @apply px-2 py-1 text-xs font-semibold; }
  .tbl-compact tbody td { @apply px-2 py-1 text-xs align-middle; }
  .tbl-compact tbody tr { @apply hover:bg-muted/40; } /* 선택 */
  /* 필요시 행 높이 제한 */
  .tbl-compact tbody tr > * { @apply h-8; }           /* 32 px 정도 */
}

/* 그룹 컬럼 구분선 스타일 */
.group-column-border {
  position: relative;
}

.group-column-border::before,
.group-column-border::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e2e8f0;
}

.group-column-border::before {
  left: -1px;
}

.group-column-border::after {
  right: -1px;
}

/* 그룹 헤더 스타일 */
.group-header {
  background-color: hsl(var(--muted) / 0.3);
  font-weight: 600;
  border-left: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
}

/* Toast UI Editor 테이블 스타일 커스터마이징 */
/* 에디터 내부 (편집 중) */
.toastui-editor-contents table {
  border-collapse: collapse;
  width: 100%;
}

.toastui-editor-contents table thead th {
  background-color: transparent !important; /* 헤더 배경 제거 */
  border: 1px solid hsl(var(--border));
  padding: 8px;
  text-align: left;
  font-weight: 600; /* 원하는 경우 폰트 굵기 조정 */
}

.toastui-editor-contents table tbody td {
  border: 1px solid hsl(var(--border));
  padding: 8px;
}

.toastui-editor-contents table tbody tr:hover {
  background-color: hsl(var(--muted) / 0.3);
}

/* 미리보기 및 렌더링된 콘텐츠에도 동일한 스타일 적용 */
.toastui-editor-ww-mode table thead th,
.toastui-editor-md-mode table thead th {
  background-color: transparent !important;
}