/* 앱 전환 - 동작은 React판 claude_common/react/components/AppSwitcher.tsx, 규칙은 claude_common/ui/app-switcher.md
   첫 화면 왼쪽 위 앱 그림·이름(▾) → 바로 아래로 노바프 편집기 앱(문서·프레젠테이션 …) 칸. 지금 앱은 표시, 누르면 그 앱 첫 화면(새 탭 아님) */
.app-switcher { position: relative; flex: none; }
.app-switcher-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; margin-left: -4px; border: 0; border-radius: var(--uk-r-sm); background: none; color: var(--uk-fg); font: inherit; cursor: pointer; }
.app-switcher-btn:hover, .app-switcher-btn[aria-expanded='true'] { background: var(--uk-sunk); }
.app-switcher-caret { color: var(--uk-muted); }
.app-switcher-btn:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.app-switcher-panel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 300; display: grid; grid-template-columns: repeat(3, 96px); gap: 4px; padding: 12px; background: var(--uk-surface); border: 1px solid var(--uk-line); border-radius: var(--uk-r-lg); box-shadow: var(--uk-up-lg); }
.app-switcher-panel[hidden] { display: none; }
.app-switcher-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border-radius: var(--uk-r-sm); color: var(--uk-fg); text-decoration: none; font-size: 13px; text-align: center; }
.app-switcher-item:hover { background: var(--uk-sunk); }
.app-switcher-item.is-current { background: var(--uk-brand-light); }
.app-switcher-item:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: -2px; }
/* 앱이 셋보다 적으면 빈 칸 없이 */
.app-switcher-panel:has(> :only-child) { grid-template-columns: 96px; }
.app-switcher-panel:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 96px); }