/* Shared styling for 연예견's public pages (about / support / terms / privacy).
   These live OUTSIDE the React/Tailwind build — Cloudflare Pages serves them as
   static HTML at clean URLs (/about, /terms, …) before the SPA fallback. Plain
   CSS that mirrors the app's design tokens (src/index.css) so the pages feel
   like 연예견. */

:root {
  --cream: #fff8f0;
  --ink: #2b2330;
  --ink-soft: #6b6470;
  --brand: #ff5a2c;       /* brand-500 */
  --brand-dark: #ed4517;  /* brand-600 */
  --celeb: #7c5cff;       /* 연예인 */
  --public: #2bb3a3;      /* 일반인 */
  --line: rgba(43, 35, 48, 0.1);
  --card: #ffffff;
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe8dd 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, #efe7ff 0%, transparent 50%),
    #f6f1ea;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Korean: break lines at spaces/punctuation, never between syllables. */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.7;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* top nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 960px; margin: 0 auto; padding: 20px 24px;
}
.nav .brand { font-family: 'Jua', sans-serif; font-size: 24px; color: var(--brand-dark); }
.nav .links a { margin-left: 18px; font-weight: 700; font-size: 14px; color: var(--ink-soft); }

/* doc container (legal + support) */
.wrap { max-width: 760px; margin: 0 auto; padding: 8px 24px 56px; }
.doc h1 { font-family: 'Jua', sans-serif; font-size: 30px; margin: 24px 0 6px; }
.doc .meta { color: var(--ink-soft); font-size: 13px; margin-bottom: 24px; }
.doc h2 { font-size: 18px; margin: 30px 0 10px; }
.doc h3 { font-size: 15px; margin: 18px 0 6px; }
.doc p, .doc li { font-size: 15px; color: #34303a; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin: 4px 0; }
.doc strong { color: var(--ink); }

/* callout */
.callout {
  background: #fff1ed; border: 1px solid #ffd6c7; border-radius: 16px;
  padding: 14px 16px; font-size: 14px; color: #7a2d16; margin: 18px 0;
}

/* table (privacy: 수집 항목 / 위탁) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 480px; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: #faf4ee; font-weight: 700; }

/* footer */
.footer {
  max-width: 760px; margin: 0 auto; padding: 26px 24px 64px;
  border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px;
}
.footer .brand { font-family: 'Jua', sans-serif; color: var(--brand-dark); font-size: 18px; display: block; margin-bottom: 8px; }
.footer a { color: var(--ink-soft); font-weight: 700; margin-right: 16px; }