/* ════════════════════════════════════════════════════════════════════
 *  AVA 공용 상단 바 — 업무허브·마케팅허브 «같은 폼» (2026-08-27)
 *
 *  왜 만들었나
 *    컴퓨터에서 두 허브를 열어 보면 위쪽이 서로 달랐다. 업무허브는 상단 바에
 *    로고·검색이 있고, 마케팅허브는 상단 바 자체가 태블릿에서만 나왔다.
 *    높이·색·로고 자리를 여기 한 곳에서만 정한다.
 *
 *  쓰는 법
 *    <header class="ava-topbar">
 *      <button class="ham">☰</button>              태블릿 전용 (없어도 됨)
 *      <div class="brand"><span class="brand-mark">…</span>
 *           <span class="brand-sub">이름</span></div>
 *      <div class="spacer"></div>                   가운데를 밀어내는 빈 칸
 *      <a class="iconbtn">…</a>
 *    </header>
 *
 *  마케팅허브처럼 «탭이 없는» 화면은 이 상단 바만 쓰면 된다.
 *  업무허브는 여기에 검색·탭을 더 얹는다 (그건 업무허브만의 것).
 * ════════════════════════════════════════════════════════════════════ */

:root { --ava-topbar-h: 46px; }

.ava-topbar {
  height: var(--ava-topbar-h);
  background: var(--ava-cream, #F6F4F0);
  border-bottom: 1px solid var(--ava-line-strong, #C4BEB2);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  flex-shrink: 0;
}

/* 화면 위에 «고정» 하는 변형 — 사이드바가 그 아래에서 시작하는 화면(마케팅허브)용.
   업무허브처럼 전체가 flex 레이아웃인 곳은 이 변형 없이 그냥 쓴다. */
.ava-topbar.fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.ava-topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background .15s;
  text-decoration: none;
}
.ava-topbar .brand:hover { background: var(--ava-surface, #EEEBE5); }
.ava-topbar .brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--ava-gold, #A88C64);
  font-size: 30px;
  line-height: 1;
}
.ava-topbar .brand-mark .icon-icon-ava { font-size: 30px; line-height: 1; color: var(--ava-gold, #A88C64); }
.ava-topbar .brand-sub {
  font-family: var(--ava-font-display, 'MaruBuri', serif);
  font-style: italic;
  color: var(--ava-ink, #201E1B);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
}

.ava-topbar .spacer { flex: 1; }

/* 오른쪽 아이콘·글자 버튼 */
.ava-topbar .iconbtn {
  background: transparent;
  border: 0;
  color: var(--ava-mute, #6E6962);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ava-topbar .iconbtn:hover { background: var(--ava-surface, #EEEBE5); color: var(--ava-ink, #201E1B); }

/* 허브 전환 버튼 (업무허브 ↔ 마케팅허브) — 양쪽 상단 바 오른쪽 같은 자리.
   종전엔 10.5px 회색 텍스트 링크라 잘 안 보였다 — 원장 지적.
   ※ 'AVA' 는 평문으로 쓰지 않는다 — 로고 글리프(.icon-icon-ava)를 쓴다. */
.ava-topbar .ava-hub-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--ava-gold, #A88C64);
  background: transparent;
  color: var(--ava-gold, #A88C64);
  font-family: var(--ava-font-body, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ava-topbar .ava-hub-switch:hover {
  background: var(--ava-gold, #A88C64);
  color: var(--ava-paper, #fff);
}
.ava-topbar .ava-hub-switch .icon-icon-ava { font-size: 17px; line-height: 1; }
.ava-topbar .ava-hub-switch i { font-size: 11px; opacity: .8; }

/* 햄버거 — 손가락으로 쓰는 기기에서만 (공용 서랍과 같은 기준 ≤1024) */
.ava-topbar .ham {
  display: none;
  background: none;
  border: 0;
  font-size: 18px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ava-mute, #6E6962);
}
.ava-topbar .ham:hover { color: var(--ava-gold, #A88C64); }
@media (max-width: 1024px) {
  .ava-topbar .ham { display: inline-flex; align-items: center; }
}