/* ============================================================
   route-map.css — 공항 노선망(권역 묶음) — 어두운 막 · 빛나는 선 · 비행기 · 이름표 · 통계판
   (2026-09-13 신설 · 같은 날 저녁 test.png 톤으로 개편)

   ⭐ 움직임은 **CSS·SVG만으로** 만든다 — 빛점 흐름은 stroke-dashoffset, 비행기는 SVG animateMotion,
     허브 맥동은 transform. 자바스크립트 타이머로 좌표를 다시 그리지 않는다(프레임마다 연산 0).
     ⚠ 이 움직임은 **SVG에서만** 먹는다 — 그래서 모듈이 자기 pane에 L.svg 렌더러를 깐다
       (지도 기본은 preferCanvas:true다. route-map.js 머리말 ⚠ 참조).

   ⛔ 지도 전역 클래스(.leaflet-*)에 규칙을 걸지 않는다 — 남의 레이어까지 바뀐다
     (app.css의 배경지도 사고 주석과 같은 이유). 전부 .rtm- 접두사 안에서만 논다.
     예외 하나: 지도 컨테이너에 .rtm-light(막을 끈 상태)를 달아 **이 모듈의 빛번짐 색만** 바꾼다.
   ⛔ 호스트 전역 `button{width:100%;margin-top:8px}` 등에 끌려가지 않게 통계판 버튼은 전부 명시한다.
   ============================================================ */

/* ── 어두운 막 — 화면보다 훨씬 크게(pane이 지도와 함께 움직이므로 어느 쪽으로 끌어도 가장자리가 안 보인다) */
.rtm-dim{
  position: absolute; left: -50000px; top: -50000px; width: 100000px; height: 100000px;
  background: rgba(3, 10, 30, .74);
  pointer-events: none;
}

/* ── 선 세 겹 — 색·굵기·투명도는 JS(Leaflet 옵션)가 넣는다 */
.rtm-halo{ pointer-events: none; }
.rtm-core{ pointer-events: none; }
/* 흐르는 빛점 — 점(1) + 빈칸(23) = 24, keyframes 이동량과 같아야 끊김 없이 이어진다.
   주기(animationDuration)는 편수에 따라 JS가 넣는다(많이 다닐수록 빠르게) */
.rtm-flow{
  stroke-dasharray: 1 23;
  animation: rtm-dash 5s linear infinite;
  pointer-events: none;
}
@keyframes rtm-dash{ to{ stroke-dashoffset: -24; } }
.rtm-end{ pointer-events: none; }
/* 막을 끈 상태(밝은 지도) — 밝은 권역색 선이 밝은 바탕에 묻히지 않게 빛번짐을 짙은 테두리로 바꾼다.
   ⚠ CSS의 stroke가 SVG 속성(stroke="…")을 이긴다 — Leaflet이 넣은 색을 여기서 덮을 수 있다. */
.rtm-light .rtm-halo{ stroke: #0b1220 !important; stroke-opacity: .32 !important; }
.rtm-light .rtm-flow{ opacity: .55; }

/* ── 비행기 — 모양·움직임은 SVG(animateMotion)가 한다. 여기서는 누르기만 막는다 */
.rtm-planes, .rtm-plane{ pointer-events: none; }

/* ── 이름표(divIcon) 공통 — 기본 divIcon의 흰 상자·테두리를 없앤다 */
.rtm-label{ background: none !important; border: 0 !important; }

/* 출발 공항(허브) — 맥동하는 고리 셋 + 이름 */
.rtm-hub{ position: relative; display: block; width: 0; height: 0; pointer-events: none; }
.rtm-hub i{
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #e0f2fe;
  box-shadow: 0 0 10px 3px rgba(125, 211, 252, .95), 0 0 26px 8px rgba(56, 189, 248, .55);
}
.rtm-hub i + i, .rtm-hub i + i + i{
  background: transparent; box-shadow: none; border: 2px solid rgba(125, 211, 252, .8);
  animation: rtm-pulse 2.4s ease-out infinite;
}
.rtm-hub i + i + i{ animation-delay: 1.2s; }
@keyframes rtm-pulse{ from{ transform: scale(1); opacity: .9; } to{ transform: scale(4.2); opacity: 0; } }
/* 허브 이름은 점 **위쪽**에 둔다 — 옆에 두면 가까운 권역(인천 기준 일본·중국)의 이름표와 부딪힌다
   (실측 2026-09-13: 「인천 ICN」이 「일본 2,234편」을 덮었다). 위쪽(한반도 북부)은 이름표가 오지 않는 자리다. */
.rtm-hub b, .rtm-hub s{
  position: absolute; left: 0; white-space: nowrap; text-decoration: none; transform: translateX(-50%);
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  text-shadow: 0 0 6px rgba(2, 6, 23, .95), 0 0 2px rgba(2, 6, 23, .95);
}
.rtm-hub b{ top: -44px; font-size: 15px; font-weight: 800; color: #ffffff; letter-spacing: .3px; }
.rtm-hub s{ top: -26px; font-size: 11.5px; font-weight: 700; color: #7dd3fc; letter-spacing: .6px; }

/* 권역 이름 — 큼직하게, 선 끝점 위에. 누르면 펼친다 */
.rtm-rl{
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  transform: translate(-50%, calc(-100% - 9px));
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  white-space: nowrap; cursor: pointer; line-height: 1.12;
  text-shadow: 0 0 7px rgba(2, 6, 23, .95), 0 0 3px rgba(2, 6, 23, .95), 0 0 1px rgba(2, 6, 23, 1);
}
.rtm-rl b{ font-size: 16px; font-weight: 800; color: var(--c, #e2e8f0); letter-spacing: .2px; }
.rtm-rl i{ font-style: normal; font-size: 12px; font-weight: 600; color: #e2e8f0; opacity: .92; }
.rtm-rl:hover b{ filter: brightness(1.18); }
.rtm-rl.on b{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.rtm-rl.rtm-alt{ transform: translate(-50%, 9px); }      /* 겹치면 끝점 아래로 비킨다 */
.rtm-rl.rtm-rgt{ transform: translate(10px, -50%); align-items: flex-start; }             /* 그래도 겹치면 오른쪽 */
.rtm-rl.rtm-lft{ transform: translate(calc(-100% - 10px), -50%); align-items: flex-end; } /* 그다음 왼쪽 */
.rtm-rl.rtm-hide, .rtm-al.rtm-hide{ visibility: hidden; } /* 그래도 겹치면 숨긴다 — 숫자는 통계판 범례에 있다 */

/* 공항 이름(펼친 권역·국내) — 권역보다 작고 조용하게 */
.rtm-al{
  display: inline-flex; align-items: baseline; gap: 4px;
  transform: translate(-50%, calc(-100% - 6px));
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  white-space: nowrap; line-height: 1.1; pointer-events: none;
  text-shadow: 0 0 5px rgba(2, 6, 23, .95), 0 0 2px rgba(2, 6, 23, .95);
}
.rtm-al b{ font-size: 11.5px; font-weight: 700; color: #f1f5f9; }
.rtm-al i{ font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--c, #cbd5e1); }
.rtm-al.rtm-alt{ transform: translate(-50%, 6px); }
.rtm-al.rtm-rgt{ transform: translate(8px, -50%); }
.rtm-al.rtm-lft{ transform: translate(calc(-100% - 8px), -50%); }

/* ── 통계판 — 지도 컨테이너 안, 서랍·레일을 피한 띠의 가운데 아래. 자리(left/right/bottom)는 JS가 넣는다 */
.rtm-panel{
  position: absolute; z-index: 1001; box-sizing: border-box;
  margin: 0 auto; width: auto; max-width: 860px; max-height: 46vh; overflow: auto;
  padding: 10px 14px 8px;
  background: linear-gradient(180deg, rgba(12, 24, 56, .93), rgba(6, 14, 36, .95));
  border: 1px solid rgba(96, 165, 250, .28); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .55), inset 0 1px 0 rgba(148, 197, 255, .08);
  color: #e2e8f0;
  font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rtm-panel[hidden]{ display: none !important; }
/* 호스트 연결고리 — AeroNexus의 재생 바(#rcBar.on)가 떠 있으면 판을 그 위로 한 단 올린다(재생 조작을 덮지 않게).
   ⚠ #rcBar가 없는 호스트에서는 아무 일도 안 하는 규칙이다(폴더째 옮겨도 무해). 값은 #rcBar 높이(약 46px)+여유. */
body:has(#rcBar.on) .rtm-panel{ transform: translateY(-58px); }
.rtm-ph{ display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.rtm-pt{ flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rtm-pt b{ font-size: 14px; font-weight: 800; color: #ffffff; letter-spacing: .2px; }
.rtm-pt span{ font-size: 11px; color: #94a3b8; }
.rtm-panel button{
  width: auto; margin: 0; font-family: inherit; cursor: pointer; line-height: 1.2;
  box-shadow: none; text-transform: none; letter-spacing: normal;
}
.rtm-pbtn{
  flex: none; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: transparent; color: #94a3b8; border: 1px solid rgba(148, 163, 184, .4);
}
.rtm-pbtn.on{ color: #7dd3fc; border-color: rgba(125, 211, 252, .6); background: rgba(56, 189, 248, .1); }
.rtm-px{
  flex: none; width: 26px !important; height: 26px; padding: 0; border-radius: 50%;
  font-size: 17px; font-weight: 400; background: transparent; color: #94a3b8; border: 1px solid transparent;
}
.rtm-px:hover{ color: #ffffff; border-color: rgba(148, 163, 184, .45); }

/* ⭐ 판은 **납작하게**(약 150px) — 세계로 뻗는 노선망은 최소 줌에서 지도를 더 올릴 수 없어 두꺼운 판이
   남쪽 끝점(오세아니아)을 덮는다(route-map.js renderPanel ⭐). 숫자는 한 줄, 범례는 칩으로 흘린다. */
.rtm-kpis{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0;
           padding: 0 0 6px; margin: 0 0 6px; border-bottom: 1px solid rgba(148, 163, 184, .16); }
.rtm-kpi{ display: flex; align-items: baseline; gap: 5px; min-width: 0; padding: 0 14px 0 0; margin: 0 14px 0 0;
          border-right: 1px solid rgba(148, 163, 184, .18); }
.rtm-kpi:last-child{ border-right: 0; margin-right: 0; padding-right: 0; }
.rtm-kpi s{ text-decoration: none; font-size: 11px; color: #94a3b8; }
.rtm-kpi b{ font-size: 20px; font-weight: 800; color: #7dd3fc; letter-spacing: .3px; line-height: 1.15; white-space: nowrap; }
.rtm-kpi b u{ text-decoration: none; font-size: 11px; font-weight: 600; color: #94a3b8; margin-left: 2px; }
.rtm-kpi i{ font-style: normal; font-size: 10.5px; color: #94a3b8; white-space: nowrap; }

.rtm-legend{ display: flex; flex-wrap: wrap; gap: 1px 4px; }
.rtm-lg{
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 11.5px; text-align: left;
  background: transparent; color: #e2e8f0; border: 1px solid transparent;
}
.rtm-lg:hover{ background: rgba(148, 163, 184, .1); }
.rtm-lg.on{ background: rgba(148, 163, 184, .14); border-color: var(--c, #94a3b8); }
.rtm-lg i{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #94a3b8);
           box-shadow: 0 0 6px var(--c, #94a3b8); }
.rtm-lg span{ white-space: nowrap; }
.rtm-lg b{ flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: #cbd5e1; }
/* 접힘 — 제목 줄만 남긴다(▾/▴). 이 기기의 자세로 기억한다(route-map.js PMIN) */
.rtm-panel.rtm-min{ padding-bottom: 6px; }
.rtm-panel.rtm-min .rtm-ph{ margin-bottom: 0; }
.rtm-panel.rtm-min .rtm-pbody{ display: none; }
.rtm-empty{ padding: 10px 4px 12px; font-size: 13px; color: #cbd5e1; }
.rtm-warn{ margin: 6px 0 0; font-size: 11px; color: #fbbf24; }
.rtm-foot{ margin: 6px 0 0; font-size: 10.5px; color: #64748b; }

/* 좁은 화면 — 판이 지도를 다 덮지 않게 줄인다 */
@media (max-width: 760px){
  /* 오른쪽 58px은 비운다 — 좁은 화면의 지도 조작 버튼(중심/＋/－)이 오른쪽 아래에 세로로 선다(실측: 판이 덮었다).
     ⚠ 그 버튼이 없는 호스트에서도 무해하다(판이 조금 좁아질 뿐). */
  .rtm-panel{ max-height: 34vh; padding: 8px 10px 6px; margin: 0 58px 0 0; }
  .rtm-pt span{ display: none; }                    /* 근거 줄은 아래 foot·경고로 충분 — 제목 줄을 한 줄로 */
  .rtm-kpi{ padding-right: 10px; margin-right: 10px; }
  .rtm-kpi i{ display: none; }
  .rtm-kpi b{ font-size: 17px; }
  .rtm-rl b{ font-size: 14px; }
}

/* 움직임을 줄이도록 설정한 사용자에게는 흐르지 않게 한다 — 선·굵기·색·숫자는 그대로다
   (정보를 움직임에만 싣지 않았기에 꺼도 읽을 수 있다). 비행기는 JS가 아예 만들지 않는다. */
@media (prefers-reduced-motion: reduce){
  .rtm-flow{ animation: none; opacity: 0; }
  .rtm-planes{ display: none; }
  .rtm-hub i + i, .rtm-hub i + i + i{ animation: none; opacity: 0; }
}