/* =========================================================
   메인 배너 (결정 메인배너-1 ~ 4) — 관리자 › 이벤트 › 메인 배너에서 올린 그림 한 장이 홈 큰 배너 칸을 꽉 채워요.
   서버가 그 사이트에 보일 메인 배너가 있을 때만 이 파일을 붙여요 (없으면 이벤트 배너 그대로).
   칸 크기 · 둥근 모서리 · 테두리는 퍼블리싱 · 스킨의 .banner 그대로 쓰고, 안쪽 글 칸 배치만 끄고 그림을 깔아요.
   ========================================================= */
.home-ev.mb-on::before, .home-ev.mb-on::after,
.banner.mb-frame::before, .banner.mb-frame::after { content: none; display: none; }
.banner.mb-frame { display: block; position: relative; padding: 0; overflow: hidden; background: var(--space-700, #111); }
.mb-track { position: absolute; inset: 0; }
.mb-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
a.mb-slide, button.mb-slide { cursor: pointer; }
.mb-slide.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.mb-slide picture, .mb-slide img { display: block; width: 100%; height: 100%; }
.mb-slide img { object-fit: cover; object-position: center; -webkit-user-drag: none; user-select: none; }
.mb-ctl { position: absolute; right: 14px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, .42); }
.mb-arrow { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.mb-arrow:hover { background: rgba(255, 255, 255, .28); }
.mb-dots { display: flex; align-items: center; gap: 6px; }
.mb-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .2s ease, background .2s ease; }
.mb-dot[aria-pressed="true"] { width: 18px; background: #fff; }
.mb-arrow:focus-visible, .mb-dot:focus-visible, .mb-slide:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* 휴대폰: 휴대폰 그림 비율(720 × 370) 그대로 — 휴대폰 그림이 없으면 PC 그림 가운데를 잘라서 */
@media (max-width: 767.98px) {
  .banner.mb-frame { height: auto; aspect-ratio: 720 / 370; }
  .mb-arrow { display: none; }
  .mb-ctl { right: 10px; bottom: 8px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-slide, .mb-slide.is-on, .mb-dot { transition: none; }
}