/* ==========================================================================
   공통 헤더 (정적 렌더 construct/header.php) — 모든 페이지 공용
   기존 landing.css 의 헤더 규칙을 옮기고, 강조 메뉴는 «빨간 굵은 글자»로 통일.
   ========================================================================== */

/* 직링크형 최상위 메뉴(비즈원 1688직구매 솔루션) */
#header .nav .item > a.top { display: block; text-decoration: none; line-height: 55px; }
#header .nav .item > a.top::after { display: none; }          /* 기본 .top 화살표 제거 */
#header .nav .item > a.top.top-accent { color: #ff4000 !important; font-weight: 700 !important; }
#header .nav .item > a.top.top-accent:hover { color: #d63600 !important; }

/* 데스크톱: <p class="top"> 의 Bootstrap 기본 margin-bottom(1rem) 제거.
   이 여백 때문에 헤더가 77px 이 되어 메뉴 텍스트와 로그인 버튼의 세로 중심이 어긋난다. */
@media (min-width: 992px) {
  #header .nav .item > .top { margin-bottom: 0; }
  #header .nav .item > a.top { height: 60px; line-height: 60px; }
}

/* 랜딩(투명 헤더) 버튼 hover
   common.css 의 `#header .pc-gnb .btn:hover{background:#fff}` 와 `.main ... .btn *{color:#fff}`
   가 겹쳐 «흰 배경 + 흰 글자»로 사라지던 문제 → test 와 같이 반투명 배경 + 흰 글자 유지.
   모바일 메뉴는 흰 패널이므로 데스크톱에만 적용한다. */
@media (min-width: 992px) {
  .main #header:not(.on) .pc-gnb .btn-outline-secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
  }
  .main #header:not(.on) .pc-gnb .btn-outline-secondary:hover * { color: #fff !important; }
  .main #header:not(.on) .pc-gnb .btn-primary:hover {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
  }
  /* 스크롤 후(흰 헤더)에는 test 와 같은 연한 회색 hover */
  .main #header.on .pc-gnb .btn-outline-secondary:hover {
    color: var(--bs-gray-800);
    background: #f4f6fb;
    border-color: #a9b7c7;
  }
}

/* 메뉴 «준비 중» 항목 */
.bq-soon-link {
  display: block; width: 100%; padding: .125rem 0; border: 0; background: none;
  text-align: left; cursor: pointer;
}
.bq-soon-link:focus-visible {
  outline: 2px solid #106efd; outline-offset: 2px; border-radius: .375rem;
}
.bq-soon-chip {
  display: inline-block; margin-left: .25rem; padding: 0 .4rem; border-radius: 2rem;
  font-size: .6875rem; font-weight: 700; line-height: 1.5; vertical-align: .125rem;
  color: #495057; background: #dee2e6;
}

/* «준비 중» 토스트 */
.bq-soon-toast {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080;
  max-width: min(22.5rem, calc(100vw - 2.5rem)); padding: 1rem 1.25rem;
  border-radius: .75rem; background-color: #212529; color: #fff;
}

/* 모바일: 로그인/마이페이지 버튼을 메뉴 상단에 보기 좋게 */
@media (max-width: 991.98px) {
  #header .pc-gnb { width: 100%; }
  #header .pc-gnb .mobile-gnb { width: 100%; gap: .5rem !important; }
  #header .pc-gnb .mobile-gnb > li { flex: 1 1 0; min-width: 0; }
  #header .pc-gnb .mobile-gnb > li.d-lg-none { flex: 0 0 100%; }
  #header .pc-gnb .mobile-gnb .btn { width: 100%; padding: .55rem .5rem; }
  #header .pc-gnb .mobile-gnb .fs-8 { font-size: .9rem !important; }
}

/* 긴 메뉴명 대응 — 데스크톱 좁은 구간에서 패딩·글자 축소
   (1024px 실측: 7개 메뉴가 한 줄에 들어가지 않아 로고가 다음 줄로 밀림) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .nav .item .top {
    padding-left: .35rem !important; padding-right: .35rem !important;
    font-size: .9rem;
  }
  #header .nav .item > a.top .material-symbols-outlined { display: none; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  #header .nav .item .top {
    padding-left: .5rem !important; padding-right: .5rem !important;
    font-size: 1.05rem;
  }
}