/* 즉시 적용되는 최소 CSS: auth 전환 전 UI 노출 방지 */
.hidden { display: none; }
html.auth-pending #app { display: none !important; }
html.auth-pending #login-panel { display: none !important; }

/* 초기: 로그인 선호 상태면 로그인 패널을 강제로 표시(FOUC 방지) */
html.prefers-login #login-panel.hidden { display: block !important; }
html.auth-pending.prefers-login #login-panel { display: block !important; }
/* 로그아웃(또는 로그인이 아닐 것으로 추정) 상태에선 햄버거 숨김 */
html.auth-pending.prefers-login #mobile-menu-container { display: none !important; }

/* Global font: Pretendard Variable (Korean-friendly) */
body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans KR', sans-serif;
}

/* 파일명 말줄임 폭 가이드: 모바일은 12ch~60vw, 데스크탑은 20ch 이상 */
.file-name-clip { display: block; min-width: 12ch; max-width: 60vw; }
@media (min-width: 640px) { /* sm breakpoint */
  .file-name-clip { min-width: 20ch; max-width: none; }
}

/* Center login panel on screen when login is preferred */
html.prefers-login main {
  /* Viewport height minus fixed top nav (~pt-14 = 3.5rem) */
  min-height: calc(100vh - 3.5rem);
  display: flex;
  align-items: center;
}
html.prefers-login main > .container {
  width: 100%;
}
html.prefers-login #login-panel {
  margin-left: auto;
  margin-right: auto;
}

/* 파일 목록: 선택모드 진입 힌트 (데스크탑) */
.row-selectable { cursor: pointer; }
.row-selectable:hover { background-color: #fefce8; /* tailwind yellow-50 */ }

/* 선택된 행 표시 */
.row-selected { background-color: #dbeafe; /* tailwind blue-100 */ }
.row-selected:hover { background-color: #bfdbfe; /* tailwind blue-200 */ }

/* 선택 툴바: 모바일에서는 하단 고정 바로 표시 */
@media (max-width: 767px) {
  #selection-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40; /* 상단 네비(z-50)보다만 낮게 */
    margin: 0; /* 컨테이너 여백 제거 */
    border-radius: 0; /* 바 형태 */
    transform: translateY(100%);
    transition: transform 0.2s ease-in-out;
    /* iOS 하단 안전 영역 대응 */
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 8px);
  }

  body.is-selection-on #selection-toolbar {
    transform: translateY(0);
  }

  /* 바가 콘텐츠를 가리지 않도록 하단 여백 확보 */
  body.is-selection-on main {
    /* 대략 바 높이(56~72px) + 안전 영역을 고려한 여유 */
    padding-bottom: 88px;
  }
}

/* 데스크탑: 모바일과 동일하게 하단 고정 바로 표시 */
@media (min-width: 768px) {
  #selection-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40; /* 상단 네비(z-50)보다만 낮게 */
    margin: 0; /* 컨테이너 여백 제거 */
    border-radius: 0; /* 바 형태 */
    transform: translateY(100%);
    transition: transform 0.2s ease-in-out;
    background-color: #f9fafb; /* gray-50 */
    border-top: 1px solid #e5e7eb; /* gray-200 */
    /* 데스크탑에서도 하단 안전영역 대비(문제없지만 통일) */
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 8px);
  }

  body.is-selection-on #selection-toolbar {
    transform: translateY(0);
  }

  /* 바가 콘텐츠를 가리지 않도록 하단 여백 확보 */
  body.is-selection-on main {
    padding-bottom: 88px;
  }
}