/* ===================================
   Section Labels Styles
   =================================== */

/* === 섹션 라벨 기본 스타일 === */
.section-label {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  z-index: 5 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* === 헤더에서 라벨 숨기기 === */
header.site-header .section-label,
.site-header .section-label,
header .section-label,
header .section-label span,
.site-header .section-label span,
header.site-header .section-label span {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  float: none !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* === 헤더 영역 전체에서 라벨 차단 === */
/* 헤더의 기본 스타일을 방해하지 않도록 제거 */

/* 헤더 내부 섹션 라벨 차단 - 기본 스타일 유지 */
header .section-label,
.site-header .section-label,
header.site-header .section-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* === 전역 라벨 차단 (헤더 영역) === */
/* 헤더의 기본 스타일을 방해하지 않도록 간소화 */
body > header .section-label,
body > .site-header .section-label,
.site-header .section-label,
header.site-header .section-label,
header .section-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* === 헤더 내부 모든 요소에서 라벨 차단 === */
/* 헤더의 기본 스타일을 방해하지 않도록 간소화 */
header * .section-label,
.site-header * .section-label,
header.site-header * .section-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.section-label span {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #999 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 8px 15px !important;
  border-radius: 20px !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.section-label span:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* === 각 섹션별 특별 스타일 === */

/* About 섹션 */
.about .section-label span {
  background: rgba(101, 184, 239, 0.1);
  color: #65b8ef;
  border-color: rgba(101, 184, 239, 0.3);
}

/* Proficiency 섹션 */
.comparison .section-label span {
  background: rgba(255, 107, 107, 0.1) !important;
  color: #ff6b6b !important;
  border-color: rgba(255, 107, 107, 0.3) !important;
  display: block !important;
  visibility: visible !important;
}

/* === Mobile: place labels inside content, top-right of section === */
@media (max-width: 767px) {
  /* 모바일: 섹션 라벨 숨김 */
  .section-label,
  .section-label span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Success 섹션 */
html body .example .section-label,
.example .section-label {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  z-index: 5 !important;
  margin-bottom: 0 !important; /* 절대 위치에서는 마진 제거 */
  text-align: left !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.example .section-label span {
  background: rgba(76, 175, 80, 0.1) !important;
  color: #4caf50 !important;
  border-color: rgba(76, 175, 80, 0.3) !important;
  display: inline-block !important;
  visibility: visible !important;
}

/* Performance 섹션 */
.performance .section-label span {
  background: rgba(156, 39, 176, 0.1);
  color: #9c27b0;
  border-color: rgba(156, 39, 176, 0.3);
}

/* Proficiency 섹션 */
.processor .section-label span {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
  border-color: rgba(255, 152, 0, 0.3);
}

/* Services 섹션 */
.fc-scope .section-label span {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
  border-color: rgba(33, 150, 243, 0.3);
}

/* === 모바일 반응형 === */
@media (max-width: 911px) {
  .section-label {
    top: 10px;
    left: 10px;
  }
  
  .section-label span {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .section-label {
    top: 5px;
    left: 5px;
  }
  
  .section-label span {
    font-size: 0.75rem;
    padding: 5px 10px;
  }
}

/* === 특별한 배경을 가진 섹션들 === */
.hero .section-label span {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.performance .section-label span {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border-color: rgba(0, 0, 0, 0.1);
}

/* === 애니메이션 효과 === */
@keyframes labelFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-label {
  animation: labelFadeIn 0.6s ease-out;
}