/* 여섯 화면이 공유하는 스타일시트.
   무엇을 여기 두고 무엇을 화면의 <style>에 두는지는
   docs/architecture.md의 「무엇을 어디에 두는가」가 정한다.
   값의 출처는 docs/product-spec.md의 「공통 레이아웃」이다. */

:root {
  /* 다크 대체값을 두지 않으므로 라이트만 지원한다고 알린다.
     OS가 다크여도 배경과 브라우저 기본 UI가 어두워지지 않는다. */
  color-scheme: light;
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --accent: #1f5fe0;
  --rule: #dddddd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 링크는 색과 밑줄을 함께 쓴다. 밑줄은 기본 상태부터 보인다. */
a {
  color: var(--accent);
  text-decoration: underline;
}

/* 초점 표시는 링크 영역 바깥에 테두리로 그린다. */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 헤더 */
header {
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

header .logo-link {
  display: inline-block;
  line-height: 0;
}

header .logo {
  display: block;
  width: 116px;
  height: auto;
  aspect-ratio: 260 / 92;
}

/* 공개 언어 레지스트리를 검증한 뒤에만 런타임이 선택지를 채우고 보인다.
   native select를 써서 키보드·터치 조작과 현재값 전달은 브라우저가 맡는다. */
[data-language-control] {
  flex: none;
  width: 168px;
  height: 44px;
}

[data-language-control][hidden] { display: none; }

[data-language-control] label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-language-control] select {
  width: 100%;
  height: 44px;
  color: var(--fg);
  font: inherit;
}

[data-language-control] select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 푸터 */
footer {
  padding: 24px 32px;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* 문서형 화면 (S-02~S-06) */
main.doc {
  flex: 1;
  padding: 48px 32px;
  text-align: left;
  /* 메일 주소가 큰 글꼴 설정에서 가로로 넘치지 않게 한다.
     화면에 보이는 문자열과 복사되는 문자열은 그대로다. */
  overflow-wrap: break-word;
}

main.doc .doc-body {
  max-width: 680px;
  margin: 0 auto;
}

main.doc h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 8px;
}

main.doc h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 40px 0 16px;
}

main.doc p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 16px;
}

/* 앱 목록 — 줄 전체가 링크이고 터치 타깃이 44px 이상이다. */
main.doc .apps {
  list-style: none;
  margin: 0;
  padding: 0;
}

main.doc .apps li + li {
  margin-top: 12px;
}

main.doc .apps a {
  display: block;
  padding: 10px 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* 번호 매긴 항 목록 (S-04·S-05).
   번호는 본문 왼쪽 바깥에 있고 둘째 줄은 번호 아래로 들어가지 않는다. */
main.doc .clauses {
  margin: 0;
  padding: 0 0 0 2.5em;
}

main.doc .clauses li {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

main.doc .clauses li:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  header { padding: 24px 20px; }
  footer { padding: 24px 20px; }
  main.doc { padding: 32px 20px; }
}

@media (max-width: 400px) {
  [data-language-control] { width: 148px; }
}