/* 데이터그리드 컬럼 너비 헬퍼. Bootstrap의 col-* 그리드 클래스와 충돌 방지 위해 dg- prefix.
 * table-layout: fixed 로 컬럼 너비를 페이지 / 행 무관 일정하게 유지.
 * 콘텐츠가 너비 초과 시 ellipsis (…) — 마우스 hover 로 full text 확인 (title 속성).
 */
.dg-xs   { width: 60px;  }
/* 체크박스 전용 컬럼 — 최대한 좁게 (체크박스 + 최소 padding) */
.dg-cb   { width: 2.2rem; padding-left: .3rem; padding-right: .3rem; text-align: center; }
.dg-sm   { width: 80px;  }
.dg-md   { width: 120px; }
.dg-lg   { width: 200px; }
.dg-xl   { width: 300px; }
.dg-fill { width: auto;  }

/* 정렬 modifier — table 컨텍스트 안에서 의도 그대로 적용 (specificity 강화).
 * dg-num     — 헤더 + 데이터 양쪽 우측 (자릿수 일치).
 * dg-center  — 헤더 + 데이터 양쪽 가운데.
 * dg-center-th — 헤더 only 가운데, 데이터는 좌측 기본 유지 (이름 컬럼처럼).
 */
.dg-num,
#results .table .dg-num     { text-align: right; padding-right: var(--sp-5); }
.dg-center,
#results .table .dg-center  { text-align: center; }
#results .table th.dg-center-th { text-align: center; }

/* 창고 셀 — 본값 + (최대값) 의 본값 끝자리를 모든 행에서 일치시키기.
 * 본값 (.dg-wh-base) 은 우측 정렬 inline-block, 최대값 (.dg-wh-max) 은 고정 폭으로 우측 영역 점유.
 * 최대값이 없는 행도 빈 .dg-wh-max 가 같은 폭을 차지해 본값이 동일 위치에 끝남.
 * padding-left 로 본값과 시각 gap 확보 (inline-block 내부 leading 공백은 collapse 되어 사라지므로).
 */
.dg-wh-base { display: inline-block; min-width: 4ch; text-align: right; }
.dg-wh-max  { display: inline-block; min-width: 5ch; text-align: right; color: var(--c-text-muted); }

/* 퀘스트 일반 panel 전용 (legacy — 점진 dg-* 통일 예정) */
.dg-name   { width: 180px; min-width: 150px; max-width: 180px; }
.dg-skills { width: 180px; }
.dg-city   { width: 160px; }
.dg-dest   { width: 140px; }

/* 이민자 발전 효과 — 분류명 + 상승폭 화살표 아이콘 */
.dg-immig  { width: 160px; }
.qie-item  { display: inline-flex; align-items: center; gap: 1px; margin-right: 8px; white-space: nowrap; }
.qie-arrow { width: 12px; height: 12px; vertical-align: middle; }

.dg-sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* 정렬 표시자 — 정렬 가능 헤더에 항상 표시(고정폭 → 정렬 상태 바뀌어도 헤더 너비 안 흔들림).
 * 흐린 ↕ = 정렬 가능·미정렬 / 진한 ↑↓ = 현재 정렬. 정렬 불가 헤더엔 아예 없음(=구분). */
.dg-sort-ind {
  display: inline-block;
  width: 0.9em;
  text-align: center;
  margin-left: 2px;
  font-size: 0.85em;
  opacity: 0.35;
}
.dg-sort-ind.active { opacity: 1; }
.dg-sort-link:hover .dg-sort-ind { opacity: 0.7; }
.dg-sort-link:hover .dg-sort-ind.active { opacity: 1; }

/* 이름 영역만 상세 링크 — hover 시 밑줄 */
.dg-name-link {
  color: inherit;
  text-decoration: none;
}
.dg-name-link:hover,
.dg-name-link:focus {
  text-decoration: underline;
}

/* 데이터그리드 — 컴팩트 fixed 레이아웃. 컬럼 폭 고정, 넘치면 ellipsis. */
#results .table {
  font-size: var(--fs-sm);
  table-layout: fixed;
  line-height: 1.4;
}
#results .table th,
#results .table td {
  padding: var(--sp-2) var(--sp-2);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 헤더 / 데이터 텍스트 정렬을 같은 축으로 (디폴트 좌측, 수치는 dg-num 으로 양쪽 우측). */
#results .table td,
#results .table th { text-align: left; }
#results .table td { color: var(--c-text); }
#results .table th {
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  background-color: var(--c-bg-muted);
}

/* 헤더 셀 내용 — sort link + ? 아이콘 중앙축 정렬.
 * line-height: 1 로 child 박스 높이를 font-size 와 동등하게 맞춰 align-items: center 효과를 시각상 정확하게.
 */
.dg-th-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  line-height: 1;
}
.dg-th-inner > .dg-sort-link,
.dg-th-inner > span {
  line-height: 1;
}

/* 헤더 셀 ? 도움말 아이콘 */
.dg-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  cursor: help;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
  text-align: center;
}
.dg-help:hover { color: var(--c-text-link); border-color: var(--c-text-link); }