@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* 숫자 컬럼 고정폭 - 표에서 자릿수 흔들림 방지. Tailwind 유틸리티로 안 되는 부분만. */
.tabular {
  font-variant-numeric: tabular-nums;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
.skeleton-line {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.375rem;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.tab-btn.active {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: #60a5fa;
  color: #fff;
}

.detail-subtab.active,
.pill-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border-bottom: 1px solid #262b33;
  padding: 0.5rem 0.75rem;
  height: 2.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th {
  color: #8b93a1;
  font-weight: 500;
  font-size: 0.75rem;
}

/* 탭 화면(검색/코호트 비교) - 필터 pill은 고정 높이로 위에 붙박이, 표만 남은 공간에서 스크롤. */
.tab-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 반응형: 표가 화면보다 넓으면 컨테이너만 스크롤, 페이지 자체는 스크롤 안 되게 */
/* 미니멀 SaaS 카드 톤: 표 컨테이너 자체를 카드로 - 3개 뷰 전체에 자동 적용 */
.table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  max-width: 100%;
  border: 1px solid #262b33;
  border-radius: 0.75rem;
  background: #15181d;
}
.table-scroll table {
  border: none;
}
.table-scroll tr:last-child td {
  border-bottom: none;
}
/* 표 헤더(컬럼 라벨)는 스크롤해도 위에 고정 - 배경을 명시해야 스크롤되는 행이 뒤로 비치지 않는다. */
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: #15181d;
  z-index: 1;
}

/* 학교명처럼 긴 텍스트 컬럼 - 말줄임표 처리, title 속성으로 마우스오버 풀네임 표시 */
.truncate-cell {
  display: inline-block;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* 담당업무처럼 컬럼 실제 너비(%)를 넘칠 때만 "..." 처리 - 고정 max-width 없음 */
.truncate-cell-full {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 사용자가 드래그로 너비 조정 가능한 표 (임원 검색 목록) */
.resizable-table {
  table-layout: fixed;
}
.resizable-table th {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 6px;
  cursor: col-resize;
  user-select: none;
}
.col-resizer:hover,
.col-resizer.resizing {
  background: rgba(96, 165, 250, 0.4);
}