/* 런처 메뉴 — 모든 화면이 함께 쓴다. 규격은 MENU_SPEC.md.
 *
 * 2026-08-02 까지는 이 규칙이 화면마다 복사돼 있었다(콕핏·키워드·노출·편성표 넷).
 * 그래서 메뉴를 한 번 손볼 때마다 네 군데를 맞춰야 했고, 한 곳을 빠뜨리면 화면마다
 * 메뉴가 달라졌다(파비콘·아이콘 때 실제로 그랬다). 한 군데로 모은다.
 *
 * 쓰는 법: <link rel="stylesheet" href="/static/nav.css"> +
 *          <nav class="appnav appnav-top"></nav> · <nav class="appnav appnav-bottom"></nav>
 *          + <script src="/static/nav.js"> (항목은 nav.js 가 그린다)
 *
 * 화면마다 다른 것(본문 아래 여백 등)은 여기 두지 않는다 — 그 화면 파일에 남긴다.
 */
.appnav{display:flex;gap:5px}
.appnav a{display:inline-flex;align-items:center;gap:6px;font-size:13px;text-decoration:none;
  color:var(--nc,var(--text2));font-weight:600;white-space:nowrap;
  background:linear-gradient(180deg,color-mix(in srgb,var(--nc,var(--blue)) 22%,var(--surface2)),color-mix(in srgb,var(--nc,var(--blue)) 8%,var(--surface2)));
  border:1px solid color-mix(in srgb,var(--nc,var(--border)) 55%,transparent);
  border-radius:8px;padding:8px 14px;transition:transform .1s,box-shadow .15s,filter .15s}
.appnav a:hover{transform:translateY(-1px);filter:brightness(1.1);border-color:var(--nc,var(--text2));
  box-shadow:0 4px 13px -8px color-mix(in srgb,var(--nc,var(--blue)) 80%,transparent)}
/* 항목 고유색 — 화면이 달라도 같은 값이라야 같은 것으로 알아본다(MENU_SPEC.md 표) */
.appnav .nav-home{--nc:#5fc9b4}
.appnav .nav-room{--nc:#d9a05b}
.appnav .nav-buzz{--nc:#ef8f7e}   /* 코랄 — 오피스의 주황(#d9a05b)과 겹치지 않게 (오피스 hq.css 와 같은 값) */
.appnav .nav-hq{--nc:#7cb3ee}
.appnav .nav-waddle{--nc:#b49bf0}
.appnav .nav-cockpit{--nc:#3fbf8f}
.appnav img{width:15px;height:15px;border-radius:3px;object-fit:contain;display:block;flex:0 0 auto}

/* ── 도구 줄 — 콕핏과 도구 화면에만. 앱 줄 아래 한 줄 ──────────────
   앱 줄과 달리 개수 제한이 없다(가로 스크롤). 도구가 늘어도 앱 줄은 안 건드린다.
   앱 줄에 없는 것이 하나 있다: '지금 여기' 표시(.here). 앱 줄은 자기 자신을 아예 빼지만,
   도구 줄은 남겨 두고 눌린 모양으로 둔다 — 어느 도구에 있는지 그 줄에서 보여야 한다. */
/* 어느 화면에서나 '앱 줄 다음 줄, 왼쪽부터'. 화면마다 자리가 달라 눈이 매번 찾아야 했다
   (빽곰님 2026-08-02: "타이틀하고 도구 메뉴가 콕핏,키워드,노출,편성표 위치 정렬이 제각각이네").
   flex:0 0 100% 라 상단바가 flex-wrap 이기만 하면 스스로 제 줄을 만든다. */
.toolnav{display:flex;gap:5px;flex:0 0 100%;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;padding-bottom:1px}
.toolnav::-webkit-scrollbar{display:none}
.toolnav a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;text-decoration:none;
  color:var(--nc,var(--text2));font-weight:600;white-space:nowrap;flex:0 0 auto;
  background:linear-gradient(180deg,color-mix(in srgb,var(--nc,var(--blue)) 14%,var(--surface2)),color-mix(in srgb,var(--nc,var(--blue)) 5%,var(--surface2)));
  border:1px solid color-mix(in srgb,var(--nc,var(--border)) 40%,transparent);
  border-radius:8px;padding:6px 11px;transition:filter .15s}
.toolnav a:hover{filter:brightness(1.12);border-color:var(--nc,var(--text2))}
.toolnav a.here{background:linear-gradient(180deg,color-mix(in srgb,var(--nc,var(--blue)) 34%,var(--surface2)),color-mix(in srgb,var(--nc,var(--blue)) 15%,var(--surface2)));
  border-color:color-mix(in srgb,var(--nc,var(--blue)) 65%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--nc,#fff) 22%,transparent)}
.toolnav img{width:14px;height:14px;border-radius:3px;object-fit:contain;display:block;flex:0 0 auto}
.toolnav .nav-expo{--nc:#d8a657}
.toolnav .nav-sched{--nc:#e58fb0}
.toolnav .nav-kw{--nc:#e3b341}
/* 도구 줄 끝에 덧붙인 콕핏 — 폰에서만 (빽곰님 2026-08-06: "편성표, 키워드, 노출 옆에
   콕핏 버튼이 하나 더 있는게 편한거 같아"). 넓은 화면은 상단 앱 줄에 이미 있어 감춘다.
   도구가 아니라 돌아가는 자리라 왼쪽에 금을 그어 떼어 놓는다. */
.toolnav .tool-cockpit{display:none}
.toolnav .tool-cockpit{--nc:#3fbf8f}

/* ── 폰에서는 하단 고정 바 하나로 ── */
.appnav-bottom{display:none}
@media(max-width:820px){
  /* 폰에서는 앱 줄이 하단 바로 내려가 위쪽 첫 줄이 제목만으로 텅 빈다 — 도구 줄을 그 옆에 붙여
     한 줄을 아낀다(빽곰님 2026-08-02: 노출은 "상단바 높이가 여유가 다른곳보다 많아서",
     편성표는 "글자수를 줄이고 박스를 줄여서"). 넓은 화면은 그대로 제 줄을 갖는다. */
  .toolnav{flex:0 1 auto;gap:4px}
  .toolnav a{padding:6px 10px;font-size:12px}
  .toolnav img{width:16px;height:16px}
  .toolnav .tool-cockpit{display:inline-flex;margin-left:5px;
    border-left:1px solid var(--border);padding-left:11px;border-radius:6px}
  /* 이름은 어디서나 살린다 — 재 보니 넣어도 3px 차이였고, 빽곰님이 그림만 남는 쪽을 안 좋아했다
     (2026-08-02: "도구메뉴 줄이지 않고는 안되?" → "키워드도 원래대로 도구메뉴 돌리고"). */
  .appnav-top{display:none}
  .appnav-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:0;
    background:color-mix(in srgb,var(--surface) 32%,transparent);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
    border-top:1px solid var(--border);padding:7px 4px calc(7px + env(safe-area-inset-bottom))}
  /* 칸 균등. '편성표'·'관제탑'이 두 줄로 접히면 바 높이가 들쭉날쭉해져 줄바꿈을 막는다.
     칸 수가 곧 글자 크기다 — 실측(390px): 일곱 칸이면 9px 까지 내려간다. 그래서 일곱이 문턱. */
  .appnav-bottom a{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;justify-content:center;
    border:none;border-radius:10px;padding:7px 1px;font-size:10.5px;white-space:nowrap;overflow:hidden;
    background:linear-gradient(180deg,color-mix(in srgb,var(--nc,var(--blue)) 20%,transparent),transparent)}
  .appnav-bottom img{width:21px;height:21px}
}
@media(max-width:400px){
  .appnav-bottom a{font-size:9px;padding:6px 0}
  .appnav-bottom img{width:19px;height:19px}
}

/* 잠긴 항목 — 나중에 유료·서비스로 열 것들(판매본의 키워드·노출).
   감추지 않는 이유: 안 보이면 나중에 팔 수도 없다(빽곰님 2026-08-03).
   href 를 안 주므로 마우스·키보드 어느 쪽으로도 안 열린다 — 여기서는 '못 누르는 것'으로만 보이게. */
.appnav a.locked, .toolnav a.locked{
  opacity:.42; cursor:not-allowed; filter:grayscale(1);
  background:var(--surface2); border-color:var(--border)}
.appnav a.locked:hover, .toolnav a.locked:hover{transform:none; filter:grayscale(1); border-color:var(--border)}
/* 자물쇠는 글자 뒤에 작게 — 아이콘을 바꾸면 다른 화면과 결이 어긋난다.
   CSS 이스케이프(\1F512) 대신 글자를 그대로 쓴다 — 앞서 백슬래시가 한 겹 먹혀
   'F512' 라는 글자가 그대로 찍혔다(실측 2026-08-03). */
.appnav a.locked::after, .toolnav a.locked::after{content:"🔒"; font-size:.85em; margin-left:2px}