@charset "UTF-8";

/**
 * --------------------------------------------------------------------------
 * TUI Grid Custom Styles
 * --------------------------------------------------------------------------
 */

/* ==========================================================================
   1. Container & Base Layout
   ========================================================================== */
.tui-grid-container {
  font-family: "Pretendard", "Noto Sans KR", sans-serif !important;
  font-size: 14px !important;
  border: none !important;
  background-color: var(--bg-card) !important;
}

/* 불필요한 내부 보더 라인 모두 숨김 (하얀색 라인 노출 원인) */
.tui-grid-border-line,
.tui-grid-scrollbar-y-inner-border,
.tui-grid-scrollbar-x-inner-border,
.tui-grid-scrollbar-border,
.tui-grid-scrollbar-y-outer-border,
.tui-grid-scrollbar-frozen-border {
  display: none !important;
}

.tui-grid-content-area,
.tui-grid-table {
  border: none !important;
}

/* ==========================================================================
   2. Header Area
   ========================================================================== */
.tui-grid-header-area {
  background-color: var(--grid-header-bg) !important;
  border-width: 0 0 1px !important;
  border-style: solid !important;
  border-color: var(--border-color) !important;
}

.tui-grid-cell.tui-grid-cell-header {
  background-color: var(--grid-header-bg) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-color: var(--border-color) !important;
  border-bottom: 0;
  user-select: none !important;
}

.tui-grid-cell-row-header {
  background-color: var(--bg-card) !important;
  border-right: none !important;
}

.tui-grid-cell-row-header.tui-grid-cell-header {
  background-color: var(--grid-header-bg) !important;
}

/* ==========================================================================
   3. Body Area & Cells
   ========================================================================== */
/* 스크롤바 영역 및 바디 영역 배경색 투명화 */
.tui-grid-scrollbar-right-top,
.tui-grid-scrollbar-right-bottom,
.tui-grid-scrollbar-left-bottom,
.tui-grid-body-area,
.tui-grid-rside-area,
.tui-grid-lside-area {
  background-color: var(--bg-card) !important;
  border: none !important;
}

.tui-grid-body-area {
  overflow: auto;
  border-top: 1px solid var(--border-color) !important;
}

.tui-grid-cell {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  border-width: 0 0 1px 0 !important;
}

.tui-grid-cell .tui-grid-cell-content {
  padding: 0 12px !important;
}

.tui-grid-row-hover .tui-grid-cell {
  background-color: var(--hover-bg) !important;
}

/* 셀 포커스 */
.tui-grid-layer-focus-border {
  background-color: var(--primary-color) !important;
}

/* 3. [1번째: 좌측선] 오른쪽으로 굵어지므로 그대로 둠 */
.tui-grid-layer-focus-border:nth-child(1) {
  width: 2px !important;
}

/* 4. [2번째: 상단선] 아래쪽으로 굵어지므로 그대로 둠 */
.tui-grid-layer-focus-border:nth-child(2) {
  height: 2px !important;
}

/* 5. [3번째: 우측선] 오른쪽으로 삐져나가는 3px을 왼쪽(안쪽)으로 2px 강제 견인 */
.tui-grid-layer-focus-border:nth-child(3) {
  width: 2px !important;
  margin-left: -1px !important;
}

/* 6. [4번째: 하단선] 아래쪽으로 삐져나가는 3px을 위쪽(안쪽)으로 2px 강제 견인 */
.tui-grid-layer-focus-border:nth-child(4) {
  height: 2px !important;
  margin-top: -1px !important;
}


/* 선택 영역(Selection) */
.tui-grid-layer-selection {
  /* 1. 기본 설정 */
  border: none !important;
  background-color: rgba(0, 104, 178, 0.05) !important;
  opacity: 1 !important;

  /* 2. 3px 인셋 보더 (늘어난 패딩 영역까지 자동으로 채워짐) */
  box-shadow: inset 0 0 0 2px var(--primary-color) !important;

  /* 3. 박스 모델 변경 및 하단/우측 1px 확장 */
  /* content-box는 TUI가 넣은 width/height를 '순수 콘텐츠' 크기로 고정하고,
     패딩만큼 박스를 바깥(우측/하단)으로 키워줍니다. */
  box-sizing: content-box !important;
  padding-bottom: 1px !important; /* 하단 갭 메움 */
  padding-right: 1px !important; /* 우측 갭 메움 */

  /* 4. 레이어 우선순위 및 이벤트 설정 */
  z-index: 999 !important;
  pointer-events: none !important;
}


/* 다중 셀 선택 상태일 때 단일 포커스 보더 숨김 처리 */
.is-multi-selected .tui-grid-layer-focus-border {
  display: none !important;
}


/* 에디터 내부 입력창(Input, Textarea) 스타일 정밀 제어 */
.tui-grid-content-text {
  border: none !important; /* 입력창 테두리 제거 */
  outline: none !important; /* 포커스 시 발생하는 브라우저 외곽선 제거 */
  box-shadow: none !important; /* 그림자 효과 제거 */

  /* 폰트 종류 및 사이즈 변경 */
  font-family: "Pretendard", "Noto Sans KR", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #333;

  /* 셀 내부 텍스트 위치 보정 (중앙 정렬 등) */
  padding: 0 1px !important;
  height: 100% !important; /* 셀 높이에 꽉 차게 설정 */
  width: 100% !important;
}

/* 에디팅 중일때 */
.tui-grid-layer-editing {
  border-color: var(--primary-color) !important;
}

/* ==========================================================================
   4. Scrollbar
   ========================================================================== */
.tui-grid-scrollbar-right-top {
  width: 17px;
  background-color: var(--grid-header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.tui-grid-scrollbar-left-bottom {
  height: auto;
}

.tui-grid-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border: 3px solid transparent !important;
  background-clip: content-box !important;
  border-radius: 10px !important;
}

/* ==========================================================================
   5. Icons
   ========================================================================== */
.tui-grid-btn-sorting {
  background: none !important;
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  background-color: var(--text-tertiary) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E") !important;
}

.tui-grid-btn-sorting.tui-grid-btn-sorting-up,
.tui-grid-btn-sorting.tui-grid-btn-sorting-down {
  background-color: var(--primary-color) !important;
}

.tui-grid-btn-sorting.tui-grid-btn-sorting-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E") !important;
}

.tui-grid-btn-sorting.tui-grid-btn-sorting-down {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   6. Dark Mode Overrides
   ========================================================================== */
[data-theme="dark"] .tui-grid-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

[data-theme="dark"] .tui-grid-layer-state {
  background: transparent;
}


/* ==========================================================================
   TUI Grid Filter Layer (필터 팝업 버그 수정 및 다크모드 대응)
   ========================================================================== */

/* 1. Select 박스, Input, Textarea 삐져나옴 수정 (Box Sizing 강제 적용) */
.tui-grid-filter-container .tui-grid-filter-dropdown select,
.tui-grid-filter-container .tui-grid-filter-input,
.tui-grid-filter-container textarea {
  box-sizing: border-box !important;
  /*width: 100% !important;*/
  max-width: 100% !important;
}

/* 2. 다크모드 배경색 및 글자색 보정 (Textarea 포함) */
[data-theme="dark"] .tui-grid-filter-container {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
}

[data-theme="dark"] .tui-grid-filter-container select,
[data-theme="dark"] .tui-grid-filter-container input,
[data-theme="dark"] .tui-grid-filter-container textarea {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-filter-container .tui-grid-btn-filter,
[data-theme="dark"] .tui-grid-filter-container .tui-grid-btn-close {
  color: var(--text-primary);
}

/* 필터 팝업 내 화살표 아이콘 색상 반전 */
[data-theme="dark"] .tui-grid-filter-container .tui-grid-filter-dropdown select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f4f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ==========================================================================
   TUI Grid Filter List (필터 체크박스 리스트 다크모드 대응)
   ========================================================================== */
/* 1. 다크모드: 필터 리스트 아이템 기본 글자색 보정 */
[data-theme="dark"] .tui-grid-filter-list-container .tui-grid-filter-list-item {
  color: var(--text-primary) !important;
}

/* 2. 다크모드: 체크된 아이템의 배경색 보정 (눈부심 방지를 위해 투명도 적용) */
[data-theme="dark"] .tui-grid-filter-list .tui-grid-filter-list-item-checked {
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent) !important;
}

/* 3. 다크모드: 리스트 컨테이너 자체의 배경색 보정 (선택 사항, 스크롤 영역 배경) */
[data-theme="dark"] .tui-grid-filter-list-container {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}

/* ==========================================
   TUI Grid Custom Indicators
   ========================================== */

/* 1. 헤더 필수 입력 표시 (빨간 별표) */
.tui-grid-header-required::after {
  content: ' *';
  color: #FF4040;
  font-weight: bold;
  font-size: 13px;
}

/* 특정 행 하이라이트 */
.tui-grid-cell.highlight-row {
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent) !important;
  font-weight: bold !important;
  /* 텍스트는 가독성을 위해 Primary Color 원본 유지 */
  color: var(--primary-color) !important;
}

.tui-grid-cell.error-row {
  /* #3182f6의 RGB(49, 130, 246)에 투명도 10% 적용 (은은한 파스텔 핑크 배경) */
  background-color: rgba(255, 204, 204, 0.4) !important;
}

.tui-grid-cell.error-cell {
  /* #3182f6의 RGB(49, 130, 246)에 투명도 10% 적용 (은은한 파스텔 핑크 배경) */
  background-color: rgba(255, 204, 204, 0.4) !important;
  font-weight: bold !important;
  color: var(--danger-color) !important;
}


/* ==========================================================================
   7. Grid Column Settings (그리드 컬럼 개인화 설정)
   ========================================================================== */
/* 그리드 상단 설정 바 (동적 생성됨) */
.tui-grid-settings-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  position: relative;
}

.grid-settings-wrap { position: relative; display: inline-block; }

/* 아이콘 버튼 */
.grid-settings-wrap .btn-icon-only {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.grid-settings-wrap .btn-icon-only:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
  border-radius: var(--radius-base);
}

/* 레이어 팝업 (다크모드 대응) */
.grid-settings-layer {
  display: none;
  position: absolute;
  top: 100%; /* 기본 아래로 열림 */
  right: 0;
  margin-top: 4px;
  width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-base);
  z-index: 9999; /* 그리드보다 높게 설정 */
  padding: 12px;
}
.grid-settings-layer.active { display: block; }

/* 동적 방향 전환을 위한 drop-up 클래스 */
.grid-settings-layer.drop-up {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* 모바일 환경에서는 위로 열리도록 강제 (화면 이탈 방지) */
@media (max-width: 768px) {
  .grid-settings-layer {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
  }
}

.grid-settings-header {
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
}

.grid-settings-list {
  max-height: 250px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Drag & Drop 아이템 */
.grid-settings-item {
  display: flex;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--border-color);
  cursor: grab;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background 0.2s;
}
.grid-settings-item:active { cursor: grabbing; }
.grid-settings-item.drag-over { border-top: 2px solid var(--primary-color); }
.grid-settings-item .drag-handle { margin-right: 8px; color: var(--text-tertiary); font-size: 16px; cursor: grab; }
.grid-settings-item label { flex: 1; margin: 0; cursor: pointer; font-size: 13px; user-select: none; }
.grid-settings-item input[type="checkbox"] { margin-right: 8px; cursor: pointer; }

.grid-settings-footer {
  margin-top: 12px;
  text-align: right;
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   모바일 툴바 한 줄 정렬 강제 (설정 아이콘 떨어짐 방지)
   ========================================================================== */
@media (max-width: 768px) {
  .section-toolbar.has-grid-settings {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* 타이틀 말줄임 처리 (아이콘 영역 침범 방지) */
  .section-toolbar.has-grid-settings .section-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
  }

  /* width: 100% 를 auto 로 강제 복구하여 우측 끝으로 밀착 */
  .section-toolbar.has-grid-settings .section-actions {
    width: auto !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }
}