/* 43-v2-topbar-search.css — 새 셸(#1719)의 **맨 윗줄**과 **통합검색**(상민님 2026-08-20).
   ⚠ 로드 순서는 public/index.html 의 <link> 나열이 정본이다(이 파일은 40~42 v2 규칙 뒤 = 맨 뒤).

   담는 것 셋:
    ① .v2-topbar   — 데스크톱 앱 창의 맨 윗줄(최소화·창모드·닫기와 같은 줄). 탭 줄이 여기 산다.
    ② .v2-side-nav — 사이드바 맨 윗줄: [뒤로][앞으로] + [검색] (클로드 데스크톱 문법).
    ③ .v2-omni     — 통합검색 스포트라이트(지식·프로젝트·자료·세션·세션이력 한 결과).
*/

/* ════════════════════════════════════════════════════════════════════════
   ① 창 맨 윗줄 — 데스크톱 앱에서만(웹에선 .has-topbar 가 안 붙어 이 블록이 통째로 잠잠하다).
   preload 가 그리던 빈 36px 띠를 셸이 가져와(web/v2/titlebar.ts) 탭 줄을 그리로 올린다.
   좌·우 안쪽 여백(--v2-tb-left/right)은 OS 창 버튼이 얹히는 폭이다 — 맥은 왼쪽 신호등, 윈도우는 오른쪽 WCO.
   줄 전체가 드래그 영역이고, 실제로 누르는 것들(탭·닫기·[모든 탭])만 no-drag 로 되돌린다.
   ⚠ 탭이 줄을 꽉 채우면 창을 옮길 데가 없다 → 오른쪽 .v2-tb-grip 이 늘 빈 손잡이로 남는다(크롬과 같은 이유).
   ════════════════════════════════════════════════════════════════════════ */
.v2-topbar { display: none; }
#v2-root.has-topbar { grid-template-rows: var(--v2-tb-h, 36px) minmax(0, 1fr); }
#v2-root.has-topbar > .v2-topbar {
  display: flex; align-items: stretch;
  grid-column: 1 / -1; grid-row: 1;
  height: var(--v2-tb-h, 36px);
  padding-left: var(--v2-tb-left, 0px); padding-right: var(--v2-tb-right, 0px);
  background: var(--gray-bg-2); border-bottom: 1px solid var(--line);
  -webkit-app-region: drag; -webkit-user-select: none; user-select: none;
}
#v2-root.has-topbar > .v2-topbar > .v2-tabs {
  order: -1;                 /* 손잡이는 늘 오른쪽 — 탭 줄이 DOM 뒤에 붙어도 자리는 앞이다 */
  flex: 1 1 auto; min-width: 0; height: 100%;
  border-bottom: 0; background: none;
  /* 가운데 열에 있을 때 붙던 오른쪽 여백(타임라인 서랍 버튼 자리, 40-v2.css `#v2-root.no-aside:not(.no-tl) .v2-tabs`)은
     창 줄에서는 뜻이 없다 — 그 버튼은 가운데 열 위에 뜬다. 여기선 끌 손잡이(.v2-tb-grip)가 그 자리를 맡는다. */
  padding-right: 0;
  -webkit-app-region: no-drag;
}
/* 창을 끌 자리 — 늘 빈 채로 둔다. 폭은 '끌 수 있는 최소'에 맞춘다: 종전 128px 은 윈도우에서 마지막 탭과
   최소화 단추 사이가 휑해 보였다(상민님 2026-08-20). 창버튼 여백(--v2-tb-right)이 그 옆에 또 붙는다는 걸
   감안하면 이 손잡이는 짧아도 충분하다. */
/* 창을 끌 자리 — 늘 빈 채로 둔다. 128px 은 마지막 탭과 최소화 단추 사이가 휑했고(2026-08-20), 56px 로 줄였더니
   이번엔 잡을 데가 모자랐다(상민님 2026-08-24). 그 사이값으로 둔다 — 끌기에 충분하면서 빈 자리로 보이지 않는 폭. */
.v2-tb-grip { flex: 0 0 88px; min-width: 48px; }
/* 탭이 줄 맨 위에 닿으므로 켜진 탭의 파란 밑줄은 **아래쪽**에 긋는다 — 위에 그으면 창 모서리와 붙어 선이 잘려 보인다. */
#v2-root.has-topbar > .v2-topbar .v2-tab.on { box-shadow: inset 0 -2px 0 var(--blue); }
/* 데스크톱 앱은 맨 윗줄이 이미 탭 줄이다 — 가운데 열 위에 또 한 줄이 생기지 않게 [모든 탭] 도 같은 줄에서 산다.
   자리는 줄 맨 왼쪽이라(tabs.ts) 창 버튼과 안 겹친다. 맥에선 그 왼쪽이 신호등 자리이므로 --v2-tb-left 가 이미 비켜 준다. */
#v2-root.has-topbar > .v2-topbar .v2-tab-menu { background: none; border-left-color: var(--line); -webkit-app-region: no-drag; }
/* 모바일 폭(≤900px)에선 그리드가 아니라 세로 흐름이고, 탭 줄은 상단 바(.v2-mbar) 가운데로 옮겨 간다(#1777).
   ⚠ 그러면 창 줄이 통째로 사라지는데, 데스크톱 앱에선 그게 곧 **창을 옮길 데가 없어진다**는 뜻이다(앱 창 최소폭이
   900px 라 이 문턱에 실제로 닿는다). 그래서 그 폭에서는 **상단 바가 드래그 영역을 대신 맡는다** — 좌·우 창버튼
   여백을 그대로 물려받고, 실제로 누르는 것(☰·탭·타임라인)만 no-drag 로 되돌린다. */
@media (max-width: 900px) {
  #v2-root.has-topbar { grid-template-rows: none; }
  #v2-root.has-topbar > .v2-topbar { display: none; }
  #v2-root.has-topbar > .v2-mbar {
    padding-left: calc(4px + var(--v2-tb-left, 0px)); padding-right: calc(4px + var(--v2-tb-right, 0px));
    -webkit-app-region: drag;
  }
  #v2-root.has-topbar > .v2-mbar > * { -webkit-app-region: no-drag; }
}

/* ════════════════════════════════════════════════════════════════════════
   ② 사이드바 맨 윗줄 — [뒤로][앞으로] + [검색]
   내용(프로젝트·세션)보다 위, 워크스페이스 문패보다도 위. '움직이는 손잡이'라 목록의 일부가 아니다.
   ════════════════════════════════════════════════════════════════════════ */
.v2-side-nav { display: flex; align-items: center; gap: 4px; padding: 8px var(--side-x, 8px) 2px; }
.v2-navb { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--muted-head); cursor: pointer; }
.v2-navb:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.v2-navb:disabled { color: var(--muted-2); cursor: default; }
.v2-navb-ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 검색은 **칸처럼 생긴 버튼**이다 — 진짜 입력칸을 두면 사이드바 20초 재렌더가 입력·한글 조합을 끊는다. */
.v2-omnib { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 28px; padding: 0 8px;
  border: 1px solid var(--line-net); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; text-align: left; }
.v2-omnib:hover { border-color: var(--blue); color: var(--ink-sub); }
.v2-omnib-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.v2-omnib-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-omnib-k { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .02em;
  padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-2); background: var(--canvas); }

/* ════════════════════════════════════════════════════════════════════════
   ③ 통합검색(스포트라이트) — 화면 가운데 위. 한 칸에 치고, 종류는 결과가 말한다.
   ════════════════════════════════════════════════════════════════════════ */
.v2-omni { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 24px; background: rgba(21, 35, 59, .34); }
.v2-omni-card { width: 640px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(16, 32, 64, .26), 0 3px 10px rgba(16, 32, 64, .10); }
.v2-omni-top { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.v2-omni-lens { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v2-omni-in { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.v2-omni-in:focus { outline: none; }
.v2-omni-esc { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 5px; color: var(--muted-2); background: var(--canvas); }
/* 종류 칩 — 검색창 바로 아래 한 줄. 기본(선택 없음)은 **전부 켜진 모습**이다(모두 포함이므로).
   하나를 누르면 그것만 켜지고 나머지가 꺼진 모습이 된다 — 지금 무엇을 찾고 있는지 화면이 늘 말한다. */
.v2-omni-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px; border-bottom: 1px solid var(--line, #E6ECF5); }
.v2-omni-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px;
  border: 1px solid var(--line-net, #DCE6F5); border-radius: 999px; background: var(--bg, #fff);
  font: inherit; font-size: 11.5px; color: var(--muted, #8A99B5); cursor: pointer; white-space: nowrap; }
.v2-omni-chip:hover { border-color: var(--blue); color: var(--ink-sub, #5A6B85); }
.v2-omni-chip.on { border-color: var(--blue); background: var(--bg-tint-2, #EEF5FF); color: var(--ink); font-weight: 600; }
.v2-omni-chip-ic { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-omni-list { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.v2-omni-gh { padding: 8px 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.v2-omni-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.v2-omni-row.on { background: var(--bg-tint-2); }
.v2-omni-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: var(--canvas); color: var(--muted-head); }
.v2-omni-row.on .v2-omni-ic { background: var(--bg); color: var(--blue); }
.v2-omni-kic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v2-omni-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v2-omni-t { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-omni-s { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-omni-badge { flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted-2); }
.v2-omni-note { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.v2-omni-note[hidden] { display: none; }
@media (max-width: 900px) {
  .v2-omni { padding: 6vh 10px 16px; }
  .v2-omni-card { max-height: 84vh; }
}