/**
 * 모션 스타일 갤러리 — 밝은 판(AI 활용 틀 안). 마크업 inc/motion-styles-light.php · 동작 js/light.js
 *
 * 목록은 슬라이드 갤러리 부품(tools/_slide-styles-assets/css/slide-styles.css + css/ai-hub.css .aihx 절)을 그대로 쓰고,
 *   여기서는 칸을 16:9 영상으로만 바꾼다(10/9 운영자 채용 「가」).
 * 상세는 지금(검은) 갤러리 상세의 뼈대를 밝게 옮겼다(같은 날 메모 「상세는 현재 페이지처럼 영상 좌측 | 설명 우측」):
 *   위 막대 · 왼쪽 영상 + 설명 · 오른쪽 탭(프롬프트 · 장면표 · 소리 큐). 넓은 화면은 두 칸이 따로 스크롤, 900px 아래는 한 줄로 쌓는다.
 * 빈칸 채우기는 위키 AI 프롬프트 상세(css/wiki-prompts-detail.css)와 같은 말투 — 「이름 알약 : 값」 줄(테두리 없는 값 칸) ·
 *   세부 설정 접기 · 채운 값은 초록 글자 + 밑줄(색 면 없음).
 * 라이브 테마 토큰만 쓴다(v3 이름 금지). 카드 8px · 버튼·칩 var(--radius-md) · 그라디언트·blur 없음 · 테두리와 그림자를 겹치지 않는다.
 * ⚠️ 상세 창은 .sls-app 안에 있어 그쪽 리셋(button·h2·p·ol)을 그대로 받는다. input·textarea·dl·mark·details 는 여기서 직접 건다.
 */

/* ── 목록: 칸 = 16:9 포스터 + 소리 없는 영상(화면에 든 칸만 재생 — 재생이 시작돼야 영상이 보인다) ──
 * 열 수 = 4 → 1280px 이하 3 → 1024px 이하 2(10/9 운영자 「영상을 조금 더 크게, 4열 · 3열도 좋다」). 슬라이드 갤러리(5열)와 같은 명시도 · 뒤 순서로 이긴다 */
.aihx .sls-app .msl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 14px; }
@media (max-width: 1280px) {
	.aihx .sls-app .msl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.aihx .sls-app .msl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
}
.msl-app .msl-shot { aspect-ratio: 16 / 9; background: var(--gray-200); }
.msl-tv {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.msl-card.is-live .msl-tv { opacity: 1; }
.msl-app .msl-auto svg { flex: none; color: var(--gray-600); }
.msl-app .msl-auto > span:not(.msl-auto-l) { display: inline-flex; }
.msl-app .msl-auto > span[hidden] { display: none; }

/* ── 상세 창 = 화면 전체(지금 갤러리 상세와 같은 뼈대) ── */
/* 창이 열린 동안 뒤 페이지 스크롤을 잠근다. ⚠️ 이름을 손님 잠금 상자(.msl-lock)와 나눈다 — 같은 이름이면 그 상자의
   가운데 정렬·여백·회색 바탕이 <html> 에 걸려 창 글자까지 가운데로 섰다(10/9 실측) */
html.msl-noscroll { overflow: hidden; }
.msl-d {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--surface-white);
	color: var(--t-body);
	font-size: var(--font-base);
	line-height: 1.6;
}
.msl-d[open] { display: flex; flex-direction: column; }
.msl-d::backdrop { background: rgba(24, 24, 24, 0.4); }
/* display 를 정한 칸은 [hidden] 을 따로 적는다(.sls-app [hidden] 과 명시도가 같아 뒤에 오는 이 파일 규칙이 이긴다) */
.msl-app .msl-btn > span[hidden],
.msl-app .msl-reset[hidden] { display: none; }

/* 위 막대 — 묶음 · n/50 · 이전/다음 · 소리 · 닫기 */
.msl-dtop {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 64px;
	padding: 0 16px 0 28px;
	border-bottom: 1px solid var(--gray-200);
}
.msl-app .msl-crumb {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
	margin: 0 auto 0 0;
	color: var(--gray-600);
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
}
.msl-count { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.msl-app .msl-ib {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-md);
	color: var(--t-main);
}
.msl-app .msl-ib:hover, .msl-app .msl-ib:focus-visible { background: var(--gray-100); color: var(--t-main); }
.msl-app .msl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: var(--radius-md);
	background: var(--aihx-seg, var(--gray-100));
	color: var(--t-main);
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
}
.msl-app .msl-btn:hover, .msl-app .msl-btn:focus-visible { background: var(--gray-200); color: var(--t-main); }
.msl-app .msl-btn > span { display: inline-flex; align-items: center; }
.msl-app .msl-btn svg { flex: none; }
.msl-app .msl-btn--primary,
.msl-app .msl-btn--primary:visited { background: var(--brand-action); color: var(--brand-on-action); }
.msl-app .msl-btn--primary:hover,
.msl-app .msl-btn--primary:focus-visible { background: var(--brand-hover); color: var(--brand-on-action); }
.msl-snd { margin-right: 4px; }

/* 몸통 — 왼쪽(영상 + 설명) | 오른쪽(탭). 두 칸이 따로 스크롤 */
.msl-dbody {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(420px, 40vw, 620px);
}
/* 영상 = 왼쪽 칸 폭 가득(10/9 운영자 「화살표 넣으려고 영상 작게 하지 말고 기존처럼 크게」) */
.msl-dmain { min-width: 0; min-height: 0; overflow-y: auto; padding: 28px; overscroll-behavior: contain; scrollbar-width: thin; }
.msl-vwrap { position: relative; }
.msl-dvid { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
.msl-dvid video { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; background: #000; }
/* 이전/다음 = 영상 위 양 끝, 영상 높이 가운데, 원형 바탕(10/9 운영자 「화면 좌우에 이동 버튼 · 위에 말고」 → 「영상은 크게, 그 위로 원형 배경에 화살표」).
 * ⚠️ 사이트 규칙(완전 원형은 아바타·점·스위치·스피너 전용)의 예외 — 운영자 결정. 오빠두 규칙으로 덮지 말 것 */
.msl-app .msl-arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--shadow-sm);
	color: var(--t-main);
	transform: translateY(-50%);
	transition: background-color 0.15s ease;
}
.msl-app .msl-arrow:hover, .msl-app .msl-arrow:focus-visible { background: var(--surface-white); color: var(--t-main); }
.msl-arrow--prev { left: 16px; }
.msl-arrow--next { right: 16px; }
.msl-dinfo { max-width: 780px; margin-top: 24px; }
.msl-app .msl-dmeta { display: flex; gap: 10px; color: var(--gray-500); font-size: 13px; line-height: 1.4; }
.msl-dno { color: var(--t-main); font-weight: 700; font-variant-numeric: tabular-nums; }
.msl-app .msl-dtitle { margin: 8px 0 0; color: var(--t-main); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.msl-app .msl-den { margin: 2px 0 0; color: var(--gray-500); font-size: 17px; line-height: 1.4; }
.msl-facts { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; }
.msl-facts > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
.msl-facts dt { margin: 0; padding-top: 2px; color: var(--gray-500); font-size: 13px; font-weight: 400; line-height: 1.6; }
.msl-facts dd { margin: 0; color: var(--text-primary); font-size: 15px; line-height: 1.75; }
.msl-facts b { color: var(--t-main); font-weight: 700; }

.msl-dside {
	--msl-pad: 28px;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	padding: 0 var(--msl-pad) 56px;
	border-left: 1px solid var(--gray-200);
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
/* 위에 붙는 탭 줄·「완성 프롬프트」 머리는 칸 좌우 여백까지 흰 바탕으로 덮는다(아래 상자 그림자가 옆으로 비치지 않게). 선은 여백 안쪽만 */
.msl-tabs {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	gap: 24px;
	margin: 0 calc(-1 * var(--msl-pad, 28px));
	padding: 0 var(--msl-pad, 28px);
	background: var(--surface-white);
}
.msl-tabs::after,
.msl-out-h::after { content: ""; position: absolute; right: var(--msl-pad, 28px); bottom: 0; left: var(--msl-pad, 28px); height: 1px; background: var(--gray-200); }
.msl-app .msl-tab {
	position: relative;
	height: 52px;
	color: var(--gray-500);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
}
.msl-app .msl-tab:hover { color: var(--t-main); }
.msl-app .msl-tab[aria-selected="true"] { color: var(--t-main); font-weight: 700; }
.msl-tab[aria-selected="true"]::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 2px; background: var(--t-main); }
.msl-app .msl-tab:focus-visible { outline-offset: -2px; }

/* ── 프롬프트 탭: 빈칸 상자 → 완성 프롬프트 ── */
.msl-app .msl-lead { margin: 20px 0 12px; color: var(--t-muted); font-size: 13.5px; line-height: 1.6; }
.msl-fill { padding: 10px 20px 18px; border-radius: 8px; background: var(--surface-white); box-shadow: var(--sls-shadow); }
.msl-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
.msl-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; padding: 6px 0; }
.msl-pill {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 3px 10px;
	border-radius: var(--radius-md);
	background: var(--gray-100);
	color: var(--gray-700);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}
.msl-row.is-opt .msl-pill { cursor: pointer; }
.msl-cb { width: 15px; height: 15px; margin: 0; accent-color: var(--brand-action); cursor: pointer; }
.msl-app .msl-in {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	box-shadow: none;
	color: var(--t-main);
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: none;
}
.msl-app .msl-in--ta { overflow-y: auto; scrollbar-width: thin; }
.msl-app .msl-in::placeholder { color: var(--gray-400); }
.msl-app .msl-in:hover { background: var(--gray-50); }
.msl-app .msl-in:focus { outline: 0; background: var(--surface-white); box-shadow: inset 0 0 0 1px var(--gray-300); }
/* 긴 문장 칸(로고·사운드트랙·음악 파일·렌더 — 기본값 80자 넘음)은 이름 아래로 내려 상자 폭을 다 쓴다 */
.msl-row.is-long { display: block; }
.msl-row.is-long .msl-pill { margin: 4px 0 2px; }
.msl-row.is-off .msl-in { color: var(--gray-400); background: transparent; }
.msl-row.is-off .msl-pill { color: var(--gray-500); }

.msl-more { margin-top: 6px; border-top: 1px solid var(--gray-200); }
.msl-more > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 46px;
	color: var(--t-main);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}
.msl-more > summary::-webkit-details-marker { display: none; }
.msl-more-l { display: inline-flex; align-items: center; gap: 6px; }
.msl-more-l svg { color: var(--gray-500); transition: transform 0.15s ease; }
.msl-more[open] .msl-more-l svg { transform: rotate(180deg); }
.msl-more-n { color: var(--gray-500); font-size: 12.5px; font-weight: 400; }
.msl-more > .msl-rows { padding-bottom: 6px; }

.msl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.msl-seg { display: inline-flex; margin-right: auto; padding: 3px; border-radius: 6px; background: var(--aihx-seg, var(--gray-100)); }
.msl-app .msl-seg button { height: 28px; padding: 0 12px; border-radius: 4px; color: var(--text-primary); font-size: 13px; font-weight: 400; line-height: 1; }
.msl-app .msl-seg button[aria-pressed="true"] { background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-300); color: var(--t-main); font-weight: 600; }
.msl-app .msl-reset {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 38px;
	padding: 0 10px;
	border-radius: var(--radius-md);
	color: var(--gray-600);
	font-size: 13px;
	font-weight: 500;
}
.msl-app .msl-reset:hover { background: var(--gray-100); color: var(--t-main); }
.msl-app .msl-copy { min-width: 148px; }
.msl-app .msl-note { margin: 10px 0 0; color: var(--color-success-text); font-size: 13px; line-height: 1.5; }
.msl-app .msl-note:empty { display: none; }

.msl-out { margin-top: 26px; }
.msl-out-h {
	position: sticky;
	top: 52px; /* 탭 줄 높이 */
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 calc(-1 * var(--msl-pad, 28px));
	padding: 12px var(--msl-pad, 28px);
	background: var(--surface-white);
}
.msl-app .msl-out-h h3 { margin: 0 auto 0 0; color: var(--t-main); font-size: 15px; font-weight: 700; line-height: 1.4; }
.msl-len { color: var(--gray-500); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msl-app .msl-mini {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 30px;
	padding: 0 10px;
	border-radius: var(--radius-md);
	background: var(--aihx-seg, var(--gray-100));
	color: var(--t-main);
	font-size: 12.5px;
	font-weight: 600;
}
.msl-app .msl-mini:hover { background: var(--gray-200); color: var(--t-main); }
.msl-doc { padding-top: 14px; color: var(--text-primary); font-size: 14px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.msl-ln { white-space: pre-wrap; }
.msl-ln--gap { height: 0.8em; }
.msl-ln--h { margin-top: 0.2em; color: var(--t-main); font-size: 15px; font-weight: 700; }
.msl-ln--li { position: relative; padding-left: 1.1em; }
.msl-ln--li::before { content: "–"; position: absolute; left: 0; color: var(--gray-400); }
.msl-doc b { color: var(--t-main); font-weight: 700; }
.msl-doc code { padding: 1px 4px; border-radius: 3px; background: var(--gray-100); font-family: var(--sls-mono); font-size: 0.92em; }
.msl-v {
	padding: 0;
	background: none;
	color: var(--primary);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.msl-lock { margin-top: 18px; padding: 24px 20px; border-radius: 8px; background: var(--gray-50); text-align: center; }
.msl-lock svg { color: var(--gray-500); }
.msl-app .msl-lock p { margin: 8px 0 16px; color: var(--text-primary); font-size: 14px; line-height: 1.6; }

/* ── 장면표 · 소리 큐 ── */
.msl-app .msl-pnote { margin: 20px 0 6px; color: var(--t-muted); font-size: 13px; line-height: 1.6; }
.msl-tl { margin: 0; padding: 0; list-style: none; }
.msl-tl > li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.msl-app .msl-t {
	align-self: start;
	justify-self: start;
	padding: 2px 8px;
	border-radius: var(--radius-md);
	background: var(--gray-100);
	color: var(--t-main);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	white-space: nowrap;
}
.msl-app button.msl-t:hover { background: var(--gray-200); color: var(--t-main); }
.msl-tl-d { color: var(--text-primary); font-size: 14px; line-height: 1.7; }
.msl-sub { margin-top: 4px; color: var(--t-muted); font-size: 13px; line-height: 1.6; }
.msl-sub b { margin-right: 6px; color: var(--gray-600); font-weight: 600; }
.msl-copy-ta { position: fixed; bottom: 16px; left: 16px; z-index: 5; width: min(560px, calc(100% - 32px)); height: 120px; font-size: 12px; }

/* ── 900px 아래: 한 줄로 쌓고 창 전체가 스크롤 ── */
@media (max-width: 899px) {
	.msl-dtop { height: 56px; padding: 0 6px 0 16px; }
	.msl-dbody { display: block; overflow-y: auto; overscroll-behavior: contain; }
	.msl-dmain { overflow: visible; padding: 0; }
	.msl-dvid { border-radius: 0; }
	.msl-app .msl-arrow { width: 40px; height: 40px; }
	.msl-arrow--prev { left: 10px; }
	.msl-arrow--next { right: 10px; }
	.msl-dinfo { margin: 0; padding: 18px 16px 6px; }
	.msl-app .msl-dtitle { font-size: 24px; }
	.msl-dside { --msl-pad: 16px; overflow: visible; border-left: 0; }
	.msl-rows { display: block; }
	.msl-row { display: block; padding: 8px 0 4px; }
	.msl-pill { margin: 0 0 4px; }
}
@media (max-width: 480px) {
	.msl-snd-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.msl-app .msl-snd { width: 38px; padding: 0; }
	.msl-app .msl-crumb { gap: 6px; font-size: 12.5px; }
	.msl-acts { gap: 6px; }
	.msl-app .msl-copy { flex: 1 1 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
	.msl-tv, .msl-more-l svg { transition: none; }
}