/* 탑바 (MGW-DEV-028, 다솜 DSN-003 1장) — 시작 페이지 · /account/ · /help/ 공통
   - 높이 48, 폭 min(100vw − 24px, 980px) 가운데.
   - 로고 = ZUZ 표식(19×11, <img alt="">, 링크 없음, 흐리게) + "Arcade" 글자. 표식은 inline 이라 아래 끝이 글자 기준선에 앉는다.
   - 오른쪽 칸: 44×44, 그림 20, 검정. 폭 600 이상이면 칸마다 [그림 + 글자 라벨]. 폭 600 미만은 그림만, 단 Sign in 은 언제나 글자 버튼.
   - /account/·/help/ 머리: 왼쪽 뒤로(‹) + 로고. */
.tb { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; width: min(100vw - 24px, 980px); margin: 0 auto; }
.tb-l { display: flex; align-items: center; gap: 2px; min-width: 0; }
.brand { display: inline-block; margin: 0; white-space: nowrap; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; line-height: 1; color: var(--cf-muted); }
.brand .mark { display: inline-block; width: 19px; height: 11px; margin-right: 5px; vertical-align: baseline; opacity: 0.6; }
.tb-r { display: flex; align-items: center; gap: 0; }
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  background: none; color: #000; font: inherit; text-decoration: none; cursor: pointer;
}
.tb-btn svg { display: block; flex: none; width: 20px; height: 20px; }
.tb-btn:hover { background: rgba(29, 37, 64, 0.07); }
.tb-btn:focus-visible, .tb-back:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
.tb-lb { display: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
/* 휴대폰: Sign in 하나만 글자 버튼(보이는 테 34, 누르는 칸 44) — 로그인 여부가 가장 헷갈렸던 것(PLN-002 #3) */
.tb-btn.signin { padding: 0 4px; }
.tb-btn.signin .tb-lb { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border: 1.5px solid var(--cf-ink); border-radius: 17px; font-size: 14px; }
.tb-btn.signin svg { display: none; }
@media (min-width: 600px) {
  .tb-btn { padding: 0 10px; }
  .tb-lb { display: inline; }
  .tb-btn.signin { padding: 0 10px; }
  .tb-btn.signin .tb-lb { display: inline; height: auto; padding: 0; border: 0; font-size: 13px; }
  .tb-btn.signin svg { display: block; }
}
.tb-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; border-radius: 12px; color: var(--cf-ink); }
.tb-back svg { width: 24px; height: 24px; }
.tb-back:hover { background: rgba(29, 37, 64, 0.07); }