/**
 * PC 새 틀 — 소식 작은 창 · 2026-10-26 (마크업 inc/pc-frame-notice.php · 움직임 js/pcf-notice.js)
 * 10/26 「(가)안 · 정사각 · 닫기 = 앞으로 다시 보지 않기 · 자세히 보기 버튼 지우고 깔끔하게」(시안 claude.ai 아티팩트 72GFQu4SmQLyPP6dTd3Arh) = 정사각 그림 한 장 + 아래 줄
 * → 10/27 운영자 「사진만 뜨니 너무 허전 · 텍스트 넣은 시안」 → 「Emergent형 으로 합니다」(시안 claude.ai 아티팩트 TFtC8b93K78hSqCFJzVYVr 「다」 — Emergent 특별 제안 창을 가깝게 따라 찍은 값 그대로):
 *   PC = 창 761(왼쪽 어두운 글 칸 381 · 오른쪽 정사각 그림 380 — 포스터를 자르지 않는다) · 모서리 16 · 글 칸 안쪽 32 · 세로 가운데
 *        꼬리표 20(곁 이름 · 모서리 4 · 11/700) + 오른쪽 ‹ 1 / 2 › · 제목 26/700 흰 글자 · 설명 15 회색(4줄까지) · [단추 글] 흰 단추 45 · [닫기] 어두운 단추 45(모서리 8) · 그림 위 오른쪽 × 32
 *   폰 · 태블릿(≤ 820) = 한 줄로 쌓음(폭 420 까지) · 그림이 위 16:9(관리 화면에서 고른 홈 카드 영역 — 아래 그림 영역 공식) · 글 칸 안쪽 20 · 제목 22 · 설명 14
 *   「사이트 규칙과 다른 점」(시안 카드에 적어 보이고 고름 — .claude/rules/css.md 예외 줄): 어두운 창 #1C1C1E · 창 모서리 16(정본 12) · 단추 8(정본 6) · 흰 채운 단추(정본 초록)
 *   · 꼬리표 복숭아색 한 색(시안의 그라디언트는 「고르시면 한 색으로」라 적은 대로 가운데 색 하나로 바꿨다).
 * ⚠️ 폰에도 뜨는 창이라 「새 틀 CSS = 1,025 이상만」(정본 v4 14.3-1)의 예외다 — 규칙은 이 창 클래스(.pcfnt*)에만 건다(옛 틀 · 다른 화면엔 닿지 않는다).
 * 열릴 때 0.18초 흐려짐 → 또렷 · 창 6px 올라옴(움직임 줄이기면 없음) · 쌓임 = --z-modal 400(폰 아래 탭 줄 · 새 틀 머리글 200 위).
 */
body.pcf-on .pcfnt {
	--pcfnt-bg: #1C1C1E;
	--pcfnt-fg: #FFFFFF;
	--pcfnt-muted: #A1A1A6;
	--pcfnt-faint: #8E8E93;
	--pcfnt-btn2: #2A2A2D;
	--pcfnt-btn2-hover: #36363A;
	--pcfnt-btn2-fg: #E5E5EA;
	--pcfnt-tag: #F5C094;
	--pcfnt-tag-fg: #5A3214;
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 400);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.18s ease;
}

body.pcf-on .pcfnt[hidden] {
	display: none;
}

body.pcf-on .pcfnt.is-on {
	opacity: 1;
}

body.pcf-on .pcfnt *,
body.pcf-on .pcfnt *::before,
body.pcf-on .pcfnt *::after {
	box-sizing: border-box;
}

body.pcf-on .pcfnt-dim {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.45);
}

/* 창 — 소식 한 장(.pcfnt-slide)씩 보인다 · 낮은 화면은 창 안에서 넘겨 본다 */
body.pcf-on .pcfnt-box {
	position: relative;
	width: 761px;
	max-width: 100%;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow: hidden auto;
	border-radius: 16px;
	background: var(--pcfnt-bg);
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.35);
	transform: translateY(6px);
	transition: transform 0.18s ease;
}

body.pcf-on .pcfnt.is-on .pcfnt-box {
	transform: none;
}

body.pcf-on .pcfnt-box:focus {
	outline: 0;
}

body.pcf-on .pcfnt-slide {
	display: grid;
	grid-template-columns: 381px 380px;
}

body.pcf-on .pcfnt-slide[hidden] {
	display: none;
}

/* 왼쪽 글 칸 */
body.pcf-on .pcfnt-t {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 32px;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

body.pcf-on .pcfnt-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 24px;
}

body.pcf-on .pcfnt-tag {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	border-radius: 4px;
	background: var(--pcfnt-tag);
	color: var(--pcfnt-tag-fg);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

body.pcf-on .pcfnt-pg {
	display: inline-flex;
	align-items: center;
	color: var(--pcfnt-faint);
	font-size: 12px;
	line-height: 1;
}

body.pcf-on .pcfnt-pg[hidden] {
	display: none;
}

body.pcf-on .pcfnt-ar {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--pcfnt-faint);
	line-height: 0;
	cursor: pointer;
}

body.pcf-on .pcfnt-ar:hover {
	background: var(--pcfnt-btn2);
	color: var(--pcfnt-fg);
}

body.pcf-on .pcfnt-num {
	min-width: 36px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

body.pcf-on .pcfnt .pcfnt-h {
	display: -webkit-box;
	margin: 14px 0 0;
	padding: 0;
	overflow: hidden;
	color: var(--pcfnt-fg);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.01em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

body.pcf-on .pcfnt .pcfnt-d {
	display: -webkit-box;
	margin: 12px 0 0;
	padding: 0;
	overflow: hidden;
	color: var(--pcfnt-muted);
	font-size: 15px;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

/* 단추 둘 — 소식 링크(흰 단추) · 닫기(어두운 단추) */
body.pcf-on .pcfnt .pcfnt-go,
body.pcf-on .pcfnt .pcfnt-x {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

body.pcf-on .pcfnt .pcfnt-go {
	margin-top: 28px;
	background: var(--pcfnt-fg);
	color: var(--gray-900);
	font-weight: 600;
}

body.pcf-on .pcfnt .pcfnt-go:hover,
body.pcf-on .pcfnt .pcfnt-go:visited:hover {
	background: var(--gray-100);
	color: var(--gray-900);
}

body.pcf-on .pcfnt .pcfnt-go:visited {
	color: var(--gray-900);
}

/* 닫기 — 링크 없는 소식이면 단추가 이것 하나라 흰 단추 자리(28)에 */
body.pcf-on .pcfnt .pcfnt-x {
	margin-top: 28px;
	background: var(--pcfnt-btn2);
	color: var(--pcfnt-btn2-fg);
	font-weight: 500;
}

body.pcf-on .pcfnt .pcfnt-go + .pcfnt-x {
	margin-top: 10px;
}

body.pcf-on .pcfnt .pcfnt-x:hover {
	background: var(--pcfnt-btn2-hover);
	color: var(--pcfnt-fg);
}

/* 오른쪽 그림 — PC 는 정사각 그림을 칸에 가득(글이 길어 칸이 조금 높아지면 위아래만 살짝 잘림) */
body.pcf-on .pcfnt-art {
	position: relative;
	display: block;
	min-height: 380px;
	overflow: hidden;
	background: var(--pcfnt-btn2);
}

body.pcf-on .pcfnt-art img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* 창 오른쪽 위 × — 그림 위 */
body.pcf-on .pcfnt-xi {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgb(255 255 255 / 0.18);
	color: var(--pcfnt-fg);
	line-height: 0;
	cursor: pointer;
}

body.pcf-on .pcfnt-xi:hover {
	background: rgb(255 255 255 / 0.3);
	color: var(--pcfnt-fg);
}

body.pcf-on .pcfnt :is(a, button):focus-visible {
	outline: 2px solid var(--pcfnt-fg);
	outline-offset: 2px;
}

body.pcf-on .pcfnt .pcfnt-art:focus-visible {
	outline-offset: -3px;
}

/* 폰 · 태블릿 — 한 줄로 쌓는다(그림 위 16:9 · 글 아래) · 폭 420 까지 */
@media (max-width: 820px) {
	body.pcf-on .pcfnt-box {
		width: 420px;
	}

	body.pcf-on .pcfnt-slide {
		grid-template-columns: minmax(0, 1fr);
	}

	body.pcf-on .pcfnt-art {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	body.pcf-on .pcfnt-art img {
		object-position: 50% 0;
	}

	/* 그림 영역 — 관리 화면(배너 관리 › 소식 배너)에서 홈 카드용으로 고른 네모를 이 칸(16:9)에 맞춰 보인다
	   --a = 그림 가로 ÷ 세로 · --x · --y = 보이는 네모 가운데 · --z = 확대 · --c = 칸 가로 ÷ 세로
	   ⚠️ 홈 카드(css/pcf-home.css 2절 .pcfh-fc) · 관리 화면 미리 보기(admin.css .opb-fc · admin.js clampFocus)와 같은 공식 — 고치면 넷을 같이 */
	body.pcf-on .pcfnt-art.is-fc {
		--c: 1.7778;
		--w: calc(var(--z, 1) * max(1, var(--a, 1) / var(--c)));
		--h: calc(var(--w) * var(--c) / var(--a, 1));
	}

	body.pcf-on .pcfnt-art.is-fc img {
		inset: auto;
		top: clamp(calc((1 - var(--h)) * 100%), calc((0.5 - var(--y, 0) * var(--h)) * 100%), 0%);
		left: clamp(calc((1 - var(--w)) * 100%), calc((0.5 - var(--x, 0.5) * var(--w)) * 100%), 0%);
		width: calc(var(--w) * 100%);
		height: auto;
		object-fit: fill;
	}

	body.pcf-on .pcfnt-t {
		padding: 20px;
	}

	body.pcf-on .pcfnt .pcfnt-h {
		margin-top: 12px;
		font-size: 22px;
	}

	body.pcf-on .pcfnt .pcfnt-d {
		font-size: 14px;
	}

	body.pcf-on .pcfnt .pcfnt-go,
	body.pcf-on .pcfnt .pcfnt-x {
		margin-top: 20px;
	}

	body.pcf-on .pcfnt .pcfnt-go + .pcfnt-x {
		margin-top: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.pcf-on .pcfnt,
	body.pcf-on .pcfnt-box {
		transition: none;
	}

	body.pcf-on .pcfnt-box {
		transform: none;
	}
}