/* ================================================================
   오늘의 항공뉴스 (features/aviation-news) — 지도 오른쪽 위 런처 + 팝업. **관리자 전용**.
   ----------------------------------------------------------------
   사용자 지시(2026-09-17): 「지도페이지에 오늘의 항공뉴스를 … 지도에 팝업으로 보이고
   관리자만 보이게. 일반사용자는 안보이게」.

   ⚠ 오른쪽 위는 이미 여럿이 쓰는 자리다. **기존 회피 규약을 그대로 잇는다**
     (⛔ 새 규약을 만들지 않는다 — replay-alert.css 머리말의 그 이유 그대로):
       · 런처 #avnBtn — 우상단 **둘째 슬롯**. 첫 슬롯은 「레이어」 버튼(.mlp-btn)이 쓰고,
         둘째 슬롯은 #mapCfg가 쓰던 자리인데 운영 화면에서는 html.has-map-layers가 붙어
         #bgSwitch·#mapCfg가 display:none이다(shell.css) — 그래서 **실제로 비어 있다**.
         세로 계산식(--bgsw-h + 8px)을 새로 만들지 않고 #mapCfg의 것을 그대로 쓴다.
       · 팝업 #avnPop — 인스펙터(#acDetail)·지도 레이어(#mlPanel)와 **같은 칸·같은 z(1260)**.
         셋은 서로 배타라(모듈이 서로 닫는다) 겹칠 조합이 없다. 네 번째 회피 축을 만들지 않고
         그 무리의 식구가 되는 것이 요점이다.
       · 인스펙터가 열리면 둘 다 그만큼 왼쪽으로 물러난다 — #bgSwitch·.mlp-btn과 **같은 식**.
   ⛔ #rpAlert(재생 경보, z 1270) 위로 올라가지 않는다. 재생 중에는 모듈이 런처까지 숨긴다.
   ⛔ 빨강(--status-danger)을 쓰지 않는다 — 그 색은 실시간 안전경보가 독점한다(2026-09-04 확정).
      뉴스 「중요」는 주황이고, 색만으로 알리지 않는다(title·구획 머리가 글로 말한다).
   ⚠ 전역 button{width:100%}가 있다 — 이 모듈이 만든 버튼은 전부 width:auto를 명시한다
      (홀딩·요청사항·하강리포트에서 반복된 사고).
   ================================================================ */
:root { --avn-w: 340px; }

/* ── 런처 — #mapCfg가 비운 둘째 슬롯 ──────────────────────────────────────────
   ⭐ 2026-09-19 사용자 신고(모바일) 「두개 아이콘이 겹쳐져서 잘 안보임」 → **`.mlp-btn`(레이어)과
     같은 값·같은 규칙**으로 맞췄다. 좌표상 겹치지는 않았지만, 바로 위 버튼은 «아이콘+글자 알약»인데
     이것만 «작은 아이콘»이어서 한 짝으로 읽히지 않고 약하게 보였다.
     ⛔ 새 생김새를 만들지 않는다 — 우상단에 다른 모양이 둘이면 «다른 화면»으로 읽힌다.
   ⚠ 세로 간격을 8px → **12px**로 넓혔다(위 버튼 바닥과의 거리). 넓은 화면·좁은 화면 모두 12px다. */
.avn-btn {
  position: fixed; z-index: 1200;
  top: calc(var(--hdr-total, 68px) + var(--gap, 14px) + var(--bgsw-h, 32px) + 12px);
  right: calc(var(--gap, 14px) + var(--sa-r, 0px));
  width: auto; height: 32px; margin: 0; padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-surface-float, #fff); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-medium, #cbd5e1); border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 4px 16px -2px rgba(15,23,42,.08));
  font-family: inherit; font-size: var(--fs-md, 12px); font-weight: 700; cursor: pointer;
  transition: right var(--transition-smooth, .25s), border-color var(--transition-fast, .15s);
}
.avn-btn[hidden] { display: none !important; }
.avn-btn svg { width: 16px; height: 16px; flex: none; color: var(--accent-cyan, #0284c7); }
.avn-btn:hover { border-color: var(--accent-cyan, #0284c7); }
.avn-btn.on { background: var(--accent-cyan, #0284c7); color: var(--text-inverse, #fff); border-color: var(--accent-cyan, #0284c7); }
.avn-btn.on svg { color: currentColor; }
.avn-btn:focus-visible { outline: 2px solid var(--accent-cyan, #0284c7); outline-offset: 2px; }
/* 못 본 건수 — **모서리 배지**. 글자 옆에 두면 좁은 화면(아이콘만)에서 자리를 다툰다.
   ⚠ 「중요」가 남아 있으면 주황으로 바뀐다. ⛔ 색만으로 알리지 않는다 — 버튼 설명(title)이
     「중요 N건」을 글로 말하고, 팝업 안에도 「중요」 구획 머리가 있다. */
.avn-btn .avn-b-n {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--text-tertiary, #64748b); color: var(--text-inverse, #fff);
  font-size: var(--fs-xs, 10px); font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg-surface-float, #fff);
}
.avn-btn.major .avn-b-n { background: var(--status-warn, #d97706); }
.avn-btn .avn-b-n:empty { display: none; }
/* 기체 상세가 열리면 그 폭만큼 비켜선다 — shell.css body.inspector-open #mapCfg와 같은 값·같은 식 */
body.inspector-open .avn-btn { right: calc(var(--insp-w, 430px) + var(--gap, 14px) * 2 + var(--sa-r, 0px)); }

/* ── 팝업 — 인스펙터·지도 레이어와 같은 칸(서로 배타) ── */
.avn {
  position: fixed; z-index: 1260;
  top: calc(var(--hdr-total, 68px) + var(--gap, 14px));
  right: calc(var(--gap, 14px) + var(--sa-r, 0px));
  width: var(--avn-w);
  max-height: calc(100% - var(--hdr-total, 68px) - var(--gap, 14px) * 2 - 20px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-surface-elevated, #fff); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-medium, #cbd5e1); border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 12px 32px -4px rgba(15,23,42,.14));
  font-family: inherit;
  transition: right var(--transition-smooth, .25s);
}
.avn[hidden] { display: none !important; }
body.inspector-open .avn { right: calc(var(--insp-w, 430px) + var(--gap, 14px) * 2 + var(--sa-r, 0px)); }
/* ⚠ 전역 button{width:100%} 되돌림 — 이 패널 안의 모든 버튼에 한 번, 아래에서 개별로 한 번 더 */
.avn button { width: auto; margin: 0; box-shadow: none; font-family: inherit; }

.avn-hd {
  flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px;
  background: var(--bg-sunken, #f8fafc); border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  font-size: var(--fs-lg, 13px); font-weight: 700; color: var(--text-secondary, #475569);
}
/* 「관리자 전용」 표지 (2026-09-19) — ⛔ 설정이 아니라 사실의 표시다. 끄는 길을 만들지 않는다.
   ⚠ 경보 색(--status-danger)도, 「중요」의 주황(--status-warn)도 쓰지 않는다 — 이것은 위험도가
     아니라 «누가 보는 화면인가»라서, 두 색과 섞이면 등급으로 읽힌다. 중립 회색 알약으로 둔다. */
.avn-only {
  flex: none; padding: 1px 7px; border-radius: 9px;
  background: var(--bg-sunken, #f1f5f9); color: var(--text-tertiary, #64748b);
  border: 1px solid var(--border-subtle, #e2e8f0);
  font-size: var(--fs-xs, 10px); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.avn-hd .avn-n { font-size: var(--fs-sm, 11px); font-weight: 600; color: var(--text-tertiary, #64748b); font-variant-numeric: tabular-nums; }
.avn .avn-x {
  width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; background: none;
  color: var(--text-tertiary, #64748b); display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-sm, 6px);
}
.avn .avn-x:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #0f172a); }

.avn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.avn-sec[hidden] { display: none !important; }
.avn-phd {
  display: flex; align-items: center; gap: 6px; padding: 2px 2px 6px;
  font-size: var(--fs-xs, 10px); font-weight: 700; color: var(--text-secondary, #475569);
}
.avn-phd::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan, #0284c7); }
.avn-sec[data-sec="major"] .avn-phd::before { background: var(--status-warn, #d97706); }
.avn .avn-more {
  width: auto; margin: 4px 0 6px; padding: 0; border: 0; background: none;
  color: var(--text-tertiary, #64748b); font-size: var(--fs-xs, 10px); text-decoration: underline; cursor: pointer;
}
.avn .avn-more:hover { color: var(--text-primary, #0f172a); }

/* ── 카드 — #rpAlert .rpa-card와 같은 어휘(왼쪽 띠 3px) ── */
.avn-card {
  display: block; margin: 0 0 6px; padding: 7px 9px; text-decoration: none; color: inherit;
  background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle, #e2e8f0);
  border-left: 3px solid var(--border-medium, #cbd5e1); border-radius: var(--radius-sm, 6px);
}
.avn-card:hover { background: var(--bg-hover, #f1f5f9); border-color: var(--border-medium, #cbd5e1); }
.avn-card:focus-visible { outline: 2px solid var(--accent-cyan, #0284c7); outline-offset: 1px; }
.avn-card.lv-major { border-left-color: var(--status-warn, #d97706); }
.avn-card.lv-noise { opacity: .72; }
/* excerpt가 있는 카드는 바깥이 div다 — 안쪽 <a>(.avn-rowlink)가 기존 .avn-card의 글자 레이아웃을 그대로 쓴다 */
.avn-rowlink { display: block; text-decoration: none; color: inherit; }
.avn-rowlink:focus-visible { outline: 2px solid var(--accent-cyan, #0284c7); outline-offset: 1px; }
.avn .avn-more.avn-xc { display: block; margin: 6px 0 0; font-size: var(--fs-xs, 10px); }
.avn-excerpt {
  margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border-subtle, #e2e8f0);
  font-size: var(--fs-xs, 10px); line-height: 1.5; color: var(--text-secondary, #475569);
  overflow-wrap: anywhere;
}
.avn-r1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs, 10px); color: var(--text-secondary, #475569); }
.avn-cat { flex: none; padding: 1px 6px; border-radius: 9px; background: var(--bg-sunken, #f1f5f9); font-weight: 700; }
.avn-card.lv-major .avn-cat { background: var(--status-warn-bg, #fffbeb); color: var(--status-warn, #d97706); }
.avn-src { flex: none; font-weight: 700; color: var(--text-tertiary, #64748b); }
.avn-dup { flex: none; padding: 0 5px; border-radius: 9px; background: var(--bg-sunken, #f1f5f9); color: var(--text-tertiary, #64748b); }
.avn-t { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: var(--text-tertiary, #64748b); }
/* 원문 제목은 영어가 길게 이어질 수 있다 — 넘치지 않게 끊되 **글자를 자르지는 않는다** */
.avn-ttl { display: block; margin-top: 3px; font-size: var(--fs-sm, 11px); line-height: 1.45;
  color: var(--text-primary, #0f172a); overflow-wrap: anywhere; }

.avn-ft {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-top: 1px solid var(--border-subtle, #e2e8f0); background: var(--bg-surface, #fff);
  font-size: var(--fs-xs, 10px); color: var(--text-secondary, #475569);
}
/* ⛔ 출처 안내 문구는 «설정»이 아니다 — 끄는 길을 만들지 않는다(이용허락의 조건) */
.avn-ft .avn-note { flex: 1 1 auto; min-width: 0; }
.avn .avn-mute {
  width: auto; flex: none; padding: 0; border: 0; background: none;
  color: var(--text-tertiary, #64748b); text-decoration: underline; cursor: pointer; font: inherit;
}
.avn .avn-mute:hover { color: var(--text-primary, #0f172a); }
.avn-fallback { padding: 10px; color: var(--text-secondary, #475569); font-size: var(--fs-sm, 11px); }

/* ── 좁은 화면(≤760px) — 바텀시트. .mlp의 좁은 화면 값과 같은 식 ──
   ⚠ index.html SHEET_DEF에 news 항목이 등록돼 있어야 «한 번에 한 장»이 적용된다.
      등록을 빼면 서랍·인스펙터·경보·레이어와 네 장이 겹친다(2026-08-27 사용자 신고의 재현). */
@media (max-width: 760px) {
  /* ⚠ 「레이어」(.mlp-btn)와 **같은 규칙**이다 — 글자를 숨기고 40×40 아이콘만, svg 19px.
     세로 자리: 레이어 버튼 바닥(hdr + gap + 40)에서 12px 아래 = hdr + gap + 52.
     ⭐ 2026-09-19 (v4) 사용자 재신고 「모바일은 뉴스와 레이어가 겹침」 — 폰에서는 헤더 아래 BETA 띠만큼
       #mlpBtn을 `translate: 0 var(--bn-h)`로 내린다(shell.css 760px 규칙). 이 버튼만 안 내려가서 간격이
       52 − 34 = 18px이 되어 40px 버튼끼리 22px 겹쳤다. **같은 값만큼 같이 내린다**.
       공지를 모두 끄면(html.bn-off) --bn-h가 0px이 되어 둘 다 제자리다 — 따로 되돌릴 규칙이 필요 없다. */
  .avn-btn {
    top: calc(var(--hdr-total, 48px) + var(--gap, 10px) + 52px);
    translate: 0 var(--bn-h, 0px);
    width: 40px; min-width: 40px; height: 40px; padding: 0; justify-content: center;
  }
  .avn-btn .avn-b-t { display: none; }
  .avn-btn svg { width: 19px; height: 19px; }
  /* 좁은 화면의 기체 상세는 시트라 옆으로 비킬 필요가 없다(shell.css와 같은 근거) */
  body.inspector-open .avn-btn { right: calc(var(--gap, 10px) + var(--sa-r, 0px)); }
  .avn {
    left: 0; right: 0; top: auto; bottom: var(--tabbar-total, 0px); width: auto;
    height: calc((100% - var(--hdr-total, 48px) - var(--tabbar-total, 0px) - 8px) * .62);
    max-height: calc(100% - var(--hdr-total, 48px) - var(--tabbar-total, 0px));
    border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0; z-index: 1265;
  }
  body.inspector-open .avn { right: 0; }
}
/* 폰을 눕히면 폭이 761px 이상이라 넓은 화면 규칙을 탄다 — 높이만 조인다 */
@media (max-height: 480px) and (min-width: 761px) {
  .avn { width: 300px; max-height: calc(100% - var(--hdr-total, 68px) - var(--gap, 14px) * 2); }
}
@media (prefers-reduced-motion: reduce) {
  .avn, .avn-btn { transition: none; }
}