/* ============================================================
   holding-watch.css — 홀딩·복행 경보창 (자족 모듈, 2026-08-31 신설)

   의존: theme.css 색 토큰(전부 폴백 있음). 호스트 마크업·클래스에 의존하지 않는다.
   ⚠ z-index는 aircraft-journey(1600)보다 위(1700)에 둔다 — 경보이므로 다른 팝업에 가리면 뜻이 없다.
   ============================================================ */

/* ── 띄우기 버튼 (모듈이 직접 만든다) ──
   ⚠ bottom을 30px로 두는 이유: 지도 오른쪽 아래에 **Leaflet 저작자 표시**(.leaflet-control-attribution)가
     깔려 있다. 그것을 가리면 타일 제공자(VWorld·OSM) 표시 의무를 덮는 셈이 된다 — 14px에서는 겹쳤다. */
.hgw-fab {
  position: fixed; right: 14px; bottom: 30px; z-index: 1701;
  /* ⚠ width:auto·margin:0 — 전역 button{width:100%;margin-top:8px} 되돌리기(.hgw-x 주석 참고).
     position:fixed에서 width:100%는 **뷰포트 폭 전체**가 되어 버튼이 화면을 가로지른다.
     이 호스트는 레일 버튼을 주므로 FAB이 안 만들어져 여태 안 드러났을 뿐이다(잠복 결함). */
  width: auto; margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font: 600 12px/1.2 inherit;
  color: var(--text-primary, #1d2939);
  background: var(--bg-surface-elevated, #fff);
  border: 1px solid var(--border-medium, #d0d5dd);
  border-radius: 999px;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.18));
  cursor: pointer;
}
.hgw-fab:hover { background: var(--bg-sunken, #f4f6f8); }
.hgw-fab.on { border-color: #c98a12; }
.hgw-fab-ico { font-size: 14px; }
.hgw-badge {
  min-width: 17px; padding: 0 5px;
  font: 700 11px/17px inherit; text-align: center;
  color: #fff; background: #e0453e; border-radius: 999px;
}
/* 새 사건 — 4초간 눈에 띄게. ⚠ 무한 반복은 하지 않는다(경보 피로) */
@keyframes hgw-alarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,69,62,.55); }
  50%      { box-shadow: 0 0 0 9px rgba(224,69,62,0); }
}
.hgw-fab.alarm { animation: hgw-alarm 1s ease-out 4; }

/* ── 창 ── */
.hgw-panel {
  /* ⭐ 기본 자리·크기 (사용자 지시 2026-09-01 「홀딩 누르면 이미지처럼 나오는 게 기본으로」) —
     오른쪽 아래 · **재생 바 위** · 목록이 여러 건 보이는 크기.
     ⚠ bottom을 120px로 올린 이유: 지도 하단 재생 바(#rcBar)가 화면 아래 약 60~110px 띠를
       차지한다(bottom: calc(--gap + 52px) + 알약 높이 ≈50px). 종전 기본값 76px은 **그 띠
       안**이라, 재생만 켜면 창이 타임라인을 덮는 자리에서 시작했다 — 사용자가 겪은 「창이
       타임라인을 가린다」의 절반은 드래그가 아니라 **이 기본값** 때문이었다.
     ⛔ 이 값을 다시 76px로 내리지 말 것. 내리면 재생 중 첫 화면부터 다시 겹친다. */
  position: fixed; right: 14px; bottom: 120px; z-index: 1700;
  width: 560px; max-width: calc(100vw - 28px);
  max-height: min(680px, calc(100vh - 190px));
  display: none; flex-direction: column; overflow: hidden;
  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));
  font: 12px/1.45 inherit; color: var(--text-primary, #1d2939);
  resize: both;
}
.hgw-panel.on { display: flex; }

.hgw-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px;
  background: var(--bg-sunken, #f4f6f8);
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  cursor: move; touch-action: none; user-select: none;
}
.hgw-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; min-width: 0; }
/* 끌기 손잡이 — 제목과 닫기(X) 사이의 «빈 칸»에 점무늬를 깔아 **잡을 수 있는 곳임을 보이게** 한다
   (사용자 지시 2026-09-01 「상단 가운데는 마우스로 드래그하여 창 이동하게」).
   ⚠ head 전체가 이미 cursor:move·드래그 대상이지만, 아무 표시가 없으면 «잡을 수 있다»는 걸
     아무도 모른다 — 실제로 사용자가 세 번 같은 요청을 했다. 무늬는 그 발견성을 위한 것이다.
   ⛔ button이 아니라 div다 — dragify()가 button만 드래그에서 빼기 때문에 button이면 안 끌린다. */
.hgw-grip {
  flex: 1 1 auto; min-width: 24px; height: 9px; align-self: center;
  cursor: move;
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: 5px 5px;
  opacity: .22;
}
.hgw-head:hover .hgw-grip { opacity: .45; }
.hgw-title-t { font-weight: 700; font-size: 13px; white-space: nowrap; }   /* ⚠ 줄바꿈 금지 — 실측에서 「홀딩·복행 (6)」/「경보」로 갈렸다 */
.hgw-title-n { color: var(--text-secondary, #667085); font-size: 11px; }
.hgw-x {
  /* ⚠⚠ width:auto·flex:none·margin 명시 **필수** — 호스트 `css/app.css`의 전역
     `button{ width:100%; margin-top:8px }` 때문이다. 이걸 되돌리지 않으면 닫기 버튼이
     **머리 폭 전체를 차지하는 투명 버튼**이 되어, 세 가지가 한꺼번에 깨진다
     (2026-09-01 근본원인 규명 — 사용자가 같은 것을 네 번 신고했다):
       ① ✕ 글자가 버튼 가운데에 놓여 «X가 오른쪽 끝이 아니라 가운데»로 보인다
       ② 제목 옆 «빈 칸»이 실은 이 버튼이라, dragify()가 button을 드래그에서 빼므로
          **가운데를 잡아도 창이 안 끌린다**
       ③ 그 빈 칸을 클릭하면 **창이 닫힌다**(닫기 버튼의 히트영역이므로)
     같은 함정을 이 저장소는 이미 겪었다 — `css/shell.css`의 `#rcBar .rcb` 주석 참고.
     ⛔ 배경이 transparent·border:0이라 **눈에 안 보인다** — 그래서 넉 달을 살아남았다. */
  width: auto; flex: 0 0 auto; margin: 0 0 0 auto;
  border: 0; background: transparent; cursor: pointer; font-size: 13px; line-height: 1;
  color: var(--text-secondary, #667085); padding: 3px 6px;
}
.hgw-x:hover { color: var(--text-primary, #1d2939); }

.hgw-bar {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.hgw-seg { display: inline-flex; border: 1px solid var(--border-medium, #d0d5dd); border-radius: 6px; overflow: hidden; }
.hgw-seg-b {
  /* ⚠ 위 .hgw-x와 같은 이유로 width:auto·margin:0 필수 — 전역 button{width:100%}가 걸리면
     세 버튼이 좁게 눌려 **「홀딩」이 「홀/딩」 두 줄로 접힌다**(모든 스크린샷에 남아 있던 증상).
     white-space:nowrap으로 한 번 더 못박는다. */
  width: auto; flex: 0 0 auto; margin: 0; white-space: nowrap;
  border: 0; background: transparent; cursor: pointer;
  padding: 3px 9px; font: 12px/1.4 inherit; color: var(--text-secondary, #667085);
}
.hgw-seg-b + .hgw-seg-b { border-left: 1px solid var(--border-subtle, #e4e7ec); }
.hgw-seg-b.on { background: var(--bg-sunken, #eef1f4); color: var(--text-primary, #1d2939); font-weight: 600; }
.hgw-chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--text-secondary, #667085); }
.hgw-chk input { margin: 0; }

/* ── 목록 ── */
.hgw-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.hgw-row {
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, #eef1f4);
  border-left: 3px solid transparent; cursor: pointer;
}
.hgw-row:hover { background: var(--bg-sunken, #f7f9fa); }
.hgw-row.ga   { border-left-color: #e0453e; }   /* 복행 — 즉시성이 있는 사건 */
.hgw-row.hold { border-left-color: #c98a12; }   /* 홀딩 — 지연 사건 */
.hgw-row-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hgw-tag {
  flex: none; padding: 1px 6px; border-radius: 4px;
  font: 700 10px/1.6 inherit; color: #fff; background: #c98a12;
}
.hgw-row.ga .hgw-tag { background: #e0453e; }
.hgw-cs { font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; }
.hgw-typ { color: var(--text-secondary, #667085); font-size: 11px; }
.hgw-lt {
  padding: 0 4px; border-radius: 3px; font-size: 10px;
  color: var(--text-secondary, #667085); background: var(--bg-sunken, #eef1f4);
}
.hgw-when { margin-left: auto; color: var(--text-secondary, #667085); font-size: 11px; white-space: nowrap; }
.hgw-row-b { margin-top: 2px; color: var(--text-primary, #344054); }
.hgw-row-o { margin-top: 2px; color: var(--text-secondary, #98a2b3); font-size: 11px; }

.hgw-empty, .hgw-warn { padding: 18px 12px; text-align: center; color: var(--text-secondary, #667085); }
.hgw-warn { color: #b42318; text-align: left; }

/* ── 바닥 (한계 문구는 여기 고정 — 지우지 말 것) ── */
.hgw-foot {
  flex: none; padding: 7px 12px;
  border-top: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-sunken, #f7f9fa);
  color: var(--text-secondary, #667085); font-size: 11px;
}
.hgw-foot-l { font-family: ui-monospace, Menlo, Consolas, monospace; }
.hgw-foot-l.bad { color: #b42318; font-weight: 700; }
.hgw-note { margin-top: 3px; color: var(--text-secondary, #98a2b3); }

/* 어두운 테마 — 토큰이 있으면 그것이 이기고, 없을 때만 이 폴백이 쓰인다 */
@media (prefers-color-scheme: dark) {
  .hgw-panel, .hgw-fab { background: var(--bg-surface-elevated, #1c2230); color: var(--text-primary, #e7ebf0); }
  .hgw-head, .hgw-foot { background: var(--bg-sunken, #161b26); }
  .hgw-row:hover { background: var(--bg-sunken, #202836); }
}

/* ── 좁은 화면 (호스트 breakpoint 760px와 같은 값) ─────────────────────────
   ⚠ 이 화면폭에서는 호스트의 «경보 팝오버(#alertPopover)·서랍·인스펙터»가 모두 **화면 아래에서
     올라오는 바텀시트**가 된다(css/shell.css §「바텀시트는 한 번에 한 장만」). 그 자리에 우리
     버튼이 그대로 있으면 시트 위에 겹쳐 떠서, 2026-08-27 사용자 신고(「겹쳐서 팝업과 섞여서
     잘 안보임」)와 같은 형태가 된다. 그래서 탭바 위로 올리고 창은 폭을 화면에 맞춘다.
   ⛔ 우리 창은 그 «한 장» 규칙에 참여하지 않는다 — 사용자 지시(2026-08-31)가 「기존 경보창과
     **다른 창**으로」이므로 서랍·경보 시트와 같은 자리를 다투게 만들지 않는다. 데스크톱에서도
     기존 경보 팝오버는 **오른쪽 위**, 이 창은 **오른쪽 아래**로 자리를 갈라 둔다. */
@media (max-width: 760px) {
  .hgw-fab { right: 10px; bottom: calc(var(--tabbar-total, 56px) + 10px); }
  .hgw-panel {
    right: 8px; left: 8px; width: auto;
    bottom: calc(var(--tabbar-total, 56px) + 52px);
    max-height: min(58vh, calc(100vh - var(--hdr-total, 52px) - var(--tabbar-total, 56px) - 70px));
    resize: none;                      /* 좁은 화면에서 손잡이가 목록 스크롤을 가로챈다 */
  }
}


/* ── 줄 안의 «보기» 버튼 (⏱ 2D · 🧊 3D) ── */
.hgw-acts { display: flex; gap: 6px; margin-top: 5px; }
.hgw-a {
  width: auto; margin: 0; flex: 0 0 auto;
  padding: 3px 8px; font: 600 11px/1.3 inherit; cursor: pointer;
  color: var(--text-secondary, #475467);
  background: var(--bg-surface-elevated, #fff);
  border: 1px solid var(--border-medium, #d0d5dd); border-radius: 5px;
}
.hgw-a:hover { color: var(--text-primary, #1d2939); background: var(--bg-sunken, #f2f4f7); }
.hgw-note-row { margin-top: 4px; font-size: 11px; color: #b54708; }

/* 호스트 레일 버튼을 진입점으로 쓸 때의 배지 자리
   (index.html 왼쪽 레일 버튼은 position:relative가 아니라 절대배치 기준이 필요하다) */
.hgw-host-btn { position: relative; }
.hgw-host-btn .hgw-badge {
  position: absolute; right: 3px; top: 3px;
  min-width: 14px; padding: 0 3px; font: 700 9px/14px inherit;
}

/* ── 3D 미니 창 — 기존 입체 화면(view3d.html)을 ?mini=1로 담는 iframe ──
   ⛔ 3D를 여기서 그리지 않는다 (사용자 지시 2026-08-31 「기존 3d모듈을 간소화해서」).
   z-index는 경보창(1700)보다 위 — 이 창은 «경보창에서 눌러 띄운 것»이라 뒤로 가면 안 된다. */
.hgw-3d {
  position: fixed; right: 14px; bottom: 92px; z-index: 1702;
  /* 기본 크기 — 사용자 지시 2026-08-31(2차) 「3D 기본 창 크기를 (스크린샷) 정도로 키우고」.
     460×340으로 시작했더니 사건을 «읽으려면» 매번 손으로 늘려야 했다(활주로·항로 이름이
     그 크기에서는 점으로 뭉개진다 — view3d.js fitAround 주석의 실측 px과 같은 이유).
     ⚠ 고정 px으로 박지 않는다 — 노트북(1366×768)에서 화면 밖으로 나간다. 뷰포트에서 여백을
       뺀 값과 둘 중 «작은 쪽»을 쓴다(resize: both이므로 사용자가 더 줄이거나 늘릴 수 있다). */
  width: min(1180px, calc(100vw - 28px));
  height: min(900px, calc(100vh - 120px));
  max-width: calc(100vw - 28px); max-height: calc(100vh - 120px);
  display: none; flex-direction: column; overflow: hidden;
  background: #101725;
  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,.34));
  resize: both;
}
.hgw-3d.on { display: flex; }
.hgw-3d-hd {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: #17202f; color: #e7ebf0;
  font: 700 11px/1.3 inherit; cursor: move; touch-action: none; user-select: none;
}
.hgw-3d-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgw-3d-b {
  width: auto; margin: 0; flex: none; padding: 2px 7px;
  font: 600 10px/1.4 inherit; cursor: pointer;
  color: #c7d0dc; background: transparent;
  border: 1px solid rgba(199,208,220,.35); border-radius: 4px;
}
.hgw-3d-b:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.hgw-3d-fr { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #101725; }

@media (max-width: 760px) {
  .hgw-3d { left: 8px; right: 8px; width: auto; height: 46vh;
            bottom: calc(var(--tabbar-total, 56px) + 96px); resize: none; }
}

/* ── 기간·날짜 (과거자료 조회) ── */
.hgw-per { display: inline-flex; align-items: center; gap: 4px; }
.hgw-sel, .hgw-date {
  width: auto; margin: 0; padding: 2px 4px;
  font: 12px/1.3 inherit; color: var(--text-primary, #1d2939);
  background: var(--bg-surface-elevated, #fff);
  border: 1px solid var(--border-medium, #d0d5dd); border-radius: 5px;
}
.hgw-date { font-size: 11px; }