/* 실시간 보드에만 있는 것. 나머지 모양은 목업의 sheet.css를 그대로 쓴다 */
.head__right { display: flex; align-items: center; gap: 12px; }

/* 서버와 이어져 있는지. 끊기면 회색 */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.live[data-on='true'] { color: var(--success-text); }
.live[data-on='true'] i { background: var(--success); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 100% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } }

.pole-pick { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat; font-family: var(--font-mono); }

/* 업로드 진행률은 알 수 없으므로 막대가 왕복한다 */
.photo[data-phase='uploading'] .bar i { width: 40%; transform: none; animation: upload 1.1s ease-in-out infinite; }
@keyframes upload { from { margin-left: -40%; } to { margin-left: 100%; } }


@media print { .live, .pole-pick { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .live i, .photo[data-phase='uploading'] .bar i { animation: none; } }