/* 관제 교신 콜사인 표시 (2026-10-21 신설) — v9(10-22): 막대 더 길고 얇게(세로 76×6 · 가로 84×6) · v8(10-22): 조종사 가로·관제사 세로·주인 없는 막대, 칸 없앰 · v7(10-22): 색은 CSS 변수(--atcl-idle·pilot·atc, 교신 플러그인에서 고른 색) · v5: 막대를 transform(scaleY)으로 움직인다(리뷰 L4 — height 애니메이션은 매 프레임 레이아웃).
   기본(화자 모름): 기체 위 노란 세로 막대 · .atcl-pilot(조종사): 기체 오른쪽으로 **가로로 뻗는** 막대 · .atcl-atc(관제사): **위에서 기체로 내려오는** 파란 세로 막대 */
#atclHost { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1200; pointer-events: none; }
.atcl-box { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.atcl-bars { position: absolute; left: -22px; top: -104px; display: flex; gap: 6px; align-items: flex-end; height: 82px; padding: 4px 6px 2px;
  border-radius: 8px; background: rgba(20, 24, 31, .35); box-sizing: border-box; }
.atcl-bars i {
  display: block; width: 6px; height: 76px; border-radius: 3px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, #ffffff 0%, var(--atcl-idle, #ffc400) 45%, var(--atcl-idle, #ffc400) 100%);
  box-shadow: 0 0 8px var(--atcl-idle, #ffc400), 0 0 18px var(--atcl-idle, #ffc400);
  animation: atclb .55s ease-in-out infinite;
}
.atcl-bars i:nth-child(2) { animation-delay: .18s } .atcl-bars i:nth-child(3) { animation-delay: .36s }
@keyframes atclb { 0%, 100% { transform: scaleY(.44) } 50% { transform: scaleY(1) } }
/* v8 조종사 — **가로** 막대: 기체 오른쪽으로 뻗는다(왼쪽이 기준선) */
.atcl-pilot .atcl-bars { left: 16px; top: -24px; width: 92px; height: auto; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 5px 4px 5px 2px; border-bottom: 0; border-left: 2px solid var(--atcl-pilot, #ffc400); }
.atcl-pilot .atcl-bars i { width: 84px; height: 6px; transform-origin: 0 50%; animation-name: atclh;
  background: linear-gradient(270deg, #ffffff 0%, var(--atcl-pilot, #ffc400) 45%, var(--atcl-pilot, #ffc400) 100%);
  box-shadow: 0 0 8px var(--atcl-pilot, #ffc400), 0 0 18px var(--atcl-pilot, #ffc400); }
@keyframes atclh { 0%, 100% { transform: scaleX(.44) } 50% { transform: scaleX(1) } }
/* 관제사 — 더 높이 띄우고 위가 기준선(아래로 내려옴) · 하늘색 */
.atcl-atc .atcl-bars { top: -116px; align-items: flex-start; border-top: 2px solid var(--atcl-atc, #27a8ff); }
.atcl-atc .atcl-bars i {
  transform-origin: 50% 0%;
  background: linear-gradient(0deg, #ffffff 0%, var(--atcl-atc, #27a8ff) 45%, var(--atcl-atc, #27a8ff) 100%);
  box-shadow: 0 0 8px var(--atcl-atc, #27a8ff), 0 0 18px var(--atcl-atc, #27a8ff);
}
@media (prefers-reduced-motion: reduce) { .atcl-bars i { animation: none; transform: scaleY(.7) } .atcl-pilot .atcl-bars i { transform: scaleX(.7) } }
/* v10 (2026-10-24 운영자 요청 «콜사인 항공기는 명확하게 선택하고 막대는 무지개색»):
   ① 콜사인을 찾은 기체의 막대는 **무지개색**(화자별 방향은 그대로 — 조종사 가로·관제사 세로) — 막대마다 색을 나눠 7색이 차례로 흐른다
   ② 기체에 **링** — 레이더 재생 링(setReplayFocus)을 쓰되, 남이 쥐고 있으면 이 상자가 같은 모양(.atcl-ring)을 대신 그린다(늘 보인다)
   콜사인 모르는 «주인 없는» 막대(.atcl-free)는 플러그인 색 그대로(무지개 아님 — 어느 기체인지 모른다는 표시) */
/* 막대 하나에 7색이 다 보이게(빨→보) + 색이 천천히 돈다(hue-rotate — 배경을 다시 그리지 않아 가볍다) */
.atcl-hit .atcl-bars i, .atcl-hit.atcl-atc .atcl-bars i {
  background: linear-gradient(180deg, #ff3b3b 0%, #ff9f1a 17%, #ffe11a 33%, #3ccf4e 50%, #1ac8ff 67%, #3a6bff 83%, #a64dff 100%);
  box-shadow: 0 0 6px rgba(255, 255, 255, .5), 0 0 14px rgba(120, 160, 255, .45);
  animation-name: atclb, atclhue; animation-duration: .55s, 3s; animation-timing-function: ease-in-out, linear; animation-iteration-count: infinite, infinite;
}
.atcl-hit.atcl-pilot .atcl-bars i { background: linear-gradient(90deg, #ff3b3b 0%, #ff9f1a 17%, #ffe11a 33%, #3ccf4e 50%, #1ac8ff 67%, #3a6bff 83%, #a64dff 100%);
  animation-name: atclh, atclhue; }
.atcl-hit .atcl-bars i:nth-child(2) { animation-delay: .18s, -1s } .atcl-hit .atcl-bars i:nth-child(3) { animation-delay: .36s, -2s }
.atcl-hit.atcl-pilot .atcl-bars { border-left-color: #ffe11a; }
.atcl-hit.atcl-atc .atcl-bars { border-top-color: #1ac8ff; }
@keyframes atclhue { from { filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) } }
/* 링: 평소에는 레이더의 재생 링(기체마다 주황 원 하나 — 운영자가 보여 준 그림)을 쓰고, 다른 기능이 그 링을 쥐고 있어 못 쓸 때만(#atclHost.atcl-ownring) 같은 모양을 이 상자가 그린다 — 겹쳐 두 겹이 되지 않게 */
.atcl-ring { display: none; position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid #ff8a1a; box-shadow: 0 0 10px rgba(255, 138, 26, .7), inset 0 0 6px rgba(255, 138, 26, .35); }
#atclHost.atcl-ownring .atcl-ring { display: block; }
@media (prefers-reduced-motion: reduce) { .atcl-hit .atcl-bars i { animation: none } }
/* v8 — 콜사인 모르는 교신: 섹터 가운데 «주인 없는» 막대(점선 테두리·조금 흐리게) · v6 관측소 칸은 없앴다 */
.atcl-free .atcl-bars { outline: 1px dashed rgba(255, 255, 255, .45); outline-offset: 2px; opacity: .8; }