/* ============================================================
   쇼츠 피드형 플레이어 (2026 리뉴얼) — 흰색 테마 · 세로 스크롤-스냅
   - 데스크탑: [영상 스크롤-스냅 피드] + [강의노트 우측 항상 표시] 2단
   - 모바일: 영상 풀스크린 피드, 강의노트는 바텀시트(본문 버튼)
   - 색·간격·라운드·그림자·트랜지션은 style.css :root 변수 사용
   ============================================================ */

:root {
	--shorts-header-h: 60px;
	--shorts-note-w: 800px;
	--shorts-frame-gap: 80px;                                  /* 위/아래 미리보기 여백(슬라이드 peek) */
	--shorts-frame-h: calc(100dvh - var(--shorts-header-h) - var(--shorts-frame-gap));
	--shorts-frame-w: calc(var(--shorts-frame-h) * 9 / 16);
	--shorts-rail-size: 52px;
}

/* 피드 화면에서는 스크롤 잠금(트랙·노트만 스크롤).
   실제 body 클래스는 shorts-template-post-shorts-template(-php) / post-template-...
   이므로 substring 매칭으로 post·shorts 양쪽을 모두 커버한다. */
body[class*="template-post-shorts-template"] {
	overflow: hidden;
}
/* #main(ID) 으로 강하게 — 전역 `.single #main { margin-top:30px }` 를 이긴다 */
body[class*="template-post-shorts-template"] #main.shorts-post-main {
	margin-top: 0;
	padding: 0;
}
body[class*="template-post-shorts-template"] .back-to-top-button,
body[class*="template-post-shorts-template"] #wpd-bubble-wrapper {
	display: none !important;
}

.shorts-feed {
	position: relative;
}

/* hidden 속성 강제 — .rail-btn/.shorts-endcard 의 display 가 [hidden] 을 이기는 문제 방지 */
.shorts-feed [hidden] {
	display: none !important;
}

.shorts-main {
	display: flex;
	height: calc(100dvh - var(--shorts-header-h));
}

/* ── 영상 스테이지 ─────────────────────────────────────── */
.shorts-stage {
	position: relative;
	flex: 1;
	min-width: 0;
	background: var(--bg-subtle);
	overflow: hidden;
}

/* 스크롤-스냅 트랙 */
.shorts-track {
	height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.shorts-track::-webkit-scrollbar {
	display: none;
}

.shorts-slide {
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide-frame {
	position: relative;
	height: var(--shorts-frame-h);
	width: var(--shorts-frame-w);
	max-width: 90%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: #000;
	box-shadow: var(--shadow-md);
	opacity: 0.55;
	transition: opacity var(--transition-base);
}
.shorts-slide.is-active .slide-frame {
	opacity: 1;
}
.slide-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 단일 플레이어 오버레이 — 가운데 슬라이드 위에 고정, pointer-events:none 로 스크롤 통과 */
.shorts-player-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: var(--shorts-frame-h);
	width: var(--shorts-frame-w);
	max-width: 90%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: #000;
	z-index: 3;
	pointer-events: none;
	box-shadow: var(--shadow-lg);
	transition: opacity var(--transition-fast);
}
.shorts-stage.scrolling .shorts-player-overlay {
	opacity: 0;
}
.shorts-player-overlay #player,
.shorts-player-overlay iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	border-radius: var(--radius-xl);
}

/* 음소거 안내 (첫 자동재생은 음소거 → 클릭하면 소리 켜짐, 영상 우측 상단) */
.shorts-mute-hint {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);
	border: 0;
	border-radius: var(--radius-full);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: var(--font-sm, 0.875rem);
	font-weight: 700;
	cursor: pointer;
	pointer-events: auto;   /* 오버레이는 pointer-events:none 이므로 힌트만 활성화 */
	z-index: 4;
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(2px);
}
.shorts-mute-hint:hover {
	background: rgba(0, 0, 0, 0.85);
}
.mute-hint-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.18);
}
.mute-hint-ico svg {
	width: 22px;
	height: 22px;
}

/* ── 위/아래 내비게이션 (유튜브 쇼츠형) ───────────────────── */
.shorts-nav {
	position: absolute;
	top: 50%;
	right: var(--space-lg);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	z-index: 6;
}
.nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	border: 0;
	background: var(--gray-100);
	color: var(--text-secondary);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: background var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-btn:hover {
	background: var(--gray-200);
}
.nav-btn:active {
	transform: scale(0.92);
}
.nav-btn:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
.nav-btn svg {
	width: 34px;
	height: 34px;
}

/* ── 액션 레일 (영상 우측 가장자리에 고정) ───────────────── */
.shorts-rail {
	position: absolute;
	top: 50%;
	left: 50%;
	/* 영상 프레임 우측 = 중앙 + 프레임폭/2 + 간격 */
	transform: translate(calc(var(--shorts-frame-w) / 2 + 20px), -50%);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	z-index: 5;
}

.rail-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.rail-mobile-only {
	display: none;
}

.rail-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--shorts-rail-size);
	height: var(--shorts-rail-size);
	border-radius: var(--radius-full);
	background: var(--gray-100);
	color: var(--text-secondary);
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-fast), transform var(--transition-fast);
}
.rail-btn:hover .rail-ico {
	background: var(--gray-200);
}
.rail-btn:active .rail-ico {
	transform: scale(0.92);
}
.rail-ico svg {
	width: 26px;
	height: 26px;
}
.rail-label {
	font-size: var(--font-xs);
	font-weight: 600;
	color: var(--text-secondary);
}

.rail-btn.bookmarked .rail-ico {
	background: var(--color-warning);
	color: #fff;
}
.rail-btn.bookmarked .rail-label {
	color: var(--color-warning);
}

/* 예제파일 팝오버(복수 파일) */
.rail-popover {
	position: absolute;
	right: calc(var(--shorts-rail-size) + var(--space-md));
	z-index: 7;
	background: #fff;
	color: var(--text-primary);
	border-radius: var(--radius-nm);
	box-shadow: var(--shadow-lg);
	padding: var(--space-sm);
	min-width: 200px;
	max-width: 280px;
}

/* ── 강의 노트 컬럼 (데스크탑 우측 항상) ─────────────────── */
.shorts-note-col {
	width: var(--shorts-note-w);
	flex-shrink: 0;
	height: 100%;
	overflow-y: auto;
	background: #fff;
	border-left: 1px solid var(--surface-200);
	display: flex;
	flex-direction: column;
}
.note-handle {
	display: none;
}
/* 데스크탑: 제목을 본문 흐름(광고 아래)으로 옮겼으므로 헤더 바는 숨김.
   모바일 바텀시트에서는 닫기 버튼용으로 다시 표시(아래 미디어쿼리). */
.note-head {
	display: none;
	align-items: center;
	justify-content: flex-end;
	padding: var(--space-sm) var(--space-md);
	flex-shrink: 0;
}
/* 강의노트 제목 — 광고 아래, 본문 위. 구분선으로 영역 분리 */
.note-title {
	margin: 0 0 var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--surface-200);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.45;
	color: var(--text-primary);
}
.note-close {
	display: none;
	background: transparent;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0 var(--space-xs);
}
.note-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-lg);
	-webkit-overflow-scrolling: touch;
}
.shorts-note {
	color: var(--t-body);
	line-height: 1.7;
	word-break: break-word;
}
.shorts-note img {
	max-width: 100%;
	height: auto;
}

/* ── 강의 노트 본문(쇼츠) — 홈페이지 본문 스타일을 좁은 패널에 맞게 보정 ──
   본문은 the_content 필터를 그대로 통과(subcat_func/numbered-list/boxed/
   highlight-yellow/excel-fx). style.css 전역 규칙이 넓은 단일글 기준이라
   좁은 노트 패널에서는 좌우 패딩·캡션 폭·여백만 보정한다(번호·강조 스타일은 유지). */
.shorts-note .subcat_func {
	font-size: 0.96rem;
}
/* 전역 .subcat_func p { padding: 0 35px } 가 좁은 패널에선 과해 본문이 눌리는 문제 상쇄 */
.shorts-note .subcat_func p,
.shorts-note .subcat_func h6 {
	padding: 0;
	margin: 0.85em 0;
}
.shorts-note .subcat_func > h2,
.shorts-note .subcat_func > h3,
.shorts-note .subcat_func > h5 {
	font-size: 1.12rem;
	line-height: 1.4;
}

/* 단계 번호 — 옛 하늘색(#00aadd) 원형을 현재 브랜드 그린으로 교체. 패널 폭에 맞게 들여쓰기 보정 */
.shorts-note .numbered-list {
	margin-left: 0;
}
.shorts-note .numbered-list ol,
.shorts-note .numbered-list ul {
	margin: 0 0 16px 2.3em !important;
	padding: 0;
	text-shadow: none;   /* 전역 numbered-list 의 엠보싱 그림자 제거(낡은 느낌) */
}
.shorts-note .numbered-list ol li:not(.post-item),
.shorts-note .numbered-list ul li:not(.post-item) {
	margin: 16px 0;
}
/* 원형 번호: 하늘색 → 브랜드 그린(--primary) */
.shorts-note .numbered-list ol li:not(.post-item)::before {
	background: var(--primary);
	font-weight: 700;
}

/* 캡션/이미지 — 인라인 width 가 패널 폭을 넘지 않도록 가운데 정렬 + 폭 제한 */
.shorts-note .wp-caption,
.shorts-note figure.wp-caption {
	max-width: 100% !important;
	width: auto !important;
	margin: 12px auto;
}
.shorts-note .subcat_func img,
.shorts-note .wp-caption img {
	max-width: 100% !important;
	height: auto;
	border-radius: var(--radius-md);
	display: block;
	margin: 0 auto;
}

/* boxed / excel-fx 패널 여백 보정 */
.shorts-note .boxed {
	margin: 16px 0;
}
.shorts-note pre.excel-fx {
	margin: 12px 0;
	white-space: pre-wrap;
	word-break: break-word;
}

/* 광고: 최상단(제목 위). 패널 폭 안에 안전하게 가두고, 넘치면 잘라 레이아웃 붕괴 방지.
   아래 구분선으로 제목 영역과 분리(광고→제목→본문). 빈 슬롯이면 통째로 숨김. */
.shorts-note-ad {
	margin: 0 0 var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--surface-200);
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}
.shorts-note-ad:empty {
	display: none;
}
.shorts-note-ad .oa-ad,
.shorts-note-ad ins.adsbygoogle {
	max-width: 100% !important;
}

/* ── 댓글 패널 (슬라이드/바텀시트) ───────────────────────── */
.shorts-panel {
	position: fixed;
	top: var(--shorts-header-h);
	right: 0;
	width: var(--shorts-panel-w, 520px);
	max-width: 92vw;
	height: calc(100dvh - var(--shorts-header-h));
	background: #fff;
	box-shadow: var(--shadow-lg);
	z-index: var(--z-modal);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--transition-base);
	will-change: transform;
}
.shorts-panel.open {
	transform: translateX(0);
}
.panel-handle {
	display: none;
}
.panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--surface-200);
	flex-shrink: 0;
}
.panel-title {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--text-primary);
}
.panel-close {
	background: transparent;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0 var(--space-xs);
}
.panel-close:hover {
	color: var(--text-primary);
}
.panel-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-lg);
	-webkit-overflow-scrolling: touch;
}

/* ── 백드롭 ───────────────────────────────────────────── */
.shorts-backdrop {
	position: fixed;
	inset: var(--shorts-header-h) 0 0 0;
	background: rgba(0, 0, 0, 0.001);
	z-index: calc(var(--z-modal) - 1);
}

/* ── 엔드카드 ─────────────────────────────────────────── */
.shorts-endcard {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(253, 253, 251, 0.94);
	color: var(--text-primary);
	text-align: center;
}
.endcard-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: var(--space-xs);
}
.endcard-sub {
	color: var(--text-muted);
	margin-bottom: var(--space-xl);
}
.endcard-actions {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	flex-wrap: wrap;
}
.endcard-actions button,
.endcard-actions a {
	display: inline-block;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-full);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--surface-300);
	background: #fff;
	color: var(--text-primary);
	transition: all var(--transition-fast);
}
.endcard-actions #endcard-browse {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.endcard-actions button:hover,
.endcard-actions a:hover {
	opacity: 0.88;
}

/* ── 토스트 ───────────────────────────────────────────── */
.shorts-toast {
	position: fixed;
	left: 50%;
	bottom: 12%;
	transform: translateX(-50%) translateY(10px);
	z-index: var(--z-toast);
	background: var(--gray-800);
	color: #fff;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-full);
	font-size: var(--font-sm, 0.875rem);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transition: opacity var(--transition-base), transform var(--transition-base);
	pointer-events: none;
}
.shorts-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ============================================================
   모바일 (≤ 999px) — 풀스크린 영상 피드 + 우측 하단 레일 + 바텀시트
   ============================================================ */
@media screen and (max-width: 999px) {
	.shorts-main {
		display: block;
	}

	/* block 레이아웃에선 flex:1 높이가 사라지므로 스테이지에 명시적 높이 부여
	   (그래야 .shorts-track height:100% / 슬라이드 100% 가 해석돼 스냅 스크롤 동작) */
	.shorts-stage {
		height: calc(100dvh - var(--shorts-header-h));
	}

	.slide-frame {
		height: 100%;
		width: 100%;
		max-width: 100%;
		border-radius: 0;
		opacity: 1;
		box-shadow: none;
	}

	.shorts-player-overlay {
		top: 0;
		left: 0;
		transform: none;
		height: calc(100dvh - var(--shorts-header-h));
		width: 100%;
		max-width: 100%;
		border-radius: 0;
		box-shadow: none;
	}
	.shorts-player-overlay #player,
	.shorts-player-overlay iframe {
		border-radius: 0;
	}

	/* 레일: 우측 하단 오버레이 */
	.shorts-rail {
		top: auto;
		left: auto;
		right: var(--space-sm);
		bottom: 84px;
		transform: none;
		gap: var(--space-md);
	}
	.rail-mobile-only {
		display: flex;
	}
	.rail-ico {
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		box-shadow: none;
	}
	.rail-label {
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	}
	.rail-popover {
		right: 64px;
		bottom: 140px;
	}

	/* 위/아래 버튼은 데스크탑 전용 — 모바일은 스와이프 */
	.shorts-nav {
		display: none;
	}

	/* 강의 노트 = 바텀시트 (헤더 아래 전체 높이로 꽉 채움) */
	.shorts-note-col {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: calc(100dvh - var(--shorts-header-h));
		border-left: 0;
		border-radius: 0;
		box-shadow: var(--shadow-lg);
		z-index: var(--z-modal);
		transform: translateY(100%);
		transition: transform var(--transition-base);
	}
	.shorts-note-col.open {
		transform: translateY(0);
	}
	.note-handle {
		display: block;
		width: 40px;
		height: 4px;
		border-radius: var(--radius-full);
		background: var(--gray-300);
		margin: var(--space-sm) auto 0;
		flex-shrink: 0;
	}
	.note-close {
		display: block;
	}
	/* 모바일 바텀시트: 닫기 버튼용 헤더 다시 표시(우측 정렬) */
	.note-head {
		display: flex;
	}

	/* 댓글 바텀시트 */
	.shorts-panel {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		height: 72dvh;
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
		transform: translateY(100%);
	}
	.shorts-panel.open {
		transform: translateY(0);
	}
	.panel-handle {
		display: block;
		width: 40px;
		height: 4px;
		border-radius: var(--radius-full);
		background: var(--gray-300);
		margin: var(--space-sm) auto 0;
		flex-shrink: 0;
	}

	.shorts-backdrop {
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
	}
}

@media screen and (max-width: 500px) {
	.shorts-rail {
		bottom: 76px;
	}
	.rail-ico {
		width: 44px;
		height: 44px;
	}
	.rail-ico svg {
		width: 22px;
		height: 22px;
	}
	.rail-label {
		font-size: var(--font-2xs);
	}
}