/* FaceCoach hosting — shared design tokens & global components
   Loaded by: index.html, whitepaper.html, support.html, privacy-policy.html
   Do not import into admin/ or email-verified/. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');

:root{
  --teal:#0e7a6a;
  --teal-dark:#0b5046;
  --teal-soft:#e6f2ef;
  --ink:#1d2a27;
  --muted:#5d6b67;
  --line:#e2e8e5;
  --bg:#f5f8f7;
  --surface:#ffffff;
  --warn-bg:#FFF4E6;
  --warn-border:#D97706;
  --warn-text:#92400E;
}

body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Segoe UI','Malgun Gothic',sans-serif;
}

/* Top navigation — shared across 4 pages */
.top-nav{
  display:flex;flex-wrap:wrap;gap:12px 18px;justify-content:center;
  max-width:760px;margin:0 auto 18px;padding:10px 8px;
  font-size:13px;font-weight:700;letter-spacing:.02em;
}
.top-nav a{color:var(--muted);text-decoration:none;}
.top-nav a:hover{color:var(--teal);}
.top-nav a[aria-current="page"]{color:var(--teal-dark);}

/* Brand icon (app icon) — shared across 4 pages */
.brand-icon{
  width:32px;height:32px;border-radius:7px;
  vertical-align:middle;margin-right:10px;
  object-fit:cover;flex:0 0 auto;
}

@media (max-width:520px){
  .top-nav{gap:10px 14px;font-size:12.5px;}
  .brand-icon{width:28px;height:28px;border-radius:6px;}
}