/* Shared styles for the static legal pages (/privacy, /terms, /refund).
   Plain CSS, no build step: these pages must render without JavaScript.
   Colours are copied from src/styles/tokens.css.

   Every document rule is scoped to `main`. The header and footer on these pages
   are the site's own SiteNav/SiteFooter, injected by scripts/prerender.mjs and
   styled by the app's Tailwind bundle, which this file is loaded after — an
   unscoped `p` or `a` rule here would outrank a Tailwind utility there. */

:root {
  --ink-900: #0e0f1c;
  --ink-700: #383b52;
  --ink-200: #e2e3ea;
  --ink-50: #f7f8fb;
  --blue-500: #5a63ff;
  --blue-600: #4750e6;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
}

/* The site's page container, so the document lines up with SiteNav and with every
   section on /about: --container-page wide, px-6 gutter, at every width. The article
   fills it edge to edge — no narrower measure on top, by decision. */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 24px;
  color: var(--ink-700);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

main a { color: var(--blue-500); }
main a:hover { color: var(--blue-600); }

/* Type is the site's own scale, measured on /about rather than invented here:
   body 16/1.7/400 · small 14/1.6 · the document title takes the step the section
   headings take (28 → 36, 800) and an article heading the step the card headings
   take (18/1.65/700). Sizes and weights, not colours — the document stays ink-900
   on ink-700, which is darker than the marketing pages by design. */
main .lang { margin-top: 32px; font-size: 14px; line-height: 1.6; }
main .lang span { color: var(--ink-900); font-weight: 600; }
main article { padding-block: 16px 48px; }

main h1 { margin: 16px 0 24px; color: var(--ink-900); font-size: 28px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; }
main h2 { margin: 40px 0 12px; color: var(--ink-900); font-size: 18px; line-height: 1.65; font-weight: 700; }
main p { margin: 0 0 12px; }

main .note { padding: 12px 16px; background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 12px; font-size: 14px; line-height: 1.6; }
main .formula { margin: 12px 0; padding: 12px 16px; background: var(--ink-50); border-radius: 12px; font-weight: 600; color: var(--ink-900); }

main ol, main ul { margin: 0 0 12px; padding-left: 0; }
main ol { list-style: none; }
main ul, main li > ol { padding-left: 1.25em; }
main li { margin-bottom: 8px; }
main li > ol, main li > ul { margin-top: 8px; }

/* The only step the site takes at md: its section heads go 28 → 36. The gutter does
   not change (SiteNav keeps px-6 at every width) and an article heading holds at 18. */
@media (min-width: 768px) {
  main h1 { font-size: 36px; line-height: 1.25; }
}