/*
Theme Name: PIXEL
Theme URI: https://mskimlab.com
Author: Min Seok Kim
Author URI: https://mskimlab.com
Description: 연구실(Lab) 홈페이지용 커스텀 워드프레스 테마. 논문·구성원·연구주제·장비 관리, 한/영 전환, 다크모드, 이미지 슬라이더를 기본 제공합니다.
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mskimlab
Tags: education, portfolio, one-column, two-columns, custom-menu, custom-logo, featured-images, translation-ready, full-width-template
*/

/* =========================================================
   1. 디자인 토큰
   ========================================================= */
:root {
	--font-sans: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Pretendard",
		"Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
	--font-serif: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Primitive — 무채색 + 단일 강조색 */
	--c-white: #ffffff;
	--c-ink-900: #111315;
	--c-ink-700: #2b2f33;
	--c-gray-600: #5c6165;
	--c-gray-400: #8b9094;
	--c-gray-100: #ececec;
	--c-gray-50: #f6f6f5;

	--c-accent: #123b63;
	--c-accent-soft: #eaeff5;
	--brand-p: #a86b00;
	--brand-i: #c52f68;
	--brand-x: #007f9f;
	--brand-e: #315eb8;
	--brand-l: #7042a7;

	/* Semantic (light) */
	--bg: var(--c-white);
	--bg-alt: var(--c-gray-50);
	--bg-elev: var(--c-white);
	--fg: var(--c-ink-900);
	--fg-muted: var(--c-gray-600);
	--fg-subtle: var(--c-gray-400);
	--border: #e0e0de;
	--border-strong: #c4c4c1;
	--accent: var(--c-accent);
	--accent-fg: #ffffff;
	--accent-soft: var(--c-accent-soft);
	--shadow-sm: none;
	--shadow-md: 0 2px 10px rgba(17, 19, 21, 0.08);
	--shadow-lg: 0 8px 28px rgba(17, 19, 21, 0.14);

	/* Layout */
	--wrap: 1120px;
	--wrap-narrow: 720px;
	--gutter: 24px;
	--radius-sm: 0px;
	--radius: 0px;
	--radius-lg: 0px;
	--header-h: 64px;
}

/* =========================================================
   2. 리셋 & 베이스
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* hidden 속성이 항상 이기게 한다.
   .pub-item{display:grid} 같은 저작자 선언이 브라우저 기본 [hidden] 규칙을
   이겨버려서 논문 주제 필터가 항목을 못 숨기던 문제를 막는다. */
[hidden] {
	display: none !important;
}

a {
	color: inherit;
	text-decoration: none;
}

.entry-content a,
.prose a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	line-height: 1.3;
	letter-spacing: -0.018em;
	font-weight: 600;
}

h1 {
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
}
h2 {
	font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
}
h3 {
	font-size: 1.15rem;
}

p {
	margin: 0 0 1.1em;
}

ul,
ol {
	padding-left: 1.2em;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 2.5rem 0;
}

blockquote {
	margin: 1.5rem 0;
	padding: 0.4rem 0 0.4rem 1.2rem;
	border-left: 3px solid var(--accent);
	color: var(--fg-muted);
	font-family: var(--font-serif);
	font-size: 1.1rem;
}

code,
pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

pre {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 1rem;
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

th,
td {
	text-align: left;
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

th {
	font-weight: 600;
	color: var(--fg-muted);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

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

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 9999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--accent);
	color: var(--accent-fg);
	border-radius: var(--radius-sm);
}

/* =========================================================
   3. 레이아웃 유틸
   ========================================================= */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow {
	max-width: var(--wrap-narrow);
}

@media (max-width: 480px) {
	:root {
		--gutter: 20px;
	}
}

.section {
	padding-block: clamp(48px, 5.6vw, 80px);
}

/* 히어로는 이미 아래 여백과 구분선을 갖고 있어 첫 섹션은 위를 덜 준다 */
.hero + .section {
	padding-top: clamp(32px, 3.2vw, 44px);
}

.section--alt {
	background: var(--bg-alt);
	border-block: 1px solid var(--border);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.section-head h2 {
	margin: 0;
}

.eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-subtle);
}

.lede {
	font-size: 1.1rem;
	color: var(--fg-muted);
	max-width: 62ch;
}

.grid {
	display: grid;
	gap: 24px;
}

.grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* =========================================================
   4. 버튼 / 뱃지
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
	background: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
}

.btn--primary:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.btn--ghost {
	border-color: var(--border-strong);
	color: var(--fg);
	background: transparent;
}

.btn--ghost:hover {
	border-color: var(--fg);
}

.btn--sm {
	padding: 7px 14px;
	font-size: 0.82rem;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--fg-muted);
	border-bottom: 1px solid var(--border-strong);
	padding-bottom: 2px;
}

.link-arrow:hover {
	color: var(--fg);
	border-bottom-color: var(--fg);
}

.badge {
	display: inline-block;
	padding: 4px 11px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	color: var(--fg-muted);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.badge--muted {
	background: transparent;
}

/* =========================================================
   5. 헤더 / 내비게이션
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--header-h);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-size: 0.97rem;
	white-space: nowrap;
}

.brand__mark {
	width: 32px;
	height: 32px;
	background: var(--fg);
	display: grid;
	place-items: center;
	color: var(--bg);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	flex: none;
}

.brand__mark--image {
	width: 38px;
	height: 38px;
	background: transparent;
	overflow: hidden;
}

.brand__mark--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: none;
}

.brand__text {
	display: grid;
	gap: 2px;
	line-height: 1;
}

.brand__name {
	display: block;
}

.brand__sub {
	display: block;
	font-size: 0.68rem;
	font-weight: 450;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--fg-muted);
	text-transform: none;
}

.brand-expansion__initial {
	font-weight: 850;
	font-size: 1.08em;
	letter-spacing: 0;
}

/* PIXEL 머리글자는 강조색 하나로만 —
   무지개색은 무채색+남색 한 가지라는 이 사이트의 원칙과 어긋난다 */
.brand-expansion__initial--p,
.brand-expansion__initial--i,
.brand-expansion__initial--x,
.brand-expansion__initial--e,
.brand-expansion__initial--l {
	color: var(--accent);
}

@media (max-width: 420px) {
	.brand {
		font-size: 0.98rem;
	}
	.brand__sub {
		display: none;
	}
}

@media (max-width: 520px) {
	.site-header__inner {
		gap: 10px;
	}

	.brand {
		min-width: 0;
		gap: 8px;
	}

	.brand__text {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.brand__sub {
		display: none;
	}

	.header-actions {
		margin-left: auto;
	}
}

.brand img {
	max-height: 40px;
	width: auto;
}

.primary-nav {
	margin-left: auto;
}

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	display: block;
	padding: 7px 8px;
	border-radius: 0;
	font-size: 0.86rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--fg-muted);
	transition: color 0.15s ease, background 0.15s ease;
}

.primary-nav a:hover {
	color: var(--fg);
	background: var(--bg-alt);
}

.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-parent > a {
	color: var(--fg);
	font-weight: 650;
}

/* 드롭다운 */
.primary-nav li {
	position: relative;
}

.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 8px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all 0.16s ease;
}

.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ---- 한/영 전환 ---- */
.lang {
	display: contents;
}

/* 기본(속성 없음) = 영어. 한국어를 고른 경우에만 뒤집는다. */
:root[data-lang="ko"] .lang--en,
:root:not([data-lang="ko"]) .lang--ko {
	display: none;
}

.lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--fg-subtle);
	font-family: inherit;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.lang-toggle:hover {
	border-color: var(--fg);
}

.lang-toggle__sep {
	color: var(--border-strong);
	font-weight: 400;
}

/* 현재 언어를 진하게 */
:root[data-lang="ko"] .lang-toggle__ko,
:root:not([data-lang="ko"]) .lang-toggle__en {
	color: var(--fg);
}

.icon-btn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--fg-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
	color: var(--fg);
	border-color: var(--fg);
}

.nav-toggle {
	display: none;
}

/* 메뉴 항목이 8개라 데스크톱 폭이 좁아지면 바로 햄버거로 넘긴다. */
@media (max-width: 960px) {
	.nav-toggle {
		display: grid;
		order: 3;
	}

	.primary-nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		background: var(--bg-elev);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-lg);
		padding: 14px var(--gutter) 22px;
		display: none;
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.primary-nav a {
		padding: 12px 10px;
		font-size: 1rem;
		border-radius: var(--radius-sm);
	}

	.primary-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 14px;
	}
}

/* =========================================================
   6. 히어로
   ========================================================= */
.hero {
	position: relative;
	padding-block: clamp(40px, 4.4vw, 56px) clamp(44px, 4.7vw, 62px);
	border-bottom: 1px solid var(--border);
}

/* 화면 전체 높이 히어로 (레퍼런스 연구실 사이트 스타일) */
.hero--full {
	display: flex;
	align-items: center;
	min-height: calc(100svh - var(--header-h));
}

.hero--full .wrap {
	width: 100%;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.hero__inner--text-only {
	grid-template-columns: minmax(0, 760px);
}

.hero--full .hero__inner {
	grid-template-columns: minmax(0, 1fr);
	text-align: center;
	justify-items: center;
}

.hero--full .hero__media {
	display: none;
}

.hero--full .hero__text {
	margin-inline: auto;
}

.hero--full .hero__actions {
	justify-content: center;
}

@media (max-width: 880px) {
	.hero__inner {
		grid-template-columns: 1fr;
	}
}

.hero__title {
	font-size: clamp(1.9rem, 1.1rem + 2.5vw, 2.6rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.025em;
	margin-bottom: 16px;
}

.hero__title em {
	font-style: normal;
	color: var(--fg-muted);
}

/* 큰 제목(PIXEL) 아래 정식 명칭 한 줄 */
.hero__fullname {
	margin: -6px 0 18px;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--fg-muted);
}

.hero__fullname .brand-expansion__initial {
	font-size: 1.15em;
}

.hero__text {
	font-size: 1.12rem;
	color: var(--fg-muted);
	max-width: 56ch;
	margin-bottom: 20px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-alt);
	border: 1px solid var(--border);
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 히어로 안에서는 슬라이더가 테두리를 중복해서 그리지 않게 */
.hero__media .slider {
	position: absolute;
	inset: 0;
	border: 0;
	background: transparent;
}

.hero__media .slider__track,
.hero__media .slider__slide {
	height: 100%;
}

.hero__media .slider__slide img {
	object-fit: contain;
}

/* 히어로 배너 — 논문 그림이 순차로 도는 자리 */
.hero__media .slider__slide {
	position: relative;
	display: block;
	color: inherit;
	background: #fff;
}

.hero__media .slider__slide img {
	object-fit: contain;
	object-position: center;
	padding: 8px 8px 74px;
}

.hero-banner__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	background: var(--bg-alt);
	border-top: 1px solid var(--border);
}

.hero-banner__area {
	font-size: 0.68rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 600;
}

.hero-banner__title {
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--fg);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-banner__venue {
	font-size: 0.74rem;
	color: var(--fg-subtle);
}

@media (max-width: 860px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

.research-hero {
	margin: 0 0 36px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--border);
}

.research-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   7. 카드 (연구주제 / 일반)
   ========================================================= */
.card {
	display: flex;
	flex-direction: column;
	background: transparent;
	border-top: 2px solid var(--fg);
	padding-top: 20px;
	transition: border-color 0.15s ease;
}

a.card:hover {
	border-top-color: var(--accent);
}

.card__media {
	aspect-ratio: 16 / 10;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	overflow: hidden;
	margin-bottom: 18px;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 연구 분야 일러스트 — 카드 그림 자리에 인라인 SVG 로 들어간다 */
.topic-art {
	display: grid;
	place-items: center;
	/* 그림 자체가 흰 바탕이라 여백을 두면 회색 테두리가 한 겹 더 생긴다 */
	padding: 0;
	background: #fff;
	color: var(--fg-muted);
}

.topic-art svg {
	width: 100%;
	height: auto;
	display: block;
}

a.card:hover .topic-art {
	color: var(--fg);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.card__title {
	font-size: 1.06rem;
	font-weight: 600;
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.45;
}

a.card:hover .card__title {
	color: var(--accent);
}

.card__excerpt {
	font-size: 0.92rem;
	color: var(--fg-muted);
	margin: 0;
}

.card__foot {
	margin-top: auto;
	padding-top: 14px;
}

.card__keywords {
	font-size: 0.8rem;
	color: var(--fg-subtle);
	margin: 0;
}

/* =========================================================
   8. 논문 (Publications)
   ========================================================= */
.pub-filters {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 32px;
}

/* 연도 줄과 주제 줄을 갈라 놓는다 — 한 줄에 섞이면 읽기 어렵다 */
.pub-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pub-filters__row--topics {
	padding-top: 10px;
	border-top: 1px solid var(--border);
}

/* 모바일에서는 여러 줄로 쌓지 않고 가로로 밀어서 보게 한다. */
@media (max-width: 640px) {
	.pub-filters__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
	}

	.pub-filters__row::-webkit-scrollbar {
		display: none;
	}

	.pub-filter {
		flex: none;
		scroll-snap-align: start;
	}
}

.pub-filter {
	padding: 6px 14px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--fg-muted);
	font-size: 0.84rem;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}

.pub-filter:hover {
	border-color: var(--fg);
	color: var(--fg);
}

.pub-filter.is-active {
	background: var(--fg);
	border-color: var(--fg);
	color: var(--bg);
}

.pub-year {
	margin: 52px 0 20px;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--fg);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.pub-year:first-child {
	margin-top: 0;
}

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

/* 기본형: 번호 + 본문 (학술 논문 목록 형식) */
.pub-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 16px;
	padding: 14px 0;
}

.pub-item--numbered {
	grid-template-columns: 2.4em minmax(0, 1fr);
}

.pub-item--thumb {
	grid-template-columns: 132px minmax(0, 1fr);
}

.pub-item--numbered.pub-item--thumb {
	grid-template-columns: 2.4em 132px minmax(0, 1fr);
}

@media (max-width: 640px) {
	.pub-item--thumb,
	.pub-item--numbered.pub-item--thumb {
		grid-template-columns: 2.4em minmax(0, 1fr);
	}
	.pub-item--thumb .pub-item__thumb {
		display: none;
	}
	.pub-item:not(.pub-item--numbered) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pub-item__no {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--fg-subtle);
	line-height: 1.75;
}

.pub-item__thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-alt);
	border: 1px solid var(--border);
}

.pub-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pub-item__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	margin: 0 0 2px;
	color: var(--fg);
}

.pub-item__title a {
	color: inherit;
}

.pub-item__title a:hover {
	color: var(--accent);
}

.pub-item__authors {
	font-size: 0.94rem;
	line-height: 1.8;
	color: var(--fg-muted);
	margin: 0;
}

.pub-item__authors b,
.pub-item__authors strong {
	color: var(--fg);
	font-weight: 600;
}

.pub-item__venue {
	font-size: 0.94rem;
	line-height: 1.8;
	margin: 0;
	color: var(--fg-muted);
}

.pub-item__venue em {
	font-style: italic;
	color: var(--fg);
}

.pub-item__link {
	color: var(--accent);
	margin-left: 4px;
}

.pub-item__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pub-item__note {
	font-size: 0.85rem;
	color: var(--fg-subtle);
	margin: 2px 0 0;
}

.pub-item__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.pub-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border: 1px solid var(--border);
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--fg-muted);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.pub-tag:hover {
	border-color: var(--fg);
	color: var(--fg);
}

.pub-tag--hl {
	background: var(--accent-soft);
	border-color: transparent;
	color: var(--accent);
}

/* =========================================================
   9. 구성원 (People)
   ========================================================= */
.people-group {
	margin-bottom: 64px;
}

.people-group__title {
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 28px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.people-group__count {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--fg-subtle);
	font-weight: 400;
}

.people-grid {
	display: grid;
	grid-template-columns: repeat(var(--people-cols, 3), minmax(0, 1fr));
	gap: 40px 32px;
}

@media (max-width: 900px) {
	.people-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

@media (max-width: 520px) {
	.people-grid {
		grid-template-columns: 1fr;
	}
}

.member-card {
	text-align: left;
}

.member-card__photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	margin-bottom: 16px;
}

.member-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.member-card__photo--empty {
	display: grid;
	place-items: center;
	color: var(--fg-subtle);
	font-size: 1.8rem;
	font-weight: 500;
	background: var(--bg-alt);
}

.member-card__name {
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 2px;
}

.member-card__role {
	font-size: 0.88rem;
	color: var(--accent);
	font-weight: 600;
	margin: 0 0 10px;
}

.member-card__meta {
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--fg-muted);
	margin: 0;
}

.member-card__degrees {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--fg-muted);
}

.member-card__label {
	margin: 22px 0 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-subtle);
}

.alumni-group__title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 32px 0 10px;
	color: var(--fg-muted);
}

.alumni-group__title:first-of-type {
	margin-top: 0;
}

.member-card__links {
	display: flex;
	gap: 10px;
	margin-top: 8px;
	font-size: 0.78rem;
}

.member-card__links a {
	color: var(--fg-subtle);
	font-weight: 600;
}

.member-card__links a:hover {
	color: var(--accent);
}

/* PI 프로필 (가로형) */
.pi-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(150px, 172px);
	gap: 48px;
	align-items: start;
	/* 테두리로 가두지 않는다. 여백과 활자 크기로 구분한다. */
	padding: 8px 0 0;
}

/* PI 프로필 옆단 — 사진은 오른쪽 여백 자리로 보내고 직위·연락처를 그 아래 붙인다.
   왼쪽에 두면 사진 밑이 통째로 빈다. */
.pi-card__side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	order: 2;
}

.pi-card__side .member-card__role {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
}

.pi-card__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.pi-card__links a {
	font-size: 0.88rem;
	color: var(--fg-muted);
	border-bottom: 1px solid var(--border-strong);
	padding-bottom: 2px;
}

.pi-card__links a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

@media (max-width: 720px) {
	.pi-card {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 22px;
	}
	.pi-card__photo {
		width: 100%;
		max-width: 150px;
	}
}

.pi-card__photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--bg-alt);
	border: 1px solid var(--border);
}

.pi-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 동문 테이블 — 좁은 화면에서는 가로로 밀어서 본다 */
.table-scroll {
	overflow-x: auto;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
}

.alumni-table {
	min-width: 480px;
}

.alumni-table td:first-child {
	font-weight: 600;
	white-space: nowrap;
}

/* 본문에 넣은 표도 마찬가지 */
.entry-content table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

/* =========================================================
   10. 뉴스
   ========================================================= */
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.news-item {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
	align-items: baseline;
}

@media (max-width: 560px) {
	.news-item {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

.news-item__date {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--fg-subtle);
	letter-spacing: 0.04em;
}

.news-item__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.55;
}

.news-item__title a:hover {
	color: var(--accent);
}

.news-item__excerpt {
	font-size: 0.9rem;
	color: var(--fg-muted);
	margin: 4px 0 0;
}

/* =========================================================
   11. 배너 / CTA
   ========================================================= */
.cta {
	padding: clamp(32px, 4vw, 48px) 0;
	border-top: 2px solid var(--fg);
	border-bottom: 1px solid var(--border);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
}

@media (max-width: 720px) {
	.cta {
		grid-template-columns: 1fr;
	}
}

.cta h2 {
	margin-bottom: 10px;
}

.cta p {
	color: var(--fg-muted);
	margin: 0;
	max-width: 58ch;
}

/* =========================================================
   12. 페이지 헤더 / 본문
   ========================================================= */
/* 하위 페이지 제목 — 회색 띠·breadcrumb 없이 제목 한 줄과 얇은 구분선만 */
.page-hero {
	padding-block: clamp(40px, 5vw, 64px) 0;
}

.page-hero .wrap {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
}

.page-hero h1 {
	margin: 0;
}

.page-hero .lede {
	margin: 10px 0 0;
	font-size: 0.98rem;
}

/* 제목 바로 아래 본문이 오므로 위쪽 여백을 줄인다 */
.page-hero + .section {
	padding-top: clamp(32px, 4vw, 48px);
}

.entry-content,
.prose {
	font-size: 1.02rem;
}

/* PI 소개글 — 이력 목록과 붙어 있으면 한 덩어리로 읽힌다 */
.pi-card .prose {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	font-size: 1.04rem;
	line-height: 1.85;
	color: var(--fg-muted);
	max-width: 62ch;
}

.pi-card .prose p + p {
	margin-top: 16px;
}

.pi-card h3 {
	font-size: 1.42rem;
	letter-spacing: -0.015em;
	margin-bottom: 4px;
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content h2 {
	margin-top: 2.2em;
}

.entry-content h3 {
	margin-top: 1.8em;
}

.entry-content img,
.entry-content figure {
	border-radius: var(--radius);
	margin-block: 1.6em;
}

.entry-content figcaption {
	font-size: 0.85rem;
	color: var(--fg-subtle);
	text-align: center;
	margin-top: 8px;
}

.wp-caption-text {
	font-size: 0.85rem;
	color: var(--fg-subtle);
}

.alignwide {
	max-width: min(1100px, 96vw);
	margin-inline: auto;
}

.alignfull {
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
}

.alignleft {
	float: left;
	margin: 0.4em 1.6em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.6em;
}

.aligncenter {
	margin-inline: auto;
}

.sticky .card__title::before {
	content: "★ ";
	color: var(--accent);
}

/* 페이지네이션 */
.pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 48px;
}

.pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding-inline: 12px;
	border: 1px solid var(--border);
	border-radius: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--fg-muted);
}

.pagination .page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.pagination .current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-fg);
}

/* =========================================================
   13. 푸터
   ========================================================= */
.site-footer {
	margin-top: 0;
	background: var(--bg-alt);
	border-top: 1px solid var(--border);
	padding-block: 56px 32px;
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--border);
}

.footer-col h3 {
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-subtle);
	margin-bottom: 14px;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 0.92rem;
}

.footer-col a {
	color: var(--fg-muted);
}

.footer-col a:hover {
	color: var(--accent);
}

.footer-address {
	font-size: 0.92rem;
	color: var(--fg-muted);
	font-style: normal;
	line-height: 1.8;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 24px;
	font-size: 0.82rem;
	color: var(--fg-subtle);
}

.social-links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.social-links a {
	min-height: 36px;
	display: grid;
	place-items: center;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--fg-muted);
	font-size: 0.82rem;
	white-space: nowrap;
}

.social-links a:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* 논문 그림 띠 — 오픈액세스 논문에서 가져온 실제 Figure */
.paper-strip {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
}

.paper-strip__label {
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fg-subtle);
	font-weight: 600;
	margin-bottom: 18px;
}

.paper-strip__row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 22px;
}

.paper-fig {
	margin: 0;
}

.paper-fig img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	object-position: top left;
	background: var(--bg-alt);
	display: block;
}

.paper-fig figcaption {
	margin-top: 9px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.paper-fig__title {
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--fg-muted);
}

.paper-fig__venue {
	font-size: 0.74rem;
	color: var(--fg-subtle);
}

/* 갤러리 — 행사 카드 */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}

.gallery-card {
	display: flex;
	flex-direction: column;
}

.gallery-card__cover {
	aspect-ratio: 4 / 3;
	background: var(--bg-alt);
	overflow: hidden;
}

.gallery-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.gallery-card:hover .gallery-card__cover img {
	transform: scale(1.03);
}

.gallery-card__body {
	padding: 16px 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.gallery-card__title {
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
}

.gallery-card__date {
	font-size: 0.85rem;
	color: var(--fg-muted);
	font-variant-numeric: tabular-nums;
}

.gallery-card__note {
	font-size: 0.88rem;
	color: var(--fg-muted);
	line-height: 1.65;
}

.gallery-card__count {
	margin-top: auto;
	padding-top: 8px;
	font-size: 0.82rem;
	color: var(--accent);
	font-weight: 500;
}

/* 캠퍼스 전경 · 단체사진 */
.campus-photo {
	margin: 0 0 32px;
}

.campus-photo img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--border);
}

.campus-photo figcaption {
	margin-top: 10px;
	font-size: 0.88rem;
	color: var(--fg-subtle);
}

/* 논문 — 학술지·학회 묶음 */
.pub-section {
	margin-bottom: 56px;
}

.pub-section__title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--fg);
	margin-bottom: 8px;
}

.pub-section__count {
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--fg-subtle);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   연구 — 목표 문단과 분야별 전폭 섹션
   ========================================================= */
.section--tight {
	padding-block: 40px 8px;
}

.research-aim__label {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-subtle);
	font-weight: 600;
	margin-bottom: 14px;
}

.research-aim {
	border-left: 2px solid var(--fg);
	padding: 4px 0 4px 24px;
	font-size: 1.12rem;
	line-height: 1.8;
	color: var(--fg-muted);
	max-width: 860px;
}

.research-area {
	padding-block: 64px;
	border-top: 1px solid var(--border);
}

.research-area--alt {
	background: var(--bg-alt);
}

.research-area__tag {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-fg);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 5px 12px;
	margin-bottom: 16px;
}

.research-area__title {
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 32px;
}

.research-area__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 44px;
	align-items: start;
}

.research-area__text p {
	margin-bottom: 18px;
	line-height: 1.85;
}

.research-area__figure {
	margin: 0;
	background: #fff;
	/* 본문이 길어도 그림이 화면에 남아 있게 한다 */
	position: sticky;
	top: 92px;
}

/* 분야마다 그림을 좌우 번갈아 놓는다 */
.research-area--flip .research-area__text {
	order: 2;
}

.research-area--flip .research-area__figure {
	order: 1;
}

.research-area__figure .topic-art {
	border: 0;
	margin: 0;
	aspect-ratio: auto;
	padding: 0;
}

/* 하위 분야 */
.research-subs {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
	border-top: 1px solid var(--border);
	padding-top: 32px;
}

.research-sub__title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 8px;
}

.research-sub__text {
	color: var(--fg-muted);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 8px;
}

.research-sub__keywords {
	font-size: 0.82rem;
	color: var(--fg-subtle);
	letter-spacing: 0.01em;
}

.research-area__more {
	margin-top: 36px;
}

@media (max-width: 860px) {
	.research-area__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.research-area {
		padding-block: 44px;
	}
}

/* =========================================================
   14. 장비·시설 / 연락처 / 모집 / 갤러리
   ========================================================= */
.rule {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 56px 0;
}

.facility {
	max-width: 900px;
	margin-inline: auto;
}

.facility__title {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	font-weight: 600;
	margin-bottom: 20px;
}

.facility__media {
	margin-bottom: 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-alt);
}

.facility__media img {
	width: 100%;
	height: auto;
}

.facility__meta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 6px 20px;
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	font-size: 0.9rem;
}

.facility__meta dt {
	color: var(--fg-subtle);
	font-weight: 600;
}

.facility__meta dd {
	margin: 0;
	color: var(--fg-muted);
}

.contact-list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 10px 28px;
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid var(--border);
	font-size: 0.98rem;
}

@media (max-width: 560px) {
	.contact-list,
	.facility__meta {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.contact-list dd,
	.facility__meta dd {
		margin-bottom: 12px;
	}
}

.contact-list dt {
	color: var(--fg-subtle);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-top: 3px;
}

.contact-list dd {
	margin: 0;
	color: var(--fg);
}

.contact-list a {
	color: var(--accent);
}

.openings__contact {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	color: var(--fg-muted);
}

.openings__contact a {
	color: var(--accent);
	border-bottom: 1px solid currentColor;
}

.gallery-page h2,
.gallery-page h3 {
	margin: 52px 0 20px;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.gallery-page > *:first-child {
	margin-top: 0;
}

.gallery-page figure,
.gallery-page img {
	border-radius: var(--radius);
}

.gallery-page figcaption {
	text-align: center;
	font-size: 0.9rem;
	color: var(--fg-muted);
	margin-top: 10px;
}

.figure-band {
	padding-block: clamp(40px, 5vw, 68px);
}

.figure-band figure {
	margin: 0;
}

.figure-band img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

.figure-band figcaption {
	margin-top: 14px;
	text-align: center;
	font-size: 0.9rem;
	color: var(--fg-muted);
}

/* 논문 배지 · 범례 */
.pub-badge {
	display: inline-block;
	padding: 2px 9px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 0.76rem;
	font-weight: 500;
}

.pub-legend {
	margin-top: 40px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	font-size: 0.85rem;
	color: var(--fg-subtle);
}

.pub-year--prior {
	color: var(--fg-muted);
}

/* 소식 분류 칩 */
.news-item__cat {
	display: inline-block;
	margin-bottom: 2px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-subtle);
}

.news-item__cat:hover {
	color: var(--accent);
}

/* 구성원 관심사 목록 */
.member-card__interests {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--fg-muted);
}

.member-card__interests li {
	padding-left: 14px;
	position: relative;
}

.member-card__interests li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 5px;
	height: 1px;
	background: var(--fg-subtle);
}

/* 로고 밝기 대응 */
.brand__logo {
	max-height: 42px;
	width: auto;
}

.brand__logo--dark {
	display: none;
}

/* 맨 위로 */
.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border);
	border-radius: 0;
	background: var(--bg-elev);
	color: var(--fg-muted);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, color 0.15s ease, border-color 0.15s ease;
	font-size: 1.05rem;
}

.to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.to-top:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* =========================================================
   15. 움직임 — 진입 · 스크롤 등장 · 슬라이더
   =========================================================
   원칙: 이동 거리는 짧게(12~16px), 시간은 0.4~0.6초, 한 번만.
   과하면 광고 랜딩페이지처럼 보이므로 절제한다.
   ========================================================= */

/* ---- 첫 화면 진입 ---- */
.hero-in {
	opacity: 0;
	transform: translateY(14px);
}

.js-motion .hero-in {
	animation: mskimlab-rise 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.js-motion .hero-in--1 { animation-delay: 0.05s; }
.js-motion .hero-in--2 { animation-delay: 0.16s; }
.js-motion .hero-in--3 { animation-delay: 0.27s; }
.js-motion .hero-in--4 { animation-delay: 0.38s; }

/* 이미지는 살짝 늦게, 조금 더 길게 */
.js-motion .hero-in--media {
	animation: mskimlab-fade 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
	transform: none;
}

@keyframes mskimlab-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mskimlab-fade {
	to {
		opacity: 1;
	}
}

/* ---- 스크롤 등장 ---- */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* JS 가 없으면 처음부터 보이게 */
html:not(.js-motion) .reveal,
html:not(.js-motion) .hero-in {
	opacity: 1;
	transform: none;
	animation: none;
}

/* ---- 이미지 슬라이더 ---- */
.slider {
	position: relative;
	overflow: hidden;
	background: var(--bg-alt);
	border: 1px solid var(--border);
}

.slider__track {
	display: flex;
	transition: transform 0.62s cubic-bezier(0.4, 0.14, 0.2, 1);
	will-change: transform;
}

.slider__slide {
	flex: 0 0 100%;
	min-width: 0;
}

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

.slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 7px;
	padding: 0;
	margin: 0;
	list-style: none;
	z-index: 2;
}

.slider__dot {
	width: 22px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.25s ease;
}

.slider__dot:hover {
	background: rgba(255, 255, 255, 0.75);
}

.slider__dot[aria-current="true"] {
	background: #fff;
}

/* 밝은 이미지 대비용 옅은 그라데이션 대신 단색 띠 */
.slider__dots::before {
	content: "";
	position: absolute;
	inset: -10px 0 -12px;
	background: rgba(17, 19, 21, 0.28);
	z-index: -1;
}

.slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	background: rgba(17, 19, 21, 0.42);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
	z-index: 2;
	font-size: 1rem;
}

.slider:hover .slider__nav,
.slider__nav:focus-visible {
	opacity: 1;
}

.slider__nav:hover {
	background: rgba(17, 19, 21, 0.7);
}

.slider__nav--prev { left: 0; }
.slider__nav--next { right: 0; }

@media (max-width: 640px) {
	.slider__nav {
		display: none;
	}
}

/* ---- 움직임을 꺼둔 사용자 ---- */
@media (prefers-reduced-motion: reduce) {
	.hero-in,
	.js-motion .hero-in,
	.reveal {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.slider__track {
		transition: none;
	}
}

/* =========================================================
   16. 기타
   ========================================================= */
.notice {
	padding: 18px 22px;
	background: var(--bg-alt);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	color: var(--fg-muted);
	font-size: 0.94rem;
}

.search-form {
	display: flex;
	gap: 8px;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 11px 16px;
	border: 1px solid var(--border);
	border-radius: 0;
	background: var(--bg);
	color: var(--fg);
	font: inherit;
	font-size: 0.95rem;
}

.error-404 {
	text-align: center;
	padding-block: clamp(72px, 12vw, 140px);
}

.error-404 .code {
	font-family: var(--font-mono);
	font-size: clamp(3rem, 10vw, 6rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	color: var(--fg-subtle);
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.hero__media,
	.cta,
	.pub-filters {
		display: none !important;
	}
	body {
		font-size: 11pt;
	}
}