/*!
 * JennyGrid v0.1.0 theme (air-gapped ready: no external fonts/icons/images)
 * 모든 색·간격은 --jg-* 변수로 커스터마이즈한다.
 */
.jenny-grid {
  --jg-font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  --jg-font-size: 14px;
  --jg-text-color: #1e2124;
  --jg-border-color: #d5d9dd;
  --jg-header-bg: #f4f6f8;
  --jg-header-color: #33383d;
  --jg-row-bg: #ffffff;
  --jg-row-hover-bg: #f7f9fb;
  --jg-accent: #246beb;            /* KRDS primary 톤 */
  --jg-accent-soft: #e8f0fe;
  --jg-created-bg: #e9f7ef;
  --jg-updated-bg: #fff8e1;
  --jg-deleted-color: #667085;   /* KWCAG 명도 대비 4.5:1 이상 */
  --jg-muted-color: #667085;     /* 보조 텍스트 (빈 상태·건수 표시) */
  --jg-invalid-border: #d93025;
  --jg-invalid-bg: #fdecea;
  --jg-panel-bg: #ffffff;        /* 입력·버튼·오버레이 패널 배경 */
  --jg-range-bg: #dbe7fb;        /* 범위 선택 배경 */
  --jg-cell-padding: 8px 10px;
  --jg-radius: 6px;

  position: relative;
  font-family: var(--jg-font-family);
  font-size: var(--jg-font-size);
  color: var(--jg-text-color);
  border: 1px solid var(--jg-border-color);
  border-radius: var(--jg-radius);
  background: var(--jg-row-bg);
  outline: none;
}
.jenny-grid:focus-visible {
  box-shadow: 0 0 0 2px var(--jg-accent-soft);
}

/* ---------------------------------------------------------------- table */
.jg-scroll {
  overflow: auto;
  border-radius: var(--jg-radius) var(--jg-radius) 0 0;
}
.jg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.jg-table th,
.jg-table td {
  box-sizing: border-box;
  padding: var(--jg-cell-padding);
  border-bottom: 1px solid var(--jg-border-color);
  border-right: 1px solid var(--jg-border-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jg-table th:last-child,
.jg-table td:last-child {
  border-right: none;
}

/* --------------------------------------------------------------- header */
.jg-head-cell {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--jg-header-bg);
  color: var(--jg-header-color);
  font-weight: 600;
  text-align: center;
  user-select: none;
}
.jg-head-cell.jg-sortable {
  cursor: pointer;
}
.jg-head-cell.jg-sortable:hover {
  background: var(--jg-accent-soft);
}
.jg-head-cell.jg-sortable:focus-visible {
  outline: 2px solid var(--jg-accent);
  outline-offset: -2px;
}
.jg-sort-mark::after {
  content: "\2195";           /* ↕ */
  margin-left: 6px;
  color: #9aa0a6;
  font-size: 12px;
}
.jg-sort-asc .jg-sort-mark::after {
  content: "\25B2";           /* ▲ */
  color: var(--jg-accent);
}
.jg-sort-desc .jg-sort-mark::after {
  content: "\25BC";           /* ▼ */
  color: var(--jg-accent);
}

/* --------------------------------------------------------------- filter */
.jg-filter-cell {
  position: sticky;
  top: 37px;                  /* 헤더 행 높이 아래 */
  z-index: 2;
  background: var(--jg-header-bg);
  padding: 4px 6px;
}
.jg-filter-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--jg-text-color);
  border: 1px solid var(--jg-border-color);
  border-radius: 4px;
  background: var(--jg-panel-bg);
}
.jg-filter-input:focus {
  outline: none;
  border-color: var(--jg-accent);
}

/* ----------------------------------------------------------------- body */
.jg-row {
  background: var(--jg-row-bg);
}
.jg-row:hover td {
  background: var(--jg-row-hover-bg);
}
.jg-row-created td {
  background: var(--jg-created-bg);
}
.jg-row-updated td {
  background: var(--jg-updated-bg);
}
.jg-row-deleted td {
  color: var(--jg-deleted-color);
  text-decoration: line-through;
  background: #fafafa;
}
.jg-cell.jg-rowheader {
  background: var(--jg-header-bg);
  color: var(--jg-muted-color);
  font-size: 12px;
}
.jg-align-left   { text-align: left; }
.jg-align-center { text-align: center; }
.jg-align-right  { text-align: right; }

.jg-cell-editable {
  cursor: cell;
}
.jg-cell-focused {
  box-shadow: inset 0 0 0 2px var(--jg-accent);
}
.jg-cell-invalid {
  background: var(--jg-invalid-bg) !important;
  box-shadow: inset 0 0 0 1px var(--jg-invalid-border);
}
.jg-cell-editing {
  padding: 0 !important;
}
.jg-editor {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--jg-cell-padding);
  font-size: inherit;
  font-family: inherit;
  color: var(--jg-text-color);
  border: 2px solid var(--jg-accent);
  border-radius: 0;
  outline: none;
  background: var(--jg-panel-bg);
}

/* ------------------------------------------------------- 범위 선택 */
.jg-cell-range {
  background: var(--jg-range-bg) !important;
}

/* ------------------------------------------------------- 고정 컬럼 */
.jg-cell-frozen {
  position: sticky;
  z-index: 1;
  background: var(--jg-row-bg);
}
.jg-head-cell.jg-cell-frozen,
.jg-filter-cell.jg-cell-frozen {
  z-index: 3;
  background: var(--jg-header-bg);
}
.jg-cell.jg-rowheader.jg-cell-frozen {
  background: var(--jg-header-bg);
}

/* ------------------------------------------------------ 가상 스크롤 */
.jg-spacer td {
  padding: 0 !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------- empty */
.jg-empty {
  display: none;
  padding: 40px 0;
  text-align: center;
  color: var(--jg-muted-color);
  border-bottom: 1px solid var(--jg-border-color);
}

/* ---------------------------------------------------------------- pager */
.jg-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
}
.jg-page-btn {
  min-width: 32px;
  padding: 5px 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--jg-text-color);
  background: var(--jg-panel-bg);
  border: 1px solid var(--jg-border-color);
  border-radius: 4px;
  cursor: pointer;
}
.jg-page-btn:hover:not(:disabled) {
  border-color: var(--jg-accent);
  color: var(--jg-accent);
}
.jg-page-btn:disabled {
  color: #c3c8cd;
  cursor: default;
}
.jg-page-active {
  background: var(--jg-accent);
  border-color: var(--jg-accent);
  color: #fff !important;
  font-weight: 600;
}
.jg-page-info {
  margin-left: 10px;
  font-size: 12px;
  color: var(--jg-muted-color);
}
.jg-page-info::before {
  content: "\CD1D ";          /* 총 */
}
.jg-page-info::after {
  content: " \AC74";          /* 건 */
}

/* -------------------------------------------------------------- loading */
.jg-loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--jg-radius);
}
.jg-loading-text {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--jg-accent);
  background: var(--jg-panel-bg);
  border: 1px solid var(--jg-border-color);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------- 다크 테마 */
.jenny-grid.jg-theme-dark {
  --jg-text-color: #e6e9ec;
  --jg-border-color: #3a4048;
  --jg-header-bg: #262b31;
  --jg-header-color: #dde1e6;
  --jg-row-bg: #1b1f24;
  --jg-row-hover-bg: #23282e;
  --jg-accent: #6ea8ff;
  --jg-accent-soft: #1e3a5f;
  --jg-created-bg: #16311f;
  --jg-updated-bg: #38300f;
  --jg-deleted-color: #9aa4af;
  --jg-muted-color: #9aa4af;
  --jg-invalid-bg: #3a1d1a;
  --jg-panel-bg: #23282e;
  --jg-range-bg: #23405f;
}
.jenny-grid.jg-theme-dark .jg-row-deleted td {
  background: #202429;
}
.jenny-grid.jg-theme-dark .jg-loading {
  background: rgba(20, 23, 27, 0.6);
}

/* ------------------------------------------------------------ checkbox */
.jenny-grid input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--jg-accent);
  cursor: pointer;
}