/**
 * 배경음악 라이브러리(/ai/bgm/) — 마크업 inc/motion-bgm.php · 동작 js/bgm.js. css/sfx.css(SFX 라이브러리) 위에 싣는다 — 표·찾기 줄·▶·파형·받기·떠 있는 창은 그 파일 그대로.
 *
 * 2026-10-20 운영자 「배경음악만 보는 라이브러리도 제공합시다」 → 「긴 곡 새로 + 10초 곡」 · 「듣기 누구나 · 받기 멤버십」.
 * 이 파일만의 칸: 분위기 거르기 칩(정본 4.5 — 선택은 흑백 gray-200 면 + gray-900 글자) · 줄 앞 표지(그 모션 스타일 그림 16:9 · 6px — SFX 「쓰인 장면」과 같은 모양) ·
 *   [전체 | 영상] 고르기 단추(정본 v4 7.14 고르기 단추 .pcf-seg 와 같은 값 — 회색 칸 2px 안에 고른 쪽 흰 면 + 그림자).
 * SFX 와 같은 까닭으로 둥근 ▶ 는 그대로 쓴다(sfx.css 머리 「사이트 규칙과 다른 점」 — 두 라이브러리가 한 벌로 보이게).
 * 라이브 테마 토큰만 쓴다(v3 이름 금지). !important 없음.
 */

/* ── 분위기 칩 ── */
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bg .bg-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; background: var(--gray-100); color: var(--gray-700); font-size: 14px; white-space: nowrap; }
.bg .bg-chip span { color: var(--gray-500); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bg .bg-chip:hover { background: var(--gray-200); color: var(--gray-900); }
.bg .bg-chip[aria-pressed="true"] { background: var(--gray-200); color: var(--gray-900); font-weight: 600; }
.bg .bg-chip[aria-pressed="true"] span { color: var(--gray-700); font-weight: 400; }
.bg .bg-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bg .bg-mood-d { margin-top: 12px; color: var(--gray-600); font-size: 14px; line-height: 1.5; word-break: keep-all; }
.bg-mood-d b { color: var(--gray-900); font-weight: 600; }

/* ── 표 — ▶ · 표지 · 이름 · 파형 · [전체 | 영상] · 받기 · 찾는 말 ── */
.sx-thead.bg-thead, .sx-row.bg-row { grid-template-columns: 48px 96px minmax(0, 1fr) 150px 152px 76px minmax(0, 190px); }
.sx-thead.bg-thead span:nth-child(4) { text-align: left; }
.sx-row.bg-row.is-hl { background: var(--gray-50); }
.bg .bg-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--gray-200); }
.bg-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-row.is-on .bg-cover { box-shadow: 0 0 0 2px var(--t-main); }
.bg-meta { margin-top: 1px; }

/* [전체 2:27 | 영상 0:10] — 고른 쪽을 듣고 받는다 */
.bg-seg { display: inline-flex; justify-self: start; padding: 2px; border-radius: 6px; background: var(--gray-100); }
.bg .bg-seg button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border-radius: 5px; color: var(--gray-700); font-size: 13px; font-weight: 500; white-space: nowrap; }
.bg .bg-seg button span { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.bg .bg-seg button:hover { color: var(--gray-900); }
.bg .bg-seg button[aria-pressed="true"] { background: var(--surface-white); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); color: var(--gray-900); font-weight: 600; }
.bg .bg-seg button[aria-pressed="true"] span { color: var(--gray-700); font-weight: 400; }
.bg .bg-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.bg .sx-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── 좁은 화면 — 찾는 말 → 표지 차례로 뺀다 ── */
@media (max-width: 1280px) {
	.sx-thead.bg-thead, .sx-row.bg-row { grid-template-columns: 48px 96px minmax(0, 1fr) 132px 152px 76px; }
	.sx-thead.bg-thead span:nth-child(7), .bg-row .bg-tags { display: none; }
}
@media (max-width: 1024px) {
	.sx-thead.bg-thead, .sx-row.bg-row { grid-template-columns: 48px minmax(0, 1fr) 112px 152px 72px; gap: 12px; }
	.sx-thead.bg-thead span:nth-child(2), .bg-row .bg-cover { display: none; }
}
@media (max-width: 760px) {
	.sx-row.bg-row { grid-template-columns: auto minmax(0, 1fr) 34px; grid-template-areas: "play main dl" ". seg seg"; row-gap: 8px; min-height: 0; padding: 12px 0; }
	.bg-row .sx-play { grid-area: play; }
	.bg-row .sx-main { grid-area: main; }
	.bg-row .sx-dl { grid-area: dl; }
	.bg-row .bg-seg { grid-area: seg; }
	.bg .bg-chips { flex-wrap: nowrap; margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; }
	.bg .bg-chips::-webkit-scrollbar { display: none; }
}