/* =========================================
   1. 전체 레이아웃 및 폰트 설정 (배경 확장 포함)
   ========================================= */
.tech-stack-section {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', sans-serif;
  padding: 80px 20px; /* 위아래 여백을 넉넉히 주어 섹션 구분감 강화 */
  max-width: 1000px; /* 내부 콘텐츠 최대 너비 */
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 화면 전체 너비(100vw)로 은은한 배경색 깔기 */
.tech-stack-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #f4f7fa; /* 은은한 블루-그레이 톤 배경 */
  z-index: -1;
}

/* =========================================
   2. 상단 타이틀 뱃지 (Tech Stack)
   ========================================= */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.badge {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  background-color: #ffffff;
  color: #2563eb;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* =========================================
   3. 카테고리 그리드 및 투명 박스 (Glassmorphism)
   ========================================= */
.tech-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 30px;
}

.tech-box {
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tech-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* 타이틀 글자색 강제 변경 (우선순위 최상위) */
.tech-stack-section .tech-category-grid .tech-box .box-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #8a5a44 !important; /* 👈 완전 블랙이 아닌, 부드럽고 따뜻한 모카 브라운 */
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(138, 90, 68, 0.2) !important; /* 밑줄도 같은 브라운 톤으로 */
}

/* 카테고리별 파스텔톤 배경색 */
.box-backend { background-color: rgba(235, 245, 255, 0.65); border: 1px solid rgba(200, 225, 255, 0.8); }
.box-data    { background-color: rgba(235, 250, 240, 0.65); border: 1px solid rgba(200, 240, 215, 0.8); }
.box-infra   { background-color: rgba(245, 240, 255, 0.65); border: 1px solid rgba(225, 215, 255, 0.8); }
.box-tools   { background-color: rgba(255, 248, 235, 0.65); border: 1px solid rgba(255, 235, 200, 0.8); }

/* =========================================
   4. 알약(Pill) 형태 기술 뱃지 (2열 배치 & 삐져나옴 방지)
   ========================================= */
.badge-group {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 무조건 2열 배치 */
  gap: 10px !important;
  justify-items: start !important;
  width: 100% !important;
}

.tech-badge {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px !important;
  padding: 6px 10px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  gap: 6px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  /* 박스 바깥으로 삐져나가는 것 방지 */
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.tech-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.tech-emoji {
  font-size: 1rem !important;
  line-height: 1;
}

.tech-stack-section .tech-category-grid .tech-box .tech-badge .tech-name {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #8c7a6e !important; /* 👈 기존 차가운 회색(#374151)에서 따뜻한 코코아 브라운으로 변경 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================
   5. 5단 도트(점) 숙련도 표시기
   ========================================= */
.tech-dots {
  display: flex !important;
  gap: 3px !important;
  align-items: center !important;
  margin-left: 2px !important;
}

.dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important; /* 좁은 공간에서도 도트가 찌그러지지 않게 고정 */
  border-radius: 50%;
  background-color: #e2e8f0;
}

.dot.filled {
  background-color: #a855f7; /* 채워진 점 색상 (보라색) */
}