/* 주 네비게이션과 구역 줄. * * 목록은 backend/app/nav.py 에 있고, 모양은 여기 있다. 메인 앱·블로그·코스 * 페이지·도구·언어 학습·뉴스가 모두 이 파일을 링크한다. 값은 전부 * /design.css 의 토큰이라, 색과 간격은 여기에 적지 않는다. * * 두 줄로 나눈 이유 * ───────────────── * 첫째 줄(.siteNav)은 어느 화면에서나 같다. 구역마다 다른 것(언어 학습의 * 연속 학습일, 뉴스의 언어 선택, 도구의 현재 위치)은 둘째 줄(.sectionBar)로 * 내렸다. 그래야 "지금 어디에 있든 사이트 전체로 갈 수 있다" 는 성질과 * "이 구역에는 이런 것이 있다" 는 성질이 서로 자리를 뺏지 않는다. * * 좁은 화면 * ───────── * 메뉴는 휴대폰 한 줄에 다 들어가지 않는다. 예전에는 가로로 밀어서 봤는데, * 밀 수 있다는 사실 자체가 보이지 않아 뒤쪽 항목은 없는 것과 같았다. * 이제 860px 아래에서는 어느 화면에서나 햄버거로 접는다. * * 메인 앱 app.js 의 서랍(☰). 원래 있던 것이고, 이제 좁은 화면에서 * #mainnav 를 감춘다(style.css) — 서랍이 그 목록을 복제한다. * 나머지 화면 여기 있는 CSS 여닫이. 자바스크립트가 없다. * * 자바스크립트로 여닫지 않는 이유는, 이 메뉴가 정적 HTML 에도 박히기 * 때문이다. 스크립트가 늦거나 실패하면 **메뉴가 아예 열리지 않는다** — * 감춰 두었으니 밀어서 볼 수도 없다. 그래서 감춰 둔 체크상자(.navToggle)와 * 라벨(.navBurger)로 여닫는다. 상자는 보이지 않지만 탭으로 갈 수 있고 * 스페이스로 눌린다. */ /* ───────────────── 주 네비게이션 ───────────────── */ .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); } /* 로고는 어느 페이지에서나 같은 크기다. 마크업의 width 가 26·28·30 으로 제각각이라 페이지를 옮길 때 메뉴가 2px 씩 밀렸다(2026-09-07 실측). */ .siteHead .brand img { width: 28px; height: 28px; } /* ───────────────── 구역 줄(둘째 줄) ───────────────── */ .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; } /* ───────────────── 좁은 화면의 여닫이 ───────────────── 넓은 화면에서는 셋 다 없는 것처럼 군다. .navWrap 이 `display: contents` 라