/* ══ 상단 메뉴 — <b>모양의 정본</b> ═══════════════════════════════════════
   이 파일을 <b>두 곳이 함께 링크한다</b> — MVC 레이아웃(`_Layout.cshtml`)과
   정적 시뮬레이터 화면(`wwwroot/sim/index.html`). 항목 목록의 정본이
   `Views/Shared/_Nav.cshtml` 한 벌인 것과 같은 까닭이다(`이력.md` H-135):
   <b>모양을 두 벌로 적으면 한쪽이 조용히 낡는다.</b> 실제로 그랬다 — 처음에는
   시뮬레이터 쪽 메뉴를 그 페이지의 색으로 따로 칠했더니 홈 화면과 달라 보였고,
   저자가 「홈화면 상단 메뉴처럼 하지 않음(디자인도 똑같게)」이라고 지적했다.

   <b>스스로 완결되어 있다.</b> `--brand`·`--brand-ink` 는 `kweca.css` 에만 있고
   시뮬레이터의 `app.css` 에는 없다. 그래서 색을 이 파일 안에서 정의한다 —
   어느 페이지에 링크해도 같은 모양이 나온다. `--mono` 는 두 곳 모두 정의하지만
   대체값을 함께 적어 링크만으로 동작하게 한다.

   <b>클래스로 건다</b>(`header{...}` 가 아니다). 시뮬레이터 화면에는 이미 자기
   머리글(`header.mast`)이 있어서 요소 선택자로 걸면 그것까지 칠한다. */
.siteNav{
  --nav-bg:#00256C;                     /* kweca.css 의 --brand 와 같은 값(대한항공 톤 남색) */
  --nav-ink:#BFE3F7;                    /* kweca.css 의 --brand-ink 와 같은 값(옅은 하늘) */
  --nav-mono:var(--mono, ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace);
  background:var(--nav-bg);color:#fff;padding:10px 20px;
  border-bottom:3px solid #0091D2;       /* 하늘색 띠 — app.css 의 --sky 와 같은 값 */
  display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.siteNav strong{font-family:var(--nav-mono);font-size:14px;
  letter-spacing:.12em;text-transform:uppercase}
.siteNav a{color:var(--nav-ink);text-decoration:none;font-family:var(--nav-mono);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.siteNav a:hover{color:#fff}
.siteNav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 로그아웃 단추 — 사이트의 단추 모양을 그대로 쓴다(kweca.css `button` 절과 같은 값).
   시뮬레이터 화면의 단추 규칙이 따로 있으므로 여기서 못 박아야 두 곳이 같아진다. */
.siteNav form{display:inline;margin-left:8px}
.siteNav button{appearance:none;border:1px solid #0077B6;
  background:#0077B6;color:#fff;font-family:var(--nav-mono);font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;padding:8px 13px;cursor:pointer;border-radius:0}
.siteNav button:hover{opacity:.85}
.siteNav button:focus-visible{outline:2px solid var(--corrective,#D98324);outline-offset:2px}

/* 휴대폰 — 메뉴 글자를 키우고 줄 간격을 손가락 폭으로 */
@media (max-width:760px){
  .siteNav{gap:10px 16px;padding:10px 12px}
  .siteNav a{font-size:14px;padding:4px 0}
}