@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
    color: #1f2328;
    background: #f7f7f4;
  }

  body {
    min-width: 320px;
    margin: 0;
  }
}

@layer components {
  .site-shell {
    @apply min-h-screen bg-surface text-ink;
  }

  .site-content-grid {
    @apply mx-auto grid max-w-[1294px] grid-cols-1 px-4 lg:grid-cols-[287px_minmax(0,720px)_287px] lg:px-0;
  }

  .site-section {
    @apply border-b border-line bg-paper;
  }

  .site-section-header {
    @apply px-6 py-8;
  }

  .site-section-body {
    @apply px-6 py-4;
  }

  .post-prose {
    @apply max-w-none text-[17px] leading-8 text-ink;
  }
}