/* ================================================================
   내 항공편 — 경로 지도 (features/ticket-brief/ticket-route.js의 모양)
   ----------------------------------------------------------------
   운영자 지시 2026-09-23: 「인천-나리타를 실제 FIR 항로를 사실적으로 세련되게」.

   ⭐ 메인 지도(index.html)와 **일부러 다르게** 만든다.
     메인은 «지금 하늘 전체»를 본다 — 밝은 바탕에 수십 대의 기체·라벨·기상이 겹친다.
     이 칸은 «내 비행 한 편»만 본다 — 어두운 바탕에 선 하나. 그래서 정보 밀도를 낮추고
     대비를 올렸다(티켓 머리 카드 .tb-head와 같은 남색 계열이라 카드 두 장이 이어져 보인다).
   v8부터 선은 하나로 표시하고, 실측/예정은 범례와 설명 문구로 구분한다.
   ⚠ CSS는 이 파일이 정본이다. JS 문자열에 스타일을 넣지 않는다(CLAUDE.md 7항).
   ================================================================ */

.tr-wrap {
  max-width: 420px;            /* v5: 작은 지도 — 넓은 화면에서도 카드 폭을 다 차지하지 않는다(사용자 지시 09-25) */
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse at 60% 30%, #12273a, #0a1323 80%);
  border: 1px solid rgba(133, 178, 207, .22);
}

/* 캔버스는 CSS 픽셀 크기만 여기서 정하고, 실제 해상도는 JS가 devicePixelRatio로 올린다.
   ⚠ `position: static`을 **명시한다** — 첫 화면(landing.css)에 `.ld-hero canvas{position:absolute;
     inset:0}`가 있어서, 이 칸이 랜딩 히어로 안에 들어가면 그 규칙에 걸린다. 그러면 캔버스가 흐름에서
     빠져 래퍼 높이가 **2px로 접히고 지도가 사라진다**(실측 2026-09-24 첫 판: wrap 720×2, canvas 718×302).
     ⚠ 선택자에 `.tr-canvas`를 **함께** 건다 — `.ld-hero canvas`와 점수가 같으면(클래스1+요소1)
       나중에 실린 landing.css가 이긴다. 클래스를 하나 더 얹어야 순서와 무관해진다.
     호스트 CSS에 기대지 않고 모듈이 자기 것을 못박는다 — ticket-brief.js의 box-sizing 방어와 같은 규율. */
.tr-wrap canvas.tr-canvas {
  display: block;
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  /* 세로 비율은 JS가 투영 상자로 정한다 — 여기서는 최소만 막는다. */
  min-height: 90px;
}

/* ── 머리줄 — 노선과 근거 ────────────────────────────────────────────── */
.tr-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px;
  font: 500 11.5px/1.35 -apple-system, system-ui, sans-serif;
  color: #cbd5e1;
  /* 지도 위에 글자가 놓이므로 위쪽만 살짝 어둡게 깐다 — 판 전체를 덮지 않는다. */
  background: linear-gradient(180deg, rgba(7, 13, 30, .82), rgba(7, 13, 30, 0));
  pointer-events: none;
}
.tr-top b { color: #f8fafc; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }

/* ── 범례 — 지도와 분리해 공항 라벨을 가리지 않는다 ──────────────────── */
.tr-legend {
  position: relative;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  font: 500 11px/1.3 -apple-system, system-ui, sans-serif;
  color: #adbdcf;
  background: rgba(7, 13, 30, .6);
  border-top: 1px solid rgba(133, 178, 207, .14);
}
.tr-legend i { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 5px; }
.tr-legend .seen i { border-top: 2.5px solid #4deeea; }
.tr-legend .rest i { border-top: 2px dashed rgba(148, 163, 184, .85); }
.tr-legend .seen { color: #9ff3f1; }
.tr-legend .tr-distance { margin-left: auto; font-variant-numeric: tabular-nums; }
.tb-wrap .tr-caption { margin: 8px 2px 0; color: #a5b7ca; font-size: 10.5px; line-height: 1.6; }

/* ── 자료가 없을 때 — 지도를 그리지 않고 이유를 적는다 ────────────────── */
.tr-none {
  padding: 14px 13px;
  font: 400 12.5px/1.55 -apple-system, system-ui, sans-serif;
  color: #94a3b8;
}
.tr-none b { color: #cbd5e1; font-weight: 600; }

/* 좁은 화면에서는 머리줄 글자를 한 단 줄인다(선 위에 겹치는 면적을 줄인다). */
@media (max-width: 420px) {
  .tr-top { font-size: 11px; padding: 8px 9px; }
  .tr-top b { font-size: 12px; }
  .tr-legend { font-size: 10.5px; gap: 9px; padding: 7px 9px 8px; }
}

/* 랜딩(첫 화면)의 유리 카드 안에서도 같은 톤을 유지한다 —
   .ld-search가 color를 상속시키므로 글자색을 고정한다(ticket-brief.js의 같은 방어와 한 쌍). */
.ld-search .tr-wrap .tr-top { color: #cbd5e1; }
.ld-search .tr-wrap .tr-legend { color: #94a3b8; }