/**
 * SFX 라이브러리(/ai/sfx/) — 마크업 inc/motion-sfx.php · 동작 js/sfx.js. 틀은 AI 활용(css/ai-hub.css).
 *
 * 2026-10-11 운영자 2차 결정(1차 시안 A·B·C 비교 claude.ai 아티팩트 VwvjE7Nr…):
 *   목록 전체 느낌 = ElevenLabs Sound Effects(Mobbin 8dda698d) — 분류 그림 칸 줄 · 표 머리 · 둥근 ▶ · 가는 막대 파형
 *   위 거르기·찾기 줄 = Artlist Sound Effects(Mobbin 97723546) — 회색 찾기 칸 · 테두리 없는 글자 드롭다운 · 오른쪽 정렬 · 아래 선
 *   분류 한 칸 = ElevenLabs 분류 머리(그림 + 「Category」 + 큰 제목)를 키워 그림 자리에 분류 영상(「들어왔다는 느낌이 적다 — 크게, 모션으로」)
 *   모션 크게 보기 = .sx-float 떠 있는 미리보기(TikTok Floating Player Mobbin 02f161ec) — 줄 펼치기(Digg)와 견줘 운영자가 고름
 * 3차(같은 날): 분류 영상 「너무 크다 — 작게」 584px → 320px · 무한 스크롤(.sx-sen) · 분류 ZIP 단추 뺌.
 * 4차(10/12): 「다운로드 단추가 너무 오른쪽 · 가독성/사용성이 떨어진다」 — 아이콘만 있는 회색 선 ⬇(34px)가 줄 맨 끝, 제목에서 1,000px 넘게
 *   떨어져 있었고 사이에 장면 그림이 시선을 먼저 잡았다 → 글자 붙은 회색 단추 .sx-dl [⬇ 받기]를 길이 바로 옆으로(▶ · 이름 · 파형 · 길이 · 받기 = 소리 칸들).
 *   떠 있는 창에도 [받기](.sx-float-dl) · 로그인 전 받기 = 안내 한 줄(.sx-need — 2026-10-12 「다운로드는 회원만」).
 * ⚠️ 사이트 규칙과 다른 점(ElevenLabs 모양 그대로 — 운영자가 고른 화면): 둥근 ▶ 단추 · 분류 그림 칸 아래 어둠 그라디언트.
 * 라이브 테마 토큰만 쓴다(v3 이름 금지). !important 없음.
 */

.sx-loading { margin: 40px 0; color: var(--gray-500); font-size: 14px; }

/* ── 왼쪽 메뉴 — 「SFX 라이브러리」 아래 분류(AI 강의 분류와 같은 모양 — css/ai-lectures.css 의 같은 규칙을 이 화면에도) ── */
.aih .aih-nav a.is-open { color: var(--aih-text); }
.aih-subnav { display: grid; margin: 2px 0 6px; }
.aih .aih-subnav a { height: 32px; padding-left: 38px; font-size: 13px; }
.aih .aih-subnav a.is-on { color: var(--aih-text); font-weight: 600; }
@media (min-width: 1025px) {
	body.oppadu-sn .aih-nav .aih-subnav a { padding: 5px 12px 5px 46px; font-size: 14px; line-height: 1.7; }
}

/* ── 공통 ── */
.sx { --sx-line: var(--gray-200); padding-top: 22px; color: var(--t-body); font-size: 14px; line-height: 1.5; }
.sx button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sx ul { margin: 0; padding: 0; list-style: none; }
.sx h2, .sx p { margin: 0; }
.sx img { display: block; max-width: none; }
.sx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* [⬇ 받기] — 회색 칸 + 글자(색 면은 줄마다라 브랜드 초록을 쓰지 않는다 — 943줄이 초록 단추로 덮이면 목록이 시끄럽다) */
.sx .sx-dl { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 12px 0 10px; border-radius: var(--radius-md); background: var(--gray-100); color: var(--t-main); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sx .sx-dl:hover, .sx .sx-dl:focus-visible { background: var(--gray-200); color: var(--t-main); }
.sx-dl svg { width: 16px; height: 16px; }

/* ── 분류 그림 칸 줄(ElevenLabs) ── */
.sx-tiles-w { position: relative; margin: 0 0 6px; }
.sx-tiles { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.sx-tiles::-webkit-scrollbar { display: none; }
.sx .sx-tile { position: relative; flex: none; width: 132px; height: 132px; overflow: hidden; border-radius: 10px; background: var(--gray-200); }
.sx-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.sx-tile:hover img { transform: scale(1.04); }
.sx-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%); }
.sx-tile span { position: absolute; z-index: 1; right: 10px; bottom: 9px; left: 10px; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; }
.sx .sx-next { position: absolute; top: 50%; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--surface-white); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); color: var(--t-main); }

/* ── 분류 한 칸 머리 — 분류 영상(320px) + 이름·설명·숫자 ── */
.sx .sx-back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 12px; color: var(--gray-500); font-size: 13px; }
.sx .sx-back:hover { color: var(--t-main); }
.sx-hero { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: center; margin: 0 0 4px; }
.sx-hero-v { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 10px; background: var(--gray-200); }
.sx-hero-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-hero-k { color: var(--gray-500); font-size: 13px; }
.sx .sx-hero-t h2 { margin-top: 2px; color: var(--t-main); font-size: 30px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.sx .sx-hero-d { margin-top: 8px; color: var(--t-body); font-size: 15px; line-height: 1.6; word-break: keep-all; }
.sx .sx-hero-n { margin-top: 6px; color: var(--gray-500); font-size: 13px; font-variant-numeric: tabular-nums; word-break: keep-all; }

/* ── 거르기·찾기 줄(Artlist) ── */
.sx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 52px; margin: 18px 0 0; border-bottom: 1px solid var(--sx-line); }
.sx-q { display: flex; align-items: center; gap: 8px; width: 300px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--gray-100); color: var(--gray-500); cursor: text; }
.sx-q:focus-within { background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-400); }
.sx-q svg { flex: none; }
.sx .sx-q input[type="search"] {
	flex: 1; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
	background: transparent; box-shadow: none; outline: none; color: var(--t-main); font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none;
}
.sx .sx-q input[type="search"]::placeholder { color: var(--gray-500); opacity: 1; }
.sx-sel { display: block; height: 36px; }
.sx .sx-sel select {
	height: 100%; margin: 0; padding: 0 24px 0 0; border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
	color: var(--t-main); font: inherit; font-size: 15px; cursor: pointer; -webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23727272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 2px center;
}
.sx-sel--end { margin-left: auto; }
/* 펼친 목록 — 브라우저가 그리는 목록(윈도 회색 칸)은 CSS 로 못 고친다. appearance: base-select 를 아는 브라우저(크롬·엣지 135+)만
   흰 카드 + 넉넉한 줄 + 고른 줄은 굵게·오른쪽 체크로. 모르는 브라우저는 지금처럼 기본 목록(@supports 밖은 그대로) */
@supports (appearance: base-select) {
	.sx .sx-sel select { appearance: base-select; display: inline-flex; align-items: center; min-height: 0; }
	.sx .sx-sel select::picker-icon { display: none; }
	.sx .sx-sel select::picker(select) {
		appearance: base-select; min-width: 200px; margin-top: 6px; padding: 6px; border: 0; border-radius: 8px;
		background: var(--surface-white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12);
	}
	.sx .sx-sel option { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-md); background: transparent; color: var(--t-body); font-size: 14px; cursor: pointer; }
	.sx .sx-sel option:hover, .sx .sx-sel option:focus-visible { background: var(--gray-100); color: var(--t-main); outline: 0; }
	.sx .sx-sel option:checked { color: var(--t-main); font-weight: 600; }
	.sx .sx-sel option::checkmark { order: 1; margin-left: auto; color: var(--brand-action); }
}

/* ── 표(ElevenLabs) — ▶ · 이름 · 파형 · 길이 · 받기 · 찾는 말 · 쓰인 장면 ── */
.sx-thead, .sx-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 132px 52px 76px minmax(0, 250px) 112px; gap: 14px; align-items: center; }
.sx-thead { padding: 14px 0 10px; border-bottom: 1px solid var(--sx-line); color: var(--gray-500); font-size: 13px; }
.sx-thead b { color: var(--t-main); font-weight: 600; }
.sx-thead span:nth-child(4) { text-align: right; }
.sx-row { min-height: 84px; padding: 10px 0; border-bottom: 1px solid var(--sx-line); }
.sx .sx-play { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); color: var(--t-main); }
.sx .sx-play:hover { background: var(--gray-200); }
.sx-play .sx-i-stop, .sx-row.is-on .sx-play .sx-i-play { display: none; }
.sx-row.is-on .sx-play .sx-i-stop { display: block; }
.sx-main { min-width: 0; }
.sx-title { display: block; overflow: hidden; color: var(--t-main); font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sx-sub { display: block; overflow: hidden; color: var(--gray-500); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sx-sub span[aria-hidden] { margin: 0 4px; }
.sx-src { color: inherit; text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 2px; }
.sx-src:hover, .sx-src:focus-visible { color: var(--primary); text-decoration-color: currentColor; }
.sx-wv { position: relative; min-width: 0; height: 28px; cursor: pointer; }
.sx-wv svg { display: block; width: 100%; height: 100%; fill: var(--gray-300); }
.sx-wv-on { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.sx-wv .sx-wv-on svg { fill: var(--t-main); }
.sx-dur { color: var(--gray-500); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
/* 찾는 말 — 두 줄까지(넘치는 칩은 가린다). 누르면 그 말로 찾기 */
.sx-tags { display: flex; flex-wrap: wrap; gap: 4px; max-height: 52px; overflow: hidden; }
.sx .sx-tag { height: 24px; padding: 0 8px; border-radius: var(--radius-md); background: var(--gray-100); color: var(--gray-600); font-size: 12px; line-height: 24px; white-space: nowrap; }
.sx .sx-tag:hover, .sx .sx-tag:focus-visible { background: var(--gray-200); color: var(--t-main); }
/* 쓰인 장면 — 한 컷. 재생 중이면 테두리 + 막대 표시(영상은 크게 보는 자리에) */
.sx .sx-scene { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--gray-200); }
.sx-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-scene-on { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #fff; }
.sx-row.is-on .sx-scene-on { display: flex; }
.sx-row.is-on .sx-scene { box-shadow: 0 0 0 2px var(--t-main); }
.sx-sen { height: 1px; }
.sx .sx-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; color: var(--gray-600); font-size: 14px; font-weight: 600; }
.sx .sx-more:hover { background: var(--gray-50); color: var(--t-main); }
.sx-empty { padding: 40px 0; color: var(--gray-500); text-align: center; }
.sx .sx-note { margin-top: 20px; color: var(--gray-500); font-size: 12.5px; line-height: 1.6; word-break: keep-all; }

/* ── ① 떠 있는 미리보기(TikTok Floating Player) — 화면 오른쪽 아래, 목록을 내려도 따라온다 ── */
.sx-float {
	position: fixed; z-index: 90; right: 24px; bottom: 24px; width: 420px; max-width: calc(100vw - 32px); overflow: hidden;
	border-radius: 12px; background: #111; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); color: #fff;
}
.sx-float[hidden] { display: none; }
.sx-float-v { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.sx-float-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-float-b { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; }
.sx-float-t { flex: 1; min-width: 0; }
.sx-float-t b { display: block; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sx-float-t span { display: block; overflow: hidden; color: #a8a8a8; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.sx-float .sx-float-dl { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sx-float .sx-float-dl:hover, .sx-float .sx-float-dl:focus-visible { background: rgba(255, 255, 255, 0.24); color: #fff; }
.sx-float-dl svg { width: 16px; height: 16px; }
.sx-float .sx-float-x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: #cfcfcf; cursor: pointer; }
.sx-float .sx-float-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sx-float-p { height: 3px; background: rgba(255, 255, 255, 0.18); }
.sx-float-p i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: #fff; }

/* ── 로그인 전 받기 → 안내 한 줄(아래 가운데 · 6초 뒤 닫힘 — js/sfx.js askLogin) ── */
.sx-need {
	position: fixed; z-index: 100; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%;
	display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 8px 10px 16px;
	border-radius: 8px; background: var(--gray-900); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); color: #fff; font-size: 14px; line-height: 1.45;
	transform: translateX(-50%); word-break: keep-all;
}
.sx-need[hidden] { display: none; }
.sx-need a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-md); background: var(--brand-action); color: var(--brand-on-action); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sx-need a:hover { background: var(--brand-hover); color: var(--brand-on-action); }
.sx-need button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: #cfcfcf; cursor: pointer; }
.sx-need button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── 좁은 화면 ── */
@media (max-width: 1180px) {
	.sx-thead, .sx-row { grid-template-columns: 48px minmax(0, 1fr) 110px 48px 72px minmax(0, 190px) 104px; gap: 12px; }
}
@media (max-width: 900px) {
	.sx-hero { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
	.sx .sx-hero-t h2 { font-size: 26px; }
}
@media (max-width: 760px) {
	.sx-thead { display: none; }
	.sx-row { grid-template-columns: auto minmax(0, 1fr) 34px 96px; gap: 10px; min-height: 68px; }
	.sx .sx-dl { width: 34px; height: 34px; padding: 0; }
	.sx-dl span { display: none; }
	.sx-row .sx-wv, .sx-row .sx-dur, .sx-row .sx-tags { display: none; }
	.sx .sx-tile { width: 108px; height: 108px; }
	.sx .sx-next { display: none; }
	.sx-q { width: 100%; }
	.sx-bar { gap: 0 16px; padding-bottom: 6px; }
	.sx-sel--end { margin-left: 0; }
	.sx-hero { grid-template-columns: 136px minmax(0, 1fr); gap: 14px; }
	.sx-hero-k { display: none; }
	.sx .sx-hero-t h2 { margin-top: 0; font-size: 21px; }
	.sx .sx-hero-d { margin-top: 4px; font-size: 13px; line-height: 1.5; }
	.sx .sx-hero-n { margin-top: 4px; font-size: 12px; }
	.sx-float { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 12px; width: auto; max-width: none; }
	.sx-need { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; } /* 폰은 떠 있는 창이 아래를 차지한다 */
}
@media (prefers-reduced-motion: reduce) {
	.sx-tiles { scroll-behavior: auto; }
	.sx-tile img { transition: none; }
}