// 앱 글로벌 스타일 — 디자인 시스템 로드 + **이 앱에만 해당하는** 최소 베이스.
//
// 색·타이포·간격 같은 디자인 값은 여기에 두지 않는다. 전부 `@fox/styles/tokens/`가
// 소유하며, 이 파일은 "@fox를 켜고, 이 앱의 셸 구조를 잡는다"까지만 한다.
// 화면·컴포넌트 스타일은 각자의 `.module.scss`로 간다.

@use "@fox/styles";

// 공용 컴포넌트 스타일. CSS Modules가 아니라 전역 BEM이라 여기서 한 번 불러온다 —
// 그래야 React 밖(다른 프레임워크·순수 SCSS)에서도 같은 방식으로 쓸 수 있다.
@use "@fox/styles/components";

// Pretendard — @fox 토큰이 패밀리명을 **리터럴 `Pretendard`로** 지정하므로(`font.family.*`),
// 앱은 정확히 그 이름의 폰트를 공급해야 한다. `next/font/local`은 패밀리명을
// 해시(`__Pretendard_xxxx`)로 바꿔 그 리터럴과 영영 만나지 못해 쓸 수 없다 — 토큰은 Figma
// export 자동 생성이라 이름을 코드 쪽에 맞추는 반대 방향도 불가능하다.
// weight는 토큰이 실제로 쓰는 400·600·800 셋뿐이다(`weight-regular`/`medium`/`bold`).
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/pretendard-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/pretendard-semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/pretendard-extrabold.woff2") format("woff2");
}

// 앱 셸 — 루트 레이아웃이 뷰포트 높이를 채우고 세로로 쌓이는 구조.
// 푸터를 바닥에 붙이거나 본문 영역만 스크롤시키는 화면들이 이 전제에 기댄다.
html,
body {
  block-size: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;

  // @fox 밖 텍스트의 서체. 디자인 값이 아니라 layout.tsx가 주입하는 계약 변수를 꽂는
  // 지점이라 여기 둔다 — 이 한 줄이 없으면 `--app-font-sans`를 읽는 곳이 없어 wantedSans가
  // 로드만 되고 아무 데도 적용되지 않는다. @fox 컴포넌트는 각자 토큰으로 Pretendard를
  // 덮어쓰므로 영향을 받지 않는다.
  font-family: var(--app-font-sans, system-ui), system-ui, sans-serif;
}