/* 랜딩 화면 스타일 (M1-N-10 · docs-claude/design 07 D6-11 · 02 · 03 §1).
 *
 * 이 파일에는 **값이 없다.** 색·간격·반경·글자는 전부 `aai-tokens.css` 생성물의 --aai-* 를 읽는다.
 * 그 생성물은 데스크톱·모바일과 같은 JSON(docs-claude/design/tokens/aai-tokens.json)에서 나온다 —
 * 예전에 여기 있던 무채색 6개짜리 별도 팔레트는 지웠다.
 * 다크 전환도 이 파일이 하지 않는다(생성물의 prefers-color-scheme). 스크립트는 0 이다 — CSP 가 막는다.
 *
 * 대표색 없음. 포인트 색(--aai-point-*)은 에이전트 정체성 전용이라 마케팅 면에 쓰지 않는다.
 * 간격은 --aai-space-base(4px 격자)의 배수 — px 로 박으면 브라우저 확대에서 얼어붙는다. */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--aai-canvas);
  color: var(--aai-text);
  font-family: var(--aai-font);
  word-break: keep-all;
}
:is(a):focus-visible {
  outline: 2px solid var(--aai-text);
  outline-offset: 2px;
  border-radius: var(--aai-radius-xs);
}
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--aai-space-base) * 4.5);
  padding: calc(var(--aai-space-base) * 3.5) calc(var(--aai-space-base) * 6);
  background: var(--aai-sidebar);
  border-bottom: 1px solid var(--aai-hairline);
}
header a {
  color: var(--aai-text);
  text-decoration: none;
}
header a:hover {
  text-decoration: underline;
}
header nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--aai-space-base) * 3.5);
  margin-right: auto;
}
header nav a[aria-current="page"] {
  font-weight: var(--aai-weight-semibold);
}
.brand {
  font-weight: var(--aai-weight-semibold);
}
.lang {
  color: var(--aai-text-muted);
}
/* 읽기 기둥 — 03 §2 의 대화 기둥과 같은 규율(긴 줄은 읽기 어렵다). */
main {
  max-width: calc(var(--aai-space-base) * 190);
  margin: 8vh auto;
  padding: 0 calc(var(--aai-space-base) * 6);
  line-height: 1.6;
}
h1 {
  font-size: var(--aai-type-display);
  font-weight: var(--aai-weight-semibold);
  line-height: 1.3;
}
.lead {
  font-size: var(--aai-type-title);
  color: var(--aai-text-secondary);
}
.platforms {
  padding-left: var(--aai-space-panel-padding);
  color: var(--aai-text-muted);
}
/* 03 §1 Button default — primary 채움 알약 */
.cta {
  display: inline-block;
  padding: calc(var(--aai-space-base) * 2.5) calc(var(--aai-space-base) * 4.5);
  border-radius: var(--aai-radius-pill);
  background: var(--aai-primary);
  color: var(--aai-on-primary);
  font-weight: var(--aai-weight-medium);
  text-decoration: none;
}
.cta:hover {
  text-decoration: none;
}