/* =============================================================
   grid_foot.css - 데이터 그리드의 표 아래 줄 - [컬럼 설정] · 「N개씩」 · [스크롤 N행] · 선택한 값의
   계산 · 컬럼 설정 팝업 · 쪽 번호 줄의 모양
   (`AZone/web/styles/grid.css` 에서 나눔 · 2026-09-24 단위 57 · `AGENTS.md` 「5. 파일 크기」).

   나눈 기준은 답하는 질문임 - `grid.css` 는 「모든 표에 늘 있는 표 상자와 칸의 모양」이고 이 파일은 「표
      아래 줄의 모양」임. 규칙 · 선택자 · 주석은 나누기 전 그대로(이동만).
   연결 차례는 `grid.css` 바로 뒤 · `grid_parts.css` 앞(`AZone/web/html/index.html`) - 나누기 전 규칙의
      차례 그대로임. 차례 변경 금지 → 같은 우선순위의 규칙이 뒤집힘.
   `.grid-c` 를 붙이지 않은 선택자(`.foot` · `.psize` · `.g-rows` · `.gcalc` · `.g-pop` · `.pager` · `.pgb`)의
      근거는 `grid.css` 의 머리와 아래 소제목마다의 주석.
   ============================================================= */

/* 표 아래 줄 - 그리드 밖에서도 같은 모양이어야 한다(2026-09-09 결정 재6 ·
   2026-09-10 코덱스 8번). 입출고량 탭의 표는 공용 그리드로 만들 수 없어 그 표 아래에
   같은 글자를 그리는데(`AZone/web/js/grid_page.js`), 규칙이 `.grid-c` 안으로 한정되어
   있으면 배경 · 여백 · 정렬이 적용되지 않는다.
   `.grid-c` 로 되돌리기 금지 - 「목록의 행 펼치기와 같은 모양」이 그 결정의 내용이다.
   좁으면 줄을 넘김(2026-09-24 단위 55 후속 1 · 우7) - 넘기지 않으면 392px 화면에서 표 아래 줄이
   표 상자(`.grid-wrap` 의 `overflow: hidden`) 폭을 넘어 쪽 번호 줄이 잘림. 줄 사이 간격은 도구
   행(`.toolbar`)과 같은 14px · 칸 사이 간격은 8px 그대로. 넓은 화면에서는 1줄 그대로임. */
.foot {
  display: flex; align-items: center; gap: 14px 8px; flex-wrap: wrap;
  background: var(--head); border-top: 1px solid var(--border); padding: 8px 11px;
}
.grid-c .gear { position: relative; }
/* 「N개씩」과 [스크롤 N행](`.g-rows` · 2026-09-24 단위 55 · `AZone/web/js/grid_scroll.js`)은 같은
   모양의 선택 상자 2개임 - 규칙 1개를 함께 사용함. 규칙을 2벌로 나누기 금지 → 나란히 선 상자
   2개의 모양이 달라짐. */
.psize, .g-rows {
  height: 28px; border: 1px solid var(--btn-bd); background: var(--surface);
  color: var(--text); border-radius: 7px; padding: 0 8px; font: inherit; font-size: 12px; cursor: pointer;
}
/* 선택한 값의 계산 1줄 (2026-09-18 단위 12 · 결정 레2) - 「N개씩」 상자 뒤에 선다.
   그리드 밖에서도 같은 모양이어야 하므로 `.grid-c` 안으로 한정하지 않는다(위 `.foot` ·
   `.psize` 와 같은 근거) - 글자를 만드는 곳이 표 아래 줄 1곳이기 때문이다.
   선택이 없는 동안에는 요소가 `hidden` 이라 표시되지 않는다. */
.gcalc {
  color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 컬럼 설정 팝업의 선택자를 `.grid-c .pop` 으로 변경 금지 (2026-08-01 결정).
   지금은 DOM 을 그리드 안에 두고 `position: fixed` 로 표시하므로 조상 선택자도 적용된다.
   그러나 이 팝업을 body 로 옮기면 조상 선택자가 적용되지 않아 스타일이 전부 누락된다
   (`reference/docs/화면 규칙.md` 「6. 조작 방식」의 「떠 있는 목록의 위치」).
   떠 있는 요소는 전역 이름으로 작성한다. */
.g-pop {
  position: absolute; bottom: 35px; left: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-3); padding: 8px; min-width: 185px; z-index: 20;
  /* 컬럼이 많으면 팝업 높이가 화면을 넘는다 - 팝업 안에서 세로로 스크롤하고, 위아래
     어느 방향으로 펼치든 화면 밖으로 넘지 않는다. */
  max-height: calc(100vh - 160px); overflow-y: auto;
}
.g-pop .ph { font-size: 11px; color: var(--faint); padding: 2px 6px 6px; }
.g-pop .pop-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; }
.g-pop .pop-item:hover { background: var(--hover); }
.g-pop .pop-item .handle { cursor: grab; color: var(--faint); font-size: 12px; }
.g-pop .pop-item.dragover { box-shadow: inset 0 2px 0 var(--accent); }
.g-pop .pop-item label { flex: 1; cursor: pointer; }

/* 쪽 번호 줄도 좁으면 줄을 넘김(2026-09-24 단위 55 후속 2 · 코1) - 표 아래 줄(`.foot`)이 줄을 넘겨
   쪽 번호 줄이 1줄을 차지해도, 가운데 쪽에서는 처음 · 마지막 쪽과 지금 쪽 · 양옆 쪽 · 말줄임 · « ‹ › » ·
   「N-M / 전체」 글자가 함께 서서 392px 화면에서 쪽 번호 줄 자체가 표 상자 폭을 넘어 잘림.
   넘긴 줄도 오른쪽 정렬(`justify-content: flex-end`) · 줄 사이 간격 6px(도구 행의 버튼 칸 `.g-acts` 와
   같음) · 단추 사이 2px 그대로. 입출고량 탭의 쪽 번호 줄(`.flow-pager`)도 같은 서식. 넓은 화면에서는
   1줄 그대로임. */
.pager {
  margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 6px 2px;
}
.pgb {
  min-width: 27px; height: 27px; padding: 0 7px; border-radius: 6px;
  border: 1px solid var(--btn-bd); background: var(--surface); color: var(--text);
  cursor: pointer; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
}
.pgb:hover:not(:disabled) { background: var(--btn-hover); }
.pgb:disabled { color: var(--faint); opacity: .5; cursor: default; }
.pgb.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pgb.ar { padding: 0; width: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.pgb svg { width: 15px; height: 15px; }