/* 주 네비게이션과 구역 줄.
 *
 * 목록은 backend/app/nav.py 에 있고, 모양은 여기 있다. 메인 앱·블로그·코스
 * 페이지·도구·언어 학습·뉴스가 모두 이 파일을 링크한다. 값은 전부
 * /design.css 의 토큰이라, 색과 간격은 여기에 적지 않는다.
 *
 * 두 줄로 나눈 이유
 * ─────────────────
 * 첫째 줄(.siteNav)은 어느 화면에서나 같다. 구역마다 다른 것(언어 학습의
 * 연속 학습일, 뉴스의 언어 선택, 도구의 현재 위치)은 둘째 줄(.sectionBar)로
 * 내렸다. 그래야 "지금 어디에 있든 사이트 전체로 갈 수 있다" 는 성질과
 * "이 구역에는 이런 것이 있다" 는 성질이 서로 자리를 뺏지 않는다.
 *
 * 좁은 화면
 * ─────────
 * 일곱 개는 휴대폰 한 줄에 안 들어간다. 메인 앱은 햄버거 서랍이 있어서
 * (app.js) 거기서는 #mainnav 를 감추고(style.css), 서랍이 없는 나머지
 * 화면에서는 가로로 밀어서 본다. 감추는 쪽을 택하지 않은 이유는, 서랍을
 * 만들려면 정적 페이지마다 자바스크립트가 필요하고 그러면 첫 화면이
 * 늦게 채워지기 때문이다.
 */

/* ───────────────── 주 네비게이션 ───────────────── */

.siteNav {
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  /* 밀어서 보는 줄에 스크롤 막대까지 나오면 상단 바가 두꺼워진다. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.siteNav::-webkit-scrollbar { display: none; }

.siteNav a {
  padding: 7px 11px;
  border-radius: var(--r);
  color: var(--dim);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}

.siteNav a:hover { color: var(--text); background: var(--surface-2); }

/* `.on` 은 메인 앱이 라우트가 바뀔 때 붙이는 것이고(app.js), aria-current 는
   서버와 정적 HTML 이 처음부터 박아 두는 것이다. 같은 뜻이므로 같이 보인다. */
.siteNav a.on,
.siteNav a[aria-current] { color: var(--accent-text); background: var(--accent-bg); }

/* ───────────────── 정적 페이지의 상단 바 ─────────────────
   메인 앱과 블로그는 각자 #topbar 를 이미 갖고 있다. 도구·언어 학습·뉴스는
   여기 것을 쓴다. */

.siteHead {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.siteHeadIn {
  max-width: var(--content);
  margin: 0 auto;
  height: var(--topbar-h);
  padding: 0 max(var(--gutter), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.siteHead .brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 19px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.siteHead .brand b { font-weight: var(--fw-black); color: var(--accent-text); }

/* ───────────────── 구역 줄(둘째 줄) ───────────────── */

.sectionBar {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.sectionBarIn {
  max-width: var(--content);
  margin: 0 auto;
  min-height: 46px;
  padding: 6px max(var(--gutter), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* 이 구역의 이름. 링크일 수도 있고(구역의 첫 화면으로) 그냥 글자일 수도 있다. */
.sectionName {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap;
  min-width: 0;
}

a.sectionName:hover { color: var(--accent-text); }

/* 구역 줄 안의 보조 링크(러닝패스·코스처럼 그 구역에서만 쓰는 것). */
.sectionLink {
  padding: 5px 10px;
  border-radius: var(--r);
  color: var(--dim);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.sectionLink:hover { color: var(--text); background: var(--surface-2); }

/* 오른쪽으로 미는 것들 — 연속 학습일, 언어 선택 단추. */
.sectionEnd { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

@media (max-width: 720px) {
  /* 밀어서 봐야 하는 줄이므로, 한 화면에 한 개라도 더 들어오게 여백을 줄인다.
     누르는 자리는 세로로 넉넉해서 좁아져도 손가락이 빗나가지 않는다. */
  .siteNav a { padding: 7px 8px; }
  .siteHeadIn, .sectionBarIn { padding-left: max(14px, env(safe-area-inset-left)); padding-right: 14px; }
  .siteHeadIn { gap: var(--sp-2); }
  .sectionBarIn { overflow-x: auto; scrollbar-width: none; }
  .sectionBarIn::-webkit-scrollbar { display: none; }
}