/* =========================================================
   Yulim Art — 율림아트랩 갤러리 테마 스타일
   밝은 아이보리 배경 · 골드 포인트 · 차콜 텍스트 · 넓은 여백
   외부 폰트/CDN 의존성 없음 (시스템 폰트 스택)
   ========================================================= */

:root {
	/* ─────────────────────────────────────────────
	   사용자 조정 색상 — YULIM BLUE GALLERY 기본값
	   외모 > 사용자 정의하기 > 디자인 스튜디오
	   에서 바꾼 값이 이 --yulim-* 변수를 덮어쓴다.
	   ───────────────────────────────────────────── */
	--yulim-bg: #dceef7;             /* Main Pastel Blue */
	--yulim-bg-secondary: #edf7fb;   /* Ice Blue */
	--yulim-bg-accent: #c9e2ef;      /* Mist Blue (accent 용) */
	--yulim-bg-mist: #c9e2ef;        /* Mist Blue — 중간 톤 섹션 */
	--yulim-bg-deep: #183f55;        /* Deep Gallery Blue — 짙은 섹션 */
	--yulim-surface: #ffffff;        /* White — 작품/카드 영역 */
	--yulim-text: #26343b;
	--yulim-heading: #183f55;        /* Deep Gallery Blue */
	--yulim-gold: #8c6d2f;
	--yulim-header-bg: #f8fbfc;      /* Off White */
	--yulim-footer-bg: #12303f;      /* Deep Gallery Blue보다 더 어둡게 */
	--yulim-button-bg: #3d6e8a;      /* Accent Blue(#5e91ac)를 대비 기준(4.5:1)에 맞게 조정 */
	--yulim-button-text: #ffffff;

	/* 내부 별칭 — 테마 규칙은 아래 변수만 사용한다 */
	--yl-bg: var(--yulim-bg);
	--yl-bg-alt: var(--yulim-bg-secondary);
	--yl-bg-accent: var(--yulim-bg-accent);
	--yl-bg-mist: var(--yulim-bg-mist);
	--yl-bg-deep: var(--yulim-bg-deep);
	--yl-surface: var(--yulim-surface);
	--yl-text: var(--yulim-text);
	--yl-heading: var(--yulim-heading);
	--yl-gold: var(--yulim-gold);
	--yl-gold-dark: var(--yulim-gold);
	--yl-dark: var(--yulim-footer-bg);
	--yl-header-bg: var(--yulim-header-bg);
	/* 헤더 글자색은 고르는 값이 아니라, 고른 헤더 배경색에서 PHP 가
	   자동으로 계산해 넣는다(inc/customizer.php). 아래는 그 값이 없을
	   때의 폴백이다. */
	--yl-header-text: var(--yulim-text);
	--yl-header-h: 70px;
	--yl-button-bg: var(--yulim-button-bg);
	--yl-button-text: var(--yulim-button-text);

	/* '어두운 섬(island)' 안에서 쓰는 밝은 대비색 — .yl-section--deep 에서
	   지역적으로 재정의된다(전체 배경을 어둡게 바꾸지 않고 특정 섹션만). */
	--yl-ondark-text: #f7fafb;
	--yl-ondark-heading: #ffffff;
	--yl-ondark-muted: #c9e2ef;
	--yl-ondark-gold: #d4af6a;
	--yl-ondark-faint: #7fa0b3;
	--yl-ondark-line: rgba(247, 250, 251, 0.22);

	/* 파생 색상 — 구형 브라우저용 고정 폴백.
	   최신 브라우저에서는 아래 @supports 블록이 선택 색상에서 자동 파생한다. */
	--yl-muted: #4e5d64;   /* 밝은 파랑 배경에서도 4.5:1 이상을 확보한 값 */
	--yl-line: #d3e3ea;
	--yl-gold-deep: #6f5626;
	--yl-gold-soft: #c2a877;
	--yl-button-bg-hover: #2c5266;

	--yl-serif: Georgia, "Times New Roman", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
	--yl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

	--yl-max: 1200px;
	--yl-max-wide: 1380px;

	/* ─────────────────────────────────────────────
	   타이포그래피 · 여백 리듬 (디자인 스튜디오에서 조정)
	   ───────────────────────────────────────────── */
	--yulim-space-scale: 1;      /* 0.85(아늑) / 1(기본) / 1.15(넉넉) */
	--yulim-title-tracking: 0em;
	--yulim-radius: 0px;         /* 0(각짐) / 2px(약간 둥글게) / 10px(둥글게) */
	--yulim-card-shadow: none;   /* none(플랫) / 0 14px 34px -22px rgba(0,0,0,.28)(그림자) */

	--yl-space-unit: calc(1px * var(--yulim-space-scale));
}

/* 선택한 색상으로부터 보조 색을 자동 파생 (지원 브라우저) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--yl-muted: color-mix(in srgb, var(--yulim-text) 78%, var(--yulim-bg));
		--yl-line: color-mix(in srgb, var(--yulim-text) 12%, var(--yulim-bg));
		--yl-gold-deep: color-mix(in srgb, var(--yulim-gold) 78%, #000000);
		--yl-gold-soft: color-mix(in srgb, var(--yulim-gold) 50%, #ffffff);
		--yl-button-bg-hover: color-mix(in srgb, var(--yulim-button-bg) 80%, #000000);
	}
}

/* ---------- 어두운 섬(island) 섹션 ---------- */
/* Deep Gallery Blue 등 짙은 배경 섹션 안에서만 글자색을 밝게 뒤집는다.
   CSS 변수 지역 재정의라, 사이트 전체 색을 바꾸지 않고도
   섹션 단위로 '깊은 공간'을 연출할 수 있다(section 12/15의 요청). */
.yl-section--deep {
	background: var(--yl-bg-deep);
	--yl-text: var(--yl-ondark-text);
	--yl-heading: var(--yl-ondark-heading);
	--yl-muted: var(--yl-ondark-muted);
	--yl-gold: var(--yl-ondark-gold);
	--yl-gold-dark: var(--yl-ondark-gold);
	--yl-gold-soft: var(--yl-ondark-gold);
	--yl-line: var(--yl-ondark-line);
	--yl-button-bg: var(--yl-ondark-gold);
	--yl-button-text: var(--yl-bg-deep);
	--yl-button-bg-hover: #e8c98c;
}

.yl-section--deep .yl-badge {
	background: rgba(212, 175, 106, 0.14);
}

/* ---------- 기본 ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 가로 스크롤바 안전망 — clip 은 hidden 과 달리 스크롤 컨테이너를 만들지
	   않아 sticky 헤더에 무해하고, 미지원 브라우저는 무시(현상 유지)한다. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--yl-bg);
	color: var(--yl-text);
	font-family: var(--yl-sans);
	font-size: 16px;
	line-height: 1.75;
	word-break: keep-all;
	overflow-wrap: break-word;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover {
	color: var(--yl-gold-dark);
}

:focus-visible {
	outline: 2px solid var(--yl-gold);
	outline-offset: 3px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--yl-dark);
	color: #fff;
	padding: 10px 20px;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	clip-path: none;
	width: auto;
	height: auto;
}

/* 고정 헤더 높이만큼 스크롤 여유를 둔다.
   이게 없으면 '본문으로 건너뛰기'나 #앵커로 이동할 때, 또는 Tab 으로
   포커스가 이동할 때 대상이 헤더 뒤에 숨는다. */
html {
	scroll-padding-top: var(--yl-header-h);
}

/* 링크 안의 이미지는 클릭·드래그 대상에서 뺀다.
   이렇게 하면 이미지를 잡아끌 때 반투명 고스트가 생기지 않고, 클릭
   판정도 링크 하나로 단순해진다. 참조 사이트도 모든 img 에 이 값을
   쓰고 있다(실측: pointer-events 전부 none). */
a img {
	pointer-events: none;
}

/* ---------- 헤더 ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	/* 언제나 불투명하다. 뒤로 이미지가 지나가도 글자가 흐려지지 않는다.
	   예전에 있던 backdrop-filter: blur(8px) 는 걷어냈다 — 헤더가 불투명한
	   이상 흐릴 배경이 없고, 파이어폭스에서 position:sticky 와 같이 쓰면
	   흐림이 사라지는 문제도 보고돼 있다. */
	background: var(--yl-header-bg);
	color: var(--yl-header-text);
	border-bottom: 1px solid var(--yl-line);
	transition: background 0.3s ease, border-color 0.3s ease;
}

/* 투명 헤더는 걷어냈다 — 이유를 남겨 둔다.

   예전에는 HOME 첫 화면에서 헤더를 투명하게 띄워 대형 이미지 위에
   겹치고, 흰 글자 + 그림자 + 어두운 그라디언트로 읽히게 했다.
   실제 이미지로 측정해 보니 이 방식은 성립하지 않았다.

   측정(1280px 화면, 로고 1개 + 메뉴 7개 = 8개 항목, 데모 이미지 4장):
     · 그라디언트를 포함해도 32개 항목 중 11개만 4.5:1 을 넘었다.
     · 카유보트 〈비 오는 파리〉 위에서는 흰 글자 2.51, 검은 글자 1.49 —
       어떤 글자색으로도 기준을 못 넘겼다. 밝은 하늘과 어두운 건물이
       헤더 띠 안에 함께 걸리기 때문이다.
     · 모든 이미지에서 흰 글자가 4.5:1 을 넘게 하려면 검은 막을 47%
       농도로 헤더 띠 전체에 균일하게 덮어야 했다. 그러면 작품이 53%
       밝기로 눌린다 — 사실상 불투명 헤더를 얹은 것과 같아서, 투명
       헤더를 쓰는 이유 자체가 사라진다.
     · mix-blend-mode: difference 로 글자색을 자동 반전시키는 방법은
       더 나빴다(픽셀의 23~89% 가 기준 미달, 최악 대비 1.00 — 글자가
       배경과 완전히 같은 색이 되어 사라진다).
     · 첫 화면이 4장짜리 캐러셀이 되면서, 밝은 장과 어두운 장이 섞이면
       헤더 글자색을 어느 한쪽에 맞출 수도 없게 됐다.

   참조 사이트(davidzwirner.com)도 투명 헤더를 쓰지 않는다. 측정값:
     헤더 70px · 배경 불투명 흰색 · 테두리 없음 · position: sticky ·
     헤더 아래 40px 띄우고 이미지 시작(이미지 top 110px).

   그래서 헤더는 항상 불투명이다. 대비는 21:1 로 고정된다.
   되살리고 싶어지면 위 숫자를 먼저 다시 재 보기 바란다. */

.site-header-inner {
	max-width: var(--yl-max-wide);
	margin: 0 auto;
	padding: 0 28px;
	min-height: 92px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-logo a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.site-logo img {
	max-height: 66px;
	width: auto;
}

.site-logo-text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.25;
}

.site-logo-en {
	font-family: var(--yl-serif);
	font-size: 24px;
	letter-spacing: 0.2em;
	color: var(--yl-gold-dark);
}

.site-logo-ko {
	font-size: 13px;
	letter-spacing: 0.36em;
	color: var(--yl-muted);
}

.site-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 30px;
	align-items: center;
}

.site-nav-list a {
	display: inline-block;
	padding: 8px 0;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yl-text);
	border-bottom: 1px solid transparent;
}

.site-nav-list a:hover {
	color: var(--yl-gold-dark);
	border-bottom-color: var(--yl-gold);
}

.site-nav-list .current-menu-item > a,
.site-nav-list .current_page_item > a {
	color: var(--yl-gold-dark);
	border-bottom-color: var(--yl-gold);
}

/* 서브 메뉴 (2단계) */
.site-nav-list ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;
}

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--yl-line);
	border-radius: 2px;
	padding: 12px 14px;
	cursor: pointer;
}

.nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--yl-text);
	margin: 5px 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* ---------- 히어로 (홈 첫 화면 — 작품이 주인공) ---------- */

.yl-hero {
	text-align: center;
	padding: 48px 24px 0;
}

.yl-hero-mark {
	margin: 8px auto 36px;
}

.yl-hero-mark img {
	margin: 0 auto;
	width: min(220px, 52vw);
	height: auto;
}

.yl-hero-media {
	margin: 0 auto;
	max-width: var(--yl-max);
}

.yl-hero-media img {
	margin: 0 auto;
	max-height: 78vh;
	width: auto;
	max-width: 100%;
	box-shadow: 0 24px 60px -32px rgba(43, 42, 39, 0.35);
}

.yl-hero-caption {
	margin-top: 18px;
	font-size: 13px;
	color: var(--yl-muted);
	letter-spacing: 0.04em;
}

.yl-hero-caption-meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
}

.yl-hero-brand {
	padding: calc(72px * var(--yulim-space-scale)) 24px calc(40px * var(--yulim-space-scale));
}

.yl-hero-title {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(30px, 5vw, 46px);
	letter-spacing: var(--yulim-title-tracking);
	color: var(--yl-gold);
}

.yl-hero-keywords {
	margin: 18px 0 0;
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--yl-gold-dark);
	text-transform: uppercase;
}

.yl-hero-intro {
	max-width: 620px;
	margin: 28px auto 0;
	font-size: 17px;
	color: var(--yl-text);
}

.yl-hero-stage {
	/* 기본(Full Artwork) 레이아웃 — 위 규칙들이 그대로 적용된다. */
}

/* ----- Hero 레이아웃: Split Editorial (좌우 분할) ----- */

.yl-hero--split-editorial .yl-hero-stage {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	align-items: center;
	gap: calc(56px * var(--yulim-space-scale));
	max-width: var(--yl-max-wide);
	margin: 0 auto;
	padding: 12px 28px 24px;
	text-align: left;
}

.yl-hero--split-editorial .yl-hero-brand {
	order: 1;
	padding: 0;
}

.yl-hero--split-editorial .yl-hero-media {
	order: 2;
	margin: 0;
	max-width: none;
}

.yl-hero--split-editorial .yl-hero-media img {
	max-height: none;
	width: 100%;
}

.yl-hero--split-editorial .yl-hero-title {
	font-size: clamp(32px, 4.6vw, 52px);
}

.yl-hero--split-editorial .yl-hero-intro {
	margin-left: 0;
}

@media (max-width: 900px) {
	.yl-hero--split-editorial .yl-hero-stage {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.yl-hero--split-editorial .yl-hero-brand,
	.yl-hero--split-editorial .yl-hero-media {
		order: initial;
	}

	.yl-hero--split-editorial .yl-hero-intro {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ----- Hero 레이아웃: Minimal Gallery (이미지 중심, 텍스트 최소화) ----- */

.yl-hero--minimal-gallery {
	padding-top: 0;
}

.yl-hero--minimal-gallery .yl-hero-stage {
	position: relative;
}

.yl-hero--minimal-gallery .yl-hero-media {
	margin: 0;
	max-width: none;
}

.yl-hero--minimal-gallery .yl-hero-media img {
	width: 100%;
	max-height: 92vh;
	object-fit: cover;
	box-shadow: none;
}

.yl-hero--minimal-gallery .yl-hero-brand {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	background: var(--yl-surface);
	padding: 10px 26px;
	border-radius: var(--yulim-radius);
	z-index: 2;
	max-width: 92vw;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.yl-hero--minimal-gallery .yl-hero-brand {
		background: color-mix(in srgb, var(--yl-surface) 85%, transparent);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}

.yl-hero--minimal-gallery .yl-hero-title {
	font-size: 15px;
	letter-spacing: 0.32em;
}

.yl-hero--minimal-gallery .yl-hero-keywords {
	font-size: 10px;
	margin-top: 6px;
	letter-spacing: 0.22em;
}

/* ---------- 공통 섹션 ---------- */

.yl-section {
	padding: calc(88px * var(--yulim-space-scale)) 28px;
	max-width: var(--yl-max);
	margin: 0 auto;
}

.yl-section--alt {
	max-width: none;
	background: var(--yl-bg-alt);
}

.yl-section--alt > * {
	max-width: var(--yl-max);
	margin-left: auto;
	margin-right: auto;
}

/* 섹션 색상 리듬 — 페이지를 스크롤할 때 밝음 → 중립 → 깊음으로 자연스럽게
   변하도록, 페이지별로 서로 다른 배경 톤을 쓴다(같은 파란색 반복 금지). */
.yl-section--white {
	max-width: none;
	background: var(--yl-surface);
}

.yl-section--white > * {
	max-width: var(--yl-max);
	margin-left: auto;
	margin-right: auto;
}

.yl-section--mist {
	max-width: none;
	background: var(--yl-bg-mist);
}

.yl-section--mist > * {
	max-width: var(--yl-max);
	margin-left: auto;
	margin-right: auto;
}

.yl-section--deep {
	max-width: none;
}

.yl-section--deep > * {
	max-width: var(--yl-max);
	margin-left: auto;
	margin-right: auto;
}

/* 화면 끝까지 이어지는 몰입형 섹션(PHOTOGRAPHY). 안내 제목만 일반 폭으로
   두고, 이미지 스트립은 뷰포트 전체 폭을 사용한다. */
.yl-section--full-bleed {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.yl-full-bleed-head {
	max-width: var(--yl-max);
	margin: 0 auto;
	padding: 0 28px calc(48px * var(--yulim-space-scale));
}

.yl-section--full-bleed .yl-section-more {
	max-width: var(--yl-max);
	margin: calc(48px * var(--yulim-space-scale)) auto 0;
	padding: 0 28px;
}

.yl-section--related {
	padding-top: 48px;
}

.yl-section--contact {
	text-align: center;
	background: var(--yl-bg-accent);
}

.yl-section-head {
	text-align: center;
	margin-bottom: 52px;
}

.yl-section-title {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(20px, 3vw, 26px);
	letter-spacing: var(--yulim-title-tracking);
	text-transform: uppercase;
	color: var(--yl-heading);
}

.yl-section-sub {
	margin: 10px 0 0;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--yl-muted);
}

.yl-section-more {
	text-align: center;
	margin: 56px 0 0;
}

.yl-contact-lead {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	font-size: 16px;
	color: var(--yl-muted);
}

/* ---------- 버튼 · 링크 ---------- */

.yl-button {
	display: inline-block;
	padding: 14px 40px;
	border: 1px solid var(--yl-button-bg);
	border-radius: var(--yulim-radius);
	color: var(--yl-button-bg);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: transparent;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.yl-button:hover {
	background: var(--yl-button-bg);
	color: var(--yl-button-text);
}

.yl-button--solid {
	background: var(--yl-button-bg);
	color: var(--yl-button-text);
}

.yl-button--solid:hover {
	background: var(--yl-button-bg-hover);
	color: var(--yl-button-text);
}

.yl-text-link {
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--yl-gold-dark);
	border-bottom: 1px solid var(--yl-gold-soft);
	padding-bottom: 2px;
}

/* ---------- 그리드 · 매소너리 ---------- */

.yl-grid {
	display: grid;
	gap: calc(48px * var(--yulim-space-scale)) calc(32px * var(--yulim-space-scale));
}

/* auto-fill 이 아니라 auto-fit 을 쓴다.
   auto-fill 은 들어갈 자리만큼 칸을 만들어 두기 때문에, 항목이 3개인데
   4칸이 만들어지면 마지막 한 칸이 빈 채로 남는다(실측: 1440px 화면에서
   철학 섹션이 4칸/카드 3개 → 오른쪽 294px 공백).
   auto-fit 은 빈 칸을 접어 없애고 남은 항목이 폭을 나눠 갖는다. */
.yl-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.yl-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* 작품: 이미지 비율을 자르지 않는 masonry (CSS columns) */
.yl-masonry {
	columns: 3 300px;
	column-gap: calc(32px * var(--yulim-space-scale));
}

.yl-masonry .yl-card {
	break-inside: avoid;
	margin: 0 0 calc(48px * var(--yulim-space-scale));
	display: block;
}

/* 홈 'SELECTED WORKS' — 대형 1점 + 소형 2점의 비대칭 리듬.
   균일한 카드 반복을 피해 스크롤에 리듬을 만든다. */
.yl-rhythm-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: calc(40px * var(--yulim-space-scale));
	align-items: start;
}

.yl-rhythm-large {
	grid-row: span 2;
}

@media (max-width: 700px) {
	.yl-rhythm-grid {
		grid-template-columns: 1fr;
	}

	.yl-rhythm-large {
		grid-row: auto;
	}
}

/* 작품이 실제 갤러리 벽면에 놓인 느낌 — 카드 배경·그림자·모서리를
   프리셋 설정과 무관하게 항상 최소화한다(카드 UI 최소화 원칙). */
.yl-home-works .yl-card-media,
.yl-masonry .yl-card-media {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* 홈 'PHOTOGRAPHY' — 이미지가 화면을 채우는 몰입형 스트립.
   텍스트는 최소화하고 이미지 사이 간격을 좁게 유지한다. */
.yl-photo-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: calc(6px * var(--yulim-space-scale));
}

.yl-photo-strip .yl-card-media {
	aspect-ratio: 3 / 2;
}

.yl-photo-strip .yl-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 홈 'ABOUT YULIM ART LAB' — Deep Gallery Blue, 짧고 강한 브랜드 문장 */
.yl-home-about {
	text-align: center;
}

.yl-home-about-keywords {
	margin: 0 0 28px;
	font-family: var(--yl-serif);
	letter-spacing: 0.3em;
	color: var(--yl-gold);
	font-size: 13px;
	text-transform: uppercase;
}

.yl-home-about-text {
	max-width: 660px;
	margin: 0 auto;
	font-family: var(--yl-serif);
	font-size: clamp(21px, 2.6vw, 30px);
	line-height: 1.6;
	color: var(--yl-heading);
}

/* 홈 'FEATURED ARTIST' — 작가 한 명을 크게 소개하는 에디토리얼 인터뷰 */
.yl-feature-artist {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: calc(56px * var(--yulim-space-scale));
	align-items: center;
}

.yl-feature-artist-media {
	display: block;
	background: var(--yl-surface);
	overflow: hidden;
}

.yl-feature-artist-media img {
	width: 100%;
	height: auto;
}

.yl-feature-artist-name {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 38px);
	color: var(--yl-heading);
}

.yl-feature-artist-en {
	margin: 10px 0 0;
	letter-spacing: 0.12em;
	color: var(--yl-gold);
	font-size: 14px;
}

.yl-feature-artist-desc {
	margin: 20px 0 26px;
	font-size: 17px;
	color: var(--yl-text);
	max-width: 420px;
}

.yl-feature-artist-more {
	margin: calc(48px * var(--yulim-space-scale)) 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--yl-muted);
}

.yl-feature-artist-more span:first-child {
	margin-right: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11px;
}

.yl-feature-artist-more a {
	color: var(--yl-text);
}

.yl-feature-artist-more a:hover {
	color: var(--yl-gold-dark);
}

@media (max-width: 820px) {
	.yl-feature-artist {
		grid-template-columns: 1fr;
	}
}

/* 홈 'CURRENT / UPCOMING EXHIBITION' — 대형 전시 포스터 블록 */
.yl-exhibition-posters {
	display: flex;
	flex-direction: column;
	gap: calc(64px * var(--yulim-space-scale));
}

.yl-exhibition-poster {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: calc(48px * var(--yulim-space-scale));
	align-items: center;
}

.yl-exhibition-poster:nth-child(even) {
	grid-template-columns: 1fr 1.3fr;
}

.yl-exhibition-poster:nth-child(even) .yl-exhibition-poster-media {
	order: 2;
}

.yl-exhibition-poster:nth-child(even) .yl-exhibition-poster-info {
	order: 1;
}

.yl-exhibition-poster-media {
	display: block;
	overflow: hidden;
}

.yl-exhibition-poster-media img {
	width: 100%;
	height: auto;
}

.yl-exhibition-poster-title {
	margin: 10px 0 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(24px, 3.2vw, 34px);
}

.yl-exhibition-poster-title a {
	color: var(--yl-heading);
}

.yl-exhibition-poster-meta {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--yl-muted);
}

@media (max-width: 820px) {
	.yl-exhibition-poster,
	.yl-exhibition-poster:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.yl-exhibition-poster:nth-child(even) .yl-exhibition-poster-media,
	.yl-exhibition-poster:nth-child(even) .yl-exhibition-poster-info {
		order: initial;
	}
}

/* PAST 전시 — 조밀한 아카이브 월 (작은 썸네일 그리드) */
.yl-exhibition-archive {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: calc(28px * var(--yulim-space-scale)) 20px;
}

.yl-exhibition-archive-item {
	display: block;
}

.yl-exhibition-archive-media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--yl-bg-alt);
	margin-bottom: 10px;
}

/* 작품·전시 이미지에는 어떤 필터도 걸지 않는다.
   예전에는 기본 상태에 grayscale(0.2) 가 걸려 있어서, 올려 둔 작품이
   항상 20% 탈색된 채로 보였다. 미술 사이트에서 작품 색을 임의로 죽이는
   것은 그 자체로 잘못이다. 호버 확대(scale 1.03)도 뺐다 — 참조 사이트는
   이미지에 호버 효과를 하나도 쓰지 않는다. 반응은 제목 밑줄로만 준다. */
.yl-exhibition-archive-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 굵기는 사이트 전체에서 500 한 종만 쓴다.
   참조 사이트 실측에서도 홈 전체가 500 하나로만 조판돼 있었고, 위계는
   크기(44/30/22/16/14)와 색(검정/회색)으로만 만든다.
   @font-face 를 사실대로 500 이라고 고친 뒤로는 600 을 쓰면 브라우저가
   실제로 굵게 합성하기 때문에(실측 잉크량 +37%), 예전처럼 '적어도
   화면에는 티가 안 나는' 값이 아니게 됐다. 그래서 500 으로 내린다.
   굵게 합성 자체는 살아 있어서, 관리자가 편집기에서 <strong> 을 쓰면
   그때는 제대로 굵게 나온다. */
.yl-exhibition-archive-title {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--yl-text);
}

.yl-exhibition-archive-meta {
	display: block;
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--yl-muted);
	margin-top: 3px;
}

/* 출판 에디토리얼 목록 — PUBLISHING 목록 페이지와 홈에서 함께 사용 */
.yl-pub-list {
	display: flex;
	flex-direction: column;
	gap: calc(88px * var(--yulim-space-scale));
}

.yl-pub-row {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: calc(56px * var(--yulim-space-scale));
	align-items: center;
}

.yl-pub-row--b {
	grid-template-columns: 1.15fr 0.85fr;
}

.yl-pub-row--b .yl-pub-row-cover {
	order: 2;
}

.yl-pub-row--b .yl-pub-row-info {
	order: 1;
}

.yl-pub-row-cover {
	display: flex;
	justify-content: center;
	background: var(--yl-bg-alt);
	padding: 8%;
}

.yl-pub-row-cover img {
	width: auto;
	max-width: 100%;
	max-height: 480px;
	box-shadow: 0 20px 44px -24px rgba(24, 63, 85, 0.35);
}

.yl-pub-row-title {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(22px, 3vw, 30px);
	color: var(--yl-heading);
}

.yl-pub-row-meta {
	margin: 10px 0 0;
	letter-spacing: 0.08em;
	color: var(--yl-gold-dark);
	font-size: 14px;
}

.yl-pub-row-desc {
	margin: 18px 0 22px;
	font-size: 16px;
	color: var(--yl-text);
	max-width: 440px;
}

@media (max-width: 820px) {
	.yl-pub-row,
	.yl-pub-row--b {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.yl-pub-row--b .yl-pub-row-cover,
	.yl-pub-row--b .yl-pub-row-info {
		order: initial;
	}

	.yl-pub-list {
		gap: 56px;
	}
}

/* ---------- 카드 ---------- */

.yl-card {
	margin: 0;
}

.yl-card-link {
	display: block;
}

.yl-card-media {
	position: relative;
	margin: 0;
	background: var(--yl-surface);
	overflow: hidden;
	border-radius: var(--yulim-radius);
	box-shadow: var(--yulim-card-shadow);
}

.yl-card-media img {
	width: 100%;
	height: auto;
}

/* 호버 반응은 제목 밑줄 하나로 통일한다(참조 사이트와 같다).
   이미지를 확대하거나 흐리게 만드는 효과는 쓰지 않는다. */
.yl-card-link:hover .yl-card-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 작가 사진: 초상 비율 */
.yl-card-media--portrait img {
	aspect-ratio: 3 / 3.7;
	object-fit: cover;
}

/* 전시 대표 이미지: 가로 비율 */
.yl-card-media--wide img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* 출판 표지: 세로 비율, 자르지 않고 여백 안에 배치 */
.yl-card-media--cover {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12%;
}

.yl-card-media--cover img {
	width: 100%;
	height: auto;
	box-shadow: 0 14px 34px -18px rgba(43, 42, 39, 0.4);
}

.yl-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	font-family: var(--yl-serif);
	font-size: 28px;
	letter-spacing: 0.2em;
	color: var(--yl-gold-soft);
}

.yl-card-body {
	padding: 18px 2px 0;
}

.yl-card-title {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.5;
	color: var(--yl-heading);
}

.yl-card-sub {
	margin: 4px 0 0;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--yl-gold-dark);
}

.yl-card-meta {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--yl-muted);
}

/* ---------- ARTISTS 에디토리얼 목록 (카드 나열 대신 좌우 교차 리듬) ---------- */

.yl-artist-list {
	display: flex;
	flex-direction: column;
	gap: calc(88px * var(--yulim-space-scale));
}

.yl-artist-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: calc(56px * var(--yulim-space-scale));
	align-items: center;
}

.yl-artist-row--b {
	grid-template-columns: 1fr 1.6fr;
}

.yl-artist-row--b .yl-artist-row-media {
	order: 2;
}

.yl-artist-row--b .yl-artist-row-info {
	order: 1;
}

.yl-artist-row-media {
	display: block;
	background: var(--yl-surface);
	overflow: hidden;
	border-radius: var(--yulim-radius);
}

.yl-artist-row-media img {
	width: 100%;
	height: auto;
}

.yl-artist-row-title {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(24px, 3.2vw, 34px);
	color: var(--yl-heading);
}

.yl-artist-row-en {
	margin: 8px 0 0;
	letter-spacing: 0.12em;
	color: var(--yl-gold);
	font-size: 14px;
}

.yl-artist-row-desc {
	margin: 18px 0 22px;
	font-size: 16px;
	color: var(--yl-text);
	max-width: 480px;
}

@media (max-width: 820px) {
	.yl-artist-row,
	.yl-artist-row--b {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.yl-artist-row--b .yl-artist-row-media,
	.yl-artist-row--b .yl-artist-row-info {
		order: initial;
	}

	.yl-artist-list {
		gap: 56px;
	}
}

/* ---------- 뱃지 ---------- */

.yl-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 12px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid var(--yl-gold-soft);
	color: var(--yl-gold-dark);
	background: var(--yl-bg-accent);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.yl-badge {
		background: color-mix(in srgb, var(--yl-gold) 8%, transparent);
	}
}

.yl-badge--sold,
.yl-badge--not_for_sale {
	border-color: var(--yl-line);
	color: var(--yl-muted);
	background: transparent;
}

.yl-badge--ex-current {
	background: var(--yl-gold-dark);
	border-color: var(--yl-gold-dark);
	color: #fff;
}

.yl-badge--ex-past {
	border-color: var(--yl-line);
	color: var(--yl-muted);
	background: transparent;
}

/* ---------- 페이지 공통 ---------- */

.yl-page {
	max-width: var(--yl-max);
	margin: 0 auto;
	padding: 72px 28px 96px;
}

.yl-page--wide {
	max-width: var(--yl-max-wide);
}

/* GALLERY — 뮤지엄 월. 화이트 배경 위에 작품이 놓이고, 여백을 넉넉히 두어
   벽에 걸린 느낌을 낸다. */
.yl-page--gallery {
	background: var(--yl-surface);
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.yl-page--gallery > * {
	max-width: var(--yl-max-wide);
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
}

.yl-masonry--gallery {
	columns: 3 320px;
	column-gap: calc(56px * var(--yulim-space-scale));
}

.yl-masonry--gallery .yl-card {
	margin-bottom: calc(72px * var(--yulim-space-scale));
}

/* 미술관 라벨처럼 절제된 캡션 */
.yl-masonry--gallery .yl-card-title {
	font-family: var(--yl-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--yl-text);
}

.yl-masonry--gallery .yl-card-meta {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--yl-muted);
}

.yl-page-head {
	margin-bottom: 56px;
}

.yl-page-head--center {
	text-align: center;
}

.yl-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--yl-gold-dark);
}

.yl-page-title {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(26px, 4vw, 38px);
	letter-spacing: 0.06em;
	color: var(--yl-heading);
}

.yl-page-meta {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--yl-muted);
}

.yl-prose {
	max-width: 720px;
	margin: 0 auto;
	font-size: 16.5px;
	line-height: 1.9;
}

.yl-prose--center {
	text-align: center;
	margin-bottom: 48px;
}

.yl-prose img {
	margin: 32px auto;
}

.yl-empty {
	text-align: center;
	color: var(--yl-muted);
	padding: 64px 0;
}

.yl-admin-hint {
	max-width: 720px;
	margin: 24px auto;
	padding: 16px 24px;
	border: 1px dashed var(--yl-gold-soft);
	background: rgba(169, 133, 59, 0.05);
	font-size: 14px;
}

/* ---------- 상세 페이지 공통 ---------- */

.yl-single {
	max-width: var(--yl-max);
	margin: 0 auto;
	padding: 64px 28px 96px;
}

.yl-single-body {
	max-width: 760px;
	margin: 0 auto;
}

.yl-single-head {
	text-align: center;
	margin-bottom: 40px;
}

.yl-single-title {
	margin: 0;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: clamp(24px, 3.6vw, 34px);
	letter-spacing: 0.04em;
	color: var(--yl-heading);
}

.yl-single-sub {
	margin: 12px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--yl-gold-dark);
}

.yl-single-cta {
	text-align: center;
	margin: 48px 0 0;
}

.yl-back-link {
	text-align: center;
	margin: 72px 0 0;
	font-size: 14px;
	letter-spacing: 0.06em;
}

.yl-back-link a {
	color: var(--yl-muted);
}

.yl-back-link a:hover {
	color: var(--yl-gold-dark);
}

/* 스펙 표 (작품 정보 등) */
.yl-spec {
	max-width: 560px;
	margin: 0 auto 40px;
	border-top: 1px solid var(--yl-line);
}

.yl-spec-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--yl-line);
}

.yl-spec dt {
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--yl-muted);
}

.yl-spec dd {
	margin: 0;
	font-size: 15px;
}

/* ---------- 작품 상세 — 대형 이미지 + 사이드 정보 패널 ---------- */

.yl-artwork-layout {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: calc(64px * var(--yulim-space-scale));
	align-items: start;
}

.yl-artwork-layout .yl-artwork-stage {
	margin: 0;
}

.yl-artwork-layout .yl-single-body {
	max-width: none;
	margin: 0;
	position: sticky;
	top: 110px;
}

.yl-artwork-layout .yl-single-head,
.yl-artwork-layout .yl-single-cta {
	text-align: left;
}

.yl-artwork-layout .yl-spec {
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 900px) {
	.yl-artwork-layout {
		grid-template-columns: 1fr;
	}

	.yl-artwork-layout .yl-single-body {
		position: static;
	}

	.yl-artwork-layout .yl-single-head,
	.yl-artwork-layout .yl-single-cta {
		text-align: center;
	}

	.yl-artwork-layout .yl-spec {
		margin-left: auto;
		margin-right: auto;
	}
}

.yl-artwork-stage {
	margin: 0 auto 56px;
	text-align: center;
}

.yl-artwork-stage img {
	margin: 0 auto;
	max-height: 82vh;
	width: auto;
	max-width: 100%;
	box-shadow: 0 30px 70px -40px rgba(43, 42, 39, 0.4);
}

.yl-lightbox-trigger {
	position: relative;
	cursor: zoom-in;
	display: inline-block;
}

/* ---------- 워터마크 (설정에서 켰을 때만 표시되는 화면 오버레이) ---------- */

.yl-watermark {
	position: absolute;
	pointer-events: none;
	user-select: none;
	font-family: var(--yl-serif);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	opacity: var(--yl-watermark-opacity, 0.35);
	padding: 10px 14px;
	z-index: 1;
}

.yl-watermark--bottom-right {
	right: 0;
	bottom: 0;
}

.yl-watermark--bottom-left {
	left: 0;
	bottom: 0;
}

.yl-watermark--center {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
}

.yl-artwork-zoom-hint {
	margin-top: 16px;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--yl-muted);
}

/* ---------- 작가 상세 ---------- */

.yl-artist-profile {
	display: grid;
	grid-template-columns: minmax(320px, 480px) 1fr;
	gap: calc(64px * var(--yulim-space-scale));
	align-items: center;
	max-width: var(--yl-max);
	margin: 0 auto calc(72px * var(--yulim-space-scale));
}

.yl-artist-photo {
	margin: 0;
}

.yl-artist-photo img {
	width: 100%;
	height: auto;
}

.yl-artist-heading .yl-single-title {
	text-align: left;
}

.yl-artist-intro {
	margin: 20px 0 0;
	font-size: 16px;
	color: var(--yl-muted);
}

.yl-artist-section {
	max-width: 720px;
	margin: 0 auto 64px;
}

.yl-sub-heading {
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--yl-line);
	padding-bottom: 12px;
	margin: 0 0 24px;
	color: var(--yl-heading);
}

.yl-sub-heading-ko {
	font-family: var(--yl-sans);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--yl-muted);
	margin-left: 10px;
	text-transform: none;
}

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

.yl-career-list li {
	padding: 10px 2px;
	border-bottom: 1px solid var(--yl-line);
	font-size: 15px;
}

/* ---------- 전시 상세 ---------- */

.yl-exhibition-hero {
	margin: 0 auto 56px;
	max-width: var(--yl-max);
}

.yl-exhibition-hero img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	object-position: center;
}

/* ---------- 출판 상세 ---------- */

.yl-publication-layout {
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	gap: 72px;
	align-items: start;
}

.yl-publication-cover {
	margin: 0;
}

.yl-publication-cover img {
	width: 100%;
	height: auto;
	box-shadow: 0 24px 54px -28px rgba(43, 42, 39, 0.45);
}

.yl-publication-layout .yl-single-head,
.yl-publication-layout .yl-single-cta {
	text-align: left;
}

.yl-publication-layout .yl-spec {
	margin-left: 0;
}

/* ---------- 갤러리 필터 ---------- */

.yl-filter {
	margin-bottom: 48px;
}

.yl-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 8px;
}

.yl-filter-link {
	display: inline-block;
	padding: 8px 20px;
	font-size: 13px;
	letter-spacing: 0.1em;
	border: 1px solid var(--yl-line);
	border-radius: 999px;
	color: var(--yl-muted);
	transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.yl-filter-link:hover {
	border-color: var(--yl-gold-soft);
	color: var(--yl-gold-dark);
}

.yl-filter-link.is-active {
	border-color: var(--yl-button-bg);
	background: var(--yl-button-bg);
	color: var(--yl-button-text);
}

/* ---------- 소개(ABOUT) ---------- */

.yl-keyword-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}

.yl-keyword-card {
	background: var(--yl-surface);
	border: 1px solid var(--yl-line);
	padding: 48px 36px;
	text-align: center;
}

.yl-keyword-en {
	margin: 0;
	font-family: var(--yl-serif);
	font-size: 22px;
	letter-spacing: 0.24em;
	color: var(--yl-gold-dark);
}

.yl-keyword-ko {
	margin: 8px 0 0;
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--yl-muted);
}

.yl-keyword-desc {
	margin: 22px 0 0;
	font-size: 15px;
	line-height: 1.85;
}

.yl-biz-card {
	padding: 8px 4px;
}

.yl-biz-title {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 500;
	color: var(--yl-heading);
}

.yl-biz-en {
	display: block;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.26em;
	color: var(--yl-gold-dark);
	margin-top: 4px;
}

.yl-biz-desc {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--yl-muted);
}

/* ---------- 문의(CONTACT) ---------- */

.yl-contact-layout {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 72px;
	align-items: start;
}

.yl-contact-form-col .yl-form-field {
	margin: 0 0 22px;
}

.yl-contact-form-col label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	color: var(--yl-text);
}

.yl-required {
	color: var(--yl-gold-dark);
}

.yl-optional {
	color: var(--yl-muted);
	font-size: 12px;
}

.yl-contact-form-col input[type="text"],
.yl-contact-form-col input[type="email"],
.yl-contact-form-col input[type="tel"],
.yl-contact-form-col select,
.yl-contact-form-col textarea {
	width: 100%;
	padding: 13px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--yl-text);
	background: var(--yl-surface);
	border: 1px solid var(--yl-line);
	border-radius: 2px;
}

.yl-contact-form-col input:focus,
.yl-contact-form-col select:focus,
.yl-contact-form-col textarea:focus {
	outline: none;
	border-color: var(--yl-gold);
	box-shadow: 0 0 0 3px rgba(169, 133, 59, 0.12);
}

.yl-form-notice {
	padding: 16px 22px;
	margin: 0 0 28px;
	font-size: 14.5px;
	border: 1px solid var(--yl-gold-soft);
	background: rgba(169, 133, 59, 0.07);
}

.yl-form-notice--error {
	border-color: #c05b4d;
	background: rgba(192, 91, 77, 0.07);
}

.yl-contact-guide {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.yl-contact-guide li {
	padding: 12px 0;
	border-bottom: 1px solid var(--yl-line);
	font-size: 14px;
	color: var(--yl-muted);
}

.yl-contact-guide strong {
	color: var(--yl-text);
	display: block;
	margin-bottom: 2px;
}

/* ---------- 일반 글 대표 이미지 ---------- */

.yl-article-media {
	margin: 0 auto 32px;
	max-width: 720px;
}

/* ---------- 목록 (일반 글) ---------- */

.yl-list-item {
	padding: 32px 0;
	border-bottom: 1px solid var(--yl-line);
}

.yl-list-title {
	margin: 0 0 8px;
	font-family: var(--yl-serif);
	font-weight: 500;
	font-size: 22px;
	color: var(--yl-heading);
}

.yl-list-excerpt {
	color: var(--yl-muted);
	font-size: 15px;
}

/* ---------- 페이지네이션 ---------- */

.yl-pagination {
	margin-top: 64px;
}

.yl-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.yl-pagination a,
.yl-pagination span {
	display: inline-block;
	min-width: 42px;
	padding: 9px 14px;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.06em;
	border: 1px solid var(--yl-line);
	color: var(--yl-muted);
}

.yl-pagination a:hover {
	border-color: var(--yl-gold-soft);
	color: var(--yl-gold-dark);
}

.yl-pagination .current {
	border-color: var(--yl-gold-dark);
	background: var(--yl-gold-dark);
	color: #fff;
}

/* ---------- 검색 폼 ---------- */

.yl-search-form {
	display: flex;
	gap: 10px;
	max-width: 460px;
	margin: 24px auto 0;
}

.yl-search-field {
	flex: 1;
	padding: 12px 16px;
	font: inherit;
	border: 1px solid var(--yl-line);
	background: var(--yl-surface);
	border-radius: 2px;
}

/* ---------- 404 ---------- */

.yl-404 {
	text-align: center;
}

.yl-404-code {
	margin: 0 0 8px;
	font-family: var(--yl-serif);
	font-size: 72px;
	line-height: 1;
	color: var(--yl-gold-soft);
	letter-spacing: 0.1em;
}

/* ---------- 푸터 ---------- */

.site-footer {
	background: var(--yl-dark);
	color: var(--yl-ondark-muted);
	margin-top: 48px;
}

.site-footer-inner {
	max-width: var(--yl-max);
	margin: 0 auto;
	padding: calc(88px * var(--yulim-space-scale)) 28px 48px;
	text-align: center;
}

.footer-logo {
	margin: 0;
	font-family: var(--yl-serif);
	font-size: 21px;
	letter-spacing: var(--yulim-title-tracking);
	color: var(--yl-ondark-gold);
}

.footer-tagline {
	margin: 14px 0 0;
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--yl-ondark-muted);
	text-transform: uppercase;
}

.footer-desc {
	margin: 16px 0 0;
	font-size: 13.5px;
	color: var(--yl-ondark-muted);
}

.footer-info {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--yl-ondark-line);
	font-size: 13.5px;
}

.footer-line {
	margin: 4px 0;
	color: var(--yl-ondark-muted);
}

.footer-line a {
	color: var(--yl-ondark-text);
}

.footer-line a:hover,
.footer-sns a:hover {
	color: var(--yl-ondark-gold);
}

.footer-sns {
	margin: 18px 0 0;
}

.footer-sns a {
	margin: 0 10px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--yl-ondark-text);
}

.footer-nav-list {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.footer-nav-list a {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yl-ondark-muted);
}

.footer-copy {
	margin: 44px 0 0;
	font-size: 12px;
	color: var(--yl-ondark-faint);
	letter-spacing: 0.06em;
}

/* ---------- 라이트박스 (이미지 확대) ---------- */

.yl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(24, 22, 18, 0.94);
	padding: 4vh 4vw;
}

.yl-lightbox.is-open {
	display: flex;
}

.yl-lightbox img {
	max-width: 94vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
	/* 확대·끌기 — 커서가 다음 동작을 알려준다: 돋보기 → 손바닥 → 움켜쥠 */
	transform-origin: 0 0; /* JS 확대 수식의 기준점 — 바꾸면 지점 고정이 틀어진다 */
	cursor: zoom-in;
	transition: transform 0.25s ease;
	user-select: none;
	/* pinch-zoom: 폰의 손가락 벌려 확대(네이티브)는 그대로 두고,
	   한 손가락 끌기만 JS 이동으로 가져온다 */
	touch-action: pinch-zoom;
}

.yl-lightbox.is-zoomed img { cursor: grab; }

.yl-lightbox.is-panning img { cursor: grabbing; transition: none; }

@media (prefers-reduced-motion: reduce) {
	.yl-lightbox img { transition: none; }
}

.yl-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	color: #f5f2ea;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
}

.yl-lightbox-close:hover {
	color: var(--yl-gold-soft);
}

/* ---------- 스크롤 페이드인 (부드럽게, 과하지 않게) ---------- */

/* 등장 효과는 아주 옅게만. 예전에는 14px 아래에서 0.7초 동안 밀려
   올라왔는데, 참조 사이트에는 이런 등장 애니메이션이 아예 없다.
   움직임이 쌓일수록 화면이 고급스러워지는 게 아니라 싸 보인다. */
.yl-js .yl-reveal {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.yl-js .yl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.yl-js .yl-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.yl-card-media img,
	.yl-exhibition-archive-media img,
	.site-header {
		transition: none !important;
	}
}

/* ---------- 반응형 ---------- */

@media (max-width: 1023px) {
	.yl-masonry {
		columns: 2 260px;
	}

	.yl-contact-layout,
	.yl-publication-layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.yl-artist-profile {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}

	.yl-artist-photo {
		max-width: 300px;
		margin: 0 auto;
	}

	.yl-artist-heading .yl-single-title {
		text-align: center;
	}

	.yl-publication-layout .yl-single-head,
	.yl-publication-layout .yl-single-cta {
		text-align: center;
	}

	.yl-publication-cover {
		max-width: 340px;
		margin: 0 auto;
	}

	.yl-publication-layout .yl-spec {
		margin-left: auto;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 15.5px;
	}

	.site-header-inner {
		min-height: 72px;
		padding: 0 20px;
	}

	.site-logo img {
		max-height: 48px;
	}

	.site-logo-en {
		font-size: 19px;
	}

	.site-logo-ko {
		font-size: 11px;
	}

	.nav-toggle {
		display: block;
	}

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--yl-bg);
		border-bottom: 1px solid var(--yl-line);
		box-shadow: 0 18px 30px -20px rgba(43, 42, 39, 0.25);
	}

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

	/* 메뉴 열림에 짧은 페이드. @starting-style 미지원 브라우저는
	   그냥 즉시 표시된다 (기능 손실 없음) */
	@supports (transition-behavior: allow-discrete) {
		.site-nav {
			opacity: 1;
			transition: opacity 0.18s ease, display 0.18s allow-discrete;
		}

		.site-nav.is-open {
			@starting-style {
				opacity: 0;
			}
		}
	}

	.site-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 0;
	}

	.site-nav-list a {
		display: block;
		padding: 13px 28px;
		border-bottom: none;
	}

	.yl-hero {
		padding-top: 32px;
	}

	.yl-hero-brand {
		padding: 48px 20px 24px;
	}

	.yl-section {
		padding: 60px 20px;
	}

	.yl-page,
	.yl-single {
		padding: 48px 20px 72px;
	}

	.yl-masonry {
		columns: 1;
	}

	.yl-grid {
		gap: 40px 24px;
	}

	.yl-spec-row {
		grid-template-columns: 92px 1fr;
	}

	.yl-section-head {
		margin-bottom: 36px;
	}

	.yl-page-head {
		margin-bottom: 36px;
	}
}


/* =========================================================
   2.0 TREND LAYER — '평범함'을 깨는 층
   ---------------------------------------------------------
   2025-26 트렌드를 유명 사이트 11곳 실측으로 검증해 고른 것만 넣었다.
   (마퀴·그레인·전면 커서 교체·스무스 스크롤 하이재킹은 실측 0곳이라 배제)
   원칙: 구조는 GALLERY WHITE 그대로, 움직임은
     · JS 없으면 전부 정지 상태로 완전 동작 (.yl-js 게이트)
     · prefers-reduced-motion 이면 전부 꺼짐
     · 900px 이하 모바일 리빌은 yulim-mobile-touch 플러그인 담당이므로
       여기 리빌은 901px 이상에서만 켠다 (이중 애니메이션 방지)
   ========================================================= */

/* ---------- 서체: 세리프 디스플레이 2종 ----------
   본문 고딕(Pretendard)은 그대로 두고 '제목'만 세리프로 바꾼다.
   같은 계열 고딕으로 갈아타는 것은 체감이 없다는 검증 결과에 따른 결정.
   마루부리 = 네이버 배포, 동봉·재배포 허용 (fonts/MaruBuri-LICENSE.txt)
   Instrument Serif = SIL OFL (fonts/InstrumentSerif-OFL.txt) */
@font-face {
	font-family: "MaruBuri";
	src: url("../fonts/MaruBuri-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	--yl-serif-kr: "MaruBuri", "Nanum Myeongjo", "AppleMyungjo", serif;
	--yl-serif-en: "Instrument Serif", "MaruBuri", Georgia, serif;
	/* 디스플레이 급 — 갤러리 절제(3.8vw)와 스튜디오 과감함(5.6vw+) 사이 실측 균형점 */
	--yl-fs-display: clamp(38px, 4.6vw, 64px);
}

/* 안쪽 페이지 제목도 세리프로 — 화면 전체의 인상을 바꾸는 건 제목이다 */
.yl-single-title,
.yl-page-title,
.yl-feature-artist-name {
	font-family: var(--yl-serif-kr);
	font-weight: 700;
}

.yl-section-title,
.yl-keyword-en,
.yl-sub-heading {
	font-family: var(--yl-serif-en);
	font-weight: 400;
}

/* ---------- 페이지 전환: View Transitions (표준, JS 0줄) ----------
   지원 브라우저(약 86%)에서는 페이지를 오갈 때 부드럽게 이어지고,
   목록의 작품 이미지가 상세 화면으로 '떠서 이동'한다.
   미지원(파이어폭스 등)·모션 축소 설정에서는 규칙이 무시되어
   평범한 페이지 이동 — 완전 무해. */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.22s;
}

/* ---------- 마이크로 디테일 ---------- */

/* 제목 줄바꿈 균형 — 미지원 브라우저는 그냥 일반 줄바꿈 */
h1,
h2,
.yl-ed-title,
.yl-now-title,
.yl-single-title {
	text-wrap: balance;
}

p,
.yl-ed-sub,
.footer-line {
	text-wrap: pretty;
}

/* 이미지 호버 미세 확대 — 실측 안전선 1.02 를 넘지 않는다 */
.yl-card-media {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.yl-ed-img,
	.yl-card-media img {
		transition: transform 0.35s ease;
	}

	.yl-rail-link:hover .yl-ed-img,
	.yl-card-link:hover .yl-card-media img,
	.yl-exhibition-archive-item:hover .yl-ed-img {
		transform: scale(1.02);
	}
}

/* ---------- 등장 애니메이션 (Pace 갤러리 실측 수위: 페이드 + 16px) ----------
   .yl-tr 이 붙은 요소가 화면에 들어올 때 한 번만.
   --i 로 스태거(80ms 간격). 조건 셋이 모두 맞을 때만 숨긴다. */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
	html.yl-js .yl-tr {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.6s ease, transform 0.6s ease;
		transition-delay: calc(var(--i, 0) * 80ms);
	}

	html.yl-js .yl-tr.is-in {
		opacity: 1;
		transform: none;
	}

	/* 2.0.3 커튼 리빌 — 레일 이미지가 아래에서 커튼 걷히듯 열린다.
	   기존 페이드와 같은 게이트(.yl-js + 모션 허용 + 901px 이상) 안이라
	   JS 실패·모션 축소·모바일에서는 이미지가 절대 숨지 않는다. */
	html.yl-js .yl-tr .yl-rail-media {
		clip-path: inset(100% 0 0 0);
		transition: clip-path 0.85s cubic-bezier(0.22, 0.61, 0.21, 1);
		transition-delay: calc(var(--i, 0) * 80ms + 100ms);
	}

	html.yl-js .yl-tr.is-in .yl-rail-media {
		clip-path: inset(0 0 0 0);
	}
}

/* ---------- 히어로 캐러셀 원형 커서 ----------
   2.0.3: 104px 검정 원은 작품을 가린다는 사용자 피드백으로 44px
   반투명 글라스로 축소. 따라다니는 재미는 유지하되 몸집만 1/6.
   위치는 JS 가 transform(translate3d)으로 옮기므로, 등장 팝은
   독립 속성 scale 로만 준다(둘이 충돌하지 않는다). 미지원 브라우저는
   scale 선언만 무시되어 그냥 제 크기로 뜬다. */
.yl-hero-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(0, 0, 0, 0.55);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	line-height: 1;
	pointer-events: none;
	z-index: 950;
	opacity: 0;
	scale: 0.5;
	transition: opacity 0.18s ease, scale 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
	will-change: transform;
}

.yl-hero-cursor.is-on {
	opacity: 1;
	scale: 1;
}

/* ---------- 목록 호버 이미지 프리뷰 ----------
   글자 목록 위에서 마우스를 따라다니는 이미지 상자.
   컨테이너 자체를 JS 가 만들므로 JS-off·터치·모션 축소에서는
   아예 존재하지 않는다. */
.yl-hover-media {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	height: 200px;
	overflow: hidden;
	pointer-events: none;
	z-index: 940;
	opacity: 0;
	transition: opacity 0.22s ease;
	background: #f2f2f2;
	will-change: transform;
}

.yl-hover-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yl-hover-media.is-on {
	opacity: 1;
}

/* 행 안의 작은 썸네일 — 호버 프리뷰가 없는 환경(모바일·터치·JS 꺼짐·
   모션 축소)에서 이미지를 잃지 않기 위한 것. 떠다니는 프리뷰가 실제로
   켜지면(main.js 가 html.yl-float-preview 를 붙임) 이것을 숨긴다. */
.yl-index-thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 48px;
	object-fit: cover;
	align-self: center;
	background: #f2f2f2;
}

html.yl-float-preview .yl-index-thumb {
	display: none;
}

/* 모바일 행 배치 — 썸네일 왼쪽, 오른쪽에 제목 위 / 연도·기간 아래.
   데스크톱의 한 줄 배치를 그대로 좁히면 제목이 어색하게 감긴다. */
@media (max-width: 900px) {
	.yl-index-row {
		display: grid;
		grid-template-columns: 72px 1fr;
		grid-template-areas:
			"thumb title"
			"thumb meta";
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		padding: 12px 0;
	}

	.yl-index-thumb {
		grid-area: thumb;
	}

	.yl-index-title {
		grid-area: title;
		font-size: 18px;
	}

	.yl-index-year {
		display: none; /* 기간 안에 연도가 있어 중복 */
	}

	.yl-index-meta {
		grid-area: meta;
		margin-left: 0;
		white-space: normal;
	}
}

/* 프리뷰가 붙는 텍스트 행 목록 (지난 전시 아카이브) */
.yl-index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--yl-line);
}

.yl-index-row {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--yl-line);
	color: var(--yl-text);
}

.yl-index-row:hover .yl-index-title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.yl-index-year {
	flex: 0 0 64px;
	font-family: var(--yl-serif-en);
	font-style: italic;
	font-size: 17px;
	color: var(--yl-muted);
	font-variant-numeric: tabular-nums;
}

.yl-index-title {
	font-size: clamp(19px, 1.9vw, 26px);
	min-width: 0;
}

.yl-index-meta {
	margin-left: auto;
	font-size: 14px;
	color: var(--yl-muted);
	white-space: nowrap;
}

/* ---------- 거대 푸터 (국제갤러리 89vh 실측 선례) ---------- */

.site-footer {
	margin-top: calc(120px * var(--yulim-space-scale));
	border-top: 1px solid var(--yl-line);
	background: var(--yl-bg);
}

.footer-grid {
	display: flex;
	flex-direction: column;
	/* 초대형 워드마크가 빠진 만큼 높이도 한 단계 낮춘다 —
	   빈 여백이 '의도된 숨'으로 읽히는 선 */
	min-height: 56vh;
	padding: calc(64px * var(--yulim-space-scale)) 20px 16px;
}

.footer-cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.footer-head {
	margin: 0 0 6px;
	font-family: var(--yl-serif-en);
	font-style: italic;
	font-size: 17px;
	color: var(--yl-muted);
}

.footer-cols .footer-line {
	margin: 0 0 6px;
	font-size: 16px;
}

.footer-cols a {
	color: var(--yl-text);
}

.footer-cols a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.footer-nav-list li {
	margin: 0 0 6px;
}

.yl-copy {
	margin-left: 10px;
	padding: 2px 10px;
	border: 1px solid var(--yl-line);
	border-radius: 999px;
	background: transparent;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--yl-muted);
	cursor: pointer;
}

.yl-copy:hover {
	border-color: var(--yl-text);
	color: var(--yl-text);
}

html:not(.yl-js) .yl-copy {
	display: none;
}

.footer-top-link {
	font-size: 14px;
	color: var(--yl-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 서명 — 도록 판권장 느낌.
   처음에는 화면 폭을 채우는 초대형 워드마크(11.6vw)였는데, 스튜디오
   문법이라 갤러리 톤에 과하다는 지적을 받고 교체했다. 볼륨이 아니라
   세리프의 우아함으로 푸터를 마무리한다. */
.footer-sign {
	margin: auto 0 0;
	padding-top: 48px;
	display: flex;
	align-items: baseline;
	gap: 16px;
	line-height: 1;
}

.footer-sign-en {
	font-family: var(--yl-serif-en);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 52px);
	letter-spacing: 0;
	color: var(--yl-text);
}

.footer-sign-ko {
	font-family: var(--yl-serif-kr);
	font-weight: 700;
	font-size: 15px;
	color: var(--yl-muted);
}

.footer-legal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	margin-top: 14px;
	font-size: 12px;
	color: var(--yl-muted);
}

@media (max-width: 900px) {
	.footer-grid {
		min-height: auto;
		padding: 48px 20px 12px;
	}

	.footer-cols {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.footer-sign {
		padding-top: 32px;
		flex-direction: column;
		gap: 8px;
	}

	.footer-sign-en {
		font-size: clamp(26px, 8vw, 34px);
	}

	.footer-legal {
		flex-direction: column;
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yl-hero-cursor,
	.yl-hover-media {
		display: none !important;
	}
}


/* =========================================================
   2.0.3 FUN LAYER — 재미 요소 (커서 축소 + 1~5번 승인분)
   ========================================================= */

/* 드래그 선택 색 — 모노크롬 사이트의 한 방울 유희 */
::selection {
	background: #111;
	color: #fff;
}

/* ---------- 밑줄 슬라이드 (데스크톱) ----------
   호버하면 밑줄이 왼쪽에서 오른쪽으로 그어진다. 현재 페이지 메뉴는
   처음부터 100% 그어져 있어 기존 표시 기능을 그대로 잇는다.
   모바일(900px 이하)은 기존 스타일 그대로 — 터치엔 호버가 없다. */
@media (min-width: 901px) {
	.site-nav-list a {
		border-bottom: none;
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0 1px;
	}

	.site-nav-list a:hover,
	.site-nav-list .current-menu-item > a,
	.site-nav-list .current_page_item > a {
		background-size: 100% 1px;
	}

	.footer-cols a {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0 1px;
	}

	.footer-cols a:hover {
		text-decoration: none;
		background-size: 100% 1px;
	}
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.site-nav-list a,
	.footer-cols a {
		/* 전역 a { transition: color/opacity } 를 덮어쓰므로 여기서 다시 합친다 */
		transition: background-size 0.28s ease, color 0.25s ease, opacity 0.25s ease;
	}
}

/* ---------- 스크롤 진행선 ----------
   헤더 아래 2px 선이 읽은 만큼 차오른다. CSS 스크롤 타임라인만 사용
   (JS 0줄). 기본 상태가 scaleX(0)이라 미지원 브라우저·모션 축소에서는
   아예 보이지 않는다 — 안전한 점진적 향상. */
.yl-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--yl-text);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.yl-progress {
			animation: yl-progress-grow auto linear both;
			animation-timeline: scroll(root);
		}
	}
}

@keyframes yl-progress-grow {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ---------- '지금 관람 가능' 배지 (푸터) ----------
   판정은 방문자 브라우저가 한국 시간으로 한다(main.js) — 서버에서
   판정하면 캐시가 상태를 얼려 버린다. JS 꺼짐이면 표시 자체가 없다. */
.yl-open-now {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--yl-text);
}

/* JS 판정 전·JS 꺼짐·Intl 미지원에서는 자리 표시자가 진짜로 숨어야 한다 —
   위 display:inline-flex 가 UA 의 [hidden] 규칙을 이기므로 명시적 예외. */
.yl-open-now[hidden] {
	display: none;
}

.yl-open-now-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9e9e9e;
}

.yl-open-now.is-open .yl-open-now-dot {
	background: #0f8a3d;
}

.yl-open-now.is-closed {
	color: var(--yl-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.yl-open-now.is-open .yl-open-now-dot {
		animation: yl-open-pulse 2.4s ease-out infinite;
	}
}

@keyframes yl-open-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(15, 138, 61, 0.35);
	}

	70% {
		box-shadow: 0 0 0 9px rgba(15, 138, 61, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(15, 138, 61, 0);
	}
}