/* isolation 은 고정 칸과 조절 바의 z-index 를 표 상자 안에 가둠. 표 위로 뜨는 상자를 안 가림.
   크기 컨테이너(inline-size)로 둬 세부 항목 줄과 줄 없음 안내 글의 폭 한도를 표가 옆으로 밀리는
   내용 폭이 아니라 상자의 보이는 인라인 크기(cqi)로 셈 */
.data-table {
  position: relative;
  isolation: isolate;
  overflow-x: auto;
  container-type: inline-size;
  /* 줄어드는 바닥. 열 이름줄 한 줄은 늘 보이고 그 아래로는 안 줄임(2026-09-18 사용자 확정) */
  min-height: var(--measure-table-floor);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-raised);
}

/* compact 인자가 켜졌을 때. 뜨는 상자가 없는 작은 표는 남길 이름줄이 따로 없어 받은 자리까지 다 줄어듦 */
.data-table--compact { min-height: 0; }

/* fit 인자가 켜졌을 때. 표 상자 폭을 칸 속성에 실은 열 폭 합(테두리 포함)으로 못박음. 흐름이 상자 폭을
   내용에 맞추는 자리(align-items: flex-start 등)에서도 크기 컨테이너를 유지한 채 그 폭을 잡음.
   max-width 는 그 자리 자체가 이 폭보다 좁을 때의 한도 */
.data-table--fit {
  width: calc(attr(data-fit-px px, 0px)
    + attr(data-fit-xs type(<number>), 0) * var(--measure-column-xs)
    + attr(data-fit-sm type(<number>), 0) * var(--measure-column-sm)
    + attr(data-fit-md type(<number>), 0) * var(--measure-column-md)
    + attr(data-fit-lg type(<number>), 0) * var(--measure-column-lg)
    + attr(data-fit-xl type(<number>), 0) * var(--measure-column-xl)
    + var(--border-width) * 2);
  max-width: 100%;
}

/* 폭은 고정 배치의 열 폭 합임(width: 0). 좁아져도 열이 안 줄고 표 상자 안에서 가로로 밀림.
   테두리는 칸마다 제 것(separate)이라 붙은 고정 칸을 따라감. 조절 바의 아래 끝 기준점 */
.data-table__grid {
  anchor-name: --data-table-grid;
  table-layout: fixed;
  width: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-body);
  line-height: var(--line-body);
  color: var(--text-default);
}

.data-table__w--xs { width: var(--measure-column-xs); }
.data-table__w--sm { width: var(--measure-column-sm); }
.data-table__w--md { width: var(--measure-column-md); }
.data-table__w--lg { width: var(--measure-column-lg); }
.data-table__w--xl { width: var(--measure-column-xl); }

/* clip 은 hidden 과 달리 스크롤 상자를 안 만들어, 안쪽 sticky(줄 없음 안내)가 이 칸이 아니라 표
   상자를 기준으로 붙을 수 있음(text-overflow 는 clip 에서도 그대로 그려짐, 2026-09-15 Chromium 재봄) */
.data-table__grid th,
.data-table__grid td {
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border-bottom: var(--border-width) solid var(--border-muted);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  overflow: clip;
  text-overflow: ellipsis;
}

/* 열 사이 옅은 세로 줄. 가로로 합친 줄 아래 한 줄과 줄 없음 안내는 칸이 하나라 안 생김 */
.data-table__grid :is(th, td) + :is(th, td) {
  border-left: var(--border-width) solid var(--border-muted);
}

/* 줄 하나에 안쪽 블록이 둘 이상이면(이름 밑 전화 등) 블록마다 같은 말줄임. 감싸는 겹이 있어도
   닿게 자식이 아니라 후손을 봄. inline 요소엔 아무 효과가 없어 안전함 */
.data-table__row td * {
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 열 이름줄은 표 상자 위에 붙어 세로로 밀어도 남음. 바탕(--surface-sunken)이 이미 불투명해 밑에서
   밀려 올라오는 줄이 안 비침(잰 값은 DataTable.md "열 이름줄" 절).
   min-width 는 고정 배치 표가 안 쓰고 followColumnResize 가 끌기 하한 px 로 읽음 */
.data-table__grid th {
  position: sticky;
  top: 0;
  min-width: var(--measure-column-min);
  font-size: var(--font-label);
  font-weight: normal;
  color: var(--text-muted);
  background: var(--surface-sunken);
}

/* 몸통을 쌓기 맥락으로 둬 고정 몸 칸이 올라가도 몸통 안에서만 올라감. 문서 차례가 뒤인 몸통이
   이름줄을 통째로 덮는 것을 막음(차례는 DataTable.md "열 이름줄" 절) */
.data-table__grid tbody { isolation: isolate; }
/* 이름줄은 한 칸 올라가 몸통 위에 서고, 제가 쌓기 맥락이라 그 안 고정 이름 칸이 같은 한 칸을 다시 씀 */
.data-table__grid thead {
  position: relative;
  z-index: var(--layer-raised);
}

.data-table__row:has(+ .data-table__after) td { border-bottom: 0; }
/* 좌우 안쪽 여백은 아래 .data-table__after-inner 가 지음. 칸 자신도 좌우 여백을 두면 스크롤 0 일 때(칸
   여백 + 안쪽 겹 여백)와 민 뒤(sticky 가 상자 기준으로 안쪽 겹 여백만 반영)의 글 자리가 갈려 밀기 시작할 때 튐 */
.data-table__after td { padding-top: 0; padding-inline: 0; white-space: normal; }

/* 세부 항목 줄 글도 줄 없음 안내(아래 .data-table__empty-inner)와 같은 자리를 씀. 스크롤이 얼마나
   밀렸든 표 상자의 보이는 자리에 붙고, max-width 로 폭 한도를 표 상자의 보이는 인라인 크기(cqi) 안으로
   잡아 그 폭에서 줄바꿈함 */
.data-table__after-inner {
  display: inline-block;
  position: sticky;
  left: 0;
  max-width: 100cqi;
  padding-inline: var(--space-inset-sm);
}

.data-table__row--attention { background: var(--surface-attention); }
.data-table__row--muted { color: var(--text-muted); }
/* atTop(맨 위 고정)처럼 자리로 이미 구분되는 줄을 눈으로도 갈리게 쓰는 어조. attention 보다 옅어 다급함
   대신 다른 무리에 있음만 보임 */
.data-table__row--highlight { background: var(--surface-highlight); }

/* 고정 열 칸. 앞 고정 열 폭의 합만큼 표 상자 왼쪽에 붙음. 합은 DataTable 이 칸 속성에 폭 이름별
   개수와 조절 폭 px 합으로 싣고 여기서 폭 이름 토큰을 곱해 더함 */
.data-table__grid .data-table__pin {
  position: sticky;
  z-index: var(--layer-raised);
  left: calc(attr(data-pin-px px, 0px)
    + attr(data-pin-xs type(<number>), 0) * var(--measure-column-xs)
    + attr(data-pin-sm type(<number>), 0) * var(--measure-column-sm)
    + attr(data-pin-md type(<number>), 0) * var(--measure-column-md)
    + attr(data-pin-lg type(<number>), 0) * var(--measure-column-lg)
    + attr(data-pin-xl type(<number>), 0) * var(--measure-column-xl));
}
/* 밑으로 밀려 들어오는 칸을 가리게 몸 칸을 줄 바탕과 같은 불투명 색으로 칠함. 열 제목 칸은 이미 불투명 */
.data-table__grid td.data-table__pin { background-color: var(--surface-raised); }
.data-table__grid .data-table__row--attention > td.data-table__pin { background-color: var(--surface-attention); }
.data-table__grid .data-table__row--highlight > td.data-table__pin { background-color: var(--surface-highlight); }
/* 이어진 고정 칸의 끝에만 옅은 경계. 바로 뒤도 고정 칸이면 둘 사이로 밀려 들어오는 칸이 없음 */
.data-table__grid .data-table__pin:not(:has(+ .data-table__pin)) {
  box-shadow: inset calc(var(--border-width) * -1) 0 var(--border-default);
}
/* 위 안쪽 그림자가 고정 칸 오른쪽 끝에 이미 경계를 그리므로, 바로 다음(밀려 들어오는) 칸의 왼쪽
   테두리를 없애 둘이 겹쳐 2px 로 보이지 않게 함(잰 값은 DataTable.md "고정 열" 절) */
.data-table__grid .data-table__pin:not(:has(+ .data-table__pin)) + :is(th, td) {
  border-left: none;
}

.data-table__empty td {
  color: var(--text-muted);
  text-align: left;
  white-space: normal;
}

/* 표가 열 폭 합만큼 넓어 스크롤이 밀린 채로도 안내 글이 보이게 붙이고, max-width 로 표 상자의
   보이는 인라인 크기(cqi) 안에서 줄바꿈함. 칸(.data-table__empty td) 자신의 좌우 안쪽 여백만큼을
   더 빼서, 그 여백이 왼쪽에서 밀어 둔 이 겹의 자리를 셈에 넣음 */
.data-table__empty-inner {
  display: inline-block;
  position: sticky;
  left: 0;
  max-width: calc(100cqi - var(--space-inset-sm) * 2);
  padding-inline: var(--space-inset-sm);
}

/* 세로 상자로 둬서 자리가 좁아지면 표 상자만 줄고 그 안에서 세로로 밀림. 바닥에 닿은 뒤로는 바깥이
   밀려 표가 안 잘림. 뜨는 열 필터 상자는 자리 잡힌 겹이라 이 세로 차례에 안 끼어듦 */
.data-table-frame {
  display: flex;
  flex-direction: column;
  /* 바닥을 긋는 동시에 줄어들기를 여는 줄임. 안 적으면 기본값 min-height: auto 가 겉 틀을 내용 크기로
     잠가 표가 아예 안 줄어듦(2026-09-17 이 줄만 지워 재니 세 크기 716 으로 되돌아가고 smoke 15, dom 2).
     값이 위 표 상자의 바닥과 같아야 하는 까닭은 DataTable.md "줄어드는 바닥" 절 */
  min-height: var(--measure-table-floor);
  anchor-scope: --data-table-open, --data-table-edge, --data-table-grid;
}
/* 작은 표는 표 상자가 바닥을 뺐으므로 자리도 같이 뺌 */
.data-table-frame:has(> .data-table--compact) { min-height: 0; }

/* 이름과 ▼ 를 한 줄에 두되 ▼ 는 안 줄고 이름만 줄어 말줄임됨. flex 는 th 자신이 아니라 안쪽 겹에
   둠. th 에 표 칸 아닌 display 를 직접 주면 표 칸 자리 배치에서 빠져 줄이 세로로 쌓임 */
.data-table__th-inner {
  display: flex;
  align-items: center;
}
.data-table__label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 정렬 버튼은 글자 모양 그대로 이름 글과 화살표를 감쌈. 버튼도 줄어야 안의 이름 글이 말줄임됨.
   초점 고리는 칸 안쪽 여백에 그려져 칸의 clip 에 안 잘림 */
.data-table__sort {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  padding: 0;
  font: inherit;
  text-align: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.data-table__sort:focus-visible { outline: var(--border-width) solid var(--focus-ring); }
.data-table__arrow {
  flex-shrink: 0;
  margin-left: var(--space-inline-xs);
}
/* 이름과 정렬 화살표는 왼쪽에 두고 ▼ 는 margin-left: auto 로 칸 오른쪽 끝(칸 안쪽 여백 안)까지 밈.
   2026-09-15 화면을 보고 정한 것으로 이름 뒤 꼬리에 두던 자리를 뒤집음 */
.data-table__menu {
  display: inline-block;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 var(--space-inset-xs);
  font: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.data-table__grid th:has(.data-table__menu[aria-expanded="true"]) { anchor-name: --data-table-open; }
.data-table__grid th.data-table__th--edge { anchor-name: --data-table-edge; }
.data-table__grid th.data-table__th--edge:has(.data-table__menu[aria-expanded="true"]) { anchor-name: --data-table-open, --data-table-edge; }

/* 세부 항목 줄 펼침/닫힘 버튼과 모두 펼치기/모두 닫기 버튼. 칸 안쪽 여백을 버튼 안으로 옮겨 누르는 자리가
   맨 앞 칸 폭을 다 쓰고, 줄 높이는 옆 칸 한 줄과 같은 줄 높이로 맞춰 버튼이 줄을 안 늘림 */
.data-table__grid .data-table__fold-cell { padding: 0; }
.data-table__fold,
.data-table__fold-all {
  display: block;
  width: 100%;
  min-height: var(--measure-hit-min);
  padding: var(--space-inset-xs) var(--space-inset-sm);
  text-align: left;
  font: inherit;
  font-size: var(--font-glyph);
  line-height: calc(var(--font-body) * var(--line-body));
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.data-table__fold-all { line-height: calc(var(--font-label) * var(--line-body)); }
/* 버튼이 칸을 꽉 채워 바깥 고리는 칸의 clip 에 잘림. 고리를 버튼 안쪽으로 들임 */
.data-table__fold:focus-visible,
.data-table__fold-all:focus-visible {
  outline: var(--border-width) solid var(--focus-ring);
  outline-offset: calc(var(--border-width) * -2);
}

/* 열 폭 조절 손잡이. 칸 오른쪽 끝 안쪽에 칸 높이만큼 섬. 초점이 오면 손잡이 전체를 칠함 */
.data-table__resize {
  display: var(--data-table-resize, block);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--space-inset-xs);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.data-table__resize:focus-visible { outline: none; background: var(--focus-ring); }

/* 경계 조절 바. 떠 있는 경계 하나에 그 열 제목 칸 위부터 표 아래까지 손잡이 폭으로 섬. 자리 잡힌 표 상자
   안이라 표를 밀면 같은 프레임에 따라가고 표 상자에 잘림. 끝 열은 표 오른쪽을 안 넘어 밀 폭을 안 늘림 */
.data-table__edge {
  display: var(--data-table-resize, block);
  position: absolute;
  position-anchor: --data-table-edge;
  left: min(calc(anchor(right) - var(--space-inset-xs) / 2), calc(anchor(--data-table-grid right) - var(--space-inset-xs)));
  top: anchor(top);
  bottom: anchor(--data-table-grid bottom);
  width: var(--space-inset-xs);
  position-visibility: anchors-visible;
  z-index: var(--layer-raised);
  border-left: var(--border-width) solid transparent;
  border-right: var(--border-width) solid transparent;
  background: var(--border-resize);
  background-clip: padding-box;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.data-table__grid th.data-table__th--filtered {
  background: var(--surface-filtered-title);
  color: var(--text-default);
  font-weight: bold;
}
.data-table__grid td.data-table__col--filtered {
  background-image: linear-gradient(var(--surface-filtered), var(--surface-filtered));
}

.data-table__pop {
  position: absolute;
  position-anchor: --data-table-open;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: --data-table-flip;
  z-index: var(--layer-raised);
  width: max-content;
  max-width: 100%;
  padding: var(--space-inset-sm);
  border: var(--border-width) solid var(--border-strong);
  background: var(--surface-raised);
}

/* 칸 오른쪽에 맞추되 칸이 담는 블록 밖으로 나가면 그 끝에 붙음 */
@position-try --data-table-flip {
  left: auto;
  right: max(anchor(right), 0px);
}

@supports not (anchor-name: --a) {
  .data-table__pop { position: static; }
  .data-table__edge { display: none; }
}