/* /privacy·/terms 문서 레이아웃. 색·간격·폰트는 tokens.css 변수만 쓴다 —
 * 이 파일에 새 색값이나 새 간격이 생기면 토큰을 안 쓴 것이다.
 * 폭은 OVERRIDES §10 의 웹 규칙(중앙 정렬, 최대 480px)을 문서 페이지에도 그대로 쓴다. */

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-ko);
  -webkit-text-size-adjust: 100%;
}

body:lang(en) {
  letter-spacing: var(--letter-spacing-en);
}

/* OVERRIDES §10 의 480px 은 카드 '외곽' 폭이다 — content-box 로 두면 좌우 패딩이
 * 더해져 실제 폭이 528px 이 된다. 패딩은 §4 의 "16(모바일) 24(태블릿+)". */
.doc {
  box-sizing: border-box;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

/* 경계는 §10 의 "≤480 폭 100% / 481+ 카드 480px" 과 같은 481px 을 쓴다 —
 * 폭이 고정되는 지점과 패딩이 넓어지는 지점을 다르게 둘 이유가 없다. */
@media (min-width: 481px) {
  .doc {
    padding: var(--space-6) var(--space-6) var(--space-12);
  }
}

/* --- 내비·푸터 ---------------------------------------------------------- */

.doc-nav,
.doc-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  font-size: var(--font-size-sm);
}

.doc-nav {
  margin-bottom: var(--space-8);
}

.doc-footer {
  justify-content: flex-start;
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
}

/* 터치 타깃 44px (OVERRIDES §4). 글자 크기를 키우지 않고 패딩으로 높이를 만든다. */
.doc-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
}

/* --- 본문 --------------------------------------------------------------- */

.doc-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.25;
}

.doc-meta {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

.doc h2 {
  margin: var(--space-12) 0 var(--space-3);
  padding-top: var(--space-6);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.3;
}

.doc p,
.doc li,
.doc dd {
  margin: 0 0 var(--space-3);
}

.doc ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.doc dl {
  margin: 0 0 var(--space-4);
}

.doc dt {
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.doc dd {
  margin-left: 0;
  color: var(--color-muted-foreground);
}

.doc-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

/* --- 링크 --------------------------------------------------------------- */
/* brand 오렌지는 면이나 글자색으로 쓰지 않는다 (OVERRIDES §2) — 밑줄과
 * 포커스 링에만 쓴다. 글자는 foreground 그대로라 대비가 본문과 같다. */

.doc a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.doc a:hover {
  text-decoration-color: var(--color-foreground);
}

.doc a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-tile);
}