/* ═══ 휴대폰 홈 브런치식 화면 구성 (2026-09-13, 사장님 승인 B안 — 배너를 홈 맨 위에) — 639px 이하만, PC는 그대로
   브런치 실측(03.사장님확인/브런치_움직임_명세_2026-09-13.md 6절)으로 새로 작성. 브런치 코드·사진·색은 쓰지 않았다.
   어드바이저 4명 검토(04.작업기록/_합의F_*_2026-09-13.md) 반영. 짝 파일: home-brunch.js ═══ */
  .bb-banner, .bb-tabs-sec, .bb-empty { display: none; }
  @media (max-width: 639px) {
    /* 새 배너가 다 만들어진 뒤에만 옛 추천 카드 줄을 숨긴다(데이터가 안 오면 옛 화면·오류 문구가 그대로 보인다) */
    .bb-ready #card-grid, .bb-ready .mo-dots { display: none !important; }
    .bb-banner {
      display: block; position: relative; overflow: hidden;
      margin-inline: -20px; touch-action: pan-y;
      -webkit-user-select: none; user-select: none;
    }
    .bb-banner[hidden] { display: none; }
    .bb-empty:not([hidden]) { display: block; text-align: center; color: var(--muted); padding: 32px 0; }
    .bb-track { display: flex; will-change: transform; }
    .bb-slide {
      flex: 0 0 100%; box-sizing: border-box; min-height: 196px;
      padding: 24px 20px 50px; display: flex; gap: 16px; align-items: flex-start;
      color: var(--fg); text-decoration: none;
    }
    .bb-text { flex: 1; min-width: 0; }
    .bb-title {
      margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em;
      word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .bb-desc {
      margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: rgba(26, 26, 26, 0.74);
      word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .bb-by { margin: 0; font-size: 13px; color: rgba(26, 26, 26, 0.72); }
    .bb-by i { font-family: Georgia, 'Times New Roman', serif; font-style: italic; margin-right: 4px; }
    .bb-thumb { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.5); }
    .bb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
    .bb-nav {
      position: absolute; left: 0; right: 0; bottom: 16px;
      display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none;
    }
    .bb-line { position: relative; width: 120px; height: 1px; background: rgba(26, 26, 26, 0.25); }
    .bb-seg {
      position: absolute; left: 0; top: -1px; height: 2px; background: var(--fg);
      transition: transform 760ms cubic-bezier(0.06, 0.84, 0.77, 0.99);
    }
    .bb-count { font-size: 13px; color: rgba(26, 26, 26, 0.72); letter-spacing: 0.02em; }
    .bb-count b { color: var(--fg); font-weight: 700; }
    .bb-pause {
      pointer-events: auto; width: 28px; height: 28px; margin-left: -4px; padding: 0; border: 0; border-radius: 50%;
      background: rgba(255, 255, 255, 0.55); color: var(--fg); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .bb-pause svg { width: 12px; height: 12px; }

    /* 맨 위 배치(B안): 배너가 홈 첫머리, 머리글이 지금 칸의 색을 따라간다(브런치: 머리글도 같은 배경) */
    .bb-top-mode .bb-banner { margin-top: calc(-1 * var(--space-8, 32px)); }
    .bb-top-mode .navbar:not(.shrink) {
      background-color: var(--bb-cur, rgba(255, 255, 255, 0.75)) !important;
      border-bottom-color: transparent !important; box-shadow: none !important;
      transition: background-color 760ms cubic-bezier(0.06, 0.84, 0.77, 0.99) !important;
    }

    /* 분야 탭 + 순위 목록 — 탭이 다 만들어진 뒤에만 옛 카테고리 칸을 숨긴다 */
    .bb-tabs-ready .category-grid { display: none; }
    .bb-tabs-sec { display: block; }
    .bb-tabs-wrap { position: relative; margin-inline: -20px; border-bottom: 1px solid var(--border); }
    .bb-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 0 20px; }
    .bb-tabs::-webkit-scrollbar { display: none; }
    .bb-tabs-wrap::after {
      content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none;
      background: linear-gradient(to right, rgba(250, 249, 247, 0), var(--bg)); opacity: 0; transition: opacity 200ms ease;
    }
    .bb-tabs-wrap.bb-more-right::after { opacity: 1; }
    .bb-tab {
      flex: 0 0 auto; background: none; border: 0; border-bottom: 4px solid transparent;
      padding: 12px 0 10px; font: inherit; font-size: 16px; color: var(--fg); cursor: pointer; white-space: nowrap;
    }
    .bb-tab[aria-selected="true"] { font-weight: 700; border-bottom-color: var(--fg); }
    .bb-note { margin: 10px 0 0; text-align: right; font-size: 12px; color: var(--muted); }
    .bb-note a { color: inherit; }
    .bb-list { list-style: none; margin: 0; padding: 0; }
    .bb-item a {
      display: flex; gap: 14px; align-items: flex-start; padding: 18px 0;
      border-bottom: 1px solid var(--border); color: inherit; text-decoration: none;
    }
    .bb-rank { flex: 0 0 30px; font-family: Georgia, 'Times New Roman', serif; font-size: 34px; font-weight: 400; line-height: 1; color: var(--fg); }
    .bb-info { flex: 1; min-width: 0; }
    .bb-meta { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
    .bb-name { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.4; word-break: keep-all; }
    .bb-sub { margin: 0; font-size: 13px; color: var(--muted); }
    .bb-ithumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--accent-light); }
    .bb-ithumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .bb-more { display: block; text-align: right; margin-top: 14px; font-size: 14px; color: var(--fg); text-decoration: none; }
    body.bb-top-off .mo-top { opacity: 0 !important; pointer-events: none !important; transform: translateY(120px) !important; }
  }