/* 오늘재생 (replay-today) — FR24 Playback 모양의 지도 아래 바 (2026-09-19 신설)
   ⚠ 자리는 #rcBar(shell.css)의 것을 그대로 쓴다 — 서랍·인스펙터·경보 팝오버를 피하는 규칙이 이미 거기 있다.
     body.rt-on 동안: #rcBar를 보이고(불러오는 중에도), 기존 알약(.rcbPill)을 감추고, 이 패널을 보인다.
   ⚠ 색은 테마와 무관하게 어두운 바 + 노란 강조로 고정한다(FR24와 같다 — 위성·밝은 지도 모두 위에서 읽힌다).
     토큰을 이 모듈 안(.rtPanel)에 두어 다른 화면에 새지 않게 한다. */
.rtPanel { display: none; }
body.rt-on #rcBar { display: flex; }
body.rt-on #rcBar > .rcbPill { display: none; }
body.rt-on #rcBar > .rtPanel { display: flex; }

.rtPanel {
  --rt-bg: rgba(38, 40, 44, .94);
  --rt-line: rgba(255, 255, 255, .12);
  --rt-text: #f2f3f5;
  --rt-dim: rgba(242, 243, 245, .55);
  --rt-acc: #f2c230;
  --rt-rail: rgba(255, 255, 255, .28);
  align-items: stretch; width: 100%; max-width: 1180px;
  background: var(--rt-bg); color: var(--rt-text);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  font-size: 12px; line-height: 1.2; user-select: none; -webkit-user-select: none;
  pointer-events: auto; overflow: hidden;
}
.rtPanel svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.rtPanel button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit;
  width: auto; min-width: 0; }
.rtPanel button:focus-visible, .rtTrack:focus-visible, .rtRange:focus-visible { outline: 2px solid var(--rt-acc); outline-offset: 2px; }

.rtSec { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 16px;
  border-right: 1px solid var(--rt-line); }
.rtCap { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--rt-dim); white-space: nowrap; }
.rtRow { display: flex; align-items: center; gap: 8px; }

/* 날짜 칸 — 고를 수 없다(오늘만). 달력 대신 오늘 날짜를 적는다 */
.rtDay { align-items: center; min-width: 88px; }
.rtDate { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* 가운데 — ▶ · ‹ · 타임라인 · › */
.rtMain { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.rtPlay { flex: 0 0 auto; width: 44px !important; height: 44px; border-radius: 50%;
  border: 2px solid var(--rt-text) !important; display: grid; place-items: center; }
.rtPlay svg { width: 22px; height: 22px; }
.rtPlay:not(.on) svg path { fill: currentColor; stroke-width: 1.2; }
.rtPlay:hover, .rtPlay.on { color: var(--rt-acc); border-color: var(--rt-acc) !important; }
.rtArrow { flex: 0 0 auto; width: 28px !important; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--rt-dim) !important; display: grid; place-items: center; }
.rtArrow svg { width: 16px; height: 16px; }
.rtArrow:hover { color: var(--rt-acc); border-color: var(--rt-acc) !important; }

.rtTl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rtTlHd { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.rtNow { color: var(--rt-dim); font-size: 11px; white-space: nowrap; }
.rtClk { color: var(--rt-text); font-size: 14px; font-variant-numeric: tabular-nums; }
.rtMsg { margin-left: auto; color: var(--rt-dim); font-size: 11px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.rtMsg.warn { color: #ffb4a8; }
.rtPanel.loading .rtClk { opacity: .5; }

/* 타임라인 — 굵은 선 위 눈금, 지나간 부분 노랑, 아직 오지 않은 시간 흐림, 현재 세로선 */
.rtTrack { position: relative; height: 34px; cursor: pointer; touch-action: none; }
.rtRail, .rtFill, .rtFuture { position: absolute; top: 7px; height: 4px; border-radius: 2px; pointer-events: none; }
.rtRail { left: 0; right: 0; background: var(--rt-rail); }
.rtFill { left: 0; background: var(--rt-acc); }
.rtFuture { background: rgba(255, 255, 255, .08); top: 5px; height: 8px; }
.rtTicks { position: absolute; inset: 0; pointer-events: none; }
.rtTk { position: absolute; top: 11px; width: 1px; height: 5px; background: var(--rt-dim); transform: translateX(-.5px); }
.rtTk.maj { height: 9px; width: 2px; background: var(--rt-text); }
.rtTk.fut { opacity: .35; }
.rtLb { position: absolute; top: 21px; transform: translateX(-50%); font-size: 11px; color: var(--rt-text);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.rtLb.fut { color: var(--rt-dim); opacity: .6; }
.rtLb.l0 { transform: none; }                    /* 00:00 — 막대 왼쪽 끝 안으로 */
.rtLb.r0 { transform: translateX(-100%); }       /* 24:00 — 막대 오른쪽 끝 안으로 */
.rtCur { position: absolute; top: -3px; width: 2px; height: 24px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); border-radius: 1px; pointer-events: none; }

/* 속도 — 노란 막대 슬라이더 (2026-09-29 「구간」 칸을 없앴다 — 그 자리는 타임라인이 쓴다) */
.rtSpeed { min-width: 150px; }
.rtRange { -webkit-appearance: none; appearance: none; width: 100%; min-width: 70px; height: 6px;
  border-radius: 3px; background: var(--rt-rail); accent-color: var(--rt-acc); cursor: pointer; margin: 0; }
.rtRange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.rtRange::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; }
.rtRange::-moz-range-progress { background: var(--rt-acc); height: 6px; border-radius: 3px; }
.rtSv { min-width: 38px; font-size: 14px; font-variant-numeric: tabular-nums; }

.rtClose { flex: 0 0 auto; width: 46px !important; display: grid; place-items: center; color: var(--rt-dim) !important; }
.rtClose svg { width: 20px; height: 20px; }
.rtClose:hover { color: var(--rt-text) !important; background: rgba(255, 255, 255, .06) !important; }

/* 기체 찾기·주변 숨김 (2026-09-29) — 찾기 단추는 features/replay-find 가 붙인다 */
.rtFind { flex-direction: row; align-items: center; gap: 8px; }
.rtSolo { height: 32px; padding: 0 12px !important; border-radius: 16px; border: 1.5px solid var(--rt-dim) !important;
  white-space: nowrap; font-weight: 600; }
.rtSolo[hidden] { display: none; }
.rtSolo:hover { color: var(--rt-acc); border-color: var(--rt-acc) !important; }
.rtSolo.on { color: var(--rt-acc); border-color: var(--rt-acc) !important; background: rgba(242, 194, 48, .12) !important; }

/* 좁은 화면 — 날짜 칸도 빼고 여백을 줄인다. 속도는 값만 남긴다 */
@media (max-width: 760px) {
  .rtDay { display: none; }
  .rtSec { padding: 8px 10px; }
  .rtMain { gap: 6px; }
  .rtPlay { width: 38px !important; height: 38px; }
  .rtSpeed { min-width: 0; }
  .rtSpeed .rtCap, .rtSpeed .rtRange { display: none; }
  .rtTlHd .rtCap { display: none; }
  .rtArrow { display: none; }
  .rtSolo { display: none; }           /* 자리가 없다 — 같은 스위치가 찾기 상자 추적 줄에 있다(replay-find) */
}