.grid-main-container {
  position: relative;
}
/* ------------------- 전체 그리드 사이즈 유틸리티 클래스 시작 ------------------- */
.ag-grid-sm {
  width: 100% !important;
  height: 250px !important;
}

.ag-grid-md {
  width: 100% !important;
  height: 500px !important;
}
.ag-grid-lg {
  width: 100% !important;
  height: 600px !important;
}

.ag-grid-full {
  width: 100% !important;
  height: 100vh !important;
}
.ag-grid-200 {
  width: 100% !important;
  height: 300px !important;
}
/* pageLayout의 padding-top 36px를 뺀 값 */
.ag-grid-268 {
  width: 100% !important;
  height: 268px !important; /* 300 - 36 */
}
.ag-grid-300 {
  width: 100% !important;
  height: 300px !important;
}
.ag-grid-400 {
  width: 100% !important;
  height: 400px !important;
}
.ag-grid-auto {
  width: 100% !important;
  height: 150px;
}
/* ------------------- 전체 그리드 사이즈 유틸리티 클래스 끝 ------------------- */

/* ---------------------- 그리드 내부 스타일링 시작 ---------------------- */
/* 버튼 간격 조정 */
.ag-cell button {
  margin-right: 0.3rem;
}

.ag-cell button:last-child {
  margin-right: 0;
}

/* 그리드 라운드 처리 */
.ag-theme-alpine {
  --ag-border-radius: 0.875rem !important;
}

/* AG Grid 헤더 가운데 정렬 */
.ag-header-center .ag-header-cell-label {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 그룹셀용 헤더 가운데정렬 추가 */
.ag-header-center > .ag-header-cell-comp-wrapper {
  justify-content: center;
  align-items: center;
}
.date-input-group label {
  font-size: 11px;
  color: #666;
  margin-bottom: 2px;
  font-weight: 500;
}

/* 그리드 셀 링크 스타일 */
.ag-cell-anchor {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 그리드 셀 링크 호버 스타일 */
.ag-cell-anchor:hover {
  font-weight: bold;
}

/* 헤더 여러 줄 허용 스타일 */
.multi-line-header {
  white-space: pre-line !important; /* \n 줄바꿈 허용 */
  text-align: center;
  line-height: 1.2;
}

/* 고정된 컬럼 스타일 - 단색 배경과 그림자로 구분 */
.ag-pinned-left-header,
.ag-pinned-right-header {
  background-color: #f0f4f8 !important;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.ag-pinned-left-cols-container,
.ag-pinned-right-cols-container {
  background-color: #f0f4f8 !important;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.ag-pinned-right-header {
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ag-pinned-right-cols-container {
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ag-pinned-left-header .ag-header-cell,
.ag-pinned-right-header .ag-header-cell {
  background-color: #f0f4f8 !important;
}

.ag-pinned-left-cols-container .ag-cell,
.ag-pinned-right-cols-container .ag-cell {
  background-color: #f0f4f8 !important;
}

/* 고정된 컬럼과 일반 컬럼 사이 구분선 */
.ag-pinned-left-header::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background-color: #cbd5e0;
  z-index: 10;
}

.ag-pinned-right-header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #cbd5e0;
  z-index: 10;
}

.ag-pinned-left-cols-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background-color: #cbd5e0;
  z-index: 10;
}

.ag-pinned-right-cols-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #cbd5e0;
  z-index: 10;
}
/* ---------------------- 그리드 내부 스타일링 끝 ---------------------- */

/* ------------------- 페이지네이션 스타일 시작 ------------------- */

/* 페이지네이션 전체 패널 스타일 */
.ag-paging-panel {
  display: flex;
  align-items: center;
  justify-content: center !important;
  background: var(--ag-header-background-color);
  transform: translateY(50px);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ag-paging-panel.custom-ready {
  opacity: 1;
  transform: translateY(0);
}
.ag-paging-page-size {
  display: none;
}
.ag-paging-row-summary-panel {
  display: none;
}
/* 페이지 번호 버튼 컨테이너 */
.ag-paging-description {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-btn {
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border: 1px solid #ddd !important;
  cursor: pointer !important;
  margin: 0 2px !important;
  position: relative !important;
  overflow: hidden !important;
}
.page-btn.active {
  background: #f8f9fa;
  border-color: #f8f9fa !important;
  background-image: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%, #f8f9fa 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: #495057 !important;
  border-color: #9ca3af !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: shimmer 3s linear infinite;
}
.page-btn:hover {
  background: #f8f9fa;
  transition: all 0.2s ease;
}
.page-btn.active:hover {
  box-shadow: 0 0 0 1px #9ca3af;
  transition: all 0.2s ease;
}
.page-btn:active:not(:disabled),
.ag-paging-button:active:not(.ag-disabled) {
  background: linear-gradient(45deg, #d1d5db, #f3f4f6) !important;
  background-position: 200% 0%;
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  border-color: #6b7280 !important;
  transition: all 0.1s ease !important;
}
.page-btn:disabled {
  background: #f3f4f6 !important ;
  cursor: not-allowed;
}
/* 모든 페이지네이션 버튼 기본 스타일 */
.ag-paging-panel button,
.ag-paging-panel .ag-paging-button {
  width: 36px;
  height: 36px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: all 0.15s ease;
  margin: 0 2px;
  padding: 0;
  min-width: 36px;
  text-align: center;
  line-height: 1;
  transition: border-color 0.2s ease;
}
.ag-button.ag-paging-button.ag-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
}
.ag-icon::before,
.ag-icon::after {
  display: none !important;
}

/* Sort 아이콘 기본 표시 - sortable 컬럼에 항상 아이콘 표시 */
.ag-header-cell-sortable .ag-sort-indicator-container {
  display: flex !important;
}

/* agGrid 기본 padding-left를 margin-left로 변경 */
.ag-ltr .ag-sort-indicator-icon {
  padding-left: 0 !important;
  margin-left: var(--ag-grid-size, 4px) !important;
}

/* 기본 상태(sortable이지만 정렬 안 된 상태)에서도 아이콘 표시 */
.ag-header-cell-sortable:not(.ag-header-cell-sorted) .ag-sort-none-icon {
  display: inline-block !important;
  opacity: 1;
  transition: all 0.2s ease;
}

/* Sort 버튼 hover 스타일 - 배경색 및 아이콘 컬러 변경 */
.ag-header-cell-sortable:hover .ag-sort-indicator-icon {
  border-radius: 0.3rem;
  background-color: #e6e6e68a;
}

.ag-header-cell-sortable:hover .ag-sort-none-icon .ag-icon,
.ag-header-cell-sortable:hover .ag-sort-ascending-icon .ag-icon,
.ag-header-cell-sortable:hover .ag-sort-descending-icon .ag-icon {
  color: #007bff !important;
}

/* Sort 아이콘 공통 스타일 - 필터 아이콘 스타일과 동일 */
.ag-header-cell-sortable .ag-sort-none-icon .ag-icon,
.ag-header-cell-sortable .ag-sort-ascending-icon .ag-icon,
.ag-header-cell-sortable .ag-sort-descending-icon .ag-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 22px !important;
  height: 22px !important;
}

.ag-header-cell-sortable .ag-sort-none-icon .ag-icon::after,
.ag-header-cell-sortable .ag-sort-none-icon .ag-icon::before,
.ag-header-cell-sortable .ag-sort-ascending-icon .ag-icon::after,
.ag-header-cell-sortable .ag-sort-ascending-icon .ag-icon::before,
.ag-header-cell-sortable .ag-sort-descending-icon .ag-icon::after,
.ag-header-cell-sortable .ag-sort-descending-icon .ag-icon::before {
  display: block !important;
}

/* Sort none 아이콘 - import_export */
.ag-header-cell-sortable .ag-sort-none-icon .ag-icon::before {
  font-family: 'Material Icons Outlined' !important;
  content: 'import_export' !important;
  font-size: 18px !important;
  transition: all 0.3s ease;
}

/* Sort ascending 아이콘 - arrow_upward */
.ag-header-cell-sortable .ag-sort-ascending-icon:not(.ag-hidden) .ag-icon::before {
  font-family: 'Material Icons Outlined' !important;
  content: 'arrow_upward' !important;
  font-size: 18px !important;
  transition: all 0.3s ease;
}

/* Sort descending 아이콘 - arrow_downward */
.ag-header-cell-sortable .ag-sort-descending-icon:not(.ag-hidden) .ag-icon::before {
  font-family: 'Material Icons Outlined' !important;
  content: 'arrow_downward' !important;
  font-size: 18px !important;
  transition: all 0.3s ease;
}

/* 정렬이 활성화된 경우(asc, desc) none 아이콘 숨기기 */
.ag-header-cell-sorted .ag-sort-none-icon {
  display: none !important;
}

/* 정렬 아이콘이 표시되는 경우 none 아이콘 숨기기 */
.ag-header-cell-sortable .ag-sort-ascending-icon:not(.ag-hidden) ~ .ag-sort-none-icon,
.ag-header-cell-sortable .ag-sort-descending-icon:not(.ag-hidden) ~ .ag-sort-none-icon,
.ag-header-cell-sortable .ag-sort-mixed-icon:not(.ag-hidden) ~ .ag-sort-none-icon {
  display: none !important;
}

/* Sort 활성화 스타일 - 필터 활성화와 동일 */
.ag-header-cell-sorted .ag-sort-indicator-icon,
.ag-header-cell-sortable .ag-sort-ascending-icon:not(.ag-hidden),
.ag-header-cell-sortable .ag-sort-descending-icon:not(.ag-hidden) {
  --sort-active-color: #bbdbf1;
  border-radius: 0.3rem;
  background-color: var(--sort-active-color);
  animation: sortActive 1s ease-in-out infinite;
}

/* Sort 활성화 시 아이콘 컬러 파란색 */
.ag-header-cell-sorted .ag-sort-ascending-icon .ag-icon,
.ag-header-cell-sorted .ag-sort-descending-icon .ag-icon,
.ag-header-cell-sortable .ag-sort-ascending-icon:not(.ag-hidden) .ag-icon,
.ag-header-cell-sortable .ag-sort-descending-icon:not(.ag-hidden) .ag-icon {
  color: #007bff !important;
}

@keyframes sortActive {
  0% {
    background-color: var(--sort-active-color);
  }
  50% {
    background-color: transparent;
  }
  100% {
    background-color: var(--sort-active-color);
  }
}

/* 페이지네이션 아이콘 공통 스타일 */
.ag-icon.ag-icon-previous,
.ag-icon.ag-icon-next,
.ag-icon.ag-icon-first,
.ag-icon.ag-icon-last {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  text-align: center !important;
  line-height: 20px !important;
}
/* 이전/첫 페이지 버튼 아이콘 */
.ag-icon.ag-icon-first {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%757575'%3E%3Cpath d='M440-240 200-480l240-240 56 56-183 184 183 184-56 56Zm264 0L464-480l240-240 56 56-183 184 183 184-56 56Z'/%3E%3C/svg%3E") !important;
}
.ag-icon.ag-icon-previous {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%757575'%3E%3Cpath d='M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z'/%3E%3C/svg%3E") !important;
}
/* 다음/마지막 페이지 버튼 아이콘 */
.ag-icon.ag-icon-last {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%757575'%3E%3Cpath d='M440-240 200-480l240-240 56 56-183 184 183 184-56 56Zm264 0L464-480l240-240 56 56-183 184 183 184-56 56Z'/%3E%3C/svg%3E") !important;
  transform: rotate(180deg) !important;
  transform-origin: center center !important;
  position: relative !important;
  left: 0px !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}
.ag-icon.ag-icon-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%757575'%3E%3Cpath d='M400-240 160-480l240-240 56 56-184 184 184 184-56 56Z'/%3E%3C/svg%3E") !important;
  transform: rotate(180deg) !important;
  transform-origin: center center !important;
  position: relative !important;
  left: -2px !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

/* ------------------- 페이지네이션 스타일 끝 ------------------- */

/* ------------------- 커스텀 필터 UI 스타일 시작 ------------------- */

/* 필터 팝오버 부모 컨테이너 - 스크롤 제한 : 나중에 쓸 수도 있어서 주석처리 */
/* .ag-menu.ag-filter-menu.ag-ltr.ag-popup-child.ag-popup-positioned-under {
  overflow: hidden;
} */

/* 필터 컨테이너 z-index 조정 */
.ag-popup-child {
  z-index: 99999 !important;
}

.ag-menu.ag-filter-menu {
  animation: filterPopoverEnter 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 전체 필터 컨테이너 너비 */
.custom-filter-container {
  width: auto !important;
}

/* 스크롤 생성 방지 */
.filter-select-group {
  overflow-y: hidden;
}

/* inner에서 스크롤 생성 (체크박스 타입 필터 대응) */
.custom-filter-inner {
  max-height: 300px;
  overflow-y: auto;
}

/* 필터 버튼 및 아이콘 스타일 */
.ag-header-cell-filter-button:hover {
  border-radius: 0.3rem;
  background-color: #e6e6e68a;
}
/* 필터 버튼 아이콘 스타일 */
.ag-icon.ag-icon-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
}
.ag-icon.ag-icon-filter::after,
.ag-icon.ag-icon-filter::before {
  display: block !important;
}
.ag-filter-active {
  --filter-active-color: #bbdbf1;
  border-radius: 0.3rem;
  background-color: var(--filter-active-color);
  animation: filterActive 1s ease-in-out infinite;
}
@keyframes filterActive {
  0% {
    background-color: var(--filter-active-color);
  }
  50% {
    background-color: transparent;
  }
  100% {
    background-color: var(--filter-active-color);
  }
}
.ag-icon.ag-icon-filter::before {
  font-family: 'Material Icons';
  content: 'manage_search';
  font-size: 22px;
  transition: all 0.3s ease;
}

/* 필터 타이틀 스타일 */
.custom-filter-container .filter-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #666666;
}
.custom-filter-container .filter-title-icon {
  font-size: 22px;
  text-align: center;
  color: #666666;
}

/* 커스텀 필터 내부 컨테이너 */
.custom-filter-container .custom-filter-inner {
  padding: 12px;
}

/* 검색 입력 필드 스타일 */
.custom-filter-container .filter-search {
  position: relative;
}

.custom-filter-container .filter-search-input {
  padding-left: 35px !important; /* 돋보기 아이콘 공간 확보 */
  position: relative;
}

/* 돋보기 아이콘 */
.custom-filter-container .filter-search::before {
  content: 'search';
  font-family: 'Material Icons';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666666;
  font-size: 18px;
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s ease;
}

/* 체크박스 크기 및 스타일 개선 - 모든 체크박스 통일 */
.custom-filter-container .checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0; /* box-shadow 잘림 방지를 위한 패딩 */
}

.custom-filter-container .form-check-input {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
  margin: 0;
}

.custom-filter-container .form-check-label {
  cursor: pointer;
}

/* 전체 선택 체크박스 - 다른 체크박스와 동일하게 */
.custom-filter-container .select-all-checkbox {
  width: 18px !important;
  height: 18px !important;
}

.custom-filter-container .select-all-checkbox + .form-check-label {
  font-weight: 600;
  font-size: 12px !important;
}

/* 체크박스 호버 및 포커스 효과 */
.custom-filter-container .form-check-input:hover {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.custom-filter-container .form-check-input:focus {
  border-color: #b180f5;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(98, 0, 234, 0.25);
}

.custom-filter-container .form-check-input:checked {
  background-color: #007bff;
  border-color: #007bff;
}

/* 체크박스 라벨 호버 효과 */
.custom-filter-container .form-check:hover .form-check-label {
  color: #007bff;
}

/* 필터 버튼 컨테이너 */
.filter-buttons {
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
}

/* 숨겨진 select (접근성용) */
.filter-type {
  display: none;
}

@keyframes filterPopoverEnter {
  from {
    opacity: 0;
    transform: scale(0.8) perspective(500px) rotateX(-15deg) rotateY(-5deg);
  }
  to {
    opacity: 1;
    transform: scale(1) perspective(500px) rotateX(0deg) rotateY(0deg);
  }
}

/* ------------------- 커스텀 필터 UI 스타일 끝 ------------------- */

/* ------------- 그리드 컨테이너 focus animation 시작 ---------------- */

.ag-theme-alpine:focus {
  border-radius: 14px;
  animation: target-grid-focus 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes target-grid-focus {
  from {
    border-color: #b180f5;
    box-shadow: 0 0 0 0.25rem rgba(98, 0, 234, 0.25);
  }
  to {
    border-color: var(--ag-border-color);
    box-shadow: none;
  }
}
/* ------------- 그리드 컨테이너 focus animation 끝 ---------------- */
/* 마지막 컬럼에서만 아이콘과 텍스트 순서를 바꾼다 */
/* 필터 아이콘을 앞으로 */
/* .ag-column-last .ag-cell-label-container .ag-header-cell-filter-button {
  position: static !important;
  order: 1;
} */
/* 텍스트/정렬 등을 뒤로 */
/* .ag-column-last .ag-cell-label-container .ag-header-cell-label {
  order: -1;
} */