/*
	포트폴리오 전용 스타일
	main.css(HTML5 UP Hyperspace 템플릿) 다음에 읽혀서 필요한 부분만 덧씌웁니다.
	색은 아래 :root 의 --pf-* 값을 고치면 전체에 반영됩니다.
*/

/* Tokens */

	:root {
		color-scheme: dark;
		--pf-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
		--pf-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, 'D2Coding', monospace;
		--pf-ink: #f6f1ff;
		--pf-text: rgba(246, 241, 255, 0.84);
		--pf-text-muted: rgba(246, 241, 255, 0.68);
		--pf-line: rgba(246, 241, 255, 0.14);
		--pf-line-strong: rgba(246, 241, 255, 0.3);
		--pf-fill: rgba(246, 241, 255, 0.07);
		--pf-grid-line: rgba(246, 241, 255, 0.1);
		--pf-accent: #f2a5d6;
		--pf-accent-ink: #2a0f2f;
		/* 성과 지표 막대: 개선 전(빨강) / 개선 후(초록). 색약 시뮬레이션에서도 밝기로 구분되는 값입니다. */
		--pf-before: #b83a58;
		--pf-after: #38aa76;
		--pf-surface: #1e0d42;
		--pf-radius-s: 4px;
		--pf-radius-m: 8px;
		--pf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	}

	/* 섹션 배경마다 글자 대비 4.5:1 이상이 되도록 글자 밝기를 맞춥니다. */
	.wrapper {
		color: var(--pf-text);
	}

		.wrapper.style1,
		.wrapper.style1-alt {
			--pf-surface: #1e0d42;
		}

		.wrapper.alt {
			--pf-surface: #261c3e;
		}

		.wrapper.style4,
		.wrapper.style4-alt {
			--pf-surface: #3c2277;
		}

		.wrapper.style2,
		.wrapper.style2-alt {
			--pf-surface: #5b4297;
			--pf-text: rgba(246, 241, 255, 0.88);
			--pf-text-muted: rgba(246, 241, 255, 0.8);
			--pf-line: rgba(246, 241, 255, 0.2);
		}

		.wrapper.style3,
		.wrapper.style3-alt {
			--pf-surface: #7050a1;
			--pf-text: rgba(246, 241, 255, 0.96);
			--pf-text-muted: rgba(246, 241, 255, 0.9);
			--pf-line: rgba(246, 241, 255, 0.24);
		}

/* Base */

	html {
		/* 내용이 그려져 스크롤바가 생길 때 로딩 명함이 옆으로 밀리지 않게 자리를 미리 비워 둡니다. */
		scrollbar-color: #5b4297 #1e0d42;
		scrollbar-gutter: stable;
	}

	body, input, select, textarea, button {
		font-family: var(--pf-font);
	}

	body {
		color: var(--pf-text);
		word-break: keep-all;
		overflow-wrap: break-word;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

		@media screen and (min-width: 1681px) {

			body, input, select, textarea {
				font-size: 15pt;
			}

		}

	::selection {
		background: rgba(242, 165, 214, 0.35);
		color: var(--pf-ink);
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--pf-ink);
		letter-spacing: -0.02em;
		text-wrap: balance;
	}

	h1, h2 {
		line-height: 1.25;
	}

	h3, h4 {
		line-height: 1.4;
	}

	strong, b {
		color: var(--pf-ink);
		font-weight: 700;
	}

	p, li, dd {
		text-wrap: pretty;
	}

	a:hover {
		color: var(--pf-ink);
	}

	code {
		background: var(--pf-fill);
		border: 0;
		border-radius: var(--pf-radius-s);
		font-family: var(--pf-mono);
		font-size: 0.86em;
		margin: 0 0.1em;
		padding: 0.12em 0.4em;
	}

	:focus-visible,
	a:focus-visible,
	button:focus-visible,
	.button:focus-visible,
	summary:focus-visible,
	canvas:focus-visible {
		outline: 2px solid var(--pf-accent);
		outline-offset: 3px;
	}

	[tabindex="-1"]:focus {
		outline: none;
	}

	[tabindex="-1"]:focus-visible {
		outline: 2px solid var(--pf-accent);
		outline-offset: 6px;
		border-radius: var(--pf-radius-m);
	}

	#wrapper:focus,
	#wrapper:focus-visible {
		outline: none;
	}

	.pf-visually-hidden {
		border: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		white-space: nowrap;
		width: 1px;
	}

	.pf-skip {
		background: var(--pf-ink);
		border: 0;
		border-radius: var(--pf-radius-s);
		color: #1e0d42 !important;
		font-weight: 700;
		left: 0.75em;
		padding: 0.6em 1em;
		position: fixed;
		top: 0.75em;
		transform: translateY(calc(-100% - 1em));
		transition: transform 160ms var(--pf-ease-out);
		z-index: 10001;
	}

		.pf-skip:focus {
			transform: none;
		}

	/* 템플릿의 button 기본 모양(대문자, 넓은 자간, 높이 고정)을 지운 버튼 */
	.pf-button {
		appearance: none;
		background: none;
		border: 0 !important;
		border-radius: var(--pf-radius-s);
		color: inherit !important;
		cursor: pointer;
		font: inherit;
		height: auto;
		letter-spacing: inherit;
		padding: 0;
		text-align: inherit;
		text-transform: none;
		white-space: normal;
	}

		.pf-button::after {
			display: none;
		}

	/* 글 블록(머리글, 요약, 경력 상세, 성과 카드, 메모)은 최대 폭을 따로 두지 않고 섹션 안쪽 폭을 그대로 채웁니다.
	   블록마다 폭이 달라서 짧은 글이 일찍 줄을 바꾸던 것을 막습니다. */
	.pf-lead {
		margin: 0 0 2.25em 0;
	}

		.pf-lead p {
			margin: 0 0 0.75em 0;
		}

	.pf-actions {
		flex-wrap: wrap;
		margin-bottom: 1.5em;
		row-gap: 0.85em;
	}

		.pf-actions .button {
			letter-spacing: 0.12em;
		}

	.pf-badge {
		background: var(--pf-accent);
		border-radius: var(--pf-radius-s);
		color: var(--pf-accent-ink);
		display: inline-block;
		flex: none;
		font-size: 0.62em;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1;
		padding: 0.4em 0.5em;
		vertical-align: 0.25em;
		white-space: nowrap;
	}

/* Sidebar */

	/* 템플릿 기본(흰색 35%)은 대비가 3:1 에 그쳐서 4.5:1 을 넘게 올립니다. */
	#sidebar nav a {
		color: rgba(246, 241, 255, 0.58);
		letter-spacing: 0.18em;
	}

		#sidebar nav a:hover {
			color: rgba(246, 241, 255, 0.75);
		}

		#sidebar nav a:focus-visible {
			outline-offset: 2px;
		}

	/* 1400px 이하: 위쪽 막대. 메뉴가 넘치면 가로로 스크롤되고, 들어가면 가운데 정렬됩니다. */
	@media screen and (max-width: 1400px) {

		html {
			scroll-padding-top: calc(3.5em + 1rem);
		}

		.wrapper.fullscreen {
			min-height: calc(100vh - 3.5em);
		}

		#sidebar > .inner {
			justify-content: flex-start;
		}

		#sidebar nav {
			width: 100%;
		}

			#sidebar nav ul {
				overflow-x: auto;
				overflow-y: hidden;
				overscroll-behavior-x: contain;
				padding: 0 1.25em;
				scrollbar-width: none;
			}

				#sidebar nav ul::-webkit-scrollbar {
					display: none;
				}

				#sidebar nav > ul > li {
					flex: none;
					margin: 0 0 0 1.75em;
				}

				#sidebar nav > ul > li:first-child {
					margin-left: auto;
				}

				#sidebar nav > ul > li:last-child {
					margin-right: auto;
				}

			#sidebar nav a:focus-visible {
				outline-offset: -3px;
			}

	}

	/* 736px 이하: 템플릿은 메뉴를 숨기지만, 여기서는 얇은 막대로 남깁니다. */
	@media screen and (max-width: 736px) {

		html {
			scroll-padding-top: calc(3em + 0.75rem);
		}

		#sidebar {
			display: block;
			height: 3em;
			line-height: 3em;
		}

			#sidebar nav > ul > li {
				margin-left: 1.35em;
			}

		#sidebar + #wrapper {
			padding-top: 3em;
		}

	}

/* Language toggle (우상단 KO / EN, assets/js/portfolio/i18n.js) */

	.pf-lang {
		backdrop-filter: blur(8px);
		background: rgba(30, 13, 66, 0.72);
		border: 1px solid var(--pf-line-strong);
		border-radius: 999px;
		box-sizing: border-box;
		display: flex;
		font-size: 0.75rem;
		gap: 2px;
		height: 2rem;
		line-height: 1;
		padding: 3px;
		position: fixed;
		right: 1.5rem;
		top: 1.25rem;
		z-index: 10001;
	}

		.pf-lang a {
			align-items: center;
			border-bottom: 0;
			border-radius: 999px;
			color: var(--pf-text-muted);
			font-weight: 600;
			letter-spacing: 0.12em;
			display: flex;
			padding: 0 0.85em 0 0.97em;
			text-decoration: none;
			transition: background-color 0.2s var(--pf-ease-out), color 0.2s var(--pf-ease-out);
		}

			.pf-lang a:hover {
				color: var(--pf-ink);
			}

			.pf-lang a[aria-current] {
				background: var(--pf-accent);
				color: var(--pf-accent-ink);
			}

			.pf-lang a:focus-visible {
				outline: 2px solid var(--pf-accent);
				outline-offset: 2px;
			}

	html.is-embed .pf-lang {
		display: none;
	}

	/* 1400px 이하: 위쪽 막대(3.5em = 56px) 오른쪽 끝에 세로 가운데로 놓고, 메뉴가 토글 밑으로 들어가지 않게 비웁니다. */
	@media screen and (max-width: 1400px) {

		.pf-lang {
			backdrop-filter: none;
			background: transparent;
			right: 1rem;
			top: calc(1.75rem - 1rem);
		}

		#sidebar nav ul {
			margin-right: 7.5rem;
		}

	}

	@media screen and (max-width: 736px) {

		/* 막대가 3em(48px)으로 얇아집니다. */
		.pf-lang {
			right: 0.75rem;
			top: calc(1.5rem - 1rem);
		}

		#sidebar nav ul {
			margin-right: 7rem;
		}

	}

/* Intro */

	/* 템플릿의 #intro p { font-size: 1.25em } 을 되돌립니다. */
	#intro p {
		font-size: inherit;
	}

		/* 위 규칙이 id 선택자라서, 크기를 따로 정한 문단은 같은 무게로 한 번 더 적습니다. */
		#intro .pf-intro__brief {
			font-size: 1.15em;
		}

	/* 명함 아래 소개 글 */
	.pf-intro {
		margin-top: 2.5em;
	}

	.pf-intro__brief {
		color: var(--pf-ink);
		font-size: 1.15em;
		line-height: 1.6;
		margin: 0 0 1.25em 0;
		text-wrap: pretty;
	}

		.pf-intro__brief strong {
			font-variant-numeric: tabular-nums;
		}

	.pf-intro__summary p {
		margin: 0 0 1em 0;
	}

		/* 회사 로고 + 회사 줄 + 역할 줄 */
		.pf-intro__summary--list {
			list-style: none;
			margin: 0 0 1em 0;
			padding: 0;
		}

			.pf-intro__summary--list li {
				align-items: flex-start;
				display: flex;
				gap: 0.7em;
				margin: 0 0 1em 0;
			}

			.pf-intro__summary--list p,
			#intro .pf-intro__summary--list p {
				margin: 0;
			}

			.pf-intro__logo {
				background: var(--pf-ink);
				border-radius: var(--pf-radius-s);
				box-sizing: border-box;
				flex: none;
				height: 1.6em;
				margin-top: 0.1em;
				object-fit: contain;
				padding: 0.18em;
				width: 1.6em;
			}

			.pf-intro__company {
				color: var(--pf-ink);
			}

		/* 템플릿은 980px 이하에서 #intro p 의 줄바꿈을 숨깁니다. 요약의 줄바꿈은 제목 줄과 설명 줄을 나누는 것이라 그대로 둡니다.
		   숨기면 띄어쓰기 없이 "4.27)출시", "함께했습니다.퍼포먼스" 처럼 붙어 버립니다. */
		@media screen and (max-width: 980px) {

			#intro .pf-intro__summary br {
				display: inline;
			}

		}

	/* 두 칸씩 놓아 "Unreal Engine 4.27 / 5", "2021.11 ~ 2025.09" 가 한 줄에 들어가게 합니다. */
	.pf-facts {
		display: grid;
		gap: 1.25em 2em;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 2em 0;
		max-width: 36em;
	}

		.pf-facts__item {
			border-top: solid 1px var(--pf-line);
			padding-top: 0.85em;
		}

		.pf-facts dt {
			color: var(--pf-text-muted);
			font-size: 0.8em;
			font-weight: 600;
			margin: 0 0 0.3em 0;
		}

		.pf-facts dd {
			margin: 0;
		}

		.pf-facts__value {
			color: var(--pf-ink);
			display: block;
			font-weight: 600;
			line-height: 1.45;
		}

		.pf-facts__meta {
			color: var(--pf-text-muted);
			display: block;
			font-size: 0.85em;
			font-variant-numeric: tabular-nums;
		}

		/* logo 가 있으면 왼쪽 칸에 로고, 오른쪽 칸에 값과 기간을 둡니다.
		   로고는 밝은 타일에 담아 어두운 배경에서도 원래 색으로 보이게 합니다. */
		.pf-facts dd.has-logo {
			column-gap: 0.5em;
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
		}

			.pf-facts dd.has-logo > * {
				grid-column: 2;
			}

			.pf-facts dd.has-logo > .pf-facts__logo {
				grid-column: 1;
				grid-row: 1;
			}

		.pf-facts__logo {
			background: var(--pf-ink);
			border-radius: var(--pf-radius-s);
			box-sizing: border-box;
			display: block;
			height: 1.45em;
			object-fit: contain;
			padding: 0.18em;
			width: 1.45em;
		}

	/* 폰 세로 폭에서는 로고 칸까지 두 칸에 넣으면 기간 숫자가 중간에서 끊겨 한 칸씩 쌓습니다. */
	@media screen and (max-width: 480px) {

		.pf-facts {
			grid-template-columns: minmax(0, 1fr);
		}

	}

	/* 연락처: 주소는 글자 그대로 보이고(누르면 메일 앱), 옆 '복사' 버튼으로 주소를 복사합니다. */
	.pf-contact {
		list-style: none;
		margin: 0;
		padding: 0;
	}

		.pf-contact li {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			gap: 0.4em 0.75em;
			padding: 0;
		}

		.pf-contact__label {
			color: var(--pf-text-muted);
			font-size: 0.8em;
			font-weight: 600;
		}

		.pf-contact__value {
			color: var(--pf-ink);
			font-weight: 600;
			overflow-wrap: anywhere;
		}

		/* .pf-button 이 지운 테두리와 글자색을 이 버튼에만 다시 줍니다. (둘 다 템플릿이 !important 로 정합니다) */
		.pf-contact .pf-contact__copy {
			align-items: center;
			border: solid 1px var(--pf-line-strong) !important;
			color: var(--pf-ink) !important;
			display: inline-flex;
			font-size: 0.8em;
			font-weight: 600;
			justify-content: center;
			min-height: 2.1em;
			min-width: 4.5em;
			padding: 0 0.75em;
			transition: background-color 160ms var(--pf-ease-out), border-color 160ms var(--pf-ease-out), color 160ms var(--pf-ease-out);
		}

			.pf-contact .pf-contact__copy:hover,
			.pf-contact .pf-contact__copy.is-done {
				background: var(--pf-accent);
				border-color: var(--pf-accent) !important;
				color: var(--pf-accent-ink) !important;
			}

			.pf-contact .pf-contact__copy:active {
				transform: scale(0.97);
			}

			/* 터치 화면: 보이는 크기는 조금만 키우고, 누르는 영역은 위아래로 넓혀 44px 을 넘깁니다. */
			@media (pointer: coarse) {

				.pf-contact .pf-contact__copy {
					min-height: 2.75em;
				}

					.pf-contact .pf-contact__copy::before {
						content: '';
						inset: -0.5em -0.25em;
						position: absolute;
					}

			}

	.pf-motto {
		align-items: center;
		border-top: solid 1px var(--pf-line);
		color: var(--pf-text-muted);
		display: flex;
		gap: 1em;
		margin: 2.5em 0 0 0;
		padding-top: 1.5em;
	}

		.pf-motto__avatar {
			flex: none;
			height: 3.25em;
			object-fit: contain;
			width: 3.25em;
		}

/* Skills */

	.pf-skills {
		border-collapse: collapse;
		margin: 0 0 3em 0;
	}

		.pf-skills thead {
			border-bottom: solid 1px var(--pf-line-strong);
		}

		.pf-skills th,
		.pf-skills td {
			padding: 1em 0.75em;
			text-align: left;
			vertical-align: top;
		}

		.pf-skills thead th {
			color: var(--pf-text-muted);
			font-size: 0.8em;
			font-weight: 600;
			padding-bottom: 0.75em;
			padding-top: 0;
		}

		.pf-skills tbody tr:nth-child(n) {
			background: none;
			border: 0;
			border-bottom: solid 1px var(--pf-line);
		}

		.pf-skills tbody th {
			color: var(--pf-ink);
			font-weight: 700;
			width: 11em;
		}

		.pf-skills tbody td:last-child {
			width: 9.5em;
		}

		.pf-skills__summary,
		.pf-skills__detail {
			margin: 0;
		}

		.pf-skills__summary {
			color: var(--pf-ink);
			font-weight: 600;
		}

			.pf-skills__summary + .pf-skills__detail {
				color: var(--pf-text-muted);
				font-size: 0.92em;
				margin-top: 0.3em;
			}

	.pf-refs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4em;
		list-style: none;
		margin: 0;
		padding: 0;
	}

		.pf-refs li {
			padding: 0;
		}

	.pf-ref {
		align-items: center;
		border: solid 1px var(--pf-line-strong);
		border-radius: var(--pf-radius-s);
		color: var(--pf-ink);
		display: inline-flex;
		font-size: 0.85em;
		font-weight: 600;
		min-height: 2.1em;
		padding: 0 0.75em;
		text-decoration: none;
		transition: background-color 160ms var(--pf-ease-out), border-color 160ms var(--pf-ease-out), color 160ms var(--pf-ease-out);
		white-space: nowrap;
	}

		a.pf-ref:hover {
			background: var(--pf-accent);
			border-color: var(--pf-accent);
			color: var(--pf-accent-ink);
		}

		a.pf-ref:active {
			transform: scale(0.97);
		}

		.pf-ref--static {
			color: var(--pf-text-muted);
		}

		@media (pointer: coarse) {

			.pf-ref {
				min-height: 2.75em;
			}

		}

	.pf-tools h3 {
		margin-bottom: 1em;
	}

	.pf-tools__grid {
		display: grid;
		gap: 1.5em 2.5em;
		grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
	}

	.pf-tools__group {
		border-top: solid 1px var(--pf-line);
		padding-top: 0.85em;
	}

		.pf-tools__group h4 {
			font-size: 1em;
			margin: 0 0 0.15em 0;
		}

		.pf-tools__meta {
			color: var(--pf-text-muted);
			font-size: 0.85em;
			font-variant-numeric: tabular-nums;
			margin: 0 0 0.5em 0;
		}

		.pf-tools__group ul {
			margin: 0.5em 0 0 0;
			padding-left: 1.1em;
		}

			.pf-tools__group li {
				padding-left: 0.3em;
			}

	@media screen and (max-width: 736px) {

		.pf-skills,
		.pf-skills tbody,
		.pf-skills tr,
		.pf-skills th,
		.pf-skills td {
			display: block;
			width: auto !important;
		}

		.pf-skills thead {
			display: none;
		}

		.pf-skills tbody tr:nth-child(n) {
			padding: 1.1em 0;
		}

		.pf-skills th,
		.pf-skills td {
			padding: 0;
		}

		.pf-skills tbody th {
			margin-bottom: 0.35em;
		}

		.pf-skills td + td {
			margin-top: 0.75em;
		}

	}

/* Career */

	.pf-career__head--visual {
		align-items: center;
		display: grid;
		gap: 3em;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.pf-career__title {
		font-size: 2.25em;
		line-height: 1.2;
		margin: 0 0 0.5em 0;
	}

		.pf-career__title a {
			border-bottom: solid 2px var(--pf-line);
		}

			.pf-career__title a:hover {
				border-bottom-color: var(--pf-accent);
			}

	/* 템플릿의 header p (흰색 35%) 를 덮어 본문 밝기로 맞춥니다. */
	.pf-career__summary p {
		color: var(--pf-text);
		margin: 0 0 1em 0;
	}

	.pf-meta {
		column-gap: 1.5em;
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		margin: 1.5em 0;
		row-gap: 0.5em;
	}

		.pf-meta > div {
			display: contents;
		}

		.pf-meta dt {
			color: var(--pf-text-muted);
			font-size: 0.9em;
			font-weight: 600;
			margin: 0;
		}

		.pf-meta dd {
			color: var(--pf-ink);
			margin: 0;
		}

		.pf-meta__sub {
			color: var(--pf-text-muted);
			display: block;
			font-size: 0.9em;
		}

	.pf-career__visual {
		border-radius: var(--pf-radius-m);
		margin: 0;
		overflow: hidden;
		position: relative;
	}

		.pf-career__visual img {
			aspect-ratio: 16 / 9;
			display: block;
			object-fit: cover;
			width: 100%;
		}

		/* spotlights 처럼, 섹션이 화면에 들어오면 덮개가 걷힙니다. */
		.pf-career__visual::after {
			background: rgba(38, 28, 62, 0.9);
			content: '';
			inset: 0;
			opacity: 0;
			pointer-events: none;
			position: absolute;
			transition: opacity 1.2s ease 0.35s;
		}

		.pf-career.inactive .pf-career__visual::after,
		body.is-preload .pf-career__visual::after {
			opacity: 1;
		}

	.pf-highlights {
		column-gap: 3em;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		list-style: none;
		margin: 2.5em 0;
		padding: 0;
	}

		.pf-highlights > li {
			border-top: solid 1px var(--pf-line);
			padding: 1.25em 0;
		}

		.pf-highlights h3 {
			font-size: 1.05em;
			margin: 0 0 0.4em 0;
		}

		.pf-highlights__body > :last-child {
			margin-bottom: 0;
		}

		.pf-highlights__body p {
			margin: 0 0 0.5em 0;
		}

		.pf-highlights__body ul {
			margin: 0;
			padding-left: 1.1em;
		}

			.pf-highlights__body li {
				margin: 0.25em 0;
				padding-left: 0.2em;
			}

		.pf-highlights__body strong {
			font-variant-numeric: tabular-nums;
		}

	.pf-career__columns {
		display: grid;
		gap: 2.5em 3em;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		margin: 1em 0 0 0;
	}

		.pf-career__columns h3 {
			font-size: 1.2em;
			margin: 0 0 1em 0;
		}

	.pf-stack__groups,
	.pf-strengths__list {
		margin: 0;
	}

		.pf-stack__group {
			margin: 0 0 1.1em 0;
		}

			.pf-stack__group dt {
				color: var(--pf-text-muted);
				font-size: 0.82em;
				font-weight: 600;
				margin: 0 0 0.45em 0;
			}

			.pf-stack__group dd {
				margin: 0;
			}

		.pf-strengths__list > div {
			border-top: solid 1px var(--pf-line);
			padding: 0.8em 0;
		}

			.pf-strengths__list dt {
				color: var(--pf-ink);
				margin: 0 0 0.2em 0;
			}

			.pf-strengths__list dd {
				margin: 0;
			}

	.pf-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4em;
		list-style: none;
		margin: 0;
		padding: 0;
	}

		.pf-chips li {
			background: var(--pf-fill);
			border-radius: var(--pf-radius-s);
			color: var(--pf-ink);
			font-size: 0.85em;
			padding: 0.2em 0.65em;
		}

	@media screen and (max-width: 980px) {

		.pf-career__head--visual,
		.pf-career__columns {
			grid-template-columns: minmax(0, 1fr);
		}

		.pf-career__visual {
			order: -1;
		}

	}

	@media screen and (max-width: 736px) {

		.pf-career__title {
			font-size: 1.75em;
		}

		.pf-highlights {
			grid-template-columns: minmax(0, 1fr);
		}

	}

/* Career details (경력 상세) */

	.pf-details {
		margin-top: 3.5em;
	}

	.pf-details__head {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em 1.5em;
		justify-content: space-between;
	}

		.pf-details__head h3 {
			font-size: 1.35em;
			margin: 0;
		}

	.pf-details__toggle-all {
		color: var(--pf-text) !important;
		font-size: 0.88em;
		font-weight: 600;
		padding: 0.5em 0.1em;
		text-decoration: underline;
		text-decoration-color: var(--pf-line-strong);
		text-underline-offset: 0.3em;
	}

		.pf-details__toggle-all:hover {
			color: var(--pf-ink) !important;
			text-decoration-color: var(--pf-ink);
		}

	.pf-rnd-note {
		align-items: baseline;
		color: var(--pf-text-muted);
		display: flex;
		font-size: 0.88em;
		gap: 0.6em;
		margin: 0.75em 0 1.25em 0;
	}

		.pf-rnd-note .pf-badge {
			font-size: 0.7em;
			vertical-align: 0;
		}

	.pf-details__list {
		border-bottom: solid 1px var(--pf-line);
	}

	.pf-detail {
		border-top: solid 1px var(--pf-line);
		padding: 1.1em 0;
		position: relative;
	}

		/* 근거 링크로 왔을 때 잠깐 비치는 강조 */
		.pf-detail::before {
			background: rgba(242, 165, 214, 0.12);
			border-radius: var(--pf-radius-m);
			content: '';
			inset: 0 -1em;
			opacity: 0;
			pointer-events: none;
			position: absolute;
		}

		.pf-detail.is-flash::before {
			animation: pf-flash 1.6s var(--pf-ease-out);
		}

	@keyframes pf-flash {
		0% { opacity: 0; }
		12% { opacity: 1; }
		100% { opacity: 0; }
	}

	.pf-detail__heading {
		font-size: 1.05em;
		margin: 0;
	}

	.pf-detail__toggle {
		align-items: flex-start;
		color: var(--pf-ink) !important;
		display: flex;
		gap: 0.75em;
		padding: 0.1em 0;
		width: 100%;
	}

	.pf-detail__label {
		flex: 1 1 auto;
	}

		.pf-detail__label .pf-badge {
			margin-left: 0.35em;
		}

	.pf-detail__chevron {
		color: var(--pf-text-muted);
		flex: none;
		height: 1.15em;
		margin-top: 0.2em;
		transition: transform 240ms var(--pf-ease-out), color 160ms ease;
		width: 1.15em;
	}

		.pf-detail.is-open .pf-detail__chevron {
			transform: rotate(180deg);
		}

		.pf-detail__toggle:hover .pf-detail__chevron {
			color: var(--pf-ink);
		}

		.pf-detail__toggle:hover .pf-detail__title {
			text-decoration: underline;
			text-decoration-color: var(--pf-line-strong);
			text-underline-offset: 0.25em;
		}

	.pf-detail__lead {
		margin-top: 0.45em;
	}

		.pf-detail__lead p {
			margin: 0;
		}

	.pf-detail__content {
		padding-top: 1em;
	}

		.pf-detail__content > :last-child {
			margin-bottom: 0;
		}

		.pf-detail__content p {
			margin: 0 0 1em 0;
		}

		.pf-detail__content ul,
		.pf-detail__content ol {
			margin: 0 0 1em 0;
			padding-left: 1.15em;
		}

		.pf-detail__content li {
			margin: 0.4em 0;
			padding-left: 0.3em;
		}

			.pf-detail__content li > ul,
			.pf-detail__content li > ol {
				font-size: 0.95em;
				margin: 0.35em 0 0.6em 0;
			}

		.pf-detail__content img {
			border-radius: var(--pf-radius-s);
			display: block;
			height: auto;
			margin: 0.5em 0 1em 0;
			max-width: 100%;
		}

		/* 항목 안의 작은 제목 (Markdown ### → h5) */
		.pf-detail__content .pf-subhead {
			font-size: 1em;
			margin: 2em 0 0.65em 0;
		}

			.pf-detail__content > .pf-subhead:first-child {
				margin-top: 0.25em;
			}

		/* 표: 숫자는 자릿수를 맞추고, 좁은 화면에서는 옆으로 밀어 봅니다. */
		.pf-table {
			margin: 0 0 1.25em 0;
			overflow-x: auto;
		}

			.pf-table table {
				border-collapse: collapse;
				margin: 0;
				min-width: 21em;
				width: auto;
			}

			.pf-table thead {
				border-bottom: solid 1px var(--pf-line-strong);
			}

			.pf-table th,
			.pf-table td {
				font-variant-numeric: tabular-nums;
				padding: 0.5em 0.75em;
				text-align: left;
				vertical-align: top;
			}

				.pf-table th:first-child,
				.pf-table td:first-child {
					padding-left: 0;
				}

			.pf-table thead th {
				color: var(--pf-text-muted);
				font-size: 0.8em;
				font-weight: 600;
				white-space: nowrap;
			}

			.pf-table tbody tr:nth-child(n) {
				background: none;
				border: 0;
				border-bottom: solid 1px var(--pf-line);
			}

			.pf-table [align="right"] {
				text-align: right;
				white-space: nowrap;
			}

			.pf-table [align="center"] {
				text-align: center;
			}

		/* 이미지 + 설명. ![대체 글](경로 "설명") */
		.pf-media {
			display: block;
			margin: 0.75em 0 1.25em 0;
		}

			.pf-detail__content .pf-media img {
				margin: 0;
			}

		.pf-media__caption {
			color: var(--pf-text-muted);
			display: block;
			font-size: 0.85em;
			margin-top: 0.6em;
		}

		/* 경로 끝 #slide: 화면에 들어오면 왼쪽에서 오른쪽으로 들어옵니다. (is-shown 은 interactions.js) */
		.pf-media__frame {
			border-radius: var(--pf-radius-s);
			display: block;
			max-width: 100%;
			overflow: hidden;
			width: fit-content;
		}

			.pf-media--slide img {
				opacity: 0;
				transform: translateX(-100%);
			}

			.pf-media--slide.is-shown img {
				opacity: 1;
				transform: none;
				transition: transform 560ms var(--pf-ease-out), opacity 320ms ease-out;
			}

		.pf-detail__content details {
			background: rgba(0, 0, 0, 0.14);
			border: solid 1px var(--pf-line);
			border-radius: var(--pf-radius-m);
			margin: 1em 0;
		}

			.pf-detail__content details > :not(summary) {
				margin-left: 1em;
				margin-right: 1em;
			}

			.pf-detail__content details > :last-child {
				margin-bottom: 1em;
			}

		.pf-detail__content summary {
			align-items: center;
			border-radius: var(--pf-radius-m);
			color: var(--pf-ink);
			cursor: pointer;
			display: flex;
			font-weight: 600;
			gap: 0.65em;
			list-style: none;
			padding: 0.75em 1em;
		}

			.pf-detail__content summary::-webkit-details-marker {
				display: none;
			}

			.pf-detail__content summary::before {
				border-bottom: solid 1.5px currentColor;
				border-right: solid 1.5px currentColor;
				content: '';
				flex: none;
				height: 0.45em;
				transform: rotate(-45deg);
				transition: transform 200ms var(--pf-ease-out);
				width: 0.45em;
			}

			.pf-detail__content details[open] > summary::before {
				transform: rotate(45deg);
			}

	@media screen and (max-width: 736px) {

		/* 좁은 화면에서는 표를 옆으로 밀지 않아도 네 칸이 다 보이게 합니다.
		   글자와 칸 여백을 줄이고, "299회 / 14.7초" 같은 값은 띄어쓰기에서 줄을 바꿉니다. */
		.pf-table table {
			font-size: 0.875em;
			min-width: 0;
			width: 100%;
		}

		.pf-table th,
		.pf-table td {
			padding: 0.55em 0.45em;
		}

			.pf-table th:last-child,
			.pf-table td:last-child {
				padding-right: 0;
			}

		.pf-table [align="right"] {
			white-space: normal;
		}

	}

/* Impact (성과 지표: 개선 전 막대 위에 개선 후 막대를 겹친 차트) */

	.pf-legend {
		color: var(--pf-text-muted);
		display: flex;
		flex-wrap: wrap;
		font-size: 0.85em;
		gap: 0.5em 1.5em;
		margin: 0 0 2.5em 0;
	}

		.pf-legend__item {
			align-items: center;
			display: inline-flex;
			gap: 0.5em;
		}

		.pf-legend__swatch {
			border-radius: 2px;
			height: 0.75em;
			width: 1.25em;
		}

		.pf-legend__swatch--before {
			background: var(--pf-before);
		}

		.pf-legend__swatch--after {
			background: var(--pf-after);
		}

	.pf-cases {
		display: grid;
		gap: 3.5em;
	}

	.pf-case__head {
		margin-bottom: 1.25em;
		transition: opacity 900ms var(--pf-ease-out), transform 900ms var(--pf-ease-out);
	}

		.pf-case.inactive .pf-case__head {
			opacity: 0;
			transform: translateY(0.75em);
		}

		.pf-case__head h3 {
			font-size: 1.3em;
			margin: 0;
		}

	.pf-case__subtitle {
		color: var(--pf-accent);
		font-weight: 600;
		margin: 0.1em 0 0.6em 0;
	}

	.pf-case__text {
		margin: 0;
	}

	.pf-bars {
		border-collapse: collapse;
		margin: 0;
		table-layout: fixed;
	}

		.pf-bars .pf-col-metric {
			width: 30%;
		}

		.pf-bars .pf-col-values {
			width: 10.5em;
		}

		.pf-bars .pf-col-change {
			width: 4.75em;
		}

		.pf-bars thead {
			border-bottom: solid 1px var(--pf-line);
		}

		.pf-bars th,
		.pf-bars td {
			padding: 0.75em 0.5em;
			vertical-align: middle;
		}

		.pf-bars thead th {
			color: var(--pf-text-muted);
			font-size: 0.78em;
			font-weight: 600;
			padding-top: 0;
			vertical-align: bottom;
		}

		.pf-bars tbody tr:nth-child(n) {
			background: none;
			border: 0;
			border-bottom: solid 1px var(--pf-line);
			transition: opacity 200ms ease;
		}

		.pf-bars__metric {
			text-align: left;
		}

			tbody .pf-bars__metric {
				color: var(--pf-ink);
				font-weight: 600;
				line-height: 1.45;
			}

		.pf-bars__note {
			color: var(--pf-text-muted);
			display: block;
			font-size: 0.85em;
			font-weight: 400;
			font-variant-numeric: tabular-nums;
		}

		.pf-bars .pf-bars__plot {
			padding-left: 1em;
			padding-right: 1em;
		}

		.pf-bars__values {
			font-variant-numeric: tabular-nums;
			text-align: right;
			white-space: nowrap;
		}

		.pf-bars__change {
			font-variant-numeric: tabular-nums;
			text-align: right;
			white-space: nowrap;
		}

			tbody .pf-bars__change {
				color: var(--pf-ink);
				font-weight: 700;
			}

		@media (hover: hover) {

			.pf-bars tbody:hover tr:not(:hover) {
				opacity: 0.45;
			}

		}

	/* 개선 전(빨강)을 끝까지 깔고, 그 위에 개선 후(초록)를 왼쪽부터 겹칩니다. 남은 빨강이 줄어든 만큼입니다. */
	.pf-bar {
		background: var(--pf-before);
		border-radius: 0 var(--pf-radius-s) var(--pf-radius-s) 0;
		display: block;
		height: 0.875em;
		overflow: hidden;
		position: relative;
	}

	/* 막대 전체 폭 상자를 왼쪽으로 밀어서 오른쪽 끝이 비율 위치에 오게 합니다. 오른쪽 2px 은 경계선입니다. */
	.pf-bar__after {
		background: var(--pf-after);
		border-radius: inherit;
		box-shadow: 2px 0 0 var(--pf-surface);
		inset: 0;
		position: absolute;
		transform: translateX(calc((var(--ratio) - 1) * 100%));
		transition: transform 900ms var(--pf-ease-out) calc(var(--i) * 80ms + 200ms);
	}

		/* 화면에 들어오기 전에는 빨간 막대(개선 전) 그대로였다가, 초록으로 바뀌며 줄어듭니다. */
		.pf-bar__after::before {
			background: var(--pf-before);
			content: '';
			inset: 0;
			opacity: 0;
			position: absolute;
			transition: opacity 260ms ease-out calc(var(--i) * 80ms + 200ms);
		}

	.pf-case.inactive .pf-bar__after {
		transform: none;
	}

		.pf-case.inactive .pf-bar__after::before {
			opacity: 1;
		}

	@media screen and (max-width: 736px) {

		.pf-bars,
		.pf-bars tbody {
			display: block;
		}

		.pf-bars colgroup,
		.pf-bars thead {
			display: none;
		}

		.pf-bars tbody tr:nth-child(n) {
			column-gap: 1em;
			display: grid;
			grid-template-areas: 'metric change' 'plot plot' 'values values';
			grid-template-columns: minmax(0, 1fr) auto;
			padding: 0.9em 0;
		}

		.pf-bars tbody th,
		.pf-bars tbody td {
			display: block;
			padding: 0;
		}

		.pf-bars tbody .pf-bars__metric {
			grid-area: metric;
		}

		.pf-bars tbody .pf-bars__change {
			grid-area: change;
		}

		.pf-bars tbody .pf-bars__plot {
			grid-area: plot;
			padding: 0.55em 0;
		}

		.pf-bars tbody .pf-bars__values {
			color: var(--pf-text-muted);
			font-size: 0.9em;
			grid-area: values;
			text-align: left;
		}

	}

/* Spatial audio lab (공간음향 차폐 데모) */

	.pf-lab {
		--pf-lab-surface: #1e0d42;
		--pf-lab-grid: rgba(246, 241, 255, 0.06);
		--pf-lab-wall: #cbbdf0;
		--pf-lab-explored: rgba(242, 165, 214, 0.15);
		--pf-lab-ray: rgba(246, 241, 255, 0.55);
		align-items: start;
		display: grid;
		gap: 2em 2.5em;
		grid-template-columns: minmax(0, 1.75fr) minmax(15em, 1fr);
		margin: 0 0 3em 0;
	}

	.pf-lab__toolbar {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.75em 1em;
		justify-content: space-between;
		margin-bottom: 0.85em;
	}

	.pf-segmented,
	.pf-lab__actions {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.35em;
	}

		.pf-segmented__item,
		.pf-lab__reset,
		.pf-switch {
			align-items: center;
			box-shadow: inset 0 0 0 1px var(--pf-line-strong);
			color: var(--pf-text) !important;
			display: inline-flex;
			font-size: 0.85em;
			font-weight: 600;
			min-height: 2.5em;
			padding: 0 0.9em;
			transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 120ms var(--pf-ease-out);
		}

			.pf-segmented__item:hover,
			.pf-lab__reset:hover,
			.pf-switch:hover {
				box-shadow: inset 0 0 0 1px var(--pf-ink);
				color: var(--pf-ink) !important;
			}

			.pf-segmented__item:active,
			.pf-lab__reset:active,
			.pf-switch:active {
				transform: scale(0.97);
			}

			.pf-segmented__item[aria-pressed="true"] {
				background: var(--pf-ink);
				box-shadow: none;
				color: var(--pf-surface) !important;
			}

		@media (pointer: coarse) {

			.pf-segmented__item,
			.pf-lab__reset,
			.pf-switch {
				min-height: 2.75em;
			}

		}

	.pf-switch {
		gap: 0.55em;
	}

		.pf-switch__track {
			background: var(--pf-line-strong);
			border-radius: 1em;
			flex: none;
			height: 1.1em;
			position: relative;
			transition: background-color 160ms ease;
			width: 1.9em;
		}

		.pf-switch__thumb {
			background: var(--pf-ink);
			border-radius: 50%;
			height: 0.8em;
			left: 0.15em;
			position: absolute;
			top: 0.15em;
			transition: transform 200ms var(--pf-ease-out);
			width: 0.8em;
		}

		.pf-switch[aria-checked="true"] .pf-switch__track {
			background: var(--pf-accent);
		}

		.pf-switch[aria-checked="true"] .pf-switch__thumb {
			background: var(--pf-accent-ink);
			transform: translateX(0.8em);
		}

	.pf-lab__canvas {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		background: var(--pf-lab-surface);
		border-radius: var(--pf-radius-m);
		cursor: crosshair;
		display: block;
		height: auto;
		touch-action: none;
		user-select: none;
		width: 100%;
	}

	/* 3D 장면: 이름표와 안내 글자를 캔버스 위에 겹칩니다. */
	.pf-lab__view {
		position: relative;
	}

	.pf-lab__canvas--3d {
		aspect-ratio: 16 / 10;
		cursor: grab;
	}

		.pf-lab__canvas--3d.is-grabbing {
			cursor: grabbing;
		}

		/* 좁은 화면에서는 세로를 조금 더 줘서 블록이 너무 작아지지 않게 합니다. */
		@media screen and (max-width: 736px) {

			.pf-lab__canvas--3d {
				aspect-ratio: 4 / 3;
			}

		}

	.pf-lab__labels {
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
	}

	.pf-lab__label {
		background: rgba(30, 13, 66, 0.78);
		border-radius: var(--pf-radius-s);
		color: var(--pf-ink);
		font-size: 0.75em;
		font-weight: 600;
		left: 0;
		line-height: 1.3;
		padding: 0.05em 0.4em;
		position: absolute;
		top: 0;
		white-space: nowrap;
	}

		/* 키보드로 고른 점 */
		.pf-lab__label.is-active {
			box-shadow: inset 0 0 0 1px var(--pf-ink);
		}

		.pf-lab__label--virtual {
			color: var(--pf-accent);
		}

		.pf-lab__label[hidden] {
			display: none;
		}

	.pf-lab__hint {
		background: rgba(30, 13, 66, 0.78);
		border-radius: var(--pf-radius-s);
		box-shadow: inset 0 0 0 1px var(--pf-line-strong);
		color: var(--pf-ink);
		font-size: 0.75em;
		font-weight: 600;
		left: 0.75em;
		margin: 0;
		padding: 0.3em 0.6em;
		pointer-events: none;
		position: absolute;
		top: 0.75em;
		transition: opacity 240ms var(--pf-ease-out);
	}

		.pf-lab__hint.is-hidden {
			opacity: 0;
		}

	.pf-lab__fallback {
		color: var(--pf-text-muted);
		font-size: 0.85em;
		margin: 0 0 0.75em 0;
	}

	.pf-lab__legend {
		color: var(--pf-text-muted);
		display: flex;
		flex-wrap: wrap;
		font-size: 0.85em;
		gap: 0.35em 1.25em;
		list-style: none;
		margin: 0.75em 0 0 0;
		padding: 0;
	}

		.pf-lab__legend li {
			align-items: center;
			display: inline-flex;
			gap: 0.5em;
			padding: 0;
		}

	.pf-lab__key {
		display: inline-block;
		flex: none;
		height: 0.9em;
		width: 0.9em;
	}

		.pf-lab__key--wall {
			background: var(--pf-lab-wall);
		}

		/* 캔버스와 같은 바탕 위에 같은 색을 얹어, 그리드에서 보이는 색과 맞춥니다. */
		.pf-lab__key--explored {
			background: linear-gradient(var(--pf-lab-explored), var(--pf-lab-explored)), var(--pf-lab-surface);
			box-shadow: inset 0 0 0 1px var(--pf-lab-grid);
		}

		.pf-lab__key--path {
			background: var(--pf-accent);
			border-radius: 2px;
			height: 3px;
			width: 1.4em;
		}

		.pf-lab__key--dot {
			background: var(--pf-accent);
			border-radius: 50%;
			height: 0.5em;
			margin: 0 0.2em;
			opacity: 0.8;
			width: 0.5em;
		}

		.pf-lab__key--blocked {
			border-top: dashed 2px rgba(246, 241, 255, 0.6);
			height: 0;
			width: 1.4em;
		}

		.pf-lab__key--virtual {
			border: dashed 2px var(--pf-accent);
			border-radius: 50%;
			height: 0.75em;
			margin: 0 0.08em;
			width: 0.75em;
		}

	.pf-lab__help {
		color: var(--pf-text-muted);
		font-size: 0.85em;
		margin: 0.75em 0 0 0;
	}

		.pf-lab__help p {
			margin: 0 0 0.4em 0;
		}

			.pf-lab__help p:last-child {
				margin-bottom: 0;
			}

	/* 소리 안내 창: 섹션에 들어오면 장면 위에 뜨고 누르면 소리가 납니다. */
	.pf-lab__gate {
		align-items: center;
		background: rgba(30, 13, 66, 0.72);
		border-radius: var(--pf-radius-m);
		display: flex;
		flex-direction: column;
		gap: 0.75em;
		inset: 0;
		justify-content: center;
		padding: 1em;
		position: absolute;
		z-index: 2;
	}

		.pf-lab__gate[hidden] {
			display: none;
		}

	.pf-lab__gate-card {
		background: var(--pf-surface);
		border-radius: var(--pf-radius-m);
		box-shadow: inset 0 0 0 1px var(--pf-line-strong), 0 12px 32px rgba(0, 0, 0, 0.35);
		color: var(--pf-text) !important;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		max-width: 22em;
		padding: 1.1em 1.25em;
		text-align: center;
		transition: box-shadow 160ms ease, transform 120ms var(--pf-ease-out);
		width: 100%;
	}

		.pf-lab__gate-card:hover {
			box-shadow: inset 0 0 0 1px var(--pf-ink), 0 12px 32px rgba(0, 0, 0, 0.35);
		}

		.pf-lab__gate-card:active {
			transform: scale(0.98);
		}

	.pf-lab__gate-title {
		color: var(--pf-ink);
		font-size: 1.05em;
	}

	.pf-lab__gate-text {
		font-size: 0.85em;
		line-height: 1.5;
	}

	.pf-lab__gate-action {
		background: var(--pf-accent);
		border-radius: var(--pf-radius-s);
		color: var(--pf-accent-ink);
		font-size: 0.85em;
		font-weight: 700;
		margin: 0.25em auto 0;
		padding: 0.5em 1em;
	}

	.pf-lab__gate-skip {
		color: var(--pf-text-muted) !important;
		font-size: 0.8em;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

		.pf-lab__gate-skip:hover {
			color: var(--pf-ink) !important;
		}

	/* 소리 조작: 캔버스 아래 한 줄 */
	.pf-lab__sound {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em 0.75em;
		margin: 0.85em 0 0 0;
	}

	.pf-lab__volume {
		align-items: center;
		color: var(--pf-text-muted);
		display: inline-flex;
		font-size: 0.85em;
		font-weight: 600;
		gap: 0.6em;
		margin: 0;
	}

		/* 템플릿이 input 의 기본 모양을 지우므로 트랙과 손잡이를 직접 그립니다. */
		.pf-lab__volume input {
			-webkit-appearance: none;
			appearance: none;
			background: transparent;
			cursor: pointer;
			height: 1.5em;
			margin: 0;
			width: 7em;
		}

			.pf-lab__volume input::-webkit-slider-runnable-track {
				background: var(--pf-line-strong);
				border-radius: 2px;
				height: 3px;
			}

			.pf-lab__volume input::-moz-range-track {
				background: var(--pf-line-strong);
				border-radius: 2px;
				height: 3px;
			}

			.pf-lab__volume input::-webkit-slider-thumb {
				-webkit-appearance: none;
				background: var(--pf-ink);
				border: 0;
				border-radius: 50%;
				height: 0.9em;
				margin-top: calc(1.5px - 0.45em);
				width: 0.9em;
			}

			.pf-lab__volume input::-moz-range-thumb {
				background: var(--pf-ink);
				border: 0;
				border-radius: 50%;
				height: 0.9em;
				width: 0.9em;
			}

			.pf-lab__volume input:focus-visible {
				outline: 2px solid var(--pf-accent);
				outline-offset: 2px;
			}

	.pf-readout {
		border-top: solid 1px var(--pf-line);
		margin: 0 0 1.5em 0;
	}

	.pf-readout__title {
		color: var(--pf-ink);
		font-size: 0.9em;
		margin: 0 0 0.35em 0;
	}

		.pf-readout__title .pf-readout__hint {
			color: var(--pf-text-muted);
			font-weight: 400;
		}

		.pf-readout__row {
			align-items: baseline;
			border-bottom: solid 1px var(--pf-line);
			display: flex;
			gap: 1em;
			justify-content: space-between;
			padding: 0.45em 0;
			position: relative;
		}

		.pf-readout dt {
			color: var(--pf-text-muted);
			font-size: 0.9em;
			font-weight: 400;
			margin: 0;
		}

		.pf-readout dd {
			color: var(--pf-ink);
			font-variant-numeric: tabular-nums;
			font-weight: 600;
			margin: 0;
			text-align: right;
		}

			.pf-readout dd[data-state="blocked"] {
				color: var(--pf-accent);
			}

		.pf-readout__hint {
			font-size: 0.85em;
			margin-left: 0.35em;
		}

		/* 수치 줄의 아래 선이 그대로 막대가 됩니다. */
		.pf-readout__row--meter {
			border-bottom-color: transparent;
			padding-bottom: 0.7em;
		}

	.pf-meter {
		background: var(--pf-line);
		bottom: -1px;
		height: 3px;
		left: 0;
		position: absolute;
		right: 0;
	}

		.pf-meter__fill {
			background: var(--pf-accent);
			display: block;
			height: 100%;
			transform: scaleX(0);
			transform-origin: 0 50%;
			transition: transform 200ms var(--pf-ease-out);
		}

	.pf-curve {
		margin: 0;
	}

		.pf-curve svg {
			display: block;
			height: auto;
			overflow: visible;
			width: 100%;
		}

		.pf-curve text {
			fill: var(--pf-text-muted);
			font-family: var(--pf-font);
			font-size: 9px;
		}

		.pf-curve__grid line {
			stroke: var(--pf-line);
			stroke-width: 1;
		}

		.pf-curve__area {
			fill: rgba(242, 165, 214, 0.1);
		}

		.pf-curve__line {
			fill: none;
			stroke: var(--pf-accent);
			stroke-linejoin: round;
			stroke-width: 2;
		}

		.pf-curve__cutoff {
			stroke: var(--pf-line-strong);
			stroke-dasharray: 3 3;
		}

		.pf-curve__guide {
			stroke: var(--pf-ink);
			stroke-dasharray: 2 3;
			stroke-opacity: 0.35;
		}

		.pf-curve__marker circle {
			fill: var(--pf-ink);
			stroke: var(--pf-surface);
			stroke-width: 2;
		}

		.pf-curve figcaption {
			color: var(--pf-text-muted);
			font-size: 0.8em;
			margin-top: 0.5em;
		}

	.pf-steps {
		counter-reset: pf-step;
		display: grid;
		gap: 1.5em 1.5em;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.pf-steps > li {
			border-top: solid 1px var(--pf-line);
			counter-increment: pf-step;
			padding: 1em 0 0 0;
		}

		.pf-steps h3 {
			font-size: 1em;
			margin: 0 0 0.35em 0;
		}

			.pf-steps h3::before {
				color: var(--pf-text-muted);
				content: counter(pf-step) '. ';
				font-variant-numeric: tabular-nums;
			}

		.pf-steps p {
			font-size: 0.92em;
			margin: 0;
		}

	.pf-spatial__context {
		border-top: solid 1px var(--pf-line);
		display: grid;
		gap: 2em 3.5em;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		margin: 1em 0 2.5em 0;
		padding-top: 2em;
	}

		.pf-spatial__context h3 {
			font-size: 1.15em;
			margin: 0 0 0.85em 0;
		}

		.pf-spatial__why p {
			margin: 0 0 0.9em 0;
		}

			.pf-spatial__why > :last-child {
				margin-bottom: 0;
			}

	.pf-tuning {
		counter-reset: pf-tuning;
		list-style: none;
		margin: 0;
		padding: 0;
	}

		.pf-tuning > li {
			border-top: solid 1px var(--pf-line);
			column-gap: 0.85em;
			counter-increment: pf-tuning;
			display: grid;
			grid-template-columns: 1.4em minmax(0, 1fr);
			padding: 0.75em 0;
		}

			.pf-tuning > li:last-child {
				border-bottom: solid 1px var(--pf-line);
			}

			.pf-tuning > li::before {
				color: var(--pf-accent);
				content: counter(pf-tuning);
				font-variant-numeric: tabular-nums;
				font-weight: 700;
				grid-row: span 2;
			}

		.pf-tuning h4 {
			font-size: 1em;
			margin: 0;
		}

		.pf-tuning p {
			color: var(--pf-text-muted);
			font-size: 0.92em;
			margin: 0.2em 0 0 0;
		}

	.pf-note {
		color: var(--pf-text-muted);
		font-size: 0.85em;
	}

	@media screen and (max-width: 980px) {

		.pf-lab {
			grid-template-columns: minmax(0, 1fr);
		}

		.pf-steps {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.pf-spatial__context {
			grid-template-columns: minmax(0, 1fr);
		}

	}

	@media screen and (max-width: 736px) {

		.pf-steps {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	}

	@media screen and (max-width: 480px) {

		.pf-steps {
			grid-template-columns: minmax(0, 1fr);
		}

	}

/* Prasia lab (프라시아 전기 툴 데모) */

	.pf-toollab {
		display: grid;
		gap: 2.5em;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 0 0 1.5em 0;
	}

		.pf-toollab__item {
			min-width: 0;
		}

		.pf-toollab__item--wide {
			grid-column: 1 / -1;
		}

		.pf-toollab--single {
			grid-template-columns: minmax(0, 1fr);
		}

			.pf-toollab--single .pf-toollab__item {
				max-width: 30em;
			}

		.pf-toollab__item h3 {
			font-size: 1.15em;
			margin: 0 0 0.5em 0;
		}

		.pf-toollab__item > p {
			font-size: 0.92em;
			margin: 0 0 1em 0;
		}

	.pf-toollab__demo {
		--pf-lab-surface: #1e0d42;
		--pf-lab-grid: rgba(246, 241, 255, 0.06);
		--pf-lab-warn: #e9b84a;
		container-type: inline-size;
	}

	/* 미니맵 */
	.pf-minimap__view {
		position: relative;
	}

	.pf-minimap__canvas {
		aspect-ratio: 16 / 10;
		background: var(--pf-lab-surface);
		border-radius: var(--pf-radius-m);
		cursor: crosshair;
		display: block;
		touch-action: pan-y;
		width: 100%;
	}

	.pf-minimap__tip {
		background: rgba(30, 13, 66, 0.92);
		border-radius: var(--pf-radius-s);
		box-shadow: inset 0 0 0 1px var(--pf-line-strong);
		color: var(--pf-ink);
		font-size: 0.75em;
		font-weight: 600;
		left: 0;
		padding: 0.3em 0.6em;
		pointer-events: none;
		position: absolute;
		top: 0;
		transform: translate(-50%, -150%);
		white-space: nowrap;
	}

	.pf-minimap__bar {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.6em 1em;
		margin-top: 0.85em;
	}

		.pf-minimap__threshold output {
			color: var(--pf-ink);
			font-variant-numeric: tabular-nums;
			min-width: 3em;
		}

	.pf-lab__key--ok,
	.pf-lab__key--warn,
	.pf-lab__key--over {
		border-radius: 50%;
	}

	.pf-lab__key--ok {
		background: var(--pf-after);
	}

	.pf-lab__key--warn {
		background: var(--pf-lab-warn);
	}

	.pf-lab__key--over {
		background: var(--pf-before);
	}

	.pf-minimap__rank {
		margin-top: 0.85em;
		min-height: 1em;
	}

		.pf-minimap__rank-title {
			color: var(--pf-ink);
			font-size: 0.9em;
			font-weight: 600;
			margin: 0 0 0.35em 0;
		}

		.pf-minimap__rank ol {
			counter-reset: pf-rank;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.pf-minimap__rank li {
			border-top: solid 1px var(--pf-line);
			counter-increment: pf-rank;
			display: flex;
			font-size: 0.9em;
			gap: 0.75em;
			padding: 0.4em 0;
		}

			.pf-minimap__rank li::before {
				color: var(--pf-text-muted);
				content: counter(pf-rank);
				font-variant-numeric: tabular-nums;
			}

			.pf-minimap__rank li > span:first-of-type {
				color: var(--pf-ink);
				flex: 1 1 auto;
			}

		.pf-minimap__value {
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}

			.pf-minimap__rank .is-over .pf-minimap__value {
				color: #ff9bb0;
			}

			.pf-minimap__rank .is-warn .pf-minimap__value {
				color: var(--pf-lab-warn);
			}

			.pf-minimap__rank .is-ok .pf-minimap__value {
				color: var(--pf-after);
			}

	/* NeverCook 콘텐츠 브라우저 */
	.pf-cb {
		background: #1b1b1b;
		border: solid 1px rgba(255, 255, 255, 0.08);
		border-radius: var(--pf-radius-m);
		color: #d8d8d8;
		overflow: hidden;
	}

		.pf-cb__bar {
			align-items: center;
			background: #262626;
			display: flex;
			flex-wrap: wrap;
			font-size: 0.8em;
			gap: 0.5em 1em;
			padding: 0.55em 0.9em;
		}

		.pf-cb__path {
			color: #9a9a9a;
		}

		.pf-cb__filter {
			color: #d8d8d8;
		}

		.pf-cb__count {
			color: #f4f4f4;
			font-weight: 700;
			margin-left: auto;
		}

		.pf-cb__grid {
			display: grid;
			gap: 0.6em;
			grid-template-columns: repeat(var(--pf-cb-columns, 6), minmax(0, 1fr));
			list-style: none;
			margin: 0;
			padding: 0.9em;
		}

			.pf-cb__grid.is-filtered .is-off {
				display: none;
			}

		.pf-cb__tile {
			background: #333;
			border: solid 1px transparent;
			border-radius: 4px;
			color: inherit;
			cursor: pointer;
			display: block;
			font: inherit;
			line-height: 1.25;
			padding: 0 0 0.5em 0;
			text-align: left;
			transition: background-color 120ms ease, border-color 120ms ease;
			width: 100%;
		}

			.pf-cb__tile:hover,
			.pf-cb__tile:focus-visible {
				background: #3d3d3d;
				border-color: rgba(255, 255, 255, 0.35);
			}

			.pf-cb__tile.is-nevercook {
				border-color: rgba(255, 71, 71, 0.55);
			}

		.pf-cb__thumb {
			aspect-ratio: 1;
			background-color: #4a4a4a;
			border-bottom: solid 3px #35a848;
			border-radius: 4px 4px 0 0;
			display: block;
			position: relative;
		}

			.pf-cb__thumb--folder {
				background-color: #2a2a2a;
				border-bottom-color: transparent;
			}

			.pf-cb__folder {
				height: 70%;
				left: 15%;
				position: absolute;
				top: 15%;
				width: 70%;
			}

		/* 섬네일 폭 기준 42% (105px 섬네일에서 44px, 처음 22px 의 2배), 구석에서 6% 띄움 */
		.pf-cb__badge {
			height: 42%;
			opacity: 0;
			position: absolute;
			right: 6%;
			top: 6%;
			transform: scale(0.5);
			transition: transform 220ms var(--pf-ease-out), opacity 160ms ease;
			width: 42%;
		}

			.pf-cb__tile.is-nevercook .pf-cb__badge {
				opacity: 1;
				transform: none;
			}

		.pf-cb__name {
			color: #f0f0f0;
			display: block;
			font-size: 0.72em;
			overflow-wrap: anywhere;
			padding: 0.5em 0.5em 0.1em 0.5em;
		}

		.pf-cb__type {
			color: #8f8f8f;
			display: block;
			font-size: 0.62em;
			padding: 0.1em 0.6em 0 0.6em;
		}

		.pf-cb__hint,
		.pf-cb__list {
			color: #9a9a9a;
			font-size: 0.85em;
			margin: 0;
			padding: 0 1.1em 0.6em 1.1em;
		}

		.pf-cb__list {
			color: #d8d8d8;
			padding-bottom: 1em;
		}

	/* 트레이 알림 + 풍선 메시지 (윈도우 바탕화면 모양) */
	.pf-tray__controls {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em 0.75em;
		margin-bottom: 1em;
	}

	.pf-tray__status {
		color: var(--pf-text-muted);
		font-size: 0.85em;
	}

		.pf-tray__status--below {
			margin: 0.7em 0 0;
			min-height: 1.4em;
		}

	/* 바탕화면 안의 창, 알림, 작업 표시줄 글자는 바탕화면 폭에 비례합니다 */
	.pf-win {
		aspect-ratio: 16 / 10;
		font-size: clamp(0.62em, 2.4cqw, 1em);
		background: radial-gradient(circle at 30% 20%, #2d5a9e, #0f2650 60%, #091632);
		border: solid 1px rgba(255, 255, 255, 0.12);
		border-radius: var(--pf-radius-m);
		overflow: hidden;
		position: relative;
		user-select: none;
	}

		.pf-win__window {
			background: #1e1e1e;
			border: solid 1px rgba(255, 255, 255, 0.2);
			border-radius: 6px;
			box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
			left: 8%;
			opacity: 0.8;
			position: absolute;
			top: 9%;
			transition: opacity 200ms ease;
			width: 62%;
		}

			.pf-win__window[hidden] {
				display: none;
			}

			.pf-win__window.is-front {
				opacity: 1;
				z-index: 2;
			}

			.pf-win__window[title] {
				cursor: pointer;
			}

			.pf-win__window.is-restoring {
				animation: pf-win-restore 360ms var(--pf-ease-out);
			}

			.pf-win__window img {
				aspect-ratio: 16 / 9;
				display: block;
				object-fit: cover;
				width: 100%;
			}

		.pf-win__title {
			align-items: center;
			background: #2b2b2b;
			color: #bbb;
			display: flex;
			font-size: 0.72em;
			gap: 0.5em;
			padding: 0.35em 0.6em;
		}

			.pf-win__window.is-front .pf-win__title {
				background: #3a3a3a;
				color: #fff;
			}

		.pf-win__title-buttons {
			letter-spacing: 0.5em;
			margin-left: auto;
		}

		.pf-win__app-icon {
			background: linear-gradient(135deg, #f2a5d6, #7050a1);
			border-radius: 3px;
			display: inline-block;
			flex: none;
			height: 1em;
			width: 1em;
		}

		.pf-win__taskbar {
			align-items: center;
			background: rgba(12, 12, 20, 0.92);
			bottom: 0;
			display: flex;
			font-size: 0.72em;
			gap: 0.5em;
			height: 2.6em;
			left: 0;
			padding: 0 0.6em;
			position: absolute;
			right: 0;
			z-index: 3;
		}

		.pf-win__start {
			background: #4cc2ff;
			background-image: linear-gradient(#0c0c14, #0c0c14), linear-gradient(#0c0c14, #0c0c14);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 2px 100%, 100% 2px;
			border-radius: 2px;
			flex: none;
			height: 1.1em;
			margin-right: 0.3em;
			width: 1.1em;
		}

		.pf-win__task {
			align-items: center;
			background: rgba(255, 255, 255, 0.08);
			border: 0;
			border-bottom: solid 2px transparent;
			border-radius: 3px;
			color: #ddd;
			cursor: pointer;
			display: inline-flex;
			font: inherit;
			gap: 0.4em;
			padding: 0.3em 0.7em;
			white-space: nowrap;
		}

			.pf-win__task[hidden] {
				display: none;
			}

			.pf-win__task.is-active {
				background: rgba(255, 255, 255, 0.16);
				border-bottom-color: #4cc2ff;
				color: #fff;
			}

		.pf-win__tray {
			align-items: center;
			display: inline-flex;
			gap: 0.5em;
			margin-left: auto;
		}

		.pf-win__sys {
			color: #ccc;
			display: inline-flex;
			gap: 0.45em;
		}

			.pf-win__sys svg {
				height: 1em;
				width: 1em;
			}

		.pf-win__tray-icon {
			align-items: center;
			background: none;
			border: 0;
			border-radius: 3px;
			cursor: pointer;
			display: inline-flex;
			justify-content: center;
			min-height: 1.8em;
			min-width: 1.8em;
			padding: 0.25em;
		}

			.pf-win__tray-icon:hover,
			.pf-win__tray-icon:focus-visible,
			.pf-win__tray-icon[aria-expanded="true"] {
				background: rgba(255, 255, 255, 0.14);
			}

			/* 버튼으로 메뉴를 열면 아이콘 자리를 잠깐 비춥니다 */
			.pf-win__tray-icon.is-pointed {
				animation: pf-tray-point 1.6s ease-out;
			}

			@keyframes pf-tray-point {
				0%, 40% { box-shadow: 0 0 0 0.25em #4cc2ff, 0 0 1.2em 0.3em rgba(76, 194, 255, 0.6); }
				100% { box-shadow: 0 0 0 0 rgba(76, 194, 255, 0); }
			}

			.pf-win__tray-icon[hidden] {
				display: none;
			}

		.pf-win__clock {
			color: #ddd;
			white-space: nowrap;
		}

		@media screen and (max-width: 480px) {

			.pf-win__taskbar {
				font-size: 0.6em;
			}

			.pf-win__clock {
				display: none;
			}

			.pf-win--notify .pf-win__window--game {
				bottom: 1.56em;
			}

		}

		.pf-win__balloon {
			background: none;
			border: 0;
			bottom: 2.2em;
			cursor: pointer;
			opacity: 0;
			padding: 0;
			position: absolute;
			right: 0.6em;
			transform: translateX(110%);
			transition: transform 420ms var(--pf-ease-out), opacity 240ms ease;
			width: min(48%, 364px);
			z-index: 4;
		}

			.pf-win__balloon[hidden] {
				display: none;
			}

			.pf-win__balloon.is-shown {
				opacity: 1;
				transform: none;
			}

			.pf-win__balloon img {
				border-radius: 3px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
				display: block;
				width: 100%;
			}

		.pf-win__menu {
			background: #2b2b2b;
			border: solid 1px rgba(255, 255, 255, 0.2);
			bottom: 2.1em;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
			font-size: 0.75em;
			list-style: none;
			margin: 0;
			min-width: 9em;
			padding: 0.3em 0;
			position: absolute;
			right: 2.6em;
			z-index: 5;
		}

			.pf-win__menu[hidden] {
				display: none;
			}

			.pf-win__menu li {
				padding: 0;
			}

			.pf-win__menu button {
				background: none;
				border: 0;
				border-radius: 0;
				color: #eee;
				cursor: pointer;
				display: block;
				font: inherit;
				padding: 0.4em 1em;
				text-align: left;
				width: 100%;
			}

				.pf-win__menu button:hover,
				.pf-win__menu button:focus-visible {
					background: #0078d4;
					color: #fff;
				}

	@keyframes pf-win-restore {
		from { opacity: 0; transform: translateY(10%) scale(0.92); }
		to { opacity: 1; transform: none; }
	}

	/* Slate 백그라운드 알림: 에디터 창이 앞, 게임 창이 뒤에서 시작합니다 */
	.pf-win--notify .pf-win__window--editor {
		left: 5%;
		top: 7%;
		width: 60%;
	}

	/* 게임 창은 전체 화면(작업 표시줄 위까지), 제목 줄 없음 */
	.pf-win--notify .pf-win__window--game {
		border: 0;
		border-radius: 0;
		inset: 0 0 1.87em 0;
		width: auto;
	}

		.pf-win--notify .pf-win__window--game .pf-win__title {
			display: none;
		}

		.pf-win--notify .pf-win__window--game img {
			aspect-ratio: auto;
			height: 100%;
		}

	.pf-win__app-icon--editor {
		background: linear-gradient(135deg, #e8e8e8, #8a8a8a);
	}

	.pf-win__editor {
		aspect-ratio: 16 / 9;
		background: #141414;
		display: flex;
		flex-direction: column;
		gap: 6%;
		padding: 6% 5%;
	}

		.pf-win__editor span {
			background: rgba(255, 255, 255, 0.14);
			border-radius: 2px;
			display: block;
			height: 5%;
			width: 70%;
		}

			.pf-win__editor span:nth-child(2n) {
				width: 45%;
			}

			.pf-win__editor span:nth-child(3n) {
				width: 85%;
			}

	.pf-win__window.is-minimized {
		display: none;
	}

	.pf-win__window.is-minimizing {
		animation: pf-win-minimize 240ms ease-in forwards;
		pointer-events: none;
	}

	@keyframes pf-win-minimize {
		to { opacity: 0; transform: translateY(45%) scale(0.5); }
	}

	.pf-win__blank {
		align-items: center;
		aspect-ratio: 16 / 9;
		background: #0b0b0f;
		color: rgba(246, 241, 255, 0.45);
		display: flex;
		font-size: 0.9em;
		justify-content: center;
		letter-spacing: 0.1em;
	}

	/* 알림 상자(세로 카드): 위에 게임 섬네일, 아래에 둥근 커마 캐릭터 캡처 + 제목 + 본문 */
	.pf-win__banner {
		background: #141018;
		border: solid 1px rgba(255, 255, 255, 0.14);
		border-radius: 8px;
		box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
		color: var(--pf-ink);
		display: block;
		font-size: 0.7em;
		overflow: hidden;
		text-align: left;
		width: min(40%, 230px);
	}

		.pf-win__banner-cover {
			aspect-ratio: 5 / 2;
			background: #2a1d4a;
			display: block;
		}

			.pf-win__banner-cover img {
				display: block;
				height: 100%;
				object-fit: cover;
				width: 100%;
			}

		.pf-win__banner-row {
			align-items: center;
			display: grid;
			gap: 0.7em;
			grid-template-columns: 2.8em minmax(0, 1fr);
			padding: 0.7em 0.9em 0.85em 0.9em;
		}

		.pf-win__banner-thumb {
			align-items: center;
			aspect-ratio: 1;
			background: radial-gradient(circle at 50% 30%, #6c4fa3, #2a1d4a 70%);
			border: solid 2px rgba(246, 241, 255, 0.25);
			border-radius: 50%;
			box-sizing: border-box;
			color: rgba(246, 241, 255, 0.85);
			display: flex;
			justify-content: center;
			overflow: hidden;
			position: relative;
			width: 2.8em;
		}

			.pf-win__banner-thumb img {
				display: block;
				height: 100%;
				object-fit: cover;
				width: 100%;
			}

			.pf-win__banner-thumb svg {
				height: 62%;
				width: 62%;
			}

			.pf-win__banner-thumb i {
				bottom: 0.1em;
				color: rgba(246, 241, 255, 0.75);
				font-size: 0.5em;
				font-style: normal;
				left: 0;
				position: absolute;
				right: 0;
				text-align: center;
			}

		.pf-win__banner-text {
			min-width: 0;
			word-break: keep-all;
		}

			.pf-win__banner-text span span {
				display: block;
			}

			.pf-win__banner-app {
				color: var(--pf-accent);
				display: block;
				font-size: 0.68em;
				font-style: normal;
				font-weight: 700;
				letter-spacing: 0.08em;
				margin-bottom: 0.15em;
				text-transform: uppercase;
			}

			.pf-win__banner-text strong {
				color: var(--pf-ink);
				display: block;
				font-size: 1.05em;
			}

			.pf-win__banner-text span {
				color: var(--pf-text-muted);
				display: block;
				font-size: 0.85em;
				line-height: 1.4;
				margin-top: 0.15em;
			}

		@media screen and (max-width: 736px) {

			.pf-win__banner {
				width: min(66%, 230px);
			}

		}

	@media screen and (max-width: 980px) {

		.pf-cb__grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

	}

	@media screen and (max-width: 736px) {

		.pf-cb__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

	}

	@media screen and (max-width: 480px) {

		.pf-cb__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	}

	@media screen and (max-width: 980px) {

		.pf-toollab {
			grid-template-columns: minmax(0, 1fr);
		}

	}

/* Student works (spotlights) */

	.pf-works__stack {
		display: flex;
		flex-wrap: wrap;
		font-size: 0.9em;
		gap: 0.25em 0.75em;
	}

		.pf-works__stack-label {
			color: var(--pf-text-muted);
		}

	/* 템플릿은 2, 3번째 칸에만 음영을 줍니다. 작품 수가 늘어도 번갈아 들도록 바꿉니다. */
	.pf-works > section:nth-child(n) {
		background-color: transparent;
	}

	.pf-works > section:nth-of-type(even) {
		background-color: rgba(0, 0, 0, 0.08);
	}

	/* 작품 이미지는 정사각형(500×500)입니다. 템플릿은 칸 높이만큼 배경을 꽉 채워서(cover) 글이 길면 좌우가 잘립니다.
	   이미지 칸을 정사각형으로 두고 통째로 보여 줍니다. 글이 더 길면 이미지는 위쪽에 머뭅니다. */
	.pf-works > section > .image {
		align-self: flex-start;
		aspect-ratio: 1 / 1;
		background-repeat: no-repeat;
		background-size: contain;
		flex: none;
	}

	@media screen and (max-width: 980px) {

		.pf-works > section > .image {
			height: auto;
			margin: 0 auto;
			max-width: 32em;
			min-height: 0;
		}

	}

	.pf-work__title {
		font-size: 1.75em;
		margin: 0 0 0.35em 0;
	}

	.pf-work__award {
		color: var(--pf-ink);
		font-weight: 600;
		margin: 0 0 0.15em 0;
	}

	.pf-work__period {
		color: var(--pf-text-muted);
		font-size: 0.9em;
		font-variant-numeric: tabular-nums;
		margin: 0 0 1em 0;
	}

	.pf-work__points {
		margin: 0 0 1.5em 0;
		padding-left: 1.1em;
	}

		.pf-work__points li {
			padding-left: 0.3em;
		}

	.pf-video {
		aspect-ratio: 16 / 9;
		background: rgba(0, 0, 0, 0.25);
		border-radius: var(--pf-radius-m);
		margin: 0.5em 0 1em 0;
		max-width: 30em;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

		.pf-video iframe {
			border: 0;
			height: 100%;
			inset: 0;
			position: absolute;
			width: 100%;
		}

/* Activities (features) */

	.wrapper.style3 .pf-features {
		background: none;
	}

	.pf-features section h3 {
		margin-bottom: 0.85em;
	}

	.pf-timeline {
		list-style: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}

		.pf-timeline li {
			border-top: solid 1px var(--pf-line);
			padding: 0.55em 0;
		}

			.pf-timeline li:first-child {
				border-top: 0;
				padding-top: 0;
			}

		.pf-timeline__text {
			color: var(--pf-ink);
			display: block;
		}

		.pf-timeline__date {
			color: var(--pf-text-muted);
			display: block;
			font-size: 0.82em;
			font-variant-numeric: tabular-nums;
		}

		/* highlight 를 적은 항목: 굵은 글자 + 옆 표시(예: 게임) */
		.pf-timeline .is-highlight .pf-timeline__text {
			font-weight: 600;
		}

			.pf-timeline .is-highlight .pf-badge {
				margin-left: 0.35em;
			}

/* Footer */

	#footer > .inner .menu {
		color: var(--pf-text-muted);
	}

/* Splash (불러오는 동안 보이는 명함, index.html 의 #pf-splash) */

	.pf-splash {
		align-items: center;
		background: var(--pf-surface);
		display: flex;
		flex-direction: column;
		gap: 1.25em;
		inset: 0;
		justify-content: center;
		padding: 1.5em 2em;
		position: fixed;
		transition: opacity 360ms ease, visibility 360ms;
		z-index: 10000;
	}

		.pf-splash.is-leaving {
			opacity: 0;
			pointer-events: none;
			visibility: hidden;
		}

		/* 템플릿은 로드가 끝날 때까지 모든 움직임을 끄지만 명함은 그 전에 뜨고 사라집니다. */
		body.is-preload .pf-splash {
			transition: opacity 360ms ease, visibility 360ms !important;
		}

		.pf-splash__status {
			color: var(--pf-text-muted);
			font-size: 0.85em;
			margin: 0;
			transition: opacity 200ms ease;
		}

			body.is-preload .pf-splash__status {
				transition: opacity 200ms ease !important;
			}

		.is-file-protocol .pf-splash,
		.is-legacy-browser .pf-splash {
			display: none;
		}

	.pf-card {
		align-items: center;
		animation: pf-card-in 600ms var(--pf-ease-out) both;
		background: rgba(0, 0, 0, 0.18);
		border: solid 1px var(--pf-line-strong);
		border-radius: var(--pf-radius-m);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
		display: flex;
		gap: 1.75em;
		max-width: 34em;
		padding: 1.75em 2em;
		width: 100%;
		will-change: transform;
	}

		body.is-preload .pf-card {
			animation: pf-card-in 600ms var(--pf-ease-out) both !important;
		}

		/* 첫 화면 맨 위의 명함: 로딩 명함이 내려앉는 자리라 움직이지 않습니다. */
		.pf-card--intro,
		body.is-preload .pf-card--intro {
			animation: none !important;
			margin: 0;
		}

		.pf-card__photo {
			aspect-ratio: 509 / 634;
			border-radius: var(--pf-radius-m);
			flex: none;
			height: auto;
			object-fit: cover;
			width: 7.5em;
		}

		.pf-card__body {
			min-width: 0;
		}

		.pf-card__name,
		#intro .pf-card__name {
			color: var(--pf-ink);
			font-size: 1.6em;
			font-weight: 700;
			letter-spacing: 0;
			line-height: 1.2;
			margin: 0;
			text-transform: none;
		}

		.pf-card__name-en {
			color: var(--pf-text-muted);
			font-size: 0.55em;
			font-weight: 500;
			letter-spacing: 0.04em;
			margin-left: 0.5em;
		}

		.pf-card__role,
		#intro .pf-card__role {
			color: var(--pf-accent);
			font-size: 0.85em;
			font-weight: 600;
			line-height: 1.4;
			margin: 0.25em 0 0.45em 0;
		}

		.pf-card__career {
			list-style: none;
			margin: 0;
			padding: 0;
		}

			.pf-card__career li {
				align-items: center;
				display: flex;
				flex-wrap: wrap;
				font-size: 0.9em;
				gap: 0.3em 0.6em;
				padding: 0.25em 0;
			}

			.pf-card__career img {
				border-radius: 3px;
				height: 1.25em;
				width: 1.25em;
			}

		.pf-card__meta {
			color: var(--pf-text-muted);
			font-variant-numeric: tabular-nums;
		}

		.pf-card__dots {
			animation: pf-pulse 1.2s ease-in-out infinite;
			display: inline-block;
			margin-left: 0.15em;
		}

			body.is-preload .pf-card__dots {
				animation: pf-pulse 1.2s ease-in-out infinite !important;
			}

	@keyframes pf-card-in {
		from { opacity: 0; transform: translateY(12px); }
		to { opacity: 1; transform: none; }
	}

	@keyframes pf-pulse {
		0%, 100% { opacity: 0.25; }
		50% { opacity: 1; }
	}

	@media screen and (max-width: 480px) {

		.pf-card {
			flex-direction: column;
			gap: 1em;
			padding: 1.5em;
			text-align: center;
		}

			.pf-card__career li {
				justify-content: center;
			}

			.pf-card__photo {
				width: 6em;
			}

	}

/* Status (불러오는 중 / 오류 / 안내) */

	.pf-status,
	.pf-notice {
		color: var(--pf-text-muted);
		margin: 0 auto;
		max-width: 40em;
		padding: 8em 2em;
		text-align: center;
	}

		.pf-notice strong {
			display: block;
			font-size: 1.1em;
			margin-bottom: 0.5em;
		}

	.pf-notice--file,
	.pf-notice--legacy {
		display: none;
	}

	.is-file-protocol .pf-notice--file,
	.is-legacy-browser .pf-notice--legacy {
		display: block;
	}

	.is-file-protocol .pf-status,
	.is-legacy-browser .pf-status {
		display: none;
	}

	.pf-error {
		background: rgba(255, 140, 120, 0.08);
		border: solid 1px rgba(255, 180, 168, 0.45);
		border-radius: var(--pf-radius-m);
		color: var(--pf-ink);
		padding: 1.25em 1.5em;
	}

		.pf-error__title {
			font-weight: 700;
			margin: 0 0 0.35em 0;
		}

		.pf-error__detail {
			color: var(--pf-text);
			font-family: var(--pf-mono);
			font-size: 0.85em;
			margin: 0;
		}

/* Embed (index.html?embed=데모id, 노션 같은 곳의 iframe 에 데모 하나만 끼워 넣을 때) */
/* 메뉴, 명함, 꼬리말, 섹션 제목과 설명을 빼고 데모만 꽉 차게 둡니다. app.js 가 그 섹션 하나만 그립니다. */

	html.is-embed {
		scroll-padding-top: 0;
		scrollbar-gutter: auto;
	}

	html.is-embed #sidebar,
	html.is-embed #footer,
	html.is-embed .pf-splash,
	html.is-embed .pf-skip {
		display: none !important;
	}

	html.is-embed #wrapper {
		margin-left: 0 !important;
		padding-top: 0 !important;
	}

		/* 노션 밖에서 링크로 크게 열면 넓은 화면 가운데에 놓입니다. */
		html.is-embed #wrapper > .wrapper {
			align-items: center;
			display: flex;
			min-height: 100vh;
		}

			html.is-embed #wrapper > .wrapper > .inner {
				margin: 0 auto;
				max-width: 64em;
				padding: 1rem;
				width: 100%;
			}

			html.is-embed #wrapper > .wrapper > .inner > :not(.pf-toollab):not(.pf-lab):not(.pf-error) {
				display: none;
			}

	html.is-embed .pf-toollab {
		display: block;
		margin: 0;
	}

		html.is-embed .pf-toollab__item {
			max-width: none;
		}

			html.is-embed .pf-toollab__item > :not(.pf-toollab__demo) {
				display: none;
			}

/* Reduced motion: 움직임은 빼고, 이해를 돕는 투명도 변화만 짧게 남깁니다. */

	@media (prefers-reduced-motion: reduce) {

		.wrapper.fade-up > .inner,
		.spotlights > section > .content > .inner,
		.features section .icon,
		#sidebar nav > ul > li,
		.pf-case__head {
			transform: none !important;
			transition: opacity 200ms ease !important;
		}

		.pf-bar__after,
		.pf-bar__after::before,
		.pf-media--slide img,
		.pf-card,
		.pf-card__dots,
		.pf-cb__badge,
		.pf-win__window,
		.pf-win__balloon,
		.pf-detail__chevron,
		.pf-meter__fill,
		.pf-switch__thumb,
		.pf-skip {
			animation: none !important;
			transition: none !important;
		}

		.pf-case.inactive .pf-bar__after {
			transform: translateX(calc((var(--ratio) - 1) * 100%));
		}

		.pf-case.inactive .pf-bar__after::before {
			opacity: 0;
		}

		.pf-media--slide img {
			opacity: 1;
			transform: none;
		}

	}