/* 나눌 때 개인정보 확인 (public/js/views/share-guard.js): the red box and the red line.
   Colours come from the app tokens, so dark mode follows app.css. */
.guard-box {
  border: 2px solid var(--danger);
  background: var(--danger-bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.guard-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  color: var(--danger);
  overflow-wrap: anywhere;
}
.guard-title .icon { width: 22px; height: 22px; flex: none; }
.guard-lead { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.guard-checks { display: grid; gap: 2px; }
.guard-check { min-height: 44px; align-items: center; line-height: 1.4; overflow-wrap: anywhere; }
.guard-check span { min-width: 0; word-break: keep-all; }
.guard-check input { flex: none; accent-color: var(--danger); }
.guard-notes { display: grid; gap: 4px; }
.guard-notes:empty { display: none; }
.guard-phone, .guard-block { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.guard-block { color: var(--danger); font-weight: 700; }
.guard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.guard-wait { margin: 0; font-size: 14px; color: var(--danger); }
.guard-wait[hidden] { display: none; }
.guard-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger);
  overflow-wrap: anywhere;
}
.guard-line .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.guard-line span { min-width: 0; }
.guard-word { margin: 0; font-size: 14px; line-height: 1.5; color: var(--danger); overflow-wrap: anywhere; }
.guard-word:empty { display: none; }