@charset "utf-8";
/* ==========================================================================
   헤더 레이아웃 'center' — 중앙 로고형 (배치만)

   부품 모양은 rb.css/header.css. 가운데 줄은 기본형의 .bf-header-main 을 그대로
   써서 모바일(900px 이하)에서는 기본형 로고 줄과 똑같이 된다. PC 에서만
   세 칸 격자(왼쪽 · 로고 · 오른쪽)로 바꾼다.
   #bf_header 를 앞에 붙이는 것은 검색 화면 CSS(rb/rb.search .bf-search-header
   .bf-header-main)보다 확실히 이기기 위해서다.
   ========================================================================== */

/* 왼쪽 · 오른쪽 묶음 — 모바일에서도 기본형 로고 줄처럼 한 줄로 선다(간격 4px) */
.bf-hd-center .bf-hd-left,
.bf-hd-center .bf-hd-end { display: flex; align-items: center; gap: 4px; }

@media (min-width: 901px) {

  #bf_header.bf-hd-center .bf-header-main .bf-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; column-gap: 24px;
    height: 96px;
  }

  .bf-hd-center .bf-hd-left { gap: 8px; justify-self: start; min-width: 0; }
  .bf-hd-center .bf-logo { justify-self: center; }
  .bf-hd-center .bf-logo img { height: 52px; }
  .bf-hd-center .bf-hd-end { justify-self: end; }

  /* 실시간 인기검색어 — 검색창 밖에 알약 모양으로. TOP10 은 알약 아래로 */
  .bf-hd-center .bf-hd-rank { position: relative; }
  .bf-hd-center .bf-rank-roll-btn {
    height: 40px; padding: 0 12px 0 7px;
    border: 1px solid var(--sky-b1); border-radius: var(--r-full);
    background: var(--sky-50);
    transition: border-color .2s;
  }
  .bf-hd-center .bf-rank-roll-btn:hover { border-color: var(--sky-b2); }
  .bf-hd-center .bf-rank-roll-view { width: 150px; }
  .bf-hd-center .bf-rank-panel { top: calc(100% + 10px); left: 0; }

  /* 주메뉴 — 가운데 정렬 */
  .bf-hd-center .bf-gnb .bf-inner { justify-content: center; }

  /* 스크롤 — 주메뉴 줄만 위에 남는다. 헤더 전체를 붙이되 유틸 바(38 + 선 1)와
     가운데 줄(96)만큼 위로 밀어 둔다. 검색 결과 화면은 펼친 검색창 때문에
     높이가 달라 붙이지 않는다. */
  #bf_header.bf-hd-center:not(.bf-search-header) {
    position: sticky; top: -135px;
    transition: box-shadow .2s;
  }
  .bf-scrolled #bf_header.bf-hd-center:not(.bf-search-header) { box-shadow: 0 6px 18px rgba(31,102,158,.08); }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .bf-hd-center .bf-rank-roll-view { width: 120px; }
  .bf-hd-center .bf-logo img { height: 46px; }
}

/* 인기검색어는 1080px 이하에서 부품 CSS 가 숨긴다 — 빈 감싸개가 간격을 먹지 않게 같이 뺀다
   (모바일 로고 줄이 기본형과 1px 도 어긋나지 않게) */
@media (max-width: 1080px) {
  .bf-hd-center .bf-hd-rank { display: none; }
}