/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/**
 * PC 새 틀(미리 보기) — 무료 강의 탭 첫 화면 = 전체 강의 목록 · 2026-10-20
 * 운영자 10/19 1차 「채용한다면 인프런형 · 위에 버튼이 너무 많네요 · 필터는 클릭했을 때만 · 강의 카테고리 높이는 낮춰서」
 *   → 10/20 2차 「a3를 채택. 단, … 필터는 제거. 정렬 기본은 '최신순'」(시안 claude.ai 아티팩트 2gvQCuFMHB78LrwkVS5AMH 판 2 A3)
 *   = 한 줄(분야 밑줄 탭 46 → 10/25 50 · 오른쪽 찾기 칸 · 끝 정렬 「최신순 ▾」) → 5열 격자 20칸 → 쪽 번호
 * 「1분 쇼츠」 탭(.pcfl--sh — 같은 날 저녁 「A, 쪽 번호로 갑니다」 · 시안 claude.ai 아티팩트 Ns8K8BkZ4yd1JM1ApbDYVD)
 *   = 같은 한 줄 → 세로 카드 6열(메인 홈 「1분 쇼츠」 줄과 같은 크기) 24칸 → 쪽 번호
 * 「클래스」 탭(.pcfc — 10/21 운영자 「전체강의, 1분쇼츠처럼 하위탭 … 통일감있게」 · inc/pc-frame-class.php 가 이 파일을 싣는다)
 *   = 같은 한 줄(종류 탭 전체 · 무료 클래스 · 멤버십 클래스 · 정렬 없음) — 2절 줄 · 탭 규칙을 :is(.pcfl, .pcfc) 로 같이 쓴다
 * 마크업 inc/pc-frame-lecture.php · 움직임 js/pcf-lecture.js · 정본 v4 13.5 목록 틀 · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만)
 * 카드 · 격자 · 쪽 번호 · 두드림 칸 = css/pcf-home.css 의 :is(.pcf-home, .pcfl) 규칙(메인 홈 「전체 강의」와 같은 부품)
 * 정본과 다른 점 없음 — 분야 탭 지금 칸 = 검정 밑줄(4.5 같은 목록을 거르는 탭) · 정렬 메뉴 = 모서리 8 · 그림자 한 겹
 * 부품 규칙은 .pcfl 아래로 건다(클래스 셋) — 단추 초기화의 :hover·:focus 판(클래스 둘 · 요소 둘)을 이기도록
 */

/* 폰·태블릿(~1024) — 옛 강의 화면 그대로 */
@media (max-width: 1024px) {
	body.pcf-on .pcfl {
		display: none;
	}
}

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 강의 홈 선반 · 무료 강의 세로 목록 · 쇼츠 목록은 PC 폭에서 숨긴다(새 목록이 있는 화면만 — body.pcfl-on) ════ */
	body.pcfl-on #page #lecture-home .lh-main > :not(.pcfl) {
		display: none;
	}

	body.pcf-on #page .pcfl {
		padding-bottom: 40px;
		color: var(--gray-900);
		font-size: 14px;
		line-height: 1.5;
	}

	/* 하위 메뉴 줄 바로 아래가 이 한 줄(전체 강의 · 1분 쇼츠 · 클래스 탭)이면 칸 위 여백 32(css/pcf.css 무료 강의 홈 절 — 첫 내용 자리)를 8 로.
	   2026-10-21 운영자 「빨간 박스 영역 마진 좀 좁혀주세요」(하위 메뉴 줄 ↔ 분야 탭 줄 사이 · 실제 화면에 16 · 12 · 8 을 끼워 견줌 → 8 = 탭 글자가 위 줄 글자와 비슷한 거리).
	   → 2026-10-25 탭 줄 46 → 50(아래 2절) 에 맞춰 6 — 탭 글자 · 찾기 칸 자리는 그대로(8 + 23 = 6 + 25)이고 줄 선만 2 내려간다.
	   첫 내용이 제목인 공식 교재 · 내 공부 기록 탭과 화면 안 검색 목록(?q=)은 32 그대로 */
	body.pcf-on #page #lecture-home .lh-shell:has(.pcfl-bar) {
		padding-top: 6px;
	}

	/* ════ 2. 한 줄 — 분야 밑줄 탭(왼쪽 · 아이콘 + 이름 + 강의 수) · 정렬(오른쪽 끝)
	   줄 · 탭 규칙은 「클래스」 탭(.pcfc — 종류 탭 전체 · 무료 클래스 · 멤버십 클래스 · 10/21)도 같이 쓴다 = :is(.pcfl, .pcfc)(특이도 그대로) · 정렬은 .pcfl 에만 ════ */
	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-bar {
		display: flex;
		align-items: stretch;
		gap: 16px;
		border-bottom: 1px solid var(--gray-200);
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cats {
		display: flex;
		min-width: 0;
		margin-right: auto;
	}

	/* 탭 높이 50(그 전 46) — 2026-10-25 운영자 「무료강의/커뮤니티/멤버십 찾기 칸 → 지금대로, 다만 아래 여백이 너무 붙어 있어서 답답합니다. 여백을 좀 넣어주세요」
	   → 56 으로 넣었다가 같은 날 「height 50px 정도가 좋음」(개발자 도구로 고쳐 본 값) = 50 · 찾기 칸(36)이 줄 가운데라 줄 선까지 5 → 7 · 위 여백을 그만큼 줄여 탭 글자 · 찾기 칸 자리는 그대로(1절) */
	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 50px;
		margin: 0 0 -1px;
		padding: 0 14px;
		border-bottom: 2px solid transparent;
		color: var(--gray-600);
		font-size: 14px;
		white-space: nowrap;
		box-sizing: border-box;
	}

	/* 첫 칸 글자를 칸 왼쪽 선(로고 · 하위 메뉴 · 카드)에 맞춘다 */
	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat:first-child {
		padding-left: 2px;
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat svg {
		color: var(--gray-500);
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat b {
		font-weight: 500;
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat small {
		color: var(--gray-400);
		font-size: 12px;
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat:hover {
		color: var(--gray-900);
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat.is-on {
		border-bottom-color: var(--gray-900);
		color: var(--gray-900);
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat.is-on b {
		font-weight: 600;
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat.is-on small {
		color: var(--gray-600);
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat.is-on svg {
		color: var(--gray-900);
	}

	/* 찾기 칸으로 찾는 중 — 찾은 것이 0 인 탭은 흐리게(누를 수는 있다 · 2026-10-23 찾기 칸 — 멤버십 세션이 더함 · 멤버십 목록 둘도 이 규칙) */
	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat.is-zero {
		color: var(--gray-400);
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat.is-zero svg {
		color: var(--gray-300);
	}

	body.pcf-on #page :is(.pcfl, .pcfc) .pcfl-cat:focus-visible,
	body.pcf-on #page .pcfl .pcfl-sbtn:focus-visible,
	body.pcf-on #page .pcfl .pcfl-smenu button:focus-visible {
		outline: 2px solid var(--gray-900);
		outline-offset: -2px;
	}

	/* 정렬 — 「최신순 ▾」 → 최신순 · 인기순 메뉴 */
	body.pcf-on #page .pcfl .pcfl-sort {
		position: relative;
		display: flex;
		flex: none;
		align-items: center;
	}

	body.pcf-on #page .pcfl .pcfl-sbtn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 36px;
		padding: 0 4px 0 10px;
		border-radius: 6px;
		color: var(--gray-700);
		font-size: 14px;
		font-weight: 500;
	}

	body.pcf-on #page .pcfl .pcfl-sbtn:hover {
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfl .pcfl-sbtn svg {
		color: var(--gray-500);
		transition: transform 0.15s ease;
	}

	body.pcf-on #page .pcfl .pcfl-sbtn[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	body.pcf-on #page .pcfl .pcfl-smenu {
		position: absolute;
		top: calc(50% + 22px);
		right: 0;
		z-index: 6;
		min-width: 132px;
		padding: 6px;
		border-radius: 8px;
		background: var(--surface-white);
		box-shadow: 0 6px 20px rgba(24, 24, 24, 0.14);
		box-sizing: border-box;
	}

	body.pcf-on #page .pcfl .pcfl-smenu[hidden] {
		display: none;
	}

	body.pcf-on #page .pcfl .pcfl-smenu button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 34px;
		padding: 0 10px;
		border-radius: 6px;
		color: var(--gray-700);
		font-size: 14px;
		box-sizing: border-box;
	}

	body.pcf-on #page .pcfl .pcfl-smenu button:hover {
		background: var(--gray-50);
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfl .pcfl-smenu button[aria-checked="true"] {
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on #page .pcfl .pcfl-smenu button[aria-checked="false"] svg {
		visibility: hidden;
	}

	/* ════ 3. 격자 · 첫 칸 두드림 챌린지 안내 · 쪽 번호(모양은 css/pcf-home.css) ════ */
	body.pcf-on #page .pcfl .pcfh-grid {
		margin-top: 28px;
	}

	/* 1분 쇼츠 — 세로 카드 6열(메인 홈 쇼츠 줄 .pcfh-row--6 과 같은 폭) */
	body.pcf-on #page .pcfl.pcfl--sh .pcfh-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	/* 「전체 강의」 두 줄 뒤 「1분 쇼츠」 줄 — 2026-10-24 운영자 「가 · 쇼츠 줄 끼우기」(inc/pc-frame-lecture.php oppadu_pcfl_shrow)
	   격자 한 줄을 다 쓰고 위아래 가는 선 · 세로 카드 여섯(1분 쇼츠 탭과 같은 카드 · 같은 사이 32 16) · 머리 = 「1분 쇼츠」 + 회색 한 마디 · 오른쪽 「1분 쇼츠 전체 보기 ›」 */
	body.pcf-on #page .pcfl .pcfh-grid > .pcfl-shrow {
		grid-column: 1 / -1;
		padding: 24px 0 26px;
		border-top: 1px solid var(--gray-200);
		border-bottom: 1px solid var(--gray-200);
	}

	body.pcf-on #page .pcfl .pcfl-shrow-h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin: 0 0 14px;
	}

	body.pcf-on #page .pcfl .pcfl-shrow-h b {
		color: var(--gray-900);
		font-size: 17px;
		font-weight: 600;
		letter-spacing: -0.02em;
	}

	body.pcf-on #page .pcfl .pcfl-shrow-h small {
		margin-left: 8px;
		color: var(--gray-500);
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0;
	}

	body.pcf-on #page .pcfl .pcfl-shrow-h 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 #page .pcfl .pcfl-shrow-h a:hover {
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfl .pcfl-shrow-g {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 32px 16px;
	}

	body.pcf-on #page .pcfl .pcfl-promo-go {
		margin-top: 4px;
		color: var(--gray-900);
		font-size: 13px;
		font-weight: 600;
	}

	body.pcf-on #page .pcfl .pcfl-none {
		grid-column: 1 / -1;
		padding: 64px 0;
		color: var(--gray-500);
		text-align: center;
	}
}