/**
 * 크리에이티브 슬라이드 스타일 (/tools/slide-styles/) — 라이브 테마 토큰만 쓴다(v3 토큰 이름 금지).
 *
 * 뼈대 = 파워포인트 「여러 슬라이드 보기」(목록) + 「발표자 보기」(상세 창).
 * 화면의 색은 슬라이드 그림이 다 가져간다 — 틀은 흰 바탕·무채 회색·브랜드 초록(버튼·선택) 하나로 조용히 둔다.
 *
 * ⚠️ 테마에 전역 리셋이 없다 — box-sizing 과 button 여백을 여기서 직접 건다.
 * ⚠️ 테마(GeneratePress)가 button·h2·ol 요소에 거는 규칙이 우리 뒤에서 이긴다 → 클래스에 빠짐없이 적는다.
 * ⚠️ 카드에 var(--radius-lg)(16px) 금지 — 8px 리터럴. 버튼·칩은 var(--radius-md). 창은 12px.
 * ⚠️ 번호 칸·이전/다음 단추도 완전 원형 금지(아바타·점·스위치·스피너 전용).
 */

.sls-page .otl-body { background: var(--surface-white); }
/* 머리 설명(도구 셸 밴드, 폭 760px)은 두 줄이 된다 — 낱말 중간에서 끊기지 않게(9/30 「스/타일만」). 셸 공용 규칙은 건드리지 않는다. */
.sls-page .otl-band-desc { word-break: keep-all; }

.sls-app {
	--sls-line: var(--gray-200);
	--sls-line-strong: var(--gray-300);
	--sls-top: var(--otl-bar-h, 0px);
	--sls-shadow: 0 1px 2px rgba(24, 24, 24, 0.06), 0 6px 18px rgba(24, 24, 24, 0.08);
	--sls-shadow-hover: 0 2px 4px rgba(24, 24, 24, 0.08), 0 12px 28px rgba(24, 24, 24, 0.14);
	/* 좌우 거터는 도구 밴드와 같은 한 벌: 30 → 24 → 20 (--px 는 좁은 화면에서 밴드와 어긋난다) */
	--sls-gutter: 30px;
	--sls-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--max-w);
	min-width: 0;
	margin: 0 auto;
	padding: var(--space-md) var(--sls-gutter) var(--space-3xl);
	color: var(--t-body);
	font-size: var(--font-base);
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.sls-app *, .sls-app *::before, .sls-app *::after { box-sizing: border-box; }
/* hidden 이 display 를 선언한 클래스를 이기게 — 그런 클래스가 생기면 여기에 같이 적는다. */
.sls-app [hidden],
.sls-app .sls-card[hidden],
.sls-app .sls-toast[hidden] { display: none; }
/* 나눠 불러오기(2026-10-09) — 아직 안 꺼낸 카드. html.sls-paged 는 템플릿이 <head> 한 줄 스크립트로 붙인다(스크립트가 꺼진 화면은 다 보인다).
   목록 끝 표시(#sls-more)가 화면 아래에 닿으면 js/app.js 가 줄 단위로 꺼낸다. 1px: 넓이가 0 이면 브라우저마다 「보임」 판정이 갈린다. */
.sls-paged .sls-app .sls-card.is-later { display: none; }
.sls-app .sls-more { height: 1px; }
body.admin-bar .sls-app { --sls-top: calc(var(--otl-bar-h, 0px) + 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .sls-app { --sls-top: var(--otl-bar-h, 0px); }
}

/* ── 테마 요소 규칙 무력화 ─────────────────────────────── */
.sls-app button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-align: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* :where 로 특이도를 0,2,0 에 맞춘다 — 테마의 button:hover/:focus(0,1,1)는 이기고,
 * 뒤에 오는 단추 클래스 규칙(.sls-app .sls-v-nav 등 0,2,0)에는 순서로 진다. 초점 받은 단추가 바탕을 잃지 않게. */
.sls-app :where(button):hover, .sls-app :where(button):focus { background: none; color: inherit; }
.sls-app :where(h2, h3, p, ol, ul) { margin: 0; padding: 0; }
.sls-app :where(ol, ul) { list-style: none; }
.sls-app :where(a) { text-decoration: none; }
.sls-app :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sls-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.sls-notice { padding: var(--space-xl) 0; color: var(--t-muted); text-align: center; }

/* ── 단추 ─────────────────────────────────────────────── */
.sls-app .sls-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--sls-line-strong);
	border-radius: var(--radius-md);
	background: var(--surface-white);
	color: var(--t-main);
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}
.sls-app .sls-btn:hover, .sls-app .sls-btn:focus { background: var(--gray-50); color: var(--t-main); }
.sls-app .sls-btn--primary { border-color: var(--brand-action); background: var(--brand-action); color: var(--brand-on-action); }
.sls-app .sls-btn--primary:hover,
.sls-app .sls-btn--primary:focus { border-color: var(--brand-hover); background: var(--brand-hover); color: var(--brand-on-action); }
.sls-app .sls-btn svg { flex: none; }

/* ── 거르기 막대 (스크롤해도 위에 붙는다) ─────────────────── */
.sls-bar {
	position: sticky;
	top: var(--sls-top);
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-nm) var(--space-lg);
	margin: 0 0 var(--space-lg);
	padding: var(--space-nm) 0;
	border-bottom: 1px solid var(--sls-line);
	background: var(--surface-white);
}
.sls-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}
.sls-app .sls-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	flex: none;
	padding: 6px 12px;
	border-radius: var(--radius-md);
	color: var(--gray-600);
	font-size: var(--font-sm);
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}
.sls-app .sls-chip:hover { background: var(--gray-100); color: var(--t-main); }
.sls-app .sls-chip[aria-pressed="true"] { background: var(--sidenav-active-bg); color: var(--t-main); font-weight: 700; }
.sls-chip-n {
	color: var(--gray-500);
	font-size: var(--font-xs);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.sls-bar-end { display: flex; align-items: center; gap: var(--space-nm); flex: none; }

/* 정렬 드롭다운 — [역삼각형 햄버거 아이콘 + 지금 정렬] 단추 + 메뉴. 고른 항목은 체크·굵기로(색 면 없음).
 * 메뉴는 그림자만(테두리와 겹치지 않는다) · 단추 왼쪽 끝에 맞춘다(휴대폰에서 단추가 왼쪽 끝에 와도 화면 안에 남게). */
.sls-sort { position: relative; }
.sls-app .sls-sort-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 10px;
	border-radius: var(--radius-md);
	color: var(--t-main);
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.sls-app .sls-sort-btn svg { flex: none; color: var(--gray-600); }
.sls-app .sls-sort-btn:hover,
.sls-app .sls-sort-btn[aria-expanded="true"] { background: var(--gray-100); color: var(--t-main); }
.sls-app .sls-sort-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 2;
	min-width: 136px;
	padding: 4px;
	border-radius: 8px;
	background: var(--surface-white);
	box-shadow: var(--sls-shadow-hover);
}
.sls-app .sls-sort-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	padding: 6px 12px 6px 8px;
	border-radius: var(--radius-sm);
	color: var(--t-body);
	font-size: var(--font-sm);
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	white-space: nowrap;
}
.sls-app .sls-sort-opt svg { flex: none; visibility: hidden; }
.sls-app .sls-sort-opt:hover { background: var(--gray-50); color: var(--t-main); }
.sls-app .sls-sort-opt:focus-visible { outline-offset: -2px; }
.sls-app .sls-sort-opt[aria-checked="true"] { color: var(--t-main); font-weight: 700; }
.sls-app .sls-sort-opt[aria-checked="true"] svg { visibility: visible; color: var(--brand-action); }

/* 표지·본문 — 목록 카드를 한꺼번에 바꿔 보는 스위치 */
.sls-seg {
	display: inline-flex;
	padding: 2px;
	border: 1px solid var(--sls-line-strong);
	border-radius: var(--radius-md);
	background: var(--surface-white);
}
.sls-app .sls-seg-btn {
	min-height: 30px;
	padding: 4px 14px;
	border-radius: var(--radius-sm);
	color: var(--gray-600);
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.sls-app .sls-seg-btn:hover { background: var(--gray-100); color: var(--t-main); }
.sls-app .sls-seg-btn[aria-pressed="true"],
.sls-app .sls-seg-btn[aria-pressed="true"]:hover { background: var(--brand-action); color: var(--brand-on-action); }

/* ── 목록 = 여러 슬라이드 보기 ─────────────────────────── */
.sls-app .sls-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sls-card { position: relative; min-width: 0; margin: 0; padding: 0; }
.sls-app .sls-shot {
	position: relative;
	display: block;
	aspect-ratio: 1376 / 768;
	overflow: hidden;
	border-radius: 8px;
	background: var(--gray-100);
	box-shadow: var(--sls-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sls-app .sls-shot:focus-visible { outline-offset: 3px; }
.sls-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.sls-img--b { opacity: 0; transition: opacity 0.2s ease; }
.sls-app[data-view="body"] .sls-img--b { opacity: 1; }
@media (hover: hover) {
	.sls-app .sls-shot:hover { transform: translateY(-3px); box-shadow: var(--sls-shadow-hover); }
	/* 마우스를 올리면 다른 장을 보여 준다(표지 보기 → 본문, 본문 보기 → 표지). */
	.sls-shot:hover .sls-img--b { opacity: 1; }
	.sls-app[data-view="body"] .sls-shot:hover .sls-img--b { opacity: 0; }
}

.sls-meta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-nm);
	margin-top: 14px;
}
.sls-no {
	min-width: 20px;
	padding-top: 1px;
	color: var(--gray-500);
	font-size: var(--font-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}
.sls-app .sls-name {
	margin: 0;
	color: var(--t-main);
	font-size: var(--font-base);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
}
.sls-sub { color: var(--gray-500); font-size: var(--font-xs); font-weight: 500; letter-spacing: 0; }
.sls-app .sls-use { margin-top: 2px; color: var(--t-muted); font-size: var(--font-2sm); line-height: 1.5; }
.sls-app .sls-copy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 30px;
	padding: 4px 10px;
	border: 1px solid var(--sls-line);
	border-radius: var(--radius-md);
	background: var(--surface-white);
	color: var(--gray-600);
	font-size: var(--font-xs);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}
.sls-app .sls-copy:hover, .sls-app .sls-copy:focus { border-color: var(--sls-line-strong); background: var(--gray-50); color: var(--t-main); }
.sls-app .sls-copy.is-done,
.sls-app .sls-copy.is-done:hover { border-color: var(--color-success); color: var(--color-success-text); }

.sls-empty { padding: var(--space-2xl) 0; color: var(--t-muted); text-align: center; }

/* ── 상세 창 = 발표자 보기 ─────────────────────────────── */
.sls-v {
	/* 창 양옆에 화살표 자리를 비운다: 화면 끝 · 화살표 · 창 사이가 --sls-v-gap 씩.
	 * 창도 화살표도 기준이 화면(fixed)이라 100% 가 같은 너비다 — 화살표 자리는 이 너비에서 거꾸로 센다. */
	--sls-v-arrow: 48px;
	--sls-v-gap: 16px;
	--sls-v-w: min(1240px, calc(100% - 2 * var(--sls-v-arrow) - 4 * var(--sls-v-gap)));
	width: var(--sls-v-w);
	max-width: none;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	background: var(--surface-white);
	box-shadow: var(--shadow-lg);
	color: var(--t-body);
}
.sls-v::backdrop { background: rgba(24, 24, 24, 0.72); }
/* 창 양옆 화살표 = ←/→ 키(한 장씩, 끝 장 다음은 이웃 스타일). 가림막 위에 떠야 해서 fixed —
 * fixed 는 기준이 화면이라 창의 overflow: hidden 에 잘리지 않는다. */
.sls-app .sls-v-arrow {
	position: fixed;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sls-v-arrow);
	height: var(--sls-v-arrow);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.14);
	color: var(--text-white);
	transform: translateY(-50%);
	transition: background-color 0.15s ease;
}
.sls-app .sls-v-arrow:hover { background: rgba(255, 255, 255, 0.28); color: var(--text-white); }
.sls-app .sls-v-arrow:focus-visible { outline-color: var(--text-white); }
.sls-v-arrow--prev { left: calc((100% - var(--sls-v-w)) / 2 - var(--sls-v-gap) - var(--sls-v-arrow)); }
.sls-v-arrow--next { right: calc((100% - var(--sls-v-w)) / 2 - var(--sls-v-gap) - var(--sls-v-arrow)); }
/* 높이는 고정 — 스타일마다 글 길이가 달라도 창이 늘었다 줄었다 하지 않는다. 남는 높이는 프롬프트 칸이 갖고, 넘치면 그 칸만 스크롤.
 * 600px 은 슬라이드 + 예시 줄이 가장 클 때(창 너비 1240px, 약 584px)보다 조금 크게 잡은 값이다. */
.sls-v-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	grid-template-rows: minmax(0, 1fr);
	height: min(600px, calc(100dvh - 48px));
}
.sls-v-stage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: var(--space-lg);
	background: var(--gray-100);
}
.sls-v-frame {
	position: relative;
	width: min(100%, calc((100dvh - 170px) * 1.7917));
	margin: 0 auto;
	aspect-ratio: 1376 / 768;
	overflow: hidden;
	border-radius: 8px;
	background: var(--gray-200);
	box-shadow: var(--sls-shadow);
}
.sls-v-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}
.sls-app .sls-v-nav,
.sls-app .sls-v-exitfull {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--shadow-sm);
	color: var(--t-main);
	transition: opacity 0.15s ease;
}
.sls-app .sls-v-nav:hover, .sls-app .sls-v-exitfull:hover { background: var(--surface-white); color: var(--t-main); }
.sls-v-nav { top: 50%; transform: translateY(-50%); }
.sls-v-nav--prev { left: 12px; }
.sls-v-nav--next { right: 12px; }
/* 그림 위 화살표는 창 양옆 화살표가 없는 곳에서만 쓴다 — 전체 화면 · 1024px 이하. 둘이 같은 일을 한다. */
.sls-app .sls-v-nav { display: none; }
.sls-app .sls-v-exitfull { top: 12px; right: 12px; display: none; }
@media (hover: hover) {
	.sls-v-nav { opacity: 0; }
	.sls-v-frame:hover .sls-v-nav,
	.sls-v-nav:focus-visible { opacity: 1; }
}
/* 전체 화면 = 슬라이드 쇼. 검은 바탕에 그림만, ←/→ 로 넘긴다. */
.sls-v-frame:fullscreen {
	width: 100vw;
	height: 100vh;
	aspect-ratio: auto;
	border-radius: 0;
	background: #000;
	box-shadow: none;
}
.sls-app .sls-v-frame:fullscreen .sls-v-nav,
.sls-app .sls-v-frame:fullscreen .sls-v-exitfull { display: inline-flex; }
.sls-v-frame:fullscreen .sls-v-nav { opacity: 1; }
/* 전체 화면에서만 보이는 꼬리표 — 슬라이드 끝에서 다음 스타일로 넘어가도 지금 무엇을 보는지 알 수 있게. */
.sls-v-cap { display: none; }
.sls-app .sls-v-frame:fullscreen .sls-v-cap {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: block;
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--radius-md);
	background: rgba(24, 24, 24, 0.72);
	color: var(--text-white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.sls-v-under {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: min(100%, calc((100dvh - 170px) * 1.7917));
	margin: 14px auto 0;
}
/* 그 스타일의 예시 줄 — 칸이 모자라면 장마다 줄어들고(최소 56px), 그래도 넘치면 옆으로 민다. */
.sls-v-strip {
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	min-width: 0;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.sls-app .sls-v-th {
	flex: 1 1 0;
	min-width: 56px;
	max-width: 96px;
	aspect-ratio: 1376 / 768;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	background: var(--gray-200);
	opacity: 0.7;
	transition: opacity 0.15s ease;
}
.sls-app .sls-v-th:hover { background: var(--gray-200); opacity: 1; }
.sls-app .sls-v-th[aria-current="true"] { border-color: var(--brand-action); opacity: 1; }
.sls-v-th img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.sls-v-under-end { display: flex; flex: none; align-items: center; gap: 10px; }
.sls-v-pos { color: var(--t-muted); font-size: var(--font-2sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sls-app .sls-v-fullbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sls-line-strong);
	border-radius: var(--radius-md);
	background: var(--surface-white);
	color: var(--t-main);
}
.sls-app .sls-v-fullbtn:hover { background: var(--gray-50); color: var(--t-main); }

.sls-v-side {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px var(--space-lg) var(--space-lg);
	overflow-y: auto;
}
.sls-v-top { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 10px -8px; }
/* 스타일만 건너뛰는 단추 — 슬라이드 넘기기(←/→)와 따로 둔다. */
.sls-v-stylenav { display: inline-flex; align-items: center; gap: 2px; }
.sls-app .sls-v-snav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-md);
	color: var(--gray-600);
}
.sls-app .sls-v-snav:hover { background: var(--gray-100); color: var(--t-main); }
.sls-v-count { min-width: 56px; color: var(--t-muted); font-size: var(--font-2sm); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.sls-app .sls-v-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	color: var(--gray-600);
}
.sls-app .sls-v-close:hover { background: var(--gray-100); color: var(--t-main); }
.sls-app .sls-v-family { color: var(--t-muted); font-size: var(--font-2sm); font-weight: 500; }
.sls-app .sls-v-name {
	margin: 2px 0 var(--space-nm);
	color: var(--t-main);
	font-size: var(--font-2xl);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
}
.sls-v-name .sls-sub { margin-left: 4px; font-size: var(--font-sm); }
.sls-app .sls-v-look { font-size: var(--font-md); line-height: 1.7; }
.sls-app .sls-v-use { margin-top: var(--space-md); font-size: var(--font-md); line-height: 1.6; }
.sls-app .sls-v-k {
	display: block;
	margin-bottom: 4px;
	color: var(--gray-500);
	font-size: var(--font-xs);
	font-weight: 700;
	line-height: 1.4;
}
/* 프롬프트 칸이 남는 높이를 다 갖는다 → 복사 단추는 늘 창 아래 같은 자리.
 * 낮은 화면에서 128px 보다 줄어야 하면 오른쪽 칸 전체가 스크롤한다. */
.sls-v-prompt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 128px;
	margin-top: var(--space-lg);
}
.sls-app .sls-v-text {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 12px 14px;
	border: 1px solid var(--sls-line);
	border-radius: 8px;
	background: var(--gray-50);
	color: var(--t-main);
	font-family: var(--sls-mono);
	font-size: 13px;
	line-height: 1.65;
	word-break: normal;
	overflow-wrap: anywhere;
}
/* 손님 — 프롬프트 칸 자리에 같은 틀의 잠긴 칸(보기·복사는 회원만, 2026-10-02). 글자는 서버가 아예 보내지 않는다. */
.sls-app .sls-v-locked {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 20px;
	border: 1px solid var(--sls-line);
	border-radius: 8px;
	background: var(--gray-50);
	color: var(--t-body);
	font-size: var(--font-sm);
	line-height: 1.6;
	text-align: center;
}
.sls-app .sls-v-locked svg { flex: none; color: var(--gray-500); }
.sls-app .sls-v-copy { flex: none; width: 100%; min-height: 48px; margin-top: var(--space-nm); font-size: var(--font-base); font-weight: 700; }
.sls-app .sls-v-copy.is-done,
.sls-app .sls-v-copy.is-done:hover { border-color: var(--brand-hover); background: var(--brand-hover); }

/* ── 알림 ─────────────────────────────────────────────── */
.sls-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--t-main);
	box-shadow: var(--shadow-md);
	color: var(--text-white);
	font-size: var(--font-sm);
	font-weight: 500;
	line-height: 1.45;
	transform: translateX(-50%);
}
.sls-toast svg { flex: none; color: var(--brand-bright); }

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sls-app { --sls-gutter: 24px; }
	.sls-app .sls-grid { gap: 32px var(--space-md); }
	.sls-v-box { grid-template-columns: minmax(0, 1fr) 320px; }
	/* 창 양옆에 화살표 자리를 비우면 슬라이드가 너무 작아진다 — 그림 위 화살표로 바꾼다 */
	.sls-v { --sls-v-w: calc(100% - 48px); }
	.sls-app .sls-v-arrow { display: none; }
	.sls-app .sls-v-nav { display: inline-flex; }
}
@media (max-width: 768px) {
	.sls-app { --sls-gutter: 20px; }
}
@media (max-width: 860px) {
	.sls-app .sls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* 상세 창은 화면을 꽉 채우고 위아래로 흐른다 */
	.sls-v {
		width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
	.sls-v-box {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-height: none;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.sls-v-stage { flex: none; padding: var(--space-md); }
	.sls-v-frame, .sls-v-under { width: 100%; }
	.sls-v-side { flex: none; overflow: visible; padding: var(--space-md) 20px calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)); }
	/* 휴대폰은 창 전체가 위아래로 흐르므로 프롬프트를 다 펼친다(칸 안 스크롤은 손가락이 갇힌다) */
	.sls-app .sls-v-text { overflow-y: visible; }
	.sls-app .sls-v-name { font-size: var(--font-xl); }
	/* 창이 화면을 꽉 채우므로 닫기는 그림 위 오른쪽 위에 늘 떠 있게 한다 */
	.sls-app .sls-v-close {
		position: fixed;
		top: calc(8px + env(safe-area-inset-top, 0px));
		right: 8px;
		z-index: 2;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: var(--shadow-sm);
		color: var(--t-main);
	}
	.sls-app .sls-v-close:hover { background: var(--surface-white); }
}
@media (max-width: 600px) {
	.sls-bar { gap: var(--space-sm); margin-bottom: var(--space-md); }
	.sls-chips {
		flex-wrap: nowrap;
		width: calc(100% + var(--sls-gutter) * 2);
		margin: 0 calc(var(--sls-gutter) * -1);
		padding: 0 var(--sls-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sls-chips::-webkit-scrollbar { display: none; }
	.sls-bar-end { width: 100%; justify-content: space-between; }
	.sls-app .sls-grid { gap: 24px 12px; }
	.sls-meta { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
	.sls-no { display: none; }
	.sls-app .sls-name { font-size: var(--font-sm); }
	.sls-name .sls-sub, .sls-app .sls-use, .sls-app .sls-copy { display: none; }
	.sls-v-under .sls-v-fullbtn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sls-app .sls-shot,
	.sls-img--b,
	.sls-app .sls-btn,
	.sls-app .sls-v-nav,
	.sls-app .sls-v-arrow,
	.sls-app .sls-v-th { transition: none; }
	.sls-app .sls-shot:hover { transform: none; }
}