@import url('fonts.css');
/* ─────────────────────────────────────────────────────────────────────────────
   veil-doc.css — 문서·유틸리티 페이지 공통 디자인 토큰 (2026-08-20)

   왜 있나: 정책·보안·상태·DPA·변경이력·문의·404·로고 페이지는 각자 <style> 블록을
   들고 있어서 시간이 지나며 팔레트가 갈라졌다. 실측(2026-08-20):
     policy   → 배경 #fbf9f4(크림) · 제목 AppleMyungjo(명조) · gold #987337 · blue #1b33ff
     security → 배경 #f7f7f9 · 산세리프 · blue #1e3aff
     contact  → 배경 #f7f8fb,  payment-* → #f6f7fb,  logos → #F8F5EF + Noto Serif KR
   전부 "옛 Bold/Swiss 시절" 잔재다. 지금 표준은 app-modern.css 의 모던 SaaS 토큰이다.

   어떻게 쓰나: 각 문서 페이지의 인라인 <style> **뒤**(</head> 직전)에 링크한다.
   같은 특이도에서 나중에 온 선언이 이기므로, 페이지별 CSS를 뜯어고치지 않고
   :root 변수만 표준값으로 덮어쓴다.

   로고 색은 브랜드 정책이다 — 워드마크·마크는 항상 골드(#CDA00A). 파랑은 액센트 전용.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* 표준 팔레트 (app-modern.css 와 동일) */
  --bg: #F7F7F9;
  --bg2: #F1F1F4;
  --bg-soft: #F7F7F9;
  --card: #FFFFFF;
  --ink: #141419;
  --ink2: #3A3A42;
  --ink3: #65656F;
  --muted: #65656F;
  --line: #E4E5EA;
  --blue: #1E3AFF;
  --blue-deep: #1024C7;
  --gold: #CDA00A;
  --gold-deep: #B08A06;
  --font: 'Geist','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI','Malgun Gothic',Roboto,'Helvetica Neue',Arial,sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink2);
  font-family: var(--font);
}

/* 제목은 본문과 같은 산세리프로. 명조/세리프 제목은 옛 디자인이다. */
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  letter-spacing: -0.01em;
}

a { color: var(--blue); }

/* 브랜드 마크는 골드 고정 (VEIL 로고 정책, 2026-08-03) */
.brand svg,
.vh-logo svg { color: var(--gold); }

/* ── 2026-08-24 픽셀 감사: 문서 세트 표준화 ─────────────────────────────
   1) 본문 폭: 각 페이지 인라인 .wrap 이 820/880/940px 로 갈라져 있었다.
      파일별로 860px 로 통일했다(sed).
   2) 제목 리듬: 장문 문서(policy·dpa·security) 간 h2 크기·간격 드리프트
      (21.6/20.48px · 58/48/46px)를 여기서 흡수한다.
      단 카드 내부 제목(.check h2 · .release h2 등)은 선택도가 높아 영향 없다.
   3) 표: policy(투명+행 구분선) vs dpa(흰 카드형) 두 갈래였다. 카드형으로 통일. */
h2 { font-size: 1.35rem; margin: 52px 0 16px; }
h3 { font-size: 1rem; }

table {
  width: 100%;
  background: var(--card);
  border-collapse: collapse;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
th { color: var(--ink); }