/* ═══════════════════════════════════════════════════════════════════════════
   site-shell.css — 사이트 공용 껍데기 (토큰 · 글꼴 · 상단 바 · 현재 위치 줄)
   2026-08-21 운영자: 「허브 디자인과 상단 바 항목들이 메인 홈·/exams/ 와 조화롭지 않다」

   왜 새 파일인가
     저장소에 **사이트 전역 디자인 토큰·네비 모듈이 없었다.** 랜딩(.nav)·/exams/(.ex-nav)·
     트랙 허브(.td-nav) 가 비슷한 값을 손으로 베껴 세 벌로 자랐고, 한쪽을 고쳐도 다른 쪽이
     안 따라왔다. 공유되던 것은 계정 위젯(site-nav-auth) 하나뿐이었다.
     계정 위젯 파일에 얹지 않은 이유: 모듈 경계가 무너지고(CLAUDE.md 기능별 모듈화),
     @import 로 글꼴을 부르면 요청 체인이 4홉이 돼 글꼴 깜빡임이 길어진다.

   ⛔ 로드 순서 — 이 파일은 **페이지 CSS 뒤**에 와야 한다.
      앞에 두면 track-dash.css 가 `.td-nav-inner{max-width}` 를 도로 1440 으로 돌린다.

   ⛔ 클래스명을 바꾸지 않는다 — 세 네비의 기존 클래스를 **동시에 같은 규칙으로** 그린다.
      회귀 잠금과 e2e 가 정적 마크업을 표적하므로 마크업 무수정이 안전하다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ⛔ 글꼴·크기 계단(--font-sans · --fs-* · --lh*)은 여기 없다 —
     정본은 assets/type-tokens.css 다. 이 파일보다 **먼저** 로드된다. */

  /* 간격 — 랜딩에만 있던 것을 전역으로 (신규 CSS 는 이 계단만 쓴다) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px;
  --sp-6:28px; --sp-7:36px; --sp-8:48px; --sp-9:64px;

  /* 그림자 */
  --shadow-sm:0 2px 10px rgba(60,80,180,.06);
  --shadow:0 8px 28px rgba(60,80,180,.10);
  --shadow-lg:0 16px 48px rgba(50,70,160,.16);

  /* 상단 바·현재 위치 줄 **전용** 폭. 랜딩 1200 · exams 1440(하드코딩) ·
     허브 1440(v2만 1120) 으로 갈려 로고 시작 x 가 62/48/104 였다.
     ⛔ `--page-max` 를 여기서 덮지 않는다 — 그 이름은 페이지마다 **본문** 폭이라
        subject-solve.css 의 880 까지 1200 으로 벌려 놓는다(실측으로 잡았다).
        본문 폭 조정이 필요하면 그 파일에서 그 값을 고친다. */
  --site-nav-max:1200px;

  /* ⛔ 여기에 `--indigo-soft` 를 넣지 말 것 — 같은 이름이 두 뜻으로 쓰이고 있다.
     연한 틴트 #eef0fe: track-dash · subject-solve · exam-scores · question-search ·
     random-mock · custom-study (6파일)
     진한 라벤더 #8b93f8/#8B9BFF: index.html · app-shell.css (2파일)
     각 페이지가 한 벌만 로드해서 지금은 깨진 곳이 없다. 공용에 올리는 순간 절반이 뒤집힌다.
     정리하려면 6파일 수십 참조를 한 커밋에 개명해야 한다 — 별건으로 다룬다. */
}

body{ font-family:var(--font-sans); }

/* ── 상단 바 ─────────────────────────────────────────────────────────────
   랜딩 .nav-inner · /exams/ .ex-nav-inner · 허브 .td-nav-inner 를 한 벌로.
   실측(변경 전 1280px): 로고 시작 x 가 62 / 48 / 104 로 세 갈래였다. */
.nav-inner,
.ex-nav-inner,
.td-nav-inner{
  max-width:var(--site-nav-max);
  margin:0 auto;
  padding:12px 16px;
  gap:var(--sp-3);
  /* ⛔ space-between 이면 항목이 균등하게 퍼져 좌측 메뉴가 화면 가운데로 간다.
     헤더 검색을 숨긴 뒤 랜딩에서만 메뉴가 300 → 649 로 밀렸다(실측).
     왼쪽부터 채우고, 계정 묶음만 margin-left:auto 로 오른쪽 끝에 붙인다. */
  justify-content:flex-start;
}
@media(min-width:900px){
  .nav-inner,
  .ex-nav-inner,
  .td-nav-inner{ padding:14px 24px; }
}

/* 브랜드 — 랜딩 19px / 허브·exams 16px 였다. 17px 로 모은다. */
.brand-word,
.ex-brand .nm,
.td-brand .nm{ font-size:17px; font-weight:800; letter-spacing:.3px; }

.brand-icon,
.ex-brand img,
.td-brand img{ width:28px; height:28px; }

.brand-badge,
.ex-brand .badge,
.td-brand .badge{ font-size:var(--fs-sm); font-weight:800; padding:3px 10px; border-radius:8px; }

/* 랜딩만 워드마크와 배지 사이에 세로 구분선이 있어 로고 묶음이 13px 넓었다 →
   좌측 메뉴 시작이 319 vs 300 으로 어긋난다. 셋 다 구분선 없이. */
.brand-divider{ display:none !important; }

/* 상단 바 자체 — 랜딩만 반투명+블러였다. 셋 다 같은 재질로. */
.nav,
.ex-nav,
.td-nav{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* ── 현재 위치 줄 ────────────────────────────────────────────────────────
   .site-path(랜딩) · .ex-path(exams) · .td-crumb(허브 페이지 헤더) 가 제각각이었다.
   허브 v2 는 이 줄을 숨겨 두었고, 되살리는 일은 site-shell.js 가 판단한다. */
.site-path,
.ex-path,
.site-crumb{
  max-width:var(--site-nav-max);
  margin:0 auto;
  padding:9px 16px;
  font-size:var(--fs-sm);   /* 한글 자리 — --fs-xs(10px)는 라틴 전용 */
  font-weight:700;
  line-height:1.3;
}
@media(min-width:900px){
  .site-path,
  .ex-path,
  .site-crumb{ padding:9px 24px; }
}

/* ⛔ hidden 가드 — `display:inline-flex`/`flex` 를 미디어쿼리로 켠 요소는
   `hidden` 속성을 **무시한다**. .td-nav-crumb 가 그래서 접히지 않고 자리를 먹었다. */
.nav-inner [hidden],
.ex-nav-inner [hidden],
.td-nav-inner [hidden]{ display:none !important; }

/* ── 좌측 메뉴 — 로고 · 합격후기 · 고객센터 (2026-08-21 운영자 2차) ────────
   「최상단 메뉴 배치 로고 합격후기, 고객센터 이런 순서로 좌측 정렬하고 글자크기 좀더 키워」
   실측(고치기 전 1280px): 검색이 랜딩 493 · exams 272 · 허브 300 에서 시작해 제각각이었고,
   랜딩은 「고객센터」가 계정 묶음 **안쪽**에 들어가 로그인 버튼과 딱 붙어 있었다. */
.sh-nav{
  display:flex; align-items:center; gap:var(--sp-6);
  margin-left:var(--sp-6); min-width:0; flex:none;
}
.sh-nav a{
  font-size:var(--fs-base);     /* ⛔ 15px 미만 금지 — 13.5 에서 키운 결정이다(운영자).
                                   새 계단에 15 칸이 없어 --fs-md(14) 가 아니라 --fs-base(16). */
  font-weight:700; color:#5b6070; text-decoration:none; white-space:nowrap;
}
.sh-nav a:hover{ color:#1B1F2E; text-decoration:none; }
.sh-nav a.on{ color:#1B1F2E; font-weight:800; }

/* 계정은 오른쪽 끝. 좌측 메뉴 뒤 남은 공간은 전부 여기서 먹는다.
   ⛔ !important 가 필요하다 — index.html 에 `header.nav .nav-top-actions{margin-left:0}` 가
   있어(구 검색창 시절 규칙) 특이성으로 이 규칙을 이긴다. 그대로 두면 로그인 버튼이
   「고객센터」 바로 옆에 달라붙는다 (2026-08-22 실측). */
.nav-inner > .nav-top-actions,
.ex-nav-inner > .ex-nav-right,
.td-nav-inner > [data-site-nav-auth]{ margin-left:auto !important; }

/* /exams/ 카탈로그 필터는 상단 바에서 본문 맨 위로 내려온다 (기능 보존) */
.sh-cat-search{
  max-width:var(--site-nav-max); margin:0 auto; padding:var(--sp-4) 16px 0;
  display:flex; justify-content:flex-end;
}
@media(min-width:900px){ .sh-cat-search{ padding:var(--sp-4) 24px 0; } }
.sh-cat-search .ex-search{ display:flex !important; max-width:320px; }

@media(max-width:720px){
  .sh-nav{ gap:var(--sp-4); margin-left:var(--sp-4); }
  .sh-nav a{ font-size:var(--fs-md); }   /* 14px 유지 — --fs-sm(12) 로 내리면 「글자 키워」가 되돌아간다 */
  /* ⛔ 좁은 화면에서 메뉴를 숨기지 않는다 — 허브 푸터에는 고객센터 링크가 없어서
     숨기면 모바일에 입구가 아예 사라진다. 대신 로고 배지를 접어 자리를 낸다
     (실측: 320px 에서 32px 넘쳤다). */
  .sh-cat-search{ justify-content:stretch; }
  .sh-cat-search .ex-search{ max-width:none; }
}
@media(max-width:480px){
  .brand-badge,
  .ex-brand .badge,
  .td-brand .badge{ display:none !important; }
  .sh-nav{ gap:var(--sp-3); margin-left:var(--sp-3); }
}