/**
 * 서브 상단 배너 전용 (bncode=2 → DOM: .bannerWrap.banner2)
 * 메인 비주얼(banner3)과 무관 — 이 파일만 수정하면 됩니다.
 * 로드: header.html에서 style.css 뒤(덮어쓰기 우선).
 * bxSlider가 onSliderLoad에서 주던 인라인(max-width:100% 등)과 충돌 시 !important 유지.
 */

/* 슬라이더 박스 자체를 본문 폭에 맞춤 — JS가 wrapper에 max-width:none 줄 때도 덮어씀 */
.bx-wrapper:has(.bannerWrap.banner2) {
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.bx-wrapper:has(.bannerWrap.banner2) > .bx-viewport {
  width: 100% !important;
  max-width: none !important;
  height: 190px !important;
  box-sizing: border-box;
}

.bx-viewport > .bannerWrap.banner2,
.min768 .bx-viewport > .bannerWrap.banner2,
.max768 .bx-viewport > .bannerWrap.banner2 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 루트: 인라인 width/max-width 덮어쓰기 */
.bannerWrap.banner2,
.min768 .bannerWrap.banner2,
.max768 .bannerWrap.banner2 {
  width: 100% !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  border: 2px dashed var(--gold);
  border-radius: 20px;
  padding: 20px 30px;
  margin-top: 20px;
  background: #f5f0e8;
}

/* 슬라이드: bx가 주는 position:absolute·고정 width(px) 무력화 */
.bannerWrap.banner2 .banner,
.min768 .bannerWrap.banner2 .banner,
.max768 .bannerWrap.banner2 .banner {
  float: none !important;
  list-style: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.bannerWrap.banner2 .banner-contents,
.bannerWrap.banner2 .hero,
.min768 .bannerWrap.banner2 .banner-contents,
.max768 .bannerWrap.banner2 .banner-contents,
.min768 .bannerWrap.banner2 .hero,
.max768 .bannerWrap.banner2 .hero {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.bannerWrap.banner2 .banner-contents .hero-inner,
.min768 .bannerWrap.banner2 .banner-contents .hero-inner,
.max768 .bannerWrap.banner2 .banner-contents .hero-inner {
  width: 100%;
  max-width: var(--layout-content-max, 1100px);
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 아래부터 타이포·여백 등 자유 수정 영역 */
.bannerWrap.banner2 .hero-label {
  font-size: 13px;
  letter-spacing: 2.5px;
  color: var(--brown-mid);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bannerWrap.banner2 .hero-label::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--brown-mid);
}

.bannerWrap.banner2 .hero h1 {
  font-family: 'Noto Serif KR', serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--brown-deep);
  margin-bottom: 11px;
  letter-spacing: -1px;
}

.bannerWrap.banner2 .hero h1 em {
  font-style: normal;
  color: var(--gold);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
}

.bannerWrap.banner2 .hero-desc {
  font-size: 14px;
  color: var(--brown-mid);
  line-height: 1.5;
  max-width: 520px;
}