.main-contents {
  /*padding-bottom: 60px;*/
}

/* 상단 풀폭 띠배너 (슬라이드 배너 위) */
.top-hero-banner {
  width: 100%;
  margin: 0 0 36px 0;
  overflow: hidden;
  line-height: 0;
}
@media (max-width: 768px) {
  .top-hero-banner {
    margin: 0 0 24px 0;
  }
}
.top-hero-banner a {
  display: block;
  line-height: 0;
}
.top-hero-banner img {
  width: 100%;
  object-fit: cover;       /* 폭이 넓어지면 위아래 일부만 크롭 */
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  /* 모바일은 세로형 이미지가 들어오므로 높이 고정 해제 */
  .top-hero-banner img {
    height: auto;
    object-fit: contain;
  }
}

.main-banner-area {
  width: 100%;
  position: relative;
  /* 배너와 하단 컨트롤러 사이 간격 조정 */
}

/* 슬라이더 영역 */
.main_banner_B {
  /* 하단 알약 컨트롤러가 배너 위에 겹치지 않고 아래에 위치하도록 공간 확보 */
  overflow: hidden; 
  position: relative;
}

.main_banner_B .swiper-wrapper {
  /* 높이를 고정값으로 설정 */
  height: 380px !important; 
}

.main_banner_B .swiper-slide {
  /* 슬라이드 높이 고정 */
  height: 380px !important;
  /* 카드 형태처럼 보이게 둥근 모서리 */
  border-radius: 12px; 
  overflow: hidden;
  /* 배경색 (이미지 로딩 전) */
  background-color: #f5f5f5;
  /* 약한 그림자 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.main_banner_B .banner-item {
  display: block;
  width: 100%;
  height: 100%;
}

.main_banner_B img {
  width: 100%;
  height: 100% !important;

  /*object-fit: cover;*/

  display: block;
  transition: transform 0.3s ease;
}

/* 호버 시 확대 효과 */
.main_banner_B .swiper-slide:hover img {
  transform: scale(1.03);
}

/* --- 알약 페이지네이션 (배너 위 오버레이 → 배너 아래 분리) --- */
.custom-pagination-wrap {
  position: static;            /* 오버레이 해제: 배너 글씨 가림 방지 */
  bottom: auto;
  left: auto;
  transform: none;             /* reset.css의 translateX(-50%) 무력화 (static에선 가운데 밀림 발생) */
  margin: 16px auto 0;         /* 배너 아래 가운데 정렬 */
  width: fit-content;
  display: flex;
  align-items: center; 
  justify-content: center;
  background: #fff; 
  border: 1px solid #e5e5e5; 
  border-radius: 25px;
  padding: 5px 20px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
  gap: 20px;
  z-index: 10; 
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; 
  color: #333; 
  font-weight: 700;
  min-width: 140px; /* 너비 고정 */
}

/* --- 모바일 반응형 --- */
@media (max-width: 768px) {
  .main_banner_B .swiper-wrapper,
  .main_banner_B .swiper-slide {
    /* 모바일에서는 높이를 조금 줄임 */
    height: 300px !important; 
    border-radius: 0px;
  }
}
/* ==========================================================================
   티티박스 히어로 (2026-08-07 신설)
   구 메인은 카테고리 → 상품 섹션 나열로 시작해 브랜드 인상이 없었다.
   좌: 타이포 카피 + CTA / 우: 오늘의 특가 보드(실데이터 재활용)
   ========================================================================== */
.tb-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--c-bg) 100%);
  border-bottom: 1px solid var(--c-border);
  padding: 64px 0 58px;
  margin-bottom: 34px;
}
.tb-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; }
.tb-blob--a { width: 480px; height: 480px; background: rgba(11, 92, 255, .10); top: -200px; right: -90px; }
.tb-blob--b { width: 380px; height: 380px; background: rgba(255, 46, 136, .07); bottom: -170px; left: -110px; }

.tb-hero-inner {
  position: relative;
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 52px;
  align-items: center;
}
.tb-hero-copy > * { min-width: 0; }

.tb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-point-light); color: var(--c-point);
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  padding: 8px 15px; border-radius: 99px; margin-bottom: 20px;
}
.tb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: tbPulse 1.6s ease-out infinite;
}
@keyframes tbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 46, 136, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 46, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 136, 0); }
}

.tb-hero h1 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--c-black);
  margin: 0;
}
.tb-hero h1 .hl { color: var(--c-primary); }
.tb-sub { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--c-gray); }

.tb-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.tb-btn-main, .tb-btn-sub {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border-radius: 13px;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.tb-btn-main { background: var(--c-primary); color: #fff; box-shadow: 0 10px 24px rgba(11, 92, 255, .26); }
.tb-btn-main:hover { background: var(--c-primary-deep); transform: translateY(-2px); }
.tb-btn-sub { background: #fff; border: 1px solid var(--c-border); color: var(--c-black); box-shadow: var(--sh-sm); }
.tb-btn-sub:hover { border-color: #d5daea; transform: translateY(-2px); box-shadow: var(--sh-md); }

.tb-props { display: flex; gap: 22px; margin: 30px 0 0; flex-wrap: wrap; }
.tb-props li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--c-black);
}
.tb-props i {
  font-style: normal; width: 30px; height: 30px; border-radius: 9px;
  background: var(--c-primary-light);
  display: grid; place-items: center; font-size: 14px;
}

/* ── 오늘의 특가 보드 ── */
.tb-board {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--sh-lg);
  min-width: 0;
}
.tb-board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.tb-board-tit {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 15px; color: var(--c-black); letter-spacing: -.03em;
}
.tb-board-tit .tb-dot { color: var(--c-point); }
.tb-board-more {
  flex: none;
  font-size: 12.5px; font-weight: 700; color: var(--c-primary);
  background: var(--c-primary-light); padding: 6px 13px; border-radius: 9px;
}
.tb-bitem {
  display: flex; gap: 14px; align-items: center;
  background: var(--c-bg); border-radius: 15px;
  padding: 12px; margin-bottom: 10px;
  transition: background .15s, transform .15s;
}
.tb-bitem:last-child { margin-bottom: 0; }
.tb-bitem:hover { background: var(--c-primary-light); transform: translateX(3px); }
.tb-bthumb {
  width: 56px; height: 56px; border-radius: 13px;
  flex: none; overflow: hidden; background: #eef1f7;
}
.tb-bthumb img { width: 100%; height: 100%; object-fit: cover; }
.tb-binfo { flex: 1; min-width: 0; }
/* ★ span 은 인라인이라 block 을 줘야 ellipsis 가 먹는다(안 그러면 부모 폭을 밀어낸다) */
.tb-bnm {
  display: block; font-size: 14px; font-weight: 700; color: var(--c-black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-bmeta { display: block; font-size: 12px; color: var(--c-light); margin-top: 2px; }
.tb-bprice {
  flex: none; text-align: right;
  font-size: 15px; font-weight: 800; color: var(--c-black); white-space: nowrap;
}
.tb-bprice b { display: block; font-size: 12.5px; color: var(--c-point); }

@media (max-width: 1024px) {
  .tb-hero { padding: 44px 0 40px; margin-bottom: 26px; }
  .tb-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .tb-hero-inner > * { min-width: 0; }
  .tb-sub { max-width: 100%; }
}
@media (max-width: 600px) {
  .tb-hero-inner { padding: 0 16px; }
  .tb-hero h1 { font-size: 27px; }
  .tb-sub { font-size: 14.5px; margin-top: 14px; }
  .tb-ctas { gap: 9px; margin-top: 22px; }
  .tb-btn-main, .tb-btn-sub { height: 48px; padding: 0 20px; font-size: 14.5px; flex: 1 1 auto; }
  .tb-props { gap: 12px 16px; margin-top: 22px; }
  .tb-props li { font-size: 12.5px; }
  .tb-props i { width: 26px; height: 26px; font-size: 13px; }
  .tb-board { padding: 16px; border-radius: 18px; }
}