/* 매체 칩 바 + 브랜드 로고 칩.
   허브는 이 칩들을 다크 헤더 안에 두지만 워크벤치의 이 자리는 밝은 배경이라
   칩 테두리/글자색만 라이트 톤으로 바꿨다. 로고는 전부 실제 이미지(logo-img)를
   쓴다 — 허브는 지금도 글자/이모지 칩이라 이 부분은 두 화면이 서로 다르다. */

.media-bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--border);
}
.media-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.browse-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.media-chip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 10px;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--bg);color:var(--text-sub);
  font:600 11.5px/1.6 inherit;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.media-chip:hover{background:var(--accent-bg);border-color:var(--primary);color:var(--primary)}
.media-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.media-chip .cnt{
  padding:0 5px;border-radius:7px;background:var(--bg-tint);
  font-size:9.5px;font-weight:700;color:var(--text-muted);
}
.media-chip[aria-pressed="true"] .cnt{background:rgba(255,255,255,.25);color:#fff}

.logo-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:4px;flex-shrink:0;
  font-weight:800;font-size:10px;letter-spacing:-.5px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.06);
}
.logo-chip.circle{border-radius:50%}
.logo-chip.all{background:linear-gradient(135deg,#0F3D6F,#3B82F6)}
.logo-chip.unknown{background:var(--text-sub)}

/* 실제 로고 이미지 칩 — 투명 배경 PNG 를 흰 카드 위에 얹는다. */
.logo-chip.logo-img{background:#fff;padding:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.logo-chip.logo-img.circle{padding:0}
.logo-chip.logo-img img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* 좁은 화면에서는 줄바꿈을 접고 한 줄 가로 스크롤로 바꾼다 — 19개가 감싸이면
   칩 바만 7줄(약 230px)을 먹어 목록과 상세가 볼 수 없을 만큼 밀린다. */
@media (max-width:760px){
  .media-bar{padding:8px 12px;gap:6px;flex-wrap:wrap}
  .media-chips{
    flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;gap:5px;
    -webkit-overflow-scrolling:touch;
  }
  .media-chip{padding:3px 8px;font-size:11px}
  .browse-actions{flex:1 1 100%;justify-content:flex-end}
}