/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/* PC 새 틀(미리 보기) — 자료실 홈 · 2026-10-22 운영자 「자료실 전체 — 홈은 고른 시안대로」(inc/pc-frame-resources.php 머리 주석)
   → 2026-10-25 운영자 14판 「다, 셋다 권함으로 진행」 = 머리(같은 날 2차 — 목록 머리와 같은 경로 · 제목 · 한 줄 | 찾기 칸 400 × 44) · 갈래 카드 일곱(첫 줄 큰 칸 셋 · 둘째 줄 넷)
      · 광고 줄 · 새로 들어온 자료(카드 4열 · 여덟씩 「더 보기」). 10/22 의 회색 칸(세 갈래 지도) · 한 줄 목록 규칙은 걷었다(되살리려면 git 10/25 이전 판).
   카드 = 정본 7.4 틀 없는 그림 카드(16:9 · 8 · 제목 15 · 곁 줄 13 회색 500) · 갈래 카드 = 위 작은 줄(메뉴 이름 13 회색 500) + 제목(들어 있는 것 16 · 첫 줄 18)
   (개수 · 「새로 N편 · 최근 2주」 줄은 10/25 3차 운영자 「총 몇편, 최근 몇편 정보 지우고 간결하게」로 걷었다 · 한 줄 설명은 16판 「라」로 뺐다).
   새 틀 규칙(정본 v4 14.3-1): 모두 body.pcf-on 아래 + PC 폭(1025 이상). 옛 홈(.rsai-hd · .aihc)은 PC 폭에서 숨고, 폰 · 태블릿(~1024)은 새 홈이 숨는다.
   엑셀 서식 목록(/resources/forms/)의 새 카드 칸도 이 파일(6절 — 2026-10-22) · 목록 일곱 쪽 제목 줄 찾기 칸(13절) · 자료실 찾기 결과(14절 — 2026-10-25). */

@media (max-width: 1024px) {
	body.pcf-on .pcf-rs {
		display: none;
	}
}

@media (min-width: 1025px) {
	/* 옛 홈 — 새 홈 뒤의 머리 판 · 선반 */
	body.pcf-on #page .aih-main > .pcf-rs ~ .rsai-hd,
	body.pcf-on #page .aih-main > .pcf-rs ~ .aihc {
		display: none;
	}

	/* 새 홈 — 하위 메뉴 줄 아래 32(.aih 틀 첫 내용 자리 — css/pcf.css) = 경로 → 제목 · 한 줄 | 찾기 칸(10/25 2차 「자료실 홈도 다른 곳처럼」 —
	   목록 머리와 같은 마크업 .aihx-crumb · .rsai-lh 라 모양은 그 규칙 그대로 · 칸 자리 = 13절) */

	/* ── 갈래 카드 — 머리 아래 28(슬라이드 갤러리 「새로 들어온」 줄과 같다) · 첫 줄 큰 칸 셋(사이 24) · 둘째 줄 넷(위 36) ── */
	body.pcf-on #page .pcfrs-cats {
		margin-top: 28px;
	}

	body.pcf-on #page .pcfrs-cats-1,
	body.pcf-on #page .pcfrs-cats-2 {
		display: grid;
		gap: 24px;
	}

	body.pcf-on #page .pcfrs-cats-1 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.pcf-on #page .pcfrs-cats-2 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 36px;
	}

	body.pcf-on #page a.pcfrs-cat {
		display: flex;
		flex-direction: column;
		min-width: 0;
		color: inherit;
		text-decoration: none;
	}

	body.pcf-on #page a.pcfrs-cat:focus-visible {
		outline: 2px solid var(--gray-900);
		outline-offset: 4px;
		border-radius: 8px;
	}

	body.pcf-on #page .pcfrs-cat-th {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on #page .pcfrs-cat-th > img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 밝은 그림이 흰 바탕에 녹지 않게 아주 옅은 안쪽 선(아래 카드 .pcf-rs-th 와 같다) */
	body.pcf-on #page .pcfrs-cat-th::after {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gray-900) 7%, transparent);
		content: "";
		pointer-events: none;
	}

	/* 위 작은 줄 = 메뉴 이름 · 제목 = 들어 있는 것(10/25 16판 「라」) */
	body.pcf-on #page .pcfrs-cat-k {
		display: block;
		margin-top: 12px;
		color: var(--gray-500);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
	}

	body.pcf-on #page .pcfrs-cat-n {
		display: block;
		margin-top: 2px;
		color: var(--gray-900);
		font-size: 16px;
		font-weight: 600;
		line-height: 1.4;
		word-break: keep-all;
	}

	body.pcf-on #page a.pcfrs-cat.is-big .pcfrs-cat-n {
		font-size: 18px;
	}

	/* ── 광고 줄(resources_band) — 갈래 카드 아래 48 · 광고가 없으면 칸째 없다(그때 새로 들어온 자료가 카드 아래 56) ── */
	body.pcf-on #page .pcf-rs > .rsai-ad {
		margin: 48px 0 0;
	}

	/* ── 새로 들어온 자료 — 위 56 · 머리 = 제목 22 + 한 줄 14 회색 500(같은 줄) · 카드 4열(아래 .pcf-rs-grid · 줄 사이 32) · 「더 보기」 = 회색 면 보조 단추(.pcf-btn) ── */
	body.pcf-on #page .pcfrs-feed {
		margin-top: 56px;
	}

	body.pcf-on #page .pcfrs-feed-hd {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin: 0 0 16px;
	}

	body.pcf-on #page .pcfrs-feed-hd h2 {
		margin: 0;
		color: var(--gray-900);
		font-size: 22px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.03em;
	}

	body.pcf-on #page .pcfrs-feed-hd span {
		color: var(--gray-500);
		font-size: 14px;
	}

	body.pcf-on #page .pcfrs-feed-grid {
		row-gap: 32px;
	}

	/* 숨겨 둔 카드 · 단추 — 카드(flex) · 단추(inline-flex) 규칙이 hidden 을 덮어 따로 적는다 */
	body.pcf-on #page .pcfrs-feed-grid > .pcf-rs-c[hidden],
	body.pcf-on #page .pcfrs-feed-more .pcf-btn[hidden] {
		display: none;
	}

	body.pcf-on #page .pcfrs-feed-more {
		margin: 32px 0 0;
		text-align: center;
	}

	body.pcf-on #page .pcfrs-feed-more:has(> .pcf-btn[hidden]) {
		display: none;
	}

	body.pcf-on #page .pcf-rs-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	/* ── 카드 ── */
	body.pcf-on #page a.pcf-rs-c {
		display: flex;
		flex-direction: column;
		min-width: 0;
		color: inherit;
		text-decoration: none;
	}

	body.pcf-on #page a.pcf-rs-c:focus-visible {
		outline: 2px solid var(--gray-900);
		outline-offset: 4px;
		border-radius: 8px;
	}

	body.pcf-on #page .pcf-rs-th {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on #page .pcf-rs-th > img,
	body.pcf-on #page .pcf-rs-th > video {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on #page .pcf-rs-th.is-top > img {
		object-position: center top;
	}

	/* 흰 그림(흰 스튜디오 서식 · 토스 화면 · 손그림 슬라이드)이 흰 바탕에 녹지 않게 아주 옅은 안쪽 선 */
	body.pcf-on #page .pcf-rs-th::after {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gray-900) 7%, transparent);
		content: "";
		pointer-events: none;
	}

	/* 흰 스튜디오 그림을 아직 못 만든 서식 — 그래도 16:9(2026-10-22 운영자 「앞으로 서식 썸네일은 16:9로 통일」 — 그 전 4차 ㄱ 「정사각 표지 그대로 왼쪽」은 걷었다)
	   is-shot = 그림 넘김의 가로로 긴 실제 화면을 왼쪽 위 기준으로 채움 · is-fit = 표지를 칸 안에 다 보이게(흰 바탕 · 안쪽 선은 그대로) */
	body.pcf-on #page .pcf-rs-th.is-shot > img {
		object-position: left top;
	}

	body.pcf-on #page .pcf-rs-th.is-fit {
		background: var(--surface-white);
	}

	body.pcf-on #page .pcf-rs-th.is-fit > img {
		object-fit: contain;
	}

	/* 배경음악 — 그림 오른쪽 아래 ♪ 길이(영상 길이 꼬리표와 같은 4 · 작은 글자 칸) */
	body.pcf-on #page .pcf-rs-tag {
		position: absolute;
		right: 8px;
		bottom: 8px;
		padding: 2px 6px;
		border-radius: 4px;
		background: color-mix(in srgb, var(--gray-900) 78%, transparent);
		color: var(--surface-white);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.4;
	}

	body.pcf-on #page .pcf-rs-t {
		display: -webkit-box;
		margin-top: 10px;
		overflow: hidden;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.45;
		word-break: keep-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	body.pcf-on #page .pcf-rs-m {
		margin-top: 4px;
		overflow: hidden;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 1.5;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* 좁은 PC 폭(1025~1279) — 카드 사이를 줄인다 */
@media (min-width: 1025px) and (max-width: 1279px) {
	body.pcf-on #page .pcf-rs-grid,
	body.pcf-on #page .pcfrs-cats-1,
	body.pcf-on #page .pcfrs-cats-2 {
		gap: 16px;
	}

	body.pcf-on #page .pcfrs-feed-grid {
		row-gap: 28px;
	}
}

/* ── 6. 엑셀 서식 목록(/resources/forms/) · 2026-10-22 운영자 9차 「목록은 가 — 그림 카드 4열로 확정」(inc/pc-frame-resources.php 6절)
   목록 칸만 새 카드 칸(.pcf-rs-list — 카드 모양은 위 「카드」 절 그대로 · 홈 카드와 같은 것). 머리 · 칩 · 정렬 · 쪽 번호 · 광고 줄은 옛 화면 그대로.
   옛 두 열 목록 칸(#rs-grid)은 PC 폭에서 숨고, 폰 · 태블릿(~1024)은 새 칸이 숨는다. ── */
@media (max-width: 1024px) {
	body.pcf-on .pcf-rs-list {
		display: none;
	}
}

@media (min-width: 1025px) {
	body.pcf-on #page .rsai-list:has(> .pcf-rs-list) > #rs-grid {
		display: none;
	}

	/* 위 간격 = 옛 칸과 같은 28(css/resources-hub.css .rsai-grid) */
	body.pcf-on #page .pcf-rs-list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px 24px;
		margin-top: 28px;
		transition: opacity 0.15s ease;
	}

	/* 불러오는 중 — 옛 칸과 같은 값(.rsai-grid[aria-busy]) */
	body.pcf-on #page .pcf-rs-list[aria-busy="true"] {
		opacity: 0.55;
		pointer-events: none;
	}

	body.pcf-on #page .pcf-rs-list > .rsai-empty {
		grid-column: 1 / -1;
	}
}

/* ── 7. 넘김 단추 ‹ › — 「새로 들어온」 줄 셋(슬라이드 8절 · 모션 9절 · 배경음악 11절)이 같이 쓴다 · 정본 13.2 「카드 줄」(40 흰 원 — 넘칠 때만 · 마우스를 올릴 때만 · 터치 기기는 밀어서 · 저절로 넘어가지 않음)
   이 이름(.pcf-rs-cats-ar)을 처음 쓴 「갈래 그림 줄」(10/23 — 자료실 목록 · 갤러리 일곱 쪽 맨 위)은 2026-10-25 운영자 「자료실 각 항목 위에 이미지 목차 제거합니다. 기존 하위 내비게이션만 남김」으로 걷었다
   (줄 규칙 · js 4절 · PHP 그리기 — 되살리려면 git 10/25 이전 판 · 그림 assets/rs-cat/ 은 남김) */
@media (min-width: 1025px) {
	/* 같은 날 — 경로 줄 = 하위 메뉴 줄 아래 32(본문 칸 위 32 그대로 · 실무 위키 목록과 같은 자리 — 정본 v4 13.5 목록 머리).
	   옛 ai-hub.css 의 경로 줄 위 22 는 옛 틀 머리 아래 값이라 새 틀에선 54 가 됐다(그림 줄이 있을 땐 그 밑이라 묻혔다) */
	body.pcf-on .aih .aih-main .aihx-crumb {
		padding-top: 0;
	}

	/* 넘칠 때만(hidden 은 js 가 푼다) · 줄에 마우스를 올리거나 포커스일 때 보인다 · 그림 칸 가운데 높이(js 가 맞춘다) */
	body.pcf-on .pcf-rs-cats-ar {
		position: absolute;
		top: 27px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--surface-white);
		color: var(--gray-900);
		box-shadow: var(--shadow-sm), var(--shadow-md);
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	body.pcf-on .pcf-rs-cats-ar[hidden] {
		display: none;
	}

	body.pcf-on .pcfrs-sls-new-in:hover .pcf-rs-cats-ar,
	body.pcf-on .pcf-rs-cats-ar:focus-visible {
		opacity: 1;
	}

	body.pcf-on .pcf-rs-cats-ar.is-prev {
		left: -20px;
	}

	body.pcf-on .pcf-rs-cats-ar.is-next {
		right: -20px;
	}
}

@media (min-width: 1025px) and (hover: none) {
	body.pcf-on .pcf-rs-cats-ar {
		display: none;
	}
}

/* ── 8. 슬라이드 스타일 갤러리 · 2026-10-23 운영자 「새로 들어온 스타일 좋네요. 진행합니다」(갤러리 새 틀 1차 「나」 · inc/pc-frame-resources.php 8절)
   ① 목록 위 한 줄 = 무료 강의 · 멤버십 목록(.pcfl-bar — css/pcf-lecture.css 2절)과 같은 값: 분위기 밑줄 탭 46(14 · 개수 12 --gray-400 · 지금 = 검정 밑줄 2 + 굵게) · 오른쪽 정렬 · 표지/본문(찾기 칸은 제목 줄 오른쪽 — 13절 · 10/25)
      옛 마크업(.sls-bar)에 CSS 만 — 옛 틀 모양은 css/ai-hub.css .aihx 절(회색 묶음 칩) · 이 갤러리 틀엔 #page 가 없어 .aihx 로 좁힌다
   ② 탭 줄 위 「새로 들어온 스타일」 한 줄 = 아래 목록과 같은 카드 · 칸 폭 = 목록 5열과 같다 · 넘김 = 7절 갈래 줄과 같은 ‹ › 40 흰 원(정본 13.2 카드 줄)
   ③ (2026-10-27) 슬라이드는 ① 줄 대신 필터 줄(쓰임 탭 + [필터] 판 — 10절 룩북 모양) — 옛 줄은 PC 폭에서 숨는다 · ① 규칙은 모션 그래픽(9절 — 같은 .sls-* 마크업)이 그대로 쓴다
   폰 · 태블릿(~1024)엔 새 줄 · 찾기 칸이 없다(옛 화면 그대로) */
.pcfrs-sls-new,
.pcfrs-sls-empty,
.pcfrs-sls-wide {
	display: none;
}

@media (min-width: 1025px) {
	body.pcf-on .aihx .sls-bar {
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 16px;
		margin: 28px 0 24px;
		padding: 0;
		border-bottom: 1px solid var(--gray-200);
		background: var(--surface-white);
	}

	/* 탭이 줄에 다 안 들어가면(1,025~1,300 폭 · 탭이 많은 갤러리) 둘째 줄로 내려간다 — 찾기 칸 밑으로 숨지 않게(10/23 실측: 1,100 에서 탭 169px 가 찾기 칸 밑에 깔렸다) */
	body.pcf-on .aihx .sls-chips {
		display: flex;
		flex: 0 1 auto;
		flex-wrap: wrap;
		gap: 0;
		min-width: 0;
		margin-right: auto;
		padding: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}

	body.pcf-on .aihx .sls-app .sls-chip {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 6px;
		height: 46px;
		margin: 0 0 -1px;
		padding: 0 11px;
		border-bottom: 2px solid transparent;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--gray-600);
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		box-sizing: border-box;
	}

	/* 첫 칸 글자를 칸 왼쪽 선(로고 · 하위 메뉴 · 카드)에 맞춘다 */
	body.pcf-on .aihx .sls-app .sls-chip:first-child {
		padding-left: 2px;
	}

	body.pcf-on .aihx .sls-app .sls-chip:hover {
		background: transparent;
		color: var(--gray-900);
	}

	body.pcf-on .aihx .sls-app .sls-chip[aria-pressed="true"] {
		border-bottom-color: var(--gray-900);
		background: transparent;
		box-shadow: none;
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on .aihx .sls-app .sls-chip-n {
		color: var(--gray-400);
		font-size: 12px;
		font-weight: 400;
	}

	body.pcf-on .aihx .sls-app .sls-chip[aria-pressed="true"] .sls-chip-n {
		color: var(--gray-600);
	}

	/* 찾는 중 — 찾은 것이 0 인 탭은 흐리게(누를 수는 있다 · 무료 강의 목록 .pcfl-cat.is-zero 와 같다) */
	body.pcf-on .aihx .sls-app .sls-chip.is-zero {
		color: var(--gray-400);
	}

	body.pcf-on .aihx .sls-app .sls-chip:focus-visible {
		outline: 2px solid var(--gray-900);
		outline-offset: -2px;
	}

	/* 오른쪽(정렬 · 보기)은 줄지 않고 탭 첫 줄 높이(46)에 붙는다 · 찾기 칸은 제목 줄 오른쪽(13절 — 2026-10-25) */
	body.pcf-on .aihx .sls-bar-end {
		flex: none;
		align-self: flex-start;
		align-items: center;
		gap: 8px;
		height: 46px;
	}

	body.pcf-on .aihx .sls-app .sls-sort-btn {
		min-height: 36px;
		padding: 0 10px;
		border-radius: 6px;
		background: transparent;
		color: var(--gray-700);
		font-size: 14px;
		font-weight: 500;
	}

	body.pcf-on .aihx .sls-app .sls-sort-btn:hover,
	body.pcf-on .aihx .sls-app .sls-sort-btn[aria-expanded="true"] {
		background: var(--gray-100);
	}

	body.pcf-on .aihx .sls-app .sls-seg-btn {
		min-height: 30px;
		font-size: 13px;
	}

	/* 찾은 것이 없을 때 한 줄 · 찾는 중 맨 아래 「자료실 모두에서 찾기 ›」(css/pcf-ui.css .pcf-listwide 와 같은 값 — 그쪽은 #page 안만 잡는다) */
	body.pcf-on .aihx .pcfrs-sls-empty {
		display: block;
		margin: 24px 0 0;
		color: var(--gray-500);
		font-size: 15px;
		text-align: center;
	}

	body.pcf-on .aihx .pcfrs-sls-wide {
		display: block;
		margin: 40px 0 0;
		text-align: center;
	}

	body.pcf-on .aihx .pcfrs-sls-empty[hidden],
	body.pcf-on .aihx .pcfrs-sls-wide[hidden] {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-sls-wide a {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		color: var(--gray-500);
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
	}

	body.pcf-on .aihx .pcfrs-sls-wide a:hover {
		color: var(--gray-900);
	}

	/* ② 「새로 들어온 스타일」 한 줄 */
	body.pcf-on .aihx .pcfrs-sls-new {
		display: block;
		margin: 28px 0 0;
	}

	body.pcf-on .aihx .pcfrs-sls-new-hd {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin: 0 0 14px;
	}

	body.pcf-on .aihx .pcfrs-sls-new-hd h2 {
		margin: 0;
		color: var(--gray-900);
		font-size: 18px;
		font-weight: 600;
		line-height: 1.4;
	}

	body.pcf-on .aihx .pcfrs-sls-new-m {
		color: var(--gray-500);
		font-size: 13px;
	}

	/* 화면 링크 = 회색(정본 4.5) — 정렬을 바꾸는 단추라 button */
	body.pcf-on .aihx button.pcfrs-sls-new-all {
		margin: 0 0 0 auto;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--gray-500);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
	}

	body.pcf-on .aihx button.pcfrs-sls-new-all:hover {
		color: var(--gray-900);
	}

	body.pcf-on .aihx button.pcfrs-sls-new-all:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	body.pcf-on .aihx .pcfrs-sls-new-in {
		position: relative;
	}

	/* 칸 폭 = 아래 목록 5열과 같다(칸 사이 11 = css/ai-hub.css .aihx .sls-app .sls-grid 의 가로 사이) · 넘치면 밀어서 · 스크롤 막대는 숨김 */
	body.pcf-on .aihx ol.pcfrs-sls-new-sc {
		display: grid;
		grid-auto-columns: calc((100% - 44px) / 5);
		grid-auto-flow: column;
		gap: 11px;
		margin: 0;
		padding: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		list-style: none;
	}

	body.pcf-on .aihx ol.pcfrs-sls-new-sc::-webkit-scrollbar {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-sls-new-sc > .sls-card {
		min-width: 0;
		margin: 0;
		scroll-snap-align: start;
	}

	/* ③ 필터 줄(2026-10-27 운영자 「가를 쓰되, 쓰임을 메인 필터로」 · 「라이트/다크 필터도」 — inc/pc-frame-resources.php 8절 oppadu_pcfrs_sls_bar)
	   모양 = 10절 룩북 줄 · [필터] 판 그대로(같은 클래스 .pcfrs-dsg-*) — 여기는 슬라이드만 다른 것:
	   옛 줄(.sls-bar)처럼 스크롤해도 위에 붙는다(top = 옛 줄과 같은 --sls-top · 이 줄은 sticky 라 판의 기준도 된다) ·
	   옛 줄은 PC 폭에서 숨는다(정렬 · 표지/본문은 js 5절이 이 줄의 빈 칸으로 옮긴다) · 색 칩 = 룩북 탭과 같은 색 점 10 + 이름 */
	body.pcf-on .aihx .pcfrs-dsg-bar.pcfrs-slsf {
		position: sticky;
		top: var(--sls-top);
		z-index: 5;
		flex-wrap: wrap; /* 둘째 줄(펼친 [더보기])만 다음 줄로 — 첫 줄은 탭 칸이 남는 폭을 채운다(아래) */
		gap: 0 16px;
	}

	body.pcf-on .aihx .pcfrs-slsf ~ .sls-bar {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-slsf-slot {
		display: contents;
	}

	body.pcf-on .aihx .pcfrs-slsf .facet-chip {
		gap: 6px;
	}

	/* 쓰임 탭 = 룩북 탭과 같은 간격(11) · 첫 줄은 늘 한 줄 — 넘치면 js 5절이 뒤쪽 탭부터 둘째 줄로 옮기고 첫 줄 끝에 [더보기 ⌄](두 줄 탭을 처음부터 보이지 않는다)
	   2026-10-27 운영자 「너무 다닥다닥 붙어있어서, 간격을 좀 더 주고 [더보기] 버튼으로 · 나중에 더 추가될 수도」(그 전 같은 날 잠깐 = 여백 7 + 좁으면 개수 숨김)
	   탭 칸은 남는 폭을 다 채우고(flex 1 · 0 에서) 오른쪽 끝(필터 · 정렬 · 표지/본문)을 민다 · 스크립트 전엔 넘친 탭이 오른쪽에서 잘린다(세로는 안 잘려 고른 탭 밑줄은 그대로) */
	body.pcf-on .aihx .pcfrs-slsf .pcfrs-dsg-tabs {
		flex: 1 1 0;
		flex-wrap: nowrap;
		margin-right: 0;
		overflow-x: clip;
	}

	/* [더보기] = 탭 칸 맨 끝(마지막 탭 바로 뒤 — 탭끼리와 같은 간격) */
	body.pcf-on .aihx .pcfrs-slsf-more {
		display: flex;
		flex: none;
	}

	body.pcf-on .aihx .pcfrs-slsf-more[hidden] {
		display: none;
	}

	/* [더보기] = 탭과 같은 모양 + ⌄ · 펼치면 「접기 ⌃」 · 접힌 채 둘째 줄 탭이 골라져 있으면 그 이름 · 개수 + 밑줄(aria-pressed — 10절 탭 규칙) */
	body.pcf-on .aihx .pcfrs-slsf .pcfrs-slsf-more > .pcfrs-slsf-mbtn {
		padding: 0 8px 0 11px;
	}

	body.pcf-on .aihx .pcfrs-slsf-mbtn > svg {
		flex: none;
		color: var(--gray-500);
	}

	body.pcf-on .aihx .pcfrs-slsf-mbtn[aria-expanded="true"] > svg {
		transform: rotate(180deg);
	}

	/* 둘째 줄(펼친 [더보기]) = 줄 맨 아래 한 줄 가득 — 탭 모양 그대로 · 넘치면 더 내려간다
	   2026-10-27 운영자 「더보기 클릭하면 두 줄로 펼쳐지도록(영역이 펼쳐짐)」(그 전 = 떠 있는 펼침 목록) → 「들여쓰기 되고 가운데 줄 없이」:
	   왼쪽 들여쓰기 = 첫 줄 「전체」 칸 폭(js 5절이 잰다) — 둘째 줄 첫 탭이 「업무·보고」와 같은 자리에서 시작 · 두 줄 사이 선 없음 */
	body.pcf-on .aihx .pcfrs-slsf-row2 {
		display: flex;
		flex: 0 0 100%;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	body.pcf-on .aihx .pcfrs-slsf-row2[hidden] {
		display: none;
	}

	/* 첫 칸도 보통 탭 여백(11) — 10절 「첫 칸 왼쪽 2」는 줄 맨 왼쪽 「전체」 몫 */
	body.pcf-on .aihx .pcfrs-slsf-row2 > .pcfrs-dsg-tab:first-child {
		padding-left: 11px;
	}
}

/* ── 9. 모션 그래픽 갤러리 · 2026-10-23 운영자 2차 「나 · 새로 들어온 모션 줄」(inc/pc-frame-resources.php 9절)
   탭 · 정렬 · 새 줄 머리 · 넘김 단추는 8절과 같은 부품(같은 클래스 — 옛 모션 마크업도 .sls-* 를 쓴다) · 여기는 모션만 다른 것
   폰 · 태블릿(~1024)엔 새 줄 · 찾기 칸이 없다(8절 첫 규칙) — 카드 NEW 배지도 그대로 */
@media (min-width: 1025px) {
	/* 탭이 열 개(922px) — 한 줄에 맞춘다: 「영상 멈추기」는 아이콘만(이름은 화면 낭독 · 마우스를 올리면 말풍선 — js 6절) · 찾기 칸은 제목 줄 오른쪽(13절 — 10/25 · 그 전엔 이 줄 180) */

	body.pcf-on .aihx .msl-app .msl-auto {
		justify-content: center;
		width: 36px;
		padding: 0;
	}

	body.pcf-on .aihx .msl-app .msl-auto .msl-auto-l {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* 새 줄 칸 폭 = 아래 목록 4열(가로 사이 14 — tools/_motion-styles-assets/css/light.css .msl-grid) */
	body.pcf-on .aihx .pcfrs-msl-new ol.pcfrs-sls-new-sc {
		grid-auto-columns: calc((100% - 42px) / 4);
		gap: 14px;
	}

	/* 카드 NEW 배지는 새 줄이 있을 때만 뺀다(새 줄이 맡는다 · 관리자 「검토 대기」 배지는 그대로) */
	body.pcf-on .aihx .msl-app:has(.pcfrs-msl-new) .msl-grid .msl-badge:not(.msl-badge--draft) {
		display: none;
	}
}

/* ── 10. 브랜드 디자인 갤러리(룩북) · 2026-10-23 운영자 3차 「네 컬러탭이 좋겠네요. 컬러탭으로 진행」(inc/pc-frame-resources.php 10절)
   ① 목록 위 한 줄 = 8 · 9절과 같은 값: 컬러 밑줄 탭 46(14 · 색 점 10 · 개수 12 --gray-400 · 지금 = 검정 밑줄 2 + 굵게) · 오른쪽 [필터] · 정렬(찾기 칸은 제목 줄 오른쪽 — 13절 · 10/25)
      이 줄이 있으면 옛 거르기 줄(#sidebar)은 숨고 「293개 시스템」 줄은 화면 낭독만(탭 개수가 맡는다)
   ② [필터] 판 = 정렬 메뉴처럼 떠 있는 흰 판 — 테마 · 지역 = 고르기 단추(정본 7.14 .pcf-seg 값) · 폰트 · 산업 = 칩(고른 칩 = 회색 200 면 + 검정 글자 — 정본 4.5)
   ⚠️ 룩북 셸(.otl) 안에서는 옛 assets/app.css 가 button 을 브라우저 기본값으로 되돌린다(all: revert) — 단추는 글꼴 · 테두리 · 바탕까지 다 적는다
   ⚠️ 판으로 옮겨 온 옛 묶음 · 정렬 칸은 옛 규칙(.aihx [data-dd] .filter-options · #resetFilters · .aihx .select …)이 그대로 걸린다 — 아래는 그보다 명시도를 높여 적는다
   폰 · 태블릿(~1024)엔 이 줄이 없다(옛 화면 그대로 — js 7절이 옮긴 칸도 제자리로 돌려놓는다) */
.pcfrs-dsg-bar {
	display: none;
}

@media (min-width: 1025px) {
	body.pcf-on .aihx .pcfrs-dsg-bar {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 16px;
		margin: 28px 0 24px;
		border-bottom: 1px solid var(--gray-200);
		background: var(--surface-white);
	}

	/* 상세 주소(#/{브랜드})로 바로 들어온 첫 그림 — 옛 목록처럼 숨는다(app.css .dsg-spa[data-view="detail"] #main) */
	body.pcf-on.dsg-spa[data-view="detail"] .aihx .pcfrs-dsg-bar {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-bar ~ #main #sidebar {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-bar ~ #main #resultCount {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* 탭이 줄에 다 안 들어가면(1,025~1,200 폭) 둘째 줄로 — 8절과 같다 */
	body.pcf-on .aihx .pcfrs-dsg-tabs {
		display: flex;
		flex: 0 1 auto;
		flex-wrap: wrap;
		min-width: 0;
		margin-right: auto;
	}

	body.pcf-on .aihx .pcfrs-dsg-tab {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		height: 46px;
		margin: 0 0 -1px;
		padding: 0 11px;
		border: 0;
		border-bottom: 2px solid transparent;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--gray-600);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	/* 첫 칸 글자를 칸 왼쪽 선(로고 · 하위 메뉴 · 카드)에 맞춘다 */
	body.pcf-on .aihx .pcfrs-dsg-tab:first-child {
		padding-left: 2px;
	}

	body.pcf-on .aihx .pcfrs-dsg-tab:hover {
		color: var(--gray-900);
	}

	body.pcf-on .aihx .pcfrs-dsg-tab[aria-pressed="true"] {
		border-bottom-color: var(--gray-900);
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on .aihx .pcfrs-dsg-tab .n {
		color: var(--gray-400);
		font-size: 12px;
		font-weight: 400;
	}

	body.pcf-on .aihx .pcfrs-dsg-tab[aria-pressed="true"] .n {
		color: var(--gray-600);
	}

	/* 찾기 · 다른 거르기 안에서 0 곳인 색은 흐리게(누를 수는 있다 · 8절 .is-zero 와 같다) */
	body.pcf-on .aihx .pcfrs-dsg-tab.is-zero {
		color: var(--gray-400);
	}

	body.pcf-on .aihx .pcfrs-dsg-tab:focus-visible {
		outline: 2px solid var(--gray-900);
		outline-offset: -2px;
	}

	/* 색 점 = 카드 이름 앞 점과 같은 10 · 3(app.css .aihx .card-swatch) · 밝은 색도 흰 바탕에 묻히지 않게 안쪽 머리카락 선 */
	body.pcf-on .aihx .pcfrs-dsg-dot {
		flex: none;
		width: 10px;
		height: 10px;
		border-radius: 3px;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
	}

	/* 오른쪽(필터 · 정렬)은 줄지 않고 탭 첫 줄 높이(46)에 붙는다 */
	body.pcf-on .aihx .pcfrs-dsg-end {
		display: flex;
		flex: none;
		align-self: flex-start;
		align-items: center;
		gap: 8px;
		height: 46px;
	}

	/* [필터] — 8절 정렬 단추와 같은 값 · 판에서 고른 수는 글자 옆 굵은 숫자 */
	body.pcf-on .aihx .pcfrs-dsg-fbtn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		height: 36px;
		margin: 0;
		padding: 0 10px;
		border: 0;
		border-radius: var(--pcf-ui-r-ctl);
		background: transparent;
		color: var(--gray-700);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-dsg-fbtn:hover,
	body.pcf-on .aihx .pcfrs-dsg-fbtn[aria-expanded="true"] {
		background: var(--gray-100);
	}

	body.pcf-on .aihx .pcfrs-dsg-fbtn:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	body.pcf-on .aihx .pcfrs-dsg-fn {
		color: var(--gray-900);
		font-size: 13px;
		font-weight: 600;
	}

	/* 정렬 — 옛 고르기 칸(#sortBy)을 옮겨 와 8절 정렬 단추 모양으로(아이콘 + 글자 + ⌄) */
	body.pcf-on .aihx .pcfrs-dsg-sort {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: 36px;
		margin: 0;
		padding: 0 0 0 10px;
		border-radius: var(--pcf-ui-r-ctl);
		color: var(--gray-700);
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-dsg-sort:hover {
		background: var(--gray-100);
	}

	body.pcf-on .aihx .pcfrs-dsg-sort:has(select:focus-visible) {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	body.pcf-on .aihx .pcfrs-dsg-sort > svg {
		flex: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-sort > .pcfrs-dsg-slot {
		display: contents;
	}

	body.pcf-on .aihx .pcfrs-dsg-sort select,
	body.pcf-on .aihx .pcfrs-dsg-sort select:focus {
		width: auto;
		max-width: none;
		height: 36px;
		margin: 0;
		padding: 0 32px 0 6px;
		border: 0;
		border-radius: var(--pcf-ui-r-ctl);
		background: transparent var(--pcf-ui-chev) no-repeat right 8px center / 16px 16px;
		box-shadow: none;
		color: var(--gray-700);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		outline: 0;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	/* ② [필터] 판 — 바의 오른쪽 아래(정렬 메뉴와 같은 떠 있는 흰 판) */
	body.pcf-on .aihx .pcfrs-dsg-panel {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		z-index: 40;
		display: flex;
		flex-direction: column;
		gap: 14px;
		box-sizing: border-box;
		width: 600px;
		padding: 20px 20px 16px;
		border-radius: var(--pcf-ui-r);
		background: var(--surface-white);
		box-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
	}

	body.pcf-on .aihx .pcfrs-dsg-panel[hidden] {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-row {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}

	body.pcf-on .aihx .pcfrs-dsg-rl {
		color: var(--gray-500);
		font-size: 13px;
		line-height: 34px;
	}

	/* 옮겨 온 옛 묶음 — 이름표 · 펼침 단추는 숨기고(줄 이름이 맡는다 · 칩 묶음엔 aria-label 이 있다) 칩을 늘어놓는다 */
	body.pcf-on .aihx .pcfrs-dsg-panel .filter-group {
		position: static;
		display: block;
		margin: 0;
	}

	body.pcf-on .aihx .pcfrs-dsg-panel .filter-label,
	body.pcf-on .aihx .pcfrs-dsg-panel .aihx-dd {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-panel .filter-options {
		position: static;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-panel .facet-chip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 34px;
		margin: 0;
		padding: 0 12px;
		border: 0;
		border-radius: var(--pcf-ui-r-ctl);
		background: var(--surface-white);
		box-shadow: inset 0 0 0 1px var(--gray-200);
		color: var(--gray-700);
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-dsg-panel .facet-chip:hover {
		box-shadow: inset 0 0 0 1px var(--gray-300);
		color: var(--gray-900);
	}

	body.pcf-on .aihx .pcfrs-dsg-panel .facet-chip[aria-pressed="true"],
	body.pcf-on .aihx .pcfrs-dsg-panel .facet-chip[aria-pressed="true"]:hover {
		background: var(--gray-200);
		box-shadow: none;
		color: var(--gray-900);
		font-weight: 500;
	}

	body.pcf-on .aihx .pcfrs-dsg-panel .facet-chip:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	/* 테마 · 지역 = 고르기 단추(정본 7.14 .pcf-seg — 회색 100 판 · 고른 칸 = 흰 칸 + 그림자) */
	body.pcf-on .aihx .pcfrs-dsg-row--seg .filter-options {
		display: inline-flex;
		flex-wrap: nowrap;
		gap: 0;
		padding: 2px;
		border-radius: var(--pcf-ui-r-ctl);
		background: var(--pcf-ui-cell);
	}

	body.pcf-on .aihx .pcfrs-dsg-row--seg .facet-chip {
		min-width: 64px;
		height: 30px;
		padding: 0 14px;
		border-radius: 5px;
		background: transparent;
		box-shadow: none;
		color: var(--pcf-ui-ink);
		font-size: 14px;
	}

	body.pcf-on .aihx .pcfrs-dsg-row--seg .facet-chip:hover {
		box-shadow: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-row--seg .facet-chip[aria-pressed="true"],
	body.pcf-on .aihx .pcfrs-dsg-row--seg .facet-chip[aria-pressed="true"]:hover {
		background: var(--surface-white);
		box-shadow: var(--pcf-ui-thumb-shadow);
		font-weight: 500;
	}

	/* 판 아래 [필터 초기화] — 회색 글자 단추(옛 .aihx #resetFilters 보다 높여 적는다) */
	body.pcf-on .aihx .pcfrs-dsg-pfoot {
		display: flex;
		justify-content: flex-end;
		padding-top: 12px;
		border-top: 1px solid var(--gray-200);
	}

	body.pcf-on .aihx .pcfrs-dsg-pfoot #resetFilters,
	body.pcf-on .aihx .pcfrs-dsg-pfoot .pcfrs-dsg-reset {
		width: auto;
		height: 32px;
		margin: 0;
		padding: 0 10px;
		border: 0;
		border-radius: var(--pcf-ui-r-ctl);
		background: transparent;
		color: var(--gray-500);
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-dsg-pfoot #resetFilters:hover,
	body.pcf-on .aihx .pcfrs-dsg-pfoot .pcfrs-dsg-reset:hover {
		background: var(--gray-100);
		color: var(--gray-900);
		text-decoration: none;
	}

	body.pcf-on .aihx .pcfrs-dsg-pfoot #resetFilters:focus-visible,
	body.pcf-on .aihx .pcfrs-dsg-pfoot .pcfrs-dsg-reset:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}
}

/* ── 11. 효과음 · 배경음악 · 2026-10-23 운영자 4차 「네, 좋습니다. 제안한 대로 진행하겠습니다」(효과음 가 · 배경음악 가 · inc/pc-frame-resources.php 11절)
   ① 목록 위 한 줄 = ③ 필터 줄(2026-10-27 — 그 전 밑줄 탭은 이름이 길어 1,440 에서도 두 줄이 되어 걷었다 · git 10/27 이전 판) · 오른쪽 찾기 칸 + 정렬(아이콘 + 글자 + ⌄ · 찾기 칸은 10/25 ~ 10/27 제목 줄 오른쪽(13절)에 있다가 운영자 「검색 란을 필터 영역으로 이동」으로 이 줄에)
      이 줄 바로 뒤의 옛 화면에선 분류 그림 칸 · 「‹ 모든 분류」 · 분위기 칩 · 찾기 줄이 숨는다(옛 칸은 js 8절이 대신 누른다) — 분류 영상 칸 · 분위기 설명 한 줄은 줄 아래 그대로
      고르기 칸 폭 = 고른 글자 폭(field-sizing — 모르는 브라우저는 가장 긴 글자 폭) · 펼친 목록 = 옛 찾기 줄과 같은 흰 카드(base-select 를 아는 브라우저만 — css/sfx.css 와 같은 값)
   ② 배경음악 「새로 들어온 곡」 한 줄 = 머리 · 넘김은 8절 그대로(.pcfrs-sls-new) · 칸 폭 = 4열(사이 14 — 9절 「새로 들어온 모션」과 같다) ·
      칸 = 표지 16:9(8) + 왼쪽 아래 「▶ 듣기」(어두운 꼬리표 6 — 듣는 중 = 「❚❚ 듣는 중」 + 그림 둘레 검정 테 · 표의 표지와 같은 표시) + 곡 이름 15/600 + 분위기 · BPM 13
   폰 · 태블릿(~1024)엔 둘 다 없다(옛 화면 그대로) */
.pcfrs-snd-bar {
	display: none;
}

@media (min-width: 1025px) {
	body.pcf-on .aihx .pcfrs-snd-bar {
		position: relative;
		display: flex;
		flex-wrap: wrap; /* 칩 판(③)이 줄 안 아랫단으로 */
		row-gap: 0;
		align-items: stretch;
		gap: 16px;
		margin: 28px 0 0;
		border-bottom: 1px solid var(--gray-200);
		background: var(--surface-white);
	}

	/* 옛 화면 — 새 줄 바로 뒤일 때만(새 줄이 없으면 옛 화면 그대로) */
	body.pcf-on .aihx .pcfrs-snd-bar + .sx {
		padding-top: 0;
	}

	body.pcf-on .aihx .pcfrs-snd-bar + #sx-app > .sx-tiles-w,
	body.pcf-on .aihx .pcfrs-snd-bar + #sx-app > .sx-back,
	body.pcf-on .aihx .pcfrs-snd-bar + .sx > .sx-bar,
	body.pcf-on .aihx .pcfrs-snd-bar + #bg-app > .bg-chips {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-snd-bar + #sx-app > .sx-hero {
		margin: 24px 0 8px;
	}

	body.pcf-on .aihx .pcfrs-snd-bar + #bg-app > .bg-mood-d {
		margin: 16px 0 0;
	}

	/* 오른쪽(찾기 칸 · 정렬)은 줄지 않고 단추 줄 높이(46)에 붙는다 */
	body.pcf-on .aihx .pcfrs-snd-end {
		display: flex;
		flex: none;
		align-self: flex-start;
		align-items: center;
		gap: 12px;
		height: 46px;
	}

	/* 찾기 칸 = 공용 칸 240 × 36 그대로(css/pcf-ui.css — 커뮤니티 탭 줄 칸과 같다 · 2026-10-27 운영자 「검색 란을 필터 영역으로 이동」 — 그 전엔 제목 줄 오른쪽 400 × 44 · 13절) */
	body.pcf-on .aihx .pcfrs-flt-q {
		margin: 0;
	}

	/* 길이 / 빠르기 · 정렬 = 10절 정렬 칸과 같은 모양(글자 + ⌄ · 정렬만 앞에 아이콘 · 마우스 올림 회색 100) */
	body.pcf-on .aihx .pcfrs-snd-sel {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: 36px;
		margin: 0;
		padding: 0 0 0 10px;
		border-radius: var(--pcf-ui-r-ctl);
		color: var(--gray-700);
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-snd-sel:hover {
		background: var(--gray-100);
	}

	body.pcf-on .aihx .pcfrs-snd-sel:has(select:focus-visible) {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	body.pcf-on .aihx .pcfrs-snd-sel > svg {
		flex: none;
	}

	body.pcf-on .aihx .pcfrs-snd-sel select,
	body.pcf-on .aihx .pcfrs-snd-sel select:focus {
		width: auto;
		max-width: none;
		height: 36px;
		margin: 0;
		padding: 0 32px 0 0;
		border: 0;
		border-radius: var(--pcf-ui-r-ctl);
		background: transparent var(--pcf-ui-chev) no-repeat right 8px center / 16px 16px;
		box-shadow: none;
		color: var(--gray-700);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		outline: 0;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		field-sizing: content;
	}

	body.pcf-on .aihx .pcfrs-snd-sel > svg + select {
		padding-left: 6px;
	}

	/* ③ 필터 줄(2026-10-27 운영자 「마」 — inc/pc-frame-resources.php 11절 ③ · js 8절 ⑦)
	   칸 단추(글자 + ⌄ · 정렬 칸과 같은 모양 36 · 6) 줄 + 그 아래 칩 판(누른 칸 하나만 · 줄 안 아랫단이라 옛 화면 숨김 규칙 「줄 + #sx-app」이 그대로 걸린다)
	   고른 칸 = 단추에 그 값 + 회색 200 면 · 칩 = 흰 면 + 회색 200 안쪽 테 · 고른 칩 = 회색 200 면 + 검정 600(정본 4.5 「거르는 칩의 선택」 — 초록 아님) · 0개 칩 = 회색 400 */
	body.pcf-on .aihx .pcfrs-flt-btns {
		display: flex;
		flex: 0 1 auto;
		align-items: center;
		gap: 4px;
		min-width: 0;
		height: 46px;
		margin: 0 auto 0 -10px; /* 첫 단추 글자를 칸 왼쪽 선에 맞춘다(단추 안 여백 10) */
	}

	body.pcf-on .aihx .pcfrs-flt-btn,
	body.pcf-on .aihx .pcfrs-flt-reset {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		height: 36px;
		margin: 0;
		padding: 0 10px;
		border: 0;
		border-radius: var(--pcf-ui-r-ctl);
		background: transparent;
		box-shadow: none;
		color: var(--gray-700);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-flt-btn:hover,
	body.pcf-on .aihx .pcfrs-flt-btn[aria-expanded="true"] {
		background: var(--gray-100);
		color: var(--gray-900);
	}

	body.pcf-on .aihx .pcfrs-flt-btn.is-set {
		background: var(--gray-200);
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on .aihx .pcfrs-flt-btn > svg {
		flex: none;
	}

	body.pcf-on .aihx .pcfrs-flt-btn[aria-expanded="true"] > svg {
		transform: rotate(180deg);
	}

	body.pcf-on .aihx .pcfrs-flt-reset {
		margin-left: 6px;
		color: var(--gray-500);
		font-weight: 400;
	}

	body.pcf-on .aihx .pcfrs-flt-reset:hover {
		color: var(--gray-900);
	}

	body.pcf-on .aihx .pcfrs-flt-reset[hidden],
	body.pcf-on .aihx .pcfrs-flt-p[hidden],
	body.pcf-on .aihx .pcfrs-flt-chip[hidden] {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-flt-btn:focus-visible,
	body.pcf-on .aihx .pcfrs-flt-reset:focus-visible,
	body.pcf-on .aihx .pcfrs-flt-chip:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	body.pcf-on .aihx .pcfrs-flt-p {
		display: flex;
		flex: 0 0 100%;
		flex-wrap: wrap;
		gap: 8px;
		padding: 18px 0 20px;
		border-top: 1px solid var(--gray-200);
	}

	body.pcf-on .aihx .pcfrs-flt-chip {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: 36px;
		margin: 0;
		padding: 0 14px;
		border: 0;
		border-radius: var(--pcf-ui-r-ctl);
		background: var(--surface-white);
		box-shadow: inset 0 0 0 1px var(--gray-200);
		color: var(--gray-700);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-flt-chip:hover {
		background: var(--gray-50);
		color: var(--gray-900);
	}

	body.pcf-on .aihx .pcfrs-flt-chip[aria-pressed="true"] {
		background: var(--gray-200);
		box-shadow: none;
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on .aihx .pcfrs-flt-chip.is-zero {
		color: var(--gray-400);
	}

	/* ② 「새로 들어온 곡」 */
	body.pcf-on .aihx .pcfrs-bgm-new ol.pcfrs-sls-new-sc {
		grid-auto-columns: calc((100% - 42px) / 4);
		gap: 14px;
	}

	body.pcf-on .aihx .pcfrs-bgm-card {
		min-width: 0;
		margin: 0;
		scroll-snap-align: start;
	}

	body.pcf-on .aihx .pcfrs-bgm-shot {
		position: relative;
		display: block;
		box-sizing: border-box;
		width: 100%;
		aspect-ratio: 16 / 9;
		margin: 0;
		padding: 0;
		overflow: hidden;
		border: 0;
		border-radius: 8px;
		background: var(--gray-100);
		cursor: pointer;
	}

	body.pcf-on .aihx .pcfrs-bgm-shot img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on .aihx .pcfrs-bgm-shot:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	body.pcf-on .aihx .pcfrs-bgm-shot[aria-pressed="true"] {
		box-shadow: 0 0 0 2px var(--gray-900);
	}

	body.pcf-on .aihx .pcfrs-bgm-play {
		position: absolute;
		bottom: 10px;
		left: 10px;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 30px;
		padding: 0 10px 0 8px;
		border-radius: var(--pcf-ui-r-ctl);
		background: rgba(17, 17, 17, .72);
		color: var(--surface-white);
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
	}

	body.pcf-on .aihx .pcfrs-bgm-shot:hover .pcfrs-bgm-play,
	body.pcf-on .aihx .pcfrs-bgm-shot[aria-pressed="true"] .pcfrs-bgm-play {
		background: var(--gray-900);
	}

	body.pcf-on .aihx .pcfrs-bgm-play svg {
		flex: none;
		fill: currentColor;
	}

	body.pcf-on .aihx .pcfrs-bgm-play .pcfrs-bgm-i-pause,
	body.pcf-on .aihx .pcfrs-bgm-pl-on,
	body.pcf-on .aihx .pcfrs-bgm-shot[aria-pressed="true"] .pcfrs-bgm-i-play,
	body.pcf-on .aihx .pcfrs-bgm-shot[aria-pressed="true"] .pcfrs-bgm-pl {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-bgm-shot[aria-pressed="true"] .pcfrs-bgm-i-pause,
	body.pcf-on .aihx .pcfrs-bgm-shot[aria-pressed="true"] .pcfrs-bgm-pl-on {
		display: inline;
	}

	body.pcf-on .aihx .pcfrs-bgm-name {
		margin: 10px 0 0;
		overflow: hidden;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.4;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.pcf-on .aihx .pcfrs-bgm-meta {
		display: block;
		margin: 2px 0 0;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 1.5;
	}
}

/* 펼친 목록 — 옛 찾기 줄(css/sfx.css)과 같은 흰 카드 · 넉넉한 줄 · 고른 줄 굵게 + 오른쪽 체크(크롬 · 엣지 135+ 만 · 모르는 브라우저는 기본 목록) */
@supports (appearance: base-select) {
	@media (min-width: 1025px) {
		body.pcf-on .aihx .pcfrs-snd-sel select {
			display: inline-flex;
			align-items: center;
			min-height: 0;
			appearance: base-select;
		}

		body.pcf-on .aihx .pcfrs-snd-sel select::picker-icon {
			display: none;
		}

		body.pcf-on .aihx .pcfrs-snd-sel select::picker(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, .06), 0 8px 24px rgba(0, 0, 0, .12);
			appearance: base-select;
		}

		body.pcf-on .aihx .pcfrs-snd-sel option {
			display: flex;
			align-items: center;
			gap: 12px;
			min-height: 36px;
			padding: 0 10px;
			border-radius: var(--pcf-ui-r-ctl);
			background: transparent;
			color: var(--gray-700);
			font-size: 14px;
			cursor: pointer;
		}

		body.pcf-on .aihx .pcfrs-snd-sel option:hover,
		body.pcf-on .aihx .pcfrs-snd-sel option:focus-visible {
			background: var(--gray-100);
			color: var(--gray-900);
			outline: 0;
		}

		body.pcf-on .aihx .pcfrs-snd-sel option:checked {
			color: var(--gray-900);
			font-weight: 500;
		}

		body.pcf-on .aihx .pcfrs-snd-sel option::checkmark {
			order: 1;
			margin-left: auto;
			color: var(--brand-action);
		}
	}
}

/* ── 13. 찾기 칸 = 제목 줄 오른쪽 · 2026-10-25 운영자 14판 「찾기칸 → 가」(inc/pc-frame-resources.php 13절)
   목록 다섯 쪽(엑셀 서식 · 무료 도구 · 갤러리 셋 — 효과음 · 배경음악은 10/27 필터 줄로 옮겼다 · 11절) 머리 = 왼쪽 경로 아래 제목 · 설명 | 오른쪽 찾기 칸 400 × 44(공용 부품 .pcf-listq--hd — css/pcf-ui.css) · 제목 · 설명 두 줄 높이 가운데
   갤러리 머리 = 도구 셸 띠(.otl-band — #page 밖이라 .aihx 로 좁힌다) · 서식 · 도구 머리 = .rsai-lh · 설명 폭(760)은 옛 규칙 그대로
   찾는 동안 「새로 들어온」 줄 셋(8 · 9 · 11절)을 접는다(js 5 · 6 · 8절이 hidden — 그 줄의 display 규칙이 hidden 을 덮어 따로 적는다)
   폰 · 태블릿(~1024)엔 칸이 없다(옛 화면 그대로) ── */
.pcfrs-hq {
	display: none;
}

@media (min-width: 1025px) {
	body.pcf-on .aihx .otl-band:has(> .pcfrs-hq),
	body.pcf-on #page .rsai-lh:has(> .pcfrs-hq) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 40px;
		align-items: start;
	}

	body.pcf-on .aihx .otl-band:has(> .pcfrs-hq) > :not(.pcfrs-hq),
	body.pcf-on #page .rsai-lh:has(> .pcfrs-hq) > :not(.pcfrs-hq) {
		grid-column: 1;
		min-width: 0;
	}

	/* 제목 위 10(옛 규칙 margin-top)은 그대로 — 칸은 제목 · 설명 두 줄을 합친 높이의 가운데 */
	body.pcf-on .aihx .otl-band > .pcfrs-hq,
	body.pcf-on #page .rsai-lh > .pcfrs-hq {
		display: flex;
		grid-row: 1 / span 2;
		grid-column: 2;
		align-self: center;
		margin-top: 10px;
	}

	/* 룩북 상세 주소(#/{브랜드})로 바로 들어온 화면 — 목록 줄(10절)처럼 숨는다 */
	body.pcf-on.dsg-spa[data-view="detail"] .aihx .otl-band > .pcfrs-hq {
		display: none;
	}

	body.pcf-on .aihx .pcfrs-sls-new[hidden] {
		display: none;
	}

	/* 무료 도구 — 찾는 동안 「많이 쓰는 도구」 접기 · 표에서 맞지 않는 줄 숨김 · 없을 때 한 줄 · 맨 아래 「자료실 모두에서 찾기 ›」(공용 .pcf-listwide — js 11절) */
	body.pcf-on #page .rsai-tl .rsai-pop[hidden],
	body.pcf-on #page .rsai-tl .rsai-tt > li[hidden],
	body.pcf-on #page .rsai-tl .pcfrs-tl-empty[hidden] {
		display: none;
	}

	body.pcf-on #page .rsai-tl .pcfrs-tl-empty {
		margin: 24px 0 0;
		color: var(--gray-500);
		font-size: 15px;
		text-align: center;
	}
}

/* 칸이 좁아지는 PC 폭 — 찾기 칸 320 */
@media (min-width: 1025px) and (max-width: 1199px) {
	body.pcf-on .aihx .otl-band > .pcfrs-hq,
	body.pcf-on #page .rsai-lh > .pcfrs-hq {
		width: 320px;
	}
}

/* ── 14. 자료실 찾기 결과(/resources/?q= — 홈 찾기 칸이 보내는 곳) · 2026-10-25(inc/pc-frame-resources.php 14절)
   1차 = 맨 위 한 줄 가득 큰 칸 × 48 → 같은 날 2차(홈 머리를 목록 머리와 같게) = 경로 · 제목 · 한 줄 | 찾기 칸 · 폰 · 태블릿은 옛 화면 그대로(경로 · 칸이 숨는다) ── */
.aihs > .pcfrs-sqc {
	display: none;
}

@media (min-width: 1025px) {
	/* 같은 날 2차 = 홈 · 목록 일곱 쪽과 같은 머리 — 경로(하위 메뉴 줄 아래 32 · 옛 결과 칸 .aihc 의 위 26 은 뺀다) → 옛 제목 칸(.aihs-h — 제목 22 · 한 줄 14 를 목록 머리 값으로) | 오른쪽 찾기 칸 400 × 44
	   옛 칸 차례 = 경로 · 찾기 칸 · .aihs-h · 묶음들 → 격자 둘째 줄에 .aihs-h 와 칸을 나란히 · 나머지는 두 칸을 다 쓴다 */
	body.pcf-on #page .aihs:has(> .pcfrs-hq) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 40px;
		padding-top: 0;
	}

	body.pcf-on #page .aihs:has(> .pcfrs-hq) > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	body.pcf-on #page .aihs > .pcfrs-sqc {
		display: flex;
		grid-row: 1;
	}

	body.pcf-on #page .aihs:has(> .pcfrs-hq) > .aihs-h {
		grid-row: 2;
		grid-column: 1;
		margin-top: 10px;
	}

	body.pcf-on #page .aihs:has(> .pcfrs-hq) .aihs-t {
		font-weight: 600;
		line-height: 33px;
	}

	body.pcf-on #page .aihs:has(> .pcfrs-hq) .aihs-s {
		margin-top: 4px;
		line-height: 21px;
	}

	/* 칸 = 제목 · 한 줄 두 줄(33 + 4 + 21) 높이 가운데 — 목록 머리(13절)와 같은 자리 */
	body.pcf-on #page .aihs > .pcfrs-hq {
		grid-row: 2;
		grid-column: 2;
		align-self: start;
		margin-top: 17px;
	}
}