@use '../abstracts/variables' as *;

// -----------------------------------------------------------------------------
// Session Timer Component
// 인증 사용자 헤더에 남은 세션 시간을 표시. 만료 임박(<=60s) 시 경고색.
// -----------------------------------------------------------------------------

.session-timer {
  display: inline-flex;
  align-items: center;
  gap: $spacing-xs;
  white-space: nowrap;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  color: $text-gray;

  .session-timer-icon {
    font-size: $font-size-xs;
    color: $text-gray;
  }

  .session-timer-text {
    // 카운트다운 중 폭 흔들림 방지
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;

    &.session-timer-warning {
      color: #e03131;
      font-weight: $font-weight-bold;
    }
  }
}

// -----------------------------------------------------------------------------
// 우측 상단 Float 세션 타이머 위젯
// 데스크톱: 헤더 우측(유저 메뉴 우측)에 상단 정렬로 고정(fixed).
// 모바일: 헤더 우측 햄버거(메뉴 버튼) 바로 왼쪽에 배치.
// -----------------------------------------------------------------------------
.session-float {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

  // 세션 유지 체크박스 (비운영 전용, 조건부 렌더)
  .session-keepalive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding-left: 8px;
    border-left: 1px solid #e0e0e0;
    font-size: $font-size-xs;
    color: $text-gray;
    cursor: pointer;
    white-space: nowrap;

    input {
      margin: 0;
      cursor: pointer;
    }
  }
}

// 모바일: 헤더 우측 햄버거(메뉴 버튼) 바로 왼쪽에 나란히 배치.
// right = 헤더 padding(20px) + 햄버거 폭(~32px) + 간격(~20px) ≈ 72px
@media (max-width: $breakpoint-sm) {
  .session-float {
    top: 12px;
    right: 72px;
    padding: 4px 10px;
  }
}