/* ===== 상단 탭 ===== */
.dg-top-tabs{
  padding: 14px 24px;
  border-top: 1px solid var(--stroke);
  background: rgba(2,6,23,.02);
}
.dg-tab-list{
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dg-tab-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  color: var(--muted);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: all .18s ease;
}
.dg-tab-btn:hover{
  background: rgba(25,179,106,.08);
  border-color: rgba(25,179,106,.22);
  color: #0f5132;
}
.dg-tab-btn.active{
  background: rgba(25,179,106,.12);
  border-color: rgba(25,179,106,.30);
  color: #0f5132;
  box-shadow: 0 4px 14px rgba(25,179,106,.15);
}
.dg-tab-btn__icon{
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(25,179,106,.10);
  border: 1px solid rgba(25,179,106,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem;
  color: #0f5132;
  flex-shrink: 0;
}
.dg-tab-btn.active .dg-tab-btn__icon{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 탭 콘텐츠 간격 */
.dg-bici-wrap .tab-content{ margin-top: 24px; }
.dg-bi-wrap,
.dg-character-wrap{ display:flex; flex-direction:column; gap:24px; }

/* 반응형 */
@media (max-width: 768px){
  .dg-top-tabs{ padding: 12px 16px; }
  .dg-tab-btn{ padding: 10px 14px; font-size: .88rem; }
  .dg-tab-btn__text{ display: none; }
  .dg-tab-btn__icon{ width: 36px; height: 36px; font-size: 1rem; }
}