/* 메인 배너 — 피드 맨 위·지도 첫 화면·홈 상단·관리 미리보기·콘솔 심사가 같이 쓴다 (main-banner.js, 확정안 2026-10-19).
   글자 자리 = 배너 왼쪽 60% × 아래 절반. 막(::before)은 글자 상자보다 위로 40px·오른쪽으로 56px 더 넓게 깔리고
   그 가장자리만 투명해진다 — 글자 밑은 늘 --pb-a 이상이라 흰 바탕 배너에서도 4.5:1 이 남는다.
   글자 크기는 화면 폭이 아니라 배너 폭(container)으로 정한다 — 관리 미리보기(실제 폭으로 그려 줄인 것)와 같게. */
.mbn[hidden] { display: none; }
.mbn { position: relative; }
.mbn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.mbn-track::-webkit-scrollbar { display: none; }
.mbn-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; display: block;
  color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mbn-slide:focus-visible { outline: none; }
.mbn-slide:focus-visible .pb-media { outline: 3px solid var(--accent); outline-offset: -3px; }

.pb-media { --pb-a: .62; position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; isolation: isolate;
  container-type: inline-size; background: var(--pb-c, var(--face, #1f2330)); color: #fff; }
.pb-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 대체 — 세로 포스터는 오른쪽 끝에 꽉, 왼쪽은 포스터 가장자리 색 면. 글자는 면 안에서만 (포스터를 덮지 않는다) */
.pb-media.fb { --pb-pw: 45%; }
.pb-media.fb > img { left: auto; width: auto; aspect-ratio: 4 / 5; object-position: center top; }
.pb-media.nopo { --pb-pw: 0%; }
.pb-media.r3 { aspect-ratio: 3 / 1; }
.pb-media.r3.fb { --pb-pw: 27%; }
.pb-media.r3.nopo { --pb-pw: 0%; }

.pb-cap { position: absolute; left: 0; bottom: 0; z-index: 1; box-sizing: border-box; width: 60%;
  padding: 0 16px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; color: #fff; text-align: left; }
.pb-media.fb .pb-cap { width: min(60%, calc(100% - var(--pb-pw))); }
.pb-cap::before { content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; top: -40px; right: -56px;
  background: linear-gradient(to top, rgba(0, 0, 0, calc(var(--pb-a) + .1)), rgba(0, 0, 0, var(--pb-a)) 60%);
  -webkit-mask: linear-gradient(to right, #000 calc(100% - 56px), transparent), linear-gradient(to top, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, #000 calc(100% - 56px), transparent), linear-gradient(to top, #000 calc(100% - 40px), transparent);
  mask-composite: intersect; pointer-events: none; }
.pb-t { max-width: 100%; font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em;
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-sub, .pb-when { display: block; max-width: 100%; font-size: var(--fs-meta, 13px); line-height: 1.4; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-sub { font-weight: 600; }
.pb-when { font-weight: 500; opacity: .92; }
.pb-act { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.pb-cta { padding: 7px 13px; border-radius: 999px; background: #fff; color: #111; font-size: 13px; line-height: 1.2; font-weight: 700;
  white-space: nowrap; transition: opacity var(--t-press, .12s) var(--ease, ease); }
.mbn-slide:active .pb-cta, .mb-big:active .pb-cta { opacity: .85; }
.pb-ad { font-style: normal; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .08em; color: #fff; opacity: .9; }
/* 밝은 단색 면 — 막 없이 검은 글자 */
.pb-media.ink .pb-cap { color: #111; }
.pb-media.ink .pb-cap::before { display: none; }
.pb-media.ink .pb-t { text-shadow: none; }
.pb-media.ink .pb-sub, .pb-media.ink .pb-when, .pb-media.ink .pb-ad { color: #111; }
.pb-media.ink .pb-cta { background: #111; color: #fff; }
/* 좁은 배너(지도 카드·관리 휴대폰 미리보기 아래쪽) — 소개는 한 줄로 두고 제목을 한 줄로 줄인다 */
@container (max-width: 340px) {
  .pb-cap { padding: 0 14px 12px; }
  .pb-t { font-size: 17px; }
  .pb-cap:has(.pb-sub) .pb-t { -webkit-line-clamp: 1; }
}
/* 넓은 배너(데스크톱 3:1 · 관리 데스크톱 미리보기) */
@container (min-width: 700px) {
  .pb-cap { padding: 0 32px 28px; gap: 6px; }
  .pb-cap::before { top: -56px; right: -80px;
    -webkit-mask: linear-gradient(to right, #000 calc(100% - 80px), transparent), linear-gradient(to top, #000 calc(100% - 56px), transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(to right, #000 calc(100% - 80px), transparent), linear-gradient(to top, #000 calc(100% - 56px), transparent);
    mask-composite: intersect; }
  .pb-t { font-size: 32px; line-height: 1.18; letter-spacing: -.025em; }
  .pb-sub { font-size: var(--fs-sub, 15px); }
  .pb-when { font-size: var(--fs-sub, 15px); }
  .pb-act { margin-top: 12px; gap: 14px; }
  .pb-cta { font-size: 14px; padding: 10px 18px; }
  .pb-ad { font-size: 12px; }
}

/* 롤링 점 — 오른쪽 아래, 이미지 안 */
.mbn-dots { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.mbn-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .5); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: width .25s var(--ease, ease), background .2s; }
.mbn-dots button[aria-current] { width: 20px; background: #fff; }
.mbn-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── 피드 맨 위 — 모바일 16:9 가장자리까지, 데스크톱 3:1 격자 폭 ── */
.mbn-feed { margin: 0 -16px 20px; }
@media (min-width: 760px) {
  .mbn-feed { margin: 0 0 24px; max-width: 1100px; }
  .mbn-feed .pb-media, .mbn-home .pb-media { aspect-ratio: 3 / 1; border-radius: 16px; --pb-pw: 27%; }
  .mbn-feed .pb-media.nopo, .mbn-home .pb-media.nopo { --pb-pw: 0%; }
  .mbn-feed .mbn-dots, .mbn-home .mbn-dots { right: 22px; bottom: 22px; }
}

/* ── 홈 상단 — 히어로 바로 아래 한 줄. 모바일은 둥근 16:9 ── */
.mbn-home-sec { padding: 0 0 8px; }
.mbn-home .pb-media { border-radius: 16px; }
.mbn-home .mbn-track { border-radius: 16px; }

/* ── 지도 첫 화면 — 칩 줄 바로 아래(top 은 main-banner.js 가 잰다). 기본 접힌 76px 카드 → 펼치면 16:9 ── */
.mb { position: fixed; z-index: 6; left: 14px; right: 14px; top: var(--mb-top, calc(var(--nav-h, 56px) + 104px)); }
@media (min-width: 900px) { .mb { left: 416px; right: auto; width: 380px; } }
.mb .mbn-track { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.mb.low .mb-big, .mb.big .mb-low, .mb.low .mbn-dots, .mb.low .mb-fold { display: none; }
.mb-low { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; height: 76px;
  box-sizing: border-box; padding: 10px 46px 10px 10px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.mb-th { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--face, var(--sunken)); }
.mb-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.mb-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-t { font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-m { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: var(--fs-meta); line-height: 1.35; color: var(--muted); }
.mb-m > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-go { padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.2; font-weight: 700; white-space: nowrap; }
.mb-low:active .mb-go { opacity: .82; }
.mb-low:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
.mb-big { display: block; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mb-big:focus-visible { outline: none; }
.mb-big:focus-visible .pb-media { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
.mb.big .mbn-track { box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 14px 32px -10px rgba(0, 0, 0, .38); }
.mb-x, .mb-fold { position: absolute; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; background: none; color: var(--muted); }
.mb-x svg, .mb-fold svg { width: 16px; height: 16px; }
.mb.low .mb-x { top: 20px; right: 5px; }
.mb-x:hover { background: var(--sunken); color: var(--ink); }
.mb.big .mb-x, .mb.big .mb-fold { top: 8px; width: 32px; height: 32px; color: #fff; background: rgba(0, 0, 0, .44); }
.mb.big .mb-x { right: 8px; }
.mb.big .mb-fold { right: 46px; }
.mb.big .mb-x:hover, .mb.big .mb-fold:hover { background: rgba(0, 0, 0, .62); color: #fff; }
.mb.big .mb-x svg, .mb.big .mb-fold svg { width: 14px; height: 14px; }
.mb-x:focus-visible, .mb-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 미리보기(관리 화면·콘솔 심사) — 실제 크기로 그린 배너를 칸 폭으로 줄인다 (--k = 칸 폭 / 실제 폭, fitPreviews) ── */
.bn-pv { position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--sunken); }
.bn-pv.m { aspect-ratio: 16 / 9; }
.bn-pv.d { aspect-ratio: 3 / 1; }
.bn-pv .pb-media { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k, .3)); pointer-events: none; }

.mbn-home-sec[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mbn-dots button, .pb-cta { transition: none; } }