/* =========================================================
   legal.css — 개인정보처리방침 전용 스타일
   (가독성 위주의 문서 타이포그래피)
   ========================================================= */

/* 홈은 1160px 그리드지만 긴 법률 문서를 그 폭으로 읽기는 어렵습니다.
   토큰만 덮어써서 이 페이지의 .container 전체를 좁힙니다. */
.page-legal {
  --max-width: 760px;
  background: var(--color-bg-alt);
}

.legal-hero {
  padding-block: 56px 24px;
}

.legal-hero h1 {
  font-size: clamp(28px, 4vw, 40px);
}

.legal-hero .intro {
  margin-top: 14px;
  color: var(--color-muted);
  font-size: 15px;
}

/* 크림 바탕 위에 흰 문서 카드를 올리는 구조입니다. */
.legal-body {
  margin-bottom: 80px;
  padding: 48px;
  border-radius: var(--radius-lg);
  background: #fff;
  overflow-wrap: break-word;
}

.legal-body h2 {
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.legal-body section:first-of-type h2 {
  margin-top: 0;
}

.legal-body p,
.legal-body li {
  font-size: 15.5px;
  line-height: 1.85;
}

.legal-body p + p {
  margin-top: 10px;
}

.legal-body ul {
  margin: 12px 0;
  padding-left: 22px;
}

.legal-body li {
  margin-bottom: 6px;
}

.legal-body strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* ---------- 한눈에 보기 요약 ---------- */
.summary {
  margin-bottom: 40px;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
}

.summary h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 16px;
  color: var(--color-primary-ink);
}

.summary ul {
  margin: 0;
  padding-left: 20px;
}

.summary li {
  font-size: 15px;
}

/* ---------- 표 ---------- */
/* 표는 최소 폭을 넘기면 가로로만 스크롤시킵니다 — 페이지 전체가 밀리지 않게 wrap에 겁니다. */
.tablewrap {
  overflow-x: auto;
  margin: 16px 0;
}

.legal-body table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}

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

.legal-body th {
  background: var(--color-bg-alt);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 보조 요소 ---------- */
.note {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 14px;
}

.callout {
  margin: 12px 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  font-size: 15px;
}

.legal-dates {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .legal-body {
    padding: 28px 22px;
    margin-bottom: 56px;
  }

  .summary {
    padding: 20px 22px;
  }
}