/* ── 토큰 ──────────────────────────────────────────────────────────
   브랜드가 정한 단일 세계(블랙 + 민트)에 의도적으로 고정한다.
   중립색은 순수 회색이 아니라 민트 쪽으로 약간 기운 청록-회색이다. */
:root {
  --ground:      #07090b;
  --surface:     #2a363f;
  --hairline:    #1a2124;
  --hairline-lit:#2a3439;
  --ink:         #e8eff0;
  /* 설명문은 본문과 한 단계만 떨어뜨린다. 예전 값(#97a5a8 · #66767a)은
     검은 바탕에서 너무 가라앉아 읽기 힘들었다 — 대비 7.8:1 · 4.2:1 →
     11.5:1 · 9.0:1 */
  --ink-dim:     #bcc7c9;
  --ink-faint:   #a4b1b4;
  --mint:        #46e0c0;
  --mint-dim:    #2f9c88;
  --mint-wash:   rgba(70, 224, 192, 0.08);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
          Pretendard, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono",
          "D2Coding", monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 64ch;

  /* 한 단계씩만 올라가는 크기 사다리. 여기 없는 크기는 쓰지 않는다.
     예전에는 44px 제목 옆에 11px 라벨이 있어 단계가 통째로 비어 있었다. */
  --fs-xs:  0.8125rem;   /* 13 — 각주 */
  --fs-sm:  0.875rem;    /* 14 — 라벨 · 표 · 캡션 */
  --fs-md:  0.9375rem;   /* 15 — 부제 */
  --fs-base: 1rem;       /* 16 — 본문 */
  --fs-lg:  1.0625rem;   /* 17 — 리드 · 모듈 이름 */
  --fs-h2:  clamp(1.0625rem, 1.67vw, 1.167rem);
  --fs-h1:  clamp(1.125rem, 1.9vw, 1.375rem);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* 스크롤바 자리를 늘 비워 둔다. 긴 페이지(소개·적용기술)에는 스크롤바가
     있고 짧은 페이지(Q&A·다운로드)에는 없어서, 오갈 때마다 화면 폭이
     스크롤바 두께만큼 달라져 가운데 정렬된 내용이 옆으로 밀렸다. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* 다운로드처럼 짧은 페이지에서도 푸터가 화면 중간에 떠 있지 않게 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* ChaCha20-Poly1305 같은 긴 낱말이 좁은 화면을 옆으로 밀지 않게 */
  overflow-wrap: anywhere;
}

/* 바깥 여백은 한 곳에서만 만든다 */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wrap > footer { margin-top: auto; }

a { color: var(--mint); text-decoration-color: var(--mint-dim); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 공통 조판 ───────────────────────────────────────────────── */
.eyebrow {
  /* 한글에는 대문자 변환이 없고 넓은 자간은 글자를 흩어 놓는다.
     모노스페이스도 한글 자형이 없어 엉뚱한 글꼴로 대체된다.
     라틴 전용 장치는 라틴 문자열(모듈 코드명·판 번호)에만 남긴다. */
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--mint);
  margin: 0;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

h3 {
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.01em;
}

p { margin: 0; max-width: var(--measure); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); font-size: var(--fs-sm); }

section {
  /* 이 값은 위아래로 한 번씩 들어가므로 실제 단락 사이는 이 값의 두 배다.
     구분선을 모두 걷어낸 뒤로는 이 여백이 단락을 가르는 유일한 수단이다. */
  padding-block: clamp(18px, 2.2vw, 26px);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: clamp(14px, 1.6vw, 18px);
}

/* ── 히어로 ─────────────────────────────────────────────────── */
header.hero {
  padding-block: clamp(24px, 3vw, 38px) clamp(18px, 2.2vw, 26px);
}


/* 최상단 자리표 — 우리가 무엇을 대신하는지 한 줄로.
   제목보다 작아야 한다. 이 줄이 제목이 아니기 때문이다. */
.stack {
  font-size: clamp(0.9375rem, 1.45vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 3px;
}
.stack i { font-style: normal; color: var(--mint); font-weight: 600; padding: 0 1px; }
.stack-sub {
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.028em;
  /* 한 줄로 두되, 좁은 화면에서 접힐 때를 위한 값.
     1.24 는 두 줄일 때 사이가 너무 벌어졌다 — 절반으로 좁힌다. */
  line-height: 1.12;
  /* 자리표 줄과 붙어 있으면 제목이 그 줄의 일부처럼 읽힌다 */
  margin-bottom: 22px;
}
.hero h1 .quiet { color: var(--ink-dim); }

.hero .lede {
  font-size: var(--fs-lg);
  color: var(--ink-dim);
  max-width: 56ch;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(14px, 1.8vw, 20px);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--ink-faint);
}
.hero-meta .live { color: var(--mint); }

/* ── 모듈 ──────────────────────────────────────────────────── */
.module {
  display: grid;
  /* 비율(0.8fr)로 두면 라벨이 짧아도 칸이 넓게 잡혀 설명이 멀리 밀린다.
     상한을 주고 남는 폭은 설명이 가져가게 한다. */
  grid-template-columns: minmax(58px, 78px) minmax(0, 1fr);
  gap: 5px 12px;
  padding-block: 8px;
  align-items: baseline;
}
.module .who { display: flex; flex-direction: column; gap: 4px; }
.module .ko { color: var(--mint); font-weight: 650; font-size: var(--fs-md); letter-spacing: -0.01em; }
.module p { font-size: var(--fs-md); color: var(--ink-dim); }
.module .sub {
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--ink-faint);
  margin-top: 8px;
  display: block;
}


/* ── 상단 내비 ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(7, 9, 11, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.topbar .bar {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 14px;
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}
.topbar .home {
  display: flex;
  align-items: center;
  /* 방패와 글자는 한 덩어리로 읽혀야 한다 */
  gap: 5px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  /* 소개 메뉴를 없앤 뒤로 이것이 홈이다. 메뉴보다 커야 그렇게 읽힌다. */
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  letter-spacing: -0.015em;
  margin-right: auto;
}
.topbar .home svg { width: 34px; height: 34px; display: block; }
.topbar .home em { font-style: normal; color: var(--mint); letter-spacing: -0.005em; }
.topbar nav { display: flex; gap: 6px; }
.topbar nav a {
  /* 좁은 화면에서는 줄어든다 — 28px 고정이면 세 항목이 줄바꿈된다 */
  font-size: clamp(0.9375rem, 1.27vw, 1.167rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: color .12s, border-color .12s;
}
.topbar nav a:hover { color: var(--ink); border-color: var(--mint); }
/* 지금 보고 있는 자리 */
.topbar nav a.active { color: var(--mint); }

/* 페이지가 갈라진 뒤로 페이지 안 앵커 이동은 없다. 고정 막대에 가리는
   문제도 함께 사라졌다. */

/* ── 기술 목록 ───────────────────────────────────────────────── */
.tech-group { margin-bottom: clamp(16px, 2vw, 24px); }
.tech-group > h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mint);
  padding-bottom: 6px;
  margin-bottom: 0;
}
.tech-row {
  display: grid;
  grid-template-columns: minmax(126px, 172px) minmax(0, 1fr);
  gap: 5px 12px;
  padding-block: 7px;
  align-items: baseline;
}
.tech-name { font-weight: 650; font-size: var(--fs-md); letter-spacing: -0.005em; color: var(--mint); }
.tech-name span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--mint-dim);
  letter-spacing: 0;
  margin-left: 7px;
}
.tech-what { font-size: var(--fs-md); color: var(--ink-dim); }

.tech-none {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.tech-none li {
  list-style: none;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--ink-dim);
  border: 1px solid var(--hairline-lit);
  padding: 7px 12px;
  border-radius: 2px;
}
.tech-none li::before { content: "0 "; color: var(--mint); }
ul.plain { margin: 0; padding: 0; }

/* ── 다운로드 ───────────────────────────────────────────────── */
.dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}
.dl-item {
  padding-block: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 28px;
}
.dl-item .plat {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint);
}
.dl-item .state { font-weight: 650; font-size: var(--fs-md); }
.dl-item .state.soon { color: var(--mint); }
.dl-item .why { font-size: var(--fs-sm); color: var(--ink-dim); }

/* ── 언어 선택기 ─────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline-lit);
  border-radius: 2px;
  color: var(--mint);
  cursor: pointer;
  transition: color .12s, border-color .12s, transform .3s;
}
.reload svg { width: 17px; height: 17px; display: block; }
.reload:hover { color: var(--mint); border-color: var(--mint); }
.reload:active { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .reload { transition: color .12s, border-color .12s; } }

.langpick select {
  /* 폭을 못 박는다. 비워 둔 채로 그려졌다가 스크립트가 선택지를 채우면
     그만큼 넓어지고, 왼쪽 것들이 밀려 메뉴바가 흔들려 보였다. */
  width: 104px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--hairline-lit);
  border-radius: 2px;
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  padding: 7px 26px 7px 11px;
  cursor: pointer;
  /* 화살표는 배경 이미지 대신 그라디언트로 — 외부 요청 0 을 지킨다 */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mint) 50%),
    linear-gradient(135deg, var(--mint) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.langpick select:hover { color: var(--ink); border-color: var(--mint-dim); }
/* 드롭다운 목록은 OS 가 그린다 — 밝은 바탕에 얹히므로 글자색을 고정한다 */
.langpick select option { background: #0c1012; color: #e6edee; }

/* 오른쪽에서 왼쪽으로 읽는 언어 */
[dir="rtl"] .topbar .home { margin-right: 0; margin-left: auto; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; padding: 15px 0 15px 16px; }
[dir="rtl"] th.ours, [dir="rtl"] td.ours { padding-right: 16px; }
[dir="rtl"] .langpick select { padding: 7px 11px 7px 26px; background-position: left 13px center, left 8px center; }
[dir="rtl"] .reload svg { transform: scaleX(-1); }
[dir="rtl"] .module .sub, [dir="rtl"] .hero h1 { text-align: right; }

/* ── 사양표 ─────────────────────────────────────────────────── */
.spec { display: grid; gap: 0; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(90px, 100px) minmax(0, 1fr);
  gap: 6px 12px;
  padding-block: 7px;
  align-items: baseline;
}
.spec-key {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mint);
}
.spec-val { font-size: var(--fs-md); }
.spec-val b { font-weight: 650; color: var(--ink); }
.spec-val .note { color: var(--ink-dim); }
.spec-val .num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--mint); font-size: var(--fs-base); }

/* ── 비교표 ─────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table {
  width: 100%;
  min-width: 430px;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
th, td {
  text-align: left;
  padding: 5px 12px 5px 0;
  vertical-align: top;
}
thead th {
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--ink-faint);
  font-weight: 600;
  padding-bottom: 12px;
}
tbody th {
  font-weight: 400;
  color: var(--mint);
  /* 30% 면 값이 짧아도 칸이 넓게 잡혀 표가 성겨 보인다 */
  width: 23%;
}
td { color: var(--ink-dim); }
/* 우리 열만 살린다 — 강조는 한 곳에만 쓴다 */
th.ours, td.ours {
  color: var(--ink);
  background: var(--mint-wash);
  padding-left: 12px;
  font-weight: 600;
}
thead th.ours { color: var(--mint); }

/* ── 기둥 ──────────────────────────────────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 40px;
}
.pillar { display: flex; flex-direction: column; gap: 8px; }
.pillar .word {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--mint);
}
.pillar p { font-size: var(--fs-md); color: var(--ink-dim); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { display: grid; gap: 0; }
.faq details {
}
.faq summary {
  cursor: pointer;
  padding-block: 10px;
  font-weight: 600;
  list-style: none;
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  transition: color .12s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--mint);
  font-size: 1.1rem;
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: "−"; }
/* 펼쳐진 항목은 제목도 민트로 — 지금 어디를 보고 있는지 한눈에 */
.faq details[open] > summary { color: var(--mint); }
.faq .answer {
  /* 질문과 답을 선 없이 가르는 것은 들여쓰기뿐이다 */
  padding: 0 0 16px 22px;
  color: var(--ink-dim);
  font-size: var(--fs-md);
}
[dir="rtl"] .faq .answer { padding: 0 22px 16px 0; }

/* ── 푸터 ──────────────────────────────────────────────────── */
footer {
  /* 구분선을 모두 걷어낸 뒤로 푸터를 가르는 것은 바탕색뿐이다.
     box-shadow 로 좌우를 무한히 늘려 화면 폭을 채운다 — 절대위치 가짜요소로
     늘리면 가로 스크롤이 생길 수 있는데 그림자는 배치에 끼어들지 않는다.
     clip-path 는 위아래로 번지는 것만 막는다. */
  background: var(--surface);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
  margin-top: clamp(14px, 2vw, 22px);
  padding-block: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 48px;
  justify-content: space-between;
  align-items: flex-start;
}
footer .legal { display: flex; flex-direction: column; gap: 2px; }
footer .legal .brand { font-weight: 650; letter-spacing: -0.01em; }
footer .meta {
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

/* ── 좁은 화면 ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* 상단 바를 두 줄로. 로고와 단추가 첫 줄, 메뉴가 그 아래 한 줄을 다 쓴다.
     한 줄에 다 넣으면 메뉴 이름이 두 글자씩 잘려 접힌다. */
  .topbar .bar { padding-block: 10px; gap: 10px 12px; }
  .topbar nav {
    order: 3;
    width: 100%;
    gap: 2px;
    justify-content: space-between;
  }
  .topbar nav a { padding: 6px 8px; }
  .topbar .home svg { width: 28px; height: 28px; }
  .langpick select { width: min(104px, 34vw); }

  .module, .spec-row, .tech-row { grid-template-columns: 1fr; gap: 6px; }
  .dl-item { padding-right: 0; }
  footer { gap: 18px 24px; }
  footer .meta { text-align: left; }

  /* 표는 제 칸 안에서만 옆으로 굴린다. 좁을수록 최소 폭도 줄여 굴릴 거리를
     줄인다 — 본문이 통째로 밀리는 것과는 다른 문제다. */
  table { min-width: 400px; font-size: var(--fs-sm); }
  th, td { padding: 9px 8px 9px 0; }
  th.ours, td.ours { padding-left: 8px; }
}

@media (max-width: 400px) {
  .topbar nav a { font-size: var(--fs-sm); padding: 6px 6px; }
  .faq .answer { padding-left: 14px; }
  .tech-none li { font-size: var(--fs-xs); padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}