/* ================================================================
   style-banner.css — 메인 배너 슬라이더 + 카테고리 아이콘
   style.css 하단에 붙여넣거나 별도 파일로 link
================================================================= */

/* ── 배너 래퍼 ──────────────────────────────────────────────── */
.main-banner-wrap {
  position: relative;
  overflow: hidden;
  height: 340px;
}
@media(max-width:640px){ .main-banner-wrap{ height: 420px; } }

/* ── 슬라이더 ──────────────────────────────────────────────── */
.banner-slider {
  display: flex;
  height: 100%;
  transition: none;
}
.banner-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .5s ease;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
.banner-slide.active { opacity: 1; z-index: 2; }
.banner-slide.prev   { opacity: 0; z-index: 1; }

/* 배경 이미지 오버레이 */
.banner-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .18;
}

/* ── 배너 콘텐츠 ─────────────────────────────────────────── */
.banner-content {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 40px;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 3;
  padding-top: 20px;
  padding-bottom: 64px; /* 탭 높이 확보 */
}
@media(max-width:768px){
  .banner-content{ grid-template-columns: 1fr; padding-bottom: 80px; }
  .banner-visual{ display: none; }
}

.banner-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  padding: 4px 13px; border-radius: 100px;
  border: 1px solid;
  margin-bottom: 11px;
}
.banner-eyebrow .ti{ font-size: 12px; }

.banner-title {
  font-size: clamp(22px,3.5vw,36px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}
.banner-subtitle {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.banner-desc {
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.7;
  margin-bottom: 16px;
}
.banner-price {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 18px;
}
.banner-price .price-orig {
  font-size: 13px;
  color: #64748B;
  text-decoration: line-through;
}
.banner-price .price-now {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}
.banner-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.banner-btn1 {
  padding: 11px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter .2s;
}
.banner-btn1:hover { filter: brightness(1.1); }
.banner-btn2 {
  padding: 11px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.25);
  text-decoration: none;
  transition: border-color .2s;
}
.banner-btn2:hover { border-color: rgba(255,255,255,.6); }

/* ── 아이콘 비주얼 ───────────────────────────────────────── */
.banner-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
.banner-icon-wrap {
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex; align-items: center; justify-content: center;
}
.banner-icon-wrap .ti {
  font-size: 80px;
}
.banner-platform-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 4px 14px;
  border-radius: 100px;
  letter-spacing: .08em;
}

/* ── 인디케이터 ──────────────────────────────────────────── */
.banner-indicators {
  position: absolute;
  top: 14px; right: 60px;
  display: flex; gap: 5px;
  z-index: 10;
}
.banner-ind {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: none; cursor: pointer;
  transition: background .2s, width .25s;
  padding: 0;
}
.banner-ind.active {
  background: #E8380D;
  width: 20px;
  border-radius: 4px;
}

/* ── 화살표 ──────────────────────────────────────────────── */
.banner-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  transition: background .2s;
}
.banner-arrow:hover { background: rgba(255,255,255,.22); }
.arrow-l { left: 14px; }
.arrow-r { right: 14px; }

/* ── 하단 탭 네비게이션 ──────────────────────────────────── */
.banner-tabs {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
}
.banner-tab {
  flex: 1;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  border: none;
  background: transparent;
  border-top: 2px solid transparent;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: border-color .2s;
  text-align: left;
  font-family: inherit;
  min-width: 0;
}
.banner-tab:last-child { border-right: none; }
.banner-tab.active { border-top-color: #E8380D; }

.tab-num {
  font-size: 10px;
  font-weight: 700;
  color: #E8380D;
}
.tab-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tab-title {
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-tab.active .tab-title { color: #fff; }
.tab-sub {
  font-size: 10px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-prog {
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 2px;
}
.tab-bar {
  display: block;
  height: 100%;
  background: #E8380D;
  width: 0%;
  border-radius: 1px;
}
@keyframes tabProgress { from{width:0%} to{width:100%} }
.banner-tab.active .tab-bar { animation: tabProgress 4s linear forwards; }

@media(max-width:640px){
  .banner-tab .tab-sub { display: none; }
  .tab-title { font-size: 10px; }
}

/* ── 카테고리 아이콘 ─────────────────────────────────────── */
.cat-section {
  background: #fff;
  padding: 18px 0;
  border-bottom: 1px solid var(--gray-200,#E2E8F0);
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
@media(max-width:768px){ .cat-grid{ grid-template-columns: repeat(4,1fr); } }
@media(max-width:480px){ .cat-grid{ grid-template-columns: repeat(4,1fr); gap:6px; } }

.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--gray-200,#E2E8F0);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
  position: relative;
}
.cat-item:hover { border-color: var(--brand,#E8380D); background: #FFF1EE; }
.cat-item.active {
  border: 2px solid var(--brand,#E8380D);
  background: #FFF1EE;
}
.cat-badge {
  position: absolute;
  top: 5px; right: 5px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 100px;
  line-height: 1.2;
}
.cat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--gray-100,#F1F5F9);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--gray-600,#475569);
  transition: background .15s, color .15s;
}
.cat-item:hover .cat-icon,
.cat-item.active .cat-icon {
  background: var(--brand,#E8380D);
  color: #fff;
}
.cat-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-800,#1E293B);
  text-align: center;
  line-height: 1.3;
}
.cat-item.active .cat-name { color: var(--brand,#E8380D); }
.cat-count {
  font-size: 10px;
  color: var(--gray-400,#94A3B8);
}

/* 링크프라이스 배너존 */
.lp-banner-zone {
  background: #fff;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200,#E2E8F0);
}
.banner-zone-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400,#94A3B8);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.lp-banner-placeholder {
  width: 100%; max-width: 728px;
  height: 72px;
  background: #E6F1FB;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #0057A8; font-weight: 500; font-size: 13px;
}

/* ================================================================
   style-banner-fix.css
   기존 style-banner.css 하단에 붙여넣기 (덮어쓰기)
================================================================= */

/* ── 배너 전체 높이 확장 (탭 높이 포함) ─────────────────────── */
.main-banner-wrap {
  height: 460px;   /* 340 → 400 (탭 60px 추가 확보) */
}

/* ── 배너 콘텐츠: 탭 영역 아래로 겹치지 않도록 padding 확대 ── */
.banner-content {
  padding-top: 28px;
  padding-bottom: 90px;  /* 64 → 90 (탭 높이만큼 여백 확보) */
  align-items: center;
}

/* ── 아이콘 비주얼 살짝 위로 올려 탭과 겹침 방지 ─────────────── */
.banner-icon-wrap {
  width: 160px;
  height: 160px;
  margin-bottom: 8px;
}
.banner-icon-wrap .ti {
  font-size: 68px;
}

/* ── 탭 높이 명시 (60px 고정) ─────────────────────────────────── */
.banner-tabs {
  height: 62px;
}
.banner-tab {
  padding: 8px 12px;
  justify-content: center;
}

/* ── 탭 텍스트 말줄임 확실히 처리 ──────────────────────────────── */
.tab-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.tab-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 모바일 대응 ─────────────────────────────────────────────── */
@media(max-width: 768px) {
  .main-banner-wrap { height: 460px; }
  .banner-content   { padding-bottom: 100px; }
  .banner-tabs      { height: 72px; }
  .tab-sub          { display: none; }
}
@media(max-width: 480px) {
  .main-banner-wrap { height: 380px; }
  .banner-content   { padding-bottom: 86px; }
  .banner-tabs      { height: 58px; }
  .banner-tab       { padding: 6px 8px; }
  .tab-title        { font-size: 10px; }
}