/* css/clip.css — 아틀라스 클립(짧은 영상) 공용 스타일 (2026-09-07)
   인물 페이지·사건 페이지(밝은 종이 배경)와 지도 카드 팝업(어두운 배경) 양쪽에서 쓴다. */

.atlas-clip { margin: 18px 0 22px; padding: 0; }
.clip-frame {
  position: relative; overflow: hidden; border-radius: 12px;
  background: #14110c; aspect-ratio: 16 / 9; cursor: pointer;
}
.clip-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip-badge {
  position: absolute; left: 10px; bottom: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #f2ede3; background: rgba(20,17,12,.72);
  padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px);
  pointer-events: none;
}
/* 멈춰 있을 때 — 자동 재생이 막힌 폰에서도 이 표시가 뜬다 */
.atlas-clip.is-paused .clip-frame::after {
  content: '▶'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 34px; color: rgba(242,237,227,.9);
  background: rgba(20,17,12,.28); pointer-events: none;
}
.clip-cap { margin-top: 9px; }
.clip-title { display: block; font-size: 14px; font-weight: 800; color: #2a241a; }
.clip-line { display: block; font-size: 13px; line-height: 1.6; color: #55504a; margin-top: 2px; }
.clip-basis { display: block; font-size: 11.5px; color: #8b857b; margin-top: 4px; }
.clip-yt {
  display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700;
  color: #8a6d34; text-decoration: none;
}
.clip-yt:hover { text-decoration: underline; }

/* 지도 카드 팝업 안 — 어두운 배경, 설명은 줄여서 */
.pop-clip .atlas-clip { margin: 0 0 10px; }
.pop-clip .clip-frame { border-radius: 8px; }
.pop-clip .clip-title { color: #f2ede3; font-size: 13px; }
.pop-clip .clip-line { color: #b8b0a2; font-size: 12px; }
.pop-clip .clip-basis, .pop-clip .clip-yt { color: #b8985f; }

/* 인물 페이지 맨 위 — 조금 크게 */
.person .atlas-clip { margin-top: 4px; }

@media (max-width: 640px) {
  .clip-title { font-size: 13.5px; }
  .clip-line { font-size: 12.5px; }
}