/* Web/MAUI 공유 앱 베이스 스타일 - Blazor 에러 다이얼로그 + 로딩 스피너 + code.
   ServerCssInjector(런타임 주입) 의존을 끊고 정적으로 둔다(폰트 app-fonts.css 와 동일 패턴).
   거의 안 바뀌는 안정 자산이라 라이브 동기화가 불필요하고, dev .localhost DNS/오프라인에 강건하다.
   MAUI 는 csproj 가 Server wwwroot 의 이 파일을 Content Link 로 포함(단일 소스).
   - 레이아웃 리셋(html/body height)과 호스트 셸 스타일은 각 호스트 app.css 에 둔다.
   - FluentUI 기반 리셋은 reboot.css 정적 link 에 둔다. */

/* 오류 표면 색 원칙(tailwind.css 의 .error-boundary-ui 와 동일 팔레트 - 함께 수정할 것):
   예외 상황에는 테마 토큰 시스템(JS)이 죽어 있을 수 있으므로 배경/전경은 고정 팔레트,
   다크는 html[data-fluent-darkmode] 속성 셀렉터로 분기(웹 SSR/MAUI setDarkMode interop 이 렌더 - 토큰 무관 강건),
   버튼만 var(토큰, 기존색) 폴백형으로 브랜드 accent 연동. */
#blazor-error-ui {
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 320px;
  max-width: 60vw;
  padding: 1.5rem;
  background-color: rgb(255, 245, 245);
  color: #1f2937;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 10000;
  display: none; /* 기본은 숨김 */
}

  [data-fluent-darkmode] #blazor-error-ui {
      /* 다크 - 어두운 적색 틴트 표면 + 밝은 전경(라이트의 red-50 틴트와 대응) */
      background-color: #322323;
      color: #f3f4f6;
  }

  #blazor-error-ui .reload {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      background-color: var(--accent-fill-rest, #2563eb);
      color: var(--foreground-on-accent-rest, #ffffff);
      text-decoration: none;
      cursor: pointer;
      user-select: none;
      border: none;
  }

      #blazor-error-ui .reload:hover {
          background-color: var(--accent-fill-hover, #1d4ed8);
      }

      #blazor-error-ui .reload:active {
          background-color: var(--accent-fill-active, #1e40af);
      }

  /* MAUI index.html 의 #blazor-error-ui 마크업은 dismiss(닫기 X) 도 포함하므로 함께 정의한다
     (Server 마크업은 reload 만 - 해당 요소가 없으면 무해). */
  #blazor-error-ui .dismiss {
      cursor: pointer;
      position: absolute;
      right: 0.75rem;
      top: 0.5rem;
  }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

  .blazor-error-boundary::before {
      content: "An error has occurred. "
  }

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

  .loading-progress circle {
      fill: none;
      stroke: #e0e0e0;
      stroke-width: 0.6rem;
      transform-origin: 50% 50%;
      transform: rotate(-90deg);
  }

      .loading-progress circle:last-child {
          stroke: #1b6ec2;
          stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
          transition: stroke-dasharray 0.05s ease-in-out;
      }

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

  .loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
  }

code {
  color: #c02d76;
}