/* 에이비서 웹 — 블랙&화이트 브랜드. 변수 이름은 DESIGN.md §3 의 SEED semantic 토큰을 그대로 따른다.
   값은 브랜드 결정(배경 #FFFFFF / 글자 #000000, 다크 모드 반전). 화면에는 변수만 쓴다. */
:root {
  color-scheme: light dark;
  --color-bg-layer-default: #FFFFFF;
  --color-bg-layer-basement: #F5F5F5;
  --color-bg-neutral-weak: #EFEFEF;
  --color-bg-neutral-inverted: #000000;
  --color-fg-neutral: #000000;
  --color-fg-neutral-muted: #555555;
  --color-fg-neutral-subtle: #8A8A8A;
  --color-fg-neutral-inverted: #FFFFFF;
  --color-stroke-neutral-muted: #E2E2E2;
  --color-stroke-neutral-contrast: #000000;
  --color-stroke-focus-ring: #000000;

  --font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-size-t3: 0.875rem;
  --font-size-t4: 0.9375rem;
  --font-size-t5: 1.0625rem;
  --font-size-t6: 1.25rem;
  --font-size-t7: 1.5rem;
  --font-size-t9: 2rem;
  --font-size-t10: 2.5rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-body: 1.6;
  --line-height-heading: 1.25;

  --dimension-x1: 0.25rem;
  --dimension-x2: 0.5rem;
  --dimension-x3: 0.75rem;
  --dimension-x4: 1rem;
  --dimension-x5: 1.25rem;
  --dimension-x6: 1.5rem;
  --dimension-x8: 2rem;
  --dimension-x10: 2.5rem;
  --dimension-x12: 3rem;
  --dimension-x16: 4rem;
  --dimension-x20: 5rem;
  --dimension-content-max: 44rem;

  --radius-r2: 0.5rem;
  --radius-r3: 0.75rem;
  --radius-r4: 1rem;
  --radius-full: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-layer-default: #000000;
    --color-bg-layer-basement: #111111;
    --color-bg-neutral-weak: #1A1A1A;
    --color-bg-neutral-inverted: #FFFFFF;
    --color-fg-neutral: #FFFFFF;
    --color-fg-neutral-muted: #B3B3B3;
    --color-fg-neutral-subtle: #7A7A7A;
    --color-fg-neutral-inverted: #000000;
    --color-stroke-neutral-muted: #2A2A2A;
    --color-stroke-neutral-contrast: #FFFFFF;
    --color-stroke-focus-ring: #FFFFFF;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-t5);
  line-height: var(--line-height-body);
  color: var(--color-fg-neutral);
  background: var(--color-bg-layer-default);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: inherit; text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-stroke-focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: var(--dimension-x4); top: -100px;
  padding: var(--dimension-x2) var(--dimension-x3);
  background: var(--color-bg-neutral-inverted); color: var(--color-fg-neutral-inverted);
  border-radius: var(--radius-r2);
}
.skip-link:focus { top: var(--dimension-x4); z-index: 10; }

.container {
  width: 100%;
  max-width: var(--dimension-content-max);
  margin-inline: auto;
  padding-inline: var(--dimension-x5);
}

/* header */
.site-header {
  border-bottom: 1px solid var(--color-stroke-neutral-muted);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dimension-x4);
  min-height: 3.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--dimension-x2);
  font-weight: var(--font-weight-bold); text-decoration: none; font-size: var(--font-size-t5);
}
.brand img { width: 1.75rem; height: 1.75rem; display: block; }
.site-nav { display: flex; gap: var(--dimension-x4); font-size: var(--font-size-t3); }
.site-nav a { color: var(--color-fg-neutral-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-fg-neutral); text-decoration: underline; }

/* landing */
.hero { padding-block: var(--dimension-x16) var(--dimension-x12); }
.hero .eyebrow {
  margin: 0 0 var(--dimension-x3);
  font-size: var(--font-size-t3); font-weight: var(--font-weight-medium);
  color: var(--color-fg-neutral-muted); letter-spacing: 0.02em;
}
.hero h1 {
  margin: 0 0 var(--dimension-x5);
  font-size: clamp(var(--font-size-t9), 6vw, var(--font-size-t10));
  line-height: var(--line-height-heading); font-weight: var(--font-weight-bold);
}
.hero .lede { margin: 0; font-size: var(--font-size-t6); color: var(--color-fg-neutral-muted); }

.features { padding-block: var(--dimension-x8); border-top: 1px solid var(--color-stroke-neutral-muted); }
.features ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dimension-x6); }
.features li {
  padding: var(--dimension-x6); border: 1px solid var(--color-stroke-neutral-muted);
  border-radius: var(--radius-r4); background: var(--color-bg-layer-default);
}
.features h2 { margin: 0 0 var(--dimension-x2); font-size: var(--font-size-t6); line-height: var(--line-height-heading); }
.features p { margin: 0; color: var(--color-fg-neutral-muted); }
.features .num {
  display: inline-block; margin-bottom: var(--dimension-x3);
  font-size: var(--font-size-t3); font-weight: var(--font-weight-medium); color: var(--color-fg-neutral-subtle);
}

.launch { padding-block: var(--dimension-x12); border-top: 1px solid var(--color-stroke-neutral-muted); text-align: center; }
.launch h2 { margin: 0 0 var(--dimension-x3); font-size: var(--font-size-t7); line-height: var(--line-height-heading); }
.launch p { margin: 0 auto; max-width: 32rem; color: var(--color-fg-neutral-muted); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dimension-x3); margin-top: var(--dimension-x8); }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 10rem; min-height: 3rem; padding: var(--dimension-x2) var(--dimension-x5);
  border: 1px dashed var(--color-stroke-neutral-contrast); border-radius: var(--radius-r3);
  font-size: var(--font-size-t3); color: var(--color-fg-neutral-muted);
}

/* documents (privacy / terms / support) */
.doc { padding-block: var(--dimension-x12) var(--dimension-x16); }
.doc h1 { margin: 0 0 var(--dimension-x2); font-size: var(--font-size-t9); line-height: var(--line-height-heading); }
.doc .meta { margin: 0 0 var(--dimension-x10); font-size: var(--font-size-t3); color: var(--color-fg-neutral-subtle); }
.doc h2 { margin: var(--dimension-x10) 0 var(--dimension-x3); font-size: var(--font-size-t6); line-height: var(--line-height-heading); }
.doc h3 { margin: var(--dimension-x6) 0 var(--dimension-x2); font-size: var(--font-size-t5); }
.doc p, .doc li { color: var(--color-fg-neutral); }
.doc ul, .doc ol { padding-left: var(--dimension-x5); }
.doc li + li { margin-top: var(--dimension-x1); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--font-size-t4); margin-block: var(--dimension-x4); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--dimension-x2) var(--dimension-x3); border-bottom: 1px solid var(--color-stroke-neutral-muted); }
.doc th { font-weight: var(--font-weight-medium); color: var(--color-fg-neutral-muted); }
.table-wrap { overflow-x: auto; }
.notice {
  padding: var(--dimension-x4) var(--dimension-x5); margin-block: var(--dimension-x6);
  border: 1px solid var(--color-stroke-neutral-contrast); border-radius: var(--radius-r3);
  font-size: var(--font-size-t4);
}
.todo {
  display: inline-block; padding: 0 var(--dimension-x1);
  border: 1px dashed var(--color-stroke-neutral-contrast); border-radius: var(--dimension-x1);
  font-size: 0.9em; color: var(--color-fg-neutral-muted); white-space: nowrap;
}

/* 404 */
.empty { padding-block: var(--dimension-x20); text-align: center; }
.empty h1 { margin: 0 0 var(--dimension-x3); font-size: var(--font-size-t9); }
.empty p { margin: 0 0 var(--dimension-x6); color: var(--color-fg-neutral-muted); }
.button {
  display: inline-block; padding: var(--dimension-x3) var(--dimension-x6);
  background: var(--color-bg-neutral-inverted); color: var(--color-fg-neutral-inverted);
  border-radius: var(--radius-full); text-decoration: none; font-weight: var(--font-weight-medium);
}

/* footer */
.site-footer {
  border-top: 1px solid var(--color-stroke-neutral-muted);
  padding-block: var(--dimension-x8);
  font-size: var(--font-size-t3); color: var(--color-fg-neutral-muted);
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--dimension-x3) var(--dimension-x6); align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--dimension-x4); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}