/* 개인정보처리방침·이용약관이 함께 쓰는 모양.

   ── 왜 앱(React) 안이 아니라 정적 페이지인가
   이 두 문서는 로그인 없이 열려야 한다. 구글이 동의 화면에 걸 주소로 요구하기도
   하고, 애초에 "가입하기 전에 읽는 글"이라 로그인 뒤에 두면 뜻이 없다. 앱은 통째로
   로그인 뒤에 있으므로 여기만 따로 뺀다 — 덤으로 앱이 깨져도 이 문서는 열린다.

   vercel.json의 CSP가 인라인 <style>은 막고 style-src에 'self'를 허용하므로
   파일로 분리한다. */

:root {
  --ink: #E9EDF1; --ink2: #B4BEC8; --muted: #8A95A1; --rule: #2B323A;
  --paper: #14181C; --card: #1C2127; --accent: #D9A544;
}
@media (prefers-color-scheme: light) {
  :root {
    --ink: #14181D; --ink2: #3E464F; --muted: #79838E; --rule: #DDE1E3;
    --paper: #FFFFFF; --card: #FFFFFF; --accent: #8A6A1E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.75;
  font-size: 15px;
}

.wrap { max-width: 780px; margin: 0 auto; padding: 34px 22px 72px; }

header { border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: 26px; }
header a.home { color: var(--muted); text-decoration: none; font-size: 13.5px; }
header a.home:hover { color: var(--ink); }
h1 { font-size: 25px; font-weight: 700; letter-spacing: -.01em; margin: 12px 0 6px; }
.updated { font-size: 13px; color: var(--muted); margin: 0; }

h2 {
  font-size: 17px; font-weight: 700; margin: 34px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--rule);
}
h3 { font-size: 15px; font-weight: 700; margin: 20px 0 6px; color: var(--ink); }
p { margin: 0 0 12px; color: var(--ink2); }
ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink2); }
li { margin-bottom: 5px; }
strong { color: var(--ink); font-weight: 600; }

table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
td { color: var(--ink2); }

/* 그 기간이 회사가 정한 것이 아니라 법이 정한 것임을 밝힌다 — 왜 이렇게 오래
   보관하는지 묻는 사람에게 답이 되어야 한다. */
.lawref { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.note {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 12px 15px; margin: 14px 0; font-size: 14px; color: var(--ink2);
}

footer {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--muted);
}
footer a { color: var(--muted); }