/* 14-legal-pages.css — /privacy/ and 404.html: the KO/EN switch, the reading column,
   numbered headings, sideways-scrolling tables and the consent button. */

/* ── LEGAL PAGES (/privacy/) ────────────────────────────────────────────────
   A reading column, not a layout: legal text is read top to bottom, often by
   someone looking for one clause, so it gets a comfortable measure, numbered
   headings with anchors, and tables that scroll sideways on a phone rather
   than crushing their columns. Both languages are in the page; css/footer.css
   hides the one html[lang] does not match. */
.legal {
  margin-top: var(--header-h);
  padding: var(--section-space) var(--gutter) calc(var(--section-space) * 2);
}
.legal-switch {
  display: flex;
  gap: var(--sp-2);
  margin: 0 0 var(--block-space);
  font-size: var(--text-label);
}
.legal-switch button {
  font: inherit;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}
.legal-switch button:hover { color: var(--ink); }
html[lang^="ko"] .legal-switch [data-set-lang="ko"],
html:not([lang^="ko"]) .legal-switch [data-set-lang="en"] { color: var(--ink); border-color: var(--ink); }

.legal-doc {
  max-width: 46rem;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--ink-soft);
}
html[lang^="ko"] .legal-doc { line-height: 1.85; word-break: keep-all; }
.legal-doc h1 {
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--item-space);
}
.legal-doc .legal-meta { font-size: var(--text-label); color: var(--muted); margin: 0 0 var(--block-space); }
.legal-doc h2 {
  font-size: var(--text-body-large);
  font-weight: 700;
  color: var(--ink);
  margin: var(--section-space) 0 var(--item-space);
}
/* every anchor target — headings and the table rows linked from the footer,
   the contact form and the consent banner — clears the fixed header */
.legal-doc [id] { scroll-margin-top: calc(var(--header-h) + var(--block-space)); }
.legal-doc h3 { font-size: var(--text-body); font-weight: 700; color: var(--ink); margin: var(--block-space) 0 var(--tight-space); }
.legal-doc p,
.legal-doc ul,
.legal-doc ol { margin: 0 0 var(--item-space); }
.legal-doc ul,
.legal-doc ol { padding-left: 1.3em; }
.legal-doc li { margin-bottom: var(--tight-space); }
.legal-doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-doc strong { color: var(--ink); font-weight: 700; }
.legal-doc .legal-toc { padding-left: 1.3em; margin-bottom: var(--block-space); }
.legal-doc .legal-toc li { margin-bottom: 0; }

.legal-table-wrap { overflow-x: auto; margin: var(--item-space) 0 var(--block-space); -webkit-overflow-scrolling: touch; }
.legal-doc table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--text-body); line-height: 1.6; }
.legal-doc th,
.legal-doc td { text-align: left; vertical-align: top; padding: var(--sp-1) var(--sp-3) var(--sp-1) 0; border-bottom: 1px solid var(--rule); }
.legal-doc th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.legal-doc .legal-consent-btn {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink);
  padding: var(--button-padding);
  cursor: pointer;
}
.legal-doc .legal-consent-btn:hover { background: var(--ink); color: var(--bg); }