/* ============================================================
   aircraft-journey.css — 항공기 일일 여정 스타일 (자족 모듈)
   PRD: docs/PRD-항공기일일여정.md

   의존: theme.css 색 토큰(폴백 있음) · Leaflet.
   지도는 호스트 지도에 얹으므로 이 모듈은 «떠 있는 팝업»만 소유한다.
   ============================================================ */

/* ── 팝업 셸 (모듈이 직접 만든다 — 호스트 CSS 클래스에 의존하지 않음) ── */
.journey-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 100px);
  min-width: 380px;
  min-height: 320px;
  z-index: 1600;
  display: none;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  background: var(--bg-surface-elevated, #fff);
  border: 1px solid var(--border-medium, #d0d5dd);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.28));
}
.journey-panel.on { display: flex; }

.journey-panel-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  background: var(--bg-sunken, #f4f6f8);
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  cursor: move;
  touch-action: none;
  user-select: none;
}
.journey-panel-title {
  font-size: var(--fs-lg, 15px); font-weight: 700; color: var(--text-primary, #1a1f2b);
}
.journey-panel-close {
  width: 30px; height: 30px; flex: none; margin: 0; padding: 0;
  background: none; border: 1px solid var(--border-subtle, #e4e7ec); border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary, #5c6b7a); font-size: var(--fs-md, 13px); font-weight: 700; line-height: 1;
  cursor: pointer;
}
.journey-panel-close:hover { background: var(--bg-hover, #eef1f4); color: var(--status-danger, #c2261f); }

.journey-panel-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}

body.journey-dragging { -webkit-user-select: none; user-select: none; }

/* 모바일 — 하단 고정 시트 (드래그·리사이즈 없음) */
@media (max-width: 760px) {
  .journey-panel {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-width: none; min-width: 0;
    transform: none; resize: none;
    max-height: 78vh;
    border-radius: var(--radius-lg, 12px);
  }
}

/* ── 검색 폼 ── */
.journey-search {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.journey-search input[type="text"] {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 6px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-md);
  font-family: var(--font-mono);
  color: var(--ink);
}

.journey-search input[type="date"] {
  width: 130px;
  padding: 6px 8px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.journey-search input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--bg-surface-elevated);
}

.journey-search button {
  padding: 6px 14px;
  margin: 0;
  width: auto;
  background: var(--blue);
  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.journey-search button:hover {
  opacity: 0.9;
}

.journey-nav-btn {
  padding: 5px 10px;
  margin: 0;
  width: auto;
  background: var(--bg-surface-elevated);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.journey-nav-btn:hover {
  background: var(--bg-hover);
}

/* ── 컨테이너 ── */
#journey-container {
  padding: 12px;
  font-size: var(--fs-md);
}

/* ── 로딩 / 에러 ── */
.journey-loading,
.journey-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  font-size: var(--fs-lg);
  color: var(--muted);
}

.journey-error {
  color: var(--err);
}

/* ── 헤더 ── */
.journey-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.journey-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journey-icon {
  font-size: var(--fs-hero);
}

.journey-reg {
  font-size: var(--fs-hero);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink);
}

.journey-type {
  font-size: var(--fs-md);
  color: var(--muted);
}

.journey-date {
  font-size: var(--fs-md);
  font-family: var(--font-mono);
  color: var(--blue);
  margin-left: 8px;
}

.journey-operator {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ── 오늘 운항 목록 (편별 선택 재생) ── */
.journey-segments {
  margin: 4px 0 12px;
}

.journey-seg-title {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.journey-seg-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journey-seg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--fs-sm);
  transition: background 0.12s, border-color 0.12s;
}

.journey-seg:hover {
  background: var(--bg-hover);
  border-color: var(--blue);
}

.journey-seg.on {
  border-color: var(--blue);
  background: var(--accent-teal-soft, rgba(33, 150, 243, 0.12));
}

.journey-seg .seg-idx {
  flex: none;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
  border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
}

.journey-seg .seg-play {
  flex: none;
  color: var(--blue);
  font-size: var(--fs-md);
}

.journey-seg .seg-cs {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

.journey-seg .seg-route {
  color: var(--ink);
  white-space: nowrap;
}

/* 운항 중 표시 — 예정 도착지 옆 작은 라이브 배지 */
.journey-seg .seg-live {
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--status-live, #2e7d32);
  background: color-mix(in srgb, var(--status-live, #2e7d32) 14%, transparent);
}

.journey-seg .seg-time {
  font-family: var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

.journey-seg .seg-dur {
  font-family: var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}

.journey-seg .seg-nm {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.journey-seg.seg-all {
  font-weight: 700;
}

.journey-seg.seg-all .seg-route {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-mono);
}

.journey-seg-empty {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 8px 4px;
}

/* 좁은 팝업에서 편 행이 넘치면 줄바꿈 허용 */
@media (max-width: 520px) {
  .journey-seg { flex-wrap: wrap; }
  .journey-seg .seg-time { margin-left: 0; }
}

/* ── 요약 ── */
.journey-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: 8px;
  margin-bottom: 12px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary-value {
  font-size: var(--fs-lg);
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--ink);
}

.summary-value.realtime-badge {
  color: var(--status-live, #2e7d32);
}

.summary-item-wide {
  flex-basis: 100%;
}

.summary-item-wide .summary-value {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  word-break: break-word;
}

/* ── 타임라인 ── */
.journey-timeline {
  margin-bottom: 14px;
  padding: 10px 0;
  overflow-x: auto;
}

.timeline-track {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: max-content;
}

.timeline-leg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.timeline-leg:hover {
  background: var(--bg-hover);
  border-color: var(--blue);
}

.timeline-leg.inferred {
  border-style: dashed;
  border-color: var(--status-warn);
}

.timeline-point {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink);
  padding: 2px 5px;
  background: var(--bg-sunken);
  border-radius: 4px;
}

.timeline-point.start {
  color: var(--status-live);
}

.timeline-point.end {
  color: var(--status-danger);
}

.timeline-line {
  width: 24px;
  height: 2px;
  background: var(--blue);
}

.timeline-line.inferred {
  background: repeating-linear-gradient(
    90deg,
    var(--status-warn) 0,
    var(--status-warn) 4px,
    transparent 4px,
    transparent 8px
  );
}

.timeline-callsign {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--muted);
  margin-left: 4px;
}

.timeline-empty {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 10px;
}

/* ── 레그 테이블 ── */
.journey-legs-table {
  margin-bottom: 14px;
  overflow-x: auto;
}

.journey-legs-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.journey-legs-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-sunken);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.journey-legs-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.journey-legs-table tr:hover {
  background: var(--bg-hover);
}

.journey-legs-table tr.inferred {
  background: var(--status-warn-bg);
}

.journey-legs-table tr.inferred:hover {
  background: rgba(217, 119, 6, 0.18);
}

.journey-legs-table tr.highlighted {
  background: var(--accent-teal-soft);
  outline: 2px solid var(--accent-teal);
  outline-offset: -1px;
}

.legs-empty {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 16px;
  text-align: center;
}

/* 레그 셀 스타일 */
.leg-route {
  display: flex;
  align-items: center;
  gap: 4px;
}

.leg-dep,
.leg-des {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}

.leg-arrow {
  color: var(--muted);
}

.leg-names {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
}

.leg-callsign {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--blue);
  margin-top: 2px;
}

.leg-times {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.leg-duration {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.leg-distance {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.leg-fir {
  font-size: var(--fs-xs);
  color: var(--status-live);
}

.leg-sidstar {
  font-size: var(--fs-xs);
  color: var(--accent-indigo);
}

.leg-notes {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ── 재생 기체 아이콘 (호스트 지도의 divIcon) — 붐비는 항적 위에서도 크고 눈에 띄게 ── */
.journey-plane-icon {
  background: none;
  border: none;
}

.journey-plane-icon .jr-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  color: #e53935;   /* 인라인으로 실측/예측 색이 덮어씀 — 링 펄스가 currentColor를 쓴다 */
}

/* 고정 강조 링 (회전 안 함) */
.journey-plane-icon .jr-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  animation: jrPulse 1.7s ease-out infinite;
}

/* 기체 실루엣만 회전 */
.journey-plane-icon .jr-plane {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

@keyframes jrPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent), 0 0 0 2px rgba(255,255,255,0.85); }
  70%  { box-shadow: 0 0 0 12px color-mix(in srgb, currentColor 0%, transparent), 0 0 0 2px rgba(255,255,255,0.85); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent), 0 0 0 2px rgba(255,255,255,0.85); }
}

/* ── 다른 항적 숨기기 토글 ── */
.journey-traffic-toggle {
  margin: 8px 0 4px;
}

.journey-traffic-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink);
  user-select: none;
}

.journey-traffic-toggle input {
  margin: 0;
  flex: none;
  cursor: pointer;
  accent-color: var(--blue);
}

.journey-traffic-toggle .tt-sub {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* ── 지도 안내 + 범례 (지도는 이제 호스트 메인 지도) ── */
.journey-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.map-hint b { color: var(--ink); font-weight: 700; }

.map-legend {
  display: flex;
  gap: 14px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.legend-item.solid::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 3px;
  background: #2196F3;
  margin-right: 6px;
  vertical-align: middle;
}

.legend-item.inferred::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #FF9800 0,
    #FF9800 3px,
    transparent 3px,
    transparent 6px
  );
  margin-right: 6px;
  vertical-align: middle;
}

/* ── 재생 컨트롤 ── */
.journey-replay-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.replay-btn {
  flex: none;   /* 슬라이더(flex:1)·드롭다운 옆에서 줄어들어 "⏸"/"정지"가 두 줄로 접히는 것 방지 */
  padding: 6px 14px;
  margin: 0;
  width: auto;
  min-width: 88px;
  white-space: nowrap;
  text-align: center;
  background: var(--blue);
  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.replay-btn:hover {
  opacity: 0.9;
}

.replay-speed {
  padding: 4px 8px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--ink);
}

.replay-time {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  min-width: 50px;
}

.replay-slider {
  flex: 1;
  height: 6px;
  accent-color: var(--blue);
}

.replay-follow-btn {
  padding: 6px 12px;
  margin: 0;
  width: auto;
  background: var(--bg-sunken);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
}

.replay-follow-btn.active {
  background: var(--blue);
  color: var(--text-inverse);
  border-color: var(--blue);
}

.replay-follow-btn:hover {
  opacity: 0.9;
}

/* ── 고도/속도 그래프 ── */
.journey-altitude-area {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.altitude-readout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}

.alt-label {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.alt-value {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-right: 12px;
}

.altitude-chart {
  width: 100%;
  height: 70px;
  display: block;
  cursor: pointer;
  touch-action: none;   /* 끌어서 시점 이동할 때 브라우저 스크롤에 뺏기지 않게 */
}

.chart-hint {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ── 반응형 ── */
@media (max-width: 600px) {
  .journey-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .journey-summary {
    gap: 12px;
  }

  .summary-item {
    flex: 1 1 80px;
  }

  .journey-legs-table th,
  .journey-legs-table td {
    padding: 6px 8px;
  }

  .journey-replay-controls {
    flex-wrap: wrap;
  }

  .replay-slider {
    flex: 1 0 100%;
    order: 10;
    margin-top: 6px;
  }
}

/* ── 다크 모드 보정 ── */
[data-theme="dark"] .timeline-point {
  background: var(--bg-hover);
}

/* ============================================================
   일자별 기체 목록 (2026-08-30 — 과거 날짜 항공사별 선택·재생)
   목록 높이는 작게 + 스크롤 (사용자 지시). 해외 등록은 접힌 그룹.
   ============================================================ */
.journey-daylist{margin-top:8px;font-size:var(--fs-sm,12.5px)}
.journey-daylist-head{color:var(--text-secondary,#667085);margin:2px 2px 6px;font-size:var(--fs-xs,11.5px)}
.journey-daylist-scroll{max-height:230px;overflow-y:auto;border:1px solid var(--border-subtle,#e4e7ec);border-radius:var(--radius-sm,8px);padding:2px;background:var(--bg-surface,#fff)}
.journey-daygrp+.journey-daygrp{border-top:1px solid var(--border-subtle,#eef0f4)}
.journey-daygrp-head{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;border:0;padding:6px 8px;cursor:pointer;color:var(--text-primary,#1d2939);font:inherit}
.journey-daygrp-head:hover{background:var(--bg-hover,#f4f6f8)}
.journey-daygrp-head .tri{width:1em;color:var(--muted,#98a2b3)}
.journey-daygrp-head .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journey-daygrp-head .cnt{margin-left:auto;color:var(--muted,#98a2b3);font-family:var(--font-mono,Consolas,monospace)}
.journey-daygrp-body{max-height:180px;overflow-y:auto;padding:0 4px 4px}
.journey-dayrow{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:4px 8px;cursor:pointer;font:inherit;color:var(--text-primary,#1d2939)}
.journey-dayrow:hover{background:var(--bg-hover,#eef4ff)}
.journey-dayrow b{font-family:var(--font-mono,Consolas,monospace);font-weight:600}
.journey-dayrow .typ{color:var(--accent-indigo,#4f46e5);font-size:var(--fs-xs,11px)}
.journey-dayrow .cs{color:var(--muted,#98a2b3);font-size:var(--fs-xs,11px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journey-daylist-empty{color:var(--muted,#98a2b3);padding:10px 4px}
/* 해외 등록 그룹 — 국내 스크롤 상자 밖에 별도 상자, 기본 접힘 */
.journey-daylist>.journey-daygrp{border:1px solid var(--border-subtle,#e4e7ec);border-radius:var(--radius-sm,8px);margin-top:6px;background:var(--bg-surface,#fff)}

/* 위험기상(SIGMET) 열 — 레그별 지연확장 (2026-08-30) */
.journey-legs-table .wx-toggle{font:inherit;font-size:var(--fs-xs,11px);padding:2px 7px;border:1px solid var(--border-subtle,#e4e7ec);border-radius:var(--radius-sm,6px);background:var(--bg-surface,#fff);color:var(--text-primary,#1d2939);cursor:pointer;white-space:nowrap}
.journey-legs-table .wx-toggle:hover{background:var(--bg-hover,#eef4ff)}
.journey-legs-table .wx-row>td{padding:6px 8px;background:var(--bg-subtle,#f9fafb)}
table.jrn-wx{width:100%;border-collapse:collapse;font-size:var(--fs-xs,11px)}
table.jrn-wx th{text-align:left;color:var(--muted,#98a2b3);font-weight:600;padding:2px 6px}
table.jrn-wx td{padding:2px 6px;border-top:1px solid var(--border-subtle,#e4e7ec)}
table.jrn-wx .jrn-wx-q{color:var(--muted,#98a2b3);font-weight:400}
table.jrn-wx tr.jrn-wx-raw>td{border-top:0;padding-top:0}
table.jrn-wx tr.jrn-wx-raw summary{cursor:pointer;color:var(--muted,#98a2b3)}
table.jrn-wx tr.jrn-wx-raw pre{margin:3px 0 0;white-space:pre-wrap;font-family:var(--font-mono,Consolas,monospace);font-size:10px;color:var(--text-secondary,#475569);max-height:90px;overflow:auto}