/* =============================================================
   공용 바탕의 나머지 조각 — 토스트와 작은 창의 머리.
   시제품에서는 화면 css(shell.css · slip_aux.css)에 살았지만 어느 화면에나
   나오는 것이라 바탕으로 올렸다(atoms.css 의 기준 그대로).
   도움말(?)의 모양은 hint_tooltip.js 가 스스로 주입한다.
   ============================================================= */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 1200; padding: 9px 17px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 12.5px;
  box-shadow: var(--shadow-3); max-width: 88vw;
}
#toast.error { background: var(--danger); }

/* 점검 덮개 — 서버가 점검 중이라 답하면 화면이 굳지 않고 말한다(관문 화면 §5).
   ⛔ 토스트 한 줄로 흘려보내지 마라: 2.6초 뒤 사라지면 왜 아무것도 안 되는지 다시 모른다. */
#maint {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.maint-card {
  max-width: 380px; padding: 20px 22px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow-3);
}
.maint-card b { display: block; font-size: 14px; margin-bottom: 7px; }
.maint-card span { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
/* 점검 중에도 문의 전화가 보인다 — 잠긴 사람에게 남은 길이 그것 하나다. */
.maint-call { display: block; margin-top: 9px; font-style: normal;
  font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* 작은 창의 머리 — 나가는 문 ✕ 는 어느 창에나 오른쪽 위에 있다(AZ.modalHead). */
.blk-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.blk-htxt { min-width: 0; }
.blk-h { font-size: 13px; font-weight: 700; }
.blk-sub { font-size: 11.5px; color: var(--muted); margin: 3px 0 13px; line-height: 1.6; }
.blk-x { flex: none; margin-top: -2px; }