:root {
  --brand: #2f6bff;
  --brand-strong: #5b8dff;
  --brand-soft: rgba(47, 107, 255, 0.14);
  --bg: #0a0e1c;
  --panel: #131a2e;
  --border-soft: #1a2138;
  --text: #e8ecf7;
  --text-secondary: #97a3c2;
  --text-muted: #626d8c;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --radius-md: 12px;
  --radius-lg: 20px;
  --font-display: 'M PLUS 1p', 'Noto Sans JP', system-ui, sans-serif;
  --font-body: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.8;
}

a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

.legal-header {
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 24px;
}

.legal-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  max-width: 760px;
  margin: 0 auto;
}

.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 100px;
}

.legal-wrap h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.legal-updated { color: var(--text-muted); font-size: 13px; margin-bottom: 40px; }

.legal-wrap h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 40px 0 14px;
  color: var(--text);
}

.legal-wrap p, .legal-wrap li { color: var(--text-secondary); font-size: 14.5px; }

.legal-wrap ul { padding-left: 20px; }
.legal-wrap li { margin-bottom: 8px; }

table.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}

table.legal-table th, table.legal-table td {
  border: 1px solid var(--border-soft);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

table.legal-table th {
  width: 30%;
  color: var(--text-secondary);
  background: var(--panel);
  font-weight: 700;
}

table.legal-table td { color: var(--text); }

.todo-box {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 32px;
}

.todo-box strong { color: var(--warning); }

.back-link { display: inline-block; margin-top: 40px; font-size: 14px; }