/* 배너표 (2026-09-20)
   한 줄에 기간 · 그림 · 내용. 배너 그림이 4:1 로 아주 넓어서, 좁은 화면에서는
   위아래로 쌓는다. */

.bn-filter { display: flex; flex-wrap: wrap; gap: .25rem; }

.bn-chip {
    border: 1px solid var(--ls-border);
    background: var(--ls-surface);
    border-radius: 1rem;
    padding: .15rem .6rem;
    font-size: .8125rem;
    line-height: 1.5;
}
.bn-chip em { font-style: normal; color: var(--ls-muted); margin-left: .35rem; font-size: .75rem; }
.bn-chip.is-on { background: var(--ls-primary); border-color: var(--ls-primary); color: #fff; }
.bn-chip.is-on em { color: rgba(255, 255, 255, .75); }

.bn-list { display: flex; flex-direction: column; gap: .5rem; }

.bn {
    display: grid;
    /* 그림 칸은 **창 너비를 따라 늘어난다** (2026-09-27 사용자 요청
       "배너이미지 창 크기에 최적화"). 480px 고정이던 것이라 넓은 화면에서
       오른쪽이 텅 비고 그림만 작아 보였다. 좁으면 300px 까지 줄고 넓으면
       760px 에서 멈춘다 — 더 키우면 한 화면에 몇 줄 안 들어온다.
       vw 로 둔다 — rem 은 페이지 디자인(036)이 글자를 키우면 같이 늘어난다
       (18px 기준에서 540px 이 됐다). */
    grid-template-columns: 7rem clamp(300px, 34vw, 760px) 1fr;
    gap: .75rem;
    align-items: center;
    padding: .5rem;
    border: 1px solid var(--ls-border);
    border-radius: .35rem;
    background: var(--ls-surface);
}
/* 작업중 카드는 draft.css 의 .is-draft 한 벌 — 따로 덧칠해 두 겹이던 것 (3-12) */

.bn-when { font-size: .8125rem; line-height: 1.35; }
.bn-when b { display: block; }
.bn-when span { color: var(--ls-muted); }
.bn-when em { font-style: normal; color: #0ab39c; }

.bn-img {
    aspect-ratio: 1456 / 636;
    background: var(--ls-soft-2);
    border-radius: .25rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bn-img img { width: 100%; height: 100%; object-fit: cover; }
.bn-img.is-none img { display: none; }
.bn-noimg { color: var(--ls-muted-3); font-size: .75rem; }

.bn-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .2rem; }
.bn-tag { color: var(--ls-muted); font-size: .8125rem; }
.bn-title { font-size: .95rem; }

.bn-picks { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.bn-pick {
    font-size: .8125rem;
    padding: .1rem .45rem;
    border-radius: .25rem;
    background: var(--ls-soft-2);
    color: var(--ls-accent);
    text-decoration: none;
}
.bn-pick:hover { background: #e7ebf3; }
.bn-pick.is-plain { color: var(--ls-muted); }

/* 폰·좁은 화면 — 기간을 머리로 올리고 그림을 넓게 */
@media (max-width: 991.98px) {
    .bn { grid-template-columns: 1fr; }
    .bn-when { display: flex; gap: .4rem; align-items: baseline; }
    .bn-when b { display: inline; }
}

/* 복각 · 회차 딱지 */
.bn-rerun, .bn-ep {
    font-size: .6875rem;
    padding: .05rem .35rem;
    border-radius: .2rem;
    line-height: 1.5;
}
.bn-rerun { background: var(--ls-warn-bg-2); color: #b26a00; }
.bn-ep { background: #eef2ff; color: var(--ls-accent); }

/* 진행 중 · 종료 탭 */
.bn-tabs { display: inline-flex; border: 1px solid var(--ls-border); border-radius: .3rem; overflow: hidden; }
.bn-tab {
    border: 0;
    background: var(--ls-surface);
    padding: .2rem .7rem;
    font-size: .8125rem;
    line-height: 1.6;
}
.bn-tab + .bn-tab { border-left: 1px solid var(--ls-border); }
.bn-tab em { font-style: normal; color: var(--ls-muted); margin-left: .3rem; font-size: .75rem; }
.bn-tab.is-on { background: var(--ls-primary); color: #fff; }
.bn-tab.is-on em { color: rgba(255, 255, 255, .75); }

/* 끝난 배너는 한 톤 죽인다 */
.bn.is-over .bn-img { opacity: .82; }

/* 상태 표 (2026-09-26) — 예정 · 진행 · 종료. '전체' 로 보면 줄마다 어느 단인지
   이것으로 안다. 기준은 게임 서버 시간(한국)이고 11:00 에 갈린다 */
.bn-state {
    border-radius: .25rem;
    padding: 0 .35rem;
    font-size: var(--pg-font-badge, .75rem);
    line-height: 1.6;
    white-space: nowrap;
}
.bn-state.st-now  { background: rgba(10, 179, 156, .15); color: #0a9e8b; }
.bn-state.st-soon { background: rgba(41, 156, 219, .15); color: #2b8fc9; }
.bn-state.st-over { background: var(--ls-surface); color: var(--ls-muted); }
/* 예정은 아직 열리지 않은 줄이라 왼쪽에 파란 금을 그어 눈에 걸리게 한다 */
.bn.is-soon { border-left: 3px solid rgba(41, 156, 219, .55); }

/* 갈래 탭 아래 붙는 인원 탭 (신규 1인·2인·3인) — 한 단 아래임이 보이게
   조금 작고 흐리게. 부모 탭과 같은 줄 모양을 쓴다. */
.bn-tabs-sub { margin-left: .75rem; }
.bn-tab-sub { padding: .25rem .6rem; font-size: .78rem; }

/* ── 어두울 때 (3-14) — 밝을 때 색은 위 그대로 ───────────────────────── */
[data-bs-theme=dark] .bn-pick:hover { background: rgba(64, 81, 137, .30); }
[data-bs-theme=dark] .bn-rerun { color: #f7b84b; }
[data-bs-theme=dark] .bn-ep { background: rgba(64, 81, 137, .30); }
[data-bs-theme=dark] .bn-state.st-now  { background: rgba(10, 179, 156, .22); color: #45d6c3; }
[data-bs-theme=dark] .bn-state.st-soon { background: rgba(41, 156, 219, .22); color: #6cc0ec; }

/* 배너 그림 번호 (2026-09-26) — 앞 두 자리가 회차, 뒤가 그 회차 안 순번.
   복각은 원본과 같은 번호를 쓴다. 검색으로도 걸린다 */
.bn-no {
    color: var(--ls-muted);
    font-size: var(--pg-font-badge, .8rem);
    font-variant-numeric: tabular-nums;
}