/* ── 토큰 ──────────────────────────────────────────────────────────────
 * 색 · 반경 · 글자 · 여백이 정해지는 유일한 자리다(T-024 · ADR-008). 아래 규칙과 razor 에는 색 값을 쓰지 않는다.
 * 회색 · 상태 · 크기 값은 Medmap 어드민(`app.css` · T-015~T-020)에서, 브랜드 색은 Vi3w Set B(메모리 `brand-identity-vi3w`)에서 왔다.
 */
:root {
  /* 글자 — `--text-faint` 는 대비 2.9 라 글자에 쓰지 않는다(아이콘 · 장식만). */
  --text: #2b313b;
  --text-h: #0f1420;
  --text-muted: #667085;
  --text-faint: #98a2b3;

  /* 면 세 단 — 바탕 · 면 · 면-2(사이드바 · 표 머리글 · 거르개 줄 · 호버). */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --code-bg: #f2f4f7;
  --shadow-card: rgba(16, 24, 40, 0.04) 0 1px 2px, rgba(16, 24, 40, 0.03) 0 1px 3px;
  --border-card: rgba(16, 24, 40, 0.08);

  /*
   * 브랜드 — Vi3w Set B 그대로다. 새 색을 만들지 않는다.
   * 🔴 `#458b1a` 는 작은 글자에 쓰지 않는다 — 흰 바탕 4.23:1 · 사이드바 4.02:1 로 AA(4.5:1)에 못 미친다.
   *    녹색은 면 · 아이콘 · 테 · 단추에만 쓰고, 녹색 면 위 글자는 `--brand-ink`(진한 색)다.
   */
  --brand: #76be2e;
  --brand-strong: #458b1a;
  --brand-lime: #b9f083;
  --brand-ink: #09090b;
  --brand-bg: rgba(118, 190, 46, 0.14);
  --brand-ring: rgba(118, 190, 46, 0.35);
  /* 렌즈 코어색 — 링크와 「진행」 상태. 흰 바탕 8.9:1. */
  --brand-deep: #0d4e74;
  --deep-bg: rgba(13, 78, 116, 0.08);
  --deep-border: rgba(13, 78, 116, 0.3);
  /* 어두운 면(위험 단추 · 토스트) 위 글자. */
  --on-dark: #ffffff;

  /* 상태 — 흰 바탕 · 연한 면 위 둘 다 4.5:1 을 넘는다(Medmap 실측). */
  --danger: #b42318;
  --danger-hover: #991e14;
  --danger-bg: rgba(180, 35, 24, 0.08);
  --danger-border: rgba(180, 35, 24, 0.3);
  --warn: #b54708;
  --warn-bg: rgba(234, 128, 16, 0.14);
  --warn-border: rgba(234, 128, 16, 0.4);
  --ok: #087443;
  --ok-bg: rgba(8, 116, 67, 0.1);
  /* 종류(상태와 다른 축) — LTD · staff. */
  --violet: #6941c6;
  --violet-bg: rgba(105, 65, 198, 0.1);

  /* 반경 세 단 — 컨트롤 · 작은 컨트롤 · 카드 + 알약. */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-card: 10px;
  --radius-pill: 999px;

  /* 글자 8단 · 여백 7단(px 고정 — 루트가 고정이라 rem 이 주는 것이 없다). */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Pretendard 는 jsDelivr `v1.3.9` 고정(`App.razor`). 못 받으면 다음 글꼴로 떨어지고 화면은 그대로 뜬다. */
  --sans: 'Pretendard Variable', Pretendard, system-ui, 'Segoe UI', 'Malgun Gothic', Roboto, sans-serif;
  --logo: 'Space Grotesk', 'Pretendard Variable', system-ui, sans-serif;

  color-scheme: light only;
}

/* 로고 글자 전용 — 서비스 웹과 같은 Space Grotesk 700 라틴 부분(12.8KB). */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-700-latin.woff2') format('woff2');
}

/* ── 제목 — 굵기 4단: 400 본문 · 500 이름·값 · 600 영역 제목·머리글 · 700 화면 제목·큰 숫자 ── */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.2px;
}

h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.4px;
}

h2 {
  font-size: var(--fs-lg);
}

h3 {
  font-size: var(--fs-base);
}

/* 이동 뒤 초점이 제목에 온다(`FocusOnNavigate`) — 테를 그리지 않는다. */
h1:focus {
  outline: none;
}

/* 화면 제목 아래 설명 한 줄. */
.page-desc {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 64rem;
}

/* ── 로고 ──────────────────────────────────────────────────────────────
 * 서비스 웹 `Logo.tsx` 와 같은 녹색 가로 그라데이션 워드마크 + 「관리자」.
 * ⚠ 로그인 화면도 쓰므로 격리 CSS(NavMenu.razor.css)가 아니라 여기 둔다.
 */
.brand-logo {
  display: inline-block;
  font-family: var(--logo);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.3px;
  color: transparent;
  background-image: linear-gradient(90deg, var(--brand-lime), var(--brand), var(--brand-strong));
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-sub {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-md);
  white-space: nowrap;
}

/* ── 상태 ──────────────────────────────────────────────────────────────
 * 변종 넷 + 종류색 하나. 「진행」은 렌즈 코어색이다 — 「완료」의 녹색과 겹치지 않게.
 * 빨강은 정말 나쁜 것(실패)에만 쓴다.
 */
.badge-progress { color: var(--brand-deep); background: var(--deep-bg); }
.badge-ok { color: var(--ok); background: var(--ok-bg); }
.badge-warn { color: var(--warn); background: var(--warn-bg); }
.badge-danger { color: var(--danger); background: var(--danger-bg); }
.badge-kind { color: var(--violet); background: var(--violet-bg); }

/* 평상 상태는 알약이 아니라 회색 점 + 흐린 글자다 — 줄마다 선 알약은 아무것도 가르지 않는다. */
.state-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.state-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}

/* ── 로그인 계열 카드 ────────────────────────────────────────────────── */
.auth-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.auth-card {
  width: 100%;
  max-width: 380px;
}

.auth-body {
  padding: var(--sp-6);
}

@media (max-width: 640px) {
  .auth-body {
    padding: var(--sp-5);
  }
}

/* 간격은 위 마진으로만 준다 — 머리 → 폼 32 · 칸 사이 24 · 라벨 → 칸 8 · 마지막 칸 → 단추 32. */
.auth-body > * + *,
.auth-body form > * + * {
  margin-top: var(--sp-5);
}

/* `EditForm` 이 폼 맨 앞에 숨은 입력(`_handler`)을 그린다 — 첫 보이는 칸이 둘째가 되어 마진을 받지 않게. */
.auth-body form > input[type='hidden'] + * {
  margin-top: 0;
}

.auth-body > .auth-head + *,
.auth-body form > button {
  margin-top: var(--sp-6);
}

.auth-body .form-label {
  margin-bottom: var(--sp-2);
}

.auth-head {
  text-align: center;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-base);
}

.auth-brand .brand-logo {
  font-size: 28px;
}

.auth-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  text-align: center;
}

.auth-sub {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-align: center;
}

.auth-foot {
  font-size: var(--fs-md);
  text-align: center;
}

/* 로그인 · 비밀번호 변경의 오류 · 완료 줄. 🔴 클래스 이름이 계약이다 — `admin-deploy` 의 DB 왕복 스모크(`login-error`)와
   `LabChure.Admin.Tests`(`login-error` · `pw-error`)가 이 이름으로 찾는다. 모양은 `.alert` 가 준다. */
.login-error,
.pw-error,
.pw-ok {
  margin-bottom: 0;
}

/* ── 영역 사이의 리듬 ─────────────────────────────────────────────────
 * 부모가 간격을 준다 — 블록 사이 24 · 제목 뒤 설명 8 · 새 영역 제목 앞 32 · 영역 제목과 내용 12.
 */
article.content > * + * {
  margin-top: var(--sp-5);
}

article.content > h1 + .page-desc {
  margin-top: var(--sp-2);
}

article.content > * + h2 {
  margin-top: var(--sp-6);
}

/* 격자 줄은 칸마다 위 틈(--gy)을 갖는다 — 그만큼 빼야 보이는 간격이 24 가 된다(안 빼면 40). */
article.content > * + .row {
  margin-top: calc(var(--sp-5) - var(--gy));
}

article.content > h2 + * {
  margin-top: var(--sp-3);
}

/* ── 카드 · 폼 안의 리듬 — 바깥과 같은 모양, 한 단 좁게(블록 16 · 제목과 내용 12 · 라벨과 칸 8) ── */
:is(.card-body, .form-block) > * + * {
  margin-top: var(--sp-4);
}

:is(.card-body, .form-block) > h2 + * {
  margin-top: var(--sp-3);
}

/* 카드 안 격자 줄 — 칸마다 위 틈(--gy)을 갖는다. 그만큼 빼야 보이는 간격이 리듬 값(16 · 제목 뒤 12)이 된다. */
:is(.card-body, .form-block) > * + .row {
  margin-top: calc(var(--sp-4) - var(--gy));
}

:is(.card-body, .form-block) > h2 + .row {
  margin-top: calc(var(--sp-3) - var(--gy));
}

.field > .form-label {
  display: block;
  margin-bottom: var(--sp-2);
}

.field > .form-text {
  display: block;
  margin-top: var(--sp-2);
}

/* 칸 아래 입력 오류 한 줄 — 주황(흰 바탕 5.1:1). */
.field > .field-error {
  color: var(--warn);
}

/* 날짜 칸 옆의 기간 단추(90일 · 12개월). */
.field-presets {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ── 목록 카드 — 거르개(머리) · 표(몸) · 쪽넘김(발)을 한 면에 ──────────── */
.list-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.list-card > .table-wrap {
  background: transparent;
  border-radius: 0;
  padding-block: 0;
}

.list-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.list-card-title {
  font-size: var(--fs-base);
  font-weight: 600;
}

.list-card-note {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.list-card-search {
  flex: 0 1 20rem;
  min-width: 12rem;
}

.list-card-filter {
  flex: 0 0 11rem;
}

.list-card-foot {
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.pager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pager-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.pager-size-label {
  margin: 0;
  white-space: nowrap;
}

.pager-size {
  width: 6.5rem;
}

/* ── 표 ────────────────────────────────────────────────────────────────
 * 13px · 줄 41px(28px 단추 + 여백 12 + 선 1) · 흐린 머리글 띠 · 표 안에서 스크롤(가로 막대가 늘 화면 안에 온다).
 * 넘치면 카드 안에서만 민다 — `main { min-width: 0 }`(MainLayout)이 페이지가 밀리는 것을 막는다.
 */
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 16rem);
  background: var(--surface);
  border-radius: var(--radius-card);
}

/* 키보드로도 표를 민다 — 스크롤 영역에 초점이 들어가야 화살표 키로 움직인다(axe `scrollable-region-focusable`).
   razor 가 `tabindex="0"` · `role="region"` · 이름을 준다. 테는 안쪽에 그린다 — 카드 모서리에서 잘리지 않게. */
.table-wrap:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: -2px;
}

/* 막대를 직접 그린다 — 크로뮴 기본 막대는 겹쳐 떠서 손을 올리기 전엔 안 보인다.
   ⛔ `scrollbar-width` 를 함께 쓰면 크로뮴이 아래 규칙을 통째로 무시한다(Medmap 실측). */
.table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid var(--surface);
  border-radius: 5px;
}

.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

table.data > thead > tr > th,
table.data > tbody > tr > td {
  padding: 6px var(--sp-3);
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

/* 머리글은 작고 흐리고 면-2 띠 위에 선다. `thead` 가 아니라 `th` 에 sticky 를 준다(collapse 표에서는 th 만 먹는다). */
table.data > thead > tr > th {
  height: 36px;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  letter-spacing: 0.01em;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.data > thead > tr > th.text-end {
  text-align: right;
}

table.data > tbody > tr:last-child > * {
  border-bottom: 0;
}

table.data.hover > tbody > tr:hover > * {
  background: var(--surface-2);
}

table.data > thead > tr > :first-child,
table.data > tbody > tr > :first-child {
  padding-left: var(--sp-4);
}

table.data > thead > tr > :last-child,
table.data > tbody > tr > :last-child {
  padding-right: var(--sp-4);
}

/* 한 칸이 표를 밀어내지 않게 말줄임 — 전문은 `title` 로 본다. */
table.data > tbody > tr > td {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 줄의 이름 칸 — 진한 글자 500. */
table.data .cell-title {
  color: var(--text-h);
  font-weight: 500;
}

/* 유료 플랜 이름 — 종류라 알약 없이 글자로(Free 는 흐리게 · LTD 는 보라 알약 — `PlanName`). */
.plan-name {
  color: var(--text-h);
  font-weight: 500;
}

/* 이름 아래 한 줄(slug · 참조 · 처리 이력). */
.cell-sub {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 오른쪽 정렬 칸 바로 다음 칸은 벌린다 — 숫자와 다음 글자가 한 낱말처럼 붙지 않게. */
table.data .text-end + *:not([data-actions]) {
  padding-left: var(--sp-4);
}

/* ── 줄 끝 작업 칸 — 표가 넘쳐도 오른쪽에 남는다. 고정 칸은 이것 하나뿐이다(Medmap 이 첫 칸 고정을 되돌렸다). ── */
table.data [data-actions] {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 1%;
  text-align: right;
  overflow: visible;
}

table.data > thead > tr > th[data-actions] {
  z-index: 3;
}

table.data > tbody > tr > td:has(+ td[data-actions]),
table.data > thead > tr > th:has(+ th[data-actions]) {
  padding-right: var(--sp-4);
}

table.data.hover > tbody > tr:hover > [data-actions] {
  background: var(--surface-2);
}

/* 셀 box-shadow 는 collapse 표에서 무시된다 — 칸 안에 선을 세우고 거기에 그림자를 건다. */
table.data [data-actions]::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 1px;
  background: var(--border);
  box-shadow: -6px 0 10px -4px rgb(0 0 0 / 22%);
  transition: box-shadow 120ms ease;
}

/* 끝까지 밀었으면(또는 넘치지 않으면) 그림자를 거둔다 — `js/table-scroll.js` 가 표식을 붙인다. */
.table-wrap[data-at-end] table.data [data-actions]::after {
  box-shadow: none;
}

.row-actions {
  display: inline-flex;
  gap: 2px;
}

/* 줄 안 단추는 28×28 그림만 — 글자는 `clip-path` 로 눈에만 숨겨 읽어 주는 프로그램 · 시험은 이름으로 찾는다. */
table.data [data-actions] .btn:has(.icon) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

table.data [data-actions] .btn:has(.icon) {
  min-height: 28px;
  min-width: 28px;
  padding-inline: 6px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

table.data [data-actions] .btn:has(.icon):hover:not(:disabled) {
  background: var(--code-bg);
  color: var(--text-h);
}

/* 위험한 동작은 손을 올렸을 때만 빨강으로 답한다 — 평소에 빨간 단추를 늘어놓지 않는다. */
table.data [data-actions] .btn.is-danger:has(.icon):hover:not(:disabled) {
  background: var(--danger-bg);
  color: var(--danger);
}

/* 표 안 링크 · 작은 누를 자리 24px(WCAG 2.2 AA 2.5.8). */
table.data a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-h);
  font-weight: 500;
}

/* ── 빈 목록 — 그림 · 왜 비었는지 · 다음에 할 것 ─────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--code-bg);
  color: var(--text-muted);
  font-size: 18px;
}

.empty-state-message {
  margin: 0;
  color: var(--text-muted);
  max-width: 32rem;
}

.empty-state-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 표 껍데기(목록이 오기 전) — 자료처럼 진하지 않게 옅게 ─────────────── */
.table-skeleton .placeholder {
  opacity: 0.22;
}

.table-skeleton thead .placeholder {
  height: 0.6rem;
  opacity: 0.14;
}

/* ── 토스트 — 성공만. 오른쪽 아래 · 어두운 면 · 4초 ──────────────────── */
.toast-host {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 14rem;
  max-width: 28rem;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--text-h);
  color: var(--on-dark);
  font-size: var(--fs-md);
  box-shadow: 0 6px 18px rgb(0 0 0 / 22%);
  pointer-events: auto;
}

.toast-item .icon {
  flex: 0 0 auto;
  color: var(--brand);
}

.toast-close {
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  opacity: 0.75;
}

.toast-close:hover {
  opacity: 1;
}

/* ── 확인 상자 — 네이티브 `<dialog>`(포커스 가두기 · Esc 는 브라우저 기본) ── */
.confirm-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(16 24 40 / 18%);
}

/* 🔴 화면 가운데 — 확인 상자는 화면(`article.content`)의 자식이라 영역 리듬(`> * + *` 위 마진 24)이 브라우저 기본
   `margin: auto` 를 덮어 위쪽에 붙었다(2026-09-29 로컬 실측). 특이도를 한 단 올려 되돌린다. */
dialog.confirm-dialog[open] {
  margin: auto;
}

.confirm-dialog::backdrop {
  background: rgb(16 24 40 / 35%);
}

.confirm-title {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.confirm-message {
  margin-top: var(--sp-2);
  line-height: 1.6;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* ── 대시보드 숫자 띠 — 카드 나열 대신 한 면에 칸 여섯, 세로선으로 가른다 ── */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--surface);
  overflow: hidden;
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px var(--sp-4);
  border-right: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.home-card:last-child {
  border-right: 0;
}

a.home-card:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.home-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.home-card-label .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-strong);
}

.home-card-count {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--text-h);
  font-variant-numeric: tabular-nums;
}

/* ── 검증 · 오류 띠 ─────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--ok);
}

.invalid {
  outline: 1px solid var(--danger);
}

.validation-message {
  color: var(--danger);
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  color: var(--text-h);
  /* 반투명 주의 면을 흰 면 위에 겹친다 — 아래 화면이 비치지 않게. */
  background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--surface);
  box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
}

#blazor-error-ui .reload {
  margin-left: var(--sp-2);
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
}