/* 많이 보는 편 (2026-10-13) — 지도 위 가운데 한 줄. 모양은 #mapCtl .mb·여러 대 선택 띠와 같은 어휘 */
#pfBar {
  position: absolute; z-index: 1210;
  top: calc(var(--hdr-total, 56px) + var(--gap)); left: 50%; transform: translateX(-50%);
  max-width: min(980px, calc(100vw - var(--rail-w) - 260px));
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--bg-surface-float); color: var(--text-primary);
  border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  font-size: var(--fs-sm);
}
#pfBar::-webkit-scrollbar { display: none; }
#pfBar[hidden] { display: none; }
#pfBar button { margin: 0; width: auto; font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
#pfBar .pfHead { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-weight: 700; white-space: nowrap; border-radius: var(--radius-sm); }
#pfBar .pfHead:hover { color: var(--accent-cyan); }
#pfBar .pfItem {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; white-space: nowrap;
  border-left: 1px solid var(--border-subtle, var(--border-medium)); border-radius: 0;
}
#pfBar .pfItem:hover { background: var(--bg-hover); }
#pfBar .pfRank { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 4px; background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 700; }
#pfBar .pfLogo { height: 16px; max-width: 2.8em; object-fit: contain; }
#pfBar .pfCs { font-family: var(--font-mono); }
#pfBar .pfTyp, #pfBar .pfRt { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-xs); }
#pfBar .pfN { color: var(--accent-cyan); font-size: var(--fs-xs); font-weight: 700; }
/* 꼬리표 (v3) — 경보색은 경보 엔진과 같은 계열(비상 빨강·근접 주황), 사건은 홀딩·복행 패널과 같은 계열(홀딩 보라·회항 청록) */
#pfBar .pfTag { flex: none; padding: 1px 6px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: #fff; white-space: nowrap; }
#pfBar .pfT-sq   { background: #c2261f; }
#pfBar .pfT-sep  { background: #e07b1a; }
#pfBar .pfT-div  { background: #0e9488; }
#pfBar .pfT-hold { background: #7c3aed; }
#pfBar .pfT-odd  { background: #b45309; }   /* 자료 이상(지도 「보정」) — 2026-10-13 23시 */
#pfBar .pfT-rare { background: #2563eb; }
#pfBar .pfX { flex: none; width: 26px; height: 26px; margin-left: 2px; border-radius: var(--radius-full); color: var(--text-secondary); font-size: 12px; line-height: 26px; text-align: center; }
#pfBar .pfX:hover { background: var(--bg-hover); color: var(--accent-cyan); }
#pfPrefSec[hidden] { display: none; }
/* v6 흐르는 띠(2026-10-14) — PC 는 두 겹이 없는 것처럼(display:contents) 종전 배치 그대로 */
#pfBar .pfTrack, #pfBar .pfRun, #pfBar .pfLoop { display: contents; }
#pfBar .pfEmpty { padding: 4px 10px; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }

/* 폰 — 헤더 바로 아래 왼쪽부터, 오른쪽 위 레이어·뉴스 단추 열(약 52px)은 비킨다. 시트가 뜨면 감춘다 */
@media (max-width: 760px) {
  #pfBar { left: calc(var(--gap) + var(--sa-l)); right: calc(var(--gap) + var(--sa-r) + 52px); transform: none; max-width: none; }
  body[data-sheet] #pfBar { display: none; }
  /* 폰 — 머리·✕ 는 그대로, 가운데 편 목록만 칸 안에서 흐른다(넘칠 때만 JS 가 .pfMarq) */
  #pfBar { overflow: hidden; }
  #pfBar .pfHead, #pfBar .pfX { flex: none; }
  #pfBar .pfTrack { display: block; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #pfBar .pfTrack::-webkit-scrollbar { display: none; }
  #pfBar .pfRun { display: inline-flex; align-items: center; }
  #pfBar .pfTrack.pfMarq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  #pfBar .pfLoop { display: inline-flex; width: max-content; animation: pfFlow var(--pf-dur, 20s) linear infinite; }
  #pfBar .pfTrack.pfMarq:active .pfLoop { animation-play-state: paused; }
  /* 손가락 터치 뒤 :hover 가 남아 계속 멈춰 있지 않게 — 마우스 있는 기기만 hover 로 멈춤 */
  @media (hover: hover) { #pfBar .pfTrack.pfMarq:hover .pfLoop { animation-play-state: paused; } }
  /* 손가락 크기 — 줄 높이 40px · ✕ 36px */
  #pfBar .pfHead, #pfBar .pfItem { min-height: 40px; }
  #pfBar .pfX { width: 36px; height: 36px; line-height: 36px; }
}
@keyframes pfFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }   /* 오른쪽 → 왼쪽 (10-14 22시 운영자 「오른쪽에서 왼쪽으로」 — 처음엔 왼쪽→오른쪽이었다) */