/* 실시간 고객 지도(liveMap) · 출입구 통과 기록(entranceEvents). 색은 프레임 규칙 — 남성 blue-500 · 여성 cyan-500, 선택 상태는 회색 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 출입구 통과 기록 ---------- */
.ev-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-12); }
.ev-gate select { min-width: 200px; height: var(--control-h); }
.ev-total { margin-left: auto; color: var(--text-sub); }
.ev-dir { display: inline-block; min-width: 40px; padding: 1px 8px; border-radius: 4px; font-size: 13px; font-weight: 600; text-align: center; }
.ev-in { background: var(--blue-50); color: var(--blue-700); }
.ev-out { background: var(--grey-50); color: var(--grey-700); }
.ev-pager { display: flex; align-items: center; justify-content: center; gap: var(--spacing-12); margin-top: var(--spacing-12); }
.ev-page { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ev-tl { margin-bottom: var(--spacing-12); }
.ev-tl-head { display: flex; align-items: center; gap: var(--spacing-12); min-height: var(--control-h); margin-bottom: 6px; font-size: 14px; }
.ev-tl-sel { font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-tl-hover { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ev-tl-clear { margin-left: auto; }
.ev-tl-plot { position: relative; height: 56px; border-bottom: 1px solid var(--border); cursor: crosshair; touch-action: none; user-select: none; }
.ev-tl-plot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ev-tl-plot svg { display: block; width: 100%; height: 100%; }
.ev-tl-in { fill: var(--blue-500); }
.ev-tl-out { fill: var(--grey-300); }
.ev-tl .is-off { opacity: .25; }
.ev-tl-brush { fill: var(--grey-900); opacity: .12; y: 0; }
.ev-tl-axis { position: relative; height: 18px; font-size: 11px; color: var(--text-sub); }
.ev-tl-tick { position: absolute; top: 2px; white-space: nowrap; padding-left: 3px; border-left: 1px solid var(--border); }

/* ---------- 실시간 고객 지도 ---------- */
.lm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-12); margin-bottom: var(--spacing-12); }
.lm-when { display: flex; align-items: center; gap: var(--spacing-8); }
.lm-badge { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--grey-50); color: var(--grey-700); }
.lm-badge.is-live { background: var(--red-500); color: var(--white); }
.lm-clock { font-size: 20px; font-weight: 600; }
.lm-overlay { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-ov.is-on { background: var(--selected-bg); border-color: var(--grey-300); }
.legend .dot.lm-f, .lm-dot.lm-f span, .lm-f { background: var(--cyan-500); }
.legend .dot.lm-m, .lm-m { background: var(--blue-500); }
.legend .it { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--spacing-12); font-size: 13px; color: var(--text-sub); }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.lm-body { display: flex; flex-wrap: wrap; gap: var(--spacing-12); align-items: flex-start; }
.lm-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-12); }
.lm-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--spacing-12); }

.lm-canvas { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius-8); overflow: hidden; background: var(--white); }
.lm-canvas:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lm-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lm-zones, .lm-dots, .lm-traj { position: absolute; inset: 0; width: 100%; height: 100%; }
.lm-zones { pointer-events: none; }
.lm-zone { position: absolute; opacity: .35; }
.lm-z-general { background: var(--cyan-700); }
.lm-z-vpsZone { background: var(--carrot-500); }
.lm-z-displayStand { background: var(--blue-700); opacity: .45; }
.lm-zname { position: absolute; transform: translate(-50%, -50%); font-size: 11px; font-weight: 600; color: var(--grey-900); white-space: nowrap; text-shadow: 0 0 3px var(--white); }
.lm-traj { pointer-events: none; }
.lm-traj polyline { fill: none; stroke: var(--grey-900); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .7; }
.lm-dots { pointer-events: none; }
.lm-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; transition: left .9s linear, top .9s linear; }
.lm-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid var(--white); background: inherit; }
.lm-dot.lm-f::after { background: var(--cyan-500); }
.lm-dot.lm-m::after { background: var(--blue-500); }
.lm-dot.lm-f, .lm-dot.lm-m { background: transparent; }
.lm-dot.is-dim { opacity: .25; }
.lm-dot.is-sel::after { inset: 2px; border: 2px solid var(--grey-900); }
.lm-tip { position: absolute; transform: translate(15px, -34px); padding: 6px 10px; border-radius: 6px; background: var(--grey-900); color: var(--white); font-size: 12px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; white-space: nowrap; }
.lm-tip span { color: var(--grey-100); }

.lm-track { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-12); min-height: 40px; padding: 8px 12px; border-radius: var(--radius-8); background: var(--bg-soft); color: var(--text-sub); font-size: 14px; }
.lm-track.is-on { color: var(--text-primary); }
.lm-track .lm-tstate { color: var(--text-sub); }
.lm-track [data-lm-untrack] { margin-left: auto; }
.lm-player { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); }
.lm-time input { width: 104px; height: var(--control-h); text-align: center; }
.lm-slider { flex: 1 1 200px; accent-color: var(--grey-900);
  background: linear-gradient(to right, var(--grey-100) var(--lm-avail, 100%), var(--grey-25) var(--lm-avail, 100%)); border-radius: 4px; height: 6px; }
.lm-live.is-live { background: var(--red-500); border-color: var(--red-500); color: var(--white); }
.lm-msg { margin: 0; font-size: 14px; color: var(--red-600); }

.lm-stat { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.lm-sl { font-size: 14px; color: var(--text-sub); }
.lm-sv b { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lm-sv span { font-size: 18px; color: var(--text-sub); margin-left: 2px; }
.lm-cong { align-self: flex-start; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.lm-cong.lv0 { background: var(--cyan-50); color: var(--cyan-800); }
.lm-cong.lv1 { background: var(--blue-50); color: var(--blue-700); }
.lm-cong.lv2 { background: var(--carrot-50); color: var(--carrot-700); }
.lm-cong.lv3 { background: var(--red-50); color: var(--red-700); }
.lm-gbar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; font-size: 12px; font-weight: 600; }
.lm-gbar span { display: flex; align-items: center; padding-left: 8px; color: var(--grey-900); min-width: 0; }
.lm-gbar .lm-m { color: var(--white); }
.lm-top { font-size: 14px; font-weight: 600; }
.lm-age { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 13px; }
.lm-ab { height: 8px; border-radius: 4px; background: var(--grey-50); overflow: hidden; display: block; }
.lm-ab span { display: block; height: 100%; background: var(--blue-500); }
.lm-age .tnum { text-align: right; }

/* ---------- 출입구별 방문객(entranceMap) — 고른 출입구 = blue-500, 나머지 = 회색 ---------- */
.em-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-12); margin-bottom: var(--spacing-12); }
.em-days { color: var(--text-sub); font-size: 14px; }
.em-body { display: flex; flex-wrap: wrap; gap: var(--spacing-16, 16px); align-items: flex-start; }
.em-plan { position: relative; width: 100%; margin-bottom: var(--spacing-16, 16px); border: 1px solid var(--border); border-radius: var(--radius-8); overflow: hidden; background: var(--white); }
.em-plan img, .em-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.em-plan svg { pointer-events: none; }
.em-line { stroke: var(--grey-300); stroke-linecap: round; opacity: .9; }
.em-line.is-on { stroke: var(--blue-500); }
.em-tag { position: absolute; transform: translate(-50%, -150%); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--grey-300);
  background: var(--white); color: var(--grey-900); font-size: 12px; white-space: nowrap; cursor: pointer; }
.em-tag b { font-variant-numeric: tabular-nums; }
.em-tag.is-on { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.em-tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.em-side { flex: 1 1 420px; min-width: 0; }
.em-side tr.is-on td { background: var(--selected-bg); }
.em-side tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--blue-500); }
.em-floor { color: var(--text-sub); font-size: 12px; margin-left: 4px; }
.em-chart { flex: 1 1 420px; min-width: 0; }
.em-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); font-size: 14px; color: var(--text-sub); margin-bottom: 6px; }
.em-chart-head b { color: var(--text-primary); }
.em-chart-head .legend { margin-left: auto; }
.em-canvas { position: relative; height: 240px; }