/* =========================================================
   _v2 복제본 전용 (html[data-rev="2"])
   1) 시안 4 Features 색 보정   2) 안전 대시보드 실시간 알림 연출
   좌표 기준: 기본 화면 img/safety-base.png (1920×1080)
             알림 화면 img/safety-dashboard.png (1895×1100, 원본 안전화면.png)
   ========================================================= */

/* ---------- 1) 시안 4 · Features : 라벤더 배경에 맞춘 인디고 톤 ---------- */
:root[data-rev="2"][data-v="4"][data-theme="light"] #features {
  --fx-title: #1f2363;   /* 제목: 깊은 인디고 */
  --fx-sub: #3a3f86;     /* 카드 제목 */
  --fx-body: #6a6fa3;    /* 설명: 라벤더 그레이 */
  --fx-muted: #9497c4;   /* 보조 */
  --fx-tile: linear-gradient(160deg, #2a3080 0%, #1d2262 100%);
  --fx-tile-line: rgba(165, 175, 255, .22);
  --text: var(--fx-title); --text-2: var(--fx-body);
  background: radial-gradient(900px 520px at 85% 0%, rgba(143, 208, 255, .22), transparent 60%), radial-gradient(800px 480px at 0% 100%, rgba(185, 168, 255, .24), transparent 62%), linear-gradient(180deg, #f3f2ff 0%, #f7f8ff 100%);
}
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .head h2 { color: var(--fx-title); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .split-head > p { color: var(--fx-body); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .kicker { color: #5b5bf0; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-card { background: rgba(255, 255, 255, .78); border-color: rgba(124, 108, 255, .16); box-shadow: 0 20px 50px -30px rgba(70, 60, 200, .35); backdrop-filter: blur(10px); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-card h3 { color: var(--fx-sub); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-card > p { color: var(--fx-body); }
/* 진한 타일 · 에디터 · HTML5 카드 : 검정 대신 인디고 */
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .ed { background: #1a1f55; border-color: rgba(165, 175, 255, .18); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .ed-top { background: rgba(255, 255, 255, .05); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .ed-w, :root[data-rev="2"][data-v="4"][data-theme="light"] #features .dnd-w { background: #232a6e; border-color: rgba(165, 175, 255, .12); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .dnd-ctrl { background: rgba(255, 255, 255, .03); border-top-color: rgba(165, 175, 255, .14); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .wt { background: var(--fx-tile); border-color: var(--fx-tile-line); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .wt small { color: #a7acdf; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .wt--more { background: rgba(124, 108, 255, .1); border-color: rgba(124, 108, 255, .35); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .wt--more b { color: #5b5bf0; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .wt--more small { color: var(--fx-body); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-html5 { background: linear-gradient(140deg, #3b3fb8 0%, #6a4fe0 55%, #9b6cf0 100%); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-html5 .big { background: linear-gradient(100deg, #ffffff, #e0dbff); -webkit-background-clip: text; background-clip: text; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-html5 h3 { color: #ffffff; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-html5 .sub { color: rgba(255, 255, 255, .78); }
/* 큰 숫자 · 타임라인 */
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-widgets .w-lead .num { background: linear-gradient(180deg, #2b2f86 0%, #7c6cff 100%); -webkit-background-clip: text; background-clip: text; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-widgets .w-lead small { color: #5b5bf0; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-local .years { background: linear-gradient(100deg, #5b5bf0 0%, #9b6cf0 60%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-local .gs { background: rgba(245, 158, 11, .14); color: #c27803; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .timeline { background: linear-gradient(90deg, #5b5bf0, #9b6cf0, #f5b83d); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .timeline-ends { color: var(--fx-muted); }
/* 연동 · 권한 · 슬라이드 미니 UI */
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .fx-net .col span { background: #ffffff; border-color: rgba(124, 108, 255, .2); color: var(--fx-sub); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .role { background: rgba(124, 108, 255, .07); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .roles .heads { color: var(--fx-muted); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .tg i { background: rgba(124, 108, 255, .18); }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .tg i.is-on { background: #6366f1; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .slides .sl:nth-child(1) { background: #2a3080; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .slides .sl:nth-child(2) { background: #2b3f8f; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .slides .sl:nth-child(3) { background: #1d2262; }
:root[data-rev="2"][data-v="4"][data-theme="light"] #features .timer b, :root[data-rev="2"][data-v="4"][data-theme="light"] #features .timer small { color: var(--fx-sub); }

/* ---------- 2) 안전 대시보드 실시간 알림 연출 ---------- */
.ld { position: relative; overflow: hidden; aspect-ratio: 1920 / 1080; border-radius: 10px; background: #0f1a2e; isolation: isolate; }
.ld > img.ld-base { display: block; width: 100%; height: 100%; border-radius: 0; }
/* 지도 영역 (기본 화면 x20 y120 · 1330×570) */
.ld-map { position: absolute; left: 1.0417%; top: 11.1111%; width: 69.2708%; height: 52.7778%; overflow: hidden; z-index: 1; }
.ld-z, .ld-a { position: absolute; inset: 0; background-repeat: no-repeat; transform-origin: 50.4% 33.3%; will-change: transform, opacity; }
.ld-z { background-image: url("../img/safety-base.png"); background-size: 144.3609% auto; background-position: 3.3898% 23.5294%;
  transition: transform 1.5s cubic-bezier(.45, .05, .3, 1) .55s; }
.ld-a { background-image: url("../img/safety-dashboard.png"); background-size: 144.1065% auto; background-position: 3.4483% 24.18%;
  opacity: 0; transform: scale(.5);
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-size: 100% 100%, 48.67% 46.84%; -webkit-mask-position: 0 0, 90.6% 68.9%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-size: 100% 100%, 48.67% 46.84%; mask-position: 0 0, 90.6% 68.9%; mask-repeat: no-repeat; mask-composite: exclude;
  transition: opacity .7s ease, transform .9s cubic-bezier(.45, .05, .3, 1); }
.ld-flash { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(248, 113, 113, 0); transition: box-shadow .6s; }
/* 알림창 (알림 화면 x632 y336 · 640×264 → 기본 화면 좌표) */
.ld-pop { position: absolute; z-index: 3; left: 33.28%; top: 30.44%; width: 33.71%; height: 24.72%; border-radius: .9% / 1.7%;
  background: url("../img/safety-dashboard.png") no-repeat; background-size: 296.09% auto; background-position: 50.36% 40.19%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(14px) scale(.96); transform-origin: 8% 0; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1.15); }
/* 위치 표시 */
.ld-ping { position: absolute; z-index: 4; left: 35.94%; top: 28.7%; width: 0; height: 0; opacity: 0; transition: opacity .4s; pointer-events: none; }
.ld-ping b { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; box-shadow: 0 0 12px rgba(239, 68, 68, .9); }
.ld-ping i { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(239, 68, 68, .85); opacity: 0; }
.ld.is-zoom .ld-ping i { animation: ldPing 1.6s ease-out infinite; }
.ld.is-zoom .ld-ping i:nth-child(2) { animation-delay: .8s; }
@keyframes ldPing { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
/* 상태 표시 */
.ld-chip { position: absolute; z-index: 4; left: 25.2%; top: 13.2%; display: grid; font-size: clamp(9px, .85vw, 13px); font-weight: 700; white-space: nowrap; }
.ld-chip span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .55em; padding: .45em .95em; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .4s, transform .4s; }
.ld-chip .ok { color: #d1fae5; background: rgba(6, 40, 34, .78); border: 1px solid rgba(52, 211, 153, .45); }
.ld-chip .ok::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 .25em rgba(52, 211, 153, .25); animation: blink 2.2s ease-in-out infinite; }
.ld-chip .ng { color: #fff; background: rgba(185, 28, 28, .9); border: 1px solid rgba(255, 255, 255, .25); opacity: 0; transform: translateY(-4px); }
.ld-chip .ng::before { content: "▲"; font-size: .8em; }

/* 상태: 줌 (지도 확대 → 줌인 화면이 겹쳐지며 선명해짐) */
.ld.is-zoom .ld-z { transform: scale(2.4); filter: blur(3px) brightness(.8); transition: transform 2.2s cubic-bezier(.45, .05, .3, 1), filter 1.6s ease .4s; }
.ld-z { filter: none; }
.ld.is-zoom .ld-a { opacity: 1; transform: none; transition: opacity .9s ease 1s, transform 2.1s cubic-bezier(.45, .05, .3, 1) .1s; }
.ld.is-zoom .ld-ping { opacity: 1; }
/* 상태: 알림 */
.ld.is-pop .ld-pop { opacity: 1; transform: none; }
.ld.is-pop .ld-flash { box-shadow: inset 0 0 0 3px rgba(248, 113, 113, .75), inset 0 0 40px rgba(248, 113, 113, .25); animation: ldFlash 1.8s ease-in-out infinite; }
.ld.is-pop .ld-chip .ok { opacity: 0; transform: translateY(4px); }
.ld.is-pop .ld-chip .ng { opacity: 1; transform: none; }
@keyframes ldFlash { 50% { box-shadow: inset 0 0 0 2px rgba(248, 113, 113, .35), inset 0 0 20px rgba(248, 113, 113, .1); } }
/* 동작 줄이기: 애니메이션 없이 알림 상황 한 장면만 */
@media (prefers-reduced-motion: reduce) {
  .ld *, .ld *::before { transition: none !important; animation: none !important; }
}
/* 기존 틀 안에 들어갈 때 */
.monitor .ld, .flow-screen .ld { border-radius: 10px; }
.flow-screen .ld { border-radius: 14px; }

/* ---------- 참고 영상(안전대시보드알럿영상.mp4) 기준 보정 ----------
   · 현황 카드는 제자리에 고정, 지도만 확대 (낙동강·도시 카드는 줌과 함께 사라짐)
   · 줌은 약 1.2초로 짧고 부드럽게 → 회색 상세 지도로 전환 → 알림창
   · 상단 긴급상황전파 띠는 계속 흐르고, 시계는 1초씩 증가 */
.ld { container-type: inline-size; }
.ld-chip { display: none; }
.ld-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ld-cards i { position: absolute; background: url("../img/safety-base.png") no-repeat; transition: opacity .5s ease; }
.ld-cards .c-left { left: 2.3958%; top: 12.5926%; width: 21.25%; height: 47.2222%; background-size: 470.5882% auto; background-position: 3.0423% 23.8596%; }
.ld-cards .c-han { left: 46.9792%; top: 18.7963%; width: 21.1458%; height: 10.7407%; background-size: 472.9064% auto; background-position: 59.5773% 21.0581%; }
.ld-cards .c-rest { left: 46.9792%; top: 30.8333%; width: 21.1458%; height: 22.7778%; background-size: 472.9064% auto; background-position: 59.5773% 39.9281%; }
/* 줌: 지도(배경)만 확대, 권역 색이 빠지며 상세 지도로 */
.ld-z { transition: transform 1.2s cubic-bezier(.5, 0, .25, 1), filter .5s ease, opacity .5s ease; }
.ld.is-zoom .ld-z { transform: scale(2.2); filter: blur(2px) saturate(.6); opacity: 0; transition: transform 1.2s cubic-bezier(.5, 0, .25, 1), filter .9s ease, opacity .55s ease .6s; }
.ld-a { transform: scale(.55); transition: opacity .5s ease, transform 1.2s cubic-bezier(.5, 0, .25, 1); }
.ld.is-zoom .ld-a { opacity: 1; transform: none; transition: opacity .55s ease .55s, transform 1.2s cubic-bezier(.5, 0, .25, 1); }
.ld.is-zoom .ld-cards .c-rest { opacity: 0; transition-duration: .35s; }
.ld.is-zoom .ld-cards .c-left, .ld.is-zoom .ld-cards .c-han { opacity: 0; transition: opacity .45s ease .95s; }
/* 알림창: 지도 위로 살짝 떠오르며 등장 */
.ld-pop { transform: translateY(10px) scale(.97); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.1); }
/* 상단 긴급상황전파 띠 */
.ld-ticker { position: absolute; z-index: 3; left: 18.75%; right: 0; top: 5.9259%; height: 3.5185%; overflow: hidden; background: rgb(13, 20, 31); display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%); mask-image: linear-gradient(90deg, transparent, #000 4%); }
.ld-track { display: flex; gap: 3.2cqw; width: max-content; padding-left: 3cqw; white-space: nowrap; font-size: .86cqw; font-weight: 500; color: #e6ebf3; animation: ldTicker 34s linear infinite; }
.ld-track b { margin-right: .6em; font-weight: 800; color: #ff3b3b; }
@keyframes ldTicker { to { transform: translateX(-50%); } }
/* 시계 */
.ld-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: 1.06cqw; font-weight: 500; color: #eef3fa; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ld-track { animation: none; } }
/* 참고 영상처럼 테두리 깜빡임 없이 — 위치 핑만으로 강조 */
.ld.is-pop .ld-flash { box-shadow: none; animation: none; }
/* 줌 전환 다듬기: 상세 지도는 작게 시작하지 않고 제자리에서 살짝 확대된 상태로 녹아들 듯 등장
   (확대 중인 위성 지도는 흐려지기만 하고 끝까지 뒤에 남아 알림창 자리의 빈틈을 채움) */
.ld-a { transform: scale(1.08); transition: opacity .45s ease, transform .9s cubic-bezier(.3, 0, .2, 1); }
.ld.is-zoom .ld-a { opacity: 1; transform: none; transition: opacity .5s ease .7s, transform 1.2s cubic-bezier(.3, 0, .2, 1) .5s; }
.ld.is-zoom .ld-z { opacity: 1; filter: blur(5px) saturate(.5) brightness(.85); transition: transform 1.25s cubic-bezier(.5, 0, .25, 1), filter 1s ease .2s; }
/* 참고 영상과 같게: 상세 지도와 알림창이 한 장면으로 함께 나타남 (빈틈 없음) */
.ld-a { -webkit-mask: none; mask: none; }
.ld-pop { display: none; }