@charset "utf-8";
/* ==========================================================================
   헤더 레이아웃 'compact' — 스크롤 축소형 (막대 모양만)

   처음 모습은 부품 CSS 의 기본 배치(= basic) 그대로다. 여기는 스크롤하면
   내려오는 막대(#bf_hd_bar)만 그린다. 막대를 내리고 올리는 것은
   bf.common.js 12 가 .on 을 붙였다 뗐다 한다.

   막대는 헤더 안에 있어 헤더컬러(--surface 등 헤더 변수)를 그대로 받는다.
   ========================================================================== */

.bf-hd-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 520;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
          backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(31,102,158,.08);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}
.bf-hd-bar.on {
  transform: none;
  visibility: visible;
  transition: transform .28s ease, visibility 0s;
}
:root[data-theme="dark"] .bf-hd-bar { box-shadow: 0 6px 18px rgba(0,0,0,.35); }

.bf-hd-bar > .bf-inner {
  display: flex; align-items: center; gap: 20px;
  height: 60px;
}
.bf-hd-bar .bf-logo img { height: 30px; }

.bf-hd-bar-nav { flex: 1 1 auto; min-width: 0; }
.bf-hd-bar .bf-gnb-list { gap: 0; }
.bf-hd-bar .bf-gnb-link { height: 60px; padding: 0 15px; font-size: 15.5px; }
.bf-hd-bar .bf-gnb-link::after { left: 15px; right: 15px; }

.bf-hd-bar .bf-hd-right { display: flex; align-items: center; gap: 4px; flex: none; }
.bf-hd-bar .bf-header-util { gap: 2px; }
.bf-hd-bar .bf-header-util a { width: 42px; height: 42px; }
.bf-hd-bar .bf-util-txt { display: none; }
.bf-hd-bar .bf-util-cnt { top: 2px; right: 3px; }
.bf-hd-bar .bf-hd-write { height: 36px; margin-left: 6px; }

@media (max-width: 1280px) {
  .bf-hd-bar > .bf-inner { gap: 12px; }
  .bf-hd-bar .bf-gnb-link { padding: 0 11px; font-size: 15px; }
  .bf-hd-bar .bf-gnb-link::after { left: 11px; right: 11px; }
}
@media (max-width: 1080px) {
  .bf-hd-bar .bf-header-util li:not(:last-child) { display: none; }   /* 마이만 */
}

/* 모바일은 기본형처럼 헤더 자체가 위에 붙는다(main.css) — 막대는 쓰지 않는다 */
@media (max-width: 900px) {
  .bf-hd-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-hd-bar, .bf-hd-bar.on { transition: none; }
}