/* 상단 바(로고 + 탭). 탭 화면은 #view-<이름> 으로 하나만 보인다 */
.topbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 32px;
  max-width: 1100px; margin: 0 auto; padding: 16px 16px 0; border-bottom: 1px solid var(--card-border); }
.brand { padding-bottom: 12px; color: inherit; text-decoration: none; }
.topbar nav { display: flex; gap: 6px; }
.tab { color: var(--text-muted); font-weight: 600; padding: 12px 16px; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab.active { color: var(--accent-neon); border-bottom-color: var(--accent-neon); }
.view[hidden] { display: none; }
@media (max-width: 640px) {
  .topbar { gap: 0; padding: 12px 12px 0; }
  .topbar .header-title h1 { font-size: 1.3rem; }
  .topbar nav { width: 100%; }
  .tab { flex: 1; padding: 10px 8px; text-align: center; }
}