// FoxListContainer — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) container (3019:8608)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-list-container">
//     …fox-page-header…
//     <section class="fox-list-container__section">
//       …fox-list-toolbar… …fox-table… …fox-pagination…
//     </section>
//   </div>
//
// 세로로만 쌓는다 — 도구 줄과 페이지네이션이 각자 자기 여백을 갖고 있어 여기서 간격을 더하지
// 않는다(더하면 시안보다 벌어진다).

@use "abstracts" as fox;

.fox-list-container {
  display: flex;
  inline-size: 100%;
  flex-direction: column;

  &__section {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
  }

  // 열이 많은 표는 화면보다 넓다. 눌러 담으면 시안 폭이 무너지므로 여기서 가로로 스크롤한다.
  &__table {
    inline-size: 100%;
    overflow-x: auto;
  }
}

// 표가 지정된 열 폭 아래로 눌리지 않게 한다 — 넓을 때만 넘치고, 좁으면 100%로 앉는다.
// 좁은 화면에서는 목록표가 카드로 바뀌어(FoxTable의 mobile 규칙) 스크롤이 필요 없으므로
// PC에서만 건다.
@include fox.pc {
  .fox-list-container__table > .fox-table {
    min-inline-size: max-content;
  }
}