:root {
  color-scheme: dark;
  --cyan: #49f8ff;
  --pink: #ff3fd2;
  --ink: #f5f7ff;
  --muted: #aab3d1;
  --panel: #0f1630;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 50% 0, #18265a 0, #090d24 36rem, #050817 100%);
  font-size: 16px;
  line-height: 1.72;
}

.legal-shell { width: min(880px, calc(100% - 32px)); margin: auto; padding: 28px 0 96px; }
.legal-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 4px 28px; }
.legal-brand { color: white; font-size: 13px; font-weight: 900; letter-spacing: .15em; text-decoration: none; }
.legal-nav div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
.legal-nav a:not(.legal-brand) { color: var(--muted); font-size: 12px; }
.legal-header { margin: 24px 0 42px; text-align: center; }
.legal-header h1 { margin: 0; color: transparent; background: linear-gradient(90deg, var(--cyan), #fff, var(--pink)); background-clip: text; font-size: clamp(2rem, 6vw, 4rem); line-height: .98; letter-spacing: -.05em; }
.legal-meta { color: var(--muted); }
.legal-card { margin: 28px 0; padding: clamp(22px, 5vw, 40px); border: 1px solid #ffffff16; border-radius: 24px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 24px 80px #0007; }
.legal-card h2 { margin: 1.8em 0 .35em; color: var(--cyan); font-size: 1.22rem; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card a { color: var(--cyan); }
.legal-card li { margin: .35em 0; }
.legal-divider { margin: 56px 0; border: 0; border-top: 1px solid #ffffff1c; }
.legal-footer { color: var(--muted); font-size: .88rem; text-align: center; }

@media (max-width: 560px) {
  .legal-shell { padding-top: 20px; }
  .legal-nav { align-items: flex-start; }
  .legal-nav div { display: grid; gap: 5px; text-align: right; }
}