/*
 * 랜딩. 스플래시와 같은 그림이다 — 검정 배경에 가운데 워드마크.
 *
 * **다크 고정이다.** 브랜드가 다크이고, 여기서 라이트 모드를 지원하면
 * 워드마크(흰색 단색 PNG)가 보이지 않는다. 색을 시스템 설정에 맡기지 않는다.
 */

:root {
  color-scheme: dark;
  --bg: #000000;
  --text: #ffffff;
  --muted: #8b8b93;
  --faint: #55555c;
  --line: #1c1c20;
  --dim: #3a3a41;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
    "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 히어로 ─────────────────────────────────────────── */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 균일 gap 이 아니다 — 워드마크와 태그라인은 붙고, 뱃지는 떨어진다. */
  gap: 14px;
  padding: 96px 24px 64px;
  text-align: center;
}

/*
 * 워드마크 캔버스(1848x450) 안에서 글자는 1663x292 이고 위아래 79px 씩
 * 여백이다. 그래서 `width` 로 잡은 값의 90% 만 실제로 보인다 —
 * 앱 홈 헤더가 잉크 기준으로 높이를 계산하는 것과 같은 이유다.
 */
.wordmark {
  width: min(62vw, 380px);
  height: auto;
  display: block;
  margin-bottom: 6px;
}

/*
 * 위계: 워드마크 → 영문 태그라인(작게, 자간 넓게) → 한국어 한 줄.
 *
 * 영문이 한국어보다 **작다.** 크기로 겨루면 두 줄이 서로를 밀어내고,
 * 읽는 순서는 크기가 아니라 자리로 만든다.
 */
.tagline-en {
  margin: 0;
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 500;
  /* 대문자는 자간이 없으면 뭉친다. 소문자로 바꾸지 않는다 — 브랜드 요소다. */
  letter-spacing: 0.24em;
  /* 자간이 마지막 글자 뒤에도 붙어서 광학 중심이 왼쪽으로 밀린다. */
  text-indent: 0.24em;
  color: var(--faint);
}

.tagline-ko {
  margin: 0;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.badge {
  margin: 26px 0 0;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ── 푸터 ───────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.legal a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.company {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  max-width: 620px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.7;
  color: var(--faint);
}

/* 주소·연락처는 중간에서 끊기면 읽기 나쁘다. 한 줄을 통째로 차지한다. */
.company .line {
  flex-basis: 100%;
}

.company .strong {
  color: var(--muted);
}

.company a {
  color: inherit;
  text-decoration: none;
}

.company a:hover,
.company a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.copyright {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  /* --line(#1c1c20)은 검정 위에서 사실상 안 보인다. 있는 글자는 읽혀야 한다. */
  color: var(--dim);
}

/* ── 법무 문서 페이지 ─────────────────────────────────── */

.doc {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 64px;
}

.doc h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 5vw, 28px);
  letter-spacing: -0.01em;
}

.doc .meta {
  margin: 0 0 40px;
  font-size: 13px;
  color: var(--faint);
}

.doc .notice {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

.doc .notice a {
  color: var(--text);
}

.doc .home {
  display: inline-block;
  margin-top: 40px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.doc .home:hover,
.doc .home:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: color 120ms ease;
  }
}