/* =========================================
   상단 Brandbar 공통
========================================= */
.bbp-brandbar{
  background:#fff;
  border: none !important;
  font-size:14px;
}
.bbp-brandbar .container{ gap:20px; }

/* 로고 */
.bbp-logo img{ height:40px; }

/* =========================================
   퀵 액션 아이콘(홈/장바구니) – 좌측
========================================= */
.bbp-quick-actions{
  display:flex; align-items:center; gap:12px;
  /* 컨테이너 좌우 패딩만큼 살짝 왼쪽으로 */
  margin-left:calc(var(--bs-gutter-x,1.5rem)*-0.5) !important;
}

.icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px; position:relative; text-decoration:none;
  color:#111; transition:color .25s ease;
}
.icon-link .bi{ font-size:26px; line-height:1; display:block; }

/* 배너 위에서는 흰색 */
.home .site-header .icon-link{ color:#fff !important; }
/* 배너 벗어나면(스크롤/hovering) 검정 */
.home .site-header.scrolled .icon-link,
.home .site-header.hovering .icon-link{ color:#111 !important; }
/* 배너 구역 안에서만 hover 시 검정 */
.home .site-header:not(.scrolled):hover .icon-link{ color:#111 !important; }

/* 장바구니 배지 */
.bbp-badge,.bbp-badge--icon{
  position:absolute; top:-4px; right:-8px;
  background:#e11d48; color:#fff; font-size:12px;
  border-radius:999px; padding:2px 6px; line-height:1;
}

/* =========================================
   PC 검색폼(가운데)
========================================= */
.bbp-searchbar{
  margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex:1 1 520px; max-width:680px; min-width:300px;
}

/* — 밑줄형(선택 사용) */
input.bbp-search-underline{
  flex:1 1 auto; width:clamp(280px,40vw,520px);
  border:0; border-bottom:2px solid #a80000; border-radius:0;
  background:transparent; font-size:16px; padding:10px 12px; outline:none;
}
input.bbp-search-underline::placeholder{ color:#9aa0a6; }
input.bbp-search-underline:focus{ border-bottom-color:#111; }

/* — Pill 검색박스(기본) */
.bbp-search-pill{
  width:420px; height:44px; padding:0 12px 0 14px;
  display:flex; align-items:center; gap:10px;
  border:0 !important; border-radius:9999px !important;
  background:rgba(255,255,255,.05);
  box-shadow:none !important;
  backdrop-filter:blur(10px) saturate(160%);             /* ← 기본 정의(아래에서 오버라이드로 끔) */
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  transition:all .25s ease;
}
.bbp-search-pill.input-group{ border:0 !important; border-radius:9999px !important; }

/* 입력영역 */
.bbp-search-pill .form-control,
.bbp-search-pill .bbp-search-input{
  flex:1 1 auto; height:44px;
  background:transparent !important;
  border:0 !important; outline:none !important; box-shadow:none !important;
  color:#111;
}
.bbp-search-pill .bbp-search-input::placeholder{ color:#6b7280; }

.btn.bbp-search-btn,
.btn.bbp-search-btn:hover,
.btn.bbp-search-btn:active,
.btn.bbp-search-btn:focus,
.btn.bbp-search-btn:focus-visible,
.input-group .btn.bbp-search-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;   /* 배경 제거 */
  border: none !important;              /* 테두리 제거 */
  outline: none !important;             /* 포커스 라인 제거 */
  box-shadow: none !important;          /* 그림자 제거 */
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none !important;  /* 브라우저 기본 버튼 스타일 제거 */
  -moz-appearance: none !important;
  appearance: none !important;
}
.btn.bbp-search-btn i {
  font-size: 18px;
}

.btn.bbp-search-btn i{ font-size:18px; }
.btn.bbp-search-btn:hover{ background:transparent !important; color:#666; }

/* 홈(배너 위)에서는 어둡게 */
.home .site-header .bbp-search-pill{
  background:rgba(0,0,0,.28); box-shadow:none !important;
}
.home .site-header .bbp-search-pill .bbp-search-input{ color:#fff; }
.home .site-header .bbp-search-pill .bbp-search-input::placeholder{ color:rgba(255,255,255,.75); }
.home .site-header .btn.bbp-search-btn{ background:rgba(255,255,255,.14); color:#fff; }
.home .site-header .btn.bbp-search-btn:hover{ background:rgba(255,255,255,.22); color:#111; }

/* 배너 벗어나면(스크롤/hovering) 밝은 테마 */
.home .site-header.scrolled .bbp-search-pill,
.home .site-header.hovering .bbp-search-pill{
  background:#fff !important; 
  border:1px solid #d1d5db !important;
  box-shadow:none !important;
}
.home .site-header.scrolled .bbp-search-pill .bbp-search-input,
.home .site-header.hovering .bbp-search-pill .bbp-search-input{ color:#111 !important; }
.home .site-header.scrolled .bbp-search-pill .bbp-search-input::placeholder,
.home .site-header.hovering .bbp-search-pill .bbp-search-input::placeholder{ color:#6b7280 !important; }
.home .site-header.scrolled .btn.bbp-search-btn,
.home .site-header.hovering .btn.bbp-search-btn{ 
  background:transparent !important; color:#111 !important; border-radius:0 !important;
}
.home .site-header.scrolled .btn.bbp-search-btn:hover,
.home .site-header.hovering .btn.bbp-search-btn:hover{ 
  background:transparent !important; color:#666 !important;
}

/* 배너 영역 안에서만 hover 스타일 */
.home .site-header:not(.scrolled):hover .bbp-search-pill,
.home .site-header:not(.scrolled):hover .bbp-searchbar .input-group{
  background:rgba(255,255,255,.06) !important;
  box-shadow:none !important;
  border-radius:9999px !important;
}
.home .site-header:not(.scrolled):hover .bbp-search-pill .bbp-search-input{ color:#111 !important; }
.home .site-header:not(.scrolled):hover .bbp-search-pill .bbp-search-input::placeholder{ color:#6b7280 !important; }
.home .site-header:not(.scrolled):hover .btn.bbp-search-btn{ background:transparent !important; color:#111 !important; }
.home .site-header:not(.scrolled):hover .btn.bbp-search-btn:hover{ background:transparent !important; color:#666 !important; }

/* =========================================
   반응형
========================================= */
@media (min-width:992px){
  .bbp-brandbar .container{ justify-content:initial; }
  .bbp-brandbar .bbp-searchbar{
    margin-left:auto; margin-right:auto; flex:0 0 auto; padding-left:0 !important;
  }
  .bbp-brandbar .bbp-quick-actions{ margin-right:16px; }
  .bbp-brandbar .text-end{ margin-left:16px; }
}

@media (max-width:991.98px){
  .bbp-searchbar{ max-width:560px; }
  .bbp-brandbar .text-end img{ height:44px; }
  .icon-link .bi{ font-size:22px; }
  .bbp-search-pill{ width:360px; }
}

@media (max-width:767.98px){
  .bbp-searchbar{ display:none; }
  .bbp-icon-btn{ width:36px; height:36px; }
  .bbp-logo img{ height:36px; }
  .bbp-brandbar .text-end img{ height:40px; }
  .icon-link .bi{ font-size:20px; }
}


/* 1) 일반 페이지( .home 아님 ) 기본: 아이콘/검색 검정 */
body:not(.home) .site-header .icon-link{
  color:#111 !important;
}
body:not(.home) .site-header .bbp-search-pill{
  background:#fff !important;
  border:2px solid #111 !important;
  border-radius:9999px !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body:not(.home) .site-header .bbp-search-pill .bbp-search-input{
  color:#111 !important;
}
body:not(.home) .site-header .bbp-search-pill .bbp-search-input::placeholder{
  color:#6b7280 !important;
}

/* 2) 블러(유리효과) 완전 차단 – 모든 상태 */
.bbp-search-pill,
.home .site-header .bbp-search-pill,
.home .site-header:hover .bbp-search-pill,
.home .site-header.hovering .bbp-search-pill,
.home .site-header.scrolled .bbp-search-pill{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* bbp--light 붙은 페이지는 항상 검정/테두리 */
.bbp-brandbar.bbp--light .icon-link { color:#111 !important; }
.bbp-brandbar.bbp--light .bbp-search-pill {
  background:#fff !important;
  border:2px solid #111 !important;
  border-radius:9999px !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.bbp-brandbar.bbp--light .bbp-search-input{
  background:transparent !important; /* 인풋은 투명, 테두리는 래퍼가 가짐 */
  border:0 !important;
  color:#111 !important;
}
.bbp-brandbar.bbp--light .bbp-search-input::placeholder{ color:#6b7280 !important; }
/* 홈페이지에서는 bbp--light 스타일 무시 */
.home .bbp-brandbar.bbp--light .icon-link { 
  color: #fff !important; 
}
.home .bbp-brandbar.bbp--light .bbp-search-pill {
  background: rgba(0,0,0,.28) !important;
  border: 0 !important;
}
.bbp-search-pill .input-group-text {
  background: transparent !important; /* 배경 제거 */
  border: none !important;            /* 테두리 제거 */
  box-shadow: none !important;        /* 그림자 제거 */
  padding: 0 !important;              /* 내부 여백 제거 */
}


/* 왼쪽 레이블 + 세로 구분선 */
.bbp-cs-label{
  display:flex;
  align-items:center;        /* 🔹 세로 중앙 */
  font-weight:600;
  font-size:14px;
  position:relative;
  padding-right:14px;        /* 선과의 간격 */
  /* 선 길이 조절(위/아래 여백 %) 값 줄이면 선이 더 길어짐 */
  --line-inset: 0%;
}
.bbp-cs-label::after {
  content:"";
  position:absolute;
  right:0;
  top:-10px;       /* 위로 8px 더 확장 */
  bottom:-10px;    /* 아래로 8px 더 확장 */
  width:1px;
  background: currentColor;
  opacity:.9;
}

/* 검색 input의 기본 X(지우기) 버튼 숨기기 */
.bbp-search-input[type="search"]::-webkit-search-cancel-button,
.bbp-search-input[type="search"]::-webkit-search-decoration,
.bbp-search-input[type="search"]::-webkit-search-results-button,
.bbp-search-input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* 구형 IE/Edge */
.bbp-search-input::-ms-clear{
  display:none;
  width:0;
  height:0;
}

/* 폭 좁을 때 간격 보정 */
@media (max-width: 991.98px){
  .bbp-customer-center{ gap:10px; }
  .bbp-cs-label{ padding-right:12px; }
}
/* === 반응형 보강 패치 (파일 맨 아래 추가) ===================== */

/* 안전망: md 미만에서 검색 폼 숨김 (HTML의 d-none d-md-flex 보조용) */
@media (max-width: 991.98px){
  .bbp-searchbar{ display:none !important; }
  .bbp-customer-center{ display:none !important; } /* 고객센터 블록도 모바일에서 숨김 백업 */
}

/* 모바일에서 좌측 아이콘들이 너무 왼쪽으로 붙지 않게: 음수 마진 해제 */
@media (max-width: 575.98px){
  .bbp-quick-actions{ margin-left: 0 !important; }
}

/* 모바일 검색/장바구니/전화 아이콘 크기 살짝 줄이기, 데스크탑은 기존값 유지 */
.bbp-brandbar .icon-link .bi{ font-size:22px; line-height:1; }
@media (min-width: 992px){
  .bbp-brandbar .icon-link .bi{ font-size:26px; }
}

/* 데스크탑에서 검색 pill 폭 고정 (너무 넓어지지 않도록) */
@media (min-width: 992px){
  .bbp-searchbar .bbp-search-pill{
    width:420px; max-width:420px;
  }
}
/* 모바일(xs~md)에서 홈/전화 아이콘 숨김 */
@media (max-width: 991.98px){
  .bbp-quick-actions a[aria-label="홈"]{
    display: none !important;
  }
}

/* 모바일에서만 로고를 정중앙에 고정 */
@media (max-width: 991.98px){
  /* 헤더 컨테이너에 기준점 */
  nav.navbar .container{
    position: relative;
    min-height: 56px; /* 헤더 높이 확보(필요시 조절) */
  }

  /* 로고를 가운데로 절대배치 */
  nav.navbar .navbar-brand{
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;           /* 기존 여백 제거 */
  }

  /* 혹시 데스크탑용으로 왼쪽으로 당긴 설정이 있었다면 무력화 */
  .navbar-brand{ margin-left: 0 !important; }

  /* 햄버거는 왼쪽에 그대로 (z-index로 겹침 방지) */
  nav.navbar .navbar-toggler{
    position: relative;
    z-index: 2;
    margin-left: 0;
  }

  /* 오른쪽 아이콘 묶음이 있다면 오른쪽 끝으로 */
  nav.navbar .right-actions{
    margin-left: auto;     /* .ms-auto 와 동일 효과 */
    position: relative;
    z-index: 2;            /* 로고와 겹치지 않게 */
  }
}