/* 법적 고지 문서 공용 스타일 (privacy.html · terms.html · support.html).
   랜딩의 마케팅 레이아웃과 달리 긴 본문을 읽기 위한 좁은 폭·넉넉한 행간을 쓴다.
   색·간격 토큰은 styles.css의 :root를 그대로 재사용하므로 styles.css를 먼저 로드할 것. */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-lg);
}

.legal h1 {
  font-size: 28px;
  margin-bottom: var(--space-sm);
}

.legal .legal-meta {
  color: var(--neutral-text-muted);
  font-size: 14px;
  margin-bottom: var(--space-xl);
}

.legal h2 {
  font-size: 17px;
  margin: var(--space-xl) 0 var(--space-sm);
}

/* 한 조항 안을 5-1 / 5-2처럼 나눌 때 쓴다(예: 위탁 vs 국외이전). 스타일이 없으면
   브라우저 기본값이라 h3가 h2보다 크게 나와 계층이 뒤집힌다. */
.legal h3 {
  font-size: 15px;
  margin: var(--space-lg) 0 var(--space-xs);
}

.legal p,
.legal li {
  color: var(--neutral-text-secondary);
  line-height: 1.75;
  font-size: 15px;
}

.legal ul {
  padding-left: 1.2em;
  margin: var(--space-sm) 0;
}

.legal li {
  margin-bottom: 4px;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: 14px;
}

.legal th,
.legal td {
  border: 1px solid var(--neutral-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.legal th {
  background: var(--neutral-bg);
  color: var(--neutral-text-primary);
  font-weight: 600;
}

.legal td {
  color: var(--neutral-text-secondary);
}

/* 표는 좁은 화면에서 페이지 전체를 밀지 않고 자기 안에서만 가로 스크롤되게 한다. */
.legal .table-scroll {
  overflow-x: auto;
}

.legal .callout {
  background: var(--signal-green-bg);
  border-left: 3px solid var(--signal-green);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin: var(--space-lg) 0;
}

.legal .callout p {
  color: var(--neutral-text-primary);
  margin: 0;
}

/* 문의처 등 라벨-값 목록 */
.legal .contact-card {
  background: var(--neutral-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

.legal .contact-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 0;
  font-size: 15px;
}

.legal .contact-row + .contact-row {
  border-top: 1px solid var(--neutral-border);
}

.legal .contact-row .label {
  color: var(--neutral-text-muted);
  flex-shrink: 0;
}

.legal .contact-row a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}