/* SlaAiBot 웹 공통 스타일 — 디자인 토큰 + 기본 타이포 + 전역 내비(GNV).
   랜딩·가이드·구독 페이지가 공유한다(통일성·드리프트 방지). 페이지별 스타일은 각 페이지 인라인. */

/* 라이트(흰 배경) 테마 고정 — 다크모드 기기에서도 흰 배경으로 보이게 dark override는 두지 않는다 */
:root{
  color-scheme: light;  /* 다크모드 기기에서도 폼·iframe(텔레그램 위젯) 등 UA 요소를 라이트로 렌더 */
  --bg:#ffffff; --panel:#ffffff; --ink:#111418; --muted:#5b6470;
  --line:#e6e9ee; --accent:#e31937; --accent-ink:#ffffff; --chip:#f4f5f7;
  --brand-bot:#d4a017;  /* 워드마크 'Bot' — 밝은 골드옐로우 (흰 배경 시인성 유지) */
  --ok:#1e9e5a; --err:#d64545;
  --shadow:0 1px 2px rgba(17,20,24,.04),0 8px 24px rgba(17,20,24,.06);
}

*{box-sizing:border-box}
html,body{margin:0}
/* 스크롤바 자리를 항상 예약 — 페이지 길이에 따라 세로 스크롤바가 생겼다 사라지며
   가운데 정렬된 콘텐츠(나브·워드마크)가 좌우로 튀는 것을 막는다 */
html{scrollbar-gutter:stable}
body{
  background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
    "Malgun Gothic","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* 전역 내비(GNV) — 페이지 컨테이너 안에 두면 그 페이지 콘텐츠 폭에 맞춰 정렬된다 */
.topnav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.topnav .brand{font-weight:800; font-size:18px; line-height:1; text-decoration:none; letter-spacing:-.01em; color:var(--ink)}
.topnav .brand .mark{color:var(--accent)}
/* 워드마크 3색: Sla=빨강(.mark), Ai=검정(기본 ink), Bot=골드(.mark-bot) — 나브·배너 공용 */
.mark-bot{color:var(--brand-bot)}
/* line-height를 고정 — 페이지 body의 line-height(가이드 1.7 vs 홈·구독 1.6)를
   상속하면 나브 높이가 페이지마다 달라져 아래 콘텐츠가 밀린다 */
.topnav .links{display:flex; align-items:center; gap:12px; font-size:14.5px; line-height:1.2}
/* 밑줄 공간(2px+3px)을 모든 링크가 항상 확보 → 현재 탭 표시가 나브 높이를 바꾸지 않음 */
.topnav .links a{text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; padding-bottom:3px}
.topnav .links a:hover{color:var(--ink)}
/* 현재 페이지 탭 강조 (aria-current="page") — 진한 글자 + 빨강 밑줄.
   폭이 변하는 font-weight는 쓰지 않는다(글자폭이 바뀌면 옆 항목이 밀려 레이아웃이 흔들림). */
.topnav .links a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}