/* 탑바 (MGW-DEV-028, 다솜 DSN-003 1장) — 시작 페이지 · 3게임(MGW-DEV-030 세트 줄) · /account/ · /help/ 공통
   - 높이 48, 폭 min(100vw − 24px, 980px) 가운데.
   - 로고 = ZUZ 표식(19×11, <img alt="">, 링크 없음, 흐리게) + "Arcade" 글자. 표식은 inline 이라 아래 끝이 글자 기준선에 앉는다.
   - 오른쪽 칸: 44×44, 그림 20, 검정. 폭 660 이상(MGW-DEV-032 전 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; }
/* MGW-DEV-032(DSN-006 plaza.css 3): 라벨 경계 600 → 660 — 라벨 6칸(≈ 518)이 600~622 시작 페이지에서 로고와 겹침 */
@media (min-width: 660px) {
  .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); }

/* ---------- 위쪽 공통 아이콘 세트 (MGW-DEV-030, 다솜 DSN-004 set.css 1~4) ----------
   세트 = Plaza · Shop · My items · Sign in/Account · Help · Sound (Plaza = MGW-DEV-032 · DSN-006, 맨 왼쪽 — 오른쪽 맞춤이라 다른 5칸 자리 그대로). 마크업은 common/zuz-set.js 하나가 시작 페이지·3게임에 같은 순서로 그린다.
   게임 화면 배치(세트 줄 48 + 게임 줄 44, 낮은 가로 왼쪽 띠)는 frame.css 끝 "공통 아이콘 세트" 절. */
/* 1. 칸 보이기 (예전 home.css 25~28행을 공통으로). 로그인 전 [Shop] (Sign in) [Help] [Sound] / 뒤 [Shop] [My items] [Account] [Help] [Sound] / 꺼짐 [Shop] [Help] [Sound] */
.items-btn, .account-btn { display: none; }
body.signed-in .login-btn { display: none; }
body.signed-in .items-btn, body.signed-in .account-btn { display: inline-flex; }
body.login-off .login-btn, body.login-off .items-btn, body.login-off .account-btn { display: none; }

/* 2. Sound 칸: 그림 두 장을 다 넣고 aria-pressed 로 하나만 (바꿀 때 innerHTML 을 다시 쓰지 않음) */
.snd { position: relative; display: flex; }
.sound-btn .snd-off, .snd-toast .snd-off { display: none; }
.sound-btn[aria-pressed="false"] .snd-on, .snd-pop.is-off .snd-toast .snd-on { display: none; }
.sound-btn[aria-pressed="false"] .snd-off, .snd-pop.is-off .snd-toast .snd-off { display: block; }

/* 3. 폭 < 360: 시작 페이지 로고 글자 숨김(표식만). 글자는 화면 읽기용으로 남김 */
@media (max-width: 359.98px) {
  .brand-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand .mark { margin-right: 0; }
}

/* 3-1. MGW-DEV-032(DSN-006 plaza.css 1): 폭 < 400 세트 줄 좌우 여백 12 → 8, 왼쪽 묶음과 세트 사이 8 → 0 (6칸 264 가 320 게임 ‹ 옆에 들어가게).
        세트가 있는 줄(data-set)만 — /account/·/help/ 머리는 그대로. 칸 크기 44 는 줄이지 않고 칸을 숨기지 않는다 */
@media (max-width: 399.98px) {
  .tb[data-set] { width: calc(100vw - 16px); gap: 0; }
}

/* 4. 알림 줄 · 세부 판 (Sound 칸 바로 아래, 오른쪽 끝을 Sound 칸 오른쪽 끝에 맞춤). z 90 = 판 덮개(5) 위, 결과 화면 .rs(100) 아래 */
.snd-pop {
  position: absolute; top: calc(100% + 2px); right: 0; z-index: 90;
  border-radius: 12px; background: #fff; color: var(--cf-ink);
  box-shadow: 0 6px 20px rgba(29, 37, 64, 0.16), 0 0 0 1px rgba(29, 37, 64, 0.06);
  font-family: var(--cf-font);
  animation: snd-in 120ms ease-out;
}
.snd-pop[hidden] { display: none; }
.snd-pop, .snd-pop * { box-sizing: border-box; }
.snd-toast { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 2px 0 12px; white-space: nowrap; }
.snd-toast svg { display: block; flex: none; width: 18px; height: 18px; color: #000; }
.snd-msg { font-size: 14px; font-weight: 700; }
.snd-sep { width: 1px; height: 20px; background: var(--cf-line); }
.snd-set {
  height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--cf-accent-ink); cursor: pointer;
}
.snd-set:hover { background: rgba(29, 37, 64, 0.07); }
.snd-set:focus-visible, .snd-row:focus-within { outline: 3px solid #000; outline-offset: -3px; }
.snd-panel { display: none; width: 236px; padding: 4px; }
.snd-pop.is-panel .snd-toast { display: none; }
.snd-pop.is-panel .snd-panel { display: block; }
.snd-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 48px; padding: 0 10px 0 12px; border-radius: 10px; cursor: pointer;
}
.snd-row + .snd-row { box-shadow: 0 -1px 0 #eef1f8; }
.snd-nm { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; line-height: 1.15; }
.snd-nm small { font-size: 12px; font-weight: 700; color: var(--cf-muted); }
/* 스위치: 입력은 줄 전체를 덮는 투명 칸(누르는 곳 = 줄 236×48) */
.snd-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: #7d869b; transition: background 120ms ease-out; }
.sw::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 120ms ease-out;
}
.snd-row input:checked + .sw { background: var(--cf-accent); }
.snd-row input:checked + .sw::after { transform: translateX(16px); }
/* 배경음 없음(hasBgm false): 흐림 + 무동작. 흐림은 이 한 가지 뜻으로만 쓴다(전체 끔이어도 다른 줄은 흐리게 하지 않음).
   Not yet 은 배경음이 없을 때만 보인다 */
.snd-nm small { display: none; }
.snd-row.off { cursor: default; }
.snd-row.off .snd-nm { color: var(--cf-muted); }
.snd-row.off .snd-nm small { display: block; }
.snd-row.off .sw { opacity: 0.38; }
.snd-row.off input { pointer-events: none; }
@keyframes snd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .snd-pop { animation: none; } .sw, .sw::after { transition: none; } }