/* 재생 기체 찾기 (replay-find) — 2026-09-29 신설
   두 자리: ① 오늘재생 바 안 단추(.rf-today) + body 에 띄우는 상자(.rfBox-today, 바와 같은 어두운 바탕 고정)
            ② 재생 서랍 「구간 선택」 카드 안에 펼친 상자(.rfBox-drawer, 테마 토큰을 따른다) */

/* ---------- ① 오늘재생 바 단추 ---------- */
.rf-today { display: flex; align-items: center; }
.rf-today .rfBtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px !important;
  border-radius: 16px; border: 1.5px solid var(--rt-dim, rgba(242, 243, 245, .55)) !important;
  white-space: nowrap; max-width: 150px; }
.rf-today .rfBtn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.rf-today .rfBtnTx { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rf-today .rfBtn:hover, .rf-today .rfBtn[aria-expanded="true"] { color: var(--rt-acc, #f2c230); border-color: var(--rt-acc, #f2c230) !important; }
.rf-today.tracking .rfBtn { color: #1b1c1f; background: var(--rt-acc, #f2c230) !important; border-color: var(--rt-acc, #f2c230) !important; }

/* ---------- 공통 상자 ---------- */
.rfBox { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.3; }
.rfBox[hidden], .rfWrap[hidden] { display: none; }
/* BETA 표지 (2026-09-29 운영자 지시 「beta 표시하고 관리자·피더에게만」) — 여닫기는 ReplayFind.setAllowed, 차단은 서버 */
.rfBeta { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 1; padding: 2px 5px;
  border-radius: 6px; background: #f2c230; color: #1b1c1f; vertical-align: middle; }
.rf-today .rfBtn .rfBeta { margin-left: 2px; }
.rfHead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.rfWho { margin-left: auto; font-size: 10px; font-weight: 600; opacity: .65; }
.rfBox-today .rfHead { display: none; }   /* 바 단추에 이미 BETA 가 붙어 있다 — 좁은 상자에서 한 줄 아낀다 */
.rfForm { display: flex; gap: 6px; margin: 0; }
.rfQ { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; font: inherit; font-size: 13px;
  text-transform: uppercase; letter-spacing: .02em; }
.rfQ::placeholder { text-transform: none; letter-spacing: 0; }
.rfGo { flex: 0 0 auto; width: auto !important; height: 32px; margin: 0; padding: 0 14px; border-radius: 8px; font: inherit;
  font-weight: 700; cursor: pointer; }
.rfMsg { min-height: 0; font-size: 11px; }
.rfMsg:empty { display: none; }
.rfList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.rfList:empty { display: none; }
.rfRow { display: flex; flex-direction: column; gap: 3px; width: 100% !important; margin: 0; padding: 7px 10px; text-align: left;
  border-radius: 8px; cursor: pointer; font: inherit; }
.rfL1 { display: flex; align-items: baseline; gap: 8px; }
.rfL1 b { font-size: 13px; }
.rfL1 time { font-variant-numeric: tabular-nums; }
.rfDur { margin-left: auto; font-size: 11px; opacity: .7; }
.rfL2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px; opacity: .85; }
.rfTag { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.rfTrk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; }
.rfTrk[hidden] { display: none; }
.rfTrkTx { flex: 1 1 auto; min-width: 0; }
.rfTrk button { width: auto !important; margin: 0; height: 26px; padding: 0 10px; border-radius: 13px; font: inherit; font-size: 11px;
  font-weight: 700; cursor: pointer; }

/* ---------- ① 오늘재생 상자 — 바와 같은 어두운 바탕(테마 무관, replay-today.css 머리말과 같은 이유) ---------- */
.rfBox-today { position: fixed; z-index: 1400; padding: 12px; border-radius: 12px; box-sizing: border-box; overflow: hidden;
  background: rgba(38, 40, 44, .97); color: #f2f3f5; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
/* ⚠ 전역 app.css `input[type="search"]:focus`(0,2,1)가 바탕을 밝은 테마색으로 덮는다 — 글자만 흰색으로 남아
     입력이 안 보였다(2026-09-29 운영 신고). 태그까지 붙여(0,3,1) 초점 때도 이 바탕·글자색을 지킨다. */
.rfBox-today input.rfQ, .rfBox-today input.rfQ:focus { border: 1px solid rgba(255, 255, 255, .22); background: #3a3d42;
  color: #f2f3f5; -webkit-text-fill-color: #f2f3f5; caret-color: #f2c230; box-shadow: none; }
.rfBox-today input.rfQ:focus { outline: 2px solid #f2c230; outline-offset: 0; border-color: #f2c230; }
.rfBox-today input.rfQ::placeholder { color: rgba(242, 243, 245, .5); -webkit-text-fill-color: rgba(242, 243, 245, .5); }
.rfBox-today .rfGo { border: 0; background: #f2c230; color: #1b1c1f; }
.rfBox-today .rfMsg { color: rgba(242, 243, 245, .7); }
.rfBox-today .rfMsg.warn { color: #ffb4a8; }
.rfBox-today .rfRow { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: inherit; }
.rfBox-today .rfRow:hover, .rfBox-today .rfRow:focus-visible { border-color: #f2c230; background: rgba(242, 194, 48, .1); outline: none; }
.rfBox-today .rfTag { background: rgba(255, 255, 255, .12); }
.rfBox-today .rfTag.live { background: rgba(80, 200, 120, .22); color: #8ee6a8; }
.rfBox-today .rfTrk { background: rgba(242, 194, 48, .14); border: 1px solid rgba(242, 194, 48, .45); }
.rfBox-today .rfTrk button { border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: inherit; }
.rfBox-today .rfTrk button:hover { border-color: #f2c230; color: #f2c230; }

/* ---------- ② 재생 서랍 — 테마 토큰 ---------- */
.rf-drawer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.rfBox-drawer .rfQ { border: 1px solid var(--border-medium); background: var(--bg-input); color: var(--text-primary, var(--ink)); }
.rfBox-drawer .rfGo { border: 1px solid var(--border-medium); background: var(--bg-sunken); color: var(--text-secondary, var(--ink)); }
.rfBox-drawer .rfGo:hover { background: var(--bg-hover); }
.rfBox-drawer .rfMsg { color: var(--muted); }
.rfBox-drawer .rfMsg.warn { color: var(--status-warn, var(--err)); }
.rfBox-drawer .rfList { max-height: 260px; }
.rfBox-drawer .rfRow { border: 1px solid var(--border-subtle); background: var(--bg-subtle); color: var(--text-primary, var(--ink)); }
.rfBox-drawer .rfRow:hover, .rfBox-drawer .rfRow:focus-visible { background: var(--bg-hover); border-color: var(--border-highlight); outline: none; }
.rfBox-drawer .rfTag { background: var(--chip-bg); color: var(--chip-fg); }
.rfBox-drawer .rfTag.live { background: var(--status-ok-bg, var(--chip-bg)); color: var(--status-ok, var(--live)); }
.rfBox-drawer .rfTrk { background: var(--status-warn-bg, var(--bg-subtle)); border: 1px solid var(--status-warn, var(--border-medium)); }
.rfBox-drawer .rfTrk button { border: 1px solid var(--border-medium); background: var(--bg-surface); color: var(--text-secondary, var(--ink)); }
.rfBox-drawer .rfTrk button:hover { background: var(--bg-hover); }

/* ---------- 예측 유령 (2026-09-29 · v4 「기존항공기처럼 예쁘게」) ----------
   심볼은 radar 와 같은 AcSymbols 로 캔버스에(색·테두리·그림자도 호스트 주입값 그대로), 데이터블록은 radar 의 글꼴
   ("IBM Plex Mono" 700 12px / 600 10px)·테마색(LBL_THEME light/dark)·글자 후광을 따라 한다. «예측»은 반투명·노란 점선
   경로·「예측」 칩으로만 구분한다. ⚠ 테마 표식은 <html data-theme="light|dark"> (index.html setTheme). */
.rfGhost { background: none; border: 0; }
.rfGhost canvas { display: block; transform-origin: 50% 50%; will-change: transform; }
.rfGhost .rfGhostL { position: absolute; left: 36px; top: 9px; white-space: nowrap; pointer-events: none; line-height: 1.15;
  font-family: "IBM Plex Mono", Consolas, monospace; color: #22303c;
  text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9), 0 0 3px rgba(255, 255, 255, .7); }
.rfGhost .rfGhostL b { display: block; font-weight: 700; font-size: 12px; }
.rfGhost .rfGhostL em { display: block; font-style: normal; font-weight: 600; font-size: 10px; color: #5c6b7a; }
.rfGhost .rfGhostL i { display: inline-block; font-style: normal; font-weight: 800; font-size: 9px; line-height: 1; padding: 1px 4px;
  border-radius: 5px; background: #f2c230; color: #1b1c1f; text-shadow: none; vertical-align: 1px; }
[data-theme="dark"] .rfGhost .rfGhostL { color: #f2f6fb;
  text-shadow: 0 0 2px rgba(6, 11, 20, .82), 0 0 2px rgba(6, 11, 20, .82), 0 0 3px rgba(6, 11, 20, .82); }
[data-theme="dark"] .rfGhost .rfGhostL em { color: #c9d8e8; }
.rfPred { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 8px; background: #f2c230; color: #1b1c1f; }
.rfBox-today .rfTag.part, .rfBox-drawer .rfTag.part { background: transparent; border: 1px dashed currentColor; opacity: .8; }

/* 좁은 화면 — 단추는 아이콘만(추적 중이면 노란 바탕이 그 표시다). 편명까지 두면 타임라인이 눌려
   눈금 글자가 겹친다(393px 실측) — 편명·「주변」 스위치는 상자 안 추적 줄에 있다. */
@media (max-width: 760px) {
  .rf-today .rfBtn { padding: 0 9px !important; }
  .rf-today .rfBtnTx { display: none; }
}
/* v8 — 폰에서는 바 위에 가득 편 시트 모양(자리는 place()가 잡는다). 목록만 상자 안에서 스크롤. */
.rfBox-today.narrow { border-radius: 14px; padding: 12px 12px 10px; }
.rfBox-today .rfList { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rfBox-today.narrow .rfQ { height: 40px; font-size: 16px; }   /* 16px 미만이면 iOS 가 초점 때 화면을 확대한다 */
.rfBox-today.narrow .rfGo { height: 40px; padding: 0 16px; }
.rfBox-today.narrow .rfRow { padding: 9px 12px; }