@charset "utf-8";
/*
 * Seoul Cafe Show — Photo Archive : Editorial Photo Collage (J-ROUTE 레이아웃 재해석)
 * 2026-10-06 / 사용 : /kor/media/photo_list.asp , /eng/Bsmedia/photo_list.asp (국/영 동일 파일)
 * ※ /zComm/default.js 가 important 플래그가 붙은 규칙을 통째로 삭제하므로 사용 금지 — 우선순위는 선택자로 해결
 */

.pg {
	--pg-bg: #f7f4ef;
	--pg-ink: #1b1714;
	--pg-ink2: #4b443e;
	--pg-mute: #9a9087;
	--pg-line: #e2dbd0;
	--pg-red: #da1f3d;
	--pg-ph: #e9e3da;
	--pg-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
	--pg-sans: 'Inter', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	--pg-ease: cubic-bezier(.16, 1, .3, 1);
	--pg-ease2: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	display: block;
	width: 100%;
	background: var(--pg-bg);
	color: var(--pg-ink);
	padding: 72px 0 120px;
	overflow-x: clip;
	font-family: var(--pg-sans);
	-webkit-font-smoothing: antialiased;
}
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg-inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
	container-type: inline-size;
}
.pg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pg-red); margin-right: 12px; vertical-align: 1px; }
.pg-empty { padding: 120px 0; text-align: center; color: var(--pg-mute); font-family: var(--pg-serif); font-size: 28px; }

/* ---------- layout : 왼쪽 콜라주 / 오른쪽 고정 패널 ---------- */
.pg-layout {
	display: grid;
	grid-template-columns: minmax(0, 63fr) minmax(0, 31fr);
	grid-template-areas: "stream side";
	column-gap: 6%;
	align-items: start;
}
.pg-stream { grid-area: stream; min-width: 0; }
.pg-side { grid-area: side; position: sticky; top: 28px; align-self: start; }
.pg-mbar { display: none; }

/* ---------- side panel ---------- */
.pg-kicker { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--pg-ink); line-height: 1.4; }
.pg-kicker-sep { display: inline-block; width: 26px; height: 1px; background: var(--pg-ink); vertical-align: middle; margin: 0 12px; opacity: .5; }
.pg .pg-title {
	position: relative;
	height: auto;
	background: none;
	font-family: var(--pg-serif);
	font-weight: 400;
	font-size: 108px;
	font-size: clamp(64px, 8.2cqw, 124px);
	line-height: .8;
	letter-spacing: -.03em;
	color: var(--pg-ink);
	margin: 24px 0 0 -.3cqw;
	padding: 0;
	border: 0;
}
.pg .pg-title::after { display: none; }
.pg-title span { color: var(--pg-red); }
.pg-lede { font-family: var(--pg-serif); font-style: italic; font-size: clamp(20px, 2cqw, 30px); line-height: 1.06; color: var(--pg-ink); margin-top: 24px; }
.pg-lede-sub { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--pg-ink2); margin-top: 14px; }

.pg-now { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--pg-line); }
.pg-now-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--pg-mute); }
.pg .pg-now-year {
	display: block;
	font-family: var(--pg-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(60px, 6.4cqw, 96px);
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--pg-red);
	margin: 8px 0 10px -.2cqw;
	font-variant-numeric: lining-nums;
}
.pg-now-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-ink2); }
.pg-now-meta em { font-style: normal; color: var(--pg-ink); font-weight: 600; }
.pg-now-meta i { display: block; width: 28px; height: 1px; background: var(--pg-ink); opacity: .4; }
.pg[data-lang="kr"] .pg-now-meta { letter-spacing: .06em; }

.pg-years { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--pg-line); }
.pg-years-list { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.pg-years-list li { list-style: none; }
.pg .pg-years-list a,
.pg .pg-years-list a:link,
.pg .pg-years-list a:visited {
	position: relative;
	display: block;
	font-family: var(--pg-serif);
	font-size: 23px;
	line-height: 1;
	color: var(--pg-mute);
	padding: 4px 0 7px;
	transition: color .3s ease;
	font-variant-numeric: lining-nums;
}
.pg .pg-years-list a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--pg-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--pg-ease2);
}
.pg .pg-years-list a:hover { color: var(--pg-ink); }
.pg .pg-years-list a.is-on { color: var(--pg-red); font-style: italic; }
.pg .pg-years-list a.is-on::after { transform: scaleX(1); }
.pg .pg-years-list a:focus-visible { outline: 2px solid var(--pg-red); outline-offset: 4px; }

.pg-yearform { margin: 24px 0 0; }
.pg-select { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pg-select-label { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pg-mute); white-space: nowrap; }
.pg[data-lang="kr"] .pg-select-label { letter-spacing: .08em; }
.pg .pg-select select {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	height: auto;
	border: 0;
	border-bottom: 1px solid var(--pg-ink);
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231b1714' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center;
	font-family: var(--pg-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--pg-ink);
	padding: 4px 22px 5px 0;
	cursor: pointer;
	box-shadow: none;
	text-overflow: ellipsis;
}
.pg .pg-select select:focus { outline: 2px solid var(--pg-red); outline-offset: 3px; box-shadow: none; }
.pg-yearform button { margin-top: 10px; font-size: 12px; padding: 5px 12px; background: var(--pg-ink); color: #fff; }

/* ---------- stream : 연도 챕터 + 콜라주 ---------- */
.pg-year + .pg-year { margin-top: 104px; }
.pg-chapter {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--pg-line);
}
.pg .pg-ch-year { font-family: var(--pg-serif); font-style: italic; font-weight: 400; font-size: clamp(44px, 4.4cqw, 64px); line-height: .9; letter-spacing: -.02em; color: var(--pg-ink); font-variant-numeric: lining-nums; }
.pg-ch-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 6px 14px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-ink2); text-align: right; }
.pg-ch-meta em { font-style: normal; font-weight: 600; color: var(--pg-red); }
.pg[data-lang="kr"] .pg-ch-meta { letter-spacing: .06em; }

.pg-mosaic {
	--H: 60;
	position: relative;
	height: 0;
	padding-bottom: calc(var(--H) * 1%);
}
.pg-ph {
	position: absolute;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) / var(--H) * 100%);
	width: calc(var(--w) * 1%);
	height: calc(var(--h) / var(--H) * 100%);
	z-index: var(--z);
	container-type: inline-size;
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity .8s ease var(--d, 0ms), transform 1.1s var(--pg-ease) var(--d, 0ms), z-index 0s linear .4s;
}
.pg-ph.is-in { opacity: 1; transform: none; }

.pg .pg-ph-in,
.pg .pg-ph-in:link,
.pg .pg-ph-in:visited {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--pg-ph);
	color: #fff;
	box-shadow: 0 1px 2px rgba(40, 24, 12, .16), 0 10px 22px -16px rgba(40, 24, 12, .42);
	transform: scale(1);
	transition: transform .4s var(--pg-ease2), box-shadow .4s ease, opacity .4s ease;
	-webkit-tap-highlight-color: transparent;
}
.pg-ph-in img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity .7s ease, transform 1.4s var(--pg-ease);
	-webkit-user-drag: none;
}
.pg-ph.is-loaded .pg-ph-in img { opacity: 1; transform: scale(1); }
.pg .pg-ph-in:focus-visible { outline: 2px solid var(--pg-red); outline-offset: 3px; }

/* 상세 → 목록 복귀 시 보던 사진 표시 */
.pg-ph.is-focus .pg-ph-in::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 3px var(--pg-red);
	pointer-events: none;
}

/* hover caption — 3줄만 */
.pg-cap {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 48px 16px 15px;
	background: linear-gradient(to top, rgba(20, 13, 9, .74) 0%, rgba(20, 13, 9, .32) 55%, rgba(20, 13, 9, 0) 100%);
	color: #fff;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s ease, transform .4s var(--pg-ease2);
	pointer-events: none;
	text-align: left;
}
.pg-cap em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; opacity: .9; }
.pg-cap strong { font-family: var(--pg-serif); font-weight: 400; font-size: 21px; line-height: 1.05; letter-spacing: .005em; }
.pg-cap i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; margin-top: 4px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .45); }
.pg[data-lang="kr"] .pg-cap em,
.pg[data-lang="kr"] .pg-cap i { letter-spacing: .1em; }

@container (max-width: 230px) {
	.pg-cap { padding: 32px 11px 10px; gap: 3px; }
	.pg-cap em { display: none; }
	.pg-cap strong { font-size: 16px; }
	.pg-cap i { font-size: 9px; padding-top: 5px; margin-top: 2px; }
}
@container (max-width: 150px) {
	.pg-cap { padding: 0; inset: 0; justify-content: center; align-items: center; background: rgba(20, 13, 9, .38); }
	.pg-cap strong, .pg-cap em { display: none; }
	.pg-cap i { border: 0; padding: 0; margin: 0; font-size: 0; }
	.pg-cap i::before { content: '+'; font-size: 26px; font-weight: 300; letter-spacing: 0; line-height: 1; }
}

@media (hover: hover) {
	.pg-ph:hover { z-index: 999; transition: opacity .8s ease var(--d, 0ms), transform 1.1s var(--pg-ease) var(--d, 0ms), z-index 0s; }
	.pg-ph:hover .pg-ph-in {
		transform: scale(1.045);
		box-shadow: 0 28px 50px -22px rgba(40, 24, 12, .5), 0 6px 16px -6px rgba(40, 24, 12, .18);
	}
	.pg-ph:hover .pg-cap { opacity: 1; transform: none; }
	/* moodboard focus — 같은 연도의 나머지 사진은 살짝 물러남 */
	.pg-mosaic:has(.pg-ph:hover) .pg-ph:not(:hover) .pg-ph-in { opacity: .78; }
}
.pg-ph:focus-within { z-index: 999; }
.pg-ph-in:focus-visible .pg-cap { opacity: 1; transform: none; }

/* ---------- 이어서 불러오기 / 끝 ---------- */
.pg-more {
	position: relative;
	margin-top: 88px;
	padding-top: 30px;
	border-top: 1px solid var(--pg-line);
	text-align: center;
	min-height: 96px;
}
.pg-more-txt { font-family: var(--pg-serif); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--pg-ink); }
.pg-more-txt:empty { display: none; }
.pg-more.is-loading .pg-more-txt::after {
	content: '';
	display: block;
	width: 140px;
	height: 1px;
	margin: 18px auto 0;
	background: linear-gradient(90deg, rgba(218, 31, 61, 0), var(--pg-red), rgba(218, 31, 61, 0));
	background-size: 200% 100%;
	animation: pgLoading 1.2s linear infinite;
}
@keyframes pgLoading { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pg .pg-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 10px 2px 6px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--pg-ink);
	font-family: var(--pg-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pg-ink);
	cursor: pointer;
	transition: color .3s ease, border-color .3s ease;
}
.pg[data-lang="kr"] .pg-more-btn { letter-spacing: .06em; }
.pg .pg-more-btn:empty { display: none; }
.pg .pg-more-btn:hover { color: var(--pg-red); border-color: var(--pg-red); }
.pg .pg-more-btn:focus-visible { outline: 2px solid var(--pg-red); outline-offset: 4px; }
.pg-more.is-end .pg-more-txt { font-size: clamp(40px, 4.4cqw, 64px); margin-bottom: 14px; }
.pg-more.is-end .pg-more-btn { text-transform: none; letter-spacing: .02em; font-weight: 500; font-size: 13px; }
.pg-more.is-error .pg-more-btn { color: var(--pg-red); border-color: var(--pg-red); }

/* ---------- no-JS fallback ---------- */
.pg-fallback { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.pg-fallback li { list-style: none; }
.pg-fallback a { display: block; aspect-ratio: 3 / 2; background: var(--pg-ph); overflow: hidden; }
.pg-fallback img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg.pg--js .pg-fallback { display: none; }

/* ---------- lightbox ---------- */
.pg-lock, .pg-lock body { overflow: hidden; }
.pg-lb {
	--pg-red: #da1f3d;
	--pg-ink: #1b1714;
	--pg-mute: #9a9087;
	--pg-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
	--pg-sans: 'Inter', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: #f7f4ef;
	color: var(--pg-ink);
	font-family: var(--pg-sans);
	opacity: 0;
	transition: opacity .3s ease;
	-webkit-font-smoothing: antialiased;
}
.pg-lb[hidden] { display: none; }
.pg-lb.is-open { opacity: 1; }
.pg-lb *, .pg-lb *::before, .pg-lb *::after { box-sizing: border-box; }
.pg-lb .pg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pg-red); margin-right: 12px; vertical-align: 1px; }
.pg-lb-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; }
.pg-lb-kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.pg-lb button { font-family: inherit; background: none; border: 0; color: var(--pg-ink); cursor: pointer; margin: 0; }
.pg-lb .pg-lb-close { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 8px 0; }
.pg-lb .pg-lb-close b { font-weight: 300; font-size: 18px; letter-spacing: 0; transition: transform .35s ease; }
.pg-lb .pg-lb-close:hover { color: var(--pg-red); }
.pg-lb .pg-lb-close:hover b { transform: rotate(90deg); }
.pg-lb-main { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 96px; }
.pg-lb-fig { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.pg-lb-fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: filter .4s ease, opacity .3s ease;
}
.pg-lb-fig img.is-low { filter: blur(6px); }
.pg-lb .pg-lb-nav {
	position: absolute;
	top: 50%;
	width: 64px;
	height: 64px;
	margin-top: -32px;
	font-family: var(--pg-serif);
	font-size: 34px;
	line-height: 1;
	border-radius: 50%;
	transition: color .3s ease, background-color .3s ease, opacity .3s ease;
}
.pg-lb .pg-lb-prev { left: 18px; }
.pg-lb .pg-lb-next { right: 18px; }
.pg-lb .pg-lb-nav:hover { color: var(--pg-red); background: rgba(27, 23, 20, .05); }
.pg-lb .pg-lb-nav:disabled { opacity: .15; cursor: default; background: none; color: var(--pg-ink); }
.pg-lb button:focus-visible, .pg-lb a:focus-visible { outline: 2px solid var(--pg-red); outline-offset: 4px; }
.pg-lb-bottom { display: flex; align-items: flex-end; gap: 32px; padding: 20px 32px 26px; }
.pg-lb-no { margin: 0; font-family: var(--pg-serif); line-height: .85; color: var(--pg-mute); font-size: 20px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.pg-lb-no b { font-weight: 400; font-size: 56px; color: var(--pg-ink); }
.pg-lb-cap { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; padding-bottom: 4px; }
.pg-lb-cap em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pg-red); }
.pg-lb[data-lang="kr"] .pg-lb-cap em { letter-spacing: .08em; }
.pg-lb-cap strong { font-family: var(--pg-serif); font-weight: 400; font-size: 28px; line-height: 1.05; }
.pg-lb a.pg-lb-detail,
.pg-lb a.pg-lb-detail:link,
.pg-lb a.pg-lb-detail:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 0 6px;
	border-bottom: 1px solid var(--pg-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pg-ink);
	white-space: nowrap;
	transition: color .3s ease, border-color .3s ease;
}
.pg-lb[data-lang="kr"] a.pg-lb-detail { letter-spacing: .08em; }
.pg-lb a.pg-lb-detail b { font-weight: 300; font-size: 16px; letter-spacing: 0; transition: transform .35s ease; }
.pg-lb a.pg-lb-detail:hover { color: var(--pg-red); border-color: var(--pg-red); }
.pg-lb a.pg-lb-detail:hover b { transform: translateX(4px); }

/* ---------- 낮은 화면 : 고정 패널이 넘치지 않도록 ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
	.pg-lede-sub { display: none; }
	.pg .pg-title { font-size: clamp(56px, 6.6cqw, 100px); margin-top: 18px; }
	.pg-lede { margin-top: 16px; }
	.pg-now { margin-top: 22px; }
	.pg .pg-now-year { font-size: clamp(48px, 4.8cqw, 72px); }
	.pg-years { margin-top: 20px; }
}

/* ---------- tablet / mobile : 1단 + 상단 고정 연도 바 ---------- */
@media (max-width: 1023px) {
	.pg { padding: 48px 0 88px; }
	.pg-inner { padding: 0 24px; }
	.pg-layout { display: block; }
	.pg-side { position: static; }
	.pg.pg--js .pg-side .pg-now,
	.pg.pg--js .pg-side .pg-years,
	.pg.pg--js .pg-side .pg-yearform { display: none; }
	.pg .pg-title { font-size: clamp(60px, 13cqw, 120px); }
	.pg.pg--js .pg-mbar {
		position: sticky;
		top: 0;
		z-index: 1100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 28px -24px 32px;
		padding: 12px 24px;
		background: rgba(247, 244, 239, .94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--pg-line);
		border-bottom: 1px solid var(--pg-line);
	}
	.pg-mbar-idle { display: flex; align-items: baseline; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pg-mute); white-space: nowrap; }
	.pg-mbar-idle b { font-family: var(--pg-serif); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--pg-ink); }
	.pg-mbar .pg-mbar-now { display: none; }
	.pg-mbar.is-stuck .pg-mbar-idle { display: none; }
	.pg-mbar.is-stuck .pg-mbar-now { display: flex; }
	.pg-mbar-now { align-items: baseline; gap: 12px; min-width: 0; }
	.pg-mbar-now b { font-family: var(--pg-serif); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1; color: var(--pg-red); }
	.pg-mbar-now em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.pg[data-lang="kr"] .pg-mbar-now em { letter-spacing: .04em; }
	.pg-mbar .pg-select { flex-shrink: 0; }
	.pg-mbar .pg-select select { font-family: var(--pg-serif); font-size: 20px; letter-spacing: 0; padding: 0 22px 2px 0; }
	.pg-lb-main { padding: 0 72px; }
}
@media (max-width: 767px) {
	.pg { padding: 36px 0 64px; }
	.pg-inner { padding: 0 16px; }
	.pg .pg-title { font-size: clamp(60px, 21cqw, 104px); margin-top: 16px; }
	.pg-lede { font-size: 22px; margin-top: 16px; }
	.pg-lede-sub { font-size: 13px; margin-top: 10px; }
	.pg.pg--js .pg-mbar { margin: 24px -16px 26px; padding: 10px 16px; }
	.pg-mbar-now b { font-size: 28px; }

	.pg-year + .pg-year { margin-top: 64px; }
	.pg-chapter { margin-bottom: 20px; padding-bottom: 12px; }
	.pg .pg-ch-year { font-size: 42px; }
	.pg-ch-meta { font-size: 10px; flex-direction: column; align-items: flex-end; gap: 2px; }
	.pg-ph { transform: translate3d(0, 18px, 0); }
	.pg-cap { display: none; }
	.pg-more { margin-top: 56px; }
	.pg-more-txt { font-size: 22px; }
	.pg-fallback { grid-template-columns: repeat(2, 1fr); gap: 8px; }

	.pg-lb-top { padding: 14px 16px; }
	.pg-lb-kicker { font-size: 10px; letter-spacing: .18em; }
	.pg-lb-main { padding: 0; }
	.pg-lb .pg-lb-nav { display: none; }
	.pg-lb-bottom { flex-wrap: wrap; gap: 10px 18px; padding: 14px 16px 20px; }
	.pg-lb-no b { font-size: 40px; }
	.pg-lb-cap strong { font-size: 22px; }
	.pg-lb a.pg-lb-detail { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.pg-ph, .pg-ph-in, .pg-ph-in img, .pg-cap, .pg-lb { transition: none; }
	.pg-ph { transform: none; opacity: 1; }
	.pg-ph-in img { transform: none; }
	.pg-more.is-loading .pg-more-txt::after { animation: none; }
}