/* ============================
   ⭐ 탭콘텐츠(배너)
============================ */
.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-pane.active {
  display: block;
}

.tab-banner-content {
  margin-top: 16px; 
  margin-bottom: 16px; 
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================
   ⭐ 탭버튼
============================ */
.tab-btn {
  padding: 12px 18px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  min-width: 140px;
  color: #fff;
  background-color: transparent;
  transition: 0.2s ease;
}

/* 탭별 색상 */
.tab-blue-btn { background-color: #3b82f6; }
.tab-green-btn { background-color: #10b981; }
.tab-purple-btn { background-color: #8b5cf6; }
.tab-orange-btn { background-color: #f97316; }
.tab-gray-btn { background-color: #4b5563; }

/* ⭐ active 버튼 — 대형 포털 방식 */
.tab-btn.active {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
}

.banner-box {
  padding: 24px 28px;
  border-radius: 16px;
  background-color: #ffffff;   /* 내부는 흰색 */
  color: #111827;
  border: 3px solid transparent; /* 테두리만 색상 적용 */
}

/* 탭 버튼 색상과 정확히 동일하게 매칭 */
.banner-blue   { border-color: #3b82f6; }
.banner-green  { border-color: #10b981; }
.banner-purple { border-color: #8b5cf6; }
.banner-orange { border-color: #f97316; }
.banner-gray   { border-color: #4b5563; }

/* ⭐ 탭 메뉴 — 모바일 드래그 스크롤 지원 */
.tab-menu {
  display: flex;
  gap: 10px;
  overflow-x: auto;              /* 가로 스크롤 활성화 */
  white-space: nowrap;           /* 줄바꿈 방지 */
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  scrollbar-width: none;         /* Firefox 스크롤바 숨김 */
}

.tab-menu::-webkit-scrollbar {
  display: none;                 /* Chrome/Safari 스크롤바 숨김 */
}

/* ⭐ 탭 버튼 — 드래그 가능하도록 고정폭 */
.tab-btn {
  flex: 0 0 auto;                /* 버튼이 줄바꿈되지 않도록 */
  padding: 14px 18px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  color: #fff;
  border-radius: 8px;
}

/* 배너 전체 클릭 가능 표시 */
.banner-box {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover 시 살짝 올라오는 효과 */
.banner-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 클릭 시 살짝 눌리는 효과 */
.banner-box:active {
  transform: scale(0.97);
}


@media (min-width: 900px) {
  .tab-menu {
    justify-content: space-between;
    overflow-x: hidden; /* PC에서는 스크롤 제거 */
  }

  .tab-btn {
    flex: 1; /* PC에서는 버튼 폭 동일하게 */
  }
}

.banner-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: #2684ff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.banner-detail-link::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
}

.banner-detail-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}