/* ==========================================================================
   Base — reset + 페이지 뼈대 (좌측 고정 Hero / 우측 스크롤 콘텐츠)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 1440px;              /* JS 없이 열면 데스크톱 화면 + 가로 스크롤 (fit.js가 풀어 준다) */
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  letter-spacing: var(--tracking-ko);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

.page {
  display: grid;
  grid-template-columns: var(--aside-width) minmax(0, 1fr);
  min-height: 100vh;
}

.content {
  min-height: 100vh;
  background: var(--color-white);
}

/* 섹션(푸터 포함) 사이 간격 */
.content > * + * {
  margin-top: var(--section-gap);
}

/* ---- 1024~1439px: 1440 데스크톱 화면을 비율 그대로 축소 ---------------------
   js/site/fit.js가 html에 data-fit과 --fit(= 화면 폭 / 1440)을 넣는다.
   zoom 안에서는 100vh도 함께 줄어들어서 Hero 높이는 --fit으로 나눠 되돌린다. */
html[data-fit] body {
  min-width: 0;
}

html[data-fit] .page {
  width: 1440px;
  zoom: var(--fit);
}

html[data-fit] .hero {
  height: calc(100vh / var(--fit));
}