/* 메인 레이어 팝업 (popups.json 기반) */
.kar-lp-wrap {
  position: fixed; left: 0; right: 0; top: 130px; z-index: 9990;
  display: flex; justify-content: center; align-items: flex-start; gap: 16px;
  padding: 0 16px; pointer-events: none;
}
.kar-lp {
  position: relative; pointer-events: auto; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(12, 48, 98, .28), 0 2px 8px rgba(0, 0, 0, .12);
  animation: kar-lp-in .28s ease-out both;
}
.kar-lp[hidden] { display: none; }
@keyframes kar-lp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.kar-lp-head {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 12px;
  background: #fff; border-bottom: 1px solid #e3e8f0; color: #0c3062; cursor: move; touch-action: none; user-select: none;
}
.kar-lp-head.is-dragging { cursor: grabbing; }
.kar-lp-grip { flex: none; width: 10px; height: 16px; opacity: .45;
  background-image: radial-gradient(#0c3062 1.4px, transparent 1.6px); background-size: 5px 5px; }
.kar-lp-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kar-lp-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: #0c3062; font-size: 16px; line-height: 30px; cursor: pointer;
}
.kar-lp-x:hover, .kar-lp-x:focus-visible { background: #eef2f8; outline: none; }
.kar-lp-body { position: relative; overflow: hidden; background: #fff; }
.kar-lp-body iframe { display: block; border: 0; transform-origin: 0 0; background: #fff; }
.kar-lp-body img { display: block; width: 100%; height: auto; }
.kar-lp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: #0c3062; color: #fff; font-size: 14px; line-height: 1.2;
}
.kar-lp-bar { cursor: move; touch-action: none; }
.kar-lp-bar.is-dragging { cursor: grabbing; }
.kar-lp-bar label { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.kar-lp-bar input { width: 16px; height: 16px; margin: 0; accent-color: #f2a65a; cursor: pointer; }
.kar-lp-close {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px; background: transparent; color: #fff; font-size: 14px; cursor: pointer;
}
.kar-lp-close:hover, .kar-lp-close:focus-visible { background: rgba(255,255,255,.15); outline: none; }
.kar-lp-count { font-size: 12px; opacity: .75; }

/* 좁은 화면: 한 장씩 가운데, 뒤 배경 어둡게 */
.kar-lp-dim { display: none; }
@media (max-width: 767px) {
  .kar-lp-wrap { top: 50%; transform: translateY(-50%); }
  .kar-lp-dim { display: block; position: fixed; inset: 0; z-index: 9989; background: rgba(10, 20, 40, .45); }
}
@media (prefers-reduced-motion: reduce) { .kar-lp { animation: none; } }