/* legal.css — /p/legal (Terms of Service + Privacy Policy). Standalone page,
   no global nav — just a back link to myPPW. Reuses tokens.css vars only. */

body { margin: 0; background: var(--space-gradient), var(--bg-primary); background-repeat: no-repeat; background-attachment: fixed; }

.lg-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  color: var(--text-primary);
  font-family: var(--font-thai);
}

.lg-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  font-size: 9.6px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4.8px 9.6px 4.8px 8px;
}
.lg-back:hover { color: var(--text-primary); border-color: var(--text-primary); }

/* 2 fully separate tabs (2026-07-08) — only the active section is in flow,
   the other is [hidden]; nothing stacks or scrolls past the other anymore. */
.lg-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 24px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; }
.lg-tabs__btn {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: 600 13px var(--font-thai);
  cursor: pointer;
}
.lg-tabs__btn.is-active { background: rgba(244, 161, 64, 0.14); border-color: var(--accent-gold); color: var(--accent-gold); }

.lg-section[hidden] { display: none; }
.lg-section__title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.lg-section__updated { font-size: 11px; color: var(--text-secondary); margin-bottom: 18px; }
.lg-section ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.lg-section li { font-size: 13px; line-height: 1.6; color: var(--text-primary); }

/* Footer link row — shared "ข้อกำหนดการใช้งาน · นโยบายความเป็นส่วนตัว" row,
   appended by every /p page except Login and Legal itself (2026-07-09).
   Base rule below only covers text styling + horizontal padding (so it
   never sits flush against a narrow viewport's edges) — each consuming
   page's own CSS sets the top/bottom spacing to match ITS OWN container's
   existing bottom padding, so the gap above the footer equals the gap
   below it exactly (rather than one shared guess that's wrong everywhere
   except the page it was tuned for). */
.lg-footer-link { text-align: center; font-size: 11px; color: var(--text-secondary); padding: 0 16px; opacity: 0.81; }
.lg-footer-link a { color: var(--text-secondary); text-decoration: none; }
.lg-footer-link a:hover { color: var(--text-primary); }