/* ====== 페이지 컨테이너 / 그리드 ====== */
.app {
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr;
  min-height: 100vh;
}
.page {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: var(--g-24) var(--g-32);
  width: 100%;
}
.hero { margin: 0 0 var(--g-24); display: flex; flex-direction: column; gap: var(--g-8); }
.hero h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-26);
  letter-spacing: -.01em;
  line-height: 1.25;
  font-weight: 600;
}
.hero .lede {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--ink-2);
  max-width: 64ch;
}

/* 그리드 — 가변 폭(min 280px) · 가변 높이(align-items:start) */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--g-16); align-items: start; }
.grid--stack { display: grid; grid-template-columns: 1fr; gap: var(--g-12); align-items: start; }

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .page { padding: var(--g-16); }
  .grid { grid-template-columns: 1fr; }
}