/* ══════════════════════════════════════════════════════════════════
   공통 상단바 (2026-08-16) — topbar.js 와 짝

   네 페이지가 **같은 높이(48px)·같은 자리**를 갖게 한다.
   탭줄 앞에는 로고 하나만 오므로 페이지를 옮겨도 메뉴가 안 움직인다.

   색은 tokens.css 변수를 쓰되 **대체값을 함께 적는다** —
   어느 페이지가 토큰을 안 싣더라도 상단바가 깨지면 안 된다(주 이동 수단이다).
   ══════════════════════════════════════════════════════════════════ */

#app-topbar.app-topbar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--bg-2, #141822);
  border-bottom: 1px solid var(--line, #262c3a);
  font-family: var(--font-sans, system-ui, sans-serif);
  position: relative;
  z-index: 100;
}

/* ★언어 메뉴가 다른 것에 가리던 문제 (2026-08-17 유저 지적)
   ────────────────────────────────────────────────────────────────
   메뉴에 `z-index: 9000`이 적혀 있는데도(~126) 소용이 없었다. 상단바가
   `position: relative` + `z-index: 100`이라 **쌓임 맥락(stacking context)**을
   만들기 때문이다 — 쌓임 맥락은 "이 상자 안에서만 순서를 따진다"는 뜻이라,
   **자식이 아무리 큰 값을 가져도 부모 밖으로는 못 나간다.** 화면 전체에서
   메뉴는 상단바의 100으로 취급됐고, 100을 넘는 것에 전부 덮였다.

   ⛔**상단바 자체의 값을 올리는 방식으로 고치지 말 것.**
      그러면 상단바가 **전체화면 모달·투어·알림까지** 덮는다:
        투어 9100~9300 · 배정 대화상자 9150 · 새소식 10000 ·
        도움말 팝업 10001 · 토스트 10002 · 스타일러 확인창 10050 ·
        업데이트 배너 99999("새로고침하라"는 최상위 알림)
      이것들은 상단바를 **덮는 게 맞다.**

   그래서 **메뉴가 열려 있는 동안에만** 상단바를 올린다. 닫히면 100으로 돌아간다.
   ★값 10004는 지금 쓰이는 모든 값보다 위이고 **비어 있다**(실측: 9998·9999·
     10000·10001·10002·10003·10050 사용 중). 같은 값을 쓰면 DOM 순서가 승부를
     갈라 불안정해진다.
   ※`:has()`를 못 읽는 낡은 브라우저에서는 이 규칙이 그냥 무시되고 예전 동작이
     된다(더 나빠지지 않는다). */
#app-topbar.app-topbar:has(#lang-menu:not(.hidden)) {
  z-index: 10004;
}

/* ★탭줄 앞 상자 — **고정 폭**이 이 파일의 핵심이다.
   내용(로고 글자·버전)이 페이지·언어마다 다르므로, 폭을 내용에 맡기면
   탭줄 시작 위치가 페이지마다 달라진다 — 그게 바로 고치려던 증상이다.
   ⛔`width`를 지우거나 `auto`로 바꾸지 말 것. (2026-08-16 실측: index 192px vs board 135px) */
#app-topbar .tb-left {
  width: 180px;
  flex: 0 0 180px;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}

/* 로고 — 위 상자 안에 든다 */
#app-topbar .tb-logo {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--ink-0, #eef1f7);
  white-space: nowrap;
  /* ⛔`flex-shrink: 0` 으로 되돌리지 말 것 — 고정 폭 상자(.tb-left) 안이라 안 줄어들면
     글자가 상자를 넘어 잘리고 버전 표시가 밀려 사라진다. 줄어들어야 말줄임이 먹는다. */
  min-width: 0; flex: 0 1 auto;
}
#app-topbar .tb-mark {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--accent, #f3a25b); flex: none;
}
/* 브라우저 글꼴 확대 설정에서 180px 을 넘칠 수 있다. 그때 글자가 중간에서
   뚝 잘리지 않도록 말줄임(…)으로 접는다 — flex 안에서는 `min-width:0` 이 있어야 먹는다. */
#app-topbar .tb-brand {
  font-size: 14px; font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
#app-topbar .tb-ver { font-size: 11px; color: var(--ink-3, #535b6c); flex-shrink: 0; }

/* 탭줄 — 좁은 화면에서는 **가로로 밀어서** 본다.
   ⛔글자를 아이콘으로 줄이지 말 것: 재방문 8.5%라 대부분 처음 오는 사람이다. */
#app-topbar .tabs {
  display: flex; gap: 2px;
  background: var(--bg-1, #0e1118);
  padding: 3px; border-radius: 8px;
  border: 1px solid var(--line, #262c3a);
  overflow-x: auto;
  scrollbar-width: none;          /* 스크롤막대는 숨기고 밀기만 남긴다 */
  min-width: 0;
}
#app-topbar .tabs::-webkit-scrollbar { display: none; }
#app-topbar .tabs .tab {
  padding: 5px 12px; border-radius: 6px;
  font-size: 12.5px; color: var(--ink-2, #7f8898);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
#app-topbar .tabs .tab:hover { color: var(--ink-0, #eef1f7); }
#app-topbar .tabs .tab.is-active {
  background: var(--bg-3, #1b2030); color: var(--ink-0, #eef1f7);
  box-shadow: inset 0 0 0 1px var(--line-strong, #323a4f);
  cursor: default;
}

/* 오른쪽 — 언제나 끝에 붙는다 */
#app-topbar .tb-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
#app-topbar .tb-btn {
  padding: 5px 12px;
  border: 1px solid var(--line-strong, #323a4f);
  border-radius: 4px; background: transparent;
  color: var(--ink-1, #b9c0cf);
  font-size: 13px; cursor: pointer; white-space: nowrap;
  text-decoration: none; font-family: inherit;
}
#app-topbar .tb-btn:hover { color: var(--ink-0, #eef1f7); background: var(--bg-3, #1b2030); }
#app-topbar .tb-icon {
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong, #323a4f);
  border-radius: 6px; background: transparent;
  color: var(--ink-2, #7f8898);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; font-size: 14px;
}
#app-topbar .tb-icon:hover { color: var(--ink-0, #eef1f7); background: var(--bg-3, #1b2030); }

#app-topbar .tb-langmenu {
  position: absolute; right: 0; top: 100%; margin-top: 4px;
  background: var(--bg-2, #141822);
  border: 1px solid var(--line, #262c3a);
  border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  z-index: 9000; min-width: 100px; overflow: hidden;
}
/* ★닫힘 상태는 **여기 한 곳**에서만 정한다. JS는 `hidden` 클래스만 붙였다 뗀다.
   ⛔JS에서 `style.display` 를 쓰지 말 것 — 인라인 스타일이 이 규칙을 이겨서
   클래스만 토글하는 페이지(corrector.js:25260)에서 메뉴가 영영 안 열린다. */
#app-topbar .tb-langmenu.hidden { display: none; }

#app-topbar .tb-langmenu .lang-option {
  padding: 8px 16px; cursor: pointer;
  color: var(--ink-1, #b9c0cf); font-size: 13px; white-space: nowrap;
}
#app-topbar .tb-langmenu .lang-option:hover { background: var(--bg-3, #1b2030); }

/* 페이지 고유 요소가 들어가는 아랫줄 (corrector의 곡 제목·피드백 등) */
.app-subbar {
  height: 38px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: var(--bg-1, #0e1118);
  border-bottom: 1px solid var(--line, #262c3a);
}

/* 좁은 화면: 로고 글자는 접고 아이콘만 남긴다(로고는 이름표일 뿐 이동 수단이 아니다).
   ⛔탭줄 글자는 그대로 둔다 — 그쪽이 이동 수단이다. */
@media (max-width: 640px) {
  #app-topbar.app-topbar { gap: 8px; padding: 0 10px; }
  #app-topbar .tb-brand, #app-topbar .tb-ver { display: none; }
  /* 글자가 사라지면 표식만 남으므로 고정 폭도 함께 푼다(180px 빈칸이 남으면 안 된다) */
  #app-topbar .tb-left { width: auto; flex: 0 0 auto; }
  #app-topbar .tb-btn { padding: 5px 9px; font-size: 12px; }
}