// Basic 레이아웃 셸 — 헤더·사이드바·본문·풋터의 배치만 책임진다.
//
// @fox에 넣지 않고 레이아웃 전용으로 둔다(사용자 확정) — 로고·프로필처럼 이 앱에만 있는
// 구성을 전제로 한 배치라 포터블 디자인시스템에 들어갈 성격이 아니다. 대신 여백·색·서체는
// 전부 @fox 토큰을 거치므로 없는 이름을 쓰면 빌드가 실패한다.
//
// **뷰포트를 채우고 그 안에서만 스크롤한다.** 헤더는 항상 보이고 사이드바와 본문이 각자
// 스크롤한다 — 사이드바가 `overflow-y: auto`를 전제로 만들어져 있어(시안 높이 1251px이
// 뷰포트보다 크다) 행 높이가 뷰포트에 묶여 있어야 그 스크롤이 동작한다.
// globals.scss가 `html, body { block-size: 100% }`와 `body { display: flex }`를 깔아 두므로
// 이 셸은 그 flex 자식으로서 남은 높이를 그대로 받는다.

@use "@fox/styles/abstracts" as fox;

.shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  // 자식이 넘칠 때 셸이 늘어나지 않게 한다 — 늘어나면 안쪽 스크롤 대신 페이지가 스크롤된다.
  min-block-size: 0;
}

.body {
  display: flex;
  flex: 1;
  min-block-size: 0;
}

.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  // flex 자식의 기본 min-inline-size는 auto라, 넓은 표가 들어오면 줄어들지 않고 사이드바를
  // 밀어낸다. 0으로 낮춰야 표 쪽이 스크롤된다.
  min-inline-size: 0;
  background: fox.color(background-default);
  overflow-y: auto;
}

.main {
  display: flex;
  flex: 1;
  flex-direction: column;
  // 헤더의 좌우 여백과 같은 값이라 세로 기준선이 맞는다.
  padding: fox.padding(8);
}

.footer {
  flex-shrink: 0;
  padding-block: fox.padding(6);
  padding-inline: fox.padding(8);
  border-block-start: fox.border(1) solid fox.color(border-neutral-subtler);
  color: fox.color(font-neutral-subtler);
  font-family: fox.font-family(body);
  font-size: fox.font-size(label-sm);
  line-height: 1.5;
  letter-spacing: -0.025em;
  text-align: center;
}