/* Sogon 랜딩 페이지 스타일.
 *
 * 외부 의존이 없다 — 웹폰트·CDN·JS 프레임워크를 쓰지 않는다. GitHub Pages·S3·사내 정적 호스팅·
 * 로컬 `file://` 어디에 올려도 같게 보이고, 호스팅이 확정되지 않은 상태에서도 검토할 수 있다.
 * 시스템 폰트 스택을 쓰므로 macOS에서는 앱과 같은 서체(SF Pro)로 렌더된다.
 */

:root {
  --bg: #0b0f14;
  --bg-elevated: #121822;
  --border: #1e2836;
  --text: #e6edf3;
  --text-dim: #9aa7b4;
  --text-faint: #6b7a8a;
  --accent: #3ddc97;
  --accent-2: #35c9e0;
  --radius: 14px;
  --maxw: 900px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
    "Apple SD Gothic Neo", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* 언어 전환 */
.lang {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
  font-size: 14px;
  color: var(--text-dim);
}
.lang a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* 히어로 */
header.hero { padding: 48px 0 56px; text-align: center; }

.hero img.icon {
  width: 104px; height: 104px;
  border-radius: 22px;
  margin-bottom: 22px;
}

.hero h1 {
  margin: 0 0 6px;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .tagline { margin: 0 0 8px; font-size: 21px; color: var(--text); }
.hero .sub { margin: 0; color: var(--text-dim); font-size: 16px; }

.badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.badge {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
}

/* 섹션 */
section { padding: 40px 0; border-top: 1px solid var(--border); }
section h2 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
section > .wrap > p.lead { margin: 0 0 26px; color: var(--text-dim); }

/* 기능 카드 */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.65; }

/* 코드 */
pre, code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 14px;
}
pre {
  border: 1px solid var(--border);
  background: #0d1219;
  border-radius: 10px;
  padding: 15px 18px;
  overflow-x: auto;
  margin: 0 0 14px;
}
p code {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

/* 히어로의 설치 한 줄.
 *
 * `user-select: all`이 한 번의 클릭으로 명령 전체를 선택하게 한다 — JS 없이 복사 버튼에
 * 가장 가까운 것이다. 이 사이트는 스크립트를 싣지 않는다.
 *
 * 버전을 담은 링크를 여기에 두지 않는다. `check_site_version.py`의 `release-link-url` 앵커가
 * **첫 번째** `/releases/tag/vN.N`에 걸리고 `stamp_version.py`가 그 한 곳만 고치므로, 히어로에
 * 태그 링크를 넣으면 앵커를 가로채 아래 `설치` 절의 링크가 판올림에서 낡은 채 남는다.
 * 태그 세그먼트가 없는 `/releases`는 앵커에 걸리지 않는다(그 파일의 주석이 명시한다).
 */
.hero-install { margin-top: 26px; }

.hero-install .cmd {
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
  text-align: left;
  overflow-x: auto;
  -webkit-user-select: all;
  user-select: all;
}

.hero-install-alt {
  margin: 12px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* 명령 + 복사 버튼 한 줄.
 *
 * 히어로는 가운데 정렬이므로 `justify-content: center`가 필요하다 — 기본값으로 두면 버튼이
 * 명령 왼쪽 끝에 붙어 줄 전체가 왼쪽으로 쏠린다. 좁은 화면에서는 줄바꿈해 버튼이 아래로 간다.
 *
 * **버튼은 JS가 켤 때까지 `hidden`이다** (`index.html` 아래쪽 인라인 스크립트). 눌러도 아무 일도
 * 없는 버튼을 보여 주지 않는다 — 명령 자체는 `user-select: all`이라 JS가 없어도 한 번 눌러
 * 전체가 선택된다.
 */
.cmd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}

.copy-btn {
  flex: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--accent); }
.copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 버튼 — 문의처럼 바깥으로 나가는 링크에 쓴다.
 *
 * `a:hover`가 밑줄을 켜므로 두 변종 모두 꺼 준다. 버튼 모양에 밑줄이 겹치면 눌리는 것으로
 * 안 보인다. 색은 테마 변수만 쓴다 — 리터럴을 박으면 변수를 바꿀 때 이 자리만 남는다.
 */
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }

.btn-primary {
  border-color: transparent;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: var(--bg);
}
.btn-primary:hover { opacity: 0.88; text-decoration: none; }

/* 주의 박스 */
.note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: 0 10px 10px 0;
  padding: 15px 18px;
  color: var(--text-dim);
  font-size: 15px;
}
.note strong { color: var(--text); }

/* 표 */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
th { color: var(--text-dim); font-weight: 600; font-size: 13px; }
td:first-child { white-space: nowrap; color: var(--text); }
td { color: var(--text-dim); }

/* 푸터 */
footer {
  border-top: 1px solid var(--border);
  padding: 30px 0 50px;
  color: var(--text-dim);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}