/* 알림 — 화면 오른쪽 아래. 제작이 도는 가운데를 가리지 않는다. */

.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 36px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  border-radius: 8px;
  background: var(--raise);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: toast-in .18s ease-out;
}

.toast.ok    { border-left-color: var(--ok); }
.toast.warn  { border-left-color: var(--human); }
.toast.error { border-left-color: var(--danger); }

.toast .body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.toast b { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }

/* 제목 줄 오른쪽에 뜬 시각. 읽을 것은 제목이므로 작고 흐리게.
   `.head` 로 지었더니 단계 화면의 `body.stage-page .head`(아래 여백 18px)가 이겼다. */
.toast .toast-top { display: flex; align-items: baseline; gap: 10px; }
.toast .toast-top b { flex: 1; min-width: 0; }
.toast .ago {
  flex: none; font-size: 11.5px; color: var(--dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.toast span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.toast .go {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--human);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toast .go:hover { border-bottom-color: var(--human); }
/* 되돌리기는 단추다. 링크와 같은 모양이어야 같은 자리로 읽힌다. */
.toast button.go { padding: 0; background: none; cursor: pointer; }
.toast button.go:disabled { opacity: .5; cursor: default; }

.toast .x {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.toast .x:hover { background: var(--hover); color: var(--ink); }

/* 천천히 흐려진 뒤(.out, 700ms) 자리를 접는다(.gone, 240ms). toast.js 의 FADE_MS·FOLD_MS 와 같다. */
.toast.out { opacity: 0; transform: translateX(6px);
  transition: opacity .7s ease, transform .7s ease; }
.toast.gone { overflow: hidden; height: 0 !important; padding-top: 0; padding-bottom: 0;
  margin-top: -8px; border-width: 0 0 0 3px;
  transition: height .24s ease, padding .24s ease, margin .24s ease; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.out, .toast.gone { transition: none; }
}

/* 머리말의 경고 표시 — 내 계정 옆에 붙는다.
   "어딘가 문제가 있다" 가 아니라 **몇 건인지** 보여 준다. */
.whoami .me { position: relative; }

.whoami .alarm {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #1b0f0d;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.whoami .alarm.warn { background: var(--human); color: #241703; }

.whoami .menu a.flagged { display: flex; justify-content: space-between; gap: 8px; }
.whoami .menu a.flagged::after {
  content: "!";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--danger);
  color: #1b0f0d;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* 내 계정 화면의 점검 결과 */
.checkup { display: flex; flex-direction: column; gap: 10px; }

.checkup .row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  background: var(--panel);
}
.checkup .row.warn { border-left-color: var(--human); }

.checkup .row b { font-size: 13.5px; color: var(--ink); }
.checkup .row p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
/* 이 항목이 어느 조직의 일이고 누가 처리하는가. 사람이 아니라 **설명**이다 —
   예전 이름은 `.who` 였는데, 그러면 표의 사람 칸과 같은 이름이 된다. */
.checkup .row .note-by { font-size: 12px; color: var(--dim); }
.checkup .ok { color: var(--ok); font-size: 13px; }