/* 🧭 공용 상단바 — 메인(`/`)과 반자동 작업대(`/fast`)가 **한 벌**을 쓴다 (`T-317` · 2026-09-23).

   ★★왜 새 이름(`app-topbar` · `atb-*`)인가
     - 메인 상단바 모양은 `app.css` + `v7-skin.css` + `templates.css` **세 파일이 겹친 결과**였다.
     - 작업대는 `app.css` 를 **낮은 레이어**로 싣고 자기 `.topbar`(화면별 머리줄)·`.btn`(파란 채움)을 따로 쓴다
       → 메인 마크업(`.topbar` · `.btn-ghost`)을 그대로 옮기면 **작업대 CSS 가 이겨 모양이 깨진다.**
     - 그래서 두 앱의 어떤 규칙과도 **안 겹치는 이름**으로 모양을 여기 한 곳에 둔다.
       **두 앱 모두 이 파일을 맨 뒤에** 싣는다(`index.html` · `fast.html`).
   ★값은 메인 상단바 **실측 계산값**(2026-09-23 CDP)을 토큰으로 옮긴 것이다 — 새 hex·px 금지(§11-L).
     상단바 전용 토큰 = `tokens.css` 의 `--topbar-*`(v7 스킨이 안 덮는 이름).
   ★마크업·동작 = `static/js/components/app-topbar-view.js`(순수) · `app-topbar.js`(붙이기). */

.app-topbar {
  /* ★메인은 실측 `relative`(스크롤과 함께 올라간다 — 메인 화면의 다른 스티키 줄이 top:0 에 붙는다) ·
     작업대는 늘 고정(사장님 2026-09-03 *"그냥 위에 이거 뛰워놔. 항상 고정"*) → `fast.css` 가 변수로 바꾼다.
     작업대는 떠 있는 층도 많아 z 도 올린다(`--app-topbar-z`). */
  position: var(--app-topbar-position, relative);
  top: 0;
  z-index: var(--app-topbar-z, 30);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-4);
  background: var(--topbar-bg);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  box-sizing: border-box;
}

.app-topbar .atb-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  overflow: hidden;
}
.app-topbar .atb-brand {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition: opacity var(--transition-base);
}
.app-topbar .atb-brand:hover { opacity: 0.75; }
/* 로고와 프로젝트명을 가르는 실선 — 둘이 한 문장처럼 읽히지 않게 */
.app-topbar .atb-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--color-text-inverse) 22%, transparent);
}
/* 프로젝트명 — 남는 폭만큼만 쓰고 넘치면 … (메뉴가 늘어도 밀어내지 않는다 · 사장님 2026-07-27) */
.app-topbar .atb-project {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(420px, 30vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.app-topbar .atb-project:hover { background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent); }
.app-topbar .atb-project:empty { display: none; }

.app-topbar .atb-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  font-size: var(--text-sm);
}

/* 메뉴 버튼 — ★`.btn` 을 쓰지 않는다(작업대 `.btn` = 파란 채움이 이긴다) */
.app-topbar .atb-btn {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--topbar-btn-radius);
  background: transparent;
  color: var(--color-text-inverse);
  opacity: 0.85;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.app-topbar .atb-btn:hover:not(:disabled) {
  opacity: 1;
  background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
}
.app-topbar .atb-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); opacity: 1; }
/* 지금 있는 곳(작업대에서 «⚡ 반자동 작업대») — ★마우스를 올려도 파랑을 지킨다(호버 규칙이 특이도로 이겨
   파랑이 꺼졌다 · 2026-09-23 배포본 자푸 실측) */
.app-topbar .atb-btn.is-here,
.app-topbar .atb-btn.is-here:hover:not(:disabled) { opacity: 1; background: var(--color-primary); }
/* ★메뉴 묶음(`D-159` B안 · 사장님 2026-10-01) — 묶음 단추 + 아래로 펼치는 판.
   펼침판은 **fixed**(메뉴 줄이 가로 스크롤 상자라 absolute 는 잘린다) · 자리는 `app-topbar.js` 가 단추 바로 아래로 잡는다.
   열려 있는 동안 상단바를 팝오버 층(200대 · DESIGN.md Elevation)으로 올린다 — 안 올리면 메인 화면의 스티키 줄 뒤에 깔린다. */
.app-topbar.is-dd-open { z-index: 210; }
.app-topbar .atb-dd { flex: 0 0 auto; }
.app-topbar .atb-caret { font-size: var(--text-xs); opacity: 0.8; }
.app-topbar .atb-dd-btn[aria-expanded="true"] { opacity: 1; background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); }
/* 지금 있는 곳이 이 묶음 안 — 묶음 단추도 «여기» 파랑(안쪽 버튼의 `is-here` 와 같은 색) */
.app-topbar .atb-dd-btn.has-here,
.app-topbar .atb-dd-btn.has-here:hover:not(:disabled) { opacity: 1; background: var(--color-primary); }
.app-topbar .atb-menu {
  position: fixed;
  z-index: 211;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: calc(var(--space-16) * 3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-lg);
}
.app-topbar .atb-menu[hidden] { display: none; }
/* 판 안 메뉴 = 밝은 바탕 위 글자(상단바의 흰 글자 그대로면 안 보인다) */
.app-topbar .atb-menu .atb-btn {
  justify-content: flex-start;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  opacity: 1;
  font-size: var(--text-sm);
}
.app-topbar .atb-menu .atb-btn:hover:not(:disabled) { background: var(--color-bg-input); }
.app-topbar .atb-menu .atb-btn.is-here,
.app-topbar .atb-menu .atb-btn.is-here:hover:not(:disabled) { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* «페이지로 이동» 표시(`T-362`) — 일하는 «곳»(작업대·소싱 허브)만 «→». 창으로 뜨는 도구는 표시 없음.
   판 안에서는 오른쪽 끝으로 민다(이름 바로 뒤에 붙으면 글자처럼 읽힌다). */
.app-topbar .atb-go { margin-left: var(--space-2); opacity: 0.7; font-size: var(--text-xs); }
.app-topbar .atb-menu .atb-go { margin-left: auto; padding-left: var(--space-3); }

/* 휴지통 = 파괴 동작 색 */
.app-topbar .atb-btn.atb-danger { color: var(--topbar-danger); opacity: 1; }
.app-topbar .atb-btn.atb-danger:hover:not(:disabled) { color: var(--color-text-inverse); background: var(--topbar-danger); }

/* 배포 버전 칩 — 일치 = 초록 · 어긋남 = 빨강(누르면 새로고침 · DESIGN.md «버전 배지») */
.app-topbar .atb-ver {
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 9px;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text-inverse) 14%, transparent);
  color: var(--topbar-ok);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
}
.app-topbar .atb-ver.is-stale { background: var(--topbar-danger); color: var(--color-text-inverse); }

.app-topbar .atb-user {
  flex: 0 0 auto;
  color: var(--topbar-muted);
  font-size: var(--text-sm);
  line-height: normal;       /* 메인 실측 16px — 작업대 본문 줄높이를 물려받으면 20px 로 벌어졌다 */
  white-space: nowrap;
}

/* 운영 칩 — 모양 정본은 `app.css` 의 `.ops-chip`(두 앱 같은 칩 · `ops-panel.js`).
   ★작업대는 `app.css` 를 **낮은 레이어**로 싣기 때문에 작업대의 레이어 밖 `button` 규칙이 **글씨만** 덮었다
     (실측 2026-09-23: 메인 12px/600 · 작업대 14px/400). 글씨만 여기서 못박는다 — 나머지는 정본 그대로. */
.app-topbar .ops-chip {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: normal;
}
.app-topbar .atb-user:empty { display: none; }

@media (max-width: 1280px) {
  .app-topbar .atb-project { max-width: 220px; }
  .app-topbar .atb-btn { padding-left: var(--space-2); padding-right: var(--space-2); }
}
@media (max-width: 980px) {
  .app-topbar { grid-template-columns: auto minmax(0, 1fr); }
}