/* 기본 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 한글 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 로그인 화면 중앙 정렬을 위해 min-width 제거 */
}

/* 로그인 이후 메인 화면에만 min-width 적용 */
body.logged-in {
  min-width: 1400px;
}

/* #app 컨테이너는 항상 전체 너비 */
#app {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 컨테이너 최대 너비 확장 */
.container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* 커스텀 체크박스 */
.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.form-checkbox:checked {
  background-color: #10b981;
  border-color: #10b981;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 모달 애니메이션 */
#modal {
  animation: fadeIn 0.2s ease-in-out;
}

/* 로딩 스피너 */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 버튼 호버 효과 */
button {
  transition: all 0.2s ease-in-out;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

button:active {
  transform: translateY(0);
}

/* 입력 포커스 효과 */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 구분 (현장/사전) 색상 스타일 */
select[oninput*="registrationType"] option[value="현장"] {
  background-color: #2563eb;
  color: white;
}

select[oninput*="registrationType"] option[value="사전"] {
  background-color: #4b5563;
  color: white;
}

/* 선택된 구분 값에 따른 배경색 */
select[oninput*="registrationType"] {
  font-weight: 500;
}

/* 교육과정 옵션 색상 */
select option[value="신규교육"] {
  background-color: #dbeafe;
  color: #1e3a8a;
}

select option[value="행정처분교육"] {
  background-color: #fee2e2;
  color: #991b1b;
}

select option[value="위생관리책임자변경"] {
  background-color: #dcfce7;
  color: #14532d;
}

/* 직책 옵션 색상 */
select option[value="대표자"] {
  background-color: #f3e8ff;
  color: #581c87;
}

select option[value="위생관리책임자"] {
  background-color: #ccfbf1;
  color: #115e59;
}

/* select 박스 공통 스타일 */
select {
  font-weight: 500;
  /* 드롭다운을 우측으로 열림 (가능한 경우) */
  direction: ltr;
}

/* 모든 select 박스를 우측으로 정렬 시도 */
select option {
  direction: ltr;
  text-align: left;
}

/* 드롭다운 스크롤 스타일 */
.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f7fafc;
}

/* 빠른 추가 폼 강조 */
.bg-gradient-to-r {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 탭 전환 효과 */
.nav-tab {
  transition: all 0.2s ease-in-out;
}

/* 반응형 */
@media (max-width: 768px) {
  table {
    font-size: 0.875rem;
  }
  
  th, td {
    padding: 0.5rem !important;
  }
  
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 유효성 검증 애니메이션 */
@keyframes shake-error {
  0%, 100% {
    transform: translateX(0);
    border-color: #ef4444;
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-3px);
    border-color: #dc2626;
  }
  20%, 40%, 60%, 80% {
    transform: translateX(3px);
    border-color: #ef4444;
  }
}

.validation-error {
  animation: shake-error 0.5s ease-in-out;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* 업로드 알림 애니메이션 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.animate-slide-in {
  animation: slideInRight 0.3s ease-out;
}

.animate-slide-out {
  animation: slideOutRight 0.3s ease-in;
}

@media print {
  body {
    background: white;
  }
  
  .no-print {
    display: none !important;
  }
}