/**
 * 지리정보 오버레이
 * 렌더링 최적화:
 *   - 텍스트(측점+POI): 데이터 로드 완료 시 전 프레임 Map 사전 계산 (requestIdleCallback)
 *     params 변경 시 500ms debounce 후 재계산
 *   - 중심선: 드론 프레임 변경 시 renderCacheRef 갱신 (per-frame, 나중에 최적화)
 *   - RAF 루프: Map 조회 + 캐시 읽기만 (계산 없음 → 60fps)
 */

import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import {
  toCameraCoords,
  pixelFromCamera,
  groundPointFromPixel,
  type DroneFrameBasic,
  type CameraParams,
  type CameraCoords,
  DEFAULT_CAMERA_PARAMS,
} from '../../utils/geoProjection';
import { useGeoStore } from '../../store/geoStore';
import { useSettingsStore } from '../../store/settingsStore';
import { Minimap } from './Minimap';
import { MapCompass, type CompassPose } from './MapCompass';
import type { GeoPoint, CenterlinePoint, PoiOverrideMap, RouteStructure } from '../../types/geo';

const VIDEO_FPS = 30000 / 1001;

// 라벨 좌표 튐 방지 — 1프레임에 이 정규화 거리(화면폭/높이 비율) 이상 점프하면 이상치로
// 보고 갱신 무시(이전 위치 유지). 정상 팬 이동은 60fps에서 프레임당 훨씬 작다.
const REJECT_DIST = 0.12;
// 단, 시크/재등장 등 '진짜' 큰 이동에 영구히 갇히지 않도록 연속 거부 한계 후 수용.
const MAX_REJECT_FRAMES = 8;

// POI 라벨 겹침 억제 — 두 마커가 화면상 이 정규거리(가로 X / 세로 Y) 이내면 '겹침'으로 보고
// 드론에 더 가까운 것만 남기고 나머지는 숨긴다. (같은 건물의 여러 업체 등)
const POI_MERGE_X = 0.10;
const POI_MERGE_Y = 0.035;

type DispPos = { x: number; y: number; rej: number; vx: number; vy: number; rx?: number; ry?: number };

// djmd 프레임 동기 데이터일 때 포즈 평활 상한.
// 주의: smoothFrame 의 halfWin 단위는 '프레임 배열 행'(CSV 10Hz 행)이라 ±5 = ±0.5초 —
// 팬(회전) 시작·종료 때 라벨이 늦게 출발하고 늦게 정렬되는 원인이었음.
// 프레임 동기 데이터는 위치(djmd)·자세(10Hz 선형보간) 모두 이미 매끄러워 평활 불필요 → 0(끔).
const POSE_SMOOTH_SYNCED_MAX = 0;

// 속도 적응형 평활(One Euro 방식) 상수.
//   떨림(노이즈)은 매 프레임 방향이 번갈아 → 평활속도≈0 → 강하게 평활(1배속에서 안정).
//   실제 이동은 방향이 일관 → 평활속도 큼 → alpha↑로 즉시 추종(빠른 배속에서 지연 없음).
const SMOOTH_VEL_BETA = 0.25;   // 속도 추정 평활(저크 제거)

/** 이상치 거부 + 속도적응 EMA.
 *  maxAlpha = 빠를 때 추종 상한(패널 EMA α), minAlpha = 정지/떨림 시 최소 추종(작을수록 강한 평활),
 *  speedRef = 이 속도(정규/프레임) 이상에서 alpha 가 maxAlpha 에 도달(클수록 더 강하게 평활). */
function smoothStep(prev: DispPos | undefined, tx: number, ty: number, maxAlpha: number, minAlpha: number, speedRef: number): DispPos {
  if (!prev) return { x: tx, y: ty, rej: 0, vx: 0, vy: 0 };
  const dx = tx - prev.x, dy = ty - prev.y;
  const d = Math.hypot(dx, dy);
  if (d > REJECT_DIST && prev.rej < MAX_REJECT_FRAMES) {
    return { x: prev.x, y: prev.y, rej: prev.rej + 1, vx: prev.vx, vy: prev.vy }; // 이상치: 위치 유지
  }
  // 속도 벡터 평활 → 떨림(왕복)은 상쇄돼 작게, 실제 이동은 유지.
  const vx = prev.vx + (dx - prev.vx) * SMOOTH_VEL_BETA;
  const vy = prev.vy + (dy - prev.vy) * SMOOTH_VEL_BETA;
  const speed = Math.hypot(vx, vy);
  const a = Math.min(maxAlpha, minAlpha + (maxAlpha - minAlpha) * Math.min(1, speed / Math.max(1e-4, speedRef)));
  return { x: prev.x + dx * a, y: prev.y + dy * a, rej: 0, vx, vy };
}

interface Props {
  currentFrame: number;
  currentTime: number;
  fps: number;
  visible: boolean;
  /** 영상 첫 프레임이 표시 가능해진 후 true. false면 오버레이를 그리지 않음(영상보다 먼저 표시 방지). */
  videoReady?: boolean;
  /** 영상 원본 해상도(px). object-fit:cover 크롭 영역 계산 → 오버레이를 영상에 정렬. 0이면 컨테이너 기준. */
  videoWidth?: number;
  videoHeight?: number;
  /** 영상 빈 곳 클릭(팝업 없을 때) → 재생/정지 토글. Video.js controls:false 라 직접 호출 필요. */
  onTogglePlay?: () => void;
  /** 카메라 파라미터 패널 표시 (영상제어 토글). 기본 true. */
  showPanel?: boolean;
  /** 카메라 파라미터 패널 top(px) — 노선 배너 아래로 배치. 기본 72. */
  topPx?: number;
  /** 하단 스테이션바 높이(px) — 우측 버튼을 좌측 패널과 같은 높이(bottom)에 맞추기 위함. */
  barHeight?: number;
  /** 부드러운 단조보간 재생시간(초) ref. VideoPlayer smoothTimeRef 전달 시
   *  라벨이 60fps로 매끄럽게 이동(일시정지·시크·배속 보정 포함). 없으면 prop 기반 추정. */
  timeRef?: React.MutableRefObject<number>;
}

// category → 이모지
const CATEGORY_EMOJI: Record<string, string> = {
  '터널': '🚇',
  '교량': '🌉',
  '역사': '🚉',
  '철도역': '🚉',
  '지장물': '🏢',
  '지장물L': '🏢',
  '측점': '📍',
  '구교': '🌉',
  '출입문': '🚪',
  '교차로': '🚦',
  '도로': '🛣️',
  '강.하천': '🌊',
  '마을': '🏘️',
  '산': '⛰️',
};

/** 라벨 색 밝기 판정 — 어두운 색이면 외곽선을 밝게 반전(가독성). */
function isDarkLabelColor(hex: string): boolean {
  const m = hex.match(/^#([0-9a-f]{6})$/i);
  if (!m) return false;
  const n = parseInt(m[1], 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return 0.299 * r + 0.587 * g + 0.114 * b < 96;
}

// 영상 오버레이엔 모든 선로 구조물(교량/터널/구교)을 라벨로 표출한다.
// 시설등급(시설종별) 표시 필터는 하단 스테이션바·RoutePanel 전용 → 영상은 항상 전부 표출.
// (역사=철도역은 type='station'이라 여기 미포함 → 스테이션바 전용 유지.)
const OVERLAY_STRUCT_CATEGORIES = new Set(['구교', '교량', '터널']);

// 화면표시 옵션 기본값 — 우측 하단 "기본값" 버튼으로 일괄 복귀. (useState 초기값과 단일 출처 공유.)
const DISPLAY_DEFAULTS = {
  showCenterline: true,
  showDronePath: true,
  dronePathZ: 58,
  dronePathAlpha: 0.75,
  clFx: true,        // 선형 표시 형태 — true=입체형(반투명 원통+유동 대시), false=기본형(단순 선)
  clTubeD: 1.2,      // 선형 튜브 지름(m) — 입체형에서 원통의 실제 지름
  clDotDiv: 10,      // 측점 사이 점 분할 수(N등분 — 10이면 10m 단위). 1=점 없음

  smoothHalf: 60,
  emaAlpha: 1.0,
  smoothMinAlpha: 0.12,  // 정지/떨림 시 최소 추종(작을수록 강한 평활)
  smoothSpeedRef: 0.010, // 즉시추종 기준 속도(클수록 더 강하게 평활)
  maxPoiRange: 1000,
  // false = 지면고도 기준(POI를 지면고도 z에 고정 → gap=드론고도−지면고도 자동변동, 드론 오르내려도 지물에 붙음).
  //         표고 미상(z=0) 라벨은 '경로 표고' 평면에 앵커 → 궤적과 같은 슬라이더로 함께 보정됨.
  // true = 드론−이격거리 고정(gap 상수). 드론 고도 변동 시 부정확.
  // 기본 false: 실측 z(회덕)는 지물에 정확히 붙고, 미상(제주)은 경로표고로 일괄 보정 가능.
  poiDroneHeight: false,
  droneHeightDrop: 24,
};

// 텍스트 사전 계산 캐시 (Map<frameNum, LabelCache>)
// 라벨 가시집합(프레임별) — 화면좌표가 아니라 '월드좌표'를 저장한다. RAF 가 매 프레임 연속
// 포즈(poseAt)로 직접 투영 → 라인처럼 부드럽게 이동. (precompute = 가시성/겹침 결정 전용)
interface LabelCache {
  stationLabels: { title: string; lat: number; lon: number; z: number }[];
  poiMarkers: { title: string; label: string; category: string; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; labelRow: number; labelRowCount: number; color?: string }[];
}

// 중심선 + 나침반 렌더 캐시 (per-frame, renderCacheRef)
interface RenderCache {
  // 선/궤적은 RAF에서 매 프레임 보간 포즈로 직접 투영(부드러운 갱신) → 여기 미보관.
  effectiveYaw: number;
  hFovRad: number;
  clCount: number;
  poiCount: number;
}

const cleanTitle = (t: string) => t.replace(/\s*\([상하]\)\s*$/, '').trim();

/** 구조물 base 이름(괄호 변형 제거): '회덕제1가도교(하)' → '회덕제1가도교'. 상/하 형제 판정용. */
const baseStruct = (t: string): string => t.replace(/\s*[(（].*$/, '').trim();

/** 속성에 '구분' 데이터가 있으면 그 값을 라벨로 사용(없으면 undefined). */
const guboonOf = (props?: { k: string; v: string }[]): string | undefined => {
  const v = props?.find((p) => p.k === '구분')?.v;
  return v && v.trim() ? v.trim() : undefined;
};

/**
 * 컴팩트 팝업용 기본 3필드: 시설종별 / 구조형식(상부구조형식) / 연장(m).
 * 존재하는 것만, 이 순서로 반환. 라벨 옆 항상표시용(클릭 시 전체 팝업).
 */
const compactFieldsOf = (props?: { k: string; v: string }[]): { k: string; v: string }[] => {
  if (!props) return [];
  const out: { k: string; v: string }[] = [];
  const pick = (label: string, pred: (k: string) => boolean): void => {
    const f = props.find((p) => pred(p.k));
    if (f?.v?.trim()) out.push({ k: label, v: f.v.trim() });
  };
  pick('시설종별', (k) => k === '시설종별');
  pick('구조형식', (k) => /구조형식/.test(k));
  pick('연장(m)', (k) => /연장/.test(k));
  pick('폭(m)', (k) => /폭/.test(k));
  pick('용도', (k) => /용도/.test(k));
  pick('준공연도', (k) => /준공/.test(k));
  return out;
};

/** 컴팩트에 들어가는 키인지(전체 보기에서 중복 제거 + 순서 정렬용). */
const isCompactKey = (k: string): boolean =>
  k === '시설종별' || /구조형식/.test(k) || /연장/.test(k) || /폭/.test(k) || /용도/.test(k) || /준공/.test(k);

/** 전체 보기 필드 순서 = 컴팩트(정해진 순서) 먼저, 그 뒤 나머지 속성(원본 순서). 클릭 전후 순서 일치. */
const orderedFullFields = (
  compact: { k: string; v: string }[],
  props: { k: string; v: string }[],
): { k: string; v: string }[] => [...compact, ...props.filter((p) => !isCompactKey(p.k))];

function stationOrder(title: string): number {
  const m = title.match(/(\d+)\s*[Kk+]\s*(\d+)/);
  if (!m) return 0;
  return parseInt(m[1]) * 1000 + parseInt(m[2]);
}

// ── ParamRow ─────────────────────────────────────────────────────────────────

// 라벨 옆 작은 ⓘ — 마우스 오버 시 네이티브 툴팁으로 설명 표시(세로 공간 절약).
function InfoTip({ text }: { text: string }) {
  return (
    <span title={text} className="ml-1 cursor-help text-gray-600 hover:text-gray-300 align-middle">ⓘ</span>
  );
}

interface ParamRowProps {
  label: string; value: number; min: number; max: number; step: number;
  unit: string; decimals?: number; onChange: (v: number) => void;
  /** 있으면 라벨에 점선 밑줄+마우스오버 툴팁(설명). 별도 설명 div 대체 → 패널 높이 절약. */
  tip?: string;
}

function ParamRow({ label, value, min, max, step, unit, decimals = 1, onChange, tip }: ParamRowProps) {
  const fmt = useCallback((v: number) => v.toFixed(decimals), [decimals]);
  const [text, setText] = useState(() => fmt(value));
  const prevRef = useRef(value);
  useEffect(() => {
    if (prevRef.current !== value) { prevRef.current = value; setText(fmt(value)); }
  }, [value, fmt]);
  const commit = (s: string) => {
    const n = parseFloat(s);
    if (!isNaN(n)) {
      const c = Math.max(min, Math.min(max, n));
      onChange(c); setText(fmt(c)); prevRef.current = c;
    } else setText(fmt(value));
  };
  // 마우스 휠: 위 = +step, 아래 = −step (예: 카메라 파라미터 0.1 단위).
  // 슬라이더와 숫자 값 입력칸 양쪽 위에서 동작. 패널 스크롤을 막아야 하므로
  // non-passive 네이티브 리스너로 부착(React onWheel 은 passive).
  const sliderRef = useRef<HTMLInputElement>(null);
  const numRef = useRef<HTMLInputElement>(null);
  const wheelStateRef = useRef({ value, min, max, step, decimals, onChange });
  useEffect(() => { wheelStateRef.current = { value, min, max, step, decimals, onChange }; });
  useEffect(() => {
    const els = [sliderRef.current, numRef.current].filter((el): el is HTMLInputElement => !!el);
    if (!els.length) return;
    const onWheel = (e: WheelEvent): void => {
      e.preventDefault();
      e.stopPropagation();
      const s = wheelStateRef.current;
      const dir = e.deltaY < 0 ? 1 : -1;
      // 부동소수점 누적 오차 방지 — 표시 자릿수로 반올림
      const next = parseFloat(
        Math.max(s.min, Math.min(s.max, s.value + dir * s.step)).toFixed(Math.max(s.decimals, 3)),
      );
      if (next !== s.value) s.onChange(next);
    };
    els.forEach(el => el.addEventListener('wheel', onWheel, { passive: false }));
    return () => els.forEach(el => el.removeEventListener('wheel', onWheel));
  }, []);
  return (
    <div className="flex items-center gap-1.5 text-[11px]">
      <span
        title={tip}
        className={`text-gray-400 w-12 shrink-0 text-right ${tip ? 'cursor-help underline decoration-dotted decoration-gray-600 underline-offset-2' : ''}`}
      >{label}</span>
      <input ref={sliderRef} type="range" min={min} max={max} step={step} value={value}
        onChange={e => { const v = parseFloat(e.target.value); onChange(v); prevRef.current = v; setText(fmt(v)); }}
        className="flex-1 h-1 accent-yellow-400 cursor-pointer" />
      <input ref={numRef} type="number" min={min} max={max} step={step} value={text}
        onChange={e => setText(e.target.value)}
        onBlur={e => commit(e.target.value)}
        onKeyDown={e => { if (e.key === 'Enter') commit((e.target as HTMLInputElement).value); if (e.key === 'Escape') setText(fmt(value)); }}
        className="w-16 bg-black/60 border border-gray-700 rounded px-1 py-0.5 text-right font-mono text-yellow-300 text-[11px] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
      <span className="text-gray-500 text-[10px] w-5 shrink-0">{unit}</span>
    </div>
  );
}

// ── 메인 컴포넌트 ─────────────────────────────────────────────────────────────

export default function StationOverlay({ currentFrame, currentTime, fps, visible, videoReady = true, videoWidth = 0, videoHeight = 0, onTogglePlay, showPanel = true, topPx = 72, barHeight = 0, timeRef }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasSizeRef = useRef({ w: 0, h: 0 });

  // 데이터 ref
  const allDroneFramesRef = useRef<DroneFrameBasic[]>([]);
  const allCenterlinePointsRef = useRef<CenterlinePoint[]>([]);
  const clCumRef = useRef<number[]>([]);  // 중심선 정점 누적거리(m) — 선형 점 배치용
  const clStaAnchorsRef = useRef<{ cum: number; km: number }[]>([]); // 측점 체이니지 ↔ 누적거리 앵커
  const tubeCanvasRef = useRef<HTMLCanvasElement | null>(null); // 원통 셸 오프스크린(불투명→일괄 알파 합성)
  const allGeoStationsRef = useRef<GeoPoint[]>([]);
  const allPoisRef = useRef<GeoPoint[]>([]);
  const allStructuresRef = useRef<GeoPoint[]>([]);  // 교량/터널/구교 → POI처럼 표시

  // 현재 상태 ref
  const currentDroneFrameRef = useRef<DroneFrameBasic | null>(null);
  const currentFrameNumRef = useRef<number>(0);       // RAF에서 Map 조회용
  const currentFrameIdxRef = useRef<number>(0);       // smoothFrame용 배열 인덱스
  const currentTimeSecRef = useRef<number>(0);        // 마지막으로 알려진 재생 시간
  const timeUpdateWallRef = useRef<number>(performance.now()); // currentTime 갱신된 시각
  const paramsRef = useRef<CameraParams>(DEFAULT_CAMERA_PARAMS);
  const visibleRef = useRef(visible);
  const videoReadyRef = useRef(videoReady);
  const videoSizeRef = useRef({ w: videoWidth, h: videoHeight });
  const barHeightRef = useRef(barHeight);  // 하단 스테이션바 높이(px) — 팝업/라벨 유효 하단 = H − barHeight
  useEffect(() => { barHeightRef.current = barHeight; }, [barHeight]);
  // 영상 실제 fps — 부모(VideoPlayer)가 데이터(마지막 프레임 번호)+영상길이로 계산해 prop 으로 전달.
  //   프레임번호↔시간 변환의 기준(고정 29.97 대신 영상별 자동). 0/미정이면 VIDEO_FPS 폴백.
  const fpsRef = useRef(fps > 0 ? fps : VIDEO_FPS);
  useEffect(() => { if (fps > 0) fpsRef.current = fps; }, [fps]);
  // object-fit:cover 변환 (RAF에서 매 프레임 갱신, 포인터 핸들러도 참조). 정규(0~1, 영상프레임) → 화면 px.
  const coverRef = useRef({ offX: 0, offY: 0, dispW: 0, dispH: 0, W: 0, H: 0 });
  const worldOriginRef = useRef<{ lat: number; lon: number; alt: number } | undefined>(undefined);

  // 텍스트 사전 계산 Map
  const labelMapRef = useRef<Map<number, LabelCache>>(new Map());
  const precomputeIdRef = useRef(0);  // 진행 중 계산 취소용
  // 캐시 키(드론 프레임 번호, 오름차순) — RAF 가 최근접 키를 이진탐색으로 조회.
  const labelKeysRef = useRef<number[]>([]);
  // 직전 사전계산의 frames 참조 — 바뀌면(세그먼트 전환) 옛 캐시를 복사하지 않고 새로 시작.
  const lastPrecomputeFramesRef = useRef<DroneFrameBasic[] | null>(null);

  // 중심선 + 나침반 렌더 캐시 (per-frame)
  const renderCacheRef = useRef<RenderCache | null>(null);
  // 나침반 전용(측점선 visible 무관 항상 갱신·표시)
  const compassRef = useRef<{ effectiveYaw: number; hFovRad: number } | null>(null);
  // 나침반 미니맵(DOM) root — RAF 에서 --rot(=-yaw) 갱신. minimapRotRef=누적 회전(360° 언랩).
  const minimapRef = useRef<HTMLDivElement>(null);
  const minimapRotRef = useRef(0);
  // 지도 나침반용 현재 위치/방위 — RAF 가 매 프레임 갱신, MapCompass 가 읽음.
  const mapPoseRef = useRef<CompassPose>({ lat: 0, lon: 0, yaw: 0 });

  // UI state
  const [params, setParams] = useState<CameraParams>(DEFAULT_CAMERA_PARAMS);
  const [smoothHalf, setSmoothHalf] = useState(DISPLAY_DEFAULTS.smoothHalf);
  const smoothHalfRef = useRef(10);
  // 화면 EMA — 0.01은 과평활(지연 ~1.65s)로 카메라 이동 시 라벨이 늦게 따라옴.
  // 입력은 이미 smoothFrame(±10fr)으로 평활되므로 화면 EMA는 가볍게(0.4, 지연 ~25ms).
  const [emaAlpha, setEmaAlpha] = useState(DISPLAY_DEFAULTS.emaAlpha);
  const emaAlphaRef = useRef(0.4);
  // 속도적응 평활 — 떨림 억제 강도/기준속도(라벨·팝업 1배속 떨림 튜닝).
  const [smoothMinAlpha, setSmoothMinAlpha] = useState(DISPLAY_DEFAULTS.smoothMinAlpha);
  const smoothMinAlphaRef = useRef(DISPLAY_DEFAULTS.smoothMinAlpha);
  const [smoothSpeedRef, setSmoothSpeedRef] = useState(DISPLAY_DEFAULTS.smoothSpeedRef);
  const smoothSpeedRefRef = useRef(DISPLAY_DEFAULTS.smoothSpeedRef);
  // POI 표시 범위(m) — 드론 위치와의 수평 직선거리(distH, 고도차 무시). 이 범위 안이면 표시,
  //   밖이면 제외. (이전: 진행방향 앞/옆 비등방 → 단일 반경으로 통합.) 패널에서 실시간 조절.
  const [maxPoiRange, setMaxPoiRange] = useState(DISPLAY_DEFAULTS.maxPoiRange);
  const maxPoiRangeRef = useRef(DISPLAY_DEFAULTS.maxPoiRange);
  // 비교 테스트: POI 높이를 선로표고(false) 대신 '드론 고도 − N미터'(true)로. N=droneHeightDrop.
  const [poiDroneHeight, setPoiDroneHeight] = useState(DISPLAY_DEFAULTS.poiDroneHeight);
  const [droneHeightDrop, setDroneHeightDrop] = useState(DISPLAY_DEFAULTS.droneHeightDrop);
  // 드론 경로 가시화 — 드론의 GPS 경로(lat/lon)를 지정 표고 z 에 투영해 선으로 표시.
  // 선형/드론궤적 토글은 설정 스토어로 공유 → VideoPlayer 하단 바 버튼에서도 제어.
  const showDronePath = useSettingsStore(s => s.showDronePath);
  const setShowDronePath = useSettingsStore(s => s.setShowDronePath);
  const [dronePathZ, setDronePathZ] = useState(DISPLAY_DEFAULTS.dronePathZ);   // 기본 경로 표고
  const [clFx, setClFx] = useState(DISPLAY_DEFAULTS.clFx);                     // 선형 입체 효과 on/off
  const clFxRef = useRef(DISPLAY_DEFAULTS.clFx);
  const [clTubeD, setClTubeD] = useState(DISPLAY_DEFAULTS.clTubeD);             // 선형 튜브 지름(m)
  const clTubeDRef = useRef(DISPLAY_DEFAULTS.clTubeD);
  const [clDotDiv, setClDotDiv] = useState(DISPLAY_DEFAULTS.clDotDiv);           // 측점 분할 수
  const clDotDivRef = useRef(DISPLAY_DEFAULTS.clDotDiv);
  const showDronePathRef = useRef(true);
  const dronePathZRef = useRef(78);
  useEffect(() => { showDronePathRef.current = showDronePath; }, [showDronePath]);
  useEffect(() => { dronePathZRef.current = dronePathZ; }, [dronePathZ]);
  useEffect(() => { clFxRef.current = clFx; }, [clFx]);
  useEffect(() => { clTubeDRef.current = clTubeD; }, [clTubeD]);
  useEffect(() => { clDotDivRef.current = clDotDiv; }, [clDotDiv]);
  // 선형(중심선) 독립 토글 + 드론경로 투명도(0~1) — 토글은 설정 스토어 공유(바 버튼 제어).
  const showCenterline = useSettingsStore(s => s.showCenterline);
  const setShowCenterline = useSettingsStore(s => s.setShowCenterline);
  const showCenterlineRef = useRef(true);
  useEffect(() => { showCenterlineRef.current = showCenterline; }, [showCenterline]);
  const [dronePathAlpha, setDronePathAlpha] = useState(DISPLAY_DEFAULTS.dronePathAlpha);
  const dronePathAlphaRef = useRef(0.75);
  useEffect(() => { dronePathAlphaRef.current = dronePathAlpha; }, [dronePathAlpha]);
  // 측점 진단 토글 버튼은 삭제됨. (HUD 표시는 VideoPlayer 에서 showStationDiag 구독)
  // POI 위치 편집(드래그) 모드
  const [editMode, setEditMode] = useState(false);
  const editModeRef = useRef(false);
  // FOV(초점) 보정 모드: POI 라벨을 실제 위치로 끌면 그 대응점으로 focal 을 역산.
  const [fovMode, setFovMode] = useState(false);
  const fovModeRef = useRef(false);
  // Yaw 보정 모드: POI 라벨을 실제 위치(좌우)로 끌면 필요한 Yaw± 를 역산.
  const [yawMode, setYawMode] = useState(false);
  const yawModeRef = useRef(false);
  // 라벨 속성 팝업(다중) — 항상 활성(모드 버튼 없음). 라벨 위에서만 캔버스가 입력을 받아 클릭→팝업.
  //   id=`${kind}:${title}`. 위치는 RAF 가 라벨 displayed 좌표로 매 프레임 갱신(재생 중 따라 이동).
  type InfoPopup = { id: string; kind: 'poi' | 'station'; title: string; category: string; lat: number; lon: number; z: number; dist: number | null; sx: number; sy: number; props?: { k: string; v: string }[];
    /** 컴팩트 기본필드(시설종별/구조형식/연장/용도/준공연도). 있으면 라벨 옆 자동표시. */
    compact?: { k: string; v: string }[];
    /** true=전체 속성, false/undefined=컴팩트. 팝업 클릭으로 토글. */
    expanded?: boolean;
    /** true=가시 구조물에 따라 자동생성/제거(✕ 없음). */
    auto?: boolean };
  const [infoPopups, setInfoPopups] = useState<InfoPopup[]>([]);
  const infoPopupsRef = useRef<InfoPopup[]>([]);
  useEffect(() => {
    infoPopupsRef.current = infoPopups;
    // 팝업 제거 경로가 여럿(RAF off-4프레임 / sync toRemoveIds / 수동 ✕·ESC·빈곳클릭)인데
    //   보조 맵 정리는 RAF 경로만 했었다 → sync/수동 제거 시 popupPosRef 잔존. 그러면 재추가 때
    //   hidden-mount 가드(!popupPosRef.has)가 무력화돼 라벨 없이 팝업만 stale 위치에 번쩍인다.
    //   → infoPopups 변경 시 사라진 id 의 보조 맵을 일괄 정리(단일 출처). (popupElsRef 는 ref 콜백이 정리.)
    const ids = new Set(infoPopups.map(p => p.id));
    for (const id of popupPosRef.current.keys()) if (!ids.has(id)) popupPosRef.current.delete(id);
    for (const id of popupMissRef.current.keys()) if (!ids.has(id)) popupMissRef.current.delete(id);
    for (const id of popupFlipRef.current.keys()) if (!ids.has(id)) popupFlipRef.current.delete(id);
  }, [infoPopups]);
  // 영상 진행 방향('상'|'하') — 겹치는 상/하 형제 구조물 중 이 방향을 우선 표시. (값 주입은 아래 routeMeta 구독 후)
  const routeDirRef = useRef<'상' | '하' | null>(null);
  // 이번 프레임 가시 컴팩트-구조물 (title → {category, compact}). RAF 가 채우고 sync 인터벌이 읽음.
  const visStructRef = useRef<Map<string, { category: string; compact: { k: string; v: string }[] }>>(new Map());
  const popupElsRef = useRef<Map<string, HTMLDivElement>>(new Map());
  const popupMissRef = useRef<Map<string, number>>(new Map());  // 라벨이 화면 밖인 연속 프레임 수(제거 유예)
  const popupPosRef = useRef<Map<string, { x: number; y: number }>>(new Map());  // 팝업 위치 EMA(물결 방지)
  const popupFlipRef = useRef<Map<string, 'above' | 'below'>>(new Map());  // 팝업 배치면(위/아래) — 히스테리시스로 경계 왕복(번쩍임) 방지
  // 라벨 히트박스(아이콘+글자 영역, 화면 px) — RAF 가 매 프레임 갱신, 클릭/호버 히트테스트에 사용.
  const labelHitRef = useRef<{ kind: 'poi' | 'station'; title: string; x0: number; y0: number; x1: number; y1: number }[]>([]);
  const hasPopupRef = useRef(false);
  const onTogglePlayRef = useRef<(() => void) | undefined>(undefined);
  const poiDroneHeightRef = useRef(DISPLAY_DEFAULTS.poiDroneHeight);
  const droneHeightDropRef = useRef(DISPLAY_DEFAULTS.droneHeightDrop);
  const overridesRef = useRef<PoiOverrideMap>({});
  // POI 라벨이 연속으로 화면 안에 그려진 프레임 수(title→streak). 팝업 '추가'에 히스테리시스를 줘
  //   경계에서 라벨이 미세하게 깜빡일 때(1~2프레임) 팝업이 재생성돼 번쩍이는 것을 막는다.
  const poiOnScreenStreakRef = useRef<Map<string, number>>(new Map());
  // 드래그 상태: 선택 POI + lat/lon(고정) + 시작 z + 시작 화면좌표. 드롭 시 세로위치로 z 역산.
  const dragRef = useRef<{ title: string; lat: number; lon: number; z0: number; sx: number; sy: number } | null>(null);
  const dragPosRef = useRef<{ x: number; y: number } | null>(null);
  const [dragTitle, setDragTitle] = useState<string | null>(null);
  const [demBusy, setDemBusy] = useState(false);
  // 선택된 POI의 표고 직접 조절 (슬라이더). selZBase=선로표고(슬라이더 범위 기준).
  const [selPoi, setSelPoi] = useState<string | null>(null);
  const [selZ, setSelZ] = useState(0);
  const [selZBase, setSelZBase] = useState(42);
  // 표시 위치 EMA 상태 (RAF 내부 유지). rej = 연속 이상치 거부 횟수.
  const displayedStRef = useRef<Map<string, DispPos>>(new Map());
  const displayedPoiRef = useRef<Map<string, DispPos>>(new Map());
  const [showControls, setShowControls] = useState(false);
  const [showDisplay, setShowDisplay] = useState(false);
  const [droneFramesLoaded, setDroneFramesLoaded] = useState(false);
  const [geoDataLoaded, setGeoDataLoaded] = useState(false);
  const [clDataLoaded, setClDataLoaded] = useState(false);
  const [panelDroneFrame, setPanelDroneFrame] = useState<DroneFrameBasic | null>(null);

  useEffect(() => { paramsRef.current = params; }, [params]);
  useEffect(() => { visibleRef.current = visible; }, [visible]);
  useEffect(() => { videoReadyRef.current = videoReady; }, [videoReady]);
  useEffect(() => { videoSizeRef.current = { w: videoWidth, h: videoHeight }; }, [videoWidth, videoHeight]);
  useEffect(() => { smoothHalfRef.current = smoothHalf; }, [smoothHalf]);
  useEffect(() => { emaAlphaRef.current = emaAlpha; }, [emaAlpha]);
  useEffect(() => { smoothMinAlphaRef.current = smoothMinAlpha; }, [smoothMinAlpha]);
  useEffect(() => { smoothSpeedRefRef.current = smoothSpeedRef; }, [smoothSpeedRef]);
  useEffect(() => { maxPoiRangeRef.current = maxPoiRange; }, [maxPoiRange]);
  useEffect(() => { editModeRef.current = editMode; }, [editMode]);
  useEffect(() => { fovModeRef.current = fovMode; }, [fovMode]);
  useEffect(() => { yawModeRef.current = yawMode; }, [yawMode]);

  // 컴팩트 자동 팝업 동기화 — visStructRef(연속 온스크린 라벨) 마다 라벨 옆 DOM 팝업을 자동 '생성'만.
  //   제거는 RAF 가 단일 권한(onScreenLabels + 4프레임 유예)으로 담당 → add/remove 충돌(번쩍임) 제거.
  // (캔버스 텍스트는 흐려서 DOM 팝업으로 선명하게. 위치는 RAF 가 displayed 좌표로 매 프레임 갱신.)
  // 60fps 루프에서 setState 남발 방지 → 150ms 인터벌로 가시집합 변화시에만 갱신.
  useEffect(() => {
    const tick = (): void => {
      const vis = visStructRef.current;
      const cur = infoPopupsRef.current;
      const c = coverRef.current;
      const toAdd: InfoPopup[] = [];
      vis.forEach((info, title) => {
        const id = `poi:${title}`;
        if (cur.some(p => p.id === id)) return;
        const disp = displayedPoiRef.current.get(title);
        if (!disp) return;
        const obj = allStructuresRef.current.concat(allPoisRef.current).find(p => p.title === title);
        toAdd.push({
          id, kind: 'poi', title, category: info.category,
          lat: obj?.lat ?? 0, lon: obj?.lon ?? 0, z: 0, dist: null,
          sx: c.offX + disp.x * c.dispW, sy: c.offY + disp.y * c.dispH,
          props: obj?.props, compact: info.compact, auto: true, expanded: false,
        });
      });
      if (toAdd.length) {
        setInfoPopups(prev => {
          const ids = new Set(prev.map(p => p.id));
          return [...prev, ...toAdd.filter(p => !ids.has(p.id))];
        });
      }
    };
    const iv = setInterval(tick, 150);
    return () => clearInterval(iv);
  }, []);

  // ESC → 클릭으로 연/펼친 팝업만 닫기(수동 팝업 제거 + 펼친 것 컴팩트로 접기).
  //   기본 자동 컴팩트 팝업은 유지(닫지 않음).
  useEffect(() => {
    const onKey = (e: KeyboardEvent): void => {
      if (e.key !== 'Escape') return;
      if (infoPopupsRef.current.some(p => !p.auto || p.expanded)) {
        setInfoPopups(prev => prev.filter(p => p.auto).map(p => ({ ...p, expanded: false })));
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  useEffect(() => { hasPopupRef.current = infoPopups.length > 0; }, [infoPopups]);
  useEffect(() => { onTogglePlayRef.current = onTogglePlay; }, [onTogglePlay]);
  useEffect(() => { poiDroneHeightRef.current = poiDroneHeight; }, [poiDroneHeight]);
  useEffect(() => { droneHeightDropRef.current = droneHeightDrop; }, [droneHeightDrop]);

  const setParam = useCallback(<K extends keyof CameraParams>(key: K, val: CameraParams[K]) =>
    setParams(prev => ({ ...prev, [key]: val })), []);

  const nearestCL = useCallback((lat: number, lon: number): CenterlinePoint | null => {
    const pts = allCenterlinePointsRef.current;
    if (!pts.length) return null;
    let best = pts[0], bestD = (best.lat - lat) ** 2 + (best.lon - lon) ** 2;
    for (const pt of pts) {
      const d = (pt.lat - lat) ** 2 + (pt.lon - lon) ** 2;
      if (d < bestD) { bestD = d; best = pt; }
    }
    return best;
  }, []);

  /** 중심선 '세그먼트 투영' 최근접점 — 정점 스냅이 아니라 선 위의 정확한 위치.
   *  LineString 중심선(예: 제주 146정점)은 직선 구간 정점이 성겨서, 정점 스냅(nearestCL)을
   *  측점 라벨에 쓰면 0k200~0k700 같은 직선 구간 측점들이 굽이 정점으로 뭉쳐 버린다. */
  const projectCL = useCallback((lat: number, lon: number): CenterlinePoint | null => {
    const pts = allCenterlinePointsRef.current;
    if (pts.length < 2) return nearestCL(lat, lon);
    const k = Math.cos((lat * Math.PI) / 180);
    const px = lon * k, py = lat;
    let bestD = Infinity, bl = pts[0].lat, bo = pts[0].lon, bz = pts[0].z;
    for (let i = 0; i < pts.length - 1; i++) {
      const a = pts[i], b = pts[i + 1];
      const ax = a.lon * k, ay = a.lat, bx = b.lon * k, by = b.lat;
      const dx = bx - ax, dy = by - ay;
      const L2 = dx * dx + dy * dy;
      const t = L2 === 0 ? 0 : Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / L2));
      const cx = ax + dx * t, cy = ay + dy * t;
      const d = (px - cx) ** 2 + (py - cy) ** 2;
      if (d < bestD) { bestD = d; bl = cy; bo = cx / k; bz = a.z + (b.z - a.z) * t; }
    }
    return { lat: bl, lon: bo, z: bz };
  }, [nearestCL]);

  // 클라이언트 지리정보 스토어 구독 (서버 /api/geo/* 대체)
  const storeStations = useGeoStore(s => s.stations);
  const storePois = useGeoStore(s => s.pois);
  const storeCenterline = useGeoStore(s => s.centerline);
  const storeFrames = useGeoStore(s => s.frames);
  const storeFrameSynced = useGeoStore(s => s.frameSynced);
  const frameSyncedRef = useRef(false);
  useEffect(() => { frameSyncedRef.current = storeFrameSynced; }, [storeFrameSynced]);
  // 포즈 평활 유효 반폭 — 프레임 동기(djmd) 데이터는 상한 제한(회전 시 포즈 지연 제거).
  const poseHalf = useCallback((): number =>
    frameSyncedRef.current ? Math.min(smoothHalfRef.current, POSE_SMOOTH_SYNCED_MAX) : smoothHalfRef.current,
  []);
  const storeOrigin = useGeoStore(s => s.origin);
  const storeStructures = useGeoStore(s => s.structures);
  const routeMeta = useGeoStore(s => s.routeMeta);
  useEffect(() => {
    const d = routeMeta?.routeInfo?.direction ?? '';
    routeDirRef.current = d.includes('하') ? '하' : d.includes('상') ? '상' : null;
  }, [routeMeta]);
  // POI 겹침제외 토글(설정 스토어). false면 겹침 억제 없이 모든 POI 표시.
  const compassType = useSettingsStore(s => s.compassType);
  const setCompassType = useSettingsStore(s => s.setCompassType);
  const compassMapStyle = useSettingsStore(s => s.compassMapStyle);
  const setCompassMapStyle = useSettingsStore(s => s.setCompassMapStyle);
  const poiOverlapExclude = useSettingsStore(s => s.poiOverlapExclude);
  const overlapExcludeRef = useRef(true);
  useEffect(() => { overlapExcludeRef.current = poiOverlapExclude; }, [poiOverlapExclude]);
  // 좌측 노선 패널(RoutePanel) 표시 토글은 하단 재생바(VideoPlayer)로 이동.
  const storeBaseName = useGeoStore(s => s.baseName);
  const storeCameraInfo = useGeoStore(s => s.cameraInfo);
  const storeCameraJson = useGeoStore(s => s.cameraJson);
  const storeDisplayJson = useGeoStore(s => s.displayJson);
  const storePoiOverrides = useGeoStore(s => s.poiOverrides);
  const setPoiOverride = useGeoStore(s => s.setPoiOverride);
  const setPoiOverrides = useGeoStore(s => s.setPoiOverrides);
  const clearPoiOverride = useGeoStore(s => s.clearPoiOverride);
  // 경로 표고 슬라이더 상한 — 데이터 최대 표고 + 여유 (없으면 60 폴백).
  // 중심선이 없거나 z=0 인 데이터셋(예: 제주 DJI 로그)은 드론 고도(ASL)가 유일한 상한 근거 —
  // 지면은 드론보다 낮으므로 max(드론고도)까지 열어두면 어떤 지형이든 슬라이더로 도달 가능.
  const pathZMax = useMemo(() => {
    let m = 0;
    for (const c of storeCenterline) if (typeof c.z === 'number' && c.z > m) m = c.z;
    for (const f of storeFrames) if (typeof f.altitude === 'number' && f.altitude > m) m = f.altitude;
    return m > 0 ? Math.ceil(m + 10) : 60;
  }, [storeCenterline, storeFrames]);
  useEffect(() => { overridesRef.current = storePoiOverrides; }, [storePoiOverrides]);

  // ── 보정값 영속화 (baseName별 localStorage) ──────────────────────────────
  // 카메라 각도/내부표정(Yaw±/Pitch±/focal 등) + 표시설정을 데이터셋별로 저장·복원.
  // 한 번 튜닝하면 새로고침/재로드해도 유지 → "처음부터 맞게" 표시.
  const calibLoadedFor = useRef<string | null>(null);
  // 이 데이터셋에 저장된 보정값이 있었는지 — 카메라 감지값 자동 적용 여부 판단(사용자 튜닝 우선).
  const calibHadSavedRef = useRef(false);
  useEffect(() => {
    if (!storeBaseName || calibLoadedFor.current === storeBaseName) return;
    calibLoadedFor.current = storeBaseName;
    try {
      const raw = localStorage.getItem(`ghivideo:calib:${storeBaseName}`);
      calibHadSavedRef.current = !!raw;
      if (!raw) return;
      const c = JSON.parse(raw);
      if (c.params && typeof c.params === 'object') setParams(p => ({ ...p, ...c.params }));
      // maxPoiRange 우선, 없으면 구버전(maxPoiFront) 값으로 마이그레이션.
      if (typeof c.maxPoiRange === 'number') setMaxPoiRange(c.maxPoiRange);
      else if (typeof c.maxPoiFront === 'number') setMaxPoiRange(c.maxPoiFront);
      if (typeof c.smoothHalf === 'number') setSmoothHalf(c.smoothHalf);
      if (typeof c.emaAlpha === 'number') setEmaAlpha(c.emaAlpha);
      if (typeof c.smoothMinAlpha === 'number') setSmoothMinAlpha(c.smoothMinAlpha);
      if (typeof c.smoothSpeedRef === 'number') setSmoothSpeedRef(c.smoothSpeedRef);
    } catch { /* noop */ }
  }, [storeBaseName]);
  useEffect(() => {
    if (!storeBaseName) return;
    const t = setTimeout(() => {
      try {
        localStorage.setItem(`ghivideo:calib:${storeBaseName}`, JSON.stringify({
          params, maxPoiRange, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef,
        }));
      } catch { /* noop */ }
    }, 800);
    return () => clearTimeout(t);
  }, [storeBaseName, params, maxPoiRange, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef]);

  // 영상(djmd)에서 감지한 카메라 초점거리 자동 적용.
  // 사용자가 f 를 직접 튜닝한 값(기본값 24 가 아닌 저장값)만 우선하고, 그 외(첫 로드,
  // 또는 저장은 됐지만 f 가 기본값 그대로인 경우)는 감지값을 적용한다.
  // (보정 자동저장은 폴더를 열기만 해도 기본값으로 저장되므로 '저장 존재' 만으론 튜닝 여부 판단 불가)
  const camAppliedFor = useRef<string | null>(null);
  useEffect(() => {
    if (!storeBaseName || !storeCameraInfo?.focalLen35) return;
    if (camAppliedFor.current === storeBaseName) return;
    camAppliedFor.current = storeBaseName;
    const f = storeCameraInfo.focalLen35;
    const model = storeCameraInfo.model;
    setParams(p => {
      const focalTuned = calibHadSavedRef.current &&
        Math.abs(p.focalLen - DEFAULT_CAMERA_PARAMS.focalLen) > 0.01;
      if (focalTuned) {
        console.log(`[camera] ${model} 감지 (${f}mm) — 사용자 튜닝 f=${p.focalLen}mm 유지 (패널 '적용'으로 교체 가능)`);
        return p;
      }
      console.log(`[camera] ${model} 감지 → focal ${f}mm 자동 적용`);
      return { ...p, focalLen: f };
    });
  }, [storeBaseName, storeCameraInfo]);

  // 폴더의 <영상 base>.camera.json 카메라 파라미터 — 최우선 적용(localStorage/감지값 위에).
  // 이 effect 는 calib 복원·감지값 적용 effect 뒤에 선언되어 함수형 업데이트가 마지막에 반영된다.
  const camJsonAppliedFor = useRef<string | null>(null);
  useEffect(() => {
    if (!storeBaseName || !storeCameraJson) return;
    if (camJsonAppliedFor.current === storeBaseName) return;
    camJsonAppliedFor.current = storeBaseName;
    const cam = storeCameraJson;
    setParams(p => {
      const next = { ...p };
      for (const [k, v] of Object.entries(cam)) {
        if (k in next && typeof v === 'number' && isFinite(v)) (next as unknown as Record<string, number>)[k] = v;
      }
      return next;
    });
    console.log('[camera] <base>.camera.json 파라미터 적용(최우선):', cam);
  }, [storeBaseName, storeCameraJson]);

  // 현재 카메라 파라미터를 사용자 PC 에 `camera.json`(단순 이름 규칙)으로 다운로드 저장.
  // Yaw±(자동추정/드래그 역산 결과) 포함 전체 파라미터가 담긴다.
  // 받은 파일을 영상 폴더에 넣어두면 다음 폴더 선택 때 최우선으로 자동 적용된다.
  const [camSaveState, setCamSaveState] = useState<'idle' | 'ok'>('idle');
  // 환경설정 파일 이름 — 폴더의 CSV(비행로그) 이름 → route.json 노선명 → 영상 base 순.
  // 예: "제주 중산간도로 경로 1-1.camera.json" (로더의 *.camera.json 규칙으로 자동 인식)
  const settingsBaseName = useCallback((): string => {
    const geo = useGeoStore.getState();
    const csv = geo.folderFiles.find((f) => /\.csv$/i.test(f.name));
    if (csv) return csv.name.replace(/\.csv$/i, '');
    const rn = geo.routeMeta?.routeInfo?.name;
    if (rn && rn.trim()) return rn.trim();
    return geo.baseName ?? 'settings';
  }, []);

  const saveCameraToPc = useCallback(() => {
    const geo = useGeoStore.getState();
    const payload = {
      camera: paramsRef.current,
      model: geo.cameraInfo?.model,
      savedAt: new Date().toISOString(),
    };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${settingsBaseName()}.camera.json`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 5000);
    setCamSaveState('ok');
    setTimeout(() => setCamSaveState('idle'), 2500);
  }, [settingsBaseName]);

  // 폴더의 <영상 base>.display.json 화면표시 옵션 자동 적용 — 'PC에 저장' 버튼과 왕복.
  // localStorage 복원(calib effect)보다 뒤에 선언되어 파일 값이 우선 반영된다.
  const dispJsonAppliedFor = useRef<string | null>(null);
  useEffect(() => {
    if (!storeBaseName || !storeDisplayJson) return;
    if (dispJsonAppliedFor.current === storeBaseName) return;
    dispJsonAppliedFor.current = storeBaseName;
    const d = storeDisplayJson;
    const num = (k: string): number | undefined =>
      typeof d[k] === 'number' && isFinite(d[k] as number) ? (d[k] as number) : undefined;
    const bool = (k: string): boolean | undefined =>
      typeof d[k] === 'boolean' ? (d[k] as boolean) : undefined;
    if (num('dronePathZ') !== undefined) setDronePathZ(num('dronePathZ')!);
    if (bool('clFx') !== undefined) setClFx(bool('clFx')!);
    if (num('clTubeD') !== undefined) setClTubeD(num('clTubeD')!);
    if (num('clDotDiv') !== undefined) setClDotDiv(num('clDotDiv')!);
    if (num('dronePathAlpha') !== undefined) setDronePathAlpha(num('dronePathAlpha')!);
    if (num('smoothHalf') !== undefined) setSmoothHalf(num('smoothHalf')!);
    if (num('emaAlpha') !== undefined) setEmaAlpha(num('emaAlpha')!);
    if (num('smoothMinAlpha') !== undefined) setSmoothMinAlpha(num('smoothMinAlpha')!);
    if (num('smoothSpeedRef') !== undefined) setSmoothSpeedRef(num('smoothSpeedRef')!);
    if (num('maxPoiRange') !== undefined) setMaxPoiRange(num('maxPoiRange')!);
    if (bool('poiDroneHeight') !== undefined) setPoiDroneHeight(bool('poiDroneHeight')!);
    if (num('droneHeightDrop') !== undefined) setDroneHeightDrop(num('droneHeightDrop')!);
    const ss = useSettingsStore.getState();
    if (bool('showCenterline') !== undefined) ss.setShowCenterline(bool('showCenterline')!);
    if (bool('showDronePath') !== undefined) ss.setShowDronePath(bool('showDronePath')!);
    if (bool('showRoutePanel') !== undefined) ss.setShowRoutePanel(bool('showRoutePanel')!);
    if (bool('poiOverlapExclude') !== undefined) ss.setPoiOverlapExclude(bool('poiOverlapExclude')!);
    if (d.compassType === 'analog' || d.compassType === 'map') ss.setCompassType(d.compassType);
    if (d.compassMapStyle === 'street' || d.compassMapStyle === 'sat') ss.setCompassMapStyle(d.compassMapStyle);
    if (d.gradeFilter && typeof d.gradeFilter === 'object') {
      for (const [g, v] of Object.entries(d.gradeFilter as Record<string, unknown>)) {
        if (typeof v === 'boolean') ss.setGradeFilter(g, v);
      }
    }
    console.log('[display] <base>.display.json 화면표시 옵션 적용:', d);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [storeBaseName, storeDisplayJson]);

  // 현재 화면표시 옵션을 사용자 PC 에 `display.json`(단순 이름 규칙)으로 다운로드 저장.
  // 받은 파일을 영상 폴더에 넣어두면 다음 폴더 선택 때 자동 적용된다.
  const [dispSaveState, setDispSaveState] = useState<'idle' | 'ok'>('idle');
  const saveDisplayToPc = useCallback(() => {
    const ss = useSettingsStore.getState();
    const payload = {
      display: {
        dronePathZ, dronePathAlpha, clFx, clTubeD, clDotDiv, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef,
        maxPoiRange, poiDroneHeight, droneHeightDrop,
        showCenterline: ss.showCenterline,
        showDronePath: ss.showDronePath,
        showRoutePanel: ss.showRoutePanel,
        poiOverlapExclude: ss.poiOverlapExclude,
        compassType: ss.compassType,
        compassMapStyle: ss.compassMapStyle,
        gradeFilter: ss.gradeFilter,
      },
      savedAt: new Date().toISOString(),
    };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${settingsBaseName()}.display.json`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 5000);
    setDispSaveState('ok');
    setTimeout(() => setDispSaveState('idle'), 2500);
  }, [dronePathZ, dronePathAlpha, clFx, clTubeD, clDotDiv, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef, maxPoiRange, poiDroneHeight, droneHeightDrop, settingsBaseName]);

  // Yaw 자동 추정 — 전진 비행 구간에서 GPS 진행 방위(정확) vs 짐벌 헤딩(나침반 오차 포함)의
  // 차이 중앙값을 Yaw± 로 설정. 카메라가 진행방향을 보며 촬영하는 도로 추종 비행 가정(근사치).
  const autoEstimateYaw = useCallback(() => {
    const frames = allDroneFramesRef.current;
    if (!frames || frames.length < 30) { alert('드론 로그가 부족해 자동 추정할 수 없습니다.'); return; }
    const fps = fpsRef.current;
    const cosLat = Math.cos((frames[0].lat * Math.PI) / 180);
    const STEP = 10; // 진행방위 계산 창(≈1초) — GPS 지터 평활
    const diffs: number[] = [];
    for (let i = STEP; i < frames.length; i++) {
      const a = frames[i - STEP], b = frames[i];
      const dt = (b.frame - a.frame) / fps;
      if (dt <= 0) continue;
      const dx = (b.lon - a.lon) * 111000 * cosLat;
      const dy = (b.lat - a.lat) * 111000;
      if (Math.hypot(dx, dy) / dt < 2) continue;             // 정지/호버 구간 제외
      const course = (Math.atan2(dx, dy) * 180) / Math.PI;    // 진행 방위 (North=0, CW)
      let d = course - frames[i - (STEP >> 1)].yaw;            // 진행방위 − 짐벌 헤딩
      d = ((d + 540) % 360) - 180;
      if (Math.abs(d) < 60) diffs.push(d);                     // 옆을 보며 찍은 구간 제외
    }
    if (diffs.length < 20) { alert('전진 촬영 구간이 부족해 자동 추정할 수 없습니다.'); return; }
    diffs.sort((x, y) => x - y);
    const med = diffs[diffs.length >> 1];
    const next = Math.round(med * 10) / 10;
    setParam('yawOffset', next);
    console.log(`[yaw] 자동 추정: 유효 샘플 ${diffs.length}개, 중앙값 ${med.toFixed(2)}° → Yaw± ${next}° 적용`);
  }, [setParam]);

  // POI 보정(override: DEM 표고/드래그)도 baseName별 자동 저장·복원 → 새로고침해도 유지.
  const ovLoadedFor = useRef<string | null>(null);
  useEffect(() => {
    if (!storeBaseName || ovLoadedFor.current === storeBaseName) return;
    ovLoadedFor.current = storeBaseName;
    try {
      const raw = localStorage.getItem(`ghivideo:poiov:${storeBaseName}`);
      if (!raw) return;
      const saved = JSON.parse(raw);
      if (saved && typeof saved === 'object') {
        // 폴더 파일 override 위에 localStorage(최근 편집) 병합.
        setPoiOverrides({ ...useGeoStore.getState().poiOverrides, ...saved });
      }
    } catch { /* noop */ }
  }, [storeBaseName, setPoiOverrides]);
  useEffect(() => {
    if (!storeBaseName) return;
    const t = setTimeout(() => {
      try { localStorage.setItem(`ghivideo:poiov:${storeBaseName}`, JSON.stringify(storePoiOverrides)); }
      catch { /* noop */ }
    }, 600);
    return () => clearTimeout(t);
  }, [storeBaseName, storePoiOverrides]);

  // 측점 (stationOrder 정렬 — 스토어가 이미 정렬해 두지만 방어적으로 동일 순서 보장)
  useEffect(() => {
    allGeoStationsRef.current = [...storeStations]
      .sort((a, b) => stationOrder(a.title) - stationOrder(b.title));
    allPoisRef.current = storePois;
    setGeoDataLoaded(storeStations.length > 0 || storePois.length > 0);
  }, [storeStations, storePois]);

  // 구조물(교량/터널/구교)을 영상 오버레이에 POI처럼 표시(거리필터 적용).
  //   - 영상은 시설등급 무관 모두 표출(신대천교(복) 등 포함). 스테이션바엔 시설등급 필터로 별도 제어.
  // lat/lon 없는 항목(측점기반 배치 등)도 제외.
  // 신포맷(지장물.kml '타입') 교량/터널은 POI 로도 등록됨 — 같은 이름이 POI 에 있으면
  // 영상 라벨이 이중 표출(파란 POI + 빨간 구조물, z 도 달라 위치 분리)되므로 구조물 쪽 제외.
  // (스테이션바 구조물 마크는 storeStructures 직접 사용이라 영향 없음)
  useEffect(() => {
    const poiTitles = new Set(storePois.map(p => p.title));
    allStructuresRef.current = storeStructures
      .filter((s): s is RouteStructure & { lat: number; lon: number } =>
        s.category != null && OVERLAY_STRUCT_CATEGORIES.has(s.category) &&
        typeof s.lat === 'number' && typeof s.lon === 'number' &&
        !poiTitles.has(s.name))
      .map(s => ({
        title: s.name,
        category: s.category ?? '구교',
        lat: s.lat, lon: s.lon, z: 0, type: 'poi' as const,
        props: s.props,
      }));
  }, [storeStructures, storePois]);

  // 중심선 (+ 누적거리, 측점 체이니지 앵커 — 10m 단위 선형 점 배치용)
  useEffect(() => {
    allCenterlinePointsRef.current = storeCenterline;
    const cum: number[] = [0];
    if (storeCenterline.length > 1) {
      const k = Math.cos((storeCenterline[0].lat * Math.PI) / 180) * 111000;
      for (let i = 1; i < storeCenterline.length; i++) {
        const a = storeCenterline[i - 1], b = storeCenterline[i];
        cum.push(cum[i - 1] + Math.hypot((b.lon - a.lon) * k, (b.lat - a.lat) * 111000));
      }
    }
    clCumRef.current = cum;
    // 측점(체이니지 값) ↔ 폴리라인 누적거리 앵커 — 측점 정점이 선형에 삽입되어 있어
    // 최근접 정점(5m 이내)이 곧 그 측점 위치. 점을 '측점 기준 10m 단위'로 정렬하는 근거.
    const anchors: { cum: number; km: number }[] = [];
    if (storeCenterline.length > 1 && storeStations.length) {
      const k2 = Math.cos((storeCenterline[0].lat * Math.PI) / 180) * 111000;
      for (const st of storeStations) {
        const m = st.title.match(/(\d+)\s*[Kk+]\s*(\d+)/);
        if (!m) continue;
        const km = parseInt(m[1], 10) * 1000 + parseInt(m[2], 10);
        let bi = -1, bd = Infinity;
        for (let i = 0; i < storeCenterline.length; i++) {
          const p = storeCenterline[i];
          const d = Math.hypot((p.lon - st.lon) * k2, (p.lat - st.lat) * 111000);
          if (d < bd) { bd = d; bi = i; }
        }
        if (bi >= 0 && bd < 5) anchors.push({ cum: cum[bi], km });
      }
      anchors.sort((a, b) => a.cum - b.cum);
    }
    clStaAnchorsRef.current = anchors;
    setClDataLoaded(storeCenterline.length > 0);
  }, [storeCenterline, storeStations]);

  // 드론 프레임
  useEffect(() => {
    allDroneFramesRef.current = storeFrames;
    // 세그먼트 전환 시 현재 프레임 추적 초기화 — 스테일 인덱스(이전 세그먼트 끝)로
    // 사전계산 시작 구간이 엉뚱해지는 것 방지. 다음 currentTime 틱에 정확히 재계산된다.
    currentFrameIdxRef.current = 0;
    currentFrameNumRef.current = storeFrames[0]?.frame ?? 0;
    setDroneFramesLoaded(storeFrames.length > 0);
  }, [storeFrames]);

  // ENU 월드 원점 — 스토어 origin 직접 사용 (서버 getWorldOrigin 대체)
  useEffect(() => {
    worldOriginRef.current = storeOrigin
      ? { lat: storeOrigin.lat, lon: storeOrigin.lon, alt: storeOrigin.alt }
      : undefined;
  }, [storeOrigin]);

  // 드론 프레임 이동 평균 (GPS/자세 노이즈 제거)
  // ※ 에지(회전 경계) 보존 적응형 창: 중심 프레임 yaw 와 차이가 임계(YAW_EDGE) 이내인
  //   인접 프레임까지만 좌우로 확장(최대 halfWin). 회전 구간이 직선 평균에 섞이지 않아:
  //     - 회전 중엔 창이 좁아 실제 자세를 즉시 추종(지연 없음),
  //     - 회전 종료 후엔 회전 프레임을 배제한 채 창이 '한 프레임씩' 부드럽게 재확장(튐 없음).
  //   직선에선 yaw 가 거의 일정 → 풀창(±halfWin)으로 GPS/자세 노이즈 억제.
  //   (이전 '변화율 기반 축소'는 회전 종료 시 창이 한꺼번에 재확장돼 회전 프레임이 다시 섞여
  //    한 번 튀는 부작용이 있었음 → 경계 보존 방식으로 교체.)
  const smoothFrame = useCallback((frames: DroneFrameBasic[], i: number, halfWin: number): DroneFrameBasic => {
    let lo = i, hi = i;
    if (frames.length > 1 && halfWin > 0) {
      const YAW_EDGE = 8; // deg — 중심 대비 이 이상 벌어지면 다른(회전) 구간으로 보고 평균 제외
      const yc = frames[i].yaw;
      const near = (idx: number) => Math.abs(((frames[idx].yaw - yc + 540) % 360) - 180) <= YAW_EDGE;
      const loMin = Math.max(0, i - halfWin);
      const hiMax = Math.min(frames.length - 1, i + halfWin);
      while (lo > loMin && near(lo - 1)) lo--;
      while (hi < hiMax && near(hi + 1)) hi++;
    }
    const n = hi - lo + 1;
    let lat = 0, lon = 0, altitude = 0, pitch = 0, roll = 0, sinYaw = 0, cosYaw = 0;
    for (let k = lo; k <= hi; k++) {
      const f = frames[k];
      lat += f.lat; lon += f.lon; altitude += f.altitude;
      pitch += f.pitch; roll += f.roll;
      const yr = f.yaw * Math.PI / 180;
      sinYaw += Math.sin(yr); cosYaw += Math.cos(yr);
    }
    return {
      ...frames[i],
      lat: lat / n, lon: lon / n, altitude: altitude / n,
      pitch: pitch / n, roll: roll / n,
      yaw: Math.atan2(sinYaw / n, cosYaw / n) * 180 / Math.PI,
    };
  }, []);

  // 선/궤적 투영 — RAF에서 매 프레임 보간 포즈로 호출(부드러운 갱신). refs만 읽으므로 stable.
  const buildLines = useCallback((drone: DroneFrameBasic) => {
    const params = paramsRef.current;
    const worldOrigin = worldOriginRef.current;
    const allCL = allCenterlinePointsRef.current;
    const frames = allDroneFramesRef.current;
    const CLIP_Z = 0.1;
    const oc = (px: number, py: number) =>
      (px < -0.1 ? 1 : 0) | (px > 1.1 ? 2 : 0) | (py < -0.1 ? 4 : 0) | (py > 1.1 ? 8 : 0);
    const segFrom = (c1: CameraCoords, c2: CameraCoords): [number, number, number, number] | null => {
      const z1 = c1.Zc, z2 = c2.Zc;
      if (z1 < CLIP_Z && z2 < CLIP_Z) return null;
      let px1: number, py1: number, px2: number, py2: number;
      if (z1 >= CLIP_Z && z2 >= CLIP_Z) {
        const p1 = pixelFromCamera(c1, params), p2 = pixelFromCamera(c2, params);
        px1 = p1.pxRaw; py1 = p1.pyRaw; px2 = p2.pxRaw; py2 = p2.pyRaw;
      } else {
        const t = (CLIP_Z - z1) / (z2 - z1);
        const cClip: CameraCoords = { Xc: c1.Xc + t*(c2.Xc-c1.Xc), Yc: c1.Yc + t*(c2.Yc-c1.Yc), Zc: CLIP_Z };
        if (z1 < CLIP_Z) {
          const p1 = pixelFromCamera(cClip, params), p2 = pixelFromCamera(c2, params);
          px1 = p1.pxRaw; py1 = p1.pyRaw; px2 = p2.pxRaw; py2 = p2.pyRaw;
        } else {
          const p1 = pixelFromCamera(c1, params), p2 = pixelFromCamera(cClip, params);
          px1 = p1.pxRaw; py1 = p1.pyRaw; px2 = p2.pxRaw; py2 = p2.pyRaw;
        }
      }
      if (oc(px1, py1) & oc(px2, py2)) return null;
      return [px1, py1, px2, py2];
    };

    const centerlineSegs: [number, number, number, number][] = [];
    // 튜브 레일(입체형) — 세그먼트를 ~15m 분할, 분할점 사이 [x1,y1,x2,y2,평균거리m].
    // 폭은 그리기에서 지름/거리 원근 환산.
    const railTubes: number[][] = [];
    // 유동 펄스 — 체이니지(월드)에 고정된 점 [x,y,거리m]. 화면 대시는 근거리에서
    // 지면 대비 역행처럼 보이므로, 월드 좌표로 실속도 이동시켜 항상 '앞으로' 흐르게.
    const railPulses: number[][] = [];
    if (showCenterlineRef.current && allCL.length) {
      // 표고 미상(z≤0) 중심선(예: 제주 KML 선형 — 고도 전부 0)은 '경로 표고' 평면에 앵커 —
      // 측점/POI 라벨과 동일 기준. z=0 그대로 투영하면 해수면 높이로 그려져 크게 어긋난다.
      const CL_Z = dronePathZRef.current;
      // 선형은 '표출된 마지막 측점'까지만 — 표시 반경(maxPoiRange) 안에 들어온 측점 중
      // 가장 먼 것의 거리(+10m)로 클립. 경계를 가로지르는 세그먼트는 경계 지점에서 잘라 그린다
      // (정점 간격이 긴 직선 구간에서 세그먼트 통째 그리기로 마지막 측점 너머 긴 꼬리가 남던 문제).
      const MAX_R = maxPoiRangeRef.current;
      const cosLat = Math.cos((drone.lat * Math.PI) / 180);
      let clipR = 0;
      for (const st of allGeoStationsRef.current) {
        const d = Math.hypot((st.lat - drone.lat) * 111000, (st.lon - drone.lon) * 111000 * cosLat);
        if (d <= MAX_R && d > clipR) clipR = d;
      }
      clipR = clipR > 0 ? Math.min(MAX_R, clipR + 10) : MAX_R;
      // 드론 기준 동서/남북(m) 좌표 — 세그먼트·클립원 교점 계산용
      const enOf = (p: { lat: number; lon: number }): [number, number] => [
        (p.lon - drone.lon) * 111000 * cosLat,
        (p.lat - drone.lat) * 111000,
      ];
      // P0→P1 세그먼트가 반지름 clipR 원과 만나는 t(0~1) 목록(오름차순, 최대 2개).
      const clipTs = (e0: [number, number], e1: [number, number]): number[] => {
        const dx = e1[0] - e0[0], dy = e1[1] - e0[1];
        const a = dx * dx + dy * dy;
        if (a === 0) return [];
        const b = 2 * (e0[0] * dx + e0[1] * dy);
        const c = e0[0] * e0[0] + e0[1] * e0[1] - clipR * clipR;
        const disc = b * b - 4 * a * c;
        if (disc < 0) return [];
        const sq = Math.sqrt(disc);
        return [(-b - sq) / (2 * a), (-b + sq) / (2 * a)].filter((t) => t >= 0 && t <= 1);
      };
      // 드론높이 모드: 측점/POI 라벨과 동일한 '드론고도 − 이격거리' 평면에 투영 —
      // 옵션 적용 시 라벨만 이동하고 선형이 지형 z 에 남아 서로 분리되는 것을 방지
      // (측점 POI 와 빨간 선형이 항상 같은 선상에 놓이도록 높이 규칙 통일).
      const planeZ = poiDroneHeightRef.current
        ? drone.altitude - (params.geoidOffset ?? 0) - droneHeightDropRef.current
        : null;
      const projCL = (lat: number, lon: number, z: number): CameraCoords =>
        toCameraCoords(drone, lat, lon, planeZ ?? (z > 0 ? z : CL_Z), params, worldOrigin);
      // 진행방향 벡터(동/북) — 유동 대시가 '가는 방향'으로 흐르도록 세그먼트 정렬 기준.
      // 실제 이동(±3행 GPS 변위) 우선, 이동이 미미(호버)하면 카메라 yaw 폴백.
      let travelE = Math.sin((drone.yaw * Math.PI) / 180);
      let travelN = Math.cos((drone.yaw * Math.PI) / 180);
      {
        const fr = allDroneFramesRef.current;
        const ci = currentFrameIdxRef.current;
        if (fr.length > 6) {
          const A = fr[Math.max(0, ci - 3)], B = fr[Math.min(fr.length - 1, ci + 3)];
          const de = (B.lon - A.lon) * cosLat, dn = B.lat - A.lat;
          if (Math.hypot(de, dn) * 111000 > 1) { travelE = de; travelN = dn; }
        }
      }
      for (let i = 1; i < allCL.length; i++) {
        const p0 = allCL[i - 1], p1 = allCL[i];
        const e0 = enOf(p0), e1 = enOf(p1);
        const in0 = Math.hypot(e0[0], e0[1]) <= clipR;
        const in1 = Math.hypot(e1[0], e1[1]) <= clipR;
        const lerp = (t: number) => ({
          lat: p0.lat + (p1.lat - p0.lat) * t,
          lon: p0.lon + (p1.lon - p0.lon) * t,
          z: p0.z + (p1.z - p0.z) * t,
        });
        let a0 = p0, a1 = p1;
        if (!in0 && !in1) {
          // 양끝 다 밖 — 단, 긴 직선 세그먼트(KML 정점 간격 수백 m)가 클립 원을 '관통'하는
          // 경우가 흔하므로(0k700 부근 선 실종 원인), 두 교점 사이 구간(현)은 그린다.
          const ts = clipTs(e0, e1);
          if (ts.length < 2) continue;              // 원과 안 만남 → 생략
          a0 = lerp(ts[0]); a1 = lerp(ts[1]);
        } else if (in0 !== in1) {
          // 경계 교차 → 교점까지만
          const ts = clipTs(e0, e1);
          if (ts.length) {
            const cut = lerp(in0 ? ts[ts.length - 1] : ts[0]);
            if (in0) a1 = cut; else a0 = cut;
          }
        }
        // 세그먼트를 진행방향(뒤→앞)으로 정렬 — 대시 흐름이 항상 '가는 방향'이 되게.
        if ((e1[0] - e0[0]) * travelE + (e1[1] - e0[1]) * travelN < 0) {
          const tmp = a0; a0 = a1; a1 = tmp;
        }
        const cT0 = projCL(a0.lat, a0.lon, a0.z);
        const cT1 = projCL(a1.lat, a1.lon, a1.z);
        const s = segFrom(cT0, cT1);
        if (s) {
          centerlineSegs.push(s);
          // 커튼: 세그먼트를 ~15m 단위로 분할, 각 경계에서 윗변(z)·아랫변(z−H)을 투영.
          // 분할 경계마다 수직살을 세워 원근 수렴(멀수록 촘촘·짧아짐)으로 입체감을 만든다.
          if (clFxRef.current) {
            const e0c = enOf(a0), e1c = enOf(a1);
            const segLen = Math.hypot(e1c[0] - e0c[0], e1c[1] - e0c[1]);
            const N = Math.max(1, Math.min(40, Math.ceil(segLen / 15)));
            const zt0 = planeZ ?? (a0.z > 0 ? a0.z : CL_Z);
            const zt1 = planeZ ?? (a1.z > 0 ? a1.z : CL_Z);
            let prev: { xt: number; yt: number; d: number } | null = null;
            for (let k = 0; k <= N; k++) {
              const t = k / N;
              const wla = a0.lat + (a1.lat - a0.lat) * t;
              const wlo = a0.lon + (a1.lon - a0.lon) * t;
              const wzt = zt0 + (zt1 - zt0) * t;
              const cT = toCameraCoords(drone, wla, wlo, wzt, params, worldOrigin);
              if (cT.Zc < CLIP_Z) { prev = null; continue; }
              const pT = pixelFromCamera(cT, params);
              const cur = { xt: pT.pxRaw, yt: pT.pyRaw, d: cT.distH ?? 0 };
              if (prev && !(oc(prev.xt, prev.yt) & oc(cur.xt, cur.yt))) {
                railTubes.push([prev.xt, prev.yt, cur.xt, cur.yt, (prev.d + cur.d) / 2]);
              }
              prev = cur;
            }
          }
        }
      }
      // 선형 점 — 측점(100m) 사이를 십등분한 '10m 단위' 체이니지 고정점(궤적 측정점 방식).
      // 사용자가 10m 간격으로 검토 가능. 50m 지점은 약간 크게(중간 확인). 100m 지점은
      // 측점 눈금이 이미 있어 생략. 측점 앵커 없으면 20m 등간격 폴백.
      if (clFxRef.current) {
        const cum = clCumRef.current;
        if (cum.length === allCL.length && cum.length > 1) {
          const anchors = clStaAnchorsRef.current;
          const targets: { s: number; big: boolean }[] = [];
          const div = Math.max(1, Math.round(clDotDivRef.current));
          if (anchors.length >= 2 && div > 1) {
            // 인접 측점 구간을 div 등분 — 등분점(측점 자체 제외)에 점, 중간(½)은 크게.
            for (let ai = 0; ai < anchors.length - 1; ai++) {
              const A = anchors[ai], B = anchors[ai + 1];
              if (A.km === B.km) continue;
              for (let j = 1; j < div; j++) {
                const tt = j / div;
                targets.push({ s: A.cum + tt * (B.cum - A.cum), big: div % 2 === 0 && j === div / 2 });
              }
            }
          } else if (anchors.length >= 2) {
            // div=1 — 점 없음
          } else {
            const total = cum[cum.length - 1];
            for (let sb = 0; sb <= total; sb += 20) targets.push({ s: sb, big: false });
          }
          const total = cum[cum.length - 1];
          for (const tg of targets) {
            const sPos = tg.s;
            if (sPos < 0 || sPos > total) continue;
            let lo = 0, hi = cum.length - 1;
            while (hi - lo > 1) { const m = (lo + hi) >> 1; if (cum[m] <= sPos) lo = m; else hi = m; }
            const tt = cum[hi] > cum[lo] ? (sPos - cum[lo]) / (cum[hi] - cum[lo]) : 0;
            const la = allCL[lo].lat + (allCL[hi].lat - allCL[lo].lat) * tt;
            const ln = allCL[lo].lon + (allCL[hi].lon - allCL[lo].lon) * tt;
            const zz = allCL[lo].z + (allCL[hi].z - allCL[lo].z) * tt;
            const e = enOf({ lat: la, lon: ln });
            if (Math.hypot(e[0], e[1]) > clipR) continue;
            const cc = toCameraCoords(drone, la, ln, planeZ ?? (zz > 0 ? zz : CL_Z), params, worldOrigin);
            if (cc.Zc < CLIP_Z) continue;
            const p = pixelFromCamera(cc, params);
            if (oc(p.pxRaw, p.pyRaw)) continue;
            railPulses.push([p.pxRaw, p.pyRaw, cc.distH ?? 0, tg.big ? 1 : 0]);
          }
        }
      }
    }

    const dronePathPts: [number, number][] = [];
    if (showDronePathRef.current && frames.length) {
      const Z = dronePathZRef.current;
      const BACK = 60, FWD = 1500, STEP = 3, PW = 15, MAX_FWD = 200;
      const cur = currentFrameIdxRef.current;
      const lo = Math.max(0, cur - BACK), hi = Math.min(frames.length - 1, cur + FWD);
      const sm = (i: number): [number, number] => {
        let la = 0, lo2 = 0, n = 0;
        for (let k = Math.max(0, i - PW); k <= Math.min(frames.length - 1, i + PW); k++) { la += frames[k].lat; lo2 += frames[k].lon; n++; }
        return [la / n, lo2 / n];
      };
      for (let i = lo; i <= hi; i += STEP) {
        const [la, lo2] = sm(i);
        const cc = toCameraCoords(drone, la, lo2, Z, params, worldOrigin);
        if ((cc.fwd ?? 0) > MAX_FWD) break;
        if (cc.Zc < CLIP_Z) continue;
        const p = pixelFromCamera(cc, params);
        dronePathPts.push([p.pxRaw, p.pyRaw]);
      }
    }
    return { centerlineSegs, railTubes, railPulses, dronePathPts };
  }, []);

  // 보간 포즈 — estFrame(연속 프레임번호)에서 앞뒤 smoothFrame 선형보간(yaw는 최단각). RAF에서 호출.
  // 자세(yaw/pitch/roll)는 attLeadSec(자세 선행) 만큼 앞선 시점에서 별도 샘플 —
  // 짐벌 로그의 기록 지연으로 팬(회전) 시 오버레이가 늦게 따라오는 이질감 보정.
  const poseAt = useCallback((estFrame: number): DroneFrameBasic | null => {
    const arr = allDroneFramesRef.current;
    if (!arr.length) return null;
    const h = poseHalf();
    const sample = (ef: number): { a: DroneFrameBasic; b: DroneFrameBasic; frac: number } => {
      let lo = 0, hi = arr.length - 1;
      while (lo < hi) { const m = (lo + hi) >> 1; if (arr[m].frame < ef) lo = m + 1; else hi = m; }
      const i2 = lo, i1 = Math.max(0, lo - 1);
      const f1 = arr[i1].frame, f2 = arr[i2].frame;
      const frac = f2 > f1 ? Math.min(1, Math.max(0, (ef - f1) / (f2 - f1))) : 0;
      return { a: smoothFrame(arr, i1, h), b: smoothFrame(arr, i2, h), frac };
    };
    const p = sample(estFrame);
    const leadSec = paramsRef.current.attLeadSec ?? 0;
    const q = leadSec !== 0 ? sample(estFrame + leadSec * fpsRef.current) : p;
    const L = (x: number, y: number) => x + (y - x) * p.frac;
    const A = (x: number, y: number) => x + (y - x) * q.frac;
    let dy = q.b.yaw - q.a.yaw; dy = ((dy + 540) % 360) - 180;   // 최단각
    return {
      ...p.a,
      frame: estFrame,
      lat: L(p.a.lat, p.b.lat), lon: L(p.a.lon, p.b.lon), altitude: L(p.a.altitude, p.b.altitude),
      pitch: A(q.a.pitch, q.b.pitch), roll: A(q.a.roll, q.b.roll),
      yaw: q.a.yaw + dy * q.frac,
    };
  }, [smoothFrame, poseHalf]);

  // ── 자세 속도적응 필터(One Euro) — frameSynced 전용, RAF 에서 dronePose 에 적용 ──
  // 평활 제거(POSE_SMOOTH_SYNCED_MAX=0) 후 남는 자세 미세 잡음(짐벌 피치 정수 양자화 등)이
  // 직진 시 원거리 라벨 떨림으로 보임 → 변화 느릴 때만 강하게 평활(MIN_CUT), 팬처럼 빠르면
  // 컷오프가 속도에 비례해 올라가 즉시 추종(지연 없음). 위치(djmd)는 잡음 없어 미적용.
  // 필터 강도 — route.json routeInfo 로 폴더별 조정:
  //   att_min_cut(Hz, 기본 0.8): 저속 변화 평활 강도 — 작을수록 떨림 억제 강함(0=필터 끔 아님, 0.1~3 권장)
  //   att_beta(기본 0.5): 각속도(°/s)당 컷오프 증가 — 클수록 회전 추종 민감
  const attMinCutRef = useRef(0.8);
  const attBetaRef = useRef(0.5);
  useEffect(() => {
    const ri = routeMeta?.routeInfo as Record<string, unknown> | undefined;
    const num = (v: unknown): number | null =>
      typeof v === 'number' && isFinite(v) ? v
      : typeof v === 'string' && v.trim() !== '' && isFinite(Number(v)) ? Number(v) : null;
    attMinCutRef.current = num(ri?.att_min_cut) ?? 0.8;
    attBetaRef.current = num(ri?.att_beta) ?? 0.5;
    if (ri?.att_min_cut !== undefined || ri?.att_beta !== undefined) {
      console.log(`[오버레이] 자세 필터: min_cut ${attMinCutRef.current}Hz, beta ${attBetaRef.current} (route.json)`);
    }
  }, [routeMeta]);
  const attFilterRef = useRef<{ yaw: number; pitch: number; roll: number; dyaw: number; dpitch: number; droll: number; ts: number } | null>(null);
  const filterAttitude = useCallback((p: DroneFrameBasic): DroneFrameBasic => {
    if (!frameSyncedRef.current) { attFilterRef.current = null; return p; }
    const now = performance.now() / 1000;
    const st = attFilterRef.current;
    const angDiff = (a: number, b: number): number => ((a - b + 540) % 360) - 180;
    // 초기화/시크·세그먼트 전환(큰 점프)/장시간 정지 후에는 필터 리셋
    if (!st || now - st.ts > 0.5 || Math.abs(angDiff(p.yaw, st.yaw)) > 30) {
      attFilterRef.current = { yaw: p.yaw, pitch: p.pitch, roll: p.roll, dyaw: 0, dpitch: 0, droll: 0, ts: now };
      return p;
    }
    const dt = Math.max(1e-3, Math.min(0.1, now - st.ts));
    const alphaOf = (fc: number): number => { const r = 2 * Math.PI * fc * dt; return r / (r + 1); };
    const MIN_CUT = attMinCutRef.current; // Hz — 저속 변화 평활 강도(작을수록 강한 평활)
    const BETA = attBetaRef.current;      // 속도(°/s)당 컷오프 증가 — 팬 시 즉시 추종
    const D_CUT = 1.0;                    // 속도 추정 평활
    const one = (val: number, prev: number, dprev: number, ang: boolean): [number, number] => {
      const diff = ang ? angDiff(val, prev) : val - prev;
      const d = dprev + alphaOf(D_CUT) * (diff / dt - dprev);
      const a = alphaOf(MIN_CUT + BETA * Math.abs(d));
      return [prev + a * diff, d];
    };
    const [yaw, dyaw] = one(p.yaw, st.yaw, st.dyaw, true);
    const [pitch, dpitch] = one(p.pitch, st.pitch, st.dpitch, false);
    const [roll, droll] = one(p.roll, st.roll, st.droll, false);
    attFilterRef.current = { yaw, pitch, roll, dyaw, dpitch, droll, ts: now };
    return { ...p, yaw, pitch, roll };
  }, []);

  // 텍스트 사전 계산 — requestIdleCallback으로 백그라운드 실행
  const startLabelPrecompute = useCallback((currentParams: CameraParams, currentSmoothHalf: number, currentMaxRange: number, currentDroneHeight: boolean, currentDroneDrop: number) => {
    const id = ++precomputeIdRef.current;
    const frames = allDroneFramesRef.current;
    // 재계산(같은 데이터, 슬라이더 변경 등)이면 옛 맵을 복사해 시작 → 빈 구간 없이 갱신.
    // 단, frames 가 바뀐 경우(분할영상 세그먼트 전환)는 옛 캐시가 '다른 구간'의 값이므로
    // 복사하지 않고 비워서 시작 — 신·구 캐시가 섞여 라벨 집합이 프레임마다 뒤바뀌는
    // 깜빡임(두 번째 영상 재생 시)을 방지한다.
    const framesChanged = lastPrecomputeFramesRef.current !== frames;
    lastPrecomputeFramesRef.current = frames;
    const newMap = new Map<number, LabelCache>(
      !framesChanged && labelMapRef.current.size ? labelMapRef.current : undefined,
    );
    if (framesChanged) labelMapRef.current = newMap; // 스테일 캐시 즉시 차단
    labelKeysRef.current = frames.map(f => f.frame);  // RAF 최근접 키 조회용(오름차순)
    const allSt = allGeoStationsRef.current;
    // 모든 POI 표출(철도역 포함) + 영상용 구조물(구교/교량/터널). 철도역은 별도로 스테이션바에도 표출.
    const allPoi = allPoisRef.current.concat(allStructuresRef.current);
    const worldOrigin = worldOriginRef.current;
    const CLIP_Z = 0.1;
    const SMOOTH_HALF = currentSmoothHalf;
    const MAX_RANGE = currentMaxRange;  // POI 표시 범위 — 드론 수평 직선거리(m)
    // 표고 미상(z=0) 라벨의 앵커 평면 — 드론 궤적과 동일한 '경로 표고' 값.
    // 사용자가 경로표고 슬라이더로 궤적을 도로에 맞추면 측점/POI 라벨도 함께 맞는다.
    const PATH_Z = dronePathZRef.current;

    if (!frames.length) return;

    // 프레임 불변 값은 루프 밖에서 1회만 계산 — 측점의 중심선 투영(projectCL)과 POI 지면고도(gz)는
    // 드론 프레임과 무관하다. 프레임 루프 안에서 매번 계산하면(측점71×선분145×프레임 수천)
    // 재생 중 idle 청크가 메인 스레드를 막아 영상 딜레이·라벨 떨림을 유발한다.
    const snappedSt = allSt.map(st => {
      const snap = projectCL(st.lat, st.lon);
      const szRaw = snap?.z ?? st.z;
      return {
        title: st.title,
        lat: snap?.lat ?? st.lat,
        lon: snap?.lon ?? st.lon,
        // 표고 미상(0 이하)이면 경로표고 평면에 앵커 — 공중부양/시차 밀림 방지.
        z: szRaw > 0 ? szRaw : PATH_Z,
      };
    });
    const gzOf = new Map<string, number>();
    for (const poi of allPoi) {
      // 지면고도 gz 우선순위: 보정값(드래그) → **POI 자체 z(실측)** → 중심선 z → 경로표고 앵커.
      // 종전엔 중심선 스냅이 POI z 보다 우선 — 도로에서 떨어진 지물이 도로 높이에 붙어
      // 원거리에서 계속 밀리다 근거리에서만 맞는 증상의 원인. 실측 z 보유 데이터셋 기준으로 교정.
      const clz = nearestCL(poi.lat, poi.lon)?.z;
      gzOf.set(poi.title, overridesRef.current[poi.title]?.z
        ?? (poi.z > 0 ? poi.z : undefined)
        ?? (clz !== undefined && clz > 0 ? clz : undefined)
        ?? PATH_Z);
    }

    const t0 = performance.now();
    const total = frames.length;
    // 현재 재생 프레임부터 순환 처리 → 화면에 보이는 구간을 먼저 계산(재생 즉시 라벨 표시).
    const startIdx = Math.min(total - 1, Math.max(0, currentFrameIdxRef.current));
    // 초기 로드/재계산 모두 첫 청크(현재 프레임 포함) 후 즉시 노출(아래). 재계산은 옛 맵 복사로 시작.
    let processed = 0;      // 처리한 프레임 수(0..total)
    let published = false;
    const CHUNK = 200;  // 한 번에 처리할 프레임 수

    const step = () => {
      if (precomputeIdRef.current !== id) return;  // 취소됨

      const end = Math.min(processed + CHUNK, total);
      while (processed < end) {
        const idx = (startIdx + processed) % total;  // startIdx→끝→0→… 순환
        processed++;
        const drone = smoothFrame(frames, idx,
          frameSyncedRef.current ? Math.min(SMOOTH_HALF, POSE_SMOOTH_SYNCED_MAX) : SMOOTH_HALF);

        const stationLabels: LabelCache['stationLabels'] = [];
        for (const sp of snappedSt) {
          const slat = sp.lat, slon = sp.lon, sz = sp.z;
          // 가시성 판정도 드로우와 동일 높이 규칙 — 드론높이 모드면 드론고도 − 이격거리.
          const stZ = currentDroneHeight
            ? drone.altitude - (currentParams.geoidOffset ?? 0) - currentDroneDrop
            : sz;
          const cc = toCameraCoords(drone, slat, slon, stZ, currentParams, worldOrigin);
          if (cc.Zc < CLIP_Z) continue;
          // 측점도 POI 와 동일하게 표시 범위 제한 — 원거리(수 km) 측점이 수평선에 뭉치는 것 방지.
          if ((cc.distH ?? 0) > MAX_RANGE) continue;
          const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
          // 포함 경계 ±0.15 로 넉넉히 — 경계에 걸친 라벨이 호버(정지) 중 GPS 지터로
          // 캐시 프레임마다 들락거리며 깜빡이는 것 방지. 실제 화면 밖 컬링은 드로우가 담당.
          if (pxRaw < -0.15 || pxRaw > 1.15 || pyRaw < -0.15 || pyRaw > 1.15) continue;
          // 화면좌표 대신 (스냅된)월드좌표 저장 → RAF 가 연속 포즈로 재투영.
          stationLabels.push({ title: sp.title, lat: slat, lon: slon, z: sz });
        }

        // 후보 수집 (거리 dist + 월드좌표 + 지면고도 gz) → 겹침 억제용
        const poiCand: { x: number; y: number; title: string; label: string; category: string; dist: number; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; color?: string }[] = [];
        for (const poi of allPoi) {
          // 지면고도 gz — 프레임 불변이므로 루프 밖에서 1회 계산(gzOf).
          const gz = gzOf.get(poi.title) ?? PATH_Z;
          // 가시성 판정용 poiZ: 드론높이 모드면 드론−이격거리, 아니면 gz.
          const poiZ = currentDroneHeight
            ? drone.altitude - (currentParams.geoidOffset ?? 0) - currentDroneDrop
            : gz;
          const cc = toCameraCoords(drone, poi.lat, poi.lon, poiZ, currentParams, worldOrigin);
          if (cc.Zc < CLIP_Z) continue;
          // 표시 범위: 드론과의 수평 직선거리(distH)가 범위 안이면 표시, 밖이면 제외.
          if ((cc.distH ?? 0) > MAX_RANGE) continue;
          const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
          // 포함 경계 ±0.15 — 경계 걸침 라벨의 호버 중 10Hz 깜빡임 방지(화면 밖 컬링은 드로우 담당).
          if (pxRaw < -0.15 || pxRaw > 1.15 || pyRaw < -0.15 || pyRaw > 1.15) continue;
          poiCand.push({ x: pxRaw, y: pyRaw, title: poi.title, label: guboonOf(poi.props) ?? cleanTitle(poi.title), category: poi.category, dist: cc.distH ?? 0, lat: poi.lat, lon: poi.lon, gz, compact: compactFieldsOf(poi.props), ...(poi.labelColor ? { color: poi.labelColor } : {}) });
        }
        // 겹침 억제: KAKAO_RAIL(철도역/역사) 라벨을 최우선 유지 → 겹치면 일반 POI 가 숨겨진다.
        // 같은 우선순위 내에서는 가까운(dist 작은) 것 우선. 임계 이내면 뒤(낮은우선/먼) 것 숨김.
        // 거리차 1m 미만은 제목순 고정 — 호버(정지) 중 GPS 지터로 승자가 프레임마다 뒤바뀌며
        // 라벨 쌍이 교대로 깜빡이는 것 방지.
        const railRank = (cat: string): number => (cat === '철도역' || cat === '역사' ? 0 : 1);
        poiCand.sort((a, b) =>
          railRank(a.category) - railRank(b.category) ||
          (Math.abs(a.dist - b.dist) > 1 ? a.dist - b.dist : (a.title < b.title ? -1 : a.title > b.title ? 1 : 0)));
        // 겹침 시 진행방향 변형 우선: 같은 base 형제(예: 회덕제1가도교 상/하)가 겹치면
        //   하행='(하)' / 상행='(상)' 쪽을 남긴다(드론이 실제 지나는 선로). 무관한 POI엔 영향 없음.
        // 진행방향 변형 태그(닫는 괄호까지) — 하행='(하)', 상행='(상)'. '(하인상)' 등은 제외.
        const dirTag = routeDirRef.current === '상' ? '(상)' : routeDirRef.current === '하' ? '(하)' : '';
        const coordKey = (c: { lat: number; lon: number }): string => `${c.lat.toFixed(6)},${c.lon.toFixed(6)}`;
        const accepted: typeof poiCand = [];
        if (!overlapExcludeRef.current) {
          // 겹침제외 OFF → 겹침 억제 없이 모든 POI 표시(동일좌표는 세로 행으로 쌓임).
          accepted.push(...poiCand);
        } else {
          // 겹침제외 ON → 겹친 것(동일좌표 형제 포함) 1개만. 형제면 진행방향((하)/(상))을 우선.
          for (const c of poiCand) {
            let overlapIdx = -1;
            for (let i = 0; i < accepted.length; i++) {
              const k = accepted[i];
              if (Math.abs(k.x - c.x) < POI_MERGE_X && Math.abs(k.y - c.y) < POI_MERGE_Y) { overlapIdx = i; break; }
            }
            if (overlapIdx < 0) { accepted.push(c); continue; }
            // 형제 + c가 방향 변형, 기존은 아니면 c로 교체.
            const k = accepted[overlapIdx];
            if (dirTag && baseStruct(c.title) === baseStruct(k.title) && c.title.includes(dirTag) && !k.title.includes(dirTag)) {
              accepted[overlapIdx] = c;
            }
          }
        }
        // 동일좌표 그룹에 행 번호 부여(위→아래 순서대로). 4개면 각 라벨이 4행으로 안 겹치게 배치.
        const groupCount = new Map<string, number>();
        for (const a of accepted) groupCount.set(coordKey(a), (groupCount.get(coordKey(a)) ?? 0) + 1);
        const groupSeen = new Map<string, number>();
        // 통과분만 월드좌표로 저장(RAF 가 재투영). labelRow/Count = 동일좌표 라벨 세로 배치.
        const poiMarkers: LabelCache['poiMarkers'] = accepted.map(c => {
          const ck = coordKey(c);
          const row = groupSeen.get(ck) ?? 0;
          groupSeen.set(ck, row + 1);
          return { title: c.title, label: c.label, category: c.category, lat: c.lat, lon: c.lon, gz: c.gz, compact: c.compact, labelRow: row, labelRowCount: groupCount.get(ck) ?? 1, ...(c.color ? { color: c.color } : {}) };
        });

        newMap.set(drone.frame, { stationLabels, poiMarkers });
      }

      // 초기 로드/재계산 모두: 첫 청크(현재 프레임 포함) 채우면 즉시 노출 → 토글 즉시 반영.
      // 재계산은 옛 맵 복사로 시작했으므로 빈 구간 없이 나머지 청크가 덮어쓰며 갱신된다.
      if (!published) { labelMapRef.current = newMap; published = true; }

      if (processed < total) {
        requestIdleCallback(step, { timeout: 200 });
      } else {
        console.log(
          `[labelMap] complete ${(performance.now() - t0).toFixed(0)}ms | ${frames.length} frames × ${allSt.length + allPoi.length} items`
        );
      }
    };

    // 첫 청크(현재 프레임 포함)는 동기 실행 → 토글/재계산이 '정지 중에도' 즉시 반영.
    //   (idle 대기 시 정지 상태에서 갱신이 지연/누락되던 문제 해결.) 나머지는 step 내부에서 idle 로 이어감.
    step();
  }, [nearestCL, projectCL]);

  // 모든 데이터 로드 완료 시 사전 계산 시작
  // storeFrames 의존 필수: 분할 영상 세그먼트 전환(loadSegment)으로 frames 가 교체되면
  // 라벨 캐시(프레임별 가시 POI)를 새 구간 기준으로 재계산해야 함 — 없으면 이전 세그먼트
  // 캐시가 남아 두 번째 영상부터 시설물이 표출되지 않는다.
  useEffect(() => {
    if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
    startLabelPrecompute(paramsRef.current, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop);
  }, [droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, poiOverlapExclude, dronePathZ, storeFrames]);

  // params / smoothHalf / maxPoiDist / 경로표고(표고 미상 라벨 앵커) 변경 시 사전 계산 재시작 (500ms debounce)
  // ※ storeFrames(세그먼트 전환)는 위의 즉시 effect 가 담당 — 여기 넣으면 전환마다 이중 재계산.
  useEffect(() => {
    if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
    const timer = setTimeout(() => startLabelPrecompute(params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop), 500);
    return () => clearTimeout(timer);
  }, [params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, storePois, storeStructures, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, poiOverlapExclude, dronePathZ]);

  // 현재 재생 시간 → 드론 프레임 ref 갱신
  useEffect(() => {
    // 나침반이 visible 무관 갱신되도록 visible 게이트 제거(프레임 탐색은 가벼움).
    if (!droneFramesLoaded) return;
    const frames = allDroneFramesRef.current;
    if (!frames.length) return;
    const vfps = fpsRef.current;
    let best = frames[0], bestIdx = 0, bestD = Math.abs((best.frame ?? 0) / vfps - currentTime);
    for (let i = 0; i < frames.length; i++) {
      const d = Math.abs(frames[i].frame / vfps - currentTime);
      if (d < bestD) { bestD = d; best = frames[i]; bestIdx = i; }
      if (bestD < 1 / vfps / 2) break;
    }
    currentFrameNumRef.current = best.frame;
    currentFrameIdxRef.current = bestIdx;
    currentTimeSecRef.current = currentTime;
    timeUpdateWallRef.current = performance.now();
    if (currentDroneFrameRef.current?.frame !== best.frame) {
      currentDroneFrameRef.current = best;
      setPanelDroneFrame(best);
    }
  }, [currentTime, droneFramesLoaded]);

  // 중심선 + 나침반 캐시 빌드 (per-frame, 텍스트 계산 없음)
  useEffect(() => {
    // 나침반(effectiveYaw/hFovRad)은 측점선 visible 과 무관하게 항상 갱신.
    const cur = currentDroneFrameRef.current;
    if (cur) {
      const p = paramsRef.current;
      const fr = allDroneFramesRef.current;
      const d = fr.length
        ? smoothFrame(fr, currentFrameIdxRef.current, poseHalf())
        : cur;
      compassRef.current = {
        effectiveYaw: d.yaw + p.yawOffset,
        hFovRad: 2 * Math.atan((p.sensorW ?? 36) / (2 * p.focalLen)),
      };
    } else {
      compassRef.current = null;
    }

    // 선/궤적은 RAF가 매 프레임 직접 투영하므로 여기선 캐시 '준비됨' 표식 + 메타데이터만.
    if (!currentDroneFrameRef.current) { renderCacheRef.current = null; return; }
    const frames = allDroneFramesRef.current;
    const drone = frames.length
      ? smoothFrame(frames, currentFrameIdxRef.current, poseHalf())
      : currentDroneFrameRef.current;
    const params = paramsRef.current;
    renderCacheRef.current = {
      effectiveYaw: drone.yaw + params.yawOffset,
      hFovRad: 2 * Math.atan((params.sensorW ?? 36) / (2 * params.focalLen)),
      clCount: allCenterlinePointsRef.current.length,
      poiCount: allPoisRef.current.length,
    };
  }, [panelDroneFrame, params]);

  // ResizeObserver
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const parent = canvas.parentElement;
    if (!parent) return;
    const ro = new ResizeObserver(entries => {
      for (const e of entries) {
        canvas.width = Math.round(e.contentRect.width);
        canvas.height = Math.round(e.contentRect.height);
        canvasSizeRef.current = { w: canvas.width, h: canvas.height };
      }
    });
    ro.observe(parent);
    canvas.width = parent.clientWidth;
    canvas.height = parent.clientHeight;
    canvasSizeRef.current = { w: canvas.width, h: canvas.height };
    return () => ro.disconnect();
  }, []);

  // RAF 렌더 루프 — 계산 없이 캐시/Map 조회만
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    let rafId = 0;

    const draw = () => {
      rafId = requestAnimationFrame(draw);
      const ctx = canvas.getContext('2d');
      if (!ctx) return;
      const { w: W, h: H } = canvasSizeRef.current;
      ctx.clearRect(0, 0, W, H);

      // 영상 첫 프레임이 표시되기 전엔 오버레이(라벨/선/나침반)를 그리지 않음 → 라벨이 영상보다 먼저 뜨는 것 방지.
      if (!videoReadyRef.current) return;

      // object-fit:cover 정렬 — 영상은 컨테이너를 비율유지·크롭하며 채우므로(index.css), 오버레이도
      // 같은 cover 사각형에 매핑해야 영상과 일치한다. 영상 해상도(vW,vH) 없으면 컨테이너 기준 폴백.
      const { w: vW, h: vH } = videoSizeRef.current;
      let dispW = W, dispH = H, offX = 0, offY = 0;
      if (vW > 0 && vH > 0) {
        const s = Math.max(W / vW, H / vH);              // cover: 더 큰 배율로 채움(넘침=크롭)
        dispW = vW * s; dispH = vH * s;
        offX = (W - dispW) / 2; offY = (H - dispH) / 2;  // 음수 = 화면 밖(크롭)
      }
      coverRef.current = { offX, offY, dispW, dispH, W, H };
      const vx = (nx: number) => offX + nx * dispW;       // 정규(0~1, 영상프레임) → 화면 px
      const vy = (ny: number) => offY + ny * dispH;

      // 이번 프레임 라벨 히트박스(아이콘+글자, 화면 px) 수집 → 끝에서 labelHitRef 갱신.
      const hitBoxes: { kind: 'poi' | 'station'; title: string; x0: number; y0: number; x1: number; y1: number }[] = [];
      // 이번 프레임에 '실제로 화면 안에 그려진' 라벨 id(`kind:title`) 집합. 팝업 표시의 단일 기준 —
      //   십자마커/텍스트가 뷰포트 안에 있을 때만 채운다. 팝업은 이 집합에 있을 때만 보이게 해
      //   "라벨은 화면 밖(안 보임)인데 팝업만 clamp 되어 뜨는" 문제를 원천 차단한다.
      const onScreenLabels = new Set<string>();
      // 유효 하단 = 화면 높이 − 스테이션바 높이. 팝업/라벨 가시 기준을 '모니터'가 아니라
      //   '영상 재생 영역(스테이션바 위쪽)' 으로 잡는다. (라벨이 바 밑으로 내려가면 사라지게)
      const HB = H - barHeightRef.current;
      // 히트박스가 '영상 영역(0..W, 0..HB)' 과 겹치는지(라벨이 눈에 보이는지). -2px 안쪽 요구로 경계 애매함 제거.
      const labelOnScreen = (x0: number, y0: number, x1: number, y1: number): boolean =>
        x1 >= 2 && x0 <= W - 2 && y1 >= 2 && y0 <= HB - 2;

      const cache = renderCacheRef.current;
      if (cache) {

      // 부드러운 시간(timeRef, 60fps 보간) → 연속 프레임번호. 선/궤적·라벨 공통 사용.
      // 시간동기(timeOffsetSec): 영상↔비행로그의 시각 오프셋 보정 — POI 가 진행방향으로
      // 일괄 밀릴 때 조정(+ = 로그를 뒤로, − = 앞으로). camera.json 에 저장되는 보정값.
      const estTime = (timeRef
        ? timeRef.current
        : currentTimeSecRef.current + (performance.now() - timeUpdateWallRef.current) / 1000)
        + (paramsRef.current.timeOffsetSec ?? 0);
      const estFrame = estTime * fpsRef.current;

      // 연속 보간 포즈(라인·라벨 공통) — 매 RAF 프레임 직접 투영해 부드럽게.
      const dronePose = filterAttitude(poseAt(estFrame) ?? (allDroneFramesRef.current.length
        ? smoothFrame(allDroneFramesRef.current, currentFrameIdxRef.current, poseHalf())
        : currentDroneFrameRef.current!));
      const lines = buildLines(dronePose);

      // 나침반 미니맵(heading-up) 회전 — 영상과 즉시 동기. dronePose.yaw 는 ±smoothHalf(기본 60fr ≈2s)
      //   평활이라 회전 시 지연 → 가벼운 평활(±3fr)의 yaw 를 따로 보간해 사용. 360° 누적 언랩(점프 방지).
      {
        const arr = allDroneFramesRef.current;
        let rawYaw = dronePose.yaw;
        if (arr.length) {
          let lo = 0, hi = arr.length - 1;
          while (lo < hi) { const m = (lo + hi) >> 1; if (arr[m].frame < estFrame) lo = m + 1; else hi = m; }
          const i2 = lo, i1 = Math.max(0, lo - 1);
          const f1 = arr[i1].frame, f2 = arr[i2].frame;
          const frac = f2 > f1 ? Math.min(1, Math.max(0, (estFrame - f1) / (f2 - f1))) : 0;
          const a = smoothFrame(arr, i1, 3), b = smoothFrame(arr, i2, 3); // ±3fr 가벼운 평활
          let dy = b.yaw - a.yaw; dy = ((dy + 540) % 360) - 180;
          rawYaw = a.yaw + dy * frac;
        }
        const headingDeg = rawYaw + paramsRef.current.yawOffset;  // 실제 방위(0=N, 시계+)
        // 지도 나침반(노스업)용 현재 위치/방위 — MapCompass 가 읽음.
        mapPoseRef.current.lat = dronePose.lat;
        mapPoseRef.current.lon = dronePose.lon;
        mapPoseRef.current.yaw = headingDeg;
        // 아날로그 나침반(heading-up) 회전 — 렌더 중일 때만. 360° 누적 언랩(점프 방지).
        if (minimapRef.current) {
          const target = -headingDeg;
          const delta = (((target - minimapRotRef.current) % 360) + 540) % 360 - 180;
          minimapRotRef.current += delta;
          minimapRef.current.style.setProperty('--rot', `${minimapRotRef.current}deg`);
        }
      }

      // 선로 중심선 (선형) — 독립 토글. '홀로그램 펜스' 입체 표현:
      //   ① 그라데이션 커튼(위 진함→아래 소멸) ② 수직살(원근 수렴 + 원거리 페이드)
      //   ③ 상단 레일 글로우 ④ 진행방향 유동 대시(흐르는 빛)
      if (showCenterlineRef.current && lines.centerlineSegs.length > 0 && !clFxRef.current) {
        // 입체 효과 꺼짐 — 종전처럼 단순 선만
        ctx.strokeStyle = 'rgba(255,50,50,0.85)';
        ctx.lineWidth = 3;
        ctx.setLineDash([]);
        ctx.beginPath();
        for (const [px1, py1, px2, py2] of lines.centerlineSegs) {
          ctx.moveTo(vx(px1), vy(py1));
          ctx.lineTo(vx(px2), vy(py2));
        }
        ctx.stroke();
      } else if (showCenterlineRef.current && lines.centerlineSegs.length > 0) {
        ctx.setLineDash([]);
        // 상단 레일 — 튜브(지름 있는 원형 단면): 각크기(지름/거리)를 픽셀 폭으로 환산해
        // 가까울수록 굵고 멀수록 가늘게 + 3중 스트로크(외곽 어둡게/본체/하이라이트)로 원통 음영.
        const railPath = (): void => {
          ctx.beginPath();
          for (const [px1, py1, px2, py2] of lines.centerlineSegs) {
            ctx.moveTo(vx(px1), vy(py1));
            ctx.lineTo(vx(px2), vy(py2));
          }
        };
        // 반투명 원통 셸 — 중심의 진한 실선을 감싸는 유리관 느낌(다층 저알파 스트로크).
        // 폭은 지름/거리 원근 환산, 안쪽으로 갈수록 은은히 밝아져 원통 볼륨감.
        if (lines.railTubes.length > 0) {
          const pp = paramsRef.current;
          const hfov = 2 * Math.atan((pp.sensorW ?? 36) / (2 * pp.focalLen));
          const pxPerRad = (coverRef.current?.dispW || canvasSizeRef.current.w || 1920) / hfov;
          const D = clTubeDRef.current;
          // 이음매 중첩 제거: 반투명 조각을 직접 겹치면 이음/폭 단차마다 알파가 중첩돼
          // 잘려 보인다 → 오프스크린에 '불투명'으로 그린 뒤 전체를 한 번에 알파 합성.
          const cv = ctx.canvas;
          let oc2 = tubeCanvasRef.current;
          if (!oc2 || oc2.width !== cv.width || oc2.height !== cv.height) {
            oc2 = document.createElement('canvas');
            oc2.width = cv.width;
            oc2.height = cv.height;
            tubeCanvasRef.current = oc2;
          }
          const otx = oc2.getContext('2d');
          if (otx) {
            otx.clearRect(0, 0, oc2.width, oc2.height);
            otx.lineCap = 'round';
            const passes: Array<[number, string]> = [
              [1.0, 'rgb(150,30,30)'],
              [0.66, 'rgb(225,60,58)'],
              [0.34, 'rgb(255,140,125)'],
            ];
            // 폭 버킷(0.5px)별로 묶어 스트로크 횟수 절감(불투명이라 겹침 무해)
            for (const [fw, col] of passes) {
              otx.strokeStyle = col;
              const buckets = new Map<number, number[][]>();
              for (const tb of lines.railTubes) {
                const w = Math.min(44, Math.max(2, (D / Math.max(5, tb[4])) * pxPerRad)) * fw;
                const key = Math.round(w * 2);
                let arr = buckets.get(key);
                if (!arr) { arr = []; buckets.set(key, arr); }
                arr.push(tb);
              }
              for (const [key, arr] of buckets) {
                otx.lineWidth = key / 2;
                otx.beginPath();
                for (const tb of arr) {
                  otx.moveTo(vx(tb[0]), vy(tb[1]));
                  otx.lineTo(vx(tb[2]), vy(tb[3]));
                }
                otx.stroke();
              }
            }
            ctx.save();
            ctx.globalAlpha = 0.32;
            ctx.drawImage(oc2, 0, 0);
            ctx.restore();
          }
        } else {
          ctx.strokeStyle = 'rgba(255,50,50,0.20)';
          ctx.lineWidth = 8;
          railPath();
          ctx.stroke();
        }
        // 중심선(코어) — 항상 진한 실선. 반투명 원통이 이 선을 감싼다.
        ctx.strokeStyle = 'rgba(205,25,25,0.95)';
        ctx.lineWidth = 2.5;
        railPath();
        ctx.stroke();
        // 선형 점 — 측점 체이니지 10m 단위 고정점(궤적 측정점과 동일 질감).
        // 50m 지점은 약간 크게 — 측점 사이 중간 위치를 한눈에 확인.
        if (lines.railPulses.length > 0) {
          ctx.fillStyle = 'rgba(255,230,90,0.9)';
          for (const q of lines.railPulses) {
            ctx.beginPath();
            ctx.arc(vx(q[0]), vy(q[1]), q[3] ? 2.8 : 1.8, 0, Math.PI * 2);
            ctx.fill();
          }
        }
      }

      // 드론 경로 — 하나의 연속 폴리라인(둥근 연결)으로 부드럽게 + 작은 점. 독립 토글 + 투명도
      const dpa = dronePathAlphaRef.current;
      const pts = lines.dronePathPts;
      if (pts.length > 1) {
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.setLineDash([]);
        // 어두운 밑선(대비) → 배경 위에서도 끊김 없이 잘 보임
        ctx.strokeStyle = `rgba(0,0,0,${0.35 * dpa})`;
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(vx(pts[0][0]), vy(pts[0][1]));
        for (let k = 1; k < pts.length; k++) ctx.lineTo(vx(pts[k][0]), vy(pts[k][1]));
        ctx.stroke();
        // 본선
        ctx.strokeStyle = `rgba(80,200,255,${dpa})`;
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(vx(pts[0][0]), vy(pts[0][1]));
        for (let k = 1; k < pts.length; k++) ctx.lineTo(vx(pts[k][0]), vy(pts[k][1]));
        ctx.stroke();
      }
      // 측정점 dot — 작고 듬성하게(선 흐름 방해 X)
      if (pts.length > 0) {
        ctx.fillStyle = `rgba(255,230,90,${dpa})`;
        for (let k = 0; k < pts.length; k += 4) {
          ctx.beginPath();
          ctx.arc(vx(pts[k][0]), vy(pts[k][1]), 1.8, 0, Math.PI*2);
          ctx.fill();
        }
      }

      visStructRef.current.clear();   // 매 프레임 가시 컴팩트-구조물 재수집(라벨 off 시 빈 상태)
      if (visibleRef.current) {
      // 가시집합만 precompute 에서 가져오고(어떤 라벨을 그릴지), 좌표는 RAF 가 연속 포즈로 직접
      // 투영 → 라인처럼 부드럽게 이동(정수프레임 보간/프레임키 의존 제거).
      // 조회는 '최근접 캐시 키' 이진탐색으로 고정 — 종전의 floor 정확일치 + 폴백(4Hz 갱신 스테일 키)
      // 조합은 프레임마다 서로 다른 캐시 항목을 교대로 그려 라벨 집합이 뒤바뀌는 깜빡임을 유발했음.
      let labelsA: LabelCache | undefined;
      {
        const keys = labelKeysRef.current;
        if (keys.length) {
          let lo = 0, hi = keys.length - 1;
          while (hi - lo > 1) { const m = (lo + hi) >> 1; if (keys[m] <= estFrame) lo = m; else hi = m; }
          const ki = Math.abs(keys[hi] - estFrame) < Math.abs(estFrame - keys[lo]) ? hi : lo;
          // 채워지는 중(청크 진행)이면 인접 키로 소폭 폴백
          for (let d = 0; d <= 3 && !labelsA; d++) {
            labelsA = labelMapRef.current.get(keys[ki + d] ?? NaN) ?? labelMapRef.current.get(keys[ki - d] ?? NaN);
          }
        }
        if (!labelsA) labelsA = labelMapRef.current.get(Math.floor(estFrame)) ?? labelMapRef.current.get(currentFrameNumRef.current);
      }

      if (labelsA) {
        const α = emaAlphaRef.current;
        const params = paramsRef.current;
        const worldOrigin = worldOriginRef.current;
        const CLIP_Z = 0.1;
        const seenSt = new Set<string>();
        const seenPoi = new Set<string>();

        // 측점 라벨 — 연속 포즈로 직접 투영 → 이상치 거부 → EMA.
        //   선형(중심선) 토글과 함께 ON/OFF (빨간 스테이션 라벨 = 선형의 일부).
        if (showCenterlineRef.current) {
        ctx.font = 'bold 18px monospace';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        labelsA.stationLabels.forEach((stA) => {
          // 측점도 POI 와 동일한 높이 규칙 — 드론높이 모드면 '드론고도 − 이격거리' 평면
          // (이격거리 슬라이더가 측점 라벨에도 반영), 지면고도 모드면 측점 표고(stA.z — 경로표고 앵커 포함).
          const stZ = poiDroneHeightRef.current
            ? dronePose.altitude - (params.geoidOffset ?? 0) - droneHeightDropRef.current
            : stA.z;
          const cc = toCameraCoords(dronePose, stA.lat, stA.lon, stZ, params, worldOrigin);
          if (cc.Zc < CLIP_Z) return;
          const { pxRaw, pyRaw } = pixelFromCamera(cc, params);
          const prevDst = displayedStRef.current.get(stA.title);
          // 측점 라벨은 선형 실선과 픽셀 단위로 붙어 다녀야 하므로 화면 EMA 없이 즉시 투영
          // (실선도 매 프레임 즉시 투영 — djmd 프레임 동기 이후 입력이 매끄러워 평활 불필요.
          //  반올림 떨림은 아래 0.75px 히스테리시스가 계속 흡수).
          const d: DispPos = { x: pxRaw, y: pyRaw, rej: 0, vx: 0, vy: 0 };
          seenSt.add(stA.title);
          // 픽셀 히스테리시스: 0.75px 이상 움직일 때만 정수 위치 갱신 → 저속(1배속) 반올림 깜빡임 제거.
          const sx0 = vx(d.x), sy0 = vy(d.y);
          const x = (prevDst?.rx !== undefined && Math.abs(sx0 - prevDst.rx) <= 0.75) ? prevDst.rx : Math.round(sx0);
          const y = (prevDst?.ry !== undefined && Math.abs(sy0 - prevDst.ry) <= 0.75) ? prevDst.ry : Math.round(sy0);
          d.rx = x; d.ry = y;
          displayedStRef.current.set(stA.title, d);
          // 마커 선
          ctx.strokeStyle = 'rgba(255,100,100,0.95)'; ctx.lineWidth = 2.5;
          ctx.beginPath(); ctx.moveTo(x, y-10); ctx.lineTo(x, y+10); ctx.stroke();
          // 텍스트 테두리
          const lx = Math.max(2, x + 8);
          ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 4;
          ctx.lineJoin = 'round';
          ctx.strokeText(cleanTitle(stA.title), lx, y);
          // 텍스트 본문
          ctx.fillStyle = 'rgba(255,200,200,1.0)';
          ctx.fillText(cleanTitle(stA.title), lx, y);
          // 히트박스(마커 선 ~ 글자 끝)
          const tw = ctx.measureText(cleanTitle(stA.title)).width;
          hitBoxes.push({ kind: 'station', title: stA.title, x0: x - 8, y0: y - 12, x1: lx + tw + 2, y1: y + 12 });
          if (labelOnScreen(x - 8, y - 12, lx + tw + 2, y + 12)) onScreenLabels.add(`station:${stA.title}`);
        });
        }

        // POI 마커 — 연속 포즈로 직접 투영 → 이상치 거부 → EMA
        ctx.font = 'bold 20px sans-serif';
        labelsA.poiMarkers.forEach((poiA) => {
          // 드론높이 모드면 연속 포즈 고도−이격거리, 아니면 저장된 지면고도 gz.
          const pz = poiDroneHeightRef.current
            ? dronePose.altitude - (params.geoidOffset ?? 0) - droneHeightDropRef.current
            : poiA.gz;
          const cc = toCameraCoords(dronePose, poiA.lat, poiA.lon, pz, params, worldOrigin);
          if (cc.Zc < CLIP_Z) return;
          const { pxRaw, pyRaw } = pixelFromCamera(cc, params);
          const prevDpoi = displayedPoiRef.current.get(poiA.title);
          // 프레임 동기(djmd) 데이터는 입력이 매끄러워 화면 EMA 불필요 — 즉시 투영으로
          // 팬(회전) 시 라벨이 늦게 따라오는 이질감 제거(선형·측점과 동일 타이밍).
          // 비동기 데이터셋(CSV 지터)만 기존 속도적응 EMA 유지.
          const d = frameSyncedRef.current
            ? { x: pxRaw, y: pyRaw, rej: 0, vx: 0, vy: 0 }
            : smoothStep(prevDpoi, pxRaw, pyRaw, α, smoothMinAlphaRef.current, smoothSpeedRefRef.current);
          seenPoi.add(poiA.title);
          // 픽셀 히스테리시스: 0.75px 이상 움직일 때만 정수 위치 갱신 → 저속(1배속) 깜빡임 제거.
          const psx0 = vx(d.x), psy0 = vy(d.y);
          const px = (prevDpoi?.rx !== undefined && Math.abs(psx0 - prevDpoi.rx) <= 0.75) ? prevDpoi.rx : Math.round(psx0);
          const py = (prevDpoi?.ry !== undefined && Math.abs(psy0 - prevDpoi.ry) <= 0.75) ? prevDpoi.ry : Math.round(psy0);
          d.rx = px; d.ry = py;
          displayedPoiRef.current.set(poiA.title, d);
          // 텍스트 박스만 표출(십자 마커/이모지 아이콘 없음):
          //   배경 = KML 텍스트박스_색상(poiA.color, 없으면 기본 하늘색), 글자 = 흰색.
          //   박스는 POI 지점(px)에 가로 중앙 정렬.
          const boxCol = poiA.color ?? '#64c8ff';
          // 라벨: 속성에 '구분'이 있으면 그 값(원문 그대로), 없으면 cleanTitle(title). poiCand에서 확정.
          const label = poiA.label;
          // 동일좌표 라벨 세로 배치: 행 중앙을 지점에 맞춰 위→아래로 안 겹치게 오프셋.
          const ROW_H = 28;
          const labelY = py + (poiA.labelRow - (poiA.labelRowCount - 1) / 2) * ROW_H;
          const tw = ctx.measureText(label).width;
          // 박스 높이 = 글자 크기(20px) × 1.2 — 라벨 상하 여유. 행 간격(ROW_H)도 같이 벌림.
          const PAD_X = 7, BOX_H = 24;
          const bx0 = Math.max(2, px - tw / 2 - PAD_X);
          const bx1 = bx0 + tw + PAD_X * 2;
          const by0 = labelY - BOX_H / 2, by1 = labelY + BOX_H / 2;
          ctx.fillStyle = boxCol;
          ctx.beginPath();
          if (typeof ctx.roundRect === 'function') ctx.roundRect(bx0, by0, bx1 - bx0, BOX_H, 5);
          else ctx.rect(bx0, by0, bx1 - bx0, BOX_H);
          ctx.fill();
          ctx.fillStyle = '#ffffff';
          ctx.textBaseline = 'middle';
          ctx.fillText(label, bx0 + PAD_X, labelY);
          // 히트박스 = 텍스트 박스 영역 (어디를 눌러도 선택)
          hitBoxes.push({ kind: 'poi', title: poiA.title, x0: bx0, y0: by0 - 2, x1: bx1 + 2, y1: by1 + 2 });
          const poiVisible = labelOnScreen(bx0, by0, bx1, by1);
          if (poiVisible) onScreenLabels.add(`poi:${poiA.title}`);
          // 연속 온스크린 프레임 수 갱신(화면 밖이면 0으로 리셋).
          const streak = poiVisible ? (poiOnScreenStreakRef.current.get(poiA.title) ?? 0) + 1 : 0;
          poiOnScreenStreakRef.current.set(poiA.title, streak);
          ctx.textBaseline = 'alphabetic';
          // 컴팩트 팝업 자동생성 후보 등록(sync 인터벌이 읽음). 조건:
          //   ① 라벨이 '연속' ADD_STREAK 프레임 이상 화면 안(경계 깜빡임에 팝업 재생성 방지),
          //   ② 컴팩트 필드 있음, ③ 단일 라벨(동일좌표 다중행 제외 → 클릭 시 개별 표시).
          const ADD_STREAK = 6;  // ~100ms 안정적으로 보여야 팝업 생성
          if (streak >= ADD_STREAK && poiA.compact.length && poiA.labelRowCount <= 1) visStructRef.current.set(poiA.title, { category: poiA.category, compact: poiA.compact });
        });

        // 이번 프레임에 안 보인 라벨의 표시상태 제거 → 재등장 시 새 위치에서 시작
        // (오래된 좌표가 남아 이상치 거부로 늦게 뜨는 것 방지)
        for (const k of displayedStRef.current.keys()) if (!seenSt.has(k)) displayedStRef.current.delete(k);
        for (const k of displayedPoiRef.current.keys()) if (!seenPoi.has(k)) displayedPoiRef.current.delete(k);
        // poiMarkers 에서 빠진 POI 는 streak 도 정리(재등장 시 0부터 다시 쌓임).
        for (const k of poiOnScreenStreakRef.current.keys()) if (!seenPoi.has(k)) poiOnScreenStreakRef.current.delete(k);
      }
      } // end if(visible) — 측점/POI 라벨
      } // end if(cache) — 중심선/드론경로/측점/POI

      // 편집/FOV 보정 모드: 드래그 중 마커 피드백 (마우스 따라다님)
      if ((editModeRef.current || fovModeRef.current || yawModeRef.current) && dragRef.current && dragPosRef.current) {
        const dx = vx(dragPosRef.current.x), dy = vy(dragPosRef.current.y);
        ctx.strokeStyle = '#ffe14d'; ctx.lineWidth = 2;
        ctx.beginPath(); ctx.arc(dx, dy, 14, 0, Math.PI * 2); ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(dx - 22, dy); ctx.lineTo(dx + 22, dy);
        ctx.moveTo(dx, dy - 22); ctx.lineTo(dx, dy + 22);
        ctx.stroke();
        ctx.fillStyle = '#ffe14d'; ctx.font = 'bold 13px sans-serif';
        ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
        ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 4; ctx.lineJoin = 'round';
        ctx.strokeText(dragRef.current.title, dx + 26, dy);
        ctx.fillText(dragRef.current.title, dx + 26, dy);
        ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';
      }



      // 라벨 속성 팝업 위치 — 해당 라벨의 현재 표시좌표를 따라 매 프레임 갱신(재생 중 이동).
      //   라벨이 화면에서 사라지면(필터/화면밖) 팝업 숨김, 다시 보이면 표시.
      if (popupElsRef.current.size) {
        const toRemove: string[] = [];
        popupElsRef.current.forEach((el, id) => {
          const sep = id.indexOf(':');
          const kind = id.slice(0, sep), title = id.slice(sep + 1);
          const disp = (kind === 'poi' ? displayedPoiRef.current : displayedStRef.current).get(title);
          // 팝업 표시 = '이 프레임에 라벨이 실제로 화면 안에 그려졌는가'(onScreenLabels)로만 판정.
          //   좌표 ±16 슬랙 + clamp 조합은 라벨(특히 텍스트)이 화면 밖인데 팝업만 clamp 되어 뜨는
          //   문제를 만들었음 → 라벨 가시성과 완전히 일치시킨다.
          const sx = disp ? offX + disp.x * dispW : 0, sy = disp ? offY + disp.y * dispH : 0;
          const off = !disp || !onScreenLabels.has(id);
          if (off) {
            // 라벨이 화면에서 벗어나면 '즉시' 제거(유예 없음) → 하단 이탈 즉시 사라짐.
            //   유예를 두면 그 사이 흔들림으로 라벨이 경계로 잠깐 되돌아올 때 팝업이 다시 보였다 사라짐.
            //   재등장은 sync 의 ADD_STREAK(연속 안정 프레임) 게이트가 막는다(짧은 복귀로는 재생성 안 됨).
            el.style.visibility = 'hidden';
            toRemove.push(id);
            return;
          }
          const ph = el.offsetHeight || 120;
          const pw = el.offsetWidth || 240;
          // 라벨(십자+글자)은 sy 를 중심으로 상하 ~LABEL_HALF 만큼 차지한다. GAP 을 sy(중심) 기준으로
          //   잡으면 라벨 높이만큼 먹혀 팝업이 글자에 붙는다 → 라벨 '바깥 가장자리' 기준으로 띄운다.
          const LABEL_HALF = 15;             // 라벨 반높이(px) — sy 중심 ± 이 값이 글자/아이콘 영역
          const GAP = 12;                    // 라벨 가장자리 ~ 팝업 사이 실제 여백
          // POI 라벨은 지점(sx) 기준 가로 중앙 정렬 박스 → 팝업도 박스 중앙 아래로 정렬.
          // 측점 라벨은 마커 오른쪽으로 그려지므로 기존(좌측 여유 10px) 유지.
          const txRaw = kind === 'poi' ? sx - pw / 2 : sx - 10;
          const tx = Math.min(Math.max(8, txRaw), Math.max(8, W - pw - 4));
          // 기본은 라벨 '아래'. 아래 공간이 부족하면(화면 하단 근접) 라벨 '위'로 플립.
          //   ※ 히스테리시스(sticky): 경계에서 sy 가 미세하게 오르내려도 위↔아래로 왕복하지 않도록,
          //     '위'로 간 뒤엔 아래에 HYST 이상 여유가 생겨야만 '아래'로 복귀. (왕복=팝업 순간이동=번쩍임 방지)
          // 팝업은 '항상 라벨 아래'(flip 없음, 하단 클램프 없음). 라벨을 따라 자유롭게 내려가다
          //   스테이션바 영역으로 진입하면 팝업 컨테이너의 overflow-hidden(HB 아래 클립)이 시각적으로
          //   가린다 → 바 뒤로 슬라이드되는 것처럼 보임. 라벨이 바 밑(HB)으로 내려가면 위 off 판정으로
          //   팝업 제거(라벨과 함께 사라짐). (이전 flip=라벨 위로 튐 / clamp=바에 걸침 문제 모두 제거)
          let ty = Math.max(2, sy + LABEL_HALF + GAP);
          el.style.visibility = 'visible';
          const pp = popupPosRef.current.get(id);
          const PA = 0.18;
          // flip(위↔아래) 같은 큰 점프는 스냅 → 라벨 위를 천천히 통과하는 잔상 방지.
          const bigJump = !!pp && Math.abs(ty - pp.y) > ph * 0.7;
          const nx = pp ? pp.x + (tx - pp.x) * PA : tx;
          const ny = (pp && !bigJump) ? pp.y + (ty - pp.y) * PA : ty;
          popupPosRef.current.set(id, { x: nx, y: ny });
          el.style.left = `${Math.round(nx)}px`;
          el.style.top = `${Math.round(ny)}px`;
        });
        if (toRemove.length) {
          toRemove.forEach(id => { popupMissRef.current.delete(id); popupPosRef.current.delete(id); popupFlipRef.current.delete(id); });
          setInfoPopups(prev => prev.filter(p => !toRemove.includes(p.id)));
        }
      }

      labelHitRef.current = hitBoxes;   // 이번 프레임 라벨 히트박스 확정(라벨 없으면 빈 배열)

      // 범례(선로중심선/지장물 개수)는 좌상단 카메라파라미터·스테이션맵과 겹쳐 제거함.
    };

    rafId = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(rafId);
  }, []);

  // ── POI 편집(드래그) ───────────────────────────────────────────────────────
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 현재 프레임의 평활 드론 자세 (역투영 기준)
  const getSmoothedDrone = useCallback((): DroneFrameBasic | null => {
    const frames = allDroneFramesRef.current;
    if (frames.length) return smoothFrame(frames, currentFrameIdxRef.current, poseHalf());
    return currentDroneFrameRef.current;
  }, [smoothFrame, poseHalf]);

  // 화면 클릭좌표(client px) → 영상프레임 정규좌표(0~1). object-fit:cover 역변환(coverRef).
  const clientToVideoNorm = useCallback((clientX: number, clientY: number): { x: number; y: number } => {
    const canvas = canvasRef.current;
    if (!canvas) return { x: 0, y: 0 };
    const rect = canvas.getBoundingClientRect();
    const c = coverRef.current;
    const cxpx = ((clientX - rect.left) / rect.width) * (c.W || rect.width);
    const cypx = ((clientY - rect.top) / rect.height) * (c.H || rect.height);
    return {
      x: c.dispW ? (cxpx - c.offX) / c.dispW : (clientX - rect.left) / rect.width,
      y: c.dispH ? (cypx - c.offY) / c.dispH : (clientY - rect.top) / rect.height,
    };
  }, []);

  // 라벨 히트테스트 — 아이콘+글자 바운딩박스(화면 px) 안인지. 정규좌표(영상프레임) 입력을 px로 변환.
  const hitTestLabel = useCallback((nx: number, ny: number): { title: string; kind: 'poi' | 'station' } | null => {
    const c = coverRef.current;
    const cxpx = c.offX + nx * c.dispW, cypx = c.offY + ny * c.dispH;
    const boxes = labelHitRef.current;
    for (let i = boxes.length - 1; i >= 0; i--) {   // 나중에 그린(위) 라벨 우선
      const b = boxes[i];
      if (cxpx >= b.x0 && cxpx <= b.x1 && cypx >= b.y0 && cypx <= b.y1) return { title: b.title, kind: b.kind };
    }
    return null;
  }, []);

  const onPoiPointerDown = useCallback((e: React.PointerEvent<HTMLCanvasElement>) => {
    const { x: nx, y: ny } = clientToVideoNorm(e.clientX, e.clientY);

    // 편집/세로화각 보정: POI 선택 + 드래그
    if (editModeRef.current || fovModeRef.current || yawModeRef.current) {
      const canvas = canvasRef.current; if (!canvas) return;
      const hit = hitTestLabel(nx, ny);
      if (!hit) return;
      const poi = allPoisRef.current.concat(allStructuresRef.current).find(p => p.title === hit.title);
      if (!poi) return;
      const baseZ = (poi.z > 0 ? poi.z : nearestCL(poi.lat, poi.lon)?.z) ?? poi.z;  // 실측 z 우선(가시 gz 와 동일 규칙)
      const poiZ = overridesRef.current[hit.title] ? poi.z : baseZ;
      setSelPoi(hit.title); setSelZ(poiZ); setSelZBase(baseZ);
      dragRef.current = { title: hit.title, lat: poi.lat, lon: poi.lon, z0: poiZ, sx: nx, sy: ny };
      dragPosRef.current = { x: nx, y: ny };
      setDragTitle(hit.title);
      try { canvas.setPointerCapture(e.pointerId); } catch { /* noop */ }
      return;
    }

    // 기본: 캔버스가 모든 클릭을 받음 →
    //   - 라벨 클릭: 팝업 있으면 전체↔컴팩트 토글, 없으면 전체 팝업 추가.
    //   - 빈 곳 클릭: 펼쳐진/수동 팝업 정리(컴팩트로), 없으면 재생/정지 토글.
    const hit = hitTestLabel(nx, ny);
    if (!hit) {
      const cur = infoPopupsRef.current;
      if (cur.some(p => p.expanded || !p.auto)) {
        setInfoPopups(prev => prev.filter(p => p.auto).map(p => ({ ...p, expanded: false })));
      } else {
        onTogglePlayRef.current?.();
      }
      return;
    }
    const id = `${hit.kind}:${hit.title}`;
    // 이미 팝업이 있으면(자동 컴팩트 포함) 클릭으로 전체↔컴팩트 토글.
    if (infoPopupsRef.current.some(p => p.id === id)) {
      setInfoPopups(prev => prev.map(p => p.id === id ? { ...p, expanded: !p.expanded } : p));
      return;
    }
    const obj = hit.kind === 'poi'
      ? allPoisRef.current.concat(allStructuresRef.current).find(p => p.title === hit.title)
      : allGeoStationsRef.current.find(s => s.title === hit.title);
    if (!obj) return;
    const groundZ = overridesRef.current[hit.title]?.z ?? (obj.z > 0 ? obj.z : nearestCL(obj.lat, obj.lon)?.z) ?? obj.z;  // 실측 z 우선
    const drone = getSmoothedDrone();
    const dist = drone
      ? toCameraCoords(drone, obj.lat, obj.lon, groundZ, paramsRef.current, worldOriginRef.current).distH ?? null
      : null;
    const disp = (hit.kind === 'poi' ? displayedPoiRef.current : displayedStRef.current).get(hit.title)!;
    const c = coverRef.current;
    const compact = compactFieldsOf(obj.props);
    setInfoPopups(prev => [...prev, {
      id, kind: hit.kind, title: hit.title, category: obj.category, lat: obj.lat, lon: obj.lon, z: groundZ, dist,
      sx: c.offX + disp.x * c.dispW, sy: c.offY + disp.y * c.dispH, props: obj.props,
      compact, auto: false, expanded: compact.length === 0,   // 컴팩트필드 없으면 바로 전체
    }]);
  }, [nearestCL, clientToVideoNorm, getSmoothedDrone, hitTestLabel]);

  const onPoiPointerMove = useCallback((e: React.PointerEvent<HTMLCanvasElement>) => {
    if (!dragRef.current) return;
    dragPosRef.current = clientToVideoNorm(e.clientX, e.clientY);
  }, [clientToVideoNorm]);

  // 캔버스 입력/커서 — Video.js controls:false 라 영상은 클릭을 처리 안 함 → 캔버스가 모든 클릭을
  //   받아 직접 분기(라벨=팝업 / 빈 곳=팝업닫기 or 재생토글). 커서는 라벨 위에서만 손모양.
  useEffect(() => {
    const canvas = canvasRef.current; if (!canvas) return;
    const parent = canvas.parentElement; if (!parent) return;
    // 영상이 준비되기 전(폴더 선택 화면 등)엔 입력을 받지 않음 → 하위 UI(폴더 선택/드롭) 클릭 통과.
    if (!videoReady) { canvas.style.pointerEvents = 'none'; return; }
    canvas.style.pointerEvents = 'auto';
    canvas.style.cursor = (editMode || fovMode || yawMode) ? 'move' : 'default';
    if (editMode || fovMode || yawMode) { setInfoPopups([]); return; }
    const onMove = (e: MouseEvent) => {
      const { x: nx, y: ny } = clientToVideoNorm(e.clientX, e.clientY);
      canvas.style.cursor = hitTestLabel(nx, ny) ? 'pointer' : 'default';
    };
    parent.addEventListener('mousemove', onMove);
    return () => { parent.removeEventListener('mousemove', onMove); };
  }, [videoReady, editMode, fovMode, yawMode, clientToVideoNorm, hitTestLabel]);

  const onPoiPointerUp = useCallback(() => {
    const drag = dragRef.current, pos = dragPosRef.current;
    dragRef.current = null; dragPosRef.current = null; setDragTitle(null);
    if (!drag || !pos) return;
    // 거의 안 움직였으면 '클릭=선택'으로 보고 변경 안 함.
    if (Math.hypot(pos.x - drag.sx, pos.y - drag.sy) < 0.012) return;
    const drone = getSmoothedDrone(); if (!drone) return;
    const p = paramsRef.current, wo = worldOriginRef.current;

    // ── Yaw(방위 오프셋) 보정 ──
    // 드롭한 화면점의 '가로'(px)만 맞춘다. 라벨의 절대 방위는 고정이므로,
    //   현재 카메라축 기준 수평각 θ0 = atan2(Xc, Zc) 과 드롭 지점이 요구하는
    //   수평각 θ1 = atan((px* − 0.5 − cx0)·sW / f) 의 차이만큼 카메라 방위를 돌리면 됨:
    //   yawOffset_new = yawOffset_old + (θ0 − θ1)
    if (yawModeRef.current) {
      const poiZ = poiDroneHeightRef.current
        ? drone.altitude - (p.geoidOffset ?? 0) - droneHeightDropRef.current
        : drag.z0;
      const cc = toCameraCoords(drone, drag.lat, drag.lon, poiZ, p, wo);
      if (cc.Zc < 0.1) return;
      const th0 = Math.atan2(cc.Xc, cc.Zc);
      const th1 = Math.atan(((pos.x - 0.5 - (p.cx0 ?? 0)) * (p.sensorW ?? 36)) / p.focalLen);
      const dYaw = (th0 - th1) * 180 / Math.PI;
      if (!isFinite(dYaw) || Math.abs(dYaw) > 45) { alert('보정량이 비정상적으로 큽니다 — 올바른 지물 위치로 끌었는지 확인하세요.'); return; }
      const next = Math.max(-180, Math.min(180, (p.yawOffset ?? 0) + dYaw));
      setParam('yawOffset', Math.round(next * 10) / 10);
      console.log(`[yaw] 드래그 역산: Δ${dYaw.toFixed(2)}° → Yaw± ${next.toFixed(1)}°`);
      return;
    }

    // ── 세로 화각(sensorH) 보정 ──
    // 드롭한 화면점의 '세로'(py)만 맞춘다. 가로(f/sW)는 이미 정확하므로 건드리지 않음
    //   (f 를 바꾸면 가로까지 틀어져 스테이션선이 좌우로 벗어남).
    //   py = 0.5 + cy0 + (Yc/Zc)·(f/sH)  →  sH = (Yc/Zc)·f / (py* − 0.5 − cy0)
    // sH 만 바꾸므로 세로 배율(상하 벌어짐)만 교정됨. 중심에서 충분히 떨어진 POI 로 보정.
    if (fovModeRef.current) {
      // 렌더와 동일한 poiZ (드론높이 모드면 드론−이격거리, 아니면 선택 z).
      const poiZ = poiDroneHeightRef.current
        ? drone.altitude - (p.geoidOffset ?? 0) - droneHeightDropRef.current
        : drag.z0;
      const cc = toCameraCoords(drone, drag.lat, drag.lon, poiZ, p, wo);
      if (cc.Zc < 0.1) return;
      const b = cc.Yc / cc.Zc;
      const v = pos.y - 0.5 - (p.cy0 ?? 0);
      // 화면 세로 중심 근처면(v≈0) 역산이 불안정 → 무시(중심에서 떨어진 POI 사용 안내).
      if (Math.abs(v) < 0.03 || Math.abs(b) < 1e-6) { alert('세로 중심에서 더 떨어진 POI로 보정하세요(위/아래).'); return; }
      const sHNew = Math.max(6, Math.min(36, (b * p.focalLen) / v));
      setParam('sensorH', sHNew);
      return;
    }

    // ── 위치(lat/lon) 보정 ── 드롭한 화면점을 지면(현재 z)과 교차해 좌표 갱신.
    const ll = groundPointFromPixel(drone, pos.x, pos.y, drag.z0, p, wo);
    if (ll) setPoiOverride(drag.title, { lat: ll.lat, lon: ll.lon, z: drag.z0 });
  }, [getSmoothedDrone, setPoiOverride, setParam]);

  // 선택된 POI의 표고를 슬라이더로 직접 설정 (lat/lon 고정).
  const setSelectedZ = useCallback((z: number) => {
    setSelZ(z);
    if (!selPoi) return;
    const poi = allPoisRef.current.concat(allStructuresRef.current).find(p => p.title === selPoi);
    if (poi) setPoiOverride(selPoi, { lat: poi.lat, lon: poi.lon, z });
  }, [selPoi, setPoiOverride]);

  const exportOverrides = useCallback(() => {
    const data = { baseName: storeBaseName, overrides: storePoiOverrides };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${storeBaseName ?? 'poi'}_poi_overrides.json`;
    a.click();
    URL.revokeObjectURL(url);
  }, [storeBaseName, storePoiOverrides]);

  const importOverridesFile = useCallback((file: File) => {
    file.text().then(t => {
      try {
        const obj = JSON.parse(t);
        const map = (obj && typeof obj === 'object' && obj.overrides) ? obj.overrides : obj;
        setPoiOverrides(map as PoiOverrideMap);
      } catch { alert('보정 파일 파싱 실패'); }
    });
  }, [setPoiOverrides]);

  // DEM 표고 자동적용 — 현재 POI/구조물 좌표로 지면고도(open-meteo, EGM2008 정표고≈측점)를
  // 일괄 조회해 override z로 설정. 선로표고 가정 대신 실제 지형고도 → 멀리서 밀리는 슬라이드 완화.
  // (90m DEM이라 절벽/구조물 인접은 부정확할 수 있음 → 그런 건 드래그로 미세보정.)
  const applyDemElevations = useCallback(async () => {
    const all = allPoisRef.current.concat(allStructuresRef.current);
    if (!all.length) { alert('POI가 없습니다'); return; }
    setDemBusy(true);
    try {
      const next: PoiOverrideMap = { ...useGeoStore.getState().poiOverrides };
      const CH = 100;
      for (let i = 0; i < all.length; i += CH) {
        const chunk = all.slice(i, i + CH);
        const lat = chunk.map(p => p.lat).join(',');
        const lon = chunk.map(p => p.lon).join(',');
        // 서버 프록시(같은 출처) — COEP/CSP로 외부 직접 호출이 막혀 서버가 중계.
        const r = await fetch(`/api/elevation?lat=${lat}&lon=${lon}`);
        const j = await r.json();
        const elev = j?.elevation;
        if (Array.isArray(elev)) {
          chunk.forEach((p, k) => {
            if (typeof elev[k] !== 'number') return;
            // DEM(SRTM30m)이 그 좌표 지점의 지면고도 → 그대로 사용(구글 지면고도와 일치).
            // (이전엔 선로표고로 상한을 걸었으나, 실제 지형 상승까지 깎아 부정확 → 제거.
            //  드물게 옥상고도로 뜨는 건물은 드래그/표고슬라이더로 개별 보정.)
            next[p.title] = { lat: p.lat, lon: p.lon, z: elev[k] };
          });
        }
      }
      setPoiOverrides(next);
    } catch (e) {
      alert('DEM 표고 조회 실패 (인터넷/CORS 확인): ' + e);
    } finally {
      setDemBusy(false);
    }
  }, [setPoiOverrides]);

  // 화면표시 옵션 일괄 복귀 — 환경설정 파일(*.display.json)이 폴더에 있으면 **그 파일 값**으로,
  // 없으면 DISPLAY_DEFAULTS 로 복원 (파일에 없는 항목도 기본값). POI 보정/편집모드는 별도 버튼 유지.
  const resetDisplayDefaults = useCallback(() => {
    const d = (useGeoStore.getState().displayJson ?? {}) as Record<string, unknown>;
    const num = (k: string, def: number): number =>
      typeof d[k] === 'number' && isFinite(d[k] as number) ? (d[k] as number) : def;
    const bool = (k: string, def: boolean): boolean =>
      typeof d[k] === 'boolean' ? (d[k] as boolean) : def;
    setShowCenterline(bool('showCenterline', DISPLAY_DEFAULTS.showCenterline));
    setShowDronePath(bool('showDronePath', DISPLAY_DEFAULTS.showDronePath));
    setDronePathZ(num('dronePathZ', DISPLAY_DEFAULTS.dronePathZ));
    setClFx(bool('clFx', DISPLAY_DEFAULTS.clFx));
    setClTubeD(num('clTubeD', DISPLAY_DEFAULTS.clTubeD));
    setClDotDiv(num('clDotDiv', DISPLAY_DEFAULTS.clDotDiv));
    setDronePathAlpha(num('dronePathAlpha', DISPLAY_DEFAULTS.dronePathAlpha));
    setSmoothHalf(num('smoothHalf', DISPLAY_DEFAULTS.smoothHalf));
    setEmaAlpha(num('emaAlpha', DISPLAY_DEFAULTS.emaAlpha));
    setSmoothMinAlpha(num('smoothMinAlpha', DISPLAY_DEFAULTS.smoothMinAlpha));
    setSmoothSpeedRef(num('smoothSpeedRef', DISPLAY_DEFAULTS.smoothSpeedRef));
    setMaxPoiRange(num('maxPoiRange', DISPLAY_DEFAULTS.maxPoiRange));
    setPoiDroneHeight(bool('poiDroneHeight', DISPLAY_DEFAULTS.poiDroneHeight));
    setDroneHeightDrop(num('droneHeightDrop', DISPLAY_DEFAULTS.droneHeightDrop));
  }, []);

  // 카메라 파라미터 초기화 — 환경설정 파일(*.camera.json)이 폴더에 있으면 **그 파일 값**으로,
  // 없으면 DEFAULT_CAMERA_PARAMS 로 복원 (파일에 없는 항목도 기본값).
  const resetCameraParams = useCallback(() => {
    const cam = useGeoStore.getState().cameraJson;
    const next = { ...DEFAULT_CAMERA_PARAMS };
    if (cam) {
      for (const [k, v] of Object.entries(cam)) {
        if (k in next && typeof v === 'number' && isFinite(v)) {
          (next as unknown as Record<string, number>)[k] = v;
        }
      }
    }
    setParams(next);
  }, []);

  return (
    <>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 z-20"
        style={{ width: '100%', height: '100%' }}
        onPointerDown={onPoiPointerDown}
        onPointerMove={onPoiPointerMove}
        onPointerUp={onPoiPointerUp}
        onPointerCancel={onPoiPointerUp}
      />

      {/* 나침반 미니맵 — 우측 상단(기존 캔버스 나침반 대체). 핀은 RAF 가 드론 방위로 회전. */}
      {geoDataLoaded && (compassType === 'map'
        ? <MapCompass poseRef={mapPoseRef} />
        : <Minimap ref={minimapRef} />)}

      {/* 라벨 속성 팝업(다중) — 위치는 RAF 가 라벨을 따라 갱신. DOM 이라 텍스트 선명.
          컴팩트(기본 5필드) ↔ 전체 토글은 팝업 클릭. 자동(auto) 팝업은 ✕ 없음(가시 구조물 따라 표시).
          ▶ 클립 컨테이너: 높이 = 영상영역(H − barHeight). overflow-hidden 으로 스테이션바 영역을 가려
            팝업이 라벨 따라 내려가면 바 뒤로 슬라이드되어 사라짐(flip/걸침 없이). */}
      <div className="absolute left-0 right-0 top-0 overflow-hidden pointer-events-none z-40" style={{ bottom: barHeight }}>
      {infoPopups.map(pp => {
        const showFull = pp.expanded || !pp.compact || pp.compact.length === 0;
        // 전체 보기: 컴팩트 항목을 같은 순서로 맨 위에 + 나머지 속성 → 클릭 전/후 순서 일치.
        const fields = showFull
          ? (pp.props && pp.props.length > 0 ? orderedFullFields(pp.compact ?? [], pp.props) : null)
          : pp.compact!;
        return (
        <div
          key={pp.id}
          ref={el => {
            if (el) {
              // RAF 가 위치를 확정(popupPosRef 등록)하기 전인 '신규' 팝업은 숨겨서 mount →
              //   화면 밖 라벨의 팝업이 직전(stale) 위치에 한 프레임 번쩍이는 것 방지.
              //   RAF 가 온스크린 확인 후 visibility:visible + 위치 지정(off 면 계속 숨김→제거).
              //   visibility 는 RAF 가 명령형으로만 관리(style prop 미포함) → 재렌더에도 유지.
              if (!popupPosRef.current.has(pp.id)) el.style.visibility = 'hidden';
              popupElsRef.current.set(pp.id, el);
            } else popupElsRef.current.delete(pp.id);
          }}
          onClick={() => setInfoPopups(prev => prev.map(p => p.id === pp.id ? { ...p, expanded: !p.expanded } : p))}
          title={showFull ? '클릭 → 접기' : '클릭 → 전체 항목'}
          className="absolute z-40 max-w-[260px] bg-black/90 border border-emerald-500/70 rounded-md shadow-xl text-white text-[11px] px-2 py-1.5 pointer-events-auto cursor-pointer"
          style={{ left: Math.min(Math.max(8, pp.sx - 10), (canvasSizeRef.current.w || 9999) - 240), top: Math.min(Math.max(8, pp.sy + 27), (canvasSizeRef.current.h || 9999) - 140) }}
        >
          {!pp.auto && (
            <button onClick={e => { e.stopPropagation(); setInfoPopups(prev => prev.filter(p => p.id !== pp.id)); }} className="absolute top-0.5 right-1 text-gray-400 hover:text-white leading-none text-[12px]">✕</button>
          )}
          <div className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 font-mono text-[10px] text-gray-300 max-h-[45vh] overflow-y-auto">
            {fields ? (
              fields.map((p, i) => (
                <React.Fragment key={i}>
                  <span className="text-gray-500 whitespace-nowrap">{p.k}</span>
                  <span className="break-all">{p.v}</span>
                </React.Fragment>
              ))
            ) : (
              <>
                <span className="text-gray-500">위도</span><span>{pp.lat.toFixed(6)}</span>
                <span className="text-gray-500">경도</span><span>{pp.lon.toFixed(6)}</span>
              </>
            )}
            {/* 표고(z) — KML 좌표 3번째 성분(타원체고). 속성표(SimpleData)에 없어서 별도 표기.
                (지장물의 '높이' 속성은 구조물 높이라 표고와 구분. 컴팩트 팝업은 간결 유지) */}
            {showFull && pp.z > 0 && (
              <>
                <span className="text-gray-500 whitespace-nowrap">표고</span>
                <span className="break-all">{pp.z.toFixed(1)} m (타원체고)</span>
              </>
            )}
          </div>
        </div>
        );
      })}
      </div>

      {showPanel && (
      <div className="absolute right-2 z-30 flex flex-col-reverse items-end gap-2" style={{ bottom: (barHeight || 130) + 8 }}>
        {/* 버튼 순서 = 패널 위치와 일치: 카메라(왼쪽 패널) → 화면표시(오른쪽 패널) */}
        <div className="flex gap-2">
          <button onClick={() => setShowControls(v => !v)}
            className={`text-xs whitespace-nowrap px-2 py-1 rounded border ${showControls ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/70 hover:bg-black/90 text-gray-300 border-gray-600'}`}>
            {showControls ? '▲ 카메라 파라미터' : '▼ 카메라 파라미터'}
          </button>
          <button onClick={() => setShowDisplay(v => !v)}
            className={`text-xs whitespace-nowrap px-2 py-1 rounded border ${showDisplay ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/70 hover:bg-black/90 text-gray-300 border-gray-600'}`}>
            {showDisplay ? '▲ 화면표시 옵션' : '▼ 화면표시 옵션'}
          </button>
        </div>

        {/* 두 패널을 가로로 나란히(우→좌) 펼침 — 둘 다 열어도 세로로 안 쌓여 화면 위로 안 넘침. */}
        <div className="flex flex-row-reverse items-end gap-2">
        {/* ── 화면표시 옵션 (카메라 외 모든 표시 설정) ── */}
        {showDisplay && (
          <div className="bg-black/90 border border-sky-700 rounded p-3 text-white w-72 select-none max-h-[80vh] overflow-y-auto shadow-xl">
            <div className="flex items-center justify-between border-b border-gray-700 pb-2 mb-2">
              <span className="text-[10px] text-gray-500 uppercase tracking-wider">표시 토글</span>
              {/* 화면표시 옵션 전체를 display.json 으로 PC 저장 — 폴더에 넣어두면 자동 적용 */}
              <button
                type="button"
                onClick={saveDisplayToPc}
                className={`text-[10px] px-1.5 py-0.5 rounded border ${dispSaveState === 'ok' ? 'border-emerald-400 bg-emerald-700/60 text-emerald-100' : 'border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
                title="현재 화면표시 옵션 전체(토글/슬라이더/시설등급 등)를 display.json 으로 PC에 다운로드 — 영상 폴더에 넣어두면 폴더 선택 시 자동 적용"
              >{dispSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
            </div>
            {/* 나침반 타입 — 눈금(analog) / 지도(OSM, 노스업) 선택 */}
            <div className="flex items-center gap-1.5 text-[11px] mb-3">
              <span className="text-gray-400 w-12 shrink-0 text-right">나침반</span>
              <div className="flex-1 flex gap-1">
                <button
                  onClick={() => setCompassType('analog')}
                  className={`flex-1 px-2 py-1 rounded border text-[11px] ${compassType === 'analog' ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/60 border-gray-700 text-gray-300 hover:bg-black/80'}`}
                >눈금</button>
                <button
                  onClick={() => setCompassType('map')}
                  className={`flex-1 px-2 py-1 rounded border text-[11px] ${compassType === 'map' ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/60 border-gray-700 text-gray-300 hover:bg-black/80'}`}
                  title="지도 위 현재 위치(노스업). 인터넷 필요."
                >지도</button>
              </div>
            </div>
            {/* 지도 나침반 배경 — 일반(OSM) / 위성(Esri). 지도 타입일 때만 노출. */}
            {compassType === 'map' && (
              <div className="flex items-center gap-1.5 text-[11px] mb-3">
                <span className="text-gray-400 w-12 shrink-0 text-right">지도</span>
                <div className="flex-1 flex gap-1">
                  <button
                    onClick={() => setCompassMapStyle('street')}
                    className={`flex-1 px-2 py-1 rounded border text-[11px] ${compassMapStyle === 'street' ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/60 border-gray-700 text-gray-300 hover:bg-black/80'}`}
                  >일반</button>
                  <button
                    onClick={() => setCompassMapStyle('sat')}
                    className={`flex-1 px-2 py-1 rounded border text-[11px] ${compassMapStyle === 'sat' ? 'bg-amber-400 border-amber-300 text-black' : 'bg-black/60 border-gray-700 text-gray-300 hover:bg-black/80'}`}
                    title="Esri World Imagery 위성 영상"
                  >위성</button>
                </div>
              </div>
            )}
            <div className="space-y-2 mb-3">
              {/* 선형/드론궤적/좌측패널 토글은 하단 재생바(VideoPlayer)로 이동. 측점 진단 버튼은 삭제. */}
              {/* 경로표고·투명도는 드론궤적 ON/OFF 무관하게 항상 표시. */}
              <ParamRow label="경로 표고" tip={`GPS 측정점(노란 점)을 표고 ${dronePathZ}m 에 투영·연결`} value={dronePathZ} min={-10} max={pathZMax} step={1} unit="m" decimals={0} onChange={v => setDronePathZ(Math.round(v))} />
              <button onClick={() => setClFx(v => !v)}
                className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${clFx ? 'bg-red-500/70 border-red-300 text-white font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
                {clFx ? '■ 선형 입체형 (원통 + 유동 대시)' : '▶ 선형 기본형 (단순 선)'}
              </button>
              {clFx && (
                <>
                <ParamRow label="선형 지름" tip="입체형 원통의 실제 지름(m) — 가까울수록 굵고 멀수록 가늘게 원근 표현. display.json(clTubeD) 저장" value={clTubeD} min={0.2} max={5} step={0.1} unit="m" decimals={1} onChange={v => setClTubeD(v)} />
                <ParamRow label="측점 분할" tip="측점(100m) 사이를 N등분한 위치에 노란 점 표시 — 10이면 10m 단위. 1 = 점 없음. 중간(½) 지점은 크게. display.json(clDotDiv) 저장" value={clDotDiv} min={1} max={20} step={1} unit="등분" decimals={0} onChange={v => setClDotDiv(Math.round(v))} />
                </>
              )}
              <ParamRow label="투명도" tip={`드론 궤적 선/점 투명도 α=${dronePathAlpha.toFixed(2)}`} value={dronePathAlpha} min={0.1} max={1.0} step={0.05} unit="" decimals={2} onChange={v => setDronePathAlpha(v)} />
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">스무딩 <span className="text-gray-600">(재계산 500ms 후)</span></div>
            <div className="mb-3 space-y-2">
              <ParamRow label="smooth" tip={`±${smoothHalf}fr = ±${(smoothHalf * 1000 / (30000/1001)).toFixed(0)}ms · 드론 자세 이동평균 반폭(최대) — 회전 중엔 자동 축소로 즉시 추종`} value={smoothHalf} min={0} max={60} step={1} unit="fr" decimals={0} onChange={v => setSmoothHalf(Math.round(v))} />
              <ParamRow label="EMA α" tip={`α=${emaAlpha.toFixed(2)} → lag≈${(1000/60*(1/emaAlpha - 1)).toFixed(0)}ms · 화면좌표 평활 상한(빠를 때 추종 한계, ↑반응/↓부드러움)`} value={emaAlpha} min={0.01} max={1.0} step={0.01} unit="" decimals={2} onChange={v => setEmaAlpha(v)} />
              <ParamRow label="떨림억제" tip="정지/느릴 때 최소 추종(α min). 작을수록 1배속 떨림이 더 강하게 평활됨(지연 약간↑). 기본 0.12" value={smoothMinAlpha} min={0.02} max={0.6} step={0.01} unit="" decimals={2} onChange={v => setSmoothMinAlpha(v)} />
              <ParamRow label="반응속도" tip="이 화면속도(정규/프레임) 이상이면 즉시 추종. 키우면 더 강하게 평활(느린 이동까지 부드럽게), 줄이면 더 빨리 반응. 기본 0.010" value={smoothSpeedRef} min={0.002} max={0.04} step={0.001} unit="" decimals={3} onChange={v => setSmoothSpeedRef(v)} />
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">POI 필터 / 높이</div>
            <div className="mb-3 space-y-2">
              <ParamRow label="POI 범위" tip="드론 위치와의 수평 직선거리 — 이 범위 안의 POI만 표시(밖은 제외)" value={maxPoiRange} min={10} max={1000} step={10} unit="m" decimals={0} onChange={v => setMaxPoiRange(Math.round(v))} />
              <button onClick={() => setPoiDroneHeight(v => !v)}
                className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${poiDroneHeight ? 'bg-amber-500/80 border-amber-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
                {poiDroneHeight ? `■ 드론 높이와 POI 이격거리 ${droneHeightDrop}m` : '▶ 드론 높이와 POI 이격거리'}
              </button>
              {poiDroneHeight && (
                <ParamRow label="이격거리" tip={`POI를 드론보다 ${droneHeightDrop}m 아래에 배치 (값↑ = POI 아래로)`} value={droneHeightDrop} min={0} max={300} step={1} unit="m" decimals={0} onChange={v => setDroneHeightDrop(Math.round(v))} />
              )}
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">POI 위치 편집 (마우스)
              <InfoTip text="드래그=수평위치 이동(가까운 프레임에서). 클릭 후 표고 슬라이더=높이. DEM(SRTM 30m)으로 각 POI 지점의 지면고도 적용(구글 지면고도와 일치). 옥상으로 뜨는 건물은 드래그/슬라이더로 보정. 자동저장." />
            </div>
            <div className="space-y-2">
              <button onClick={() => { setEditMode(v => { const nv = !v; if (nv) { setFovMode(false); setYawMode(false); } return nv; }); }}
                className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${editMode ? 'bg-yellow-500/80 border-yellow-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
                {editMode ? '■ 편집 종료' : '✎ 편집 모드 (POI 위치/표고)'}
              </button>
              <button onClick={() => { setFovMode(v => { const nv = !v; if (nv) { setEditMode(false); setYawMode(false); } return nv; }); }}
                className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${fovMode ? 'bg-purple-500/80 border-purple-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
                {fovMode ? '■ 세로화각 보정 종료' : '🎯 세로화각 보정 — POI를 실제 위치(상하)로 드래그'}
                <InfoTip text="라벨이 멀리(위)/가까이(아래)서 상하로 어긋날 때 사용. POI 하나를 영상 속 실제 위치로 끌면 세로 화각(sensorH)만 역산해 상하 정렬. 가로(초점 f)는 안 건드려 빨간 중심선이 좌우로 안 틀어짐. 세로 중심에서 충분히 떨어진(위/아래) POI로 보정." />
              </button>
              <button onClick={() => { setYawMode(v => { const nv = !v; if (nv) { setEditMode(false); setFovMode(false); } return nv; }); }}
                className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${yawMode ? 'bg-sky-500/80 border-sky-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
                {yawMode ? '■ Yaw 보정 종료' : '🧭 Yaw 보정 — POI를 실제 위치(좌우)로 드래그'}
                <InfoTip text="라벨 전체가 좌우로 치우칠 때 사용. POI 하나를 영상 속 실제 지물 위치로 끌면 필요한 Yaw±(방위 오프셋)를 역산해 자동 설정. 자동추정(비행경로) 후 마무리 미세조정에 적합." />
              </button>
              <div className="text-[10px] text-gray-600">ℹ️ 라벨 클릭 → 속성 팝업(여러 개 누적, 재생 따라 이동). 빈 곳 클릭 → 팝업 닫기, 팝업 없으면 재생/정지.</div>
              <div className="text-[10px] text-gray-500">
                {dragTitle ? `드래그 중: ${dragTitle}`
                  : fovMode ? `🎯 POI를 실제 위치로 끌면 세로화각 자동보정 (현재 senH=${(params.sensorH ?? 20.25).toFixed(2)}mm)`
                  : yawMode ? `🧭 POI를 실제 위치(좌우)로 끌면 Yaw 자동보정 (현재 Yaw±=${params.yawOffset.toFixed(1)}°)`
                  : `보정된 POI ${Object.keys(storePoiOverrides).length}개`}
              </div>
              {editMode && selPoi && (
                <div className="border border-sky-800 rounded p-1.5 bg-sky-950/40 space-y-1">
                  <div className="text-[10px] text-sky-300 truncate">선택: {cleanTitle(selPoi)}</div>
                  <ParamRow label="표고 z" value={selZ} min={Math.round(selZBase - 30)} max={Math.round(selZBase + 12)} step={0.5} unit="m" decimals={1} onChange={setSelectedZ} />
                  <div className="flex items-center justify-between text-[10px] text-gray-500">
                    <span>선로표고 {selZBase.toFixed(1)}m</span>
                    <button onClick={() => { if (selPoi) { clearPoiOverride(selPoi); setSelZ(selZBase); } }}
                      className="text-gray-400 hover:text-red-300 border border-gray-700 rounded px-1">이 POI 해제</button>
                  </div>
                </div>
              )}
              <div className="flex gap-1">
                <button onClick={exportOverrides}
                  className="flex-1 text-[11px] px-2 py-0.5 rounded border border-gray-600 text-gray-200 hover:border-gray-400">내보내기</button>
                <button onClick={() => fileInputRef.current?.click()}
                  className="flex-1 text-[11px] px-2 py-0.5 rounded border border-gray-600 text-gray-200 hover:border-gray-400">가져오기</button>
              </div>
              <input ref={fileInputRef} type="file" accept=".json,application/json" className="hidden"
                onChange={e => { const f = e.target.files?.[0]; if (f) importOverridesFile(f); e.target.value = ''; }} />
              <div className="flex gap-1">
                <button onClick={applyDemElevations} disabled={demBusy}
                  className="flex-1 text-[11px] px-2 py-1 rounded border border-sky-700 bg-sky-900/40 text-sky-200 hover:border-sky-400 disabled:opacity-50">
                  {demBusy ? 'DEM 조회 중…' : '🌐 DEM 표고 자동적용'}
                </button>
                <button onClick={() => { if (confirm('POI 위치/표고 보정을 모두 초기화할까요? (선로표고로 복귀)')) setPoiOverrides({}); }}
                  className="text-[11px] px-2 py-1 rounded border border-gray-600 text-gray-300 hover:border-red-400 hover:text-red-300">
                  보정 초기화
                </button>
              </div>
            </div>
            <div className="border-t border-gray-700 pt-2 mt-3 flex items-center justify-end">
              <button onClick={resetDisplayDefaults}
                title="환경설정 파일(*.display.json)이 폴더에 있으면 그 값으로, 없으면 기본값으로 복원 (POI 보정은 별도)"
                className="text-[11px] text-gray-400 hover:text-white border border-gray-600 hover:border-gray-400 px-2 py-0.5 rounded transition-colors">
                기본값
              </button>
            </div>
          </div>
        )}

        {/* ── 카메라 파라미터 (드론 카메라 관련만) ── */}
        {showControls && (
          <div className="bg-black/90 border border-gray-600 rounded p-3 text-white w-72 select-none max-h-[80vh] overflow-y-auto shadow-xl">
            {/* 헤더 + 카메라 파라미터 PC 저장 — 화면표시 옵션 패널과 동일 위치(우상단)에 배치 */}
            <div className="flex items-center justify-between border-b border-gray-700 pb-2 mb-2">
              <span className="text-[10px] text-gray-500 uppercase tracking-wider">자세 보정 오프셋<span className="ml-1 text-gray-600">(SRT + offset)</span></span>
              <button
                type="button"
                onClick={saveCameraToPc}
                className={`text-[10px] px-1.5 py-0.5 rounded border ${camSaveState === 'ok' ? 'border-emerald-400 bg-emerald-700/60 text-emerald-100' : 'border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
                title="현재 카메라 파라미터 전체(Yaw±/f/센서 등)를 camera.json 으로 PC에 다운로드 — 영상 폴더에 넣어두면 폴더 선택 시 자동 적용"
              >{camSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
            </div>
            <div className="space-y-2 mb-3">
              <ParamRow label="시간동기" tip="영상↔비행로그 시각 오프셋(초). POI 전체가 진행방향으로 밀리면 조정 (+: 라벨을 진행방향 앞으로 / −: 뒤로). '풀 붙임' 정합의 핵심 — camera.json 에 저장됨" value={params.timeOffsetSec ?? 0} min={-2} max={2} step={0.05} unit="s" decimals={2} onChange={v => setParam('timeOffsetSec', v)} />
              <ParamRow label="자세 선행" tip="짐벌 자세 로그의 기록 지연 보정(초). 영상이 좌우로 팬(회전)할 때 라벨·선형이 늦게 따라오면 +, 앞서가면 −. 위치는 그대로 두고 자세만 앞선 시점을 참조 — camera.json 에 저장됨" value={params.attLeadSec ?? 0} min={-1} max={1} step={0.01} unit="s" decimals={2} onChange={v => setParam('attLeadSec', v)} />
              <ParamRow label="Yaw ±" value={params.yawOffset} min={-180} max={180} step={0.1} unit="°" decimals={1} onChange={v => setParam('yawOffset', v)} />
              {/* Yaw 자동 추정(2단계 보정의 1단계) — 대략 맞춘 뒤 'Yaw 보정' 드래그 모드로 마무리 */}
              <button
                type="button"
                onClick={autoEstimateYaw}
                className="w-full text-[10px] px-2 py-0.5 rounded border border-gray-600 bg-gray-800 hover:bg-gray-700 text-gray-300"
                title="전진 비행 구간의 GPS 진행 방위와 짐벌 헤딩 차이(중앙값)로 Yaw± 자동 설정 (근사) — 이후 'Yaw 보정' 드래그로 미세 조정"
              >Yaw 자동추정 (비행경로 기준)</button>
              <ParamRow label="Pitch ±" value={params.pitch} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('pitch', v)} />
              <ParamRow label="Roll ±" value={params.roll} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('roll', v)} />
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">위치 보정 (드론 GPS 오프셋)</div>
            <div className="space-y-2 mb-3">
              <ParamRow label="off X" value={params.offX} min={-500} max={500} step={0.1} unit="m" decimals={1} onChange={v => setParam('offX', v)} />
              <ParamRow label="off Y" value={params.offY} min={-500} max={500} step={0.1} unit="m" decimals={1} onChange={v => setParam('offY', v)} />
              <ParamRow label="off Z" value={params.offZ} min={-200} max={200} step={0.1} unit="m" decimals={1} onChange={v => setParam('offZ', v)} />
              <ParamRow label="지오이드" value={params.geoidOffset} min={0} max={200} step={0.1} unit="m" decimals={1} onChange={v => setParam('geoidOffset', v)} />
              <div className="text-[10px] text-gray-600 text-right">정표고→타원체고 (대전≈25.8)</div>
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">내부표정 (초점·주점·센서)</div>
            {/* 영상(djmd) 자동 감지 정보 — PC 저장은 패널 헤더 버튼 하나로 통일(중복 제거) */}
            <div className="flex items-center justify-between gap-1 mb-1.5 text-[10px] text-gray-400">
              <span className="truncate" title="영상 메타데이터(djmd)에서 감지된 카메라 정보">
                📷 {storeCameraInfo
                  ? `${storeCameraInfo.model}${storeCameraInfo.focalLen35 ? ` · ${storeCameraInfo.focalLen35}mm` : ''}${storeCameraInfo.fps ? ` · ${storeCameraInfo.fps}fps` : ''}`
                  : '카메라 미감지'}
              </span>
              {storeCameraInfo?.focalLen35 !== undefined && (
                <button
                  type="button"
                  onClick={() => setParams(p => ({ ...p, focalLen: storeCameraInfo!.focalLen35! }))}
                  className="shrink-0 px-1.5 py-0.5 rounded border border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200"
                  title={`감지된 초점거리 ${storeCameraInfo!.focalLen35}mm 를 f 에 적용`}
                >적용</button>
              )}
            </div>
            <div className="space-y-2 mb-3">
              <ParamRow label="f" value={params.focalLen} min={10} max={100} step={0.1} unit="mm" decimals={1} onChange={v => setParam('focalLen', v)} />
              <ParamRow label="cx₀" value={params.cx0} min={-0.5} max={0.5} step={0.005} unit="" decimals={3} onChange={v => setParam('cx0', v)} />
              <ParamRow label="cy₀" value={params.cy0} min={-0.5} max={0.5} step={0.005} unit="" decimals={3} onChange={v => setParam('cy0', v)} />
              <ParamRow label="sen W" value={params.sensorW} min={10} max={50} step={0.05} unit="mm" decimals={2} onChange={v => setParam('sensorW', v)} />
              <ParamRow label="sen H" value={params.sensorH} min={6} max={100} step={0.05} unit="mm" decimals={2} onChange={v => setParam('sensorH', v)} />
            </div>
            {panelDroneFrame && (
              <div className="border-t border-gray-700 pt-2 mb-2 text-[10px] text-gray-400 font-mono space-y-0.5">
                <div>yaw: {((panelDroneFrame.yaw+params.yawOffset+360)%360).toFixed(1)}° pitch: {(panelDroneFrame.pitch+params.pitch).toFixed(1)}° roll: {(panelDroneFrame.roll+params.roll).toFixed(1)}°</div>
                <div>f: {params.focalLen.toFixed(1)}mm hFOV: {(2*Math.atan((params.sensorW??36)/(2*params.focalLen))*180/Math.PI).toFixed(1)}°</div>
                <div>offX: {params.offX.toFixed(1)}m offY: {params.offY.toFixed(1)}m offZ: {params.offZ.toFixed(1)}m</div>
                <div>
                  영상 {videoWidth || '?'}×{videoHeight || '?'}
                  {videoWidth > 0 && videoHeight > 0 && (
                    <span className="text-gray-500"> ({(videoWidth / videoHeight).toFixed(3)} · cover 정렬)</span>
                  )}
                </div>
              </div>
            )}
            <div className="border-t border-gray-700 pt-2 flex items-center justify-end">
              <button onClick={resetCameraParams}
                title="환경설정 파일(*.camera.json)이 폴더에 있으면 그 값으로, 없으면 앱 기본값으로 복원"
                className="text-[11px] text-gray-400 hover:text-white border border-gray-600 hover:border-gray-400 px-2 py-0.5 rounded transition-colors">
                초기화
              </button>
            </div>
          </div>
        )}
        </div>
      </div>
      )}
    </>
  );
}
