/*
[FILE]
c:/dolcu/hub/main/modules/hub_categoryitems/hub_categoryitems.css

[ROLE]
허브 메인 업태별 종목 아이콘 트랙 전용 CSS
- 횡스크롤 트랙 구성
- 종목 아이콘 버튼 기본 스타일
- 인디게이트 도트 표시
- item_styles CSS 변수 계약 소비 (preview-icon-circle)

[FUTURE NOTES]
1) 업태별 트랙 배경색은 .category-group[data-category="xx"] 로 분기 가능
2) item_styles 변수 주입은 #hub-categoryitems 에서 수행
3) 반응형 간격/사이즈 튜닝은 이 파일에서만 조정
*/

#hub-categoryitems {
  display: block;
}

.category-group {
  margin-bottom: 10px;
}

.category-title {
  font-size: 15px;
  font-weight: 700;
  padding: 10px 14px 0px 14px;
  color: #111;
}

.category-track {
  display: flex;
  gap: 15px;
  padding: 0 0 0 15px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.category-track::-webkit-scrollbar {
  display: none;
}



/* =====================================
   허브 종목 아이콘 버튼 공통
===================================== */
.hub-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  background: none;
  border: none;
  padding: 0px 0px;

  cursor: pointer;
}

/* =====================================
   종목명 텍스트
   - 기본 1줄
   - 말줄임 처리
===================================== */
.hub-item-name {
  margin-top: 6px;

  max-width: 72px;              /* 아이콘 버튼 폭 기준 */
  font-size: 12px;
  font-weight: 500;
  color: #333;
  line-height: 1.2;

  text-align: center;

  /* 말줄임 핵심 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================
   (옵션) 터치 피드백
===================================== */
.hub-category-item:active .hub-item-name {
  color: #000;
}


/* ✅ item_styles 계약 선택자 */
.preview-icon-circle {
  width: var(--item-circle-size, 56px);
  height: var(--item-circle-size, 56px);
  border-radius: 50%;
  background: var(--item-bg, transparent);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
}

.preview-icon-circle img {
  width: var(--item-icon-size, 48px);
  height: var(--item-icon-size, 48px);
  object-fit: contain;
  display: block;
}

/* ✅ 도트: “시작 위치는 왼쪽” */
.category-dots {
  display: flex;
  justify-content: flex-start; /* 🔥 오른쪽 → 왼쪽으로 변경 */
  gap: 4px;
  padding: 6px 14px 0 14px;
}

.category-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ccc;
}

.category-dot.active {
  background: #111;
}

/* ===============================
   (예비) 업태별 트랙 배경 분기용
   - 현재 미사용
=============================== */
/*
.category-group[data-category="00"] .category-track { }
.category-group[data-category="01"] .category-track { }
.category-group[data-category="02"] .category-track { }
.category-group[data-category="03"] .category-track { }
.category-group[data-category="04"] .category-track { }
.category-group[data-category="05"] .category-track { }
*/