/* 공식 사이트 공통 머리글(GNB) — ADR 0082·0086. 마크업은 apps/site/scripts/site-shell.ts 하나가 만든다.
   글자 워드마크 · 메뉴(블로그 · 사용 가이드, 다른 언어 쪽에서는 「KO」 표시) · 「Android 베타 받기」. 머리글 안만 정하고 머리글 밖은 건드리지 않는다.
   각 쪽의 a·body 규칙보다 선택자를 한 단계 더 좁혀(.gnb …) 어느 쪽에서나 같은 머리글이 되게 한다. 스크립트·외부 자원·sticky는 없다.
   글꼴·사이트 폭·좌우 여백·색은 site/tokens.css의 변수를 쓴다 — 랜딩 구획·본문·바닥글과 같은 값이다. */

.gnb-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-size);
  font-weight: 700;
  line-height: var(--leading);
  text-decoration: none;
  transform: translateY(-180%);
}
.gnb-skip:focus {
  transform: none;
}

.gnb {
  color-scheme: light;
  border-bottom: 1px solid var(--stroke);
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: var(--leading);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.gnb * {
  box-sizing: border-box;
}
/* 쪽의 nav 규칙을 지우는 초기화. 메뉴 자체의 규칙(.gnb .gnb-nav)은 이보다 선택자가 강해야 오른쪽 정렬(margin-left: auto)이 산다. */
.gnb nav {
  margin: 0;
  padding: 0;
}
.gnb-row {
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(100%, calc(var(--frame) + 2 * var(--gutter)));
  min-height: 72px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.gnb .gnb-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--touch);
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: var(--display-tracking);
  text-decoration: none;
}
/* 로고 그림(ADR 0119): 여덟 점 타일 + 윤곽선 워드마크. 색은 토큰 — 숫자 1234는 파랑, 글자 asdf는 먹. 로크업 최소 24px. */
.gnb .gnb-brand .brand-lockup {
  display: block;
  width: auto;
  height: 36px;
}
.brand-tile,
.brand-digits {
  fill: var(--accent);
}
.brand-dots-digits {
  fill: var(--accent-line);
}
.brand-dots-letters {
  fill: var(--accent-ink);
}
.brand-letters {
  fill: var(--text);
}
.gnb .gnb-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 15px;
}
.gnb .gnb-unlinked {
  color: var(--muted);
}
.gnb .gnb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--small-size);
  font-weight: 700;
  text-decoration: none;
}
.gnb a.gnb-cta:hover {
  background: var(--accent-hover);
}
.gnb .gnb-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  border-radius: 0;
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
}
.gnb .gnb-nav a:hover {
  color: var(--text);
}
.gnb .gnb-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* 다른 언어 쪽의 메뉴에서 한국어로만 있는 쪽(블로그·사용 가이드)에 붙는 「KO」 표시. */
.gnb .gnb-nav .gnb-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gnb-skip:focus-visible,
.gnb .gnb-nav a:focus-visible,
.gnb .gnb-brand:focus-visible,
.gnb .gnb-cta:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
.gnb .gnb-nav a:focus-visible,
.gnb .gnb-brand:focus-visible {
  border-radius: 4px;
}

@media (max-width: 1000px) and (min-width: 761px) {
  .gnb-row {
    gap: 20px;
  }
  .gnb .gnb-nav {
    gap: 18px;
  }
}

/* 휴대폰: 워드마크와 버튼이 첫 줄, 메뉴 세 항목은 숨기지 않고 둘째 줄(햄버거·스크립트 없음). */
@media (max-width: 760px) {
  .gnb-row {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 16px;
    min-height: 60px;
  }
  .gnb .gnb-brand {
    font-size: 20px;
  }
  .gnb .gnb-brand .brand-lockup {
    height: 32px;
  }
  .gnb .gnb-nav {
    order: 3;
    width: 100%;
    gap: 20px;
    margin-left: 0;
    padding-bottom: 4px;
    font-size: var(--small-size);
  }
  .gnb .gnb-cta {
    padding: 8px 12px;
    font-size: 13px;
  }
}