/* 법적 고지 화면 — 개인정보 처리방침(/privacy), 어린이용 안내(/privacy/kids).
   색·간격·폰트는 tokens.css 변수만 사용. */

/* ── 공통: 긴 글 카드 ───────────────────────── */
.legal-wrap { max-width: 760px; margin: 0 auto; padding-top: var(--sp-6); padding-bottom: var(--sp-7); }
.legal-title { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); letter-spacing: -.01em; }
.legal-meta { margin: 0 0 var(--sp-5); color: var(--text-faint); font-size: var(--fs-sm); }
.legal-sec { margin-top: var(--sp-6); scroll-margin-top: var(--sp-8); }
.legal-sec h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.legal-sec p { margin: 0 0 var(--sp-2); color: var(--text-muted); }
.legal-sec ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); color: var(--text-muted); }
.legal-sec li { margin-bottom: var(--sp-1); }
.legal-note { font-size: var(--fs-sm); }
.legal-pending {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--brand-gold-soft);
  color: var(--text) !important;
}

/* 어린이용 안내로 가는 링크 */
.legal-kids-link {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--brand-gold-soft);
  color: var(--text);
  text-decoration: none;
}
.legal-kids-link strong { color: var(--brand-red); }
.legal-kids-link span { color: var(--text-muted); font-size: var(--fs-sm); }
.legal-kids-link:hover strong { text-decoration: underline; }

/* 목차 */
.legal-toc {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.legal-toc h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--sp-5); }
.legal-toc li { margin-bottom: var(--sp-1); font-size: var(--fs-sm); break-inside: avoid; }
.legal-toc a { color: var(--text-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--brand-red); text-decoration: underline; }

/* 표 — 좁은 화면에서는 가로 스크롤 */
.legal-table-wrap { margin: 0 0 var(--sp-3); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-sm); }
.legal-table th,
.legal-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.legal-table thead th { background: var(--surface-sunken); color: var(--text); font-weight: 600; }
.legal-table tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }
.legal-table td { color: var(--text-muted); }
.legal-table code { font-family: var(--font-mono); font-size: var(--fs-xs); }

/* 보호책임자 */
.legal-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4);
  margin: 0 0 var(--sp-2);
  color: var(--text-muted);
}
.legal-dl dt { font-weight: 600; color: var(--text); }
.legal-dl dd { margin: 0; }

@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
}

/* ── 어린이용 안내(/privacy/kids) — 큰 글씨 카드 ───────────── */
.legal-kids { max-width: 880px; }
.legal-kids-head { text-align: center; margin-bottom: var(--sp-6); }
.legal-kids-head .legal-title { font-size: var(--fs-2xl); }
.legal-kids-intro { margin: 0; font-size: var(--fs-lg); color: var(--text-muted); }

.legal-kids-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin: 0; padding: 0; list-style: none;
}
.legal-kids-card {
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.legal-kids-icon { font-size: var(--fs-2xl); line-height: 1; margin-bottom: var(--sp-3); }
.legal-kids-card h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); color: var(--brand-red); }
.legal-kids-card ul { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-lg); line-height: 1.6; }
.legal-kids-card li { margin-bottom: var(--sp-2); }

/* 버튼 모양은 app.css .gn-btn — 여기서는 카드 안 배치만 */
.legal-kids-btn { align-self: flex-start; margin-top: var(--sp-3); }

.legal-kids-foot { margin-top: var(--sp-6); text-align: center; color: var(--text-muted); }
.legal-kids-foot p { margin: 0 0 var(--sp-2); }
.legal-kids-foot .legal-kids-btn { margin-top: 0; }