/* ==========================================================================
   v3.2 — 안전 대시보드 실시간 관제 연출 (.ld2-*)
   좌표는 영상 원본(1920×1080) 기준 %, 크기는 --u(= 영상 1px)로 맞춘다.
   ========================================================================== */
.ld2 { position: relative; overflow: hidden; aspect-ratio: 1920 / 1080; border-radius: 10px; background: #0f1a2e; isolation: isolate; container-type: inline-size; --u: calc(100cqw / 1920); }
.ld2 video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld2-base { position: absolute; inset: 0; }

/* ---------- 상단 긴급상황전파 공지 띠: 영상 속 띠 위에 덮어 끊김 없이 계속 흐름 ---------- */
.ld2-ticker { position: absolute; z-index: 3; left: 18.75%; right: 0; top: 5.9259%; height: 3.5185%; overflow: hidden; display: flex; align-items: center; background: rgb(13, 20, 31);
 }
/* 왼쪽 끝 흐려짐은 글자에만 (띠 바탕은 불투명해야 영상 속 공지 글자가 비치지 않음) */
.ld2-ticker::after { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3%; background: linear-gradient(90deg, rgb(13, 20, 31), rgba(13, 20, 31, 0)); }
.ld2-track { display: flex; width: max-content; white-space: nowrap; font-size: calc(15.5 * var(--u)); font-weight: 500; color: #e6ebf3; animation: ld2Ticker var(--ld2-tick, 40s) linear infinite; will-change: transform; }
.ld2-track span { padding-right: calc(58 * var(--u)); }
.ld2-track b { margin-right: calc(12 * var(--u)); font-weight: 800; color: #ff3b3b; }
@keyframes ld2Ticker { to { transform: translateX(-50%); } }   /* 같은 내용 2벌 → 절반 이동 후 처음과 같은 모습 = 이음매 없음 */

/* ---------- 시계: 영상이 되감겨도 1초씩 계속 ---------- */
.ld2-clock { position: absolute; z-index: 3; left: 83.6%; top: 1.1%; width: 15.2%; height: 3.6%; display: flex; align-items: center; justify-content: flex-end; background: rgb(18, 44, 69);
  font-size: calc(20.4 * var(--u)); font-weight: 500; color: #eef3fa; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 유역별 대응현황: 금강 '심각' 칸 점멸 (1.8초 주기) ---------- */
.ld2-crit { position: absolute; z-index: 3; left: 19.896%; top: 77.315%; width: 4.0625%; height: 3.611%; border-radius: calc(3 * var(--u)); pointer-events: none;
  border: calc(2 * var(--u)) solid #ff4646; background: rgba(255, 50, 50, .22); mix-blend-mode: screen;
  box-shadow: 0 0 calc(12 * var(--u)) calc(2 * var(--u)) rgba(255, 45, 45, .75), inset 0 0 calc(14 * var(--u)) rgba(255, 70, 70, .55);
  animation: ld2Crit 1.8s ease-in-out infinite; }
@keyframes ld2Crit { 0%, 100% { opacity: .18; } 50% { opacity: 1; } }

/* ---------- 지도 영역 (기본 화면 x17 y114 · 1338×582 = 알럿 영상 크기 그대로) ---------- */
.ld2-map { position: absolute; z-index: 2; left: .8854%; top: 10.5556%; width: 69.6875%; height: 53.8889%; pointer-events: none; }
.ld2-zoom { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease, filter .8s ease; }
.ld2.is-zoom .ld2-zoom { opacity: 1; }

/* 위치 마커: 평상시 지도에서 먼저 강조 → 지도가 이동·확대되면 화면 가운데(같은 지점)로 따라감 */
.ld2-pin { position: absolute; z-index: 1; left: 49.18%; top: 37.29%; width: 0; height: 0; opacity: 0; transition: opacity .35s ease, left .3s cubic-bezier(.3, 0, .2, 1), top .3s cubic-bezier(.3, 0, .2, 1); }
.ld2-pin b { position: absolute; left: calc(-7 * var(--u)); top: calc(-7 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #ef4444; border: calc(2.5 * var(--u)) solid #fff; box-shadow: 0 0 calc(14 * var(--u)) rgba(239, 68, 68, .95); animation: ld2Dot 1s ease-in-out infinite; }
.ld2-pin i { position: absolute; left: calc(-24 * var(--u)); top: calc(-24 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; border: calc(2.5 * var(--u)) solid rgba(239, 68, 68, .9); background: rgba(239, 68, 68, .12); opacity: 0; }
.ld2-pin em { position: absolute; left: 0; top: calc(-40 * var(--u)); transform: translateX(-50%); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: #ef4444; font-style: normal; font-size: calc(13 * var(--u)); font-weight: 900; letter-spacing: .04em; color: #fff; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .35); transition: opacity .25s, transform .25s; }
.ld2.is-mark .ld2-pin { opacity: 1; }
.ld2.is-mark .ld2-pin i { animation: ld2Wave 1.8s ease-out infinite; }
.ld2.is-mark .ld2-pin i:nth-child(2) { animation-delay: .6s; }
.ld2.is-mark .ld2-pin i:nth-child(3) { animation-delay: 1.2s; }
.ld2.is-pan .ld2-pin { left: 50%; top: 50%; }
.ld2.is-pop .ld2-pin em { opacity: 0; transform: translate(-50%, 6px); }
.ld2.is-pop .ld2-pin i { animation-duration: 2.2s; }
@keyframes ld2Wave { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes ld2Dot { 50% { transform: scale(1.25); } }

/* ---------- SOS 구조요청 알림창 (참고 영상 알림창과 같은 자리 · 크기 · 구성) ---------- */
.ld2-sos { position: absolute; z-index: 2; left: 46.41%; top: 37.11%; width: 48.5%; height: 44.67%; display: flex; border-radius: calc(12 * var(--u)); overflow: hidden;
  box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .5), 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .06);
  --ld2-sos-s: 1.25;   /* 알림창 배율: 영상 속 알림창을 완전히 덮고, 기준점을 오른쪽에 두어 오른쪽 끝이 지도 안(약 99%)에 머물게 왼쪽으로 커짐 */
  opacity: 0; transform: translateY(0) scale(calc(var(--ld2-sos-s) * .9)); transform-origin: 63% 45%; }
.ld2.is-pop .ld2-sos { opacity: 1; transform: translateY(0) scale(var(--ld2-sos-s)); animation: ld2Alarm 1.6s ease-in-out .4s infinite; }
@keyframes ld2Alarm { 50% { box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .5), 0 0 0 calc(3 * var(--u)) rgba(239, 68, 68, .75), 0 0 calc(30 * var(--u)) rgba(239, 68, 68, .45); } }
.ld2-sos-l { position: relative; flex: 0 0 37.6%; background: radial-gradient(circle at 50% 40%, #f45a68 0%, #ec3446 55%, #e3263a 100%); }
.ld2-warn { position: absolute; left: 50%; top: calc(25 * var(--u)); width: calc(158 * var(--u)); transform: translateX(-50%); filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(150, 0, 20, .3)); }
.ld2-sos-l strong { position: absolute; left: 0; right: 0; top: calc(175 * var(--u)); text-align: center; font-size: calc(35 * var(--u)); font-weight: 900; letter-spacing: calc(-.5 * var(--u)); color: #fff; white-space: nowrap; text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(120, 0, 15, .35); }
.ld2-sos-r { flex: 1; display: flex; flex-direction: column; padding: 0 calc(15 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); background: linear-gradient(180deg, #303b4e, #283244); }
.ld2-sos-h { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(50 * var(--u)); flex: none; }
.ld2-siren { width: calc(38 * var(--u)); height: calc(34 * var(--u)); margin-left: calc(-3 * var(--u)); flex: none; }
.ld2.is-pop .ld2-rays { animation: ld2Rays .7s steps(1) infinite; }
@keyframes ld2Rays { 50% { opacity: .15; } }
.ld2-sos-h b { font-size: calc(19.5 * var(--u)); font-weight: 800; color: #fff; letter-spacing: calc(-.3 * var(--u)); }
.ld2-ok { margin-left: auto; display: grid; place-items: center; width: calc(60 * var(--u)); height: calc(27 * var(--u)); border-radius: 999px; background: #e8283a; font-size: calc(15 * var(--u)); font-weight: 800; color: #fff; }
.ld2-tb { flex: 1; display: flex; flex-direction: column; border: calc(1 * var(--u)) solid rgba(150, 168, 205, .38); border-radius: calc(12 * var(--u)); overflow: hidden; }
.ld2-tr { flex: 1; display: flex; }
.ld2-tr + .ld2-tr { border-top: calc(1 * var(--u)) solid #3f4e69; }
.ld2-tr span { flex: 0 0 calc(120 * var(--u)); display: grid; place-items: center; background: #1c2535; font-size: calc(17 * var(--u)); font-weight: 500; color: #cdd5e1; }
.ld2-tr b { flex: 1; display: flex; align-items: center; padding-left: calc(11 * var(--u)); background: #283244; font-size: calc(17.5 * var(--u)); font-weight: 600; color: #eef2f7; }

/* ---------- 복귀: 알림창과 줌 지도가 함께 사라지며 평상시 화면으로 ---------- */
.ld2.is-out .ld2-zoom { opacity: 0; filter: blur(calc(3 * var(--u))); transition: opacity .9s ease, filter .9s ease; }
.ld2.is-out .ld2-sos { opacity: 0; transform: scale(calc(var(--ld2-sos-s) * .95)); animation: none; transition: opacity .5s ease, transform .55s ease; }
.ld2.is-out .ld2-pin { opacity: 0; transition: opacity .4s ease; }

/* 기존 모니터 틀 안 */
.monitor .ld2 { border-radius: 10px; }

/* 동작 줄이기: 영상·점멸·흐름을 멈춘 한 장면 */
@media (prefers-reduced-motion: reduce) {
  .ld2-track, .ld2-crit, .ld2-pin *, .ld2-sos, .ld2-rays { animation: none !important; }
  .ld2-crit { opacity: 1; }
}

/* ---------- v3.2 보정: 알림을 더 크고 급하게 ---------- */
/* 알림이 뜨면 지도 가장자리를 살짝 어둡게 → 시선이 알림창으로 (복귀 때 함께 풀림) */
.ld2-map::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(ellipse 62% 70% at 66% 58%, transparent 45%, rgba(8, 10, 20, .5) 100%); }
.ld2.is-pop .ld2-map::after { opacity: 1; }
.ld2.is-out .ld2-map::after { opacity: 0; transition: opacity .8s ease; }
.ld2-pin { z-index: 2; } .ld2-sos { z-index: 3; }
/* 발생 후 경과 시간 */
.ld2-el { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); margin-left: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: rgba(239, 68, 68, .16); border: calc(1 * var(--u)) solid rgba(248, 113, 113, .45); font-size: calc(13 * var(--u)); font-weight: 700; color: #fecaca; white-space: nowrap; }
.ld2-el i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #ef4444; animation: ld2Dot .9s ease-in-out infinite; }
.ld2-el em { font-style: normal; font-variant-numeric: tabular-nums; color: #fff; }
/* 가독성: 표 글자 대비 조금 더 */
.ld2-tr span { color: #d6dde8; }
.ld2-tr b { color: #fff; }


/* ---------- 퇴장: 지도 줌아웃 + 알림창이 아래로 내려가며 닫힘 (1.1초, 함께 끝남) ---------- */
.ld2-map { clip-path: inset(-60% -60% 0 -60%); }     /* 아래쪽만 잘라 알림창이 지도 틀 아래로 빠져나가며 닫히는 느낌 (위·좌·우는 잘리지 않음) */
.ld2-zoom2 { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ld2-rev { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; }   /* 줌 영상보다 위 */
.ld2.is-rev .ld2-rev { opacity: 1; }                  /* 줌인 프레임을 거꾸로 그리는 캔버스가 줌 영상을 덮음 */
.ld2.is-rev-off .ld2-rev { opacity: 0; transition: opacity .3s ease; }   /* 마지막 장면(전국 지도) = 기본 영상 → 티 없이 넘김 */
.ld2.is-out .ld2-zoom { transition: none; }
.ld2.is-out .ld2-sos { opacity: 0; transform: translateY(calc(190 * var(--u))) scale(calc(var(--ld2-sos-s) * .93)); filter: none; animation: none;
  transition: transform .95s cubic-bezier(.55, 0, .35, 1) .15s, opacity .7s cubic-bezier(.4, 0, .6, 1) .4s; }
.ld2.is-out .ld2-pin { opacity: 0; transition: opacity .6s ease .4s; }
.ld2.is-out .ld2-map::after { opacity: 0; transition: opacity 1s ease; }