/* ===========================================================
   WhatWeCare — 법적 고지 문서(개인정보처리방침·이용약관) 공용 스타일
   public/ 아래 정적 HTML(privacy.html, outsound/terms.html)이 공유한다.
   랜딩 페이지(src/)와 독립 — 랜딩을 갈아엎어도 문서는 영향 없음.
   색·글꼴은 src/styles/tokens.css 의 브랜드 토큰을 그대로 옮김.
   =========================================================== */
:root {
  --wwc-navy: #26266b;
  --wwc-blue: #246bd1;
  --wwc-bg-soft: #f5f7fa;
  --wwc-line: #dde3ec;
  --wwc-line-2: #c6d2e1;
  --wwc-ink: #212b36;
  --wwc-ink-2: #454f5b;
  --wwc-ink-3: #637381;
  --font-kr: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--wwc-ink);
  font-family: var(--font-kr);
  font-size: 15.5px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 20px 96px;
}

/* 머리 */
.legal__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--wwc-ink-3);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.legal__brand a { color: inherit; text-decoration: none; }
.legal__brand a:hover { color: var(--wwc-blue); }

.legal h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.25;
  color: var(--wwc-navy);
  letter-spacing: -0.01em;
}

.legal__meta {
  margin: 0 0 36px;
  padding: 12px 16px;
  border: 1px solid var(--wwc-line);
  border-radius: 6px;
  background: var(--wwc-bg-soft);
  color: var(--wwc-ink-2);
  font-size: 14px;
  line-height: 1.7;
}
.legal__meta b { color: var(--wwc-ink); font-weight: 600; }

/* 본문 */
.legal h2 {
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--wwc-line);
  font-size: 19px;
  line-height: 1.4;
  color: var(--wwc-navy);
}
.legal h2:first-of-type { margin-top: 8px; border-top: 0; padding-top: 0; }

.legal h3 {
  margin: 26px 0 8px;
  font-size: 16px;
  color: var(--wwc-ink);
}

.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal li > ul, .legal li > ol { margin-top: 4px; margin-bottom: 4px; }

.legal a { color: var(--wwc-blue); text-decoration: underline; text-underline-offset: 2px; }

.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--wwc-bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
}

/* 표 */
.legal .table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}
.legal th, .legal td {
  border: 1px solid var(--wwc-line-2);
  padding: 9px 11px;
  vertical-align: top;
  text-align: left;
}
.legal th {
  background: var(--wwc-bg-soft);
  color: var(--wwc-ink-2);
  font-weight: 600;
  white-space: nowrap;
}

/* 강조 상자 */
.legal .note {
  margin: 14px 0 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--wwc-blue);
  background: var(--wwc-bg-soft);
  border-radius: 0 6px 6px 0;
  color: var(--wwc-ink-2);
  font-size: 14.5px;
}
.legal .note b { color: var(--wwc-ink); }

/* 사업자 정보·연락처 정의 목록 */
.legal dl.info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 8px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--wwc-line);
  border-radius: 6px;
  font-size: 14.5px;
}
.legal dl.info dt { color: var(--wwc-ink-3); }
.legal dl.info dd { margin: 0; }

/* 꼬리 */
.legal__foot {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--wwc-line);
  color: var(--wwc-ink-3);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 560px) {
  .legal { padding: 32px 16px 72px; }
  body { font-size: 15px; }
  .legal dl.info { grid-template-columns: 1fr; gap: 2px; }
  .legal dl.info dt { margin-top: 8px; }
}

@media print {
  body { font-size: 12pt; }
  .legal { max-width: none; padding: 0; }
  .legal__brand, .legal__foot a { display: none; }
  .legal a { color: inherit; text-decoration: none; }
}