/* =========================================================
   TRACKER BAR - Overlay Slots Strip
   ========================================================= */

/* 기본 스타일 (데스크탑) */
.tl-tracker-bar {
  position: fixed;
  z-index: 10000;
  font-family: var(--font-sans);
  pointer-events: none;

  /* Overlay: 화면 하단 좌측부터 2026 버튼 가리기 전까지 */
  left: 1rem;
  bottom: 2rem;
  right: var(--tl-tracker-safe-right, calc(1rem + 5rem + 1rem)); /* JS에서 2026 버튼 기준으로 동적 보정 가능 */
  /* 트랜지션 없이 즉시 표시 */
}

.tl-tracker-slots {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  pointer-events: auto;

  /* 데스크탑 반응형: 공간이 부족하면 JS가 --tl-tracker-scale 값을 내려서 전체를 축소 */
  transform: scale(var(--tl-tracker-scale, 1));
  transform-origin: left bottom;
  will-change: transform;
}

/* 슬롯 기본 스타일 */
.tl-tracker-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: #000000; /* 검은색으로 채움 */
  border: 0; /* 테두리 없음 */
  cursor: pointer;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
  font: inherit;
  color: #000000; /* 검은색 */
  /* 모바일에서 라벨이 잘리지 않도록 */
  overflow: visible;
}

/* 가운데 슬롯들은 가로가 긴 직사각형 */
.tl-tracker-slot:not(.tl-tracker-home):not(.tl-tracker-auth) {
  width: 20px; /* 가로를 더 길게 */
  height: 8px; /* 높이는 유지 */
}

/* Home과 Login/Logout은 정사각형 유지 */
.tl-tracker-slot.tl-tracker-home,
.tl-tracker-slot.tl-tracker-auth {
  width: 24px;
  height: 24px;
}

.tl-tracker-slot:hover {
  background: #000000; /* 검은색 유지 */
}

.tl-tracker-slot:focus-visible {
  outline: 2px solid #000000; /* 검은색 */
  outline-offset: 2px;
}

.tl-tracker-slot[disabled] {
  cursor: default;
  background: #000000; /* 검은색 유지 */
}

.tl-tracker-slot[disabled]:hover {
  opacity: 1; /* disabled hover도 검은색 유지 */
  background: #000000; /* 검은색 유지 */
}

/* active 상태 - 검은색 유지 */
.tl-tracker-slot.is-active {
  opacity: 1; /* active도 검은색 유지 */
  background: #000000; /* 검은색 유지 */
}

/* 더미 슬롯도 검은색으로 표시 */
.tl-tracker-slot.tl-tracker-dummy {
  opacity: 1;
  background: #000000; /* 검은색 */
}

/* 오케스트라 슬롯: 다른 슬롯과 동일한 스타일 */
.tl-tracker-slot.tl-tracker-orchestra {
  background: #000000;
  border: 0;
}

/* 오케스트라 슬롯: ON 상태 (검은색 배경) */
.tl-tracker-slot.tl-tracker-orchestra.is-active {
  background: #000000;
  border: 0;
  opacity: 1;
}

/* 슬롯 박스 (기본 보이는 부분) */
.tl-tracker-slot-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 가운데 슬롯들은 가로가 긴 직사각형 */
.tl-tracker-slot:not(.tl-tracker-home):not(.tl-tracker-auth) .tl-tracker-slot-box {
  width: 20px; /* 가로를 더 길게 */
  height: 8px; /* 높이는 유지 */
}

/* Home과 Login/Logout은 정사각형 유지 */
.tl-tracker-slot.tl-tracker-home .tl-tracker-slot-box,
.tl-tracker-slot.tl-tracker-auth .tl-tracker-slot-box {
  width: 24px;
  height: 24px;
}

/* 라벨 (기본 숨김, hover/click 시 표시) - 긴 화살표 형태 */
.tl-tracker-slot-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10001;
  color: #000000; /* 검은색 */
  /* 텍스트는 화살표 끝에 위치 */
  margin-bottom: 0.5rem;
}

/* 화살표 선 (슬롯 위에서 텍스트까지의 긴 수직선) */
.tl-tracker-slot-label::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3rem; /* 긴 화살표 길이 */
  background: #000000; /* 검은색 */
  z-index: -1;
}

/* hover 시 라벨 표시 (데스크탑) */
@media (hover: hover) {
  .tl-tracker-slot:hover .tl-tracker-slot-label {
    opacity: 1;
  }
}

/* 구획 구분자 (빈 슬롯) */
.tl-tracker-spacer {
  width: clamp(16px, 4vw, 60px);
  height: 24px;
  flex-shrink: 0;
}

  @media (max-width: 1000px) {
/* 모바일에서 All 버튼과 월 버튼들 숨기기 */
.tl-tracker-slot.tl-tracker-expand,
.tl-tracker-slot.tl-tracker-month {
  display: none;
}

/* 모바일에서 All과 월 버튼 사이의 spacer도 숨기기 (필요시) */
.tl-tracker-slots > .tl-tracker-spacer:first-of-type {
  display: none;
}

/* 로그인 페이지에서 로그인 버튼 라벨은 항상 보이도록 */
body.is-login-page .tl-tracker-slot.tl-tracker-auth .tl-tracker-slot-label {
  opacity: 1 !important;
  visibility: visible !important;
}

.tl-tracker-bar {
  /* 모바일: 우측 세로 배치, 스크린 세로 전체 사용 */
  left: auto;
  right: 0.1rem;
  top: 0;
  bottom: 0;
  width: auto;
  height: 100vh;
  max-height: 100vh;
  overflow: visible;
  /* 라벨이 잘리지 않도록 충분한 공간 확보 */
  padding-right: 0;
  /* 라벨이 화면 밖으로 나가지 않도록 */
  clip-path: none;
  contain: none;
}

.tl-tracker-slots {
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 1rem;
  gap: 0.3rem;
  height: 100%;
  max-height: 100vh;
  overflow-y: hidden;
  overflow-x: visible;
  justify-content: flex-start;
  align-items: center;
  /* 라벨이 잘리지 않도록 */
  position: relative;
  /* 라벨이 화면 밖으로 나가지 않도록 충분한 공간 확보 */
  margin-left: 0;
  padding-left: 1rem;
}

.tl-tracker-slot {
  width: 5vw;
  height: 5vw;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
}

/* 모바일에서 Home과 Login/Logout은 정사각형 유지 */
.tl-tracker-slot.tl-tracker-home,
.tl-tracker-slot.tl-tracker-auth {
  width: 5vw;
  height: 5vw;
  min-width: 22px;
  min-height: 22px;
}

/* 모바일에서 가운데 슬롯들은 세로가 긴 직사각형 (비율 반대) - 오케스트라 포함 */
.tl-tracker-slot:not(.tl-tracker-home):not(.tl-tracker-auth) {
  width: 2.5vw;
  height: 5vw;
  min-width: 11px;
  min-height: 22px;
}

/* 모바일에서 오케스트라 슬롯도 다른 가운데 슬롯과 동일한 스타일 (명시적으로) */
.tl-tracker-slot.tl-tracker-orchestra {
  width: 2.5vw;
  height: 5vw;
  min-width: 11px;
  min-height: 22px;
}

/* 모바일에서 Home과 Login/Logout 박스는 정사각형 유지 */
.tl-tracker-slot.tl-tracker-home .tl-tracker-slot-box,
.tl-tracker-slot.tl-tracker-auth .tl-tracker-slot-box {
  width: 5vw;
  height: 5vw;
  min-width: 22px;
  min-height: 22px;
}

/* 모바일에서 가운데 슬롯 박스들은 세로가 긴 직사각형 (비율 반대) - 오케스트라 포함 */
.tl-tracker-slot:not(.tl-tracker-home):not(.tl-tracker-auth) .tl-tracker-slot-box {
  width: 2.5vw;
  height: 5vw;
  min-width: 11px;
  min-height: 22px;
}

/* 모바일에서 오케스트라 슬롯 박스도 다른 가운데 슬롯과 동일 (명시적으로) */
.tl-tracker-slot.tl-tracker-orchestra .tl-tracker-slot-box {
  width: 2.5vw;
  height: 5vw;
  min-width: 11px;
  min-height: 22px;
}

/* 모바일에서 클릭된 슬롯의 라벨 표시 (일시적) */
.tl-tracker-slot:active .tl-tracker-slot-label {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* 모바일에서 라벨이 표시된 상태 클래스 - 텍스트와 라인 모두 표시 */
.tl-tracker-slot.show-label .tl-tracker-slot-label {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* 모바일에서 라벨이 표시된 상태일 때 라인(::before)도 함께 표시 */
.tl-tracker-slot.show-label .tl-tracker-slot-label::before {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* 모바일에서 active 상태일 때도 라벨 표시 (중복 제거 - 위에서 이미 정의됨) */

/* 모바일에서 로그인 페이지의 로그인 버튼 라벨은 항상 보이도록 (모바일 미디어 쿼리 내) */
body.is-login-page .tl-tracker-slot.tl-tracker-auth .tl-tracker-slot-label {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* 모바일 라벨: 슬롯 좌측으로 긴 수평선 화살표 */
/* 순서: 텍스트(왼쪽) - 라인(중간) - 슬롯박스(오른쪽) */
.tl-tracker-slot-label {
  position: absolute;
  bottom: 50%;
  right: calc(100% + 1.5rem);
  left: auto;
  top: auto;
  transform: translateY(50%);
  margin-bottom: 0;
  margin-right: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  width: max-content;
  min-width: max-content;
  max-width: calc(100vw - 2rem);
  z-index: 10002;
  font-size: 0.75rem;
  font-weight: 600;
  color: #000000 !important;
  background-color: transparent;
  pointer-events: none;
  word-break: keep-all;
  /* 라벨이 화면 밖으로 나가지 않도록 - 슬롯의 좌측 끝부터 시작하되 화면 밖으로 나가지 않음 */
  text-align: right;
  /* 모바일에서 기본적으로 라벨은 숨김, show-label 클래스가 추가되면 표시 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  /* 텍스트가 확실히 보이도록 */
  display: block;
  line-height: 1;
}

/* 모바일에서 로그인 페이지의 로그인 버튼 라벨은 항상 보이도록 (더 구체적인 선택자) */
body.is-login-page .tl-tracker-slot.tl-tracker-auth .tl-tracker-slot-label {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}


/* 모바일 화살표 선: 슬롯 좌측에서 텍스트까지의 긴 수평선 */
/* 순서: 텍스트(왼쪽) - 라인(중간) - 슬롯박스(오른쪽) */
.tl-tracker-slot-label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.5rem; /* 화살표 길이 - 라벨과 슬롯 사이 간격 */
  left: auto;
  width: 1.5rem; /* 화살표 길이 */
  height: 1px;
  transform: translateY(-50%);
  background: #000000; /* 검은색 */
  z-index: 10001; /* 텍스트보다는 낮지만 슬롯박스보다는 높게 */
  /* 기본적으로 숨김, show-label 클래스가 추가되면 표시 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* 모바일 spacer */
.tl-tracker-spacer {
  width: 4vw;
  min-width: 15px;
  height: 4vw;
  min-height: 15px;
}
}