@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;
  // body > * { width: 100% } 전역 리셋이 body 직계 자식인 이 플로팅 위젯에도 걸려
  // 뷰포트 전체 폭으로 늘어나는 문제 방지 (fixed 위젯은 콘텐츠 크기만큼만 차지해야 함)
  width: max-content;
  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;
    }
  }
}

// 가로 여유가 있을 때만 노출.
// 헤더 .container(max-width:1280px, 중앙정렬)의 우측 여백에 위젯(폭 ~200px)이 들어갈 만큼
// 넓은 화면(약 1700px 이상)에서만 표시 → 그 외에는 헤더 우측 메뉴(사용자명·로그아웃·마이페이지)를 가리므로 숨김.
// (PC 전용: 모바일 ≤768px 도 당연히 숨김)
@media (max-width: 1699px) {
  .session-float {
    display: none;
  }
}