/*
 * BLOCK Air — 공항 운항정보 디스플레이(FIDS) 감성 프론트엔드 레이어.
 * air.css 다음에 로드해, 항공 계열 5개 페이지(공항/스케줄/운항관리/시뮬레이터/등록부)에
 * 공항 공식 홈페이지 + 운항정보 표시 디스플레이 느낌을 입힌다.
 * 마크업/JS는 건드리지 않고, .air-body 스코프의 토큰 재정의 + 컴포넌트 오버라이드만 사용한다.
 *
 * 색 체계는 항공 사이니지 문법을 따른다:
 *  - 인터랙션(버튼·선택)  = 항공 블루(--primary)
 *  - 데이터(시각·편명·코드) = 보드 앰버(--air-amber)
 */

.air-body {
  /* 터미널 야간 팔레트 */
  --background: #0a0e14;
  --background-subtle: #0e131b;
  --foreground: #eef2f7;

  --card: #111824;
  --card-foreground: #eef2f7;
  --surface: #172130;
  --surface-foreground: #eef2f7;

  --muted: #172130;
  --muted-foreground: #9aa7b8;

  --border: #243044;
  --border-strong: #33435a;
  --input: #2b3a50;

  --primary: #3ea3ff;
  --primary-hover: #63b6ff;
  --primary-foreground: var(--background);
  --ring: #3ea3ff;

  /* FIDS 보드 액센트 */
  --air-amber: #f5b400;
  --air-amber-strong: #ffc933;
  --air-amber-soft: rgba(245, 180, 0, 0.12);
  --air-green: #37d29b;
  --air-red: #f76c6c;
  --air-line: rgba(140, 170, 205, 0.10);
  --air-grid: rgba(130, 160, 200, 0.045);
}

/* ── 터미널 앰비언스 배경 (은은한 그리드 + 활주로 글로우) ── */

.air-body .air-page {
  background:
    radial-gradient(1100px 440px at 84% -8%, rgba(62, 163, 255, 0.10), transparent 62%),
    radial-gradient(880px 400px at 10% -4%, rgba(245, 180, 0, 0.045), transparent 60%),
    repeating-linear-gradient(0deg, var(--air-grid) 0, var(--air-grid) 1px, transparent 1px, transparent 44px),
    var(--background);
}

/* ── 헤더 정체성 (BLOCK · AIR 사이니지) ─────────── */

/*
 * Air는 페이지 테마와 관계없이 야간 FIDS 팔레트를 사용한다. 공용 헤더의
 * 테마 토큰을 그대로 상속하면 밝은 테마에서 어두운 로고·내비가 어두운
 * Air 배경 위에 놓이므로, 헤더 크롬만 Air 전경/배경 토큰에 고정한다.
 * body로 포털된 전체 서비스 메뉴는 이 범위 밖에 있어 원래 테마를 유지한다.
 */
.air-body .block-app-header {
  --block-surface-glass: color-mix(in srgb, var(--background) 78%, transparent);
  --block-surface-hover: color-mix(in srgb, var(--foreground) 15%, transparent);
  --block-header-surface-top: color-mix(in srgb, var(--background) 94%, transparent);
  --block-header-surface-bottom: color-mix(in srgb, var(--background) 82%, transparent);
  --block-border-soft: color-mix(in srgb, var(--foreground) 18%, transparent);
  --block-border-active: color-mix(in srgb, var(--foreground) 28%, transparent);
  --block-border-control: color-mix(in srgb, var(--foreground) 34%, transparent);
  --block-border-control-hover: color-mix(in srgb, var(--foreground) 42%, transparent);
  --block-text-inverse: color-mix(in srgb, var(--foreground) 92%, transparent);
  --block-text-inverse-strong: color-mix(in srgb, var(--foreground) 94%, transparent);
  --block-text-inverse-soft: color-mix(in srgb, var(--foreground) 82%, transparent);
  --block-text-inverse-muted: color-mix(in srgb, var(--foreground) 78%, transparent);
  --block-text-inverse-subtle: color-mix(in srgb, var(--foreground) 76%, transparent);
  --block-text-inverse-faint: color-mix(in srgb, var(--foreground) 70%, transparent);
  --block-text-inverse-dim: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.air-body .block-app-header .nav-logo-image--light {
  display: none;
}

.air-body .block-app-header .nav-logo-image--dark {
  display: block;
}

.air-body .block-app-header .block-app-context-link {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foreground);
}

.air-body .block-app-header .block-app-header-context {
  gap: 12px;
}

.air-body .block-app-header .logo-divider {
  height: 18px;
  background: var(--border-strong);
}

/* 컨텍스트 라벨 옆 앰버 시그널 도트 */
.air-body .block-app-header .block-app-context-link::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--air-amber);
  box-shadow: 0 0 8px rgba(245, 180, 0, 0.6);
  vertical-align: middle;
}

.air-body .block-app-header .nav-link[aria-current="page"] {
  color: var(--foreground);
}

.air-body .block-app-header .nav-link[aria-current="page"]::after,
.air-body .block-app-header .nav-link:hover::after,
.air-body .block-app-header .nav-link:focus-visible::after {
  background: var(--air-amber);
  height: 2px;
}

/* ── 페이지 마스트헤드 ─────────────────────────── */

.air-body .air-registry-head .gis-portal-enterprise-title h1 {
  position: relative;
  padding-left: 16px;
  letter-spacing: -0.01em;
}

.air-body .air-registry-head .gis-portal-enterprise-title h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--air-amber);
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(245, 180, 0, 0.4);
}

/* 요약 지표 = 운항 카운터 (모노 탭ular) */
.air-body .air-summary-grid dt {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-2xs, 0.68rem);
}

.air-body .air-summary-grid dd {
  font-family: "JetBrains Mono", "Noto Sans KR", var(--font-family);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ── 운항 보드 (스케줄 테이블) ─────────────────── */

.air-body .air-schedule-table thead th,
.air-body .air-control-table thead th,
.air-body .air-registry-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: var(--fs-2xs, 0.68rem);
  font-weight: 700;
  color: color-mix(in srgb, var(--air-amber) 62%, var(--muted-foreground));
  border-bottom: 1px solid color-mix(in srgb, var(--air-amber) 26%, var(--border));
  background: color-mix(in srgb, var(--air-amber) 5%, transparent);
}

.air-body .air-schedule-table tbody tr,
.air-body .air-control-table tbody tr,
.air-body .air-registry-table tbody tr {
  border-bottom: 1px solid var(--air-line);
}

/* 등록번호 등 코드 셀 = 앰버 모노 */
.air-body .air-registry-table tbody td:first-child .air-mark,
.air-body .air-registry-table tbody td:first-child strong {
  color: var(--air-amber-strong);
}

/* 시각 = 보드 앰버, 탭ular */
.air-body .air-time {
  font-size: 1.02rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--air-amber-strong);
}

/* 편명 = 밝은 모노 코드 */
.air-body .air-mark {
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--foreground);
}

.air-body .air-route-cell {
  letter-spacing: 0.03em;
}

/* 행 hover = 앰버 스캔 하이라이트 */
.air-body .air-flight-row:hover,
.air-body .air-flight-row:focus-visible {
  background: var(--air-amber-soft);
  box-shadow: inset 3px 0 0 var(--air-amber);
}

/* 출발/도착 배지: 출발=앰버, 도착=시안 (사이니지 관례) */
.air-body .air-direction-badge[data-direction="departure"] {
  border-color: color-mix(in srgb, var(--air-amber) 46%, var(--border));
  color: var(--air-amber-strong);
}

.air-body .air-direction-badge[data-direction="arrival"] {
  border-color: color-mix(in srgb, #38bdf8 44%, var(--border));
  color: #7dd3fc;
}

/* 방향 탭 활성 = 앰버 밑줄 강조 */
.air-body .air-direction-tab.is-active {
  color: var(--foreground);
  box-shadow: inset 0 -2px 0 var(--air-amber);
}

/* ── 공항 리스트 = 게이트/코드 사이니지 ────────── */

.air-body .air-airport-item strong {
  font-size: var(--fs-md, 0.98rem);
  letter-spacing: 0.06em;
  color: var(--air-amber-strong);
}

.air-body .air-airport-item.is-selected {
  border-color: color-mix(in srgb, var(--air-amber) 60%, var(--border));
  background: var(--air-amber-soft);
  box-shadow: inset 3px 0 0 var(--air-amber);
}

.air-body .air-airport-item:hover {
  border-color: color-mix(in srgb, var(--air-amber) 40%, var(--border));
}

/* ── 상세 패널 코드 ───────────────────────────── */

.air-body .air-detail-mark {
  letter-spacing: 0.03em;
  color: var(--air-amber-strong);
}

/* ── KPI (운항관리/시뮬레이터) ────────────────── */

.air-body .air-kpi-item strong {
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

/* ── 상세 카드 sticky 오프셋 (헤더 60px 대응 여유) ── */

.air-body .air-detail-card {
  top: 78px;
}