/* ══════════════════════════════════════════════════════════════════════════
   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: repeat(3, 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;
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	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;
}

/* 고른 칸이 칠해진다 — 상태는 각 칸의 `aria-checked` 에 있다(묶음 하나의 참/거짓이 아니라
   셋 중 하나이므로). 그래서 CSS 도 칸을 본다: 마크업이 말하는 상태를 그대로 읽는다.

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

.mode-cell:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* ── 누가 보고 있나 ── **표시이고 단추가 아니다**(아직 로그인이 없다 — 죽은 단추를 두지
   않는다). 그래서 hover·cursor 를 주지 않는다: 손이 반응하는 것은 누를 수 있는 것뿐이다.

   자리표시는 **점선**이다 — 이 제품이 「미지정」에 쓰는 어휘를 그대로 빌린다(목록의 고객사·
   담당자 배지). 로그인이 들어오면 `is-placeholder` 가 빠지고 실선이 된다. */
.nav-user {
	display: inline-flex;
	/* **아바타는 왼쪽, 글자는 세로 가운데.** 계정 표시의 관례다(GitHub·Google·Slack) —
	   묶음을 가운데 두면 이름 길이에 따라 아바타가 좌우로 움직여, 머리에서 «늘 같은 자리에
	   있는 표시» 라는 성질을 잃는다. 남는 폭은 오른쪽에 둔다(바닥 폭이 내용보다 넓다).
	   세로는 마크(20px 원)와 글자(13px)의 중심이 상자 중심에 맞는다(실측: 27.5·27.3·27.5). */
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
	height: 1.75rem;             /* 밝기 선택기와 같은 높이 — 한 줄의 밑선이 맞는다 */
	/* **너비를 넓힌다.** 11px 글자에 좁은 여백이라 이 줄에서 혼자 «쪼끄만» 조각이었다
	   (사용자 지적). 높이는 머리의 값(28px)이므로 넓히는 방향은 가로뿐이다: 여백을 키우고
	   글자를 메뉴와 같은 13px 로 올린다. 글자 크기에 국제 규격은 없다 — 표적 규격
	   (WCAG SC 2.5.8/2.5.5)은 «누를 수 있는 것» 의 크기이고 이것은 표시다. 그래서 기준은
	   같은 줄의 부품이다: 메뉴 글자(13px)와 같아지면 한 줄이 한 목소리로 읽힌다. */
	/* 왼쪽은 아바타가 테두리에 붙지 않을 만큼만, 오른쪽은 이름이 끝까지 닿지 않을 만큼. */
	padding-inline: 0.5rem 0.75rem;
	/* **폭을 이름이 정하지 않게 한다.** 내용 폭에 맡기면 `popup`(5자)에서는 좁고, 로그인이
	   붙어 실제 이름이 들어오면 그때마다 머리의 오른쪽 끝이 흔들린다. 열두 자 남짓을 담는
	   폭으로 바닥을 두어(13px 글자 × 12자 ≈ 86px + 머리글자 20 + 사이 6 + 여백 22 = 134px)
	   짧은 이름에서도 «자리» 로 읽히고 긴 이름에서도 자리가 그대로다. 그보다 길면 이름을
	   줄임표로 끊는다 — 머리가 늘어나 메뉴를 밀어내는 것보다 낫다. */
	min-width: 8.5rem;
	/* **상한을 두지 않는다.** 계정 이름은 끝까지 보여야 한다(사용자 결정) — 줄임표로 끊으면
	   `user@popupstudio.ai` 와 `user2@popupstudio.ai` 가 화면에서 같아 보인다. 칩은 이름만큼
	   넓어지고, 그럴 자리가 없는 폭에서는 이름을 통째로 접는다(아래 미디어 규칙) — «절반만
	   보이는 계정» 보다 «머리글자만» 이 정직하다. */
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	font-size: var(--t-sm);
	color: var(--fg-2);
	white-space: nowrap;
}

.nav-user.is-placeholder {
	border-style: dashed;
	color: var(--fg-3);
}

/* ── 아바타 ── **찌그러지지 않는다.** flex 항목이라 기본값(`flex-shrink: 1`)으로는 긴
   이름이 밀 때 가로만 줄어든다 — 실측 15.3×20 의 «타원» 이 됐다(사용자 지적). 줄지 않게
   못박고(`flex: 0 0 auto`) 비율도 함께 걸어 둔다(`aspect-ratio: 1`): 둘 중 하나만 두면
   나중에 폭·높이 중 한쪽을 고칠 때 다시 타원이 된다.

   빈 아바타는 **사람 실루엣**이다 — 사진 없는 계정의 국제 관례(Material `account_circle`,
   Gravatar mystery-person). 원은 여기서 그리고 실루엣은 그 안에 든다. */
.nav-user-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--line);
	color: var(--fg-3);
	overflow: hidden;
}

.nav-user-mark svg {
	width: 0.9375rem;            /* 15px — 원(20px)의 3/4. 실루엣이 원에 닿지 않는다 */
	height: 0.9375rem;
	display: block;
}

/* 이름은 칸 안에서 끊는다(칸이 늘어나지 않는다).

   **상자를 «대문자 높이» 로 잘라야 세로가 맞는다.** 글자 상자를 가운데 맞추면 글자가
   아래로 쏠려 보인다(실측: 잉크 중심 30 · 마크 중심 27.5 — 2.5px 낮다). 줄간격을 1 로
   눌러도 그대로다: 원인이 줄간격이 아니라 **문자열**이기 때문이다 — `popup` 은 대문자·
   올림자가 없고 내림자(p)가 둘이라 잉크가 em 상자 안에서 아래에 앉는다. 이름은 데이터라
   («popup» → 나중엔 실제 이름) 문자열마다 손으로 밀 수도 없다.

   `text-box: trim-both cap alphabetic` 은 상자를 **문자열이 아니라 폰트의 대문자 높이~
   기준선**으로 자른다 — 그래서 어떤 이름이 와도 대문자 띠의 가운데가 상자 가운데에 온다
   (CSS Inline Layout 3, Chrome 133+). 지원하지 않는 브라우저에서는 지금과 같이 보인다:
   줄간격 1 로 상자를 글자에 붙여 두는 것이 그 경우의 최선이다. */
.nav-user-name {
	line-height: 1;
	text-box: trim-both cap alphabetic;
	/* 자르지 않는다 — 이름은 끝까지 보인다. 상자가 대문자 높이~기준선으로 줄어 있으므로
	   `p`·`g` 의 꼬리는 상자 밖에 그려지는데, `visible` 이라 그대로 보인다(예전에는
	   `overflow: hidden` 이 그 꼬리를 잘랐다). */
	overflow: visible;
	white-space: nowrap;
}

/* 아주 좁으면 이름을 접는다 — 머리글자만으로도 «로그인 자리» 는 읽힌다. */
@media (max-width: 480px) {
	.nav-user-name {
		display: none;
	}

	.nav-user {
		padding-inline: 0.35rem;
		min-width: 0;             /* 이름을 접으면 바닥 폭도 필요 없다 */
	}
}

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

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

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

	}