/* ============================================================
   SeamStream — Legal pages (Privacy / Terms · EN/KO)
   Re-themed to the new ssm8.app landing tokens (2026-06-27).
   One file drives all 4 legal pages.
   Self-contained: styles body + nav + .legal-* + footer.
   ============================================================ */
:root{
  color-scheme: dark;

  /* --- surfaces --- */
  --bg:        #0A111B;   /* base */
  --panel:     #0E1929;   /* card / surface */
  --panel-2:   #0C1525;   /* fainter surface */
  --panel-3:   #0F1B2B;   /* nested tile (table head / highlight) */

  /* --- borders --- */
  --line:      #1E2E44;   /* default border */
  --line-soft: #16243A;   /* faint divider */
  --line-nav:  #18253A;   /* nav / footer hairline */

  /* --- accent (teal — the only accent) --- */
  --teal:      #7CD1D8;
  --teal-ink:  #0A111B;   /* text on teal */
  --teal-bd:   #3E6A72;   /* teal-tinted border (hover) */

  /* --- text --- */
  --ink:       #EAF1F8;   /* body text */
  --ink-soft:  #9DB1C6;   /* secondary */
  --ink-dim:   #7E93A8;   /* dim */
  --ink-faint: #5E748C;   /* faintest (mono labels) */

  --grid:      rgba(124,209,216,.05);
  --max: 1180px;
  --r: 14px;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -30px rgba(0,0,0,.7);

  /* aliases so existing .legal-* markup keeps working */
  --accent: var(--teal);
  --txt: var(--ink);
  --txt2: var(--ink-soft);
  --txt3: var(--ink-dim);
  --border: var(--line);
  --bg-soft: var(--panel-2);

  --font-sans: "Plus Jakarta Sans", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(120% 60% at 100% -10%, rgba(124,209,216,.10), transparent 60%),
    radial-gradient(90% 50% at -10% 0%, rgba(30,46,68,.55), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--grid) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
          mask:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
}
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--font-mono); }

/* ============ nav (matches landing) ============ */
nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px) saturate(1.2);
  background:rgba(10,17,27,.82); border-bottom:1px solid var(--line-nav); }
nav .wrap{ max-width:var(--max); margin-inline:auto; padding-inline:clamp(18px,5vw,28px);
  display:flex; align-items:center; gap:24px; height:64px; }
.brand-logo{ height:21px; width:auto; display:block; }
nav .links{ display:flex; gap:22px; margin-left:auto;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; color:var(--ink-soft); }
nav .links a:hover{ color:var(--ink); }
.lang{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--teal);
  border:1px solid #2A3C55; border-radius:8px;
  display:inline-flex; align-items:center; height:36px; padding:0 .85em; line-height:1; transition:.2s; }
.lang:hover{ border-color:var(--teal); color:var(--teal); }
.btn{ font-family:var(--font-sans); font-weight:700; font-size:.9rem;
  padding:.62em 1.15em; border-radius:8px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer; transition:.2s; }
nav .btn{ height:36px; padding-top:0; padding-bottom:0; }
.btn-go{ background:var(--teal); color:var(--teal-ink); }
.btn-go:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-ghost{ border-color:#2A3C55; color:var(--ink); }
.btn-ghost:hover{ border-color:var(--teal-bd); color:var(--teal); background:rgba(124,209,216,.06); }
@media(max-width:860px){ nav .links{ display:none; } nav .lang{ margin-left:auto; } }
@media(max-width:560px){ nav .wrap{ gap:10px; } .brand-logo{ height:18px; } nav .btn{ font-size:.85rem; padding-left:.9em; padding-right:.9em; } nav .lang{ font-size:.74rem; padding:0 .7em; } nav .btn-go{ display:none; } }

/* ============ legal content ============ */
main{ display:block; }
.legal-wrap{ max-width:820px; margin:0 auto; padding:clamp(48px,8vw,88px) clamp(20px,5vw,28px) 100px; }

.legal-back{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono);
  font-size:.76rem; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:30px; transition:.2s; }
.legal-back:hover{ color:var(--teal); }

.legal-badge{ font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  display:inline-flex; align-items:center; gap:.5em; margin-bottom:18px; }
.legal-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); }

.legal-title{ font-family:var(--font-sans);
  font-size:clamp(2rem,5vw,3rem); font-weight:800; letter-spacing:-.02em; line-height:1.1;
  color:var(--ink); margin-bottom:14px; }
.legal-meta{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint);
  letter-spacing:.04em; margin-bottom:44px; padding-bottom:30px; border-bottom:1px solid var(--line); }

.legal-section{ margin-bottom:42px; }
.legal-section h2{ font-family:var(--font-sans); font-size:1.32rem; font-weight:800; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 16px; }
.legal-section h3{ font-size:1.04rem; font-weight:700; color:var(--ink);
  margin:24px 0 9px; }
.legal-section p{ font-size:1rem; line-height:1.78; color:var(--ink-soft); margin-bottom:13px; text-wrap:pretty; }
.legal-section ul{ margin:0 0 13px; padding-left:22px; }
.legal-section ul li{ font-size:1rem; line-height:1.75; color:var(--ink-soft); margin-bottom:8px; }
.legal-section ul li::marker{ color:var(--teal); }
.legal-section strong{ color:var(--ink); font-weight:700; }
.legal-section a{ color:var(--teal); }
.legal-section a:hover{ text-decoration:underline; }

.legal-highlight{ background:var(--panel-3); border:1px solid var(--line);
  border-left:3px solid var(--teal); border-radius:0 10px 10px 0;
  padding:16px 20px; margin:22px 0; font-size:.97rem; line-height:1.7; color:var(--ink-soft); }
.legal-highlight strong{ color:var(--teal); }

.legal-table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:.94rem;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.legal-table th{ text-align:left; font-family:var(--font-mono); font-weight:600;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  padding:12px 14px; background:var(--panel-3); border-bottom:1px solid var(--line); }
.legal-table td{ padding:13px 14px; border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft); vertical-align:top; line-height:1.65; }
.legal-table tr:last-child td{ border-bottom:none; }

.contact-block{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; font-size:.97rem; line-height:1.8; color:var(--ink-soft); box-shadow:var(--shadow); }
.contact-block strong{ color:var(--ink); }
.contact-block a{ color:var(--teal); }
.contact-block a:hover{ text-decoration:underline; }

/* ============ footer (matches landing) ============ */
footer{ border-top:1px solid var(--line-nav); padding:34px 0; color:var(--ink-faint); font-size:.86rem; }
footer .wrap{ max-width:var(--max); margin-inline:auto; padding-inline:clamp(18px,5vw,28px);
  display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
footer .brand-logo{ height:18px; opacity:.92; }
footer .links{ display:flex; gap:18px; margin-left:auto;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em; color:var(--ink-soft); }
footer .links a:hover{ color:var(--teal); }

#seam-bubble{ background-color:#7CD1D8 !important; color:#0A111B !important; }
#seam-bubble:hover{ box-shadow:0 6px 28px rgba(124,209,216,.5) !important; }