/* ════════════════════════════════════════════════════════════════════
   safety-gate.css — 안전 카드 · 면책 줄 · 신고 줄 (전체계획 #218 · 2026-09-03 작업2팀)
   ────────────────────────────────────────────────────────────────────
   네 상담 화면(타로집·도사집·사주집·고민저장소)이 같이 싣는다. 색·글자 토큰은
   premium-hud.css 의 --pg-* 를 그대로 쓴다(두 벌 만들지 않는다). 화면마다 배경이
   달라도(보라·남색) 이 카드는 **같은 모양**이어야 한다 — 앱이 내는 안내이지 NPC 의 말이 아니다.
   ════════════════════════════════════════════════════════════════════ */

/* ── 안전 카드 — 손님 말풍선 바로 다음, AI 답보다 먼저 ───────────────── */
.sg-safe{
  box-sizing:border-box; width:100%; max-width:100%;
  margin:8px 0 10px; padding:14px 14px 12px;
  border-radius:14px;
  background:rgba(38,28,56,.94);   /* art-director 2026-09-03: .86 은 사주집 크림 배경이 비쳐 잿빛(67,58,80)이 됐다 — .94 면 네 화면 같은 색 · 금색 번호 4.8:1 */
  border:1px solid rgba(201,169,97,.55);            /* --pg-gold 테두리 — 이 화면에서 유일하게 금색 선을 두르는 상자 */
  box-shadow:0 6px 22px rgba(18,11,32,.30);
  color:var(--pg-ink, #f6efe3);
  font-size:.92rem; line-height:1.5;
  animation:sg-in .28s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes sg-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.sg-safe h3{ margin:0 0 4px; font-size:1rem; font-weight:700; color:var(--pg-ink, #f6efe3); }
.sg-safe p{ margin:0 0 8px; color:var(--pg-sub, #c9bcd6); font-size:.86rem; }
.sg-safe ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sg-safe li{ margin:0; }
.sg-safe .sg-tel{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  min-height:44px; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:var(--pg-ink, #f6efe3); text-decoration:none;
}
.sg-safe .sg-tel:active{ background:rgba(201,169,97,.22); }
.sg-safe .sg-tel b{ font-size:1.05rem; letter-spacing:.02em; color:var(--pg-gold, #c9a961); }
.sg-safe .sg-tel span{ font-size:.8rem; }
.sg-safe .sg-tel small{ font-size:.7rem; color:var(--pg-sub, #c9bcd6); }
.sg-safe .sg-safe-tail{ margin:10px 0 0; font-size:.76rem; color:var(--pg-sub, #c9bcd6); }

/* ── 면책 한 줄 — 대화창 첫 줄. 작고 조용하게, 그러나 읽힌다(4.5:1 이상) ─── */
.sg-disclaimer{
  box-sizing:border-box; width:100%;
  margin:0 0 8px; padding:6px 10px;
  text-align:center; font-size:.72rem; line-height:1.4;
  color:var(--pg-sub, #c9bcd6);
  border-radius:8px; background:rgba(255,255,255,.05);
}
/* 사주집은 크림 배경(#faf6ef)이라 --pg-sub 라벤더가 1.6:1 로 안 읽힌다(art-director 2026-09-03) — 화면 표지로 스코프해 5.2:1 */
.sg-disclaimer[data-screen="saju"]{ color:#766553; background:rgba(58,46,34,.06);
  /* 사주집 대화창 첫 줄은 고정 머리(HUD 2행 ≈ 92px · premium-hud.css:26-27) 밑에 깔린다 — 전체계획 #239 가 대화창 자체를 내릴 때까지
     면책 줄만 40px 내려 둔다(실측 53px + 40 = 93px ≥ 92px · art-director 2026-09-03). #239 가 닫히면 이 줄은 지운다. */
  margin-top:40px; }
/* 고민저장소는 첫 말풍선을 바닥에 붙이려고 margin-top:auto 를 쓴다(worry.css:83) — 면책 줄이 첫 자식이 되면
   그 규칙이 면책 줄에 걸려 말풍선이 위로 붙는다. 면책 줄에는 그 몫을 주지 않고, 첫 말풍선이 계속 받게 한다. */
.ws-chat > .sg-disclaimer:first-child{ margin-top:auto; }
.ws-chat > .sg-disclaimer:first-child + .ws-msg{ margin-top:0; }

/* ── 신고 줄 — AI 말풍선 뒤 한 줄 ────────────────────────────────────── */
.sg-report{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:-2px 0 8px 4px; font-size:.72rem; color:var(--pg-sub, #c9bcd6);
}
.sg-report button{
  background:none; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:3px 10px; font-size:.72rem; color:var(--pg-sub, #c9bcd6); cursor:pointer;
}
.sg-report button:active{ color:var(--pg-gold, #c9a961); border-color:var(--pg-gold, #c9a961); }
.sg-report .sg-report-sent.is-fail{ color:#e2a3a3; }