/* 항공로 연직 단면 · 난류 (features/wx-xsect) v1 (2026-10-01, 수정/144)
   색은 앱 토큰을 따른다(밝게·어둡게 공용). 칸 색(난류 지수)은 wx-xsect.js STOPS가 정본. */
.wxs { margin: 2px 0 6px 10px; padding: 7px 9px 8px; border: 1px solid var(--border-subtle, #e2e8f0);
  border-left: 4px solid var(--accent-cyan, #0284c7); border-radius: 8px; background: var(--bg-surface, #fff); }
.wxs-hd { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary, #475569); }
.wxs-hd b { color: var(--text-primary, #0f172a); font-size: 12.5px; }
.wxs-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--bg-sunken, #f1f5f9);
  color: var(--text-secondary, #475569); border: 1px solid var(--border-subtle, #e2e8f0); }
.wxs-src { margin-left: auto; font-size: 11px; color: var(--text-muted, #64748b); }
.wxs-none { font-size: 12px; color: var(--text-muted, #64748b); padding: 10px 2px; }
.wxs-sum { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.wxs-pill { font-size: 11.5px; padding: 3px 8px; border-radius: 8px; border: 1px solid transparent; }
.wxs-pill i { font-style: normal; opacity: .75; }
.wxs-pill.g0 { background: var(--status-live-bg, #ecfdf5); color: var(--status-live, #047857); }
.wxs-pill.g1 { background: var(--status-live-bg, #f0fdf4); color: var(--status-live, #166534); border-color: rgba(22,163,74,.3); }
.wxs-pill.g2 { background: var(--status-warn-bg, #fff7ed); color: var(--status-warn, #9a3412); border-color: rgba(234,88,12,.3); }
.wxs-pill.g3 { background: var(--status-danger-bg, #fef2f2); color: var(--status-danger, #991b1b); border-color: rgba(220,38,38,.3); }
.wxs-cv { position: relative; }
.wxs-cv canvas { width: 100%; display: block; }
.wxs-tip { position: absolute; display: none; pointer-events: none; z-index: 5; background: #0f172a; color: #fff;
  font-size: 11px; line-height: 1.45; padding: 5px 7px; border-radius: 6px; white-space: nowrap; }
.wxs-tip i { font-style: normal; color: #fbbf24; }
.wxs-leg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted, #64748b); margin-top: 4px; }
.wxs-bar { display: inline-flex; height: 9px; width: 150px; border-radius: 3px; overflow: hidden; border: 1px solid var(--border-subtle, #e2e8f0); }
.wxs-bar i { flex: 1; }
.wxs-dot { display: inline-block; width: 8px; height: 8px; margin-right: 3px; vertical-align: 0;
  background: radial-gradient(circle, #7c3aed 32%, transparent 36%); background-size: 4px 4px; }
.wxs-low { display: inline-block; width: 14px; margin-right: 3px; vertical-align: 3px; border-top: 2px dashed #0b7fc7; }
.wxs-gnd { display: inline-block; width: 12px; height: 8px; margin-right: 3px; vertical-align: 0; background: rgba(120,98,72,.85); border-radius: 2px; }
.wxs-warn { color: var(--status-warn, #b45309); }
.wxs-note { font-size: 10.5px; color: var(--text-muted, #64748b); margin-top: 3px; line-height: 1.5; }
/* v2 (2026-10-02, 수정/147): 이용 항적 범례 — 단면 위 기체와 같은 실루엣(버티컬 항로 아이콘, 파랑 = --va-ex1) */
.wxs-ac { width: 22px; height: 11px; margin-right: 3px; vertical-align: -1px; fill: #2a78d6; }   /* v4 (수정/149): 옆모습 실루엣 비율 28×14 */
[data-theme="dark"] .wxs-ac { fill: #3987e5; }