/**
 * 학습지원센터 탭 네비게이션 - V3
 * Path: /WEB-INF/views/learningcenter/learningcenter_tabs.jsp
 */

/* ============================================
   탭 래퍼
   ============================================ */

.learningcenter-tabs-wrapper {
  margin-bottom: var(--edu-spacing-8, 32px);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   페이지 헤더
   ============================================ */

.learningcenter-header {
  text-align: center;
  padding: var(--edu-spacing-6, 24px) 0 var(--edu-spacing-6, 24px);
}

.learningcenter-title {
  font-size: var(--edu-text-3xl, 1.875rem);
  font-weight: var(--edu-font-bold, 700);
  color: var(--edu-neutral-900, #111827);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ============================================
   탭 네비게이션 (Segmented Control Style)
   ============================================ */

.learningcenter-tabs {
  list-style: none;
  padding: 6px;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  background: var(--edu-neutral-100, #F3F4F6);
  border-radius: 12px;
  box-sizing: border-box;
}

.learningcenter-tabs li {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}

.learningcenter-tabs li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--edu-spacing-3, 12px) var(--edu-spacing-2, 8px);
  text-align: center;
  text-decoration: none;
  color: var(--edu-neutral-600, #4B5563);
  background: transparent;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: var(--edu-font-medium, 500);
  font-size: var(--edu-text-base, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learningcenter-tabs li a:hover {
  color: var(--edu-neutral-900, #111827);
  background: var(--edu-neutral-200, #E5E7EB);
}

.learningcenter-tabs li.active a {
  color: var(--edu-primary-700, #1D4ED8);
  background: #ffffff;
  font-weight: var(--edu-font-bold, 700);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ============================================
   반응형 - 모바일
   ============================================ */

@media (max-width: 768px) {
  .learningcenter-header {
    padding: var(--edu-spacing-5, 20px) 0 var(--edu-spacing-4, 16px);
  }

  .learningcenter-title {
    font-size: var(--edu-text-2xl, 1.5rem);
  }

  .learningcenter-tabs {
    flex-wrap: wrap;
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: var(--edu-spacing-2, 8px);
  }

  .learningcenter-tabs li {
    flex: 0 0 calc(50% - 4px);
  }

  .learningcenter-tabs li a {
    background: var(--edu-neutral-50, #F9FAFB);
    border: 1px solid var(--edu-neutral-200, #E5E7EB);
    border-radius: 8px;
    padding: var(--edu-spacing-3, 12px) var(--edu-spacing-2, 8px);
    font-size: var(--edu-text-sm, 0.875rem);
    min-height: 44px;
    color: var(--edu-neutral-700, #374151);
  }

  .learningcenter-tabs li a:hover {
    background: var(--edu-neutral-100, #F3F4F6);
    border-color: var(--edu-neutral-300, #D1D5DB);
  }

  .learningcenter-tabs li.active a {
    background: var(--edu-primary-50, #EFF6FF);
    border-color: var(--edu-primary-300, #93C5FD);
    color: var(--edu-primary-700, #1D4ED8);
    box-shadow: none;
  }
}