/* 조회 대기 덮개.
 *
 * 보고서와 관리자 조회는 페이지를 통째로 다시 받는다.
 * 느린 발전소에서 아무 반응이 없어 보이던 것을 로컬 프로그램과 같은 문구로 덮는다.
 * 마크업은 report-loading.js 가 만들고 여기서는 모양만 정한다.
 *
 * 이 파일을 따로 둔 이유: 처음에는 monitoring-index.css 에 넣었는데
 * 관리자 화면은 그 파일을 읽지 않아(admin-chrome.css / Admin.css 만 읽는다)
 * 덮개가 스타일 없이 맨 글자로 나왔다.
 * 스크립트와 짝이 되도록 _Layout 에서 항상 함께 읽는다. */
.report-loading {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 10, 20, .72);
  backdrop-filter: blur(2px);
}

.report-loading.is-active {
  display: flex;
}

.report-loading__box {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 28px 48px;
  text-align: center;
}

.report-loading__title {
  color: #00FFFF;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
}

.report-loading__detail {
  color: #c7d4e4;
  font-size: 15px;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .report-loading__title {
    font-size: 22px;
  }

  .report-loading__detail {
    font-size: 13px;
  }
}