/* ══════════════════════════════════════════════════════════════════════════
   nav.css — 머리 한 컴포넌트.
   #nav 와 그 자식만 다룬다. Footer·본문의 규칙을 여기에 두지 않는다.

   셸 CSS 는 책임별로 나뉘어 있다(`static/css/shell/`). 한 파일이 토큰·바탕·머리·Footer를
   모두 갖고 있으면 «머리 간격 하나» 를 고치러 700줄을 뒤져야 하고, 무엇이 시스템이고
   무엇이 한 컴포넌트인지 구분이 사라진다.

     tokens.css   색·서체·크기·간격         — **다른 모든 CSS 가 의존한다**
     base.css     리셋·바탕·초점·건너뛰기    — tokens 에만 의존
     nav.css      머리 한 컴포넌트          — tokens 에만 의존
     footer.css   Footer 한 컴포넌트          — tokens 에만 의존

   의존은 한 방향뿐이다(tokens ← 나머지). 컴포넌트끼리는 서로를 모른다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════ 3. 머리 ═══════════════════════════ */

/* 얇고 고정되며 **맨 위에서는 선이 없다.** 스크롤이 시작되면 그때 선과 흐림을 얻는다 —
   문서의 첫 화면에서 머리가 지면과 이어져 보이는 것이 지금의 관행이고, 내려간 뒤에는
   내용과 겹치므로 경계가 필요해진다. 그 전환을 `.is-stuck` 이 맡는다(shell.js). */
#nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-nav);
	height: var(--nav-h);
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	/* 배경은 화면 끝까지, 내용은 --page-max 에서 멈춘다(base.css 의 계산식) */
	padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2));
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

#nav.is-stuck {
	background: var(--surface);
	border-bottom-color: var(--line);
	backdrop-filter: saturate(1.6) blur(12px);
	-webkit-backdrop-filter: saturate(1.6) blur(12px);
}

/* ── 워드마크 ── 마크 + 이름 + 등록 총계. 총계는 이 사이트의 주어라 어느 화면에서나 보인다. */
.nav-brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);   /* 누를 수 있는 것의 최소 표적 — WCAG SC 2.5.8 */
	gap: 0.45rem;
	flex: 0 0 auto;
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fg);
	text-decoration: none;
}
.nav-brand:focus-visible {
	text-decoration: none;
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.nav-brand:hover {
		text-decoration: none;
	}
}

/* 마크 — 겹친 두 사각형. 이 도구가 하는 일(흩어진 것을 겹쳐 한곳에 둔다)의 도형이다.
   액센트색을 여기에만 쓰지 않는다: 브랜드에 색을 박으면 «지금 여기» 를 알리는 액센트와
   경쟁한다. 잉크색으로 두고, 마우스를 올릴 때만 액센트로 물든다. */
.nav-mark {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	color: var(--fg);
	transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-brand:focus-visible .nav-mark {
	color: var(--accent);
	transform: translateX(1px);
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.nav-brand:hover .nav-mark {
		color: var(--accent);
		transform: translateX(1px);
	}
}

.nav-brand-name {
	line-height: 1;
}

/* ── 메뉴 ──
   현재 위치는 **밑줄**로 알린다. 색만으로 알리면 색각 이상에서 사라지고, 배경 알약으로
   알리면 «선택된 필터» 처럼 보인다. `aria-current` 가 보조기술 쪽 담당이다. */
.nav-menu {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex: 1 1 auto;
	min-width: 0;
}

.nav-menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding: 0 0.6rem;
	border-radius: var(--radius-sm);
	font-size: var(--t-sm);
	font-weight: 500;
	/* 대문자는 **CSS 로만** 만든다 — 마크업의 글자는 `Home` 그대로다. 그래야 페이지
	   제목·`aria-current` 를 읽는 쪽이 「HOME」 이 아니라 「Home」 을 받는다(화면낭독기는
	   전부 대문자인 단어를 철자 하나씩 읽기도 한다).
	   자간을 함께 벌린다 — 대문자는 소문자보다 글자폭이 고르고 붙어 보여서, 자간 없이
	   대문자로만 바꾸면 덩어리로 뭉친다. */
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fg-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-menu a:focus-visible {
	color: var(--fg);
	background: var(--accent-soft);
	text-decoration: none;
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.nav-menu a:hover {
		color: var(--fg);
		background: var(--accent-soft);
		text-decoration: none;
	}
}

.nav-menu a[aria-current='page'] {
	color: var(--fg);
	font-weight: 600;
}

/* ── 미끄러지는 표시자 ──
   칸마다 밑줄을 그리지 않고 **하나가 옮겨 다닌다.** 각자 그리면 켜졌다 꺼질 뿐이지만,
   하나가 움직이면 «어디서 어디로» 가 보인다. 위치는 shell.js 가 재서 `--x`·`--w` 로 넘기고
   (현재 칸이 몇 번째인지 CSS 는 모른다), **움직임의 규칙은 여기서 갖는다.**

   머리의 아래 선 위에 얹혀 탭이 «머리에 붙어 있다» 는 느낌을 준다. */
.nav-menu {
	position: relative;
}

.nav-ink {
	position: absolute;
	left: 0;
	bottom: calc((var(--nav-h) - 2rem) / -2 - 1px);
	height: 2px;
	width: var(--w, 0);
	background: var(--accent);
	opacity: 0;
	transform: translateX(var(--x, 0));
	transition: transform 0.3s var(--ease), width 0.3s var(--ease),
	            opacity var(--dur) var(--ease);
	pointer-events: none;
}

/* JS 가 죽으면 표시자가 서지 않는다 — 그때는 현재 칸이 스스로 밑줄을 갖는다.
   `:has()` 로 «표시자가 없을 때만» 이라고 쓰면 두 밑줄이 겹치지 않는다. */
.nav-menu:not(:has(.nav-ink)) a[aria-current='page']::after {
	content: '';
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	bottom: calc((var(--nav-h) - 2rem) / -2 - 1px);
	height: 2px;
	background: var(--accent);
}

/* ── 읽기 진행선 ──
   머리의 아래 선 자리에 겹쳐 둔다. 두께 2px, 왼쪽에서 자란다. `transform: scaleX` 로
   움직이므로 레이아웃을 다시 계산하지 않는다(스크롤마다 폭을 바꾸면 매 프레임 리플로우다). */
.nav-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
}

.nav-progress[hidden] {
	display: none;
}

.nav-progress i {
	display: block;
	height: 100%;
	background: var(--accent);
	opacity: 0.55;
	transform: scaleX(0);
	transform-origin: left center;
}

/* ── 오른쪽 ── */
.nav-end {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
}

/* ── 밝기 선택기 ──
   **둥근 알약을 쓰지 않는다.** 미끄러지는 손잡이가 달린 둥근 토글은 소비자 앱의 관용구이고
   어디서나 같은 모양이라 «고른 것» 이 아니라 «기본값» 으로 보인다.

   각진 두 칸이다. 해·달이 둘 다 보이고 지금 쪽 칸이 칠해진다 — 움직이는 부품이 없고,
   선택지가 눈앞에 있어 «누르면 뭐가 되지» 를 짐작할 필요가 없다.
   반경은 시스템 값(4px)을 그대로 쓴다: 여기만 0 으로 두면 혼자 다른 언어가 된다. */
.mode-pick {
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	height: 1.75rem;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: transparent;
	cursor: pointer;
	color: var(--fg-3);
	overflow: hidden;             /* 칸의 채움이 테두리 밖으로 새지 않게 */
	transition: border-color var(--dur) var(--ease);
}
.mode-pick:focus-visible {
	border-color: var(--accent);
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.mode-pick:hover {
		border-color: var(--accent);
	}
}

.mode-cell {
	display: grid;
	place-items: center;
	width: 1.75rem;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* 두 칸을 나누는 선 — 바깥 테두리와 같은 굵기라 «한 부품» 으로 읽힌다 */
.mode-cell + .mode-cell {
	border-left: 1px solid var(--line-strong);
}

.mode-cell svg {
	width: 0.75rem;
	height: 0.75rem;
	display: block;
}

/* 지금 쪽 칸이 칠해진다. 꺼짐=밝음(왼쪽 해) · 켜짐=어두움(오른쪽 달).

   **채움은 액센트다.** 처음에 잉크색(`--fg`)으로 칠했더니 밝은 테마에서 «해 아이콘 위에
   검은 배경» 이 되어 뜻이 뒤집혔다 — 칸의 색이 «그 모드의 색» 으로 읽히기 때문이다.
   액센트는 밝기와 무관한 «지금 고른 것» 의 색이라 그 오독이 생기지 않는다. */
.mode-pick[aria-checked='false'] .mode-cell[data-mode='light'],
.mode-pick[aria-checked='true'] .mode-cell[data-mode='dark'] {
	background: var(--accent);
	color: var(--on-accent);
}

/* 좁은 화면 — 메뉴는 접지 않고 가로로 흐르게 둔다. 세 칸뿐이라 서랍을 열 이유가 없다
   (서랍은 «누르고 → 열리고 → 고른다» 세 동작이고, 여기서는 한 동작이면 끝난다). */
@media (max-width: 640px) {
	:root {
		--nav-h: 3.25rem;
	}

	.nav-menu {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.nav-menu::-webkit-scrollbar {
		display: none;
	}

	}