/*!
 * 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;
}

/* 표 제목(caption) — 기본은 스크린리더 전용(KWCAG 표 제목 제공, 시각 레이아웃 불변) */
.jg-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.jg-caption.jg-caption-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 10px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  text-align: left;
  font-weight: 600;
  color: var(--jg-header-color);
  caption-side: top;
}

/* --------------------------------------------------------------- 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;
}

/* ------------------------------------------- 모바일 카드 모드 (v0.3.3) */
/* mobileCard 옵션을 켠 그리드가 좁은 컨테이너(breakpoint 이하)에서 표 대신 카드 목록을 그린다.
   가로 스크롤 0 이 목표 — 모든 요소 min-width:0 + 긴 값 줄바꿈. 인라인 style 없음(CSP 호환). */
.jg-cards-wrap {
  display: none;
}
.jenny-grid.jg-mode-card .jg-scroll {
  display: none;
}
.jenny-grid.jg-mode-card .jg-cards-wrap {
  display: block;
  min-width: 0;
}
.jg-card-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  background: var(--jg-header-bg);
  border-bottom: 1px solid var(--jg-border-color);
  border-radius: var(--jg-radius) var(--jg-radius) 0 0;
}
.jg-card-ctl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 140px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--jg-header-color);
}
.jg-card-sort,
.jg-card-filter {
  width: 100%;
  min-width: 0;
  min-height: 40px;           /* 터치 대상 크기 */
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  color: var(--jg-text-color);
  background: var(--jg-panel-bg);
  border: 1px solid var(--jg-border-color);
  border-radius: 4px;
}
.jg-card-sort:focus-visible,
.jg-card-filter:focus-visible {
  outline: 2px solid var(--jg-accent);
  outline-offset: 1px;
}
.jg-cards {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}
.jg-card {
  min-width: 0;
  padding: 12px;
  background: var(--jg-row-bg);
  border: 1px solid var(--jg-border-color);
  border-radius: var(--jg-radius);
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: pointer;
}
.jg-card:hover {
  background: var(--jg-row-hover-bg);
}
.jg-card:focus-visible {
  outline: 2px solid var(--jg-accent);
  outline-offset: 2px;
}
.jg-card.jg-card-focused {
  border-color: var(--jg-accent);
  box-shadow: inset 4px 0 0 var(--jg-accent);   /* 선택 표시: 색 + 왼쪽 굵은 띠(형태) */
}
.jg-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.jg-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--jg-text-color);
}
.jg-card-badge {
  flex: 0 0 auto;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jg-text-color);
  border: 1px solid var(--jg-border-color);
  border-radius: 999px;
  background: var(--jg-panel-bg);
}
.jg-card-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--jg-muted-color);
}
.jg-card-fields {
  margin: 8px 0 0;
  padding: 0;
}
.jg-card-field {
  display: grid;
  grid-template-columns: minmax(4.5em, 38%) minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--jg-border-color);
}
.jg-card-field dt {
  min-width: 0;
  font-size: 13px;
  color: var(--jg-muted-color);
}
.jg-card-field dd {
  min-width: 0;
  margin: 0;
  text-align: left;          /* 카드에서는 값 정렬을 왼쪽으로 통일(좁은 폭 가독성) */
}
.jg-card-field.jg-card-invalid dd {
  background: var(--jg-invalid-bg);
  box-shadow: inset 0 0 0 1px var(--jg-invalid-border);
}
.jg-card.jg-card-created { background: var(--jg-created-bg); }
.jg-card.jg-card-updated { background: var(--jg-updated-bg); }
.jg-card.jg-card-deleted {
  color: var(--jg-deleted-color);
}
.jg-card.jg-card-deleted .jg-card-title,
.jg-card.jg-card-deleted dd {
  text-decoration: line-through;
}
.jenny-grid.jg-mode-card .jg-pager {
  flex-wrap: wrap;
}
.jenny-grid.jg-mode-card .jg-page-btn {
  min-width: 44px;                /* v0.4.2: 터치 대상 44px */
  min-height: 44px;
}

/* ------------------------------------------------ 칸 줄바꿈 (v0.3.4) */
/* 열 wrap:true 또는 그리드 wrapText:true — 긴 텍스트를 말줄임 대신 여러 줄로. 인라인 style 없음(CSP 유지).
   가상 스크롤 그리드에는 붙지 않는다(행 높이 고정 계산). */
.jg-table td.jg-cell-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip;
  vertical-align: top;
}
.jg-table td.jg-cell-wrap .jg-cell-content {
  white-space: pre-line;      /* 값 안의 줄바꿈 문자도 줄을 바꿔 표시 */
}

/* ------------------------------------------------ 좁은 폭 페이저 (v0.4.2) */
/* 넓은 화면에서는 한 줄 그대로(출력 불변). 넘칠 때만 줄바꿈. 축약 모드는 «이전 · 3 / 12 쪽 · 다음». 인라인 style 없음. */
.jg-pager {
  flex-wrap: wrap;
}
.jg-pager.jg-pager-compact {
  gap: 8px;
}
.jg-pager-compact .jg-page-btn {
  min-width: 44px;               /* 터치 대상 44px 이상 */
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
}
.jg-page-status {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jg-text-color);
  white-space: nowrap;
}
.jg-pager-compact .jg-page-info {
  margin-left: 4px;
}
/* 스크린리더 전용(시각적으로 숨김) */
.jg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}