/* ══════════════════════════════════════════════════════════════════════════
   MONC 공용 상단 메뉴 (2026-07-30 신설)

   오너 지시: "다른 페이지나 허브로 이동할 때 상단 네비게이션은 무조건 다 보이게".
   그 전까지 풀 메뉴는 index·researchers·challenges 세 곳뿐이었고 나머지 열 몇 페이지는
   '로고 + ← 홈으로'만 있어서, 한 번 들어가면 다른 데로 갈 길이 홈밖에 없었다.

   ⚠️⚠️ 마크업은 nav.js 가 심는다 — **페이지에 nav 를 복사해 넣지 말 것.**
      복사하면 지금까지 겪은 '세 파일 동기화' 문제가 파일 수만큼 늘어난다.
      페이지가 할 일은 <link nav.css> + <script nav.js defer> 두 줄뿐이다.

   ⚠️⚠️ 모든 선택자를 #navbar / #mobileMenu 로 감싼 것은 취향이 아니라 필수다.
      페이지마다 자기 .container(720~1140px)·.logo img{height:22px}·.btn 을 인라인
      <style> 로 들고 있는데, 그 <style> 은 이 파일 링크보다 뒤에 온다. 클래스만으로
      쓰면 특이도가 같아 페이지 규칙이 이겨서 페이지마다 메뉴가 다르게 보인다.
      id 선택자는 클래스보다 세서 어느 페이지에서든 같은 모양이 나온다.
      같은 이유로 **바 안에서는 페이지의 .container 를 쓰지 않는다**(폭이 제각각이라
      ai-killer 에선 720px 짜리 바가 된다). 아래 #navbar .nav-inner 가 폭을 직접 잡는다.
   ══════════════════════════════════════════════════════════════════════════ */

#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 11px 0;
  background: rgba(255,250,243,.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(36, 26, 18,.1);
  transition: background .3s, border-color .3s, box-shadow .3s;
}

/* ⚠️⚠️ 메뉴는 **화면 정중앙**(2026-07-30 오너, 나이키 헤더를 예시로 지시).
   앞선 두 시도(`1fr auto 1fr`, `auto 1fr auto`)는 둘 다 그리드 분배로 가운데를 잡으려다
   실패했다 — 오른쪽 버튼 덩어리(248px)가 제 트랙의 1fr 몫보다 넓어 트랙을 밀어내는 순간
   가운데가 그만큼 왼쪽으로 밀린다. 즉 **양옆 무게가 다르면 그리드 분배로는 정중앙이 안 나온다.**
   지금은 메뉴를 흐름에서 빼(absolute) 컨테이너 정중앙에 못 박는다.
   ⚠️ 대신 겹칠 수 있다. 좌우로 (컨테이너 − 메뉴)/2 씩 남는데 이 값이 오른쪽 버튼
   덩어리보다 좁아지면 포개진다 → **1000px 부터만 정중앙**, 769~999px 은 로고 옆 폴백.
   ⚠️ min-height 44px 은 '페이지마다 바 높이가 달라지지 않게' 하는 못이다 — 각 페이지 히어로가
   상단 여백(대개 104px)으로 이 바를 피하고 있어서, 바가 페이지마다 들쭉날쭉하면 안 된다. */
#navbar .nav-inner {
  position: relative;
  max-width: 1140px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; column-gap: 40px;
  min-height: 44px;
}

#navbar .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
#navbar .logo img { height: 26px; width: auto; display: block; }

/* ⚠️ 항목 간격은 활자의 1.4배 안팎(17px → 24px). '특강'·'후기'는 글자 폭이 30px 뿐이라
   틈이 그보다 넓어지면 메뉴가 다섯 덩어리로 흩어져 보이고, 반대로 좁으면 한 단어처럼 붙는다.
   ⚠️ li 를 flex 로 세우고 링크 행간을 1로 고정하는 것이 **세로 줄 맞춤의 핵심**이다 —
   그러지 않으면 링크는 본문 행간(1.7)을 물려받아 높이가 29px, 드롭다운 <button> 은 21px 이
   되어 '승준노트'만 2px 처진다(실측). 다섯 항목의 글자 상자 높이가 전부 17px 로 같아야 한다.
   ⚠️ 활자 크기는 건드리지 말 것(2026-07-30 오너 "크기는 절대 건드리지 마라").
      17px = 본문과 같은 급이고 12pt(16px) 하한도 넘는다. 14px 로 내리지도, 20px 위로 올리지도 말 것. */
#navbar .nav-links {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 24px; list-style: none; white-space: nowrap;
  margin: 0; padding: 0;
}
#navbar .nav-links > li { display: flex; align-items: center; }
#navbar .nav-links a {
  font-size: 17px; font-weight: 600; color: var(--text-muted); letter-spacing: -0.015em;
  line-height: 1; text-decoration: none; transition: color .2s;
}
#navbar .nav-links a:hover { color: var(--primary); }
/* 현재 위치 표시 — 하위 페이지(뉴스·상세 등)에 있어도 상위 메뉴에 표시가 남는다.
   ⚠️⚠️ **색만으로는 안 된다 — 밑줄 막대를 지우지 말 것**(2026-08-03 추가, 모바일 왼쪽
      막대와 같은 개념). 주력 항목(.nav-feature, 지금은 챌린지)은 어느 페이지에서든 항상
      --accent-ink 굵게라, 현재 위치까지 색·굵기로만 말하면 **챌린지가 늘 '현재 위치'로
      읽히고 정작 챌린지 페이지에 있을 때와 구분이 안 된다.** 색과 별개인 표식이라
      색각 이상에서도 구분된다(원칙 4). 모바일은 #mobileMenu 쪽에 같은 장치가 있다.
   ⚠️ 막대는 ::after 로 겹쳐 그린다 — 흐름에 자리를 차지하면 다섯 항목의 세로 줄 맞춤
      (잉크 중심 33px)과 바 높이 66px 이 틀어진다. bottom 값만 만지고 height 를 키우지 말 것.
   ⚠️ 드롭다운 버튼은 화살표(gap 6 + svg 15 = 21px)를 빼고 글자 폭에만 긋는다 — 안 빼면
      화살표 밑까지 밑줄이 삐져나와 옆 항목과의 간격(24px)이 절반으로 보인다.
   ⚠️⚠️ 선택자를 `> li >` 로 **상단 항목에만** 묶는다(2026-08-04 오너 지적 "선이 너무 아래라
      밑 카테고리로 오해된다"). 드롭다운 하위 링크도 `.nav-links` 안의 <a> 라 그냥 두면
      이 규칙을 같이 물려받는데, `bottom:-7px` 는 항목 상자 **바깥 7px 아래** = 다음 줄
      제목에서 5px 떨어진 자리라 아래 항목의 선으로 읽힌다(실측). 하위 링크 규칙은 아래 별도. */
#navbar .nav-links a[aria-current="page"] { color: var(--accent-ink); font-weight: 700; }
#navbar .nav-dd-btn[aria-current="page"] { color: var(--accent-ink); font-weight: 700; }
#navbar .nav-links > li > a[aria-current="page"],
#navbar .nav-dd-btn[aria-current="page"] { position: relative; }
#navbar .nav-links > li > a[aria-current="page"]::after,
#navbar .nav-dd-btn[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; border-radius: 2px; background: var(--action);
}
#navbar .nav-dd-btn[aria-current="page"]::after { right: 21px; }

/* 드롭다운(승준노트·챌린지) — 호버·포커스는 CSS, 클릭은 nav.js.
   ⚠️ 클릭은 토글이 아니다(2026-07-31) — 한 번 누르면 목차, 한 번 더 누르면 허브로 이동.
      닫기가 '바깥 클릭·Esc' 뿐이라 **열렸다는 표시가 화살표 회전 하나로 남는다** — 지우지 말 것. */
#navbar .nav-dd { position: relative; }
#navbar .nav-dd-btn {
  font-size: 17px; font-weight: 600; color: var(--text-muted); letter-spacing: -0.015em;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  line-height: 1;
  display: inline-flex; align-items: center; gap: 6px; transition: color .2s;
}
#navbar .nav-dd-btn:hover { color: var(--primary); }
#navbar .nav-dd-btn svg { width: 15px; height: 15px; transition: transform .2s ease; }
#navbar .nav-dd:hover .nav-dd-btn svg,
#navbar .nav-dd:focus-within .nav-dd-btn svg,
#navbar .nav-dd.is-open .nav-dd-btn svg { transform: rotate(180deg); }
#navbar .nav-dd-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 272px; padding: 8px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border-soft);
  box-shadow: 0 14px 40px rgba(36,26,18,.16);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
}
/* 버튼과 메뉴 사이 12px 틈을 호버 다리(::before)로 메움 — 없으면 내려가는 길에 닫힌다 */
#navbar .nav-dd-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
#navbar .nav-dd:hover .nav-dd-menu,
#navbar .nav-dd:focus-within .nav-dd-menu,
#navbar .nav-dd.is-open .nav-dd-menu { opacity: 1; visibility: visible; }
#navbar .nav-dd-menu a { display: block; padding: 12px 14px; border-radius: 10px; }
#navbar .nav-dd-menu a:hover { background: var(--bg2); }
#navbar .nav-dd-menu a b { display: block; font-weight: 700; font-size: 16px; color: var(--text); letter-spacing: -0.015em; }
#navbar .nav-dd-menu a span { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--text-dim); }
/* 목차 안 '지금 여기'(2026-08-04 오너 지적 "선이 너무 아래쪽이라 밑 카테고리로 오해된다").
   ⚠️ 선은 **자기 줄 설명글 바로 밑 3px**에 붙인다 — 항목 사이 틈은 위아래 패딩 12+12 = 24px 인데,
      그 틈의 아래쪽에 그리면 다음 줄 제목이 5px 앞이라 아래 항목의 선으로 읽힌다(구 -7px).
      지금은 제 글자에서 3px, 다음 제목에서 19px — 어디 소속인지 거리로 말한다.
   ⚠️ 폭도 **글자 폭**이다(140px, 항목 상자는 254px). 상자 폭 전체로 그으면 길이 때문에
      또 구분선으로 읽힌다 — 상단 항목 밑줄을 글자 폭에만 긋는 것과 같은 이유다.
   ⚠️ `width:fit-content` 로 줄인다 — `display:inline-block` 으로 줄이면 줄 상자에 기준선
      여백이 붙어 그 항목만 57→57.5px 로 부푼다(실측). 흐름을 안 건드리는 쪽을 쓴다.
   ⚠️ 제목 색도 같이 바꾼다 — `a b` 가 --text 를 직접 칠해서 `a` 쪽 색 규칙이 안 먹는다.
      (모바일 아코디언은 b 에 색이 없어 이미 --accent-ink 로 보인다. 그쪽과 짝을 맞춘 것.) */
#navbar .nav-dd-menu a[aria-current="page"] b { color: var(--accent-ink); }
#navbar .nav-dd-menu a[aria-current="page"] span { position: relative; width: fit-content; }
#navbar .nav-dd-menu a[aria-current="page"] span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; border-radius: 2px; background: var(--action);
}

/* 주력 항목 조용한 강조 — 지금은 **챌린지**(2026-08-03 오너 확정. 2026-07-22~08-03 은 승준노트).
   ⚠️ 클래스 이름이 `.nav-briefing` 이었다가 `.nav-feature` 로 바뀌었다 — 어느 항목이 주력인지는
      바뀔 수 있으니 이름에 페이지를 박지 않는다. nav.js 의 버튼 클래스와 한 쌍이다.
   ⚠️⚠️ **깜빡이는 점(bfPulse)은 삭제했다 — 되살리지 말 것.** 점의 뜻은 '새 것·살아있음'인데,
      승준노트에선 뉴스가 3시간마다 실제로 갱신돼 근거가 있었지만 챌린지는 모집이 0인 기간이
      있다. 모집 상태를 확인하지 않고 계속 깜빡이면 홈에서 지운 가짜 'DAY 7/14' 칩과 같은
      거짓 신호가 된다(index.html 주석 참조). 점을 다시 붙이려면 모집 수를 조회해서 켜야 한다.
   ⚠️ 코랄 알약·광택 스윕(오너 "혼자 튀어서 조화 안 맞음")과 창문 아이콘(오너 "로고같지도
      않다" — 10px 에선 정체불명 캡슐 테두리)도 앞서 폐기됐다. 지금 표식은 색·굵기뿐이다. */
#navbar .nav-links a.nav-feature,
#navbar .nav-dd-btn.nav-feature { color: var(--accent-ink); font-weight: 700; }
#navbar .nav-links a.nav-feature:hover,
#navbar .nav-dd-btn.nav-feature:hover { color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
  #navbar .nav-dd-btn svg { transition: none; }
}

/* 오른쪽 버튼 묶음 — margin-left:auto 가 오른쪽 끝으로 민다(메뉴가 absolute 라 흐름엔
   로고와 이 덩어리뿐이고, 좁은 화면 폴백에서도 같은 규칙으로 오른쪽에 붙는다). */
#navbar .nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }

/* ⚠️ 버튼은 페이지의 .btn 을 쓰지 않는다 — 페이지마다 .btn 정의가 달라(있는 곳도, 없는 곳도)
   같은 메뉴가 페이지마다 다른 버튼으로 보인다. 여기서 처음부터 끝까지 다 그린다.
   ⚠️ line-height 를 명시한다 — 본문 행간(1.7)을 물려받으면 활자만큼 버튼이 부푼다.
   높이는 활자가 아니라 min-height 44px(9대 원칙 2번 터치 최소치)로 잡는다. */
#navbar .nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 24px; border: 1.5px solid transparent; border-radius: 999px;
  background: var(--action); color: var(--action-ink);
  font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
  min-height: 44px; text-decoration: none; transition: background .2s, filter .2s;
}
#navbar .nav-cta:hover { filter: brightness(1.08); }
/* ⚠️ 보조 버튼은 주 버튼(신청하기 16px)보다 한 단계 작다 — 같은 크기면 오른쪽 끝에 비슷한
   알약 두 개가 나란히 서서 어느 쪽이 본 행동인지 안 읽힌다(9대 원칙 6번: 채움 CTA는 하나).
   테두리 1.5px 때문에 계산상 1px 이 어긋나므로 두 알약 모두 높이를 못 박는다. */
#navbar .nav-login {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--action);
  border: 1.5px solid var(--action); border-radius: 999px;
  padding: 10px 18px; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
  min-height: 44px; text-decoration: none; transition: background .2s;
}
#navbar .nav-login:hover { background: var(--action-tint); }

/* ⚠️ 이 블록은 반드시 .nav-cta / .nav-login **뒤에** 둘 것 — 특이도가 같아 앞에 두면
   뒤따르는 기본 규칙이 이겨서 조용히 무시된다(구 index.css 에서 실제로 죽어 있던 자리).
   769~1059px = 가운데 정렬 폴백 구간: 정중앙이면 좌우 여백이 버튼 덩어리보다 좁아져 겹친다.
   position:static 으로 되돌리면 메뉴가 흐름에 들어와 로고 옆에 붙는다.
   ⚠️ 여기서 활자는 안 건드린다 — 간격만 좁혀도 한 줄이 유지된다.
   ⚠️ 상한이 999 → 1059 로 올라간 이유(2026-08-02 C-9): '후기'가 드롭다운이 되며
      화살표만큼(+21px) 넓어져 **1000px 에서 메뉴가 우측 블록을 3px 침범**했다(실측).
      항목이나 화살표를 또 늘리면 **1060px 부터 다시 잰다.**
      ⚠️ 그때 적힌 '메뉴 5항목 폭 429px' 은 실측과 다르다 — 2026-08-04 재측정 **384.5px**
         (항목 64.8+79.4+64.8+29.2+50.2 = 288.4 + gap 24×4). 겹침 조건으로 풀면 가운데
         정렬은 924px 부터 가능하니 1060 은 여유가 있는 값이다(그대로 둔다). */
@media (min-width: 769px) and (max-width: 1059px) {
  #navbar .nav-inner { column-gap: 28px; }
  /* gap 16: '연구실'이 드롭다운이 되며 화살표만큼(+21px) 넓어져 18로는 769px에서 5px
     넘쳤다(2026-07-31 실측).
     ⚠️ 그 '16이면 넘침 0' 은 **'후기'가 드롭다운이 되기 전** 값이다 — 지금 이 값으로 버티는
        하한은 786px 이고, 769~819px 은 아래 전용 블록이 맡는다. */
  #navbar .nav-links { position: static; transform: none; gap: 16px; }
}

/* ⚠️⚠️ 아주 좁은 데스크톱(769~819px) — 위 폴백만으로는 **오른쪽 여백이 없어진다.**
   2026-08-04 실측: 위 값(column-gap 28 · 메뉴 gap 16)으로 한 줄에 필요한 폭이 **785.5px**
   (로고 87.6 + 28 + 메뉴 352.5 + 28 + 버튼 249.4 + 좌우 여백 40)인데 769px 에서 쓸 수 있는
   자리는 729px 이다 → 오른쪽 여백 20px 을 16.5px 잠식해 '신청하기'가 화면 끝에서 3.5px 앞에 선다.
   2026-07-31 의 '769px 넘침 0' 은 그때 '후기'가 드롭다운이 아니어서 맞은 값이고,
   2026-08-02 에 화살표(+21px)가 붙으며 이 구간이 마이너스로 넘어갔다(그날 확인은 1000px 만 했다).
   ⚠️ **여기서 진짜 위험한 건 스크롤바다.** 크로미움은 미디어쿼리를 스크롤바를 **포함한** 폭으로
      재고, 레이아웃은 스크롤바를 **뺀** 폭으로 잡는다. 그래서 창 769px + 클래식 스크롤바 15~17px
      이면 이 블록이 켜진 채로 실제 폭은 752~754px 이 되어 785.5px 짜리 바가 **11~13px 잘린다**
      (nav 는 fixed 라 가로 스크롤도 안 생긴다 — 그냥 잘린 채로 보인다).
      과거 기록의 '769px 인데 clientWidth 754' 도 같은 현상이다. **그래서 목표를 769 가 아니라
      752px 로 잡는다.** 재는 쪽도 `document.documentElement.scrollWidth`(fixed 요소는 안 잡힌다)가
      아니라 **`.nav-inner` 의 scrollWidth·안쪽 여백**을 봐야 한다.
   ⚠️ 활자는 여기서도 안 건드린다(오너 "크기는 절대 건드리지 마라"). 버튼도 min-height 44px 그대로 —
      좌우 패딩만 줄여서 터치 최소치는 유지한다. 처방 근거는 6항목 시절 기록과 같은 계열이다.
   ⚠️ 상한 819px 인 이유: 785.5px 이 필요하니 스크롤바 17px 을 감안하면 창 803px 까지는 좁혀야 한다.
      819 는 거기에 여유를 둔 값이다. **항목·화살표를 늘리면 785.5 부터 다시 잰다.**
   ⚠️ 이 블록도 `.nav-cta`·`.nav-login` **뒤에** 있어야 하고, 위 1059px 블록 **뒤에** 와야 한다
      (`#navbar .nav-inner` 특이도가 같아 앞에 두면 column-gap 28 이 이긴다). */
@media (min-width: 769px) and (max-width: 819px) {
  #navbar .nav-inner { column-gap: 20px; }
  #navbar .nav-links { gap: 12px; }
  #navbar .nav-cta { padding: 11px 18px; }
  #navbar .nav-login { padding: 10px 14px; }
}

/* 로그인 상태의 오른쪽 알약 — 로그아웃 상태의 '로그인/회원가입'과 같은 급으로 맞춘다
   (한쪽만 작으면 로그인 전후로 nav 무게가 달라 보인다). */
#navbar .mypage-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 6px 16px 6px 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--text); text-decoration: none; transition: border-color .2s;
}
#navbar .mypage-pill:hover { border-color: var(--action); }
#navbar .nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--action); color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
/* ⚠️ 좁은 화면 축소는 **기본 선언 뒤**에 둔다 — 위 nav 미디어 블록 안에 적으면 특이도가 같은
   기본 규칙이 뒤에 와서 이기고 조용히 무시된다(구 1180px 블록에서 실제로 죽어 있던 규칙). */
@media (min-width: 769px) and (max-width: 860px) {
  #navbar .mypage-pill { font-size: 14px; padding: 5px 14px 5px 5px; }
  #navbar .nav-avatar { width: 28px; height: 28px; font-size: 13px; }
}

/* 햄버거 — 보이는 크기는 38×32px, 터치 영역만 투명 ::after 로 44×44 로 넓힌다.
   ⚠️ 보이는 크기를 키우면 모바일 바가 57→68px 로 부푼다(실측). 지우면 9대 원칙 2번 위반. */
#navbar .hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 8px; background: none; border: none;
  -webkit-tap-highlight-color: transparent;
  position: relative; margin-left: auto;
}
#navbar .hamburger::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
#navbar .hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--primary); border-radius: 2px; transition: all .3s;
}
#navbar .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#navbar .hamburger.open span:nth-child(2) { opacity: 0; }
#navbar .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 모바일 메뉴 ───────────────────────────────────────────────────────── */
#mobileMenu {
  display: none; position: fixed; top: 57px; left: 0; right: 0; bottom: 0;
  background: rgba(255,250,243,.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 28px 24px; z-index: 99; overflow-y: auto;
}
#mobileMenu.open { display: flex; flex-direction: column; gap: 0; }
#mobileMenu ul { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
#mobileMenu li { border-bottom: 1px solid var(--border); }
/* 목록 링크에만 — 아래 CTA 버튼까지 덮치면 버튼 정렬·글자색이 깨진다 */
#mobileMenu ul a {
  display: block; padding: 18px 0;
  font-size: 17px; color: var(--text-muted); text-decoration: none; font-weight: 600;
}
#mobileMenu ul a[aria-current="page"] { color: var(--accent-ink); font-weight: 700; }
/* 주력 항목 강조 — 데스크톱과 같은 클래스(.nav-feature). 지금은 챌린지.
   ⚠️ 구 `.mm-acc-btn .nav-briefing` 은 점을 담으려고 버튼 안에 <span> 을 한 겹 두던
      구조였다. 점을 없애면서 span 도 없앴으니 클래스는 버튼에 바로 붙인다. */
#mobileMenu .mm-acc-btn.nav-feature { color: var(--accent-ink); font-weight: 700; }

/* ── '지금 여기' 표시 (2026-08-02 C-3) ────────────────────────────────────────
   ⚠️ 색만으로는 안 된다. 주력 항목(`.nav-feature`, 지금은 챌린지)은 어느 페이지에서든
      항상 --accent-ink 굵게라, 색 규칙만 넓히면 그 항목이 늘 '현재 위치'로 읽힌다.
      그래서 색과 별개인 왼쪽 막대를 쓴다 — 색각 이상에서도 구분된다(원칙 4).
      데스크톱에는 같은 이유로 밑줄 막대가 있다(위 '현재 위치 표시' 절).
   ⚠️⚠️ **막대는 글자를 밀지 않는다 — 왼쪽 여백(#mobileMenu 패딩 24px 안)에 그린다**
      (2026-08-04 오너 지적 "모바일에서 저 선 위치가 삐뚤어졌잖아"). 구 방식은
      `inset 3px` + `padding-left:12px` 이라 **현재 줄만 글자가 안쪽으로 밀렸고**,
      하위 줄에서는 자기 테두리(레일 2px) 안쪽에 막대가 그려져 **상위 줄 막대와 2px 어긋난 채
      레일과 겹쳐** 층이 진 선으로 보였다(실측: 상위 x=24, 하위 x=26, 글자 38 vs 형제 40).
      지금은 상위 줄 막대가 왼쪽 여백(x=12)에 서고, 글자는 어느 줄도 안 움직인다.
   ⚠️⚠️ **하위 줄 막대는 여백에 못 그린다 — `.mm-acc-panel` 이 `overflow:hidden`**(펼침
      전환이 max-height 라 필수)**이라 패널 왼쪽 밖은 잘려서 아예 안 보인다.** 계산상
      x=12 로 맞춰 놓고 화면에 안 나온 자리다 — 값만 재고 눈으로 안 봤으면 놓친다.
      그래서 하위 줄은 **원래 있는 세로 레일(`.mm-sub` 의 border-left 2px) 위에 겹쳐** 긋는다:
      레일과 왼쪽 끝이 같고 1px 만 굵어, 회색 레일이 그 구간만 네이비로 바뀐 것처럼 보인다. */
#mobileMenu ul > li > a[aria-current="page"],
#mobileMenu .mm-acc-btn[aria-current="page"],
#mobileMenu .mm-acc-panel a[aria-current="page"] {
  position: relative;
  color: var(--accent-ink);
}
#mobileMenu ul > li > a[aria-current="page"]::before,
#mobileMenu .mm-acc-btn[aria-current="page"]::before,
#mobileMenu .mm-acc-panel a[aria-current="page"]::before {
  content: ''; position: absolute; left: -12px; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--action);
}
#mobileMenu .mm-acc-panel a[aria-current="page"]::before { left: -2px; top: 2px; bottom: 2px; }
#mobileMenu .mm-acc-btn[aria-current="page"] { font-weight: 800; }

/* 아코디언(승준노트·챌린지) — 탭 한 번에 하위 항목을 펼쳐 바로 이동.
   ⚠️ 토글은 반드시 <button> — 햄버거 로직이 메뉴 안 <a> 전부에 '클릭 시 메뉴 닫기'를
   걸어놔서, <a> 로 만들면 펼치는 순간 메뉴가 통째로 닫힌다. */
#mobileMenu .mm-acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 18px 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600; color: var(--text-muted);
  text-align: left; -webkit-tap-highlight-color: transparent;
}
#mobileMenu .mm-acc-chev { flex-shrink: 0; transition: transform .28s ease; }
#mobileMenu .mm-acc.is-open .mm-acc-chev { transform: rotate(180deg); }
/* max-height 전환 — grid 0fr→1fr 은 구형 iOS 사파리에서 안 먹어 펼침이 통째로 죽는다.
   ⚠️ 상한은 실측 콘텐츠(375px에서 5칸 370px)보다 넉넉해야 한다 — 모자라면 설명이 한 줄
   늘어난 좁은 화면에서 마지막 칸이 잘린다. 항목을 추가하면 같이 올릴 것. */
#mobileMenu .mm-acc-panel {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .28s ease, visibility 0s linear .28s;
}
/* ⚠️ max-height 는 열림 전환용 고정값이라 **가장 긴 패널보다 커야 한다** — 모자라면
   overflow:hidden 이 마지막 항목을 조용히 잘라낸다(실측 2026-07-31: 승준노트 7줄 = 494px
   인데 460px 이라 '필수 기출 하루 한 개' 설명이 잘려 있었다).
   ⚠️ 같은 날 '한눈에' 항목이 빠져 6줄 = 442px(375px 실측)로 줄었지만 560px 은 그대로 둔다 —
      여유일 뿐 손해가 없고, 항목이 다시 늘 때 잘림 사고가 안 난다.
   하위 항목을 추가하거나 문구를 늘리면 scrollHeight 를 다시 재서 이 값을 올릴 것. */
#mobileMenu .mm-acc.is-open .mm-acc-panel {
  max-height: 560px; visibility: visible;
  transition: max-height .28s ease, visibility 0s;
}
#mobileMenu ul a.mm-sub {
  padding: 11px 0 11px 14px; border-left: 2px solid var(--border);
  font-size: 15px; color: var(--text);
}
#mobileMenu ul a.mm-sub:last-child { margin-bottom: 12px; }
#mobileMenu .mm-sub b { display: block; font-weight: 700; }
#mobileMenu .mm-sub span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  #mobileMenu .mm-acc-chev, #mobileMenu .mm-acc-panel { transition: none; }
}

#mobileMenu .mobile-menu-cta { margin-top: 28px; }
#mobileMenu .mobile-menu-cta a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 16px; border-radius: 999px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
  text-decoration: none; border: 1.5px solid transparent;
}
/* ⚠️ 선택자에 a 를 붙여 위 `.mobile-menu-cta a` 와 특이도를 맞춘다 — `#mobileMenu .mm-login`
   만으로는 위 규칙(id+class+element)이 더 세서 border 가 transparent 로 덮이고,
   '로그인 / 회원가입'이 테두리 없는 맨 글씨로 보인다(실측으로 밟은 자리). */
#mobileMenu .mobile-menu-cta a.mm-login { background: transparent; color: var(--action); border-color: var(--action); margin-bottom: 12px; }
#mobileMenu .mobile-menu-cta a.mm-apply { background: var(--action); color: var(--action-ink); }

/* ── 소셜(모바일) — 햄버거 메뉴 맨 아래 (2026-08-04 오너 확정) ──────────────
   "모바일은 햄버거, 데스크톱은 푸터". 데스크톱 몫은 아래 #moncSocial 절.
   ⚠️ 이 자리는 **모바일 전용이 자동으로 보장된다** — #mobileMenu 자체가 768px 이하에서만
      뜨므로(햄버거) 별도 미디어쿼리가 필요 없다. 여기에 숨김 규칙을 추가하지 말 것.
   ⚠️ min-height 44px(원칙 2 터치 최소치). 아이콘 20px + 글자 15px 이라 그냥 두면 30px 이다.
   ⚠️ 글자를 지우고 아이콘만 남기지 말 것 — 원칙 15(값에는 그것이 무엇인지 붙이기).
   ⚠️ 브랜드색(인스타 그라디언트·유튜브 빨강)은 쓰지 않는다. 팔레트가 딥 네이비 on 웜
      페이퍼라 하단에서 두 덩어리만 튄다. 형태만으로 식별되는 아이콘이라 색이 없어도 읽힌다. */
#mobileMenu .mm-social {
  display: flex; align-items: center; gap: 22px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
#mobileMenu .mm-social a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--text-muted);
  text-decoration: none; letter-spacing: -0.015em;
  -webkit-tap-highlight-color: transparent;
}
#mobileMenu .mm-social svg { width: 20px; height: 20px; flex: 0 0 auto; }
#mobileMenu .mm-social a:hover { color: var(--action); }

/* 회원 카드(로그인 상태에서 nav.js 가 맨 위에 끼워 넣는다) */
#mobileMenu .mm-member-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; margin-bottom: 16px;
  background: var(--surface2); border-radius: var(--radius-sm);
  text-decoration: none;
}
#mobileMenu .mm-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--action); color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
#mobileMenu .mm-member-text { font-size: 15px; color: var(--text); line-height: 1.4; }
#mobileMenu .mm-member-text b { font-weight: 800; }
#mobileMenu .mm-go { display: block; font-size: 13px; color: var(--action); font-weight: 700; margin-top: 2px; }

/* ⚠️ 고정 바라 본문 맨 위가 바 밑에 깔린다. 히어로에 상단 여백(대개 104px)이 이미 있는
   페이지는 그대로 두고, 여백이 없는 페이지(신청·약관·마이페이지 등)만 <body data-nav-offset>
   을 달아 밀어 준다 — 둘 다 하면 두 번 밀려 위가 휑해진다. */
body[data-nav-offset] { padding-top: 67px; }

@media (max-width: 768px) {
  body[data-nav-offset] { padding-top: 57px; }
  #navbar { padding: 12px 0; }
  /* ⚠️ min-height 를 푼다 — 모바일 바에는 44px 짜리 버튼이 없고 햄버거(32px)만 남는데,
     44px 을 그대로 두면 바가 57→69px 로 부푼다(실측). 그러면 #mobileMenu 의 top(57px)·
     body[data-nav-offset] 의 여백과도 어긋나 메뉴가 바를 12px 덮는다.
     터치 44px 은 햄버거의 투명 ::after 히트영역이 이미 책임진다. */
  #navbar .nav-inner { padding: 0 16px; min-height: 0; }
  #navbar .nav-links { display: none; }
  #navbar .nav-right { display: none; }   /* 모바일 상단은 로고+햄버거만 — CTA는 햄버거 메뉴로 일원화 */
  #navbar .hamburger { display: flex; }
}

/* ── 소셜(데스크톱) — 페이지 푸터 맨 끝 (2026-08-04 오너 확정) ─────────────────
   nav.js 의 mountFooterSocial() 이 심는다. 모바일 몫은 위 #mobileMenu .mm-social.
   ⚠️⚠️ **id 선택자여야 한다.** 페이지들이 자기 인라인 <style> 로 `footer a {...}` 를
      들고 있고 그 <style> 은 이 파일보다 뒤에 온다 — 클래스로 쓰면 페이지마다 색·밑줄이
      제각각이 된다(이 파일이 #navbar/#mobileMenu 로 감싼 것과 같은 이유).
   ⚠️ 표적 하한 24px(WCAG 2.5.8 AA) — index.css 의 .footer-links 와 같은 값을 쓴다.
      푸터는 터치보다 마우스가 쓰는 자리라 44px 이 아니라 24px 이 기준이다.
   ⚠️ 정렬은 푸터 구조를 따라간다. `.footer-inner`(풀 푸터 7종)는 왼쪽 정렬 컬럼이라
      기본 flex-start 로 맞고, `footer` 직계(미니 푸터 7종)는 본문이 가운데 정렬이라
      소셜만 왼쪽에 서면 어긋난다 — 아래 `footer > #moncSocial` 이 그 경우다. */
#moncSocial {
  display: flex; align-items: center; gap: 20px;
}
/* ⚠️ 위 여백은 **미니 푸터에만** 준다 — 풀 푸터는 `.footer-inner` 가 `gap:18px` 로 이미
   줄 간격을 잡고 있어서, 여기에 margin 을 또 주면 소셜 줄만 32px 로 벌어진다(실측). */
footer > #moncSocial { justify-content: center; margin-top: 14px; }
/* 가로로 늘어선 푸터(챌린지 상세 4종 — `.footer-inner` 가 row + space-between)에서
   제 줄을 차지한다. `flex-basis` 만으로는 부족하다 — shrink 기본값 1 이라 로고와 같은
   줄에 남으려고 줄어든다. `0 0 100%` 로 못 박아야 줄이 바뀐다. */
#moncSocial.is-row { flex: 0 0 100%; }
#moncSocial a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 24px;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  text-decoration: none; letter-spacing: -0.015em;
}
#moncSocial svg { width: 18px; height: 18px; flex: 0 0 auto; }
#moncSocial a:hover { color: var(--accent); text-decoration: underline; }
/* ⚠️ 모바일에서는 숨긴다 — 같은 링크가 햄버거 메뉴에 이미 있다(오너가 자리를 기기별로
   나눈 이유). 이 블록은 기본 선언 **뒤**에 둘 것: 특이도가 같아 앞에 두면 뒤의 기본
   규칙이 이겨서 조용히 무시된다(구 .mypage-pill 축소가 그렇게 죽어 있던 자리). */
@media (max-width: 768px) {
  #moncSocial { display: none; }
}

/* ── 본문 바로가기 (2026-08-02 D-12) ─────────────────────────────────────────
   평소엔 .sr-only(tokens.css)로 숨어 있고, 포커스되면 화면 왼쪽 위에 나타난다.
   ⚠️ :focus 시 .sr-only 의 clip/position 을 전부 되돌려야 보인다 — 하나라도 남으면
      포커스는 갔는데 화면엔 안 보이는 상태가 된다(키보드 사용자가 길을 잃는다). */
#navbar ~ .skip-link, .skip-link { z-index: 200; }
.skip-link:focus {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto; margin: 0; padding: 12px 18px;
  clip: auto; clip-path: none; white-space: normal; overflow: visible;
  background: var(--action); color: var(--action-ink);
  font-size: 15px; font-weight: 800; border-radius: var(--radius-xs);
  text-decoration: none; box-shadow: var(--shadow-lg);
  outline: 3px solid var(--accent-dark); outline-offset: 2px;
}
/* 착지점에 포커스가 갈 때 브라우저 기본 테두리가 본문 전체를 감싸 보이는 걸 막는다 */
#main:focus { outline: none; }

/* ── 포커스 링 공통 (2026-08-02 D-14) ──────────────────────────────────────
   크로미움 기본 링은 1px 주황이라 웜페이퍼 위에서 거의 안 보인다(실측).
   ⚠️ :focus-visible 만 건드린다 — :focus 로 하면 마우스 클릭에도 링이 남는다.
   ⚠️ 개별 페이지가 자기 :focus-visible 을 정의했으면 그쪽이 이긴다(의도). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}