/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/* PC 새 틀(미리 보기) — 1분 쇼츠 보기(post-shorts-template.php · 옛 CSS css/shorts-feed.css — 싣기 inc/pc-frame-shorts.php). 새 틀 쇼츠 보기에서만 실린다.
   2026-10-25 운영자 「쇼츠보기 — 너비 맞춤 · 상단 네비때문에 위아래 폭이 너무 좁아짐」 → 고르기 판 10판(claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa) 「라로 확정」.
   정본 = design_handoff_oppadu_design_system_v4/oppadu-design-guide-v4.md 13.2 「재생 화면은 머리글 없이」.
   ⚠️ 옛 쇼츠 CSS 는 템플릿이 get_header() 뒤에 걸어 문서 끝에 실린다(이 파일보다 뒤) — 이 파일 규칙은 차례가 아니라 세기(body.pcf-on.pcfsh-on …)로 이긴다.
   ⛔ 화면 규칙은 body.pcf-on 아래 + @media (min-width: 1025px) — 1024 이하는 옛 화면 그대로. */

/* 새 틀이 더한 윗줄 — PC 폭에서만 보인다 */
.pcfsh-top {
	display: none;
}

@media (min-width: 1025px) {
	/* ════ 1. 머리글 없이 윗줄 하나 ════
	   머리글 두 줄 · 하위 메뉴를 숨기고 윗줄(‹ 1분 쇼츠 · 지금 쇼츠 제목 · 로그인 / 내 사진)이 길을 대신한다 — 멤버십 재생 화면(css/pcf-membership.css 1절)과 같은 규칙.
	   쇼츠 칸 높이는 옛 js/shorts-feed.js 가 칸의 실제 위치를 재서(--shorts-header-h) 저절로 맞춘다 */
	body.pcf-on.pcfsh-on .pcf-r1,
	body.pcf-on.pcfsh-on .pcf-r2,
	body.pcf-on.pcfsh-on .pcf-sub {
		display: none;
	}

	body.pcf-on.pcfsh-on {
		--pcf-r1-h: 0px;
		--nav-height: 0px;
		--pcf-sub-h: 0px;
	}

	/* 윗줄 56 — 흰 줄 + 아래 선 1px(강의실 윗줄은 검정 — 쇼츠 화면은 흰 바탕이라) · 안쪽은 가운데 칸 1,260 */
	body.pcf-on.pcfsh-on .pcfsh-top {
		display: block;
		height: 56px;
		border-bottom: 1px solid var(--gray-200);
		background: var(--surface-white);
	}

	body.pcf-on .pcfsh-top-in {
		display: flex;
		align-items: center;
		gap: 12px;
		width: var(--pcf-w);
		height: 100%;
		margin: 0 auto;
	}

	/* ‹ 1분 쇼츠 — 화살표가 로고 선에 오게 안쪽 여백만큼 왼쪽으로 */
	body.pcf-on .pcfsh-back {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 4px;
		height: 36px;
		margin-left: -8px;
		padding: 0 10px 0 4px;
		border-radius: 6px;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}

	body.pcf-on .pcfsh-back:hover {
		background: var(--gray-100);
		color: var(--gray-900);
	}

	body.pcf-on .pcfsh-back:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 0;
	}

	body.pcf-on .pcfsh-sep {
		flex: none;
		width: 1px;
		height: 16px;
		background: var(--gray-300);
	}

	body.pcf-on .pcfsh-ttl {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		color: var(--gray-600);
		font-size: 15px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 오른쪽 끝 = 머리글과 같은 부품(로그인 단추 · 내 사진 — css/custom-navigation.css) */
	body.pcf-on .pcfsh-top .oppadu-nav__login,
	body.pcf-on .pcfsh-top .oppadu-nav__avatar {
		margin-left: auto;
	}

	/* ════ 2. 너비 = 화면 가득 — 2026-10-25 운영자 「쇼츠 화면은 100% width 로 합시다. 그게 좋을 것 같아요」 ════
	   그 전(같은 날 10판 「라」) = 가운데 칸 1,260 · 영상 왼쪽 = 로고 선 · 오른쪽 칸이 남는 폭 — 넓은 화면에서 양옆이 비었다(1,920 에서 330 씩).
	   가로 짜임은 옛 화면 그대로(영상 칸 = 남는 폭 · 영상 · 단추 줄 · 넘김 단추는 그 안 옛 자리 · 오른쪽 노트 칸 = 옛 폭 · 화면 오른쪽 끝까지 — css/shorts-feed.css) ·
	   새 틀이 바꾸는 것 = 윗줄(1절 · 양 끝 = 강의실 윗줄과 같은 12 · 20) · 위아래 여백 80 → 40(영상이 커진다).
	   영상 크기 변수는 옛 파일이 :root 에서 셈한다 → 여백을 바꾸면 높이 · 폭도 여기서 다시 셈한다(--shorts-header-h 는 js 가 html 에 단다 · 옛 단추 자리 셈이 이 값을 따른다) */
	body.pcf-on.pcfsh-on #page .shorts-feed {
		width: auto;
	}

	body.pcf-on.pcfsh-on .pcfsh-top-in {
		width: auto;
		padding: 0 20px 0 12px;
	}

	body.pcf-on.pcfsh-on .pcfsh-back {
		margin-left: 0;
	}

	/* 영상 칸 폭 = 화면 − 노트 칸(옛 셈 min(725, 50%)) — 좁은 폭(1,025~1,440)에선 영상이 넘김 단추(칸 오른쪽 24 + 64)와 겹치지 않게 영상 폭을 칸 − 192 로 묶는다
	   (여백 40 으로 키운 영상이 1,100 에서 단추와 11 겹쳤다 · 넓은 폭은 높이가 먼저 걸려 그대로) */
	body.pcf-on.pcfsh-on {
		--shorts-frame-gap: 40px;
		--shorts-frame-h: min(calc(100dvh - var(--shorts-header-h) - var(--shorts-frame-gap)), calc((100vw - min(725px, 50vw) - 192px) * 16 / 9));
		--shorts-frame-w: calc(var(--shorts-frame-h) * 9 / 16);
	}
}

@media (min-width: 1025px) {
	/* ════ 3. 양옆 세로 배너 = 왼쪽 하나 · 영상 왼쪽 빈칸 가운데 — 2026-10-25 운영자 「쇼츠 화면에서는 우측 광고 제거하고 쇼츠 영상 왼쪽에만 광고 넣읍시다」 ════
	   배너 = 새 틀 양옆 배너(inc/pc-frame-rails.php · css/pcf-rails.css · js/pcf-rails.js) — 오른쪽 자리는 inc/pc-frame-shorts.php 가 뺀다(화면 가득 뒤 노트 칸을 덮었다).
	   빈칸 = 영상 칸(화면 − 노트 칸 min(725, 50%) − 선 1) − 영상 폭 → 왼쪽 반 · 배너 가운데 = 그 반의 가운데 · 위 = 영상 윗선(위아래 여백 40 의 반).
	   끼울지 · 숨길지는 js/pcf-rails.js 가 같은 빈칸(js/pcf-shorts.js window.pcfRailGutter)으로 정한다 — 160 에 양옆 24 가 안 남으면 끼우지 않는다(1920 × 1080 빈칸 321 · 1680 × 1050 209 · 1440 × 900 은 없음). */
	body.pcf-on.pcfsh-on .pcf-rail--l {
		top: calc(var(--shorts-frame-gap) / 2);
		left: calc((100vw - min(725px, 50vw) - 1px - var(--shorts-frame-w)) / 4 - var(--pcf-rail-w, 160px) / 2);
	}
}