/* ================================================================
   재생 경보 팝업 (features/replay-alert) — 지도 오른쪽 위
   ----------------------------------------------------------------
   사용자 지시(2026-09-08): 「재생을 하면 해당 시간대 경보나 알림들이 모두 오른쪽 상단에
   팝업으로 전시」. 실시간 화면에는 나타나지 않는다(모듈이 재생 중에만 hidden을 푼다).

   ⚠ 오른쪽 위는 이미 셋이 쓰는 자리다 — 기체 인스펙터(#acDetail, --insp-w) · 배경전환
     알약(#bgSwitch) · 지도표시 ⚙(#mapCfg). 그래서 **기존 회피 규약을 그대로 잇는다**:
       · 인스펙터가 열리면 이 팝업이 그만큼 왼쪽으로 물러난다 (#bgSwitch가 하던 것과 같은 식)
       · 이 팝업이 뜨면 #bgSwitch·#mapCfg가 그만큼 왼쪽으로 물러난다 (host가 body.rpalert-on)
     ⛔ 새 규약을 만들지 않는다 — 회피 규칙이 두 벌이 되면 어느 조합에서 겹칠지 아무도 모른다.
   ⚠ 폭·색·모서리는 인스펙터(shell.css §4)와 같은 토큰을 쓴다. 두 패널이 나란히 떴을 때
     한쪽만 다른 모양이면 «다른 화면»으로 읽힌다(2026-09-05 경보 팝오버에서 겪은 것과 같은 결).
   ================================================================ */
:root { --rpal-w: 300px; }

#rpAlert {
  position: absolute;
  top: calc(var(--hdr-total) + var(--gap));
  right: calc(var(--gap) + var(--sa-r));
  width: var(--rpal-w);
  max-height: calc(100% - var(--hdr-total) - var(--gap) * 2);
  /* ⚠ 인스펙터(1260)보다 위, 경보 팝오버(1500)보다 아래. 안전 목록이 언제나 맨 앞이라는
     기존 순서를 흔들지 않으면서, 지도 위 위젯보다는 앞에 온다. */
  z-index: 1270;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: right var(--transition-smooth);
}
#rpAlert[hidden] { display: none !important; }

/* 인스펙터가 열리면 그만큼 비킨다 — #bgSwitch의 body.inspector-open 규약과 같은 값·같은 식 */
body.inspector-open #rpAlert { right: calc(var(--insp-w) + var(--gap) * 2 + var(--sa-r)); }

/* 반대로, 이 팝업이 떠 있으면 지도 위 작은 위젯들이 비킨다 (호스트가 body.rpalert-on을 건다) */
body.rpalert-on #bgSwitch,
body.rpalert-on #mapCfg { right: calc(var(--rpal-w) + var(--gap) * 2 + var(--sa-r)); }
body.rpalert-on.inspector-open #bgSwitch,
body.rpalert-on.inspector-open #mapCfg {
  right: calc(var(--insp-w) + var(--rpal-w) + var(--gap) * 3 + var(--sa-r));
}

#rpAlert .rpa-hd {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px;
  background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary);
}
#rpAlert .rpa-n { font-variant-numeric: tabular-nums; color: var(--status-danger); }
#rpAlert .rpa-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }

#rpAlert .rpa-card {
  margin: 0 0 6px; padding: 7px 9px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-secondary);
  border-radius: var(--radius-sm); cursor: pointer;
}
#rpAlert .rpa-card:last-child { margin-bottom: 0; }
#rpAlert .rpa-card:hover { background: var(--bg-hover); }
/* 종류별 띠 — 3D·경보 이력이 이미 쓰는 갈래(근접·유사호출·스콱·홀딩·복행) */
#rpAlert .rpa-card.sep  { border-left-color: #d64545; }
#rpAlert .rpa-card.cs   { border-left-color: #1d5fae; }
#rpAlert .rpa-card.sq   { border-left-color: #b8341f; }
#rpAlert .rpa-card.hold { border-left-color: #9333ea; }
#rpAlert .rpa-card.ga   { border-left-color: #ea580c; }

#rpAlert .rpa-r1 { display: flex; align-items: center; gap: 6px; }
#rpAlert .rpa-kind {
  flex: none; padding: 1px 6px; border-radius: 9px;
  background: var(--bg-sunken); color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: 700;
}
#rpAlert .rpa-who {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "IBM Plex Mono", monospace; font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-primary);
}
/* ⚠ 폭을 못박는다 — 이 호스트의 전역 `button{width:100%}`를 상속하면 ✕가 카드 한 줄을
   통째로 먹는다(이 저장소에서 되풀이된 함정: 재생 바 v26 · .sheet-back · .header-actions). */
#rpAlert .rpa-x {
  flex: none; width: auto; margin: 0; padding: 0 4px;
  background: none; border: 0; color: var(--text-tertiary);
  font-size: var(--fs-sm); line-height: 1; cursor: pointer;
}
#rpAlert .rpa-x:hover { color: var(--status-danger); }
#rpAlert .rpa-r2 {
  margin-top: 2px; font-size: var(--fs-xs); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis;
}

#rpAlert .rpa-ft {
  flex: none; padding: 7px 12px; border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.45;
}
#rpAlert .rpa-ft .bad { color: var(--status-danger); font-weight: 600; }
#rpAlert .rpa-note { color: var(--text-tertiary); }

/* ── 좁은 화면 ─────────────────────────────────────────────────
   ⛔ 오른쪽 위 위젯들을 밀어내지 않는다 — 폭이 없어서 서로 겹친다. 대신 그 **아래**로
     내려가 가로를 다 쓴다. 세로 위치는 #mapCfg가 쓰는 계산(--bgsw-h)을 그대로 잇는다:
     배경전환 알약(32) + 사이(8) + ⚙ 버튼(34) + 사이(8).
   ⚠ 재생 바(#rcBar)가 아래쪽 위에 뜨므로 높이를 화면 40%로 묶는다. */
@media (max-width: 760px) {
  #rpAlert {
    left: calc(var(--gap) + var(--sa-l));
    right: calc(var(--gap) + var(--sa-r));
    width: auto;
    top: calc(var(--hdr-total) + var(--gap) + var(--bgsw-h) + 50px);
    max-height: 40vh;
  }
  body.inspector-open #rpAlert { right: calc(var(--gap) + var(--sa-r)); }
  body.rpalert-on #bgSwitch, body.rpalert-on #mapCfg { right: calc(var(--gap) + var(--sa-r)); }
  body.rpalert-on.inspector-open #bgSwitch,
  body.rpalert-on.inspector-open #mapCfg { right: calc(var(--gap) + var(--sa-r)); }
  /* 바텀시트가 올라오면(서랍·경보 목록) 지도 위 패널은 자리를 비운다 — shell.css §8-3과 같은 규칙 */
  body[data-sheet="drawer"] #rpAlert,
  body[data-sheet="alerts"] #rpAlert { display: none !important; }
}

/* ── 켜기/끄기 · 폰 끌어 옮기기 (2026-10-10) ────────────────────────
   사용자 지시 「그때 기록된 경보를 안 보는 옵션 — 선택하면 나오고 해제하면 재생만」·「모바일에서는 위치를 이동할 수 있게」.
   단추는 모듈이 재생 바에 붙인다(ReplayAlert.attach) — 오늘재생 바(.rtFind)·관리자 재생 바(#rcBar .rcbPill). */
#rpAlert .rpa-n { margin-left: auto; }
#rpAlert .rpa-off {
  flex: none; width: auto; margin: 0; padding: 2px 8px;
  background: none; border: 1px solid var(--border-subtle); border-radius: 10px;
  color: var(--text-tertiary); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; cursor: pointer;
}
#rpAlert .rpa-off:hover { color: var(--text-primary); border-color: var(--border-medium); }

/* 바 단추 — 켜짐이면 노란 테(오늘재생 바의 강조색) · 꺼짐이면 흐린 테에 빗금 */
.rpaTgl { display: inline-flex; align-items: center; gap: 6px; width: auto !important; white-space: nowrap; cursor: pointer; }
.rpaTgl svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpaTgl:not(.on) .rpaTglTx { text-decoration: line-through; }
.rtFind .rpaTgl { height: 32px; padding: 0 12px !important; border-radius: 16px; border: 1.5px solid var(--rt-dim, rgba(242, 243, 245, .55)) !important;
  font-weight: 600; color: var(--rt-dim, rgba(242, 243, 245, .55)); background: none; }
.rtFind .rpaTgl.on { color: var(--rt-acc, #f2c230); border-color: var(--rt-acc, #f2c230) !important; background: rgba(242, 194, 48, .12) !important; }
#rcBar .rpaTgl:not(.on) { opacity: .6; }

@media (max-width: 760px) {
  .rtFind .rpaTgl { padding: 0 9px !important; }
  .rtFind .rpaTgl .rpaTglTx { display: none; }      /* 폰은 아이콘만 — 꺼짐은 흐린 색으로 가린다 */
  /* 머리 줄을 끌어 옮긴다(모듈 wireDrag) — 손잡이 표시와 끄는 동안 지도 스크롤 막기 */
  #rpAlert .rpa-hd { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
  #rpAlert .rpa-hd::before { content: ""; flex: none; width: 14px; height: 10px; margin-right: 2px; opacity: .55;
    background: radial-gradient(circle, currentColor 1.2px, transparent 1.5px) 0 0 / 5px 5px; }
  #rpAlert.rpa-drag { transition: none; box-shadow: var(--shadow-xl, var(--shadow-lg)); opacity: .96; }
  #rpAlert.rpa-drag .rpa-hd { cursor: grabbing; }
}