@font-face { font-family: 'Kanit'; font-weight: 400; font-display: swap; src: url(/kanit-400.ttf) format('truetype'); }
@font-face { font-family: 'Kanit'; font-weight: 600; font-display: swap; src: url(/kanit-600.ttf) format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/jetbrains-mono-400.ttf) format('truetype'); }

:root {
  color-scheme: dark;
  --bg: #070708;
  --surface: #0f0c0e;
  --line: #2c1b21;
  --line-soft: #1e1418;
  --red: #ff2848;
  --red-bright: #ff5067;
  --white: #f7f3f3;
  --text: #ccc5c9;
  --muted: #91858b;
  --sans: "Kanit", "Noto Sans Thai", "Thonburi", Tahoma, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(141, 16, 38, .32), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 16px/1.85 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; border-radius: 4px; }
::selection { background: #772236; color: #fff; }

.legal-shell { width: min(calc(100% - 4rem), 1080px); margin: auto; min-height: 100svh; display: flex; flex-direction: column; }

.legal-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.brand-lockup { display: inline-flex; align-items: center; color: var(--white); font: 600 1.45rem/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.brand-lockup span { color: var(--red); text-shadow: 0 0 14px rgba(255, 40, 72, .55); }
.brand-mark { width: 40px; height: 40px; margin-right: .6rem; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 40, 72, .28)); }
.legal-header nav { display: flex; gap: clamp(1rem, 3vw, 2.4rem); font-size: .92rem; }
.legal-header nav a { position: relative; color: #c8bfc3; transition: color .2s ease; }
.legal-header nav a:hover, .legal-header nav a[aria-current] { color: #fff; }
.legal-header nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); }

.legal-main { flex: 1; padding: clamp(2.5rem, 6vw, 4.5rem) 0 3.5rem; }
.legal-kicker { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem; color: #a99ba1; font: .68rem/1.5 var(--mono); letter-spacing: .28em; }
.legal-kicker i { width: 30px; height: 1px; background: var(--red); box-shadow: 0 0 8px var(--red); }

.legal-card {
  position: relative;
  max-width: 820px;
  padding: clamp(1.6rem, 4vw, 3rem);
  background: linear-gradient(150deg, rgba(24, 17, 20, .82), var(--surface) 55%);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.legal-card::before { content: ""; position: absolute; top: -1px; left: 12%; width: 45%; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); }
.legal-card h1 { margin: 0 0 .6rem; color: var(--white); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.legal-card h1 + small, .legal-card h1 + p:first-of-type { display: block; color: var(--muted); font: .78rem/1.6 var(--mono); letter-spacing: .06em; margin-bottom: 1.6rem; }
.legal-card h2 { margin: 2.2rem 0 .6rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); color: var(--white); font-size: 1.2rem; font-weight: 600; }
.legal-card p { margin: 0 0 1rem; }
.legal-card ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.legal-card li { margin: .35rem 0; }
.legal-card li::marker { color: var(--red); }
.legal-card a { color: var(--red-bright); border-bottom: 1px solid rgba(255, 80, 103, .35); transition: border-color .2s ease, color .2s ease; }
.legal-card a:hover { color: #ff8193; border-color: currentColor; }
.legal-card > p:last-child { margin: 2rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line-soft); font-size: .92rem; }

.legal-footer { min-height: 84px; display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; border-top: 1px solid var(--line); color: #9b858d; font: .66rem var(--mono); letter-spacing: .18em; }
.legal-footer a:hover { color: #ff718c; }
.legal-footer span { margin-left: auto; }

@media (max-width: 640px) {
  .legal-shell { width: calc(100% - 2rem); }
  .legal-header { flex-direction: column; justify-content: center; gap: .9rem; padding: 1.1rem 0 1rem; }
  .brand-lockup { font-size: 1.3rem; }
  .brand-mark { width: 36px; height: 36px; }
  .legal-header nav { font-size: .85rem; gap: 1.4rem; }
  body { font-size: 15px; }
  .legal-footer { justify-content: center; gap: 1.2rem; padding: 1.4rem 0; }
  .legal-footer span { margin: 0; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }