/* Legal pages (privacy.html, terms.html) on atmyage.app. Standalone: tokens from design/app-v3/README.md, no other stylesheet needed. */
:root{
  --bg:#F3F0FF; --line:#DAD4F2; --ink:#17132B; --ink-2:#3A3555; --ink-3:#5A5575; --ink-4:#6E6A85; --violet:#6B4EFF; --lime:#D6F36B;
  --font:"Plus Jakarta Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
.legal-wrap{max-width:680px;margin:0 auto;padding:0 20px 64px}
.mast{display:flex;align-items:center;gap:12px;height:64px}
a.brand{font-size:18px;font-weight:700;letter-spacing:-.4px;color:var(--ink);text-decoration:none}
.brand .dot{color:var(--violet)}
.mast .pill{border-radius:999px;background:#fff;padding:4px 12px;font-size:12px;font-weight:700;color:var(--ink-3)}

.legal h1{font-size:34px;font-weight:700;letter-spacing:-1.2px;line-height:1.1;margin:28px 0 8px;text-wrap:balance}
.legal .eff{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin:0 0 24px}
.legal .short{padding:20px;border-radius:24px;background:#fff;margin:0 0 24px}
.legal .short h2{margin:0 0 8px;padding:0;border:0;font-size:18px;font-weight:700;letter-spacing:-.3px}
.legal .short ul{margin:0;padding-left:1.1em}
.legal .short li{margin:4px 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.legal nav.toc{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--ink-4)}
.legal nav.toc ol{margin:4px 0 0;padding-left:1.4em}
@media (min-width:480px){.legal nav.toc ol{columns:2;column-gap:16px}}
.legal nav.toc li{break-inside:avoid}
.legal nav.toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.legal h2{font-size:20px;font-weight:700;letter-spacing:-.4px;line-height:1.25;margin:32px 0 8px;padding-top:16px;border-top:1px solid var(--line);scroll-margin-top:16px}
.legal h3{font-size:16px;font-weight:700;margin:20px 0 4px;color:var(--ink)}
.legal p,.legal li{font-size:16px;line-height:1.6;color:var(--ink-2)}
.legal p{margin:0 0 12px}
.legal ul,.legal ol{margin:0 0 12px;padding-left:1.25em}
.legal li{margin:4px 0}
.legal strong{color:var(--ink);font-weight:700}
.legal a{color:var(--violet);text-decoration:none;border-bottom:1px solid #C9C2E8;overflow-wrap:anywhere}
.legal a:hover{border-color:var(--violet)}
.legal table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;margin:0 0 16px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:8px 8px 8px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.legal th{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.legal address{font-style:normal}
.legal footer{margin-top:40px;border-top:1px solid var(--line);padding-top:12px;font-size:12px;line-height:1.55;color:var(--ink-4)}
.legal footer p,.legal footer li{font-size:12px;line-height:1.55;color:var(--ink-4)}
.legal footer a{color:var(--ink-2);border-color:#C9C2E8}
/* Language toggle (한국어 | English): plain small text, the active one underlined */
.legal .lang-switch{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:14px;line-height:1.4;color:var(--ink-4)}
.legal .lang-switch.bottom{margin:32px 0 0}
.legal .lang-switch a{color:var(--ink-3);border:0;border-bottom:1px solid transparent;padding:2px 0;font-weight:600}
.legal .lang-switch a:hover{border-bottom-color:#C9C2E8}
.legal .lang-switch a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
/* Korean: Plus Jakarta Sans has no Hangul, so the stack falls through to the system Korean face; keep words whole at line ends */
.legal [lang="ko"]{word-break:keep-all;overflow-wrap:anywhere}
.legal [lang="ko"] h1{letter-spacing:-.5px}
.legal [lang="ko"] th,.legal [lang="ko"] td{overflow-wrap:normal} /* keep "Cloudflare"/"RevenueCat" whole so auto table layout gives the column its width */
a:focus-visible{outline:3px solid var(--violet);outline-offset:3px}