/*
 * PPTShare — 프론트엔드 스타일
 *
 * 구성
 *   1. 디자인 토큰 (색·간격·타이포)
 *   2. 리셋 / 기본 요소
 *   3. 레이아웃 (컨테이너·그리드)
 *   4. 헤더 / 푸터
 *   5. 컴포넌트 (버튼·카드·칩·필터·갤러리)
 *   6. 페이지별 (홈·상세·빈 상태)
 *   7. 반응형
 *
 * 클래스는 pps- 접두사 + BEM 을 쓴다. 워드프레스 코어 클래스와 충돌하지 않기 위함.
 */

/* ============================================================
   1. 디자인 토큰
   ============================================================ */
:root {
	/* 색 */
	--pps-bg:            #ffffff;
	--pps-bg-subtle:     #f7f8fa;
	--pps-bg-sunken:     #eef0f4;
	--pps-surface:       #ffffff;
	--pps-border:        #e3e6ec;
	--pps-border-strong: #c9cdd6;

	--pps-text:          #16181d;
	--pps-text-muted:    #61656e;
	--pps-text-faint:    #8b8f99;

	--pps-accent:        #4f46e5;
	--pps-accent-hover:  #4338ca;
	--pps-accent-soft:   #eef2ff;
	--pps-accent-text:   #ffffff;

	/* 간격 (4px 배수) */
	--pps-s1: 4px;
	--pps-s2: 8px;
	--pps-s3: 12px;
	--pps-s4: 16px;
	--pps-s5: 24px;
	--pps-s6: 32px;
	--pps-s7: 48px;
	--pps-s8: 64px;

	/* 라운드 */
	--pps-r-sm: 6px;
	--pps-r-md: 10px;
	--pps-r-lg: 16px;
	--pps-r-full: 999px;

	/* 그림자 */
	--pps-shadow-sm: 0 1px 2px rgba(16, 18, 23, .06);
	--pps-shadow-md: 0 4px 16px rgba(16, 18, 23, .08);
	--pps-shadow-lg: 0 12px 32px rgba(16, 18, 23, .12);

	/* 타이포 — 한국어 가독성을 위해 시스템 폰트를 우선한다 */
	--pps-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard",
		"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
	--pps-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--pps-container: 1200px;
}

/* 다크 모드: OS 설정을 따른다 */
@media (prefers-color-scheme: dark) {
	:root {
		--pps-bg:            #0f1115;
		--pps-bg-subtle:     #15181e;
		--pps-bg-sunken:     #1b1f27;
		--pps-surface:       #171a21;
		--pps-border:        #272c36;
		--pps-border-strong: #3a4150;

		--pps-text:          #e8eaf0;
		--pps-text-muted:    #a3a9b7;
		--pps-text-faint:    #767d8c;

		--pps-accent:        #7c73f0;
		--pps-accent-hover:  #918af5;
		--pps-accent-soft:   #1e1f3d;

		--pps-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--pps-shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
		--pps-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
	}
}

/* ============================================================
   2. 리셋 / 기본 요소
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--pps-bg);
	color: var(--pps-text);
	font-family: var(--pps-font);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	word-break: keep-all;      /* 한국어 줄바꿈: 단어 중간에서 끊지 않는다 */
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--pps-accent); text-decoration: none; }
a:hover { color: var(--pps-accent-hover); }

h1, h2, h3, h4 {
	margin: 0 0 var(--pps-s3);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
}

p { margin: 0 0 var(--pps-s3); }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--pps-accent);
	outline-offset: 2px;
	border-radius: var(--pps-r-sm);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pps-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--pps-s3) var(--pps-s4);
	background: var(--pps-accent);
	color: #fff;
	border-radius: 0 0 var(--pps-r-md) 0;
}
.pps-skip-link:focus { left: 0; color: #fff; }

.pps-icon { flex: none; vertical-align: middle; }

/* ============================================================
   3. 레이아웃
   ============================================================ */
.pps-container {
	width: 100%;
	max-width: var(--pps-container);
	margin: 0 auto;
	padding: 0 var(--pps-s5);
}
.pps-container--narrow { max-width: 760px; }

.pps-main { min-height: 60vh; padding-bottom: var(--pps-s8); }

.pps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--pps-s5);
	margin: var(--pps-s5) 0;
}
.pps-grid--4 { grid-template-columns: repeat(4, 1fr); }

.pps-section { padding: var(--pps-s7) 0 0; }

.pps-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pps-s4);
	margin-bottom: var(--pps-s2);
}
.pps-section__title { font-size: 22px; margin: 0; }
.pps-section__more {
	display: inline-flex;
	align-items: center;
	gap: var(--pps-s1);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.pps-page-head {
	padding: var(--pps-s7) 0 var(--pps-s4);
	border-bottom: 1px solid var(--pps-border);
	margin-bottom: var(--pps-s5);
}
.pps-page-head__eyebrow {
	margin: 0 0 var(--pps-s1);
	font-size: 13px;
	font-weight: 700;
	color: var(--pps-accent);
	letter-spacing: .02em;
}
.pps-page-head__title { font-size: 32px; margin: 0 0 var(--pps-s2); }
.pps-page-head__desc {
	margin: 0;
	max-width: 62ch;
	color: var(--pps-text-muted);
}

/* ============================================================
   4. 헤더 / 푸터
   ============================================================ */
.pps-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--pps-bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--pps-border);
}

.pps-header__inner {
	display: flex;
	align-items: center;
	gap: var(--pps-s5);
	height: 64px;
}

.pps-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--pps-s2);
	color: var(--pps-text);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -.02em;
	white-space: nowrap;
}
.pps-logo__mark {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--pps-accent), #8b5cf6);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
}

/*
 * 헤더 가로 배분.
 * 영문 메뉴는 한국어보다 훨씬 길어서(예: "Education & Lectures"),
 * 검색창에 flex-shrink 가 걸려 있으면 아이콘만 남을 만큼 짜부라진다.
 * 검색창은 고정폭으로 두고, 남는 공간을 메뉴가 쓰도록 한다.
 */
.pps-nav { flex: 1 1 auto; min-width: 0; }
.pps-nav__list {
	display: flex;
	gap: var(--pps-s4);
	overflow: hidden;
}
.pps-nav__list a {
	color: var(--pps-text-muted);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}
.pps-nav__list a:hover,
.pps-nav__list .current-menu-item > a { color: var(--pps-text); }

.pps-header__search { flex: 0 0 210px; }

/* --- 언어 전환기 --- */
.pps-langswitch {
	display: inline-flex;
	flex: none;
	align-items: center;
	padding: 2px;
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-full);
	background: var(--pps-bg-subtle);
}
.pps-langswitch__item {
	display: grid;
	place-items: center;
	min-width: 34px;
	padding: 5px 10px;
	border-radius: var(--pps-r-full);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--pps-text-faint);
	line-height: 1;
}
.pps-langswitch__item abbr {
	text-decoration: none;
	border: 0;
	cursor: inherit;
}
.pps-langswitch__item:hover { color: var(--pps-text); }
.pps-langswitch__item.is-active {
	background: var(--pps-surface);
	color: var(--pps-text);
	box-shadow: var(--pps-shadow-sm);
}

.pps-nav-toggle {
	display: none;
	width: 40px; height: 40px;
	border: 1px solid var(--pps-border);
	background: transparent;
	border-radius: var(--pps-r-sm);
	position: relative;
}
.pps-nav-toggle__bar,
.pps-nav-toggle__bar::before,
.pps-nav-toggle__bar::after {
	position: absolute;
	left: 50%;
	width: 18px; height: 2px;
	margin-left: -9px;
	background: var(--pps-text);
	border-radius: 2px;
	content: "";
}
.pps-nav-toggle__bar { top: 19px; }
.pps-nav-toggle__bar::before { top: -6px; left: 0; margin: 0; }
.pps-nav-toggle__bar::after  { top: 6px;  left: 0; margin: 0; }

.pps-mobile-nav {
	border-top: 1px solid var(--pps-border);
	padding: var(--pps-s4) 0;
	background: var(--pps-surface);
}
.pps-mobile-nav__list { margin-top: var(--pps-s4); display: grid; gap: var(--pps-s3); }
.pps-mobile-nav__list a { color: var(--pps-text); font-weight: 600; }

.pps-search { position: relative; display: flex; align-items: center; }
.pps-search__icon {
	position: absolute;
	left: 12px;
	display: grid;
	place-items: center;
	color: var(--pps-text-faint);
	pointer-events: none;
}
.pps-search__input {
	width: 100%;
	padding: 9px 14px 9px 38px;
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-full);
	background: var(--pps-bg-subtle);
	color: var(--pps-text);
	font-size: 14px;
	font-family: inherit;
}
.pps-search__input:focus {
	outline: none;
	border-color: var(--pps-accent);
	background: var(--pps-surface);
	box-shadow: 0 0 0 3px var(--pps-accent-soft);
}

.pps-footer {
	border-top: 1px solid var(--pps-border);
	background: var(--pps-bg-subtle);
	padding: var(--pps-s7) 0 var(--pps-s5);
	margin-top: var(--pps-s8);
}
.pps-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--pps-s6);
	margin-bottom: var(--pps-s5);
}
.pps-footer__tagline { color: var(--pps-text-muted); font-size: 14px; margin: var(--pps-s2) 0 0; }
.pps-footer__stats { display: flex; gap: var(--pps-s6); margin: 0; }
.pps-footer__stats dt { font-size: 13px; color: var(--pps-text-faint); }
.pps-footer__stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }
.pps-footer__list { display: flex; flex-wrap: wrap; gap: var(--pps-s4); margin-bottom: var(--pps-s4); }
.pps-footer__list a { color: var(--pps-text-muted); font-size: 14px; }
.pps-footer__copy {
	margin: 0;
	padding-top: var(--pps-s4);
	border-top: 1px solid var(--pps-border);
	font-size: 13px;
	color: var(--pps-text-faint);
}

/* ============================================================
   5. 컴포넌트
   ============================================================ */

/* --- 버튼 --- */
.pps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pps-s2);
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--pps-r-md);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	transition: background-color .15s, border-color .15s, transform .06s;
}
.pps-btn:active { transform: translateY(1px); }
.pps-btn--primary {
	background: var(--pps-accent);
	color: var(--pps-accent-text);
}
.pps-btn--primary:hover { background: var(--pps-accent-hover); color: #fff; }
.pps-btn--ghost {
	background: transparent;
	border-color: var(--pps-border-strong);
	color: var(--pps-text);
}
.pps-btn--ghost:hover { background: var(--pps-bg-sunken); color: var(--pps-text); }
.pps-btn--block { width: 100%; }
.pps-btn--sm { padding: 7px 14px; font-size: 14px; }

/* --- 칩 --- */
.pps-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--pps-s1);
	padding: 5px 12px;
	border-radius: var(--pps-r-full);
	background: var(--pps-bg-sunken);
	color: var(--pps-text-muted);
	font-size: 13px;
	font-weight: 500;
}
.pps-chip:hover { background: var(--pps-accent-soft); color: var(--pps-accent); }
.pps-chip--link { background: var(--pps-accent-soft); color: var(--pps-accent); }

/* --- 통계 --- */
.pps-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--pps-text-faint);
}

/* --- 카드 --- */
.pps-card {
	display: flex;
	flex-direction: column;
	background: var(--pps-surface);
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-lg);
	overflow: hidden;
	transition: box-shadow .18s, border-color .18s, transform .18s;
}
.pps-card:hover {
	box-shadow: var(--pps-shadow-md);
	border-color: var(--pps-border-strong);
	transform: translateY(-2px);
}

.pps-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--pps-bg-sunken);
	overflow: hidden;
}
.pps-card__img { width: 100%; height: 100%; object-fit: cover; }
.pps-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	color: #fff;
	background: linear-gradient(135deg, var(--pps-accent, #4f46e5), color-mix(in srgb, var(--pps-accent, #4f46e5) 55%, #000));
}
.pps-card__badge {
	position: absolute;
	right: var(--pps-s2);
	bottom: var(--pps-s2);
	padding: 3px 8px;
	border-radius: var(--pps-r-sm);
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	backdrop-filter: blur(4px);
}

.pps-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--pps-s2);
	padding: var(--pps-s4);
	flex: 1;
}
.pps-card__cat {
	font-size: 12px;
	font-weight: 700;
	color: var(--pps-accent);
}
.pps-card__title { font-size: 16px; margin: 0; line-height: 1.4; }
.pps-card__title a { color: var(--pps-text); }
.pps-card__title a:hover { color: var(--pps-accent); }

.pps-card__specs { display: flex; gap: var(--pps-s2); flex-wrap: wrap; }
.pps-card__specs li {
	padding: 2px 8px;
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-sm);
	font-size: 11px;
	color: var(--pps-text-faint);
}

.pps-card__foot {
	display: flex;
	gap: var(--pps-s4);
	margin-top: auto;
	padding-top: var(--pps-s2);
	border-top: 1px solid var(--pps-border);
}

/* --- 필터 바 --- */
.pps-filter {
	position: sticky;
	top: 64px;
	z-index: 20;
	padding: var(--pps-s3) 0;
	background: var(--pps-bg);
	border-bottom: 1px solid var(--pps-border);
}
.pps-filter__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pps-s4);
	flex-wrap: wrap;
}
.pps-filter__count { font-size: 14px; color: var(--pps-text-muted); white-space: nowrap; }
.pps-filter__count strong { color: var(--pps-text); font-size: 16px; }

.pps-filter__fields { display: flex; gap: var(--pps-s2); flex-wrap: wrap; }
.pps-filter__field { display: inline-flex; flex-direction: column; gap: 2px; }
.pps-filter__label { font-size: 11px; color: var(--pps-text-faint); padding-left: 2px; }
.pps-filter__select {
	appearance: none;
	padding: 7px 30px 7px 12px;
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-sm);
	background: var(--pps-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2361656e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	color: var(--pps-text);
	font-size: 13px;
	font-family: inherit;
}
.pps-filter__select:focus { outline: none; border-color: var(--pps-accent); box-shadow: 0 0 0 3px var(--pps-accent-soft); }

.pps-filter__active {
	display: flex;
	align-items: center;
	gap: var(--pps-s2);
	flex-wrap: wrap;
	margin-top: var(--pps-s3);
}
.pps-filter__reset { font-size: 13px; font-weight: 600; }

/* --- 페이지네이션 --- */
.pps-pagination { margin: var(--pps-s6) 0; }
.pps-pagination__list { display: flex; justify-content: center; gap: var(--pps-s1); flex-wrap: wrap; }
.pps-pagination__list a,
.pps-pagination__list span {
	display: grid;
	place-items: center;
	min-width: 38px; height: 38px;
	padding: 0 var(--pps-s3);
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-sm);
	color: var(--pps-text-muted);
	font-size: 14px;
}
.pps-pagination__list a:hover { border-color: var(--pps-accent); color: var(--pps-accent); }
.pps-pagination__list .current {
	background: var(--pps-accent);
	border-color: var(--pps-accent);
	color: #fff;
	font-weight: 700;
}

/* --- 빈 상태 --- */
.pps-empty {
	display: grid;
	justify-items: center;
	gap: var(--pps-s3);
	padding: var(--pps-s8) var(--pps-s4);
	text-align: center;
}
.pps-empty__icon { color: var(--pps-text-faint); }
.pps-empty__code { font-size: 56px; font-weight: 800; color: var(--pps-accent); margin: 0; line-height: 1; }
.pps-empty__title { font-size: 22px; margin: 0; }
.pps-empty__text { color: var(--pps-text-muted); margin: 0; max-width: 46ch; }
.pps-empty .pps-search { width: 100%; max-width: 380px; margin: var(--pps-s2) 0; }

/* ============================================================
   6. 페이지별
   ============================================================ */

/* --- 홈 히어로 --- */
.pps-hero {
	padding: var(--pps-s8) 0;
	background:
		radial-gradient(1000px 400px at 50% -100px, var(--pps-accent-soft), transparent 70%),
		var(--pps-bg);
	border-bottom: 1px solid var(--pps-border);
	text-align: center;
}
.pps-hero__title {
	font-size: clamp(28px, 5vw, 44px);
	margin: 0 0 var(--pps-s3);
	letter-spacing: -.03em;
}
.pps-hero__title strong { color: var(--pps-accent); }
.pps-hero__desc {
	max-width: 56ch;
	margin: 0 auto var(--pps-s5);
	color: var(--pps-text-muted);
	font-size: 17px;
}
.pps-hero__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--pps-s2);
	max-width: 620px;
	margin: 0 auto;
	padding: var(--pps-s2);
	background: var(--pps-surface);
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-full);
	box-shadow: var(--pps-shadow-md);
}
.pps-hero__search > .pps-icon { margin-left: var(--pps-s3); color: var(--pps-text-faint); }
.pps-hero__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--pps-text);
	font-size: 16px;
	font-family: inherit;
	padding: var(--pps-s2) 0;
}
.pps-hero__search input[type="search"]:focus { outline: none; }
.pps-hero__search .pps-btn { border-radius: var(--pps-r-full); }
.pps-hero__meta { margin: var(--pps-s4) 0 0; font-size: 13px; color: var(--pps-text-faint); }

/* --- 카테고리 타일 --- */
.pps-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--pps-s3);
	margin-top: var(--pps-s4);
}
.pps-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pps-s2);
	padding: var(--pps-s4);
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-md);
	background: var(--pps-surface);
	color: var(--pps-text);
	font-weight: 600;
	transition: border-color .15s, background-color .15s;
}
.pps-cat:hover { border-color: var(--pps-accent); background: var(--pps-accent-soft); color: var(--pps-accent); }
.pps-cat__count { font-size: 12px; color: var(--pps-text-faint); font-weight: 500; }

/* --- CTA --- */
.pps-cta {
	margin-top: var(--pps-s8);
	padding: var(--pps-s7) 0;
	background: var(--pps-bg-subtle);
	border-top: 1px solid var(--pps-border);
	border-bottom: 1px solid var(--pps-border);
	text-align: center;
}
.pps-cta__title { font-size: 24px; margin: 0 0 var(--pps-s2); }
.pps-cta__desc { color: var(--pps-text-muted); margin: 0 0 var(--pps-s4); }

/* --- 상세 --- */
.pps-breadcrumb {
	display: flex;
	gap: var(--pps-s2);
	padding: var(--pps-s5) 0 var(--pps-s4);
	font-size: 13px;
	color: var(--pps-text-faint);
	flex-wrap: wrap;
}
.pps-breadcrumb a { color: var(--pps-text-muted); }

.pps-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--pps-s6);
	align-items: start;
}
.pps-single__side { position: sticky; top: 88px; display: grid; gap: var(--pps-s5); }
.pps-single__title { font-size: 26px; margin: 0 0 var(--pps-s2); }
.pps-single__stats { display: flex; gap: var(--pps-s4); }

/* 본문 열 안(미리보기 아래)에 위치한다 */
.pps-single__content {
	max-width: 76ch;
	margin: var(--pps-s6) 0 0;
	padding-top: var(--pps-s5);
	border-top: 1px solid var(--pps-border);
}
.pps-single__content h2 { font-size: 20px; }

/* --- 갤러리 --- */
.pps-gallery-view__stage {
	position: relative;
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-lg);
	overflow: hidden;
	background: var(--pps-bg-sunken);
}
.pps-gallery-view__slide { margin: 0; }
/* JS 가 켜지면 한 장씩 보여준다. 꺼져 있으면 전부 세로로 나열되어 여전히 볼 수 있다. */
.js .pps-gallery-view__slide { display: none; }
.js .pps-gallery-view__slide.is-active { display: block; }
.pps-gallery-view__img { width: 100%; }

.pps-gallery-view__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border: 1px solid var(--pps-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--pps-surface) 85%, transparent);
	color: var(--pps-text);
	font-size: 22px;
	line-height: 1;
	backdrop-filter: blur(4px);
}
.pps-gallery-view__nav--prev { left: var(--pps-s3); }
.pps-gallery-view__nav--next { right: var(--pps-s3); }
.pps-gallery-view__nav:hover { background: var(--pps-surface); border-color: var(--pps-accent); }

.pps-gallery-view__counter {
	position: absolute;
	right: var(--pps-s3);
	bottom: var(--pps-s3);
	padding: 4px 10px;
	border-radius: var(--pps-r-full);
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.pps-gallery-view__thumbs {
	display: flex;
	gap: var(--pps-s2);
	margin-top: var(--pps-s3);
	overflow-x: auto;
	padding-bottom: var(--pps-s2);
	scrollbar-width: thin;
}
.pps-gallery-view__thumb {
	flex: none;
	width: 96px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--pps-r-sm);
	overflow: hidden;
	background: none;
	line-height: 0;
	opacity: .6;
	transition: opacity .15s, border-color .15s;
}
.pps-gallery-view__thumb:hover { opacity: 1; }
.pps-gallery-view__thumb.is-active { opacity: 1; border-color: var(--pps-accent); }
.pps-gallery-view__thumb img { width: 100%; height: 54px; object-fit: cover; }

/* --- 다운로드 박스 --- */
.pps-download {
	display: grid;
	gap: var(--pps-s3);
	padding: var(--pps-s5);
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-lg);
	background: var(--pps-surface);
	box-shadow: var(--pps-shadow-sm);
}
.pps-download__notice {
	margin: 0;
	padding: var(--pps-s2) var(--pps-s3);
	border-radius: var(--pps-r-sm);
	background: #fff7ed;
	color: #9a3412;
	font-size: 13px;
}
@media (prefers-color-scheme: dark) {
	.pps-download__notice { background: #3a2410; color: #fdba74; }
}
.pps-download__sub { margin: 0; text-align: center; font-size: 13px; color: var(--pps-text-faint); }
.pps-download__unavailable {
	margin: 0;
	padding: var(--pps-s4);
	text-align: center;
	border-radius: var(--pps-r-md);
	background: var(--pps-bg-sunken);
	color: var(--pps-text-muted);
	font-size: 14px;
}
.pps-download__license {
	display: flex;
	justify-content: space-between;
	gap: var(--pps-s3);
	margin: 0;
	padding-top: var(--pps-s3);
	border-top: 1px solid var(--pps-border);
	font-size: 13px;
}
.pps-download__license dt { color: var(--pps-text-faint); }
.pps-download__license dd { margin: 0; font-weight: 600; text-align: right; }
.pps-download__credit { margin: 0; font-size: 12px; color: var(--pps-text-faint); }

/* --- 사양 표 --- */
.pps-spec {
	padding: var(--pps-s5);
	border: 1px solid var(--pps-border);
	border-radius: var(--pps-r-lg);
	background: var(--pps-surface);
}
.pps-spec__title { font-size: 15px; margin: 0 0 var(--pps-s3); }
.pps-spec__list { margin: 0; display: grid; gap: var(--pps-s2); }
.pps-spec__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pps-s3);
	font-size: 14px;
}
.pps-spec__row dt {
	display: inline-flex;
	align-items: center;
	gap: var(--pps-s2);
	color: var(--pps-text-muted);
}
.pps-spec__row dd { margin: 0; font-weight: 600; display: inline-flex; align-items: center; gap: var(--pps-s2); }
.pps-swatch {
	display: inline-block;
	width: 16px; height: 16px;
	border-radius: 4px;
	border: 1px solid var(--pps-border);
}
.pps-spec code { font-family: var(--pps-font-mono); font-size: 12px; }

/* --- 텀 목록 --- */
.pps-termlist__label { font-size: 13px; color: var(--pps-text-faint); margin: 0 0 var(--pps-s2); }
.pps-termlist__items { display: flex; flex-wrap: wrap; gap: var(--pps-s2); }

.pps-related { margin-top: var(--pps-s8); }
.pps-related__title { font-size: 20px; }

/* --- 본문(prose) --- */
.pps-prose h2 { font-size: 22px; margin-top: var(--pps-s6); }
.pps-prose h3 { font-size: 18px; margin-top: var(--pps-s5); }
.pps-prose ul, .pps-prose ol { margin: 0 0 var(--pps-s4); padding-left: var(--pps-s5); }
.pps-prose li { list-style: revert; margin-bottom: var(--pps-s1); }
.pps-prose img { border-radius: var(--pps-r-md); margin: var(--pps-s4) 0; }
.pps-prose blockquote {
	margin: var(--pps-s4) 0;
	padding: var(--pps-s3) var(--pps-s4);
	border-left: 3px solid var(--pps-accent);
	background: var(--pps-bg-subtle);
	color: var(--pps-text-muted);
}

.pps-postlist { display: grid; gap: var(--pps-s5); margin: var(--pps-s5) 0; }
.pps-post { padding-bottom: var(--pps-s5); border-bottom: 1px solid var(--pps-border); }
.pps-post__title { font-size: 20px; margin: 0 0 var(--pps-s1); }
.pps-post__title a { color: var(--pps-text); }
.pps-post__meta { font-size: 13px; color: var(--pps-text-faint); margin: 0 0 var(--pps-s2); }

/* --- 광고 슬롯 --- */
/*
 * 광고는 콘텐츠와 명확히 구분되어야 한다(정책 요건).
 * 위아래 여백을 넉넉히 주고 라벨을 붙여 콘텐츠로 오인되지 않게 한다.
 */
.pps-ad {
	margin: var(--pps-s7) 0;
	padding: var(--pps-s3) 0;
	border-top: 1px solid var(--pps-border);
	border-bottom: 1px solid var(--pps-border);
	text-align: center;
	min-height: 100px;
}
.pps-ad__label {
	display: block;
	margin-bottom: var(--pps-s2);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pps-text-faint);
}
.pps-ad--single { margin-top: var(--pps-s6); }

/* --- 토스트 (링크 복사 알림) --- */
.pps-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(8px);
	z-index: 100;
	padding: 10px 18px;
	border-radius: var(--pps-r-full);
	background: var(--pps-text);
	color: var(--pps-bg);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--pps-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.pps-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   7. 반응형
   ============================================================ */
/*
 * 헤더가 빡빡해지는 구간에서는 검색창을 먼저 접는다.
 * 메뉴를 잘라내는 것보다 낫다 — 검색은 히어로와 모바일 메뉴에도 있다.
 */
@media (max-width: 1200px) {
	.pps-header__search { display: none; }
}

@media (max-width: 1024px) {
	.pps-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.pps-single__layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 860px) {
	.pps-header__inner { height: 56px; gap: var(--pps-s3); }
	.pps-nav, .pps-header__search { display: none; }
	/* 언어 전환기는 모바일에서도 유지한다 — 숨기면 영어 사용자가 빠져나갈 길이 없다 */
	.pps-langswitch { margin-left: auto; }
	.pps-nav-toggle { display: block; }

	.pps-grid--4 { grid-template-columns: repeat(2, 1fr); }

	.pps-single__layout { grid-template-columns: 1fr; }
	/* 모바일에서는 다운로드 박스를 미리보기보다 위로 올린다 */
	.pps-single__main { order: 2; }
	.pps-single__side { order: 1; position: static; }

	.pps-filter { top: 56px; }
	.pps-filter__row { align-items: flex-start; }
	.pps-filter__fields { width: 100%; }
	.pps-filter__field { flex: 1 1 45%; }
	.pps-filter__select { width: 100%; }

	.pps-footer__top { flex-direction: column; gap: var(--pps-s5); }
	.pps-footer__stats { gap: var(--pps-s5); }
}

@media (max-width: 560px) {
	.pps-container { padding: 0 var(--pps-s4); }
	.pps-grid, .pps-grid--4 { grid-template-columns: 1fr 1fr; gap: var(--pps-s3); }
	.pps-card__body { padding: var(--pps-s3); }
	.pps-card__title { font-size: 14px; }
	.pps-page-head__title { font-size: 24px; }
	.pps-hero { padding: var(--pps-s6) 0; }
	.pps-hero__search { flex-wrap: wrap; border-radius: var(--pps-r-lg); }
	.pps-hero__search .pps-btn { width: 100%; }
	.pps-footer__stats { flex-wrap: wrap; gap: var(--pps-s4); }
}

/* 접근성: 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}