/* =========================================================
   관찰 카메라 클로즈업 · 리플레이 오버레이 (js/observer.js)
   ========================================================= */
.cc-observe { position: absolute; inset: 0; pointer-events: none; }
.cc-observe[hidden] { display: none; }

/* 상단 알림: ⚠️ [관찰 중] … (배너 아래에 배속·건너뛰기 줄이 이어진다) */
.cc-obs-top { position: absolute; left: 50%; top: calc(14% + 44px); translate: -50% 0; width: min(92%, 760px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cc-obs-banner {
  max-width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 14px;
  background: rgba(120, 28, 24, 0.86); color: #fff; font-family: var(--font-display); font-size: clamp(13px, 2.2vw, 19px); line-height: 1.35;
  box-shadow: 0 0 0 2px rgba(255, 201, 74, 0.9), 0 8px 22px rgba(0, 0, 0, 0.45);
  animation: obsDrop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.cc-obs-banner b { color: #ffc94a; white-space: nowrap; }
.obs-ico { animation: obsBlink 1s steps(1) infinite; }
.cc-observe.flash .cc-obs-banner { animation: obsDrop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes obsDrop { from { opacity: 0; transform: translateY(-14px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes obsBlink { 50% { opacity: 0.2; } }

.cc-obs-meta {
  display: flex; align-items: center; gap: 10px; color: #fff; font-size: clamp(11px, 1.6vw, 14px); text-shadow: 0 1px 2px #000;
}
.cc-obs-meta span { padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); }
.cc-obs-meta button {
  pointer-events: auto; min-height: 30px; padding: 2px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 253, 246, 0.9); color: #4a2a08; font-family: var(--font-display); font-size: inherit;
}
.cc-obs-meta button:hover, .cc-obs-meta button:focus-visible { background: #fff; outline: 2px solid #ffc94a; }

/* 포커스 대상(주둥이·목줄·머리)을 따라다니는 조준 표시 */
.cc-reticle { position: absolute; width: clamp(74px, 13vmin, 130px); aspect-ratio: 1; translate: -50% -50%; transition: opacity 0.2s; animation: obsPulse 1.1s ease-in-out infinite; }
.cc-reticle i { position: absolute; width: 22%; height: 22%; border: 3px solid #ffc94a; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6)); }
.cc-reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.cc-reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.cc-reticle i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.cc-reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
@keyframes obsPulse { 50% { scale: 1.12; } }

@media (prefers-reduced-motion: reduce) {
  .obs-ico, .cc-reticle { animation: none; }
}